diff --git a/.github/ISSUE_TEMPLATE/bug_report.yaml b/.github/ISSUE_TEMPLATE/bug_report.yaml
index 1e478c71cb6..a7ca370e459 100644
--- a/.github/ISSUE_TEMPLATE/bug_report.yaml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yaml
@@ -68,7 +68,6 @@ body:
       description: Which package(s) are you using?
       multiple: true
       options:
-        - '@carbon/ibmdotcom-react'
         - '@carbon/ibmdotcom-web-components'
         - '@carbon/web-components'
         - '@carbon/ibmdotcom-styles'
@@ -82,8 +81,7 @@ body:
       label: CodeSandbox example
       description:
         'Our
-        [Web Components](https://www.ibm.com/standards/carbon/web-components)
-        and [React](https://www.ibm.com/standards/carbon/react) Storybook documentation includes links to
+        [Web Components](https://www.ibm.com/standards/carbon/web-components) Storybook documentation includes links to
         codesandboxes for each component. Use those to help re-create the issue.'
     validations:
       required: true
diff --git a/.github/workflows/automerge-content-updates.yml b/.github/workflows/automerge-content-updates.yml
new file mode 100644
index 00000000000..9da64fe4c46
--- /dev/null
+++ b/.github/workflows/automerge-content-updates.yml
@@ -0,0 +1,29 @@
+name: automerge-content-updates
+on:
+  push:
+    branches:
+      - 'main'
+
+concurrency:
+  group: automerge-content-updates-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  automerge-content-updates:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Merge to fix/content-updates
+        uses: devmasx/merge-branch@1.4.0
+        with:
+          type: now
+          target_branch: 'fix/content-updates'
+        env:
+          GITHUB_TOKEN: ${{secrets.MERGE_ACTION}}
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/automerge-mastheadv2.yml b/.github/workflows/automerge-mastheadv2.yml
new file mode 100644
index 00000000000..5db50dfa20a
--- /dev/null
+++ b/.github/workflows/automerge-mastheadv2.yml
@@ -0,0 +1,29 @@
+name: automerge-mastheadv2
+on:
+  push:
+    branches:
+      - 'main'
+
+concurrency:
+  group: automerge-mastheadv2-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  automerge-mastheadv2:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Merge to feat/masthead-v2-dev
+        uses: devmasx/merge-branch@1.4.0
+        with:
+          type: now
+          target_branch: 'feat/masthead-v2-dev'
+        env:
+          GITHUB_TOKEN: ${{secrets.MERGE_ACTION}}
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/automerge-storybook-controls.yml b/.github/workflows/automerge-storybook-controls.yml
new file mode 100644
index 00000000000..1c899cb9474
--- /dev/null
+++ b/.github/workflows/automerge-storybook-controls.yml
@@ -0,0 +1,29 @@
+name: automerge-storybook-controls
+on:
+  push:
+    branches:
+      - 'main'
+
+concurrency:
+  group: automerge-storybook-controls-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  automerge-storybook-controls:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Merge to feat/storybook-controls
+        uses: devmasx/merge-branch@1.4.0
+        with:
+          type: now
+          target_branch: 'feat/storybook-controls'
+        env:
+          GITHUB_TOKEN: ${{secrets.MERGE_ACTION}}
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/automerge.yml b/.github/workflows/automerge.yml
index 5657f4d0035..da8545a82ad 100644
--- a/.github/workflows/automerge.yml
+++ b/.github/workflows/automerge.yml
@@ -1,7 +1,7 @@
 name: automerge
 on:
   push:
-    branches: [ release/v1* ]
+    branches: [ release/v2* ]
 
 concurrency:
   group: automerge-${{ github.ref }}
diff --git a/.github/workflows/check-cdn.yml b/.github/workflows/check-cdn.yml
new file mode 100644
index 00000000000..3897cb3d7d5
--- /dev/null
+++ b/.github/workflows/check-cdn.yml
@@ -0,0 +1,32 @@
+name: check-cdn (Checks the CDN packages nightly)
+
+on:
+  schedule:
+    - cron: '0 1 * * 1-5'
+
+concurrency:
+  group: check-cdn-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  cypress:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Run Cypress tests over the CDN packages
+        run: yarn test:cdn-build:test
+        working-directory: packages/web-components
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/ci-check.yml b/.github/workflows/ci-check.yml
index 4b7d8c201c9..4bd4b21d8d3 100644
--- a/.github/workflows/ci-check.yml
+++ b/.github/workflows/ci-check.yml
@@ -2,9 +2,9 @@ name: ci-check
 
 on:
   push:
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
   pull_request:
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
 
 concurrency:
   group: ci-check-${{ github.ref }}
@@ -40,25 +40,8 @@ jobs:
       - name: Install dependencies
         run: yarn install --immutable --immutable-cache
       - name: Build project
-        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-react build
+        run: yarn lerna run --stream build
       - name: Install xvfb
         run: sudo apt-get install xvfb
       - name: Run basic checks
         run: xvfb-run --auto-servernum yarn lerna run --stream --prefix --verbose --scope=@carbon/ibmdotcom-web-components ci-check
-  a11y:
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: 18.15
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Build project
-        run: yarn build
-      - name: Install xvfb
-        run: sudo apt-get install xvfb
-      - name: Run a11y compliance tests
-        run: xvfb-run --auto-servernum --error-file=/dev/stderr yarn test:a11y
diff --git a/.github/workflows/codeql-analysis.yml b/.github/workflows/codeql-analysis.yml
index a6d4e3054de..24eea0f93d3 100644
--- a/.github/workflows/codeql-analysis.yml
+++ b/.github/workflows/codeql-analysis.yml
@@ -13,10 +13,10 @@ name: "CodeQL"
 
 on:
   push:
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
   pull_request:
     # The branches below must be a subset of the branches above
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
   schedule:
     - cron: '35 16 * * 1'
 
diff --git a/.github/workflows/dependabot-yarn-mirror.yml b/.github/workflows/dependabot-yarn-mirror.yml
new file mode 100644
index 00000000000..eb242ff7876
--- /dev/null
+++ b/.github/workflows/dependabot-yarn-mirror.yml
@@ -0,0 +1,43 @@
+name: dependabot-yarn-mirror
+
+on:
+  push:
+    branches: [ dependabot/**/* ]
+  pull_request:
+    branches: [ dependabot/**/* ]
+
+concurrency:
+  group: dependabot-yarn-mirror-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  yarn-mirror:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION || github.token}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Get branch name
+        shell: bash
+        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
+        id: get_branch
+      - name: Install dependencies
+        run: yarn install --no-immutable --immutable-cache
+      - name: Push changes
+        run: |
+          if [ -z "$(git status --porcelain)" ]; then
+            echo "Mirror is clean, exiting..."
+          else
+            git config --global user.email ${{ secrets.BOT_EMAIL }}
+            git config --global user.name ${{ secrets.BOT_NAME }}
+
+            git add -A
+            git commit -m "chore(yarn): update yarn offline mirror"
+            git push origin ${{ steps.get_branch.outputs.branch }}
+          fi
diff --git a/.github/workflows/deploy-canary.yml b/.github/workflows/deploy-canary.yml
new file mode 100644
index 00000000000..6c8e75a85a1
--- /dev/null
+++ b/.github/workflows/deploy-canary.yml
@@ -0,0 +1,287 @@
+name: deploy-canary (Deploy storybook environments to Github Pages)
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: deploy-canary-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  carbon-web-components:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --scope @carbon/web-components build
+
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/carbon-web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/web-components storybook
+        run: yarn build-storybook
+        working-directory: packages/carbon-web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/carbon-web-components/.env
+          mkdir -p builds
+          mv packages/carbon-web-components/storybook-static builds/carbon-web-components
+
+      - name: Deploying @carbon/web-components storybook to Github Pages
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf canary/carbon-web-components
+          mkdir -p canary
+          mv builds/carbon-web-components canary/carbon-web-components
+
+          git add canary/carbon-web-components
+          git commit -m "chore(deploy): deploy Carbon web components canary to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
+  web-components:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --ignore build
+
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components storybook
+        run: yarn build-storybook
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mkdir -p builds
+          mv packages/web-components/storybook-static builds/web-components
+
+      - name: Set env vars (RTL)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components RTL storybook
+        run: yarn build-storybook:rtl
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-rtl builds/web-components-rtl
+
+      - name: Set env vars (experimental)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+          C4D_FLAGS_ALL: true
+      - name: Building @carbon/ibmdotcom-web-components experimental storybook
+        run: yarn build-storybook:experimental
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-experimental builds/web-components-experimental
+
+      - name: Set env vars (react wrapper)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components react wrapper storybook
+        run: yarn build-storybook:react
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-react builds/web-components-react
+
+      - name: Deploying @carbon/ibmdotcom-web-components storybook to Github Pages
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf canary/web-components
+          rm -rf canary/web-components-react
+          rm -rf canary/web-components-rtl
+          rm -rf canary/web-components-experimental
+          mkdir -p canary
+          mv builds/web-components canary/web-components
+          mv builds/web-components-react canary/web-components-react
+          mv builds/web-components-rtl canary/web-components-rtl
+          mv builds/web-components-experimental canary/web-components-experimental
+
+          git add canary/web-components
+          git add canary/web-components-react
+          git add canary/web-components-rtl
+          git add canary/web-components-experimental
+          git commit -m "chore(deploy): deploy Web Components canary to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
+  services:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --ignore --ignore @carbon/ibmdotcom-web-components --ignore @carbon/web-components build
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/services/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-services JSDocs
+        run: yarn jsdoc
+        working-directory: packages/services
+      - name: Deploying @carbon/ibmdotcom-services JSDocs to IBM Cloud
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          mkdir -p builds
+          mv packages/services/docs builds/services
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf services
+          mv builds/services services
+
+          git add services
+          git commit -m "chore(deploy): deploy Services to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
+  utilities:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --scope @carbon/ibmdotcom-utilities build
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/utilities/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+      - name: Building @carbon/ibmdotcom-utilities JSDocs
+        run: yarn jsdoc
+        working-directory: packages/utilities
+      - name: Deploying @carbon/ibmdotcom-utilities JSDocs to IBM Cloud
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          mkdir -p builds
+          mv packages/utilities/docs builds/utilities
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf utilities
+          mv builds/utilities utilities
+
+          git add utilities
+          git commit -m "chore(deploy): deploy Utilities to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
diff --git a/.github/workflows/deploy-masthead-v2.yml b/.github/workflows/deploy-masthead-v2.yml
new file mode 100644
index 00000000000..3a327b4c075
--- /dev/null
+++ b/.github/workflows/deploy-masthead-v2.yml
@@ -0,0 +1,230 @@
+name: deploy-masthead-v2 (Deploy storybook environments to Github Pages)
+
+on:
+  push:
+    branches:
+      - feat/masthead-v2
+
+concurrency:
+  group: deploy-masthead-v2-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  web-components:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --stream build
+
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components storybook
+        run: yarn build-storybook
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mkdir -p builds
+          mv packages/web-components/storybook-static builds/web-components
+
+      - name: Set env vars (RTL)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components RTL storybook
+        run: yarn build-storybook:rtl
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-rtl builds/web-components-rtl
+
+      - name: Set env vars (experimental)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+          C4D_FLAGS_ALL: true
+      - name: Building @carbon/ibmdotcom-web-components experimental storybook
+        run: yarn build-storybook:experimental
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-experimental builds/web-components-experimental
+
+      - name: Set env vars (react wrapper)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components react wrapper storybook
+        run: yarn build-storybook:react
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-react builds/web-components-react
+
+      - name: Deploying @carbon/ibmdotcom-web-components storybook to Github Pages
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf masthead-v2/web-components
+          rm -rf masthead-v2/web-components-react
+          rm -rf masthead-v2/web-components-rtl
+          rm -rf masthead-v2/web-components-experimental
+          mkdir -p masthead-v2
+          mv builds/web-components masthead-v2/web-components
+          mv builds/web-components-react masthead-v2/web-components-react
+          mv builds/web-components-rtl masthead-v2/web-components-rtl
+          mv builds/web-components-experimental masthead-v2/web-components-experimental
+
+          git add masthead-v2/web-components
+          git add masthead-v2/web-components-react
+          git add masthead-v2/web-components-rtl
+          git add masthead-v2/web-components-experimental
+          git commit -m "chore(deploy): deploy Web Components masthead-v2 to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
+  services:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-web-components --ignore @carbon/ibmdotcom-services-store build
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/services/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-services JSDocs
+        run: yarn jsdoc
+        working-directory: packages/services
+      - name: Deploying @carbon/ibmdotcom-services JSDocs to IBM Cloud
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          mkdir -p builds
+          mv packages/services/docs builds/services
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf services
+          mv builds/services services
+
+          git add services
+          git commit -m "chore(deploy): deploy Services to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
+  utilities:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --scope @carbon/ibmdotcom-utilities build
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/utilities/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+      - name: Building @carbon/ibmdotcom-utilities JSDocs
+        run: yarn jsdoc
+        working-directory: packages/utilities
+      - name: Deploying @carbon/ibmdotcom-utilities JSDocs to IBM Cloud
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          mkdir -p builds
+          mv packages/utilities/docs builds/utilities
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf utilities
+          mv builds/utilities utilities
+
+          git add utilities
+          git commit -m "chore(deploy): deploy Utilities to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
diff --git a/.github/workflows/deploy-next.yml b/.github/workflows/deploy-next.yml
new file mode 100644
index 00000000000..857184cdd69
--- /dev/null
+++ b/.github/workflows/deploy-next.yml
@@ -0,0 +1,165 @@
+name: deploy-next (Deploy storybook environments to Github Pages)
+
+on:
+  push:
+    branches:
+      - release/v2*
+
+concurrency:
+  group: deploy-next-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  carbon-web-components:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --scope @carbon/web-components build
+
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/carbon-web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/web-components (next) storybook
+        run: yarn build-storybook
+        working-directory: packages/carbon-web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/carbon-web-components/.env
+          mkdir -p builds
+          mv packages/carbon-web-components/storybook-static builds/carbon-web-components
+
+      - name: Deploying @carbon/web-components (next) storybook to Github Pages
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf next/carbon-web-components
+          mkdir -p next
+          mv builds/carbon-web-components next/carbon-web-components
+
+          git add next/carbon-web-components
+          git commit -m "chore(deploy): deploy Carbon web components next to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
+  web-components:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          token: ${{secrets.MERGE_ACTION}}
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run build
+
+      - name: Set env vars
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components (next) storybook
+        run: yarn build-storybook
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mkdir -p builds
+          mv packages/web-components/storybook-static builds/web-components
+
+      - name: Set env vars (RTL)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+      - name: Building @carbon/ibmdotcom-web-components RTL storybook
+        run: yarn build-storybook:rtl
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-rtl builds/web-components-rtl
+
+      - name: Set env vars (react wrapper)
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
+          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
+          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
+          DDS_FLAGS_ALL: true
+      - name: Building @carbon/ibmdotcom-web-components react wrapper storybook
+        run: yarn build-storybook:react
+        working-directory: packages/web-components
+      - name: Move storybook to build folder
+        run: |
+          rm packages/web-components/.env
+          mv packages/web-components/storybook-static-react builds/web-components-react
+
+      - name: Deploying @carbon/ibmdotcom-web-components (next) storybook to Github Pages
+        run: |
+          git config --global user.email ${{ secrets.BOT_EMAIL }}
+          git config --global user.name ${{ secrets.BOT_NAME }}
+
+          git fetch origin gh-pages
+          git checkout -b gh-pages origin/gh-pages
+          git update-ref -d refs/remotes/origin/gh-pages
+          git pull origin gh-pages
+
+          rm -rf next/web-components
+          rm -rf next/web-components-rtl
+          rm -rf next/web-components-react
+          mkdir -p next
+          mv builds/web-components next/web-components
+          mv builds/web-components-rtl next/web-components-rtl
+          mv builds/web-components-react next/web-components-react
+
+          git add next/web-components
+          git add next/web-components-rtl
+          git add next/web-components-react
+          git commit -m "chore(deploy): deploy Web Components next to GitHub Pages"
+          git push origin gh-pages
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
diff --git a/.github/workflows/deploy-v1-next.yml b/.github/workflows/deploy-v1-next.yml
deleted file mode 100644
index 4659b1bbff5..00000000000
--- a/.github/workflows/deploy-v1-next.yml
+++ /dev/null
@@ -1,230 +0,0 @@
-name: deploy-v1-next (Deploy storybook environments to Github Pages)
-
-on:
-  push:
-    branches:
-      - release/v1*
-
-concurrency:
-  group: deploy-v1-next-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  carbon-web-components:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{secrets.MERGE_ACTION}}
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18.x'
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Build project
-        run: yarn lerna run --scope @carbon/web-components build
-
-      - name: Set env vars
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/carbon-web-components/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
-      - name: Building @carbon/web-components (v1 next) storybook
-        run: yarn build-storybook
-        working-directory: packages/carbon-web-components
-      - name: Move storybook to build folder
-        run: |
-          rm packages/carbon-web-components/.env
-          mkdir -p builds
-          mv packages/carbon-web-components/storybook-static builds/carbon-web-components
-
-      - name: Deploying @carbon/web-components (v1 next) storybook to Github Pages
-        run: |
-          git config --global user.email ${{ secrets.BOT_EMAIL }}
-          git config --global user.name ${{ secrets.BOT_NAME }}
-
-          git fetch origin gh-pages
-          git checkout -b gh-pages origin/gh-pages
-          git update-ref -d refs/remotes/origin/gh-pages
-          git pull origin gh-pages
-
-          rm -rf v1/next/carbon-web-components
-          mv builds/carbon-web-components v1/next/carbon-web-components
-
-          git add v1/next/carbon-web-components
-          git commit -m "chore(deploy): deploy Carbon web components v1 next to GitHub Pages"
-          git push origin gh-pages
-      - uses: act10ns/slack@v2
-        if: failure()
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-        with:
-          status: ${{ job.status }}
-  react:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{secrets.MERGE_ACTION}}
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18.x'
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Build project
-        run: yarn lerna run build
-
-      - name: Set env vars
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/react/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
-      - name: Building @carbon/ibmdotcom-react storybook
-        run: yarn build-storybook
-        working-directory: packages/react
-      - name: Move storybook to build folder
-        run: |
-          rm packages/react/.env
-          mkdir -p builds
-          mv packages/react/storybook-static builds/react
-
-      - name: Set env vars (RTL)
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/react/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
-      - name: Building @carbon/ibmdotcom-react (RTL) storybook
-        run: yarn build-storybook:rtl
-        working-directory: packages/react
-      - name: Move storybook to build folder
-        run: |
-          rm packages/react/.env
-          mv packages/react/storybook-static-rtl builds/react-rtl
-
-      - name: Deploying @carbon/ibmdotcom-react (next) storybook to Github Pages
-        run: |
-          git config --global user.email ${{ secrets.BOT_EMAIL }}
-          git config --global user.name ${{ secrets.BOT_NAME }}
-
-          git fetch origin gh-pages
-          git checkout -b gh-pages origin/gh-pages
-          git update-ref -d refs/remotes/origin/gh-pages
-          git pull origin gh-pages
-
-          rm -rf v1/next/react v1/next/react-rtl
-          mv builds/react builds/react-rtl v1/next
-
-          git add v1/next/react v1/next/react-rtl
-          git commit -m "chore(deploy): deploy React v1 next to GitHub Pages"
-          git push origin gh-pages
-      - uses: act10ns/slack@v2
-        if: failure()
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-        with:
-          status: ${{ job.status }}
-  web-components:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{secrets.MERGE_ACTION}}
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: '18.x'
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Build project
-        run: yarn lerna run --ignore @carbon/ibmdotcom-react build
-
-      - name: Set env vars
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/web-components/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
-      - name: Building @carbon/ibmdotcom-web-components (next) storybook
-        run: yarn build-storybook
-        working-directory: packages/web-components
-      - name: Move storybook to build folder
-        run: |
-          rm packages/web-components/.env
-          mkdir -p builds
-          mv packages/web-components/storybook-static builds/web-components
-
-      - name: Set env vars (RTL)
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/web-components/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
-      - name: Building @carbon/ibmdotcom-web-components RTL storybook
-        run: yarn build-storybook:rtl
-        working-directory: packages/web-components
-      - name: Move storybook to build folder
-        run: |
-          rm packages/web-components/.env
-          mv packages/web-components/storybook-static-rtl builds/web-components-rtl
-
-      - name: Set env vars (react wrapper)
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/web-components/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PROFILE_HOST: ${{ secrets.PROFILE_HOST }}
-          DDS_FLAGS_ALL: true
-      - name: Building @carbon/ibmdotcom-web-components react wrapper storybook
-        run: yarn build-storybook:react
-        working-directory: packages/web-components
-      - name: Move storybook to build folder
-        run: |
-          rm packages/web-components/.env
-          mv packages/web-components/storybook-static-react builds/web-components-react
-
-      - name: Deploying @carbon/ibmdotcom-web-components (next) storybook to Github Pages
-        run: |
-          git config --global user.email ${{ secrets.BOT_EMAIL }}
-          git config --global user.name ${{ secrets.BOT_NAME }}
-
-          git fetch origin gh-pages
-          git checkout -b gh-pages origin/gh-pages
-          git update-ref -d refs/remotes/origin/gh-pages
-          git pull origin gh-pages
-
-          rm -rf v1/next/builds/web-components v1/next/builds/web-components-rtl v1/next/builds/web-components-react
-          mkdir -p v1/next
-          mv builds/web-components builds/web-components-rtl builds/web-components-react v1/next
-
-          git add v1/next/web-components v1/next/web-components-rtl v1/next/web-components-react
-          git commit -m "chore(deploy): deploy Web Components v1 next to GitHub Pages"
-          git push origin gh-pages
-      - uses: act10ns/slack@v2
-        if: failure()
-        env:
-          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
-        with:
-          status: ${{ job.status }}
diff --git a/.github/workflows/e2e-integration.yml b/.github/workflows/e2e-integration.yml
new file mode 100644
index 00000000000..7da8728f671
--- /dev/null
+++ b/.github/workflows/e2e-integration.yml
@@ -0,0 +1,42 @@
+name: e2e-integration
+
+on:
+  push:
+    branches: [ main, release/*, feat/masthead-v2, feat/masthead-v2-dev ]
+  schedule:
+    - cron: '0 20 * * 1-5'
+
+concurrency:
+  group: e2e-integration-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  web-components:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: macos-latest
+    strategy:
+      matrix:
+        node-version: ['18.x']
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build
+        run: yarn lerna run --stream build
+      - name: Build CDN components
+        run: yarn build:components
+        working-directory: packages/web-components
+      - name: Run e2e codesandbox tests
+        run: yarn test:e2e:build && yarn test:e2e:test:no-percy
+        working-directory: packages/web-components
+      - uses: act10ns/slack@v2
+        if: failure()
+        env:
+          SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+        with:
+          status: ${{ job.status }}
diff --git a/.github/workflows/e2e-tests-parallel.yml b/.github/workflows/e2e-tests-parallel.yml
index 5eed992722c..7c80a85e5d8 100644
--- a/.github/workflows/e2e-tests-parallel.yml
+++ b/.github/workflows/e2e-tests-parallel.yml
@@ -2,9 +2,9 @@ name: e2e-tests-parallel
 
 on:
   push:
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
   pull_request:
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
 
 concurrency:
   group: e2e-tests-parallel${{ github.ref }}
@@ -50,8 +50,8 @@ jobs:
         with:
           env-file: packages/web-components/.env
         env:
-          DDS_CLOUD_MASTHEAD: true
-          DDS_FLAGS_ALL: true
+          C4D_CLOUD_MASTHEAD: true
+          C4D_FLAGS_ALL: true
 
       - name: Build storybook
         working-directory: packages/web-components
@@ -154,139 +154,3 @@ jobs:
       - name: Failure file exists, exit with error
         if: steps.check_files.outputs.files_exists == 'true'
         run: exit 1
-
-  install-react:
-    strategy:
-      matrix:
-        os: [ ubuntu-20.04 ]
-        node-version: [ 18.x ]
-        browser: [ chromium ]
-    runs-on: ${{ matrix.os }}
-    timeout-minutes: 120
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-      - uses: actions/cache@v3
-        name: Download any existing cache
-        id: yarn-cache
-        with:
-          path: |
-            **/node_modules
-            /home/runner/.cache/Cypress
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ matrix.os }}-yarn-v5${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ matrix.os }}-yarn
-
-      - name: Installing dependencies (if not cached)
-        if: steps.yarn-cache.outputs.cache-hit != 'true'
-        run: yarn install --immutable --immutable-cache
-
-      - name: Build project
-        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-web-components --ignore @carbon/ibmdotcom-services-store build
-
-      - name: Build storybook
-        working-directory: packages/react
-        run: yarn build-storybook
-
-      - name: Save build folder
-        uses: actions/upload-artifact@v3
-        with:
-          name: storybook-build
-          path: packages/react/storybook-static
-
-      - name: Clear remnant failure files
-        uses: geekyeggo/delete-artifact@v2
-        with:
-          name: failure-react.txt
-
-  react-tests:
-    runs-on: ubuntu-20.04
-    needs: install-react
-    continue-on-error: true
-    strategy:
-      fail-fast: false
-      matrix:
-        # run copies of the current job in parallel
-        containers: [1, 2, 3, 4, 5]
-        os: [ ubuntu-20.04 ]
-        node-version: [ 18.x ]
-        browser: [ chromium ]
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v4
-      - name: Use Node.js
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-
-      - name: Download the build folders
-        uses: actions/download-artifact@v3
-        with:
-          name: storybook-build
-          path: packages/react/storybook-static
-
-      - uses: actions/cache@v3
-        name: Retrieve yarn cache
-        id: yarn-cache
-        with:
-          path: |
-            **/node_modules
-            /home/runner/.cache/Cypress
-            ${{ steps.yarn-cache-dir-path.outputs.dir }}
-          key: ${{ matrix.os }}-yarn-v5${{ hashFiles('**/yarn.lock') }}
-          restore-keys: |
-            ${{ matrix.os }}-yarn
-
-      - name: 'Run e2e tests (chromium)'
-        if: matrix.browser == 'chromium'
-        id: cypress-tests-react
-        continue-on-error: true
-        working-directory: packages/react
-        run: yarn test:e2e-storybook:test:parallel
-        env:
-          CI_BUILD_ID: '${{ github.sha }}-${{ github.workflow }}-wc'
-          CYPRESS_API_URL: "https://sorry-cypress-director.qfl95m0zv01.us-east.codeengine.appdomain.cloud"
-          CYPRESS_CACHE_FOLDER: /home/runner/.cache/Cypress
-
-      - name: Create failure file if job failed
-        id: react-no-tests-ran
-        if: steps.cypress-tests-react.outcome == 'failure'
-        run: touch failure-react.txt
-
-      - name: Save failure file
-        if: steps.cypress-tests-react.outcome == 'failure'
-        uses: actions/upload-artifact@v3
-        with:
-          name: failure-react
-          path: failure-react.txt
-
-      - name: Exit upon failure
-        if: steps.cypress-tests-react.outcome == 'failure'
-        run: exit 1
-
-  react-tests-completed:
-    if: always()
-    runs-on: ubuntu-20.04
-    needs: react-tests
-    steps:
-      - uses: actions/download-artifact@v3
-        continue-on-error: true
-        with:
-          name: failure-react
-
-      - name: Check failure file existence
-        continue-on-error: true
-        id: check_files
-        uses: andstor/file-existence-action@v2
-        with:
-          files: "failure-react.txt"
-
-      - name: Failure file exists, exit with error
-        if: steps.check_files.outputs.files_exists == 'true'
-        run: exit 1
diff --git a/.github/workflows/e2e-tests.yml b/.github/workflows/e2e-tests.yml
new file mode 100644
index 00000000000..4c9b63b5b07
--- /dev/null
+++ b/.github/workflows/e2e-tests.yml
@@ -0,0 +1,46 @@
+name: e2e-tests
+
+on:
+  push:
+    branches: [ main, release/*, feat/*, fix/content-updates ]
+  pull_request:
+    branches: [ main, release/*, feat/*, fix/content-updates ]
+
+concurrency:
+  group: e2e-tests-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  web-components:
+    strategy:
+      matrix:
+        os: [ macos-latest ]
+        node-version: [ 18.x ]
+        browser: [ chromium ]
+    runs-on: ${{ matrix.os }}
+    timeout-minutes: 120
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node-version }}
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn lerna run --stream build
+      - name: Set Cloud Masthead env var
+        uses: ./.github/actions/set-dotenv
+        with:
+          env-file: packages/web-components/.env
+        env:
+          C4D_CLOUD_MASTHEAD: true
+          C4D_FLAGS_ALL: true
+      - name: Build storybook
+        working-directory: packages/web-components
+        run: yarn build-storybook
+      - name: Run e2e tests (chromium)
+        if: matrix.browser == 'chromium'
+        working-directory: packages/web-components
+        run: yarn test:e2e-storybook:test:no-percy
diff --git a/.github/workflows/percy-update-base.yml b/.github/workflows/percy-update-base.yml
index 33e5acb38d8..6939a63e80d 100644
--- a/.github/workflows/percy-update-base.yml
+++ b/.github/workflows/percy-update-base.yml
@@ -2,71 +2,13 @@ name: percy-update-base
 
 on:
   push:
-    branches: [ v1 ]
+    branches: [ main, release/*, feat/*, fix/content-updates ]
 
 concurrency:
   group: percy-update-base-${{ github.ref }}
   cancel-in-progress: true
 
 jobs:
-  react-storybook:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node-version: ['18.x']
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Install xvfb
-        run: sudo apt-get install xvfb
-      - name: Build
-        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-services-store --ignore @carbon/ibmdotcom-web-components build
-      - name: Set env vars
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/react/.env
-        env:
-          KALTURA_PARTNER_ID: ${{ secrets.KALTURA_PARTNER_ID }}
-          KALTURA_UICONF_ID: ${{ secrets.KALTURA_UICONF_ID }}
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_REACT }}
-      - name: Run percy storybook
-        run: yarn visual-snapshot
-        working-directory: packages/react
-  react-storybook-e2e:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node-version: [ '18.x' ]
-    steps:
-      - uses: actions/checkout@v4
-      - name: Use Node.js 18.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Install xvfb
-        run: sudo apt-get install xvfb
-      - name: Build
-        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-services-store --ignore @carbon/ibmdotcom-web-components build
-      - name: Set env vars
-        uses: ./.github/actions/set-dotenv
-        with:
-          env-file: packages/react/.env
-        env:
-          PERCY_TOKEN: ${{ secrets.PERCY_TOKEN_REACT_E2E }}
-      - name: Run e2e tests
-        run: yarn build-storybook && yarn test:e2e-storybook:test
-        working-directory: packages/react
   web-components:
     if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
     runs-on: ubuntu-20.04
@@ -115,7 +57,7 @@ jobs:
       - name: Install xvfb
         run: sudo apt-get install xvfb
       - name: Build
-        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-react --stream --ignore @carbon/ibmdotcom-web-components --ignore @carbon/ibmdotcom-styles --ignore @carbon/ibmdotcom-services-store --ignore @carbon/ibmdotcom-utilities --ignore @carbon/ibmdotcom-services build
+        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-web-components --ignore @carbon/ibmdotcom-styles --ignore @carbon/ibmdotcom-services-store --ignore @carbon/ibmdotcom-utilities --ignore @carbon/ibmdotcom-services build
       - name: Set env vars
         uses: ./.github/actions/set-dotenv
         with:
diff --git a/.github/workflows/publish-alpha.yml b/.github/workflows/publish-alpha.yml
new file mode 100644
index 00000000000..e714ec5bfba
--- /dev/null
+++ b/.github/workflows/publish-alpha.yml
@@ -0,0 +1,36 @@
+name: publish-alpha (Publish Alpha release to NPM)
+
+on:
+  push:
+    branches:
+      - feat/masthead-v2
+
+concurrency:
+  group: publish-alpha-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn build
+      - name: Set NPM token
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_API_KEY }}" >> .npmrc
+      - name: Run Lerna
+        run: yarn lerna publish --no-verify-access --canary minor --preid alpha.${{github.run_id}} --dist-tag alpha --force-publish --no-push --no-git-tag-version --yes
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/publish-canary.yml b/.github/workflows/publish-canary.yml
new file mode 100644
index 00000000000..cc137b8f6c9
--- /dev/null
+++ b/.github/workflows/publish-canary.yml
@@ -0,0 +1,48 @@
+name: publish-canary (Publish Canary release to NPM)
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency:
+  group: publish-canary-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn build
+      - name: Set NPM token
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_API_KEY }}" >> .npmrc
+      - name: Run Lerna
+        run: yarn lerna publish --no-verify-access --canary minor --preid canary.${{github.run_id}} --dist-tag canary --force-publish --no-push --no-git-tag-version --yes
+      - name: Deploy NextJS Test
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          repository: carbon-design-system/carbon-for-ibm-dotcom-nextjs-test
+          token: ${{ secrets.GH_DISPATCH_TOKEN }}
+          event-type: deploy-canary
+      - name: Deploy Web Components HTML Test
+        uses: peter-evans/repository-dispatch@v2
+        with:
+          repository: carbon-design-system/carbon-for-ibm-dotcom-web-components-test
+          token: ${{ secrets.GH_DISPATCH_TOKEN }}
+          event-type: deploy-canary
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/publish-nightly.yml b/.github/workflows/publish-nightly.yml
new file mode 100644
index 00000000000..bbaa77ad5a2
--- /dev/null
+++ b/.github/workflows/publish-nightly.yml
@@ -0,0 +1,35 @@
+name: publish-nightly (Publish Nightly release to NPM)
+
+on:
+  schedule:
+    - cron: '0 1 * * 1-5'
+
+concurrency:
+  group: publish-nightly-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  publish:
+    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
+    runs-on: ubuntu-20.04
+    env:
+      SLACK_WEBHOOK_URL: ${{ secrets.SLACK_WEBHOOK_URL }}
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js 18.x
+        uses: actions/setup-node@v4
+        with:
+          node-version: '18.x'
+          cache: 'yarn'
+      - name: Install dependencies
+        run: yarn install --immutable --immutable-cache
+      - name: Build project
+        run: yarn build
+      - name: Set NPM token
+        run: echo "//registry.npmjs.org/:_authToken=${{ secrets.NPM_API_KEY }}" >> .npmrc
+      - name: Run Lerna
+        run: yarn lerna publish --no-verify-access --canary minor --dist-tag nightly --preid nightly.${{github.run_id}} --no-push --no-git-tag-version --yes
+      - uses: act10ns/slack@v2
+        with:
+          status: ${{ job.status }}
+        if: failure()
diff --git a/.github/workflows/publish-staging.yml b/.github/workflows/publish-staging.yml
index 28a45a0e2ab..ab074dbd33c 100644
--- a/.github/workflows/publish-staging.yml
+++ b/.github/workflows/publish-staging.yml
@@ -3,7 +3,7 @@ name: publish-staging (Trigger staging environments to update)
 on:
   push:
     tags:
-      - 'v1*'
+      - 'v2*'
 
 concurrency:
   group: publish-staging-${{ github.ref }}
diff --git a/.github/workflows/snapshot-update.yml b/.github/workflows/snapshot-update.yml
deleted file mode 100644
index b89ffecb7d5..00000000000
--- a/.github/workflows/snapshot-update.yml
+++ /dev/null
@@ -1,49 +0,0 @@
-name: snapshot-update
-
-on:
-  push:
-    branches: [ v1 ]
-
-concurrency:
-  group: snapshot-update-${{ github.ref }}
-  cancel-in-progress: true
-
-jobs:
-  react:
-    if: github.repository == 'carbon-design-system/carbon-for-ibm-dotcom'
-    runs-on: ubuntu-20.04
-    strategy:
-      matrix:
-        node-version: ['14.x']
-    steps:
-      - uses: actions/checkout@v4
-        with:
-          token: ${{secrets.MERGE_ACTION}}
-      - name: Use Node.js 14.x
-        uses: actions/setup-node@v4
-        with:
-          node-version: ${{ matrix.node-version }}
-          cache: 'yarn'
-      - name: Get branch name
-        shell: bash
-        run: echo "##[set-output name=branch;]$(echo ${GITHUB_REF#refs/heads/})"
-        id: get_branch
-      - name: Install dependencies
-        run: yarn install --immutable --immutable-cache
-      - name: Build project
-        run: yarn lerna run --stream --ignore @carbon/ibmdotcom-web-components --ignore @carbon/ibmdotcom-services-store build
-      - name: Run snapshot update
-        working-directory: packages/react
-        run: yarn test:unit:updateSnapshot
-      - name: Push changes
-        run: |
-          if [ -z "$(git status --porcelain)" ]; then
-            echo "Mirror is clean, exiting..."
-          else
-            git config --global user.email ${{ secrets.BOT_EMAIL }}
-            git config --global user.name ${{ secrets.BOT_NAME }}
-
-            git add -A
-            git commit -m "chore(snapshot): update react snapshot files"
-            git push origin ${{ steps.get_branch.outputs.branch }}
-          fi
diff --git a/.prettierignore b/.prettierignore
index daa0241470c..8d2946f3f69 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -20,4 +20,5 @@ CHANGELOG.md
 packages/**/src/internal/vendor
 packages/**/tests/e2e/cypress
 packages/**/tests/e2e-storybook/cypress
+packages/carbon-web-components/scss
 custom-elements.json
diff --git a/.yarn/cache/@actions-core-npm-1.10.0-6885534582-40f94a994d.zip b/.yarn/cache/@actions-core-npm-1.10.0-6885534582-40f94a994d.zip
new file mode 100644
index 00000000000..a10b01ab534
Binary files /dev/null and b/.yarn/cache/@actions-core-npm-1.10.0-6885534582-40f94a994d.zip differ
diff --git a/.yarn/cache/@actions-core-npm-1.10.1-3cb1000b4d-d32af783ec.zip b/.yarn/cache/@actions-core-npm-1.10.1-3cb1000b4d-d32af783ec.zip
deleted file mode 100644
index e5b133de6cd..00000000000
Binary files a/.yarn/cache/@actions-core-npm-1.10.1-3cb1000b4d-d32af783ec.zip and /dev/null differ
diff --git a/.yarn/cache/@actions-http-client-npm-2.1.1-0483f7844f-9bfc6b96c9.zip b/.yarn/cache/@actions-http-client-npm-2.1.1-0483f7844f-9bfc6b96c9.zip
new file mode 100644
index 00000000000..2b75dfbb8b2
Binary files /dev/null and b/.yarn/cache/@actions-http-client-npm-2.1.1-0483f7844f-9bfc6b96c9.zip differ
diff --git a/.yarn/cache/@actions-http-client-npm-2.2.0-5cded732ee-af2051e056.zip b/.yarn/cache/@actions-http-client-npm-2.2.0-5cded732ee-af2051e056.zip
deleted file mode 100644
index 672c1e8d2c0..00000000000
Binary files a/.yarn/cache/@actions-http-client-npm-2.2.0-5cded732ee-af2051e056.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-code-frame-npm-7.22.10-bc14e2ec1b-53620d831c.zip b/.yarn/cache/@babel-code-frame-npm-7.22.10-bc14e2ec1b-53620d831c.zip
new file mode 100644
index 00000000000..3bb83ea2430
Binary files /dev/null and b/.yarn/cache/@babel-code-frame-npm-7.22.10-bc14e2ec1b-53620d831c.zip differ
diff --git a/.yarn/cache/@babel-compat-data-npm-7.23.2-763f35b25b-c18eccd139.zip b/.yarn/cache/@babel-compat-data-npm-7.23.2-763f35b25b-c18eccd139.zip
new file mode 100644
index 00000000000..22ccdfe8909
Binary files /dev/null and b/.yarn/cache/@babel-compat-data-npm-7.23.2-763f35b25b-c18eccd139.zip differ
diff --git a/.yarn/cache/@babel-core-npm-7.22.10-54c0aaa674-3d8be31a9c.zip b/.yarn/cache/@babel-core-npm-7.22.10-54c0aaa674-3d8be31a9c.zip
new file mode 100644
index 00000000000..49df25108f3
Binary files /dev/null and b/.yarn/cache/@babel-core-npm-7.22.10-54c0aaa674-3d8be31a9c.zip differ
diff --git a/.yarn/cache/@babel-core-npm-7.23.3-9c9bbb2dbe-f9e7016b62.zip b/.yarn/cache/@babel-core-npm-7.23.3-9c9bbb2dbe-f9e7016b62.zip
deleted file mode 100644
index c20aba2ec0d..00000000000
Binary files a/.yarn/cache/@babel-core-npm-7.23.3-9c9bbb2dbe-f9e7016b62.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-generator-npm-7.22.10-1a9a2f9e75-b0df026569.zip b/.yarn/cache/@babel-generator-npm-7.22.10-1a9a2f9e75-b0df026569.zip
new file mode 100644
index 00000000000..046bcbc68d5
Binary files /dev/null and b/.yarn/cache/@babel-generator-npm-7.22.10-1a9a2f9e75-b0df026569.zip differ
diff --git a/.yarn/cache/@babel-generator-npm-7.23.0-08841c5369-bd1598bd35.zip b/.yarn/cache/@babel-generator-npm-7.23.0-08841c5369-bd1598bd35.zip
new file mode 100644
index 00000000000..805b8094df5
Binary files /dev/null and b/.yarn/cache/@babel-generator-npm-7.23.0-08841c5369-bd1598bd35.zip differ
diff --git a/.yarn/cache/@babel-helper-builder-binary-assignment-operator-visitor-npm-7.22.10-6970f534f9-6de4a1f30e.zip b/.yarn/cache/@babel-helper-builder-binary-assignment-operator-visitor-npm-7.22.10-6970f534f9-6de4a1f30e.zip
new file mode 100644
index 00000000000..c37c00f4657
Binary files /dev/null and b/.yarn/cache/@babel-helper-builder-binary-assignment-operator-visitor-npm-7.22.10-6970f534f9-6de4a1f30e.zip differ
diff --git a/.yarn/cache/@babel-helper-compilation-targets-npm-7.22.10-20c2c02a4f-974085237b.zip b/.yarn/cache/@babel-helper-compilation-targets-npm-7.22.10-20c2c02a4f-974085237b.zip
new file mode 100644
index 00000000000..e3ef26a1ccc
Binary files /dev/null and b/.yarn/cache/@babel-helper-compilation-targets-npm-7.22.10-20c2c02a4f-974085237b.zip differ
diff --git a/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.22.10-ce515b2cfb-79e2b199fe.zip b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.22.10-ce515b2cfb-79e2b199fe.zip
new file mode 100644
index 00000000000..97e0061b71f
Binary files /dev/null and b/.yarn/cache/@babel-helper-create-class-features-plugin-npm-7.22.10-ce515b2cfb-79e2b199fe.zip differ
diff --git a/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.22.9-5ff9a824ff-6f3475a766.zip b/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.22.9-5ff9a824ff-6f3475a766.zip
new file mode 100644
index 00000000000..d7ec7087905
Binary files /dev/null and b/.yarn/cache/@babel-helper-create-regexp-features-plugin-npm-7.22.9-5ff9a824ff-6f3475a766.zip differ
diff --git a/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.5-7bc52eec61-248532077d.zip b/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.5-7bc52eec61-248532077d.zip
new file mode 100644
index 00000000000..74536fc103d
Binary files /dev/null and b/.yarn/cache/@babel-helper-environment-visitor-npm-7.22.5-7bc52eec61-248532077d.zip differ
diff --git a/.yarn/cache/@babel-helper-member-expression-to-functions-npm-7.22.5-04d5cbe959-bb51f195c1.zip b/.yarn/cache/@babel-helper-member-expression-to-functions-npm-7.22.5-04d5cbe959-bb51f195c1.zip
new file mode 100644
index 00000000000..c5c994f987d
Binary files /dev/null and b/.yarn/cache/@babel-helper-member-expression-to-functions-npm-7.22.5-04d5cbe959-bb51f195c1.zip differ
diff --git a/.yarn/cache/@babel-helper-module-imports-npm-7.22.5-399b6063db-d8296447c0.zip b/.yarn/cache/@babel-helper-module-imports-npm-7.22.5-399b6063db-d8296447c0.zip
new file mode 100644
index 00000000000..91d86c61f8e
Binary files /dev/null and b/.yarn/cache/@babel-helper-module-imports-npm-7.22.5-399b6063db-d8296447c0.zip differ
diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.22.9-dfa9ef05d1-80244f45e3.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.22.9-dfa9ef05d1-80244f45e3.zip
new file mode 100644
index 00000000000..07802c1a726
Binary files /dev/null and b/.yarn/cache/@babel-helper-module-transforms-npm-7.22.9-dfa9ef05d1-80244f45e3.zip differ
diff --git a/.yarn/cache/@babel-helper-module-transforms-npm-7.23.0-6d065838a4-d72fe444f7.zip b/.yarn/cache/@babel-helper-module-transforms-npm-7.23.0-6d065838a4-d72fe444f7.zip
new file mode 100644
index 00000000000..b2273323784
Binary files /dev/null and b/.yarn/cache/@babel-helper-module-transforms-npm-7.23.0-6d065838a4-d72fe444f7.zip differ
diff --git a/.yarn/cache/@babel-helper-remap-async-to-generator-npm-7.22.9-3ca47fbc3b-0553807944.zip b/.yarn/cache/@babel-helper-remap-async-to-generator-npm-7.22.9-3ca47fbc3b-0553807944.zip
new file mode 100644
index 00000000000..5a2a830d581
Binary files /dev/null and b/.yarn/cache/@babel-helper-remap-async-to-generator-npm-7.22.9-3ca47fbc3b-0553807944.zip differ
diff --git a/.yarn/cache/@babel-helper-replace-supers-npm-7.22.9-d354e39111-b5a740a95f.zip b/.yarn/cache/@babel-helper-replace-supers-npm-7.22.9-d354e39111-b5a740a95f.zip
new file mode 100644
index 00000000000..eab8e71a8ce
Binary files /dev/null and b/.yarn/cache/@babel-helper-replace-supers-npm-7.22.9-d354e39111-b5a740a95f.zip differ
diff --git a/.yarn/cache/@babel-helper-validator-identifier-npm-7.22.5-4536624779-12cb7d4535.zip b/.yarn/cache/@babel-helper-validator-identifier-npm-7.22.5-4536624779-12cb7d4535.zip
new file mode 100644
index 00000000000..866ea59e02d
Binary files /dev/null and b/.yarn/cache/@babel-helper-validator-identifier-npm-7.22.5-4536624779-12cb7d4535.zip differ
diff --git a/.yarn/cache/@babel-helper-validator-option-npm-7.22.5-eaf22b24ab-bbeca8a85e.zip b/.yarn/cache/@babel-helper-validator-option-npm-7.22.5-eaf22b24ab-bbeca8a85e.zip
new file mode 100644
index 00000000000..133d4a3b4d3
Binary files /dev/null and b/.yarn/cache/@babel-helper-validator-option-npm-7.22.5-eaf22b24ab-bbeca8a85e.zip differ
diff --git a/.yarn/cache/@babel-helper-wrap-function-npm-7.22.10-0c1a0d11e1-b59629a983.zip b/.yarn/cache/@babel-helper-wrap-function-npm-7.22.10-0c1a0d11e1-b59629a983.zip
new file mode 100644
index 00000000000..1a4a5e5759c
Binary files /dev/null and b/.yarn/cache/@babel-helper-wrap-function-npm-7.22.10-0c1a0d11e1-b59629a983.zip differ
diff --git a/.yarn/cache/@babel-helpers-npm-7.22.10-83a2c2542a-a5e0371ee5.zip b/.yarn/cache/@babel-helpers-npm-7.22.10-83a2c2542a-a5e0371ee5.zip
new file mode 100644
index 00000000000..d059664fd42
Binary files /dev/null and b/.yarn/cache/@babel-helpers-npm-7.22.10-83a2c2542a-a5e0371ee5.zip differ
diff --git a/.yarn/cache/@babel-helpers-npm-7.23.2-aa45e8b40c-d66d949d41.zip b/.yarn/cache/@babel-helpers-npm-7.23.2-aa45e8b40c-d66d949d41.zip
deleted file mode 100644
index ad0af3e513a..00000000000
Binary files a/.yarn/cache/@babel-helpers-npm-7.23.2-aa45e8b40c-d66d949d41.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-highlight-npm-7.22.10-cea13c397b-faea6aa09e.zip b/.yarn/cache/@babel-highlight-npm-7.22.10-cea13c397b-faea6aa09e.zip
new file mode 100644
index 00000000000..7630325ce85
Binary files /dev/null and b/.yarn/cache/@babel-highlight-npm-7.22.10-cea13c397b-faea6aa09e.zip differ
diff --git a/.yarn/cache/@babel-parser-npm-7.22.10-a7c9b29e4f-a11e93c9b3.zip b/.yarn/cache/@babel-parser-npm-7.22.10-a7c9b29e4f-a11e93c9b3.zip
new file mode 100644
index 00000000000..7f8b049874b
Binary files /dev/null and b/.yarn/cache/@babel-parser-npm-7.22.10-a7c9b29e4f-a11e93c9b3.zip differ
diff --git a/.yarn/cache/@babel-parser-npm-7.23.0-8a7b151672-201641e068.zip b/.yarn/cache/@babel-parser-npm-7.23.0-8a7b151672-201641e068.zip
new file mode 100644
index 00000000000..3c97c6dce7a
Binary files /dev/null and b/.yarn/cache/@babel-parser-npm-7.23.0-8a7b151672-201641e068.zip differ
diff --git a/.yarn/cache/@babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression-npm-7.22.15-4086cea411-8910ca21a7.zip b/.yarn/cache/@babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression-npm-7.22.15-4086cea411-8910ca21a7.zip
new file mode 100644
index 00000000000..48a7b5b6bc6
Binary files /dev/null and b/.yarn/cache/@babel-plugin-bugfix-safari-id-destructuring-collision-in-function-expression-npm-7.22.15-4086cea411-8910ca21a7.zip differ
diff --git a/.yarn/cache/@babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining-npm-7.22.15-1bb5067028-fbefedc0da.zip b/.yarn/cache/@babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining-npm-7.22.15-1bb5067028-fbefedc0da.zip
new file mode 100644
index 00000000000..05950961def
Binary files /dev/null and b/.yarn/cache/@babel-plugin-bugfix-v8-spread-parameters-in-optional-chaining-npm-7.22.15-1bb5067028-fbefedc0da.zip differ
diff --git a/.yarn/cache/@babel-plugin-proposal-decorators-npm-7.22.7-4ddbb6633f-efbca342d6.zip b/.yarn/cache/@babel-plugin-proposal-decorators-npm-7.22.7-4ddbb6633f-efbca342d6.zip
new file mode 100644
index 00000000000..77c6afec43d
Binary files /dev/null and b/.yarn/cache/@babel-plugin-proposal-decorators-npm-7.22.7-4ddbb6633f-efbca342d6.zip differ
diff --git a/.yarn/cache/@babel-plugin-proposal-decorators-npm-7.23.3-7b682e4cb2-526d0228f8.zip b/.yarn/cache/@babel-plugin-proposal-decorators-npm-7.23.3-7b682e4cb2-526d0228f8.zip
deleted file mode 100644
index 59e80b62e21..00000000000
Binary files a/.yarn/cache/@babel-plugin-proposal-decorators-npm-7.23.3-7b682e4cb2-526d0228f8.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-proposal-export-default-from-npm-7.22.5-3d93c0cd9b-fc0ddcebdd.zip b/.yarn/cache/@babel-plugin-proposal-export-default-from-npm-7.22.5-3d93c0cd9b-fc0ddcebdd.zip
new file mode 100644
index 00000000000..646eb9f0a50
Binary files /dev/null and b/.yarn/cache/@babel-plugin-proposal-export-default-from-npm-7.22.5-3d93c0cd9b-fc0ddcebdd.zip differ
diff --git a/.yarn/cache/@babel-plugin-proposal-export-default-from-npm-7.23.3-cd944e2b26-f5a438413b.zip b/.yarn/cache/@babel-plugin-proposal-export-default-from-npm-7.23.3-cd944e2b26-f5a438413b.zip
deleted file mode 100644
index 2eb9b9b0705..00000000000
Binary files a/.yarn/cache/@babel-plugin-proposal-export-default-from-npm-7.23.3-cd944e2b26-f5a438413b.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-syntax-decorators-npm-7.22.5-42f006a803-2f7bcaf807.zip b/.yarn/cache/@babel-plugin-syntax-decorators-npm-7.22.5-42f006a803-2f7bcaf807.zip
new file mode 100644
index 00000000000..5908c7f4ee2
Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-decorators-npm-7.22.5-42f006a803-2f7bcaf807.zip differ
diff --git a/.yarn/cache/@babel-plugin-syntax-decorators-npm-7.23.3-678c8a3e64-5856e236f7.zip b/.yarn/cache/@babel-plugin-syntax-decorators-npm-7.23.3-678c8a3e64-5856e236f7.zip
deleted file mode 100644
index c5040119258..00000000000
Binary files a/.yarn/cache/@babel-plugin-syntax-decorators-npm-7.23.3-678c8a3e64-5856e236f7.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-syntax-export-default-from-npm-7.22.5-0b94b141a2-5b66dea77f.zip b/.yarn/cache/@babel-plugin-syntax-export-default-from-npm-7.22.5-0b94b141a2-5b66dea77f.zip
new file mode 100644
index 00000000000..37373a81d59
Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-export-default-from-npm-7.22.5-0b94b141a2-5b66dea77f.zip differ
diff --git a/.yarn/cache/@babel-plugin-syntax-export-default-from-npm-7.23.3-3148df379d-415b752a4c.zip b/.yarn/cache/@babel-plugin-syntax-export-default-from-npm-7.23.3-3148df379d-415b752a4c.zip
deleted file mode 100644
index fa9c5c95a7d..00000000000
Binary files a/.yarn/cache/@babel-plugin-syntax-export-default-from-npm-7.23.3-3148df379d-415b752a4c.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-syntax-flow-npm-7.22.5-2574b5b157-84c8c40fcf.zip b/.yarn/cache/@babel-plugin-syntax-flow-npm-7.22.5-2574b5b157-84c8c40fcf.zip
new file mode 100644
index 00000000000..7569ef14a88
Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-flow-npm-7.22.5-2574b5b157-84c8c40fcf.zip differ
diff --git a/.yarn/cache/@babel-plugin-syntax-flow-npm-7.23.3-a878cc6a46-c6e6f355d6.zip b/.yarn/cache/@babel-plugin-syntax-flow-npm-7.23.3-a878cc6a46-c6e6f355d6.zip
deleted file mode 100644
index 47d80e3c89e..00000000000
Binary files a/.yarn/cache/@babel-plugin-syntax-flow-npm-7.23.3-a878cc6a46-c6e6f355d6.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-syntax-import-assertions-npm-7.22.5-2635aad13d-2b8b5572db.zip b/.yarn/cache/@babel-plugin-syntax-import-assertions-npm-7.22.5-2635aad13d-2b8b5572db.zip
new file mode 100644
index 00000000000..ea8e012f457
Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-import-assertions-npm-7.22.5-2635aad13d-2b8b5572db.zip differ
diff --git a/.yarn/cache/@babel-plugin-syntax-import-attributes-npm-7.22.5-b93e4950ce-197b3c5ea2.zip b/.yarn/cache/@babel-plugin-syntax-import-attributes-npm-7.22.5-b93e4950ce-197b3c5ea2.zip
new file mode 100644
index 00000000000..8d5afd009c5
Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-import-attributes-npm-7.22.5-b93e4950ce-197b3c5ea2.zip differ
diff --git a/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.22.5-e17157d73d-8ab7718fbb.zip b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.22.5-e17157d73d-8ab7718fbb.zip
new file mode 100644
index 00000000000..0bb39ee2cde
Binary files /dev/null and b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.22.5-e17157d73d-8ab7718fbb.zip differ
diff --git a/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.23.3-d4e4d71527-abfad3a192.zip b/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.23.3-d4e4d71527-abfad3a192.zip
deleted file mode 100644
index 58c93abf587..00000000000
Binary files a/.yarn/cache/@babel-plugin-syntax-typescript-npm-7.23.3-d4e4d71527-abfad3a192.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-transform-arrow-functions-npm-7.22.5-af136ec392-35abb6c570.zip b/.yarn/cache/@babel-plugin-transform-arrow-functions-npm-7.22.5-af136ec392-35abb6c570.zip
new file mode 100644
index 00000000000..ac573f98f4b
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-arrow-functions-npm-7.22.5-af136ec392-35abb6c570.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-async-generator-functions-npm-7.23.2-9f86bedc4a-e1abae0edc.zip b/.yarn/cache/@babel-plugin-transform-async-generator-functions-npm-7.23.2-9f86bedc4a-e1abae0edc.zip
new file mode 100644
index 00000000000..9c837042bbc
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-async-generator-functions-npm-7.23.2-9f86bedc4a-e1abae0edc.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-async-to-generator-npm-7.22.5-f69f15a70f-b95f23f99d.zip b/.yarn/cache/@babel-plugin-transform-async-to-generator-npm-7.22.5-f69f15a70f-b95f23f99d.zip
new file mode 100644
index 00000000000..ffebca9432b
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-async-to-generator-npm-7.22.5-f69f15a70f-b95f23f99d.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-block-scoped-functions-npm-7.22.5-19b39eb7ee-416b134185.zip b/.yarn/cache/@babel-plugin-transform-block-scoped-functions-npm-7.22.5-19b39eb7ee-416b134185.zip
new file mode 100644
index 00000000000..7e7c485a201
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-block-scoped-functions-npm-7.22.5-19b39eb7ee-416b134185.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-block-scoping-npm-7.23.0-799e606cce-9f60c71a0b.zip b/.yarn/cache/@babel-plugin-transform-block-scoping-npm-7.23.0-799e606cce-9f60c71a0b.zip
new file mode 100644
index 00000000000..cb1eb980503
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-block-scoping-npm-7.23.0-799e606cce-9f60c71a0b.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-class-static-block-npm-7.22.11-e460e0829a-69f040506f.zip b/.yarn/cache/@babel-plugin-transform-class-static-block-npm-7.22.11-e460e0829a-69f040506f.zip
new file mode 100644
index 00000000000..6e307be3241
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-class-static-block-npm-7.22.11-e460e0829a-69f040506f.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-classes-npm-7.22.15-55dac7fb84-21d7a17105.zip b/.yarn/cache/@babel-plugin-transform-classes-npm-7.22.15-55dac7fb84-21d7a17105.zip
new file mode 100644
index 00000000000..76a38bf2062
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-classes-npm-7.22.15-55dac7fb84-21d7a17105.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-computed-properties-npm-7.22.5-c3ec4766ab-a3efa8de19.zip b/.yarn/cache/@babel-plugin-transform-computed-properties-npm-7.22.5-c3ec4766ab-a3efa8de19.zip
new file mode 100644
index 00000000000..7067e9b2342
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-computed-properties-npm-7.22.5-c3ec4766ab-a3efa8de19.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-destructuring-npm-7.23.0-bcda130007-924b1c0fc1.zip b/.yarn/cache/@babel-plugin-transform-destructuring-npm-7.23.0-bcda130007-924b1c0fc1.zip
new file mode 100644
index 00000000000..11d5be0fef6
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-destructuring-npm-7.23.0-bcda130007-924b1c0fc1.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-dotall-regex-npm-7.22.5-0255db6e7c-409b658d11.zip b/.yarn/cache/@babel-plugin-transform-dotall-regex-npm-7.22.5-0255db6e7c-409b658d11.zip
new file mode 100644
index 00000000000..2e70956810b
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-dotall-regex-npm-7.22.5-0255db6e7c-409b658d11.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-duplicate-keys-npm-7.22.5-c4136fee39-bb1280fbab.zip b/.yarn/cache/@babel-plugin-transform-duplicate-keys-npm-7.22.5-c4136fee39-bb1280fbab.zip
new file mode 100644
index 00000000000..2d997faa269
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-duplicate-keys-npm-7.22.5-c4136fee39-bb1280fbab.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-dynamic-import-npm-7.22.11-2fc9a2bc7f-78fc9c5322.zip b/.yarn/cache/@babel-plugin-transform-dynamic-import-npm-7.22.11-2fc9a2bc7f-78fc9c5322.zip
new file mode 100644
index 00000000000..e48e739856f
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-dynamic-import-npm-7.22.11-2fc9a2bc7f-78fc9c5322.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-exponentiation-operator-npm-7.22.5-c82f2c6e1d-f2d660c1b1.zip b/.yarn/cache/@babel-plugin-transform-exponentiation-operator-npm-7.22.5-c82f2c6e1d-f2d660c1b1.zip
new file mode 100644
index 00000000000..13d9cf6b908
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-exponentiation-operator-npm-7.22.5-c82f2c6e1d-f2d660c1b1.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-flow-strip-types-npm-7.22.5-e3f8bbd97b-0657042178.zip b/.yarn/cache/@babel-plugin-transform-flow-strip-types-npm-7.22.5-e3f8bbd97b-0657042178.zip
new file mode 100644
index 00000000000..3d5dca314f0
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-flow-strip-types-npm-7.22.5-e3f8bbd97b-0657042178.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-flow-strip-types-npm-7.23.3-68d609a821-84af4b1f6d.zip b/.yarn/cache/@babel-plugin-transform-flow-strip-types-npm-7.23.3-68d609a821-84af4b1f6d.zip
deleted file mode 100644
index a9e3ea2e073..00000000000
Binary files a/.yarn/cache/@babel-plugin-transform-flow-strip-types-npm-7.23.3-68d609a821-84af4b1f6d.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-transform-for-of-npm-7.22.15-aef075348a-d6ac155fcc.zip b/.yarn/cache/@babel-plugin-transform-for-of-npm-7.22.15-aef075348a-d6ac155fcc.zip
new file mode 100644
index 00000000000..933b3ec23ce
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-for-of-npm-7.22.15-aef075348a-d6ac155fcc.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-function-name-npm-7.22.5-e4ae437abe-cff3b87635.zip b/.yarn/cache/@babel-plugin-transform-function-name-npm-7.22.5-e4ae437abe-cff3b87635.zip
new file mode 100644
index 00000000000..982bb27ed2c
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-function-name-npm-7.22.5-e4ae437abe-cff3b87635.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-json-strings-npm-7.22.11-49a3a0acbb-50665e5979.zip b/.yarn/cache/@babel-plugin-transform-json-strings-npm-7.22.11-49a3a0acbb-50665e5979.zip
new file mode 100644
index 00000000000..fb3d7919b45
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-json-strings-npm-7.22.11-49a3a0acbb-50665e5979.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-literals-npm-7.22.5-a6ebdb9a3f-ec37cc2ffb.zip b/.yarn/cache/@babel-plugin-transform-literals-npm-7.22.5-a6ebdb9a3f-ec37cc2ffb.zip
new file mode 100644
index 00000000000..d38df60c1bc
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-literals-npm-7.22.5-a6ebdb9a3f-ec37cc2ffb.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-logical-assignment-operators-npm-7.22.11-731383ad60-c664e9798e.zip b/.yarn/cache/@babel-plugin-transform-logical-assignment-operators-npm-7.22.11-731383ad60-c664e9798e.zip
new file mode 100644
index 00000000000..9d74b27a4cd
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-logical-assignment-operators-npm-7.22.11-731383ad60-c664e9798e.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-member-expression-literals-npm-7.22.5-00b2f7d310-ec4b0e0791.zip b/.yarn/cache/@babel-plugin-transform-member-expression-literals-npm-7.22.5-00b2f7d310-ec4b0e0791.zip
new file mode 100644
index 00000000000..bdadbdc9ad4
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-member-expression-literals-npm-7.22.5-00b2f7d310-ec4b0e0791.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-modules-amd-npm-7.23.0-47b595c453-d06fbee890.zip b/.yarn/cache/@babel-plugin-transform-modules-amd-npm-7.23.0-47b595c453-d06fbee890.zip
new file mode 100644
index 00000000000..653d7c2255e
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-modules-amd-npm-7.23.0-47b595c453-d06fbee890.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.22.5-9fb6bd76fa-bf8bcc7a0f.zip b/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.22.5-9fb6bd76fa-bf8bcc7a0f.zip
new file mode 100644
index 00000000000..8c7b2c1c366
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.22.5-9fb6bd76fa-bf8bcc7a0f.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.23.0-ad0390e87e-65085c8f25.zip b/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.23.0-ad0390e87e-65085c8f25.zip
new file mode 100644
index 00000000000..e68be8c0901
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-modules-commonjs-npm-7.23.0-ad0390e87e-65085c8f25.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-modules-systemjs-npm-7.23.0-1c07988049-43a61fd72b.zip b/.yarn/cache/@babel-plugin-transform-modules-systemjs-npm-7.23.0-1c07988049-43a61fd72b.zip
new file mode 100644
index 00000000000..2fc8ccfbcab
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-modules-systemjs-npm-7.23.0-1c07988049-43a61fd72b.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-modules-umd-npm-7.22.5-332024cbaa-b955d066c6.zip b/.yarn/cache/@babel-plugin-transform-modules-umd-npm-7.22.5-332024cbaa-b955d066c6.zip
new file mode 100644
index 00000000000..9ecad06c310
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-modules-umd-npm-7.22.5-332024cbaa-b955d066c6.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-new-target-npm-7.22.5-113516dd3d-6b72112773.zip b/.yarn/cache/@babel-plugin-transform-new-target-npm-7.22.5-113516dd3d-6b72112773.zip
new file mode 100644
index 00000000000..ca3d13b91c3
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-new-target-npm-7.22.5-113516dd3d-6b72112773.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-numeric-separator-npm-7.22.11-09c49d6ce4-af064d06a4.zip b/.yarn/cache/@babel-plugin-transform-numeric-separator-npm-7.22.11-09c49d6ce4-af064d06a4.zip
new file mode 100644
index 00000000000..e501c585e29
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-numeric-separator-npm-7.22.11-09c49d6ce4-af064d06a4.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-object-super-npm-7.22.5-6c247bd1c8-b71887877d.zip b/.yarn/cache/@babel-plugin-transform-object-super-npm-7.22.5-6c247bd1c8-b71887877d.zip
new file mode 100644
index 00000000000..4e8c1252a87
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-object-super-npm-7.22.5-6c247bd1c8-b71887877d.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-optional-catch-binding-npm-7.22.11-bf9014d073-f17abd90e1.zip b/.yarn/cache/@babel-plugin-transform-optional-catch-binding-npm-7.22.11-bf9014d073-f17abd90e1.zip
new file mode 100644
index 00000000000..a35c4772b24
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-optional-catch-binding-npm-7.22.11-bf9014d073-f17abd90e1.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-optional-chaining-npm-7.23.0-4c861e57fe-fb1103c648.zip b/.yarn/cache/@babel-plugin-transform-optional-chaining-npm-7.23.0-4c861e57fe-fb1103c648.zip
new file mode 100644
index 00000000000..e55db2bdd7a
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-optional-chaining-npm-7.23.0-4c861e57fe-fb1103c648.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-parameters-npm-7.22.15-7206a7e262-fa9f2340fe.zip b/.yarn/cache/@babel-plugin-transform-parameters-npm-7.22.15-7206a7e262-fa9f2340fe.zip
new file mode 100644
index 00000000000..a222473b7f9
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-parameters-npm-7.22.15-7206a7e262-fa9f2340fe.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-parameters-npm-7.22.5-0388236044-86bec14b1a.zip b/.yarn/cache/@babel-plugin-transform-parameters-npm-7.22.5-0388236044-86bec14b1a.zip
new file mode 100644
index 00000000000..4662d2d272a
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-parameters-npm-7.22.5-0388236044-86bec14b1a.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-property-literals-npm-7.22.5-5b47e3b787-796176a317.zip b/.yarn/cache/@babel-plugin-transform-property-literals-npm-7.22.5-5b47e3b787-796176a317.zip
new file mode 100644
index 00000000000..8346842b7cd
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-property-literals-npm-7.22.5-5b47e3b787-796176a317.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.22.5-eebc8d2b87-a12bfd1e4e.zip b/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.22.5-eebc8d2b87-a12bfd1e4e.zip
new file mode 100644
index 00000000000..b7603c141f4
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.22.5-eebc8d2b87-a12bfd1e4e.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip b/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip
deleted file mode 100644
index 0fe736493f8..00000000000
Binary files a/.yarn/cache/@babel-plugin-transform-react-display-name-npm-7.23.3-42e6709253-7f86964e84.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.22.15-45970ef127-a436bfbffe.zip b/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.22.15-45970ef127-a436bfbffe.zip
deleted file mode 100644
index 31ce6336384..00000000000
Binary files a/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.22.15-45970ef127-a436bfbffe.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.22.5-f8a9783868-6be5db99b1.zip b/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.22.5-f8a9783868-6be5db99b1.zip
new file mode 100644
index 00000000000..8a9ae10a8b3
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-react-jsx-npm-7.22.5-f8a9783868-6be5db99b1.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.22.5-6c092a54b9-092021c4f4.zip b/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.22.5-6c092a54b9-092021c4f4.zip
new file mode 100644
index 00000000000..18e5af7b9e6
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.22.5-6c092a54b9-092021c4f4.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip b/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip
deleted file mode 100644
index 463d18db8a5..00000000000
Binary files a/.yarn/cache/@babel-plugin-transform-react-pure-annotations-npm-7.23.3-2a925e2096-9ea3698b1d.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-transform-regenerator-npm-7.22.10-ac698c30a4-e13678d62d.zip b/.yarn/cache/@babel-plugin-transform-regenerator-npm-7.22.10-ac698c30a4-e13678d62d.zip
new file mode 100644
index 00000000000..9e0b6db8fbd
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-regenerator-npm-7.22.10-ac698c30a4-e13678d62d.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-reserved-words-npm-7.22.5-a845b3b487-3ffd7dbc42.zip b/.yarn/cache/@babel-plugin-transform-reserved-words-npm-7.22.5-a845b3b487-3ffd7dbc42.zip
new file mode 100644
index 00000000000..354c4ab48d8
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-reserved-words-npm-7.22.5-a845b3b487-3ffd7dbc42.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-shorthand-properties-npm-7.22.5-362022b06f-a5ac902c56.zip b/.yarn/cache/@babel-plugin-transform-shorthand-properties-npm-7.22.5-362022b06f-a5ac902c56.zip
new file mode 100644
index 00000000000..c00b606272a
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-shorthand-properties-npm-7.22.5-362022b06f-a5ac902c56.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-spread-npm-7.22.5-61ed9bc888-f9fd247b3f.zip b/.yarn/cache/@babel-plugin-transform-spread-npm-7.22.5-61ed9bc888-f9fd247b3f.zip
new file mode 100644
index 00000000000..35dff289987
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-spread-npm-7.22.5-61ed9bc888-f9fd247b3f.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-sticky-regex-npm-7.22.5-c695959c0a-63b2c575e3.zip b/.yarn/cache/@babel-plugin-transform-sticky-regex-npm-7.22.5-c695959c0a-63b2c575e3.zip
new file mode 100644
index 00000000000..b50dfaf4ec8
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-sticky-regex-npm-7.22.5-c695959c0a-63b2c575e3.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-template-literals-npm-7.22.5-1a4b253e48-27e9bb0306.zip b/.yarn/cache/@babel-plugin-transform-template-literals-npm-7.22.5-1a4b253e48-27e9bb0306.zip
new file mode 100644
index 00000000000..12b89819b3c
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-template-literals-npm-7.22.5-1a4b253e48-27e9bb0306.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-typeof-symbol-npm-7.22.5-1ecab2dc9d-82a53a63ff.zip b/.yarn/cache/@babel-plugin-transform-typeof-symbol-npm-7.22.5-1ecab2dc9d-82a53a63ff.zip
new file mode 100644
index 00000000000..d26576c4a5a
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-typeof-symbol-npm-7.22.5-1ecab2dc9d-82a53a63ff.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.22.10-40ad2ac9e9-7d48bbc07b.zip b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.22.10-40ad2ac9e9-7d48bbc07b.zip
new file mode 100644
index 00000000000..e536c6183e5
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.22.10-40ad2ac9e9-7d48bbc07b.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.23.3-2ca298f6fc-74dff26470.zip b/.yarn/cache/@babel-plugin-transform-typescript-npm-7.23.3-2ca298f6fc-74dff26470.zip
deleted file mode 100644
index a3f43ec4191..00000000000
Binary files a/.yarn/cache/@babel-plugin-transform-typescript-npm-7.23.3-2ca298f6fc-74dff26470.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-plugin-transform-unicode-escapes-npm-7.22.10-2181b87039-807f40ed13.zip b/.yarn/cache/@babel-plugin-transform-unicode-escapes-npm-7.22.10-2181b87039-807f40ed13.zip
new file mode 100644
index 00000000000..d4d2ac92c1a
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-unicode-escapes-npm-7.22.10-2181b87039-807f40ed13.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-unicode-property-regex-npm-7.22.5-3c77f8e952-2495e5f663.zip b/.yarn/cache/@babel-plugin-transform-unicode-property-regex-npm-7.22.5-3c77f8e952-2495e5f663.zip
new file mode 100644
index 00000000000..0adccc457cc
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-unicode-property-regex-npm-7.22.5-3c77f8e952-2495e5f663.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-unicode-regex-npm-7.22.5-26e8f66a55-6b5d1404c8.zip b/.yarn/cache/@babel-plugin-transform-unicode-regex-npm-7.22.5-26e8f66a55-6b5d1404c8.zip
new file mode 100644
index 00000000000..3d1a0ae2291
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-unicode-regex-npm-7.22.5-26e8f66a55-6b5d1404c8.zip differ
diff --git a/.yarn/cache/@babel-plugin-transform-unicode-sets-regex-npm-7.22.5-d22925edab-c042070f98.zip b/.yarn/cache/@babel-plugin-transform-unicode-sets-regex-npm-7.22.5-d22925edab-c042070f98.zip
new file mode 100644
index 00000000000..5b763e53ce8
Binary files /dev/null and b/.yarn/cache/@babel-plugin-transform-unicode-sets-regex-npm-7.22.5-d22925edab-c042070f98.zip differ
diff --git a/.yarn/cache/@babel-preset-env-npm-7.23.2-a574e081f9-7bc8aeed59.zip b/.yarn/cache/@babel-preset-env-npm-7.23.2-a574e081f9-7bc8aeed59.zip
new file mode 100644
index 00000000000..5208d54403b
Binary files /dev/null and b/.yarn/cache/@babel-preset-env-npm-7.23.2-a574e081f9-7bc8aeed59.zip differ
diff --git a/.yarn/cache/@babel-preset-flow-npm-7.22.5-08563d86bc-0bf6f587e9.zip b/.yarn/cache/@babel-preset-flow-npm-7.22.5-08563d86bc-0bf6f587e9.zip
new file mode 100644
index 00000000000..076b5306b89
Binary files /dev/null and b/.yarn/cache/@babel-preset-flow-npm-7.22.5-08563d86bc-0bf6f587e9.zip differ
diff --git a/.yarn/cache/@babel-preset-flow-npm-7.23.3-1b8d202681-60b5dde796.zip b/.yarn/cache/@babel-preset-flow-npm-7.23.3-1b8d202681-60b5dde796.zip
deleted file mode 100644
index a413f05c1cf..00000000000
Binary files a/.yarn/cache/@babel-preset-flow-npm-7.23.3-1b8d202681-60b5dde796.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-preset-react-npm-7.22.5-c4754817fe-7c78b1bca3.zip b/.yarn/cache/@babel-preset-react-npm-7.22.5-c4754817fe-7c78b1bca3.zip
new file mode 100644
index 00000000000..140eb69d9b0
Binary files /dev/null and b/.yarn/cache/@babel-preset-react-npm-7.22.5-c4754817fe-7c78b1bca3.zip differ
diff --git a/.yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-ef6aef131b.zip b/.yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-ef6aef131b.zip
deleted file mode 100644
index 4d9fc2c6c76..00000000000
Binary files a/.yarn/cache/@babel-preset-react-npm-7.23.3-6a959abc25-ef6aef131b.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-preset-typescript-npm-7.22.5-cd7e0abd79-2d851117e7.zip b/.yarn/cache/@babel-preset-typescript-npm-7.22.5-cd7e0abd79-2d851117e7.zip
new file mode 100644
index 00000000000..793f8d31d83
Binary files /dev/null and b/.yarn/cache/@babel-preset-typescript-npm-7.22.5-cd7e0abd79-2d851117e7.zip differ
diff --git a/.yarn/cache/@babel-preset-typescript-npm-7.23.3-f4c363b2f7-c4add0f3fc.zip b/.yarn/cache/@babel-preset-typescript-npm-7.23.3-f4c363b2f7-c4add0f3fc.zip
deleted file mode 100644
index e0343496607..00000000000
Binary files a/.yarn/cache/@babel-preset-typescript-npm-7.23.3-f4c363b2f7-c4add0f3fc.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-register-npm-7.22.15-13445da448-5497be6773.zip b/.yarn/cache/@babel-register-npm-7.22.15-13445da448-5497be6773.zip
deleted file mode 100644
index c7c76ca5048..00000000000
Binary files a/.yarn/cache/@babel-register-npm-7.22.15-13445da448-5497be6773.zip and /dev/null differ
diff --git a/.yarn/cache/@babel-register-npm-7.22.5-ae9abed367-723ce27fda.zip b/.yarn/cache/@babel-register-npm-7.22.5-ae9abed367-723ce27fda.zip
new file mode 100644
index 00000000000..2a258a44197
Binary files /dev/null and b/.yarn/cache/@babel-register-npm-7.22.5-ae9abed367-723ce27fda.zip differ
diff --git a/.yarn/cache/@babel-runtime-npm-7.22.6-493f6b7ad0-1d2f56797f.zip b/.yarn/cache/@babel-runtime-npm-7.22.6-493f6b7ad0-1d2f56797f.zip
new file mode 100644
index 00000000000..19d8f6ce086
Binary files /dev/null and b/.yarn/cache/@babel-runtime-npm-7.22.6-493f6b7ad0-1d2f56797f.zip differ
diff --git a/.yarn/cache/@babel-template-npm-7.22.5-358c44dc9d-460634b1c5.zip b/.yarn/cache/@babel-template-npm-7.22.5-358c44dc9d-460634b1c5.zip
new file mode 100644
index 00000000000..e634e6c465d
Binary files /dev/null and b/.yarn/cache/@babel-template-npm-7.22.5-358c44dc9d-460634b1c5.zip differ
diff --git a/.yarn/cache/@babel-traverse-npm-7.22.10-9eaf5a4899-e88334f3be.zip b/.yarn/cache/@babel-traverse-npm-7.22.10-9eaf5a4899-e88334f3be.zip
new file mode 100644
index 00000000000..74f9227c20a
Binary files /dev/null and b/.yarn/cache/@babel-traverse-npm-7.22.10-9eaf5a4899-e88334f3be.zip differ
diff --git a/.yarn/cache/@babel-traverse-npm-7.23.2-4758feee42-e4fcb8f839.zip b/.yarn/cache/@babel-traverse-npm-7.23.2-4758feee42-e4fcb8f839.zip
new file mode 100644
index 00000000000..1098875a05a
Binary files /dev/null and b/.yarn/cache/@babel-traverse-npm-7.23.2-4758feee42-e4fcb8f839.zip differ
diff --git a/.yarn/cache/@babel-types-npm-7.22.10-ffafe4058f-b11f8d13f3.zip b/.yarn/cache/@babel-types-npm-7.22.10-ffafe4058f-b11f8d13f3.zip
new file mode 100644
index 00000000000..01fb3b91aa7
Binary files /dev/null and b/.yarn/cache/@babel-types-npm-7.22.10-ffafe4058f-b11f8d13f3.zip differ
diff --git a/.yarn/cache/@babel-types-npm-7.23.0-332fd21daf-ca5b896a26.zip b/.yarn/cache/@babel-types-npm-7.23.0-332fd21daf-ca5b896a26.zip
new file mode 100644
index 00000000000..5b46dcf34b2
Binary files /dev/null and b/.yarn/cache/@babel-types-npm-7.23.0-332fd21daf-ca5b896a26.zip differ
diff --git a/.yarn/cache/@carbon-colors-npm-10.37.2-c95db17ea4-fa5e568434.zip b/.yarn/cache/@carbon-colors-npm-10.37.2-c95db17ea4-fa5e568434.zip
deleted file mode 100644
index 87a31782d5f..00000000000
Binary files a/.yarn/cache/@carbon-colors-npm-10.37.2-c95db17ea4-fa5e568434.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-colors-npm-11.19.0-8150ea9803-3596e377be.zip b/.yarn/cache/@carbon-colors-npm-11.19.0-8150ea9803-3596e377be.zip
new file mode 100644
index 00000000000..a5162068664
Binary files /dev/null and b/.yarn/cache/@carbon-colors-npm-11.19.0-8150ea9803-3596e377be.zip differ
diff --git a/.yarn/cache/@carbon-colors-npm-11.20.1-2c19576b4a-f053a7f9a2.zip b/.yarn/cache/@carbon-colors-npm-11.20.1-2c19576b4a-f053a7f9a2.zip
new file mode 100644
index 00000000000..0361feab80c
Binary files /dev/null and b/.yarn/cache/@carbon-colors-npm-11.20.1-2c19576b4a-f053a7f9a2.zip differ
diff --git a/.yarn/cache/@carbon-feature-flags-npm-0.16.0-2de4142f82-d509cfe9d2.zip b/.yarn/cache/@carbon-feature-flags-npm-0.16.0-2de4142f82-d509cfe9d2.zip
new file mode 100644
index 00000000000..74cd32f7b29
Binary files /dev/null and b/.yarn/cache/@carbon-feature-flags-npm-0.16.0-2de4142f82-d509cfe9d2.zip differ
diff --git a/.yarn/cache/@carbon-feature-flags-npm-0.7.0-7f192756d6-1c311913a2.zip b/.yarn/cache/@carbon-feature-flags-npm-0.7.0-7f192756d6-1c311913a2.zip
deleted file mode 100644
index 88942f051ff..00000000000
Binary files a/.yarn/cache/@carbon-feature-flags-npm-0.7.0-7f192756d6-1c311913a2.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-grid-npm-10.43.2-188a84c668-e48ac03bba.zip b/.yarn/cache/@carbon-grid-npm-10.43.2-188a84c668-e48ac03bba.zip
deleted file mode 100644
index e1a0e57969d..00000000000
Binary files a/.yarn/cache/@carbon-grid-npm-10.43.2-188a84c668-e48ac03bba.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-grid-npm-11.18.0-f33efbb849-038fa279ff.zip b/.yarn/cache/@carbon-grid-npm-11.18.0-f33efbb849-038fa279ff.zip
new file mode 100644
index 00000000000..f5ef30c3aa8
Binary files /dev/null and b/.yarn/cache/@carbon-grid-npm-11.18.0-f33efbb849-038fa279ff.zip differ
diff --git a/.yarn/cache/@carbon-grid-npm-11.21.1-5f1e2a1af0-15c466377f.zip b/.yarn/cache/@carbon-grid-npm-11.21.1-5f1e2a1af0-15c466377f.zip
new file mode 100644
index 00000000000..abaa8b9625c
Binary files /dev/null and b/.yarn/cache/@carbon-grid-npm-11.21.1-5f1e2a1af0-15c466377f.zip differ
diff --git a/.yarn/cache/@carbon-ibmdotcom-services-npm-1.53.0-4cc53be3e2-0a7631ea6e.zip b/.yarn/cache/@carbon-ibmdotcom-services-npm-1.53.0-4cc53be3e2-0a7631ea6e.zip
new file mode 100644
index 00000000000..178e655e870
Binary files /dev/null and b/.yarn/cache/@carbon-ibmdotcom-services-npm-1.53.0-4cc53be3e2-0a7631ea6e.zip differ
diff --git a/.yarn/cache/@carbon-ibmdotcom-utilities-npm-1.53.0-9ff62dc66f-77dfdb1854.zip b/.yarn/cache/@carbon-ibmdotcom-utilities-npm-1.53.0-9ff62dc66f-77dfdb1854.zip
new file mode 100644
index 00000000000..3e008c296f6
Binary files /dev/null and b/.yarn/cache/@carbon-ibmdotcom-utilities-npm-1.53.0-9ff62dc66f-77dfdb1854.zip differ
diff --git a/.yarn/cache/@carbon-icon-helpers-npm-10.44.0-159592a2ec-39416c9851.zip b/.yarn/cache/@carbon-icon-helpers-npm-10.44.0-159592a2ec-39416c9851.zip
new file mode 100644
index 00000000000..2921b0c0f0e
Binary files /dev/null and b/.yarn/cache/@carbon-icon-helpers-npm-10.44.0-159592a2ec-39416c9851.zip differ
diff --git a/.yarn/cache/@carbon-icons-npm-11.24.0-f2300b72c0-368422ff42.zip b/.yarn/cache/@carbon-icons-npm-11.24.0-f2300b72c0-368422ff42.zip
new file mode 100644
index 00000000000..decaa66c04d
Binary files /dev/null and b/.yarn/cache/@carbon-icons-npm-11.24.0-f2300b72c0-368422ff42.zip differ
diff --git a/.yarn/cache/@carbon-icons-react-npm-11.23.1-6c94871e22-73622aafbe.zip b/.yarn/cache/@carbon-icons-react-npm-11.23.1-6c94871e22-73622aafbe.zip
new file mode 100644
index 00000000000..e55a277b4fa
Binary files /dev/null and b/.yarn/cache/@carbon-icons-react-npm-11.23.1-6c94871e22-73622aafbe.zip differ
diff --git a/.yarn/cache/@carbon-icons-react-npm-11.30.0-dced31f1b4-efaa859629.zip b/.yarn/cache/@carbon-icons-react-npm-11.30.0-dced31f1b4-efaa859629.zip
new file mode 100644
index 00000000000..eb71ca885e9
Binary files /dev/null and b/.yarn/cache/@carbon-icons-react-npm-11.30.0-dced31f1b4-efaa859629.zip differ
diff --git a/.yarn/cache/@carbon-import-once-npm-10.7.0-4fdc07ee20-6a6b41910e.zip b/.yarn/cache/@carbon-import-once-npm-10.7.0-4fdc07ee20-6a6b41910e.zip
deleted file mode 100644
index 48fbbbeba31..00000000000
Binary files a/.yarn/cache/@carbon-import-once-npm-10.7.0-4fdc07ee20-6a6b41910e.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-layout-npm-10.37.2-7448e1d821-518bfae477.zip b/.yarn/cache/@carbon-layout-npm-10.37.2-7448e1d821-518bfae477.zip
deleted file mode 100644
index f874092dd91..00000000000
Binary files a/.yarn/cache/@carbon-layout-npm-10.37.2-7448e1d821-518bfae477.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-layout-npm-11.18.0-e8afd7d6c0-e8a801cd0a.zip b/.yarn/cache/@carbon-layout-npm-11.18.0-e8afd7d6c0-e8a801cd0a.zip
new file mode 100644
index 00000000000..df213937466
Binary files /dev/null and b/.yarn/cache/@carbon-layout-npm-11.18.0-e8afd7d6c0-e8a801cd0a.zip differ
diff --git a/.yarn/cache/@carbon-layout-npm-11.20.1-2b172f616d-f284fae1ad.zip b/.yarn/cache/@carbon-layout-npm-11.20.1-2b172f616d-f284fae1ad.zip
new file mode 100644
index 00000000000..dcaf2664074
Binary files /dev/null and b/.yarn/cache/@carbon-layout-npm-11.20.1-2b172f616d-f284fae1ad.zip differ
diff --git a/.yarn/cache/@carbon-motion-npm-10.29.2-c34a4aa2b3-4fa3ff38d1.zip b/.yarn/cache/@carbon-motion-npm-10.29.2-c34a4aa2b3-4fa3ff38d1.zip
deleted file mode 100644
index 1bf67b19a38..00000000000
Binary files a/.yarn/cache/@carbon-motion-npm-10.29.2-c34a4aa2b3-4fa3ff38d1.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-motion-npm-11.15.0-1f597eb298-b2b85ca949.zip b/.yarn/cache/@carbon-motion-npm-11.15.0-1f597eb298-b2b85ca949.zip
new file mode 100644
index 00000000000..a23f0e31255
Binary files /dev/null and b/.yarn/cache/@carbon-motion-npm-11.15.0-1f597eb298-b2b85ca949.zip differ
diff --git a/.yarn/cache/@carbon-pictograms-react-npm-11.45.2-8ae0dc7f50-60321e88cb.zip b/.yarn/cache/@carbon-pictograms-react-npm-11.45.2-8ae0dc7f50-60321e88cb.zip
new file mode 100644
index 00000000000..5605e5ad460
Binary files /dev/null and b/.yarn/cache/@carbon-pictograms-react-npm-11.45.2-8ae0dc7f50-60321e88cb.zip differ
diff --git a/.yarn/cache/@carbon-pictograms-react-npm-11.50.0-97c237f2b5-f7901ca51f.zip b/.yarn/cache/@carbon-pictograms-react-npm-11.50.0-97c237f2b5-f7901ca51f.zip
deleted file mode 100644
index 2c5a6c40534..00000000000
Binary files a/.yarn/cache/@carbon-pictograms-react-npm-11.50.0-97c237f2b5-f7901ca51f.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-react-npm-1.42.0-9d31d84374-fe47eee3ee.zip b/.yarn/cache/@carbon-react-npm-1.42.0-9d31d84374-fe47eee3ee.zip
new file mode 100644
index 00000000000..4b27b716f63
Binary files /dev/null and b/.yarn/cache/@carbon-react-npm-1.42.0-9d31d84374-fe47eee3ee.zip differ
diff --git a/.yarn/cache/@carbon-styles-npm-1.41.2-8a5e142b0d-17a40e688c.zip b/.yarn/cache/@carbon-styles-npm-1.41.2-8a5e142b0d-17a40e688c.zip
new file mode 100644
index 00000000000..6fc5c60d3f1
Binary files /dev/null and b/.yarn/cache/@carbon-styles-npm-1.41.2-8a5e142b0d-17a40e688c.zip differ
diff --git a/.yarn/cache/@carbon-styles-npm-1.42.0-69cb3890fd-beaf7bd8ae.zip b/.yarn/cache/@carbon-styles-npm-1.42.0-69cb3890fd-beaf7bd8ae.zip
new file mode 100644
index 00000000000..b681644cad1
Binary files /dev/null and b/.yarn/cache/@carbon-styles-npm-1.42.0-69cb3890fd-beaf7bd8ae.zip differ
diff --git a/.yarn/cache/@carbon-themes-npm-10.55.3-c4715b07f7-db42187f05.zip b/.yarn/cache/@carbon-themes-npm-10.55.3-c4715b07f7-db42187f05.zip
deleted file mode 100644
index 80cfef37444..00000000000
Binary files a/.yarn/cache/@carbon-themes-npm-10.55.3-c4715b07f7-db42187f05.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-themes-npm-11.23.0-7239fb048b-1e4bdf6bab.zip b/.yarn/cache/@carbon-themes-npm-11.23.0-7239fb048b-1e4bdf6bab.zip
new file mode 100644
index 00000000000..e3e1e153416
Binary files /dev/null and b/.yarn/cache/@carbon-themes-npm-11.23.0-7239fb048b-1e4bdf6bab.zip differ
diff --git a/.yarn/cache/@carbon-themes-npm-11.26.1-0932301a48-59c1055ffa.zip b/.yarn/cache/@carbon-themes-npm-11.26.1-0932301a48-59c1055ffa.zip
new file mode 100644
index 00000000000..c2bc45c72e6
Binary files /dev/null and b/.yarn/cache/@carbon-themes-npm-11.26.1-0932301a48-59c1055ffa.zip differ
diff --git a/.yarn/cache/@carbon-themes-npm-11.27.0-008a527781-8d49fd5fe7.zip b/.yarn/cache/@carbon-themes-npm-11.27.0-008a527781-8d49fd5fe7.zip
new file mode 100644
index 00000000000..43e0c8157d2
Binary files /dev/null and b/.yarn/cache/@carbon-themes-npm-11.27.0-008a527781-8d49fd5fe7.zip differ
diff --git a/.yarn/cache/@carbon-type-npm-10.45.3-a9648fc503-eeb2272b29.zip b/.yarn/cache/@carbon-type-npm-10.45.3-a9648fc503-eeb2272b29.zip
deleted file mode 100644
index ee8dd312826..00000000000
Binary files a/.yarn/cache/@carbon-type-npm-10.45.3-a9648fc503-eeb2272b29.zip and /dev/null differ
diff --git a/.yarn/cache/@carbon-type-npm-11.22.0-b4cf51227b-953d995b23.zip b/.yarn/cache/@carbon-type-npm-11.22.0-b4cf51227b-953d995b23.zip
new file mode 100644
index 00000000000..6f8741740aa
Binary files /dev/null and b/.yarn/cache/@carbon-type-npm-11.22.0-b4cf51227b-953d995b23.zip differ
diff --git a/.yarn/cache/@carbon-type-npm-11.25.1-f8b2445cba-3e8043b2f1.zip b/.yarn/cache/@carbon-type-npm-11.25.1-f8b2445cba-3e8043b2f1.zip
new file mode 100644
index 00000000000..4eb7cb34b55
Binary files /dev/null and b/.yarn/cache/@carbon-type-npm-11.25.1-f8b2445cba-3e8043b2f1.zip differ
diff --git a/.yarn/cache/@eslint-community-regexpp-npm-4.10.0-6bfb984c81-8c36169c81.zip b/.yarn/cache/@eslint-community-regexpp-npm-4.10.0-6bfb984c81-8c36169c81.zip
deleted file mode 100644
index 14fb460b5df..00000000000
Binary files a/.yarn/cache/@eslint-community-regexpp-npm-4.10.0-6bfb984c81-8c36169c81.zip and /dev/null differ
diff --git a/.yarn/cache/@eslint-community-regexpp-npm-4.6.2-0fc083c210-59ea2fa13a.zip b/.yarn/cache/@eslint-community-regexpp-npm-4.6.2-0fc083c210-59ea2fa13a.zip
new file mode 100644
index 00000000000..73b58cf62b8
Binary files /dev/null and b/.yarn/cache/@eslint-community-regexpp-npm-4.6.2-0fc083c210-59ea2fa13a.zip differ
diff --git a/.yarn/cache/@fastify-busboy-npm-2.1.0-960844a007-f22c1e5c52.zip b/.yarn/cache/@fastify-busboy-npm-2.1.0-960844a007-f22c1e5c52.zip
deleted file mode 100644
index bbe2c87a143..00000000000
Binary files a/.yarn/cache/@fastify-busboy-npm-2.1.0-960844a007-f22c1e5c52.zip and /dev/null differ
diff --git a/.yarn/cache/@fastify-deepmerge-npm-1.3.0-72eb1f634c-6ddfc230ed.zip b/.yarn/cache/@fastify-deepmerge-npm-1.3.0-72eb1f634c-6ddfc230ed.zip
new file mode 100644
index 00000000000..00d64b34be6
Binary files /dev/null and b/.yarn/cache/@fastify-deepmerge-npm-1.3.0-72eb1f634c-6ddfc230ed.zip differ
diff --git a/.yarn/cache/@ibm-plex-npm-6.0.0-next.6-9aee23c93c-1a81475964.zip b/.yarn/cache/@ibm-plex-npm-6.0.0-next.6-9aee23c93c-1a81475964.zip
new file mode 100644
index 00000000000..2d865d4d59a
Binary files /dev/null and b/.yarn/cache/@ibm-plex-npm-6.0.0-next.6-9aee23c93c-1a81475964.zip differ
diff --git a/.yarn/cache/@jest-expect-utils-npm-29.6.2-bafd0077bb-5ad8884daf.zip b/.yarn/cache/@jest-expect-utils-npm-29.6.2-bafd0077bb-5ad8884daf.zip
new file mode 100644
index 00000000000..d12af74c849
Binary files /dev/null and b/.yarn/cache/@jest-expect-utils-npm-29.6.2-bafd0077bb-5ad8884daf.zip differ
diff --git a/.yarn/cache/@jest-expect-utils-npm-29.7.0-14740cc487-ef8d379778.zip b/.yarn/cache/@jest-expect-utils-npm-29.7.0-14740cc487-ef8d379778.zip
deleted file mode 100644
index ef177749b9d..00000000000
Binary files a/.yarn/cache/@jest-expect-utils-npm-29.7.0-14740cc487-ef8d379778.zip and /dev/null differ
diff --git a/.yarn/cache/@jest-schemas-npm-29.6.0-3ca8b9309f-c00511c69c.zip b/.yarn/cache/@jest-schemas-npm-29.6.0-3ca8b9309f-c00511c69c.zip
new file mode 100644
index 00000000000..bb0b9c6dd15
Binary files /dev/null and b/.yarn/cache/@jest-schemas-npm-29.6.0-3ca8b9309f-c00511c69c.zip differ
diff --git a/.yarn/cache/@jest-types-npm-29.6.1-b7c765fadd-f6264fb0fc.zip b/.yarn/cache/@jest-types-npm-29.6.1-b7c765fadd-f6264fb0fc.zip
new file mode 100644
index 00000000000..bf442954c88
Binary files /dev/null and b/.yarn/cache/@jest-types-npm-29.6.1-b7c765fadd-f6264fb0fc.zip differ
diff --git a/.yarn/cache/@jest-types-npm-29.6.3-a584ca999d-f74bf512fd.zip b/.yarn/cache/@jest-types-npm-29.6.3-a584ca999d-f74bf512fd.zip
deleted file mode 100644
index 2ac5bed3c65..00000000000
Binary files a/.yarn/cache/@jest-types-npm-29.6.3-a584ca999d-f74bf512fd.zip and /dev/null differ
diff --git a/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.19-9aa1a7e2fd-06a2a4e26e.zip b/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.19-9aa1a7e2fd-06a2a4e26e.zip
new file mode 100644
index 00000000000..78a9d2b0b65
Binary files /dev/null and b/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.19-9aa1a7e2fd-06a2a4e26e.zip differ
diff --git a/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.20-d90f282910-683117e4e6.zip b/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.20-d90f282910-683117e4e6.zip
deleted file mode 100644
index 15b9e685643..00000000000
Binary files a/.yarn/cache/@jridgewell-trace-mapping-npm-0.3.20-d90f282910-683117e4e6.zip and /dev/null differ
diff --git a/.yarn/cache/@lit-labs-ssr-dom-shim-npm-1.1.1-8b753a4141-f401a2bc71.zip b/.yarn/cache/@lit-labs-ssr-dom-shim-npm-1.1.1-8b753a4141-f401a2bc71.zip
new file mode 100644
index 00000000000..d662d83d6c0
Binary files /dev/null and b/.yarn/cache/@lit-labs-ssr-dom-shim-npm-1.1.1-8b753a4141-f401a2bc71.zip differ
diff --git a/.yarn/cache/@lit-reactive-element-npm-1.6.2-1d20024e26-765c386917.zip b/.yarn/cache/@lit-reactive-element-npm-1.6.2-1d20024e26-765c386917.zip
new file mode 100644
index 00000000000..49b018afd5d
Binary files /dev/null and b/.yarn/cache/@lit-reactive-element-npm-1.6.2-1d20024e26-765c386917.zip differ
diff --git a/.yarn/cache/@npmcli-query-npm-3.0.0-53c05bcb30-7d8e2984f9.zip b/.yarn/cache/@npmcli-query-npm-3.0.0-53c05bcb30-7d8e2984f9.zip
new file mode 100644
index 00000000000..5bb9fb1ec57
Binary files /dev/null and b/.yarn/cache/@npmcli-query-npm-3.0.0-53c05bcb30-7d8e2984f9.zip differ
diff --git a/.yarn/cache/@npmcli-query-npm-3.0.1-06ff1d4acc-8e5ac95fc1.zip b/.yarn/cache/@npmcli-query-npm-3.0.1-06ff1d4acc-8e5ac95fc1.zip
deleted file mode 100644
index 45d37243ab9..00000000000
Binary files a/.yarn/cache/@npmcli-query-npm-3.0.1-06ff1d4acc-8e5ac95fc1.zip and /dev/null differ
diff --git a/.yarn/cache/@nrwl-devkit-npm-15.9.4-a5eac3185c-6022737186.zip b/.yarn/cache/@nrwl-devkit-npm-15.9.4-a5eac3185c-6022737186.zip
new file mode 100644
index 00000000000..9e7d41e0b0c
Binary files /dev/null and b/.yarn/cache/@nrwl-devkit-npm-15.9.4-a5eac3185c-6022737186.zip differ
diff --git a/.yarn/cache/@nrwl-devkit-npm-15.9.7-80a60613af-a76469275e.zip b/.yarn/cache/@nrwl-devkit-npm-15.9.7-80a60613af-a76469275e.zip
deleted file mode 100644
index 7c89c123dbc..00000000000
Binary files a/.yarn/cache/@nrwl-devkit-npm-15.9.7-80a60613af-a76469275e.zip and /dev/null differ
diff --git a/.yarn/cache/@octokit-openapi-types-npm-18.0.0-1586e405d6-5d4aa6abab.zip b/.yarn/cache/@octokit-openapi-types-npm-18.0.0-1586e405d6-5d4aa6abab.zip
new file mode 100644
index 00000000000..adf5bda9df0
Binary files /dev/null and b/.yarn/cache/@octokit-openapi-types-npm-18.0.0-1586e405d6-5d4aa6abab.zip differ
diff --git a/.yarn/cache/@octokit-openapi-types-npm-18.1.1-18b6c70735-bd2920a238.zip b/.yarn/cache/@octokit-openapi-types-npm-18.1.1-18b6c70735-bd2920a238.zip
deleted file mode 100644
index ba6deeda8a4..00000000000
Binary files a/.yarn/cache/@octokit-openapi-types-npm-18.1.1-18b6c70735-bd2920a238.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-app-npm-1.26.3-4144449ee2-abe4b55c69.zip b/.yarn/cache/@percy-cli-app-npm-1.26.3-4144449ee2-abe4b55c69.zip
new file mode 100644
index 00000000000..5a1f95b4df9
Binary files /dev/null and b/.yarn/cache/@percy-cli-app-npm-1.26.3-4144449ee2-abe4b55c69.zip differ
diff --git a/.yarn/cache/@percy-cli-app-npm-1.27.4-2bd8239189-2ea94a5136.zip b/.yarn/cache/@percy-cli-app-npm-1.27.4-2bd8239189-2ea94a5136.zip
deleted file mode 100644
index 696b2c159a8..00000000000
Binary files a/.yarn/cache/@percy-cli-app-npm-1.27.4-2bd8239189-2ea94a5136.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-build-npm-1.26.3-ea45261d32-a515da0999.zip b/.yarn/cache/@percy-cli-build-npm-1.26.3-ea45261d32-a515da0999.zip
new file mode 100644
index 00000000000..01bcbd6dd27
Binary files /dev/null and b/.yarn/cache/@percy-cli-build-npm-1.26.3-ea45261d32-a515da0999.zip differ
diff --git a/.yarn/cache/@percy-cli-build-npm-1.27.4-ed455ca8d1-bc8ccb67a2.zip b/.yarn/cache/@percy-cli-build-npm-1.27.4-ed455ca8d1-bc8ccb67a2.zip
deleted file mode 100644
index 371f772b83b..00000000000
Binary files a/.yarn/cache/@percy-cli-build-npm-1.27.4-ed455ca8d1-bc8ccb67a2.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-command-npm-1.26.3-f9c3908dfa-2f00ae270c.zip b/.yarn/cache/@percy-cli-command-npm-1.26.3-f9c3908dfa-2f00ae270c.zip
new file mode 100644
index 00000000000..f8d5463109a
Binary files /dev/null and b/.yarn/cache/@percy-cli-command-npm-1.26.3-f9c3908dfa-2f00ae270c.zip differ
diff --git a/.yarn/cache/@percy-cli-config-npm-1.26.3-58612285e9-e5aee39b10.zip b/.yarn/cache/@percy-cli-config-npm-1.26.3-58612285e9-e5aee39b10.zip
new file mode 100644
index 00000000000..d6da574e718
Binary files /dev/null and b/.yarn/cache/@percy-cli-config-npm-1.26.3-58612285e9-e5aee39b10.zip differ
diff --git a/.yarn/cache/@percy-cli-config-npm-1.27.4-53cd92ca61-9a73569974.zip b/.yarn/cache/@percy-cli-config-npm-1.27.4-53cd92ca61-9a73569974.zip
deleted file mode 100644
index d9046674021..00000000000
Binary files a/.yarn/cache/@percy-cli-config-npm-1.27.4-53cd92ca61-9a73569974.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-exec-npm-1.26.3-52b15a6a7f-eb3e1f0fe6.zip b/.yarn/cache/@percy-cli-exec-npm-1.26.3-52b15a6a7f-eb3e1f0fe6.zip
new file mode 100644
index 00000000000..6337a20b527
Binary files /dev/null and b/.yarn/cache/@percy-cli-exec-npm-1.26.3-52b15a6a7f-eb3e1f0fe6.zip differ
diff --git a/.yarn/cache/@percy-cli-exec-npm-1.27.4-c4b9bf613e-70880fa122.zip b/.yarn/cache/@percy-cli-exec-npm-1.27.4-c4b9bf613e-70880fa122.zip
deleted file mode 100644
index 2166c29fd86..00000000000
Binary files a/.yarn/cache/@percy-cli-exec-npm-1.27.4-c4b9bf613e-70880fa122.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-npm-1.26.3-5901d2ddde-24b35b6532.zip b/.yarn/cache/@percy-cli-npm-1.26.3-5901d2ddde-24b35b6532.zip
new file mode 100644
index 00000000000..3ec414c7162
Binary files /dev/null and b/.yarn/cache/@percy-cli-npm-1.26.3-5901d2ddde-24b35b6532.zip differ
diff --git a/.yarn/cache/@percy-cli-npm-1.27.4-3d5bdae7ac-8bae40ba12.zip b/.yarn/cache/@percy-cli-npm-1.27.4-3d5bdae7ac-8bae40ba12.zip
deleted file mode 100644
index a40e96467a6..00000000000
Binary files a/.yarn/cache/@percy-cli-npm-1.27.4-3d5bdae7ac-8bae40ba12.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-snapshot-npm-1.26.3-8ac6f71a83-f234963a56.zip b/.yarn/cache/@percy-cli-snapshot-npm-1.26.3-8ac6f71a83-f234963a56.zip
new file mode 100644
index 00000000000..87a7c11c4ef
Binary files /dev/null and b/.yarn/cache/@percy-cli-snapshot-npm-1.26.3-8ac6f71a83-f234963a56.zip differ
diff --git a/.yarn/cache/@percy-cli-snapshot-npm-1.27.4-93116cce4d-12d6315794.zip b/.yarn/cache/@percy-cli-snapshot-npm-1.27.4-93116cce4d-12d6315794.zip
deleted file mode 100644
index b2ecac567c4..00000000000
Binary files a/.yarn/cache/@percy-cli-snapshot-npm-1.27.4-93116cce4d-12d6315794.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-cli-upload-npm-1.26.3-bde030c814-46b5b0a3fc.zip b/.yarn/cache/@percy-cli-upload-npm-1.26.3-bde030c814-46b5b0a3fc.zip
new file mode 100644
index 00000000000..acde87504cb
Binary files /dev/null and b/.yarn/cache/@percy-cli-upload-npm-1.26.3-bde030c814-46b5b0a3fc.zip differ
diff --git a/.yarn/cache/@percy-cli-upload-npm-1.27.4-0b3335e3e9-8c0d468177.zip b/.yarn/cache/@percy-cli-upload-npm-1.27.4-0b3335e3e9-8c0d468177.zip
deleted file mode 100644
index d567e0fc659..00000000000
Binary files a/.yarn/cache/@percy-cli-upload-npm-1.27.4-0b3335e3e9-8c0d468177.zip and /dev/null differ
diff --git a/.yarn/cache/@percy-client-npm-1.26.3-8ebae4e60d-17970e034c.zip b/.yarn/cache/@percy-client-npm-1.26.3-8ebae4e60d-17970e034c.zip
new file mode 100644
index 00000000000..d7509838605
Binary files /dev/null and b/.yarn/cache/@percy-client-npm-1.26.3-8ebae4e60d-17970e034c.zip differ
diff --git a/.yarn/cache/@percy-config-npm-1.26.3-8cb35a7d61-29314217a4.zip b/.yarn/cache/@percy-config-npm-1.26.3-8cb35a7d61-29314217a4.zip
new file mode 100644
index 00000000000..a6bfd7239d1
Binary files /dev/null and b/.yarn/cache/@percy-config-npm-1.26.3-8cb35a7d61-29314217a4.zip differ
diff --git a/.yarn/cache/@percy-core-npm-1.26.3-b222ec5266-0f89c555da.zip b/.yarn/cache/@percy-core-npm-1.26.3-b222ec5266-0f89c555da.zip
new file mode 100644
index 00000000000..dc67abe6d35
Binary files /dev/null and b/.yarn/cache/@percy-core-npm-1.26.3-b222ec5266-0f89c555da.zip differ
diff --git a/.yarn/cache/@percy-dom-npm-1.26.3-488694e0e8-0d9cc95a55.zip b/.yarn/cache/@percy-dom-npm-1.26.3-488694e0e8-0d9cc95a55.zip
new file mode 100644
index 00000000000..a1244f8366e
Binary files /dev/null and b/.yarn/cache/@percy-dom-npm-1.26.3-488694e0e8-0d9cc95a55.zip differ
diff --git a/.yarn/cache/@percy-env-npm-1.26.3-ea8545a516-d5ea127df6.zip b/.yarn/cache/@percy-env-npm-1.26.3-ea8545a516-d5ea127df6.zip
new file mode 100644
index 00000000000..b406ace9b97
Binary files /dev/null and b/.yarn/cache/@percy-env-npm-1.26.3-ea8545a516-d5ea127df6.zip differ
diff --git a/.yarn/cache/@percy-logger-npm-1.26.3-6d44095976-bb771655e8.zip b/.yarn/cache/@percy-logger-npm-1.26.3-6d44095976-bb771655e8.zip
new file mode 100644
index 00000000000..b7b1c4112a2
Binary files /dev/null and b/.yarn/cache/@percy-logger-npm-1.26.3-6d44095976-bb771655e8.zip differ
diff --git a/.yarn/cache/@percy-sdk-utils-npm-1.26.3-2fb4efaa46-cfe9cc4e36.zip b/.yarn/cache/@percy-sdk-utils-npm-1.26.3-2fb4efaa46-cfe9cc4e36.zip
new file mode 100644
index 00000000000..c104997d991
Binary files /dev/null and b/.yarn/cache/@percy-sdk-utils-npm-1.26.3-2fb4efaa46-cfe9cc4e36.zip differ
diff --git a/.yarn/cache/@percy-storybook-npm-4.3.6-df0ea36877-dadc57a110.zip b/.yarn/cache/@percy-storybook-npm-4.3.6-df0ea36877-dadc57a110.zip
new file mode 100644
index 00000000000..4087386d8f2
Binary files /dev/null and b/.yarn/cache/@percy-storybook-npm-4.3.6-df0ea36877-dadc57a110.zip differ
diff --git a/.yarn/cache/@percy-storybook-npm-4.3.7-fb30def7bf-7857877139.zip b/.yarn/cache/@percy-storybook-npm-4.3.7-fb30def7bf-7857877139.zip
deleted file mode 100644
index ad8bd501966..00000000000
Binary files a/.yarn/cache/@percy-storybook-npm-4.3.7-fb30def7bf-7857877139.zip and /dev/null differ
diff --git a/.yarn/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.10-0928d1798a-e0590fba5f.zip b/.yarn/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.10-0928d1798a-e0590fba5f.zip
new file mode 100644
index 00000000000..19afd92d9a7
Binary files /dev/null and b/.yarn/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.10-0928d1798a-e0590fba5f.zip differ
diff --git a/.yarn/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.11-661b68d368-ee7eff63ef.zip b/.yarn/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.11-661b68d368-ee7eff63ef.zip
deleted file mode 100644
index 37b9bf40ce6..00000000000
Binary files a/.yarn/cache/@pmmmwh-react-refresh-webpack-plugin-npm-0.5.11-661b68d368-ee7eff63ef.zip and /dev/null differ
diff --git a/.yarn/cache/@rollup-plugin-terser-npm-0.4.3-a198420b5c-58a9990ed0.zip b/.yarn/cache/@rollup-plugin-terser-npm-0.4.3-a198420b5c-58a9990ed0.zip
new file mode 100644
index 00000000000..c012dbf3897
Binary files /dev/null and b/.yarn/cache/@rollup-plugin-terser-npm-0.4.3-a198420b5c-58a9990ed0.zip differ
diff --git a/.yarn/cache/@rollup-plugin-terser-npm-0.4.4-c6896dd264-a5e066ddea.zip b/.yarn/cache/@rollup-plugin-terser-npm-0.4.4-c6896dd264-a5e066ddea.zip
deleted file mode 100644
index 4330a00fd8e..00000000000
Binary files a/.yarn/cache/@rollup-plugin-terser-npm-0.4.4-c6896dd264-a5e066ddea.zip and /dev/null differ
diff --git a/.yarn/cache/@sigstore-bundle-npm-1.0.0-6224fc68db-4a351f64a8.zip b/.yarn/cache/@sigstore-bundle-npm-1.0.0-6224fc68db-4a351f64a8.zip
new file mode 100644
index 00000000000..646d7e50bf5
Binary files /dev/null and b/.yarn/cache/@sigstore-bundle-npm-1.0.0-6224fc68db-4a351f64a8.zip differ
diff --git a/.yarn/cache/@sigstore-bundle-npm-1.1.0-b2cf24a13e-79e6cc4cc1.zip b/.yarn/cache/@sigstore-bundle-npm-1.1.0-b2cf24a13e-79e6cc4cc1.zip
deleted file mode 100644
index d1c0d1f657d..00000000000
Binary files a/.yarn/cache/@sigstore-bundle-npm-1.1.0-b2cf24a13e-79e6cc4cc1.zip and /dev/null differ
diff --git a/.yarn/cache/@sigstore-protobuf-specs-npm-0.2.0-93c8e6c759-360c26578b.zip b/.yarn/cache/@sigstore-protobuf-specs-npm-0.2.0-93c8e6c759-360c26578b.zip
new file mode 100644
index 00000000000..afa3ab99c53
Binary files /dev/null and b/.yarn/cache/@sigstore-protobuf-specs-npm-0.2.0-93c8e6c759-360c26578b.zip differ
diff --git a/.yarn/cache/@sigstore-protobuf-specs-npm-0.2.1-feecdcc08c-cb0b9d9b3e.zip b/.yarn/cache/@sigstore-protobuf-specs-npm-0.2.1-feecdcc08c-cb0b9d9b3e.zip
deleted file mode 100644
index 74a633428f0..00000000000
Binary files a/.yarn/cache/@sigstore-protobuf-specs-npm-0.2.1-feecdcc08c-cb0b9d9b3e.zip and /dev/null differ
diff --git a/.yarn/cache/@sigstore-sign-npm-1.0.0-d4cabc7c0c-44f23fc5ee.zip b/.yarn/cache/@sigstore-sign-npm-1.0.0-d4cabc7c0c-44f23fc5ee.zip
deleted file mode 100644
index d34655fec84..00000000000
Binary files a/.yarn/cache/@sigstore-sign-npm-1.0.0-d4cabc7c0c-44f23fc5ee.zip and /dev/null differ
diff --git a/.yarn/cache/@storybook-addon-storyshots-npm-6.5.16-545be87388-115365685f.zip b/.yarn/cache/@storybook-addon-storyshots-npm-6.5.16-545be87388-115365685f.zip
deleted file mode 100644
index 800126cec70..00000000000
Binary files a/.yarn/cache/@storybook-addon-storyshots-npm-6.5.16-545be87388-115365685f.zip and /dev/null differ
diff --git a/.yarn/cache/@storybook-babel-plugin-require-context-hook-npm-1.0.1-fa7a2e2bbf-31a1c56738.zip b/.yarn/cache/@storybook-babel-plugin-require-context-hook-npm-1.0.1-fa7a2e2bbf-31a1c56738.zip
deleted file mode 100644
index 1dd02001502..00000000000
Binary files a/.yarn/cache/@storybook-babel-plugin-require-context-hook-npm-1.0.1-fa7a2e2bbf-31a1c56738.zip and /dev/null differ
diff --git a/.yarn/cache/@storybook-builder-webpack5-npm-6.5.16-2692a11b75-ae3f1556f7.zip b/.yarn/cache/@storybook-builder-webpack5-npm-6.5.16-2692a11b75-ae3f1556f7.zip
deleted file mode 100644
index 49cdd36906d..00000000000
Binary files a/.yarn/cache/@storybook-builder-webpack5-npm-6.5.16-2692a11b75-ae3f1556f7.zip and /dev/null differ
diff --git a/.yarn/cache/@storybook-manager-webpack5-npm-6.5.16-8f56451508-42a8e5c961.zip b/.yarn/cache/@storybook-manager-webpack5-npm-6.5.16-8f56451508-42a8e5c961.zip
deleted file mode 100644
index 2bcbd2796ef..00000000000
Binary files a/.yarn/cache/@storybook-manager-webpack5-npm-6.5.16-8f56451508-42a8e5c961.zip and /dev/null differ
diff --git a/.yarn/cache/@types-babel__core-npm-7.20.1-f44761b6b6-e63e5e71be.zip b/.yarn/cache/@types-babel__core-npm-7.20.1-f44761b6b6-e63e5e71be.zip
new file mode 100644
index 00000000000..a81152ecc89
Binary files /dev/null and b/.yarn/cache/@types-babel__core-npm-7.20.1-f44761b6b6-e63e5e71be.zip differ
diff --git a/.yarn/cache/@types-babel__core-npm-7.20.4-0229996dec-01e1b5f0a2.zip b/.yarn/cache/@types-babel__core-npm-7.20.4-0229996dec-01e1b5f0a2.zip
deleted file mode 100644
index 0600bf753e0..00000000000
Binary files a/.yarn/cache/@types-babel__core-npm-7.20.4-0229996dec-01e1b5f0a2.zip and /dev/null differ
diff --git a/.yarn/cache/@types-babel__generator-npm-7.6.4-03e776f956-34f361a0d5.zip b/.yarn/cache/@types-babel__generator-npm-7.6.4-03e776f956-34f361a0d5.zip
new file mode 100644
index 00000000000..1097b341b5a
Binary files /dev/null and b/.yarn/cache/@types-babel__generator-npm-7.6.4-03e776f956-34f361a0d5.zip differ
diff --git a/.yarn/cache/@types-babel__generator-npm-7.6.7-6cfe0afe44-11d36fdcee.zip b/.yarn/cache/@types-babel__generator-npm-7.6.7-6cfe0afe44-11d36fdcee.zip
deleted file mode 100644
index 83fbcff3cec..00000000000
Binary files a/.yarn/cache/@types-babel__generator-npm-7.6.7-6cfe0afe44-11d36fdcee.zip and /dev/null differ
diff --git a/.yarn/cache/@types-babel__template-npm-7.4.1-fe1db49e53-649fe8b42c.zip b/.yarn/cache/@types-babel__template-npm-7.4.1-fe1db49e53-649fe8b42c.zip
new file mode 100644
index 00000000000..36ceaff319f
Binary files /dev/null and b/.yarn/cache/@types-babel__template-npm-7.4.1-fe1db49e53-649fe8b42c.zip differ
diff --git a/.yarn/cache/@types-babel__template-npm-7.4.4-f34eba762c-d7a02d2a9b.zip b/.yarn/cache/@types-babel__template-npm-7.4.4-f34eba762c-d7a02d2a9b.zip
deleted file mode 100644
index c421f0574b6..00000000000
Binary files a/.yarn/cache/@types-babel__template-npm-7.4.4-f34eba762c-d7a02d2a9b.zip and /dev/null differ
diff --git a/.yarn/cache/@types-babel__traverse-npm-7.20.1-e1e93d4b3f-8f18d1488a.zip b/.yarn/cache/@types-babel__traverse-npm-7.20.1-e1e93d4b3f-8f18d1488a.zip
new file mode 100644
index 00000000000..4e2cc4d4233
Binary files /dev/null and b/.yarn/cache/@types-babel__traverse-npm-7.20.1-e1e93d4b3f-8f18d1488a.zip differ
diff --git a/.yarn/cache/@types-babel__traverse-npm-7.20.4-49941d89c4-927073e3a2.zip b/.yarn/cache/@types-babel__traverse-npm-7.20.4-49941d89c4-927073e3a2.zip
deleted file mode 100644
index 74dd36516fd..00000000000
Binary files a/.yarn/cache/@types-babel__traverse-npm-7.20.4-49941d89c4-927073e3a2.zip and /dev/null differ
diff --git a/.yarn/cache/@types-bluebird-npm-3.5.38-f885968f75-231b5a2669.zip b/.yarn/cache/@types-bluebird-npm-3.5.38-f885968f75-231b5a2669.zip
new file mode 100644
index 00000000000..1a08a43478e
Binary files /dev/null and b/.yarn/cache/@types-bluebird-npm-3.5.38-f885968f75-231b5a2669.zip differ
diff --git a/.yarn/cache/@types-bluebird-npm-3.5.42-15f353048c-09ad60b083.zip b/.yarn/cache/@types-bluebird-npm-3.5.42-15f353048c-09ad60b083.zip
deleted file mode 100644
index c63d1433dbf..00000000000
Binary files a/.yarn/cache/@types-bluebird-npm-3.5.42-15f353048c-09ad60b083.zip and /dev/null differ
diff --git a/.yarn/cache/@types-body-parser-npm-1.19.2-f845b7b538-e17840c7d7.zip b/.yarn/cache/@types-body-parser-npm-1.19.2-f845b7b538-e17840c7d7.zip
new file mode 100644
index 00000000000..37c532e75bc
Binary files /dev/null and b/.yarn/cache/@types-body-parser-npm-1.19.2-f845b7b538-e17840c7d7.zip differ
diff --git a/.yarn/cache/@types-body-parser-npm-1.19.5-97fb106976-1e251118c4.zip b/.yarn/cache/@types-body-parser-npm-1.19.5-97fb106976-1e251118c4.zip
deleted file mode 100644
index 507341171d7..00000000000
Binary files a/.yarn/cache/@types-body-parser-npm-1.19.5-97fb106976-1e251118c4.zip and /dev/null differ
diff --git a/.yarn/cache/@types-bonjour-npm-3.5.10-2862bada55-bfcadb042a.zip b/.yarn/cache/@types-bonjour-npm-3.5.10-2862bada55-bfcadb042a.zip
new file mode 100644
index 00000000000..d00808e46b8
Binary files /dev/null and b/.yarn/cache/@types-bonjour-npm-3.5.10-2862bada55-bfcadb042a.zip differ
diff --git a/.yarn/cache/@types-bonjour-npm-3.5.13-6614f112a1-e827570e09.zip b/.yarn/cache/@types-bonjour-npm-3.5.13-6614f112a1-e827570e09.zip
deleted file mode 100644
index e4cd4862891..00000000000
Binary files a/.yarn/cache/@types-bonjour-npm-3.5.13-6614f112a1-e827570e09.zip and /dev/null differ
diff --git a/.yarn/cache/@types-chai-npm-4.3.10-4c80ae34e8-a52b2c603c.zip b/.yarn/cache/@types-chai-npm-4.3.10-4c80ae34e8-a52b2c603c.zip
deleted file mode 100644
index 7c5baaebd1b..00000000000
Binary files a/.yarn/cache/@types-chai-npm-4.3.10-4c80ae34e8-a52b2c603c.zip and /dev/null differ
diff --git a/.yarn/cache/@types-chai-npm-4.3.5-dce79013f2-35d96db335.zip b/.yarn/cache/@types-chai-npm-4.3.5-dce79013f2-35d96db335.zip
new file mode 100644
index 00000000000..dc252fa9471
Binary files /dev/null and b/.yarn/cache/@types-chai-npm-4.3.5-dce79013f2-35d96db335.zip differ
diff --git a/.yarn/cache/@types-cheerio-npm-0.22.31-63e46da0e3-e5af81ef3a.zip b/.yarn/cache/@types-cheerio-npm-0.22.31-63e46da0e3-e5af81ef3a.zip
new file mode 100644
index 00000000000..1fea40a078f
Binary files /dev/null and b/.yarn/cache/@types-cheerio-npm-0.22.31-63e46da0e3-e5af81ef3a.zip differ
diff --git a/.yarn/cache/@types-cheerio-npm-0.22.34-df26d35b4e-ebe9de49ad.zip b/.yarn/cache/@types-cheerio-npm-0.22.34-df26d35b4e-ebe9de49ad.zip
deleted file mode 100644
index 5950711be21..00000000000
Binary files a/.yarn/cache/@types-cheerio-npm-0.22.34-df26d35b4e-ebe9de49ad.zip and /dev/null differ
diff --git a/.yarn/cache/@types-connect-history-api-fallback-npm-1.5.0-81c642d607-f180e7c540.zip b/.yarn/cache/@types-connect-history-api-fallback-npm-1.5.0-81c642d607-f180e7c540.zip
new file mode 100644
index 00000000000..51e6972ef3d
Binary files /dev/null and b/.yarn/cache/@types-connect-history-api-fallback-npm-1.5.0-81c642d607-f180e7c540.zip differ
diff --git a/.yarn/cache/@types-connect-history-api-fallback-npm-1.5.3-6738ffdc3d-97a0cdd9a6.zip b/.yarn/cache/@types-connect-history-api-fallback-npm-1.5.3-6738ffdc3d-97a0cdd9a6.zip
deleted file mode 100644
index 5fa3ca4a970..00000000000
Binary files a/.yarn/cache/@types-connect-history-api-fallback-npm-1.5.3-6738ffdc3d-97a0cdd9a6.zip and /dev/null differ
diff --git a/.yarn/cache/@types-connect-npm-3.4.35-7337eee0a3-fe81351470.zip b/.yarn/cache/@types-connect-npm-3.4.35-7337eee0a3-fe81351470.zip
new file mode 100644
index 00000000000..ae5f3a0f182
Binary files /dev/null and b/.yarn/cache/@types-connect-npm-3.4.35-7337eee0a3-fe81351470.zip differ
diff --git a/.yarn/cache/@types-connect-npm-3.4.38-a8a4c38337-7eb1bc5342.zip b/.yarn/cache/@types-connect-npm-3.4.38-a8a4c38337-7eb1bc5342.zip
deleted file mode 100644
index f943dcaa9bb..00000000000
Binary files a/.yarn/cache/@types-connect-npm-3.4.38-a8a4c38337-7eb1bc5342.zip and /dev/null differ
diff --git a/.yarn/cache/@types-cors-npm-2.8.13-4b8ac1068f-7ef197ea19.zip b/.yarn/cache/@types-cors-npm-2.8.13-4b8ac1068f-7ef197ea19.zip
new file mode 100644
index 00000000000..8c75a92a5c9
Binary files /dev/null and b/.yarn/cache/@types-cors-npm-2.8.13-4b8ac1068f-7ef197ea19.zip differ
diff --git a/.yarn/cache/@types-cors-npm-2.8.16-33908604b3-0c760aa826.zip b/.yarn/cache/@types-cors-npm-2.8.16-33908604b3-0c760aa826.zip
deleted file mode 100644
index 4e3e14a767d..00000000000
Binary files a/.yarn/cache/@types-cors-npm-2.8.16-33908604b3-0c760aa826.zip and /dev/null differ
diff --git a/.yarn/cache/@types-eslint-npm-8.44.2-6e9a6149b6-9fe07d4fba.zip b/.yarn/cache/@types-eslint-npm-8.44.2-6e9a6149b6-9fe07d4fba.zip
new file mode 100644
index 00000000000..e76e75b5199
Binary files /dev/null and b/.yarn/cache/@types-eslint-npm-8.44.2-6e9a6149b6-9fe07d4fba.zip differ
diff --git a/.yarn/cache/@types-eslint-npm-8.44.7-b116226242-3bb9415f5d.zip b/.yarn/cache/@types-eslint-npm-8.44.7-b116226242-3bb9415f5d.zip
deleted file mode 100644
index 0753911c33e..00000000000
Binary files a/.yarn/cache/@types-eslint-npm-8.44.7-b116226242-3bb9415f5d.zip and /dev/null differ
diff --git a/.yarn/cache/@types-eslint-scope-npm-3.7.4-c11d226d71-ea6a9363e9.zip b/.yarn/cache/@types-eslint-scope-npm-3.7.4-c11d226d71-ea6a9363e9.zip
new file mode 100644
index 00000000000..6ae839b3030
Binary files /dev/null and b/.yarn/cache/@types-eslint-scope-npm-3.7.4-c11d226d71-ea6a9363e9.zip differ
diff --git a/.yarn/cache/@types-eslint-scope-npm-3.7.7-efa26592f6-e2889a124a.zip b/.yarn/cache/@types-eslint-scope-npm-3.7.7-efa26592f6-e2889a124a.zip
deleted file mode 100644
index 6e1bed867c9..00000000000
Binary files a/.yarn/cache/@types-eslint-scope-npm-3.7.7-efa26592f6-e2889a124a.zip and /dev/null differ
diff --git a/.yarn/cache/@types-estree-npm-1.0.1-4c9469c165-f252569c00.zip b/.yarn/cache/@types-estree-npm-1.0.1-4c9469c165-f252569c00.zip
new file mode 100644
index 00000000000..44b1692eb01
Binary files /dev/null and b/.yarn/cache/@types-estree-npm-1.0.1-4c9469c165-f252569c00.zip differ
diff --git a/.yarn/cache/@types-estree-npm-1.0.5-5b7faed3b4-7de6d928dd.zip b/.yarn/cache/@types-estree-npm-1.0.5-5b7faed3b4-7de6d928dd.zip
deleted file mode 100644
index 022b94a1104..00000000000
Binary files a/.yarn/cache/@types-estree-npm-1.0.5-5b7faed3b4-7de6d928dd.zip and /dev/null differ
diff --git a/.yarn/cache/@types-express-npm-4.17.17-46fe8173db-e2959a5fec.zip b/.yarn/cache/@types-express-npm-4.17.17-46fe8173db-e2959a5fec.zip
new file mode 100644
index 00000000000..d4f713908f7
Binary files /dev/null and b/.yarn/cache/@types-express-npm-4.17.17-46fe8173db-e2959a5fec.zip differ
diff --git a/.yarn/cache/@types-express-npm-4.17.21-be92a0245e-7a6d26cf6f.zip b/.yarn/cache/@types-express-npm-4.17.21-be92a0245e-7a6d26cf6f.zip
deleted file mode 100644
index 97ffe44212f..00000000000
Binary files a/.yarn/cache/@types-express-npm-4.17.21-be92a0245e-7a6d26cf6f.zip and /dev/null differ
diff --git a/.yarn/cache/@types-express-serve-static-core-npm-4.17.35-c86e5f6e4a-9f08212ac1.zip b/.yarn/cache/@types-express-serve-static-core-npm-4.17.35-c86e5f6e4a-9f08212ac1.zip
new file mode 100644
index 00000000000..c885909f912
Binary files /dev/null and b/.yarn/cache/@types-express-serve-static-core-npm-4.17.35-c86e5f6e4a-9f08212ac1.zip differ
diff --git a/.yarn/cache/@types-express-serve-static-core-npm-4.17.41-7d196a92fa-7647e19d9c.zip b/.yarn/cache/@types-express-serve-static-core-npm-4.17.41-7d196a92fa-7647e19d9c.zip
deleted file mode 100644
index 0248806ddf5..00000000000
Binary files a/.yarn/cache/@types-express-serve-static-core-npm-4.17.41-7d196a92fa-7647e19d9c.zip and /dev/null differ
diff --git a/.yarn/cache/@types-graceful-fs-npm-4.1.6-1eadcf742d-c3070ccdc9.zip b/.yarn/cache/@types-graceful-fs-npm-4.1.6-1eadcf742d-c3070ccdc9.zip
new file mode 100644
index 00000000000..b3aaa72fb3a
Binary files /dev/null and b/.yarn/cache/@types-graceful-fs-npm-4.1.6-1eadcf742d-c3070ccdc9.zip differ
diff --git a/.yarn/cache/@types-graceful-fs-npm-4.1.9-ebd697fe83-79d746a8f0.zip b/.yarn/cache/@types-graceful-fs-npm-4.1.9-ebd697fe83-79d746a8f0.zip
deleted file mode 100644
index 8af594bc6aa..00000000000
Binary files a/.yarn/cache/@types-graceful-fs-npm-4.1.9-ebd697fe83-79d746a8f0.zip and /dev/null differ
diff --git a/.yarn/cache/@types-hast-npm-2.3.5-1a6e9442f9-e435e9fbf6.zip b/.yarn/cache/@types-hast-npm-2.3.5-1a6e9442f9-e435e9fbf6.zip
new file mode 100644
index 00000000000..c4376d246ec
Binary files /dev/null and b/.yarn/cache/@types-hast-npm-2.3.5-1a6e9442f9-e435e9fbf6.zip differ
diff --git a/.yarn/cache/@types-hast-npm-2.3.8-65e97ced2a-4c3b3efb70.zip b/.yarn/cache/@types-hast-npm-2.3.8-65e97ced2a-4c3b3efb70.zip
deleted file mode 100644
index 92a5d25ec3d..00000000000
Binary files a/.yarn/cache/@types-hast-npm-2.3.8-65e97ced2a-4c3b3efb70.zip and /dev/null differ
diff --git a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-071e6d75a0.zip b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-071e6d75a0.zip
new file mode 100644
index 00000000000..88e73266b45
Binary files /dev/null and b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.1-c0081332b2-071e6d75a0.zip differ
diff --git a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.5-98b8d8e47b-b645b062a2.zip b/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.5-98b8d8e47b-b645b062a2.zip
deleted file mode 100644
index ea2e847f9f5..00000000000
Binary files a/.yarn/cache/@types-hoist-non-react-statics-npm-3.3.5-98b8d8e47b-b645b062a2.zip and /dev/null differ
diff --git a/.yarn/cache/@types-html-minifier-terser-npm-6.1.0-707ea07fcb-06bb3e1e8e.zip b/.yarn/cache/@types-html-minifier-terser-npm-6.1.0-707ea07fcb-06bb3e1e8e.zip
deleted file mode 100644
index a5ca8044069..00000000000
Binary files a/.yarn/cache/@types-html-minifier-terser-npm-6.1.0-707ea07fcb-06bb3e1e8e.zip and /dev/null differ
diff --git a/.yarn/cache/@types-http-errors-npm-2.0.1-c59d5079a7-3bb0c50b0a.zip b/.yarn/cache/@types-http-errors-npm-2.0.1-c59d5079a7-3bb0c50b0a.zip
new file mode 100644
index 00000000000..791142d74c8
Binary files /dev/null and b/.yarn/cache/@types-http-errors-npm-2.0.1-c59d5079a7-3bb0c50b0a.zip differ
diff --git a/.yarn/cache/@types-http-errors-npm-2.0.4-8b39ca5d7c-1f3d7c3b32.zip b/.yarn/cache/@types-http-errors-npm-2.0.4-8b39ca5d7c-1f3d7c3b32.zip
deleted file mode 100644
index 598b43aa4a1..00000000000
Binary files a/.yarn/cache/@types-http-errors-npm-2.0.4-8b39ca5d7c-1f3d7c3b32.zip and /dev/null differ
diff --git a/.yarn/cache/@types-http-proxy-npm-1.17.11-55ebe38928-7cda456611.zip b/.yarn/cache/@types-http-proxy-npm-1.17.11-55ebe38928-7cda456611.zip
new file mode 100644
index 00000000000..8d33e938d1c
Binary files /dev/null and b/.yarn/cache/@types-http-proxy-npm-1.17.11-55ebe38928-7cda456611.zip differ
diff --git a/.yarn/cache/@types-http-proxy-npm-1.17.14-170e4e32fb-aa1a3e66cd.zip b/.yarn/cache/@types-http-proxy-npm-1.17.14-170e4e32fb-aa1a3e66cd.zip
deleted file mode 100644
index 3ff35190a59..00000000000
Binary files a/.yarn/cache/@types-http-proxy-npm-1.17.14-170e4e32fb-aa1a3e66cd.zip and /dev/null differ
diff --git a/.yarn/cache/@types-is-function-npm-1.0.1-6f15e0bc64-07200dabf7.zip b/.yarn/cache/@types-is-function-npm-1.0.1-6f15e0bc64-07200dabf7.zip
new file mode 100644
index 00000000000..13dd04d6867
Binary files /dev/null and b/.yarn/cache/@types-is-function-npm-1.0.1-6f15e0bc64-07200dabf7.zip differ
diff --git a/.yarn/cache/@types-is-function-npm-1.0.3-9961717cbf-c762c05363.zip b/.yarn/cache/@types-is-function-npm-1.0.3-9961717cbf-c762c05363.zip
deleted file mode 100644
index d946474c6ae..00000000000
Binary files a/.yarn/cache/@types-is-function-npm-1.0.3-9961717cbf-c762c05363.zip and /dev/null differ
diff --git a/.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.4-734954bb56-a25d7589ee.zip b/.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.4-734954bb56-a25d7589ee.zip
new file mode 100644
index 00000000000..75f6652baac
Binary files /dev/null and b/.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.4-734954bb56-a25d7589ee.zip differ
diff --git a/.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.6-2ea31fda9c-3feac423fd.zip b/.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.6-2ea31fda9c-3feac423fd.zip
deleted file mode 100644
index c09edec14c3..00000000000
Binary files a/.yarn/cache/@types-istanbul-lib-coverage-npm-2.0.6-2ea31fda9c-3feac423fd.zip and /dev/null differ
diff --git a/.yarn/cache/@types-istanbul-lib-report-npm-3.0.0-50de3e6b3b-f121dcac8a.zip b/.yarn/cache/@types-istanbul-lib-report-npm-3.0.0-50de3e6b3b-f121dcac8a.zip
new file mode 100644
index 00000000000..7f0ebaf2782
Binary files /dev/null and b/.yarn/cache/@types-istanbul-lib-report-npm-3.0.0-50de3e6b3b-f121dcac8a.zip differ
diff --git a/.yarn/cache/@types-istanbul-lib-report-npm-3.0.3-a5c0ef4b88-b91e9b60f8.zip b/.yarn/cache/@types-istanbul-lib-report-npm-3.0.3-a5c0ef4b88-b91e9b60f8.zip
deleted file mode 100644
index b9934ced957..00000000000
Binary files a/.yarn/cache/@types-istanbul-lib-report-npm-3.0.3-a5c0ef4b88-b91e9b60f8.zip and /dev/null differ
diff --git a/.yarn/cache/@types-istanbul-reports-npm-3.0.1-770e825002-f1ad54bc68.zip b/.yarn/cache/@types-istanbul-reports-npm-3.0.1-770e825002-f1ad54bc68.zip
new file mode 100644
index 00000000000..2b6b8f206ad
Binary files /dev/null and b/.yarn/cache/@types-istanbul-reports-npm-3.0.1-770e825002-f1ad54bc68.zip differ
diff --git a/.yarn/cache/@types-istanbul-reports-npm-3.0.4-1afa69db29-93eb188357.zip b/.yarn/cache/@types-istanbul-reports-npm-3.0.4-1afa69db29-93eb188357.zip
deleted file mode 100644
index 47eedca9480..00000000000
Binary files a/.yarn/cache/@types-istanbul-reports-npm-3.0.4-1afa69db29-93eb188357.zip and /dev/null differ
diff --git a/.yarn/cache/@types-jasmine-npm-3.10.11-e3cf7cce12-6c11752cef.zip b/.yarn/cache/@types-jasmine-npm-3.10.11-e3cf7cce12-6c11752cef.zip
new file mode 100644
index 00000000000..2372489e365
Binary files /dev/null and b/.yarn/cache/@types-jasmine-npm-3.10.11-e3cf7cce12-6c11752cef.zip differ
diff --git a/.yarn/cache/@types-jasmine-npm-3.10.16-a54fe1b433-c01ed8dfb7.zip b/.yarn/cache/@types-jasmine-npm-3.10.16-a54fe1b433-c01ed8dfb7.zip
deleted file mode 100644
index daff9c19a72..00000000000
Binary files a/.yarn/cache/@types-jasmine-npm-3.10.16-a54fe1b433-c01ed8dfb7.zip and /dev/null differ
diff --git a/.yarn/cache/@types-jest-npm-26.0.24-47c570294f-1391071e48.zip b/.yarn/cache/@types-jest-npm-26.0.24-47c570294f-1391071e48.zip
deleted file mode 100644
index 5080147c245..00000000000
Binary files a/.yarn/cache/@types-jest-npm-26.0.24-47c570294f-1391071e48.zip and /dev/null differ
diff --git a/.yarn/cache/@types-jest-npm-29.5.3-8fc40e94bc-e8b4eda3ba.zip b/.yarn/cache/@types-jest-npm-29.5.3-8fc40e94bc-e8b4eda3ba.zip
new file mode 100644
index 00000000000..6ad32c1568f
Binary files /dev/null and b/.yarn/cache/@types-jest-npm-29.5.3-8fc40e94bc-e8b4eda3ba.zip differ
diff --git a/.yarn/cache/@types-jest-npm-29.5.8-2a56a49621-a8194e26c6.zip b/.yarn/cache/@types-jest-npm-29.5.8-2a56a49621-a8194e26c6.zip
deleted file mode 100644
index 08bcb9e0d1d..00000000000
Binary files a/.yarn/cache/@types-jest-npm-29.5.8-2a56a49621-a8194e26c6.zip and /dev/null differ
diff --git a/.yarn/cache/@types-jest-specific-snapshot-npm-0.5.9-9806487307-b452e423a0.zip b/.yarn/cache/@types-jest-specific-snapshot-npm-0.5.9-9806487307-b452e423a0.zip
deleted file mode 100644
index a5193228184..00000000000
Binary files a/.yarn/cache/@types-jest-specific-snapshot-npm-0.5.9-9806487307-b452e423a0.zip and /dev/null differ
diff --git a/.yarn/cache/@types-json-schema-npm-7.0.12-f05cfc0e99-7a72ba9cb7.zip b/.yarn/cache/@types-json-schema-npm-7.0.12-f05cfc0e99-7a72ba9cb7.zip
new file mode 100644
index 00000000000..69504d6f0d7
Binary files /dev/null and b/.yarn/cache/@types-json-schema-npm-7.0.12-f05cfc0e99-7a72ba9cb7.zip differ
diff --git a/.yarn/cache/@types-json-schema-npm-7.0.15-fd16381786-1a3c3e0623.zip b/.yarn/cache/@types-json-schema-npm-7.0.15-fd16381786-1a3c3e0623.zip
deleted file mode 100644
index 68112014996..00000000000
Binary files a/.yarn/cache/@types-json-schema-npm-7.0.15-fd16381786-1a3c3e0623.zip and /dev/null differ
diff --git a/.yarn/cache/@types-linkify-it-npm-3.0.2-ccb33717e7-dff8f10faf.zip b/.yarn/cache/@types-linkify-it-npm-3.0.2-ccb33717e7-dff8f10faf.zip
new file mode 100644
index 00000000000..835fbe0bdc8
Binary files /dev/null and b/.yarn/cache/@types-linkify-it-npm-3.0.2-ccb33717e7-dff8f10faf.zip differ
diff --git a/.yarn/cache/@types-linkify-it-npm-3.0.5-ff4a6ef3bd-fac28f41a6.zip b/.yarn/cache/@types-linkify-it-npm-3.0.5-ff4a6ef3bd-fac28f41a6.zip
deleted file mode 100644
index 9435a15a855..00000000000
Binary files a/.yarn/cache/@types-linkify-it-npm-3.0.5-ff4a6ef3bd-fac28f41a6.zip and /dev/null differ
diff --git a/.yarn/cache/@types-lodash-es-npm-4.17.11-c8d3264075-87516f652e.zip b/.yarn/cache/@types-lodash-es-npm-4.17.11-c8d3264075-87516f652e.zip
deleted file mode 100644
index 370a8383f01..00000000000
Binary files a/.yarn/cache/@types-lodash-es-npm-4.17.11-c8d3264075-87516f652e.zip and /dev/null differ
diff --git a/.yarn/cache/@types-lodash-es-npm-4.17.8-0aba51d605-4a96201d06.zip b/.yarn/cache/@types-lodash-es-npm-4.17.8-0aba51d605-4a96201d06.zip
new file mode 100644
index 00000000000..68d823f565b
Binary files /dev/null and b/.yarn/cache/@types-lodash-es-npm-4.17.8-0aba51d605-4a96201d06.zip differ
diff --git a/.yarn/cache/@types-lodash-npm-4.14.197-8db1555bb5-a09f6c9308.zip b/.yarn/cache/@types-lodash-npm-4.14.197-8db1555bb5-a09f6c9308.zip
new file mode 100644
index 00000000000..e7fed676f8e
Binary files /dev/null and b/.yarn/cache/@types-lodash-npm-4.14.197-8db1555bb5-a09f6c9308.zip differ
diff --git a/.yarn/cache/@types-lodash-npm-4.14.201-0c286bbc0c-9b56a2a650.zip b/.yarn/cache/@types-lodash-npm-4.14.201-0c286bbc0c-9b56a2a650.zip
deleted file mode 100644
index b8fffcf25e2..00000000000
Binary files a/.yarn/cache/@types-lodash-npm-4.14.201-0c286bbc0c-9b56a2a650.zip and /dev/null differ
diff --git a/.yarn/cache/@types-mdast-npm-3.0.12-e8f7ab24f4-7446c87e3c.zip b/.yarn/cache/@types-mdast-npm-3.0.12-e8f7ab24f4-7446c87e3c.zip
new file mode 100644
index 00000000000..8362e825ae8
Binary files /dev/null and b/.yarn/cache/@types-mdast-npm-3.0.12-e8f7ab24f4-7446c87e3c.zip differ
diff --git a/.yarn/cache/@types-mdast-npm-3.0.15-66e5bbbc2b-050a5c1383.zip b/.yarn/cache/@types-mdast-npm-3.0.15-66e5bbbc2b-050a5c1383.zip
deleted file mode 100644
index cdbe0fd094f..00000000000
Binary files a/.yarn/cache/@types-mdast-npm-3.0.15-66e5bbbc2b-050a5c1383.zip and /dev/null differ
diff --git a/.yarn/cache/@types-mdurl-npm-1.0.2-5b57c94d95-6a6fba0f81.zip b/.yarn/cache/@types-mdurl-npm-1.0.2-5b57c94d95-6a6fba0f81.zip
new file mode 100644
index 00000000000..847071bcac1
Binary files /dev/null and b/.yarn/cache/@types-mdurl-npm-1.0.2-5b57c94d95-6a6fba0f81.zip differ
diff --git a/.yarn/cache/@types-mdurl-npm-1.0.5-924b60d7d4-e8e872e8da.zip b/.yarn/cache/@types-mdurl-npm-1.0.5-924b60d7d4-e8e872e8da.zip
deleted file mode 100644
index 6912667e64c..00000000000
Binary files a/.yarn/cache/@types-mdurl-npm-1.0.5-924b60d7d4-e8e872e8da.zip and /dev/null differ
diff --git a/.yarn/cache/@types-mime-npm-1.3.2-ea71878ab3-0493368244.zip b/.yarn/cache/@types-mime-npm-1.3.2-ea71878ab3-0493368244.zip
new file mode 100644
index 00000000000..e363cbe58cb
Binary files /dev/null and b/.yarn/cache/@types-mime-npm-1.3.2-ea71878ab3-0493368244.zip differ
diff --git a/.yarn/cache/@types-mime-npm-1.3.5-48d28990db-e29a5f9c47.zip b/.yarn/cache/@types-mime-npm-1.3.5-48d28990db-e29a5f9c47.zip
deleted file mode 100644
index c39cba3f047..00000000000
Binary files a/.yarn/cache/@types-mime-npm-1.3.5-48d28990db-e29a5f9c47.zip and /dev/null differ
diff --git a/.yarn/cache/@types-mime-npm-3.0.1-dec03536dc-4040fac73f.zip b/.yarn/cache/@types-mime-npm-3.0.1-dec03536dc-4040fac73f.zip
new file mode 100644
index 00000000000..7c90f6383c9
Binary files /dev/null and b/.yarn/cache/@types-mime-npm-3.0.1-dec03536dc-4040fac73f.zip differ
diff --git a/.yarn/cache/@types-mime-npm-3.0.4-5cb286d662-a6139c8e1f.zip b/.yarn/cache/@types-mime-npm-3.0.4-5cb286d662-a6139c8e1f.zip
deleted file mode 100644
index 5e73b8a14ae..00000000000
Binary files a/.yarn/cache/@types-mime-npm-3.0.4-5cb286d662-a6139c8e1f.zip and /dev/null differ
diff --git a/.yarn/cache/@types-minimist-npm-1.2.2-a445de65da-b8da83c66e.zip b/.yarn/cache/@types-minimist-npm-1.2.2-a445de65da-b8da83c66e.zip
new file mode 100644
index 00000000000..42814291074
Binary files /dev/null and b/.yarn/cache/@types-minimist-npm-1.2.2-a445de65da-b8da83c66e.zip differ
diff --git a/.yarn/cache/@types-minimist-npm-1.2.5-c85664a9d8-477047b606.zip b/.yarn/cache/@types-minimist-npm-1.2.5-c85664a9d8-477047b606.zip
deleted file mode 100644
index 21b2adc583d..00000000000
Binary files a/.yarn/cache/@types-minimist-npm-1.2.5-c85664a9d8-477047b606.zip and /dev/null differ
diff --git a/.yarn/cache/@types-node-fetch-npm-2.6.4-3e5a54c325-e904b5f887.zip b/.yarn/cache/@types-node-fetch-npm-2.6.4-3e5a54c325-e904b5f887.zip
new file mode 100644
index 00000000000..7d464a4c0b7
Binary files /dev/null and b/.yarn/cache/@types-node-fetch-npm-2.6.4-3e5a54c325-e904b5f887.zip differ
diff --git a/.yarn/cache/@types-node-fetch-npm-2.6.9-435765ff6f-fc46141516.zip b/.yarn/cache/@types-node-fetch-npm-2.6.9-435765ff6f-fc46141516.zip
deleted file mode 100644
index 51ccc6136c9..00000000000
Binary files a/.yarn/cache/@types-node-fetch-npm-2.6.9-435765ff6f-fc46141516.zip and /dev/null differ
diff --git a/.yarn/cache/@types-node-forge-npm-1.3.9-9ca80870d7-8907246496.zip b/.yarn/cache/@types-node-forge-npm-1.3.9-9ca80870d7-8907246496.zip
deleted file mode 100644
index bd6a206188e..00000000000
Binary files a/.yarn/cache/@types-node-forge-npm-1.3.9-9ca80870d7-8907246496.zip and /dev/null differ
diff --git a/.yarn/cache/@types-node-npm-14.18.54-59b82113de-097e1f7868.zip b/.yarn/cache/@types-node-npm-14.18.54-59b82113de-097e1f7868.zip
new file mode 100644
index 00000000000..6c5ff64dfb3
Binary files /dev/null and b/.yarn/cache/@types-node-npm-14.18.54-59b82113de-097e1f7868.zip differ
diff --git a/.yarn/cache/@types-node-npm-14.18.63-a411f0ee60-82a7775898.zip b/.yarn/cache/@types-node-npm-14.18.63-a411f0ee60-82a7775898.zip
deleted file mode 100644
index 1554a12aada..00000000000
Binary files a/.yarn/cache/@types-node-npm-14.18.63-a411f0ee60-82a7775898.zip and /dev/null differ
diff --git a/.yarn/cache/@types-node-npm-16.18.40-df6f15e2e6-b373cc6505.zip b/.yarn/cache/@types-node-npm-16.18.40-df6f15e2e6-b373cc6505.zip
new file mode 100644
index 00000000000..47f6affb71c
Binary files /dev/null and b/.yarn/cache/@types-node-npm-16.18.40-df6f15e2e6-b373cc6505.zip differ
diff --git a/.yarn/cache/@types-node-npm-16.18.61-b60a4b345f-ea2fdb3876.zip b/.yarn/cache/@types-node-npm-16.18.61-b60a4b345f-ea2fdb3876.zip
deleted file mode 100644
index 91cf408be85..00000000000
Binary files a/.yarn/cache/@types-node-npm-16.18.61-b60a4b345f-ea2fdb3876.zip and /dev/null differ
diff --git a/.yarn/cache/@types-node-npm-18.17.5-e736eb2acc-646698e07b.zip b/.yarn/cache/@types-node-npm-18.17.5-e736eb2acc-646698e07b.zip
new file mode 100644
index 00000000000..bbf07201a02
Binary files /dev/null and b/.yarn/cache/@types-node-npm-18.17.5-e736eb2acc-646698e07b.zip differ
diff --git a/.yarn/cache/@types-node-npm-18.18.9-db29fe3223-ebd98b117c.zip b/.yarn/cache/@types-node-npm-18.18.9-db29fe3223-ebd98b117c.zip
deleted file mode 100644
index fdaedebc279..00000000000
Binary files a/.yarn/cache/@types-node-npm-18.18.9-db29fe3223-ebd98b117c.zip and /dev/null differ
diff --git a/.yarn/cache/@types-node-npm-20.5.0-ea170d5dd7-0d3f4b66f6.zip b/.yarn/cache/@types-node-npm-20.5.0-ea170d5dd7-0d3f4b66f6.zip
new file mode 100644
index 00000000000..b9df7a86ef3
Binary files /dev/null and b/.yarn/cache/@types-node-npm-20.5.0-ea170d5dd7-0d3f4b66f6.zip differ
diff --git a/.yarn/cache/@types-node-npm-20.9.0-d5b5fa6634-a934f7645e.zip b/.yarn/cache/@types-node-npm-20.9.0-d5b5fa6634-a934f7645e.zip
deleted file mode 100644
index e10d2feed7f..00000000000
Binary files a/.yarn/cache/@types-node-npm-20.9.0-d5b5fa6634-a934f7645e.zip and /dev/null differ
diff --git a/.yarn/cache/@types-normalize-package-data-npm-2.4.1-c31c56ae6a-e87bccbf11.zip b/.yarn/cache/@types-normalize-package-data-npm-2.4.1-c31c56ae6a-e87bccbf11.zip
new file mode 100644
index 00000000000..a17de3f091a
Binary files /dev/null and b/.yarn/cache/@types-normalize-package-data-npm-2.4.1-c31c56ae6a-e87bccbf11.zip differ
diff --git a/.yarn/cache/@types-normalize-package-data-npm-2.4.4-676a8ba353-65dff72b54.zip b/.yarn/cache/@types-normalize-package-data-npm-2.4.4-676a8ba353-65dff72b54.zip
deleted file mode 100644
index 58fbb00485b..00000000000
Binary files a/.yarn/cache/@types-normalize-package-data-npm-2.4.4-676a8ba353-65dff72b54.zip and /dev/null differ
diff --git a/.yarn/cache/@types-npmlog-npm-4.1.4-4b0dd7a2bf-740f7431cc.zip b/.yarn/cache/@types-npmlog-npm-4.1.4-4b0dd7a2bf-740f7431cc.zip
new file mode 100644
index 00000000000..dc344189074
Binary files /dev/null and b/.yarn/cache/@types-npmlog-npm-4.1.4-4b0dd7a2bf-740f7431cc.zip differ
diff --git a/.yarn/cache/@types-npmlog-npm-4.1.6-68fc84c31b-0151a01f8c.zip b/.yarn/cache/@types-npmlog-npm-4.1.6-68fc84c31b-0151a01f8c.zip
deleted file mode 100644
index acb0ec1556f..00000000000
Binary files a/.yarn/cache/@types-npmlog-npm-4.1.6-68fc84c31b-0151a01f8c.zip and /dev/null differ
diff --git a/.yarn/cache/@types-parse-json-npm-4.0.0-298522afa6-4df9de9815.zip b/.yarn/cache/@types-parse-json-npm-4.0.0-298522afa6-4df9de9815.zip
new file mode 100644
index 00000000000..66498d8d042
Binary files /dev/null and b/.yarn/cache/@types-parse-json-npm-4.0.0-298522afa6-4df9de9815.zip differ
diff --git a/.yarn/cache/@types-parse-json-npm-4.0.2-f87f65692e-5bf62eec37.zip b/.yarn/cache/@types-parse-json-npm-4.0.2-f87f65692e-5bf62eec37.zip
deleted file mode 100644
index 2b86e9102fe..00000000000
Binary files a/.yarn/cache/@types-parse-json-npm-4.0.2-f87f65692e-5bf62eec37.zip and /dev/null differ
diff --git a/.yarn/cache/@types-pretty-hrtime-npm-1.0.1-4d565fdb90-a6cdee417e.zip b/.yarn/cache/@types-pretty-hrtime-npm-1.0.1-4d565fdb90-a6cdee417e.zip
new file mode 100644
index 00000000000..9f786311c93
Binary files /dev/null and b/.yarn/cache/@types-pretty-hrtime-npm-1.0.1-4d565fdb90-a6cdee417e.zip differ
diff --git a/.yarn/cache/@types-pretty-hrtime-npm-1.0.3-e4a0b4bf05-288061dff9.zip b/.yarn/cache/@types-pretty-hrtime-npm-1.0.3-e4a0b4bf05-288061dff9.zip
deleted file mode 100644
index 5009bd235d0..00000000000
Binary files a/.yarn/cache/@types-pretty-hrtime-npm-1.0.3-e4a0b4bf05-288061dff9.zip and /dev/null differ
diff --git a/.yarn/cache/@types-prop-types-npm-15.7.10-6219d98d46-39ecc2d9e4.zip b/.yarn/cache/@types-prop-types-npm-15.7.10-6219d98d46-39ecc2d9e4.zip
deleted file mode 100644
index 82fb4129128..00000000000
Binary files a/.yarn/cache/@types-prop-types-npm-15.7.10-6219d98d46-39ecc2d9e4.zip and /dev/null differ
diff --git a/.yarn/cache/@types-prop-types-npm-15.7.5-2aa48aa177-5b43b8b154.zip b/.yarn/cache/@types-prop-types-npm-15.7.5-2aa48aa177-5b43b8b154.zip
new file mode 100644
index 00000000000..38bb2b47078
Binary files /dev/null and b/.yarn/cache/@types-prop-types-npm-15.7.5-2aa48aa177-5b43b8b154.zip differ
diff --git a/.yarn/cache/@types-q-npm-1.5.6-21f6d01fa4-84af6989fb.zip b/.yarn/cache/@types-q-npm-1.5.6-21f6d01fa4-84af6989fb.zip
new file mode 100644
index 00000000000..0baa16af9c3
Binary files /dev/null and b/.yarn/cache/@types-q-npm-1.5.6-21f6d01fa4-84af6989fb.zip differ
diff --git a/.yarn/cache/@types-q-npm-1.5.8-a29ca59dc8-eaa21cd2cf.zip b/.yarn/cache/@types-q-npm-1.5.8-a29ca59dc8-eaa21cd2cf.zip
deleted file mode 100644
index b0622614da9..00000000000
Binary files a/.yarn/cache/@types-q-npm-1.5.8-a29ca59dc8-eaa21cd2cf.zip and /dev/null differ
diff --git a/.yarn/cache/@types-qs-npm-6.9.10-ce6b6e69f0-3e479ee056.zip b/.yarn/cache/@types-qs-npm-6.9.10-ce6b6e69f0-3e479ee056.zip
deleted file mode 100644
index d1548050079..00000000000
Binary files a/.yarn/cache/@types-qs-npm-6.9.10-ce6b6e69f0-3e479ee056.zip and /dev/null differ
diff --git a/.yarn/cache/@types-qs-npm-6.9.7-4a3e6ca0d0-7fd6f9c250.zip b/.yarn/cache/@types-qs-npm-6.9.7-4a3e6ca0d0-7fd6f9c250.zip
new file mode 100644
index 00000000000..9137540a999
Binary files /dev/null and b/.yarn/cache/@types-qs-npm-6.9.7-4a3e6ca0d0-7fd6f9c250.zip differ
diff --git a/.yarn/cache/@types-range-parser-npm-1.2.4-23d797fbde-b7c0dfd508.zip b/.yarn/cache/@types-range-parser-npm-1.2.4-23d797fbde-b7c0dfd508.zip
new file mode 100644
index 00000000000..951f3f1062d
Binary files /dev/null and b/.yarn/cache/@types-range-parser-npm-1.2.4-23d797fbde-b7c0dfd508.zip differ
diff --git a/.yarn/cache/@types-range-parser-npm-1.2.7-a83c0b6429-95640233b6.zip b/.yarn/cache/@types-range-parser-npm-1.2.7-a83c0b6429-95640233b6.zip
deleted file mode 100644
index a2c7ae4c00e..00000000000
Binary files a/.yarn/cache/@types-range-parser-npm-1.2.7-a83c0b6429-95640233b6.zip and /dev/null differ
diff --git a/.yarn/cache/@types-react-npm-18.2.20-c3e301ef67-469b0c1fb3.zip b/.yarn/cache/@types-react-npm-18.2.20-c3e301ef67-469b0c1fb3.zip
new file mode 100644
index 00000000000..4a9b469b55a
Binary files /dev/null and b/.yarn/cache/@types-react-npm-18.2.20-c3e301ef67-469b0c1fb3.zip differ
diff --git a/.yarn/cache/@types-react-npm-18.2.37-3fa76216da-fab3a5960e.zip b/.yarn/cache/@types-react-npm-18.2.37-3fa76216da-fab3a5960e.zip
deleted file mode 100644
index 0b910c15af4..00000000000
Binary files a/.yarn/cache/@types-react-npm-18.2.37-3fa76216da-fab3a5960e.zip and /dev/null differ
diff --git a/.yarn/cache/@types-react-redux-npm-7.1.25-03bcc651fd-1c5780ff46.zip b/.yarn/cache/@types-react-redux-npm-7.1.25-03bcc651fd-1c5780ff46.zip
new file mode 100644
index 00000000000..30dfffcbf60
Binary files /dev/null and b/.yarn/cache/@types-react-redux-npm-7.1.25-03bcc651fd-1c5780ff46.zip differ
diff --git a/.yarn/cache/@types-react-redux-npm-7.1.30-867cab12a9-43683f20ad.zip b/.yarn/cache/@types-react-redux-npm-7.1.30-867cab12a9-43683f20ad.zip
deleted file mode 100644
index ae0814c735f..00000000000
Binary files a/.yarn/cache/@types-react-redux-npm-7.1.30-867cab12a9-43683f20ad.zip and /dev/null differ
diff --git a/.yarn/cache/@types-responselike-npm-1.0.0-85dd08af42-e497238945.zip b/.yarn/cache/@types-responselike-npm-1.0.0-85dd08af42-e497238945.zip
new file mode 100644
index 00000000000..26cd4029d3e
Binary files /dev/null and b/.yarn/cache/@types-responselike-npm-1.0.0-85dd08af42-e497238945.zip differ
diff --git a/.yarn/cache/@types-responselike-npm-1.0.3-de0150f03d-6ac4b35723.zip b/.yarn/cache/@types-responselike-npm-1.0.3-de0150f03d-6ac4b35723.zip
deleted file mode 100644
index 1e5c0cb6eab..00000000000
Binary files a/.yarn/cache/@types-responselike-npm-1.0.3-de0150f03d-6ac4b35723.zip and /dev/null differ
diff --git a/.yarn/cache/@types-scheduler-npm-0.16.3-887bfc0086-2b0aec39c2.zip b/.yarn/cache/@types-scheduler-npm-0.16.3-887bfc0086-2b0aec39c2.zip
new file mode 100644
index 00000000000..5f4a303fa5b
Binary files /dev/null and b/.yarn/cache/@types-scheduler-npm-0.16.3-887bfc0086-2b0aec39c2.zip differ
diff --git a/.yarn/cache/@types-scheduler-npm-0.16.6-73b5b0836b-4cec897275.zip b/.yarn/cache/@types-scheduler-npm-0.16.6-73b5b0836b-4cec897275.zip
deleted file mode 100644
index 78d0e7b97a3..00000000000
Binary files a/.yarn/cache/@types-scheduler-npm-0.16.6-73b5b0836b-4cec897275.zip and /dev/null differ
diff --git a/.yarn/cache/@types-semver-npm-7.5.0-4823ff34be-8fbfbf79e9.zip b/.yarn/cache/@types-semver-npm-7.5.0-4823ff34be-8fbfbf79e9.zip
new file mode 100644
index 00000000000..40e1b5e0146
Binary files /dev/null and b/.yarn/cache/@types-semver-npm-7.5.0-4823ff34be-8fbfbf79e9.zip differ
diff --git a/.yarn/cache/@types-semver-npm-7.5.5-a3c0668cf4-1b0be2c4d8.zip b/.yarn/cache/@types-semver-npm-7.5.5-a3c0668cf4-1b0be2c4d8.zip
deleted file mode 100644
index 9f23f459090..00000000000
Binary files a/.yarn/cache/@types-semver-npm-7.5.5-a3c0668cf4-1b0be2c4d8.zip and /dev/null differ
diff --git a/.yarn/cache/@types-send-npm-0.17.1-5f715ca966-6420837887.zip b/.yarn/cache/@types-send-npm-0.17.1-5f715ca966-6420837887.zip
new file mode 100644
index 00000000000..0de34ba37bf
Binary files /dev/null and b/.yarn/cache/@types-send-npm-0.17.1-5f715ca966-6420837887.zip differ
diff --git a/.yarn/cache/@types-send-npm-0.17.4-9d7c55577f-28320a2aa1.zip b/.yarn/cache/@types-send-npm-0.17.4-9d7c55577f-28320a2aa1.zip
deleted file mode 100644
index b3fb472c55a..00000000000
Binary files a/.yarn/cache/@types-send-npm-0.17.4-9d7c55577f-28320a2aa1.zip and /dev/null differ
diff --git a/.yarn/cache/@types-serve-index-npm-1.9.1-9d3cd16a7a-026f3995fb.zip b/.yarn/cache/@types-serve-index-npm-1.9.1-9d3cd16a7a-026f3995fb.zip
new file mode 100644
index 00000000000..b04ca1f6799
Binary files /dev/null and b/.yarn/cache/@types-serve-index-npm-1.9.1-9d3cd16a7a-026f3995fb.zip differ
diff --git a/.yarn/cache/@types-serve-index-npm-1.9.4-957ae0ac38-72727c88d5.zip b/.yarn/cache/@types-serve-index-npm-1.9.4-957ae0ac38-72727c88d5.zip
deleted file mode 100644
index 4663196001a..00000000000
Binary files a/.yarn/cache/@types-serve-index-npm-1.9.4-957ae0ac38-72727c88d5.zip and /dev/null differ
diff --git a/.yarn/cache/@types-serve-static-npm-1.15.2-fc398c0cea-d5f8f5aaa7.zip b/.yarn/cache/@types-serve-static-npm-1.15.2-fc398c0cea-d5f8f5aaa7.zip
new file mode 100644
index 00000000000..e66a964d0d2
Binary files /dev/null and b/.yarn/cache/@types-serve-static-npm-1.15.2-fc398c0cea-d5f8f5aaa7.zip differ
diff --git a/.yarn/cache/@types-serve-static-npm-1.15.5-b911ffc092-49aa21c367.zip b/.yarn/cache/@types-serve-static-npm-1.15.5-b911ffc092-49aa21c367.zip
deleted file mode 100644
index e3a86ebc821..00000000000
Binary files a/.yarn/cache/@types-serve-static-npm-1.15.5-b911ffc092-49aa21c367.zip and /dev/null differ
diff --git a/.yarn/cache/@types-sizzle-npm-2.3.3-9403924950-586a9fb1f6.zip b/.yarn/cache/@types-sizzle-npm-2.3.3-9403924950-586a9fb1f6.zip
new file mode 100644
index 00000000000..52a4f8df233
Binary files /dev/null and b/.yarn/cache/@types-sizzle-npm-2.3.3-9403924950-586a9fb1f6.zip differ
diff --git a/.yarn/cache/@types-sizzle-npm-2.3.6-50ee423780-1573d6c86f.zip b/.yarn/cache/@types-sizzle-npm-2.3.6-50ee423780-1573d6c86f.zip
deleted file mode 100644
index 69086e1233a..00000000000
Binary files a/.yarn/cache/@types-sizzle-npm-2.3.6-50ee423780-1573d6c86f.zip and /dev/null differ
diff --git a/.yarn/cache/@types-sockjs-npm-0.3.33-07d624a8b3-b9bbb2b5c5.zip b/.yarn/cache/@types-sockjs-npm-0.3.33-07d624a8b3-b9bbb2b5c5.zip
new file mode 100644
index 00000000000..b84a51fe427
Binary files /dev/null and b/.yarn/cache/@types-sockjs-npm-0.3.33-07d624a8b3-b9bbb2b5c5.zip differ
diff --git a/.yarn/cache/@types-sockjs-npm-0.3.36-e07c2960d5-b4b5381122.zip b/.yarn/cache/@types-sockjs-npm-0.3.36-e07c2960d5-b4b5381122.zip
deleted file mode 100644
index 81acb66a5e1..00000000000
Binary files a/.yarn/cache/@types-sockjs-npm-0.3.36-e07c2960d5-b4b5381122.zip and /dev/null differ
diff --git a/.yarn/cache/@types-source-list-map-npm-0.1.2-1983e10da7-79c5bcbe2d.zip b/.yarn/cache/@types-source-list-map-npm-0.1.2-1983e10da7-79c5bcbe2d.zip
new file mode 100644
index 00000000000..bd1aaa16eb6
Binary files /dev/null and b/.yarn/cache/@types-source-list-map-npm-0.1.2-1983e10da7-79c5bcbe2d.zip differ
diff --git a/.yarn/cache/@types-source-list-map-npm-0.1.5-2ed30913fb-cad2cc55ab.zip b/.yarn/cache/@types-source-list-map-npm-0.1.5-2ed30913fb-cad2cc55ab.zip
deleted file mode 100644
index 167c940114f..00000000000
Binary files a/.yarn/cache/@types-source-list-map-npm-0.1.5-2ed30913fb-cad2cc55ab.zip and /dev/null differ
diff --git a/.yarn/cache/@types-stack-utils-npm-2.0.1-867718ab70-205fdbe332.zip b/.yarn/cache/@types-stack-utils-npm-2.0.1-867718ab70-205fdbe332.zip
new file mode 100644
index 00000000000..b381b831fc8
Binary files /dev/null and b/.yarn/cache/@types-stack-utils-npm-2.0.1-867718ab70-205fdbe332.zip differ
diff --git a/.yarn/cache/@types-stack-utils-npm-2.0.3-48a0a03262-72576cc152.zip b/.yarn/cache/@types-stack-utils-npm-2.0.3-48a0a03262-72576cc152.zip
deleted file mode 100644
index 875101af5e6..00000000000
Binary files a/.yarn/cache/@types-stack-utils-npm-2.0.3-48a0a03262-72576cc152.zip and /dev/null differ
diff --git a/.yarn/cache/@types-tapable-npm-1.0.11-9fbd557ca2-e09d55d25b.zip b/.yarn/cache/@types-tapable-npm-1.0.11-9fbd557ca2-e09d55d25b.zip
deleted file mode 100644
index 82e7f5d5563..00000000000
Binary files a/.yarn/cache/@types-tapable-npm-1.0.11-9fbd557ca2-e09d55d25b.zip and /dev/null differ
diff --git a/.yarn/cache/@types-tapable-npm-1.0.8-4986892b9f-9a7abe6667.zip b/.yarn/cache/@types-tapable-npm-1.0.8-4986892b9f-9a7abe6667.zip
new file mode 100644
index 00000000000..98daaa68cd5
Binary files /dev/null and b/.yarn/cache/@types-tapable-npm-1.0.8-4986892b9f-9a7abe6667.zip differ
diff --git a/.yarn/cache/@types-trusted-types-npm-2.0.3-225cf76fb4-4794804bc4.zip b/.yarn/cache/@types-trusted-types-npm-2.0.3-225cf76fb4-4794804bc4.zip
new file mode 100644
index 00000000000..e5373d30c88
Binary files /dev/null and b/.yarn/cache/@types-trusted-types-npm-2.0.3-225cf76fb4-4794804bc4.zip differ
diff --git a/.yarn/cache/@types-trusted-types-npm-2.0.6-c4c3cd363b-04250c7175.zip b/.yarn/cache/@types-trusted-types-npm-2.0.6-c4c3cd363b-04250c7175.zip
deleted file mode 100644
index a391a82fa5c..00000000000
Binary files a/.yarn/cache/@types-trusted-types-npm-2.0.6-c4c3cd363b-04250c7175.zip and /dev/null differ
diff --git a/.yarn/cache/@types-uglify-js-npm-3.17.1-92f3864139-4ec4c0161e.zip b/.yarn/cache/@types-uglify-js-npm-3.17.1-92f3864139-4ec4c0161e.zip
new file mode 100644
index 00000000000..a268285367e
Binary files /dev/null and b/.yarn/cache/@types-uglify-js-npm-3.17.1-92f3864139-4ec4c0161e.zip differ
diff --git a/.yarn/cache/@types-uglify-js-npm-3.17.4-905c69fca5-4db22236be.zip b/.yarn/cache/@types-uglify-js-npm-3.17.4-905c69fca5-4db22236be.zip
deleted file mode 100644
index add15319d9a..00000000000
Binary files a/.yarn/cache/@types-uglify-js-npm-3.17.4-905c69fca5-4db22236be.zip and /dev/null differ
diff --git a/.yarn/cache/@types-unist-npm-2.0.10-f9b9ac478e-e2924e18de.zip b/.yarn/cache/@types-unist-npm-2.0.10-f9b9ac478e-e2924e18de.zip
deleted file mode 100644
index 3746c358130..00000000000
Binary files a/.yarn/cache/@types-unist-npm-2.0.10-f9b9ac478e-e2924e18de.zip and /dev/null differ
diff --git a/.yarn/cache/@types-unist-npm-2.0.7-5097b97603-b97a219554.zip b/.yarn/cache/@types-unist-npm-2.0.7-5097b97603-b97a219554.zip
new file mode 100644
index 00000000000..fe7f857edd7
Binary files /dev/null and b/.yarn/cache/@types-unist-npm-2.0.7-5097b97603-b97a219554.zip differ
diff --git a/.yarn/cache/@types-webpack-env-npm-1.18.1-73a2ecf677-10a00618f7.zip b/.yarn/cache/@types-webpack-env-npm-1.18.1-73a2ecf677-10a00618f7.zip
new file mode 100644
index 00000000000..26097bd099d
Binary files /dev/null and b/.yarn/cache/@types-webpack-env-npm-1.18.1-73a2ecf677-10a00618f7.zip differ
diff --git a/.yarn/cache/@types-webpack-env-npm-1.18.4-ade20f36db-a1c37f8eb9.zip b/.yarn/cache/@types-webpack-env-npm-1.18.4-ade20f36db-a1c37f8eb9.zip
deleted file mode 100644
index 4bcceb8b506..00000000000
Binary files a/.yarn/cache/@types-webpack-env-npm-1.18.4-ade20f36db-a1c37f8eb9.zip and /dev/null differ
diff --git a/.yarn/cache/@types-webpack-npm-4.41.33-c3bc165381-4599e27b9a.zip b/.yarn/cache/@types-webpack-npm-4.41.33-c3bc165381-4599e27b9a.zip
new file mode 100644
index 00000000000..2ec9d07f9a5
Binary files /dev/null and b/.yarn/cache/@types-webpack-npm-4.41.33-c3bc165381-4599e27b9a.zip differ
diff --git a/.yarn/cache/@types-webpack-npm-4.41.36-4a2ad23ff9-d143f2760b.zip b/.yarn/cache/@types-webpack-npm-4.41.36-4a2ad23ff9-d143f2760b.zip
deleted file mode 100644
index ebf6b55c121..00000000000
Binary files a/.yarn/cache/@types-webpack-npm-4.41.36-4a2ad23ff9-d143f2760b.zip and /dev/null differ
diff --git a/.yarn/cache/@types-webpack-sources-npm-3.2.0-a9776bdb8b-fa23dcfb99.zip b/.yarn/cache/@types-webpack-sources-npm-3.2.0-a9776bdb8b-fa23dcfb99.zip
new file mode 100644
index 00000000000..d013875ccce
Binary files /dev/null and b/.yarn/cache/@types-webpack-sources-npm-3.2.0-a9776bdb8b-fa23dcfb99.zip differ
diff --git a/.yarn/cache/@types-webpack-sources-npm-3.2.3-dce1c60a50-7b557f242e.zip b/.yarn/cache/@types-webpack-sources-npm-3.2.3-dce1c60a50-7b557f242e.zip
deleted file mode 100644
index d060910d2f4..00000000000
Binary files a/.yarn/cache/@types-webpack-sources-npm-3.2.3-dce1c60a50-7b557f242e.zip and /dev/null differ
diff --git a/.yarn/cache/@types-ws-npm-8.5.5-5f5e3bde2d-b2d7da5bd4.zip b/.yarn/cache/@types-ws-npm-8.5.5-5f5e3bde2d-b2d7da5bd4.zip
new file mode 100644
index 00000000000..d6342b50f69
Binary files /dev/null and b/.yarn/cache/@types-ws-npm-8.5.5-5f5e3bde2d-b2d7da5bd4.zip differ
diff --git a/.yarn/cache/@types-ws-npm-8.5.9-91d1b2ab07-7cf66383b8.zip b/.yarn/cache/@types-ws-npm-8.5.9-91d1b2ab07-7cf66383b8.zip
deleted file mode 100644
index 39d7bd2296a..00000000000
Binary files a/.yarn/cache/@types-ws-npm-8.5.9-91d1b2ab07-7cf66383b8.zip and /dev/null differ
diff --git a/.yarn/cache/@types-yargs-npm-15.0.15-b73a9d1c59-cb5a4bc8b8.zip b/.yarn/cache/@types-yargs-npm-15.0.15-b73a9d1c59-cb5a4bc8b8.zip
new file mode 100644
index 00000000000..703070fad97
Binary files /dev/null and b/.yarn/cache/@types-yargs-npm-15.0.15-b73a9d1c59-cb5a4bc8b8.zip differ
diff --git a/.yarn/cache/@types-yargs-npm-15.0.18-a5f9e024fb-b2c530b2e9.zip b/.yarn/cache/@types-yargs-npm-15.0.18-a5f9e024fb-b2c530b2e9.zip
deleted file mode 100644
index 479cbbfcadd..00000000000
Binary files a/.yarn/cache/@types-yargs-npm-15.0.18-a5f9e024fb-b2c530b2e9.zip and /dev/null differ
diff --git a/.yarn/cache/@types-yargs-npm-16.0.5-cf8e69c774-9673a69487.zip b/.yarn/cache/@types-yargs-npm-16.0.5-cf8e69c774-9673a69487.zip
new file mode 100644
index 00000000000..7a7bd315485
Binary files /dev/null and b/.yarn/cache/@types-yargs-npm-16.0.5-cf8e69c774-9673a69487.zip differ
diff --git a/.yarn/cache/@types-yargs-npm-16.0.8-68776f43f8-8dce5176c5.zip b/.yarn/cache/@types-yargs-npm-16.0.8-68776f43f8-8dce5176c5.zip
deleted file mode 100644
index cd2a9603454..00000000000
Binary files a/.yarn/cache/@types-yargs-npm-16.0.8-68776f43f8-8dce5176c5.zip and /dev/null differ
diff --git a/.yarn/cache/@types-yargs-npm-17.0.24-b034cf1d8b-03d9a985cb.zip b/.yarn/cache/@types-yargs-npm-17.0.24-b034cf1d8b-03d9a985cb.zip
new file mode 100644
index 00000000000..b3d189ef652
Binary files /dev/null and b/.yarn/cache/@types-yargs-npm-17.0.24-b034cf1d8b-03d9a985cb.zip differ
diff --git a/.yarn/cache/@types-yargs-npm-17.0.31-a49be04fad-9b180fc289.zip b/.yarn/cache/@types-yargs-npm-17.0.31-a49be04fad-9b180fc289.zip
deleted file mode 100644
index 41e07c6f51c..00000000000
Binary files a/.yarn/cache/@types-yargs-npm-17.0.31-a49be04fad-9b180fc289.zip and /dev/null differ
diff --git a/.yarn/cache/@types-yargs-parser-npm-21.0.0-c8a3b32c52-c4caec730c.zip b/.yarn/cache/@types-yargs-parser-npm-21.0.0-c8a3b32c52-c4caec730c.zip
new file mode 100644
index 00000000000..eeacbdd4ca0
Binary files /dev/null and b/.yarn/cache/@types-yargs-parser-npm-21.0.0-c8a3b32c52-c4caec730c.zip differ
diff --git a/.yarn/cache/@types-yargs-parser-npm-21.0.3-1d265246a1-a794eb750e.zip b/.yarn/cache/@types-yargs-parser-npm-21.0.3-1d265246a1-a794eb750e.zip
deleted file mode 100644
index 4aae8db13d3..00000000000
Binary files a/.yarn/cache/@types-yargs-parser-npm-21.0.3-1d265246a1-a794eb750e.zip and /dev/null differ
diff --git a/.yarn/cache/@types-yauzl-npm-2.10.0-7b242343cb-55d27ae5d3.zip b/.yarn/cache/@types-yauzl-npm-2.10.0-7b242343cb-55d27ae5d3.zip
new file mode 100644
index 00000000000..0d3bbb8f9fb
Binary files /dev/null and b/.yarn/cache/@types-yauzl-npm-2.10.0-7b242343cb-55d27ae5d3.zip differ
diff --git a/.yarn/cache/@types-yauzl-npm-2.10.3-4b633e1ddc-5ee966ea7b.zip b/.yarn/cache/@types-yauzl-npm-2.10.3-4b633e1ddc-5ee966ea7b.zip
deleted file mode 100644
index 1530a2be8f4..00000000000
Binary files a/.yarn/cache/@types-yauzl-npm-2.10.3-4b633e1ddc-5ee966ea7b.zip and /dev/null differ
diff --git a/.yarn/cache/acorn-jsx-walk-npm-2.0.0-5bfe4a55fd-f0893ca161.zip b/.yarn/cache/acorn-jsx-walk-npm-2.0.0-5bfe4a55fd-f0893ca161.zip
deleted file mode 100644
index b12e11dd4fe..00000000000
Binary files a/.yarn/cache/acorn-jsx-walk-npm-2.0.0-5bfe4a55fd-f0893ca161.zip and /dev/null differ
diff --git a/.yarn/cache/acorn-npm-8.10.0-2230c9e83e-522310c20f.zip b/.yarn/cache/acorn-npm-8.10.0-2230c9e83e-522310c20f.zip
new file mode 100644
index 00000000000..21b6a12cb6c
Binary files /dev/null and b/.yarn/cache/acorn-npm-8.10.0-2230c9e83e-522310c20f.zip differ
diff --git a/.yarn/cache/acorn-npm-8.11.2-a470f49bb6-ff559b8913.zip b/.yarn/cache/acorn-npm-8.11.2-a470f49bb6-ff559b8913.zip
deleted file mode 100644
index b27c91cfbfe..00000000000
Binary files a/.yarn/cache/acorn-npm-8.11.2-a470f49bb6-ff559b8913.zip and /dev/null differ
diff --git a/.yarn/cache/acorn-walk-npm-8.2.0-2f2cac3177-e69f7234f2.zip b/.yarn/cache/acorn-walk-npm-8.2.0-2f2cac3177-e69f7234f2.zip
new file mode 100644
index 00000000000..42df521470b
Binary files /dev/null and b/.yarn/cache/acorn-walk-npm-8.2.0-2f2cac3177-e69f7234f2.zip differ
diff --git a/.yarn/cache/acorn-walk-npm-8.3.0-26b9159445-7673f342db.zip b/.yarn/cache/acorn-walk-npm-8.3.0-26b9159445-7673f342db.zip
deleted file mode 100644
index efba964c03d..00000000000
Binary files a/.yarn/cache/acorn-walk-npm-8.3.0-26b9159445-7673f342db.zip and /dev/null differ
diff --git a/.yarn/cache/agentkeepalive-npm-4.3.0-ac3d8e6807-f791317eb4.zip b/.yarn/cache/agentkeepalive-npm-4.3.0-ac3d8e6807-f791317eb4.zip
new file mode 100644
index 00000000000..707a3ffb11d
Binary files /dev/null and b/.yarn/cache/agentkeepalive-npm-4.3.0-ac3d8e6807-f791317eb4.zip differ
diff --git a/.yarn/cache/agentkeepalive-npm-4.5.0-f237b580b2-dd210ba2a2.zip b/.yarn/cache/agentkeepalive-npm-4.5.0-f237b580b2-dd210ba2a2.zip
deleted file mode 100644
index 184528a6ad5..00000000000
Binary files a/.yarn/cache/agentkeepalive-npm-4.5.0-f237b580b2-dd210ba2a2.zip and /dev/null differ
diff --git a/.yarn/cache/airbnb-prop-types-npm-2.16.0-d794f5271c-8f87960bad.zip b/.yarn/cache/airbnb-prop-types-npm-2.16.0-d794f5271c-8f87960bad.zip
deleted file mode 100644
index 6a8ca6d9699..00000000000
Binary files a/.yarn/cache/airbnb-prop-types-npm-2.16.0-d794f5271c-8f87960bad.zip and /dev/null differ
diff --git a/.yarn/cache/archiver-utils-npm-3.0.4-71b8c9e097-a838c325a1.zip b/.yarn/cache/archiver-utils-npm-3.0.4-71b8c9e097-a838c325a1.zip
deleted file mode 100644
index d44366ef40a..00000000000
Binary files a/.yarn/cache/archiver-utils-npm-3.0.4-71b8c9e097-a838c325a1.zip and /dev/null differ
diff --git a/.yarn/cache/array.prototype.filter-npm-1.0.2-1cec41d059-d30e79b72b.zip b/.yarn/cache/array.prototype.filter-npm-1.0.2-1cec41d059-d30e79b72b.zip
new file mode 100644
index 00000000000..90c7df50ad0
Binary files /dev/null and b/.yarn/cache/array.prototype.filter-npm-1.0.2-1cec41d059-d30e79b72b.zip differ
diff --git a/.yarn/cache/array.prototype.filter-npm-1.0.3-3a4a8d92df-3da2189afb.zip b/.yarn/cache/array.prototype.filter-npm-1.0.3-3a4a8d92df-3da2189afb.zip
deleted file mode 100644
index f15d4e66d44..00000000000
Binary files a/.yarn/cache/array.prototype.filter-npm-1.0.3-3a4a8d92df-3da2189afb.zip and /dev/null differ
diff --git a/.yarn/cache/array.prototype.find-npm-2.2.2-ee9aa52e33-d6b88bdbbc.zip b/.yarn/cache/array.prototype.find-npm-2.2.2-ee9aa52e33-d6b88bdbbc.zip
deleted file mode 100644
index d0d806bc9d6..00000000000
Binary files a/.yarn/cache/array.prototype.find-npm-2.2.2-ee9aa52e33-d6b88bdbbc.zip and /dev/null differ
diff --git a/.yarn/cache/array.prototype.findlastindex-npm-1.2.2-dc5ee7bf67-a97b6dad48.zip b/.yarn/cache/array.prototype.findlastindex-npm-1.2.2-dc5ee7bf67-a97b6dad48.zip
new file mode 100644
index 00000000000..7a6906db1aa
Binary files /dev/null and b/.yarn/cache/array.prototype.findlastindex-npm-1.2.2-dc5ee7bf67-a97b6dad48.zip differ
diff --git a/.yarn/cache/array.prototype.findlastindex-npm-1.2.3-2a36f4417b-063cbab8ee.zip b/.yarn/cache/array.prototype.findlastindex-npm-1.2.3-2a36f4417b-063cbab8ee.zip
deleted file mode 100644
index 9e3b8d7325d..00000000000
Binary files a/.yarn/cache/array.prototype.findlastindex-npm-1.2.3-2a36f4417b-063cbab8ee.zip and /dev/null differ
diff --git a/.yarn/cache/array.prototype.map-npm-1.0.5-cb35a53eb1-1ae079f2a9.zip b/.yarn/cache/array.prototype.map-npm-1.0.5-cb35a53eb1-1ae079f2a9.zip
new file mode 100644
index 00000000000..84c37f4a57a
Binary files /dev/null and b/.yarn/cache/array.prototype.map-npm-1.0.5-cb35a53eb1-1ae079f2a9.zip differ
diff --git a/.yarn/cache/array.prototype.map-npm-1.0.6-ff7da3fbd7-9af3eea249.zip b/.yarn/cache/array.prototype.map-npm-1.0.6-ff7da3fbd7-9af3eea249.zip
deleted file mode 100644
index e188b980113..00000000000
Binary files a/.yarn/cache/array.prototype.map-npm-1.0.6-ff7da3fbd7-9af3eea249.zip and /dev/null differ
diff --git a/.yarn/cache/array.prototype.tosorted-npm-1.1.1-1be94ad4a7-23e86074d0.zip b/.yarn/cache/array.prototype.tosorted-npm-1.1.1-1be94ad4a7-23e86074d0.zip
new file mode 100644
index 00000000000..3f7dadcde3f
Binary files /dev/null and b/.yarn/cache/array.prototype.tosorted-npm-1.1.1-1be94ad4a7-23e86074d0.zip differ
diff --git a/.yarn/cache/array.prototype.tosorted-npm-1.1.2-9002e62ed8-aadb7725bb.zip b/.yarn/cache/array.prototype.tosorted-npm-1.1.2-9002e62ed8-aadb7725bb.zip
deleted file mode 100644
index 9a0540498db..00000000000
Binary files a/.yarn/cache/array.prototype.tosorted-npm-1.1.2-9002e62ed8-aadb7725bb.zip and /dev/null differ
diff --git a/.yarn/cache/arraybuffer.prototype.slice-npm-1.0.1-d44cb5acc0-e3e9b2a3e9.zip b/.yarn/cache/arraybuffer.prototype.slice-npm-1.0.1-d44cb5acc0-e3e9b2a3e9.zip
new file mode 100644
index 00000000000..aa44dd71388
Binary files /dev/null and b/.yarn/cache/arraybuffer.prototype.slice-npm-1.0.1-d44cb5acc0-e3e9b2a3e9.zip differ
diff --git a/.yarn/cache/assert-npm-1.5.0-3303b97e04-6266761663.zip b/.yarn/cache/assert-npm-1.5.0-3303b97e04-6266761663.zip
new file mode 100644
index 00000000000..34dc631086a
Binary files /dev/null and b/.yarn/cache/assert-npm-1.5.0-3303b97e04-6266761663.zip differ
diff --git a/.yarn/cache/assert-npm-1.5.1-aadf75df16-207d0eceb6.zip b/.yarn/cache/assert-npm-1.5.1-aadf75df16-207d0eceb6.zip
deleted file mode 100644
index 7b4f6c5024e..00000000000
Binary files a/.yarn/cache/assert-npm-1.5.1-aadf75df16-207d0eceb6.zip and /dev/null differ
diff --git a/.yarn/cache/ast-types-flow-npm-0.0.7-7d32a3abf5-663b90e99b.zip b/.yarn/cache/ast-types-flow-npm-0.0.7-7d32a3abf5-663b90e99b.zip
new file mode 100644
index 00000000000..577160b1eac
Binary files /dev/null and b/.yarn/cache/ast-types-flow-npm-0.0.7-7d32a3abf5-663b90e99b.zip differ
diff --git a/.yarn/cache/ast-types-flow-npm-0.0.8-d5c457c18e-85a1c24af4.zip b/.yarn/cache/ast-types-flow-npm-0.0.8-d5c457c18e-85a1c24af4.zip
deleted file mode 100644
index 706300b1b6d..00000000000
Binary files a/.yarn/cache/ast-types-flow-npm-0.0.8-d5c457c18e-85a1c24af4.zip and /dev/null differ
diff --git a/.yarn/cache/async-foreach-npm-0.1.3-1122283fef-8023859043.zip b/.yarn/cache/async-foreach-npm-0.1.3-1122283fef-8023859043.zip
deleted file mode 100644
index b7ed0596fad..00000000000
Binary files a/.yarn/cache/async-foreach-npm-0.1.3-1122283fef-8023859043.zip and /dev/null differ
diff --git a/.yarn/cache/async-npm-3.2.4-aba13508f9-bebb5dc225.zip b/.yarn/cache/async-npm-3.2.4-aba13508f9-bebb5dc225.zip
new file mode 100644
index 00000000000..0ddad0e7346
Binary files /dev/null and b/.yarn/cache/async-npm-3.2.4-aba13508f9-bebb5dc225.zip differ
diff --git a/.yarn/cache/async-npm-3.2.5-f5dbdabdfc-323c3615c3.zip b/.yarn/cache/async-npm-3.2.5-f5dbdabdfc-323c3615c3.zip
deleted file mode 100644
index ed14198e170..00000000000
Binary files a/.yarn/cache/async-npm-3.2.5-f5dbdabdfc-323c3615c3.zip and /dev/null differ
diff --git a/.yarn/cache/asynciterator.prototype-npm-1.0.0-72b8ba3fa4-e8ebfd9493.zip b/.yarn/cache/asynciterator.prototype-npm-1.0.0-72b8ba3fa4-e8ebfd9493.zip
deleted file mode 100644
index f74403bf881..00000000000
Binary files a/.yarn/cache/asynciterator.prototype-npm-1.0.0-72b8ba3fa4-e8ebfd9493.zip and /dev/null differ
diff --git a/.yarn/cache/autosuggest-highlight-npm-3.3.4-4c3066be68-4808b84f63.zip b/.yarn/cache/autosuggest-highlight-npm-3.3.4-4c3066be68-4808b84f63.zip
deleted file mode 100644
index 4383b7d00e3..00000000000
Binary files a/.yarn/cache/autosuggest-highlight-npm-3.3.4-4c3066be68-4808b84f63.zip and /dev/null differ
diff --git a/.yarn/cache/axe-core-npm-4.7.0-a095cfe0ae-615c0f7722.zip b/.yarn/cache/axe-core-npm-4.7.0-a095cfe0ae-615c0f7722.zip
deleted file mode 100644
index 9935ce0cf15..00000000000
Binary files a/.yarn/cache/axe-core-npm-4.7.0-a095cfe0ae-615c0f7722.zip and /dev/null differ
diff --git a/.yarn/cache/axe-core-npm-4.7.2-678c3cf6c4-1b94fcbe20.zip b/.yarn/cache/axe-core-npm-4.7.2-678c3cf6c4-1b94fcbe20.zip
new file mode 100644
index 00000000000..8b12502a735
Binary files /dev/null and b/.yarn/cache/axe-core-npm-4.7.2-678c3cf6c4-1b94fcbe20.zip differ
diff --git a/.yarn/cache/axe-core-npm-4.8.2-d69866ceee-3e8dbf264a.zip b/.yarn/cache/axe-core-npm-4.8.2-d69866ceee-3e8dbf264a.zip
deleted file mode 100644
index e63c8d84d78..00000000000
Binary files a/.yarn/cache/axe-core-npm-4.8.2-d69866ceee-3e8dbf264a.zip and /dev/null differ
diff --git a/.yarn/cache/axios-npm-0.27.2-dbe3a48aea-2efaf18dd0.zip b/.yarn/cache/axios-npm-0.27.2-dbe3a48aea-2efaf18dd0.zip
new file mode 100644
index 00000000000..6d7a2847f89
Binary files /dev/null and b/.yarn/cache/axios-npm-0.27.2-dbe3a48aea-2efaf18dd0.zip differ
diff --git a/.yarn/cache/babel-plugin-inline-react-svg-npm-1.1.2-21a1c927d2-d443d30b4f.zip b/.yarn/cache/babel-plugin-inline-react-svg-npm-1.1.2-21a1c927d2-d443d30b4f.zip
deleted file mode 100644
index a76d7e155fb..00000000000
Binary files a/.yarn/cache/babel-plugin-inline-react-svg-npm-1.1.2-21a1c927d2-d443d30b4f.zip and /dev/null differ
diff --git a/.yarn/cache/babel-plugin-named-exports-order-npm-0.0.2-4bf2bfe8f6-8e7bb1e810.zip b/.yarn/cache/babel-plugin-named-exports-order-npm-0.0.2-4bf2bfe8f6-8e7bb1e810.zip
deleted file mode 100644
index e81958a55f4..00000000000
Binary files a/.yarn/cache/babel-plugin-named-exports-order-npm-0.0.2-4bf2bfe8f6-8e7bb1e810.zip and /dev/null differ
diff --git a/.yarn/cache/babel-plugin-transform-define-npm-2.1.4-f6ab0ee91a-7d5568e9d8.zip b/.yarn/cache/babel-plugin-transform-define-npm-2.1.4-f6ab0ee91a-7d5568e9d8.zip
deleted file mode 100644
index 89a8053d7d8..00000000000
Binary files a/.yarn/cache/babel-plugin-transform-define-npm-2.1.4-f6ab0ee91a-7d5568e9d8.zip and /dev/null differ
diff --git a/.yarn/cache/babel-plugin-transform-inline-environment-variables-npm-0.4.4-a37fa0bb73-fa36128741.zip b/.yarn/cache/babel-plugin-transform-inline-environment-variables-npm-0.4.4-a37fa0bb73-fa36128741.zip
deleted file mode 100644
index d01283bfbb6..00000000000
Binary files a/.yarn/cache/babel-plugin-transform-inline-environment-variables-npm-0.4.4-a37fa0bb73-fa36128741.zip and /dev/null differ
diff --git a/.yarn/cache/bin-links-npm-4.0.2-592819adbc-0ba0dfd8b7.zip b/.yarn/cache/bin-links-npm-4.0.2-592819adbc-0ba0dfd8b7.zip
new file mode 100644
index 00000000000..3cb585e4d55
Binary files /dev/null and b/.yarn/cache/bin-links-npm-4.0.2-592819adbc-0ba0dfd8b7.zip differ
diff --git a/.yarn/cache/bin-links-npm-4.0.3-d86e970bb0-8b4eec67e5.zip b/.yarn/cache/bin-links-npm-4.0.3-d86e970bb0-8b4eec67e5.zip
deleted file mode 100644
index 1adcf04c9f3..00000000000
Binary files a/.yarn/cache/bin-links-npm-4.0.3-d86e970bb0-8b4eec67e5.zip and /dev/null differ
diff --git a/.yarn/cache/browser-assert-npm-1.2.1-f4eb571cbe-8b2407cd04.zip b/.yarn/cache/browser-assert-npm-1.2.1-f4eb571cbe-8b2407cd04.zip
deleted file mode 100644
index d25f608b0ea..00000000000
Binary files a/.yarn/cache/browser-assert-npm-1.2.1-f4eb571cbe-8b2407cd04.zip and /dev/null differ
diff --git a/.yarn/cache/browserify-sign-npm-4.2.1-9a8530ca87-bf3f917758.zip b/.yarn/cache/browserify-sign-npm-4.2.1-9a8530ca87-bf3f917758.zip
new file mode 100644
index 00000000000..d2a8d9a02be
Binary files /dev/null and b/.yarn/cache/browserify-sign-npm-4.2.1-9a8530ca87-bf3f917758.zip differ
diff --git a/.yarn/cache/browserify-sign-npm-4.2.2-92f50c6d35-b622730c0f.zip b/.yarn/cache/browserify-sign-npm-4.2.2-92f50c6d35-b622730c0f.zip
deleted file mode 100644
index 5d27aa66dd8..00000000000
Binary files a/.yarn/cache/browserify-sign-npm-4.2.2-92f50c6d35-b622730c0f.zip and /dev/null differ
diff --git a/.yarn/cache/browserstack-cypress-cli-npm-1.25.0-4d7da9ef3f-a251cbb7c0.zip b/.yarn/cache/browserstack-cypress-cli-npm-1.25.0-4d7da9ef3f-a251cbb7c0.zip
new file mode 100644
index 00000000000..eb5caf42136
Binary files /dev/null and b/.yarn/cache/browserstack-cypress-cli-npm-1.25.0-4d7da9ef3f-a251cbb7c0.zip differ
diff --git a/.yarn/cache/browserstack-cypress-cli-npm-1.26.1-00f823a81a-f55bad41f7.zip b/.yarn/cache/browserstack-cypress-cli-npm-1.26.1-00f823a81a-f55bad41f7.zip
deleted file mode 100644
index 22815b121be..00000000000
Binary files a/.yarn/cache/browserstack-cypress-cli-npm-1.26.1-00f823a81a-f55bad41f7.zip and /dev/null differ
diff --git a/.yarn/cache/browserstack-local-npm-1.5.1-10de94e7ec-45dc70c051.zip b/.yarn/cache/browserstack-local-npm-1.5.1-10de94e7ec-45dc70c051.zip
new file mode 100644
index 00000000000..b069c9808c7
Binary files /dev/null and b/.yarn/cache/browserstack-local-npm-1.5.1-10de94e7ec-45dc70c051.zip differ
diff --git a/.yarn/cache/browserstack-local-npm-1.5.4-46b8bd0e1e-d85a760492.zip b/.yarn/cache/browserstack-local-npm-1.5.4-46b8bd0e1e-d85a760492.zip
deleted file mode 100644
index 071edf09ed9..00000000000
Binary files a/.yarn/cache/browserstack-local-npm-1.5.4-46b8bd0e1e-d85a760492.zip and /dev/null differ
diff --git a/.yarn/cache/cacache-npm-17.1.3-f75f768a29-216fb41c73.zip b/.yarn/cache/cacache-npm-17.1.3-f75f768a29-216fb41c73.zip
new file mode 100644
index 00000000000..c918fd16ce0
Binary files /dev/null and b/.yarn/cache/cacache-npm-17.1.3-f75f768a29-216fb41c73.zip differ
diff --git a/.yarn/cache/cacache-npm-17.1.4-51ef53d0a8-6e26c788bc.zip b/.yarn/cache/cacache-npm-17.1.4-51ef53d0a8-6e26c788bc.zip
deleted file mode 100644
index c8bacda12db..00000000000
Binary files a/.yarn/cache/cacache-npm-17.1.4-51ef53d0a8-6e26c788bc.zip and /dev/null differ
diff --git a/.yarn/cache/caniuse-lite-npm-1.0.30001561-b213ca8bce-94cfc8454c.zip b/.yarn/cache/caniuse-lite-npm-1.0.30001561-b213ca8bce-94cfc8454c.zip
new file mode 100644
index 00000000000..878e77ad7ca
Binary files /dev/null and b/.yarn/cache/caniuse-lite-npm-1.0.30001561-b213ca8bce-94cfc8454c.zip differ
diff --git a/.yarn/cache/carbon-components-react-npm-7.59.17-593f3b786c-10b27bf63b.zip b/.yarn/cache/carbon-components-react-npm-7.59.17-593f3b786c-10b27bf63b.zip
deleted file mode 100644
index d43e11b639b..00000000000
Binary files a/.yarn/cache/carbon-components-react-npm-7.59.17-593f3b786c-10b27bf63b.zip and /dev/null differ
diff --git a/.yarn/cache/ci-info-npm-3.8.0-d56a0b67d6-b00e9313c1.zip b/.yarn/cache/ci-info-npm-3.8.0-d56a0b67d6-b00e9313c1.zip
new file mode 100644
index 00000000000..ada6d0c308f
Binary files /dev/null and b/.yarn/cache/ci-info-npm-3.8.0-d56a0b67d6-b00e9313c1.zip differ
diff --git a/.yarn/cache/ci-info-npm-3.9.0-646784ca0e-75bc67902b.zip b/.yarn/cache/ci-info-npm-3.9.0-646784ca0e-75bc67902b.zip
deleted file mode 100644
index 552fe1b3051..00000000000
Binary files a/.yarn/cache/ci-info-npm-3.9.0-646784ca0e-75bc67902b.zip and /dev/null differ
diff --git a/.yarn/cache/clap-npm-1.2.3-70e9f893a1-6d9a94a6a2.zip b/.yarn/cache/clap-npm-1.2.3-70e9f893a1-6d9a94a6a2.zip
deleted file mode 100644
index 8a0a2dcdaa9..00000000000
Binary files a/.yarn/cache/clap-npm-1.2.3-70e9f893a1-6d9a94a6a2.zip and /dev/null differ
diff --git a/.yarn/cache/classnames-npm-2.3.1-f2ae0a8d3c-28fec94a81.zip b/.yarn/cache/classnames-npm-2.3.1-f2ae0a8d3c-28fec94a81.zip
deleted file mode 100644
index 72c97a4bcb5..00000000000
Binary files a/.yarn/cache/classnames-npm-2.3.1-f2ae0a8d3c-28fec94a81.zip and /dev/null differ
diff --git a/.yarn/cache/clean-css-npm-5.3.2-8946cefff9-efd9efbf40.zip b/.yarn/cache/clean-css-npm-5.3.2-8946cefff9-efd9efbf40.zip
deleted file mode 100644
index 2ea71706f8a..00000000000
Binary files a/.yarn/cache/clean-css-npm-5.3.2-8946cefff9-efd9efbf40.zip and /dev/null differ
diff --git a/.yarn/cache/cli-source-preview-npm-1.1.0-0a7655f66d-1abbe5383c.zip b/.yarn/cache/cli-source-preview-npm-1.1.0-0a7655f66d-1abbe5383c.zip
deleted file mode 100644
index a0e95eb51af..00000000000
Binary files a/.yarn/cache/cli-source-preview-npm-1.1.0-0a7655f66d-1abbe5383c.zip and /dev/null differ
diff --git a/.yarn/cache/cli-spinners-npm-2.9.0-227cd236ed-457497ccef.zip b/.yarn/cache/cli-spinners-npm-2.9.0-227cd236ed-457497ccef.zip
new file mode 100644
index 00000000000..7ccfb6cefdd
Binary files /dev/null and b/.yarn/cache/cli-spinners-npm-2.9.0-227cd236ed-457497ccef.zip differ
diff --git a/.yarn/cache/cli-spinners-npm-2.9.1-cb791d7451-80b7b21f2e.zip b/.yarn/cache/cli-spinners-npm-2.9.1-cb791d7451-80b7b21f2e.zip
deleted file mode 100644
index 82139de436b..00000000000
Binary files a/.yarn/cache/cli-spinners-npm-2.9.1-cb791d7451-80b7b21f2e.zip and /dev/null differ
diff --git a/.yarn/cache/cmd-shim-npm-6.0.1-87ebf774a0-d0718e4a49.zip b/.yarn/cache/cmd-shim-npm-6.0.1-87ebf774a0-d0718e4a49.zip
new file mode 100644
index 00000000000..43d25d7a1bf
Binary files /dev/null and b/.yarn/cache/cmd-shim-npm-6.0.1-87ebf774a0-d0718e4a49.zip differ
diff --git a/.yarn/cache/cmd-shim-npm-6.0.2-be41c925d6-2649e08b3c.zip b/.yarn/cache/cmd-shim-npm-6.0.2-be41c925d6-2649e08b3c.zip
deleted file mode 100644
index 0fb4fc449c2..00000000000
Binary files a/.yarn/cache/cmd-shim-npm-6.0.2-be41c925d6-2649e08b3c.zip and /dev/null differ
diff --git a/.yarn/cache/coa-npm-1.0.4-788f9ad57c-e09245f07a.zip b/.yarn/cache/coa-npm-1.0.4-788f9ad57c-e09245f07a.zip
deleted file mode 100644
index ff18107be81..00000000000
Binary files a/.yarn/cache/coa-npm-1.0.4-788f9ad57c-e09245f07a.zip and /dev/null differ
diff --git a/.yarn/cache/color-npm-3.2.1-568cf1014f-bf70438e01.zip b/.yarn/cache/color-npm-3.2.1-568cf1014f-bf70438e01.zip
deleted file mode 100644
index d88f3408a9d..00000000000
Binary files a/.yarn/cache/color-npm-3.2.1-568cf1014f-bf70438e01.zip and /dev/null differ
diff --git a/.yarn/cache/color-npm-4.2.3-4a23227581-b23f5e500a.zip b/.yarn/cache/color-npm-4.2.3-4a23227581-b23f5e500a.zip
new file mode 100644
index 00000000000..3f65ebe0c16
Binary files /dev/null and b/.yarn/cache/color-npm-4.2.3-4a23227581-b23f5e500a.zip differ
diff --git a/.yarn/cache/colorette-npm-1.4.0-7e94b44dc3-c8d6c8c3ef.zip b/.yarn/cache/colorette-npm-1.4.0-7e94b44dc3-c8d6c8c3ef.zip
deleted file mode 100644
index af41cf2027f..00000000000
Binary files a/.yarn/cache/colorette-npm-1.4.0-7e94b44dc3-c8d6c8c3ef.zip and /dev/null differ
diff --git a/.yarn/cache/colors-npm-1.1.2-7fe5e2d983-56c0bbb26a.zip b/.yarn/cache/colors-npm-1.1.2-7fe5e2d983-56c0bbb26a.zip
deleted file mode 100644
index 08a6a425226..00000000000
Binary files a/.yarn/cache/colors-npm-1.1.2-7fe5e2d983-56c0bbb26a.zip and /dev/null differ
diff --git a/.yarn/cache/commander-npm-8.3.0-c0d18c66d5-6b7b5d3344.zip b/.yarn/cache/commander-npm-8.3.0-c0d18c66d5-6b7b5d3344.zip
deleted file mode 100644
index 0d85ea80c34..00000000000
Binary files a/.yarn/cache/commander-npm-8.3.0-c0d18c66d5-6b7b5d3344.zip and /dev/null differ
diff --git a/.yarn/cache/compress-commons-npm-4.1.1-9ac41d7ac3-7e35816503.zip b/.yarn/cache/compress-commons-npm-4.1.1-9ac41d7ac3-7e35816503.zip
new file mode 100644
index 00000000000..14e03e0d41a
Binary files /dev/null and b/.yarn/cache/compress-commons-npm-4.1.1-9ac41d7ac3-7e35816503.zip differ
diff --git a/.yarn/cache/compress-commons-npm-4.1.2-78ffde93d9-76fa281412.zip b/.yarn/cache/compress-commons-npm-4.1.2-78ffde93d9-76fa281412.zip
deleted file mode 100644
index 70d6f658eb5..00000000000
Binary files a/.yarn/cache/compress-commons-npm-4.1.2-78ffde93d9-76fa281412.zip and /dev/null differ
diff --git a/.yarn/cache/compute-scroll-into-view-npm-1.0.20-d1a0284ad2-a72e2595cc.zip b/.yarn/cache/compute-scroll-into-view-npm-1.0.20-d1a0284ad2-a72e2595cc.zip
deleted file mode 100644
index 7150c8c9d7c..00000000000
Binary files a/.yarn/cache/compute-scroll-into-view-npm-1.0.20-d1a0284ad2-a72e2595cc.zip and /dev/null differ
diff --git a/.yarn/cache/compute-scroll-into-view-npm-3.1.0-14155669cf-cc5211d49b.zip b/.yarn/cache/compute-scroll-into-view-npm-3.1.0-14155669cf-cc5211d49b.zip
new file mode 100644
index 00000000000..0e498f1b101
Binary files /dev/null and b/.yarn/cache/compute-scroll-into-view-npm-3.1.0-14155669cf-cc5211d49b.zip differ
diff --git a/.yarn/cache/convert-source-map-npm-2.0.0-7ab664dc4e-c987be3ec0.zip b/.yarn/cache/convert-source-map-npm-2.0.0-7ab664dc4e-c987be3ec0.zip
deleted file mode 100644
index 4fa95359209..00000000000
Binary files a/.yarn/cache/convert-source-map-npm-2.0.0-7ab664dc4e-c987be3ec0.zip and /dev/null differ
diff --git a/.yarn/cache/core-js-compat-npm-3.32.0-86eb2f7323-a460119231.zip b/.yarn/cache/core-js-compat-npm-3.32.0-86eb2f7323-a460119231.zip
new file mode 100644
index 00000000000..fad7aad3ec2
Binary files /dev/null and b/.yarn/cache/core-js-compat-npm-3.32.0-86eb2f7323-a460119231.zip differ
diff --git a/.yarn/cache/core-js-npm-3.32.0-ccedf4fd04-b08473c4cb.zip b/.yarn/cache/core-js-npm-3.32.0-ccedf4fd04-b08473c4cb.zip
new file mode 100644
index 00000000000..18dffdcbff6
Binary files /dev/null and b/.yarn/cache/core-js-npm-3.32.0-ccedf4fd04-b08473c4cb.zip differ
diff --git a/.yarn/cache/core-js-npm-3.33.2-08a6fba407-d62554d51c.zip b/.yarn/cache/core-js-npm-3.33.2-08a6fba407-d62554d51c.zip
deleted file mode 100644
index d4e3e88ae78..00000000000
Binary files a/.yarn/cache/core-js-npm-3.33.2-08a6fba407-d62554d51c.zip and /dev/null differ
diff --git a/.yarn/cache/core-js-pure-npm-3.32.0-2ab9c5a73e-f98fc9610f.zip b/.yarn/cache/core-js-pure-npm-3.32.0-2ab9c5a73e-f98fc9610f.zip
new file mode 100644
index 00000000000..43eaf7d2a9e
Binary files /dev/null and b/.yarn/cache/core-js-pure-npm-3.32.0-2ab9c5a73e-f98fc9610f.zip differ
diff --git a/.yarn/cache/core-js-pure-npm-3.33.2-7290a47e39-9a65d05191.zip b/.yarn/cache/core-js-pure-npm-3.33.2-7290a47e39-9a65d05191.zip
deleted file mode 100644
index 124d03832f0..00000000000
Binary files a/.yarn/cache/core-js-pure-npm-3.33.2-7290a47e39-9a65d05191.zip and /dev/null differ
diff --git a/.yarn/cache/cosmiconfig-npm-8.2.0-9b42f8a44e-e0b188f9a6.zip b/.yarn/cache/cosmiconfig-npm-8.2.0-9b42f8a44e-e0b188f9a6.zip
new file mode 100644
index 00000000000..cff993a7ad6
Binary files /dev/null and b/.yarn/cache/cosmiconfig-npm-8.2.0-9b42f8a44e-e0b188f9a6.zip differ
diff --git a/.yarn/cache/cosmiconfig-npm-8.3.6-a5566e2779-91d082baca.zip b/.yarn/cache/cosmiconfig-npm-8.3.6-a5566e2779-91d082baca.zip
deleted file mode 100644
index 64ae8327d63..00000000000
Binary files a/.yarn/cache/cosmiconfig-npm-8.3.6-a5566e2779-91d082baca.zip and /dev/null differ
diff --git a/.yarn/cache/crc32-stream-npm-4.0.2-32a2ec50b7-1099559283.zip b/.yarn/cache/crc32-stream-npm-4.0.2-32a2ec50b7-1099559283.zip
new file mode 100644
index 00000000000..cf38addbd40
Binary files /dev/null and b/.yarn/cache/crc32-stream-npm-4.0.2-32a2ec50b7-1099559283.zip differ
diff --git a/.yarn/cache/crc32-stream-npm-4.0.3-7860b6069c-d44d0ec6f0.zip b/.yarn/cache/crc32-stream-npm-4.0.3-7860b6069c-d44d0ec6f0.zip
deleted file mode 100644
index 0aded576589..00000000000
Binary files a/.yarn/cache/crc32-stream-npm-4.0.3-7860b6069c-d44d0ec6f0.zip and /dev/null differ
diff --git a/.yarn/cache/csso-npm-2.3.2-2015bcf10e-a1f66eabbf.zip b/.yarn/cache/csso-npm-2.3.2-2015bcf10e-a1f66eabbf.zip
deleted file mode 100644
index ba138aa9aec..00000000000
Binary files a/.yarn/cache/csso-npm-2.3.2-2015bcf10e-a1f66eabbf.zip and /dev/null differ
diff --git a/.yarn/cache/dayjs-npm-1.11.10-2b4382efc1-27e8f5bc01.zip b/.yarn/cache/dayjs-npm-1.11.10-2b4382efc1-27e8f5bc01.zip
deleted file mode 100644
index 41152740709..00000000000
Binary files a/.yarn/cache/dayjs-npm-1.11.10-2b4382efc1-27e8f5bc01.zip and /dev/null differ
diff --git a/.yarn/cache/dayjs-npm-1.11.9-c47d327b7c-7bee5a1365.zip b/.yarn/cache/dayjs-npm-1.11.9-c47d327b7c-7bee5a1365.zip
new file mode 100644
index 00000000000..c9f9bfc7098
Binary files /dev/null and b/.yarn/cache/dayjs-npm-1.11.9-c47d327b7c-7bee5a1365.zip differ
diff --git a/.yarn/cache/deep-equal-npm-1.1.1-67ff9c29b9-3212af3e6b.zip b/.yarn/cache/deep-equal-npm-1.1.1-67ff9c29b9-3212af3e6b.zip
new file mode 100644
index 00000000000..64a4ce8cefc
Binary files /dev/null and b/.yarn/cache/deep-equal-npm-1.1.1-67ff9c29b9-3212af3e6b.zip differ
diff --git a/.yarn/cache/deep-equal-npm-1.1.2-3af5068c14-c9d2ed2a0d.zip b/.yarn/cache/deep-equal-npm-1.1.2-3af5068c14-c9d2ed2a0d.zip
deleted file mode 100644
index bcf6828565a..00000000000
Binary files a/.yarn/cache/deep-equal-npm-1.1.2-3af5068c14-c9d2ed2a0d.zip and /dev/null differ
diff --git a/.yarn/cache/diff-sequences-npm-29.4.3-ffe403944f-2287b25940.zip b/.yarn/cache/diff-sequences-npm-29.4.3-ffe403944f-2287b25940.zip
new file mode 100644
index 00000000000..55c16180ce0
Binary files /dev/null and b/.yarn/cache/diff-sequences-npm-29.4.3-ffe403944f-2287b25940.zip differ
diff --git a/.yarn/cache/diff-sequences-npm-29.6.3-18ab2c9949-179daf9d2f.zip b/.yarn/cache/diff-sequences-npm-29.6.3-18ab2c9949-179daf9d2f.zip
deleted file mode 100644
index 03fe8b077c9..00000000000
Binary files a/.yarn/cache/diff-sequences-npm-29.6.3-18ab2c9949-179daf9d2f.zip and /dev/null differ
diff --git a/.yarn/cache/dns-packet-npm-5.6.0-38073244c2-1643bf648f.zip b/.yarn/cache/dns-packet-npm-5.6.0-38073244c2-1643bf648f.zip
new file mode 100644
index 00000000000..df9c9966e08
Binary files /dev/null and b/.yarn/cache/dns-packet-npm-5.6.0-38073244c2-1643bf648f.zip differ
diff --git a/.yarn/cache/dns-packet-npm-5.6.1-9543a780b5-ef5496dd5a.zip b/.yarn/cache/dns-packet-npm-5.6.1-9543a780b5-ef5496dd5a.zip
deleted file mode 100644
index 188522af47d..00000000000
Binary files a/.yarn/cache/dns-packet-npm-5.6.1-9543a780b5-ef5496dd5a.zip and /dev/null differ
diff --git a/.yarn/cache/downshift-npm-5.2.1-21b424890b-5ea8784bed.zip b/.yarn/cache/downshift-npm-5.2.1-21b424890b-5ea8784bed.zip
deleted file mode 100644
index d67e323ea1a..00000000000
Binary files a/.yarn/cache/downshift-npm-5.2.1-21b424890b-5ea8784bed.zip and /dev/null differ
diff --git a/.yarn/cache/downshift-npm-8.2.2-28bf85a5e8-6413fcbec4.zip b/.yarn/cache/downshift-npm-8.2.2-28bf85a5e8-6413fcbec4.zip
new file mode 100644
index 00000000000..e80b5b3b650
Binary files /dev/null and b/.yarn/cache/downshift-npm-8.2.2-28bf85a5e8-6413fcbec4.zip differ
diff --git a/.yarn/cache/electron-to-chromium-npm-1.4.576-a9007b8de0-9db54ffa60.zip b/.yarn/cache/electron-to-chromium-npm-1.4.576-a9007b8de0-9db54ffa60.zip
new file mode 100644
index 00000000000..e7de2d283aa
Binary files /dev/null and b/.yarn/cache/electron-to-chromium-npm-1.4.576-a9007b8de0-9db54ffa60.zip differ
diff --git a/.yarn/cache/electron-to-chromium-npm-1.4.583-e3e422acaf-aded810eb4.zip b/.yarn/cache/electron-to-chromium-npm-1.4.583-e3e422acaf-aded810eb4.zip
deleted file mode 100644
index ea9c87b7045..00000000000
Binary files a/.yarn/cache/electron-to-chromium-npm-1.4.583-e3e422acaf-aded810eb4.zip and /dev/null differ
diff --git a/.yarn/cache/engine.io-npm-6.5.2-ee531cd7df-fe5b72a4cd.zip b/.yarn/cache/engine.io-npm-6.5.2-ee531cd7df-fe5b72a4cd.zip
new file mode 100644
index 00000000000..484563a0692
Binary files /dev/null and b/.yarn/cache/engine.io-npm-6.5.2-ee531cd7df-fe5b72a4cd.zip differ
diff --git a/.yarn/cache/engine.io-npm-6.5.4-4c4278bf0e-f1a74fc943.zip b/.yarn/cache/engine.io-npm-6.5.4-4c4278bf0e-f1a74fc943.zip
deleted file mode 100644
index 76d43cd4922..00000000000
Binary files a/.yarn/cache/engine.io-npm-6.5.4-4c4278bf0e-f1a74fc943.zip and /dev/null differ
diff --git a/.yarn/cache/envinfo-npm-7.10.0-cba8c054d4-d4db29c5a4.zip b/.yarn/cache/envinfo-npm-7.10.0-cba8c054d4-d4db29c5a4.zip
new file mode 100644
index 00000000000..78dc5d47332
Binary files /dev/null and b/.yarn/cache/envinfo-npm-7.10.0-cba8c054d4-d4db29c5a4.zip differ
diff --git a/.yarn/cache/envinfo-npm-7.11.0-5631444898-8cba09db18.zip b/.yarn/cache/envinfo-npm-7.11.0-5631444898-8cba09db18.zip
deleted file mode 100644
index 315d3ec53f2..00000000000
Binary files a/.yarn/cache/envinfo-npm-7.11.0-5631444898-8cba09db18.zip and /dev/null differ
diff --git a/.yarn/cache/enzyme-adapter-react-16-npm-1.15.7-d2eb5ad8f0-d718893542.zip b/.yarn/cache/enzyme-adapter-react-16-npm-1.15.7-d2eb5ad8f0-d718893542.zip
deleted file mode 100644
index e2959b02775..00000000000
Binary files a/.yarn/cache/enzyme-adapter-react-16-npm-1.15.7-d2eb5ad8f0-d718893542.zip and /dev/null differ
diff --git a/.yarn/cache/enzyme-adapter-utils-npm-1.14.1-c447454272-01415519eb.zip b/.yarn/cache/enzyme-adapter-utils-npm-1.14.1-c447454272-01415519eb.zip
deleted file mode 100644
index 5499dce0744..00000000000
Binary files a/.yarn/cache/enzyme-adapter-utils-npm-1.14.1-c447454272-01415519eb.zip and /dev/null differ
diff --git a/.yarn/cache/es-abstract-npm-1.22.1-bfe4c9a3e1-bd6c243a12.zip b/.yarn/cache/es-abstract-npm-1.22.1-bfe4c9a3e1-bd6c243a12.zip
new file mode 100644
index 00000000000..b44b58ca2b4
Binary files /dev/null and b/.yarn/cache/es-abstract-npm-1.22.1-bfe4c9a3e1-bd6c243a12.zip differ
diff --git a/.yarn/cache/es-iterator-helpers-npm-1.0.15-d23bd911af-78535c00c4.zip b/.yarn/cache/es-iterator-helpers-npm-1.0.15-d23bd911af-78535c00c4.zip
deleted file mode 100644
index 49ee1ac2260..00000000000
Binary files a/.yarn/cache/es-iterator-helpers-npm-1.0.15-d23bd911af-78535c00c4.zip and /dev/null differ
diff --git a/.yarn/cache/es-module-lexer-npm-1.3.0-9be5e8b1c4-dee2af0966.zip b/.yarn/cache/es-module-lexer-npm-1.3.0-9be5e8b1c4-dee2af0966.zip
new file mode 100644
index 00000000000..1b7cb6ce1a4
Binary files /dev/null and b/.yarn/cache/es-module-lexer-npm-1.3.0-9be5e8b1c4-dee2af0966.zip differ
diff --git a/.yarn/cache/es-module-lexer-npm-1.4.1-82f233cba4-cf45361346.zip b/.yarn/cache/es-module-lexer-npm-1.4.1-82f233cba4-cf45361346.zip
deleted file mode 100644
index c516c65abf3..00000000000
Binary files a/.yarn/cache/es-module-lexer-npm-1.4.1-82f233cba4-cf45361346.zip and /dev/null differ
diff --git a/.yarn/cache/es-set-tostringtag-npm-2.0.1-c87b5de872-ec416a1294.zip b/.yarn/cache/es-set-tostringtag-npm-2.0.1-c87b5de872-ec416a1294.zip
new file mode 100644
index 00000000000..af638f13cd5
Binary files /dev/null and b/.yarn/cache/es-set-tostringtag-npm-2.0.1-c87b5de872-ec416a1294.zip differ
diff --git a/.yarn/cache/es-set-tostringtag-npm-2.0.2-dae5ec6c58-afcec3a4c9.zip b/.yarn/cache/es-set-tostringtag-npm-2.0.2-dae5ec6c58-afcec3a4c9.zip
deleted file mode 100644
index c611db75c02..00000000000
Binary files a/.yarn/cache/es-set-tostringtag-npm-2.0.2-dae5ec6c58-afcec3a4c9.zip and /dev/null differ
diff --git a/.yarn/cache/es-shim-unscopables-npm-1.0.0-06186593f1-ac2db2c70d.zip b/.yarn/cache/es-shim-unscopables-npm-1.0.0-06186593f1-ac2db2c70d.zip
new file mode 100644
index 00000000000..6ce95877de0
Binary files /dev/null and b/.yarn/cache/es-shim-unscopables-npm-1.0.0-06186593f1-ac2db2c70d.zip differ
diff --git a/.yarn/cache/es-shim-unscopables-npm-1.0.2-a3056a4c0d-6d3bf91f65.zip b/.yarn/cache/es-shim-unscopables-npm-1.0.2-a3056a4c0d-6d3bf91f65.zip
deleted file mode 100644
index bbd630abbe7..00000000000
Binary files a/.yarn/cache/es-shim-unscopables-npm-1.0.2-a3056a4c0d-6d3bf91f65.zip and /dev/null differ
diff --git a/.yarn/cache/eslint-plugin-cypress-npm-2.14.0-4d90862e1d-b35e612f32.zip b/.yarn/cache/eslint-plugin-cypress-npm-2.14.0-4d90862e1d-b35e612f32.zip
new file mode 100644
index 00000000000..8040a783f90
Binary files /dev/null and b/.yarn/cache/eslint-plugin-cypress-npm-2.14.0-4d90862e1d-b35e612f32.zip differ
diff --git a/.yarn/cache/eslint-plugin-cypress-npm-2.15.1-90f777d9bd-46344892f2.zip b/.yarn/cache/eslint-plugin-cypress-npm-2.15.1-90f777d9bd-46344892f2.zip
deleted file mode 100644
index 7439584036b..00000000000
Binary files a/.yarn/cache/eslint-plugin-cypress-npm-2.15.1-90f777d9bd-46344892f2.zip and /dev/null differ
diff --git a/.yarn/cache/eslint-plugin-import-npm-2.28.0-7894c48955-6d6e983da5.zip b/.yarn/cache/eslint-plugin-import-npm-2.28.0-7894c48955-6d6e983da5.zip
new file mode 100644
index 00000000000..f750bbe4707
Binary files /dev/null and b/.yarn/cache/eslint-plugin-import-npm-2.28.0-7894c48955-6d6e983da5.zip differ
diff --git a/.yarn/cache/eslint-plugin-import-npm-2.29.0-9cd6da0b0a-d6e8d016f3.zip b/.yarn/cache/eslint-plugin-import-npm-2.29.0-9cd6da0b0a-d6e8d016f3.zip
deleted file mode 100644
index 62dcfb94eea..00000000000
Binary files a/.yarn/cache/eslint-plugin-import-npm-2.29.0-9cd6da0b0a-d6e8d016f3.zip and /dev/null differ
diff --git a/.yarn/cache/eslint-plugin-jsx-a11y-npm-6.7.1-84f912ba17-b7eb451304.zip b/.yarn/cache/eslint-plugin-jsx-a11y-npm-6.7.1-84f912ba17-b7eb451304.zip
new file mode 100644
index 00000000000..b65fa3c9f0a
Binary files /dev/null and b/.yarn/cache/eslint-plugin-jsx-a11y-npm-6.7.1-84f912ba17-b7eb451304.zip differ
diff --git a/.yarn/cache/eslint-plugin-jsx-a11y-npm-6.8.0-5ffd885665-7a8e449853.zip b/.yarn/cache/eslint-plugin-jsx-a11y-npm-6.8.0-5ffd885665-7a8e449853.zip
deleted file mode 100644
index 4a414bf9879..00000000000
Binary files a/.yarn/cache/eslint-plugin-jsx-a11y-npm-6.8.0-5ffd885665-7a8e449853.zip and /dev/null differ
diff --git a/.yarn/cache/eslint-plugin-lit-npm-1.10.1-561f21f2d7-e9aea27c2b.zip b/.yarn/cache/eslint-plugin-lit-npm-1.10.1-561f21f2d7-e9aea27c2b.zip
deleted file mode 100644
index bbf5fd30f33..00000000000
Binary files a/.yarn/cache/eslint-plugin-lit-npm-1.10.1-561f21f2d7-e9aea27c2b.zip and /dev/null differ
diff --git a/.yarn/cache/eslint-plugin-lit-npm-1.8.3-ba74929ab6-efe84b3d12.zip b/.yarn/cache/eslint-plugin-lit-npm-1.8.3-ba74929ab6-efe84b3d12.zip
new file mode 100644
index 00000000000..fc3c85a8839
Binary files /dev/null and b/.yarn/cache/eslint-plugin-lit-npm-1.8.3-ba74929ab6-efe84b3d12.zip differ
diff --git a/.yarn/cache/eslint-plugin-react-npm-7.33.1-6e69813204-b987834396.zip b/.yarn/cache/eslint-plugin-react-npm-7.33.1-6e69813204-b987834396.zip
new file mode 100644
index 00000000000..2e4d9708980
Binary files /dev/null and b/.yarn/cache/eslint-plugin-react-npm-7.33.1-6e69813204-b987834396.zip differ
diff --git a/.yarn/cache/eslint-plugin-react-npm-7.33.2-08f77ebc15-cb8c5dd585.zip b/.yarn/cache/eslint-plugin-react-npm-7.33.2-08f77ebc15-cb8c5dd585.zip
deleted file mode 100644
index 4b0264edadd..00000000000
Binary files a/.yarn/cache/eslint-plugin-react-npm-7.33.2-08f77ebc15-cb8c5dd585.zip and /dev/null differ
diff --git a/.yarn/cache/eslint-plugin-tree-shaking-npm-1.10.0-7984de0c27-e3cdd16541.zip b/.yarn/cache/eslint-plugin-tree-shaking-npm-1.10.0-7984de0c27-e3cdd16541.zip
new file mode 100644
index 00000000000..c7a34479a52
Binary files /dev/null and b/.yarn/cache/eslint-plugin-tree-shaking-npm-1.10.0-7984de0c27-e3cdd16541.zip differ
diff --git a/.yarn/cache/eslint-plugin-tree-shaking-npm-1.10.1-6e3b8a8f21-bf83a81579.zip b/.yarn/cache/eslint-plugin-tree-shaking-npm-1.10.1-6e3b8a8f21-bf83a81579.zip
deleted file mode 100644
index 5711c2ab069..00000000000
Binary files a/.yarn/cache/eslint-plugin-tree-shaking-npm-1.10.1-6e3b8a8f21-bf83a81579.zip and /dev/null differ
diff --git a/.yarn/cache/esprima-npm-2.7.3-486ce0727a-7508285b88.zip b/.yarn/cache/esprima-npm-2.7.3-486ce0727a-7508285b88.zip
deleted file mode 100644
index 2dc0f3ea7c1..00000000000
Binary files a/.yarn/cache/esprima-npm-2.7.3-486ce0727a-7508285b88.zip and /dev/null differ
diff --git a/.yarn/cache/estree-walker-npm-0.6.1-fe92d0e1f6-b8da781503.zip b/.yarn/cache/estree-walker-npm-0.6.1-fe92d0e1f6-b8da781503.zip
deleted file mode 100644
index e01bb81200f..00000000000
Binary files a/.yarn/cache/estree-walker-npm-0.6.1-fe92d0e1f6-b8da781503.zip and /dev/null differ
diff --git a/.yarn/cache/expect-npm-29.6.2-d56284fd66-304472c4c6.zip b/.yarn/cache/expect-npm-29.6.2-d56284fd66-304472c4c6.zip
new file mode 100644
index 00000000000..7570078e8de
Binary files /dev/null and b/.yarn/cache/expect-npm-29.6.2-d56284fd66-304472c4c6.zip differ
diff --git a/.yarn/cache/expect-npm-29.7.0-62e9f7979e-63f97bc51f.zip b/.yarn/cache/expect-npm-29.7.0-62e9f7979e-63f97bc51f.zip
deleted file mode 100644
index b292f78fa87..00000000000
Binary files a/.yarn/cache/expect-npm-29.7.0-62e9f7979e-63f97bc51f.zip and /dev/null differ
diff --git a/.yarn/cache/fast-glob-npm-3.3.1-8045ff8f4d-51bcd15472.zip b/.yarn/cache/fast-glob-npm-3.3.1-8045ff8f4d-51bcd15472.zip
new file mode 100644
index 00000000000..c4c8d7729fc
Binary files /dev/null and b/.yarn/cache/fast-glob-npm-3.3.1-8045ff8f4d-51bcd15472.zip differ
diff --git a/.yarn/cache/fast-glob-npm-3.3.2-0a8cb4f2ca-222512e931.zip b/.yarn/cache/fast-glob-npm-3.3.2-0a8cb4f2ca-222512e931.zip
deleted file mode 100644
index 45463c136bb..00000000000
Binary files a/.yarn/cache/fast-glob-npm-3.3.2-0a8cb4f2ca-222512e931.zip and /dev/null differ
diff --git a/.yarn/cache/fast-json-stringify-npm-5.8.0-284c2d8dda-dee6d0929c.zip b/.yarn/cache/fast-json-stringify-npm-5.8.0-284c2d8dda-dee6d0929c.zip
new file mode 100644
index 00000000000..07fa20c893e
Binary files /dev/null and b/.yarn/cache/fast-json-stringify-npm-5.8.0-284c2d8dda-dee6d0929c.zip differ
diff --git a/.yarn/cache/fast-sass-loader-npm-2.0.1-ba6d1d1880-4945457e01.zip b/.yarn/cache/fast-sass-loader-npm-2.0.1-ba6d1d1880-4945457e01.zip
deleted file mode 100644
index 87dd09b8161..00000000000
Binary files a/.yarn/cache/fast-sass-loader-npm-2.0.1-ba6d1d1880-4945457e01.zip and /dev/null differ
diff --git a/.yarn/cache/fast-uri-npm-2.2.0-1601624a05-eb5e6ac004.zip b/.yarn/cache/fast-uri-npm-2.2.0-1601624a05-eb5e6ac004.zip
new file mode 100644
index 00000000000..3c36179e3a0
Binary files /dev/null and b/.yarn/cache/fast-uri-npm-2.2.0-1601624a05-eb5e6ac004.zip differ
diff --git a/.yarn/cache/flat-cache-npm-3.0.4-ee77e5911e-9fe5d0cb97.zip b/.yarn/cache/flat-cache-npm-3.0.4-ee77e5911e-9fe5d0cb97.zip
new file mode 100644
index 00000000000..8fad0082303
Binary files /dev/null and b/.yarn/cache/flat-cache-npm-3.0.4-ee77e5911e-9fe5d0cb97.zip differ
diff --git a/.yarn/cache/flat-cache-npm-3.2.0-9a887f084e-02381c6ece.zip b/.yarn/cache/flat-cache-npm-3.2.0-9a887f084e-02381c6ece.zip
deleted file mode 100644
index dd4cc331b7e..00000000000
Binary files a/.yarn/cache/flat-cache-npm-3.2.0-9a887f084e-02381c6ece.zip and /dev/null differ
diff --git a/.yarn/cache/flatpickr-npm-4.6.13-06399933fc-0e32f2fbd4.zip b/.yarn/cache/flatpickr-npm-4.6.13-06399933fc-0e32f2fbd4.zip
deleted file mode 100644
index 8f1e2ad6d15..00000000000
Binary files a/.yarn/cache/flatpickr-npm-4.6.13-06399933fc-0e32f2fbd4.zip and /dev/null differ
diff --git a/.yarn/cache/flatpickr-patch-9090094964-720e102d03.zip b/.yarn/cache/flatpickr-patch-9090094964-720e102d03.zip
deleted file mode 100644
index aa3dc0f4704..00000000000
Binary files a/.yarn/cache/flatpickr-patch-9090094964-720e102d03.zip and /dev/null differ
diff --git a/.yarn/cache/flatted-npm-3.2.7-0da10b7c56-427633049d.zip b/.yarn/cache/flatted-npm-3.2.7-0da10b7c56-427633049d.zip
new file mode 100644
index 00000000000..b5d1ef6f7c1
Binary files /dev/null and b/.yarn/cache/flatted-npm-3.2.7-0da10b7c56-427633049d.zip differ
diff --git a/.yarn/cache/focus-lock-npm-0.11.6-fb9117f534-090ac6d830.zip b/.yarn/cache/focus-lock-npm-0.11.6-fb9117f534-090ac6d830.zip
new file mode 100644
index 00000000000..18f271a0ba4
Binary files /dev/null and b/.yarn/cache/focus-lock-npm-0.11.6-fb9117f534-090ac6d830.zip differ
diff --git a/.yarn/cache/focus-lock-npm-1.0.0-ea735e1988-5d8c03a40f.zip b/.yarn/cache/focus-lock-npm-1.0.0-ea735e1988-5d8c03a40f.zip
deleted file mode 100644
index 57fd973818e..00000000000
Binary files a/.yarn/cache/focus-lock-npm-1.0.0-ea735e1988-5d8c03a40f.zip and /dev/null differ
diff --git a/.yarn/cache/follow-redirects-npm-1.15.2-1ec1dd82be-8be0d39919.zip b/.yarn/cache/follow-redirects-npm-1.15.2-1ec1dd82be-8be0d39919.zip
new file mode 100644
index 00000000000..9aa62ac845d
Binary files /dev/null and b/.yarn/cache/follow-redirects-npm-1.15.2-1ec1dd82be-8be0d39919.zip differ
diff --git a/.yarn/cache/fs-extra-npm-3.0.1-9417aaf7f9-8e233f6200.zip b/.yarn/cache/fs-extra-npm-3.0.1-9417aaf7f9-8e233f6200.zip
deleted file mode 100644
index 7439bb467d5..00000000000
Binary files a/.yarn/cache/fs-extra-npm-3.0.1-9417aaf7f9-8e233f6200.zip and /dev/null differ
diff --git a/.yarn/cache/fs-minipass-npm-3.0.2-a27ef235f5-1c071b5b8f.zip b/.yarn/cache/fs-minipass-npm-3.0.2-a27ef235f5-1c071b5b8f.zip
new file mode 100644
index 00000000000..026d886e098
Binary files /dev/null and b/.yarn/cache/fs-minipass-npm-3.0.2-a27ef235f5-1c071b5b8f.zip differ
diff --git a/.yarn/cache/fs-minipass-npm-3.0.3-d148d6ac19-af143246cf.zip b/.yarn/cache/fs-minipass-npm-3.0.3-d148d6ac19-af143246cf.zip
deleted file mode 100644
index ee7e68e44f2..00000000000
Binary files a/.yarn/cache/fs-minipass-npm-3.0.3-d148d6ac19-af143246cf.zip and /dev/null differ
diff --git a/.yarn/cache/fs-monkey-npm-1.0.4-d8be500c32-9944223c25.zip b/.yarn/cache/fs-monkey-npm-1.0.4-d8be500c32-9944223c25.zip
new file mode 100644
index 00000000000..325bc521021
Binary files /dev/null and b/.yarn/cache/fs-monkey-npm-1.0.4-d8be500c32-9944223c25.zip differ
diff --git a/.yarn/cache/fs-monkey-npm-1.0.5-5fd8526237-7fcdf92670.zip b/.yarn/cache/fs-monkey-npm-1.0.5-5fd8526237-7fcdf92670.zip
deleted file mode 100644
index d6e7dd6783b..00000000000
Binary files a/.yarn/cache/fs-monkey-npm-1.0.5-5fd8526237-7fcdf92670.zip and /dev/null differ
diff --git a/.yarn/cache/fsevents-npm-2.3.3-ce9fb0ffae-4c1ade961d.zip b/.yarn/cache/fsevents-npm-2.3.3-ce9fb0ffae-4c1ade961d.zip
deleted file mode 100644
index 7164f878b60..00000000000
Binary files a/.yarn/cache/fsevents-npm-2.3.3-ce9fb0ffae-4c1ade961d.zip and /dev/null differ
diff --git a/.yarn/cache/fsevents-patch-6b67494872-10.zip b/.yarn/cache/fsevents-patch-6b67494872-10.zip
deleted file mode 100644
index 9887ada72d9..00000000000
Binary files a/.yarn/cache/fsevents-patch-6b67494872-10.zip and /dev/null differ
diff --git a/.yarn/cache/gaze-npm-1.1.3-cd09a2e834-9ff1110aae.zip b/.yarn/cache/gaze-npm-1.1.3-cd09a2e834-9ff1110aae.zip
deleted file mode 100644
index 9e7b56cabad..00000000000
Binary files a/.yarn/cache/gaze-npm-1.1.3-cd09a2e834-9ff1110aae.zip and /dev/null differ
diff --git a/.yarn/cache/glob-npm-7.1.7-5698ad9c48-ff5aab0386.zip b/.yarn/cache/glob-npm-7.1.7-5698ad9c48-ff5aab0386.zip
deleted file mode 100644
index 762b5ef5383..00000000000
Binary files a/.yarn/cache/glob-npm-7.1.7-5698ad9c48-ff5aab0386.zip and /dev/null differ
diff --git a/.yarn/cache/globals-npm-13.21.0-c0829ce1cb-98ce947dc4.zip b/.yarn/cache/globals-npm-13.21.0-c0829ce1cb-98ce947dc4.zip
new file mode 100644
index 00000000000..5bad9a103ee
Binary files /dev/null and b/.yarn/cache/globals-npm-13.21.0-c0829ce1cb-98ce947dc4.zip differ
diff --git a/.yarn/cache/globals-npm-13.23.0-7f02426fd5-bf6a8616f4.zip b/.yarn/cache/globals-npm-13.23.0-7f02426fd5-bf6a8616f4.zip
deleted file mode 100644
index abd4e2c4ac7..00000000000
Binary files a/.yarn/cache/globals-npm-13.23.0-7f02426fd5-bf6a8616f4.zip and /dev/null differ
diff --git a/.yarn/cache/globule-npm-1.3.4-b973c73701-04ac30656f.zip b/.yarn/cache/globule-npm-1.3.4-b973c73701-04ac30656f.zip
deleted file mode 100644
index 2cfda67db5c..00000000000
Binary files a/.yarn/cache/globule-npm-1.3.4-b973c73701-04ac30656f.zip and /dev/null differ
diff --git a/.yarn/cache/has-npm-1.0.3-b7f00631c1-a449f3185b.zip b/.yarn/cache/has-npm-1.0.3-b7f00631c1-a449f3185b.zip
new file mode 100644
index 00000000000..948b7fd545e
Binary files /dev/null and b/.yarn/cache/has-npm-1.0.3-b7f00631c1-a449f3185b.zip differ
diff --git a/.yarn/cache/has-npm-1.0.4-0dc267d5e0-c245f332fe.zip b/.yarn/cache/has-npm-1.0.4-0dc267d5e0-c245f332fe.zip
deleted file mode 100644
index 267280df014..00000000000
Binary files a/.yarn/cache/has-npm-1.0.4-0dc267d5e0-c245f332fe.zip and /dev/null differ
diff --git a/.yarn/cache/has-property-descriptors-npm-1.0.0-56289b918d-a6d3f0a266.zip b/.yarn/cache/has-property-descriptors-npm-1.0.0-56289b918d-a6d3f0a266.zip
new file mode 100644
index 00000000000..46eaa4fd050
Binary files /dev/null and b/.yarn/cache/has-property-descriptors-npm-1.0.0-56289b918d-a6d3f0a266.zip differ
diff --git a/.yarn/cache/has-property-descriptors-npm-1.0.1-61cd62fce3-21a47bb080.zip b/.yarn/cache/has-property-descriptors-npm-1.0.1-61cd62fce3-21a47bb080.zip
deleted file mode 100644
index df9c01d251c..00000000000
Binary files a/.yarn/cache/has-property-descriptors-npm-1.0.1-61cd62fce3-21a47bb080.zip and /dev/null differ
diff --git a/.yarn/cache/html-minifier-terser-npm-6.1.0-49a405eebd-a244fa944e.zip b/.yarn/cache/html-minifier-terser-npm-6.1.0-49a405eebd-a244fa944e.zip
deleted file mode 100644
index a7f03c145f7..00000000000
Binary files a/.yarn/cache/html-minifier-terser-npm-6.1.0-49a405eebd-a244fa944e.zip and /dev/null differ
diff --git a/.yarn/cache/html-webpack-plugin-npm-5.5.3-b4f14786eb-01d302a434.zip b/.yarn/cache/html-webpack-plugin-npm-5.5.3-b4f14786eb-01d302a434.zip
deleted file mode 100644
index dc6f223fe6c..00000000000
Binary files a/.yarn/cache/html-webpack-plugin-npm-5.5.3-b4f14786eb-01d302a434.zip and /dev/null differ
diff --git a/.yarn/cache/immutable-npm-4.3.2-413e7ca19b-85176b8f31.zip b/.yarn/cache/immutable-npm-4.3.2-413e7ca19b-85176b8f31.zip
new file mode 100644
index 00000000000..66759ddb68b
Binary files /dev/null and b/.yarn/cache/immutable-npm-4.3.2-413e7ca19b-85176b8f31.zip differ
diff --git a/.yarn/cache/immutable-npm-4.3.4-2f54cf641b-ea187acc1e.zip b/.yarn/cache/immutable-npm-4.3.4-2f54cf641b-ea187acc1e.zip
deleted file mode 100644
index 015b72681e2..00000000000
Binary files a/.yarn/cache/immutable-npm-4.3.4-2f54cf641b-ea187acc1e.zip and /dev/null differ
diff --git a/.yarn/cache/inherits-npm-2.0.1-0011554c03-37165f42e5.zip b/.yarn/cache/inherits-npm-2.0.1-0011554c03-37165f42e5.zip
new file mode 100644
index 00000000000..63d9ab5f07c
Binary files /dev/null and b/.yarn/cache/inherits-npm-2.0.1-0011554c03-37165f42e5.zip differ
diff --git a/.yarn/cache/internal-slot-npm-1.0.5-a2241f3e66-e2eb5b348e.zip b/.yarn/cache/internal-slot-npm-1.0.5-a2241f3e66-e2eb5b348e.zip
new file mode 100644
index 00000000000..d60d330830e
Binary files /dev/null and b/.yarn/cache/internal-slot-npm-1.0.5-a2241f3e66-e2eb5b348e.zip differ
diff --git a/.yarn/cache/is-accessor-descriptor-npm-0.1.6-41c495d517-3d629a086a.zip b/.yarn/cache/is-accessor-descriptor-npm-0.1.6-41c495d517-3d629a086a.zip
new file mode 100644
index 00000000000..31a8e14eb99
Binary files /dev/null and b/.yarn/cache/is-accessor-descriptor-npm-0.1.6-41c495d517-3d629a086a.zip differ
diff --git a/.yarn/cache/is-accessor-descriptor-npm-1.0.0-d8ce016e98-8e475968e9.zip b/.yarn/cache/is-accessor-descriptor-npm-1.0.0-d8ce016e98-8e475968e9.zip
new file mode 100644
index 00000000000..98504caac2a
Binary files /dev/null and b/.yarn/cache/is-accessor-descriptor-npm-1.0.0-d8ce016e98-8e475968e9.zip differ
diff --git a/.yarn/cache/is-accessor-descriptor-npm-1.0.1-0a6049222f-df0d1da1a3.zip b/.yarn/cache/is-accessor-descriptor-npm-1.0.1-0a6049222f-df0d1da1a3.zip
deleted file mode 100644
index b21e6444024..00000000000
Binary files a/.yarn/cache/is-accessor-descriptor-npm-1.0.1-0a6049222f-df0d1da1a3.zip and /dev/null differ
diff --git a/.yarn/cache/is-async-function-npm-2.0.0-ebf8596ab1-2cf336fbf8.zip b/.yarn/cache/is-async-function-npm-2.0.0-ebf8596ab1-2cf336fbf8.zip
deleted file mode 100644
index 8b7bee20136..00000000000
Binary files a/.yarn/cache/is-async-function-npm-2.0.0-ebf8596ab1-2cf336fbf8.zip and /dev/null differ
diff --git a/.yarn/cache/is-core-module-npm-2.13.0-e444c50225-55ccb5ccd2.zip b/.yarn/cache/is-core-module-npm-2.13.0-e444c50225-55ccb5ccd2.zip
new file mode 100644
index 00000000000..8529d91547d
Binary files /dev/null and b/.yarn/cache/is-core-module-npm-2.13.0-e444c50225-55ccb5ccd2.zip differ
diff --git a/.yarn/cache/is-data-descriptor-npm-0.1.4-6f53f71c67-5c622e078b.zip b/.yarn/cache/is-data-descriptor-npm-0.1.4-6f53f71c67-5c622e078b.zip
new file mode 100644
index 00000000000..ca3f070450b
Binary files /dev/null and b/.yarn/cache/is-data-descriptor-npm-0.1.4-6f53f71c67-5c622e078b.zip differ
diff --git a/.yarn/cache/is-data-descriptor-npm-1.0.0-f7d2e852ca-b8b1f13a53.zip b/.yarn/cache/is-data-descriptor-npm-1.0.0-f7d2e852ca-b8b1f13a53.zip
new file mode 100644
index 00000000000..335c6259e79
Binary files /dev/null and b/.yarn/cache/is-data-descriptor-npm-1.0.0-f7d2e852ca-b8b1f13a53.zip differ
diff --git a/.yarn/cache/is-data-descriptor-npm-1.0.1-856092ded2-49b36e903b.zip b/.yarn/cache/is-data-descriptor-npm-1.0.1-856092ded2-49b36e903b.zip
deleted file mode 100644
index 58b33e01ef8..00000000000
Binary files a/.yarn/cache/is-data-descriptor-npm-1.0.1-856092ded2-49b36e903b.zip and /dev/null differ
diff --git a/.yarn/cache/is-descriptor-npm-0.1.6-15c7346839-b946ba8421.zip b/.yarn/cache/is-descriptor-npm-0.1.6-15c7346839-b946ba8421.zip
new file mode 100644
index 00000000000..86a93599ca9
Binary files /dev/null and b/.yarn/cache/is-descriptor-npm-0.1.6-15c7346839-b946ba8421.zip differ
diff --git a/.yarn/cache/is-descriptor-npm-0.1.7-6b23887719-38783182c3.zip b/.yarn/cache/is-descriptor-npm-0.1.7-6b23887719-38783182c3.zip
deleted file mode 100644
index bdc0200d0b4..00000000000
Binary files a/.yarn/cache/is-descriptor-npm-0.1.7-6b23887719-38783182c3.zip and /dev/null differ
diff --git a/.yarn/cache/is-descriptor-npm-1.0.2-5cfc02c444-e68059b333.zip b/.yarn/cache/is-descriptor-npm-1.0.2-5cfc02c444-e68059b333.zip
new file mode 100644
index 00000000000..8f51c8f07c9
Binary files /dev/null and b/.yarn/cache/is-descriptor-npm-1.0.2-5cfc02c444-e68059b333.zip differ
diff --git a/.yarn/cache/is-descriptor-npm-1.0.3-038153867c-b940d04d93.zip b/.yarn/cache/is-descriptor-npm-1.0.3-038153867c-b940d04d93.zip
deleted file mode 100644
index f1493e4b822..00000000000
Binary files a/.yarn/cache/is-descriptor-npm-1.0.3-038153867c-b940d04d93.zip and /dev/null differ
diff --git a/.yarn/cache/is-finalizationregistry-npm-1.0.2-15bf1bd7ce-1b8e9e1bf2.zip b/.yarn/cache/is-finalizationregistry-npm-1.0.2-15bf1bd7ce-1b8e9e1bf2.zip
deleted file mode 100644
index cf0d5287919..00000000000
Binary files a/.yarn/cache/is-finalizationregistry-npm-1.0.2-15bf1bd7ce-1b8e9e1bf2.zip and /dev/null differ
diff --git a/.yarn/cache/is-generator-function-npm-1.0.10-1d0f3809ef-499a3ce636.zip b/.yarn/cache/is-generator-function-npm-1.0.10-1d0f3809ef-499a3ce636.zip
deleted file mode 100644
index c6c479b82cb..00000000000
Binary files a/.yarn/cache/is-generator-function-npm-1.0.10-1d0f3809ef-499a3ce636.zip and /dev/null differ
diff --git a/.yarn/cache/is-weakmap-npm-2.0.1-88ca3d1dc4-289fa4e8ba.zip b/.yarn/cache/is-weakmap-npm-2.0.1-88ca3d1dc4-289fa4e8ba.zip
deleted file mode 100644
index 15c5be50f8b..00000000000
Binary files a/.yarn/cache/is-weakmap-npm-2.0.1-88ca3d1dc4-289fa4e8ba.zip and /dev/null differ
diff --git a/.yarn/cache/is-weakset-npm-2.0.2-b3cbc6c9cd-8f2ddb9639.zip b/.yarn/cache/is-weakset-npm-2.0.2-b3cbc6c9cd-8f2ddb9639.zip
deleted file mode 100644
index a57dd4676fe..00000000000
Binary files a/.yarn/cache/is-weakset-npm-2.0.2-b3cbc6c9cd-8f2ddb9639.zip and /dev/null differ
diff --git a/.yarn/cache/istanbul-lib-coverage-npm-3.2.0-93f84b2c8c-31621b84ad.zip b/.yarn/cache/istanbul-lib-coverage-npm-3.2.0-93f84b2c8c-31621b84ad.zip
new file mode 100644
index 00000000000..1c849581e6a
Binary files /dev/null and b/.yarn/cache/istanbul-lib-coverage-npm-3.2.0-93f84b2c8c-31621b84ad.zip differ
diff --git a/.yarn/cache/istanbul-lib-coverage-npm-3.2.2-5c0526e059-40bbdd1e93.zip b/.yarn/cache/istanbul-lib-coverage-npm-3.2.2-5c0526e059-40bbdd1e93.zip
deleted file mode 100644
index 960ed7af19e..00000000000
Binary files a/.yarn/cache/istanbul-lib-coverage-npm-3.2.2-5c0526e059-40bbdd1e93.zip and /dev/null differ
diff --git a/.yarn/cache/iterator.prototype-npm-1.1.2-009f234a21-b5013967ad.zip b/.yarn/cache/iterator.prototype-npm-1.1.2-009f234a21-b5013967ad.zip
deleted file mode 100644
index 61320da367a..00000000000
Binary files a/.yarn/cache/iterator.prototype-npm-1.1.2-009f234a21-b5013967ad.zip and /dev/null differ
diff --git a/.yarn/cache/jest-diff-npm-29.6.2-caa9c5f644-8c66d29afb.zip b/.yarn/cache/jest-diff-npm-29.6.2-caa9c5f644-8c66d29afb.zip
new file mode 100644
index 00000000000..ea45f755d5e
Binary files /dev/null and b/.yarn/cache/jest-diff-npm-29.6.2-caa9c5f644-8c66d29afb.zip differ
diff --git a/.yarn/cache/jest-diff-npm-29.7.0-0149e01930-6f3a7eb9cd.zip b/.yarn/cache/jest-diff-npm-29.7.0-0149e01930-6f3a7eb9cd.zip
deleted file mode 100644
index 0c268e5ea41..00000000000
Binary files a/.yarn/cache/jest-diff-npm-29.7.0-0149e01930-6f3a7eb9cd.zip and /dev/null differ
diff --git a/.yarn/cache/jest-get-type-npm-29.4.3-790eefdb01-6ac7f2dde1.zip b/.yarn/cache/jest-get-type-npm-29.4.3-790eefdb01-6ac7f2dde1.zip
new file mode 100644
index 00000000000..51f6859bcb0
Binary files /dev/null and b/.yarn/cache/jest-get-type-npm-29.4.3-790eefdb01-6ac7f2dde1.zip differ
diff --git a/.yarn/cache/jest-get-type-npm-29.6.3-500477292e-88ac9102d4.zip b/.yarn/cache/jest-get-type-npm-29.6.3-500477292e-88ac9102d4.zip
deleted file mode 100644
index 8afbbd1b393..00000000000
Binary files a/.yarn/cache/jest-get-type-npm-29.6.3-500477292e-88ac9102d4.zip and /dev/null differ
diff --git a/.yarn/cache/jest-matcher-utils-npm-29.6.2-fd1c69812e-38dc3f7162.zip b/.yarn/cache/jest-matcher-utils-npm-29.6.2-fd1c69812e-38dc3f7162.zip
new file mode 100644
index 00000000000..58074bcd3fd
Binary files /dev/null and b/.yarn/cache/jest-matcher-utils-npm-29.6.2-fd1c69812e-38dc3f7162.zip differ
diff --git a/.yarn/cache/jest-matcher-utils-npm-29.7.0-dfc74b630e-981904a494.zip b/.yarn/cache/jest-matcher-utils-npm-29.7.0-dfc74b630e-981904a494.zip
deleted file mode 100644
index b8edc33f663..00000000000
Binary files a/.yarn/cache/jest-matcher-utils-npm-29.7.0-dfc74b630e-981904a494.zip and /dev/null differ
diff --git a/.yarn/cache/jest-message-util-npm-29.6.2-8bd7bc632e-a0e972367f.zip b/.yarn/cache/jest-message-util-npm-29.6.2-8bd7bc632e-a0e972367f.zip
new file mode 100644
index 00000000000..3cfc359fe39
Binary files /dev/null and b/.yarn/cache/jest-message-util-npm-29.6.2-8bd7bc632e-a0e972367f.zip differ
diff --git a/.yarn/cache/jest-message-util-npm-29.7.0-7f88b6e8d1-31d53c6ed2.zip b/.yarn/cache/jest-message-util-npm-29.7.0-7f88b6e8d1-31d53c6ed2.zip
deleted file mode 100644
index 770cff6a174..00000000000
Binary files a/.yarn/cache/jest-message-util-npm-29.7.0-7f88b6e8d1-31d53c6ed2.zip and /dev/null differ
diff --git a/.yarn/cache/jest-specific-snapshot-npm-4.0.0-80566e7d7a-ae0135a5a1.zip b/.yarn/cache/jest-specific-snapshot-npm-4.0.0-80566e7d7a-ae0135a5a1.zip
deleted file mode 100644
index 8abaaf4dfc6..00000000000
Binary files a/.yarn/cache/jest-specific-snapshot-npm-4.0.0-80566e7d7a-ae0135a5a1.zip and /dev/null differ
diff --git a/.yarn/cache/jest-util-npm-29.6.2-41bd0e8e02-95d510b7bb.zip b/.yarn/cache/jest-util-npm-29.6.2-41bd0e8e02-95d510b7bb.zip
new file mode 100644
index 00000000000..71f5741f636
Binary files /dev/null and b/.yarn/cache/jest-util-npm-29.6.2-41bd0e8e02-95d510b7bb.zip differ
diff --git a/.yarn/cache/jest-util-npm-29.7.0-ff1d59714b-30d58af696.zip b/.yarn/cache/jest-util-npm-29.7.0-ff1d59714b-30d58af696.zip
deleted file mode 100644
index af20ef41ff4..00000000000
Binary files a/.yarn/cache/jest-util-npm-29.7.0-ff1d59714b-30d58af696.zip and /dev/null differ
diff --git a/.yarn/cache/joi-npm-17.11.0-66efd6d755-392e897693.zip b/.yarn/cache/joi-npm-17.11.0-66efd6d755-392e897693.zip
deleted file mode 100644
index d07c009ae20..00000000000
Binary files a/.yarn/cache/joi-npm-17.11.0-66efd6d755-392e897693.zip and /dev/null differ
diff --git a/.yarn/cache/joi-npm-17.9.2-51354605e1-c6c6796431.zip b/.yarn/cache/joi-npm-17.9.2-51354605e1-c6c6796431.zip
new file mode 100644
index 00000000000..66aa6410e38
Binary files /dev/null and b/.yarn/cache/joi-npm-17.9.2-51354605e1-c6c6796431.zip differ
diff --git a/.yarn/cache/js-base64-npm-2.6.4-569350f803-c1a740a34f.zip b/.yarn/cache/js-base64-npm-2.6.4-569350f803-c1a740a34f.zip
deleted file mode 100644
index b3ada722830..00000000000
Binary files a/.yarn/cache/js-base64-npm-2.6.4-569350f803-c1a740a34f.zip and /dev/null differ
diff --git a/.yarn/cache/js-yaml-npm-3.7.0-0c412e6ae7-1e547d9a4c.zip b/.yarn/cache/js-yaml-npm-3.7.0-0c412e6ae7-1e547d9a4c.zip
deleted file mode 100644
index ff967e954bf..00000000000
Binary files a/.yarn/cache/js-yaml-npm-3.7.0-0c412e6ae7-1e547d9a4c.zip and /dev/null differ
diff --git a/.yarn/cache/json-buffer-npm-3.0.1-f8f6d20603-8287615452.zip b/.yarn/cache/json-buffer-npm-3.0.1-f8f6d20603-8287615452.zip
deleted file mode 100644
index 634da5625a5..00000000000
Binary files a/.yarn/cache/json-buffer-npm-3.0.1-f8f6d20603-8287615452.zip and /dev/null differ
diff --git a/.yarn/cache/jsonfile-npm-3.0.1-77649e47c9-c75a97c2d1.zip b/.yarn/cache/jsonfile-npm-3.0.1-77649e47c9-c75a97c2d1.zip
deleted file mode 100644
index afb5526aa89..00000000000
Binary files a/.yarn/cache/jsonfile-npm-3.0.1-77649e47c9-c75a97c2d1.zip and /dev/null differ
diff --git a/.yarn/cache/karma-accessibility-checker-npm-3.1.59-6ba9eb7add-572197b12e.zip b/.yarn/cache/karma-accessibility-checker-npm-3.1.59-6ba9eb7add-572197b12e.zip
new file mode 100644
index 00000000000..9f046eed1ca
Binary files /dev/null and b/.yarn/cache/karma-accessibility-checker-npm-3.1.59-6ba9eb7add-572197b12e.zip differ
diff --git a/.yarn/cache/karma-accessibility-checker-npm-3.1.64-b021a6e39f-160b94923c.zip b/.yarn/cache/karma-accessibility-checker-npm-3.1.64-b021a6e39f-160b94923c.zip
deleted file mode 100644
index 7c6a073b93e..00000000000
Binary files a/.yarn/cache/karma-accessibility-checker-npm-3.1.64-b021a6e39f-160b94923c.zip and /dev/null differ
diff --git a/.yarn/cache/keyv-npm-4.5.4-4c8e2cf7f7-167eb6ef64.zip b/.yarn/cache/keyv-npm-4.5.4-4c8e2cf7f7-167eb6ef64.zip
deleted file mode 100644
index 8fd41916482..00000000000
Binary files a/.yarn/cache/keyv-npm-4.5.4-4c8e2cf7f7-167eb6ef64.zip and /dev/null differ
diff --git a/.yarn/cache/language-tags-npm-1.0.5-3a50e75c96-2161292dda.zip b/.yarn/cache/language-tags-npm-1.0.5-3a50e75c96-2161292dda.zip
new file mode 100644
index 00000000000..256cbfc8dde
Binary files /dev/null and b/.yarn/cache/language-tags-npm-1.0.5-3a50e75c96-2161292dda.zip differ
diff --git a/.yarn/cache/language-tags-npm-1.0.9-3ea51f204b-d3a7c14b69.zip b/.yarn/cache/language-tags-npm-1.0.9-3ea51f204b-d3a7c14b69.zip
deleted file mode 100644
index 8878cf0c0b1..00000000000
Binary files a/.yarn/cache/language-tags-npm-1.0.9-3ea51f204b-d3a7c14b69.zip and /dev/null differ
diff --git a/.yarn/cache/launch-editor-npm-2.6.0-0c6f590d3e-48e4230643.zip b/.yarn/cache/launch-editor-npm-2.6.0-0c6f590d3e-48e4230643.zip
new file mode 100644
index 00000000000..31426621607
Binary files /dev/null and b/.yarn/cache/launch-editor-npm-2.6.0-0c6f590d3e-48e4230643.zip differ
diff --git a/.yarn/cache/launch-editor-npm-2.6.1-0aba6b0e98-e06d193075.zip b/.yarn/cache/launch-editor-npm-2.6.1-0aba6b0e98-e06d193075.zip
deleted file mode 100644
index 80032592ddb..00000000000
Binary files a/.yarn/cache/launch-editor-npm-2.6.1-0aba6b0e98-e06d193075.zip and /dev/null differ
diff --git a/.yarn/cache/lines-and-columns-npm-2.0.3-68ede50723-b5bb0d6ee2.zip b/.yarn/cache/lines-and-columns-npm-2.0.3-68ede50723-b5bb0d6ee2.zip
new file mode 100644
index 00000000000..949f3d4ea2e
Binary files /dev/null and b/.yarn/cache/lines-and-columns-npm-2.0.3-68ede50723-b5bb0d6ee2.zip differ
diff --git a/.yarn/cache/lines-and-columns-npm-2.0.4-e433f5a96f-81ac2f943f.zip b/.yarn/cache/lines-and-columns-npm-2.0.4-e433f5a96f-81ac2f943f.zip
deleted file mode 100644
index 34d96052751..00000000000
Binary files a/.yarn/cache/lines-and-columns-npm-2.0.4-e433f5a96f-81ac2f943f.zip and /dev/null differ
diff --git a/.yarn/cache/lit-element-npm-2.5.1-7fccfb6b01-68ee1f666e.zip b/.yarn/cache/lit-element-npm-2.5.1-7fccfb6b01-68ee1f666e.zip
deleted file mode 100644
index 204e912fd85..00000000000
Binary files a/.yarn/cache/lit-element-npm-2.5.1-7fccfb6b01-68ee1f666e.zip and /dev/null differ
diff --git a/.yarn/cache/lit-element-npm-3.3.2-4cb4695bd1-61a49b8ca0.zip b/.yarn/cache/lit-element-npm-3.3.2-4cb4695bd1-61a49b8ca0.zip
new file mode 100644
index 00000000000..3468d2e02ab
Binary files /dev/null and b/.yarn/cache/lit-element-npm-3.3.2-4cb4695bd1-61a49b8ca0.zip differ
diff --git a/.yarn/cache/lit-html-npm-1.4.1-4c175266aa-4f997740be.zip b/.yarn/cache/lit-html-npm-1.4.1-4c175266aa-4f997740be.zip
deleted file mode 100644
index 30db4858eb4..00000000000
Binary files a/.yarn/cache/lit-html-npm-1.4.1-4c175266aa-4f997740be.zip and /dev/null differ
diff --git a/.yarn/cache/lit-html-npm-2.7.5-384cb42dc0-3e4b2d0822.zip b/.yarn/cache/lit-html-npm-2.7.5-384cb42dc0-3e4b2d0822.zip
new file mode 100644
index 00000000000..46d124f7d93
Binary files /dev/null and b/.yarn/cache/lit-html-npm-2.7.5-384cb42dc0-3e4b2d0822.zip differ
diff --git a/.yarn/cache/lit-npm-2.7.6-053b00ec99-1bae959a32.zip b/.yarn/cache/lit-npm-2.7.6-053b00ec99-1bae959a32.zip
new file mode 100644
index 00000000000..013e8ce7d53
Binary files /dev/null and b/.yarn/cache/lit-npm-2.7.6-053b00ec99-1bae959a32.zip differ
diff --git a/.yarn/cache/lru-cache-npm-10.0.1-0e1abf4c13-5bb91a97a3.zip b/.yarn/cache/lru-cache-npm-10.0.1-0e1abf4c13-5bb91a97a3.zip
new file mode 100644
index 00000000000..5759347ee25
Binary files /dev/null and b/.yarn/cache/lru-cache-npm-10.0.1-0e1abf4c13-5bb91a97a3.zip differ
diff --git a/.yarn/cache/magic-string-npm-0.30.2-c6ed3befd5-ec7667e92c.zip b/.yarn/cache/magic-string-npm-0.30.2-c6ed3befd5-ec7667e92c.zip
new file mode 100644
index 00000000000..3e687b40aac
Binary files /dev/null and b/.yarn/cache/magic-string-npm-0.30.2-c6ed3befd5-ec7667e92c.zip differ
diff --git a/.yarn/cache/magic-string-npm-0.30.5-dffb7e6a73-c8a6b25f81.zip b/.yarn/cache/magic-string-npm-0.30.5-dffb7e6a73-c8a6b25f81.zip
deleted file mode 100644
index aa92f2c7ac3..00000000000
Binary files a/.yarn/cache/magic-string-npm-0.30.5-dffb7e6a73-c8a6b25f81.zip and /dev/null differ
diff --git a/.yarn/cache/make-fetch-happen-npm-9.1.0-23184ad7f6-a868e74fc2.zip b/.yarn/cache/make-fetch-happen-npm-9.1.0-23184ad7f6-a868e74fc2.zip
deleted file mode 100644
index d247d3bb3fb..00000000000
Binary files a/.yarn/cache/make-fetch-happen-npm-9.1.0-23184ad7f6-a868e74fc2.zip and /dev/null differ
diff --git a/.yarn/cache/map-age-cleaner-npm-0.1.3-fd9e4b4aff-cb2804a5bc.zip b/.yarn/cache/map-age-cleaner-npm-0.1.3-fd9e4b4aff-cb2804a5bc.zip
deleted file mode 100644
index c53957b57a5..00000000000
Binary files a/.yarn/cache/map-age-cleaner-npm-0.1.3-fd9e4b4aff-cb2804a5bc.zip and /dev/null differ
diff --git a/.yarn/cache/mem-npm-8.1.1-4270f09409-5f22117d8a.zip b/.yarn/cache/mem-npm-8.1.1-4270f09409-5f22117d8a.zip
deleted file mode 100644
index 37ad646ef6e..00000000000
Binary files a/.yarn/cache/mem-npm-8.1.1-4270f09409-5f22117d8a.zip and /dev/null differ
diff --git a/.yarn/cache/mimic-fn-npm-3.1.0-12d126ec66-f7b167f911.zip b/.yarn/cache/mimic-fn-npm-3.1.0-12d126ec66-f7b167f911.zip
deleted file mode 100644
index fbbba20e413..00000000000
Binary files a/.yarn/cache/mimic-fn-npm-3.1.0-12d126ec66-f7b167f911.zip and /dev/null differ
diff --git a/.yarn/cache/minimatch-npm-3.0.8-f3deb724b2-6df5373cb1.zip b/.yarn/cache/minimatch-npm-3.0.8-f3deb724b2-6df5373cb1.zip
deleted file mode 100644
index ec0b94c3109..00000000000
Binary files a/.yarn/cache/minimatch-npm-3.0.8-f3deb724b2-6df5373cb1.zip and /dev/null differ
diff --git a/.yarn/cache/minipass-fetch-npm-1.4.1-2d67357feb-4c6f678d2c.zip b/.yarn/cache/minipass-fetch-npm-1.4.1-2d67357feb-4c6f678d2c.zip
deleted file mode 100644
index 57589e99e0c..00000000000
Binary files a/.yarn/cache/minipass-fetch-npm-1.4.1-2d67357feb-4c6f678d2c.zip and /dev/null differ
diff --git a/.yarn/cache/minipass-fetch-npm-3.0.3-2c4966d142-045339fa8f.zip b/.yarn/cache/minipass-fetch-npm-3.0.3-2c4966d142-045339fa8f.zip
new file mode 100644
index 00000000000..10b6a4d5751
Binary files /dev/null and b/.yarn/cache/minipass-fetch-npm-3.0.3-2c4966d142-045339fa8f.zip differ
diff --git a/.yarn/cache/minipass-fetch-npm-3.0.4-200ac7c66d-3edf72b900.zip b/.yarn/cache/minipass-fetch-npm-3.0.4-200ac7c66d-3edf72b900.zip
deleted file mode 100644
index 22ae033dddd..00000000000
Binary files a/.yarn/cache/minipass-fetch-npm-3.0.4-200ac7c66d-3edf72b900.zip and /dev/null differ
diff --git a/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-67235c39d1.zip b/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-67235c39d1.zip
new file mode 100644
index 00000000000..dd650f06e2a
Binary files /dev/null and b/.yarn/cache/nanoid-npm-3.3.6-e6d6ae7e71-67235c39d1.zip differ
diff --git a/.yarn/cache/nanoid-npm-3.3.7-98824ba130-ac1eb60f61.zip b/.yarn/cache/nanoid-npm-3.3.7-98824ba130-ac1eb60f61.zip
deleted file mode 100644
index 2207db73653..00000000000
Binary files a/.yarn/cache/nanoid-npm-3.3.7-98824ba130-ac1eb60f61.zip and /dev/null differ
diff --git a/.yarn/cache/node-fetch-npm-2.6.12-48619ce9d6-370ed4d906.zip b/.yarn/cache/node-fetch-npm-2.6.12-48619ce9d6-370ed4d906.zip
new file mode 100644
index 00000000000..35cf218170d
Binary files /dev/null and b/.yarn/cache/node-fetch-npm-2.6.12-48619ce9d6-370ed4d906.zip differ
diff --git a/.yarn/cache/node-fetch-npm-2.7.0-587d57004e-b24f8a3dc9.zip b/.yarn/cache/node-fetch-npm-2.7.0-587d57004e-b24f8a3dc9.zip
deleted file mode 100644
index 7c9ec083b99..00000000000
Binary files a/.yarn/cache/node-fetch-npm-2.7.0-587d57004e-b24f8a3dc9.zip and /dev/null differ
diff --git a/.yarn/cache/node-gyp-build-npm-4.6.0-5434aac3e5-c8b57abe5e.zip b/.yarn/cache/node-gyp-build-npm-4.6.0-5434aac3e5-c8b57abe5e.zip
new file mode 100644
index 00000000000..e574e10d904
Binary files /dev/null and b/.yarn/cache/node-gyp-build-npm-4.6.0-5434aac3e5-c8b57abe5e.zip differ
diff --git a/.yarn/cache/node-gyp-build-npm-4.6.1-31ee3c90ee-79b9483774.zip b/.yarn/cache/node-gyp-build-npm-4.6.1-31ee3c90ee-79b9483774.zip
deleted file mode 100644
index fed951555d3..00000000000
Binary files a/.yarn/cache/node-gyp-build-npm-4.6.1-31ee3c90ee-79b9483774.zip and /dev/null differ
diff --git a/.yarn/cache/node-gyp-npm-8.4.1-13c90a9c9b-5ac19a7f62.zip b/.yarn/cache/node-gyp-npm-8.4.1-13c90a9c9b-5ac19a7f62.zip
deleted file mode 100644
index 3ec8836d608..00000000000
Binary files a/.yarn/cache/node-gyp-npm-8.4.1-13c90a9c9b-5ac19a7f62.zip and /dev/null differ
diff --git a/.yarn/cache/node-gyp-npm-9.4.0-ebf5f5573e-458317127c.zip b/.yarn/cache/node-gyp-npm-9.4.0-ebf5f5573e-458317127c.zip
new file mode 100644
index 00000000000..1864fc7b7d1
Binary files /dev/null and b/.yarn/cache/node-gyp-npm-9.4.0-ebf5f5573e-458317127c.zip differ
diff --git a/.yarn/cache/node-gyp-npm-9.4.1-15a6f0e8e4-329b109b13.zip b/.yarn/cache/node-gyp-npm-9.4.1-15a6f0e8e4-329b109b13.zip
deleted file mode 100644
index 72c7e87b77f..00000000000
Binary files a/.yarn/cache/node-gyp-npm-9.4.1-15a6f0e8e4-329b109b13.zip and /dev/null differ
diff --git a/.yarn/cache/node-sass-npm-8.0.0-d992352209-9dc04024e7.zip b/.yarn/cache/node-sass-npm-8.0.0-d992352209-9dc04024e7.zip
deleted file mode 100644
index 7294777ea88..00000000000
Binary files a/.yarn/cache/node-sass-npm-8.0.0-d992352209-9dc04024e7.zip and /dev/null differ
diff --git a/.yarn/cache/nopt-npm-5.0.0-304b40fbfe-00f9bb2d16.zip b/.yarn/cache/nopt-npm-5.0.0-304b40fbfe-00f9bb2d16.zip
deleted file mode 100644
index e9176b4aa29..00000000000
Binary files a/.yarn/cache/nopt-npm-5.0.0-304b40fbfe-00f9bb2d16.zip and /dev/null differ
diff --git a/.yarn/cache/npm-install-checks-npm-6.1.1-e05db36ccf-8fb3ed05cf.zip b/.yarn/cache/npm-install-checks-npm-6.1.1-e05db36ccf-8fb3ed05cf.zip
new file mode 100644
index 00000000000..42723c44157
Binary files /dev/null and b/.yarn/cache/npm-install-checks-npm-6.1.1-e05db36ccf-8fb3ed05cf.zip differ
diff --git a/.yarn/cache/npm-install-checks-npm-6.3.0-d093d4e008-6c20dadb87.zip b/.yarn/cache/npm-install-checks-npm-6.3.0-d093d4e008-6c20dadb87.zip
deleted file mode 100644
index 95ac8acffbc..00000000000
Binary files a/.yarn/cache/npm-install-checks-npm-6.3.0-d093d4e008-6c20dadb87.zip and /dev/null differ
diff --git a/.yarn/cache/object-assign-npm-3.0.0-8d79858461-56c66a7731.zip b/.yarn/cache/object-assign-npm-3.0.0-8d79858461-56c66a7731.zip
deleted file mode 100644
index 36aac7453b3..00000000000
Binary files a/.yarn/cache/object-assign-npm-3.0.0-8d79858461-56c66a7731.zip and /dev/null differ
diff --git a/.yarn/cache/object-inspect-npm-1.12.3-1e7d20f5ff-532b0036f0.zip b/.yarn/cache/object-inspect-npm-1.12.3-1e7d20f5ff-532b0036f0.zip
new file mode 100644
index 00000000000..fae851e6bd2
Binary files /dev/null and b/.yarn/cache/object-inspect-npm-1.12.3-1e7d20f5ff-532b0036f0.zip differ
diff --git a/.yarn/cache/object.entries-npm-1.1.6-5f9ba14b46-08a09ff839.zip b/.yarn/cache/object.entries-npm-1.1.6-5f9ba14b46-08a09ff839.zip
new file mode 100644
index 00000000000..ef7ca5e0173
Binary files /dev/null and b/.yarn/cache/object.entries-npm-1.1.6-5f9ba14b46-08a09ff839.zip differ
diff --git a/.yarn/cache/object.entries-npm-1.1.7-f2a7fea503-03f0bd0f23.zip b/.yarn/cache/object.entries-npm-1.1.7-f2a7fea503-03f0bd0f23.zip
deleted file mode 100644
index 0c656b941d3..00000000000
Binary files a/.yarn/cache/object.entries-npm-1.1.7-f2a7fea503-03f0bd0f23.zip and /dev/null differ
diff --git a/.yarn/cache/object.fromentries-npm-2.0.6-424cf4cd3c-e8b813647c.zip b/.yarn/cache/object.fromentries-npm-2.0.6-424cf4cd3c-e8b813647c.zip
new file mode 100644
index 00000000000..417e61a3518
Binary files /dev/null and b/.yarn/cache/object.fromentries-npm-2.0.6-424cf4cd3c-e8b813647c.zip differ
diff --git a/.yarn/cache/object.fromentries-npm-2.0.7-2e38392540-1bfbe42a51.zip b/.yarn/cache/object.fromentries-npm-2.0.7-2e38392540-1bfbe42a51.zip
deleted file mode 100644
index 54aedc088c3..00000000000
Binary files a/.yarn/cache/object.fromentries-npm-2.0.7-2e38392540-1bfbe42a51.zip and /dev/null differ
diff --git a/.yarn/cache/object.groupby-npm-1.0.0-b360bea3aa-8233fa5288.zip b/.yarn/cache/object.groupby-npm-1.0.0-b360bea3aa-8233fa5288.zip
new file mode 100644
index 00000000000..73c3f7b3808
Binary files /dev/null and b/.yarn/cache/object.groupby-npm-1.0.0-b360bea3aa-8233fa5288.zip differ
diff --git a/.yarn/cache/object.groupby-npm-1.0.1-fc268391fe-b7123d9140.zip b/.yarn/cache/object.groupby-npm-1.0.1-fc268391fe-b7123d9140.zip
deleted file mode 100644
index 87592b6fdc1..00000000000
Binary files a/.yarn/cache/object.groupby-npm-1.0.1-fc268391fe-b7123d9140.zip and /dev/null differ
diff --git a/.yarn/cache/object.hasown-npm-1.1.2-db9bbc7f97-94031022a2.zip b/.yarn/cache/object.hasown-npm-1.1.2-db9bbc7f97-94031022a2.zip
new file mode 100644
index 00000000000..7915e81d9bc
Binary files /dev/null and b/.yarn/cache/object.hasown-npm-1.1.2-db9bbc7f97-94031022a2.zip differ
diff --git a/.yarn/cache/object.hasown-npm-1.1.3-84e62d27f5-735679729c.zip b/.yarn/cache/object.hasown-npm-1.1.3-84e62d27f5-735679729c.zip
deleted file mode 100644
index 1c870d89a90..00000000000
Binary files a/.yarn/cache/object.hasown-npm-1.1.3-84e62d27f5-735679729c.zip and /dev/null differ
diff --git a/.yarn/cache/object.values-npm-1.1.6-ab9b67ccd3-adea807c90.zip b/.yarn/cache/object.values-npm-1.1.6-ab9b67ccd3-adea807c90.zip
new file mode 100644
index 00000000000..d379b720987
Binary files /dev/null and b/.yarn/cache/object.values-npm-1.1.6-ab9b67ccd3-adea807c90.zip differ
diff --git a/.yarn/cache/object.values-npm-1.1.7-deae619f88-20ab42c0bb.zip b/.yarn/cache/object.values-npm-1.1.7-deae619f88-20ab42c0bb.zip
deleted file mode 100644
index e8bfded9832..00000000000
Binary files a/.yarn/cache/object.values-npm-1.1.7-deae619f88-20ab42c0bb.zip and /dev/null differ
diff --git a/.yarn/cache/open-npm-6.4.0-d2020c939f-9b1cfda7a6.zip b/.yarn/cache/open-npm-6.4.0-d2020c939f-9b1cfda7a6.zip
deleted file mode 100644
index a11f6b10385..00000000000
Binary files a/.yarn/cache/open-npm-6.4.0-d2020c939f-9b1cfda7a6.zip and /dev/null differ
diff --git a/.yarn/cache/p-defer-npm-1.0.0-4dfd0013f5-1d8fb7138a.zip b/.yarn/cache/p-defer-npm-1.0.0-4dfd0013f5-1d8fb7138a.zip
deleted file mode 100644
index 7f9e9009770..00000000000
Binary files a/.yarn/cache/p-defer-npm-1.0.0-4dfd0013f5-1d8fb7138a.zip and /dev/null differ
diff --git a/.yarn/cache/path-browserify-npm-1.0.1-f975d99a99-7e7368a520.zip b/.yarn/cache/path-browserify-npm-1.0.1-f975d99a99-7e7368a520.zip
deleted file mode 100644
index 8dbe962e3e5..00000000000
Binary files a/.yarn/cache/path-browserify-npm-1.0.1-f975d99a99-7e7368a520.zip and /dev/null differ
diff --git a/.yarn/cache/playwright-core-npm-1.37.0-e7151e9151-7ef5ccfafe.zip b/.yarn/cache/playwright-core-npm-1.37.0-e7151e9151-7ef5ccfafe.zip
new file mode 100644
index 00000000000..a311ac88c33
Binary files /dev/null and b/.yarn/cache/playwright-core-npm-1.37.0-e7151e9151-7ef5ccfafe.zip differ
diff --git a/.yarn/cache/playwright-core-npm-1.39.0-71d19aa951-e4e01ddea0.zip b/.yarn/cache/playwright-core-npm-1.39.0-71d19aa951-e4e01ddea0.zip
deleted file mode 100644
index 5bddcd410e2..00000000000
Binary files a/.yarn/cache/playwright-core-npm-1.39.0-71d19aa951-e4e01ddea0.zip and /dev/null differ
diff --git a/.yarn/cache/playwright-npm-1.37.0-09d766daf6-a2bba34522.zip b/.yarn/cache/playwright-npm-1.37.0-09d766daf6-a2bba34522.zip
new file mode 100644
index 00000000000..9a6cb1e61fc
Binary files /dev/null and b/.yarn/cache/playwright-npm-1.37.0-09d766daf6-a2bba34522.zip differ
diff --git a/.yarn/cache/playwright-npm-1.39.0-0e46dd748d-6f6b2f4381.zip b/.yarn/cache/playwright-npm-1.39.0-0e46dd748d-6f6b2f4381.zip
deleted file mode 100644
index 65cf21eb807..00000000000
Binary files a/.yarn/cache/playwright-npm-1.39.0-0e46dd748d-6f6b2f4381.zip and /dev/null differ
diff --git a/.yarn/cache/postcss-npm-8.4.27-2a9f5f8f40-57143e3c5d.zip b/.yarn/cache/postcss-npm-8.4.27-2a9f5f8f40-57143e3c5d.zip
new file mode 100644
index 00000000000..6002d04aed3
Binary files /dev/null and b/.yarn/cache/postcss-npm-8.4.27-2a9f5f8f40-57143e3c5d.zip differ
diff --git a/.yarn/cache/postcss-npm-8.4.31-385051a82b-1a6653e721.zip b/.yarn/cache/postcss-npm-8.4.31-385051a82b-1a6653e721.zip
deleted file mode 100644
index 7b9d1cbdd86..00000000000
Binary files a/.yarn/cache/postcss-npm-8.4.31-385051a82b-1a6653e721.zip and /dev/null differ
diff --git a/.yarn/cache/preact-render-to-string-npm-5.2.6-5999db0763-356519f764.zip b/.yarn/cache/preact-render-to-string-npm-5.2.6-5999db0763-356519f764.zip
deleted file mode 100644
index 1fede0c3c32..00000000000
Binary files a/.yarn/cache/preact-render-to-string-npm-5.2.6-5999db0763-356519f764.zip and /dev/null differ
diff --git a/.yarn/cache/pretty-error-npm-4.0.0-7cca1fe4ad-0212ad8742.zip b/.yarn/cache/pretty-error-npm-4.0.0-7cca1fe4ad-0212ad8742.zip
deleted file mode 100644
index 1b382ea55ab..00000000000
Binary files a/.yarn/cache/pretty-error-npm-4.0.0-7cca1fe4ad-0212ad8742.zip and /dev/null differ
diff --git a/.yarn/cache/pretty-format-npm-29.6.2-7f39471065-5db1faf525.zip b/.yarn/cache/pretty-format-npm-29.6.2-7f39471065-5db1faf525.zip
new file mode 100644
index 00000000000..a65fccf55dc
Binary files /dev/null and b/.yarn/cache/pretty-format-npm-29.6.2-7f39471065-5db1faf525.zip differ
diff --git a/.yarn/cache/pretty-format-npm-29.7.0-7d330b2ea2-dea96bc83c.zip b/.yarn/cache/pretty-format-npm-29.7.0-7d330b2ea2-dea96bc83c.zip
deleted file mode 100644
index dc231885fcf..00000000000
Binary files a/.yarn/cache/pretty-format-npm-29.7.0-7d330b2ea2-dea96bc83c.zip and /dev/null differ
diff --git a/.yarn/cache/pretty-format-npm-3.8.0-293db331d9-c80009217d.zip b/.yarn/cache/pretty-format-npm-3.8.0-293db331d9-c80009217d.zip
deleted file mode 100644
index 751a5e6dc7b..00000000000
Binary files a/.yarn/cache/pretty-format-npm-3.8.0-293db331d9-c80009217d.zip and /dev/null differ
diff --git a/.yarn/cache/promise.allsettled-npm-1.0.6-1db1334477-74e3871033.zip b/.yarn/cache/promise.allsettled-npm-1.0.6-1db1334477-74e3871033.zip
new file mode 100644
index 00000000000..afc6cdd1b10
Binary files /dev/null and b/.yarn/cache/promise.allsettled-npm-1.0.6-1db1334477-74e3871033.zip differ
diff --git a/.yarn/cache/promise.allsettled-npm-1.0.7-47a67949a8-8d2ddf4955.zip b/.yarn/cache/promise.allsettled-npm-1.0.7-47a67949a8-8d2ddf4955.zip
deleted file mode 100644
index 64b92462943..00000000000
Binary files a/.yarn/cache/promise.allsettled-npm-1.0.7-47a67949a8-8d2ddf4955.zip and /dev/null differ
diff --git a/.yarn/cache/promise.prototype.finally-npm-3.1.4-84533459be-e77cc63398.zip b/.yarn/cache/promise.prototype.finally-npm-3.1.4-84533459be-e77cc63398.zip
new file mode 100644
index 00000000000..bb12ce9fbae
Binary files /dev/null and b/.yarn/cache/promise.prototype.finally-npm-3.1.4-84533459be-e77cc63398.zip differ
diff --git a/.yarn/cache/promise.prototype.finally-npm-3.1.7-15d96f410d-2f4391ba14.zip b/.yarn/cache/promise.prototype.finally-npm-3.1.7-15d96f410d-2f4391ba14.zip
deleted file mode 100644
index ff8b63dc8f3..00000000000
Binary files a/.yarn/cache/promise.prototype.finally-npm-3.1.7-15d96f410d-2f4391ba14.zip and /dev/null differ
diff --git a/.yarn/cache/prop-types-exact-npm-1.2.0-4664209648-61ab29c0f2.zip b/.yarn/cache/prop-types-exact-npm-1.2.0-4664209648-61ab29c0f2.zip
deleted file mode 100644
index 227c1e93ea6..00000000000
Binary files a/.yarn/cache/prop-types-exact-npm-1.2.0-4664209648-61ab29c0f2.zip and /dev/null differ
diff --git a/.yarn/cache/punycode-npm-2.3.0-df4bdce06b-d4e7fbb96f.zip b/.yarn/cache/punycode-npm-2.3.0-df4bdce06b-d4e7fbb96f.zip
new file mode 100644
index 00000000000..9fa5c4b3ab9
Binary files /dev/null and b/.yarn/cache/punycode-npm-2.3.0-df4bdce06b-d4e7fbb96f.zip differ
diff --git a/.yarn/cache/punycode-npm-2.3.1-97543c420d-febdc4362b.zip b/.yarn/cache/punycode-npm-2.3.1-97543c420d-febdc4362b.zip
deleted file mode 100644
index 399baa6756e..00000000000
Binary files a/.yarn/cache/punycode-npm-2.3.1-97543c420d-febdc4362b.zip and /dev/null differ
diff --git a/.yarn/cache/react-autosuggest-npm-10.1.0-4b1df27cc2-17b2121d56.zip b/.yarn/cache/react-autosuggest-npm-10.1.0-4b1df27cc2-17b2121d56.zip
deleted file mode 100644
index 5df9608b147..00000000000
Binary files a/.yarn/cache/react-autosuggest-npm-10.1.0-4b1df27cc2-17b2121d56.zip and /dev/null differ
diff --git a/.yarn/cache/react-focus-lock-npm-2.9.5-1f6a825257-9af42872d7.zip b/.yarn/cache/react-focus-lock-npm-2.9.5-1f6a825257-9af42872d7.zip
new file mode 100644
index 00000000000..76be8955ea0
Binary files /dev/null and b/.yarn/cache/react-focus-lock-npm-2.9.5-1f6a825257-9af42872d7.zip differ
diff --git a/.yarn/cache/react-focus-lock-npm-2.9.6-e103d42f31-6aacb9779a.zip b/.yarn/cache/react-focus-lock-npm-2.9.6-e103d42f31-6aacb9779a.zip
deleted file mode 100644
index 9fdeeda119f..00000000000
Binary files a/.yarn/cache/react-focus-lock-npm-2.9.6-e103d42f31-6aacb9779a.zip and /dev/null differ
diff --git a/.yarn/cache/react-shallow-renderer-npm-16.15.0-cf95219885-06457fe5bc.zip b/.yarn/cache/react-shallow-renderer-npm-16.15.0-cf95219885-06457fe5bc.zip
deleted file mode 100644
index 19e9b10d4fe..00000000000
Binary files a/.yarn/cache/react-shallow-renderer-npm-16.15.0-cf95219885-06457fe5bc.zip and /dev/null differ
diff --git a/.yarn/cache/react-test-renderer-npm-16.14.0-25f352205f-1a064a65c6.zip b/.yarn/cache/react-test-renderer-npm-16.14.0-25f352205f-1a064a65c6.zip
deleted file mode 100644
index 28ad61573e8..00000000000
Binary files a/.yarn/cache/react-test-renderer-npm-16.14.0-25f352205f-1a064a65c6.zip and /dev/null differ
diff --git a/.yarn/cache/react-test-renderer-npm-17.0.2-1086717127-8137f06188.zip b/.yarn/cache/react-test-renderer-npm-17.0.2-1086717127-8137f06188.zip
deleted file mode 100644
index 73203917a17..00000000000
Binary files a/.yarn/cache/react-test-renderer-npm-17.0.2-1086717127-8137f06188.zip and /dev/null differ
diff --git a/.yarn/cache/react-themeable-npm-1.1.0-dd77b4dfda-495a9262a7.zip b/.yarn/cache/react-themeable-npm-1.1.0-dd77b4dfda-495a9262a7.zip
deleted file mode 100644
index 48a39ef6dce..00000000000
Binary files a/.yarn/cache/react-themeable-npm-1.1.0-dd77b4dfda-495a9262a7.zip and /dev/null differ
diff --git a/.yarn/cache/reflect.getprototypeof-npm-1.0.4-fa901640c3-52ff881f62.zip b/.yarn/cache/reflect.getprototypeof-npm-1.0.4-fa901640c3-52ff881f62.zip
deleted file mode 100644
index d5772acfd33..00000000000
Binary files a/.yarn/cache/reflect.getprototypeof-npm-1.0.4-fa901640c3-52ff881f62.zip and /dev/null differ
diff --git a/.yarn/cache/reflect.ownkeys-npm-0.2.0-e3d8f6e4f0-9530b16656.zip b/.yarn/cache/reflect.ownkeys-npm-0.2.0-e3d8f6e4f0-9530b16656.zip
deleted file mode 100644
index 0d0a07bf117..00000000000
Binary files a/.yarn/cache/reflect.ownkeys-npm-0.2.0-e3d8f6e4f0-9530b16656.zip and /dev/null differ
diff --git a/.yarn/cache/regenerate-unicode-properties-npm-10.1.0-f0d5adf0df-25b2686598.zip b/.yarn/cache/regenerate-unicode-properties-npm-10.1.0-f0d5adf0df-25b2686598.zip
new file mode 100644
index 00000000000..d15495405a9
Binary files /dev/null and b/.yarn/cache/regenerate-unicode-properties-npm-10.1.0-f0d5adf0df-25b2686598.zip differ
diff --git a/.yarn/cache/regenerate-unicode-properties-npm-10.1.1-07b52ba05f-b855152efd.zip b/.yarn/cache/regenerate-unicode-properties-npm-10.1.1-07b52ba05f-b855152efd.zip
deleted file mode 100644
index d1c960e9111..00000000000
Binary files a/.yarn/cache/regenerate-unicode-properties-npm-10.1.1-07b52ba05f-b855152efd.zip and /dev/null differ
diff --git a/.yarn/cache/regexp.prototype.flags-npm-1.5.0-5623b9e07f-c8229ec3f5.zip b/.yarn/cache/regexp.prototype.flags-npm-1.5.0-5623b9e07f-c8229ec3f5.zip
new file mode 100644
index 00000000000..9f7d06c1766
Binary files /dev/null and b/.yarn/cache/regexp.prototype.flags-npm-1.5.0-5623b9e07f-c8229ec3f5.zip differ
diff --git a/.yarn/cache/remove-accents-npm-0.4.4-50ef637041-13d1b4086d.zip b/.yarn/cache/remove-accents-npm-0.4.4-50ef637041-13d1b4086d.zip
deleted file mode 100644
index 3d4fd05b6fe..00000000000
Binary files a/.yarn/cache/remove-accents-npm-0.4.4-50ef637041-13d1b4086d.zip and /dev/null differ
diff --git a/.yarn/cache/renderkid-npm-3.0.0-acb028643f-434bd56d99.zip b/.yarn/cache/renderkid-npm-3.0.0-acb028643f-434bd56d99.zip
deleted file mode 100644
index 072b6b6d8a6..00000000000
Binary files a/.yarn/cache/renderkid-npm-3.0.0-acb028643f-434bd56d99.zip and /dev/null differ
diff --git a/.yarn/cache/requestanimationframe-npm-0.0.23-7adbd1079a-6d696bb487.zip b/.yarn/cache/requestanimationframe-npm-0.0.23-7adbd1079a-6d696bb487.zip
deleted file mode 100644
index 9611d14d042..00000000000
Binary files a/.yarn/cache/requestanimationframe-npm-0.0.23-7adbd1079a-6d696bb487.zip and /dev/null differ
diff --git a/.yarn/cache/require-context.macro-npm-1.2.2-2c806c947b-0dcb2e59a2.zip b/.yarn/cache/require-context.macro-npm-1.2.2-2c806c947b-0dcb2e59a2.zip
deleted file mode 100644
index ac85d68b666..00000000000
Binary files a/.yarn/cache/require-context.macro-npm-1.2.2-2c806c947b-0dcb2e59a2.zip and /dev/null differ
diff --git a/.yarn/cache/resolve-npm-1.22.4-faa4f32bdd-5634f87e72.zip b/.yarn/cache/resolve-npm-1.22.4-faa4f32bdd-5634f87e72.zip
new file mode 100644
index 00000000000..97764b2858f
Binary files /dev/null and b/.yarn/cache/resolve-npm-1.22.4-faa4f32bdd-5634f87e72.zip differ
diff --git a/.yarn/cache/resolve-npm-2.0.0-next.4-3d0bd8621e-20d5293f50.zip b/.yarn/cache/resolve-npm-2.0.0-next.4-3d0bd8621e-20d5293f50.zip
new file mode 100644
index 00000000000..deec16c5d96
Binary files /dev/null and b/.yarn/cache/resolve-npm-2.0.0-next.4-3d0bd8621e-20d5293f50.zip differ
diff --git a/.yarn/cache/resolve-npm-2.0.0-next.5-0e83bf26ee-2d6fd28699.zip b/.yarn/cache/resolve-npm-2.0.0-next.5-0e83bf26ee-2d6fd28699.zip
deleted file mode 100644
index 97bc54c8dec..00000000000
Binary files a/.yarn/cache/resolve-npm-2.0.0-next.5-0e83bf26ee-2d6fd28699.zip and /dev/null differ
diff --git a/.yarn/cache/resolve-patch-95f8f5d302-05fa778de9.zip b/.yarn/cache/resolve-patch-95f8f5d302-05fa778de9.zip
deleted file mode 100644
index bedfa85b088..00000000000
Binary files a/.yarn/cache/resolve-patch-95f8f5d302-05fa778de9.zip and /dev/null differ
diff --git a/.yarn/cache/resolve-patch-aa9ecc3603-27bff19d82.zip b/.yarn/cache/resolve-patch-aa9ecc3603-27bff19d82.zip
new file mode 100644
index 00000000000..2ae03d6f125
Binary files /dev/null and b/.yarn/cache/resolve-patch-aa9ecc3603-27bff19d82.zip differ
diff --git a/.yarn/cache/resolve-patch-c2e812b486-13262490c7.zip b/.yarn/cache/resolve-patch-c2e812b486-13262490c7.zip
new file mode 100644
index 00000000000..2dc07ecfdac
Binary files /dev/null and b/.yarn/cache/resolve-patch-c2e812b486-13262490c7.zip differ
diff --git a/.yarn/cache/roarr-npm-7.15.1-74a99b924b-5f73043b49.zip b/.yarn/cache/roarr-npm-7.15.1-74a99b924b-5f73043b49.zip
new file mode 100644
index 00000000000..8ca712fd1e3
Binary files /dev/null and b/.yarn/cache/roarr-npm-7.15.1-74a99b924b-5f73043b49.zip differ
diff --git a/.yarn/cache/roarr-npm-7.18.3-286e902ef8-88a75024c9.zip b/.yarn/cache/roarr-npm-7.18.3-286e902ef8-88a75024c9.zip
deleted file mode 100644
index ad4de15745d..00000000000
Binary files a/.yarn/cache/roarr-npm-7.18.3-286e902ef8-88a75024c9.zip and /dev/null differ
diff --git a/.yarn/cache/rollup-plugin-scss-npm-3.0.0-d236cf8daf-e7e603d050.zip b/.yarn/cache/rollup-plugin-scss-npm-3.0.0-d236cf8daf-e7e603d050.zip
deleted file mode 100644
index 9be2d914e67..00000000000
Binary files a/.yarn/cache/rollup-plugin-scss-npm-3.0.0-d236cf8daf-e7e603d050.zip and /dev/null differ
diff --git a/.yarn/cache/rollup-plugin-visualizer-npm-2.7.2-5974c9a25f-e1382954da.zip b/.yarn/cache/rollup-plugin-visualizer-npm-2.7.2-5974c9a25f-e1382954da.zip
deleted file mode 100644
index 225b9b5e14e..00000000000
Binary files a/.yarn/cache/rollup-plugin-visualizer-npm-2.7.2-5974c9a25f-e1382954da.zip and /dev/null differ
diff --git a/.yarn/cache/rollup-pluginutils-npm-2.8.2-f554dd6ac5-f3dc20a873.zip b/.yarn/cache/rollup-pluginutils-npm-2.8.2-f554dd6ac5-f3dc20a873.zip
deleted file mode 100644
index 1987ed35d77..00000000000
Binary files a/.yarn/cache/rollup-pluginutils-npm-2.8.2-f554dd6ac5-f3dc20a873.zip and /dev/null differ
diff --git a/.yarn/cache/sass-graph-npm-4.0.1-62c3ce0d99-896f99253b.zip b/.yarn/cache/sass-graph-npm-4.0.1-62c3ce0d99-896f99253b.zip
deleted file mode 100644
index e10a3a75e32..00000000000
Binary files a/.yarn/cache/sass-graph-npm-4.0.1-62c3ce0d99-896f99253b.zip and /dev/null differ
diff --git a/.yarn/cache/sass-loader-npm-13.3.2-82bfeae746-3486134c88.zip b/.yarn/cache/sass-loader-npm-13.3.2-82bfeae746-3486134c88.zip
new file mode 100644
index 00000000000..dae53167a4f
Binary files /dev/null and b/.yarn/cache/sass-loader-npm-13.3.2-82bfeae746-3486134c88.zip differ
diff --git a/.yarn/cache/sass-npm-1.64.1-d9daafa43e-77da9edc7b.zip b/.yarn/cache/sass-npm-1.64.1-d9daafa43e-77da9edc7b.zip
new file mode 100644
index 00000000000..bbb2b1ab138
Binary files /dev/null and b/.yarn/cache/sass-npm-1.64.1-d9daafa43e-77da9edc7b.zip differ
diff --git a/.yarn/cache/scss-tokenizer-npm-0.4.3-f6735ed4f7-d7f9eedaa4.zip b/.yarn/cache/scss-tokenizer-npm-0.4.3-f6735ed4f7-d7f9eedaa4.zip
deleted file mode 100644
index 536aca41f45..00000000000
Binary files a/.yarn/cache/scss-tokenizer-npm-0.4.3-f6735ed4f7-d7f9eedaa4.zip and /dev/null differ
diff --git a/.yarn/cache/section-iterator-npm-2.0.0-a578270c9c-f82f244f3b.zip b/.yarn/cache/section-iterator-npm-2.0.0-a578270c9c-f82f244f3b.zip
deleted file mode 100644
index ae2d5280a9e..00000000000
Binary files a/.yarn/cache/section-iterator-npm-2.0.0-a578270c9c-f82f244f3b.zip and /dev/null differ
diff --git a/.yarn/cache/selfsigned-npm-2.1.1-311d9b0b6d-6005206e0d.zip b/.yarn/cache/selfsigned-npm-2.1.1-311d9b0b6d-6005206e0d.zip
new file mode 100644
index 00000000000..5a18b17ec95
Binary files /dev/null and b/.yarn/cache/selfsigned-npm-2.1.1-311d9b0b6d-6005206e0d.zip differ
diff --git a/.yarn/cache/selfsigned-npm-2.4.1-1ca1b883c5-52536623f1.zip b/.yarn/cache/selfsigned-npm-2.4.1-1ca1b883c5-52536623f1.zip
deleted file mode 100644
index 5aa6a87fe7c..00000000000
Binary files a/.yarn/cache/selfsigned-npm-2.4.1-1ca1b883c5-52536623f1.zip and /dev/null differ
diff --git a/.yarn/cache/semver-npm-7.3.4-4c3baf0ead-64fb7172e3.zip b/.yarn/cache/semver-npm-7.3.4-4c3baf0ead-64fb7172e3.zip
new file mode 100644
index 00000000000..a419fccb541
Binary files /dev/null and b/.yarn/cache/semver-npm-7.3.4-4c3baf0ead-64fb7172e3.zip differ
diff --git a/.yarn/cache/shallow-equal-npm-1.2.1-518a76643b-4f1645cc51.zip b/.yarn/cache/shallow-equal-npm-1.2.1-518a76643b-4f1645cc51.zip
deleted file mode 100644
index 55fa732e525..00000000000
Binary files a/.yarn/cache/shallow-equal-npm-1.2.1-518a76643b-4f1645cc51.zip and /dev/null differ
diff --git a/.yarn/cache/sigstore-npm-1.8.0-c7dd60d00a-4e42c4e8c2.zip b/.yarn/cache/sigstore-npm-1.8.0-c7dd60d00a-4e42c4e8c2.zip
new file mode 100644
index 00000000000..0d94da9e5d9
Binary files /dev/null and b/.yarn/cache/sigstore-npm-1.8.0-c7dd60d00a-4e42c4e8c2.zip differ
diff --git a/.yarn/cache/sigstore-npm-1.9.0-bf939b66bb-7ff59f6bbc.zip b/.yarn/cache/sigstore-npm-1.9.0-bf939b66bb-7ff59f6bbc.zip
deleted file mode 100644
index 66921eba532..00000000000
Binary files a/.yarn/cache/sigstore-npm-1.9.0-bf939b66bb-7ff59f6bbc.zip and /dev/null differ
diff --git a/.yarn/cache/smob-npm-1.4.0-2bf978343e-5f3499eb52.zip b/.yarn/cache/smob-npm-1.4.0-2bf978343e-5f3499eb52.zip
new file mode 100644
index 00000000000..777a404fa6d
Binary files /dev/null and b/.yarn/cache/smob-npm-1.4.0-2bf978343e-5f3499eb52.zip differ
diff --git a/.yarn/cache/smob-npm-1.4.1-fb67ffe15b-bc6ffcb9a1.zip b/.yarn/cache/smob-npm-1.4.1-fb67ffe15b-bc6ffcb9a1.zip
deleted file mode 100644
index acda723bdec..00000000000
Binary files a/.yarn/cache/smob-npm-1.4.1-fb67ffe15b-bc6ffcb9a1.zip and /dev/null differ
diff --git a/.yarn/cache/socks-proxy-agent-npm-6.2.1-42b7f43b1d-554749ba3b.zip b/.yarn/cache/socks-proxy-agent-npm-6.2.1-42b7f43b1d-554749ba3b.zip
deleted file mode 100644
index b99b22e741b..00000000000
Binary files a/.yarn/cache/socks-proxy-agent-npm-6.2.1-42b7f43b1d-554749ba3b.zip and /dev/null differ
diff --git a/.yarn/cache/spdx-license-ids-npm-3.0.13-928dd45e3f-6328c516e9.zip b/.yarn/cache/spdx-license-ids-npm-3.0.13-928dd45e3f-6328c516e9.zip
new file mode 100644
index 00000000000..82d3f0f7f91
Binary files /dev/null and b/.yarn/cache/spdx-license-ids-npm-3.0.13-928dd45e3f-6328c516e9.zip differ
diff --git a/.yarn/cache/spdx-license-ids-npm-3.0.16-354ed86dd0-6425c54132.zip b/.yarn/cache/spdx-license-ids-npm-3.0.16-354ed86dd0-6425c54132.zip
deleted file mode 100644
index 9515416742b..00000000000
Binary files a/.yarn/cache/spdx-license-ids-npm-3.0.16-354ed86dd0-6425c54132.zip and /dev/null differ
diff --git a/.yarn/cache/sshpk-npm-1.17.0-95f17f597f-668c2a279a.zip b/.yarn/cache/sshpk-npm-1.17.0-95f17f597f-668c2a279a.zip
new file mode 100644
index 00000000000..ae4b7b441cb
Binary files /dev/null and b/.yarn/cache/sshpk-npm-1.17.0-95f17f597f-668c2a279a.zip differ
diff --git a/.yarn/cache/sshpk-npm-1.18.0-e75427668c-858339d43e.zip b/.yarn/cache/sshpk-npm-1.18.0-e75427668c-858339d43e.zip
deleted file mode 100644
index f26f9deded1..00000000000
Binary files a/.yarn/cache/sshpk-npm-1.18.0-e75427668c-858339d43e.zip and /dev/null differ
diff --git a/.yarn/cache/ssri-npm-10.0.4-f583dafaf3-3f3dc4a0bb.zip b/.yarn/cache/ssri-npm-10.0.4-f583dafaf3-3f3dc4a0bb.zip
new file mode 100644
index 00000000000..6aa03462827
Binary files /dev/null and b/.yarn/cache/ssri-npm-10.0.4-f583dafaf3-3f3dc4a0bb.zip differ
diff --git a/.yarn/cache/ssri-npm-10.0.5-1a7557d04d-453f9a1c24.zip b/.yarn/cache/ssri-npm-10.0.5-1a7557d04d-453f9a1c24.zip
deleted file mode 100644
index e300bb6d37d..00000000000
Binary files a/.yarn/cache/ssri-npm-10.0.5-1a7557d04d-453f9a1c24.zip and /dev/null differ
diff --git a/.yarn/cache/stdout-stream-npm-1.4.1-0ab6760730-205bee8c3b.zip b/.yarn/cache/stdout-stream-npm-1.4.1-0ab6760730-205bee8c3b.zip
deleted file mode 100644
index f348b17eb8a..00000000000
Binary files a/.yarn/cache/stdout-stream-npm-1.4.1-0ab6760730-205bee8c3b.zip and /dev/null differ
diff --git a/.yarn/cache/string.prototype.matchall-npm-4.0.10-197e4b9dad-0f7a1a7f91.zip b/.yarn/cache/string.prototype.matchall-npm-4.0.10-197e4b9dad-0f7a1a7f91.zip
deleted file mode 100644
index ebb7a5ac5eb..00000000000
Binary files a/.yarn/cache/string.prototype.matchall-npm-4.0.10-197e4b9dad-0f7a1a7f91.zip and /dev/null differ
diff --git a/.yarn/cache/string.prototype.matchall-npm-4.0.8-1feb1531b6-9de2e9e333.zip b/.yarn/cache/string.prototype.matchall-npm-4.0.8-1feb1531b6-9de2e9e333.zip
new file mode 100644
index 00000000000..2a4725f30e7
Binary files /dev/null and b/.yarn/cache/string.prototype.matchall-npm-4.0.8-1feb1531b6-9de2e9e333.zip differ
diff --git a/.yarn/cache/string.prototype.padend-npm-3.1.4-0b31461a40-0625316ab6.zip b/.yarn/cache/string.prototype.padend-npm-3.1.4-0b31461a40-0625316ab6.zip
new file mode 100644
index 00000000000..91fc90d944a
Binary files /dev/null and b/.yarn/cache/string.prototype.padend-npm-3.1.4-0b31461a40-0625316ab6.zip differ
diff --git a/.yarn/cache/string.prototype.padend-npm-3.1.5-b6432b91f7-03ea16c8c3.zip b/.yarn/cache/string.prototype.padend-npm-3.1.5-b6432b91f7-03ea16c8c3.zip
deleted file mode 100644
index 3fd914acda7..00000000000
Binary files a/.yarn/cache/string.prototype.padend-npm-3.1.5-b6432b91f7-03ea16c8c3.zip and /dev/null differ
diff --git a/.yarn/cache/string.prototype.padstart-npm-3.1.4-9fba6fcca5-9abc455bda.zip b/.yarn/cache/string.prototype.padstart-npm-3.1.4-9fba6fcca5-9abc455bda.zip
new file mode 100644
index 00000000000..8a04f0061ca
Binary files /dev/null and b/.yarn/cache/string.prototype.padstart-npm-3.1.4-9fba6fcca5-9abc455bda.zip differ
diff --git a/.yarn/cache/string.prototype.padstart-npm-3.1.5-91ac396333-54f2b4bdcc.zip b/.yarn/cache/string.prototype.padstart-npm-3.1.5-91ac396333-54f2b4bdcc.zip
deleted file mode 100644
index c509e423758..00000000000
Binary files a/.yarn/cache/string.prototype.padstart-npm-3.1.5-91ac396333-54f2b4bdcc.zip and /dev/null differ
diff --git a/.yarn/cache/string.prototype.trim-npm-1.2.7-3fbaf3b9d2-a1b795bdb4.zip b/.yarn/cache/string.prototype.trim-npm-1.2.7-3fbaf3b9d2-a1b795bdb4.zip
new file mode 100644
index 00000000000..843c03ebe9d
Binary files /dev/null and b/.yarn/cache/string.prototype.trim-npm-1.2.7-3fbaf3b9d2-a1b795bdb4.zip differ
diff --git a/.yarn/cache/string.prototype.trimend-npm-1.0.6-304246ecc1-3893db9267.zip b/.yarn/cache/string.prototype.trimend-npm-1.0.6-304246ecc1-3893db9267.zip
new file mode 100644
index 00000000000..c8b07fbc771
Binary files /dev/null and b/.yarn/cache/string.prototype.trimend-npm-1.0.6-304246ecc1-3893db9267.zip differ
diff --git a/.yarn/cache/string.prototype.trimstart-npm-1.0.6-0926caea6c-05e2cd06fa.zip b/.yarn/cache/string.prototype.trimstart-npm-1.0.6-0926caea6c-05e2cd06fa.zip
new file mode 100644
index 00000000000..0fb7c079b82
Binary files /dev/null and b/.yarn/cache/string.prototype.trimstart-npm-1.0.6-0926caea6c-05e2cd06fa.zip differ
diff --git a/.yarn/cache/svgo-npm-0.7.2-07c5b8f9df-5879b43120.zip b/.yarn/cache/svgo-npm-0.7.2-07c5b8f9df-5879b43120.zip
deleted file mode 100644
index 7247a2d2bc1..00000000000
Binary files a/.yarn/cache/svgo-npm-0.7.2-07c5b8f9df-5879b43120.zip and /dev/null differ
diff --git a/.yarn/cache/tar-npm-6.1.15-44c3e71720-4848b92da8.zip b/.yarn/cache/tar-npm-6.1.15-44c3e71720-4848b92da8.zip
new file mode 100644
index 00000000000..25d3eb07d62
Binary files /dev/null and b/.yarn/cache/tar-npm-6.1.15-44c3e71720-4848b92da8.zip differ
diff --git a/.yarn/cache/tar-npm-6.2.0-3eb25205a7-2042bbb148.zip b/.yarn/cache/tar-npm-6.2.0-3eb25205a7-2042bbb148.zip
deleted file mode 100644
index 194ce125358..00000000000
Binary files a/.yarn/cache/tar-npm-6.2.0-3eb25205a7-2042bbb148.zip and /dev/null differ
diff --git a/.yarn/cache/terser-npm-5.19.2-91391d2f00-da441c9e0e.zip b/.yarn/cache/terser-npm-5.19.2-91391d2f00-da441c9e0e.zip
new file mode 100644
index 00000000000..d36ffb1e138
Binary files /dev/null and b/.yarn/cache/terser-npm-5.19.2-91391d2f00-da441c9e0e.zip differ
diff --git a/.yarn/cache/terser-npm-5.24.0-0761eb3a43-bd7ba6bfef.zip b/.yarn/cache/terser-npm-5.24.0-0761eb3a43-bd7ba6bfef.zip
deleted file mode 100644
index 163a402980b..00000000000
Binary files a/.yarn/cache/terser-npm-5.24.0-0761eb3a43-bd7ba6bfef.zip and /dev/null differ
diff --git a/.yarn/cache/traverse-npm-0.6.6-584cfa4b5f-8c300c9d15.zip b/.yarn/cache/traverse-npm-0.6.6-584cfa4b5f-8c300c9d15.zip
deleted file mode 100644
index 0efaea4fbd7..00000000000
Binary files a/.yarn/cache/traverse-npm-0.6.6-584cfa4b5f-8c300c9d15.zip and /dev/null differ
diff --git a/.yarn/cache/true-case-path-npm-2.2.1-0454edfb3a-8c6ddd8dab.zip b/.yarn/cache/true-case-path-npm-2.2.1-0454edfb3a-8c6ddd8dab.zip
deleted file mode 100644
index cb06e4ee986..00000000000
Binary files a/.yarn/cache/true-case-path-npm-2.2.1-0454edfb3a-8c6ddd8dab.zip and /dev/null differ
diff --git a/.yarn/cache/tslib-npm-2.6.1-de28eba753-5cf1aa7ea4.zip b/.yarn/cache/tslib-npm-2.6.1-de28eba753-5cf1aa7ea4.zip
new file mode 100644
index 00000000000..5bba82da95f
Binary files /dev/null and b/.yarn/cache/tslib-npm-2.6.1-de28eba753-5cf1aa7ea4.zip differ
diff --git a/.yarn/cache/ua-parser-js-npm-0.7.35-86878e42a4-b6e99dc175.zip b/.yarn/cache/ua-parser-js-npm-0.7.35-86878e42a4-b6e99dc175.zip
new file mode 100644
index 00000000000..0870f843438
Binary files /dev/null and b/.yarn/cache/ua-parser-js-npm-0.7.35-86878e42a4-b6e99dc175.zip differ
diff --git a/.yarn/cache/ua-parser-js-npm-0.7.37-caddca0606-a50e8f7ee5.zip b/.yarn/cache/ua-parser-js-npm-0.7.37-caddca0606-a50e8f7ee5.zip
deleted file mode 100644
index 643e1945ebb..00000000000
Binary files a/.yarn/cache/ua-parser-js-npm-0.7.37-caddca0606-a50e8f7ee5.zip and /dev/null differ
diff --git a/.yarn/cache/undici-npm-5.27.2-141c109c0a-2bf96b102f.zip b/.yarn/cache/undici-npm-5.27.2-141c109c0a-2bf96b102f.zip
deleted file mode 100644
index ea27b9cf238..00000000000
Binary files a/.yarn/cache/undici-npm-5.27.2-141c109c0a-2bf96b102f.zip and /dev/null differ
diff --git a/.yarn/cache/undici-types-npm-5.26.5-de4f7c7bb9-0097779d94.zip b/.yarn/cache/undici-types-npm-5.26.5-de4f7c7bb9-0097779d94.zip
deleted file mode 100644
index 194c916e9f0..00000000000
Binary files a/.yarn/cache/undici-types-npm-5.26.5-de4f7c7bb9-0097779d94.zip and /dev/null differ
diff --git a/.yarn/cache/universal-user-agent-npm-6.0.0-b148fb997a-5092bbc80d.zip b/.yarn/cache/universal-user-agent-npm-6.0.0-b148fb997a-5092bbc80d.zip
new file mode 100644
index 00000000000..8a41a76f877
Binary files /dev/null and b/.yarn/cache/universal-user-agent-npm-6.0.0-b148fb997a-5092bbc80d.zip differ
diff --git a/.yarn/cache/universal-user-agent-npm-6.0.1-0388aac597-fdc8e1ae48.zip b/.yarn/cache/universal-user-agent-npm-6.0.1-0388aac597-fdc8e1ae48.zip
deleted file mode 100644
index 363fb28542a..00000000000
Binary files a/.yarn/cache/universal-user-agent-npm-6.0.1-0388aac597-fdc8e1ae48.zip and /dev/null differ
diff --git a/.yarn/cache/universalify-npm-2.0.0-03b8b418a8-2406a4edf4.zip b/.yarn/cache/universalify-npm-2.0.0-03b8b418a8-2406a4edf4.zip
new file mode 100644
index 00000000000..fa6b36b077a
Binary files /dev/null and b/.yarn/cache/universalify-npm-2.0.0-03b8b418a8-2406a4edf4.zip differ
diff --git a/.yarn/cache/universalify-npm-2.0.1-040ba5a21e-ecd8469fe0.zip b/.yarn/cache/universalify-npm-2.0.1-040ba5a21e-ecd8469fe0.zip
deleted file mode 100644
index 510873c2656..00000000000
Binary files a/.yarn/cache/universalify-npm-2.0.1-040ba5a21e-ecd8469fe0.zip and /dev/null differ
diff --git a/.yarn/cache/url-npm-0.11.1-797427bc52-27131c0e3f.zip b/.yarn/cache/url-npm-0.11.1-797427bc52-27131c0e3f.zip
new file mode 100644
index 00000000000..a69a593765c
Binary files /dev/null and b/.yarn/cache/url-npm-0.11.1-797427bc52-27131c0e3f.zip differ
diff --git a/.yarn/cache/url-npm-0.11.3-d3652df78a-a3a5ba64d8.zip b/.yarn/cache/url-npm-0.11.3-d3652df78a-a3a5ba64d8.zip
deleted file mode 100644
index 3ce9f7ee7df..00000000000
Binary files a/.yarn/cache/url-npm-0.11.3-d3652df78a-a3a5ba64d8.zip and /dev/null differ
diff --git a/.yarn/cache/util-npm-0.10.3-f43de5ccbb-648120d93d.zip b/.yarn/cache/util-npm-0.10.3-f43de5ccbb-648120d93d.zip
new file mode 100644
index 00000000000..4b3755e4876
Binary files /dev/null and b/.yarn/cache/util-npm-0.10.3-f43de5ccbb-648120d93d.zip differ
diff --git a/.yarn/cache/v8-to-istanbul-npm-9.1.0-04cd324682-95811ff2f1.zip b/.yarn/cache/v8-to-istanbul-npm-9.1.0-04cd324682-95811ff2f1.zip
new file mode 100644
index 00000000000..4c9898ec94c
Binary files /dev/null and b/.yarn/cache/v8-to-istanbul-npm-9.1.0-04cd324682-95811ff2f1.zip differ
diff --git a/.yarn/cache/v8-to-istanbul-npm-9.1.3-34175d6fb6-d6ce9f6d97.zip b/.yarn/cache/v8-to-istanbul-npm-9.1.3-34175d6fb6-d6ce9f6d97.zip
deleted file mode 100644
index 51cfc0413ec..00000000000
Binary files a/.yarn/cache/v8-to-istanbul-npm-9.1.3-34175d6fb6-d6ce9f6d97.zip and /dev/null differ
diff --git a/.yarn/cache/webpack-dev-middleware-npm-4.3.0-d507184f74-5ec29f66a8.zip b/.yarn/cache/webpack-dev-middleware-npm-4.3.0-d507184f74-5ec29f66a8.zip
deleted file mode 100644
index 0b87474cf3d..00000000000
Binary files a/.yarn/cache/webpack-dev-middleware-npm-4.3.0-d507184f74-5ec29f66a8.zip and /dev/null differ
diff --git a/.yarn/cache/webpack-npm-4.46.0-a8158cfa7f-a4193e1086.zip b/.yarn/cache/webpack-npm-4.46.0-a8158cfa7f-a4193e1086.zip
new file mode 100644
index 00000000000..6b86a233b74
Binary files /dev/null and b/.yarn/cache/webpack-npm-4.46.0-a8158cfa7f-a4193e1086.zip differ
diff --git a/.yarn/cache/webpack-npm-4.47.0-42e477a08c-d5763ee8d6.zip b/.yarn/cache/webpack-npm-4.47.0-42e477a08c-d5763ee8d6.zip
deleted file mode 100644
index 3b686f8e6f4..00000000000
Binary files a/.yarn/cache/webpack-npm-4.47.0-42e477a08c-d5763ee8d6.zip and /dev/null differ
diff --git a/.yarn/cache/webpack-virtual-modules-npm-0.4.6-6d318db3ca-b867f62197.zip b/.yarn/cache/webpack-virtual-modules-npm-0.4.6-6d318db3ca-b867f62197.zip
deleted file mode 100644
index f48e2a3b5f5..00000000000
Binary files a/.yarn/cache/webpack-virtual-modules-npm-0.4.6-6d318db3ca-b867f62197.zip and /dev/null differ
diff --git a/.yarn/cache/whet.extend-npm-0.9.9-73455d3140-8ef023c643.zip b/.yarn/cache/whet.extend-npm-0.9.9-73455d3140-8ef023c643.zip
deleted file mode 100644
index ac89bac18c4..00000000000
Binary files a/.yarn/cache/whet.extend-npm-0.9.9-73455d3140-8ef023c643.zip and /dev/null differ
diff --git a/.yarn/cache/which-builtin-type-npm-1.1.3-c0bb111ab6-d7823c4a6a.zip b/.yarn/cache/which-builtin-type-npm-1.1.3-c0bb111ab6-d7823c4a6a.zip
deleted file mode 100644
index a50340727dd..00000000000
Binary files a/.yarn/cache/which-builtin-type-npm-1.1.3-c0bb111ab6-d7823c4a6a.zip and /dev/null differ
diff --git a/.yarn/cache/which-collection-npm-1.0.1-cd2c054585-85c95fcf92.zip b/.yarn/cache/which-collection-npm-1.0.1-cd2c054585-85c95fcf92.zip
deleted file mode 100644
index 22f5245b85b..00000000000
Binary files a/.yarn/cache/which-collection-npm-1.0.1-cd2c054585-85c95fcf92.zip and /dev/null differ
diff --git a/.yarn/cache/which-typed-array-npm-1.1.11-f37f0cefe2-bc9e8690e7.zip b/.yarn/cache/which-typed-array-npm-1.1.11-f37f0cefe2-bc9e8690e7.zip
new file mode 100644
index 00000000000..9fcf9ecf485
Binary files /dev/null and b/.yarn/cache/which-typed-array-npm-1.1.11-f37f0cefe2-bc9e8690e7.zip differ
diff --git a/.yarn/cache/ws-npm-8.13.0-26ffa3016a-1769532b6f.zip b/.yarn/cache/ws-npm-8.13.0-26ffa3016a-1769532b6f.zip
new file mode 100644
index 00000000000..6f8e5a8df8c
Binary files /dev/null and b/.yarn/cache/ws-npm-8.13.0-26ffa3016a-1769532b6f.zip differ
diff --git a/.yarn/cache/ws-npm-8.14.2-b339ac47a2-815ff01d9b.zip b/.yarn/cache/ws-npm-8.14.2-b339ac47a2-815ff01d9b.zip
deleted file mode 100644
index 77954e3961f..00000000000
Binary files a/.yarn/cache/ws-npm-8.14.2-b339ac47a2-815ff01d9b.zip and /dev/null differ
diff --git a/.yarn/cache/zip-stream-npm-4.1.0-c77601aed4-4a73da8567.zip b/.yarn/cache/zip-stream-npm-4.1.0-c77601aed4-4a73da8567.zip
new file mode 100644
index 00000000000..e387a5091dd
Binary files /dev/null and b/.yarn/cache/zip-stream-npm-4.1.0-c77601aed4-4a73da8567.zip differ
diff --git a/.yarn/cache/zip-stream-npm-4.1.1-879f54e934-33bd5ee701.zip b/.yarn/cache/zip-stream-npm-4.1.1-879f54e934-33bd5ee701.zip
deleted file mode 100644
index 0c6d7d1ee4c..00000000000
Binary files a/.yarn/cache/zip-stream-npm-4.1.1-879f54e934-33bd5ee701.zip and /dev/null differ
diff --git a/docs/cwc-v2-migration.md b/docs/cwc-v2-migration.md
new file mode 100644
index 00000000000..34ef68a5016
--- /dev/null
+++ b/docs/cwc-v2-migration.md
@@ -0,0 +1,319 @@
+# Carbon Web Components: v2 migration guide
+
+This document will review in detail the changes in @carbon/web-components v1 to v2. Because @carbon/web-components v2 uses Carbon v11, which utilizes Sass modules, there is a requirement for teams to use the
+[Dart Sass package](https://sass-lang.com/dart-sass) (`sass`), as opposed to
+`node-sass`. This introduces some new sass concepts such as
+[`@use`](https://sass-lang.com/documentation/at-rules/use) vs
+[`@import`](https://sass-lang.com/documentation/at-rules/import) and
+[namespaces](https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace).
+For Carbon v11 migration guidance, see their
+[migration guide](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md).
+
+
+> When using @carbon/web-components v2 you need to include theming to get all the token values necessary for the components. This includes using white theme, see the accordion codesandbox example [here](https://codesandbox.io/p/sandbox/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/accordion?file=/index.html:1,1)
+
+## List of component changes
+
+| Component                 | Changes                                  |
+| ------------------------- | ---------------------------------------- |
+| accordion                 | View changes [here](#accordion)          |
+| breadcrumb                | View changes [here](#breadcrumb)         |
+| button                    | View changes [here](#button)             |
+| checkbox                  | View changes [here](#checkbox)           |
+| code-snippet              | View changes [here](#code-snippet)       |
+| combo-box                 | View changes [here](#combo-box)          |
+| content-switcher          | View changes [here](#content-switcher)   |
+| copy-button               | View changes [here](#copy-button)        |
+| data-table                | View changes [here](#data-table)         |
+| date-picker               | View changes [here](#date-picker)        |
+| dropdown                  | View changes [here](#dropdown)           |
+| file-uploader             | View changes [here](#file-uploader)      |
+| form-group                | New component in v2.                     |
+| icon-button               | New component in v2.                     |
+| inline-loading            | View changes [here](#inline-loading)     |
+| input                     | Replaced by `text-input`                 |
+| layer                     | New component in v2.                     |
+| link                      | View changes [here](#link)               |
+| loading                   | View changes [here](#loading)            |
+| modal                     | View changes [here](#modal)              |
+| multi-select              | View changes [here](#multi-select)       |
+| notification              | View changes [here](#notification)       |
+| number-input              | View changes [here](#number-input)       |
+| ordered-list              | No API changes.                          |
+| overflow-menu             | View changes [here](#overflow-menu)      |
+| pagination                | View changes [here](#pagination)         |
+| popover                   | New component in v2.                     |
+| progress-bar              | New component in v2.                     |
+| progress-indicator        | View changes [here](#progress-indicator) |
+| radio-button              | View changes [here](#radio-button)       |
+| search                    | View changes [here](#search)             |
+| select                    | View changes [here](#select)             |
+| skeleton-placeholder      | No API changes.                          |
+| skeleton-text             | View changes [here](#skeleton-text)      |
+| slider                    | View changes [here](#slider)             |
+| stack                     | New component in v2.                     |
+| structured-list           | View changes [here](#structured-list)    |
+| tabs                      | View changes [here](#tabs)               |
+| tag                       | View changes [here](#tag)                |
+| textarea                  | View changes [here](#textarea)           |
+| text-input                | New component in v2. Replaces `input`.   |
+| tile                      | View changes [here](#tile)               |
+| toggle                    | View changes [here](#toggle)             |
+| toggletip                 | New component in v2.                     |
+| tooltip                   | View changes [here](#tooltip)            |
+| ui-shell                  | View changes [here](#ui-shell)           |
+| unordered-list            | No API changes.                          |
+
+### accordion
+
+- New `accordion-skeleton` & `accordion-item-skeleton` components
+- `title-text` property replaced with `title`
+
+### button
+
+- New `cds-button-set` component
+- `danger-primary` new option for `kind` property
+- `size` now accepts `xs`, `sm`, `md`, `lg`, and `xl`, instead of `''`, `sm`, `lg`, `field`
+- `tooltip-text` can add a tooltip component that appears on hover
+- `tooltip-alignment` and `tooltip-position` can be used to modify the tooltip
+
+### breadcrumb
+
+- New `breadcrumb-skeleton` component
+- New `no-trailing-slash` property
+
+### checkbox
+
+- New `checkbox-skeleton`
+- New `readonly` & `title` properties for `checkbox`
+
+### code-snippet
+
+- New properties: `copy-text`, `disabled`, `feedback`, `feedback-timeout`, `hide-copy-button`, `maxCollapsedNumberOfRows`, `maxExpandedNumberOfRows`, `minCollapsedNumberOfRows`, `minExpandedNumberOfRows`, `show-less-text`, `show-more-text`, `wrap-text`, `tooltip-content`
+- Removed properties: `code-assistive-text`, `collapse-button-text`, `color-scheme`, `copy-button-assistive-text`, `copy-button-feedback-text`, `copy-button-feedback-timeout`, `expand-button-text`
+
+### combo-box
+
+- `direction` property expects 'top' or 'bottom' value
+- `size="md"` is now used instead of `size=""`
+- `label-text` is now `title-text`
+- `trigger-content` is now `label` 
+- New attributes: `hide-label`, `invalid`, `invalid-text`, `read-only`, `warn`, `warn-text`
+- Removed `color-scheme` property
+
+### content-switcher
+
+- New `icon` property for icon-only variation
+- New `align` property for icon tooltips in icon-only variation
+- New `close-on-activation` property
+
+### copy-button
+
+- `feedback-text` property replaced with `feedback`
+- Removed `button-assistive-text` property
+- New `class-name` & `disabled` properties
+
+### data-table
+
+- New optional `table-head` component
+- New and old interactive features/logic are now built-in to the component -- can still be customizable
+- New properties: `batch-expansion`, `collator`, `expandable`, `filterRows`, `is-selectable`, `is-sortable`, `locale`, 
+`overflow-menu-on-hover`, `radio`, `use-static-width`, `use-zebra-styles`
+- `size` now accepts `xs`, `sm`, `md`, `lg`, and `xl`, instead of `compact`, `short`, `''`, and `tall`
+- `table-toolbar` can now be further customized with extra features
+- Removed `color-scheme` in favor of `use-zebra-styles`
+- Removed `table-expand-row` in favor of `table-row` with `expandable` attribute
+- Removed smaller `skeleton` table components in favor of `cds-table-skeleton` with `row-count` and `column-count` attributes
+
+### date-picker
+
+- New `date-picker-input` properties: `warn`, `warn-text`, `invalid-text`, `readonly`, `short`
+- Removed `date-picker-input` properties: `side-horizontal`, `required-validity-message`
+- New `date-picker` properties: `allow-input`, `close-on-select`, `min-date`, `max-date`, `readonly`
+
+### dropdown
+
+- `direction` property expects 'top' or 'bottom' value
+- `size="md"` is now used instead of `size=""`
+- `label-text` is now `title-text`
+- `trigger-content` is now `label`
+- New attributes: `hide-label`, `invalid`, `invalid-text`, `read-only`, `warn`, `warn-text`
+- Removed `color-scheme` property
+
+### file-uploader
+
+- `state` now accepts `uploading`, `complete`, & `edit` instead of `uploading`, `uploaded`, & `editing`
+- `size` now accepts `sm`, `md`, `lg`, instead of `''`, `sm`, `lg`, `field`
+- New `file-uploader-button` & `file-uploader-skeleton` components
+- `file-drop-container` is replaced with `file-uploader-drop-container` with a new `name` property
+- New `file-uploader-item` properties: `icon-desciption`, `error-subject`, `error-body`
+- Removed `file-uploader-item` properties: `uploaded-assitive-text`, `uploading-assistive-text`, `validity-message`
+- New `file-uploader` properties: `disabled`, `label-description`, `label-title`
+- Removed `file-uploader` properties: `helper-text`, `label-text`
+
+### inline-loading
+
+- New `assistive-text` property
+
+### link
+
+- `size` property replaced `REGULAR = ''` with `MEDIUM = 'md'`
+- New `inline` & `visited` properties
+
+### loading
+
+- New `assistive-text` property
+
+### modal
+- `<p>` inside the `modal-body` is replaced with `cds-modal-body-content`
+- New attributes: `alert`, `full-width`, `has-scrolling-content`, `prevent-close`, `prevent-close-on-click-outside`
+
+### multi-select
+
+- Removed `color-scheme` property
+- `size` property expected values have been changed from '' (default), 'sm' --> 'sm', 'md' (default)
+- New a11y `clear-selection-description` and `clear-selection-text` properties
+- New `locale` property to specify locale of the multi-select, used when sorting the list of items
+- New `selection-feedback` property: `'fixed', 'top', 'top-after-reopen'` options for sorting list items once selection occurs 
+- New `warn` and `warn-text` properties for warn state
+
+### notification
+
+- New `actionable-notification` component that has inline and toast variations
+- New `info`, `info-square`, and `warning-alt` values for `kind` property
+- `icon-label` property replaced with `status-icon-description`
+- `close-button-label` property replaced with `aria-label`
+
+### number-input
+
+- Removed `color-scheme` and `mobile` properties
+- `size` property expected values have been changed from '' (default), 'sm', 'xl' --> 'sm', 'md' (default), and 'lg'
+- `validity-message-min` and `validity-message-max` properties replaced with `decrement-button-assistive-text` and `increment-button-assistive-text` respectively
+- `label-text` property replaced with `label`
+- New `warn` and `warn-text` properties for warn state
+- New `invalid-text` that appears when in invalid state
+- New `hide-label` property
+- New`allow-empty` property to allow empty string
+- New `hide-steppers` property for option to hide increment/decrement steppers
+
+### overflow-menu
+
+- `size` now accepts: `sm`, `md`, `lg` instead of `''`, `sm`, `lg` `xl`
+- New `overlfow-menu-body` properties: `flipped`, `size`
+- Removed `overlfow-menu-body` properties: `alignment`, `color-scheme`
+- New `overlfow-menu-item` properties: `divider`, `size`
+- New `overlfow-menu` properties: `index`
+- Removed `overlfow-menu` properties: `color-scheme`
+
+### pagination
+
+- Removed `page-sizes-select` in favor of a `cds-select` component
+- Removed `pages-select` component in favor of built-in logic
+- `prev-button-text` is now `backward-text`
+- `next-button-text` is now `forward-text`
+- `at-last-page` is now `is-last-page`
+- New properties: `items-per-page-text`, `page-input-disabled`, `page-size-input-disabled`, `page-size-label-text`, `pages-unkown`,
+ `size`, `total-items`, `total-pages`
+
+### progress-indicator
+
+- New `space-equally` property for `progress-indicator`
+- New `description` property for `progress-step`
+- New `label` property for `progress-step`
+- New `secondary-label` property for `progress-step`
+
+### radio-button
+
+- New `radio-button-group` properties: `defaultSelected`, `legend-text`, `readOnly`
+- New `radio-button` properties: `disabledItem`, `readOnly`
+
+### tooltip
+
+- `tooltip-body` has been replaced with `tooltip-content
+- `tooltip-footer` has been removed
+- New `defaultOpen` & `closeOnActivation` properties
+
+### slider
+
+- New `required` property to specify if slider is required
+- New `readonly` property 
+- New `max-label` and `min-label` a11y properties
+- New `invalid` and `invalid-text` property for invalid state - when input entered in the text-input is above or lower than given max / min, the invalid state will be triggered automatically
+- New `step-multiplier` property to determine how much the value should increase / decrease by Shift + arrow keys
+- New `warn` and `warn-text` properties for warn state
+- New `hide-text-input` property for option to hide text input on side of slider
+
+### search
+
+- Removed `color-scheme` property
+- `size` property expected values have been changed from '' (default), 'sm', and 'xl' --> 'sm', 'md' (default), and 'lg'
+- Can use custom icon over magnifying glass
+- `closeButtonAssistiveText` is now `closeButtonLabelText`
+- New properties: `autocomplete`, `expandable`, 
+
+### select
+
+- Removed `color-scheme` property
+- `size` property expected values have been changed from '' (default), 'sm', and 'xl' --> 'sm', 'md' (default), and 'lg'
+- New `inline` property for inline variation
+- New `invalid-text` property for invalid state
+- New `warn` and `warn-text` properties for warn state
+- New `hide-label` property for option to hide label
+
+### skeleton-text
+
+- Removed `LINE` type def` and `line` option for `type` property
+
+### structured-list
+
+- New `condensed` property for condensed variation
+- New `flush` property for flush variation
+
+### tabs
+
+- Replaced mobile dropdown style tabs with overflow scrolling tabs at all screen sizes
+- New `CONTAINED` value for `type` property
+
+### tag
+- Removed `filter-tag` in favor of `filter` attribute
+
+### textarea
+
+- Removed `color-scheme` property
+- New `max-count` property that limits character count in component
+- New `enable-counter` property for option to display character counter
+- New `warn` and `warn-text` properties for warn state
+
+### tile
+
+- `fieldset` has been replaced with `tile-group` that handles selection logic
+- "Single selectable" tiles are now `radio-tile`s
+- `expandable-tile` can now include interactable components within
+
+### toggle
+
+- `checked-text` is now `label-a`
+- `unchecked-text` is now `label-b`
+- `size="small"` is now `size="sm"`
+- New properties: `hide-checkbox`, `read-only`
+
+### tooltip
+
+- tooltip now displays on hover instead of click
+- Removed `direction` property
+- `alignment` property now has 12 directions to choose from
+- `start` alignment is now `bottom-left`
+- `center` alignment is now `bottom`
+- `end` alignment is now `bottom-right`
+- New properties `enter-delay-ms` and `leave-delay-ms` to affect tooltip open/exit delay on hover
+
+### ui-shell
+
+- New `header-global-action`, `header-panel`, `header-side-nav-items`, `switcher-divider`, `switcher-item`, `switcher` components
+- The Header allows for Actions, Switcher, and Right Panel
+- New SideNav Rail variation
+- New `large` property for `side-nav-menu` and `side-nav-link` components
+- `usage-mode` property has been replaced with combination of `is-not-child-of-header` and `is-not-persistent` properties in `side-nav`
+- `header-menu` has new `is-active` property
+- `header-nav-item` has new `is-active` and `aria-current` properties
+- `header-menu-button` no longer uses `usage-mode` property, replaced by `is-not-child-of-header`
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
new file mode 100644
index 00000000000..66e9d39285e
--- /dev/null
+++ b/docs/dotcom-v2-migration.md
@@ -0,0 +1,202 @@
+# Carbon for IBM.com: v2 migration guide
+
+This document will review in detail the changes in Carbon for IBM.com v1 to v2.
+
+## Global changes
+
+Carbon for IBM.com v2 uses Carbon v11, which utilizes
+[Dart Sass](https://sass-lang.com/dart-sass) (`sass`), as opposed to
+`node-sass`. This introduces some new Sass features such as
+[`@use`](https://sass-lang.com/documentation/at-rules/use) and
+[`@forward`](https://sass-lang.com/documentation/at-rules/forward) keywords
+([`@import`](https://sass-lang.com/documentation/at-rules/import) is no longer
+used), and
+[namespaces](https://sass-lang.com/documentation/at-rules/use#choosing-a-namespace).
+For Carbon v11 migration guidance, see their
+[migration guide](https://github.com/carbon-design-system/carbon/blob/main/docs/migration/v11.md).
+
+## Components
+
+| Component                 | Changes                                                                                                                                                    |
+| ------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| back-to-top               | No API changes.                                                                                                                                            |
+| background-media          | No API changes.                                                                                                                                            |
+| button-expressive         | Deprecated in favor of `button`.                                                                                                                           |
+| button-group              | No API changes.                                                                                                                                            |
+| callout-with-media        | View [changes](#callout-with-media).                                                                                                                       |
+| callout-quote             | View [changes](#callout-quote).                                                                                                                            |
+| card                      | View [changes](#card).                                                                                                                                     |
+| card-group                | View changes [here](#card-group)                                                                                                                           |
+| card-group-card-link-item | Deprecated in favor of [card](#card) or [content-item](#content-item).                                                                                     |
+| card-in-card              | No API changes.                                                                                                                                            |
+| card-link                 | Deprecated in favor of [card](#card) (link variant).                                                                                                       |
+| card-section-carousel     | Deprecated in favor of `content-section` or `content-block` combined with `carousel`.                                                                      |
+| card-section-images       | Removed - use `card-section`.                                                                                                                              |
+| card-section-simple       | Deprecated in favor of `content-section` or `content-block` combined with `card-group`.                                                                    |
+| carousel                  | No API changes.                                                                                                                                            |
+| content-block-cards       | Deprecated in favor of `content-section` or `content-block` combined with `card-group`.                                                                    |
+| content-block-horizontal  | Deprecated in favor of `content-section` or `content-block` combined with `content-item-horizontal`.                                                       |
+| content-block-media       | Deprecated in favor of `content-section` or `content-block` combined with `video-player`/`image` components.                                               |
+| content-block-mixed       | Deprecated in favor of `content-section` or `content-block` combined with `video-player`/`image`, `pictogram-items`, and other `content-group` components. |
+| content-block-segmented   | Deprecated in favor of `content-section` or `content-block`.                                                                                               |
+| content-block-simple      | Deprecated in favor of `content-section` or `content-block`.                                                                                               |
+| content-group-banner      | View [changes](#content-group-banner).                                                                                                                     |
+| content-group-horizontal  | Removed - use `content-block-horizontal`.                                                                                                                  |
+| content-group-cards       | Deprecated in favor of `content-section` or `content-block` combined with `card-group`.                                                                    |
+| content-group-pictograms  | Deprecated in favor of `content-section` or `content-block` combined with `content-item` (pictogram variant).                                              |
+| content-group-simple      | Deprecated in favor of `content-section` or `content-block` combined with `content-item`.                                                                  |
+| content-item              | View [changes](#content-item)                                                                                                                              |
+| content-item-horizontal   | View [changes](#content-item-horizontal)                                                                                                                   |
+| cta                       | View [changes](#cta)                                                                                                                                       |
+| cta-block                 | Deprecated in favor of `content-section` or `content-block` combined with `content-item`.                                                                  |
+| cta-section               | Deprecated in favor of `content-section` or `content-block` combined with `content-item`.                                                                  |
+| dotcom-shell              | No API changes.                                                                                                                                            |
+| feature-card              | View [changes](#feature-card).                                                                                                                             |
+| feature-card-block-large  | Removed - use [`feature-card`](#feature-card).                                                                                                             |
+| feature-card-block-medium | Removed - use [`feature-card`](#feature-card).                                                                                                             |
+| feature-section           | View [changes](#feature-section).                                                                                                                          |
+| filter-panel              | View [changes](#filter-panel).                                                                                                                             |
+| footer                    | No API changes.                                                                                                                                            |
+| horizontal-rule           | View [changes](#horizontal-rule).                                                                                                                          |
+| image                     | View [changes](#image).                                                                                                                                    |
+| image-with-caption        | Removed - use `image` component.                                                                                                                           |
+| leadspace                 | View [changes](#leadspace).                                                                                                                                |
+| leadspace-block           | View [changes](#leadspace-block).                                                                                                                          |
+| leadspace-with-search     | View [changes](#leadspace-with-search).                                                                                                                    |
+| lightbox-media-viewer     | No API changes.                                                                                                                                            |
+| link-list                 | View [changes](#link-list).                                                                                                                                |
+| link-with-icon            | No API changes.                                                                                                                                            |
+| logo-grid                 | Deprecated in favor of `content-section` or `content-block` combined with `image-group`.                                                                   |
+| pictogram-item            | Deprecated in favor of `content-item` (pictogram variation).                                                                                               |
+| quote                     | View [changes](#quote).                                                                                                                                    |
+| scroll-animations         | No API changes.                                                                                                                                            |
+| search-with-typeahead     | No API changes.                                                                                                                                            |
+| table-of-contents         | No API changes.                                                                                                                                            |
+| tabs-extended             | View [changes](#tabs-extended)                                                                                                                             |
+| tabs-extended-media       | Deprecated in favor of [`tabs-extended`](#tabs-extended).                                                                                                  |
+| tag-group                 | Deprecated in favor of wrapping Carbon `tag` in a parent container.                                                                                        |
+| tag-link                  | Deprecated in favor of Carbon `tag`.                                                                                                                       |
+| universal-banner          | View [changes](#universal-banner)                                                                                                                          |
+
+### Callout with media
+
+- New options for `color-scheme` property: `regular`, `inverse` `layer`, `cyan`,
+  `purple`
+- New callout style tokens
+
+### Callout quote
+
+- New options for `color-scheme` property: `regular`, `inverse` `layer`, `cyan`,
+  `purple`
+- New callout style tokens
+
+### Card
+
+- The `card-footer` `icon-placement` property has been removed
+- Removed `border` property - clickable cards inherit the Carbon v11
+  experimental tile border style
+- New `aspect-ratio` property with `1:1`, `2:1`, `3:2`, `4:3`, and `16:9` as
+  options
+- New `link` property which takes the place of the deprecated `card-link`
+
+### Card group
+
+- Removed `outline` property
+- New grid mode options: `Default` with a 32px gap, `Narrow` with a 16px gap,
+  and `Condensed` with no gaps inbetween
+- Grid mode options `Collapsed` has been replaced with `Condensed`
+- Removed grid mode option `Border`
+- Deprecated `card-link` option in Card group
+
+### Content group banner
+
+- `content-group-banner` renamed to `in-page-banner`
+- New options for `color-scheme` property: `regular`, `inverse` `layer`, `cyan`,
+  `purple`
+
+### Content item
+
+- `content-item` new property `horizontal`
+- `content-item` now renders different variations for `statistics`, `pictogram`,
+  `media`, and `logo`
+
+### Content item horizontal
+
+- `content-item-horizontal` renamed to `content-item-row`
+- `content-item-horizontal-*` renamed to `content-item-row-*`
+
+### CTA
+
+In Carbon for IBM.com v2, `cta` and all subcomponents have been deprecated in
+favor of their base components. All CTA-like features can now be used natively
+within `button`, `card`, `feature-card`, and `link-with-icon`.
+
+Each new component has a `cta-type` property that can change the icon and
+behavior of the component. See the components' documentation for more
+information.
+
+### Feature card
+
+- Enable support for both `regular` and `inverse` values for `color-scheme`
+  property
+
+### Feature section
+
+- The `feature-section-card-link` has been deprecated in favor of the `card`
+  (link) variation
+- `media-alignment` property has been removed
+- `color-scheme` property now accepts `regular` (default), `inverse`, `cyan`,
+  `purple`
+
+### Filter panel
+
+- `filter-group-item` property `title-text` has been updated to `title`
+
+### Horizontal rule
+
+- New options for `contrast` property: `subtle` (default), `strong` (replaces
+  `medium_contrast`), `low_contrast`, `high_contrast`
+
+### Image
+
+- New `lightbox-contrast` property
+
+### Leadspace
+
+- New `highlight` and `type-style` attributes for `leadspace-heading`
+
+### Leadspace
+
+- Deprecated `leadspace-block-heading` in favor of `leadspace-heading`
+- Removed `leadspace-block-cta` in favor of `button`
+
+### Leadspace with Search
+
+- `leadspace-with-search-heading` has been replaced with `leadspace-heading`
+- `leadspace-with-search-content-copy` has been replaced with
+  `leadspace-with-search-copy`
+- New highlight attribute in `dds-leadspace-heading`
+- Deprecated `background-media` image variant
+- Removed `leadspace-with-search-heading`, `leadspace-with-search-content`,
+  `leadspace-with-search-content-heading`, `leadspace-with-search-content-copy`
+
+### Link list
+
+- The `default` section has taken the design specs of `end of section`. As a
+  result, `end of section` has been removed. In addition to this, the following
+  components have been replaced:
+- `link-list-item-card` has been replaced with `link-list-item`
+- `link-list-item-card-cta` has been replaced with `link-list-item-cta`
+
+### Quote
+
+- Removed `color-scheme` `inverse` option in favor of `callout-quote (inverse)`
+
+### Tabs extended
+
+- `vertical` variant has been deprecated
+- `contained` type has been added
+
+### Universal banner
+
+- `universal-banner` renamed to `global-banner`
diff --git a/docs/stable-selectors.md b/docs/stable-selectors.md
index d367f399b27..75a9a1c81d2 100644
--- a/docs/stable-selectors.md
+++ b/docs/stable-selectors.md
@@ -18,16 +18,16 @@
 ## Overview
 
 To assist various teams with tag management, selenium testing, A/B testing,
-personalization, etc, we will need to add data attributes to any dynamic 
-elements to our HTML markup. This would include input elements and dynamically 
+personalization, etc, we will need to add data attributes to any dynamic
+elements to our HTML markup. This would include input elements and dynamically
 loaded text. The purpose of adding a stable selector language is to provide a
 reliable system of accessing elements on the page that will not change due to
 possible changes in code (e.g. id's or classnames) that would break campaigns
 and automated tests.
 
 ## Naming convention
-Based on discussions with the design team, we will look to use BEM as a naming 
-convention for the stable selectors. The following is a brief summary on how 
+Based on discussions with the design team, we will look to use BEM as a naming
+convention for the stable selectors. The following is a brief summary on how
 naming is done using BEM: http://getbem.com/naming/.
 
 ## data-autoid
@@ -37,8 +37,8 @@ We will have the following convention for adding this markup:
 <input type="text" data-autoid="block__element--modifier"/>
 ```
 
-At minimum, components and patterns should include an autoid on the outermost 
-element. For example, the `<MastHead />` should output the following markup 
+At minimum, components and patterns should include an autoid on the outermost
+element. For example, the `<MastHead />` should output the following markup
 (note, this is not real live markup and is only used as an example):
 
 ```html
@@ -54,7 +54,7 @@ element. For example, the `<MastHead />` should output the following markup
 
 ### Selenium tests
 
-The QA team will use the following xpath convention for identifying these 
+The QA team will use the following xpath convention for identifying these
 autoid attributes in their tests:
 
 ```xpath
@@ -74,6 +74,6 @@ This is an example of writing an e2e test (in this case, [Cypress](https://cypre
 
 ```javascript
 it('should load the megamenu - first nav item', () => {
-  cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').click();
+  cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').click();
 });
 ```
diff --git a/lerna.json b/lerna.json
index 5ae40eb20ee..1ca17960ab3 100644
--- a/lerna.json
+++ b/lerna.json
@@ -1,5 +1,5 @@
 {
-  "lerna": "6.4.1",
+  "lerna": "6.5.1",
   "version": "independent",
   "npmClient": "yarn",
   "npmClientArgs": ["--no-immutable"],
@@ -7,7 +7,6 @@
   "packages": [
     "packages/web-components",
     "packages/utilities",
-    "packages/react",
     "packages/eslint-*",
     "packages/services-*",
     "packages/storybook-addon-theme",
diff --git a/package.json b/package.json
index 585aa03e340..33d9132b315 100644
--- a/package.json
+++ b/package.json
@@ -7,14 +7,9 @@
   "engines": {
     "node": ">=18.x"
   },
-  "workspaces": {
-    "packages": [
-      "packages/*"
-    ],
-    "nohoist": [
-      "**/marked"
-    ]
-  },
+  "workspaces": [
+    "packages/*"
+  ],
   "scripts": {
     "build": "lerna run build --stream --prefix",
     "ci-check": "npm run format:diff && yarn lint:license && yarn lint && yarn lint:styles",
@@ -22,16 +17,15 @@
     "doctoc": "doctoc --title '## Table of Contents' docs",
     "format": "prettier --cache --write '**/*.{js,md,scss,ts}'",
     "format:diff": "prettier --cache --list-different '**/*.{js,md,scss,ts}'",
-    "lint": "eslint packages",
+    "lint": "eslint packages --ext .js,.ts",
     "lint:license": "gulp lint:license",
     "lint:license:staged": "tasks/check-license.js -w",
     "lint:scripts:staged": "eslint",
     "lint:styles": "stylelint '**/*.{css,scss}' --config ./packages/stylelint-config-ibmdotcom",
     "reset": "yarn cache clean && yarn clean && yarn install && yarn build",
-    "test": "yarn test:unit && yarn test:a11y && yarn test:integration:build",
+    "test": "yarn test:unit && yarn test:a11y",
     "test:a11y": "yarn lerna run --stream --prefix test:a11y",
     "test:unit": "cross-env BABEL_ENV=test jest",
-    "test:integration:build": "yarn lerna run --stream --prefix --scope=@carbon/ibmdotcom-react test:integration:build",
     "prepare": "husky install"
   },
   "devDependencies": {
@@ -67,12 +61,13 @@
     "jest": "25.5.4",
     "jest-circus": "25.5.4",
     "jest-junit": "^6.4.0",
-    "lerna": "^6.4.1",
+    "lerna": "^6.5.1",
     "lint-staged": "^13.0.3",
     "node-fetch": "^2.6.0",
     "prettier": "^2.7.1",
     "react": "16.14.0",
     "rimraf": "^3.0.0",
+    "sass": "^1.19.0",
     "stylelint": "^13.3.3",
     "stylelint-config-prettier": "^7.0.0",
     "stylelint-prettier": "^1.1.2",
@@ -85,7 +80,6 @@
   },
   "resolutions": {
     "kind-of": ">=6.0.3",
-    "lit-html": "^1.4.1",
     "marked": "^4.0.10",
     "minimist": ">=1.2.2",
     "node-notifier": ">=8.0.1",
diff --git a/packages/carbon-web-components/.eslintrc.js b/packages/carbon-web-components/.eslintrc.js
index daae3767316..78e50ec797f 100644
--- a/packages/carbon-web-components/.eslintrc.js
+++ b/packages/carbon-web-components/.eslintrc.js
@@ -51,7 +51,7 @@ module.exports = {
       plugins: ['@typescript-eslint'],
       rules: {
         'no-unused-vars': 0,
-        '@typescript-eslint/no-unused-vars': 0,
+        '@typescript-eslint/no-unused-vars': 1,
         'jsdoc/require-param-type': 0,
         'jsdoc/require-returns-type': 0,
         'no-undef': 0,
diff --git a/packages/carbon-web-components/.gitignore b/packages/carbon-web-components/.gitignore
index da16608ad4f..b123ac25fe7 100644
--- a/packages/carbon-web-components/.gitignore
+++ b/packages/carbon-web-components/.gitignore
@@ -5,7 +5,7 @@ dist
 es
 lib
 node_modules
-scss
+/scss
 storybook-static
 tests/coverage
 .vscode
diff --git a/packages/carbon-web-components/.storybook/_container.scss b/packages/carbon-web-components/.storybook/_container.scss
index 4b30e9e0343..37e41860a74 100644
--- a/packages/carbon-web-components/.storybook/_container.scss
+++ b/packages/carbon-web-components/.storybook/_container.scss
@@ -1,96 +1,72 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/css--font-face';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
-@import 'carbon-components/src/components/tag/tag';
-@import 'carbon-components/src/components/notification/inline-notification';
-@import 'carbon-components/src/components/notification/toast-notification';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/themes/scss/themes';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/grid';
+
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
+
+// Emit the flex-grid styles
+@include grid.flex-grid();
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
 
 // The default theme is "white" (White)
 :root {
-  @include carbon--theme($carbon--theme--white, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$white);
 }
-
 // Set the <html> theme attribute to "g10" to use the Gray 10 theme
 // <html theme="g10">
 :root[storybook-carbon-theme='g10'] {
-  @include carbon--theme($carbon--theme--g10, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$g10);
 }
 
 // Set the <html> theme attribute to "g90" to use the Gray 90 theme
 // <html theme="g90">
 :root[storybook-carbon-theme='g90'] {
-  @include carbon--theme($carbon--theme--g90, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$g90);
 }
 
 // Set the <html> theme attribute to "g100" to use the Gray 100 theme
 // <html theme="g100">
 :root[storybook-carbon-theme='g100'] {
-  @include carbon--theme($carbon--theme--g100, true) {
-    @include emit-component-tokens($tag-colors);
-    @include emit-component-tokens($notification-colors);
-  }
+  @include theme.theme(themes.$g100);
 }
 
-html,
-body,
-#root,
-#root-inner,
-[name='main-content'] {
-  position: relative;
-  height: 100%;
+body {
+  background-color: theme.$background;
+  color: theme.$text-primary;
 }
 
-// Reverts Carbon reset style of lists for docs page
-#docs-root {
-  ol {
-    list-style-type: decimal;
-  }
-
-  ul {
-    list-style-type: disc;
-  }
+.sb-show-main.sb-main-padded {
+  padding: 0;
 }
 
-.bx-ce-demo-devenv--container {
-  padding: 3em;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
+#main-content {
+  padding: 42px;
   position: relative;
 }
 
-.bx--content.bx-ce-demo-devenv--ui-shell-content {
-  background-color: $ui-01;
+.#{$prefix}--content.#{$prefix}-ce-demo-devenv--ui-shell-content {
   margin: 0;
   height: 100vh;
   width: 100%;
-
-  h2 {
-    font-weight: 800;
-    margin: 30px 0;
-    font-size: 20px;
-  }
-
-  p {
-    line-height: 20px;
-  }
+  padding: 2rem;
 }
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/components/Panel.tsx b/packages/carbon-web-components/.storybook/addon-carbon-theme/components/Panel.tsx
deleted file mode 100644
index 3ffc09c75c1..00000000000
--- a/packages/carbon-web-components/.storybook/addon-carbon-theme/components/Panel.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-// @ts-nocheck
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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, { useCallback, useState } from 'react';
-import PropTypes from 'prop-types';
-import { Form } from '@storybook/components';
-import { CURRENT_THEME } from '../shared';
-
-/**
- * Storybook add-on panel for Carbon theme switcher.
- */
-const Panel = ({ api, active }) => {
-  const [currentTheme, setCurrentTheme] = useState('white');
-  const handleChange = useCallback(
-    (event) => {
-      const { value } = event.target;
-      setCurrentTheme(value);
-      api.getChannel().emit(CURRENT_THEME, value);
-    },
-    [api]
-  );
-  return (
-    active && (
-      <Form translate="yes">
-        <Form.Field label="Select Carbon theme:">
-          <Form.Select
-            translate="yes"
-            name="carbon-theme"
-            value={currentTheme}
-            onChange={handleChange}
-            size="flex">
-            <option key="white" value="white">
-              white
-            </option>
-            <option key="g10" value="g10">
-              g10
-            </option>
-            <option key="g90" value="g90">
-              g90
-            </option>
-            <option key="g100" value="g100">
-              g100
-            </option>
-          </Form.Select>
-        </Form.Field>
-      </Form>
-    )
-  );
-};
-
-Panel.propTypes = {
-  /**
-   * The Storybook API object.
-   */
-  api: PropTypes.shape({
-    getChannel: PropTypes.func,
-  }).isRequired,
-
-  /**
-   * `true` if this Storybook add-on panel is active.
-   */
-  active: PropTypes.bool.isRequired,
-};
-
-export default Panel;
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/index.js b/packages/carbon-web-components/.storybook/addon-carbon-theme/index.js
deleted file mode 100644
index ad1078e12a1..00000000000
--- a/packages/carbon-web-components/.storybook/addon-carbon-theme/index.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 managerEntries(entry = []) {
-  return [...entry, require.resolve('./register.tsx')];
-}
-
-module.exports = {
-  managerEntries,
-};
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/register.tsx b/packages/carbon-web-components/.storybook/addon-carbon-theme/register.tsx
deleted file mode 100644
index 738458ac290..00000000000
--- a/packages/carbon-web-components/.storybook/addon-carbon-theme/register.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 addons from '@storybook/addons';
-import Panel from './components/Panel';
-import { ADDON_ID, PANEL_ID } from './shared';
-
-addons.register(ADDON_ID, (api) => {
-  addons.addPanel(PANEL_ID, {
-    title: 'Carbon theme',
-    // eslint-disable-next-line react/prop-types
-    render: ({ active, key }) => (
-      <Panel api={api} key={key} active={Boolean(active)} />
-    ),
-  });
-});
diff --git a/packages/carbon-web-components/.storybook/addon-carbon-theme/shared.ts b/packages/carbon-web-components/.storybook/addon-carbon-theme/shared.ts
deleted file mode 100644
index cbc859665bd..00000000000
--- a/packages/carbon-web-components/.storybook/addon-carbon-theme/shared.ts
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 const ADDON_ID = 'carbon-theme';
-export const CURRENT_THEME = `${ADDON_ID}/current`;
-export const PANEL_ID = `${ADDON_ID}/panel`;
diff --git a/packages/carbon-web-components/.storybook/basic-example-cdn.html b/packages/carbon-web-components/.storybook/basic-example-cdn.html
index cabef998e54..bcad085883a 100644
--- a/packages/carbon-web-components/.storybook/basic-example-cdn.html
+++ b/packages/carbon-web-components/.storybook/basic-example-cdn.html
@@ -1,10 +1,9 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <script type="module">
-      import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown.js';
-      import 'https://jspm.dev/carbon-web-components/es/components/dropdown/dropdown-item.js';
-    </script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/canary/dropdown.min.js"></script>
     <style type="text/css">
       #app {
         font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -12,21 +11,21 @@
         margin: 2rem;
       }
 
-      bx-dropdown:not(:defined),
-      bx-dropdown-item:not(:defined) {
+      cds-dropdown:not(:defined),
+      cds-dropdown-item:not(:defined) {
         visibility: hidden;
       }
     </style>
   </head>
   <body>
     <div id="app">
-      <bx-dropdown trigger-content="Select an item">
-        <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-        <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-        <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-        <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-        <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-      </bx-dropdown>
+      <cds-dropdown trigger-content="Select an item">
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+      </cds-dropdown>
     </div>
   </body>
 </html>
diff --git a/packages/carbon-web-components/.storybook/container.ts b/packages/carbon-web-components/.storybook/container.ts
index 31f0e1c1a91..44008beccc7 100644
--- a/packages/carbon-web-components/.storybook/container.ts
+++ b/packages/carbon-web-components/.storybook/container.ts
@@ -1,15 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-html';
-import type { TemplateResult } from 'lit-html';
-import '../src/components/skip-to-content/skip-to-content';
+import { html, TemplateResult } from 'lit';
 import containerStyles from './_container.scss'; // eslint-disable-line import/first
 
 /**
@@ -28,13 +26,12 @@ const container = ({
   <style>
     ${containerStyles}
   </style>
-  <bx-skip-to-content href="#main-content"></bx-skip-to-content>
+  <cds-skip-to-content href="#main-content"></cds-skip-to-content>
   <div
     id="main-content"
     name="main-content"
     data-floating-menu-container
-    role="${hasMainTag ? 'none' : 'main'}"
-    class="bx--body bx-ce-demo-devenv--container">
+    role="${hasMainTag ? 'none' : 'main'}">
     ${children}
   </div>
 `;
diff --git a/packages/carbon-web-components/.storybook/main.js b/packages/carbon-web-components/.storybook/main.js
index 3e45df0723d..88e6d9b9199 100644
--- a/packages/carbon-web-components/.storybook/main.js
+++ b/packages/carbon-web-components/.storybook/main.js
@@ -17,8 +17,6 @@ const useRtl = process.env.STORYBOOK_CARBON_CUSTOM_ELEMENTS_USE_RTL === 'true';
 
 const arrayify = (value) =>
   Array.isArray(value) ? value : value != null ? [value] : []; // eslint-disable-line no-nested-ternary
-const testMatches = (test, s) =>
-  arrayify(test).some((item) => item.test && item.test(s));
 
 module.exports = {
   stories: [
@@ -29,9 +27,19 @@ module.exports = {
   addons: [
     '@storybook/addon-actions',
     '@storybook/addon-docs',
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: true,
+        backgrounds: false,
+        controls: true,
+        docs: true,
+        toolbars: true,
+        viewport: true,
+      },
+    },
     '@storybook/addon-knobs',
     '@storybook/addon-storysource',
-    path.resolve(__dirname, 'addon-carbon-theme'),
     path.resolve(__dirname, 'addon-knobs-args'),
   ],
   managerWebpack(config) {
@@ -49,21 +57,6 @@ module.exports = {
     return config;
   },
   webpackFinal(config) {
-    // Uses our own option for `@babel/preset-env`
-    config.module.rules = deepReplace(
-      config.module.rules,
-      (value, key, parent, parents) =>
-        getPaths(parents) === 'use.options.presets' &&
-        Array.isArray(value) &&
-        /@babel\/preset-env/i.test(value[0]),
-      (value) => [
-        value[0],
-        {
-          modules: false,
-          targets: ['last 1 version', 'Firefox ESR', 'ie >= 11'],
-        },
-      ]
-    );
     // Uses `@babel/plugin-proposal-decorators` configuration in our `.babelrc`
     config.module.rules = deepReplace(
       config.module.rules,
@@ -89,23 +82,6 @@ module.exports = {
         },
       ]
     );
-    // Supports `*-story.mdx`
-    config.module.rules = deepReplace(
-      config.module.rules,
-      (value, key) =>
-        key === 'test' &&
-        testMatches(value, 'button.stories.mdx') &&
-        !testMatches(value, 'foo.mdx'),
-      (value) => [...arrayify(value), /\-story.mdx$/]
-    );
-    config.module.rules = deepReplace(
-      config.module.rules,
-      (value, key) =>
-        key === 'exclude' &&
-        testMatches(value, 'button.stories.mdx') &&
-        !testMatches(value, 'foo.mdx'),
-      (value) => [...arrayify(value), /\-story.mdx$/]
-    );
 
     config.module.rules.push(
       {
@@ -156,7 +132,10 @@ module.exports = {
               implementation: sass,
               webpackImporter: false,
               sassOptions: {
-                includePaths: [path.resolve(__dirname, '..', 'node_modules')],
+                includePaths: [
+                  path.resolve(__dirname, '..', 'node_modules'),
+                  path.resolve(__dirname, '../../../', 'node_modules'),
+                ],
               },
             },
           },
diff --git a/packages/carbon-web-components/.storybook/manager-head.html b/packages/carbon-web-components/.storybook/manager-head.html
index 5e56d617416..4d5e66c159e 100644
--- a/packages/carbon-web-components/.storybook/manager-head.html
+++ b/packages/carbon-web-components/.storybook/manager-head.html
@@ -1,18 +1,26 @@
-<meta name="keywords" content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements">
-<meta name="description" content="This is the Custom Elements implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, Web Components, Custom Elements" />
+<meta
+  name="description"
+  content="This is the Custom Elements implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs." />
 
 <!-- Open Graph -->
-<meta property="og:title" content="Carbon Custom Elements">
-<meta property="og:site_name" content="Carbon Custom Elements">
-<meta property="og:description" content="This is the Custom Elements implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs.">
-<meta property="og:url" content="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components">
+<meta property="og:title" content="Carbon Custom Elements" />
+<meta property="og:site_name" content="Carbon Custom Elements" />
+<meta
+  property="og:description"
+  content="This is the Custom Elements implementation of the Carbon Design System. Carbon is a series of individual styles and components, that when combined make beautiful, intuitive designs." />
+<meta
+  property="og:url"
+  content="https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components" />
 
 <!-- Social -->
-<meta name="twitter:card" content="summary_large_image">
-<meta name="twitter:image:alt" content="Carbon Design System">
-<meta name="twitter:site" content="@_carbondesign">
+<meta name="twitter:card" content="summary_large_image" />
+<meta name="twitter:image:alt" content="Carbon Design System" />
+<meta name="twitter:site" content="@_carbondesign" />
 
 <!-- Storybook override -->
 <script>
-  document.title = 'Carbon Custom Elements';
+  document.title = 'Carbon Web Components';
 </script>
diff --git a/packages/carbon-web-components/.storybook/manager.js b/packages/carbon-web-components/.storybook/manager.js
new file mode 100644
index 00000000000..52f56767ff2
--- /dev/null
+++ b/packages/carbon-web-components/.storybook/manager.js
@@ -0,0 +1,46 @@
+/**
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { addons } from '@storybook/addons';
+import yourTheme from './theme';
+
+addons.setConfig({
+  theme: yourTheme,
+});
+
+/**
+ * Conditionally generate CSS to hide a component based on its corresponding
+ * feature flag environment variable.
+ *
+ * @param {*} envVar
+ *   Environment variable to check.
+ * @param {*} cssId
+ *   CSS ID for selector.
+ * @returns
+ */
+const getCss = (envVar, cssId) => {
+  return envVar !== 'true'
+    ? `button[id^="${cssId}"] { display: none !important; }\n`
+    : '';
+};
+
+// Build string of CSS rules.
+let css = '';
+if (!process.env.CDS_FLAGS_ALL) {
+  css += getCss(
+    process.env.CDS_EXPERIEMENTAL_COMPONENT_NAME,
+    'components-experimental-component-name'
+  );
+}
+
+// Inject any CSS rules into the page.
+if (css.length) {
+  const head = document.head || document.getElementsByTagName('head')[0];
+  const style = document.createElement('style');
+  head.appendChild(style);
+  style.appendChild(document.createTextNode(css));
+}
diff --git a/packages/carbon-web-components/.storybook/preview-head.html b/packages/carbon-web-components/.storybook/preview-head.html
index 59a3219f186..51390b88380 100644
--- a/packages/carbon-web-components/.storybook/preview-head.html
+++ b/packages/carbon-web-components/.storybook/preview-head.html
@@ -6,9 +6,13 @@
   document.documentElement.setAttribute('lang', 'en');
 </script>
 <style type="text/css">
-  .bx-ce-doc--demo-iframe {
+  .cds-ce-doc--demo-iframe {
     width: 100%;
     height: 120px;
     border: 1px solid var(--cds-ui-03, #e0e0e0);
   }
 </style>
+
+<link
+  rel="stylesheet"
+  href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
diff --git a/packages/carbon-web-components/.storybook/preview.js b/packages/carbon-web-components/.storybook/preview.js
new file mode 100644
index 00000000000..56340ad7b6c
--- /dev/null
+++ b/packages/carbon-web-components/.storybook/preview.js
@@ -0,0 +1,160 @@
+/**
+ * Copyright IBM Corp. 2016, 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 { white, g10, g90, g100 } from '@carbon/themes';
+import container from './container';
+import { breakpoints } from '@carbon/layout';
+import theme from './theme';
+
+export const globalTypes = {
+  locale: {
+    name: 'Locale',
+    description: 'Set the localization for the storybook',
+    defaultValue: 'en',
+    toolbar: {
+      icon: 'globe',
+      items: [
+        {
+          right: '🇺🇸',
+          title: 'English',
+          value: 'en',
+        },
+        {
+          right: '🇵🇸',
+          title: 'Arabic',
+          value: 'ar',
+        },
+      ],
+    },
+  },
+  theme: {
+    name: 'Theme',
+    description: 'Set the global theme for displaying components',
+    defaultValue: 'white',
+    toolbar: {
+      icon: 'paintbrush',
+      items: ['white', 'g10', 'g90', 'g100'],
+    },
+  },
+};
+
+export const parameters = {
+  backgrounds: {
+    // https://storybook.js.org/docs/react/essentials/backgrounds#grid
+    grid: {
+      cellSize: 8,
+      opacity: 0.5,
+    },
+    values: [
+      {
+        name: 'white',
+        value: white.background,
+      },
+      {
+        name: 'g10',
+        value: g10.background,
+      },
+      {
+        name: 'g90',
+        value: g90.background,
+      },
+      {
+        name: 'g100',
+        value: g100.background,
+      },
+    ],
+  },
+  controls: {
+    // https://storybook.js.org/docs/react/essentials/controls#show-full-documentation-for-each-property
+    expanded: true,
+
+    // https://storybook.js.org/docs/react/essentials/controls#specify-initial-preset-color-swatches
+    // presetColors: [],
+
+    // https://storybook.js.org/docs/react/essentials/controls#sorting-controls
+    sort: 'alpha',
+
+    hideNoControlsWarning: true,
+  },
+  darkMode: {
+    current: 'light',
+  },
+  docs: {
+    theme,
+  },
+  // Small (<672)
+  // Medium (672 - 1056px)
+  // Large (1056 - 1312px)
+  // X-Large (1312 - 1584px)
+  // Max (>1584)
+  viewport: {
+    viewports: {
+      sm: {
+        name: 'Small',
+        styles: {
+          width: breakpoints.sm.width,
+          height: '100%',
+        },
+      },
+      md: {
+        name: 'Medium',
+        styles: {
+          width: breakpoints.md.width,
+          height: '100%',
+        },
+      },
+      lg: {
+        name: 'Large',
+        styles: {
+          width: breakpoints.lg.width,
+          height: '100%',
+        },
+      },
+      xlg: {
+        name: 'X-Large',
+        styles: {
+          width: breakpoints.xlg.width,
+          height: '100%',
+        },
+      },
+      Max: {
+        name: 'Max',
+        styles: {
+          width: breakpoints.max.width,
+          height: '100%',
+        },
+      },
+    },
+  },
+  options: {
+    storySort: {
+      order: [
+        'Introduction',
+        [
+          'Welcome',
+          'Custom styles',
+          'Carbon CDN style helpers',
+          'Form Participation',
+        ],
+        'Components',
+        'Layout',
+      ],
+    },
+  },
+};
+
+export const decorators = [
+  function decoratorContainer(story, context) {
+    const result = story();
+    const { hasMainTag } = result;
+    const { theme } = context.globals;
+
+    document.documentElement.setAttribute('storybook-carbon-theme', theme);
+
+    return container({ hasMainTag, children: result });
+  },
+];
diff --git a/packages/carbon-web-components/.storybook/preview.ts b/packages/carbon-web-components/.storybook/preview.ts
deleted file mode 100644
index 4a89dfb6b13..00000000000
--- a/packages/carbon-web-components/.storybook/preview.ts
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 addons from '@storybook/addons';
-import { CURRENT_THEME } from './addon-carbon-theme/shared';
-import theme from './theme';
-import container from './container';
-
-if (process.env.STORYBOOK_CARBON_CUSTOM_ELEMENTS_USE_RTL === 'true') {
-  document.documentElement.setAttribute('dir', 'rtl');
-}
-
-addons.getChannel().on(CURRENT_THEME, (theme) => {
-  document.documentElement.setAttribute('storybook-carbon-theme', theme);
-});
-
-addons.setConfig({
-  showRoots: true,
-  theme,
-});
-
-const SORT_ORDER = [
-  'introduction-welcome--page',
-  'introduction-form-paticipation--page',
-  'introduction-custom-styles--page',
-];
-
-export const parameters = {
-  layout: 'fullscreen', // https://github.com/storybookjs/storybook/issues/12041
-  options: {
-    storySort(lhs, rhs) {
-      const [lhsId] = lhs;
-      const [rhsId] = rhs;
-      const lhsSortOrder = SORT_ORDER.indexOf(lhsId);
-      const rhsSortOrder = SORT_ORDER.indexOf(rhsId);
-      if (lhsSortOrder >= 0 && rhsSortOrder >= 0) {
-        return lhsSortOrder - rhsSortOrder;
-      }
-      return 0;
-    },
-    theme,
-  },
-};
-
-export const decorators = [
-  function decoratorContainer(story) {
-    const result = story();
-    const { hasMainTag } = result as any;
-    return container({ hasMainTag, children: result });
-  },
-];
diff --git a/packages/carbon-web-components/.storybook/templates/with-layer.scss b/packages/carbon-web-components/.storybook/templates/with-layer.scss
new file mode 100644
index 00000000000..fa1ea5b5eb6
--- /dev/null
+++ b/packages/carbon-web-components/.storybook/templates/with-layer.scss
@@ -0,0 +1,38 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/colors';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/tag';
+
+@use '@carbon/styles/scss/config' as *;
+
+.#{$prefix}--with-layer__layer {
+  position: relative;
+  border: 1px dashed colors.$purple-50;
+}
+
+.#{$prefix}--with-layer__layer .#{$prefix}--with-layer__layer {
+  background-color: theme.$layer;
+  margin-block-start: spacing.$spacing-07;
+}
+
+.#{$prefix}--with-layer__label {
+  @include type.type-style('code-01');
+
+  display: inline-flex;
+  padding: spacing.$spacing-02;
+  background-color: tag.$tag-background-purple;
+  color: tag.$tag-color-purple;
+  column-gap: spacing.$spacing-02;
+}
+
+.#{$prefix}--with-layer__content {
+  padding: spacing.$spacing-05;
+}
diff --git a/packages/carbon-web-components/.storybook/templates/with-layer.ts b/packages/carbon-web-components/.storybook/templates/with-layer.ts
new file mode 100644
index 00000000000..c4b7c034002
--- /dev/null
+++ b/packages/carbon-web-components/.storybook/templates/with-layer.ts
@@ -0,0 +1,90 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import Layers from '@carbon/icons/lib/layers/16';
+import { prefix } from '../../src/globals/settings';
+
+import styles from './with-layer.scss';
+
+/**
+ * Storybook template layer component, strictly for presentation purposes
+ *
+ * @element sb-template-layers
+ * @slot The elements contained within the component.
+ */
+@customElement(`sb-template-layers`)
+class CDSLayer extends LitElement {
+  @property()
+  content;
+
+  private _handleSlotChange({ target }: Event) {
+    if (!this.content) {
+      const content = (target as HTMLSlotElement)
+        .assignedNodes()
+        .filter(
+          (node) =>
+            node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+        );
+
+      this.content = content[0];
+    }
+  }
+
+  updated() {
+    if (this.content) {
+      const layer2 = this.content.cloneNode(true) as HTMLElement;
+      const layer3 = this.content.cloneNode(true) as HTMLElement;
+      layer2.setAttribute('slot', 'layer-2');
+      layer3.setAttribute('slot', 'layer-3');
+      this.appendChild(layer2);
+      this.appendChild(layer3);
+    }
+  }
+
+  render() {
+    return html`
+      <div class="${prefix}--with-layer">
+        <div class="${prefix}--with-layer__layer">
+          <div class="${prefix}--with-layer__label">${Layers()} Layer 1</div>
+          <div class="${prefix}--with-layer__content">
+            <cds-layer>
+              <slot @slotchange="${this._handleSlotChange}"></slot>
+              <div class="${prefix}--with-layer__layer">
+                <div class="${prefix}--with-layer__label">
+                  ${Layers()} Layer 2
+                </div>
+                <div class="${prefix}--with-layer__content">
+                  <cds-layer>
+                    <slot name="layer-2"></slot>
+                    <div class="${prefix}--with-layer__layer">
+                      <div class="${prefix}--with-layer__label">
+                        ${Layers()} Layer 3
+                      </div>
+                      <div class="${prefix}--with-layer__content">
+                        <cds-layer>
+                          <slot name="layer-3"></slot>
+                        </cds-layer>
+                      </div>
+                    </div>
+                  </cds-layer>
+                </div>
+              </div>
+            </cds-layer>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSLayer;
diff --git a/packages/carbon-web-components/.storybook/theme.js b/packages/carbon-web-components/.storybook/theme.js
new file mode 100644
index 00000000000..28e84b9a897
--- /dev/null
+++ b/packages/carbon-web-components/.storybook/theme.js
@@ -0,0 +1,21 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { create } from '@storybook/theming';
+import { version } from '../package.json';
+
+export default create({
+  // Typography
+  fontBase: "'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif",
+  fontCode:
+    "'IBM Plex Mono', Menlo, 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace",
+  brandTitle: `@carbon/web-components ${version}`,
+  brandUrl:
+    'https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components',
+});
diff --git a/packages/carbon-web-components/.storybook/theme.ts b/packages/carbon-web-components/.storybook/theme.ts
deleted file mode 100644
index 7f68c04d567..00000000000
--- a/packages/carbon-web-components/.storybook/theme.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { create, ThemeVars } from '@storybook/theming';
-import { version } from '../package.json';
-
-export default create({
-  brandTitle: `@carbon/web-components ${version}`,
-  brandUrl:
-    'https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components',
-} as ThemeVars);
diff --git a/packages/carbon-web-components/README.md b/packages/carbon-web-components/README.md
index 60836cba3f2..a48f99a0afa 100644
--- a/packages/carbon-web-components/README.md
+++ b/packages/carbon-web-components/README.md
@@ -80,12 +80,12 @@ version `v1.16.0`):
 <!-- By `latest` tag -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.min.js"></script>
 
 <!-- By specific version -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/version/v1.16.0/accordion.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.min.js"></script>
 ```
 
 These are the list of available components via CDN:
@@ -139,12 +139,12 @@ extention from `.min.js` to `.rtl.min.js`. For example:
 <!-- By `latest` tag (RTL) -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.rtl.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.rtl.min.js"></script>
 
 <!-- By specific version (RTL) -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon/web-components/version/v1.16.0/accordion.rtl.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon/web-components/version/v2.0.0/accordion.rtl.min.js"></script>
 ```
 
 #### Basic usage
@@ -158,24 +158,24 @@ directly used once the script tag has been added to the page. For example:
   <head>
     <script
       type="module"
-      src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/dropdown.min.js"></script>
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
     <style type="text/css">
       // Suppresses the custom element until it has been defined
-      bx-dropdown:not(:defined),
-      bx-dropdown-item:not(:defined) {
+      cds-dropdown:not(:defined),
+      cds-dropdown-item:not(:defined) {
         visibility: hidden;
       }
     </style>
   </head>
   <body>
     <div id="app">
-      <bx-dropdown trigger-content="Select an item">
-        <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-        <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-        <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-        <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-        <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-      </bx-dropdown>
+      <cds-dropdown trigger-content="Select an item">
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+      </cds-dropdown>
     </div>
   </body>
 </html>
@@ -184,7 +184,7 @@ directly used once the script tag has been added to the page. For example:
 Our example at [CodeSandbox](https://codesandbox.io) shows usage with only CDN
 artifacts:
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/cdn)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/cdn)
 
 ### Using ES imports
 
@@ -224,7 +224,7 @@ yarn add @carbon/web-components
 
 Our example at [CodeSandbox](https://codesandbox.io) shows the most basic usage:
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic)
 
 The first thing you need is **setting up a module bundler** to resolve
 ECMAScript `import`s. The above example uses [Webpack](https://webpack.js.org),
@@ -242,13 +242,13 @@ Once you've imported the component modules, you can use our components in the
 same manner as native HTML tags, for example:
 
 ```html
-<bx-dropdown trigger-content="Select an item">
-  <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-  <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-  <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-  <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-  <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-</bx-dropdown>
+<cds-dropdown trigger-content="Select an item">
+  <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+  <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+  <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+  <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+  <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+</cds-dropdown>
 ```
 
 ### Other usage guides
@@ -272,8 +272,6 @@ turn, this also comes with the benefits of encapsulation within the Shadow DOM:
 
 ### Angular
 
-[![Edit carbon-web-components with Angular](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/angular)
-
 Angular users can use our components in the same manner as native HTML tags,
 too, once you add
 [`CUSTOM_ELEMENTS_SCHEMA`](https://angular.io/api/core/CUSTOM_ELEMENTS_SCHEMA)
@@ -309,7 +307,7 @@ application can use those `.d.ts` files:
 
 ### React
 
-[![Edit carbon-web-components with React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/react)
+[![Edit carbon-web-components with React](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/react)
 
 You can use wrapper React components in
 `@carbon/web-components/es/components-react` generated
@@ -320,17 +318,17 @@ example:
 ```javascript
 import React from 'react';
 import { render } from 'react-dom';
-import BXDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
-import BXDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
+import CDSDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
+import CDSDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
 
 const App = () => (
-  <BXDropdown triggerContent="Select an item">
-    <BXDropdownItem value="all">Option 1</BXDropdownItem>
-    <BXDropdownItem value="cloudFoundry">Option 2</BXDropdownItem>
-    <BXDropdownItem value="staging">Option 3</BXDropdownItem>
-    <BXDropdownItem value="dea">Option 4</BXDropdownItem>
-    <BXDropdownItem value="router">Option 5</BXDropdownItem>
-  </BXDropdown>
+  <CDSDropdown triggerContent="Select an item">
+    <CDSDropdownItem value="all">Option 1</CDSDropdownItem>
+    <CDSDropdownItem value="cloudFoundry">Option 2</CDSDropdownItem>
+    <CDSDropdownItem value="staging">Option 3</CDSDropdownItem>
+    <CDSDropdownItem value="dea">Option 4</CDSDropdownItem>
+    <CDSDropdownItem value="router">Option 5</CDSDropdownItem>
+  </CDSDropdown>
 );
 
 render(<App />, document.getElementById('root'));
@@ -343,15 +341,15 @@ To run the wrapper React components in SSR environment requires Node `12.16.3`
 or above that supports
 ["conditional mapping" feature](https://github.com/jkrems/proposal-pkg-exports#2-conditional-mapping):
 
-[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/react-ssr)
+[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/react-ssr)
 
 Same Node version requirement applies to Next.js:
 
-[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/next)
+[![Edit carbon-web-components with React SSR](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/next)
 
 ### Vue
 
-[![Edit carbon-web-components with Vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/vue)
+[![Edit carbon-web-components with Vue](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/vue)
 
 Vue users can use our components in the same manner as native HTML tags, without
 any additional steps!
@@ -360,16 +358,8 @@ any additional steps!
 
 1. Fork this repository and clone it
 2. `yarn install`
-3. `yarn wca && yarn storybook`
-
-## Running React/Angular/Vue Storybook demo
-
-- React: `yarn storybook:react` (Live demo:
-  https://web-components.carbondesignsystem.com/react/index.html)
-- Angular: `yarn storybook:angular` (Live demo:
-  https://web-components.carbondesignsystem.com/angular/index.html)
-- Vue: `yarn storybook:vue` (Live demo:
-  https://web-components.carbondesignsystem.com/vue/index.html)
+3. `cd packages/carbon-web-components`
+4. `yarn wca && yarn storybook`
 
 ## List of available components
 
@@ -383,7 +373,7 @@ information in several ways:
    knobs are shown as something like `Button kind (kind)`, where `kind` is the
    attribute name
 3. Clicking the **ACTION LOGGER** tab at the bottom and interacting with the
-   selected component. You may see something like `bx-modal-closed` which
+   selected component. You may see something like `cds-modal-closed` which
    typically indicates that an event with such event type is fired. You can also
    expand the twistie to see the details of the event
 
@@ -403,7 +393,7 @@ To support IE, you need a couple additional setups:
 
 Here's an example code that shows such setup:
 
-[![Edit carbon-web-components with IE](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/ie)
+[![Edit carbon-web-components with IE](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/ie)
 
 ## Coding conventions
 
@@ -417,91 +407,3 @@ Can be found at [here](./src/coding-conventions.md).
 ```
 
 You'll see the build artifacts in `/path/to/carbon-web-components/es` directory.
-
-## Running unit test
-
-You can run unit test by:
-
-```
-> gulp test:unit
-```
-
-You can run specific test spec by:
-
-```
-> gulp test:unit -s tests/spec/dropdown_spec.ts
-```
-
-You can choose a browser (instead of Headless Chrome) by:
-
-```
-> gulp test:unit -b Firefox
-```
-
-You can keep the browser after the test (and re-run the test when files change)
-by:
-
-```
-> gulp test:unit -b Chrome -k
-```
-
-You can prevent code coverate instrumentation code from being generated by:
-
-```
-> gulp test:unit -d
-```
-
-You can update snapshots by:
-
-```
-> gulp test:unit --update-snapshot
-```
-
-Above options can be used together. This is useful to debug your code as you
-test:
-
-```
-> gulp test:unit -s tests/spec/dropdown_spec.ts -b Chrome -d -k
-```
-
-## Running build integration test
-
-You can run build integration test by:
-
-```
-> yarn test:integration:build
-```
-
-You can run a specific set of UI test steps (e.g. running
-`tests/integration/build/form-angular_steps.js` only) by:
-
-```
-> yarn test:integration:build form-angular_steps
-```
-
-By default Chrome runs in headless mode. You can show Chrome UI by:
-
-```
-> CI=false yarn test:integration:build
-```
-
-## Running UI integration test
-
-You can run UI integration test by:
-
-```
-> yarn test:integration:ui
-```
-
-You can run a specific set of UI test steps (e.g. running
-`tests/integration/ui/dropdown_steps.js` only) by:
-
-```
-> yarn test:integration:ui dropdown_steps
-```
-
-By default Chrome runs in headless mode. You can show Chrome UI by:
-
-```
-> CI=false yarn test:integration:ui
-```
diff --git a/packages/carbon-web-components/docs/carbon-cdn-style-helpers-story.mdx b/packages/carbon-web-components/docs/carbon-cdn-style-helpers-story.mdx
new file mode 100644
index 00000000000..7ccad1036c6
--- /dev/null
+++ b/packages/carbon-web-components/docs/carbon-cdn-style-helpers-story.mdx
@@ -0,0 +1,6 @@
+import { Description, Meta } from '@storybook/addon-docs/blocks';
+import readme from './carbon-cdn-style-helpers.md';
+
+<Meta title="Introduction/Carbon CDN style helpers" />
+
+<Description markdown={readme} />
diff --git a/packages/carbon-web-components/docs/carbon-cdn-style-helpers.md b/packages/carbon-web-components/docs/carbon-cdn-style-helpers.md
new file mode 100644
index 00000000000..2aa26d2c78c
--- /dev/null
+++ b/packages/carbon-web-components/docs/carbon-cdn-style-helpers.md
@@ -0,0 +1,328 @@
+# Carbon CDN Style Helpers
+<!-- prettier-ignore-start -->
+<!-- START doctoc generated TOC please keep comment here to allow auto update -->
+<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
+## Table of contents
+
+- [Overview](#overview)
+- [Plex fonts and Carbon reset](#plex-fonts-and-carbon-reset)
+- [Carbon grid](#carbon-grid)
+- [Carbon theme zoning classes](#carbon-theme-zoning-classes)
+  - [Available classes](#available-classes)
+  - [Example usage](#example-usage)
+
+<!-- END doctoc generated TOC please keep comment here to allow auto update -->
+<!-- prettier-ignore-end -->
+
+## Overview
+
+In order to minimize the necessity of using front-end bundlers with the Carbon Web Components CDN artifacts, page level styles artifacts are also
+available to use.
+
+If your application is not already compiling its own version of the below 
+artifacts, these can be included as part of your project.
+
+> NOTE: The latest/next tags are moving versions. While beneficial to
+> always stay on the most recent version, it is recommended to choose a specific
+> version and properly test your application when upgrading to a newer version.
+> Check for latest version number on [npm](https://www.npmjs.com/package/@carbon/ibmdotcom-web-components).
+
+## Plex fonts and Carbon reset
+
+The following includes Carbon reset, as well as imports Plex fonts necessary for
+the page. Note, this will import `IBM Plex Sans`, `IBM Plex Serif`, and `IBM Plex Mono`.
+
+```html
+// SPECIFIC VERSION
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v1.x.y]/plex.css" />
+
+// LATEST tag
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+
+// NEXT tag
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/plex.css" />
+```
+
+### Alternative: individual Plex family loading
+
+Plex fonts are also available as CSS artifacts, where the Plex font families can be loaded in individually. 
+
+Available CSS files:
+
+| IBM Plex Mono (all)             | https://1.www.s81c.com/common/carbon/plex/mono.css                   |
+|---------------------------------|----------------------------------------------------------------------|
+| IBM Plex Mono Bold              | https://1.www.s81c.com/common/carbon/plex/mono-bold.css              |
+| IBM Plex Mono Bold Italic       | https://1.www.s81c.com/common/carbon/plex/mono-bold-italic.css       |
+| IBM Plex Mono ExtraLight        | https://1.www.s81c.com/common/carbon/plex/mono-extralight.css        |
+| IBM Plex Mono ExtraLight Italic | https://1.www.s81c.com/common/carbon/plex/mono-extralight-italic.css |
+| IBM Plex Mono Italic            | https://1.www.s81c.com/common/carbon/plex/mono-italic.css            |
+| IBM Plex Mono Light             | https://1.www.s81c.com/common/carbon/plex/mono-light.css             |
+| IBM Plex Mono Light Italic      | https://1.www.s81c.com/common/carbon/plex/mono-light-italic.css      |
+| IBM Plex Mono Medium            | https://1.www.s81c.com/common/carbon/plex/mono-medium.css            |
+| IBM Plex Mono Medium Italic     | https://1.www.s81c.com/common/carbon/plex/mono-medium-italic.css     |
+| IBM Plex Mono                   | https://1.www.s81c.com/common/carbon/plex/mono-regular.css           |
+| IBM Plex Mono SemiBold          | https://1.www.s81c.com/common/carbon/plex/mono-semibold.css          |
+| IBM Plex Mono SemiBold Italic   | https://1.www.s81c.com/common/carbon/plex/mono-semibold-italic.css   |
+| IBM Plex Mono Text              | https://1.www.s81c.com/common/carbon/plex/mono-text.css              |
+| IBM Plex Mono Text Italic       | https://1.www.s81c.com/common/carbon/plex/mono-text-italic.css       |
+| IBM Plex Mono Thin              | https://1.www.s81c.com/common/carbon/plex/mono-thin.css              |
+| IBM Plex Mono Thin Italic       | https://1.www.s81c.com/common/carbon/plex/mono-thin-italic.css       |
+
+| IBM Plex Sans (all)             | https://1.www.s81c.com/common/carbon/plex/sans.css                   |
+|---------------------------------|----------------------------------------------------------------------|
+| IBM Plex Sans Bold              | https://1.www.s81c.com/common/carbon/plex/sans-bold.css              |
+| IBM Plex Sans Bold Italic       | https://1.www.s81c.com/common/carbon/plex/sans-bold-italic.css       |
+| IBM Plex Sans ExtraLight        | https://1.www.s81c.com/common/carbon/plex/sans-extralight.css        |
+| IBM Plex Sans ExtraLight Italic | https://1.www.s81c.com/common/carbon/plex/sans-extralight-italic.css |
+| IBM Plex Sans Italic            | https://1.www.s81c.com/common/carbon/plex/sans-italic.css            |
+| IBM Plex Sans Light             | https://1.www.s81c.com/common/carbon/plex/sans-light.css             |
+| IBM Plex Sans Light Italic      | https://1.www.s81c.com/common/carbon/plex/sans-light-italic.css      |
+| IBM Plex Sans Medium            | https://1.www.s81c.com/common/carbon/plex/sans-medium.css            |
+| IBM Plex Sans Medium Italic     | https://1.www.s81c.com/common/carbon/plex/sans-medium-italic.css     |
+| IBM Plex Sans                   | https://1.www.s81c.com/common/carbon/plex/sans-regular.css           |
+| IBM Plex Sans SemiBold          | https://1.www.s81c.com/common/carbon/plex/sans-semibold.css          |
+| IBM Plex Sans SemiBold Italic   | https://1.www.s81c.com/common/carbon/plex/sans-semibold-italic.css   |
+| IBM Plex Sans Text              | https://1.www.s81c.com/common/carbon/plex/sans-text.css              |
+| IBM Plex Sans Text Italic       | https://1.www.s81c.com/common/carbon/plex/sans-text-italic.css       |
+| IBM Plex Sans Thin              | https://1.www.s81c.com/common/carbon/plex/sans-thin.css              |
+| IBM Plex Sans Thin Italic       | https://1.www.s81c.com/common/carbon/plex/sans-thin-italic.css       |
+
+| IBM Plex Sans Arabic (all)      | https://1.www.s81c.com/common/carbon/plex/sans-arabic.css            |
+|---------------------------------|----------------------------------------------------------------------|
+| IBM Plex Sans Arabic Bold       | https://1.www.s81c.com/common/carbon/plex/sans-arabic-bold.css       |
+| IBM Plex Sans Arabic ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-arabic-extralight.css |
+| IBM Plex Sans Arabic Light      | https://1.www.s81c.com/common/carbon/plex/sans-arabic-light.css      |
+| IBM Plex Sans Arabic Medium     | https://1.www.s81c.com/common/carbon/plex/sans-arabic-medium.css     |
+| IBM Plex Sans Arabic            | https://1.www.s81c.com/common/carbon/plex/sans-arabic-regular.css    |
+| IBM Plex Sans Arabic SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-arabic-semibold.css   |
+| IBM Plex Sans Arabic Text       | https://1.www.s81c.com/common/carbon/plex/sans-arabic-text.css       |
+| IBM Plex Sans Arabic Thin       | https://1.www.s81c.com/common/carbon/plex/sans-arabic-thin.css       |
+
+| IBM Plex Sans Cond (all)        | https://1.www.s81c.com/common/carbon/plex/sans-condensed.css                   |
+|---------------------------------|--------------------------------------------------------------------------------|
+| IBM Plex Sans Cond Bold         | https://1.www.s81c.com/common/carbon/plex/sans-condensed-bold.css              |
+| IBM Plex Sans Cond Bold Italic  | https://1.www.s81c.com/common/carbon/plex/sans-condensed-bold-italic.css       |
+| IBM Plex Sans Cond ExtLt        | https://1.www.s81c.com/common/carbon/plex/sans-condensed-extralight.css        |
+| IBM Plex Sans Cond ExtLt Italic | https://1.www.s81c.com/common/carbon/plex/sans-condensed-extralight-italic.css |
+| IBM Plex Sans Cond Italic       | https://1.www.s81c.com/common/carbon/plex/sans-condensed-italic.css            |
+| IBM Plex Sans Cond Light        | https://1.www.s81c.com/common/carbon/plex/sans-condensed-light.css             |
+| IBM Plex Sans Cond Light Italic | https://1.www.s81c.com/common/carbon/plex/sans-condensed-light-italic.css      |
+| IBM Plex Sans Cond Medm         | https://1.www.s81c.com/common/carbon/plex/sans-condensed-medium.css            |
+| IBM Plex Sans Cond Medm Italic  | https://1.www.s81c.com/common/carbon/plex/sans-condensed-medium-italic.css     |
+| IBM Plex Sans Cond              | https://1.www.s81c.com/common/carbon/plex/sans-condensed-regular.css           |
+| IBM Plex Sans Cond SmBld        | https://1.www.s81c.com/common/carbon/plex/sans-condensed-semibold.css          |
+| IBM Plex Sans Cond SmBld Italic | https://1.www.s81c.com/common/carbon/plex/sans-condensed-semibold-italic.css   |
+| IBM Plex Sans Cond Text         | https://1.www.s81c.com/common/carbon/plex/sans-condensed-text.css              |
+| IBM Plex Sans Cond Text Italic  | https://1.www.s81c.com/common/carbon/plex/sans-condensed-text-italic.css       |
+| IBM Plex Sans Cond Thin         | https://1.www.s81c.com/common/carbon/plex/sans-condensed-thin.css              |
+| IBM Plex Sans Cond Thin Italic  | https://1.www.s81c.com/common/carbon/plex/sans-condensed-thin-italic.css       |
+
+| IBM Plex Sans Devanagari (all)      | https://1.www.s81c.com/common/carbon/plex/sans-devanagari.css            |
+|-------------------------------------|--------------------------------------------------------------------------|
+| IBM Plex Sans Devanagari Bold       | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-bold.css       |
+| IBM Plex Sans Devanagari ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-extralight.css |
+| IBM Plex Sans Devanagari Light      | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-light.css      |
+| IBM Plex Sans Devanagari Medium     | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-medium.css     |
+| IBM Plex Sans Devanagari            | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-regular.css    |
+| IBM Plex Sans Devanagari SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-semibold.css   |
+| IBM Plex Sans Devanagari Text       | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-text.css       |
+| IBM Plex Sans Devanagari Thin       | https://1.www.s81c.com/common/carbon/plex/sans-devanagari-thin.css       |
+
+| IBM Plex Sans Hebrew (all)      | https://1.www.s81c.com/common/carbon/plex/sans-hebrew.css            |
+|---------------------------------|----------------------------------------------------------------------|
+| IBM Plex Sans Hebrew Bold       | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-bold.css       |
+| IBM Plex Sans Hebrew ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-extralight.css |
+| IBM Plex Sans Hebrew Light      | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-light.css      |
+| IBM Plex Sans Hebrew Medium     | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-medium.css     |
+| IBM Plex Sans Hebrew            | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-regular.css    |
+| IBM Plex Sans Hebrew SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-semibold.css   |
+| IBM Plex Sans Hebrew Text       | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-text.css       |
+| IBM Plex Sans Hebrew Thin       | https://1.www.s81c.com/common/carbon/plex/sans-hebrew-thin.css       |
+
+| IBM Plex Sans JP (all)      | https://1.www.s81c.com/common/carbon/plex/sans-jp.css            |
+|-----------------------------|------------------------------------------------------------------|
+| IBM Plex Sans JP Bold       | https://1.www.s81c.com/common/carbon/plex/sans-jp-bold.css       |
+| IBM Plex Sans JP ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-jp-extralight.css |
+| IBM Plex Sans JP Light      | https://1.www.s81c.com/common/carbon/plex/sans-jp-light.css      |
+| IBM Plex Sans JP Medium     | https://1.www.s81c.com/common/carbon/plex/sans-jp-medium.css     |
+| IBM Plex Sans JP            | https://1.www.s81c.com/common/carbon/plex/sans-jp-regular.css    |
+| IBM Plex Sans JP SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-jp-semibold.css   |
+| IBM Plex Sans JP Text       | https://1.www.s81c.com/common/carbon/plex/sans-jp-text.css       |
+| IBM Plex Sans JP Thin       | https://1.www.s81c.com/common/carbon/plex/sans-jp-thin.css       |
+
+| IBM Plex Sans KR (all)      | https://1.www.s81c.com/common/carbon/plex/sans-kr.css            |
+|-----------------------------|------------------------------------------------------------------|
+| IBM Plex Sans KR Bold       | https://1.www.s81c.com/common/carbon/plex/sans-kr-bold.css       |
+| IBM Plex Sans KR ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-kr-extralight.css |
+| IBM Plex Sans KR Light      | https://1.www.s81c.com/common/carbon/plex/sans-kr-light.css      |
+| IBM Plex Sans KR Medium     | https://1.www.s81c.com/common/carbon/plex/sans-kr-medium.css     |
+| IBM Plex Sans KR            | https://1.www.s81c.com/common/carbon/plex/sans-kr-regular.css    |
+| IBM Plex Sans KR SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-kr-semibold.css   |
+| IBM Plex Sans KR Text       | https://1.www.s81c.com/common/carbon/plex/sans-kr-text.css       |
+| IBM Plex Sans KR Thin       | https://1.www.s81c.com/common/carbon/plex/sans-kr-thin.css       |
+
+| IBM Plex Sans Thai (all)      | https://1.www.s81c.com/common/carbon/plex/sans-thai.css            |
+|-------------------------------|--------------------------------------------------------------------|
+| IBM Plex Sans Thai Bold       | https://1.www.s81c.com/common/carbon/plex/sans-thai-bold.css       |
+| IBM Plex Sans Thai ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-thai-extralight.css |
+| IBM Plex Sans Thai Light      | https://1.www.s81c.com/common/carbon/plex/sans-thai-light.css      |
+| IBM Plex Sans Thai Medium     | https://1.www.s81c.com/common/carbon/plex/sans-thai-medium.css     |
+| IBM Plex Sans Thai            | https://1.www.s81c.com/common/carbon/plex/sans-thai-regular.css    |
+| IBM Plex Sans Thai SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-thai-semibold.css   |
+| IBM Plex Sans Thai Text       | https://1.www.s81c.com/common/carbon/plex/sans-thai-text.css       |
+| IBM Plex Sans Thai Thin       | https://1.www.s81c.com/common/carbon/plex/sans-thai-thin.css       |
+
+| IBM Plex Sans Thai Looped (all)      | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped.css            |
+|--------------------------------------|---------------------------------------------------------------------------|
+| IBM Plex Sans Thai Looped Bold       | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-bold.css       |
+| IBM Plex Sans Thai Looped ExtraLight | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-extralight.css |
+| IBM Plex Sans Thai Looped Light      | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-light.css      |
+| IBM Plex Sans Thai Looped Medium     | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-medium.css     |
+| IBM Plex Sans Thai Looped            | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-regular.css    |
+| IBM Plex Sans Thai Looped SemiBold   | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-semibold.css   |
+| IBM Plex Sans Thai Looped Text       | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-text.css       |
+| IBM Plex Sans Thai Looped Thin       | https://1.www.s81c.com/common/carbon/plex/sans-thai-looped-thin.css       |
+
+| IBM Plex Serif (all)        | https://1.www.s81c.com/common/carbon/plex/serif.css                   |
+|-----------------------------|-----------------------------------------------------------------------|
+| IBM Plex Serif Bold         | https://1.www.s81c.com/common/carbon/plex/serif-bold.css              |
+| IBM Plex Serif Bold Italic  | https://1.www.s81c.com/common/carbon/plex/serif-bold-italic.css       |
+| IBM Plex Serif ExtLt        | https://1.www.s81c.com/common/carbon/plex/serif-extralight.css        |
+| IBM Plex Serif ExtLt Italic | https://1.www.s81c.com/common/carbon/plex/serif-extralight-italic.css |
+| IBM Plex Serif Italic       | https://1.www.s81c.com/common/carbon/plex/serif-italic.css            |
+| IBM Plex Serif Light        | https://1.www.s81c.com/common/carbon/plex/serif-light.css             |
+| IBM Plex Serif Light Italic | https://1.www.s81c.com/common/carbon/plex/serif-light-italic.css      |
+| IBM Plex Serif Medm         | https://1.www.s81c.com/common/carbon/plex/serif-medium.css            |
+| IBM Plex Serif Medm Italic  | https://1.www.s81c.com/common/carbon/plex/serif-medium-italic.css     |
+| IBM Plex Serif              | https://1.www.s81c.com/common/carbon/plex/serif-regular.css           |
+| IBM Plex Serif SmBld        | https://1.www.s81c.com/common/carbon/plex/serif-semibold.css          |
+| IBM Plex Serif SmBld Italic | https://1.www.s81c.com/common/carbon/plex/serif-semibold-italic.css   |
+| IBM Plex Serif Text         | https://1.www.s81c.com/common/carbon/plex/serif-text.css              |
+| IBM Plex Serif Text Italic  | https://1.www.s81c.com/common/carbon/plex/serif-text-italic.css       |
+| IBM Plex Serif Thin         | https://1.www.s81c.com/common/carbon/plex/serif-thin.css              |
+| IBM Plex Serif Thin Italic  | https://1.www.s81c.com/common/carbon/plex/serif-thin-italic.css       |
+
+And the full plex package (excluding `jp` and `kr`):
+
+- https://1.www.s81c.com/common/carbon/plex/plex-full.css
+
+Example usage:
+
+```html
+<html>
+<head>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+  <style>
+    body {
+      font-family: IBM Plex Sans,Helvetica Neue,Arial,sans-serif;
+    }
+  </style>
+  ...
+</head>
+<body>
+...
+</body>
+</html>
+```
+
+### Non-latin dynamic font loader
+
+A dynamic font loader for non-Latin fonts is available, called `load-non-latin-plex`. This utility is
+available at the following CDN url:
+
+- https://1.www.s81c.com/common/carbon/plex/load-non-latin-plex.js
+
+Usage:
+
+```html
+<script src="https://1.www.s81c.com/common/carbon/plex/load-non-latin-plex.js"></script>
+```
+
+Note, this script loads in the font based on the detected 2-character language code in the `window.digitalData` object.
+
+For more details, visit: https://www.ibm.com/standards/carbon/developing/building-for-ibm-dotcom/#page-language
+
+
+## Carbon grid
+
+The following includes Carbon grid and all corresponding grid classes.
+
+```html
+// SPECIFIC VERSION
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/grid.css" />
+
+// LATEST tag
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+
+// NEXT tag
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/grid.css" />
+```
+
+[Learn more about the Carbon 2x Grid](https://carbondesignsystem.com/guidelines/2x-grid/overview)
+
+## Carbon theme zoning classes
+
+The following includes classes for creating Carbon theme zones (white, g10, g90, 
+g100). Note that these classes take advantage of using CSS Custom Properties enabled
+in Carbon.
+
+```html
+// SPECIFIC VERSION
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/themes.css" />
+
+// LATEST tag
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
+
+// NEXT tag
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/themes.css" />
+```
+
+### Available classes
+
+| Theme  | Class name              |
+| ------ | ----------------------- |
+| white  | `.cds-theme-zone-white` |
+| g10    | `.cds-theme-zone-g10`   |
+| g90    | `.cds-theme-zone-g90`   |
+| g100   | `.cds-theme-zone-g100`  |
+
+### Example usage
+
+```html
+<html>
+<head>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/themes.css" />
+  <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/dropdown.min.js"
+    ></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/button.min.js"
+    ></script>
+     <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/tag.min.js"
+    ></script>
+
+  ...
+</head>
+<body>
+<cds-dropdown value="bar" class="cds-theme-zone-white">
+      <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
+      <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
+      <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
+    </cds-dropdown>
+    <div
+      class="cds-theme-zone-g100"
+      style="padding: 50px; background: var(--cds-background)"
+    >
+      <cds-button kind="tertiary">button</cds-button>
+      <cds-tag filter type="red" title="Clear selection">
+        This is a tag
+      </cds-tag>
+    </div>
+  </div>
+</body>
+</html>
+```
diff --git a/packages/carbon-web-components/docs/form-story.mdx b/packages/carbon-web-components/docs/form-story.mdx
index a32e682832a..8586730a246 100644
--- a/packages/carbon-web-components/docs/form-story.mdx
+++ b/packages/carbon-web-components/docs/form-story.mdx
@@ -4,7 +4,7 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 # Having components participate in form
 
-Though form elements in `carbon-web-components` (e.g. `<bx-input>`) are not native form elements like `<input>`, form elements in `carbon-web-components` have some extra APIs that align well to web/framework standards that allow those form elements to participate in form.
+Though form elements in `@carbon/web-components` (e.g. `<cds-text-input>`) are not native form elements like `<input>`, they have some extra APIs that align well with web/framework standards.
 
 ## `formdata` event
 
@@ -24,13 +24,13 @@ button.addEventListener('click', () => {
   });
   event.formData = formData;
   form.dispatchEvent(event);
-  // Now `formData` is populated with the data in components such as `<bx-input>` or `<bx-dropdown>`, etc. in the `<form>`.
+  // `formData` is populated with the data in components such as `<cds-text-input>` or `<cds-dropdown>`, etc. in the `<form>`.
   // You can use `formData` with `fetch()`/XHR instead of letting `<form>` submit the data
 });
 ```
 
 <iframe
-  src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/form/basic?fontsize=14&hidenavigation=1&theme=light"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/form/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
   style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
   title="carbon-web-components-getting-started"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
diff --git a/packages/carbon-web-components/docs/form.md b/packages/carbon-web-components/docs/form.md
index 2d52546c5ea..20c83256458 100644
--- a/packages/carbon-web-components/docs/form.md
+++ b/packages/carbon-web-components/docs/form.md
@@ -1,6 +1,6 @@
 # Having components participate in form
 
-Though form elements in `carbon-web-components` (e.g. `<bx-input>`) are not native form elements like `<input>`, form elements in `carbon-web-components` have some extra APIs that align well to web/framework standards that allow those form elements to participate in form.
+Though form elements in `@carbon/web-components` (e.g. `<cds-text-input>`) are not native form elements like `<input>`, they have some extra APIs that align well with web/framework standards.
 
 ## `formdata` event
 
@@ -20,12 +20,12 @@ button.addEventListener('click', () => {
   });
   event.formData = formData;
   form.dispatchEvent(event);
-  // Now `formData` is populated with the data in `<bx-input>`, etc. in the `<form>`.
+  // `formData` is populated with the data in components such as `<cds-text-input>` or `<cds-dropdown>`, etc. in the `<form>`.
   // You can use `formData` with `fetch()`/XHR instead of letting `<form>` submit the data
 });
 ```
 
-[![Edit carbon-web-components with formdata event](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/form/basic)
+[![Edit carbon-web-components with formdata event](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/form/basic)
 
 ## Redux Form
 
@@ -33,8 +33,8 @@ You can use our form components with Redux Form by creating a React component th
 
 ```javascript
 import { Field } from 'redux-form';
-import BXFormItem from '@carbon/web-components/es/components-react/form/form-item';
-import BXInput from '@carbon/web-components/es/components-react/input/input';
+import CDSFormItem from '@carbon/web-components/es/components-react/form/form-item';
+import CDSTextInput from '@carbon/web-components/es/components-react/text-input/text-input';
 
 ...
 
@@ -42,8 +42,8 @@ import BXInput from '@carbon/web-components/es/components-react/input/input';
 const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
   const validityMessage = !touched ? undefined : error;
   return (
-    <BXFormItem>
-      <BXInput
+    <CDSFormItem>
+      <CDSTextInput
         {...input}
         invalid={Boolean(validityMessage)}
         label-text={label}
@@ -51,7 +51,7 @@ const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
         placeholder={label}
         validityMessage={validityMessage}
       />
-    </BXFormItem>
+    </CDSFormItem>
   );
 };
 
@@ -60,4 +60,4 @@ const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
 <Field name="username" type="text" component={FieldImpl} label="Username" />
 ```
 
-[![Edit carbon-web-components with Redux Form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/form/redux-form)
+[![Edit carbon-web-components with Redux Form](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/feat/cwc-v2/examples/codesandbox/form/redux-form)
diff --git a/packages/carbon-web-components/docs/old-build-toolchain.md b/packages/carbon-web-components/docs/old-build-toolchain.md
index 96b84561e27..a24f7cd0358 100644
--- a/packages/carbon-web-components/docs/old-build-toolchain.md
+++ b/packages/carbon-web-components/docs/old-build-toolchain.md
@@ -16,7 +16,7 @@ module: {
     {
       test: /\.js$/,
       include: [
-        path.dirname(require.resolve('carbon-web-components/es')),
+        path.dirname(require.resolve('@carbon/web-components/es')),
       ],
       use: [
         {
diff --git a/packages/carbon-web-components/docs/styling-story.mdx b/packages/carbon-web-components/docs/styling-story.mdx
index a597b5cc24d..395df4cbbc3 100644
--- a/packages/carbon-web-components/docs/styling-story.mdx
+++ b/packages/carbon-web-components/docs/styling-story.mdx
@@ -4,9 +4,10 @@ import { Meta } from '@storybook/addon-docs/blocks';
 
 # Using custom styles in components
 
-As Shadow DOM (one of the Web Components specs that `carbon-web-components` uses) promises, styles that `carbon-web-components` defines does not affect styles in your application, or vice versa.
+As Shadow DOM (one of the Web Components specs that `@carbon/web-components` uses) promises, styles that `@carbon/web-components` defines does not affect styles in your application, or vice versa.
 
-However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options.
+However, in cases where your application or a Carbon-derived style guide wants
+to change the styles of our components, there are a few options.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -14,20 +15,25 @@ However, in cases where your application or a Carbon-derived style guide wants t
 - [Using CSS Custom Properties](#using-css-custom-properties)
 - [Dependency injection](#dependency-injection)
 - [Creating derived components with different style](#creating-derived-components-with-different-style)
-- [CSS Shadow Parts](#css-shadow-parts)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
+
 ## Using CSS Custom Properties
 
-Changes to CSS Custom Properties of the Carbon theme are reflected in the color scheme of `carbon-web-components` components:
+Changes to CSS Custom Properties of the Carbon theme are reflected in the color
+scheme of `@carbon/web-components` components:
 
 <iframe
-  src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/theme-zoning?fontsize=14&hidenavigation=1&theme=light"
-  style={{ width: '100%', height: '700px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
+  style={{
+    width: '100%',
+    height: '700px',
+    border: 'solid rgba(0,0,0,0.1) 1px',
+    boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
+  }}
   title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
 
 For example, if you add CSS like below:
 
@@ -37,69 +43,64 @@ footer {
 }
 ```
 
-The color of the button in the code below changes to the one in the `g100` theme:
+The color of the button in the code below changes to the one in the `g100`
+theme:
 
 ```html
 <footer>
-  <bx-btn kind="secondary">Secondary button</bx-btn>
+  <cds-button kind="secondary">Secondary button</cds-button>
 </footer>
 ```
 
-The names of CSS Custom Properties you can use are the Carbon theme tokens prefixed with `--cds-`. The list of Carbon theme tokens can be found at [here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454).
+The names of CSS Custom Properties you can use are the Carbon theme tokens
+prefixed with `--cds-`. The list of Carbon theme tokens can be found at
+[here](https://github.com/carbon-design-system/carbon/blob/v11.34.1/packages/themes/src/index.js).
 
-With CSS Custom Properties approach, you can switch the entire theme under the specific element by:
+With CSS Custom Properties approach, you can switch the entire theme under the
+specific element by:
 
 ```css
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use "@carbon/styles/scss/reset";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/themes";
 
 footer {
-  @include carbon--theme($carbon--theme--g100, true); // Emits all theme tokens in CSS Custom Properties
-}
+   @include theme.theme(themes.$g100);
+ } // Emits all theme tokens in CSS Custom Properties
 ```
 
-## Dependency injection
-
-You can let our custom elements modules load alternate `CSSResult` module. Below example uses [Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) to let our custom elements modules load RTL version of `CSSResult` module that is shipped alongside with default `CSSResult` modules, instead of loading the default version:
+Some components such as `Button`, `Notification`, & `Tag` have specific tokens per theme
+that need to emitted in the styles. You can do this for example by adding the
+following:
 
-```javascript
-const reCssBundle = /\.css\.js$/i;
-
-...
-
-module.exports = {
-  ...
-  plugins: [
-    ...
-    new webpack.NormalModuleReplacementPlugin(reCssBundle, resource => {
-      resource.request = resource.request.replace(reCssBundle, '.rtl.css.js');
-    }),
-  ],
-  ...
-};
+```css
+@use "@carbon/styles/scss/reset";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/themes";
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
-<iframe
-  src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/rtl?fontsize=14&hidenavigation=1&theme=light"
-  style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
-  title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
-
 ## Creating derived components with different style
 
-You can create a derived class of our component and override [static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), like:
+You can create a derived class of our component and override
+[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles),
+like:
 
 ```javascript
-import { css, customElement } from 'lit-element';
-import BXDropdown from '@carbon/web-components/es/components/dropdown/dropdown';
+import { css, customElement } from 'lit';
+import CDSDropdown from '@carbon/web-components/es/components/dropdown/dropdown';
 
 @customElement('my-dropdown')
-class MyDropdown extends BXDropdown {
+class MyDropdown extends CDSDropdown {
   // Custom CSS to enforce `field-02` (light) style of the dropdown
   static styles = css`
-    ${BXDropdown.styles}
-    .bx--list-box {
+    ${CDSDropdown.styles}
+    .cds--list-box {
       background-color: white;
     }
   `;
@@ -107,12 +108,12 @@ class MyDropdown extends BXDropdown {
 ```
 
 <iframe
-  src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style?fontsize=14&hidenavigation=1&theme=light"
-  style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/styling/custom-style?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
+  style={{
+    width: '100%',
+    height: '500px',
+    border: 'solid rgba(0,0,0,0.1) 1px',
+    boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0',
+  }}
   title="carbon-web-components-getting-started"
-  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
-></iframe>
-
-## CSS Shadow Parts
-
-In the future, we'd like to support [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can use your application's CSS to affect `carbon-web-components` styles in a more flexible manner.
+  sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"></iframe>
diff --git a/packages/carbon-web-components/docs/styling.md b/packages/carbon-web-components/docs/styling.md
index a23cacd71f1..c6b96e81df2 100644
--- a/packages/carbon-web-components/docs/styling.md
+++ b/packages/carbon-web-components/docs/styling.md
@@ -2,7 +2,8 @@
 
 As Shadow DOM (one of the Web Components specs that `@carbon/web-components` uses) promises, styles that `@carbon/web-components` defines does not affect styles in your application, or vice versa.
 
-However, in cases where your application or a Carbon-derived style guide wants to change the styles of our components, there are a few options.
+However, in cases where your application or a Carbon-derived style guide wants
+to change the styles of our components, there are a few options.
 
 <!-- START doctoc generated TOC please keep comment here to allow auto update -->
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
@@ -10,15 +11,15 @@ However, in cases where your application or a Carbon-derived style guide wants t
 - [Using CSS Custom Properties](#using-css-custom-properties)
 - [Dependency injection](#dependency-injection)
 - [Creating derived components with different style](#creating-derived-components-with-different-style)
-- [CSS Shadow Parts](#css-shadow-parts)
 
 <!-- END doctoc generated TOC please keep comment here to allow auto update -->
 
 ## Using CSS Custom Properties
 
-Changes to CSS Custom Properties of the Carbon theme are reflected in the color scheme of `carbon-web-components` components:
+Changes to CSS Custom Properties of the Carbon theme are reflected in the color
+scheme of `@carbon/web-components` components:
 
-[![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/theme-zoning)
+[![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning)
 
 For example, if you add CSS like below:
 
@@ -28,45 +29,58 @@ footer {
 }
 ```
 
-The color of the button in the code below changes to the one in the `g100` theme:
+The color of the button in the code below changes to the one in the `g100`
+theme:
 
 ```html
 <footer>
-  <bx-btn kind="secondary">Secondary button</bx-btn>
+  <cds-button kind="secondary">Secondary button</cds-button>
 </footer>
 ```
 
-The names of CSS Custom Properties you can use are the Carbon theme tokens prefixed with `--cds-`. The list of Carbon theme tokens can be found at [here](https://github.com/carbon-design-system/carbon/blob/v10.7.0/packages/themes/scss/generated/_themes.scss#L14-L454).
+The names of CSS Custom Properties you can use are the Carbon theme tokens
+prefixed with `--cds-`. The list of Carbon theme tokens can be found at
+[here](https://github.com/carbon-design-system/carbon/blob/v11.34.1/packages/themes/src/index.js).
 
-With CSS Custom Properties approach, you can switch the entire theme under the specific element by:
+With CSS Custom Properties approach, you can switch the entire theme under the
+specific element by:
 
 ```css
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use "@carbon/styles/scss/reset";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/themes";
 
 footer {
-  @include carbon--theme($carbon--theme--g100, true); // Emits all theme tokens in CSS Custom Properties
-}
+   @include theme.theme(themes.$g100);
+ } // Emits all theme tokens in CSS Custom Properties
 ```
 
-Some components such as `Notification` and `Tag` have specific tokens per theme that need to emitted in the styles. You can do this for example by adding the following:
+Some components such as `Button`, `Notification`, & `Tag` have specific tokens per theme
+that need to emitted in the styles. You can do this for example by adding the
+following:
 
 ```css
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
-@import 'carbon-components/src/components/tag/tag';
-.dds-theme-zone-g90 {
-  @include carbon--theme($carbon--theme--g90, true) {
-    @include emit-component-tokens($tag-colors);
-  }
-}
+@use "@carbon/styles/scss/reset";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/themes";
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
 ## Dependency injection
 
-You can let our custom elements modules load alternate `CSSResult` module. Below example uses [Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/) to let our custom elements modules load RTL version of `CSSResult` module that is shipped alongside with default `CSSResult` modules, instead of loading the default version:
+You can let our custom elements modules load alternate `CSSResult` module. Below
+example uses
+[Webpack `NormalModuleReplacementPlugin`](https://webpack.js.org/plugins/normal-module-replacement-plugin/)
+to let our custom elements modules load RTL version of `CSSResult` module that
+is shipped alongside with default `CSSResult` modules, instead of loading the
+default version:
 
-[![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/rtl)
+[![Edit @carbon/web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/p/sandbox/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/rtl?)
 
 ```javascript
 const reCssBundle = /\.css\.js$/i;
@@ -87,26 +101,24 @@ module.exports = {
 
 ## Creating derived components with different style
 
-You can create a derived class of our component and override [static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles), like:
+You can create a derived class of our component and override
+[static `styles` property](https://lit-element.polymer-project.org/guide/styles#static-styles),
+like:
 
-[![Edit carbon-web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style)
+[![Edit @carbon/web-components with custom style](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/styling/custom-style)
 
 ```javascript
-import { css, customElement } from 'lit-element';
-import BXDropdown from '@carbon/web-components/es/components/dropdown/dropdown';
+import { css, customElement } from 'lit';
+import CDSDropdown from '@carbon/web-components/es/components/dropdown/dropdown';
 
 @customElement('my-dropdown')
-class MyDropdown extends BXDropdown {
+class MyDropdown extends CDSDropdown {
   // Custom CSS to enforce `field-02` (light) style of the dropdown
   static styles = css`
-    ${BXDropdown.styles}
-    .bx--list-box {
+    ${CDSDropdown.styles}
+    .cds--list-box {
       background-color: white;
     }
   `;
 }
 ```
-
-## CSS Shadow Parts
-
-In the future, we'd like to support [CSS Shadow Parts](https://www.w3.org/TR/css-shadow-parts-1/) too, so you can use your application's CSS to affect `carbon-web-components` styles in a more flexible manner.
diff --git a/packages/carbon-web-components/docs/welcome-story.mdx b/packages/carbon-web-components/docs/welcome-story.mdx
index 7b17c014a93..75f89b869ca 100644
--- a/packages/carbon-web-components/docs/welcome-story.mdx
+++ b/packages/carbon-web-components/docs/welcome-story.mdx
@@ -46,10 +46,10 @@ yarn add @carbon/web-components
 
 ### Basic usage
 
-Our example at [CodeSandbox](https://codesandbox.io) shows the most basic usage:
+Our example at [Stackblitz](https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic) shows the most basic usage:
 
 <iframe
-  src="https://codesandbox.io/embed/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/basic?fontsize=14&hidenavigation=1&theme=light"
+  src="https://stackblitz.com/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic?embed=1&file=src%2Findex.js&hideExplorer=1&hideNavigation=1&theme=light&terminalHeight=0&hidedevtools=1"
   style={{ width: '100%', height: '500px', border: 'solid rgba(0,0,0,0.1) 1px', boxShadow: 'rgba(0,0,0,0.1) 0 1px 3px 0' }}
   title="carbon-web-components-getting-started"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
@@ -67,25 +67,22 @@ import '@carbon/web-components/es/components/dropdown/dropdown-item';
 Once you've imported the component modules, you can use our components in the same manner as native HTML tags, for example:
 
 ```html
-<bx-dropdown trigger-content="Select an item">
-  <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-  <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-  <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-  <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-  <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-</bx-dropdown>
+<cds-dropdown trigger-content="Select an item">
+  <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+  <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+  <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+  <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+  <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+</cds-dropdown>
 ```
 
-If you just want to try our components for demnstrations and so on, you can use CDNs that support module mapping (for example, [JSPM](https://jspm.org)). With CDNs, you can import just our modules in `<script type="module">`:
+An alternative to using a bundler are CDN artifacts which can be added client side in your html files. With CDNs, you can import the components in `<script type="module">`:
 
 ```html
 <!DOCTYPE html>
 <html>
   <head>
-    <script type="module">
-      import 'https://jspm.dev/@carbon/web-components/es/components/dropdown/dropdown.js';
-      import 'https://jspm.dev/@carbon/web-components/es/components/dropdown/dropdown-item.js';
-    </script>
+    <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
     <style type="text/css">
       #app {
         font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -93,28 +90,28 @@ If you just want to try our components for demnstrations and so on, you can use
         margin: 2rem;
       }
 
-      bx-dropdown:not(:defined),
-      bx-dropdown-item:not(:defined) {
+      cds-dropdown:not(:defined),
+      cds-dropdown-item:not(:defined) {
         visibility: hidden;
       }
     </style>
   </head>
   <body>
     <div id="app">
-      <bx-dropdown trigger-content="Select an item">
-        <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-        <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-        <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-        <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-        <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-      </bx-dropdown>
+      <cds-dropdown trigger-content="Select an item">
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+      </cds-dropdown>
     </div>
   </body>
 </html>
 ```
 
 <iframe
-  className="bx-ce-doc--demo-iframe"
+  className="cds-ce-doc--demo-iframe"
   src={basicExampleCDN}
   title="carbon-web-components-basic-example-cdn"
   sandbox="allow-modals allow-forms allow-popups allow-scripts allow-same-origin"
@@ -132,11 +129,7 @@ with your React application.
 
 This is achievable since Web Components is the modern browser standard, and
 works well with other front-end frameworks that exist in the application. In
-turn, this also comes with the benefits of encapsulation within the Shadow DOM:
-
-- [Carbon Web Components with Angular](https://web-components.carbondesignsystem.com/angular/index.html)
-- [Carbon Web Components with React](https://web-components.carbondesignsystem.com/react/index.html)
-- [Carbon Web Components with Vue](https://web-components.carbondesignsystem.com/vue/index.html)
+turn, this also comes with the benefits of encapsulation within the Shadow DOM.
 
 ### Other usage guides
 
diff --git a/packages/carbon-web-components/examples/codesandbox/angular/package.json b/packages/carbon-web-components/examples/codesandbox/angular/package.json
index db3d08ab493..b6ab15b98e9 100644
--- a/packages/carbon-web-components/examples/codesandbox/angular/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/angular/package.json
@@ -18,7 +18,7 @@
     "@angular/platform-browser-dynamic": "^8.0.0",
     "@angular/router": "^8.0.0",
     "@babel/runtime": "^7.8.0",
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "rxjs": "^6.0.0",
     "tslib": "^1.10.0",
     "zone.js": "~0.9.0"
diff --git a/packages/carbon-web-components/examples/codesandbox/angular/src/app/app.component.html b/packages/carbon-web-components/examples/codesandbox/angular/src/app/app.component.html
index 54d335d4cb6..cb7bb60dcc9 100644
--- a/packages/carbon-web-components/examples/codesandbox/angular/src/app/app.component.html
+++ b/packages/carbon-web-components/examples/codesandbox/angular/src/app/app.component.html
@@ -9,11 +9,11 @@
 
 <h1>Hello World! 👋</h1>
 <div class="app">
-  <bx-dropdown trigger-content="Select an item">
-    <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-    <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-    <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-    <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-    <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-  </bx-dropdown>
+  <cds-dropdown trigger-content="Select an item">
+    <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+    <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+    <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+    <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+    <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+  </cds-dropdown>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-banner/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/.babelrc
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/cdn.html
index 8636c40f35e..4b9c278c0ff 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/cdn.html
@@ -13,34 +13,50 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-accordion:not(:defined) {
+    cds-accordion:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.min.js"></script>
 </head>
-<body>
-  <bx-accordion>
-    <bx-accordion-item title-text="Lorem Ipsum">
+<body class="cds-theme-zone-white">
+  <cds-accordion>
+    <cds-accordion-item title="Section 1 title">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
       </p>
-    </bx-accordion-item>
-    <bx-accordion-item title-text="Lorem Ipsum">
+    </cds-accordion-item>
+    <cds-accordion-item title="Section 2 title">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
       </p>
-    </bx-accordion-item>
-    <bx-accordion-item title-text="Lorem Ipsum">
+    </cds-accordion-item>
+    <cds-accordion-item title="Section 3 title">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
       </p>
-    </bx-accordion-item>
-  </bx-accordion>
+    </cds-accordion-item>
+    <cds-accordion-item title="Section 4 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
+      </p>
+    </cds-accordion-item>
+  </cds-accordion>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/index.html
index 8e4c4434861..0c28ddd2a87 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/index.html
@@ -13,34 +13,50 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+        
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-accordion:not(:defined) {
+    cds-accordion:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-accordion>
-    <bx-accordion-item title-text="Lorem Ipsum">
+  <cds-accordion>
+    <cds-accordion-item title="Section 1 title">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
       </p>
-    </bx-accordion-item>
-    <bx-accordion-item title-text="Lorem Ipsum">
+    </cds-accordion-item>
+    <cds-accordion-item title="Section 2 title">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
       </p>
-    </bx-accordion-item>
-    <bx-accordion-item title-text="Lorem Ipsum">
+    </cds-accordion-item>
+    <cds-accordion-item title="Section 3 title">
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-        aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
       </p>
-    </bx-accordion-item>
-  </bx-accordion>
+    </cds-accordion-item>
+    <cds-accordion-item title="Section 4 title">
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+        eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+        minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+        aliquip ex ea commodo consequat.
+      </p>
+    </cds-accordion-item>
+  </cds-accordion>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/package.json
index 10b2e9e8723..334ea73f845 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/accordion/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/cdn.html
index 1c5c7b1e65f..395388a22d3 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/cdn.html
@@ -13,25 +13,30 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-breadcrumb:not(:defined) {
+    cds-breadcrumb:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/breadcrumb.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/breadcrumb.min.js"></script>
 </head>
-<body>
-  <bx-breadcrumb>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-  </bx-breadcrumb>
+<body class="cds-theme-zone-white">
+  <cds-breadcrumb>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+  </cds-breadcrumb>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/index.html
index 3122bbd2249..2122648ea02 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/index.html
@@ -13,25 +13,30 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-breadcrumb:not(:defined) {
+    cds-breadcrumb:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-breadcrumb>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-  </bx-breadcrumb>
+  <cds-breadcrumb>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+  </cds-breadcrumb>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/package.json
index a81afde2f3a..fba5099c394 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/button/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/button/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/button/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/button/cdn.html
index 3f14c117dce..ab44f84655d 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/button/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/button/cdn.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-button:not(:defined) {
+    cds-button:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
 </head>
-<body>
-  <bx-btn href="https://www.ibm.com">
+<body class="cds-theme-zone-white">
+  <cds-button href="https://www.ibm.com">
     Button
-  </bx-btn>
+  </cds-button>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/button/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/button/index.html
index 145a278b78b..4a222327a1d 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/button/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/button/index.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-button:not(:defined) {
+    cds-button:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-btn href="https://www.ibm.com">
+  <cds-button href="https://www.ibm.com">
     Button
-  </bx-btn>
+  </cds-button>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/button/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/button/package.json
index 7c8b368dad4..26dd8c0354f 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/button/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/button/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/button/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/button/src/styles.scss
new file mode 100644
index 00000000000..d34691ef777
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/button/src/styles.scss
@@ -0,0 +1,13 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html
index 5ceb117ee15..24acf569beb 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-checkbox:not(:defined) {
+    cds-checkbox:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/checkbox.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/checkbox.min.js"></script>
 </head>
-<body>
-  <bx-checkbox label-text="Lorem Ipsum"></bx-checkbox>
+<body class="cds-theme-zone-white">
+  <cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/index.html
index cb73141ed1b..2acaa847709 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/index.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-checkbox:not(:defined) {
+    cds-checkbox:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-checkbox label-text="Lorem Ipsum"></bx-checkbox>
+  <cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/package.json
index c1f3716c251..4eac7e671d2 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/cdn.html
index 2ce74afd9c9..47c72e22458 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/cdn.html
@@ -13,19 +13,21 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-code-snippet:not(:defined) {
+    cds-code-snippet:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/code-snippet.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/code-snippet.min.js"></script>
 </head>
-<body>
-  <bx-code-snippet>
+<body class="cds-theme-zone-white">
+  <cds-code-snippet>
     node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae
     officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
     laboriosam!
-  </bx-code-snippet>
+  </cds-code-snippet>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/index.html
index 589fd8c1cbd..16e9c6c0596 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/index.html
@@ -13,19 +13,21 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-code-snippet:not(:defined) {
+    cds-code-snippet:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-code-snippet>
+  <cds-code-snippet>
     node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae
     officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
     laboriosam!
-  </bx-code-snippet>
+  </cds-code-snippet>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/package.json
index 2ac8573c9ae..22a12c59aca 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html
index b44172b6f93..851575cc824 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/cdn.html
@@ -13,28 +13,30 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <style>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+ <style>
     /* Suppress custom element until styles are loaded */
-    bx-combo-box:not(:defined) {
+    cds-combo-box:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/combo-box.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/combo-box.min.js"></script>
 </head>
-<body>
-  <bx-combo-box
+<body class="cds-theme-zone-white">
+  <cds-combo-box
     helper-text="Optional helper text"
-    label-text="Combo box title"
-    trigger-content="Filter..."
+    title-text="Combo box title"
+    label="Filter..."
   >
-    <bx-combo-box-item value="all">Option 1</bx-combo-box-item>
-    <bx-combo-box-item value="cloudFoundry">Option 2</bx-combo-box-item>
-    <bx-combo-box-item value="staging">Option 3</bx-combo-box-item>
-    <bx-combo-box-item value="dea">Option 4</bx-combo-box-item>
-    <bx-combo-box-item value="router">Option 5</bx-combo-box-item>
-    <bx-combo-box-item value="support">Option 6</bx-combo-box-item>
-    <bx-combo-box-item value="services">Option 7</bx-combo-box-item>
-    <bx-combo-box-item value="products">Option 8</bx-combo-box-item>
-  </bx-combo-box>
+    <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
+    <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>
+    <cds-combo-box-item value="staging">Option 3</cds-combo-box-item>
+    <cds-combo-box-item value="dea">Option 4</cds-combo-box-item>
+    <cds-combo-box-item value="router">Option 5</cds-combo-box-item>
+    <cds-combo-box-item value="support">Option 6</cds-combo-box-item>
+    <cds-combo-box-item value="services">Option 7</cds-combo-box-item>
+    <cds-combo-box-item value="products">Option 8</cds-combo-box-item>
+  </cds-combo-box>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html
index b0ece1a0a59..d9768d9e875 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/index.html
@@ -13,28 +13,30 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-combo-box:not(:defined) {
+    cds-combo-box:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-combo-box
+  <cds-combo-box
     helper-text="Optional helper text"
-    label-text="Combo box title"
-    trigger-content="Filter..."
+    title-text="Combo box title"
+    label="Filter..."
   >
-    <bx-combo-box-item value="all">Option 1</bx-combo-box-item>
-    <bx-combo-box-item value="cloudFoundry">Option 2</bx-combo-box-item>
-    <bx-combo-box-item value="staging">Option 3</bx-combo-box-item>
-    <bx-combo-box-item value="dea">Option 4</bx-combo-box-item>
-    <bx-combo-box-item value="router">Option 5</bx-combo-box-item>
-    <bx-combo-box-item value="support">Option 6</bx-combo-box-item>
-    <bx-combo-box-item value="services">Option 7</bx-combo-box-item>
-    <bx-combo-box-item value="products">Option 8</bx-combo-box-item>
-  </bx-combo-box>
+    <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
+    <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>
+    <cds-combo-box-item value="staging">Option 3</cds-combo-box-item>
+    <cds-combo-box-item value="dea">Option 4</cds-combo-box-item>
+    <cds-combo-box-item value="router">Option 5</cds-combo-box-item>
+    <cds-combo-box-item value="support">Option 6</cds-combo-box-item>
+    <cds-combo-box-item value="services">Option 7</cds-combo-box-item>
+    <cds-combo-box-item value="products">Option 8</cds-combo-box-item>
+  </cds-combo-box>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/package.json
index 8d29a5b2d06..a0327c02820 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/cdn.html
index 63403f8550a..08ab715ab5e 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/cdn.html
@@ -13,21 +13,23 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-combo-box:not(:defined) {
+    cds-combo-box:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/content-switcher.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/content-switcher.min.js"></script>
 </head>
-<body>
-  <bx-content-switcher>
-    <bx-content-switcher-item value="all">Option 1</bx-content-switcher-item>
-    <bx-content-switcher-item value="cloudFoundry" disabled>Option 2</bx-content-switcher-item>
-    <bx-content-switcher-item value="staging">Option 3</bx-content-switcher-item>
-    <bx-content-switcher-item value="dea">Option 4</bx-content-switcher-item>
-    <bx-content-switcher-item value="router">Option 5</bx-content-switcher-item>
-  </bx-content-switcher>
+<body class="cds-theme-zone-white">
+  <cds-content-switcher>
+    <cds-content-switcher-item value="all">Option 1</cds-content-switcher-item>
+    <cds-content-switcher-item value="cloudFoundry" disabled>Option 2</cds-content-switcher-item>
+    <cds-content-switcher-item value="staging">Option 3</cds-content-switcher-item>
+    <cds-content-switcher-item value="dea">Option 4</cds-content-switcher-item>
+    <cds-content-switcher-item value="router">Option 5</cds-content-switcher-item>
+  </cds-content-switcher>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/index.html
index 12ecd9a8ece..4fd9e304a33 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/index.html
@@ -13,21 +13,23 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-content-switcher:not(:defined) {
+    cds-content-switcher:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-content-switcher>
-    <bx-content-switcher-item value="all">Option 1</bx-content-switcher-item>
-    <bx-content-switcher-item value="cloudFoundry" disabled>Option 2</bx-content-switcher-item>
-    <bx-content-switcher-item value="staging">Option 3</bx-content-switcher-item>
-    <bx-content-switcher-item value="dea">Option 4</bx-content-switcher-item>
-    <bx-content-switcher-item value="router">Option 5</bx-content-switcher-item>
-  </bx-content-switcher>
+  <cds-content-switcher>
+    <cds-content-switcher-item value="all">Option 1</cds-content-switcher-item>
+    <cds-content-switcher-item value="cloudFoundry" disabled>Option 2</cds-content-switcher-item>
+    <cds-content-switcher-item value="staging">Option 3</cds-content-switcher-item>
+    <cds-content-switcher-item value="dea">Option 4</cds-content-switcher-item>
+    <cds-content-switcher-item value="router">Option 5</cds-content-switcher-item>
+  </cds-content-switcher>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/package.json
index b05eeae847f..037ae738838 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/cdn.html
index 552b3700b03..870457ed1da 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/cdn.html
@@ -13,18 +13,19 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-copy-buton:not(:defined) {
+    cds-copy-buton:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/copy-button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/copy-button.min.js"></script>
 </head>
-<body>
-  <bx-copy-button
-    button-assistive-text="Copy to clipboard"
-    feedback-text="Copied!"
-  ></bx-copy-button>
+<body class="cds-theme-zone-white">
+  <cds-copy-button feedback="Copied!" feedback-timeout=2000>
+    Copy to Clipboard
+  </cds-copy-button>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/index.html
index cc118d6c5d1..29b6be78b98 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/index.html
@@ -13,18 +13,19 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-copy-button:not(:defined) {
+    cds-copy-button:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-copy-button
-    button-assistive-text="Copy to clipboard"
-    feedback-text="Copied!"
-  ></bx-copy-button>
+  <cds-copy-button feedback="Copied!" feedback-timeout=2000>
+    Copy to Clipboard!
+  </cds-copy-button>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/package.json
index f371ee2aea5..0040ebfe6e2 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html
index b6b39b5477d..39760104961 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/cdn.html
@@ -11,44 +11,41 @@
   <head>
     <title>@carbon/ibmdotcom-web-components example</title>
     <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
     <style>
       /* Suppress custom element until styles are loaded */
-      bx-data-table:not(:defined) {
+      cds-data-table:not(:defined) {
         display: none;
       }
     </style>
-    <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/data-table.min.js"></script>
-    <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/pagination.min.js"></script>
+    <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/data-table.min.js"></script>
   </head>
-  <body>
-    <h1>Default tabe</h1>
-    <bx-table>
-      <bx-table-head>
-        <bx-table-header-row>
-          <bx-table-header-cell>Foo</bx-table-header-cell>
-          <bx-table-header-cell>Bar</bx-table-header-cell>
-          <bx-table-header-cell>Baz</bx-table-header-cell>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body>
-        <bx-table-row>
-          <bx-table-cell>Foo1</bx-table-cell>
-          <bx-table-cell>Bar1</bx-table-cell>
-          <bx-table-cell>Baz1</bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell>Foo2</bx-table-cell>
-          <bx-table-cell>Bar2</bx-table-cell>
-          <bx-table-cell>Baz2</bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell>Foo3</bx-table-cell>
-          <bx-table-cell>Bar3</bx-table-cell>
-          <bx-table-cell>Baz3</bx-table-cell>
-        </bx-table-row>
-      </bx-table-body>
-    </bx-table>
+  <body class="cds-theme-zone-white">
+    <cds-table>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
 
     <br />
     <br />
@@ -56,14 +53,27 @@ <h1>Default tabe</h1>
 
     <h1>Sortable table</h1>
     <div id="sortable-table"></div>
-    <script src="./sortable-table.js"></script>
-
-    <br />
-    <br />
-    <br />
-
-    <h1>Sortable table with pagination</h1>
-    <div id="sortable-pagination"></div>
-    <script src="./sortable-pagination.js"></script>
+    <cds-table is-sortable>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
   </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/data.js b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/data.js
deleted file mode 100644
index c1e1784d670..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/data.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2022
- *
- * 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 const columns = [
-  {
-    id: 'name',
-    title: 'Name',
-    sortCycle: 'bi-states-from-ascending',
-  },
-  {
-    id: 'protocol',
-    title: 'Protocol',
-  },
-  {
-    id: 'port',
-    title: 'Port',
-    sortCycle: 'tri-states-from-ascending',
-  },
-  {
-    id: 'rule',
-    title: 'Rule',
-  },
-  {
-    id: 'attachedGroups',
-    title: 'Attached Groups',
-  },
-  {
-    id: 'status',
-    title: 'Status',
-  },
-];
-
-export const rows = [
-  {
-    id: 1,
-    name: 'Load Balancer 1',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 2,
-    name: 'Load Balancer 2',
-    protocol: 'HTTPS',
-    port: 443,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 3,
-    selected: true,
-    name: 'Load Balancer 3',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 4,
-    name: 'Load Balancer 4',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 5,
-    name: 'Load Balancer 5',
-    protocol: 'HTTPS',
-    port: 443,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 6,
-    selected: true,
-    name: 'Load Balancer 6',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-];
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/defs.js b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/defs.js
deleted file mode 100644
index a17a2c0db91..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/defs.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Table sort state.
- */
-const TABLE_SORT_DIRECTION = {
-  /**
-   * Not sorted.
-   */
-  NONE: 'none',
-
-  /**
-   * Sorted ascendingly.
-   */
-  ASCENDING: 'ascending',
-
-  /**
-   * Sorted descendingly.
-   */
-  DESCENDING: 'descending',
-};
-
-export default TABLE_SORT_DIRECTION;
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/index.html
index 9180fb017ee..95c02b6f161 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/index.html
@@ -12,9 +12,11 @@
     <title>carbon-web-components example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <style>
+   
+    <link rel="stylesheet" href="src/styles.scss" />
+   <style>
       /* Suppress custom element until styles are loaded */
-      bx-table:not(:defined) {
+      cds-table:not(:defined) {
         display: none;
       }
     </style>
@@ -22,32 +24,28 @@
   </head>
   <body>
     <h1>Default tabe</h1>
-    <bx-table>
-      <bx-table-head>
-        <bx-table-header-row>
-          <bx-table-header-cell>Foo</bx-table-header-cell>
-          <bx-table-header-cell>Bar</bx-table-header-cell>
-          <bx-table-header-cell>Baz</bx-table-header-cell>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body>
-        <bx-table-row>
-          <bx-table-cell>Foo1</bx-table-cell>
-          <bx-table-cell>Bar1</bx-table-cell>
-          <bx-table-cell>Baz1</bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell>Foo2</bx-table-cell>
-          <bx-table-cell>Bar2</bx-table-cell>
-          <bx-table-cell>Baz2</bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell>Foo3</bx-table-cell>
-          <bx-table-cell>Bar3</bx-table-cell>
-          <bx-table-cell>Baz3</bx-table-cell>
-        </bx-table-row>
-      </bx-table-body>
-    </bx-table>
+    <cds-table>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
 
     <br />
     <br />
@@ -55,14 +53,27 @@ <h1>Default tabe</h1>
 
     <h1>Sortable table</h1>
     <div id="sortable-table"></div>
-    <script src="./sortable-table.js"></script>
-
-    <br />
-    <br />
-    <br />
-
-    <h1>Sortable table with pagination</h1>
-    <div id="sortable-pagination"></div>
-    <script src="./sortable-pagination.js"></script>
+    <cds-table is-sortable>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
   </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/package.json
index cab78f5b6e2..ebf5780abf1 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/sortable-pagination.js b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/sortable-pagination.js
deleted file mode 100644
index 4a0d9279d16..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/sortable-pagination.js
+++ /dev/null
@@ -1,152 +0,0 @@
-/* eslint-disable no-use-before-define */
-
-/**
- * @license
- *
- * Copyright IBM Corp. 2022
- *
- * 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 TABLE_SORT_DIRECTION from './defs.js';
-import { columns, rows } from './data.js';
-
-// event listener for the table sorting event
-// triggered when user clicks on the sorting icon of the header cell
-document.addEventListener('bx-table-header-cell-sort', ({ defaultPrevented, detail, target }) => {
-  if (!defaultPrevented) {
-    const { columnId } = target.dataset;
-    const { sortDirection: direction } = detail;
-    // Sets the sorting as user desires
-    const sortInfo = {
-      columnId,
-      direction,
-    };
-
-    table.state.setSortInfo(sortInfo);
-  }
-});
-
-// event listener for pagination event
-// triggered when change in the row number the current page starts with
-document.addEventListener('bx-pagination-changed-current', ({ detail }) => {
-  table.state.setStart(detail.start);
-});
-
-// event listener for pagination event
-// triggered after the number of rows per page is changed
-document.addEventListener('bx-page-sizes-select-changed', ({ detail }) => {
-  table.state.setPageSize(detail.value);
-});
-
-// returns pagination component
-function _renderPagination() {
-  const { pageSize, start } = table.state;
-  if (typeof pageSize === 'undefined') {
-    return undefined;
-  }
-
-  return `
-    <bx-pagination
-      page-size="${pageSize}"
-      start="${start}"
-      total="${rows.length}"
-    >
-      <bx-page-sizes-select slot="page-sizes-select">
-        <option value="3">3</option>
-        <option value="6">6</option>
-      </bx-page-sizes-select>
-      <bx-pages-select></bx-pages-select>
-    </bx-pagination>
-  `;
-}
-
-const collator = new Intl.Collator('en');
-
-const table = () => {
-  const { sortInfo, start, pageSize } = table.state;
-  const { columnId: sortColumnId, direction: sortDirection } = sortInfo;
-  // sorting logic, returns the sorted rows to render
-  const sortedRows = rows.slice().sort((lhs, rhs) => {
-    const lhsValue = lhs[sortInfo.columnId];
-    const rhsValue = rhs[sortInfo.columnId];
-    return (sortInfo.direction === 'ascending' ? 1 : -1) * collator.compare(lhsValue, rhsValue);
-  });
-
-  if (typeof pageSize === 'undefined') {
-    return undefined;
-  }
-
-  return `
-    <bx-table>
-      <bx-table-head>
-        <bx-table-header-row>
-          ${columns
-            .map((column) => {
-              const { id: columnId, sortCycle, title } = column;
-              const sortDirectionForThisCell =
-                sortCycle && (columnId === sortColumnId ? sortDirection : TABLE_SORT_DIRECTION.NONE);
-              return `<bx-table-header-cell ${sortCycle && `sort-cycle="${sortCycle}"`} ${
-                sortDirectionForThisCell && `sort-direction="${sortDirectionForThisCell}"`
-              } data-column-id="${columnId}">${title}</bx-table-header-cell>`;
-            })
-            .join('')}
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body>
-        ${sortedRows
-          .slice(start, start + pageSize)
-          .map((row) => {
-            const { id: rowId } = row;
-            return `
-          <bx-table-row data-row-id="${rowId}">
-            ${columns
-              .map((column) => {
-                const { id: columnId } = column;
-                return `<bx-table-cell>${row[columnId]}</bx-table-cell>`;
-              })
-              .join('')}
-          </bx-table-row>`;
-          })
-          .join('')}
-      </bx-table-body>
-    </bx-table>
-    ${_renderPagination()}
-    `;
-};
-
-table.state = {
-  start: 0,
-  setStart: (start) => {
-    setState(() => {
-      table.state.start = start;
-    });
-  },
-  pageSize: 3,
-  setPageSize: (pageSize) => {
-    setState(() => {
-      table.state.pageSize = pageSize;
-    });
-  },
-  sortInfo: {
-    columnId: 'name',
-    direction: TABLE_SORT_DIRECTION.ASCENDING,
-  },
-  setSortInfo: (sortInfo) => {
-    setState(() => {
-      table.state.sortInfo = sortInfo;
-    });
-  },
-};
-
-function setState(callback) {
-  callback();
-  updateTree(); // extracted function
-}
-
-const updateTree = () => {
-  document.getElementById('sortable-pagination').innerHTML = table();
-};
-
-updateTree();
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/sortable-table.js b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/sortable-table.js
deleted file mode 100644
index d32b6db754b..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/sortable-table.js
+++ /dev/null
@@ -1,98 +0,0 @@
-/* eslint-disable no-use-before-define */
-
-/**
- * @license
- *
- * Copyright IBM Corp. 2022
- *
- * 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 TABLE_SORT_DIRECTION from './defs.js';
-import { columns, rows } from './data.js';
-
-// event listener for the sorting event
-document.addEventListener('bx-table-header-cell-sort', ({ defaultPrevented, detail, target }) => {
-  if (!defaultPrevented) {
-    const { columnId } = target.dataset;
-    const { sortDirection: direction } = detail;
-    // Sets the sorting as user desires
-    const sortInfo = {
-      columnId,
-      direction,
-    };
-
-    table.state.setSortInfo(sortInfo);
-  }
-});
-
-const collator = new Intl.Collator('en');
-
-const table = () => {
-  // sorting logic, returns the sorted rows to render
-  const sortedRows = rows.slice().sort((lhs, rhs) => {
-    const lhsValue = lhs[table.state.sortInfo.columnId];
-    const rhsValue = rhs[table.state.sortInfo.columnId];
-    return (table.state.sortInfo.direction === 'ascending' ? 1 : -1) * collator.compare(lhsValue, rhsValue);
-  });
-
-  const { columnId: sortColumnId, direction: sortDirection } = table.state.sortInfo;
-
-  return `
-    <bx-table>
-      <bx-table-head>
-        <bx-table-header-row>
-          ${columns
-            .map((column) => {
-              const { id: columnId, sortCycle, title } = column;
-              const sortDirectionForThisCell =
-                sortCycle && (columnId === sortColumnId ? sortDirection : TABLE_SORT_DIRECTION.NONE);
-              return `<bx-table-header-cell ${sortCycle && `sort-cycle="${sortCycle}"`} ${
-                sortDirectionForThisCell && `sort-direction="${sortDirectionForThisCell}"`
-              } data-column-id="${columnId}">${title}</bx-table-header-cell>`;
-            })
-            .join('')}
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body>
-        ${sortedRows
-          .map((row) => {
-            const { id: rowId } = row;
-            return `
-          <bx-table-row data-row-id="${rowId}">
-            ${columns
-              .map((column) => {
-                const { id: columnId } = column;
-                return `<bx-table-cell>${row[columnId]}</bx-table-cell>`;
-              })
-              .join('')}
-          </bx-table-row>`;
-          })
-          .join('')}
-      </bx-table-body>
-    </bx-table>`;
-};
-
-table.state = {
-  sortInfo: {
-    columnId: 'name',
-    direction: TABLE_SORT_DIRECTION.ASCENDING,
-  },
-  setSortInfo: (sortInfo) => {
-    setState(() => {
-      table.state.sortInfo = sortInfo;
-    });
-  },
-};
-
-function setState(callback) {
-  callback();
-  updateTree(); // extracted function
-}
-
-const updateTree = () => {
-  document.getElementById('sortable-table').innerHTML = table();
-};
-
-updateTree();
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/index.js
index a54ebc9e05a..2584d14f0aa 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/index.js
@@ -1,11 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 '@carbon/web-components/es/components/data-table/index.js';
-import '@carbon/web-components/es/components/pagination/index.js';
+import '@carbon/web-components/es/components/data-table/index.js';
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/data-table/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/cdn.html
index 02d36487a31..ce990d2b2e8 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/cdn.html
@@ -13,22 +13,24 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-date-picker:not(:defined) {
+    cds-date-picker:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/date-picker.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/date-picker.min.js"></script>
 </head>
-<body>
-  <bx-date-picker>
-    <bx-date-picker-input
+<body class="cds-theme-zone-white">
+  <cds-date-picker>
+    <cds-date-picker-input
       kind="single"
       label-text="Date Picker label"
       placeholder="mm/dd/yyyy"
     >
-    </bx-date-picker-input>
-  </bx-date-picker>
+    </cds-date-picker-input>
+  </cds-date-picker>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/index.html
index 4549cff4809..b55141de970 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/index.html
@@ -13,22 +13,24 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-date-picker:not(:defined) {
+    cds-date-picker:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-date-picker>
-    <bx-date-picker-input
+  <cds-date-picker>
+    <cds-date-picker-input
       kind="single"
       label-text="Date Picker label"
       placeholder="mm/dd/yyyy"
     >
-    </bx-date-picker-input>
-  </bx-date-picker>
+    </cds-date-picker-input>
+  </cds-date-picker>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/package.json
index 6536320ebb7..3a91074ceca 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/cdn.html
index a01232feb0f..f7d0ae8507d 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/cdn.html
@@ -13,19 +13,21 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-dropdown:not(:defined) {
+    cds-dropdown:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/dropdown.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
 </head>
-<body>
-  <bx-dropdown value="bar">
-    <bx-dropdown-item value="foo">Foo</bx-dropdown-item>
-    <bx-dropdown-item value="bar">Bar</bx-dropdown-item>
-    <bx-dropdown-item value="baz">Baz</bx-dropdown-item>
-  </bx-dropdown>
+<body class="cds-theme-zone-white">
+  <cds-dropdown value="bar">
+    <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
+    <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
+    <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
+  </cds-dropdown>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/index.html
index 7f6c0d66e10..bfac44af9b3 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/index.html
@@ -15,17 +15,17 @@
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-dropdown:not(:defined) {
+    cds-dropdown:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-dropdown value="bar">
-    <bx-dropdown-item value="foo">Foo</bx-dropdown-item>
-    <bx-dropdown-item value="bar">Bar</bx-dropdown-item>
-    <bx-dropdown-item value="baz">Baz</bx-dropdown-item>
-  </bx-dropdown>
+  <cds-dropdown value="bar">
+    <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
+    <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
+    <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
+  </cds-dropdown>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/package.json
index f5939e14ff0..c834049ddb3 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html
index 0e3e7de5b19..b39951bd395 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/cdn.html
@@ -13,22 +13,24 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-file-uploader:not(:defined) {
+    cds-file-uploader:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/file-uploader.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/file-uploader.min.js"></script>
 </head>
-<body>
-  <bx-file-uploader helper-text="Only .jpg and .png files. 500kb max file size" label-text="Account photo">
-    <bx-file-drop-container
-      accept="image/jpeg image/png"
-      multiple="true"
-    >
-      Drag and drop files here or click to upload
-    </bx-file-drop-container>
-  </bx-file-uploader>
+<body class="cds-theme-zone-white">
+  <cds-file-uploader
+  label-description="Only .jpg and .png files. 500kb max file size"
+  label-title="Account photo"
+>
+  <cds-file-uploader-button accept="image/jpeg image/png" multiple>
+    Drag and drop files here or click to upload
+  </cds-file-drop-container>
+</cds-file-uploader>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/index.html
index 61435f36d82..a8488d483cd 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/index.html
@@ -13,22 +13,24 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-file-uploader:not(:defined) {
+    cds-file-uploader:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-file-uploader helper-text="Only .jpg and .png files. 500kb max file size" label-text="Account photo">
-    <bx-file-drop-container
-      accept="image/jpeg image/png"
-      multiple="true"
-    >
+  <cds-file-uploader
+    label-description="Only .jpg and .png files. 500kb max file size"
+    label-title="Account photo"
+  >
+    <cds-file-uploader-button accept="image/jpeg image/png" multiple>
       Drag and drop files here or click to upload
-    </bx-file-drop-container>
-  </bx-file-uploader>
+    </cds-file-drop-container>
+  </cds-file-uploader>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/package.json
index 5ffcc10b2aa..98f0a8988c1 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-horizontal/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.babelrc
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.gitignore
similarity index 100%
rename from packages/carbon-web-components/examples/codesandbox/data-table/.gitignore
rename to packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.gitignore
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/cdn.html
new file mode 100644
index 00000000000..4fd1693d3bf
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/cdn.html
@@ -0,0 +1,56 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-icon-button:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/form-group.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/stack.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/text-input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/radio-button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-form-group legend-text="FormGroup Legend">
+    <cds-stack gap="7">
+      <cds-text-input label="First Name"> </cds-text-input>
+      <cds-text-input label="Last Name"> </cds-text-input>
+      <cds-radio-button-group
+        legend-text="Radio button heading"
+        name="radio-button-group"
+        value="radio-1">
+        <cds-radio-button
+          label-text="Option 1"
+          value="radio-1"
+          id="radio-1"></cds-radio-button>
+        <cds-radio-button
+          label-text="Option 2"
+          value="radio-2"
+          id="radio-2"></cds-radio-button>
+        <cds-radio-button
+          label-text="Option 3"
+          value="radio-3"
+          id="radio-3"></cds-radio-button>
+      </cds-radio-button-group>
+      <cds-button>Submit</cds-button>
+    </cds-stack>
+  </cds-form-group>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/index.html
new file mode 100644
index 00000000000..11009e814cc
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/index.html
@@ -0,0 +1,37 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-button:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-icon-button>
+    <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+      <path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></path>
+      <title>Edit</title>
+    </svg>
+    <span slot="tooltip-content">
+      Tooltip text
+    </span>
+  </cds-icon-button>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/package.json
new file mode 100644
index 00000000000..01eeffdf928
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-form-group-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/sandbox.config.json
similarity index 100%
rename from packages/carbon-web-components/examples/codesandbox/data-table/sandbox.config.json
rename to packages/carbon-web-components/examples/codesandbox/basic/components/form-group/sandbox.config.json
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/src/index.js
new file mode 100644
index 00000000000..21b41d83923
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/src/index.js
@@ -0,0 +1,14 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/form-group/index.js';
+import '@carbon/web-components/es/components/radio-button/index.js';
+import '@carbon/web-components/es/components/text-input/index.js';
+import '@carbon/web-components/es/components/button/index.js';
+import '@carbon/web-components/es/components/stack/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/form-group/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.babelrc
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/pictogram-item/.gitignore
rename to packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.gitignore
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/cdn.html
new file mode 100644
index 00000000000..d1e266c784e
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/cdn.html
@@ -0,0 +1,37 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-icon-button:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/icon-button.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-icon-button>
+    <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+      <path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></path>
+      <title>Edit</title>
+    </svg>
+    <span slot="tooltip-content">
+      Tooltip text
+    </span>
+  </cds-icon-button>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/index.html
new file mode 100644
index 00000000000..11009e814cc
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/index.html
@@ -0,0 +1,37 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-button:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-icon-button>
+    <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+      <path d="M2 26H30V28H2zM25.4 9c.8-.8.8-2 0-2.8 0 0 0 0 0 0l-3.6-3.6c-.8-.8-2-.8-2.8 0 0 0 0 0 0 0l-15 15V24h6.4L25.4 9zM20.4 4L24 7.6l-3 3L17.4 7 20.4 4zM6 22v-3.6l10-10 3.6 3.6-10 10H6z"></path>
+      <title>Edit</title>
+    </svg>
+    <span slot="tooltip-content">
+      Tooltip text
+    </span>
+  </cds-icon-button>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/package.json
new file mode 100644
index 00000000000..76c04c49cd3
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-icon-button-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/src/index.js
new file mode 100644
index 00000000000..3135a9bdfed
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/icon-button/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/cdn.html
index a55b33693d0..baf1931f209 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-inline-loading:not(:defined) {
+    cds-inline-loading:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/inline-loading.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/inline-loading.min.js"></script>
 </head>
-<body>
-<bx-inline-loading status="active">Loading data...</bx-inline-loading>
+<body class="cds-theme-zone-white">
+<cds-inline-loading status="active">Loading data...</cds-inline-loading>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/index.html
index 3ca799b529a..fbaee41caa3 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/index.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+   <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-inline-loading:not(:defined) {
+    cds-inline-loading:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-inline-loading status="active">Loading data...</bx-inline-loading>
+  <cds-inline-loading status="active">Loading data...</cds-inline-loading>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/package.json
index d33db55092b..57c858942bc 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/input/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/input/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/input/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/input/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/input/cdn.html
index bcee06f7ba8..05d8aecd489 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/input/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/input/cdn.html
@@ -13,21 +13,23 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-form-item:not(:defined) {
+    cds-form-item:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/input.min.js"></script>
 </head>
-<body>
-<bx-form-item>
-  <bx-input>
+<body class="cds-theme-zone-white">
+<cds-form-item>
+  <cds-text-input>
     <span slot="label-text">Label text</span>
     <span slot="helper-text">Optional helper text</span>
     <span slot="validity-message">Something isn't right</span>
-  </bx-input>
-</bx-form-item>
+  </cds-text-input>
+</cds-form-item>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/input/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/input/index.html
index 2ea52903d3f..8e638661147 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/input/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/input/index.html
@@ -13,21 +13,23 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-form:not(:defined) {
+    cds-form:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-form-item>
-    <bx-input>
+  <cds-form-item>
+    <cds-text-input>
       <span slot="label-text">Label text</span>
       <span slot="helper-text">Optional helper text</span>
       <span slot="validity-message">Something isn't right</span>
-    </bx-input>
-  </bx-form-item>
+    </cds-text-input>
+  </cds-form-item>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/input/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/input/package.json
index ae827a34338..1e5ec589f08 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/input/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/input/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/input/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/input/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/input/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/pictogram-item/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/components/layer/.babelrc
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tag-group/.gitignore
rename to packages/carbon-web-components/examples/codesandbox/basic/components/layer/.gitignore
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/cdn.html
new file mode 100644
index 00000000000..ca8c2339987
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/cdn.html
@@ -0,0 +1,36 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    .example-layer-test-component {
+      padding: 1rem;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/layer.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-layer>
+    <div class="example-layer-test-component">Test component</div>
+    <cds-layer>
+      <div class="example-layer-test-component">Test component</div>
+      <cds-layer>
+        <div class="example-layer-test-component">Test component</div>
+      </cds-layer>
+    </cds-layer>
+  </cds-layer>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/index.html
new file mode 100644
index 00000000000..92d07ff7ad3
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/index.html
@@ -0,0 +1,36 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    .example-layer-test-component {
+      padding: 1rem;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-layer>
+    <div class="example-layer-test-component">Test component</div>
+    <cds-layer>
+      <div class="example-layer-test-component">Test component</div>
+      <cds-layer>
+        <div class="example-layer-test-component">Test component</div>
+      </cds-layer>
+    </cds-layer>
+  </cds-layer>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/package.json
new file mode 100644
index 00000000000..544d0628a4e
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-layer-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/ButtonGroup/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/ButtonGroup/sandbox.config.json
rename to packages/carbon-web-components/examples/codesandbox/basic/components/layer/sandbox.config.json
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/src/index.js
new file mode 100644
index 00000000000..4850a09407d
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/layer/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/layer/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/layer/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/link/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/link/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/link/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/link/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/link/cdn.html
index 6dbaad0f57f..3b0161371e6 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/link/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/link/cdn.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-link:not(:defined) {
+    cds-link:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/link.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/link.min.js"></script>
 </head>
-<body>
-  <bx-link href="https://www.ibm.com">
+<body class="cds-theme-zone-white">
+  <cds-link href="https://www.ibm.com">
     Link
-  </bx-link>
+  </cds-link>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/link/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/link/index.html
index fd1f3f58d49..60187261845 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/link/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/link/index.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-link:not(:defined) {
+    cds-link:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-link href="https://www.ibm.com">
+  <cds-link href="https://www.ibm.com">
     Link
-  </bx-link>
+  </cds-link>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/link/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/link/package.json
index d5e22d94fa0..107a57ed6aa 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/link/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/link/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/link/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/link/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/link/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/list/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/list/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/list/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/list/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/list/cdn.html
index feae1140707..2c254aaf2bf 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/list/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/list/cdn.html
@@ -13,59 +13,61 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-ordered-list:not(:defined) {
+    cds-ordered-list:not(:defined) {
       display: none;
     }
 
-    bx-unordered-list:not(:defined) {
+    cds-unordered-list:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/list.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/list.min.js"></script>
 </head>
-<body>
-  <h3>bx-ordered-list</h3>
+<body class="cds-theme-zone-white">
+  <h3>cds-ordered-list</h3>
 
-  <bx-ordered-list>
-    <bx-list-item>
+  <cds-ordered-list>
+    <cds-list-item>
       Ordered List level 1
-      <bx-ordered-list>
-        <bx-list-item>Ordered List level 2</bx-list-item>
-        <bx-list-item>
+      <cds-ordered-list>
+        <cds-list-item>Ordered List level 2</cds-list-item>
+        <cds-list-item>
           Ordered List level 2
-          <bx-ordered-list>
-            <bx-list-item>Ordered List level 2</bx-list-item>
-            <bx-list-item>Ordered List level 2</bx-list-item>
-          </bx-ordered-list>
-        </bx-list-item>
-      </bx-ordered-list>
-    </bx-list-item>
-    <bx-list-item>Ordered List level 1</bx-list-item>
-    <bx-list-item>Ordered List level 1</bx-list-item>
-  </bx-ordered-list>
+          <cds-ordered-list>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+          </cds-ordered-list>
+        </cds-list-item>
+      </cds-ordered-list>
+    </cds-list-item>
+    <cds-list-item>Ordered List level 1</cds-list-item>
+    <cds-list-item>Ordered List level 1</cds-list-item>
+  </cds-ordered-list>
 
   <hr style="margin: 3rem 0" />
 
-  <h3>bx-unordered-list</h3>
+  <h3>cds-unordered-list</h3>
 
-  <bx-unordered-list>
-    <bx-list-item>
+  <cds-unordered-list>
+    <cds-list-item>
       Unordered List level 1
-      <bx-unordered-list>
-        <bx-list-item>Unordered List level 2</bx-list-item>
-        <bx-list-item>
+      <cds-unordered-list>
+        <cds-list-item>Unordered List level 2</cds-list-item>
+        <cds-list-item>
           Unordered List level 2
-          <bx-unordered-list>
-            <bx-list-item>Unordered List level 2</bx-list-item>
-            <bx-list-item>Unordered List level 2</bx-list-item>
-          </bx-unordered-list>
-        </bx-list-item>
-      </bx-unordered-list>
-    </bx-list-item>
-    <bx-list-item>Unordered List level 1</bx-list-item>
-    <bx-list-item>Unordered List level 1</bx-list-item>
-  </bx-unordered-list>
+          <cds-unordered-list>
+            <cds-list-item>Unordered List level 2</cds-list-item>
+            <cds-list-item>Unordered List level 2</cds-list-item>
+          </cds-unordered-list>
+        </cds-list-item>
+      </cds-unordered-list>
+    </cds-list-item>
+    <cds-list-item>Unordered List level 1</cds-list-item>
+    <cds-list-item>Unordered List level 1</cds-list-item>
+  </cds-unordered-list>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/list/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/list/index.html
index b46f0725774..9fde9a47665 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/list/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/list/index.html
@@ -13,59 +13,61 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-ordered-list:not(:defined) {
+    cds-ordered-list:not(:defined) {
       display: none;
     }
 
-    bx-unordered-list:not(:defined) {
+    cds-unordered-list:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <h3>bx-ordered-list</h3>
+  <h3>cds-ordered-list</h3>
 
-  <bx-ordered-list>
-    <bx-list-item>
+  <cds-ordered-list>
+    <cds-list-item>
       Ordered List level 1
-      <bx-ordered-list>
-        <bx-list-item>Ordered List level 2</bx-list-item>
-        <bx-list-item>
+      <cds-ordered-list>
+        <cds-list-item>Ordered List level 2</cds-list-item>
+        <cds-list-item>
           Ordered List level 2
-          <bx-ordered-list>
-            <bx-list-item>Ordered List level 2</bx-list-item>
-            <bx-list-item>Ordered List level 2</bx-list-item>
-          </bx-ordered-list>
-        </bx-list-item>
-      </bx-ordered-list>
-    </bx-list-item>
-    <bx-list-item>Ordered List level 1</bx-list-item>
-    <bx-list-item>Ordered List level 1</bx-list-item>
-  </bx-ordered-list>
+          <cds-ordered-list>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+          </cds-ordered-list>
+        </cds-list-item>
+      </cds-ordered-list>
+    </cds-list-item>
+    <cds-list-item>Ordered List level 1</cds-list-item>
+    <cds-list-item>Ordered List level 1</cds-list-item>
+  </cds-ordered-list>
 
   <hr style="margin: 3rem 0" />
 
-  <h3>bx-unordered-list</h3>
+  <h3>cds-unordered-list</h3>
 
-  <bx-unordered-list>
-    <bx-list-item>
+  <cds-unordered-list>
+    <cds-list-item>
       Unordered List level 1
-      <bx-unordered-list>
-        <bx-list-item>Unordered List level 2</bx-list-item>
-        <bx-list-item>
+      <cds-unordered-list>
+        <cds-list-item>Unordered List level 2</cds-list-item>
+        <cds-list-item>
           Unordered List level 2
-          <bx-unordered-list>
-            <bx-list-item>Unordered List level 2</bx-list-item>
-            <bx-list-item>Unordered List level 2</bx-list-item>
-          </bx-unordered-list>
-        </bx-list-item>
-      </bx-unordered-list>
-    </bx-list-item>
-    <bx-list-item>Unordered List level 1</bx-list-item>
-    <bx-list-item>Unordered List level 1</bx-list-item>
-  </bx-unordered-list>
+          <cds-unordered-list>
+            <cds-list-item>Unordered List level 2</cds-list-item>
+            <cds-list-item>Unordered List level 2</cds-list-item>
+          </cds-unordered-list>
+        </cds-list-item>
+      </cds-unordered-list>
+    </cds-list-item>
+    <cds-list-item>Unordered List level 1</cds-list-item>
+    <cds-list-item>Unordered List level 1</cds-list-item>
+  </cds-unordered-list>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/list/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/list/package.json
index 505f50e44a5..44f1202e06e 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/list/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/list/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/list/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/list/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/list/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/cdn.html
index b39d29c9ee6..d196d874e84 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/cdn.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-loading:not(:defined) {
+    cds-loading:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/loading.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/loading.min.js"></script>
 </head>
-<body>
+<body class="cds-theme-zone-white">
   <div style="position: relative; padding: 3rem; display: flex;">
-    <bx-loading></bx-loading>
+    <cds-loading></cds-loading>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/index.html
index f8b0aa32b41..96a73071871 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/index.html
@@ -13,9 +13,10 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-loading:not(:defined) {
+    cds-loading:not(:defined) {
       display: none;
     }
   </style>
@@ -23,7 +24,7 @@
 </head>
 <body>
   <div style="position: relative; padding: 3rem; display: flex;">
-    <bx-loading></bx-loading>
+    <cds-loading></cds-loading>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/package.json
index 63bf274bb36..0b690e6b62f 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/loading/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/loading/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/cdn.html
index 8cdecc51bac..dbc3449bbb3 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/cdn.html
@@ -13,31 +13,33 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-modal:not(:defined) {
+    cds-modal:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/modal.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/modal.min.js"></script>
 </head>
-<body>
-  <bx-btn id="modal-example-button">
+<body class="cds-theme-zone-white">
+  <cds-button id="modal-example-button">
     Open Modal
-  </bx-btn>
+  </cds-button>
 
-  <bx-modal id="modal-example">
-    <bx-modal-header>
-      <bx-modal-close-button></bx-modal-close-button>
-      <bx-modal-label>Label (Optional)</bx-modal-label>
-      <bx-modal-heading>Modal Title</bx-modal-heading>
-    </bx-modal-header>
-    <bx-modal-body><p>Modal text description</p></bx-modal-body>
-    <bx-modal-footer>
-      <bx-modal-footer-button kind="secondary" data-modal-close>Cancel</bx-modal-footer-button>
-      <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-    </bx-modal-footer>
-  </bx-modal>
+  <cds-modal id="modal-example">
+    <cds-modal-header>
+      <cds-modal-close-button></cds-modal-close-button>
+      <cds-modal-label>Label (Optional)</cds-modal-label>
+      <cds-modal-heading>Modal Title</cds-modal-heading>
+    </cds-modal-header>
+    <cds-modal-body><p>Modal text description</p></cds-modal-body>
+    <cds-modal-footer>
+      <cds-modal-footer-button kind="secondary" data-modal-close>Cancel</cds-modal-footer-button>
+      <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+    </cds-modal-footer>
+  </cds-modal>
 
   <script type="text/javascript">
     document.getElementById('modal-example-button').addEventListener('click', () => {
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/index.html
index 2474b4fb0a8..55deb5d3ac1 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/index.html
@@ -13,31 +13,32 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-modal:not(:defined) {
+    cds-modal:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-btn id="modal-example-button">
+  <cds-button id="modal-example-button">
     Open Modal
-  </bx-btn>
+  </cds-button>
 
-  <bx-modal id="modal-example">
-    <bx-modal-header>
-      <bx-modal-close-button></bx-modal-close-button>
-      <bx-modal-label>Label (Optional)</bx-modal-label>
-      <bx-modal-heading>Modal Title</bx-modal-heading>
-    </bx-modal-header>
-    <bx-modal-body><p>Modal text description</p></bx-modal-body>
-    <bx-modal-footer>
-      <bx-modal-footer-button kind="secondary" data-modal-close>Cancel</bx-modal-footer-button>
-      <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-    </bx-modal-footer>
-  </bx-modal>
+  <cds-modal id="modal-example">
+    <cds-modal-header>
+      <cds-modal-close-button></cds-modal-close-button>
+      <cds-modal-label>Label (Optional)</cds-modal-label>
+      <cds-modal-heading>Modal Title</cds-modal-heading>
+    </cds-modal-header>
+    <cds-modal-body><p>Modal text description</p></cds-modal-body>
+    <cds-modal-footer>
+      <cds-modal-footer-button kind="secondary" data-modal-close>Cancel</cds-modal-footer-button>
+      <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+    </cds-modal-footer>
+  </cds-modal>
 
   <script type="text/javascript">
     document.getElementById('modal-example-button').addEventListener('click', () => {
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/package.json
index 776c6ec8b03..934ed9a8cf4 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/modal/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/modal/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/cdn.html
index 17015992e4d..fd33a97e049 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/cdn.html
@@ -13,25 +13,27 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-multi-select:not(:defined) {
+    cds-multi-select:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/multi-select.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/multi-select.min.js"></script>
 </head>
-<body>
-  <bx-multi-select
+<body class="cds-theme-zone-white">
+  <cds-multi-select
     helper-text="Optional helper text"
     label-text="Multiselect title"
     trigger-content="Select items"
   >
-    <bx-multi-select-item value="all">Option 1</bx-multi-select-item>
-    <bx-multi-select-item value="cloudFoundry">Option 2</bx-multi-select-item>
-    <bx-multi-select-item value="staging">Option 3</bx-multi-select-item>
-    <bx-multi-select-item value="dea">Option 4</bx-multi-select-item>
-    <bx-multi-select-item value="router">Option 5</bx-multi-select-item>
-  </bx-multi-select>
+    <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+    <cds-multi-select-item value="cloudFoundry">Option 2</cds-multi-select-item>
+    <cds-multi-select-item value="staging">Option 3</cds-multi-select-item>
+    <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+    <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+  </cds-multi-select>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/index.html
index efc248be16e..5961a13a7ca 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/index.html
@@ -13,25 +13,27 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-multi-select:not(:defined) {
+    cds-multi-select:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-multi-select
+  <cds-multi-select
     helper-text="Optional helper text"
     label-text="Multiselect title"
     trigger-content="Select items"
   >
-    <bx-multi-select-item value="all">Option 1</bx-multi-select-item>
-    <bx-multi-select-item value="cloudFoundry">Option 2</bx-multi-select-item>
-    <bx-multi-select-item value="staging">Option 3</bx-multi-select-item>
-    <bx-multi-select-item value="dea">Option 4</bx-multi-select-item>
-    <bx-multi-select-item value="router">Option 5</bx-multi-select-item>
-  </bx-multi-select>
+    <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+    <cds-multi-select-item value="cloudFoundry">Option 2</cds-multi-select-item>
+    <cds-multi-select-item value="staging">Option 3</cds-multi-select-item>
+    <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+    <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+  </cds-multi-select>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/package.json
index defaf160467..ee5f149e2d4 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/cdn.html
index 10b6080ed4b..7d51aee13db 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/cdn.html
@@ -13,20 +13,22 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-inline-notification:not(:defined) {
+    cds-inline-notification:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/notification.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/notification.min.js"></script>
 </head>
-<body>
-  <bx-inline-notification
+<body class="cds-theme-zone-white">
+  <cds-inline-notification
     style="min-width: 30rem; margin-bottom: .5rem"
     title="Notification title"
     subtitle="Subtitle text goes here."
   >
-  </bx-inline-notification>
+  </cds-inline-notification>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/index.html
index 4dc00b55822..5f3d04946ae 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/index.html
@@ -13,20 +13,21 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-inline-notification:not(:defined) {
+    cds-inline-notification:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-inline-notification
+  <cds-inline-notification
     style="min-width: 30rem; margin-bottom: .5rem"
     title="Notification title"
     subtitle="Subtitle text goes here."
   >
-  </bx-inline-notification>
+  </cds-inline-notification>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/package.json
index a74da732235..ac239d8c4a9 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/notification/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/src/styles.scss
new file mode 100644
index 00000000000..b8e4ab9de12
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/notification/src/styles.scss
@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/cdn.html
index c0d57cb5557..9ae794173ba 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-number-input:not(:defined) {
+    cds-number-input:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/number-input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/number-input.min.js"></script>
 </head>
-<body>
-  <bx-number-input></bx-number-input>
+<body class="cds-theme-zone-white">
+  <cds-number-input></cds-number-input>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/index.html
index 253488cccb9..97ecc18c80a 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/index.html
@@ -13,15 +13,16 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <style>
+  <link rel="stylesheet" href="src/styles.scss" />
+<style>
     /* Suppress custom element until styles are loaded */
-    bx-number-input:not(:defined) {
+    cds-number-input:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-number-input></bx-number-input>
+  <cds-number-input></cds-number-input>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/package.json
index 33172fe5e3b..e1893aedcfd 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/number-input/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/cdn.html
index 9cebedbc3f4..9307ea0972a 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/cdn.html
@@ -13,25 +13,26 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+   
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-overflow-menu:not(:defined) {
+    cds-overflow-menu:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/overflow-menu.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/overflow-menu.min.js"></script>
 </head>
-<body>
+<body class="cds-theme-zone-white">
   <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
-    <bx-overflow-menu>
-      <bx-overflow-menu-body>
-        <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 3</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 4</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 5</bx-overflow-menu-item>
-      </bx-overflow-menu-body>
-    </bx-overflow-menu>
+    <cds-overflow-menu>
+      <cds-overflow-menu-body>
+        <cds-overflow-menu-item>Option 1</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 2</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 3</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 4</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 5</cds-overflow-menu-item>
+      </cds-overflow-menu-body>
+    </cds-overflow-menu>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/index.html
index 776d0e2da3b..ca782b10203 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/index.html
@@ -13,9 +13,11 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-overflow-menu:not(:defined) {
+    cds-overflow-menu:not(:defined) {
       display: none;
     }
   </style>
@@ -23,15 +25,15 @@
 </head>
 <body>
   <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
-    <bx-overflow-menu>
-      <bx-overflow-menu-body>
-        <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 3</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 4</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 5</bx-overflow-menu-item>
-      </bx-overflow-menu-body>
-    </bx-overflow-menu>
+    <cds-overflow-menu>
+      <cds-overflow-menu-body>
+        <cds-overflow-menu-item>Option 1</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 2</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 3</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 4</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Option 5</cds-overflow-menu-item>
+      </cds-overflow-menu-body>
+    </cds-overflow-menu>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/package.json
index 158781b2dcb..749877d70ff 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/cdn.html
index aa88072367c..a20e7e47ef4 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/cdn.html
@@ -13,26 +13,29 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+   
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-pagination:not(:defined) {
+    cds-pagination:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/pagination.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/pagination.min.js"></script>
 </head>
-<body>
-  <bx-pagination
+<body class="cds-theme-zone-white">
+  <cds-pagination
     page-size="10"
     start="0"
     total="100"
   >
-    <bx-page-sizes-select slot="page-sizes-select">
+    <cds-page-sizes-select slot="page-sizes-select">
       <option value="10">10</option>
       <option value="20">20</option>
       <option value="30">30</option>
-    </bx-page-sizes-select>
-    <bx-pages-select></bx-pages-select>
-  </bx-pagination>
+    </cds-page-sizes-select>
+    <cds-pages-select></cds-pages-select>
+  </cds-pagination>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/index.html
index c195bac8158..d4522131bde 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/index.html
@@ -13,26 +13,27 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-pagination:not(:defined) {
+    cds-pagination:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-pagination
+  <cds-pagination
     page-size="10"
     start="0"
     total="100"
   >
-    <bx-page-sizes-select slot="page-sizes-select">
+    <cds-page-sizes-select slot="page-sizes-select">
       <option value="10">10</option>
       <option value="20">20</option>
       <option value="30">30</option>
-    </bx-page-sizes-select>
-    <bx-pages-select></bx-pages-select>
-  </bx-pagination>
+    </cds-page-sizes-select>
+    <cds-pages-select></cds-pages-select>
+  </cds-pagination>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/package.json
index 5118c7cd4b0..6bb75db56c0 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/pagination/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tag-group/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/components/popover/.babelrc
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tag-link/.gitignore
rename to packages/carbon-web-components/examples/codesandbox/basic/components/popover/.gitignore
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/cdn.html
new file mode 100644
index 00000000000..b85257bb9cb
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/cdn.html
@@ -0,0 +1,44 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-pagination:not(:defined) {
+      display: none;
+    }
+    .p-3 {
+      padding: 1rem;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/popover.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-popover open>
+    <div class="playground-trigger">
+      <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>checkbox</title><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
+      </div>
+    <cds-popover-content>
+      <div class="p-3">
+        <p class="popover-title">Available storage</p>
+        <p class="popover-details">
+          This server has 150 GB of block storage remaining.
+        </p>
+      </div>
+    </cds-popover-content>
+  </cds-popover>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/index.html
new file mode 100644
index 00000000000..932d712c0d5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/index.html
@@ -0,0 +1,43 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-pagination:not(:defined) {
+      display: none;
+    }
+    .p-3 {
+      padding: 1rem;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-popover open>
+    <div class="playground-trigger">
+      <svg id="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32"><defs><style>.cls-1{fill:none;}</style></defs><title>checkbox</title><path d="M26,4H6A2,2,0,0,0,4,6V26a2,2,0,0,0,2,2H26a2,2,0,0,0,2-2V6A2,2,0,0,0,26,4ZM6,26V6H26V26Z"/><rect id="_Transparent_Rectangle_" data-name="&lt;Transparent Rectangle&gt;" class="cls-1" width="32" height="32"/></svg>
+      </div>
+    <cds-popover-content>
+      <div class="p-3">
+        <p class="popover-title">Available storage</p>
+        <p class="popover-details">
+          This server has 150 GB of block storage remaining.
+        </p>
+      </div>
+    </cds-popover-content>
+  </cds-popover>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/package.json
new file mode 100644
index 00000000000..b5e13d0a559
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-popover-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CTA/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CTA/sandbox.config.json
rename to packages/carbon-web-components/examples/codesandbox/basic/components/popover/sandbox.config.json
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/src/index.js
new file mode 100644
index 00000000000..c7e8a032793
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/popover/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/popover/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/popover/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/tag-link/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.babelrc
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/universal-banner/.gitignore
rename to packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.gitignore
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/cdn.html
new file mode 100644
index 00000000000..6344fe72bac
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/cdn.html
@@ -0,0 +1,33 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-progress-bar:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/progress-bar.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-progress-bar
+    label="Progress bar label"
+    helper-text="Optional helper text"
+    value="75">
+  </cds-progress-bar>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/index.html
new file mode 100644
index 00000000000..b24f3dd75b2
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/index.html
@@ -0,0 +1,32 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-progress-bar:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-progress-bar
+    label="Progress bar label"
+    helper-text="Optional helper text"
+    value="75">
+  </cds-progress-bar>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/package.json
new file mode 100644
index 00000000000..1c1d6098a78
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "@carbon/web-components-progress-bar-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CTASection/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CTASection/sandbox.config.json
rename to packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/sandbox.config.json
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/src/index.js
new file mode 100644
index 00000000000..15ae8f08ec7
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 '@carbon/web-components/es/components/progress-indicator/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/cdn.html
index f10796ae266..fcfe48ae310 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/cdn.html
@@ -13,40 +13,42 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-progress-indicator:not(:defined) {
+    cds-progress-indicator:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/progress-indicator.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/progress-indicator.min.js"></script>
 </head>
-<body>
-  <bx-progress-indicator>
-    <bx-progress-step
+<body class="cds-theme-zone-white">
+  <cds-progress-indicator>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
       state="invalid"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
       state="complete"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
       state="current"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       disabled
       label-text="Label"
       secondary-label-text="Secondary label"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
-    ></bx-progress-step>
-  </bx-progress-indicator>
+    ></cds-progress-step>
+  </cds-progress-indicator>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/index.html
index 0c00c19c978..b185f7b8945 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/index.html
@@ -13,40 +13,41 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-progress-indicator:not(:defined) {
+    cds-progress-indicator:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-progress-indicator>
-    <bx-progress-step
+  <cds-progress-indicator>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
       state="invalid"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
       state="complete"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
       state="current"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       disabled
       label-text="Label"
       secondary-label-text="Secondary label"
-    ></bx-progress-step>
-    <bx-progress-step
+    ></cds-progress-step>
+    <cds-progress-step
       label-text="Label"
       secondary-label-text="Secondary label"
-    ></bx-progress-step>
-  </bx-progress-indicator>
+    ></cds-progress-step>
+  </cds-progress-indicator>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/package.json
index d514f08614e..bcf720b89fd 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/cdn.html
index 35f61d3f02a..f87277655d8 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/cdn.html
@@ -13,23 +13,25 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-radio-button-group:not(:defined) {
+    cds-radio-button-group:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/radio-button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/radio-button.min.js"></script>
 </head>
-<body>
-  <bx-radio-button-group
+<body class="cds-theme-zone-white">
+  <cds-radio-button-group
     label-position="right"
     orientation="horizontal"
     name="radio-group"
   >
-    <bx-radio-button label-text="Radio button" value="all"></bx-radio-button>
-    <bx-radio-button label-text="Radio button" value="cloudFoundry"></bx-radio-button>
-    <bx-radio-button label-text="Radio button" value="staging"></bx-radio-button>
-  </bx-radio-button-group>
+    <cds-radio-button label-text="Radio button" value="all"></cds-radio-button>
+    <cds-radio-button label-text="Radio button" value="cloudFoundry"></cds-radio-button>
+    <cds-radio-button label-text="Radio button" value="staging"></cds-radio-button>
+  </cds-radio-button-group>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/index.html
index b8425f10e59..a0563bca959 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/index.html
@@ -13,23 +13,24 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-radio-button-group:not(:defined) {
+    cds-radio-button-group:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-radio-button-group
+  <cds-radio-button-group
     label-position="right"
     orientation="horizontal"
     name="radio-group"
   >
-    <bx-radio-button label-text="Radio button" value="all"></bx-radio-button>
-    <bx-radio-button label-text="Radio button" value="cloudFoundry"></bx-radio-button>
-    <bx-radio-button label-text="Radio button" value="staging"></bx-radio-button>
-  </bx-radio-button-group>
+    <cds-radio-button label-text="Radio button" value="all"></cds-radio-button>
+    <cds-radio-button label-text="Radio button" value="cloudFoundry"></cds-radio-button>
+    <cds-radio-button label-text="Radio button" value="staging"></cds-radio-button>
+  </cds-radio-button-group>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/package.json
index b8563ab9a6f..024a9a73e2b 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/search/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/search/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/search/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/search/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/search/cdn.html
index 76d0e1c2b78..fdd0df3edfe 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/search/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/search/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-search:not(:defined) {
+    cds-search:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/search.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/search.min.js"></script>
 </head>
-<body>
-  <bx-search label-text="Search"></bx-search>
+<body class="cds-theme-zone-white">
+  <cds-search label-text="Search"></cds-search>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/search/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/search/index.html
index 4ff30848ccc..eb5c15db355 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/search/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/search/index.html
@@ -13,15 +13,16 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-search:not(:defined) {
+    cds-search:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-search label-text="Search"></bx-search>
+  <cds-search label-text="Search"></cds-search>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/search/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/search/package.json
index da489c5b099..1ddb700399f 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/search/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/search/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/search/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/search/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/search/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/select/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/select/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/select/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/select/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/select/cdn.html
index 55eb7ee2036..45374848e56 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/select/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/select/cdn.html
@@ -13,29 +13,31 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-select:not(:defined) {
+    cds-select:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/select.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/select.min.js"></script>
 </head>
-<body>
-  <bx-select
+<body class="cds-theme-zone-white">
+  <cds-select
     helper-text="Optional helper text"
     label-text="Select"
     placeholder="Optional placeholder text"
   >
-    <bx-select-item-group label="Category 1">
-      <bx-select-item value="all">Option 1</bx-select-item>
-      <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
-    </bx-select-item-group>
-    <bx-select-item-group label="Category 2">
-      <bx-select-item value="staging">Option 3</bx-select-item>
-      <bx-select-item value="dea">Option 4</bx-select-item>
-      <bx-select-item value="router">Option 5</bx-select-item>
-    </bx-select-item-group>
-  </bx-select>
+    <cds-select-item-group label="Category 1">
+      <cds-select-item value="all">Option 1</cds-select-item>
+      <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+    </cds-select-item-group>
+    <cds-select-item-group label="Category 2">
+      <cds-select-item value="staging">Option 3</cds-select-item>
+      <cds-select-item value="dea">Option 4</cds-select-item>
+      <cds-select-item value="router">Option 5</cds-select-item>
+    </cds-select-item-group>
+  </cds-select>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/select/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/select/index.html
index 1b0d44ac189..a3977ba3e83 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/select/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/select/index.html
@@ -13,29 +13,30 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-select:not(:defined) {
+    cds-select:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-select
+  <cds-select
     helper-text="Optional helper text"
     label-text="Select"
     placeholder="Optional placeholder text"
   >
-    <bx-select-item-group label="Category 1">
-      <bx-select-item value="all">Option 1</bx-select-item>
-      <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
-    </bx-select-item-group>
-    <bx-select-item-group label="Category 2">
-      <bx-select-item value="staging">Option 3</bx-select-item>
-      <bx-select-item value="dea">Option 4</bx-select-item>
-      <bx-select-item value="router">Option 5</bx-select-item>
-    </bx-select-item-group>
-  </bx-select>
+    <cds-select-item-group label="Category 1">
+      <cds-select-item value="all">Option 1</cds-select-item>
+      <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+    </cds-select-item-group>
+    <cds-select-item-group label="Category 2">
+      <cds-select-item value="staging">Option 3</cds-select-item>
+      <cds-select-item value="dea">Option 4</cds-select-item>
+      <cds-select-item value="router">Option 5</cds-select-item>
+    </cds-select-item-group>
+  </cds-select>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/select/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/select/package.json
index c43b54f88e8..f0e03f67986 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/select/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/select/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/select/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/select/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/select/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/cdn.html
index f8c5bf20943..433a7d069fe 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-skeleton-placeholder:not(:defined) {
+    cds-skeleton-placeholder:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/skeleton-placeholder.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-placeholder.min.js"></script>
 </head>
-<body>
-  <bx-skeleton-placeholder></bx-skeleton-placeholder>
+<body class="cds-theme-zone-white">
+  <cds-skeleton-placeholder></cds-skeleton-placeholder>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/index.html
index abde27a4203..7e125475fd3 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/index.html
@@ -13,15 +13,16 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-skeleton-placeholder:not(:defined) {
+    cds-skeleton-placeholder:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-skeleton-placeholder></bx-skeleton-placeholder>
+  <cds-skeleton-placeholder></cds-skeleton-placeholder>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/package.json
index 4b90acc32d4..b5483338510 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/cdn.html
index 9062ed734ee..007e581f505 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-skeleton-text:not(:defined) {
+    cds-skeleton-text:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/skeleton-text.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-text.min.js"></script>
 </head>
-<body>
-  <bx-skeleton-text></bx-skeleton-text>
+<body class="cds-theme-zone-white">
+  <cds-skeleton-text></cds-skeleton-text>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/index.html
index a5ef367bcb6..c25bd619f29 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/index.html
@@ -13,15 +13,16 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <style>
+  <link rel="stylesheet" href="src/styles.scss" />
+ <style>
     /* Suppress custom element until styles are loaded */
-    bx-skeleton-text:not(:defined) {
+    cds-skeleton-text:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-skeleton-text></bx-skeleton-text>
+  <cds-skeleton-text></cds-skeleton-text>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/package.json
index 040cd844b7f..7ff808ed1de 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/cdn.html
index 252993d17c9..49313554667 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/cdn.html
@@ -13,23 +13,25 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-skip-to-content:not(:defined) {
+    cds-skip-to-content:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/skip-to-content.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skip-to-content.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
 </head>
-<body>
-  <bx-skip-to-content href="#main-content"></bx-skip-to-content>
+<body class="cds-theme-zone-white">
+  <cds-skip-to-content href="#main-content"></cds-skip-to-content>
   <div
     id="main-content"
     name="main-content">
-    <bx-btn href="https://www.ibm.com">
+    <cds-button href="https://www.ibm.com">
       Button
-    </bx-btn>
+    </cds-button>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/index.html
index 999799d98f7..07d37eafa84 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/index.html
@@ -13,22 +13,23 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-skip-to-content:not(:defined) {
+    cds-skip-to-content:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-skip-to-content href="#main-content"></bx-skip-to-content>
+  <cds-skip-to-content href="#main-content"></cds-skip-to-content>
   <div
     id="main-content"
     name="main-content">
-    <bx-btn href="https://www.ibm.com">
+    <cds-button href="https://www.ibm.com">
       Button
-    </bx-btn>
+    </cds-button>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/package.json
index 26a80b550d5..f1fbedd2fc7 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/cdn.html
index ac02c3ce837..e92cb5ca8a5 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/cdn.html
@@ -13,21 +13,23 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-slider:not(:defined) {
+    cds-slider:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slider.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/slider.min.js"></script>
 </head>
-<body>
-  <bx-slider
+<body class="cds-theme-zone-white">
+  <cds-slider
     label-text="Slider"
     max="100"
     min="0"
     step="1"
     value="50"
-  ></bx-slider>
+  ></cds-slider>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/index.html
index ccee58becb1..bc3cf0a67ac 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/index.html
@@ -13,21 +13,23 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-slider:not(:defined) {
+    cds-slider:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-slider
+  <cds-slider
     label-text="Slider"
     max="100"
     min="0"
     step="1"
     value="50"
-  ></bx-slider>
+  ></cds-slider>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/package.json
index dcb2163a7be..ec6ff519e0b 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slider/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slider/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.babelrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/universal-banner/.babelrc
rename to packages/carbon-web-components/examples/codesandbox/basic/components/slug/.babelrc
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html
new file mode 100644
index 00000000000..2481597656e
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/cdn.html
@@ -0,0 +1,31 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-slug:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/slug/v2/latest/slug.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+    <span slot="body-text">AI was used to generate this content</span>
+  </cds-slug>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html
new file mode 100644
index 00000000000..76b9122b08d
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/index.html
@@ -0,0 +1,31 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-slug:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+    <span slot="body-text">AI was used to generate this content</span>
+  </cds-slug>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json
new file mode 100644
index 00000000000..33102a6ea85
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-slug-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CalloutQuote/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CalloutQuote/sandbox.config.json
rename to packages/carbon-web-components/examples/codesandbox/basic/components/slug/sandbox.config.json
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/index.js
new file mode 100644
index 00000000000..9610c2d9c73
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 '@carbon/web-components/es/components/slug/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/styles.scss
new file mode 100644
index 00000000000..fc85d018b46
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/slug/src/styles.scss
@@ -0,0 +1,10 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
+
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.babelrc b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.gitignore b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/cdn.html
new file mode 100644
index 00000000000..b886bee928f
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/cdn.html
@@ -0,0 +1,33 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <style>
+    /* Suppress custom element until styles are loaded */
+    cds-stack:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/stack.min.js"></script>
+</head>
+<body class="cds-theme-zone-white">
+  <cds-stack gap="6">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+  </cds-stack>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/index.html
new file mode 100644
index 00000000000..2b80c7ab069
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/index.html
@@ -0,0 +1,26 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>carbon-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="src/styles.scss" />
+  <script type="module" src="src/index.js"></script>
+</head>
+<body>
+  <cds-stack gap="6">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+  </cds-stack>
+</body>
+</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/package.json
new file mode 100644
index 00000000000..6c6e9a03a95
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "carbon-web-components-stack-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
+  },
+  "dependencies": {
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CalloutWithMedia/sandbox.config.json b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CalloutWithMedia/sandbox.config.json
rename to packages/carbon-web-components/examples/codesandbox/basic/components/stack/sandbox.config.json
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/src/index.js b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/src/index.js
new file mode 100644
index 00000000000..88f82e236ab
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import '@carbon/web-components/es/components/stack/index.js';
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/stack/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/stack/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/cdn.html
index 56458ae1b5b..3e5ff22820a 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/cdn.html
@@ -13,49 +13,51 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-structured-list:not(:defined) {
+    cds-structured-list:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/structured-list.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/structured-list.min.js"></script>
 </head>
-<body>
-  <bx-structured-list>
-    <bx-structured-list-head>
-      <bx-structured-list-header-row>
-        <bx-structured-list-header-cell>ColumnA</bx-structured-list-header-cell>
-        <bx-structured-list-header-cell>ColumnB</bx-structured-list-header-cell>
-        <bx-structured-list-header-cell>ColumnC</bx-structured-list-header-cell>
-      </bx-structured-list-header-row>
-    </bx-structured-list-head>
-    <bx-structured-list-body>
-      <bx-structured-list-row>
-        <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-        <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-        <bx-structured-list-cell
+<body class="cds-theme-zone-white">
+  <cds-structured-list>
+    <cds-structured-list-head>
+      <cds-structured-list-header-row>
+        <cds-structured-list-header-cell>ColumnA</cds-structured-list-header-cell>
+        <cds-structured-list-header-cell>ColumnB</cds-structured-list-header-cell>
+        <cds-structured-list-header-cell>ColumnC</cds-structured-list-header-cell>
+      </cds-structured-list-header-row>
+    </cds-structured-list-head>
+    <cds-structured-list-body>
+      <cds-structured-list-row>
+        <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+        <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+        <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-          augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+          augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
         >
-      </bx-structured-list-row>
-      <bx-structured-list-row>
-        <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-        <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-        <bx-structured-list-cell
+      </cds-structured-list-row>
+      <cds-structured-list-row>
+        <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+        <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+        <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-          augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+          augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
         >
-      </bx-structured-list-row>
-      <bx-structured-list-row>
-        <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-        <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-        <bx-structured-list-cell
+      </cds-structured-list-row>
+      <cds-structured-list-row>
+        <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+        <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+        <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-          augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+          augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
         >
-      </bx-structured-list-row>
-    </bx-structured-list-body>
-  </bx-structured-list>
+      </cds-structured-list-row>
+    </cds-structured-list-body>
+  </cds-structured-list>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/index.html
index 37472726cf2..cb84dd3dd4e 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/index.html
@@ -13,49 +13,51 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <style>
+ 
+  <link rel="stylesheet" href="src/styles.scss" />
+ <style>
     /* Suppress custom element until styles are loaded */
-    bx-structured-list:not(:defined) {
+    cds-structured-list:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-structured-list>
-    <bx-structured-list-head>
-      <bx-structured-list-header-row>
-        <bx-structured-list-header-cell>ColumnA</bx-structured-list-header-cell>
-        <bx-structured-list-header-cell>ColumnB</bx-structured-list-header-cell>
-        <bx-structured-list-header-cell>ColumnC</bx-structured-list-header-cell>
-      </bx-structured-list-header-row>
-    </bx-structured-list-head>
-    <bx-structured-list-body>
-      <bx-structured-list-row>
-        <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-        <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-        <bx-structured-list-cell
+  <cds-structured-list>
+    <cds-structured-list-head>
+      <cds-structured-list-header-row>
+        <cds-structured-list-header-cell>ColumnA</cds-structured-list-header-cell>
+        <cds-structured-list-header-cell>ColumnB</cds-structured-list-header-cell>
+        <cds-structured-list-header-cell>ColumnC</cds-structured-list-header-cell>
+      </cds-structured-list-header-row>
+    </cds-structured-list-head>
+    <cds-structured-list-body>
+      <cds-structured-list-row>
+        <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+        <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+        <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-          augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+          augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
         >
-      </bx-structured-list-row>
-      <bx-structured-list-row>
-        <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-        <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-        <bx-structured-list-cell
+      </cds-structured-list-row>
+      <cds-structured-list-row>
+        <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+        <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+        <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-          augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+          augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
         >
-      </bx-structured-list-row>
-      <bx-structured-list-row>
-        <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-        <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-        <bx-structured-list-cell
+      </cds-structured-list-row>
+      <cds-structured-list-row>
+        <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+        <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+        <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-          augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+          augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
         >
-      </bx-structured-list-row>
-    </bx-structured-list-body>
-  </bx-structured-list>
+      </cds-structured-list-row>
+    </cds-structured-list-body>
+  </cds-structured-list>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/package.json
index a11f161d274..93e2529dc29 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/cdn.html
index 9b66e5b129a..8d6c3b5e490 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/cdn.html
@@ -13,26 +13,28 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-tabs:not(:defined) {
+    cds-tabs:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tabs.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tabs.min.js"></script>
 </head>
-<body>
-  <bx-tabs
+<body class="cds-theme-zone-white">
+  <cds-tabs
     trigger-content="Select an item"
     value="staging"
   >
-    <bx-tab id="tab-all" target="panel-all" value="all">Option 1</bx-tab>
-    <bx-tab id="tab-cloudFoundry" target="panel-cloudFoundry" disabled value="cloudFoundry">Option 2</bx-tab>
-    <bx-tab id="tab-staging" target="panel-staging" value="staging">Option 3</bx-tab>
-    <bx-tab id="tab-dea" target="panel-dea" value="dea">Option 4</bx-tab>
-    <bx-tab id="tab-router" target="panel-router" value="router">Option 5</bx-tab>
-  </bx-tabs>
-  <div class="bx-ce-demo-devenv--tab-panels">
+    <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
+    <cds-tab id="tab-cloudFoundry" target="panel-cloudFoundry" disabled value="cloudFoundry">Option 2</cds-tab>
+    <cds-tab id="tab-staging" target="panel-staging" value="staging">Option 3</cds-tab>
+    <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
+    <cds-tab id="tab-router" target="panel-router" value="router">Option 5</cds-tab>
+  </cds-tabs>
+  <div class="cds-ce-demo-devenv--tab-panels">
     <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
       <h4>Content for option 1</h4>
       <p>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/index.html
index 2691538073f..8b404d0133b 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/index.html
@@ -13,26 +13,28 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-tabs:not(:defined) {
+    cds-tabs:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-tabs
+  <cds-tabs
     trigger-content="Select an item"
     value="staging"
   >
-    <bx-tab id="tab-all" target="panel-all" value="all">Option 1</bx-tab>
-    <bx-tab id="tab-cloudFoundry" target="panel-cloudFoundry" disabled value="cloudFoundry">Option 2</bx-tab>
-    <bx-tab id="tab-staging" target="panel-staging" value="staging">Option 3</bx-tab>
-    <bx-tab id="tab-dea" target="panel-dea" value="dea">Option 4</bx-tab>
-    <bx-tab id="tab-router" target="panel-router" value="router">Option 5</bx-tab>
-  </bx-tabs>
-  <div class="bx-ce-demo-devenv--tab-panels">
+    <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
+    <cds-tab id="tab-cloudFoundry" target="panel-cloudFoundry" disabled value="cloudFoundry">Option 2</cds-tab>
+    <cds-tab id="tab-staging" target="panel-staging" value="staging">Option 3</cds-tab>
+    <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
+    <cds-tab id="tab-router" target="panel-router" value="router">Option 5</cds-tab>
+  </cds-tabs>
+  <div class="cds-ce-demo-devenv--tab-panels">
     <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
       <h4>Content for option 1</h4>
       <p>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/package.json
index 2e8d13cc3e7..83b5b2360c2 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tabs/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/cdn.html
index e4eecfede23..fc643fca2f7 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/cdn.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-tag:not(:defined) {
+    cds-tag:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tag.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tag.min.js"></script>
 </head>
-<body>
-  <bx-tag type="gray" title="Clear selection">
+<body class="cds-theme-zone-white">
+  <cds-tag type="gray" title="Clear selection">
     This is a tag
-  </bx-tag>
+  </cds-tag>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/index.html
index c319b6bf9f9..f205bf4f774 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/index.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-tag:not(:defined) {
+    cds-tag:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-tag type="gray" title="Clear selection">
+  <cds-tag type="gray" title="Clear selection">
     This is a tag
-  </bx-tag>
+  </cds-tag>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/package.json
index cb81dfd27c5..a582448b779 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tag/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/src/styles.scss
new file mode 100644
index 00000000000..b2ebf32cbeb
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tag/src/styles.scss
@@ -0,0 +1,12 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/cdn.html
index 1a20ef43ee2..22154dca031 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/cdn.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-textarea:not(:defined) {
+    cds-textarea:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/textarea.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/textarea.min.js"></script>
 </head>
-<body>
-  <bx-textarea placeholder="Optional placeholder text" rows="4" cols="50"></bx-textarea>
+<body class="cds-theme-zone-white">
+  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50"></cds-textarea>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/index.html
index 7fe95584cfc..dd166a8b603 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/index.html
@@ -13,15 +13,17 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+ 
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-textarea:not(:defined) {
+    cds-textarea:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-textarea placeholder="Optional placeholder text" rows="4" cols="50"></bx-textarea>
+  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50"></cds-textarea>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/package.json
index c89b90b0e83..5eafc0efc87 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/textarea/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/cdn.html
index 7d4fc2df454..363f962f23d 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/cdn.html
@@ -13,17 +13,19 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-clickable-tile:not(:defined) {
+    cds-clickable-tile:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tile.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tile.min.js"></script>
 </head>
-<body>
-  <bx-clickable-tile>
+<body class="cds-theme-zone-white">
+  <cds-clickable-tile>
     Clickable tile
-  </bx-clickable-tile>
+  </cds-clickable-tile>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/index.html
index 5dae95488dc..d7f75fe7b34 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/index.html
@@ -13,17 +13,20 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-clickable-tile:not(:defined) {
+    cds-clickable-tile:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-clickable-tile>
+  <cds-clickable-tile>
     Clickable tile
-  </bx-clickable-tile>
+  </cds-clickable-tile>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/package.json
index 36e56235be6..7a230245b57 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tile/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tile/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/cdn.html
index a4eda871faf..70b45948dbd 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/cdn.html
@@ -13,19 +13,21 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-toggle:not(:defined) {
+    cds-toggle:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/toggle.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/toggle.min.js"></script>
 </head>
-<body>
-  <bx-toggle
-    checked-text="On"
+<body class="cds-theme-zone-white">
+  <cds-toggle
+    label-a="On"
     label-text="Toggle"
-    unchecked-text="Off"
-  ></bx-toggle>
+    label-b="Off"
+  ></cds-toggle>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/index.html
index a48eae75902..9e4c06a42fa 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/index.html
@@ -13,19 +13,21 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-toggle:not(:defined) {
+    cds-toggle:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-toggle
-    checked-text="On"
+  <cds-toggle
+    label-a="On"
     label-text="Toggle"
-    unchecked-text="Off"
-  ></bx-toggle>
+    label-b="Off"
+  ></cds-toggle>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/package.json
index e0811b25928..f47b4114be5 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/toggle/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/cdn.html
index cfc53e3ed8e..5320a4e0508 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/cdn.html
@@ -13,25 +13,31 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-tooltip:not(:defined) {
+    cds-tooltip:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tooltip.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tooltip.min.js"></script>
 </head>
-<body>
+<body class="cds-theme-zone-white">
   <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
-    <bx-tooltip>
-      <bx-tooltip-body>
-        <p>
-          This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
-          please use a modal instead.
-        </p>
-        <bx-tooltip-footer> <a href="#" class="bx--link">Learn More</a><bx-btn kind="primary">Create</bx-btn> </bx-tooltip-footer>
-      </bx-tooltip-body>
-    </bx-tooltip>
+    <cds-tooltip
+      align="bottom">
+     <div class="sb-tooltip-trigger">
+      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+        <path d="M17 22L17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22zM16 8a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 8z"></path>
+        <path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path>
+        <title>Information</title>
+      </svg>
+     </div>
+    <cds-tooltip-content>
+      Occassionally, services are updated in a specified time window to ensure no down time for customers.
+    </cds-tooltip-content>
+  </cds-tooltip>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/index.html
index 82829d6f518..c1c28a9aebc 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/index.html
@@ -13,9 +13,11 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-tooltip:not(:defined) {
+    cds-tooltip:not(:defined) {
       display: none;
     }
   </style>
@@ -23,15 +25,19 @@
 </head>
 <body>
   <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
-    <bx-tooltip>
-      <bx-tooltip-body>
-        <p>
-          This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
-          please use a modal instead.
-        </p>
-        <bx-tooltip-footer> <a href="#" class="bx--link">Learn More</a><bx-btn kind="primary">Create</bx-btn> </bx-tooltip-footer>
-      </bx-tooltip-body>
-    </bx-tooltip>
+    <cds-tooltip
+      align="bottom">
+     <div class="sb-tooltip-trigger">
+      <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+        <path d="M17 22L17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22zM16 8a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 8z"></path>
+        <path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path>
+        <title>Information</title>
+      </svg>
+     </div>
+    <cds-tooltip-content>
+      Occassionally, services are updated in a specified time window to ensure no down time for customers.
+    </cds-tooltip-content>
+  </cds-tooltip>
   </div>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/package.json
index 56d41db3e3a..cbbec2f4a95 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/.sassrc b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/.sassrc
new file mode 100644
index 00000000000..956b9e0a3d8
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/cdn.html b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/cdn.html
index aeeb18323b1..dfabf59d9d6 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/cdn.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/cdn.html
@@ -13,31 +13,32 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-header:not(:defined) {
+    cds-header:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/ui-shell.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script>
 </head>
-<body>
-  <bx-header aria-label="IBM Platform Name">
-    <bx-header-menu-button
+<body class="cds-theme-zone-white">
+  <cds-header aria-label="IBM Platform Name">
+    <cds-header-menu-button
       button-label-active="Close menu"
       button-label-inactive="Open menu"
-    ></bx-header-menu-button>
-    <bx-header-name href="javascript:void 0" prefix="IBM">[Platform]</bx-header-name>
-    <bx-header-nav menu-bar-label="IBM [Platform]">
-      <bx-header-nav-item href="javascript:void 0">Link 1</bx-header-nav-item>
-      <bx-header-nav-item href="javascript:void 0">Link 2</bx-header-nav-item>
-      <bx-header-nav-item href="javascript:void 0">Link 3</bx-header-nav-item>
-      <bx-header-menu menu-label="Link 4" trigger-content="Link 4">
-        <bx-header-menu-item href="javascript:void 0">Sub-link 1</bx-header-menu-item>
-        <bx-header-menu-item href="javascript:void 0">Sub-link 2</bx-header-menu-item>
-        <bx-header-menu-item href="javascript:void 0">Sub-link 3</bx-header-menu-item>
-      </bx-header-menu>
-    </bx-header-nav>
-  </bx-header>
+    ></cds-header-menu-button>
+    <cds-header-name href="javascript:void 0" prefix="IBM">[Platform]</cds-header-name>
+    <cds-header-nav menu-bar-label="IBM [Platform]">
+      <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
+      <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
+      <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
+      <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+        <cds-header-menu-item href="javascript:void 0">Sub-link 1</cds-header-menu-item>
+        <cds-header-menu-item href="javascript:void 0">Sub-link 2</cds-header-menu-item>
+        <cds-header-menu-item href="javascript:void 0">Sub-link 3</cds-header-menu-item>
+      </cds-header-menu>
+    </cds-header-nav>
+  </cds-header>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/index.html b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/index.html
index 51d10cb4b8d..73c0682befe 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/index.html
@@ -13,31 +13,33 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+ 
+  <link rel="stylesheet" href="src/styles.scss" />
   <style>
     /* Suppress custom element until styles are loaded */
-    bx-header:not(:defined) {
+    cds-header:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="src/index.js"></script>
 </head>
 <body>
-  <bx-header aria-label="IBM Platform Name">
-    <bx-header-menu-button
+  <cds-header aria-label="IBM Platform Name">
+    <cds-header-menu-button
       button-label-active="Close menu"
       button-label-inactive="Open menu"
-    ></bx-header-menu-button>
-    <bx-header-name href="javascript:void 0" prefix="IBM">[Platform]</bx-header-name>
-    <bx-header-nav menu-bar-label="IBM [Platform]">
-      <bx-header-nav-item href="javascript:void 0">Link 1</bx-header-nav-item>
-      <bx-header-nav-item href="javascript:void 0">Link 2</bx-header-nav-item>
-      <bx-header-nav-item href="javascript:void 0">Link 3</bx-header-nav-item>
-      <bx-header-menu menu-label="Link 4" trigger-content="Link 4">
-        <bx-header-menu-item href="javascript:void 0">Sub-link 1</bx-header-menu-item>
-        <bx-header-menu-item href="javascript:void 0">Sub-link 2</bx-header-menu-item>
-        <bx-header-menu-item href="javascript:void 0">Sub-link 3</bx-header-menu-item>
-      </bx-header-menu>
-    </bx-header-nav>
-  </bx-header>
+    ></cds-header-menu-button>
+    <cds-header-name href="javascript:void 0" prefix="IBM">[Platform]</cds-header-name>
+    <cds-header-nav menu-bar-label="IBM [Platform]">
+      <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
+      <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
+      <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
+      <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+        <cds-header-menu-item href="javascript:void 0">Sub-link 1</cds-header-menu-item>
+        <cds-header-menu-item href="javascript:void 0">Sub-link 2</cds-header-menu-item>
+        <cds-header-menu-item href="javascript:void 0">Sub-link 3</cds-header-menu-item>
+      </cds-header-menu>
+    </cds-header-nav>
+  </cds-header>
 </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/package.json b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/package.json
index f9c8e8d5057..6cfa34329e7 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/package.json
@@ -11,7 +11,9 @@
     "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/src/styles.scss
new file mode 100644
index 00000000000..5bde587c9b5
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/index.html b/packages/carbon-web-components/examples/codesandbox/basic/index.html
index 534b2cd2bfb..7662ecfbb96 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/basic/index.html
@@ -11,6 +11,7 @@
   <head>
     <title>carbon-web-components example</title>
     <meta charset="UTF-8" />
+    <link rel="stylesheet" href="src/styles.scss" />
     <style type="text/css">
       body {
         font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
@@ -20,13 +21,13 @@
         width: 300px;
       }
 
-      bx-dropdown,
-      bx-dropdown-item {
+      cds-dropdown,
+      cds-dropdown-item {
         visibility: hidden;
       }
 
-      bx-dropdown:defined,
-      bx-dropdown-item:defined {
+      cds-dropdown:defined,
+      cds-dropdown-item:defined {
         visibility: inherit;
       }
     </style>
@@ -34,13 +35,13 @@
   <body>
     <h1>Hello World! 👋</h1>
     <div id="app">
-      <bx-dropdown trigger-content="Select an item">
-        <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-        <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-        <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-        <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-        <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-      </bx-dropdown>
+      <cds-dropdown trigger-content="Select an item">
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+      </cds-dropdown>
     </div>
     <script type="module" src="src/index.js"></script>
   </body>
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/package.json b/packages/carbon-web-components/examples/codesandbox/basic/package.json
index a0bcecdaf8d..9bb22c2f7a9 100644
--- a/packages/carbon-web-components/examples/codesandbox/basic/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/basic/package.json
@@ -4,16 +4,22 @@
   "private": true,
   "description": "Sample project for getting started with the Web Components from the Carbon Design System.",
   "license": "Apache-2",
+  "main": "index.html",
   "scripts": {
-    "start": "webpack serve"
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/styles": "^1.34.0",
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
-    "html-webpack-plugin": "^4.5.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-transform-runtime": "^7.22.10",
+    "@babel/preset-env": "^7.22.10",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/basic/src/styles.scss
new file mode 100644
index 00000000000..0a4a8f7fb6a
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/basic/src/styles.scss
@@ -0,0 +1,9 @@
+@use '@carbon/styles/scss/reset';
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/themes';
+
+:root {
+  @include theme.theme(themes.$white);
+  background-color: var(--cds-background);
+  color: var(--cds-text-primary);
+}
\ No newline at end of file
diff --git a/packages/carbon-web-components/examples/codesandbox/basic/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/basic/webpack.config.js
deleted file mode 100644
index 90877d62670..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/basic/webpack.config.js
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  // disable the host check on sandbox
-  devServer: {
-    disableHostCheck: true
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'index.html',
-    }),
-  ],
-};
diff --git a/packages/carbon-web-components/examples/codesandbox/cdn/index.html b/packages/carbon-web-components/examples/codesandbox/cdn/index.html
index eefee5a79e6..fe22243ca18 100644
--- a/packages/carbon-web-components/examples/codesandbox/cdn/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/cdn/index.html
@@ -10,50 +10,51 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/grid.css"/>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/accordion.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/breadcrumb.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/button.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/checkbox.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/code-snippet.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/combo-box.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/content-switcher.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/copy-button.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/data-table.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/date-picker.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/dropdown.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/file-uploader.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/floating-menu.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/form.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/inline-loading.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/input.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/list.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/loading.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/multi-select.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/notification.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/number-input.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/overflow-menu.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/pagination.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/progress-indicator.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/radio-button.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/search.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/select.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/skeleton-placeholder.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/skeleton-text.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/skip-to-content.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/slider.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/structured-list.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tabs.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tag.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/textarea.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tile.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/toggle.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/tooltip.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/latest/ui-shell.min.js"></script>
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" /> 
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/accordion.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/breadcrumb.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/checkbox.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/code-snippet.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/combo-box.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/content-switcher.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/copy-button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/data-table.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/date-picker.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/dropdown.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/file-uploader.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/floating-menu.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/form.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/inline-loading.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/layer.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/link.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/list.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/loading.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/modal.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/multi-select.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/notification.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/number-input.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/overflow-menu.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/pagination.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/progress-indicator.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/radio-button.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/search.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/select.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-placeholder.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skeleton-text.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/skip-to-content.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/slider.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/structured-list.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tabs.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tag.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/textarea.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tile.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/toggle.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/tooltip.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/ui-shell.min.js"></script>
 
   <style>
     h3 {
@@ -61,297 +62,324 @@
     }
   </style>
 </head>
-<body>
-<bx-header aria-label="IBM Platform Name">
-  <bx-header-menu-button
+<body class="cds-theme-zone-white">
+<cds-header aria-label="IBM Platform Name">
+  <cds-header-menu-button
     button-label-active="Close menu"
     button-label-inactive="Open menu"
-  ></bx-header-menu-button>
-  <bx-header-name href="javascript:void 0" prefix="IBM">[Platform]</bx-header-name>
-  <bx-header-nav menu-bar-label="IBM [Platform]">
-    <bx-header-nav-item href="javascript:void 0">Link 1</bx-header-nav-item>
-    <bx-header-nav-item href="javascript:void 0">Link 2</bx-header-nav-item>
-    <bx-header-nav-item href="javascript:void 0">Link 3</bx-header-nav-item>
-    <bx-header-menu menu-label="Link 4" trigger-content="Link 4">
-      <bx-header-menu-item href="javascript:void 0">Sub-link 1</bx-header-menu-item>
-      <bx-header-menu-item href="javascript:void 0">Sub-link 2</bx-header-menu-item>
-      <bx-header-menu-item href="javascript:void 0">Sub-link 3</bx-header-menu-item>
-    </bx-header-menu>
-  </bx-header-nav>
-</bx-header>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12" style="margin: 6rem 0;">
-      <h3>bx-accordion</h3>
-
-      <bx-accordion>
-        <bx-accordion-item title-text="Lorem Ipsum">
+  ></cds-header-menu-button>
+  <cds-header-name href="javascript:void 0" prefix="IBM">[Platform]</cds-header-name>
+  <cds-header-nav menu-bar-label="IBM [Platform]">
+    <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
+    <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
+    <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
+    <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+      <cds-header-menu-item href="javascript:void 0">Sub-link 1</cds-header-menu-item>
+      <cds-header-menu-item href="javascript:void 0">Sub-link 2</cds-header-menu-item>
+      <cds-header-menu-item href="javascript:void 0">Sub-link 3</cds-header-menu-item>
+    </cds-header-menu>
+  </cds-header-nav>
+</cds-header>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12" style="margin: 6rem 0;">
+      <h3>cds-accordion</h3>
+
+      <cds-accordion>
+        <cds-accordion-item title="Section 1 title">
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+            minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
           </p>
-        </bx-accordion-item>
-        <bx-accordion-item title-text="Lorem Ipsum">
+        </cds-accordion-item>
+        <cds-accordion-item title="Section 2 title">
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+            minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
           </p>
-        </bx-accordion-item>
-        <bx-accordion-item title-text="Lorem Ipsum">
+        </cds-accordion-item>
+        <cds-accordion-item title="Section 3 title">
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+            minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
+          </p>
+        </cds-accordion-item>
+        <cds-accordion-item title="Section 4 title">
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+            minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+            aliquip ex ea commodo consequat.
           </p>
-        </bx-accordion-item>
-      </bx-accordion>
+        </cds-accordion-item>
+      </cds-accordion>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-breadcrumb</h3>
+      <h3>cds-breadcrumb</h3>
 
-      <bx-breadcrumb>
-        <bx-breadcrumb-item>
-          <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-        </bx-breadcrumb-item>
-        <bx-breadcrumb-item>
-          <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-        </bx-breadcrumb-item>
-        <bx-breadcrumb-item>
-          <bx-breadcrumb-link href="/#" aria-current="page">Breadcrumb 3</bx-breadcrumb-link>
-        </bx-breadcrumb-item>
-      </bx-breadcrumb>
+      <cds-breadcrumb>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+        <cds-breadcrumb-item>
+          <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+        </cds-breadcrumb-item>
+      </cds-breadcrumb>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-btn</h3>
+      <h3>cds-button</h3>
 
-      <bx-btn href="https://www.ibm.com">
+      <cds-button href="https://www.ibm.com">
         Button
-      </bx-btn>
+      </cds-button>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-checkbox</h3>
+      <h3>cds-checkbox</h3>
 
-      <bx-checkbox label-text="Lorem Ipsum"></bx-checkbox>
+      <cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-code-snippet</h3>
+      <h3>cds-code-snippet</h3>
 
-      <bx-code-snippet>
+      <cds-code-snippet>
         node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae
         officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
         laboriosam!
-      </bx-code-snippet>
+      </cds-code-snippet>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-combo-box</h3>
+      <h3>cds-combo-box</h3>
 
-      <bx-combo-box
+      <cds-combo-box
         helper-text="Optional helper text"
         label-text="Combo box title"
         trigger-content="Filter..."
       >
-        <bx-combo-box-item value="all">Option 1</bx-combo-box-item>
-        <bx-combo-box-item value="cloudFoundry">Option 2</bx-combo-box-item>
-        <bx-combo-box-item value="staging">Option 3</bx-combo-box-item>
-        <bx-combo-box-item value="dea">Option 4</bx-combo-box-item>
-        <bx-combo-box-item value="router">Option 5</bx-combo-box-item>
-        <bx-combo-box-item value="support">Option 6</bx-combo-box-item>
-        <bx-combo-box-item value="services">Option 7</bx-combo-box-item>
-        <bx-combo-box-item value="products">Option 8</bx-combo-box-item>
-      </bx-combo-box>
+        <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
+        <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>
+        <cds-combo-box-item value="staging">Option 3</cds-combo-box-item>
+        <cds-combo-box-item value="dea">Option 4</cds-combo-box-item>
+        <cds-combo-box-item value="router">Option 5</cds-combo-box-item>
+        <cds-combo-box-item value="support">Option 6</cds-combo-box-item>
+        <cds-combo-box-item value="services">Option 7</cds-combo-box-item>
+        <cds-combo-box-item value="products">Option 8</cds-combo-box-item>
+      </cds-combo-box>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-content-switcher</h3>
+      <h3>cds-content-switcher</h3>
 
-      <bx-content-switcher>
-        <bx-content-switcher-item value="all">Option 1</bx-content-switcher-item>
-        <bx-content-switcher-item value="cloudFoundry" disabled>Option 2</bx-content-switcher-item>
-        <bx-content-switcher-item value="staging">Option 3</bx-content-switcher-item>
-        <bx-content-switcher-item value="dea">Option 4</bx-content-switcher-item>
-        <bx-content-switcher-item value="router">Option 5</bx-content-switcher-item>
-      </bx-content-switcher>
+      <cds-content-switcher>
+        <cds-content-switcher-item value="all">Option 1</cds-content-switcher-item>
+        <cds-content-switcher-item value="cloudFoundry" disabled>Option 2</cds-content-switcher-item>
+        <cds-content-switcher-item value="staging">Option 3</cds-content-switcher-item>
+        <cds-content-switcher-item value="dea">Option 4</cds-content-switcher-item>
+        <cds-content-switcher-item value="router">Option 5</cds-content-switcher-item>
+      </cds-content-switcher>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-copy-button</h3>
+      <h3>cds-copy-button</h3>
 
       <div style="position: relative; width: 100%; z-index: 0; padding: 3rem; border: 1px solid black;">
-        <bx-copy-button
+        <cds-copy-button
           button-assistive-text="Copy to clipboard"
           feedback-text="Copied!"
-        ></bx-copy-button>
+        ></cds-copy-button>
       </div>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-data-table</h3>
-
-      <bx-table>
-        <bx-table-head>
-          <bx-table-header-row>
-            <bx-table-header-cell>Foo</bx-table-header-cell>
-            <bx-table-header-cell>Bar</bx-table-header-cell>
-            <bx-table-header-cell>Baz</bx-table-header-cell>
-          </bx-table-header-row>
-        </bx-table-head>
-        <bx-table-body>
-          <bx-table-row>
-            <bx-table-cell>Foo1</bx-table-cell>
-            <bx-table-cell>Bar1</bx-table-cell>
-            <bx-table-cell>Baz1</bx-table-cell>
-          </bx-table-row>
-          <bx-table-row>
-            <bx-table-cell>Foo2</bx-table-cell>
-            <bx-table-cell>Bar2</bx-table-cell>
-            <bx-table-cell>Baz2</bx-table-cell>
-          </bx-table-row>
-          <bx-table-row>
-            <bx-table-cell>Foo3</bx-table-cell>
-            <bx-table-cell>Bar3</bx-table-cell>
-            <bx-table-cell>Baz3</bx-table-cell>
-          </bx-table-row>
-        </bx-table-body>
-      </bx-table>
-
-      <hr style="margin: 3rem 0" />
-
-      <h3>bx-date-picker</h3>
-
-      <bx-date-picker>
-        <bx-date-picker-input
+      <h3>cds-data-table</h3>
+
+      <cds-table>
+        <cds-table-head>
+          <cds-table-header-row>
+            <cds-table-header-cell>Foo</cds-table-header-cell>
+            <cds-table-header-cell>Bar</cds-table-header-cell>
+            <cds-table-header-cell>Baz</cds-table-header-cell>
+          </cds-table-header-row>
+        </cds-table-head>
+        <cds-table-body>
+          <cds-table-row>
+            <cds-table-cell>Foo1</cds-table-cell>
+            <cds-table-cell>Bar1</cds-table-cell>
+            <cds-table-cell>Baz1</cds-table-cell>
+          </cds-table-row>
+          <cds-table-row>
+            <cds-table-cell>Foo2</cds-table-cell>
+            <cds-table-cell>Bar2</cds-table-cell>
+            <cds-table-cell>Baz2</cds-table-cell>
+          </cds-table-row>
+          <cds-table-row>
+            <cds-table-cell>Foo3</cds-table-cell>
+            <cds-table-cell>Bar3</cds-table-cell>
+            <cds-table-cell>Baz3</cds-table-cell>
+          </cds-table-row>
+        </cds-table-body>
+      </cds-table>
+
+      <hr style="margin: 3rem 0" />
+
+      <h3>cds-date-picker</h3>
+
+      <cds-date-picker>
+        <cds-date-picker-input
           kind="single"
           label-text="Date Picker label"
           placeholder="mm/dd/yyyy"
         >
-        </bx-date-picker-input>
-      </bx-date-picker>
+        </cds-date-picker-input>
+      </cds-date-picker>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-dropdown</h3>
+      <h3>cds-dropdown</h3>
 
-      <bx-dropdown value="bar">
-        <bx-dropdown-item value="foo">Foo</bx-dropdown-item>
-        <bx-dropdown-item value="bar">Bar</bx-dropdown-item>
-        <bx-dropdown-item value="baz">Baz</bx-dropdown-item>
-      </bx-dropdown>
+      <cds-dropdown value="bar">
+        <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
+        <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
+        <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
+      </cds-dropdown>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-file-uploader</h3>
+      <h3>cds-file-uploader</h3>
 
-      <bx-file-uploader helper-text="Only .jpg and .png files. 500kb max file size" label-text="Account photo">
-        <bx-file-drop-container
+      <cds-file-uploader helper-text="Only .jpg and .png files. 500kb max file size" label-text="Account photo">
+        <cds-file-drop-container
           accept="image/jpeg image/png"
           multiple="true"
         >
           Drag and drop files here or click to upload
-        </bx-file-drop-container>
-      </bx-file-uploader>
+        </cds-file-drop-container>
+      </cds-file-uploader>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-inline-loading</h3>
+      <h3>cds-inline-loading</h3>
 
-      <bx-inline-loading status="active">Loading data...</bx-inline-loading>
+      <cds-inline-loading status="active">Loading data...</cds-inline-loading>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-form-item</h3>
+      <h3>cds-form-item</h3>
 
-      <bx-form-item>
-        <bx-input>
+      <cds-form-item>
+        <cds-text-input>
           <span slot="label-text">Label text</span>
           <span slot="helper-text">Optional helper text</span>
           <span slot="validity-message">Something isn't right</span>
-        </bx-input>
-      </bx-form-item>
+        </cds-text-input>
+      </cds-form-item>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-link</h3>
+      <h3>cds-link</h3>
 
-      <bx-link href="https://www.ibm.com">
+      <cds-link href="https://www.ibm.com">
         Link
-      </bx-link>
+      </cds-link>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-ordered-list</h3>
+      <h3>cds-ordered-list</h3>
 
-      <bx-ordered-list>
-        <bx-list-item>
+      <cds-ordered-list>
+        <cds-list-item>
           Ordered List level 1
-          <bx-ordered-list>
-            <bx-list-item>Ordered List level 2</bx-list-item>
-            <bx-list-item>
+          <cds-ordered-list>
+            <cds-list-item>Ordered List level 2</cds-list-item>
+            <cds-list-item>
               Ordered List level 2
-              <bx-ordered-list>
-                <bx-list-item>Ordered List level 2</bx-list-item>
-                <bx-list-item>Ordered List level 2</bx-list-item>
-              </bx-ordered-list>
-            </bx-list-item>
-          </bx-ordered-list>
-        </bx-list-item>
-        <bx-list-item>Ordered List level 1</bx-list-item>
-        <bx-list-item>Ordered List level 1</bx-list-item>
-      </bx-ordered-list>
+              <cds-ordered-list>
+                <cds-list-item>Ordered List level 2</cds-list-item>
+                <cds-list-item>Ordered List level 2</cds-list-item>
+              </cds-ordered-list>
+            </cds-list-item>
+          </cds-ordered-list>
+        </cds-list-item>
+        <cds-list-item>Ordered List level 1</cds-list-item>
+        <cds-list-item>Ordered List level 1</cds-list-item>
+      </cds-ordered-list>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-unordered-list</h3>
+      <h3>cds-unordered-list</h3>
 
-      <bx-unordered-list>
-        <bx-list-item>
+      <cds-unordered-list>
+        <cds-list-item>
           Unordered List level 1
-          <bx-unordered-list>
-            <bx-list-item>Unordered List level 2</bx-list-item>
-            <bx-list-item>
+          <cds-unordered-list>
+            <cds-list-item>Unordered List level 2</cds-list-item>
+            <cds-list-item>
               Unordered List level 2
-              <bx-unordered-list>
-                <bx-list-item>Unordered List level 2</bx-list-item>
-                <bx-list-item>Unordered List level 2</bx-list-item>
-              </bx-unordered-list>
-            </bx-list-item>
-          </bx-unordered-list>
-        </bx-list-item>
-        <bx-list-item>Unordered List level 1</bx-list-item>
-        <bx-list-item>Unordered List level 1</bx-list-item>
-      </bx-unordered-list>
+              <cds-unordered-list>
+                <cds-list-item>Unordered List level 2</cds-list-item>
+                <cds-list-item>Unordered List level 2</cds-list-item>
+              </cds-unordered-list>
+            </cds-list-item>
+          </cds-unordered-list>
+        </cds-list-item>
+        <cds-list-item>Unordered List level 1</cds-list-item>
+        <cds-list-item>Unordered List level 1</cds-list-item>
+      </cds-unordered-list>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-loading</h3>
+      <h3>cds-loading</h3>
 
       <div style="position: relative; padding: 3rem; display: flex;">
-        <bx-loading></bx-loading>
+        <cds-loading></cds-loading>
       </div>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-modal</h3>
+      <h3>cds-modal</h3>
 
-      <bx-btn id="modal-example-button">
+      <cds-button id="modal-example-button">
         Open Modal
-      </bx-btn>
-
-      <bx-modal id="modal-example">
-        <bx-modal-header>
-          <bx-modal-close-button></bx-modal-close-button>
-          <bx-modal-label>Label (Optional)</bx-modal-label>
-          <bx-modal-heading>Modal Title</bx-modal-heading>
-        </bx-modal-header>
-        <bx-modal-body><p>Modal text description</p></bx-modal-body>
-        <bx-modal-footer>
-          <bx-modal-footer-button kind="secondary" data-modal-close>Cancel</bx-modal-footer-button>
-          <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-        </bx-modal-footer>
-      </bx-modal>
+      </cds-button>
+
+      <cds-layer>
+        <div style="padding: 1rem;">Layer 1</div>
+        <cds-layer>
+          <div style="padding: 1rem;">Layer 2</div>
+          <cds-layer>
+            <div style="padding: 1rem;">Layer 3</div>
+          </cds-layer>
+        </cds-layer>
+      </cds-layer>
+
+      <cds-modal id="modal-example">
+        <cds-modal-header>
+          <cds-modal-close-button></cds-modal-close-button>
+          <cds-modal-label>Label (Optional)</cds-modal-label>
+          <cds-modal-heading>Modal Title</cds-modal-heading>
+        </cds-modal-header>
+        <cds-modal-body><p>Modal text description</p></cds-modal-body>
+        <cds-modal-footer>
+          <cds-modal-footer-button kind="secondary" data-modal-close>Cancel</cds-modal-footer-button>
+          <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+        </cds-modal-footer>
+      </cds-modal>
 
       <script type="text/javascript">
         document.getElementById('modal-example-button').addEventListener('click', () => {
@@ -361,220 +389,220 @@ <h3>bx-modal</h3>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-multi-select</h3>
+      <h3>cds-multi-select</h3>
 
-      <bx-multi-select
+      <cds-multi-select
         helper-text="Optional helper text"
         label-text="Multiselect title"
         trigger-content="Select items"
       >
-        <bx-multi-select-item value="all">Option 1</bx-multi-select-item>
-        <bx-multi-select-item value="cloudFoundry">Option 2</bx-multi-select-item>
-        <bx-multi-select-item value="staging">Option 3</bx-multi-select-item>
-        <bx-multi-select-item value="dea">Option 4</bx-multi-select-item>
-        <bx-multi-select-item value="router">Option 5</bx-multi-select-item>
-      </bx-multi-select>
+        <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+        <cds-multi-select-item value="cloudFoundry">Option 2</cds-multi-select-item>
+        <cds-multi-select-item value="staging">Option 3</cds-multi-select-item>
+        <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+        <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+      </cds-multi-select>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-inline-notification</h3>
+      <h3>cds-inline-notification</h3>
 
-      <bx-inline-notification
+      <cds-inline-notification
         style="min-width: 30rem; margin-bottom: .5rem"
         title="Notification title"
         subtitle="Subtitle text goes here."
       >
-      </bx-inline-notification>
+      </cds-inline-notification>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-number-input</h3>
+      <h3>cds-number-input</h3>
 
-      <bx-number-input></bx-number-input>
+      <cds-number-input></cds-number-input>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-overflow-menu</h3>
+      <h3>cds-overflow-menu</h3>
 
       <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
-        <bx-overflow-menu>
-          <bx-overflow-menu-body>
-            <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-            <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-            <bx-overflow-menu-item>Option 3</bx-overflow-menu-item>
-            <bx-overflow-menu-item>Option 4</bx-overflow-menu-item>
-            <bx-overflow-menu-item>Option 5</bx-overflow-menu-item>
-          </bx-overflow-menu-body>
-        </bx-overflow-menu>
+        <cds-overflow-menu>
+          <cds-overflow-menu-body>
+            <cds-overflow-menu-item>Option 1</cds-overflow-menu-item>
+            <cds-overflow-menu-item>Option 2</cds-overflow-menu-item>
+            <cds-overflow-menu-item>Option 3</cds-overflow-menu-item>
+            <cds-overflow-menu-item>Option 4</cds-overflow-menu-item>
+            <cds-overflow-menu-item>Option 5</cds-overflow-menu-item>
+          </cds-overflow-menu-body>
+        </cds-overflow-menu>
       </div>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-pagination</h3>
+      <h3>cds-pagination</h3>
 
-      <bx-pagination
+      <cds-pagination
         page-size="10"
         start="0"
         total="100"
       >
-        <bx-page-sizes-select slot="page-sizes-select">
+        <cds-page-sizes-select slot="page-sizes-select">
           <option value="10">10</option>
           <option value="20">20</option>
           <option value="30">30</option>
-        </bx-page-sizes-select>
-        <bx-pages-select></bx-pages-select>
-      </bx-pagination>
+        </cds-page-sizes-select>
+        <cds-pages-select></cds-pages-select>
+      </cds-pagination>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-progress-indicator</h3>
+      <h3>cds-progress-indicator</h3>
 
-      <bx-progress-indicator>
-        <bx-progress-step
+      <cds-progress-indicator>
+        <cds-progress-step
           label-text="Label"
           secondary-label-text="Secondary label"
           state="invalid"
-        ></bx-progress-step>
-        <bx-progress-step
+        ></cds-progress-step>
+        <cds-progress-step
           label-text="Label"
           secondary-label-text="Secondary label"
           state="complete"
-        ></bx-progress-step>
-        <bx-progress-step
+        ></cds-progress-step>
+        <cds-progress-step
           label-text="Label"
           secondary-label-text="Secondary label"
           state="current"
-        ></bx-progress-step>
-        <bx-progress-step
+        ></cds-progress-step>
+        <cds-progress-step
           disabled
           label-text="Label"
           secondary-label-text="Secondary label"
-        ></bx-progress-step>
-        <bx-progress-step
+        ></cds-progress-step>
+        <cds-progress-step
           label-text="Label"
           secondary-label-text="Secondary label"
-        ></bx-progress-step>
-      </bx-progress-indicator>
+        ></cds-progress-step>
+      </cds-progress-indicator>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-radio-button</h3>
+      <h3>cds-radio-button</h3>
 
-      <bx-radio-button-group
+      <cds-radio-button-group
         label-position="right"
         orientation="horizontal"
         name="radio-group"
       >
-        <bx-radio-button label-text="Radio button" value="all"></bx-radio-button>
-        <bx-radio-button label-text="Radio button" value="cloudFoundry"></bx-radio-button>
-        <bx-radio-button label-text="Radio button" value="staging"></bx-radio-button>
-      </bx-radio-button-group>
+        <cds-radio-button label-text="Radio button" value="all"></cds-radio-button>
+        <cds-radio-button label-text="Radio button" value="cloudFoundry"></cds-radio-button>
+        <cds-radio-button label-text="Radio button" value="staging"></cds-radio-button>
+      </cds-radio-button-group>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-search</h3>
+      <h3>cds-search</h3>
 
-      <bx-search label-text="Search"></bx-search>
+      <cds-search label-text="Search"></cds-search>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-select</h3>
+      <h3>cds-select</h3>
 
-      <bx-select
+      <cds-select
         helper-text="Optional helper text"
         label-text="Select"
         placeholder="Optional placeholder text"
       >
-        <bx-select-item-group label="Category 1">
-          <bx-select-item value="all">Option 1</bx-select-item>
-          <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
-        </bx-select-item-group>
-        <bx-select-item-group label="Category 2">
-          <bx-select-item value="staging">Option 3</bx-select-item>
-          <bx-select-item value="dea">Option 4</bx-select-item>
-          <bx-select-item value="router">Option 5</bx-select-item>
-        </bx-select-item-group>
-      </bx-select>
+        <cds-select-item-group label="Category 1">
+          <cds-select-item value="all">Option 1</cds-select-item>
+          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+        </cds-select-item-group>
+        <cds-select-item-group label="Category 2">
+          <cds-select-item value="staging">Option 3</cds-select-item>
+          <cds-select-item value="dea">Option 4</cds-select-item>
+          <cds-select-item value="router">Option 5</cds-select-item>
+        </cds-select-item-group>
+      </cds-select>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-skeleton-placeholder</h3>
+      <h3>cds-skeleton-placeholder</h3>
 
-      <bx-skeleton-placeholder></bx-skeleton-placeholder>
+      <cds-skeleton-placeholder></cds-skeleton-placeholder>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-skeleton-text</h3>
+      <h3>cds-skeleton-text</h3>
 
-      <bx-skeleton-text></bx-skeleton-text>
+      <cds-skeleton-text></cds-skeleton-text>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-slider</h3>
+      <h3>cds-slider</h3>
 
-      <bx-slider
+      <cds-slider
         label-text="Slider"
         max="100"
         min="0"
         step="1"
         value="50"
-      ></bx-slider>
+      ></cds-slider>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-structured-list</h3>
+      <h3>cds-structured-list</h3>
 
-      <bx-structured-list>
-        <bx-structured-list-head>
-          <bx-structured-list-header-row>
-            <bx-structured-list-header-cell>ColumnA</bx-structured-list-header-cell>
-            <bx-structured-list-header-cell>ColumnB</bx-structured-list-header-cell>
-            <bx-structured-list-header-cell>ColumnC</bx-structured-list-header-cell>
-          </bx-structured-list-header-row>
-        </bx-structured-list-head>
-        <bx-structured-list-body>
-          <bx-structured-list-row>
-            <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-            <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-            <bx-structured-list-cell
+      <cds-structured-list>
+        <cds-structured-list-head>
+          <cds-structured-list-header-row>
+            <cds-structured-list-header-cell>ColumnA</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>ColumnB</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>ColumnC</cds-structured-list-header-cell>
+          </cds-structured-list-header-row>
+        </cds-structured-list-head>
+        <cds-structured-list-body>
+          <cds-structured-list-row>
+            <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+            <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+            <cds-structured-list-cell
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+              augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
             >
-          </bx-structured-list-row>
-          <bx-structured-list-row>
-            <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-            <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-            <bx-structured-list-cell
+          </cds-structured-list-row>
+          <cds-structured-list-row>
+            <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+            <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+            <cds-structured-list-cell
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+              augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
             >
-          </bx-structured-list-row>
-          <bx-structured-list-row>
-            <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-            <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-            <bx-structured-list-cell
+          </cds-structured-list-row>
+          <cds-structured-list-row>
+            <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+            <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+            <cds-structured-list-cell
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.</bx-structured-list-cell
+              augue. Aenean posuere sem vel euismod dignissim.</cds-structured-list-cell
             >
-          </bx-structured-list-row>
-        </bx-structured-list-body>
-      </bx-structured-list>
+          </cds-structured-list-row>
+        </cds-structured-list-body>
+      </cds-structured-list>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-tabs</h3>
+      <h3>cds-tabs</h3>
 
-      <bx-tabs
+      <cds-tabs
         trigger-content="Select an item"
         value="staging"
       >
-        <bx-tab id="tab-all" target="panel-all" value="all">Option 1</bx-tab>
-        <bx-tab id="tab-cloudFoundry" target="panel-cloudFoundry" disabled value="cloudFoundry">Option 2</bx-tab>
-        <bx-tab id="tab-staging" target="panel-staging" value="staging">Option 3</bx-tab>
-        <bx-tab id="tab-dea" target="panel-dea" value="dea">Option 4</bx-tab>
-        <bx-tab id="tab-router" target="panel-router" value="router">Option 5</bx-tab>
-      </bx-tabs>
-      <div class="bx-ce-demo-devenv--tab-panels">
+        <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
+        <cds-tab id="tab-cloudFoundry" target="panel-cloudFoundry" disabled value="cloudFoundry">Option 2</cds-tab>
+        <cds-tab id="tab-staging" target="panel-staging" value="staging">Option 3</cds-tab>
+        <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
+        <cds-tab id="tab-router" target="panel-router" value="router">Option 5</cds-tab>
+      </cds-tabs>
+      <div class="cds-ce-demo-devenv--tab-panels">
         <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
           <h4>Content for option 1</h4>
           <p>
@@ -614,50 +642,54 @@ <h4>Content for option 5</h4>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-tag</h3>
+      <h3>cds-tag</h3>
 
-      <bx-tag type="gray" title="Clear selection">
+      <cds-tag type="gray" title="Clear selection">
         This is a tag
-      </bx-tag>
+      </cds-tag>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-textarea</h3>
+      <h3>cds-textarea</h3>
 
-      <bx-textarea placeholder="Optional placeholder text" rows="4" cols="50"></bx-textarea>
+      <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50"></cds-textarea>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-clickable-tile</h3>
+      <h3>cds-clickable-tile</h3>
 
-      <bx-clickable-tile>
+      <cds-clickable-tile>
         Clickable tile
-      </bx-clickable-tile>
+      </cds-clickable-tile>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-toggle</h3>
+      <h3>cds-toggle</h3>
 
-      <bx-toggle
+      <cds-toggle
         checked-text="On"
         label-text="Toggle"
         unchecked-text="Off"
-      ></bx-toggle>
+      ></cds-toggle>
 
       <hr style="margin: 3rem 0" />
 
-      <h3>bx-tooltip</h3>
+      <h3>cds-tooltip</h3>
 
       <div data-floating-menu-container style="position: relative; padding: 3rem; display: flex; flex-direction: column; align-items: center;">
-        <bx-tooltip>
-          <bx-tooltip-body>
-            <p>
-              This is some tooltip text. This box shows the maximum amount of text that should appear inside. If more room is needed
-              please use a modal instead.
-            </p>
-            <bx-tooltip-footer> <a href="#" class="bx--link">Learn More</a><bx-btn kind="primary">Create</bx-btn> </bx-tooltip-footer>
-          </bx-tooltip-body>
-        </bx-tooltip>
+        <cds-tooltip
+          align="bottom">
+          <div class="sb-tooltip-trigger">
+            <svg focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" width="32" height="32" viewBox="0 0 32 32" aria-hidden="true">
+              <path d="M17 22L17 14 13 14 13 16 15 16 15 22 12 22 12 24 20 24 20 22 17 22zM16 8a1.5 1.5 0 101.5 1.5A1.5 1.5 0 0016 8z"></path>
+              <path d="M16,30A14,14,0,1,1,30,16,14,14,0,0,1,16,30ZM16,4A12,12,0,1,0,28,16,12,12,0,0,0,16,4Z"></path>
+              <title>Information</title>
+            </svg>
+          </div>
+          <cds-tooltip-content>
+            Occassionally, services are updated in a specified time window to ensure no down time for customers.
+          </cds-tooltip-content>
+        </cds-tooltip>
       </div>
 
       <hr style="margin: 3rem 0" />
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/.babelrc b/packages/carbon-web-components/examples/codesandbox/data-table/.babelrc
deleted file mode 100644
index a32aaca59b9..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/data-table/.babelrc
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "presets": [
-    [
-      "@babel/preset-env",
-      {
-        "modules": false,
-        "targets": [
-          "last 1 version",
-          "Firefox ESR",
-          "not opera > 0",
-          "not op_mini > 0",
-          "not op_mob > 0",
-          "not android > 0",
-          "not edge > 0",
-          "not ie > 0",
-          "not ie_mob > 0"
-        ]
-      }
-    ]
-  ],
-  "plugins": [
-    ["@babel/plugin-proposal-decorators", { "decoratorsBeforeExport": true }],
-    ["@babel/plugin-transform-runtime", { "version": "7.3.0" }]
-  ]
-}
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/index.html b/packages/carbon-web-components/examples/codesandbox/data-table/index.html
deleted file mode 100644
index 67225f5547a..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/data-table/index.html
+++ /dev/null
@@ -1,36 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>carbon-web-components example</title>
-    <meta charset="UTF-8" />
-    <style type="text/css">
-      body {
-        font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-        position: relative;
-      }
-
-      bx-ce-demo-data-table {
-        visibility: hidden;
-      }
-
-      bx-ce-demo-data-table:defined {
-        visibility: inherit;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-  <body>
-    <h1>Hello World! 👋</h1>
-    <div id="app" data-floating-menu-container>
-      <bx-ce-demo-data-table id="data-table" page-size="5" start="0"></bx-ce-demo-data-table>
-    </div>
-  </body>
-</html>
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/package.json b/packages/carbon-web-components/examples/codesandbox/data-table/package.json
deleted file mode 100644
index 1abb7cb0ef6..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/data-table/package.json
+++ /dev/null
@@ -1,25 +0,0 @@
-{
-  "name": "carbon-web-components-getting-started",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from the Carbon Design System.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "build": "parcel build index.html",
-    "start": "parcel index.html --no-hmr"
-  },
-  "dependencies": {
-    "@carbon/web-components": "v1-latest",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "lodash-es": "^4.17.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.10.0",
-    "@babel/plugin-proposal-decorators": "^7.10.0",
-    "@babel/plugin-transform-runtime": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "parcel-bundler": "^1.10.0"
-  }
-}
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/src/data.js b/packages/carbon-web-components/examples/codesandbox/data-table/src/data.js
deleted file mode 100644
index be62357705b..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/data-table/src/data.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { TABLE_SORT_DIRECTION } from '@carbon/web-components/es/components/data-table/table-header-cell';
-
-export const columns = [
-  {
-    id: 'name',
-    title: 'Name',
-    sortCycle: 'bi-states-from-ascending',
-  },
-  {
-    id: 'protocol',
-    title: 'Protocol',
-  },
-  {
-    id: 'port',
-    title: 'Port',
-    sortCycle: 'tri-states-from-ascending',
-  },
-  {
-    id: 'rule',
-    title: 'Rule',
-  },
-  {
-    id: 'attachedGroups',
-    title: 'Attached Groups',
-  },
-  {
-    id: 'status',
-    title: 'Status',
-  },
-];
-
-export const rows = [
-  {
-    id: 1,
-    name: 'Load Balancer 1',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 2,
-    name: 'Load Balancer 2',
-    protocol: 'HTTPS',
-    port: 443,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 3,
-    selected: true,
-    name: 'Load Balancer 3',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-];
-
-export const rowsMany = Array.from(new Array(50))
-  .map((_item, i) =>
-    rows.map((row, j) => ({
-      ...row,
-      id: i * 3 + j,
-      name: `Load Balancer ${String(i * 3 + j + 1).padStart(3, '0')}`,
-    }))
-  )
-  .flat();
-
-export const sortInfo = {
-  columnId: 'name',
-  direction: TABLE_SORT_DIRECTION.ASCENDING,
-};
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/src/demo-data-table.js b/packages/carbon-web-components/examples/codesandbox/data-table/src/demo-data-table.js
deleted file mode 100644
index 21c9a618fa8..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/data-table/src/demo-data-table.js
+++ /dev/null
@@ -1,460 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 debounce from 'lodash-es/debounce';
-import { repeat } from 'lit-html/directives/repeat';
-import { html, property, customElement, LitElement } from 'lit-element';
-import ifNonNull from '@carbon/web-components/es/globals/directives/if-non-null';
-import Delete16 from '@carbon/web-components/es/icons/delete/16';
-import Download16 from '@carbon/web-components/es/icons/download/16';
-import Settings16 from '@carbon/web-components/es/icons/settings/16';
-import '@carbon/web-components/es/components/button/button';
-import '@carbon/web-components/es/components/overflow-menu/overflow-menu';
-import '@carbon/web-components/es/components/overflow-menu/overflow-menu-body';
-import '@carbon/web-components/es/components/overflow-menu/overflow-menu-item';
-import '@carbon/web-components/es/components/pagination/pagination';
-import '@carbon/web-components/es/components/pagination/page-sizes-select';
-import '@carbon/web-components/es/components/pagination/pages-select';
-import { TABLE_COLOR_SCHEME, TABLE_SIZE } from '@carbon/web-components/es/components/data-table/table';
-import '@carbon/web-components/es/components/data-table/table-head';
-import '@carbon/web-components/es/components/data-table/table-header-row';
-import { TABLE_SORT_DIRECTION } from '@carbon/web-components/es/components/data-table/table-header-cell';
-import '@carbon/web-components/es/components/data-table/table-body';
-import '@carbon/web-components/es/components/data-table/table-row';
-import '@carbon/web-components/es/components/data-table/table-cell';
-import '@carbon/web-components/es/components/data-table/table-header-expand-row';
-import '@carbon/web-components/es/components/data-table/table-expand-row';
-import '@carbon/web-components/es/components/data-table/table-expanded-row';
-import '@carbon/web-components/es/components/data-table/table-toolbar';
-import '@carbon/web-components/es/components/data-table/table-toolbar-content';
-import '@carbon/web-components/es/components/data-table/table-toolbar-search';
-import '@carbon/web-components/es/components/data-table/table-batch-actions';
-import '@carbon/web-components/es/components/data-table/table-header-cell-skeleton';
-import '@carbon/web-components/es/components/data-table/table-cell-skeleton';
-
-/**
- * @param row A table row.
- * @param searchString A search string.
- * @returns `true` if the given table row matches the given search string.
- */
-const doesRowMatchSearchString = (row, searchString) =>
-  Object.keys(row).some((key) => key !== 'id' && String(row[key] ?? '').indexOf(searchString) >= 0);
-
-/**
- * A class to manage table states, like selection and sorting.
- * DEMONSTRATION-PURPOSE ONLY.
- * Data/state handling in data table tends to involve lots of application-specific logics
- * and thus abstracting everything in a library won't be a good return on investment
- * vs. letting users copy code here and implement features that fit their needs.
- */
-// @ts-ignore `BXCEDemoDataTable` is used (only) for type reference
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-@customElement('bx-ce-demo-data-table')
-class BXCEDemoDataTable extends LitElement {
-  /**
-   * The debounced handler for user-initiated change in search string.
-   * @type {Function}
-   */
-  _handleChangeSearchString = null;
-
-  /**
-   * The table sorting info reflecting user-initiated changes.
-   * @type {TDemoSortInfo}
-   */
-  _sortInfo = null;
-
-  /**
-   * The table rows reflecting selection.
-   * @type {TDemoTableRow[]}
-   */
-  _rows = null;
-
-  /**
-   * The table rows reflecting selection and filtering.
-   * @type {TDemoTableRow[]}
-   */
-  _filteredRows = null;
-
-  /**
-   * The search string.
-   * @type {string}
-   */
-  _searchString = '';
-
-  /**
-   * Unique ID used for form elements.
-   */
-  _uniqueId = Math.random().toString(36).slice(2);
-
-  /**
-   * @param lhs A value.
-   * @param rhs Another value.
-   * @returns
-   *   * `0` if the given two values are equal
-   *   * A negative value to sort `lhs` to an index lower than `rhs`
-   *   * A positive value to sort `rhs` to an index lower than `lhs`
-   */
-  _compare(lhs, rhs) {
-    if (typeof lhs === 'number' && typeof rhs === 'number') {
-      return lhs - rhs;
-    }
-    return this.collator.compare(lhs, rhs);
-  }
-
-  /**
-   * Handles Cancel button in batch action bar.
-   */
-  _handleCancelSelection() {
-    const { _rows: oldRows, _searchString: searchString } = this;
-    this._rows = this._rows.map((row) =>
-      searchString && !doesRowMatchSearchString(row, searchString) ? row : { ...row, selected: false }
-    );
-    this.requestUpdate('_rows', oldRows);
-  }
-
-  /**
-   * Handles user-initiated change in search string.
-   * @param {CustomEvent} event The event.
-   */
-  _handleChangeSearchStringImpl({ detail }) {
-    const { _searchString: oldSearchString } = this;
-    this._searchString = detail.value;
-    this.requestUpdate('_searchString', oldSearchString);
-  }
-
-  /**
-   * Handles an event to change in selection of rows, fired from `<bx-table-row>`.
-   * @param {CustomEvent} event The event.
-   */
-  _handleChangeSelection({ defaultPrevented, detail, target }) {
-    if (!defaultPrevented) {
-      const { rowId: changedRowId } = target.dataset;
-      const { selected } = detail;
-      const { _rows: oldRows } = this;
-      this._rows = oldRows.map((row) => (Number(changedRowId) !== row.id ? row : { ...row, selected }));
-      this.requestUpdate('_rows', oldRows);
-    }
-  }
-
-  /**
-   * Handles an event to change in selection of all rows, fired from `<bx-table-header-row>`.
-   * @param {CustomEvent} event The event.
-   */
-  _handleChangeSelectionAll({ defaultPrevented, detail }) {
-    if (!defaultPrevented) {
-      const { selected } = detail;
-      const { _rows: oldRows, _searchString: searchString } = this;
-      this._rows = this._rows.map((row) =>
-        searchString && !doesRowMatchSearchString(row, searchString) ? row : { ...row, selected }
-      );
-      this.requestUpdate('_rows', oldRows);
-    }
-  }
-
-  /**
-   * Handles an event to sort rows, fired from `<bx-table-header-cell>`.
-   * @param {CustomEvent} event The event.
-   */
-  _handleChangeSort({ defaultPrevented, detail, target }) {
-    if (!defaultPrevented) {
-      const { columnId } = target.dataset;
-      const { sortDirection: direction } = detail;
-      const { _sortInfo: oldSortInfo } = this;
-      if (direction === TABLE_SORT_DIRECTION.NONE && columnId !== 'name') {
-        // Resets the sorting, given non-primary sorting column has got in non-sorting state
-        this._sortInfo = this.sortInfo;
-      } else {
-        // Sets the sorting as user desires
-        this._sortInfo = {
-          columnId,
-          direction,
-        };
-      }
-      this.requestUpdate('_sortInfo', oldSortInfo);
-    }
-  }
-
-  /**
-   * Handles `bx-pagination-changed-current` event on the pagination UI.
-   * @param {CustomEvent} event The event.
-   */
-  _handleChangeStart({ detail }) {
-    this.start = detail.start;
-  }
-
-  /**
-   * Handles `bx-pages-select-changed` event on the pagination UI.
-   * @param {CustomEvent} event The event.
-   */
-  _handleChangePageSize({ detail }) {
-    this.pageSize = detail.value;
-  }
-
-  /**
-   * Handles Delete batch action button.
-   */
-  _handleDeleteRows() {
-    const { _rows: oldRows, _searchString: searchString } = this;
-    this._rows = oldRows.filter((row) => !row.selected || !doesRowMatchSearchString(row, searchString));
-    this.requestUpdate('_rows', oldRows);
-  }
-
-  /**
-   * Handles Download batch action button.
-   * @param {CustomEvent} event The event.
-   */
-  _handleDownloadRows({ target }) {
-    const blob = new Blob([JSON.stringify(this._filteredRows.filter((row) => row.selected))], { type: 'application/json' });
-    target.href = URL.createObjectURL(blob);
-    this._handleCancelSelection();
-  }
-
-  /**
-   * @returns The content of the pagination UI.
-   */
-  _renderPagination() {
-    const {
-      pageSize,
-      start,
-      _filteredRows: filteredRows,
-      _handleChangeStart: handleChangeStart,
-      _handleChangePageSize: handleChangePageSize,
-    } = this;
-    if (typeof pageSize === 'undefined') {
-      return undefined;
-    }
-    return html`
-      <bx-pagination
-        page-size="${pageSize}"
-        start="${start}"
-        total="${filteredRows.length}"
-        @bx-pagination-changed-current="${handleChangeStart}"
-        @bx-page-sizes-select-changed="${handleChangePageSize}"
-      >
-        <bx-page-sizes-select slot="page-sizes-select">
-          <option value="5">5</option>
-          <option value="10">10</option>
-          <option value="15">15</option>
-        </bx-page-sizes-select>
-        <bx-pages-select></bx-pages-select>
-      </bx-pagination>
-    `;
-  }
-
-  /**
-   * The g11n collator to use.
-   */
-  @property({ attribute: false })
-  collator = new Intl.Collator();
-
-  /**
-   * Data table columns.
-   */
-  @property({ attribute: false })
-  columns = undefined;
-
-  /**
-   * Data table rows.
-   */
-  @property({ attribute: false })
-  rows = undefined;
-
-  /**
-   * Table sorting info.
-   */
-  @property({ attribute: false })
-  sortInfo = undefined;
-
-  /**
-   * `true` if the the table should support selection UI.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'has-selection' })
-  hasSelection = false;
-
-  /**
-   * Number of items per page.
-   */
-  @property({ type: Number, attribute: 'page-size' })
-  pageSize = undefined;
-
-  /**
-   * The table size.
-   */
-  @property({ reflect: true })
-  size = TABLE_SIZE.REGULAR;
-
-  /**
-   * The table color scheme.
-   */
-  @property({ reflect: true, attribute: 'color-scheme' })
-  colorScheme = TABLE_COLOR_SCHEME.REGULAR;
-
-  /**
-   * The row number where current page start with, index that starts with zero.
-   */
-  @property({ type: Number })
-  start = 0;
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this._handleChangeSearchString) {
-      this._handleChangeSearchString.cancel();
-    }
-    this._handleChangeSearchString = debounce(this._handleChangeSearchStringImpl, 500);
-  }
-
-  disconnectedCallback() {
-    if (this._handleChangeSearchString) {
-      this._handleChangeSearchString.cancel();
-      this._handleChangeSearchString = undefined;
-    }
-    super.disconnectedCallback();
-  }
-
-  shouldUpdate(changedProperties) {
-    if (changedProperties.has('sortInfo')) {
-      this._sortInfo = this.sortInfo;
-    }
-    if (changedProperties.has('rows')) {
-      this._rows = this.rows;
-    }
-    if (changedProperties.has('rows') || changedProperties.has('_rows') || changedProperties.has('_searchString')) {
-      const { pageSize, start, _rows: rows, _searchString: searchString } = this;
-      this._filteredRows = !searchString ? rows : rows.filter((row) => doesRowMatchSearchString(row, searchString));
-      const count = this._filteredRows.length;
-      if (count > 0 && start >= count) {
-        this.start = Math.max(start - Math.ceil((start - count) / pageSize) * pageSize, 0);
-      }
-    }
-    return true;
-  }
-
-  render() {
-    const {
-      id: elementId,
-      colorScheme,
-      hasSelection,
-      pageSize = Infinity,
-      start = 0,
-      size,
-      columns,
-      _filteredRows: filteredRows,
-      _handleCancelSelection: handleCancelSelection,
-      _handleDeleteRows: handleDeleteRows,
-      _handleDownloadRows: handleDownloadRows,
-    } = this;
-    const selectionAllName = !hasSelection ? undefined : `__bx-ce-demo-data-table_select-all_${elementId || this._uniqueId}`;
-    const selectedRowsCountInFiltered = filteredRows.filter(({ selected }) => selected).length;
-    const selectedAllInFiltered = selectedRowsCountInFiltered > 0 && filteredRows.length === selectedRowsCountInFiltered;
-    const hasBatchActions = hasSelection && selectedRowsCountInFiltered > 0;
-    const { columnId: sortColumnId, direction: sortDirection } = this._sortInfo;
-    const sortedRows =
-      sortDirection === TABLE_SORT_DIRECTION.NONE
-        ? filteredRows
-        : filteredRows
-            .slice()
-            .sort(
-              (lhs, rhs) => this.constructor.collationFactors[sortDirection] * this._compare(lhs[sortColumnId], rhs[sortColumnId])
-            );
-    return html`
-      <bx-table-toolbar>
-        <bx-table-batch-actions
-          ?active="${hasBatchActions}"
-          selected-rows-count="${selectedRowsCountInFiltered}"
-          @bx-table-batch-actions-cancel-clicked="${handleCancelSelection}"
-        >
-          <bx-btn @click="${handleDeleteRows}">Delete ${Delete16({ slot: 'icon' })}</bx-btn>
-          <bx-btn @click="${handleDownloadRows}" href="javascript:void 0" download="table-data.json">
-            Download ${Download16({ slot: 'icon' })}
-          </bx-btn>
-        </bx-table-batch-actions>
-        <bx-table-toolbar-content ?has-batch-actions="${hasBatchActions}">
-          <bx-table-toolbar-search @bx-search-input="${this._handleChangeSearchString}"></bx-table-toolbar-search>
-          <bx-overflow-menu>
-            ${Settings16({ slot: 'icon' })}
-            <bx-overflow-menu-body>
-              <bx-overflow-menu-item> Action 1 </bx-overflow-menu-item>
-              <bx-overflow-menu-item> Action 2 </bx-overflow-menu-item>
-              <bx-overflow-menu-item> Action 3 </bx-overflow-menu-item>
-            </bx-overflow-menu-body>
-          </bx-overflow-menu>
-          <bx-btn>Primary Button</bx-btn>
-        </bx-table-toolbar-content>
-      </bx-table-toolbar>
-      <bx-table
-        size="${size}"
-        @bx-table-row-change-selection=${this._handleChangeSelection}
-        @bx-table-change-selection-all=${this._handleChangeSelectionAll}
-        @bx-table-header-cell-sort=${this._handleChangeSort}
-      >
-        <bx-table-head>
-          <bx-table-header-row
-            ?selected=${selectedAllInFiltered}
-            selection-name=${ifNonNull(selectionAllName)}
-            selection-value=${ifNonNull(selectionAllName)}
-          >
-            ${repeat(
-              columns,
-              ({ id: columnId }) => columnId,
-              ({ id: columnId, sortCycle, title }) => {
-                const sortDirectionForThisCell =
-                  sortCycle && (columnId === sortColumnId ? sortDirection : TABLE_SORT_DIRECTION.NONE);
-                return html`
-                  <bx-table-header-cell
-                    sort-cycle="${ifNonNull(sortCycle)}"
-                    sort-direction="${ifNonNull(sortDirectionForThisCell)}"
-                    data-column-id="${columnId}"
-                  >
-                    ${title}
-                  </bx-table-header-cell>
-                `;
-              }
-            )}
-          </bx-table-header-row>
-        </bx-table-head>
-        <bx-table-body color-scheme="${colorScheme}">
-          ${repeat(
-            sortedRows.slice(start, start + pageSize),
-            ({ id: rowId }) => rowId,
-            (row) => {
-              const { id: rowId, selected } = row;
-              const selectionName = !hasSelection ? undefined : `__bx-ce-demo-data-table_${elementId || this._uniqueId}_${rowId}`;
-              const selectionValue = !hasSelection ? undefined : 'selected';
-              return html`
-                <bx-table-row
-                  ?selected=${hasSelection && selected}
-                  selection-name="${ifNonNull(selectionName)}"
-                  selection-value="${ifNonNull(selectionValue)}"
-                  data-row-id="${rowId}"
-                >
-                  ${repeat(
-                    columns,
-                    ({ id: columnId }) => columnId,
-                    ({ id: columnId }) => html` <bx-table-cell>${row[columnId]}</bx-table-cell> `
-                  )}
-                </bx-table-row>
-              `;
-            }
-          )}
-        </bx-table-body>
-      </bx-table>
-      ${this._renderPagination()}
-    `;
-  }
-
-  /**
-   * The map of how sorting direction affects sorting order.
-   */
-  static collationFactors = {
-    [TABLE_SORT_DIRECTION.ASCENDING]: 1,
-    [TABLE_SORT_DIRECTION.DESCENDING]: -1,
-  };
-}
-
-export default BXCEDemoDataTable;
diff --git a/packages/carbon-web-components/examples/codesandbox/data-table/src/index.js b/packages/carbon-web-components/examples/codesandbox/data-table/src/index.js
deleted file mode 100644
index a7caecdd558..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/data-table/src/index.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './demo-data-table';
-import { rowsMany as rows, columns, sortInfo } from './data';
-
-document.addEventListener('DOMContentLoaded', () => {
-  const dataTable = document.getElementById('data-table');
-  dataTable.rows = rows;
-  dataTable.columns = columns;
-  dataTable.sortInfo = sortInfo;
-});
diff --git a/packages/carbon-web-components/examples/codesandbox/form/basic/index.html b/packages/carbon-web-components/examples/codesandbox/form/basic/index.html
index c8983d6b3c9..d679616d8d9 100644
--- a/packages/carbon-web-components/examples/codesandbox/form/basic/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/form/basic/index.html
@@ -21,46 +21,46 @@
         padding: 2rem;
       }
 
-      bx-btn + bx-btn {
+      cds-button + cds-button {
         margin: 0 1rem;
       }
 
-      bx-form-item, bx-inline-notification {
+      cds-form-item, cds-inline-notification {
         margin-bottom: 2rem;
       }
 
-      .bx-ce-demo-redux-form--btn-container {
+      .cds-ce-demo-redux-form--btn-container {
         display: flex;
         align-items: center;
       }
 
-      bx-btn,
-      bx-input,
-      bx-form-item,
-      bx-inline-notification {
+      cds-button,
+      cds-text-input,
+      cds-form-item,
+      cds-inline-notification {
         visibility: hidden;
       }
 
-      bx-btn:defined,
-      bx-input:defined,
-      bx-form-item:defined,
-      bx-inline-notification:defined {
+      cds-button:defined,
+      cds-text-input:defined,
+      cds-form-item:defined,
+      cds-inline-notification:defined {
         visibility: inherit;
       }
     </style>
   </head>
   <body>
     <form id="form-login">
-      <bx-inline-notification id="notification" kind="error" hide-close-button title="Login failed" subtitle="Please correct below errors."></bx-inline-notification>
-      <bx-form-item>
-        <bx-input id="input-username" type="text" name="username" label-text="Username" placeholder="Username"></bx-input>
-      </bx-form-item>
-      <bx-form-item>
-        <bx-input id="input-password" type="password" name="password" label-text="Password" placeholder="Password"></bx-input>
-      </bx-form-item>
-      <div className="bx-ce-demo-redux-form--btn-container">
-        <bx-btn id="btn-login">Log in</bx-btn>
-        <bx-btn id="btn-reset" kind="secondary">Clear Values</bx-btn>
+      <cds-inline-notification id="notification" kind="error" hide-close-button title="Login failed" subtitle="Please correct below errors."></cds-inline-notification>
+      <cds-form-item>
+        <cds-text-input id="input-username" type="text" name="username" label-text="Username" placeholder="Username"></cds-text-input>
+      </cds-form-item>
+      <cds-form-item>
+        <cds-text-input id="input-password" type="password" name="password" label-text="Password" placeholder="Password"></cds-text-input>
+      </cds-form-item>
+      <div className="cds-ce-demo-redux-form--btn-container">
+        <cds-button id="btn-login">Log in</cds-button>
+        <cds-button id="btn-reset" kind="secondary">Clear Values</cds-button>
       </div>
     </form>
     <script type="module" src="src/index.js"></script>
diff --git a/packages/carbon-web-components/examples/codesandbox/form/basic/package.json b/packages/carbon-web-components/examples/codesandbox/form/basic/package.json
index 1ca13f33add..a5b393d4d00 100644
--- a/packages/carbon-web-components/examples/codesandbox/form/basic/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/form/basic/package.json
@@ -8,7 +8,7 @@
     "start": "webpack serve"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/web-components": "latest"
   },
   "devDependencies": {
     "html-webpack-plugin": "^4.5.0",
diff --git a/packages/carbon-web-components/examples/codesandbox/form/basic/src/index.js b/packages/carbon-web-components/examples/codesandbox/form/basic/src/index.js
index b35ce8937da..8806e44a90f 100644
--- a/packages/carbon-web-components/examples/codesandbox/form/basic/src/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/form/basic/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,7 +9,7 @@
 
 import '@carbon/web-components/es/components/button/button.js';
 import '@carbon/web-components/es/components/form/form-item.js';
-import '@carbon/web-components/es/components/input/input.js';
+import '@carbon/web-components/es/components/text-input/text-input.js';
 import '@carbon/web-components/es/components/notification/inline-notification.js';
 
 const submit = async (formData) => {
diff --git a/packages/carbon-web-components/examples/codesandbox/form/redux-form/package.json b/packages/carbon-web-components/examples/codesandbox/form/redux-form/package.json
index 34f97dc8e38..8db0183f838 100644
--- a/packages/carbon-web-components/examples/codesandbox/form/redux-form/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/form/redux-form/package.json
@@ -8,7 +8,7 @@
     "start": "webpack serve"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "prop-types": "^15.7.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0",
diff --git a/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.css b/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.css
index 39189a16b71..648f9ea8710 100644
--- a/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.css
+++ b/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.css
@@ -12,16 +12,16 @@ body {
   padding: 2rem;
 }
 
-bx-btn + bx-btn {
+cds-button + cds-button {
   margin: 0 1rem;
 }
 
-bx-form-item,
-bx-inline-notification {
+cds-form-item,
+cds-inline-notification {
   margin-bottom: 2rem;
 }
 
-.bx-ce-demo-redux-form--btn-container {
+.cds-ce-demo-redux-form--btn-container {
   display: flex;
   align-items: center;
 }
diff --git a/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.js b/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.js
index a18bfebc320..a20ec4246a6 100644
--- a/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/form/redux-form/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,10 +12,10 @@ import { render } from 'react-dom';
 import { Provider } from 'react-redux';
 import { createStore, combineReducers } from 'redux';
 import { Field, SubmissionError, reduxForm, reducer as reduxFormReducer } from 'redux-form';
-import BXBtn from '@carbon/web-components/es/components-react/button/button.js';
-import BXFormItem from '@carbon/web-components/es/components-react/form/form-item.js';
-import BXInput from '@carbon/web-components/es/components-react/input/input.js';
-import BXInlineNotification from '@carbon/web-components/es/components-react/notification/inline-notification.js';
+import CDSButton from '@carbon/web-components/es/components-react/button/button.js';
+import CDSFormItem from '@carbon/web-components/es/components-react/form/form-item.js';
+import CDSTextInput from '@carbon/web-components/es/components-react/text-input/text-input.js';
+import CDSInlineNotification from '@carbon/web-components/es/components-react/notification/inline-notification.js';
 import './index.css';
 
 const reducer = combineReducers({
@@ -52,8 +52,8 @@ const submit = async (values) => {
 const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
   const validityMessage = !touched ? undefined : error;
   return (
-    <BXFormItem>
-      <BXInput
+    <CDSFormItem>
+      <CDSTextInput
         {...input}
         invalid={Boolean(validityMessage)}
         label-text={label}
@@ -61,7 +61,7 @@ const FieldImpl = ({ input, label, type, meta: { touched, error } }) => {
         placeholder={label}
         validityMessage={validityMessage}
       />
-    </BXFormItem>
+    </CDSFormItem>
   );
 };
 
@@ -70,21 +70,21 @@ const SubmitValidationForm = reduxForm({
 })(({ error, handleSubmit, pristine, reset, submitting }) => (
   <form>
     {error && (
-      <BXInlineNotification kind="error" title="Login failed" subtitle="Please correct below errors." hideCloseButton={true} />
+      <CDSInlineNotification kind="error" title="Login failed" subtitle="Please correct below errors." hideCloseButton={true} />
     )}
     <Field name="username" type="text" component={FieldImpl} label="Username" />
     <Field name="password" type="password" component={FieldImpl} label="Password" />
-    <div className="bx-ce-demo-redux-form--btn-container">
+    <div className="cds-ce-demo-redux-form--btn-container">
       {/*
           NOTE: `onsubmit` event (with `type="submit"`) does not work across shadow DOM boundary
           (does not have `composed` flag, etc.) and thus we handle `onclick` directly here
         */}
-      <BXBtn disabled={submitting} onClick={handleSubmit(submit)}>
+      <CDSButton disabled={submitting} onClick={handleSubmit(submit)}>
         Log in
-      </BXBtn>
-      <BXBtn kind="secondary" disabled={pristine || submitting} onClick={reset}>
+      </CDSButton>
+      <CDSButton kind="secondary" disabled={pristine || submitting} onClick={reset}>
         Clear Values
-      </BXBtn>
+      </CDSButton>
     </div>
   </form>
 ));
diff --git a/packages/carbon-web-components/examples/codesandbox/next/components/BXDropdownDemo.js b/packages/carbon-web-components/examples/codesandbox/next/components/BXDropdownDemo.js
deleted file mode 100644
index 11e9a7db1a6..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/next/components/BXDropdownDemo.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 BXDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
-import BXDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
-import styles from './BXDropdownDemo.module.css';
-
-const App = () => (
-  <div className={styles.contents}>
-    <h1>Hello World! 👋</h1>
-    <div className={styles['dropdown-container']}>
-      <BXDropdown triggerContent="Select an item">
-        <BXDropdownItem value="all">Option 1</BXDropdownItem>
-        <BXDropdownItem value="cloudFoundry">Option 2</BXDropdownItem>
-        <BXDropdownItem value="staging">Option 3</BXDropdownItem>
-        <BXDropdownItem value="dea">Option 4</BXDropdownItem>
-        <BXDropdownItem value="router">Option 5</BXDropdownItem>
-      </BXDropdown>
-    </div>
-  </div>
-);
-
-export default App;
diff --git a/packages/carbon-web-components/examples/codesandbox/next/components/CDSDropdownDemo.js b/packages/carbon-web-components/examples/codesandbox/next/components/CDSDropdownDemo.js
new file mode 100644
index 00000000000..e6400a4765a
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/next/components/CDSDropdownDemo.js
@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 CDSDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
+import CDSDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
+import styles from './CDSDropdownDemo.module.css';
+
+const App = () => (
+  <div className={styles.contents}>
+    <h1>Hello World! 👋</h1>
+    <div className={styles['dropdown-container']}>
+      <CDSDropdown triggerContent="Select an item">
+        <CDSDropdownItem value="all">Option 1</CDSDropdownItem>
+        <CDSDropdownItem value="cloudFoundry">Option 2</CDSDropdownItem>
+        <CDSDropdownItem value="staging">Option 3</CDSDropdownItem>
+        <CDSDropdownItem value="dea">Option 4</CDSDropdownItem>
+        <CDSDropdownItem value="router">Option 5</CDSDropdownItem>
+      </CDSDropdown>
+    </div>
+  </div>
+);
+
+export default App;
diff --git a/packages/carbon-web-components/examples/codesandbox/next/components/BXDropdownDemo.module.css b/packages/carbon-web-components/examples/codesandbox/next/components/CDSDropdownDemo.module.css
similarity index 100%
rename from packages/carbon-web-components/examples/codesandbox/next/components/BXDropdownDemo.module.css
rename to packages/carbon-web-components/examples/codesandbox/next/components/CDSDropdownDemo.module.css
diff --git a/packages/carbon-web-components/examples/codesandbox/next/package.json b/packages/carbon-web-components/examples/codesandbox/next/package.json
index f6c196bb195..a5509251eee 100644
--- a/packages/carbon-web-components/examples/codesandbox/next/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/next/package.json
@@ -8,7 +8,7 @@
     "start": "echo 'Running Next in Node 18.15.0+. If you have such Node version in your system just `next` here will work.' && NODE_OPTIONS=--openssl-legacy-provider ./node_modules/node/node_modules/.bin/node ./node_modules/.bin/next"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "next": "^10.0.0",
     "node": "^18.15.0",
     "react": "^17.0.0",
diff --git a/packages/carbon-web-components/examples/codesandbox/next/pages/index.js b/packages/carbon-web-components/examples/codesandbox/next/pages/index.js
index f36d71c85c7..51f7bfead76 100644
--- a/packages/carbon-web-components/examples/codesandbox/next/pages/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/next/pages/index.js
@@ -8,7 +8,7 @@
  */
 
 import React from 'react';
-import BXDropdownDemo from '../components/BXDropdownDemo';
+import CDSDropdownDemo from '../components/CDSDropdownDemo';
 
-const RootPage = () => <BXDropdownDemo />;
+const RootPage = () => <CDSDropdownDemo />;
 export default RootPage;
diff --git a/packages/carbon-web-components/examples/codesandbox/react-ssr/package.json b/packages/carbon-web-components/examples/codesandbox/react-ssr/package.json
index 7cefdfa482c..23c7896bfc2 100644
--- a/packages/carbon-web-components/examples/codesandbox/react-ssr/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/react-ssr/package.json
@@ -10,7 +10,7 @@
     "start": "echo 'Running server in Node 12.16.3+. If you have such Node version in your system just `node app.js` here will work.' && ./node_modules/node/node_modules/.bin/node app.js"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "express": "^4.17.0",
     "prop-types": "^15.7.0",
     "react": "^16.12.0",
diff --git a/packages/carbon-web-components/examples/codesandbox/react-ssr/src/index.css b/packages/carbon-web-components/examples/codesandbox/react-ssr/src/index.css
index 7880a9d6885..87c987bb822 100644
--- a/packages/carbon-web-components/examples/codesandbox/react-ssr/src/index.css
+++ b/packages/carbon-web-components/examples/codesandbox/react-ssr/src/index.css
@@ -15,12 +15,12 @@ body {
   width: 300px;
 }
 
-bx-dropdown,
-bx-dropdown-item {
+cds-dropdown,
+cds-dropdown-item {
   visibility: hidden;
 }
 
-bx-dropdown:defined,
-bx-dropdown-item:defined {
+cds-dropdown:defined,
+cds-dropdown-item:defined {
   visibility: inherit;
 }
diff --git a/packages/carbon-web-components/examples/codesandbox/react-ssr/src/views/App.js b/packages/carbon-web-components/examples/codesandbox/react-ssr/src/views/App.js
index 6b1da3f99bd..0353458ce45 100644
--- a/packages/carbon-web-components/examples/codesandbox/react-ssr/src/views/App.js
+++ b/packages/carbon-web-components/examples/codesandbox/react-ssr/src/views/App.js
@@ -8,20 +8,20 @@
  */
 
 import React from 'react';
-import BXDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
-import BXDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
+import CDSDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
+import CDSDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
 
 const App = () => (
   <>
     <h1>Hello World! 👋</h1>
     <div id="app">
-      <BXDropdown triggerContent="Select an item">
-        <BXDropdownItem value="all">Option 1</BXDropdownItem>
-        <BXDropdownItem value="cloudFoundry">Option 2</BXDropdownItem>
-        <BXDropdownItem value="staging">Option 3</BXDropdownItem>
-        <BXDropdownItem value="dea">Option 4</BXDropdownItem>
-        <BXDropdownItem value="router">Option 5</BXDropdownItem>
-      </BXDropdown>
+      <CDSDropdown triggerContent="Select an item">
+        <CDSDropdownItem value="all">Option 1</CDSDropdownItem>
+        <CDSDropdownItem value="cloudFoundry">Option 2</CDSDropdownItem>
+        <CDSDropdownItem value="staging">Option 3</CDSDropdownItem>
+        <CDSDropdownItem value="dea">Option 4</CDSDropdownItem>
+        <CDSDropdownItem value="router">Option 5</CDSDropdownItem>
+      </CDSDropdown>
     </div>
   </>
 );
diff --git a/packages/carbon-web-components/examples/codesandbox/react/package.json b/packages/carbon-web-components/examples/codesandbox/react/package.json
index dfac1e2a53b..c6386721d40 100644
--- a/packages/carbon-web-components/examples/codesandbox/react/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/react/package.json
@@ -8,7 +8,7 @@
     "start": "webpack serve"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "prop-types": "^15.7.0",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
diff --git a/packages/carbon-web-components/examples/codesandbox/react/src/index.css b/packages/carbon-web-components/examples/codesandbox/react/src/index.css
index 7880a9d6885..87c987bb822 100644
--- a/packages/carbon-web-components/examples/codesandbox/react/src/index.css
+++ b/packages/carbon-web-components/examples/codesandbox/react/src/index.css
@@ -15,12 +15,12 @@ body {
   width: 300px;
 }
 
-bx-dropdown,
-bx-dropdown-item {
+cds-dropdown,
+cds-dropdown-item {
   visibility: hidden;
 }
 
-bx-dropdown:defined,
-bx-dropdown-item:defined {
+cds-dropdown:defined,
+cds-dropdown-item:defined {
   visibility: inherit;
 }
diff --git a/packages/carbon-web-components/examples/codesandbox/react/src/index.js b/packages/carbon-web-components/examples/codesandbox/react/src/index.js
index b38c26f320d..796b84d77c5 100644
--- a/packages/carbon-web-components/examples/codesandbox/react/src/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/react/src/index.js
@@ -9,21 +9,21 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import BXDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
-import BXDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
+import CDSDropdown from '@carbon/web-components/es/components-react/dropdown/dropdown.js';
+import CDSDropdownItem from '@carbon/web-components/es/components-react/dropdown/dropdown-item.js';
 import './index.css';
 
 const App = () => (
   <>
     <h1>Hello World! 👋</h1>
     <div id="app">
-      <BXDropdown triggerContent="Select an item">
-        <BXDropdownItem value="all">Option 1</BXDropdownItem>
-        <BXDropdownItem value="cloudFoundry">Option 2</BXDropdownItem>
-        <BXDropdownItem value="staging">Option 3</BXDropdownItem>
-        <BXDropdownItem value="dea">Option 4</BXDropdownItem>
-        <BXDropdownItem value="router">Option 5</BXDropdownItem>
-      </BXDropdown>
+      <CDSDropdown triggerContent="Select an item">
+        <CDSDropdownItem value="all">Option 1</CDSDropdownItem>
+        <CDSDropdownItem value="cloudFoundry">Option 2</CDSDropdownItem>
+        <CDSDropdownItem value="staging">Option 3</CDSDropdownItem>
+        <CDSDropdownItem value="dea">Option 4</CDSDropdownItem>
+        <CDSDropdownItem value="router">Option 5</CDSDropdownItem>
+      </CDSDropdown>
     </div>
   </>
 );
diff --git a/packages/carbon-web-components/examples/codesandbox/rtl/package.json b/packages/carbon-web-components/examples/codesandbox/rtl/package.json
index b311e995d45..633b1e1bb88 100644
--- a/packages/carbon-web-components/examples/codesandbox/rtl/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/rtl/package.json
@@ -14,7 +14,7 @@
     "@babel/preset-env": "^7.8.0",
     "@babel/runtime": "^7.8.0",
     "accept-language-parser": "^1.5.0",
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "classnames": "^2.2.0",
     "es6-promise": "^4.1.0",
     "html-webpack-plugin": "^3.2.0",
diff --git a/packages/carbon-web-components/examples/codesandbox/rtl/src/index.ejs b/packages/carbon-web-components/examples/codesandbox/rtl/src/index.ejs
index 43a4f653861..cac479ad9f4 100644
--- a/packages/carbon-web-components/examples/codesandbox/rtl/src/index.ejs
+++ b/packages/carbon-web-components/examples/codesandbox/rtl/src/index.ejs
@@ -20,13 +20,13 @@ LICENSE file in the root directory of this source tree.
         width: 300px;
       }
 
-      bx-slider,
-      bx-slider-input {
+      cds-slider,
+      cds-slider-input {
         visibility: hidden;
       }
 
-      bx-slider:defined,
-      bx-slider-input:defined {
+      cds-slider:defined,
+      cds-slider-input:defined {
         visibility: inherit;
       }
     </style>
@@ -36,14 +36,14 @@ LICENSE file in the root directory of this source tree.
     <h1>Hello World! 👋</h1>
     <p>Change browser's <code>Accept-Language</code> setting to switch the UI direction.</p>
     <div id="app">
-      <bx-slider
+      <cds-slider
         label-text="Slider label"
         min="0"
         max="100"
         value="50"
       >
-        <bx-slider-input aria-label="Slider value" type="number" value="50"></bx-slider-input>
-      </bx-slider>
+        <cds-slider-input aria-label="Slider value" type="number" value="50"></cds-slider-input>
+      </cds-slider>
     </div>
   </body>
 </html>
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/index.html b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/index.html
index ca6d26716f4..494d15cc201 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/index.html
@@ -21,12 +21,12 @@
       }
 
       my-dropdown,
-      bx-dropdown-item {
+      cds-dropdown-item {
         visibility: hidden;
       }
 
       my-dropdown:defined,
-      bx-dropdown-item:defined {
+      cds-dropdown-item:defined {
         visibility: inherit;
       }
     </style>
@@ -36,11 +36,11 @@
     <h1>Hello World! 👋</h1>
     <div id="app">
       <my-dropdown trigger-content="Select an item">
-        <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-        <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-        <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-        <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-        <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
+        <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+        <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+        <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+        <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+        <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
       </my-dropdown>
     </div>
   </body>
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/package.json b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/package.json
index 438f057b1a1..fe8402bb8ab 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/package.json
@@ -8,7 +8,7 @@
     "start": "webpack serve"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "lit-element": "^2.5.1"
   },
   "devDependencies": {
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/src/index.js b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/src/index.js
index ce706e264b4..68afcc0e8e6 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/custom-style/src/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/styling/custom-style/src/index.js
@@ -1,24 +1,24 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import BXDropdown from '@carbon/web-components/es/components/dropdown/dropdown.js';
+import { css } from 'lit';
+import CDSDropdown from '@carbon/web-components/es/components/dropdown/dropdown.js';
 import '@carbon/web-components/es/components/dropdown/dropdown-item.js';
 
-class MyDropdown extends BXDropdown {}
+class MyDropdown extends CDSDropdown {}
 
 // We seem to have hit something similar to: https://github.com/codesandbox/codesandbox-client/issues/1935
 // Custom CSS to enforce `field-02` (light) style of the dropdown
 MyDropdown.styles = [
-  BXDropdown.styles,
+  CDSDropdown.styles,
   css`
-    .bx--list-box {
+    .cds--list-box {
       background-color: white;
     }
   `,
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.babelrc b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.gitignore b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.gitignore
index 7d5b7a94f4d..d94d6e13e94 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.gitignore
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.gitignore
@@ -1,2 +1,22 @@
-/build
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
 /node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.sassrc b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.sassrc
new file mode 100644
index 00000000000..3c351777d66
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/.sassrc
@@ -0,0 +1,6 @@
+{
+  "includePaths": [
+    "node_modules",
+    "../../node_modules"
+  ]
+}
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html
index 3f6490c1618..76f3876ee5f 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/index.html
@@ -1,7 +1,7 @@
 <!--
 @license
 
-Copyright IBM Corp. 2019
+Copyright IBM Corp. 2020
 
 This source code is licensed under the Apache-2.0 license found in the
 LICENSE file in the root directory of this source tree.
@@ -11,45 +11,69 @@
   <head>
     <title>carbon-web-components example</title>
     <meta charset="UTF-8" />
-    <!-- Production application should limit the CSS import here to @carbon/grid CSS and `carbon-components/scss/components/ui-shell/_content.scss` -->
-    <link rel="stylesheet" type="text/css" href="https://unpkg.com/carbon-components@10.17.0/css/carbon-components.min.css">
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
+    />
+    <link rel="stylesheet" href="src/styles.scss" />
+    <style>
+      /* Suppress custom element until styles are loaded */
+      cds-header:not(:defined) {
+        display: none;
+      }
+    </style>
     <script type="module" src="src/index.js"></script>
   </head>
   <body>
-    <bx-header aria-label="IBM Platform Name">
-      <bx-header-name href="javascript:void 0" prefix="IBM">[Platform]</bx-header-name>
-      <bx-header-nav menu-bar-label="IBM [Platform]">
-        <bx-header-nav-item href="javascript:void 0">Link 1</bx-header-nav-item>
-        <bx-header-nav-item href="javascript:void 0">Link 2</bx-header-nav-item>
-        <bx-header-nav-item href="javascript:void 0">Link 3</bx-header-nav-item>
-        <bx-header-menu menu-label="Link 4" trigger-content="Link 4">
-          <bx-header-menu-item href="javascript:void 0">Sub-link 1</bx-header-menu-item>
-          <bx-header-menu-item href="javascript:void 0">Sub-link 2</bx-header-menu-item>
-          <bx-header-menu-item href="javascript:void 0">Sub-link 3</bx-header-menu-item>
-        </bx-header-menu>
-      </bx-header-nav>
-    </bx-header>
-    <main class="bx--content bx-ce-demo-theme-zoning--ui-shell-content">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-13">
-            <h2>
-              Theming and CSS scoping
-            </h2>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <cds-header-nav menu-bar-label="IBM [Platform]">
+        <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
+        <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
+        <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
+        <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 1</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 2</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 3</cds-header-menu-item
+          >
+        </cds-header-menu>
+      </cds-header-nav>
+    </cds-header>
+    <main class="cds--content cds-ce-demo-theme-zoning--ui-shell-content">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-13">
+            <h2>Theming and CSS scoping</h2>
             <p>
-              The color scheme of <code>carbon-web-components</code> components can be changed either by CSS custom properties (this
-              example) or by
-              <a target="_blank" href="https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style">
-              creating inherited components with the static <code>styles</code> property changed</a>.
+              The color scheme of <code>carbon-web-components</code> components
+              can be changed either by CSS custom properties (this example) or
+              by
+              <a
+                target="_blank"
+                href="https://codesandbox.io/s/github/carbon-design-system/carbon-web-components/tree/main/examples/codesandbox/styling/custom-style">
+                creating inherited components with the static
+                <code>styles</code> property changed</a
+              >.
               <br />
               <br />
-              If you inspect the style of <code>&lt;footer&gt;</code> in this example, you'll find some Carbon theme custom
-              properties there are changed to ones of <code>g100</code> theme, and see the background color as well as the color
-              of <code>&lt;bx-btn&gt;</code> reflect such change.
+              If you inspect the style of <code>&lt;footer&gt;</code> in this
+              example, you'll find some Carbon theme custom properties there are
+              changed to ones of <code>g100</code> theme, and see the background
+              color as well as the color of <code>&lt;cds-button&gt;</code> reflect
+              such change.
               <br />
               <br />
-              As Shadow DOM (one of the Web Components specs that <code>carbon-web-components</code> uses) promises, styles that
-              <code>carbon-web-components</code> defines do not affect styles in your application.
+              As Shadow DOM (one of the Web Components specs that
+              <code>carbon-web-components</code> uses) promises, styles that
+              <code>carbon-web-components</code> defines do not affect styles in
+              your application.
             </p>
           </div>
         </div>
@@ -58,8 +82,12 @@ <h2>
     <footer>
       <p>
         <span>Have questions?</span>
-        <bx-btn kind="secondary">Nope!</bx-btn>
-        <bx-btn href="https://github.com/carbon-design-system/carbon-web-components/issues/new" target="_blank">Enter an issue</bx-btn>
+        <cds-button kind="tertiary">Nope!</cds-button>
+        <cds-button
+          href="https://github.com/carbon-design-system/carbon-web-components/issues/new"
+          target="_blank"
+          >Enter an issue</cds-button
+        >
       </p>
     </footer>
   </body>
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/package.json b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/package.json
index e3b540b4094..9d9e85b259c 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/package.json
@@ -1,26 +1,24 @@
 {
-  "name": "carbon-web-components-theme-zoning-getting-started",
+  "name": "carbon-web-components-button-example",
   "version": "0.1.0",
   "private": true,
-  "description": "Sample project for getting started with the Web Components from the Carbon Design System.",
+  "description": "Sample project for getting started with the Web Components from Carbon.",
   "license": "Apache-2",
+  "main": "index.html",
   "scripts": {
-    "start": "webpack serve"
+    "build": "parcel build *.html --no-minify --public-url ./",
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest"
+    "@carbon/web-components": "latest",
+    "sass": "^1.64.1"
   },
   "devDependencies": {
-    "autoprefixer": "^9.0.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^3.2.0",
-    "postcss": "^8.1.0",
-    "postcss-loader": "^4.0.0",
-    "sass": "^1.39.0",
-    "sass-loader": "^10.0.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
+    "@babel/core": "^7.0.0-0",
+    "@babel/plugin-transform-runtime": "^7.22.5",
+    "@babel/preset-env": "^7.22.5",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
   }
 }
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.js b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.js
index db96f4f9891..426ced08c67 100644
--- a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.js
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.js
@@ -1,18 +1,12 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2020, 2022
  *
  * 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 '@carbon/web-components/es/components/button/button.js';
-import '@carbon/web-components/es/components/ui-shell/header.js';
-import '@carbon/web-components/es/components/ui-shell/header-nav.js';
-import '@carbon/web-components/es/components/ui-shell/header-nav-item.js';
-import '@carbon/web-components/es/components/ui-shell/header-menu.js';
-import '@carbon/web-components/es/components/ui-shell/header-menu-item.js';
-import '@carbon/web-components/es/components/ui-shell/header-menu-button.js';
-import '@carbon/web-components/es/components/ui-shell/header-name.js';
-import './index.scss';
+import "@carbon/web-components/es/components/button/index.js";
+import "@carbon/web-components/es/components/ui-shell/index.js";
+
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss
deleted file mode 100644
index 161d1bdc4f8..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/index.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2022
-//
-// 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-
-html {
-  height: 100%;
-}
-
-body {
-  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  height: 100%;
-  display: grid;
-  grid-template-rows: auto 1fr 5rem;
-}
-
-footer {
-  @include carbon--theme($carbon--theme--g100, true);
-
-  > p {
-    background-color: var(--cds-ui-background);
-    color: var(--cds-text-01);
-    height: 5rem;
-    padding: 0 1rem;
-    display: flex;
-    align-items: center;
-
-    > span {
-      flex: 1;
-    }
-  }
-
-  bx-btn + bx-btn {
-    margin-left: 1rem;
-  }
-}
-
-bx-btn,
-bx-header,
-bx-header-nav,
-bx-header-nav-item,
-bx-header-menu,
-bx-header-menu-item,
-bx-header-menu-button,
-bx-header-name {
-  visibility: hidden;
-
-  &:defined {
-    visibility: inherit;
-  }
-}
-
-bx-header {
-  position: relative;
-}
-
-.bx--content.bx-ce-demo-theme-zoning--ui-shell-content {
-  background-color: var(--cds-ui-01, #f4f4f4);
-  margin: 0;
-  width: 100%;
-
-  h2 {
-    font-weight: 800;
-    margin: 30px 0;
-    font-size: 20px;
-  }
-
-  p {
-    line-height: 20px;
-  }
-}
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/styles.scss b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/styles.scss
new file mode 100644
index 00000000000..70e68131f59
--- /dev/null
+++ b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/src/styles.scss
@@ -0,0 +1,73 @@
+@use "@carbon/styles/scss/reset";
+@use "@carbon/styles/scss/theme";
+@use "@carbon/styles/scss/themes";
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+
+html {
+  height: 100%;
+}
+
+body {
+  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr $spacing-11;
+}
+
+footer {
+   @include theme.theme(themes.$g100);
+
+  > p {
+    background-color: var(--cds-background);
+    color: var(--cds-text-primary);
+    height: $spacing-11;
+    padding: 0 $spacing-05;
+    display: flex;
+    align-items: center;
+
+    > span {
+      flex: 1;
+    }
+  }
+
+  cds-button + cds-button {
+    margin-left: $spacing-05;
+  }
+}
+
+cds-button,
+cds-header,
+cds-header-nav,
+cds-header-nav-item,
+cds-header-menu,
+cds-header-menu-item,
+cds-header-menu-button,
+cds-header-name {
+  visibility: hidden;
+
+  &:defined {
+    visibility: inherit;
+  }
+}
+
+cds-header {
+  position: relative;
+}
+
+.cds--content.cds-ce-demo-theme-zoning--ui-shell-content {
+  background-color: var(--cds-layer-01, #f4f4f4);
+  margin: 0;
+  width: 100%;
+
+  h2 {
+    font-weight: 800;
+    margin: 30px 0;
+    font-size: 20px;
+  }
+
+  p {
+    line-height: 20px;
+  }
+}
+
diff --git a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/webpack.config.js b/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/webpack.config.js
deleted file mode 100644
index cdca2ede2eb..00000000000
--- a/packages/carbon-web-components/examples/codesandbox/styling/theme-zoning/webpack.config.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 sass = require('sass');
-const autoprefixer = require('autoprefixer');
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  // disable the host check on sandbox
-  devServer: {
-    disableHostCheck: true
-  },
-  module: {
-    rules: [
-      {
-        test: /\.scss$/,
-        use: [
-          {
-            loader: 'style-loader',
-          },
-          {
-            loader: 'css-loader',
-            options: {
-              importLoaders: 2,
-              sourceMap: true,
-            },
-          },
-          {
-            loader: 'postcss-loader',
-            options: {
-              postcssOptions: {
-                // `autoprefixer` is a requirement for Carbon core Sass code
-                plugins: [autoprefixer],
-              },
-            },
-          },
-          {
-            loader: 'sass-loader',
-            options: {
-              implementation: sass,
-              sassOptions: {
-                includePaths: ['node_modules'],
-                // `enable-css-custom-properties` and `grid-columns-16` feature flags
-                // are requirements for Carbon for IBM.com styles
-                data: `
-                  $feature-flags: (
-                    enable-css-custom-properties: true,
-                    grid-columns-16: true,
-                  );
-                `,
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  plugins: [
-    new HtmlWebpackPlugin({
-      template: 'index.html',
-    }),
-  ],
-};
diff --git a/packages/carbon-web-components/examples/codesandbox/vue/package.json b/packages/carbon-web-components/examples/codesandbox/vue/package.json
index 894be30488c..511220b15c9 100644
--- a/packages/carbon-web-components/examples/codesandbox/vue/package.json
+++ b/packages/carbon-web-components/examples/codesandbox/vue/package.json
@@ -7,7 +7,7 @@
     "serve": "vue-cli-service serve"
   },
   "dependencies": {
-    "@carbon/web-components": "v1-latest",
+    "@carbon/web-components": "latest",
     "vue": "^2.5.0"
   },
   "devDependencies": {
diff --git a/packages/carbon-web-components/examples/codesandbox/vue/src/components/HelloWorld.vue b/packages/carbon-web-components/examples/codesandbox/vue/src/components/HelloWorld.vue
index 74edcd43355..ed74b3c6c60 100644
--- a/packages/carbon-web-components/examples/codesandbox/vue/src/components/HelloWorld.vue
+++ b/packages/carbon-web-components/examples/codesandbox/vue/src/components/HelloWorld.vue
@@ -8,13 +8,13 @@ LICENSE file in the root directory of this source tree.
 -->
 
 <template>
-  <bx-dropdown trigger-content="Select an item">
-    <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-    <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-    <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-    <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-    <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-  </bx-dropdown>
+  <cds-dropdown trigger-content="Select an item">
+    <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+    <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+    <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+    <cds-dropdown-item value="dea">Option 4</cds-dropdown-item>
+    <cds-dropdown-item value="router">Option 5</cds-dropdown-item>
+  </cds-dropdown>
 </template>
 
 <script>
diff --git a/packages/carbon-web-components/gulp-tasks/build.js b/packages/carbon-web-components/gulp-tasks/build.js
index 7abba2144ed..ea2ab9d12e7 100644
--- a/packages/carbon-web-components/gulp-tasks/build.js
+++ b/packages/carbon-web-components/gulp-tasks/build.js
@@ -11,6 +11,7 @@ const gulp = require('gulp');
 require('./build/dist');
 require('./build/modules');
 require('./build/sass');
+require('./build/sass-cdn');
 
 gulp.task(
   'build',
diff --git a/packages/carbon-web-components/gulp-tasks/build/modules/css.js b/packages/carbon-web-components/gulp-tasks/build/modules/css.js
index fa89200c68a..6e6337f1e47 100644
--- a/packages/carbon-web-components/gulp-tasks/build/modules/css.js
+++ b/packages/carbon-web-components/gulp-tasks/build/modules/css.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -49,18 +49,27 @@ const buildModulesCSS = ({ banner, dir }) =>
     )
     .pipe(
       sass({
-        includePaths: ['node_modules'],
+        includePaths: ['node_modules', '../../node_modules'],
       })
     )
-    .pipe(postcss([fixHostPseudo(), autoprefixer(), ...(dir === 'rtl' ? [rtlcss] : [])]))
+    .pipe(
+      postcss([
+        fixHostPseudo(),
+        autoprefixer(),
+        ...(dir === 'rtl' ? [rtlcss] : []),
+      ])
+    )
     .pipe(cleanCSS())
     .pipe(
       through2.obj((file, enc, done) => {
         file.contents = Buffer.from(`
-          import { css } from 'lit-element';
+          import { css } from 'lit';
           export default css([${JSON.stringify(String(file.contents))}]);
         `);
-        file.path = replaceExtension(file.path, dir === 'rtl' ? '.rtl.css.js' : '.css.js');
+        file.path = replaceExtension(
+          file.path,
+          dir === 'rtl' ? '.rtl.css.js' : '.css.js'
+        );
         done(null, file);
       })
     )
@@ -74,7 +83,10 @@ const buildModulesCSS = ({ banner, dir }) =>
  * @returns {Promise<void>} Stream
  */
 async function css() {
-  const banner = await readFileAsync(path.resolve(__dirname, '../../../tools/license.js'), 'utf8');
+  const banner = await readFileAsync(
+    path.resolve(__dirname, '../../../tools/license.js'),
+    'utf8'
+  );
   await Promise.all([
     promisifyStream(() => buildModulesCSS({ banner })),
     promisifyStream(() => buildModulesCSS({ banner, dir: 'rtl' })),
diff --git a/packages/carbon-web-components/gulp-tasks/build/modules/icon-types.js b/packages/carbon-web-components/gulp-tasks/build/modules/icon-types.js
index b295a6a9004..da7d033fc99 100644
--- a/packages/carbon-web-components/gulp-tasks/build/modules/icon-types.js
+++ b/packages/carbon-web-components/gulp-tasks/build/modules/icon-types.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -35,7 +35,7 @@ async function iconTypes() {
       .pipe(
         through2.obj((file, enc, done) => {
           file.contents = Buffer.from(`
-                import { SVGTemplateResult } from 'lit-html';
+                import { SVGTemplateResult } from 'lit';
                 declare const svgResultCarbonIcon:
                   ({ children, ...attrs }?: { children?: SVGTemplateResult; [attr: string]: any }) => SVGTemplateResult;
                 export default svgResultCarbonIcon;
diff --git a/packages/carbon-web-components/gulp-tasks/build/modules/icons.js b/packages/carbon-web-components/gulp-tasks/build/modules/icons.js
index 1ed697d9051..acf6b202c4d 100644
--- a/packages/carbon-web-components/gulp-tasks/build/modules/icons.js
+++ b/packages/carbon-web-components/gulp-tasks/build/modules/icons.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -39,7 +39,7 @@ async function icons() {
           const iconsESPath = path.resolve(config.jsDestDir, 'icons', path.relative(config.iconsDir, file.path));
           const spreadModulePath = path.resolve(__dirname, '../../../es/globals/directives/spread');
           file.contents = Buffer.from(`
-                import { svg } from 'lit-html';
+                import { svg } from 'lit';
                 import spread from '${path.relative(path.dirname(iconsESPath), spreadModulePath)}';
                 const svgResultCarbonIcon = ${createSVGResultFromCarbonIcon(descriptor)};
                 export default svgResultCarbonIcon;
diff --git a/packages/carbon-web-components/gulp-tasks/build/modules/scripts.js b/packages/carbon-web-components/gulp-tasks/build/modules/scripts.js
index 83e716f8725..4114e6bef8b 100644
--- a/packages/carbon-web-components/gulp-tasks/build/modules/scripts.js
+++ b/packages/carbon-web-components/gulp-tasks/build/modules/scripts.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -39,7 +39,7 @@ function scripts() {
           plugins: [
             ['@babel/plugin-transform-runtime', { useESModules: true, version: '7.8.0' }],
             [
-              'template-html-minifier',
+              'template-html-minifier', // TODO: verify this is actually needed, doesn't seem to be doing anything
               {
                 modules: {
                   'lit-html': ['html'],
diff --git a/packages/carbon-web-components/gulp-tasks/build/sass-cdn.js b/packages/carbon-web-components/gulp-tasks/build/sass-cdn.js
new file mode 100644
index 00000000000..9107934f632
--- /dev/null
+++ b/packages/carbon-web-components/gulp-tasks/build/sass-cdn.js
@@ -0,0 +1,59 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 gulp = require('gulp');
+const sass = require('gulp-sass')(require('sass'));
+const config = require('../config');
+
+/**
+ * Builds the sass file for the carbon grid
+ *
+ * @returns {*} gulp stream
+ */
+function _buildGrid() {
+  return gulp
+    .src([`${config.srcDir}/globals/scss/grid.scss`])
+    .pipe(
+      sass({
+        includePaths: ['node_modules'],
+        outputStyle: 'compressed',
+      }).on('error', sass.logError)
+    )
+    .pipe(gulp.dest(config.bundleDestDir));
+}
+
+/**
+ * Builds the sass file for the theme zone classes
+ *
+ * @returns {*} gulp stream
+ */
+function _buildThemes() {
+  return gulp
+    .src([`${config.srcDir}/globals/scss/themes.scss`])
+    .pipe(
+      sass({
+        includePaths: ['node_modules', '../../node_modules'],
+        outputStyle: 'compressed',
+      }).on('error', sass.logError)
+    )
+    .pipe(gulp.dest(config.bundleDestDir));
+}
+
+
+gulp.task('build:sass:cdn:grid', _buildGrid);
+gulp.task('build:sass:cdn:themes', _buildThemes);
+gulp.task(
+  'build:sass:cdn',
+  gulp.parallel(
+    'build:sass:cdn:grid',
+    'build:sass:cdn:themes',
+  )
+);
diff --git a/packages/carbon-web-components/gulp-tasks/config.js b/packages/carbon-web-components/gulp-tasks/config.js
index 1fb1b4a08cb..2f709704b68 100644
--- a/packages/carbon-web-components/gulp-tasks/config.js
+++ b/packages/carbon-web-components/gulp-tasks/config.js
@@ -48,6 +48,7 @@ const cloptions = { browsers: [], specs: [], ...program.opts() };
 module.exports = {
   ENV_PRODUCTION: 'production',
   cloptions,
+  bundleDestDir: 'dist',
   srcDir: 'src',
   iconsDir: path.dirname(require.resolve('@carbon/icons/lib')),
   cjsDestDir: 'lib',
diff --git a/packages/carbon-web-components/package.json b/packages/carbon-web-components/package.json
index d2cad2f8988..30c2fc26256 100644
--- a/packages/carbon-web-components/package.json
+++ b/packages/carbon-web-components/package.json
@@ -1,6 +1,7 @@
 {
   "name": "@carbon/web-components",
-  "version": "1.34.0",
+  "private": true,
+  "version": "2.0.1",
   "publishConfig": {
     "access": "public"
   },
@@ -27,10 +28,12 @@
     "./es/": "./es/",
     "./lib/": "./lib/",
     "./dist/": "./dist/",
+    "./scss/": "./scss/",
     "./custom-elements.json": "./custom-elements.json",
     "./package.json": "./package.json"
   },
   "scripts": {
+    "prebuild": "node tools/fix-carbon-sass-imports.js",
     "build": "gulp build && yarn wca",
     "build:dist": "gulp build:dist",
     "build:dist:dev": "gulp build:dist:dev",
@@ -69,10 +72,9 @@
   ],
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "carbon-components": "10.58.3",
-    "flatpickr": "4.6.13",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
+    "@carbon/styles": "^1.42.0",
+    "flatpickr": "4.6.1",
+    "lit": "^2.7.6",
     "lodash-es": "^4.17.21"
   },
   "devDependencies": {
@@ -103,13 +105,12 @@
     "@rollup/plugin-replace": "^4.0.0",
     "@rollup/plugin-terser": "^0.4.3",
     "@rollup/pluginutils": "^4.2.0",
+    "@storybook/addon-a11y": "^6.5.15",
     "@storybook/addon-actions": "^6.5.15",
     "@storybook/addon-docs": "^6.5.15",
     "@storybook/addon-essentials": "^6.5.15",
     "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.15",
     "@storybook/addon-storysource": "^6.5.15",
-    "@storybook/source-loader": "^6.5.15",
     "@storybook/web-components": "^6.5.15",
     "@types/bluebird": "^3.5.36",
     "@types/jasmine": "^3.10.2",
diff --git a/packages/carbon-web-components/src/coding-conventions.md b/packages/carbon-web-components/src/coding-conventions.md
index 0bd7287782e..1be5f1e1763 100644
--- a/packages/carbon-web-components/src/coding-conventions.md
+++ b/packages/carbon-web-components/src/coding-conventions.md
@@ -79,7 +79,7 @@ class inheriting `HostListenerMixin()` and attaches an event listener using the
 target method as the listener. The `type` argument can be something like
 `document:click` so the `click` event listener is attached to `document`.
 
-Here's an example seen in `<bx-modal>` code:
+Here's an example seen in `<cds-modal>` code:
 
 ```typescript
 ...
@@ -88,7 +88,7 @@ import HostListenerMixin from '../../globals/mixins/HostListener';
 ...
 
 @customElement(`${prefix}-modal` as any)
-class BXModal extends HostListenerMixin(LitElement) {
+class CDSModal extends HostListenerMixin(LitElement) {
   ...
 
   @HostListener('click')
@@ -103,11 +103,11 @@ class BXModal extends HostListenerMixin(LitElement) {
 
 ## Component styles for different component states/variants
 
-Carbon core CSS uses BEM modifier like `bx--btn--danger` to style different
+Carbon core CSS uses BEM modifier like `cds--btn--danger` to style different
 states/variants of a component.
 
 OTOH `carbon-web-components` uses attributes to represent different
-states/variants (e.g. `<bx-btn type="danger">`), in a similar manner as how
+states/variants (e.g. `<cds-button type="danger">`), in a similar manner as how
 attributes influence states/variants of native elements (e.g.
 `<input type="hidden">`).
 
@@ -159,7 +159,7 @@ of the component internals being poked around. The current guideline for using
 `protected` is the following:
 
 - Ones where override happens within this component library (e.g.
-  `<bx-multi-select>` inheriting `<bx-dropdown>`)
+  `<cds-multi-select>` inheriting `<cds-dropdown>`)
 - Element ID's auto-generation logic
 - (Possibly some more, e.g. ones whose API are stable enough)
 
@@ -188,12 +188,13 @@ CustomElementClass.staticPropName;
 
 Wherever it makes sense, `carbon-web-components` translates user-initiated
 events to something that gives event listeners more context of what they mean.
-For example, `<bx-modal>` translates `click` event on `<bx-modal-close-button>`
-to `bx-modal-beingclosed` and `bx-modal-closed` custom events.
+For example, `<cds-modal>` translates `click` event on
+`<cds-modal-close-button>` to `cds-modal-beingclosed` and `cds-modal-closed`
+custom events.
 
-`bx-modal-beingclosed` is cancelable in a similar manner as how `click` event on
-`<a href="...">` is cancelable; If `bx-modal-beingclosed` is canceled,
-`<bx-modal>` stops closing itself.
+`cds-modal-beingclosed` is cancelable in a similar manner as how `click` event
+on `<a href="...">` is cancelable; If `cds-modal-beingclosed` is canceled,
+`<cds-modal>` stops closing itself.
 
 We define custom event names as static properties so derived classes can
 customize them.
@@ -213,7 +214,7 @@ This is for supporting locale-specific pluralization, etc. that require string
 interpolation as well as the logic to dictate the locale-specific rule of
 pluralization.
 
-The only exception to the above rules is `<bx-date-picker>` which uses the
+The only exception to the above rules is `<cds-date-picker>` which uses the
 `locale` property for all locale-specific info since there is a huge amount of
 translatable strings.
 
@@ -223,11 +224,11 @@ To avoid problems with collation, the primary means for user to determine order
 in list item is ordering them in DOM, for example:
 
 ```html
-<bx-dropdown>
-  <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-  <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-  <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-</bx-dropdown>
+<cds-dropdown>
+  <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+  <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+  <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+</cds-dropdown>
 ```
 
 ## Null checks
@@ -257,13 +258,14 @@ properties observed. Specifically, `carbon-web-components` doesn't set
 
 We use ShadyCSS shim as the emulation of scoped CSS in shadow DOM in IE11. There
 is one notable limitation with that; It appears that
-`:host(bx-foo) ::slotted(bx-bar)` selector does not work in ShadyCSS unless
+`:host(cds-foo) ::slotted(cds-bar)` selector does not work in ShadyCSS unless
 `<slot>` is a direct child of the shadow root. There was an issue in ShadyCSS
 repo (https://github.com/webcomponents/shadycss/issues/5) that seems to have
 explained that in detail, but the repository has been deleted somehow.
 
 To make such case work for ShadyCSS, we add a CSS class to an ancestor of
-`<slot>` in shadow DOM, and use `.bx-ce--some-class ::slotted(bx-bar)` selector.
+`<slot>` in shadow DOM, and use `.cds-ce--some-class ::slotted(cds-bar)`
+selector.
 
 ## Custom element registration
 
@@ -279,13 +281,14 @@ importing the corresponding modules. It may not be desirable in two scenarios:
 
 ## Propagating misc attributes from shadow host to an element in shadow DOM
 
-Some components, e.g. `<bx-btn>`, simply represent the content in shadow DOM,
-e.g. `<button>` in it. It's sometimes desiable for applications to have control
-of attributes in `<button>`, for example, adding `data-` attributes there.
+Some components, e.g. `<cds-button>`, simply represent the content in shadow
+DOM, e.g. `<button>` in it. It's sometimes desiable for applications to have
+control of attributes in `<button>`, for example, adding `data-` attributes
+there.
 
 In such case, we let consumer create a derived class. For example, its
-`.attributeChangedCallback()` can propagate `<bx-btn>`'s attribute to `<button>`
-in it.
+`.attributeChangedCallback()` can propagate `<cds-button>`'s attribute to
+`<button>` in it.
 
 ## Private properties
 
@@ -295,5 +298,5 @@ support inherited components.
 
 ## Component-specific considerations
 
-- [`<bx-tabs>`](./components/tabs/coding-conventions.md)
+- [`<cds-tabs>`](./components/tabs/coding-conventions.md)
 - [Handling `formdata` event](./components/form/form-data.md)
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts b/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts
new file mode 100644
index 00000000000..f787fdf12f0
--- /dev/null
+++ b/packages/carbon-web-components/src/components/accordion/accordion-item-skeleton.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import '../skeleton-text/index';
+import styles from './accordion.scss';
+
+/**
+ * Skeleton of accordion item.
+ */
+@customElement(`${prefix}-accordion-item-skeleton`)
+class CDSAccordionItemSkeleton extends LitElement {
+  render() {
+    return html`
+      <span class="${prefix}--accordion__heading">
+        ${ChevronRight16({
+          part: 'expando-icon',
+          class: `${prefix}--accordion__arrow`,
+        })}
+        <cds-skeleton-text
+          class="${prefix}--accordion__title"></cds-skeleton-text>
+      </span>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSAccordionItemSkeleton;
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-item.ts b/packages/carbon-web-components/src/components/accordion/accordion-item.ts
index bc7f54f6efa..7cb7b17e872 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion-item.ts
+++ b/packages/carbon-web-components/src/components/accordion/accordion-item.ts
@@ -7,10 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import Handle from '../../globals/internal/handle';
 import { ACCORDION_ITEM_BREAKPOINT } from './defs';
@@ -19,8 +20,6 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { ACCORDION_ITEM_BREAKPOINT };
 
-const { prefix } = settings;
-
 /**
  * Observes resize of the given element with the given resize observer.
  *
@@ -43,18 +42,18 @@ const observeResize = (observer: ResizeObserver, elem: Element) => {
 /**
  * Accordion item.
  *
- * @element bx-accordion-item
- * @fires bx-accordion-item-beingtoggled
+ * @element cds-accordion-item
+ * @fires cds-accordion-item-beingtoggled
  *   The custom event fired before this accordion item is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this accordion item.
- * @fires bx-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture.
+ * @fires cds-accordion-item-toggled - The custom event fired after this accordion item is toggled upon a user gesture.
  * @csspart expando The expando button.
  * @csspart expando-icon The expando icon.
  * @csspart title The title.
  * @csspart content The content.
  */
 @customElement(`${prefix}-accordion-item`)
-class BXAccordionItem extends FocusMixin(LitElement) {
+class CDSAccordionItem extends FocusMixin(LitElement) {
   /**
    * The current breakpoint.
    */
@@ -82,15 +81,28 @@ class BXAccordionItem extends FocusMixin(LitElement) {
     if (
       this.dispatchEvent(
         new CustomEvent(
-          (this.constructor as typeof BXAccordionItem).eventBeforeToggle,
+          (this.constructor as typeof CDSAccordionItem).eventBeforeToggle,
           init
         )
       )
     ) {
+      const { selectorAccordionContent } = this
+        .constructor as typeof CDSAccordionItem;
+
+      !this.open
+        ? this.setAttribute('expanding', '')
+        : this.setAttribute('collapsing', '');
+      this.shadowRoot!.querySelector(
+        selectorAccordionContent
+      )!.addEventListener('animationend', () => {
+        this.removeAttribute('expanding');
+        this.removeAttribute('collapsing');
+      });
+
       this.open = open;
       this.dispatchEvent(
         new CustomEvent(
-          (this.constructor as typeof BXAccordionItem).eventToggle,
+          (this.constructor as typeof CDSAccordionItem).eventToggle,
           init
         )
       );
@@ -122,7 +134,7 @@ class BXAccordionItem extends FocusMixin(LitElement) {
     (records: ResizeObserverEntry[]) => {
       const { width } = records[records.length - 1].contentRect;
       const { _sizesBreakpoints: sizesBreakpoints } = this
-        .constructor as typeof BXAccordionItem;
+        .constructor as typeof CDSAccordionItem;
       this._currentBreakpoint = Object.keys(sizesBreakpoints)
         .sort((lhs, rhs) => sizesBreakpoints[rhs] - sizesBreakpoints[lhs])
         .find(
@@ -147,8 +159,8 @@ class BXAccordionItem extends FocusMixin(LitElement) {
   /**
    * The title text.
    */
-  @property({ attribute: 'title-text' })
-  titleText = '';
+  @property({ attribute: 'title' })
+  title = '';
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -170,14 +182,14 @@ class BXAccordionItem extends FocusMixin(LitElement) {
   render() {
     const {
       disabled,
-      titleText,
+      title,
       open,
       _currentBreakpoint: currentBreakpoint,
       _handleClickExpando: handleClickExpando,
       _handleKeydownExpando: handleKeydownExpando,
     } = this;
     const { _classesBreakpoints: classesBreakpoints } = this
-      .constructor as typeof BXAccordionItem;
+      .constructor as typeof CDSAccordionItem;
     const { [currentBreakpoint!]: classBreakpoint } = classesBreakpoints;
     const contentClasses = classMap({
       [classBreakpoint]: classBreakpoint,
@@ -198,7 +210,7 @@ class BXAccordionItem extends FocusMixin(LitElement) {
           class: `${prefix}--accordion__arrow`,
         })}
         <div part="title" class="${prefix}--accordion__title">
-          <slot name="title">${titleText}</slot>
+          <slot name="title">${title}</slot>
         </div>
       </button>
       <div id="content" part="content" class="${contentClasses}">
@@ -246,7 +258,11 @@ class BXAccordionItem extends FocusMixin(LitElement) {
     return `${prefix}-accordion-item-toggled`;
   }
 
+  static get selectorAccordionContent() {
+    return `.${prefix}--accordion__content`;
+  }
+
   static styles = styles;
 }
 
-export default BXAccordionItem;
+export default CDSAccordionItem;
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts b/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts
new file mode 100644
index 00000000000..750e2a165a7
--- /dev/null
+++ b/packages/carbon-web-components/src/components/accordion/accordion-skeleton.ts
@@ -0,0 +1,128 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { ACCORDION_ALIGNMENT } from './accordion';
+import { forEach } from '../../globals/internal/collection-helpers';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import './accordion-item-skeleton';
+import '../skeleton-text/index';
+import styles from './accordion.scss';
+
+/**
+ * Skeleton of code snippet.
+ */
+@customElement(`${prefix}-accordion-skeleton`)
+class CDSAccordionSkeleton extends LitElement {
+  /**
+   * Specify the alignment of the accordion heading title and chevron
+   */
+  @property({ reflect: true })
+  alignment = ACCORDION_ALIGNMENT.END;
+
+  /**
+   * Set number of items to render
+   */
+  @property({ type: Number, attribute: 'count' })
+  count = 4;
+
+  /**
+   * Specify whether Accordion text should be flush, default is false, does not work with align="start"
+   */
+  @property({ type: Boolean, reflect: true })
+  isFlush = false;
+
+  /**
+   * `true` if the first accordion item should be open.
+   */
+  @property({ type: Boolean, reflect: true })
+  open = true;
+
+  updated(changedProperties) {
+    if (changedProperties.has('alignment')) {
+      // Propagate `alignment` attribute to descendants until `:host-context()` gets supported in all major browsers
+      forEach(
+        this.shadowRoot!.querySelectorAll(
+          (this.constructor as typeof CDSAccordionSkeleton)
+            .selectorAccordionItemSkeletons
+        ),
+        (elem) => {
+          elem.setAttribute('alignment', this.alignment);
+        }
+      );
+    }
+    if (
+      changedProperties.has('isFlush') ||
+      changedProperties.has('alignment')
+    ) {
+      // Propagate `isFlush` attribute to descendants until `:host-context()` gets supported in all major browsers
+      forEach(
+        this.shadowRoot!.querySelectorAll(
+          (this.constructor as typeof CDSAccordionSkeleton)
+            .selectorAccordionItemSkeletons
+        ),
+        (elem) => {
+          this.isFlush && this.alignment !== 'start'
+            ? elem.setAttribute('isFlush', '')
+            : elem.removeAttribute('isFlush');
+        }
+      );
+    }
+  }
+
+  render() {
+    const classes = classMap({
+      [`${prefix}--accordion__item`]: true,
+      [`${prefix}--accordion__item--active`]: true,
+      [`${prefix}--accordion--${this.alignment}`]: this.alignment,
+      [`${prefix}--accordion--flush`]:
+        this.isFlush && this.alignment !== 'start',
+    });
+    const numSkeletonItems = this.open ? this.count - 1 : this.count;
+    return html`
+      ${this.open
+        ? html`
+            <li class="${classes}">
+              <span class="${prefix}--accordion__heading">
+                ${ChevronRight16({
+                  part: 'expando-icon',
+                  class: `${prefix}--accordion__arrow`,
+                })}
+                <cds-skeleton-text
+                  class="${prefix}--accordion__title"></cds-skeleton-text>
+              </span>
+              <div class="${prefix}--accordion__content">
+                <cds-skeleton-text width="90%"></cds-skeleton-text>
+                <cds-skeleton-text width="80%"></cds-skeleton-text>
+                <cds-skeleton-text width="85%"></cds-skeleton-text>
+              </div>
+            </li>
+          `
+        : ``}
+      ${Array.from(new Array(numSkeletonItems)).map(
+        (_, index) =>
+          html`
+            <cds-accordion-item-skeleton
+              key=${index}></cds-accordion-item-skeleton>
+          `
+      )}
+    `;
+  }
+
+  static get selectorAccordionItemSkeletons() {
+    return `${prefix}-accordion-item-skeleton`;
+  }
+
+  static styles = styles;
+}
+
+export default CDSAccordionSkeleton;
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-story.mdx b/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
index 43f80d67dbc..bab2e07081d 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
+++ b/packages/carbon-web-components/src/components/accordion/accordion-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Accordion
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/accordion)
 
 The accordion component delivers large amounts of content in a small space
 through progressive disclosure. That is, the user gets key details about the
@@ -39,38 +39,52 @@ import '@carbon/web-components/es/components/accordion/index.js';
 ### HTML
 
 ```html
-<bx-accordion>
-  <bx-accordion-item title-text="Lorem Ipsum">
+<cds-accordion>
+  <cds-accordion-item title="Section 1 title">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
       commodo consequat.
     </p>
-  </bx-accordion-item>
-  <bx-accordion-item title-text="Lorem Ipsum">
+  </cds-accordion-item>
+  <cds-accordion-item title="Section 2 title">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
       commodo consequat.
     </p>
-  </bx-accordion-item>
-  <bx-accordion-item title-text="Lorem Ipsum">
+  </cds-accordion-item>
+  <cds-accordion-item title="Section 3 title">
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
       veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
       commodo consequat.
     </p>
-  </bx-accordion-item>
-</bx-accordion>
+  </cds-accordion-item>
+  <cds-accordion-item title="Section 4 title">
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+      veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+      commodo consequat.
+    </p>
+  </cds-accordion-item>
+</cds-accordion>
+```
+
+### HTML (skeleton)
+
+```html
+<cds-accordion-skeleton></cds-accordion-skeleton>
 ```
 
-## `<bx-accordion-item>` attributes, properties and events
+## `<cds-accordion-item>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-accordion-item open>`) and `false` means not setting the attribute (e.g.
-`<bx-accordion-item>` without `open` attribute).
+`<cds-accordion-item open>`) and `false` means not setting the attribute (e.g.
+`<cds-accordion-item>` without `open` attribute).
 
-<Props of="bx-accordion-item" />
+<Props of="cds-accordion-item" />
diff --git a/packages/carbon-web-components/src/components/accordion/accordion-story.ts b/packages/carbon-web-components/src/components/accordion/accordion-story.ts
index ef9dbd7a2e6..285541bf1c2 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion-story.ts
+++ b/packages/carbon-web-components/src/components/accordion/accordion-story.ts
@@ -1,37 +1,111 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
+import { boolean, select } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
 import { ACCORDION_SIZE } from './accordion';
-import './accordion-item';
+import './index';
+import './accordion-skeleton';
+import '../button/index';
 import storyDocs from './accordion-story.mdx';
 
 const sizes = {
-  'Regular size': null,
   [`Small size (${ACCORDION_SIZE.SMALL})`]: ACCORDION_SIZE.SMALL,
-  [`XL size (${ACCORDION_SIZE.EXTRA_LARGE})`]: ACCORDION_SIZE.EXTRA_LARGE,
+  [`Medium size (${ACCORDION_SIZE.MEDIUM})`]: ACCORDION_SIZE.MEDIUM,
+  [`Large size (${ACCORDION_SIZE.LARGE})`]: ACCORDION_SIZE.LARGE,
+};
+
+export const Default = () => {
+  return html`
+    <cds-accordion>
+      <cds-accordion-item title="Section 1 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </cds-accordion-item>
+      <cds-accordion-item title="Section 2 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </cds-accordion-item>
+      <cds-accordion-item title="Section 3 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </cds-accordion-item>
+      <cds-accordion-item title="Section 4 title">
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
+          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+          aliquip ex ea commodo consequat.
+        </p>
+      </cds-accordion-item>
+    </cds-accordion>
+  `;
+};
+
+Default.storyName = 'Default';
+
+export const Skeleton = (args) => {
+  const { alignment, isFlush } = args?.[`${prefix}-accordion-skeleton`] ?? {};
+  return html`
+    <cds-accordion-skeleton alignment="${alignment}" ?isFlush="${isFlush}">
+    </cds-accordion-skeleton>
+  `;
+};
+
+Skeleton.decorators = [
+  (story) => {
+    return html`<div style="width: 500px">${story()}</div>`;
+  },
+];
+
+Skeleton.parameters = {
+  percy: {
+    skip: true,
+  },
+  knobs: {
+    [`${prefix}-accordion-skeleton`]: () => ({
+      alignment: select(
+        'Accordion alignment (alignment)',
+        ['start', 'end'],
+        'end'
+      ),
+      isFlush: boolean('isFlush', false),
+    }),
+  },
 };
 
 const noop = () => {};
 
-export const Default = (args) => {
+export const Playground = (args) => {
   const {
-    open,
-    titleText,
     disabled,
     disableToggle,
     onBeforeToggle = noop,
     onToggle = noop,
     size,
-  } = args?.['bx-accordion'] ?? {};
+    alignment,
+    isFlush,
+  } = args?.[`${prefix}-accordion-playground`] ?? {};
   const handleBeforeToggle = (event: CustomEvent) => {
     onBeforeToggle(event);
     if (disableToggle) {
@@ -40,61 +114,83 @@ export const Default = (args) => {
   };
 
   return html`
-    <bx-accordion
-      @bx-accordion-item-beingtoggled="${handleBeforeToggle}"
-      @bx-accordion-item-toggled="${onToggle}"
-      size="${size}">
-      <bx-accordion-item
-        ?disabled="${disabled}"
-        ?open="${open}"
-        title-text=${titleText}>
+    <cds-accordion
+      @cds-accordion-item-beingtoggled="${handleBeforeToggle}"
+      @cds-accordion-item-toggled="${onToggle}"
+      size="${size}"
+      alignment="${alignment}"
+      ?isFlush="${isFlush}">
+      <cds-accordion-item ?disabled="${disabled}" title="Section 1 title">
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
           aliquip ex ea commodo consequat.
         </p>
-      </bx-accordion-item>
-      <bx-accordion-item ?open="${open}" title-text=${titleText}>
+      </cds-accordion-item>
+      <cds-accordion-item ?disabled="${disabled}" title="Section 2 title">
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
           aliquip ex ea commodo consequat.
         </p>
-      </bx-accordion-item>
-      <bx-accordion-item ?open="${open}">
+      </cds-accordion-item>
+      <cds-accordion-item ?disabled="${disabled}" title="Section 3 title">
+        <cds-button>This is a button.</cds-button>
+      </cds-accordion-item>
+      <cds-accordion-item ?disabled="${disabled}">
+        <span slot="title">
+          <span> Section 4 title (<em>the title can be a node</em>) </span>
+        </span>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam, quis nostrud exercitation ullamco laboris nisi ut
           aliquip ex ea commodo consequat.
         </p>
-        <span slot="title">${titleText}</span>
-      </bx-accordion-item>
-    </bx-accordion>
+      </cds-accordion-item>
+    </cds-accordion>
   `;
 };
 
-Default.storyName = 'Default';
+Playground.parameters = {
+  percy: {
+    skip: true,
+  },
+  knobs: {
+    [`${prefix}-accordion-playground`]: () => ({
+      alignment: select(
+        'Specify the alignment of the accordion heading title and chevron (alignment)',
+        ['start', 'end'],
+        'end'
+      ),
+      disabled: boolean(
+        'Specify whether an individual AccordionItem should be disabled (disabled)',
+        false
+      ),
+      isFlush: boolean(
+        'Specify whether Accordion text should be flush, default is false, does not work with align="start" (isFlush)',
+        false
+      ),
+      size: select(
+        'Specify the size of the Accordion (size)',
+        sizes,
+        ACCORDION_SIZE.MEDIUM
+      ),
+      disableToggle: boolean(
+        `Disable user-initiated toggle action (Call event.preventDefault() in ${prefix}-accordion-beingtoggled event)`,
+        false
+      ),
+      onBeforeToggle: action(`${prefix}-accordion-item-beingtoggled`),
+      onToggle: action(`${prefix}-accordion-item-toggled`),
+    }),
+  },
+};
 
 export default {
   title: 'Components/Accordion',
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-accordion': () => ({
-        open: boolean('Open the section (open)', false),
-        titleText: text('The title (title-text)', 'Section title'),
-        size: select('Accordion size (size)', sizes, null),
-        disabled: boolean('Disable accordion item (disabled)', false),
-        disableToggle: boolean(
-          'Disable user-initiated toggle action (Call event.preventDefault() in bx-accordion-beingtoggled event)',
-          false
-        ),
-        onBeforeToggle: action('bx-accordion-item-beingtoggled'),
-        onToggle: action('bx-accordion-item-toggled'),
-      }),
-    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/accordion/accordion.scss b/packages/carbon-web-components/src/components/accordion/accordion.scss
index 832910b32f1..f10b8301779 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion.scss
+++ b/packages/carbon-web-components/src/components/accordion/accordion.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,51 +7,92 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/accordion/accordion';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/layout' as *;
 
-:host(#{$prefix}-accordion) {
+:host(#{$prefix}-accordion),
+:host(#{$prefix}-accordion-skeleton) {
   @extend .#{$prefix}--accordion;
+  @include emit-layout-tokens();
 }
 
-:host(#{$prefix}-accordion-item) {
+:host(#{$prefix}-accordion-item),
+:host(#{$prefix}-accordion-item-skeleton) {
   @extend .#{$prefix}--accordion__item;
 
   display: block;
   outline: none;
+  .#{$prefix}--accordion__content {
+    @extend .#{$prefix}--accordion__content;
 
-  .#{$prefix}--accordion__heading {
-    padding-top: calc(
-      (#{$container-03} - #{map-get($body-long-01, 'line-height')}rem) / 2
-    );
-    min-height: $container-03;
-  }
+    ::slotted(p) {
+      @include type-style('body-01');
 
-  &[size='sm'] {
-    .#{$prefix}--accordion__heading {
-      min-height: rem(32px);
-      padding: rem(5px) 0;
+      margin: 0;
     }
   }
+}
 
-  &[size='xl'] {
-    .#{$prefix}--accordion__heading {
-      min-height: rem(48px);
-    }
+:host(#{$prefix}-accordion-item[size='sm']),
+:host(#{$prefix}-accordion-item-skeleton[size='sm']) {
+  button {
+    @extend .#{$prefix}--layout--size-sm;
+    min-height: var(--cds-layout-size-height-context);
   }
 }
 
+:host(#{$prefix}-accordion-item[size='lg']),
+:host(#{$prefix}-accordion-item-skeleton[size='lg']) {
+  button {
+    @extend .#{$prefix}--layout--size-lg;
+    min-height: var(--cds-layout-size-height-context);
+  }
+}
+
+:host(#{$prefix}-accordion-item[alignment='start']),
+:host(#{$prefix}-accordion-item-skeleton[alignment='start']) {
+  @extend .#{$prefix}--accordion--start;
+}
+
+:host(#{$prefix}-accordion-item[isFlush]),
+:host(#{$prefix}-accordion-item-skeleton[isFlush]) {
+  @extend .#{$prefix}--accordion--flush;
+}
+
+:host(#{$prefix}-accordion-item[expanding]) {
+  @extend .#{$prefix}--accordion__item--expanding;
+}
+
+:host(#{$prefix}-accordion-item[collapsing]) {
+  @extend .#{$prefix}--accordion__item--collapsing;
+}
+
 :host(#{$prefix}-accordion-item[open]:not([disabled])) {
   @extend .#{$prefix}--accordion__item--active;
 
   .#{$prefix}--accordion__content {
-    padding-right: $carbon--spacing-05;
+    padding-right: $spacing-05;
   }
 
   .#{$prefix}-ce--accordion__content--sm {
-    padding-right: $carbon--spacing-09;
+    padding-right: $spacing-09;
   }
 
   .#{$prefix}-ce--accordion__content--md {
     padding-right: 25%;
   }
 }
+
+:host(#{$prefix}-accordion-skeleton),
+:host(#{$prefix}-accordion-item-skeleton) {
+  .#{$prefix}--accordion__heading {
+    cursor: default;
+    &:hover::before {
+      background: transparent;
+    }
+  }
+}
diff --git a/packages/carbon-web-components/src/components/accordion/accordion.ts b/packages/carbon-web-components/src/components/accordion/accordion.ts
index 1ce7ad9c7bb..bcac3b7aefe 100644
--- a/packages/carbon-web-components/src/components/accordion/accordion.ts
+++ b/packages/carbon-web-components/src/components/accordion/accordion.ts
@@ -7,29 +7,40 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
-import { ACCORDION_SIZE } from './defs';
+import { ACCORDION_SIZE, ACCORDION_ALIGNMENT } from './defs';
 import styles from './accordion.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { ACCORDION_SIZE };
-
-const { prefix } = settings;
+export { ACCORDION_SIZE, ACCORDION_ALIGNMENT };
 
 /**
  * Accordion container.
  *
- * @element bx-accordion
+ * @element cds-accordion
  */
 @customElement(`${prefix}-accordion`)
-class BXAccordion extends LitElement {
+class CDSAccordion extends LitElement {
+  /**
+   * Accordion size should be sm, md, lg.
+   */
+  @property({ reflect: true })
+  size = ACCORDION_SIZE.MEDIUM;
+
   /**
-   * Accordion size.
+   * Specify the alignment of the accordion heading title and chevron
    */
   @property({ reflect: true })
-  size = ACCORDION_SIZE.REGULAR;
+  alignment = ACCORDION_ALIGNMENT.END;
+
+  /**
+   * Specify whether Accordion text should be flush, default is false, does not work with align="start"
+   */
+  @property({ type: Boolean, reflect: true })
+  isFlush = false;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -43,13 +54,40 @@ class BXAccordion extends LitElement {
       // Propagate `size` attribute to descendants until `:host-context()` gets supported in all major browsers
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXAccordion).selectorAccordionItems
+          (this.constructor as typeof CDSAccordion).selectorAccordionItems
         ),
         (elem) => {
           elem.setAttribute('size', this.size);
         }
       );
     }
+    if (changedProperties.has('alignment')) {
+      // Propagate `alignment` attribute to descendants until `:host-context()` gets supported in all major browsers
+      forEach(
+        this.querySelectorAll(
+          (this.constructor as typeof CDSAccordion).selectorAccordionItems
+        ),
+        (elem) => {
+          elem.setAttribute('alignment', this.alignment);
+        }
+      );
+    }
+    if (
+      changedProperties.has('isFlush') ||
+      changedProperties.has('alignment')
+    ) {
+      // Propagate `isFlush` attribute to descendants until `:host-context()` gets supported in all major browsers
+      forEach(
+        this.querySelectorAll(
+          (this.constructor as typeof CDSAccordion).selectorAccordionItems
+        ),
+        (elem) => {
+          this.isFlush && this.alignment !== 'start'
+            ? elem.setAttribute('isFlush', '')
+            : elem.removeAttribute('isFlush');
+        }
+      );
+    }
   }
 
   render() {
@@ -63,4 +101,4 @@ class BXAccordion extends LitElement {
   static styles = styles;
 }
 
-export default BXAccordion;
+export default CDSAccordion;
diff --git a/packages/carbon-web-components/src/components/accordion/defs.ts b/packages/carbon-web-components/src/components/accordion/defs.ts
index 431be1194e2..e5667704b6f 100644
--- a/packages/carbon-web-components/src/components/accordion/defs.ts
+++ b/packages/carbon-web-components/src/components/accordion/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -23,21 +23,36 @@ export enum ACCORDION_ITEM_BREAKPOINT {
 }
 
 /**
- * Button size.
+ * Accordion size.
  */
 export enum ACCORDION_SIZE {
   /**
-   * Regular size.
+   * Small size.
    */
-  REGULAR = '',
+  SMALL = 'sm',
 
   /**
-   * Small size.
+   * Medium size.
    */
-  SMALL = 'sm',
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+}
+
+/**
+ * Specify the alignment of the accordion heading title and chevron.
+ */
+export enum ACCORDION_ALIGNMENT {
+  /**
+   * Alignment to the start
+   */
+  START = 'start',
 
   /**
-   * X-Large size.
+   * Alignment to the end
    */
-  EXTRA_LARGE = 'xl',
+  END = 'END',
 }
diff --git a/packages/carbon-web-components/src/components/accordion/index.ts b/packages/carbon-web-components/src/components/accordion/index.ts
index 51354faf2b6..0857ea9a9db 100644
--- a/packages/carbon-web-components/src/components/accordion/index.ts
+++ b/packages/carbon-web-components/src/components/accordion/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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.
@@ -9,3 +9,5 @@
 
 import './accordion';
 import './accordion-item';
+import './accordion-item-skeleton';
+import './accordion-skeleton';
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts
index 5eb4609d369..56bf0d8886a 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-item.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './breadcrumb.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Breadcrumb item.
  *
- * @element bx-breadcrumb-item
+ * @element cds-breadcrumb-item
  */
 @customElement(`${prefix}-breadcrumb-item`)
-class BXBreadcrumbItem extends LitElement {
+class CDSBreadcrumbItem extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
@@ -35,4 +33,4 @@ class BXBreadcrumbItem extends LitElement {
   static styles = styles;
 }
 
-export default BXBreadcrumbItem;
+export default CDSBreadcrumbItem;
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts
index 09d393fce84..7c494c0fc5a 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-link.ts
@@ -7,21 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import BXLink from '../link/link';
+import { html } from 'lit';
+import { prefix } from '../../globals/settings';
+import CDSLink from '../link/link';
 import styles from './breadcrumb.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Link in breadcrumb.
  *
- * @element bx-breadcrumb-link
+ * @element cds-breadcrumb-link
  */
 @customElement(`${prefix}-breadcrumb-link`)
-class BXBreadcrumbLink extends BXLink {
+class CDSBreadcrumbLink extends CDSLink {
+  render() {
+    return html`
+      ${this.href
+        ? super.render()
+        : html`<span class="${prefix}--link"><slot></slot></span>`}
+    `;
+  }
   static styles = styles;
 }
 
-export default BXBreadcrumbLink;
+export default CDSBreadcrumbLink;
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
index b014362912d..7b4015b7b3d 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-overflow-menu.ts
@@ -7,22 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { html } from 'lit';
+import { prefix } from '../../globals/settings';
 import OverflowMenuHorizontal16 from '@carbon/icons/lib/overflow-menu--horizontal/16';
-import BXOverflowMenu from '../overflow-menu/overflow-menu';
+import CDSOverflowMenu from '../overflow-menu/overflow-menu';
 import styles from './breadcrumb.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Overflow menu in breadcrumb.
  *
- * @element bx-breadcrumb-overflow-menu
+ * @element cds-breadcrumb-overflow-menu
  */
 @customElement(`${prefix}-breadcrumb-overflow-menu`)
-class BXBreadcrumbOverflowMenu extends BXOverflowMenu {
+class CDSBreadcrumbOverflowMenu extends CDSOverflowMenu {
   render() {
     return html`
       <slot name="icon">
@@ -36,4 +34,4 @@ class BXBreadcrumbOverflowMenu extends BXOverflowMenu {
   static styles = styles;
 }
 
-export default BXBreadcrumbOverflowMenu;
+export default CDSBreadcrumbOverflowMenu;
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts
new file mode 100644
index 00000000000..d7568e8cb97
--- /dev/null
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-skeleton.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './breadcrumb.scss';
+
+const renderItem = () => {
+  return html`
+    <div class="${prefix}--breadcrumb-item">
+      <span class="${prefix}--link">&nbsp;</span>
+    </div>
+  `;
+};
+
+/**
+ * Skeleton of breadcrumb.
+ */
+@customElement(`${prefix}-breadcrumb-skeleton`)
+class CDSBreadcrumbSkeleton extends LitElement {
+  render() {
+    return html`
+      <div class="${prefix}--breadcrumb ${prefix}--skeleton">
+        ${renderItem()} ${renderItem()} ${renderItem()}
+      </div>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSBreadcrumbSkeleton;
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
index c32a35dcca7..04d657f65da 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Breadcrumb
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/breadcrumb)
 
 ## Getting started
 
@@ -25,47 +25,99 @@ import '@carbon/web-components/es/components/breadcrumb/index.js';
 ### HTML
 
 ```html
-<bx-breadcrumb>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-  </bx-breadcrumb-item>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-  </bx-breadcrumb-item>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-link href="/#" aria-current="page"
-      >Breadcrumb 3</bx-breadcrumb-link
-    >
-  </bx-breadcrumb-item>
-</bx-breadcrumb>
+<cds-breadcrumb>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+</cds-breadcrumb>
 ```
 
 ### HTML (with overflow-menu)
 
 ```html
-<bx-breadcrumb>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-  </bx-breadcrumb-item>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-  </bx-breadcrumb-item>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-overflow-menu>
-      <bx-overflow-menu-body>
-        <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-      </bx-overflow-menu-body>
-    </bx-breadcrumb-overflow-menu>
-  </bx-breadcrumb-item>
-  <bx-breadcrumb-item>
-    <bx-breadcrumb-link href="/#" aria-current="page"
-      >Breadcrumb 3</bx-breadcrumb-link
+<cds-breadcrumb>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#">Breadcrumb 2</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-overflow-menu>
+      <cds-overflow-menu-body>
+        <cds-overflow-menu-item>Breadcrumb 3</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Breadcrumb 4</cds-overflow-menu-item>
+      </cds-overflow-menu-body>
+    </cds-breadcrumb-overflow-menu>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#">Breadcrumb 5</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link>Breadcrumb 6</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+</cds-breadcrumb>
+```
+
+### HTML (skeleton)
+
+```html
+<cds-breadcrumb-skeleton> </cds-breadcrumb-skeleton>
+```
+
+### HTML (no-trailing-slash)
+
+```html
+<cds-breadcrumb no-trailing-slash>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+</cds-breadcrumb>
+```
+
+### HTML (aria-current="page")
+
+```html
+<cds-breadcrumb no-trailing-slash>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+  </cds-breadcrumb-item>
+  <cds-breadcrumb-item>
+    <cds-breadcrumb-link href="/#" aria-current="page"
+      >Breadcrumb 4</cds-breadcrumb-link
     >
-  </bx-breadcrumb-item>
-</bx-breadcrumb>
+  </cds-breadcrumb-item>
+</cds-breadcrumb>
 ```
 
-## `<bx-breadcrumb-link>` attributes, properties and events
+## `<cds-breadcrumb>` attributes, properties and events
+
+<Props of="cds-breadcrumb" />
+
+## `<cds-breadcrumb-link>` attributes, properties and events
 
-<Props of="bx-breadcrumb-link" />
+<Props of="cds-breadcrumb-link" />
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts
index f8cbd731abb..7e80f515505 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb-story.ts
@@ -1,35 +1,41 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import './breadcrumb';
 import './breadcrumb-item';
 import './breadcrumb-link';
 import './breadcrumb-overflow-menu';
+import '../overflow-menu/overflow-menu-body';
+import './breadcrumb-skeleton';
+import { prefix } from '../../globals/settings';
+import { boolean, text } from '@storybook/addon-knobs';
 import storyDocs from './breadcrumb-story.mdx';
 
-export const Default = () =>
-  html`
-    <bx-breadcrumb>
-      <bx-breadcrumb-item>
-        <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-      </bx-breadcrumb-item>
-      <bx-breadcrumb-item>
-        <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-      </bx-breadcrumb-item>
-      <bx-breadcrumb-item>
-        <bx-breadcrumb-link href="/#" aria-current="page"
-          >Breadcrumb 3</bx-breadcrumb-link
-        >
-      </bx-breadcrumb-item>
-    </bx-breadcrumb>
+export const Default = () => {
+  return html`
+    <cds-breadcrumb>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+    </cds-breadcrumb>
   `;
+};
 
 Default.storyName = 'Default';
 
@@ -40,28 +46,71 @@ export default {
   },
 };
 
-export const withOverflowMenu = () => html`
-  <bx-breadcrumb>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#">Breadcrumb 1</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#">Breadcrumb 2</bx-breadcrumb-link>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-overflow-menu>
-        <bx-overflow-menu-body>
-          <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-          <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-        </bx-overflow-menu-body>
-      </bx-breadcrumb-overflow-menu>
-    </bx-breadcrumb-item>
-    <bx-breadcrumb-item>
-      <bx-breadcrumb-link href="/#" aria-current="page"
-        >Breadcrumb 3</bx-breadcrumb-link
-      >
-    </bx-breadcrumb-item>
-  </bx-breadcrumb>
+export const BreadcrumbWithOverflowMenu = () => html`
+  <cds-breadcrumb>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="/#">Breadcrumb 2</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-overflow-menu>
+        <cds-overflow-menu-body>
+          <cds-overflow-menu-item>Breadcrumb 3</cds-overflow-menu-item>
+          <cds-overflow-menu-item>Breadcrumb 4</cds-overflow-menu-item>
+        </cds-overflow-menu-body>
+      </cds-breadcrumb-overflow-menu>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link href="/#">Breadcrumb 5</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+    <cds-breadcrumb-item>
+      <cds-breadcrumb-link>Breadcrumb 6</cds-breadcrumb-link>
+    </cds-breadcrumb-item>
+  </cds-breadcrumb>
 `;
 
-withOverflowMenu.storyName = 'with Overflow Menu';
+BreadcrumbWithOverflowMenu.storyName = 'Breadcrumb With Overflow Menu';
+
+export const skeleton = () => {
+  return html` <cds-breadcrumb-skeleton> </cds-breadcrumb-skeleton> `;
+};
+
+export const Playground = (args) => {
+  const { ariaLabel, classes, noTrailingSlash } =
+    args?.[`${prefix}-breadcrumb-playground`] ?? {};
+  return html`
+    <cds-breadcrumb
+      ?no-trailing-slash="${noTrailingSlash}"
+      class="${classes}"
+      aria-label="${ariaLabel}">
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="/#">Breadcrumb 1</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="#">Breadcrumb 2</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link href="#">Breadcrumb 3</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+      <cds-breadcrumb-item>
+        <cds-breadcrumb-link>Breadcrumb 4</cds-breadcrumb-link>
+      </cds-breadcrumb-item>
+    </cds-breadcrumb>
+  `;
+};
+
+Playground.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    [`${prefix}-breadcrumb-playground`]: () => ({
+      ariaLabel: text('aria-label (aria-label)', ''),
+      classes: text('class (class)', ''),
+      noTrailingSlash: boolean(
+        'Optional prop to omit the trailing slash for the breadcrumbs (noTrailingSlash)',
+        false
+      ),
+    }),
+  },
+};
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss
index 12997a30469..49b39085dcc 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.scss
@@ -7,15 +7,26 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/link/link';
-@import 'carbon-components/scss/components/breadcrumb/breadcrumb';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/breadcrumb';
 @import '../overflow-menu/overflow-menu';
 
-:host(#{$prefix}-breadcrumb) {
+:host(#{$prefix}-breadcrumb),
+:host(#{$prefix}-breadcrumb-skeleton) {
   @extend .#{$prefix}--breadcrumb;
+
+  .#{$prefix}--breadcrumb {
+    padding: 0;
+    margin: 0;
+  }
 }
 
-:host(#{$prefix}-breadcrumb-item) {
+:host(#{$prefix}-breadcrumb-item),
+:host(#{$prefix}-breadcrumb-item-skeleton) {
   @extend .#{$prefix}--breadcrumb-item;
 
   &::after {
@@ -44,13 +55,13 @@ $css--plex: true !default;
   // Used to mimic link underline
   ::after {
     position: absolute;
-    bottom: 2px;
-    width: rem(12px);
+    bottom: $spacing-01;
+    width: $spacing-04;
     height: 1px;
     background: $link-primary-hover;
     content: '';
     opacity: 0;
-    transition: opacity $duration--fast-01 motion(standard, productive);
+    transition: opacity $duration-fast-01 motion(standard, productive);
   }
 }
 
@@ -61,7 +72,7 @@ $css--plex: true !default;
 
 :host(#{$prefix}-breadcrumb-overflow-menu) svg {
   position: relative;
-  fill: $link-01;
+  fill: $link-primary;
   transform: translateY(4px);
 }
 
@@ -69,16 +80,17 @@ $css--plex: true !default;
   fill: $link-primary-hover;
 }
 
-:host(#{$prefix}-breadcrumb-item:last-of-type)::after {
+:host(#{$prefix}-breadcrumb[no-trailing-slash])
+  ::slotted(#{$prefix}-breadcrumb-item:last-of-type)::after {
   content: '';
 }
 
 :host(#{$prefix}-breadcrumb-link) {
   outline: none;
 
-  // Re-define the ruleset so this wins over `.bx--link:visited`, etc.
+  // Re-define the ruleset so this wins over `.#{$prefix}--link:visited`, etc.
   .#{$prefix}--link--disabled {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
   .#{$prefix}--link__icon[hidden] {
@@ -87,7 +99,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-breadcrumb-link[aria-current='page']) .#{$prefix}--link {
-  color: $text-01;
+  color: $text-primary;
   cursor: auto;
 
   &:hover {
diff --git a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts
index b8c3f7e3d59..8bfc12eb976 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts
+++ b/packages/carbon-web-components/src/components/breadcrumb/breadcrumb.ts
@@ -7,20 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './breadcrumb.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Breadcrumb.
  *
- * @element bx-breadcrumb
+ * @element cds-breadcrumb
  */
 @customElement(`${prefix}-breadcrumb`)
-class BXBreadcrumb extends LitElement {
+class CDSBreadcrumb extends LitElement {
+  /**
+   * Optional prop to omit the trailing slash for the breadcrumbs
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'no-trailing-slash' })
+  noTrailingSlash = false;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'navigation');
@@ -29,9 +35,12 @@ class BXBreadcrumb extends LitElement {
   }
 
   render() {
+    const classes = classMap({
+      [`${prefix}--breadcrumb`]: true,
+      [`${prefix}--breadcrumb--no-trailing-slash`]: this.noTrailingSlash,
+    });
     return html`
-      <ol
-        class="${prefix}--breadcrumb ${prefix}--breadcrumb--no-trailing-slash">
+      <ol class="${classes}">
         <slot></slot>
       </ol>
     `;
@@ -40,4 +49,4 @@ class BXBreadcrumb extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXBreadcrumb;
+export default CDSBreadcrumb;
diff --git a/packages/carbon-web-components/src/components/breadcrumb/index.ts b/packages/carbon-web-components/src/components/breadcrumb/index.ts
index 22d1ed1e979..14d98fa3855 100644
--- a/packages/carbon-web-components/src/components/breadcrumb/index.ts
+++ b/packages/carbon-web-components/src/components/breadcrumb/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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.
@@ -10,3 +10,4 @@
 import './breadcrumb';
 import './breadcrumb-item';
 import './breadcrumb-link';
+import './breadcrumb-skeleton';
diff --git a/packages/carbon-web-components/src/components/button/button-set.ts b/packages/carbon-web-components/src/components/button/button-set.ts
new file mode 100644
index 00000000000..b12565aa649
--- /dev/null
+++ b/packages/carbon-web-components/src/components/button/button-set.ts
@@ -0,0 +1,75 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { BUTTON_KIND } from './defs';
+import styles from './button.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Button set.
+ *
+ * @element cds-button-set
+ */
+@customElement(`${prefix}-button-set`)
+class CDSButtonSet extends LitElement {
+  /**
+   * Handler for @slotchange, set the first cds-button to kind secondary and primary for the remaining ones
+   *
+   * @private
+   */
+  private _handleSlotChange(event: Event) {
+    const childItems = (event.target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches !== undefined
+          ? (elem as HTMLElement).matches(
+              (this.constructor as typeof CDSButtonSet).selectorItem
+            )
+          : false
+      );
+
+    childItems.forEach((elem, index) => {
+      (elem as HTMLElement).setAttribute(
+        'kind',
+        index === 0 ? BUTTON_KIND.SECONDARY : BUTTON_KIND.PRIMARY
+      );
+    });
+
+    const update = new CustomEvent(`${prefix}-btn-set-update`, {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+    });
+
+    this.dispatchEvent(update);
+  }
+
+  render() {
+    return html` <slot @slotchange="${this._handleSlotChange}"></slot> `;
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'list');
+  }
+
+  /**
+   * A selector that will return the child items.
+   */
+  static get selectorItem() {
+    return `${prefix}-button`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default CDSButtonSet;
diff --git a/packages/carbon-web-components/src/components/button/button-skeleton.ts b/packages/carbon-web-components/src/components/button/button-skeleton.ts
index 20a3fd7f2df..5a1c7a18ddd 100644
--- a/packages/carbon-web-components/src/components/button/button-skeleton.ts
+++ b/packages/carbon-web-components/src/components/button/button-skeleton.ts
@@ -7,21 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html } from 'lit-element';
-import ifNonNull from '../../globals/directives/if-non-null';
-import BXButton from './button';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit';
+import { prefix } from '../../globals/settings';
+import CDSButton from './button';
 import styles from './button.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Button skeleton.
  */
-@customElement(`${prefix}-btn-skeleton`)
-class BXButtonSkeleton extends BXButton {
+@customElement(`${prefix}-button-skeleton`)
+class CDSButtonSkeleton extends CDSButton {
   /**
    * Handles `click` event on the `<a>.
    *
@@ -58,13 +56,13 @@ class BXButtonSkeleton extends BXButton {
             id="button"
             role="button"
             class="${classes}"
-            download="${ifNonNull(download)}"
-            href="${ifNonNull(href)}"
-            hreflang="${ifNonNull(hreflang)}"
-            ping="${ifNonNull(ping)}"
-            rel="${ifNonNull(rel)}"
-            target="${ifNonNull(target)}"
-            type="${ifNonNull(type)}"
+            download="${ifDefined(download)}"
+            href="${ifDefined(href)}"
+            hreflang="${ifDefined(hreflang)}"
+            ping="${ifDefined(ping)}"
+            rel="${ifDefined(rel)}"
+            target="${ifDefined(target)}"
+            type="${ifDefined(type)}"
             @click="${this._handleClickLinkSkeleton}"></a>
         `
       : html`
@@ -73,11 +71,11 @@ class BXButtonSkeleton extends BXButton {
             class="${classes}"
             ?autofocus="${autofocus}"
             ?disabled="${disabled}"
-            type="${ifNonNull(type)}"></button>
+            type="${ifDefined(type)}"></button>
         `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXButtonSkeleton;
+export default CDSButtonSkeleton;
diff --git a/packages/carbon-web-components/src/components/button/button-story.mdx b/packages/carbon-web-components/src/components/button/button-story.mdx
index 2f021bc43a1..ee690e0f93d 100644
--- a/packages/carbon-web-components/src/components/button/button-story.mdx
+++ b/packages/carbon-web-components/src/components/button/button-story.mdx
@@ -1,30 +1,21 @@
 import { Props, Description } from '@storybook/addon-docs/blocks';
 import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+import Add16 from '@carbon/web-components/es/icons/add/16';
 
 # Button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/button)
 
-Buttons are used to initialize an action, either in the background or foreground
-of an experience.
+## Overview
 
-There are several kinds of buttons:
-
-- Primary buttons should be used for the principal call to action on the page.
-- Secondary buttons should be used for secondary actions on each page.
-- Danger buttons should be used for a negative action (such as Delete) on the
-  page.
-
-Small buttons may be used when there is not enough space for a regular sized
-button. This issue is most often found in tables. Small buttons should have
-three words or fewer.
-
-When words are not enough, icons can be used in buttons to better communicate
-what the button does. Icons are always paired with text.
+Buttons are clickable elements that are used to trigger actions. They
+communicate calls to action to the user and allow users to interact with pages
+in a variety of ways. `Button` labels express what action will occur when the
+user interacts with it.
 
 ## Getting started
 
@@ -36,27 +27,98 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/button/index.js';
 ```
 
+### SCSS (must include with JS import)
+
+```css
+@use '@carbon/styles/scss/components/button';
+```
+
 <Description markdown={`${cdnJs({ components: ['button'] })}`} />
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<bx-btn href="https://www.ibm.com"> Button </bx-btn>
+<cds-button href="https://www.ibm.com"> Button </cds-button>
 ```
 
+## Danger Buttons
+
+The danger button has three different styles: primary, tertiary, and ghost.
+Determining which danger button style to use will depend on the level of
+emphasis you want to give to the danger action. Destructive actions that are
+considered a required or primary step in a workflow should use the primary
+danger button style. However, if a destructive action is just one of several
+actions a user could choose from, then a lower emphasis style like the tertiary
+danger button or the ghost danger button may be more appropriate.
+
+```html
+<cds-button type="danger" href="https://www.ibm.com"> Button </cds-button>
+```
+
+## Icon-only Buttons
+
+Icon buttons allow users to take actions, and make choices, with a single tap.
+Icon buttons can take the form of any of the seven types (Primary, Secondary,
+Tertiary, Danger, Danger tertiary, Danger ghost and Ghost) but most commonly
+will be styled as primary or ghost buttons.
+
+Our Storybook example also shows off the Tooltip feature, explained later.
+
+````html
+import Add16 from '@carbon/web-components/es/icons/add/16';
+
+<cds-button> ${Add16({ slot: 'icon' })} </cds-button>``` ## Set of Buttons You
+can wrap two `Button` elements in a `ButtonSet` when an action required by the
+user has more than one option. Always use a negative action button (secondary)
+paired with a positive action button (primary) in that order. Negative action
+buttons will be on the left. Positive action buttons should be on the right.
+When these two types buttons are paired in the correct order, they will
+automatically space themselves apart. ```html
+<cds-button-set>
+  <cds-button href="https://www.ibm.com"> Secondary 1</cds-button>
+  <cds-button href="https://www.ibm.com"> Primary 2</cds-button>
+</cds-button-set>
+````
+
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-btn-skeleton>`.
+For the skeleton variation, utilize `<cds-button-skeleton>`.
 
 ```html
-<bx-btn-skeleton size="sm"> </bx-btn-skeleton>
+<cds-button-skeleton size="sm"> </cds-button-skeleton>
 ```
 
-## `<bx-btn>` attributes and properties
+## Component API
+
+### Button `size`
+
+This attribute specifies which size the `Button` should be rendered at. Valid
+values are `sm`, `md`, `lg`, `xl` and `2xl`. If no `size` is specified, it
+renders as `lg`.
+
+### Button `tooltipAlignment`
+
+The `tooltip-alignment` attribute is used to change where the tooltip text and
+caret is rendered in relation to the `Button`. Accepted options are `start`,
+`center`, and `end`. The default alignment is `center`.
+
+### Button `tooltipPosition`
+
+When using an icon-only button, you may be in a situation where you need to
+change where the tooltip is positioned on the screen. `tooltip-position` takes
+in a position and will render the tooltip accordingly. Accepted options are
+`top`, `bottom`, `left`, and `right`. The default is position is `top`.
+
+### ButtonSet `stacked`
+
+By passing in `stacked` to the `cds-button-set` component, you can arrange your
+two `Button` elements vertically
+
+## `<cds-button>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-btn autofocus>`) and `false` means not setting the attribute (e.g.
-`<bx-btn>` without `autofocus` attribute).
+`<cds-button autofocus>`) and `false` means not setting the attribute (e.g.
+`<cds-button>` without `autofocus` attribute).
 
-<Props of="bx-btn" />
+<Props of="cds-button" />
diff --git a/packages/carbon-web-components/src/components/button/button-story.ts b/packages/carbon-web-components/src/components/button/button-story.ts
index 4ab3bbfe311..5d7e8657a68 100644
--- a/packages/carbon-web-components/src/components/button/button-story.ts
+++ b/packages/carbon-web-components/src/components/button/button-story.ts
@@ -7,20 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `@carbon/web-components` package.
+import { boolean, select, text } from '@storybook/addon-knobs';
+// Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
 import Add16 from '@carbon/web-components/es/icons/add/16';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT } from './button';
+import { prefix } from '../../globals/settings';
+import {
+  BUTTON_KIND,
+  BUTTON_TYPE,
+  BUTTON_SIZE,
+  BUTTON_TOOLTIP_ALIGNMENT,
+  BUTTON_TOOLTIP_POSITION,
+} from './button';
 import './button-skeleton';
 import textNullable from '../../../.storybook/knob-text-nullable';
 import storyDocs from './button-story.mdx';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
-const kinds = {
+const kind = {
   [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY,
   [`Secondary button (${BUTTON_KIND.SECONDARY})`]: BUTTON_KIND.SECONDARY,
   [`Tertiary button (${BUTTON_KIND.TERTIARY})`]: BUTTON_KIND.TERTIARY,
@@ -32,153 +39,365 @@ const kinds = {
   [`Ghost button (${BUTTON_KIND.GHOST})`]: BUTTON_KIND.GHOST,
 };
 
+const types = {
+  [`Button`]: BUTTON_TYPE.BUTTON,
+  [`Reset`]: BUTTON_TYPE.RESET,
+  [`Submit`]: BUTTON_TYPE.SUBMIT,
+};
+
+const alignmentOptions = {
+  ['Start']: BUTTON_TOOLTIP_ALIGNMENT.START,
+  ['Center']: BUTTON_TOOLTIP_ALIGNMENT.CENTER,
+  ['End']: BUTTON_TOOLTIP_ALIGNMENT.END,
+};
+
+const positionOptions = {
+  ['Top']: BUTTON_TOOLTIP_POSITION.TOP,
+  ['Right']: BUTTON_TOOLTIP_POSITION.RIGHT,
+  ['Bottom']: BUTTON_TOOLTIP_POSITION.BOTTOM,
+  ['Left']: BUTTON_TOOLTIP_POSITION.LEFT,
+};
+
 const sizes = {
-  'Regular size': null,
   [`Small size (${BUTTON_SIZE.SMALL})`]: BUTTON_SIZE.SMALL,
+  [`Medium size (${BUTTON_SIZE.MEDIUM})`]: BUTTON_SIZE.MEDIUM,
+  [`Large size (${BUTTON_SIZE.LARGE})`]: BUTTON_SIZE.LARGE,
   [`XL size (${BUTTON_SIZE.EXTRA_LARGE})`]: BUTTON_SIZE.EXTRA_LARGE,
-  [`Size for form field (${BUTTON_SIZE.FIELD})`]: BUTTON_SIZE.FIELD,
-};
-
-const iconLayouts = {
-  Regular: null,
-  [`Condensed (${BUTTON_ICON_LAYOUT.CONDENSED})`]: BUTTON_ICON_LAYOUT.CONDENSED,
+  [`2XL size (${BUTTON_SIZE.EXTRA_EXTRA_LARGE})`]:
+    BUTTON_SIZE.EXTRA_EXTRA_LARGE,
 };
 
 export const Default = (args) => {
   const {
-    autofocus,
     disabled,
-    download,
     href,
-    hreflang,
-    isExpressive,
-    kind,
-    linkRole,
-    ping,
-    rel,
     size,
-    target,
+    kind,
+    isExpressive,
+    tooltipAlignment,
+    tooltipPosition,
+    tooltipText,
     type,
     onClick,
-  } = args?.['bx-btn'] ?? {};
+  } = args?.[`${prefix}-btn`] ?? {};
+
   return html`
-    <bx-btn
-      ?autofocus="${autofocus}"
+    <cds-button
+      kind="${ifDefined(kind)}"
+      type="${ifDefined(type)}"
       ?disabled="${disabled}"
-      download="${ifNonNull(download)}"
-      href="${ifNonNull(href)}"
-      hreflang="${ifNonNull(hreflang)}"
+      href="${ifDefined(href)}"
       ?isExpressive="${isExpressive}"
-      kind="${ifNonNull(kind)}"
-      link-role="${ifNonNull(linkRole)}"
-      ping="${ifNonNull(ping)}"
-      rel="${ifNonNull(rel)}"
-      size="${ifNonNull(size)}"
-      target="${ifNonNull(target)}"
-      type="${ifNonNull(type)}"
-      @click=${onClick}>
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
       Button
-    </bx-btn>
+    </cds-button>
   `;
 };
 
-Default.parameters = {
-  knobs: {
-    'bx-btn': () => ({
-      kind: select('Button kind (kind)', kinds, BUTTON_KIND.PRIMARY),
-      disabled: boolean('Disabled (disabled)', false),
-      size: select('Button size (size)', sizes, null),
-      href: textNullable('Link href (href)', ''),
-      onClick: action('click'),
-      isExpressive: boolean('expressive (isExpressive)', false),
-    }),
-  },
-};
-
-export const icon = (args) => {
-  const { kind, disabled, size, href, isExpressive, onClick } =
-    args?.['bx-btn'] ?? {};
+export const Danger = (args) => {
+  const {
+    disabled,
+    href,
+    size,
+    tooltipAlignment,
+    isExpressive,
+    tooltipPosition,
+    tooltipText,
+    type,
+    onClick,
+  } = args?.[`${prefix}-btn`] ?? {};
   return html`
-    <bx-btn
-      kind=${ifNonNull(kind)}
-      ?disabled=${disabled}
-      size=${ifNonNull(size)}
-      href=${ifNonNull(href || undefined)}
+    <cds-button
+      kind="danger"
       ?isExpressive="${isExpressive}"
-      @click=${onClick}>
-      ${Add16({ slot: 'icon' })}
-    </bx-btn>
+      type="${type}"
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      Button
+    </cds-button>
+    <cds-button
+      kind="danger--tertiary"
+      type="${type}"
+      ?isExpressive="${isExpressive}"
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      Tertiary Danger Button
+    </cds-button>
+    <cds-button
+      kind="danger--ghost"
+      ?isExpressive="${isExpressive}"
+      type="${type}"
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      Ghost Danger Button
+    </cds-button>
   `;
 };
 
-icon.parameters = Default.parameters;
-
-export const textAndIcon = (args) => {
-  const { kind, disabled, size, href, iconLayout, isExpressive, onClick } =
-    args?.['bx-btn'] ?? {};
+export const Ghost = (args) => {
+  const {
+    disabled,
+    href,
+    size,
+    isExpressive,
+    isSelected,
+    tooltipAlignment,
+    tooltipPosition,
+    tooltipText,
+    type,
+    onClick,
+  } = args?.[`${prefix}-btn`] ?? {};
   return html`
-    <bx-btn
-      kind=${ifNonNull(kind)}
-      ?disabled=${disabled}
-      icon-layout="${ifNonNull(iconLayout)}"
+    <cds-button
+      kind="ghost"
       ?isExpressive="${isExpressive}"
-      size=${ifNonNull(size)}
-      href=${ifNonNull(href || undefined)}
-      @click=${onClick}>
-      Button ${Add16({ slot: 'icon' })}
-    </bx-btn>
+      ?isSelected="${isSelected}"
+      type="${type}"
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      Ghost
+    </cds-button>
   `;
 };
 
-textAndIcon.storyName = 'Text and icon';
-
-textAndIcon.parameters = {
+Ghost.parameters = {
+  ...storyDocs.parameters,
   knobs: {
-    'bx-btn': () => ({
-      iconLayout: select('Icon layout (icon-layout)', iconLayouts, null),
-      kind: select('Button kind (kind)', kinds, BUTTON_KIND.PRIMARY),
+    [`${prefix}-btn`]: () => ({
+      kind: select('Button kind (kind)', kind, BUTTON_KIND.PRIMARY),
+      types: select('Button type (type)', types, BUTTON_TYPE.BUTTON),
+      tooltipAlignment: select(
+        'Tooltip alignment',
+        alignmentOptions,
+        BUTTON_TOOLTIP_ALIGNMENT.CENTER
+      ),
+      tooltipPosition: select(
+        'Tooltip position',
+        positionOptions,
+        BUTTON_TOOLTIP_POSITION.TOP
+      ),
+      tooltipText: text('Tooltip text', ''),
       disabled: boolean('Disabled (disabled)', false),
+      isExpressive: boolean('Expressive (is-expressive)', false),
+      isSelected: boolean('Selected (is-selected)', false),
       size: select('Button size (size)', sizes, null),
       href: textNullable('Link href (href)', ''),
       onClick: action('click'),
-      isExpressive: boolean('expressive (isExpressive)', false),
     }),
   },
 };
 
-export const skeleton = (args) => {
-  const { disabled, size, href, isExpressive, onClick } =
-    args?.['bx-btn-skeleton'];
+export const IconButton = (args) => {
+  const {
+    disabled,
+    href,
+    size,
+    kind,
+    isExpressive,
+    tooltipAlignment,
+    tooltipPosition,
+    tooltipText,
+    type,
+    onClick,
+  } = args?.[`${prefix}-btn`] ?? {};
   return html`
-    <bx-btn-skeleton
-      ?disabled=${disabled}
-      size=${ifNonNull(size)}
-      href=${ifNonNull(href || undefined)}
+    <cds-button
       ?isExpressive="${isExpressive}"
-      @click=${onClick}>
-    </bx-btn-skeleton>
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      kind="${ifDefined(kind)}"
+      type="${ifDefined(type)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      ${Add16({ slot: 'icon' })}
+    </cds-button>
   `;
 };
 
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
+IconButton.parameters = {
   knobs: {
-    'bx-btn-skeleton': () => ({
-      kind: select('Button kind (kind)', kinds, BUTTON_KIND.PRIMARY),
+    [`${prefix}-btn`]: () => ({
+      kind: select('Button kind (kind)', kind, BUTTON_KIND.PRIMARY),
+      types: select('Button type (type)', types, BUTTON_TYPE.BUTTON),
+      isExpressive: boolean('Expressive (is-expressive)', false),
+      tooltipAlignment: select(
+        'Tooltip alignment',
+        alignmentOptions,
+        BUTTON_TOOLTIP_ALIGNMENT.CENTER
+      ),
+      tooltipPosition: select(
+        'Tooltip position',
+        positionOptions,
+        BUTTON_TOOLTIP_POSITION.TOP
+      ),
+      tooltipText: text('Tooltip text', 'Icon description'),
       disabled: boolean('Disabled (disabled)', false),
       size: select('Button size (size)', sizes, null),
       href: textNullable('Link href (href)', ''),
       onClick: action('click'),
-      isExpressive: boolean('expressive (isExpressive)', false),
     }),
   },
 };
 
+export const Secondary = (args) => {
+  const {
+    disabled,
+    href,
+    size,
+    isExpressive,
+    tooltipAlignment,
+    tooltipPosition,
+    tooltipText,
+    type,
+    onClick,
+  } = args?.[`${prefix}-btn`] ?? {};
+  return html`
+    <cds-button
+      kind="secondary"
+      ?isExpressive="${isExpressive}"
+      type="${ifDefined(type)}"
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      Button
+    </cds-button>
+  `;
+};
+
+export const SetOfButtons = (args) => {
+  const {
+    disabled,
+    href,
+    size,
+    isExpressive,
+    tooltipAlignment,
+    tooltipPosition,
+    tooltipText,
+    type,
+    onClick,
+  } = args?.[`${prefix}-btn`] ?? {};
+  return html`
+    <cds-button-set>
+      <cds-button
+        ?isExpressive="${isExpressive}"
+        type="${ifDefined(type)}"
+        ?disabled="${disabled}"
+        href="${ifDefined(href)}"
+        size="${ifDefined(size)}"
+        @click=${onClick}
+        tooltip-text="${tooltipText}"
+        tooltip-alignment="${tooltipAlignment}"
+        tooltip-position="${tooltipPosition}">
+        Secondary button
+      </cds-button>
+      <cds-button
+        ?isExpressive="${isExpressive}"
+        type="${ifDefined(type)}"
+        ?disabled="${disabled}"
+        href="${ifDefined(href)}"
+        size="${ifDefined(size)}"
+        @click=${onClick}
+        tooltip-text="${tooltipText}"
+        tooltip-alignment="${tooltipAlignment}"
+        tooltip-position="${tooltipPosition}">
+        Primary button
+      </cds-button>
+    </cds-button-set>
+  `;
+};
+
+export const skeleton = () => {
+  return html`
+    <cds-button-skeleton> </cds-button-skeleton>
+    <cds-button-skeleton size="sm"></cds-button-skeleton>
+  `;
+};
+
+export const Tertiary = (args) => {
+  const {
+    disabled,
+    href,
+    size,
+    tooltipAlignment,
+    isExpressive,
+    tooltipPosition,
+    tooltipText,
+    type,
+    onClick,
+  } = args?.[`${prefix}-btn`] ?? {};
+  return html`
+    <cds-button
+      ?isExpressive="${isExpressive}"
+      kind="tertiary"
+      type="${ifDefined(type)}"
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      @click=${onClick}
+      tooltip-text="${tooltipText}"
+      tooltip-alignment="${tooltipAlignment}"
+      tooltip-position="${tooltipPosition}">
+      Button
+    </cds-button>
+  `;
+};
+
 export default {
   title: 'Components/Button',
   parameters: {
     ...storyDocs.parameters,
+    knobs: {
+      [`${prefix}-btn`]: () => ({
+        kind: select('Button kind (kind)', kind, BUTTON_KIND.PRIMARY),
+        types: select('Button type (type)', types, BUTTON_TYPE.BUTTON),
+        tooltipAlignment: select(
+          'Tooltip alignment',
+          alignmentOptions,
+          BUTTON_TOOLTIP_ALIGNMENT.CENTER
+        ),
+        tooltipPosition: select(
+          'Tooltip position',
+          positionOptions,
+          BUTTON_TOOLTIP_POSITION.TOP
+        ),
+        tooltipText: text('Tooltip text', ''),
+        disabled: boolean('Disabled (disabled)', false),
+        isExpressive: boolean('Expressive (is-expressive)', false),
+        size: select('Button size (size)', sizes, null),
+        href: textNullable('Link href (href)', ''),
+        onClick: action('click'),
+      }),
+    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/button/button.scss b/packages/carbon-web-components/src/components/button/button.scss
index ee5a9d7a946..813cea4c1df 100644
--- a/packages/carbon-web-components/src/components/button/button.scss
+++ b/packages/carbon-web-components/src/components/button/button.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,53 +7,111 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button' as *;
+@use '@carbon/styles/scss/components/popover/index';
+@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
+@use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/layout' as *;
 
-:host(#{$prefix}-btn),
+@include code-snippet;
+
+:host(#{$prefix}-button),
 :host(#{$prefix}-modal-footer-button) {
+  @include emit-layout-tokens();
+
   display: inline-flex;
-  max-width: rem(320px);
-  outline: none;
+
+  ::slotted([slot='icon']) {
+    @extend .#{$prefix}--btn__icon;
+  }
 
   .#{$prefix}--btn {
     flex-grow: 1;
     max-width: 100%;
   }
+}
 
-  ::slotted([slot='icon']) {
-    fill: currentColor;
-    position: absolute;
-    right: rem(16px);
-    flex-shrink: 0;
-  }
+:host(#{$prefix}-button-skeleton) {
+  @include emit-layout-tokens();
+}
+
+:host(#{$prefix}-button[isExpressive]) ::slotted([slot='icon']),
+:host(#{$prefix}-modal-footer-button[isExpressive]) ::slotted([slot='icon']) {
+  width: rem(20px);
+  height: rem(20px);
+}
 
-  &[isExpressive] ::slotted([slot='icon']) {
-    width: rem(20px);
-    height: rem(20px);
+:host(#{$prefix}-button[pagination]),
+:host(#{$prefix}-modal-footer-button[pagination]) {
+  .#{$prefix}--btn {
+    border: none;
+    border-left: 1px solid $border-subtle;
+    transition: none;
+
+    &:focus {
+      outline: $spacing-01 solid $focus;
+      outline-offset: -#{$spacing-01};
+      box-shadow: none;
+      border-left: 1px solid transparent;
+    }
   }
+}
 
-  &[icon-layout='condensed'] .#{$prefix}--btn {
-    padding-right: rem(39px);
+:host(#{$prefix}-button[pagination]:not([disabled])),
+:host(#{$prefix}-modal-footer-button[pagination]:not([disabled])) {
+  .#{$prefix}--btn {
+    color: $icon-primary;
+    &:active {
+      background-color: $layer-hover;
+    }
   }
+}
 
-  .#{$prefix}--btn--icon-only ::slotted([slot='icon']) {
-    position: static;
+:host(#{$prefix}-button[pagination][batch-action]:not([disabled])),
+:host(
+    #{$prefix}-modal-footer-button[pagination][batch-action]:not([disabled])
+  ) {
+  .#{$prefix}--btn {
+    padding: $button-padding-ghost;
+
+    &:focus {
+      outline: $spacing-01 solid $layer;
+      outline-offset: -#{$spacing-01};
+    }
   }
 
-  &[kind='ghost'],
-  &[kind='danger-ghost'] {
+  :host(#{$prefix}-button[pagination][has-main-content]:not([disabled])),
+  :host(
+      #{$prefix}-modal-footer-button[pagination][has-main-content]:not(
+          [disabled]
+        )
+    ) {
     ::slotted([slot='icon']) {
       position: static;
-      margin-left: rem(8px);
-    }
-
-    &[icon-layout='condensed'] .#{$prefix}--btn {
-      padding-right: rem(16px);
+      margin-left: $spacing-02;
     }
   }
 }
 
-:host(#{$prefix}-btn[kind='ghost']:hover) .#{$prefix}--btn--ghost,
-:host(#{$prefix}-btn[kind='ghost']) .#{$prefix}--btn--ghost:active {
+:host(#{$prefix}-button[kind='ghost']:hover) .#{$prefix}--btn--ghost,
+:host(#{$prefix}-button[kind='ghost']) .#{$prefix}--btn--ghost:active {
   outline: none;
 }
+
+:host(#{$prefix}-button-set) {
+  @extend .#{$prefix}--btn-set;
+
+  ::slotted(#{$prefix}-button) {
+    width: 100%;
+    // 196px from design kit
+    max-width: rem(196px);
+  }
+}
+
+:host(#{$prefix}-button-set[stacked]) {
+  @extend .#{$prefix}--btn-set--stacked;
+}
diff --git a/packages/carbon-web-components/src/components/button/button.ts b/packages/carbon-web-components/src/components/button/button.ts
index ce03a3f106c..e8158c7b705 100644
--- a/packages/carbon-web-components/src/components/button/button.ts
+++ b/packages/carbon-web-components/src/components/button/button.ts
@@ -7,39 +7,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT } from './defs';
+import {
+  BUTTON_KIND,
+  BUTTON_TYPE,
+  BUTTON_SIZE,
+  BUTTON_TOOLTIP_ALIGNMENT,
+  BUTTON_TOOLTIP_POSITION,
+} from './defs';
 import styles from './button.scss';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { BUTTON_KIND, BUTTON_SIZE, BUTTON_ICON_LAYOUT };
-
-const { prefix } = settings;
+export {
+  BUTTON_KIND,
+  BUTTON_TYPE,
+  BUTTON_SIZE,
+  BUTTON_TOOLTIP_ALIGNMENT,
+  BUTTON_TOOLTIP_POSITION,
+};
 
 /**
  * Button.
  *
- * @element bx-btn
+ * @element cds-button
  * @csspart button The button.
  */
-@customElement(`${prefix}-btn`)
-class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
+@customElement(`${prefix}-button`)
+class CDSButton extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * `true` if there is an icon.
    */
   private _hasIcon = false;
 
-  /**
-   * `true` if there is a non-icon content.
-   */
-  private _hasMainContent = false;
-
   /**
    * Handles `slotchange` event.
    */
@@ -50,7 +56,7 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
       .some(
         (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
       );
-    this[name === 'icon' ? '_hasIcon' : '_hasMainContent'] = hasContent;
+    this[name === 'icon' ? '_hasIcon' : 'hasMainContent'] = hasContent;
     this.requestUpdate();
   }
 
@@ -63,12 +69,65 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
     }
   }
 
+  @HostListener('mouseover')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleOver = () => {
+    this.openTooltip = true;
+  };
+
+  /**
+   * Handles `keydown` event on this element.
+   */
+  @HostListener('mouseout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleHoverOut = async () => {
+    this.openTooltip = false;
+  };
+
+  /**
+   * Handles `keydown` event on this element.
+   * Space & enter will toggle state, Escape will only close.
+   */
+  @HostListener('focus')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleFocus = async () => {
+    this.openTooltip = true;
+  };
+
+  /**
+   * Handles `keydown` event on this element.
+   * Space & enter will toggle state, Escape will only close.
+   */
+  @HostListener('focusout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleFocusout = async () => {
+    this.openTooltip = false;
+  };
+
   /**
    * `true` if the button should have input focus when the page loads.
    */
   @property({ type: Boolean, reflect: true })
   autofocus = false;
 
+  /**
+   * `true` if the button is being used within a data table batch action toolbar
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'batch-action' })
+  batchAction = false;
+
+  /**
+   * Specify an optional className to be added to your Button
+   */
+  @property({ reflect: true, attribute: 'button-class-name' })
+  buttonClassName;
+
+  /**
+   * Specify the message read by screen readers for the danger button variant
+   */
+  @property({ reflect: true, attribute: 'danger-descriptor' })
+  dangerDescriptor;
+
   /**
    * `true` if the button should be disabled.
    */
@@ -81,6 +140,12 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ reflect: true })
   download!: string;
 
+  /**
+   * `true` if there is a non-icon content.
+   */
+  @property({ reflect: true, attribute: 'has-main-content', type: Boolean })
+  hasMainContent = false;
+
   /**
    * Link `href`. If present, this button is rendered as `<a>`.
    */
@@ -94,16 +159,17 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
   hreflang!: string;
 
   /**
-   * Button icon layout.
+   * `true` if expressive theme enabled.
    */
-  @property({ reflect: true, attribute: 'icon-layout' })
-  iconLayout = BUTTON_ICON_LAYOUT.REGULAR;
+  @property({ type: Boolean, reflect: true })
+  isExpressive = false;
 
   /**
-   * `true` if expressive theme enabled.
+   * Specify whether the Button is currently selected.
+   * Only applies to the Ghost variant.
    */
   @property({ type: Boolean, reflect: true })
-  isExpressive = false;
+  isSelected = false;
 
   /**
    * Button kind.
@@ -117,6 +183,12 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ attribute: 'link-role' })
   linkRole = 'button';
 
+  /**
+   * Boolean to determine if tooltip is open.
+   */
+  @property({ type: Boolean })
+  openTooltip = false;
+
   /**
    * URLs to ping, if this button is rendered as `<a>`.
    */
@@ -133,7 +205,7 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
    * Button size.
    */
   @property({ reflect: true })
-  size = BUTTON_SIZE.REGULAR;
+  size = 'lg';
 
   /**
    * The link target, if this button is rendered as `<a>`.
@@ -142,50 +214,82 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
   target!: string;
 
   /**
-   * The default behavior if the button is rendered as `<button>`. MIME type of the `target`if this button is rendered as `<a>`.
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  @property({ reflect: true, attribute: 'tooltip-alignment' })
+  tooltipAlignment = BUTTON_TOOLTIP_ALIGNMENT.CENTER;
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  @property({ reflect: true, attribute: 'tooltip-position' })
+  tooltipPosition = BUTTON_TOOLTIP_POSITION.TOP;
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  @property({ reflect: true, attribute: 'tooltip-text' })
+  tooltipText!: string;
+
+  /**
+   * Button type.
    */
   @property({ reflect: true })
-  type!: string;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  type = BUTTON_TYPE.BUTTON;
 
   render() {
     const {
       autofocus,
+      buttonClassName,
+      dangerDescriptor,
       disabled,
       download,
       href,
       hreflang,
+      kind,
       isExpressive,
+      isSelected,
       linkRole,
-      kind,
+      openTooltip,
       ping,
       rel,
       size,
       target,
+      tooltipAlignment,
+      tooltipPosition,
+      tooltipText,
       type,
       _hasIcon: hasIcon,
-      _hasMainContent: hasMainContent,
+      hasMainContent,
       _handleSlotChange: handleSlotChange,
     } = this;
-    const classes = classMap({
+
+    let defaultClasses = {
       [`${prefix}--btn`]: true,
       [`${prefix}--btn--${kind}`]: kind,
       [`${prefix}--btn--disabled`]: disabled,
       [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,
-      [`${prefix}--btn--sm`]: size === 'sm' && !isExpressive,
-      [`${prefix}--btn--xl`]: size === 'xl',
-      [`${prefix}--btn--field`]: size === 'field' && !isExpressive,
+      [`${prefix}--btn--${size}`]: size,
+      [`${prefix}--layout--size-${size}`]: size,
       [`${prefix}-ce--btn--has-icon`]: hasIcon,
       [`${prefix}--btn--expressive`]: isExpressive,
-    });
+      [`${prefix}--btn--selected`]: isSelected && kind === 'ghost',
+    };
+
+    if (buttonClassName) {
+      const outputObject = {};
+      buttonClassName?.split(' ').forEach((element) => {
+        outputObject[element] = true;
+      });
+      defaultClasses = { ...defaultClasses, ...outputObject };
+    }
+    const classes = classMap(defaultClasses);
+
+    const isDanger = kind.includes('danger');
+
     if (href) {
       return disabled
         ? html`
@@ -198,35 +302,85 @@ class BXButton extends HostListenerMixin(FocusMixin(LitElement)) {
             <a
               id="button"
               part="button"
-              role="${ifNonNull(linkRole)}"
+              role="${ifDefined(linkRole)}"
               class="${classes}"
-              download="${ifNonNull(download)}"
-              href="${ifNonNull(href)}"
-              hreflang="${ifNonNull(hreflang)}"
-              ping="${ifNonNull(ping)}"
-              rel="${ifNonNull(rel)}"
-              target="${ifNonNull(target)}"
-              type="${ifNonNull(type)}">
+              download="${ifDefined(download)}"
+              href="${ifDefined(href)}"
+              hreflang="${ifDefined(hreflang)}"
+              ping="${ifDefined(ping)}"
+              rel="${ifDefined(rel)}"
+              target="${ifDefined(target)}"
+              type="${ifDefined(type)}">
               <slot @slotchange="${handleSlotChange}"></slot>
               <slot name="icon" @slotchange="${handleSlotChange}"></slot>
             </a>
           `;
     }
-    return html`
-      <button
-        id="button"
-        part="button"
-        class="${classes}"
-        ?autofocus="${autofocus}"
-        ?disabled="${disabled}"
-        type="${ifNonNull(type)}">
-        <slot @slotchange="${handleSlotChange}"></slot>
-        <slot name="icon" @slotchange="${handleSlotChange}"></slot>
-      </button>
-    `;
+
+    const alignmentClass =
+      tooltipAlignment &&
+      (tooltipPosition === BUTTON_TOOLTIP_POSITION.TOP ||
+        tooltipPosition === BUTTON_TOOLTIP_POSITION.BOTTOM)
+        ? `-${tooltipAlignment}`
+        : '';
+
+    const tooltipClasses = classMap({
+      [`${prefix}--popover-container`]: true,
+      [`${prefix}--popover--caret`]: true,
+      [`${prefix}--popover--high-contrast`]: true,
+      [`${prefix}--tooltip`]: true,
+      [`${prefix}--icon-tooltip`]: hasIcon,
+      [`${prefix}--popover--open`]: openTooltip,
+      [`${prefix}--popover--${tooltipPosition}${alignmentClass}`]: tooltipText,
+    });
+
+    return tooltipText && !disabled
+      ? html`
+          <span class="${tooltipClasses}">
+            <button
+              id="button"
+              part="button"
+              class="${classes}"
+              ?autofocus="${autofocus}"
+              ?disabled="${disabled}"
+              type="${ifDefined(type)}"
+              aria-label="${ifDefined(tooltipText)}">
+              <slot @slotchange="${handleSlotChange}"></slot>
+              <slot name="icon" @slotchange="${handleSlotChange}"></slot>
+            </button>
+            <span class="${prefix}--popover">
+              <span
+                class="${prefix}--popover-content ${prefix}--tooltip-content">
+                ${tooltipText}
+              </span>
+              <span class="${prefix}--popover-caret"></span>
+            </span>
+          </span>
+        `
+      : html`
+          <button
+            id="button"
+            part="button"
+            class="${classes}"
+            ?autofocus="${autofocus}"
+            ?disabled="${disabled}"
+            type="${ifDefined(type)}">
+            ${isDanger
+              ? html`<span class="${prefix}--visually-hidden"
+                  >${dangerDescriptor}</span
+                >`
+              : ``}
+            <slot @slotchange="${handleSlotChange}"></slot>
+            <slot name="icon" @slotchange="${handleSlotChange}"></slot>
+          </button>
+        `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXButton;
+export default CDSButton;
diff --git a/packages/carbon-web-components/src/components/button/defs.ts b/packages/carbon-web-components/src/components/button/defs.ts
index 1bebd0ac5d0..e035f19bf33 100644
--- a/packages/carbon-web-components/src/components/button/defs.ts
+++ b/packages/carbon-web-components/src/components/button/defs.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
  */
 
 /**
- * Button kinds.
+ * Button kind.
  */
 export enum BUTTON_KIND {
   /**
@@ -36,6 +36,11 @@ export enum BUTTON_KIND {
    */
   DANGER = 'danger',
 
+  /**
+   * Danger primary button.
+   */
+  DANGER_PRIMARY = 'danger-primary',
+
   /**
    * Danger tertiary button.
    */
@@ -48,41 +53,96 @@ export enum BUTTON_KIND {
 }
 
 /**
- * Button size.
+ * Button type.
  */
-export enum BUTTON_SIZE {
+export enum BUTTON_TYPE {
+  /**
+   * Default button type.
+   */
+  BUTTON = 'button',
+
+  /**
+   * Reset button type.
+   */
+  RESET = 'reset',
+
   /**
-   * Regular size.
+   * Submit button type.
    */
-  REGULAR = '',
+  SUBMIT = 'submit',
+}
 
+/**
+ * Button size.
+ */
+export enum BUTTON_SIZE {
   /**
    * Small size.
    */
   SMALL = 'sm',
 
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+
   /**
    * X-Large size.
    */
   EXTRA_LARGE = 'xl',
 
   /**
-   * Size for form field.
+   * 2X-Large size.
+   */
+  EXTRA_EXTRA_LARGE = '2xl',
+}
+
+/**
+ * Button tooltip alignment.
+ */
+export enum BUTTON_TOOLTIP_ALIGNMENT {
+  /**
+   * Aligned to the start.
+   */
+  START = 'left',
+
+  /**
+   * Aligned to the center.
    */
-  FIELD = 'field',
+  CENTER = '',
+
+  /**
+   * Aligned to the end.
+   */
+  END = 'right',
 }
 
 /**
- * Button icon layout.
+ * Button tooltip position.
  */
-export enum BUTTON_ICON_LAYOUT {
+export enum BUTTON_TOOLTIP_POSITION {
+  /**
+   * Positioned on the top.
+   */
+  TOP = 'top',
+
+  /**
+   * Positioned on the right.
+   */
+  RIGHT = 'right',
+
   /**
-   * Regular layout.
+   * Positioned on the bottom.
    */
-  REGULAR = '',
+  BOTTOM = 'bottom',
 
   /**
-   * Condensed layout.
+   * Positined on the left.
    */
-  CONDENSED = 'condensed',
+  LEFT = 'left',
 }
diff --git a/packages/carbon-web-components/src/components/button/index.ts b/packages/carbon-web-components/src/components/button/index.ts
index 6711c4ea288..0b96983d47a 100644
--- a/packages/carbon-web-components/src/components/button/index.ts
+++ b/packages/carbon-web-components/src/components/button/index.ts
@@ -1,11 +1,12 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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 './button';
+import './button-set';
 import './button-skeleton';
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts
new file mode 100644
index 00000000000..8a5d27a01a9
--- /dev/null
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox-skeleton.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './checkbox.scss';
+
+/**
+ * Skeleton of number input.
+ */
+@customElement(`${prefix}-checkbox-skeleton`)
+class CDSCheckboxSkeleton extends LitElement {
+  render() {
+    return html`
+      <label class="${prefix}--checkbox-label" for="checkbox" part="label">
+        <span class="${prefix}--checkbox-label-text ${prefix}--skeleton"
+          ><slot></slot
+        ></span>
+      </label>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSCheckboxSkeleton;
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx b/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
index ff065ef806b..4938f3cf1ed 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Check box
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/checkbox)
 
 Check box in `carbon-web-components` represents a combination of a check box and
 its label.
@@ -28,16 +28,16 @@ import '@carbon/web-components/es/components/checkbox/index.js';
 ### HTML
 
 ```html
-<bx-checkbox label-text="Lorem Ipsum"></bx-checkbox>
+<cds-checkbox label-text="Lorem Ipsum"></cds-checkbox>
 ```
 
-## `<bx-checkbox>` attributes, properties and events
+## `<cds-checkbox>` attributes, properties and events
 
-Unlike regular checkbox, `<bx-checkbox>` does _not_ fire `change` event. Please
-use `bx-checkbox-changed` event instead.
+Unlike regular checkbox, `<cds-checkbox>` does _not_ fire `change` event. Please
+use `cds-checkbox-changed` event instead.
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-checkbox checked>`) and `false` means not setting the attribute (e.g.
-`<bx-checkbox>` without `checked` attribute).
+`<cds-checkbox checked>`) and `false` means not setting the attribute (e.g.
+`<cds-checkbox>` without `checked` attribute).
 
-<Props of="bx-checkbox" />
+<Props of="cds-checkbox" />
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
index 9ca19676f94..efd804a1e04 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox-story.ts
@@ -1,61 +1,97 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean } from '@storybook/addon-knobs';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import './checkbox';
+import './index';
 import storyDocs from './checkbox-story.mdx';
 
-export const Default = (args) => {
+const checkboxLabel = 'Checkbox label';
+
+export const Default = () => {
+  return html`
+    <fieldset class="${prefix}--fieldset">
+      <legend class="${prefix}--label">Group label</legend>
+      <cds-checkbox label-text="${checkboxLabel}"></cds-checkbox>
+      <cds-checkbox label-text="${checkboxLabel}"></cds-checkbox>
+    </fieldset>
+  `;
+};
+
+Default.storyName = 'Default';
+
+export const Skeleton = () => {
+  return html`
+    <fieldset class="${prefix}--fieldset">
+      <cds-checkbox-skeleton
+        label-text="${checkboxLabel}"></cds-checkbox-skeleton>
+    </fieldset>
+  `;
+};
+
+export const Playground = (args) => {
   const {
     checked,
     disabled,
     hideLabel,
     indeterminate,
-    labelText,
-    name,
-    value,
+    labelText = checkboxLabel,
+    readonly,
+    title,
     onChange,
-  } = args?.['bx-checkbox'] ?? {};
+  } = args?.[`${prefix}-checkbox`] ?? {};
   return html`
-    <bx-checkbox
-      ?checked="${checked}"
-      ?disabled="${disabled}"
-      ?hide-label="${hideLabel}"
-      ?indeterminate="${indeterminate}"
-      label-text="${ifNonNull(labelText)}"
-      name="${ifNonNull(name)}"
-      value="${ifNonNull(value)}"
-      @bx-checkbox-changed="${onChange}"></bx-checkbox>
+    <fieldset class="${prefix}--fieldset">
+      <legend class="${prefix}--label">Group label</legend>
+      <cds-checkbox
+        ?checked="${checked}"
+        ?disabled="${disabled}"
+        ?hide-label="${hideLabel}"
+        ?indeterminate="${indeterminate}"
+        label-text="${ifDefined(labelText)}"
+        ?readonly="${readonly}"
+        title="${ifDefined(title)}"
+        @cds-checkbox-changed="${onChange}"></cds-checkbox>
+      <cds-checkbox
+        ?checked="${checked}"
+        ?disabled="${disabled}"
+        ?hide-label="${hideLabel}"
+        ?indeterminate="${indeterminate}"
+        label-text="${ifDefined(labelText)}"
+        ?readonly="${readonly}"
+        title="${ifDefined(title)}"
+        @cds-checkbox-changed="${onChange}"></cds-checkbox>
+    </fieldset>
   `;
 };
 
-Default.storyName = 'Default';
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-checkbox`]: () => ({
+      checked: boolean('Checked (checked)', false),
+      disabled: boolean('Disabled (disabled)', false),
+      hideLabel: boolean('Hide label (hide-label)', false),
+      indeterminate: boolean('Indeterminate (indeterminate)', false),
+      readonly: boolean('Read only (readonly)', false),
+      title: textNullable('Title (title)', ''),
+      onChange: action(`${prefix}-checkbox-changed`),
+    }),
+  },
+};
 
 export default {
   title: 'Components/Checkbox',
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-checkbox': () => ({
-        checked: boolean('Checked (checked)', false),
-        disabled: boolean('Disabled (disabled)', false),
-        hideLabel: boolean('Hide label (hide-label)', false),
-        indeterminate: boolean('Indeterminate state (indeterminate)', false),
-        labelText: textNullable('Label text (label-text)', 'Checkbox'),
-        name: textNullable('Name (name)', ''),
-        value: textNullable('Value (value)', ''),
-        onChange: action('bx-checkbox-changed'),
-      }),
-    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.scss b/packages/carbon-web-components/src/components/checkbox/checkbox.scss
index 69663858b22..0d24a158255 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox.scss
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox.scss
@@ -7,14 +7,38 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/checkbox/checkbox';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/checkbox';
 
 :host(#{$prefix}-checkbox) {
   @extend .#{$prefix}--form-item;
   @extend .#{$prefix}--checkbox-wrapper;
+}
+
+:host(#{$prefix}-checkbox[readonly]) {
+  @extend .#{$prefix}--checkbox-wrapper--readonly;
+}
+
+:host(#{$prefix}-checkbox[data-table]) {
+  margin: 0;
+}
+
+:host(#{$prefix}-checkbox[data-table][hide-checkbox]) {
+  pointer-events: none;
+
+  .#{$prefix}--checkbox-label::before,
+  .#{$prefix}--checkbox-label::after {
+    background-color: transparent;
+    border-color: transparent;
+  }
+}
 
-  position: relative;
-  outline: none;
+:host(#{$prefix}-checkbox-skeleton) {
+  .#{$prefix}--checkbox-label {
+    cursor: default;
+  }
 }
diff --git a/packages/carbon-web-components/src/components/checkbox/checkbox.ts b/packages/carbon-web-components/src/components/checkbox/checkbox.ts
index 6b37a838553..7be15b608fc 100644
--- a/packages/carbon-web-components/src/components/checkbox/checkbox.ts
+++ b/packages/carbon-web-components/src/components/checkbox/checkbox.ts
@@ -7,27 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
 import styles from './checkbox.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Check box.
  *
- * @element bx-checkbox
- * @fires bx-checkbox-changed - The custom event fired after this changebox changes its checked state.
+ * @element cds-checkbox
+ * @fires cds-checkbox-changed - The custom event fired after this changebox changes its checked state.
  * @csspart input The checkbox.
  * @csspart label The label.
  */
 @customElement(`${prefix}-checkbox`)
-class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
+class CDSCheckbox extends FocusMixin(FormMixin(LitElement)) {
   @query('input')
   protected _checkboxNode!: HTMLInputElement;
 
@@ -38,18 +37,28 @@ class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
     const { checked, indeterminate } = this._checkboxNode;
     this.checked = checked;
     this.indeterminate = indeterminate;
-    const { eventChange } = this.constructor as typeof BXCheckbox;
+    const { eventChange } = this.constructor as typeof CDSCheckbox;
     this.dispatchEvent(
       new CustomEvent(eventChange, {
         bubbles: true,
         composed: true,
         detail: {
+          checked,
           indeterminate,
         },
       })
     );
   }
 
+  /**
+   * Prevent checkbox state from updating when readonly
+   */
+  private _handleClick(event: MouseEvent) {
+    if (this.readonly) {
+      event.preventDefault();
+    }
+  }
+
   _handleFormdata(event: Event) {
     const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
     const { checked, disabled, name, value = 'on' } = this;
@@ -59,31 +68,45 @@ class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
   }
 
   /**
-   * `true` if the check box should be checked.
+   * Specify whether the underlying input should be checked
    */
-  @property({ type: Boolean, reflect: true })
+  @property({ type: Boolean, reflect: true, attribute: 'checked' })
   checked = false;
 
   /**
-   * `true` if the check box should be disabled.
+   * Specify if checkbox is being used in a data table
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'data-table' })
+  dataTable = false;
+
+  /**
+   * Specify whether the Checkbox should be disabled
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
   /**
-   * `true` if the label should be hidden.
+   * Specify whether the checkbox should be present in the DOM,
+   * but invisible and uninteractable. Used for data-table purposes.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-checkbox' })
+  hideCheckbox = false;
+
+  /**
+   * Specify whether the label should be hidden, or not
    */
   @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
   hideLabel = false;
 
   /**
-   * `true` if the check box should show its UI of the indeterminate state.
+   * Specify whether the Checkbox is in an indeterminate state
    */
   @property({ type: Boolean, reflect: true })
   indeterminate = false;
 
   /**
-   * The label text.
+   * Provide a label to provide a description of the Checkbox input that you are
+   * exposing to the user
    */
   @property({ attribute: 'label-text' })
   labelText = '';
@@ -94,21 +117,24 @@ class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
   @property()
   name!: string;
 
+  /**
+   * Specify whether the Checkbox is read-only
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  /**
+   * Specify a title for the node for the Checkbox
+   */
+  @property({ attribute: 'title' })
+  title = '';
+
   /**
    * The value.
    */
   @property()
   value!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const {
       checked,
@@ -117,11 +143,17 @@ class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
       indeterminate,
       labelText,
       name,
+      readonly,
+      title,
       value,
       _handleChange: handleChange,
+      _handleClick: handleClick,
     } = this;
     const labelClasses = classMap({
       [`${prefix}--checkbox-label`]: true,
+    });
+    const labelTextClasses = classMap({
+      [`${prefix}--checkbox-label-text`]: true,
       [`${prefix}--visually-hidden`]: hideLabel,
     });
     return html`
@@ -131,16 +163,20 @@ class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
         part="input"
         class="${`${prefix}--checkbox`}"
         aria-checked="${indeterminate ? 'mixed' : String(Boolean(checked))}"
+        aria-readonly="${String(Boolean(readonly))}"
         .checked="${checked}"
         ?disabled="${disabled}"
         .indeterminate="${indeterminate}"
-        name="${ifNonNull(name)}"
-        value="${ifNonNull(value)}"
-        @change="${handleChange}" />
-      <label for="checkbox" part="label" class="${labelClasses}">
-        <span class="${prefix}--checkbox-label-text"
-          ><slot>${labelText}</slot></span
-        >
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
+        @change="${handleChange}"
+        @click="${handleClick}" />
+      <label
+        for="checkbox"
+        part="label"
+        class="${labelClasses}"
+        title="${ifDefined(title)}">
+        <span class="${labelTextClasses}"><slot>${labelText}</slot></span>
       </label>
     `;
   }
@@ -152,7 +188,11 @@ class BXCheckbox extends FocusMixin(FormMixin(LitElement)) {
     return `${prefix}-checkbox-changed`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXCheckbox;
+export default CDSCheckbox;
diff --git a/packages/carbon-web-components/src/components/checkbox/index.ts b/packages/carbon-web-components/src/components/checkbox/index.ts
index 72da99e20ce..22a69bf6a41 100644
--- a/packages/carbon-web-components/src/components/checkbox/index.ts
+++ b/packages/carbon-web-components/src/components/checkbox/index.ts
@@ -1,10 +1,11 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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 './checkbox';
+import './checkbox-skeleton';
diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts
index c5598a11e6c..8e4b639463d 100644
--- a/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts
+++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet-skeleton.ts
@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { CODE_SNIPPET_TYPE } from './code-snippet';
 import styles from './code-snippet.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of code snippet.
  */
 @customElement(`${prefix}-code-snippet-skeleton`)
-class BXCodeSnippetSkeleton extends LitElement {
+class CDSCodeSnippetSkeleton extends LitElement {
   /**
    * The type of code snippet. Corresponds to the attribute with the same name.
    */
@@ -39,4 +38,4 @@ class BXCodeSnippetSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXCodeSnippetSkeleton;
+export default CDSCodeSnippetSkeleton;
diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
index b98a57357dc..fc6fa250f2a 100644
--- a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
+++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Code snippet
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/code-snippet)
 
 Code snippets are small blocks of reusable code that can be inserted in a code
 file.
@@ -28,12 +28,12 @@ import '@carbon/web-components/es/components/code-snippet/index.js';
 ### HTML
 
 ```html
-<bx-code-snippet>
+<cds-code-snippet>
   node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
   veritatis voluptate id incidunt molestiae officia possimus, quasi itaque
   alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
   laboriosam!
-</bx-code-snippet>
+</cds-code-snippet>
 ```
 
 ## Single line
@@ -41,12 +41,12 @@ import '@carbon/web-components/es/components/code-snippet/index.js';
 The Terminal style is for single-line.
 
 ```html
-<bx-code-snippet>
+<cds-code-snippet>
   node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
   veritatis voluptate id incidunt molestiae officia possimus, quasi itaque
   alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
   laboriosam!
-</bx-code-snippet>
+</cds-code-snippet>
 ```
 
 ## Multi line
@@ -54,12 +54,12 @@ The Terminal style is for single-line.
 The Code style is for larger, multi-line code snippets.
 
 ```html
-<bx-code-snippet type="multi">
+<cds-code-snippet type="multi">
   node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis,
   veritatis voluptate id incidunt molestiae officia possimus, quasi itaque
   alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
   laboriosam!
-</bx-code-snippet>
+</cds-code-snippet>
 ```
 
 ## Inline
@@ -67,17 +67,17 @@ The Code style is for larger, multi-line code snippets.
 The Inline style is for code used within a block of text.
 
 ```html
-<bx-code-snippet type="inline"> node -v </bx-code-snippet>
+<cds-code-snippet type="inline"> node -v </cds-code-snippet>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-code-snippet-skeleton>`.
+For the skeleton variation, utilize `<cds-code-snippet-skeleton>`.
 
 ```html
-<bx-code-snippet-skeleton type="single"></bx-code-snippet-skeleton>
+<cds-code-snippet-skeleton type="single"></cds-code-snippet-skeleton>
 ```
 
-## `<bx-code-snippet>` attributes and properties
+## `<cds-code-snippet>` attributes and properties
 
-<Props of="bx-code-snippet" />
+<Props of="cds-code-snippet" />
diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts
index eda4420b5a9..fa46f8d44b2 100644
--- a/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts
+++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet-story.ts
@@ -1,199 +1,208 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
-import { number, select } from '@storybook/addon-knobs';
+import { html } from 'lit';
+import { number, boolean } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { CODE_SNIPPET_COLOR_SCHEME } from './code-snippet';
 import storyDocs from './code-snippet-story.mdx';
-import './code-snippet-skeleton';
+import './index';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${CODE_SNIPPET_COLOR_SCHEME.LIGHT})`]:
-    CODE_SNIPPET_COLOR_SCHEME.LIGHT,
-};
-
-const defaultKnobs = {
-  'bx-code-snippet': () => ({
-    codeAssistiveText: textNullable(
-      'Assistive text for the code portion (code-assistive-text)',
-      ''
-    ),
-    copyButtonAssistiveText: textNullable(
-      'Assistive text for the copy button (copy-button-assistive-text)',
-      ''
-    ),
-    copyButtonFeedbackText: textNullable(
-      'Feedback text for copy button (copy-button-feedback-text)',
-      ''
-    ),
-    copyButtonFeedbackTimeout: number(
-      'Feedback timeout for copy button (copy-buttobn-feedback-timeout)',
-      2000
-    ),
-    colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
-    onClick: action('click'),
-  }),
-};
-
-export const singleLine = (args) => {
-  const {
-    codeAssistiveText,
-    copyButtonAssistiveText,
-    copyButtonFeedbackText,
-    copyButtonFeedbackTimeout,
-    colorScheme,
-    onClick,
-  } = args?.['bx-code-snippet'] ?? {};
-  const children = `
-    node -v Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis, veritatis voluptate id incidunt molestiae
-    officia possimus, quasi itaque alias, architecto hic, dicta fugit? Debitis delectus quidem explicabo vitae
-    laboriosam!
-  `;
+export const inline = () => {
   return html`
-    <bx-code-snippet
-      code-assistive-text="${ifNonNull(codeAssistiveText)}"
-      copy-button-assistive-text="${ifNonNull(copyButtonAssistiveText)}"
-      copy-button-feedback-text="${ifNonNull(copyButtonFeedbackText)}"
-      copy-button-feedback-timeout="${copyButtonFeedbackTimeout}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      @click="${onClick}"
-      >${children}</bx-code-snippet
-    >
+    <cds-code-snippet type="inline" tooltip-content="Copy to Clipboard"
+      >node -v
+    </cds-code-snippet>
   `;
 };
 
-singleLine.storyName = 'Single line';
-
-singleLine.parameters = {
-  knobs: defaultKnobs,
+export const inlineWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-code-snippet type="inline" tooltip-content="Copy to Clipboard"
+        >node -v
+      </cds-code-snippet>
+    </sb-template-layers>
+  `;
 };
 
-export const multiLine = (args) => {
-  const {
-    codeAssistiveText,
-    copyButtonAssistiveText,
-    copyButtonFeedbackText,
-    copyButtonFeedbackTimeout,
-    collapseButtonText,
-    expandButtonText,
-    colorScheme,
-    onClick,
-  } = args?.['bx-code-snippet'] ?? {};
-  const children = `
-@mixin grid-container {
-  width: 100%;
-  padding-right: padding(mobile);
-  padding-left: padding(mobile);
-
-  @include breakpoint(bp--xs--major) {
-    padding-right: padding(xs);
-    padding-left: padding(xs);
-  }
-}
-
-$z-indexes: (
-  modal : 9000,
-  overlay : 8000,
-  dropdown : 7000,
-  header : 6000,
-  footer : 5000,
-  hidden : - 1,
-  overflowHidden: - 1,
-  floating: 10000
-);
-`.trim();
+export const multiline = () => {
+  const children = `"scripts": {
+    "build": "lerna run build --stream --prefix --npm-client yarn",
+    "ci-check": "carbon-cli ci-check",
+    "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+    "doctoc": "doctoc --title '## Table of Contents'",
+    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+    "lint": "eslint actions config codemods packages",
+    "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+    "sync": "carbon-cli sync",
+    "test": "cross-env BABEL_ENV=test jest",
+    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+  },
+  "resolutions": {
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-is": "~16.9.0",
+    "react-test-renderer": "~16.9.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.10.0",
+    "@babel/preset-react": "^7.10.0",
+    "@babel/runtime": "^7.10.0",
+    "@commitlint/cli": "^8.3.5",
+`;
   // prettier-ignore
   return html`
-  <bx-code-snippet
-    type="multi"
-    code-assistive-text="${ifNonNull(codeAssistiveText)}"
-    copy-button-assistive-text="${ifNonNull(copyButtonAssistiveText)}"
-    copy-button-feedback-text="${ifNonNull(copyButtonFeedbackText)}"
-    copy-button-feedback-timeout="${copyButtonFeedbackTimeout}"
-    collapse-button-text="${ifNonNull(collapseButtonText)}"
-    expand-button-text="${ifNonNull(expandButtonText)}"
-    color-scheme="${ifNonNull(colorScheme)}"
-    @click="${onClick}"
-  >${children}</bx-code-snippet>
+    <cds-code-snippet
+      type="multi" tooltip-content="Copy to Clipboard">${children}
+    </cds-code-snippet>
 `;
 };
 
-multiLine.storyName = 'Multi line';
-
-multiLine.parameters = {
-  knobs: {
-    'bx-code-snippet': () => ({
-      ...defaultKnobs['bx-code-snippet'](),
-      collapseButtonText: textNullable(
-        'The text for the collapse button (collapse-button-text)',
-        ''
-      ),
-      expandButtonText: textNullable(
-        'The text for the expand button (expand-button-text)',
-        ''
-      ),
-    }),
+export const multilineWithLayer = () => {
+  const children = `"scripts": {
+    "build": "lerna run build --stream --prefix --npm-client yarn",
+    "ci-check": "carbon-cli ci-check",
+    "clean": "lerna run clean && lerna clean --yes && rimraf node_modules",
+    "doctoc": "doctoc --title '## Table of Contents'",
+    "format": "prettier --write '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**'",
+    "format:diff": "prettier --list-different '**/*.{js,md,scss,ts}' '!**/{build,es,lib,storybook,ts,umd}/**' '!packages/components/**'",
+    "lint": "eslint actions config codemods packages",
+    "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
+    "sync": "carbon-cli sync",
+    "test": "cross-env BABEL_ENV=test jest",
+    "test:e2e": "cross-env BABEL_ENV=test jest --testPathPattern=e2e --testPathIgnorePatterns='examples,/packages/components/,/packages/react/'"
+  },
+  "resolutions": {
+    "react": "~16.9.0",
+    "react-dom": "~16.9.0",
+    "react-is": "~16.9.0",
+    "react-test-renderer": "~16.9.0"
   },
+  "devDependencies": {
+    "@babel/core": "^7.10.0",
+    "@babel/plugin-proposal-class-properties": "^7.7.4",
+    "@babel/plugin-proposal-export-default-from": "^7.7.4",
+    "@babel/plugin-proposal-export-namespace-from": "^7.7.4",
+    "@babel/plugin-transform-runtime": "^7.10.0",
+    "@babel/preset-env": "^7.10.0",
+    "@babel/preset-react": "^7.10.0",
+    "@babel/runtime": "^7.10.0",
+    "@commitlint/cli": "^8.3.5",
+`;
+  // prettier-ignore
+  return html`
+  <sb-template-layers>
+  <cds-code-snippet
+      type="multi" tooltip-content="Copy to Clipboard">${children}
+    </cds-code-snippet>
+  </sb-template-layers>
+`;
 };
 
-export const inline = (args) => {
-  const {
-    codeAssistiveText,
-    copyButtonAssistiveText,
-    copyButtonFeedbackText,
-    copyButtonFeedbackTimeout,
-    colorScheme,
-    onClick,
-  } = args?.['bx-code-snippet'] ?? {};
+export const singleline = () => {
   return html`
-    <bx-code-snippet
-      type="inline"
-      code-assistive-text="${ifNonNull(codeAssistiveText)}"
-      copy-button-assistive-text="${ifNonNull(copyButtonAssistiveText)}"
-      copy-button-feedback-text="${ifNonNull(copyButtonFeedbackText)}"
-      copy-button-feedback-timeout="${copyButtonFeedbackTimeout}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      @click="${onClick}"
-      >node -v</bx-code-snippet
-    >
+    <cds-code-snippet type="single" tooltip-content="Copy to Clipboard">
+      yarn add carbon-components@latest carbon-components-react@latest
+      @carbon/icons-react@latest carbon-icons@latest
+    </cds-code-snippet>
   `;
 };
 
-inline.storyName = 'Inline';
-
-inline.parameters = {
-  knobs: defaultKnobs,
+export const singlelineWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-code-snippet type="single" tooltip-content="Copy to Clipboard"
+        >yarn add carbon-components@latest carbon-components-react@latest
+        @carbon/icons-react@latest carbon-icons@latest ></cds-code-snippet
+      >
+    </sb-template-layers>
+  `;
 };
 
-export const skeletonSingleLine = () =>
-  html` <bx-code-snippet-skeleton type="single"></bx-code-snippet-skeleton> `;
-
-skeletonSingleLine.storyName = 'Skeleton single line';
+export const skeleton = () =>
+  html`
+    <cds-code-snippet-skeleton
+      type="single"
+      style="margin-bottom: 8px"></cds-code-snippet-skeleton>
+    <cds-code-snippet-skeleton type="multi"></cds-code-snippet-skeleton>
+  `;
 
-skeletonSingleLine.parameters = {
+skeleton.parameters = {
   percy: {
     skip: true,
   },
 };
 
-export const skeletonMultiLine = () =>
-  html` <bx-code-snippet-skeleton type="multi"></bx-code-snippet-skeleton> `;
-
-skeletonMultiLine.storyName = 'Skeleton multi line';
+export const Playground = (args) => {
+  const {
+    copyButtonDescription,
+    copyText,
+    disabled,
+    feedback,
+    feedbackTimeout,
+    hideCopyButton,
+    maxCollapsedNumberOfRows,
+    maxExpandedNumberOfRows,
+    minCollapsedNumberOfRows,
+    minExpandedNumberOfRows,
+    showLessText,
+    showMoreText,
+    wrapText,
+  } = args?.[`${prefix}-code-snippet`] ?? {};
+  return html`
+    <cds-code-snippet
+      type="single"
+      copy-text="${copyText}"
+      ?disabled="${disabled}"
+      maxCollapsedNumberOfRows="${maxCollapsedNumberOfRows}"
+      maxExpandedNumberOfRows="${maxExpandedNumberOfRows}"
+      minCollapsedNumberOfRows="${minCollapsedNumberOfRows}"
+      minExpandedNumberOfRows="${minExpandedNumberOfRows}"
+      ?hide-copy-button="${hideCopyButton}"
+      show-less-text="${showLessText}"
+      show-more-text="${showMoreText}"
+      ?wrap-text="${wrapText}"
+      feedback=${feedback}
+      feedback-timeout=${feedbackTimeout}
+      tooltip-content="${copyButtonDescription}"
+      >yarn add @carbon/react
+    </cds-code-snippet>
+  `;
+};
 
-skeletonMultiLine.parameters = {
-  percy: {
-    skip: true,
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-code-snippet`]: () => ({
+      copyButtonDescription: textNullable(
+        'Copy button description',
+        'Copy to clipboard'
+      ),
+      copyText: textNullable('Copy text', ''),
+      disabled: boolean('Disabled', false),
+      feedback: textNullable('Feedback', ''),
+      feedbackTimeout: number('Feedback timeout', 0),
+      hideCopyButton: boolean('Hide copy button', false),
+      maxCollapsedNumberOfRows: number('Max collapsed number of rows', 15),
+      maxExpandeddNumberOfRows: number('Max expanded number of rows', 0),
+      minCollapsedNumberOfRows: number('Min collapsed number of rows', 3),
+      minExpandeddNumberOfRows: number('Min expanded number of rows', 16),
+      showLessText: textNullable('Show less text', 'Show less'),
+      showMoreText: textNullable('Show more text', 'Show more'),
+      wrapText: boolean('Wrap text', false),
+    }),
   },
 };
 
diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss b/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss
index f139aaa2856..49c59d5cbbb 100644
--- a/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss
+++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,147 +7,138 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/helper-mixins';
-@import 'carbon-components/scss/components/code-snippet/code-snippet';
-@import 'carbon-components/scss/components/copy-button/copy-button';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/code-snippet/index';
+@use '@carbon/styles/scss/components/copy-button/copy-button';
 
 :host(#{$prefix}-code-snippet),
 :host(#{$prefix}-code-snippet-skeleton) {
-  @extend .#{$prefix}--snippet--single;
-
-  outline: none;
+  @extend .#{$prefix}--snippet;
 
-  &::after {
-    background-color: $ui-01;
-    background-image: none;
-    mask-image: linear-gradient(to right, transparent 0%, $ui-01 100%);
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      background-color: transparent;
-      background-image: linear-gradient(to right, transparent, $ui-01);
-    }
+  .#{$prefix}--snippet-container {
+    @extend .#{$prefix}--snippet-container;
   }
+}
 
-  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    left: 50%;
-    right: auto;
-  }
+:host(#{$prefix}-code-snippet[disabled]) {
+  @extend .#{$prefix}--snippet--disabled;
+}
 
-  .#{$prefix}--snippet-container {
-    display: flex;
-    align-items: center;
-    overflow-x: auto;
-    position: relative;
-    height: 100%;
+:host(#{$prefix}-code-snippet[wrap-text]) {
+  pre {
+    white-space: pre-wrap;
+    word-wrap: break-word;
   }
+}
 
-  .#{$prefix}--snippet-btn--expand {
-    z-index: 1;
-    min-height: rem(40px);
-  }
+:host(#{$prefix}-code-snippet[hide-copy-button]) {
+  @extend .#{$prefix}--snippet--no-copy;
+}
 
+:host(#{$prefix}-code-snippet-skeleton[type='single']),
+:host(#{$prefix}-code-snippet[type='single']) {
+  @extend .#{$prefix}--snippet--single;
+}
+
+:host(#{$prefix}-code-snippet[type='single']) {
   pre {
     white-space: nowrap;
-    @include type-style('code-01');
-
-    padding-right: $spacing-xs;
   }
-}
 
-:host(#{$prefix}-code-snippet[color-scheme='light']) {
-  background-color: $ui-02;
+  #{$prefix}-copy-button {
+    @include font-family('sans');
 
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
-    background-color: $ui-02;
-  }
+    position: absolute;
+    top: 0;
+    right: 0;
 
-  &:hover {
-    background-color: $hover-ui-light;
+    code: {
+      overflow: hidden;
+    }
   }
+}
 
-  .#{$prefix}--snippet-button:hover,
-  button.#{$prefix}--btn.#{$prefix}--snippet-btn--expand:hover {
-    background-color: $hover-ui-light;
+#{$prefix}-copy {
+  code {
+    padding: 0 $spacing-03;
+    @include type-style('code-01');
   }
 }
 
-:host(#{$prefix}-code-snippet[type='multi']),
-:host(#{$prefix}-code-snippet-skeleton[type='multi']) {
+:host(#{$prefix}-code-snippet-skeleton[type='multi']),
+:host(#{$prefix}-code-snippet[type='multi']) {
   @extend .#{$prefix}--snippet--multi;
+}
 
-  height: auto;
+:host(#{$prefix}-code-snippet[type='multi']) {
+  .#{$prefix}--snippet-container {
+    padding: 0;
+
+    @extend .#{$prefix}--snippet--multi, .#{$prefix}--snippet-container;
+  }
+
+  pre {
+    margin: 0;
+    padding: 0 $spacing-08 $spacing-06 0;
+    overflow-x: auto;
+  }
 
-  &::after {
+  pre::after {
     position: absolute;
+    top: 0;
+    right: 0;
+    width: $spacing-05;
+    height: 100%;
+    background-image: linear-gradient(to right, transparent, $layer);
     content: '';
-    left: 0;
-    top: auto;
-    bottom: rem(16px);
-    width: 100%;
-    height: rem(16px);
-    background-color: $ui-01;
-    background-image: none;
-    mask-image: linear-gradient(to bottom, transparent 0%, $ui-01 100%);
-    @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
-      background-color: transparent;
-      background-image: linear-gradient(to bottom, transparent, $ui-01);
-    }
   }
 
-  .#{$prefix}--snippet-container {
-    display: block;
-    overflow: hidden;
-    position: relative;
-    height: auto;
-    padding-bottom: 0;
-    max-height: rem(238px);
-    min-height: rem(56px);
-    transition: max-height $duration--moderate-01 motion(standard, productive);
-
-    pre {
-      overflow: hidden;
-      padding-bottom: rem(24px);
-      white-space: pre;
-      padding-right: 0;
-
-      &::after {
-        // Use top-level pseudo element instead because `<pre>` here is inside a scrolling container
-        content: none;
-      }
+  #{$prefix}-button {
+    .#{$prefix}--snippet__icon {
+      margin-left: $spacing-03;
+    }
 
-      code {
-        overflow: hidden;
+    &[disabled] {
+      .#{$prefix}--snippet-btn--text {
+        color: $text-disabled;
       }
     }
   }
 
-  .#{$prefix}-ce--snippet-container--expanded {
-    max-height: rem(1500px);
-    transition: max-height $duration--moderate-01 motion(standard, productive);
-
-    pre {
-      overflow-x: auto;
-    }
+  #{$prefix}-copy-button {
+    position: absolute;
+    top: $spacing-03;
+    right: $spacing-03;
   }
 }
 
-:host(#{$prefix}-code-snippet[type='inline']) {
-  display: inline-flex;
-  width: auto;
-  height: auto;
-  min-width: auto;
-  max-width: auto;
-  padding: 0;
-
-  &::after {
-    content: none;
+:host(#{$prefix}-code-snippet[type='multi'][expanded-code]) {
+  .#{$prefix}--snippet-container {
+    padding-bottom: $spacing-05;
+    transition: max-height $duration-moderate-01 motion(standard, productive);
   }
 
-  .#{$prefix}--btn--copy__feedback {
-    // Half of the diagonal line of `0.6rem` square
-    top: rem(6.7882px);
+  #{$prefix}-button {
+    .#{$prefix}--snippet__icon {
+      transform: rotate(180deg);
+      transition: transform $transition-expansion;
+    }
   }
 }
 
+:host(#{$prefix}-code-snippet-skeleton[type='single']) {
+  @extend .#{$prefix}--snippet--single, .#{$prefix}--skeleton;
+}
+
+:host(#{$prefix}-code-snippet-skeleton[type='multi']) {
+  @extend .#{$prefix}--snippet--multi, .#{$prefix}--skeleton;
+}
+
 :host(#{$prefix}-code-snippet-skeleton) {
   @extend .#{$prefix}--skeleton;
 
@@ -155,9 +146,9 @@ $css--plex: true !default;
     @include skeleton;
 
     width: 100%;
-    height: 1rem;
+    height: $spacing-05;
     display: block;
-    margin-top: 0.5rem;
+    margin-top: $spacing-03;
 
     &:first-child {
       margin: 0;
diff --git a/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts b/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts
index 5f601d5390a..34a80772848 100644
--- a/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts
+++ b/packages/carbon-web-components/src/components/code-snippet/code-snippet.ts
@@ -7,112 +7,92 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { TemplateResult } from 'lit-html';
-import { html, property, query, LitElement } from 'lit-element';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import {
-  _createHandleFeedbackTooltip as createHandleCopyButtonFeedbackTooltip,
-  _renderButton as renderCopyButton,
-} from '../copy-button/copy-button';
 import { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE } from './defs';
 import styles from './code-snippet.scss';
+import Handle from '../../globals/internal/handle';
+import '../copy-button/index';
+import '../copy/copy';
+import '../button/button';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { CODE_SNIPPET_COLOR_SCHEME, CODE_SNIPPET_TYPE };
 
-const { prefix } = settings;
-
 /**
- * @param values The values to render.
- * @param values.children The child nodes.
- * @param values.handleClick The handler for the `click` event on the button.
- * @returns The template result for the expando.
- */
-const renderExpando = ({
-  children,
-  handleClick,
-}: {
-  children: string | TemplateResult;
-  handleClick: EventListener;
-}) => html`
-  <button
-    type="button"
-    class="${prefix}--snippet-btn--expand"
-    @click="${handleClick}">
-    <span id="button-text" class="${prefix}--snippet-btn--text">
-      ${children}
-    </span>
-    ${ChevronDown16({
-      'aria-labeledby': 'button-text',
-      class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
-      role: 'img',
-    })}
-  </button>
-`;
-
-/**
- * @param values The values to render.
- * @param values.assistiveText The assistive text to announce that the node is for code snippet.
- * @param [values.expanded] `true` to show the expanded state (for multi-line variant).
- * @param values.children The child nodes.
- * @returns The template result for the code snippet.
+ * Observes resize of the given element with the given resize observer.
+ *
+ * @param observer The resize observer.
+ * @param elem The element to observe the resize.
  */
-const renderCode = ({
-  assistiveText,
-  expanded,
-  children,
-}: {
-  assistiveText: string;
-  expanded?: boolean;
-  children: string | TemplateResult;
-}) => {
-  const classes = classMap({
-    [`${prefix}--snippet-container`]: true,
-    [`${prefix}-ce--snippet-container--expanded`]: Boolean(expanded),
-  });
-  // Ensures no extra whitespace text node
-  // prettier-ignore
-  return html`
-    <div role="textbox" tabindex="0" class="${classes}" aria-label="${assistiveText}"><code><pre>${children}</pre></code></div>
-  `;
+const observeResize = (observer: ResizeObserver, elem: Element) => {
+  if (!elem) {
+    return null;
+  }
+  observer.observe(elem);
+  return {
+    release() {
+      observer.unobserve(elem);
+      return null;
+    },
+  } as Handle;
 };
 
 /**
  * Basic code snippet.
  *
- * @element bx-code-snippet
+ * @element cds-code-snippet
  */
 @customElement(`${prefix}-code-snippet`)
-class BXCodeSnippet extends FocusMixin(LitElement) {
+class CDSCodeSnippet extends FocusMixin(LitElement) {
   /**
    * `true` to expand multi-line variant of code snippet.
    */
-  private _expanded = false;
+  private _expandedCode = false;
 
   /**
-   * `true` to show the feedback tooltip.
+   * The handle for observing resize of the parent element of this element.
    */
-  private _showCopyButtonFeedback = false;
+  private _hObserveResize: Handle | null = null;
 
   /**
-   * `true` to show the expando.
+   * Row height in pixels
    */
-  private _showExpando = false;
+  private _rowHeightInPixels = 16;
+
+  /**
+   * `true` if code-snippet has right overflow
+   */
+  private _hasRightOverflow = true;
+
+  /**
+   * `true` if code-snippet has left overflow
+   */
+  private _hasLeftOverflow = false;
+
+  /**
+   * `true` if show more or show less btn is visible
+   */
+  private _shouldShowMoreLessBtn = false;
 
   /**
    * Handles `click` event on the copy button.
    */
-  private _handleClickCopyButton() {
+  private _handleCopyClick() {
     const { ownerDocument: doc } = this;
     const selection = doc!.defaultView!.getSelection();
     selection!.removeAllRanges();
     const code = doc!.createElement('code');
     code.className = `${prefix}--visually-hidden`;
     const pre = doc!.createElement('pre');
-    pre.textContent = this.textContent;
+    const text = Array.from(this.childNodes).filter(
+      (node) => node.nodeType === Node.TEXT_NODE
+    );
+    pre.textContent = this.copyText || text[0].textContent;
     code.appendChild(pre);
     // Using `<code>` in shadow DOM seems to lose the LFs in some browsers
     doc!.body.appendChild(code);
@@ -120,90 +100,195 @@ class BXCodeSnippet extends FocusMixin(LitElement) {
     range.selectNodeContents(code);
     selection!.addRange(range);
     doc!.execCommand('copy');
-    this._handleCopyButtonFeedbackTooltip(this.copyButtonFeedbackTimeout);
     doc!.body.removeChild(code);
     selection!.removeAllRanges();
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  private _getCodeRefDimensions(ref) {
+    const {
+      clientWidth: codeClientWidth,
+      scrollLeft: codeScrollLeft,
+      scrollWidth: codeScrollWidth,
+    } = ref;
+
+    return {
+      horizontalOverflow: codeScrollWidth > codeClientWidth,
+      codeClientWidth,
+      codeScrollWidth,
+      codeScrollLeft,
+    };
+  }
   /**
-   * Handles showing/hiding the feedback tooltip.
+   * Handles `scroll` event.
    */
-  private _handleCopyButtonFeedbackTooltip =
-    createHandleCopyButtonFeedbackTooltip(
-      ({ showFeedback = false }: { showFeedback?: boolean }) => {
-        this._showCopyButtonFeedback = showFeedback;
-        this.requestUpdate();
+  private _handleScroll() {
+    if (this) {
+      const codeContainerRef = this?.shadowRoot?.querySelector(
+        `.${prefix}--snippet-container`
+      );
+      const codeContentRef = codeContainerRef?.querySelector('pre');
+      if (
+        this.type === CODE_SNIPPET_TYPE.INLINE ||
+        (this.type === CODE_SNIPPET_TYPE.SINGLE && !codeContainerRef) ||
+        (this.type === CODE_SNIPPET_TYPE.MULTI && !codeContentRef)
+      ) {
+        return;
       }
-    );
+
+      const {
+        horizontalOverflow,
+        codeClientWidth,
+        codeScrollWidth,
+        codeScrollLeft,
+      } =
+        this.type === CODE_SNIPPET_TYPE.SINGLE
+          ? this._getCodeRefDimensions(codeContainerRef)
+          : this._getCodeRefDimensions(codeContentRef);
+
+      this._hasLeftOverflow = horizontalOverflow && !!codeScrollLeft;
+      this._hasRightOverflow =
+        horizontalOverflow &&
+        codeScrollLeft + codeClientWidth !== codeScrollWidth;
+      this.requestUpdate();
+    }
+  }
 
   /**
-   * Handles `click` event on the expando.
+   * Handles `click` event on the show more or show less button.
    */
-  private _handleClickExpando() {
-    this._expanded = !this._expanded;
+  private _handleClickExpanded() {
+    this._expandedCode = !this._expandedCode;
     this.requestUpdate();
   }
 
   /**
-   * Handles change in slot content to determine if the content
+   * The `ResizeObserver` instance for observing element resizes for re-positioning floating menu position.
    */
-  private _handleSlotChange() {
-    const { type, _preNode: preNode } = this;
-    if (type === CODE_SNIPPET_TYPE.MULTI) {
-      if (preNode.getBoundingClientRect().height > 255) {
-        this._showExpando = true;
-        this.requestUpdate();
+  // TODO: Wait for `.d.ts` update to support `ResizeObserver`
+  // @ts-ignore
+  private _resizeObserver = new ResizeObserver(() => {
+    const codeContainerRef = this.shadowRoot?.querySelector(
+      `.${prefix}--snippet-container`
+    );
+    const codeContentRef = codeContainerRef?.querySelector('code'); // PRE?
+    const {
+      type,
+      maxCollapsedNumberOfRows,
+      maxExpandedNumberOfRows,
+      minExpandedNumberOfRows,
+      _rowHeightInPixels: rowHeightInPixels,
+      _handleScroll: handleScroll,
+    } = this;
+    if (codeContentRef && type === CODE_SNIPPET_TYPE.MULTI) {
+      const { height } = codeContentRef.getBoundingClientRect();
+      if (
+        maxCollapsedNumberOfRows > 0 &&
+        (maxExpandedNumberOfRows <= 0 ||
+          maxExpandedNumberOfRows > maxCollapsedNumberOfRows) &&
+        height > maxCollapsedNumberOfRows * rowHeightInPixels
+      ) {
+        this._shouldShowMoreLessBtn = true;
+      } else {
+        this._shouldShowMoreLessBtn = false;
+      }
+      if (
+        this._expandedCode &&
+        minExpandedNumberOfRows > 0 &&
+        height <= minExpandedNumberOfRows * rowHeightInPixels
+      ) {
+        this._expandedCode = false;
       }
     }
-  }
+    if (
+      (codeContentRef && type === CODE_SNIPPET_TYPE.MULTI) ||
+      (codeContainerRef && type === CODE_SNIPPET_TYPE.SINGLE)
+    ) {
+      handleScroll();
+    }
+    this.requestUpdate();
+  });
 
   /**
-   * The `<pre>` element in the shadow DOM.
+   * Optional text to copy. If not specified, the `children` node's `innerText`
+   * will be used as the copy value.
    */
-  @query('pre')
-  private _preNode!: HTMLPreElement;
+  @property({ attribute: 'copy-text' })
+  copyText = '';
 
   /**
-   * An assistive text for screen reader to advice a DOM node is for code snippet.
+   * `true` if the button should be disabled.
    */
-  @property({ attribute: 'code-assistive-text' })
-  codeAssistiveText = 'code-snippet';
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   /**
-   * The context content for the collapse button.
+   * Specify the string displayed when the snippet is copied
    */
-  @property({ attribute: 'collapse-button-text' })
-  collapseButtonText = 'Show less';
+  @property()
+  feedback = 'Copied!';
 
   /**
-   * The color scheme.
+   * Specify the time it takes for the feedback message to timeout
    */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = CODE_SNIPPET_COLOR_SCHEME.REGULAR;
+  @property({ type: Number, attribute: 'feedback-timeout' })
+  feedbackTimeout = 2000;
 
   /**
-   * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.
+   * Specify whether or not a copy button should be used/rendered.
    */
-  @property({ attribute: 'copy-button-assistive-text' })
-  copyButtonAssistiveText = 'Copy to clipboard';
+  @property({ type: Boolean, reflect: true, attribute: 'hide-copy-button' })
+  hideCopyButton = false;
 
   /**
-   * The feedback text for the copy button.
+   * Specify the maximum number of rows to be shown when in collapsed view
    */
-  @property({ attribute: 'copy-button-feedback-text' })
-  copyButtonFeedbackText = 'Copied!';
+  @property()
+  maxCollapsedNumberOfRows = 15;
 
   /**
-   * The number in milliseconds to determine how long the tooltip for the copy button should remain.
+   * Specify the maximum number of rows to be shown when in expanded view
    */
-  @property({ type: Number, attribute: 'copy-button-feedback-timeout' })
-  copyButtonFeedbackTimeout = 2000;
+  @property()
+  maxExpandedNumberOfRows = 0;
 
   /**
-   * The context content for the expand button.
+   * Specify the minimum number of rows to be shown when in collapsed view
    */
-  @property({ attribute: 'expand-button-text' })
-  expandButtonText = 'Show more';
+  @property()
+  minCollapsedNumberOfRows = 3;
+
+  /**
+   * Specify the minimum number of rows to be shown when in expanded view
+   */
+  @property()
+  minExpandedNumberOfRows = 16;
+
+  /**
+   * Specify a string that is displayed when the Code Snippet has been
+   * interacted with to show less lines
+   */
+  @property({ attribute: 'show-less-text' })
+  showLessText = 'Show less';
+
+  /**
+   * Specify a string that is displayed when the Code Snippet text is more
+   * than 15 lines
+   */
+  @property({ attribute: 'show-more-text' })
+  showMoreText = 'Show more';
+
+  /**
+   * Tooltip content for the copy button.
+   */
+  @property({ attribute: 'tooltip-content' })
+  tooltipContent = 'Copy to clipboard';
+
+  /**
+   * `true` if the button should be disabled.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'wrap-text' })
+  wrapText = false;
 
   /**
    * The type of code snippet.
@@ -211,92 +296,180 @@ class BXCodeSnippet extends FocusMixin(LitElement) {
   @property({ reflect: true })
   type = CODE_SNIPPET_TYPE.SINGLE;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
+  connectedCallback() {
+    super.connectedCallback();
+    if (this._hObserveResize) {
+      this._hObserveResize = this._hObserveResize.release();
+    }
+    this._hObserveResize = observeResize(this._resizeObserver, this);
+  }
+
+  disconnectedCallback() {
+    if (this._hObserveResize) {
+      this._hObserveResize = this._hObserveResize.release();
+    }
+  }
+
+  updated() {
+    if (this._expandedCode) {
+      this.setAttribute('expanded-code', '');
+    } else {
+      this.removeAttribute('expanded-code');
+    }
   }
 
   render() {
     const {
-      codeAssistiveText,
-      collapseButtonText,
-      copyButtonAssistiveText,
-      copyButtonFeedbackText,
-      expandButtonText,
+      disabled,
+      feedback,
+      feedbackTimeout,
+      hideCopyButton,
+      maxExpandedNumberOfRows,
+      minExpandedNumberOfRows,
+      maxCollapsedNumberOfRows,
+      minCollapsedNumberOfRows,
       type,
-      _expanded: expanded,
-      _showCopyButtonFeedback: showCopyButtonFeedback,
-      _showExpando: showExpando,
-      _handleClickCopyButton: handleClickCopyButton,
-      _handleClickExpando: handleClickExpando,
-      _handleSlotChange: handleSlotChange,
+      wrapText,
+      tooltipContent,
+      showMoreText,
+      showLessText,
+      _expandedCode: expandedCode,
+      _handleCopyClick: handleCopyClick,
+      _handleScroll: handleScroll,
+      _hasRightOverflow: hasRightOverflow,
+      _hasLeftOverflow: hasLeftOverflow,
+      _rowHeightInPixels: rowHeightInPixels,
+      _shouldShowMoreLessBtn: shouldShowMoreLessBtn,
     } = this;
 
-    if (type === CODE_SNIPPET_TYPE.SINGLE) {
+    let classes = `${prefix}--snippet`;
+    type ? (classes += ` ${prefix}--snippet--${type}`) : '';
+    type !== 'inline' && disabled
+      ? (classes += ` ${prefix}--snippet--disabled`)
+      : '';
+    hideCopyButton ? (classes += ` ${prefix}--snippet--no-copy`) : '';
+    wrapText ? (classes += ` ${prefix}--snippet--wraptext`) : '';
+    type == 'multi' && hasRightOverflow
+      ? (classes += ` ${prefix}--snippet--has-right-overflow`)
+      : '';
+
+    const expandButtonClass = `${prefix}--snippet-btn--expand`;
+
+    const disabledCopyButtonClasses = disabled
+      ? `${prefix}--snippet--disabled`
+      : '';
+
+    const expandCodeBtnText = expandedCode ? showLessText : showMoreText;
+
+    if (type === CODE_SNIPPET_TYPE.INLINE) {
       // Ensures no extra whitespace text node
       // prettier-ignore
       return html`
-        ${renderCode({
-          assistiveText: codeAssistiveText,
-          expanded,
-          children: html`<slot @slotchange="${handleSlotChange}"></slot>`,
-        })}
-        ${renderCopyButton({
-          assistiveText: copyButtonAssistiveText,
-          feedbackText: copyButtonFeedbackText,
-          showFeedback: showCopyButtonFeedback,
-          handleClickButton: handleClickCopyButton,
-          className: `${prefix}--snippet-button`,
-        })}
+        <cds-copy button-class-name="${classes}" @click="${handleCopyClick}">
+          <code slot="icon"><slot></slot></code>
+          <span slot="tooltip-content">${tooltipContent}</span>
+        </cds-copy>
       `;
     }
 
-    if (type === CODE_SNIPPET_TYPE.MULTI) {
-      // Ensures no extra whitespace text node
-      // prettier-ignore
-      return html`
-        ${renderCode({
-          assistiveText: codeAssistiveText,
-          expanded,
-          children: html`<slot @slotchange="${handleSlotChange}"></slot>`,
-        })}
-        ${renderCopyButton({
-          assistiveText: copyButtonAssistiveText,
-          feedbackText: copyButtonFeedbackText,
-          showFeedback: showCopyButtonFeedback,
-          handleClickButton: handleClickCopyButton,
-          className: `${prefix}--snippet-button`,
-        })}
-        ${!showExpando
-          ? undefined
-          : renderExpando({
-              children: expanded
-                ? html`<slot name="collapse-button-text">${collapseButtonText}</slot>`
-                : html`<slot name="expand-button-text">${expandButtonText}</slot>`,
-              handleClick: handleClickExpando,
-            })}
-      `;
+    const styles = {};
+    if (type === 'multi') {
+      if (expandedCode) {
+        if (maxExpandedNumberOfRows > 0) {
+          styles['max-height'] =
+            maxExpandedNumberOfRows * rowHeightInPixels + 'px';
+        }
+        if (minExpandedNumberOfRows > 0) {
+          styles['min-height'] =
+            minExpandedNumberOfRows * rowHeightInPixels + 'px';
+        }
+      } else {
+        if (maxCollapsedNumberOfRows > 0) {
+          styles['max-height'] =
+            maxCollapsedNumberOfRows * rowHeightInPixels + 'px';
+        }
+        if (minCollapsedNumberOfRows > 0) {
+          styles['min-height'] =
+            minCollapsedNumberOfRows * rowHeightInPixels + 'px';
+        }
+      }
     }
 
-    // Ensures no extra whitespace text node
-    // prettier-ignore
     return html`
-      ${renderCopyButton({
-        assistiveText: copyButtonAssistiveText,
-        feedbackText: copyButtonFeedbackText,
-        showFeedback: showCopyButtonFeedback,
-        handleClickButton: handleClickCopyButton,
-        className: `${prefix}--snippet ${prefix}--snippet--inline`,
-        children: html`<code aria-label="${codeAssistiveText}"><slot></slot></code>`,
-      })}
+      <div
+        role="${type === CODE_SNIPPET_TYPE.SINGLE ||
+        type === CODE_SNIPPET_TYPE.MULTI
+          ? 'textbox'
+          : null}"
+        tabindex="${(type === CODE_SNIPPET_TYPE.SINGLE ||
+          type === CODE_SNIPPET_TYPE.MULTI) &&
+        !disabled
+          ? 0
+          : null}"
+        class="${prefix}--snippet-container"
+        aria-label="${'code-snippet'}"
+        aria-readonly="${type === CODE_SNIPPET_TYPE.SINGLE ||
+        type === CODE_SNIPPET_TYPE.MULTI
+          ? true
+          : null}"
+        aria-multiline="${type === CODE_SNIPPET_TYPE.MULTI ? true : null}"
+        @scroll="${(type === CODE_SNIPPET_TYPE.SINGLE && handleScroll) || null}"
+        style=${styleMap(styles)}>
+        <pre
+          @scroll="${(type === CODE_SNIPPET_TYPE.MULTI && handleScroll) ||
+          null}"><code><slot></slot></code></pre>
+      </div>
+
+      ${hasLeftOverflow
+        ? html`
+            <div class="${prefix}--snippet__overflow-indicator--left"></div>
+          `
+        : ``}
+      ${hasRightOverflow && type !== CODE_SNIPPET_TYPE.MULTI
+        ? html`
+            <div class="${prefix}--snippet__overflow-indicator--right"></div>
+          `
+        : ``}
+      ${hideCopyButton
+        ? ``
+        : html`
+            <cds-copy-button
+              ?disabled=${disabled}
+              button-class-name=${disabledCopyButtonClasses}
+              feedback=${feedback}
+              feedback-timeout=${feedbackTimeout}
+              @click="${handleCopyClick}">
+              ${tooltipContent}
+            </cds-copy-button>
+          `}
+      ${shouldShowMoreLessBtn
+        ? html`
+            <cds-button
+              kind="ghost"
+              size="sm"
+              button-class-name=${expandButtonClass}
+              ?disabled=${disabled}
+              @click=${() => this._handleClickExpanded()}>
+              <span class="${prefix}--snippet-btn--text">
+                ${expandCodeBtnText}
+              </span>
+              ${ChevronDown16({
+                class: `${prefix}--icon-chevron--down ${prefix}--snippet__icon`,
+                name: 'cheveron--down',
+                role: 'img',
+                slot: 'icon',
+              })}
+            </cds-button>
+          `
+        : ``}
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXCodeSnippet;
+export default CDSCodeSnippet;
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts b/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts
index d1b679c2fbe..04b026be504 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box-item.ts
@@ -7,21 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import BXDropdownItem from '../dropdown/dropdown-item';
+import { prefix } from '../../globals/settings';
+import CDSDropdownItem from '../dropdown/dropdown-item';
 import styles from './combo-box.scss';
-
-const { prefix } = settings;
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Combo box item.
  *
- * @element bx-combo-box-item
+ * @element cds-combo-box-item
  */
 @customElement(`${prefix}-combo-box-item`)
-class BXComboBoxItem extends BXDropdownItem {
+class CDSComboBoxItem extends CDSDropdownItem {
   static styles = styles;
 }
 
-export default BXComboBoxItem;
+export default CDSComboBoxItem;
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx b/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
index 30fc0063523..604910fda4f 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box-story.mdx
@@ -4,18 +4,13 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Combo box
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/combo-box)
 
-Combo box realizes a notion of "filterable dropdown". By default, the dropdown
-displays a label when closed. When the user hovers over the label area, a text
-cursor will appear. The drawer opens on click (anywhere in the field) and the
-user can type to filter through the list of options below. Once the user begins
-typing, the close (X) icon will appear to the right of the label. This will
-clear any user-inputted text. Selecting an item from the dropdown will close the
-drawer and the selected option will replace the default label.
+A combobox allows the user to make a selection from a predefined list of options
+and is typically used when there are a large amount of options to choose from.
 
 ## Getting started
 
@@ -33,47 +28,78 @@ import '@carbon/web-components/es/components/combo-box/index.js';
 ### HTML
 
 ```html
-<bx-combo-box
-  helper-text="Optional helper text"
-  label-text="Combo box title"
-  trigger-content="Filter..."
->
-  <bx-combo-box-item value="all">Option 1</bx-combo-box-item>
-  <bx-combo-box-item value="cloudFoundry">Option 2</bx-combo-box-item>
-  <bx-combo-box-item value="staging">Option 3</bx-combo-box-item>
-  <bx-combo-box-item value="dea">Option 4</bx-combo-box-item>
-  <bx-combo-box-item value="router">Option 5</bx-combo-box-item>
-  <bx-combo-box-item value="support">Option 6</bx-combo-box-item>
-  <bx-combo-box-item value="services">Option 7</bx-combo-box-item>
-  <bx-combo-box-item value="products">Option 8</bx-combo-box-item>
-</bx-combo-box>
+<cds-combo-box
+  helper-text="This is some helper text"
+  title-text="Combo box title"
+  label="Filter...">
+  <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
+  <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>
+  <cds-combo-box-item value="staging">Option 3</cds-combo-box-item>
+  <cds-combo-box-item value="dea">Option 4</cds-combo-box-item>
+  <cds-combo-box-item value="router">Option 5</cds-combo-box-item>
+  <cds-combo-box-item value="support">Option 6</cds-combo-box-item>
+  <cds-combo-box-item value="services">Option 7</cds-combo-box-item>
+  <cds-combo-box-item value="products">Option 8</cds-combo-box-item>
+</cds-combo-box>
 ```
 
+## Disabled
+
+A disabled combobox is available but should not be used as the sole means of
+conveying information. For example, if the user must complete a previous form
+input before moving on to the combobox, make sure to make that clear to the user
+via an error state on the previous form element in addition to disabling the
+next element.
+
+```html
+<cds-combo-box
+  helper-text="This is some helper text"
+  title-text="Combo box title"
+  label="Filter..."
+  disabled>
+  <cds-combo-box-item value="all">Option 1</cds-combo-box-item>
+  <cds-combo-box-item value="cloudFoundry">Option 2</cds-combo-box-item>
+  <cds-combo-box-item value="staging">Option 3</cds-combo-box-item>
+  <cds-combo-box-item value="dea">Option 4</cds-combo-box-item>
+  <cds-combo-box-item value="router">Option 5</cds-combo-box-item>
+  <cds-combo-box-item value="support">Option 6</cds-combo-box-item>
+  <cds-combo-box-item value="services">Option 7</cds-combo-box-item>
+  <cds-combo-box-item value="products">Option 8</cds-combo-box-item>
+</cds-combo-box>
+```
+
+## Labels and Helper Texts
+
+The label is not a replacement for a helper or title text under any
+circumstances including space restraints. A label should be used to provide
+additive information regarding the format of the input. In all cases a helper
+text is required in addition to a placeholder.
+
 ## Selection
 
-When user attempts to select a combo box item, `bx-combo-box-beingselected`
-event fires on `<bx-combo-box>`, which has the following properties in the event
-details:
+When user attempts to select a combo box item, `cds-combo-box-beingselected`
+event fires on `<cds-combo-box>`, which has the following properties in the
+event details:
 
-| Property | Description                               |
-| -------- | ----------------------------------------- |
-| `item`   | The `<bx-combo-box-item>` being selected. |
+| Property | Description                                |
+| -------- | ------------------------------------------ |
+| `item`   | The `<cds-combo-box-item>` being selected. |
 
-`bx-combo-box-beingselected` bubbles and is cancelable. Canceling this event
+`cds-combo-box-beingselected` bubbles and is cancelable. Canceling this event
 means canceling change in selection.
 
-## `<bx-combo-box>` attributes, properties and events
+## `<cds-combo-box>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-combo-box open>`) and `false` means not setting the attribute (e.g.
-`<bx-combo-box>` without `open` attribute).
+`<cds-combo-box open>`) and `false` means not setting the attribute (e.g.
+`<cds-combo-box>` without `open` attribute).
 
-<Props of="bx-combo-box" />
+<Props of="cds-combo-box" />
 
-## `<bx-combo-box-item>` attributes and properties
+## `<cds-combo-box-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-combo-box-item disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-combo-box-item>` without `disabled` attribute).
+`<cds-combo-box-item disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-combo-box-item>` without `disabled` attribute).
 
-<Props of="bx-combo-box-item" />
+<Props of="cds-combo-box-item" />
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts b/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
index f14b5b3ae89..9560e430d1b 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box-story.ts
@@ -1,141 +1,185 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
-import {
-  DROPDOWN_COLOR_SCHEME,
-  DROPDOWN_SIZE,
-  DROPDOWN_TYPE,
-} from './combo-box';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean, select } from '@storybook/addon-knobs';
+import { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from './combo-box';
 import './combo-box-item';
 import storyDocs from './combo-box-story.mdx';
+import { prefix } from '../../globals/settings';
+import textNullable from '../../../.storybook/knob-text-nullable';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${DROPDOWN_COLOR_SCHEME.LIGHT})`]: DROPDOWN_COLOR_SCHEME.LIGHT,
-};
+const items = [
+  {
+    value: 'option-0',
+    text: 'An example option that is really long to show what should be done to handle long text',
+  },
+  {
+    value: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    value: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    value: 'option-3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
+  },
+  {
+    value: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    value: 'option-5',
+    text: 'Option 5',
+  },
+];
 
-const types = {
-  Regular: null,
-  [`Inline (${DROPDOWN_TYPE.INLINE})`]: DROPDOWN_TYPE.INLINE,
+const directionOptions = {
+  [`Top`]: DROPDOWN_DIRECTION.TOP,
+  [`Bottom`]: DROPDOWN_DIRECTION.BOTTOM,
 };
 
 const sizes = {
-  'Regular size': null,
   [`Small size (${DROPDOWN_SIZE.SMALL})`]: DROPDOWN_SIZE.SMALL,
-  [`Extra large size (${DROPDOWN_SIZE.EXTRA_LARGE})`]:
-    DROPDOWN_SIZE.EXTRA_LARGE,
+  'Regular size': null,
+  [`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
 };
 
-export const Default = (args) => {
+export const Default = () => {
+  return html`
+    <cds-combo-box
+      helper-text="Combobox helper text"
+      title-text="ComboBox title">
+      ${items.map(
+        (elem) => html`
+          <cds-combo-box-item ?disabled=${elem.disabled} value="${elem.value}"
+            >${elem.text}</cds-combo-box-item
+          >
+        `
+      )}
+    </cds-combo-box>
+  `;
+};
+
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <div style="width:300px">
+        <cds-combo-box
+          title-text="ComboBox label"
+          helper-text="Combobox helper text"
+          label="Dropdown menu options">
+          ${items.map(
+            (elem) => html`
+              <cds-combo-box-item
+                ?disabled=${elem.disabled}
+                value="${elem.value}"
+                >${elem.text}</cds-combo-box-item
+              >
+            `
+          )}
+        </cds-combo-box>
+      </div>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
   const {
-    open,
-    colorScheme,
     disabled,
     helperText,
     invalid,
-    labelText,
+    titleText,
+    hideLabel,
+    direction,
+    readOnly,
+    warn,
+    warnText,
     size,
-    triggerContent,
+    label,
     type,
-    validityMessage,
+    invalidText,
     value,
-    disableSelection,
-    disableToggle,
-    onBeforeSelect,
-    onBeforeToggle,
-    onSelect,
-    onToggle,
-  } = args?.['bx-combo-box'] ?? {};
-  const handleBeforeSelect = (event: CustomEvent) => {
-    if (onBeforeSelect) {
-      onBeforeSelect(event);
-    }
-    if (disableSelection) {
-      event.preventDefault();
-    }
-  };
-  const handleBeforeToggle = (event: CustomEvent) => {
-    if (onBeforeToggle) {
-      onBeforeToggle(event);
-    }
-    if (disableToggle) {
-      event.preventDefault();
-    }
-  };
+  } = args?.[`${prefix}-combo-box`] ?? {};
   return html`
-    <bx-combo-box
-      ?open=${open}
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled=${disabled}
+    <cds-combo-box
+      ?disabled="${disabled}"
+      ?hide-label=${hideLabel}
+      helper-text=${ifDefined(helperText)}
       ?invalid=${invalid}
-      helper-text=${helperText}
-      label-text=${labelText}
-      size="${ifNonNull(size)}"
-      validity-message=${validityMessage}
-      value=${value}
-      trigger-content=${triggerContent}
-      type=${ifNonNull(type)}
-      @bx-combo-box-beingselected=${handleBeforeSelect}
-      @bx-combo-box-beingtoggled=${handleBeforeToggle}
-      @bx-combo-box-selected=${onSelect}
-      @bx-combo-box-toggled=${onToggle}>
-      <bx-combo-box-item value="all">Option 1</bx-combo-box-item>
-      <bx-combo-box-item value="cloudFoundry">Option 2</bx-combo-box-item>
-      <bx-combo-box-item value="staging">Option 3</bx-combo-box-item>
-      <bx-combo-box-item value="dea">Option 4</bx-combo-box-item>
-      <bx-combo-box-item value="router">Option 5</bx-combo-box-item>
-      <bx-combo-box-item value="support">Option 6</bx-combo-box-item>
-      <bx-combo-box-item value="services">Option 7</bx-combo-box-item>
-      <bx-combo-box-item value="products">Option 8</bx-combo-box-item>
-    </bx-combo-box>
+      invalid-text=${invalidText}
+      direction="${direction}"
+      ?read-only=${readOnly}
+      title-text=${ifDefined(titleText)}
+      size="${ifDefined(size)}"
+      type="${ifDefined(type)}"
+      value=${ifDefined(value)}
+      label=${ifDefined(label)}
+      ?warn=${warn}
+      warn-text=${warnText}>
+      ${items.map(
+        (elem) => html`
+          <cds-combo-box-item ?disabled=${elem.disabled} value="${elem.value}"
+            >${elem.text}</cds-combo-box-item
+          >
+        `
+      )}
+    </cds-combo-box>
   `;
 };
 
-Default.storyName = 'Default';
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-combo-box`]: () => ({
+      direction: select(
+        'Direction',
+        directionOptions,
+        DROPDOWN_DIRECTION.BOTTOM
+      ),
+      disabled: boolean('Disabled (disabled)', false),
+      helperText: textNullable(
+        'Helper text (helper-text)',
+        'Optional helper text'
+      ),
+      hideLabel: boolean('Hide label (hide-label)', false),
+      invalid: boolean('Invalid (invalid)', false),
+      invalidText: textNullable(
+        'Invalid text (invalid-text)',
+        'invalid selection'
+      ),
+      readOnly: boolean('Read only (read-only)', false),
+      titleText: textNullable('Title text (title-text)', 'ComboBox title'),
+      size: select('Size (size)', sizes, null),
+      value: textNullable('Selected value (value)', ''),
+      label: textNullable('Placeholder (label)', ''),
+      warn: boolean('Warn (warn)', false),
+      warnText: textNullable(
+        'Warn text (warn-text)',
+        'please notice the warning'
+      ),
+    }),
+  },
+};
 
 export default {
   title: 'Components/Combo box',
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-combo-box': () => ({
-        open: boolean('Open (open)', false),
-        colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
-        disabled: boolean('Disabled (disabled)', false),
-        helperText: text('Helper text (helper-text)', 'Optional helper text'),
-        invalid: boolean('Show invalid state  (invalid)', false),
-        labelText: text('Label text (label-text)', 'Combo box title'),
-        size: select('Dropdown size (size)', sizes, null),
-        triggerContent: text(
-          'The placeholder content (trigger-content)',
-          'Filter...'
-        ),
-        type: select('UI type (type)', types, null),
-        validityMessage: text('The validity message (validity-message)', ''),
-        value: text('The value of the selected item (value)', ''),
-        disableSelection: boolean(
-          'Disable user-initiated selection change (Call event.preventDefault() in bx-combo-box-beingselected event)',
-          false
-        ),
-        disableToggle: boolean(
-          'Disable user-initiated toggle of open state (Call event.preventDefault() in bx-combo-box-beingtoggled event)',
-          false
-        ),
-        onBeforeSelect: action('bx-combo-box-beingselected'),
-        onBeforeToggle: action('bx-combo-box-beingtoggled'),
-        onSelect: action('bx-combo-box-selected'),
-        onToggle: action('bx-combo-box-toggled'),
-      }),
-    },
   },
+  decorators: [
+    (story, { name }) => {
+      const width = !name.toLowerCase().includes('layer') ? `width:300px` : ``;
+      return html` <div style="${width}">${story()}</div> `;
+    },
+  ],
 };
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.scss b/packages/carbon-web-components/src/components/combo-box/combo-box.scss
index 0e4247ad6fa..ee1fbba470e 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box.scss
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,11 +7,20 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/combo-box/combo-box';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/text-input/text-input';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/combo-box' as *;
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/text-input/text-input';
+@use '../dropdown/dropdown.scss';
 
 :host(#{$prefix}-combo-box) {
+  @extend :host(#{$prefix}-dropdown);
+  @include emit-layout-tokens();
+
   outline: none;
 
   .#{$prefix}--assistive-text {
@@ -20,32 +29,39 @@ $css--plex: true !default;
     top: -100%;
   }
 
-  .#{$prefix}--label[hidden] {
-    display: none;
-  }
-
-  .#{$prefix}--list-box__field,
-  // To get more specifity than:
-  // https://github.com/carbon-design-system/carbon/blob/v10.16.0/packages/components/src/components/list-box/_list-box.scss#L126
-  .#{$prefix}--list-box[data-invalid] .#{$prefix}--list-box__field {
+  .#{$prefix}--list-box__field {
     padding: 0;
   }
 
   .#{$prefix}--list-box__menu {
+    outline: none;
     top: 100%;
     margin-top: 1px;
   }
 }
 
-:host(#{$prefix}-combo-box[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+:host(#{$prefix}-combo-box[isClosable]) {
+  .#{$prefix}--list-box__invalid-icon {
+    right: rem(66px) !important;
+  }
+}
 
-  .#{$prefix}--list-box__field {
-    padding-left: 0;
+:host(#{$prefix}-combo-box[disabled]),
+:host(#{$prefix}-combo-box[read-only]) {
+  .#{$prefix}--list-box__selection {
+    pointer-events: none;
   }
+}
 
-  .#{$prefix}--text-input {
-    border-bottom: none;
+:host(#{$prefix}-combo-box[invalid]) {
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
+
+:host(#{$prefix}-combo-box[read-only]) {
+  .#{$prefix}--list-box__selection svg {
+    fill: $icon-disabled;
   }
 }
 
@@ -55,34 +71,21 @@ $css--plex: true !default;
   display: block;
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    height: auto;
   }
-}
 
-:host(#{$prefix}-combo-box-item[size='sm']) {
-  height: rem(32px);
-
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+  &:hover {
+    background-color: $layer-hover;
   }
 }
 
-:host(#{$prefix}-combo-box-item[size='xl']) {
-  height: rem(48px);
-
+:host(#{$prefix}-combo-box-item[disabled]) {
   .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+    color: $text-disabled;
+    text-decoration: none;
   }
 }
 
-:host(#{$prefix}-combo-box-item[disabled])
-  .#{$prefix}--list-box__menu-item__option {
-  color: $disabled-02;
-  text-decoration: none;
-}
-
 :host(#{$prefix}-combo-box-item[highlighted]) {
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
@@ -92,10 +95,28 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
-    color: $text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--list-box__menu-item__selected-icon {
     display: block;
   }
 }
+
+:host(#{$prefix}-combo-box-item[size='sm']) {
+  height: $spacing-07;
+
+  .#{$prefix}--list-box__menu-item__option {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+}
+
+:host(#{$prefix}-combo-box-item[size='lg']) {
+  height: $spacing-09;
+
+  .#{$prefix}--list-box__menu-item__option {
+    padding-top: rem(15px);
+    padding-bottom: rem(15px);
+  }
+}
diff --git a/packages/carbon-web-components/src/components/combo-box/combo-box.ts b/packages/carbon-web-components/src/components/combo-box/combo-box.ts
index 9d1f61bea5e..1afcef774bd 100644
--- a/packages/carbon-web-components/src/components/combo-box/combo-box.ts
+++ b/packages/carbon-web-components/src/components/combo-box/combo-box.ts
@@ -7,39 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { TemplateResult } from 'lit-html';
-import { html, property, query } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { TemplateResult, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import Close16 from '@carbon/icons/lib/close/16';
+import { prefix } from '../../globals/settings';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
-import BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
-import BXComboBoxItem from './combo-box-item';
+import CDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
+import CDSComboBoxItem from './combo-box-item';
 import styles from './combo-box.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export {
-  DROPDOWN_COLOR_SCHEME,
-  DROPDOWN_SIZE,
-  DROPDOWN_TYPE,
-} from '../dropdown/dropdown';
-
-const { prefix } = settings;
+export { DROPDOWN_DIRECTION, DROPDOWN_SIZE } from '../dropdown/dropdown';
 
 /**
  * Combo box.
  *
- * @element bx-combo-box
- * @fires bx-combo-box-beingselected
+ * @element cds-combo-box
+ * @fires cds-combo-box-beingselected
  *   The custom event fired before a combo box item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-combo-box-beingtoggled
+ * @fires cds-combo-box-beingtoggled
  *   The custom event fired before the open state of this combo box is toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated toggling.
- * @fires bx-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.
- * @fires bx-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.
+ * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.
+ * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.
  */
 @customElement(`${prefix}-combo-box`)
-class BXComboBox extends BXDropdown {
+class CDSComboBox extends CDSDropdown {
   /**
    * The text content that should be set to the `<input>` for filtering.
    */
@@ -85,7 +80,7 @@ class BXComboBox extends BXDropdown {
    * @returns `true` if the given combo box item matches the given query text.
    */
   protected _defaultItemMatches(
-    item: BXComboBoxItem,
+    item: CDSComboBoxItem,
     queryText: string
   ): boolean {
     return (
@@ -98,8 +93,14 @@ class BXComboBox extends BXDropdown {
    * Handles `input` event on the `<input>` for filtering.
    */
   protected _handleInput() {
+    if (this._filterInputValue.length != 0) {
+      this.setAttribute('isClosable', '');
+    } else {
+      this.removeAttribute('isClosable');
+    }
+
     const items = this.querySelectorAll(
-      (this.constructor as typeof BXComboBox).selectorItem
+      (this.constructor as typeof CDSComboBox).selectorItem
     );
     const index = !this._filterInputNode.value
       ? -1
@@ -125,7 +126,7 @@ class BXComboBox extends BXDropdown {
           }
         }
       }
-      (item as BXComboBoxItem).highlighted = i === index;
+      (item as CDSComboBoxItem).highlighted = i === index;
     });
     const { _filterInputNode: filterInput } = this;
     this._filterInputValue = !filterInput ? '' : filterInput.value;
@@ -134,7 +135,8 @@ class BXComboBox extends BXDropdown {
   }
 
   protected _handleClickInner(event: MouseEvent) {
-    if (this._selectionButtonNode?.contains(event.target as Node)) {
+    const { target } = event as any;
+    if (this._selectionButtonNode?.contains(target)) {
       this._handleUserInitiatedClearInput();
     } else {
       super._handleClickInner(event);
@@ -143,7 +145,7 @@ class BXComboBox extends BXDropdown {
 
   protected _handleKeypressInner(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof BXDropdown).getAction(key);
+    const action = (this.constructor as typeof CDSDropdown).getAction(key);
     const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;
     if (
       this._selectionButtonNode?.contains(event.target as Node) &&
@@ -162,10 +164,10 @@ class BXComboBox extends BXDropdown {
   protected _handleUserInitiatedClearInput() {
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof BXComboBox).selectorItem
+        (this.constructor as typeof CDSComboBox).selectorItem
       ),
       (item) => {
-        (item as BXComboBoxItem).highlighted = false;
+        (item as CDSComboBoxItem).highlighted = false;
       }
     );
     this._filterInputValue = '';
@@ -173,7 +175,7 @@ class BXComboBox extends BXDropdown {
     this._handleUserInitiatedSelectItem();
   }
 
-  protected _handleUserInitiatedSelectItem(item?: BXComboBoxItem) {
+  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {
     if (item && !this._selectionShouldChange(item)) {
       // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,
       // given we want to update the `<input>` and close the dropdown even if selection doesn't update.
@@ -190,14 +192,14 @@ class BXComboBox extends BXDropdown {
     super._handleUserInitiatedSelectItem(item);
   }
 
-  protected _selectionDidChange(itemToSelect?: BXComboBoxItem) {
+  protected _selectionDidChange(itemToSelect?: CDSComboBoxItem) {
     this.value = !itemToSelect ? '' : itemToSelect.value;
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof BXDropdown).selectorItemSelected
+        (this.constructor as typeof CDSDropdown).selectorItemSelected
       ),
       (item) => {
-        (item as BXComboBoxItem).selected = false;
+        (item as CDSComboBoxItem).selected = false;
       }
     );
     if (itemToSelect) {
@@ -207,31 +209,47 @@ class BXComboBox extends BXDropdown {
     this._handleUserInitiatedToggle(false);
   }
 
-  protected _renderTriggerContent(): TemplateResult {
+  protected _renderLabel(): TemplateResult {
     const {
       disabled,
       inputLabel,
-      triggerContent,
+      label,
+      readOnly,
+      value,
       _filterInputValue: filterInputValue,
       _handleInput: handleInput,
     } = this;
+
+    const inputClasses = classMap({
+      [`${prefix}--text-input`]: true,
+      [`${prefix}--text-input--empty`]: !value,
+    });
+
     return html`
       <input
         id="trigger-label"
-        class="${prefix}--text-input"
+        class="${inputClasses}"
         ?disabled=${disabled}
-        placeholder="${triggerContent}"
+        placeholder="${label}"
         .value=${filterInputValue}
         role="combobox"
         aria-label="${inputLabel}"
         aria-controls="menu-body"
         aria-autocomplete="list"
+        ?readonly=${readOnly}
         @input=${handleInput} />
     `;
   }
 
-  protected _renderFollowingTriggerContent(): TemplateResult | void {
+  protected _renderFollowingLabel(): TemplateResult | void {
     const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;
+
+    if (filterInputValue.length != 0) {
+      this.setAttribute('isClosable', '');
+    } else {
+      this.removeAttribute('isClosable');
+    }
+
     return filterInputValue.length === 0
       ? undefined
       : html`
@@ -262,7 +280,7 @@ class BXComboBox extends BXDropdown {
    * The custom item matching callback.
    */
   @property({ attribute: false })
-  itemMatches!: (item: BXComboBoxItem, queryText: string) => boolean;
+  itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;
 
   shouldUpdate(changedProperties) {
     super.shouldUpdate(changedProperties);
@@ -337,4 +355,4 @@ class BXComboBox extends BXDropdown {
   static styles = styles;
 }
 
-export default BXComboBox;
+export default CDSComboBox;
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts b/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts
index 2856b42a85b..58498e8199b 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher-item.ts
@@ -7,23 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './content-switcher.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Content switcher button.
  *
- * @element bx-content-switcher-item
+ * @element cds-content-switcher-item
  */
 @customElement(`${prefix}-content-switcher-item`)
-class BXContentSwitcherItem extends FocusMixin(LitElement) {
+export default class CDSContentSwitcherItem extends FocusMixin(LitElement) {
   /**
    * `true` if this content switcher item should be disabled.
    */
@@ -53,18 +52,62 @@ class BXContentSwitcherItem extends FocusMixin(LitElement) {
   target!: string;
 
   /**
-   * The `value` attribute that is set to the parent `<bx-content-switcher>` when this content switcher item is selected.
+   * The `value` attribute that is set to the parent `<cds-content-switcher>`
+   * when this content switcher item is selected.
    */
   @property()
   value = '';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
+  /**
+   * `true` if the content switcher button should be icon-only.
+   */
+  @property({ type: Boolean, reflect: true })
+  icon = false;
+
+  /**
+   * Specify how the trigger should align with the tooltip for icon-only
+   * switcher item
+   */
+  @property({ reflect: true, type: String })
+  align = 'top';
+
+  /**
+   * Determines whether the tooltip should close when inner content is
+   * activated (click, Enter or Space)
+   */
+  @property({ attribute: 'close-on-activation', reflect: true, type: Boolean })
+  closeOnActivation = true;
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the
+   * tooltip for icon-only switcher item
+   */
+  enterDelayMs = 100;
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   * for icon-only switcher-item
+   *
+   * TODO: match upstream value once #10471 is resolved
+   */
+  leaveDelayMs = 100;
+
+  updated(changedProperties) {
+    if (changedProperties) {
+      this.shadowRoot
+        ?.querySelector(`${prefix}-tooltip`)
+        ?.shadowRoot?.querySelector(`.${prefix}--tooltip`)
+        ?.classList.add(`${prefix}--icon-tooltip`);
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderTooltipContent() {
+    return html`
+      <cds-tooltip-content>
+        <slot name="tooltip-content"></slot>
+      </cds-tooltip-content>
+    `;
   }
 
   shouldUpdate(changedProperties) {
@@ -73,10 +116,8 @@ class BXContentSwitcherItem extends FocusMixin(LitElement) {
       if (target) {
         const doc = this.getRootNode() as HTMLDocument;
         // `doc` can be an element if such element is orphaned
-        const targetNode = doc.getElementById && doc.getElementById(target);
-        if (targetNode) {
-          targetNode.toggleAttribute('hidden', !selected);
-        }
+        const targetNode = doc?.getElementById(target);
+        targetNode?.toggleAttribute('hidden', !selected);
       }
     }
     return true;
@@ -88,20 +129,33 @@ class BXContentSwitcherItem extends FocusMixin(LitElement) {
       [`${prefix}--content-switcher-btn`]: true,
       [`${prefix}--content-switcher--selected`]: selected,
     });
-    return html`
-      <button
-        type="button"
-        role="tab"
-        class="${className}"
-        ?disabled="${disabled}"
-        aria-controls="${ifNonNull(target)}"
-        aria-selected="${Boolean(selected)}">
-        <span class="${prefix}--content-switcher__label"><slot></slot></span>
-      </button>
-    `;
+    const switcherItem = html`<button
+      type="button"
+      role="tab"
+      class="${className}"
+      ?disabled="${disabled}"
+      tabindex="${selected ? '0' : '-1'}"
+      aria-controls="${ifDefined(target)}"
+      aria-selected="${Boolean(selected)}">
+      <span class="${prefix}--content-switcher__label"><slot></slot></span>
+    </button>`;
+
+    if (this.icon) {
+      const { align, closeOnActivation, enterDelayMs, leaveDelayMs } = this;
+      return html`<cds-tooltip
+        align=${align}
+        close-on-activation="${closeOnActivation}"
+        enter-delay-ms=${enterDelayMs}
+        leave-delay-ms=${leaveDelayMs}>
+        ${switcherItem} ${this._renderTooltipContent()}
+      </cds-tooltip>`;
+    }
+    return switcherItem;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
-
-export default BXContentSwitcherItem;
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
index 4e551b8614d..5fc64fc0d7b 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Content switcher
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/content-switcher)
 
 Content switcher manipulates the content shown following an exclusive or
 “either/or” pattern. It is used to toggle between two or more content sections
@@ -29,21 +29,23 @@ import '@carbon/web-components/es/components/content-switcher/index.js';
 ### HTML
 
 ```html
-<bx-content-switcher>
-  <bx-content-switcher-item value="all">Option 1</bx-content-switcher-item>
-  <bx-content-switcher-item value="cloudFoundry" disabled
-    >Option 2</bx-content-switcher-item
+<cds-content-switcher>
+  <cds-content-switcher-item value="all">Option 1</cds-content-switcher-item>
+  <cds-content-switcher-item value="cloudFoundry" disabled
+    >Option 2</cds-content-switcher-item
   >
-  <bx-content-switcher-item value="staging">Option 3</bx-content-switcher-item>
-  <bx-content-switcher-item value="dea">Option 4</bx-content-switcher-item>
-  <bx-content-switcher-item value="router">Option 5</bx-content-switcher-item>
-</bx-content-switcher>
+  <cds-content-switcher-item value="staging"
+    >Option 3</cds-content-switcher-item
+  >
+  <cds-content-switcher-item value="dea">Option 4</cds-content-switcher-item>
+  <cds-content-switcher-item value="router">Option 5</cds-content-switcher-item>
+</cds-content-switcher>
 ```
 
-## `<bx-content-switcher>` attributes, properties and events
+## `<cds-content-switcher>` attributes, properties and events
 
-<Props of="bx-content-switcher" />
+<Props of="cds-content-switcher" />
 
-## `<bx-content-switcher-item>` attributes and properties
+## `<cds-content-switcher-item>` attributes and properties
 
-<Props of="bx-content-switcher-item" />
+<Props of="cds-content-switcher-item" />
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts
index cf4d52e0d91..5bdff77ba51 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher-story.ts
@@ -1,82 +1,150 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { CONTENT_SWITCHER_SIZE } from './content-switcher';
 import './content-switcher-item';
 import storyDocs from './content-switcher-story.mdx';
+import { prefix } from '../../globals/settings';
+import TableOfContents16 from '@carbon/web-components/es/icons/table-of-contents/16';
+import Workspace16 from '@carbon/web-components/es/icons/workspace/16';
+import ViewMode2_16 from '@carbon/web-components/es/icons/view--mode-2/16';
+import '../../../.storybook/templates/with-layer';
 
 const noop = () => {};
 
 const sizes = {
-  'Regular size': null,
-  [`Small size (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL,
-  [`XL size (${CONTENT_SWITCHER_SIZE.EXTRA_LARGE})`]:
-    CONTENT_SWITCHER_SIZE.EXTRA_LARGE,
+  'Medium (md - default)': null,
+  [`Small (${CONTENT_SWITCHER_SIZE.SMALL})`]: CONTENT_SWITCHER_SIZE.SMALL,
+  [`Large (${CONTENT_SWITCHER_SIZE.LARGE})`]: CONTENT_SWITCHER_SIZE.LARGE,
 };
 
-export const Default = (args) => {
+export const Default = () => html`
+  <cds-content-switcher value="all">
+    <cds-content-switcher-item value="all">
+      First section
+    </cds-content-switcher-item>
+    <cds-content-switcher-item value="cloudFoundry">
+      Second section
+    </cds-content-switcher-item>
+    <cds-content-switcher-item value="staging">
+      Third section
+    </cds-content-switcher-item>
+  </cds-content-switcher>
+`;
+
+export default {
+  title: 'Components/Content switcher',
+};
+
+export const IconOnly = () => html`
+  <cds-content-switcher value="all">
+    <cds-content-switcher-item icon value="all">
+      ${TableOfContents16()}
+      <span slot="tooltip-content">Table of Contents</span>
+    </cds-content-switcher-item>
+    <cds-content-switcher-item icon value="cloudFoundry">
+      ${Workspace16()}
+      <span slot="tooltip-content">Workspace Test</span>
+    </cds-content-switcher-item>
+    <cds-content-switcher-item icon value="staging">
+      ${ViewMode2_16()}
+      <span slot="tooltip-content">View Mode</span>
+    </cds-content-switcher-item>
+  </cds-content-switcher>
+`;
+
+export const IconOnlyWithLayer = () => html`
+  <sb-template-layers>
+    <cds-content-switcher value="all">
+      <cds-content-switcher-item icon value="all">
+        ${TableOfContents16()}
+        <span slot="tooltip-content">Table of Contents</span>
+      </cds-content-switcher-item>
+      <cds-content-switcher-item icon value="cloudFoundry">
+        ${Workspace16()}
+        <span slot="tooltip-content">Workspace Test</span>
+      </cds-content-switcher-item>
+      <cds-content-switcher-item icon value="staging">
+        ${ViewMode2_16()}
+        <span slot="tooltip-content">View Mode</span>
+      </cds-content-switcher-item>
+    </cds-content-switcher>
+  </sb-template-layers>
+`;
+
+export const WithLayer = () => html`
+  <sb-template-layers>
+    <cds-content-switcher value="all">
+      <cds-content-switcher-item value="all">
+        First section
+      </cds-content-switcher-item>
+      <cds-content-switcher-item value="cloudFoundry">
+        Second section
+      </cds-content-switcher-item>
+      <cds-content-switcher-item value="staging">
+        Third section
+      </cds-content-switcher-item>
+    </cds-content-switcher>
+  </sb-template-layers>
+`;
+
+export const Playground = (args) => {
   const {
     value,
     disableSelection,
     onBeforeSelect = noop,
     onSelect = noop,
     size,
-  } = args?.['bx-content-switcher'] ?? {};
+  } = args?.[`${prefix}-content-switcher`] ?? {};
   const handleBeforeSelected = (event: CustomEvent) => {
     onBeforeSelect(event);
     if (disableSelection) {
       event.preventDefault();
     }
   };
+
   return html`
-    <bx-content-switcher
-      value="${ifNonNull(value)}"
-      @bx-content-switcher-beingselected="${handleBeforeSelected}"
-      @bx-content-switcher-selected="${onSelect}"
+    <cds-content-switcher
+      value="${ifDefined(value)}"
+      @cds-content-switcher-beingselected="${handleBeforeSelected}"
+      @cds-content-switcher-selected="${onSelect}"
       size="${size}">
-      <bx-content-switcher-item value="all">Option 1</bx-content-switcher-item>
-      <bx-content-switcher-item value="cloudFoundry" disabled
-        >Option 2</bx-content-switcher-item
-      >
-      <bx-content-switcher-item value="staging"
-        >Option 3</bx-content-switcher-item
-      >
-      <bx-content-switcher-item value="dea">Option 4</bx-content-switcher-item>
-      <bx-content-switcher-item value="router"
-        >Option 5</bx-content-switcher-item
-      >
-    </bx-content-switcher>
+      <cds-content-switcher-item value="all">
+        First section
+      </cds-content-switcher-item>
+      <cds-content-switcher-item value="cloudFoundry">
+        Second section
+      </cds-content-switcher-item>
+      <cds-content-switcher-item value="staging">
+        Third section
+      </cds-content-switcher-item>
+    </cds-content-switcher>
   `;
 };
 
-Default.storyName = 'Default';
-
-export default {
-  title: 'Components/Content switcher',
-  parameters: {
-    ...storyDocs.parameters,
-    knobs: {
-      'bx-content-switcher': () => ({
-        value: textNullable('The value of the selected item (value)', ''),
-        size: select('Button size (size)', sizes, null),
-        disableSelection: boolean(
-          'Disable user-initiated selection change (Call event.preventDefault() in bx-content-switcher-beingselected event)',
-          false
-        ),
-        onBeforeSelect: action('bx-content-switcher-beingselected'),
-        onSelect: action('bx-content-switcher-selected'),
-      }),
-    },
+Playground.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    [`${prefix}-content-switcher`]: () => ({
+      value: textNullable('The value of the selected item (value)', ''),
+      size: select('Button size (size)', sizes, null),
+      disableSelection: boolean(
+        `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`,
+        false
+      ),
+      onBeforeSelect: action(`${prefix}-content-switcher-beingselected`),
+      onSelect: action(`${prefix}-content-switcher-selected`),
+    }),
   },
 };
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss b/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss
index 3c294a9b403..e530ed5776b 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,26 +7,42 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/content-switcher/content-switcher';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/content-switcher/content-switcher' as *;
+@use '@carbon/styles/scss/layout' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include content-switcher;
 
 :host(#{$prefix}-content-switcher) {
   @extend .#{$prefix}--content-switcher;
+  @include emit-layout-tokens();
+}
+
+:host(#{$prefix}-content-switcher[icon]) {
+  @extend .#{$prefix}--content-switcher--icon-only;
 }
 
 :host(#{$prefix}-content-switcher[size='sm']) {
-  @extend .#{$prefix}--content-switcher--sm;
+  @extend .#{$prefix}--layout--size-sm;
 }
 
-:host(#{$prefix}-content-switcher[size='xl']) {
-  @extend .#{$prefix}--content-switcher--xl;
+:host(#{$prefix}-content-switcher[size='lg']) {
+  @extend .#{$prefix}--layout--size-lg;
 }
 
 :host(#{$prefix}-content-switcher-item) {
-  width: 100%;
   outline: none;
+  width: 100%;
 
   .#{$prefix}--content-switcher-btn {
     height: 100%;
+    width: 100%;
+    align-items: center;
+    padding: $spacing-03 var(--cds-layout-density-padding-inline-local);
 
     &:first-child,
     &:last-child {
@@ -38,9 +54,9 @@ $css--plex: true !default;
     &::before {
       content: '';
       display: block;
-      height: rem(16px);
+      height: $spacing-05;
       width: rem(1px);
-      background-color: $content-switcher-divider;
+      background-color: $border-subtle;
       position: absolute;
       z-index: 2;
       left: 0;
@@ -55,12 +71,27 @@ $css--plex: true !default;
     }
 
     &:disabled {
-      border-top-color: $ui-05;
-      border-bottom-color: $ui-05;
+      border-top-color: $border-inverse;
+      border-bottom-color: $border-inverse;
     }
   }
 }
 
+:host(#{$prefix}-content-switcher-item)[icon] {
+  width: initial;
+
+  .#{$prefix}--content-switcher-btn {
+    padding-left: rem(11px);
+    padding-right: rem(11px);
+    height: $spacing-08;
+  }
+
+  .#{$prefix}--content-switcher__label {
+    display: flex;
+    align-items: center;
+  }
+}
+
 :host(#{$prefix}-content-switcher-item[hide-divider])
   .#{$prefix}--content-switcher-btn::before {
   background-color: transparent;
@@ -68,26 +99,18 @@ $css--plex: true !default;
 
 :host(#{$prefix}-content-switcher-item:first-of-type)
   .#{$prefix}--content-switcher-btn {
-  border-top-left-radius: rem(4px);
-  border-bottom-left-radius: rem(4px);
-  border-left: rem(1px) solid $ui-05;
+  border-top-left-radius: $spacing-02;
+  border-bottom-left-radius: $spacing-02;
+  border-left: rem(1px) solid $border-inverse;
 
   &::before {
     content: none;
   }
-
-  &.#{$prefix}--content-switcher--selected {
-    border-left: none;
-  }
 }
 
 :host(#{$prefix}-content-switcher-item:last-of-type)
   .#{$prefix}--content-switcher-btn {
-  border-top-right-radius: rem(4px);
-  border-bottom-right-radius: rem(4px);
-  border-right: rem(1px) solid $ui-05;
-
-  &.#{$prefix}--content-switcher--selected {
-    border-right: none;
-  }
+  border-top-right-radius: $spacing-02;
+  border-bottom-right-radius: $spacing-02;
+  border-right: rem(1px) solid $border-inverse;
 }
diff --git a/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts b/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts
index 5c8d35fd50a..329ea8f2496 100644
--- a/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts
+++ b/packages/carbon-web-components/src/components/content-switcher/content-switcher.ts
@@ -7,18 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { forEach, indexOf } from '../../globals/internal/collection-helpers';
 import { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE } from './defs';
-import BXSwitch from './content-switcher-item';
+import CDSContentSwitcherItem from './content-switcher-item';
 import styles from './content-switcher.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { NAVIGATION_DIRECTION, CONTENT_SWITCHER_SIZE };
 
-const { prefix } = settings;
-
 /**
  * @param index The index
  * @param length The length of the array.
@@ -37,21 +36,21 @@ const capIndex = (index: number, length: number) => {
 /**
  * Content switcher.
  *
- * @element bx-content-switcher
- * @fires bx-content-switcher-beingselected
+ * @element cds-content-switcher
+ * @fires cds-content-switcher-beingselected
  *   The custom event fired before a content switcher item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-content-switcher-selected - The custom event fired after a a content switcher item is selected upon a user gesture.
+ * @fires cds-content-switcher-selected - The custom event fired after a a content switcher item is selected upon a user gesture.
  */
 @customElement(`${prefix}-content-switcher`)
-class BXContentSwitcher extends LitElement {
+export default class CDSContentSwitcher extends LitElement {
   /**
    * Handles `mouseover`/`mouseout` events on `<slot>`.
    *
    * @param event The event.
    */
   private _handleHover({ target, type }: MouseEvent) {
-    const { selectorItem } = this.constructor as typeof BXContentSwitcher;
+    const { selectorItem } = this.constructor as typeof CDSContentSwitcher;
     const items = this.querySelectorAll(selectorItem);
     const index =
       type !== 'mouseover'
@@ -59,10 +58,19 @@ class BXContentSwitcher extends LitElement {
         : indexOf(items, (target as Element).closest(selectorItem)!);
     const nextIndex = index < 0 ? index : index + 1;
     forEach(this.querySelectorAll(selectorItem), (elem, i) => {
-      // Specifies child `<bx-content-switcher-item>` to hide its divider instead of using CSS,
+      // Specifies child `<cds-content-switcher-item>` to hide its divider instead of using CSS,
       // until `:host-context()` gets supported in all major browsers
-      (elem as BXSwitch).hideDivider = i === nextIndex;
+      (elem as CDSContentSwitcherItem).hideDivider = i === nextIndex;
     });
+
+    const { selectorItemSelected } = this
+      .constructor as typeof CDSContentSwitcher;
+    const selectedItem = this.querySelector(selectorItemSelected);
+    const nextItem = this._getNextItem(
+      selectedItem as CDSContentSwitcherItem,
+      1
+    );
+    (nextItem as CDSContentSwitcherItem).hideDivider = true;
   }
 
   /**
@@ -70,9 +78,12 @@ class BXContentSwitcher extends LitElement {
    * @param direction The navigation direction.
    * @returns The item to be selected.
    */
-  protected _getNextItem(currentItem: BXSwitch, direction: number) {
+  protected _getNextItem(
+    currentItem: CDSContentSwitcherItem,
+    direction: number
+  ) {
     const items = this.querySelectorAll(
-      (this.constructor as typeof BXContentSwitcher).selectorItemEnabled
+      (this.constructor as typeof CDSContentSwitcher).selectorItemEnabled
     );
     const currentIndex = indexOf(items, currentItem);
     const nextIndex = capIndex(currentIndex + direction, items.length);
@@ -85,7 +96,7 @@ class BXContentSwitcher extends LitElement {
    * @param event The event.
    */
   protected _handleClick({ target }: MouseEvent) {
-    this._handleUserInitiatedSelectItem(target as BXSwitch);
+    this._handleUserInitiatedSelectItem(target as CDSContentSwitcherItem);
   }
 
   /**
@@ -104,7 +115,7 @@ class BXContentSwitcher extends LitElement {
    *
    * @param [item] The content switcher item user wants to select.
    */
-  protected _handleUserInitiatedSelectItem(item: BXSwitch) {
+  protected _handleUserInitiatedSelectItem(item: CDSContentSwitcherItem) {
     if (!item.disabled && item.value !== this.value) {
       const init = {
         bubbles: true,
@@ -113,7 +124,7 @@ class BXContentSwitcher extends LitElement {
           item,
         },
       };
-      const constructor = this.constructor as typeof BXContentSwitcher;
+      const constructor = this.constructor as typeof CDSContentSwitcher;
       const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {
         ...init,
         cancelable: true,
@@ -133,13 +144,13 @@ class BXContentSwitcher extends LitElement {
    */
   protected _navigate(direction: number) {
     const { selectorItemSelected } = this
-      .constructor as typeof BXContentSwitcher;
+      .constructor as typeof CDSContentSwitcher;
     const nextItem = this._getNextItem(
-      this.querySelector(selectorItemSelected) as BXSwitch,
+      this.querySelector(selectorItemSelected) as CDSContentSwitcherItem,
       direction
     );
     if (nextItem) {
-      this._handleUserInitiatedSelectItem(nextItem as BXSwitch);
+      this._handleUserInitiatedSelectItem(nextItem as CDSContentSwitcherItem);
       this.requestUpdate();
     }
   }
@@ -149,20 +160,33 @@ class BXContentSwitcher extends LitElement {
    *
    * @param itemToSelect A content switcher item.
    */
-  protected _selectionDidChange(itemToSelect: BXSwitch) {
+  protected _selectionDidChange(itemToSelect: CDSContentSwitcherItem) {
     this.value = itemToSelect.value;
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof BXContentSwitcher).selectorItemSelected
+        (this.constructor as typeof CDSContentSwitcher).selectorItemSelected
       ),
       (item) => {
-        (item as BXSwitch).selected = false;
+        (item as CDSContentSwitcherItem).selected = false;
       }
     );
     itemToSelect.selected = true;
     // Waits for rendering with the new state that updates `tabindex`
     Promise.resolve().then(() => {
       itemToSelect.focus();
+
+      const { selectorItem } = this.constructor as typeof CDSContentSwitcher;
+      const items = this.querySelectorAll(selectorItem);
+      const index = indexOf(
+        items,
+        (itemToSelect as Element).closest(selectorItem)!
+      );
+      const nextIndex = index < 0 ? index : index + 1;
+      forEach(this.querySelectorAll(selectorItem), (elem, i) => {
+        // Specifies child `<cds-content-switcher-item>` to hide its divider instead of using CSS,
+        // until `:host-context()` gets supported in all major browsers
+        (elem as CDSContentSwitcherItem).hideDivider = i === nextIndex;
+      });
     });
   }
 
@@ -178,16 +202,41 @@ class BXContentSwitcher extends LitElement {
   @property({ reflect: true })
   size = CONTENT_SWITCHER_SIZE.REGULAR;
 
+  /**
+   * Icon only.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'icon' })
+  iconOnly = false;
+
   shouldUpdate(changedProperties) {
     if (changedProperties.has('value')) {
-      const { selectorItem } = this.constructor as typeof BXContentSwitcher;
+      const { selectorItem } = this.constructor as typeof CDSContentSwitcher;
       forEach(this.querySelectorAll(selectorItem), (elem) => {
-        (elem as BXSwitch).selected = (elem as BXSwitch).value === this.value;
+        (elem as CDSContentSwitcherItem).selected =
+          (elem as CDSContentSwitcherItem).value === this.value;
       });
     }
+    const { selectorIconItem } = this.constructor as typeof CDSContentSwitcher;
+    if (this.querySelector(selectorIconItem)) {
+      this.iconOnly = true;
+    }
     return true;
   }
 
+  _handleSlotchange() {
+    const { selectorItemSelected } = this
+      .constructor as typeof CDSContentSwitcher;
+    const selectedItem = this.querySelector(selectorItemSelected);
+    const nextItem = this._getNextItem(
+      selectedItem as CDSContentSwitcherItem,
+      1
+    );
+
+    // Specifies child `<cds-content-switcher-item>` to hide its divider instead of using CSS,
+    // until `:host-context()` gets supported in all major browsers
+    (nextItem as CDSContentSwitcherItem).hideDivider = true;
+  }
+
   /**
    * A selector that will return content switcher items.
    */
@@ -195,6 +244,13 @@ class BXContentSwitcher extends LitElement {
     return `${prefix}-content-switcher-item`;
   }
 
+  /**
+   * A selector that will return content switcher icon items.
+   */
+  static get selectorIconItem() {
+    return `${prefix}-content-switcher-item[icon]`;
+  }
+
   /**
    * A selector that will return enabled content switcher items.
    */
@@ -225,17 +281,20 @@ class BXContentSwitcher extends LitElement {
   }
 
   render() {
-    const { _handleHover: handleHover, _handleKeydown: handleKeydown } = this;
+    const {
+      _handleHover: handleHover,
+      _handleKeydown: handleKeydown,
+      _handleSlotchange: handleSlotchange,
+    } = this;
     return html`
       <slot
         @click="${this._handleClick}"
         @keydown="${handleKeydown}"
         @mouseover="${handleHover}"
-        @mouseout="${handleHover}"></slot>
+        @mouseout="${handleHover}"
+        @slotchange=${handleSlotchange}></slot>
     `;
   }
 
   static styles = styles;
 }
-
-export default BXContentSwitcher;
diff --git a/packages/carbon-web-components/src/components/content-switcher/defs.ts b/packages/carbon-web-components/src/components/content-switcher/defs.ts
index 53064a7328b..cd8ef900260 100644
--- a/packages/carbon-web-components/src/components/content-switcher/defs.ts
+++ b/packages/carbon-web-components/src/components/content-switcher/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -31,6 +31,12 @@ export enum CONTENT_SWITCHER_SIZE {
    */
   SMALL = 'sm',
 
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+
+  // TODO: deprecate
   /**
    * X-Large size.
    */
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx b/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
index 3c8bf815f80..b3f034ecf80 100644
--- a/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button-story.mdx
@@ -4,14 +4,14 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Copy button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/copy-button)
 
 Copy button provides the interface of copy button and its feedback tooltip. No
 actual copy is performed, but application can listen to `click` event of
-`<bx-copy-button>` and interact with the clipboard.
+`<cds-copy-button>` and interact with the clipboard.
 
 ## Getting started
 
@@ -29,12 +29,11 @@ import '@carbon/web-components/es/components/copy-button/index.js';
 ### HTML
 
 ```html
-<bx-copy-button
-  button-assistive-text="Copy to clipboard"
-  feedback-text="Copied!"
-></bx-copy-button>
+<cds-copy-button feedback="Copied!" feedback-timeout="2000">
+  Copy to Clipboard
+</cds-copy-button>
 ```
 
-## `<bx-copy-button>` attributes and properties
+## `<cds-copy-button>` attributes and properties
 
-<Props of="bx-copy-button" />
+<Props of="cds-copy-button" />
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts b/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts
index e6afcec050f..a6105599d6f 100644
--- a/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button-story.ts
@@ -1,29 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { number } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import './copy-button';
 import storyDocs from './copy-button-story.mdx';
+import { prefix } from '../../globals/settings';
 
 export const Default = (args) => {
-  const { buttonAssistiveText, feedbackText, feedbackTimeout, onClick } =
-    args?.['bx-copy-button'] ?? {};
+  const { iconDescription, feedbackText, feedbackTimeout, onClick } =
+    args?.[`${prefix}-copy-button`] ?? {};
   return html`
-    <bx-copy-button
-      button-assistive-text="${ifNonNull(buttonAssistiveText)}"
-      feedback-text="${ifNonNull(feedbackText)}"
-      feedback-timeout="${ifNonNull(feedbackTimeout)}"
-      @click="${onClick}"></bx-copy-button>
+    <cds-copy-button
+      feedback="${ifDefined(feedbackText)}"
+      feedback-timeout="${ifDefined(feedbackTimeout)}"
+      @click="${onClick}">
+      ${iconDescription}
+    </cds-copy-button>
   `;
 };
 
@@ -34,12 +36,12 @@ export default {
   parameters: {
     ...storyDocs.parameters,
     knobs: {
-      'bx-copy-button': () => ({
-        buttonAssistiveText: textNullable(
-          'Assistive text for the button (button-assistive-text)',
-          ''
+      [`${prefix}-copy-button`]: () => ({
+        iconDescription: textNullable(
+          'Icon description (slotted)',
+          'Copy to clipboard'
         ),
-        feedbackText: textNullable('Feedback text (feedback-text)', ''),
+        feedbackText: textNullable('Feedback text (feedback)', 'Copied!'),
         feedbackTimeout: number('Feedback timeout (feedback-timeout)', 2000),
         onClick: action('click'),
       }),
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.scss b/packages/carbon-web-components/src/components/copy-button/copy-button.scss
index d7e744825f5..c84761faa43 100644
--- a/packages/carbon-web-components/src/components/copy-button/copy-button.scss
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,15 +7,51 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/code-snippet/code-snippet';
-@import 'carbon-components/scss/components/copy-button/copy-button';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/keyframes' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/components/code-snippet/code-snippet' as *;
+@use '@carbon/styles/scss/components/copy-button/index';
+@use '@carbon/styles/scss/layout' as *;
+
+@include code-snippet;
 
 :host(#{$prefix}-copy-button) {
+  @include emit-layout-tokens();
+
   display: inline-flex;
   outline: none;
+}
+
+.#{$prefix}--snippet__icon {
+  width: $spacing-05;
+  height: $spacing-05;
+  fill: $icon-primary;
+  transition: all $duration-fast-01 motion(standard, productive);
+}
+
+.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-out {
+  // https://github.com/stylelint/stylelint/issues/2363
+  animation: $duration-fast-02 motion(standard, productive) hide-feedback;
+}
+
+.#{$prefix}--copy-btn--animating.#{$prefix}--copy-btn--fade-in {
+  animation: $duration-fast-02 motion(standard, productive) show-feedback;
+}
+
+// code snippet disabled overrides
+.#{$prefix}--snippet--disabled,
+.#{$prefix}--snippet--disabled
+  .#{$prefix}--btn.#{$prefix}--snippet-btn--expand {
+  background-color: $layer !important; /* stylelint-disable-line declaration-no-important */
+  color: $text-disabled !important; /* stylelint-disable-line declaration-no-important */
 
-  .#{$prefix}--snippet-button .#{$prefix}--btn--copy__feedback {
-    left: 50%;
-    right: auto;
+  ::slotted([slot='icon']) {
+    fill: $text-disabled !important; /* stylelint-disable-line declaration-no-important */
   }
 }
diff --git a/packages/carbon-web-components/src/components/copy-button/copy-button.ts b/packages/carbon-web-components/src/components/copy-button/copy-button.ts
index ebd225d53eb..29ece784bc2 100644
--- a/packages/carbon-web-components/src/components/copy-button/copy-button.ts
+++ b/packages/carbon-web-components/src/components/copy-button/copy-button.ts
@@ -7,123 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { TemplateResult } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
 import Copy16 from '@carbon/icons/lib/copy/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './copy-button.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * Note: For `<bx-code-snippet>` only. The API is subject to change/removal.
- *
- * @param update The callback function that dictates how to update the DOM with new feedback tooltip state.
- * @returns A function that shows the feedback tooltip for the given duration.
- * @private
- */
-export const _createHandleFeedbackTooltip = (
-  update: (properties: { showFeedback?: boolean }) => void
-) => {
-  let timeoutId: number | void;
-  return (timeout: number) => {
-    if (timeoutId) {
-      clearTimeout(timeoutId);
-      timeoutId = undefined;
-    }
-    update({ showFeedback: true });
-    timeoutId = setTimeout(() => {
-      update({ showFeedback: false });
-    }, timeout) as unknown as number;
-  };
-};
-
-/**
- * Note: For `<bx-code-snippet>` only. The API is subject to change/removal.
- *
- * @param properties The properties to render.
- * @returns The template result for copy button from the given properties.
- * @private
- */
-export const _renderButton = ({
-  assistiveText,
-  feedbackText,
-  showFeedback = false,
-  className = `${prefix}--snippet-button`,
-  children = html`
-    <slot>${Copy16({ class: `${prefix}--snippet__icon` })}</slot>
-  `,
-  handleClickButton,
-}: {
-  assistiveText: string;
-  feedbackText: string;
-  showFeedback?: boolean;
-  className?: string;
-  children?: TemplateResult;
-  handleClickButton: EventListener;
-}) => {
-  const feedbackClasses = classMap({
-    [`${prefix}--btn--copy__feedback`]: true,
-    [`${prefix}--btn--copy__feedback--displayed`]: showFeedback,
-  });
-  return html`
-    <button
-      type="button"
-      class="${className}"
-      title="${ifDefined(assistiveText)}"
-      @click="${handleClickButton}">
-      ${children}
-      <div
-        class="${feedbackClasses}"
-        data-feedback="${ifDefined(feedbackText)}"></div>
-    </button>
-  `;
-};
+import '../copy/copy';
 
 /**
  * Copy button.
  *
- * @element bx-copy-button
+ * @element cds-copy-button
  */
 @customElement(`${prefix}-copy-button`)
-class BXCopyButton extends FocusMixin(LitElement) {
-  /**
-   * Handles showing/hiding the feedback tooltip.
-   */
-  private _handleFeedbackTooltip = _createHandleFeedbackTooltip(
-    ({ showFeedback = false }: { showFeedback?: boolean }) => {
-      this._showFeedback = showFeedback;
-      this.requestUpdate();
-    }
-  );
-
-  /**
-   * `true` to show the feedback tooltip.
-   */
-  private _showFeedback = false;
-
+class CDSCopyButton extends FocusMixin(LitElement) {
   /**
-   * Handles `click` event on the copy button.
+   * Specify an optional className to be added to your Button
    */
-  private _handleClickButton() {
-    this._handleFeedbackTooltip(this.feedbackTimeout);
-  }
+  @property({ reflect: true, attribute: 'button-class-name' })
+  buttonClassName;
 
   /**
-   * An assistive text for screen reader to announce, telling that the button copies the content to the clipboard.
+   * `true` if the button should be disabled.
    */
-  @property({ attribute: 'button-assistive-text' })
-  buttonAssistiveText = 'Copy to clipboard';
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   /**
-   * The feedback text.
+   * Specify the string that is displayed when the button is clicked and the content is copi
    */
-  @property({ attribute: 'feedback-text' })
-  feedbackText = 'Copied!';
+  @property()
+  feedback = 'Copied!';
 
   /**
    * The number in milliseconds to determine how long the tooltip should remain.
@@ -131,31 +46,28 @@ class BXCopyButton extends FocusMixin(LitElement) {
   @property({ type: Number, attribute: 'feedback-timeout' })
   feedbackTimeout = 2000;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
-    const {
-      buttonAssistiveText,
-      feedbackText,
-      _handleClickButton: handleClickButton,
-      _showFeedback: showFeedback,
-    } = this;
-    return _renderButton({
-      assistiveText: buttonAssistiveText,
-      feedbackText,
-      showFeedback,
-      handleClickButton,
-    });
+    const { buttonClassName, disabled, feedback, feedbackTimeout } = this;
+
+    let classes = `${prefix}--copy-btn`;
+
+    if (buttonClassName) {
+      classes += ` ${buttonClassName}`;
+    }
+
+    return html`
+      <cds-copy
+        ?disabled=${disabled}
+        feedback=${feedback}
+        feedback-timeout=${feedbackTimeout}
+        button-class-name=${classes}>
+        ${Copy16({ slot: 'icon', class: `${prefix}--snippet__icon` })}
+        <slot slot="tooltip-content"></slot>
+      </cds-copy>
+    `;
   }
 
   static styles = styles;
 }
 
-export default BXCopyButton;
+export default CDSCopyButton;
diff --git a/packages/carbon-web-components/src/components/copy/copy.ts b/packages/carbon-web-components/src/components/copy/copy.ts
new file mode 100644
index 00000000000..bf47bfe566b
--- /dev/null
+++ b/packages/carbon-web-components/src/components/copy/copy.ts
@@ -0,0 +1,124 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from '../copy-button/copy-button.scss';
+import CDSIconButton from '../icon-button/icon-button';
+
+/**
+ * Copy.
+ *
+ * @element cds-copy
+ */
+@customElement(`${prefix}-copy`)
+class CDSCopy extends CDSIconButton {
+  /**
+   * `true` to show the feedback tooltip.
+   */
+  private _showFeedback = false;
+
+  /**
+   * `true` to show the feedback tooltip.
+   */
+  private _animation = '';
+
+  private _createHandleFeedbackTooltip = () => {
+    let timeoutId: number | void;
+    return (timeout: number) => {
+      const buttonClasses = this.shadowRoot?.querySelector('button')?.classList;
+
+      if (timeoutId) {
+        clearTimeout(timeoutId);
+        timeoutId = undefined;
+      }
+      this._showFeedback = true;
+      buttonClasses?.add(`${prefix}--copy-btn--animating`);
+      this._animation = 'fade-in';
+      buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);
+      this.requestUpdate();
+      timeoutId = setTimeout(() => {
+        this._showFeedback = false;
+        this._animation = 'fade-out';
+        buttonClasses?.remove(`${prefix}--copy-btn--fade-in`);
+        buttonClasses?.add(`${prefix}--copy-btn--${this._animation}`);
+        this.requestUpdate();
+      }, timeout) as unknown as number;
+    };
+  };
+
+  /**
+   * Handles showing/hiding the feedback tooltip.
+   */
+  private _handleFeedbackTooltip = this._createHandleFeedbackTooltip();
+
+  /**
+   * Handles `click` event on the copy button.
+   */
+  private _handleClickButton() {
+    this._handleFeedbackTooltip(this.feedbackTimeout);
+  }
+
+  /**
+   * Specify the string that is displayed when the button is clicked and the content is copi
+   */
+  @property()
+  feedback = 'Copied!';
+
+  /**
+   * The number in milliseconds to determine how long the tooltip should remain.
+   */
+  @property({ type: Number, attribute: 'feedback-timeout' })
+  feedbackTimeout = 2000;
+
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderTooltipContent() {
+    return html`
+      <cds-tooltip-content>
+        ${this._showFeedback
+          ? this.feedback
+          : html`<slot name="tooltip-content"></slot>`}
+      </cds-tooltip-content>
+    `;
+  }
+
+  connectedCallback() {
+    this.closeOnActivation = false;
+    this.align = 'bottom';
+
+    this.addEventListener('click', this._handleClickButton);
+
+    super.connectedCallback();
+  }
+
+  updated(changedProperties) {
+    this.shadowRoot
+      ?.querySelector('button')
+      ?.addEventListener('animationend', () => {
+        if (this._animation === 'fade-out') {
+          const buttonClasses =
+            this.shadowRoot?.querySelector('button')?.classList;
+          buttonClasses?.remove(`${prefix}--copy-btn--animating`);
+          buttonClasses?.remove(`${prefix}--copy-btn--${this._animation}`);
+          this._animation = '';
+        }
+      });
+
+    super.updated(changedProperties);
+
+    this.shadowRoot
+      ?.querySelector('button') // @ts-ignore: TS thinks `host` doesn't exist on `parentNode`
+      ?.setAttribute('aria-label', this.parentNode?.host.textContent);
+  }
+
+  static styles = styles;
+}
+
+export default CDSCopy;
diff --git a/packages/carbon-web-components/src/components/data-table/_table-action.scss b/packages/carbon-web-components/src/components/data-table/_table-action.scss
index 611476abf0b..17f63b9725f 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-action.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-action.scss
@@ -1,13 +1,18 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/components/search/search';
-@import 'carbon-components/scss/components/data-table/data-table-action';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/search';
+@use '@carbon/styles/scss/components/data-table/action';
 
 //
 // Table toolbar
@@ -15,6 +20,9 @@
 
 :host(#{$prefix}-table-toolbar) {
   @extend .#{$prefix}--table-toolbar;
+
+  display: table-caption;
+  z-index: 1;
 }
 
 :host(#{$prefix}-table-toolbar-content) {
@@ -23,69 +31,79 @@
   clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
 
   ::slotted(#{$prefix}-overflow-menu) {
-    @include button-reset;
-
     display: flex;
     cursor: pointer;
-    height: $layout-04;
-    width: $layout-04;
-    padding: $spacing-md;
-    transition: background-color $duration--fast-02 motion(entrance, productive);
-  }
-
-  ::slotted(#{$prefix}-overflow-menu:hover) {
-    background-color: $hover-field;
-  }
-
-  ::slotted(#{$prefix}-overflow-menu[disabled]:hover) {
-    background-color: transparent;
-  }
-
-  .#{$prefix}--search .#{$prefix}--search-input {
-    // For tool bar animation with (esp.) persistent search box
-    background-color: transparent;
+    height: $spacing-09;
+    width: $spacing-09;
+    transition: background-color $duration-fast-02 motion(entrance, productive);
   }
 }
 
 :host(#{$prefix}-table-toolbar-content[has-batch-actions]) {
   clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
-  transform: translate3d(0, 48px, 0);
-  transition: transform $duration--fast-02 motion(standard, productive),
-    clip-path $duration--fast-02 motion(standard, productive);
+  transform: translate3d(0, $spacing-09, 0);
+  transition: transform $duration-fast-02 motion(standard, productive),
+    clip-path $duration-fast-02 motion(standard, productive);
 }
 
 :host(#{$prefix}-table-toolbar-search) {
   @extend .#{$prefix}--toolbar-action;
   @extend .#{$prefix}--toolbar-search-container-expandable;
 
+  &:hover {
+    background-color: $field-hover;
+  }
+
   flex: none;
-  transition: flex 175ms $carbon--standard-easing;
+  transition: flex 175ms $standard-easing;
 
   .#{$prefix}--search {
     width: 100%;
     height: 100%;
 
     .#{$prefix}--search-magnifier {
-      height: $layout-04;
-      width: $layout-04;
-      padding: $spacing-md;
       left: 0;
       cursor: pointer;
       pointer-events: all;
-      transition: background $duration--fast-02 motion(entrance, productive);
+      transition: background $duration-fast-02 motion(entrance, productive);
+
+      &-icon {
+        height: auto;
+        width: auto;
+      }
     }
 
-    .#{$prefix}--search-close {
-      height: $layout-04;
-      width: $layout-04;
+    .#{$prefix}--search-input {
+      border-bottom: 0;
+    }
 
+    .#{$prefix}--search-close {
       &::before {
-        top: 2px;
-        height: calc(100% - 4px);
-        background-color: $hover-ui;
+        width: 0;
+        background-color: $background-hover;
       }
+
+      :hover {
+        background-color: none;
+      }
+    }
+
+    :hover {
+      background-color: none;
     }
   }
+
+  svg {
+    left: 0;
+  }
+}
+
+:host(#{$prefix}-table-toolbar-search[size='xs']),
+:host(#{$prefix}-table-toolbar-search[size='sm']) {
+  svg {
+    left: $spacing-03;
+    padding: 0;
+  }
 }
 
 :host(#{$prefix}-table-toolbar-search[expanded]) {
@@ -94,16 +112,25 @@
   flex: auto;
 }
 
-:host(#{$prefix}-table-toolbar-search[persistent]) {
-  @extend .#{$prefix}--toolbar-search-container-persistent;
+:host(#{$prefix}-table-toolbar-search[size='xs'][expanded]),
+:host(#{$prefix}-table-toolbar-search[size='sm'][expanded]) {
+  svg {
+    left: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-table-toolbar-search[persistent]:hover),
+:host(#{$prefix}-table-toolbar-search[persistent]:hover) {
+  .#{$prefix}--search-input {
+    background-color: $field-hover;
+  }
 }
 
 :host(#{$prefix}-table-batch-actions) {
   @extend .#{$prefix}--batch-actions;
-
   box-sizing: border-box;
-}
 
-:host(#{$prefix}-table-batch-actions[active]) {
-  @extend .#{$prefix}--batch-actions--active;
+  &[active] {
+    @extend .#{$prefix}--batch-actions--active;
+  }
 }
diff --git a/packages/carbon-web-components/src/components/data-table/_table-core.scss b/packages/carbon-web-components/src/components/data-table/_table-core.scss
index c274a36b90a..afda21d06be 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-core.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-core.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -17,31 +17,82 @@
   ::slotted(#{$prefix}-table-head) {
     @include type-style('heading-01');
 
-    background-color: $ui-03;
+    background-color: $layer-accent-01;
     display: table-header-group;
   }
 
   ::slotted(#{$prefix}-table-body) {
     @include type-style('body-short-01');
 
-    background-color: $ui-01;
+    background-color: $layer-01;
     width: 100%;
     display: table-row-group;
   }
 }
 
+:host(#{$prefix}-table[use-static-width]) {
+  width: auto;
+}
+
+:host(#{$prefix}-table[sticky-header]) {
+  ::slotted(#{$prefix}-table-head),
+  ::slotted(#{$prefix}-table-body) {
+    display: flex;
+    flex-direction: column;
+    will-change: transform;
+  }
+
+  .#{$prefix}--data-table-content {
+    display: block;
+    overflow-y: scroll;
+  }
+}
+
+:host(#{$prefix}-table[with-header]) {
+  .#{$prefix}--data-table-header {
+    display: table-caption;
+  }
+}
+
+:host(#{$prefix}-table-head[sticky-header]) {
+  position: sticky;
+  z-index: 1;
+  top: 0;
+  width: 100%;
+  will-change: transform;
+
+  ::slotted(#{$prefix}-table-header-row) {
+    display: flex;
+    width: 100%;
+  }
+}
+
+:host(#{$prefix}-table-header-cell[sort-direction]) {
+  height: $spacing-09;
+  position: relative;
+}
+
+:host(#{$prefix}-table-header-cell[sticky-header]) {
+  width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+
+  border-bottom: 1px solid $layer-active;
+}
+
+:host(#{$prefix}-table-header-cell[sticky-header]:not([is-sortable])) {
+  padding-top: rem(14px);
+}
+
 //
 // Common style for table cell and table header cell
 //
 
 :host(#{$prefix}-table-header-row) ::slotted(#{$prefix}-table-header-cell),
-:host(#{$prefix}-table-header-row)
-  ::slotted(#{$prefix}-table-header-cell-skeleton),
 :host(#{$prefix}-table-header-row) .#{$prefix}--table-column-checkbox,
 :host(#{$prefix}-table-header-expand-row)
   ::slotted(#{$prefix}-table-header-cell),
-:host(#{$prefix}-table-header-expand-row)
-  ::slotted(#{$prefix}-table-header-cell-skeleton),
 :host(#{$prefix}-table-header-expand-row) .#{$prefix}--table-expand,
 :host(#{$prefix}-table-header-expand-row) .#{$prefix}--table-column-checkbox,
 :host(#{$prefix}-table-row) ::slotted(#{$prefix}-table-cell),
@@ -60,50 +111,81 @@
 
 :host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-row),
 :host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-expand-row) {
-  height: $layout-04;
+  height: $spacing-09;
   display: table-row;
 }
 
 //
 // Table header cell
 //
-
-:host(#{$prefix}-table-header-row),
-:host(#{$prefix}-table-header-expand-row) {
+:host(#{$prefix}-table-header-row) {
   outline: none;
 
   ::slotted(#{$prefix}-table-header-cell),
   ::slotted(#{$prefix}-table-header-cell-skeleton) {
-    color: $text-01;
-    background-color: $ui-03;
+    color: $text-primary;
+    background-color: $layer-accent-01;
     text-align: left;
     display: table-cell;
     outline: none;
   }
 
-  ::slotted(#{$prefix}-table-header-cell:last-of-type),
-  ::slotted(#{$prefix}-table-header-cell-skeleton:last-of-type) {
-    position: relative;
-    width: auto;
-  }
-
   ::slotted(#{$prefix}-table-header-cell),
-  ::slotted(#{$prefix}-table-header-cell-skeleton),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    padding-left: $spacing-04;
-    padding-right: $spacing-04;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
+    text-align: left;
     vertical-align: middle;
   }
-}
 
-:host(#{$prefix}-table-header-row) {
   ::slotted(#{$prefix}-table-header-cell:first-of-type),
   ::slotted(#{$prefix}-table-header-cell-skeleton:first-of-type) {
     padding-left: $spacing-05;
   }
 }
 
+:host(#{$prefix}-table-header-row:not([batch-expansion])) {
+  .#{$prefix}--table-expand__button {
+    display: none;
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name]) {
+  .#{$prefix}--table-expand {
+    display: table-cell;
+  }
+}
+
+:host(#{$prefix}-table-header-row[sticky-header]) {
+  #{$prefix}-checkbox {
+    margin: 0;
+    padding-top: $spacing-04;
+    border-bottom: 1px solid $layer-active;
+  }
+}
+
+:host(#{$prefix}-table-header-row[expandable]),
+:host(#{$prefix}-table-row[expandable]),
+:host(#{$prefix}-table-header-row[selection-name]),
+:host(#{$prefix}-table-row[selection-name]) {
+  .#{$prefix}--table-expand {
+    height: $spacing-07;
+    width: $spacing-07;
+
+    padding: $spacing-03;
+    padding-right: 0;
+  }
+}
+
+:host(#{$prefix}-table-header-row[expanded]),
+:host(#{$prefix}-table-row[expanded]) {
+  transition: transform $duration-moderate-01 motion(standard, productive);
+  .#{$prefix}--table-expand__svg {
+    transform: rotate(270deg);
+  }
+}
+
 //
 // Table row
 //
@@ -112,28 +194,69 @@
   ::slotted(#{$prefix}-table-row),
   ::slotted(#{$prefix}-table-expand-row) {
     border: none;
-    height: $layout-04;
+    height: $spacing-09;
     width: 100%;
     display: table-row;
     outline: none;
   }
 }
 
+:host(#{$prefix}-table-body[sticky-header]) {
+  ::slotted(#{$prefix}-table-row),
+  ::slotted(#{$prefix}-table-expand-row) {
+    display: flex;
+  }
+}
+
 //
 // Table cell
 //
 
+:host(#{$prefix}-table-cell) {
+  border-top: 1px solid $layer-01;
+  border-bottom: 1px solid $border-subtle;
+  padding: 0 $spacing-05;
+
+  ::slotted(#{$prefix}-overflow-menu:hover) {
+    background-color: none;
+  }
+}
+
+:host(#{$prefix}-table-cell[overflow-menu-on-hover]) {
+  ::slotted(*) {
+    opacity: 0;
+  }
+}
+
+:host(#{$prefix}-table-cell-content) {
+  @include type-style('label-01');
+  display: block;
+}
+
+:host(#{$prefix}-table-row[sticky-header]),
+:host(#{$prefix}-table-expand-row[sticky-header]) {
+  ::slotted(#{$prefix}-table-cell),
+  ::slotted(#{$prefix}-table-cell-skeleton) {
+    width: 100%;
+    padding-top: rem(14px);
+  }
+}
+
+:host(#{$prefix}-table-row[size='xl']),
+:host(#{$prefix}-table-expand-row[size='xl']) {
+  ::slotted(#{$prefix}-table-cell),
+  ::slotted(#{$prefix}-table-cell-skeleton) {
+    vertical-align: top;
+  }
+}
+
 :host(#{$prefix}-table-row),
 :host(#{$prefix}-table-expand-row) {
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    color: $text-02;
-    border-top: 1px solid $ui-01;
-    border-bottom: 1px solid $ui-03;
-    padding: rem(14px) $spacing-04;
-    padding-bottom: rem(13px);
+    color: $text-secondary;
     vertical-align: middle;
   }
 }
@@ -150,41 +273,145 @@
   }
 }
 
-:host(#{$prefix}-table-row[even]) {
+:host(#{$prefix}-table-row[expandable]),
+:host(#{$prefix}-table-row[selection-name]) {
+  .#{$prefix}--table-expand {
+    display: table-cell;
+    border-top: 1px solid $layer-01;
+    border-bottom: 1px solid $border-subtle;
+    padding-right: 0;
+    transition: transform $duration-moderate-01 motion(standard, productive);
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded]),
+:host(#{$prefix}-table-row[selection-name][expanded]) {
+  .#{$prefix}--table-expand__svg {
+    transform: rotate(270deg);
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded]),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded]),
+:host(#{$prefix}-table-row[expandable][expanded][highlighted]),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded][highlighted])
+  :host(#{$prefix}-table-row[expandable][expanded]:hover),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded]:hover) {
+  .#{$prefix}--table-expand {
+    border-bottom-color: transparent;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded][selected]),
+:host(#{$prefix}-table-row[selection-name][expandable][expanded][selected]) {
   ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
-    border-bottom: 1px solid $ui-01;
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    background-color: $layer-selected;
+
+    border-top-color: $layer-active;
+    border-bottom-color: $border-subtle;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][expanded][selected][highlighted]),
+:host(
+    #{$prefix}-table-row[selection-name][expandable][expanded][selected][highlighted]
+  ),
+:host(#{$prefix}-table-row[expandable][expanded][selected]:hover),
+:host(
+    #{$prefix}-table-row[selection-name][expandable][expanded][selected]:hover
+  ) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    background-color: $layer-selected-hover;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][selected]),
+:host(#{$prefix}-table-row[selection-name][expandable][selected]) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    border-bottom-color: $border-subtle;
+  }
+}
+
+:host(#{$prefix}-table-row[expandable][highlighted]),
+:host(#{$prefix}-table-row[selection-name][expandable][highlighted]),
+:host(#{$prefix}-table-row[expandable]:hover),
+:host(#{$prefix}-table-row[selection-name][expandable]:hover) {
+  ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    border-bottom-color: $border-subtle;
   }
 }
 
 :host(#{$prefix}-table-row[odd]) {
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
-    background-color: $data-table-zebra-color;
-    border-bottom: 1px solid $data-table-zebra-color;
-    border-top: 1px solid $data-table-zebra-color;
+    border-bottom: 1px solid $layer-01;
   }
 }
 
+:host(#{$prefix}-table-row[even]) {
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
+  ::slotted(#{$prefix}-table-cell),
+  ::slotted(#{$prefix}-table-cell-skeleton) {
+    background-color: $layer-accent-01;
+    border-bottom: 1px solid $layer-accent-01;
+    border-top: 1px solid $layer-accent-01;
+  }
+}
+
+:host(#{$prefix}-table-row[highlighted]),
 :host(#{$prefix}-table-row:hover),
 :host(#{$prefix}-table-expand-row:hover) {
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton),
   .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    color: $text-01;
-    background-color: $hover-field;
-    border-bottom-color: $hover-field;
-    border-top-color: $hover-field;
+    color: $text-primary;
+    background-color: $background-hover;
+    border-bottom-color: $layer-hover-01;
+    border-top-color: $layer-hover-01;
   }
 }
 
+:host(#{$prefix}-table-row[highlighted]),
 :host(#{$prefix}-table-row[even]:hover),
 :host(#{$prefix}-table-row[odd]:hover) {
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
   ::slotted(#{$prefix}-table-cell-skeleton) {
-    background-color: $hover-field;
-    border-bottom: 1px solid $hover-field;
-    border-top: 1px solid $hover-field;
+    background-color: $background-hover;
+    border-bottom: 1px solid $layer-hover-01;
+    border-top: 1px solid $layer-hover-01;
+  }
+}
+
+:host(#{$prefix}-table-header-title) {
+  @extend .#{$prefix}--data-table-header__title;
+
+  display: block;
+}
+
+:host(#{$prefix}-table-header-description) {
+  @extend .#{$prefix}--data-table-header__description;
+
+  display: block;
+
+  @include breakpoint(md) {
+    max-width: 50ch;
+  }
+
+  @include breakpoint(lg) {
+    max-width: 80ch;
   }
 }
diff --git a/packages/carbon-web-components/src/components/data-table/_table-expandable.scss b/packages/carbon-web-components/src/components/data-table/_table-expandable.scss
index ca842c949ba..c2affac8049 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-expandable.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-expandable.scss
@@ -1,64 +1,56 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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.
 //
 
-:host(#{$prefix}-table-expand-row),
-:host(#{$prefix}-table-header-expand-row) {
-  .#{$prefix}--table-expand {
-    display: table-cell;
-    width: 2.5rem;
-    height: 3rem;
-    vertical-align: middle;
-    padding: 0;
-    border-bottom: 1px solid $ui-03;
-    transition: transform $duration--moderate-01 motion(standard, productive);
-  }
-
-  &[expanded] .#{$prefix}--table-expand {
-    border-bottom: 1px solid transparent;
-
-    .#{$prefix}--table-expand__svg {
-      transform: rotate(270deg);
-    }
-  }
-}
-
 :host(#{$prefix}-table-expanded-row) {
   display: table-row;
-  transition: height $duration--moderate-02 motion(standard),
-    background-color $duration--fast-02 motion(standard);
+  height: 0;
+  transition: height $duration-moderate-01 motion(standard);
 
-  &[expanded] {
-    height: auto;
+  ::slotted(*) {
+    color: $text-secondary;
   }
 
   td {
-    padding: 0 $spacing-05;
+    border-bottom-color: $border-subtle;
     vertical-align: middle;
-    height: 0;
-    transition: all $duration--fast-02 motion(standard, productive);
+    transition: all $duration-fast-02 motion(standard, productive);
+    padding: 0;
+    padding-left: $spacing-10;
 
     .#{$prefix}--child-row-inner-container {
       overflow: hidden;
       height: 0;
     }
   }
+}
 
-  &[expanded] td {
-    border-bottom: 1px solid $ui-03;
-    padding-top: rem(14px);
-    padding-bottom: rem(13px);
+:host(#{$prefix}-table-expanded-row[expanded]) {
+  height: $spacing-09;
+
+  td {
+    border-bottom: 1px solid $border-subtle;
     height: auto;
 
     .#{$prefix}--child-row-inner-container {
       height: auto;
     }
   }
+}
+
+:host(#{$prefix}-table-expanded-row:hover),
+:host(#{$prefix}-table-expanded-row[selected]),
+:host(#{$prefix}-table-expanded-row[highlighted]) {
+  background-color: $background-hover;
 
-  &[highlighted] {
-    background-color: $hover-ui;
+  ::slotted(*) {
+    color: $text-primary;
   }
 }
+
+:host(#{$prefix}-table-expanded-row[selected][highlighted]) {
+  background-color: $layer-selected;
+}
diff --git a/packages/carbon-web-components/src/components/data-table/_table-selection.scss b/packages/carbon-web-components/src/components/data-table/_table-selection.scss
index c118c68707e..166915f35b7 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-selection.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-selection.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -8,50 +8,66 @@
 //
 // Selection check box
 //
+:host(#{$prefix}-table-header-row) {
+  .#{$prefix}--table-column-checkbox {
+    border-top: none;
+    border-bottom: none;
 
-:host(#{$prefix}-table-header-row) .#{$prefix}--table-column-checkbox {
-  position: relative;
-  background-color: $ui-03;
-  // 16px padding left + 8px padding right + 20px checkbox width
-  width: rem(44px);
-  transition: background-color $duration--fast-01 motion(entrance, productive);
-}
-
-:host(#{$prefix}-table-row) .#{$prefix}--table-column-checkbox {
-  .#{$prefix}--checkbox-label {
     padding-left: $spacing-05;
+    padding-right: $spacing-02;
+    transition: background-color $duration-fast-01 motion(entrance, productive);
+
+    .#{$prefix}--checkbox-label {
+      width: 20px;
+    }
   }
 }
 
-:host(#{$prefix}-table-header-row) .#{$prefix}--table-column-checkbox:hover {
-  // Highlight "select all" columns like sorting column
-  background-color: $data-table-column-hover;
-}
+:host(#{$prefix}-table-row) {
+  .#{$prefix}--table-column-checkbox {
+    padding-left: $spacing-05;
+    padding-right: $spacing-02;
+    border-top: 1px solid $layer-01;
+    border-bottom: 1px solid $border-subtle;
 
-:host(#{$prefix}-table-row[size='tall']) .#{$prefix}--table-column-checkbox {
-  padding-top: rem(12px);
+    .#{$prefix}--checkbox-label {
+      padding-left: $spacing-05;
+    }
+  }
 }
 
-//
-// Selected rows
-//
+:host(#{$prefix}-table-row:hover) {
+  .#{$prefix}--table-column-checkbox {
+    border-top-color: $layer-hover-01;
+    border-bottom-color: $layer-hover-01;
+    background-color: $background-hover;
+  }
+}
 
 :host(#{$prefix}-table-row[selected]) {
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
-    color: $text-01;
-    background-color: $ui-03;
-    border-top: 1px solid $ui-03;
+    color: $text-primary;
+    background-color: $layer-accent-01;
+    border-top: 1px solid $border-subtle-01;
     //bottom border acts as separator from other rows
-    border-bottom: 1px solid $active-ui;
+    border-bottom: 1px solid $layer-active;
   }
 }
 
 :host(#{$prefix}-table-row[selected]:hover) {
+  .#{$prefix}--table-column-checkbox,
   ::slotted(#{$prefix}-table-cell),
+  .#{$prefix}--table-expand,
   .#{$prefix}--table-column-checkbox {
     background-color: $data-table-column-hover;
-    border-top-color: $data-table-column-hover;
     border-bottom-color: $data-table-column-hover;
   }
 }
+
+:host(#{$prefix}-table-expanded-row[filtered]),
+:host(#{$prefix}-table-row[filtered]) {
+  display: none !important;
+}
diff --git a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
index 836064be490..310452f1989 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-sizes.scss
@@ -1,59 +1,233 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 //
-// "Compact" table size variant
+// "xs" table size variant
 //
 
-:host(#{$prefix}-table-head)
-  ::slotted(#{$prefix}-table-header-row[size='compact']),
-:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='compact']) {
-  height: rem(24px);
+:host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-row[size='xs']),
+:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='xs']) {
+  height: $spacing-06;
 }
 
-:host(#{$prefix}-table-row[size='compact']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
-    padding-top: rem(2px);
-    padding-bottom: rem(2px);
+:host(#{$prefix}-table-header-row[size='xs']),
+:host(#{$prefix}-table-row[size='xs']) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    height: $spacing-06;
+  }
+
+  ::slotted(#{$prefix}-table-cell) {
+    padding-top: $spacing-01;
+    padding-bottom: $spacing-01;
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--table-expand {
+    padding-top: 0;
+    padding-bottom: 0;
+    height: $spacing-06;
   }
 }
 
 //
-// "Short" table size variant
+// "sm" table size variant
 //
 
-:host(#{$prefix}-table-head)
-  ::slotted(#{$prefix}-table-header-row[size='short']),
-:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='short']) {
-  height: rem(32px);
+:host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-row[size='sm']),
+:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='sm']) {
+  height: $spacing-07;
 }
 
-:host(#{$prefix}-table-row[size='short']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
+:host(#{$prefix}-table-header-row[size='sm']),
+:host(#{$prefix}-table-row[size='sm']) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    height: $spacing-07;
+  }
+
+  ::slotted(#{$prefix}-table-cell) {
     padding-top: rem(7px);
     padding-bottom: rem(6px);
+    padding-left: $spacing-05;
+  }
+
+  .#{$prefix}--table-expand {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: $spacing-07;
   }
 }
 
 //
-// "Tall" table size variant
+// "md" table size variant
 //
 
-:host(#{$prefix}-table-head)
-  ::slotted(#{$prefix}-table-header-row[size='tall']),
-:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='tall']) {
-  height: rem(64px);
+:host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-row[size='md']),
+:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='md']) {
+  height: $spacing-08;
+}
+
+:host(#{$prefix}-table-row[size='md']),
+:host(#{$prefix}-table-header-row[size='md']) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    height: $spacing-08;
+  }
+  ::slotted(#{$prefix}-table-cell) {
+    padding-top: rem(7px);
+    padding-left: $spacing-05;
+    padding-bottom: rem(6px);
+  }
+
+  .#{$prefix}--table-expand {
+    padding-top: $spacing-02;
+    padding-bottom: $spacing-02;
+  }
+
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: $spacing-08;
+  }
+}
+
+//
+// "lg" table size variant - default
+//
+
+:host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-row[size='lg']),
+:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='lg']) {
+  height: $spacing-09;
+}
+
+//
+// "xl" table size variant
+//
+
+:host(#{$prefix}-table-head) ::slotted(#{$prefix}-table-header-row[size='xl']),
+:host(#{$prefix}-table-body) ::slotted(#{$prefix}-table-row[size='xl']) {
+  height: $spacing-10;
+}
+
+:host(#{$prefix}-table-header-row[size='xl']) {
+  ::slotted(#{$prefix}-table-header-cell) {
+    vertical-align: top;
+    padding-top: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-table-header-row[size='xl']),
+:host(#{$prefix}-table-row[size='xl']) {
+  ::slotted(#{$prefix}-table-cell) {
+    padding-top: $spacing-05;
+  }
+
+  .#{$prefix}--table-expand {
+    padding-bottom: 1.375rem;
+  }
+
+  .#{$prefix}--table-expand,
+  .#{$prefix}--table-column-checkbox {
+    vertical-align: top;
+    padding-top: rem(10px);
+  }
+
+  &[radio] {
+    .#{$prefix}--table-column-checkbox {
+      padding-top: $spacing-05;
+    }
+  }
+}
+
+:host(#{$prefix}-table-expanded-row[size='xl'][expanded]) {
+  td {
+    padding-top: $spacing-05;
+    padding-right: $spacing-05;
+    padding-bottom: $spacing-03;
+  }
+}
+
+// Small persistent toolbar
+:host(#{$prefix}-table-toolbar[size='xs']),
+:host(#{$prefix}-table-toolbar-content[size='xs']) {
+  &,
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu),
+  ::slotted(#{$prefix}-button) {
+    min-height: $spacing-07;
+    height: $spacing-07;
+  }
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu) {
+    width: $spacing-07;
+  }
+}
+
+:host(#{$prefix}-table-toolbar[size='sm']),
+:host(#{$prefix}-table-toolbar-content[size='sm']) {
+  &,
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu),
+  ::slotted(#{$prefix}-button) {
+    min-height: $spacing-07;
+    height: $spacing-07;
+  }
+
+  ::slotted(#{$prefix}-table-toolbar-search),
+  ::slotted(#{$prefix}-overflow-menu) {
+    width: $spacing-07;
+  }
+}
+
+//
+// "selection" and "expandable" sizes
+//
+:host(#{$prefix}-table-header-row[selection-name][expandable]),
+:host(#{$prefix}-table-row[selection-name][expandable]) {
+  ::slotted(#{$prefix}-table-header-cell),
+  ::slotted(#{$prefix}-table-cell) {
+    padding-left: $spacing-03;
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='xs']),
+:host(#{$prefix}-table-row[selection-name][expandable][size='xs']) {
+  .#{$prefix}--table-column-checkbox {
+    padding: 0 rem(6px);
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='sm']),
+:host(#{$prefix}-table-row[selection-name][expandable][size='sm']),
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='md']),
+:host(#{$prefix}-table-row[selection-name][expandable][size='md']) {
+  .#{$prefix}--table-column-checkbox {
+    padding: rem(3px) rem(6px);
+  }
+}
+
+:host(#{$prefix}-table-header-row[selection-name][expandable][size='xl']) {
+  .#{$prefix}--table-column-checkbox {
+    padding-left: rem(6px);
+    padding-right: rem(6px);
+  }
+}
+
+//
+// table cell size for overflow menu
+//
+:host(#{$prefix}-table-cell[size='xs']),
+:host(#{$prefix}-table-cell[size='sm']) {
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: calc(100% + 1px);
+  }
 }
 
-:host(#{$prefix}-table-row[size='tall']) {
-  ::slotted(#{$prefix}-table-cell),
-  ::slotted(#{$prefix}-table-cell-skeleton) {
-    padding-top: rem(16px);
+:host(#{$prefix}-table-cell[size='md']) {
+  ::slotted(#{$prefix}-overflow-menu) {
+    height: $spacing-08;
   }
 }
diff --git a/packages/carbon-web-components/src/components/data-table/_table-skeleton.scss b/packages/carbon-web-components/src/components/data-table/_table-skeleton.scss
deleted file mode 100644
index e43b0bb79ab..00000000000
--- a/packages/carbon-web-components/src/components/data-table/_table-skeleton.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-//
-// Copyright IBM Corp. 2019, 2022
-//
-// 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 'carbon-components/scss/globals/scss/helper-mixins';
-
-:host(#{$prefix}-table-header-cell-skeleton),
-:host(#{$prefix}-table-cell-skeleton) {
-  span {
-    @include skeleton;
-
-    width: 75%;
-    height: 1rem;
-    display: block;
-  }
-}
-
-:host(#{$prefix}-table-header-cell-skeleton) {
-  border-bottom: 1px solid $brand-01;
-  vertical-align: middle;
-}
diff --git a/packages/carbon-web-components/src/components/data-table/_table-sort.scss b/packages/carbon-web-components/src/components/data-table/_table-sort.scss
index 8d7185b0e0b..2e8e85233ee 100644
--- a/packages/carbon-web-components/src/components/data-table/_table-sort.scss
+++ b/packages/carbon-web-components/src/components/data-table/_table-sort.scss
@@ -1,26 +1,13 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/data-table/data-table-sort';
-
-:host(#{$prefix}-table-header-row[size='compact'])
-  ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(24px);
-}
-
-:host(#{$prefix}-table-header-row[size='short'])
-  ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(32px);
-}
-
-:host(#{$prefix}-table-header-row[size='tall'])
-  ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(64px);
-}
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/data-table/sort';
 
 // Padding of header cell for sorting
 //
@@ -29,41 +16,40 @@
 
 :host(#{$prefix}-table-header-row)
   ::slotted(#{$prefix}-table-header-cell[sort-direction]) {
-  height: rem(48px);
+  height: $spacing-09;
   padding-left: 0;
   padding-right: 0;
 }
 
-:host(#{$prefix}-table-header-cell[sort-direction]) .#{$prefix}--table-sort {
-  height: 100%;
-  padding-left: $spacing-04;
-  padding-right: $spacing-04;
-}
-
 :host(#{$prefix}-table-header-cell[sort-direction]:first-of-type)
   .#{$prefix}--table-sort {
   padding-left: $spacing-05;
 }
 
+:host(#{$prefix}-table-header-cell[sort-direction][expandable][selection-name])
+  .#{$prefix}--table-sort {
+  padding-left: 0;
+}
+
 //
 // Sort icon style
 //
 
 // Show sort icon of primary sorting column or one of hovered column
 :host(#{$prefix}-table-header-cell[sort-active])
-  .bx--table-sort
-  .bx--table-sort__icon,
+  .#{$prefix}--table-sort
+  .#{$prefix}--table-sort__icon,
 :host(#{$prefix}-table-header-cell)
-  .bx--table-sort:hover
-  .bx--table-sort__icon {
+  .#{$prefix}--table-sort:hover
+  .#{$prefix}--table-sort__icon {
   opacity: 1;
 }
 
 // `carbon-web-components` uses conditional rendering for choosing Arrows16 vs. ArrowDown16,
 // and thus `display:none` here is not needed
 :host(#{$prefix}-table-header-cell[sort-direction])
-  .bx--table-sort
-  .bx--table-sort__icon {
+  .#{$prefix}--table-sort
+  .#{$prefix}--table-sort__icon {
   display: block;
 }
 
diff --git a/packages/carbon-web-components/src/components/data-table/data-table-story.mdx b/packages/carbon-web-components/src/components/data-table/data-table-story.mdx
deleted file mode 100644
index bfab025d27b..00000000000
--- a/packages/carbon-web-components/src/components/data-table/data-table-story.mdx
+++ /dev/null
@@ -1,336 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-
-# Data table
-
-> 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
-> example implementation.
-
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-Data table in `carbon-web-components` focuses on primitives that constructs
-table UI, consisting of the following:
-
-| Tag                      | Description     | HTML tag counterpart |
-| ------------------------ | --------------- | -------------------- |
-| `<bx-data-table>`        | The container   | N/A                  |
-| `<bx-table>`             | The table       | `<table>`            |
-| `<bx-table-head>`        | The header      | `<thead>`            |
-| `<bx-table-header-row>`  | The header row  | `<tr>` in `<thead>`  |
-| `<bx-table-header-cell>` | The header cell | `<th>`               |
-| `<bx-table-body>`        | The header body | `<tbody>`            |
-| `<bx-table-row>`         | The header row  | `<tr>` in `<tbody>`  |
-| `<bx-table-cell>`        | The header cell | `<td>`               |
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/data-table/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['data-table'] })}`} />
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<bx-data-table>
-  <bx-table>
-    <bx-table-head>
-      <bx-table-header-row>
-        <bx-table-header-cell>Foo</bx-table-header-cell>
-        <bx-table-header-cell>Bar</bx-table-header-cell>
-        <bx-table-header-cell>Baz</bx-table-header-cell>
-      </bx-table-header-row>
-    </bx-table-head>
-    <bx-table-body>
-      <bx-table-row>
-        <bx-table-cell>Foo1</bx-table-cell>
-        <bx-table-cell>Bar1</bx-table-cell>
-        <bx-table-cell>Baz1</bx-table-cell>
-      </bx-table-row>
-      <bx-table-row>
-        <bx-table-cell>Foo2</bx-table-cell>
-        <bx-table-cell>Bar2</bx-table-cell>
-        <bx-table-cell>Baz2</bx-table-cell>
-      </bx-table-row>
-      <bx-table-row>
-        <bx-table-cell>Foo3</bx-table-cell>
-        <bx-table-cell>Bar3</bx-table-cell>
-        <bx-table-cell>Baz3</bx-table-cell>
-      </bx-table-row>
-    </bx-table-body>
-  </bx-table>
-</bx-data-table>
-```
-
-## Row selection
-
-Adding `selection-name` attribute to `<bx-table-row>`/`<bx-table-header-row>`
-shows the selection UI in the table row.
-
-The logic of row selection needs to be handled on by the application code. When
-user attempts to change row selection, the following events fire:
-
-| Element                 | Event                           | Description                                                   |
-| ----------------------- | ------------------------------- | ------------------------------------------------------------- |
-| `<bx-table-row>`        | `bx-table-row-change-selection` | Indicates user-initiated change in selection of a single row. |
-| `<bx-table-header-row>` | `bx-table-change-selection-all` | Indicates user-initiated change in selection of all rows.     |
-
-Both of above events have the following properties in the event details:
-
-| Property   | Description              |
-| ---------- | ------------------------ |
-| `selected` | The new selection state. |
-
-Both of above events bubble and are cancelable. Canceling those events mean
-canceling change in selection.
-
-Application code should listen to those events update its internal state of
-table rows. To do so, it's convenient to add a `data-` attribte to each table
-rows so the delegated event handler can see which row the events are from.
-
-Here's an example of [`lit-html`](https://lit-html.polymer-project.org). Note
-that those events are native DOM events, and thus something like
-`document.addEventListener('bx-table-row-change-selection', event => { ... })`
-works, too:
-
-```javascript
-/**
- * Handles an event to change in selection of rows, fired from `<bx-table-row>`,
- * to update application's row selection states.
- * @param {CustomEvent} event The event.
- */
-const handleChangeSelection = event => {
-  if (!event.defaultPrevented) {
-    rows = this.rows.map(row => {
-      // The row ID you set to `<bx-table-row>` the event is fired on
-      const targetRowId = event.target.dataset.rowId;
-      return targetRowId !== row.id
-        ? row
-        : {
-            ...row,
-            selected: event.detail.selected,
-          };
-    });
-  }
-};
-
-/**
- * Handles an event to change in selection of all rows, fired from `<bx-table-header-row>`,
- * to update application's row selection states.
- * @param {CustomEvent} event The event.
- */
-const handleChangeSelectionAll = event => {
-  if (!event.defaultPrevented) {
-    rows = this.rows.map(row => ({
-      ...row,
-      selected: event.detail.selected,
-    }));
-  }
-};
-
-...
-
-html`
-  <bx-data-table
-    @bx-table-row-change-selection=${handleChangeSelection}
-    @bx-table-change-selection-all=${handleChangeSelectionAll}
-  >
-    <bx-table>
-      <bx-table-head>
-        <bx-table-header-row ?selected=${rows.every(row => row.selected)} selection-name="my-row-selection-all">
-          <bx-table-header-cell>Foo</bx-table-header-cell>
-          <bx-table-header-cell>Bar</bx-table-header-cell>
-          <bx-table-header-cell>Baz</bx-table-header-cell>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body>
-        ${rows.map(
-          row => html`
-            <bx-table-row ?selected=${row.selected} selection-name="${`my-row-selection-${row.id}`}" data-row-id="${row.id}">
-              <bx-table-cell>${row.foo}</bx-table-cell>
-              <bx-table-cell>${row.bar}</bx-table-cell>
-              <bx-table-cell>${row.baz}</bx-table-cell>
-            </bx-table-row>
-          `
-        )}
-      </bx-table-body>
-    </bx-table>
-  </bx-data-table>
-`;
-```
-
-## Sorting
-
-Adding `sort-direction` attribute to `<bx-table-header-cell>` shows the sorting
-UI in the table header cell.
-
-The logic of sorting needs to be handled on by the application code. When user
-attempts to change sorting, `bx-table-header-cell-sort` event is fired, with the
-following properties in the event details:
-
-| Property           | Description             |
-| ------------------ | ----------------------- |
-| `oldSortDirection` | The old sort direction. |
-| `sortDirection`    | The new sort direction. |
-
-`bx-table-header-cell-sort` event bubbles and is cancelable. Canceling
-`bx-table-header-cell-sort` event means canceling change in sort direction.
-
-Application code should listen to those events update its internal state of
-sorting. An example of the logic needed is available in our codesandbox example
-above. To do so, it's convenient to add a `data-` attribte to each table header
-cells so the delegated event handler can see which table column the events are
-from.
-
-Here's an example of [`lit-html`](https://lit-html.polymer-project.org). Note
-that those events are native DOM events, and thus something like
-`document.addEventListener('bx-table-header-cell-sort', event => { ... })`
-works, too:
-
-```javascript
-/**
- * Handles an event to sort rows, fired from `<bx-table-header-cell>`, to update application's sorting state.
- * @param {CustomEvent} event The event.
- */
-const handleChangeSort = event => {
-  if (!defaultPrevented) {
-    // Changes the sorting state upon user gesture
-    sortInfo = {
-      columnId: event.target.dataset.columnId,
-      direction: event.detail.direction,
-    };
-  }
-};
-
-...
-
-const collator = new Intl.Collator('en'); // Use the locale user is on
-
-/**
- * Rows sorted by application's sorting state.
- */
-const sortedRows = rows.slice().sort((lhs, rhs) => {
-  const lhsValue = lhs[sortInfo.columnId];
-  const rhsValue = rhs[sortInfo.columnId];
-  return (sortInfo.direction === 'ascending' ? 1 : -1) * collator.compare(lhsValue, rhsValue);
-});
-
-html`
-  <bx-data-table
-    @bx-table-header-cell-sort=${handleChangeSort}
-  >
-    <bx-table>
-      <bx-table-head>
-        <bx-table-header-row>
-          <bx-table-header-cell data-column-id="foo">Foo</bx-table-header-cell>
-          <bx-table-header-cell data-column-id="bar">Bar</bx-table-header-cell>
-          <bx-table-header-cell data-column-id="baz">Baz</bx-table-header-cell>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body>
-        ${sortedRows.map(
-          row => html`
-            <bx-table-row>
-              <bx-table-cell>${row.foo}</bx-table-cell>
-              <bx-table-cell>${row.bar}</bx-table-cell>
-              <bx-table-cell>${row.baz}</bx-table-cell>
-            </bx-table-row>
-          `
-        )}
-      </bx-table-body>
-    </bx-table>
-  </bx-data-table>
-`;
-```
-
-## Skeleton
-
-For the skeleton variation, utilize `<bx-table-header-cell-skeleton>`.
-
-```html
-<bx-table size="short">
-  <bx-table-head>
-    <bx-table-header-row>
-      <bx-table-header-cell-skeleton>Name</bx-table-header-cell-skeleton>
-      <bx-table-header-cell-skeleton>Protocol</bx-table-header-cell-skeleton>
-      <bx-table-header-cell-skeleton>Port</bx-table-header-cell-skeleton>
-      <bx-table-header-cell-skeleton>Rule</bx-table-header-cell-skeleton>
-      <bx-table-header-cell-skeleton
-        >Attached Groups</bx-table-header-cell-skeleton
-      >
-      <bx-table-header-cell-skeleton>Status</bx-table-header-cell-skeleton>
-    </bx-table-header-row>
-  </bx-table-head>
-  <bx-table-body color-scheme="zebra">
-    <bx-table-row>
-      <bx-table-cell-skeleton></bx-table-cell-skeleton>
-      <bx-table-cell-skeleton></bx-table-cell-skeleton>
-      <bx-table-cell-skeleton></bx-table-cell-skeleton>
-      <bx-table-cell-skeleton></bx-table-cell-skeleton>
-      <bx-table-cell-skeleton></bx-table-cell-skeleton>
-      <bx-table-cell-skeleton></bx-table-cell-skeleton>
-    </bx-table-row>
-    <bx-table-row>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-    </bx-table-row>
-    <bx-table-row>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-      <bx-table-cell></bx-table-cell>
-    </bx-table-row>
-  </bx-table-body>
-</bx-table>
-```
-
-## Attributes, properties and events
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-table sort>`) and `false` means not setting the attribute (e.g.
-`<bx-table>` without `sort` attribute).
-
-### `<bx-table>`
-
-<Props of="bx-table" />
-
-### `<bx-table-header-row>`
-
-<Props of="bx-table-header-row" />
-
-### `<bx-table-header-cell>`
-
-<Props of="bx-table-header-cell" />
-
-### `<bx-table-body>`
-
-<Props of="bx-table-body" />
-
-### `<bx-table-row>`
-
-<Props of="bx-table-row" />
-
-### `<bx-table-batch-actions>`
-
-<Props of="bx-table-batch-actions" />
-
-### `<bx-table-toolbar-content>`
-
-<Props of="bx-table-toolbar-content" />
-
-### `<bx-table-toolbar-search>`
-
-<Props of="bx-table-toolbar-search" />
diff --git a/packages/carbon-web-components/src/components/data-table/data-table-story.scss b/packages/carbon-web-components/src/components/data-table/data-table-story.scss
deleted file mode 100644
index a91e4ce5e20..00000000000
--- a/packages/carbon-web-components/src/components/data-table/data-table-story.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2020, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-/* stylelint-disable selector-type-no-unknown */
-bx-ce-demo-data-table,
-.bx-ce-demo--data-table {
-  width: 100%;
-}
diff --git a/packages/carbon-web-components/src/components/data-table/data-table-story.ts b/packages/carbon-web-components/src/components/data-table/data-table-story.ts
deleted file mode 100644
index 231b0c697aa..00000000000
--- a/packages/carbon-web-components/src/components/data-table/data-table-story.ts
+++ /dev/null
@@ -1,911 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import debounce from 'lodash-es/debounce';
-import { html, property, LitElement } from 'lit-element';
-import { repeat } from 'lit-html/directives/repeat';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `@carbon/web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-import Delete16 from '@carbon/web-components/es/icons/delete/16';
-// @ts-ignore
-import Download16 from '@carbon/web-components/es/icons/download/16';
-// @ts-ignore
-import Settings16 from '@carbon/web-components/es/icons/settings/16';
-import BXBtn from '../button/button';
-import ifNonNull from '../../globals/directives/if-non-null';
-import '../overflow-menu/overflow-menu';
-import '../overflow-menu/overflow-menu-body';
-import '../overflow-menu/overflow-menu-item';
-import '../pagination/pagination';
-import '../pagination/page-sizes-select';
-import '../pagination/pages-select';
-import { TABLE_COLOR_SCHEME, TABLE_SIZE } from './table';
-import './table-head';
-import './table-header-row';
-import { TABLE_SORT_DIRECTION } from './table-header-cell';
-import './table-body';
-import './table-row';
-import './table-cell';
-import './table-header-expand-row';
-import './table-expand-row';
-import './table-expanded-row';
-import './table-toolbar';
-import './table-toolbar-content';
-import './table-toolbar-search';
-import './table-batch-actions';
-import './table-header-cell-skeleton';
-import './table-cell-skeleton';
-import {
-  rows as demoRows,
-  rowsMany as demoRowsMany,
-  columns as demoColumns,
-  sortInfo as demoSortInfo,
-} from './stories/data';
-import {
-  TDemoTableColumn,
-  TDemoTableRow,
-  TDemoSortInfo,
-} from './stories/types';
-import styles from './data-table-story.scss';
-import storyDocs from './data-table-story.mdx';
-
-/**
- * @param row A table row.
- * @param searchString A search string.
- * @returns `true` if the given table row matches the given search string.
- */
-const doesRowMatchSearchString = (row: TDemoTableRow, searchString: string) =>
-  Object.keys(row).some(
-    (key) => key !== 'id' && String(row[key] ?? '').indexOf(searchString) >= 0
-  );
-
-/**
- * A class to manage table states, like selection and sorting.
- * DEMONSTRATION-PURPOSE ONLY.
- * Data/state handling in data table tends to involve lots of application-specific logics
- * and thus abstracting everything in a library won't be a good return on investment
- * vs. letting users copy code here and implement features that fit their needs.
- */
-// @ts-ignore `BXCEDemoDataTable` is used (only) for type reference
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-class BXCEDemoDataTable extends LitElement {
-  /**
-   * The debounced handler for user-initiated change in search string.
-   */
-  private _handleChangeSearchString:
-    | ((() => void) & { cancel(): void })
-    | void = undefined;
-
-  /**
-   * The table sorting info reflecting user-initiated changes.
-   */
-  private _sortInfo?: TDemoSortInfo;
-
-  /**
-   * The table rows reflecting selection.
-   */
-  private _rows?: TDemoTableRow[];
-
-  /**
-   * The table rows reflecting selection and filtering.
-   */
-  private _filteredRows?: TDemoTableRow[];
-
-  /**
-   * The search string.
-   */
-  private _searchString = '';
-
-  /**
-   * Unique ID used for form elements.
-   */
-  protected _uniqueId = Math.random().toString(36).slice(2);
-
-  /**
-   * @param lhs A value.
-   * @param rhs Another value.
-   * @returns
-   *   `0` if the given two values are equal
-   *   A negative value to sort `lhs` to an index lower than `rhs`
-   *   A positive value to sort `rhs` to an index lower than `lhs`
-   */
-  private _compare(lhs, rhs) {
-    if (typeof lhs === 'number' && typeof rhs === 'number') {
-      return lhs - rhs;
-    }
-    return this.collator.compare(lhs, rhs);
-  }
-
-  /**
-   * Handles Cancel button in batch action bar.
-   */
-  private _handleCancelSelection() {
-    const { _rows: oldRows, _searchString: searchString } = this;
-    this._rows = this._rows!.map((row) =>
-      searchString && !doesRowMatchSearchString(row, searchString)
-        ? row
-        : { ...row, selected: false }
-    );
-    this.requestUpdate('_rows', oldRows);
-  }
-
-  /**
-   * Handles user-initiated change in search string.
-   */
-  private _handleChangeSearchStringImpl({ detail }: CustomEvent) {
-    const { _searchString: oldSearchString } = this;
-    this._searchString = detail.value;
-    this.requestUpdate('_searchString', oldSearchString);
-  }
-
-  /**
-   * Handles an event to change in selection of rows, fired from `<bx-table-row>`.
-   *
-   * @param event The event.
-   */
-  private _handleChangeSelection({
-    defaultPrevented,
-    detail,
-    target,
-  }: CustomEvent) {
-    if (!defaultPrevented) {
-      const { rowId: changedRowId } = (target as HTMLElement).dataset;
-      const { selected } = detail;
-      const { _rows: oldRows } = this;
-      this._rows = oldRows!.map((row) =>
-        Number(changedRowId) !== row.id ? row : { ...row, selected }
-      );
-      this.requestUpdate('_rows', oldRows);
-    }
-  }
-
-  /**
-   * Handles an event to change in selection of all rows, fired from `<bx-table-header-row>`.
-   *
-   * @param event The event.
-   */
-  private _handleChangeSelectionAll({ defaultPrevented, detail }: CustomEvent) {
-    if (!defaultPrevented) {
-      const { selected } = detail;
-      const { _rows: oldRows, _searchString: searchString } = this;
-      this._rows = this._rows!.map((row) =>
-        searchString && !doesRowMatchSearchString(row, searchString)
-          ? row
-          : { ...row, selected }
-      );
-      this.requestUpdate('_rows', oldRows);
-    }
-  }
-
-  /**
-   * Handles an event to sort rows, fired from `<bx-table-header-cell>`.
-   *
-   * @param event The event.
-   */
-  private _handleChangeSort({ defaultPrevented, detail, target }: CustomEvent) {
-    if (!defaultPrevented) {
-      const { columnId } = (target as HTMLElement).dataset;
-      const { sortDirection: direction } = detail;
-      const { _sortInfo: oldSortInfo } = this;
-      if (direction === TABLE_SORT_DIRECTION.NONE && columnId !== 'name') {
-        // Resets the sorting, given non-primary sorting column has got in non-sorting state
-        this._sortInfo = this.sortInfo;
-      } else {
-        // Sets the sorting as user desires
-        this._sortInfo = {
-          columnId: columnId!,
-          direction,
-        };
-      }
-      this.requestUpdate('_sortInfo', oldSortInfo);
-    }
-  }
-
-  /**
-   * Handles `bx-pagination-changed-current` event on the pagination UI.
-   *
-   * @param event The event.
-   */
-  private _handleChangeStart({ detail }: CustomEvent) {
-    this.start = detail.start;
-  }
-
-  /**
-   * Handles `bx-pages-select-changed` event on the pagination UI.
-   *
-   * @param event The event.
-   */
-  private _handleChangePageSize({ detail }: CustomEvent) {
-    this.pageSize = detail.value;
-  }
-
-  /**
-   * Handles Delete batch action button.
-   */
-  private _handleDeleteRows() {
-    const { _rows: oldRows, _searchString: searchString } = this;
-    this._rows = oldRows!.filter(
-      (row) => !row.selected || !doesRowMatchSearchString(row, searchString)
-    );
-    this.requestUpdate('_rows', oldRows);
-  }
-
-  /**
-   * Handles Download batch action button.
-   *
-   * @param event The event triggering this action.
-   */
-  private _handleDownloadRows({ target }: MouseEvent) {
-    const blob = new Blob(
-      [JSON.stringify(this._filteredRows!.filter((row) => row.selected))],
-      { type: 'application/json' }
-    );
-    (target as BXBtn).href = URL.createObjectURL(blob);
-    this._handleCancelSelection();
-  }
-
-  /**
-   * @returns The content of the pagination UI.
-   */
-  private _renderPagination() {
-    const {
-      pageSize,
-      start,
-      _filteredRows: filteredRows,
-      _handleChangeStart: handleChangeStart,
-      _handleChangePageSize: handleChangePageSize,
-    } = this;
-    if (typeof pageSize === 'undefined') {
-      return undefined;
-    }
-    return html`
-      <bx-pagination
-        page-size="${pageSize}"
-        start="${start}"
-        total="${filteredRows!.length}"
-        @bx-pagination-changed-current="${handleChangeStart}"
-        @bx-page-sizes-select-changed="${handleChangePageSize}">
-        <bx-page-sizes-select slot="page-sizes-select">
-          <option value="5">5</option>
-          <option value="10">10</option>
-          <option value="15">15</option>
-        </bx-page-sizes-select>
-        <bx-pages-select></bx-pages-select>
-      </bx-pagination>
-    `;
-  }
-
-  /**
-   * The g11n collator to use.
-   */
-  @property({ attribute: false })
-  collator = new Intl.Collator();
-
-  /**
-   * Data table columns.
-   */
-  @property({ attribute: false })
-  columns?: TDemoTableColumn[];
-
-  /**
-   * Data table rows.
-   */
-  @property({ attribute: false })
-  rows?: TDemoTableRow[];
-
-  /**
-   * Table sorting info.
-   */
-  @property({ attribute: false })
-  sortInfo?: TDemoSortInfo;
-
-  /**
-   * `true` if the the table should support selection UI.
-   */
-  @property({ type: Boolean, reflect: true, attribute: 'has-selection' })
-  hasSelection = false;
-
-  /**
-   * Number of items per page.
-   */
-  @property({ type: Number, attribute: 'page-size' })
-  pageSize!: number;
-
-  /**
-   * The table size.
-   */
-  @property({ reflect: true })
-  size = TABLE_SIZE.REGULAR;
-
-  /**
-   * The table color scheme.
-   */
-  @property({ reflect: true, attribute: 'color-scheme' })
-  colorScheme = TABLE_COLOR_SCHEME.REGULAR;
-
-  /**
-   * The row number where current page start with, index that starts with zero.
-   */
-  @property({ type: Number })
-  start = 0;
-
-  connectedCallback() {
-    super.connectedCallback();
-    if (this._handleChangeSearchString) {
-      this._handleChangeSearchString.cancel();
-    }
-    this._handleChangeSearchString = debounce(
-      this._handleChangeSearchStringImpl as () => void,
-      500
-    );
-  }
-
-  disconnectedCallback() {
-    if (this._handleChangeSearchString) {
-      this._handleChangeSearchString.cancel();
-      this._handleChangeSearchString = undefined;
-    }
-    super.disconnectedCallback();
-  }
-
-  shouldUpdate(changedProperties) {
-    if (changedProperties.has('sortInfo')) {
-      this._sortInfo = this.sortInfo;
-    }
-    if (changedProperties.has('rows')) {
-      this._rows = this.rows;
-    }
-    if (
-      changedProperties.has('rows') ||
-      changedProperties.has('_rows') ||
-      changedProperties.has('_searchString')
-    ) {
-      const {
-        pageSize,
-        start,
-        _rows: rows,
-        _searchString: searchString,
-      } = this;
-      this._filteredRows = !searchString
-        ? rows!
-        : rows!.filter((row) => doesRowMatchSearchString(row, searchString));
-      const count = this._filteredRows.length;
-      if (count > 0 && start >= count) {
-        this.start = Math.max(
-          start - Math.ceil((start - count) / pageSize) * pageSize,
-          0
-        );
-      }
-    }
-    return true;
-  }
-
-  render() {
-    const {
-      id: elementId,
-      colorScheme,
-      hasSelection,
-      pageSize = Infinity,
-      start = 0,
-      size,
-      columns,
-      _filteredRows: filteredRows,
-      _handleCancelSelection: handleCancelSelection,
-      _handleDeleteRows: handleDeleteRows,
-      _handleDownloadRows: handleDownloadRows,
-    } = this;
-    const selectionAllName = !hasSelection
-      ? undefined
-      : `__bx-ce-demo-data-table_select-all_${elementId || this._uniqueId}`;
-    const selectedRowsCountInFiltered = filteredRows!.filter(
-      ({ selected }) => selected!
-    ).length;
-    const selectedAllInFiltered =
-      selectedRowsCountInFiltered > 0 &&
-      filteredRows!.length === selectedRowsCountInFiltered;
-    const hasBatchActions = hasSelection && selectedRowsCountInFiltered > 0;
-    const { columnId: sortColumnId, direction: sortDirection } =
-      this._sortInfo!;
-    const sortedRows =
-      sortDirection === TABLE_SORT_DIRECTION.NONE
-        ? filteredRows!
-        : filteredRows!
-            .slice()
-            .sort(
-              (lhs, rhs) =>
-                (this.constructor as typeof BXCEDemoDataTable).collationFactors[
-                  sortDirection
-                ] * this._compare(lhs[sortColumnId!], rhs[sortColumnId!])
-            );
-    return html`
-      <bx-table-toolbar>
-        <bx-table-batch-actions
-          ?active="${hasBatchActions}"
-          selected-rows-count="${selectedRowsCountInFiltered}"
-          @bx-table-batch-actions-cancel-clicked="${handleCancelSelection}">
-          <bx-btn icon-layout="condensed" @click="${handleDeleteRows}"
-            >Delete ${Delete16({ slot: 'icon' })}</bx-btn
-          >
-          <bx-btn
-            icon-layout="condensed"
-            @click="${handleDownloadRows}"
-            href="javascript:void 0"
-            download="table-data.json">
-            Download ${Download16({ slot: 'icon' })}
-          </bx-btn>
-        </bx-table-batch-actions>
-        <bx-table-toolbar-content ?has-batch-actions="${hasBatchActions}">
-          <bx-table-toolbar-search
-            @bx-search-input="${this
-              ._handleChangeSearchString}"></bx-table-toolbar-search>
-          <bx-overflow-menu>
-            ${Settings16({ slot: 'icon' })}
-            <bx-overflow-menu-body>
-              <bx-overflow-menu-item> Action 1 </bx-overflow-menu-item>
-              <bx-overflow-menu-item> Action 2 </bx-overflow-menu-item>
-              <bx-overflow-menu-item> Action 3 </bx-overflow-menu-item>
-            </bx-overflow-menu-body>
-          </bx-overflow-menu>
-          <bx-btn>Primary Button</bx-btn>
-        </bx-table-toolbar-content>
-      </bx-table-toolbar>
-      <bx-table
-        size="${size}"
-        @bx-table-row-change-selection=${this._handleChangeSelection}
-        @bx-table-change-selection-all=${this._handleChangeSelectionAll}
-        @bx-table-header-cell-sort=${this._handleChangeSort}>
-        <bx-table-head>
-          <bx-table-header-row
-            ?selected=${selectedAllInFiltered}
-            selection-name=${ifNonNull(selectionAllName)}
-            selection-value=${ifNonNull(selectionAllName)}>
-            ${repeat(
-              columns!,
-              ({ id: columnId }) => columnId,
-              ({ id: columnId, sortCycle, title }) => {
-                const sortDirectionForThisCell =
-                  sortCycle &&
-                  (columnId === sortColumnId
-                    ? sortDirection
-                    : TABLE_SORT_DIRECTION.NONE);
-                return html`
-                  <bx-table-header-cell
-                    sort-cycle="${ifNonNull(sortCycle)}"
-                    sort-direction="${ifNonNull(sortDirectionForThisCell)}"
-                    data-column-id="${columnId}">
-                    ${title}
-                  </bx-table-header-cell>
-                `;
-              }
-            )}
-          </bx-table-header-row>
-        </bx-table-head>
-        <bx-table-body color-scheme="${colorScheme}">
-          ${repeat(
-            sortedRows.slice(start, start + pageSize),
-            ({ id: rowId }) => rowId,
-            (row) => {
-              const { id: rowId, selected } = row;
-              const selectionName = !hasSelection
-                ? undefined
-                : `__bx-ce-demo-data-table_${
-                    elementId || this._uniqueId
-                  }_${rowId}`;
-              const selectionValue = !hasSelection ? undefined : 'selected';
-              return html`
-                <bx-table-row
-                  ?selected=${hasSelection && selected}
-                  selection-name="${ifNonNull(selectionName)}"
-                  selection-value="${ifNonNull(selectionValue)}"
-                  data-row-id="${rowId}">
-                  ${repeat(
-                    columns!,
-                    ({ id: columnId }) => columnId,
-                    ({ id: columnId }) =>
-                      html` <bx-table-cell>${row[columnId]}</bx-table-cell> `
-                  )}
-                </bx-table-row>
-              `;
-            }
-          )}
-        </bx-table-body>
-      </bx-table>
-      ${this._renderPagination()}
-    `;
-  }
-
-  /**
-   * The map of how sorting direction affects sorting order.
-   */
-  static collationFactors = {
-    [TABLE_SORT_DIRECTION.ASCENDING]: 1,
-    [TABLE_SORT_DIRECTION.DESCENDING]: -1,
-  };
-}
-
-const colorSchemes = {
-  'Regular color scheme': null,
-  [`Zebra (${TABLE_COLOR_SCHEME.ZEBRA})`]: TABLE_COLOR_SCHEME.ZEBRA,
-};
-
-const sizes = {
-  [`Compact size (${TABLE_SIZE.COMPACT})`]: TABLE_SIZE.COMPACT,
-  [`Short size (${TABLE_SIZE.SHORT})`]: TABLE_SIZE.SHORT,
-  'Regular size': null,
-  [`Tall size (${TABLE_SIZE.TALL})`]: TABLE_SIZE.TALL,
-};
-
-const defineDemoDataTable = (() => {
-  let hasDemoDataTableDefined;
-  return () => {
-    if (!hasDemoDataTableDefined) {
-      hasDemoDataTableDefined = true;
-      const ce = customElements;
-      // Prevents `web-component-analyzer` from harvesting `<bx-ce-demo-data-table>`
-      ce.define('bx-ce-demo-data-table', BXCEDemoDataTable);
-    }
-  };
-})();
-
-export const Default = (args) => {
-  const { size } = args?.['bx-table'] ?? {};
-  const { colorScheme } = args?.['bx-table-body'] ?? {};
-  return html`
-    <bx-table size="${ifNonNull(size)}">
-      <bx-table-head>
-        <bx-table-header-row>
-          <bx-table-header-cell>Name</bx-table-header-cell>
-          <bx-table-header-cell>Protocol</bx-table-header-cell>
-          <bx-table-header-cell>Port</bx-table-header-cell>
-          <bx-table-header-cell>Rule</bx-table-header-cell>
-          <bx-table-header-cell>Attached Groups</bx-table-header-cell>
-          <bx-table-header-cell>Status</bx-table-header-cell>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body color-scheme="${colorScheme}">
-        <bx-table-row>
-          <bx-table-cell>Load Balancer 1</bx-table-cell>
-          <bx-table-cell>HTTP</bx-table-cell>
-          <bx-table-cell>80</bx-table-cell>
-          <bx-table-cell>Round Robin</bx-table-cell>
-          <bx-table-cell>Maureen's VM Groups</bx-table-cell>
-          <bx-table-cell>Active</bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell>Load Balancer 2</bx-table-cell>
-          <bx-table-cell>HTTP</bx-table-cell>
-          <bx-table-cell>80</bx-table-cell>
-          <bx-table-cell>Round Robin</bx-table-cell>
-          <bx-table-cell>Maureen's VM Groups</bx-table-cell>
-          <bx-table-cell>Active</bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell>Load Balancer 3</bx-table-cell>
-          <bx-table-cell>HTTP</bx-table-cell>
-          <bx-table-cell>80</bx-table-cell>
-          <bx-table-cell>Round Robin</bx-table-cell>
-          <bx-table-cell>Maureen's VM Groups</bx-table-cell>
-          <bx-table-cell>Active</bx-table-cell>
-        </bx-table-row>
-      </bx-table-body>
-    </bx-table>
-  `;
-};
-
-Default.storyName = 'Default';
-
-Default.parameters = {
-  knobs: {
-    'bx-table': () => ({
-      size: select('Table size (size)', sizes, null),
-    }),
-    'bx-table-body': () => ({
-      colorScheme: select(
-        'Color scheme (color-scheme in `<bx-table-body>`)',
-        colorSchemes,
-        null
-      ),
-    }),
-  },
-};
-
-export const expandable = (args) => {
-  const { size } = args?.['bx-table'] ?? {};
-  const { zebra } = args?.['bx-table-body'] ?? {};
-  const handleExpandRowAll = (event) => {
-    const { currentTarget, detail } = event;
-    const rows = currentTarget.querySelectorAll('bx-table-expand-row');
-    Array.prototype.forEach.call(rows, (row) => {
-      row.expanded = detail.expanded;
-    });
-  };
-  const handleExpandRow = (event) => {
-    const { currentTarget } = event;
-    const headerRow = currentTarget.querySelector('bx-table-header-expand-row');
-    const rows = currentTarget.querySelectorAll('bx-table-expand-row');
-    headerRow.expanded = Array.prototype.every.call(
-      rows,
-      (row) => row.expanded
-    );
-  };
-  return html`
-    <bx-table
-      size="${ifNonNull(size)}"
-      @bx-table-row-expando-toggled-all="${handleExpandRowAll}"
-      @bx-table-row-expando-toggled="${handleExpandRow}"
-    >
-      <bx-table-head>
-        <bx-table-header-expand-row>
-          <bx-table-header-cell>Name</bx-table-header-cell>
-          <bx-table-header-cell>Protocol</bx-table-header-cell>
-          <bx-table-header-cell>Port</bx-table-header-cell>
-          <bx-table-header-cell>Rule</bx-table-header-cell>
-          <bx-table-header-cell>Attached Groups</bx-table-header-cell>
-          <bx-table-header-cell>Status</bx-table-header-cell>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body ?zebra="${zebra}">
-        <bx-table-expand-row data-row-id="1">
-          <bx-table-cell>Load Balancer 1</bx-table-cell>
-          <bx-table-cell>HTTP</bx-table-cell>
-          <bx-table-cell>80</bx-table-cell>
-          <bx-table-cell>Round Robin</bx-table-cell>
-          <bx-table-cell>Maureen's VM Groups</bx-table-cell>
-          <bx-table-cell>Active</bx-table-cell>
-        </bx-table-expand-row>
-        <bx-table-expanded-row colspan="7">
-          <h1>Expandable row content</h1>
-          <p>Description here</p>
-        </bx-table-expanded-row>
-        <bx-table-expand-row data-row-id="2">
-          <bx-table-cell>Load Balancer 2</bx-table-cell>
-          <bx-table-cell>HTTP</bx-table-cell>
-          <bx-table-cell>80</bx-table-cell>
-          <bx-table-cell>Round Robin</bx-table-cell>
-          <bx-table-cell>Maureen's VM Groups</bx-table-cell>
-          <bx-table-cell>Active</bx-table-cell>
-        </bx-table-expand-row>
-        <bx-table-expanded-row colspan="7">
-          <h1>Expandable row content</h1>
-          <p>Description here</p>
-        </bx-table-expanded-row>
-        <bx-table-expand-row data-row-id="3">
-          <bx-table-cell>Load Balancer 3</bx-table-cell>
-          <bx-table-cell>HTTP</bx-table-cell>
-          <bx-table-cell>80</bx-table-cell>
-          <bx-table-cell>Round Robin</bx-table-cell>
-          <bx-table-cell>Maureen's VM Groups</bx-table-cell>
-          <bx-table-cell>Active</bx-table-cell>
-        </bx-table-expand-row>
-        <bx-table-expanded-row colspan="7">
-          <h1>Expandable row content</h1>
-          <p>Description here</p>
-        </bx-table-expanded-row>
-      </bx-table-body>
-    </bx-table>
-  `;
-};
-
-expandable.parameters = {
-  knobs: {
-    ...Default.parameters.knobs,
-    'bx-table-body': () => ({}),
-  },
-};
-
-export const sortable = (args) => {
-  const { size } = args?.['bx-table'] ?? {};
-  const { onBeforeChangeSelection: onBeforeChangeSelectionAll } =
-    args?.['bx-table-header-row'] ?? {};
-  const { colorScheme } = args?.['bx-table-body'] ?? {};
-  const { hasSelection, disableChangeSelection, onBeforeChangeSelection } =
-    args?.['bx-table-row'] ?? {};
-  const { disableChangeSort, onBeforeSort } =
-    args?.['bx-table-header-cell'] ?? {};
-  const beforeChangeSelectionHandler = {
-    handleEvent(event: CustomEvent) {
-      if (event.type === 'bx-table-change-selection-all') {
-        onBeforeChangeSelectionAll(event);
-      } else {
-        onBeforeChangeSelection(event);
-      }
-      if (disableChangeSelection) {
-        event.preventDefault();
-      }
-    },
-    capture: true, // To prevent the default behavior before `<bx-ce-demo-data-table>` handles the event
-  };
-  const beforeChangeSortHandler = {
-    handleEvent(event: CustomEvent) {
-      onBeforeSort(event);
-      if (disableChangeSort) {
-        event.preventDefault();
-      }
-    },
-    capture: true, // To prevent the default behavior before `<bx-ce-demo-data-table>` handles the event
-  };
-  defineDemoDataTable();
-  return html`
-    <style>
-      ${styles}
-    </style>
-    <!-- Refer to <bx-ce-demo-data-table> implementation at the top for details -->
-    <bx-ce-demo-data-table
-      color-scheme="${colorScheme}"
-      .columns=${demoColumns}
-      .rows=${demoRows}
-      .sortInfo=${demoSortInfo}
-      ?has-selection=${hasSelection}
-      size="${ifNonNull(size)}"
-      @bx-table-row-change-selection=${beforeChangeSelectionHandler}
-      @bx-table-change-selection-all=${beforeChangeSelectionHandler}
-      @bx-table-header-cell-sort=${beforeChangeSortHandler}>
-    </bx-ce-demo-data-table>
-  `;
-};
-
-sortable.parameters = {
-  knobs: {
-    ...Default.parameters.knobs,
-    'bx-table-header-row': () => ({
-      onBeforeChangeSelection: action('bx-table-change-selection-all'),
-    }),
-    'bx-table-row': () => {
-      const hasSelection = boolean(
-        'Supports selection feature (has-selection)',
-        false
-      );
-      return {
-        hasSelection,
-        disableChangeSelection:
-          hasSelection &&
-          boolean(
-            'Disable user-initiated change in selection ' +
-              '(Call event.preventDefault() in bx-table-row-change-selection/bx-table-change-selection-all events)',
-            false
-          ),
-        onBeforeChangeSelection: action('bx-table-row-change-selection'),
-      };
-    },
-    'bx-table-header-cell': () => ({
-      disableChangeSort: boolean(
-        'Disable user-initiated change in sorting (Call event.preventDefault() in bx-table-header-cell-sort event)',
-        false
-      ),
-      onBeforeSort: action('bx-table-header-cell-sort'),
-    }),
-  },
-};
-
-export const sortableWithPagination = (args) => {
-  const { size } = args?.['bx-table'] ?? {};
-  const { onBeforeChangeSelection: onBeforeChangeSelectionAll } =
-    args?.['bx-table-header-row'] ?? {};
-  const { colorScheme } = args?.['bx-table-body'] ?? {};
-  const { hasSelection, disableChangeSelection, onBeforeChangeSelection } =
-    args?.['bx-table-row'] ?? {};
-  const { disableChangeSort, onBeforeSort } =
-    args?.['bx-table-header-cell'] ?? {};
-  const beforeChangeSelectionHandler = {
-    handleEvent(event: CustomEvent) {
-      if (event.type === 'bx-table-change-selection-all') {
-        onBeforeChangeSelectionAll(event);
-      } else {
-        onBeforeChangeSelection(event);
-      }
-      if (disableChangeSelection) {
-        event.preventDefault();
-      }
-    },
-    capture: true, // To prevent the default behavior before `<bx-ce-demo-data-table>` handles the event
-  };
-  const beforeChangeSortHandler = {
-    handleEvent(event: CustomEvent) {
-      onBeforeSort(event);
-      if (disableChangeSort) {
-        event.preventDefault();
-      }
-    },
-    capture: true, // To prevent the default behavior before `<bx-ce-demo-data-table>` handles the event
-  };
-  defineDemoDataTable();
-  return html`
-    <style>
-      ${styles}
-    </style>
-    <!-- Refer to <bx-ce-demo-data-table> implementation at the top for details -->
-    <bx-ce-demo-data-table
-      color-scheme="${colorScheme}"
-      .columns=${demoColumns}
-      .rows=${demoRowsMany}
-      .sortInfo=${demoSortInfo}
-      ?has-selection=${hasSelection}
-      page-size="5"
-      size="${ifNonNull(size)}"
-      start="0"
-      @bx-table-row-change-selection=${beforeChangeSelectionHandler}
-      @bx-table-change-selection-all=${beforeChangeSelectionHandler}
-      @bx-table-header-cell-sort=${beforeChangeSortHandler}>
-    </bx-ce-demo-data-table>
-  `;
-};
-
-sortableWithPagination.storyName = 'Sortable with pagination';
-
-sortableWithPagination.parameters = {
-  knobs: sortable.parameters.knobs,
-};
-
-export const skeleton = (args) => {
-  const { size } = args?.['bx-table'];
-  const { colorScheme } = args?.['bx-table-body'];
-  return html`
-    <bx-table size="${size}">
-      <bx-table-head>
-        <bx-table-header-row>
-          <bx-table-header-cell-skeleton>Name</bx-table-header-cell-skeleton>
-          <bx-table-header-cell-skeleton
-            >Protocol</bx-table-header-cell-skeleton
-          >
-          <bx-table-header-cell-skeleton>Port</bx-table-header-cell-skeleton>
-          <bx-table-header-cell-skeleton>Rule</bx-table-header-cell-skeleton>
-          <bx-table-header-cell-skeleton
-            >Attached Groups</bx-table-header-cell-skeleton
-          >
-          <bx-table-header-cell-skeleton>Status</bx-table-header-cell-skeleton>
-        </bx-table-header-row>
-      </bx-table-head>
-      <bx-table-body color-scheme="${colorScheme}">
-        <bx-table-row>
-          <bx-table-cell-skeleton></bx-table-cell-skeleton>
-          <bx-table-cell-skeleton></bx-table-cell-skeleton>
-          <bx-table-cell-skeleton></bx-table-cell-skeleton>
-          <bx-table-cell-skeleton></bx-table-cell-skeleton>
-          <bx-table-cell-skeleton></bx-table-cell-skeleton>
-          <bx-table-cell-skeleton></bx-table-cell-skeleton>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-        </bx-table-row>
-        <bx-table-row>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-          <bx-table-cell></bx-table-cell>
-        </bx-table-row>
-      </bx-table-body>
-    </bx-table>
-  `;
-};
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-  knobs: {
-    ...Default.parameters.knobs,
-  },
-};
-
-export default {
-  title: 'Components/Data table',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/data-table/data-table.scss b/packages/carbon-web-components/src/components/data-table/data-table.scss
index 4e14c8b9bc4..bd0f26dacfa 100644
--- a/packages/carbon-web-components/src/components/data-table/data-table.scss
+++ b/packages/carbon-web-components/src/components/data-table/data-table.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,18 +7,25 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/font-family';
-@import 'carbon-components/scss/components/checkbox/checkbox';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/checkbox';
 
-@import 'carbon-components/scss/components/data-table/data-table-core';
-@import 'carbon-components/scss/components/data-table/data-table-expandable';
-@import 'carbon-components/scss/components/data-table/data-table-inline-edit';
-@import 'carbon-components/scss/components/data-table/data-table-skeleton';
+@use '@carbon/styles/scss/components/data-table' as *;
+@use '@carbon/styles/scss/components/link' as *;
 
+@use '@carbon/styles/scss/components/data-table/expandable';
+@use '@carbon/styles/scss/components/data-table/skeleton';
+
+// TODO: deprecate @import
 @import 'table-action';
 @import 'table-core';
 @import 'table-expandable';
 @import 'table-sizes';
 @import 'table-selection';
 @import 'table-sort';
-@import 'table-skeleton';
diff --git a/packages/carbon-web-components/src/components/data-table/defs.ts b/packages/carbon-web-components/src/components/data-table/defs.ts
index 1e01363f80b..eafe16dfec7 100644
--- a/packages/carbon-web-components/src/components/data-table/defs.ts
+++ b/packages/carbon-web-components/src/components/data-table/defs.ts
@@ -1,50 +1,40 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
 /**
- * Table color scheme.
+ * Table size.
  */
-export enum TABLE_COLOR_SCHEME {
-  /**
-   * Regular color scheme.
-   */
-  REGULAR = '',
-
+export enum TABLE_SIZE {
   /**
-   * Color scheme with zebra stripe.
+   * xs size.
    */
-  ZEBRA = 'zebra',
-}
+  XS = 'xs',
 
-/**
- * Table size.
- */
-export enum TABLE_SIZE {
   /**
-   * Compact size.
+   * sm size.
    */
-  COMPACT = 'compact',
+  SM = 'sm',
 
   /**
-   * Short size.
+   * md size.
    */
-  SHORT = 'short',
+  MD = 'md',
 
   /**
-   * Regular size.
+   * lg size - default.
    */
-  REGULAR = '',
+  LG = 'lg',
 
   /**
-   * Tall size.
+   * xl size.
    */
-  TALL = 'tall',
+  XL = 'xl',
 }
 
 /**
diff --git a/packages/carbon-web-components/src/components/data-table/index.ts b/packages/carbon-web-components/src/components/data-table/index.ts
index eb45fd8cb36..2ae4b0fa80b 100644
--- a/packages/carbon-web-components/src/components/data-table/index.ts
+++ b/packages/carbon-web-components/src/components/data-table/index.ts
@@ -1,25 +1,26 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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 './table';
+import './table-skeleton';
+import './table-header-title';
+import './table-header-description';
 import './table-batch-actions';
 import './table-body';
 import './table-cell';
-import './table-cell-skeleton';
-import './table-expand-row';
+import './table-cell-content';
 import './table-expanded-row';
 import './table-head';
 import './table-header-cell';
-import './table-header-cell-skeleton';
-import './table-header-expand-row';
 import './table-header-row';
 import './table-row';
+import './table-skeleton';
 import './table-toolbar';
 import './table-toolbar-content';
 import './table-toolbar-search';
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-basic-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-basic-story.ts
new file mode 100644
index 00000000000..419539e9453
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-basic-story.ts
@@ -0,0 +1,269 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table>
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+          <cds-table-header-cell>Other</cds-table-header-cell>
+          <cds-table-header-cell>Example</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 7</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const XLWithTwoLines = () => {
+  return html`
+    <cds-table size="xl">
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+          <cds-table-header-cell>Other</cds-table-header-cell>
+          <cds-table-header-cell>Example</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>
+            Load Balancer 1
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell
+            >Load Balancer 2
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell
+            >Load Balancer 3
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell
+            >Load Balancer 4
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell
+            >Load Balancer 5
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell
+            >Load Balancer 6
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell
+            >Load Balancer 7
+            <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+          </cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { locale, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      locale="${locale}"
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+          <cds-table-header-cell>Other</cds-table-header-cell>
+          <cds-table-header-cell>Example</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Starting</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Active</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 7</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Disabled</cds-table-cell>
+          <cds-table-cell>Test</cds-table-cell>
+          <cds-table-cell>22</cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      locale: text('Locale', 'en'),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Basic',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions-story.ts
new file mode 100644
index 00000000000..0fdfa4bb30d
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-batch-actions-story.ts
@@ -0,0 +1,284 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+import Add from '@carbon/web-components/es/icons/add/16';
+import Save from '@carbon/web-components/es/icons/save/16';
+import TrashCan from '@carbon/web-components/es/icons/trash-can/16';
+// @ts-ignore
+import Download16 from '@carbon/web-components/es/icons/download/16';
+// @ts-ignore
+import Settings16 from '@carbon/web-components/es/icons/settings/16';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With batch actions. Lorem ipsum dolor sit amet, consectetur adipiscing
+        elit. Maecenas accumsan mauris sed congue egestas. Integer varius mauris
+        vel arcu pulvinar bibendum non sit amet ligula. Nullam ut nisi eu tellus
+        aliquet vestibulum vel sit amet odio.</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-batch-actions ?active="true">
+          <cds-button>Delete ${TrashCan({ slot: 'icon' })}</cds-button>
+          <cds-button tooltip-position="bottom" tooltip-text="Add"
+            >${Add({ slot: 'icon' })}</cds-button
+          >
+          <cds-button tooltip-position="bottom" tooltip-text="Save"
+            >${Save({ slot: 'icon' })}</cds-button
+          >
+          <cds-button href="javascript:void 0" download="table-data.json">
+            Download ${Download16({ slot: 'icon' })}
+          </cds-button>
+        </cds-table-batch-actions>
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
+                Action 1
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 2')}>
+                Action 2
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 3')}>
+                Action 3
+              </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Add new</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell>
+            <cds-link>Starting</cds-link>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      ?radio=${radio}
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With batch actions.</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-batch-actions ?active="true">
+          <cds-button>Delete ${TrashCan({ slot: 'icon' })}</cds-button>
+          <cds-button>Save ${Save({ slot: 'icon' })}</cds-button>
+          <cds-button href="javascript:void 0" download="table-data.json">
+            Download ${Download16({ slot: 'icon' })}
+          </cds-button>
+        </cds-table-batch-actions>
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
+                Action 1
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 2')}>
+                Action 2
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 3')}>
+                Action 3
+              </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Add new</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', false),
+      locale: text('Locale', 'en'),
+      radio: boolean('Radio', false),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Batch Actions',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic-story.ts
new file mode 100644
index 00000000000..0b0767c4e82
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-dynamic-story.ts
@@ -0,0 +1,360 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+import Add from '@carbon/web-components/es/icons/add/16';
+import Save from '@carbon/web-components/es/icons/save/16';
+import TrashCan from '@carbon/web-components/es/icons/trash-can/16';
+// @ts-ignore
+import Download16 from '@carbon/web-components/es/icons/download/16';
+// @ts-ignore
+import Settings16 from '@carbon/web-components/es/icons/settings/16';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+let headerCount = 6;
+let rowCount = 1;
+
+const insertInRandomPosition = (array, element) => {
+  const index = Math.floor(Math.random() * (array.length + 1));
+  return [...array.slice(0, index), element, ...array.slice(index)];
+};
+
+const addRow = () => {
+  const newRow = document.createElement('cds-table-row');
+
+  const templateRow = {
+    name: `New Row ${rowCount}`,
+    protocol: 'HTTP',
+    port: rowCount * 100,
+    rule: rowCount % 2 === 0 ? 'Round robin' : 'DNS delegation',
+    attached_groups: `Row ${rowCount}'s VM Groups`,
+    status: 'Starting',
+  };
+
+  for (let key in templateRow) {
+    if (Object.prototype.hasOwnProperty.call(templateRow, key)) {
+      const cell = document.createElement('cds-table-cell');
+      cell.textContent = templateRow[key];
+      newRow.appendChild(cell);
+    }
+  }
+
+  const rows = document.querySelectorAll('cds-table-row');
+  const diff = headerCount - Object.keys(templateRow).length;
+
+  [...Array(diff)].forEach(() => {
+    const newCell = document.createElement('cds-table-cell');
+    newCell.textContent = `Header ${headerCount - 1}`;
+    newRow.appendChild(newCell);
+  });
+
+  newRow.setAttribute('selection-name', `${rows.length}`);
+
+  const updatedRows = insertInRandomPosition([...rows], newRow);
+  updatedRows.forEach((e) => {
+    document.querySelector('cds-table-body')!.insertBefore(e, null);
+  });
+
+  rowCount++;
+};
+
+const addHeader = () => {
+  const headerRow = document.querySelector('cds-table-header-row');
+  const newHeader = document.createElement('cds-table-header-cell');
+  newHeader.textContent = `Header ${headerCount}`;
+  headerRow?.appendChild(newHeader);
+
+  const rows = document.querySelectorAll('cds-table-row');
+  rows.forEach((e) => {
+    const newCell = document.createElement('cds-table-cell');
+    newCell.textContent = `Header ${headerCount}`;
+    e.appendChild(newCell);
+  });
+  headerCount++;
+};
+
+export const Default = () => {
+  return html`
+    <cds-table>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >Use the toolbar menu to add rows and
+        headers</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-batch-actions ?active="true">
+          <cds-button tooltip-position="bottom" tooltip-text="Add"
+            >${Add({ slot: 'icon' })}</cds-button
+          >
+          <cds-button tooltip-position="bottom" tooltip-text="Save"
+            >${Save({ slot: 'icon' })}</cds-button
+          >
+          <cds-button>${Save({ slot: 'icon' })}</cds-button>
+          <cds-button href="javascript:void 0" download="table-data.json">
+            Download ${Download16({ slot: 'icon' })}
+          </cds-button>
+        </cds-table-batch-actions>
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body flipped>
+              <cds-overflow-menu-item @click=${addRow}
+                >Add row</cds-overflow-menu-item
+              >
+              <cds-overflow-menu-item @click=${addHeader}
+                >Add header</cds-overflow-menu-item
+              >
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      expandable
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      ?radio=${radio}
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >Use the toolbar menu to add rows and
+        headers</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-batch-actions ?active="true">
+          <cds-button>Delete ${TrashCan({ slot: 'icon' })}</cds-button>
+          <cds-button>Save ${Save({ slot: 'icon' })}</cds-button>
+          <cds-button href="javascript:void 0" download="table-data.json">
+            Download ${Download16({ slot: 'icon' })}
+          </cds-button>
+        </cds-table-batch-actions>
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body flipped>
+              <cds-overflow-menu-item @click=${addRow}
+                >Add row</cds-overflow-menu-item
+              >
+              <cds-overflow-menu-item @click=${addHeader}
+                >Add header</cds-overflow-menu-item
+              >
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', false),
+      locale: text('Locale', 'en'),
+      radio: boolean('Radio', false),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Dynamic',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion-story.ts
new file mode 100644
index 00000000000..5fc4f8c0b4c
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-expansion-story.ts
@@ -0,0 +1,350 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table expandable>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With expansion</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const BatchExpansion = () => {
+  return html`
+    <cds-table expandable batch-expansion>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With expansion</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { isSortable, locale, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      expandable
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With expansion</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-expanded-row>
+          <h6>Expandable row content</h6>
+          <div>Description here</div>
+        </cds-table-expanded-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', false),
+      locale: text('Locale', 'en'),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Expansion',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering-story.ts
new file mode 100644
index 00000000000..b25f2ff3ac6
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-filtering-story.ts
@@ -0,0 +1,242 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+// @ts-ignore
+import Settings16 from '@carbon/web-components/es/icons/settings/16';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With filtering</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 3 </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary Button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      ?radio=${radio}
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With filtering</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 3 </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary Button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', false),
+      locale: text('Locale', 'en'),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Filtering',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-selection-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-selection-story.ts
new file mode 100644
index 00000000000..36c02492773
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-selection-story.ts
@@ -0,0 +1,355 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With selection</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const WithRadioSelection = () => {
+  return html`
+    <cds-table radio>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With selection</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header" hide-checkbox>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const WithSelectionAndSorting = () => {
+  return html`
+    <cds-table is-sortable>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With selection</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { isSortable, locale, radio, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      ?radio=${radio}
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With selection</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', false),
+      locale: text('Locale', 'en'),
+      radio: boolean('Radio', false),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Selection',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton-story.ts
new file mode 100644
index 00000000000..883e3770f66
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-skeleton-story.ts
@@ -0,0 +1,63 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, number } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import storyDocs from './data-table-story.mdx';
+import '../index';
+
+const headers = [
+  'Name',
+  'Protocol',
+  'Port',
+  'Rule',
+  'Attached groups',
+  'Status',
+];
+
+export const Default = () => {
+  return html` <cds-table-skeleton .headers=${headers}> </cds-table-skeleton>`;
+};
+
+export const Playground = (args) => {
+  const { columnCount, rowCount, showHeader, showToolbar, zebra } =
+    args?.[`${prefix}-table`] ?? {};
+
+  return html`
+    <cds-table-skeleton
+      .headers=${headers}
+      column-count=${columnCount}
+      row-count=${rowCount}
+      ?show-header=${showHeader}
+      ?show-toolbar=${showToolbar}
+      ?zebra=${zebra}>
+    </cds-table-skeleton>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      compact: boolean('Compact', false),
+      columnCount: number('Column count', 5),
+      rowCount: number('Row count', 5),
+      showHeader: boolean('Show header', true),
+      showToolbar: boolean('Show toolbar', true),
+      zebra: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Skeleton',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting-story.ts
new file mode 100644
index 00000000000..b3bd7172c12
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-sorting-story.ts
@@ -0,0 +1,201 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table is-sortable>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With filtering</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const { isSortable, locale, size, useStaticWidth, useZebraStyles } =
+    args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With filtering</cds-table-header-description
+      >
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', true),
+      locale: text('Locale', 'en'),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Sorting',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx b/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
new file mode 100644
index 00000000000..47531571782
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-story.mdx
@@ -0,0 +1,609 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+
+# Data table
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/data-table)
+
+Data table in `@carbon/web-components` focuses on primitives that constructs
+table UI, consisting of the following:
+
+| Tag                       | Description     | HTML tag counterpart |
+| ------------------------- | --------------- | -------------------- |
+| `<cds-table>`             | The container   | N/A                  |
+| `<cds-table>`             | The table       | `<table>`            |
+| `<cds-table-head>`        | The header      | `<thead>`            |
+| `<cds-table-header-row>`  | The header row  | `<tr>` in `<thead>`  |
+| `<cds-table-header-cell>` | The header cell | `<th>`               |
+| `<cds-table-body>`        | The header body | `<tbody>`            |
+| `<cds-table-row>`         | The header row  | `<tr>` in `<tbody>`  |
+| `<cds-table-cell>`        | The header cell | `<td>`               |
+
+## Table of Contents
+
+- [Getting started](#getting-started)
+- [Sorting](#sorting)
+  - [Programmatic sorting](#programmatic-sorting)
+  - [Custom sorting](#custom-sorting)
+- [Expansion](#expansion)
+  - [Programmatic expansion](#programmatic-expansion)
+- [Selection](#selection)
+  - [Programmatic selection](#programmatic-selection)
+- [Filtering](#filtering)
+- [Batch actions](#batch-actions)
+- [Toolbar](#toolbar)
+- [Skeleton](#skeleton)
+- [Attributes, properties, and events](#attributes-properties-and-events)
+
+- [Feedback](#feedback)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/data-table/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['data-table'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+Here is an example of a basic data table with a header row with two columns, and
+three regular rows:
+
+```html
+<cds-table>
+  <cds-table-head>
+    <cds-table-header-row>
+      <cds-table-header-cell>Name</cds-table-header-cell>
+      <cds-table-header-cell>Status</cds-table-header-cell>
+    </cds-table-header-row>
+  </cds-table-head>
+  <cds-table-body>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 1</cds-table-cell>
+      <cds-table-cell>Disabled</cds-table-cell>
+    </cds-table-row>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 2</cds-table-cell>
+      <cds-table-cell>Starting</cds-table-cell>
+    </cds-table-row>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 3</cds-table-cell>
+      <cds-table-cell>Active</cds-table-cell>
+    </cds-table-row>
+  </cds-table-body>
+</cds-table>
+```
+
+After rendering a `DataTable` component using the code snippet above, you can
+optionally add any number of features including sorting, row expansion,
+filtering, row selection, batch actions.
+
+For more information, see each usage section below for the functionality that
+you're interested in. If you want to see a full list of the arguments passed
+into your render prop, visit the
+[render props](#attributes-properties-and-events) section.
+
+### Table header
+
+You can add a header to the table that can contain a title and a description.
+
+```html
+<cds-table>
+  <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+  <cds-table-header-description slot="description"
+    >Example of a DataTable description.</cds-table-header-description
+  >
+  <cds-table-head>
+    <cds-table-header-row>
+      <cds-table-header-cell>Name</cds-table-header-cell>
+      <cds-table-header-cell>Status</cds-table-header-cell>
+    </cds-table-header-row>
+  </cds-table-head>
+  <cds-table-body>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 1</cds-table-cell>
+      <cds-table-cell>Disabled</cds-table-cell>
+    </cds-table-row>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 2</cds-table-cell>
+      <cds-table-cell>Starting</cds-table-cell>
+    </cds-table-row>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 3</cds-table-cell>
+      <cds-table-cell>Active</cds-table-cell>
+    </cds-table-row>
+  </cds-table-body>
+</cds-table>
+```
+
+### XL With Two Lines
+
+In case there is extra data that needs to be added within a `<cds-table-cell>`
+that would require a second line, you can use the `<cds-table-cell-content>`
+component as such:
+
+```html
+<cds-table size="xl">
+  ...
+  <cds-table-row>
+    <cds-table-cell>
+      Load Balancer 1
+      <cds-table-cell-content>Austin, Tx</cds-table-cell-content>
+    </cds-table-cell>
+    <cds-table-cell>Round robin</cds-table-cell>
+    <cds-table-cell>Starting</cds-table-cell>
+    <cds-table-cell>Test</cds-table-cell>
+    <cds-table-cell>22</cds-table-cell>
+  </cds-table-row>
+  ...
+</cds-table>
+```
+
+This requires the table to be of `size="xl"` to accomodate the content properly.
+
+## Sorting
+
+In order to sort the rows in your data table, you will need to pass in the
+`is-sortable` prop to the `<cds-table>` component.
+
+Optionally, you can pass in `is-sortable` to each `<cds-table-header-cell>` that
+you want to be sorted, or not sorted. This is useful if you only want to enable
+sorting on some table column headers, but not all.
+
+```html
+<cds-table is-sortable> ... </cds-table>
+```
+
+### Programmatic sorting
+
+You can also change the sort status of the table by querying the specific
+`<cds-table-header-cell>` you would like to sort.
+
+```js
+// sorting the first column
+document
+  .querySelectorAll('cds-table-header-cell')[0]
+  .shadowRoot.querySelector('button')
+  .click();
+```
+
+### Custom sorting
+
+If the default sorting logic doesn't match your use-case, you can provide a
+custom sort method as a `customSortRow` prop to `<cds-table>`.
+
+`sortRow` is a method that takes in the values of two cells, in addition to some
+info, and should return -1, 0, or 1 as a result (mirroring the native sort
+behavior in JavaScript).
+
+The component uses a default `Intl.Collator` object created with the current set
+locale to sort the rows. The default sorting row function uses this collator,
+and as such it is needed in the custom sorting function.
+
+As a result, `customSortRow` function would take on the following shape:
+
+```js
+  customSortRow(lhs, rhs, collator) {
+    if (typeof lhs === 'number' && typeof rhs === 'number') {
+      return lhs - rhs;
+    }
+    return collator.compare(lhs, rhs);
+  }
+
+  document.querySelector('cds-table').customSortRow = customSortRow;
+```
+
+If you would like to use a different locale for collator comparisons, you can
+change the `locale` property and it will be updated accordingly. In case a
+different collator is needed, you can create a new object and pass it in as
+such:
+
+```js
+  document.querySelector('cds-table').collator = // new collator here;
+```
+
+## Expansion
+
+The `<cds-table>` component supports row-level expansion when using the
+`expandable` prop. Setting the prop will apply the `expandable` prop to every
+row. This is useful when every row can be expandable. In order to make a row be
+expandable, it is necessary for the row to have a `<cds-table-expanded-row>`
+component directly following it.
+
+```html
+<cds-table expandable>
+  <cds-table-head>
+    <cds-table-header-row>
+      <cds-table-header-cell>Name</cds-table-header-cell>
+      <cds-table-header-cell>Status</cds-table-header-cell>
+    </cds-table-header-row>
+  </cds-table-head>
+  <cds-table-body>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 1</cds-table-cell>
+      <cds-table-cell>Disabled</cds-table-cell>
+    </cds-table-row>
+    <cds-table-expanded-row>
+      <h6>Expandable row content</h6>
+      <div>Description here</div>
+    </cds-table-expanded-row>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 2</cds-table-cell>
+      <cds-table-cell>Starting</cds-table-cell>
+    </cds-table-row>
+    <cds-table-expanded-row>
+      <h6>Expandable row content</h6>
+      <div>Description here</div>
+    </cds-table-expanded-row>
+    <cds-table-row>
+      <cds-table-cell>Load Balancer 3</cds-table-cell>
+      <cds-table-cell>Active</cds-table-cell>
+    </cds-table-row>
+    <cds-table-expanded-row>
+      <h6>Expandable row content</h6>
+      <div>Description here</div>
+    </cds-table-expanded-row>
+  </cds-table-body>
+</cds-table>
+```
+
+In case you'd like a button to expand all the rows at once, you can use the
+`batch-expansion` prop in `<cds-table>`.
+
+In case you only want to set specific rows to be expandable, be sure to set the
+`expandable` prop only on that specific `<cds-table-row>` component, and have
+its adjacent sibling `<cds-table-expanded-row>` directly following it.
+
+### Programmatic expansion
+
+You can programmatically trigger a row expansion by querying the desired row as
+such:
+
+```js
+document
+  .querySelectorAll('cds-table-row')[0]
+  .shadowRoot.querySelector('.cds--table-expand__button')
+  .click();
+```
+
+## Selection
+
+The `<cds-table>` component supports row selection when using the
+`is-selectable` prop. Setting the prop will automatically set a numerical
+`selection-name` attribute to every row, though this can also be customized with
+your own custom name.
+
+```html
+<cds-table is-selectable> </cds-table>
+```
+
+By default, the `<cds-table-header-row>` component will render with its own
+checkbox, used to select all the rows at once. If you would like to disable this
+behavior, set the `hide-checkbox` prop within the component.
+
+```html
+<cds-table is-selectable>
+  ...
+  <cds-table-header-row hide-checkbox> ... </cds-table-header-row>
+  ...
+</cds-table>
+```
+
+### Programmatic selection
+
+You can programmatically trigger a row selection by querying the desired row as
+such:
+
+```js
+document
+  .querySelectorAll('cds-table-row')[0]
+  .shadowRoot.querySelector('cds-checkbox')
+  .shadowRoot.querySelector('input')
+  .click();
+```
+
+## Filtering
+
+Filtering in a `<cds-table>` is provided through usage of the
+`<cds-table-toolbar>` and the `<cds-table-toolbar-search>` component. Any input
+entered through `<cds-table-toolbar-search>` will be used in the built-in
+filtering function.
+
+```html
+<cds-table>
+  <cds-table-head>
+    <cds-table-toolbar slot="toolbar">
+      <cds-table-toolbar-content>
+        <cds-table-toolbar-search
+          placeholder="Filter table"></cds-table-toolbar-search>
+      </cds-table-toolbar-content>
+    </cds-table-toolbar>
+    ... header
+  </cds-table-head>
+  ... body and rows
+</cds-table>
+```
+
+Our built-in filtering function scans the rows' strings and attempts to match to
+the current search value input. If there are no matches in a given row, the
+current row will be filtered out.
+
+In other words, a custom function will be doing its own string comparison per
+row, and thus it would have the following structure:
+
+```js
+const newFilterRows = (rowText, searchString) => {
+  return; // provide custom string comparison return boolean;
+};
+
+document.querySelector('cds-table').filterRows = newFilterRows;
+```
+
+## Batch actions
+
+You can combine batch actions with the `<cds-table>` component to allow the user
+to perform a single action on multiple selected rows.
+
+This toolbar is highly customizable, as any action can be adhered to a
+`<cds-button>` and inserted into the toolbar.
+
+In the example below, we have custom `<cds-button>`s that we can customize to
+our liking by using the `onclick` property and passing it any custom functions.
+
+The component has a built-in download function, that is called whenever one of
+the `<cds-button>`s has a `download` attribute. The component will create a JSON
+object containing the currently selected rows, and trigger its download within
+the browser.
+
+```js
+const alertFunction = () => alert('Alert!');
+```
+
+```html
+<cds-table>
+  <cds-table-head>
+    <cds-table-toolbar slot="toolbar">
+      <cds-table-batch-actions>
+        <cds-button
+          >Delete
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 32 32"
+            slot="icon">
+            <path d="M12 12H14V24H12zM18 12H20V24H18z"></path>
+            <path
+              d="M4 6V8H6V28a2 2 0 002 2H24a2 2 0 002-2V8h2V6zM8 28V8H24V28zM12 2H20V4H12z"></path>
+          </svg>
+        </cds-button>
+        <cds-button
+          tooltip-position="bottom"
+          tooltip-text="Save"
+          onclick="alertFunction()"
+          >Save
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            slot="icon">
+            <path
+              d="M13.9,4.6l-2.5-2.5C11.3,2.1,11.1,2,11,2H3C2.4,2,2,2.4,2,3v10c0,0.6,0.4,1,1,1h10c0.6,0,1-0.4,1-1V5	C14,4.9,13.9,4.7,13.9,4.6z M6,3h4v2H6V3z M10,13H6V9h4V13z M11,13V9c0-0.6-0.4-1-1-1H6C5.4,8,5,8.4,5,9v4H3V3h2v2c0,0.6,0.4,1,1,1	h4c0.6,0,1-0.4,1-1V3.2l2,2V13H11z"></path></svg
+        ></cds-button>
+        <cds-button href="javascript:void 0" download="table-data.json">
+          Download
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            slot="icon">
+            <path
+              d="M13 7L12.3 6.3 8.5 10.1 8.5 1 7.5 1 7.5 10.1 3.7 6.3 3 7 8 12zM13 12v2H3v-2H2v2l0 0c0 .6.4 1 1 1h10c.6 0 1-.4 1-1l0 0v-2H13z"></path>
+          </svg>
+        </cds-button>
+      </cds-table-batch-actions>
+    </cds-table-toolbar>
+    ... headers
+  </cds-table-head>
+  ... body and rows
+</cds-table>
+```
+
+## Toolbar
+
+As mentioned earlier, you can add a `<cds-table-toolbar-search>` component to
+the toolbar. You can also add an overflow menu and a button within the toolbar
+as such:
+
+```html
+<cds-table>
+  <cds-table-head>
+    <cds-table-toolbar slot="toolbar">
+      <cds-table-toolbar-content>
+        <cds-table-toolbar-search
+          placeholder="Filter table"></cds-table-toolbar-search>
+        <cds-overflow-menu toolbar-action>
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            slot="icon">
+            <path
+              d="M13.5,8.4c0-0.1,0-0.3,0-0.4c0-0.1,0-0.3,0-0.4l1-0.8c0.4-0.3,0.4-0.9,0.2-1.3l-1.2-2C13.3,3.2,13,3,12.6,3	c-0.1,0-0.2,0-0.3,0.1l-1.2,0.4c-0.2-0.1-0.4-0.3-0.7-0.4l-0.3-1.3C10.1,1.3,9.7,1,9.2,1H6.8c-0.5,0-0.9,0.3-1,0.8L5.6,3.1	C5.3,3.2,5.1,3.3,4.9,3.4L3.7,3C3.6,3,3.5,3,3.4,3C3,3,2.7,3.2,2.5,3.5l-1.2,2C1.1,5.9,1.2,6.4,1.6,6.8l0.9,0.9c0,0.1,0,0.3,0,0.4	c0,0.1,0,0.3,0,0.4L1.6,9.2c-0.4,0.3-0.5,0.9-0.2,1.3l1.2,2C2.7,12.8,3,13,3.4,13c0.1,0,0.2,0,0.3-0.1l1.2-0.4	c0.2,0.1,0.4,0.3,0.7,0.4l0.3,1.3c0.1,0.5,0.5,0.8,1,0.8h2.4c0.5,0,0.9-0.3,1-0.8l0.3-1.3c0.2-0.1,0.4-0.2,0.7-0.4l1.2,0.4	c0.1,0,0.2,0.1,0.3,0.1c0.4,0,0.7-0.2,0.9-0.5l1.1-2c0.2-0.4,0.2-0.9-0.2-1.3L13.5,8.4z M12.6,12l-1.7-0.6c-0.4,0.3-0.9,0.6-1.4,0.8	L9.2,14H6.8l-0.4-1.8c-0.5-0.2-0.9-0.5-1.4-0.8L3.4,12l-1.2-2l1.4-1.2c-0.1-0.5-0.1-1.1,0-1.6L2.2,6l1.2-2l1.7,0.6	C5.5,4.2,6,4,6.5,3.8L6.8,2h2.4l0.4,1.8c0.5,0.2,0.9,0.5,1.4,0.8L12.6,4l1.2,2l-1.4,1.2c0.1,0.5,0.1,1.1,0,1.6l1.4,1.2L12.6,12z"></path>
+            <path
+              d="M8,11c-1.7,0-3-1.3-3-3s1.3-3,3-3s3,1.3,3,3C11,9.6,9.7,11,8,11C8,11,8,11,8,11z M8,6C6.9,6,6,6.8,6,7.9C6,7.9,6,8,6,8	c0,1.1,0.8,2,1.9,2c0,0,0.1,0,0.1,0c1.1,0,2-0.8,2-1.9c0,0,0-0.1,0-0.1C10,6.9,9.2,6,8,6C8.1,6,8,6,8,6z"></path>
+          </svg>
+          <cds-overflow-menu-body>
+            <cds-overflow-menu-item>Example 1</cds-overflow-menu-item>
+            <cds-overflow-menu-item>Example 2</cds-overflow-menu-item>
+          </cds-overflow-menu-body>
+        </cds-overflow-menu>
+        <cds-button>Example button</cds-button>
+      </cds-table-toolbar-content>
+    </cds-table-toolbar>
+    ... header
+  </cds-table-head>
+  ... body and rows
+</cds-table>
+```
+
+### Overflow Menu
+
+An overflow menu can be added to the toolbar table row. To add an overflow menu,
+simply add a `<cds-table-cell>` containing the `<cds-overflow-menu>`.
+
+```html
+...
+<cds-table-row>
+  <cds-table-cell>Load Balancer 4</cds-table-cell>
+  <cds-table-cell>HTTP</cds-table-cell>
+  <cds-table-cell>443</cds-table-cell>
+  <cds-table-cell>Round robin</cds-table-cell>
+  <cds-table-cell>Mel's VM Groups</cds-table-cell>
+  <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+  <cds-table-cell>
+    <cds-overflow-menu toolbar-action>
+      <svg
+        focusable="false"
+        preserveAspectRatio="xMidYMid meet"
+        xmlns="http://www.w3.org/2000/svg"
+        fill="currentColor"
+        aria-hidden="true"
+        width="16"
+        height="16"
+        viewBox="0 0 32 32"
+        slot="icon">
+        <circle cx="16" cy="8" r="2"></circle>
+        <circle cx="16" cy="16" r="2"></circle>
+        <circle cx="16" cy="24" r="2"></circle>
+      </svg>
+      <span slot="tooltip-content"> Options </span>
+      <cds-overflow-menu-body>
+        <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+        <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+        <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+      </cds-overflow-menu-body>
+    </cds-overflow-menu>
+  </cds-table-cell>
+</cds-table-row>
+...
+```
+
+## Skeleton
+
+The default Skeleton table will render with 5 rows and columns, the header, and
+the toolbar.
+
+```html
+<cds-table-skeleton> </cds-table-skeleton>
+```
+
+Specify the number of rows and columns you need with the `row-count` and
+`column-count` attributes.
+
+```html
+<cds-table-skeleton row-count="5" column-count="5"> </cds-table-skeleton>
+```
+
+### Custom headers
+
+Optionally, you can specify to have header titles on the Skeleton table.
+
+```html
+<cds-table-skeleton> </cds-table-skeleton>
+```
+
+```javascript
+const customHeaders = [
+  'Name',
+  'Protocol',
+  'Port',
+  'Rule',
+  'Attached groups',
+  'Status',
+];
+document.querySelector('cds-table-skeleton').headers = customHeaders;
+```
+
+## Attributes, properties and events
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-table is-sortable>`) and `false` means not setting the attribute (e.g.
+`<cds-table>` without `is-sortable` attribute).
+
+### `<cds-table>`
+
+<Props of="cds-table" />
+
+### `<cds-table-header-row>`
+
+<Props of="cds-table-header-row" />
+
+### `<cds-table-header-cell>`
+
+<Props of="cds-table-header-cell" />
+
+### `<cds-table-body>`
+
+<Props of="cds-table-body" />
+
+### `<cds-table-row>`
+
+<Props of="cds-table-row" />
+
+### `<cds-table-expanded-row>`
+
+<Props of="cds-table-expanded-row" />
+
+### `<cds-table-cell`
+
+<Props of="cds-table-cell" />
+
+### `<cds-table-batch-actions>`
+
+<Props of="cds-table-batch-actions" />
+
+### `<cds-table-toolbar>`
+
+<Props of="cds-table-toolbar" />
+
+### `<cds-table-toolbar-content>`
+
+<Props of="cds-table-toolbar-content" />
+
+### `<cds-table-toolbar-search>`
+
+<Props of="cds-table-toolbar-search" />
+
+### `cds-table-skeleton`
+
+<Props of="cds-table-skeleton" />
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar-story.ts b/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar-story.ts
new file mode 100644
index 00000000000..d995fb02824
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/stories/data-table-toolbar-story.ts
@@ -0,0 +1,704 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { prefix } from '../../../globals/settings';
+import { TABLE_SIZE } from '../table';
+// @ts-ignore
+import Settings16 from '@carbon/web-components/es/icons/settings/16';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import '../index';
+import storyDocs from './data-table-story.mdx';
+
+const sizes = {
+  [`xs (${TABLE_SIZE.XS})`]: TABLE_SIZE.XS,
+  [`sm (${TABLE_SIZE.SM})`]: TABLE_SIZE.SM,
+  [`md (${TABLE_SIZE.MD})`]: TABLE_SIZE.MD,
+  [`lg (${TABLE_SIZE.LG} - default)`]: TABLE_SIZE.LG,
+  [`xl (${TABLE_SIZE.XL})`]: TABLE_SIZE.XL,
+};
+
+export const Default = () => {
+  return html`
+    <cds-table>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With toolbar</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content>
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
+                Action 1
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 2')}>
+                Action 2
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 3')}>
+                Action 3
+              </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const PersistentToolbar = () => {
+  return html`
+    <cds-table>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With toolbar</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content>
+          <cds-table-toolbar-search
+            persistent
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
+                Action 1
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 2')}>
+                Action 2
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 3')}>
+                Action 3
+              </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const SmallPersistentToolbar = () => {
+  return html`
+    <cds-table size="sm">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With toolbar</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content>
+          <cds-table-toolbar-search
+            persistent
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 3 </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary Button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const WithOverflowMenu = () => {
+  return html`
+    <cds-table overflow-menu-on-hover>
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With toolbar</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content>
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item @click=${() => alert('Alert 1')}>
+                Action 1
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 2')}>
+                Action 2
+              </cds-overflow-menu-item>
+              <cds-overflow-menu-item @click=${() => alert('Alert 3')}>
+                Action 3
+              </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row>
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+          <cds-table-header-cell></cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row>
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    isSortable,
+    locale,
+    radio,
+    overflowMenuOnHover,
+    size,
+    useStaticWidth,
+    useZebraStyles,
+  } = args?.[`${prefix}-table`] ?? {};
+  return html`
+    <cds-table
+      ?is-sortable=${isSortable}
+      locale="${locale}"
+      ?overflow-menu-on-hover=${overflowMenuOnHover}
+      ?radio=${radio}
+      size="${size}"
+      ?use-static-width="${useStaticWidth}"
+      ?use-zebra-styles="${useZebraStyles}">
+      <cds-table-header-title slot="title">DataTable</cds-table-header-title>
+      <cds-table-header-description slot="description"
+        >With batch actions.</cds-table-header-description
+      >
+
+      <cds-table-toolbar slot="toolbar">
+        <cds-table-toolbar-content ?has-batch-actions="true">
+          <cds-table-toolbar-search
+            placeholder="Filter table"></cds-table-toolbar-search>
+          <cds-overflow-menu toolbar-action>
+            ${Settings16({
+              slot: 'icon',
+              class: `${prefix}--overflow-menu__icon`,
+            })}
+            <cds-overflow-menu-body>
+              <cds-overflow-menu-item> Action 1 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 2 </cds-overflow-menu-item>
+              <cds-overflow-menu-item> Action 3 </cds-overflow-menu-item>
+            </cds-overflow-menu-body>
+          </cds-overflow-menu>
+          <cds-button>Primary button</cds-button>
+        </cds-table-toolbar-content>
+      </cds-table-toolbar>
+
+      <cds-table-head>
+        <cds-table-header-row selection-name="header">
+          <cds-table-header-cell>Name</cds-table-header-cell>
+          <cds-table-header-cell>Protocol</cds-table-header-cell>
+          <cds-table-header-cell>Port</cds-table-header-cell>
+          <cds-table-header-cell>Rule</cds-table-header-cell>
+          <cds-table-header-cell>Attached groups</cds-table-header-cell>
+          <cds-table-header-cell>Status</cds-table-header-cell>
+          <cds-table-header-cell></cds-table-header-cell>
+        </cds-table-header-row>
+      </cds-table-head>
+      <cds-table-body>
+        <cds-table-row selection-name="0">
+          <cds-table-cell>Load Balancer 3</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Kevin's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="1">
+          <cds-table-cell>Load Balancer 1</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Maureen's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="2">
+          <cds-table-cell>Load Balancer 2</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Andrew's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="3">
+          <cds-table-cell>Load Balancer 6</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>3000</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Marc's VM Groups</cds-table-cell>
+          <cds-table-cell
+            ><cds-link disabled>Disabled</cds-link></cds-table-cell
+          >
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="4">
+          <cds-table-cell>Load Balancer 4</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>443</cds-table-cell>
+          <cds-table-cell>Round robin</cds-table-cell>
+          <cds-table-cell>Mel's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Starting</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+        <cds-table-row selection-name="5">
+          <cds-table-cell>Load Balancer 5</cds-table-cell>
+          <cds-table-cell>HTTP</cds-table-cell>
+          <cds-table-cell>80</cds-table-cell>
+          <cds-table-cell>DNS delegation</cds-table-cell>
+          <cds-table-cell>Ronja's VM Groups</cds-table-cell>
+          <cds-table-cell><cds-link>Active</cds-link></cds-table-cell>
+          <cds-table-cell>
+            <cds-overflow-menu toolbar-action>
+              ${OverflowMenuVertical16({ slot: 'icon' })}
+              <span slot="tooltip-content"> Options </span>
+
+              <cds-overflow-menu-body flipped>
+                <cds-overflow-menu-item> Stop app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Restart app </cds-overflow-menu-item>
+                <cds-overflow-menu-item> Rename </cds-overflow-menu-item>
+              </cds-overflow-menu-body>
+            </cds-overflow-menu>
+          </cds-table-cell>
+        </cds-table-row>
+      </cds-table-body>
+    </cds-table>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-table`]: () => ({
+      isSortable: boolean('Is sortable', false),
+      locale: text('Locale', 'en'),
+      overflowMenuOnHover: boolean('Overflow menu on hover', false),
+      radio: boolean('Radio', false),
+      size: select('Size', sizes, TABLE_SIZE.LG),
+      useStaticWidth: boolean('Use static width', false),
+      useZebraStyles: boolean('Use zebra styles', false),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/DataTable/Toolbar',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/data.ts b/packages/carbon-web-components/src/components/data-table/stories/data.ts
deleted file mode 100644
index 216170d9bee..00000000000
--- a/packages/carbon-web-components/src/components/data-table/stories/data.ts
+++ /dev/null
@@ -1,88 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 'core-js/modules/es.array.flat.js';
-import 'core-js/modules/es.string.pad-start.js';
-import { TABLE_SORT_DIRECTION } from '../table-header-cell';
-import { TDemoTableColumn, TDemoTableRow, TDemoSortInfo } from './types';
-
-export const columns: TDemoTableColumn[] = [
-  {
-    id: 'name',
-    title: 'Name',
-    sortCycle: 'bi-states-from-ascending',
-  },
-  {
-    id: 'protocol',
-    title: 'Protocol',
-  },
-  {
-    id: 'port',
-    title: 'Port',
-    sortCycle: 'tri-states-from-ascending',
-  },
-  {
-    id: 'rule',
-    title: 'Rule',
-  },
-  {
-    id: 'attachedGroups',
-    title: 'Attached Groups',
-  },
-  {
-    id: 'status',
-    title: 'Status',
-  },
-];
-
-export const rows: TDemoTableRow[] = [
-  {
-    id: 1,
-    name: 'Load Balancer 1',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 2,
-    name: 'Load Balancer 2',
-    protocol: 'HTTPS',
-    port: 443,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-  {
-    id: 3,
-    selected: true,
-    name: 'Load Balancer 3',
-    protocol: 'HTTP',
-    port: 80,
-    rule: 'Round Robin',
-    attachedGroups: "Maureen's VM Groups",
-    status: 'Active',
-  },
-];
-
-export const rowsMany: TDemoTableRow[] = Array.from(new Array(50))
-  .map((_item, i) =>
-    rows.map((row, j) => ({
-      ...row,
-      id: i * 3 + j,
-      name: `Load Balancer ${String(i * 3 + j + 1).padStart(3, '0')}`,
-    }))
-  )
-  .flat();
-
-export const sortInfo: TDemoSortInfo = {
-  columnId: 'name',
-  direction: TABLE_SORT_DIRECTION.ASCENDING,
-};
diff --git a/packages/carbon-web-components/src/components/data-table/stories/types.ts b/packages/carbon-web-components/src/components/data-table/stories/types.ts
deleted file mode 100644
index 9833ff78ea0..00000000000
--- a/packages/carbon-web-components/src/components/data-table/stories/types.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 { TABLE_SORT_DIRECTION } from '../table-header-cell';
-
-/**
- * Example data structure of data table column.
- */
-export type TDemoTableColumn = {
-  id: string;
-  title: string;
-  sortCycle?: string;
-};
-
-/**
- * Example data structure of data table row.
- */
-export type TDemoTableRow = {
-  id: number;
-  selected?: boolean;
-  [key: string]: any;
-};
-
-/**
- * Example structure of table sorting info.
- */
-export type TDemoSortInfo = {
-  columnId: string;
-  direction: TABLE_SORT_DIRECTION;
-};
diff --git a/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts b/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts
index 5ee196fc185..5e7c3946d5e 100644
--- a/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-batch-actions.ts
@@ -7,26 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './data-table.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Table batch actions.
  *
- * @element bx-table-batch-actions
- * @fires bx-table-batch-actions-cancel-clicked - The custom event fired after the Cancel button is clicked.
+ * @element cds-table-batch-actions
+ * @fires cds-table-batch-actions-cancel-clicked - The custom event fired after the Cancel button is clicked.
  */
 @customElement(`${prefix}-table-batch-actions`)
-class BXTableBatchActions extends LitElement {
+class CDSTableBatchActions extends LitElement {
   /**
    * Handles `click` event on the Cancel button.
    */
   private _handleCancel() {
-    const { eventClickCancel } = this.constructor as typeof BXTableBatchActions;
+    const { eventClickCancel } = this
+      .constructor as typeof CDSTableBatchActions;
     this.dispatchEvent(
       new CustomEvent(eventClickCancel, { bubbles: true, composed: true })
     );
@@ -52,6 +52,14 @@ class BXTableBatchActions extends LitElement {
   @property({ type: Number, attribute: 'selected-rows-count' })
   selectedRowsCount = 0;
 
+  firstUpdated() {
+    this.querySelectorAll(
+      (this.constructor as typeof CDSTableBatchActions).selectorButtons
+    ).forEach((e) => {
+      e.setAttribute('batch-action', '');
+    });
+  }
+
   updated(changedProperties) {
     if (changedProperties.has('active')) {
       this.setAttribute('tabindex', `${this.active ? '' : '-1'}`);
@@ -81,6 +89,13 @@ class BXTableBatchActions extends LitElement {
     `;
   }
 
+  /**
+   * The CSS selector to find the action buttons.
+   */
+  static get selectorButtons() {
+    return `${prefix}-button`;
+  }
+
   /**
    * The name of the custom event fired after the Cancel button is clicked.
    */
@@ -91,4 +106,4 @@ class BXTableBatchActions extends LitElement {
   static styles = styles;
 }
 
-export default BXTableBatchActions;
+export default CDSTableBatchActions;
diff --git a/packages/carbon-web-components/src/components/data-table/table-body.ts b/packages/carbon-web-components/src/components/data-table/table-body.ts
index 0a071217e9b..76f0f32c3e3 100644
--- a/packages/carbon-web-components/src/components/data-table/table-body.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-body.ts
@@ -7,22 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, query, LitElement } from 'lit-element';
-import { TABLE_COLOR_SCHEME } from './defs';
-import BXTableRow from './table-row';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSTableRow from './table-row';
 import styles from './data-table.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Data table body.
  *
- * @element bx-table-body
+ * @element cds-table-body
  */
 @customElement(`${prefix}-table-body`)
-class BXTableBody extends LitElement {
+class CDSTableBody extends LitElement {
   /**
    * The `<slot>` element in the shadow DOM.
    */
@@ -30,17 +28,15 @@ class BXTableBody extends LitElement {
   private _slotNode!: HTMLSlotElement;
 
   /**
-   * Updates `even`/`odd` properties of the child `<bx-table-row>`s.
+   * Updates `even`/`odd` properties of the child `<cds-table-row>`s.
    */
   private _updateZebra() {
-    const { colorScheme, _slotNode: slotNode } = this;
+    const { useZebraStyles, _slotNode: slotNode } = this;
     slotNode.assignedNodes().forEach((node) => {
       if (node.nodeType === Node.ELEMENT_NODE) {
-        const odd = (node as HTMLElement).matches('*:nth-of-type(odd)');
-        (node as BXTableRow).even =
-          colorScheme === TABLE_COLOR_SCHEME.ZEBRA && !odd;
-        (node as BXTableRow).odd =
-          colorScheme === TABLE_COLOR_SCHEME.ZEBRA && odd;
+        const even = (node as HTMLElement).matches('*:nth-of-type(even)');
+        (node as CDSTableRow).even = useZebraStyles && even;
+        (node as CDSTableRow).odd = useZebraStyles && !even;
       }
     });
   }
@@ -52,11 +48,19 @@ class BXTableBody extends LitElement {
     this._updateZebra();
   };
 
+  /**
+   * TODO: Uncomment when Carbon fully implements sticky header
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  // @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })
+  // stickyHeader = false;
+
   /**
    * The color scheme.
    */
-  @property({ reflect: true, attribute: 'color-scheme' })
-  colorScheme = TABLE_COLOR_SCHEME.REGULAR;
+  @property({ type: Boolean, reflect: true, attribute: 'use-zebra-styles' })
+  useZebraStyles = false;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -66,7 +70,7 @@ class BXTableBody extends LitElement {
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('colorScheme')) {
+    if (changedProperties.has('useZebraStyles')) {
       this._updateZebra();
     }
   }
@@ -79,4 +83,4 @@ class BXTableBody extends LitElement {
   static styles = styles;
 }
 
-export default BXTableBody;
+export default CDSTableBody;
diff --git a/packages/carbon-web-components/src/components/data-table/table-cell-content.ts b/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
new file mode 100644
index 00000000000..8bed5808659
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/table-cell-content.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './data-table.scss';
+
+/**
+ * Data table cell content.
+ *
+ * @element cds-table-cell-content
+ */
+@customElement(`${prefix}-table-cell-content`)
+class CDSTableCellContent extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSTableCellContent;
diff --git a/packages/carbon-web-components/src/components/data-table/table-cell-skeleton.ts b/packages/carbon-web-components/src/components/data-table/table-cell-skeleton.ts
deleted file mode 100644
index c97c5ccdf46..00000000000
--- a/packages/carbon-web-components/src/components/data-table/table-cell-skeleton.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import BXTableCell from './table-cell';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * Data table cell with skeleton content.
- *
- * @element bx-table-cell-skeleton
- */
-@customElement(`${prefix}-table-cell-skeleton`)
-class BXTableCellSkeleton extends BXTableCell {
-  render() {
-    return html` <span></span> `;
-  }
-}
-
-export default BXTableCellSkeleton;
diff --git a/packages/carbon-web-components/src/components/data-table/table-cell.ts b/packages/carbon-web-components/src/components/data-table/table-cell.ts
index 4d333ab74ae..48ecf64128a 100644
--- a/packages/carbon-web-components/src/components/data-table/table-cell.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-cell.ts
@@ -7,20 +7,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './data-table.scss';
-
-const { prefix } = settings;
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Data table cell.
  *
- * @element bx-table-cell
+ * @element cds-table-cell
  */
 @customElement(`${prefix}-table-cell`)
-class BXTableCell extends LitElement {
+class CDSTableCell extends LitElement {
+  /**
+   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+   */
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'overflow-menu-on-hover',
+  })
+  overflowMenuOnHover = false;
+
+  /**
+   * The table size.
+   */
+  @property({ reflect: true })
+  size;
+
+  /**
+   * TODO: Uncomment when Carbon fully implements sticky header
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  // @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })
+  // stickyHeader = false;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'cell');
@@ -29,10 +52,10 @@ class BXTableCell extends LitElement {
   }
 
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 
   static styles = styles;
 }
 
-export default BXTableCell;
+export default CDSTableCell;
diff --git a/packages/carbon-web-components/src/components/data-table/table-expand-row.ts b/packages/carbon-web-components/src/components/data-table/table-expand-row.ts
deleted file mode 100644
index 7e4349c31ef..00000000000
--- a/packages/carbon-web-components/src/components/data-table/table-expand-row.ts
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property } from 'lit-element';
-import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
-import settings from 'carbon-components/es/globals/js/settings';
-import HostListenerMixin from '../../globals/mixins/host-listener';
-import HostListener from '../../globals/decorators/host-listener';
-import BXTableRow from './table-row';
-import BXTableExpandedRow from './table-expanded-row';
-import styles from './data-table.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * The expando row in table row.
- *
- * @element bx-table-expand-row
- */
-@customElement(`${prefix}-table-expand-row`)
-class BXTableExpandRow extends HostListenerMixin(BXTableRow) {
-  /**
-   * Handles `click` event on the expando button.
-   */
-  private _handleClickExpando() {
-    this._handleUserInitiatedToggleExpando();
-  }
-
-  /**
-   * Handles `mouseover`/`mouseout` event handler on this element.
-   *
-   * @param event The event.
-   */
-  @HostListener('mouseover')
-  @HostListener('mouseout')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleMouseOverOut(event: MouseEvent) {
-    const { selectorExpandedRow } = this.constructor as typeof BXTableExpandRow;
-    const { nextElementSibling } = this;
-    if (nextElementSibling?.matches(selectorExpandedRow)) {
-      (nextElementSibling as BXTableExpandedRow).highlighted =
-        event.type === 'mouseover';
-    }
-  }
-
-  /**
-   * Handles user-initiated toggle request of the expando button in this table row.
-   *
-   * @param expanded The new expanded state.
-   */
-  private _handleUserInitiatedToggleExpando(expanded = !this.expanded) {
-    const init = {
-      bubbles: true,
-      cancelable: true,
-      composed: true,
-      detail: {
-        expanded,
-      },
-    };
-    if (
-      this.dispatchEvent(
-        new CustomEvent(
-          (
-            this.constructor as typeof BXTableExpandRow
-          ).eventBeforeExpandoToggle,
-          init
-        )
-      )
-    ) {
-      this.expanded = expanded;
-      this.dispatchEvent(
-        new CustomEvent(
-          (this.constructor as typeof BXTableExpandRow).eventExpandoToggle,
-          init
-        )
-      );
-    }
-  }
-
-  protected _renderFirstCells() {
-    const { _handleClickExpando: handleClickExpando } = this;
-    return html`
-      <div class="${prefix}--table-expand">
-        <button
-          class="${prefix}--table-expand__button"
-          @click="${handleClickExpando}">
-          ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
-        </button>
-      </div>
-      ${super._renderFirstCells()}
-    `;
-  }
-
-  /**
-   * `true` if the table row should be expanded.
-   */
-  @property({ type: Boolean, reflect: true })
-  expanded = false;
-
-  updated(changedProperties) {
-    if (changedProperties.has('expanded')) {
-      const { selectorExpandedRow } = this
-        .constructor as typeof BXTableExpandRow;
-      const { expanded, nextElementSibling } = this;
-      if (nextElementSibling?.matches(selectorExpandedRow)) {
-        (nextElementSibling as BXTableExpandedRow).expanded = expanded;
-      }
-    }
-  }
-
-  /**
-   * A selector that will return the corresponding expanded row.
-   */
-  static get selectorExpandedRow() {
-    return `${prefix}-table-expanded-row`;
-  }
-
-  /**
-   * The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.
-   * Cancellation of this event stops the user-initiated action of toggling the expanded state.
-   */
-  static get eventBeforeExpandoToggle() {
-    return `${prefix}-table-row-expando-beingtoggled`;
-  }
-
-  /**
-   * The name of the custom event fired after the expanded state this row is toggled upon a user gesture.
-   */
-  static get eventExpandoToggle() {
-    return `${prefix}-table-row-expando-toggled`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXTableExpandRow;
diff --git a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
index 5bd8e6ec9ff..2fb50a7c520 100644
--- a/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-expanded-row.ts
@@ -7,20 +7,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './data-table.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+import CDSTableRow from './table-row';
 /**
  * Table row of collapsible details.
  *
- * @element bx-table-expanded-row
+ * @element cds-table-expanded-row
  */
 @customElement(`${prefix}-table-expanded-row`)
-class BXTableExpandedRow extends LitElement {
+class CDSTableExpandedRow extends HostListenerMixin(LitElement) {
+  /**
+   * Handles `mouseover`/`mouseout` event handler on this element.
+   *
+   * @param event The event.
+   */
+  @HostListener('mouseover')
+  @HostListener('mouseout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleMouseOverOut(event: MouseEvent) {
+    const { selectorRow } = this.constructor as typeof CDSTableExpandedRow;
+    const { previousElementSibling } = this;
+    if (previousElementSibling?.matches(selectorRow)) {
+      (previousElementSibling as CDSTableRow).highlighted =
+        event.type === 'mouseover';
+    }
+  }
+
   /**
    * The colspan.
    */
@@ -33,12 +52,24 @@ class BXTableExpandedRow extends LitElement {
   @property({ type: Boolean, reflect: true })
   expanded = false;
 
+  /**
+   * `true` if the table row should be filtered.
+   */
+  @property({ type: Boolean, reflect: true })
+  filtered = false;
+
   /**
    * `true` if the table row should be highlighted.
    */
   @property({ type: Boolean, reflect: true })
   highlighted = false;
 
+  /**
+   * `true` if the previous table row has been selected
+   */
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+
   render() {
     const { colSpan } = this;
     return html`
@@ -50,7 +81,14 @@ class BXTableExpandedRow extends LitElement {
     `;
   }
 
+  /**
+   * A selector that will return the previous sibling row.
+   */
+  static get selectorRow() {
+    return `${prefix}-table-row`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXTableExpandedRow;
+export default CDSTableExpandedRow;
diff --git a/packages/carbon-web-components/src/components/data-table/table-head.ts b/packages/carbon-web-components/src/components/data-table/table-head.ts
index 981cedd8682..2fb507f5531 100644
--- a/packages/carbon-web-components/src/components/data-table/table-head.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-head.ts
@@ -7,20 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './data-table.scss';
-
-const { prefix } = settings;
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Data table header.
  *
- * @element bx-table-head
+ * @element cds-table-head
  */
 @customElement(`${prefix}-table-head`)
-class BXTableHead extends LitElement {
+class CDSTableHead extends LitElement {
+  /**
+   * TODO: Uncomment when Carbon fully implements sticky header
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  //@property({ type: Boolean, reflect: true, attribute: 'sticky-header' })
+  // stickyHeader = false;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'rowgroup');
@@ -35,4 +41,4 @@ class BXTableHead extends LitElement {
   static styles = styles;
 }
 
-export default BXTableHead;
+export default CDSTableHead;
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-cell-skeleton.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell-skeleton.ts
deleted file mode 100644
index 9fae6de6892..00000000000
--- a/packages/carbon-web-components/src/components/data-table/table-header-cell-skeleton.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import settings from 'carbon-components/es/globals/js/settings';
-import BXTableCell from './table-cell';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * Data table header cell with skeleton content.
- *
- * @element bx-table-header-cell-skeleton
- */
-@customElement(`${prefix}-table-header-cell-skeleton`)
-class BXTableHeaderCellSkeleton extends BXTableCell {}
-
-export default BXTableHeaderCellSkeleton;
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
index c852ba08cd0..1931efbe5f4 100644
--- a/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-header-cell.ts
@@ -7,10 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
-import Arrows16 from '@carbon/icons/lib/arrows/16';
-import ArrowDown16 from '@carbon/icons/lib/arrow--down/16';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import ArrowsVertical32 from '@carbon/icons/lib/arrows--vertical/32';
+import ArrowDown32 from '@carbon/icons/lib/arrow--down/32';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import {
   TABLE_SORT_CYCLE,
@@ -22,18 +23,16 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { TABLE_SORT_CYCLE, TABLE_SORT_CYCLES, TABLE_SORT_DIRECTION };
 
-const { prefix } = settings;
-
 /**
  * Data table header cell.
  *
- * @element bx-table-header-cell
- * @fires bx-table-header-cell-sort
+ * @element cds-table-header-cell
+ * @fires cds-table-header-cell-sort
  *   The custom event fired before a new sort direction is set upon a user gesture.
  *   Cancellation of this event stops the user-initiated change in sort direction.
  */
 @customElement(`${prefix}-table-header-cell`)
-class BXTableHeaderCell extends FocusMixin(LitElement) {
+class CDSTableHeaderCell extends FocusMixin(LitElement) {
   /**
    * Handles `click` event on the sort button.
    *
@@ -49,7 +48,7 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
         sortDirection: nextSortDirection,
       },
     };
-    const constructor = this.constructor as typeof BXTableHeaderCell;
+    const constructor = this.constructor as typeof CDSTableHeaderCell;
     if (
       this.dispatchEvent(new CustomEvent(constructor.eventBeforeSort, init))
     ) {
@@ -80,7 +79,7 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
           'Likely that `_getNextSort()` is called with non-sorted table column, which should not happen in regular condition.'
       );
     }
-    const directions = (this.constructor as typeof BXTableHeaderCell)
+    const directions = (this.constructor as typeof CDSTableHeaderCell)
       .TABLE_SORT_CYCLES[sortCycle];
     const index = directions.indexOf(sortDirection as TABLE_SORT_DIRECTION);
     if (index < 0) {
@@ -95,6 +94,23 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
     return directions[(index + 1) % directions.length];
   }
 
+  /**
+   * `true` if the table has expandable rows
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'is-sortable' })
+  isExpandable = false;
+
+  /**
+   * `true` if this table has selectable rows
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'is-sortable' })
+  isSelectable = false;
+  /**
+   * `true` if this table header column should be sortable
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'is-sortable' })
+  isSortable = false;
+
   /**
    * `true` if this table header cell is of a primary sorting column.
    */
@@ -114,14 +130,13 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
   @property({ reflect: true, attribute: 'sort-direction' })
   sortDirection?: TABLE_SORT_DIRECTION;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * TODO: Uncomment when Carbon fully implements sticky header
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  // @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })
+  // stickyHeader = false;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -130,16 +145,22 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
     super.connectedCallback();
   }
 
+  updated(changedProperties) {
+    if (this.isSortable && !changedProperties.has('sortDirection')) {
+      this.sortDirection = TABLE_SORT_DIRECTION.NONE;
+    }
+  }
+
   render() {
     const { sortDirection } = this;
     if (sortDirection) {
       const sortIcon =
         sortDirection === TABLE_SORT_DIRECTION.NONE
-          ? Arrows16({
+          ? ArrowsVertical32({
               part: 'sort-icon',
               class: `${prefix}--table-sort__icon-unsorted`,
             })
-          : ArrowDown16({
+          : ArrowDown32({
               part: 'sort-icon',
               class: `${prefix}--table-sort__icon`,
             });
@@ -167,6 +188,10 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
     return `${prefix}-table-header-cell-sort`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 
   /**
@@ -175,4 +200,4 @@ class BXTableHeaderCell extends FocusMixin(LitElement) {
   static TABLE_SORT_CYCLES = TABLE_SORT_CYCLES;
 }
 
-export default BXTableHeaderCell;
+export default CDSTableHeaderCell;
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-description.ts b/packages/carbon-web-components/src/components/data-table/table-header-description.ts
new file mode 100644
index 00000000000..eca5de3845c
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/table-header-description.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './data-table.scss';
+
+/**
+ * Data table header description
+ *
+ * @element cds-table-header-description
+ */
+@customElement(`${prefix}-table-header-description`)
+class CDSTableHeaderDescription extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSTableHeaderDescription;
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-expand-row.ts b/packages/carbon-web-components/src/components/data-table/table-header-expand-row.ts
deleted file mode 100644
index d05e6ddd61a..00000000000
--- a/packages/carbon-web-components/src/components/data-table/table-header-expand-row.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import settings from 'carbon-components/es/globals/js/settings';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import BXTableExpandRow from './table-expand-row';
-
-const { prefix } = settings;
-
-/**
- * Data table header row.
- *
- * @element bx-table-header-expand-row
- */
-@customElement(`${prefix}-table-header-expand-row`)
-class BXTableHeaderExpandRow extends BXTableExpandRow {
-  /**
-   * The name of the custom event fired before this row is selected/unselected upon a user gesture.
-   * Cancellation of this event stops the user-initiated change in selection.
-   */
-  static get eventBeforeChangeSelection() {
-    return `${prefix}-table-change-selection-all`;
-  }
-
-  /**
-   * The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.
-   * Cancellation of this event stops the user-initiated action of toggling the expanded state.
-   */
-  static get eventBeforeExpandoToggle() {
-    return `${prefix}-table-row-expando-beingtoggled-all`;
-  }
-
-  /**
-   * The name of the custom event fired after the expanded state this row is toggled upon a user gesture.
-   */
-  static get eventExpandoToggle() {
-    return `${prefix}-table-row-expando-toggled-all`;
-  }
-}
-
-export default BXTableHeaderExpandRow;
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-row.ts b/packages/carbon-web-components/src/components/data-table/table-header-row.ts
index df675b35f79..2715f7bda15 100644
--- a/packages/carbon-web-components/src/components/data-table/table-header-row.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-header-row.ts
@@ -7,19 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
+import CDSTableRow from './table-row';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import BXTableRow from './table-row';
-
-const { prefix } = settings;
 
 /**
  * Data table header row.
  *
- * @element bx-table-header-row
+ * @element cds-table-header-row
  */
 @customElement(`${prefix}-table-header-row`)
-class BXTableHeaderRow extends BXTableRow {
+class CDSTableHeaderRow extends CDSTableRow {
   /**
    * The name of the custom event fired before this row is selected/unselected upon a user gesture.
    * Cancellation of this event stops the user-initiated change in selection.
@@ -29,4 +27,4 @@ class BXTableHeaderRow extends BXTableRow {
   }
 }
 
-export default BXTableHeaderRow;
+export default CDSTableHeaderRow;
diff --git a/packages/carbon-web-components/src/components/data-table/table-header-title.ts b/packages/carbon-web-components/src/components/data-table/table-header-title.ts
new file mode 100644
index 00000000000..40a2474f245
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/table-header-title.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './data-table.scss';
+
+/**
+ * Data table header title
+ *
+ * @element cds-table-header-title
+ */
+@customElement(`${prefix}-table-header-title`)
+class CDSTableHeader extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSTableHeader;
diff --git a/packages/carbon-web-components/src/components/data-table/table-row.ts b/packages/carbon-web-components/src/components/data-table/table-row.ts
index d5225942efb..76880bc1d6d 100644
--- a/packages/carbon-web-components/src/components/data-table/table-row.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-row.ts
@@ -7,33 +7,74 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './data-table.scss';
 
-const { prefix } = settings;
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+import CDSTableExpandedRow from './table-expanded-row';
+import CDSTableCell from './table-cell';
 
 /**
  * Data table row.
  *
- * @element bx-table-row
+ * @element cds-table-row
  * @csspart selection-container The container of the checkbox.
  * @csspart selection The checkbox.
- * @fires bx-table-row-change-selection
+ * @fires cds-table-row-change-selection
  *   The custom event fired before this row is selected/unselected upon a user gesture.
  *   Cancellation of this event stops the user-initiated change in selection.
  */
 @customElement(`${prefix}-table-row`)
-class BXTableRow extends FocusMixin(LitElement) {
+class CDSTableRow extends HostListenerMixin(FocusMixin(LitElement)) {
+  /**
+   * Handles `click` event on the radio button.
+   *
+   * @param event The event.
+   */
+  @HostListener('eventRadioChange')
+  // @ts-ignore
+  private _handleClickSelectionRadio(event: CustomEvent) {
+    const { detail } = event;
+    const selected = detail.checked;
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        selected,
+      },
+    };
+    const constructor = this.constructor as typeof CDSTableRow;
+    if (
+      this.dispatchEvent(
+        new CustomEvent(constructor.eventBeforeChangeSelection, init)
+      )
+    ) {
+      this.selected = selected;
+      const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;
+
+      if (this.nextElementSibling?.matches(selectorExpandedRow)) {
+        (this.nextElementSibling as CDSTableExpandedRow).selected = selected;
+      }
+    }
+  }
+
   /**
    * Handles `click` event on the check box.
    *
    * @param event The event.
    */
-  private _handleClickSelectionCheckbox(event: Event) {
-    const selected = (event.target as HTMLInputElement).checked;
+  @HostListener('eventCheckboxChange')
+  // @ts-ignore
+  private _handleClickSelectionCheckbox(event: CustomEvent) {
+    const { detail } = event;
+    const selected = detail.checked;
     const init = {
       bubbles: true,
       cancelable: true,
@@ -42,54 +83,139 @@ class BXTableRow extends FocusMixin(LitElement) {
         selected,
       },
     };
-    const constructor = this.constructor as typeof BXTableRow;
+    const constructor = this.constructor as typeof CDSTableRow;
     if (
       this.dispatchEvent(
         new CustomEvent(constructor.eventBeforeChangeSelection, init)
       )
     ) {
       this.selected = selected;
+      const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;
+
+      if (this.nextElementSibling?.matches(selectorExpandedRow)) {
+        (this.nextElementSibling as CDSTableExpandedRow).selected = selected;
+      }
+    }
+  }
+
+  /**
+   * Handles `click` event on the expando button.
+   */
+  private _handleClickExpando() {
+    this._handleUserInitiatedToggleExpando();
+  }
+
+  /**
+   * Handles `mouseover`/`mouseout` event handler on this element.
+   *
+   * @param event The event.
+   */
+  @HostListener('mouseover')
+  @HostListener('mouseout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleMouseOverOut(event: MouseEvent) {
+    const { selectorExpandedRow, selectorTableCellOverflowMenu } = this
+      .constructor as typeof CDSTableRow;
+    const { nextElementSibling } = this;
+    if (nextElementSibling?.matches(selectorExpandedRow)) {
+      (nextElementSibling as CDSTableExpandedRow).highlighted =
+        event.type === 'mouseover';
+    }
+    if (this.overflowMenuOnHover) {
+      const overflowMenu = this.querySelector(selectorTableCellOverflowMenu);
+      const parentCell = overflowMenu?.parentElement;
+
+      if (event.type === 'mouseout') {
+        (parentCell as CDSTableCell).overflowMenuOnHover = true;
+      } else {
+        (parentCell as CDSTableCell).overflowMenuOnHover = false;
+      }
     }
   }
 
+  /**
+   * Handles user-initiated toggle request of the expando button in this table row.
+   *
+   * @param expanded The new expanded state.
+   */
+  _handleUserInitiatedToggleExpando(expanded = !this.expanded) {
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        expanded,
+      },
+    };
+    if (
+      this.dispatchEvent(
+        new CustomEvent(
+          (this.constructor as typeof CDSTableRow).eventBeforeExpandoToggle,
+          init
+        )
+      )
+    ) {
+      this.expanded = expanded;
+      this.dispatchEvent(
+        new CustomEvent(
+          (this.constructor as typeof CDSTableRow).eventExpandoToggle,
+          init
+        )
+      );
+    }
+  }
+
+  protected _renderExpandButton() {
+    const { _handleClickExpando: handleClickExpando } = this;
+    return html`
+      <div class="${prefix}--table-expand">
+        <button
+          class="${prefix}--table-expand__button"
+          @click="${handleClickExpando}">
+          ${ChevronRight16({ class: `${prefix}--table-expand__svg` })}
+        </button>
+      </div>
+    `;
+  }
+
   /**
    * @returns The first set of table cells.
    */
   protected _renderFirstCells() {
     const {
       disabled,
+      hideCheckbox,
+      radio,
       selected,
       selectionLabel,
       selectionName,
       selectionValue,
     } = this;
-    // Using `@click` instead of `@change` to support `.preventDefault()`
     return !selectionName
       ? undefined
       : html`
-          <div
-            part="selection-container"
-            class="${prefix}--table-column-checkbox">
-            ${html`
-              <input
-                id="selection"
-                part="selection"
-                class="${prefix}--checkbox"
-                type="checkbox"
-                value="${selectionValue}"
-                name="${selectionName}"
-                ?disabled="${disabled}"
-                .checked=${selected}
-                @click=${this._handleClickSelectionCheckbox} />
-              <label
-                for="selection"
-                class="${prefix}--checkbox-label"
-                aria-label="${selectionLabel}"></label>
-            `}
+          <div class="${prefix}--table-column-checkbox">
+            ${radio
+              ? html`<cds-radio-button data-table></cds-radio-button>`
+              : html`<cds-checkbox
+                  hide-label
+                  ?hide-checkbox="${hideCheckbox}"
+                  label-text="${selectionLabel}"
+                  name=${selectionName}
+                  data-table
+                  ?disabled=${disabled}
+                  ?checked=${selected}
+                  value=${selectionValue}></cds-checkbox> `}
           </div>
         `;
   }
 
+  /**
+   * `true` if this table should support batch expansion
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'batch-expansion' })
+  batchExpansion = false;
+
   /**
    * `true` if this table row should be disabled.
    */
@@ -97,8 +223,8 @@ class BXTableRow extends FocusMixin(LitElement) {
   disabled = false;
 
   /**
-   * `true` if this table row is placed at an even position in parent `<bx-table-body>`.
-   * `<bx-table-body>` sets this property, _only_ in zebra stripe mode.
+   * `true` if this table row is placed at an even position in parent `<cds-table-body>`.
+   * `<cds-table-body>` sets this property, _only_ in zebra stripe mode.
    *
    * @private
    */
@@ -106,14 +232,67 @@ class BXTableRow extends FocusMixin(LitElement) {
   even = false;
 
   /**
-   * `true` if this table row is placed at an odd position in parent `<bx-table-body>`.
-   * `<bx-table-body>` sets this property, _only_ in zebra stripe mode.
+   * `true` if this table row can be expanded to show content underneath
+   *
+   * @private
+   */
+  @property({ type: Boolean, reflect: true })
+  expandable = false;
+
+  /**
+   * `true` when the table row expanded is showing
+   *
+   * @private
+   */
+  @property({ type: Boolean, reflect: true })
+  expanded = false;
+
+  /**
+   * `true` if this table row should be filtered out.
+   */
+  @property({ type: Boolean, reflect: true })
+  filtered = false;
+
+  /**
+   * Specify whether the checkbox should be present in the DOM,
+   * but invisible and uninteractable.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-checkbox' })
+  hideCheckbox = false;
+
+  /**
+   * `true` if the table row should be highlighted.
+   */
+  @property({ type: Boolean, reflect: true })
+  highlighted = false;
+
+  /**
+   * `true` if this table row is placed at an odd position in parent `<cds-table-body>`.
+   * `<cds-table-body>` sets this property, _only_ in zebra stripe mode.
    *
    * @private
    */
   @property({ type: Boolean, reflect: true })
   odd = false;
 
+  /**
+   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+   */
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'overflow-menu-on-hover',
+  })
+  overflowMenuOnHover = false;
+
+  /**
+   * Specify whether the control should be a radio button or inline checkbox
+   *
+   * @private
+   */
+  @property({ type: Boolean, reflect: true })
+  radio = false;
+
   /**
    * `true` if this table row should be selected.
    */
@@ -139,6 +318,14 @@ class BXTableRow extends FocusMixin(LitElement) {
   @property({ attribute: 'selection-value' })
   selectionValue = '';
 
+  /**
+   * TODO: Uncomment when Carbon fully implements sticky header
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  // @property({ type: Boolean, reflect: true, attribute: 'sticky-header' })
+  // stickyHeader = false;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'row');
@@ -146,8 +333,49 @@ class BXTableRow extends FocusMixin(LitElement) {
     super.connectedCallback();
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('expanded')) {
+      const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;
+      const { expanded, nextElementSibling } = this;
+      if (nextElementSibling?.matches(selectorExpandedRow)) {
+        (nextElementSibling as CDSTableExpandedRow).expanded = expanded;
+      }
+    }
+
+    if (changedProperties.has('highlighted')) {
+      const { selectorExpandedRow } = this.constructor as typeof CDSTableRow;
+      const { highlighted, nextElementSibling } = this;
+      if (nextElementSibling?.matches(selectorExpandedRow)) {
+        (nextElementSibling as CDSTableExpandedRow).highlighted = highlighted;
+      }
+    }
+  }
+
   render() {
-    return html` ${this._renderFirstCells()}<slot></slot> `;
+    if (this.selectionName) {
+      this.closest(
+        (this.constructor as typeof CDSTableRow).selectorTable
+      )?.setAttribute('is-selectable', '');
+    }
+    return html`
+      ${this.expandable ? this._renderExpandButton() : ''}
+      ${this._renderFirstCells()}
+      <slot></slot>
+    `;
+  }
+
+  /**
+   * The name of the custom event fired after this radio button changes its checked state.
+   */
+  static get eventRadioChange() {
+    return `${prefix}-radio-button-changed`;
+  }
+
+  /**
+   * The name of the custom event fired after this radio button changes its checked state.
+   */
+  static get eventCheckboxChange() {
+    return `${prefix}-checkbox-changed`;
   }
 
   /**
@@ -159,13 +387,42 @@ class BXTableRow extends FocusMixin(LitElement) {
   }
 
   /**
-   * The CSS selector to find the table.
+   * A selector that will return the parent table
    */
   static get selectorTable() {
     return `${prefix}-table`;
   }
 
+  /**
+   * The CSS selector to find the overflow menu on the table cell
+   */
+  static get selectorTableCellOverflowMenu() {
+    return `${prefix}-table-cell ${prefix}-overflow-menu`;
+  }
+
+  /**
+   * A selector that will return the corresponding expanded row.
+   */
+  static get selectorExpandedRow() {
+    return `${prefix}-table-expanded-row`;
+  }
+
+  /**
+   * The name of the custom event fired before the expanded state this row is being toggled upon a user gesture.
+   * Cancellation of this event stops the user-initiated action of toggling the expanded state.
+   */
+  static get eventBeforeExpandoToggle() {
+    return `${prefix}-table-row-expando-beingtoggled`;
+  }
+
+  /**
+   * The name of the custom event fired after the expanded state this row is toggled upon a user gesture.
+   */
+  static get eventExpandoToggle() {
+    return `${prefix}-table-row-expando-toggled`;
+  }
+
   static styles = styles;
 }
 
-export default BXTableRow;
+export default CDSTableRow;
diff --git a/packages/carbon-web-components/src/components/data-table/table-skeleton.ts b/packages/carbon-web-components/src/components/data-table/table-skeleton.ts
new file mode 100644
index 00000000000..ea791a75d93
--- /dev/null
+++ b/packages/carbon-web-components/src/components/data-table/table-skeleton.ts
@@ -0,0 +1,164 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './data-table.scss';
+
+/**
+ * Data table skeleton
+ *
+ * @element cds-table-skeleton
+ */
+@customElement(`${prefix}-table-skeleton`)
+class CDSTableSkeleton extends LitElement {
+  /**
+   * Optionally specify the displayed headers
+   */
+  @property()
+  private headers: string[] = [];
+
+  /**
+   * Optionally specify whether you want the Skeleton to be rendered as a compact DataTable
+   */
+  @property({ type: Boolean, reflect: true })
+  compact = false;
+
+  /**
+   * Specify the number of columns that you want to render in the skeleton state
+   */
+  @property({ type: Number, reflect: true, attribute: 'column-count' })
+  columnCount = 5;
+
+  /**
+   * Specify the number of rows that you want to render in the skeleton state
+   */
+  @property({ type: Number, reflect: true, attribute: 'row-count' })
+  rowCount = 5;
+
+  /**
+   * Specify if the table header should be rendered as part of the skeleton.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'show-header' })
+  showHeader = true;
+
+  /**
+   * Specify if the table toolbar should be rendered as part of the skeleton.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'show-toolbar' })
+  showToolbar = true;
+
+  /**
+   *  true to add useZebraStyles striping.
+   */
+  @property({ type: Boolean, reflect: true })
+  zebra = false;
+
+  /**
+   * @returns The header
+   */
+  protected _renderHeader() {
+    const { showHeader } = this;
+    return !showHeader
+      ? undefined
+      : html`
+          <div class="${prefix}--skeleton ${prefix}--data-table-container">
+            <div class="${prefix}--data-table-header">
+              <div class="${prefix}--data-table-header__title"></div>
+              <div class="${prefix}--data-table-header__description"></div>
+            </div>
+          </div>
+        `;
+  }
+
+  /**
+   * @returns The header
+   */
+  protected _renderToolbar() {
+    const { showToolbar } = this;
+    return !showToolbar
+      ? undefined
+      : html`
+          <section class="${prefix}--table-toolbar">
+            <div class="${prefix}--toolbar-content">
+              <span
+                class="${prefix}--skeleton ${prefix}--btn ${prefix}--btn--sm"></span>
+            </div>
+          </section>
+        `;
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'table');
+    }
+    super.connectedCallback();
+  }
+
+  updated() {
+    if (this.headers.length) {
+      this.columnCount = this.headers.length;
+    } else {
+      this.headers = Array(this.columnCount).fill('');
+    }
+  }
+
+  render() {
+    const { compact, columnCount, headers, rowCount, zebra } = this;
+    const classes = classMap({
+      [`${prefix}--skeleton`]: true,
+      [`${prefix}--data-table`]: true,
+      [`${prefix}--data-table--compact`]: compact,
+      [`${prefix}--data-table--zebra`]: zebra,
+    });
+    return html`
+      ${this._renderHeader()} ${this._renderToolbar()}
+
+      <table class="${classes}">
+        <thead>
+          <tr>
+            ${Array.from(new Array(columnCount)).map(
+              (_, index) =>
+                html`
+                  <th>
+                    <div class="${prefix}--table-header-label">
+                      ${headers[index]}
+                    </div>
+                  </th>
+                `
+            )}
+          </tr>
+        </thead>
+        <tbody>
+          ${Array.from(new Array(rowCount)).map(
+            () =>
+              html`
+                <tr>
+                  ${Array.from(new Array(columnCount)).map(
+                    () =>
+                      html`
+                        <td>
+                          <span></span>
+                        </td>
+                      `
+                  )}
+                </tr>
+              `
+          )}
+        </tbody>
+      </table>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSTableSkeleton;
diff --git a/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts b/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts
index 1bf7a369c5f..587c22fe4d7 100644
--- a/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-toolbar-content.ts
@@ -7,30 +7,47 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './data-table.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Table toolbar content.
  *
- * @element bx-table-toolbar-content
+ * @element cds-table-toolbar-content
  */
 @customElement(`${prefix}-table-toolbar-content`)
-class BXTableToolbarContent extends LitElement {
+class CDSTableToolbarContent extends LitElement {
   /**
    * `true` if this batch actions bar is active.
    */
   @property({ type: Boolean, reflect: true, attribute: 'has-batch-actions' })
   hasBatchActions = false;
 
+  /**
+   * Table toolbar contents size
+   */
+  @property({ reflect: true })
+  size;
+
   updated(changedProperties) {
     if (changedProperties.has('hasBatchActions')) {
       this.setAttribute('tabindex', `${this.hasBatchActions ? '-1' : ''}`);
     }
+
+    if (changedProperties.has('size')) {
+      [...this.children].forEach((e) => {
+        const size =
+          this.size === 'xs'
+            ? 'sm'
+            : this.size === 'md' || this.size === 'xl'
+            ? 'lg'
+            : this.size;
+        e.setAttribute('size', size);
+      });
+    }
   }
 
   render() {
@@ -40,4 +57,4 @@ class BXTableToolbarContent extends LitElement {
   static styles = styles;
 }
 
-export default BXTableToolbarContent;
+export default CDSTableToolbarContent;
diff --git a/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts b/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
index 3057c5d6103..2f7c04f9afc 100644
--- a/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-toolbar-search.ts
@@ -7,26 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import { INPUT_SIZE } from '../input/input';
-import BXSearch from '../search/search';
+import { INPUT_SIZE } from '../text-input/text-input';
+import CDSSearch from '../search/search';
 import styles from './data-table.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Table toolbar search.
  *
- * @element bx-table-toolbar-search
- * @fires bx-search-input - The custom event fired after the search content is changed upon a user gesture.
+ * @element cds-table-toolbar-search
+ * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.
  */
 @customElement(`${prefix}-table-toolbar-search`)
-class BXTableToolbarSearch extends HostListenerMixin(BXSearch) {
+class CDSTableToolbarSearch extends HostListenerMixin(CDSSearch) {
   @query('input')
   private _inputNode!: HTMLInputElement;
 
@@ -57,7 +56,11 @@ class BXTableToolbarSearch extends HostListenerMixin(BXSearch) {
   @HostListener('focusout')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleFocusOut(event: FocusEvent) {
-    if (!this.contains(event.relatedTarget as Node) && !this.value) {
+    if (
+      !this.contains(event.relatedTarget as Node) &&
+      !this.value &&
+      !this.persistent
+    ) {
       this.expanded = false;
     }
   }
@@ -75,20 +78,17 @@ class BXTableToolbarSearch extends HostListenerMixin(BXSearch) {
   @property({ type: Boolean, reflect: true })
   expanded = false;
 
+  /**
+   * `true` if the search box should be always be open.
+   */
+  @property({ type: Boolean, reflect: true })
+  persistent = false;
+
   /**
    * The search box size.
    */
   @property({ reflect: true })
-  size = INPUT_SIZE.SMALL;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  size = INPUT_SIZE.LARGE;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -99,11 +99,19 @@ class BXTableToolbarSearch extends HostListenerMixin(BXSearch) {
 
   render() {
     const result = super.render();
-    const { expanded, size, _handleSearchClick: handleSearchClick } = this;
+    const {
+      persistent,
+      expanded,
+      size,
+      _handleSearchClick: handleSearchClick,
+    } = this;
     const classes = classMap({
       [`${prefix}--search`]: true,
       [`${prefix}--search--${size}`]: size,
     });
+    if (persistent) {
+      this.expanded = true;
+    }
     return html`
       <div
         class="${classes}"
@@ -118,11 +126,15 @@ class BXTableToolbarSearch extends HostListenerMixin(BXSearch) {
    * The name of the custom event fired after the search content is changed upon a user gesture.
    */
   static get eventInput() {
-    // The code uses on in `<bx-search>`, but definition is done also here for React event generation
+    // The code uses on in `<cds-search>`, but definition is done also here for React event generation
     return `${prefix}-search-input`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXTableToolbarSearch;
+export default CDSTableToolbarSearch;
diff --git a/packages/carbon-web-components/src/components/data-table/table-toolbar.ts b/packages/carbon-web-components/src/components/data-table/table-toolbar.ts
index c63a5c9c6e6..aa29751a79c 100644
--- a/packages/carbon-web-components/src/components/data-table/table-toolbar.ts
+++ b/packages/carbon-web-components/src/components/data-table/table-toolbar.ts
@@ -7,20 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './data-table.scss';
+import { CDSTableToolbarContent } from '../..';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Table toolbar.
  *
- * @element bx-table-toolbar
+ * @element cds-table-toolbar
  */
 @customElement(`${prefix}-table-toolbar`)
-class BXTableToolbar extends LitElement {
+class CDSTableToolbar extends LitElement {
+  /**
+   * Toolbar size
+   */
+  @property({ reflect: true })
+  size;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'section');
@@ -28,11 +34,28 @@ class BXTableToolbar extends LitElement {
     super.connectedCallback();
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('size')) {
+      (
+        this.querySelector(
+          (this.constructor as typeof CDSTableToolbar).selectorToolbarContent
+        ) as CDSTableToolbarContent
+      ).size = this.size;
+    }
+  }
+
   render() {
     return html` <slot></slot> `;
   }
 
+  /**
+   * The CSS selector to find the toolbar contents
+   */
+  static get selectorToolbarContent() {
+    return `${prefix}-table-toolbar-content`;
+  }
+
   static styles = styles;
 }
 
-export default BXTableToolbar;
+export default CDSTableToolbar;
diff --git a/packages/carbon-web-components/src/components/data-table/table.ts b/packages/carbon-web-components/src/components/data-table/table.ts
index c3fd8f6e09c..fa3095eae87 100644
--- a/packages/carbon-web-components/src/components/data-table/table.ts
+++ b/packages/carbon-web-components/src/components/data-table/table.ts
@@ -7,35 +7,566 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
-import { TABLE_COLOR_SCHEME, TABLE_SIZE } from './defs';
+import { TABLE_SIZE, TABLE_SORT_DIRECTION } from './defs';
 import styles from './data-table.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { TABLE_COLOR_SCHEME, TABLE_SIZE };
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+import {
+  CDSRadioButton,
+  CDSTableBatchActions,
+  CDSTableCell,
+  CDSTableHeaderCell,
+  CDSTableHeaderRow,
+  CDSTableRow,
+  CDSTableToolbarSearch,
+} from '../..';
+import CDSTableExpandedRow from './table-expanded-row';
 
-const { prefix } = settings;
+export { TABLE_SIZE };
 
 /**
  * Data table.
  *
- * @element bx-table
+ * @element cds-table
  */
 @customElement(`${prefix}-table`)
-class BXTable extends LitElement {
+class CDSTable extends HostListenerMixin(LitElement) {
+  /**
+   * The map of how sorting direction affects sorting order.
+   */
+  private collationFactors = {
+    [TABLE_SORT_DIRECTION.ASCENDING]: 1,
+    [TABLE_SORT_DIRECTION.DESCENDING]: -1,
+  };
+
+  /**
+   * Reference to download button
+   */
+  @state()
+  private _downloadButton;
+
+  /**
+   * Current search value for filtering
+   */
+  @state()
+  private _searchValue = '';
+
+  /**
+   * Table header row within component
+   */
+  @state()
+  private _tableHeaderRow;
+
+  /**
+   * Table body
+   */
+  @state()
+  private _tableBody;
+
+  /**
+   * Table expanded row within component
+   */
+  @state()
+  private _tableExpandedRows;
+
+  /**
+   * Table rows within component
+   */
+  @state()
+  private _tableRows;
+
+  /**
+   * Reference to the component containing batch actions
+   */
+  @state()
+  private _tableBatchActions;
+
+  /**
+   * Reference to the table toolbar
+   */
+  @state()
+  private _tableToolbar;
+
+  /**
+   * Reference to the table toolbar content
+   */
+  @state()
+  private _tableToolbarContent;
+
+  @state()
+  private _selectedRows: CDSTableRow[] = [];
+
+  /**
+   * `true` if this table should support batch expansion
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'batch-expansion' })
+  batchExpansion = false;
+
+  /**
+   * The g11n collator to use.
+   */
+  @property({ attribute: false })
+  collator;
+
+  /**
+   * @param lhs A value.
+   * @param rhs Another value.
+   * @param collator A custom collator.
+   * @returns
+   *   `0` if the given two values are equal
+   *   A negative value to sort `lhs` to an index lower than `rhs`
+   *   A positive value to sort `rhs` to an index lower than `lhs`
+   */
+  // eslint-disable-next-line class-methods-use-this
+  customSortRow(lhs, rhs, collator) {
+    if (typeof lhs === 'number' && typeof rhs === 'number') {
+      return lhs - rhs;
+    }
+    return collator.compare(lhs, rhs);
+  }
+
+  /**
+   * Specify whether the rows should be able to be expandable
+   */
+  @property({ type: Boolean, reflect: true })
+  expandable = false;
+
+  /**
+   * The method used when filtering the table with the search bar.
+   * Can be replaced with custom method.
+   *
+   * @param row A table row.
+   * @param searchString A search string.
+   * @returns `false` if the given table row matches the given search string.
+   */
+  @property()
+  filterRows = (rowText: string, searchString: string) =>
+    rowText.toLowerCase().indexOf(searchString) < 0;
+
+  /**
+   * The total headers
+   */
+  @property()
+  headerCount = 0;
+
+  /**
+   * `true` if this table contains selectable rows
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'is-selectable' })
+  isSelectable = false;
+
+  /**
+   * `true` if this table should support sorting.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'is-sortable' })
+  isSortable = false;
+
   /**
    * The table size.
    */
   @property({ reflect: true })
-  size = TABLE_SIZE.REGULAR;
+  locale = 'en';
 
   /**
-   * `true` if this table should support sorting.
+   * Specify whether the overflow menu (if it exists) should be shown always, or only on hover
+   */
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'overflow-menu-on-hover',
+  })
+  overflowMenuOnHover = false;
+
+  /**
+   * Specify whether the control should be a radio button or inline checkbox
    */
   @property({ type: Boolean, reflect: true })
-  sort = false;
+  radio = false;
+
+  /**
+   * The table size.
+   */
+  @property({ reflect: true })
+  size = TABLE_SIZE.LG;
+
+  /**
+   * TODO: Uncomment when Carbon fully implements sticky header
+   * Specify whether the header should be sticky.
+   * Still experimental: may not work with every combination of table props
+   */
+  // @property({ type: Boolean, attribute: 'sticky-header', reflect: true })
+  // stickyHeader = false;
+
+  /**
+   *  If true, will use a width of 'auto' instead of 100%
+   */
+  @property({ type: Boolean, attribute: 'use-static-width', reflect: true })
+  useStaticWidth = false;
+
+  /**
+   *  true to add useZebraStyles striping.
+   */
+  @property({ type: Boolean, attribute: 'use-zebra-styles', reflect: true })
+  useZebraStyles = false;
+
+  @property({ type: Boolean, attribute: 'with-header', reflect: true })
+  withHeader;
+
+  private _handleSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+    this.withHeader = hasContent;
+  }
+
+  private _handleFilterRows() {
+    const unfilteredRows = [] as any;
+    forEach(this._tableRows, (elem) => {
+      const rowText = elem.textContent?.trim();
+      const filtered = this.filterRows(rowText as string, this._searchValue);
+      (elem as any).filtered = filtered;
+
+      if (!filtered) {
+        unfilteredRows.push(elem);
+      }
+
+      if (this.expandable) {
+        (elem as any).nextElementSibling.filtered = filtered;
+      }
+    });
+
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        unfilteredRows,
+      },
+    };
+    this.dispatchEvent(
+      new CustomEvent(
+        (this.constructor as typeof CDSTable).eventTableFiltered,
+        init
+      )
+    );
+  }
+
+  /**
+   * Download manager for selected rows.
+   */
+  private _handleDownload({ target }) {
+    const data = [] as any;
+
+    const elementsToArray = (elements) =>
+      Array.from(elements, (element) => (element as any).textContent);
+
+    const headerCells = this.querySelectorAll(
+      (this.constructor as typeof CDSTable).selectorHeaderCell
+    );
+    const rows = this._selectedRows;
+    const headerTitleArray = elementsToArray(headerCells);
+
+    rows.forEach((row) => {
+      const rowData = {};
+      const cells = elementsToArray(
+        row.querySelectorAll(
+          (this.constructor as typeof CDSTable).selectorTableRowCells
+        )
+      );
+
+      cells.forEach((cellText, index) => {
+        const headerTitle = headerTitleArray[index];
+        rowData[headerTitle] = cellText;
+      });
+
+      data.push(rowData);
+    });
+
+    const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
+
+    target.href = URL.createObjectURL(blob);
+  }
+
+  /**
+   * Handles batch expansion
+   */
+  @HostListener('eventExpandoToggle')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleBatchExpansion = async (event: CustomEvent) => {
+    const { detail, target } = event;
+    const { expanded } = detail;
+
+    if ((target as CDSTableHeaderRow) === this._tableHeaderRow) {
+      this._tableRows.forEach((e) => ((e as CDSTableRow).expanded = expanded));
+    }
+  };
+
+  /**
+   * Handles sorting the table depending on the column selected
+   */
+  @HostListener('eventBeforeSort')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleSort = async (event: CustomEvent) => {
+    const { detail, target } = event;
+    const { sortDirection } = detail;
+
+    if (!this.contains(target as any)) {
+      return;
+    }
+
+    const rows = [...this._tableRows];
+    const columns = [...this._tableHeaderRow.children];
+    const columnIndex = columns.indexOf(target);
+
+    columns.forEach(
+      (e) => e !== target && e.setAttribute('sort-direction', 'none')
+    );
+
+    // regular row sorting
+    rows.sort((a, b) => {
+      const cellA = a.querySelectorAll(
+        (this.constructor as typeof CDSTable).selectorTableRowCells
+      )[columnIndex].textContent;
+      const cellB = b.querySelectorAll(
+        (this.constructor as typeof CDSTable).selectorTableRowCells
+      )[columnIndex].textContent;
+      return (
+        this.collationFactors[sortDirection] *
+        this.customSortRow(cellA, cellB, this.collator)
+      );
+    });
+
+    // take into account the expanded rows, mapping each expandable row to its original for proper reinsertion
+    if (this.expandable) {
+      const originalRows = [...this._tableRows];
+      const expandedRows = [...this._tableExpandedRows];
+
+      const mapping = originalRows.reduce((acc, element, index) => {
+        const sortId = element.getAttribute('sort-id');
+        acc[sortId] = expandedRows[index];
+        return acc;
+      }, {});
+
+      const sortedWithExpanded = [] as any;
+
+      rows.forEach((e) => {
+        const sortId = e.getAttribute('sort-id');
+        sortedWithExpanded.push(e);
+        sortedWithExpanded.push(mapping[sortId]);
+      });
+
+      sortedWithExpanded.forEach((e) => {
+        this._tableBody.insertBefore(e, null);
+      });
+    } else {
+      rows.forEach((e) => {
+        this._tableBody.insertBefore(e, null);
+      });
+    }
+
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        sortedHeader: columns[columnIndex],
+      },
+    };
+    this.dispatchEvent(
+      new CustomEvent(
+        (this.constructor as typeof CDSTable).eventTableSorted,
+        init
+      )
+    );
+
+    this._handleFilterRows();
+  };
+
+  /**
+   * Handles search input within the toolbar actions
+   */
+  @HostListener('eventSearchInput')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleSearchInput = async (event: CustomEvent) => {
+    const { detail, target } = event;
+
+    if (this.contains(target as CDSTableToolbarSearch)) {
+      const { value } = detail;
+      this._searchValue = value;
+      this._handleFilterRows();
+    }
+  };
+
+  /**
+   * Handles row selection
+   */
+  @HostListener('eventBeforeChangeSelection')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleRowSelect = async (event: CustomEvent) => {
+    const { detail, target } = event;
+    const { selected } = detail;
+    const {
+      _tableBatchActions: tableBatchActions,
+      _tableToolbarContent: tableToolbarContent,
+      _tableHeaderRow: tableHeaderRow,
+      _selectedRows: selectedRows,
+    } = this;
+
+    if (!this.contains(target as CDSTableRow)) {
+      return;
+    }
+
+    if (this.radio) {
+      this._tableRows.forEach((e) => {
+        if (e !== target) {
+          e.removeAttribute('selected');
+          e.shadowRoot!.querySelector(`${prefix}-radio-button`).checked = false;
+        }
+      });
+      this._selectedRows.push(...[target as CDSTableRow]);
+    } else {
+      if (selectedRows.includes(target as CDSTableRow)) {
+        this._selectedRows = selectedRows.filter((e) => e !== target);
+      } else {
+        selectedRows.push(target as CDSTableRow);
+      }
+
+      if (tableBatchActions) {
+        tableBatchActions.active = this._selectedRows?.length;
+        tableBatchActions.selectedRowsCount += selected ? 1 : -1;
+      }
+
+      if (tableToolbarContent) {
+        tableToolbarContent.hasBatchActions = this._selectedRows.length;
+      }
+    }
+
+    const totalRows = [...this._tableRows].filter(
+      (elem) => !elem.hasAttribute('filtered')
+    ).length;
+
+    // selected header checkbox upon all rows being selected
+    const headerCheckbox = tableHeaderRow.shadowRoot
+      ?.querySelector(`${prefix}-checkbox`)
+      .shadowRoot.querySelector(`.${prefix}--checkbox`);
+    const allRowsSelected = this._selectedRows.length === totalRows;
+    headerCheckbox.checked = !this._selectedRows.length ? false : true;
+    headerCheckbox.indeterminate =
+      !allRowsSelected && this._selectedRows.length > 0;
+
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        selectedRow: target,
+        selectedRows: selectedRows,
+      },
+    };
+    this.dispatchEvent(
+      new CustomEvent(
+        (this.constructor as typeof CDSTable).eventTableRowSelect,
+        init
+      )
+    );
+  };
+
+  /**
+   * Handles header row selection, selecting/unselecting all rows
+   */
+  @HostListener('eventBeforeChangeSelectionAll')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleAllRowsSelect = async (event: CustomEvent) => {
+    const { detail, target } = event;
+    const { selected } = detail;
+    const {
+      _tableBatchActions: tableBatchActions,
+      _tableToolbarContent: tableToolbarContent,
+      _tableRows: tableRows,
+    } = this;
+
+    if (!this.contains(target as CDSTableRow)) {
+      return;
+    }
+
+    let totalRows = 0;
+    forEach(tableRows, (elem) => {
+      if (!(elem as CDSTableRow).filtered) {
+        (elem as CDSTableRow).selected = selected;
+        this.radio
+          ? ((
+              (elem as CDSTableRow).shadowRoot!.querySelector(
+                `${prefix}-radio-button`
+              ) as CDSRadioButton
+            ).checked = selected)
+          : null;
+        this._selectedRows.push(elem as CDSTableRow);
+        totalRows++;
+
+        const { selectorTableExpandedRows } = this
+          .constructor as typeof CDSTable;
+        const { nextElementSibling } = elem;
+
+        // selecting the expanded row as well
+        if (nextElementSibling?.matches(selectorTableExpandedRows)) {
+          (elem.nextElementSibling as CDSTableExpandedRow).selected = selected;
+        }
+      }
+    });
+
+    if (!selected) {
+      this._selectedRows = [];
+    }
+
+    if (tableBatchActions) {
+      tableBatchActions.selectedRowsCount = selected ? totalRows : 0;
+      tableBatchActions.active = selected;
+    }
+
+    if (tableToolbarContent) {
+      tableToolbarContent.hasBatchActions = selected;
+    }
+
+    const init = {
+      bubbles: true,
+      cancelable: true,
+      composed: true,
+      detail: {
+        selectedRows: this._selectedRows,
+      },
+    };
+    this.dispatchEvent(
+      new CustomEvent(
+        (this.constructor as typeof CDSTable).eventTableRowSelectAll,
+        init
+      )
+    );
+  };
+
+  /**
+   * Handles cancel button within the toolbar actions
+   */
+  @HostListener('eventClickCancel')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleCancelSelection = async (event: CustomEvent) => {
+    const { target } = event;
+    const { _tableHeaderRow: tableHeaderRow } = this;
+
+    if (this.contains(target as CDSTableBatchActions)) {
+      tableHeaderRow.shadowRoot
+        ?.querySelector(`${prefix}-checkbox`)
+        .shadowRoot.querySelector(`.${prefix}--checkbox`)
+        .click();
+    }
+  };
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -44,22 +575,337 @@ class BXTable extends LitElement {
     super.connectedCallback();
   }
 
+  firstUpdated() {
+    this._tableBatchActions = this.querySelector(
+      (this.constructor as typeof CDSTable).selectorTableBatchActions
+    );
+    this._tableToolbar = this.querySelector(
+      (this.constructor as typeof CDSTable).selectorTableToolbar
+    );
+    this._tableToolbarContent = this.querySelector(
+      (this.constructor as typeof CDSTable).selectorTableToolbarContent
+    );
+    this._tableBody = this.querySelector(
+      (this.constructor as typeof CDSTable).selectorTableBody
+    );
+    this._tableHeaderRow = this.querySelector(
+      (this.constructor as typeof CDSTable).selectorRowsWithHeader
+    );
+    this._tableExpandedRows = this.querySelectorAll(
+      (this.constructor as typeof CDSTable).selectorTableExpandedRows
+    );
+
+    this._tableRows = this.querySelectorAll(
+      (this.constructor as typeof CDSTable).selectorTableRow
+    );
+
+    this._downloadButton = this.querySelector(
+      (this.constructor as typeof CDSTable).selectorToolbarDownload
+    );
+    if (this._downloadButton) {
+      this._downloadButton.onclick = this._handleDownload.bind(this);
+    }
+    this.headerCount = this._tableHeaderRow.children.length;
+  }
+
   updated(changedProperties) {
+    if (changedProperties.has('expandable')) {
+      this._tableRows.forEach((e, index) => {
+        e.expandable = this.expandable;
+        e.setAttribute('sort-id', index);
+      });
+      this._tableHeaderRow.expandable = this.expandable;
+      this._tableHeaderRow.batchExpansion = this.batchExpansion;
+      this.headerCount += this.expandable ? 1 : -1;
+    }
+
+    if (changedProperties.has('headerCount')) {
+      this._tableExpandedRows.forEach((e) => {
+        e.setAttribute('colspan', this.headerCount);
+      });
+    }
+
+    if (changedProperties.has('isSelectable')) {
+      this.headerCount++;
+    }
+
+    if (changedProperties.has('isSortable')) {
+      const headerCells = this.querySelectorAll(
+        (this.constructor as typeof CDSTable).selectorHeaderCell
+      );
+      headerCells.forEach((e) => {
+        (e as CDSTableHeaderCell).isSortable = this.isSortable;
+        (e as CDSTableHeaderCell).removeAttribute('sort-direction');
+        (e as CDSTableHeaderCell).isSelectable = this.isSelectable;
+        (e as CDSTableHeaderCell).isExpandable = this.expandable;
+      });
+    }
+
+    if (changedProperties.has('locale')) {
+      this.collator = new Intl.Collator(this.locale);
+    }
+
+    if (
+      changedProperties.has('overflowMenuOnHover') ||
+      changedProperties.has('size')
+    ) {
+      forEach(
+        this.querySelectorAll(
+          (this.constructor as typeof CDSTable).selectorTableCellOverflowMenu
+        ),
+        (elem) => {
+          const cell = elem.parentNode as CDSTableCell;
+          const row = cell.parentNode as CDSTableRow;
+          cell.overflowMenuOnHover = this.overflowMenuOnHover;
+          row.overflowMenuOnHover = this.overflowMenuOnHover;
+          cell.setAttribute('size', this.size);
+          elem.setAttribute('size', this.size);
+          elem.setAttribute('data-table', '');
+        }
+      );
+    }
+
+    if (changedProperties.has('radio')) {
+      // Propagate `size` attribute to descendants until `:host-context()` gets supported in all major browsers
+      forEach(
+        this.querySelectorAll(
+          (this.constructor as typeof CDSTable).selectorTableRow
+        ),
+        (elem) => {
+          (elem as CDSTableRow).radio = this.radio;
+        }
+      );
+    }
+
     if (changedProperties.has('size')) {
       // Propagate `size` attribute to descendants until `:host-context()` gets supported in all major browsers
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXTable).selectorRowsWithHeader
+          (this.constructor as typeof CDSTable).selectorAllRows
         ),
         (elem) => {
           elem.setAttribute('size', this.size);
         }
       );
+      this._tableToolbar?.setAttribute('size', this.size);
+    }
+
+    // TODO: Uncomment when Carbon fully implements Sticky header feature
+    // if (changedProperties.has('stickyHeader')) {
+    //   const tableBody = this.querySelector(
+    //     (this.constructor as typeof CDSTable).selectorTableBody
+    //   );
+    //   const tableHead = this.querySelector(
+    //     (this.constructor as typeof CDSTable).selectorTableHead
+    //   );
+    //   (tableBody as any).stickyHeader = this.stickyHeader;
+    //   (tableHead as any).stickyHeader = this.stickyHeader;
+    //   forEach(
+    //     this.querySelectorAll(
+    //       (this.constructor as typeof CDSTable).selectorRowsWithHeader
+    //     ),
+    //     (elem) => {
+    //       (elem as any).stickyHeader = this.stickyHeader;
+    //     }
+    //   );
+    //   forEach(
+    //     this.querySelectorAll(
+    //       (this.constructor as typeof CDSTable).selectorTableCells
+    //     ),
+    //     (elem) => {
+    //       (elem as any).stickyHeader = this.stickyHeader;
+    //     }
+    //   );
+    // }
+
+    if (changedProperties.has('useZebraStyles')) {
+      const tableBody = this.querySelector(
+        (this.constructor as typeof CDSTable).selectorTableBody
+      );
+      (tableBody as any).useZebraStyles = this.useZebraStyles;
     }
   }
 
+  /* eslint-disable no-constant-condition */
   render() {
-    return html` <slot></slot> `;
+    return html`
+      <div ?hidden="${!this.withHeader}" class="${prefix}--data-table-header">
+        <slot @slotchange="${this._handleSlotChange}" name="title"></slot>
+        <slot @slotchange="${this._handleSlotChange}" name="description"></slot>
+      </div>
+      <slot name="toolbar"></slot>
+
+      ${false // TODO: replace with this.stickyHeader when feature is fully implemented
+        ? html` <div class="${prefix}--data-table_inner-container">
+            <div class="${prefix}--data-table-content">
+              <slot></slot>
+            </div>
+          </div>`
+        : html`<slot></slot>`}
+    `;
+  }
+  /* eslint-enable no-constant-condition */
+
+  /**
+   * The name of the custom event fired before a new sort direction is set upon a user gesture.
+   * Cancellation of this event stops the user-initiated change in sort direction.
+   */
+  static get eventBeforeSort() {
+    return `${prefix}-table-header-cell-sort`;
+  }
+
+  /**
+   * The name of the custom event fired during search bar input
+   */
+  static get eventSearchInput() {
+    return `${prefix}-search-input`;
+  }
+
+  /**
+   * The name of the custom event fired before header row is selected/unselected upon a user gesture.
+   */
+  static get eventBeforeChangeSelectionAll() {
+    return `${prefix}-table-change-selection-all`;
+  }
+
+  /**
+   * The name of the custom event fired before a row is selected/unselected upon a user gesture.
+   */
+  static get eventBeforeChangeSelection() {
+    return `${prefix}-table-row-change-selection`;
+  }
+
+  /**
+   * The name of the custom event fired after the Cancel button is clicked.
+   */
+  static get eventClickCancel() {
+    return `${prefix}-table-batch-actions-cancel-clicked`;
+  }
+
+  /**
+   * The name of the custom event fired after the expanded state a row is toggled upon a user gesture.
+   */
+  static get eventExpandoToggle() {
+    return `${prefix}-table-row-expando-toggled`;
+  }
+
+  /**
+   * The name of the custom event fired after a row has been selected
+   */
+  static get eventTableRowSelect() {
+    return `${prefix}-table-row-selected`;
+  }
+
+  /**
+   * The name of the custom event fired after all rows have been selected
+   */
+  static get eventTableRowSelectAll() {
+    return `${prefix}-table-row-all-selected`;
+  }
+
+  /**
+   * The name of the custom event fired after the table has been sorted
+   */
+  static get eventTableSorted() {
+    return `${prefix}-table-sorted`;
+  }
+
+  /**
+   * The name of the custom event fired after the table has been filtered containing remaining rows.
+   */
+  static get eventTableFiltered() {
+    return `${prefix}-table-filtered`;
+  }
+
+  /**
+   * The CSS selector to find the overflow menu on the table cell
+   */
+  static get selectorTableCellOverflowMenu() {
+    return `${prefix}-table-cell ${prefix}-overflow-menu`;
+  }
+
+  /**
+   * The CSS selector to find the download button
+   */
+  static get selectorToolbarDownload() {
+    return `${prefix}-button[download]`;
+  }
+
+  /**
+   * The CSS selector to find the table batch actions
+   */
+  static get selectorTableBatchActions() {
+    return `${prefix}-table-batch-actions`;
+  }
+
+  /**
+   * The CSS selector to find the table toolbar
+   */
+  static get selectorTableToolbar() {
+    return `${prefix}-table-toolbar`;
+  }
+
+  /**
+   * The CSS selector to find the table toolbar content
+   */
+  static get selectorTableToolbarContent() {
+    return `${prefix}-table-toolbar-content`;
+  }
+
+  /**
+   * The CSS selector to find the table toolbar search
+   */
+  static get selectorTableToolbarSearch() {
+    return `${prefix}-table-toolbar-search`;
+  }
+
+  /**
+   * The CSS selector to find the table head
+   */
+  static get selectorTableHead() {
+    return `${prefix}-table-head`;
+  }
+
+  /**
+   * The CSS selector to find the table body
+   */
+  static get selectorTableBody() {
+    return `${prefix}-table-body`;
+  }
+
+  /**
+   * The CSS selector to find the table expanded rows
+   */
+  static get selectorTableExpandedRows() {
+    return `${prefix}-table-expanded-row`;
+  }
+
+  /**
+   * The CSS selector to find the table rows
+   */
+  static get selectorTableRow() {
+    return `${prefix}-table-row`;
+  }
+
+  /**
+   * The CSS selector to find the rows cells.
+   */
+  static get selectorTableRowCells() {
+    return `${prefix}-table-cell`;
+  }
+
+  /**
+   * The CSS selector to find the rows cells, including header cells.
+   */
+  static get selectorTableCells() {
+    return `${prefix}-table-cell, ${prefix}-table-header-cell`;
+  }
+
+  /**
+   * The CSS selector to find the header cell
+   */
+  static get selectorHeaderCell() {
+    return `${prefix}-table-header-cell`;
   }
 
   /**
@@ -69,7 +915,14 @@ class BXTable extends LitElement {
     return `${prefix}-table-header-row,${prefix}-table-row`;
   }
 
+  /**
+   * The CSS selector to find all rows
+   */
+  static get selectorAllRows() {
+    return `${prefix}-table-header-row,${prefix}-table-row,${prefix}-table-expanded-row`;
+  }
+
   static styles = styles;
 }
 
-export default BXTable;
+export default CDSTable;
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts
index f027b393d54..a23e8db4cc8 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker-input-skeleton.ts
@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { DATE_PICKER_INPUT_KIND } from './date-picker-input';
 import styles from './date-picker.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton version of the input box for date picker.
  */
 @customElement(`${prefix}-date-picker-input-skeleton`)
-class BXDatePickerInputSkeleton extends LitElement {
+class CDSDatePickerInputSkeleton extends LitElement {
   /**
    * Date picker input kind. Corresponds to the attribute with the same name.
    */
@@ -36,4 +35,4 @@ class BXDatePickerInputSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXDatePickerInputSkeleton;
+export default CDSDatePickerInputSkeleton;
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
index ea7962e98ca..be8900b0535 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker-input.ts
@@ -7,60 +7,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import Calendar16 from '@carbon/icons/lib/calendar/16';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import ValidityMixin from '../../globals/mixins/validity';
-import { INPUT_SIZE } from '../input/input';
-import {
-  DATE_PICKER_INPUT_COLOR_SCHEME,
-  DATE_PICKER_INPUT_KIND,
-  DATE_PICKER_INPUT_SIZE_HORIZONTAL,
-} from './defs';
+import { INPUT_SIZE } from '../text-input/text-input';
+import { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND } from './defs';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
 import styles from './date-picker.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export {
-  DATE_PICKER_INPUT_COLOR_SCHEME,
-  DATE_PICKER_INPUT_KIND,
-  DATE_PICKER_INPUT_SIZE_HORIZONTAL,
-};
-
-const { prefix } = settings;
+export { DATE_PICKER_INPUT_COLOR_SCHEME, DATE_PICKER_INPUT_KIND };
 
 /**
  * The input box for date picker.
  *
- * @element bx-date-picker-input
+ * @element cds-date-picker-input
  */
 @customElement(`${prefix}-date-picker-input`)
-class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
+class CDSDatePickerInput extends FocusMixin(LitElement) {
   /**
    * The calendar icon.
    */
   @query(`.${prefix}--date-picker__icon`)
   private _iconNode!: SVGElement;
 
-  /**
-   * The `<slot>` for the validity message.
-   */
-  @query('slot[name="validity-message"]')
-  private _slotValidityMessage!: HTMLSlotElement;
-
-  /**
-   * `true` if validity message is given via `validityMessage` property or via `<slot name="validity-message">`.
-   */
-  private get _hasValidityMessage() {
-    const { validityMessage, _slotValidityMessage: slotValidityMessage } = this;
-    return (
-      validityMessage ||
-      (slotValidityMessage && slotValidityMessage.assignedNodes.length > 0)
-    );
-  }
-
   /**
    * Handles `click` event on the calendar icon.
    *
@@ -72,13 +47,6 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
     }
   }
 
-  /**
-   * Handles `slotchange` event on `<slot name="validity-message">`.
-   */
-  private _handleSlotChangeValidityMessage() {
-    this.requestUpdate();
-  }
-
   /**
    * Handles `input` event on `<input>` in the shadow DOM.
    *
@@ -103,23 +71,24 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
   }
 
   /**
-   * @returns The template for the the validity message.
+   * `true` if there is helper text content.
    */
-  private _renderValidityMessage() {
-    const {
-      validityMessage,
-      _hasValidityMessage: hasValidityMessage,
-      _handleSlotChangeValidityMessage: handleSlotChangeValidityMessage,
-    } = this;
-    return html`
-      <div ?hidden="${!hasValidityMessage}" class="${prefix}--form-requirement">
-        <slot
-          name="validity-message"
-          @slotchange="${handleSlotChangeValidityMessage}"
-          >${validityMessage}</slot
-        >
-      </div>
-    `;
+  @state()
+  protected _hasHelperText = false;
+
+  /**
+   * Handles `slotchange` event on the default `<slot>`.
+   */
+  protected _handleSlotChange({ target }: Event) {
+    if (!(target as HTMLSlotElement).name) {
+      const hasContent = (target as HTMLSlotElement)
+        .assignedNodes()
+        .some(
+          (node) =>
+            node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+        );
+      this._hasHelperText = hasContent;
+    }
   }
 
   /**
@@ -146,6 +115,24 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
   hideLabel = false;
 
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  @property({ attribute: 'warn-text' })
+  warnText = '';
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  @property({ attribute: 'invalid-text' })
+  invalidText = '';
+
   /**
    * Controls the invalid state and visibility of the `validityMessage`.
    */
@@ -177,29 +164,28 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
   placeholder!: string;
 
   /**
-   * `true` if the value is required.
+   * Specify if the component should be read-only
    */
   @property({ type: Boolean, reflect: true })
-  required = false;
+  readonly = false;
 
   /**
-   * The special validity message for `required`.
+   * `true` if the value is required.
    */
-  @property({ attribute: 'required-validity-message' })
-  requiredValidityMessage = 'Please fill out this field.';
+  @property({ type: Boolean, reflect: true })
+  required = false;
 
   /**
    * Vertical size of this date picker input.
    */
   @property({ attribute: 'size', reflect: true })
-  size = INPUT_SIZE.REGULAR;
+  size = INPUT_SIZE.MEDIUM;
 
   /**
-   * Horizontal size of this date picker input.
-   * Effective only when `kind` property is `DATE_PICKER_INPUT_KIND.SIMPLE`.
+   * true to use the short version.
    */
-  @property({ attribute: 'size-horizontal', reflect: true })
-  sizeHorizontal = DATE_PICKER_INPUT_SIZE_HORIZONTAL.REGULAR;
+  @property({ type: Boolean, reflect: true })
+  short = false;
 
   /**
    * The `type` attribute for the `<input>` in the shadow DOM.
@@ -207,43 +193,60 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
   @property()
   type!: string;
 
-  /**
-   * The validity message.
-   * If present and non-empty, this date picker input shows the UI of its invalid state.
-   */
-  @property({ attribute: 'validity-message' })
-  validityMessage = '';
-
   /**
    * The value.
    */
   @property()
   value!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
-    const constructor = this.constructor as typeof BXDatePickerInput;
+    const constructor = this.constructor as typeof CDSDatePickerInput;
     const {
       disabled,
+      _hasHelperText: hasHelperText,
       hideLabel,
       invalid,
+      invalidText,
       labelText,
       pattern = constructor.defaultPattern,
       placeholder,
+      readonly,
       size,
       type = constructor.defaultType,
       value,
+      warn,
+      warnText,
       _handleClickWrapper: handleClickWrapper,
       _handleInput: handleInput,
     } = this;
+
+    const invalidIcon = WarningFilled16({
+      class: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--invalid`,
+    });
+
+    const warnIcon = WarningAltFilled16({
+      class: `${prefix}--date-picker__icon ${prefix}--date-picker__icon--warn`,
+    });
+
+    let normalizedProps = {
+      disabled: !readonly && disabled,
+      invalid: !readonly && invalid,
+      warn: !readonly && !invalid && warn,
+      'slot-name': '',
+      'slot-text': '',
+      icon: null,
+    };
+
+    if (normalizedProps.invalid) {
+      normalizedProps.icon = invalidIcon;
+      normalizedProps['slot-name'] = 'invalid-text';
+      normalizedProps['slot-text'] = invalidText;
+    } else if (normalizedProps.warn) {
+      normalizedProps.icon = warnIcon;
+      normalizedProps['slot-name'] = 'warn-text';
+      normalizedProps['slot-text'] = warnText;
+    }
+
     const labelClasses = classMap({
       [`${prefix}--label`]: true,
       [`${prefix}--visually-hidden`]: hideLabel,
@@ -251,28 +254,51 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
     });
     const inputClasses = classMap({
       [`${prefix}--date-picker__input`]: true,
+      [`${prefix}--date-picker__input--invalid`]: normalizedProps.invalid,
+      [`${prefix}--date-picker__input--warn`]: normalizedProps.warn,
       [`${prefix}--date-picker__input--${size}`]: size,
     });
+
+    const inputWrapperClasses = classMap({
+      [`${prefix}--date-picker-input__wrapper`]: true,
+      [`${prefix}--date-picker-input__wrapper--invalid`]:
+        normalizedProps.invalid,
+      [`${prefix}--date-picker-input__wrapper--warn`]: normalizedProps.warn,
+    });
+
+    const helperTextClasses = classMap({
+      [`${prefix}--form__helper-text`]: true,
+      [`${prefix}--form__helper-text--disabled`]: disabled,
+    });
+
     return html`
       <label for="input" class="${labelClasses}">
         <slot name="label-text">${labelText}</slot>
       </label>
-      <div
-        class="${prefix}--date-picker-input__wrapper"
-        @click="${handleClickWrapper}">
+      <div class="${inputWrapperClasses}" @click="${handleClickWrapper}">
         <input
           id="input"
           type="${type}"
           class="${inputClasses}"
           ?disabled="${disabled}"
           pattern="${pattern}"
-          placeholder="${ifNonNull(placeholder)}"
-          .value="${ifNonNull(value)}"
+          placeholder="${ifDefined(placeholder)}"
+          .value="${ifDefined(value)}"
           ?data-invalid="${invalid}"
-          @input="${handleInput}" />
-        ${this._renderIcon()}
+          @input="${handleInput}"
+          ?readonly="${readonly}" />
+        ${normalizedProps.icon || this._renderIcon()}
+      </div>
+      <div
+        class="${prefix}--form-requirement"
+        ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
+        <slot name="${normalizedProps['slot-name']}">
+          ${normalizedProps['slot-text']}
+        </slot>
+      </div>
+      <div ?hidden="${hasHelperText}" class="${helperTextClasses}">
+        <slot name="helper-text" @slotchange="${this._handleSlotChange}"></slot>
       </div>
-      ${this._renderValidityMessage()}
     `;
   }
 
@@ -293,7 +319,11 @@ class BXDatePickerInput extends ValidityMixin(FocusMixin(LitElement)) {
     return `${prefix}-date-picker`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXDatePickerInput;
+export default CDSDatePickerInput;
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx b/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
index b51f43803b4..1c0d254148f 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Date picker
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/date-picker)
 
 Date and time pickers allow users to select a single or a range of dates and
 times.
@@ -28,10 +28,12 @@ import '@carbon/web-components/es/components/date-picker/index.js';
 ### HTML
 
 ```html
-<bx-date-picker>
-  <bx-date-picker-input label-text="Date Picker label" placeholder="mm/dd/yyyy">
-  </bx-date-picker-input>
-</bx-date-picker>
+<cds-date-picker>
+  <cds-date-picker-input
+    label-text="Date Picker label"
+    placeholder="mm/dd/yyyy">
+  </cds-date-picker-input>
+</cds-date-picker>
 ```
 
 ## Single date picker
@@ -39,14 +41,13 @@ import '@carbon/web-components/es/components/date-picker/index.js';
 A single Date Picker consists of an input field and a calendar.
 
 ```html
-<bx-date-picker>
-  <bx-date-picker-input
+<cds-date-picker>
+  <cds-date-picker-input
     kind="single"
     label-text="Date Picker label"
-    placeholder="mm/dd/yyyy"
-  >
-  </bx-date-picker-input>
-</bx-date-picker>
+    placeholder="mm/dd/yyyy">
+  </cds-date-picker-input>
+</cds-date-picker>
 ```
 
 ## Range date picker
@@ -54,61 +55,59 @@ A single Date Picker consists of an input field and a calendar.
 A range Date Picker consists of two input fields and a calendar.
 
 ```html
-<bx-date-picker>
-  <bx-date-picker-input
+<cds-date-picker>
+  <cds-date-picker-input
     kind="from"
     label-text="Date Picker label"
     placeholder="mm/dd/yyyy"
-    size="lg"
-  >
-  </bx-date-picker-input>
-  <bx-date-picker-input
+    size="lg">
+  </cds-date-picker-input>
+  <cds-date-picker-input
     kind="to"
     label-text="Date Picker label"
     placeholder="mm/dd/yyyy"
-    size="lg"
-  >
-  </bx-date-picker-input>
-</bx-date-picker>
+    size="lg">
+  </cds-date-picker-input>
+</cds-date-picker>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-date-picker-input-skeleton>`.
+For the skeleton variation, utilize `<cds-date-picker-input-skeleton>`.
 
 ### Simple
 
 ```html
-<bx-date-picker-input-skeleton kind="simple"></bx-date-picker-input-skeleton>
+<cds-date-picker-input-skeleton kind="simple"></cds-date-picker-input-skeleton>
 ```
 
 ### Single
 
 ```html
-<bx-date-picker-input-skeleton kind="single"></bx-date-picker-input-skeleton>
+<cds-date-picker-input-skeleton kind="single"></cds-date-picker-input-skeleton>
 ```
 
 ### Range
 
 ```html
 <div>
-  <bx-date-picker-input-skeleton kind="from"></bx-date-picker-input-skeleton>
-  <bx-date-picker-input-skeleton kind="to"></bx-date-picker-input-skeleton>
+  <cds-date-picker-input-skeleton kind="from"></cds-date-picker-input-skeleton>
+  <cds-date-picker-input-skeleton kind="to"></cds-date-picker-input-skeleton>
 </div>
 ```
 
-## `<bx-date-picker>` attributes, properties and events
+## `<cds-date-picker>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-date-picker open>`) and `false` means not setting the attribute (e.g.
-`<bx-date-picker>` without `open` attribute).
+`<cds-date-picker open>`) and `false` means not setting the attribute (e.g.
+`<cds-date-picker>` without `open` attribute).
 
-<Props of="bx-date-picker" />
+<Props of="cds-date-picker" />
 
-## `<bx-date-picker-input>` attributes and properties
+## `<cds-date-picker-input>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-date-picker-input light>`) and `false` means not setting the attribute
-(e.g. `<bx-date-picker-input>` without `light` attribute).
+`<cds-date-picker-input light>`) and `false` means not setting the attribute
+(e.g. `<cds-date-picker-input>` without `light` attribute).
 
-<Props of="bx-date-picker-input" />
+<Props of="cds-date-picker-input" />
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker-story.ts b/packages/carbon-web-components/src/components/date-picker/date-picker-story.ts
index c45b6a02744..31c8458788a 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker-story.ts
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker-story.ts
@@ -5,282 +5,274 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { INPUT_SIZE } from '../input/input';
+import { INPUT_SIZE } from '../text-input/text-input';
 import './date-picker';
-import {
-  DATE_PICKER_INPUT_COLOR_SCHEME,
-  DATE_PICKER_INPUT_SIZE_HORIZONTAL,
-} from './date-picker-input';
 import storyDocs from './date-picker-story.mdx';
 import './date-picker-input-skeleton';
-
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${DATE_PICKER_INPUT_COLOR_SCHEME.LIGHT})`]:
-    DATE_PICKER_INPUT_COLOR_SCHEME.LIGHT,
-};
+import '../layer/index';
 
 const sizes = {
-  Regular: null,
-  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  [`Extra large size (${INPUT_SIZE.EXTRA_LARGE})`]: INPUT_SIZE.EXTRA_LARGE,
+  [`Small (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
+  [`Medium (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
 };
 
 const knobs = {
-  'bx-date-picker': () => ({
-    dateFormat: textNullable('The date format (date-format)', 'm/d/Y'),
-    disabled: boolean('Disabled (disabled in <bx-date-picker-input>)', false),
-    enabledRange: textNullable(
-      'Minimum/maximum dates in expected date-format, separated by `/` (ie. 3-02-2023/3-21-2023 if date-format is m/d/Y) (enabled-range)',
-      ''
-    ),
-    open: boolean('Open (open)', false),
-    value: textNullable(
-      'Value in ISO8601 date format, separated by `/` (value)',
-      ''
-    ),
-    onAfterChanged: action('bx-date-picker-changed'),
-    onFlatpickrError: action('bx-date-picker-flatpickr-error'),
+  [`${prefix}-date-picker`]: () => ({
+    dateFormat: textNullable('Date format (date-format)', 'm/d/Y'),
+    disabled: boolean('Disabled (disabled)', false),
+    allowInput: boolean('Allow input (allow-input)', true),
+    closeOnSelect: boolean('Close on select (close-on-select)', true),
+    minDate: textNullable('Minimum date in ISO8601 date format (min-date)', ''),
+    maxDate: textNullable('Maximum date in ISO8601 date format (max-date)', ''),
+    onChange: action(`${prefix}-date-picker-changed`),
   }),
-  'bx-date-picker-input': () => ({
-    colorScheme: select(
-      'Color scheme (color-scheme in <bx-date-picker-input>)',
-      colorSchemes,
-      null
-    ),
-    hideLabel: boolean(
-      'Hide label (hide-label in <bx-date-picker-input>)',
-      false
-    ),
-    invalid: boolean('Show invalid state  (invalid)', false),
-    labelText: textNullable(
-      'Label text (label-text in <bx-date-picker-input>)',
-      'Date Picker label'
-    ),
-    placeholder: textNullable(
-      'Placeholder text (placeholder in <bx-date-picker-input>)',
-      'mm/dd/yyyy'
-    ),
-    size: select('Input size (size)', sizes, INPUT_SIZE.REGULAR),
-    validityMessage: textNullable(
-      'The validity message (validity-message)',
-      ''
+  [`${prefix}-date-picker-input`]: () => ({
+    datePickerType: select(
+      'Date picker type (date-picker-type)',
+      { Single: 'single', Simple: 'simple', Range: 'range' },
+      'single'
     ),
+    readonly: boolean('ReadOnly (readonly)', false),
+    short: boolean('Short (short)', false),
+    helperText: textNullable('Helper text (helper-text)', ''),
+    warning: boolean('Warning  (warning)', false),
+    warningText: textNullable('Warning text (warning-text)', ''),
+    invalid: boolean('Invalid  (invalid)', false),
+    invalidText: textNullable('Invalid text (invalid-text)', ''),
+    placeholder: textNullable('Placeholder text (placeholder)', 'mm/dd/yyyy'),
+    size: select('Size (size)', sizes, INPUT_SIZE.MEDIUM),
     onInput: action('input'),
   }),
 };
-
-const sizesHorizontal = {
-  'Regular size': null,
-  [`Short size (${DATE_PICKER_INPUT_SIZE_HORIZONTAL.SHORT})`]:
-    DATE_PICKER_INPUT_SIZE_HORIZONTAL.SHORT,
-};
-
-export const Default = (args) => {
-  const { disabled, name, value } = args?.['bx-date-picker'] ?? {};
-  const {
-    colorScheme,
-    hideLabel,
-    invalid,
-    labelText,
-    placeholder,
-    size,
-    sizeHorizontal,
-    validityMessage,
-  } = args?.['bx-date-picker-input'] ?? {};
+export const Simple = () => {
   return html`
-    <bx-date-picker
-      ?disabled="${disabled}"
-      name="${ifNonNull(name)}"
-      value="${ifNonNull(value)}">
-      <bx-date-picker-input
-        color-scheme="${ifNonNull(colorScheme)}"
-        ?hide-label="${hideLabel}"
-        ?invalid="${invalid}"
-        label-text="${ifNonNull(labelText)}"
-        placeholder="${ifNonNull(placeholder)}"
-        size="${ifNonNull(size)}"
-        size-horizontal="${ifNonNull(sizeHorizontal)}"
-        validity-message="${ifNonNull(validityMessage)}">
-      </bx-date-picker-input>
-    </bx-date-picker>
+    <cds-date-picker>
+      <cds-date-picker-input
+        label-text="Date Picker label"
+        placeholder="mm/dd/yyyy">
+      </cds-date-picker-input>
+    </cds-date-picker>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
-  knobs: {
-    'bx-date-picker-input': () => ({
-      ...knobs['bx-date-picker-input'](),
-      sizeHorizontal: select(
-        'Horizontal size (size-horizontal)',
-        sizesHorizontal,
-        null
-      ),
-    }),
-  },
+export const SimpleWithLayer = () => {
+  return html`
+  <sb-template-layers>
+    <cds-date-picker>
+    <cds-date-picker-input
+      label-text="Date Picker label"
+      placeholder="mm/dd/yyyy">
+    </cds-date-picker-input>
+  </sb-template-layers>
+  `;
 };
 
-export const singleWithCalendar = (args) => {
-  const {
-    dateFormat,
-    disabled,
-    enabledRange,
-    name,
-    open,
-    value,
-    onChanged,
-    onFlatpickrError,
-  } = args?.['bx-date-picker'] ?? {};
-  const {
-    colorScheme,
-    hideLabel,
-    invalid,
-    labelText,
-    placeholder,
-    size,
-    validityMessage,
-    onInput,
-  } = args?.['bx-date-picker-input'] ?? {};
+export const singleWithCalendar = () => {
   return html`
-    <bx-date-picker
-      date-format="${ifNonNull(dateFormat)}"
-      ?disabled="${disabled}"
-      enabled-range="${ifNonNull(enabledRange)}"
-      name="${ifNonNull(name)}"
-      ?open="${open}"
-      value="${ifNonNull(value)}"
-      @bx-date-picker-changed="${onChanged}"
-      @bx-date-picker-flatpickr-error="${onFlatpickrError}">
-      <bx-date-picker-input
-        color-scheme="${ifNonNull(colorScheme)}"
-        ?hide-label="${hideLabel}"
-        ?invalid="${invalid}"
+    <cds-date-picker>
+      <cds-date-picker-input
         kind="single"
-        label-text="${ifNonNull(labelText)}"
-        placeholder="${ifNonNull(placeholder)}"
-        size="${ifNonNull(size)}"
-        validity-message="${ifNonNull(validityMessage)}"
-        @input="${onInput}">
-      </bx-date-picker-input>
-    </bx-date-picker>
+        label-text="Date Picker label"
+        placeholder="mm/dd/yyyy">
+      </cds-date-picker-input>
+    </cds-date-picker>
   `;
 };
 
 singleWithCalendar.storyName = 'Single with calendar';
 
-singleWithCalendar.parameters = {
-  knobs,
+export const singleWithCalendarWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-date-picker>
+        <cds-date-picker-input
+          kind="single"
+          label-text="Date Picker label"
+          placeholder="mm/dd/yyyy">
+        </cds-date-picker-input>
+      </cds-date-picker>
+    </sb-template-layers>
+  `;
 };
 
-export const rangeWithCalendar = (args) => {
-  const {
-    dateFormat,
-    disabled,
-    enabledRange,
-    name,
-    open,
-    value,
-    onChanged,
-    onFlatpickrError,
-  } = args?.['bx-date-picker'] ?? {};
-  const {
-    colorScheme,
-    hideLabel,
-    invalid,
-    labelText,
-    placeholder,
-    size,
-    validityMessage,
-    onInput,
-  } = args?.['bx-date-picker-input'] ?? {};
+singleWithCalendarWithLayer.storyName = 'Single with calendar with layer';
+
+export const rangeWithCalendar = () => {
   return html`
-    <bx-date-picker
-      date-format="${ifNonNull(dateFormat)}"
-      ?disabled="${disabled}"
-      enabled-range="${ifNonNull(enabledRange)}"
-      name="${ifNonNull(name)}"
-      ?open="${open}"
-      value="${ifNonNull(value)}"
-      @bx-date-picker-changed="${onChanged}"
-      @bx-date-picker-flatpickr-error="${onFlatpickrError}">
-      <bx-date-picker-input
-        color-scheme="${ifNonNull(colorScheme)}"
-        ?hide-label="${hideLabel}"
-        ?invalid="${invalid}"
+    <cds-date-picker>
+      <cds-date-picker-input
         kind="from"
-        label-text="${ifNonNull(labelText)}"
-        placeholder="${ifNonNull(placeholder)}"
-        size="${ifNonNull(size)}"
-        validity-message="${ifNonNull(validityMessage)}"
-        @input="${onInput}">
-      </bx-date-picker-input>
-      <bx-date-picker-input
-        color-scheme="${ifNonNull(colorScheme)}"
-        ?hide-label="${hideLabel}"
-        ?invalid="${invalid}"
+        label-text="Start date"
+        placeholder="mm/dd/yyyy">
+      </cds-date-picker-input>
+      <cds-date-picker-input
         kind="to"
-        label-text="${ifNonNull(labelText)}"
-        placeholder="${ifNonNull(placeholder)}"
-        size="${ifNonNull(size)}"
-        validity-message="${ifNonNull(validityMessage)}"
-        @input="${onInput}">
-      </bx-date-picker-input>
-    </bx-date-picker>
+        label-text="End date"
+        placeholder="mm/dd/yyyy">
+      </cds-date-picker-input>
+    </cds-date-picker>
   `;
 };
 
 rangeWithCalendar.storyName = 'Range with calendar';
 
-rangeWithCalendar.parameters = {
-  knobs,
+export const rangeWithCalendarWithLayer = () => {
+  return html`
+    <cds-layer>
+      <cds-date-picker>
+        <cds-date-picker-input
+          kind="from"
+          label-text="Start date"
+          placeholder="mm/dd/yyyy">
+        </cds-date-picker-input>
+        <cds-date-picker-input
+          kind="to"
+          label-text="End date"
+          placeholder="mm/dd/yyyy">
+        </cds-date-picker-input>
+      </cds-date-picker>
+      <cds-layer>
+        <cds-date-picker>
+          <cds-date-picker-input
+            kind="from"
+            label-text="Start date"
+            placeholder="mm/dd/yyyy">
+          </cds-date-picker-input>
+          <cds-date-picker-input
+            kind="to"
+            label-text="End date"
+            placeholder="mm/dd/yyyy">
+          </cds-date-picker-input>
+        </cds-date-picker>
+        <cds-layer>
+          <cds-date-picker>
+            <cds-date-picker-input
+              kind="from"
+              label-text="Start date"
+              placeholder="mm/dd/yyyy">
+            </cds-date-picker-input>
+            <cds-date-picker-input
+              kind="to"
+              label-text="End date"
+              placeholder="mm/dd/yyyy">
+            </cds-date-picker-input>
+          </cds-date-picker>
+        </cds-layer>
+      </cds-layer>
+    </cds-layer>
+  `;
 };
 
-export const skeletonSimple = () =>
-  html` <bx-date-picker-input-skeleton></bx-date-picker-input-skeleton> `;
-
-skeletonSimple.storyName = 'Skeleton simple';
-
-skeletonSimple.parameters = {
-  percy: {
-    skip: true,
-  },
-};
+rangeWithCalendarWithLayer.storyName = 'Range with calendar with layer';
 
-export const skeletonSingle = () =>
+export const Skeleton = () =>
   html`
-    <bx-date-picker-input-skeleton
-      kind="single"></bx-date-picker-input-skeleton>
+    <cds-date-picker-input-skeleton
+      kind="from"></cds-date-picker-input-skeleton>
+    <cds-date-picker-input-skeleton kind="to"></cds-date-picker-input-skeleton>
   `;
 
-skeletonSingle.storyName = 'Skeleton single';
+Skeleton.storyName = 'Skeleton';
 
-skeletonSingle.parameters = {
+Skeleton.decorators = [(story) => html` <div>${story()}</div> `];
+
+Skeleton.parameters = {
   percy: {
     skip: true,
   },
 };
 
-export const skeletonRange = () =>
-  html`
-    <bx-date-picker-input-skeleton kind="from"></bx-date-picker-input-skeleton>
-    <bx-date-picker-input-skeleton kind="to"></bx-date-picker-input-skeleton>
+export const Playground = (args) => {
+  const { disabled, dateFormat, onChange, minDate, maxDate } =
+    args?.['cds-date-picker'] || {};
+  const {
+    size,
+    helperText,
+    placeholder,
+    invalid,
+    invalidText,
+    warning,
+    warningText,
+    short,
+    datePickerType,
+    readonly,
+    onInput,
+  } = args?.['cds-date-picker-input'] || {};
+
+  return html`
+    <cds-date-picker
+      ?disabled="${disabled}"
+      date-format="${dateFormat}"
+      ?readonly="${readonly}"
+      min-date="${minDate}"
+      max-date="${maxDate}"
+      @cds-date-picker-changed="${onChange}">
+      ${datePickerType === 'range'
+        ? html`
+            <cds-date-picker-input
+              kind="from"
+              label-text="Date Picker label"
+              size="${size}"
+              placeholder="${placeholder}"
+              ?invalid="${invalid}"
+              invalid-text="${invalidText}"
+              ?short="${short}"
+              ?warn="${warning}"
+              warn-text="${warningText}"
+              @input="${onInput}">
+              ${helperText
+                ? html`<span slot="helper-text">${helperText}</span>`
+                : html``}
+            </cds-date-picker-input>
+            <cds-date-picker-input
+              kind="to"
+              label-text="Date Picker label"
+              size="${size}"
+              placeholder="${placeholder}"
+              ?invalid="${invalid}"
+              invalid-text="${invalidText}"
+              ?short="${short}"
+              ?warn="${warning}"
+              warn-text="${warningText}"
+              @input="${onInput}">
+              ${helperText
+                ? html`<span slot="helper-text">${helperText}</span>`
+                : html``}
+            </cds-date-picker-input>
+          `
+        : html`
+            <cds-date-picker-input
+              kind="${datePickerType}"
+              label-text="Date Picker label"
+              size="${size}"
+              placeholder="${placeholder}"
+              ?invalid="${invalid}"
+              invalid-text="${invalidText}"
+              ?short="${short}"
+              ?warn="${warning}"
+              warn-text="${warningText}"
+              @input="${onInput}">
+              ${helperText
+                ? html`<span slot="helper-text">${helperText}</span>`
+                : html``}
+            </cds-date-picker-input>
+          `}
+    </cds-date-picker>
   `;
+};
 
-skeletonRange.storyName = 'Skeleton range';
+Playground.storyName = 'Playground';
 
-skeletonRange.decorators = [(story) => html` <div>${story()}</div> `];
+Playground.decorators = [(story) => html` <div>${story()}</div> `];
 
-skeletonRange.parameters = {
-  percy: {
-    skip: true,
-  },
+Playground.parameters = {
+  knobs,
 };
 
 export default {
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker.scss b/packages/carbon-web-components/src/components/date-picker/date-picker.scss
index 1c1ef789e32..b20e2845b7a 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker.scss
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker.scss
@@ -7,9 +7,15 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/date-picker/date-picker';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/date-picker/date-picker' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include date-picker;
 
 :host(#{$prefix}-date-picker) {
   @extend .#{$prefix}--date-picker;
@@ -35,7 +41,7 @@ $css--plex: true !default;
   .flatpickr-day.flatpickr-disabled {
     cursor: not-allowed;
     opacity: 0.5;
-    color: $ui-05;
+    color: $layer-selected-inverse;
 
     &:hover {
       background: transparent;
@@ -46,14 +52,14 @@ $css--plex: true !default;
   .flatpickr-next-month.flatpickr-disabled,
   .flatpickr-prev-month.flatpickr-disabled {
     svg {
-      fill: $ui-05;
+      fill: $layer-selected-inverse;
       opacity: 0.5;
       cursor: not-allowed;
     }
 
     &:hover {
       svg {
-        fill: $ui-05;
+        fill: $layer-selected-inverse;
       }
     }
   }
@@ -64,11 +70,15 @@ $css--plex: true !default;
   @extend .#{$prefix}--date-picker-container;
 
   outline: none;
-}
 
-:host(#{$prefix}-date-picker-input[color-scheme='light'])
-  .#{$prefix}--date-picker__input {
-  background: $field-02;
+  .#{$prefix}--form-requirement[hidden] {
+    display: none;
+  }
+}
+:host(#{$prefix}-date-picker-input[warn]) {
+  .#{$prefix}--form-requirement {
+    color: $text-primary;
+  }
 }
 
 :host(#{$prefix}-date-picker-input[kind='simple']),
@@ -76,16 +86,21 @@ $css--plex: true !default;
   .#{$prefix}--date-picker__input {
     width: rem(120px);
   }
+
+  .#{$prefix}--date-picker__input--invalid,
+  .#{$prefix}--date-picker__input--warn {
+    width: rem(152px);
+  }
 }
 
-:host(#{$prefix}-date-picker-input[kind='simple'][size-horizontal='short']),
-:host(
-    #{$prefix}-date-picker-input-skeleton[kind='simple'][size-horizontal='short']
-  ) {
+/* stylelint-disable selector-pseudo-class-parentheses-space-inside */
+:host(#{$prefix}-date-picker-input[kind='simple'][short]),
+:host(#{$prefix}-date-picker-input-skeleton[kind='simple'][short]) {
   .#{$prefix}--date-picker__input {
     width: rem(90px);
   }
 }
+/* stylelint-enable selector-pseudo-class-parentheses-space-inside */
 
 :host(#{$prefix}-date-picker-input[kind='single']),
 :host(#{$prefix}-date-picker-input-skeleton[kind='single']) {
@@ -112,12 +127,18 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-date-picker-input) ::slotted(.#{$prefix}--date-picker__icon) {
-  position: absolute;
-  right: 1rem;
-  fill: $icon-01;
-  cursor: pointer;
-  z-index: 1;
+:host(#{$prefix}-date-picker-input) {
+  .#{$prefix}--date-picker__icon {
+    @extend .#{$prefix}--date-picker__icon;
+  }
+
+  .#{$prefix}--date-picker__icon--warn {
+    @extend .#{$prefix}--date-picker__icon--warn;
+  }
+
+  .#{$prefix}--date-picker__icon--invalid {
+    @extend .#{$prefix}--date-picker__icon--invalid;
+  }
 }
 
 :host(#{$prefix}-date-picker-input-skeleton) {
diff --git a/packages/carbon-web-components/src/components/date-picker/date-picker.ts b/packages/carbon-web-components/src/components/date-picker/date-picker.ts
index 84288b03738..1b7fd4caa3d 100644
--- a/packages/carbon-web-components/src/components/date-picker/date-picker.ts
+++ b/packages/carbon-web-components/src/components/date-picker/date-picker.ts
@@ -7,7 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, query, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import flatpickr from 'flatpickr';
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Locale as FlatpickrLocale } from 'flatpickr/dist/types/locale';
@@ -15,12 +16,12 @@ import {
   Options as FlatpickrOptions,
   Plugin as FlatpickrPlugin,
 } from 'flatpickr/dist/types/options';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { getISODateString, parseISODateString } from './iso-date';
-import BXDatePickerInput from './date-picker-input';
+import CDSDatePickerInput from './date-picker-input';
 import appendToPlugin from './append-to-plugin';
 import cssClassPlugin from './css-class-plugin';
 import fixEventsPlugin from './fix-events-plugin';
@@ -33,8 +34,6 @@ import stateHandshakePlugin from './state-handshake-plugin';
 import styles from './date-picker.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Date picker modes.
  */
@@ -55,18 +54,28 @@ enum DATE_PICKER_MODE {
   RANGE = 'range',
 }
 
+// Weekdays shorthand for english locale
+flatpickr!.l10ns!.en!.weekdays.shorthand.forEach((_day, index) => {
+  const currentDay = flatpickr!.l10ns!.en!.weekdays.shorthand;
+  if (currentDay[index] === 'Thu' || currentDay[index] === 'Th') {
+    currentDay[index] = 'Th';
+  } else {
+    currentDay[index] = currentDay[index].charAt(0);
+  }
+});
+
 /**
  * Date picker.
  *
- * @element bx-date-picker
- * @fires bx-date-picker-changed - The custom event fired on this element when Flatpickr updates its value.
+ * @element cds-date-picker
+ * @fires cds-date-picker-changed - The custom event fired on this element when Flatpickr updates its value.
  */
 @customElement(`${prefix}-date-picker`)
-class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
+class CDSDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   /**
-   * The slotted `<bx-date-input kind="from">`.
+   * The slotted `<cds-date-input kind="from">`.
    */
-  private _dateInteractNode: BXDatePickerInput | null = null;
+  private _dateInteractNode: CDSDatePickerInput | null = null;
 
   /**
    * The element to put calendar dropdown in.
@@ -80,11 +89,11 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   private _value!: string;
 
   /**
-   * @returns The effective date picker mode, determined by the child `<bx-date-picker-input>`.
+   * @returns The effective date picker mode, determined by the child `<cds-date-picker-input>`.
    */
   private get _mode() {
     const { selectorInputFrom, selectorInputTo } = this
-      .constructor as typeof BXDatePicker;
+      .constructor as typeof CDSDatePicker;
     if (this.querySelector(selectorInputTo)) {
       return DATE_PICKER_MODE.RANGE;
     }
@@ -118,7 +127,7 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
       _selectorFlatpickrDay: selectorFlatpickrDay,
       _classFlatpickrCurrentMonth: classFlatpickrCurrentMonth,
       _classFlatpickrToday: classFlatpickrToday,
-    } = this.constructor as typeof BXDatePicker;
+    } = this.constructor as typeof CDSDatePicker;
     const {
       _floatingMenuContainerNode: floatingMenuContainerNode,
       _mode: mode,
@@ -143,12 +152,12 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
         classFlatpickrToday,
       }),
       fixEventsPlugin({
-        inputFrom: inputFrom as BXDatePickerInput,
-        inputTo: inputTo as BXDatePickerInput,
+        inputFrom: inputFrom as CDSDatePickerInput,
+        inputTo: inputTo as CDSDatePickerInput,
       }),
       focusPlugin({
-        inputFrom: inputFrom as BXDatePickerInput,
-        inputTo: inputTo as BXDatePickerInput,
+        inputFrom: inputFrom as CDSDatePickerInput,
+        inputTo: inputTo as CDSDatePickerInput,
       }),
       iconPlugin(),
       monthSelectPlugin({
@@ -165,7 +174,7 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
       // Ensures `onValueUpdate` of `rangePlugin` runs first
       // given Flatpickr puts `01/01/1970 to 01/02/1970` to from date
       // where `rangePlugin` overrides it to separate them to from/to dates.
-      // We want to ensure our handler of `onValueUpdate` (notably one in `<bx-date-picker-input>`)
+      // We want to ensure our handler of `onValueUpdate` (notably one in `<cds-date-picker-input>`)
       // gets the `<input>` value set by `rangePlugin` instead of Flatpickr core.
       plugins.push(rangePlugin({ input: inputTo as HTMLInputElement }));
     }
@@ -177,23 +186,24 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
    */
   private get _datePickerOptions(): FlatpickrOptions {
     const {
-      locale = (this.constructor as typeof BXDatePicker).defaultLocale,
+      locale = (this.constructor as typeof CDSDatePicker).defaultLocale,
       enabledRange,
       _dateInteractNode: dateInteractNode,
       _datePickerPlugins: plugins,
       _handleFlatpickrError: handleFlatpickrError,
     } = this;
-    // We use `<bx-date-picker-input>` to communicate values/events with Flatpickr,
+    // We use `<cds-date-picker-input>` to communicate values/events with Flatpickr,
     // but want to use `<input>` in shadow DOM to base the calendar dropdown's position on
     const { input: positionElement } = dateInteractNode!;
     const [minDate = undefined, maxDate = undefined] = !enabledRange
       ? []
       : enabledRange.split('/');
     return {
-      allowInput: true,
+      allowInput: this.allowInput,
+      closeOnSelect: this.closeOnSelect,
       dateFormat:
         this.dateFormat ??
-        (this.constructor as typeof BXDatePicker).defaultDateFormat,
+        (this.constructor as typeof CDSDatePicker).defaultDateFormat,
       disableMobile: true,
       errorHandler: handleFlatpickrError,
       locale,
@@ -234,11 +244,11 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
         (node) =>
           node.nodeType === Node.ELEMENT_NODE &&
           (node as HTMLElement).matches(
-            (this.constructor as typeof BXDatePicker).selectorInputFrom
+            (this.constructor as typeof CDSDatePicker).selectorInputFrom
           )
       );
     if (oldDateInteractNode !== dateInteractNode) {
-      this._dateInteractNode = dateInteractNode as BXDatePickerInput;
+      this._dateInteractNode = dateInteractNode as CDSDatePickerInput;
       this._instantiateDatePicker();
     }
   }
@@ -249,7 +259,7 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   private _handleFlatpickrError = (error: Error) => {
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof BXDatePicker).eventFlatpickrError,
+        (this.constructor as typeof CDSDatePicker).eventFlatpickrError,
         {
           bubbles: true,
           cancelable: false,
@@ -270,7 +280,7 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   private _instantiateDatePicker() {
     this._releaseDatePicker();
     const { _dateInteractNode: dateInteractNode } = this;
-    // `this._dateInteractNode` won't be there unless there is a slotted `<bx-date-input type="from">`,
+    // `this._dateInteractNode` won't be there unless there is a slotted `<cds-date-input type="from">`,
     // which means Flatpickr will never be instantiated in "simple" mode.
     if (dateInteractNode && dateInteractNode.input) {
       this.calendar = flatpickr(
@@ -297,6 +307,18 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
    */
   calendar: FlatpickrInstance | null = null;
 
+  /**
+   * flatpickr prop passthrough. Allows the user to enter a date directly into the input field
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'allow-input' })
+  allowInput = true;
+
+  /**
+   * flatpickr prop passthrough. Controls whether the calendar dropdown closes upon selection.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'close-on-select' })
+  closeOnSelect = true;
+
   /**
    * The date format to let Flatpickr use.
    */
@@ -321,6 +343,18 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   @property({ attribute: 'enabled-range' })
   enabledRange!: string;
 
+  /**
+   * The minimum date that a user can start picking from.
+   */
+  @property({ attribute: 'min-date' })
+  minDate!: string;
+
+  /**
+   * The maximum date that a user can start picking from.
+   */
+  @property({ attribute: 'max-date' })
+  maxDate!: string;
+
   /**
    * Name for the input in the `FormData`
    */
@@ -333,6 +367,12 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   open = false;
 
+  /**
+   * Specify if the component should be read-only
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
   /**
    * The date(s) in ISO8601 format (date portion only), for range mode, '/' is used for separate start/end dates.
    */
@@ -358,49 +398,56 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   }
 
   updated(changedProperties) {
-    const { calendar, disabled, open } = this;
+    const { calendar, disabled, open, readonly } = this;
     const { selectorInputFrom, selectorInputTo } = this
-      .constructor as typeof BXDatePicker;
+      .constructor as typeof CDSDatePicker;
     const inputFrom = this.querySelector(
       selectorInputFrom
-    ) as BXDatePickerInput;
-    const inputTo = this.querySelector(selectorInputTo) as BXDatePickerInput;
+    ) as CDSDatePickerInput;
+    const inputTo = this.querySelector(selectorInputTo) as CDSDatePickerInput;
     if (calendar && changedProperties.has('dateFormat')) {
       const { dateFormat } = this;
       calendar.set({ dateFormat });
     }
-    if (changedProperties.has('enabledRange')) {
-      const { enabledRange } = this;
-      const dates = enabledRange
-        .split('/')
-        .map((item) => (!item ? undefined : parseISODateString(item))); // Allows empty start/end
-      if (dates.some((item) => Boolean(item && isNaN(Number(item))))) {
+    if (changedProperties.has('minDate') || changedProperties.has('maxDate')) {
+      const { minDate, maxDate } = this;
+      if (!parseISODateString(minDate)) {
+        // Allows empty start/end
+        throw new Error(
+          `Wrong date format found in \`minDate\` property: ${minDate}`
+        );
+      }
+      if (!parseISODateString(maxDate)) {
         // Allows empty start/end
         throw new Error(
-          `Wrong date format found in \`enabledRange\` property: ${enabledRange}`
+          `Wrong date format found in \`maxDate\` property: ${maxDate}`
         );
       }
-      const [minDate, maxDate] = dates;
       if (minDate && maxDate && minDate > maxDate) {
         throw new Error(
-          `In \`enabledRange\` property, the end date shouldn't be smaller than the start date. You have: ${enabledRange}`
+          `\`maxDate\` property, shouldn't be smaller than the \`minDate\` property. You have: minDate: ${minDate}, maxDate: ${maxDate}`
         );
       }
       if (calendar) {
         calendar.set({ minDate, maxDate });
       }
     }
+
     if (changedProperties.has('open') && calendar) {
-      if (open) {
+      if (open && !readonly) {
         calendar.open();
       } else {
         calendar.close();
       }
     }
-    if (changedProperties.has('disabled')) {
+    if (
+      changedProperties.has('disabled') ||
+      changedProperties.has('readonly')
+    ) {
       [inputFrom, inputTo].forEach((input) => {
         if (input) {
           input.disabled = disabled;
+          input.readonly = readonly;
         }
       });
     }
@@ -565,7 +612,7 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
    * A selector that will return the `<input>` to enter starting date.
    */
   static get selectorInputFrom() {
-    return `${prefix}-date-picker-input[kind="single"],${prefix}-date-picker-input[kind="from"]`;
+    return `${prefix}-date-picker-input,${prefix}-date-picker-input[kind="from"]`;
   }
 
   /**
@@ -592,4 +639,4 @@ class BXDatePicker extends HostListenerMixin(FormMixin(LitElement)) {
   static styles = styles;
 }
 
-export default BXDatePicker;
+export default CDSDatePicker;
diff --git a/packages/carbon-web-components/src/components/date-picker/defs.ts b/packages/carbon-web-components/src/components/date-picker/defs.ts
index 3f5738864f4..39a31df4869 100644
--- a/packages/carbon-web-components/src/components/date-picker/defs.ts
+++ b/packages/carbon-web-components/src/components/date-picker/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -33,18 +33,3 @@ export enum DATE_PICKER_INPUT_KIND {
    */
   TO = 'to',
 }
-
-/**
- * Horizontal size, applicable only to the simple variant.
- */
-export enum DATE_PICKER_INPUT_SIZE_HORIZONTAL {
-  /**
-   * Regular size.
-   */
-  REGULAR = '',
-
-  /**
-   * Short size.
-   */
-  SHORT = 'short',
-}
diff --git a/packages/carbon-web-components/src/components/date-picker/fix-events-plugin.ts b/packages/carbon-web-components/src/components/date-picker/fix-events-plugin.ts
index 72b355470fa..69e459cb675 100644
--- a/packages/carbon-web-components/src/components/date-picker/fix-events-plugin.ts
+++ b/packages/carbon-web-components/src/components/date-picker/fix-events-plugin.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,9 +9,9 @@
 
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../globals/mixins/on';
 import Handle from '../../globals/internal/handle';
-import BXDatePickerInput from './date-picker-input';
+import CDSDatePickerInput from './date-picker-input';
 
 /**
  * The configuration for the Flatpickr plugin to fix Flatpickr's behavior of certain events.
@@ -20,12 +20,12 @@ export interface DatePickerFixEventsPluginConfig {
   /**
    * The input box to enter starting date.
    */
-  inputFrom: BXDatePickerInput;
+  inputFrom: CDSDatePickerInput;
 
   /**
    * The input box to enter end date.
    */
-  inputTo?: BXDatePickerInput;
+  inputTo?: CDSDatePickerInput;
 }
 
 /**
@@ -36,12 +36,12 @@ export interface ExtendedFlatpickrInstanceFixEventsPlugin
   /**
    * The handle for `keydown` event handler in the `<input>` for the starting date.
    */
-  _hBXCEDatePickerFixEventsPluginKeydownFrom?: Handle | null;
+  _hCDSCEDatePickerFixEventsPluginKeydownFrom?: Handle | null;
 
   /**
    * The handle for `keydown` event handler in the `<input>` for the end date.
    */
-  _hBXCEDatePickerFixEventsPluginKeydownTo?: Handle | null;
+  _hCDSCEDatePickerFixEventsPluginKeydownTo?: Handle | null;
 }
 
 /**
@@ -87,13 +87,13 @@ export default (config: DatePickerFixEventsPluginConfig): Plugin =>
      * Releases event listeners used in this Flatpickr plugin.
      */
     const release = () => {
-      if (fp._hBXCEDatePickerFixEventsPluginKeydownTo) {
-        fp._hBXCEDatePickerFixEventsPluginKeydownTo =
-          fp._hBXCEDatePickerFixEventsPluginKeydownTo.release();
+      if (fp._hCDSCEDatePickerFixEventsPluginKeydownTo) {
+        fp._hCDSCEDatePickerFixEventsPluginKeydownTo =
+          fp._hCDSCEDatePickerFixEventsPluginKeydownTo.release();
       }
-      if (fp._hBXCEDatePickerFixEventsPluginKeydownFrom) {
-        fp._hBXCEDatePickerFixEventsPluginKeydownFrom =
-          fp._hBXCEDatePickerFixEventsPluginKeydownFrom.release();
+      if (fp._hCDSCEDatePickerFixEventsPluginKeydownFrom) {
+        fp._hCDSCEDatePickerFixEventsPluginKeydownFrom =
+          fp._hCDSCEDatePickerFixEventsPluginKeydownFrom.release();
       }
     };
 
@@ -103,14 +103,14 @@ export default (config: DatePickerFixEventsPluginConfig): Plugin =>
     const init = () => {
       release();
       const { inputFrom, inputTo } = config;
-      fp._hBXCEDatePickerFixEventsPluginKeydownFrom = on(
+      fp._hCDSCEDatePickerFixEventsPluginKeydownFrom = on(
         inputFrom,
         'keydown',
         handleKeydown,
         true
       );
       if (inputTo) {
-        fp._hBXCEDatePickerFixEventsPluginKeydownTo = on(
+        fp._hCDSCEDatePickerFixEventsPluginKeydownTo = on(
           inputTo,
           'keydown',
           handleKeydown,
diff --git a/packages/carbon-web-components/src/components/date-picker/focus-plugin.ts b/packages/carbon-web-components/src/components/date-picker/focus-plugin.ts
index 061f1c58ecc..d484463c9f5 100644
--- a/packages/carbon-web-components/src/components/date-picker/focus-plugin.ts
+++ b/packages/carbon-web-components/src/components/date-picker/focus-plugin.ts
@@ -9,9 +9,9 @@
 
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../globals/mixins/on';
 import Handle from '../../globals/internal/handle';
-import BXDatePickerInput from './date-picker-input';
+import CDSDatePickerInput from './date-picker-input';
 
 /**
  * The configuration for the Flatpickr plugin to set CSS classes specific to this design system.
@@ -20,12 +20,12 @@ export interface DatePickerFocusPluginConfig {
   /**
    * The input box to enter starting date.
    */
-  inputFrom: BXDatePickerInput;
+  inputFrom: CDSDatePickerInput;
 
   /**
    * The input box to enter end date.
    */
-  inputTo?: BXDatePickerInput;
+  inputTo?: CDSDatePickerInput;
 }
 
 /**
@@ -36,27 +36,27 @@ export interface ExtendedFlatpickrInstanceFocusPlugin
   /**
    * The handle for `blur` event handler in calendar dropdown.
    */
-  _hBXCEDatePickerFocusPluginBlur?: Handle | null;
+  _hCDSCEDatePickerFocusPluginBlur?: Handle | null;
 
   /**
    * The handle for `keydown` event handler in the `<input>` for the starting date.
    */
-  _hBXCEDatePickerFocusPluginKeydownFrom?: Handle | null;
+  _hCDSCEDatePickerFocusPluginKeydownFrom?: Handle | null;
 
   /**
    * The handle for `keydown` event handler in the `<input>` for the end date.
    */
-  _hBXCEDatePickerFocusPluginKeydownTo?: Handle | null;
+  _hCDSCEDatePickerFocusPluginKeydownTo?: Handle | null;
 
   /**
    * The handle for `focus` event handler in the `<input>` for the starting date.
    */
-  _hBXCEDatePickerFocusPluginFocusFrom?: Handle | null;
+  _hCDSCEDatePickerFocusPluginFocusFrom?: Handle | null;
 
   /**
    * The handle for `focus` event handler in the `<input>` for the end date.
    */
-  _hBXCEDatePickerFocusPluginFocusTo?: Handle | null;
+  _hCDSCEDatePickerFocusPluginFocusTo?: Handle | null;
 
   /**
    * Lastly focused `<input>` for starting/end date.
@@ -141,25 +141,25 @@ export default (config: DatePickerFocusPluginConfig): Plugin =>
      * Releases event listeners used in this Flatpickr plugin.
      */
     const release = () => {
-      if (fp._hBXCEDatePickerFocusPluginBlur) {
-        fp._hBXCEDatePickerFocusPluginBlur =
-          fp._hBXCEDatePickerFocusPluginBlur.release();
+      if (fp._hCDSCEDatePickerFocusPluginBlur) {
+        fp._hCDSCEDatePickerFocusPluginBlur =
+          fp._hCDSCEDatePickerFocusPluginBlur.release();
       }
-      if (fp._hBXCEDatePickerFocusPluginFocusTo) {
-        fp._hBXCEDatePickerFocusPluginFocusTo =
-          fp._hBXCEDatePickerFocusPluginFocusTo.release();
+      if (fp._hCDSCEDatePickerFocusPluginFocusTo) {
+        fp._hCDSCEDatePickerFocusPluginFocusTo =
+          fp._hCDSCEDatePickerFocusPluginFocusTo.release();
       }
-      if (fp._hBXCEDatePickerFocusPluginFocusFrom) {
-        fp._hBXCEDatePickerFocusPluginFocusFrom =
-          fp._hBXCEDatePickerFocusPluginFocusFrom.release();
+      if (fp._hCDSCEDatePickerFocusPluginFocusFrom) {
+        fp._hCDSCEDatePickerFocusPluginFocusFrom =
+          fp._hCDSCEDatePickerFocusPluginFocusFrom.release();
       }
-      if (fp._hBXCEDatePickerFocusPluginKeydownTo) {
-        fp._hBXCEDatePickerFocusPluginKeydownTo =
-          fp._hBXCEDatePickerFocusPluginKeydownTo.release();
+      if (fp._hCDSCEDatePickerFocusPluginKeydownTo) {
+        fp._hCDSCEDatePickerFocusPluginKeydownTo =
+          fp._hCDSCEDatePickerFocusPluginKeydownTo.release();
       }
-      if (fp._hBXCEDatePickerFocusPluginKeydownFrom) {
-        fp._hBXCEDatePickerFocusPluginKeydownFrom =
-          fp._hBXCEDatePickerFocusPluginKeydownFrom.release();
+      if (fp._hCDSCEDatePickerFocusPluginKeydownFrom) {
+        fp._hCDSCEDatePickerFocusPluginKeydownFrom =
+          fp._hCDSCEDatePickerFocusPluginKeydownFrom.release();
       }
     };
 
@@ -169,31 +169,31 @@ export default (config: DatePickerFocusPluginConfig): Plugin =>
     const init = () => {
       release();
       const { inputFrom, inputTo } = config;
-      fp._hBXCEDatePickerFocusPluginBlur = on(
+      fp._hCDSCEDatePickerFocusPluginBlur = on(
         fp.calendarContainer,
         'blur',
         handleBlur,
         true
       );
-      fp._hBXCEDatePickerFocusPluginKeydownFrom = on(
+      fp._hCDSCEDatePickerFocusPluginKeydownFrom = on(
         inputFrom,
         'keydown',
         handleInputKeydown
       );
       if (inputTo) {
-        fp._hBXCEDatePickerFocusPluginKeydownTo = on(
+        fp._hCDSCEDatePickerFocusPluginKeydownTo = on(
           inputTo,
           'keydown',
           handleInputKeydown
         );
       }
-      fp._hBXCEDatePickerFocusPluginFocusFrom = on(
+      fp._hCDSCEDatePickerFocusPluginFocusFrom = on(
         inputFrom,
         'focus',
         handleInputFocus
       );
       if (inputTo) {
-        fp._hBXCEDatePickerFocusPluginFocusTo = on(
+        fp._hCDSCEDatePickerFocusPluginFocusTo = on(
           inputTo,
           'focus',
           handleInputFocus
diff --git a/packages/carbon-web-components/src/components/date-picker/icon-plugin.ts b/packages/carbon-web-components/src/components/date-picker/icon-plugin.ts
index 2c93724f86f..3c28203c660 100644
--- a/packages/carbon-web-components/src/components/date-picker/icon-plugin.ts
+++ b/packages/carbon-web-components/src/components/date-picker/icon-plugin.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
 import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
diff --git a/packages/carbon-web-components/src/components/date-picker/range-plugin.ts b/packages/carbon-web-components/src/components/date-picker/range-plugin.ts
index 4bf1fa73cb3..ef9649f1171 100644
--- a/packages/carbon-web-components/src/components/date-picker/range-plugin.ts
+++ b/packages/carbon-web-components/src/components/date-picker/range-plugin.ts
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+// @ts-nocheck
 import rangePlugin, { Config } from 'flatpickr/dist/plugins/rangePlugin';
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
@@ -34,16 +35,16 @@ export interface ExtendedFlatpickrInstanceRangePlugin
  * @returns
  *   An extension of Flatpickr `rangePlugin` that does the following:
  *
- *   * Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
+ *   Better ensures the calendar dropdown is always aligned to the `<input>` for the starting date.
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1944
- *   * Disables the logic in Flatpickr `rangePlugin` that calculates the new range with the old selected date
+ *   Disables the logic in Flatpickr `rangePlugin` that calculates the new range with the old selected date
  *     when user selects a date from calendar dropdown.
  *     We'd like to reset the selection when user re-opens calendar dropdown and re-selects a date.
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1958
- *   * Disables the logic in Flatpickr `rangePlugin` that closes the calendar dropdown
+ *   Disables the logic in Flatpickr `rangePlugin` that closes the calendar dropdown
  *     when it's launched from the `<input>` for the end date and user selects a date.
  *     Workaround for: https://github.com/flatpickr/flatpickr/issues/1958
- *   * Ensures that the `<input>` in shadow DOM is treated as part of Flatpickr UI,
+ *   Ensures that the `<input>` in shadow DOM is treated as part of Flatpickr UI,
  *     by ensuring such `<input>` hits `.contains()` search from `fp.config.ignoredFocusElements`.
  *     Without that, Flatpickr clears the `<input>` when end date hasn't been selected yet (which we don't want).
  */
diff --git a/packages/carbon-web-components/src/components/date-picker/shadow-dom-events-plugin.ts b/packages/carbon-web-components/src/components/date-picker/shadow-dom-events-plugin.ts
index 49b98dfed50..23acc731cdc 100644
--- a/packages/carbon-web-components/src/components/date-picker/shadow-dom-events-plugin.ts
+++ b/packages/carbon-web-components/src/components/date-picker/shadow-dom-events-plugin.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,7 +9,7 @@
 
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../globals/mixins/on';
 import Handle from '../../globals/internal/handle';
 import { find } from '../../globals/internal/collection-helpers';
 
@@ -21,7 +21,7 @@ export interface ExtendedFlatpickrInstanceShadowDOMEventsPlugin
   /**
    * The handle for `keydown` event handler in calendar dropdown.
    */
-  _hBXCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;
+  _hCDSCEDatePickerShadowDOMEventsPluginKeydown?: Handle | null;
 }
 
 /**
@@ -152,9 +152,9 @@ export default (): Plugin =>
      * Releases event listeners used in this Flatpickr plugin.
      */
     const release = () => {
-      if (fp._hBXCEDatePickerShadowDOMEventsPluginKeydown) {
-        fp._hBXCEDatePickerShadowDOMEventsPluginKeydown =
-          fp._hBXCEDatePickerShadowDOMEventsPluginKeydown.release();
+      if (fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown) {
+        fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown =
+          fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown.release();
       }
     };
 
@@ -163,7 +163,7 @@ export default (): Plugin =>
      */
     const init = () => {
       release();
-      fp._hBXCEDatePickerShadowDOMEventsPluginKeydown = on(
+      fp._hCDSCEDatePickerShadowDOMEventsPluginKeydown = on(
         fp.calendarContainer,
         'keydown',
         handleKeydown
diff --git a/packages/carbon-web-components/src/components/date-picker/state-handshake-plugin.ts b/packages/carbon-web-components/src/components/date-picker/state-handshake-plugin.ts
index 1c92394cd36..d74cd90adf6 100644
--- a/packages/carbon-web-components/src/components/date-picker/state-handshake-plugin.ts
+++ b/packages/carbon-web-components/src/components/date-picker/state-handshake-plugin.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,13 +9,13 @@
 
 import { Instance as FlatpickrInstance } from 'flatpickr/dist/types/instance';
 import { Plugin } from 'flatpickr/dist/types/options';
-import BXDatePicker from './date-picker';
+import CDSDatePicker from './date-picker';
 
 /**
  * @param config Plugin configuration.
- * @returns A Flatpickr plugin to handshake states with `<bx-date-picker>`.
+ * @returns A Flatpickr plugin to handshake states with `<cds-date-picker>`.
  */
-export default (datePicker: BXDatePicker): Plugin =>
+export default (datePicker: CDSDatePicker): Plugin =>
   (fp: FlatpickrInstance) => {
     /**
      * Sets open state.
@@ -32,12 +32,12 @@ export default (datePicker: BXDatePicker): Plugin =>
     };
 
     /**
-     * Propagates Flatpickr's `onChange` event to `<bx-date-picker>`.
+     * Propagates Flatpickr's `onChange` event to `<cds-date-picker>`.
      *
      * @param selectedDates The latest selected dates.
      */
     const handleChange = (selectedDates: Date[]) => {
-      const { eventChange } = datePicker.constructor as typeof BXDatePicker;
+      const { eventChange } = datePicker.constructor as typeof CDSDatePicker;
       datePicker.dispatchEvent(
         new CustomEvent(eventChange, {
           bubbles: true,
diff --git a/packages/carbon-web-components/src/components/dropdown/defs.ts b/packages/carbon-web-components/src/components/dropdown/defs.ts
index 3334bb9c339..51f68add7a4 100644
--- a/packages/carbon-web-components/src/components/dropdown/defs.ts
+++ b/packages/carbon-web-components/src/components/dropdown/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -49,19 +49,19 @@ export enum DROPDOWN_KEYBOARD_ACTION {
  */
 export enum DROPDOWN_SIZE {
   /**
-   * Regular size.
+   * Small size.
    */
-  REGULAR = '',
+  SMALL = 'sm',
 
   /**
-   * Small size.
+   * Medium size.
    */
-  SMALL = 'sm',
+  MEDIUM = 'md',
 
   /**
-   * Extra large size.
+   * Large size.
    */
-  EXTRA_LARGE = 'xl',
+  LARGE = 'lg',
 }
 
 /**
@@ -69,12 +69,27 @@ export enum DROPDOWN_SIZE {
  */
 export enum DROPDOWN_TYPE {
   /**
-   * Regular type.
+   * Default type.
    */
-  REGULAR = '',
+  DEFAULT = '',
 
   /**
    * Inline type.
    */
   INLINE = 'inline',
 }
+
+/**
+ * Dropdown direction.
+ */
+export enum DROPDOWN_DIRECTION {
+  /**
+   * Top.
+   */
+  TOP = 'top',
+
+  /**
+   * Bottom.
+   */
+  BOTTOM = 'bottom',
+}
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts b/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts
index 034e67d6c24..736770aabe3 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown-item.ts
@@ -7,23 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Checkmark16 from '@carbon/icons/lib/checkmark/16';
+import { prefix } from '../../globals/settings';
 import { DROPDOWN_SIZE } from './dropdown';
 import styles from './dropdown.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Dropdown item.
  *
- * @element bx-dropdown-item
+ * @element cds-dropdown-item
  * @csspart selected-icon The selected icon.
  */
 @customElement(`${prefix}-dropdown-item`)
-class BXDropdownItem extends LitElement {
+class CDSDropdownItem extends LitElement {
   /**
    * `true` if this dropdown item should be disabled.
    */
@@ -51,10 +50,10 @@ class BXDropdownItem extends LitElement {
    * Dropdown size.
    */
   @property({ reflect: true })
-  size = DROPDOWN_SIZE.REGULAR;
+  size = DROPDOWN_SIZE.MEDIUM;
 
   /**
-   * The `value` attribute that is set to the parent `<bx-dropdown>` when this dropdown item is selected.
+   * The `value` attribute that is set to the parent `<cds-dropdown>` when this dropdown item is selected.
    */
   @property()
   value = '';
@@ -77,4 +76,4 @@ class BXDropdownItem extends LitElement {
   static styles = styles;
 }
 
-export default BXDropdownItem;
+export default CDSDropdownItem;
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts b/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts
index d2a1dbef8c8..1b23876fa5d 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown-skeleton.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './dropdown.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton version of dropdown.
  */
 @customElement(`${prefix}-dropdown-skeleton`)
-class BXDropdownSkeleton extends LitElement {
+class CDSDropdownSkeleton extends LitElement {
   render() {
     return html`
       <div
@@ -33,4 +31,4 @@ class BXDropdownSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXDropdownSkeleton;
+export default CDSDropdownSkeleton;
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx b/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
index e17141ab127..fc028cd3791 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Dropdown
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/dropdown)
 
 Dropdown presents a list of options that can be used to filter or sort existing
 content.
@@ -28,46 +28,59 @@ import '@carbon/web-components/es/components/dropdown/index.js';
 ### HTML
 
 ```html
-<bx-dropdown value="bar">
-  <bx-dropdown-item value="foo">Foo</bx-dropdown-item>
-  <bx-dropdown-item value="bar">Bar</bx-dropdown-item>
-  <bx-dropdown-item value="baz">Baz</bx-dropdown-item>
-</bx-dropdown>
+<cds-dropdown value="bar">
+  <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
+  <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
+  <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
+</cds-dropdown>
 ```
 
 ## Selection
 
-When user attempts to select a dropdown item, `bx-dropdown-beingselected` event
-fires on `<bx-dropdown>`, which has the following properties in the event
+When user attempts to select a dropdown item, `cds-dropdown-beingselected` event
+fires on `<cds-dropdown>`, which has the following properties in the event
 details:
 
-| Property | Description                              |
-| -------- | ---------------------------------------- |
-| `item`   | The `<bx-dropdown-item>` being selected. |
+| Property | Description                               |
+| -------- | ----------------------------------------- |
+| `item`   | The `<cds-dropdown-item>` being selected. |
 
-`bx-dropdown-beingselected` bubbles and is cancelable. Canceling this event
+`cds-dropdown-beingselected` bubbles and is cancelable. Canceling this event
 means canceling change in selection.
 
+## Inline dropdown
+
+You can place a `cds-dropdown` inline with other content by using the inline
+variant
+
+```html
+<cds-dropdown type="inline">
+  <cds-dropdown-item value="foo">Foo</cds-dropdown-item>
+  <cds-dropdown-item value="bar">Bar</cds-dropdown-item>
+  <cds-dropdown-item value="baz">Baz</cds-dropdown-item>
+</cds-dropdown>
+```
+
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-dropdown-skeleton>`.
+For the skeleton variation, utilize `<cds-dropdown-skeleton>`.
 
 ```html
-<bx-dropdown-skeleton></bx-dropdown-skeleton>
+<cds-dropdown-skeleton></cds-dropdown-skeleton>
 ```
 
-## `<bx-dropdown>` attributes, properties and events
+## `<cds-dropdown>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-dropdown open>`) and `false` means not setting the attribute (e.g.
-`<bx-dropdown>` without `open` attribute).
+`<cds-dropdown open>`) and `false` means not setting the attribute (e.g.
+`<cds-dropdown>` without `open` attribute).
 
-<Props of="bx-dropdown" />
+<Props of="cds-dropdown" />
 
-## `<bx-dropdown-item>` attributes and properties
+## `<cds-dropdown-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-dropdown-item disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-dropdown-item>` without `disabled` attribute).
+`<cds-dropdown-item disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-dropdown-item>` without `disabled` attribute).
 
-<Props of="bx-dropdown-item" />
+<Props of="cds-dropdown-item" />
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts b/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
index 3381f8d5419..b02a7dbb52d 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown-story.ts
@@ -1,139 +1,232 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
+import { html } from 'lit';
 import { boolean, select } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import {
-  DROPDOWN_COLOR_SCHEME,
-  DROPDOWN_SIZE,
-  DROPDOWN_TYPE,
-} from './dropdown';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { DROPDOWN_DIRECTION, DROPDOWN_SIZE, DROPDOWN_TYPE } from './dropdown';
 import './dropdown-item';
 import './dropdown-skeleton';
 import storyDocs from './dropdown-story.mdx';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${DROPDOWN_COLOR_SCHEME.LIGHT})`]: DROPDOWN_COLOR_SCHEME.LIGHT,
+const directionOptions = {
+  [`Top`]: DROPDOWN_DIRECTION.TOP,
+  [`Bottom`]: DROPDOWN_DIRECTION.BOTTOM,
 };
 
 const sizes = {
-  'Regular size': null,
   [`Small size (${DROPDOWN_SIZE.SMALL})`]: DROPDOWN_SIZE.SMALL,
-  [`Extra large size (${DROPDOWN_SIZE.EXTRA_LARGE})`]:
-    DROPDOWN_SIZE.EXTRA_LARGE,
+  [`Medium size (${DROPDOWN_SIZE.MEDIUM})`]: DROPDOWN_SIZE.MEDIUM,
+  [`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
 };
 
 const types = {
-  Regular: null,
+  Default: null,
   [`Inline (${DROPDOWN_TYPE.INLINE})`]: DROPDOWN_TYPE.INLINE,
 };
 
-export const Default = (args) => {
+const items = [
+  {
+    value: 'option-0',
+    text: 'Lorem, ipsum dolor sit amet consectetur adipisicing elit.',
+  },
+  {
+    value: 'option-1',
+    text: 'Option 1',
+  },
+  {
+    value: 'option-2',
+    text: 'Option 2',
+  },
+  {
+    value: 'option-3',
+    text: 'Option 3 - a disabled item',
+    disabled: true,
+  },
+  {
+    value: 'option-4',
+    text: 'Option 4',
+  },
+  {
+    value: 'option-5',
+    text: 'Option 5',
+  },
+];
+
+export const Default = () => {
+  return html`
+    <cds-dropdown
+      helper-text="This is some helper text"
+      title-text="Dropdown label"
+      label="Dropdown menu options">
+      ${items.map(
+        (elem) => html`
+          <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
+            >${elem.text}</cds-dropdown-item
+          >
+        `
+      )}
+    </cds-dropdown>
+  `;
+};
+
+export const Inline = () => {
+  return html`
+    <cds-dropdown
+      type="inline"
+      title-text="Inline dropdown label"
+      label="Dropdown menu options">
+      ${items.map(
+        (elem) => html`
+          <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
+            >${elem.text}</cds-dropdown-item
+          >
+        `
+      )}
+    </cds-dropdown>
+  `;
+};
+
+export const InlineWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <div style="width:400px">
+        <cds-dropdown
+          type="inline"
+          title-text="Inline dropdown label"
+          label="Dropdown menu options">
+          ${items.map(
+            (elem) => html`
+              <cds-dropdown-item
+                ?disabled=${elem.disabled}
+                value="${elem.value}"
+                >${elem.text}</cds-dropdown-item
+              >
+            `
+          )}
+        </cds-dropdown>
+      </div>
+    </sb-template-layers>
+  `;
+};
+
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <div style="width:400px">
+        <cds-dropdown
+          title-text="Dropdown label"
+          helper-text="This is some helper text"
+          label="Dropdown menu options">
+          ${items.map(
+            (elem) => html`
+              <cds-dropdown-item
+                ?disabled=${elem.disabled}
+                value="${elem.value}"
+                >${elem.text}</cds-dropdown-item
+              >
+            `
+          )}
+        </cds-dropdown>
+      </div>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
   const {
     open,
-    colorScheme,
+    direction,
     disabled,
     helperText,
-    labelText,
+    hideLabel,
+    invalid,
+    invalidText,
+    titleText,
+    readOnly,
     size,
     type,
     value,
-    triggerContent,
-    disableSelection,
-    disableToggle,
-    onBeforeSelect,
-    onBeforeToggle,
-    onSelect,
-    onToggle,
-  } = args?.['bx-dropdown'] ?? {};
-  const handleBeforeSelect = (event: CustomEvent) => {
-    if (onBeforeSelect) {
-      onBeforeSelect(event);
-    }
-    if (disableSelection) {
-      event.preventDefault();
-    }
-  };
-  const handleBeforeToggle = (event: CustomEvent) => {
-    if (onBeforeToggle) {
-      onBeforeToggle(event);
-    }
-    if (disableToggle) {
-      event.preventDefault();
-    }
-  };
+    label,
+    warn,
+    warnText,
+  } = args?.[`${prefix}-dropdown`] ?? {};
+
   return html`
-    <bx-dropdown
+    <cds-dropdown
       ?open=${open}
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled=${disabled}
-      helper-text=${ifNonNull(helperText)}
-      label-text=${ifNonNull(labelText)}
-      size="${ifNonNull(size)}"
-      type="${ifNonNull(type)}"
-      value=${ifNonNull(value)}
-      trigger-content=${ifNonNull(triggerContent)}
-      @bx-dropdown-beingselected=${handleBeforeSelect}
-      @bx-dropdown-beingtoggled=${handleBeforeToggle}
-      @bx-dropdown-selected=${onSelect}
-      @bx-dropdown-toggled=${onToggle}>
-      <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
-      <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
-      <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
-      <bx-dropdown-item value="dea">Option 4</bx-dropdown-item>
-      <bx-dropdown-item value="router">Option 5</bx-dropdown-item>
-    </bx-dropdown>
+      ?disabled="${disabled}"
+      ?hide-label=${hideLabel}
+      helper-text=${ifDefined(helperText)}
+      ?invalid=${invalid}
+      ?read-only=${readOnly}
+      invalid-text=${invalidText}
+      direction="${direction}"
+      title-text=${ifDefined(titleText)}
+      size="${ifDefined(size)}"
+      type="${ifDefined(type)}"
+      value=${ifDefined(value)}
+      label=${ifDefined(label)}
+      ?warn=${warn}
+      warn-text=${warnText}>
+      ${items.map(
+        (elem) => html`
+          <cds-dropdown-item ?disabled=${elem.disabled} value="${elem.value}"
+            >${elem.text}</cds-dropdown-item
+          >
+        `
+      )}
+    </cds-dropdown>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-dropdown': () => ({
+    [`${prefix}-dropdown`]: () => ({
       open: boolean('Open (open)', false),
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
+      direction: select('Direction', directionOptions, null),
       disabled: boolean('Disabled (disabled)', false),
       helperText: textNullable(
         'Helper text (helper-text)',
-        'Optional helper text'
+        'This is some helper text'
       ),
-      labelText: textNullable('Label text (label-text)', 'Dropdown title'),
-      size: select('Dropdown size (size)', sizes, null),
-      type: select('Dropdown type (type)', types, null),
-      value: textNullable('The value of the selected item (value)', ''),
-      triggerContent: textNullable(
-        'The default content of the trigger button (trigger-content)',
-        'Select an item'
+      hideLabel: boolean('Hide label (hide-label)', false),
+      invalid: boolean('Invalid (invalid)', false),
+      invalidText: textNullable(
+        'Invalid text (invalid-text)',
+        'invalid selection'
       ),
-      disableSelection: boolean(
-        'Disable user-initiated selection change (Call event.preventDefault() in bx-dropdown-beingselected event)',
-        false
+      readOnly: boolean('Read only (read-only)', false),
+      label: textNullable(
+        'The default content of the trigger button (label)',
+        'This is an example label'
       ),
-      disableToggle: boolean(
-        'Disable user-initiated toggle of open state (Call event.preventDefault() in bx-dropdown-beingtoggled event)',
-        false
+      titleText: textNullable(
+        'Title text (title-text)',
+        'This is an example title'
+      ),
+      size: select('Dropdown size (size)', sizes, null),
+      type: select('Dropdown type (type)', types, null),
+      value: textNullable('Selected value (value)', ''),
+      warn: boolean('Warn (warn)', false),
+      warnText: textNullable(
+        'Warn text (warn-text)',
+        'please notice the warning'
       ),
-      onBeforeSelect: action('bx-dropdown-beingselected'),
-      onBeforeToggle: action('bx-dropdown-beingtoggled'),
-      onSelect: action('bx-dropdown-selected'),
-      onToggle: action('bx-dropdown-toggled'),
     }),
   },
 };
 
 export const skeleton = () =>
-  html` <bx-dropdown-skeleton></bx-dropdown-skeleton> `;
+  html` <cds-dropdown-skeleton></cds-dropdown-skeleton> `;
 
 skeleton.parameters = {
   percy: {
@@ -146,4 +239,10 @@ export default {
   parameters: {
     ...storyDocs.parameters,
   },
+  decorators: [
+    (story, { name }) => {
+      const width = !name.toLowerCase().includes('layer') ? `width:400px` : ``;
+      return html` <div style="${width}">${story()}</div> `;
+    },
+  ],
 };
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.scss b/packages/carbon-web-components/src/components/dropdown/dropdown.scss
index f9cb4692da1..587b8542aac 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown.scss
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,10 +7,18 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/list-box/list-box';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/checkbox/checkbox';
-@import 'carbon-components/scss/components/tag/tag';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/list-box/list-box' as *;
+@use '@carbon/styles/scss/components/dropdown' as *;
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/checkbox';
+@use '@carbon/styles/scss/components/tag';
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include list-box;
 
 :host(#{$prefix}-dropdown) {
   outline: none;
@@ -28,57 +36,92 @@ $css--plex: true !default;
   .#{$prefix}--list-box__menu {
     top: 100%;
     margin-top: 1px;
+    outline: 1px solid $focus;
   }
 }
 
-:host(#{$prefix}-dropdown[type='inline']) {
-  @extend .#{$prefix}--list-box__wrapper--inline;
+:host(#{$prefix}-dropdown[open]) {
+  .#{$prefix}--list-box__field {
+    outline: none;
+  }
 }
 
-:host(#{$prefix}-dropdown-item) {
-  @extend .#{$prefix}--list-box__menu-item;
+:host(#{$prefix}-dropdown[invalid]) {
+  .#{$prefix}--list-box__field {
+    outline: none;
+  }
 
-  display: block;
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
+}
 
-  .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+:host(#{$prefix}-dropdown[read-only]) {
+  @extend .#{$prefix}--dropdown--readonly;
+
+  .#{$prefix}--list-box {
+    background-color: transparent;
+    border-bottom-color: $border-subtle;
   }
 }
 
-:host(#{$prefix}-dropdown-item[size='sm']) {
-  height: rem(32px);
+:host(#{$prefix}-combo-box[direction='top']),
+:host(#{$prefix}-dropdown[direction='top']) {
+  @extend .#{$prefix}--list-box--up;
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(7px);
-    padding-bottom: rem(7px);
+  .#{$prefix}--list-box__menu {
+    top: auto;
   }
 }
 
-:host(#{$prefix}-dropdown-item[size='xl']) {
-  height: rem(48px);
+:host(#{$prefix}-dropdown[type='inline']) {
+  @extend .#{$prefix}--list-box__wrapper--inline;
 
-  .#{$prefix}--list-box__menu-item__option {
-    padding-top: rem(15px);
-    padding-bottom: rem(15px);
+  grid-gap: 0 $spacing-06;
+}
+
+:host(#{$prefix}-dropdown[type='inline'][warn]) .#{$prefix}--list-box__field {
+  padding-left: $spacing-05;
+  padding-right: calc(#{$spacing-08} + #{$spacing-05});
+}
+
+:host(#{$prefix}-dropdown[warn]),
+:host(#{$prefix}-dropdown[invalid]) {
+  .#{$prefix}--form__helper-text {
+    grid-column: 2;
   }
 }
 
-:host(#{$prefix}-dropdown-item[disabled])
+:host(#{$prefix}-dropdown-item) {
+  @extend .#{$prefix}--list-box__menu-item;
+
+  display: block;
+
   .#{$prefix}--list-box__menu-item__option {
-  color: $disabled-02;
-  text-decoration: none;
+    height: auto;
+  }
+}
+
+:host(#{$prefix}-dropdown-item:hover) {
+  background-color: $layer-hover;
 }
 
 :host(#{$prefix}-dropdown-item[highlighted]) {
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 }
 
+:host(#{$prefix}-dropdown-item[disabled])
+  .#{$prefix}--list-box__menu-item__option {
+  color: $text-disabled;
+  text-decoration: none;
+}
+
 :host(#{$prefix}-dropdown-item[selected]) {
   @extend .#{$prefix}--list-box__menu-item--active;
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
-    color: $text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--list-box__menu-item__selected-icon {
@@ -86,6 +129,24 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-dropdown-item[size='sm']) {
+  height: $spacing-07;
+
+  .#{$prefix}--list-box__menu-item__option {
+    padding-top: rem(7px);
+    padding-bottom: rem(7px);
+  }
+}
+
+:host(#{$prefix}-dropdown-item[size='lg']) {
+  height: $spacing-09;
+
+  .#{$prefix}--list-box__menu-item__option {
+    padding-top: rem(15px);
+    padding-bottom: rem(15px);
+  }
+}
+
 :host(#{$prefix}-dropdown-skeleton) {
   .#{$prefix}--skeleton {
     @include skeleton;
diff --git a/packages/carbon-web-components/src/components/dropdown/dropdown.ts b/packages/carbon-web-components/src/components/dropdown/dropdown.ts
index b7da8aba4ac..5dd37be4583 100644
--- a/packages/carbon-web-components/src/components/dropdown/dropdown.ts
+++ b/packages/carbon-web-components/src/components/dropdown/dropdown.ts
@@ -7,13 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { TemplateResult } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, query, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html, TemplateResult } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
@@ -25,46 +26,44 @@ import {
   indexOf,
 } from '../../globals/internal/collection-helpers';
 import {
-  DROPDOWN_COLOR_SCHEME,
+  DROPDOWN_DIRECTION,
   DROPDOWN_KEYBOARD_ACTION,
   DROPDOWN_SIZE,
   DROPDOWN_TYPE,
   NAVIGATION_DIRECTION,
 } from './defs';
-import BXDropdownItem from './dropdown-item';
+import CDSDropdownItem from './dropdown-item';
 import styles from './dropdown.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export {
-  DROPDOWN_COLOR_SCHEME,
   DROPDOWN_KEYBOARD_ACTION,
+  DROPDOWN_DIRECTION,
   DROPDOWN_SIZE,
   DROPDOWN_TYPE,
   NAVIGATION_DIRECTION,
 };
 
-const { prefix } = settings;
-
 /**
  * Dropdown.
  *
- * @element bx-dropdown
+ * @element cds-dropdown
  * @csspart label-text The label text.
  * @csspart helper-text The helper text.
  * @csspart trigger-button The trigger button.
  * @csspart menu-body The menu body.
  * @csspart validity-message The validity message.
- * @fires bx-dropdown-beingselected
+ * @fires cds-dropdown-beingselected
  *   The custom event fired before a dropdown item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-dropdown-beingtoggled
+ * @fires cds-dropdown-beingtoggled
  *   The custom event fired before the open state of this dropdown is toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated toggling.
- * @fires bx-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.
- * @fires bx-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.
+ * @fires cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.
+ * @fires cds-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.
  */
 @customElement(`${prefix}-dropdown`)
-class BXDropdown extends ValidityMixin(
+class CDSDropdown extends ValidityMixin(
   HostListenerMixin(FormMixin(FocusMixin(LitElement)))
 ) {
   /**
@@ -96,16 +95,16 @@ class BXDropdown extends ValidityMixin(
   protected _slotHelperTextNode!: HTMLSlotElement;
 
   /**
-   * The `<slot>` element for the label text in the shadow DOM.
+   * The `<slot>` element for the title text in the shadow DOM.
    */
-  @query('slot[name="label-text"]')
-  protected _slotLabelTextNode!: HTMLSlotElement;
+  @query('slot[name="title-text"]')
+  protected _slotTitleTextNode!: HTMLSlotElement;
 
   /**
    * @param itemToSelect A dropdown item. Absense of this argument means clearing selection.
    * @returns `true` if the selection of this dropdown should change if the given item is selected upon user interaction.
    */
-  protected _selectionShouldChange(itemToSelect?: BXDropdownItem) {
+  protected _selectionShouldChange(itemToSelect?: CDSDropdownItem) {
     return !itemToSelect || itemToSelect.value !== this.value;
   }
 
@@ -116,15 +115,15 @@ class BXDropdown extends ValidityMixin(
    *   A dropdown item.
    *   Absense of this argument means clearing selection, which may be handled by a derived class.
    */
-  protected _selectionDidChange(itemToSelect?: BXDropdownItem) {
+  protected _selectionDidChange(itemToSelect?: CDSDropdownItem) {
     if (itemToSelect) {
       this.value = itemToSelect.value;
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXDropdown).selectorItemSelected
+          (this.constructor as typeof CDSDropdown).selectorItemSelected
         ),
         (item) => {
-          (item as BXDropdownItem).selected = false;
+          (item as CDSDropdownItem).selected = false;
         }
       );
       itemToSelect.selected = true;
@@ -139,12 +138,16 @@ class BXDropdown extends ValidityMixin(
    * @param event The event.
    */
   protected _handleClickInner(event: MouseEvent) {
+    if (this.readOnly) {
+      return;
+    }
+
     if (this.shadowRoot!.contains(event.target as Node)) {
       this._handleUserInitiatedToggle();
     } else {
       const item = (event.target as Element).closest(
-        (this.constructor as typeof BXDropdown).selectorItem
-      ) as BXDropdownItem;
+        (this.constructor as typeof CDSDropdown).selectorItem
+      ) as CDSDropdownItem;
       if (this.contains(item)) {
         this._handleUserInitiatedSelectItem(item);
       }
@@ -156,7 +159,7 @@ class BXDropdown extends ValidityMixin(
    */
   protected _handleKeydownInner(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof BXDropdown).getAction(key);
+    const action = (this.constructor as typeof CDSDropdown).getAction(key);
     if (!this.open) {
       switch (action) {
         case DROPDOWN_KEYBOARD_ACTION.NAVIGATING:
@@ -186,7 +189,7 @@ class BXDropdown extends ValidityMixin(
    */
   protected _handleKeypressInner(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof BXDropdown).getAction(key);
+    const action = (this.constructor as typeof CDSDropdown).getAction(key);
     if (!this.open) {
       switch (action) {
         case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
@@ -199,10 +202,10 @@ class BXDropdown extends ValidityMixin(
       switch (action) {
         case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
           {
-            const constructor = this.constructor as typeof BXDropdown;
+            const constructor = this.constructor as typeof CDSDropdown;
             const highlightedItem = this.querySelector(
               constructor.selectorItemHighlighted
-            ) as BXDropdownItem;
+            ) as CDSDropdownItem;
             if (highlightedItem) {
               this._handleUserInitiatedSelectItem(highlightedItem);
             } else {
@@ -248,7 +251,11 @@ class BXDropdown extends ValidityMixin(
    *
    * @param [item] The dropdown item user wants to select. Absense of this argument means clearing selection.
    */
-  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {
+  protected _handleUserInitiatedSelectItem(item?: CDSDropdownItem) {
+    if (item?.hasAttribute('disabled')) {
+      return;
+    }
+
     if (this._selectionShouldChange(item)) {
       const init = {
         bubbles: true,
@@ -257,7 +264,7 @@ class BXDropdown extends ValidityMixin(
           item,
         },
       };
-      const constructor = this.constructor as typeof BXDropdown;
+      const constructor = this.constructor as typeof CDSDropdown;
       const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {
         ...init,
         cancelable: true,
@@ -277,7 +284,7 @@ class BXDropdown extends ValidityMixin(
    */
   protected _handleUserInitiatedToggle(force: boolean = !this.open) {
     const { eventBeforeToggle, eventToggle } = this
-      .constructor as typeof BXDropdown;
+      .constructor as typeof CDSDropdown;
 
     const { disabled } = this;
     const init = {
@@ -296,13 +303,12 @@ class BXDropdown extends ValidityMixin(
         } else {
           const {
             selectedItemAssistiveText,
-            triggerContent,
+            label,
             _assistiveStatusText: assistiveStatusText,
             _selectedItemContent: selectedItemContent,
           } = this;
           const selectedItemText =
-            (selectedItemContent && selectedItemContent.textContent) ||
-            triggerContent;
+            (selectedItemContent && selectedItemContent.textContent) || label;
           if (
             selectedItemText &&
             assistiveStatusText !== selectedItemAssistiveText
@@ -311,10 +317,10 @@ class BXDropdown extends ValidityMixin(
           }
           forEach(
             this.querySelectorAll(
-              (this.constructor as typeof BXDropdown).selectorItemHighlighted
+              (this.constructor as typeof CDSDropdown).selectorItemHighlighted
             ),
             (item) => {
-              (item as BXDropdownItem).highlighted = false;
+              (item as CDSDropdownItem).highlighted = false;
             }
           );
         }
@@ -330,10 +336,10 @@ class BXDropdown extends ValidityMixin(
   protected _clearHighlight() {
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof BXDropdown).selectorItem
+        (this.constructor as typeof CDSDropdown).selectorItem
       ),
       (item) => {
-        (item as BXDropdownItem).highlighted = false;
+        (item as CDSDropdownItem).highlighted = false;
       }
     );
   }
@@ -344,13 +350,17 @@ class BXDropdown extends ValidityMixin(
    * @param direction `-1` to navigate backward, `1` to navigate forward.
    */
   protected _navigate(direction: number) {
-    const constructor = this.constructor as typeof BXDropdown;
+    const constructor = this.constructor as typeof CDSDropdown;
     const items = this.querySelectorAll(constructor.selectorItem);
     const highlightedItem = this.querySelector(
       constructor.selectorItemHighlighted
     );
     const highlightedIndex = indexOf(items, highlightedItem!);
     let nextIndex = highlightedIndex + direction;
+
+    if (items[nextIndex]?.hasAttribute('disabled')) {
+      nextIndex += direction;
+    }
     if (nextIndex < 0) {
       nextIndex = items.length - 1;
     }
@@ -358,7 +368,7 @@ class BXDropdown extends ValidityMixin(
       nextIndex = 0;
     }
     forEach(items, (item, i) => {
-      (item as BXDropdownItem).highlighted = i === nextIndex;
+      (item as CDSDropdownItem).highlighted = i === nextIndex;
     });
 
     const nextItem = items[nextIndex];
@@ -378,7 +388,7 @@ class BXDropdown extends ValidityMixin(
   /**
    * @returns The content preceding the trigger button.
    */
-  protected _renderPrecedingTriggerContent(): TemplateResult | void {
+  protected _renderPrecedingLabel(): TemplateResult | void {
     return undefined;
   }
   /* eslint-enable class-methods-use-this */
@@ -386,20 +396,54 @@ class BXDropdown extends ValidityMixin(
   /**
    * @returns The main content of the trigger button.
    */
-  protected _renderTriggerContent(): TemplateResult {
-    const { triggerContent, _selectedItemContent: selectedItemContent } = this;
+  protected _renderLabel(): TemplateResult {
+    const { label, _selectedItemContent: selectedItemContent } = this;
     return html`
       <span id="trigger-label" class="${prefix}--list-box__label"
-        >${selectedItemContent || triggerContent}</span
+        >${selectedItemContent || label}</span
       >
     `;
   }
 
+  /**
+   * @returns The title label.
+   */
+  protected _renderTitleLabel(): TemplateResult {
+    const {
+      disabled,
+      hideLabel,
+      titleText,
+      _slotTitleTextNode: slotTitleTextNode,
+      _handleSlotchangeLabelText: handleSlotchangeLabelText,
+    } = this;
+
+    const labelClasses = classMap({
+      [`${prefix}--label`]: true,
+      [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+
+    const hasTitleText =
+      titleText ||
+      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);
+
+    return html`
+      <label
+        part="title-text"
+        class="${labelClasses}"
+        ?hidden="${!hasTitleText}">
+        <slot name="title-text" @slotchange="${handleSlotchangeLabelText}"
+          >${titleText}</slot
+        >
+      </label>
+    `;
+  }
+
   /* eslint-disable class-methods-use-this */
   /**
    * @returns The content following the trigger button.
    */
-  protected _renderFollowingTriggerContent(): TemplateResult | void {
+  protected _renderFollowingLabel(): TemplateResult | void {
     return undefined;
   }
   /* eslint-enable class-methods-use-this */
@@ -418,10 +462,17 @@ class BXDropdown extends ValidityMixin(
   }
 
   /**
-   * The color scheme.
+   * 'aria-label' of the ListBox component.
+   * Specify a label to be read by screen readers on the container node
+   */
+  @property({ type: String, reflect: true, attribute: 'aria-label' })
+  ariaLabel = '';
+
+  /**
+   * Specify the direction of the dropdown. Can be either top or bottom.
    */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = DROPDOWN_COLOR_SCHEME.REGULAR;
+  @property({ type: String, reflect: true })
+  direction = DROPDOWN_DIRECTION.BOTTOM;
 
   /**
    * `true` if this dropdown should be disabled.
@@ -435,6 +486,12 @@ class BXDropdown extends ValidityMixin(
   @property({ attribute: 'helper-text' })
   helperText = '';
 
+  /**
+   * Specify whether the title text should be hidden or not
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
   /**
    * `true` to show the UI of the invalid state.
    */
@@ -442,10 +499,16 @@ class BXDropdown extends ValidityMixin(
   invalid = false;
 
   /**
-   * The label text.
+   * Message which is displayed if the value is invalid.
    */
-  @property({ attribute: 'label-text' })
-  labelText = '';
+  @property({ attribute: 'invalid-text' })
+  invalidText = '';
+
+  /**
+   * Provide the title text that will be read by a screen reader when visiting this control
+   */
+  @property({ attribute: 'title-text' })
+  titleText = '';
 
   /**
    * Name for the dropdown in the `FormData`
@@ -459,6 +522,12 @@ class BXDropdown extends ValidityMixin(
   @property({ type: Boolean, reflect: true })
   open = false;
 
+  /**
+   * Whether or not the Dropdown is readonly
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'read-only' })
+  readOnly = false;
+
   /**
    * `true` if the value is required.
    */
@@ -488,7 +557,7 @@ class BXDropdown extends ValidityMixin(
    * Dropdown size.
    */
   @property({ reflect: true })
-  size = DROPDOWN_SIZE.REGULAR;
+  size = DROPDOWN_SIZE.MEDIUM;
 
   /**
    * The `aria-label` attribute for the UI indicating the closed state.
@@ -503,16 +572,16 @@ class BXDropdown extends ValidityMixin(
   toggleLabelOpen = '';
 
   /**
-   * The content of the trigger button.
+   * Generic label that will be used as the textual representation of what this field is for
    */
-  @property({ attribute: 'trigger-content' })
-  triggerContent = '';
+  @property({ attribute: 'label' })
+  label = '';
 
   /**
    * `true` if this dropdown should use the inline UI variant.
    */
   @property({ reflect: true })
-  type = DROPDOWN_TYPE.REGULAR;
+  type = DROPDOWN_TYPE.DEFAULT;
 
   /**
    * The validity message.
@@ -526,32 +595,46 @@ class BXDropdown extends ValidityMixin(
   @property({ reflect: true })
   value = '';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  @property({ attribute: 'warn-text' })
+  warnText = '';
 
   shouldUpdate(changedProperties) {
-    const { selectorItem } = this.constructor as typeof BXDropdown;
+    const { selectorItem } = this.constructor as typeof CDSDropdown;
     if (changedProperties.has('size')) {
       forEach(this.querySelectorAll(selectorItem), (elem) => {
-        (elem as BXDropdownItem).size = this.size;
+        (elem as CDSDropdownItem).size = this.size;
+      });
+    }
+    if (changedProperties.has('disabled') && this.disabled) {
+      const { disabled } = this;
+      // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers
+      forEach(this.querySelectorAll(selectorItem), (elem) => {
+        if (disabled) {
+          (elem as CDSDropdownItem).disabled = disabled;
+        } else {
+          (elem as CDSDropdownItem).removeAttribute('disabled');
+        }
       });
     }
     if (changedProperties.has('value')) {
-      // `<bx-multi-select>` updates selection beforehand
-      // because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`
+      // `<cds-multi-select>` updates selection beforehand
+      // because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`
       forEach(this.querySelectorAll(selectorItem), (elem) => {
-        (elem as BXDropdownItem).selected =
-          (elem as BXDropdownItem).value === this.value;
+        (elem as CDSDropdownItem).selected =
+          (elem as CDSDropdownItem).value === this.value;
       });
       const item = find(
         this.querySelectorAll(selectorItem),
-        (elem) => (elem as BXDropdownItem).value === this.value
+        (elem) => (elem as CDSDropdownItem).value === this.value
       );
       if (item) {
         const range = this.ownerDocument!.createRange();
@@ -564,73 +647,55 @@ class BXDropdown extends ValidityMixin(
     return true;
   }
 
-  updated(changedProperties) {
-    const { helperText, type } = this;
+  /**
+   * The CSS class list for dropdown listbox
+   */
+  protected get _classes() {
+    const { disabled, size, type, invalid, open, warn } = this;
     const inline = type === DROPDOWN_TYPE.INLINE;
-    const { selectorItem } = this.constructor as typeof BXDropdown;
-    if (changedProperties.has('disabled')) {
-      const { disabled } = this;
-      // Propagate `disabled` attribute to descendants until `:host-context()` gets supported in all major browsers
-      forEach(this.querySelectorAll(selectorItem), (elem) => {
-        (elem as BXDropdownItem).disabled = disabled;
-      });
-    }
-    if (
-      (changedProperties.has('helperText') || changedProperties.has('type')) &&
-      helperText &&
-      inline
-    ) {
-      // eslint-disable-next-line no-console
-      console.warn(
-        'Found `helperText` property/attribute usage in inline mode, that is not supported, at:',
-        this
-      );
-    }
+
+    const selectedItemsCount = this.querySelectorAll(
+      (this.constructor as typeof CDSDropdown).selectorItemSelected
+    ).length;
+
+    return classMap({
+      [`${prefix}--dropdown`]: true,
+      [`${prefix}--list-box`]: true,
+      [`${prefix}--list-box--disabled`]: disabled,
+      [`${prefix}--list-box--inline`]: inline,
+      [`${prefix}--list-box--expanded`]: open,
+      [`${prefix}--list-box--${size}`]: size,
+      [`${prefix}--dropdown--invalid`]: invalid,
+      [`${prefix}--dropdown--warn`]: warn,
+      [`${prefix}--dropdown--inline`]: inline,
+      [`${prefix}--dropdown--selected`]: selectedItemsCount > 0,
+    });
   }
 
   render() {
     const {
-      colorScheme,
+      ariaLabel,
+      _classes: classes,
       disabled,
       helperText,
       invalid,
-      labelText,
+      invalidText,
       open,
       toggleLabelClosed,
       toggleLabelOpen,
-      size,
       type,
-      validityMessage,
+      warn,
+      warnText,
       _assistiveStatusText: assistiveStatusText,
       _shouldTriggerBeFocusable: shouldTriggerBeFocusable,
       _handleClickInner: handleClickInner,
       _handleKeydownInner: handleKeydownInner,
       _handleKeypressInner: handleKeypressInner,
       _handleSlotchangeHelperText: handleSlotchangeHelperText,
-      _handleSlotchangeLabelText: handleSlotchangeLabelText,
       _slotHelperTextNode: slotHelperTextNode,
-      _slotLabelTextNode: slotLabelTextNode,
     } = this;
     const inline = type === DROPDOWN_TYPE.INLINE;
-    const selectedItemsCount = this.querySelectorAll(
-      (this.constructor as typeof BXDropdown).selectorItemSelected
-    ).length;
-    const classes = classMap({
-      [`${prefix}--dropdown`]: true,
-      [`${prefix}--list-box`]: true,
-      [`${prefix}--list-box--${colorScheme}`]: colorScheme,
-      [`${prefix}--list-box--disabled`]: disabled,
-      [`${prefix}--list-box--inline`]: inline,
-      [`${prefix}--list-box--expanded`]: open,
-      [`${prefix}--list-box--${size}`]: size,
-      [`${prefix}--dropdown--invalid`]: invalid,
-      [`${prefix}--dropdown--inline`]: inline,
-      [`${prefix}--dropdown--selected`]: selectedItemsCount > 0,
-    });
-    const labelClasses = classMap({
-      [`${prefix}--label`]: true,
-      [`${prefix}--label--disabled`]: disabled,
-    });
+
     const helperClasses = classMap({
       [`${prefix}--form__helper-text`]: true,
       [`${prefix}--form__helper-text--disabled`]: disabled,
@@ -644,35 +709,25 @@ class BXDropdown extends ValidityMixin(
     const hasHelperText =
       helperText ||
       (slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0);
-    const hasLabelText =
-      labelText ||
-      (slotLabelTextNode && slotLabelTextNode.assignedNodes().length > 0);
-    const helper = !invalid
-      ? html`
-          <div
-            part="helper-text"
-            class="${helperClasses}"
-            ?hidden="${inline || !hasHelperText}">
-            <slot name="helper-text" @slotchange="${handleSlotchangeHelperText}"
-              >${helperText}</slot
-            >
-          </div>
-        `
-      : html`
-          <div part="validity-message" class=${`${prefix}--form-requirement`}>
-            <slot name="validity-message">${validityMessage}</slot>
-          </div>
-        `;
     const validityIcon = !invalid
       ? undefined
       : WarningFilled16({
           class: `${prefix}--list-box__invalid-icon`,
           'aria-label': toggleLabel,
         });
+    const warningIcon =
+      !warn || (invalid && warn)
+        ? undefined
+        : WarningAltFilled16({
+            class: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`,
+            'aria-label': toggleLabel,
+          });
+    const helperMessage = invalid ? invalidText : warn ? warnText : helperText;
     const menuBody = !open
       ? undefined
       : html`
           <div
+            aria-label="${ariaLabel}"
             id="menu-body"
             part="menu-body"
             class="${prefix}--list-box__menu"
@@ -682,14 +737,7 @@ class BXDropdown extends ValidityMixin(
           </div>
         `;
     return html`
-      <label
-        part="label-text"
-        class="${labelClasses}"
-        ?hidden="${!hasLabelText}">
-        <slot name="label-text" @slotchange="${handleSlotchangeLabelText}"
-          >${labelText}</slot
-        >
-      </label>
+      ${this._renderTitleLabel()}
       <div
         role="listbox"
         class="${classes}"
@@ -697,7 +745,6 @@ class BXDropdown extends ValidityMixin(
         @click=${handleClickInner}
         @keydown=${handleKeydownInner}
         @keypress=${handleKeypressInner}>
-        ${validityIcon}
         <div
           part="trigger-button"
           role="${ifDefined(!shouldTriggerBeFocusable ? undefined : 'button')}"
@@ -708,14 +755,21 @@ class BXDropdown extends ValidityMixin(
           aria-haspopup="listbox"
           aria-owns="menu-body"
           aria-controls="menu-body">
-          ${this._renderPrecedingTriggerContent()}${this._renderTriggerContent()}${this._renderFollowingTriggerContent()}
-          <div class="${iconContainerClasses}">
+          ${this._renderPrecedingLabel()}${this._renderLabel()}${validityIcon}${warningIcon}${this._renderFollowingLabel()}
+          <div id="trigger-caret" class="${iconContainerClasses}">
             ${ChevronDown16({ 'aria-label': toggleLabel })}
           </div>
         </div>
         ${menuBody}
       </div>
-      ${helper}
+      <div
+        part="helper-text"
+        class="${helperClasses}"
+        ?hidden="${(inline && !warn && !invalid) || !hasHelperText}">
+        <slot name="helper-text" @slotchange="${handleSlotchangeHelperText}"
+          >${helperMessage}</slot
+        >
+      </div>
       <div
         class="${prefix}--assistive-text"
         role="status"
@@ -782,6 +836,10 @@ class BXDropdown extends ValidityMixin(
     return `${prefix}-dropdown-toggled`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 
   /**
@@ -801,4 +859,4 @@ class BXDropdown extends ValidityMixin(
   }
 }
 
-export default BXDropdown;
+export default CDSDropdown;
diff --git a/packages/carbon-web-components/src/components/file-uploader/defs.ts b/packages/carbon-web-components/src/components/file-uploader/defs.ts
index f35614f1ca7..729a23a3134 100644
--- a/packages/carbon-web-components/src/components/file-uploader/defs.ts
+++ b/packages/carbon-web-components/src/components/file-uploader/defs.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
  */
 
 /**
- * The state of `<bx-file-uploader-item>`.
+ * The state of `<cds-file-uploader-item>`.
  */
 export enum FILE_UPLOADER_ITEM_STATE {
   /**
@@ -19,12 +19,12 @@ export enum FILE_UPLOADER_ITEM_STATE {
   /**
    * Upload complete.
    */
-  UPLOADED = 'uploaded',
+  COMPLETE = 'complete',
 
   /**
    * Editing.
    */
-  EDITING = 'editing',
+  EDIT = 'edit',
 }
 
 /**
@@ -32,17 +32,17 @@ export enum FILE_UPLOADER_ITEM_STATE {
  */
 export enum FILE_UPLOADER_ITEM_SIZE {
   /**
-   * Regular size.
+   * Small size.
    */
-  REGULAR = '',
+  SMALL = 'sm',
 
   /**
-   * Small size.
+   * Medium size.
    */
-  SMALL = 'sm',
+  MEDIUM = 'md',
 
   /**
-   * Size for form field.
+   * Large size.
    */
-  FIELD = 'field',
+  LARGE = 'lg',
 }
diff --git a/packages/carbon-web-components/src/components/file-uploader/demo-file-uploader.ts b/packages/carbon-web-components/src/components/file-uploader/demo-file-uploader.ts
new file mode 100644
index 00000000000..6e1bec3b208
--- /dev/null
+++ b/packages/carbon-web-components/src/components/file-uploader/demo-file-uploader.ts
@@ -0,0 +1,250 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+
+import { delay } from 'bluebird';
+import { prefix } from '../../globals/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './index';
+import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';
+import { BUTTON_SIZE } from '../button/button';
+import { FileData } from './stories/types';
+
+/**
+ * A class to manage file uploading states, like sending file contents to server.
+ * DEMONSTRATION-PURPOSE ONLY.
+ * Data/state handling in file uploading tends to involve lots of application-specific logics
+ * and thus abstracting everything in a library won't be a good return on investment
+ * vs. letting users copy code here and implement features that fit their needs.
+ */
+@customElement(`${prefix}-ce-demo-file-uploader`)
+export default class CDSCEDemoFileUploader extends LitElement {
+  /**
+   * The files being uploaded.
+   */
+  private _files: FileData[] = [];
+
+  /**
+   * Handles `cds-drop-container-changed` on `<cds-file-drop-container>`.
+   *
+   * @param event The event.
+   */
+  private _handleChange(event: CustomEvent) {
+    const { addedFiles } = event.detail;
+    const newFiles: FileData[] = addedFiles.map(
+      (item) =>
+        ({
+          id: Math.random().toString(36).slice(2),
+          file: item,
+          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,
+        } as FileData)
+    );
+    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;
+    if (multiple) {
+      this._files = files.concat(newFiles);
+      this.requestUpdate();
+      newFiles.forEach(simulateUpload, this);
+    } else if (addedFiles.length > 0) {
+      this._files = files.concat(newFiles[0]);
+      this.requestUpdate();
+      this._simulateUpload(newFiles[0]);
+    }
+  }
+
+  /**
+   * Handles `cds-file-uploader-item-deleted` on `<cds-file-uploader-item>`.
+   *
+   * @param event The event.
+   */
+  private _handleDelete(event: CustomEvent) {
+    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;
+    this._files = this._files.filter(({ id }) => idToDelete !== id);
+    this.requestUpdate();
+  }
+
+  /**
+   * Simulates updating file.
+   *
+   * @param data The data of the file being uploaded.
+   */
+  private async _simulateUpload(data: FileData) {
+    const { id, file } = data;
+    if (file.size > 524288) {
+      this._files = this._files.map((item) =>
+        id !== item.id
+          ? item
+          : {
+              ...item,
+              state: FILE_UPLOADER_ITEM_STATE.EDIT,
+              invalid: true,
+              errorSubject: 'File size exceeds limit',
+              errorBody:
+                '500kb max file size. Select a new file and try again.',
+            }
+      );
+      this.requestUpdate();
+    } else {
+      // Simulates network request time
+      const rand = Math.random() * 1000;
+      await delay(rand);
+      this._files = this._files.map((item) =>
+        id !== item.id
+          ? item
+          : {
+              ...item,
+              state: FILE_UPLOADER_ITEM_STATE.COMPLETE,
+            }
+      );
+      this.requestUpdate();
+      // Shows x icon after 1 second
+      await delay(1000);
+      this._files = this._files.map((item) =>
+        id !== item.id
+          ? item
+          : {
+              ...item,
+              state: FILE_UPLOADER_ITEM_STATE.EDIT,
+            }
+      );
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * The file types the file input should accept, separated by space.
+   */
+  @property()
+  accept = '';
+
+  /**
+   * `true` if the drop container should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  button = false;
+
+  /**
+   * Button kind.
+   */
+  @property({ attribute: 'button-kind' })
+  buttonKind = 'primary';
+
+  /**
+   * Button label.
+   */
+  @property({ attribute: 'button-label' })
+  buttonLabel = 'Add file';
+
+  /**
+   * `true` if the drop container should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Icon description.
+   */
+  @property({ attribute: 'icon-description' })
+  iconDescription = '';
+
+  /**
+   * The input name.
+   */
+  @property({ attribute: 'input-name' })
+  inputName = '';
+
+  /**
+   * The label description text.
+   */
+  @property({ attribute: 'label-description' })
+  labelDescription = '';
+
+  /**
+   * The label title.
+   */
+  @property({ attribute: 'label-title' })
+  labelTitle = '';
+
+  /**
+   * `true` if the drop container should accept more than one files at once.
+   * Note that even with `false` set here, user _can_ select multiple files one by one.
+   */
+  @property({ type: Boolean, reflect: true })
+  multiple = false;
+
+  /**
+   * The size of the button item.
+   */
+  @property({ reflect: true })
+  size = BUTTON_SIZE.MEDIUM;
+
+  /**
+   * The state of this file uploader item.
+   */
+  @property({ reflect: true, attribute: 'input-state' })
+  inputState = '';
+
+  render() {
+    const {
+      accept,
+      button,
+      buttonKind,
+      buttonLabel,
+      disabled,
+      labelDescription,
+      labelTitle,
+      multiple,
+      size,
+      inputState,
+      iconDescription,
+      _files: files,
+      _handleChange: handleChange,
+      _handleDelete: handleDelete,
+    } = this;
+    return html`
+      <cds-file-uploader
+        label-description="${ifDefined(labelDescription)}"
+        label-title="${ifDefined(labelTitle)}"
+        ?disabled="${disabled}">
+        ${!button
+          ? html` <cds-file-uploader-drop-container
+              accept="${ifDefined(accept)}"
+              ?multiple="${multiple}"
+              name="${ifDefined(this.inputName)}"
+              @cds-file-uploader-drop-container-changed="${handleChange}">
+              Drag and drop files here or click to upload
+            </cds-file-uploader-drop-container>`
+          : html` <cds-file-uploader-button
+              size="${ifDefined(size)}"
+              button-kind="${buttonKind}"
+              accept="${ifDefined(accept)}"
+              name="${ifDefined(this.inputName)}"
+              ?multiple="${multiple}"
+              @cds-file-uploader-button-changed="${handleChange}">
+              ${buttonLabel}
+            </cds-file-uploader-button>`}
+        ${files.map(
+          ({ id, invalid, file, state, errorSubject, errorBody }) => html`
+            <cds-file-uploader-item
+              data-file-id="${id}"
+              ?invalid="${invalid}"
+              state="${inputState || ifDefined(state)}"
+              icon-description="${ifDefined(iconDescription)}"
+              error-subject="${ifDefined(errorSubject)}"
+              error-body="${ifDefined(errorBody)}"
+              @cds-file-uploader-item-deleted="${handleDelete}">
+              ${file.name}
+            </cds-file-uploader-item>
+          `
+        )}
+      </cds-file-uploader>
+    `;
+  }
+}
diff --git a/packages/carbon-web-components/src/components/file-uploader/drop-container.ts b/packages/carbon-web-components/src/components/file-uploader/drop-container.ts
deleted file mode 100644
index 47750faf257..00000000000
--- a/packages/carbon-web-components/src/components/file-uploader/drop-container.ts
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import HostListenerMixin from '../../globals/mixins/host-listener';
-import HostListener from '../../globals/decorators/host-listener';
-import ifNonEmpty from '../../globals/directives/if-non-empty';
-import styles from './file-uploader.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
-
-const { prefix } = settings;
-
-/**
- * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.
- */
-const dropEffects = {
-  dragover: 'copy',
-  dragleave: 'move',
-};
-
-/**
- * File drop container.
- *
- * @element bx-file-drop-container
- * @fires bx-file-drop-container-changed The custom event fired when there is a user gesture to select files to upload.
- */
-@customElement(`${prefix}-file-drop-container`)
-class BXFileDropContainer extends HostListenerMixin(LitElement) {
-  /**
-   * `true` to show the active state of this UI.
-   */
-  private _active = false;
-
-  /**
-   * Handles user gesture to select files to upload.
-   *
-   * @param event The event.
-   */
-  private _handleChange(event: Event | DragEvent) {
-    const addedFiles = this._getFiles(event);
-    const { eventChange, selectorInput } = this
-      .constructor as typeof BXFileDropContainer;
-    this.dispatchEvent(
-      new CustomEvent(eventChange, {
-        bubbles: true,
-        composed: true,
-        detail: {
-          addedFiles,
-        },
-      })
-    );
-
-    const fileInput = this?.shadowRoot?.querySelector(selectorInput);
-    if (fileInput) {
-      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904
-    }
-  }
-
-  /**
-   * Handles `dragover`, `dragleave` and `drop` events.
-   *
-   * @param event The event.
-   */
-  @HostListener('dragover')
-  @HostListener('dragleave')
-  @HostListener('drop')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleDrag(event: DragEvent) {
-    event.preventDefault(); // Prevents page navigation upon dropping
-    if (this.disabled) {
-      return;
-    }
-    const { dataTransfer, type } = event;
-    const dropEffect = dropEffects[type];
-    if (dataTransfer && dropEffect) {
-      dataTransfer.dropEffect = dropEffect;
-    }
-    this._active = type === 'dragover';
-    if (type === 'drop') {
-      this._handleChange(event);
-    }
-    this.requestUpdate();
-  }
-
-  /**
-   * @param event The event.
-   * @returns The list of files user chose to upload.
-   */
-  private _getFiles(event: Event | DragEvent) {
-    const { files } =
-      (event.type === 'drop'
-        ? (event as DragEvent).dataTransfer
-        : (event.target as HTMLInputElement)) ?? {};
-    const { accept } = this;
-    if (!accept || !/^(change|drop)$/.test(event.type)) {
-      return Array.from(files ?? []);
-    }
-    const acceptedTypes = new Set(accept.split(' '));
-    return Array.prototype.filter.call(
-      files,
-      ({ name, type: mimeType = '' }) => {
-        const fileExtensionRegExp = /\.[^.]+$/;
-        const hasFileExtension = fileExtensionRegExp.test(name);
-        const [fileExtension] = !hasFileExtension
-          ? [undefined]
-          : fileExtensionRegExp.exec(name) ?? [];
-        return (
-          acceptedTypes.has(mimeType) ||
-          (fileExtension && acceptedTypes.has(fileExtension))
-        );
-      }
-    ) as File[];
-  }
-
-  /**
-   * The file types the file input should accept, separated by space.
-   */
-  @property()
-  accept = '';
-
-  /**
-   * `true` if this drop container should be disabled.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  /**
-   * `true` if this drop container should accept more than one files at once.
-   * Note that even with `false` set here, user _can_ select multiple files one by one.
-   */
-  @property({ type: Boolean, reflect: true })
-  multiple = false;
-
-  /**
-   * The shadow DOM slot to put this drop container in.
-   */
-  @property({ reflect: true })
-  slot = 'drop-container';
-
-  render() {
-    const {
-      accept,
-      disabled,
-      multiple,
-      _active: active,
-      _handleChange: handleChange,
-    } = this;
-    const labelClasses = classMap({
-      [`${prefix}--file-browse-btn`]: true,
-      [`${prefix}--file-browse-btn--disabled`]: disabled,
-    });
-    const dropareaClasses = classMap({
-      [`${prefix}--file__drop-container`]: true,
-      [`${prefix}--file__drop-container--drag-over`]: active,
-    });
-    return html`
-      <label class="${labelClasses}" for="file" tabindex="0">
-        <div class="${dropareaClasses}" role="button">
-          <slot></slot>
-          <input
-            id="file"
-            type="file"
-            class="${prefix}--file-input"
-            tabindex="-1"
-            accept="${ifNonEmpty(accept)}"
-            ?disabled="${disabled}"
-            ?multiple="${multiple}"
-            @change="${handleChange}" />
-        </div>
-      </label>
-    `;
-  }
-
-  /**
-   * The name of the custom event fired when there is a user gesture to select files to upload.
-   */
-  static get eventChange() {
-    return `${prefix}-file-drop-container-changed`;
-  }
-
-  /**
-   * A selector that will return the file `<input>`.
-   */
-  static get selectorInput() {
-    return `.${prefix}--file-input`;
-  }
-
-  static styles = styles;
-}
-
-export default BXFileDropContainer;
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts
new file mode 100644
index 00000000000..ae0d86726b9
--- /dev/null
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-button.ts
@@ -0,0 +1,210 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+import ifNonEmpty from '../../globals/directives/if-non-empty';
+import styles from './file-uploader.scss';
+import { BUTTON_KIND, BUTTON_SIZE } from '../button/defs';
+
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
+
+/**
+ * File uploader button .
+ *
+ * @element cds-file-uploader-container
+ * @fires cds-file-uploader-button-changed The custom event fired when there is a user gesture to select files to upload.
+ */
+@customElement(`${prefix}-file-uploader-button`)
+class CDSFileUploaderButton extends HostListenerMixin(LitElement) {
+  /**
+   * Handles `click` event on the button.
+   */
+  private _handleClick(event) {
+    event.target.value = null;
+    const { selectorInput } = this.constructor as typeof CDSFileUploaderButton;
+    this?.shadowRoot?.querySelector(selectorInput)?.setAttribute('value', '');
+    (this?.shadowRoot?.querySelector(selectorInput) as HTMLElement).click();
+  }
+
+  /**
+   * Handles `keydown` event on the button.
+   */
+  private _handleKeyDown(event) {
+    const { selectorInput } = this.constructor as typeof CDSFileUploaderButton;
+    if (event.key === 'Enter' || event.key === 'Space') {
+      this?.shadowRoot?.querySelector(selectorInput)?.setAttribute('value', '');
+      (this?.shadowRoot?.querySelector(selectorInput) as HTMLElement).click();
+    }
+  }
+
+  /**
+   * Handles user gesture to select files to upload.
+   *
+   * @param event The event.
+   */
+  private _handleChange(event: Event | DragEvent) {
+    const addedFiles = this._getFiles(event);
+    const { eventChange, selectorInput } = this
+      .constructor as typeof CDSFileUploaderButton;
+    this.dispatchEvent(
+      new CustomEvent(eventChange, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          addedFiles,
+        },
+      })
+    );
+
+    const fileInput = this?.shadowRoot?.querySelector(selectorInput);
+    if (fileInput) {
+      (fileInput as HTMLInputElement).value = '';
+    }
+  }
+
+  /**
+   * @param event The event.
+   * @returns The list of files user chose to upload.
+   */
+  private _getFiles(event: Event | DragEvent) {
+    const { files } =
+      (event.type === 'drop'
+        ? (event as DragEvent).dataTransfer
+        : (event.target as HTMLInputElement)) ?? {};
+    const { accept } = this;
+    if (!accept || !/^(change|drop)$/.test(event.type)) {
+      return Array.from(files ?? []);
+    }
+    const acceptedTypes = new Set(accept.split(' '));
+    return Array.prototype.filter.call(
+      files,
+      ({ name, type: mimeType = '' }) => {
+        const fileExtensionRegExp = /\.[^.]+$/;
+        const hasFileExtension = fileExtensionRegExp.test(name);
+        const [fileExtension] = !hasFileExtension
+          ? [undefined]
+          : fileExtensionRegExp.exec(name) ?? [];
+
+        return (
+          acceptedTypes.has(mimeType) ||
+          (fileExtension && acceptedTypes.has(fileExtension))
+        );
+      }
+    ) as File[];
+  }
+
+  /**
+   * Button kind.
+   */
+  @property({ reflect: true, attribute: 'button-kind' })
+  buttonKind = BUTTON_KIND.PRIMARY;
+
+  /**
+   * Button size.
+   */
+  @property({ reflect: true })
+  size = BUTTON_SIZE.MEDIUM;
+
+  /**
+   * The file types the file input should accept, separated by space.
+   */
+  @property()
+  accept = '';
+
+  /**
+   * `true` if this drop container should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * `true` if this drop container should accept more than one files at once.
+   * Note that even with `false` set here, user _can_ select multiple files one by one.
+   */
+  @property({ type: Boolean, reflect: true })
+  multiple = false;
+
+  /**
+   * The name of the input.
+   */
+  @property({ reflect: true })
+  name = '';
+
+  /**
+   * The shadow DOM slot to put this drop container in.
+   */
+  @property({ reflect: true })
+  slot = 'drop-container';
+
+  render() {
+    const {
+      accept,
+      disabled,
+      multiple,
+      name,
+      buttonKind,
+      size,
+      _handleChange: handleChange,
+    } = this;
+
+    const labelClasses = classMap({
+      [`${prefix}--file-browse-btn`]: true,
+      [`${prefix}--file-browse-btn--disabled`]: disabled,
+    });
+    const buttonClasses = classMap({
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--${buttonKind}`]: buttonKind,
+      [`${prefix}--layout--size-${size}`]: size,
+      [`${prefix}--btn--disabled`]: disabled,
+      [`${prefix}--btn--${size}`]: size,
+    });
+    return html`
+      <button
+        type="button"
+        class="${buttonClasses}"
+        @click="${this._handleClick}"
+        @keydown="${this._handleKeyDown}">
+        <slot></slot>
+      </button>
+      <label class="${labelClasses}" for="file"> </label>
+      <input
+        id="file"
+        type="file"
+        class="${prefix}--file-input"
+        tabindex="-1"
+        accept="${ifNonEmpty(accept)}"
+        ?disabled="${disabled}"
+        ?multiple="${multiple}"
+        name="${ifNonEmpty(name)}"
+        @change="${handleChange}" />
+    `;
+  }
+
+  /**
+   * The name of the custom event fired when there is a user gesture to select files to upload.
+   */
+  static get eventChange() {
+    return `${prefix}-file-uploader-button-changed`;
+  }
+
+  /**
+   * A selector that will return the file `<input>`.
+   */
+  static get selectorInput() {
+    return `.${prefix}--file-input`;
+  }
+
+  static styles = styles;
+}
+
+export default CDSFileUploaderButton;
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts
new file mode 100644
index 00000000000..421723d74d1
--- /dev/null
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-drop-container.ts
@@ -0,0 +1,209 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+import HostListener from '../../globals/decorators/host-listener';
+import ifNonEmpty from '../../globals/directives/if-non-empty';
+import styles from './file-uploader.scss';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+
+export { FORM_ELEMENT_COLOR_SCHEME as TILE_COLOR_SCHEME } from '../../globals/shared-enums';
+
+/**
+ * The value to set to `event.dataTransfer.dropEffect`, keyed by the event nane.
+ */
+const dropEffects = {
+  dragover: 'copy',
+  dragleave: 'move',
+};
+
+/**
+ * File uploader drop container.
+ *
+ * @element cds-file-uploader-drop-container
+ * @fires cds-file-uploader-drop-container-changed The custom event fired when there is a user gesture to select files to upload.
+ */
+@customElement(`${prefix}-file-uploader-drop-container`)
+class CDSFileUploaderDropContainer extends HostListenerMixin(LitElement) {
+  /**
+   * `true` to show the active state of this UI.
+   */
+  private _active = false;
+
+  /**
+   * Handles user gesture to select files to upload.
+   *
+   * @param event The event.
+   */
+  private _handleChange(event: Event | DragEvent) {
+    const { eventChange, selectorInput } = this
+      .constructor as typeof CDSFileUploaderDropContainer;
+    const addedFiles = this._getFiles(
+      event,
+      (this.shadowRoot?.querySelector(selectorInput) as HTMLInputElement).files
+    );
+
+    this.dispatchEvent(
+      new CustomEvent(eventChange, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          addedFiles,
+        },
+      })
+    );
+
+    const fileInput = this?.shadowRoot?.querySelector(selectorInput);
+    if (fileInput) {
+      (fileInput as HTMLInputElement).value = ''; // carbon-web-components#904
+    }
+  }
+
+  /**
+   * Handles `dragover`, `dragleave` and `drop` events.
+   *
+   * @param event The event.
+   */
+  @HostListener('dragover')
+  @HostListener('dragleave')
+  @HostListener('drop')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleDrag(event: DragEvent) {
+    event.preventDefault(); // Prevents page navigation upon dropping
+    if (this.disabled) {
+      return;
+    }
+    const { dataTransfer, type } = event;
+    const dropEffect = dropEffects[type];
+    if (dataTransfer && dropEffect) {
+      dataTransfer.dropEffect = dropEffect;
+    }
+    this._active = type === 'dragover';
+    if (type === 'drop') {
+      this._handleChange(event);
+    }
+    this.requestUpdate();
+  }
+
+  /**
+   * @param event The event.
+   * @returns The list of files user chose to upload.
+   */
+  private _getFiles(event, files) {
+    const { accept } = this;
+    if (!accept || !/^(change|drop)$/.test(event.type)) {
+      return Array.from(files ?? []);
+    }
+    const acceptedTypes = new Set(accept.split(' '));
+    return Array.prototype.filter.call(
+      files,
+      ({ name, type: mimeType = '' }) => {
+        const fileExtensionRegExp = /\.[^.]+$/;
+        const hasFileExtension = fileExtensionRegExp.test(name);
+        const [fileExtension] = !hasFileExtension
+          ? [undefined]
+          : fileExtensionRegExp.exec(name) ?? [];
+
+        return (
+          acceptedTypes.has(mimeType) ||
+          (fileExtension && acceptedTypes.has(fileExtension))
+        );
+      }
+    ) as File[];
+  }
+
+  /**
+   * The file types the file input should accept, separated by space.
+   */
+  @property()
+  accept = '';
+
+  /**
+   * `true` if this drop container should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * `true` if this drop container should accept more than one files at once.
+   * Note that even with `false` set here, user _can_ select multiple files one by one.
+   */
+  @property({ type: Boolean, reflect: true })
+  multiple = false;
+
+  /**
+   * The name of the input.
+   */
+  @property({ reflect: true })
+  name = '';
+
+  /**
+   * The shadow DOM slot to put this drop container in.
+   */
+  @property({ reflect: true })
+  slot = 'drop-container';
+
+  render() {
+    const {
+      accept,
+      disabled,
+      multiple,
+      name,
+      _active: active,
+      _handleChange: handleChange,
+    } = this;
+    const labelClasses = classMap({
+      [`${prefix}--file-browse-btn`]: true,
+      [`${prefix}--file-browse-btn--disabled`]: disabled,
+    });
+    const dropareaClasses = classMap({
+      [`${prefix}--file__drop-container`]: true,
+      [`${prefix}--file__drop-container--drag-over`]: active,
+    });
+    return html`
+      <label class="${labelClasses}" for="file" tabindex="0">
+        <div class="${dropareaClasses}" role="button">
+          <slot></slot>
+          <input
+            id="file"
+            type="file"
+            name="${ifNonEmpty(name)}"
+            class="${prefix}--file-input"
+            tabindex="-1"
+            accept="${ifNonEmpty(accept)}"
+            ?disabled="${disabled}"
+            ?multiple="${multiple}"
+            @change="${handleChange}" />
+        </div>
+      </label>
+    `;
+  }
+
+  /**
+   * The name of the custom event fired when there is a user gesture to select files to upload.
+   */
+  static get eventChange() {
+    return `${prefix}-file-uploader-drop-container-changed`;
+  }
+
+  /**
+   * A selector that will return the file `<input>`.
+   */
+  static get selectorInput() {
+    return `.${prefix}--file-input`;
+  }
+
+  static styles = styles;
+}
+
+export default CDSFileUploaderDropContainer;
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts
index 34747baa19e..2a3c7a92b9a 100644
--- a/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-item.ts
@@ -7,11 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
 import Close16 from '@carbon/icons/lib/close/16';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import { LOADING_TYPE } from '../loading/loading';
 import { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE } from './defs';
 import styles from './file-uploader.scss';
@@ -19,21 +20,19 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { FILE_UPLOADER_ITEM_SIZE, FILE_UPLOADER_ITEM_STATE };
 
-const { prefix } = settings;
-
 /**
  * File uploader item.
  *
- * @element bx-file-uploader-item
+ * @element cds-file-uploader-item
  * @slot validity-message The validity message.
  * @slot validity-message-supplement The supplemental validity message.
- * @fires bx-file-uploader-item-beingdeleted
+ * @fires cds-file-uploader-item-beingdeleted
  *   The custom event fired before this file uploader item is being deleted upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of deleting this file uploader item.
- * @fires bx-file-uploader-item-deleted - The custom event fired after this file uploader item is deleted upon a user gesture.
+ * @fires cds-file-uploader-item-deleted - The custom event fired after this file uploader item is deleted upon a user gesture.
  */
 @customElement(`${prefix}-file-uploader-item`)
-class BXFileUploaderItem extends LitElement {
+class CDSFileUploaderItem extends LitElement {
   /**
    * Handles `click` event on the delete button.
    */
@@ -44,7 +43,7 @@ class BXFileUploaderItem extends LitElement {
       composed: true,
     };
     const { eventBeforeDelete, eventDelete } = this
-      .constructor as typeof BXFileUploaderItem;
+      .constructor as typeof CDSFileUploaderItem;
     if (this.dispatchEvent(new CustomEvent(eventBeforeDelete, init))) {
       this.dispatchEvent(new CustomEvent(eventDelete, init));
     }
@@ -55,7 +54,7 @@ class BXFileUploaderItem extends LitElement {
    */
   private _renderEditing() {
     const {
-      deleteAssistiveText,
+      iconDescription,
       invalid,
       _handleClickDeleteButton: handleClickDeleteButton,
     } = this;
@@ -65,7 +64,7 @@ class BXFileUploaderItem extends LitElement {
         : WarningFilled16({ class: `${prefix}--file-invalid` })}
       <button
         type="button"
-        aria-label="${deleteAssistiveText}"
+        aria-label="${iconDescription}"
         class="${prefix}--file-close"
         @click="${handleClickDeleteButton}">
         ${Close16()}
@@ -77,11 +76,11 @@ class BXFileUploaderItem extends LitElement {
    * @returns The content showing this file uploader's file uploading status as in progress.
    */
   private _renderUploading() {
-    const { uploadingAssistiveText } = this;
+    const { iconDescription } = this;
     return html`
-      <bx-loading
-        assistive-text="${uploadingAssistiveText}"
-        type="${LOADING_TYPE.SMALL}"></bx-loading>
+      <cds-loading
+        assistive-text="${iconDescription}"
+        type="${LOADING_TYPE.SMALL}"></cds-loading>
     `;
   }
 
@@ -89,10 +88,10 @@ class BXFileUploaderItem extends LitElement {
    * @returns The content showing this file uploader's file uploading status as complete.
    */
   private _renderUploaded() {
-    const { uploadedAssistiveText } = this;
+    const { iconDescription } = this;
     return CheckmarkFilled16({
       class: `${prefix}--file-complete`,
-      'aria-label': uploadedAssistiveText,
+      'aria-label': iconDescription,
     });
   }
 
@@ -102,11 +101,11 @@ class BXFileUploaderItem extends LitElement {
   private _renderStatus() {
     const { state } = this;
     switch (state) {
-      case FILE_UPLOADER_ITEM_STATE.EDITING:
+      case FILE_UPLOADER_ITEM_STATE.EDIT:
         return this._renderEditing();
       case FILE_UPLOADER_ITEM_STATE.UPLOADING:
         return this._renderUploading();
-      case FILE_UPLOADER_ITEM_STATE.UPLOADED:
+      case FILE_UPLOADER_ITEM_STATE.COMPLETE:
         return this._renderUploaded();
       default:
         return undefined;
@@ -116,8 +115,8 @@ class BXFileUploaderItem extends LitElement {
   /**
    * The `aria-label` attribute for the icon to delete this file uploader item.
    */
-  @property({ attribute: 'delete-assistive-text' })
-  deleteAssistiveText = 'Delete this file';
+  @property({ attribute: 'icon-description' })
+  iconDescription = 'Delete this file';
 
   /**
    * Controls the invalid state and visibility of the `validityMessage`.
@@ -129,7 +128,7 @@ class BXFileUploaderItem extends LitElement {
    * The size of this file uploader item.
    */
   @property({ reflect: true })
-  size = FILE_UPLOADER_ITEM_SIZE.REGULAR;
+  size = FILE_UPLOADER_ITEM_SIZE.MEDIUM;
 
   /**
    * The state of this file uploader item.
@@ -138,39 +137,33 @@ class BXFileUploaderItem extends LitElement {
   state = FILE_UPLOADER_ITEM_STATE.UPLOADING;
 
   /**
-   * The `aria-label` attribute for the icon to indicate file uploading is in progress.
-   */
-  @property({ attribute: 'uploading-assistive-text' })
-  uploadingAssistiveText = 'Uploading';
-
-  /**
-   * The `aria-label` attribute for the icon to indicate file uploading is complete.
+   * The error subject text.
    */
-  @property({ attribute: 'uploaded-assistive-text' })
-  uploadedAssistiveText = 'Uploaded';
+  @property({ attribute: 'error-subject' })
+  errorSubject = '';
 
   /**
-   * The validity message.
+   * The error body text
    */
-  @property({ attribute: 'validity-message' })
-  validityMessage = '';
+  @property({ attribute: 'error-body' })
+  errorBody = '';
 
   render() {
-    const { validityMessage } = this;
-    return html`
-      <p class="${prefix}--file-filename"><slot></slot></p>
+    const { invalid, errorSubject, errorBody } = this;
+    return html` <p class="${prefix}--file-filename"><slot></slot></p>
       <span class="${prefix}--file__state-container"
         >${this._renderStatus()}</span
       >
-      <div class="${prefix}--form-requirement">
-        <div class="${prefix}--form-requirement__title">
-          <slot name="validity-message">${validityMessage}</slot>
-        </div>
-        <p class="${prefix}--form-requirement__supplement">
-          <slot name="validity-message-supplement"></slot>
+      <div
+        class="${prefix}--form-requirement"
+        ?hidden="${!invalid && !errorSubject}">
+        <div class="${prefix}--form-requirement__title">${errorSubject}</div>
+        <p
+          class="${prefix}--form-requirement__supplement"
+          ?hidden="${!errorBody}">
+          ${errorBody}
         </p>
-      </div>
-    `;
+      </div>`;
   }
 
   /**
@@ -191,4 +184,4 @@ class BXFileUploaderItem extends LitElement {
   static styles = styles;
 }
 
-export default BXFileUploaderItem;
+export default CDSFileUploaderItem;
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-skeleton.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader-skeleton.ts
new file mode 100644
index 00000000000..b3fc90f4c0e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-skeleton.ts
@@ -0,0 +1,35 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import '../skeleton-text/skeleton-text';
+import { SKELETON_TEXT_TYPE } from '../skeleton-text/skeleton-text';
+import '../button/button-skeleton';
+
+/**
+ * The File uploader skeleton.
+ *
+ * @element cds-file-uploader-skeleton
+ */
+@customElement(`${prefix}-file-uploader-skeleton`)
+class CDSFileUploaderSkeleton extends LitElement {
+  render() {
+    return html`
+      <cds-skeleton-text
+        type="${SKELETON_TEXT_TYPE.HEADING}"
+        width="100px"></cds-skeleton-text>
+      <cds-skeleton-text width="225px"></cds-skeleton-text>
+      <cds-button-skeleton></cds-button-skeleton>
+    `;
+  }
+}
+
+export default CDSFileUploaderSkeleton;
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx b/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
index fea329540da..4a982ad96c2 100644
--- a/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # File uploader
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/file-uploader)
 
 File uploaders allow users to select one or more files to upload to a specific
 location.
@@ -28,24 +28,32 @@ import '@carbon/web-components/es/components/file-uploader/index.js';
 ### HTML
 
 ```html
-<bx-file-uploader
-  helper-text="Only .jpg and .png files. 500kb max file size"
-  label-text="Account photo"
+<cds-file-uploader
+  label-description="Only .jpg and .png files. 500kb max file size"
+  label-title="Account photo"
 >
-  <bx-file-drop-container accept="image/jpeg image/png" multiple="true">
+  <cds-file-uploader-button accept="image/jpeg image/png" multiple>
     Drag and drop files here or click to upload
-  </bx-file-drop-container>
-</bx-file-uploader>
+  </cds-file-drop-container>
+</cds-file-uploader>
 ```
 
-## `<bx-file-uploader>` attributes, properties and events
+## `<cds-file-uploader>` attributes, properties and events
 
-<Props of="bx-file-uploader" />
+<Props of="cds-file-uploader" />
 
-## `<bx-file-uploader-item>` attributes, properties and events
+## `<cds-file-uploader-drop-container>` attributes, properties and events
+
+<Props of="cds-file-uploader-drop-container" />
+
+## `<cds-file-uploader-button>` attributes, properties and events
+
+<Props of="cds-file-uploader-button" />
+
+## `<cds-file-uploader-item>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-file-uploader-item invalid>`) and `false` means not setting the attribute
-(e.g. `<bx-file-uploader-item>` without `invalid` attribute).
+`<cds-file-uploader-item invalid>`) and `false` means not setting the attribute
+(e.g. `<cds-file-uploader-item>` without `invalid` attribute).
 
-<Props of="bx-file-uploader-item" />
+<Props of="cds-file-uploader-item" />
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts
index fc6fbd8cb24..b27fe356123 100644
--- a/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader-story.ts
@@ -1,294 +1,171 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import { delay } from 'bluebird';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
-import './file-uploader';
-import './drop-container';
-import {
-  FILE_UPLOADER_ITEM_SIZE,
-  FILE_UPLOADER_ITEM_STATE,
-} from './file-uploader-item';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
+import './index';
+import './demo-file-uploader';
+import { FILE_UPLOADER_ITEM_STATE } from './file-uploader-item';
+import { BUTTON_KIND, BUTTON_SIZE } from '../button/button';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import { FileData } from './stories/types';
 import storyDocs from './file-uploader-story.mdx';
 
-const sizes = {
-  'Regular size': null,
-  [`Small size (${FILE_UPLOADER_ITEM_SIZE.SMALL})`]:
-    FILE_UPLOADER_ITEM_SIZE.SMALL,
-  [`Size for form field (${FILE_UPLOADER_ITEM_SIZE.FIELD})`]:
-    FILE_UPLOADER_ITEM_SIZE.FIELD,
+const kind = {
+  [`Primary button (${BUTTON_KIND.PRIMARY})`]: BUTTON_KIND.PRIMARY,
+  [`Secondary button (${BUTTON_KIND.SECONDARY})`]: BUTTON_KIND.SECONDARY,
+  [`Tertiary button (${BUTTON_KIND.TERTIARY})`]: BUTTON_KIND.TERTIARY,
+  [`Danger primary button (${BUTTON_KIND.DANGER_PRIMARY})`]:
+    BUTTON_KIND.DANGER_PRIMARY,
+  [`Danger button (${BUTTON_KIND.DANGER})`]: BUTTON_KIND.DANGER,
+  [`Ghost button (${BUTTON_KIND.GHOST})`]: BUTTON_KIND.GHOST,
 };
 
-/**
- * A class to manage file uploading states, like sending file contents to server.
- * DEMONSTRATION-PURPOSE ONLY.
- * Data/state handling in file uploading tends to involve lots of application-specific logics
- * and thus abstracting everything in a library won't be a good return on investment
- * vs. letting users copy code here and implement features that fit their needs.
- */
-class BXCEDemoFileUploader extends LitElement {
-  /**
-   * The files being uploaded.
-   */
-  private _files: FileData[] = [];
+const states = {
+  [`Upload in progress (${FILE_UPLOADER_ITEM_STATE.UPLOADING})`]:
+    FILE_UPLOADER_ITEM_STATE.UPLOADING,
+  [`Upload complete (${FILE_UPLOADER_ITEM_STATE.COMPLETE})`]:
+    FILE_UPLOADER_ITEM_STATE.COMPLETE,
+  [`Edit upload (${FILE_UPLOADER_ITEM_STATE.EDIT})`]:
+    FILE_UPLOADER_ITEM_STATE.EDIT,
+};
 
-  /**
-   * Handles `bx-drop-container-changed` on `<bx-file-drop-container>`.
-   *
-   * @param event The event.
-   */
-  private _handleChange(event: CustomEvent) {
-    const { addedFiles } = event.detail;
-    const newFiles: FileData[] = addedFiles.map(
-      (item) =>
-        ({
-          id: Math.random().toString(36).slice(2),
-          file: item,
-          state: FILE_UPLOADER_ITEM_STATE.UPLOADING,
-        } as FileData)
-    );
-    const { multiple, _files: files, _simulateUpload: simulateUpload } = this;
-    if (multiple) {
-      this._files = files.concat(newFiles);
-      this.requestUpdate();
-      newFiles.forEach(simulateUpload, this);
-    } else if (addedFiles.length > 0) {
-      this._files = files.concat(newFiles[0]);
-      this.requestUpdate();
-      this._simulateUpload(newFiles[0]);
-    }
-  }
+const sizes = {
+  [`sm (${BUTTON_SIZE.SMALL})`]: BUTTON_SIZE.SMALL,
+  [`md (${BUTTON_SIZE.MEDIUM})`]: BUTTON_SIZE.MEDIUM,
+  [`lg (${BUTTON_SIZE.LARGE})`]: BUTTON_SIZE.LARGE,
+};
 
-  /**
-   * Handles `bx-file-uploader-item-deleted` on `<bx-file-uploader-item>`.
-   *
-   * @param event The event.
-   */
-  private _handleDelete(event: CustomEvent) {
-    const { fileId: idToDelete } = (event.target as HTMLElement).dataset;
-    this._files = this._files.filter(({ id }) => idToDelete !== id);
-    this.requestUpdate();
-  }
+export const Default = () => {
+  return html`
+    <cds-ce-demo-file-uploader
+      accept="image/jpeg"
+      button
+      label-description="Max file size is 500mb. Only .jpg files are supported."
+      label-title="Upload files">
+    </cds-ce-demo-file-uploader>
+  `;
+};
 
-  /**
-   * Simulates updating file.
-   *
-   * @param data The data of the file being uploaded.
-   */
-  private async _simulateUpload(data: FileData) {
-    const { id, file } = data;
-    if (file.size > 524288) {
-      this._files = this._files.map((item) =>
-        id !== item.id
-          ? item
-          : {
-              ...item,
-              state: FILE_UPLOADER_ITEM_STATE.EDITING,
-              invalid: true,
-              validityMessage: 'File size exceeds limit',
-              supplementalValidityMessage:
-                '500kb max file size. Select a new file and try again.',
-            }
-      );
-      this.requestUpdate();
-    } else {
-      // Simulates network request time
-      const rand = Math.random() * 1000;
-      await delay(rand);
-      this._files = this._files.map((item) =>
-        id !== item.id
-          ? item
-          : {
-              ...item,
-              state: FILE_UPLOADER_ITEM_STATE.UPLOADED,
-            }
-      );
-      this.requestUpdate();
-      // Shows x icon after 1 second
-      await delay(1000);
-      this._files = this._files.map((item) =>
-        id !== item.id
-          ? item
-          : {
-              ...item,
-              state: FILE_UPLOADER_ITEM_STATE.EDITING,
-            }
-      );
-      this.requestUpdate();
-    }
-  }
+Default.storyName = 'Default';
 
-  /**
-   * The file types the file input should accept, separated by space.
-   */
-  @property()
-  accept = '';
+export const DragAndDropUploadContainerExampleApplication = () => {
+  return html`
+    <cds-ce-demo-file-uploader
+      accept="image/jpeg image/png"
+      label-description="Max file size is 500kb. Supported file types are .jpg and .png."
+      label-title="Upload files">
+    </cds-ce-demo-file-uploader>
+  `;
+};
 
-  /**
-   * `true` if the drop container should be disabled.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
+DragAndDropUploadContainerExampleApplication.storyName =
+  'Drag And Drop Upload Container Example Application';
 
-  /**
-   * The helper text.
-   */
-  @property({ attribute: 'helper-text' })
-  helperText = '';
+export const FileUploaderDropContainer = () => {
+  return html`
+    <cds-file-uploader-drop-container accept="image/jpeg image/png">
+      Drag and drop files here or click to upload
+    </cds-file-uploader-drop-container>
+  `;
+};
 
-  /**
-   * The label text.
-   */
-  @property({ attribute: 'label-text' })
-  labelText = '';
+FileUploaderDropContainer.storyName = 'File Uploader Drop Container';
 
-  /**
-   * `true` if the drop container should accept more than one files at once.
-   * Note that even with `false` set here, user _can_ select multiple files one by one.
-   */
-  @property({ type: Boolean, reflect: true })
-  multiple = false;
+export const FileUploaderItem = () => {
+  return html`
+    <cds-file-uploader-item state="${FILE_UPLOADER_ITEM_STATE.EDIT}">
+      README.md
+    </cds-file-uploader-item>
+  `;
+};
 
-  /**
-   * The size of the file uploader items.
-   */
-  @property({ reflect: true })
-  size = FILE_UPLOADER_ITEM_SIZE.REGULAR;
+FileUploaderItem.storyName = 'File Uploader Item';
 
-  render() {
-    const {
-      accept,
-      disabled,
-      helperText,
-      labelText,
-      multiple,
-      size,
-      _files: files,
-      _handleChange: handleChange,
-      _handleDelete: handleDelete,
-    } = this;
-    return html`
-      <bx-file-uploader
-        helper-text="${ifNonNull(helperText)}"
-        label-text="${ifNonNull(labelText)}">
-        <bx-file-drop-container
-          accept="${ifNonNull(accept)}"
-          ?disabled="${disabled}"
-          ?multiple="${multiple}"
-          @bx-file-drop-container-changed="${handleChange}">
-          Drag and drop files here or click to upload
-        </bx-file-drop-container>
-        ${files.map(
-          ({
-            id,
-            invalid,
-            file,
-            state,
-            supplementalValidityMessage,
-            validityMessage,
-          }) => html`
-            <bx-file-uploader-item
-              data-file-id="${id}"
-              ?invalid="${invalid}"
-              size="${ifNonNull(size)}"
-              state="${ifNonNull(state)}"
-              validity-message="${ifNonNull(validityMessage)}"
-              @bx-file-uploader-item-deleted="${handleDelete}">
-              ${file.name}
-              <span slot="validity-message-supplement"
-                >${supplementalValidityMessage}</span
-              >
-            </bx-file-uploader-item>
-          `
-        )}
-      </bx-file-uploader>
-    `;
-  }
-}
+export const Skeleton = () => {
+  return html` <cds-file-uploader-skeleton></cds-file-uploader-skeleton> `;
+};
 
-const defineDemoFileUploader = (() => {
-  let hasDemoFileUploaderDefined;
-  return () => {
-    if (!hasDemoFileUploaderDefined) {
-      hasDemoFileUploaderDefined = true;
-      const ce = customElements;
-      // Prevents `web-component-analyzer` from harvesting `<bx-ce-demo-data-table>`
-      ce.define('bx-ce-demo-file-uploader', BXCEDemoFileUploader);
-    }
-  };
-})();
+export const Playground = (args) => {
+  const {
+    buttonKind,
+    buttonLabel,
+    disabled,
+    state,
+    iconDescription,
+    labelDescription,
+    labelTitle,
+    multiple,
+    onDelete,
+    onChange,
+    name,
+    size,
+  } = args?.[`${prefix}-file-uploader`] ?? {};
 
-export const Default = (args) => {
-  const { helperText, labelText } = args?.['bx-file-uploader'] ?? {};
-  const { accept, disabled, multiple } = args?.['bx-file-drop-container'] ?? {};
-  const { size, disableDelete, onBeforeDelete, onDelete } =
-    args?.['bx-file-uploader-item'] ?? {};
-  const handleBeforeDelete = (event: CustomEvent) => {
-    onBeforeDelete(event);
-    if (disableDelete) {
-      event.preventDefault();
-    }
-  };
-  defineDemoFileUploader();
   return html`
-    <bx-ce-demo-file-uploader
-      accept="${ifNonNull(accept)}"
+    <cds-ce-demo-file-uploader
+      button-kind="${buttonKind}"
+      button-label="${buttonLabel}"
+      input-state="${state}"
+      icon-description="${iconDescription}"
+      accept="image/jpeg"
+      button
       ?disabled="${disabled}"
-      helper-text="${ifNonNull(helperText)}"
-      label-text="${ifNonNull(labelText)}"
+      label-description="${ifDefined(labelDescription)}"
+      label-title="${ifDefined(labelTitle)}"
       ?multiple="${multiple}"
-      size="${ifNonNull(size)}"
-      @bx-file-uploader-item-beingdeleted="${handleBeforeDelete}"
-      @bx-file-uploader-item-deleted="${onDelete}">
-    </bx-ce-demo-file-uploader>
+      size="${ifDefined(size)}"
+      input-name="${ifDefined(name)}"
+      @cds-file-uploader-item-deleted="${onDelete}"
+      @cds-file-uploader-drop-container-changed="${onChange}">
+    </cds-ce-demo-file-uploader>
   `;
 };
 
-Default.storyName = 'Default';
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-file-uploader`]: () => ({
+      buttonKind: select(
+        'Button kind (button-kind)',
+        kind,
+        BUTTON_KIND.PRIMARY
+      ),
+      buttonLabel: textNullable('Button Label', 'Add file'),
+      disabled: boolean('Disabled (disabled)', false),
+      state: select(
+        'File uploader item state (state)',
+        states,
+        FILE_UPLOADER_ITEM_STATE.UPLOADING
+      ),
+      iconDescription: textNullable(
+        'Icon description (icon-description)',
+        'Delete file'
+      ),
+      labelDescription: textNullable(
+        'Label description (label-description)',
+        'Max file size is 500mb. Only .jpg files are supported.'
+      ),
+      labelTitle: textNullable('Label title (label-title)', 'Upload files'),
+      name: textNullable('Input name (name)', ''),
+      onDelete: action('cds-file-uploader-item-deleted'),
+      onChange: action('cds-drop-container-changed'),
+      multiple: boolean('Multiple (multiple)', false),
+      size: select('Size (size)', sizes, BUTTON_SIZE.MEDIUM),
+    }),
+  },
+};
 
 export default {
   title: 'Components/File uploader',
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-file-uploader': () => ({
-        helperText: textNullable(
-          'Helper text (helper-text)',
-          'Only .jpg and .png files. 500kb max file size'
-        ),
-        labelText: textNullable('Label text (label-text)', 'Account photo'),
-      }),
-      'bx-file-drop-container': () => ({
-        accept: textNullable(
-          'Accepted MIME types or file extensions (accept)',
-          'image/jpeg image/png'
-        ),
-        disabled: boolean('Disabled (disabled)', false),
-        multiple: boolean(
-          'Supports uploading multiple files at once (multiple)',
-          true
-        ),
-      }),
-      'bx-file-uploader-item': () => ({
-        size: select('Filename height (size)', sizes, null),
-        disableDelete: boolean(
-          'Disable user-initiated delete action (Call event.preventDefault() in bx-file-uploader-item-beingdeleted event)',
-          false
-        ),
-        onBeforeDelete: action('bx-file-uploader-item-beingdeleted'),
-        onDelete: action('bx-file-uploader-item-deleted'),
-      }),
-    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader.scss b/packages/carbon-web-components/src/components/file-uploader/file-uploader.scss
index 2b700465d82..acb6828447f 100644
--- a/packages/carbon-web-components/src/components/file-uploader/file-uploader.scss
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader.scss
@@ -1,11 +1,19 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 'carbon-components/scss/components/file-uploader/file-uploader';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/file-uploader/file-uploader' as *;
+@use '@carbon/styles/scss/layout' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include file-uploader;
 
 :host(#{$prefix}-file-uploader-shell) {
   @extend .#{$prefix}--form-item;
@@ -20,31 +28,41 @@
 :host(#{$prefix}-file-uploader-item) {
   @extend .#{$prefix}--file__selected-file;
 
-  &[invalid] {
-    @extend .#{$prefix}--file__selected-file--invalid;
-
-    .#{$prefix}--form-requirement__title,
-    .#{$prefix}--form-requirement__supplement {
-      @include type-style('label-01');
+  .#{$prefix}--file-filename {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
 
-      padding: 0 $carbon--spacing-05;
-    }
+  .#{$prefix}--form-requirement[hidden] {
+    display: none;
+  }
+}
 
-    .#{$prefix}--form-requirement {
-      color: $text-error;
-      display: block;
-    }
+:host(#{$prefix}-file-uploader-item[invalid]) {
+  @extend .#{$prefix}--file__selected-file--invalid;
 
-    .#{$prefix}--form-requirement__supplement {
-      color: $text-01;
-    }
+  .#{$prefix}--form-requirement__supplement {
+    margin: 0;
   }
+}
+
+:host(#{$prefix}-file-uploader-item[size='md']) {
+  @extend .#{$prefix}--file__selected-file--md;
+}
+
+:host(#{$prefix}-file-uploader-item[size='sm']) {
+  @extend .#{$prefix}--file__selected-file--sm;
+}
+
+:host(#{$prefix}-file-uploader) {
+  @include emit-layout-tokens();
 
-  &[size='field'] {
-    min-height: $container-03;
+  .#{$prefix}--label-description,
+  .#{$prefix}--file--label {
+    margin-top: 0;
   }
 
-  &[size='sm'] {
-    min-height: $container-02;
+  .#{$prefix}--file-container {
+    margin-top: $spacing-03;
   }
 }
diff --git a/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts b/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts
index 4b86a0685d2..998c789d860 100644
--- a/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts
+++ b/packages/carbon-web-components/src/components/file-uploader/file-uploader.ts
@@ -7,42 +7,70 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './file-uploader.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * The shell UI for file uploader.
  *
- * @element bx-file-uploader
- * @slot helper-text The helper text.
- * @slot label-text The label text.
+ * @element cds-file-uploader
+ * @slot label-title.
+ * @slot lebel-description.
  */
 @customElement(`${prefix}-file-uploader`)
-class BXFileUploader extends LitElement {
+class CDSFileUploader extends LitElement {
+  /**
+   * `true` if the file uploader should disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
   /**
-   * The helper text.
+   * The description text.
    */
-  @property({ attribute: 'helper-text' })
-  helperText = '';
+  @property({ attribute: 'label-description' })
+  labelDescription = '';
 
   /**
-   * The label text.
+   * The label title.
    */
-  @property({ attribute: 'label-text' })
-  labelText = '';
+  @property({ attribute: 'label-title' })
+  labelTitle = '';
+
+  updated(changedProperties) {
+    if (changedProperties.has('disabled')) {
+      const { selectorUploaderItem } = this
+        .constructor as typeof CDSFileUploader;
+      const uploaderItem = this.querySelector(
+        selectorUploaderItem
+      ) as CDSFileUploader;
+      uploaderItem.disabled = this.disabled;
+    }
+  }
 
   render() {
-    const { helperText, labelText } = this;
+    const { disabled, labelDescription, labelTitle } = this;
+
+    const labelClasses = classMap({
+      [`${prefix}--file--label`]: true,
+      [`${prefix}--label-description--disabled`]: disabled,
+    });
+
+    const descriptionClasses = classMap({
+      [`${prefix}--label-description`]: true,
+      [`${prefix}--label-description--disabled`]: disabled,
+    });
+
     return html`
-      <strong class="${prefix}--file--label"
-        ><slot name="label-text">${labelText}</slot></strong
-      >
-      <p class="${prefix}--label-description">
-        <slot name="helperText-text">${helperText}</slot>
+      <p class="${labelClasses}">
+        <slot name="label-title">${labelTitle}</slot>
+      </p>
+      <p class="${descriptionClasses}">
+        <slot name="label-description">${labelDescription}</slot>
       </p>
       <slot name="drop-container"></slot>
       <div class="${prefix}--file-container">
@@ -51,7 +79,14 @@ class BXFileUploader extends LitElement {
     `;
   }
 
+  /**
+   * A selector that will return the `<input>` to enter starting date.
+   */
+  static get selectorUploaderItem() {
+    return `${prefix}-file-uploader-button,${prefix}-file-uploader-drop-container`;
+  }
+
   static styles = styles;
 }
 
-export default BXFileUploader;
+export default CDSFileUploader;
diff --git a/packages/carbon-web-components/src/components/file-uploader/index.ts b/packages/carbon-web-components/src/components/file-uploader/index.ts
index 778b591cd73..84ae026ea8c 100644
--- a/packages/carbon-web-components/src/components/file-uploader/index.ts
+++ b/packages/carbon-web-components/src/components/file-uploader/index.ts
@@ -1,12 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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 './drop-container';
 import './file-uploader';
 import './file-uploader-item';
+import './file-uploader-drop-container';
+import './file-uploader-button';
+import './file-uploader-skeleton';
diff --git a/packages/carbon-web-components/src/components/file-uploader/stories/types.ts b/packages/carbon-web-components/src/components/file-uploader/stories/types.ts
index 71df3c1f6d0..b2c115c136b 100644
--- a/packages/carbon-web-components/src/components/file-uploader/stories/types.ts
+++ b/packages/carbon-web-components/src/components/file-uploader/stories/types.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -34,12 +34,12 @@ export interface FileData {
   state: FILE_UPLOADER_ITEM_STATE;
 
   /**
-   * The error message.
+   * The subject error message.
    */
-  validityMessage?: string;
+  errorSubject?: string;
 
   /**
-   * The supplemental error message.
+   * The body error message.
    */
-  supplementalValidityMessage?: string;
+  errorBody?: string;
 }
diff --git a/packages/carbon-web-components/src/components/floating-menu/defs.ts b/packages/carbon-web-components/src/components/floating-menu/defs.ts
index d878bbc933a..95277146af7 100644
--- a/packages/carbon-web-components/src/components/floating-menu/defs.ts
+++ b/packages/carbon-web-components/src/components/floating-menu/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -22,62 +22,17 @@ export enum FLOATING_MENU_POSITION_DIRECTION {
   RTL = 'rtl',
 }
 
-/**
- * The alignment choices of floating menu.
- */
-export enum FLOATING_MENU_ALIGNMENT {
-  /**
-   * Align the top/left position menu body to the one of its trigger button.
-   */
-  START = 'start',
-
-  /**
-   * Align the center position menu body to the one of its trigger button.
-   */
-  CENTER = 'center',
-
-  /**
-   * Align the bottom/right position menu body to the one of its trigger button.
-   */
-  END = 'end',
-}
-
 /**
  * The direction/positioning/orientation choices of floating menu.
  */
 export enum FLOATING_MENU_DIRECTION {
-  /**
-   * Put menu body at the left of its trigger button.
-   */
-  LEFT = 'left',
-
   /**
    * Put menu body at the top of its trigger button.
    */
   TOP = 'top',
 
-  /**
-   * Put menu body at the right of its trigger button.
-   */
-  RIGHT = 'right',
-
   /**
    * Put menu body at the bottom of its trigger button.
    */
   BOTTOM = 'bottom',
 }
-
-/**
- * The group of the direction/positioning/orientation choices of floating menu.
- */
-export enum FLOATING_MENU_DIRECTION_GROUP {
-  /**
-   * Put menu body at the left/right of its trigger button.
-   */
-  HORIZONTAL = 'horizontal',
-
-  /**
-   * Put menu body at the top/bottom of its trigger button.
-   */
-  VERTICAL = 'vertical',
-}
diff --git a/packages/carbon-web-components/src/components/floating-menu/floating-menu-trigger.ts b/packages/carbon-web-components/src/components/floating-menu/floating-menu-trigger.ts
index 7c9d6dd1a0b..2ad8c0eef8a 100644
--- a/packages/carbon-web-components/src/components/floating-menu/floating-menu-trigger.ts
+++ b/packages/carbon-web-components/src/components/floating-menu/floating-menu-trigger.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2022, 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.
@@ -10,7 +10,7 @@
 /**
  * The interface of floating menus containing the trigger button.
  */
-interface BXFloatingMenuTrigger extends HTMLElement {
+interface CDSFloatingMenuTrigger extends HTMLElement {
   /**
    * `true` if the menu should be open.
    */
@@ -23,4 +23,4 @@ interface BXFloatingMenuTrigger extends HTMLElement {
 }
 
 // eslint-disable-next-line no-undef
-export default BXFloatingMenuTrigger;
+export default CDSFloatingMenuTrigger;
diff --git a/packages/carbon-web-components/src/components/floating-menu/floating-menu.ts b/packages/carbon-web-components/src/components/floating-menu/floating-menu.ts
index 85deeff3bf2..fce613b6740 100644
--- a/packages/carbon-web-components/src/components/floating-menu/floating-menu.ts
+++ b/packages/carbon-web-components/src/components/floating-menu/floating-menu.ts
@@ -1,31 +1,25 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
 import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import Handle from '../../globals/internal/handle';
 import {
-  FLOATING_MENU_ALIGNMENT,
   FLOATING_MENU_DIRECTION,
-  FLOATING_MENU_DIRECTION_GROUP,
   FLOATING_MENU_POSITION_DIRECTION,
 } from './defs';
-import BXFloatingMenuTrigger from './floating-menu-trigger';
+import CDSFloatingMenuTrigger from './floating-menu-trigger';
+import { prefix } from '../../globals/settings';
 
-export {
-  FLOATING_MENU_ALIGNMENT,
-  FLOATING_MENU_DIRECTION,
-  FLOATING_MENU_DIRECTION_GROUP,
-  FLOATING_MENU_POSITION_DIRECTION,
-};
+export { FLOATING_MENU_DIRECTION, FLOATING_MENU_POSITION_DIRECTION };
 
 /**
  * Position of floating menu, or trigger button of floating menu.
@@ -84,7 +78,7 @@ const closestComposed = (elem: Element, selector: string) => {
 /**
  * Floating menu.
  */
-abstract class BXFloatingMenu extends HostListenerMixin(
+abstract class CDSFloatingMenu extends HostListenerMixin(
   FocusMixin(LitElement)
 ) {
   /**
@@ -118,22 +112,39 @@ abstract class BXFloatingMenu extends HostListenerMixin(
   private _handleBlur = ({ relatedTarget }: FocusEvent) => {
     if (!this.contains(relatedTarget as Node)) {
       const { parent } = this;
-      if (parent) {
+      if (parent && parent !== relatedTarget) {
         parent.open = false;
         HTMLElement.prototype.focus.call(this.parent); // SVGElement in IE11 does not have `.focus()` method
       }
     }
   };
 
-  /**
-   * The DOM element, typically a custom element in this library, launching this floating menu.
-   */
-  protected parent: BXFloatingMenuTrigger | null = null;
+  @HostListener('click')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _click = () => {
+    const { parent } = this;
+    if (parent) {
+      parent.open = false;
+    }
+  };
+
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleKeyDown = (event: KeyboardEvent) => {
+    if (event.key === 'Tab') {
+      if (event.shiftKey) {
+        const { parent } = this;
+        if (parent) {
+          parent.open = false;
+        }
+      }
+    }
+  };
 
   /**
-   * How the menu is aligned to the trigger button.
+   * The DOM element, typically a custom element in this library, launching this floating menu.
    */
-  abstract alignment: FLOATING_MENU_ALIGNMENT;
+  protected parent: CDSFloatingMenuTrigger | null = null;
 
   /**
    * The menu direction.
@@ -146,17 +157,9 @@ abstract class BXFloatingMenu extends HostListenerMixin(
   abstract open: boolean;
 
   /**
-   * The horizontal/vertical direction with regard to how the menu is aligned to the trigger button.
+   * `true` if the menu alignment should be flipped.
    */
-  get alignmentDirection() {
-    return {
-      [FLOATING_MENU_DIRECTION.LEFT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,
-      [FLOATING_MENU_DIRECTION.TOP]: FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL,
-      [FLOATING_MENU_DIRECTION.RIGHT]: FLOATING_MENU_DIRECTION_GROUP.VERTICAL,
-      [FLOATING_MENU_DIRECTION.BOTTOM]:
-        FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL,
-    }[this.direction];
-  }
+  abstract flipped: boolean;
 
   /**
    * The DOM element to put this menu into.
@@ -165,7 +168,7 @@ abstract class BXFloatingMenu extends HostListenerMixin(
     return (
       closestComposed(
         this,
-        (this.constructor as typeof BXFloatingMenu).selectorContainer
+        (this.constructor as typeof CDSFloatingMenu).selectorContainer
       ) || this.ownerDocument!.body
     );
   }
@@ -192,8 +195,6 @@ abstract class BXFloatingMenu extends HostListenerMixin(
       right: containerRight = 0,
       top: containerTop = 0,
     } = container.getBoundingClientRect();
-    const refCenterHorizontal = (refLeft + refRight) / 2;
-    const refCenterVertical = (refTop + refBottom) / 2;
 
     const containerComputedStyle =
       container.ownerDocument!.defaultView!.getComputedStyle(container);
@@ -210,11 +211,7 @@ abstract class BXFloatingMenu extends HostListenerMixin(
     const refEndFromContainer = !isRtl
       ? refRight - containerLeft
       : containerRight - refLeft;
-    const refCenterHorizontalFromContainer = !isRtl
-      ? refCenterHorizontal - containerLeft
-      : containerRight - refCenterHorizontal;
     const refTopFromContainer = refTop - containerTop;
-    const refCenterVerticalFromContainer = refCenterVertical - containerTop;
 
     if (
       (container !== this.ownerDocument!.body ||
@@ -227,42 +224,20 @@ abstract class BXFloatingMenu extends HostListenerMixin(
       );
     }
 
-    const { alignment, alignmentDirection, direction } = this;
-    if (Object.values(FLOATING_MENU_ALIGNMENT).indexOf(alignment) < 0) {
-      throw new Error(`Wrong menu alignment: ${alignment}`);
-    }
+    const { flipped, direction } = this;
     if (Object.values(FLOATING_MENU_DIRECTION).indexOf(direction) < 0) {
       throw new Error(`Wrong menu position direction: ${direction}`);
     }
 
-    const alignmentStart = {
-      [FLOATING_MENU_DIRECTION_GROUP.HORIZONTAL]: {
-        [FLOATING_MENU_ALIGNMENT.START]: () => refStartFromContainer,
-        [FLOATING_MENU_ALIGNMENT.CENTER]: () =>
-          refCenterHorizontalFromContainer - width / 2,
-        [FLOATING_MENU_ALIGNMENT.END]: () => refEndFromContainer - width,
-      },
-      [FLOATING_MENU_DIRECTION_GROUP.VERTICAL]: {
-        [FLOATING_MENU_ALIGNMENT.START]: () => refTopFromContainer,
-        [FLOATING_MENU_ALIGNMENT.CENTER]: () =>
-          refCenterVerticalFromContainer - height / 2,
-        [FLOATING_MENU_ALIGNMENT.END]: () => refBottom - height,
-      },
-    }[alignmentDirection][alignment]();
+    const alignmentStart = flipped
+      ? refEndFromContainer - width
+      : refStartFromContainer;
 
     const { start, top } = {
-      [FLOATING_MENU_DIRECTION.LEFT]: () => ({
-        start: refStartFromContainer - width,
-        top: alignmentStart,
-      }),
       [FLOATING_MENU_DIRECTION.TOP]: () => ({
         start: alignmentStart,
         top: refTopFromContainer - height,
       }),
-      [FLOATING_MENU_DIRECTION.RIGHT]: () => ({
-        start: refEndFromContainer,
-        top: alignmentStart,
-      }),
       [FLOATING_MENU_DIRECTION.BOTTOM]: () => ({
         start: alignmentStart,
         top: refBottom,
@@ -276,15 +251,6 @@ abstract class BXFloatingMenu extends HostListenerMixin(
     };
   }
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   disconnectedCallback() {
     if (this._hObserveResizeContainer) {
       this._hObserveResizeContainer = this._hObserveResizeContainer.release();
@@ -297,13 +263,13 @@ abstract class BXFloatingMenu extends HostListenerMixin(
   updated(changedProperties) {
     const { container, open, parent } = this;
     if (
-      (changedProperties.has('alignment') ||
+      (changedProperties.has('flipped') ||
         changedProperties.has('direction') ||
         changedProperties.has('open')) &&
       open
     ) {
       if (!parent) {
-        this.parent = this.parentElement as BXFloatingMenuTrigger;
+        this.parent = this.parentElement as CDSFloatingMenuTrigger;
         container.appendChild(this);
       }
       // Note: `this.position` cannot be referenced until `this.parent` is set
@@ -345,8 +311,12 @@ abstract class BXFloatingMenu extends HostListenerMixin(
    * The CSS selector to find the element to put this floating menu in.
    */
   static get selectorContainer() {
-    return '[data-floating-menu-container],bx-modal';
+    return `[data-floating-menu-container],${prefix}-modal`;
   }
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
 }
 
-export default BXFloatingMenu;
+export default CDSFloatingMenu;
diff --git a/packages/carbon-web-components/src/components/form-group/form-group-story.mdx b/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
new file mode 100644
index 00000000000..158b22bbd8f
--- /dev/null
+++ b/packages/carbon-web-components/src/components/form-group/form-group-story.mdx
@@ -0,0 +1,60 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Form Group
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/form-group)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/form-group/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['form-group'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-form-group legend-text="FormGroup Legend">
+  <cds-stack gap="7">
+    <cds-text-input label="First Name"> </cds-text-input>
+    <cds-text-input label="Last Name"> </cds-text-input>
+    <cds-radio-button-group
+      legend-text="Radio button heading"
+      name="radio-button-group"
+      value="radio-1">
+      <cds-radio-button
+        label-text="Option 1"
+        value="radio-1"
+        id="radio-1"></cds-radio-button>
+      <cds-radio-button
+        label-text="Option 2"
+        value="radio-2"
+        id="radio-2"></cds-radio-button>
+      <cds-radio-button
+        label-text="Option 3"
+        value="radio-3"
+        id="radio-3"></cds-radio-button>
+    </cds-radio-button-group>
+    <cds-button>Submit</cds-button>
+  </cds-stack>
+</cds-form-group>
+```
+
+## `<cds-form-group>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-form-group message>`) and `false` means not setting the attribute (e.g.
+`<cds-form-group>` without `message` attribute).
+
+<Props of="cds-form-group" />
diff --git a/packages/carbon-web-components/src/components/form-group/form-group-story.ts b/packages/carbon-web-components/src/components/form-group/form-group-story.ts
new file mode 100644
index 00000000000..755e78b98ea
--- /dev/null
+++ b/packages/carbon-web-components/src/components/form-group/form-group-story.ts
@@ -0,0 +1,104 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import './form-group';
+import '../text-input';
+import '../stack';
+import '../radio-button/index';
+import '../button';
+import storyDocs from './form-group-story.mdx';
+
+export const Default = () => {
+  return html`
+    <cds-form-group legend-text="FormGroup Legend">
+      <cds-stack gap="7">
+        <cds-text-input label="First Name"> </cds-text-input>
+        <cds-text-input label="Last Name"> </cds-text-input>
+        <cds-radio-button-group
+          legend-text="Radio button heading"
+          name="radio-button-group"
+          value="radio-1">
+          <cds-radio-button
+            label-text="Option 1"
+            value="radio-1"
+            id="radio-1"></cds-radio-button>
+          <cds-radio-button
+            label-text="Option 2"
+            value="radio-2"
+            id="radio-2"></cds-radio-button>
+          <cds-radio-button
+            label-text="Option 3"
+            value="radio-3"
+            id="radio-3"></cds-radio-button>
+        </cds-radio-button-group>
+        <cds-button>Submit</cds-button>
+      </cds-stack>
+    </cds-form-group>
+  `;
+};
+
+export const Playground = (args) => {
+  const { legendText, message, messageText } = args?.['cds-form-group'] ?? {};
+  return html`
+    <cds-form-group
+      legend-text="${ifDefined(legendText)}"
+      ?message="${message}"
+      message-text="${ifDefined(messageText)}">
+      <cds-stack gap="7">
+        <cds-text-input label="First Name"> </cds-text-input>
+        <cds-text-input label="Last Name"> </cds-text-input>
+        <cds-radio-button-group
+          legend-text="Radio button heading"
+          name="radio-button-group"
+          value="radio-1">
+          <cds-radio-button
+            label-text="Option 1"
+            value="radio-1"
+            id="radio-1"></cds-radio-button>
+          <cds-radio-button
+            label-text="Option 2"
+            value="radio-2"
+            id="radio-2"></cds-radio-button>
+          <cds-radio-button
+            label-text="Option 3"
+            value="radio-3"
+            id="radio-3"></cds-radio-button>
+        </cds-radio-button-group>
+        <cds-button>Submit</cds-button>
+      </cds-stack>
+    </cds-form-group>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-form-group`]: () => ({
+      legendText: textNullable('Legend Text (legend-text)', 'FormGroup Legend'),
+      message: boolean('message', false),
+      messageText: textNullable('Message Text (message-text)', ''),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Form Group',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+  decorators: [
+    (story) => {
+      return html` <div style="max-width:400px">${story()}</div> `;
+    },
+  ],
+};
diff --git a/packages/carbon-web-components/src/components/form-group/form-group.scss b/packages/carbon-web-components/src/components/form-group/form-group.scss
new file mode 100644
index 00000000000..07d273196e9
--- /dev/null
+++ b/packages/carbon-web-components/src/components/form-group/form-group.scss
@@ -0,0 +1,23 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/form/index' as *;
+
+:host(#{$prefix}-form-group) fieldset {
+  @extend .#{$prefix}--fieldset;
+
+  padding: 0;
+  border: 0;
+  margin: 0;
+  font: inherit;
+  font-size: 100%;
+  vertical-align: baseline;
+}
diff --git a/packages/carbon-web-components/src/components/form-group/form-group.ts b/packages/carbon-web-components/src/components/form-group/form-group.ts
new file mode 100644
index 00000000000..77ae1652974
--- /dev/null
+++ b/packages/carbon-web-components/src/components/form-group/form-group.ts
@@ -0,0 +1,77 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './form-group.scss';
+
+/**
+ * The shell UI for file uploader.
+ *
+ * @element cds-form-group
+ * @slot label-title.
+ * @slot lebel-description.
+ */
+@customElement(`${prefix}-form-group`)
+class CDSFormGroup extends LitElement {
+  /**
+   * Specify whether the Form Group is invalid
+   */
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  /**
+   * Provide id for the fieldset <legend> which corresponds to the fieldset
+   * `aria-labelledby`
+   */
+  @property({ attribute: 'legend-id' })
+  legendId;
+
+  /**
+   * Provide the text to be rendered inside of the fieldset <legend>
+   */
+  @property({ attribute: 'legend-text' })
+  legendText!: string;
+
+  /**
+   * Specify whether the message should be displayed in the Form Group
+   */
+  @property({ type: Boolean, reflect: true })
+  message = false;
+
+  /**
+   * Provide the text for the message in the Form Group
+   */
+  @property({ type: String, attribute: 'message-text', reflect: true })
+  messageText;
+
+  render() {
+    const { invalid, legendId, legendText, message, messageText } = this;
+
+    return html`
+      <fieldset
+        class="${prefix}--fieldset"
+        ?data-invalid=${invalid}
+        aria-labelledby="${legendId}">
+        <legend class="${prefix}--label" id=${legendId}>${legendText}</legend>
+        <slot></slot>
+        ${message
+          ? html`<div class="${prefix}--form__requirements">
+              ${messageText}
+            </div>`
+          : null}
+      </fieldset>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSFormGroup;
diff --git a/packages/carbon-web-components/src/components/form-group/index.ts b/packages/carbon-web-components/src/components/form-group/index.ts
new file mode 100644
index 00000000000..0867b33ac76
--- /dev/null
+++ b/packages/carbon-web-components/src/components/form-group/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 './form-group';
diff --git a/packages/carbon-web-components/src/components/form/form-item.scss b/packages/carbon-web-components/src/components/form/form-item.scss
index e153cb9799d..128e634d26e 100644
--- a/packages/carbon-web-components/src/components/form/form-item.scss
+++ b/packages/carbon-web-components/src/components/form/form-item.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,8 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/form/form';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/form';
 
 :host(#{$prefix}-form-item) {
   @extend .#{$prefix}--form-item;
diff --git a/packages/carbon-web-components/src/components/form/form-item.ts b/packages/carbon-web-components/src/components/form/form-item.ts
index 4b8a88c6345..cbf51bfd9fd 100644
--- a/packages/carbon-web-components/src/components/form/form-item.ts
+++ b/packages/carbon-web-components/src/components/form/form-item.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { LitElement, html } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './form-item.scss';
-
-const { prefix } = settings;
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Presentational element for form items
  *
- * @element bx-form-item
+ * @element cds-form-item
  */
 @customElement(`${prefix}-form-item`)
-export default class BXFormItem extends LitElement {
+class CDSFormItem extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
+
+export default CDSFormItem;
diff --git a/packages/carbon-web-components/src/components/icon-button/defs.ts b/packages/carbon-web-components/src/components/icon-button/defs.ts
new file mode 100644
index 00000000000..89b81398860
--- /dev/null
+++ b/packages/carbon-web-components/src/components/icon-button/defs.ts
@@ -0,0 +1,73 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Icon Button size.
+ */
+export enum ICON_BUTTON_SIZE {
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+}
+
+/**
+ * Icon Button Tooltip alignment.
+ */
+export enum ICON_BUTTON_TOOLTIP_ALIGNMENT {
+  /**
+   * Align the top position for the tooltip content.
+   */
+  TOP = 'top',
+
+  /**
+   * Align the top-left position for the tooltip content.
+   */
+  TOP_LEFT = 'top-left',
+
+  /**
+   * Align the top right position for the tooltip content.
+   */
+  TOP_RIGHT = 'top-right',
+
+  /**
+   * Align the bottom position for the tooltip content.
+   */
+  BOTTOM = 'bottom',
+
+  /**
+   * Align the bottom left position for the tooltip content.
+   */
+  BOTTOM_LEFT = 'bottom-left',
+
+  /**
+   * Align the bottom right position for the tooltip content.
+   */
+  BOTTOM_RIGHT = 'bottom-right',
+
+  /**
+   * Align the left position for the tooltip content.
+   */
+  LEFT = 'left',
+
+  /**
+   * Align the right position for the tooltip content.
+   */
+  RIGHT = 'right',
+}
diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx b/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
new file mode 100644
index 00000000000..ce433b524c7
--- /dev/null
+++ b/packages/carbon-web-components/src/components/icon-button/icon-button-story.mdx
@@ -0,0 +1,45 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Icon Button
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/icon-button)
+
+The `icon-button` component is useful when you have a button where the content
+is an icon. In this situation, it's important that the button itself is labeled
+in a way that can be understandable by mouse, keyboard, and screen readers. As a
+result, this component makes it easy to create accessible icon buttons
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/icon-button/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['icon-button'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+```javascript
+import '@carbon/web-components/es/components/icon-button/index.js';
+import Edit16 from '@carbon/web-components/es/icons/edit/16';
+
+function App() {
+  return html`<cds-icon-button>
+    ${Edit16({ slot: 'icon' })}
+    <span slot="tooltip-content"> Tooltip text </span>
+  </cds-icon-button>`;
+}
+```
+
+## `<cds-icon-button>` attributes and properties
+
+<Props of="cds-icon-button" />
+````
diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button-story.ts b/packages/carbon-web-components/src/components/icon-button/icon-button-story.ts
new file mode 100644
index 00000000000..5cca9e3cdec
--- /dev/null
+++ b/packages/carbon-web-components/src/components/icon-button/icon-button-story.ts
@@ -0,0 +1,84 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select, text, number } from '@storybook/addon-knobs';
+import './index';
+import '../button/index';
+import storyDocs from './icon-button-story.mdx';
+import { ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs';
+import Edit16 from '@carbon/icons/lib/edit/16';
+import { ICON_BUTTON_SIZE } from './defs';
+
+const tooltipAlignments = {
+  [`top`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.TOP,
+  [`top-left`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.TOP_LEFT,
+  [`top-right`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.TOP_RIGHT,
+  [`bottom`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.BOTTOM,
+  [`bottom-left`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.BOTTOM_LEFT,
+  [`bottom-right`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.BOTTOM_RIGHT,
+  [`left`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.LEFT,
+  [`right`]: ICON_BUTTON_TOOLTIP_ALIGNMENT.RIGHT,
+};
+
+export const Default = () => {
+  return html`
+    <cds-icon-button> ${Edit16({ slot: 'icon' })} </cds-icon-button>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    alignment,
+    defaultOpen,
+    disabled,
+    tooltipContent,
+    enterDelay,
+    leaveDelay,
+    size,
+  } = args?.['cds-icon-button'];
+  return html`
+    <cds-icon-button
+      align=${alignment}
+      ?defaultOpen=${defaultOpen}
+      ?disabled=${disabled}
+      enter-delay-ms=${enterDelay}
+      leave-delay-ms=${leaveDelay}
+      size=${size}>
+      ${Edit16({ slot: 'icon' })}
+      <span slot="tooltip-content"> ${tooltipContent} </span>
+    </cds-icon-button>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    'cds-icon-button': () => ({
+      alignment: select(
+        'Tooltip alignment to trigger button (alignment)',
+        tooltipAlignments,
+        ICON_BUTTON_TOOLTIP_ALIGNMENT.BOTTOM
+      ),
+      defaultOpen: boolean('Default open (defaultOpen)', false),
+      disabled: boolean('Disabled (disabled)', false),
+      enterDelay: number('Enter delay (in ms)', 100),
+      leaveDelay: number('leave delay (in ms)', 300),
+      tooltipContent: text('tooltip-content', 'Custom label'),
+      size: select('size', ICON_BUTTON_SIZE, ICON_BUTTON_SIZE.MEDIUM),
+    }),
+  },
+};
+
+export default {
+  parameters: {
+    ...storyDocs.parameters,
+  },
+  title: 'Components/Icon Button',
+  decorators: [(story) => html`<div style="padding: 3rem">${story()}</div>`],
+};
diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button.scss b/packages/carbon-web-components/src/components/icon-button/icon-button.scss
new file mode 100644
index 00000000000..f8fed4d7283
--- /dev/null
+++ b/packages/carbon-web-components/src/components/icon-button/icon-button.scss
@@ -0,0 +1,24 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../tooltip/tooltip';
+@use '../button/button';
+
+:host(#{$prefix}-icon-button) {
+  @include emit-layout-tokens();
+}
+
+:host(#{$prefix}-icon-button[kind='ghost']) ::slotted([slot='icon']) {
+  color: $icon-primary;
+}
diff --git a/packages/carbon-web-components/src/components/icon-button/icon-button.ts b/packages/carbon-web-components/src/components/icon-button/icon-button.ts
new file mode 100644
index 00000000000..2e257a40ef9
--- /dev/null
+++ b/packages/carbon-web-components/src/components/icon-button/icon-button.ts
@@ -0,0 +1,112 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import '../tooltip/index';
+import '../button/index';
+import CDSButton from '../button/button';
+import { ICON_BUTTON_SIZE, ICON_BUTTON_TOOLTIP_ALIGNMENT } from './defs';
+import styles from './icon-button.scss';
+
+export { ICON_BUTTON_SIZE, ICON_BUTTON_TOOLTIP_ALIGNMENT };
+
+/**
+ * Icon Button
+ *
+ */
+@customElement(`${prefix}-icon-button`)
+class CDSIconButton extends CDSButton {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  @property({ reflect: true, type: String })
+  align = 'top';
+
+  /**
+   * Determines whether the tooltip should close when inner content is activated (click, Enter or Space)
+   */
+  @property({ attribute: 'close-on-activation', reflect: true, type: Boolean })
+  closeOnActivation = true;
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  @property({ reflect: true, type: Boolean })
+  defaultOpen = false;
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  @property({ attribute: 'enter-delay-ms', type: Number })
+  enterDelayMs = 100;
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  @property({ attribute: 'leave-delay-ms', type: Number })
+  leaveDelayMs = 300;
+
+  /**
+   * Specify the size of the Button. Defaults to `md`.
+   */
+  @property({ reflect: true })
+  size = 'md';
+
+  updated(changedProperties) {
+    if (changedProperties) {
+      this.shadowRoot
+        ?.querySelector(`${prefix}-tooltip`)
+        ?.shadowRoot?.querySelector(`.${prefix}--tooltip`)
+        ?.classList.add(`${prefix}--icon-tooltip`);
+
+      const tooltipContent = this.querySelector(
+        '[slot=tooltip-content]'
+      )?.textContent;
+      this.shadowRoot
+        ?.querySelector(`${prefix}-tooltip`)
+        ?.querySelector(`button`)
+        ?.setAttribute('aria-label', String(tooltipContent));
+    }
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderTooltipContent() {
+    return html`
+      <cds-tooltip-content>
+        <slot name="tooltip-content"></slot>
+      </cds-tooltip-content>
+    `;
+  }
+
+  render() {
+    const {
+      align,
+      closeOnActivation,
+      defaultOpen,
+      enterDelayMs,
+      leaveDelayMs,
+    } = this;
+    return html`
+      <cds-tooltip
+        align=${align}
+        ?defaultOpen=${defaultOpen}
+        close-on-activation="${closeOnActivation}"
+        enter-delay-ms=${enterDelayMs}
+        leave-delay-ms=${leaveDelayMs}>
+        ${super.render()} ${this._renderTooltipContent()}
+      </cds-tooltip>
+    `;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSIconButton;
diff --git a/packages/carbon-web-components/src/components/icon-button/index.ts b/packages/carbon-web-components/src/components/icon-button/index.ts
new file mode 100644
index 00000000000..eccadabc635
--- /dev/null
+++ b/packages/carbon-web-components/src/components/icon-button/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 './icon-button';
diff --git a/packages/carbon-web-components/src/components/icon/icon-story.ts b/packages/carbon-web-components/src/components/icon/icon-story.ts
index dbe56261ddc..44f7913ad68 100644
--- a/packages/carbon-web-components/src/components/icon/icon-story.ts
+++ b/packages/carbon-web-components/src/components/icon/icon-story.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, svg } from 'lit-html';
+import { html, svg } from 'lit';
 
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
@@ -49,18 +49,22 @@ withAriaLabel.storyName = 'With aria-label';
 export const withTitle = () => html`
   ${Add16({
     'aria-describedby': 'id-title-1',
+    // @ts-ignore
     children: svg`<title id="id-title-1">add</title>`,
   })}
   ${Add20({
     'aria-describedby': 'id-title-2',
+    // @ts-ignore
     children: svg`<title id="id-title-2">add</title>`,
   })}
   ${Add24({
     'aria-describedby': 'id-title-3',
+    // @ts-ignore
     children: svg`<title id="id-title-3">add</title>`,
   })}
   ${Add32({
     'aria-describedby': 'id-title-4',
+    // @ts-ignore
     children: svg`<title id="id-title-4">add</title>`,
   })}
 `;
diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx b/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
index 9f512e3e19d..6d5b18cc988 100644
--- a/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
+++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Inline loading
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/inline-loading)
 
 Inline loading spinners are used when performing actions. They help notify
 user’s that their action is being processed. The waiting experience is a crucial
@@ -36,9 +36,9 @@ import '@carbon/web-components/es/components/inline-loading/index.js';
 ### HTML
 
 ```html
-<bx-inline-loading status="active">Loading data...</bx-inline-loading>
+<cds-inline-loading status="active">Loading data...</cds-inline-loading>
 ```
 
-## `<bx-inline-loading>` attributes and properties
+## `<cds-inline-loading>` attributes and properties
 
-<Props of="bx-inline-loading" />
+<Props of="cds-inline-loading" />
diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts b/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts
index 0c11806d5ee..b1462d93b1f 100644
--- a/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts
+++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading-story.ts
@@ -1,52 +1,66 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { select } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { html } from 'lit';
+import { select, text } from '@storybook/addon-knobs';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { INLINE_LOADING_STATE } from './inline-loading';
 import storyDocs from './inline-loading-story.mdx';
+import { prefix } from '../../globals/settings';
 
 const states = {
   [`Inactive (${INLINE_LOADING_STATE.INACTIVE})`]:
     INLINE_LOADING_STATE.INACTIVE,
-  [`In progress (${INLINE_LOADING_STATE.ACTIVE})`]: INLINE_LOADING_STATE.ACTIVE,
-  [`Success (${INLINE_LOADING_STATE.FINISHED})`]: INLINE_LOADING_STATE.FINISHED,
+  [`Active (${INLINE_LOADING_STATE.ACTIVE})`]: INLINE_LOADING_STATE.ACTIVE,
+  [`Finished (${INLINE_LOADING_STATE.FINISHED})`]:
+    INLINE_LOADING_STATE.FINISHED,
   [`Failed (${INLINE_LOADING_STATE.ERROR})`]: INLINE_LOADING_STATE.ERROR,
 };
 
-export const Default = (args) => {
-  const { status } = args?.['bx-inline-loading'] ?? {};
+export const Default = () =>
+  html`<cds-inline-loading>Loading data...</cds-inline-loading>`;
+
+export default {
+  title: 'Components/Inline loading',
+  parameters: { ...storyDocs.parameters },
+};
+
+export const Playground = (args) => {
+  const { assistiveText, description, status } =
+    args?.[`${prefix}-inline-loading`] ?? {};
   return html`
-    <bx-inline-loading status="${ifNonNull(status)}"
-      >Loading data...</bx-inline-loading
-    >
+    <cds-inline-loading
+      status="${ifDefined(status)}"
+      assistive-text=${assistiveText}>
+      ${description}
+    </cds-inline-loading>
   `;
 };
 
-Default.storyName = 'Default';
-
-export default {
-  title: 'Components/Inline loading',
-  parameters: {
-    ...storyDocs.parameters,
-    percy: {
-      skip: true,
-    },
-    knobs: {
-      'bx-inline-loading': () => ({
-        status: select(
-          'Loading status (status)',
-          states,
-          INLINE_LOADING_STATE.ACTIVE
-        ),
-      }),
-    },
+Playground.parameters = {
+  ...storyDocs.parameters,
+  percy: { skip: true },
+  knobs: {
+    [`${prefix}-inline-loading`]: () => ({
+      description: text(
+        'Description (description) - Specify the description for the inline loading text',
+        'Loading data...'
+      ),
+      assistiveText: text(
+        'Assistive text (assistive-text) - Specify a description that would be used to best describe the loading state',
+        'Loading'
+      ),
+      status: select(
+        'Loading status (status)',
+        states,
+        INLINE_LOADING_STATE.ACTIVE
+      ),
+    }),
   },
 };
diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading.scss b/packages/carbon-web-components/src/components/inline-loading/inline-loading.scss
index 3ac6374b908..73e90d7bec7 100644
--- a/packages/carbon-web-components/src/components/inline-loading/inline-loading.scss
+++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading.scss
@@ -1,32 +1,18 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/typography';
-@import 'carbon-components/scss/components/loading/loading';
-@import 'carbon-components/scss/components/inline-loading/inline-loading';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/loading';
+@use '@carbon/styles/scss/components/inline-loading/inline-loading' as *;
+
+@include inline-loading;
 
 :host(#{$prefix}-inline-loading) {
   @extend .#{$prefix}--inline-loading;
-
-  min-height: 2rem;
-
-  // This rule should be covered by next release of Carbon
-  .#{$prefix}--inline-loading__checkmark-container {
-    fill: $interactive-04;
-    width: rem(16px);
-    height: rem(16px);
-    top: auto;
-    position: relative;
-  }
-
-  // This rule should be covered by next release of Carbon
-  .#{$prefix}--inline-loading--error {
-    fill: $support-01;
-    width: rem(16px);
-    height: rem(16px);
-  }
 }
diff --git a/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts b/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts
index 2b577ca3dcb..a0226b8f817 100644
--- a/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts
+++ b/packages/carbon-web-components/src/components/inline-loading/inline-loading.ts
@@ -7,11 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
 import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import LOADING_TYPE from '../loading/types';
 import getLoadingIcon from '../loading/loading-icon';
 import { INLINE_LOADING_STATE } from './defs';
@@ -20,20 +21,24 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { INLINE_LOADING_STATE };
 
-const { prefix } = settings;
-
 /**
  * Lnline loading spinner.
  *
- * @element bx-inline-loading
+ * @element cds-inline-loading
  */
 @customElement(`${prefix}-inline-loading`)
-class BXInlineLoading extends LitElement {
+class CDSInlineLoading extends LitElement {
+  /**
+   * The assistive text for the spinner icon.
+   */
+  @property({ attribute: 'assistive-text' })
+  assistiveText = 'Loading';
+
   /**
    * @returns The template for the status icon.
    */
   private _renderIcon() {
-    const { status } = this;
+    const { assistiveText, status } = this;
     if (status === INLINE_LOADING_STATE.ERROR) {
       return ErrorFilled16({
         class: `${prefix}--inline-loading--error`,
@@ -41,7 +46,7 @@ class BXInlineLoading extends LitElement {
     }
     if (status === INLINE_LOADING_STATE.FINISHED) {
       return CheckmarkFilled16({
-        class: `${prefix}--inline-loading__checkmark-container ${prefix}--inline-loading__svg`,
+        class: `${prefix}--inline-loading__checkmark-container`,
       });
     }
     if (
@@ -55,7 +60,7 @@ class BXInlineLoading extends LitElement {
       });
       return html`
         <div class="${classes}">
-          ${getLoadingIcon({ type: LOADING_TYPE.SMALL })}
+          ${getLoadingIcon({ assistiveText, type: LOADING_TYPE.SMALL })}
         </div>
       `;
     }
@@ -93,4 +98,4 @@ class BXInlineLoading extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXInlineLoading;
+export default CDSInlineLoading;
diff --git a/packages/carbon-web-components/src/components/input/defs.ts b/packages/carbon-web-components/src/components/input/defs.ts
deleted file mode 100644
index 419ea952b2b..00000000000
--- a/packages/carbon-web-components/src/components/input/defs.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME } from '../../globals/shared-enums';
-
-/**
- * Input size.
- */
-export enum INPUT_SIZE {
-  /**
-   * Small size.
-   */
-  SMALL = 'sm',
-
-  /**
-   * Regular size, same as medium size.
-   */
-  REGULAR = 'md',
-
-  /**
-   * Large size.
-   */
-  LARGE = 'lg',
-
-  /**
-   * Extra large size.
-   */
-  EXTRA_LARGE = 'xl',
-}
-
-/**
- * Supported input types.
- *
- * For this component we only support textual types
- */
-export enum INPUT_TYPE {
-  EMAIL = 'email',
-  PASSWORD = 'password',
-  TEL = 'tel',
-  TEXT = 'text',
-  URL = 'url',
-}
diff --git a/packages/carbon-web-components/src/components/input/index.ts b/packages/carbon-web-components/src/components/input/index.ts
deleted file mode 100644
index 7883c434808..00000000000
--- a/packages/carbon-web-components/src/components/input/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 './input';
diff --git a/packages/carbon-web-components/src/components/input/input-story.mdx b/packages/carbon-web-components/src/components/input/input-story.mdx
deleted file mode 100644
index 987ed0ab28c..00000000000
--- a/packages/carbon-web-components/src/components/input/input-story.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
-
-# Input
-
-> 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/input)
-> example implementation.
-
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/input)
-
-Text fields enable the user to interact with and input data. A single line field
-is used when the input anticipated by the user is a single line of text as
-opposed to a paragraph.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/web-components/es/components/input/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['input'] })}`} />
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<bx-input>
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-</bx-input>
-```
-
-## Form item
-
-If the input is part of a form, make sure to import and wrap the input with
-`<bx-form-item>`
-
-```javascript
-import '@carbon/web-components/es/components/form/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['form'] })}`} />
-
-```html
-<bx-form-item>
-  <bx-input>
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-  </bx-input>
-</bx-form-item>
-```
-
-## `<bx-input>` attributes and properties
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-input required>`) and `false` means not setting the attribute (e.g.
-`<bx-input>` without `required` attribute).
-
-<Props of="bx-input" />
diff --git a/packages/carbon-web-components/src/components/input/input-story.ts b/packages/carbon-web-components/src/components/input/input-story.ts
deleted file mode 100644
index c0073560416..00000000000
--- a/packages/carbon-web-components/src/components/input/input-story.ts
+++ /dev/null
@@ -1,139 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 { html } from 'lit-element';
-import * as knobs from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import './input';
-import '../form/form-item';
-import createProps from './stories/helpers';
-import storyDocs from './input-story.mdx';
-
-export const Default = (args) => {
-  const {
-    autocomplete,
-    autofocus,
-    colorScheme,
-    disabled,
-    helperText,
-    invalid,
-    labelText,
-    name,
-    pattern,
-    placeholder,
-    readonly,
-    required,
-    showPasswordVisibilityToggle,
-    size,
-    type,
-    validityMessage,
-    value,
-    onInput,
-  } = args?.['bx-input'] ?? {};
-  return html`
-    <bx-input
-      autocomplete="${ifNonNull(autocomplete)}"
-      ?autofocus="${autofocus}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled="${disabled}"
-      helper-text="${ifNonNull(helperText)}"
-      ?invalid="${invalid}"
-      label-text="${ifNonNull(labelText)}"
-      name="${ifNonNull(name)}"
-      pattern="${ifNonNull(pattern)}"
-      placeholder="${ifNonNull(placeholder)}"
-      ?readonly="${readonly}"
-      ?required="${required}"
-      ?show-password-visibility-toggle="${showPasswordVisibilityToggle}"
-      size="${ifNonNull(size)}"
-      type="${ifNonNull(type)}"
-      validity-message="${ifNonNull(validityMessage)}"
-      value="${ifNonNull(value)}"
-      @input="${onInput}"></bx-input>
-  `;
-};
-
-Default.storyName = 'Default';
-
-export const formItem = (args) => {
-  const {
-    colorScheme,
-    disabled,
-    invalid,
-    placeholder,
-    showPasswordVisibilityToggle,
-    size,
-    type,
-    value,
-    onInput,
-  } = args?.['bx-input'] ?? {};
-  return html`
-    <bx-form-item>
-      <bx-input
-        value="${ifNonNull(value)}"
-        color-scheme="${ifNonNull(colorScheme)}"
-        placeholder="${ifNonNull(placeholder)}"
-        size="${ifNonNull(size)}"
-        @input="${onInput}"
-        ?invalid="${invalid}"
-        ?disabled="${disabled}"
-        ?show-password-visibility-toggle="${showPasswordVisibilityToggle}"
-        type="${ifNonNull(type)}">
-        <span slot="label-text">Label text</span>
-        <span slot="helper-text">Optional helper text</span>
-        <span slot="validity-message">Something isn't right</span>
-      </bx-input>
-    </bx-form-item>
-  `;
-};
-
-formItem.storyName = 'Form item';
-
-export const withoutFormItemWrapper = (args) => {
-  const {
-    colorScheme,
-    disabled,
-    invalid,
-    placeholder,
-    showPasswordVisibilityToggle,
-    size,
-    type,
-    value,
-    onInput,
-  } = args?.['bx-input'] ?? {};
-  return html`
-    <bx-input
-      value="${ifNonNull(value)}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      placeholder="${ifNonNull(placeholder)}"
-      size="${ifNonNull(size)}"
-      @input="${onInput}"
-      ?invalid="${invalid}"
-      ?disabled="${disabled}"
-      ?show-password-visibility-toggle="${showPasswordVisibilityToggle}"
-      type="${ifNonNull(type)}">
-      <span slot="label-text">Label text</span>
-      <span slot="helper-text">Optional helper text</span>
-      <span slot="validity-message">Something isn't right</span>
-    </bx-input>
-  `;
-};
-
-withoutFormItemWrapper.storyName = 'Without form item wrapper';
-
-export default {
-  title: 'Components/Input',
-  parameters: {
-    ...storyDocs.parameters,
-    knobs: {
-      'bx-input': () => createProps({ ...knobs, textNonEmpty: textNullable }),
-    },
-  },
-};
diff --git a/packages/carbon-web-components/src/components/input/input.scss b/packages/carbon-web-components/src/components/input/input.scss
deleted file mode 100644
index d4adf22ee68..00000000000
--- a/packages/carbon-web-components/src/components/input/input.scss
+++ /dev/null
@@ -1,35 +0,0 @@
-//
-// Copyright IBM Corp. 2019, 2022
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$css--plex: true !default;
-
-@import 'carbon-components/scss/components/text-input/text-input';
-
-:host(#{$prefix}-input) {
-  // the base text-input class has a 100% so we need to propagate it up to the host element
-  width: 100%;
-  outline: none;
-
-  &[show-password-visibility-toggle] {
-    .#{$prefix}--text-input {
-      padding-right: $spacing-08;
-    }
-
-    &[size='sm'] .#{$prefix}--text-input__invalid-icon {
-      right: $spacing-07;
-    }
-
-    &[size='md'] .#{$prefix}--text-input__invalid-icon,
-    .#{$prefix}--text-input__invalid-icon {
-      right: $spacing-08;
-    }
-
-    &[size='lg'] .#{$prefix}--text-input__invalid-icon {
-      right: $spacing-09;
-    }
-  }
-}
diff --git a/packages/carbon-web-components/src/components/input/input.ts b/packages/carbon-web-components/src/components/input/input.ts
deleted file mode 100644
index a7d932272ad..00000000000
--- a/packages/carbon-web-components/src/components/input/input.ts
+++ /dev/null
@@ -1,321 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, query, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import settings from 'carbon-components/es/globals/js/settings';
-import View16 from '@carbon/icons/lib/view/16';
-import ViewOff16 from '@carbon/icons/lib/view--off/16';
-import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import {
-  FLOATING_MENU_ALIGNMENT,
-  FLOATING_MENU_DIRECTION,
-} from '../floating-menu/floating-menu';
-import ifNonEmpty from '../../globals/directives/if-non-empty';
-import FormMixin from '../../globals/mixins/form';
-import ValidityMixin from '../../globals/mixins/validity';
-import { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from './defs';
-import styles from './input.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-export { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE };
-
-const { prefix } = settings;
-
-/**
- * Input element. Supports all the usual attributes for textual input types
- *
- * @element bx-input
- * @slot helper-text - The helper text.
- * @slot label-text - The label text.
- * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
- */
-@customElement(`${prefix}-input`)
-export default class BXInput extends ValidityMixin(FormMixin(LitElement)) {
-  /**
-   * The underlying input element
-   */
-  @query('input')
-  protected _input!: HTMLInputElement;
-
-  /**
-   * The internal value.
-   */
-  protected _value = '';
-
-  /**
-   * Set initial value of input
-   */
-  @property({ reflect: true })
-  value = '';
-
-  /**
-   * Handles `oninput` event on the `<input>`.
-   *
-   * @param event The event.
-   */
-  protected _handleInput({ target }: Event) {
-    this.value = (target as HTMLInputElement).value;
-  }
-
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
-    const { disabled, name, value } = this;
-    if (!disabled) {
-      formData.append(name, value);
-    }
-  }
-
-  /**
-   * May be any of the standard HTML autocomplete options
-   */
-  @property()
-  autocomplete = '';
-
-  /**
-   * Sets the input to be focussed automatically on page load. Defaults to false
-   */
-  @property({ type: Boolean })
-  autofocus = false;
-
-  /**
-   * The color scheme.
-   */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = INPUT_COLOR_SCHEME.REGULAR;
-
-  /**
-   * Controls the disabled state of the input
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  /**
-   * The helper text.
-   */
-  @property({ attribute: 'helper-text' })
-  helperText = '';
-
-  /**
-   * Controls the invalid state and visibility of the `validityMessage`
-   */
-  @property({ type: Boolean, reflect: true })
-  invalid = false;
-
-  /**
-   * The label text.
-   */
-  @property({ attribute: 'label-text' })
-  labelText = '';
-
-  /**
-   * Name for the input in the `FormData`
-   */
-  @property()
-  name = '';
-
-  /**
-   * Pattern to validate the input against for HTML validity checking
-   */
-  @property()
-  pattern = '';
-
-  /**
-   * Value to display when the input has an empty `value`
-   */
-  @property({ reflect: true })
-  placeholder = '';
-
-  /**
-   * Controls the readonly state of the input
-   */
-  @property({ type: Boolean, reflect: true })
-  readonly = false;
-
-  /**
-   * Boolean property to set the required status
-   */
-  @property({ type: Boolean, reflect: true })
-  required = false;
-
-  /**
-   * The special validity message for `required`.
-   */
-  @property({ attribute: 'required-validity-message' })
-  requiredValidityMessage = 'Please fill out this field.';
-
-  /**
-   * "Hide password" tooltip text on password visibility toggle
-   */
-  @property()
-  hidePasswordLabel = 'Hide password';
-
-  /**
-   * "Show password" tooltip text on password visibility toggle
-   */
-  @property()
-  showPasswordLabel = 'Show password';
-
-  /**
-   * Boolean property to render password visibility toggle
-   */
-  @property({
-    type: Boolean,
-    attribute: 'show-password-visibility-toggle',
-    reflect: true,
-  })
-  showPasswordVisibilityToggle = false;
-
-  /**
-   * The input box size.
-   */
-  @property({ reflect: true })
-  size = INPUT_SIZE.REGULAR;
-
-  /**
-   * Specify the alignment of the tooltip to the icon-only button.
-   * Can be one of: start, center, or end.
-   */
-  @property()
-  tooltipAlignment = FLOATING_MENU_ALIGNMENT.CENTER;
-
-  /**
-   * Specify the direction of the tooltip for icon-only buttons.
-   * Can be either top, right, bottom, or left.
-   */
-  @property()
-  tooltipDirection = FLOATING_MENU_DIRECTION.BOTTOM;
-
-  /**
-   * The type of the input. Can be one of the types listed in the INPUT_TYPE enum
-   */
-  @property({ reflect: true })
-  type = INPUT_TYPE.TEXT;
-
-  /**
-   * The validity message. If present and non-empty, this input shows the UI of its invalid state.
-   */
-  @property({ attribute: 'validity-message' })
-  validityMessage = '';
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
-  /**
-   * Handles password visibility toggle button click
-   */
-  private handleTogglePasswordVisibility() {
-    this.type =
-      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
-  }
-
-  render() {
-    const { _handleInput: handleInput } = this;
-
-    const invalidIcon = WarningFilled16({
-      class: `${prefix}--text-input__invalid-icon`,
-    });
-
-    const inputClasses = classMap({
-      [`${prefix}--text-input`]: true,
-      [`${prefix}--text-input--${this.colorScheme}`]: this.colorScheme,
-      [`${prefix}--text-input--invalid`]: this.invalid,
-      [`${prefix}--text-input--${this.size}`]: this.size,
-      [`${prefix}--password-input`]: this.type === INPUT_TYPE.PASSWORD,
-    });
-
-    const labelClasses = classMap({
-      [`${prefix}--label`]: true,
-      [`${prefix}--label--disabled`]: this.disabled,
-    });
-
-    const helperTextClasses = classMap({
-      [`${prefix}--form__helper-text`]: true,
-      [`${prefix}--form__helper-text--disabled`]: this.disabled,
-    });
-
-    const passwordIsVisible = this.type !== INPUT_TYPE.PASSWORD;
-    const passwordVisibilityIcon = passwordIsVisible
-      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })
-      : View16({ class: `${prefix}--icon-visibility-on` });
-
-    const passwordVisibilityToggleClasses = classMap({
-      [`${prefix}--text-input--password__visibility__toggle`]: true,
-      [`${prefix}--btn`]: true,
-      [`${prefix}--btn--icon-only`]: true,
-      [`${prefix}--tooltip__trigger`]: true,
-      [`${prefix}--tooltip--a11y`]: true,
-      [`${prefix}--btn--disabled`]: this.disabled,
-      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
-      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:
-        this.tooltipAlignment,
-    });
-
-    const passwordButtonLabel = html`
-      <span class="${prefix}--assistive-text">
-        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}
-      </span>
-    `;
-
-    const passwordVisibilityButton = () => html`
-      <button
-        type="button"
-        class="${passwordVisibilityToggleClasses}"
-        ?disabled="${this.disabled}"
-        @click="${this.handleTogglePasswordVisibility}">
-        ${!this.disabled && passwordButtonLabel} ${passwordVisibilityIcon}
-      </button>
-    `;
-
-    return html`
-      <label class="${labelClasses}" for="input">
-        <slot name="label-text"> ${this.labelText} </slot>
-      </label>
-      <div
-        class="${prefix}--text-input__field-wrapper"
-        ?data-invalid="${this.invalid}">
-        ${this.invalid ? invalidIcon : null}
-        <input
-          autocomplete="${this.autocomplete}"
-          ?autofocus="${this.autofocus}"
-          class="${inputClasses}"
-          ?data-invalid="${this.invalid}"
-          ?disabled="${this.disabled}"
-          aria-describedby="helper-text"
-          id="input"
-          name="${ifNonEmpty(this.name)}"
-          pattern="${ifNonEmpty(this.pattern)}"
-          placeholder="${ifNonEmpty(this.placeholder)}"
-          ?readonly="${this.readonly}"
-          ?required="${this.required}"
-          type="${ifNonEmpty(this.type)}"
-          .value="${this._value}"
-          @input="${handleInput}" />
-        ${this.showPasswordVisibilityToggle &&
-        (this.type === INPUT_TYPE.PASSWORD || this.type === INPUT_TYPE.TEXT)
-          ? passwordVisibilityButton()
-          : null}
-      </div>
-      <div class="${helperTextClasses}" id="helper-text">
-        <slot name="helper-text"> ${this.helperText} </slot>
-      </div>
-      <div class="${prefix}--form-requirement">
-        <slot name="validity-message"> ${this.validityMessage} </slot>
-      </div>
-    `;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
diff --git a/packages/carbon-web-components/src/components/layer/index.ts b/packages/carbon-web-components/src/components/layer/index.ts
new file mode 100644
index 00000000000..b64000f6bf0
--- /dev/null
+++ b/packages/carbon-web-components/src/components/layer/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 './layer';
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.mdx b/packages/carbon-web-components/src/components/layer/layer-story.mdx
new file mode 100644
index 00000000000..96763e02c0c
--- /dev/null
+++ b/packages/carbon-web-components/src/components/layer/layer-story.mdx
@@ -0,0 +1,111 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Layer
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/layer)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/layer)
+
+The `Layer` component is used to render components on different layers. Each
+layer has a specific set of token values associated with it. You can use these
+tokens directly, or use contextual tokens from our styles package like `$layer`
+or `$field`.
+
+The `Layer` component accepts any `children`. Each child of a `Layer` component
+is rendered using the layer tokens at that layer. `Layer` components can be
+nested indefinitely, but the token sets typically end after 3 layers.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/layer/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['layer'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+Here we define a custom test class to define a custom padding.
+
+```css
+.example-layer-test-component {
+  padding: 1rem;
+}
+```
+
+```html
+<cds-layer>
+  <div class="example-layer-test-component">Layer 1</div>
+  <cds-layer>
+    <div class="example-layer-test-component">Layer 2</div>
+    <cds-layer>
+      <div class="example-layer-test-component">Layer 3</div>
+    </cds-layer>
+  </cds-layer>
+</cds-layer>
+```
+
+## Setting a custom level
+
+You can override the `level` of a `Layer` if you would like to change the
+presentation of a layer in your application. This is particularly helpful if you
+would like to reset the `Layer` level back to `0` or if you want to make sure a
+part of a page always renders in a certain level.
+
+```html
+<cds-layer>
+  <div class="example-layer-test-component">Layer 1</div>
+  <cds-layer level="0">
+    <div class="example-layer-test-component">Layer 1 as well</div>
+    <cds-layer>
+      <div class="example-layer-test-component">Layer 2</div>
+    </cds-layer>
+  </cds-layer>
+</cds-layer>
+```
+
+## Get the current layer
+
+If you are building a component and would like to know what layer the component
+resides within, you can use the `cds-use-layer` event.
+
+This event returns a `CustomEvent` with the current element firing the event, as
+well as its layer:
+
+```js
+  document.addEventListener(`${prefix}-use-layer`, (e) => {
+    const { layer, level } = (e as any).detail;
+
+    // use values here
+  })
+```
+
+If the structure of `Layer` components in your app change, the event will
+automatically fire with the new level.
+
+The level value can be one of: 0, 1, or 2 and will correspond to the level of
+the current layer. This value mirrors the level prop on the Layer component.
+
+## Layer role
+
+As `Layer` is effectively a container component, and you can configure what the
+`Layer` should be seen as in the DOM using `role`. For example, if you would
+like the Layer component to be seen as a section you could write the following:
+
+```html
+<cds-layer role="section">
+  <div class="example-layer-test-component">Layer 1</div>
+</cds-layer>
+```
+
+## `<cds-layer>` attributes, properties and events
+
+<Props of="cds-layer" />
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.scss b/packages/carbon-web-components/src/components/layer/layer-story.scss
new file mode 100644
index 00000000000..a3fbef8cf63
--- /dev/null
+++ b/packages/carbon-web-components/src/components/layer/layer-story.scss
@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+.example-layer-test-component {
+  padding: $spacing-05;
+  background: $layer;
+  color: $text-primary;
+}
diff --git a/packages/carbon-web-components/src/components/layer/layer-story.ts b/packages/carbon-web-components/src/components/layer/layer-story.ts
new file mode 100644
index 00000000000..0f6bf3c580a
--- /dev/null
+++ b/packages/carbon-web-components/src/components/layer/layer-story.ts
@@ -0,0 +1,106 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { radios } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
+import storyDocs from './layer-story.mdx';
+import styles from './layer-story.scss';
+import './index.ts';
+
+const levels = {
+  'First layer': '0',
+  'Second layer': '1',
+  'Third layer': '2',
+};
+
+export const Default = () => {
+  return html`
+    <cds-layer>
+      <div class="example-layer-test-component">Test component</div>
+      <cds-layer>
+        <div class="example-layer-test-component">Test component</div>
+        <cds-layer>
+          <div class="example-layer-test-component">Test component</div>
+        </cds-layer>
+      </cds-layer>
+    </cds-layer>
+    <style>
+      ${styles}
+    </style>
+  `;
+};
+
+Default.storyName = 'Default';
+
+export const CustomLevel = () => {
+  return html`
+    <cds-layer level="0">
+      <div class="example-layer-test-component">Test component</div>
+    </cds-layer>
+    <style>
+      ${styles}
+    </style>
+  `;
+};
+
+CustomLevel.storyName = 'Custom level';
+
+export const UseLayer = () => {
+  document.addEventListener(`${prefix}-use-layer`, (e) => {
+    const { layer, level } = (e as any).detail;
+    layer.querySelector(
+      '.example-layer-test-component.use-layer'
+    ).innerText = `The current layer level is: ${level + 1}`;
+  });
+
+  return html`
+    <cds-layer>
+      <div class="example-layer-test-component use-layer"></div>
+      <cds-layer>
+        <div class="example-layer-test-component use-layer"></div>
+      </cds-layer>
+    </cds-layer>
+    <style>
+      ${styles}
+    </style>
+  `;
+};
+
+UseLayer.storyName = 'useLayer';
+
+export const Playground = (args) => {
+  const { level } = args?.[`${prefix}-layer-playground`] ?? {};
+  return html`
+    <cds-layer level="${level}">
+      <div class="example-layer-test-component">Test component</div>
+    </cds-layer>
+    <style>
+      ${styles}
+    </style>
+  `;
+};
+
+Playground.parameters = {
+  percy: {
+    skip: true,
+  },
+  knobs: {
+    [`${prefix}-layer-playground`]: () => ({
+      level: radios('Specify the layer level', levels, '0'),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Layer',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/layer/layer.scss b/packages/carbon-web-components/src/components/layer/layer.scss
new file mode 100644
index 00000000000..6a07642a0ab
--- /dev/null
+++ b/packages/carbon-web-components/src/components/layer/layer.scss
@@ -0,0 +1,23 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/layer' as *;
+@use '@carbon/styles/scss/config' as *;
+
+:host(#{$prefix}-layer[level='0']) {
+  @extend .#{$prefix}--layer-one;
+}
+
+:host(#{$prefix}-layer[level='1']) {
+  @extend .#{$prefix}--layer-two;
+}
+
+:host(#{$prefix}-layer[level='2']) {
+  @extend .#{$prefix}--layer-three;
+}
diff --git a/packages/carbon-web-components/src/components/layer/layer.ts b/packages/carbon-web-components/src/components/layer/layer.ts
new file mode 100644
index 00000000000..7fbc3c8e605
--- /dev/null
+++ b/packages/carbon-web-components/src/components/layer/layer.ts
@@ -0,0 +1,80 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './layer.scss';
+
+/**
+ * Basic layer
+ *
+ * @element cds-layer
+ * @slot children - The elements contained within the component.
+ */
+@customElement(`${prefix}-layer`)
+class CDSLayer extends LitElement {
+  /**
+   * Specify the layer level and override any existing levels based on hierarchy
+   */
+  @property({ type: Number, reflect: true })
+  level = 0;
+
+  @property()
+  layers;
+
+  updated() {
+    if (!this.layers) {
+      this.layers = this.querySelectorAll(
+        (this.constructor as typeof CDSLayer).selectorLayer
+      );
+    }
+
+    this.layers.forEach((item) => {
+      (item as HTMLElement).setAttribute(
+        'level',
+        ((this.level + 1) % 3).toString()
+      );
+    });
+
+    this.dispatchEvent(
+      new CustomEvent((this.constructor as typeof CDSLayer).eventUseLayer, {
+        bubbles: true,
+        cancelable: true,
+        composed: true,
+        detail: {
+          layer: this,
+          level: this.level,
+        },
+      })
+    );
+  }
+
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  /**
+   * A selector that selects a layer component.
+   */
+  static get selectorLayer() {
+    return `${prefix}-layer`;
+  }
+
+  /**
+   * A selector that selects a layer component.
+   */
+  static get eventUseLayer() {
+    return `${prefix}-use-layer`;
+  }
+
+  static styles = styles;
+}
+
+export default CDSLayer;
diff --git a/packages/carbon-web-components/src/components/link/link-story.mdx b/packages/carbon-web-components/src/components/link/link-story.mdx
index aaf749c58b0..fb27eaab2d2 100644
--- a/packages/carbon-web-components/src/components/link/link-story.mdx
+++ b/packages/carbon-web-components/src/components/link/link-story.mdx
@@ -4,13 +4,13 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Link
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/link)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/link)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/link)
 
 Represents a link. Provided for convenience purpose, you can alternatively use
-`<a class="bx--link">` with Carbon style in place in light DOM.
+`<a class="cds--link">` with Carbon style in place in light DOM.
 
 ## Getting started
 
@@ -28,26 +28,28 @@ import '@carbon/web-components/es/components/list/index.js';
 ### HTML
 
 ```html
-<bx-link href="https://www.ibm.com"> Link </bx-link>
+<cds-link href="https://www.ibm.com"> Link </cds-link>
 ```
 
 ## Paired with icon
 
 Import the desired icon and incorporate with the link text:
 
-````javascript
+```javascript
 import Download16 from '@carbon/web-components/es/icons/download/16';
 
 function App() {
-  return (
-    html`<bx-link href="https://www.ibm.com"> Download ${Download16({ slot: 'icon' })}</bx-link>`
-  );
+  return html`<cds-link href="https://www.ibm.com">
+    Download ${Download16({ slot: 'icon' })}</cds-link
+  >`;
+}
+```
 
-```## `<bx-link>` attributes and properties
+## `<cds-link>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-link disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-link>` without `disabled` attribute).
+`<cds-link disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-link>` without `disabled` attribute).
 
-<Props of="bx-link" />
+<Props of="cds-link" />
 ````
diff --git a/packages/carbon-web-components/src/components/link/link-story.ts b/packages/carbon-web-components/src/components/link/link-story.ts
index 594e07a0235..33f0949c54c 100644
--- a/packages/carbon-web-components/src/components/link/link-story.ts
+++ b/packages/carbon-web-components/src/components/link/link-story.ts
@@ -7,58 +7,53 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
+import { prefix } from '../../globals/settings';
 import Download16 from '@carbon/web-components/es/icons/download/16';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
 import { LINK_SIZE } from './link';
 import storyDocs from './link-story.mdx';
 
 const sizes = {
-  'Regular size': null,
   [`Small size (${LINK_SIZE.SMALL})`]: LINK_SIZE.SMALL,
+  [`Regular size (${LINK_SIZE.REGULAR})`]: LINK_SIZE.REGULAR,
   [`Large size (${LINK_SIZE.LARGE})`]: LINK_SIZE.LARGE,
 };
 
-export const Default = (args) => {
-  const {
-    disabled,
-    download,
-    href,
-    hreflang,
-    linkRole,
-    ping,
-    rel,
-    size,
-    target,
-    type,
-    onClick,
-  } = args?.['bx-link'] ?? {};
-  return html`
-    <bx-link
-      ?disabled="${disabled}"
-      download="${ifNonNull(download)}"
-      href="${ifNonNull(href)}"
-      hreflang="${ifNonNull(hreflang)}"
-      link-role="${ifNonNull(linkRole)}"
-      ping="${ifNonNull(ping)}"
-      rel="${ifNonNull(rel)}"
-      size="${ifNonNull(size)}"
-      target="${ifNonNull(target)}"
-      type="${ifNonNull(type)}"
-      @click="${onClick}">
-      Link
-    </bx-link>
-  `;
+export const Default = () => {
+  return html` <cds-link href="#"> Link </cds-link> `;
 };
 
 Default.storyName = 'Default';
 
+export const Inline = () => {
+  return html`
+    <cds-link inline href="#"
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cds-link
+    >
+    <p>
+      Ut facilisis semper lorem in aliquet. Aliquam accumsan ante justo, vitae
+      fringilla eros vehicula id. Ut at enim quis libero pharetra ullamcorper.
+      Maecenas feugiat sodales arcu ut porttitor. In blandit ultricies est.
+      Vivamus risus massa, cursus eu tellus sed, sagittis commodo nunc.
+      <cds-link inline href="#"
+        >Maecenas nunc mauris, consequat quis mauris sit amet,</cds-link
+      >
+      finibus suscipit nunc. Phasellus ex quam, placerat quis tempus sit amet,
+      pretium nec sem. Etiam dictum scelerisque mauris, blandit ultrices erat
+      pellentesque id. Quisque venenatis purus sit amet sodales condimentum.
+      Duis at tincidunt orci. Ut velit ipsum, lacinia at ex quis, aliquet
+      rhoncus purus. Praesent et scelerisque ligula.
+    </p>
+  `;
+};
+
 export const pairedWithIcon = (args) => {
   const {
     disabled,
@@ -72,36 +67,59 @@ export const pairedWithIcon = (args) => {
     target,
     type,
     onClick,
-  } = args?.['bx-link'] ?? {};
+  } = args?.[`${prefix}-link`] ?? {};
   return html`
-    <bx-link
+    <cds-link
       ?disabled="${disabled}"
-      download="${ifNonNull(download)}"
-      href="${ifNonNull(href)}"
-      hreflang="${ifNonNull(hreflang)}"
-      link-role="${ifNonNull(linkRole)}"
-      ping="${ifNonNull(ping)}"
-      rel="${ifNonNull(rel)}"
-      size="${ifNonNull(size)}"
-      target="${ifNonNull(target)}"
-      type="${ifNonNull(type)}"
+      download="${ifDefined(download)}"
+      href="${ifDefined(href)}"
+      hreflang="${ifDefined(hreflang)}"
+      link-role="${ifDefined(linkRole)}"
+      ping="${ifDefined(ping)}"
+      rel="${ifDefined(rel)}"
+      size="${ifDefined(size)}"
+      target="${ifDefined(target)}"
+      type="${ifDefined(type)}"
       @click="${onClick}">
       Download ${Download16({ slot: 'icon' })}
-    </bx-link>
+    </cds-link>
   `;
 };
 
-export default {
-  title: 'Components/Link',
+export const Playground = (args) => {
+  const { disabled, inline, visited, href, size } =
+    args?.[`${prefix}-link`] ?? {};
+  return html`
+    <cds-link
+      ?disabled="${disabled}"
+      href="${ifDefined(href)}"
+      size="${ifDefined(size)}"
+      ?inline="${inline}"
+      ?visited="${visited}">
+      Link
+    </cds-link>
+  `;
+};
+
+Playground.story = {
   parameters: {
     ...storyDocs.parameters,
     knobs: {
-      'bx-link': () => ({
+      [`${prefix}-link`]: () => ({
         disabled: boolean('Disabled (disabled)', false),
         href: textNullable('Link href (href)', 'https://example.com/'),
+        inline: boolean('Inline (inline)', false),
+        size: select('Link size (size)', sizes, LINK_SIZE.REGULAR),
+        visited: boolean('Visited (visited)', false),
         onClick: action('click'),
-        size: select('Link size (size)', sizes, null),
       }),
     },
   },
 };
+
+export default {
+  title: 'Components/Link',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/link/link.scss b/packages/carbon-web-components/src/components/link/link.scss
index caeb130f4b4..ee4c10c7588 100644
--- a/packages/carbon-web-components/src/components/link/link.scss
+++ b/packages/carbon-web-components/src/components/link/link.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,14 +7,16 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/link/link';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/link';
 
 :host(#{$prefix}-link) {
   outline: none;
 
-  // Re-define the ruleset so this wins over `.bx--link:visited`, etc.
+  // Re-define the ruleset so this wins over `.#{$prefix}--link:visited`, etc.
   .#{$prefix}--link--disabled {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
   .#{$prefix}--link__icon[hidden] {
diff --git a/packages/carbon-web-components/src/components/link/link.ts b/packages/carbon-web-components/src/components/link/link.ts
index bac86923f10..18b926b7f93 100644
--- a/packages/carbon-web-components/src/components/link/link.ts
+++ b/packages/carbon-web-components/src/components/link/link.ts
@@ -7,15 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement, query } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './link.scss';
-
-const { prefix } = settings;
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 /**
  * Link size.
@@ -32,11 +31,11 @@ type LINK_SIZE_TYPE = (typeof LINK_SIZE)[keyof typeof LINK_SIZE];
 /**
  * Link.
  *
- * @element bx-link
+ * @element cds-link
  * @csspart link The link.
  */
 @customElement(`${prefix}-link`)
-class BXLink extends FocusMixin(LitElement) {
+class CDSLink extends FocusMixin(LitElement) {
   /**
    * `true` if there is an icon.
    */
@@ -63,11 +62,14 @@ class BXLink extends FocusMixin(LitElement) {
    * The CSS class list for the link node.
    */
   protected get _classes() {
-    const { disabled, size } = this;
+    const { disabled, size, inline, visited, _hasIcon } = this;
     return classMap({
       [`${prefix}--link`]: true,
       [`${prefix}--link--disabled`]: disabled,
+      [`${prefix}--link--icon`]: _hasIcon,
+      [`${prefix}--link--inline`]: inline,
       [`${prefix}--link--${size}`]: size,
+      [`${prefix}--link--visited`]: visited,
     });
   }
 
@@ -119,17 +121,18 @@ class BXLink extends FocusMixin(LitElement) {
     } = this;
     return html`
       <a
+        tabindex="0"
         id="link"
-        role="${ifNonNull(linkRole)}"
+        role="${ifDefined(linkRole)}"
         class="${classes}"
         part="link"
-        download="${ifNonNull(download)}"
-        href="${ifNonNull(href)}"
-        hreflang="${ifNonNull(hreflang)}"
-        ping="${ifNonNull(ping)}"
-        rel="${ifNonNull(rel)}"
-        target="${ifNonNull(target)}"
-        type="${ifNonNull(type)}"
+        download="${ifDefined(download)}"
+        href="${ifDefined(href)}"
+        hreflang="${ifDefined(hreflang)}"
+        ping="${ifDefined(ping)}"
+        rel="${ifDefined(rel)}"
+        target="${ifDefined(target)}"
+        type="${ifDefined(type)}"
         @click="${handleClick}">
         ${this._renderInner()}
       </a>
@@ -137,7 +140,7 @@ class BXLink extends FocusMixin(LitElement) {
   }
 
   /**
-   * `true` if the button should be disabled.
+   * `true` if the link should be disabled.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
@@ -160,6 +163,12 @@ class BXLink extends FocusMixin(LitElement) {
   @property({ reflect: true })
   hreflang!: string;
 
+  /**
+   * `true` if the link should be inline.
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
   /**
    * The a11y role for `<a>`.
    */
@@ -196,21 +205,22 @@ class BXLink extends FocusMixin(LitElement) {
   @property({ reflect: true })
   type!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * `true` if the link has been visited.
+   */
+  @property({ type: Boolean, reflect: true })
+  visited = false;
 
   render() {
     const { disabled } = this;
     return disabled ? this._renderDisabledLink() : this._renderLink();
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXLink;
+export default CDSLink;
diff --git a/packages/carbon-web-components/src/components/list/list-item.ts b/packages/carbon-web-components/src/components/list/list-item.ts
index 276a53e606e..72c0d08553d 100644
--- a/packages/carbon-web-components/src/components/list/list-item.ts
+++ b/packages/carbon-web-components/src/components/list/list-item.ts
@@ -7,21 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * List item.
  *
- * @element bx-list-item
+ * @element cds-list-item
  * @slot nested - The nested child list.
  */
 @customElement(`${prefix}-list-item`)
-class BXListItem extends LitElement {
+class CDSListItem extends LitElement {
   /**
    * `true` if there is slotted nested child list.
    */
@@ -40,7 +39,7 @@ class BXListItem extends LitElement {
 
   /**
    * `true` if this list item is a child of a nested list.
-   * `<bx-ordered-list>` or `<bx-unordered-list>` automatically sets this property.
+   * `<cds-ordered-list>` or `<cds-unordered-list>` automatically sets this property.
    */
   @property({ type: Boolean, reflect: true })
   nested = false;
@@ -50,7 +49,9 @@ class BXListItem extends LitElement {
     this.toggleAttribute(
       'nested',
       Boolean(
-        this.closest((this.constructor as typeof BXListItem).selectorNestedList)
+        this.closest(
+          (this.constructor as typeof CDSListItem).selectorNestedList
+        )
       )
     );
     if (!this.hasAttribute('role')) {
@@ -84,4 +85,4 @@ class BXListItem extends LitElement {
   static styles = styles;
 }
 
-export default BXListItem;
+export default CDSListItem;
diff --git a/packages/carbon-web-components/src/components/list/list-story.mdx b/packages/carbon-web-components/src/components/list/list-story.mdx
index 4d3b6035d92..3cd288bfd54 100644
--- a/packages/carbon-web-components/src/components/list/list-story.mdx
+++ b/packages/carbon-web-components/src/components/list/list-story.mdx
@@ -6,10 +6,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 Represents a list.
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/list)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/list)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/list)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/list)
 
 ## Getting started
 
@@ -27,51 +27,51 @@ import '@carbon/web-components/es/components/list/index.js';
 ### HTML
 
 ```html
-<h3>bx-ordered-list</h3>
+<h3>cds-ordered-list</h3>
 
-<bx-ordered-list>
-  <bx-list-item>
+<cds-ordered-list>
+  <cds-list-item>
     Ordered List level 1
-    <bx-ordered-list>
-      <bx-list-item>Ordered List level 2</bx-list-item>
-      <bx-list-item>
+    <cds-ordered-list>
+      <cds-list-item>Ordered List level 2</cds-list-item>
+      <cds-list-item>
         Ordered List level 2
-        <bx-ordered-list>
-          <bx-list-item>Ordered List level 2</bx-list-item>
-          <bx-list-item>Ordered List level 2</bx-list-item>
-        </bx-ordered-list>
-      </bx-list-item>
-    </bx-ordered-list>
-  </bx-list-item>
-  <bx-list-item>Ordered List level 1</bx-list-item>
-  <bx-list-item>Ordered List level 1</bx-list-item>
-</bx-ordered-list>
-
-<h3>bx-unordered-list</h3>
-
-<bx-unordered-list>
-  <bx-list-item>
+        <cds-ordered-list>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>Ordered List level 2</cds-list-item>
+        </cds-ordered-list>
+      </cds-list-item>
+    </cds-ordered-list>
+  </cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+</cds-ordered-list>
+
+<h3>cds-unordered-list</h3>
+
+<cds-unordered-list>
+  <cds-list-item>
     Unordered List level 1
-    <bx-unordered-list>
-      <bx-list-item>Unordered List level 2</bx-list-item>
-      <bx-list-item>
+    <cds-unordered-list>
+      <cds-list-item>Unordered List level 2</cds-list-item>
+      <cds-list-item>
         Unordered List level 2
-        <bx-unordered-list>
-          <bx-list-item>Unordered List level 2</bx-list-item>
-          <bx-list-item>Unordered List level 2</bx-list-item>
-        </bx-unordered-list>
-      </bx-list-item>
-    </bx-unordered-list>
-  </bx-list-item>
-  <bx-list-item>Unordered List level 1</bx-list-item>
-  <bx-list-item>Unordered List level 1</bx-list-item>
-</bx-unordered-list>
+        <cds-unordered-list>
+          <cds-list-item>Unordered List level 2</cds-list-item>
+          <cds-list-item>Unordered List level 2</cds-list-item>
+        </cds-unordered-list>
+      </cds-list-item>
+    </cds-unordered-list>
+  </cds-list-item>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+</cds-unordered-list>
 ```
 
-## `<bx-list-item>` attributes and properties
+## `<cds-list-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-list nested>`) and `false` means not setting the attribute (e.g.
-`<bx-list>` without `nested` attribute).
+`<cds-list nested>`) and `false` means not setting the attribute (e.g.
+`<cds-list>` without `nested` attribute).
 
-<Props of="bx-list-item" />
+<Props of="cds-list-item" />
diff --git a/packages/carbon-web-components/src/components/list/list-story.ts b/packages/carbon-web-components/src/components/list/list-story.ts
deleted file mode 100644
index 6af6076a3d7..00000000000
--- a/packages/carbon-web-components/src/components/list/list-story.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 { html } from 'lit-element';
-import './ordered-list';
-import './unordered-list';
-import './list-item';
-import { boolean } from '@storybook/addon-knobs';
-import storyDocs from './list-story.mdx';
-
-export const ordered = (args) => {
-  const { isExpressive } = args?.['bx-list'] ?? {};
-  return html`
-    <bx-ordered-list ?isExpressive="${isExpressive}">
-      <bx-list-item>
-        Ordered List level 1
-        <bx-ordered-list ?isExpressive="${isExpressive}">
-          <bx-list-item>Ordered List level 2</bx-list-item>
-          <bx-list-item>
-            Ordered List level 2
-            <bx-ordered-list ?isExpressive="${isExpressive}">
-              <bx-list-item>Ordered List level 2</bx-list-item>
-              <bx-list-item>Ordered List level 2</bx-list-item>
-            </bx-ordered-list>
-          </bx-list-item>
-        </bx-ordered-list>
-      </bx-list-item>
-      <bx-list-item>Ordered List level 1</bx-list-item>
-      <bx-list-item>Ordered List level 1</bx-list-item>
-    </bx-ordered-list>
-  `;
-};
-
-export const unordered = (args) => {
-  const { isExpressive } = args?.['bx-list'] ?? {};
-  return html`
-    <bx-unordered-list ?isExpressive="${isExpressive}">
-      <bx-list-item>
-        Unordered List level 1
-        <bx-unordered-list ?isExpressive="${isExpressive}">
-          <bx-list-item>Unordered List level 2</bx-list-item>
-          <bx-list-item>
-            Unordered List level 2
-            <bx-unordered-list ?isExpressive="${isExpressive}">
-              <bx-list-item>Unordered List level 2</bx-list-item>
-              <bx-list-item>Unordered List level 2</bx-list-item>
-            </bx-unordered-list>
-          </bx-list-item>
-        </bx-unordered-list>
-      </bx-list-item>
-      <bx-list-item>Unordered List level 1</bx-list-item>
-      <bx-list-item>Unordered List level 1</bx-list-item>
-    </bx-unordered-list>
-  `;
-};
-
-export default {
-  title: 'Components/List',
-  parameters: {
-    ...storyDocs.parameters,
-    knobs: {
-      'bx-list': () => ({
-        isExpressive: boolean('Expressive (isExpressive)', false),
-      }),
-    },
-  },
-};
diff --git a/packages/carbon-web-components/src/components/list/list.scss b/packages/carbon-web-components/src/components/list/list.scss
index 00ca66259b7..680e78f60b1 100644
--- a/packages/carbon-web-components/src/components/list/list.scss
+++ b/packages/carbon-web-components/src/components/list/list.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,28 +7,47 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/list/list';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/list';
 
 :host(#{$prefix}-ordered-list),
 :host(#{$prefix}-unordered-list) {
-  display: block;
-  padding-left: $carbon--spacing-06;
-
   .#{$prefix}--list--nested {
-    margin-left: 0;
+    margin-left: $spacing-07;
   }
-}
 
-:host(#{$prefix}-ordered-list) {
-  .#{$prefix}--list--ordered {
-    list-style-type: decimal;
+  .#{$prefix}--list--nested ::slotted(#{$prefix}-list-item) {
+    padding-left: $spacing-02;
   }
+}
 
+// ordered list
+:host(#{$prefix}-ordered-list) {
   .#{$prefix}--list--ordered.#{$prefix}--list--nested {
     list-style-type: lower-latin;
   }
+
+  &:not(.#{$prefix}--list--nested) {
+    counter-reset: item;
+  }
+
+  &:not(.#{$prefix}--list--nested) ::slotted(#{$prefix}-list-item) {
+    position: relative;
+  }
+
+  .#{$prefix}--list--ordered:not(.#{$prefix}--list--nested)
+    ::slotted(#{$prefix}-list-item)::before {
+    position: absolute;
+    left: rem(-24px);
+    content: counter(item) '.';
+    counter-increment: item;
+  }
 }
 
+// unordered list
 :host(#{$prefix}-unordered-list) {
   // – en dash
   --#{$prefix}-ce--list-marker: '\002013';
@@ -44,7 +63,7 @@ $css--plex: true !default;
 
   &::before {
     position: absolute;
-    left: -$carbon--spacing-05;
+    left: calc(-1 * #{$spacing-05});
     // – en dash
     content: '\002013';
   }
@@ -53,27 +72,22 @@ $css--plex: true !default;
 :host(#{$prefix}-unordered-list[slot='nested'])
   ::slotted(#{$prefix}-list-item)::before {
   // offset to account for smaller ▪ vs –
-  left: -$carbon--spacing-04;
+  left: calc(-1 * #{$spacing-04});
   // ▪ square
   content: '\0025AA';
 }
 
 :host(#{$prefix}-list-item) {
   display: list-item;
-  color: $text-01;
-  margin-bottom: $carbon--spacing-02;
+  color: $text-primary;
 
   &::before {
     // Workaround for https://bugs.webkit.org/show_bug.cgi?id=178237.
     // For non-WebKit browsers, `:host(#{$prefix}-unordered-list) ::slotted(#{$prefix}-list-item)` takes this over.
     position: absolute;
-    left: -$carbon--spacing-05;
+    left: -$spacing-05;
     content: var(--#{$prefix}-ce--list-marker, none);
   }
-
-  .#{$prefix}-ce--list__item__nested-child {
-    padding-top: $carbon--spacing-02;
-  }
 }
 
 :host(#{$prefix}-list-item[nested]) {
diff --git a/packages/carbon-web-components/src/components/list/ordered-list-story.ts b/packages/carbon-web-components/src/components/list/ordered-list-story.ts
new file mode 100644
index 00000000000..e594074ec91
--- /dev/null
+++ b/packages/carbon-web-components/src/components/list/ordered-list-story.ts
@@ -0,0 +1,120 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './ordered-list';
+import './list-item';
+import { boolean } from '@storybook/addon-knobs';
+import storyDocs from './list-story.mdx';
+import { prefix } from '../../globals/settings';
+
+export const Default = () => html`<cds-ordered-list>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+</cds-ordered-list>`;
+
+export default {
+  title: 'Components/Ordered List',
+};
+
+export const NativeListStyles = () => html`<cds-ordered-list native>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>
+    Ordered List level 1
+    <cds-ordered-list native>
+      <cds-list-item>Ordered List level 2</cds-list-item>
+      <cds-list-item>Ordered List level 2</cds-list-item>
+      <cds-list-item>Ordered List level 2</cds-list-item>
+      <cds-list-item>Ordered List level 2</cds-list-item>
+    </cds-ordered-list>
+  </cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+</cds-ordered-list>`;
+
+export const Nested = () => html`<cds-ordered-list>
+  <cds-list-item>
+    Ordered List level 1
+    <cds-ordered-list native>
+      <cds-list-item>Ordered List level 2</cds-list-item>
+      <cds-list-item>
+        Ordered List level 2
+        <cds-ordered-list native>
+          <cds-list-item>Ordered List level 3</cds-list-item>
+          <cds-list-item>Ordered List level 3</cds-list-item>
+        </cds-ordered-list>
+      </cds-list-item>
+    </cds-ordered-list>
+  </cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+  <cds-list-item>Ordered List level 1</cds-list-item>
+</cds-ordered-list>`;
+
+export const Playground = (args) => {
+  const { isExpressive, native } = args?.[`${prefix}-list`] ?? {};
+  return html`
+    <cds-ordered-list ?isExpressive="${isExpressive}" ?native="${native}">
+      <cds-list-item>
+        Ordered List level 1
+        <cds-ordered-list ?isExpressive="${isExpressive}" ?native="${native}">
+          <cds-list-item>Ordered List level 2</cds-list-item>
+          <cds-list-item>
+            Ordered List level 2
+            <cds-ordered-list ?isExpressive="${isExpressive}" ?native="${native}">
+              <cds-list-item>Ordered List level 2</cds-list-item>
+              <cds-list-item>Ordered List level 2</cds-list-item>
+            </cds-ordered-list>
+          </cds-list-item>
+        </cds-ordered-list>
+      </cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+      <cds-list-item>Ordered List level 1</cds-list-item>
+    </cds-ordered-list>
+  </cds-ordered-list>
+  `;
+};
+
+Playground.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    [`${prefix}-list`]: () => ({
+      isExpressive: boolean('Expressive (isExpressive)', false),
+      native: boolean('Native (native)', false),
+    }),
+  },
+};
diff --git a/packages/carbon-web-components/src/components/list/ordered-list.ts b/packages/carbon-web-components/src/components/list/ordered-list.ts
index ead05351624..00f32b9a527 100644
--- a/packages/carbon-web-components/src/components/list/ordered-list.ts
+++ b/packages/carbon-web-components/src/components/list/ordered-list.ts
@@ -7,22 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import BXUnorderedList from './unordered-list';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSUnorderedList from './unordered-list';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Ordered list.
  */
 @customElement(`${prefix}-ordered-list`)
-class BXOrderedList extends BXUnorderedList {
+class CDSOrderedList extends CDSUnorderedList {
+  /**
+   * Specify whether the ordered list should use native list styles instead of
+   * custom counter
+   */
+  @property({ type: Boolean, reflect: true })
+  native = false;
+
   render() {
     const classes = classMap({
-      [`${prefix}--list--ordered`]: true,
+      [`${prefix}--list--ordered`]: !this.native,
+      [`${prefix}--list--ordered--native`]: this.native,
       [`${prefix}--list--nested`]: this.getAttribute('slot') === 'nested',
       [`${prefix}--list--expressive`]: this.isExpressive,
     });
@@ -34,4 +41,4 @@ class BXOrderedList extends BXUnorderedList {
   }
 }
 
-export default BXOrderedList;
+export default CDSOrderedList;
diff --git a/packages/carbon-web-components/src/components/list/unordered-list-story.ts b/packages/carbon-web-components/src/components/list/unordered-list-story.ts
new file mode 100644
index 00000000000..d37874cf268
--- /dev/null
+++ b/packages/carbon-web-components/src/components/list/unordered-list-story.ts
@@ -0,0 +1,75 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import './unordered-list';
+import './list-item';
+import { boolean } from '@storybook/addon-knobs';
+import storyDocs from './list-story.mdx';
+import { prefix } from '../../globals/settings';
+
+export const Default = () => html`<cds-unordered-list>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+</cds-unordered-list>`;
+
+export default {
+  title: 'Components/Unordered List',
+};
+
+export const Nested = () => html`<cds-unordered-list>
+  <cds-list-item>
+    Unordered List level 1
+    <cds-unordered-list>
+      <cds-list-item>Unordered List level 2</cds-list-item>
+      <cds-list-item>
+        Unordered List level 2
+        <cds-unordered-list>
+          <cds-list-item>Unordered List level 3</cds-list-item>
+          <cds-list-item>Unordered List level 3</cds-list-item>
+        </cds-unordered-list>
+      </cds-list-item>
+    </cds-unordered-list>
+  </cds-list-item>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+  <cds-list-item>Unordered List level 1</cds-list-item>
+</cds-unordered-list>`;
+
+export const Playground = (args) => {
+  const { isExpressive } = args?.[`${prefix}-list`] ?? {};
+  return html`
+    <cds-unordered-list ?isExpressive="${isExpressive}">
+      <cds-list-item>
+        Unordered List level 1
+        <cds-unordered-list ?isExpressive="${isExpressive}">
+          <cds-list-item>Unordered List level 2</cds-list-item>
+          <cds-list-item>
+            Unordered List level 2
+            <cds-unordered-list ?isExpressive="${isExpressive}">
+              <cds-list-item>Unordered List level 2</cds-list-item>
+              <cds-list-item>Unordered List level 2</cds-list-item>
+            </cds-unordered-list>
+          </cds-list-item>
+        </cds-unordered-list>
+      </cds-list-item>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+      <cds-list-item>Unordered List level 1</cds-list-item>
+    </cds-unordered-list>
+  `;
+};
+
+Playground.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    [`${prefix}-list`]: () => ({
+      isExpressive: boolean('Expressive (isExpressive)', false),
+    }),
+  },
+};
diff --git a/packages/carbon-web-components/src/components/list/unordered-list.ts b/packages/carbon-web-components/src/components/list/unordered-list.ts
index c38ad5e4eee..598abe1c492 100644
--- a/packages/carbon-web-components/src/components/list/unordered-list.ts
+++ b/packages/carbon-web-components/src/components/list/unordered-list.ts
@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Ordered list.
  */
 @customElement(`${prefix}-unordered-list`)
-class BXUnorderedList extends LitElement {
+class CDSUnorderedList extends LitElement {
   /**
    * `true` if expressive theme enabled.
    */
@@ -30,7 +29,7 @@ class BXUnorderedList extends LitElement {
     // Uses attribute for lookup from child
     if (
       this.closest(
-        (this.constructor as typeof BXUnorderedList).selectorListItem
+        (this.constructor as typeof CDSUnorderedList).selectorListItem
       )
     ) {
       this.setAttribute('slot', 'nested');
@@ -63,4 +62,4 @@ class BXUnorderedList extends LitElement {
   static styles = styles;
 }
 
-export default BXUnorderedList;
+export default CDSUnorderedList;
diff --git a/packages/carbon-web-components/src/components/loading/defs.ts b/packages/carbon-web-components/src/components/loading/defs.ts
index 966729f6df2..27fcbcfdb4b 100644
--- a/packages/carbon-web-components/src/components/loading/defs.ts
+++ b/packages/carbon-web-components/src/components/loading/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -20,9 +20,4 @@ export enum LOADING_TYPE {
    * Small spinner.
    */
   SMALL = 'small',
-
-  /**
-   * Overlay spinner.
-   */
-  OVERLAY = 'overlay',
 }
diff --git a/packages/carbon-web-components/src/components/loading/loading-icon.ts b/packages/carbon-web-components/src/components/loading/loading-icon.ts
index c81de43f420..95b60e62a64 100644
--- a/packages/carbon-web-components/src/components/loading/loading-icon.ts
+++ b/packages/carbon-web-components/src/components/loading/loading-icon.ts
@@ -1,18 +1,16 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-html';
-import settings from 'carbon-components/es/globals/js/settings';
+import { html } from 'lit';
+import { prefix } from '../../globals/settings';
 import LOADING_TYPE from './types';
 
-const { prefix } = settings;
-
 /**
  * @param Object options The options.
  * @param [options.assistiveText] The assistive text for the spinner icon.
diff --git a/packages/carbon-web-components/src/components/loading/loading-story.mdx b/packages/carbon-web-components/src/components/loading/loading-story.mdx
index 943f7eaafbd..314864d1806 100644
--- a/packages/carbon-web-components/src/components/loading/loading-story.mdx
+++ b/packages/carbon-web-components/src/components/loading/loading-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Loading
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/loading)
 
 Loading spinners are used when retrieving data or performing slow computations,
 and help to notify users that loading is underway. The waiting experience is a
@@ -32,14 +32,14 @@ import '@carbon/web-components/es/components/loading/index.js';
 
 ```html
 <div style="position: relative; padding: 3rem; display: flex;">
-  <bx-loading></bx-loading>
+  <cds-loading></cds-loading>
 </div>
 ```
 
-## `<bx-loading>` attributes and properties
+## `<cds-loading>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-loading inactive>`) and `false` means not setting the attribute (e.g.
-`<bx-loading>` without `inactive` attribute).
+`<cds-loading inactive>`) and `false` means not setting the attribute (e.g.
+`<cds-loading>` without `inactive` attribute).
 
-<Props of="bx-loading" />
+<Props of="cds-loading" />
diff --git a/packages/carbon-web-components/src/components/loading/loading-story.ts b/packages/carbon-web-components/src/components/loading/loading-story.ts
index 9abe1910d10..30a6337f0f8 100644
--- a/packages/carbon-web-components/src/components/loading/loading-story.ts
+++ b/packages/carbon-web-components/src/components/loading/loading-story.ts
@@ -1,42 +1,54 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { boolean, select } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LOADING_TYPE } from './loading';
 import storyDocs from './loading-story.mdx';
+import { prefix } from '../../globals/settings';
 
 const types = {
   [`Regular (${LOADING_TYPE.REGULAR})`]: null,
   [`Small (${LOADING_TYPE.SMALL})`]: LOADING_TYPE.SMALL,
-  [`With overlay (${LOADING_TYPE.OVERLAY})`]: LOADING_TYPE.OVERLAY,
 };
 
-export const Default = (args) => {
-  const { inactive, type } = args?.['bx-loading'] ?? {};
+export const Default = () => html` <cds-loading></cds-loading> `;
+
+export default {
+  title: 'Components/Loading',
+  parameters: { ...storyDocs.parameters },
+};
+
+export const Playground = (args) => {
+  const { inactive, assistiveText, type, withOverlay } =
+    args?.[`${prefix}-loading`] ?? {};
   return html`
-    <bx-loading ?inactive=${inactive} type=${ifNonNull(type)}></bx-loading>
+    <cds-loading
+      ?inactive=${inactive}
+      assistive-text=${assistiveText}
+      type=${ifDefined(type)}
+      ?overlay=${withOverlay}></cds-loading>
   `;
 };
 
-Default.storyName = 'Default';
-
-export default {
-  title: 'Components/Loading',
-  parameters: {
-    ...storyDocs.parameters,
-    knobs: {
-      'bx-loading': () => ({
-        inactive: boolean('Inactive (inactive)', false),
-        type: select('The spinner type (type)', types, null),
-      }),
-    },
+Playground.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    [`${prefix}-loading`]: () => ({
+      inactive: boolean('Inactive (inactive)', false),
+      assistiveText: text(
+        'Assistive text (assistive-text) - Specify a description that would be used to best describe the loading state',
+        'Loading'
+      ),
+      type: select('The spinner type (type)', types, null),
+      withOverlay: boolean('With overlay (withOverlay)', false),
+    }),
   },
 };
diff --git a/packages/carbon-web-components/src/components/loading/loading.scss b/packages/carbon-web-components/src/components/loading/loading.scss
index 51d8f046850..4d7576cc431 100644
--- a/packages/carbon-web-components/src/components/loading/loading.scss
+++ b/packages/carbon-web-components/src/components/loading/loading.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,17 +7,19 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/typography';
-@import 'carbon-components/scss/components/loading/loading';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/components/loading';
 
 :host(#{$prefix}-loading) {
   @extend .#{$prefix}--loading;
+  display: block;
 }
 
-:host(#{$prefix}-loading[type='overlay']) {
+:host(#{$prefix}-loading[overlay]) {
   @extend .#{$prefix}--loading-overlay;
 
-  // Avoids duplicate animation of the host and the `.bx--loading` in the shadow DOM
+  // Avoids duplicate animation of the host and the `.#{$prefix}--loading` in the shadow DOM
   animation: none;
 }
 
@@ -30,7 +32,7 @@ $css--plex: true !default;
 }
 
 .#{$prefix}--loading__background[hidden] {
-  // Conditional rendering of `circle.bx--loading__background` does not seem to render the `<circle>` well
+  // Conditional rendering of `circle.#{$prefix}--loading__background` does not seem to render the `<circle>` well
   // even though the DOM seems right
   display: none;
 }
diff --git a/packages/carbon-web-components/src/components/loading/loading.ts b/packages/carbon-web-components/src/components/loading/loading.ts
index 01354e94729..0d6fa0d269e 100644
--- a/packages/carbon-web-components/src/components/loading/loading.ts
+++ b/packages/carbon-web-components/src/components/loading/loading.ts
@@ -7,23 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { LOADING_TYPE } from './defs';
 import getLoadingIcon from './loading-icon';
 import styles from './loading.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Spinner indicating loading state.
  *
- * @element bx-loading
+ * @element cds-loading
  */
 @customElement(`${prefix}-loading`)
-class BXLoading extends LitElement {
+class CDSLoading extends LitElement {
   /**
    * The assistive text for the spinner icon.
    */
@@ -36,6 +35,12 @@ class BXLoading extends LitElement {
   @property()
   type = LOADING_TYPE.REGULAR;
 
+  /**
+   * `true` if overlay should be applied.
+   */
+  @property({ type: Boolean, reflect: true })
+  overlay = false;
+
   /**
    * `true` if spinner should stop.
    */
@@ -43,15 +48,14 @@ class BXLoading extends LitElement {
   inactive = false;
 
   render() {
-    const { inactive, assistiveText, type } = this;
+    const { inactive, assistiveText, type, overlay } = this;
     const innerClasses = classMap({
       [`${prefix}--loading`]: true,
       [`${prefix}--loading--stop`]: inactive,
+      [`${prefix}--loading--small`]: type === LOADING_TYPE.SMALL,
     });
     const icon = getLoadingIcon({ assistiveText, type });
-    return type !== LOADING_TYPE.OVERLAY
-      ? icon
-      : html` <div class="${innerClasses}">${icon}</div> `;
+    return overlay ? html`<div class="${innerClasses}">${icon}</div>` : icon;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -59,4 +63,4 @@ class BXLoading extends LitElement {
 
 export { LOADING_TYPE };
 
-export default BXLoading;
+export default CDSLoading;
diff --git a/packages/carbon-web-components/src/components/modal/defs.ts b/packages/carbon-web-components/src/components/modal/defs.ts
index 63be1533e64..cbfa1c05555 100644
--- a/packages/carbon-web-components/src/components/modal/defs.ts
+++ b/packages/carbon-web-components/src/components/modal/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * Copyright IBM Corp. 2020, 2022, 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.
@@ -22,9 +22,9 @@ export enum MODAL_SIZE {
   SMALL = 'sm',
 
   /**
-   * Regular size.
+   * Medium size.
    */
-  REGULAR = '',
+  MEDIUM = 'md',
 
   /**
    * Large size.
diff --git a/packages/carbon-web-components/src/components/modal/index.ts b/packages/carbon-web-components/src/components/modal/index.ts
index 9de71450942..efbc87754da 100644
--- a/packages/carbon-web-components/src/components/modal/index.ts
+++ b/packages/carbon-web-components/src/components/modal/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 2022, 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.
@@ -9,6 +9,7 @@
 
 import './modal';
 import './modal-body';
+import './modal-body-content';
 import './modal-close-button';
 import './modal-footer';
 import './modal-footer-button';
diff --git a/packages/carbon-web-components/src/components/modal/modal-body-content.ts b/packages/carbon-web-components/src/components/modal/modal-body-content.ts
new file mode 100644
index 00000000000..adb583312d2
--- /dev/null
+++ b/packages/carbon-web-components/src/components/modal/modal-body-content.ts
@@ -0,0 +1,29 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './modal.scss';
+
+/**
+ * Modal body content
+ *
+ * @element cds-modal-body-content
+ */
+@customElement(`${prefix}-modal-body-content`)
+class CDSModalBodyContent extends LitElement {
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSModalBodyContent;
diff --git a/packages/carbon-web-components/src/components/modal/modal-body.ts b/packages/carbon-web-components/src/components/modal/modal-body.ts
index 7e34de1a5e1..0189c90c758 100644
--- a/packages/carbon-web-components/src/components/modal/modal-body.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-body.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal body.
  *
- * @element bx-modal-body
+ * @element cds-modal-body
  */
 @customElement(`${prefix}-modal-body`)
-class BXModalBody extends LitElement {
+class CDSModalBody extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
@@ -28,4 +26,4 @@ class BXModalBody extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalBody;
+export default CDSModalBody;
diff --git a/packages/carbon-web-components/src/components/modal/modal-close-button.ts b/packages/carbon-web-components/src/components/modal/modal-close-button.ts
index ceadc914347..0122c6800b0 100644
--- a/packages/carbon-web-components/src/components/modal/modal-close-button.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-close-button.ts
@@ -7,48 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Close20 from '@carbon/icons/lib/close/20';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { prefix } from '../../globals/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal close button.
  *
- * @element bx-modal-close-button
+ * @element cds-modal-close-button
  * @csspart button The button.
  * @csspart close-icon The close icon.
  */
 @customElement(`${prefix}-modal-close-button`)
-class BXModalCloseButton extends FocusMixin(LitElement) {
+class CDSModalCloseButton extends FocusMixin(LitElement) {
   /**
-   * The assistive text for the button.
+   * Specify a label for the close button of the modal; defaults to close
    */
-  @property({ attribute: 'assistive-text' })
-  assistiveText = 'Close';
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  @property({ attribute: 'close-button-label' })
+  closeButtonLabel = 'Close';
 
   render() {
-    const { assistiveText } = this;
+    const { closeButtonLabel } = this;
     return html`
       <button
         part="button"
-        aria-label="${ifNonNull(assistiveText)}"
+        aria-label="${ifDefined(closeButtonLabel)}"
         class="${prefix}--modal-close"
-        title="${ifNonNull(assistiveText)}">
+        title="${ifDefined(closeButtonLabel)}">
         ${Close20({
           part: 'close-icon',
           class: `${prefix}--modal-close__icon`,
@@ -57,7 +47,11 @@ class BXModalCloseButton extends FocusMixin(LitElement) {
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalCloseButton;
+export default CDSModalCloseButton;
diff --git a/packages/carbon-web-components/src/components/modal/modal-footer-button.ts b/packages/carbon-web-components/src/components/modal/modal-footer-button.ts
index e3c873dcd0e..3e26edbe5cc 100644
--- a/packages/carbon-web-components/src/components/modal/modal-footer-button.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-footer-button.ts
@@ -7,22 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import BXButton from '../button/button';
+import { prefix } from '../../globals/settings';
+import CDSButton from '../button/button';
 import buttonStyles from '../button/button.scss';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal footer button.
  *
- * @element bx-modal-footer-button
+ * @element cds-modal-footer-button
  */
 @customElement(`${prefix}-modal-footer-button`)
-class BXModalFooterButton extends BXButton {
+class CDSModalFooterButton extends CDSButton {
   static styles = [buttonStyles, styles]; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalFooterButton;
+export default CDSModalFooterButton;
diff --git a/packages/carbon-web-components/src/components/modal/modal-footer.ts b/packages/carbon-web-components/src/components/modal/modal-footer.ts
index 01d5742facb..62686b973b7 100644
--- a/packages/carbon-web-components/src/components/modal/modal-footer.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-footer.ts
@@ -7,32 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal footer.
  *
- * @element bx-modal-footer
+ * @element cds-modal-footer
  */
 @customElement(`${prefix}-modal-footer`)
-class BXModalFooter extends LitElement {
+class CDSModalFooter extends LitElement {
   /**
    * `true` if this modal footer has more than two buttons.
    */
-  private _hasMoreThanTwoButtons = false;
+  @property({ type: Boolean, reflect: true, attribute: 'has-three-buttons' })
+  hasThreeButtons = false;
 
   /**
    * Handles `slotchange` event.
    */
   private _handleSlotChange(event: Event) {
-    const { selectorButtons } = this.constructor as typeof BXModalFooter;
-    this._hasMoreThanTwoButtons =
+    const { selectorButtons } = this.constructor as typeof CDSModalFooter;
+    this.hasThreeButtons =
       (event.target as HTMLSlotElement)
         .assignedNodes()
         .filter(
@@ -44,29 +43,17 @@ class BXModalFooter extends LitElement {
   }
 
   render() {
-    const {
-      _hasMoreThanTwoButtons: hasMoreThanTwoButtons,
-      _handleSlotChange: handleSlotChange,
-    } = this;
-    const classes = classMap({
-      [`${prefix}--modal-footer`]: true,
-      [`${prefix}--modal-footer--three-button`]: hasMoreThanTwoButtons,
-    });
-    return html`
-      <div class="${classes}">
-        <slot @slotchange="${handleSlotChange}"></slot>
-      </div>
-    `;
+    return html` <slot @slotchange="${this._handleSlotChange}"></slot> `;
   }
 
   /**
    * A selector that selects the child buttons.
    */
   static get selectorButtons() {
-    return `${prefix}-btn,${prefix}-modal-footer-button`;
+    return `${prefix}-button,${prefix}-modal-footer-button`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalFooter;
+export default CDSModalFooter;
diff --git a/packages/carbon-web-components/src/components/modal/modal-header.ts b/packages/carbon-web-components/src/components/modal/modal-header.ts
index 988e904b2c2..cc33a873158 100644
--- a/packages/carbon-web-components/src/components/modal/modal-header.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-header.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal header.
  *
- * @element bx-modal-header
+ * @element cds-modal-header
  */
 @customElement(`${prefix}-modal-header`)
-class BXModalHeader extends LitElement {
+class CDSModalHeader extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
@@ -28,4 +26,4 @@ class BXModalHeader extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalHeader;
+export default CDSModalHeader;
diff --git a/packages/carbon-web-components/src/components/modal/modal-heading.ts b/packages/carbon-web-components/src/components/modal/modal-heading.ts
index 641dbf75a62..f9426d92cb8 100644
--- a/packages/carbon-web-components/src/components/modal/modal-heading.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-heading.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal heading.
  *
- * @element bx-modal-heading
+ * @element cds-modal-heading
  */
 @customElement(`${prefix}-modal-heading`)
-class BXModalHeading extends LitElement {
+class CDSModalHeading extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
@@ -28,4 +26,4 @@ class BXModalHeading extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalHeading;
+export default CDSModalHeading;
diff --git a/packages/carbon-web-components/src/components/modal/modal-label.ts b/packages/carbon-web-components/src/components/modal/modal-label.ts
index 7b8a00afb5d..284f5fe12b5 100644
--- a/packages/carbon-web-components/src/components/modal/modal-label.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-label.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './modal.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Modal label.
  *
- * @element bx-modal-label
+ * @element cds-modal-label
  */
 @customElement(`${prefix}-modal-label`)
-class BXModalLabel extends LitElement {
+class CDSModalLabel extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
@@ -28,4 +26,4 @@ class BXModalLabel extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModalLabel;
+export default CDSModalLabel;
diff --git a/packages/carbon-web-components/src/components/modal/modal-story.mdx b/packages/carbon-web-components/src/components/modal/modal-story.mdx
index 243c3b59040..0c9094d3f15 100644
--- a/packages/carbon-web-components/src/components/modal/modal-story.mdx
+++ b/packages/carbon-web-components/src/components/modal/modal-story.mdx
@@ -4,16 +4,27 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Modal
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/modal)
 
 Modals interrupt user workflow by design. They are most effective when a task
 must be completed before a user can continue. While effective when used
 correctly, modals should be used sparingly to limit disruption to a user
 experience.
 
+- [Modal](#modal)
+  - [Getting started](#getting-started)
+  - [Component API](#component-api)
+  - [Modal sizes](#modal-sizes)
+    - [Overflow content](#overflow-content)
+  - [Modal button variants](#modal-button-variants)
+  - [Using modal title as message](#using-modal-title-as-message)
+  - [Focus management](#focus-management)
+  - [References](#references)
+  - [Feedback](#feedback)
+
 ## Getting started
 
 Here's a quick example to get you started.
@@ -31,22 +42,22 @@ import '@carbon/web-components/es/components/button/index.js';
 ### HTML
 
 ```html
-<bx-btn id="modal-example-button"> Open Modal </bx-btn>
-
-<bx-modal id="modal-example">
-  <bx-modal-header>
-    <bx-modal-close-button></bx-modal-close-button>
-    <bx-modal-label>Label (Optional)</bx-modal-label>
-    <bx-modal-heading>Modal Title</bx-modal-heading>
-  </bx-modal-header>
-  <bx-modal-body><p>Modal text description</p></bx-modal-body>
-  <bx-modal-footer>
-    <bx-modal-footer-button kind="secondary" data-modal-close
-      >Cancel</bx-modal-footer-button
+<cds-button id="modal-example-button"> Open Modal </cds-button>
+
+<cds-modal id="modal-example">
+  <cds-modal-header>
+    <cds-modal-close-button></cds-modal-close-button>
+    <cds-modal-label>Label (Optional)</cds-modal-label>
+    <cds-modal-heading>Modal Title</cds-modal-heading>
+  </cds-modal-header>
+  <cds-modal-body><p>Modal text description</p></cds-modal-body>
+  <cds-modal-footer>
+    <cds-modal-footer-button kind="secondary" data-modal-close
+      >Cancel</cds-modal-footer-button
     >
-    <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-  </bx-modal-footer>
-</bx-modal>
+    <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+  </cds-modal-footer>
+</cds-modal>
 
 <script type="text/javascript">
   document
@@ -57,36 +68,128 @@ import '@carbon/web-components/es/components/button/index.js';
 </script>
 ```
 
+## Component API
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-modal open>`) and `false` means not setting the attribute (e.g.
+`<cds-modal>` without `open` attribute).
+
+<Props of="cds-modal" />
+
+## `<cds-modal-footer-button>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-modal-footer-button disabled>`) and `false` means not setting the
+attribute (e.g. `<cds-modal-footer-button>` without `disabled` attribute).
+
+<Props of="cds-modal-footer-button" />
+
+## Opening/closing modal
+
+For both modal variants, you can open/close the modal by changing the open prop.
+For example, you can implement a button that launches the modal upon click.
+
+```html
+<cds-modal></cds-modal>
+```
+
+## Modal sizes
+
+There are four responsive modal sizes: extra-small (sm), small (sm),
+default/medium (md), and large (lg). You can set it via the size prop.
+
+```html
+<cds-modal size="lg">
+  <cds-modal-header>
+    <cds-modal-close-button></cds-modal-close-button>
+    <cds-modal-label>Label (Optional)</cds-modal-label>
+    <cds-modal-heading>Modal Title</cds-modal-heading>
+  </cds-modal-header>
+  <cds-modal-body>
+    <cds-modal-body-content>Modal text description</cds-modal-body-content>
+  </cds-modal-body>
+  <cds-modal-footer>
+    <cds-modal-footer-button kind="secondary" data-modal-close
+      >Cancel</cds-modal-footer-button
+    >
+    <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+  </cds-modal-footer>
+</cds-modal>
+```
+
+## Overflow content
+
+In cases where even the largest modal size does not fit all of the modal
+content, Carbon design specifies having a "visual fade" at the end of the modal
+body area to indicate there is additional content out of view. You can set
+hasScrollingContent prop to the component as such:
+
+```html
+<cds-modal has-scrolling-content>
+  <cds-modal-header>
+    <cds-modal-close-button></cds-modal-close-button>
+    <cds-modal-label>Label (Optional)</cds-modal-label>
+    <cds-modal-heading>Modal Title</cds-modal-heading>
+  </cds-modal-header>
+  <cds-modal-body>
+    <cds-modal-body-content>Modal text description</cds-modal-body-content>
+    <p>Some very large contents...</p>
+  </cds-modal-body>
+  <cds-modal-footer>
+    <cds-modal-footer-button kind="secondary" data-modal-close
+      >Cancel</cds-modal-footer-button
+    >
+    <cds-modal-footer-button kind="primary">Save</cds-modal-footer-button>
+  </cds-modal-footer>
+</cds-modal>
+```
+
+## Modal button variants
+
+With the modal component you can use up to three buttons. One has to be primary,
+and the others secondary. Only the primary button can be a danger button.
+
+## Using modal title as message
+
+For short, direct messages the title can include the whole message to add visual
+clarity to an otherwise repetitive title and body message.
+
+```html
+<cds-modal>
+  <cds-modal-header>
+    <cds-modal-close-button></cds-modal-close-button>
+    <cds-modal-heading>You have been successfully signed out</cds-modal-heading>
+  </cds-modal-header>
+  <cds-modal-body></cds-modal-body>
+</cds-modal>
+```
+
 ## Focus management
 
-`<bx-modal>` puts focus on one of the following elements (in priority order)
+`<cds-modal>` puts focus on one of the following elements (in priority order)
 once it gets open:
 
 1. An programmatic-focusable element with `data-modal-primary-focus` attribute
 2. The primary button in modal footer
 3. The first sequential-focusable child element
 
-`<bx-modal>` enables "focus-wrapping" behavior after then. It means that hitting
-tab key at the last sequential-focusable element in `<bx-modal>` puts focus on
-the first sequential-focusable element, and hitting Shift-tab key at the first
-sequential-focusable element in `<bx-modal>` puts focus on the last
+`<cds-modal>` enables "focus-wrapping" behavior after then. It means that
+hitting tab key at the last sequential-focusable element in `<cds-modal>` puts
+focus on the first sequential-focusable element, and hitting Shift-tab key at
+the first sequential-focusable element in `<cds-modal>` puts focus on the last
 sequential-focusable element.
 
-Once `<bx-modal>` gets closed, it puts focus on the last focused element before
+Once `<cds-modal>` gets closed, it puts focus on the last focused element before
 it got open, typically the launcher button.
 
-## `<bx-modal>` attributes and properties
+## References
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-modal open>`) and `false` means not setting the attribute (e.g.
-`<bx-modal>` without `open` attribute).
-
-<Props of="bx-modal" />
+Check out the
+[usage guidelines](https://www.carbondesignsystem.com/components/modal/usage/)
+on the Carbon Design System website.
 
-## `<bx-modal-footer-button>` attributes and properties
-
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-modal-footer-button disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-modal-footer-button>` without `disabled` attribute).
+## Feedback
 
-<Props of="bx-modal-footer-button" />
+Help us improve this component by providing feedback through, asking questions
+on Slack,or updating this file on
+[GitHub](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/edit/main/packages/carbon-web-components/src/components/modal/modal-story.mdx).
diff --git a/packages/carbon-web-components/src/components/modal/modal-story.scss b/packages/carbon-web-components/src/components/modal/modal-story.scss
new file mode 100644
index 00000000000..aecea572ab1
--- /dev/null
+++ b/packages/carbon-web-components/src/components/modal/modal-story.scss
@@ -0,0 +1,15 @@
+//
+// 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.
+//
+
+/* stylelint-disable selector-type-no-unknown */
+bx-modal[open] {
+  // `@extend` usage in the corresponding rule in `modal.scss` causes the ruleset defined after `:host(bx-modal)`,
+  // which itself is OK, but it causes an adverse effect in Playwright WebKit environment
+  // TODO: Upgrade Playwright soon
+  opacity: 1;
+  visibility: inherit;
+}
diff --git a/packages/carbon-web-components/src/components/modal/modal-story.ts b/packages/carbon-web-components/src/components/modal/modal-story.ts
index cd222f2d6da..8c7dc0abd55 100644
--- a/packages/carbon-web-components/src/components/modal/modal-story.ts
+++ b/packages/carbon-web-components/src/components/modal/modal-story.ts
@@ -7,143 +7,386 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { html } from 'lit';
+import { boolean, select, text } from '@storybook/addon-knobs';
 import '../button/button';
 import { MODAL_SIZE } from './modal';
-import './modal-header';
-import './modal-close-button';
-import './modal-heading';
-import './modal-label';
-import './modal-body';
-import './modal-footer';
-import './modal-footer-button';
+import './index';
 import storyDocs from './modal-story.mdx';
 
+const toggleButton = () => {
+  document.querySelector('cds-modal')?.toggleAttribute('open');
+};
+
 const sizes = {
   [`Extra small size (${MODAL_SIZE.EXTRA_SMALL})`]: MODAL_SIZE.EXTRA_SMALL,
   [`Small size (${MODAL_SIZE.SMALL})`]: MODAL_SIZE.SMALL,
-  [`Regular size`]: null,
+  [`Medium size (${MODAL_SIZE.MEDIUM})`]: MODAL_SIZE.MEDIUM,
   [`Large size (${MODAL_SIZE.LARGE})`]: MODAL_SIZE.LARGE,
 };
 
-export const Default = (args) => {
-  const { open, size, disableClose, onBeforeClose, onClose } =
-    args?.['bx-modal'] ?? {};
-  const handleBeforeClose = (event: CustomEvent) => {
-    onBeforeClose(event);
-    if (disableClose) {
-      event.preventDefault();
-    }
-  };
+const buttons = {
+  'One (1)': 1,
+  'Two (2)': 2,
+  'Three (3)': 3,
+};
+
+export const Default = () => {
+  return html`
+    <cds-modal open prevent-close>
+      <cds-modal-header>
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-label>Account resources</cds-modal-label>
+        <cds-modal-heading>Add a custom domain</cds-modal-heading>
+      </cds-modal-header>
+      <cds-modal-body>
+        <cds-modal-body-content description>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </cds-modal-body-content>
+        <cds-form-item>
+          <cds-text-input placeholder="e.g. github.com" label="Domain name">
+          </cds-text-input>
+        </cds-form-item>
+
+        <cds-form-item>
+          <cds-select placeholder="US South" label-text="Region">
+            <cds-select-item value="us-south">US South</cds-select-item>
+            <cds-select-item value="us-east">US East</cds-select-item>
+          </cds-select>
+        </cds-form-item>
+
+        <cds-dropdown label="Dropdown" title-text="Dropdown">
+          <cds-dropdown-item value="one">One</cds-dropdown-item>
+          <cds-dropdown-item value="two">Two</cds-dropdown-item>
+        </cds-dropdown>
 
+        <cds-multi-select label="Multiselect" title-text="Multiselect">
+          <cds-multi-select-item value="option-1"
+            >Option 1</cds-multi-select-item
+          >
+          <cds-multi-select-item value="option-2"
+            >Option 2</cds-multi-select-item
+          >
+        </cds-multi-select>
+      </cds-modal-body>
+      <cds-modal-footer>
+        <cds-modal-footer-button kind="secondary"
+          >Cancel</cds-modal-footer-button
+        >
+        <cds-modal-footer-button>Add</cds-modal-footer-button>
+      </cds-modal-footer>
+    </cds-modal>
+  `;
+};
+
+export const DangerModal = () => {
   return html`
-    <bx-modal
-      ?open="${open}"
-      size="${ifNonNull(size)}"
-      @bx-modal-beingclosed=${handleBeforeClose}
-      @bx-modal-closed=${onClose}>
-      <bx-modal-header>
-        <bx-modal-close-button></bx-modal-close-button>
-        <bx-modal-label>Label (Optional)</bx-modal-label>
-        <bx-modal-heading>Modal Title</bx-modal-heading>
-      </bx-modal-header>
-      <bx-modal-body><p>Modal text description</p></bx-modal-body>
-      <bx-modal-footer>
-        <bx-modal-footer-button kind="secondary" data-modal-close
-          >Cancel</bx-modal-footer-button
+    <cds-modal open prevent-close>
+      <cds-modal-header>
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-label>Account resources</cds-modal-label>
+        <cds-modal-heading
+          >Are you sure you want to delete this custom
+          domain?</cds-modal-heading
         >
-        <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-      </bx-modal-footer>
-    </bx-modal>
+      </cds-modal-header>
+      <cds-modal-footer>
+        <cds-modal-footer-button kind="secondary"
+          >Cancel</cds-modal-footer-button
+        >
+        <cds-modal-footer-button kind="danger">Delete</cds-modal-footer-button>
+      </cds-modal-footer>
+    </cds-modal>
   `;
 };
 
-Default.storyName = 'Default';
-
-export const SingleButton = (args) => {
-  const { open, size, disableClose, onBeforeClose, onClose } =
-    args?.['bx-modal'] ?? {};
-  const handleBeforeClose = (event: CustomEvent) => {
-    onBeforeClose(event);
-    if (disableClose) {
-      event.preventDefault();
-    }
-  };
+export const FullWidth = () => {
   return html`
-    <bx-modal
-      ?open="${open}"
-      size="${ifNonNull(size)}"
-      @bx-modal-beingclosed=${handleBeforeClose}
-      @bx-modal-closed=${onClose}>
-      <bx-modal-header>
-        <bx-modal-close-button></bx-modal-close-button>
-        <bx-modal-label>Label (Optional)</bx-modal-label>
-        <bx-modal-heading>Modal Title</bx-modal-heading>
-      </bx-modal-header>
-      <bx-modal-body><p>Modal text description</p></bx-modal-body>
-      <bx-modal-footer>
-        <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-      </bx-modal-footer>
-    </bx-modal>
+    <cds-modal open full-width prevent-close>
+      <cds-modal-header>
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-label>An example of a modal with no padding</cds-modal-label>
+        <cds-modal-heading>Full Width Modal</cds-modal-heading>
+      </cds-modal-header>
+      <cds-modal-body>
+        <cds-structured-list>
+          <cds-structured-list-head>
+            <cds-structured-list-header-row>
+              <cds-structured-list-header-cell
+                >Column A</cds-structured-list-header-cell
+              >
+              <cds-structured-list-header-cell
+                >Column B</cds-structured-list-header-cell
+              >
+              <cds-structured-list-header-cell
+                >Column C</cds-structured-list-header-cell
+              >
+            </cds-structured-list-header-row>
+          </cds-structured-list-head>
+          <cds-structured-list-body>
+            <cds-structured-list-row>
+              <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+              <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+              <cds-structured-list-cell
+                >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
+              </cds-structured-list-cell>
+            </cds-structured-list-row>
+            <cds-structured-list-row>
+              <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+              <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+              <cds-structured-list-cell
+                >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
+              </cds-structured-list-cell>
+            </cds-structured-list-row>
+            <cds-structured-list-row>
+              <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+              <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+              <cds-structured-list-cell
+                >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
+                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+                Pellentesque vulputate nisl a porttitor interdum.
+              </cds-structured-list-cell>
+            </cds-structured-list-row>
+          </cds-structured-list-body>
+        </cds-structured-list>
+      </cds-modal-body>
+      <cds-modal-footer>
+        <cds-modal-footer-button kind="secondary"
+          >Cancel</cds-modal-footer-button
+        >
+        <cds-modal-footer-button>Add</cds-modal-footer-button>
+      </cds-modal-footer>
+    </cds-modal>
   `;
 };
 
-SingleButton.storyName = 'Single button';
-
-export const ThreeButtons = (args) => {
-  const { open, size, disableClose, onBeforeClose, onClose } =
-    args?.['bx-modal'] ?? {};
-  const handleBeforeClose = (event: CustomEvent) => {
-    onBeforeClose(event);
-    if (disableClose) {
-      event.preventDefault();
-    }
-  };
+export const PassiveModal = () => {
   return html`
-    <bx-modal
-      ?open="${open}"
-      size="${ifNonNull(size)}"
-      @bx-modal-beingclosed=${handleBeforeClose}
-      @bx-modal-closed=${onClose}>
-      <bx-modal-header>
-        <bx-modal-close-button></bx-modal-close-button>
-        <bx-modal-label>Label (Optional)</bx-modal-label>
-        <bx-modal-heading>Modal Title</bx-modal-heading>
-      </bx-modal-header>
-      <bx-modal-body><p>Modal text description</p></bx-modal-body>
-      <bx-modal-footer>
-        <bx-modal-footer-button kind="secondary">Apply</bx-modal-footer-button>
-        <bx-modal-footer-button kind="secondary" data-modal-close
-          >Cancel</bx-modal-footer-button
+    <cds-modal open prevent-close>
+      <cds-modal-header>
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-heading
+          >You have been successfully signed out</cds-modal-heading
         >
-        <bx-modal-footer-button kind="primary">Save</bx-modal-footer-button>
-      </bx-modal-footer>
-    </bx-modal>
+      </cds-modal-header>
+      <cds-modal-body></cds-modal-body>
+    </cds-modal>
   `;
 };
 
-ThreeButtons.storyName = 'Three buttons';
+export const WithStateManager = () => {
+  return html`
+    <cds-modal>
+      <cds-modal-header>
+        <cds-modal-close-button></cds-modal-close-button>
+        <cds-modal-label>Account resources</cds-modal-label>
+        <cds-modal-heading>Add a custom domain</cds-modal-heading>
+      </cds-modal-header>
+      <cds-modal-body>
+        <cds-modal-body-content description>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </cds-modal-body-content>
+        <cds-form-item>
+          <cds-text-input placeholder="e.g. github.com" label="Domain name">
+          </cds-text-input>
+        </cds-form-item>
+        <cds-select label-text="Domain name" placeholder="US South">
+          <cds-select-item value="us-south">Option 1</cds-select-item>
+          <cds-select-item value="us-east">Option 2</cds-select-item>
+        </cds-select>
+      </cds-modal-body>
+      <cds-modal-footer>
+        <cds-modal-footer-button kind="secondary" data-modal-close
+          >Cancel</cds-modal-footer-button
+        >
+        <cds-modal-footer-button>Add</cds-modal-footer-button>
+      </cds-modal-footer>
+    </cds-modal>
+    <cds-button @click="${toggleButton}">Launch modal</cds-button>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    alert,
+    ariaLabel,
+    danger,
+    open,
+    closeButtonLabel,
+    hasScrollingContent,
+    fullWidth,
+    modalHeading,
+    modalLabel,
+    numberOfButtons,
+    passiveModal,
+    preventCloseOnClickOutside,
+    primaryButtonDisabled,
+    size,
+  } = args?.['cds-modal'] ?? {};
+  return html`
+    <cds-modal
+      aria-label=${ariaLabel}
+      ?prevent-close-on-click-outside=${preventCloseOnClickOutside}
+      ?alert=${alert}
+      size="${size}"
+      ?open=${open}
+      ?full-width=${fullWidth}
+      prevent-close
+      ?has-scrolling-content="${hasScrollingContent}">
+      <cds-modal-header>
+        <cds-modal-close-button
+          close-button-label=${closeButtonLabel}></cds-modal-close-button>
+        <cds-modal-label>${modalLabel}</cds-modal-label>
+        <cds-modal-heading>${modalHeading}</cds-modal-heading>
+      </cds-modal-header>
+      <cds-modal-body>
+        <cds-modal-body-content description>
+          Custom domains direct requests for your apps in this Cloud Foundry
+          organization to a URL that you own. A custom domain can be a shared
+          domain, a shared subdomain, or a shared domain and host.
+        </cds-modal-body-content>
+        <cds-form-item>
+          <cds-text-input placeholder="e.g. github.com" label="Domain name">
+          </cds-text-input>
+        </cds-form-item>
+        <cds-select label-text="Region" placeholder="US South">
+          <cds-select-item value="us-south">Option 1</cds-select-item>
+          <cds-select-item value="us-east">Option 2</cds-select-item>
+        </cds-select>
+
+        ${hasScrollingContent
+          ? html` <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <h3>Lorem ipsum</h3>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>
+              <cds-modal-body-content>
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                id accumsan augue. Phasellus consequat augue vitae tellus
+                tincidunt posuere. Curabitur justo urna, consectetur vel elit
+                iaculis, ultrices condimentum risus. Nulla facilisi. Etiam
+                venenatis molestie tellus. Quisque consectetur non risus eu
+                rutrum.
+              </cds-modal-body-content>`
+          : ``}
+      </cds-modal-body>
+
+      ${passiveModal
+        ? ``
+        : html` <cds-modal-footer>
+            ${numberOfButtons > 2
+              ? html` <cds-modal-footer-button kind="secondary"
+                  >Keep both</cds-modal-footer-button
+                >`
+              : ``}
+            ${numberOfButtons >= 2
+              ? html` <cds-modal-footer-button kind="secondary"
+                  >${numberOfButtons === 2
+                    ? html`Cancel`
+                    : 'Rename'}</cds-modal-footer-button
+                >`
+              : ``}
+
+            <cds-modal-footer-button
+              ?disabled=${primaryButtonDisabled}
+              kind="${danger ? 'danger' : 'primary'}"
+              >Add</cds-modal-footer-button
+            >
+          </cds-modal-footer>`}
+    </cds-modal>
+  `;
+};
+
+Playground.parameters = {
+  ...storyDocs.parameters,
+  knobs: {
+    'cds-modal': () => ({
+      alert: boolean('Alert (alert)', false),
+      ariaLabel: text('Aria label (aria-label)', ''),
+      closeButtonLabel: text(
+        'Close button label (close-button-label)',
+        'Close'
+      ),
+      danger: boolean('Danger mode (danger)', false),
+      fullWidth: boolean('Full width (full-width)', false),
+      hasScrollingContent: boolean(
+        'Has scrolling content (has-scrolling-content)',
+        false
+      ),
+      modalHeading: text('Modal heading', 'Add a custom domain'),
+      modalLabel: text('Modal label', ''),
+      numberOfButtons: select('Number of buttons', buttons, 2),
+      open: boolean('Open (open)', true),
+      passiveModal: boolean('Passive modal (passive-modal)', false),
+      preventCloseOnClickOutside: boolean(
+        'Prevent close on click outside',
+        false
+      ),
+      primaryButtonDisabled: boolean('Primary button disabled', false),
+      size: select('Modal size (size)', sizes, null),
+    }),
+  },
+};
 
 export default {
   title: 'Components/Modal',
   decorators: [(story) => html` ${story()} `],
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-modal': () => ({
-        open: boolean('Open (open)', true),
-        danger: boolean('Danger mode (danger)', false),
-        disableClose: boolean(
-          'Disable user-initiated close action (Call event.preventDefault() in bx-modal-beingclosed event)',
-          false
-        ),
-        size: select('Modal size (size)', sizes, null),
-        onBeforeClose: action('bx-modal-beingclosed'),
-        onClose: action('bx-modal-closed'),
-      }),
-    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/modal/modal.scss b/packages/carbon-web-components/src/components/modal/modal.scss
index 3210ce3221b..c29443fedbd 100644
--- a/packages/carbon-web-components/src/components/modal/modal.scss
+++ b/packages/carbon-web-components/src/components/modal/modal.scss
@@ -5,87 +5,43 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/modal/modal';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/layer' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/modal' as *;
+@use '@carbon/styles/scss/components/button' as *;
 
-:host(#{$prefix}-modal) {
-  // `@extend .#{$prefix}--modal` seems to cause `&.is-visible` style to be brought into `:host(#{$prefix}-modal)` with ShadyCSS
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  width: 100vw;
-  height: 100vh;
-  z-index: z('modal');
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  content: '';
-  background-color: $overlay;
-  opacity: 0;
-  visibility: hidden;
-  transition: background-color $duration--slow-02 motion(exit, expressive),
-    opacity $duration--moderate-02 motion(exit, expressive),
-    z-index $duration--slow-02 motion(exit, expressive),
-    visibility $duration--moderate-02 motion(exit, expressive);
-
-  .#{$prefix}--text-input,
-  .#{$prefix}--select-input {
-    background-color: $field-02;
-  }
+:host(#{$prefix}-modal[open]) {
+  @extend .#{$prefix}--modal;
 
-  .#{$prefix}--modal-container {
-    transform: translate3d(0, 0, 0);
-  }
+  opacity: 1;
+  transition: opacity $duration-moderate-02 motion(entrance, expressive),
+    visibility 0ms linear;
+  visibility: inherit;
 
   .#{$prefix}--modal-container {
-    @include carbon--breakpoint(md) {
-      ::slotted(#{$prefix}-modal-header),
-      ::slotted(#{$prefix}-modal-body) {
-        padding-right: 20%;
-      }
-    }
-  }
-
-  .#{$prefix}--modal-container--xs,
-  .#{$prefix}--modal-container--sm,
-  .#{$prefix}--modal-container--xl {
-    ::slotted(#{$prefix}-modal-header) {
-      padding-right: $spacing-09;
-    }
-
-    ::slotted(#{$prefix}-modal-body) {
-      padding-right: $spacing-05;
-    }
-  }
-
-  .#{$prefix}--modal-container--sm {
-    @include carbon--breakpoint(xlg) {
-      ::slotted(#{$prefix}-modal-header),
-      ::slotted(#{$prefix}-modal-body) {
-        padding-right: 20%;
-      }
-    }
+    transform: translate3d(0, 0, 0);
+    transition: transform $duration-moderate-02 motion(entrance, expressive);
   }
 
-  .#{$prefix}--modal-container--lg {
-    @include carbon--breakpoint(md) {
-      ::slotted(#{$prefix}-modal-header),
-      ::slotted(#{$prefix}-modal-body) {
-        padding-right: 20%;
-      }
-    }
+  @media screen and (prefers-reduced-motion: reduce) {
+    transition: none;
   }
 }
 
-:host(#{$prefix}-modal[open]) {
-  @extend .#{$prefix}--modal, .is-visible;
-
-  opacity: 1;
-  transition: visibility 0ms linear,
-    opacity $duration--moderate-02 motion(entrance, expressive);
-  visibility: inherit;
+:host(#{$prefix}-modal) {
+  @extend .#{$prefix}--modal;
+}
 
-  @media screen and (prefers-reduced-motion: reduce) {
-    transition: none;
+:host(#{$prefix}-modal[full-width]) {
+  ::slotted(#{$prefix}-modal-body) {
+    margin: 0;
+    padding: 0;
   }
 }
 
@@ -112,29 +68,42 @@
 
 :host(#{$prefix}-modal-body) {
   @extend .#{$prefix}--modal-content;
-}
+  @extend .#{$prefix}--layer-two;
 
-:host(#{$prefix}-modal-footer) {
-  .#{$prefix}--modal-footer--three-button {
-    ::slotted(#{$prefix}-btn),
-    ::slotted(#{$prefix}-modal-footer-button) {
-      flex: 0 1 25%;
-    }
+  ::slotted(#{$prefix}-form-item) {
+    margin-bottom: $spacing-05;
+  }
+
+  ::slotted(#{$prefix}-select:last-of-type) {
+    padding-bottom: 0;
+  }
+
+  ::slotted(*:last-child) {
+    padding-bottom: $spacing-07;
   }
 }
 
-:host(#{$prefix}-modal-footer) ::slotted(#{$prefix}-btn),
-:host(#{$prefix}-modal-footer-button) {
-  max-width: none;
-  width: 50%;
-  height: rem(64px);
-  margin: 0;
+:host(#{$prefix}-modal-body-content) {
+  @include type-style('body-01');
+
+  display: block;
+  padding-right: calc(20% - #{$spacing-07});
+}
+
+:host(#{$prefix}-modal-body-content[description]) {
+  margin-bottom: $spacing-05;
 }
 
-:host(#{$prefix}-modal-footer-button) .#{$prefix}--btn {
-  padding-top: rem(16px);
-  padding-bottom: rem(32px);
-  box-shadow: rem(-1px) 0 0 0 $button-separator;
+:host(#{$prefix}-modal-footer) {
+  @extend .#{$prefix}--modal-footer;
+}
+
+:host(#{$prefix}-modal-footer[has-three-buttons]) {
+  @extend .#{$prefix}--modal-footer--three-button;
+
+  ::slotted(#{$prefix}-modal-footer-button) {
+    flex: 0 1 25%;
+  }
 }
 
 :host(#{$prefix}-modal-footer-button:first-of-type) .#{$prefix}--btn {
@@ -142,11 +111,27 @@
 }
 
 :host(#{$prefix}-modal-footer-button) {
-  &,
-  &:first-of-type {
-    .#{$prefix}--btn:focus {
+  .#{$prefix}--btn {
+    height: 100%;
+    width: 100%;
+    max-width: none;
+
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
+    box-shadow: rem(-1px) 0 0 0 $button-separator;
+
+    &:focus {
       box-shadow: inset 0 0 0 $button-outline-width $focus,
-        inset 0 0 0 $button-border-width $ui-background;
+        inset 0 0 0 $button-border-width $background;
     }
   }
 }
+
+:host(#{$prefix}-modal-footer) ::slotted(#{$prefix}-button),
+:host(#{$prefix}-modal-footer-button) {
+  flex: 0 1 50%;
+  max-width: none;
+  width: 50%;
+  height: $spacing-10;
+  margin: 0;
+}
diff --git a/packages/carbon-web-components/src/components/modal/modal.ts b/packages/carbon-web-components/src/components/modal/modal.ts
index 38f024f6dc9..d444e4c04c2 100644
--- a/packages/carbon-web-components/src/components/modal/modal.ts
+++ b/packages/carbon-web-components/src/components/modal/modal.ts
@@ -7,9 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { MODAL_SIZE } from './defs';
@@ -19,8 +20,6 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { MODAL_SIZE };
 
-const { prefix } = settings;
-
 // eslint-disable-next-line no-bitwise
 const PRECEDING =
   Node.DOCUMENT_POSITION_PRECEDING | Node.DOCUMENT_POSITION_CONTAINS;
@@ -62,15 +61,15 @@ function tryFocusElems(
 /**
  * Modal.
  *
- * @element bx-modal
+ * @element cds-modal
  * @csspart dialog The dialog.
- * @fires bx-modal-beingclosed
+ * @fires cds-modal-beingclosed
  *   The custom event fired before this modal is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this modal.
- * @fires bx-modal-closed - The custom event fired after this modal is closed upon a user gesture.
+ * @fires cds-modal-closed - The custom event fired after this modal is closed upon a user gesture.
  */
 @customElement(`${prefix}-modal`)
-class BXModal extends HostListenerMixin(LitElement) {
+class CDSModal extends HostListenerMixin(LitElement) {
   /**
    * The element that had focus before this modal gets open.
    */
@@ -96,7 +95,10 @@ class BXModal extends HostListenerMixin(LitElement) {
   @HostListener('click')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleClick = (event: MouseEvent) => {
-    if (event.composedPath().indexOf(this.shadowRoot!) < 0) {
+    if (
+      event.composedPath().indexOf(this.shadowRoot!) < 0 &&
+      !this.preventCloseOnClickOutside
+    ) {
       this._handleUserInitiatedClose(event.target);
     }
   };
@@ -126,14 +128,14 @@ class BXModal extends HostListenerMixin(LitElement) {
     // * The viewport still has focus
     // * Modal body used to have focus but no longer has focus
     const { selectorTabbable: selectorTabbableForModal } = this
-      .constructor as typeof BXModal;
+      .constructor as typeof CDSModal;
     if (open && relatedTarget && oldContains && !currentContains) {
       const comparisonResult = (target as Node).compareDocumentPosition(
         relatedTarget as Node
       );
       // eslint-disable-next-line no-bitwise
       if (relatedTarget === startSentinelNode || comparisonResult & PRECEDING) {
-        await (this.constructor as typeof BXModal)._delay();
+        await (this.constructor as typeof CDSModal)._delay();
         if (
           !tryFocusElems(
             this.querySelectorAll(selectorTabbableForModal),
@@ -149,7 +151,7 @@ class BXModal extends HostListenerMixin(LitElement) {
         relatedTarget === endSentinelNode ||
         comparisonResult & FOLLOWING
       ) {
-        await (this.constructor as typeof BXModal)._delay();
+        await (this.constructor as typeof CDSModal)._delay();
         if (!tryFocusElems(this.querySelectorAll(selectorTabbableForModal))) {
           this.focus();
         }
@@ -173,8 +175,9 @@ class BXModal extends HostListenerMixin(LitElement) {
   private _handleClickContainer(event: MouseEvent) {
     if (
       (event.target as Element).matches(
-        (this.constructor as typeof BXModal).selectorCloseButton
-      )
+        (this.constructor as typeof CDSModal).selectorCloseButton
+      ) &&
+      !this.preventClose
     ) {
       this._handleUserInitiatedClose(event.target);
     }
@@ -198,25 +201,57 @@ class BXModal extends HostListenerMixin(LitElement) {
       if (
         this.dispatchEvent(
           new CustomEvent(
-            (this.constructor as typeof BXModal).eventBeforeClose,
+            (this.constructor as typeof CDSModal).eventBeforeClose,
             init
           )
         )
       ) {
         this.open = false;
         this.dispatchEvent(
-          new CustomEvent((this.constructor as typeof BXModal).eventClose, init)
+          new CustomEvent(
+            (this.constructor as typeof CDSModal).eventClose,
+            init
+          )
         );
       }
     }
   }
 
+  /**
+   * Specify whether the Modal is displaying an alert, error or warning.
+   * Should go hand in hand with the danger prop.
+   */
+  @property({ type: Boolean, reflect: true })
+  alert = false;
+
+  /**
+   * Specify text for the accessibility label of the header
+   */
+  @property({ attribute: 'aria-label' })
+  ariaLabel = '';
+
   /**
    * The additional CSS class names for the container <div> of the element.
    */
   @property({ attribute: 'container-class' })
   containerClass = '';
 
+  /**
+   * Specify whether or not the Modal content should have any inner padding.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'full-width' })
+  fullWidth = false;
+
+  /**
+   * Specify whether the modal contains scrolling content
+   */
+  @property({
+    type: Boolean,
+    reflect: true,
+    attribute: 'has-scrolling-content',
+  })
+  hasScrollingContent = false;
+
   /**
    * `true` if the modal should be open.
    */
@@ -227,10 +262,35 @@ class BXModal extends HostListenerMixin(LitElement) {
    * Modal size.
    */
   @property({ reflect: true })
-  size = MODAL_SIZE.REGULAR;
+  size = MODAL_SIZE.MEDIUM;
+
+  /**
+   * Prevent closing on click outside of modal
+   */
+  @property({ type: Boolean, attribute: 'prevent-close-on-click-outside' })
+  preventCloseOnClickOutside = false;
+
+  /**
+   * Prevent the modal from closing after clicking the close button
+   */
+  @property({ type: Boolean, attribute: 'prevent-close' })
+  preventClose = false;
+
+  firstUpdated() {
+    const body = this.querySelector(
+      (this.constructor as typeof CDSModal).selectorModalBody
+    );
+
+    if (!body) {
+      const bodyElement = document.createElement(
+        (this.constructor as typeof CDSModal).selectorModalBody
+      );
+      this.appendChild(bodyElement);
+    }
+  }
 
   render() {
-    const { size } = this;
+    const { alert, ariaLabel, size, hasScrollingContent } = this;
     const containerClass = this.containerClass
       .split(' ')
       .filter(Boolean)
@@ -247,12 +307,16 @@ class BXModal extends HostListenerMixin(LitElement) {
         href="javascript:void 0"
         role="navigation"></a>
       <div
+        aria-label=${ariaLabel}
         part="dialog"
         class=${containerClasses}
-        role="dialog"
+        role="${alert ? 'alert' : 'dialog'}"
         tabindex="-1"
         @click=${this._handleClickContainer}>
         <slot></slot>
+        ${hasScrollingContent
+          ? html` <div class="cds--modal-content--overflow-indicator"></div> `
+          : ``}
       </div>
       <a
         id="end-sentinel"
@@ -267,17 +331,17 @@ class BXModal extends HostListenerMixin(LitElement) {
       if (this.open) {
         this._launcher = this.ownerDocument!.activeElement;
         const primaryFocusNode = this.querySelector(
-          (this.constructor as typeof BXModal).selectorPrimaryFocus
+          (this.constructor as typeof CDSModal).selectorPrimaryFocus
         );
-        await (this.constructor as typeof BXModal)._delay();
+        await (this.constructor as typeof CDSModal)._delay();
         if (primaryFocusNode) {
-          // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,
-          // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle
+          // For cases where a `carbon-web-components` component (e.g. `<cds-button>`) being `primaryFocusNode`,
+          // where its first update/render cycle that makes it focusable happens after `<cds-modal>`'s first update/render cycle
           (primaryFocusNode as HTMLElement).focus();
         } else if (
           !tryFocusElems(
             this.querySelectorAll(
-              (this.constructor as typeof BXModal).selectorTabbable
+              (this.constructor as typeof CDSModal).selectorTabbable
             ),
             true
           )
@@ -322,7 +386,14 @@ class BXModal extends HostListenerMixin(LitElement) {
    * A selector selecting the nodes that should be focused when modal gets open.
    */
   static get selectorPrimaryFocus() {
-    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-btn[kind="primary"]`;
+    return `[data-modal-primary-focus],${prefix}-modal-footer ${prefix}-button[kind="primary"]`;
+  }
+
+  /**
+   * A selector selecting the modal body component
+   */
+  static get selectorModalBody() {
+    return `${prefix}-modal-body`;
   }
 
   /**
@@ -343,4 +414,4 @@ class BXModal extends HostListenerMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXModal;
+export default CDSModal;
diff --git a/packages/carbon-web-components/src/components/multi-select/defs.ts b/packages/carbon-web-components/src/components/multi-select/defs.ts
new file mode 100644
index 00000000000..059a4a2174d
--- /dev/null
+++ b/packages/carbon-web-components/src/components/multi-select/defs.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+
+/**
+ * Multi-select selection feedback options.
+ */
+export enum SELECTION_FEEDBACK_OPTION {
+  /**
+   * selected item stays at it's position
+   */
+  FIXED = 'fixed',
+
+  /**
+   * selected item jumps to top
+   */
+  TOP = 'top',
+
+  /**
+   * selected item jump to top after reopen dropdown
+   */
+  TOP_AFTER_REOPEN = 'top-after-reopen',
+}
diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts b/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts
index fb0fce8f8f0..de61a9c4e1e 100644
--- a/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts
+++ b/packages/carbon-web-components/src/components/multi-select/multi-select-item.ts
@@ -7,22 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property } from 'lit-element';
-import BXDropdownItem from '../dropdown/dropdown-item';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
+import CDSDropdownItem from '../dropdown/dropdown-item';
 import styles from './multi-select.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Multi select item.
  *
- * @element bx-multi-select-item
+ * @element cds-multi-select-item
  */
 @customElement(`${prefix}-multi-select-item`)
-class BXMultiSelectItem extends BXDropdownItem {
+class CDSMultiSelectItem extends CDSDropdownItem {
   /**
    * The property to hide when item is filtered from input
    */
@@ -40,19 +39,14 @@ class BXMultiSelectItem extends BXDropdownItem {
     return html`
       <div class="${prefix}--list-box__menu-item__option">
         <div class="${prefix}--form-item ${prefix}--checkbox-wrapper">
-          <input
-            id="input"
-            type="checkbox"
-            class="${prefix}--checkbox"
-            tabindex="-1"
-            readonly
-            ?disabled=${disabled}
-            .checked=${selected}
+          <span
+            value="${value}"
             name="${ifDefined(selectionName || undefined)}"
-            value="${value}" />
-          <label for="input" class="${prefix}--checkbox-label">
-            <span class="${prefix}--checkbox-label-text"><slot></slot></span>
-          </label>
+            class="${prefix}--checkbox-label"
+            ?disabled=${disabled}
+            data-contained-checkbox-state=${selected}
+            ><slot></slot
+          ></span>
         </div>
       </div>
     `;
@@ -68,4 +62,4 @@ class BXMultiSelectItem extends BXDropdownItem {
   static styles = styles;
 }
 
-export default BXMultiSelectItem;
+export default CDSMultiSelectItem;
diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx b/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
index 6810db97576..214cff12324 100644
--- a/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
+++ b/packages/carbon-web-components/src/components/multi-select/multi-select-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Multi select
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/multi-select)
 
 Multi select is used when user needs to select multiple options from a dropdown.
 
@@ -37,24 +37,24 @@ import '@carbon/web-components/es/components/multi-select/index.js';
 ### HTML
 
 ```html
-<bx-multi-select value="foo,baz">
-  <bx-multi-select-item value="foo">Foo</bx-multi-select-item>
-  <bx-multi-select-item value="bar">Bar</bx-multi-select-item>
-  <bx-multi-select-item value="baz">Baz</bx-multi-select-item>
-</bx-multi-select>
+<cds-multi-select value="foo,baz">
+  <cds-multi-select-item value="foo">Foo</cds-multi-select-item>
+  <cds-multi-select-item value="bar">Bar</cds-multi-select-item>
+  <cds-multi-select-item value="baz">Baz</cds-multi-select-item>
+</cds-multi-select>
 ```
 
 ## Filter mode
 
 If you'd like to have a search bar to filter through the dropdown options, you
-can add the `filterable` boolean to the `<bx-multi-select>` component.
+can add the `filterable` boolean to the `<cds-multi-select>` component.
 
 ```html
-<bx-multi-select value="foo,baz" filterable>
-  <bx-multi-select-item value="foo">Foo</bx-multi-select-item>
-  <bx-multi-select-item value="bar">Bar</bx-multi-select-item>
-  <bx-multi-select-item value="baz">Baz</bx-multi-select-item>
-</bx-multi-select>
+<cds-multi-select value="foo,baz" filterable>
+  <cds-multi-select-item value="foo">Foo</cds-multi-select-item>
+  <cds-multi-select-item value="bar">Bar</cds-multi-select-item>
+  <cds-multi-select-item value="baz">Baz</cds-multi-select-item>
+</cds-multi-select>
 ```
 
 Often you want to render the multi select items from your data. Below is an
@@ -63,52 +63,52 @@ stories apply to React, Angular, Vue, Backbone, Knockout and many others:
 
 ```javascript
 html`
-  <bx-multi-select>
+  <cds-multi-select>
     ${items.map(
       (item) =>
         html`
-          <bx-multi-select-item value="${item.value}"
-            >${item.title}</bx-multi-select-item
+          <cds-multi-select-item value="${item.value}"
+            >${item.title}</cds-multi-select-item
           >
         `
     )}
-  </bx-multi-select>
+  </cds-multi-select>
 `;
 ```
 
 ## Selection
 
 When user attempts to change selection in multi select item,
-`bx-multi-select-beingselected` event fires on `<bx-multi-select>`, which has
+`cds-multi-select-beingselected` event fires on `<cds-multi-select>`, which has
 the following properties in the event details:
 
-| Property | Description                                                    |
-| -------- | -------------------------------------------------------------- |
-| `item`   | The `<bx-multi-select-item>` whose selection is being changed. |
+| Property | Description                                                     |
+| -------- | --------------------------------------------------------------- |
+| `item`   | The `<cds-multi-select-item>` whose selection is being changed. |
 
-`bx-multi-select-beingselected` bubbles and is cancelable. Canceling this event
+`cds-multi-select-beingselected` bubbles and is cancelable. Canceling this event
 means canceling change in selection.
 
 ## Note on keyboard navigation
 
-Similar to native `<select>`, `<bx-multi-select>` keeps focusing on itself even
+Similar to native `<select>`, `<cds-multi-select>` keeps focusing on itself even
 while the menu is open and user is navigating through arrow keys. Given that,
-`<bx-multi-select-item>` does not handle keyboard events by itself.
-`<bx-multi-select>` takes care of handling keyboard events for multi select
-items and updates `<bx-multi-select-item>`.
+`<cds-multi-select-item>` does not handle keyboard events by itself.
+`<cds-multi-select>` takes care of handling keyboard events for multi select
+items and updates `<cds-multi-select-item>`.
 
-## `<bx-multi-select>` attributes, properties and events
+## `<cds-multi-select>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-multi-select open>`) and `false` means not setting the attribute (e.g.
-`<bx-multi-select>` without `open` attribute).
+`<cds-multi-select open>`) and `false` means not setting the attribute (e.g.
+`<cds-multi-select>` without `open` attribute).
 
-<Props of="bx-multi-select" />
+<Props of="cds-multi-select" />
 
-## `<bx-multi-select-item>` attributes and properties
+## `<cds-multi-select-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-multi-select-item disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-multi-select-item>` without `disabled` attribute).
+`<cds-multi-select-item disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-multi-select-item>` without `disabled` attribute).
 
-<Props of="bx-multi-select-item" />
+<Props of="cds-multi-select-item" />
diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select-story.ts b/packages/carbon-web-components/src/components/multi-select/multi-select-story.ts
index 75d7103d16c..aee2bf265bf 100644
--- a/packages/carbon-web-components/src/components/multi-select/multi-select-story.ts
+++ b/packages/carbon-web-components/src/components/multi-select/multi-select-story.ts
@@ -1,236 +1,291 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
+import { html } from 'lit';
 import { boolean, select } from '@storybook/addon-knobs';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { prefix } from '../../globals/settings';
 import {
-  DROPDOWN_COLOR_SCHEME,
   DROPDOWN_SIZE,
   DROPDOWN_TYPE,
+  DROPDOWN_DIRECTION,
+  SELECTION_FEEDBACK_OPTION,
 } from './multi-select';
 import './multi-select-item';
+import '../../../.storybook/templates/with-layer';
 import storyDocs from './multi-select-story.mdx';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${DROPDOWN_COLOR_SCHEME.LIGHT})`]: DROPDOWN_COLOR_SCHEME.LIGHT,
-};
-
 const sizes = {
-  'Regular size': null,
   [`Small size (${DROPDOWN_SIZE.SMALL})`]: DROPDOWN_SIZE.SMALL,
-  [`Extra large size (${DROPDOWN_SIZE.EXTRA_LARGE})`]:
-    DROPDOWN_SIZE.EXTRA_LARGE,
+  [`Medium size (${DROPDOWN_SIZE.MEDIUM})`]: DROPDOWN_SIZE.MEDIUM,
+  [`Large size (${DROPDOWN_SIZE.LARGE})`]: DROPDOWN_SIZE.LARGE,
+};
+
+const directionOptions = {
+  [`Top`]: DROPDOWN_DIRECTION.TOP,
+  [`Bottom`]: DROPDOWN_DIRECTION.BOTTOM,
 };
 
 const types = {
-  Regular: null,
+  Default: null,
   [`Inline (${DROPDOWN_TYPE.INLINE})`]: DROPDOWN_TYPE.INLINE,
 };
 
-export const Default = (args) => {
-  const {
-    clearSelectionLabel,
-    colorScheme,
-    disabled,
-    helperText,
-    invalid,
-    labelText,
-    open,
-    size,
-    toggleLabelClosed,
-    toggleLabelOpen,
-    triggerContent,
-    type,
-    validityMessage,
-    value,
-    disableSelection,
-    disableToggle,
-    onBeforeSelect,
-    onBeforeToggle,
-    onSelect,
-    onToggle,
-  } = args?.['bx-multi-select'] ?? {};
-  const handleBeforeSelect = (event: CustomEvent) => {
-    if (onBeforeSelect) {
-      onBeforeSelect(event);
-    }
-    if (disableSelection) {
-      event.preventDefault();
-    }
-  };
-  const handleBeforeToggle = (event: CustomEvent) => {
-    if (onBeforeToggle) {
-      onBeforeToggle(event);
-    }
-    if (disableToggle) {
-      event.preventDefault();
-    }
-  };
+const selectionFeedbackOptions = {
+  [`Top (${SELECTION_FEEDBACK_OPTION.TOP})`]: SELECTION_FEEDBACK_OPTION.TOP,
+  [`Fixed (${SELECTION_FEEDBACK_OPTION.FIXED})`]:
+    SELECTION_FEEDBACK_OPTION.FIXED,
+  [`Top-after-reopen (${SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN})`]:
+    SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN,
+};
+
+export const Default = () => {
   return html`
-    <bx-multi-select
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled=${disabled}
-      ?invalid=${invalid}
-      ?open=${open}
-      clear-selection-label=${ifNonNull(clearSelectionLabel)}
-      helper-text=${ifNonNull(helperText)}
-      label-text=${ifNonNull(labelText)}
-      size=${ifNonNull(size)}
-      toggle-label-closed=${ifNonNull(toggleLabelClosed)}
-      toggle-label-open=${ifNonNull(toggleLabelOpen)}
-      trigger-content=${ifNonNull(triggerContent)}
-      type=${ifNonNull(type)}
-      validity-message=${ifNonNull(validityMessage)}
-      value="${ifNonNull(value)}"
-      @bx-multi-select-beingselected=${handleBeforeSelect}
-      @bx-multi-select-beingtoggled=${handleBeforeToggle}
-      @bx-multi-select-selected=${onSelect}
-      @bx-multi-select-toggled=${onToggle}>
-      <bx-multi-select-item value="all">Option 1</bx-multi-select-item>
-      <bx-multi-select-item value="cloudFoundry">Option 2</bx-multi-select-item>
-      <bx-multi-select-item value="staging">Option 3</bx-multi-select-item>
-      <bx-multi-select-item value="dea">Option 4</bx-multi-select-item>
-      <bx-multi-select-item value="router">Option 5</bx-multi-select-item>
-    </bx-multi-select>
+    <cds-multi-select
+      title-text="Multiselect title"
+      label="Multiselect label"
+      helper-text="This is helper text">
+      <cds-multi-select-item value="example"
+        >An example option that is really long to show what should be done to
+        handle long text</cds-multi-select-item
+      >
+      <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+      <cds-multi-select-item value="cloudFoundry"
+        >Option 2</cds-multi-select-item
+      >
+      <cds-multi-select-item disabled value="staging"
+        >Option 3 - a disabled item</cds-multi-select-item
+      >
+      <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+      <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+    </cds-multi-select>
   `;
 };
 
-Default.storyName = 'Default';
+Default.decorators = [
+  (story) => html` <div style="width:300px">${story()}</div> `,
+];
+
+export const Filterable = () => {
+  return html`
+    <cds-multi-select
+      filterable="true"
+      title-text="Multiselect title"
+      helper-text="This is helper text">
+      <cds-multi-select-item value="example"
+        >An example option that is really long to show what should be done to
+        handle long text</cds-multi-select-item
+      >
+      <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+      <cds-multi-select-item value="cloudFoundry"
+        >Option 2</cds-multi-select-item
+      >
+      <cds-multi-select-item disabled value="staging"
+        >Option 3 - a disabled item</cds-multi-select-item
+      >
+      <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+      <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+    </cds-multi-select>
+  `;
+};
 
-export const Filterable = (args) => {
+Filterable.decorators = [
+  (story) => html` <div style="width:300px">${story()}</div> `,
+];
+
+export const FilterableWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <div style="width:300px">
+        <cds-multi-select
+          filterable="true"
+          title-text="Multiselect title"
+          helper-text="This is helper text">
+          <cds-multi-select-item value="example"
+            >An example option that is really long to show what should be done
+            to handle long text</cds-multi-select-item
+          >
+          <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+          <cds-multi-select-item value="cloudFoundry"
+            >Option 2</cds-multi-select-item
+          >
+          <cds-multi-select-item disabled value="staging"
+            >Option 3 - a disabled item</cds-multi-select-item
+          >
+          <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+          <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+        </cds-multi-select>
+      </div>
+    </sb-template-layers>
+  `;
+};
+
+export const WithInitialSelectedItems = () => {
+  return html`
+    <cds-multi-select
+      title-text="Multiselect title"
+      label="Multiselect label"
+      helper-text="This is helper text">
+      <cds-multi-select-item value="example"
+        >An example option that is really long to show what should be done to
+        handle long text</cds-multi-select-item
+      >
+      <cds-multi-select-item selected value="all"
+        >Option 1</cds-multi-select-item
+      >
+      <cds-multi-select-item selected value="cloudFoundry"
+        >Option 2</cds-multi-select-item
+      >
+      <cds-multi-select-item disabled value="staging"
+        >Option 3 - a disabled item</cds-multi-select-item
+      >
+      <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+      <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+    </cds-multi-select>
+  `;
+};
+
+WithInitialSelectedItems.decorators = [
+  (story) => html` <div style="width:300px">${story()}</div> `,
+];
+
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <div style="width:300px">
+        <cds-multi-select
+          title-text="Multiselect title"
+          label="Multiselect label"
+          helper-text="This is helper text">
+          <cds-multi-select-item value="example"
+            >An example option that is really long to show what should be done
+            to handle long text</cds-multi-select-item
+          >
+          <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+          <cds-multi-select-item value="cloudFoundry"
+            >Option 2</cds-multi-select-item
+          >
+          <cds-multi-select-item disabled value="staging"
+            >Option 3 - a disabled item</cds-multi-select-item
+          >
+          <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+          <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+        </cds-multi-select>
+      </div>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
   const {
     clearSelectionLabel,
-    colorScheme,
+    direction,
     disabled,
     helperText,
+    hideLabel,
+    locale,
     invalid,
-    labelText,
-    open,
+    invalidText,
+    readOnly,
+    titleText,
+    selectionFeedback,
     size,
-    toggleLabelClosed,
-    toggleLabelOpen,
-    triggerContent,
+    label,
     type,
-    validityMessage,
     value,
-    disableSelection,
-    disableToggle,
-    onBeforeSelect,
-    onBeforeToggle,
-    onSelect,
-    onToggle,
-  } = args?.['bx-multi-select'] ?? {};
-  const handleBeforeSelect = (event: CustomEvent) => {
-    if (onBeforeSelect) {
-      onBeforeSelect(event);
-    }
-    if (disableSelection) {
-      event.preventDefault();
-    }
-  };
-  const handleBeforeToggle = (event: CustomEvent) => {
-    if (onBeforeToggle) {
-      onBeforeToggle(event);
-    }
-    if (disableToggle) {
-      event.preventDefault();
-    }
-  };
+    warn,
+    warnText,
+  } = args?.[`${prefix}-multi-select`] ?? {};
   return html`
-    <bx-multi-select
-      filterable="true"
-      color-scheme="${ifNonNull(colorScheme)}"
+    <cds-multi-select
+      direction=${ifDefined(direction)}
       ?disabled=${disabled}
       ?invalid=${invalid}
-      ?open=${open}
-      clear-selection-label=${ifNonNull(clearSelectionLabel)}
-      helper-text=${ifNonNull(helperText)}
-      label-text=${ifNonNull(labelText)}
-      size=${ifNonNull(size)}
-      toggle-label-closed=${ifNonNull(toggleLabelClosed)}
-      toggle-label-open=${ifNonNull(toggleLabelOpen)}
-      trigger-content=${ifNonNull(triggerContent)}
-      type=${ifNonNull(type)}
-      validity-message=${ifNonNull(validityMessage)}
-      value="${ifNonNull(value)}"
-      @bx-multi-select-beingselected=${handleBeforeSelect}
-      @bx-multi-select-beingtoggled=${handleBeforeToggle}
-      @bx-multi-select-selected=${onSelect}
-      @bx-multi-select-toggled=${onToggle}>
-      <bx-multi-select-item value="example"
+      invalid-text=${ifDefined(invalidText)}
+      clear-selection-label=${ifDefined(clearSelectionLabel)}
+      helper-text=${ifDefined(helperText)}
+      ?hide-label=${hideLabel}
+      locale=${ifDefined(locale)}
+      ?read-only=${readOnly}
+      title-text=${ifDefined(titleText)}
+      selection-feedback=${ifDefined(selectionFeedback)}
+      size=${ifDefined(size)}
+      ?warn=${warn}
+      warn-text=${ifDefined(warnText)}
+      label=${ifDefined(label)}
+      type=${ifDefined(type)}
+      value="${ifDefined(value)}">
+      <cds-multi-select-item value="example"
         >An example option that is really long to show what should be done to
-        handle long text</bx-multi-select-item
+        handle long text</cds-multi-select-item
+      >
+      <cds-multi-select-item value="all">Option 1</cds-multi-select-item>
+      <cds-multi-select-item value="cloudFoundry"
+        >Option 2</cds-multi-select-item
       >
-      <bx-multi-select-item value="all">Option 1</bx-multi-select-item>
-      <bx-multi-select-item value="cloudFoundry">Option 2</bx-multi-select-item>
-      <bx-multi-select-item value="staging">Option 3</bx-multi-select-item>
-      <bx-multi-select-item value="dea">Option 4</bx-multi-select-item>
-      <bx-multi-select-item value="router">Option 5</bx-multi-select-item>
-    </bx-multi-select>
+      <cds-multi-select-item disabled value="staging"
+        >Option 3 - a disabled item</cds-multi-select-item
+      >
+      <cds-multi-select-item value="dea">Option 4</cds-multi-select-item>
+      <cds-multi-select-item value="router">Option 5</cds-multi-select-item>
+    </cds-multi-select>
   `;
 };
 
-Filterable.storyName = 'Filterable';
+Playground.decorators = [
+  (story) => html` <div style="width:300px">${story()}</div> `,
+];
 
 export default {
   title: 'Components/Multi select',
   parameters: {
     ...storyDocs.parameters,
     knobs: {
-      'bx-multi-select': () => ({
-        clearSelectionLabel: textNullable(
-          'a11y label for the icon to clear selection (clear-selection-label)',
-          ''
+      [`${prefix}-multi-select`]: () => ({
+        clearSelectionDescription: textNullable(
+          'Clear selection description for a11y (clear-selection-description)',
+          'Total items selected: '
+        ),
+        clearSelectionText: textNullable(
+          'Clear selection text for a11y (clear-selection-text)',
+          'To clear selection, press Delete or Backspace.'
         ),
-        colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
         disabled: boolean('Disabled (disabled)', false),
+        direction: select(
+          'Direction',
+          directionOptions,
+          DROPDOWN_DIRECTION.BOTTOM
+        ),
         helperText: textNullable(
           'Helper text (helper-text)',
           'Optional helper text'
         ),
+        hideLabel: boolean('Hide label (hide-label)', false),
+        locale: textNullable('Locale (locale)', 'en'),
         invalid: boolean('Show invalid state  (invalid)', false),
-        labelText: textNullable('Label text (label-text)', 'Multiselect title'),
-        open: boolean('Open (open)', false),
-        toggleLabelClosed: textNullable(
-          'a11y label for the UI indicating the closed state (toggle-label-closed)',
-          ''
-        ),
-        toggleLabelOpen: textNullable(
-          'a11y label for the UI indicating the closed state (toggle-label-open)',
-          ''
-        ),
-        triggerContent: textNullable(
-          'The default content of the trigger button (trigger-content)',
-          'Select items'
-        ),
-        size: select('Dropdown size (size)', sizes, null),
-        type: select('UI type (type)', types, null),
-        validityMessage: textNullable(
-          'The validity message (validity-message)',
-          ''
-        ),
-        disableSelection: boolean(
-          'Disable user-initiated selection change (Call event.preventDefault() in bx-multi-select-beingselected event)',
-          false
+        invalidText: textNullable('Invalid text  (invalid-text)', 'whoopsie!'),
+        titleText: textNullable(
+          'Title text (title-text)',
+          'This is a MultiSelect Title'
         ),
-        disableToggle: boolean(
-          'Disable user-initiated toggle of open state (Call event.preventDefault() in bx-multi-select-beingtoggled event)',
-          false
+        label: textNullable('Label of field (label)', 'This is a label'),
+        size: select('Size (size)', sizes, DROPDOWN_SIZE.MEDIUM),
+        selectionFeedback: select(
+          'Selection feedback (selection-feedback)',
+          selectionFeedbackOptions,
+          SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN
         ),
-        onBeforeSelect: action('bx-multi-select-beingselected'),
-        onBeforeToggle: action('bx-multi-select-beingtoggled'),
-        onSelect: action('bx-multi-select-selected'),
-        onToggle: action('bx-multi-select-toggled'),
+        readOnly: boolean('Read only (read-only)', false),
+        type: select('Type (type)', types, null),
+        warn: boolean('Warn (warn)', false),
+        warnText: textNullable('Warn text (warn-text)', 'whoopsie!'),
       }),
     },
   },
diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select.scss b/packages/carbon-web-components/src/components/multi-select/multi-select.scss
index dbc284261bc..ec6dbbf90ff 100644
--- a/packages/carbon-web-components/src/components/multi-select/multi-select.scss
+++ b/packages/carbon-web-components/src/components/multi-select/multi-select.scss
@@ -7,10 +7,15 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/multi-select/multi-select';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/checkbox/checkbox';
-@import 'carbon-components/scss/components/tag/tag';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/list-box/list-box';
+@use '@carbon/styles/scss/components/multiselect/index';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/checkbox';
+@use '@carbon/styles/scss/components/tag';
 
 :host(#{$prefix}-multi-select) {
   outline: none;
@@ -32,21 +37,57 @@ $css--plex: true !default;
 
   .#{$prefix}--text-input {
     border: none;
+    padding-left: 0;
 
     &:focus {
       outline: none;
     }
   }
+
+  .#{$prefix}--tag--disabled {
+    @extend .#{$prefix}--tag--disabled;
+  }
+
+  .#{$prefix}--list-box__field:focus {
+    @extend .#{$prefix}--multi-select--filterable--input-focused;
+  }
 }
 
 :host(#{$prefix}-multi-select[filterable])
   .#{$prefix}--list-box__field:focus-within {
-  outline: 2px solid $focus;
-  outline-offset: -2px;
+  outline: $spacing-01 solid $focus;
+  outline-offset: -#{$spacing-01};
+}
+
+:host(#{$prefix}-multi-select[direction='top']) {
+  @extend .#{$prefix}--list-box--up;
+
+  .#{$prefix}--list-box__menu {
+    top: auto;
+  }
+}
+
+:host(#{$prefix}-multi-select[invalid]) {
+  .#{$prefix}--list-box__field {
+    outline: none;
+  }
+
+  .#{$prefix}--form__helper-text {
+    color: $text-error;
+  }
 }
 
 :host(#{$prefix}-multi-select[type='inline']) {
   @extend .#{$prefix}--list-box__wrapper--inline;
+
+  .#{$prefix}--form__helper-text {
+    grid-column: 2;
+  }
+}
+
+:host(#{$prefix}-multi-select[type='inline'][warn])
+  .#{$prefix}--list-box__field {
+  padding-right: rem(56px);
 }
 
 :host(#{$prefix}-multi-select-item) {
@@ -54,18 +95,17 @@ $css--plex: true !default;
 
   display: block;
 
-  .#{$prefix}--checkbox {
-    &:checked ~ .#{$prefix}--checkbox-label-text {
-      color: $text-01;
-    }
-
-    &:focus + .#{$prefix}--checkbox-label::before {
-      box-shadow: none;
-    }
+  .#{$prefix}--checkbox-label {
+    display: inline-block;
+    overflow: hidden;
+    width: 100%;
+    padding-left: rem(28px);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   .#{$prefix}--list-box__menu-item__option {
-    height: 100%;
+    box-sizing: border-box;
 
     .#{$prefix}--checkbox-wrapper {
       width: 100%;
@@ -75,36 +115,39 @@ $css--plex: true !default;
     }
 
     > .#{$prefix}--form-item {
-      margin: 0;
       flex-direction: row;
     }
   }
 }
 
+:host(#{$prefix}-multi-select-item:hover) {
+  background-color: $layer-hover;
+}
+
 :host(#{$prefix}-multi-select-item[filtered]) {
   display: none;
 }
 
 :host(#{$prefix}-multi-select-item[size='sm']) {
-  height: rem(32px);
-
+  height: fit-content;
   .#{$prefix}--list-box__menu-item__option {
+    height: $spacing-07;
     padding-top: rem(7px);
     padding-bottom: rem(7px);
   }
 }
 
-:host(#{$prefix}-multi-select-item[size='xl']) {
-  height: rem(48px);
-
+:host(#{$prefix}-multi-select-item[size='lg']) {
+  height: fit-content;
   .#{$prefix}--list-box__menu-item__option {
+    height: $spacing-09;
     padding-top: rem(15px);
     padding-bottom: rem(15px);
   }
 }
 
 :host(#{$prefix}-multi-select-item[disabled]) {
-  color: $disabled-02;
+  color: $text-disabled;
   text-decoration: none;
 }
 
@@ -117,6 +160,6 @@ $css--plex: true !default;
   @extend .#{$prefix}--list-box__menu-item--highlighted;
 
   .#{$prefix}--list-box__menu-item__option {
-    color: $text-01;
+    color: $text-primary;
   }
 }
diff --git a/packages/carbon-web-components/src/components/multi-select/multi-select.ts b/packages/carbon-web-components/src/components/multi-select/multi-select.ts
index a4597690f8b..30c256e134c 100644
--- a/packages/carbon-web-components/src/components/multi-select/multi-select.ts
+++ b/packages/carbon-web-components/src/components/multi-select/multi-select.ts
@@ -7,43 +7,49 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, query, TemplateResult } from 'lit-element';
+import { html, TemplateResult } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import Close16 from '@carbon/icons/lib/close/16';
+import { prefix } from '../../globals/settings';
 import {
   filter,
   forEach,
   indexOf,
 } from '../../globals/internal/collection-helpers';
-import BXDropdown, { DROPDOWN_KEYBOARD_ACTION } from '../dropdown/dropdown';
-import BXMultiSelectItem from './multi-select-item';
+import CDSDropdown, {
+  DROPDOWN_KEYBOARD_ACTION,
+  DROPDOWN_TYPE,
+} from '../dropdown/dropdown';
+import { SELECTION_FEEDBACK_OPTION } from './defs';
+import CDSMultiSelectItem from './multi-select-item';
 import styles from './multi-select.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export {
-  DROPDOWN_COLOR_SCHEME,
   DROPDOWN_SIZE,
   DROPDOWN_TYPE,
+  DROPDOWN_DIRECTION,
 } from '../dropdown/dropdown';
 
-const { prefix } = settings;
+export { SELECTION_FEEDBACK_OPTION };
 
 /**
  * Multi select.
  *
- * @element bx-multi-select
- * @fires bx-multi-select-beingselected
+ * @element cds-multi-select
+ * @fires cds-multi-select-beingselected
  *   The custom event fired before a multi select item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.
- * @fires bx-multi-select-beingtoggled
+ * @fires cds-multi-select-selected - The custom event fired after a multi select item is selected upon a user gesture.
+ * @fires cds-multi-select-beingtoggled
  *   The custom event fired before the open state of this multi select is toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated toggling.
- * @fires bx-multi-select-toggled
+ * @fires cds-multi-select-toggled
  *   The custom event fired after the open state of this multi select is toggled upon a user gesture.
  */
 @customElement(`${prefix}-multi-select`)
-class BXMultiSelect extends BXDropdown {
+class CDSMultiSelect extends CDSDropdown {
   @property({ type: Boolean })
   filterable;
 
@@ -64,6 +70,12 @@ class BXMultiSelect extends BXDropdown {
   @query('#selection-button')
   private _selectionButtonNode!: HTMLElement;
 
+  /**
+   * The menu body.
+   */
+  @query('#menu-body')
+  private _menuBodyNode!: HTMLElement;
+
   /**
    * The `<input>` for filtering.
    */
@@ -76,12 +88,12 @@ class BXMultiSelect extends BXDropdown {
   @query(`.${prefix}--list-box__field`)
   private _triggerNode!: HTMLElement;
 
-  protected _selectionShouldChange(itemToSelect?: BXMultiSelectItem) {
+  protected _selectionShouldChange(itemToSelect?: CDSMultiSelectItem) {
     // If we are selecting an item, assumes we always toggle
     return Boolean(this.value || itemToSelect);
   }
 
-  protected _selectionDidChange(itemToSelect?: BXMultiSelectItem) {
+  protected _selectionDidChange(itemToSelect?: CDSMultiSelectItem) {
     if (itemToSelect) {
       itemToSelect.selected = !itemToSelect.selected;
       this._assistiveStatusText = itemToSelect.selected
@@ -90,10 +102,10 @@ class BXMultiSelect extends BXDropdown {
     } else {
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXMultiSelect).selectorItemSelected
+          (this.constructor as typeof CDSMultiSelect).selectorItemSelected
         ),
         (item) => {
-          (item as BXMultiSelectItem).selected = false;
+          (item as CDSMultiSelectItem).selected = false;
         }
       );
       this._handleUserInitiatedToggle(false);
@@ -102,16 +114,19 @@ class BXMultiSelect extends BXDropdown {
     // Change in `.selected` hasn't been reflected to the corresponding attribute yet
     this.value = filter(
       this.querySelectorAll(
-        (this.constructor as typeof BXMultiSelect).selectorItem
+        (this.constructor as typeof CDSMultiSelect).selectorItem
       ),
-      (item) => (item as BXMultiSelectItem).selected
+      (item) => (item as CDSMultiSelectItem).selected
     )
-      .map((item) => (item as BXMultiSelectItem).value)
+      .map((item) => (item as CDSMultiSelectItem).value)
       .join(',');
   }
 
   protected _handleClickInner(event: MouseEvent) {
-    if (this._selectionButtonNode?.contains(event.target as Node)) {
+    if (
+      this._selectionButtonNode?.contains(event.target as Node) &&
+      !this.readOnly
+    ) {
       this._handleUserInitiatedSelectItem();
       if (this.filterable) {
         this._filterInputNode.focus();
@@ -121,14 +136,7 @@ class BXMultiSelect extends BXDropdown {
     } else if (this._clearButtonNode?.contains(event.target as Node)) {
       this._handleUserInitiatedClearInput();
     } else {
-      const shouldIgnoreClickInner = (elem) =>
-        elem.closest &&
-        elem.closest(
-          (this.constructor as typeof BXMultiSelect).selectorIgnoreClickInner
-        );
-      if (!event.composedPath().some(shouldIgnoreClickInner)) {
-        super._handleClickInner(event);
-      }
+      super._handleClickInner(event);
       if (this.filterable) this._filterInputNode.focus();
     }
   }
@@ -138,7 +146,7 @@ class BXMultiSelect extends BXDropdown {
    */
   protected _handleKeypressInner(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof BXDropdown).getAction(key);
+    const action = (this.constructor as typeof CDSDropdown).getAction(key);
     const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;
 
     if (
@@ -169,7 +177,7 @@ class BXMultiSelect extends BXDropdown {
 
   protected _handleKeypressInnerFlterable(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof BXDropdown).getAction(key);
+    const action = (this.constructor as typeof CDSDropdown).getAction(key);
     if (!this.open) {
       switch (action) {
         case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
@@ -182,10 +190,10 @@ class BXMultiSelect extends BXDropdown {
       switch (key) {
         case 'Enter':
           {
-            const constructor = this.constructor as typeof BXDropdown;
+            const constructor = this.constructor as typeof CDSDropdown;
             const highlightedItem = this.querySelector(
               constructor.selectorItemHighlighted
-            ) as BXMultiSelectItem;
+            ) as CDSMultiSelectItem;
             if (highlightedItem) {
               this._handleUserInitiatedSelectItem(highlightedItem);
             } else {
@@ -199,20 +207,79 @@ class BXMultiSelect extends BXDropdown {
     }
   }
 
-  protected _renderPrecedingTriggerContent() {
-    const { clearSelectionLabel, _selectedItemsCount: selectedItemsCount } =
-      this;
+  protected _renderTitleLabel() {
+    const {
+      clearSelectionDescription,
+      clearSelectionText,
+      disabled,
+      hideLabel,
+      titleText,
+      _selectedItemsCount: selectedItemsCount,
+      _slotTitleTextNode: slotTitleTextNode,
+      _handleSlotchangeLabelText: handleSlotchangeLabelText,
+    } = this;
+
+    const labelClasses = classMap({
+      [`${prefix}--label`]: true,
+      [`${prefix}--label--disabled`]: disabled,
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+
+    const hasTitleText =
+      titleText ||
+      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);
+
+    return html`
+      <label
+        part="title-text"
+        class="${labelClasses}"
+        ?hidden="${!hasTitleText}">
+        <slot name="title-text" @slotchange="${handleSlotchangeLabelText}"
+          >${titleText}</slot
+        >
+        ${selectedItemsCount > 0
+          ? html`
+              <span class="${prefix}--visually-hidden">
+                ${clearSelectionDescription} ${selectedItemsCount},
+                ${clearSelectionText}
+              </span>
+            `
+          : null}
+      </label>
+    `;
+  }
+
+  protected _renderPrecedingLabel() {
+    const {
+      disabled,
+      readOnly,
+      clearSelectionLabel,
+      _selectedItemsCount: selectedItemsCount,
+    } = this;
+
+    const selectionButtonClasses = classMap({
+      [`${prefix}--list-box__selection`]: true,
+      [`${prefix}--list-box__selection--multi`]: true,
+      [`${prefix}--tag`]: true,
+      [`${prefix}--tag--filter`]: true,
+      [`${prefix}--tag--high-contrast`]: true,
+      [`${prefix}--tag--disabled`]: disabled,
+    });
     return selectedItemsCount === 0
       ? undefined
       : html`
           <div
             id="selection-button"
             role="button"
-            class="${prefix}--list-box__selection ${prefix}--list-box__selection--multi ${prefix}--tag--filter"
-            tabindex="0"
+            class="${selectionButtonClasses}"
+            tabindex="-1"
+            aria-disabled=${readOnly}
             title="${clearSelectionLabel}">
             ${selectedItemsCount}
-            ${Close16({ 'aria-label': clearSelectionLabel })}
+            ${Close16({
+              'aria-label': clearSelectionLabel,
+              class: `${prefix}--tag__close-icon`,
+            })}
           </div>
         `;
   }
@@ -220,19 +287,19 @@ class BXMultiSelect extends BXDropdown {
   /**
     @returns The main content of the trigger button.
    */
-  protected _renderTriggerContent(): TemplateResult {
-    const { triggerContent, _selectedItemContent: selectedItemContent } = this;
+  protected _renderLabel(): TemplateResult {
+    const { label, _selectedItemContent: selectedItemContent } = this;
     return !this.filterable
       ? html`
           <span id="trigger-label" class="${prefix}--list-box__label"
-            >${selectedItemContent || triggerContent}</span
+            >${selectedItemContent || label}</span
           >
         `
       : html`
           <input
             id="trigger-label"
             class="${prefix}--text-input"
-            placeholder="${triggerContent}"
+            placeholder="${label}"
             role="combobox"
             aria-controls="menu-body"
             aria-autocomplete="list"
@@ -240,7 +307,7 @@ class BXMultiSelect extends BXDropdown {
         `;
   }
 
-  protected _renderFollowingTriggerContent(): TemplateResult | void {
+  protected _renderFollowingLabel(): TemplateResult | void {
     const { clearSelectionLabel, _filterInputNode: filterInputNode } = this;
     return filterInputNode &&
       filterInputNode.value.length > 0 &&
@@ -263,7 +330,7 @@ class BXMultiSelect extends BXDropdown {
    */
   protected _handleInput() {
     const items = this.querySelectorAll(
-      (this.constructor as typeof BXMultiSelect).selectorItem
+      (this.constructor as typeof CDSMultiSelect).selectorItem
     );
     const inputValue = this._filterInputNode.value.toLocaleLowerCase();
 
@@ -273,10 +340,10 @@ class BXMultiSelect extends BXDropdown {
       const itemValue = (item as HTMLElement).innerText.toLocaleLowerCase();
 
       if (!itemValue.includes(inputValue)) {
-        (item as BXMultiSelectItem).setAttribute('filtered', '');
-        (item as BXMultiSelectItem).removeAttribute('highlighted');
+        (item as CDSMultiSelectItem).setAttribute('filtered', '');
+        (item as CDSMultiSelectItem).removeAttribute('highlighted');
       } else {
-        (item as BXMultiSelectItem).removeAttribute('filtered');
+        (item as CDSMultiSelectItem).removeAttribute('filtered');
       }
     });
 
@@ -290,11 +357,10 @@ class BXMultiSelect extends BXDropdown {
    */
   protected _navigate(direction: number) {
     if (!this.filterable) {
-      this._triggerNode.focus();
       super._navigate(direction);
     } else {
       // only navigate through remaining item
-      const constructor = this.constructor as typeof BXMultiSelect;
+      const constructor = this.constructor as typeof CDSMultiSelect;
       const items = this.querySelectorAll(constructor.selectorItemResults);
       const highlightedItem = this.querySelector(
         constructor.selectorItemHighlighted
@@ -309,7 +375,7 @@ class BXMultiSelect extends BXDropdown {
         nextIndex = 0;
       }
       forEach(items, (item, i) => {
-        (item as BXMultiSelectItem).highlighted = i === nextIndex;
+        (item as CDSMultiSelectItem).highlighted = i === nextIndex;
       });
     }
   }
@@ -318,13 +384,13 @@ class BXMultiSelect extends BXDropdown {
    * Handles user-initiated clearing the `<input>` for filtering.
    */
   protected _handleUserInitiatedClearInput() {
-    const constructor = this.constructor as typeof BXMultiSelect;
+    const constructor = this.constructor as typeof CDSMultiSelect;
     const items = this.querySelectorAll(constructor.selectorItemFiltered);
     this._filterInputNode.value = '';
     this.open = true;
     this._filterInputNode.focus();
     forEach(items, (item) => {
-      (item as BXMultiSelectItem).removeAttribute('filtered');
+      (item as CDSMultiSelectItem).removeAttribute('filtered');
     });
   }
 
@@ -334,6 +400,24 @@ class BXMultiSelect extends BXDropdown {
   @property({ attribute: 'clear-selection-label' })
   clearSelectionLabel = '';
 
+  /**
+   * Specify the text that should be read for screen readers that describes total items selected
+   */
+  @property({ attribute: 'clear-selection-description' })
+  clearSelectionDescription = 'Total items selected: ';
+
+  /**
+   * Specify the text that should be read for screen readers to clear selection.
+   */
+  @property({ attribute: 'clear-selection-text' })
+  clearSelectionText = 'To clear selection, press Delete or Backspace.';
+
+  /**
+   * Specify the locale of the control. Used for the default compareItems used for sorting the list of items in the control.
+   */
+  @property()
+  locale = 'en';
+
   /**
    * An assistive text for screen reader to announce, telling that an item is unselected.
    */
@@ -346,36 +430,158 @@ class BXMultiSelect extends BXDropdown {
   @property({ attribute: 'unselected-all-assistive-text' })
   unselectedAllAssistiveText = 'Unselected all items.';
 
+  /**
+   * Specify feedback (mode) of the selection.
+   * `top`: selected item jumps to top
+   * `fixed`: selected item stays at it's position
+   * `top-after-reopen`: selected item jump to top after reopen dropdown
+   */
+  @property({ attribute: 'selection-feedback' })
+  selectionFeedback = SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN;
+
+  /**
+   * The CSS class list for multi-select listbox
+   */
+  protected get _classes() {
+    const {
+      disabled,
+      size,
+      type,
+      invalid,
+      readOnly,
+      open,
+      warn,
+      _selectedItemsCount: selectedItemsCount,
+    } = this;
+    const inline = type === DROPDOWN_TYPE.INLINE;
+
+    return classMap({
+      [`${prefix}--multi-select`]: true,
+      [`${prefix}--list-box`]: true,
+      [`${prefix}--list-box--disabled`]: disabled,
+      [`${prefix}--list-box--inline`]: inline,
+      [`${prefix}--list-box--expanded`]: open,
+      [`${prefix}--list-box--${size}`]: size,
+      [`${prefix}--multi-select--invalid`]: invalid,
+      [`${prefix}--multi-select--warn`]: warn,
+      [`${prefix}--multi-select--inline`]: inline,
+      [`${prefix}--list-box--inline`]: inline,
+      [`${prefix}--multi-select--readonly`]: readOnly,
+      [`${prefix}--multi-select--selected`]: selectedItemsCount > 0,
+    });
+  }
+
+  protected compareItems = (itemA, itemB, { locale }) => {
+    itemA.localeCompare(itemB, locale, { numeric: true });
+  };
+
+  protected sortItems = (
+    menuItems: NodeList,
+    { values, compareItems, locale = 'en' }
+  ) => {
+    const menuItemsArray = Array.from(menuItems);
+
+    const sortedArray = menuItemsArray.sort((itemA, itemB) => {
+      const hasItemA = values.includes((itemA as HTMLInputElement).value);
+      const hasItemB = values.includes((itemB as HTMLInputElement).value);
+
+      // Prefer whichever item is in the `value` array first
+      if (hasItemA && !hasItemB) {
+        return -1;
+      }
+
+      if (hasItemB && !hasItemA) {
+        return 1;
+      }
+
+      return compareItems(
+        (itemA as HTMLInputElement).value,
+        (itemB as HTMLInputElement).value,
+        {
+          locale,
+        }
+      );
+    });
+
+    return sortedArray;
+  };
+
   shouldUpdate(changedProperties) {
-    const { selectorItem } = this.constructor as typeof BXMultiSelect;
+    const { selectorItem } = this.constructor as typeof CDSMultiSelect;
+    const items = this.querySelectorAll(selectorItem);
+
+    const { value, locale } = this;
+    const values = !value ? [] : value.split(',');
+
     if (changedProperties.has('size')) {
       forEach(this.querySelectorAll(selectorItem), (elem) => {
-        (elem as BXMultiSelectItem).size = this.size;
+        (elem as CDSMultiSelectItem).size = this.size;
       });
     }
     if (changedProperties.has('value')) {
-      const { value } = this;
-      const values = !value ? [] : value.split(',');
-      // Updates selection beforehand because our rendering logic for `<bx-multi-select>` looks for selected items via `qSA()`
-      const items = this.querySelectorAll(selectorItem);
+      // Updates selection beforehand because our rendering logic for `<cds-multi-select>` looks for selected items via `qSA()`
       forEach(items, (elem) => {
-        (elem as BXMultiSelectItem).selected =
-          values.indexOf((elem as BXMultiSelectItem).value) >= 0;
+        (elem as CDSMultiSelectItem).selected =
+          values.indexOf((elem as CDSMultiSelectItem).value) >= 0;
       });
       this._selectedItemsCount = filter(
         items,
-        (elem) => values.indexOf((elem as BXMultiSelectItem).value) >= 0
+        (elem) => values.indexOf((elem as CDSMultiSelectItem).value) >= 0
       ).length;
+
+      if (this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP) {
+        const sortedMenuItems = this.sortItems(items, {
+          values,
+          compareItems: this.compareItems,
+          locale,
+        });
+
+        this.replaceChildren(...sortedMenuItems);
+      }
+    }
+    if (changedProperties.has('open')) {
+      if (
+        this.selectionFeedback === SELECTION_FEEDBACK_OPTION.TOP_AFTER_REOPEN
+      ) {
+        const sortedMenuItems = this.sortItems(items, {
+          values,
+          compareItems: this.compareItems,
+          locale,
+        });
+
+        this.replaceChildren(...sortedMenuItems);
+      }
     }
     return true;
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('open') && this.open && !this.filterable) {
+      // move focus to menu body when open for non-filterable mulit-select
+      this._menuBodyNode.focus();
+    }
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    /**
+     * Detect if multi-select already has initially selected items
+     */
+    this.value = filter(
+      this.querySelectorAll(
+        (this.constructor as typeof CDSMultiSelect).selectorItem
+      ),
+      (item) => (item as CDSMultiSelectItem).selected
+    )
+      .map((item) => (item as CDSMultiSelectItem).value)
+      .join(',');
+  }
+
   /**
-   * A selector to ignore the `click` events from.
-   * Primary for the checkbox label where the `click` event will happen from the associated check box.
+   * A selector that will return menu body.
    */
-  private static get selectorIgnoreClickInner() {
-    return `.${prefix}--checkbox-label`;
+  static get selectorMenuBody() {
+    return `div[part="menu-body"]`;
   }
 
   /**
@@ -447,4 +653,4 @@ class BXMultiSelect extends BXDropdown {
   static styles = styles;
 }
 
-export default BXMultiSelect;
+export default CDSMultiSelect;
diff --git a/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts b/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts
new file mode 100644
index 00000000000..c099a1ba4fb
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/actionable-notification-button.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSButton from '../button/button';
+import styles from './actionable-notification.scss';
+
+/**
+ * Actionable notification action button.
+ *
+ * @element cds-actionable-notification-button
+ */
+@customElement(`${prefix}-actionable-notification-button`)
+class CDSActionableNotificationButton extends CDSButton {
+  update(changedProperties) {
+    super.update(changedProperties);
+    this.shadowRoot!.getElementById('button')?.classList.add(
+      `${prefix}--actionable-notification__action-button`
+    );
+
+    this.setAttribute('size', 'sm');
+  }
+
+  static styles = styles;
+}
+
+export default CDSActionableNotificationButton;
diff --git a/packages/carbon-web-components/src/components/notification/actionable-notification-story.ts b/packages/carbon-web-components/src/components/notification/actionable-notification-story.ts
new file mode 100644
index 00000000000..57f51defee3
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/actionable-notification-story.ts
@@ -0,0 +1,120 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { action } from '@storybook/addon-actions';
+import { boolean, select } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { NOTIFICATION_KIND } from './inline-notification';
+import './actionable-notification';
+import './actionable-notification-button';
+import storyDocs from './notification-story.mdx';
+import { prefix } from '../../globals/settings';
+import kinds from './stories/helper';
+import '../button/button';
+
+const noop = () => {};
+
+export const Default = () => {
+  return html`
+    <cds-actionable-notification
+      kind="${NOTIFICATION_KIND.ERROR}"
+      title="Notification title"
+      subtitle="Subtitle text goes here">
+      <cds-actionable-notification-button slot="action"
+        >Action</cds-actionable-notification-button
+      >
+    </cds-actionable-notification>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    actionButtonLabel,
+    closeOnEscape,
+    hasFocus,
+    kind,
+    title,
+    subtitle,
+    hideCloseButton,
+    lowContrast,
+    role,
+    inline,
+    statusIconDescription,
+    disableClose,
+    onBeforeClose = noop,
+    onClose = noop,
+  } = args?.[`${prefix}-actionable-notification`] ?? {};
+  const handleBeforeClose = (event: CustomEvent) => {
+    onBeforeClose(event);
+    if (disableClose) {
+      event.preventDefault();
+    }
+  };
+  return html`
+    <cds-actionable-notification
+      ?close-on-escape="${closeOnEscape}"
+      ?has-focus="${hasFocus}"
+      kind="${ifDefined(kind)}"
+      title="${ifDefined(title)}"
+      subtitle="${ifDefined(subtitle)}"
+      role="${ifDefined(role)}"
+      ?inline="${inline}"
+      ?hide-close-button="${hideCloseButton}"
+      ?low-contrast="${lowContrast}"
+      status-icon-description="${ifDefined(statusIconDescription)}"
+      @cds-notification-beingclosed="${handleBeforeClose}"
+      @cds-notification-closed="${onClose}">
+      <cds-actionable-notification-button slot="action"
+        >${actionButtonLabel}</cds-actionable-notification-button
+      >
+    </cds-actionable-notification>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-actionable-notification`]: () => ({
+      actionButtonLabel: textNullable(
+        'Action button label (action-button-label)',
+        'Action'
+      ),
+      closeOnEscape: boolean('Close on escape (close-on-escape)', true),
+      hasFocus: boolean('Has focus (has-focus)', false),
+      hideCloseButton: boolean(
+        'Hide the close button (hide-close-button)',
+        false
+      ),
+      inline: boolean('Inline (inline)', false),
+      kind: select(
+        'The notification kind (kind)',
+        kinds,
+        NOTIFICATION_KIND.ERROR
+      ),
+      lowContrast: boolean('Use low contrast variant (low-contrast)', false),
+      role: textNullable('Role (role)', 'alertdialog'),
+      subtitle: textNullable('Subtitle (subtitle)', 'Subtitle text goes here'),
+      statusIconDescription: textNullable(
+        'statusIconDescription (status-icon-description)',
+        'notification'
+      ),
+      title: textNullable('Title (title)', 'Notification title'),
+      onBeforeClose: action(`${prefix}-notification-beingclosed`),
+      onClose: action(`${prefix}-notification-closed`),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Notifications/Actionable',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/notification/actionable-notification.scss b/packages/carbon-web-components/src/components/notification/actionable-notification.scss
new file mode 100644
index 00000000000..ecfa669a95b
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/actionable-notification.scss
@@ -0,0 +1,217 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/notification/mixins' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/button/mixins' as button-mixins;
+@use '@carbon/styles/scss/components/button/vars' as button-vars;
+@use '@carbon/styles/scss/layout' as *;
+
+@include actionable-notification;
+
+:host(#{$prefix}-actionable-notification) {
+  @extend .#{$prefix}--actionable-notification;
+  @include emit-layout-tokens();
+
+  display: none;
+  outline: none;
+}
+
+:host(
+    #{$prefix}-actionable-notification-button:not(
+        [low-contrast]
+      )[kind='tertiary']
+  )
+  button {
+  @include button-mixins.button-theme(
+    transparent,
+    $notification-action-tertiary-inverse,
+    $notification-action-tertiary-inverse,
+    $notification-action-tertiary-inverse-hover,
+    currentColor,
+    $notification-action-tertiary-inverse-active
+  );
+
+  &:focus {
+    border-color: $focus-inverse;
+    background-color: $notification-action-tertiary-inverse;
+    box-shadow: inset 0 0 0 button-vars.$button-outline-width $focus-inverse,
+      inset 0 0 0 button-vars.$button-border-width $background-inverse;
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  &:hover {
+    color: $notification-action-tertiary-inverse-text;
+  }
+
+  &:active {
+    border-color: transparent;
+    background-color: $notification-action-tertiary-inverse-active;
+    color: $notification-action-tertiary-inverse-text;
+  }
+}
+
+:host(#{$prefix}-actionable-notification-button[low-contrast][kind='ghost'])
+  button {
+  &:hover,
+  &:active {
+    background-color: $notification-action-hover;
+  }
+
+  &:focus {
+    outline-color: $focus;
+  }
+}
+
+:host(
+    #{$prefix}-actionable-notification-button:not([low-contrast])[kind='ghost']
+  )
+  button {
+  color: $link-inverse;
+}
+
+:host(
+    #{$prefix}-actionable-notification-button[hide-close-button][kind='ghost']
+  )
+  button {
+  margin-right: $spacing-03;
+}
+
+:host(#{$prefix}-actionable-notification:not([inline])) {
+  @extend .#{$prefix}--actionable-notification--toast;
+}
+
+:host(#{$prefix}-actionable-notification[inline][low-contrast])::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  content: '';
+  filter: opacity(0.4);
+  pointer-events: none;
+}
+
+:host(#{$prefix}-actionable-notification[open]) {
+  display: flex;
+}
+
+:host(#{$prefix}-actionable-notification[hide-close-button])
+  .#{$prefix}--actionable-notification__close-button {
+  display: none;
+}
+
+:host(#{$prefix}-actionable-notification[kind='success']) {
+  @extend .#{$prefix}--actionable-notification--success;
+}
+
+:host(#{$prefix}-actionable-notification[kind='success'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--success;
+
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+
+  &::before {
+    border-color: $support-success;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='info']) {
+  @extend .#{$prefix}--actionable-notification--info;
+}
+
+:host(#{$prefix}-actionable-notification[kind='info-square']) {
+  @extend .#{$prefix}--actionable-notification--info-square;
+}
+
+:host(#{$prefix}-actionable-notification[kind='info'][low-contrast]),
+:host(#{$prefix}-actionable-notification[kind='info-square'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--info;
+
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+
+  &::before {
+    border-color: $support-info;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning']) {
+  @extend .#{$prefix}--actionable-notification--warning;
+
+  /* TODO: Remove this once the following issue with icon fill is resolved:
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
+    opacity: 1;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--actionable-notification--warning-alt;
+
+  /* TODO: Remove this once the following issue with icon fill is resolved:
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon,
+  .#{$prefix}--toast-notification__icon {
+    path[data-icon-path='inner-path'] {
+      fill: $black-100;
+      opacity: 1;
+    }
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='warning'][low-contrast]),
+:host(#{$prefix}-actionable-notification[kind='warning-alt'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--warning;
+
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+
+  &::before {
+    border-color: $support-warning;
+  }
+}
+
+:host(#{$prefix}-actionable-notification[kind='error']) {
+  @extend .#{$prefix}--actionable-notification--error;
+}
+
+:host(#{$prefix}-actionable-notification[kind='error'][low-contrast]) {
+  @extend .#{$prefix}--actionable-notification--low-contrast,
+    .#{$prefix}--actionable-notification--error;
+
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
+
+  &::before {
+    border-color: $support-error;
+  }
+}
diff --git a/packages/carbon-web-components/src/components/notification/actionable-notification.ts b/packages/carbon-web-components/src/components/notification/actionable-notification.ts
new file mode 100644
index 00000000000..ad38f1b3900
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/actionable-notification.ts
@@ -0,0 +1,184 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';
+import ErrorFilled20 from '@carbon/icons/lib/error--filled/20';
+import InformationFilled20 from '@carbon/icons/lib/information--filled/20';
+import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20';
+import WarningFilled20 from '@carbon/icons/lib/warning--filled/20';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20';
+import { html, svg } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { NOTIFICATION_TYPE, NOTIFICATION_KIND } from './defs';
+import CDSInlineNotification from './inline-notification';
+import styles from './actionable-notification.scss';
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+
+/**
+ * The default icons, keyed by notification kind.
+ */
+const iconsForKinds = {
+  [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,
+  [NOTIFICATION_KIND.INFO]: InformationFilled20,
+  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,
+  [NOTIFICATION_KIND.WARNING]: WarningFilled20,
+  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,
+  [NOTIFICATION_KIND.ERROR]: ErrorFilled20,
+};
+
+/**
+ * Actionable notification.
+ *
+ * @element cds-actionable-notification
+ * @slot subtitle - The subtitle.
+ * @slot title - The title.
+ * @fires cds-notification-beingclosed
+ *   The custom event fired before this notification is being closed upon a user gesture.
+ *   Cancellation of this event stops the user-initiated action of closing this notification.
+ * @fires cds-notification-closed - The custom event fired after this notification is closed upon a user gesture.
+ */
+@customElement(`${prefix}-actionable-notification`)
+class CDSActionableNotification extends HostListenerMixin(
+  CDSInlineNotification
+) {
+  protected _type = NOTIFICATION_TYPE.ACTIONABLE;
+
+  /**
+   * Inline notification type.
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
+  /**
+   * Pass in the action button label that will be rendered within the ActionableNotification.
+   */
+  @property({ type: String, reflect: true, attribute: 'action-button-label' })
+  actionButtonLabel = '';
+
+  /**
+   * Specify if pressing the escape key should close notifications
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'close-on-escape' })
+  closeOnEscape = true;
+
+  /**
+   * Specify if focus should be moved to the component when the notification contains actions
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'has-focus' })
+  hasFocus = true;
+
+  /**
+   * Handles `keydown` event on this event.
+   * Escape will close the notification if `closeOnEscape` is true
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleKeyDown = async (event: KeyboardEvent) => {
+    const { key } = event;
+    if (this.closeOnEscape && key === 'Escape') {
+      this.open = false;
+    }
+  };
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'alertdialog');
+    }
+    super.connectedCallback();
+  }
+
+  protected _renderIcon() {
+    const { statusIconDescription, kind, inline } = this;
+    const { [kind]: icon } = iconsForKinds;
+    return !icon
+      ? undefined
+      : icon({
+          class: `${prefix}--${inline ? 'inline' : 'toast'}-notification__icon`,
+          children: !statusIconDescription
+            ? undefined
+            : svg`<title>${statusIconDescription}</title>`,
+        });
+  }
+
+  protected _renderText() {
+    const { subtitle, title, _type: type } = this;
+    return html`
+      <div class="${prefix}--${type}-notification__text-wrapper">
+        <div class="${prefix}--${type}-notification__content">
+          <div class="${prefix}--${type}-notification__title">
+            ${title}<slot name="title"></slot>
+          </div>
+          <div class="${prefix}--${type}-notification__subtitle">
+            ${subtitle}<slot name="subtitle"></slot>
+          </div>
+          <slot></slot>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * The caption.
+   */
+  @property()
+  caption = '';
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const button = this.querySelector(
+      (this.constructor as typeof CDSActionableNotification)
+        .selectorActionButton
+    );
+    if (changedProperties.has('inline')) {
+      button?.setAttribute('kind', this.inline ? 'ghost' : 'tertiary');
+    }
+    if (changedProperties.has('lowContrast')) {
+      if (this.lowContrast) {
+        button?.setAttribute('low-contrast', 'true');
+      } else {
+        button?.removeAttribute('low-contrast');
+      }
+    }
+    if (changedProperties.has('hideCloseButton')) {
+      if (this.hideCloseButton) {
+        button?.setAttribute('hide-close-button', 'true');
+      } else {
+        button?.removeAttribute('hide-close-button');
+      }
+    }
+    if (changedProperties.has('hasFocus')) {
+      if (this.hasFocus) {
+        this.focus();
+      }
+    }
+  }
+
+  render() {
+    const { _type: type } = this;
+    return html`
+      <div class="${prefix}--${type}-notification__details">
+        ${this._renderIcon()} ${this._renderText()}
+      </div>
+      <slot name="action"></slot>
+      ${this._renderButton()}
+    `;
+  }
+
+  /**
+   * A selector that will return the action button element
+   */
+  static get selectorActionButton() {
+    return `${prefix}-actionable-notification-button`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSActionableNotification;
diff --git a/packages/carbon-web-components/src/components/notification/defs.ts b/packages/carbon-web-components/src/components/notification/defs.ts
index a714f611860..99dd052da03 100644
--- a/packages/carbon-web-components/src/components/notification/defs.ts
+++ b/packages/carbon-web-components/src/components/notification/defs.ts
@@ -21,11 +21,21 @@ export enum NOTIFICATION_KIND {
    */
   INFO = 'info',
 
+  /**
+   * Informational square icon notification.
+   */
+  INFO_SQUARE = 'info-square',
+
   /**
    * Warning notification.
    */
   WARNING = 'warning',
 
+  /**
+   * Warning Alt notification.
+   */
+  WARNING_ALT = 'warning-alt',
+
   /**
    * Error notification.
    */
@@ -47,4 +57,13 @@ export enum NOTIFICATION_TYPE {
    * They usually appear at the bottom of the screen and disappear after a few seconds.
    */
   TOAST = 'toast',
+
+  /**
+   * Actionable notifications allow for interactive elements within a notification styled like an inline
+   * or toast notification. Actionable notifications, since they require user interaction, take focus when
+   * triggered and can be highly disruptive to screen readers and keyboard users. With actionable notifications,
+   * only one action is allowed per notification. This action frequently takes users to a flow or page related
+   * to the message, where they can resolve the notification.
+   */
+  ACTIONABLE = 'actionable',
 }
diff --git a/packages/carbon-web-components/src/components/notification/index.ts b/packages/carbon-web-components/src/components/notification/index.ts
index 04e94affb58..899b14e7623 100644
--- a/packages/carbon-web-components/src/components/notification/index.ts
+++ b/packages/carbon-web-components/src/components/notification/index.ts
@@ -9,3 +9,5 @@
 
 import './inline-notification';
 import './toast-notification';
+import './actionable-notification';
+import './actionable-notification-button';
diff --git a/packages/carbon-web-components/src/components/notification/inline-notification-story.ts b/packages/carbon-web-components/src/components/notification/inline-notification-story.ts
new file mode 100644
index 00000000000..4113f290c22
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/inline-notification-story.ts
@@ -0,0 +1,103 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { action } from '@storybook/addon-actions';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean, select } from '@storybook/addon-knobs';
+import storyDocs from './notification-story.mdx';
+import { NOTIFICATION_KIND } from './inline-notification';
+import { prefix } from '../../globals/settings';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import kinds from './stories/helper';
+
+const noop = () => {};
+
+export const Default = () => {
+  return html`
+    <cds-inline-notification
+      kind="${NOTIFICATION_KIND.ERROR}"
+      title="Notification title"
+      subtitle="Subtitle text goes here">
+    </cds-inline-notification>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    kind,
+    title,
+    subtitle,
+    hideCloseButton,
+    lowContrast,
+    role,
+    statusIconDescription,
+    timeout,
+    disableClose,
+    onBeforeClose = noop,
+    onClose = noop,
+  } = args?.[`${prefix}-inline-notification`] ?? {};
+  const handleBeforeClose = (event: CustomEvent) => {
+    onBeforeClose(event);
+    if (disableClose) {
+      event.preventDefault();
+    }
+  };
+  return html`
+    <cds-inline-notification
+      kind="${ifDefined(kind)}"
+      title="${ifDefined(title)}"
+      subtitle="${ifDefined(subtitle)}"
+      ?hide-close-button="${hideCloseButton}"
+      ?low-contrast="${lowContrast}"
+      role="${ifDefined(role)}"
+      status-icon-description="${ifDefined(statusIconDescription)}"
+      timeout="${ifDefined(timeout)}"
+      @cds-notification-beingclosed="${handleBeforeClose}"
+      @cds-notification-closed="${onClose}">
+    </cds-inline-notification>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-inline-notification`]: () => ({
+      hideCloseButton: boolean(
+        'Hide the close button (hide-close-button)',
+        false
+      ),
+      kind: select(
+        'The notification kind (kind)',
+        kinds,
+        NOTIFICATION_KIND.INFO
+      ),
+      lowContrast: boolean('Use low contrast variant (low-contrast)', false),
+      role: select(
+        'Role (role)',
+        { alert: 'alert', log: 'log', status: 'status' },
+        'status'
+      ),
+      statusIconDescription: textNullable(
+        'statusIconDescription (status-icon-description)',
+        'notification'
+      ),
+      subtitle: textNullable('Subtitle (subtitle)', 'Subtitle text goes here'),
+      title: textNullable('Title (title)', 'Notification title'),
+      onBeforeClose: action(`${prefix}-notification-beingclosed`),
+      onClose: action(`${prefix}-notification-closed`),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Notifications/Inline',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/notification/inline-notification.scss b/packages/carbon-web-components/src/components/notification/inline-notification.scss
index 354edcbb6fc..b5d804cd5ce 100644
--- a/packages/carbon-web-components/src/components/notification/inline-notification.scss
+++ b/packages/carbon-web-components/src/components/notification/inline-notification.scss
@@ -7,11 +7,21 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/notification/inline-notification';
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/notification/mixins' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/layout' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include inline-notification;
 
 :host(#{$prefix}-inline-notification) {
   @extend .#{$prefix}--inline-notification;
+  @include emit-layout-tokens();
 
   display: none;
   outline: none;
@@ -21,6 +31,20 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-inline-notification[low-contrast])::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+  border-width: 1px 1px 1px 0;
+  border-style: solid;
+  content: '';
+  filter: opacity(0.4);
+  pointer-events: none;
+}
+
 :host(#{$prefix}-inline-notification[open]) {
   display: flex;
 }
@@ -30,52 +54,96 @@ $css--plex: true !default;
   display: none;
 }
 
-:host(#{$prefix}-inline-notification[low-contrast]) {
-  &[low-contrast] {
-    @extend .#{$prefix}--inline-notification--low-contrast;
-  }
-}
-
 :host(#{$prefix}-inline-notification[kind='success']) {
   @extend .#{$prefix}--inline-notification--success;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-success,
-      get-token-value($notification-colors, 'notification-background-success')
-    );
+:host(#{$prefix}-inline-notification[kind='success'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--success;
+
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
+
+  &::before {
+    border-color: $support-success;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='info']) {
   @extend .#{$prefix}--inline-notification--info;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-info,
-      get-token-value($notification-colors, 'notification-background-info')
-    );
+:host(#{$prefix}-inline-notification[kind='info-square']) {
+  @extend .#{$prefix}--inline-notification--info-square;
+}
+
+:host(#{$prefix}-inline-notification[kind='info'][low-contrast]),
+:host(#{$prefix}-inline-notification[kind='info-square'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--info;
+
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
+
+  &::before {
+    border-color: $support-info;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='warning']) {
   @extend .#{$prefix}--inline-notification--warning;
+}
+
+:host(#{$prefix}-inline-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--inline-notification--warning-alt;
 
   &[low-contrast] {
-    @include notification--experimental(
-      $support-warning,
-      get-token-value($notification-colors, 'notification-background-warning')
-    );
+    @extend .#{$prefix}--inline-notification--low-contrast,
+      .#{$prefix}--inline-notification--warning-alt;
+  }
+
+  /* TODO: Remove this once the following issue with icon fill is resolved: 
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--inline-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
+  }
+}
+
+:host(#{$prefix}-inline-notification[kind='warning'][low-contrast]),
+:host(#{$prefix}-inline-notification[kind='warning-alt'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--warning;
+
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+
+  &::before {
+    border-color: $support-warning;
   }
 }
 
 :host(#{$prefix}-inline-notification[kind='error']) {
   @extend .#{$prefix}--inline-notification--error;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-error,
-      get-token-value($notification-colors, 'notification-background-error')
-    );
+:host(#{$prefix}-inline-notification[kind='error'][low-contrast]) {
+  @extend .#{$prefix}--inline-notification--low-contrast,
+    .#{$prefix}--inline-notification--error;
+
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
+
+  &::before {
+    border-color: $support-error;
   }
 }
diff --git a/packages/carbon-web-components/src/components/notification/inline-notification.ts b/packages/carbon-web-components/src/components/notification/inline-notification.ts
index 4ea0177662d..35326561752 100644
--- a/packages/carbon-web-components/src/components/notification/inline-notification.ts
+++ b/packages/carbon-web-components/src/components/notification/inline-notification.ts
@@ -8,12 +8,16 @@
  */
 
 import CheckmarkFilled20 from '@carbon/icons/lib/checkmark--filled/20';
-import Close20 from '@carbon/icons/lib/close/20';
+import Close16 from '@carbon/icons/lib/close/16';
 import ErrorFilled20 from '@carbon/icons/lib/error--filled/20';
+import InformationFilled20 from '@carbon/icons/lib/information--filled/20';
+import InformationSquareFilled20 from '@carbon/icons/lib/information--square--filled/20';
 import WarningFilled20 from '@carbon/icons/lib/warning--filled/20';
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement, property, svg } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import WarningAltFilled20 from '@carbon/icons/lib/warning--alt--filled/20';
+import { LitElement, html, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
 import { NOTIFICATION_KIND, NOTIFICATION_TYPE } from './defs';
@@ -21,31 +25,31 @@ import styles from './inline-notification.scss';
 
 export { NOTIFICATION_KIND, NOTIFICATION_TYPE };
 
-const { prefix } = settings;
-
 /**
  * The default icons, keyed by notification kind.
  */
 const iconsForKinds = {
   [NOTIFICATION_KIND.SUCCESS]: CheckmarkFilled20,
-  [NOTIFICATION_KIND.INFO]: undefined,
+  [NOTIFICATION_KIND.INFO]: InformationFilled20,
+  [NOTIFICATION_KIND.INFO_SQUARE]: InformationSquareFilled20,
   [NOTIFICATION_KIND.WARNING]: WarningFilled20,
+  [NOTIFICATION_KIND.WARNING_ALT]: WarningAltFilled20,
   [NOTIFICATION_KIND.ERROR]: ErrorFilled20,
 };
 
 /**
  * Inline notification.
  *
- * @element bx-inline-notification
+ * @element cds-inline-notification
  * @slot subtitle - The subtitle.
  * @slot title - The title.
- * @fires bx-notification-beingclosed
+ * @fires cds-notification-beingclosed
  *   The custom event fired before this notification is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this notification.
- * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.
+ * @fires cds-notification-closed - The custom event fired after this notification is closed upon a user gesture.
  */
 @customElement(`${prefix}-inline-notification`)
-class BXInlineNotification extends FocusMixin(LitElement) {
+class CDSInlineNotification extends FocusMixin(LitElement) {
   /**
    * Current timeout identifier
    */
@@ -108,7 +112,7 @@ class BXInlineNotification extends FocusMixin(LitElement) {
       if (
         this.dispatchEvent(
           new CustomEvent(
-            (this.constructor as typeof BXInlineNotification).eventBeforeClose,
+            (this.constructor as typeof CDSInlineNotification).eventBeforeClose,
             init
           )
         )
@@ -116,7 +120,7 @@ class BXInlineNotification extends FocusMixin(LitElement) {
         this.open = false;
         this.dispatchEvent(
           new CustomEvent(
-            (this.constructor as typeof BXInlineNotification).eventClose,
+            (this.constructor as typeof CDSInlineNotification).eventClose,
             init
           )
         );
@@ -129,7 +133,7 @@ class BXInlineNotification extends FocusMixin(LitElement) {
    */
   protected _renderButton() {
     const {
-      closeButtonLabel,
+      ariaLabel,
       _type: type,
       _handleClickCloseButton: handleClickCloseButton,
     } = this;
@@ -137,10 +141,10 @@ class BXInlineNotification extends FocusMixin(LitElement) {
       <button
         type="button"
         class="${prefix}--${type}-notification__close-button"
-        aria-label=${ifDefined(closeButtonLabel)}
-        title=${ifDefined(closeButtonLabel)}
+        aria-label=${ifDefined(ariaLabel)}
+        title=${ifDefined(ariaLabel)}
         @click="${handleClickCloseButton}">
-        ${Close20({
+        ${Close16({
           class: `${prefix}--${type}-notification__close-icon`,
         })}
       </button>
@@ -169,21 +173,23 @@ class BXInlineNotification extends FocusMixin(LitElement) {
    * @returns The template part for the icon.
    */
   protected _renderIcon() {
-    const { iconLabel, kind, _type: type } = this;
+    const { statusIconDescription, kind, _type: type } = this;
     const { [kind]: icon } = iconsForKinds;
     return !icon
       ? undefined
       : icon({
           class: `${prefix}--${type}-notification__icon`,
-          children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,
+          children: !statusIconDescription
+            ? undefined
+            : svg`<title>${statusIconDescription}</title>`,
         });
   }
 
   /**
-   * The a11y text for the close button.
+   * Provide a description for "close" icon button that can be read by screen readers
    */
-  @property({ attribute: 'close-button-label' })
-  closeButtonLabel!: string;
+  @property({ attribute: 'aria-label' })
+  ariaLabel!: string;
 
   /**
    * `true` to hide the close button.
@@ -192,10 +198,10 @@ class BXInlineNotification extends FocusMixin(LitElement) {
   hideCloseButton = false;
 
   /**
-   * The a11y text for the icon.
+   * Provide a description for "status" icon that can be read by screen readers
    */
-  @property({ attribute: 'icon-label' })
-  iconLabel!: string;
+  @property({ attribute: 'status-icon-description' })
+  statusIconDescription!: string;
 
   /**
    * Notification kind.
@@ -216,7 +222,7 @@ class BXInlineNotification extends FocusMixin(LitElement) {
   open = true;
 
   /**
-   * Notification time in ms until gets closed.
+   * Specify an optional duration the notification should be closed in
    */
   @property({ type: Number, reflect: true })
   timeout: number | null = null;
@@ -281,4 +287,4 @@ class BXInlineNotification extends FocusMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXInlineNotification;
+export default CDSInlineNotification;
diff --git a/packages/carbon-web-components/src/components/notification/notification-story.mdx b/packages/carbon-web-components/src/components/notification/notification-story.mdx
index e587838b9c7..35bf339f5f4 100644
--- a/packages/carbon-web-components/src/components/notification/notification-story.mdx
+++ b/packages/carbon-web-components/src/components/notification/notification-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Notification
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/notification)
 
 Notifications are messages that communicate information to the user.
 
@@ -21,18 +21,44 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/notification/index.js';
 ```
 
+### SCSS (must include with JS import)
+
+```css
+@use '@carbon/styles/scss/components/notification';
+```
+
 <Description markdown={`${cdnJs({ components: ['notification'] })}`} />
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<bx-inline-notification
+<cds-inline-notification
   style="min-width: 30rem; margin-bottom: .5rem"
   title="Notification title"
-  subtitle="Subtitle text goes here."
->
-</bx-inline-notification>
+  subtitle="Subtitle text goes here.">
+</cds-inline-notification>
+```
+
+## Actionable notification
+
+Actionable notifications allow for interactive elements within a notification
+styled like an inline or toast notification. Actionable notifications, since
+they require user interaction, take focus when triggered and can be highly
+disruptive to screen readers and keyboard users. With actionable notifications,
+only one action is allowed per notification. This action frequently takes users
+to a flow or page related to the message, where they can resolve the
+notification.
+
+```html
+<cds-actionable-notification
+  kind="error"
+  title="Notification title"
+  subtitle="Subtitle text goes here">
+  <cds-actionable-notification-button slot="action"
+    >Action</cds-actionable-notification-button
+  >
+</cds-actionable-notification>
 ```
 
 ## Inline notification
@@ -41,12 +67,11 @@ Inline notifications show up in task flows, to notify users of the status of an
 action. They usually appear at the top of the primary content area.
 
 ```html
-<bx-inline-notification
+<cds-inline-notification
   style="min-width: 30rem; margin-bottom: .5rem"
   title="Notification title"
-  subtitle="Subtitle text goes here."
->
-</bx-inline-notification>
+  subtitle="Subtitle text goes here.">
+</cds-inline-notification>
 ```
 
 ## Toast notification
@@ -56,42 +81,33 @@ messages; they usually appear at the bottom of the screen and disappear after a
 few seconds.
 
 ```html
-<bx-toast-notification
+<cds-toast-notification
   style="min-width: 30rem; margin-bottom: 0.5rem;"
   title="Notification title"
-  subtitle="Subtitle text goes here."
->
-</bx-toast-notification>
+  subtitle="Subtitle text goes here.">
+</cds-toast-notification>
 ```
 
-## Themeing
+## `<cds-actionable-notification>` attributes, properties and events
 
-In order to get the correct token value for the notification background, you will need to apply the following in you `scss` to your themed class. For example:
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-actionable-notification open>`) and `false` means not setting the
+attribute (e.g. `<cds-actionable-notification>` without `open` attribute).
 
-```css
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
-@import 'carbon-components/src/components/notification/inline-notification';
-@import 'carbon-components/src/components/notification/toast-notification';
-.dds-theme-zone-g90 {
-  @include carbon--theme($carbon--theme--g90, true) {
-    @include emit-component-tokens($notification-colors);
-  }
-}
-```
+<Props of="cds-actionable-notification" />
 
-## `<bx-inline-notification>` attributes, properties and events
+## `<cds-inline-notification>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-inline-notification open>`) and `false` means not setting the attribute
-(e.g. `<bx-inline-notification>` without `open` attribute).
+`<cds-inline-notification open>`) and `false` means not setting the attribute
+(e.g. `<cds-inline-notification>` without `open` attribute).
 
-<Props of="bx-inline-notification" />
+<Props of="cds-inline-notification" />
 
-## `<bx-toast-notification>` attributes, properties and events
+## `<cds-toast-notification>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-toast-notification open>`) and `false` means not setting the attribute
-(e.g. `<bx-toast-notification>` without `open` attribute).
+`<cds-toast-notification open>`) and `false` means not setting the attribute
+(e.g. `<cds-toast-notification>` without `open` attribute).
 
-<Props of="bx-toast-notification" />
+<Props of="cds-toast-notification" />
diff --git a/packages/carbon-web-components/src/components/notification/notification-story.ts b/packages/carbon-web-components/src/components/notification/notification-story.ts
deleted file mode 100644
index 8e25b155107..00000000000
--- a/packages/carbon-web-components/src/components/notification/notification-story.ts
+++ /dev/null
@@ -1,154 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { NOTIFICATION_KIND } from './inline-notification';
-import './toast-notification';
-import storyDocs from './notification-story.mdx';
-
-const kinds = {
-  [`Success (${NOTIFICATION_KIND.SUCCESS})`]: NOTIFICATION_KIND.SUCCESS,
-  [`Info (${NOTIFICATION_KIND.INFO})`]: NOTIFICATION_KIND.INFO,
-  [`Warning (${NOTIFICATION_KIND.WARNING})`]: NOTIFICATION_KIND.WARNING,
-  [`Error (${NOTIFICATION_KIND.ERROR})`]: NOTIFICATION_KIND.ERROR,
-};
-
-const noop = () => {};
-
-export const inline = (args) => {
-  const {
-    kind,
-    title,
-    subtitle,
-    hideCloseButton,
-    lowContrast,
-    closeButtonLabel,
-    iconLabel,
-    open,
-    timeout,
-    disableClose,
-    onBeforeClose = noop,
-    onClose = noop,
-  } = args?.['bx-inline-notification'] ?? {};
-  const handleBeforeClose = (event: CustomEvent) => {
-    onBeforeClose(event);
-    if (disableClose) {
-      event.preventDefault();
-    }
-  };
-  return html`
-    <bx-inline-notification
-      style="min-width: 30rem; margin-bottom: .5rem"
-      kind="${ifNonNull(kind)}"
-      title="${ifNonNull(title)}"
-      subtitle="${ifNonNull(subtitle)}"
-      ?hide-close-button="${hideCloseButton}"
-      ?low-contrast="${lowContrast}"
-      close-button-label="${ifNonNull(closeButtonLabel)}"
-      icon-label="${ifNonNull(iconLabel)}"
-      ?open="${open}"
-      timeout="${ifNonNull(timeout)}"
-      @bx-notification-beingclosed="${handleBeforeClose}"
-      @bx-notification-closed="${onClose}">
-    </bx-inline-notification>
-  `;
-};
-
-inline.parameters = {
-  knobs: {
-    'bx-inline-notification': () => ({
-      kind: select(
-        'The notification kind (kind)',
-        kinds,
-        NOTIFICATION_KIND.INFO
-      ),
-      title: textNullable('Title (title)', 'Notification title'),
-      subtitle: textNullable('Subtitle (subtitle)', 'Subtitle text goes here.'),
-      hideCloseButton: boolean(
-        'Hide the close button (hide-close-button)',
-        false
-      ),
-      lowContrast: boolean('Use low contrast variant (low-contrast)', false),
-      closeButtonLabel: textNullable(
-        'a11y label for the close button (close-button-label)',
-        ''
-      ),
-      iconLabel: textNullable('a11y label for the icon (icon-label)', ''),
-      open: boolean('Open (open)', true),
-      timeout: textNullable('Timeout (in ms)', ''),
-      disableClose: boolean(
-        'Disable user-initiated close action (Call event.preventDefault() in bx-notification-beingclosed event)',
-        false
-      ),
-      onBeforeClose: action('bx-notification-beingclosed'),
-      onClose: action('bx-notification-closed'),
-    }),
-  },
-};
-
-export const toast = (args) => {
-  const {
-    kind,
-    title,
-    subtitle,
-    caption,
-    hideCloseButton,
-    lowContrast,
-    closeButtonLabel,
-    iconLabel,
-    open,
-    timeout,
-    disableClose,
-    onBeforeClose = noop,
-    onClose = noop,
-  } = args?.['bx-toast-notification'] ?? {};
-  const handleBeforeClose = (event: CustomEvent) => {
-    onBeforeClose(event);
-    if (disableClose) {
-      event.preventDefault();
-    }
-  };
-  return html`
-    <bx-toast-notification
-      style="min-width: 30rem; margin-bottom: .5rem"
-      kind="${ifNonNull(kind)}"
-      title="${ifNonNull(title)}"
-      subtitle="${ifNonNull(subtitle)}"
-      caption="${ifNonNull(caption)}"
-      ?hide-close-button="${hideCloseButton}"
-      ?low-contrast="${lowContrast}"
-      close-button-label="${ifNonNull(closeButtonLabel)}"
-      icon-label="${ifNonNull(iconLabel)}"
-      ?open="${open}"
-      timeout="${ifNonNull(timeout)}"
-      @bx-notification-beingclosed="${handleBeforeClose}"
-      @bx-notification-closed="${onClose}">
-    </bx-toast-notification>
-  `;
-};
-
-toast.parameters = {
-  knobs: {
-    'bx-toast-notification': () => ({
-      ...inline.parameters.knobs['bx-inline-notification'](),
-      caption: textNullable('Caption (caption)', 'Time stamp [00:00:00]'),
-    }),
-  },
-};
-
-export default {
-  title: 'Components/Notifications',
-  parameters: {
-    ...storyDocs.parameters,
-  },
-};
diff --git a/packages/carbon-web-components/src/components/notification/stories/helper.ts b/packages/carbon-web-components/src/components/notification/stories/helper.ts
new file mode 100644
index 00000000000..a6813a882aa
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/stories/helper.ts
@@ -0,0 +1,22 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { NOTIFICATION_KIND } from '../inline-notification';
+
+const kinds = {
+  [`Error (${NOTIFICATION_KIND.ERROR})`]: NOTIFICATION_KIND.ERROR,
+  [`Info (${NOTIFICATION_KIND.INFO})`]: NOTIFICATION_KIND.INFO,
+  [`Info (${NOTIFICATION_KIND.INFO_SQUARE})`]: NOTIFICATION_KIND.INFO_SQUARE,
+  [`Success (${NOTIFICATION_KIND.SUCCESS})`]: NOTIFICATION_KIND.SUCCESS,
+  [`Warning (${NOTIFICATION_KIND.WARNING})`]: NOTIFICATION_KIND.WARNING,
+  [`Warning Alt (${NOTIFICATION_KIND.WARNING_ALT})`]:
+    NOTIFICATION_KIND.WARNING_ALT,
+};
+
+export default kinds;
diff --git a/packages/carbon-web-components/src/components/notification/toast-notification-story.ts b/packages/carbon-web-components/src/components/notification/toast-notification-story.ts
new file mode 100644
index 00000000000..a09a1011f96
--- /dev/null
+++ b/packages/carbon-web-components/src/components/notification/toast-notification-story.ts
@@ -0,0 +1,111 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { action } from '@storybook/addon-actions';
+import { boolean, select } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { NOTIFICATION_KIND } from './inline-notification';
+import './toast-notification';
+import storyDocs from './notification-story.mdx';
+import { prefix } from '../../globals/settings';
+import kinds from './stories/helper';
+
+const noop = () => {};
+
+export const Default = () => {
+  return html`
+    <cds-toast-notification
+      kind="${NOTIFICATION_KIND.ERROR}"
+      title="Notification title"
+      subtitle="Subtitle text goes here"
+      caption="00:00:00 AM"
+      role="status"
+      timeout="0">
+    </cds-toast-notification>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    kind,
+    title,
+    subtitle,
+    caption,
+    hideCloseButton,
+    statusIconDescription,
+    lowContrast,
+    timeout,
+    role,
+    disableClose,
+    onBeforeClose = noop,
+    onClose = noop,
+  } = args?.[`${prefix}-toast-notification`] ?? {};
+  const handleBeforeClose = (event: CustomEvent) => {
+    onBeforeClose(event);
+    if (disableClose) {
+      event.preventDefault();
+    }
+  };
+  return html`
+    <cds-toast-notification
+      kind="${ifDefined(kind)}"
+      title="${ifDefined(title)}"
+      subtitle="${ifDefined(subtitle)}"
+      caption="${ifDefined(caption)}"
+      role="${ifDefined(role)}"
+      ?hide-close-button="${hideCloseButton}"
+      ?low-contrast="${lowContrast}"
+      status-icon-description="${ifDefined(statusIconDescription)}"
+      timeout="${ifDefined(timeout)}"
+      @cds-notification-beingclosed="${handleBeforeClose}"
+      @cds-notification-closed="${onClose}">
+    </cds-toast-notification>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-toast-notification`]: () => ({
+      caption: textNullable('Caption (caption)', '00:00:00 AM'),
+      hideCloseButton: boolean(
+        'Hide the close button (hide-close-button)',
+        false
+      ),
+      kind: select(
+        'The notification kind (kind)',
+        kinds,
+        NOTIFICATION_KIND.INFO
+      ),
+      lowContrast: boolean('Use low contrast variant (low-contrast)', false),
+      role: select(
+        'Role (role)',
+        { alert: 'alert', log: 'log', status: 'status' },
+        'status'
+      ),
+      statusIconDescription: textNullable(
+        'statusIconDescription (status-icon-description)',
+        'notification'
+      ),
+      subtitle: textNullable('Subtitle (subtitle)', 'Subtitle text goes here'),
+      timeout: textNullable('Timeout in ms (timeout)', '0'),
+      title: textNullable('Title (title)', 'Notification title'),
+      onBeforeClose: action(`${prefix}-notification-beingclosed`),
+      onClose: action(`${prefix}-notification-closed`),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Notifications/Toast',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/notification/toast-notification.scss b/packages/carbon-web-components/src/components/notification/toast-notification.scss
index ad447fdfd4d..4dc0086d986 100644
--- a/packages/carbon-web-components/src/components/notification/toast-notification.scss
+++ b/packages/carbon-web-components/src/components/notification/toast-notification.scss
@@ -7,11 +7,20 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/notification/toast-notification';
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/notification/mixins' as *;
+@use '@carbon/styles/scss/components/notification/index' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/layout' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include toast-notification;
 
 :host(#{$prefix}-toast-notification) {
   @extend .#{$prefix}--toast-notification;
+  @include emit-layout-tokens();
 
   display: none;
   outline: none;
@@ -26,52 +35,75 @@ $css--plex: true !default;
   display: none;
 }
 
-:host(#{$prefix}-toast-notification[low-contrast]) {
-  &[low-contrast] {
-    @extend .#{$prefix}--toast-notification--low-contrast;
-  }
-}
-
 :host(#{$prefix}-toast-notification[kind='success']) {
   @extend .#{$prefix}--toast-notification--success;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-success,
-      get-token-value($notification-colors, 'notification-background-success')
-    );
-  }
+:host(#{$prefix}-toast-notification[kind='success'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--success;
+
+  @include notification--experimental(
+    $support-success,
+    $notification-background-success
+  );
 }
 
 :host(#{$prefix}-toast-notification[kind='info']) {
   @extend .#{$prefix}--toast-notification--info;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-info,
-      get-token-value($notification-colors, 'notification-background-info')
-    );
-  }
+:host(#{$prefix}-toast-notification[kind='info-square']) {
+  @extend .#{$prefix}--toast-notification--info-square;
+}
+
+:host(#{$prefix}-toast-notification[kind='info'][low-contrast]),
+:host(#{$prefix}-toast-notification[kind='info-square'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--info;
+
+  @include notification--experimental(
+    $support-info,
+    $notification-background-info
+  );
 }
 
 :host(#{$prefix}-toast-notification[kind='warning']) {
   @extend .#{$prefix}--toast-notification--warning;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-warning,
-      get-token-value($notification-colors, 'notification-background-warning')
-    );
+:host(#{$prefix}-toast-notification[kind='warning-alt']) {
+  @extend .#{$prefix}--toast-notification--warning-alt;
+
+  /* TODO: Remove this once the following issue with icon fill is resolved: 
+  ** https://github.com/carbon-design-system/carbon/issues/13616
+  */
+  .#{$prefix}--toast-notification__icon path[data-icon-path='inner-path'] {
+    fill: $black-100;
   }
 }
 
+:host(#{$prefix}-toast-notification[kind='warning'][low-contrast]),
+:host(#{$prefix}-toast-notification[kind='warning-alt'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--warning;
+
+  @include notification--experimental(
+    $support-warning,
+    $notification-background-warning
+  );
+}
+
 :host(#{$prefix}-toast-notification[kind='error']) {
   @extend .#{$prefix}--toast-notification--error;
+}
 
-  &[low-contrast] {
-    @include notification--experimental(
-      $support-error,
-      get-token-value($notification-colors, 'notification-background-error')
-    );
-  }
+:host(#{$prefix}-toast-notification[kind='error'][low-contrast]) {
+  @extend .#{$prefix}--toast-notification--low-contrast,
+    .#{$prefix}--toast-notification--error;
+
+  @include notification--experimental(
+    $support-error,
+    $notification-background-error
+  );
 }
diff --git a/packages/carbon-web-components/src/components/notification/toast-notification.ts b/packages/carbon-web-components/src/components/notification/toast-notification.ts
index 3dc16280898..66ad8ae7fba 100644
--- a/packages/carbon-web-components/src/components/notification/toast-notification.ts
+++ b/packages/carbon-web-components/src/components/notification/toast-notification.ts
@@ -7,37 +7,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property } from 'lit-element';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import { NOTIFICATION_TYPE } from './defs';
-import BXInlineNotification from './inline-notification';
+import CDSInlineNotification from './inline-notification';
 import styles from './toast-notification.scss';
 
-const { prefix } = settings;
-
 /**
  * Toast notification.
  *
- * @element bx-toast-notification
+ * @element cds-toast-notification
  * @slot subtitle - The subtitle.
  * @slot title - The title.
- * @fires bx-notification-beingclosed
+ * @fires cds-notification-beingclosed
  *   The custom event fired before this notification is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this notification.
- * @fires bx-notification-closed - The custom event fired after this notification is closed upon a user gesture.
+ * @fires cds-notification-closed - The custom event fired after this notification is closed upon a user gesture.
  */
 @customElement(`${prefix}-toast-notification`)
-class BXToastNotification extends BXInlineNotification {
+class CDSToastNotification extends CDSInlineNotification {
   protected _type = NOTIFICATION_TYPE.TOAST;
 
   protected _renderText() {
     const { caption, subtitle, title, _type: type } = this;
     return html`
       <div class="${prefix}--${type}-notification__details">
-        <h3 class="${prefix}--${type}-notification__title">
+        <div class="${prefix}--${type}-notification__title">
           ${title}<slot name="title"></slot>
-        </h3>
+        </div>
         <div class="${prefix}--${type}-notification__subtitle">
           ${subtitle}<slot name="subtitle"></slot>
         </div>
@@ -50,7 +49,7 @@ class BXToastNotification extends BXInlineNotification {
   }
 
   /**
-   * The caption.
+   * Specify the caption
    */
   @property()
   caption = '';
@@ -69,4 +68,4 @@ class BXToastNotification extends BXInlineNotification {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXToastNotification;
+export default CDSToastNotification;
diff --git a/packages/carbon-web-components/src/components/number-input/index.ts b/packages/carbon-web-components/src/components/number-input/index.ts
index 2852227c43c..5d4ce515bf5 100644
--- a/packages/carbon-web-components/src/components/number-input/index.ts
+++ b/packages/carbon-web-components/src/components/number-input/index.ts
@@ -1,10 +1,11 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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 './number-input';
+import './number-input-skeleton';
diff --git a/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts b/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts
index 0469bc208f5..430c761b66d 100644
--- a/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts
+++ b/packages/carbon-web-components/src/components/number-input/number-input-skeleton.ts
@@ -7,18 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './number-input.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of number input.
  */
 @customElement(`${prefix}-number-input-skeleton`)
-class BXNumberInputSkeleton extends LitElement {
+class CDSNumberInputSkeleton extends LitElement {
   /**
    * `true` if the label should be hidden. Corresponds to the attribute with the same name.
    */
@@ -37,4 +36,4 @@ class BXNumberInputSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXNumberInputSkeleton;
+export default CDSNumberInputSkeleton;
diff --git a/packages/carbon-web-components/src/components/number-input/number-input-story.mdx b/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
index 787bc20e154..68d27e53c7a 100644
--- a/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
+++ b/packages/carbon-web-components/src/components/number-input/number-input-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Number input
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/number-input)
 
 Number inputs are similar to text inputs, but contain controls used to increase
 or decrease an incremental value.
@@ -28,52 +28,48 @@ import '@carbon/web-components/es/components/number-input/index.js';
 ### HTML
 
 ```html
-<bx-number-input value="0" min="0" max="100">
-  <span slot="label-text">Label text</span>
-  <span slot="helper-text">Optional helper text</span>
-  <span slot="validity-message">Something isn't right</span>
-  <span slot="validity-message-max"
-    >Try a lower value, something less than 100</span
-  >
-  <span slot="validity-message-min">Value must be larger than 0</span>
-</bx-number-input>
+<cds-number-input
+  value="0"
+  min="0"
+  max="100"
+  label="Label text"
+  helper-text="Optional helper text">
+</cds-number-input>
 ```
 
 ## Form item
 
 If the input is part of a form, make sure to import and wrap the input with
-`<bx-form-item>`
+`<cds-form-item>`
 
 ```javascript
 import '@carbon/web-components/es/components/form/index.js';
 ```
 
 ```html
-<bx-form-item>
-  <bx-number-input value="0" min="0" max="100">
-    <span slot="label-text">Label text</span>
-    <span slot="helper-text">Optional helper text</span>
-    <span slot="validity-message">Something isn't right</span>
-    <span slot="validity-message-max"
-      >Try a lower value, something less than 100</span
-    >
-    <span slot="validity-message-min">Value must be larger than 0</span>
-  </bx-number-input>
-</bx-form-item>
+<cds-form-item>
+  <cds-number-input
+    value="0"
+    min="0"
+    max="100"
+    label="Label text"
+    helper-text="Optional helper text">
+  </cds-number-input>
+</cds-form-item>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-number-input-skeleton>`.
+For the skeleton variation, utilize `<cds-number-input-skeleton>`.
 
 ```html
-<bx-number-input-skeleton></bx-number-input-skeleton>
+<cds-number-input-skeleton></cds-number-input-skeleton>
 ```
 
-## `<bx-number-input>` attributes and properties
+## `<cds-number-input>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-number-input mobile>`) and `false` means not setting the attribute (e.g.
-`<bx-number-input>` without `mobile` attribute).
+`<cds-number-input invalid>`) and `false` means not setting the attribute (e.g.
+`<cds-number-input>` without `invalid` attribute).
 
-<Props of="bx-number-input" />
+<Props of="cds-number-input" />
diff --git a/packages/carbon-web-components/src/components/number-input/number-input-story.ts b/packages/carbon-web-components/src/components/number-input/number-input-story.ts
index d4e945326c4..d9511ad7d99 100644
--- a/packages/carbon-web-components/src/components/number-input/number-input-story.ts
+++ b/packages/carbon-web-components/src/components/number-input/number-input-story.ts
@@ -1,160 +1,108 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import * as knobs from '@storybook/addon-knobs';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { INPUT_SIZE } from '../text-input/text-input';
 import './number-input';
 import './number-input-skeleton';
 import '../form/form-item';
 import createProps from './stories/helpers';
 import storyDocs from './number-input-story.mdx';
+import { prefix } from '../../globals/settings';
 
-export const Default = (args) => {
-  const {
-    colorScheme,
-    disabled,
-    value,
-    placeholder,
-    invalid,
-    mobile,
-    min,
-    max,
-    size,
-    step,
-    onInput,
-    name,
-  } = args?.['bx-number-input'] ?? {};
+export const Default = () => {
   return html`
-    <bx-number-input
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled="${disabled}"
-      value="${ifNonNull(value)}"
-      placeholder="${ifNonNull(placeholder)}"
-      ?invalid="${invalid}"
-      name="${name}"
-      ?mobile="${mobile}"
-      min="${ifNonNull(min)}"
-      max="${ifNonNull(max)}"
-      size="${ifNonNull(size)}"
-      step="${ifNonNull(step)}"
-      @input="${onInput}"></bx-number-input>
+    <cds-form-item>
+      <cds-number-input
+        value="50"
+        min="0"
+        max="100"
+        size="${ifDefined(INPUT_SIZE.MEDIUM)}"
+        step="1"
+        label="number-input label"
+        helper-text="Optional helper text">
+      </cds-number-input>
+    </cds-form-item>
   `;
 };
 
 Default.storyName = 'Default';
 
-Default.parameters = {
-  knobs: {
-    'bx-number-input': () => createProps({ ...knobs, textNullable }),
+export const skeleton = () =>
+  html` <cds-number-input-skeleton></cds-number-input-skeleton> `;
+
+skeleton.parameters = {
+  percy: {
+    skip: true,
   },
 };
 
-export const formItem = (args) => {
+export const Playground = (args) => {
   const {
-    colorScheme,
+    allowEmpty,
+    decrementButtonDescription,
+    incrementButtonDescription,
     disabled,
-    value,
-    placeholder,
+    helperText,
+    hideLabel,
+    hideSteppers,
     invalid,
-    mobile,
+    invalidText,
+    label,
+    readonly,
+    warn,
+    warnText,
+    value,
     min,
     max,
     size,
     step,
     onInput,
-  } = args?.['bx-number-input'] ?? {};
+  } = args?.[`${prefix}-number-input`] ?? {};
   return html`
-    <bx-form-item>
-      <bx-number-input
-        value="${ifNonNull(value)}"
-        color-scheme="${ifNonNull(colorScheme)}"
-        placeholder="${ifNonNull(placeholder)}"
+    <cds-form-item>
+      <cds-number-input
+        ?allow-empty="${allowEmpty}"
+        decrement-button-assistive-text="${ifDefined(
+          decrementButtonDescription
+        )}"
+        increment-button-assistive-text="${ifDefined(
+          incrementButtonDescription
+        )}"
+        helper-text="${ifDefined(helperText)}"
+        ?hide-steppers="${hideSteppers}"
+        ?hide-label="${hideLabel}"
         ?invalid="${invalid}"
+        invalid-text="${ifDefined(invalidText)}"
+        label="${ifDefined(label)}"
+        ?readonly="${readonly}"
+        value="${ifDefined(value)}"
+        ?warn="${warn}"
+        warn-text="${ifDefined(warnText)}"
         ?disabled="${disabled}"
-        ?mobile="${mobile}"
-        min="${ifNonNull(min)}"
-        max="${ifNonNull(max)}"
-        size="${ifNonNull(size)}"
-        step="${ifNonNull(step)}"
+        min="${ifDefined(min)}"
+        max="${ifDefined(max)}"
+        size="${ifDefined(size)}"
+        step="${ifDefined(step)}"
         @input="${onInput}">
-        <span slot="label-text">Label text</span>
-        <span slot="helper-text">Optional helper text</span>
-        <span slot="validity-message">Something isn't right</span>
-        <span slot="validity-message-max"
-          >Try a lower value, something less than ${max}</span
-        >
-        <span slot="validity-message-min"
-          >Value must be larger than ${min}</span
-        >
-      </bx-number-input>
-    </bx-form-item>
+      </cds-number-input>
+    </cds-form-item>
   `;
 };
 
-formItem.storyName = 'Form item';
+Playground.storyName = 'Playground';
 
-formItem.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-number-input': () => createProps({ ...knobs, textNullable }),
-  },
-};
-
-export const withoutFormItemWrapper = (args) => {
-  const {
-    colorScheme,
-    disabled,
-    value,
-    placeholder,
-    invalid,
-    mobile,
-    min,
-    max,
-    size,
-    step,
-    onInput,
-  } = args?.['bx-number-input'] ?? {};
-  return html`
-    <bx-number-input
-      value="${ifNonNull(value)}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      placeholder="${ifNonNull(placeholder)}"
-      ?invalid="${invalid}"
-      ?disabled="${disabled}"
-      ?mobile="${mobile}"
-      min="${ifNonNull(min)}"
-      max="${ifNonNull(max)}"
-      size="${ifNonNull(size)}"
-      step="${ifNonNull(step)}"
-      @input="${onInput}">
-      <span slot="label-text">Label text</span>
-      <span slot="helper-text">Optional helper text</span>
-      <span slot="validity-message">Something isn't right</span>
-    </bx-number-input>
-  `;
-};
-
-withoutFormItemWrapper.storyName = 'Without form item wrapper';
-
-withoutFormItemWrapper.parameters = {
-  knobs: {
-    'bx-number-input': () => createProps({ ...knobs, textNullable }),
-  },
-};
-
-export const skeleton = () =>
-  html` <bx-number-input-skeleton></bx-number-input-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
+    [`${prefix}-number-input`]: () => createProps({ ...knobs }),
   },
 };
 
diff --git a/packages/carbon-web-components/src/components/number-input/number-input.scss b/packages/carbon-web-components/src/components/number-input/number-input.scss
index ad2c1aa1086..a36bfe06b21 100644
--- a/packages/carbon-web-components/src/components/number-input/number-input.scss
+++ b/packages/carbon-web-components/src/components/number-input/number-input.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,11 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/number-input/number-input';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/number-input/index';
 
 :host(#{$prefix}-number-input),
 :host(#{$prefix}-number-input-skeleton) {
@@ -15,7 +19,18 @@ $css--plex: true !default;
   width: 100%;
   outline: none;
 
-  .bx--form-requirement[hidden] {
+  .#{$prefix}--form-requirement[hidden] {
     display: none;
   }
 }
+
+.#{$prefix}--number__invalid
+  ~ .#{$prefix}--number__controls
+  .#{$prefix}--number__rule-divider:first-of-type,
+.#{$prefix}--number
+  .#{$prefix}--number__invalid
+  ~ input[type='number']:disabled
+  + .#{$prefix}--number__controls
+  .#{$prefix}--number__rule-divider:first-of-type {
+  background-color: $border-subtle;
+}
diff --git a/packages/carbon-web-components/src/components/number-input/number-input.ts b/packages/carbon-web-components/src/components/number-input/number-input.ts
index 6e0d953354b..d43a6d740cf 100644
--- a/packages/carbon-web-components/src/components/number-input/number-input.ts
+++ b/packages/carbon-web-components/src/components/number-input/number-input.ts
@@ -7,35 +7,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, query } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix } from '../../globals/settings';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import CaretUp16 from '@carbon/icons/lib/caret--up/16';
-import CaretDown16 from '@carbon/icons/lib/caret--down/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import Add16 from '@carbon/icons/lib/add/16';
+import Subtract16 from '@carbon/icons/lib/subtract/16';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
-import {
-  NUMBER_INPUT_COLOR_SCHEME,
-  NUMBER_INPUT_VALIDATION_STATUS,
-} from './defs';
+import { NUMBER_INPUT_VALIDATION_STATUS } from './defs';
 import styles from './number-input.scss';
-import BXInput, { INPUT_SIZE } from '../input/input';
+import CDSTextInput, { INPUT_SIZE } from '../text-input/text-input';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { NUMBER_INPUT_COLOR_SCHEME, NUMBER_INPUT_VALIDATION_STATUS };
-
-const { prefix } = settings;
+export { NUMBER_INPUT_VALIDATION_STATUS };
 
 /**
  * Number input.
  *
- * @element bx-number-input
+ * @element cds-number-input
  * @slot helper-text - The helper text.
  * @slot label-text - The label text.
  * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
  */
 @customElement(`${prefix}-number-input`)
-export default class BXNumberInput extends BXInput {
+class CDSNumberInput extends CDSTextInput {
   /**
    * Handles `input` event on the `<input>` in the shadow DOM.
    */
@@ -43,7 +40,7 @@ export default class BXNumberInput extends BXInput {
     const { target } = event;
     const { value } = target as HTMLInputElement;
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {
+      new CustomEvent((this.constructor as typeof CDSNumberInput).eventInput, {
         bubbles: true,
         composed: true,
         cancelable: false,
@@ -63,7 +60,7 @@ export default class BXNumberInput extends BXInput {
     const { _input: input } = this;
     this.stepDown();
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {
+      new CustomEvent((this.constructor as typeof CDSNumberInput).eventInput, {
         bubbles: true,
         composed: true,
         cancelable: false,
@@ -82,7 +79,7 @@ export default class BXNumberInput extends BXInput {
     const { _input: input } = this;
     this.stepUp();
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXNumberInput).eventInput, {
+      new CustomEvent((this.constructor as typeof CDSNumberInput).eventInput, {
         bubbles: true,
         composed: true,
         cancelable: false,
@@ -99,31 +96,20 @@ export default class BXNumberInput extends BXInput {
   @query('input')
   protected _input!: HTMLInputElement;
 
-  _testValidity() {
-    if (this._input?.valueAsNumber > Number(this.max)) {
-      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM;
-    }
-    if (this._input?.valueAsNumber < Number(this.min)) {
-      return NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;
+  _getInputValidity() {
+    if (this.invalid) {
+      return false;
     }
-    return super._testValidity();
-  }
-
-  _getValidityMessage(state: string) {
     if (
-      Object.values(NUMBER_INPUT_VALIDATION_STATUS).includes(
-        state as NUMBER_INPUT_VALIDATION_STATUS
-      )
+      this._input?.valueAsNumber > Number(this.max) ||
+      this._input?.valueAsNumber < Number(this.min)
     ) {
-      const stateMessageMap = {
-        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM]:
-          this.validityMessageMax,
-        [NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM]:
-          this.validityMessageMin,
-      };
-      return stateMessageMap[state];
+      return false;
+    }
+    if (this.value === '') {
+      return this.allowEmpty;
     }
-    return super._getValidityMessage(state);
+    return true;
   }
 
   protected _min = '';
@@ -132,12 +118,6 @@ export default class BXNumberInput extends BXInput {
 
   protected _step = '1';
 
-  /**
-   * The color scheme.
-   */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = NUMBER_INPUT_COLOR_SCHEME.REGULAR;
-
   /**
    * The minimum value allowed in the input
    */
@@ -180,12 +160,6 @@ export default class BXNumberInput extends BXInput {
     this.requestUpdate('step', oldValue);
   }
 
-  /**
-   * Set to `true` to enable the mobile variant of the number input
-   */
-  @property({ type: Boolean, reflect: true })
-  mobile = false;
-
   /**
    * Aria text for the button that increments the value
    */
@@ -199,26 +173,22 @@ export default class BXNumberInput extends BXInput {
   decrementButtonAssistiveText = 'decrease number input';
 
   /**
-   * The input box size.
+   * Specify whether you want the steppers to be hidden
    */
-  @property({ reflect: true })
-  size = INPUT_SIZE.REGULAR;
+  @property({ type: Boolean, attribute: 'hide-steppers', reflect: true })
+  hideSteppers = false;
 
   /**
-   * The validity message shown when the value is greater than the maximum
-   *
-   * Also available via the `validity-message-max` slot
+   * `true` to allow empty string.
    */
-  @property({ attribute: 'validity-message-max' })
-  validityMessageMax = '';
+  @property({ type: Boolean, attribute: 'allow-empty', reflect: true })
+  allowEmpty = false;
 
   /**
-   * The validity message shown when the value is less than the minimum
-   *
-   * Also available via the `validity-message-min` slot
+   * The input box size.
    */
-  @property({ attribute: 'validity-message-min' })
-  validityMessageMin = '';
+  @property({ reflect: true })
+  size = INPUT_SIZE.MEDIUM;
 
   /**
    * Handles incrementing the value in the input
@@ -234,15 +204,6 @@ export default class BXNumberInput extends BXInput {
     this._input.stepDown();
   }
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const {
       _handleInput: handleInput,
@@ -250,32 +211,46 @@ export default class BXNumberInput extends BXInput {
       _handleUserInitiatedStepUp: handleUserInitiatedStepUp,
     } = this;
 
+    const isValid = this._getInputValidity();
+
     const invalidIcon = WarningFilled16({
       class: `${prefix}--number__invalid`,
     });
 
-    const validity = this._testValidity();
+    const warnIcon = WarningAltFilled16({
+      class: `${prefix}--number__invalid ${prefix}--number__invalid--warning`,
+    });
 
-    const isGenericallyInvalid = () =>
-      this.invalid &&
-      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM &&
-      validity !== NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM;
+    let normalizedProps = {
+      disabled: !this.readonly && this.disabled,
+      invalid: !this.readonly && !isValid,
+      warn: !this.readonly && isValid && this.warn,
+      'slot-name': '',
+      'slot-text': '',
+      icon: null,
+    };
 
     const wrapperClasses = classMap({
       [`${prefix}--number`]: true,
-      [`${prefix}--number--${this.colorScheme}`]: this.colorScheme,
-      [`${prefix}--number--mobile`]: this.mobile,
       [`${prefix}--number--${this.size}`]: this.size,
+      [`${prefix}--number--nosteppers`]: this.hideSteppers,
+      [`${prefix}--number--readonly`]: this.readonly,
+    });
+
+    const inputWrapperClasses = classMap({
+      [`${prefix}--number__input-wrapper`]: true,
+      [`${prefix}--number__input-wrapper--warning`]: normalizedProps.warn,
     });
 
     const labelClasses = classMap({
       [`${prefix}--label`]: true,
-      [`${prefix}--label--disabled`]: this.disabled,
+      [`${prefix}--label--disabled`]: normalizedProps.disabled,
+      [`${prefix}--visually-hidden`]: this.hideLabel,
     });
 
     const helperTextClasses = classMap({
       [`${prefix}--form__helper-text`]: true,
-      [`${prefix}--form__helper-text--disabled`]: this.disabled,
+      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
     });
 
     const incrementButton = html`
@@ -285,10 +260,11 @@ export default class BXNumberInput extends BXInput {
         aria-live="polite"
         aria-atomic="true"
         type="button"
-        ?disabled=${this.disabled}
+        ?disabled=${normalizedProps.disabled}
         @click=${handleUserInitiatedStepUp}>
-        ${CaretUp16()}
+        ${Add16()}
       </button>
+      <div class="${prefix}--number__rule-divider"></div>
     `;
     const decrementButton = html`
       <button
@@ -297,22 +273,22 @@ export default class BXNumberInput extends BXInput {
         aria-live="polite"
         aria-atomic="true"
         type="button"
-        ?disabled=${this.disabled}
+        ?disabled=${normalizedProps.disabled}
         @click=${handleUserInitiatedStepDown}>
-        ${CaretDown16()}
+        ${Subtract16()}
       </button>
+      <div class="${prefix}--number__rule-divider"></div>
     `;
 
     const input = html`
       <input
-        ?autocomplete="${this.autocomplete}"
+        autocomplete="${this.autocomplete}"
         ?autofocus="${this.autofocus}"
-        ?data-invalid="${this.invalid}"
-        ?disabled="${this.disabled}"
+        ?data-invalid="${normalizedProps.invalid}"
+        ?disabled="${normalizedProps.disabled}"
         id="input"
         name="${ifNonEmpty(this.name)}"
         pattern="${ifNonEmpty(this.pattern)}"
-        placeholder="${ifNonEmpty(this.placeholder)}"
         ?readonly="${this.readonly}"
         ?required="${this.required}"
         type="number"
@@ -325,42 +301,40 @@ export default class BXNumberInput extends BXInput {
         aria-atomic="true" />
     `;
 
-    const defaultLayout = html`
-      ${this.invalid ? invalidIcon : null} ${input}
-      <div class="${prefix}--number__controls">
-        ${incrementButton} ${decrementButton}
-      </div>
-    `;
-
-    const mobileLayout = html` ${decrementButton} ${input} ${incrementButton} `;
+    if (normalizedProps.invalid) {
+      normalizedProps.icon = invalidIcon;
+      normalizedProps['slot-name'] = 'invalid-text';
+      normalizedProps['slot-text'] = this.invalidText;
+    } else if (normalizedProps.warn) {
+      normalizedProps.icon = warnIcon;
+      normalizedProps['slot-name'] = 'warn-text';
+      normalizedProps['slot-text'] = this.warnText;
+    }
 
     return html`
-      <div class="${wrapperClasses}" ?data-invalid=${this.invalid}>
+      <div class="${wrapperClasses}" ?data-invalid=${normalizedProps.invalid}>
         <label class="${labelClasses}" for="input">
-          <slot name="label-text"> ${this.labelText} </slot>
+          <slot name="label-text"> ${this.label} </slot>
         </label>
-        <div class="${prefix}--number__input-wrapper">
-          ${this.mobile ? mobileLayout : defaultLayout}
-        </div>
-        <div class="${helperTextClasses}">
-          <slot name="helper-text"> ${this.helperText} </slot>
-        </div>
-        <div
-          class="${prefix}--form-requirement"
-          ?hidden="${!isGenericallyInvalid()}">
-          <slot name="validity-message"> ${this.validityMessage} </slot>
+        <div class="${inputWrapperClasses}">
+          ${normalizedProps.icon} ${input}
+          <div class="${prefix}--number__controls">
+            ${!this.hideSteppers
+              ? html`${decrementButton} ${incrementButton}`
+              : null}
+          </div>
         </div>
         <div
-          class="${prefix}--form-requirement"
-          ?hidden="${validity !==
-          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MAXIMUM}">
-          <slot name="validity-message-max"> ${this.validityMessageMax} </slot>
+          class="${helperTextClasses}"
+          ?hidden="${normalizedProps.invalid || normalizedProps.warn}">
+          <slot name="helper-text"> ${this.helperText} </slot>
         </div>
         <div
           class="${prefix}--form-requirement"
-          ?hidden="${validity !==
-          NUMBER_INPUT_VALIDATION_STATUS.EXCEEDED_MINIMUM}">
-          <slot name="validity-message-min"> ${this.validityMessageMin} </slot>
+          ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
+          <slot name="${normalizedProps['slot-name']}">
+            ${normalizedProps['slot-text']}
+          </slot>
         </div>
       </div>
     `;
@@ -373,5 +347,11 @@ export default class BXNumberInput extends BXInput {
     return `${prefix}-number-input`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
+
+export default CDSNumberInput;
diff --git a/packages/carbon-web-components/src/components/number-input/stories/helpers.ts b/packages/carbon-web-components/src/components/number-input/stories/helpers.ts
index a12330b27a8..69e4d5ff194 100644
--- a/packages/carbon-web-components/src/components/number-input/stories/helpers.ts
+++ b/packages/carbon-web-components/src/components/number-input/stories/helpers.ts
@@ -1,44 +1,47 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { action } from '@storybook/addon-actions';
-import { INPUT_SIZE } from '../../input/input';
-import { NUMBER_INPUT_COLOR_SCHEME } from '../number-input';
-
-const colorSchemes = {
-  Regular: null,
-  [`Light (${NUMBER_INPUT_COLOR_SCHEME.LIGHT})`]:
-    NUMBER_INPUT_COLOR_SCHEME.LIGHT,
-};
+import { INPUT_SIZE } from '../../text-input/text-input';
 
 const sizes = {
-  Regular: null,
   [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  [`Extra large size (${INPUT_SIZE.EXTRA_LARGE})`]: INPUT_SIZE.EXTRA_LARGE,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
 };
 
-const createProps = ({ boolean, textNullable, number, select }) => ({
-  colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
+const createProps = ({ boolean, number, select, text }) => ({
+  allowEmpty: boolean('Allow empty (allow-empty)', false),
+  decrementButtonDescription: text(
+    'Decrement button assistive description (decrement-button-assistive-text)',
+    'decrease number input'
+  ),
+  incrementButtonDescription: text(
+    'Increment button assistive description (increment-button-assistive-text)',
+    'increase number input'
+  ),
   disabled: boolean('Disabled (disabled)', false),
-  value: number('Input value (value)', 0),
+  helperText: text('Helper text (helper-text)', 'Optional helper text'),
+  hideLabel: boolean('Hide label (hide-label)', false),
+  hideSteppers: boolean('Hide steppers (hide-steppers)', false),
+  invalid: boolean('Invalid (invalid)', false),
+  invalidText: text('Invalid text (invalid-text)', 'Number is not valid'),
+  label: text('Label (label)', 'number-input label'),
+  readonly: boolean('Read only (readonly)', false),
+  value: number('Value (value)', 50),
+  warn: boolean('Warn (warn)', false),
+  warnText: text('Warn text (warn-text)', 'Warning text'),
   min: number('Minimum value (min)', 0),
   max: number('Maximum value (max)', 100),
   step: number('Value to step the input by (step)', 1),
-  size: select('Input size (size)', sizes, INPUT_SIZE.REGULAR),
-  placeholder: textNullable(
-    'Placeholder text (placeholder)',
-    'Optional placeholder text'
-  ),
-  invalid: boolean('Invalid (invalid)', false),
+  size: select('Size (size)', sizes, INPUT_SIZE.MEDIUM),
   onInput: action('input'),
-  mobile: boolean('Mobile mode (mobile)', false),
-  hideLabel: boolean('Hide label (hideLabel)', false),
 });
 
 export default createProps;
diff --git a/packages/carbon-web-components/src/components/overflow-menu/defs.ts b/packages/carbon-web-components/src/components/overflow-menu/defs.ts
index f77af774723..433495a9b60 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/defs.ts
+++ b/packages/carbon-web-components/src/components/overflow-menu/defs.ts
@@ -1,32 +1,30 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-export { FORM_ELEMENT_COLOR_SCHEME as OVERFLOW_MENU_COLOR_SCHEME } from '../../globals/shared-enums';
-
 /**
  * Overflow menu size.
  */
 export enum OVERFLOW_MENU_SIZE {
   /**
-   * Regular size.
+   * Small size.
    */
-  REGULAR = '',
+  SMALL = 'sm',
 
   /**
-   * Small size.
+   * Medium size.
    */
-  SMALL = 'sm',
+  MEDIUM = 'md',
 
   /**
-   * X-Large size.
+   * Large size.
    */
-  EXTRA_LARGE = 'xl',
+  LARGE = 'lg',
 }
 
 export const NAVIGATION_DIRECTION = {
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts
index bd47eeca572..6bd338dcfd9 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-body.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property } from 'lit-element';
-import BXFloatingMenu, {
-  FLOATING_MENU_ALIGNMENT,
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSFloatingMenu, {
   FLOATING_MENU_DIRECTION,
 } from '../floating-menu/floating-menu';
-import { NAVIGATION_DIRECTION, OVERFLOW_MENU_COLOR_SCHEME } from './defs';
-import styles from './overflow-menu.scss';
-import BXOverflowMenuItem from './overflow-menu-item';
+import { NAVIGATION_DIRECTION, OVERFLOW_MENU_SIZE } from './defs';
+import CDSOverflowMenuItem from './overflow-menu-item';
 import HostListener from '../../globals/decorators/host-listener';
 import { indexOf } from '../../globals/internal/collection-helpers';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
+import styles from './overflow-menu.scss';
 
 /**
  * @param index The index
@@ -40,27 +38,21 @@ const capIndex = (index: number, length: number) => {
 /**
  * Overflow menu body.
  *
- * @element bx-overflow-menu-body
+ * @element cds-overflow-menu-body
  */
 @customElement(`${prefix}-overflow-menu-body`)
-class BXOverflowMenuBody extends BXFloatingMenu {
+class CDSOverflowMenuBody extends CDSFloatingMenu {
   /**
-   * How the menu is aligned to the trigger button.
+   * The menu direction.
    */
   @property()
-  alignment = FLOATING_MENU_ALIGNMENT.START;
-
-  /**
-   * The color scheme.
-   */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = OVERFLOW_MENU_COLOR_SCHEME.REGULAR;
+  direction = FLOATING_MENU_DIRECTION.BOTTOM;
 
   /**
-   * The menu direction.
+   * How the menu is aligned to the trigger button.
    */
-  @property()
-  direction = FLOATING_MENU_DIRECTION.BOTTOM;
+  @property({ type: Boolean, reflect: true })
+  flipped = false;
 
   /**
    * `true` if the menu should be open.
@@ -70,16 +62,22 @@ class BXOverflowMenuBody extends BXFloatingMenu {
   @property({ type: Boolean, reflect: true })
   open = false;
 
-  selected: BXOverflowMenuItem | null = null;
+  selected: CDSOverflowMenuItem | null = null;
+
+  /**
+   * The overflow menu size.
+   */
+  @property({ reflect: true })
+  size = OVERFLOW_MENU_SIZE.MEDIUM;
 
   /**
    * @param currentItem The currently selected item.
    * @param direction The navigation direction.
    * @returns The item to be selected.
    */
-  protected _getNextItem(currentItem: BXOverflowMenuItem, direction: number) {
+  protected _getNextItem(currentItem: CDSOverflowMenuItem, direction: number) {
     const { selectorItemEnabled } = this
-      .constructor as typeof BXOverflowMenuBody;
+      .constructor as typeof CDSOverflowMenuBody;
     const menuItems = this.querySelectorAll(selectorItemEnabled);
     const currentIndex = indexOf(menuItems, currentItem);
     const nextIndex = capIndex(currentIndex + direction, menuItems.length);
@@ -111,7 +109,7 @@ class BXOverflowMenuBody extends BXFloatingMenu {
        * automatically due to FocusMixin
        */
       if (this.contains(document.activeElement)) {
-        this.selected = document.activeElement as BXOverflowMenuItem;
+        this.selected = document.activeElement as CDSOverflowMenuItem;
       }
 
       if (key in NAVIGATION_DIRECTION) {
@@ -135,6 +133,19 @@ class BXOverflowMenuBody extends BXFloatingMenu {
     super.connectedCallback();
   }
 
+  updated(changedProperties) {
+    if (changedProperties.has('size')) {
+      const { selectorMenuItem } = this
+        .constructor as typeof CDSOverflowMenuBody;
+      const menuItems = this.querySelectorAll(selectorMenuItem);
+      menuItems.forEach((item) => {
+        item.setAttribute('size', this.size);
+      });
+    }
+
+    super.updated(changedProperties);
+  }
+
   render() {
     return html` <slot></slot> `;
   }
@@ -156,4 +167,4 @@ class BXOverflowMenuBody extends BXFloatingMenu {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXOverflowMenuBody;
+export default CDSOverflowMenuBody;
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts
index b8c30172f5b..4224f9e6da4 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-item.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import FocusMixin from '../../globals/mixins/focus';
+import { OVERFLOW_MENU_SIZE } from './defs';
 import styles from './overflow-menu.scss';
 
-const { prefix } = settings;
-
 /**
  * Overflow menu item.
  *
- * @element bx-overflow-menu-item
+ * @element cds-overflow-menu-item
  */
 @customElement(`${prefix}-overflow-menu-item`)
-class BXOverflowMenuItem extends FocusMixin(LitElement) {
+class CDSOverflowMenuItem extends FocusMixin(LitElement) {
   /**
    * `true` if the action is danger.
    */
@@ -34,20 +34,23 @@ class BXOverflowMenuItem extends FocusMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * `true` if the item has a divider
+   */
+  @property({ type: Boolean, reflect: true })
+  divider = false;
+
   /**
    * The link href of the overflow menu item.
    */
   @property()
   href = '';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * The size of the overflow menu item.
+   */
+  @property({ reflect: true })
+  size = OVERFLOW_MENU_SIZE.MEDIUM;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -63,21 +66,29 @@ class BXOverflowMenuItem extends FocusMixin(LitElement) {
             class="${prefix}--overflow-menu-options__btn"
             ?disabled=${this.disabled}
             href="${this.href}"
-            tabindex="${this.disabled ? -1 : 0}"
-            ><slot></slot
-          ></a>
+            tabindex="-1">
+            <div class="${prefix}--overflow-menu-options__option-content">
+              <slot></slot>
+            </div>
+          </a>
         `
       : html`
           <button
             class="${prefix}--overflow-menu-options__btn"
             ?disabled=${this.disabled}
-            tabindex="${this.disabled ? -1 : 0}">
-            <slot></slot>
+            tabindex="-1">
+            <div class="${prefix}--overflow-menu-options__option-content">
+              <slot></slot>
+            </div>
           </button>
         `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXOverflowMenuItem;
+export default CDSOverflowMenuItem;
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
index 26c110df0fa..947cdadf347 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Overflow menu
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/overflow-menu)
 
 Overflow menu is used when additional options are available to the user and
 there is a space constraint. Create overflow menu item components for each
@@ -21,6 +21,7 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/web-components/es/components/overflow-menu/index.js';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
 ```
 
 <Description markdown={`${cdnJs({ components: ['overflow-menu'] })}`} />
@@ -29,33 +30,36 @@ import '@carbon/web-components/es/components/overflow-menu/index.js';
 ### HTML
 
 ```html
-<bx-overflow-menu>
-  <bx-overflow-menu-body>
-    <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-    <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-    <bx-overflow-menu-item>Option 3</bx-overflow-menu-item>
-    <bx-overflow-menu-item>Option 4</bx-overflow-menu-item>
-    <bx-overflow-menu-item>Option 5</bx-overflow-menu-item>
-  </bx-overflow-menu-body>
-</bx-overflow-menu>
+<cds-overflow-menu>
+  ${OverflowMenuVertical16({ class: `${prefix}--overflow-menu__icon`, slot:
+  'icon', })}
+  <span slot="tooltip-content"> Options </span>
+  <cds-overflow-menu-body>
+    <cds-overflow-menu-item>Option 1</cds-overflow-menu-item>
+    <cds-overflow-menu-item>Option 2</cds-overflow-menu-item>
+    <cds-overflow-menu-item>Option 3</cds-overflow-menu-item>
+    <cds-overflow-menu-item>Option 4</cds-overflow-menu-item>
+    <cds-overflow-menu-item>Option 5</cds-overflow-menu-item>
+  </cds-overflow-menu-body>
+</cds-overflow-menu>
 ```
 
-## `<bx-overflow-menu>` attributes and properties
+## `<cds-overflow-menu>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-overflow-menu open>`) and `false` means not setting the attribute (e.g.
-`<bx-overflow-menu>` without `open` attribute).
+`<cds-overflow-menu open>`) and `false` means not setting the attribute (e.g.
+`<cds-overflow-menu>` without `open` attribute).
 
-<Props of="bx-overflow-menu" />
+<Props of="cds-overflow-menu" />
 
-## `<bx-overflow-menu-body>` attributes and properties
+## `<cds-overflow-menu-body>` attributes and properties
 
-<Props of="bx-overflow-menu-body" />
+<Props of="cds-overflow-menu-body" />
 
-## `<bx-overflow-menu-item>` attributes and properties
+## `<cds-overflow-menu-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-overflow-menu-item disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-overflow-menu-item>` without `disabled` attribute).
+`<cds-overflow-menu-item disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-overflow-menu-item>` without `disabled` attribute).
 
-<Props of="bx-overflow-menu-item" />
+<Props of="cds-overflow-menu-item" />
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts
index 82d473cef27..cf16203d9f7 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu-story.ts
@@ -1,79 +1,119 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { boolean, select } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu';
-import {
-  OVERFLOW_MENU_COLOR_SCHEME,
-  OVERFLOW_MENU_SIZE,
-} from './overflow-menu';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean, number, select } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { OVERFLOW_MENU_SIZE } from './overflow-menu';
 import './overflow-menu-body';
 import './overflow-menu-item';
 import storyDocs from './overflow-menu-story.mdx';
+import { prefix } from '../../globals/settings';
+import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import Filter16 from '@carbon/icons/lib/filter/16';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${OVERFLOW_MENU_COLOR_SCHEME.LIGHT})`]:
-    OVERFLOW_MENU_COLOR_SCHEME.LIGHT,
+const sizes = {
+  [`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL,
+  [`Medium size (default) (${OVERFLOW_MENU_SIZE.MEDIUM})`]:
+    OVERFLOW_MENU_SIZE.MEDIUM,
+  [`Lg size (${OVERFLOW_MENU_SIZE.LARGE})`]: OVERFLOW_MENU_SIZE.LARGE,
 };
 
-const directions = {
-  [`Bottom (${FLOATING_MENU_DIRECTION.BOTTOM})`]:
-    FLOATING_MENU_DIRECTION.BOTTOM,
-  [`Top (${FLOATING_MENU_DIRECTION.TOP})`]: FLOATING_MENU_DIRECTION.TOP,
+export const Default = () => {
+  return html`
+    <cds-overflow-menu>
+      ${OverflowMenuVertical16({
+        class: `${prefix}--overflow-menu__icon`,
+        slot: 'icon',
+      })}
+      <span slot="tooltip-content"> Options </span>
+      <cds-overflow-menu-body>
+        <cds-overflow-menu-item>Stop app</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Restart app</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Rename app</cds-overflow-menu-item>
+        <cds-overflow-menu-item disabled
+          >Clone and move app</cds-overflow-menu-item
+        >
+        <cds-overflow-menu-item>Edit routes and access</cds-overflow-menu-item>
+        <cds-overflow-menu-item divider danger
+          >Delete app</cds-overflow-menu-item
+        >
+      </cds-overflow-menu-body>
+    </cds-overflow-menu>
+  `;
 };
 
-const sizes = {
-  'Regular size': null,
-  [`Small size (${OVERFLOW_MENU_SIZE.SMALL})`]: OVERFLOW_MENU_SIZE.SMALL,
-  [`XL size (${OVERFLOW_MENU_SIZE.EXTRA_LARGE})`]:
-    OVERFLOW_MENU_SIZE.EXTRA_LARGE,
+export const renderCustomIcon = () => {
+  return html`
+    <cds-overflow-menu>
+      ${Filter16({
+        class: `${prefix}--overflow-menu__icon`,
+        slot: 'icon',
+      })}
+      <span slot="tooltip-content">Options</span>
+      <cds-overflow-menu-body>
+        <cds-overflow-menu-item>Filter A</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Filter B</cds-overflow-menu-item>
+      </cds-overflow-menu-body>
+    </cds-overflow-menu>
+  `;
 };
 
-export const Default = (args) => {
-  const { open, colorScheme, disabled, direction, size } =
-    args?.['bx-overflow-menu'] ?? {};
+export const Playground = (args) => {
+  const { flipped, iconDescription, open, index, size } =
+    args?.[`${prefix}-overflow-menu`] ?? {};
   return html`
-    <bx-overflow-menu ?open="${open}" ?disabled="${disabled}" size="${size}">
-      <bx-overflow-menu-body
-        color-scheme="${ifNonNull(colorScheme)}"
-        direction="${ifNonNull(direction)}">
-        <bx-overflow-menu-item>Option 1</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 2</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 3</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 4</bx-overflow-menu-item>
-        <bx-overflow-menu-item>Option 5</bx-overflow-menu-item>
-      </bx-overflow-menu-body>
-    </bx-overflow-menu>
+    <cds-overflow-menu ?open="${open}" size="${size}" index=${index}>
+      ${OverflowMenuVertical16({
+        class: `${prefix}--overflow-menu__icon`,
+        slot: 'icon',
+      })}
+      <span slot="tooltip-content"> ${iconDescription} </span>
+      <cds-overflow-menu-body ?flipped="${ifDefined(flipped)}">
+        <cds-overflow-menu-item>Stop app</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Restart app</cds-overflow-menu-item>
+        <cds-overflow-menu-item>Rename app</cds-overflow-menu-item>
+        <cds-overflow-menu-item disabled
+          >Clone and move app</cds-overflow-menu-item
+        >
+        <cds-overflow-menu-item>Edit routes and access</cds-overflow-menu-item>
+        <cds-overflow-menu-item divider danger
+          >Delete app</cds-overflow-menu-item
+        >
+      </cds-overflow-menu-body>
+    </cds-overflow-menu>
   `;
 };
 
-Default.storyName = 'Default';
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-overflow-menu`]: () => ({
+      flipped: boolean('Flipped (flipped)', false),
+      iconDescription: textNullable(
+        'Icon description (iconDescription)',
+        'Options'
+      ),
+      open: boolean('Open (open)', false),
+      index: number('Index focus (index)', 1),
+      size: select(
+        'Overflow menu size (size)',
+        sizes,
+        OVERFLOW_MENU_SIZE.MEDIUM
+      ),
+    }),
+  },
+};
 
 export default {
   title: 'Components/Overflow menu',
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-overflow-menu': () => ({
-        open: boolean('Open (open)', false),
-        colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
-        disabled: boolean('Disabled (disabled)', false),
-        direction: select(
-          'Direction (direction in <bx-overflow-menu-body>)',
-          directions,
-          FLOATING_MENU_DIRECTION.BOTTOM
-        ),
-        size: select('Overflow menu size (size)', sizes, null),
-      }),
-    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.scss b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.scss
index 76c5e0b940a..267cb02b2ca 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.scss
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,21 +7,32 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/overflow-menu/overflow-menu' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include overflow-menu;
 
 :host(#{$prefix}-overflow-menu),
 :host(#{$prefix}-breadcrumb-overflow-menu) {
   @extend .#{$prefix}--overflow-menu;
+
+  ::slotted(.#{$prefix}--overflow-menu__icon) {
+    @extend .#{$prefix}--overflow-menu__icon;
+  }
 }
 
-:host(#{$prefix}-overflow-menu)[size='sm'],
-:host(#{$prefix}-breadcrumb-overflow-menu)[size='sm'] {
+:host(#{$prefix}-overflow-menu[size='sm']),
+:host(#{$prefix}-breadcrumb-overflow-menu[size='sm']) {
   @extend .#{$prefix}--overflow-menu--sm;
 }
 
-:host(#{$prefix}-overflow-menu)[size='xl'],
-:host(#{$prefix}-breadcrumb-overflow-menu)[size='xl'] {
-  @extend .#{$prefix}--overflow-menu--xl;
+:host(#{$prefix}-overflow-menu[size='lg']),
+:host(#{$prefix}-breadcrumb-overflow-menu[size='lg']) {
+  @extend .#{$prefix}--overflow-menu--lg;
 }
 
 :host(#{$prefix}-overflow-menu[disabled]),
@@ -29,7 +40,7 @@ $css--plex: true !default;
   cursor: not-allowed;
 
   svg {
-    fill: $disabled;
+    fill: $icon-disabled;
     cursor: not-allowed;
   }
 }
@@ -41,53 +52,52 @@ $css--plex: true !default;
 
 :host(#{$prefix}-overflow-menu[open]),
 :host(#{$prefix}-breadcrumb-overflow-menu[open]) {
-  background-color: $ui-01;
+  background-color: $layer-01;
   transition: none;
-  box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
-}
+  box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
 
-:host(#{$prefix}-overflow-menu[color-scheme='light'][open]),
-:host(#{$prefix}-breadcrumb-overflow-menu[color-scheme='light'][open]) {
-  background-color: $ui-02;
+  :hover {
+    background-color: $layer;
+  }
 }
 
 :host(#{$prefix}-overflow-menu-body) {
   @extend .#{$prefix}--overflow-menu-options;
-
-  &::after {
-    @extend .#{$prefix}--overflow-menu-options,
-      [data-floating-menu-direction='bottom'],
-      ::after;
-  }
 }
 
 :host(#{$prefix}-overflow-menu-body[direction='top']) {
   margin-top: 0;
-  margin-bottom: $spacing-2xs;
-
-  &::after {
-    @extend .#{$prefix}--overflow-menu-options,
-      [data-floating-menu-direction='top'],
-      ::after;
-  }
+  margin-bottom: $spacing-02;
 }
 
 :host(#{$prefix}-overflow-menu-body[open]) {
   @extend .#{$prefix}--overflow-menu-options--open;
 }
 
-:host(#{$prefix}-overflow-menu-body[color-scheme='light']) {
-  background-color: $ui-02;
+:host(#{$prefix}-overflow-menu-body[size='sm']) {
+  @extend .#{$prefix}--overflow-menu-options--sm;
+}
 
-  &::after {
-    background-color: $ui-02;
-  }
+:host(#{$prefix}-overflow-menu-body[size='lg']) {
+  @extend .#{$prefix}--overflow-menu-options--lg;
 }
 
 :host(#{$prefix}-overflow-menu-item) {
   @extend .#{$prefix}--overflow-menu-options__option;
 
   outline: none;
+
+  button:hover {
+    background-color: $layer-hover;
+  }
+}
+
+:host(#{$prefix}-overflow-menu-item[size='sm']) {
+  height: $spacing-07;
+}
+
+:host(#{$prefix}-overflow-menu-item[size='lg']) {
+  height: $spacing-09;
 }
 
 :host(#{$prefix}-overflow-menu-item[danger]) {
@@ -97,3 +107,7 @@ $css--plex: true !default;
 :host(#{$prefix}-overflow-menu-item[disabled]) {
   @extend .#{$prefix}--overflow-menu-options__option--disabled;
 }
+
+:host(#{$prefix}-overflow-menu-item[divider]) {
+  @extend .#{$prefix}--overflow-menu--divider;
+}
diff --git a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts
index fe0f005c1f9..67a024f9536 100644
--- a/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts
+++ b/packages/carbon-web-components/src/components/overflow-menu/overflow-menu.ts
@@ -7,49 +7,51 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
-import OverflowMenuVertical16 from '@carbon/icons/lib/overflow-menu--vertical/16';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { find } from '../../globals/internal/collection-helpers';
-import BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';
-import { OVERFLOW_MENU_COLOR_SCHEME, OVERFLOW_MENU_SIZE } from './defs';
-import BXOverflowMenuBody from './overflow-menu-body';
+import CDSFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';
+import { OVERFLOW_MENU_SIZE } from './defs';
+import CDSOverflowMenuBody from './overflow-menu-body';
 import styles from './overflow-menu.scss';
+import CDSIconButton from '../icon-button/icon-button';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { OVERFLOW_MENU_COLOR_SCHEME, OVERFLOW_MENU_SIZE };
-
-const { prefix } = settings;
+export { OVERFLOW_MENU_SIZE };
 
 /**
  * Overflow menu.
  *
- * @element bx-overflow-menu
+ * @element cds-overflow-menu
  * @slot icon - The icon for the trigger button.
  */
 @customElement(`${prefix}-overflow-menu`)
-class BXOverflowMenu
-  extends HostListenerMixin(FocusMixin(LitElement))
-  implements BXFloatingMenuTrigger
+class CDSOverflowMenu
+  extends HostListenerMixin(FocusMixin(CDSIconButton))
+  implements CDSFloatingMenuTrigger
 {
   /**
    * The menu body.
    */
-  private _menuBody: BXOverflowMenuBody | null = null;
+  private _menuBody: CDSOverflowMenuBody | null = null;
 
   /**
    * Handles user-initiated toggling of the menu.
    */
   private async _handleUserInitiatedToggle() {
     this.open = !this.open;
-    const { open, updateComplete } = this;
+    const { index, open, updateComplete } = this;
     if (open) {
       await updateComplete;
       const { _menuBody: menuBody } = this;
-      menuBody?.focus();
+      const menuItem = menuBody?.querySelector(
+        `${prefix}-overflow-menu-item:nth-of-type(${index})`
+      ) as HTMLElement;
+      menuItem?.focus();
     }
   }
 
@@ -67,17 +69,18 @@ class BXOverflowMenu
    */
   @HostListener('keydown')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleKeydownTrigger = async ({ key }) => {
-    if (key === ' ' || key === 'Enter') {
+  private _handleKeydownTrigger = async (event) => {
+    if (event.key === ' ' || event.key === 'Enter') {
       this._handleUserInitiatedToggle();
+      event.preventDefault();
     }
   };
 
   /**
-   * The color scheme.
+   * `true` if this tooltip is in a data table row
    */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = OVERFLOW_MENU_COLOR_SCHEME.REGULAR;
+  @property({ type: Boolean, reflect: true, attribute: 'data-table' })
+  dataTable = false;
 
   /**
    * `true` if this overflow menu should be disabled.
@@ -85,17 +88,35 @@ class BXOverflowMenu
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * `true` if this overflow menu body should be flipped.
+   */
+  @property({ type: Boolean, reflect: true })
+  flipped = false;
+
   /**
    * `true` if the dropdown should be open.
    */
   @property({ type: Boolean, reflect: true })
   open = false;
 
+  /**
+   * Index (starting at 1) of overflow menu item to focus on open.
+   */
+  @property()
+  index = 1;
+
   /**
    * Overflow menu size.
    */
   @property({ reflect: true })
-  size = OVERFLOW_MENU_SIZE.REGULAR;
+  size = OVERFLOW_MENU_SIZE.MEDIUM;
+
+  /**
+   * `true` if this menu is a toolbar action
+   */
+  @property({ type: Boolean, attribute: 'toolbar-action', reflect: true })
+  toolbarAction = false;
 
   /**
    * @returns The position of the trigger button in the viewport.
@@ -105,19 +126,9 @@ class BXOverflowMenu
   }
 
   connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'button');
-    }
-    if (!this.hasAttribute('tabindex')) {
-      // TODO: Should we use a property?
-      this.setAttribute('tabindex', '0');
-    }
     if (!this.hasAttribute('aria-haspopup')) {
       this.setAttribute('aria-haspopup', 'true');
     }
-    if (!this.hasAttribute('aria-expanded')) {
-      this.setAttribute('aria-expanded', 'false');
-    }
     if (!this.shadowRoot) {
       this.attachShadow({ mode: 'open' });
     }
@@ -125,42 +136,72 @@ class BXOverflowMenu
   }
 
   updated(changedProperties) {
+    const button = this.shadowRoot
+      ?.querySelector(`${prefix}-tooltip`)
+      ?.querySelector('button');
+    button?.classList.add(
+      `${prefix}--btn--icon-only`,
+      `${prefix}--overflow-menu`
+    );
+
     if (changedProperties.has('open')) {
-      const { colorScheme, open } = this;
+      const { open } = this;
       if (open && !this._menuBody) {
         this._menuBody = find(
           this.childNodes,
           (elem) =>
-            (elem.constructor as typeof BXOverflowMenuBody).FLOATING_MENU
+            (elem.constructor as typeof CDSOverflowMenuBody).FLOATING_MENU
         );
       }
       const { _menuBody: menuBody } = this;
       if (menuBody) {
-        menuBody.colorScheme = colorScheme;
         menuBody.open = open;
-        this.setAttribute('aria-expanded', String(Boolean(open)));
+
+        const tooltipContent = this.querySelector(
+          '[slot=tooltip-content]'
+        )?.textContent;
+        button?.setAttribute('aria-expanded', String(Boolean(open)));
+        button?.setAttribute('aria-label', String(tooltipContent));
       }
     }
-    if (changedProperties.has('colorScheme')) {
-      const { colorScheme } = this;
+
+    if (changedProperties.has('dataTable')) {
+      const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`);
+      tooltip?.setAttribute('data-table', '');
+    }
+
+    if (changedProperties.has('size')) {
+      const { size } = this;
       const { _menuBody: menuBody } = this;
       if (menuBody) {
-        menuBody.colorScheme = colorScheme;
+        menuBody.size = size;
       }
+
+      button?.classList.forEach((item) => {
+        if (item.startsWith(`${prefix}--overflow-menu--`)) {
+          button?.classList.remove(item);
+        }
+      });
+      button?.classList.add(`${prefix}--overflow-menu--${this.size}`);
+
+      const tooltip = this.shadowRoot?.querySelector(`${prefix}-tooltip`);
+      tooltip?.setAttribute('size', this.size);
     }
+
+    if (changedProperties.has('toolbarAction') && this.toolbarAction) {
+      this.shadowRoot
+        ?.querySelector(`${prefix}-tooltip`)
+        ?.setAttribute('toolbar-action', '');
+    }
+
+    super.updated(changedProperties);
   }
 
   render() {
-    return html`
-      <slot name="icon">
-        ${OverflowMenuVertical16({
-          class: `${prefix}--overflow-menu__icon`,
-        })}
-      </slot>
-    `;
+    return html` ${super.render()} `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXOverflowMenu;
+export default CDSOverflowMenu;
diff --git a/packages/carbon-web-components/src/components/pagination/defs.ts b/packages/carbon-web-components/src/components/pagination/defs.ts
new file mode 100644
index 00000000000..afe597c84fe
--- /dev/null
+++ b/packages/carbon-web-components/src/components/pagination/defs.ts
@@ -0,0 +1,28 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * Pagination size.
+ */
+export enum PAGINATION_SIZE {
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+}
diff --git a/packages/carbon-web-components/src/components/pagination/index.ts b/packages/carbon-web-components/src/components/pagination/index.ts
index cd4bab10172..d44565c18f9 100644
--- a/packages/carbon-web-components/src/components/pagination/index.ts
+++ b/packages/carbon-web-components/src/components/pagination/index.ts
@@ -1,12 +1,11 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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 './page-sizes-select';
-import './pages-select';
+import '../select/select-item';
 import './pagination';
diff --git a/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts b/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts
deleted file mode 100644
index fa219f1834c..00000000000
--- a/packages/carbon-web-components/src/components/pagination/page-sizes-select.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, query, LitElement } from 'lit-element';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import settings from 'carbon-components/es/globals/js/settings';
-import FocusMixin from '../../globals/mixins/focus';
-import styles from './pagination.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * The select box for page sizes.
- *
- * @element bx-page-sizes-select
- * @slot label-text - The label text.
- * @fires bx-page-sizes-select-changed - The custom event fired after the page size is changed.
- */
-@customElement(`${prefix}-page-sizes-select`)
-class BXPageSizesSelect extends FocusMixin(LitElement) {
-  @query('select')
-  private _selectNode!: HTMLSelectElement;
-
-  /**
-   * Handles `change` event on the `<select>` to select page size.
-   */
-  private _handleChange({ target }: Event) {
-    const value = Number((target as HTMLSelectElement).value);
-    this.dispatchEvent(
-      new CustomEvent(
-        (this.constructor as typeof BXPageSizesSelect).eventChange,
-        {
-          bubbles: true,
-          composed: true,
-          detail: {
-            value,
-          },
-        }
-      )
-    );
-    this.value = value;
-  }
-
-  /**
-   * Handles `slotchange` event for the `<slot>` for `<options>`.
-   *
-   * @param event The event.
-   */
-  private _handleSlotChange({ target }: Event) {
-    const { _selectNode: selectNode, value } = this;
-    while (selectNode.firstChild) {
-      selectNode.removeChild(selectNode.firstChild);
-    }
-    (
-      (target as HTMLSlotElement).assignedNodes() as HTMLOptionElement[]
-    ).forEach((item) => {
-      const optionElement = item.cloneNode(true) as HTMLOptionElement;
-      if (value && Number(optionElement.value) === value) {
-        optionElement.selected = true;
-      }
-      selectNode?.appendChild(optionElement);
-    });
-  }
-
-  /**
-   * The label text.
-   */
-  @property({ attribute: 'label-text' })
-  labelText = 'Items per page:';
-
-  /**
-   * The value, working as the current page size.
-   */
-  @property({ type: Number })
-  value!: number;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
-  render() {
-    const {
-      labelText,
-      value,
-      _handleChange: handleChange,
-      _handleSlotChange: handleSlotChange,
-    } = this;
-    return html`
-      <label for="select" class="${prefix}--pagination__text"
-        ><slot name="label-text">${labelText}</slot></label
-      >
-      <div class="${prefix}--select__item-count">
-        <select
-          id="select"
-          class="${prefix}--select-input"
-          .value="${value}"
-          @change=${handleChange}></select>
-        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
-      </div>
-      <div hidden><slot @slotchange="${handleSlotChange}"></slot></div>
-    `;
-  }
-
-  /**
-   * The name of the custom event fired after the page size is changed.
-   */
-  static get eventChange() {
-    return `${prefix}-page-sizes-select-changed`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXPageSizesSelect;
diff --git a/packages/carbon-web-components/src/components/pagination/pages-select.ts b/packages/carbon-web-components/src/components/pagination/pages-select.ts
deleted file mode 100644
index eea2b196b88..00000000000
--- a/packages/carbon-web-components/src/components/pagination/pages-select.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, LitElement } from 'lit-element';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import settings from 'carbon-components/es/globals/js/settings';
-import FocusMixin from '../../globals/mixins/focus';
-import styles from './pagination.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * The select box for the current page.
- *
- * @element bx-pages-select
- * @fires bx-pages-select-changed - The custom event fired after the page is changed.
- */
-@customElement(`${prefix}-pages-select`)
-class BXPagesSelect extends FocusMixin(LitElement) {
-  /**
-   * Handles `change` event on the `<select>` to select page size.
-   */
-  private _handleChange({ target }: Event) {
-    const value = Number((target as HTMLSelectElement).value);
-    this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXPagesSelect).eventChange, {
-        bubbles: true,
-        composed: true,
-        detail: {
-          value,
-        },
-      })
-    );
-    this.value = value;
-  }
-
-  /**
-   * The formatter for the assistive text for screen readers to announce.
-   * Should be changed upon the locale the UI is rendered with.
-   */
-  @property({ attribute: false })
-  formatLabelText = ({ count }) =>
-    `Page number, of ${count} page${count <= 1 ? '' : 's'}`;
-
-  /**
-   * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.
-   */
-  @property({ attribute: false })
-  formatSupplementalText = ({ count }) =>
-    `of ${count} page${count <= 1 ? '' : 's'}`;
-
-  /**
-   * The number of total pages.
-   */
-  @property({ type: Number })
-  total!: number;
-
-  /**
-   * The value, working as the current page, index that starts with zero.
-   */
-  @property({ type: Number })
-  value!: number;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
-  render() {
-    const {
-      formatLabelText,
-      formatSupplementalText,
-      total,
-      value,
-      _handleChange: handleChange,
-    } = this;
-    // `<option ?selected="${index === value}">` is a workaround for:
-    // https://github.com/Polymer/lit-html/issues/1052
-    return html`
-      <div class="${prefix}--select__page-number">
-        <label for="select" class="${prefix}--label ${prefix}--visually-hidden">
-          ${formatLabelText({ count: total })}
-        </label>
-        <select
-          class="${prefix}--select-input"
-          .value="${value}"
-          @change="${handleChange}">
-          ${Array.from(new Array(total)).map(
-            (_item, index) =>
-              html`
-                <option value=${index} ?selected="${index === value}">
-                  ${index + 1}
-                </option>
-              `
-          )}
-        </select>
-        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
-      </div>
-      <span class="${prefix}--pagination__text">
-        ${formatSupplementalText({ count: total })}
-      </span>
-    `;
-  }
-
-  /**
-   * The name of the custom event fired after the page is changed.
-   */
-  static get eventChange() {
-    return `${prefix}-pages-select-changed`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXPagesSelect;
diff --git a/packages/carbon-web-components/src/components/pagination/pagination-story.mdx b/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
index 5d66d792b0e..c1b6db78a88 100644
--- a/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
+++ b/packages/carbon-web-components/src/components/pagination/pagination-story.mdx
@@ -4,13 +4,13 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Pagination
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/pagination)
 
 The pagination component is used to switch through multiple pages of items, when
-only a maxium number of items can be displayed per page. Can be used in
+only a maximum number of items can be displayed per page. Can be used in
 combination with other components like data table.
 
 ## Getting started
@@ -29,28 +29,29 @@ import '@carbon/web-components/es/components/pagination/index.js';
 ### HTML
 
 ```html
-<bx-pagination page-size="10" start="0" total="100">
-  <bx-page-sizes-select slot="page-sizes-select">
-    <option value="10">10</option>
-    <option value="20">20</option>
-    <option value="30">30</option>
-  </bx-page-sizes-select>
-  <bx-pages-select></bx-pages-select>
-</bx-pagination>
+<cds-pagination page-size="10" total="100">
+  <cds-select>
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+  </cds-page-sizes-select>
+</cds-pagination>
 ```
 
-## `<bx-pagination>` attributes, properties and events
+## `<cds-pagination>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-pagination at-last-page>`) and `false` means not setting the attribute
-(e.g. `<bx-pagination>` without `at-last-page` attribute).
+`<cds-pagination at-last-page>`) and `false` means not setting the attribute
+(e.g. `<cds-pagination>` without `at-last-page` attribute).
 
-<Props of="bx-pagination" />
+<Props of="cds-pagination" />
 
-## `<bx-pages-select>` attributes, properties and events
+## `<cds-pages-select>` attributes, properties and events
 
-<Props of="bx-pages-select" />
+<Props of="cds-pages-select" />
 
-## `<bx-page-sizes-select>` attributes, properties and events
+## `<cds-page-sizes-select>` attributes, properties and events
 
-<Props of="bx-page-sizes-select" />
+<Props of="cds-page-sizes-select" />
diff --git a/packages/carbon-web-components/src/components/pagination/pagination-story.ts b/packages/carbon-web-components/src/components/pagination/pagination-story.ts
index c2b5561a809..25e969b76d5 100644
--- a/packages/carbon-web-components/src/components/pagination/pagination-story.ts
+++ b/packages/carbon-web-components/src/components/pagination/pagination-story.ts
@@ -7,60 +7,135 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
-import { boolean, number } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
-import './pagination';
-import './page-sizes-select';
-import './pages-select';
+import { boolean, number, text, select } from '@storybook/addon-knobs';
+import './index';
 import storyDocs from './pagination-story.mdx';
+import { prefix } from '../../globals/settings';
+import { PAGINATION_SIZE } from './defs';
 
-export const Default = (args) => {
+const sizes = {
+  [`Small size (${PAGINATION_SIZE.SMALL})`]: PAGINATION_SIZE.SMALL,
+  [`Medium size (${PAGINATION_SIZE.MEDIUM})`]: PAGINATION_SIZE.MEDIUM,
+  [`Large size (${PAGINATION_SIZE.LARGE})`]: PAGINATION_SIZE.LARGE,
+};
+
+export const Default = () => {
+  return html`
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
+  `;
+};
+
+export const MultiplePaginationComponents = () => {
+  return html`
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
+  `;
+};
+
+MultiplePaginationComponents.storyName = 'Multiple Pagination components';
+
+export const PaginationCustomPageSizeLabel = () => {
+  return html`
+    <cds-pagination start="0" total-items="103">
+      <cds-select-item value="10">Ten</cds-select-item>
+      <cds-select-item value="20">Twenty</cds-select-item>
+      <cds-select-item value="30">Thirty</cds-select-item>
+      <cds-select-item value="40">Forty</cds-select-item>
+      <cds-select-item value="50">Fifty</cds-select-item>
+    </cds-pagination>
+  `;
+};
+
+PaginationCustomPageSizeLabel.storyname =
+  'Pagination with custom page sizes label';
+
+export const Playground = (args) => {
   const {
-    atLastPage,
-    pageSize,
-    start,
-    total,
+    backwardText,
     onChangedCurrent,
     onChangedPageSizesSelect,
-  } = args?.['bx-pagination'] ?? {};
+    disabled,
+    forwardText,
+    isLastPage,
+    itemsPerPageText,
+    page,
+    pageInputDisabled,
+    pageSize,
+    pageSizeInputDisabled,
+    pagesUnknown,
+    size,
+    totalItems,
+  } = args?.[`${prefix}-pagination`] ?? {};
   return html`
-    <bx-pagination
-      ?at-last-page="${atLastPage || undefined}"
-      page-size="${ifNonNull(pageSize)}"
-      start="${ifNonNull(start)}"
-      total="${ifNonNull(total)}"
-      @bx-pagination-changed-current="${onChangedCurrent}"
-      @bx-page-sizes-select-changed="${onChangedPageSizesSelect}">
-      <bx-page-sizes-select slot="page-sizes-select">
-        <option value="10">10</option>
-        <option value="20">20</option>
-        <option value="30">30</option>
-      </bx-page-sizes-select>
-      ${total == null ? undefined : html` <bx-pages-select></bx-pages-select> `}
-    </bx-pagination>
+    <cds-pagination
+      background-text=${backwardText}
+      ?disabled=${disabled}
+      forward-text=${forwardText}
+      ?is-last-page=${isLastPage}
+      items-per-page-text=${itemsPerPageText}
+      page=${page}
+      page-size=${pageSize}
+      ?page-input-disabled=${pageInputDisabled}
+      ?page-size-input-disabled=${pageSizeInputDisabled}
+      size=${size}
+      ?pages-unknown=${pagesUnknown}
+      total-items=${totalItems}
+      @cds-pagination-changed-current="${onChangedCurrent}"
+      @cds-page-sizes-select-changed="${onChangedPageSizesSelect}">
+      <cds-select-item value="10">10</cds-select-item>
+      <cds-select-item value="20">20</cds-select-item>
+      <cds-select-item value="30">30</cds-select-item>
+      <cds-select-item value="40">40</cds-select-item>
+      <cds-select-item value="50">50</cds-select-item>
+    </cds-pagination>
   `;
 };
 
-Default.storyName = 'Default';
-
 export default {
   title: 'Components/Pagination',
   parameters: {
     ...storyDocs.parameters,
     knobs: {
-      'bx-pagination': () => ({
-        atLastPage: boolean(
-          'Explicitly state that the user is at the last page (at-last-page)',
+      [`${prefix}-pagination`]: () => ({
+        backwardText: text('Backward text', 'Previous page'),
+        disabled: boolean('Disabled', false),
+        forwardText: text('Forward text', 'Next page'),
+        isLastPage: boolean(
+          'Explicitly state that the user is at the last page (is-last-page)',
           false
         ),
+        itemsPerPageText: text('Items per page text', 'Items per page:'),
+        page: number('The current page', 1),
         pageSize: number('Number of rows per page (page-size)', 10),
-        start: number('Start row index of the current page (start)', 0),
-        total: number('Total rows count (total)', 100),
-        onChangedCurrent: action('bx-pagination-changed-current'),
-        onChangedPageSizesSelect: action('bx-page-sizes-select-changed'),
+        pageInputDisabled: boolean('Pages input disabled', false),
+        pageSizeInputDisabled: boolean('Pages size input disabled', false),
+        pagesUnknown: boolean('Pages unknown', false),
+        size: select('Size (size)', sizes, PAGINATION_SIZE.MEDIUM),
+        totalItems: number('Total item count (total-items)', 103),
+        onChangedCurrent: action(`${prefix}-pagination-changed-current`),
+        onChangedPageSizesSelect: action(`${prefix}-page-sizes-select-changed`),
       }),
     },
   },
+  decorators: [(story) => html`<div style="max-width: 800px">${story()}</div>`],
 };
diff --git a/packages/carbon-web-components/src/components/pagination/pagination.scss b/packages/carbon-web-components/src/components/pagination/pagination.scss
index 6ddc58dbd69..7c008d48812 100644
--- a/packages/carbon-web-components/src/components/pagination/pagination.scss
+++ b/packages/carbon-web-components/src/components/pagination/pagination.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,13 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/pagination/pagination';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/components/pagination' as *;
+@use '@carbon/styles/scss/utilities/visually-hidden' as *;
 
 :host(#{$prefix}-pagination) {
   @extend .#{$prefix}--pagination;
@@ -15,14 +21,10 @@ $css--plex: true !default;
   position: relative;
   outline: none;
 
-  .#{$prefix}--pagination__left {
-    flex: 1;
-  }
-
   .#{$prefix}-ce--pagination__divider {
     height: 100%;
-    width: $spacing-4xs;
-    background-color: $ui-03;
+    width: to-rem(1px);
+    background-color: $layer-accent-01;
   }
 
   .#{$prefix}--pagination__control-buttons {
@@ -34,62 +36,10 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-pages-select) {
-  @extend .#{$prefix}--select__page-number;
-
-  outline: none;
-}
-
-:host(#{$prefix}-page-sizes-select) {
-  @extend .#{$prefix}--select__item-count;
-
-  outline: none;
-}
-
-:host(#{$prefix}-pages-select),
-:host(#{$prefix}-page-sizes-select) {
-  display: flex;
-  align-items: center;
-  height: 100%;
-
-  .#{$prefix}--select-input {
-    @include type-style('body-short-01');
-
-    width: auto;
-    min-width: auto;
-    height: 100%;
-    padding: 0 2.5rem 0 $spacing-md;
-    margin-right: 0;
-    border: none;
-
-    @include carbon--breakpoint('md') {
-      padding-right: carbon--mini-units(4.5);
-    }
-
-    &:hover {
-      background: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--select__arrow {
-    top: auto;
-    bottom: auto;
-
-    @include carbon--breakpoint('md') {
-      right: $carbon--spacing-05;
-    }
-  }
-}
-
-:host(#{$prefix}-pages-select) .#{$prefix}--select__page-number,
-:host(#{$prefix}-page-sizes-select) .#{$prefix}--select__item-count {
-  display: flex;
-  align-items: center;
-  height: 100%;
-  position: relative;
+:host(#{$prefix}-pagination[size='sm']) {
+  @extend .#{$prefix}--pagination--sm;
 }
 
-:host(#{$prefix}-pages-select) .#{$prefix}--pagination__text {
-  margin-right: 1rem;
-  margin-left: rem(1px);
+:host(#{$prefix}-pagination[size='lg']) {
+  @extend .#{$prefix}--pagination--lg;
 }
diff --git a/packages/carbon-web-components/src/components/pagination/pagination.ts b/packages/carbon-web-components/src/components/pagination/pagination.ts
index ea50b0c56f8..496adf1ce00 100644
--- a/packages/carbon-web-components/src/components/pagination/pagination.ts
+++ b/packages/carbon-web-components/src/components/pagination/pagination.ts
@@ -7,56 +7,71 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import CaretLeft24 from '@carbon/icons/lib/caret--left/24';
-import CaretRight24 from '@carbon/icons/lib/caret--right/24';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import CaretLeft16 from '@carbon/icons/lib/caret--left/16';
+import CaretRight16 from '@carbon/icons/lib/caret--right/16';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import { forEach } from '../../globals/internal/collection-helpers';
-import BXPagesSelect from './pages-select';
-import BXPageSizesSelect from './page-sizes-select';
 import styles from './pagination.scss';
+import { PAGINATION_SIZE } from './defs';
+import CDSSelect from '../select/select';
+import '../button/index';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Pagination UI.
  *
- * @element bx-pagination
+ * @element cds-pagination
  * @slot page-sizes-select - Where to put in the `<page-sizes-select>`.
- * @fires bx-pages-select-changed - The custom event fired after the current page is changed from `<bx-pages-select>`.
- * @fires bx-page-sizes-select-changed
- *   The custom event fired after the number of rows per page is changed from `<bx-page-sizes-select>`.
+ * @fires cds-pages-select-changed - The custom event fired after the current page is changed from `<cds-pages-select>`.
+ * @fires cds-page-sizes-select-changed
+ *   The custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
  */
 @customElement(`${prefix}-pagination`)
-class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
+class CDSPagination extends FocusMixin(HostListenerMixin(LitElement)) {
+  @query(`${prefix}-select`)
+  private _pageSizeSelect!: HTMLElement;
+
+  private _handleSlotChange({ target }: Event) {
+    const content = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+
+    content.forEach((item) => {
+      this._pageSizeSelect.appendChild(item);
+    });
+  }
+
   /**
    * @returns Page status text.
    */
   private _renderStatusText() {
     const {
-      atLastPage,
       start,
       pageSize,
-      total,
+      totalItems,
+      pagesUnknown,
       formatStatusWithDeterminateTotal,
       formatStatusWithIndeterminateTotal,
     } = this;
     // * Regular: `1-10 of 100 items`
     // * Indeterminate total: `Item 1-10` (`Item 11-` at the last page)
-    const end = atLastPage
-      ? undefined
-      : Math.min(start + pageSize, total == null ? Infinity : total);
+    const end = Math.min(
+      start + pageSize,
+      totalItems == null ? Infinity : totalItems
+    );
     const format =
-      total == null
+      totalItems == null || pagesUnknown
         ? formatStatusWithIndeterminateTotal
         : formatStatusWithDeterminateTotal;
+
     // `start`/`end` properties starts with zero, whereas we want to show number starting with 1
-    return format({ start: start + 1, end, count: total });
+    return format({ start: start + 1, end, count: totalItems });
   }
 
   /**
@@ -68,12 +83,13 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
     this.start = start;
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof BXPagination).eventChangeCurrent,
+        (this.constructor as typeof CDSPagination).eventChangeCurrent,
         {
           bubbles: true,
           composed: true,
           detail: {
-            start,
+            page: this.page,
+            pageSize: this.pageSize,
           },
         }
       )
@@ -85,6 +101,7 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    */
   private _handleClickPrevButton() {
     const { start: oldStart, pageSize } = this;
+    this.page--;
     const newStart = Math.max(oldStart - pageSize, 0);
     if (newStart !== oldStart) {
       this._handleUserInitiatedChangeStart(newStart);
@@ -95,36 +112,58 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    * Handles `click` event on the next button.
    */
   private _handleClickNextButton() {
-    const { start: oldStart, pageSize, total } = this;
+    const { start: oldStart, pageSize, totalItems } = this;
+    this.page++;
     const newStart = oldStart + pageSize;
-    if (newStart < (total == null ? Infinity : total)) {
+    if (newStart < (totalItems == null ? Infinity : totalItems)) {
       this._handleUserInitiatedChangeStart(newStart);
     }
   }
 
   /**
-   * Handles user-initiated change in current page.
+   * Handles user-initiated change in number of rows per page.
    *
    * @param event The event.
    */
-  @HostListener('eventChangePage')
+  @HostListener('eventChangeSelect')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleChangePage = ({ detail }: CustomEvent) => {
-    const { value } = detail;
-    const { pageSize } = this;
-    this._handleUserInitiatedChangeStart(value * pageSize);
-  };
+  private _handleChangeSelector(event) {
+    const { value } = event.detail;
+    const { totalItems, pageSize } = this;
+
+    if (event.composedPath()[0] === this._pageSizeSelect) {
+      this.pageSize = parseInt(value);
+      // Default pageSize to effectively be 1 when we have a value of 0 to avoid
+      // division by 0.
+      this.totalPages =
+        pageSize > 0 ? Math.ceil(totalItems / pageSize) : totalItems;
+      this.page = 1;
+      this.start = 0;
+    } else {
+      this.page = value;
+      this._handleUserInitiatedChangeStart((value - 1) * pageSize);
+    }
+  }
 
   /**
-   * Handles user-initiated change in number of rows per page.
-   *
-   * @param event The event.
+   * The assistive text for the button to go to previous page.
    */
-  @HostListener('eventChangePageSize')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleChangePageSize = ({ detail }: CustomEvent) => {
-    this.pageSize = detail.value;
-  };
+  @property({ attribute: 'backward-text' })
+  backwardText = 'Previous page';
+
+  /**
+   * The current page
+   */
+  @property({ type: Number, reflect: true })
+  page = 1;
+
+  /**
+   * The formatter for the assistive text for screen readers to announce.
+   * Should be changed upon the locale the UI is rendered with.
+   */
+  @property({ attribute: false })
+  formatLabelText = ({ count }) =>
+    `Page number, of ${count} page${count <= 1 ? '' : 's'}`;
 
   /**
    * The formatter, used with determinate the total pages. Should be changed upon the locale the UI is rendered with.
@@ -137,14 +176,30 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    * The formatter, used with indeterminate the total pages. Should be changed upon the locale the UI is rendered with.
    */
   @property({ attribute: false })
-  formatStatusWithIndeterminateTotal = ({ start, end }) =>
-    end == null ? `Item ${start}–` : `Item ${start}–${end}`;
+  formatStatusWithIndeterminateTotal = ({ start, end, count }) =>
+    end == null
+      ? `Item ${start}–`
+      : `${start}–${end} item${count <= 1 ? '' : 's'}`;
 
+  /**
+   * The formatter for the text next to the select box. Should be changed upon the locale the UI is rendered with.
+   */
+  @property({ attribute: false })
+  formatSupplementalText = ({ count }) =>
+    this.pagesUnknown || !this.totalItems
+      ? `page`
+      : `of ${count} page${count <= 1 ? '' : 's'}`;
   /**
    * `true` to explicitly state that user is at the last page.
    */
-  @property({ type: Boolean, attribute: 'at-last-page' })
-  atLastPage!: boolean;
+  @property({ type: Boolean, attribute: 'is-last-page' })
+  isLastPage!: boolean;
+
+  /**
+   * The translatable text indicating the number of items per page.
+   */
+  @property({ attribute: 'items-per-page-text' })
+  itemsPerPageText = 'Items per page:';
 
   /**
    * `true` if the pagination UI should be disabled.
@@ -155,15 +210,27 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   /**
    * The assistive text for the button to go to next page.
    */
-  @property({ attribute: 'next-button-text' })
-  nextButtonText = 'Next page';
+  @property({ attribute: 'forward-text' })
+  forwardText = 'Next page';
+
+  /**
+   * true if the select box to change the page should be disabled.
+   */
+  @property({ attribute: 'page-input-disabled' })
+  pageInputDisabled;
 
   /**
    * Number of items per page.
    */
-  @property({ type: Number, attribute: 'page-size' })
+  @property({ type: Number, attribute: 'page-size', reflect: true })
   pageSize = 10;
 
+  /**
+   * true if the select box to change the items per page should be disabled.
+   */
+  @property({ type: Boolean, attribute: 'page-size-input-disabled' })
+  pageSizeInputDisabled;
+
   /**
    * The label text for the UI to select page size.
    */
@@ -171,10 +238,16 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   pageSizeLabelText!: string;
 
   /**
-   * The assistive text for the button to go to previous page.
+   * true if the total number of items is unknown.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'pages-unknown' })
+  pagesUnknown = false;
+
+  /**
+   * Specify the size of the Pagination.
    */
-  @property({ attribute: 'prev-button-text' })
-  prevButtonText = 'Previous page';
+  @property({ reflect: true })
+  size = PAGINATION_SIZE.MEDIUM;
 
   /**
    * The row number where current page start with, index that starts with zero.
@@ -185,92 +258,182 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   /**
    * The number of total items.
    */
+  @property({ type: Number, attribute: 'total-items' })
+  totalItems!: number;
+
+  /**
+   * The number of total pages.
+   */
   @property({ type: Number })
-  total!: number;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  totalPages = 1;
 
   updated(changedProperties) {
-    const { pageSize } = this;
+    const { page, pageSize, totalItems } = this;
     const { selectorPageSizesSelect, selectorPagesSelect } = this
-      .constructor as typeof BXPagination;
+      .constructor as typeof CDSPagination;
+
     if (changedProperties.has('pageSize')) {
-      forEach(this.querySelectorAll(selectorPageSizesSelect), (elem) => {
-        (elem as BXPageSizesSelect).value = pageSize;
-      });
+      (this.shadowRoot!.querySelector(selectorPageSizesSelect) as any).value =
+        pageSize;
     }
     if (changedProperties.has('pageSize') || changedProperties.has('start')) {
-      const { start } = this;
-      forEach(this.querySelectorAll(selectorPagesSelect), (elem) => {
-        (elem as BXPagesSelect).value = Math.floor(start / pageSize);
-      });
+      // Default pageSize to effectively be 1 when we have a value of 0 to avoid
+      // division by 0.
+      this.totalPages =
+        pageSize > 0 ? Math.ceil(totalItems / pageSize) : totalItems;
+      (this.shadowRoot!.querySelector(selectorPagesSelect) as CDSSelect).value =
+        this.page.toString();
     }
-    if (changedProperties.has('pageSize') || changedProperties.has('total')) {
-      const { total } = this;
-      forEach(this.querySelectorAll(selectorPagesSelect), (elem) => {
-        (elem as BXPagesSelect).total = Math.ceil(total / pageSize);
-      });
+
+    if (changedProperties.has('page')) {
+      this._handleUserInitiatedChangeStart((page - 1) * pageSize);
     }
   }
 
   render() {
     const {
+      page,
       disabled,
-      nextButtonText,
-      prevButtonText,
+      forwardText,
+      backwardText,
+      itemsPerPageText,
+      pageInputDisabled,
       pageSize,
+      pageSizeInputDisabled,
+      pagesUnknown,
+      size,
       start,
-      total,
+      totalItems,
+      totalPages,
       _handleClickPrevButton: handleClickPrevButton,
       _handleClickNextButton: handleClickNextButton,
+      _handleSlotChange: handleSlotChange,
+      formatLabelText,
+      formatSupplementalText,
     } = this;
-    const { atLastPage = start + pageSize >= total } = this;
+
+    const { isLastPage = start + pageSize >= totalItems } = this;
     const prevButtonDisabled = disabled || start === 0;
-    const nextButtonDisabled = disabled || atLastPage;
-    const prevButtonClasses = classMap({
+    const nextButtonDisabled = disabled || isLastPage;
+
+    const prevButtonClassMap = {
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--icon-only`]: true,
       [`${prefix}--pagination__button`]: true,
       [`${prefix}--pagination__button--backward`]: true,
       [`${prefix}--pagination__button--no-index`]: prevButtonDisabled,
-    });
-    const nextButtonClasses = classMap({
+      [`${prefix}--btn--${size}`]: true,
+      [`${prefix}--btn--ghost`]: true,
+    };
+    const nextButtonClassMap = {
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--icon-only`]: true,
       [`${prefix}--pagination__button`]: true,
       [`${prefix}--pagination__button--forward`]: true,
       [`${prefix}--pagination__button--no-index`]: nextButtonDisabled,
-    });
+      [`${prefix}--btn--${size}`]: true,
+      [`${prefix}--btn--ghost`]: true,
+    };
+
+    const prevButtonClasses = Object.entries(prevButtonClassMap)
+      .filter(([, value]) => value === true)
+      .map(([key]) => key)
+      .join(' ');
+    const nextButtonClasses = Object.entries(nextButtonClassMap)
+      .filter(([, value]) => value === true)
+      .map(([key]) => key)
+      .join(' ');
+
     return html`
       <div class="${prefix}--pagination__left">
-        <slot name="page-sizes-select"></slot>
-        <div class="${prefix}-ce--pagination__divider"></div>
+        <label for="select" class="${prefix}--pagination__text"
+          ><slot name="label-text">${itemsPerPageText}</slot></label
+        >
+        <cds-select
+          ?disabled=${disabled || pageSizeInputDisabled}
+          id="page-size-select"
+          left-select
+          pagination
+          size="${size}"
+          inline
+          value="${pageSize}">
+          <slot @slotchange=${handleSlotChange}></slot>
+        </cds-select>
         <span
           class="${prefix}--pagination__text ${prefix}--pagination__items-count"
           >${this._renderStatusText()}</span
         >
       </div>
-      <div class="${prefix}-ce--pagination__divider"></div>
       <div class="${prefix}--pagination__right">
-        <slot></slot>
+        <label for="select" class="${prefix}--label ${prefix}--visually-hidden">
+          ${formatLabelText({ count: totalPages })}
+        </label>
+        ${pagesUnknown || !totalItems
+          ? html`
+              <span
+                class="${prefix}--pagination__text ${prefix}--pagination__page-text"
+                >${formatSupplementalText({ count: totalPages })}</span
+              >
+
+              <cds-select
+                ?disabled=${disabled || pageInputDisabled}
+                id="pages-select"
+                pagination
+                size="${size}"
+                inline
+                value="${page}">
+                ${Array.from(new Array(totalPages)).map(
+                  (_item, index) =>
+                    html`
+                      <cds-select-item value="${index + 1}">
+                        ${index + 1}
+                      </cds-select-item>
+                    `
+                )}
+              </cds-select>
+            `
+          : html`
+              <cds-select
+                ?disabled=${disabled || pageInputDisabled}
+                id="pages-select"
+                pagination
+                size="${size}"
+                inline
+                value="${page}">
+                ${Array.from(new Array(totalPages)).map(
+                  (_item, index) =>
+                    html`
+                      <cds-select-item value="${index + 1}">
+                        ${index + 1}
+                      </cds-select-item>
+                    `
+                )}
+              </cds-select>
+              <span class="${prefix}--pagination__text"
+                >${formatSupplementalText({ count: totalPages })}</span
+              >
+            `}
+
         <div class="${prefix}--pagination__control-buttons">
-          <button
+          <cds-button
+            pagination
+            size="${size}"
             ?disabled="${prevButtonDisabled}"
-            class="${prevButtonClasses}"
-            title="${prevButtonText}"
+            button-class-name="${prevButtonClasses}"
+            tooltip-text="${backwardText}"
             @click="${handleClickPrevButton}">
-            ${CaretLeft24()}
-          </button>
-          <button
+            ${CaretLeft16({ slot: 'icon' })}
+          </cds-button>
+          <cds-button
+            tooltip-position="top-right"
+            pagination
+            size="${size}"
             ?disabled="${nextButtonDisabled}"
-            class="${nextButtonClasses}"
-            title="${nextButtonText}"
+            button-class-name="${nextButtonClasses}"
+            tooltip-text="${forwardText}"
             @click="${handleClickNextButton}">
-            ${CaretRight24()}
-          </button>
+            ${CaretRight16({ slot: 'icon' })}
+          </cds-button>
         </div>
       </div>
     `;
@@ -280,14 +443,14 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
    * A selector that will return the select box for the current page.
    */
   static get selectorPagesSelect() {
-    return `${prefix}-pages-select`;
+    return `${prefix}-select#pages-select`;
   }
 
   /**
    * A selector that will return the select box for page sizes.
    */
   static get selectorPageSizesSelect() {
-    return `${prefix}-page-sizes-select`;
+    return `${prefix}-select`;
   }
 
   /**
@@ -298,20 +461,17 @@ class BXPagination extends FocusMixin(HostListenerMixin(LitElement)) {
   }
 
   /**
-   * The name of the custom event fired after the current page is changed from `<bx-pages-select>`.
+   * The name of the custom event fired after the number of rows per page is changed from `<cds-page-sizes-select>`.
    */
-  static get eventChangePage() {
-    return `${prefix}-pages-select-changed`;
-  }
-
-  /**
-   * The name of the custom event fired after the number of rows per page is changed from `<bx-page-sizes-select>`.
-   */
-  static get eventChangePageSize() {
-    return `${prefix}-page-sizes-select-changed`;
+  static get eventChangeSelect() {
+    return `${prefix}-select-selected`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXPagination;
+export default CDSPagination;
diff --git a/packages/carbon-web-components/src/components/popover/defs.ts b/packages/carbon-web-components/src/components/popover/defs.ts
new file mode 100644
index 00000000000..d7dccb5d209
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/defs.ts
@@ -0,0 +1,73 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * The alignment choices of popover.
+ */
+export enum POPOVER_ALIGNMENT {
+  /**
+   * Align the top position for the popover content.
+   */
+  TOP = 'top',
+
+  /**
+   * Align the top-left position for the popover content.
+   */
+  TOP_LEFT = 'top-left',
+
+  /**
+   * Align the top right position for the popover content.
+   */
+  TOP_RIGHT = 'top-right',
+
+  /**
+   * Align the bottom position for the popover content.
+   */
+  BOTTOM = 'bottom',
+
+  /**
+   * Align the bottom left position for the popover content.
+   */
+  BOTTOM_LEFT = 'bottom-left',
+
+  /**
+   * Align the bottom right position for the popover content.
+   */
+  BOTTOM_RIGHT = 'bottom-right',
+
+  /**
+   * Align the left position for the popover content.
+   */
+  LEFT = 'left',
+
+  /**
+   * Align the left bottom position for the popover content.
+   */
+  LEFT_BOTTOM = 'left-bottom',
+
+  /**
+   * Align the left top position for the popover content.
+   */
+  LEFT_TOP = 'left-top',
+
+  /**
+   * Align the right position for the popover content.
+   */
+  RIGHT = 'right',
+
+  /**
+   * Align the right bottom position for the popover content.
+   */
+  RIGHT_BOTTOM = 'right-bottom',
+
+  /**
+   * Align the right top position for the popover content.
+   */
+  RIGHT_TOP = 'right-top',
+}
diff --git a/packages/carbon-web-components/src/components/popover/index.ts b/packages/carbon-web-components/src/components/popover/index.ts
new file mode 100644
index 00000000000..d647829a5e3
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 './popover';
+import './popover-content';
diff --git a/packages/carbon-web-components/src/components/popover/popover-content.ts b/packages/carbon-web-components/src/components/popover/popover-content.ts
new file mode 100644
index 00000000000..85fbed890a0
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/popover-content.ts
@@ -0,0 +1,71 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './popover.scss';
+
+/**
+ * Popover.
+ *
+ * @element cds-popover
+ */
+@customElement(`${prefix}-popover-content`)
+class CDSPopoverContent extends LitElement {
+  /**
+   * Specify the popover alignment
+   */
+  @property({ reflect: true, type: String })
+  align = '';
+
+  /**
+   * Specify whether a caret should be rendered
+   */
+  @property({ type: Boolean, reflect: true })
+  caret;
+
+  /**
+   * Specify whether a dropShadow should be rendered
+   */
+  @property({ type: Boolean, reflect: true })
+  dropShadow = true;
+
+  /**
+   * Specify whether the component is currently open or closed
+   */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /**
+   * Render the component using the tab tip variant
+   */
+  @property({ type: Boolean, reflect: true })
+  tabTip = false;
+
+  /**
+   * The shadow slot this popover content should be in.
+   */
+  @property({ reflect: true })
+  slot = 'content';
+
+  render() {
+    return html`
+      <span class="${prefix}--popover-content">
+        <slot> </slot>
+      </span>
+      <span class="${prefix}--popover-caret"></span>
+    </span>
+    `;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSPopoverContent;
diff --git a/packages/carbon-web-components/src/components/popover/popover-story.mdx b/packages/carbon-web-components/src/components/popover/popover-story.mdx
new file mode 100644
index 00000000000..e24c43e9dc3
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/popover-story.mdx
@@ -0,0 +1,105 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Popover
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/popover)
+
+Popover is a layer that pops up over all other elements on a page
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/popover/index.js';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+```
+
+<Description markdown={`${cdnJs({ components: ['popover'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-popover open>
+  <div class="playground-trigger">${Checkbox16()}</div>
+  <cds-popover-content>
+    <div class="p-3">
+      <p class="popover-title">Available storage</p>
+      <p class="popover-details">
+        This server has 150 GB of block storage remaining.
+      </p>
+    </div>
+  </cds-popover-content>
+</cds-popover>
+```
+
+## HTML (with Tabtip)
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/popover/index.js';
+import '@carbon/web-components/es/components/form/index.js';
+import '@carbon/web-components/es/components/radio-button/index.js';
+import '@carbon/web-components/es/components/checkbox/index.js';
+
+import Settings16 from '@carbon/icons/lib/settings/16';
+```
+
+```html
+<cds-popover open tabTip>
+  <button aria-label="Settings" type="button">${Settings16()}</button>
+  <cds-popover-content>
+    <div class="p-3">
+      <cds-form-item>
+        <cds-radio-button-group
+          legend-text="Row height"
+          name="radio-button-group"
+          value="small"
+          style="align-items: flex-start; flex-direction: column">
+          <cds-radio-button
+            label-text="Small"
+            value="small"
+            id="radio-small"></cds-radio-button>
+          <cds-radio-button
+            label-text="Large"
+            value="large"
+            id="radio-large"></cds-radio-button>
+        </cds-radio-button-group>
+      </cds-form-item>
+      <hr />
+      <fieldset class="${prefix}--fieldset">
+        <legend class="${prefix}--label">Edit columns</legend>
+        <cds-checkbox
+          checked
+          label-text="Name"
+          id="checkbox-label-1"></cds-checkbox>
+        <cds-checkbox
+          checked
+          label-text="Type"
+          id="checkbox-label-2"></cds-checkbox>
+        <cds-checkbox
+          checked
+          label-text="Location"
+          id="checkbox-label-3"></cds-checkbox>
+      </fieldset>
+    </div>
+  </cds-popover-content>
+</cds-popover>
+```
+
+## `<cds-popover>` attributes and properties
+
+<Props of="cds-popover" />
+
+## `<cds-popover-content>` attributes and properties
+
+<Props of="cds-popover-content" />
diff --git a/packages/carbon-web-components/src/components/popover/popover-story.scss b/packages/carbon-web-components/src/components/popover/popover-story.scss
new file mode 100644
index 00000000000..869d0a2be09
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/popover-story.scss
@@ -0,0 +1,123 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/type';
+
+/// Utilities
+.flex {
+  display: flex;
+}
+
+.flex-column {
+  flex-direction: column;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
+.align-center {
+  align-items: center;
+}
+
+.align-end {
+  align-items: flex-end;
+}
+
+.justify-items-end {
+  justify-items: end;
+}
+
+.position-relative {
+  position: relative;
+}
+
+.display-inline-block {
+  display: inline-block;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.mb-3 {
+  margin-bottom: $spacing-05;
+}
+
+.mt-9 {
+  padding-top: $spacing-09;
+}
+
+.mt-10 {
+  padding-top: $spacing-10;
+}
+
+.p-3 {
+  padding: $spacing-05;
+}
+
+#{$prefix}-popover .playground-trigger {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $spacing-07;
+  height: $spacing-07;
+  border: 1px solid theme.$border-subtle;
+}
+
+#{$prefix}-popover .playground-trigger svg {
+  fill: theme.$background-inverse;
+}
+
+#{$prefix}-popover .popover-title {
+  @include type.type-style('heading-compact-01');
+  margin-bottom: $spacing-01;
+}
+
+#{$prefix}-popover .popover-details {
+  @include type.type-style('body-compact-01');
+}
+
+#{$prefix}-popover .popover-story {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+.popover-tabtip-story .p-3 {
+  width: 16rem;
+}
+
+.popover-tabtip-story #{$prefix}-popover .#{$prefix}--radio-button-wrapper {
+  margin-bottom: $spacing-03;
+}
+
+.popover-tabtip-story hr {
+  border: none;
+  background: theme.$border-subtle;
+  height: 1px;
+  margin: $spacing-03 0 $spacing-05;
+}
+
+.popover-tabtip-story #{$prefix}-popover:last-of-type {
+  margin-left: 15rem;
+}
diff --git a/packages/carbon-web-components/src/components/popover/popover-story.ts b/packages/carbon-web-components/src/components/popover/popover-story.ts
new file mode 100644
index 00000000000..dbe93d211aa
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/popover-story.ts
@@ -0,0 +1,195 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select } from '@storybook/addon-knobs';
+import './popover';
+import './popover-content';
+import '../radio-button/index';
+import { POPOVER_ALIGNMENT } from './defs';
+import storyDocs from './popover-story.mdx';
+import { prefix } from '../../globals/settings';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import Settings16 from '@carbon/icons/lib/settings/16';
+
+import styles from './popover-story.scss';
+
+const popoverAlignments = {
+  [`top`]: POPOVER_ALIGNMENT.TOP,
+  [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+  [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+  [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+  [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+  [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+  [`left`]: POPOVER_ALIGNMENT.LEFT,
+  [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+  [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+  [`right`]: POPOVER_ALIGNMENT.RIGHT,
+  [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+  [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
+};
+
+export const Playground = (args) => {
+  const { caret, highContrast, align, dropShadow, open } =
+    args?.[`${prefix}-popover`] ?? {};
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <cds-popover
+      ?open=${open}
+      ?caret=${caret}
+      ?highContrast=${highContrast}
+      align=${align}
+      ?dropShadow=${dropShadow}>
+      <div class="playground-trigger">${Checkbox16()}</div>
+      <cds-popover-content>
+        <div class="p-3">
+          <p class="popover-title">Available storage</p>
+          <p class="popover-details">
+            This server has 150 GB of block storage remaining.
+          </p>
+        </div>
+      </cds-popover-content>
+    </cds-popover>
+  `;
+};
+
+Playground.storyName = 'Playground';
+
+export const TabTip = () => {
+  const handleClick = (id) => {
+    const popover = document.querySelector(id);
+    const open = popover?.hasAttribute('open');
+    open ? popover?.removeAttribute('open') : popover?.setAttribute('open', '');
+  };
+
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <div class="popover-tabtip-story" style="display: 'flex'">
+      <cds-popover open tabTip id="popover-one">
+        <button
+          aria-label="Settings"
+          type="button"
+          @click="${() => handleClick('#popover-one')}">
+          ${Settings16()}
+        </button>
+        <cds-popover-content>
+          <div class="p-3">
+            <cds-form-item>
+              <cds-radio-button-group
+                legend-text="Row height"
+                name="radio-button-group"
+                value="small"
+                style="align-items: flex-start; flex-direction: column">
+                <cds-radio-button
+                  label-text="Small"
+                  value="small"
+                  id="radio-small"></cds-radio-button>
+                <cds-radio-button
+                  label-text="Large"
+                  value="large"
+                  id="radio-large"></cds-radio-button>
+              </cds-radio-button-group>
+            </cds-form-item>
+            <hr />
+            <fieldset class="${prefix}--fieldset">
+              <legend class="${prefix}--label">Edit columns</legend>
+              <cds-checkbox
+                checked
+                label-text="Name"
+                id="checkbox-label-1"></cds-checkbox>
+              <cds-checkbox
+                checked
+                label-text="Type"
+                id="checkbox-label-2"></cds-checkbox>
+              <cds-checkbox
+                checked
+                label-text="Location"
+                id="checkbox-label-3"></cds-checkbox>
+            </fieldset>
+          </div>
+        </cds-popover-content>
+      </cds-popover>
+      <cds-popover tabTip id="popover-two" align="bottom-right">
+        <button
+          aria-label="Settings"
+          type="button"
+          @click="${() => handleClick('#popover-two')}">
+          ${Settings16()}
+        </button>
+        <cds-popover-content>
+          <div class="p-3">
+            <cds-form-item>
+              <cds-radio-button-group
+                legend-text="Row height"
+                name="radio-button-group"
+                value="small"
+                style="align-items: flex-start; flex-direction: column">
+                <cds-radio-button
+                  label-text="Small"
+                  value="small"
+                  id="radio-small"></cds-radio-button>
+                <cds-radio-button
+                  label-text="Large"
+                  value="large"
+                  id="radio-large"></cds-radio-button>
+              </cds-radio-button-group>
+            </cds-form-item>
+            <hr />
+            <fieldset class="${prefix}--fieldset">
+              <legend class="${prefix}--label">Edit columns</legend>
+              <cds-checkbox
+                checked
+                label-text="Name"
+                id="checkbox-label-1"></cds-checkbox>
+              <cds-checkbox
+                checked
+                label-text="Type"
+                id="checkbox-label-2"></cds-checkbox>
+              <cds-checkbox
+                checked
+                label-text="Location"
+                id="checkbox-label-3"></cds-checkbox>
+            </fieldset>
+          </div>
+        </cds-popover-content>
+      </cds-popover>
+    </div>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-popover`]: () => ({
+      caret: boolean('caret (caret)', true),
+      highContrast: boolean('high contrast (highContrast)', false),
+      align: select(
+        'Align (align)',
+        popoverAlignments,
+        popoverAlignments.bottom
+      ),
+      dropShadow: boolean('drop shadow (dropShadow)', true),
+      open: boolean('open (open)', true),
+    }),
+  },
+};
+
+Playground.decorators = [
+  (story) => html`<div class="mt-10 flex justify-center">${story()}</div>`,
+];
+
+export default {
+  parameters: {
+    ...storyDocs.parameters,
+  },
+  title: 'Components/Popover',
+};
diff --git a/packages/carbon-web-components/src/components/popover/popover.scss b/packages/carbon-web-components/src/components/popover/popover.scss
new file mode 100644
index 00000000000..a3346699a71
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/popover.scss
@@ -0,0 +1,304 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/components/popover';
+
+// The distance between the popover container and the triggering element
+// Specify the distance between the popover and the trigger. This value must
+// have a unit otherwise the `calc()` expression will not work
+// stylelint-disable-next-line length-zero-no-unit
+$popover-offset: custom-property.get-var('popover-offset', 0rem);
+
+// Customize the dimensions of the caret by specifying its width or height.
+// These values will be flipped in left or right directions to have the
+// correct dimensions
+$popover-caret-width: custom-property.get-var('popover-caret-width', rem(12px));
+$popover-caret-height: custom-property.get-var(
+  'popover-caret-height',
+  rem(6px)
+);
+
+:host(#{$prefix}-tooltip),
+:host(#{$prefix}-popover) {
+  ::slotted(.#{$prefix}--popover--tab-tip__button) {
+    @extend .#{$prefix}--popover--tab-tip__button;
+  }
+}
+
+:host(#{$prefix}-tooltip[highContrast]),
+:host(#{$prefix}-popover[highContrast]) {
+  ::slotted(#{$prefix}-tooltip-content),
+  ::slotted(#{$prefix}-popover-content) {
+    @extend .#{$prefix}--popover;
+  }
+}
+
+:host(#{$prefix}-popover[tabTip][open]) {
+  ::slotted(.#{$prefix}--popover--tab-tip__button) {
+    background: theme.$layer !important; /* stylelint-disable-line declaration-no-important */
+    box-shadow: 0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2);
+  }
+}
+
+:host(#{$prefix}-tooltip-content),
+:host(#{$prefix}-popover-content) {
+  @extend .#{$prefix}--popover;
+}
+
+:host(#{$prefix}-tooltip-content[open]),
+:host(#{$prefix}-popover-content[open]),
+:host(#{$prefix}-toggletip[open]),
+:host(#{$prefix}-slug[open]) {
+  .#{$prefix}--popover-content {
+    display: block;
+  }
+}
+
+:host(#{$prefix}-tooltip-content[open][tabTip]),
+:host(#{$prefix}-popover-content[open][tabTip]) {
+  .#{$prefix}--popover-content {
+    border-radius: 0;
+    background: theme.$layer;
+  }
+}
+
+:host(#{$prefix}-tooltip-content[open][caret]),
+:host(#{$prefix}-popover-content[open][caret]),
+:host(#{$prefix}-toggletip[open]),
+:host(#{$prefix}-slug[open]) {
+  .#{$prefix}--popover-caret {
+    display: block;
+  }
+}
+
+:host(#{$prefix}-popover-content[dropShadow]) {
+  @include custom-property.declaration(
+    'popover-drop-shadow',
+    drop-shadow(0 $spacing-01 $spacing-01 rgba(0, 0, 0, 0.2))
+  );
+}
+
+:host(#{$prefix}-tooltip-content[align^='bottom']),
+:host(#{$prefix}-popover-content[align^='bottom']),
+:host(#{$prefix}-toggletip[alignment^='bottom']),
+:host(#{$prefix}-slug[alignment^='bottom']) {
+  .#{$prefix}--popover-caret {
+    bottom: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
+    transform: translate(-50%, $popover-offset);
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='bottom']),
+:host(#{$prefix}-popover-content[align='bottom']),
+:host(#{$prefix}-toggletip[alignment='bottom']),
+:host(#{$prefix}-slug[alignment='bottom']) {
+  .#{$prefix}--popover-content {
+    bottom: 0;
+    left: 50%;
+    transform: translate(-50%, calc(100% + $popover-offset));
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='bottom-left']),
+:host(#{$prefix}-popover-content[align='bottom-left']),
+:host(#{$prefix}-toggletip[alignment='bottom-left']),
+:host(#{$prefix}-slug[alignment='bottom-left']) {
+  .#{$prefix}--popover-content {
+    bottom: 0;
+    left: 0;
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(100% + $popover-offset)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='bottom-right']),
+:host(#{$prefix}-popover-content[align='bottom-right']),
+:host(#{$prefix}-toggletip[alignment='bottom-right']),
+:host(#{$prefix}-slug[alignment='bottom-right']) {
+  .#{$prefix}--popover-content {
+    right: 0;
+    bottom: 0;
+    transform: translate($popover-offset, calc(100% + $popover-offset));
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align^='left']),
+:host(#{$prefix}-popover-content[align^='left']),
+:host(#{$prefix}-toggletip[alignment^='left']),
+:host(#{$prefix}-slug[alignment^='left']) {
+  .#{$prefix}--popover-caret {
+    top: 50%;
+    right: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
+    transform: translate(calc(-1 * $popover-offset + 100%), -50%);
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='left']),
+:host(#{$prefix}-popover-content[align='left']),
+:host(#{$prefix}-toggletip[alignment='left']),
+:host(#{$prefix}-slug[alignment='left']) {
+  .#{$prefix}--popover-content {
+    top: 50%;
+    right: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(calc(-1 * $popover-offset + 0.1px), -50%);
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='left-bottom']),
+:host(#{$prefix}-popover-content[align='left-bottom']),
+:host(#{$prefix}-toggletip[alignment='left-bottom']),
+:host(#{$prefix}-slug[alignment='left-bottom']) {
+  .#{$prefix}--popover-content {
+    right: 100%;
+    bottom: -50%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(0.5 * $popover-offset - 16px)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='left-top']),
+:host(#{$prefix}-popover-content[align='left-top']),
+:host(#{$prefix}-toggletip[alignment='left-top']),
+:host(#{$prefix}-slug[alignment='left-top']) {
+  .#{$prefix}--popover-content {
+    top: -50%;
+    right: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-1 * 0.5 * $popover-offset + 16px)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align^='right']),
+:host(#{$prefix}-popover-content[align^='right']),
+:host(#{$prefix}-toggletip[alignment^='right']),
+:host(#{$prefix}-slug[alignment^='right']) {
+  .#{$prefix}--popover-caret {
+    top: 50%;
+    left: 100%;
+    width: $popover-caret-height;
+    height: $popover-caret-width;
+    clip-path: polygon(0% 50%, 100% 0%, 100% 100%);
+    transform: translate(calc($popover-offset - 100%), -50%);
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='right']),
+:host(#{$prefix}-popover-content[align='right']),
+:host(#{$prefix}-toggletip[alignment='right']),
+:host(#{$prefix}-slug[alignment='right']) {
+  .#{$prefix}--popover-content {
+    top: 50%;
+    left: 100%;
+    // Add in 0.1px to prevent rounding errors where the content is
+    // moved farther than the caret
+    transform: translate($popover-offset, -50%);
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='right-bottom']),
+:host(#{$prefix}-popover-content[align='right-bottom']),
+:host(#{$prefix}-toggletip[alignment='right-bottom']),
+:host(#{$prefix}-slug[alignment='right-bottom']) {
+  .#{$prefix}--popover-content {
+    bottom: 50%;
+    left: 100%;
+    transform: translate($popover-offset, calc(0.5 * $popover-offset + 16px));
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='right-top']),
+:host(#{$prefix}-popover-content[align='right-top']),
+:host(#{$prefix}-toggletip[alignment='right-top']),
+:host(#{$prefix}-slug[alignment='right-top']) {
+  .#{$prefix}--popover-content {
+    top: 50%;
+    left: 100%;
+    transform: translate(
+      $popover-offset,
+      calc(0.5 * $popover-offset * -1 - 16px)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align^='top']),
+:host(#{$prefix}-popover-content[align^='top']),
+:host(#{$prefix}-toggletip[alignment^='top']),
+:host(#{$prefix}-slug[alignment^='top']) {
+  .#{$prefix}--popover-caret {
+    top: 0;
+    left: 50%;
+    width: $popover-caret-width;
+    height: $popover-caret-height;
+    clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
+    transform: translate(-50%, calc(-1 * $popover-offset));
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='top']),
+:host(#{$prefix}-popover-content[align='top']),
+:host(#{$prefix}-toggletip[alignment='top']),
+:host(#{$prefix}-slug[alignment='top']) {
+  .#{$prefix}--popover-content {
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, calc(-100% - $popover-offset));
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='top-left']),
+:host(#{$prefix}-popover-content[align='top-left']),
+:host(#{$prefix}-toggletip[alignment='top-left']),
+:host(#{$prefix}-slug[alignment='top-left']) {
+  .#{$prefix}--popover-content {
+    top: 0;
+    left: 0;
+    transform: translate(
+      calc(-1 * $popover-offset),
+      calc(-100% - $popover-offset)
+    );
+  }
+}
+
+:host(#{$prefix}-tooltip-content[align='top-right']),
+:host(#{$prefix}-popover-content[align='top-right']),
+:host(#{$prefix}-toggletip[alignment='top-right']),
+:host(#{$prefix}-slug[alignment='top-right']) {
+  .#{$prefix}--popover-content {
+    top: 0;
+    right: 0;
+    transform: translate($popover-offset, calc(-100% - $popover-offset));
+  }
+}
diff --git a/packages/carbon-web-components/src/components/popover/popover.ts b/packages/carbon-web-components/src/components/popover/popover.ts
new file mode 100644
index 00000000000..0c80b54425e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/popover/popover.ts
@@ -0,0 +1,130 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './popover.scss';
+import CDSPopoverContent from './popover-content';
+
+/**
+ * Popover.
+ *
+ * @element cds-popover
+ */
+@customElement(`${prefix}-popover`)
+class CDSPopover extends LitElement {
+  /**
+   * Specify direction of alignment
+   */
+  @property({ reflect: true, type: String })
+  align = '';
+
+  /**
+   * Specify whether a caret should be rendered
+   */
+  @property({ type: Boolean, reflect: true })
+  caret = true;
+
+  /**
+   * Specify whether a dropShadow should be rendered
+   */
+  @property({ type: Boolean, reflect: true })
+  dropShadow = true;
+
+  /**
+   * Render the component using the high-contrast variant
+   */
+  @property({ type: Boolean, reflect: true })
+  highContrast = false;
+
+  /**
+   * Specify whether the component is currently open or closed
+   */
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  /**
+   * Render the component using the tab tip variant
+   */
+  @property({ type: Boolean, reflect: true })
+  tabTip = false;
+
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlotChange({ target }: Event) {
+    if (this.tabTip) {
+      const component = (target as HTMLSlotElement)
+        .assignedNodes()
+        .filter(
+          (node) =>
+            node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+        );
+      (component[0] as HTMLElement).classList.add(
+        `${prefix}--popover--tab-tip__button`
+      );
+    }
+    this.requestUpdate();
+  }
+
+  updated(changedProperties) {
+    const { selectorPopoverContent } = this.constructor as typeof CDSPopover;
+    ['open', 'align', 'caret', 'dropShadow', 'tabTip'].forEach((name) => {
+      if (changedProperties.has(name)) {
+        const { [name as keyof CDSPopover]: value } = this;
+        (this.querySelector(selectorPopoverContent) as CDSPopoverContent)[
+          name
+        ] = value;
+      }
+    });
+  }
+
+  render() {
+    const {
+      dropShadow,
+      highContrast,
+      open,
+      tabTip,
+      _handleSlotChange: handleSlotChange,
+    } = this;
+    if (tabTip) {
+      this.caret = tabTip ? false : true;
+    }
+    this.align = this.align ? this.align : tabTip ? 'bottom-left' : 'bottom';
+
+    const classes = classMap({
+      [`${prefix}--popover-container`]: true,
+      [`${prefix}--popover--caret`]: this.caret,
+      [`${prefix}--popover--drop-shadow`]: dropShadow,
+      [`${prefix}--popover--high-contrast`]: highContrast,
+      [`${prefix}--popover--open`]: open,
+      [`${prefix}--popover--${this.align}`]: true,
+      [`${prefix}--popover--tab-tip`]: tabTip,
+    });
+    return html`
+    <span class="${classes}">
+      <slot @slotchange="${handleSlotChange}"></slot>
+      <slot name="content"><slot>
+    </span>
+    `;
+  }
+
+  /**
+   * A selector that will return the CDSPopoverContent.
+   */
+  static get selectorPopoverContent() {
+    return `${prefix}-popover-content`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSPopover;
diff --git a/packages/carbon-web-components/src/components/progress-bar/defs.ts b/packages/carbon-web-components/src/components/progress-bar/defs.ts
new file mode 100644
index 00000000000..a3e5b3925de
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-bar/defs.ts
@@ -0,0 +1,63 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+
+/**
+ * Status of progress bar.
+ */
+export enum PROGRESS_BAR_STATUS {
+  /**
+   * Currently active.
+   */
+  ACTIVE = 'active',
+
+  /**
+   * Executed.
+   */
+  FINISHED = 'finished',
+
+  /**
+   * Invalid.
+   */
+  ERROR = 'error',
+}
+
+/**
+ * Size of progress bar.
+ */
+export enum PROGRESS_BAR_SIZE {
+  /**
+   * small size (thinner)
+   */
+  SMALL = 'small',
+
+  /**
+   * big size
+   */
+  BIG = 'big',
+}
+
+/**
+ * Defines the alignment variant of the progress bar.
+ */
+export enum PROGRESS_BAR_TYPE {
+  /**
+   * default type
+   */
+  DEFAULT = 'default',
+
+  /**
+   * Inline type
+   */
+  INLINE = 'inline',
+
+  /**
+   * indented type
+   */
+  INDENTED = 'indented',
+}
diff --git a/packages/carbon-web-components/src/components/progress-bar/index.ts b/packages/carbon-web-components/src/components/progress-bar/index.ts
new file mode 100644
index 00000000000..f3ba3416135
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-bar/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 './progress-bar';
diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx b/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
new file mode 100644
index 00000000000..632b3ca519e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.mdx
@@ -0,0 +1,61 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Progress bar
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-bar)
+
+A progress bar indicates that the user’s request has been received and the
+application is making progress toward completing the requested action. Progress
+bars inform users about the status of ongoing processes, the estimated time of
+how long a process will take, or if a request is being executed.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/progress-bar/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['progress-bar'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-progress-bar
+  label="Progress bar label"
+  helper-text="Optional helper text"
+  value="75">
+</cds-progress-bar>
+```
+
+## Indeterminate
+
+Indeterminate progress bars are used when the loading progress is unknown or the
+amount of wait time can’t be calculated. To use the indeterminate variation,
+make sure the `status` property is set to `active` and there is no `value`
+attribute passed in.
+
+```html
+<cds-progress-bar
+  label="Progress bar label"
+  helper-text="Optional helper text"
+  status="active">
+</cds-progress-bar>
+```
+
+## `<cds-progress-bar>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-progress-bar hide-label>`) and `false` means not setting the attribute
+(e.g. `<cds-progress-bar>` without `hide-label` attribute).
+
+<Props of="cds-progress-bar" />
diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.ts b/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.ts
new file mode 100644
index 00000000000..b157d9420ff
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar-story.ts
@@ -0,0 +1,146 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean, number, select } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import {
+  PROGRESS_BAR_SIZE,
+  PROGRESS_BAR_STATUS,
+  PROGRESS_BAR_TYPE,
+} from '../progress-bar/progress-bar';
+import './progress-bar';
+import '../../../.storybook/templates/with-layer';
+import storyDocs from './progress-bar-story.mdx';
+import { prefix } from '../../globals/settings';
+
+const sizes = {
+  [`Small size (${PROGRESS_BAR_SIZE.SMALL})`]: PROGRESS_BAR_SIZE.SMALL,
+  [`Big size (${PROGRESS_BAR_SIZE.BIG})`]: PROGRESS_BAR_SIZE.BIG,
+};
+
+const status = {
+  [`Active (${PROGRESS_BAR_STATUS.ACTIVE})`]: PROGRESS_BAR_STATUS.ACTIVE,
+  [`Finished (${PROGRESS_BAR_STATUS.FINISHED})`]: PROGRESS_BAR_STATUS.FINISHED,
+  [`Error (${PROGRESS_BAR_STATUS.ERROR})`]: PROGRESS_BAR_STATUS.ERROR,
+};
+
+const types = {
+  [`Default (${PROGRESS_BAR_TYPE.DEFAULT})`]: PROGRESS_BAR_TYPE.DEFAULT,
+  [`Inline (${PROGRESS_BAR_TYPE.INLINE})`]: PROGRESS_BAR_TYPE.INLINE,
+  [`Indented (${PROGRESS_BAR_TYPE.INDENTED})`]: PROGRESS_BAR_TYPE.INDENTED,
+};
+
+export const Default = () => {
+  return html`
+    <cds-progress-bar
+      label="Progress bar label"
+      helper-text="Optional helper text"
+      value="75">
+    </cds-progress-bar>
+  `;
+};
+
+export const Example = () => {
+  const size = 728;
+  let progress = 0;
+
+  setTimeout(() => {
+    const bar = document.querySelector('cds-progress-bar');
+    const interval = setInterval(() => {
+      const advancement = Math.random() * 8;
+      if (progress + advancement < size) {
+        progress = progress + advancement;
+        bar!.setAttribute('value', `${progress}`);
+        bar!.setAttribute(
+          'helper-text',
+          `${progress.toFixed(1)}MB of ${size}MB`
+        );
+      } else {
+        clearInterval(interval);
+        bar!.setAttribute('value', `${size}`);
+        bar!.setAttribute('status', `${PROGRESS_BAR_STATUS.FINISHED}`);
+        bar!.setAttribute('helper-text', 'Done');
+      }
+    }, 50);
+  }, 3000);
+
+  return html`
+    <cds-progress-bar
+      max="${size}"
+      label="Export data"
+      helper-text="Fetching assets..."
+      status="${PROGRESS_BAR_STATUS.ACTIVE}">
+    </cds-progress-bar>
+  `;
+};
+
+export const Indeterminate = () => {
+  return html`
+    <cds-progress-bar
+      label="Progress bar label"
+      helper-text="Optional helper text">
+    </cds-progress-bar>
+  `;
+};
+
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-progress-bar
+        label="Progress bar label"
+        helper-text="Optional helper text"
+        value="42">
+      </cds-progress-bar>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
+  const { helperText, hideLabel, label, max, size, status, type, value } =
+    args?.[`${prefix}-progress-bar`] ?? {};
+  return html`
+    <cds-progress-bar
+      max="${ifDefined(max)}"
+      ?hide-label="${hideLabel}"
+      label="${ifDefined(label)}"
+      helper-text="${ifDefined(helperText)}"
+      size="${ifDefined(size)}"
+      status="${ifDefined(status)}"
+      type="${ifDefined(type)}"
+      value="${value}">
+    </cds-progress-bar>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-progress-bar`]: () => ({
+      helperText: textNullable(
+        'Helper text (helper-text)',
+        'Optional helper text'
+      ),
+      hideLabel: boolean('Hide label (hide-label)', false),
+      label: textNullable('Label (label)', 'Progress bar label'),
+      max: number('Max (max)', 100),
+      size: select('Size (size)', sizes, PROGRESS_BAR_SIZE.BIG),
+      status: select('Status (status)', status, PROGRESS_BAR_STATUS.ACTIVE),
+      type: select('Type (type)', types, PROGRESS_BAR_TYPE.DEFAULT),
+      value: number('Value (value)', 75),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Progress bar',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar.scss b/packages/carbon-web-components/src/components/progress-bar/progress-bar.scss
new file mode 100644
index 00000000000..0939d736793
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/progress-bar' as *;
diff --git a/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts b/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts
new file mode 100644
index 00000000000..b4a7f19d6bb
--- /dev/null
+++ b/packages/carbon-web-components/src/components/progress-bar/progress-bar.ts
@@ -0,0 +1,198 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import ErrorFilled16 from '@carbon/icons/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import {
+  PROGRESS_BAR_SIZE,
+  PROGRESS_BAR_STATUS,
+  PROGRESS_BAR_TYPE,
+} from './defs';
+import { prefix } from '../../globals/settings';
+import styles from './progress-bar.scss';
+
+export { PROGRESS_BAR_SIZE, PROGRESS_BAR_STATUS, PROGRESS_BAR_TYPE };
+
+/**
+ * Progress bar.
+ *
+ * @element cds-progress-bar
+ */
+@customElement(`${prefix}-progress-bar`)
+class CDSProgressBar extends LitElement {
+  /**
+   * The current progress as a textual representation.
+   */
+  @property({ type: String, attribute: 'helper-text', reflect: true })
+  helperText;
+
+  /**
+   * Whether the label should be visually hidden.
+   */
+  @property({ type: Boolean, attribute: 'hide-label', reflect: true })
+  hideLabel;
+
+  /**
+   * A label describing the progress bar.
+   */
+  @property({ type: String })
+  label;
+
+  /**
+   * The maximum value.
+   */
+  @property({ type: Number, reflect: true })
+  max = 100;
+
+  /**
+   * Specify the size of the ProgressBar.
+   */
+  @property({ type: String, reflect: true })
+  size = PROGRESS_BAR_SIZE.BIG;
+
+  /**
+   * Specify the status.
+   */
+  @property({ type: String, reflect: true })
+  status = PROGRESS_BAR_STATUS.ACTIVE;
+
+  /**
+   * Defines the alignment variant of the progress bar.
+   */
+  @property({ type: String, reflect: true })
+  type = PROGRESS_BAR_TYPE.DEFAULT;
+
+  /**
+   * The current value.
+   */
+  @property({ type: Number, reflect: true })
+  value;
+
+  protected get _cappedValue() {
+    const { value, max, status } = this;
+
+    let cappedValue = value;
+    if (cappedValue > max) {
+      cappedValue = max;
+    }
+    if (cappedValue < 0) {
+      cappedValue = 0;
+    }
+    if (status === PROGRESS_BAR_STATUS.ERROR) {
+      cappedValue = 0;
+    } else if (status === PROGRESS_BAR_STATUS.FINISHED) {
+      cappedValue = max;
+    }
+
+    return cappedValue;
+  }
+
+  updated(changedProperties) {
+    if (
+      changedProperties.has('value') ||
+      changedProperties.has('max') ||
+      changedProperties.has('status')
+    ) {
+      const { _cappedValue: cappedValue, max, status } = this;
+
+      const percentage: number = cappedValue / max;
+
+      const bar = this.shadowRoot!.querySelector(
+        `.${prefix}--progress-bar__bar`
+      ) as HTMLElement;
+
+      if (
+        status != PROGRESS_BAR_STATUS.ERROR &&
+        status != PROGRESS_BAR_STATUS.FINISHED
+      ) {
+        bar.style.transform = `scaleX(${percentage})`;
+      } else {
+        bar.style.transform = 'none';
+      }
+    }
+  }
+
+  render() {
+    const {
+      _cappedValue: cappedValue,
+      helperText,
+      hideLabel,
+      label,
+      max,
+      size,
+      status,
+      type,
+      value,
+    } = this;
+
+    const isFinished = status === PROGRESS_BAR_STATUS.FINISHED;
+    const isError = status === PROGRESS_BAR_STATUS.ERROR;
+
+    const indeterminate =
+      !isFinished && !isError && (value === null || value === undefined);
+
+    let statusIcon = null;
+
+    if (isError) {
+      statusIcon = ErrorFilled16({
+        class: `${prefix}--progress-bar__status-icon`,
+      });
+    } else if (isFinished) {
+      statusIcon = CheckmarkFilled16({
+        class: `${prefix}--progress-bar__status-icon`,
+      });
+    }
+
+    const wrapperClasses = classMap({
+      [`${prefix}--progress-bar`]: true,
+      [`${prefix}--progress-bar--${size}`]: true,
+      [`${prefix}--progress-bar--${type}`]: true,
+      [`${prefix}--progress-bar--indeterminate`]: indeterminate,
+      [`${prefix}--progress-bar--finished`]: isFinished,
+      [`${prefix}--progress-bar--error`]: isError,
+    });
+
+    const labelClasses = classMap({
+      [`${prefix}--progress-bar__label`]: true,
+      [`${prefix}--visually-hidden`]: hideLabel,
+    });
+
+    return html` <div class="${wrapperClasses}">
+      <div class="${labelClasses}">
+        <span class="${prefix}--progress-bar__label-text">${label}</span>
+        ${statusIcon}
+      </div>
+      <div
+        class="${prefix}--progress-bar__track"
+        role="progressbar"
+        aria-busy="${!isFinished}"
+        aria-invalid="${isError}"
+        aria-valuemin="${!indeterminate ? 0 : null}"
+        aria-valuemax="${!indeterminate ? max : null}"
+        aria-valuenow="${!indeterminate ? cappedValue : null}">
+        <div class="${prefix}--progress-bar__bar"></div>
+      </div>
+      ${helperText
+        ? html`<div class="${prefix}--progress-bar__helper-text">
+            ${helperText}
+            <div class="${prefix}--visually-hidden" aria-live="polite">
+              ${isFinished ? 'Done' : 'Loading'}
+            </div>
+          </div>`
+        : null}
+    </div>`;
+  }
+
+  static styles = styles;
+}
+
+export default CDSProgressBar;
diff --git a/packages/carbon-web-components/src/components/progress-indicator/defs.ts b/packages/carbon-web-components/src/components/progress-indicator/defs.ts
index 35eb7bd109b..f743d45456b 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/defs.ts
+++ b/packages/carbon-web-components/src/components/progress-indicator/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * 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.
@@ -12,9 +12,9 @@
  */
 export enum PROGRESS_STEP_STAT {
   /**
-   * One for future execution.
+   * Complete one.
    */
-  QUEUED = 'queued',
+  COMPLETE = 'complete',
 
   /**
    * One that is being executed now.
@@ -22,9 +22,9 @@ export enum PROGRESS_STEP_STAT {
   CURRENT = 'current',
 
   /**
-   * Complete one.
+   * One for future execution.
    */
-  COMPLETE = 'complete',
+  INCOMPLETE = 'incomplete',
 
   /**
    * Invalid one.
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts
index 95404ea7d45..964422124e2 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-skeleton.ts
@@ -7,20 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
-import BXProgressStepSkeleton from './progress-step-skeleton';
+import CDSProgressStepSkeleton from './progress-step-skeleton';
 import styles from './progress-indicator.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of progress indicator.
  */
 @customElement(`${prefix}-progress-indicator-skeleton`)
-class BXProgressIndicatorSkeleton extends LitElement {
+export default class CDSProgressIndicatorSkeleton extends LitElement {
   /**
    * `true` if the progress indicator should be vertical. Corresponds to the attribute with the same name.
    */
@@ -32,17 +31,17 @@ class BXProgressIndicatorSkeleton extends LitElement {
       // Propagate `vertical` attribute to descendants until `:host-context()` gets supported in all major browsers
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXProgressIndicatorSkeleton).selectorStep
+          (this.constructor as typeof CDSProgressIndicatorSkeleton).selectorStep
         ),
         (item) => {
-          (item as BXProgressStepSkeleton).vertical = this.vertical;
+          (item as CDSProgressStepSkeleton).vertical = this.vertical;
         }
       );
     }
   }
 
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 
   /**
@@ -54,5 +53,3 @@ class BXProgressIndicatorSkeleton extends LitElement {
 
   static styles = styles;
 }
-
-export default BXProgressIndicatorSkeleton;
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
index 9cb931d763a..7933f759aa1 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Progress indicator
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/progress-indicator)
 
 Progress indicator is a visual representation of a users progress through a set
 of steps. They guide the user through a number of steps in order to complete a
@@ -33,59 +33,54 @@ import '@carbon/web-components/es/components/progress-indicator/index.js';
 ### HTML
 
 ```html
-<bx-progress-indicator>
-  <bx-progress-step
+<cds-progress-indicator>
+  <cds-progress-step
     label-text="Label"
     secondary-label-text="Secondary label"
-    state="invalid"
-  ></bx-progress-step>
-  <bx-progress-step
+    state="invalid"></cds-progress-step>
+  <cds-progress-step
     label-text="Label"
     secondary-label-text="Secondary label"
-    state="complete"
-  ></bx-progress-step>
-  <bx-progress-step
+    state="complete"></cds-progress-step>
+  <cds-progress-step
     label-text="Label"
     secondary-label-text="Secondary label"
-    state="current"
-  ></bx-progress-step>
-  <bx-progress-step
+    state="current"></cds-progress-step>
+  <cds-progress-step
     disabled
     label-text="Label"
-    secondary-label-text="Secondary label"
-  ></bx-progress-step>
-  <bx-progress-step
+    secondary-label-text="Secondary label"></cds-progress-step>
+  <cds-progress-step
     label-text="Label"
-    secondary-label-text="Secondary label"
-  ></bx-progress-step>
-</bx-progress-indicator>
+    secondary-label-text="Secondary label"></cds-progress-step>
+</cds-progress-indicator>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-progress-indicator-skeleton>` and
-`<bx-progress-step-skeleton>`.
+For the skeleton variation, utilize `<cds-progress-indicator-skeleton>` and
+`<cds-progress-step-skeleton>`.
 
 ```html
-<bx-progress-indicator-skeleton>
-  <bx-progress-step-skeleton></bx-progress-step-skeleton>
-  <bx-progress-step-skeleton></bx-progress-step-skeleton>
-  <bx-progress-step-skeleton></bx-progress-step-skeleton>
-</bx-progress-indicator-skeleton>
+<cds-progress-indicator-skeleton>
+  <cds-progress-step-skeleton></cds-progress-step-skeleton>
+  <cds-progress-step-skeleton></cds-progress-step-skeleton>
+  <cds-progress-step-skeleton></cds-progress-step-skeleton>
+</cds-progress-indicator-skeleton>
 ```
 
-## `<bx-progress-indicator>` attributes and properties
+## `<cds-progress-indicator>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-progress-indicator vertical>`) and `false` means not setting the attribute
-(e.g. `<bx-progress-indicator>` without `vertical` attribute).
+`<cds-progress-indicator vertical>`) and `false` means not setting the attribute
+(e.g. `<cds-progress-indicator>` without `vertical` attribute).
 
-<Props of="bx-progress-indicator" />
+<Props of="cds-progress-indicator" />
 
-## `<bx-progress-step>` attributes and properties
+## `<cds-progress-step>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-progress-step disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-progress-step>` without `disabled` attribute).
+`<cds-progress-step disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-progress-step>` without `disabled` attribute).
 
-<Props of="bx-progress-step" />
+<Props of="cds-progress-step" />
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts
index 2275c978e1f..854aab154e0 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator-story.ts
@@ -1,86 +1,126 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { boolean } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
 import './progress-indicator';
 import './progress-step';
 import './progress-indicator-skeleton';
 import './progress-step-skeleton';
 import storyDocs from './progress-indicator-story.mdx';
+import { prefix } from '../../globals/settings';
 
-export const Default = (args) => {
-  const { vertical } = args?.['bx-progress-indicator'] ?? {};
-  const { iconLabel, labelText, secondaryLabelText } =
-    args?.['bx-progress-step'] ?? {};
+export const Default = () => html`
+  <cds-progress-indicator>
+    <cds-progress-step
+      state="complete"
+      label="First step"
+      secondary-label="Optional label"
+      description="Step 1: Getting started with Carbon Design System"></cds-progress-step>
+    <cds-progress-step
+      label="Second step with tooltip"
+      state="current"></cds-progress-step>
+    <cds-progress-step
+      label="Third step with tooltip"
+      state="incomplete"></cds-progress-step>
+    <cds-progress-step
+      label="Fourth step"
+      secondary-label="Example invalid step"
+      state="invalid"></cds-progress-step>
+    <cds-progress-step
+      disabled
+      label="Fifth step"
+      state="incomplete"></cds-progress-step>
+  </cds-progress-indicator>
+`;
+
+export const Interactive = () => html`
+  <cds-progress-indicator>
+    <cds-progress-step
+      label="Click me"
+      description="Step 1: Register a onChange event"
+      state="complete"></cds-progress-step>
+    <cds-progress-step
+      label="Really long label"
+      description="The progress indicator will listen for clicks on the steps"
+      state="current"></cds-progress-step>
+    <cds-progress-step
+      label="Third step with tooltip"
+      description="The progress indicator will listen for clicks on the steps"
+      state="incomplete"></cds-progress-step>
+  </cds-progress-indicator>
+`;
+
+export const Playground = (args) => {
+  const { vertical, spaceEqually } =
+    args?.[`${prefix}-progress-indicator`] ?? {};
+  const { iconLabel, secondaryLabelText } =
+    args?.[`${prefix}-progress-step`] ?? {};
   return html`
-    <bx-progress-indicator ?vertical="${vertical}">
-      <bx-progress-step
-        icon-label="${ifNonNull(iconLabel)}"
-        label-text="${ifNonNull(labelText)}"
-        secondary-label-text="${ifNonNull(secondaryLabelText)}"
-        state="invalid"></bx-progress-step>
-      <bx-progress-step
-        icon-label="${ifNonNull(iconLabel)}"
-        label-text="${ifNonNull(labelText)}"
-        secondary-label-text="${ifNonNull(secondaryLabelText)}"
-        state="complete"></bx-progress-step>
-      <bx-progress-step
-        icon-label="${ifNonNull(iconLabel)}"
-        label-text="${ifNonNull(labelText)}"
-        secondary-label-text="${ifNonNull(secondaryLabelText)}"
-        state="current"></bx-progress-step>
-      <bx-progress-step
+    <cds-progress-indicator
+      ?vertical="${vertical}"
+      ?space-equally="${spaceEqually}">
+      <cds-progress-step
+        description="${ifDefined(iconLabel)}"
+        label="First step"
+        secondary-label="${ifDefined(secondaryLabelText)}"
+        state="complete"></cds-progress-step>
+      <cds-progress-step
+        description="${ifDefined(iconLabel)}"
+        label="Second step with tooltip"
+        state="current"></cds-progress-step>
+      <cds-progress-step
+        description="${ifDefined(iconLabel)}"
+        label="Third step with tooltip"
+        state="incomplete"></cds-progress-step>
+      <cds-progress-step
+        description="${ifDefined(iconLabel)}"
+        label="Fourth step"
+        secondary-label="Example invalid step"
+        state="invalid"></cds-progress-step>
+      <cds-progress-step
         disabled
-        icon-label="${ifNonNull(iconLabel)}"
-        label-text="${ifNonNull(labelText)}"
-        secondary-label-text="${ifNonNull(
-          secondaryLabelText
-        )}"></bx-progress-step>
-      <bx-progress-step
-        icon-label="${ifNonNull(iconLabel)}"
-        label-text="${ifNonNull(labelText)}"
-        secondary-label-text="${ifNonNull(
-          secondaryLabelText
-        )}"></bx-progress-step>
-    </bx-progress-indicator>
+        description="${ifDefined(iconLabel)}"
+        label="Fifth step"
+        state="incomplete"></cds-progress-step>
+    </cds-progress-indicator>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
+  ...storyDocs.parameters,
   knobs: {
-    'bx-progress-indicator': () => ({
+    [`${prefix}-progress-indicator`]: () => ({
       vertical: boolean('Vertical (vertical)', false),
+      spaceEqually: boolean('Space equally (space-equally)', false),
     }),
-    'bx-progress-step': () => ({
-      iconLabel: textNullable('Icon label (icon-label)', ''),
-      labelText: textNullable('Primary label text (label-text)', 'Label'),
+    [`${prefix}-progress-step`]: () => ({
+      description: textNullable('Icon label (description)', ''),
       secondaryLabelText: textNullable(
-        'Secondary label text (secondary-label-text)',
-        'Secondary label'
+        'Secondary label text (secondary-label)',
+        'Optional label'
       ),
     }),
   },
 };
 
 export const skeleton = (args) => {
-  const { vertical } = args?.['bx-progress-indicator-skeleton'];
+  const { vertical } = args?.[`${prefix}-progress-indicator-skeleton`];
   return html`
-    <bx-progress-indicator-skeleton ?vertical="${vertical}">
-      <bx-progress-step-skeleton></bx-progress-step-skeleton>
-      <bx-progress-step-skeleton></bx-progress-step-skeleton>
-      <bx-progress-step-skeleton></bx-progress-step-skeleton>
-    </bx-progress-indicator-skeleton>
+    <cds-progress-indicator-skeleton ?vertical="${vertical}">
+      <cds-progress-step-skeleton></cds-progress-step-skeleton>
+      <cds-progress-step-skeleton></cds-progress-step-skeleton>
+      <cds-progress-step-skeleton></cds-progress-step-skeleton>
+      <cds-progress-step-skeleton></cds-progress-step-skeleton>
+    </cds-progress-indicator-skeleton>
   `;
 };
 
@@ -89,7 +129,7 @@ skeleton.parameters = {
     skip: true,
   },
   knobs: {
-    'bx-progress-indicator-skeleton': () => ({
+    [`${prefix}-progress-indicator-skeleton`]: () => ({
       vertical: boolean('Vertical (vertical)', false),
     }),
   },
@@ -97,7 +137,4 @@ skeleton.parameters = {
 
 export default {
   title: 'Components/Progress indicator',
-  parameters: {
-    ...storyDocs.parameters,
-  },
 };
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss
index f1b9fda399d..d8c3797cc65 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,7 +7,14 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/progress-indicator/progress-indicator';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/skeleton' as *;
+@use '@carbon/styles/scss/components/progress-indicator/progress-indicator' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include progress-indicator;
 
 :host(#{$prefix}-progress-indicator),
 :host(#{$prefix}-progress-indicator-skeleton) {
@@ -26,8 +33,8 @@ $css--plex: true !default;
 
   outline: none;
 
-  // Carbon core style has hard-coded width whose value is the same as `.bx--progress-step`.
-  // We override it so changing width of `<bx-progress-step>` automatically changes the width here.
+  // Carbon core style has hard-coded width whose value is the same as `.#{$prefix}--progress-step`.
+  // We override it so changing width of `<#{$prefix}-progress-step>` automatically changes the width here.
   // https://github.com/carbon-design-system/carbon-web-components/issues/325
   .#{$prefix}--progress-line {
     width: 100%;
@@ -41,13 +48,13 @@ $css--plex: true !default;
 :host(#{$prefix}-progress-step[vertical]),
 :host(#{$prefix}-progress-step-skeleton[vertical]) {
   display: list-item;
-  min-height: 6rem;
+  min-height: 3.625rem;
   width: initial;
   min-width: initial;
 
   svg {
     display: inline-block;
-    margin: 0.1rem 0.5rem;
+    margin: 0.1rem $spacing-02 0.1rem $spacing-03;
   }
 
   .#{$prefix}--progress-label {
@@ -73,7 +80,11 @@ $css--plex: true !default;
   .#{$prefix}--progress-optional {
     margin-top: auto;
     position: initial;
-    margin-left: 2.25rem;
+    margin-left: $spacing-07;
+  }
+
+  .#{$prefix}--progress-step-button {
+    display: block;
   }
 }
 
@@ -83,29 +94,34 @@ $css--plex: true !default;
 
 :host(#{$prefix}-progress-step[state='current']) {
   @extend .#{$prefix}--progress-step--current;
+
+  svg {
+    fill: $interactive;
+  }
 }
 
 :host(#{$prefix}-progress-step[state='complete']) {
   @extend .#{$prefix}--progress-step--complete;
 
   svg {
-    fill: $interactive-01;
+    fill: $interactive;
   }
 }
 
-:host(#{$prefix}-progress-step-skeleton) .#{$prefix}--progress-label {
-  @include skeleton;
-
-  height: rem(12px);
-  width: rem(40px);
+:host(#{$prefix}-progress-step[state='incomplete']) {
+  @extend .#{$prefix}--progress-step--incomplete;
 }
 
 :host(#{$prefix}-progress-step-skeleton) {
   svg {
-    fill: $ui-05;
+    fill: $layer-selected-inverse;
   }
 
   .#{$prefix}--progress-line {
-    background-color: $ui-03;
+    background-color: $layer-accent-01;
   }
 }
+
+:host(#{$prefix}-progress-step[spaceEqually]) {
+  flex-grow: 1;
+}
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts
index 9611c28cd45..2cf86c3429f 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-indicator.ts
@@ -7,28 +7,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
-import BXProgressStep from './progress-step';
+import CDSProgressStep from './progress-step';
 import styles from './progress-indicator.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Progress indicator.
  *
- * @element bx-progress-indicator
+ * @element cds-progress-indicator
  */
 @customElement(`${prefix}-progress-indicator`)
-class BXProgressIndicator extends LitElement {
+export default class CDSProgressIndicator extends LitElement {
   /**
-   * `true` if the progress indicator should be vertical.
+   * Determines whether or not the progress indicator should be rendered
+   * vertically.
    */
   @property({ type: Boolean, reflect: true })
   vertical = false;
 
+  /**
+   * Specify whether the progress steps should be split equally in size in the
+   * div
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'space-equally' })
+  spaceEqually = false;
+
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'list');
@@ -37,21 +44,36 @@ class BXProgressIndicator extends LitElement {
   }
 
   updated(changedProperties) {
+    const spacingValue = this.vertical ? false : this.spaceEqually;
     if (changedProperties.has('vertical')) {
-      // Propagate `vertical` attribute to descendants until `:host-context()` gets supported in all major browsers
+      // Propagate `vertical` attribute to descendants until
+      // `:host-context()` gets supported in all major browsers
+      forEach(
+        this.querySelectorAll(
+          (this.constructor as typeof CDSProgressIndicator).selectorStep
+        ),
+        (item) => {
+          (item as CDSProgressStep).vertical = this.vertical;
+          (item as CDSProgressStep).spaceEqually = spacingValue;
+        }
+      );
+    }
+    if (changedProperties.has('spaceEqually')) {
+      // Propagate `spaceEqually` attribute to descendants until
+      // `:host-context()` gets supported in all major browsers
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXProgressIndicator).selectorStep
+          (this.constructor as typeof CDSProgressIndicator).selectorStep
         ),
         (item) => {
-          (item as BXProgressStep).vertical = this.vertical;
+          (item as CDSProgressStep).spaceEqually = spacingValue;
         }
       );
     }
   }
 
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 
   /**
@@ -63,5 +85,3 @@ class BXProgressIndicator extends LitElement {
 
   static styles = styles;
 }
-
-export default BXProgressIndicator;
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts
index 5065721f15c..da3514b1404 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-step-skeleton.ts
@@ -7,18 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import styles from './progress-indicator.scss';
+import CircleDash from '@carbon/icons/lib/circle-dash/16';
+import '../skeleton-text';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of progress step.
  */
 @customElement(`${prefix}-progress-step-skeleton`)
-class BXProgressStepSkeleton extends LitElement {
+export default class CDSProgressStepSkeleton extends LitElement {
   /**
    * `true` if the progress indicator should be vertical. Corresponds to the attribute with the same name.
    */
@@ -29,10 +30,10 @@ class BXProgressStepSkeleton extends LitElement {
     return html`
       <div
         class="${prefix}--progress-step-button ${prefix}--progress-step-button--unclickable">
-        <svg>
-          <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
-        </svg>
-        <p class="${prefix}--progress-label"></p>
+        ${CircleDash()}
+        <p class="${prefix}--progress-label">
+          <cds-skeleton-text width="40px" linecount="1"></cds-skeleton-text>
+        </p>
         <span class="${prefix}--progress-line"></span>
       </div>
     `;
@@ -40,5 +41,3 @@ class BXProgressStepSkeleton extends LitElement {
 
   static styles = styles;
 }
-
-export default BXProgressStepSkeleton;
diff --git a/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts b/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts
index 9d2d4a5db78..449780f69a2 100644
--- a/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts
+++ b/packages/carbon-web-components/src/components/progress-indicator/progress-step.ts
@@ -7,12 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { SVGTemplateResult } from 'lit-html';
-import { html, svg, property, LitElement } from 'lit-element';
+import { LitElement, html, svg } from 'lit';
+import { property } from 'lit/decorators.js';
 import CheckmarkOutline16 from '@carbon/icons/lib/checkmark--outline/16';
+import CircleDash16 from '@carbon/icons/lib/circle-dash/16';
+import Incomplete16 from '@carbon/icons/lib/incomplete/16';
 import Warning16 from '@carbon/icons/lib/warning/16';
-import settings from 'carbon-components/es/globals/js/settings';
-import spread from '../../globals/directives/spread';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import { PROGRESS_STEP_STAT } from './defs';
 import styles from './progress-indicator.scss';
@@ -20,50 +21,24 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { PROGRESS_STEP_STAT };
 
-const { prefix } = settings;
-
 /**
  * Icons, keyed by state.
  */
 const icons = {
-  [PROGRESS_STEP_STAT.QUEUED]: ({
-    children,
-    attrs = {},
-  }: {
-    children?: SVGTemplateResult;
-    attrs?: { [key: string]: string };
-  } = {}) =>
-    svg`
-      <svg ...="${spread(attrs)}">
-        ${children}
-        <path d="M8 1C4.1 1 1 4.1 1 8s3.1 7 7 7 7-3.1 7-7-3.1-7-7-7zm0 13c-3.3 0-6-2.7-6-6s2.7-6 6-6 6 2.7 6 6-2.7 6-6 6z" />
-      </svg>
-    `,
-  [PROGRESS_STEP_STAT.CURRENT]: ({
-    children,
-    attrs = {},
-  }: {
-    children?: SVGTemplateResult;
-    attrs?: { [key: string]: string };
-  } = {}) =>
-    svg`
-      <svg ...="${spread(attrs)}">
-        ${children}
-        <path d="M 7, 7 m -7, 0 a 7,7 0 1,0 14,0 a 7,7 0 1,0 -14,0" />
-      </svg>
-    `,
   [PROGRESS_STEP_STAT.COMPLETE]: CheckmarkOutline16,
+  [PROGRESS_STEP_STAT.INCOMPLETE]: CircleDash16,
   [PROGRESS_STEP_STAT.INVALID]: Warning16,
+  [PROGRESS_STEP_STAT.CURRENT]: Incomplete16,
 };
 
 /**
  * Progress step.
  *
- * @element bx-progress-step
+ * @element cds-progress-step
  * @slot secondary-label-text - The secondary progress label.
  */
 @customElement(`${prefix}-progress-step`)
-class BXProgressStep extends FocusMixin(LitElement) {
+export default class CDSProgressStep extends FocusMixin(LitElement) {
   /**
    * `true` if the progress step should be disabled.
    */
@@ -76,23 +51,32 @@ class BXProgressStep extends FocusMixin(LitElement) {
   @property({ attribute: 'icon-label' })
   iconLabel!: string;
 
+  @property({ reflect: true })
+  description!: string;
+
   /**
    * The primary progress label.
    */
   @property({ attribute: 'label-text' })
   labelText!: string;
 
+  @property()
+  label!: string;
+
   /**
    * The secondary progress label.
    */
   @property({ attribute: 'secondary-label-text' })
   secondaryLabelText!: string;
 
+  @property({ attribute: 'secondary-label' })
+  secondaryLabel!: string;
+
   /**
    * The progress state.
    */
   @property()
-  state = PROGRESS_STEP_STAT.QUEUED;
+  state = PROGRESS_STEP_STAT.INCOMPLETE;
 
   /**
    * `true` if the progress step should be vertical.
@@ -102,14 +86,13 @@ class BXProgressStep extends FocusMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   vertical = false;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * `true` if the progress step should be spaced equally.
+   *
+   * @private
+   */
+  @property({ type: Boolean, reflect: true })
+  spaceEqually = false;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -125,35 +108,48 @@ class BXProgressStep extends FocusMixin(LitElement) {
   }
 
   render() {
-    const { iconLabel, labelText, secondaryLabelText, state } = this;
+    const {
+      description,
+      iconLabel,
+      label,
+      secondaryLabelText,
+      secondaryLabel,
+      state,
+    } = this;
+    const svgLabel = iconLabel || description;
+    const optionalLabel = secondaryLabelText || secondaryLabel;
     return html`
-      ${icons[state]({
-        class: {
-          [PROGRESS_STEP_STAT.INVALID]: `${prefix}--progress__warning`,
-        }[state],
-        children: !iconLabel ? undefined : svg`<title>${iconLabel}</title>`,
-      })}
-      <slot>
-        <p
-          role="button"
-          class="${prefix}--progress-label"
-          tabindex="0"
-          aria-describedby="label-tooltip">
-          ${labelText}
-        </p>
-      </slot>
-      <slot name="secondary-label-text">
-        ${!secondaryLabelText
-          ? undefined
-          : html`
-              <p class="${prefix}--progress-optional">${secondaryLabelText}</p>
-            `}
-      </slot>
-      <span class="${prefix}--progress-line"></span>
+      <div class="${prefix}--progress-step-button" tabindex="0">
+        ${icons[state]({
+          class: {
+            [PROGRESS_STEP_STAT.INVALID]: `${prefix}--progress__warning`,
+          }[state],
+          children: svgLabel ? svg`<title>${svgLabel}</title>` : undefined,
+        })}
+        <slot>
+          <p
+            role="button"
+            class="${prefix}--progress-label"
+            aria-describedby="label-tooltip"
+            title="${label}">
+            ${label}
+          </p>
+        </slot>
+        <slot name="secondary-label-text">
+          ${!optionalLabel
+            ? undefined
+            : html`<p class="${prefix}--progress-optional">
+                ${optionalLabel}
+              </p>`}
+        </slot>
+        <span class="${prefix}--progress-line"></span>
+      </div>
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
-
-export default BXProgressStep;
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts b/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
index 332fbc20bc6..30bbd890628 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button-group.ts
@@ -7,29 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix } from '../../globals/settings';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { find, forEach } from '../../globals/internal/collection-helpers';
 import { RADIO_BUTTON_LABEL_POSITION, RADIO_BUTTON_ORIENTATION } from './defs';
-import BXRadioButton from './radio-button';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import CDSRadioButton from './radio-button';
 import styles from './radio-button.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { RADIO_BUTTON_ORIENTATION };
 
-const { prefix } = settings;
-
 /**
  * Radio button group.
  *
- * @element bx-radio-button-group
- * @fires bx-radio-button-group-changed - The custom event fired after this radio button group changes its selected item.
+ * @element cds-radio-button-group
+ * @fires cds-radio-button-group-changed - The custom event fired after this radio button group changes its selected item.
  */
 @customElement(`${prefix}-radio-button-group`)
-class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
+class CDSRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
   /**
    * Handles user-initiated change in selected radio button.
    */
@@ -37,15 +39,15 @@ class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleAfterChangeRadioButton = () => {
     const { selectorRadioButton } = this
-      .constructor as typeof BXRadioButtonGroup;
+      .constructor as typeof CDSRadioButtonGroup;
     const selected = find(
       this.querySelectorAll(selectorRadioButton),
-      (elem) => (elem as BXRadioButton).checked
+      (elem) => (elem as CDSRadioButton).checked
     );
     const oldValue = this.value;
     this.value = selected && selected.value;
     if (oldValue !== this.value) {
-      const { eventChange } = this.constructor as typeof BXRadioButtonGroup;
+      const { eventChange } = this.constructor as typeof CDSRadioButtonGroup;
       this.dispatchEvent(
         new CustomEvent(eventChange, {
           bubbles: true,
@@ -71,7 +73,13 @@ class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
   }
 
   /**
-   * `true` if the check box should be disabled.
+   * The `value` attribute for the `<input>` for selection.
+   */
+  @property()
+  defaultSelected!: string;
+
+  /**
+   * `true` if the radio button group should be disabled.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
@@ -82,6 +90,42 @@ class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
   @property({ reflect: true, attribute: 'label-position' })
   labelPosition = RADIO_BUTTON_LABEL_POSITION.RIGHT;
 
+  /**
+   * The label position.
+   */
+  @property({ reflect: true, attribute: 'legend-text' })
+  legendText = '';
+
+  /**
+   * The helper text.
+   */
+  @property({ attribute: 'helper-text' })
+  helperText;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  @property({ attribute: 'warn-text' })
+  warnText = '';
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  @property({ attribute: 'invalid-text' })
+  invalidText = '';
+
   /**
    * The `name` attribute for the `<input>` for selection.
    */
@@ -94,6 +138,12 @@ class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
   @property({ reflect: true })
   orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;
 
+  /**
+   * Controls the readonly state of the radio button group.
+   */
+  @property({ type: Boolean, reflect: true })
+  readOnly = false;
+
   /**
    * The `value` attribute for the `<input>` for selection.
    */
@@ -102,27 +152,89 @@ class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
 
   updated(changedProperties) {
     const { selectorRadioButton } = this
-      .constructor as typeof BXRadioButtonGroup;
-    ['disabled', 'labelPosition', 'orientation', 'name'].forEach((name) => {
-      if (changedProperties.has(name)) {
-        const { [name as keyof BXRadioButtonGroup]: value } = this;
-        // Propagate the property to descendants until `:host-context()` gets supported in all major browsers
-        forEach(this.querySelectorAll(selectorRadioButton), (elem) => {
-          (elem as BXRadioButton)[name] = value;
-        });
+      .constructor as typeof CDSRadioButtonGroup;
+    ['disabled', 'labelPosition', 'orientation', 'readOnly', 'name'].forEach(
+      (name) => {
+        if (changedProperties.has(name)) {
+          const { [name as keyof CDSRadioButtonGroup]: value } = this;
+          // Propagate the property to descendants until `:host-context()` gets supported in all major browsers
+          forEach(this.querySelectorAll(selectorRadioButton), (elem) => {
+            (elem as CDSRadioButton)[name] = value;
+          });
+        }
       }
-    });
+    );
     if (changedProperties.has('value')) {
       const { value } = this;
       forEach(this.querySelectorAll(selectorRadioButton), (elem) => {
-        (elem as BXRadioButton).checked =
-          value === (elem as BXRadioButton).value;
+        (elem as CDSRadioButton).checked =
+          value === (elem as CDSRadioButton).value;
+      });
+    }
+    if (changedProperties.has('invalid')) {
+      forEach(this.querySelectorAll(selectorRadioButton), (elem) => {
+        (elem as CDSRadioButton).invalid = this.invalid;
       });
     }
   }
 
   render() {
-    return html` <slot></slot> `;
+    const {
+      readOnly,
+      invalid,
+      invalidText,
+      warn,
+      warnText,
+      disabled,
+      orientation,
+      legendText,
+      helperText,
+    } = this;
+
+    const showWarning = !readOnly && !invalid && warn;
+    const showHelper = !invalid && !disabled && !warn;
+
+    const invalidIcon = WarningFilled16({
+      class: `${prefix}--radio-button__invalid-icon`,
+    });
+
+    const warnIcon = WarningAltFilled16({
+      class: `${prefix}--radio-button__invalid-icon ${prefix}--radio-button__invalid-icon--warning`,
+    });
+
+    const helper = helperText
+      ? html`<div class="${prefix}--form__helper-text">${helperText}</div>`
+      : null;
+
+    const fieldsetClasses = classMap({
+      [`${prefix}--radio-button-group`]: true,
+      [`${prefix}--radio-button-group--readonly`]: readOnly,
+      [`${prefix}--radio-button-group--${orientation}`]:
+        orientation === 'vertical',
+    });
+
+    return html` <fieldset
+        class="${fieldsetClasses}"
+        ?disabled="${disabled}"
+        aria-readonly="${readOnly}">
+        ${legendText
+          ? html` <legend class="${prefix}--label">${legendText}</legend>`
+          : ``}
+        <slot></slot>
+      </fieldset>
+      <div class="${prefix}--radio-button__validation-msg">
+        ${!readOnly && invalid
+          ? html`
+              ${invalidIcon}
+              <div class="${prefix}--form-requirement">${invalidText}</div>
+            `
+          : null}
+        ${showWarning
+          ? html`${warnIcon}
+              <div class="${prefix}--form-requirement">${warnText}</div>`
+          : null}
+      </div>
+      ${showHelper ? helper : null}`;
   }
 
   /**
@@ -149,4 +261,4 @@ class BXRadioButtonGroup extends FormMixin(HostListenerMixin(LitElement)) {
   static styles = styles;
 }
 
-export default BXRadioButtonGroup;
+export default CDSRadioButtonGroup;
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts b/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts
index 1bd3877fab3..ffb7856c42e 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button-skeleton.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './radio-button.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of radio button.
  */
 @customElement(`${prefix}-radio-button-skeleton`)
-class BXRadioButtonSkeleton extends LitElement {
+class CDSRadioButtonSkeleton extends LitElement {
   render() {
     return html`
       <div class="${prefix}--radio-button ${prefix}--skeleton"></div>
@@ -29,4 +27,4 @@ class BXRadioButtonSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXRadioButtonSkeleton;
+export default CDSRadioButtonSkeleton;
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx b/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
index 30960aebdb4..b22fffa5a79 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Radio button
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/radio-button)
 
 Radio buttons are used when a list of two or more options are mutually
 exclusive, meaning the user must select only one option.
@@ -28,40 +28,40 @@ import '@carbon/web-components/es/components/radio-button/index.js';
 ### HTML
 
 ```html
-<bx-radio-button-group
+<cds-radio-button-group
   label-position="right"
   orientation="horizontal"
-  name="radio-group"
->
-  <bx-radio-button label-text="Radio button" value="all"></bx-radio-button>
-  <bx-radio-button
+  name="radio-group">
+  <cds-radio-button label-text="Radio button" value="all"></cds-radio-button>
+  <cds-radio-button
     label-text="Radio button"
-    value="cloudFoundry"
-  ></bx-radio-button>
-  <bx-radio-button label-text="Radio button" value="staging"></bx-radio-button>
-</bx-radio-button-group>
+    value="cloudFoundry"></cds-radio-button>
+  <cds-radio-button
+    label-text="Radio button"
+    value="staging"></cds-radio-button>
+</cds-radio-button-group>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-radio-button-skeleton>`.
+For the skeleton variation, utilize `<cds-radio-button-skeleton>`.
 
 ```html
-<bx-radio-button-skeleton></bx-radio-button-skeleton>
+<cds-radio-button-skeleton></cds-radio-button-skeleton>
 ```
 
-## `<bx-radio-button-group>` attributes, properties and events
+## `<cds-radio-button-group>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-radio-button-group disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-radio-button-group>` without `disabled` attribute).
+`<cds-radio-button-group disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-radio-button-group>` without `disabled` attribute).
 
-<Props of="bx-radio-button-group" />
+<Props of="cds-radio-button-group" />
 
-## `<bx-radio-button-group>` attributes, properties and events
+## `<cds-radio-button-group>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-radio-button-group disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-radio-button-group>` without `disabled` attribute).
+`<cds-radio-button-group disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-radio-button-group>` without `disabled` attribute).
 
-<Props of="bx-radio-button-group" />
+<Props of="cds-radio-button-group" />
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts b/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts
index 5e11cd4823d..84849d85335 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button-story.ts
@@ -1,20 +1,21 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { prefix } from '../../globals/settings';
 import { RADIO_BUTTON_ORIENTATION } from './radio-button-group';
 import { RADIO_BUTTON_LABEL_POSITION } from './radio-button';
-import './radio-button-skeleton';
+import './index';
 import storyDocs from './radio-button-story.mdx';
 
 const orientations = {
@@ -31,40 +32,95 @@ const labelPositions = {
     RADIO_BUTTON_LABEL_POSITION.RIGHT,
 };
 
-export const Default = (args) => {
-  const { disabled, labelPosition, orientation, name, value, onChange } =
-    args?.['bx-radio-button-group'] ?? {};
-  const { hideLabel, labelText } = args?.['bx-radio-button'] ?? {};
+export const Default = () => {
   return html`
-    <bx-radio-button-group
+    <cds-radio-button-group
+      legend-text="Group label"
+      name="radio-group"
+      value="radio-1">
+      <cds-radio-button
+        label-text="Radio button label"
+        value="radio-1"></cds-radio-button>
+      <cds-radio-button
+        label-text="Radio button label"
+        value="radio-2"></cds-radio-button>
+      <cds-radio-button
+        label-text="Radio button label"
+        value="radio-3"
+        disabledItem></cds-radio-button>
+    </cds-radio-button-group>
+  `;
+};
+
+export const skeleton = () =>
+  html`<cds-radio-button-skeleton></cds-radio-button-skeleton>`;
+
+skeleton.parameters = {
+  percy: {
+    skip: true,
+  },
+};
+
+export const Playground = (args) => {
+  const {
+    disabled,
+    readOnly,
+    helperText,
+    invalid,
+    invalidText,
+    labelPosition,
+    orientation,
+    name,
+    value,
+    warn,
+    warnText,
+    onChange,
+  } = args?.[`${prefix}-radio-button-group`] ?? {};
+  const { checked, hideLabel, labelText } =
+    args?.[`${prefix}-radio-button`] ?? {};
+  return html`
+    <cds-radio-button-group
+      ?readOnly="${readOnly}"
       ?disabled="${disabled}"
-      label-position="${ifNonNull(labelPosition)}"
-      orientation="${ifNonNull(orientation)}"
-      name="${ifNonNull(name)}"
-      value="${ifNonNull(value)}"
-      @bx-radio-button-group-changed="${onChange}">
-      <bx-radio-button
+      helper-text="${ifDefined(helperText)}"
+      ?invalid="${invalid}"
+      invalid-text="${ifDefined(invalidText)}"
+      label-position="${ifDefined(labelPosition)}"
+      legend-text="Radio Button group"
+      orientation="${ifDefined(orientation)}"
+      name="${ifDefined(name)}"
+      value="${ifDefined(value)}"
+      ?warn="${warn}"
+      warn-text="${ifDefined(warnText)}"
+      @cds-radio-button-group-changed="${onChange}">
+      <cds-radio-button
+        ?checked="${checked}"
         ?hide-label="${hideLabel}"
-        label-text="${ifNonNull(labelText)}"
-        value="all"></bx-radio-button>
-      <bx-radio-button
+        label-text="${ifDefined(labelText)}"
+        value="radio-1"></cds-radio-button>
+      <cds-radio-button
         ?hide-label="${hideLabel}"
-        label-text="${ifNonNull(labelText)}"
-        value="cloudFoundry"></bx-radio-button>
-      <bx-radio-button
+        label-text="${ifDefined(labelText)}"
+        value="radio-2"></cds-radio-button>
+      <cds-radio-button
         ?hide-label="${hideLabel}"
-        label-text="${ifNonNull(labelText)}"
-        value="staging"></bx-radio-button>
-    </bx-radio-button-group>
+        label-text="${ifDefined(labelText)}"
+        value="radio-3"></cds-radio-button>
+    </cds-radio-button-group>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-radio-button-group': () => ({
+    [`${prefix}-radio-button-group`]: () => ({
       disabled: boolean('Disabled (disabled)', false),
+      readOnly: boolean('read only (readOnly)', false),
+      helperText: textNullable('Helper text (helper-text)', 'Helper text'),
+      invalid: boolean('Invalid (invalid)', false),
+      invalidText: textNullable(
+        'Invalid text (invalid-text)',
+        'Invalid selection'
+      ),
       labelPosition: select(
         'Label position (label-position)',
         labelPositions,
@@ -77,24 +133,21 @@ Default.parameters = {
       ),
       name: textNullable('Name (name)', 'radio-group'),
       value: textNullable('Value (value)', ''),
-      onChange: action('bx-radio-button-group-changed'),
+      warn: boolean('Warn (warn)', false),
+      warnText: textNullable(
+        'Warn text (warn-text)',
+        'Please notice the warning'
+      ),
+      onChange: action(`${prefix}-radio-button-group-changed`),
     }),
-    'bx-radio-button': () => ({
+    [`${prefix}-radio-button`]: () => ({
+      checked: boolean('Checked (checked)', false),
       hideLabel: boolean('Hide label (hide-label)', false),
-      labelText: textNullable('Label text (label-text)', 'Radio button'),
+      labelText: textNullable('Label text (label-text)', 'Radio button label'),
     }),
   },
 };
 
-export const skeleton = () =>
-  html` <bx-radio-button-skeleton></bx-radio-button-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
 export default {
   title: 'Components/Radio button',
   parameters: {
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button.scss b/packages/carbon-web-components/src/components/radio-button/radio-button.scss
index ddd87ef8537..8ecee2b7f27 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button.scss
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,12 +7,18 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/radio-button/radio-button';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/radio-button/radio-button' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include radio-button;
 
 :host(#{$prefix}-radio-button-group) {
-  @extend .#{$prefix}--radio-button-group;
+  @extend .#{$prefix}--form-item;
 }
 
 :host(#{$prefix}-radio-button-group[label-position='left']) {
@@ -23,9 +29,23 @@ $css--plex: true !default;
   @extend .#{$prefix}--radio-button-group--vertical;
 }
 
-:host(#{$prefix}-radio-button),
-:host(#{$prefix}-radio-button-skeleton) {
-  @extend .#{$prefix}--form-item;
+:host(#{$prefix}-radio-button-group[invalid]),
+:host(#{$prefix}-radio-button-group[warn]) {
+  .#{$prefix}--radio-button__validation-msg {
+    display: flex;
+
+    .#{$prefix}--form-requirement {
+      display: block;
+      overflow: visible;
+      max-height: 100%;
+      margin-top: 0;
+      margin-left: $spacing-03;
+    }
+  }
+}
+
+:host(#{$prefix}-radio-button-group[invalid]) .#{$prefix}--form-requirement {
+  color: $text-error;
 }
 
 :host(#{$prefix}-radio-button) {
@@ -38,17 +58,36 @@ $css--plex: true !default;
   }
 }
 
-:host(#{$prefix}-radio-button[disabled]) {
+:host(#{$prefix}-radio-button[invalid]) .#{$prefix}--radio-button__appearance {
+  border-color: $support-error;
+}
+
+:host(#{$prefix}-radio-button[data-table]) {
+  .#{$prefix}--radio-button__label {
+    width: rem(28px);
+  }
+
+  .#{$prefix}--radio-button__appearance {
+    margin-right: -#{$spacing-01};
+  }
+}
+
+:host(#{$prefix}-radio-button[readOnly]) {
+  @extend .#{$prefix}--radio-button-group--readonly;
+}
+
+:host(#{$prefix}-radio-button[disabled]),
+:host(#{$prefix}-radio-button[disabledItem]) {
   .#{$prefix}--radio-button__label {
-    color: $disabled;
+    color: $text-disabled;
     cursor: not-allowed;
   }
 
   .#{$prefix}--radio-button__appearance {
-    border-color: $disabled;
+    border-color: $border-disabled;
 
     &::before {
-      background-color: $disabled;
+      background-color: $border-disabled;
     }
   }
 }
@@ -60,6 +99,6 @@ $css--plex: true !default;
 
   .#{$prefix}--radio-button__appearance {
     margin-right: 0;
-    margin-left: $carbon--spacing-03;
+    margin-left: $spacing-03;
   }
 }
diff --git a/packages/carbon-web-components/src/components/radio-button/radio-button.ts b/packages/carbon-web-components/src/components/radio-button/radio-button.ts
index 317ebdcedf8..7845beb5c6d 100644
--- a/packages/carbon-web-components/src/components/radio-button/radio-button.ts
+++ b/packages/carbon-web-components/src/components/radio-button/radio-button.ts
@@ -7,10 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
@@ -24,8 +25,6 @@ import { carbonElement as customElement } from '../../globals/decorators/carbon-
 
 export { RADIO_BUTTON_LABEL_POSITION };
 
-const { prefix } = settings;
-
 /**
  * Map of navigation direction by key for horizontal alignment.
  */
@@ -65,8 +64,8 @@ class RadioButtonDelegate implements ManagedRadioButtonDelegate {
 
   set checked(checked) {
     const { host } = this._radio.getRootNode() as ShadowRoot;
-    const { eventChange } = host.constructor as typeof BXRadioButton; // eslint-disable-line no-use-before-define
-    (host as BXRadioButton).checked = checked;
+    const { eventChange } = host.constructor as typeof CDSRadioButton; // eslint-disable-line no-use-before-define
+    (host as CDSRadioButton).checked = checked;
     this._radio.tabIndex = checked ? 0 : -1;
     host.dispatchEvent(
       new CustomEvent(eventChange, {
@@ -103,11 +102,11 @@ class RadioButtonDelegate implements ManagedRadioButtonDelegate {
 /**
  * Radio button.
  *
- * @element bx-radio-button
- * @fires bx-radio-button-changed - The custom event fired after this radio button changes its checked state.
+ * @element cds-radio-button
+ * @fires cds-radio-button-changed - The custom event fired after this radio button changes its checked state.
  */
 @customElement(`${prefix}-radio-button`)
-class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
+class CDSRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * The radio group manager associated with the radio button.
    */
@@ -131,11 +130,23 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleClick = () => {
     const { disabled, _radioButtonDelegate: radioButtonDelegate } = this;
-    if (radioButtonDelegate && !disabled) {
+    if (radioButtonDelegate && !disabled && !this.disabledItem) {
       this.checked = true;
       if (this._manager) {
-        this._manager.select(radioButtonDelegate);
+        this._manager.select(radioButtonDelegate, this.readOnly);
       }
+      this.dispatchEvent(
+        new CustomEvent(
+          (this.constructor as typeof CDSRadioButton).eventChange,
+          {
+            bubbles: true,
+            composed: true,
+            detail: {
+              checked: this.checked,
+            },
+          }
+        )
+      );
     }
   };
 
@@ -155,11 +166,12 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
       const navigationDirection = navigationDirectionForKey[event.key];
       if (navigationDirection) {
         manager.select(
-          manager.navigate(radioButtonDelegate, navigationDirection)
+          manager.navigate(radioButtonDelegate, navigationDirection),
+          this.readOnly
         );
       }
       if (event.key === ' ' || event.key === 'Enter') {
-        manager.select(radioButtonDelegate);
+        manager.select(radioButtonDelegate, this.readOnly);
       }
     }
   };
@@ -171,7 +183,19 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
   checked = false;
 
   /**
-   * `true` if the check box should be disabled.
+   * `true` if the radio button is used in a data table
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'data-table' })
+  dataTable = false;
+
+  /**
+   * `true` if the radio button item should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabledItem = false;
+
+  /**
+   * `true` if the radio button group should be disabled.
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
@@ -182,6 +206,12 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
   hideLabel = false;
 
+  /**
+   * Specify if the currently value is invalid.
+   */
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
   /**
    * The label position.
    */
@@ -206,21 +236,18 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ reflect: true })
   orientation = RADIO_BUTTON_ORIENTATION.HORIZONTAL;
 
+  /**
+   * `true` if the radio button group should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  readOnly = false;
+
   /**
    * The `value` attribute for the `<input>` for selection.
    */
   @property()
   value!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   disconnectedCallback() {
     if (this._manager) {
       this._manager.delete(this._radioButtonDelegate);
@@ -239,6 +266,9 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
       name,
     } = this;
     if (changedProperties.has('checked') || changedProperties.has('name')) {
+      if (this.readOnly) {
+        this.checked = false;
+      }
       if (!this._manager) {
         this._manager = RadioGroupManager.get(
           this.getRootNode({ composed: true }) as Document
@@ -261,7 +291,15 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
   }
 
   render() {
-    const { checked, hideLabel, labelText, name, value, disabled } = this;
+    const {
+      checked,
+      hideLabel,
+      labelText,
+      name,
+      value,
+      disabled,
+      disabledItem,
+    } = this;
     const innerLabelClasses = classMap({
       [`${prefix}--visually-hidden`]: hideLabel,
     });
@@ -271,9 +309,9 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
         type="radio"
         class="${prefix}--radio-button"
         .checked=${checked}
-        ?disabled="${disabled}"
-        name=${ifNonNull(name)}
-        value=${ifNonNull(value)} />
+        ?disabled="${disabledItem || disabled}"
+        name=${ifDefined(name)}
+        value=${ifDefined(value)} />
       <label for="input" class="${prefix}--radio-button__label">
         <span class="${prefix}--radio-button__appearance"></span>
         <span class="${innerLabelClasses}"><slot>${labelText}</slot></span>
@@ -288,7 +326,11 @@ class BXRadioButton extends HostListenerMixin(FocusMixin(LitElement)) {
     return `${prefix}-radio-button-changed`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXRadioButton;
+export default CDSRadioButton;
diff --git a/packages/carbon-web-components/src/components/search/defs.ts b/packages/carbon-web-components/src/components/search/defs.ts
deleted file mode 100644
index e154c620dc6..00000000000
--- a/packages/carbon-web-components/src/components/search/defs.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020
- *
- * 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 { FORM_ELEMENT_COLOR_SCHEME as SEARCH_COLOR_SCHEME } from '../../globals/shared-enums';
diff --git a/packages/carbon-web-components/src/components/search/search-skeleton.ts b/packages/carbon-web-components/src/components/search/search-skeleton.ts
index a01366cd261..f93e6b722e3 100644
--- a/packages/carbon-web-components/src/components/search/search-skeleton.ts
+++ b/packages/carbon-web-components/src/components/search/search-skeleton.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import { INPUT_SIZE } from '../input/input';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { INPUT_SIZE } from '../text-input/text-input';
 import styles from './search.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of search.
  */
 @customElement(`${prefix}-search-skeleton`)
-class BXSearchSkeleton extends LitElement {
+class CDSSearchSkeleton extends LitElement {
   /**
    * The search box size. Corresponds to the attribute with the same name.
    */
   @property({ reflect: true })
-  size = INPUT_SIZE.REGULAR;
+  size = INPUT_SIZE.MEDIUM;
 
   render() {
     return html`
@@ -36,4 +35,4 @@ class BXSearchSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXSearchSkeleton;
+export default CDSSearchSkeleton;
diff --git a/packages/carbon-web-components/src/components/search/search-story.mdx b/packages/carbon-web-components/src/components/search/search-story.mdx
index 596b9bfbf5f..597fede009d 100644
--- a/packages/carbon-web-components/src/components/search/search-story.mdx
+++ b/packages/carbon-web-components/src/components/search/search-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Search
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/search)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/search)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/search)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/search)
 
 Search enables users to specify a word or a phrase to find particular relevant
 pieces of content without the use of navigation. Search can be used as the
@@ -30,21 +30,21 @@ import '@carbon/web-components/es/components/search/index.js';
 ### HTML
 
 ```html
-<bx-search label-text="Search"></bx-search>
+<cds-search label-text="Search"></cds-search>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-search-skeleton>`.
+For the skeleton variation, utilize `<cds-search-skeleton>`.
 
 ```html
-<bx-search-skeleton></bx-search-skeleton>
+<cds-search-skeleton></cds-search-skeleton>
 ```
 
-## `<bx-search>` attributes, properties and events
+## `<cds-search>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-search light>`) and `false` means not setting the attribute (e.g.
-`<bx-search>` without `light` attribute).
+`<cds-search light>`) and `false` means not setting the attribute (e.g.
+`<cds-search>` without `light` attribute).
 
-<Props of="bx-search" />
+<Props of="cds-search" />
diff --git a/packages/carbon-web-components/src/components/search/search-story.ts b/packages/carbon-web-components/src/components/search/search-story.ts
index 6ef99f5b95f..ecaf42a43a4 100644
--- a/packages/carbon-web-components/src/components/search/search-story.ts
+++ b/packages/carbon-web-components/src/components/search/search-story.ts
@@ -1,91 +1,149 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { action } from '@storybook/addon-actions';
-import { boolean, select } from '@storybook/addon-knobs';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean, number, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { INPUT_SIZE } from '../input/input';
-import { SEARCH_COLOR_SCHEME } from './search';
+import { INPUT_SIZE } from '../text-input/text-input';
 import './search-skeleton';
 import storyDocs from './search-story.mdx';
-
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${SEARCH_COLOR_SCHEME.LIGHT})`]: SEARCH_COLOR_SCHEME.LIGHT,
-};
+import { prefix } from '../../globals/settings';
+import '../layer';
+import '../../../.storybook/templates/with-layer';
 
 const sizes = {
-  'Regular size': null,
   [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  [`Extra large size (${INPUT_SIZE.EXTRA_LARGE})`]: INPUT_SIZE.EXTRA_LARGE,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
 };
 
-export const Default = (args) => {
+const widthSliderOptions = {
+  range: true,
+  min: 300,
+  max: 800,
+  step: 50,
+};
+
+export const Default = () => {
+  return html`
+    <cds-search
+      size="lg"
+      close-button-label-text="Clear search input"
+      label-text="Search"
+      placeholder="Find your items"
+      type="text"></cds-search>
+  `;
+};
+
+export const Disabled = () => {
+  return html`
+    <cds-search
+      size="lg"
+      disabled
+      close-button-label-text="Clear search input"
+      label-text="Search"
+      placeholder="Find your items"
+      type="text"></cds-search>
+  `;
+};
+
+export const Expandable = () => {
+  return html`
+    <cds-search
+      size="lg"
+      expandable
+      close-button-assistive-text="Clear search input"
+      label-text="Search"
+      placeholder="Find your items"
+      type="text"></cds-search>
+  `;
+};
+
+export const ExpandableWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-search size="lg" expandable placeholder="Layer two"></cds-search>
+    </sb-template-layers>
+  `;
+};
+
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-search size="lg" placeholder="Find your items"></cds-search>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
   const {
-    closeButtonAssistiveText,
+    autoComplete,
+    closeButtonLabelText,
     colorScheme,
     disabled,
     labelText,
-    name,
     placeholder,
+    playgroundWidth,
     size,
+    role,
     type,
     value,
     onInput,
-  } = args?.['bx-search'] ?? {};
+  } = args?.[`${prefix}-search`] ?? {};
+
+  const mainDiv = document.querySelector('#main-content');
+
+  if (mainDiv) {
+    (mainDiv as HTMLElement).style.width = `${playgroundWidth}px`;
+  }
+
   return html`
-    <bx-search
-      close-button-assistive-text="${ifNonNull(closeButtonAssistiveText)}"
-      color-scheme="${ifNonNull(colorScheme)}"
+    <cds-search
+      autocomplete="${autoComplete}"
+      close-button-assistive-text="${ifDefined(closeButtonLabelText)}"
+      color-scheme="${ifDefined(colorScheme)}"
       ?disabled="${disabled}"
-      label-text="${ifNonNull(labelText)}"
-      name="${ifNonNull(name)}"
-      placeholder="${ifNonNull(placeholder)}"
-      size="${ifNonNull(size)}"
-      type="${ifNonNull(type)}"
-      value="${ifNonNull(value)}"
-      @bx-search-input="${onInput}"></bx-search>
+      label-text="${ifDefined(labelText)}"
+      placeholder="${ifDefined(placeholder)}"
+      size="${ifDefined(size)}"
+      type="${ifDefined(type)}"
+      role=${role}
+      value="${ifDefined(value)}"
+      @cds-search-input="${onInput}">
+    </cds-search>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-search': () => ({
-      closeButtonAssistiveText: textNullable(
-        'The label text for the close button (close-button-assistive-text)',
+    [`${prefix}-search`]: () => ({
+      autoComplete: textNullable('Autocomplete (autocomplete)', 'off'),
+      closeButtonLabelText: textNullable(
+        'The label text for the close button (close-button-label-text)',
         'Clear search input'
       ),
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
       disabled: boolean('Disabled (disabled)', false),
       labelText: textNullable('Label text (label-text)', 'Search'),
-      name: textNullable('Name (name)', ''),
-      placeholder: textNullable('Placeholder text (placeholder)', ''),
-      size: select('Searh size (size)', sizes, null),
-      type: textNullable('The type of the <input> (type)', ''),
-      value: textNullable('Value (value)', ''),
-      onInput: action('bx-search-input'),
+      placeholder: textNullable(
+        'Placeholder text (placeholder)',
+        'Placeholder text'
+      ),
+      playgroundWidth: number('Playground width', 300, widthSliderOptions),
+      role: textNullable('The role of the <input> (role)', 'searchbox'),
+      size: select('Search size (size)', sizes, null),
+      type: textNullable('The type of the <input> (type)', 'text'),
+      value: textNullable('Value (value)', 'Default value'),
     }),
   },
 };
 
-export const skeleton = () => html` <bx-search-skeleton></bx-search-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
 export default {
   title: 'Components/Search',
   parameters: {
diff --git a/packages/carbon-web-components/src/components/search/search.scss b/packages/carbon-web-components/src/components/search/search.scss
index 61382d74e62..c453fe9b6c2 100644
--- a/packages/carbon-web-components/src/components/search/search.scss
+++ b/packages/carbon-web-components/src/components/search/search.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,14 +7,15 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/helper-mixins';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/search/search';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/search' as *;
 
-:host(#{$prefix}-search),
-:host(#{$prefix}-search-skeleton) {
-  @extend .#{$prefix}--search--lg;
-}
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include search;
 
 :host(#{$prefix}-search) {
   @extend .#{$prefix}--search;
@@ -22,23 +23,78 @@ $css--plex: true !default;
   outline: none;
 }
 
-:host(#{$prefix}-search[size='sm']),
-:host(#{$prefix}-search-skeleton[size='sm']) {
-  @extend .#{$prefix}--search--sm;
+:host(#{$prefix}-search[expandable]) {
+  @extend .#{$prefix}--search--expandable;
 }
 
-:host(#{$prefix}-search[size='lg']),
-:host(#{$prefix}-search-skeleton[size='lg']) {
-  @extend .#{$prefix}--search--lg;
+:host(#{$prefix}-search[expandable][size='sm']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-07;
+    height: $spacing-07;
+  }
+}
+
+:host(#{$prefix}-search[expandable][size='md']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-08;
+    height: $spacing-08;
+  }
+}
+
+:host(#{$prefix}-search[expandable][size='lg']) {
+  .#{$prefix}--search-magnifier {
+    width: $spacing-09;
+    height: $spacing-09;
+  }
+}
+
+:host(#{$prefix}-search[expandable][expanded]) {
+  @extend .#{$prefix}--search--expanded;
+
+  .#{$prefix}--search-input {
+    width: 100%;
+  }
+  .#{$prefix}--search-magnifier {
+    pointer-events: none;
+  }
+}
+
+:host(#{$prefix}-search[expandable][expanded][size='sm']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-07;
+  }
 }
 
-:host(#{$prefix}-search[size='xl']),
-:host(#{$prefix}-search-skeleton[size='xl']) {
-  @extend .#{$prefix}--search--xl;
+:host(#{$prefix}-search[expandable][expanded][size='md']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-08;
+  }
 }
 
-:host(#{$prefix}-search[color-scheme='light']) {
-  @extend .#{$prefix}--search--light;
+:host(#{$prefix}-search[expandable][expanded][size='lg']) {
+  .#{$prefix}--search-input {
+    padding: 0 $spacing-09;
+  }
+
+  ::slotted(.#{$prefix}--search-magnifier) {
+    width: rem(48px);
+    height: rem(48px);
+  }
+}
+
+:host(#{$prefix}-search[disabled]) {
+  svg {
+    fill: $icon-on-color-disabled;
+  }
+
+  .#{$prefix}--search-close {
+    pointer-events: none;
+    outline: none;
+
+    &::before {
+      background: none;
+    }
+  }
 }
 
 :host(#{$prefix}-search-skeleton) {
@@ -54,3 +110,18 @@ $css--plex: true !default;
     }
   }
 }
+
+:host(#{$prefix}-search[size='sm']),
+:host(#{$prefix}-search-skeleton[size='sm']) {
+  @extend .#{$prefix}--search--sm;
+}
+
+:host(#{$prefix}-search[size='md']),
+:host(#{$prefix}-search-skeleton[size='md']) {
+  @extend .#{$prefix}--search--md;
+}
+
+:host(#{$prefix}-search[size='lg']),
+:host(#{$prefix}-search-skeleton[size='lg']) {
+  @extend .#{$prefix}--search--lg;
+}
diff --git a/packages/carbon-web-components/src/components/search/search.ts b/packages/carbon-web-components/src/components/search/search.ts
index 74f81412f5b..3e80a43a504 100644
--- a/packages/carbon-web-components/src/components/search/search.ts
+++ b/packages/carbon-web-components/src/components/search/search.ts
@@ -7,37 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Close16 from '@carbon/icons/lib/close/16';
-import Close20 from '@carbon/icons/lib/close/20';
 import Search16 from '@carbon/icons/lib/search/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
-import { INPUT_SIZE } from '../input/input';
-import { SEARCH_COLOR_SCHEME } from './defs';
+import { INPUT_SIZE } from '../text-input/text-input';
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
 import styles from './search.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { SEARCH_COLOR_SCHEME };
-
-const { prefix } = settings;
-
 /**
  * Search box.
  *
- * @element bx-search
+ * @element cds-search
  * @csspart search-icon The search icon.
  * @csspart label-text The label text.
  * @csspart input The input box.
  * @csspart close-button The close button.
  * @csspart close-icon The close icon.
- * @fires bx-search-input - The custom event fired after the search content is changed upon a user gesture.
+ * @fires cds-search-input - The custom event fired after the search content is changed upon a user gesture.
  */
 @customElement(`${prefix}-search`)
-class BXSearch extends FocusMixin(FormMixin(LitElement)) {
+class CDSSearch extends HostListenerMixin(FocusMixin(FormMixin(LitElement))) {
   /**
    * Handles `input` event on the `<input>` in the shadow DOM.
    */
@@ -45,7 +42,7 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
     const { target } = event;
     const { value } = target as HTMLInputElement;
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXSearch).eventInput, {
+      new CustomEvent((this.constructor as typeof CDSSearch).eventInput, {
         bubbles: true,
         composed: true,
         cancelable: false,
@@ -63,7 +60,7 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
   private _handleClearInputButtonClick() {
     if (this.value) {
       this.dispatchEvent(
-        new CustomEvent((this.constructor as typeof BXSearch).eventInput, {
+        new CustomEvent((this.constructor as typeof CDSSearch).eventInput, {
           bubbles: true,
           composed: true,
           cancelable: false,
@@ -80,6 +77,42 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
     }
   }
 
+  /**
+   * Handles `focus` event on the button when the button can be expanded
+   */
+  @HostListener('focus')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleExpand() {
+    if (this.expandable && !this.expanded) {
+      this.setAttribute('expanded', '');
+    }
+  }
+
+  /**
+   * Handles `focusout` event on the component to be closed after being expanded
+   * Will not close if there is a value typed within.
+   */
+  @HostListener('focusout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleClose() {
+    if (this.expandable && this.expanded && !this.value) {
+      this.removeAttribute('expanded');
+    }
+  }
+
+  /**
+   * Handler for @slotchange, will only be ran if user sets an element under the "icon" slot.
+   *
+   * @private
+   */
+  private _handleSlotChange() {
+    const icon = this.querySelector('svg');
+    icon?.setAttribute('part', 'search-icon');
+    icon?.setAttribute('class', `${prefix}--search-magnifier-icon`);
+    icon?.setAttribute('role', `img`);
+    this.hasCustomIcon = true;
+  }
+
   _handleFormdata(event: Event) {
     const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
     const { disabled, name, value } = this;
@@ -89,16 +122,17 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
   }
 
   /**
-   * The assistive text for the close button.
+   * Specify an optional value for the autocomplete property on the underlying <input>,
+   * defaults to "off"
    */
-  @property({ attribute: 'close-button-assistive-text' })
-  closeButtonAssistiveText = '';
+  @property({ attribute: 'autocomplete' })
+  autoComplete = 'off';
 
   /**
-   * The color scheme.
+   * Specify a label to be read by screen readers on the "close" button
    */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = SEARCH_COLOR_SCHEME.REGULAR;
+  @property({ attribute: 'close-button-label-text' })
+  closeButtonLabelText = '';
 
   /**
    * `true` if the search box should be disabled.
@@ -106,6 +140,21 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * `true` if the search bar can be expandable
+   */
+  @property({ type: Boolean, reflect: true })
+  expandable = false;
+
+  /**
+   * `true` if the expandable search has been expanded
+   */
+  @property({ type: Boolean, reflect: true })
+  expanded = false;
+
+  @property({ type: Boolean })
+  hasCustomIcon = false;
+
   /**
    * The label text.
    */
@@ -118,17 +167,23 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
   @property()
   name = '';
 
+  /**
+   * Specify the role for the underlying <input>, defaults to searchbox
+   */
+  @property()
+  role = '';
+
   /**
    * The placeholder text.
    */
   @property()
-  placeholder = '';
+  placeholder = 'Search';
 
   /**
    * The search box size.
    */
   @property({ reflect: true })
-  size = INPUT_SIZE.REGULAR;
+  size = INPUT_SIZE.MEDIUM;
 
   /**
    * The `<input>` name.
@@ -142,42 +197,43 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
   @property({ type: String })
   value = '';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const {
-      closeButtonAssistiveText,
+      autoComplete,
+      closeButtonLabelText,
       disabled,
+      hasCustomIcon,
       labelText,
       name,
       placeholder,
-      size,
+      role,
       type,
       value = '',
       _handleInput: handleInput,
       _handleClearInputButtonClick: handleClearInputButtonClick,
+      _handleSlotChange: handleSlotChange,
     } = this;
     const clearClasses = classMap({
       [`${prefix}--search-close`]: true,
       [`${prefix}--search-close--hidden`]: !this.value,
     });
     return html`
-      ${Search16({
-        part: 'search-icon',
-        class: `${prefix}--search-magnifier-icon`,
-        role: 'img',
-      })}
+      <div class="${prefix}--search-magnifier">
+        <slot name="icon" @slotchange=${handleSlotChange}>
+          ${hasCustomIcon
+            ? html``
+            : html`${Search16({
+                part: 'search-icon',
+                class: `${prefix}--search-magnifier-icon`,
+                role: 'img',
+              })}`}
+        </slot>
+      </div>
       <label for="input" part="label-text" class="${prefix}--label">
         <slot>${labelText}</slot>
       </label>
       <input
+        autocomplete="${autoComplete}"
         id="input"
         part="input"
         type="${ifNonEmpty(type)}"
@@ -185,7 +241,7 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
         ?disabled="${disabled}"
         name="${ifNonEmpty(name)}"
         placeholder="${ifNonEmpty(placeholder)}"
-        role="searchbox"
+        role="${role}"
         .value="${value}"
         @input="${handleInput}" />
       <button
@@ -193,10 +249,10 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
         class="${clearClasses}"
         @click="${handleClearInputButtonClick}"
         type="button"
-        aria-label="${closeButtonAssistiveText}">
-        ${(size === INPUT_SIZE.SMALL ? Close16 : Close20)({
+        aria-label="${closeButtonLabelText}">
+        ${Close16({
           part: 'close-icon',
-          'aria-label': closeButtonAssistiveText,
+          'aria-label': closeButtonLabelText,
           role: 'img',
         })}
       </button>
@@ -210,7 +266,11 @@ class BXSearch extends FocusMixin(FormMixin(LitElement)) {
     return `${prefix}-search-input`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSearch;
+export default CDSSearch;
diff --git a/packages/carbon-web-components/src/components/select/index.ts b/packages/carbon-web-components/src/components/select/index.ts
index 15476bd8104..949958cbf02 100644
--- a/packages/carbon-web-components/src/components/select/index.ts
+++ b/packages/carbon-web-components/src/components/select/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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.
@@ -10,3 +10,4 @@
 import './select';
 import './select-item';
 import './select-item-group';
+import './select-skeleton';
diff --git a/packages/carbon-web-components/src/components/select/select-item-group.ts b/packages/carbon-web-components/src/components/select/select-item-group.ts
index 23ea02b9a35..b303be07679 100644
--- a/packages/carbon-web-components/src/components/select/select-item-group.ts
+++ b/packages/carbon-web-components/src/components/select/select-item-group.ts
@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * An option group in select box.
  *
- * @element bx-select-item-group
+ * @element cds-select-item-group
  */
 @customElement(`${prefix}-select-item-group`)
-class BXSelectItemGroup extends LitElement {
+class CDSSelectItemGroup extends LitElement {
   /**
    * `true` to disable this option.
    */
@@ -33,4 +32,4 @@ class BXSelectItemGroup extends LitElement {
   label = '';
 }
 
-export default BXSelectItemGroup;
+export default CDSSelectItemGroup;
diff --git a/packages/carbon-web-components/src/components/select/select-item.ts b/packages/carbon-web-components/src/components/select/select-item.ts
index 3127a01eb9e..f5154265899 100644
--- a/packages/carbon-web-components/src/components/select/select-item.ts
+++ b/packages/carbon-web-components/src/components/select/select-item.ts
@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * An option in select box.
  *
- * @element bx-select-item
+ * @element cds-select-item
  */
 @customElement(`${prefix}-select-item`)
-class BXSelectItem extends LitElement {
+class CDSSelectItem extends LitElement {
   /**
    * `true` to disable this option.
    */
@@ -45,4 +44,4 @@ class BXSelectItem extends LitElement {
   value = '';
 }
 
-export default BXSelectItem;
+export default CDSSelectItem;
diff --git a/packages/carbon-web-components/src/components/select/select-skeleton.ts b/packages/carbon-web-components/src/components/select/select-skeleton.ts
new file mode 100644
index 00000000000..87f46db5764
--- /dev/null
+++ b/packages/carbon-web-components/src/components/select/select-skeleton.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './select.scss';
+
+/**
+ * Skeleton of number input.
+ */
+@customElement(`${prefix}-select-skeleton`)
+class CDSSelectSkeleton extends LitElement {
+  /**
+   * `true` if the label should be hidden. Corresponds to the attribute with the same name.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
+  render() {
+    const { hideLabel } = this;
+    return html`
+      ${!hideLabel &&
+      html` <span class="${prefix}--label ${prefix}--skeleton"></span> `}
+      <div class="${prefix}--select ${prefix}--skeleton"></div>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSSelectSkeleton;
diff --git a/packages/carbon-web-components/src/components/select/select-story.mdx b/packages/carbon-web-components/src/components/select/select-story.mdx
index 11f89bcab1d..803781cff8f 100644
--- a/packages/carbon-web-components/src/components/select/select-story.mdx
+++ b/packages/carbon-web-components/src/components/select/select-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Select
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/select)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/select)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/select)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/select)
 
 The select component allows users to choose one option from a list. It is used
 in forms for users to submit data.
@@ -28,43 +28,42 @@ import '@carbon/web-components/es/components/select/index.js';
 ### HTML
 
 ```html
-<bx-select
+<cds-select
   helper-text="Optional helper text"
   label-text="Select"
-  placeholder="Optional placeholder text"
->
-  <bx-select-item-group label="Category 1">
-    <bx-select-item value="all">Option 1</bx-select-item>
-    <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
-  </bx-select-item-group>
-  <bx-select-item-group label="Category 2">
-    <bx-select-item value="staging">Option 3</bx-select-item>
-    <bx-select-item value="dea">Option 4</bx-select-item>
-    <bx-select-item value="router">Option 5</bx-select-item>
-  </bx-select-item-group>
-</bx-select>
+  placeholder="Optional placeholder text">
+  <cds-select-item-group label="Category 1">
+    <cds-select-item value="all">Option 1</cds-select-item>
+    <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+  </cds-select-item-group>
+  <cds-select-item-group label="Category 2">
+    <cds-select-item value="staging">Option 3</cds-select-item>
+    <cds-select-item value="dea">Option 4</cds-select-item>
+    <cds-select-item value="router">Option 5</cds-select-item>
+  </cds-select-item-group>
+</cds-select>
 ```
 
-## `<bx-select>` attributes, properties and events
+## `<cds-select>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-select autofocus>`) and `false` means not setting the attribute (e.g.
-`<bx-select>` without `autofocus` attribute).
+`<cds-select autofocus>`) and `false` means not setting the attribute (e.g.
+`<cds-select>` without `autofocus` attribute).
 
-<Props of="bx-select" />
+<Props of="cds-select" />
 
-## `<bx-select-item-group>` attributes, properties and events
+## `<cds-select-item-group>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-select-item-group disabled>`) and `false` means not setting the attribute
-(e.g. `<bx-select-item-group>` without `disabled` attribute).
+`<cds-select-item-group disabled>`) and `false` means not setting the attribute
+(e.g. `<cds-select-item-group>` without `disabled` attribute).
 
-<Props of="bx-select-item-group" />
+<Props of="cds-select-item-group" />
 
-## `<bx-select-item>` attributes, properties and events
+## `<cds-select-item>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-select-item disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-select-item>` without `disabled` attribute).
+`<cds-select-item disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-select-item>` without `disabled` attribute).
 
-<Props of="bx-select-item" />
+<Props of="cds-select-item" />
diff --git a/packages/carbon-web-components/src/components/select/select-story.ts b/packages/carbon-web-components/src/components/select/select-story.ts
index 133a727dccb..8e55c291409 100644
--- a/packages/carbon-web-components/src/components/select/select-story.ts
+++ b/packages/carbon-web-components/src/components/select/select-story.ts
@@ -1,102 +1,186 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
 // Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import ifNonNull from '../../globals/directives/if-non-null';
-import { INPUT_COLOR_SCHEME, INPUT_SIZE } from '../input/input';
+import { prefix } from '../../globals/settings';
+import { INPUT_SIZE } from '../text-input/text-input';
 import './select';
-import storyDocs from './select-story.mdx';
+import './select-item-group';
+import './select-item';
+import './select-skeleton';
+import '../form/form-item';
+import '../layer';
+import '../../../.storybook/templates/with-layer';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${INPUT_COLOR_SCHEME.LIGHT})`]: INPUT_COLOR_SCHEME.LIGHT,
-};
+import storyDocs from './select-story.mdx';
 
 const sizes = {
-  'Regular size': null,
   [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  [`Extra large size (${INPUT_SIZE.EXTRA_LARGE})`]: INPUT_SIZE.EXTRA_LARGE,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
+};
+
+export const Default = () => {
+  return html`
+    <cds-form-item>
+      <cds-select
+        helper-text="Optional helper text"
+        label-text="Select an option"
+        placeholder="Choose an option">
+        <cds-select-item-group label="Category 1">
+          <cds-select-item value="all">Option 1</cds-select-item>
+          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+        </cds-select-item-group>
+        <cds-select-item-group label="Category 2">
+          <cds-select-item value="staging">Option 3</cds-select-item>
+          <cds-select-item value="dea">Option 4</cds-select-item>
+          <cds-select-item value="router">Option 5</cds-select-item>
+        </cds-select-item-group>
+      </cds-select>
+    </cds-form-item>
+  `;
+};
+
+export const Inline = () => {
+  return html`
+    <cds-form-item>
+      <cds-select
+        inline
+        helper-text="Optional helper text"
+        label-text="Select an option"
+        placeholder="Choose an option">
+        <cds-select-item-group label="Category 1">
+          <cds-select-item value="all">Option 1</cds-select-item>
+          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+        </cds-select-item-group>
+        <cds-select-item-group label="Category 2">
+          <cds-select-item value="staging">Option 3</cds-select-item>
+          <cds-select-item value="dea">Option 4</cds-select-item>
+          <cds-select-item value="router">Option 5</cds-select-item>
+        </cds-select-item-group>
+      </cds-select>
+    </cds-form-item>
+  `;
+};
+
+export const skeleton = () =>
+  html` <cds-select-skeleton></cds-select-skeleton> `;
+
+skeleton.parameters = {
+  percy: {
+    skip: true,
+  },
 };
 
-export const Default = (args) => {
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-select
+        helper-text="Optional helper text"
+        placeholder="Choose an option">
+        <cds-select-item-group label="Category 1">
+          <cds-select-item value="all">Option 1</cds-select-item>
+          <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+        </cds-select-item-group>
+        <cds-select-item-group label="Category 2">
+          <cds-select-item value="staging">Option 3</cds-select-item>
+          <cds-select-item value="dea">Option 4</cds-select-item>
+          <cds-select-item value="router">Option 5</cds-select-item>
+        </cds-select-item-group>
+      </cds-select>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
   const {
-    autofocus,
-    colorScheme,
     disabled,
     helperText,
+    hideLabel,
+    inline,
     invalid,
+    invalidText,
     labelText,
     name,
     placeholder,
     size,
-    validityMessage,
+    readonly,
+    warn,
+    warnText,
     value,
     children = html`
-      <bx-select-item-group label="Category 1">
-        <bx-select-item value="all">Option 1</bx-select-item>
-        <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
-      </bx-select-item-group>
-      <bx-select-item-group label="Category 2">
-        <bx-select-item value="staging">Option 3</bx-select-item>
-        <bx-select-item value="dea">Option 4</bx-select-item>
-        <bx-select-item value="router">Option 5</bx-select-item>
-      </bx-select-item-group>
+      <cds-select-item-group label="Category 1">
+        <cds-select-item value="all">Option 1</cds-select-item>
+        <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
+      </cds-select-item-group>
+      <cds-select-item-group label="Category 2">
+        <cds-select-item value="staging">Option 3</cds-select-item>
+        <cds-select-item value="dea">Option 4</cds-select-item>
+        <cds-select-item value="router">Option 5</cds-select-item>
+      </cds-select-item-group>
     `,
     onInput,
-  } = args?.['bx-select'] ?? {};
+  } = args?.[`${prefix}-select`] ?? {};
   return html`
-    <bx-select
-      ?autofocus="${autofocus}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled="${disabled}"
-      helper-text="${ifNonNull(helperText)}"
-      ?invalid="${invalid}"
-      label-text="${ifNonNull(labelText)}"
-      name="${ifNonNull(name)}"
-      placeholder="${ifNonNull(placeholder)}"
-      size="${ifNonNull(size)}"
-      validity-message="${ifNonNull(validityMessage)}"
-      value="${ifNonNull(value)}"
-      @bx-select-selected="${ifNonNull(onInput)}">
-      ${children}
-    </bx-select>
+    <cds-form-item>
+      <cds-select
+        ?inline="${inline}"
+        ?disabled="${disabled}"
+        helper-text="${ifDefined(helperText)}"
+        ?hide-label="${hideLabel}"
+        ?invalid="${invalid}"
+        invalid-text="${ifDefined(invalidText)}"
+        label-text="${ifDefined(labelText)}"
+        name="${ifDefined(name)}"
+        placeholder="${ifDefined(placeholder)}"
+        size="${ifDefined(size)}"
+        ?readonly="${readonly}"
+        ?warn="${warn}"
+        warn-text="${ifDefined(warnText)}"
+        value="${ifDefined(value)}"
+        @cds-select-selected="${ifDefined(onInput)}">
+        ${children}
+      </cds-select>
+    </cds-form-item>
   `;
 };
 
-Default.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-select': () => ({
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
+    [`${prefix}-select`]: () => ({
       disabled: boolean('Disabled (disabled)', false),
       helperText: textNullable(
         'Helper text (helper-text)',
         'Optional helper text'
       ),
+      hideLabel: boolean('Hide label (hide-label)', false),
+      inline: boolean('Inline (inline)', false),
       invalid: boolean('Invalid (invalid)', false),
-      labelText: textNullable('Label text (label-text)', 'Select'),
+      invalidText: textNullable('Invalid text (invalid-text)', 'Error message'),
+      labelText: textNullable('Label text (label-text)', 'Select an option'),
       placeholder: textNullable(
-        'Placeholder text (placeholder)',
-        'Optional placeholder text'
-      ),
-      size: select('Dropdown size (size)', sizes, null),
-      validityMessage: textNullable(
-        'The validity message (validity-message)',
-        ''
+        'Placeholder (placeholder)',
+        'Choose an option'
       ),
+      size: select('size (size)', sizes, INPUT_SIZE.MEDIUM),
+      readonly: boolean('Read only (readonly)', false),
+      warn: boolean('Warn (warn)', false),
+      warnText: textNullable('Warn text (warn-text)', 'Warning message'),
       value: textNullable('The value of the selected item (value)', ''),
-      onInput: action('bx-select-selected'),
+      onInput: action(`${prefix}-select-selected`),
     }),
   },
 };
@@ -106,4 +190,9 @@ export default {
   parameters: {
     ...storyDocs.parameters,
   },
+  decorators: [
+    (story) => {
+      return html`<div style="width: 400px">${story()}</div>`;
+    },
+  ],
 };
diff --git a/packages/carbon-web-components/src/components/select/select.scss b/packages/carbon-web-components/src/components/select/select.scss
index c9d6dfb95f1..19293339944 100644
--- a/packages/carbon-web-components/src/components/select/select.scss
+++ b/packages/carbon-web-components/src/components/select/select.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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.
@@ -7,22 +7,66 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/select/select';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/select';
 
 :host(#{$prefix}-select) {
   @extend .#{$prefix}--select;
 
   outline: none;
+}
+
+:host(#{$prefix}-select[disabled]) {
+  @extend .#{$prefix}--select--disabled;
+}
+
+:host(#{$prefix}-select[invalid]) {
+  @extend .#{$prefix}--select--invalid;
+}
+
+:host(#{$prefix}-select[readonly]) select {
+  pointer-events: none;
+}
+
+:host(#{$prefix}-select[inline][warn]) {
+  .#{$prefix}--form__helper-text,
+  .#{$prefix}--label {
+    align-self: flex-start;
+    margin-top: 0.8125rem;
+  }
 
-  &[color-scheme='light'] {
-    @extend .#{$prefix}--select--light;
+  select {
+    padding-right: 3.5rem;
   }
 
-  &[disabled] {
-    @extend .#{$prefix}--select--disabled;
+  .#{$prefix}--select__invalid-icon--warning {
+    right: $spacing-07;
   }
+}
+
+:host(#{$prefix}-select[pagination]) {
+  .#{$prefix}--label {
+    margin: 0;
+  }
+
+  .#{$prefix}--select-input {
+    padding: 0 2.25rem 0 $spacing-05;
+
+    &:focus {
+      background-color: transparent;
+    }
+  }
+
+  .#{$prefix}--select__arrow {
+    top: 50%;
+    transform: translate(-#{$spacing-03}, -50%);
+  }
+}
 
-  &[invalid] {
-    @extend .#{$prefix}--select--invalid;
+:host(#{$prefix}-select[pagination][left-select]) {
+  .#{$prefix}--select-input {
+    border-right: 1px solid $border-subtle;
   }
 }
diff --git a/packages/carbon-web-components/src/components/select/select.ts b/packages/carbon-web-components/src/components/select/select.ts
index 23251a95bd2..9e91afacb18 100644
--- a/packages/carbon-web-components/src/components/select/select.ts
+++ b/packages/carbon-web-components/src/components/select/select.ts
@@ -7,35 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, query, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
-import { FORM_ELEMENT_COLOR_SCHEME } from '../../globals/shared-enums';
-import ifNonNull from '../../globals/directives/if-non-null';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import { prefix } from '../../globals/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import FormMixin from '../../globals/mixins/form';
-import ValidityMixin from '../../globals/mixins/validity';
 import { filter } from '../../globals/internal/collection-helpers';
-import { INPUT_SIZE } from '../input/input';
+import { INPUT_SIZE } from '../text-input/text-input';
 import styles from './select.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { FORM_ELEMENT_COLOR_SCHEME as SELECT_COLOR_SCHEME } from '../../globals/shared-enums';
-
-const { prefix } = settings;
-
 /**
  * Select box.
  *
- * @element bx-select
+ * @element cds-select
  * @slot helper-text - The helper text.
  * @slot label-text - The label text.
  * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
  */
 @customElement(`${prefix}-select`)
-class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
+class CDSSelect extends FormMixin(LitElement) {
   /**
    * The mutation observer DOM mutation.
    */
@@ -62,7 +57,7 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
   private _handleInput({ target }: Event) {
     const { value } = target as HTMLSelectElement;
     this.value = value;
-    const { eventSelect } = this.constructor as typeof BXSelect;
+    const { eventSelect } = this.constructor as typeof CDSSelect;
     this.dispatchEvent(
       new CustomEvent(eventSelect, {
         bubbles: true,
@@ -75,10 +70,10 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
   }
 
   /**
-   * Handles DOM mutation of `<bx-select-item>` or `<bx-select-item-group>` put in `<bx-select>`, or their changes.
-   * In such event, `<bx-select>` creates the corresponding `<option>` and `<optgroup>`, respectively, into shadow DOM,
+   * Handles DOM mutation of `<cds-select-item>` or `<cds-select-item-group>` put in `<cds-select>`, or their changes.
+   * In such event, `<cds-select>` creates the corresponding `<option>` and `<optgroup>`, respectively, into shadow DOM,
    * with `._renderItems()`.
-   * Doing so allows the shadow DOM style of `<bx-select>` to control the style of the `<option>` and `<optgroup>`,
+   * Doing so allows the shadow DOM style of `<cds-select>` to control the style of the `<option>` and `<optgroup>`,
    * notably the disabled ones.
    */
   private _handleMutation = () => {
@@ -89,10 +84,10 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
    * @param element The parent element containing pseudo `<optgroup>`/`<option>`.
    * @returns The template containing child `<optgroup>`/`<option>` that will be rendered to shadow DOM.
    */
-  private _renderItems(element: BXSelect | HTMLOptGroupElement) {
+  private _renderItems(element: CDSSelect | HTMLOptGroupElement) {
     const { selectorItem, selectorLeafItem } = this
-      .constructor as typeof BXSelect;
-    // Harvests attributes from `<bx-select-item>` and `<bx-select-item-group>`.
+      .constructor as typeof CDSSelect;
+    // Harvests attributes from `<cds-select-item>` and `<cds-select-item-group>`.
     // Does not use properties to avoid delay in attribute to property mapping, which runs in custom element reaction cycle:
     // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions
     return html`
@@ -112,9 +107,9 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
               <option
                 class="${prefix}--select-option"
                 ?disabled="${disabled}"
-                label="${ifNonNull(label ?? textContent)}"
+                label="${ifDefined(label ?? textContent)}"
                 ?selected="${selected}"
-                value="${ifNonNull(value)}">
+                value="${ifDefined(value)}">
                 ${textContent}
               </option>
             `
@@ -122,7 +117,7 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
               <optgroup
                 class="${prefix}--select-optgroup"
                 ?disabled="${disabled}"
-                label="${ifNonNull(label)}">
+                label="${ifDefined(label)}">
                 ${this._renderItems(item)}
               </optgroup>
             `;
@@ -166,12 +161,6 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
   @property({ type: Boolean })
   autofocus = false;
 
-  /**
-   * The color scheme.
-   */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = FORM_ELEMENT_COLOR_SCHEME.REGULAR;
-
   /**
    * Controls the disabled state of the select
    */
@@ -184,6 +173,12 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
   @property({ attribute: 'helper-text' })
   helperText = '';
 
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  @property({ type: Boolean, attribute: 'hide-label' })
+  hideLabel = false;
+
   /**
    * ID to link the `label` and `select`
    */
@@ -191,17 +186,41 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
   id = '';
 
   /**
-   * Controls the invalid state and visibility of the `validityMessage`
+   * Specify if the currently value is invalid.
    */
   @property({ type: Boolean, reflect: true })
   invalid = false;
 
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  @property({ attribute: 'invalid-text' })
+  invalidText = '';
+
+  /**
+   * Specify if the currently value is warn.
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
+
+  /**
+   * Message which is displayed if the value is warn.
+   */
+  @property({ attribute: 'warn-text' })
+  warnText = '';
+
   /**
    * The label text.
    */
   @property({ attribute: 'label-text' })
   labelText = '';
 
+  /**
+   * Specify whether you want the inline version of this control
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
   /**
    * `true` to enable multiple selection.
    */
@@ -264,24 +283,14 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
    * The input box size.
    */
   @property({ reflect: true })
-  size = INPUT_SIZE.REGULAR;
-
-  /**
-   * The validity message.
-   */
-  @property({ attribute: 'validity-message' })
-  validityMessage = '';
+  size = INPUT_SIZE.MEDIUM;
 
   /**
    * The value of the text area.
    */
-  @property()
+  @property({ reflect: true })
   value = '';
 
-  createRenderRoot() {
-    return this.attachShadow({ mode: 'open', delegatesFocus: true });
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this._observerMutation = new MutationObserver(this._handleMutation);
@@ -313,16 +322,30 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
     const {
       disabled,
       helperText,
+      hideLabel,
+      inline,
       invalid,
+      invalidText,
       labelText,
       placeholder,
+      readonly,
       size,
-      validityMessage,
+      warn,
+      warnText,
       value,
       _placeholderItemValue: placeholderItemValue,
       _handleInput: handleInput,
     } = this;
 
+    const selectClasses = classMap({
+      [`${prefix}--select`]: true,
+      [`${prefix}--select--inline`]: inline,
+      [`${prefix}--select--invalid`]: invalid,
+      [`${prefix}--select--warning`]: warn,
+      [`${prefix}--select--disabled`]: disabled,
+      [`${prefix}--select--readonly`]: readonly,
+    });
+
     const inputClasses = classMap({
       [`${prefix}--select-input`]: true,
       [`${prefix}--select-input--${size}`]: size,
@@ -338,52 +361,78 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
       [`${prefix}--form__helper-text--disabled`]: disabled,
     });
 
-    const supplementalText = !invalid
+    const supplementalText = helperText
       ? html`
           <div class="${helperTextClasses}">
             <slot name="helper-text"> ${helperText} </slot>
           </div>
         `
-      : html`
-          <div class="${prefix}--form-requirement" id="validity-message">
-            <slot name="validity-message"> ${validityMessage} </slot>
-          </div>
-        `;
+      : null;
+
+    const errorText =
+      invalid || warn
+        ? html` <div class="${prefix}--form-requirement">
+            ${invalid ? invalidText : warnText}
+          </div>`
+        : null;
+
+    const input = html`
+      <select
+        id="input"
+        class="${inputClasses}"
+        ?disabled="${disabled}"
+        aria-readonly="${String(Boolean(readonly))}"
+        aria-invalid="${String(Boolean(invalid))}"
+        aria-describedby="${ifDefined(!invalid ? undefined : 'invalid-text')}"
+        @input="${handleInput}">
+        ${!placeholder || value
+          ? undefined
+          : html`
+              <option
+                disabled
+                hidden
+                class="${prefix}--select-option"
+                value="${placeholderItemValue}"
+                selected>
+                ${placeholder}
+              </option>
+            `}
+        ${this._renderItems(this)}
+      </select>
+      ${ChevronDown16({ class: `${prefix}--select__arrow` })}
+      ${!invalid
+        ? undefined
+        : WarningFilled16({ class: `${prefix}--select__invalid-icon` })}
+      ${!invalid && warn
+        ? WarningAltFilled16({
+            class: `${prefix}--select__invalid-icon ${prefix}--select__invalid-icon--warning`,
+          })
+        : null}
+    `;
 
     return html`
-      <label class="${labelClasses}" for="input">
-        <slot name="label-text"> ${labelText} </slot>
-      </label>
-      <div class="${prefix}--select-input__wrapper" ?data-invalid="${invalid}">
-        <select
-          id="input"
-          class="${inputClasses}"
-          ?disabled="${disabled}"
-          aria-invalid="${String(Boolean(invalid))}"
-          aria-describedby="${ifDefined(
-            !invalid ? undefined : 'validity-message'
-          )}"
-          @input="${handleInput}">
-          ${!placeholder || value
-            ? undefined
-            : html`
-                <option
-                  disabled
-                  hidden
-                  class="${prefix}--select-option"
-                  value="${placeholderItemValue}"
-                  selected>
-                  ${placeholder}
-                </option>
-              `}
-          ${this._renderItems(this)}
-        </select>
-        ${ChevronDown16({ class: `${prefix}--select__arrow` })}
-        ${!invalid
-          ? undefined
-          : WarningFilled16({ class: `${prefix}--select__invalid-icon` })}
+      <div class="${selectClasses}">
+        ${!hideLabel
+          ? html`<label class="${labelClasses}" for="input">
+              <slot name="label-text"> ${labelText} </slot>
+            </label>`
+          : null}
+        ${inline
+          ? html`<div class="${prefix}--select-input--inline__wrapper">
+              <div
+                class="${prefix}--select-input__wrapper"
+                ?data-invalid="${invalid}">
+                ${input}
+              </div>
+              ${errorText}
+            </div>`
+          : html`<div
+              class="${prefix}--select-input__wrapper"
+              ?data-invalid="${invalid}">
+              ${input}
+            </div> `}
+        ${!inline && errorText ? errorText : supplementalText}
       </div>
-      ${supplementalText}
     `;
   }
 
@@ -408,7 +457,11 @@ class BXSelect extends ValidityMixin(FormMixin(LitElement)) {
     return `${prefix}-select-selected`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSelect;
+export default CDSSelect;
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
index ed6d4e3298b..fd20b71bd69 100644
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Skeleton placeholder
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-placeholder)
 
 ## Getting started
 
@@ -25,9 +25,9 @@ import '@carbon/web-components/es/components/skeleton-placeholder/index.js';
 ### HTML
 
 ```html
-<bx-skeleton-placeholder></bx-skeleton-placeholder>
+<cds-skeleton-placeholder></cds-skeleton-placeholder>
 ```
 
-## `<bx-skeleton-placeholder>` attributes, properties and events
+## `<cds-skeleton-placeholder>` attributes, properties and events
 
-<Props of="bx-skeleton-placeholder" />
+<Props of="cds-skeleton-placeholder" />
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
index 48502f0bab8..9cb37821bdf 100644
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder-story.ts
@@ -1,18 +1,18 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import './skeleton-placeholder';
 import storyDocs from './skeleton-placeholder-story.mdx';
 
 export const Default = () =>
-  html` <bx-skeleton-placeholder></bx-skeleton-placeholder> `;
+  html`<cds-skeleton-placeholder></cds-skeleton-placeholder>`;
 
 Default.storyName = 'Default';
 
@@ -23,7 +23,7 @@ Default.parameters = {
 };
 
 export default {
-  title: 'Components/Skeleton placeholder',
+  title: 'Components/Skeleton/Skeleton placeholder',
   parameters: {
     ...storyDocs.parameters,
   },
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss
index 1c2ac684563..8da776327bb 100644
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.scss
@@ -1,8 +1,8 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/skeleton/skeleton-placeholder';
+@use '@carbon/styles/scss/components/skeleton-styles';
diff --git a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts
index 535dda45520..3460969eec1 100644
--- a/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts
+++ b/packages/carbon-web-components/src/components/skeleton-placeholder/skeleton-placeholder.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './skeleton-placeholder.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton placeholder.
  *
- * @element bx-skeleton-placeholder
+ * @element cds-skeleton-placeholder
  */
 @customElement(`${prefix}-skeleton-placeholder`)
-class BXSkeletonPlaceholder extends LitElement {
+class CDSSkeletonPlaceholder extends LitElement {
   render() {
     return html` <div class="${prefix}--skeleton__placeholder"></div> `;
   }
@@ -28,4 +26,4 @@ class BXSkeletonPlaceholder extends LitElement {
   static styles = styles;
 }
 
-export default BXSkeletonPlaceholder;
+export default CDSSkeletonPlaceholder;
diff --git a/packages/carbon-web-components/src/components/skeleton-text/defs.ts b/packages/carbon-web-components/src/components/skeleton-text/defs.ts
index 43f7f6f14f6..c257d2dd300 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/defs.ts
+++ b/packages/carbon-web-components/src/components/skeleton-text/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * 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.
@@ -20,9 +20,4 @@ export enum SKELETON_TEXT_TYPE {
    * Heading variant.
    */
   HEADING = 'heading',
-
-  /**
-   * Line variant.
-   */
-  LINE = 'line',
 }
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
index e22f6a135c1..43f6a3eaa8a 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Skeleton text
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skeleton-text)
 
 ## Getting started
 
@@ -25,20 +25,20 @@ import '@carbon/web-components/es/components/skeleton-text/index.js';
 ### HTML
 
 ```html
-<bx-skeleton-text></bx-skeleton-text>
+<cds-skeleton-text></cds-skeleton-text>
 ```
 
 ### Lines
 
 To create multiple lines of skeleton text, set the `type` property and use
-multiple instances of `<bx-skeleton-text>`.
+multiple instances of `<cds-skeleton-text>`.
 
 ```html
-<bx-skeleton-text type="line"></bx-skeleton-text>
-<bx-skeleton-text type="line"></bx-skeleton-text>
-<bx-skeleton-text type="line"></bx-skeleton-text>
+<cds-skeleton-text type="line"></cds-skeleton-text>
+<cds-skeleton-text type="line"></cds-skeleton-text>
+<cds-skeleton-text type="line"></cds-skeleton-text>
 ```
 
-## `<bx-skeleton-text>` attributes and properties
+## `<cds-skeleton-text>` attributes and properties
 
-<Props of="bx-skeleton-text" />
+<Props of="cds-skeleton-text" />
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
index 4695107b9e8..032c03c4dbc 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text-story.ts
@@ -1,15 +1,16 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { select } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { html } from 'lit';
+import { boolean, number, select, text } from '@storybook/addon-knobs';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
 import { SKELETON_TEXT_TYPE } from './skeleton-text';
 import storyDocs from './skeleton-text-story.mdx';
 
@@ -18,35 +19,45 @@ const types = {
   [`Heading (${SKELETON_TEXT_TYPE.HEADING})`]: SKELETON_TEXT_TYPE.HEADING,
 };
 
-export const Default = (args) => {
-  const { type } = args?.['bx-skeleton-text'] ?? {};
-  return html`
-    <bx-skeleton-text type="${ifNonNull(type)}"></bx-skeleton-text>
-  `;
-};
+export const Default = () => html` <cds-skeleton-text></cds-skeleton-text>`;
 
 Default.storyName = 'Default';
 
 Default.parameters = {
+  percy: {
+    skip: true,
+  },
+};
+
+export const Playground = (args) => {
+  const { type, paragraph, lineCount, width } =
+    args?.[`${prefix}-skeleton-text`] ?? {};
+  return html`
+    <cds-skeleton-text
+      type="${ifDefined(type)}"
+      ?paragraph="${paragraph}"
+      lineCount="${lineCount}"
+      width="${width}">
+    </cds-skeleton-text>
+  `;
+};
+
+Playground.parameters = {
   knobs: {
-    'bx-skeleton-text': () => ({
+    [`${prefix}-skeleton-text`]: () => ({
       type: select('Skeleton text type (type)', types, null),
+      paragraph: boolean('Use multiple lines of text (paragraph)', true),
+      lineCount: number('The number of lines in a paragraph (lineCount)', 3),
+      width: text(
+        'Width (in px or %) of single line of text or max-width of paragraph lines (width)',
+        '100%'
+      ),
     }),
   },
 };
 
-export const lines = () => html`
-  <bx-skeleton-text type="line"></bx-skeleton-text>
-  <bx-skeleton-text type="line"></bx-skeleton-text>
-  <bx-skeleton-text type="line"></bx-skeleton-text>
-`;
-
-lines.decorators = [
-  (story) => html` <div style="width:300px">${story()}</div> `,
-];
-
 export default {
-  title: 'Components/Skeleton text',
+  title: 'Components/Skeleton/Skeleton text',
   parameters: {
     ...storyDocs.parameters,
     percy: {
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss
index 2fd69cc80db..b008845e011 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.scss
@@ -1,25 +1,18 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/skeleton/skeleton-text';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/skeleton-styles';
 
 :host(#{$prefix}-skeleton-text) {
   display: block;
   width: 100%;
-}
-
-:host(#{$prefix}-skeleton-text[type='line']:nth-of-type(1n)) {
-  width: calc(100% - 73px);
-}
-
-:host(#{$prefix}-skeleton-text[type='line']:nth-of-type(2n)) {
-  width: calc(100% - 11px);
-}
 
-:host(#{$prefix}-skeleton-text[type='line']:nth-of-type(3n)) {
-  width: calc(100% - 43px);
+  .#{$prefix}--skeleton__text {
+    margin-top: 0;
+  }
 }
diff --git a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts
index 2278f24dc2a..a2f7b6ea57b 100644
--- a/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts
+++ b/packages/carbon-web-components/src/components/skeleton-text/skeleton-text.ts
@@ -7,40 +7,79 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { SKELETON_TEXT_TYPE } from './defs';
 import styles from './skeleton-text.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { SKELETON_TEXT_TYPE };
 
-const { prefix } = settings;
+function getRandomInt(min: number, max: number, n: number) {
+  const randoms = [0.973051493507435, 0.15334737213558558, 0.5671034553053769];
+  return Math.floor(randoms[n % 3] * (max - min + 1)) + min;
+}
 
 /**
  * Skeleton text.
  *
- * @element bx-skeleton-text
+ * @element cds-skeleton-text
  */
 @customElement(`${prefix}-skeleton-text`)
-class BXSkeletonText extends LitElement {
+class CDSSkeletonText extends LitElement {
   /**
    * The type of skeleton text.
    */
   @property({ reflect: true })
   type = SKELETON_TEXT_TYPE.REGULAR;
 
+  /**
+   * width (in px or %) of single line of text or max-width of paragraph lines
+   */
+  @property({ reflect: true })
+  width = '100%';
+
+  /**
+   * will generate multiple lines of text
+   */
+  @property({ type: Boolean, reflect: true })
+  paragraph = false;
+
+  /**
+   * the number of lines in a paragraph
+   */
+  @property({ type: Number, reflect: true })
+  lineCount = 3;
+
   render() {
-    const { type } = this;
+    const { paragraph, lineCount, type, width } = this;
     const classes = classMap({
       [`${prefix}--skeleton__text`]: true,
       [`${prefix}--skeleton__heading`]: type === SKELETON_TEXT_TYPE.HEADING,
     });
-    return html` <p class="${classes}"></p> `;
+    if (paragraph) {
+      const widthNum = parseInt(this.width, 10);
+      const widthPx = this.width.includes('px');
+      const widthPercent = this.width.includes('%');
+      const lines = Array.apply(null, Array(lineCount));
+      return html`${lines.map((_, i) => {
+        const randomWidth =
+          (widthPercent && `${getRandomInt(0, 75, i)}px`) ||
+          (widthPx && `${getRandomInt(0, widthNum, i)}px`);
+        const style =
+          (widthPercent && `width: calc(${width} - ${randomWidth})`) ||
+          (widthPx && `width: ${randomWidth}`) ||
+          '';
+        return html`<p class="${classes}" style="${style}"></p>`;
+      })}`;
+    }
+
+    return html`<p class="${classes}" style="width:${width}"></p>`;
   }
 
   static styles = styles;
 }
 
-export default BXSkeletonText;
+export default CDSSkeletonText;
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
index 5ebc9287798..710ab8e873a 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.mdx
@@ -3,10 +3,10 @@ import { Props } from '@storybook/addon-docs/blocks';
 # Skip to content
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/skip-to-content)
 
 The skip to content component works as an naivgation link that help users move
 around a page with keyboard.
@@ -27,9 +27,9 @@ import '@carbon/web-components/es/components/skip-to-content/index.js';
 ### HTML
 
 ```html
-<bx-skip-to-content href="#main-content"></bx-skip-to-content>
+<cds-skip-to-content href="#main-content"></cds-skip-to-content>
 ```
 
-## `<bx-skip-to-content>` attributes and properties
+## `<cds-skip-to-content>` attributes and properties
 
-<Props of="bx-skip-to-content" />
+<Props of="cds-skip-to-content" />
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss
index 2a1010a7327..3031775fa75 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.scss
@@ -1,11 +1,13 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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.
 //
 
-.bx--content {
+@use '@carbon/styles/scss/config' as *;
+
+.#{$prefix}--content {
   h2 {
     margin: 30px 0;
 
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
index 8469ab11594..be303ec768a 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content-story.ts
@@ -1,24 +1,25 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
 import './skip-to-content';
 import styles from './skip-to-content-story.scss';
 import storyDocs from './skip-to-content-story.mdx';
+import { prefix } from '../../globals/settings';
 
 export const Default = () => html`
   <style>
     ${styles}
   </style>
-  <div class="bx--content bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-lg-13">
+  <div class="${prefix}--content ${prefix}--grid">
+    <div class="${prefix}--row">
+      <div class="${prefix}--col-lg-13">
         <h2>Purpose and function</h2>
         <p>
           The shell is perhaps the most crucial piece of any UI built with
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss
index c8372d6d231..80cd10e0241 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.scss
@@ -1,13 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 'carbon-components/scss/components/ui-shell/header';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/ui-shell/header';
 
 :host(#{$prefix}-skip-to-content) {
   display: block;
diff --git a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts
index 26ed8df915b..9fb68b3cef7 100644
--- a/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts
+++ b/packages/carbon-web-components/src/components/skip-to-content/skip-to-content.ts
@@ -7,22 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './skip-to-content.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skip-to-content link.
  *
- * @element bx-skip-to-content
+ * @element cds-skip-to-content
  */
 @customElement(`${prefix}-skip-to-content`)
-class BXSkipToContent extends FocusMixin(LitElement) {
+class CDSSkipToContent extends FocusMixin(LitElement) {
   /**
    * The assistive text for the link,
    */
@@ -35,15 +34,6 @@ class BXSkipToContent extends FocusMixin(LitElement) {
   @property()
   href?: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'navigation');
@@ -54,7 +44,7 @@ class BXSkipToContent extends FocusMixin(LitElement) {
   render() {
     const { linkAssisstiveText } = this;
     return html`
-      <a class="${prefix}--skip-to-content" href="${ifNonNull(this.href)}"
+      <a class="${prefix}--skip-to-content" href="${ifDefined(this.href)}"
         ><slot>${linkAssisstiveText}</slot></a
       >
     `;
@@ -67,7 +57,11 @@ class BXSkipToContent extends FocusMixin(LitElement) {
     }
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSkipToContent;
+export default CDSSkipToContent;
diff --git a/packages/carbon-web-components/src/components/slider/defs.ts b/packages/carbon-web-components/src/components/slider/defs.ts
deleted file mode 100644
index 2272118113d..00000000000
--- a/packages/carbon-web-components/src/components/slider/defs.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020
- *
- * 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 { FORM_ELEMENT_COLOR_SCHEME as SLIDER_INPUT_COLOR_SCHEME } from '../../globals/shared-enums';
diff --git a/packages/carbon-web-components/src/components/slider/slider-input.ts b/packages/carbon-web-components/src/components/slider/slider-input.ts
index ec3a326e3bf..4d9b934484a 100644
--- a/packages/carbon-web-components/src/components/slider/slider-input.ts
+++ b/packages/carbon-web-components/src/components/slider/slider-input.ts
@@ -7,27 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
 import FocusMixin from '../../globals/mixins/focus';
-import { SLIDER_INPUT_COLOR_SCHEME } from './defs';
 import styles from './slider.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { SLIDER_INPUT_COLOR_SCHEME };
-
-const { prefix } = settings;
-
 /**
  * The `<input>` box for slider.
  *
- * @element bx-slider-input
- * @fires bx-slider-input-changed - The custom event fired after the value is changed by user gesture.
+ * @element cds-slider-input
+ * @fires cds-slider-input-changed - The custom event fired after the value is changed by user gesture.
  */
 @customElement(`${prefix}-slider-input`)
-class BXSliderInput extends FocusMixin(LitElement) {
+class CDSSliderInput extends FocusMixin(LitElement) {
   /**
    * The internal value of `max` property.
    */
@@ -48,7 +46,7 @@ class BXSliderInput extends FocusMixin(LitElement) {
    */
   private _handleChange({ target }: Event) {
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXSliderInput).eventChange, {
+      new CustomEvent((this.constructor as typeof CDSSliderInput).eventChange, {
         bubbles: true,
         composed: true,
         detail: {
@@ -63,7 +61,7 @@ class BXSliderInput extends FocusMixin(LitElement) {
    */
   private _handleInput({ target }: Event) {
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXSliderInput).eventChange, {
+      new CustomEvent((this.constructor as typeof CDSSliderInput).eventChange, {
         bubbles: true,
         composed: true,
         detail: {
@@ -75,16 +73,22 @@ class BXSliderInput extends FocusMixin(LitElement) {
   }
 
   /**
-   * The color scheme.
+   * `true` if the input should be disabled.
    */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = SLIDER_INPUT_COLOR_SCHEME.REGULAR;
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
 
   /**
-   * `true` if the check box should be disabled.
+   * true to specify if the control is invalid.
    */
   @property({ type: Boolean, reflect: true })
-  disabled = false;
+  invalid = false;
+
+  /**
+   * true to specify if the control should display warn icon and text.
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
 
   /**
    * The maximum value.
@@ -140,47 +144,57 @@ class BXSliderInput extends FocusMixin(LitElement) {
   @property({ type: Number })
   value!: number;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * true` if the input should be readonly.
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
 
   render() {
     const {
-      colorScheme,
       disabled,
       max,
       min,
+      readonly,
       step,
       type,
       value,
+      invalid,
+      warn,
       _handleChange: handleChange,
       _handleInput: handleInput,
     } = this;
-    // NOTE: Our React variant has an option to add `invalid` option here,
-    // but there doesn't seem a corresponding style to the thumb.
-    // Because of that, in addition to the mininum/maximum constraint enforced,
-    // the code here start without `invalid` styling option for now.
+
     const classes = classMap({
       [`${prefix}--text-input`]: true,
       [`${prefix}--slider-text-input`]: true,
-      [`${prefix}--text-input--${colorScheme}`]: colorScheme,
+      [`${prefix}--text-input--invalid`]: invalid,
+      [`${prefix}--slider-text-input--warn`]: warn,
     });
+
+    const invalidIcon = WarningFilled16({
+      class: `${prefix}--slider__invalid-icon`,
+    });
+
+    const warnIcon = WarningAltFilled16({
+      class: `${prefix}--slider__invalid-icon ${prefix}--slider__invalid-icon--warning`,
+    });
+
     return html`
       <input
         ?disabled="${disabled}"
-        type="${ifNonNull(type)}"
+        ?data-invalid="${invalid}"
+        type="${ifDefined(type)}"
         class="${classes}"
         max="${max}"
         min="${min}"
+        ?readonly="${ifDefined(readonly)}"
         step="${step}"
         .value="${value}"
         @change="${handleChange}"
         @input="${handleInput}" />
+      ${invalid ? html`${invalidIcon}` : null}
+      ${warn ? html`${warnIcon}` : null}
     `;
   }
 
@@ -198,7 +212,11 @@ class BXSliderInput extends FocusMixin(LitElement) {
     return `${prefix}-slider-input-changed`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXSliderInput;
+export default CDSSliderInput;
diff --git a/packages/carbon-web-components/src/components/slider/slider-skeleton.ts b/packages/carbon-web-components/src/components/slider/slider-skeleton.ts
index 14282962bf7..db7bfa9520a 100644
--- a/packages/carbon-web-components/src/components/slider/slider-skeleton.ts
+++ b/packages/carbon-web-components/src/components/slider/slider-skeleton.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './slider.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of slider.
  */
 @customElement(`${prefix}-slider-skeleton`)
-class BXSliderSkeleton extends LitElement {
+class CDSSliderSkeleton extends LitElement {
   render() {
     return html`
       <span class="${prefix}--label ${prefix}--skeleton"></span>
@@ -37,4 +35,4 @@ class BXSliderSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXSliderSkeleton;
+export default CDSSliderSkeleton;
diff --git a/packages/carbon-web-components/src/components/slider/slider-story.mdx b/packages/carbon-web-components/src/components/slider/slider-story.mdx
index 79dc1bd5a6b..bb4fcbba3a8 100644
--- a/packages/carbon-web-components/src/components/slider/slider-story.mdx
+++ b/packages/carbon-web-components/src/components/slider/slider-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Slider
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/slider)
 
 Sliders provide a visual indication of adjustable content, where the user can
 move the handle along a horizontal track to increase or decrease the value.
@@ -28,45 +28,44 @@ import '@carbon/web-components/es/components/slider/index.js';
 ### HTML
 
 ```html
-<bx-slider
+<cds-slider
   label-text="Slider"
   max="100"
   min="0"
   step="1"
-  value="50"
-></bx-slider>
+  value="50"></cds-slider>
 ```
 
 ## With input box
 
-To include an input box, place `<bx-slider-input>` within `<bx-slider>`.
+To include an input box, place `<cds-slider-input>` within `<cds-slider>`.
 
 ```html
-<bx-slider label-text="Slider" max="100" min="0" step="1" value="50">
-  <bx-slider-input aria-label="Slider value" type="number"></bx-slider-input>
-</bx-slider>
+<cds-slider label-text="Slider" max="100" min="0" step="1" value="50">
+  <cds-slider-input aria-label="Slider value" type="number"></cds-slider-input>
+</cds-slider>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-slider-skeleton>`.
+For the skeleton variation, utilize `<cds-slider-skeleton>`.
 
 ```html
-<bx-slider-skeleton></bx-slider-skeleton>
+<cds-slider-skeleton></cds-slider-skeleton>
 ```
 
-## `<bx-slider>` attributes, properties and events
+## `<cds-slider>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-slider disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-slider>` without `disabled` attribute).
+`<cds-slider disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-slider>` without `disabled` attribute).
 
-<Props of="bx-slider" />
+<Props of="cds-slider" />
 
-## `<bx-slider-input>` attributes, properties and events
+## `<cds-slider-input>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-slider-input light>`) and `false` means not setting the attribute (e.g.
-`<bx-slider-input>` without `light` attribute).
+`<cds-slider-input invalid>`) and `false` means not setting the attribute (e.g.
+`<cds-slider-input>` without `invalid` attribute).
 
-<Props of="bx-slider-input" />
+<Props of="cds-slider-input" />
diff --git a/packages/carbon-web-components/src/components/slider/slider-story.ts b/packages/carbon-web-components/src/components/slider/slider-story.ts
index 9238d2434dc..636955df9bb 100644
--- a/packages/carbon-web-components/src/components/slider/slider-story.ts
+++ b/packages/carbon-web-components/src/components/slider/slider-story.ts
@@ -1,81 +1,124 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, number, text } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import './slider';
 import './slider-input';
 import './slider-skeleton';
+import '../form/form-item';
+import '../layer';
 import storyDocs from './slider-story.mdx';
+import { prefix } from '../../globals/settings';
+import '../../../.storybook/templates/with-layer';
 
-export const Default = (args) => {
-  const { disabled, labelText, max, min, name, step, value, onChange } =
-    args?.['bx-slider'] || {};
+export const Default = () => {
   return html`
-    <bx-slider
-      ?disabled="${disabled}"
-      label-text="${ifNonNull(labelText)}"
-      max="${ifNonNull(max)}"
-      min="${ifNonNull(min)}"
-      name="${ifNonNull(name)}"
-      step="${ifNonNull(step)}"
-      value="${ifNonNull(value)}"
-      @bx-slider-changed="${onChange}"></bx-slider>
+    <cds-form-item>
+      <cds-slider
+        label-text="Slider Label"
+        max="100"
+        min="0"
+        step="1"
+        value="50">
+        <cds-slider-input
+          aria-label="Slider value"
+          type="number"></cds-slider-input>
+      </cds-slider>
+    </cds-form-item>
   `;
 };
 
-Default.storyName = 'Default';
+export const ControlledSlider = () => {
+  let value = 87;
+  function onClick() {
+    value = Math.round(Math.random() * 100);
+    const sliders = document.getElementsByTagName('cds-slider');
+    for (const slider of sliders) {
+      slider.setAttribute('value', `${value}`);
+    }
 
-Default.parameters = {
-  knobs: {
-    'bx-slider': () => ({
-      disabled: boolean('Disabled (disabled)', false),
-      labelText: text('Label text (label-text)', 'Slider'),
-      name: text('Name (name)', ''),
-      max: number('The maximum value (max)', 100),
-      min: number('The minimum value (min)', 0),
-      step: number('The step (step)', 1),
-      value: number('Value (value)', 50),
-      onAfterChange: action('bx-slider-changed'),
-    }),
-  },
+    const headers = document.getElementsByClassName('slider-headers');
+    for (const header of headers) {
+      header.innerHTML = `${value}`;
+    }
+  }
+  return html`
+    <button type="button" @click="${onClick}">randomize value</button>
+    <cds-form-item>
+      <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
+        <cds-slider-input
+          aria-label="Slider value"
+          type="number"></cds-slider-input>
+      </cds-slider>
+    </cds-form-item>
+    <h1 class="slider-headers">${value}</h1>
+  `;
 };
 
-export const withInputBox = (args) => {
-  const { disabled, labelText, max, min, name, step, value, onChange } =
-    args?.['bx-slider'] || {};
+export const ControlledSliderWithLayer = () => {
+  let value = 87;
+  function onClick() {
+    value = Math.round(Math.random() * 100);
+    const sliders = document.getElementsByTagName('cds-slider');
+    for (const slider of sliders) {
+      slider.setAttribute('value', `${value}`);
+    }
+
+    const headers = document.getElementsByClassName('slider-headers');
+    for (const header of headers) {
+      header.innerHTML = `${value}`;
+    }
+  }
+
   return html`
-    <bx-slider
-      ?disabled="${disabled}"
-      label-text="${labelText}"
-      max="${ifNonNull(max)}"
-      min="${ifNonNull(min)}"
-      name="${ifNonNull(name)}"
-      step="${ifNonNull(step)}"
-      value="${ifNonNull(value)}"
-      @bx-slider-changed="${onChange}">
-      <bx-slider-input
-        aria-label="Slider value"
-        type="number"></bx-slider-input>
-    </bx-slider>
+    <sb-template-layers>
+      <div>
+        <button type="button" @click="${onClick}">randomize value</button>
+        <cds-form-item>
+          <cds-slider max="100" min="0" step="1" value="${ifDefined(value)}">
+            <cds-slider-input
+              aria-label="Slider value"
+              type="number"></cds-slider-input>
+          </cds-slider>
+        </cds-form-item>
+        <h1 class="slider-headers">${value}</h1>
+      </div>
+    </sb-template-layers>
   `;
 };
 
-withInputBox.storyName = 'With input box';
-
-withInputBox.parameters = {
-  knobs: Default.parameters.knobs,
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-form-item>
+        <cds-slider
+          label-text="Slider label"
+          max="100"
+          min="0"
+          step="1"
+          value="50">
+          <cds-slider-input
+            aria-label="Slider value"
+            type="number"></cds-slider-input>
+        </cds-slider>
+      </cds-form-item>
+    </sb-template-layers>
+  `;
 };
 
-export const skeleton = () => html` <bx-slider-skeleton></bx-slider-skeleton> `;
+export const skeleton = () =>
+  html`
+    <cds-form-item><cds-slider-skeleton></cds-slider-skeleton></cds-form-item>
+  `;
 
 skeleton.parameters = {
   percy: {
@@ -83,6 +126,95 @@ skeleton.parameters = {
   },
 };
 
+export const Playground = (args) => {
+  const {
+    ariaLabelInput,
+    disabled,
+    hideTextInput,
+    invalid,
+    invalidText,
+    inputType,
+    labelText,
+    max,
+    min,
+    maxLabel,
+    minLabel,
+    name,
+    readonly,
+    required,
+    step,
+    stepMultiplier,
+    warn,
+    warnText,
+    value,
+    onChange,
+  } = args?.[`${prefix}-slider`] || {};
+  return html`
+    <cds-form-item>
+      <cds-slider
+        ?disabled="${disabled}"
+        ?hide-text-input="${hideTextInput}"
+        ?invalid="${invalid}"
+        invalid-text="${ifDefined(invalidText)}"
+        label-text="${labelText}"
+        max="${ifDefined(max)}"
+        min="${ifDefined(min)}"
+        max-label="${ifDefined(maxLabel)}"
+        min-label="${ifDefined(minLabel)}"
+        ?readonly="${ifDefined(readonly)}"
+        step="${ifDefined(step)}"
+        step-multiplier="${ifDefined(stepMultiplier)}"
+        ?warn="${warn}"
+        warn-text="${warnText}"
+        value="${ifDefined(value)}"
+        @cds-slider-changed="${onChange}">
+        ${!hideTextInput
+          ? html`<cds-slider-input
+              aria-label="${ifDefined(ariaLabelInput)}"
+              type="${ifDefined(inputType)}"
+              ?required="${ifDefined(required)}"
+              ?name="${ifDefined(name)}"></cds-slider-input>`
+          : null}
+      </cds-slider>
+    </cds-form-item>
+  `;
+};
+
+Playground.storyName = 'Playground';
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-slider`]: () => ({
+      ariaLabelInput: text('Aria label for input (aria-label-input)', ''),
+      disabled: boolean('Disabled (disabled)', false),
+      hideTextInput: boolean('Hide text input (hide-text-input)', false),
+      labelText: text(
+        'Label text (label-text)',
+        'Slider (must be an increment of 5)'
+      ),
+      inputType: text('Input type (type)', 'number'),
+      invalid: boolean('Invalid (invalid)', false),
+      invalidText: text(
+        'Invalid text (invalid-text)',
+        'Invalid message goes here'
+      ),
+      name: text('Name (name)', ''),
+      max: number('Maximum value (max)', 100),
+      min: number('Minimum value (min)', 0),
+      maxLabel: text('Maximum value label (max-label)', ''),
+      minLabel: text('Minimum value label (min-label)', ''),
+      readonly: boolean('Readonly (readonly)', false),
+      required: boolean('Required (required)', false),
+      step: number('Step (step)', 5),
+      stepMultiplier: number('Step multiplier (step-multiplier)', 5),
+      warn: boolean('Warn (warn)', false),
+      warnText: text('Warn text (warn-text)', 'Warning message goes here'),
+      value: number('Value (value)', 50),
+      onAfterChange: action(`${prefix}-slider-changed`),
+    }),
+  },
+};
+
 export default {
   title: 'Components/Slider',
   parameters: {
diff --git a/packages/carbon-web-components/src/components/slider/slider.scss b/packages/carbon-web-components/src/components/slider/slider.scss
index 687c769aee3..105ec5b1f92 100644
--- a/packages/carbon-web-components/src/components/slider/slider.scss
+++ b/packages/carbon-web-components/src/components/slider/slider.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,10 +7,14 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/slider/slider';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/slider';
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-slider) {
   outline: none;
+  @include emit-layout-tokens();
 
   .#{$prefix}--slider {
     transform: rotate(0) #{'/*rtl:rotate(180deg)*/'};
@@ -27,10 +31,19 @@ $css--plex: true !default;
   .#{$prefix}--slider__thumb:focus
     ~ .#{$prefix}-ce--slider__filled-track-container
     .#{$prefix}--slider__filled-track {
-    background-color: $interactive-04;
+    // TODO: audit
+    background-color: $interactive;
   }
 }
 
 :host(#{$prefix}-slider-input) {
-  outline: none;
+  input {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-slider-input[readonly]) {
+  input {
+    background-color: transparent;
+  }
 }
diff --git a/packages/carbon-web-components/src/components/slider/slider.ts b/packages/carbon-web-components/src/components/slider/slider.ts
index 18403d87ab5..07f0e360b90 100644
--- a/packages/carbon-web-components/src/components/slider/slider.ts
+++ b/packages/carbon-web-components/src/components/slider/slider.ts
@@ -7,21 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import throttle from 'lodash-es/throttle';
-import { html, property, query, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import FormMixin from '../../globals/mixins/form';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import ifNonEmpty from '../../globals/directives/if-non-empty';
-import BXSliderInput from './slider-input';
+import CDSSliderInput from './slider-input';
 import styles from './slider.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 interface Cancelable {
   cancel(): void;
 }
@@ -43,14 +41,14 @@ const THUMB_DIRECTION = {
 /**
  * Slider.
  *
- * @element bx-slider
+ * @element cds-slider
  * @slot label-text - The label text.
  * @slot max-text - The text for maximum value.
  * @slot min-text - The text for minimum value.
- * @fires bx-slider-changed - The custom event fired after the value is changed by user gesture.
+ * @fires cds-slider-changed - The custom event fired after the value is changed by user gesture.
  */
 @customElement(`${prefix}-slider`)
-class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
+class CDSSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   /**
    * The internal value of `max` property.
    */
@@ -67,9 +65,9 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   private _step = '1';
 
   /**
-   * The internal value of `stepRatio` property.
+   * The internal value of `stepMultiplier` property.
    */
-  private _stepRatio = '4';
+  private _stepMultiplier = '4';
 
   /**
    * The handle for the throttled listener of `pointermove` event.
@@ -89,7 +87,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
    */
   private get _rate() {
     const { max, min, value } = this;
-    // Copes with out-of-range value coming programmatically or from `<bx-slider-input>`
+    // Copes with out-of-range value coming programmatically or from `<cds-slider-input>`
     return (
       (Math.min(Number(max), Math.max(Number(min), value)) - Number(min)) /
       (Number(max) - Number(min))
@@ -144,15 +142,16 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
           max: rawMax,
           min: rawMin,
           step: rawStep,
-          stepRatio: rawStepRatio,
+          stepMultiplier: rawstepMultiplier,
           value,
         } = this;
         const max = Number(rawMax);
         const min = Number(rawMin);
         const step = Number(rawStep);
-        const stepRatio = Number(rawStepRatio);
+        const stepMultiplier = Number(rawstepMultiplier);
         const diff =
-          (!shiftKey ? step : (max - min) / stepRatio) * THUMB_DIRECTION[key];
+          (!shiftKey ? step : (max - min) / stepMultiplier) *
+          THUMB_DIRECTION[key];
         const stepCount = (value + diff) / step;
         // Snaps to next
         this.value = Math.min(
@@ -163,7 +162,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
           )
         );
         this.dispatchEvent(
-          new CustomEvent((this.constructor as typeof BXSlider).eventChange, {
+          new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {
             bubbles: true,
             composed: true,
             detail: {
@@ -202,7 +201,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
           ? trackLeft + trackWidth - thumbPosition
           : thumbPosition - trackLeft) / trackWidth;
       this.dispatchEvent(
-        new CustomEvent((this.constructor as typeof BXSlider).eventChange, {
+        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {
           bubbles: true,
           composed: true,
           detail: {
@@ -247,7 +246,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
           ? trackLeft + trackWidth - thumbPosition
           : thumbPosition - trackLeft) / trackWidth;
       this.dispatchEvent(
-        new CustomEvent((this.constructor as typeof BXSlider).eventChange, {
+        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {
           bubbles: true,
           composed: true,
           detail: {
@@ -265,7 +264,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   private _endDrag = () => {
     if (this._dragging) {
       this.dispatchEvent(
-        new CustomEvent((this.constructor as typeof BXSlider).eventChange, {
+        new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {
           bubbles: true,
           composed: true,
           detail: {
@@ -287,7 +286,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
     const { intermediate, value } = detail;
     this.value = value;
     this.dispatchEvent(
-      new CustomEvent((this.constructor as typeof BXSlider).eventChange, {
+      new CustomEvent((this.constructor as typeof CDSSlider).eventChange, {
         bubbles: true,
         composed: true,
         detail: {
@@ -305,18 +304,16 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   disabled = false;
 
   /**
-   * The formatter for the text for maximum value.
-   * Should be changed upon the locale the UI is rendered with.
+   * 	true to specify if the control is required.
    */
-  @property({ attribute: false })
-  formatMaxText = ({ max }: { max: string }) => max;
+  @property({ type: Boolean, reflect: true })
+  required = false;
 
   /**
-   * The formatter for the text for minimum value.
-   * Should be changed upon the locale the UI is rendered with.
+   * 	Whether the slider should be read-only
    */
-  @property({ attribute: false })
-  formatMinText = ({ min }: { min: string }) => min;
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
 
   /**
    * The label text.
@@ -324,6 +321,34 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   @property({ attribute: 'label-text' })
   labelText = '';
 
+  /**
+   * The label associated with the maximum value.
+   */
+  @property({ attribute: 'max-label', reflect: true })
+  maxLabel = '';
+
+  /**
+   * The label associated with the minimum value.
+   */
+  @property({ attribute: 'min-label', reflect: true })
+  minLabel = '';
+
+  /**
+   * The formatter for the text for maximum value.
+   * Should be changed upon the locale the UI is rendered with.
+   */
+  @property({ attribute: false })
+  formatMaxText = (max: string, maxLabel: string | undefined) =>
+    `${max}${maxLabel}`;
+
+  /**
+   * The formatter for the text for min/max value.
+   * Should be changed upon the locale the UI is rendered with.
+   */
+  @property({ attribute: false })
+  formatMinText = (min: string, minLabel: string | undefined) =>
+    `${min}${minLabel}`;
+
   /**
    * The maximum value.
    */
@@ -358,6 +383,30 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   @property()
   name!: string;
 
+  /**
+   * true to specify if the control is invalid.
+   */
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  @property({ attribute: 'invalid-text' })
+  invalidText = '';
+
+  /**
+   * true to specify if the control should display warn icon and text.
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  @property({ attribute: 'warn-text' })
+  warnText = '';
+
   /**
    * The snapping step of the value.
    */
@@ -374,32 +423,43 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
 
   /**
    * A value determining how much the value should increase/decrease by Shift+arrow keys,
-   * which will be `(max - min) / stepRatio`.
+   * which will be `(max - min) / stepMultiplier`.
    */
-  @property({ type: Number, reflect: true, attribute: 'step-ratio' })
-  get stepRatio() {
-    return this._stepRatio.toString();
+  @property({ type: Number, reflect: true, attribute: 'step-multiplier' })
+  get stepMultiplier() {
+    return this._stepMultiplier.toString();
   }
 
-  set stepRatio(value) {
-    const { stepRatio: oldStepRatio } = this;
-    this._stepRatio = value;
-    this.requestUpdate('stepRatio', oldStepRatio);
+  set stepMultiplier(value) {
+    const { stepMultiplier: oldstepMultiplier } = this;
+    this._stepMultiplier = value;
+    this.requestUpdate('stepMultiplier', oldstepMultiplier);
   }
 
   /**
    * The value.
    */
   @property({ type: Number })
-  value = 50;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
+  value;
+
+  /**
+   * is slide input valid
+   */
+  @property({ type: Boolean })
+  isValid;
+
+  _getInputValidity(input) {
+    if (this.invalid) {
+      return false;
+    }
+
+    if (
+      input?.valueAsNumber > Number(this.max) ||
+      input?.valueAsNumber < Number(this.min)
+    ) {
+      return false;
+    }
+    return true;
   }
 
   connectedCallback() {
@@ -422,8 +482,8 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
 
   shouldUpdate(changedProperties) {
     const input = this.querySelector(
-      (this.constructor as typeof BXSlider).selectorInput
-    ) as BXSliderInput;
+      (this.constructor as typeof CDSSlider).selectorInput
+    ) as CDSSliderInput;
     if (changedProperties.has('disabled')) {
       if (input) {
         input.disabled = this.disabled;
@@ -432,12 +492,43 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
         this._dragging = false;
       }
     }
+    if (changedProperties.has('readonly')) {
+      if (input) {
+        input.readonly = this.readonly;
+      }
+      if (this.readonly) {
+        this._dragging = false;
+      }
+    }
     if (input) {
       ['max', 'min', 'step', 'value'].forEach((name) => {
         if (changedProperties.has(name)) {
           input[name] = this[name];
         }
       });
+
+      if (
+        changedProperties.has('value') ||
+        changedProperties.has('invalid') ||
+        changedProperties.has('warn') ||
+        changedProperties.has('readonly')
+      ) {
+        const innerInput = input?.shadowRoot?.querySelector('input');
+
+        this.isValid = this._getInputValidity(innerInput);
+
+        if (!this.readonly && !this.isValid) {
+          input.invalid = true;
+        } else {
+          input.invalid = false;
+        }
+
+        if (!this.readonly && !this.invalid && this.warn && this.isValid) {
+          input.warn = true;
+        } else {
+          input.warn = false;
+        }
+      }
     }
     return true;
   }
@@ -450,7 +541,13 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
       labelText,
       max,
       min,
-      name,
+      maxLabel,
+      minLabel,
+      readonly,
+      invalidText,
+      isValid,
+      warn,
+      warnText,
       value,
       _rate: rate,
       _handleClickLabel: handleClickLabel,
@@ -459,6 +556,7 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
       _startDrag: startDrag,
       _endDrag: endDrag,
     } = this;
+
     const labelClasses = classMap({
       [`${prefix}--label`]: true,
       [`${prefix}--label--disabled`]: disabled,
@@ -466,14 +564,16 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
     const sliderClasses = classMap({
       [`${prefix}--slider`]: true,
       [`${prefix}--slider--disabled`]: disabled,
+      [`${prefix}--slider--readonly`]: readonly,
     });
+
     return html`
       <label class="${labelClasses}" @click="${handleClickLabel}">
         <slot name="label-text">${labelText}</slot>
       </label>
       <div class="${prefix}--slider-container">
         <span class="${prefix}--slider__range-label">
-          <slot name="min-text">${formatMinText({ min })}</slot>
+          <slot name="min-text">${formatMinText(min, minLabel)}</slot>
         </span>
         <div
           @keydown="${handleKeydown}"
@@ -481,12 +581,13 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
           @pointerup="${endDrag}"
           @pointerleave="${endDrag}"
           class="${sliderClasses}"
+          tabindex="-1"
           role="presentation">
           <div
             id="thumb"
             class="${prefix}--slider__thumb"
             role="slider"
-            tabindex="0"
+            tabindex="${!readonly ? 0 : -1}"
             aria-valuemax="${max}"
             aria-valuemin="${min}"
             aria-valuenow="${value}"
@@ -498,19 +599,27 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
               class="${prefix}--slider__filled-track"
               style="transform: translate(0%, -50%) scaleX(${rate})"></div>
           </div>
-          <input
-            class="${prefix}--slider__input"
-            type="hidden"
-            name="${ifNonEmpty(name)}"
-            .value="${value}"
-            min="${ifNonEmpty(min)}"
-            max="${ifNonEmpty(max)}" />
         </div>
         <span class="${prefix}--slider__range-label">
-          <slot name="max-text">${formatMaxText({ max })}</slot>
+          <slot name="max-text">${formatMaxText(max, maxLabel)}</slot>
         </span>
         <slot></slot>
       </div>
+
+      ${!readonly && !isValid
+        ? html`
+            <div
+              class="${prefix}--slider__validation-msg ${prefix}--slider__validation-msg--invalid ${prefix}--form-requirement">
+              ${invalidText}
+            </div>
+          `
+        : null}
+      ${!readonly && warn && isValid
+        ? html`<div
+            class="${prefix}--slider__validation-msg ${prefix}--form-requirement">
+            ${warnText}
+          </div>`
+        : null}
     `;
   }
 
@@ -529,13 +638,17 @@ class BXSlider extends HostListenerMixin(FormMixin(FocusMixin(LitElement))) {
   }
 
   /**
-   * The name of the custom event fired after the value is changed in `<bx-slider-input>` by user gesture.
+   * The name of the custom event fired after the value is changed in `<cds-slider-input>` by user gesture.
    */
   static get eventChangeInput() {
     return `${prefix}-slider-input-changed`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXSlider;
+export default CDSSlider;
diff --git a/packages/carbon-web-components/src/components/slug/defs.ts b/packages/carbon-web-components/src/components/slug/defs.ts
new file mode 100644
index 00000000000..253f0a33dcf
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/defs.ts
@@ -0,0 +1,83 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022, 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.
+ */
+
+/**
+ * Slug size.
+ */
+export enum SLUG_SIZE {
+  /**
+   * Mini size.
+   */
+  MINI = 'mini',
+
+  /**
+   * Extra extra small size.
+   */
+  EXTRA_EXTRA_SMALL = '2xs',
+
+  /**
+   * Extra small size.
+   */
+  EXTRA_SMALL = 'xs',
+
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+
+  /**
+   * Extra large size.
+   */
+  EXTRA_LARGE = 'xl',
+}
+
+/**
+ * Slug kind.
+ */
+export enum SLUG_KIND {
+  /**
+   * Default kind.
+   */
+  DEFAULT = '',
+
+  /**
+   * Hollow kind.
+   */
+  HOLLOW = 'hollow',
+
+  /**
+   * Inline kind.
+   */
+  INLINE = 'inline',
+}
+
+/**
+ * Slug dot type.
+ */
+export enum SLUG_DOT_TYPE {
+  /**
+   * Default dot type.
+   */
+  DEFAULT = '',
+
+  /**
+   * Hollow dot type.
+   */
+  HOLLOW = 'hollow',
+}
diff --git a/packages/carbon-web-components/src/components/slug/index.ts b/packages/carbon-web-components/src/components/slug/index.ts
new file mode 100644
index 00000000000..ab6a8f7b0e1
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 './slug';
+import './slug-action-button';
diff --git a/packages/carbon-web-components/src/components/slug/slug-action-button.ts b/packages/carbon-web-components/src/components/slug/slug-action-button.ts
new file mode 100644
index 00000000000..f2507f2b0d3
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug-action-button.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSButton from '../button/button';
+import styles from './slug.scss';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+
+/**
+ * Slug action button.
+ *
+ * @element cds-slug-action-button
+ */
+@customElement(`${prefix}-slug-action-button`)
+export default class CDSSlugActionButton extends CDSButton {
+  /**
+   * The shadow slot this slug-action should be in.
+   */
+  @property({ reflect: true })
+  slot = 'actions';
+
+  static styles = styles;
+}
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.scss b/packages/carbon-web-components/src/components/slug/slug-story.scss
new file mode 100644
index 00000000000..4e12ed6cd6a
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug-story.scss
@@ -0,0 +1,48 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+
+.slug-container {
+  display: flex;
+  margin-bottom: $spacing-12;
+  align-items: flex-start;
+
+  > * {
+    margin-left: $spacing-07;
+  }
+}
+
+p {
+  @include type-style('body-compact-01');
+}
+
+.bold {
+  font-weight: 600;
+}
+
+.secondary {
+  color: $text-secondary;
+}
+
+h1 {
+  margin-bottom: $spacing-05;
+}
+
+hr {
+  border: 0;
+  height: 1px;
+  background: $border-subtle;
+  margin-top: $spacing-07;
+  margin-bottom: $spacing-07;
+}
diff --git a/packages/carbon-web-components/src/components/slug/slug-story.ts b/packages/carbon-web-components/src/components/slug/slug-story.ts
new file mode 100644
index 00000000000..00d3731cebf
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug-story.ts
@@ -0,0 +1,248 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { select } from '@storybook/addon-knobs';
+import View16 from '@carbon/icons/lib/view/16';
+import FolderOpen16 from '@carbon/icons/lib/folder--open/16';
+import Folders16 from '@carbon/icons/lib/folders/16';
+
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
+import './index';
+import '../icon-button/index';
+import styles from './slug-story.scss';
+
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+import { SLUG_SIZE } from './defs';
+
+const tooltipAlignments = {
+  [`top`]: POPOVER_ALIGNMENT.TOP,
+  [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+  [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+  [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+  [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+  [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+  [`left`]: POPOVER_ALIGNMENT.LEFT,
+  [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+  [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+  [`right`]: POPOVER_ALIGNMENT.RIGHT,
+  [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+  [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
+};
+
+const sizes = {
+  [`Mini size (${SLUG_SIZE.MINI})`]: SLUG_SIZE.MINI,
+  [`2XS size (${SLUG_SIZE.EXTRA_EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_EXTRA_SMALL,
+  [`XS size (${SLUG_SIZE.EXTRA_SMALL})`]: SLUG_SIZE.EXTRA_SMALL,
+  [`Small size (${SLUG_SIZE.SMALL})`]: SLUG_SIZE.SMALL,
+  [`Medium size (${SLUG_SIZE.MEDIUM})`]: SLUG_SIZE.MEDIUM,
+  [`Large size (${SLUG_SIZE.LARGE})`]: SLUG_SIZE.LARGE,
+  [`XL size (${SLUG_SIZE.EXTRA_LARGE})`]: SLUG_SIZE.EXTRA_LARGE,
+};
+
+const content = html`
+  <div slot="body-text">
+    <p class="secondary">AI Explained</p>
+    <h1>84%</h1>
+    <p class="secondary bold">Confidence score</p>
+    <p class="secondary">
+      Lorem ipsum dolor sit amet, di os consectetur adipiscing elit, sed do
+      eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.
+    </p>
+    <hr />
+    <p class="secondary">Model type</p>
+    <p class="bold">Foundation model</p>
+  </div>
+`;
+
+const hollowContent = html`<span slot="body-text"
+  >AI was used to generate this content</span
+>`;
+
+const actions = html`
+  <cds-icon-button kind="ghost" slot="actions" size="lg">
+    ${View16({ slot: 'icon' })}
+    <span slot="tooltip-content"> View </span>
+  </cds-icon-button>
+  <cds-icon-button kind="ghost" slot="actions" size="lg">
+    ${FolderOpen16({ slot: 'icon' })}
+    <span slot="tooltip-content"> Open folder</span>
+  </cds-icon-button>
+  <cds-icon-button kind="ghost" slot="actions" size="lg">
+    ${Folders16({ slot: 'icon' })}
+    <span slot="tooltip-content"> Folders </span>
+  </cds-icon-button>
+  <cds-slug-action-button>View Literature</cds-slug-action-button>
+`;
+
+export const Default = () => {
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <div class="slug-container">
+      <cds-slug size="mini" alignment="bottom-left"> ${content} </cds-slug>
+      <cds-slug size="2xs" alignment="bottom-left"> ${content} </cds-slug>
+      <cds-slug size="xs" alignment="bottom-left"> ${content} </cds-slug>
+      <cds-slug size="sm" alignment="bottom-left"> ${content} </cds-slug>
+      <cds-slug size="md" alignment="bottom-left"> ${content} </cds-slug>
+      <cds-slug size="lg" alignment="bottom-left"> ${content} </cds-slug>
+      <cds-slug size="xl" alignment="bottom-left"> ${content} </cds-slug>
+    </div>
+    <div class="slug-container">
+      <cds-slug size="mini" kind="hollow" alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+      <cds-slug size="2xs" kind="hollow" alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+      <cds-slug size="xs" kind="hollow" alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+    </div>
+    <div class="slug-container">
+      <cds-slug size="sm" kind="inline" alignment="bottom-left">
+        ${content}
+      </cds-slug>
+      <cds-slug size="md" kind="inline" alignment="bottom-left">
+        ${content}
+      </cds-slug>
+      <cds-slug size="lg" kind="inline" alignment="bottom-left">
+        ${content}
+      </cds-slug>
+    </div>
+    <div class="slug-container">
+      <cds-slug
+        size="sm"
+        kind="inline"
+        ai-text-label="Text goes here"
+        alignment="bottom-left">
+        ${content}
+      </cds-slug>
+      <cds-slug
+        size="md"
+        kind="inline"
+        ai-text-label="Text goes here"
+        alignment="bottom-left">
+        ${content}
+      </cds-slug>
+      <cds-slug
+        size="lg"
+        kind="inline"
+        ai-text-label="Text goes here"
+        alignment="bottom-left">
+        ${content}
+      </cds-slug>
+    </div>
+    <div class="slug-container">
+      <cds-slug
+        size="sm"
+        kind="inline"
+        dot-type="hollow"
+        alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+      <cds-slug
+        size="md"
+        kind="inline"
+        dot-type="hollow"
+        alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+      <cds-slug
+        size="lg"
+        kind="inline"
+        dot-type="hollow"
+        alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+    </div>
+    <div class="slug-container">
+      <cds-slug
+        size="sm"
+        kind="inline"
+        dot-type="hollow"
+        ai-text-label="Text goes here"
+        alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+      <cds-slug
+        size="md"
+        kind="inline"
+        dot-type="hollow"
+        ai-text-label="Text goes here"
+        alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+      <cds-slug
+        size="lg"
+        kind="inline"
+        dot-type="hollow"
+        ai-text-label="Text goes here"
+        alignment="bottom-left">
+        ${hollowContent}
+      </cds-slug>
+    </div>
+  `;
+};
+
+export const Playground = (args) => {
+  const { alignment, aiTextLabel, size, kind, dotType } =
+    args?.[`${prefix}-slug`] ?? {};
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <div class="slug-container">
+      <cds-slug
+        alignment="${ifDefined(alignment)}"
+        size="${size}"
+        kind="${kind}"
+        dot-type="${dotType}"
+        ai-text-label="${aiTextLabel}">
+        ${kind === 'hollow' || dotType === 'hollow' ? hollowContent : content}
+        ${kind === 'hollow' || dotType === 'hollow' ? '' : actions}
+      </cds-slug>
+    </div>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-slug`]: () => {
+      const kind = select(
+        'Kind (kind)',
+        ['default', 'hollow', 'inline'],
+        'default'
+      );
+      const dotType =
+        kind === 'inline'
+          ? select('DotType (dotType)', ['default', 'hollow'], 'default')
+          : ``;
+
+      return {
+        alignment: select(
+          'Slug alignment to trigger button (alignment)',
+          tooltipAlignments,
+          POPOVER_ALIGNMENT.BOTTOM
+        ),
+        size: select('Slug size (size)', sizes, SLUG_SIZE.MEDIUM),
+        kind,
+        dotType,
+        aiTextLabel: textNullable('Ai text label', ''),
+      };
+    },
+  },
+};
+
+export default {
+  title: 'Experimental/Slug',
+};
diff --git a/packages/carbon-web-components/src/components/slug/slug.scss b/packages/carbon-web-components/src/components/slug/slug.scss
new file mode 100644
index 00000000000..05d3e2b45bc
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug.scss
@@ -0,0 +1,129 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/components/slug/index' as *;
+@use '../toggle-tip/toggletip.scss';
+
+:host(#{$prefix}-slug) {
+  @extend .#{$prefix}--slug;
+
+  .#{$prefix}--slug__text {
+    @include font-family('sans');
+  }
+}
+
+:host(#{$prefix}-slug[enabled]) {
+  .#{$prefix}--popover-content {
+    border: 1px solid $border-subtle;
+    border-radius: $spacing-05;
+    // 84px seems to make this fully opaque?
+    backdrop-filter: blur(25px);
+    background: linear-gradient(
+        0deg,
+        $slug-callout-aura-start 0%,
+        $slug-callout-aura-end 33%,
+        transparent 100%
+      ),
+      linear-gradient(
+          180deg,
+          $slug-callout-gradient-top 0%,
+          $slug-callout-gradient-bottom 100%
+        )
+        rgba(0, 0, 0, 0.01);
+    // box-shadow seems to match the spec better
+    // than the same values plugged into `drop-shadow`
+    // filter: drop-shadow(-45px 45px 100px rgba(0, 0, 0, 0.2));
+    box-shadow: -45px 45px 100px rgba(0, 0, 0, 0.2);
+    color: $text-primary;
+    min-inline-size: to-rem(280px);
+  }
+
+  .#{$prefix}--toggletip-actions {
+    position: absolute;
+    justify-content: flex-end;
+    background: $layer-accent;
+    border-end-end-radius: to-rem(15px);
+    border-end-start-radius: to-rem(15px);
+    column-gap: 0;
+    inline-size: 100%;
+    inset-block-end: 0;
+    inset-inline-end: 0;
+  }
+
+  .#{$prefix}--toggletip-content {
+    // This sets the max size to the size of the action bar with 3 buttons
+    max-inline-size: to-rem(334px);
+    padding-block-end: $spacing-11;
+    padding-block-start: $spacing-07;
+    padding-inline: $spacing-07;
+
+    --cds-button-focus-color: var(--cds-focus);
+  }
+}
+
+:host(#{$prefix}-slug-action-button) {
+  .#{$prefix}--btn--primary {
+    order: 1;
+    border-end-end-radius: 1rem;
+  }
+}
+
+:host(
+    #{$prefix}-slug[kind='inline']:not([size='md']):not([size='lg']):not(
+        [size='xl']
+      )
+  ) {
+  .#{$prefix}--slug__button {
+    font-size: $spacing-04;
+  }
+}
+
+:host(#{$prefix}-slug[kind='inline'][size='lg']),
+:host(#{$prefix}-slug[kind='inline'][size='xl']) {
+  .#{$prefix}--slug__button {
+    font-size: $spacing-05;
+  }
+}
+
+:host(#{$prefix}-slug[dot-type='hollow']),
+:host(#{$prefix}-slug[kind='hollow']) {
+  @extend .#{$prefix}--slug--hollow;
+
+  .#{$prefix}--slug__button--hollow:hover {
+    border-color: $slug-hollow-hover;
+    color: $slug-hollow-hover;
+  }
+
+  .#{$prefix}--toggletip-content {
+    row-gap: 0;
+  }
+
+  .#{$prefix}--slug__button--lg .#{$prefix}--slug__text::before {
+    block-size: $spacing-03;
+    inline-size: $spacing-03;
+  }
+}
+
+:host(#{$prefix}-slug:not([kind='inline'])) {
+  .#{$prefix}--slug__button:focus {
+    border: $background;
+  }
+}
+
+:host(#{$prefix}-slug:not([kind='hollow']):not([dot-type='hollow'])) {
+  .#{$prefix}--popover-caret {
+    background: $border-subtle;
+  }
+}
diff --git a/packages/carbon-web-components/src/components/slug/slug.ts b/packages/carbon-web-components/src/components/slug/slug.ts
new file mode 100644
index 00000000000..6d0bec8c5c4
--- /dev/null
+++ b/packages/carbon-web-components/src/components/slug/slug.ts
@@ -0,0 +1,101 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSToggleTip from '../toggle-tip/toggletip';
+import styles from './slug.scss';
+import { SLUG_SIZE, SLUG_KIND, SLUG_DOT_TYPE } from './defs';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+
+/**
+ * Basic slug.
+ *
+ * @element cds-slug
+ */
+@customElement(`${prefix}-slug`)
+export default class CDSSlug extends CDSToggleTip {
+  /**
+   * Slug size should be mini, 2xs, xs, sm, md, lg, xl.
+   */
+  @property({ reflect: true })
+  size = SLUG_SIZE.MEDIUM;
+
+  /**
+   * Specify the type of Slug, from the following list of types: (default, hollow, inline)
+   */
+  @property({ reflect: true })
+  kind = SLUG_KIND.DEFAULT;
+
+  /**
+   * Specify the type of dot that should be rendered in front of the inline variant: (default, hollow)
+   */
+  @property({ reflect: true, attribute: 'dot-type' })
+  dotType = SLUG_DOT_TYPE.DEFAULT;
+
+  /**
+   * Specify the correct translation of the AI text
+   */
+  @property({ attribute: 'ai-text' })
+  aiText = 'AI';
+
+  /**
+   * Specify additional text to be rendered next to the AI label in the inline variant
+   */
+  @property({ attribute: 'ai-text-label' })
+  aiTextLabel = '';
+
+  protected _renderToggleTipLabel = () => {
+    return html``;
+  };
+
+  protected _renderTooltipButton = () => {
+    const { size, kind, aiText, aiTextLabel } = this;
+    const classes = classMap({
+      [`${prefix}--toggletip-button`]: true,
+      [`${prefix}--slug__button`]: true,
+      [`${prefix}--slug__button--${size}`]: size,
+      [`${prefix}--slug__button--${kind}`]: kind,
+      [`${prefix}--slug__button--inline-with-content`]:
+        kind === SLUG_KIND.INLINE && aiTextLabel,
+    });
+    return html`
+      <button
+        aria-controls="${this.id}"
+        @click=${this._handleClick}
+        class=${classes}
+        aria-label="Show information">
+        <span class="${prefix}--slug__text">${aiText}</span>
+        ${aiTextLabel && kind === SLUG_KIND.INLINE
+          ? html`
+              <span class="${prefix}--slug__additional-text">
+                ${aiTextLabel}
+              </span>
+            `
+          : ``}
+      </button>
+    `;
+  };
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (
+      this.kind !== SLUG_KIND.HOLLOW &&
+      this.dotType !== SLUG_DOT_TYPE.HOLLOW
+    ) {
+      this.setAttribute('enabled', '');
+    } else {
+      this.removeAttribute('enabled');
+    }
+  }
+
+  static styles = styles;
+}
diff --git a/packages/carbon-web-components/src/components/stack/defs.ts b/packages/carbon-web-components/src/components/stack/defs.ts
new file mode 100644
index 00000000000..f1b0d64fe14
--- /dev/null
+++ b/packages/carbon-web-components/src/components/stack/defs.ts
@@ -0,0 +1,36 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { spacing } from '@carbon/layout';
+
+/**
+ * Stack orientation
+ */
+export enum STACK_ORIENTATION {
+  /**
+   * Default vertical orientation.
+   */
+  VERTICAL = 'vertical',
+
+  /**
+   * Horizontal.
+   */
+  HORIZONTAL = 'horizontal',
+}
+
+/**
+ * The steps in the spacing scale
+ *
+ * @type {Array<number>}
+ */
+export const SPACING_STEPS = Array.from({ length: spacing.length - 1 }).map(
+  (_, step) => {
+    return step + 1;
+  }
+);
diff --git a/packages/carbon-web-components/src/components/stack/index.ts b/packages/carbon-web-components/src/components/stack/index.ts
new file mode 100644
index 00000000000..50e15138803
--- /dev/null
+++ b/packages/carbon-web-components/src/components/stack/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 './stack';
diff --git a/packages/carbon-web-components/src/components/stack/stack-story.mdx b/packages/carbon-web-components/src/components/stack/stack-story.mdx
new file mode 100644
index 00000000000..86dfa58f69f
--- /dev/null
+++ b/packages/carbon-web-components/src/components/stack/stack-story.mdx
@@ -0,0 +1,66 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Stack
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/stack)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/stack)
+
+The Stack component is a useful layout utility in a component-based model. This
+allows components to not use margin and instead delegate the responsibility of
+positioning and layout to parent components.
+
+In the case of the Stack component, it uses the spacing scale from the Design
+Language in order to determine how much space there should be between items
+rendered by the Stack component. It also supports a custom gap prop which will
+allow a user to provide a custom value for the gap of the layout.
+
+This component supports both horizontal and vertical orientations.
+
+Inspiration for this component:
+
+- https://paste.twilio.design/layout/stack/
+- https://github.com/Workday/canvas-kit/blob/f2f599654876700f483a1d8c5de82a41315c76f1/modules/labs-react/layout/lib/Stack.tsx
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/stack/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['stack'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-stack gap="6" orientation="vertical">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</cds-stack>
+```
+
+## Passing in custom gap value
+
+You can set a custom gap value by passing in the custom value to the `gap`
+attribute AND setting the `custom-gap-value` attribute to true.
+
+```html
+<cds-stack gap="2rem" orientation="vertical" custom-gap-value>
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</cds-stack>
+```
+
+## `<cds-stack>` attributes, properties and events
+
+<Props of="cds-stack" />
diff --git a/packages/carbon-web-components/src/components/stack/stack-story.ts b/packages/carbon-web-components/src/components/stack/stack-story.ts
new file mode 100644
index 00000000000..198cbd3574b
--- /dev/null
+++ b/packages/carbon-web-components/src/components/stack/stack-story.ts
@@ -0,0 +1,69 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { select } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
+import storyDocs from './stack-story.mdx';
+import { STACK_ORIENTATION } from './stack';
+import './index.ts';
+
+const orientationOptions = {
+  ['Vertical']: STACK_ORIENTATION.VERTICAL,
+  ['Horizontal']: STACK_ORIENTATION.HORIZONTAL,
+};
+
+export const Default = () => {
+  return html` <cds-stack gap="6">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+  </cds-stack>`;
+};
+
+export const Horizontal = () => {
+  return html` <cds-stack gap="6" orientation="horizontal">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+  </cds-stack>`;
+};
+
+export const Playground = (args) => {
+  const { gap, orientation } = args?.['cds-stack'] ?? {};
+  return html` <cds-stack gap="${gap}" orientation="${orientation}">
+    <div>Item 1</div>
+    <div>Item 2</div>
+    <div>Item 3</div>
+  </cds-stack>`;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-stack`]: () => ({
+      gap: select(
+        'gap',
+        ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', '10'],
+        '0'
+      ),
+      orientation: select(
+        'orientation',
+        orientationOptions,
+        STACK_ORIENTATION.VERTICAL
+      ),
+    }),
+  },
+};
+
+export default {
+  title: 'Layout/Stack',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/stack/stack.scss b/packages/carbon-web-components/src/components/stack/stack.scss
new file mode 100644
index 00000000000..47a44c76aae
--- /dev/null
+++ b/packages/carbon-web-components/src/components/stack/stack.scss
@@ -0,0 +1,33 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing';
+@use '@carbon/styles/scss/utilities/custom-property';
+@use '@carbon/styles/scss/components/stack/index';
+
+:host(#{$prefix}-stack) {
+  $index: 1;
+
+  @each $step, $value in spacing.$spacing {
+    .#{$prefix}--stack-scale-#{$index} {
+      @include custom-property.declaration('stack-gap', $value);
+    }
+
+    $index: $index + 1;
+  }
+}
+
+:host(#{$prefix}-stack[orientation='vertical']) {
+  @extend .#{$prefix}--stack-vertical;
+}
+
+:host(#{$prefix}-stack[orientation='horizontal']) {
+  @extend .#{$prefix}--stack-horizontal;
+}
diff --git a/packages/carbon-web-components/src/components/stack/stack.ts b/packages/carbon-web-components/src/components/stack/stack.ts
new file mode 100644
index 00000000000..1f4e7b0967a
--- /dev/null
+++ b/packages/carbon-web-components/src/components/stack/stack.ts
@@ -0,0 +1,72 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { LitElement, html } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './stack.scss';
+import { STACK_ORIENTATION, SPACING_STEPS } from './defs';
+
+export { STACK_ORIENTATION, SPACING_STEPS };
+
+/**
+ * The Stack component is a useful layout utility in a component-based model.
+ * This allows components to not use margin and instead delegate the
+ * responsibility of positioning and layout to parent components.
+ *
+ * In the case of the Stack component, it uses the spacing scale from the
+ * Design Language in order to determine how much space there should be between
+ * items rendered by the Stack component. It also supports a custom `gap` prop
+ * which will allow a user to provide a custom value for the gap of the layout.
+ *
+ * This component supports both horizontal and vertical orientations.
+ *
+ * @element cds-stack
+ */
+@customElement(`${prefix}-stack`)
+class CDSStack extends LitElement {
+  /**
+   * Specify the orientation of them items in the Stack
+   */
+  @property({ type: String, reflect: true })
+  orientation = STACK_ORIENTATION.VERTICAL;
+
+  /**
+   * Provide either a custom value or a step from the spacing scale to be used
+   * as the gap in the layout
+   */
+  @property({ type: SPACING_STEPS || String, reflect: true })
+  gap;
+
+  /**
+   * Turn on when passing in custom value to 'gap' attribute (ie. gap="2rem")
+   */
+  @property({ type: Boolean, attribute: 'use-custom-gap-value' })
+  useCustomGapValue = false;
+
+  updated(changedProperties) {
+    if (changedProperties.has('gap')) {
+      if (this.useCustomGapValue) {
+        this.style.setProperty(`--${prefix}-stack-gap`, `${this.gap}`);
+      } else {
+        const oldGapValue = changedProperties.get('gap');
+        this.classList.remove(`${prefix}--stack-scale-${oldGapValue}`);
+        this.classList.add(`${prefix}--stack-scale-${this.gap}`);
+      }
+    }
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSStack;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts
index 40753bfa549..d0843469072 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-body.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './structured-list.scss';
 
-const { prefix } = settings;
-
 /**
  * Structured list body.
  *
- * @element bx-structured-list-body
+ * @element cds-structured-list-body
  */
 @customElement(`${prefix}-structured-list-body`)
-class BXStructuredListBody extends LitElement {
+class CDSStructuredListBody extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'rowgroup');
@@ -35,4 +33,4 @@ class BXStructuredListBody extends LitElement {
   static styles = styles;
 }
 
-export default BXStructuredListBody;
+export default CDSStructuredListBody;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts
index ae2a1a10ad5..d29000f9d20 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-cell.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Structured list cell.
  *
- * @element bx-structured-list-cell
+ * @element cds-structured-list-cell
  */
 @customElement(`${prefix}-structured-list-cell`)
-class BXStructuredListCell extends LitElement {
+class CDSStructuredListCell extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'cell');
@@ -35,4 +33,4 @@ class BXStructuredListCell extends LitElement {
   static styles = styles;
 }
 
-export default BXStructuredListCell;
+export default CDSStructuredListCell;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts
index ec26800901d..8ec0921399c 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-head.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './structured-list.scss';
 
-const { prefix } = settings;
-
 /**
  * Structured list header.
  *
- * @element bx-structured-list-head
+ * @element cds-structured-list-head
  */
 @customElement(`${prefix}-structured-list-head`)
-class BXStructuredListHeader extends LitElement {
+class CDSStructuredListHeader extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'rowgroup');
@@ -35,4 +33,4 @@ class BXStructuredListHeader extends LitElement {
   static styles = styles;
 }
 
-export default BXStructuredListHeader;
+export default CDSStructuredListHeader;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts
index 874d8833983..af88f1e1b7b 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell-skeleton.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of structured list header cell.
  */
 @customElement(`${prefix}-structured-list-header-cell-skeleton`)
-class BXStructuredListHeaderCellSkeleton extends LitElement {
+class CDSStructuredListHeaderCellSkeleton extends LitElement {
   render() {
     return html` <span></span> `;
   }
@@ -26,4 +24,4 @@ class BXStructuredListHeaderCellSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXStructuredListHeaderCellSkeleton;
+export default CDSStructuredListHeaderCellSkeleton;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts
index 51457d3c653..1f02b72597d 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-header-cell.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Structured list header cell.
  *
- * @element bx-structured-list-header-cell
+ * @element cds-structured-list-header-cell
  */
 @customElement(`${prefix}-structured-list-header-cell`)
-class BXStructuredListHeaderCell extends LitElement {
+class CDSStructuredListHeaderCell extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'columnheader');
@@ -35,4 +33,4 @@ class BXStructuredListHeaderCell extends LitElement {
   static styles = styles;
 }
 
-export default BXStructuredListHeaderCell;
+export default CDSStructuredListHeaderCell;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts
index fa6d1e1d64b..b63abb16de3 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-header-row.ts
@@ -7,20 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './structured-list.scss';
 
-const { prefix } = settings;
-
 /**
  * Structured list header row.
  *
- * @element bx-structured-list-header-row
+ * @element cds-structured-list-header-row
  */
 @customElement(`${prefix}-structured-list-header-row`)
-class BXStructuredListHeaderRow extends LitElement {
+class CDSStructuredListHeaderRow extends LitElement {
   /**
    * The `name` attribute for the `<input>` for selection.
    * If present, this structured list header row will show its selectable version of the UI.
@@ -36,7 +35,7 @@ class BXStructuredListHeaderRow extends LitElement {
   }
 
   render() {
-    // We could look up in DOM for `bx-structured-list[hasSelection]`,
+    // We could look up in DOM for `${prefix}-structured-list[hasSelection]`,
     // but uses `hasSelection` prop to utilize attribute change callback
     if (this.selectionName) {
       return html`
@@ -50,4 +49,4 @@ class BXStructuredListHeaderRow extends LitElement {
   static styles = styles;
 }
 
-export default BXStructuredListHeaderRow;
+export default CDSStructuredListHeaderRow;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts
index 11d6d99b29d..813f52643fd 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-row.ts
@@ -7,10 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, query, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
+import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import RadioGroupManager, {
@@ -20,8 +21,6 @@ import RadioGroupManager, {
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Map of navigation direction by key.
  */
@@ -41,9 +40,9 @@ class StructuredListRowRadioButtonDelegate
   /**
    * The structured list row to target.
    */
-  private _row: BXStructuredListRow;
+  private _row: CDSStructuredListRow;
 
-  constructor(row: BXStructuredListRow) {
+  constructor(row: CDSStructuredListRow) {
     this._row = row;
   }
 
@@ -80,10 +79,10 @@ class StructuredListRowRadioButtonDelegate
 /**
  * Structured list row.
  *
- * @element bx-structured-list-row
+ * @element cds-structured-list-row
  */
 @customElement(`${prefix}-structured-list-row`)
-class BXStructuredListRow extends HostListenerMixin(LitElement) {
+class CDSStructuredListRow extends HostListenerMixin(LitElement) {
   /**
    * The radio group manager associated with the radio button.
    */
@@ -211,13 +210,13 @@ class BXStructuredListRow extends HostListenerMixin(LitElement) {
     const { selected, selectionName, selectionValue, selectionIconTitle } =
       this;
     if (selectionName) {
-      // "Selected" style with `.bx--structured-list-td` does not work somehow - Need investigation
+      // "Selected" style with `.${prefix}--structured-list-td` does not work somehow - Need investigation
       return html`
         <slot></slot>
         <input
           id="input"
           type="radio"
-          class="${prefix}--structured-list-input"
+          class="${prefix}--structured-list-input ${prefix}--visually-hidden"
           .checked=${selected}
           name=${selectionName}
           value=${ifDefined(selectionValue)} />
@@ -236,4 +235,4 @@ class BXStructuredListRow extends HostListenerMixin(LitElement) {
   static styles = styles;
 }
 
-export default BXStructuredListRow;
+export default CDSStructuredListRow;
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx b/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
index 7738360d744..25e3f49bede 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Structured list
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/structured-list)
 
 Structured Lists group content that is similar or related, such as terms or
 definitions.
@@ -28,91 +28,92 @@ import '@carbon/web-components/es/components/structured-list/index.js';
 ### HTML
 
 ```html
-<bx-structured-list>
-  <bx-structured-list-head>
-    <bx-structured-list-header-row>
-      <bx-structured-list-header-cell>ColumnA</bx-structured-list-header-cell>
-      <bx-structured-list-header-cell>ColumnB</bx-structured-list-header-cell>
-      <bx-structured-list-header-cell>ColumnC</bx-structured-list-header-cell>
-    </bx-structured-list-header-row>
-  </bx-structured-list-head>
-  <bx-structured-list-body>
-    <bx-structured-list-row>
-      <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-      <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-      <bx-structured-list-cell
+<cds-structured-list>
+  <cds-structured-list-head>
+    <cds-structured-list-header-row>
+      <cds-structured-list-header-cell>ColumnA</cds-structured-list-header-cell>
+      <cds-structured-list-header-cell>ColumnB</cds-structured-list-header-cell>
+      <cds-structured-list-header-cell>ColumnC</cds-structured-list-header-cell>
+    </cds-structured-list-header-row>
+  </cds-structured-list-head>
+  <cds-structured-list-body>
+    <cds-structured-list-row>
+      <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+      <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+      <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
         magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem
-        vel euismod dignissim.</bx-structured-list-cell
+        vel euismod dignissim.</cds-structured-list-cell
       >
-    </bx-structured-list-row>
-    <bx-structured-list-row>
-      <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-      <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-      <bx-structured-list-cell
+    </cds-structured-list-row>
+    <cds-structured-list-row>
+      <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+      <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+      <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
         magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem
-        vel euismod dignissim.</bx-structured-list-cell
+        vel euismod dignissim.</cds-structured-list-cell
       >
-    </bx-structured-list-row>
-    <bx-structured-list-row>
-      <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-      <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-      <bx-structured-list-cell
+    </cds-structured-list-row>
+    <cds-structured-list-row>
+      <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+      <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+      <cds-structured-list-cell
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
         magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem
-        vel euismod dignissim.</bx-structured-list-cell
+        vel euismod dignissim.</cds-structured-list-cell
       >
-    </bx-structured-list-row>
-  </bx-structured-list-body>
-</bx-structured-list>
+    </cds-structured-list-row>
+  </cds-structured-list-body>
+</cds-structured-list>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-structured-list-header-cell-skeleton>`.
+For the skeleton variation, utilize
+`<cds-structured-list-header-cell-skeleton>`.
 
 ```html
-<bx-structured-list>
-  <bx-structured-list-head>
-    <bx-structured-list-header-row>
-      <bx-structured-list-header-cell-skeleton></bx-structured-list-header-cell-skeleton>
-      <bx-structured-list-header-cell-skeleton></bx-structured-list-header-cell-skeleton>
-      <bx-structured-list-header-cell-skeleton></bx-structured-list-header-cell-skeleton>
-    </bx-structured-list-header-row>
-  </bx-structured-list-head>
-  <bx-structured-list-body>
-    <bx-structured-list-row>
-      <bx-structured-list-cell></bx-structured-list-cell>
-      <bx-structured-list-cell></bx-structured-list-cell>
-      <bx-structured-list-cell></bx-structured-list-cell>
-    </bx-structured-list-row>
-    <bx-structured-list-row>
-      <bx-structured-list-cell></bx-structured-list-cell>
-      <bx-structured-list-cell></bx-structured-list-cell>
-      <bx-structured-list-cell></bx-structured-list-cell>
-    </bx-structured-list-row>
-    <bx-structured-list-row>
-      <bx-structured-list-cell></bx-structured-list-cell>
-      <bx-structured-list-cell></bx-structured-list-cell>
-      <bx-structured-list-cell></bx-structured-list-cell>
-    </bx-structured-list-row>
-  </bx-structured-list-body>
-</bx-structured-list>
+<cds-structured-list>
+  <cds-structured-list-head>
+    <cds-structured-list-header-row>
+      <cds-structured-list-header-cell-skeleton></cds-structured-list-header-cell-skeleton>
+      <cds-structured-list-header-cell-skeleton></cds-structured-list-header-cell-skeleton>
+      <cds-structured-list-header-cell-skeleton></cds-structured-list-header-cell-skeleton>
+    </cds-structured-list-header-row>
+  </cds-structured-list-head>
+  <cds-structured-list-body>
+    <cds-structured-list-row>
+      <cds-structured-list-cell></cds-structured-list-cell>
+      <cds-structured-list-cell></cds-structured-list-cell>
+      <cds-structured-list-cell></cds-structured-list-cell>
+    </cds-structured-list-row>
+    <cds-structured-list-row>
+      <cds-structured-list-cell></cds-structured-list-cell>
+      <cds-structured-list-cell></cds-structured-list-cell>
+      <cds-structured-list-cell></cds-structured-list-cell>
+    </cds-structured-list-row>
+    <cds-structured-list-row>
+      <cds-structured-list-cell></cds-structured-list-cell>
+      <cds-structured-list-cell></cds-structured-list-cell>
+      <cds-structured-list-cell></cds-structured-list-cell>
+    </cds-structured-list-row>
+  </cds-structured-list-body>
+</cds-structured-list>
 ```
 
-## `<bx-structured-list>` attributes and properties
+## `<cds-structured-list>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-structured-list has-selection>`) and `false` means not setting the
-attribute (e.g. `<bx-structured-list>` without `has-selection` attribute).
+`<cds-structured-list has-selection>`) and `false` means not setting the
+attribute (e.g. `<cds-structured-list>` without `has-selection` attribute).
 
-<Props of="bx-structured-list" />
+<Props of="cds-structured-list" />
 
-## `<bx-structured-list-row>` attributes and properties
+## `<cds-structured-list-row>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-structured-list-row selected>`) and `false` means not setting the attribute
-(e.g. `<bx-structured-list-row>` without `selected` attribute).
+`<cds-structured-list-row selected>`) and `false` means not setting the
+attribute (e.g. `<cds-structured-list-row>` without `selected` attribute).
 
-<Props of="bx-structured-list-row" />
+<Props of="cds-structured-list-row" />
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss b/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss
deleted file mode 100644
index 354e6794c37..00000000000
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* stylelint-disable selector-type-no-unknown */
-bx-structured-list {
-  width: 100%;
-}
-
-bx-structured-list-header-skeleton {
-  width: 25%;
-
-  &:nth-of-type(3n) {
-    width: 50%;
-  }
-}
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts b/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts
index 0837877564f..69069bbb24d 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list-story.ts
@@ -1,15 +1,15 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-html';
+import { html } from 'lit';
 import { boolean } from '@storybook/addon-knobs';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import './structured-list';
 import './structured-list-head';
 import './structured-list-header-row';
@@ -19,10 +19,10 @@ import './structured-list-row';
 import './structured-list-cell';
 import './structured-list-header-cell-skeleton';
 import storyDocs from './structured-list-story.mdx';
-import styles from './structured-list-story.scss';
+import { prefix } from '../../globals/settings';
 
 export const Default = (args) => {
-  const { hasSelection } = args?.['bx-structured-list'] ?? {};
+  const { hasSelection } = args?.[`${prefix}-structured-list`] ?? {};
   const selectionName = !hasSelection ? undefined : 'structured-list-selection';
   const selectionValues = !hasSelection
     ? []
@@ -32,61 +32,147 @@ export const Default = (args) => {
         'structured-list-selection-2',
       ];
   return html`
-    <bx-structured-list selection-name=${ifNonNull(selectionName)}>
-      <bx-structured-list-head>
-        <bx-structured-list-header-row>
-          <bx-structured-list-header-cell
-            >ColumnA</bx-structured-list-header-cell
-          >
-          <bx-structured-list-header-cell
-            >ColumnB</bx-structured-list-header-cell
-          >
-          <bx-structured-list-header-cell
-            >ColumnC</bx-structured-list-header-cell
-          >
-        </bx-structured-list-header-row>
-      </bx-structured-list-head>
-      <bx-structured-list-body>
-        <bx-structured-list-row
-          selection-value=${ifNonNull(selectionValues[0])}>
-          <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-          <bx-structured-list-cell>Row 1</bx-structured-list-cell>
-          <bx-structured-list-cell
-            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+    <cds-structured-list selection-name=${ifDefined(selectionName)}>
+      <cds-structured-list-head>
+        <cds-structured-list-header-row>
+          <cds-structured-list-header-cell>
+            ColumnA
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnB
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnC
+          </cds-structured-list-header-cell>
+      </cds-structured-list-head>
+      <cds-structured-list-body>
+        <cds-structured-list-row
+          selection-value=${ifDefined(selectionValues[0])}>
+          <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+          <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-            sem vel euismod dignissim.</bx-structured-list-cell
-          >
-        </bx-structured-list-row>
-        <bx-structured-list-row
-          selection-value=${ifNonNull(selectionValues[1])}>
-          <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-          <bx-structured-list-cell>Row 2</bx-structured-list-cell>
-          <bx-structured-list-cell
-            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
+        </cds-structured-list-row>
+        <cds-structured-list-row
+          selection-value=${ifDefined(selectionValues[1])}>
+          <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+          <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-            sem vel euismod dignissim.</bx-structured-list-cell
-          >
-        </bx-structured-list-row>
-        <bx-structured-list-row
-          selection-value=${ifNonNull(selectionValues[2])}>
-          <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-          <bx-structured-list-cell>Row 3</bx-structured-list-cell>
-          <bx-structured-list-cell
-            >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
-            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
-            sem vel euismod dignissim.</bx-structured-list-cell
-          >
-        </bx-structured-list-row>
-      </bx-structured-list-body>
-    </bx-structured-list>
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
+        </cds-structured-list-row>
+      </cds-structured-list-body>
+    </cds-structured-list>
+  `;
+};
+
+export const Selection = () => {
+  const selectionName = 'structured-list-selection';
+  const selectionValues = [
+    'structured-list-selection-0',
+    'structured-list-selection-1',
+    'structured-list-selection-2',
+    'structured-list-selection-3',
+  ];
+  return html`
+    <cds-structured-list selection-name=${ifDefined(selectionName)}>
+      <cds-structured-list-head>
+        <cds-structured-list-header-row>
+          <cds-structured-list-header-cell>
+            ColumnA
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnB
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnC
+          </cds-structured-list-header-cell>
+        </cds-structured-list-header-row>
+      </cds-structured-list-head>
+      <cds-structured-list-body>
+        ${selectionValues.map(
+          (selectionValue, index) => html` <cds-structured-list-row
+            selection-value=${ifDefined(selectionValue)}>
+            <cds-structured-list-cell>Row ${index}</cds-structured-list-cell>
+            <cds-structured-list-cell>Row ${index}</cds-structured-list-cell>
+            <cds-structured-list-cell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim. Nulla ut cursus dolor.
+              Pellentesque vulputate nisl a porttitor
+              interdum.</cds-structured-list-cell
+            >
+          </cds-structured-list-row>`
+        )}
+      </cds-structured-list-body>
+    </cds-structured-list>
   `;
 };
 
-Default.storyName = 'Default';
+export const Playground = (args) => {
+  const { condensed, flush, hasSelection } =
+    args?.[`${prefix}-structured-list`] ?? {};
+  const selectionName = !hasSelection ? undefined : 'structured-list-selection';
+  const selectionValues = !hasSelection
+    ? []
+    : [
+        'structured-list-selection-0',
+        'structured-list-selection-1',
+        'structured-list-selection-2',
+      ];
+  return html`
+    <cds-structured-list
+    selection-name=${ifDefined(selectionName)}
+    ?condensed=${condensed}
+    ?flush=${flush}>
+      <cds-structured-list-head>
+        <cds-structured-list-header-row>
+          <cds-structured-list-header-cell>
+            ColumnA
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnB
+          </cds-structured-list-header-cell>
+          <cds-structured-list-header-cell>
+            ColumnC
+          </cds-structured-list-header-cell>
+      </cds-structured-list-head>
+      <cds-structured-list-body>
+        <cds-structured-list-row
+          selection-value=${ifDefined(selectionValues[0])}>
+          <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+          <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
+        </cds-structured-list-row>
+        <cds-structured-list-row
+          selection-value=${ifDefined(selectionValues[1])}>
+          <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+          <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+          <cds-structured-list-cell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim. Nulla ut cursus dolor. Pellentesque
+            vulputate nisl a porttitor interdum.</cds-structured-list-cell>
+        </cds-structured-list-row>
+      </cds-structured-list-body>
+    </cds-structured-list>
+  `;
+};
 
-Default.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-structured-list': () => ({
+    [`${prefix}-structured-list`]: () => ({
+      condensed: boolean('Condensed (condensed)', false),
+      flush: boolean('Flush (flush)', false),
       hasSelection: boolean(
         'Supports selection feature (has-selection)',
         false
@@ -96,35 +182,33 @@ Default.parameters = {
 };
 
 export const skeleton = () => html`
-  <style>
-    ${styles}
-  </style>
-  <bx-structured-list>
-    <bx-structured-list-head>
-      <bx-structured-list-header-row>
-        <bx-structured-list-header-cell-skeleton></bx-structured-list-header-cell-skeleton>
-        <bx-structured-list-header-cell-skeleton></bx-structured-list-header-cell-skeleton>
-        <bx-structured-list-header-cell-skeleton></bx-structured-list-header-cell-skeleton>
-      </bx-structured-list-header-row>
-    </bx-structured-list-head>
-    <bx-structured-list-body>
-      <bx-structured-list-row>
-        <bx-structured-list-cell></bx-structured-list-cell>
-        <bx-structured-list-cell></bx-structured-list-cell>
-        <bx-structured-list-cell></bx-structured-list-cell>
-      </bx-structured-list-row>
-      <bx-structured-list-row>
-        <bx-structured-list-cell></bx-structured-list-cell>
-        <bx-structured-list-cell></bx-structured-list-cell>
-        <bx-structured-list-cell></bx-structured-list-cell>
-      </bx-structured-list-row>
-      <bx-structured-list-row>
-        <bx-structured-list-cell></bx-structured-list-cell>
-        <bx-structured-list-cell></bx-structured-list-cell>
-        <bx-structured-list-cell></bx-structured-list-cell>
-      </bx-structured-list-row>
-    </bx-structured-list-body>
-  </bx-structured-list>
+  <div style="width:800px">
+    ${Array.apply(null, Array(2)).map(
+      () => html`
+        <cds-structured-list>
+          <cds-structured-list-head>
+            <cds-structured-list-header-row>
+              ${Array.apply(null, Array(3)).map(
+                () => html`
+                  <cds-structured-list-header-cell-skeleton>
+                  </cds-structured-list-header-cell-skeleton>
+                `
+              )}
+            </cds-structured-list-header-row>
+          </cds-structured-list-head>
+          <cds-structured-list-body>
+            ${Array.apply(null, Array(5)).map(
+              () => html`<cds-structured-list-row>
+                <cds-structured-list-cell></cds-structured-list-cell>
+                <cds-structured-list-cell></cds-structured-list-cell>
+                <cds-structured-list-cell></cds-structured-list-cell>
+              </cds-structured-list-row>`
+            )}
+          </cds-structured-list-body>
+        </cds-structured-list>
+      `
+    )}
+  </div>
 `;
 
 skeleton.parameters = {
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list.scss b/packages/carbon-web-components/src/components/structured-list/structured-list.scss
index c779d6729bc..744734452fa 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list.scss
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,8 +7,15 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/globals/scss/helper-mixins';
-@import 'carbon-components/scss/components/structured-list/structured-list';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/structured-list/structured-list' as *;
+
+// https://github.com/carbon-design-system/carbon/issues/11408
+@include structured-list;
 
 .#{$prefix}--structured-list ::slotted(#{$prefix}-structured-list-head) {
   @extend .#{$prefix}--structured-list-thead;
@@ -21,6 +28,10 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-structured-list-header-row) {
+  ::slotted(#{$prefix}-structured-list-header-cell:first-of-type) {
+    padding-left: $spacing-05;
+  }
+
   ::slotted(#{$prefix}-structured-list-header-cell),
   ::slotted(#{$prefix}-structured-list-header-cell-skeleton) {
     @extend .#{$prefix}--structured-list-th;
@@ -36,36 +47,102 @@ $css--plex: true !default;
   @extend .#{$prefix}--structured-list-tbody;
 }
 
-:host(#{$prefix}-structured-list-body)
+:host(#{$prefix}-structured-list-body) {
   ::slotted(#{$prefix}-structured-list-row) {
-  @extend .#{$prefix}--structured-list-row;
+    @extend .#{$prefix}--structured-list-row;
+  }
+
+  ::slotted(#{$prefix}-structured-list-row:last-child) {
+    border-bottom: 1px solid $border-subtle;
+  }
 }
 
-:host(#{$prefix}-structured-list-row:hover) .#{$prefix}--structured-list-svg {
-  fill: $ibm-color__gray-40;
+:host(#{$prefix}-structured-list-row) {
+  ::slotted(#{$prefix}-structured-list-cell) {
+    @extend .#{$prefix}--structured-list-td;
+  }
+
+  ::slotted(#{$prefix}-structured-list-cell:first-of-type) {
+    padding-left: $spacing-05;
+  }
+
+  ::slotted(#{$prefix}-structured-list-cell[nowrap]) {
+    @extend .#{$prefix}--structured-list-content--nowrap;
+  }
 }
 
-:host(#{$prefix}-structured-list-row)
+// selection
+:host(#{$prefix}-structured-list-row[selection-value]:hover) {
+  border-bottom: 1px solid $layer-hover;
+  background-color: $layer-hover;
+  cursor: pointer;
+
   ::slotted(#{$prefix}-structured-list-cell) {
-  @extend .#{$prefix}--structured-list-td;
+    color: $text-primary;
+  }
 }
 
-:host(#{$prefix}-structured-list-row)
-  ::slotted(#{$prefix}-structured-list-cell[nowrap]) {
-  @extend .#{$prefix}--structured-list-content--nowrap;
+:host(#{$prefix}-structured-list-row[selected]) {
+  background-color: $layer-selected;
+
+  .#{$prefix}--structured-list-input:checked
+    + .#{$prefix}--structured-list-cell
+    .#{$prefix}--structured-list-svg {
+    fill: $text-primary;
+  }
+
+  ::slotted(#{$prefix}-structured-list-cell) {
+    color: $text-primary;
+  }
 }
 
-// "Selected" style with `.bx--structured-list-td` does not work somehow - Need investigation
-.#{$prefix}--structured-list-input:checked
-  + .#{$prefix}--structured-list-cell
-  .#{$prefix}--structured-list-svg {
-  fill: $text-01;
+// skeleton
+:host(#{$prefix}-structured-list-header-cell-skeleton) {
+  &:first-of-type {
+    width: 8%;
+  }
+
+  &:nth-of-type(3n + 2) {
+    width: 30%;
+  }
+
+  &:nth-of-type(3n + 3) {
+    width: 15%;
+  }
+
+  span {
+    @include skeleton;
+
+    width: 75%;
+    height: $spacing-05;
+    display: block;
+  }
 }
 
-:host(#{$prefix}-structured-list-header-cell-skeleton) span {
-  @include skeleton;
+// condensed
+:host(#{$prefix}-structured-list-row[condensed])
+  ::slotted(#{$prefix}-structured-list-cell),
+:host(#{$prefix}-structured-list-header-row[condensed])
+  ::slotted(#{$prefix}-structured-list-header-cell) {
+  padding: $spacing-03;
+}
+
+:host(#{$prefix}-structured-list-row[condensed])
+  ::slotted(#{$prefix}-structured-list-cell:first-of-type),
+:host(#{$prefix}-structured-list-header-row[condensed])
+  ::slotted(#{$prefix}-structured-list-header-cell:first-of-type) {
+  padding-left: $spacing-05;
+}
 
-  width: 75%;
-  height: 1rem;
-  display: block;
+// flush
+:host(#{$prefix}-structured-list-row[flush])
+  ::slotted(#{$prefix}-structured-list-cell),
+:host(#{$prefix}-structured-list-row[condensed][flush])
+  ::slotted(#{$prefix}-structured-list-cell),
+:host(#{$prefix}-structured-list-header-row[flush])
+  ::slotted(#{$prefix}-structured-list-header-cell),
+:host(#{$prefix}-structured-list-header-row[condensed][flush])
+  ::slotted(#{$prefix}-structured-list-header-cell) {
+  padding-right: $spacing-05;
+  padding-left: 0;
 }
diff --git a/packages/carbon-web-components/src/components/structured-list/structured-list.ts b/packages/carbon-web-components/src/components/structured-list/structured-list.ts
index 254be8d9966..5b2868e6cd9 100644
--- a/packages/carbon-web-components/src/components/structured-list/structured-list.ts
+++ b/packages/carbon-web-components/src/components/structured-list/structured-list.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import FocusMixin from '../../globals/mixins/focus';
-import BXStructuredListRow from './structured-list-row';
+import CDSStructuredListRow from './structured-list-row';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Structured list wrapper.
  *
- * @element bx-structured-list
+ * @element cds-structured-list
  */
 @customElement(`${prefix}-structured-list`)
-class BXStructuredList extends FocusMixin(LitElement) {
+class CDSStructuredList extends FocusMixin(LitElement) {
   /**
    * The `name` attribute for the `<input>` for selection.
    * If present, this structured list will be a selectable one.
@@ -32,14 +31,17 @@ class BXStructuredList extends FocusMixin(LitElement) {
   @property({ attribute: 'selection-name' })
   selectionName = '';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * Specify if structured list is condensed, default is false
+   */
+  @property({ type: Boolean, reflect: true })
+  condensed = false;
+
+  /**
+   * Specify if structured list is flush, default is false
+   */
+  @property({ type: Boolean, reflect: true })
+  flush = false;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -53,21 +55,43 @@ class BXStructuredList extends FocusMixin(LitElement) {
       // Propagate `selectionName` attribute to descendants until `:host-context()` gets supported in all major browsers
       forEach(
         this.querySelectorAll(
-          (this.constructor as typeof BXStructuredList).selectorRowsWithHeader
+          (this.constructor as typeof CDSStructuredList).selectorRowsWithHeader
         ),
         (elem) => {
-          (elem as BXStructuredListRow).selectionName = this.selectionName;
+          (elem as CDSStructuredListRow).selectionName = this.selectionName;
         }
       );
     }
     return true;
   }
 
+  updated(changedProperties) {
+    const attributes = ['condensed', 'flush'];
+    attributes.forEach((attr) => {
+      if (changedProperties.has(attr)) {
+        // Propagate watched attribute to descendants until `:host-context()` gets supported in all major browsers
+        forEach(
+          this.querySelectorAll(
+            (this.constructor as typeof CDSStructuredList)
+              .selectorRowsWithHeader
+          ),
+          (elem) => {
+            this[`${attr}`]
+              ? elem.setAttribute(attr, '')
+              : elem.removeAttribute(attr);
+          }
+        );
+      }
+    });
+  }
+
   render() {
-    const { selectionName } = this;
+    const { condensed, flush, selectionName } = this;
     const classes = classMap({
       [`${prefix}--structured-list`]: true,
       [`${prefix}--structured-list--selection`]: Boolean(selectionName),
+      [`${prefix}--structured-list--condensed`]: condensed,
+      [`${prefix}--structured-list--flush`]: flush,
     });
     return html`
       <section id="section" class=${classes}><slot></slot></section>
@@ -78,8 +102,11 @@ class BXStructuredList extends FocusMixin(LitElement) {
    * The CSS selector to find the rows, including header rows.
    */
   static selectorRowsWithHeader = `${prefix}-structured-list-row,${prefix}-structured-list-header-row`;
-
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
-export default BXStructuredList;
+export default CDSStructuredList;
diff --git a/packages/carbon-web-components/src/components/tabs/coding-conventions.md b/packages/carbon-web-components/src/components/tabs/coding-conventions.md
index 241c1176a49..9eeff71c747 100644
--- a/packages/carbon-web-components/src/components/tabs/coding-conventions.md
+++ b/packages/carbon-web-components/src/components/tabs/coding-conventions.md
@@ -1,25 +1,25 @@
-# Implementation notes for `<bx-tabs>`
+# Implementation notes for `<cds-tabs>`
 
-## Relationship with the narrow mode with `<bx-dropdown>`
+## Relationship with the narrow mode with `<cds-dropdown>`
 
-`<bx-tabs>` contains lots of code originated from `<bx-dropdown>`, to support
+`<cds-tabs>` contains lots of code originated from `<cds-dropdown>`, to support
 its narrow screen UI. Moving such code to a mixin to share the code between
 those two components is in consideration, but not happening for now, from the
 following reasons:
 
-- `<bx-dropdown>` code has lots of portions to support its derived class
-  (`<bx-combo-box>` and `<bx-multi-select>`) that `<bx-tabs>` doesn't need
-- `<bx-dropdown>` allows programmatic control of its open state, whereas
-  `<bx-tabs>` doesn't (saw less need to support that feature)
-- `<bx-tabs>` code has several portions to seamlessly switch between narrow mode
-  and wide mode, that caused difference in markup from `<bx-dropdown>`
+- `<cds-dropdown>` code has lots of portions to support its derived class
+  (`<cds-combo-box>` and `<cds-multi-select>`) that `<cds-tabs>` doesn't need
+- `<cds-dropdown>` allows programmatic control of its open state, whereas
+  `<cds-tabs>` doesn't (saw less need to support that feature)
+- `<cds-tabs>` code has several portions to seamlessly switch between narrow
+  mode and wide mode, that caused difference in markup from `<cds-dropdown>`
 
 ## Keyboard navigation model
 
-`<bx-tabs>` uses the same keyboard navigation model (virtual focus) as
-`<bx-dropdown>`, due to the following reasons:
+`<cds-tabs>` uses the same keyboard navigation model (virtual focus) as
+`<cds-dropdown>`, due to the following reasons:
 
-- To align narrow mode's user interaction model to `<bx-dropdown>`
+- To align narrow mode's user interaction model to `<cds-dropdown>`
 - To avoid scenarios like:
   1. User focuses on 2nd tab
   2. User shrinks the screen size
@@ -31,8 +31,8 @@ following reasons:
 narrow mode requires space/enter to select an item. And thus no `highlighted`
 state.
 
-|          | Normal                                                                               | Hover                                                         | Focus                                                     |
-| -------- | ------------------------------------------------------------------------------------ | ------------------------------------------------------------- | --------------------------------------------------------- |
-| Normal   | Light text (`$text-02`), light gray thick underline (`$ui-03`)                       | Light text (`$text-02`), dark gray thick underline (`$ui-04`) | (Focused means selected)                                  |
-| Disabled | Ultra-light text (`$disabled-01`), ultra-light gray thick underline (`$disabled-02`) | (No reaction to hover)                                        | (No reaction to focus)                                    |
-| Selected | Blue thick underline (`$interactive-01`/`$focus`), dark bold text                    | (No reaction to hover)                                        | Blue outline (`$interactive-01`/`$focus`), dark bold text |
+|          | Normal                                                                           | Hover                                                                           | Focus                                                     |
+| -------- | -------------------------------------------------------------------------------- | ------------------------------------------------------------------------------- | --------------------------------------------------------- |
+| Normal   | Light text (`$text-secondary`), light gray thick underline (`$border-subtle-01`) | Light text (`$text-secondary`), dark gray thick underline (`$border-strong-01`) | (Focused means selected)                                  |
+| Disabled | Ultra-light gray thick underline (`$text-disabledx`)                             | (No reaction to hover)                                                          | (No reaction to focus)                                    |
+| Selected | Blue thick underline (`$interactive-01`/`$focus`), dark bold text                | (No reaction to hover)                                                          | Blue outline (`$interactive-01`/`$focus`), dark bold text |
diff --git a/packages/carbon-web-components/src/components/tabs/defs.ts b/packages/carbon-web-components/src/components/tabs/defs.ts
index 5d8f1043971..55d7c025169 100644
--- a/packages/carbon-web-components/src/components/tabs/defs.ts
+++ b/packages/carbon-web-components/src/components/tabs/defs.ts
@@ -1,24 +1,12 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-export { FORM_ELEMENT_COLOR_SCHEME as TABS_COLOR_SCHEME } from '../../globals/shared-enums';
-
-/**
- * Navigation direction for narrow mode, associated with key symbols.
- */
-export const NAVIGATION_DIRECTION_NARROW = {
-  Up: -1,
-  ArrowUp: -1,
-  Down: 1,
-  ArrowDown: 1,
-};
-
 /**
  * The keyboard action categories for dropdown.
  */
@@ -28,26 +16,11 @@ export enum TABS_KEYBOARD_ACTION {
    */
   NONE = 'none',
 
-  /**
-   * Keyboard action to close menu.
-   */
-  CLOSING = 'closing',
-
   /**
    * Keyboard action to navigate back/forward.
    */
   NAVIGATING = 'navigating',
 
-  /**
-   * Keyboard action to open/close menu on the trigger button or select/deselect a menu item.
-   */
-  TRIGGERING = 'triggering',
-
-  /**
-   * Keyboard action to trigger tab selection using enter key
-   */
-  SELECTING = 'selecting',
-
   /**
    * Keyboard action to navigate to first tab using home key
    */
@@ -72,4 +45,9 @@ export enum TABS_TYPE {
    * Container type.
    */
   CONTAINER = 'container',
+
+  /**
+   * Contained type.
+   */
+  CONTAINED = 'contained',
 }
diff --git a/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts b/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts
index f768605349d..eccd93ac276 100644
--- a/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts
+++ b/packages/carbon-web-components/src/components/tabs/tab-skeleton.ts
@@ -7,23 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './tabs.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of tab.
  */
 @customElement(`${prefix}-tab-skeleton`)
-class BXTabSkeleton extends LitElement {
+export default class CDSTabSkeleton extends LitElement {
   render() {
     return html` <div class="${prefix}--tabs__nav-link"></div> `;
   }
 
   static styles = styles;
 }
-
-export default BXTabSkeleton;
diff --git a/packages/carbon-web-components/src/components/tabs/tab.ts b/packages/carbon-web-components/src/components/tabs/tab.ts
index 658af9d9136..cbc38e8f24e 100644
--- a/packages/carbon-web-components/src/components/tabs/tab.ts
+++ b/packages/carbon-web-components/src/components/tabs/tab.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import BXContentSwitcherItem from '../content-switcher/content-switcher-item';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSContentSwitcherItem from '../content-switcher/content-switcher-item';
 import { TABS_TYPE } from './tabs';
 import styles from './tabs.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Basic tab.
  *
- * @element bx-tab
+ * @element cds-tab
  */
 @customElement(`${prefix}-tab`)
-class BXTab extends BXContentSwitcherItem {
+export default class CDSTab extends CDSContentSwitcherItem {
   /**
    * `true` if this tab should be highlighted.
-   * If `true`, parent `<bx-tabs>` selects/deselects this tab upon keyboard interaction.
+   * If `true`, parent `<cds-tabs>` selects/deselects this tab upon keyboard interaction.
    *
    * @private
    */
@@ -73,7 +72,7 @@ class BXTab extends BXContentSwitcherItem {
         class="${prefix}--tabs__nav-link"
         role="tab"
         aria-label="${tabTitle}"
-        tabindex="${disabled ? -1 : 0}"
+        tabindex="${selected ? 0 : -1}"
         ?disabled="${disabled}"
         aria-selected="${Boolean(selected)}">
         <slot @slotchange="${handleSlotChange}"></slot>
@@ -83,5 +82,3 @@ class BXTab extends BXContentSwitcherItem {
 
   static styles = styles;
 }
-
-export default BXTab;
diff --git a/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts b/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts
index 1e575e38ed2..b5f8ae7070e 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts
+++ b/packages/carbon-web-components/src/components/tabs/tabs-skeleton.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './tabs.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of tabs.
  */
 @customElement(`${prefix}-tabs-skeleton`)
-class BXTabsSkeleton extends LitElement {
+export default class CDSTabsSkeleton extends LitElement {
   render() {
     return html`
       <div class="${prefix}--tabs-trigger">
@@ -32,5 +30,3 @@ class BXTabsSkeleton extends LitElement {
 
   static styles = styles;
 }
-
-export default BXTabsSkeleton;
diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.mdx b/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
index 8045cfc8669..2b304db54be 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
+++ b/packages/carbon-web-components/src/components/tabs/tabs-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tabs
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tabs)
 
 Tabs are used to quickly navigate between views within the same context.
 
@@ -21,28 +21,36 @@ Here's a quick example to get you started.
 import '@carbon/web-components/es/components/tabs/index.js';
 ```
 
+### SCSS (must include with JS import)
+
+```css
+@use '@carbon/styles/scss/components/tabs';
+```
+
 <Description markdown={`${cdnJs({ components: ['tabs'] })}`} />
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<bx-tabs trigger-content="Select an item" value="staging">
-  <bx-tab id="tab-all" target="panel-all" value="all">Option 1</bx-tab>
-  <bx-tab
+<cds-tabs trigger-content="Select an item" value="staging">
+  <cds-tab id="tab-all" target="panel-all" value="all">Option 1</cds-tab>
+  <cds-tab
     id="tab-cloudFoundry"
     target="panel-cloudFoundry"
     disabled
     value="cloudFoundry"
-    >Option 2</bx-tab
+    >Option 2</cds-tab
   >
-  <bx-tab id="tab-staging" target="panel-staging" value="staging"
-    >Option 3</bx-tab
+  <cds-tab id="tab-staging" target="panel-staging" value="staging"
+    >Option 3</cds-tab
   >
-  <bx-tab id="tab-dea" target="panel-dea" value="dea">Option 4</bx-tab>
-  <bx-tab id="tab-router" target="panel-router" value="router">Option 5</bx-tab>
-</bx-tabs>
-<div class="bx-ce-demo-devenv--tab-panels">
+  <cds-tab id="tab-dea" target="panel-dea" value="dea">Option 4</cds-tab>
+  <cds-tab id="tab-router" target="panel-router" value="router"
+    >Option 5</cds-tab
+  >
+</cds-tabs>
+<div class="cds-ce-demo-devenv--tab-panels">
   <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
     <h4>Content for option 1</h4>
     <p>
@@ -56,8 +64,7 @@ import '@carbon/web-components/es/components/tabs/index.js';
     id="panel-cloudFoundry"
     role="tabpanel"
     aria-labelledby="tab-cloudFoundry"
-    hidden
-  >
+    hidden>
     <h4>Content for option 2</h4>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
@@ -98,29 +105,29 @@ import '@carbon/web-components/es/components/tabs/index.js';
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-tabs-skeleton>` and
-`<bx-tab-skeleton>`.
+For the skeleton variation, utilize `<cds-tabs-skeleton>` and
+`<cds-tab-skeleton>`.
 
 ```html
-<bx-tabs-skeleton>
-  <bx-tab-skeleton></bx-tab-skeleton>
-  <bx-tab-skeleton></bx-tab-skeleton>
-  <bx-tab-skeleton></bx-tab-skeleton>
-  <bx-tab-skeleton></bx-tab-skeleton>
-  <bx-tab-skeleton></bx-tab-skeleton>
-</bx-tabs-skeleton>
+<cds-tabs-skeleton>
+  <cds-tab-skeleton></cds-tab-skeleton>
+  <cds-tab-skeleton></cds-tab-skeleton>
+  <cds-tab-skeleton></cds-tab-skeleton>
+  <cds-tab-skeleton></cds-tab-skeleton>
+  <cds-tab-skeleton></cds-tab-skeleton>
+</cds-tabs-skeleton>
 ```
 
-## `<bx-tabs>` attributes, properties and events
+## `<cds-tabs>` attributes, properties and events
 
-Note: `bx-content-switcher-*` events are not fired from `<bx-tabs>`.
+Note: `cds-content-switcher-*` events are not fired from `<cds-tabs>`.
 
-<Props of="bx-tabs" />
+<Props of="cds-tabs" />
 
-## `<bx-tab>` attributes, properties and events
+## `<cds-tab>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-tab disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-tab>` without `disabled` attribute).
+`<cds-tab disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-tab>` without `disabled` attribute).
 
-<Props of="bx-tab" />
+<Props of="cds-tab" />
diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.scss b/packages/carbon-web-components/src/components/tabs/tabs-story.scss
index 2bdd1baa574..37fa3aa57dd 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs-story.scss
+++ b/packages/carbon-web-components/src/components/tabs/tabs-story.scss
@@ -1,16 +1,16 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/spacing';
-@import 'carbon-components/scss/globals/scss/theme-tokens';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
 
-.bx-ce-demo-devenv--tab-panels {
+.#{$prefix}-ce-demo-devenv--tab-panels {
   flex: 1;
-  padding: $carbon--spacing-05;
+  padding: $spacing-05;
   align-self: stretch;
-  background-color: $ui-01;
 }
diff --git a/packages/carbon-web-components/src/components/tabs/tabs-story.ts b/packages/carbon-web-components/src/components/tabs/tabs-story.ts
index 50c4a322de5..aa28dcbaac2 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs-story.ts
+++ b/packages/carbon-web-components/src/components/tabs/tabs-story.ts
@@ -1,46 +1,167 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import { TABS_COLOR_SCHEME, TABS_TYPE } from './tabs';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { TABS_TYPE } from './tabs';
 import './tab';
 import './tabs-skeleton';
 import './tab-skeleton';
 import styles from './tabs-story.scss';
 import storyDocs from './tabs-story.mdx';
+import { prefix } from '../../globals/settings';
 
 const noop = () => {};
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${TABS_COLOR_SCHEME.LIGHT})`]: TABS_COLOR_SCHEME.LIGHT,
-};
-
 const types = {
   'Regular type': null,
-  [`Container type (${TABS_TYPE.CONTAINER})`]: TABS_TYPE.CONTAINER,
+  [`Container type (${TABS_TYPE.CONTAINED})`]: TABS_TYPE.CONTAINED,
 };
 
-export const Default = (args) => {
+export const Default = () => html`
+  <style>
+    ${styles}
+  </style>
+  <cds-tabs value="all">
+    <cds-tab id="tab-all" target="panel-all" value="all">Tab label 1</cds-tab>
+    <cds-tab
+      id="tab-cloudFoundry"
+      target="panel-cloudFoundry"
+      value="cloudFoundry">
+      Tab label 2
+    </cds-tab>
+    <cds-tab id="tab-staging" target="panel-staging" value="staging" disabled>
+      Tab label 3
+    </cds-tab>
+    <cds-tab id="tab-dea" target="panel-dea" value="dea">Tab label 4</cds-tab>
+  </cds-tabs>
+  <div class="${prefix}-ce-demo-devenv--tab-panels">
+    <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
+      Tab Panel 1
+    </div>
+    <div
+      id="panel-cloudFoundry"
+      role="tabpanel"
+      aria-labelledby="tab-cloudFoundry"
+      hidden>
+      <form style="margin: 2em">
+        <legend class="${prefix}--label">Validation example</legend>
+        <cds-checkbox id="cb" label-text="Accept privacy policy"></cds-checkbox>
+        <cds-button style="margin-top: 1rem; margin-bottom: 1rem" type="submit">
+          Submit
+        </cds-button>
+        <cds-text-input
+          type="text"
+          label="Text input label"
+          helper-text="Optional help text"
+          id="text-input-1"></cds-text-input>
+      </form>
+    </div>
+    <div
+      id="panel-staging"
+      role="tabpanel"
+      aria-labelledby="tab-staging"
+      hidden>
+      Tab Panel 3
+    </div>
+    <div id="panel-dea" role="tabpanel" aria-labelledby="tab-dea" hidden>
+      Tab Panel 4
+    </div>
+  </div>
+`;
+
+export const Contained = () => html`
+  <style>
+    ${styles}
+  </style>
+  <cds-tabs value="all" type="${TABS_TYPE.CONTAINED}">
+    <cds-tab id="tab-all" target="panel-all" value="all">Tab label 1</cds-tab>
+    <cds-tab
+      id="tab-cloudFoundry"
+      target="panel-cloudFoundry"
+      value="cloudFoundry">
+      Tab label 2
+    </cds-tab>
+    <cds-tab id="tab-staging" target="panel-staging" value="staging" disabled>
+      Tab label 3
+    </cds-tab>
+    <cds-tab id="tab-dea" target="panel-dea" value="dea">Tab label 4</cds-tab>
+    <cds-tab id="tab-five" target="panel-five" value="five">
+      Tab label 5
+    </cds-tab>
+  </cds-tabs>
+  <div class="${prefix}-ce-demo-devenv--tab-panels">
+    <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
+      Tab Panel 1
+    </div>
+    <div
+      id="panel-cloudFoundry"
+      role="tabpanel"
+      aria-labelledby="tab-cloudFoundry"
+      hidden>
+      <form style="margin: 2em">
+        <legend class="${prefix}--label">Validation example</legend>
+        <cds-checkbox id="cb" label-text="Accept privacy policy"></cds-checkbox>
+        <cds-button style="margin-top: 1rem; margin-bottom: 1rem" type="submit">
+          Submit
+        </cds-button>
+        <cds-text-input
+          type="text"
+          label="Text input label"
+          helper-text="Optional help text"
+          id="text-input-1"></cds-text-input>
+      </form>
+    </div>
+    <div
+      id="panel-staging"
+      role="tabpanel"
+      aria-labelledby="tab-staging"
+      hidden>
+      Tab Panel 3
+    </div>
+    <div id="panel-dea" role="tabpanel" aria-labelledby="tab-dea" hidden>
+      Tab Panel 4
+    </div>
+    <div id="panel-five" role="tabpanel" aria-labelledby="tab-five" hidden>
+      Tab Panel 5
+    </div>
+  </div>
+`;
+
+export const skeleton = () => html`
+  <cds-tabs-skeleton>
+    <cds-tab-skeleton></cds-tab-skeleton>
+    <cds-tab-skeleton></cds-tab-skeleton>
+    <cds-tab-skeleton></cds-tab-skeleton>
+    <cds-tab-skeleton></cds-tab-skeleton>
+    <cds-tab-skeleton></cds-tab-skeleton>
+  </cds-tabs-skeleton>
+`;
+
+skeleton.parameters = {
+  percy: {
+    skip: true,
+  },
+};
+
+export const Playground = (args) => {
   const {
-    colorScheme,
     triggerContent,
     type,
     value,
     disableSelection,
     onBeforeSelect = noop,
     onSelect = noop,
-  } = args?.['bx-tabs'] || {};
+  } = args?.[`${prefix}-tabs`] || {};
   const handleBeforeSelected = (event: CustomEvent) => {
     onBeforeSelect(event);
     if (disableSelection) {
@@ -51,132 +172,84 @@ export const Default = (args) => {
     <style>
       ${styles}
     </style>
-    <bx-tabs
-      color-scheme="${ifNonNull(colorScheme)}"
-      trigger-content="${ifNonNull(triggerContent)}"
-      type="${ifNonNull(type)}"
-      value="${ifNonNull(value)}"
-      @bx-tabs-beingselected="${handleBeforeSelected}"
-      @bx-tabs-selected="${onSelect}">
-      <bx-tab id="tab-all" target="panel-all" value="all">Option 1</bx-tab>
-      <bx-tab
+    <cds-tabs
+      trigger-content="${ifDefined(triggerContent)}"
+      type="${ifDefined(type)}"
+      value="${ifDefined(value)}"
+      @cds-tabs-beingselected="${handleBeforeSelected}"
+      @cds-tabs-selected="${onSelect}">
+      <cds-tab id="tab-all" target="panel-all" value="all">Tab label 1</cds-tab>
+      <cds-tab
         id="tab-cloudFoundry"
         target="panel-cloudFoundry"
-        disabled
-        value="cloudFoundry"
-        >Option 2</bx-tab
-      >
-      <bx-tab id="tab-staging" target="panel-staging" value="staging"
-        >Option 3</bx-tab
-      >
-      <bx-tab id="tab-dea" target="panel-dea" value="dea">Option 4</bx-tab>
-      <bx-tab id="tab-router" target="panel-router" value="router"
-        >Option 5</bx-tab
-      >
-    </bx-tabs>
-    <div class="bx-ce-demo-devenv--tab-panels">
+        value="cloudFoundry">
+        Tab label 2
+      </cds-tab>
+      <cds-tab id="tab-staging" target="panel-staging" value="staging" disabled>
+        Tab label 3
+      </cds-tab>
+      <cds-tab id="tab-dea" target="panel-dea" value="dea">Tab label 4</cds-tab>
+    </cds-tabs>
+    <div class="${prefix}-ce-demo-devenv--tab-panels">
       <div id="panel-all" role="tabpanel" aria-labelledby="tab-all" hidden>
-        <h1>Content for option 1</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
+        Tab Panel 1
       </div>
       <div
         id="panel-cloudFoundry"
         role="tabpanel"
         aria-labelledby="tab-cloudFoundry"
         hidden>
-        <h1>Content for option 2</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
+        <form style="margin: 2em">
+          <legend class="${prefix}--label">Validation example</legend>
+          <cds-checkbox
+            id="cb"
+            label-text="Accept privacy policy"></cds-checkbox>
+          <cds-button
+            style="margin-top: 1rem; margin-bottom: 1rem"
+            type="submit">
+            Submit
+          </cds-button>
+          <cds-text-input
+            type="text"
+            label="Text input label"
+            helper-text="Optional help text"
+            id="text-input-1"></cds-text-input>
+        </form>
       </div>
       <div
         id="panel-staging"
         role="tabpanel"
         aria-labelledby="tab-staging"
         hidden>
-        <h1>Content for option 3</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
+        Tab Panel 3
       </div>
       <div id="panel-dea" role="tabpanel" aria-labelledby="tab-dea" hidden>
-        <h1>Content for option 4</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
-      </div>
-      <div
-        id="panel-router"
-        role="tabpanel"
-        aria-labelledby="tab-router"
-        hidden>
-        <h1>Content for option 5</h1>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat.
-        </p>
+        Tab Panel 4
       </div>
     </div>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
+  ...storyDocs.parameters,
   knobs: {
-    'bx-tabs': () => ({
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
+    [`${prefix}-tabs`]: () => ({
       triggerContent: textNullable(
         'The default content of the trigger button for narrow screen (trigger-content)',
         'Select an item'
       ),
       type: select('Tabs type (type)', types, null),
-      value: textNullable('The value of the selected item (value)', 'staging'),
+      value: textNullable('The value of the selected item (value)', 'all'),
       disableSelection: boolean(
-        'Disable user-initiated selection change (Call event.preventDefault() in bx-content-switcher-beingselected event)',
+        `Disable user-initiated selection change (Call event.preventDefault() in ${prefix}-content-switcher-beingselected event)`,
         false
       ),
-      onBeforeSelect: action('bx-tabs-beingselected'),
-      onSelect: action('bx-tabs-selected'),
+      onBeforeSelect: action(`${prefix}-tabs-beingselected`),
+      onSelect: action(`${prefix}-tabs-selected`),
     }),
   },
 };
 
-export const skeleton = () => html`
-  <bx-tabs-skeleton>
-    <bx-tab-skeleton></bx-tab-skeleton>
-    <bx-tab-skeleton></bx-tab-skeleton>
-    <bx-tab-skeleton></bx-tab-skeleton>
-    <bx-tab-skeleton></bx-tab-skeleton>
-    <bx-tab-skeleton></bx-tab-skeleton>
-  </bx-tabs-skeleton>
-`;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
-  },
-};
-
 export default {
   title: 'Components/Tabs',
-  parameters: {
-    ...storyDocs.parameters,
-  },
 };
diff --git a/packages/carbon-web-components/src/components/tabs/tabs.scss b/packages/carbon-web-components/src/components/tabs/tabs.scss
index 5604ddcedc5..53f7b0d1199 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs.scss
+++ b/packages/carbon-web-components/src/components/tabs/tabs.scss
@@ -1,27 +1,62 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/components/tabs/tabs';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/button/index' as *;
+@use '@carbon/styles/scss/components/tabs/index';
+@use '@carbon/styles/scss/components/tabs/vars' as *;
+@use '@carbon/styles/scss/utilities/button-reset';
+
+$inset-transition: inset 110ms motion(standard, productive);
 
 :host(#{$prefix}-tabs),
 :host(#{$prefix}-tabs-skeleton) {
   @extend .#{$prefix}--tabs;
-}
 
-:host(#{$prefix}-tabs) {
-  @include focus-outline('reset');
+  .#{$prefix}--tabs-nav-content-container {
+    flex: 1 1 0%;
+    position: relative;
+    overflow: scroll;
+    height: $spacing-09; // for some reason, overflow: hidden shrinks the content
+    scrollbar-width: none;
 
-  display: block;
+    &::-webkit-scrollbar {
+      display: none;
+    }
+  }
 
-  &[color-scheme='light'] {
-    background-color: $ui-01;
+  /* Set to zero-specificity so it can be overridden by dynamic stylesheet */
+  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
+  :where(.#{$prefix}--tabs-nav-content) {
+    position: absolute;
+    height: 100%;
+    inset-inline-start: 0;
+    transition: $inset-transition;
   }
 
+  .#{$prefix}--tabs-nav {
+    display: block;
+    position: absolute;
+  }
+
+  .#{$prefix}--tab--overflow-nav-button {
+    z-index: 1;
+  }
+}
+
+:host(#{$prefix}-tabs) {
+  @include focus-outline('reset');
+
   .#{$prefix}--tabs-trigger svg {
     width: auto;
     height: auto;
@@ -34,122 +69,124 @@
   }
 }
 
-:host(#{$prefix}-tabs[type='container']) {
-  @extend .#{$prefix}--tabs--container;
-}
-
+// copying styles from
 :host(#{$prefix}-tab) {
-  @extend .#{$prefix}--tabs__nav-item;
-
-  outline: none;
+  display: flex;
+  background: transparent;
+  width: 100%;
 
-  .#{$prefix}--tabs__nav-link:active {
+  .#{$prefix}--tabs__nav-link {
+    @include button-reset.reset($width: false);
     @include focus-outline('reset');
+    @include type-style('body-compact-01');
+
+    align-items: center;
+    width: 100%;
+    overflow: hidden;
+    padding: $spacing-04 $spacing-05 $spacing-03;
+    border-bottom: $tab-underline-color;
+    color: $text-secondary;
+    text-align: left;
+    text-decoration: none;
+    text-overflow: ellipsis;
+    transition: border $duration-fast-01 motion(standard, productive),
+      outline $duration-fast-01 motion(standard, productive);
+    white-space: nowrap;
+
+    &:focus,
+    &:active {
+      @include focus-outline('outline');
+    }
   }
-}
 
-:host(#{$prefix}-tab:hover) {
-  @include carbon--breakpoint(md) {
-    background-color: transparent;
-    box-shadow: none;
+  &[selected] {
+    .#{$prefix}--tabs__nav-link {
+      @include type-style('heading-compact-01');
+
+      border-bottom: $spacing-01 solid $border-interactive;
+    }
   }
 
-  background-color: $hover-ui;
-  box-shadow: 0 -1px 0 $hover-ui;
+  outline: none;
 }
 
-:host(#{$prefix}-tab[type='container']) {
-  @include carbon--breakpoint(md) {
-    background-color: $ui-03;
-
-    + .#{$prefix}--tabs__nav-item {
-      margin-left: 0;
-      // Draws the border without affecting the inner-content
-      box-shadow: -1px 0 0 0 $ui-04;
-    }
+:host(#{$prefix}-tab:hover) {
+  background-color: transparent;
+  box-shadow: 0 -1px 0 $background-hover;
 
-    + .#{$prefix}--tabs__nav-item.#{$prefix}--tabs__nav-item--selected,
-    &.#{$prefix}--tabs__nav-item--selected + .#{$prefix}--tabs__nav-item {
-      box-shadow: none;
-    }
+  a.#{$prefix}--tabs__nav-link {
+    border-bottom: $tab-underline-color-hover;
+    color: $text-primary;
   }
+}
 
-  &:hover {
-    @include carbon--breakpoint(md) {
-      background-color: $hover-selected-ui;
-    }
-  }
+:host(#{$prefix}-tabs[type='contained'])
+  .#{$prefix}--tabs-nav-content-container {
+  height: $spacing-09;
+}
+
+:host(#{$prefix}-tab[type='contained']) {
+  background-color: $layer-accent-01;
 
   a.#{$prefix}--tabs__nav-link {
-    @include carbon--breakpoint(md) {
-      height: rem(48px);
-      // height - vertical padding
-      /* stylelint-disable declaration-property-unit-whitelist */
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-    }
+    height: $spacing-09;
+    padding: $spacing-03 $spacing-05;
+    // height - vertical padding
+    /* stylelint-disable declaration-property-unit-allowed-list */
+    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
   }
 }
 
-// `[role]` is only for specificity.
-// We have `:not()` usage in the corresponding Carbon core style
-// which puts specificity of "specific" scenario though the style is for "regular" scenario
-:host(#{$prefix}-tab[type='container'][role]),
-:host(#{$prefix}-tab[type='container'][role]:hover) {
+:host(#{$prefix}-tab[type='contained']),
+:host(#{$prefix}-tab[type='contained']:hover) {
   a.#{$prefix}--tabs__nav-link {
-    @include carbon--breakpoint(md) {
-      border-bottom: none;
-    }
+    border-bottom: none;
+    // Draws the border without affecting the inner-content
+    box-shadow: rem(-1px) 0 0 0 $border-strong;
   }
 }
 
+:host(#{$prefix}-tab[type='contained'][hide-divider])
+  a.#{$prefix}--tabs__nav-link {
+  box-shadow: rem(-1px) 0 0 0 transparent;
+}
+
 // `[role]` is only for specificity.
 // We have `:not()` usage in the corresponding Carbon core style
 // which puts specificity of "specific" scenario though the style is for "regular" scenario
 :host(#{$prefix}-tab[disabled][role]),
 :host(#{$prefix}-tab[disabled][role]:hover) {
-  background-color: $ui-01;
+  background-color: transparent;
   box-shadow: none;
   cursor: not-allowed;
   outline: none;
 
-  @include carbon--breakpoint(md) {
-    background-color: transparent;
-  }
-
   .#{$prefix}--tabs__nav-link {
     color: $tab-text-disabled;
     pointer-events: none;
-
-    @include carbon--breakpoint(md) {
-      border-bottom: $tab-underline-disabled;
-    }
-  }
-}
-
-:host(#{$prefix}-tab[type='container'][disabled][role]),
-:host(#{$prefix}-tab[type='container'][disabled][role]:hover) {
-  @include carbon--breakpoint(md) {
-    background-color: $disabled-02;
+    outline: none;
+    border-bottom: $tab-underline-disabled;
   }
 }
 
-:host(#{$prefix}-tab[type='container'][disabled][role])
+:host(#{$prefix}-tab[type='contained'][disabled][role])
   .#{$prefix}--tabs__nav-link {
-  @include carbon--breakpoint(md) {
-    color: $disabled-03;
-  }
+  background-color: $button-disabled;
+  border-bottom: none;
+  color: $text-on-color-disabled;
 }
 
 :host(#{$prefix}-tab[selected]) {
-  background-color: $hover-ui;
-  transition: color $duration--fast-01 motion(standard, productive);
+  display: flex;
+  background-color: transparent;
 
-  &:hover {
-    background-color: $selected-ui;
+  .#{$prefix}--tabs__nav-link {
+    @include type-style('heading-01');
+  }
+  transition: color $duration-fast-01 motion(standard, productive);
 
-    @include carbon--breakpoint(md) {
-      background-color: transparent;
-    }
+  &:hover {
+    background-color: transparent;
   }
 
   .#{$prefix}--tabs__nav-link {
@@ -157,69 +194,31 @@
     // Need to override Carbon core's non-selected focus color
     &:focus,
     &:active {
-      color: $text-01;
-    }
-  }
-
-  @include carbon--breakpoint(md) {
-    display: flex;
-    background-color: transparent;
-
-    .#{$prefix}--tabs__nav-link {
-      @include type-style('heading-01');
-
-      border-bottom: 3px solid $interactive-01;
-
-      &:focus,
-      &:active {
-        border-bottom-width: 2px;
-      }
+      color: $text-primary;
     }
   }
 }
 
-:host(#{$prefix}-tab[type='container'][selected]),
-:host(#{$prefix}-tab[type='container'][selected]:hover) {
-  @include carbon--breakpoint(md) {
-    background-color: $ui-01;
-
-    .#{$prefix}--tabs__nav-link {
-      // height - vertical padding
-      line-height: calc(#{rem(48px)} - (#{$spacing-03} * 2));
-      // Draws the border without affecting the inner-content
-      box-shadow: inset 0 2px 0 0 $interactive-04;
-      border-bottom: none;
-    }
+:host(#{$prefix}-tab[type='contained'][selected]),
+:host(#{$prefix}-tab[type='contained'][selected]:hover) {
+  background-color: $layer-01;
 
-    .#{$prefix}--tabs__nav-link:focus,
-    .#{$prefix}--tabs__nav-link:active {
-      box-shadow: none;
-    }
+  .#{$prefix}--tabs__nav-link {
+    // height - vertical padding
+    line-height: calc(#{$spacing-09} - (#{$spacing-03} * 2));
+    // Draws the border without affecting the inner-content
+    box-shadow: inset 0 $spacing-01 0 0 $interactive;
+    border-bottom: none;
   }
-}
-
-:host(#{$prefix}-tab[highlighted]),
-:host(#{$prefix}-tab[highlighted]:hover) {
-  background-color: $hover-ui;
-  box-shadow: 0 -1px 0 $hover-ui;
 
-  // `highlighted` is not used in wide mode,
-  // but we need guard for a scenario where a tab is highlighted and then the UI turned to wide mode
-  @include carbon--breakpoint(md) {
-    background-color: transparent;
+  .#{$prefix}--tabs__nav-link:focus,
+  .#{$prefix}--tabs__nav-link:active {
     box-shadow: none;
   }
 }
 
-:host(#{$prefix}-tab[highlighted][selected]),
-:host(#{$prefix}-tab[highlighted][selected]:hover) {
-  background-color: $selected-ui;
-
-  // `highlighted` is not used in wide mode,
-  // but we need guard for a scenario where a tab is highlighted and then the UI turned to wide mode
-  @include carbon--breakpoint(md) {
-    background-color: transparent;
-  }
+:host(#{$prefix}-tab[type='contained']:hover) {
+  background-color: $layer-accent-hover;
 }
 
 // Disabled tab never gets selected, but we guard for manual addition of `selected` attribute
@@ -228,26 +227,20 @@
 :host(#{$prefix}-tab[disabled][in-focus][selected]),
 :host(#{$prefix}-tab[disabled][in-focus][selected]:hover) {
   display: flex;
-  background-color: $ui-01;
+  background-color: transparent;
   box-shadow: none;
 
-  @include carbon--breakpoint(md) {
-    @include focus-outline('reset');
-
-    background-color: transparent;
-  }
+  @include focus-outline('reset');
 
   .#{$prefix}--tabs__nav-link {
-    @include carbon--breakpoint(md) {
-      @include type-style('body-short-01');
+    @include type-style('body-short-01');
 
-      color: $tab-text-disabled;
-      border-bottom: $tab-underline-disabled;
+    color: $tab-text-disabled;
+    border-bottom: $tab-underline-disabled;
 
-      &:focus,
-      &:active {
-        border-bottom-width: 3px;
-      }
+    &:focus,
+    &:active {
+      border-bottom-width: 3px;
     }
   }
 }
@@ -259,20 +252,16 @@
 }
 
 :host(#{$prefix}-tab-skeleton) {
-  @include carbon--breakpoint(md) {
-    margin-left: rem(2px);
-  }
+  margin-left: $spacing-01;
 
   .#{$prefix}--tabs__nav-link {
     @include skeleton;
 
     width: rem(75px);
-    height: rem(12px);
+    height: $spacing-04;
   }
 }
 
 :host(#{$prefix}-tab-skeleton:first-of-type) {
-  @include carbon--breakpoint(md) {
-    margin-left: 0;
-  }
+  margin-left: 0;
 }
diff --git a/packages/carbon-web-components/src/components/tabs/tabs.ts b/packages/carbon-web-components/src/components/tabs/tabs.ts
index 5246591b6ba..18320f948a7 100644
--- a/packages/carbon-web-components/src/components/tabs/tabs.ts
+++ b/packages/carbon-web-components/src/components/tabs/tabs.ts
@@ -7,131 +7,67 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query } from 'lit-element';
-import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { TemplateResult, html } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
-import { find, forEach } from '../../globals/internal/collection-helpers';
-import BXContentSwitcher, {
+import { forEach } from '../../globals/internal/collection-helpers';
+import ChevronRight16 from '@carbon/icons/lib/chevron--right/16';
+import ChevronLeft16 from '@carbon/icons/lib/chevron--left/16';
+import CDSContentSwitcher, {
   NAVIGATION_DIRECTION,
 } from '../content-switcher/content-switcher';
-import {
-  NAVIGATION_DIRECTION_NARROW,
-  TABS_COLOR_SCHEME,
-  TABS_KEYBOARD_ACTION,
-  TABS_TYPE,
-} from './defs';
-import BXTab from './tab';
+import { TABS_KEYBOARD_ACTION, TABS_TYPE } from './defs';
+import CDSTab from './tab';
 import styles from './tabs.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
-export {
-  NAVIGATION_DIRECTION,
-  NAVIGATION_DIRECTION_NARROW,
-  TABS_COLOR_SCHEME,
-  TABS_KEYBOARD_ACTION,
-  TABS_TYPE,
-};
+export { NAVIGATION_DIRECTION, TABS_KEYBOARD_ACTION, TABS_TYPE };
 
 /**
  * Tabs.
  *
- * @element bx-tabs
- * @fires bx-tabs-beingselected
+ * @element cds-tabs
+ * @fires cds-tabs-beingselected
  *   The custom event fired before a tab is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-tabs-selected - The custom event fired after a a tab is selected upon a user gesture.
+ * @fires cds-tabs-selected - The custom event fired after a a tab is selected upon a user gesture.
  */
 @customElement(`${prefix}-tabs`)
-class BXTabs extends HostListenerMixin(BXContentSwitcher) {
+export default class CDSTabs extends HostListenerMixin(CDSContentSwitcher) {
   /**
    * The latest status of this dropdown, for screen reader to accounce.
    */
   private _assistiveStatusText?: string;
 
-  /**
-   * `true` if the narrow mode dropdown should be open.
-   */
-  private _open = false;
-
   /**
    * The currently selected index
    */
+  // @ts-ignore: TS thinks this method is not referred to
   private _currentIndex: number = 0;
 
-  /**
-   * The content of the selected item, used in the narrow mode.
-   */
-  private _selectedItemContent: DocumentFragment | null = null;
-
   /**
    * Total number of tabs in the component
    */
   private _totalTabs: number = 0;
 
   /**
-   * The DOM element for the trigger button in narrow mode.
+   * `true` if the tablist is scrollable
    */
-  @query('#trigger')
-  private _triggerNode!: HTMLDivElement;
+  // @ts-ignore: TS thinks this method is not referred to
+  private _isScrollable: boolean = false;
 
   /**
-   * Handles `blur` event handler on this element.
-   *
-   * @param event The event.
+   * The DOM element for the tablist.
    */
-  @HostListener('focusout')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleFocusOut({ relatedTarget }: FocusEvent) {
-    if (!this.contains(relatedTarget as Node)) {
-      this._handleUserInitiatedToggle(false);
-    }
-  }
-
-  /**
-   * Handles user-initiated toggling the open state.
-   *
-   * @param [force] If specified, forces the open state to the given one.
-   */
-  private _handleUserInitiatedToggle(force: boolean = !this._open) {
-    this._open = force;
-    if (this._open) {
-      this._assistiveStatusText = this.selectingItemsAssistiveText;
-    } else {
-      const {
-        selectedItemAssistiveText,
-        triggerContent,
-        _assistiveStatusText: assistiveStatusText,
-        _selectedItemContent: selectedItemContent,
-      } = this;
-      const selectedItemText =
-        (selectedItemContent && selectedItemContent.textContent) ||
-        triggerContent;
-      if (
-        selectedItemText &&
-        assistiveStatusText !== selectedItemAssistiveText
-      ) {
-        this._assistiveStatusText = selectedItemText;
-      }
-    }
-    this.requestUpdate();
-  }
+  private tablist: Element | null = null;
 
   /**
-   * Clears the selection of tabs.
+   * The width of the overflow scroll buttons.
    */
-  private _clearHighlight() {
-    forEach(
-      this.querySelectorAll((this.constructor as typeof BXTabs).selectorItem),
-      (item) => {
-        (item as BXTab).highlighted = false;
-      }
-    );
-  }
+  private BUTTON_WIDTH = 44;
 
   /**
    * Navigates through tabs.
@@ -139,6 +75,7 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
    * @param direction `-1` to navigate backward, `1` to navigate forward.
    * @param [options] The options.
    * @param [options.immediate]
+   *   Defaults to `true`
    *   `true` to make it "immediate selection change" mode, which does:
    *
    *   Starts with the selected item
@@ -146,14 +83,14 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
    */
   protected _navigate(
     direction: number,
-    { immediate }: { immediate?: boolean } = {}
+    { immediate = true }: { immediate?: boolean } = {}
   ) {
     const { selectorItem, selectorItemHighlighted, selectorItemSelected } = this
-      .constructor as typeof BXTabs;
+      .constructor as typeof CDSTabs;
     const nextItem = this._getNextItem(
       this.querySelector(
         immediate ? selectorItemSelected : selectorItemHighlighted
-      ) as BXTab,
+      ) as CDSTab,
       direction
     );
     if (!nextItem) {
@@ -161,10 +98,10 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
     }
 
     if (immediate) {
-      this._handleUserInitiatedSelectItem(nextItem as BXTab);
+      this._handleUserInitiatedSelectItem(nextItem as CDSTab);
     } else {
       forEach(this.querySelectorAll(selectorItem), (item) => {
-        (item as BXTab)[immediate ? 'selected' : 'highlighted'] =
+        (item as CDSTab)[immediate ? 'selected' : 'highlighted'] =
           nextItem === item;
       });
     }
@@ -172,7 +109,7 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
     // Using `{ block: 'nearest' }` to prevent scrolling unless scrolling is absolutely necessary.
     // `scrollIntoViewOptions` seems to work in latest Safari despite of MDN/caniuse table.
     // IE falls back to the old behavior.
-    nextItem.scrollIntoView({ block: 'nearest' });
+    nextItem.scrollIntoView({ block: 'nearest', inline: 'nearest' });
 
     const nextItemText = nextItem.textContent;
     if (nextItemText) {
@@ -184,105 +121,128 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
 
   @HostListener('click')
   protected _handleClick(event: MouseEvent) {
-    const { target } = event;
-    if (this === target) {
-      this._handleUserInitiatedToggle();
-    } else if ((target as BXTab).value === this.value) {
-      // Clicking on selected item, simply closes the narrow mode dropdown
-      this._handleUserInitiatedToggle(false);
-    } else {
-      // Trying to select the item
-      // If the custom event of the selection is canceled, we don't close the narrow mode dropdown
-      super._handleClick(event);
-    }
+    super._handleClick(event);
   }
 
   @HostListener('keydown')
   protected _handleKeydown(event: KeyboardEvent) {
-    const { _open: open, _triggerNode: triggerNode } = this;
-    const { key, target } = event;
-    const narrowMode = Boolean(triggerNode.offsetParent);
-    const action = (this.constructor as typeof BXTabs).getAction(key, {
-      narrowMode,
-    });
-    if (!open && narrowMode) {
-      // Menu closed in narrow mode
-      switch (action) {
-        case TABS_KEYBOARD_ACTION.NAVIGATING:
-          this._handleUserInitiatedToggle(true);
-          // If this menu gets open with an arrow key, resets the highlight
-          this._clearHighlight();
-          break;
-        case TABS_KEYBOARD_ACTION.TRIGGERING:
-          this._handleUserInitiatedToggle(true);
-          break;
-        default:
-          break;
-      }
-    } else {
-      switch (action) {
-        case TABS_KEYBOARD_ACTION.CLOSING:
-          this._handleUserInitiatedToggle(false);
-          break;
-        case TABS_KEYBOARD_ACTION.SELECTING:
-          this._handleUserInitiatedSelectItem(target as BXTab);
-          break;
-        case TABS_KEYBOARD_ACTION.HOME:
-          this._navigate(this._currentIndex + this._totalTabs, {
-            immediate: !narrowMode,
+    const { key } = event;
+    const action = (this.constructor as typeof CDSTabs).getAction(key);
+    const enabledTabs = this.querySelectorAll(`${prefix}-tab:not([disabled])`);
+    switch (action) {
+      case TABS_KEYBOARD_ACTION.HOME:
+        {
+          const [firstEnabledTab] = enabledTabs;
+          firstEnabledTab.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
           });
-          break;
-        case TABS_KEYBOARD_ACTION.END:
-          this._navigate(-this._currentIndex, { immediate: !narrowMode });
-          break;
-        case TABS_KEYBOARD_ACTION.NAVIGATING:
-          {
-            const direction = narrowMode
-              ? NAVIGATION_DIRECTION_NARROW[key]
-              : NAVIGATION_DIRECTION[key];
-            if (direction) {
-              this._navigate(direction, { immediate: !narrowMode });
-            }
-          }
-          break;
-        case TABS_KEYBOARD_ACTION.TRIGGERING:
-          {
-            const { selectorItemHighlighted } = this
-              .constructor as typeof BXTabs;
-            const highlightedItem = this.querySelector(
-              selectorItemHighlighted
-            ) as BXTab;
-            if (highlightedItem) {
-              if (highlightedItem.value === this.value) {
-                // Selecting an already-selected item, simply closes the narrow mode dropdown
-                this._handleUserInitiatedToggle(false);
-              } else {
-                // Trying to select the item
-                // If the custom event of the selection is canceled, we don't close the narrow mode dropdown
-                this._handleUserInitiatedSelectItem(highlightedItem);
-              }
-            } else {
-              this._handleUserInitiatedToggle();
-            }
+          this._handleUserInitiatedSelectItem(firstEnabledTab as CDSTab);
+          this.requestUpdate();
+        }
+        break;
+      case TABS_KEYBOARD_ACTION.END:
+        {
+          const lastEnabledTab = enabledTabs[enabledTabs.length - 1];
+          lastEnabledTab.scrollIntoView({
+            block: 'nearest',
+            inline: 'nearest',
+          });
+          this._handleUserInitiatedSelectItem(lastEnabledTab as CDSTab);
+          this.requestUpdate();
+        }
+        break;
+      case TABS_KEYBOARD_ACTION.NAVIGATING:
+        {
+          const direction = NAVIGATION_DIRECTION[key];
+          if (direction) {
+            this._navigate(direction);
           }
-          break;
-        default:
-          break;
-      }
+        }
+        break;
+      default:
+        break;
     }
   }
 
-  protected _selectionDidChange(itemToSelect: BXTab) {
+  /**
+   * Handles click on overflow scroll buttons.
+   *
+   * @param _ Event object
+   * @param [options] The options.
+   * @param [options.direction] `-1` to scroll forward, `1` to scroll backward.
+   */
+  protected _handleScrollButtonClick(_, { direction }) {
+    if (!this.tablist) {
+      return;
+    }
+    const { scrollLeft, clientWidth, scrollWidth } =
+      this._contentContainerNode!;
+    switch (direction) {
+      case -1:
+        this._contentContainerNode!.scrollLeft = Math.max(
+          scrollLeft - (scrollWidth / this._totalTabs) * 1.5,
+          0
+        );
+        break;
+      case 1:
+        this._contentContainerNode!.scrollLeft =
+          Math.min(
+            scrollLeft + (scrollWidth / this._totalTabs) * 1.5,
+            scrollWidth - clientWidth
+          ) + 1;
+        break;
+      default:
+        break;
+    }
+  }
+
+  _handleSlotchange() {
+    const { selectorItemSelected } = this.constructor as typeof CDSTabs;
+    const selectedItem = this.querySelector(selectorItemSelected);
+    const nextItem = this._getNextItem(selectedItem as CDSTab, 1);
+
+    // Specifies child `<cds-tab>` to hide its divider instead of using CSS,
+    // until `:host-context()` gets supported in all major browsers
+    (nextItem as CDSTab).hideDivider = true;
+  }
+
+  protected _selectionDidChange(itemToSelect: CDSTab) {
     super._selectionDidChange(itemToSelect);
     this._assistiveStatusText = this.selectedItemAssistiveText;
-    this._handleUserInitiatedToggle(false);
   }
 
   /**
-   * The color scheme.
+   * The scrolling container.
    */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = TABS_COLOR_SCHEME.REGULAR;
+  @query(`.${prefix}--tabs-nav-content-container`)
+  private _contentContainerNode?: HTMLElement;
+
+  /**
+   * The scrolling content.
+   */
+  @query(`.${prefix}--tabs-nav-content`)
+  private _contentNode?: HTMLElement;
+
+  /**
+   * The current scroll position.
+   */
+  @state()
+  private _currentScrollPosition = 0;
+
+  /**
+   * The left-hand sentinel to track intersection with the host element.
+   * If they intersect, the left-hand paginator button should be hidden.
+   */
+  @query(`.${prefix}--sub-content-left`)
+  private _intersectionLeftSentinelNode?: HTMLElement;
+
+  /**
+   * The right-hand sentinel to track intersection with the host element.
+   * If they intersect, the right-hand paginator button should be hidden.
+   */
+  @query(`.${prefix}--sub-content-right`)
+  private _intersectionRightSentinelNode?: HTMLElement;
 
   /**
    * An assistive text for screen reader to announce, telling the open state.
@@ -309,64 +269,226 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
   @property({ reflect: true })
   type = TABS_TYPE.REGULAR;
 
+  /**
+   * `true` if left-hand scroll intersection sentinel intersects with the host element.
+   * In this condition, the left-hand paginator button should be hidden.
+   */
+  @state()
+  private _isIntersectionLeftTrackerInContent = true;
+
+  /**
+   * `true` if right-hand scroll intersection sentinel intersects with the host element.
+   * In this condition, the right-hand paginator button should be hidden.
+   */
+  @state()
+  private _isIntersectionRightTrackerInContent = true;
+
+  /**
+   * The observer for the intersection of left-side content edge.
+   */
+  private _observerIntersection: IntersectionObserver | null = null;
+
+  /**
+   * The intersection observer callback for the scrolling container.
+   *
+   * @param records The intersection observer records.
+   */
+  private _observeIntersectionContainer = (records) => {
+    const {
+      _intersectionLeftSentinelNode: intersectionLeftSentinelNode,
+      _intersectionRightSentinelNode: intersectionRightSentinelNode,
+    } = this;
+
+    records.forEach(({ isIntersecting, target }) => {
+      if (target === intersectionLeftSentinelNode) {
+        this._isIntersectionLeftTrackerInContent = isIntersecting;
+      }
+      if (target === intersectionRightSentinelNode) {
+        this._isIntersectionRightTrackerInContent = isIntersecting;
+      }
+    });
+  };
+
+  /**
+   * Cleans-up and creates the intersection observer for the scrolling container.
+   *
+   * @param [options] The options.
+   * @param [options.create] `true` to create the new intersection observer.
+   */
+  private _cleanAndCreateIntersectionObserverContainer({
+    create,
+  }: { create?: boolean } = {}) {
+    const {
+      _intersectionLeftSentinelNode: intersectionLeftSentinelNode,
+      _intersectionRightSentinelNode: intersectionRightSentinelNode,
+    } = this;
+
+    if (this._observerIntersection) {
+      this._observerIntersection.disconnect();
+      this._observerIntersection = null;
+    }
+
+    if (create) {
+      this._observerIntersection = new IntersectionObserver(
+        this._observeIntersectionContainer,
+        {
+          root: this,
+          threshold: 0,
+        }
+      );
+
+      if (intersectionLeftSentinelNode) {
+        this._observerIntersection.observe(intersectionLeftSentinelNode);
+      }
+      if (intersectionRightSentinelNode) {
+        this._observerIntersection.observe(intersectionRightSentinelNode);
+      }
+    }
+  }
+
+  disconnectedCallback() {
+    this._cleanAndCreateIntersectionObserverContainer();
+    super.disconnectedCallback();
+  }
+
   shouldUpdate(changedProperties) {
     super.shouldUpdate(changedProperties);
-    const { selectorItem } = this.constructor as typeof BXTabs;
+    if (this.tablist) {
+      const { clientWidth, scrollWidth } = this.tablist;
+      this._isScrollable = scrollWidth > clientWidth;
+    }
+    const { selectorItem } = this.constructor as typeof CDSTabs;
     if (changedProperties.has('type')) {
       forEach(this.querySelectorAll(selectorItem), (elem) => {
         this._totalTabs++;
-        (elem as BXTab).type = this.type;
+        (elem as CDSTab).type = this.type;
       });
     }
+    return true;
+  }
+
+  firstUpdated() {
+    const { selectorTablist } = this.constructor as typeof CDSTabs;
+    const tablist = this.shadowRoot!.querySelector(selectorTablist)!;
+    this.tablist = tablist;
+    this._cleanAndCreateIntersectionObserverContainer({ create: true });
+  }
+
+  updated(changedProperties) {
     if (changedProperties.has('value')) {
-      const item = find(
-        this.querySelectorAll(selectorItem),
-        (elem) => (elem as BXTab).value === this.value
-      );
-      if (item) {
-        const range = this.ownerDocument!.createRange();
-        range.selectNodeContents(item);
-        this._selectedItemContent = range.cloneContents();
-      } else {
-        this._selectedItemContent = null;
+      const tab = this.querySelector(
+        `${prefix}-tab[value="${this.value}"]`
+      ) as HTMLElement;
+      if (tab) {
+        const { width: tabWidth } = tab?.getBoundingClientRect() ?? {};
+        const start = tab.offsetLeft ?? 0;
+        const end = tab.offsetLeft + tabWidth;
+
+        // The start and end of the visible area of the tablist
+        const visibleStart = this.tablist!.scrollLeft + this.BUTTON_WIDTH;
+        const visibleEnd =
+          this.tablist!.scrollLeft +
+          this.tablist!.clientWidth -
+          this.BUTTON_WIDTH;
+
+        // The beginning of the tab is clipped and not visible
+        if (start < visibleStart) {
+          this.tablist!.scrollLeft = start - this.BUTTON_WIDTH;
+        }
+
+        // The end of the tab is clipped and not visible
+        if (end > visibleEnd) {
+          this.tablist!.scrollLeft =
+            end + this.BUTTON_WIDTH - this.tablist!.clientWidth;
+        }
+      }
+    }
+
+    if (changedProperties.has('_currentScrollPosition')) {
+      if (this._contentNode) {
+        this._contentNode.style.insetInlineStart = `-${this._currentScrollPosition}px`;
       }
     }
-    return true;
   }
 
-  render() {
+  /**
+   * Render the previous button if tablist is wider than container.
+   */
+  protected renderPreviousButton(): TemplateResult | null {
     const {
-      triggerContent,
-      _assistiveStatusText: assistiveStatusText,
-      _open: open,
-      _selectedItemContent: selectedItemContent,
+      _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent,
     } = this;
-    const triggerClasses = classMap({
-      [`${prefix}--tabs-trigger`]: true,
-      [`${prefix}--tabs-trigger--open`]: open,
+    const previousButtonClasses = classMap({
+      [`${prefix}--tab--overflow-nav-button`]: true,
+      [`${prefix}--tabs__nav-caret-left`]: true,
+      [`${prefix}--tab--overflow-nav-button--previous`]: true,
+      [`${prefix}--tab--overflow-nav-button--hidden`]:
+        isIntersectionLeftTrackerInContent,
     });
-    const listClasses = classMap({
-      [`${prefix}--tabs__nav`]: true,
-      [`${prefix}--tabs__nav--hidden`]: !open,
+    return html`
+      <button
+        part="prev-button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="${previousButtonClasses}"
+        @click=${(_) =>
+          this._handleScrollButtonClick(_, {
+            direction: NAVIGATION_DIRECTION.Left,
+          })}>
+        ${ChevronLeft16()}
+      </button>
+    `;
+  }
+
+  /**
+   * Render the next button if tablist is wider than container.
+   */
+  protected renderNextButton(): TemplateResult | null {
+    const {
+      _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,
+    } = this;
+    const nextButtonClasses = classMap({
+      [`${prefix}--tab--overflow-nav-button`]: true,
+      [`${prefix}--tabs__nav-caret-right`]: true,
+      [`${prefix}--tab--overflow-nav-button--next`]: true,
+      [`${prefix}--tab--overflow-nav-button--hidden`]:
+        isIntersectionRightTrackerInContent,
     });
     return html`
-      <div
-        id="trigger"
-        role="button"
-        class="${triggerClasses}"
-        aria-labelledby="trigger-label"
-        aria-expanded="${String(open)}"
-        aria-haspopup="listbox"
-        aria-owns="tablist"
-        aria-controls="tablist">
-        <span id="trigger-label" class="${prefix}--tabs-trigger-text">
-          ${selectedItemContent || triggerContent}
-        </span>
-        ${ChevronDown16({ 'aria-hidden': 'true' })}
+      <button
+        part="next-button"
+        tabindex="-1"
+        aria-hidden="true"
+        class="${nextButtonClasses}"
+        @click=${(_) =>
+          this._handleScrollButtonClick(_, {
+            direction: NAVIGATION_DIRECTION.Right,
+          })}>
+        ${ChevronRight16()}
+      </button>
+    `;
+  }
+
+  render() {
+    const {
+      _assistiveStatusText: assistiveStatusText,
+      _handleSlotchange: handleSlotchange,
+    } = this;
+
+    return html`
+      ${this.renderPreviousButton()}
+      <div class="${prefix}--tabs-nav-content-container">
+        <div class="${prefix}--tabs-nav-content">
+          <div class="${prefix}--tabs-nav">
+            <div id="tablist" role="tablist" class="${prefix}--tab--list">
+              <div class="${prefix}--sub-content-left"></div>
+              <slot @slotchange=${handleSlotchange}></slot>
+              <div class="${prefix}--sub-content-right"></div>
+            </div>
+          </div>
+        </div>
       </div>
-      <ul id="tablist" role="tablist" class="${listClasses}">
-        <slot></slot>
-      </ul>
+      ${this.renderNextButton()}
       <div
         class="${prefix}--assistive-text"
         role="status"
@@ -410,6 +532,13 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
     return `${prefix}-tab[selected]`;
   }
 
+  /**
+   * A selector that returns the tablist
+   */
+  static get selectorTablist() {
+    return `.${prefix}--tab--list`;
+  }
+
   /**
    * The name of the custom event fired before a tab is selected upon a user gesture.
    * Cancellation of this event stops changing the user-initiated selection.
@@ -429,33 +558,18 @@ class BXTabs extends HostListenerMixin(BXContentSwitcher) {
 
   /**
    * @param key The key symbol.
-   * @param [options] The options.
-   * @param [options.narrowMode] `true` to get the action for narrow mode.
    * @returns A action for dropdown for the given key symbol.
    */
-  static getAction(key: string, { narrowMode }: { narrowMode?: boolean }) {
-    if (key === 'Escape') {
-      return TABS_KEYBOARD_ACTION.CLOSING;
-    }
-    if (key === 'Enter') {
-      return TABS_KEYBOARD_ACTION.SELECTING;
-    }
+  static getAction(key: string) {
     if (key === 'Home') {
       return TABS_KEYBOARD_ACTION.HOME;
     }
     if (key === 'End') {
       return TABS_KEYBOARD_ACTION.END;
     }
-    if (
-      key in (narrowMode ? NAVIGATION_DIRECTION_NARROW : NAVIGATION_DIRECTION)
-    ) {
+    if (key in NAVIGATION_DIRECTION) {
       return TABS_KEYBOARD_ACTION.NAVIGATING;
     }
-    if (narrowMode && this.TRIGGER_KEYS.has(key)) {
-      return TABS_KEYBOARD_ACTION.TRIGGERING;
-    }
     return TABS_KEYBOARD_ACTION.NONE;
   }
 }
-
-export default BXTabs;
diff --git a/packages/carbon-web-components/src/components/tag/defs.ts b/packages/carbon-web-components/src/components/tag/defs.ts
index 28b28a03964..77877db4b7f 100644
--- a/packages/carbon-web-components/src/components/tag/defs.ts
+++ b/packages/carbon-web-components/src/components/tag/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -12,9 +12,9 @@
  */
 export enum TAG_SIZE {
   /**
-   * Regular size.
+   * Medium size (default).
    */
-  REGULAR = '',
+  MEDIUM = 'md',
 
   /**
    * Small size.
diff --git a/packages/carbon-web-components/src/components/tag/filter-tag.ts b/packages/carbon-web-components/src/components/tag/filter-tag.ts
deleted file mode 100644
index ebdb678ef19..00000000000
--- a/packages/carbon-web-components/src/components/tag/filter-tag.ts
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, query, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import Close16 from '@carbon/icons/lib/close/16';
-import FocusMixin from '../../globals/mixins/focus';
-import HostListener from '../../globals/decorators/host-listener';
-import HostListenerMixin from '../../globals/mixins/host-listener';
-import { TAG_SIZE, TAG_TYPE } from './defs';
-import styles from './tag.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-export { TAG_SIZE, TAG_TYPE };
-
-const { prefix } = settings;
-
-/**
- * Filter tag.
- *
- * @element bx-filter-tag
- */
-@customElement(`${prefix}-filter-tag`)
-export default class BXFilterTag extends HostListenerMixin(
-  FocusMixin(LitElement)
-) {
-  @query('button')
-  protected _buttonNode!: HTMLButtonElement;
-
-  /**
-   * Handles `click` event on this element.
-   *
-   * @param event The event.
-   */
-  @HostListener('shadowRoot:click')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleClick = (event: MouseEvent) => {
-    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {
-      if (this.disabled) {
-        event.stopPropagation();
-      } else if (this.open) {
-        const init = {
-          bubbles: true,
-          cancelable: true,
-          composed: true,
-          detail: {
-            triggeredBy: event.target,
-          },
-        };
-        if (
-          this.dispatchEvent(
-            new CustomEvent(
-              (this.constructor as typeof BXFilterTag).eventBeforeClose,
-              init
-            )
-          )
-        ) {
-          this.open = false;
-          this.dispatchEvent(
-            new CustomEvent(
-              (this.constructor as typeof BXFilterTag).eventClose,
-              init
-            )
-          );
-        }
-      }
-    }
-  };
-
-  /**
-   * Text to show on filter tag "clear" buttons. Corresponds to the attribute with the same name
-   */
-  @property({ type: String, reflect: true })
-  title = 'Clear filter';
-
-  /**
-   * `true` if the tag should be disabled
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  /**
-   * `true` if the tag should be open.
-   */
-  @property({ type: Boolean, reflect: true })
-  open = true;
-
-  /**
-   * The size of the tag.
-   */
-  @property({ reflect: true })
-  size = TAG_SIZE.REGULAR;
-
-  /**
-   * The type of the tag.
-   */
-  @property({ reflect: true })
-  type = TAG_TYPE.RED;
-
-  render() {
-    const { disabled } = this;
-    return html`
-      <slot></slot>
-      <button class="${prefix}--tag__close-icon" ?disabled=${disabled}>
-        ${Close16({ 'aria-label': this.title })}
-      </button>
-    `;
-  }
-
-  /**
-   * The name of the custom event fired before this tag is being closed upon a user gesture.
-   * Cancellation of this event stops the user-initiated action of closing this tag.
-   */
-  static get eventBeforeClose() {
-    return `${prefix}-filter-tag-beingclosed`;
-  }
-
-  /**
-   * The name of the custom event fired after this tag is closed upon a user gesture.
-   */
-  static get eventClose() {
-    return `${prefix}-filter-tag-closed`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
diff --git a/packages/carbon-web-components/src/components/tag/index.ts b/packages/carbon-web-components/src/components/tag/index.ts
index e0c17b329ae..1ae6c74e90f 100644
--- a/packages/carbon-web-components/src/components/tag/index.ts
+++ b/packages/carbon-web-components/src/components/tag/index.ts
@@ -1,11 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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 './tag';
-import './filter-tag';
diff --git a/packages/carbon-web-components/src/components/tag/tag-story.mdx b/packages/carbon-web-components/src/components/tag/tag-story.mdx
index deffbb1b557..489266c9859 100644
--- a/packages/carbon-web-components/src/components/tag/tag-story.mdx
+++ b/packages/carbon-web-components/src/components/tag/tag-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tag
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tag)
 
 Tags are used for items that need to be labeled, categorized, or organized using
 keywords that describe them.
@@ -33,44 +33,57 @@ import '@carbon/web-components/es/components/tag/index.js';
 ### HTML
 
 ```html
-<bx-tag type="gray" title="Clear selection"> This is a tag </bx-tag>
+<cds-tag type="gray" title="tag-example"> This is a tag </cds-tag>
 ```
 
 ## Filter tag
 
+Use the `filter` attribute to turn the tag into a filterable element.
+
 ```html
-<bx-filter-tag open type="gray" title="Clear selection">
-  This is a tag
-</bx-filter-tag>
+<cds-tag filter type="gray" title="Clear selection"> This is a tag </cds-tag>
 ```
 
-## Themeing
+You can use the events to catch the closing of the tag.
 
-In order to get the correct token value for the tag background, you will need to apply the following in you `scss` to your themed class. For example:
+```js
+document.addEventListener('cds-tag-closed', (event) => {
+  // use values here
+});
+```
 
-```css
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import 'carbon-components/scss/globals/scss/component-tokens';
-@import 'carbon-components/src/components/tag/tag';
-.dds-theme-zone-g90 {
-  @include carbon--theme($carbon--theme--g90, true) {
-    @include emit-component-tokens($tag-colors);
-  }
-}
+## Custom icon
+
+If you'd like to use a custom icon other than the `Close` button, import another
+icon and insert it within the tag element as such:
+
+```html
+<cds-tag filter type="gray" title="Clear selection"> This is a tag </cds-tag>
 ```
 
-## `<bx-tag>` attributes and properties
+```javascript
+import Download16 from '@carbon/web-components/es/icons/download/16';
+
+function App() {
+  return (
+    html`  <cds-tag filter type="gray" title="Clear selection">This is a tag ${Download16({ slot: 'icon' })}</cds-tag>`
+  );
+}
+
+
+## `<cds-tag>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-tag disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-tag>` without `disabled` attribute).
+`<cds-tag disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-tag>` without `disabled` attribute).
 
-<Props of="bx-tag" />
+<Props of="cds-tag" />
 
-## `<bx-filter-tag>` attributes and properties
+## `<cds-filter-tag>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-filter-tag disabled>`) and `false` means not setting the attribute (e.g.
-`<bx-filter-tag>` without `disabled` attribute).
+`<cds-filter-tag disabled>`) and `false` means not setting the attribute (e.g.
+`<cds-filter-tag>` without `disabled` attribute).
 
-<Props of="bx-filter-tag" />
+<Props of="cds-filter-tag" />
+```
diff --git a/packages/carbon-web-components/src/components/tag/tag-story.ts b/packages/carbon-web-components/src/components/tag/tag-story.ts
index 89982a2808d..154a07a02dd 100644
--- a/packages/carbon-web-components/src/components/tag/tag-story.ts
+++ b/packages/carbon-web-components/src/components/tag/tag-story.ts
@@ -1,46 +1,70 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { TAG_SIZE, TAG_TYPE } from './tag';
-import './filter-tag';
+import './index';
 import storyDocs from './tag-story.mdx';
-
-const noop = () => {};
+import { prefix } from '../../globals/settings';
 
 const sizes = {
-  'Regular size': null,
+  [`Medium size (${TAG_SIZE.MEDIUM})`]: TAG_SIZE.MEDIUM,
   [`Small size (${TAG_SIZE.SMALL})`]: TAG_SIZE.SMALL,
 };
 
-export const Default = (args) => {
-  const { size, type, title, disabled } = args?.['bx-tag'] ?? {};
+const types = [
+  'red',
+  'magenta',
+  'purple',
+  'blue',
+  'cyan',
+  'teal',
+  'green',
+  'gray',
+  'cool-gray',
+  'warm-gray',
+  'high-contrast',
+  'outline',
+];
+
+export const Default = () => {
   return html`
-    <bx-tag
-      size="${ifNonNull(size)}"
-      type="${ifNonNull(type)}"
-      title="${ifNonNull(title)}"
+    ${types.map(
+      (e) => html`<cds-tag size="sm" type="${e}">Tag content</cds-tag>`
+    )}
+  `;
+};
+
+export const Playground = (args) => {
+  const { open, filter, size, type, title, disabled } =
+    args?.[`${prefix}-tag`] ?? {};
+
+  return html`
+    <cds-tag
+      ?filter="${filter}"
+      ?open="${open}"
+      size="${ifDefined(size)}"
+      type="${ifDefined(type)}"
+      title="${ifDefined(title)}"
       ?disabled="${disabled}">
       This is a tag
-    </bx-tag>
+    </cds-tag>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-tag': () => ({
+    [`${prefix}-tag`]: () => ({
       disabled: boolean('Disabled (disabled)', false),
       title: textNullable('Title (title)', 'Clear Selection'),
       size: select('Tag size (size)', sizes, null),
@@ -55,55 +79,11 @@ Default.parameters = {
         ),
         'gray'
       ),
-    }),
-  },
-};
-
-export const filter = (args) => {
-  const {
-    open,
-    size,
-    type,
-    title,
-    disabled,
-    disableClose,
-    onClick,
-    onBeforeClose = noop,
-    onClose = noop,
-  } = args?.['bx-filter-tag'] ?? {};
-  const handleBeforeClose = (event: CustomEvent) => {
-    onBeforeClose(event);
-    if (disableClose) {
-      event.preventDefault();
-    }
-  };
-  return html`
-    <bx-filter-tag
-      ?open="${open}"
-      size="${ifNonNull(size)}"
-      type="${ifNonNull(type)}"
-      title="${ifNonNull(title)}"
-      ?disabled="${disabled}"
-      @click="${onClick}"
-      @bx-filter-tag-beingclosed="${handleBeforeClose}"
-      @bx-filter-tag-closed="${onClose}">
-      This is a tag
-    </bx-filter-tag>
-  `;
-};
-
-filter.parameters = {
-  knobs: {
-    'bx-filter-tag': () => ({
-      ...Default.parameters.knobs['bx-tag'](),
-      open: boolean('Open (open)', true),
-      disableClose: boolean(
-        'Disable user-initiated close action (Call event.preventDefault() in bx-filter-tag-beingclosed event)',
-        false
-      ),
+      open: boolean('Open', true),
+      filter: boolean('Filter', false),
       onClick: action('click'),
-      onBeforeClose: action('bx-filter-tag-beingclosed'),
-      onClose: action('bx-filter-tag-closed'),
+      onBeforeClose: action(`${prefix}-tag-beingclosed`),
+      onClose: action(`${prefix}-tag-closed`),
     }),
   },
 };
diff --git a/packages/carbon-web-components/src/components/tag/tag.scss b/packages/carbon-web-components/src/components/tag/tag.scss
index 43a7d3a4bb8..736fe776ea5 100644
--- a/packages/carbon-web-components/src/components/tag/tag.scss
+++ b/packages/carbon-web-components/src/components/tag/tag.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,101 +7,109 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/tag/tag';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/components/tag/index' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-tag) {
   @extend .#{$prefix}--tag;
+  @extend .#{$prefix}--layout--size-md;
+
+  @include emit-layout-tokens();
+  // tag overrides layout tokens
+  --cds-layout-size-height-xs: 1.125rem;
+  --cds-layout-size-height-sm: 1.125rem;
+  --cds-layout-size-height-md: 1.5rem;
 }
 
-:host(#{$prefix}-tag[type='red']),
-:host(#{$prefix}-filter-tag[type='red']) {
+:host(#{$prefix}-tag[size='sm']) {
+  @extend .#{$prefix}--tag--sm;
+  @extend .#{$prefix}--layout--size-sm;
+
+  .#{$prefix}--tag__close-icon {
+    width: rem(18px);
+    height: rem(18px);
+    margin-left: rem(5px);
+  }
+}
+
+:host(#{$prefix}-tag[type='red']) {
   @extend .#{$prefix}--tag--red;
 }
 
-:host(#{$prefix}-tag[type='magenta']),
-:host(#{$prefix}-filter-tag[type='magenta']) {
+:host(#{$prefix}-tag[type='magenta']) {
   @extend .#{$prefix}--tag--magenta;
 }
 
-:host(#{$prefix}-tag[type='purple']),
-:host(#{$prefix}-filter-tag[type='purple']) {
+:host(#{$prefix}-tag[type='purple']) {
   @extend .#{$prefix}--tag--purple;
 }
 
-:host(#{$prefix}-tag[type='blue']),
-:host(#{$prefix}-filter-tag[type='blue']) {
+:host(#{$prefix}-tag[type='blue']) {
   @extend .#{$prefix}--tag--blue;
 }
 
-:host(#{$prefix}-tag[type='cyan']),
-:host(#{$prefix}-filter-tag[type='cyan']) {
+:host(#{$prefix}-tag[type='cyan']) {
   @extend .#{$prefix}--tag--cyan;
 }
 
-:host(#{$prefix}-tag[type='teal']),
-:host(#{$prefix}-filter-tag[type='teal']) {
+:host(#{$prefix}-tag[type='teal']) {
   @extend .#{$prefix}--tag--teal;
 }
 
-:host(#{$prefix}-tag[type='green']),
-:host(#{$prefix}-filter-tag[type='green']) {
+:host(#{$prefix}-tag[type='green']) {
   @extend .#{$prefix}--tag--green;
 }
 
-:host(#{$prefix}-tag[type='gray']),
-:host(#{$prefix}-filter-tag[type='gray']) {
+:host(#{$prefix}-tag[type='gray']) {
   @extend .#{$prefix}--tag--gray;
 }
 
-:host(#{$prefix}-tag[type='cool-gray']),
-:host(#{$prefix}-filter-tag[type='cool-gray']) {
+:host(#{$prefix}-tag[type='cool-gray']) {
   @extend .#{$prefix}--tag--cool-gray;
 }
 
-:host(#{$prefix}-tag[type='warm-gray']),
-:host(#{$prefix}-filter-tag[type='warm-gray']) {
+:host(#{$prefix}-tag[type='warm-gray']) {
   @extend .#{$prefix}--tag--warm-gray;
 }
 
-:host(#{$prefix}-tag[disabled]),
-:host(#{$prefix}-filter-tag[disabled]) {
+:host(#{$prefix}-tag[type='high-contrast']) {
+  @extend .#{$prefix}--tag--high-contrast;
+}
+
+:host(#{$prefix}-tag[type='outline']) {
+  @extend .#{$prefix}--tag--outline;
+}
+
+:host(#{$prefix}-tag[disabled]) {
   @extend .#{$prefix}--tag--disabled;
 }
 
-// tags used for filtering
-:host(#{$prefix}-filter-tag) {
-  @extend .#{$prefix}--tag;
+:host(#{$prefix}-tag[filter]) {
   @extend .#{$prefix}--tag--filter;
 
   display: none;
-
-  &[open] {
-    display: inline-flex;
-  }
 }
 
-:host(#{$prefix}-filter-tag[disabled]) .#{$prefix}--tag__close-icon {
-  cursor: not-allowed;
-
-  &,
-  &:hover {
-    background-color: transparent;
-  }
+:host(#{$prefix}-tag[filter][size='sm']) {
+  padding-right: 0;
 }
 
-:host(#{$prefix}-tag[size='sm']),
-:host(#{$prefix}-filter-tag[size='sm']) {
-  @extend .#{$prefix}--tag--sm;
+:host(#{$prefix}-tag[filter][open]) {
+  display: inline-flex;
+}
 
+:host(#{$prefix}-tag[filter][disabled]) {
   .#{$prefix}--tag__close-icon {
-    width: rem(18px);
-    height: rem(18px);
-    margin-left: rem(5px);
-  }
-}
+    cursor: not-allowed;
 
-:host(#{$prefix}-filter-tag[size='sm']) {
-  padding-right: 0;
+    &,
+    &:hover {
+      background-color: transparent;
+    }
+  }
 }
 
 // Skeleton state
diff --git a/packages/carbon-web-components/src/components/tag/tag.ts b/packages/carbon-web-components/src/components/tag/tag.ts
index 7e85fb48c85..a2c2ab6ed26 100644
--- a/packages/carbon-web-components/src/components/tag/tag.ts
+++ b/packages/carbon-web-components/src/components/tag/tag.ts
@@ -7,34 +7,111 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import Close16 from '@carbon/icons/lib/close/16';
+import { prefix } from '../../globals/settings';
+import FocusMixin from '../../globals/mixins/focus';
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TAG_SIZE, TAG_TYPE } from './defs';
 import styles from './tag.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { TAG_SIZE, TAG_TYPE };
 
-const { prefix } = settings;
-
 /**
  * Tag.
  *
- * @element bx-tag
+ * @fires cds-tag-beingclosed - The custom event fired as the element is being closed
+ * @fires cds-tag-closed - The custom event fired after the element has been closed
  */
 @customElement(`${prefix}-tag`)
-export default class BXTag extends LitElement {
+class CDSTag extends HostListenerMixin(FocusMixin(LitElement)) {
+  @query('button')
+  protected _buttonNode!: HTMLButtonElement;
+
+  /**
+   * Handler for @slotchange, will only be ran if user sets an element under the "icon" slot.
+   *
+   * @private
+   */
+  private _handleSlotChange() {
+    this.hasCustomIcon = true;
+  }
+
+  /**
+   * Handles `click` event on this element.
+   *
+   * @param event The event.
+   */
+  @HostListener('shadowRoot:click')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleClick = (event: MouseEvent) => {
+    if (event.composedPath().indexOf(this._buttonNode!) >= 0) {
+      if (this.disabled) {
+        event.stopPropagation();
+      } else if (this.open) {
+        const init = {
+          bubbles: true,
+          cancelable: true,
+          composed: true,
+          detail: {
+            triggeredBy: event.target,
+          },
+        };
+        if (
+          this.dispatchEvent(
+            new CustomEvent(
+              (this.constructor as typeof CDSTag).eventBeforeClose,
+              init
+            )
+          )
+        ) {
+          this.open = false;
+          this.dispatchEvent(
+            new CustomEvent(
+              (this.constructor as typeof CDSTag).eventClose,
+              init
+            )
+          );
+        }
+      }
+    }
+  };
+
+  /**
+   * Text to show on filter tag "clear" buttons. Corresponds to the attribute with the same name
+   */
+  @property({ type: String, reflect: true })
+  title = 'Clear filter';
+
   /**
    * `true` if the tag should be disabled
    */
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  @property({ type: Boolean })
+  hasCustomIcon = false;
+
+  /**
+   * Determine if is a filter/chip
+   */
+  @property({ type: Boolean, reflect: true })
+  filter = false;
+
+  /**
+   * `true` if the tag should be open.
+   */
+  @property({ type: Boolean, reflect: true })
+  open = true;
+
   /**
    * The size of the tag.
    */
   @property({ reflect: true })
-  size = TAG_SIZE.REGULAR;
+  size = TAG_SIZE.MEDIUM;
 
   /**
    * The type of the tag.
@@ -43,8 +120,49 @@ export default class BXTag extends LitElement {
   type = TAG_TYPE.GRAY;
 
   render() {
-    return html` <slot></slot> `;
+    const {
+      disabled,
+      _handleSlotChange: handleSlotChange,
+      hasCustomIcon,
+      filter,
+      title,
+    } = this;
+    return html`
+      <slot></slot>
+
+      ${filter
+        ? html`
+            <button class="${prefix}--tag__close-icon" ?disabled=${disabled}>
+              <slot
+                name="icon"
+                aria-label="${title}"
+                @slotchange=${handleSlotChange}>
+                ${hasCustomIcon
+                  ? html``
+                  : html`${Close16({ 'aria-label': title })}`}
+              </slot>
+            </button>
+          `
+        : ``}
+    `;
+  }
+
+  /**
+   * The name of the custom event fired before this tag is being closed upon a user gesture.
+   * Cancellation of this event stops the user-initiated action of closing this tag.
+   */
+  static get eventBeforeClose() {
+    return `${prefix}-tag-beingclosed`;
+  }
+
+  /**
+   * The name of the custom event fired after this tag is closed upon a user gesture.
+   */
+  static get eventClose() {
+    return `${prefix}-tag-closed`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
+
+export default CDSTag;
diff --git a/packages/carbon-web-components/src/components/text-input/defs.ts b/packages/carbon-web-components/src/components/text-input/defs.ts
new file mode 100644
index 00000000000..77081ea5e79
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/defs.ts
@@ -0,0 +1,94 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+export { FORM_ELEMENT_COLOR_SCHEME as INPUT_COLOR_SCHEME } from '../../globals/shared-enums';
+
+/**
+ * Input size.
+ */
+export enum INPUT_SIZE {
+  /**
+   * Small size.
+   */
+  SMALL = 'sm',
+
+  /**
+   * Regular size, same as medium size.
+   */
+  MEDIUM = 'md',
+
+  /**
+   * Large size.
+   */
+  LARGE = 'lg',
+
+  // TODO: deprecate
+  /**
+   * Extra large size.
+   */
+  EXTRA_LARGE = 'xl',
+}
+
+/**
+ * Input tooltop alignment
+ */
+export enum INPUT_TOOLTIP_ALIGNMENT {
+  /**
+   * Small size.
+   */
+  START = 'start',
+
+  /**
+   * Regular size, same as medium size.
+   */
+  CENTER = 'center',
+
+  /**
+   * Large size.
+   */
+  END = 'end',
+}
+
+/**
+ * Input tooltop direction
+ */
+export enum INPUT_TOOLTIP_DIRECTION {
+  /**
+   * Small size.
+   */
+  TOP = 'top',
+
+  /**
+   * Regular size, same as medium size.
+   */
+  RIGHT = 'right',
+
+  /**
+   * Large size.
+   */
+  BOTTOM = 'bottom',
+
+  /**
+   * Regular size, same as medium size.
+   */
+  LEFT = 'left',
+}
+
+/**
+ * Supported input types.
+ *
+ * For this component we only support textual types
+ */
+export enum INPUT_TYPE {
+  EMAIL = 'email',
+  PASSWORD = 'password',
+  TEL = 'tel',
+  TEXT = 'text',
+  URL = 'url',
+}
diff --git a/packages/carbon-web-components/src/components/text-input/index.ts b/packages/carbon-web-components/src/components/text-input/index.ts
new file mode 100644
index 00000000000..9f6126faa91
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/index.ts
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 './text-input';
+import './text-input-skeleton';
diff --git a/packages/carbon-web-components/src/components/input/stories/helpers.ts b/packages/carbon-web-components/src/components/text-input/stories/helpers.ts
similarity index 85%
rename from packages/carbon-web-components/src/components/input/stories/helpers.ts
rename to packages/carbon-web-components/src/components/text-input/stories/helpers.ts
index 6c46da8c76a..9398911a5c6 100644
--- a/packages/carbon-web-components/src/components/input/stories/helpers.ts
+++ b/packages/carbon-web-components/src/components/text-input/stories/helpers.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { action } from '@storybook/addon-actions';
-import { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from '../input';
+import { INPUT_COLOR_SCHEME, INPUT_SIZE, INPUT_TYPE } from '../text-input';
 
 const inputTypes = Object.entries(INPUT_TYPE).reduce(
   (acc, [key, val]) => ({
@@ -20,7 +20,7 @@ const inputTypes = Object.entries(INPUT_TYPE).reduce(
 
 const sizes = {
   [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
-  Regular: null,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
   [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
 };
 
@@ -48,7 +48,7 @@ const createProps = ({ boolean, textNonEmpty, select }) => {
             false
           )
         : null,
-    size: select('Input size (size)', sizes, INPUT_SIZE.REGULAR),
+    size: select('Input size (size)', sizes, INPUT_SIZE.MEDIUM),
     type,
   };
 };
diff --git a/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts b/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts
new file mode 100644
index 00000000000..820f0d74c23
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/text-input-skeleton.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './text-input.scss';
+
+/**
+ * Skeleton of number input.
+ */
+@customElement(`${prefix}-text-input-skeleton`)
+class CDSTextInputSkeleton extends LitElement {
+  /**
+   * Specify whether the label should be hidden, or not
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'hide-label' })
+  hideLabel = false;
+
+  render() {
+    const { hideLabel } = this;
+    return html`
+      ${!hideLabel &&
+      html` <span class="${prefix}--label ${prefix}--skeleton"></span> `}
+      <div class="${prefix}--text-input ${prefix}--skeleton"></div>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default CDSTextInputSkeleton;
diff --git a/packages/carbon-web-components/src/components/text-input/text-input-story.mdx b/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
new file mode 100644
index 00000000000..c5bdb662805
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/text-input-story.mdx
@@ -0,0 +1,66 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Text Input
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/input)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/input)
+
+Text fields enable the user to interact with and input data. A single line field
+is used when the input anticipated by the user is a single line of text as
+opposed to a paragraph.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/text-input/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['text-input'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-text-input
+  label="Text input label"
+  helper-text="Optional help text"
+  invalid-text="Error message">
+</cds-text-input>
+```
+
+## Form item
+
+If the input is part of a form, make sure to import and wrap the input with
+`<cds-form-item>`
+
+```javascript
+import '@carbon/web-components/es/components/form/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['form'] })}`} />
+
+```html
+<cds-form-item>
+  <cds-text-input
+    label="Text input label"
+    helper-text="Optional help text"
+    invalid-text="Error message">
+  </cds-text-input>
+</cds-form-item>
+```
+
+## `<cds-text-input>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-text-input required>`) and `false` means not setting the attribute (e.g.
+`<cds-text-input>` without `required` attribute).
+
+<Props of="cds-text-input" />
diff --git a/packages/carbon-web-components/src/components/text-input/text-input-story.ts b/packages/carbon-web-components/src/components/text-input/text-input-story.ts
new file mode 100644
index 00000000000..f1c9f92b208
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/text-input-story.ts
@@ -0,0 +1,164 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { boolean, select, number } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import storyDocs from './text-input-story.mdx';
+import { prefix } from '../../globals/settings';
+import './index';
+import '../layer';
+import '../form/form-item';
+import '../../../.storybook/templates/with-layer';
+
+import { action } from '@storybook/addon-actions';
+import { INPUT_SIZE } from './text-input';
+
+const sizes = {
+  [`Small size (${INPUT_SIZE.SMALL})`]: INPUT_SIZE.SMALL,
+  [`Medium size (${INPUT_SIZE.MEDIUM})`]: INPUT_SIZE.MEDIUM,
+  [`Large size (${INPUT_SIZE.LARGE})`]: INPUT_SIZE.LARGE,
+};
+
+export const Default = () => {
+  return html`
+    <cds-text-input label="Text input label" helper-text="Optional help text">
+    </cds-text-input>
+  `;
+};
+
+Default.storyName = 'Default';
+
+export const ReadOnly = () => {
+  return html`
+    <cds-text-input
+      value="This is read only, you can't type more."
+      readonly="true"
+      label="Text input label"
+      helper-text="Optional help text">
+    </cds-text-input>
+  `;
+};
+
+export const Skeleton = () => {
+  return html` <cds-text-input-skeleton></cds-text-input-skeleton> `;
+};
+
+export const TogglePasswordVisibility = () => {
+  return html`
+    <cds-text-input
+      type="password"
+      show-password-visibility-toggle
+      label="Text input label"
+      helper-text="Optional help text">
+    </cds-text-input>
+  `;
+};
+
+export const WithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-text-input label="Text input label" helper-text="Optional help text">
+      </cds-text-input>
+    </sb-template-layers>
+  `;
+};
+
+export const Playground = (args) => {
+  const {
+    disabled,
+    enableCounter,
+    helperText,
+    hideLabel,
+    inline,
+    invalid,
+    invalidText,
+    labelText,
+    maxCount,
+    placeholder,
+    playgroundWidth,
+    readonly,
+    size,
+    type,
+    value,
+    warn,
+    warnText,
+    onInput,
+  } = args?.[`${prefix}-input`] ?? {};
+  return html`
+    <div style="width: ${playgroundWidth}px;">
+      <cds-text-input
+        ?disabled="${disabled}"
+        ?enable-counter="${ifDefined(enableCounter)}"
+        helper-text="${ifDefined(helperText)}"
+        ?hide-label="${hideLabel}"
+        ?inline="${inline}"
+        ?invalid="${invalid}"
+        invalid-text="${ifDefined(invalidText)}"
+        label="${ifDefined(labelText)}"
+        max-count="${ifDefined(maxCount)}"
+        placeholder="${ifDefined(placeholder)}"
+        ?readonly="${ifDefined(readonly)}"
+        size="${ifDefined(size)}"
+        type="${ifDefined(type)}"
+        value="${ifDefined(value)}"
+        ?warn="${ifDefined(warn)}"
+        warn-text="${ifDefined(warnText)}"
+        @input="${onInput}">
+      </cds-text-input>
+    </div>
+  `;
+};
+
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-input`]: () => ({
+      disabled: boolean('Disabled (disabled)', false),
+      enableCounter: boolean('Enable counter (enable-counter)', false),
+      helperText: textNullable('Helper text (helper-text)', 'Helper text'),
+      hideLabel: boolean('Hide label (hide-label)', false),
+      inline: boolean('Inline (inline)', false),
+      invalid: boolean('Invalid (invalid)', false),
+      invalidText: textNullable(
+        'Invalid text (invalid-text)',
+        'Error message goes here'
+      ),
+      labelText: textNullable('Label text (label)', 'Label text'),
+      maxCount: textNullable('Max count (max-count)', '100'),
+      placeholder: textNullable(
+        'Placeholder (placeholder)',
+        'Placeholder text'
+      ),
+      playgroundWidth: number('Playground width', 300, {
+        range: true,
+        min: 300,
+        max: 800,
+        step: 50,
+      }),
+      size: select('Size (size)', sizes, INPUT_SIZE.MEDIUM),
+      readonly: boolean('Read only (readonly)', false),
+      type: textNullable('Type (type)', 'text'),
+      warn: boolean('Warn (warn)', false),
+      warnText: textNullable(
+        'Warn text (warn-text)',
+        'Warning message that is really long can wrap to more lines but should not be excessively long.'
+      ),
+      value: textNullable('Value of input (value)', ''),
+      onInput: action(`${prefix}-select-selected`),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Text Input',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/text-input/text-input.scss b/packages/carbon-web-components/src/components/text-input/text-input.scss
new file mode 100644
index 00000000000..1c5cdaf1af2
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/text-input.scss
@@ -0,0 +1,44 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+$css--plex: true !default;
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/text-input/index';
+@use '@carbon/styles/scss/layout' as *;
+
+:host(#{$prefix}-text-input) {
+  @include emit-layout-tokens();
+
+  // the base text-input class has a 100% so we need to propagate it up to the host element
+  width: 100%;
+  outline: none;
+}
+
+:host(#{$prefix}-text-input[show-password-visibility-toggle]) {
+  .#{$prefix}--text-input {
+    padding-right: $spacing-08;
+  }
+}
+
+:host(#{$prefix}-text-input[show-password-visibility-toggle][size='sm'])
+  .#{$prefix}--text-input__invalid-icon {
+  right: $spacing-07;
+}
+
+:host(#{$prefix}-text-input[show-password-visibility-toggle][size='md'])
+  .#{$prefix}--text-input__invalid-icon,
+.#{$prefix}--text-input__invalid-icon {
+  right: $spacing-08;
+}
+
+:host(#{$prefix}-text-input[show-password-visibility-toggle][size='lg'])
+  .#{$prefix}--text-input__invalid-icon {
+  right: $spacing-09;
+}
diff --git a/packages/carbon-web-components/src/components/text-input/text-input.ts b/packages/carbon-web-components/src/components/text-input/text-input.ts
new file mode 100644
index 00000000000..e2248e6cded
--- /dev/null
+++ b/packages/carbon-web-components/src/components/text-input/text-input.ts
@@ -0,0 +1,484 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { prefix } from '../../globals/settings';
+import View16 from '@carbon/icons/lib/view/16';
+import ViewOff16 from '@carbon/icons/lib/view--off/16';
+import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import ifNonEmpty from '../../globals/directives/if-non-empty';
+import FormMixin from '../../globals/mixins/form';
+import ValidityMixin from '../../globals/mixins/validity';
+import {
+  INPUT_COLOR_SCHEME,
+  INPUT_SIZE,
+  INPUT_TOOLTIP_ALIGNMENT,
+  INPUT_TOOLTIP_DIRECTION,
+  INPUT_TYPE,
+} from './defs';
+import styles from './text-input.scss';
+
+export {
+  INPUT_COLOR_SCHEME,
+  INPUT_SIZE,
+  INPUT_TOOLTIP_ALIGNMENT,
+  INPUT_TOOLTIP_DIRECTION,
+  INPUT_TYPE,
+};
+
+/**
+ * Text Input element. Supports all the usual attributes for textual input types
+ *
+ * @element cds-text-input
+ * @slot helper-text - The helper text.
+ * @slot label-text - The label text.
+ * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
+ */
+@customElement(`${prefix}-text-input`)
+class CDSTextInput extends ValidityMixin(FormMixin(LitElement)) {
+  /**
+   * The underlying input element
+   */
+  @query('input')
+  protected _input!: HTMLInputElement;
+
+  /**
+   * The internal value.
+   */
+  protected _value = '';
+
+  /**
+   * Handles `oninput` event on the `<input>`.
+   *
+   * @param event The event.
+   */
+  protected _handleInput({ target }: Event) {
+    this.value = (target as HTMLInputElement).value;
+  }
+
+  _handleFormdata(event: Event) {
+    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+    const { disabled, name, value } = this;
+    if (!disabled) {
+      formData.append(name, value);
+    }
+  }
+
+  /**
+   * May be any of the standard HTML autocomplete options
+   */
+  @property()
+  autocomplete = '';
+
+  /**
+   * Sets the input to be focussed automatically on page load. Defaults to false
+   */
+  @property({ type: Boolean })
+  autofocus = false;
+
+  /**
+   * Controls the disabled state of the input
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * Specify whether to display the character counter
+   */
+  @property({ type: Boolean, attribute: 'enable-counter', reflect: true })
+  enableCounter = false;
+
+  /**
+   * The helper text.
+   */
+  @property({ attribute: 'helper-text' })
+  helperText = '';
+
+  /**
+   * Specify if the currently value is invalid.
+   */
+  @property({ type: Boolean, reflect: true })
+  invalid = false;
+
+  /**
+   * Message which is displayed if the value is invalid.
+   */
+  @property({ attribute: 'invalid-text' })
+  invalidText = '';
+
+  /**
+   * Max character count allowed for input. This is needed in order for enableCounter to display
+   */
+  @property({ type: Number, attribute: 'max-count', reflect: true })
+  maxCount;
+
+  /**
+   * Specify whether the control is currently in warning state
+   */
+  @property({ type: Boolean, reflect: true })
+  warn = false;
+
+  /**
+   * Provide the text that is displayed when the control is in warning state
+   */
+  @property({ attribute: 'warn-text' })
+  warnText = '';
+
+  /**
+   * Specify whether you want the underlying label to be visually hidden
+   */
+  @property({ attribute: 'hide-label', type: Boolean, reflect: true })
+  hideLabel = false;
+
+  /**
+   * Generic label that will be used as the textual representation of what this field is for
+   */
+  @property({ attribute: 'label' })
+  label = '';
+
+  /**
+   * Name for the input in the `FormData`
+   */
+  @property()
+  name = '';
+
+  /**
+   * Pattern to validate the input against for HTML validity checking
+   */
+  @property()
+  pattern = '';
+
+  /**
+   * Value to display when the input has an empty `value`
+   */
+  @property({ reflect: true })
+  placeholder = '';
+
+  /**
+   * Specify if the component should be read-only
+   */
+  @property({ type: Boolean, reflect: true })
+  readonly = false;
+
+  /**
+   * Boolean property to set the required status
+   */
+  @property({ type: Boolean, reflect: true })
+  required = false;
+
+  /**
+   * The special validity message for `required`.
+   */
+  @property({ attribute: 'required-validity-message' })
+  requiredValidityMessage = 'Please fill out this field.';
+
+  /**
+   * "Hide password" tooltip text on password visibility toggle
+   */
+  @property()
+  hidePasswordLabel = 'Hide password';
+
+  /**
+   * "Show password" tooltip text on password visibility toggle
+   */
+  @property()
+  showPasswordLabel = 'Show password';
+
+  /**
+   * Boolean property to render password visibility toggle
+   */
+  @property({
+    type: Boolean,
+    attribute: 'show-password-visibility-toggle',
+    reflect: true,
+  })
+  showPasswordVisibilityToggle = false;
+
+  /**
+   * The input box size.
+   */
+  @property({ reflect: true })
+  size = INPUT_SIZE.MEDIUM;
+
+  /**
+   * true to use the inline version.
+   */
+  @property({ type: Boolean, reflect: true })
+  inline = false;
+
+  /**
+   * Specify the alignment of the tooltip to the icon-only button.
+   * Can be one of: start, center, or end.
+   */
+  @property()
+  tooltipAlignment = INPUT_TOOLTIP_ALIGNMENT.CENTER;
+
+  /**
+   * Specify the direction of the tooltip for icon-only buttons.
+   * Can be either top, right, bottom, or left.
+   */
+  @property()
+  tooltipDirection = INPUT_TOOLTIP_DIRECTION.BOTTOM;
+
+  /**
+   * The type of the input. Can be one of the types listed in the INPUT_TYPE enum
+   */
+  @property({ reflect: true })
+  type = INPUT_TYPE.TEXT;
+
+  /**
+   * The validity message. If present and non-empty, this input shows the UI of its invalid state.
+   */
+  @property({ attribute: 'validity-message' })
+  validityMessage = '';
+
+  /**
+   * The value of the input.
+   */
+  @property({ reflect: true })
+  get value() {
+    // FIXME: Figure out how to deal with TS2611
+    // once we have the input we can directly query for the value
+    if (this._input) {
+      return this._input.value;
+    }
+    // but before then _value will work fine
+    return this._value;
+  }
+
+  set value(value) {
+    const oldValue = this._value;
+    this._value = value;
+    // make sure that lit-element updates the right properties
+    this.requestUpdate('value', oldValue);
+    // we set the value directly on the input (when available)
+    // so that programatic manipulation updates the UI correctly
+    if (this._input) {
+      this._input.value = value;
+    }
+  }
+
+  /**
+   * Handles password visibility toggle button click
+   */
+  private handleTogglePasswordVisibility() {
+    this.type =
+      this.type === INPUT_TYPE.PASSWORD ? INPUT_TYPE.TEXT : INPUT_TYPE.PASSWORD;
+  }
+
+  render() {
+    const {
+      disabled,
+      enableCounter,
+      helperText,
+      hideLabel,
+      inline,
+      invalid,
+      invalidText,
+      label,
+      maxCount,
+      readonly,
+      required,
+      size,
+      type,
+      warn,
+      warnText,
+      value,
+      _handleInput: handleInput,
+    } = this;
+
+    const invalidIcon = WarningFilled16({
+      class: `${prefix}--text-input__invalid-icon`,
+    });
+
+    const warnIcon = WarningAltFilled16({
+      class: `${prefix}--text-input__invalid-icon ${prefix}--text-input__invalid-icon--warning`,
+    });
+
+    let normalizedProps = {
+      disabled: !readonly && disabled,
+      invalid: !readonly && invalid,
+      warn: !readonly && !invalid && warn,
+      'slot-name': '',
+      'slot-text': '',
+      icon: null,
+    };
+
+    if (normalizedProps.invalid) {
+      normalizedProps.icon = invalidIcon;
+      normalizedProps['slot-name'] = 'invalid-text';
+      normalizedProps['slot-text'] = invalidText;
+    } else if (normalizedProps.warn) {
+      normalizedProps.icon = warnIcon;
+      normalizedProps['slot-name'] = 'warn-text';
+      normalizedProps['slot-text'] = warnText;
+    }
+
+    const counterClasses = classMap({
+      [`${prefix}--label`]: true,
+      [`${prefix}--text-input__label-counter`]: true,
+      [`${prefix}--label--disabled`]: disabled,
+    });
+
+    const inputWrapperClasses = classMap({
+      [`${prefix}--form-item`]: true,
+      [`${prefix}--text-input-wrapper`]: true,
+      [`${prefix}--text-input-wrapper--inline`]: inline,
+      [`${prefix}--text-input-wrapper--readonly`]: readonly,
+      [`${prefix}--text-input-wrapper--inline--invalid`]:
+        inline && normalizedProps.invalid,
+    });
+
+    const inputClasses = classMap({
+      [`${prefix}--text-input`]: true,
+      [`${prefix}--text-input--invalid`]: normalizedProps.invalid,
+      [`${prefix}--text-input--warning`]: normalizedProps.warn,
+      [`${prefix}--text-input--${size}`]: size,
+      [`${prefix}--layout--size-${size}`]: size,
+      [`${prefix}--password-input`]: type === INPUT_TYPE.PASSWORD,
+    });
+
+    const fieldOuterWrapperClasses = classMap({
+      [`${prefix}--text-input__field-outer-wrapper`]: true,
+      [`${prefix}--text-input__field-outer-wrapper--inline`]: inline,
+    });
+
+    const fieldWrapperClasses = classMap({
+      [`${prefix}--text-input__field-wrapper`]: true,
+      [`${prefix}--text-input__field-wrapper--warning`]: normalizedProps.warn,
+    });
+
+    const labelClasses = classMap({
+      [`${prefix}--label`]: true,
+      [`${prefix}--visually-hidden`]: hideLabel,
+      [`${prefix}--label--disabled`]: normalizedProps.disabled,
+    });
+
+    const helperTextClasses = classMap({
+      [`${prefix}--form__helper-text`]: true,
+      [`${prefix}--form__helper-text--disabled`]: normalizedProps.disabled,
+    });
+
+    const passwordIsVisible = type !== INPUT_TYPE.PASSWORD;
+    const passwordVisibilityIcon = passwordIsVisible
+      ? ViewOff16({ class: `${prefix}--icon-visibility-off` })
+      : View16({ class: `${prefix}--icon-visibility-on` });
+
+    const passwordVisibilityToggleClasses = classMap({
+      [`${prefix}--text-input--password__visibility__toggle`]: true,
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--icon-only`]: true,
+      [`${prefix}--tooltip__trigger`]: true,
+      [`${prefix}--tooltip--a11y`]: true,
+      [`${prefix}--btn--disabled`]: normalizedProps.disabled,
+      [`${prefix}--tooltip--${this.tooltipDirection}`]: this.tooltipDirection,
+      [`${prefix}--tooltip--align-${this.tooltipAlignment}`]:
+        this.tooltipAlignment,
+    });
+
+    const passwordButtonLabel = html`
+      <span class="${prefix}--assistive-text">
+        ${passwordIsVisible ? this.hidePasswordLabel : this.showPasswordLabel}
+      </span>
+    `;
+
+    const passwordVisibilityButton = () => html`
+      <button
+        type="button"
+        class="${passwordVisibilityToggleClasses}"
+        ?disabled="${normalizedProps.disabled}"
+        @click="${this.handleTogglePasswordVisibility}">
+        ${!normalizedProps.disabled ? passwordButtonLabel : null}
+        ${passwordVisibilityIcon}
+      </button>
+    `;
+
+    const textCount = value?.length;
+
+    const counter =
+      enableCounter && maxCount
+        ? html` <label class="${counterClasses}">
+            <slot name="label-text">${textCount}/${maxCount}</slot>
+          </label>`
+        : null;
+
+    const labelText =
+      label && !hideLabel
+        ? html`<label class="${labelClasses}"> ${label} </label>`
+        : null;
+
+    const labelWrapper = html`<div class="${prefix}--text-input__label-wrapper">
+      ${labelText} ${counter}
+    </div>`;
+
+    const helper = helperText
+      ? html`<div
+          class="${helperTextClasses}"
+          id="helper-text"
+          ?hidden="${normalizedProps.invalid || normalizedProps.warn}">
+          <slot name="helper-text"> ${helperText} </slot>
+        </div>`
+      : null;
+
+    return html`
+      <div class="${inputWrapperClasses}">
+        ${!inline
+          ? labelWrapper
+          : html`<div class="${prefix}--text-input__label-helper-wrapper">
+              ${labelWrapper} ${helper}
+            </div>`}
+        <div class="${fieldOuterWrapperClasses}">
+          <div class="${fieldWrapperClasses}" ?data-invalid="${invalid}">
+            ${normalizedProps.icon}
+            <input
+              autocomplete="${this.autocomplete}"
+              ?autofocus="${this.autofocus}"
+              class="${inputClasses}"
+              ?data-invalid="${invalid}"
+              ?disabled="${disabled}"
+              aria-describedby="helper-text"
+              id="input"
+              name="${ifNonEmpty(this.name)}"
+              pattern="${ifNonEmpty(this.pattern)}"
+              placeholder="${ifNonEmpty(this.placeholder)}"
+              ?readonly="${readonly}"
+              ?required="${required}"
+              type="${ifNonEmpty(type)}"
+              .value="${this._value}"
+              maxlength="${ifNonEmpty(maxCount)}"
+              @input="${handleInput}" />
+            ${this.showPasswordVisibilityToggle &&
+            (type === INPUT_TYPE.PASSWORD || type === INPUT_TYPE.TEXT)
+              ? passwordVisibilityButton()
+              : null}
+          </div>
+          ${!inline ? helper : null}
+          <div
+            class="${prefix}--form-requirement"
+            ?hidden="${!normalizedProps.invalid && !normalizedProps.warn}">
+            <slot name="${normalizedProps['slot-name']}">
+              ${normalizedProps['slot-text']}
+            </slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSTextInput;
diff --git a/packages/carbon-web-components/src/components/textarea/stories/helpers.ts b/packages/carbon-web-components/src/components/textarea/stories/helpers.ts
index c3930a92a47..29c62574df4 100644
--- a/packages/carbon-web-components/src/components/textarea/stories/helpers.ts
+++ b/packages/carbon-web-components/src/components/textarea/stories/helpers.ts
@@ -1,32 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { action } from '@storybook/addon-actions';
-import { TEXTAREA_COLOR_SCHEME } from '../textarea';
 
-const colorSchemes = {
-  [`Regular`]: null,
-  [`Light (${TEXTAREA_COLOR_SCHEME.LIGHT})`]: TEXTAREA_COLOR_SCHEME.LIGHT,
-};
-
-const createProps = ({ boolean, textNullable, number, select }) => ({
-  colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
+const createProps = ({ boolean, textNullable, number }) => ({
+  cols: number('Number of columns (cols)', 0),
   disabled: boolean('Disabled (disabled)', false),
-  value: textNullable('Input value (value)', ''),
-  placeholder: textNullable(
-    'Placeholder text (placeholder)',
-    'Optional placeholder text'
-  ),
+  enableCounter: boolean('Enable character counter (enable-counter)', true),
+  helperText: textNullable('Helper text (helper-text)', 'Textarea helper text'),
+  hideLabel: boolean('Hide label (hide-label)', false),
   invalid: boolean('Invalid (invalid)', false),
+  invalidText: textNullable('Invalid text (invalid-text)', 'Invalid text'),
+  label: textNullable('Label (label)', 'Textarea label'),
+  maxCount: number('Max character count (max-count', 500),
   onInput: action('input'),
+  placeholder: textNullable('Placeholder text (placeholder)', ''),
+  readonly: boolean('Read only (readonly)', false),
   rows: number('Number of rows (rows)', 4),
-  cols: number('Number of columns (cols)', 50),
+  value: textNullable('Value (value)', ''),
+  warn: boolean('Warn (warn)', false),
+  warnText: textNullable('Warn text (warn-text)', 'This is a warning message.'),
 });
 
 export default createProps;
diff --git a/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts b/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts
index 2e0c2c47169..504862bf1a2 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts
+++ b/packages/carbon-web-components/src/components/textarea/textarea-skeleton.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import styles from './textarea.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Skeleton of text area.
  */
 @customElement(`${prefix}-textarea-skeleton`)
-class BXTextareaSkeleton extends LitElement {
+class CDSTextareaSkeleton extends LitElement {
   render() {
     return html`
       <span class="${prefix}--label ${prefix}--skeleton"></span>
@@ -29,4 +27,4 @@ class BXTextareaSkeleton extends LitElement {
   static styles = styles;
 }
 
-export default BXTextareaSkeleton;
+export default CDSTextareaSkeleton;
diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx b/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
index ba79e47fa2f..e8d230d9ea0 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
+++ b/packages/carbon-web-components/src/components/textarea/textarea-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Textarea
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/textarea)
 
 Text inputs enable the user to interact with and input content and data. This
 component can be used for long and short form entries.
@@ -30,44 +30,44 @@ import '@carbon/web-components/es/components/textarea/index.js';
 ### HTML
 
 ```html
-<bx-textarea placeholder="Optional placeholder text" rows="4" cols="50">
+<cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
   <span slot="label-text">Label text</span>
   <span slot="helper-text">Optional helper text</span>
   <span slot="validity-message">Something isn't right</span>
-</bx-textarea>
+</cds-textarea>
 ```
 
 ## Form item
 
 If the textarea is part of a form, make sure to import and wrap the textarea
-with `<bx-form-item>`
+with `<cds-form-item>`
 
 ```javascript
 import '@carbon/web-components/es/components/form/index.js';
 ```
 
 ```html
-<bx-form-item>
-  <bx-textarea placeholder="Optional placeholder text" rows="4" cols="50">
+<cds-form-item>
+  <cds-textarea placeholder="Optional placeholder text" rows="4" cols="50">
     <span slot="label-text">Label text</span>
     <span slot="helper-text">Optional helper text</span>
     <span slot="validity-message">Something isn't right</span>
-  </bx-textarea>
-</bx-form-item>
+  </cds-textarea>
+</cds-form-item>
 ```
 
 ## Skeleton
 
-For the skeleton variation, utilize `<bx-textarea-skeleton>`.
+For the skeleton variation, utilize `<cds-textarea-skeleton>`.
 
 ```html
-<bx-textarea-skeleton></bx-textarea-skeleton>
+<cds-textarea-skeleton></cds-textarea-skeleton>
 ```
 
-## `<bx-textarea>` attributes and properties
+## `<cds-textarea>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-textarea autofocus>`) and `false` means not setting the attribute (e.g.
-`<bx-textarea>` without `autofocus` attribute).
+`<cds-textarea autofocus>`) and `false` means not setting the attribute (e.g.
+`<cds-textarea>` without `autofocus` attribute).
 
-<Props of="bx-textarea" />
+<Props of="cds-textarea" />
diff --git a/packages/carbon-web-components/src/components/textarea/textarea-story.ts b/packages/carbon-web-components/src/components/textarea/textarea-story.ts
index 9d677e8fe9a..259b52a366f 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea-story.ts
+++ b/packages/carbon-web-components/src/components/textarea/textarea-story.ts
@@ -1,160 +1,110 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import * as knobs from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
 import './textarea';
 import './textarea-skeleton';
 import '../form/form-item';
+import '../layer';
 import createProps from './stories/helpers';
 import storyDocs from './textarea-story.mdx';
+import { prefix } from '../../globals/settings';
+import '../../../.storybook/templates/with-layer';
 
-export const Default = (args) => {
-  const {
-    autocomplete,
-    autofocus,
-    colorScheme,
-    disabled,
-    helperText,
-    labelText,
-    name,
-    value,
-    pattern,
-    placeholder,
-    readonly,
-    required,
-    invalid,
-    validityMessage,
-    onInput,
-    rows,
-    cols,
-  } = args?.['bx-textarea'] ?? {};
+export const Default = () => {
   return html`
-    <bx-textarea
-      autocomplete="${ifNonNull(autocomplete)}"
-      ?autofocus="${autofocus}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled="${disabled}"
-      helper-text="${ifNonNull(helperText)}"
-      label-text="${ifNonNull(labelText)}"
-      name="${ifNonNull(name)}"
-      value="${ifNonNull(value)}"
-      pattern="${ifNonNull(pattern)}"
-      placeholder="${ifNonNull(placeholder)}"
-      ?readonly="${readonly}"
-      ?required="${required}"
-      ?invalid="${invalid}"
-      validity-message="${ifNonNull(validityMessage)}"
-      @input="${onInput}"
-      rows="${ifNonNull(rows)}"
-      cols="${ifNonNull(cols)}">
-    </bx-textarea>
+    <cds-form-item>
+      <cds-textarea label="Textarea label" helper-text="Optional helper text">
+      </cds-textarea>
+    </cds-form-item>
   `;
 };
 
 Default.storyName = 'Default';
 
-Default.parameters = {
-  knobs: {
-    'bx-textarea': () => createProps({ ...knobs, textNullable }),
+export const skeleton = () =>
+  html` <cds-textarea-skeleton></cds-textarea-skeleton> `;
+
+skeleton.parameters = {
+  percy: {
+    skip: true,
   },
 };
 
-export const formItem = (args) => {
-  const {
-    colorScheme,
-    disabled,
-    value,
-    placeholder,
-    invalid,
-    onInput,
-    rows,
-    cols,
-  } = args?.['bx-textarea'] ?? {};
+export const WithLayer = () => {
   return html`
-    <bx-form-item>
-      <bx-textarea
-        color-scheme="${ifNonNull(colorScheme)}"
-        placeholder="${ifNonNull(placeholder)}"
-        @input="${onInput}"
-        ?invalid="${invalid}"
-        ?disabled="${disabled}"
-        value="${ifNonNull(value)}"
-        rows="${ifNonNull(rows)}"
-        cols="${ifNonNull(cols)}">
-        <span slot="label-text">Label text</span>
-        <span slot="helper-text">Optional helper text</span>
-        <span slot="validity-message">Something isn't right</span>
-        ${value}
-      </bx-textarea>
-    </bx-form-item>
+    <sb-template-layers>
+      <cds-textarea label="Text Area label" helper-text="Optional helper text">
+      </cds-textarea>
+    </sb-template-layers>
   `;
 };
 
-formItem.storyName = 'Form item';
+WithLayer.storyName = 'With Layer';
 
-formItem.parameters = {
-  knobs: {
-    'bx-textarea': () => createProps({ ...knobs, textNullable }),
-  },
-};
-
-export const withoutFormItemWrapper = (args) => {
+export const Playground = (args) => {
   const {
-    colorScheme,
+    cols,
     disabled,
-    value,
-    placeholder,
+    enableCounter,
+    helperText,
+    hideLabel,
     invalid,
+    invalidText,
+    label,
+    maxCount,
     onInput,
+    placeholder,
+    readonly,
     rows,
-    cols,
-  } = args?.['bx-textarea'] ?? {};
+    value,
+    warn,
+    warnText,
+  } = args?.[`${prefix}-textarea`] ?? {};
   return html`
-    <bx-textarea
-      color-scheme="${ifNonNull(colorScheme)}"
-      placeholder="${ifNonNull(placeholder)}"
-      @input="${onInput}"
-      ?invalid="${invalid}"
-      ?disabled="${disabled}"
-      value="${ifNonNull(value)}"
-      rows="${ifNonNull(rows)}"
-      cols="${ifNonNull(cols)}">
-      <span slot="label-text">Label text</span>
-      <span slot="helper-text">Optional helper text</span>
-      <span slot="validity-message">Something isn't right</span>
-      <span>${value}</span>
-    </bx-textarea>
+    <cds-form-item>
+      <cds-textarea
+        ?enable-counter="${enableCounter}"
+        helper-text="${ifDefined(helperText)}"
+        ?hide-label="${hideLabel}"
+        ?invalid="${invalid}"
+        invalid-text="${ifDefined(invalidText)}"
+        label="${ifDefined(label)}"
+        ?readonly="${readonly}"
+        value="${ifDefined(value)}"
+        ?warn="${warn}"
+        warn-text="${ifDefined(warnText)}"
+        ?disabled="${disabled}"
+        max-count="${ifDefined(maxCount)}"
+        placeholder="${ifDefined(placeholder)}"
+        @input="${onInput}"
+        rows="${ifDefined(rows)}"
+        cols="${ifDefined(cols)}">
+        ${value}
+      </cds-textarea>
+    </cds-form-item>
   `;
 };
 
-withoutFormItemWrapper.storyName = 'Without form item wrapper';
+Playground.storyName = 'Playground';
 
-withoutFormItemWrapper.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-textarea': () => createProps({ ...knobs, textNullable }),
-  },
-};
-
-export const skeleton = () =>
-  html` <bx-textarea-skeleton></bx-textarea-skeleton> `;
-
-skeleton.parameters = {
-  percy: {
-    skip: true,
+    [`${prefix}-textarea`]: () => createProps({ ...knobs, textNullable }),
   },
 };
 
 export default {
-  title: 'Components/Textarea',
+  title: 'Components/Text Area',
   parameters: {
     ...storyDocs.parameters,
   },
diff --git a/packages/carbon-web-components/src/components/textarea/textarea.scss b/packages/carbon-web-components/src/components/textarea/textarea.scss
index 1ea6b33e8ed..4509126cdbb 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea.scss
+++ b/packages/carbon-web-components/src/components/textarea/textarea.scss
@@ -1,13 +1,21 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
 $css--plex: true !default;
-@import 'carbon-components/scss/components/text-area/text-area';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/text-area/index';
 
 :host(#{$prefix}-textarea) {
   outline: none;
 }
+
+:host(#{$prefix}-textarea[cols='0']),
+:host(#{$prefix}-textarea:not([cols])),
+:host(#{$prefix}-textarea) textarea[cols='0'],
+:host(#{$prefix}-textarea) textarea:not([cols]) {
+  width: 100%;
+}
diff --git a/packages/carbon-web-components/src/components/textarea/textarea.ts b/packages/carbon-web-components/src/components/textarea/textarea.ts
index 351aff8f09e..3b26052e223 100644
--- a/packages/carbon-web-components/src/components/textarea/textarea.ts
+++ b/packages/carbon-web-components/src/components/textarea/textarea.ts
@@ -7,84 +7,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, property, query } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import WarningFilled16 from '@carbon/icons/lib/warning--filled/16';
+import WarningAltFilled16 from '@carbon/icons/lib/warning--alt--filled/16';
+import { prefix } from '../../globals/settings';
 import ifNonEmpty from '../../globals/directives/if-non-empty';
-import ifNonNull from '../../globals/directives/if-non-null';
-import FormMixin from '../../globals/mixins/form';
-import ValidityMixin from '../../globals/mixins/validity';
-import { TEXTAREA_COLOR_SCHEME } from './defs';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import CDSTextInput from '../text-input/text-input';
 import styles from './textarea.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-export { TEXTAREA_COLOR_SCHEME };
-
-const { prefix } = settings;
-
 /**
  * Text area.
  *
- * @element bx-textarea
+ * @element cds-textarea
  * @slot helper-text - The helper text.
  * @slot label-text - The label text.
  * @slot validity-message - The validity message. If present and non-empty, this input shows the UI of its invalid state.
  */
 @customElement(`${prefix}-textarea`)
-export default class BXTextarea extends ValidityMixin(FormMixin(LitElement)) {
+class CDSTextarea extends CDSTextInput {
   /**
    * Handles `oninput` event on the `<input>`.
    *
    * @param event The event.
    */
-  private _handleInput({ target }: Event) {
+  protected _handleInput({ target }: Event) {
     this.value = (target as HTMLTextAreaElement).value;
   }
 
-  _handleFormdata(event: Event) {
-    const { formData } = event as any; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
-    const { disabled, name, value } = this;
-    if (!disabled) {
-      formData.append(name, value);
-    }
-  }
-
-  /**
-   * May be any of the standard HTML autocomplete options
-   */
-  @property()
-  autocomplete = '';
-
-  /**
-   * Sets the textarea to be focussed automatically on page load. Defaults to false
-   */
-  @property({ type: Boolean })
-  autofocus = false;
-
-  /**
-   * The color scheme.
-   */
-  @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = TEXTAREA_COLOR_SCHEME.REGULAR;
-
-  /**
-   * The number of columns for the textarea to show by default
-   */
-  @property()
-  cols = 50;
-
-  /**
-   * Controls the disabled state of the textarea
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
   /**
-   * The helper text.
+   * The number of columns for the stextarea to show by default
    */
-  @property({ attribute: 'helper-text' })
-  helperText = '';
+  @property({ type: Number })
+  cols;
 
   /**
    * ID to link the `label` and `textarea`
@@ -92,72 +50,24 @@ export default class BXTextarea extends ValidityMixin(FormMixin(LitElement)) {
   @property()
   id = '';
 
-  /**
-   * Controls the invalid state and visibility of the `validityMessage`
-   */
-  @property({ type: Boolean, reflect: true })
-  invalid = false;
-
-  /**
-   * The label text.
-   */
-  @property({ attribute: 'label-text' })
-  labelText = '';
-
-  /**
-   * Name for the textarea in the `FormData`
-   */
-  @property()
-  name = '';
-
   /**
    * Pattern to validate the textarea against for HTML validity checking
    */
   @property()
   pattern = '';
 
-  /**
-   * Value to display when the textarea has an empty `value`
-   */
-  @property({ reflect: true })
-  placeholder = '';
-
-  /**
-   * Controls the readonly state of the textarea
-   */
-  @property({ type: Boolean, reflect: true })
-  readonly = false;
-
   /**
    * Boolean property to set the required status
    */
   @property({ type: Boolean, reflect: true })
   required = false;
 
-  /**
-   * The special validity message for `required`.
-   */
-  @property({ attribute: 'required-validity-message' })
-  requiredValidityMessage = 'Please fill out this field.';
-
   /**
    * The number of rows for the textarea to show by default
    */
   @property()
   rows = 4;
 
-  /**
-   * The validity message.
-   */
-  @property({ attribute: 'validity-message' })
-  validityMessage = '';
-
-  /**
-   * The value of the text area.
-   */
-  @property()
-  value = '';
-
   /**
    * Get a reference to the underlying textarea so we can directly apply values.
    * This lets us fixe a bug where after a user would clear text, the value wouldn't update programmatically
@@ -165,27 +75,31 @@ export default class BXTextarea extends ValidityMixin(FormMixin(LitElement)) {
   @query('textarea')
   protected _textarea!: HTMLTextAreaElement;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
+    const { enableCounter, maxCount } = this;
+
+    const textCount = this.value?.length;
+
     const invalidIcon = WarningFilled16({
       class: `${prefix}--text-area__invalid-icon`,
     });
 
+    const warnIcon = WarningAltFilled16({
+      class: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`,
+    });
+
     const textareaClasses = classMap({
       [`${prefix}--text-area`]: true,
-      [`${prefix}--text-area--v2`]: true,
-      [`${prefix}--text-area--${this.colorScheme}`]: this.colorScheme,
+      [`${prefix}--text-area--warn`]: this.warn,
       [`${prefix}--text-area--invalid`]: this.invalid,
     });
 
+    const textareaWrapperClasses = classMap({
+      [`${prefix}--text-area__wrapper`]: true,
+      [`${prefix}--text-area__wrapper--warn`]: this.warn,
+      [`${prefix}--text-area__wrapper--readonly`]: this.readonly,
+    });
+
     const labelClasses = classMap({
       [`${prefix}--label`]: true,
       [`${prefix}--label--disabled`]: this.disabled,
@@ -196,19 +110,40 @@ export default class BXTextarea extends ValidityMixin(FormMixin(LitElement)) {
       [`${prefix}--form__helper-text--disabled`]: this.disabled,
     });
 
+    const counter =
+      enableCounter && maxCount
+        ? html` <label class="${labelClasses}">
+            <slot name="label-text">${textCount}/${maxCount}</slot>
+          </label>`
+        : null;
+
+    const icon = () => {
+      if (this.invalid) {
+        return invalidIcon;
+      } else if (this.warn && !this.invalid) {
+        return warnIcon;
+      }
+      return null;
+    };
+
     return html`
-      <label class="${labelClasses}" for="input">
-        <slot name="label-text"> ${this.labelText} </slot>
-      </label>
-      <div
-        class="${prefix}--text-area__wrapper"
-        ?data-invalid="${this.invalid}">
-        ${this.invalid ? invalidIcon : null}
+      <div class="${prefix}--text-area__label-wrapper">
+        ${this.hideLabel
+          ? html``
+          : html`
+              <label class="${labelClasses}" for="input">
+                <slot name="label-text"> ${this.label} </slot>
+              </label>
+            `}
+        ${counter}
+      </div>
+      <div class="${textareaWrapperClasses}" ?data-invalid="${this.invalid}">
+        ${icon()}
         <textarea
-          ?autocomplete="${this.autocomplete}"
+          autocomplete="${this.autocomplete}"
           ?autofocus="${this.autofocus}"
           class="${textareaClasses}"
-          cols="${ifNonNull(this.cols)}"
+          cols="${ifDefined(this.cols)}"
           ?data-invalid="${this.invalid}"
           ?disabled="${this.disabled}"
           id="input"
@@ -217,18 +152,29 @@ export default class BXTextarea extends ValidityMixin(FormMixin(LitElement)) {
           placeholder="${ifNonEmpty(this.placeholder)}"
           ?readonly="${this.readonly}"
           ?required="${this.required}"
-          rows="${ifNonNull(this.rows)}"
+          rows="${ifDefined(this.rows)}"
           .value="${this.value}"
+          maxlength="${ifNonEmpty(this.maxCount)}"
           @input="${this._handleInput}"></textarea>
       </div>
-      <div class="${helperTextClasses}">
+      <div class="${helperTextClasses}" ?hidden="${this.invalid || this.warn}">
         <slot name="helper-text"> ${this.helperText} </slot>
       </div>
-      <div class="${prefix}--form-requirement">
-        <slot name="validity-message"> ${this.validityMessage} </slot>
+      <div
+        class="${prefix}--form-requirement"
+        ?hidden="${!this.invalid && !this.warn}">
+        <slot name="${this.invalid ? 'invalid-text' : 'warn-text'}">
+          ${this.invalid ? this.invalidText : this.warnText}
+        </slot>
       </div>
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
+
+export default CDSTextarea;
diff --git a/packages/carbon-web-components/src/components/tile/clickable-tile.ts b/packages/carbon-web-components/src/components/tile/clickable-tile.ts
index ef6c8173839..d73c22a148d 100644
--- a/packages/carbon-web-components/src/components/tile/clickable-tile.ts
+++ b/packages/carbon-web-components/src/components/tile/clickable-tile.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { property } from 'lit-element';
-import BXLink from '../link/link';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSLink from '../link/link';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from './tile.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Clickable tile.
  *
- * @element bx-clickable-tile
+ * @element cds-clickable-tile
  */
 @customElement(`${prefix}-clickable-tile`)
-class BXClickableTile extends BXLink {
+class CDSClickableTile extends CDSLink {
   protected get _classes() {
     const { colorScheme, disabled } = this;
     return classMap({
@@ -50,4 +48,4 @@ class BXClickableTile extends BXLink {
   static styles = styles;
 }
 
-export default BXClickableTile;
+export default CDSClickableTile;
diff --git a/packages/carbon-web-components/src/components/tile/defs.ts b/packages/carbon-web-components/src/components/tile/defs.ts
index e977bd65bec..ec1f2f62aef 100644
--- a/packages/carbon-web-components/src/components/tile/defs.ts
+++ b/packages/carbon-web-components/src/components/tile/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * 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.
diff --git a/packages/carbon-web-components/src/components/tile/expandable-tile.ts b/packages/carbon-web-components/src/components/tile/expandable-tile.ts
index 61295b4b4cb..4c69218962b 100644
--- a/packages/carbon-web-components/src/components/tile/expandable-tile.ts
+++ b/packages/carbon-web-components/src/components/tile/expandable-tile.ts
@@ -7,30 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import ChevronDown16 from '@carbon/icons/lib/chevron--down/16';
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from './tile.scss';
+import { classMap } from 'lit/directives/class-map.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Expandable tile.
  *
- * @element bx-expandable-tile
- * @fires bx-expandable-tile-beingtoggled
+ * @element cds-expandable-tile
+ * @fires cds-expandable-tile-beingtoggled
  *   The custom event fired before the expanded state is changed upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated change in expanded state.
- * @fires bx-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.
+ * @fires cds-expandable-tile-toggled - The custom event fired after a the expanded state is changed upon a user gesture.
  */
 @customElement(`${prefix}-expandable-tile`)
-class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
+class CDSExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * The computed height of the below-the-fold content.
    */
@@ -48,13 +48,19 @@ class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
         (acc, item) => acc + ((item as HTMLElement).offsetHeight ?? 0),
         0
       );
+
+    if (!this._belowTheContentHeight) {
+      const element = getComputedStyle(
+        this.querySelector('cds-tile-below-the-fold-content') as any
+      );
+      this._belowTheContentHeight = parseInt(element.height, 10);
+    }
     this.requestUpdate();
   }
 
-  @HostListener('click')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleClick = () => {
+  private _handleExpand() {
     const expanded = !this.expanded;
+    this.focus();
     const init = {
       bubbles: true,
       composed: true,
@@ -62,7 +68,7 @@ class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
         expanded,
       },
     };
-    const constructor = this.constructor as typeof BXExpandableTile;
+    const constructor = this.constructor as typeof CDSExpandableTile;
     const beforeChangeEvent = new CustomEvent(constructor.eventBeforeToggle, {
       ...init,
       cancelable: true,
@@ -72,6 +78,14 @@ class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
       const afterChangeEvent = new CustomEvent(constructor.eventToggle, init);
       this.dispatchEvent(afterChangeEvent);
     }
+  }
+
+  @HostListener('click')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleClick = () => {
+    if (!this.withInteractive) {
+      this._handleExpand();
+    }
   };
 
   /**
@@ -86,26 +100,31 @@ class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   expanded = false;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  /**
+   * `true` to expand this expandable tile.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'with-interactive' })
+  withInteractive = false;
 
   render() {
     const {
       expanded,
+      withInteractive,
       _belowTheContentHeight: belowTheContentHeight,
       _handleSlotChangeBelowTheFoldContent: handleSlotChangeBelowTheFoldContent,
     } = this;
+
+    const classes = classMap({
+      [`${prefix}--tile__chevron`]: true,
+      [`${prefix}--tile__chevron--interactive`]: withInteractive,
+    });
     return html`
       <button
-        class="${prefix}--tile__chevron"
+        class="${classes}"
         aria-labelledby="above-the-fold-content"
         aria-controls="below-the-fold-content"
+        tabindex="0"
+        @click="${withInteractive ? this._handleExpand : ''}"
         aria-expanded="${String(Boolean(expanded))}">
         ${ChevronDown16({
           id: 'icon',
@@ -142,4 +161,4 @@ class BXExpandableTile extends HostListenerMixin(FocusMixin(LitElement)) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXExpandableTile;
+export default CDSExpandableTile;
diff --git a/packages/carbon-web-components/src/components/tile/radio-tile.ts b/packages/carbon-web-components/src/components/tile/radio-tile.ts
index 0102799e053..3a0e3732913 100644
--- a/packages/carbon-web-components/src/components/tile/radio-tile.ts
+++ b/packages/carbon-web-components/src/components/tile/radio-tile.ts
@@ -7,121 +7,90 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import HostListener from '../../globals/decorators/host-listener';
-import HostListenerMixin from '../../globals/mixins/host-listener';
-import RadioGroupManager, {
-  NAVIGATION_DIRECTION,
-} from '../../globals/internal/radio-group-manager';
+import { html, svg } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
 import SelectableTile from './selectable-tile';
+import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
-/**
- * Map of navigation direction by key.
- */
-const navigationDirectionForKey = {
-  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,
-  Up: NAVIGATION_DIRECTION.BACKWARD, // IE
-  ArrowDown: NAVIGATION_DIRECTION.FORWARD,
-  Down: NAVIGATION_DIRECTION.FORWARD, // IE
-};
-
 /**
  * Single-selectable tile.
  *
- * @element bx-radio-tile
+ * @element cds-radio-tile
  */
 @customElement(`${prefix}-radio-tile`)
-class BXRadioTile extends HostListenerMixin(SelectableTile) {
-  /**
-   * The radio group manager associated with the radio button.
-   */
-  private _manager!: RadioGroupManager;
-
+class CDSRadioTile extends SelectableTile {
   /**
    * The `type` attribute of the `<input>`.
    */
   protected _inputType = 'radio';
 
-  /**
-   * Attaches the radio button to the radio group manager.
-   */
-  private _attachManager() {
-    if (!this._manager) {
-      this._manager = RadioGroupManager.get(
-        this.getRootNode({ composed: true }) as Document
-      );
-    }
-    const { name, _inputNode: inputNode, _manager: manager } = this;
-    if (inputNode && name) {
-      manager!.add(inputNode);
-    }
-  }
-
-  /**
-   * Detaches the radio button to the radio group manager.
-   */
-  private _detachManager() {
-    const { _inputNode: inputNode, _manager: manager } = this;
-    if (inputNode && manager) {
-      manager.delete(inputNode);
-    }
-  }
-
-  /**
-   * Handles `keydown` event on this element.
-   */
-  @HostListener('keydown')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleKeydown = (event: KeyboardEvent) => {
-    const { _inputNode: inputNode } = this;
-    const manager = this._manager;
-    if (inputNode && manager) {
-      const navigationDirection = navigationDirectionForKey[event.key];
-      if (navigationDirection) {
-        manager.select(manager.navigate(inputNode, navigationDirection));
-        event.preventDefault(); // Prevent default (scrolling) behavior
-      }
-      if (event.key === ' ' || event.key === 'Enter') {
-        manager.select(inputNode);
-      }
-    }
-  };
-
   /**
    * Handles `change` event on the `<input>` in the shadow DOM.
    */
   protected _handleChange() {
-    super._handleChange();
-    if (this._manager) {
-      this._manager.select(this._inputNode);
-    }
+    this.selected = true;
+    const { selected, name } = this;
+    const { eventRadioChange } = this.constructor as typeof CDSRadioTile;
+    this.dispatchEvent(
+      new CustomEvent(eventRadioChange, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          selected,
+          name,
+        },
+      })
+    );
   }
 
-  connectedCallback() {
-    super.connectedCallback();
-    this._attachManager();
+  render() {
+    const {
+      colorScheme,
+      checkmarkLabel,
+      name,
+      selected,
+      value,
+      _inputType: inputType,
+      _handleChange: handleChange,
+    } = this;
+    const classes = classMap({
+      [`${prefix}--tile`]: true,
+      [`${prefix}--tile--selectable`]: true,
+      [`${prefix}--tile--is-selected`]: selected,
+      [`${prefix}--tile--${colorScheme}`]: colorScheme,
+    });
+    return html`
+      <input
+        type="${inputType}"
+        id="input"
+        class="${prefix}--tile-input"
+        tabindex="-1"
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
+        .checked=${selected}
+        @change=${handleChange} />
+      <label for="input" class="${classes}" tabindex="0">
+        <div class="${prefix}--tile__checkmark">
+          ${CheckmarkFilled16({
+            children: !checkmarkLabel
+              ? undefined
+              : svg`<title>${checkmarkLabel}</title>`,
+          })}
+        </div>
+        <div class="${prefix}--tile-content"><slot></slot></div>
+      </label>
+    `;
   }
 
-  disconnectedCallback() {
-    this._detachManager();
-    super.disconnectedCallback();
-  }
-
-  shouldUpdate(changedProperties) {
-    if (changedProperties.has('name')) {
-      this._detachManager();
-    }
-    return true;
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('name')) {
-      this._attachManager();
-    }
+  /**
+   * The name of the custom event fired after this selectable tile changes its selected state.
+   */
+  static get eventRadioChange() {
+    return `${prefix}-radio-tile-selected`;
   }
 }
 
-export default BXRadioTile;
+export default CDSRadioTile;
diff --git a/packages/carbon-web-components/src/components/tile/selectable-tile.ts b/packages/carbon-web-components/src/components/tile/selectable-tile.ts
index 501d5e8b057..4256433c6fc 100644
--- a/packages/carbon-web-components/src/components/tile/selectable-tile.ts
+++ b/packages/carbon-web-components/src/components/tile/selectable-tile.ts
@@ -7,26 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, svg, property, query, LitElement } from 'lit-element';
-import CheckmarkFilled16 from '@carbon/icons/lib/checkmark--filled/16';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html, svg } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import Checkbox16 from '@carbon/icons/lib/checkbox/16';
+import CheckboxCheckedFilled16 from '@carbon/icons/lib/checkbox--checked--filled/16';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
+import HostListenerMixin from '../../globals/mixins/host-listener';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from './tile.scss';
+import HostListener from '../../globals/decorators/host-listener';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Multi-selectable tile.
  *
- * @element bx-selectable-tile
- * @fires bx-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.
+ * @element cds-selectable-tile
+ * @fires cds-selectable-tile-changed - The custom event fired after this selectable tile changes its selected state.
  */
 @customElement(`${prefix}-selectable-tile`)
-class BXSelectableTile extends FocusMixin(LitElement) {
+class CDSSelectableTile extends HostListenerMixin(FocusMixin(LitElement)) {
   @query('input')
   protected _inputNode!: HTMLInputElement;
 
@@ -42,7 +44,7 @@ class BXSelectableTile extends FocusMixin(LitElement) {
     this.selected = this._inputNode.checked;
 
     const selected = this.selected;
-    const { eventChange } = this.constructor as typeof BXSelectableTile;
+    const { eventChange } = this.constructor as typeof CDSSelectableTile;
     this.dispatchEvent(
       new CustomEvent(eventChange, {
         bubbles: true,
@@ -54,6 +56,40 @@ class BXSelectableTile extends FocusMixin(LitElement) {
     );
   }
 
+  /**
+   * Handles the rendering of the icon.
+   */
+  protected _renderIcon() {
+    const { selected, checkmarkLabel } = this;
+
+    return html` ${selected
+      ? CheckboxCheckedFilled16({
+          children: !checkmarkLabel
+            ? undefined
+            : svg`<title>${checkmarkLabel}</title>`,
+        })
+      : Checkbox16({
+          children: !checkmarkLabel
+            ? undefined
+            : svg`<title>${checkmarkLabel}</title>`,
+        })}`;
+  }
+
+  /**
+   * Listener function for keyboard interaction.
+   *
+   * @param event to get the key pressed
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleKeydown = (event: KeyboardEvent) => {
+    const { key } = event;
+
+    if (key === ' ' || key === 'Enter') {
+      this.selected = !this.selected;
+    }
+  };
+
   /**
    * The a11y text for the checkmark icon of the selected state.
    */
@@ -84,18 +120,8 @@ class BXSelectableTile extends FocusMixin(LitElement) {
   @property()
   value!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const {
-      checkmarkLabel,
       colorScheme,
       name,
       selected,
@@ -106,6 +132,7 @@ class BXSelectableTile extends FocusMixin(LitElement) {
     const classes = classMap({
       [`${prefix}--tile`]: true,
       [`${prefix}--tile--selectable`]: true,
+      [`${prefix}--tile--is-selected`]: selected,
       [`${prefix}--tile--${colorScheme}`]: colorScheme,
     });
     return html`
@@ -114,17 +141,14 @@ class BXSelectableTile extends FocusMixin(LitElement) {
         id="input"
         class="${prefix}--tile-input"
         tabindex="-1"
-        name="${ifNonNull(name)}"
-        value="${ifNonNull(value)}"
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
         .checked=${selected}
         @change=${handleChange} />
       <label for="input" class="${classes}" tabindex="0">
-        <div class="${prefix}--tile__checkmark">
-          ${CheckmarkFilled16({
-            children: !checkmarkLabel
-              ? undefined
-              : svg`<title>${checkmarkLabel}</title>`,
-          })}
+        <div
+          class="${prefix}--tile__checkmark ${prefix}--tile__checkmark--persistent">
+          ${this._renderIcon()}
         </div>
         <div class="${prefix}--tile-content"><slot></slot></div>
       </label>
@@ -138,7 +162,12 @@ class BXSelectableTile extends FocusMixin(LitElement) {
     return `${prefix}-selectable-tile-changed`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
   static styles = styles;
 }
 
-export default BXSelectableTile;
+export default CDSSelectableTile;
diff --git a/packages/carbon-web-components/src/components/tile/tile-group.ts b/packages/carbon-web-components/src/components/tile/tile-group.ts
index a17eb96eaaf..7dfd480faa4 100644
--- a/packages/carbon-web-components/src/components/tile/tile-group.ts
+++ b/packages/carbon-web-components/src/components/tile/tile-group.ts
@@ -7,32 +7,303 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import { NAVIGATION_DIRECTION } from '../../globals/internal/radio-group-manager';
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
 import styles from './tile.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
+/**
+ * Map of navigation direction by key.
+ */
+const navigationDirectionForKey = {
+  ArrowUp: NAVIGATION_DIRECTION.BACKWARD,
+  Up: NAVIGATION_DIRECTION.BACKWARD, // IE
+  ArrowDown: NAVIGATION_DIRECTION.FORWARD,
+  Down: NAVIGATION_DIRECTION.FORWARD, // IE
+};
 
 /**
  * Tile group.
  *
- * @element bx-tile-group
+ * @element cds-tile-group
  */
 @customElement(`${prefix}-tile-group`)
-class BXTileGroup extends LitElement {
-  connectedCallback() {
+class CDSTileGroup extends HostListenerMixin(LitElement) {
+  private _handleRadioClick(event) {
+    const { target } = event;
+    const { currentRadioSelection } = this;
+    const { eventCurrentRadioTileSelection } = this
+      .constructor as typeof CDSTileGroup;
+
+    if (!currentRadioSelection) {
+      this.currentRadioSelection = target;
+    } else if (currentRadioSelection !== target) {
+      currentRadioSelection.toggleAttribute('selected');
+      this.currentRadioSelection = target;
+    }
+
+    this.dispatchEvent(
+      new CustomEvent(eventCurrentRadioTileSelection, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          target,
+        },
+      })
+    );
+  }
+
+  private _handleSelectableClick(event) {
+    const { target } = event;
+    const { currentSelections } = this;
+    const { eventCurrentSelectableTilesSelection } = this
+      .constructor as typeof CDSTileGroup;
+
+    if (!currentSelections.includes(target)) {
+      currentSelections.push(target);
+    } else {
+      currentSelections.splice(currentSelections.indexOf(target), 1);
+    }
+    (target as HTMLElement).toggleAttribute('selected');
+
+    this.dispatchEvent(
+      new CustomEvent(eventCurrentSelectableTilesSelection, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          currentSelections,
+        },
+      })
+    );
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+  /**
+   * Click listener to ensure selectability.
+   *
+   * @param event click
+   */
+  @HostListener('click')
+  // @ts-ignore
+  private _handleTileSelect(event: Event) {
+    if (this.radioTiles.length) {
+      this._handleRadioClick(event);
+    } else {
+      this._handleSelectableClick(event);
+    }
+  }
+
+  /**
+   * Handle keyboard navigation for radio tiles
+   *
+   * @param nextSibling to focus on
+   */
+  private _handleKeydownRadio(nextSibling) {
+    const { currentRadioSelection } = this;
+
+    const { eventCurrentRadioTileSelection } = this
+      .constructor as typeof CDSTileGroup;
+
+    if (currentRadioSelection) {
+      currentRadioSelection.toggleAttribute('selected');
+    }
+    nextSibling.focus();
+    nextSibling.toggleAttribute('selected');
+    this.currentRadioSelection = nextSibling;
+
+    this.dispatchEvent(
+      new CustomEvent(eventCurrentRadioTileSelection, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          nextSibling,
+        },
+      })
+    );
+  }
+
+  /**
+   * Handle keyboard navigation for selectable tiles
+   *
+   * @param event to get target
+   * @param nextSibling to focus on
+   */
+  private _handleKeydownSelectable(event, nextSibling?) {
+    const { target } = event;
+    const { currentSelections } = this;
+    const { eventCurrentSelectableTilesSelection } = this
+      .constructor as typeof CDSTileGroup;
+
+    if (nextSibling) {
+      nextSibling.focus();
+    } else {
+      if (!currentSelections.includes(target)) {
+        currentSelections.push(target);
+      } else {
+        currentSelections.splice(currentSelections.indexOf(target), 1);
+      }
+
+      this.dispatchEvent(
+        new CustomEvent(eventCurrentSelectableTilesSelection, {
+          bubbles: true,
+          composed: true,
+          detail: {
+            currentSelections,
+          },
+        })
+      );
+    }
+  }
+
+  /**
+   * Keyboard listener to ensure keyboard navigation.
+   *
+   * @param event to get key pressed
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleKeydown = (event: KeyboardEvent) => {
+    const { target, key } = event;
+    const { radioTiles, selectableTiles } = this;
+    const navigationDirection = navigationDirectionForKey[key];
+
+    let tiles = radioTiles.length ? radioTiles : selectableTiles;
+    const currentIndex = [...tiles].findIndex((e) => e == target);
+    const nextIndex = currentIndex + navigationDirection;
+    const nextSibling =
+      nextIndex !== -1
+        ? tiles[nextIndex % tiles.length]
+        : tiles[tiles.length - 1];
+
+    if (navigationDirection) {
+      event.preventDefault(); // Prevent default (scrolling) behavior
+
+      if (this.radioTiles.length) {
+        this._handleKeydownRadio(nextSibling);
+      } else {
+        this._handleKeydownSelectable(event, nextSibling);
+      }
+    } else if (key === ' ' || key === 'Enter') {
+      this._handleKeydownSelectable(event);
+    }
+  };
+
+  /**
+   * Focus listener to focus on selected element upon focusing
+   *
+   * @param event to get focused
+   */
+  @HostListener('focusin')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleFocus = (event: KeyboardEvent) => {
+    const { relatedTarget, target } = event as any;
+
+    if (this.radioTiles.length) {
+      if (!this.currentRadioSelection) {
+        target.toggleAttribute('selected');
+        this.currentRadioSelection = target;
+      } else if (
+        !relatedTarget?.matches(
+          (this.constructor as typeof CDSTileGroup).selectorRadioTile
+        ) &&
+        target !== this.currentRadioSelection
+      ) {
+        this.currentRadioSelection.focus();
+      }
+    }
+  };
+
+  /**
+   * Provide an optional className to be applied to the component
+   */
+  @property({ reflect: true, attribute: 'fieldset-class-name' })
+  fieldsetClassName;
+
+  /**
+   * Specify whether the group is disabled
+   */
+  @property({ reflect: true, type: Boolean })
+  disabled;
+
+  @property()
+  currentRadioSelection;
+
+  @property()
+  currentSelections = [] as any;
+
+  @property()
+  radioTiles;
+
+  @property()
+  selectableTiles;
+
+  firstUpdated() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'group');
     }
-    super.connectedCallback();
+
+    if (!this.radioTiles) {
+      this.radioTiles = this.querySelectorAll(
+        (this.constructor as typeof CDSTileGroup).selectorRadioTile
+      );
+    }
+
+    if (!this.selectableTiles) {
+      this.selectableTiles = this.querySelectorAll(
+        (this.constructor as typeof CDSTileGroup).selectorSelectableTile
+      );
+    }
+
+    if (this.disabled) {
+      this.radioTiles.forEach((e) => e.toggleAttribute('disabled'));
+      this.selectableTiles.forEach((e) => e.toggleAttribute('disabled'));
+    }
   }
 
   render() {
-    return html` <slot></slot> `;
+    const { fieldsetClassName, disabled } = this;
+    return html`
+      <fieldset class="${fieldsetClassName}" ?disabled=${disabled}>
+        <slot name="legend" class="${prefix}--label"></slot>
+        <slot></slot>
+      </fieldset>
+    `;
+  }
+
+  /**
+   * A selector that selects a radio tile component.
+   */
+  static get selectorRadioTile() {
+    return `${prefix}-radio-tile`;
+  }
+
+  /**
+   * A selector that selects a selectable tile component.
+   */
+  static get selectorSelectableTile() {
+    return `${prefix}-selectable-tile`;
+  }
+
+  /**
+   * The name of the custom event fired after a radio tile changes its selected state.
+   */
+  static get eventCurrentRadioTileSelection() {
+    return `${prefix}-current-radio-tile-selection`;
+  }
+
+  /**
+   * The name of the custom event fired after a radio tile changes its selected state.
+   */
+  static get eventCurrentSelectableTilesSelection() {
+    return `${prefix}-current-selectable-tile-selections`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXTileGroup;
+export default CDSTileGroup;
diff --git a/packages/carbon-web-components/src/components/tile/tile-story.mdx b/packages/carbon-web-components/src/components/tile/tile-story.mdx
index 238d8ca8ce2..df8063794a9 100644
--- a/packages/carbon-web-components/src/components/tile/tile-story.mdx
+++ b/packages/carbon-web-components/src/components/tile/tile-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tile
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tile)
 
 Tiles are a highly flexible component for displaying a wide variety of content,
 including informational, getting started, how-to, next steps, and more.
@@ -36,7 +36,7 @@ import '@carbon/web-components/es/components/tile/index.js';
 ### HTML
 
 ```html
-<bx-tile>Default tile</bx-tile>
+<cds-tile>Default tile</cds-tile>
 ```
 
 ## Read-only tile (default)
@@ -53,53 +53,85 @@ clickable state, which redirects the user to a new page. Clickable tiles cannot
 contain separate internal CTAs.
 
 ```html
-<bx-clickable-tile> Clickable tile </bx-clickable-tile>
+<cds-clickable-tile> Clickable tile </cds-clickable-tile>
 ```
 
-## `<bx-clickable-tile>` attributes and properties
+## `<cds-clickable-tile>` attributes and properties
 
-<Props of="bx-clickable-tile" />
+<Props of="cds-clickable-tile" />
 
-## Selectable tile
+## Radio tile
 
-Selectable tiles work like a radio button, where the entire tile is a click
-target. Selectable tiles may contain internal CTAs (like links to docs) if the
-internal CTA is given its own click target. Selectable tiles work well for
-presenting options to a user in a structured manner, such as a set of pricing
-plans.
+Radio tiles work like a radio button, where the entire tile is a click target.
+Radio tiles may contain internal CTAs (like links to docs) if the internal CTA
+is given its own click target. Radio tiles work well for presenting options to a
+user in a structured manner, such as a set of pricing plans.
 
 ```html
-<fieldset>
-  <legend>Single-select tiles</legend>
-  <bx-radio-tile name="selectable-tile"> Single-select Tile </bx-radio-tile>
-  <bx-radio-tile name="selectable-tile"> Single-select Tile </bx-radio-tile>
-  <bx-radio-tile name="selectable-tile"> Single-select Tile </bx-radio-tile>
-</fieldset>
+<cds-tile-group>
+  <cds-radio-tile name="selectable-tile"> Single-select Tile </cds-radio-tile>
+  <cds-radio-tile name="selectable-tile"> Single-select Tile </cds-radio-tile>
+  <cds-radio-tile name="selectable-tile"> Single-select Tile </cds-radio-tile>
+</cds-tile-group>
 ```
 
-## `<bx-radio-tile>` attributes and properties
+## `<cds-radio-tile>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-radio-tile selected>`) and `false` means not setting the attribute (e.g.
-`<bx-radio-tile>` without `selected` attribute).
+`<cds-radio-tile selected>`) and `false` means not setting the attribute (e.g.
+`<cds-radio-tile>` without `selected` attribute).
 
-<Props of="bx-radio-tile" />
+<Props of="cds-radio-tile" />
 
-## Multi-selectable tile
+## Selectable tile
 
 ```html
-<bx-selectable-tile name="selectable-tile">
-  Multi-select Tile
-</bx-selectable-tile>
+<cds-selectable-tile name="selectable-tile">
+  Selectable Tile
+</cds-selectable-tile>
 ```
 
-## `<bx-selectable-tile>` attributes and properties and events
+## `<cds-selectable-tile>` attributes and properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-selectable-tile selected>`) and `false` means not setting the attribute
-(e.g. `<bx-selectable-tile>` without `selected` attribute).
+`<cds-selectable-tile selected>`) and `false` means not setting the attribute
+(e.g. `<cds-selectable-tile>` without `selected` attribute).
+
+<Props of="cds-selectable-tile" />
+
+## Multi Select
+
+```html
+<cds-tile-group>
+  <cds-selectable-tile name="selectable-tile">
+    Selectable Tile 1
+  </cds-selectable-tile>
+  <cds-selectable-tile name="selectable-tile2">
+    Selectable Tile 2
+  </cds-selectable-tile>
+  <cds-selectable-tile name="selectable-tile3">
+    Selectable Tile 3
+  </cds-selectable-tile>
+  <cds-tile-group></cds-tile-group
+></cds-tile-group>
+```
 
-<Props of="bx-selectable-tile" />
+## Capturing tile selection
+
+If using the `cds-tile-group` component alongside either Radio or Selectable
+tiles, you can capture the events using an event listener for the following
+event names:
+
+- For radio tiles, capture:
+  - `cds-current-radio-tile-selection`
+- For selectable tiles, capture:
+  - `cds-current-selectable-tile-selections`
+
+```javascript
+document.addEventListener('cds-current-radio-tile-selection', (event) => {
+  // use values from the detail object within the event
+});
+```
 
 ## Expandable tile
 
@@ -110,23 +142,25 @@ tiles may contain internal CTAs (like links to docs) if the internal CTA is
 given its own click target.
 
 ```html
-<bx-expandable-tile>
-  <bx-tile-above-the-fold-content
+<cds-expandable-tile>
+  <cds-tile-above-the-fold-content
     slot="above-the-fold-content"
-    style="height: 200px"
-  >
+    style="height: 200px">
     Above the fold content here
-  </bx-tile-above-the-fold-content>
-  <bx-tile-below-the-fold-content style="height: 300px">
+  </cds-tile-above-the-fold-content>
+  <cds-tile-below-the-fold-content style="height: 300px">
     Below the fold content here
-  </bx-tile-below-the-fold-content>
-</bx-expandable-tile>
+  </cds-tile-below-the-fold-content>
+</cds-expandable-tile>
 ```
 
-## `<bx-expandable-tile>` attributes, properties and events
+If the desired behavior is expanding only upon clicking the button with the
+caret icon, use the `with-interactive` attribute instead.
+
+## `<cds-expandable-tile>` attributes, properties and events
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-expandable-tile expanded>`) and `false` means not setting the attribute
-(e.g. `<bx-expandable-tile>` without `expanded` attribute).
+`<cds-expandable-tile expanded>`) and `false` means not setting the attribute
+(e.g. `<cds-expandable-tile>` without `expanded` attribute).
 
-<Props of="bx-expandable-tile" />
+<Props of="cds-expandable-tile" />
diff --git a/packages/carbon-web-components/src/components/tile/tile-story.ts b/packages/carbon-web-components/src/components/tile/tile-story.ts
index f9f9f301d4a..ed03958aebd 100644
--- a/packages/carbon-web-components/src/components/tile/tile-story.ts
+++ b/packages/carbon-web-components/src/components/tile/tile-story.ts
@@ -1,23 +1,22 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
+import { prefix } from '../../globals/settings';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
 import { TILE_COLOR_SCHEME } from './tile';
-import './clickable-tile';
-import './radio-tile';
-import './selectable-tile';
-import './expandable-tile';
+import './index';
 import storyDocs from './tile-story.mdx';
+import '../../../.storybook/templates/with-layer';
 
 const colorSchemes = {
   [`Regular`]: null,
@@ -25,99 +24,112 @@ const colorSchemes = {
 };
 
 export const Default = (args) => {
-  const { colorScheme } = args?.['bx-tile'] ?? {};
+  const { colorScheme } = args?.[`${prefix}-tile`] ?? {};
   return html`
-    <bx-tile color-scheme="${ifNonNull(colorScheme)}">Default tile</bx-tile>
+    <cds-tile color-scheme="${ifDefined(colorScheme)}">
+      Default tile
+      <a href="https://example.com">Link</a>
+    </cds-tile>
   `;
 };
 
 Default.storyName = 'Default';
 
-Default.parameters = {
-  knobs: {
-    'bx-tile': () => ({
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
-    }),
-  },
+export const DefaultWithLayer = (args) => {
+  const { colorScheme } = args?.[`${prefix}-tile`] ?? {};
+  return html`
+    <sb-template-layers>
+      <cds-tile color-scheme="${ifDefined(colorScheme)}">
+        Default layer
+        <a href="https://example.com">Link</a>
+      </cds-tile>
+    </sb-template-layers>
+  `;
 };
 
 export const clickable = (args) => {
-  const {
-    colorScheme,
-    disabled,
-    download,
-    href,
-    hreflang,
-    ping,
-    rel,
-    target,
-    type,
-  } = args?.['bx-clickable-tile'] ?? {};
+  const { download, href, hreflang, ping, rel, target, type } =
+    args?.[`${prefix}-clickable-tile`] ?? {};
   return html`
-    <bx-clickable-tile
-      color-scheme="${ifNonNull(colorScheme)}"
-      ?disabled="${disabled}"
-      download="${ifNonNull(download)}"
-      href="${ifNonNull(href)}"
-      hreflang="${ifNonNull(hreflang)}"
-      ping="${ifNonNull(ping)}"
-      rel="${ifNonNull(rel)}"
-      target="${ifNonNull(target)}"
-      type="${ifNonNull(type)}">
+    <cds-clickable-tile
+      download="${ifDefined(download)}"
+      href="${ifDefined(href)}"
+      hreflang="${ifDefined(hreflang)}"
+      ping="${ifDefined(ping)}"
+      rel="${ifDefined(rel)}"
+      target="${ifDefined(target)}"
+      type="${ifDefined(type)}">
       Clickable tile
-    </bx-clickable-tile>
+    </cds-clickable-tile>
   `;
 };
 
 clickable.parameters = {
   knobs: {
-    'bx-clickable-tile': () => ({
-      colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
-      disabled: boolean('Disabled (disabled)', false),
-      href: textNullable('Href for clickable UI (href)', ''),
+    [`${prefix}-clickable-tile`]: () => ({
+      href: textNullable('Href for clickable UI (href)', 'https://example.com'),
     }),
   },
 };
 
-export const singleSelectable = (args) => {
+export const ClickableWithLayer = (args) => {
+  const { download, href, hreflang, ping, rel, target, type } =
+    args?.[`${prefix}-clickable-tile`] ?? {};
+  return html`
+    <sb-template-layers>
+      <cds-clickable-tile
+        download="${ifDefined(download)}"
+        href="${ifDefined(href)}"
+        hreflang="${ifDefined(hreflang)}"
+        ping="${ifDefined(ping)}"
+        rel="${ifDefined(rel)}"
+        target="${ifDefined(target)}"
+        type="${ifDefined(type)}">
+        Clickable tile
+      </cds-clickable-tile>
+    </sb-template-layers>
+  `;
+};
+
+export const Radio = (args) => {
   const { checkmarkLabel, colorScheme, name, value, onInput } =
-    args?.['bx-radio-tile'] ?? {};
+    args?.[`${prefix}-radio-tile`] ?? {};
   return html`
-    <fieldset>
-      <legend>Single-select tiles</legend>
-      <bx-radio-tile
-        checkmark-label="${ifNonNull(checkmarkLabel)}"
-        color-scheme="${ifNonNull(colorScheme)}"
-        name="${ifNonNull(name)}"
-        value="${ifNonNull(value)}"
+    <cds-tile-group>
+      <legend slot="legend">Radio tile group</legend>
+      <cds-radio-tile
+        checkmark-label="${ifDefined(checkmarkLabel)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
         @input="${onInput}">
-        Single-select Tile
-      </bx-radio-tile>
-      <bx-radio-tile
-        checkmark-label="${ifNonNull(checkmarkLabel)}"
-        color-scheme="${ifNonNull(colorScheme)}"
-        name="${ifNonNull(name)}"
-        value="${ifNonNull(value)}"
+        Option 1
+      </cds-radio-tile>
+      <cds-radio-tile
+        checkmark-label="${ifDefined(checkmarkLabel)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
         @input="${onInput}">
-        Single-select Tile
-      </bx-radio-tile>
-      <bx-radio-tile
-        checkmark-label="${ifNonNull(checkmarkLabel)}"
-        color-scheme="${ifNonNull(colorScheme)}"
-        name="${ifNonNull(name)}"
-        value="${ifNonNull(value)}"
+        Option 2
+      </cds-radio-tile>
+      <cds-radio-tile
+        checkmark-label="${ifDefined(checkmarkLabel)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
         @input="${onInput}">
-        Single-select Tile
-      </bx-radio-tile>
-    </fieldset>
+        Option 3
+      </cds-radio-tile>
+    </cds-tile-group>
   `;
 };
 
-singleSelectable.storyName = 'Single-selectable';
+Radio.storyName = 'Radio';
 
-singleSelectable.parameters = {
+Radio.parameters = {
   knobs: {
-    'bx-radio-tile': () => ({
+    [`${prefix}-radio-tile`]: () => ({
       checkmarkLabel: textNullable(
         'Label text for the checkmark icon (checkmark-label)',
         ''
@@ -130,28 +142,60 @@ singleSelectable.parameters = {
   },
 };
 
+export const RadioWithLayer = () => {
+  return html`
+    <sb-template-layers>
+      <cds-tile-group>
+        <legend slot="legend">Radio tile group</legend>
+        <cds-radio-tile name="option-1a"> Option 1 </cds-radio-tile>
+        <cds-radio-tile name="option-2a"> Option 2 </cds-radio-tile>
+      </cds-tile-group>
+    </sb-template-layers>
+  `;
+};
+
 export const multiSelectable = (args) => {
   const { checkmarkLabel, colorScheme, name, selected, value, onInput } =
-    args?.['bx-selectable-tile'] ?? {};
+    args?.[`${prefix}-selectable-tile`] ?? {};
   return html`
-    <bx-selectable-tile
-      checkmark-label="${ifNonNull(checkmarkLabel)}"
-      color-scheme="${ifNonNull(colorScheme)}"
-      name="${ifNonNull(name)}"
-      ?selected="${selected}"
-      value="${ifNonNull(value)}"
-      @input="${onInput}">
-      Multi-select Tile
-    </bx-selectable-tile>
+    <cds-tile-group>
+      <cds-selectable-tile
+        checkmark-label="${ifDefined(checkmarkLabel)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        name="${ifDefined(name)}"
+        ?selected="${selected}"
+        value="${ifDefined(value)}"
+        @input="${onInput}">
+        Option 1
+      </cds-selectable-tile>
+      <cds-selectable-tile
+        checkmark-label="${ifDefined(checkmarkLabel)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        name="${ifDefined(name)}"
+        ?selected="${selected}"
+        value="${ifDefined(value)}"
+        @input="${onInput}">
+        Option 2
+      </cds-selectable-tile>
+      <cds-selectable-tile
+        checkmark-label="${ifDefined(checkmarkLabel)}"
+        color-scheme="${ifDefined(colorScheme)}"
+        name="${ifDefined(name)}"
+        ?selected="${selected}"
+        value="${ifDefined(value)}"
+        @input="${onInput}">
+        Option 3
+      </cds-selectable-tile>
+    </cds-tile-group>
   `;
 };
 
-multiSelectable.storyName = 'Multi-selectable';
+multiSelectable.storyName = 'Multi Select';
 
 multiSelectable.parameters = {
   knobs: {
-    'bx-selectable-tile': () => ({
-      ...singleSelectable.parameters.knobs['bx-radio-tile'](),
+    [`${prefix}-selectable-tile`]: () => ({
+      ...Radio.parameters.knobs[`${prefix}-radio-tile`](),
       selected: boolean('Selected (selected)', false),
     }),
   },
@@ -159,7 +203,34 @@ multiSelectable.parameters = {
 
 export const expandable = (args) => {
   const { colorScheme, expanded, disableChange, onBeforeChange, onChange } =
-    args?.['bx-expandable-tile'] ?? {};
+    args?.[`${prefix}-expandable-tile`] ?? {};
+  const handleBeforeChanged = (event: CustomEvent) => {
+    onBeforeChange(event);
+    if (disableChange) {
+      event.preventDefault();
+    }
+  };
+  return html`
+    <cds-expandable-tile
+      color-scheme="${ifDefined(colorScheme)}"
+      ?expanded="${expanded}"
+      @cds-expandable-tile-beingchanged=${handleBeforeChanged}
+      @cds-expandable-tile-changed=${onChange}>
+      <cds-tile-above-the-fold-content
+        slot="above-the-fold-content"
+        style="height: 200px">
+        Above the fold content here
+      </cds-tile-above-the-fold-content>
+      <cds-tile-below-the-fold-content style="height: 300px">
+        Below the fold content here
+      </cds-tile-below-the-fold-content>
+    </cds-expandable-tile>
+  `;
+};
+
+export const ExpandableWithInteractive = (args) => {
+  const { colorScheme, expanded, disableChange, onBeforeChange, onChange } =
+    args?.[`${prefix}-expandable-tile`] ?? {};
   const handleBeforeChanged = (event: CustomEvent) => {
     onBeforeChange(event);
     if (disableChange) {
@@ -167,39 +238,80 @@ export const expandable = (args) => {
     }
   };
   return html`
-    <bx-expandable-tile
-      color-scheme="${ifNonNull(colorScheme)}"
+    <cds-expandable-tile
+      with-interactive
+      color-scheme="${ifDefined(colorScheme)}"
       ?expanded="${expanded}"
-      @bx-expandable-tile-beingchanged=${handleBeforeChanged}
-      @bx-expandable-tile-changed=${onChange}>
-      <bx-tile-above-the-fold-content
+      @cds-expandable-tile-beingchanged=${handleBeforeChanged}
+      @cds-expandable-tile-changed=${onChange}>
+      <cds-tile-above-the-fold-content
         slot="above-the-fold-content"
         style="height: 200px">
         Above the fold content here
-      </bx-tile-above-the-fold-content>
-      <bx-tile-below-the-fold-content style="height: 300px">
+        <div style="padding-top:1rem;">
+          <cds-button>Example</cds-button>
+        </div>
+      </cds-tile-above-the-fold-content>
+      <cds-tile-below-the-fold-content style="height: 300px">
         Below the fold content here
-      </bx-tile-below-the-fold-content>
-    </bx-expandable-tile>
+        <cds-text-input></cds-text-input>
+      </cds-tile-below-the-fold-content>
+    </cds-expandable-tile>
+  `;
+};
+
+export const ExpandableWithLayer = (args) => {
+  const { colorScheme, expanded, disableChange, onBeforeChange, onChange } =
+    args?.[`${prefix}-expandable-tile`] ?? {};
+  const handleBeforeChanged = (event: CustomEvent) => {
+    onBeforeChange(event);
+    if (disableChange) {
+      event.preventDefault();
+    }
+  };
+  return html`
+    <sb-template-layers>
+      <cds-expandable-tile
+        style="width:400px"
+        color-scheme="${ifDefined(colorScheme)}"
+        ?expanded="${expanded}"
+        @cds-expandable-tile-beingchanged=${handleBeforeChanged}
+        @cds-expandable-tile-changed=${onChange}>
+        <cds-tile-above-the-fold-content
+          slot="above-the-fold-content"
+          style="height: 200px">
+          Above the fold content here
+        </cds-tile-above-the-fold-content>
+        <cds-tile-below-the-fold-content style="height: 300px">
+          Below the fold content here
+        </cds-tile-below-the-fold-content>
+      </cds-expandable-tile>
+    </sb-template-layers>
   `;
 };
 
 expandable.parameters = {
   knobs: {
-    'bx-expandable-tile': () => ({
+    [`${prefix}-expandable-tile`]: () => ({
       colorScheme: select('Color scheme (color-scheme)', colorSchemes, null),
       expanded: boolean('Expanded (expanded)', false),
       disableChange: boolean(
         'Disable user-initiated change in expanded state ' +
-          '(Call event.preventDefault() in bx-expandable-tile-beingchanged event)',
+          '(Call event.preventDefault() in cds-expandable-tile-beingchanged event)',
         false
       ),
-      onBeforeChange: action('bx-expandable-tile-beingchanged'),
-      onChange: action('bx-expandable-tile-changed'),
+      onBeforeChange: action('cds-expandable-tile-beingchanged'),
+      onChange: action('cds-expandable-tile-changed'),
     }),
   },
 };
 
+export const Selectable = () => {
+  return html` <cds-selectable-tile> Default tile </cds-selectable-tile> `;
+};
+
+Selectable.storyName = 'Selectable';
+
 export default {
   title: 'Components/Tile',
   decorators: [(story) => html` <div>${story()}</div> `],
diff --git a/packages/carbon-web-components/src/components/tile/tile.scss b/packages/carbon-web-components/src/components/tile/tile.scss
index 29a2173d6f8..e8c15683091 100644
--- a/packages/carbon-web-components/src/components/tile/tile.scss
+++ b/packages/carbon-web-components/src/components/tile/tile.scss
@@ -7,15 +7,39 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/tile/tile';
-@import 'carbon-components/scss/components/link/link';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/focus-outline' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/components/tile/index' as *;
+@use '@carbon/styles/scss/components/link/index' as *;
+@use '@carbon/styles/scss/components/form/index' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/layout' as *;
 
 :host(#{$prefix}-tile) {
   @extend .#{$prefix}--tile;
+  @include emit-layout-tokens();
+
+  ::slotted(.#{$prefix}--link) {
+    @extend .#{$prefix}--link;
+  }
+}
+
+:host(#{$prefix}-tile-group) {
+  @extend .#{$prefix}--tile-group;
+
+  background: transparent;
+
+  fieldset {
+    border: none;
+  }
 }
 
 :host(#{$prefix}-clickable-tile) {
-  display: content;
+  @include emit-layout-tokens();
+
+  display: grid;
   outline: none;
 
   .#{$prefix}--link--disabled {
@@ -24,28 +48,45 @@ $css--plex: true !default;
 
   .#{$prefix}--tile {
     // Overrides what `.#{$prefix}--link` defines
-    padding: $carbon--spacing-05;
-    outline: 2px solid transparent;
+    padding: $spacing-05;
+    outline: $spacing-01 solid transparent;
   }
 
   .#{$prefix}--tile--clickable {
+    @extend .#{$prefix}--tile--clickable;
     // Overrides what `.#{$prefix}--link` defines
-    transition: $duration--moderate-01 motion(standard, productive);
+    transition: $duration-moderate-01 motion(standard, productive);
 
     &:focus {
       @include focus-outline('outline');
     }
   }
+
+  &:hover {
+    .#{$prefix}--tile--clickable {
+      color: inherit;
+    }
+  }
 }
 
 :host(#{$prefix}-radio-tile) {
-  display: content;
+  @include emit-layout-tokens();
+
+  display: block;
   outline: none;
+
+  margin-bottom: $spacing-03;
 }
 
 :host(#{$prefix}-selectable-tile) {
+  @include emit-layout-tokens();
+
   display: content;
   outline: none;
+
+  .#{$prefix}--tile__chevron {
+    @extend .#{$prefix}--tile__chevron;
+  }
 }
 
 :host(#{$prefix}-radio-tile),
@@ -60,8 +101,7 @@ $css--plex: true !default;
 :host(#{$prefix}-expandable-tile) {
   @extend .#{$prefix}--tile;
   @extend .#{$prefix}--tile--expandable;
-
-  position: relative;
+  @include emit-layout-tokens();
 
   ::slotted(#{$prefix}-tile-above-the-fold-content) {
     @extend .#{$prefix}--tile-content__above-the-fold;
@@ -73,7 +113,7 @@ $css--plex: true !default;
 
   .#{$prefix}-ce--expandable-tile--below-the-fold-content {
     max-height: 0;
-    transition: max-height $duration--fast-02 motion(standard, productive);
+    transition: max-height $duration-fast-02 motion(standard, productive);
   }
 }
 
@@ -82,11 +122,33 @@ $css--plex: true !default;
 
   ::slotted(#{$prefix}-tile-below-the-fold-content) {
     opacity: 1;
-    transition: $duration--fast-02 motion(standard, productive);
+    transition: $duration-fast-02 motion(standard, productive);
     visibility: visible;
   }
 }
 
+:host(#{$prefix}-expandable-tile[with-interactive]) {
+  cursor: default;
+  transition: max-height $duration-moderate-01 motion(standard, productive);
+
+  &:hover {
+    background-color: $layer;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+:host(#{$prefix}-expandable-tile:not([with-interactive])) {
+  .#{$prefix}--tile__chevron {
+    background: none;
+    border: none;
+    outline: none;
+    cursor: pointer;
+  }
+}
+
 :host(#{$prefix}-tile[color-scheme='light']),
 :host(#{$prefix}-expandable-tile[color-scheme='light']) {
   @extend .#{$prefix}--tile--light;
diff --git a/packages/carbon-web-components/src/components/tile/tile.ts b/packages/carbon-web-components/src/components/tile/tile.ts
index 68d24e7f69c..7feb8b83dae 100644
--- a/packages/carbon-web-components/src/components/tile/tile.ts
+++ b/packages/carbon-web-components/src/components/tile/tile.ts
@@ -7,29 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { TILE_COLOR_SCHEME } from './defs';
 import styles from './tile.scss';
+import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { TILE_COLOR_SCHEME };
 
-const { prefix } = settings;
-
 /**
  * Basic tile.
  *
- * @element bx-tile
+ * @element cds-tile
  */
 @customElement(`${prefix}-tile`)
-class BXTile extends LitElement {
+class CDSTile extends LitElement {
   /**
    * The color scheme.
    */
   @property({ attribute: 'color-scheme', reflect: true })
   colorScheme = TILE_COLOR_SCHEME.REGULAR;
 
+  updated() {
+    const anchorTag = this.querySelector('a');
+
+    if (anchorTag) {
+      anchorTag?.classList.add(`${prefix}--link`);
+      anchorTag.before(document.createElement('br'));
+      anchorTag.before(document.createElement('br'));
+    }
+  }
+
   render() {
     return html` <slot></slot> `;
   }
@@ -37,4 +46,4 @@ class BXTile extends LitElement {
   static styles = styles;
 }
 
-export default BXTile;
+export default CDSTile;
diff --git a/packages/carbon-web-components/src/components/toggle-tip/index.ts b/packages/carbon-web-components/src/components/toggle-tip/index.ts
new file mode 100644
index 00000000000..28bf60934d5
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/index.ts
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 './toggletip';
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
new file mode 100644
index 00000000000..9803ed7a39e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.mdx
@@ -0,0 +1,105 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
+
+# Tooltip
+
+> 💡 Check our
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+> example implementation.
+
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+
+Tooltips provide additional information upon hover or focus. The information
+should be contextual, useful, and nonessential information. Keep tooltips short.
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/web-components/es/components/tooltip/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['tooltip'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-tooltip>
+  <cds-tooltip-body>
+    <p>
+      This is some tooltip text. This box shows the maximum amount of text that
+      should appear inside. If more room is needed please use a modal instead.
+    </p>
+    <cds-tooltip-footer>
+      <a href="#" class="cds--link">Learn More</a
+      ><cds-button kind="primary">Create</cds-button>
+    </cds-tooltip-footer>
+  </cds-tooltip-body>
+</cds-tooltip>
+```
+
+## Interactive tooltip (default)
+
+Interactive tooltips may contain rich text and other interactive elements like
+buttons or links. In general, hiding interactive content in a tooltip is
+discouraged. Interactive tooltips are best used for onboarding experiences and
+product tours.
+
+- If a user may need to visit an external resource, like while using a form,
+  include a link in your interactive tooltip
+- Don’t use without a label. Consider the context a user needs before clicking a
+  link
+
+### `<cds-tooltip>` attributes and properties
+
+Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
+`<cds-tooltip open>`) and `false` means not setting the attribute (e.g.
+`<cds-tooltip>` without `open` attribute).
+
+<Props of="cds-tooltip" />
+
+## Definition tooltip
+
+The definition tooltip provides additional help or defines an item or term. It
+may be used on the label of a UI element, or on a word embedded in a paragraph.
+
+- Should contain brief, read-only text
+- Use on proper nouns, technical terms, or acronyms with two letters or more
+- Do not use a definition tooltip on words with fewer than two letters
+
+```html
+<cds-tooltip-definition
+  alignment="center"
+  body-text="Brief description of the dotted, underlined word above."
+  direction="bottom">
+  Definition Tooltip
+</cds-tooltip-definition>
+```
+
+### `<cds-tooltip-definition>` attributes and properties
+
+<Props of="cds-tooltip-definition" />
+
+## Icon tooltip
+
+An icon tooltip is used to clarify the action or name of an interactive icon
+button.
+
+- The tooltip content should only contain one or two words.
+
+```html
+<cds-tooltip-icon
+  alignment="center"
+  body-text="Brief description of the dotted, underlined word above."
+  direction="bottom">
+  ${Filter16()}
+</cds-tooltip-icon>
+```
+
+### `<cds-tooltip-icon>` attributes and properties
+
+<Props of="cds-tooltip-icon" />
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts
new file mode 100644
index 00000000000..2ed06a0c498
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip-story.ts
@@ -0,0 +1,70 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { select } from '@storybook/addon-knobs';
+import textNullable from '../../../.storybook/knob-text-nullable';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
+import './toggletip';
+import '../button';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+import storyDocs from './toggletip-story.mdx';
+
+const tooltipAlignments = {
+  [`top`]: POPOVER_ALIGNMENT.TOP,
+  [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+  [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+  [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+  [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+  [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+  [`left`]: POPOVER_ALIGNMENT.LEFT,
+  [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+  [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+  [`right`]: POPOVER_ALIGNMENT.RIGHT,
+  [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+  [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
+};
+
+export const Default = (args) => {
+  const { alignment, bodyText } = args?.[`${prefix}-toggletip`] ?? {};
+  return html`
+    <cds-toggletip alignment="${ifDefined(alignment)}">
+      Toggletip label
+
+      <p slot="body-text">${bodyText}</p>
+      <cds-link slot="actions">Test</cds-link>
+      <cds-button slot="actions">Button</cds-button>
+    </cds-toggletip>
+  `;
+};
+
+Default.parameters = {
+  knobs: {
+    [`${prefix}-toggletip`]: () => ({
+      alignment: select(
+        'Toggletip alignment to trigger button (alignment)',
+        tooltipAlignments,
+        POPOVER_ALIGNMENT.BOTTOM
+      ),
+      bodyText: textNullable(
+        'Toggletip content (bodyText)',
+        `Lorem ipsum dolor sit amet, di os consectetur adipiscing elit,
+        sed do eiusmod tempor incididunt ut fsil labore et dolore magna aliqua.`
+      ),
+    }),
+  },
+};
+
+export default {
+  title: 'Components/Toggletip',
+  parameters: {
+    ...storyDocs.parameters,
+  },
+};
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss
new file mode 100644
index 00000000000..9cce2504793
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.scss
@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/toggletip/index' as *;
+@use '@carbon/styles/scss/components/tooltip/index' as *;
+@use '@carbon/styles/scss/utilities/button-reset';
+@use '../popover/popover.scss' as *;
+
+:host(#{$prefix}-toggletip),
+:host(#{$prefix}-slug) {
+  // TODO: audit
+  @extend .#{$prefix}--toggletip;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  outline: none;
+
+  .#{$prefix}--popover-caret {
+    background-color: $background-inverse;
+  }
+}
diff --git a/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts b/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
new file mode 100644
index 00000000000..75e0168d12e
--- /dev/null
+++ b/packages/carbon-web-components/src/components/toggle-tip/toggletip.ts
@@ -0,0 +1,130 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import Information16 from '@carbon/icons/lib/information/16';
+import { prefix } from '../../globals/settings';
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
+import FocusMixin from '../../globals/mixins/focus';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+import styles from './toggletip.scss';
+
+/**
+ * Definition tooltip.
+ *
+ * @element cds-toggletip
+ */
+@customElement(`${prefix}-toggletip`)
+class CDSToggletip extends HostListenerMixin(FocusMixin(LitElement)) {
+  /**
+   * How the tooltip is aligned to the trigger button.
+   */
+  @property({ reflect: true })
+  alignment = POPOVER_ALIGNMENT.TOP;
+
+  @property({ type: Boolean, reflect: true })
+  open = false;
+
+  protected _handleClick = () => {
+    this.open = !this.open;
+  };
+
+  /**
+   * Handles `keydown` event on this element.
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  protected _handleKeydown = async (event) => {
+    if (event.key === 'Escape') {
+      this.open = false;
+    }
+  };
+
+  /**
+   * Handles `blur` event handler on the document this element is in.
+   *
+   * @param event The event.
+   */
+  @HostListener('focusout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  protected _handleFocusOut(event: FocusEvent) {
+    if (!this.contains(event.relatedTarget as Node)) {
+      this.open = false;
+    }
+  }
+
+  protected _renderToggleTipLabel = () => {
+    return html`
+      <span class="${prefix}--toggletip-label">
+        <slot></slot>
+      </span>
+    `;
+  };
+
+  protected _renderTooltipButton = () => {
+    return html`
+      <button
+        aria-controls="${this.id}"
+        class="${prefix}--toggletip-button"
+        @click=${this._handleClick}>
+        ${Information16({ id: 'trigger' })}
+      </button>
+    `;
+  };
+
+  protected _renderTooltipContent = () => {
+    return html`
+      <span class="${prefix}--popover">
+        <span class="${prefix}--popover-content">
+          <div class="${prefix}--toggletip-content">
+            <slot name="body-text"></slot>
+            <div class="${prefix}--toggletip-actions">
+              <slot name="actions"></slot>
+            </div>
+          </div>
+        </span>
+      </span>
+      <span class="${prefix}--popover-caret"></span>
+    `;
+  };
+
+  render() {
+    const { alignment, open } = this;
+    const classes = classMap({
+      [`${prefix}--popover-container`]: true,
+      [`${prefix}--popover--caret`]: true,
+      [`${prefix}--popover--high-contrast`]: true,
+      [`${prefix}--popover--open`]: open,
+      [`${prefix}--popover--${alignment}`]: alignment,
+      [`${prefix}--toggletip`]: true,
+      [`${prefix}--toggletip--open`]: open,
+    });
+    return html`
+      ${this._renderToggleTipLabel()}
+      <span class="${classes}">
+        ${this._renderTooltipButton()}
+        ${this._renderTooltipContent()}
+
+      </span>
+    </span>
+    `;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static styles = styles;
+}
+
+export default CDSToggletip;
diff --git a/packages/carbon-web-components/src/components/toggle/defs.ts b/packages/carbon-web-components/src/components/toggle/defs.ts
index baac9d5913a..debf14bae4b 100644
--- a/packages/carbon-web-components/src/components/toggle/defs.ts
+++ b/packages/carbon-web-components/src/components/toggle/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * 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.
@@ -19,5 +19,5 @@ export enum TOGGLE_SIZE {
   /**
    * Small size.
    */
-  SMALL = 'small',
+  SMALL = 'sm',
 }
diff --git a/packages/carbon-web-components/src/components/toggle/index.ts b/packages/carbon-web-components/src/components/toggle/index.ts
index 0cf00f17205..33d523b3445 100644
--- a/packages/carbon-web-components/src/components/toggle/index.ts
+++ b/packages/carbon-web-components/src/components/toggle/index.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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.
diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx b/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
index 9adc57a0623..30d45b6ed81 100644
--- a/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
+++ b/packages/carbon-web-components/src/components/toggle/toggle-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Toggle
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/toggle)
 
 Toggle is a control that is used to quickly switch between two possible states.
 Toggles are only used for these binary actions that occur immediately after the
@@ -32,19 +32,19 @@ import '@carbon/web-components/es/components/toggle/index.js';
 ### HTML
 
 ```html
-<bx-toggle
-  checked-text="On"
-  label-text="Toggle"
-  unchecked-text="Off"
-></bx-toggle>
+<cds-toggle label-a="On" label-text="Toggle" label-b="Off"></cds-toggle>
 ```
 
-## `<bx-toggle>` attributes, properties and events
+## Small toggle
 
-Note: `bx-checkbox-*` events are not fired from `<bx-toggle>`.
+```html
+<cds-toggle
+  size="sm"
+  label-a="On"
+  label-text="Toggle"
+  label-b="Off"></cds-toggle>
+```
 
-Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-toggle small>`) and `false` means not setting the attribute (e.g.
-`<bx-toggle>` without `small` attribute).
+## `<cds-toggle>` attributes, properties and events
 
-<Props of="bx-toggle" />
+<Props of="cds-toggle" />
diff --git a/packages/carbon-web-components/src/components/toggle/toggle-story.ts b/packages/carbon-web-components/src/components/toggle/toggle-story.ts
index 78a3a59d7ce..8c64efa6ccb 100644
--- a/packages/carbon-web-components/src/components/toggle/toggle-story.ts
+++ b/packages/carbon-web-components/src/components/toggle/toggle-story.ts
@@ -1,17 +1,18 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { prefix } from '../../globals/settings';
 import { TOGGLE_SIZE } from './toggle';
 import storyDocs from './toggle-story.mdx';
 
@@ -21,55 +22,86 @@ const sizes = {
 };
 
 export const Default = (args) => {
+  const { onChange } = args?.[`${prefix}-toggle`] ?? {};
+  return html`
+    <cds-toggle
+      ?checked="${true}"
+      label-text="Toggle element label"
+      label-a="On"
+      label-b="Off"
+      @cds-toggle-changed="${onChange}"></cds-toggle>
+  `;
+};
+
+Default.storyName = 'Default';
+
+export const SmallToggle = (args) => {
+  const { onChange } = args?.[`${prefix}-toggle`] ?? {};
+  return html`
+    <cds-toggle
+      ?checked="${true}"
+      label-text="Toggle element label"
+      label-a="On"
+      label-b="Off"
+      size="sm"
+      @cds-toggle-changed="${onChange}"></cds-toggle>
+  `;
+};
+
+SmallToggle.storyName = 'Small toggle';
+
+export const Playground = (args) => {
   const {
     checked,
-    checkedText,
+    labelA,
     disabled,
+    hideLabel,
     labelText,
+    readOnly,
     name,
     size,
-    uncheckedText,
+    labelB,
     value,
     onChange,
-  } = args?.['bx-toggle'] ?? {};
+  } = args?.[`${prefix}-toggle`] ?? {};
   return html`
-    <bx-toggle
+    <cds-toggle
       ?checked="${checked}"
-      checked-text="${ifNonNull(checkedText)}"
       ?disabled="${disabled}"
-      label-text="${ifNonNull(labelText)}"
-      name="${ifNonNull(name)}"
-      size="${ifNonNull(size)}"
-      unchecked-text="${ifNonNull(uncheckedText)}"
-      value="${ifNonNull(value)}"
-      @bx-toggle-changed="${onChange}"></bx-toggle>
+      ?hideLabel="${hideLabel}"
+      label-text="${ifDefined(labelText)}"
+      ?read-only=${readOnly}
+      name="${ifDefined(name)}"
+      size="${ifDefined(size)}"
+      label-a="${ifDefined(labelA)}"
+      label-b="${ifDefined(labelB)}"
+      value="${ifDefined(value)}"
+      @cds-toggle-changed="${onChange}"></cds-toggle>
   `;
 };
 
-Default.storyName = 'Default';
+Playground.storyName = 'Playground';
+Playground.parameters = {
+  knobs: {
+    [`${prefix}-toggle`]: () => ({
+      checked: boolean('Checked (checked)', true),
+      labelA: textNullable('Text for checked state (label-a)', 'On'),
+      disabled: boolean('Disabled (disabled)', false),
+      hideLabel: boolean('Hide label (hideLabel)', false),
+      labelText: textNullable('Label text (label-text)', ''),
+      readOnly: boolean('Read only (read-only)', false),
+      name: textNullable('Name (name)', ''),
+      size: select('Toggle size (size)', sizes, null),
+      labelB: textNullable('Text for unchecked state (label-b)', 'Off'),
+      value: textNullable('Value (value)', ''),
+      onChange: action(`${prefix}-toggle-changed`),
+    }),
+  },
+};
 
 export default {
   title: 'Components/Toggle',
   parameters: {
     ...storyDocs.parameters,
-    knobs: {
-      'bx-toggle': () => ({
-        checked: boolean('Checked (checked)', false),
-        checkedText: textNullable(
-          'Text for checked state (checked-text)',
-          'On'
-        ),
-        disabled: boolean('Disabled (disabled)', false),
-        labelText: textNullable('Label text (label-text)', 'Toggle'),
-        name: textNullable('Name (name)', ''),
-        size: select('Toggle size (size)', sizes, null),
-        uncheckedText: textNullable(
-          'Text for unchecked state (unchecked-text)',
-          'Off'
-        ),
-        value: textNullable('Value (value)', ''),
-        onChange: action('bx-toggle-changed'),
-      }),
-    },
   },
 };
diff --git a/packages/carbon-web-components/src/components/toggle/toggle.scss b/packages/carbon-web-components/src/components/toggle/toggle.scss
index 539ed1c8965..8c62eb8fd5c 100644
--- a/packages/carbon-web-components/src/components/toggle/toggle.scss
+++ b/packages/carbon-web-components/src/components/toggle/toggle.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,13 +7,21 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/toggle/toggle';
+@use '@carbon/styles/scss/components/toggle/index' as *;
+@use '@carbon/styles/scss/config' as *;
 
 :host(#{$prefix}-toggle) {
   outline: none;
+}
+
+:host(#{$prefix}-toggle[disabled]) {
+  @extend .#{$prefix}--toggle--disabled !optional;
 
-  .#{$prefix}-toggle--check {
-    width: 6px;
-    height: 5px;
+  .#{$prefix}--toggle__appearance {
+    cursor: not-allowed;
   }
 }
+
+:host(#{$prefix}-toggle[read-only]) {
+  @extend .#{$prefix}--toggle--readonly;
+}
diff --git a/packages/carbon-web-components/src/components/toggle/toggle.ts b/packages/carbon-web-components/src/components/toggle/toggle.ts
index 946bd0b9621..0680e79b4c4 100644
--- a/packages/carbon-web-components/src/components/toggle/toggle.ts
+++ b/packages/carbon-web-components/src/components/toggle/toggle.ts
@@ -7,30 +7,67 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import ifNonNull from '../../globals/directives/if-non-null';
-import BXCheckbox from '../checkbox/checkbox';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
+import CDSCheckbox from '../checkbox/checkbox';
 import { TOGGLE_SIZE } from './defs';
 import styles from './toggle.scss';
+import HostListener from '../../globals/decorators/host-listener';
+import HostListenerMixin from '../../globals/mixins/host-listener';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { TOGGLE_SIZE };
 
-const { prefix } = settings;
-
 /**
  * Basic toggle.
  *
- * @element bx-toggle
+ * @element cds-toggle
  * @slot label-text - The label text.
  * @slot checked-text - The text for the checked state.
  * @slot unchecked-text - The text for the unchecked state.
- * @fires bx-toggle-changed - The custom event fired after this changebox changes its checked state.
+ * @fires cds-toggle-changed - The custom event fired after this changebox changes its checked state.
  */
 @customElement(`${prefix}-toggle`)
-class BXToggle extends BXCheckbox {
+class CDSToggle extends HostListenerMixin(CDSCheckbox) {
+  @query('button')
+  protected _checkboxNode!: HTMLInputElement;
+
+  /**
+   * Handles `click` event on the `<button>` in the shadow DOM.
+   */
+  protected _handleChange() {
+    const { checked, indeterminate } = this._checkboxNode;
+    if (this.disabled || this.readOnly) return;
+    this.checked = !checked;
+    this.indeterminate = indeterminate;
+    const { eventChange } = this.constructor as typeof CDSCheckbox;
+    this.dispatchEvent(
+      new CustomEvent(eventChange, {
+        bubbles: true,
+        composed: true,
+        detail: {
+          indeterminate,
+        },
+      })
+    );
+  }
+
+  /**
+   * Handles `keydown` event on the toggle button.
+   */
+  @HostListener('keydown')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  protected _handleKeydown = async (event: KeyboardEvent) => {
+    const { key } = event;
+
+    if (key === ' ') {
+      this._handleChange();
+    }
+  };
+
   protected _renderCheckmark() {
     if (this.size !== TOGGLE_SIZE.SMALL) {
       return undefined;
@@ -49,8 +86,20 @@ class BXToggle extends BXCheckbox {
   /**
    * The text for the checked state.
    */
-  @property({ attribute: 'checked-text' })
-  checkedText = '';
+  @property({ attribute: 'label-a' })
+  labelA = '';
+
+  /**
+   * Hide label text.
+   */
+  @property({ reflect: true, type: Boolean })
+  hideLabel = false;
+
+  /**
+   * Read only boolean.
+   */
+  @property({ reflect: true, attribute: 'read-only', type: Boolean })
+  readOnly = false;
 
   /**
    * Toggle size.
@@ -61,47 +110,57 @@ class BXToggle extends BXCheckbox {
   /**
    * The text for the unchecked state.
    */
-  @property({ attribute: 'unchecked-text' })
-  uncheckedText = '';
+  @property({ attribute: 'label-b' })
+  labelB = '';
 
   render() {
     const {
       checked,
-      checkedText,
       disabled,
       labelText,
+      hideLabel,
+      id,
       name,
       size,
-      uncheckedText,
+      labelA,
+      labelB,
       value,
       _handleChange: handleChange,
     } = this;
     const inputClasses = classMap({
-      [`${prefix}--toggle-input`]: true,
-      [`${prefix}--toggle-input--${size}`]: size,
+      [`${prefix}--toggle__appearance`]: true,
+      [`${prefix}--toggle__appearance--${size}`]: size,
+    });
+    const toggleClasses = classMap({
+      [`${prefix}--toggle__switch`]: true,
+      [`${prefix}--toggle__switch--checked`]: checked,
     });
+    const stateText = checked ? labelA : labelB;
     return html`
-      <input
-        id="checkbox"
-        type="checkbox"
-        class="${inputClasses}"
-        aria-checked="${String(Boolean(checked))}"
+      <button
+        class="${prefix}--toggle__button"
+        role="switch"
+        type="button"
+        aria-checked=${checked}
+        aria-lable=${labelText}
         .checked="${checked}"
-        ?disabled="${disabled}"
-        name="${ifNonNull(name)}"
-        value="${ifNonNull(value)}"
-        @change="${handleChange}" />
-      <label for="checkbox" class="${prefix}--toggle-input__label">
-        <slot name="label-text">${labelText}</slot>
-        <span class="${prefix}--toggle__switch">
-          ${this._renderCheckmark()}
-          <span class="${prefix}--toggle__text--off" aria-hidden="true">
-            <slot name="unchecked-text">${uncheckedText}</slot>
-          </span>
-          <span class="${prefix}--toggle__text--on" aria-hidden="true">
-            <slot name="checked-text">${checkedText}</slot>
-          </span>
-        </span>
+        name="${ifDefined(name)}"
+        value="${ifDefined(value)}"
+        ?disabled=${disabled}
+        id="${id}"></button>
+      <label for="${id}" class="${prefix}--toggle__label">
+        <span class="${prefix}--toggle__label-text">${labelText}</span>
+        <div class="${inputClasses}">
+          <div class="${toggleClasses}" @click=${handleChange}>
+            ${this._renderCheckmark()}
+          </div>
+          <span
+            ?hidden="${hideLabel}"
+            class="${prefix}--toggle__text"
+            aria-hidden="true"
+            >${stateText}</span
+          >
+        </div>
       </label>
     `;
   }
@@ -116,4 +175,4 @@ class BXToggle extends BXCheckbox {
   static styles = styles;
 }
 
-export default BXToggle;
+export default CDSToggle;
diff --git a/packages/carbon-web-components/src/components/tooltip/defs.ts b/packages/carbon-web-components/src/components/tooltip/defs.ts
deleted file mode 100644
index 21799443764..00000000000
--- a/packages/carbon-web-components/src/components/tooltip/defs.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * The alignment choices of tooltip.
- */
-export enum TOOLTIP_ALIGNMENT {
-  /**
-   * Align the top/left position tooltip body to the one of its trigger button.
-   */
-  START = 'start',
-
-  /**
-   * Align the center position tooltip body to the one of its trigger button.
-   */
-  CENTER = 'center',
-
-  /**
-   * Align the bottom/right position tooltip body to the one of its trigger button.
-   */
-  END = 'end',
-}
-
-/**
- * The direction/positioning/orientation choices of tooltip.
- */
-export enum TOOLTIP_DIRECTION {
-  /**
-   * Put tooltip body at the left of its trigger button.
-   */
-  LEFT = 'left',
-
-  /**
-   * Put tooltip body at the top of its trigger button.
-   */
-  TOP = 'top',
-
-  /**
-   * Put tooltip body at the right of its trigger button.
-   */
-  RIGHT = 'right',
-
-  /**
-   * Put tooltip body at the bottom of its trigger button.
-   */
-  BOTTOM = 'bottom',
-}
diff --git a/packages/carbon-web-components/src/components/tooltip/index.ts b/packages/carbon-web-components/src/components/tooltip/index.ts
index f552ea7f2ef..074fbabb12a 100644
--- a/packages/carbon-web-components/src/components/tooltip/index.ts
+++ b/packages/carbon-web-components/src/components/tooltip/index.ts
@@ -1,14 +1,11 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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 './tooltip';
-import './tooltip-body';
-import './tooltip-definition';
-import './tooltip-footer';
-import './tooltip-icon';
+import './tooltip-content';
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts
deleted file mode 100644
index 92ca19f1974..00000000000
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-body.ts
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import HostListener from '../../globals/decorators/host-listener';
-import BXFloatingMenu, {
-  FLOATING_MENU_ALIGNMENT,
-  FLOATING_MENU_DIRECTION,
-  FLOATING_MENU_POSITION_DIRECTION,
-} from '../floating-menu/floating-menu';
-import styles from './tooltip.scss';
-
-const { prefix } = settings;
-
-/**
- * Tooltip body.
- */
-@customElement(`${prefix}-tooltip-body`)
-class BXTooltipBody extends BXFloatingMenu {
-  /**
-   * How the menu is aligned to the trigger button.
-   */
-  @property()
-  alignment = FLOATING_MENU_ALIGNMENT.CENTER;
-
-  /**
-   * The menu direction.
-   */
-  @property()
-  direction = FLOATING_MENU_DIRECTION.BOTTOM;
-
-  /**
-   * `true` if the dropdown should be open.
-   */
-  @property({ type: Boolean, reflect: true })
-  open = false;
-
-  /**
-   * Handles `keydown` event on this element.
-   */
-  @HostListener('keydown')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleKeydown = async (event) => {
-    if (event.key === 'Escape') {
-      this.open = false;
-    }
-  };
-
-  /**
-   * The position of this tooltip body.
-   */
-  get position() {
-    const { alignment, direction } = this;
-    const position = super.position;
-    const { direction: positionDirection, start, top } = position;
-
-    if (
-      direction === FLOATING_MENU_DIRECTION.TOP ||
-      direction === FLOATING_MENU_DIRECTION.BOTTOM
-    ) {
-      if (alignment === FLOATING_MENU_ALIGNMENT.START) {
-        position.start -= 16;
-      }
-
-      if (alignment === FLOATING_MENU_ALIGNMENT.END) {
-        position.start += 16;
-      }
-    }
-
-    if (
-      direction === FLOATING_MENU_DIRECTION.RIGHT ||
-      direction === FLOATING_MENU_DIRECTION.LEFT
-    ) {
-      if (alignment === FLOATING_MENU_ALIGNMENT.START) {
-        position.top -= 16;
-      }
-
-      if (alignment === FLOATING_MENU_ALIGNMENT.END) {
-        position.top += 16;
-      }
-    }
-
-    if (direction === FLOATING_MENU_DIRECTION.LEFT) {
-      const style = this.ownerDocument!.defaultView!.getComputedStyle(this);
-      const margin = Number(
-        (/^([\d-.]+)px$/.exec(
-          style.getPropertyValue(
-            positionDirection !== FLOATING_MENU_POSITION_DIRECTION.RTL
-              ? 'margin-right'
-              : 'margin-left'
-          )
-        ) || [])[1]
-      );
-      if (!isNaN(margin)) {
-        // For direction === DIRECTION_RIGHT, the left/top margin the caret size effectively adjusts the position,
-        // but for direction === DIRECTION_LEFT such thing won't happen
-        return {
-          ...position,
-          start: start - margin,
-        };
-      }
-    }
-
-    if (direction === FLOATING_MENU_DIRECTION.TOP) {
-      const style = this.ownerDocument!.defaultView!.getComputedStyle(this);
-      const margin = Number(
-        (/^([\d-.]+)px$/.exec(style.getPropertyValue('margin-bottom')) || [])[1]
-      );
-      if (!isNaN(margin)) {
-        // For direction === DIRECTION_BOTTOM, the left/top margin the caret size effectively adjusts the position,
-        // but for direction === DIRECTION_TOP such thing won't happen
-        return {
-          ...position,
-          top: top - margin,
-        };
-      }
-    }
-
-    return position;
-  }
-
-  connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'menu');
-    }
-    super.connectedCallback();
-  }
-
-  render() {
-    return html`
-      <span class="${prefix}--tooltip__caret"></span>
-      <div tabindex="0" class="${prefix}--tooltip__content"><slot></slot></div>
-    `;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXTooltipBody;
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts
new file mode 100644
index 00000000000..67445854678
--- /dev/null
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip-content.ts
@@ -0,0 +1,39 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import CDSPopoverContent from '../popover/popover-content';
+import styles from './tooltip.scss';
+
+/**
+ * Tooltip content.
+ */
+@customElement(`${prefix}-tooltip-content`)
+class CDSTooltipContent extends CDSPopoverContent {
+  connectedCallback() {
+    if (!this.hasAttribute('aria-hidden')) {
+      this.setAttribute('aria-hidden', 'true');
+    }
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'tooltip');
+    }
+    super.connectedCallback();
+  }
+
+  updated() {
+    this.shadowRoot
+      ?.querySelector(`.${prefix}--popover-content`)
+      ?.classList.add(`${prefix}--tooltip-content`);
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSTooltipContent;
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-definition.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-definition.ts
deleted file mode 100644
index e6f5c5d390d..00000000000
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-definition.ts
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import FocusMixin from '../../globals/mixins/focus';
-import { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION } from './defs';
-import styles from './tooltip.scss';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-export { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION };
-
-const { prefix } = settings;
-
-/**
- * Definition tooltip.
- *
- * @element bx-tooltip-definition
- * @slot body - The tooltip body content.
- */
-@customElement(`${prefix}-tooltip-definition`)
-class BXTooltipDefinition extends FocusMixin(LitElement) {
-  /**
-   * How the tooltip is aligned to the trigger button.
-   */
-  @property()
-  alignment = TOOLTIP_ALIGNMENT.CENTER;
-
-  /**
-   * The text for the tooltip body.
-   */
-  @property({ attribute: 'body-text' })
-  bodyText = '';
-
-  /**
-   * The tooltip direction.
-   */
-  @property()
-  direction = TOOLTIP_DIRECTION.BOTTOM;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
-  render() {
-    const { alignment, bodyText, direction } = this;
-    const classes = classMap({
-      [`${prefix}--tooltip__trigger`]: true,
-      [`${prefix}--tooltip--a11y`]: true,
-      [`${prefix}--tooltip__trigger--definition`]: true,
-      [`${prefix}--tooltip--${direction}`]: direction,
-      [`${prefix}--tooltip--align-${alignment}`]: alignment,
-    });
-    return html`
-      <button class="${classes}" aria-describedby="tooltip-body">
-        <slot></slot>
-      </button>
-      <div class="${prefix}--assistive-text" id="tooltip-body" role="tooltip">
-        <slot name="body">${bodyText}</slot>
-      </div>
-    `;
-  }
-
-  static styles = styles;
-}
-
-export default BXTooltipDefinition;
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts
deleted file mode 100644
index 16bec30208a..00000000000
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-footer.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import styles from './tooltip.scss';
-
-const { prefix } = settings;
-
-/**
- * Tooltip footer.
- */
-@customElement(`${prefix}-tooltip-footer`)
-class BXTooltipFooter extends LitElement {
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default BXTooltipFooter;
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-icon.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-icon.ts
deleted file mode 100644
index 293431d8b93..00000000000
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-icon.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { classMap } from 'lit-html/directives/class-map';
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import BXTooltipDefintion from './tooltip-definition';
-import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-
-const { prefix } = settings;
-
-/**
- * Icon tooltip.
- *
- * @element bx-tooltip-icon
- * @slot body - The tooltip body content.
- */
-@customElement(`${prefix}-tooltip-icon`)
-class BXTooltipIcon extends BXTooltipDefintion {
-  render() {
-    const { alignment, bodyText, direction } = this;
-    const classes = classMap({
-      [`${prefix}--tooltip__trigger`]: true,
-      [`${prefix}--tooltip--a11y`]: true,
-      [`${prefix}--tooltip--${direction}`]: direction,
-      [`${prefix}--tooltip--align-${alignment}`]: alignment,
-    });
-    return html`
-      <button class="${classes}" aria-describedby="tooltip-body">
-        <span
-          class="${prefix}--assistive-text"
-          id="tooltip-body"
-          role="tooltip">
-          <slot name="body">${bodyText}</slot>
-        </span>
-        <slot></slot>
-      </button>
-    `;
-  }
-}
-
-export default BXTooltipIcon;
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx b/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
index 356fd3814e3..6803d261f39 100644
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip-story.mdx
@@ -4,13 +4,17 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # Tooltip
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/tooltip)
 
-Tooltips provide additional information upon hover or focus. The information
-should be contextual, useful, and nonessential information. Keep tooltips short.
+You can use the Tooltip component as a wrapper to display a popup for an
+interactive element that you provide. If you are trying to place interactive
+content inside of the Tooltip itself, consider using Toggletip instead. You can
+provide the interactive element as a child to Tooltip. Tooltips provide
+additional information upon hover or focus. The information should be
+contextual, useful, and nonessential information. Keep tooltips short.
 
 ## Getting started
 
@@ -20,6 +24,7 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/web-components/es/components/tooltip/index.js';
+import Information16 from '@carbon/icons/lib/information/16';
 ```
 
 <Description markdown={`${cdnJs({ components: ['tooltip'] })}`} />
@@ -28,80 +33,31 @@ import '@carbon/web-components/es/components/tooltip/index.js';
 ### HTML
 
 ```html
-<bx-tooltip>
-  <bx-tooltip-body>
-    <p>
-      This is some tooltip text. This box shows the maximum amount of text that
-      should appear inside. If more room is needed please use a modal instead.
-    </p>
-    <bx-tooltip-footer>
-      <a href="#" class="bx--link">Learn More</a
-      ><bx-btn kind="primary">Create</bx-btn>
-    </bx-tooltip-footer>
-  </bx-tooltip-body>
-</bx-tooltip>
+<cds-tooltip align="bottom">
+  <div class="sb-tooltip-trigger" aria-labelledby="content">
+    ${Information16()}
+  </div>
+  <cds-tooltip-content id="content">
+    Occassionally, services are updated in a specified time window to ensure no
+    down time for customers.
+  </cds-tooltip-content>
+</cds-tooltip>
 ```
 
-## Interactive tooltip (default)
+## Toggletips vs Tooltips
 
-Interactive tooltips may contain rich text and other interactive elements like
-buttons or links. In general, hiding interactive content in a tooltip is
-discouraged. Interactive tooltips are best used for onboarding experiences and
-product tours.
+Toggletips and tooltips are similar visually and both contain a popover and
+interactive trigger element. The two components differ in the way they are
+invoked and dismissed and if the user must interact with the contents. A tooltip
+is exposed on hover or focus when you need to expose brief, supplemental
+information that is not interactive. A toggletip is used on click or enter when
+you need to expose interactive elements, such as button, that a user needs to
+interact with.
 
-- If a user may need to visit an external resource, like while using a form,
-  include a link in your interactive tooltip
-- Don’t use without a label. Consider the context a user needs before clicking a
-  link
-
-### `<bx-tooltip>` attributes and properties
+### `<cds-tooltip>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-tooltip open>`) and `false` means not setting the attribute (e.g.
-`<bx-tooltip>` without `open` attribute).
-
-<Props of="bx-tooltip" />
-
-## Definition tooltip
-
-The definition tooltip provides additional help or defines an item or term. It
-may be used on the label of a UI element, or on a word embedded in a paragraph.
-
-- Should contain brief, read-only text
-- Use on proper nouns, technical terms, or acronyms with two letters or more
-- Do not use a definition tooltip on words with fewer than two letters
-
-```html
-<bx-tooltip-definition
-  alignment="center"
-  body-text="Brief description of the dotted, underlined word above."
-  direction="bottom"
->
-  Definition Tooltip
-</bx-tooltip-definition>
-```
-
-### `<bx-tooltip-definition>` attributes and properties
-
-<Props of="bx-tooltip-definition" />
-
-## Icon tooltip
-
-An icon tooltip is used to clarify the action or name of an interactive icon
-button.
-
-- The tooltip content should only contain one or two words.
-
-```html
-<bx-tooltip-icon
-  alignment="center"
-  body-text="Brief description of the dotted, underlined word above."
-  direction="bottom"
->
-  ${Filter16()}
-</bx-tooltip-icon>
-```
-
-### `<bx-tooltip-icon>` attributes and properties
+`<cds-tooltip open>`) and `false` means not setting the attribute (e.g.
+`<cds-tooltip>` without `open` attribute).
 
-<Props of="bx-tooltip-icon" />
+<Props of="cds-tooltip" />
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss b/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss
index 46551e235e9..ff8ddb944fe 100644
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip-story.scss
@@ -1,27 +1,37 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/link/link';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/utilities/button-reset';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme';
+@use '@carbon/styles/scss/type';
 
-/* stylelint-disable selector-type-no-unknown */
-bx-tooltip-body {
-  p {
-    @include type-style('body-short-01');
-  }
+// This is a utility class to make sure that tooltip stories have a minimum
+// height when used in MDX docs
+.sb-tooltip-story {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 250px;
+  margin: auto;
+}
 
-  .bx--link {
-    color: $inverse-link;
+.sb-tooltip-trigger {
+  @include button-reset.reset();
 
-    &:focus {
-      outline-color: $inverse-focus-ui;
-    }
-  }
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: $spacing-07;
+  height: $spacing-07;
+  border: 1px solid theme.$border-subtle;
 }
 
-.bx-ce-demo-devenv--container {
-  justify-content: center;
+.sb-tooltip-trigger svg {
+  fill: theme.$background-inverse;
 }
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts b/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts
index 90173311e52..50a20fa6163 100644
--- a/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip-story.ts
@@ -7,147 +7,146 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { boolean, select } from '@storybook/addon-knobs';
+import { html } from 'lit';
+import { boolean, number, select, text } from '@storybook/addon-knobs';
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Filter16 from '@carbon/web-components/es/icons/filter/16';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
-import '../button/button';
 import './tooltip';
-import { FLOATING_MENU_DIRECTION } from '../floating-menu/floating-menu';
-import './tooltip-body';
-import './tooltip-footer';
-import { TOOLTIP_ALIGNMENT, TOOLTIP_DIRECTION } from './tooltip-definition';
-import './tooltip-icon';
+import './tooltip-content';
+import { POPOVER_ALIGNMENT } from '../popover/defs';
+import { prefix } from '../../globals/settings';
 import styles from './tooltip-story.scss';
 import storyDocs from './tooltip-story.mdx';
-
-const tooltipBodyDirections = {
-  [`Top (${FLOATING_MENU_DIRECTION.TOP})`]: FLOATING_MENU_DIRECTION.TOP,
-  [`Right (${FLOATING_MENU_DIRECTION.RIGHT})`]: FLOATING_MENU_DIRECTION.RIGHT,
-  [`Bottom (${FLOATING_MENU_DIRECTION.BOTTOM})`]:
-    FLOATING_MENU_DIRECTION.BOTTOM,
-  [`Left (${FLOATING_MENU_DIRECTION.LEFT})`]: FLOATING_MENU_DIRECTION.LEFT,
-};
+import Information16 from '@carbon/icons/lib/information/16';
 
 const tooltipAlignments = {
-  [`Start (${TOOLTIP_ALIGNMENT.START})`]: TOOLTIP_ALIGNMENT.START,
-  [`Center (${TOOLTIP_ALIGNMENT.CENTER})`]: TOOLTIP_ALIGNMENT.CENTER,
-  [`End (${TOOLTIP_ALIGNMENT.END})`]: TOOLTIP_ALIGNMENT.END,
+  [`top`]: POPOVER_ALIGNMENT.TOP,
+  [`top-left`]: POPOVER_ALIGNMENT.TOP_LEFT,
+  [`top-right`]: POPOVER_ALIGNMENT.TOP_RIGHT,
+  [`bottom`]: POPOVER_ALIGNMENT.BOTTOM,
+  [`bottom-left`]: POPOVER_ALIGNMENT.BOTTOM_LEFT,
+  [`bottom-right`]: POPOVER_ALIGNMENT.BOTTOM_RIGHT,
+  [`left`]: POPOVER_ALIGNMENT.LEFT,
+  [`left-bottom`]: POPOVER_ALIGNMENT.LEFT_BOTTOM,
+  [`left-top`]: POPOVER_ALIGNMENT.LEFT_TOP,
+  [`right`]: POPOVER_ALIGNMENT.RIGHT,
+  [`right-bottom`]: POPOVER_ALIGNMENT.RIGHT_BOTTOM,
+  [`right-top`]: POPOVER_ALIGNMENT.RIGHT_TOP,
 };
 
-const tooltipDefinitionDirections = {
-  [`Top (${TOOLTIP_DIRECTION.TOP})`]: TOOLTIP_DIRECTION.TOP,
-  [`Right (${TOOLTIP_DIRECTION.RIGHT})`]: TOOLTIP_DIRECTION.RIGHT,
-  [`Bottom (${TOOLTIP_DIRECTION.BOTTOM})`]: TOOLTIP_DIRECTION.BOTTOM,
-  [`Left (${TOOLTIP_DIRECTION.LEFT})`]: TOOLTIP_DIRECTION.LEFT,
+export const Default = () => {
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <cds-tooltip align="bottom">
+      <button
+        class="sb-tooltip-trigger"
+        role="button"
+        aria-labelledby="content">
+        ${Information16()}
+      </button>
+      <cds-tooltip-content id="content">
+        Occassionally, services are updated in a specified time window to ensure
+        no down time for customers.
+      </cds-tooltip-content>
+    </cds-tooltip>
+  `;
 };
 
-export const Default = (args) => {
-  const { open } = args?.['bx-tooltip'] ?? {};
-  const { alignment, direction } = args?.['bx-tooltip-body'] ?? {};
+export const Alignment = () => {
   return html`
     <style>
       ${styles}
     </style>
-    <bx-tooltip ?open="${open}">
-      <bx-tooltip-body
-        direction="${ifNonNull(direction)}"
-        alignment="${ifNonNull(alignment)}">
-        <p>
-          This is some tooltip text. This box shows the maximum amount of text
-          that should appear inside. If more room is needed please use a modal
-          instead.
-        </p>
-      </bx-tooltip-body>
-    </bx-tooltip>
+    <cds-tooltip align="bottom-left">
+      <button
+        class="sb-tooltip-trigger"
+        role="button"
+        aria-labelledby="content">
+        ${Information16()}
+      </button>
+      <cds-tooltip-content id="content">
+        Tooltip alignment
+      </cds-tooltip-content>
+    </cds-tooltip>
   `;
 };
 
-Default.storyName = 'Default';
-
-Default.parameters = {
-  knobs: {
-    'bx-tooltip': () => ({
-      open: boolean('Open (open)', false),
-    }),
-    'bx-tooltip-body': () => ({
-      alignment: select(
-        'Tooltip alignment to trigger button (alignment)',
-        tooltipAlignments,
-        TOOLTIP_ALIGNMENT.CENTER
-      ),
-      direction: select(
-        'Direction (direction in <bx-tooltip-body>)',
-        tooltipBodyDirections,
-        FLOATING_MENU_DIRECTION.BOTTOM
-      ),
-    }),
-  },
+export const Duration = () => {
+  return html`
+    <style>
+      ${styles}
+    </style>
+    <cds-tooltip enter-delay-ms=${0} leave-delay-ms=${300}>
+      <button
+        class="sb-tooltip-trigger"
+        role="button"
+        aria-labelledby="content">
+        ${Information16()}
+      </button>
+      <cds-tooltip-content id="content"> Label one </cds-tooltip-content>
+    </cds-tooltip>
+  `;
 };
 
-export const definition = (args) => {
-  const { alignment, bodyText, direction } =
-    args?.['bx-tooltip-definition'] ?? {};
+export const Playground = (args) => {
+  const {
+    alignment,
+    defaultOpen,
+    label,
+    enterDelay,
+    leaveDelay,
+    closeOnActivation,
+  } = args?.['cds-tooltip'] ?? {};
   return html`
-    <bx-tooltip-definition
-      alignment="${ifNonNull(alignment)}"
-      body-text="${ifNonNull(bodyText)}"
-      direction="${ifNonNull(direction)}">
-      Definition Tooltip
-    </bx-tooltip-definition>
+    <style>
+      ${styles}
+    </style>
+    <cds-tooltip
+      ?defaultOpen=${defaultOpen}
+      align=${alignment}
+      enter-delay-ms=${enterDelay}
+      leave-delay-ms=${leaveDelay}
+      ?closeOnActivation=${closeOnActivation}>
+      <button
+        class="sb-tooltip-trigger"
+        role="button"
+        aria-labelledby="content">
+        ${Information16()}
+      </button>
+      <cds-tooltip-content id="content"> ${label} </cds-tooltip-content>
+    </cds-tooltip>
   `;
 };
 
-definition.storyName = 'Definition tooltip';
-
-definition.parameters = {
+Playground.parameters = {
   knobs: {
-    'bx-tooltip-definition': () => ({
+    [`${prefix}-tooltip`]: () => ({
+      defaultOpen: boolean('Default open (defaultOpen)', false),
       alignment: select(
         'Tooltip alignment to trigger button (alignment)',
         tooltipAlignments,
-        TOOLTIP_ALIGNMENT.CENTER
-      ),
-      bodyText: textNullable(
-        'Tooltip content (bodyText)',
-        'Brief description of the dotted, underlined word above.'
+        POPOVER_ALIGNMENT.TOP
       ),
-      direction: select(
-        'Tooltip direction (direction)',
-        tooltipDefinitionDirections,
-        TOOLTIP_DIRECTION.BOTTOM
+      label: text('Label (label)', 'Custom label'),
+      enterDelay: number('Enter delay (in ms)', 100),
+      leaveDelay: number('Leave delay (in ms)', 300),
+      closeOnActivation: boolean(
+        'Close on activation (closeOnActivation)',
+        false
       ),
     }),
   },
 };
 
-export const icon = (args) => {
-  const { alignment, bodyText, direction } = args?.['bx-tooltip-icon'] ?? {};
-  return html`
-    <bx-tooltip-icon
-      alignment="${ifNonNull(alignment)}"
-      body-text="${ifNonNull(bodyText)}"
-      direction="${ifNonNull(direction)}">
-      ${Filter16()}
-    </bx-tooltip-icon>
-  `;
-};
-
-icon.storyName = 'Icon tooltip';
-
-icon.parameters = {
-  knobs: {
-    'bx-tooltip-icon': definition.parameters.knobs['bx-tooltip-definition'],
-  },
-};
+Default.storyName = 'Default';
 
 export default {
   title: 'Components/Tooltip',
   parameters: {
     ...storyDocs.parameters,
   },
+  decorators: [(story) => html`<div class="sb-tooltip-story">${story()}</div>`],
 };
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.scss b/packages/carbon-web-components/src/components/tooltip/tooltip.scss
index b1f787ebff8..26a3a983cbc 100644
--- a/packages/carbon-web-components/src/components/tooltip/tooltip.scss
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip.scss
@@ -1,129 +1,43 @@
-//
-// Copyright IBM Corp. 2019, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-$css--plex: true !default;
-// `@include reset` with `variable-exists(css--reset) == false or $css--reset == false` breaks the dotted underline
-// TODO: Determine how to deal with `$css--reset` across components
-$css--reset: true !default;
-// Caret's original size was 13.75px square
-$caret-size: 6.875px;
-$caret-horizontal-position: calc(#{$caret-size * (-1)} + 1px);
-
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/layout';
-@import 'carbon-components/scss/components/tooltip/tooltip';
-
-:host(#{$prefix}-tooltip) {
-  @extend .#{$prefix}--tooltip__trigger;
-}
-
-:host(#{$prefix}-tooltip-body) {
-  @extend .#{$prefix}--tooltip;
-
-  ::slotted(#{$prefix}-tooltip-footer) {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    margin-top: 1rem;
-  }
-
-  ::slotted(p) {
-    @include type-style('body-short-01');
-
-    text-align: left;
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='top']) {
-  margin-bottom: $spacing-03;
-
-  .#{$prefix}--tooltip__caret {
-    top: auto;
-    bottom: rem(-6px);
-    transform: rotate(180deg);
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='right']) {
-  margin-left: $spacing-03;
-
-  .#{$prefix}--tooltip__caret {
-    right: auto;
-    left: $caret-horizontal-position;
-    // Adjust for change in Y position as caret rotates
-    transform: rotate(270deg) translate(25%, -50%);
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='bottom']) {
-  margin-top: $spacing-03;
-}
-
-:host(#{$prefix}-tooltip-body[direction='left']) {
-  margin-right: $spacing-03;
-
-  .#{$prefix}--tooltip__caret {
-    right: $caret-horizontal-position;
-    left: auto;
-    // Adjust for change in Y position as caret rotates
-    transform: rotate(90deg) translate(-25%, -50%);
-  }
-}
-
-:host(#{$prefix}-tooltip-body[direction='top']),
-:host(#{$prefix}-tooltip-body[direction='bottom']) {
-  &[alignment='start'] {
-    .#{$prefix}--tooltip__caret {
-      margin-left: rem(17px);
-    }
-  }
-
-  &[alignment='end'] {
-    .#{$prefix}--tooltip__caret {
-      margin-right: rem(17px);
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '../popover/popover' as *;
+@use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/theme' as *;
+
+// For some reason `#{prefix}-tooltip` doesn't work here, will need to investigate
+:host(#{$prefix}-tooltip[data-table]) {
+  display: contents;
+
+  &:hover {
+    ::slotted(button) {
+      background-color: $layer-selected-hover !important;
     }
   }
 }
 
-:host(#{$prefix}-tooltip-body[direction='left']),
-:host(#{$prefix}-tooltip-body[direction='right']) {
-  .#{$prefix}--tooltip__caret {
-    top: 50%;
-  }
-
-  &[alignment='start'] {
-    .#{$prefix}--tooltip__caret {
-      top: calc(#{$caret-size} + rem(17px));
-    }
-  }
-
-  &[alignment='end'] {
-    .#{$prefix}--tooltip__caret {
-      top: auto;
-      bottom: rem(17px);
-    }
+:host(#{$prefix}-tooltip[data-table][size='xs']),
+:host(#{$prefix}-tooltip[data-table][size='sm']) {
+  ::slotted(button) {
+    height: calc(100% + 1px) !important;
   }
 }
 
-:host(#{$prefix}-tooltip-body[open]) {
-  @extend .#{$prefix}--tooltip--shown;
-}
-
-:host(#{$prefix}-tooltip-definition) {
-  @extend .#{$prefix}--tooltip--definition;
-  @extend .#{$prefix}--tooltip--a11y;
-
-  outline: none;
+:host(#{$prefix}-tooltip[toolbar-action]) {
+  ::slotted(button) {
+    outline: none !important;
+  }
 }
 
-:host(#{$prefix}-tooltip-icon) {
-  outline: none;
-
-  .#{$prefix}--tooltip__trigger:focus ::slotted(svg) {
-    outline: 1px solid $focus;
+:host(#{prefix}-tooltip-content) {
+  ::slotted(.#{$prefix}-tooltip-content) {
+    @extend .#{$prefix}--tooltip-content;
   }
 }
diff --git a/packages/carbon-web-components/src/components/tooltip/tooltip.ts b/packages/carbon-web-components/src/components/tooltip/tooltip.ts
index 9cdf276ad8a..209aed62203 100644
--- a/packages/carbon-web-components/src/components/tooltip/tooltip.ts
+++ b/packages/carbon-web-components/src/components/tooltip/tooltip.ts
@@ -7,39 +7,99 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, query, LitElement } from 'lit-element';
-import Information16 from '@carbon/icons/lib/information/16';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import HostListener from '../../globals/decorators/host-listener';
 import HostListenerMixin from '../../globals/mixins/host-listener';
-import { find } from '../../globals/internal/collection-helpers';
-import BXFloatingMenu from '../floating-menu/floating-menu';
-import BXFloatingMenuTrigger from '../floating-menu/floating-menu-trigger';
+import CDSPopover from '../popover/popover';
+import '../popover/popover-content';
 import styles from './tooltip.scss';
+import CDSTooltipContent from './tooltip-content';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Trigger button of tooltip.
  *
- * @element bx-tooltip
+ * @element cds-tooltip
  */
 @customElement(`${prefix}-tooltip`)
-class BXTooltip
-  extends HostListenerMixin(LitElement)
-  implements BXFloatingMenuTrigger
-{
+class CDSTooltip extends HostListenerMixin(CDSPopover) {
+  /**
+   * Specify how the trigger should align with the tooltip
+   */
+  @property({ reflect: true, type: String })
+  align = 'top';
+
+  /**
+   * `true` if this tooltip is in a data table row
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'data-table' })
+  dataTable = false;
+
+  /**
+   * Specify whether the tooltip should be closed when clicked
+   */
+  @property({ reflect: true, type: Boolean })
+  closeOnActivation = false;
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  @property({ reflect: true, type: Boolean })
+  defaultOpen = false;
+
+  /**
+   * Specify the duration in milliseconds to delay before displaying the tooltip
+   */
+  @property({ attribute: 'enter-delay-ms', type: Number })
+  enterDelayMs = 100;
+
+  /**
+   * Specify the duration in milliseconds to delay before hiding the tooltip
+   */
+  @property({ attribute: 'leave-delay-ms', type: Number })
+  leaveDelayMs = 300;
+
+  /**
+   * Specify the size of the tooltip
+   */
+  @property({ reflect: true })
+  size = false;
+
+  /**
+   * Specify whether the tooltip should be open when it first renders
+   */
+  @property({ reflect: true, attribute: 'toolbar-action', type: Boolean })
+  toolbarAction = false;
+
   /**
-   * The menu body.
+   * Handles `mouseover` event on this element.
    */
-  private _menuBody: BXFloatingMenu | null = null;
+  private _handleHover = async () => {
+    setTimeout(async () => {
+      this.open = true;
+      const { open, updateComplete } = this;
+      if (open) {
+        await updateComplete;
+        const { selectorTooltipContent } = this
+          .constructor as typeof CDSTooltip;
+        (this.querySelector(selectorTooltipContent) as HTMLElement)?.focus();
+      }
+    }, this.enterDelayMs);
+  };
 
   /**
-   * The trigger button.
+   * Handles `mouseleave` event on this element.
    */
-  @query('#trigger')
-  private _triggerNode!: HTMLElement;
+  private _handleHoverOut = async () => {
+    setTimeout(async () => {
+      const { open } = this;
+      if (open) {
+        this.open = false;
+      }
+    }, this.leaveDelayMs);
+  };
 
   /**
    * Handles `click` event on this element.
@@ -47,60 +107,53 @@ class BXTooltip
   @HostListener('click')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleClick = async () => {
-    this.open = !this.open;
-    const { open, updateComplete } = this;
-    if (open) {
-      await updateComplete;
-      const { _menuBody: menuBody } = this;
-      (
-        menuBody?.shadowRoot?.querySelector(
-          BXTooltip.selectorTooltipBody
-        ) as HTMLElement
-      )?.focus();
+    if (this.closeOnActivation) {
+      this._handleHoverOut();
     }
   };
 
   /**
    * Handles `keydown` event on this element.
    */
-  @HostListener('keydown')
+  @HostListener('click')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleKeydown = async (event) => {
-    if (event.key === ' ' || event.key === 'Enter') {
-      this._handleClick();
+    if (event.key === ' ' || event.key === 'Enter' || event.key === 'Escape') {
+      this._handleHoverOut();
     }
   };
 
   /**
-   * `true` if the dropdown should be open.
+   * Handles `slotchange` event.
    */
-  @property({ type: Boolean, reflect: true })
-  open = false;
-
-  /**
-   * @returns The position of the trigger button in the viewport.
-   */
-  get triggerPosition() {
-    const { _triggerNode: triggerNode } = this;
-    if (!triggerNode) {
-      throw new TypeError('Cannot find the trigger button.');
+  protected _handleSlotChange({ target }: Event) {
+    const component = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+    if (!component[0]) {
+      return;
     }
-    return triggerNode.getBoundingClientRect();
+    (component[0] as HTMLElement).addEventListener('focus', this._handleHover);
+    (component[0] as HTMLElement).addEventListener(
+      'focusout',
+      this._handleHoverOut
+    );
+    (component[0] as HTMLElement).addEventListener(
+      'mouseover',
+      this._handleHover
+    );
+    (component[0] as HTMLElement).addEventListener(
+      'mouseleave',
+      this._handleHoverOut
+    );
+    this.requestUpdate();
   }
 
   connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'button');
-    }
-    if (!this.hasAttribute('tabindex')) {
-      // TODO: Should we use a property?
-      this.setAttribute('tabindex', '0');
-    }
-    if (!this.hasAttribute('aria-haspopup')) {
-      this.setAttribute('aria-haspopup', 'true');
-    }
-    if (!this.hasAttribute('aria-expanded')) {
-      this.setAttribute('aria-expanded', 'false');
+    if (!this.hasAttribute('highContrast')) {
+      this.setAttribute('highContrast', '');
     }
     if (!this.shadowRoot) {
       this.attachShadow({ mode: 'open' });
@@ -109,32 +162,43 @@ class BXTooltip
   }
 
   updated(changedProperties) {
+    const { selectorTooltipContent } = this.constructor as typeof CDSTooltip;
+    const toolTipContent = this.querySelector(selectorTooltipContent);
+
+    if (changedProperties.has('defaultOpen')) {
+      this.open = this.defaultOpen;
+    }
+
     if (changedProperties.has('open')) {
-      if (!this._menuBody) {
-        this._menuBody = find(
-          this.childNodes,
-          (elem) => (elem.constructor as typeof BXFloatingMenu).FLOATING_MENU
-        );
-      }
-      if (this._menuBody) {
-        this._menuBody.open = this.open;
-      }
-      this.setAttribute('aria-expanded', String(Boolean(this.open)));
+      this.open
+        ? toolTipContent?.setAttribute('open', '')
+        : toolTipContent?.removeAttribute('open');
     }
-  }
 
-  render() {
-    return html`
-      ${Information16({ id: 'trigger' })}
-      <slot></slot>
-    `;
+    ['align', 'caret'].forEach((name) => {
+      if (changedProperties.has(name)) {
+        const { [name as keyof CDSTooltip]: value } = this;
+        (toolTipContent as CDSTooltipContent)[name] = value;
+      }
+    });
+
+    this.shadowRoot
+      ?.querySelector(`.${prefix}--popover-container`)
+      ?.classList.add(`${prefix}--tooltip`);
   }
 
-  static get selectorTooltipBody() {
-    return `.${prefix}--tooltip__content`;
+  /**
+   * A selector that will return the CDSTooltipContent.
+   */
+  static get selectorTooltipContent() {
+    return `${prefix}-tooltip-content`;
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get styles() {
+    return css`
+      ${super.styles}${styles}
+    `;
+  } // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXTooltip;
+export default CDSTooltip;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts b/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts
new file mode 100644
index 00000000000..3f9184889e8
--- /dev/null
+++ b/packages/carbon-web-components/src/components/ui-shell/header-global-action.ts
@@ -0,0 +1,116 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { LitElement } from 'lit';
+import { property, customElement, query } from 'lit/decorators.js';
+import { BUTTON_TOOLTIP_POSITION } from '../button/button';
+import CDSButton from '../button/button';
+import HostListener from '../../globals/decorators/host-listener';
+import styles from './header.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Header global action button
+ *
+ * @element cds-header-global-action
+ */
+@customElement(`${prefix}-header-global-action`)
+class CDSHeaderGlobalAction extends CDSButton {
+  @query('button')
+  protected _buttonNode!: HTMLButtonElement;
+
+  /**
+   * Specify whether the action is currently active
+   */
+  @property({ type: Boolean, reflect: true })
+  active;
+
+  /**
+   * Specify which header panel the button is associated with.
+   */
+  @property({ type: String, attribute: 'panel-id', reflect: true })
+  panelId;
+
+  /**
+   * The `aria-label` attribute for the button in its active state.
+   */
+  @property({ attribute: 'button-label-active' })
+  buttonLabelActive;
+
+  /**
+   * The `aria-label` attribute for the button in its inactive state.
+   */
+  @property({ attribute: 'button-label-inactive' })
+  buttonLabelInactive;
+
+  connectedCallback() {
+    this.tooltipPosition = BUTTON_TOOLTIP_POSITION.BOTTOM;
+    super.connectedCallback();
+  }
+
+  @HostListener('click', { capture: true })
+  // @ts-ignore
+  private _handleClick(event: Event) {
+    const { disabled } = this;
+    if (disabled) {
+      event.stopPropagation();
+    } else {
+      const panel = document.querySelector(`#${this.panelId}`);
+
+      // see if there is related panel for header-global-action button first
+      // and then set the expanded attr of it accordingly
+      if (panel) {
+        const expanded = panel.getAttribute('expanded');
+
+        if (expanded) {
+          panel.removeAttribute('expanded');
+        } else {
+          panel.setAttribute('expanded', 'true');
+        }
+
+        const active = !this.active;
+        this.active = active;
+      }
+    }
+  }
+
+  updated() {
+    if (this._buttonNode) {
+      this._buttonNode.classList.add(`${prefix}--header__action`);
+    }
+  }
+
+  shouldUpdate(changedProperties) {
+    if (changedProperties.has('active')) {
+      if (this.active) {
+        this._buttonNode.classList.add(`${prefix}--header__action--active`);
+
+        if (this.buttonLabelActive) {
+          this.tooltipText = this.buttonLabelActive;
+        }
+      } else {
+        this._buttonNode.classList.remove(`${prefix}--header__action--active`);
+
+        if (this.buttonLabelInactive) {
+          this.tooltipText = this.buttonLabelInactive;
+        }
+      }
+    }
+    return true;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSHeaderGlobalAction;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts b/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
index 21ed6dcc70f..1177e6dbb9e 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header-menu-button.ts
@@ -7,35 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Close20 from '@carbon/icons/lib/close/20';
 import Menu20 from '@carbon/icons/lib/menu/20';
-import ifNonNull from '../../globals/directives/if-non-null';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
+import { SIDE_NAV_COLLAPSE_MODE } from './side-nav';
 import styles from './header.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * The trigger button for side nav in header nav.
  *
- * @element bx-header-menu-button
+ * @element cds-header-menu-button
  * @csspart button The button.
  * @csspart toggle-icon The toggle icon.
- * @fires bx-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
+ * @fires cds-header-menu-button-toggled - The custom event fired after this header menu button is toggled upon a user gesture.
  */
 @customElement(`${prefix}-header-menu-button`)
-class BXHeaderMenuButton extends FocusMixin(LitElement) {
+class CDSHeaderMenuButton extends FocusMixin(LitElement) {
   private _handleClick() {
     const active = !this.active;
     this.active = active;
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof BXHeaderMenuButton).eventToggle,
+        (this.constructor as typeof CDSHeaderMenuButton).eventToggle,
         {
           bubbles: true,
           cancelable: true,
@@ -79,19 +78,13 @@ class BXHeaderMenuButton extends FocusMixin(LitElement) {
   disabled = false;
 
   /**
-   * Usage mode of the side nav.
+   * If `true` will style the side nav to sit below the header
    */
-  @property({ reflect: true, attribute: 'usage-mode' })
-  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+  @property({
+    type: Boolean,
+    attribute: 'is-not-child-of-header',
+  })
+  isNotChildOfHeader = false;
 
   render() {
     const {
@@ -113,7 +106,7 @@ class BXHeaderMenuButton extends FocusMixin(LitElement) {
         part="button"
         class="${classes}"
         ?disabled=${disabled}
-        aria-label="${ifNonNull(buttonLabel)}"
+        aria-label="${ifDefined(buttonLabel)}"
         @click=${handleClick}>
         ${(active ? Close20 : Menu20)({ slot: 'toggle-icon' })}
       </button>
@@ -127,7 +120,11 @@ class BXHeaderMenuButton extends FocusMixin(LitElement) {
     return `${prefix}-header-menu-button-toggled`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderMenuButton;
+export default CDSHeaderMenuButton;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts b/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts
index 485b234f2bf..b5b0f9e844b 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header-menu-item.ts
@@ -7,18 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
+import { prefix } from '../../globals/settings';
+import CDSHeaderNavItem from './header-nav-item';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
-import BXHeaderNavItem from './header-nav-item';
-
-const { prefix } = settings;
 
 /**
  * Header submenu item.
  *
- * @element bx-header-menu-item
+ * @element cds-header-menu-item
  */
 @customElement(`${prefix}-header-menu-item`)
-class BXHeaderMenuItem extends BXHeaderNavItem {}
+class CDSHeaderMenuItem extends CDSHeaderNavItem {}
 
-export default BXHeaderMenuItem;
+export default CDSHeaderMenuItem;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-menu.ts b/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
index b9a78a7bc5a..a89214d490e 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header-menu.ts
@@ -7,35 +7,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, query, LitElement } from 'lit-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import ChevronDownGlyph from '@carbon/icons/lib/chevron--down/16';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { forEach } from '../../globals/internal/collection-helpers';
+import CDSHeaderMenuItem from './header-menu-item';
 import styles from './header.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Header menu.
  *
- * @element bx-header-menu
+ * @element cds-header-menu
  * @csspart trigger The trigger button.
  * @csspart trigger-icon The trigger button icon.
  * @csspart menu-body The menu body.
  */
 @customElement(`${prefix}-header-menu`)
-class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
+class CDSHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * The trigger button.
    */
   @query('[part="trigger"]')
   protected _topMenuItem!: HTMLElement;
 
+  /**
+   * keeps track if header menu has any active submenus
+   */
+  private _hasActiveChildren = false;
+
   /**
    * Handles `click` event handler on this element.
    */
@@ -83,6 +89,12 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ type: Boolean, reflect: true })
   expanded = false;
 
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  @property({ type: Boolean, attribute: 'is-active', reflect: true })
+  isActive = false;
+
   /**
    * The content of the trigger button.
    */
@@ -95,23 +107,23 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   @property({ attribute: 'menu-label' })
   menuLabel!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus: true,
-    });
-  }
-
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
     }
+    const { selectorItem } = this.constructor as typeof CDSHeaderMenu;
+    forEach(this.querySelectorAll(selectorItem), (elem) => {
+      if ((elem as CDSHeaderMenuItem).isActive === true) {
+        this._hasActiveChildren = true;
+      }
+    });
+
     super.connectedCallback();
   }
 
   updated(changedProperties) {
     if (changedProperties.has('expanded')) {
-      const { selectorItem } = this.constructor as typeof BXHeaderMenu;
+      const { selectorItem } = this.constructor as typeof CDSHeaderMenu;
       const { expanded } = this;
       forEach(this.querySelectorAll(selectorItem), (elem) => {
         (elem as HTMLElement).tabIndex = expanded ? 0 : -1;
@@ -122,16 +134,26 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
   render() {
     const {
       expanded,
+      isActive,
       triggerContent,
       menuLabel,
+      _hasActiveChildren,
       _handleClick: handleClick,
     } = this;
+
+    const linkClasses = classMap({
+      [`${prefix}--header__menu-item`]: true,
+      [`${prefix}--header__menu-title`]: true,
+      [`${prefix}--header__menu-item--current`]:
+        isActive || (_hasActiveChildren && !expanded),
+    });
+
     return html`
       <a
         part="trigger"
         role="button"
         tabindex="0"
-        class="${prefix}--header__menu-item ${prefix}--header__menu-title"
+        class="${linkClasses}"
         href="javascript:void 0"
         aria-haspopup="menu"
         aria-expanded="${String(Boolean(expanded))}"
@@ -157,7 +179,11 @@ class BXHeaderMenu extends HostListenerMixin(FocusMixin(LitElement)) {
     return `${prefix}-header-menu-item`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderMenu;
+export default CDSHeaderMenu;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-name.ts b/packages/carbon-web-components/src/components/ui-shell/header-name.ts
index d9c66a93791..3cf543c2dea 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header-name.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header-name.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, LitElement } from 'lit-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './header.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * The product name UI in header nav.
  *
- * @element bx-header-name
+ * @element cds-header-name
  * @csspart link The link.
  * @csspart prefix The prefix content.
  */
 @customElement(`${prefix}-header-name`)
-class BXHeaderName extends FocusMixin(LitElement) {
+class CDSHeaderName extends FocusMixin(LitElement) {
   /**
    * Link `href`.
    */
@@ -37,15 +36,6 @@ class BXHeaderName extends FocusMixin(LitElement) {
   @property()
   prefix!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const { href, prefix: namePrefix } = this;
     const namePrefixPart = !namePrefix
@@ -62,7 +52,11 @@ class BXHeaderName extends FocusMixin(LitElement) {
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderName;
+export default CDSHeaderName;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts b/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
index add2fc98268..25d050c3e3d 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header-nav-item.ts
@@ -7,59 +7,82 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { ifDefined } from 'lit-html/directives/if-defined';
-import { html, property, LitElement } from 'lit-element';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './header.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Header nav item.
  *
- * @element bx-header-nav-item
+ * @element cds-header-nav-item
  * @csspart link The link.
  * @csspart title The title.
  */
 @customElement(`${prefix}-header-nav-item`)
-class BXHeaderNavItem extends FocusMixin(LitElement) {
+class CDSHeaderNavItem extends FocusMixin(LitElement) {
   /**
    * Link `href`.
    */
   @property()
   href!: string;
 
+  /**
+   * The link type.
+   */
+  @property({ reflect: true })
+  rel!: string;
+
+  /**
+   * The link target.
+   */
+  @property({ reflect: true })
+  target!: string;
+
   /**
    * The title.
    */
   @property()
   title!: string;
 
+  /**
+   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
+   */
+  @property({ type: Boolean, attribute: 'is-active' })
+  isActive = false;
+
+  /**
+   * indicates that this element represents the current item
+   */
+  @property({ type: String, attribute: 'aria-current' })
+  ariaCurrent;
+
   /**
    * As child of <ul>, this element must have role of listitem
    */
   @property({ reflect: true })
   role: string = 'listitem';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
+  render() {
+    const { ariaCurrent, href, isActive, title, rel, target } = this;
+    const linkClass = classMap({
+      [`${prefix}--header__menu-item`]: true,
+      [`${prefix}--header__menu-item--current`]:
+        isActive && ariaCurrent !== 'page',
     });
-  }
 
-  render() {
-    const { href, title } = this;
     return html`
       <a
         part="link"
-        class="${prefix}--header__menu-item"
+        class="${linkClass}"
         tabindex="0"
-        href="${ifDefined(href)}">
+        href="${ifDefined(href)}"
+        rel="${ifDefined(rel)}"
+        target="${ifDefined(target)}">
         <span part="title" class="${prefix}--text-truncate--end"
           ><slot>${title}</slot></span
         >
@@ -67,7 +90,11 @@ class BXHeaderNavItem extends FocusMixin(LitElement) {
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderNavItem;
+export default CDSHeaderNavItem;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-nav.ts b/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
index 77e8f20abba..b4bea5679a9 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header-nav.ts
@@ -7,22 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './header.scss';
 
-const { prefix } = settings;
-
 /**
  * Header.
  *
- * @element bx-header-nav
+ * @element cds-header-nav
  * @csspart menu-body The menu body.
  * @csspart divider The divider.
  */
 @customElement(`${prefix}-header-nav`)
-class BXHeaderNav extends LitElement {
+class CDSHeaderNav extends LitElement {
   /**
    * The `aria-label` attribute for the menu bar UI.
    */
@@ -52,4 +51,4 @@ class BXHeaderNav extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeaderNav;
+export default CDSHeaderNav;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-panel.ts b/packages/carbon-web-components/src/components/ui-shell/header-panel.ts
new file mode 100644
index 00000000000..9f4f64571f2
--- /dev/null
+++ b/packages/carbon-web-components/src/components/ui-shell/header-panel.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import styles from './header.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Header panel
+ *
+ * @element cds-header-panel
+ */
+@customElement(`${prefix}-header-panel`)
+class CDSHeaderPanel extends LitElement {
+  /**
+   * Specify whether the panel is expanded
+   */
+  @property({ type: Boolean, reflect: true })
+  expanded;
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSHeaderPanel;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts b/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts
new file mode 100644
index 00000000000..cc57a28581a
--- /dev/null
+++ b/packages/carbon-web-components/src/components/ui-shell/header-side-nav-items.ts
@@ -0,0 +1,43 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './side-nav.scss';
+
+/**
+ * Header Side Nav Items section
+ *
+ * @element cds-header-side-nav-items
+ */
+@customElement(`${prefix}-header-side-nav-items`)
+class CDSHeaderSideNavItems extends LitElement {
+  /**
+   * Optionally specify if container will have a bottom divider to differentiate
+   * between original sidenav items and header menu items. False by default.
+   */
+  @property({ type: Boolean, attribute: 'has-divider' })
+  hasDivider = false;
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'list');
+    }
+    super.connectedCallback();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSHeaderSideNavItems;
diff --git a/packages/carbon-web-components/src/components/ui-shell/header.scss b/packages/carbon-web-components/src/components/ui-shell/header.scss
index cfb61d4dc61..dfd135b4352 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header.scss
+++ b/packages/carbon-web-components/src/components/ui-shell/header.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,10 +7,24 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/ui-shell/header';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/button';
+@use '@carbon/styles/scss/components/popover/index';
+@use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/components/ui-shell/header';
+@use '@carbon/styles/scss/components/ui-shell/header-panel';
+@use '@carbon/styles/scss/components/ui-shell/switcher';
 
 :host(#{$prefix}-header) {
   @extend .#{$prefix}--header;
+
+  ::slotted(.#{$prefix}--header__global) {
+    @extend .#{$prefix}--header__global;
+  }
 }
 
 :host(#{$prefix}-header-nav) {
@@ -21,9 +35,9 @@ $css--plex: true !default;
     left: 0;
     top: 50%;
     transform: translateY(-50%);
-    height: rem(24px);
+    height: $spacing-06;
     width: rem(1px);
-    background-color: $shell-header-border-01;
+    background-color: $border-subtle;
   }
 }
 
@@ -41,24 +55,64 @@ $css--plex: true !default;
   outline: none;
 
   a.#{$prefix}--header__menu-item {
-    height: mini-units(6);
+    height: $spacing-09;
+    background-color: $layer;
 
     &:hover {
-      background-color: $shell-header-bg-04;
-      color: $shell-header-text-01;
+      background-color: $background-hover;
+      color: $text-primary;
     }
 
     &:active {
-      background-color: $shell-header-bg-03;
+      background-color: $background-active;
+    }
+  }
+
+  a.#{$prefix}--header__menu-item--current {
+    background-color: $layer-selected;
+
+    &:hover {
+      background-color: $layer-selected-hover;
+    }
+
+    &::after {
+      position: absolute;
+      top: -#{$spacing-01};
+      left: -#{$spacing-01};
+      bottom: -#{$spacing-01};
+      width: 3px;
+      height: 100%;
+      background-color: $border-interactive;
+      content: '';
     }
   }
 }
 
+:host(#{$prefix}-header-global-action) {
+  ::slotted(svg) {
+    fill: $icon-secondary;
+  }
+  &:hover ::slotted(svg) {
+    fill: $icon-primary;
+  }
+
+  .#{$prefix}--popover {
+    z-index: 8001;
+  }
+}
+
+:host(#{$prefix}-header-nav-item),
+:host(#{$prefix}-header-menu) {
+  a.#{$prefix}--header__menu-item {
+    box-sizing: border-box;
+  }
+}
+
 :host(#{$prefix}-header-menu-button) {
   display: content;
   outline: none;
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     display: none;
   }
 }
@@ -68,7 +122,7 @@ $css--plex: true !default;
 }
 
 :host(#{$prefix}-header-menu-button[collapse-mode='rail']) {
-  @include carbon--breakpoint('lg') {
+  @include breakpoint('lg') {
     display: block;
   }
 }
@@ -76,4 +130,36 @@ $css--plex: true !default;
 :host(#{$prefix}-header-name) {
   display: content;
   height: 100%;
+
+  a {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-header-panel) {
+  @extend .#{$prefix}--header-panel;
+}
+
+:host(#{$prefix}-header-panel[expanded]) {
+  @extend .#{$prefix}--header-panel--expanded;
+}
+
+:host(#{$prefix}-switcher) {
+  @extend .#{$prefix}--switcher;
+}
+
+:host(#{$prefix}-switcher-item) {
+  @extend .#{$prefix}--switcher__item;
+
+  a {
+    box-sizing: border-box;
+  }
+}
+
+:host(#{$prefix}-switcher-item:nth-child(1)) {
+  margin-top: $spacing-05;
+}
+
+:host(#{$prefix}-switcher-divider) {
+  @extend .#{$prefix}--switcher__item--divider;
 }
diff --git a/packages/carbon-web-components/src/components/ui-shell/header.ts b/packages/carbon-web-components/src/components/ui-shell/header.ts
index d6909b9432a..d5abe541cf0 100644
--- a/packages/carbon-web-components/src/components/ui-shell/header.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/header.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './header.scss';
 
-const { prefix } = settings;
-
 /**
  * Header.
  *
- * @element bx-header
+ * @element cds-header
  */
 @customElement(`${prefix}-header`)
-class BXHeader extends LitElement {
+class CDSHeader extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'banner');
@@ -35,4 +33,4 @@ class BXHeader extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXHeader;
+export default CDSHeader;
diff --git a/packages/carbon-web-components/src/components/ui-shell/index.ts b/packages/carbon-web-components/src/components/ui-shell/index.ts
index 0d6365ea450..0b9050d56e2 100644
--- a/packages/carbon-web-components/src/components/ui-shell/index.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/index.ts
@@ -7,16 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import './side-nav-menu-item';
 import './header';
-import './side-nav';
-import './side-nav-divider';
-import './header-name';
-import './header-nav';
-import './side-nav-link';
+import './header-global-action';
 import './header-menu';
-import './header-menu-item';
-import './side-nav-items';
 import './header-menu-button';
+import './header-menu-item';
+import './header-name';
+import './header-nav';
 import './header-nav-item';
+import './header-panel';
+import './header-side-nav-items';
+import './side-nav';
+import './side-nav-divider';
+import './side-nav-items';
+import './side-nav-link';
 import './side-nav-menu';
+import './side-nav-menu-item';
+import './switcher';
+import './switcher-divider';
+import './switcher-item';
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts b/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts
index 243925157e3..8a27e9aa383 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav-divider.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { LitElement } from 'lit-element';
+import { LitElement } from 'lit';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './side-nav.scss';
 
-const { prefix } = settings;
-
 /**
  * A divider in side nav.
  *
- * @element bx-side-nav-divider
+ * @element cds-side-nav-divider
  */
 @customElement(`${prefix}-side-nav-divider`)
-class BXSideNavDivider extends LitElement {
+class CDSSideNavDivider extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'separator');
@@ -31,4 +29,4 @@ class BXSideNavDivider extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSideNavDivider;
+export default CDSSideNavDivider;
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts b/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts
index 74df9b8d080..b0f08dab1d8 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav-items.ts
@@ -7,20 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { prefix } from '../../globals/settings';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 import styles from './side-nav.scss';
 
-const { prefix } = settings;
-
 /**
  * Side nav items.
  *
- * @element bx-side-nav-items
+ * @element cds-side-nav-items
  */
 @customElement(`${prefix}-side-nav-items`)
-class BXSideNavItems extends LitElement {
+class CDSSideNavItems extends LitElement {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'list');
@@ -29,10 +27,10 @@ class BXSideNavItems extends LitElement {
   }
 
   render() {
-    return html` <slot></slot> `;
+    return html`<slot></slot>`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSideNavItems;
+export default CDSSideNavItems;
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts b/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts
index 53c5533c4cf..b6895b0ee2d 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav-link.ts
@@ -7,25 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, query, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './side-nav.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Side nav menu item.
  *
- * @element bx-side-nav-link
+ * @element cds-side-nav-link
  * @slot link - The link.
  * @slot title - The title.
  * @slot title-icon-container - The title icon container.
  */
 @customElement(`${prefix}-side-nav-link`)
-class BXSideNavLink extends FocusMixin(LitElement) {
+class CDSSideNavLink extends FocusMixin(LitElement) {
   /**
    * The container for the title icon.
    */
@@ -54,21 +54,30 @@ class BXSideNavLink extends FocusMixin(LitElement) {
   @property()
   href = '';
 
+  /**
+   * The link type.
+   */
+  @property({ reflect: true })
+  rel!: string;
+
+  /**
+   * The link target.
+   */
+  @property({ reflect: true })
+  target!: string;
+
+  /**
+   * Specify if this is a large variation of the side nav link
+   */
+  @property({ type: Boolean, reflect: true })
+  large = false;
+
   /**
    * The title.
    */
   @property()
   title!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
@@ -80,6 +89,8 @@ class BXSideNavLink extends FocusMixin(LitElement) {
     const {
       active,
       href,
+      rel,
+      target,
       title,
       _handleSlotChangeTitleIcon: handleSlotChangeTitleIcon,
     } = this;
@@ -88,7 +99,12 @@ class BXSideNavLink extends FocusMixin(LitElement) {
       [`${prefix}--side-nav__link--current`]: active,
     });
     return html`
-      <a part="link" class="${classes}" href="${href}">
+      <a
+        part="link"
+        class="${classes}"
+        href="${href}"
+        rel="${ifDefined(rel)}"
+        target="${ifDefined(target)}">
         <div
           id="title-icon-container"
           part="title-icon-container"
@@ -105,7 +121,11 @@ class BXSideNavLink extends FocusMixin(LitElement) {
     `;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSideNavLink;
+export default CDSSideNavLink;
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts b/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts
index 9fbe75f3cb0..b6c54bdd426 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav-menu-item.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { classMap } from 'lit-html/directives/class-map';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
 import FocusMixin from '../../globals/mixins/focus';
-import BXSideNavMenu from './side-nav-menu';
+import CDSSideNavMenu from './side-nav-menu';
 import styles from './side-nav.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Side nav menu item.
  *
- * @element bx-side-nav-menu-item
+ * @element cds-side-nav-menu-item
  * @csspart link The link.
  * @csspart title The title.
  */
 @customElement(`${prefix}-side-nav-menu-item`)
-class BXSideNavMenuItem extends FocusMixin(LitElement) {
+class CDSSideNavMenuItem extends FocusMixin(LitElement) {
   /**
    * `true` if the menu item should be active.
    */
@@ -44,21 +43,12 @@ class BXSideNavMenuItem extends FocusMixin(LitElement) {
   @property()
   title!: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   shouldUpdate(changedProperties) {
     if (changedProperties.has('active') && this.active) {
-      const { selectorMenu } = this.constructor as typeof BXSideNavMenuItem;
+      const { selectorMenu } = this.constructor as typeof CDSSideNavMenuItem;
       const parent = this.closest(selectorMenu);
       if (parent) {
-        (parent as BXSideNavMenu).active = true;
+        (parent as CDSSideNavMenu).active = true;
       }
     }
     return true;
@@ -93,7 +83,11 @@ class BXSideNavMenuItem extends FocusMixin(LitElement) {
     return `${prefix}-side-nav-menu`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSideNavMenuItem;
+export default CDSSideNavMenuItem;
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts b/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts
index 7c14038a849..979a1b5d7d1 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav-menu.ts
@@ -7,20 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-import { html, property, query, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import ChevronDown20 from '@carbon/icons/lib/chevron--down/20';
+import { prefix } from '../../globals/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import FocusMixin from '../../globals/mixins/focus';
 import styles from './side-nav.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
-const { prefix } = settings;
-
 /**
  * Side nav menu.
  *
- * @element bx-side-nav-menu
+ * @element cds-side-nav-menu
  * @slot title-icon - The icon.
  * @csspart expando The expando.
  * @csspart expando-icon-container The expando icon container.
@@ -30,7 +29,7 @@ const { prefix } = settings;
  * @csspart menu-body The menu body.
  */
 @customElement(`${prefix}-side-nav-menu`)
-class BXSideNavMenu extends FocusMixin(LitElement) {
+class CDSSideNavMenu extends FocusMixin(LitElement) {
   /**
    * `true` if this menu has an icon.
    */
@@ -49,7 +48,7 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
    */
   private _handleUserInitiatedToggle(expanded = !this.expanded) {
     const { eventBeforeToggle, eventToggle } = this
-      .constructor as typeof BXSideNavMenu;
+      .constructor as typeof CDSSideNavMenu;
     const init = {
       bubbles: true,
       cancelable: true,
@@ -79,7 +78,7 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
     forEach(target.assignedNodes(), (item) => {
       if (item.nodeType === Node.ELEMENT_NODE) {
         item.toggleAttribute(
-          (this.constructor as typeof BXSideNavMenu).attribItemHasIcon,
+          (this.constructor as typeof CDSSideNavMenu).attribItemHasIcon,
           hasIcon
         );
       }
@@ -90,7 +89,7 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
    * Handles `slotchange` event on the `<slot>` for the title icon.
    */
   private _handleSlotChangeTitleIcon({ target }) {
-    const constructor = this.constructor as typeof BXSideNavMenu;
+    const constructor = this.constructor as typeof CDSSideNavMenu;
     const hasIcon = target.assignedNodes().length > 0;
     this._hasIcon = hasIcon;
     this._titleIconContainerNode?.toggleAttribute('hidden', !hasIcon);
@@ -111,6 +110,12 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
   @property({ type: Boolean, reflect: true })
   expanded = false;
 
+  /**
+   * Specify if this is a large variation of the side nav menu
+   */
+  @property({ type: Boolean, reflect: true })
+  large = false;
+
   /**
    * `true` if the menu should be forced collapsed upon side nav's expanded state.
    */
@@ -123,15 +128,6 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
   @property()
   title = '';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
@@ -141,7 +137,7 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
 
   updated(changedProperties) {
     if (changedProperties.has('expanded')) {
-      const { selectorItem } = this.constructor as typeof BXSideNavMenu;
+      const { selectorItem } = this.constructor as typeof CDSSideNavMenu;
       const { expanded } = this;
       forEach(this.querySelectorAll(selectorItem), (elem) => {
         (elem as HTMLElement).tabIndex = expanded ? 0 : -1;
@@ -217,7 +213,11 @@ class BXSideNavMenu extends FocusMixin(LitElement) {
     return `${prefix}-side-nav-menu-toggled`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSideNavMenu;
+export default CDSSideNavMenu;
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav.scss b/packages/carbon-web-components/src/components/ui-shell/side-nav.scss
index d2ba404bafb..ef6cad930f5 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav.scss
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav.scss
@@ -1,5 +1,5 @@
 //
-// Copyright IBM Corp. 2019, 2022
+// Copyright IBM Corp. 2019, 2023
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -7,44 +7,14 @@
 
 $css--plex: true !default;
 
-@import 'carbon-components/scss/components/ui-shell/side-nav';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/components/ui-shell/side-nav';
 
-:host(#{$prefix}-side-nav) {
-  @extend .#{$prefix}--side-nav;
-  @extend .#{$prefix}--side-nav--ux;
-  @extend .#{$prefix}--side-nav__navigation;
-
-  top: 0;
-}
-
-:host(#{$prefix}-side-nav[collapse-mode='fixed']) {
-  // TODO: Consider making `@extend .#{$prefix}--side-nav--fixed` work, possibly caused by `:not()` styles
-  width: mini-units(32);
-}
-
-:host(#{$prefix}-side-nav[collapse-mode='rail']) {
-  width: mini-units(6);
-
-  &:hover {
-    width: mini-units(32);
-  }
-}
-
-:host(#{$prefix}-side-nav[expanded]),
-:host(#{$prefix}-side-nav[collapse-mode][expanded]) {
-  @extend .#{$prefix}--side-nav--expanded;
-}
-
-:host(#{$prefix}-side-nav[usage-mode='header-nav']),
-:host(#{$prefix}-side-nav[collapse-mode][usage-mode='header-nav']) {
-  width: 0;
-}
-
-:host(#{$prefix}-side-nav[expanded][usage-mode='header-nav']),
-:host(#{$prefix}-side-nav[collapse-mode][expanded][usage-mode='header-nav']) {
-  @include carbon--breakpoint-down('lg') {
-    width: mini-units(32);
-  }
+:host(#{$prefix}-side-nav[expanded]) ::slotted(#{$prefix}-side-nav-items) {
+  overflow-y: auto;
 }
 
 :host(#{$prefix}-side-nav-items) {
@@ -60,7 +30,8 @@ $css--plex: true !default;
   height: auto;
 
   .#{$prefix}--side-nav__icon {
-    color: $shell-side-nav-text-01;
+    // TODO: audit
+    color: $text-primary;
 
     &[hidden] {
       display: none;
@@ -68,6 +39,10 @@ $css--plex: true !default;
   }
 }
 
+:host(#{$prefix}-side-nav-link[large]) {
+  @extend .#{$prefix}--side-nav__item--large;
+}
+
 :host(#{$prefix}-side-nav-divider) {
   @extend .#{$prefix}--side-nav__divider;
 
@@ -78,20 +53,22 @@ $css--plex: true !default;
   @extend .#{$prefix}--side-nav__item;
 
   display: block;
-  outline: none;
-  width: auto;
-  height: auto;
 
   .#{$prefix}--side-nav__icon[hidden] {
     display: none;
   }
+
+  .#{$prefix}--side-nav__menu {
+    margin: 0;
+    padding: 0;
+  }
 }
 
 :host(#{$prefix}-side-nav-menu[active]) {
   @extend .#{$prefix}--side-nav__item--active;
 
-  background-color: $shell-side-nav-bg-04;
-  color: $ibm-color__gray-100;
+  // TODO: audit
+  color: $text-primary;
   position: relative;
 
   &::before {
@@ -100,8 +77,8 @@ $css--plex: true !default;
     top: 0;
     bottom: 0;
     left: 0;
-    width: 4px;
-    background-color: $shell-side-nav-accent-01;
+    width: $spacing-02;
+    background-color: $border-interactive;
   }
 }
 
@@ -119,6 +96,10 @@ $css--plex: true !default;
   @extend .#{$prefix}--side-nav__item--icon;
 }
 
+:host(#{$prefix}-side-nav-menu[large]) {
+  @extend .#{$prefix}--side-nav__item--large;
+}
+
 :host(#{$prefix}-side-nav-menu-item) {
   @extend .#{$prefix}--side-nav__menu-item;
 
@@ -128,21 +109,30 @@ $css--plex: true !default;
   height: auto;
 
   a.#{$prefix}--side-nav__link {
-    height: mini-units(4);
-    min-height: mini-units(4);
-    padding-left: mini-units(4);
+    height: $spacing-07;
+    min-height: $spacing-07;
+    padding-left: $spacing-07;
     font-weight: 400;
   }
 }
 
 :host(#{$prefix}-side-nav-menu-item[parent-has-icon])
   a.#{$prefix}--side-nav__link {
-  padding-left: mini-units(9);
+  padding-left: 4.5rem;
 }
 
 :host(#{$prefix}-side-nav-item) .#{$prefix}--side-nav__link:hover,
 :host(#{$prefix}-side-nav-menu) .#{$prefix}--side-nav__submenu:hover,
 :host(#{$prefix}-side-nav-menu-item) .#{$prefix}--side-nav__link:hover {
-  background-color: $shell-side-nav-bg-04;
-  color: $ibm-color__gray-100;
+  // TODO: audit
+  background-color: $background-hover;
+  color: $text-primary;
+}
+
+:host(#{$prefix}-header-side-nav-items) {
+  @extend .#{$prefix}--side-nav__header-navigation;
+}
+
+:host(#{$prefix}-header-side-nav-items[has-divider]) {
+  @extend .#{$prefix}--side-nav__header-divider;
 }
diff --git a/packages/carbon-web-components/src/components/ui-shell/side-nav.ts b/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
index f954428abb9..56007228fad 100644
--- a/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/side-nav.ts
@@ -7,30 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings';
-import on from 'carbon-components/es/globals/js/misc/on';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import on from '../../globals/mixins/on';
+import { prefix } from '../../globals/settings';
 import HostListenerMixin from '../../globals/mixins/host-listener';
 import HostListener from '../../globals/decorators/host-listener';
 import { forEach } from '../../globals/internal/collection-helpers';
 import Handle from '../../globals/internal/handle';
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './defs';
-import BXHeaderMenuButton from './header-menu-button';
-import BXSideNavMenu from './side-nav-menu';
+import CDSHeaderMenuButton from './header-menu-button';
+import CDSSideNavMenu from './side-nav-menu';
 import styles from './side-nav.scss';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 export { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE };
 
-const { prefix } = settings;
-
 /**
  * Side nav.
  *
- * @element bx-side-nav
+ * @element cds-side-nav
  */
 @customElement(`${prefix}-side-nav`)
-class BXSideNav extends HostListenerMixin(LitElement) {
+class CDSSideNav extends HostListenerMixin(LitElement) {
   /**
    * `true` if this side nav is hovered.
    */
@@ -75,7 +75,7 @@ class BXSideNav extends HostListenerMixin(LitElement) {
       if (this.expanded) {
         (
           this.querySelector(
-            (this.constructor as typeof BXSideNav).selectorNavItems
+            (this.constructor as typeof CDSSideNav).selectorNavItems
           ) as HTMLElement
         )?.focus();
       }
@@ -89,34 +89,14 @@ class BXSideNav extends HostListenerMixin(LitElement) {
     const { expanded, _hovered: hovered } = this;
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof BXSideNav).selectorMenu
+        (this.constructor as typeof CDSSideNav).selectorMenu
       ),
       (item) => {
-        (item as BXSideNavMenu).forceCollapsed = !expanded && !hovered;
+        (item as CDSSideNavMenu).forceCollapsed = !expanded && !hovered;
       }
     );
   }
 
-  /**
-   * Handles `mouseover` event handler.
-   */
-  @HostListener('mouseover')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleMouseover() {
-    this._hovered = true;
-    this._updatedSideNavMenuForceCollapsedState();
-  }
-
-  /**
-   * Handles `mouseout` event handler.
-   */
-  @HostListener('mouseout')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleMouseout() {
-    this._hovered = false;
-    this._updatedSideNavMenuForceCollapsedState();
-  }
-
   /**
    * Collapse mode of the side nav.
    */
@@ -130,10 +110,19 @@ class BXSideNav extends HostListenerMixin(LitElement) {
   expanded = false;
 
   /**
-   * Usage mode of the side nav.
+   * If `true` will style the side nav to sit below the header
+   */
+  @property({
+    type: Boolean,
+    attribute: 'is-not-child-of-header',
+  })
+  isNotChildOfHeader = false;
+
+  /**
+   * Specify if the side-nav will be persistent above the lg breakpoint
    */
-  @property({ reflect: true, attribute: 'usage-mode' })
-  usageMode = SIDE_NAV_USAGE_MODE.REGULAR;
+  @property({ type: Boolean, reflect: true, attribute: 'is-not-persistent' })
+  isNotPersistent = false;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -161,57 +150,146 @@ class BXSideNav extends HostListenerMixin(LitElement) {
   }
 
   updated(changedProperties) {
-    if (
-      changedProperties.has('collapseMode') ||
-      changedProperties.has('usageMode')
-    ) {
-      const { collapseMode, usageMode } = this;
-      if (
-        (collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED ||
-          collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) &&
-        usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV
-      ) {
-        console.warn(
-          'Fixed/rail modes of side nav cannot be used with header nav mode.'
-        ); // eslint-disable-line no-console
-      }
-    }
     const doc = this.getRootNode() as Document;
     if (changedProperties.has('collapseMode')) {
       forEach(
         doc.querySelectorAll(
-          (this.constructor as typeof BXSideNav).selectorButtonToggle
+          (this.constructor as typeof CDSSideNav).selectorButtonToggle
         ),
         (item) => {
-          (item as BXHeaderMenuButton).collapseMode = this.collapseMode;
+          (item as CDSHeaderMenuButton).collapseMode = this.collapseMode;
         }
       );
     }
     if (changedProperties.has('expanded')) {
-      this._updatedSideNavMenuForceCollapsedState();
+      const headerItems = doc.querySelectorAll(
+        (this.constructor as typeof CDSSideNav).selectorHeaderItems
+      );
       forEach(
         doc.querySelectorAll(
-          (this.constructor as typeof BXSideNav).selectorButtonToggle
+          (this.constructor as typeof CDSSideNav).selectorButtonToggle
         ),
         (item) => {
-          (item as BXHeaderMenuButton).active = this.expanded;
+          (item as CDSHeaderMenuButton).active = this.expanded;
         }
       );
+      if (this.expanded) {
+        forEach(headerItems, (item) => {
+          item.setAttribute('tabindex', '-1');
+        });
+      } else {
+        forEach(headerItems, (item) => {
+          item.removeAttribute('tabindex');
+        });
+      }
     }
-    if (changedProperties.has('usageMode')) {
+    if (changedProperties.has('isNotChildOfHeader')) {
       forEach(
         doc.querySelectorAll(
-          (this.constructor as typeof BXSideNav).selectorButtonToggle
+          (this.constructor as typeof CDSSideNav).selectorButtonToggle
         ),
         (item) => {
-          (item as BXHeaderMenuButton).usageMode = this.usageMode;
+          (item as CDSHeaderMenuButton).isNotChildOfHeader =
+            this.isNotChildOfHeader;
         }
       );
     }
   }
 
+  /**
+   * Handles `blur` event handler on this element.
+   *
+   * @param event The event.
+   */
+  @HostListener('focusout')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleFocusOut({ relatedTarget }: FocusEvent) {
+    const { collapseMode } = this;
+    if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {
+      if (!this.contains(relatedTarget as Node)) {
+        this.expanded = false;
+      }
+    }
+  }
+
+  /**
+   * Handles `focus` event handler on this element.
+   *
+   * @param event The event.
+   */
+  @HostListener('focusin')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleFocusIn() {
+    const { collapseMode } = this;
+    if (collapseMode !== SIDE_NAV_COLLAPSE_MODE.FIXED) {
+      this.expanded = true;
+    }
+  }
+
+  /**
+   * Handles the `mouseover` event for the side nav in rail mode.
+   *
+   */
+  private _handleNavMouseOver() {
+    const { collapseMode } = this;
+    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {
+      this.expanded = true;
+      this._hovered = true;
+      this._updatedSideNavMenuForceCollapsedState();
+    }
+  }
+
+  /**
+   * Handles the `mouseout` event for the side nav in rail mode.
+   *
+   */
+  private _handleNavMouseOut() {
+    const { collapseMode } = this;
+    if (collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL) {
+      this.expanded = false;
+      this._hovered = false;
+      this._updatedSideNavMenuForceCollapsedState();
+    }
+  }
+
+  /**
+   * Handles the `click` event for the side nav overlay.
+   *
+   */
+  private _onOverlayClick() {
+    this.expanded = false;
+  }
+
   render() {
-    return html` <slot></slot> `;
+    const { collapseMode, expanded, isNotChildOfHeader, isNotPersistent } =
+      this;
+    const classes = classMap({
+      [`${prefix}--side-nav__navigation`]: true,
+      [`${prefix}--side-nav`]: true,
+      [`${prefix}--side-nav--expanded`]: expanded,
+      [`${prefix}--side-nav--collapsed`]:
+        !expanded && collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED,
+      [`${prefix}--side-nav--rail`]:
+        collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL,
+      [`${prefix}--side-nav--ux`]: !isNotChildOfHeader,
+      [`${prefix}--side-nav--hidden`]: isNotPersistent,
+    });
+
+    const overlayClasses = classMap({
+      [`${prefix}--side-nav__overlay`]: true,
+      [`${prefix}--side-nav__overlay-active`]: expanded,
+    });
+    return html`${this.collapseMode === SIDE_NAV_COLLAPSE_MODE.FIXED
+        ? null
+        : html`<div
+            class="${overlayClasses}"
+            @click=${this._onOverlayClick}></div>`}
+      <div
+        class="${classes}"
+        @mouseover="${this._handleNavMouseOver}"
+        @mouseout="${this._handleNavMouseOut}">
+        <slot></slot>
+      </div>`;
   }
 
   /**
@@ -221,6 +299,13 @@ class BXSideNav extends HostListenerMixin(LitElement) {
     return `${prefix}-header-menu-button`;
   }
 
+  /**
+   * A selector that will return the header name + global action elements.
+   */
+  static get selectorHeaderItems() {
+    return `${prefix}-header-name, ${prefix}-header-global-action`;
+  }
+
   /**
    * A selector that will return side nav focusable items.
    */
@@ -245,4 +330,4 @@ class BXSideNav extends HostListenerMixin(LitElement) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default BXSideNav;
+export default CDSSideNav;
diff --git a/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts b/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts
new file mode 100644
index 00000000000..d04e6a55ea0
--- /dev/null
+++ b/packages/carbon-web-components/src/components/ui-shell/switcher-divider.ts
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import styles from './header.scss';
+
+/**
+ * A divider in switcher.
+ *
+ * @element cds-switcher-divider
+ */
+@customElement(`${prefix}-switcher-divider`)
+class CDSSwitcherDivider extends LitElement {
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'separator');
+    }
+    super.connectedCallback();
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSSwitcherDivider;
diff --git a/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts b/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts
new file mode 100644
index 00000000000..00a58384ca1
--- /dev/null
+++ b/packages/carbon-web-components/src/components/ui-shell/switcher-item.ts
@@ -0,0 +1,89 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import { prefix } from '../../globals/settings';
+import FocusMixin from '../../globals/mixins/focus';
+import styles from './header.scss';
+
+/**
+ * Switcher menu item.
+ *
+ * @element cds-switcher-item
+ */
+@customElement(`${prefix}-switcher-item`)
+class CDSSwitcherItem extends FocusMixin(LitElement) {
+  /**
+   * Required props for accessibility label
+   */
+  @property({ type: String, attribute: 'aria-label' })
+  ariaLabel;
+
+  /**
+   * Props for accessibility labelled by
+   */
+  @property({ type: String, attribute: 'aria-labelledby' })
+  ariaLabelledBy;
+
+  /**
+   * Link `href`.
+   */
+  @property()
+  href = '';
+
+  /**
+   * Specify if this is a large variation of the side nav link
+   */
+  @property({ type: Boolean, reflect: true })
+  selected = false;
+
+  /**
+   * Specify if this is a large variation of the side nav link
+   */
+  @property({ type: Number, reflect: true, attribute: 'tab-index' })
+  tabIndex = 0;
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'listitem');
+    }
+    super.connectedCallback();
+  }
+
+  render() {
+    const { href, selected, ariaLabel, ariaLabelledBy, tabIndex } = this;
+
+    const classes = classMap({
+      [`${prefix}--switcher__item-link`]: true,
+      [`${prefix}--switcher__item-link--selected`]: selected,
+    });
+
+    return html`
+      <a
+        part="link"
+        aria-label="${ariaLabel}"
+        aria-labelledby="${ariaLabelledBy}"
+        tabindex="${tabIndex}"
+        class="${classes}"
+        href="${href}">
+        <slot></slot>
+      </a>
+    `;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSSwitcherItem;
diff --git a/packages/carbon-web-components/src/components/ui-shell/switcher.ts b/packages/carbon-web-components/src/components/ui-shell/switcher.ts
new file mode 100644
index 00000000000..30e2898dc30
--- /dev/null
+++ b/packages/carbon-web-components/src/components/ui-shell/switcher.ts
@@ -0,0 +1,53 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { LitElement, html } from 'lit';
+import { property, customElement } from 'lit/decorators.js';
+import styles from './header.scss';
+import { prefix } from '../../globals/settings';
+
+/**
+ * Switcher
+ *
+ * @element cds-switcher
+ */
+@customElement(`${prefix}-switcher`)
+class CDSSwitcher extends LitElement {
+  /**
+   * Required props for accessibility label on the underlying menu
+   */
+  @property({ type: String, attribute: 'aria-label' })
+  ariaLabel;
+
+  /**
+   * Prop for accessibility labelled by on the underlying menu
+   */
+  @property({ type: String, attribute: 'aria-labelledby' })
+  ariaLabelledBy;
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'list');
+    }
+    super.connectedCallback();
+  }
+
+  render() {
+    return html`<slot></slot>`;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default CDSSwitcher;
diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
index 62ecc71df17..9a6de32251a 100644
--- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
+++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.mdx
@@ -4,10 +4,10 @@ import { cdnJs, cdnCss } from '../../globals/internal/storybook-cdn';
 # UI Shell
 
 > 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
+> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
 > example implementation.
 
-[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
+[![Edit carbon-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/feat/cwc-v2/packages/carbon-web-components/examples/codesandbox/basic/components/ui-shell)
 
 UI Shell in Carbon Design System consists of several component groups.
 
@@ -27,71 +27,70 @@ import '@carbon/web-components/es/components/ui-shell/index.js';
 ### HTML
 
 ```html
-<bx-header aria-label="IBM Platform Name">
-  <bx-header-menu-button
+<cds-header aria-label="IBM Platform Name">
+  <cds-header-menu-button
     button-label-active="Close menu"
-    button-label-inactive="Open menu"
-  ></bx-header-menu-button>
-  <bx-header-name href="javascript:void 0" prefix="IBM"
-    >[Platform]</bx-header-name
+    button-label-inactive="Open menu"></cds-header-menu-button>
+  <cds-header-name href="javascript:void 0" prefix="IBM"
+    >[Platform]</cds-header-name
   >
-  <bx-header-nav menu-bar-label="IBM [Platform]">
-    <bx-header-nav-item href="javascript:void 0">Link 1</bx-header-nav-item>
-    <bx-header-nav-item href="javascript:void 0">Link 2</bx-header-nav-item>
-    <bx-header-nav-item href="javascript:void 0">Link 3</bx-header-nav-item>
-    <bx-header-menu menu-label="Link 4" trigger-content="Link 4">
-      <bx-header-menu-item href="javascript:void 0"
-        >Sub-link 1</bx-header-menu-item
+  <cds-header-nav menu-bar-label="IBM [Platform]">
+    <cds-header-nav-item href="javascript:void 0">Link 1</cds-header-nav-item>
+    <cds-header-nav-item href="javascript:void 0">Link 2</cds-header-nav-item>
+    <cds-header-nav-item href="javascript:void 0">Link 3</cds-header-nav-item>
+    <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+      <cds-header-menu-item href="javascript:void 0"
+        >Sub-link 1</cds-header-menu-item
       >
-      <bx-header-menu-item href="javascript:void 0"
-        >Sub-link 2</bx-header-menu-item
+      <cds-header-menu-item href="javascript:void 0"
+        >Sub-link 2</cds-header-menu-item
       >
-      <bx-header-menu-item href="javascript:void 0"
-        >Sub-link 3</bx-header-menu-item
+      <cds-header-menu-item href="javascript:void 0"
+        >Sub-link 3</cds-header-menu-item
       >
-    </bx-header-menu>
-  </bx-header-nav>
-</bx-header>
-<bx-side-nav aria-label="Side navigation" expanded>
-  <bx-side-nav-items>
-    <bx-side-nav-menu title="L0 menu">
-      <bx-side-nav-menu-item href="www.ibm.com">
+    </cds-header-menu>
+  </cds-header-nav>
+</cds-header>
+<cds-side-nav aria-label="Side navigation" expanded>
+  <cds-side-nav-items>
+    <cds-side-nav-menu title="L0 menu">
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-    </bx-side-nav-menu>
-    <bx-side-nav-menu title="L0 menu">
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+    </cds-side-nav-menu>
+    <cds-side-nav-menu title="L0 menu">
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item active aria-current="page" href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item active aria-current="page" href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-    </bx-side-nav-menu>
-    <bx-side-nav-menu title="L0 menu">
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+    </cds-side-nav-menu>
+    <cds-side-nav-menu title="L0 menu">
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-    </bx-side-nav-menu>
-    <bx-side-nav-divider></bx-side-nav-divider>
-    <bx-side-nav-link href="javascript:void(0)">L0 link</bx-side-nav-link>
-    <bx-side-nav-link href="javascript:void(0)">L0 link</bx-side-nav-link>
-  </bx-side-nav-items>
-</bx-side-nav>
+      </cds-side-nav-menu-item>
+    </cds-side-nav-menu>
+    <cds-side-nav-divider></cds-side-nav-divider>
+    <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+    <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+  </cds-side-nav-items>
+</cds-side-nav>
 ```
 
 ## Side nav
@@ -107,58 +106,58 @@ Side nav in UI Shell consists of the following components:
 | `<side-nav-menu-item>` | Nav item, working as as a sub-item and as a link |
 
 ```html
-<bx-side-nav aria-label="Side navigation" expanded>
-  <bx-side-nav-items>
-    <bx-side-nav-menu title="L0 menu">
-      <bx-side-nav-menu-item href="www.ibm.com">
+<cds-side-nav aria-label="Side navigation" expanded>
+  <cds-side-nav-items>
+    <cds-side-nav-menu title="L0 menu">
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-    </bx-side-nav-menu>
-    <bx-side-nav-menu title="L0 menu">
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+    </cds-side-nav-menu>
+    <cds-side-nav-menu title="L0 menu">
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item active aria-current="page" href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item active aria-current="page" href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-    </bx-side-nav-menu>
-    <bx-side-nav-menu title="L0 menu">
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+    </cds-side-nav-menu>
+    <cds-side-nav-menu title="L0 menu">
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-      <bx-side-nav-menu-item href="www.ibm.com">
+      </cds-side-nav-menu-item>
+      <cds-side-nav-menu-item href="www.ibm.com">
         L0 menu item
-      </bx-side-nav-menu-item>
-    </bx-side-nav-menu>
-    <bx-side-nav-divider></bx-side-nav-divider>
-    <bx-side-nav-link href="javascript:void(0)">L0 link</bx-side-nav-link>
-    <bx-side-nav-link href="javascript:void(0)">L0 link</bx-side-nav-link>
-  </bx-side-nav-items>
-</bx-side-nav>
+      </cds-side-nav-menu-item>
+    </cds-side-nav-menu>
+    <cds-side-nav-divider></cds-side-nav-divider>
+    <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+    <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+  </cds-side-nav-items>
+</cds-side-nav>
 ```
 
 ### Expanding/collapsing
 
-`<bx-side-nav>` has `expanded` attribute to make it expanded. In its collapsed
+`<cds-side-nav>` has `expanded` attribute to make it expanded. In its collapsed
 state, hovering over the side nav expands it temporarily.
 
-`<bx-side-nav>` can be made non-collapsible, by setting `fixed` attribute.
+`<cds-side-nav>` can be made non-collapsible, by setting `fixed` attribute.
 
 ### Selecting a nav item
 
-Unlike `<bx-dropdown>`, etc., user gesture of side nav item won't update the
+Unlike `<cds-dropdown>`, etc., user gesture of side nav item won't update the
 selection by itself. The assumption is that following the link in
 `<side-nav-link>`/`<side-nav-menu-item>` triggers routing in application, and
 application chooses which `<side-nav-link>`/`<side-nav-menu-item>` to set
@@ -166,94 +165,94 @@ application chooses which `<side-nav-link>`/`<side-nav-menu-item>` to set
 
 ### Using with header nav
 
-If `<bx-side-nav>` is used along with header (`<bx-header>`), the side nav
+If `<cds-side-nav>` is used along with header (`<cds-header>`), the side nav
 should be pushed down. To do that, add below style to your application:
 
 ```css
-bx-header ~ bx-side-nav {
+cds-header ~ cds-side-nav {
   margin-top: 3rem;
   height: calc(100% - 3rem);
 }
 ```
 
-### `<bx-side-nav>` attributes and properties
+### `<cds-side-nav>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-side-nav expanded>`) and `false` means not setting the attribute (e.g.
-`<bx-side-nav>` without `expanded` attribute).
+`<cds-side-nav expanded>`) and `false` means not setting the attribute (e.g.
+`<cds-side-nav>` without `expanded` attribute).
 
-<Props of="bx-side-nav" />
+<Props of="cds-side-nav" />
 
-### `<bx-side-nav-link>` attributes and properties
+### `<cds-side-nav-link>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-side-nav-link active>`) and `false` means not setting the attribute (e.g.
-`<bx-side-nav-link>` without `active` attribute).
+`<cds-side-nav-link active>`) and `false` means not setting the attribute (e.g.
+`<cds-side-nav-link>` without `active` attribute).
 
-<Props of="bx-side-nav-link" />
+<Props of="cds-side-nav-link" />
 
-### `<bx-side-nav-menu>` attributes and properties
+### `<cds-side-nav-menu>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-side-nav-menu active>`) and `false` means not setting the attribute (e.g.
-`<bx-side-nav-menu>` without `active` attribute).
+`<cds-side-nav-menu active>`) and `false` means not setting the attribute (e.g.
+`<cds-side-nav-menu>` without `active` attribute).
 
-<Props of="bx-side-nav-menu" />
+<Props of="cds-side-nav-menu" />
 
-### `<bx-side-nav-menu-item>` attributes and properties
+### `<cds-side-nav-menu-item>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-side-nav-menu-item active>`) and `false` means not setting the attribute
-(e.g. `<bx-side-nav-menu-item>` without `active` attribute).
+`<cds-side-nav-menu-item active>`) and `false` means not setting the attribute
+(e.g. `<cds-side-nav-menu-item>` without `active` attribute).
 
-<Props of="bx-side-nav-menu-item" />
+<Props of="cds-side-nav-menu-item" />
 
 ## Header nav
 
 Header nav in UI Shell consists of the following components:
 
-| Tag                       | Description                                   |
-| ------------------------- | --------------------------------------------- |
-| `<bx-header>`             | The top-level container                       |
-| `<bx-header-nav>`         | The nav bar                                   |
-| `<bx-header-nav-item>`    | Nav item                                      |
-| `<bx-header-menu>`        | Nav item, working as a container of sub-items |
-| `<bx-header-menu-item>`   | Nav item, working as as a sub-item            |
-| `<bx-header-menu-button>` | The expando button for side nav               |
-| `<bx-header-name>`        | The UI to show product name                   |
+| Tag                        | Description                                   |
+| -------------------------- | --------------------------------------------- |
+| `<cds-header>`             | The top-level container                       |
+| `<cds-header-nav>`         | The nav bar                                   |
+| `<cds-header-nav-item>`    | Nav item                                      |
+| `<cds-header-menu>`        | Nav item, working as a container of sub-items |
+| `<cds-header-menu-item>`   | Nav item, working as as a sub-item            |
+| `<cds-header-menu-button>` | The expando button for side nav               |
+| `<cds-header-name>`        | The UI to show product name                   |
 
 <Preview withToolbar>
   <Story id="components-ui-shell--header" />
 </Preview>
 
-### `<bx-header-nav>` attributes and properties
+### `<cds-header-nav>` attributes and properties
 
-<Props of="bx-header-nav" />
+<Props of="cds-header-nav" />
 
-### `<bx-header-nav-item>` attributes and properties
+### `<cds-header-nav-item>` attributes and properties
 
-<Props of="bx-header-nav-item" />
+<Props of="cds-header-nav-item" />
 
-### `<bx-header-menu>` attributes and properties
+### `<cds-header-menu>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-header-menu expanded>`) and `false` means not setting the attribute (e.g.
-`<bx-header-menu>` without `expanded` attribute).
+`<cds-header-menu expanded>`) and `false` means not setting the attribute (e.g.
+`<cds-header-menu>` without `expanded` attribute).
 
-<Props of="bx-header-menu" />
+<Props of="cds-header-menu" />
 
-### `<bx-header-menu-button>` attributes and properties
+### `<cds-header-menu-button>` attributes and properties
 
 Note: For `boolean` attributes, `true` means simply setting the attribute (e.g.
-`<bx-header-menu-button active>`) and `false` means not setting the attribute
-(e.g. `<bx-header-menu-button>` without `active` attribute).
+`<cds-header-menu-button active>`) and `false` means not setting the attribute
+(e.g. `<cds-header-menu-button>` without `active` attribute).
 
-<Props of="bx-header-menu-button" />
+<Props of="cds-header-menu-button" />
 
-### `<bx-header-menu-item>` attributes and properties
+### `<cds-header-menu-item>` attributes and properties
 
-<Props of="bx-header-menu-item" />
+<Props of="cds-header-menu-item" />
 
-### `<bx-header-name>` attributes and properties
+### `<cds-header-name>` attributes and properties
 
-<Props of="bx-header-name" />
+<Props of="cds-header-name" />
diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss
index 0d52b2d2cab..b9d60e24183 100644
--- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss
+++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.scss
@@ -1,41 +1,27 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import 'carbon-components/scss/components/ui-shell/functions';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/ui-shell/functions';
 
 /* stylelint-disable selector-type-no-unknown */
-bx-header ~ bx-side-nav {
-  margin-top: 3rem;
-  height: calc(100% - 3rem);
+#{$prefix}-header ~ #{$prefix}-side-nav {
+  margin-top: $spacing-09;
+  height: calc(100% - $spacing-09);
 }
 
-.bx-ce-demo-devenv--container {
+.#{$prefix}-ce-demo-devenv--container {
   // Ref: https://github.com/carbon-design-system/carbon/blob/v10.10.0/packages/components/src/components/ui-shell/_side-nav.scss#L82
   will-change: margin-left;
   transition: margin-left 0.11s cubic-bezier(0.2, 0, 1, 0.9);
 
-  @include carbon--breakpoint('lg') {
-    margin-left: mini-units(32);
-  }
-}
-
-.bx-ce-demo-devenv--with-rail .bx-ce-demo-devenv--container {
-  margin-left: mini-units(6);
-}
-
-.bx-ce-demo-devenv--rail-expanded .bx-ce-demo-devenv--container {
-  @include carbon--breakpoint('lg') {
-    margin-left: mini-units(32);
-  }
-}
-
-.bx-ce-demo-devenv--with-side-nav-for-header .bx-ce-demo-devenv--container {
-  @include carbon--breakpoint('lg') {
-    margin-left: 0;
+  @include breakpoint('lg') {
+    margin-left: 16rem;
   }
 }
diff --git a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
index 9c3d01bcf9f..02697439972 100644
--- a/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
+++ b/packages/carbon-web-components/src/components/ui-shell/ui-shell-story.ts
@@ -7,379 +7,1027 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { boolean, select } from '@storybook/addon-knobs';
+import { html } from 'lit';
 // Below path will be there when an application installs `@carbon/web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
 import Fade16 from '@carbon/web-components/es/icons/fade/16';
-import contentStyles from 'carbon-components/scss/components/ui-shell/_content.scss';
-import textNullable from '../../../.storybook/knob-text-nullable';
-import ifNonNull from '../../globals/directives/if-non-null';
+import Search20 from '@carbon/web-components/es/icons/search/20';
+import Notification20 from '@carbon/web-components/es/icons/notification/20';
+import SwitcherIcon20 from '@carbon/web-components/es/icons/switcher/20';
+import contentStyles from '@carbon/styles/scss/components/ui-shell/content/_content.scss';
 import { SIDE_NAV_COLLAPSE_MODE, SIDE_NAV_USAGE_MODE } from './side-nav';
-import './side-nav-items';
-import './side-nav-link';
-import './side-nav-divider';
-import './side-nav-menu';
-import './side-nav-menu-item';
-import './header';
-import './header-nav';
-import './header-nav-item';
-import './header-menu';
-import './header-menu-item';
-import './header-menu-button';
-import './header-name';
+import { classMap } from 'lit/directives/class-map.js';
+import './index';
+import '../skip-to-content';
+import '../modal/modal';
+import '../button/button';
 import styles from './ui-shell-story.scss';
 import storyDocs from './ui-shell-story.mdx';
+import { prefix } from '../../globals/settings';
 
-const collapseModes = {
-  Responsive: null,
-  [`Fixed (${SIDE_NAV_COLLAPSE_MODE.FIXED})`]: SIDE_NAV_COLLAPSE_MODE.FIXED,
-  [`Rail (${SIDE_NAV_COLLAPSE_MODE.RAIL})`]: SIDE_NAV_COLLAPSE_MODE.RAIL,
-};
-
-const usageModes = {
-  Regular: null,
-  [`For header nav (${SIDE_NAV_USAGE_MODE.HEADER_NAV})`]:
-    SIDE_NAV_USAGE_MODE.HEADER_NAV,
-};
-
-const updateRailExpanded = ({
-  collapseMode,
-  expanded,
-  usageMode = SIDE_NAV_USAGE_MODE.REGULAR,
-}) => {
-  document.body.classList.toggle(
-    'bx-ce-demo-devenv--with-rail',
-    collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL
-  );
-  document.body.classList.toggle(
-    'bx-ce-demo-devenv--rail-expanded',
-    collapseMode === SIDE_NAV_COLLAPSE_MODE.RAIL && expanded
-  );
-  document.body.classList.toggle(
-    'bx-ce-demo-devenv--with-side-nav-for-header',
-    usageMode === SIDE_NAV_USAGE_MODE.HEADER_NAV
-  );
-};
+const linksHref = 'https://www.carbondesignsystem.com/';
 
-const StoryContent = () => html`
-  <style type="text/css">
-    ${contentStyles.cssText}
-  </style>
-  <main class="bx--content bx-ce-demo-devenv--ui-shell-content">
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--offset-lg-3 bx--col-lg-13">
-          <h2>Purpose and function</h2>
-          <p>
-            The shell is perhaps the most crucial piece of any UI built with
-            Carbon. It contains the shared navigation framework for the entire
-            design system and ties the products in IBM’s portfolio together in a
-            cohesive and elegant way. The shell is the home of the topmost
-            navigation, where users can quickly and dependably gain their
-            bearings and move between pages.
-            <br />
-            <br />
-            The shell was designed with maximum flexibility built in, to serve
-            the needs of a broad range of products and users. Adopting the shell
-            ensures compliance with IBM design standards, simplifies development
-            efforts, and provides great user experiences. All IBM products built
-            with Carbon are required to use the shell’s header.
-            <br />
-            <br />
-            To better understand the purpose and function of the UI shell,
-            consider the “shell” of MacOS, which contains the Apple menu,
-            top-level navigation, and universal, OS-level controls at the top of
-            the screen, as well as a universal dock along the bottom or side of
-            the screen. The Carbon UI shell is roughly analogous in function to
-            these parts of the Mac UI. For example, the app switcher portion of
-            the shell can be compared to the dock in MacOS.
-          </p>
-          <h2>Header responsive behavior</h2>
-          <p>
-            As a header scales down to fit smaller screen sizes, headers with
-            persistent side nav menus should have the side nav collapse into
-            “hamburger” menu. See the example to better understand responsive
-            behavior of the header.
-          </p>
-          <h2>Secondary navigation</h2>
-          <p>
-            The side-nav contains secondary navigation and fits below the
-            header. It can be configured to be either fixed-width or flexible,
-            with only one level of nested items allowed. Both links and category
-            lists can be used in the side-nav and may be mixed together. There
-            are several configurations of the side-nav, but only one
-            configuration should be used per product section. If tabs are needed
-            on a page when using a side-nav, then the tabs are secondary in
-            hierarchy to the side-nav.
-          </p>
+const StoryContent = ({ useResponsiveOffset = true }) => {
+  const firstColumnClasses = classMap({
+    [`${prefix}--col-lg-13`]: true,
+    [`${prefix}--offset-lg-3`]: useResponsiveOffset,
+  });
+  const toggleButton = () => {
+    document.querySelector('cds-modal')?.toggleAttribute('open');
+  };
+  return html`
+    <style type="text/css">
+      ${contentStyles.cssText}
+    </style>
+    <main class="${prefix}--content ${prefix}-ce-demo-devenv--ui-shell-content">
+      <div class="${prefix}--grid">
+        <div class="${prefix}--row">
+          <div
+            class="${firstColumnClasses}"
+            style="${!useResponsiveOffset ? `margin-left: 16rem;` : ''}">
+            <h2 style="margin: 0 0 30px">Purpose and function</h2>
+            <p>
+              The shell is perhaps the most crucial piece of any UI built with
+              <a href="www.carbondesignsystem.com"> Carbon</a>. It contains the
+              shared navigation framework for the entire design system and ties
+              the products in IBM’s portfolio together in a cohesive and elegant
+              way. The shell is the home of the topmost navigation, where users
+              can quickly and dependably gain their bearings and move between
+              pages.
+              <br />
+              <br />
+              The shell was designed with maximum flexibility built in, to serve
+              the needs of a broad range of products and users. Adopting the
+              shell ensures compliance with IBM design standards, simplifies
+              development efforts, and provides great user experiences. All IBM
+              products built with Carbon are required to use the shell’s header.
+              <br />
+              <br />
+              To better understand the purpose and function of the UI shell,
+              consider the “shell” of MacOS, which contains the Apple menu,
+              top-level navigation, and universal, OS-level controls at the top
+              of the screen, as well as a universal dock along the bottom or
+              side of the screen. The Carbon UI shell is roughly analogous in
+              function to these parts of the Mac UI. For example, the app
+              switcher portion of the shell can be compared to the dock in
+              MacOS.
+            </p>
+            <h2 style="margin: 30px 0px">Header responsive behavior</h2>
+            <p>
+              As a header scales down to fit smaller screen sizes, headers with
+              persistent side nav menus should have the side nav collapse into
+              “hamburger” menu. See the example to better understand responsive
+              behavior of the header.
+            </p>
+            <h2 style="margin: 30px 0px">Secondary navigation</h2>
+            <p>
+              The side-nav contains secondary navigation and fits below the
+              header. It can be configured to be either fixed-width or flexible,
+              with only one level of nested items allowed. Both links and
+              category lists can be used in the side-nav and may be mixed
+              together. There are several configurations of the side-nav, but
+              only one configuration should be used per product section. If tabs
+              are needed on a page when using a side-nav, then the tabs are
+              secondary in hierarchy to the side-nav.
+            </p>
+            <cds-modal>
+              <cds-modal-header>
+                <cds-modal-close-button></cds-modal-close-button>
+                <cds-modal-label>Account resources</cds-modal-label>
+                <cds-modal-heading>Add a custom domain</cds-modal-heading>
+              </cds-modal-header>
+              <cds-modal-body>
+                <cds-modal-body-content description>
+                  Custom domains direct requests for your apps in this Cloud
+                  Foundry organization to a URL that you own. A custom domain
+                  can be a shared domain, a shared subdomain, or a shared domain
+                  and host.
+                </cds-modal-body-content>
+              </cds-modal-body>
+              <cds-modal-footer>
+                <cds-modal-footer-button kind="secondary" data-modal-close
+                  >Cancel</cds-modal-footer-button
+                >
+                <cds-modal-footer-button>Add</cds-modal-footer-button>
+              </cds-modal-footer>
+            </cds-modal>
+            <cds-button @click="${toggleButton}">Launch modal</cds-button>
+          </div>
         </div>
       </div>
-    </div>
-  </main>
-`;
-
-export const sideNav = (args) => {
-  const { collapseMode, expanded } = args?.['bx-side-nav'] ?? {};
-  const { href } = args?.['bx-side-nav-menu-item'] ?? {};
-  updateRailExpanded({ collapseMode, expanded });
+    </main>
+  `;
+};
+
+export const FixedSideNav = () => {
   const result = html`
     <style>
       ${styles}
     </style>
-    <bx-side-nav
+    <cds-side-nav
+      is-not-child-of-header
+      usage-mode="${SIDE_NAV_USAGE_MODE.REGULAR}"
       aria-label="Side navigation"
-      collapse-mode="${ifNonNull(collapseMode)}"
-      ?expanded=${expanded}>
-      <bx-side-nav-items>
-        <bx-side-nav-menu title="L0 menu">
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+      collapse-mode="${SIDE_NAV_COLLAPSE_MODE.FIXED}"
+      expanded>
+      <cds-side-nav-items>
+        <cds-side-nav-menu title="L0 menu">
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-menu title="L0 menu">
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="L0 menu">
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item
             active
             aria-current="page"
-            href="${ifNonNull(href)}">
+            href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-menu title="L0 menu">
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="L0 menu">
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-divider></bx-side-nav-divider>
-        <bx-side-nav-link href="javascript:void(0)">L0 link</bx-side-nav-link>
-        <bx-side-nav-link href="javascript:void(0)">L0 link</bx-side-nav-link>
-      </bx-side-nav-items>
-    </bx-side-nav>
-    ${StoryContent()}
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+        <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+      </cds-side-nav-items>
+    </cds-side-nav>
+    ${StoryContent({ useResponsiveOffset: false })}
   `;
   (result as any).hasMainTag = true;
   return result;
 };
 
-sideNav.storyName = 'Side nav';
-
-sideNav.parameters = {
-  knobs: {
-    'bx-side-nav': () => ({
-      expanded: boolean('Expanded (expanded)', true),
-      collapseMode: select(
-        'Collapse mode (collapse-mode)',
-        collapseModes,
-        null
-      ),
-    }),
-    'bx-side-nav-menu-item': () => ({
-      href: textNullable('Link href (href)', 'javascript:void 0'), // eslint-disable-line no-script-url
-    }),
-  },
-};
+FixedSideNav.storyName = 'Fixed SideNav';
 
-export const sideNavWithIcons = (args) => {
-  const { collapseMode, expanded } = args?.['bx-side-nav'] ?? {};
-  const { href } = args?.['bx-side-nav-menu-item'] ?? {};
-  updateRailExpanded({ collapseMode, expanded });
+export const FixedSideNavDivider = () => {
   const result = html`
     <style>
       ${styles}
     </style>
-    <bx-side-nav
+    <cds-side-nav
+      is-not-child-of-header
       aria-label="Side navigation"
-      collapse-mode="${ifNonNull(collapseMode)}"
-      ?expanded=${expanded}>
-      <bx-side-nav-items>
-        <bx-side-nav-menu title="L0 menu">
-          ${Fade16({ slot: 'title-icon' })}
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+      collapse-mode="${SIDE_NAV_COLLAPSE_MODE.FIXED}"
+      expanded>
+      <cds-side-nav-items>
+        <cds-side-nav-menu title="L0 menu">
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-menu title="L0 menu">
-          ${Fade16({ slot: 'title-icon' })}
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="L0 menu">
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item
             active
             aria-current="page"
-            href="${ifNonNull(href)}">
+            href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-menu title="L0 menu">
-          ${Fade16({ slot: 'title-icon' })}
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="L0 menu">
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
             L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-divider></bx-side-nav-divider>
-        <bx-side-nav-link href="javascript:void(0)"
-          >${Fade16({ slot: 'title-icon' })}L0 link</bx-side-nav-link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-divider></cds-side-nav-divider>
+        <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+        <cds-side-nav-link href="javascript:void(0)">L0 link</cds-side-nav-link>
+      </cds-side-nav-items>
+    </cds-side-nav>
+    ${StoryContent({ useResponsiveOffset: false })}
+  `;
+  (result as any).hasMainTag = true;
+  return result;
+};
+
+FixedSideNavDivider.storyName = 'Fixed SideNav w/ Divider';
+
+export const FixedSideNavIcons = () => {
+  const result = html`
+    <style>
+      ${styles}
+    </style>
+    <cds-side-nav
+      is-not-child-of-header
+      aria-label="Side navigation"
+      collapse-mode="${SIDE_NAV_COLLAPSE_MODE.FIXED}"
+      expanded>
+      <cds-side-nav-items>
+        <cds-side-nav-menu title="Category title">
+          ${Fade16({ slot: 'title-icon' })}
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="Category title">
+          ${Fade16({ slot: 'title-icon' })}
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item
+            active
+            aria-current="page"
+            href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="Category title">
+          ${Fade16({ slot: 'title-icon' })}
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-link href="javascript:void(0)"
+          >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
         >
-        <bx-side-nav-link href="javascript:void(0)"
-          >${Fade16({ slot: 'title-icon' })}L0 link</bx-side-nav-link
+        <cds-side-nav-link href="javascript:void(0)"
+          >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
         >
-      </bx-side-nav-items>
-    </bx-side-nav>
-    ${StoryContent()}
+      </cds-side-nav-items>
+    </cds-side-nav>
+    ${StoryContent({ useResponsiveOffset: false })}
   `;
   (result as any).hasMainTag = true;
   return result;
 };
 
-sideNavWithIcons.storyName = 'Side nav with icons';
+FixedSideNavIcons.storyName = 'Fixed SideNav w/ Icons';
 
-sideNavWithIcons.parameters = {
-  knobs: sideNav.parameters.knobs,
+export const HeaderBase = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+    </cds-header>`;
 };
 
-export const header = (args) => {
-  const { collapseMode, expanded, usageMode } = args?.['bx-side-nav'] ?? {};
-  const { href } = args?.['bx-side-nav-menu-item'] ?? {};
-  updateRailExpanded({ collapseMode, expanded, usageMode });
-  const handleButtonToggle = (event) => {
-    updateRailExpanded({
-      collapseMode,
-      expanded: event.detail.active,
-      usageMode,
-    });
-  };
+export const HeaderBaseWActions = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="App Switcher"
+          tooltip-text="App Switcher"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+    </cds-header>`;
+};
+
+HeaderBaseWActions.storyName = 'Header Base w/ Actions';
+
+export const HeaderBaseWActionsRightPanel = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          panel-id="notification-panel"
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="App Switcher"
+          tooltip-text="App Switcher"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+      <cds-header-panel
+        id="notification-panel"
+        expanded
+        aria-label="Header Panel"></cds-header-panel>
+    </cds-header>`;
+};
+
+HeaderBaseWActionsRightPanel.storyName =
+  'Header Base w/ Actions and Right Panel';
+
+export const HeaderBaseWActionsSwitcher = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          button-label-active="Close switcher"
+          button-label-inactive="Open switcher"
+          tooltip-text="Open switcher"
+          panel-id="switcher-panel"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+      <cds-header-panel id="switcher-panel" aria-label="Header Panel">
+        <cds-switcher aria-label="Switcher Container">
+          <cds-switcher-item aria-label="Link 1" href="#"
+            >Link 1</cds-switcher-item
+          >
+          <cds-switcher-divider></cds-switcher-divider>
+          <cds-switcher-item aria-label="Link 2" href="#"
+            >Link 2</cds-switcher-item
+          >
+          <cds-switcher-item aria-label="Link 3" href="#"
+            >Link 3</cds-switcher-item
+          >
+          <cds-switcher-item aria-label="Link 4" href="#"
+            >Link 4</cds-switcher-item
+          >
+          <cds-switcher-item aria-label="Link 5" href="#"
+            >Link 5</cds-switcher-item
+          >
+          <cds-switcher-divider></cds-switcher-divider>
+          <cds-switcher-item aria-label="Link 6" href="#"
+            >Link 6</cds-switcher-item
+          >
+        </cds-switcher>
+      </cds-header-panel>
+    </cds-header>
+    ${StoryContent({ useResponsiveOffset: true })}`;
+};
+
+HeaderBaseWActionsSwitcher.storyName = 'Header Base w/ Actions and Switcher';
+
+export const HeaderBaseWNavigationActionsAndSideNav = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-menu-button
+        button-label-active="Close menu"
+        button-label-inactive="Open menu"></cds-header-menu-button>
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <cds-header-nav menu-bar-label="IBM [Platform]">
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 1</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 2</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 3</cds-header-nav-item
+        >
+        <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 1</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 2</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 3</cds-header-menu-item
+          >
+        </cds-header-menu>
+      </cds-header-nav>
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="App Switcher"
+          tooltip-text="App Switcher"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+      <cds-side-nav
+        aria-label="Side navigation"
+        collapse-mode="${SIDE_NAV_COLLAPSE_MODE.RESPONSIVE}">
+        <cds-side-nav-items>
+          <cds-header-side-nav-items has-divider>
+            <cds-side-nav-link href="javascript:void(0)">
+              Link 1
+            </cds-side-nav-link>
+            <cds-side-nav-link href="javascript:void(0)">
+              Link 2
+            </cds-side-nav-link>
+            <cds-side-nav-link href="javascript:void(0)">
+              Link 3
+            </cds-side-nav-link>
+            <cds-side-nav-menu title="Link 4">
+              <cds-side-nav-menu-item href="${linksHref}">
+                Sub-link 1
+              </cds-side-nav-menu-item>
+              <cds-side-nav-menu-item href="${linksHref}">
+                Sub-link 2
+              </cds-side-nav-menu-item>
+              <cds-side-nav-menu-item href="${linksHref}">
+                Sub-link 3
+              </cds-side-nav-menu-item>
+            </cds-side-nav-menu>
+          </cds-header-side-nav-items>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item aria-current="page" href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item active href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-link href="javascript:void(0)"
+            >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
+          >
+          <cds-side-nav-link href="javascript:void(0)"
+            >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
+          >
+        </cds-side-nav-items>
+      </cds-side-nav>
+    </cds-header>
+    ${StoryContent({ useResponsiveOffset: true })}`;
+};
+
+HeaderBaseWNavigationActionsAndSideNav.storyName =
+  'Header Base w/ Navigation, Actions and SideNav';
+
+export const HeaderBaseWNavigationActions = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-menu-button
+        button-label-active="Close menu"
+        button-label-inactive="Open menu"></cds-header-menu-button>
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <cds-header-nav menu-bar-label="IBM [Platform]">
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 1</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 2</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 3</cds-header-nav-item
+        >
+        <cds-header-menu is-active menu-label="Link 4" trigger-content="Link 4">
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 1</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 2</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 3</cds-header-menu-item
+          >
+        </cds-header-menu>
+      </cds-header-nav>
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="App Switcher"
+          tooltip-text="App Switcher"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+      <cds-side-nav
+        is-not-persistent
+        aria-label="Side navigation"
+        collapse-mode="${SIDE_NAV_COLLAPSE_MODE.RESPONSIVE}">
+        <cds-side-nav-items>
+          <cds-side-nav-link href="javascript:void(0)">
+            Link 1
+          </cds-side-nav-link>
+          <cds-side-nav-link href="javascript:void(0)">
+            Link 2
+          </cds-side-nav-link>
+          <cds-side-nav-link href="javascript:void(0)">
+            Link 3
+          </cds-side-nav-link>
+          <cds-side-nav-menu title="Link 4">
+            <cds-side-nav-menu-item href="${linksHref}">
+              Sub-link 1
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Sub-link 2
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Sub-link 3
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+        </cds-side-nav-items>
+      </cds-side-nav>
+    </cds-header>`;
+};
+
+HeaderBaseWNavigationActions.storyName =
+  'Header Base w/ Navigation and Actions';
+
+export const HeaderBaseWNavigation = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-menu-button
+        button-label-active="Close menu"
+        button-label-inactive="Open menu"></cds-header-menu-button>
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <cds-header-nav menu-bar-label="IBM [Platform]">
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 1</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 2</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 3</cds-header-nav-item
+        >
+        <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 1</cds-header-menu-item
+          >
+          <cds-header-menu-item is-active href="javascript:void 0"
+            >Sub-link 2</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 3</cds-header-menu-item
+          >
+        </cds-header-menu>
+      </cds-header-nav>
+      <cds-side-nav
+        is-not-persistent
+        aria-label="Side navigation"
+        collapse-mode="${SIDE_NAV_COLLAPSE_MODE.RESPONSIVE}">
+        <cds-side-nav-items>
+          <cds-side-nav-link href="javascript:void(0)">
+            Link 1
+          </cds-side-nav-link>
+          <cds-side-nav-link href="javascript:void(0)">
+            Link 2
+          </cds-side-nav-link>
+          <cds-side-nav-link href="javascript:void(0)">
+            Link 3
+          </cds-side-nav-link>
+          <cds-side-nav-menu title="Link 4">
+            <cds-side-nav-menu-item href="${linksHref}">
+              Sub-link 1
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Sub-link 2
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Sub-link 3
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+        </cds-side-nav-items>
+      </cds-side-nav>
+    </cds-header>`;
+};
+
+HeaderBaseWNavigation.storyName = 'Header Base w/ Navigation';
+
+export const HeaderBaseWSideNav = () => {
   const result = html`
     <style>
       ${styles}
     </style>
-    <bx-header aria-label="IBM Platform Name">
-      <bx-header-menu-button
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-menu-button
         button-label-active="Close menu"
-        button-label-inactive="Open menu"
-        @bx-header-menu-button-toggled="${handleButtonToggle}"></bx-header-menu-button>
-      <bx-header-name href="javascript:void 0" prefix="IBM"
-        >[Platform]</bx-header-name
+        button-label-inactive="Open menu"></cds-header-menu-button>
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
       >
-      <bx-header-nav menu-bar-label="IBM [Platform]">
-        <bx-header-nav-item href="javascript:void 0">Link 1</bx-header-nav-item>
-        <bx-header-nav-item href="javascript:void 0">Link 2</bx-header-nav-item>
-        <bx-header-nav-item href="javascript:void 0">Link 3</bx-header-nav-item>
-        <bx-header-menu menu-label="Link 4" trigger-content="Link 4">
-          <bx-header-menu-item href="javascript:void 0"
-            >Sub-link 1</bx-header-menu-item
+      <cds-side-nav
+        aria-label="Side navigation"
+        collapse-mode="${SIDE_NAV_COLLAPSE_MODE.RESPONSIVE}">
+        <cds-side-nav-items>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item
+              active
+              aria-current="page"
+              href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-link href="javascript:void(0)"
+            >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
           >
-          <bx-header-menu-item href="javascript:void 0"
-            >Sub-link 2</bx-header-menu-item
+          <cds-side-nav-link href="javascript:void(0)"
+            >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
           >
-          <bx-header-menu-item href="javascript:void 0"
-            >Sub-link 3</bx-header-menu-item
-          >
-        </bx-header-menu>
-      </bx-header-nav>
-    </bx-header>
-    <bx-side-nav
+        </cds-side-nav-items>
+      </cds-side-nav>
+    </cds-header>
+    ${StoryContent({ useResponsiveOffset: true })}
+  `;
+  (result as any).hasMainTag = true;
+  return result;
+};
+
+HeaderBaseWSideNav.storyName = 'Header Base w/ SideNav';
+
+export const HeaderBaseWSkipToContent = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-skip-to-content></cds-skip-to-content>
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="App Switcher"
+          tooltip-text="App Switcher"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+    </cds-header>
+    ${StoryContent({ useResponsiveOffset: true })}`;
+};
+
+HeaderBaseWSkipToContent.storyName = 'Header Base w/ SkipToContent';
+
+export const SideNavRail = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-side-nav
       aria-label="Side navigation"
-      collapse-mode="${ifNonNull(collapseMode)}"
-      ?expanded=${expanded}
-      usage-mode="${ifNonNull(usageMode)}">
-      <bx-side-nav-items>
-        <bx-side-nav-menu title="L0 menu">
-          ${Fade16({ slot: 'title-icon' })}
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-menu title="L0 menu">
+      collapse-mode="${SIDE_NAV_COLLAPSE_MODE.RAIL}">
+      <cds-side-nav-items>
+        <cds-side-nav-menu title="Category title">
           ${Fade16({ slot: 'title-icon' })}
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item
             active
             aria-current="page"
-            href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-menu title="L0 menu">
+            href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="Category title">
           ${Fade16({ slot: 'title-icon' })}
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-          <bx-side-nav-menu-item href="${ifNonNull(href)}">
-            L0 menu item
-          </bx-side-nav-menu-item>
-        </bx-side-nav-menu>
-        <bx-side-nav-divider></bx-side-nav-divider>
-        <bx-side-nav-link href="javascript:void(0)"
-          >${Fade16({ slot: 'title-icon' })}L0 link</bx-side-nav-link
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-menu title="Category title">
+          ${Fade16({ slot: 'title-icon' })}
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Link
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-link href="javascript:void(0)"
+          >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
+        >
+        <cds-side-nav-link href="javascript:void(0)"
+          >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
+        >
+      </cds-side-nav-items>
+    </cds-side-nav>
+    ${StoryContent({ useResponsiveOffset: true })}`;
+};
+
+SideNavRail.storyName = 'SideNav Rail';
+
+export const SideNavRailWHeader = () => {
+  return html` <style>
+      ${styles}
+    </style>
+    <cds-header aria-label="IBM Platform Name">
+      <cds-header-menu-button
+        button-label-active="Close menu"
+        button-label-inactive="Open menu"></cds-header-menu-button>
+      <cds-header-name href="javascript:void 0" prefix="IBM"
+        >[Platform]</cds-header-name
+      >
+      <cds-header-nav menu-bar-label="IBM [Platform]">
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 1</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 2</cds-header-nav-item
+        >
+        <cds-header-nav-item href="javascript:void 0"
+          >Link 3</cds-header-nav-item
+        >
+        <cds-header-menu menu-label="Link 4" trigger-content="Link 4">
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 1</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 2</cds-header-menu-item
+          >
+          <cds-header-menu-item href="javascript:void 0"
+            >Sub-link 3</cds-header-menu-item
+          >
+        </cds-header-menu>
+      </cds-header-nav>
+      <div class="${prefix}--header__global">
+        <cds-header-global-action aria-label="Search" tooltip-text="Search">
+          ${Search20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="Notification"
+          tooltip-text="Notification">
+          ${Notification20({ slot: 'icon' })}
+        </cds-header-global-action>
+        <cds-header-global-action
+          aria-label="App Switcher"
+          tooltip-text="App Switcher"
+          tooltip-alignment="right">
+          ${SwitcherIcon20({ slot: 'icon' })}
+        </cds-header-global-action>
+      </div>
+      <cds-side-nav
+        aria-label="Side navigation"
+        collapse-mode="${SIDE_NAV_COLLAPSE_MODE.RAIL}">
+        <cds-side-nav-items>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item
+              active
+              aria-current="page"
+              href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-menu title="Category title">
+            ${Fade16({ slot: 'title-icon' })}
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+            <cds-side-nav-menu-item href="${linksHref}">
+              Link
+            </cds-side-nav-menu-item>
+          </cds-side-nav-menu>
+          <cds-side-nav-link href="javascript:void(0)"
+            >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
+          >
+          <cds-side-nav-link href="javascript:void(0)"
+            >${Fade16({ slot: 'title-icon' })}Link</cds-side-nav-link
+          >
+        </cds-side-nav-items>
+      </cds-side-nav>
+    </cds-header>
+    ${StoryContent({ useResponsiveOffset: true })}`;
+};
+
+SideNavRailWHeader.storyName = 'SideNav Rail w/ Header';
+
+export const SideNavWLargeSideNavItems = () => {
+  const result = html`
+    <style>
+      ${styles}
+    </style>
+    <cds-side-nav
+      is-not-child-of-header
+      aria-label="Side navigation"
+      collapse-mode="${SIDE_NAV_COLLAPSE_MODE.FIXED}"
+      expanded>
+      <cds-side-nav-items>
+        <cds-side-nav-menu large title="Large menu">
+          <cds-side-nav-menu-item href="${linksHref}">
+            Menu 1
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Menu 2
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Menu 3
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-link large href="javascript:void(0)"
+          >Large link</cds-side-nav-link
         >
-        <bx-side-nav-link href="javascript:void(0)"
-          >${Fade16({ slot: 'title-icon' })}L0 link</bx-side-nav-link
+        <cds-side-nav-menu large title="Large menu w/icon"
+          >${Fade16({ slot: 'title-icon' })}
+          <cds-side-nav-menu-item href="${linksHref}">
+            Menu 1
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Menu 2
+          </cds-side-nav-menu-item>
+          <cds-side-nav-menu-item href="${linksHref}">
+            Menu 3
+          </cds-side-nav-menu-item>
+        </cds-side-nav-menu>
+        <cds-side-nav-link large href="javascript:void(0)">
+          ${Fade16({ slot: 'title-icon' })} Large link w/icon</cds-side-nav-link
         >
-      </bx-side-nav-items>
-    </bx-side-nav>
-    ${StoryContent()}
+      </cds-side-nav-items>
+    </cds-side-nav>
+    ${StoryContent({ useResponsiveOffset: true })}
   `;
   (result as any).hasMainTag = true;
   return result;
 };
 
-header.parameters = {
-  knobs: {
-    'bx-side-nav': () => ({
-      ...sideNav.parameters.knobs['bx-side-nav'](),
-      usageMode: select('Usage mode (usage-mode)', usageModes, null),
-    }),
-    'bx-side-nav-menu-item': sideNav.parameters.knobs['bx-side-nav-menu-item'],
-  },
-};
+SideNavWLargeSideNavItems.storyName = 'SideNav w/ large side nav items';
 
 export default {
   title: 'Components/UI Shell',
diff --git a/packages/carbon-web-components/src/globals/decorators/carbon-element.ts b/packages/carbon-web-components/src/globals/decorators/carbon-element.ts
index 4f3becc2c8e..127882f9e54 100644
--- a/packages/carbon-web-components/src/globals/decorators/carbon-element.ts
+++ b/packages/carbon-web-components/src/globals/decorators/carbon-element.ts
@@ -1,69 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2023
+ * Copyright IBM Corp. 2019, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-/**
- * @license
- * Copyright (c) 2017 The Polymer Project Authors. All rights reserved.
- * This code may only be used under the BSD style license found at
- * http://polymer.github.io/LICENSE.txt
- * The complete set of authors may be found at
- * http://polymer.github.io/AUTHORS.txt
- * The complete set of contributors may be found at
- * http://polymer.github.io/CONTRIBUTORS.txt
- * Code distributed by Google as part of the polymer project is also
- * subject to an additional IP rights grant found at
- * http://polymer.github.io/PATENTS.txt
- */
-
 /*
- * IMPORTANT: For compatibility with tsickle and the Closure Compiler, all
+ * IMPORTANT: For compatibility with tsickle and the Closure JS compiler, all
  * property decorators (but not class decorators) in this file that have
  * an @ExportDecoratedItems annotation must be defined as a regular function,
  * not an arrow function.
  */
-
-import { LitElement } from 'lit-element';
-
 import {
-  PropertyDeclaration,
-  UpdatingElement,
-} from 'lit-element/lib/updating-element';
-
-export type Constructor<T> = {
-  // tslint:disable-next-line:no-any
-  new (...args: any[]): T;
-};
+  Constructor,
+  ClassDescriptor,
+} from '@lit/reactive-element/decorators/base.js';
 
-// From the TC39 Decorators proposal
-interface ClassDescriptor {
-  kind: 'class';
-  elements: ClassElement[];
-  finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
-}
-
-// From the TC39 Decorators proposal
-interface ClassElement {
-  kind: 'field' | 'method';
-  key: PropertyKey;
-  placement: 'static' | 'prototype' | 'own';
-  initializer?: Function;
-  extras?: ClassElement[];
-  finisher?: <T>(clazz: Constructor<T>) => undefined | Constructor<T>;
-  descriptor?: PropertyDescriptor;
-}
+/**
+ * Allow for custom element classes with private constructors
+ */
+type CustomElementClass = Omit<typeof HTMLElement, 'new'>;
 
-const legacyCustomElement = (
-  tagName: string,
-  clazz: Constructor<HTMLElement>
-) => {
+const legacyCustomElement = (tagName: string, clazz: CustomElementClass) => {
   try {
-    window.customElements.define(tagName, clazz);
+    customElements.define(tagName, clazz as CustomElementConstructor);
   } catch (error) {
     console.warn(`Attempting to re-define ${tagName}`);
   }
@@ -72,7 +34,7 @@ const legacyCustomElement = (
   // `Constructor<HTMLElement>` for some reason.
   // `Constructor<HTMLElement>` is helpful to make sure the decorator is
   // applied to elements however.
-  // tslint:disable-next-line:no-any
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return clazz as any;
 };
 
@@ -87,7 +49,7 @@ const standardCustomElement = (
     // This callback is called once the class is otherwise fully defined
     finisher(clazz: Constructor<HTMLElement>) {
       try {
-        window.customElements.define(tagName, clazz);
+        customElements.define(tagName, clazz);
       } catch (error) {
         console.warn(`Attempting to re-define ${tagName}`);
       }
@@ -98,9 +60,9 @@ const standardCustomElement = (
 /**
  * Class decorator factory that defines the decorated class as a custom element.
  *
- * ```
+ * ```js
  * @customElement('my-element')
- * class MyElement {
+ * class MyElement extends LitElement {
  *   render() {
  *     return html``;
  *   }
@@ -108,447 +70,11 @@ const standardCustomElement = (
  * ```
  *
  * @category Decorator
- * @param tagName The name of the custom element to define.
+ * @param tagName The tag name of the custom element to define.
  */
 export const carbonElement =
   (tagName: string) =>
-  (classOrDescriptor: Constructor<HTMLElement> | ClassDescriptor) =>
+  (classOrDescriptor: CustomElementClass | ClassDescriptor) =>
     typeof classOrDescriptor === 'function'
       ? legacyCustomElement(tagName, classOrDescriptor)
-      : standardCustomElement(tagName, classOrDescriptor);
-
-const standardProperty = (
-  options: PropertyDeclaration,
-  element: ClassElement
-) => {
-  // When decorating an accessor, pass it through and add property metadata.
-  // Note, the `hasOwnProperty` check in `createProperty` ensures we don't
-  // stomp over the user's accessor.
-  if (
-    element.kind === 'method' &&
-    element.descriptor &&
-    !('value' in element.descriptor)
-  ) {
-    return {
-      ...element,
-      finisher(clazz: typeof UpdatingElement) {
-        clazz.createProperty(element.key, options);
-      },
-    };
-  } else {
-    // createProperty() takes care of defining the property, but we still
-    // must return some kind of descriptor, so return a descriptor for an
-    // unused prototype field. The finisher calls createProperty().
-    return {
-      kind: 'field',
-      key: Symbol(),
-      placement: 'own',
-      descriptor: {},
-      // When @babel/plugin-proposal-decorators implements initializers,
-      // do this instead of the initializer below. See:
-      // https://github.com/babel/babel/issues/9260 extras: [
-      //   {
-      //     kind: 'initializer',
-      //     placement: 'own',
-      //     initializer: descriptor.initializer,
-      //   }
-      // ],
-      initializer(this: { [key: string]: unknown }) {
-        if (typeof element.initializer === 'function') {
-          this[element.key as string] = element.initializer.call(this);
-        }
-      },
-      finisher(clazz: typeof UpdatingElement) {
-        clazz.createProperty(element.key, options);
-      },
-    };
-  }
-};
-
-const legacyProperty = (
-  options: PropertyDeclaration,
-  proto: Object,
-  name: PropertyKey
-) => {
-  (proto.constructor as typeof UpdatingElement).createProperty(name, options);
-};
-
-/**
- * A property decorator which creates a LitElement property which reflects a
- * corresponding attribute value. A [[`PropertyDeclaration`]] may optionally be
- * supplied to configure property features.
- *
- * This decorator should only be used for public fields. Private or protected
- * fields should use the [[`internalProperty`]] decorator.
- *
- * @example
- * ```ts
- * class MyElement {
- *   @property({ type: Boolean })
- *   clicked = false;
- * }
- * ```
- * @category Decorator
- * @ExportDecoratedItems
- */
-export function property(options?: PropertyDeclaration) {
-  // tslint:disable-next-line:no-any decorator
-  return (protoOrDescriptor: Object | ClassElement, name?: PropertyKey): any =>
-    name !== undefined
-      ? legacyProperty(options!, protoOrDescriptor as Object, name)
-      : standardProperty(options!, protoOrDescriptor as ClassElement);
-}
-
-export interface InternalPropertyDeclaration<Type = unknown> {
-  /**
-   * A function that indicates if a property should be considered changed when
-   * it is set. The function should take the `newValue` and `oldValue` and
-   * return `true` if an update should be requested.
-   */
-  hasChanged?(value: Type, oldValue: Type): boolean;
-}
-
-/**
- * Declares a private or protected property that still triggers updates to the
- * element when it changes.
- *
- * Properties declared this way must not be used from HTML or HTML templating
- * systems, they're solely for properties internal to the element. These
- * properties may be renamed by optimization tools like the Closure Compiler.
- *
- * @category Decorator
- * @deprecated `internalProperty` has been renamed to `state` in lit-element
- *     3.0. Please update to `state` now to be compatible with 3.0.
- */
-export function internalProperty(options?: InternalPropertyDeclaration) {
-  return property({ attribute: false, hasChanged: options?.hasChanged });
-}
-
-/**
- * Declares a private or protected property that still triggers updates to the
- * element when it changes.
- *
- * Properties declared this way must not be used from HTML or HTML templating
- * systems, they're solely for properties internal to the element. These
- * properties may be renamed by optimization tools like the Closure Compiler.
- *
- * @category Decorator
- */
-export const state = (options?: InternalPropertyDeclaration) =>
-  internalProperty(options);
-
-/**
- * A property decorator that converts a class property into a getter that
- * executes a querySelector on the element's renderRoot.
- *
- * @param selector A DOMString containing one or more selectors to match.
- * @param cache An optional boolean which when true performs the DOM query only
- * once and caches the result.
- * @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
- * @example
- *
- * ```ts
- * class MyElement {
- *   @query('#first')
- *   first;
- *
- *   render() {
- *     return html`
- *       <div id="first"></div>
- *       <div id="second"></div>
- *     `;
- *   }
- * }
- * ```
- * @category Decorator
- */
-export function query(selector: string, cache?: boolean) {
-  return (
-    protoOrDescriptor: Object | ClassElement,
-    // tslint:disable-next-line:no-any decorator
-    name?: PropertyKey
-  ): any => {
-    const descriptor = {
-      get(this: LitElement) {
-        return this.renderRoot.querySelector(selector);
-      },
-      enumerable: true,
-      configurable: true,
-    };
-    if (cache) {
-      const prop =
-        name !== undefined ? name : (protoOrDescriptor as ClassElement).key;
-      const key = typeof prop === 'symbol' ? Symbol() : `__${prop}`;
-      descriptor.get = function (this: LitElement) {
-        if (
-          (this as unknown as { [key: string]: Element | null })[
-            key as string
-          ] === undefined
-        ) {
-          (this as unknown as { [key: string]: Element | null })[
-            key as string
-          ] = this.renderRoot.querySelector(selector);
-        }
-        return (this as unknown as { [key: string]: Element | null })[
-          key as string
-        ];
-      };
-    }
-    return name !== undefined
-      ? legacyQuery(descriptor, protoOrDescriptor as Object, name)
-      : standardQuery(descriptor, protoOrDescriptor as ClassElement);
-  };
-}
-
-// Note, in the future, we may extend this decorator to support the use case
-// where the queried element may need to do work to become ready to interact
-// with (e.g. load some implementation code). If so, we might elect to
-// add a second argument defining a function that can be run to make the
-// queried element loaded/updated/ready.
-/**
- * A property decorator that converts a class property into a getter that
- * returns a promise that resolves to the result of a querySelector on the
- * element's renderRoot done after the element's `updateComplete` promise
- * resolves. When the queried property may change with element state, this
- * decorator can be used instead of requiring users to await the
- * `updateComplete` before accessing the property.
- *
- * @param selector A DOMString containing one or more selectors to match.
- * @see: https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector
- * @example
- * ```ts
- * class MyElement {
- *   @queryAsync('#first')
- *   first;
- *
- *   render() {
- *     return html`
- *       <div id="first"></div>
- *       <div id="second"></div>
- *     `;
- *   }
- * }
- *
- * // external usage
- * async doSomethingWithFirst() {
- *  (await aMyElement.first).doSomething();
- * }
- * ```
- * @category Decorator
- */
-export function queryAsync(selector: string) {
-  return (
-    protoOrDescriptor: Object | ClassElement,
-    // tslint:disable-next-line:no-any decorator
-    name?: PropertyKey
-  ): any => {
-    const descriptor = {
-      async get(this: LitElement) {
-        await this.updateComplete;
-        return this.renderRoot.querySelector(selector);
-      },
-      enumerable: true,
-      configurable: true,
-    };
-    return name !== undefined
-      ? legacyQuery(descriptor, protoOrDescriptor as Object, name)
-      : standardQuery(descriptor, protoOrDescriptor as ClassElement);
-  };
-}
-
-/**
- * A property decorator that converts a class property into a getter
- * that executes a querySelectorAll on the element's renderRoot.
- *
- * @param selector A DOMString containing one or more selectors to match.
- * @see:
- * https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll
- * @example
- * ```ts
- * class MyElement {
- *   @queryAll('div')
- *   divs;
- *
- *   render() {
- *     return html`
- *       <div id="first"></div>
- *       <div id="second"></div>
- *     `;
- *   }
- * }
- * ```
- * @category Decorator
- */
-export function queryAll(selector: string) {
-  return (
-    protoOrDescriptor: Object | ClassElement,
-    // tslint:disable-next-line:no-any decorator
-    name?: PropertyKey
-  ): any => {
-    const descriptor = {
-      get(this: LitElement) {
-        return this.renderRoot.querySelectorAll(selector);
-      },
-      enumerable: true,
-      configurable: true,
-    };
-    return name !== undefined
-      ? legacyQuery(descriptor, protoOrDescriptor as Object, name)
-      : standardQuery(descriptor, protoOrDescriptor as ClassElement);
-  };
-}
-
-const legacyQuery = (
-  descriptor: PropertyDescriptor,
-  proto: Object,
-  name: PropertyKey
-) => {
-  Object.defineProperty(proto, name, descriptor);
-};
-
-const standardQuery = (
-  descriptor: PropertyDescriptor,
-  element: ClassElement
-) => ({
-  kind: 'method',
-  placement: 'prototype',
-  key: element.key,
-  descriptor,
-});
-
-const standardEventOptions = (
-  options: AddEventListenerOptions,
-  element: ClassElement
-) => {
-  return {
-    ...element,
-    finisher(clazz: typeof UpdatingElement) {
-      Object.assign(
-        // @ts-ignore TS2769: No overload matches this call.
-        clazz.prototype[element.key as keyof UpdatingElement],
-        options
-      );
-    },
-  };
-};
-
-const legacyEventOptions =
-  // tslint:disable-next-line:no-any legacy decorator
-  (options: AddEventListenerOptions, proto: any, name: PropertyKey) => {
-    Object.assign(proto[name], options);
-  };
-
-/**
- * Adds event listener options to a method used as an event listener in a
- * lit-html template.
- *
- * @param options An object that specifies event listener options as accepted by
- * `EventTarget#addEventListener` and `EventTarget#removeEventListener`.
- * @see https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener#Parameters
- * Current browsers support the `capture`, `passive`, and `once` options. See:
- * @example
- * ```ts
- * class MyElement {
- *   clicked = false;
- *
- *   render() {
- *     return html`
- *       <div @click=${this._onClick}`>
- *         <button></button>
- *       </div>
- *     `;
- *   }
- *
- *   @eventOptions({capture: true})
- *   _onClick(e) {
- *     this.clicked = true;
- *   }
- * }
- * ```
- * @category Decorator
- */
-export function eventOptions(options: AddEventListenerOptions) {
-  // Return value typed as any to prevent TypeScript from complaining that
-  // standard decorator function signature does not match TypeScript decorator
-  // signature
-  // TODO(kschaaf): unclear why it was only failing on this decorator and not
-  // the others
-  return ((protoOrDescriptor: Object | ClassElement, name?: string) =>
-    name !== undefined
-      ? legacyEventOptions(options, protoOrDescriptor as Object, name)
-      : standardEventOptions(
-          options,
-          protoOrDescriptor as ClassElement
-        )) as any; // tslint:disable-next-line:no-any decorator
-}
-
-// x-browser support for matches
-// tslint:disable-next-line:no-any
-const ElementProto = Element.prototype as any;
-const legacyMatches =
-  ElementProto.msMatchesSelector || ElementProto.webkitMatchesSelector;
-
-/**
- * A property decorator that converts a class property into a getter that
- * returns the `assignedNodes` of the given named `slot`. Note, the type of
- * this property should be annotated as `NodeListOf<HTMLElement>`.
- *
- * @param slotName A string name of the slot.
- * @param flatten A boolean which when true flattens the assigned nodes,
- * meaning any assigned nodes that are slot elements are replaced with their
- * assigned nodes.
- * @param selector A string which filters the results to elements that match
- * the given css selector.
- * @example
- * ```ts
- * class MyElement {
- *   @queryAssignedNodes('list', true, '.item')
- *   listItems;
- *
- *   render() {
- *     return html`
- *       <slot name="list"></slot>
- *     `;
- *   }
- * }
- * ```
- * @category Decorator
- */
-export function queryAssignedNodes(
-  slotName = '',
-  flatten = false,
-  selector = ''
-) {
-  return (
-    protoOrDescriptor: Object | ClassElement,
-    // tslint:disable-next-line:no-any decorator
-    name?: PropertyKey
-  ): any => {
-    const descriptor = {
-      get(this: LitElement) {
-        const slotSelector = `slot${
-          slotName ? `[name=${slotName}]` : ':not([name])'
-        }`;
-        const slot = this.renderRoot.querySelector(slotSelector);
-        let nodes =
-          slot && (slot as HTMLSlotElement).assignedNodes({ flatten });
-        if (nodes && selector) {
-          nodes = nodes.filter(
-            (node) =>
-              node.nodeType === Node.ELEMENT_NODE &&
-              // tslint:disable-next-line:no-any testing existence on older browsers
-              ((node as any).matches
-                ? (node as Element).matches(selector)
-                : legacyMatches.call(node as Element, selector))
-          );
-        }
-        return nodes;
-      },
-      enumerable: true,
-      configurable: true,
-    };
-    return name !== undefined
-      ? legacyQuery(descriptor, protoOrDescriptor as Object, name)
-      : standardQuery(descriptor, protoOrDescriptor as ClassElement);
-  };
-}
+      : standardCustomElement(tagName, classOrDescriptor as ClassDescriptor);
diff --git a/packages/carbon-web-components/src/globals/directives/if-non-empty.ts b/packages/carbon-web-components/src/globals/directives/if-non-empty.ts
index 28dc890d3fc..4fe2e65549d 100644
--- a/packages/carbon-web-components/src/globals/directives/if-non-empty.ts
+++ b/packages/carbon-web-components/src/globals/directives/if-non-empty.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ifDefined } from 'lit-html/directives/if-defined';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 /**
  * A variant of `if-non-null` which stops rendering if the given value is an emptry string in addition to `null`/`undefined`.
diff --git a/packages/carbon-web-components/src/globals/directives/if-non-null.ts b/packages/carbon-web-components/src/globals/directives/if-non-null.ts
deleted file mode 100644
index c61c310f4b3..00000000000
--- a/packages/carbon-web-components/src/globals/directives/if-non-null.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 { ifDefined } from 'lit-html/directives/if-defined';
-
-/**
- * A variant of `lit-html/directives/if-defined` which stops rendering if the given value is `null` in addition to `undefined`.
- *
- * @param The value.
- */
-export default (value) => ifDefined(value ?? undefined);
diff --git a/packages/carbon-web-components/src/globals/directives/spread.ts b/packages/carbon-web-components/src/globals/directives/spread.ts
index 805d1200533..41145706f02 100644
--- a/packages/carbon-web-components/src/globals/directives/spread.ts
+++ b/packages/carbon-web-components/src/globals/directives/spread.ts
@@ -1,13 +1,18 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Part, PropertyPart, directive } from 'lit-html';
+import {
+  AttributePart,
+  Directive,
+  DirectiveParameters,
+} from 'lit/directive.js';
+import { directive } from 'lit/async-directive.js';
 
 export interface AttributesInfo {
   readonly [name: string]: string;
@@ -25,46 +30,57 @@ const attributesMapCache = new WeakMap();
  * It applies the key-value pairs in the `attributesInfo` argument
  * and sets them as attribute name/value pairs.
  *
- * @param classInfo The key-value pair to be set as the attribute name/value pairs.
  */
-const spread = directive((attributesInfo: AttributesInfo) => (part: Part) => {
-  // The first character of `...` is interpreted as one for `PropertyPart`
-  if (
-    !(part instanceof PropertyPart) ||
-    part.committer.name !== '..' ||
-    part.committer.parts.length > 1
-  ) {
-    throw new Error(
-      'The `spread` directive must be used in with `...` name and must be the only part in the attribute.'
-    );
-  }
+class SpreadDirective extends Directive {
+  /**
+   * The update function that handles the attribute setting.
+   *
+   * @param part an object with an API to manage the element's DOM
+   * @param attributesInfo The key-value pair to be set as the attribute name/value pairs.
+   * @returns the render function
+   */
+  update(part: AttributePart, [attributesInfo]: DirectiveParameters<this>) {
+    const { element } = part;
 
-  const { committer } = part;
-  const { element } = committer;
+    // Removes old attributes that are no longer there
+    const oldAttributesInfo = attributesMapCache.get(part);
+    if (oldAttributesInfo) {
+      Object.keys(oldAttributesInfo).forEach((name) => {
+        if (!(name in attributesInfo)) {
+          element.removeAttribute(name);
+        }
+      });
+    }
 
-  // Removes old attributes that are no longer there
-  const oldAttributesInfo = attributesMapCache.get(part);
-  if (oldAttributesInfo) {
-    Object.keys(oldAttributesInfo).forEach((name) => {
-      if (!(name in attributesInfo)) {
-        element.removeAttribute(name);
+    // Adds new attributes
+    Object.keys(attributesInfo).forEach((name) => {
+      const value = attributesInfo[name];
+      if (
+        (!oldAttributesInfo || !Object.is(value, oldAttributesInfo[name])) &&
+        typeof value !== 'undefined'
+      ) {
+        element.setAttribute(name, value);
       }
     });
+
+    // Updates the cache
+    attributesMapCache.set(part, attributesInfo);
+
+    return this.render(attributesInfo);
   }
 
-  // Adds new attributes
-  Object.keys(attributesInfo).forEach((name) => {
-    const value = attributesInfo[name];
-    if (
-      (!oldAttributesInfo || !Object.is(value, oldAttributesInfo[name])) &&
-      typeof value !== 'undefined'
-    ) {
-      element.setAttribute(name, value);
-    }
-  });
+  /**
+   * The rendering function that simply takes in the arguments to be used
+   * in the update() function.
+   *
+   * @param attributesInfo The key-value pair to be set as the attribute name/value pairs.
+   * @returns the attributes info
+   */
+  render(attributesInfo: AttributesInfo) {
+    return attributesInfo;
+  }
+}
 
-  // Updates the cache
-  attributesMapCache.set(part, attributesInfo);
-});
+const spread = directive(SpreadDirective);
 
 export default spread;
diff --git a/packages/carbon-web-components/src/globals/internal/feature-flags.ts b/packages/carbon-web-components/src/globals/internal/feature-flags.ts
new file mode 100644
index 00000000000..cb2cf5099a1
--- /dev/null
+++ b/packages/carbon-web-components/src/globals/internal/feature-flags.ts
@@ -0,0 +1,30 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+
+/**
+ * This file contains the list of the default values of compile-time feature flags.
+ */
+
+/**
+ * This flag will determine if all feature flags should be enabled
+ *
+ * @type {boolean}
+ */
+export const CDS_FLAGS_ALL: boolean =
+  process!.env.CDS_FLAGS_ALL === 'true' || false;
+
+/**
+ * Enables experimental component
+ *
+ * @type {boolean}
+ */
+export const CDS_EXPERIEMENTAL_COMPONENT_NAME: boolean =
+  process!.env.CDS_EXPERIEMENTAL_COMPONENT_NAME === 'true' ||
+  CDS_FLAGS_ALL ||
+  false;
diff --git a/packages/carbon-web-components/src/globals/internal/radio-group-manager.ts b/packages/carbon-web-components/src/globals/internal/radio-group-manager.ts
index dbbfebb9ce0..4f30785cba1 100644
--- a/packages/carbon-web-components/src/globals/internal/radio-group-manager.ts
+++ b/packages/carbon-web-components/src/globals/internal/radio-group-manager.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -159,17 +159,18 @@ class RadioGroupManager {
    * Selects or focuses on a radio button.
    *
    * @param radio The radio button to select.
+   * @param readOnly optional if radio button has readOnly.
    */
-  select(radio: ManagedRadioButton) {
+  select(radio: ManagedRadioButton, readOnly?: boolean) {
     const group = this._groups[radio.name];
     if (group) {
       // Updates the state of the one being selected up-front to avoid the state of no radio button is selected
-      radio.checked = true;
+      radio.checked = !readOnly || true;
       radio.tabIndex = 0;
       radio.focus();
       group.forEach((item) => {
         if (radio !== item) {
-          item.checked = false;
+          item.checked = readOnly || false;
           item.tabIndex = -1;
         }
       });
diff --git a/packages/carbon-web-components/src/globals/internal/storybook-cdn.ts b/packages/carbon-web-components/src/globals/internal/storybook-cdn.ts
index 0977b8fa2ac..2de6cf591e8 100644
--- a/packages/carbon-web-components/src/globals/internal/storybook-cdn.ts
+++ b/packages/carbon-web-components/src/globals/internal/storybook-cdn.ts
@@ -44,7 +44,7 @@ export const cdnJs = ({ components }) => {
  ${_renderScript(components, `version/v${packageJson.version}`)}
 
  // LATEST tag
- ${_renderScript(components, 'tag/latest')}
+ ${_renderScript(components, 'tag/v2/latest')}
  \`\`\`
 
  > NOTE: The latest tag is a moving version. While beneficial to
@@ -59,7 +59,7 @@ export const cdnJs = ({ components }) => {
  ${_renderScript(components, `version/v${packageJson.version}`, true)}
 
  // LATEST tag
- ${_renderScript(components, 'tag/latest', true)}
+ ${_renderScript(components, 'tag/v2/latest', true)}
  \`\`\`
    `;
 };
diff --git a/packages/carbon-web-components/src/globals/mixins/form.ts b/packages/carbon-web-components/src/globals/mixins/form.ts
index 80f05d3f9df..e4711d7be6a 100644
--- a/packages/carbon-web-components/src/globals/mixins/form.ts
+++ b/packages/carbon-web-components/src/globals/mixins/form.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from './on';
 import Handle from '../internal/handle';
 
 /**
diff --git a/packages/carbon-web-components/src/globals/mixins/host-listener.ts b/packages/carbon-web-components/src/globals/mixins/host-listener.ts
index 44aa88e5bd6..41a9b244b29 100644
--- a/packages/carbon-web-components/src/globals/mixins/host-listener.ts
+++ b/packages/carbon-web-components/src/globals/mixins/host-listener.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from './on';
 import Handle from '../internal/handle';
 
 /**
diff --git a/packages/carbon-web-components/src/globals/mixins/on.ts b/packages/carbon-web-components/src/globals/mixins/on.ts
new file mode 100644
index 00000000000..caea03ee23e
--- /dev/null
+++ b/packages/carbon-web-components/src/globals/mixins/on.ts
@@ -0,0 +1,16 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+export default function on(element: any, ...args: any) {
+  element.addEventListener(...args);
+  return {
+    release() {
+      element.removeEventListener(...args);
+      return null;
+    },
+  };
+}
diff --git a/packages/carbon-web-components/src/globals/scss/grid.scss b/packages/carbon-web-components/src/globals/scss/grid.scss
new file mode 100644
index 00000000000..ebac01efd2b
--- /dev/null
+++ b/packages/carbon-web-components/src/globals/scss/grid.scss
@@ -0,0 +1,16 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+$feature-flags: (
+  enable-css-custom-properties: true,
+  grid-columns-16: true,
+);
+
+@use '@carbon/grid';
+
+// Emit the flex-grid styles
+@include grid.flex-grid();
diff --git a/packages/carbon-web-components/src/globals/scss/themes.scss b/packages/carbon-web-components/src/globals/scss/themes.scss
new file mode 100644
index 00000000000..87ad7fc79b6
--- /dev/null
+++ b/packages/carbon-web-components/src/globals/scss/themes.scss
@@ -0,0 +1,37 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/themes/scss/themes';
+@use '@carbon/styles/scss/theme';
+
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@use '@carbon/styles/scss/components/notification/tokens' as notification-tokens;
+@include theme.add-component-tokens(button-tokens.$button-tokens);
+@include theme.add-component-tokens(tag-tokens.$tag-tokens);
+@include theme.add-component-tokens(notification-tokens.$notification-tokens);
+
+:host(.#{$prefix}-theme-zone-white),
+.#{$prefix}-theme-zone-white {
+  @include theme.theme(themes.$white);
+}
+
+:host(.#{$prefix}-theme-zone-g10),
+.#{$prefix}-theme-zone-g10 {
+  @include theme.theme(themes.$g10);
+}
+
+:host(.#{$prefix}-theme-zone-g90),
+.#{$prefix}-theme-zone-g90 {
+  @include theme.theme(themes.$g90);
+}
+
+:host(.#{$prefix}-theme-zone-g100),
+.#{$prefix}-theme-zone-g100 {
+  @include theme.theme(themes.$g100);
+}
diff --git a/packages/carbon-web-components/src/globals/settings.ts b/packages/carbon-web-components/src/globals/settings.ts
index 8532978f63d..b2c7199f20c 100644
--- a/packages/carbon-web-components/src/globals/settings.ts
+++ b/packages/carbon-web-components/src/globals/settings.ts
@@ -1,15 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
+const prefix = 'cds';
 
 /**
  * A selector selecting tabbable nodes.
@@ -21,7 +19,7 @@ const selectorTabbable = `
   textarea:not([disabled]):not([tabindex='-1']),
   iframe, object, embed, *[tabindex]:not([tabindex='-1']), *[contenteditable=true],
   ${prefix}-accordion-item,
-  ${prefix}-btn,
+  ${prefix}-button,
   ${prefix}-breadcrumb-link,
   ${prefix}-checkbox,
   ${prefix}-code-snippet,
@@ -73,4 +71,4 @@ const selectorTabbable = `
 `;
 
 // Because we're going to have a bunch of exports
-export { selectorTabbable };
+export { prefix, selectorTabbable };
diff --git a/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts b/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts
index 8bdd9e00090..4462ce041aa 100644
--- a/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts
+++ b/packages/carbon-web-components/src/globals/wrappers/createReactCustomElementType.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import React, { Component, createElement, forwardRef } from 'react';
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../mixins/on';
 import Handle from '../internal/handle';
 
 /**
@@ -183,7 +183,7 @@ const attachEventListeners = (
  * import { render } from 'react-dom';
  * import createCustomElementType, { booleanSerializer } from '/path/to/createCustomElementType';
  *
- * const BXDropdown = createCustomElementType('bx-dropdown', {
+ * const CDSDropdown = createCustomElementType(`${prefix}-dropdown`, {
  *   disabled: {
  *     // Sets `disabled` attribute when the React prop value is truthy, unsets otherwise
  *     serialize: booleanSerializer,
@@ -193,21 +193,21 @@ const attachEventListeners = (
  *     attribute: 'helper-text',
  *   },
  *   onBeforeSelect: {
- *     // Sets `onBeforeSelect` React prop value as a listener of `bx-dropdown-beingselected` custom event
- *     event: 'bx-dropdown-beingselected',
+ *     // Sets `onBeforeSelect` React prop value as a listener of `cds-dropdown-beingselected` custom event
+ *     event: `${prefix}-dropdown-beingselected`,
  *   },
  * });
  *
  * render(
  *   (
- *     <BXDropdown
+ *     <CDSDropdown
  *       disabled={true}
  *       helperText="some-helper-text"
- *       onBeforeSelect={event => { console.log('bx-dropdown-beingselected is fired!', event); }}>
- *       <bx-dropdown-item value="all">Option 1</bx-dropdown-item>
- *       <bx-dropdown-item value="cloudFoundry">Option 2</bx-dropdown-item>
- *       <bx-dropdown-item value="staging">Option 3</bx-dropdown-item>
- *     </BXDropdown>
+ *       onBeforeSelect={event => { console.log(`${prefix}-dropdown-beingselected is fired!`, event); }}>
+ *       <cds-dropdown-item value="all">Option 1</cds-dropdown-item>
+ *       <cds-dropdown-item value="cloudFoundry">Option 2</cds-dropdown-item>
+ *       <cds-dropdown-item value="staging">Option 3</cds-dropdown-item>
+ *     </CDSDropdown>
  *   )
  *   document.body
  * );
diff --git a/packages/carbon-web-components/src/index.ts b/packages/carbon-web-components/src/index.ts
index d3f74f89e91..eb2fc8852a1 100644
--- a/packages/carbon-web-components/src/index.ts
+++ b/packages/carbon-web-components/src/index.ts
@@ -1,119 +1,135 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2020
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-export { default as BXAccordion } from './components/accordion/accordion';
-export { default as BXAccordionItem } from './components/accordion/accordion-item';
-export { default as BXButton } from './components/button/button';
-export { default as BXButtonSkeleton } from './components/button/button-skeleton';
-export { default as BXBreadcrumb } from './components/breadcrumb/breadcrumb';
-export { default as BXBreadcrumbItem } from './components/breadcrumb/breadcrumb-item';
-export { default as BXBreadcrumbLink } from './components/breadcrumb/breadcrumb-link';
-export { default as BXCheckbox } from './components/checkbox/checkbox';
-export { default as BXCodeSnippet } from './components/code-snippet/code-snippet';
-export { default as BXCodeSnippetSkeleton } from './components/code-snippet/code-snippet-skeleton';
-export { default as BXComboBox } from './components/combo-box/combo-box';
-export { default as BXComboBoxItem } from './components/combo-box/combo-box-item';
-export { default as BXContentSwitcher } from './components/content-switcher/content-switcher';
-export { default as BXContentSwitcherItem } from './components/content-switcher/content-switcher-item';
-export { default as BXCopyButton } from './components/copy-button/copy-button';
-export { default as BXTable } from './components/data-table/table';
-export { default as BXTableBatchActions } from './components/data-table/table-batch-actions';
-export { default as BXTableBody } from './components/data-table/table-body';
-export { default as BXTableCell } from './components/data-table/table-cell';
-export { default as BXTableHead } from './components/data-table/table-head';
-export { default as BXTableHeaderCell } from './components/data-table/table-header-cell';
-export { default as BXTableHeaderRow } from './components/data-table/table-header-row';
-export { default as BXTableRow } from './components/data-table/table-row';
-export { default as BXTableToolbarContent } from './components/data-table/table-toolbar-content';
-export { default as BXTableToolbarSearch } from './components/data-table/table-toolbar-search';
-export { default as BXDatePicker } from './components/date-picker/date-picker';
-export { default as BXDatePickerInput } from './components/date-picker/date-picker-input';
-export { default as BXDatePickerInputSkeleton } from './components/date-picker/date-picker-input-skeleton';
-export { default as BXDropdown } from './components/dropdown/dropdown';
-export { default as BXDropdownItem } from './components/dropdown/dropdown-item';
-export { default as BXDropdownSkeleton } from './components/dropdown/dropdown-skeleton';
-export { default as BXFormItem } from './components/form/form-item';
-export { default as BXInput } from './components/input/input';
-export { default as BXInlineLoading } from './components/inline-loading/inline-loading';
-export { default as BXLink } from './components/link/link';
-export { default as BXListItem } from './components/list/list-item';
-export { default as BXOrderedList } from './components/list/ordered-list';
-export { default as BXUnorderedList } from './components/list/unordered-list';
-export { default as BXLoading } from './components/loading/loading';
-export { default as BXModal } from './components/modal/modal';
-export { default as BXModalBody } from './components/modal/modal-body';
-export { default as BXModalCloseButton } from './components/modal/modal-close-button';
-export { default as BXModalFooter } from './components/modal/modal-footer';
-export { default as BXModalHeader } from './components/modal/modal-header';
-export { default as BXModalHeading } from './components/modal/modal-heading';
-export { default as BXModalLabel } from './components/modal/modal-label';
-export { default as BXMultiSelect } from './components/multi-select/multi-select';
-export { default as BXMultiSelectItem } from './components/multi-select/multi-select-item';
-export { default as BXInlineNotification } from './components/notification/inline-notification';
-export { default as BXToastNotification } from './components/notification/toast-notification';
-export { default as BXNumberInput } from './components/number-input/number-input';
-export { default as BXNumberInputSkeleton } from './components/number-input/number-input-skeleton';
-export { default as BXTextarea } from './components/textarea/textarea';
-export { default as BXTextareaSkeleton } from './components/textarea/textarea-skeleton';
-export { default as BXOverflowMenu } from './components/overflow-menu/overflow-menu';
-export { default as BXOverflowMenuBody } from './components/overflow-menu/overflow-menu-body';
-export { default as BXOverflowMenuItem } from './components/overflow-menu/overflow-menu-item';
-export { default as BXPagination } from './components/pagination/pagination';
-export { default as BXPageSizesSelect } from './components/pagination/page-sizes-select';
-export { default as BXPagesSelect } from './components/pagination/pages-select';
-export { default as BXProgressIndicator } from './components/progress-indicator/progress-indicator';
-export { default as BXProgressIndicatorSkeleton } from './components/progress-indicator/progress-indicator-skeleton';
-export { default as BXProgressStepSkeleton } from './components/progress-indicator/progress-step-skeleton';
-export { default as BXProgressStep } from './components/progress-indicator/progress-step';
-export { default as BXRadioButton } from './components/radio-button/radio-button';
-export { default as BXRadioButtonGroup } from './components/radio-button/radio-button-group';
-export { default as BXSearch } from './components/search/search';
-export { default as BXSearchSkeleton } from './components/search/search-skeleton';
-export { default as BXSkeletonPlaceholder } from './components/skeleton-placeholder/skeleton-placeholder';
-export { default as BXSkeletonText } from './components/skeleton-text/skeleton-text';
-export { default as BXSlider } from './components/slider/slider';
-export { default as BXSliderInput } from './components/slider/slider-input';
-export { default as BXSliderSkeleton } from './components/slider/slider-skeleton';
-export { default as BXStructuredList } from './components/structured-list/structured-list';
-export { default as BXStructuredListBody } from './components/structured-list/structured-list-body';
-export { default as BXStructuredListHead } from './components/structured-list/structured-list-head';
-export { default as BXStructuredListHeaderRow } from './components/structured-list/structured-list-header-row';
-export { default as BXStructuredListRow } from './components/structured-list/structured-list-row';
-export { default as BXStructuredListHeaderCellSkeleton } from './components/structured-list/structured-list-header-cell-skeleton';
-export { default as BXTabs } from './components/tabs/tabs';
-export { default as BXTab } from './components/tabs/tab';
-export { default as BXTabsSkeleton } from './components/tabs/tabs-skeleton';
-export { default as BXTabSkeleton } from './components/tabs/tab-skeleton';
-export { default as BXTag } from './components/tag/tag';
-export { default as BXFilterTag } from './components/tag/filter-tag';
-export { default as BXSkipToContent } from './components/skip-to-content/skip-to-content';
-export { default as BXTile } from './components/tile/tile';
-export { default as BXClickableTile } from './components/tile/clickable-tile';
-export { default as BXExpandableTile } from './components/tile/expandable-tile';
-export { default as BXRadioTile } from './components/tile/radio-tile';
-export { default as BXSelectableTile } from './components/tile/selectable-tile';
-export { default as BXTileGroup } from './components/tile/tile-group';
-export { default as BXToggle } from './components/toggle/toggle';
-export { default as BXTooltip } from './components/tooltip/tooltip';
-export { default as BXTooltipBody } from './components/tooltip/tooltip-body';
-export { default as BXTooltipDefinition } from './components/tooltip/tooltip-definition';
-export { default as BXTooltipFooter } from './components/tooltip/tooltip-footer';
-export { default as BXTooltipIcon } from './components/tooltip/tooltip-icon';
-export { default as BXHeader } from './components/ui-shell/header';
-export { default as BXHeaderMenu } from './components/ui-shell/header-menu';
-export { default as BXHeaderMenuButton } from './components/ui-shell/header-menu-button';
-export { default as BXHeaderMenuItem } from './components/ui-shell/header-menu-item';
-export { default as BXHeaderName } from './components/ui-shell/header-name';
-export { default as BXHeaderNav } from './components/ui-shell/header-nav';
-export { default as BXHeaderNavItem } from './components/ui-shell/header-nav-item';
-export { default as BXSideNav } from './components/ui-shell/side-nav';
-export { default as BXSideNavItems } from './components/ui-shell/side-nav-items';
-export { default as BXSideNavLink } from './components/ui-shell/side-nav-link';
-export { default as BXSideNavMenu } from './components/ui-shell/side-nav-menu';
-export { default as BXSideNavMenuItem } from './components/ui-shell/side-nav-menu-item';
+export { default as CDSAccordion } from './components/accordion/accordion';
+export { default as CDSAccordionItem } from './components/accordion/accordion-item';
+export { default as CDSButton } from './components/button/button';
+export { default as CDSButtonSkeleton } from './components/button/button-skeleton';
+export { default as CDSBreadcrumb } from './components/breadcrumb/breadcrumb';
+export { default as CDSBreadcrumbItem } from './components/breadcrumb/breadcrumb-item';
+export { default as CDSBreadcrumbLink } from './components/breadcrumb/breadcrumb-link';
+export { default as CDSCheckbox } from './components/checkbox/checkbox';
+export { default as CDSCodeSnippet } from './components/code-snippet/code-snippet';
+export { default as CDSCodeSnippetSkeleton } from './components/code-snippet/code-snippet-skeleton';
+export { default as CDSComboBox } from './components/combo-box/combo-box';
+export { default as CDSComboBoxItem } from './components/combo-box/combo-box-item';
+export { default as CDSContentSwitcher } from './components/content-switcher/content-switcher';
+export { default as CDSContentSwitcherItem } from './components/content-switcher/content-switcher-item';
+export { default as CDSCopyButton } from './components/copy-button/copy-button';
+export { default as CDSFileUploader } from './components/file-uploader/file-uploader';
+export { default as CDSFileUploaderButton } from './components/file-uploader/file-uploader-button';
+export { default as CDSFileUploaderDropContainer } from './components/file-uploader/file-uploader-drop-container';
+export { default as CDSFileUploaderItem } from './components/file-uploader/file-uploader-item';
+export { default as CDSFileUploaderSkeleton } from './components/file-uploader/file-uploader-skeleton';
+export { default as CDSTable } from './components/data-table/table';
+export { default as CDSTableBatchActions } from './components/data-table/table-batch-actions';
+export { default as CDSTableBody } from './components/data-table/table-body';
+export { default as CDSTableCell } from './components/data-table/table-cell';
+export { default as CDSTableCellContent } from './components/data-table/table-cell-content';
+export { default as CDSTableHead } from './components/data-table/table-head';
+export { default as CDSTableHeaderTitle } from './components/data-table/table-header-title';
+export { default as CDSTableHeadDescription } from './components/data-table/table-header-description';
+export { default as CDSTableHeaderCell } from './components/data-table/table-header-cell';
+export { default as CDSTableHeaderRow } from './components/data-table/table-header-row';
+export { default as CDSTableRow } from './components/data-table/table-row';
+export { default as CDSTableSkeleton } from './components/data-table/table-skeleton';
+export { default as CDSTableToolbarContent } from './components/data-table/table-toolbar-content';
+export { default as CDSTableToolbarSearch } from './components/data-table/table-toolbar-search';
+export { default as CDSDatePicker } from './components/date-picker/date-picker';
+export { default as CDSDatePickerInput } from './components/date-picker/date-picker-input';
+export { default as CDSDatePickerInputSkeleton } from './components/date-picker/date-picker-input-skeleton';
+export { default as CDSDropdown } from './components/dropdown/dropdown';
+export { default as CDSDropdownItem } from './components/dropdown/dropdown-item';
+export { default as CDSDropdownSkeleton } from './components/dropdown/dropdown-skeleton';
+export { default as CDSFormItem } from './components/form/form-item';
+export { default as CDSFormGroup } from './components/form-group/form-group';
+export { default as CDSIconButton } from './components/icon-button/icon-button';
+export { default as CDSTextInput } from './components/text-input/text-input';
+export { default as CDSTextInputSkeleton } from './components/text-input/text-input-skeleton';
+export { default as CDSInlineLoading } from './components/inline-loading/inline-loading';
+export { default as CDSLink } from './components/link/link';
+export { default as CDSListItem } from './components/list/list-item';
+export { default as CDSOrderedList } from './components/list/ordered-list';
+export { default as CDSUnorderedList } from './components/list/unordered-list';
+export { default as CDSLoading } from './components/loading/loading';
+export { default as CDSModal } from './components/modal/modal';
+export { default as CDSModalBody } from './components/modal/modal-body';
+export { default as CDSModalBodyContent } from './components/modal/modal-body-content';
+export { default as CDSModalCloseButton } from './components/modal/modal-close-button';
+export { default as CDSModalFooter } from './components/modal/modal-footer';
+export { default as CDSModalHeader } from './components/modal/modal-header';
+export { default as CDSModalHeading } from './components/modal/modal-heading';
+export { default as CDSModalLabel } from './components/modal/modal-label';
+export { default as CDSMultiSelect } from './components/multi-select/multi-select';
+export { default as CDSMultiSelectItem } from './components/multi-select/multi-select-item';
+export { default as CDSActionableNotification } from './components/notification/actionable-notification';
+export { default as CDSActionableNotificationButton } from './components/notification/actionable-notification-button';
+export { default as CDSInlineNotification } from './components/notification/inline-notification';
+export { default as CDSToastNotification } from './components/notification/toast-notification';
+export { default as CDSNumberInput } from './components/number-input/number-input';
+export { default as CDSNumberInputSkeleton } from './components/number-input/number-input-skeleton';
+export { default as CDSTextarea } from './components/textarea/textarea';
+export { default as CDSTextareaSkeleton } from './components/textarea/textarea-skeleton';
+export { default as CDSOverflowMenu } from './components/overflow-menu/overflow-menu';
+export { default as CDSOverflowMenuBody } from './components/overflow-menu/overflow-menu-body';
+export { default as CDSOverflowMenuItem } from './components/overflow-menu/overflow-menu-item';
+export { default as CDSPagination } from './components/pagination/pagination';
+export { default as CDSProgressBar } from './components/progress-bar/progress-bar';
+export { default as CDSProgressIndicator } from './components/progress-indicator/progress-indicator';
+export { default as CDSProgressIndicatorSkeleton } from './components/progress-indicator/progress-indicator-skeleton';
+export { default as CDSProgressStepSkeleton } from './components/progress-indicator/progress-step-skeleton';
+export { default as CDSProgressStep } from './components/progress-indicator/progress-step';
+export { default as CDSRadioButton } from './components/radio-button/radio-button';
+export { default as CDSRadioButtonGroup } from './components/radio-button/radio-button-group';
+export { default as CDSSearch } from './components/search/search';
+export { default as CDSSearchSkeleton } from './components/search/search-skeleton';
+export { default as CDSSkeletonPlaceholder } from './components/skeleton-placeholder/skeleton-placeholder';
+export { default as CDSSkeletonText } from './components/skeleton-text/skeleton-text';
+export { default as CDSSlider } from './components/slider/slider';
+export { default as CDSSliderInput } from './components/slider/slider-input';
+export { default as CDSSliderSkeleton } from './components/slider/slider-skeleton';
+export { default as CDSStructuredList } from './components/structured-list/structured-list';
+export { default as CDSStructuredListBody } from './components/structured-list/structured-list-body';
+export { default as CDSStructuredListHead } from './components/structured-list/structured-list-head';
+export { default as CDSStructuredListHeaderRow } from './components/structured-list/structured-list-header-row';
+export { default as CDSStructuredListRow } from './components/structured-list/structured-list-row';
+export { default as CDSStructuredListHeaderCellSkeleton } from './components/structured-list/structured-list-header-cell-skeleton';
+export { default as CDSTabs } from './components/tabs/tabs';
+export { default as CDSTab } from './components/tabs/tab';
+export { default as CDSTabsSkeleton } from './components/tabs/tabs-skeleton';
+export { default as CDSTabSkeleton } from './components/tabs/tab-skeleton';
+export { default as CDSTag } from './components/tag/tag';
+export { default as CDSSkipToContent } from './components/skip-to-content/skip-to-content';
+export { default as CDSTile } from './components/tile/tile';
+export { default as CDSClickableTile } from './components/tile/clickable-tile';
+export { default as CDSExpandableTile } from './components/tile/expandable-tile';
+export { default as CDSRadioTile } from './components/tile/radio-tile';
+export { default as CDSSelectableTile } from './components/tile/selectable-tile';
+export { default as CDSTileGroup } from './components/tile/tile-group';
+export { default as CDSToggle } from './components/toggle/toggle';
+export { default as CDSTooltip } from './components/tooltip/tooltip';
+export { default as CDSTooltipDefinition } from './components/toggle-tip/toggletip';
+export { default as CDSHeader } from './components/ui-shell/header';
+export { default as CDSHeaderMenu } from './components/ui-shell/header-menu';
+export { default as CDSHeaderMenuButton } from './components/ui-shell/header-menu-button';
+export { default as CDSHeaderMenuItem } from './components/ui-shell/header-menu-item';
+export { default as CDSHeaderName } from './components/ui-shell/header-name';
+export { default as CDSHeaderNav } from './components/ui-shell/header-nav';
+export { default as CDSHeaderNavItem } from './components/ui-shell/header-nav-item';
+export { default as CDSHeaderSideNavItems } from './components/ui-shell/header-side-nav-items';
+export { default as CDSHeaderPanel } from './components/ui-shell/header-panel';
+export { default as CDSSideNav } from './components/ui-shell/side-nav';
+export { default as CDSSideNavItems } from './components/ui-shell/side-nav-items';
+export { default as CDSSideNavLink } from './components/ui-shell/side-nav-link';
+export { default as CDSSideNavMenu } from './components/ui-shell/side-nav-menu';
+export { default as CDSSideNavMenuItem } from './components/ui-shell/side-nav-menu-item';
+export { default as CDSSwitcher } from './components/ui-shell/switcher';
+export { default as CDSSwitcherItem } from './components/ui-shell/switcher-item';
+export { default as CDSSwitcherDivider } from './components/ui-shell/switcher-divider';
+export { default as CDSStack } from './components/stack/stack';
diff --git a/packages/carbon-web-components/src/typings/jsx-elements.d.ts b/packages/carbon-web-components/src/typings/jsx-elements.d.ts
index 6b06a273ef4..c0b4ae202e1 100644
--- a/packages/carbon-web-components/src/typings/jsx-elements.d.ts
+++ b/packages/carbon-web-components/src/typings/jsx-elements.d.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,95 +12,116 @@ import '..';
 declare global {
   namespace JSX {
     interface IntrinsicElements {
-      'bx-accordion': any;
-      'bx-accordion-item': any;
-      'bx-btn': any;
-      'bx-breadcrumb': any;
-      'bx-checkbox': any;
-      'bx-code-snippet': any;
-      'bx-combo-box': any;
-      'bx-combo-box-item': any;
-      'bx-content-switcher': any;
-      'bx-content-switcher-item': any;
-      'bx-copy-button': any;
-      'bx-data-table': any;
-      'bx-table': any;
-      'bx-table-head': any;
-      'bx-table-header-row': any;
-      'bx-table-header-cell': any;
-      'bx-table-body': any;
-      'bx-table-row': any;
-      'bx-table-cell': any;
-      'bx-date-picker': any;
-      'bx-date-picker-input': any;
-      'bx-dropdown': any;
-      'bx-dropdown-item': any;
-      'bx-form-item': any;
-      'bx-input': any;
-      'bx-inline-loading': any;
-      'bx-link': any;
-      'bx-ordered-list': any;
-      'bx-unordered-list': any;
-      'bx-loading': any;
-      'bx-modal': any;
-      'bx-modal-body': any;
-      'bx-modal-close-button': any;
-      'bx-modal-footer': any;
-      'bx-modal-header': any;
-      'bx-modal-heading': any;
-      'bx-modal-label': any;
-      'bx-multi-select': any;
-      'bx-multi-select-item': any;
-      'bx-inline-notification': any;
-      'bx-toast-notification': any;
-      'bx-number-input': any;
-      'bx-textarea': any;
-      'bx-overflow-menu': any;
-      'bx-overflow-menu-body': any;
-      'bx-overflow-menu-item': any;
-      'bx-pagination': any;
-      'bx-page-sizes-select': any;
-      'bx-pages-select': any;
-      'bx-progress-indicator': any;
-      'bx-progress-step': any;
-      'bx-radio-button': any;
-      'bx-radio-button-group': any;
-      'bx-search': any;
-      'bx-skeleton-placeholder': any;
-      'bx-skeleton-text': any;
-      'bx-slider': any;
-      'bx-slider-input': any;
-      'bx-structured-list': any;
-      'bx-structured-list-head': any;
-      'bx-structured-list-header-row': any;
-      'bx-structured-list-header-cell': any;
-      'bx-structured-list-body': any;
-      'bx-structured-list-row': any;
-      'bx-structured-list-cell': any;
-      'bx-tabs': any;
-      'bx-tab': any;
-      'bx-tag': any;
-      'bx-filter-tag': any;
-      'bx-tile': any;
-      'bx-clickable-tile': any;
-      'bx-selectable-tile': any;
-      'bx-tooltip': any;
-      'bx-tooltip-body': any;
-      'bx-tooltip-definition': any;
-      'bx-tooltip-footer': any;
-      'bx-tooltip-icon': any;
-      'bx-header': any;
-      'bx-header-nav': any;
-      'bx-header-nav-item': any;
-      'bx-header-menu': any;
-      'bx-header-menu-item': any;
-      'bx-header-menu-button': any;
-      'bx-header-name': any;
-      'bx-side-nav': any;
-      'bx-side-nav-items': any;
-      'bx-side-nav-menu': any;
-      'bx-side-nav-menu-item': any;
-      'bx-side-nav-link': any;
+      'cds-accordion': any;
+      'cds-accordion-item': any;
+      'cds-accordion-skeleton': any;
+      'cds-button': any;
+      'cds-breadcrumb': any;
+      'cds-breadcrumb-item': any;
+      'cds-breadcrumb-link': any;
+      'cds-breadcrumb-overflow-menu': any;
+      'cds-breadcrumb-skeleton': any;
+      'cds-checkbox': any;
+      'cds-checkbox-skeleton': any;
+      'cds-code-snippet': any;
+      'cds-combo-box': any;
+      'cds-combo-box-item': any;
+      'cds-content-switcher': any;
+      'cds-content-switcher-item': any;
+      'cds-copy-button': any;
+      'cds-data-table': any;
+      'cds-table': any;
+      'cds-file-uploader': any;
+      'cds-file-uploader-button': any;
+      'cds-file-uploader-drop-container': any;
+      'cds-file-uploader-item': any;
+      'cds-file-uploader-skeleton': any;
+      'cds-table-head': any;
+      'cds-table-header-row': any;
+      'cds-table-header-cell': any;
+      'cds-table-body': any;
+      'cds-table-row': any;
+      'cds-table-cell': any;
+      'cds-date-picker': any;
+      'cds-date-picker-input': any;
+      'cds-dropdown': any;
+      'cds-dropdown-item': any;
+      'cds-form-group': any;
+      'cds-form-item': any;
+      'cds-icon-button': any;
+      'cds-text-input': any;
+      'cds-inline-loading': any;
+      'cds-link': any;
+      'cds-ordered-list': any;
+      'cds-unordered-list': any;
+      'cds-layer': any;
+      'cds-loading': any;
+      'cds-modal': any;
+      'cds-modal-body': any;
+      'cds-modal-close-button': any;
+      'cds-modal-footer': any;
+      'cds-modal-header': any;
+      'cds-modal-heading': any;
+      'cds-modal-label': any;
+      'cds-multi-select': any;
+      'cds-multi-select-item': any;
+      'cds-actionable-notification': any;
+      'cds-actionable-notification-button': any;
+      'cds-inline-notification': any;
+      'cds-toast-notification': any;
+      'cds-number-input': any;
+      'cds-textarea': any;
+      'cds-overflow-menu': any;
+      'cds-overflow-menu-body': any;
+      'cds-overflow-menu-item': any;
+      'cds-pagination': any;
+      'cds-page-sizes-select': any;
+      'cds-pages-select': any;
+      'cds-progress-bar': any;
+      'cds-progress-indicator': any;
+      'cds-progress-step': any;
+      'cds-popover': any;
+      'cds-popover-content': any;
+      'cds-radio-button': any;
+      'cds-radio-button-group': any;
+      'cds-search': any;
+      'cds-skeleton-placeholder': any;
+      'cds-skeleton-text': any;
+      'cds-slider': any;
+      'cds-slider-input': any;
+      'cds-stack': any;
+      'cds-structured-list': any;
+      'cds-structured-list-head': any;
+      'cds-structured-list-header-row': any;
+      'cds-structured-list-header-cell': any;
+      'cds-structured-list-body': any;
+      'cds-structured-list-row': any;
+      'cds-structured-list-cell': any;
+      'cds-tabs': any;
+      'cds-tab': any;
+      'cds-tag': any;
+      'cds-tile': any;
+      'cds-clickable-tile': any;
+      'cds-selectable-tile': any;
+      'cds-tooltip': any;
+      'cds-tooltip-content': any;
+      'cds-header': any;
+      'cds-header-nav': any;
+      'cds-header-nav-item': any;
+      'cds-header-menu': any;
+      'cds-header-menu-item': any;
+      'cds-header-menu-button': any;
+      'cds-header-name': any;
+      'cds-header-panel': any;
+      'cds-header-side-nav-items': any;
+      'cds-switcher': any;
+      'cds-switcher-divider': any;
+      'cds-switcher-item': any;
+      'cds-side-nav': any;
+      'cds-side-nav-items': any;
+      'cds-side-nav-menu': any;
+      'cds-side-nav-menu-item': any;
+      'cds-side-nav-link': any;
     }
   }
 }
diff --git a/packages/carbon-web-components/src/typings/vendor.d.ts b/packages/carbon-web-components/src/typings/vendor.d.ts
index 9ceb076b2dd..e82abc087ae 100644
--- a/packages/carbon-web-components/src/typings/vendor.d.ts
+++ b/packages/carbon-web-components/src/typings/vendor.d.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-declare module 'carbon-components/es/globals/js/settings' {
+declare module 'carbon-components/es/globals/js/settings.js' {
   const settings: {
     /**
      * The brand prefix.
@@ -17,9 +17,10 @@ declare module 'carbon-components/es/globals/js/settings' {
   export default settings;
 }
 
-declare module 'carbon-components/es/globals/js/misc/on' {
+declare module 'carbon-components/es/globals/js/misc/on.js' {
   /**
    * Adds an event listener function to the list of event listeners for the given event type on the given event target.
+   *
    * @param target The target to add event listener on.
    * @param type A case-sensitive string representing the event type to listen for.
    * @param listener The event listener callback.
diff --git a/packages/carbon-web-components/tests/integration/build/angular_steps.js b/packages/carbon-web-components/tests/integration/build/angular_steps.js
index 43a6dd3cbdf..4a625a24d0c 100644
--- a/packages/carbon-web-components/tests/integration/build/angular_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/angular_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('Angular example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/build/basic_steps.js b/packages/carbon-web-components/tests/integration/build/basic_steps.js
index 261c3168a70..2235454e6b8 100644
--- a/packages/carbon-web-components/tests/integration/build/basic_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/basic_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('Basic example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/build/custom-style_steps.js b/packages/carbon-web-components/tests/integration/build/custom-style_steps.js
index d8a8b7987ca..67b2aa4a949 100644
--- a/packages/carbon-web-components/tests/integration/build/custom-style_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/custom-style_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -37,7 +37,7 @@ describe('Custom style example with inherited component class', () => {
 
   it('should have dropdown with custom color', async () => {
     const backgroundColorValue = await page.evaluate((dropdown) => {
-      const listBox = dropdown.shadowRoot.querySelector('.bx--list-box');
+      const listBox = dropdown.shadowRoot.querySelector('.cds--list-box');
       return listBox.ownerDocument.defaultView.getComputedStyle(listBox).getPropertyValue('background-color');
     }, await expect(page).toMatchElement('my-dropdown'));
     expect(backgroundColorValue).toEqual(expect.stringMatching(/rgb\(\s*255,\s*255,\s*255\s*\)/));
diff --git a/packages/carbon-web-components/tests/integration/build/form-basic_steps.js b/packages/carbon-web-components/tests/integration/build/form-basic_steps.js
index f6e7d508d2a..3a1d0606b0f 100644
--- a/packages/carbon-web-components/tests/integration/build/form-basic_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/form-basic_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -39,16 +39,16 @@ describe('Basic form example', () => {
   }, Number(process.env.LAUNCH_TIMEOUT));
 
   it('should detect an invalid data', async () => {
-    await expect(page).toFill('bx-input[name="username"]', 'john');
-    await expect(page).toFill('bx-input[name="password"]', 'foo');
-    await expect(page).toClick('bx-btn[kind="primary"]');
-    await expect(page).toMatchElement('bx-input[name="password"][invalid]', { timeout: 2000 });
+    await expect(page).toFill('cds-text-input[name="username"]', 'john');
+    await expect(page).toFill('cds-text-input[name="password"]', 'foo');
+    await expect(page).toClick('cds-button[kind="primary"]');
+    await expect(page).toMatchElement('cds-text-input[name="password"][invalid]', { timeout: 2000 });
   });
 
   it('should submit the data once all data is valid', async () => {
-    await expect(page).toFill('bx-input[name="username"]', 'john');
-    await expect(page).toFill('bx-input[name="password"]', 'form');
-    await expect(page).toClick('bx-btn[kind="primary"]');
+    await expect(page).toFill('cds-text-input[name="username"]', 'john');
+    await expect(page).toFill('cds-text-input[name="password"]', 'form');
+    await expect(page).toClick('cds-button[kind="primary"]');
     await expect(page).toMatch('You submitted:', { timeout: 2000 });
   });
 
diff --git a/packages/carbon-web-components/tests/integration/build/ie_steps.js b/packages/carbon-web-components/tests/integration/build/ie_steps.js
index ce71aa6a685..638a16fae42 100644
--- a/packages/carbon-web-components/tests/integration/build/ie_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/ie_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('IE example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/build/next_steps.js b/packages/carbon-web-components/tests/integration/build/next_steps.js
index d080716337e..30ce081b80f 100644
--- a/packages/carbon-web-components/tests/integration/build/next_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/next_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('Next example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/build/react-ssr_steps.js b/packages/carbon-web-components/tests/integration/build/react-ssr_steps.js
index 208dc0d54cb..9857fb497af 100644
--- a/packages/carbon-web-components/tests/integration/build/react-ssr_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/react-ssr_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('React SSR example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/build/react_steps.js b/packages/carbon-web-components/tests/integration/build/react_steps.js
index 1349eb1d95a..c28bb2f5695 100644
--- a/packages/carbon-web-components/tests/integration/build/react_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/react_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('React example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/build/redux-form_steps.js b/packages/carbon-web-components/tests/integration/build/redux-form_steps.js
index 8f151ecaa32..6bca6e53ea5 100644
--- a/packages/carbon-web-components/tests/integration/build/redux-form_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/redux-form_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -39,16 +39,16 @@ describe('Redux-form example', () => {
   }, Number(process.env.LAUNCH_TIMEOUT));
 
   it('should detect an invalid data', async () => {
-    await expect(page).toFill('bx-input[name="username"]', 'john');
-    await expect(page).toFill('bx-input[name="password"]', 'foo');
-    await expect(page).toClick('bx-btn[kind="primary"]');
-    await expect(page).toMatchElement('bx-input[name="password"][invalid]', { timeout: 2000 });
+    await expect(page).toFill('cds-text-input[name="username"]', 'john');
+    await expect(page).toFill('cds-text-input[name="password"]', 'foo');
+    await expect(page).toClick('cds-button[kind="primary"]');
+    await expect(page).toMatchElement('cds-text-input[name="password"][invalid]', { timeout: 2000 });
   });
 
   it('should submit the data once all data is valid', async () => {
-    await expect(page).toFill('bx-input[name="username"]', 'john');
-    await expect(page).toFill('bx-input[name="password"]', 'redux-form');
-    await expect(page).toClick('bx-btn[kind="primary"]');
+    await expect(page).toFill('cds-text-input[name="username"]', 'john');
+    await expect(page).toFill('cds-text-input[name="password"]', 'redux-form');
+    await expect(page).toClick('cds-button[kind="primary"]');
     await expect(page).toMatch('You submitted:', { timeout: 2000 });
   });
 
diff --git a/packages/carbon-web-components/tests/integration/build/rtl_steps.js b/packages/carbon-web-components/tests/integration/build/rtl_steps.js
index 27ca78fb354..2d717fc0a08 100644
--- a/packages/carbon-web-components/tests/integration/build/rtl_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/rtl_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -40,9 +40,9 @@ describe('RTL example', () => {
 
   it('should have RTL style applied', async () => {
     const transformValue = await page.evaluate((slider) => {
-      const filledTrackContainer = slider.shadowRoot.querySelector('.bx-ce--slider__filled-track-container');
+      const filledTrackContainer = slider.shadowRoot.querySelector('.cds-ce--slider__filled-track-container');
       return filledTrackContainer.ownerDocument.defaultView.getComputedStyle(filledTrackContainer).getPropertyValue('transform');
-    }, await expect(page).toMatchElement('bx-slider'));
+    }, await expect(page).toMatchElement('cds-slider'));
     expect(transformValue).toEqual(expect.stringMatching(/matrix\( *-1/));
   });
 
diff --git a/packages/carbon-web-components/tests/integration/build/theme-zoning_steps.js b/packages/carbon-web-components/tests/integration/build/theme-zoning_steps.js
index eee18462b54..6062a09157d 100644
--- a/packages/carbon-web-components/tests/integration/build/theme-zoning_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/theme-zoning_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -33,9 +33,9 @@ describe('Custom style example with inherited component class', () => {
 
   it('should have footer button with the color of zoned theme', async () => {
     const backgroundColorValue = await page.evaluate((dropdown) => {
-      const listBox = dropdown.shadowRoot.querySelector('.bx--btn');
+      const listBox = dropdown.shadowRoot.querySelector('.cds--btn');
       return listBox.ownerDocument.defaultView.getComputedStyle(listBox).getPropertyValue('background-color');
-    }, await expect(page).toMatchElement('footer bx-btn'));
+    }, await expect(page).toMatchElement('footer cds-button'));
     expect(backgroundColorValue).toEqual(expect.stringMatching(/rgb\(\s*111,\s*111,\s*111\s*\)/));
   });
 
diff --git a/packages/carbon-web-components/tests/integration/build/vue_steps.js b/packages/carbon-web-components/tests/integration/build/vue_steps.js
index bf3727b2b66..83b60bfd82e 100644
--- a/packages/carbon-web-components/tests/integration/build/vue_steps.js
+++ b/packages/carbon-web-components/tests/integration/build/vue_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,10 +36,10 @@ describe('Basic example', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown[open]');
-    await expect(page).toClick('bx-dropdown');
-    await expect(page).toMatchElement('bx-dropdown:not([open])');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown[open]');
+    await expect(page).toClick('cds-dropdown');
+    await expect(page).toMatchElement('cds-dropdown:not([open])');
   });
 
   afterAll(async () => {
diff --git a/packages/carbon-web-components/tests/integration/ui/accordion_steps.js b/packages/carbon-web-components/tests/integration/ui/accordion_steps.js
index 1bcd7916add..56de18ed75b 100644
--- a/packages/carbon-web-components/tests/integration/ui/accordion_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/accordion_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-accordion', () => {
+describe('cds-accordion', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-accordion--default`
@@ -15,16 +15,16 @@ describe('bx-accordion', () => {
   });
 
   it('should have accordion interactive', async () => {
-    await page.click('bx-accordion-item:nth-of-type(1) button');
+    await page.click('cds-accordion-item:nth-of-type(1) button');
     await expect(page).toHaveSelector(
-      'bx-accordion-item:nth-of-type(1) #content',
+      'cds-accordion-item:nth-of-type(1) #content',
       {
         state: 'visible',
       }
     );
-    await page.click('bx-accordion-item:nth-of-type(1) button');
+    await page.click('cds-accordion-item:nth-of-type(1) button');
     await expect(page).toHaveSelector(
-      'bx-accordion-item:nth-of-type(1) #content',
+      'cds-accordion-item:nth-of-type(1) #content',
       {
         state: 'hidden',
       }
diff --git a/packages/carbon-web-components/tests/integration/ui/checkbox_steps.js b/packages/carbon-web-components/tests/integration/ui/checkbox_steps.js
index 4de034f7a28..9eb2eef4473 100644
--- a/packages/carbon-web-components/tests/integration/ui/checkbox_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/checkbox_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-checkbox', () => {
+describe('cds-checkbox', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-checkbox--default`
@@ -15,13 +15,13 @@ describe('bx-checkbox', () => {
   });
 
   it('should have checkbox interactive', async () => {
-    await page.click('bx-checkbox label');
+    await page.click('cds-checkbox label');
     const backgroundColorValue = await page.evaluate(
       (label) =>
         label.ownerDocument.defaultView
           .getComputedStyle(label, '::before')
           .getPropertyValue('background-color'),
-      await page.$('bx-checkbox label')
+      await page.$('cds-checkbox label')
     );
     expect(backgroundColorValue).toEqual(
       expect.stringMatching(/rgb\(\s*22,\s*22,\s*22\s*\)/)
diff --git a/packages/carbon-web-components/tests/integration/ui/code-snippet_steps.js b/packages/carbon-web-components/tests/integration/ui/code-snippet_steps.js
index 28641662b03..4060089e620 100644
--- a/packages/carbon-web-components/tests/integration/ui/code-snippet_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/code-snippet_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-code-snippet', () => {
+describe('cds-code-snippet', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-code-snippet--multi-line`
@@ -15,13 +15,13 @@ describe('bx-code-snippet', () => {
   });
 
   it('should have the expando interactive', async () => {
-    await page.click('bx-code-snippet button.bx--snippet-btn--expand');
+    await page.click('cds-code-snippet button.cds--snippet-btn--expand');
     await expect(page).toHaveSelector(
-      'bx-code-snippet .bx-ce--snippet-container--expanded'
+      'cds-code-snippet .cds-ce--snippet-container--expanded'
     );
-    await page.click('bx-code-snippet button.bx--snippet-btn--expand');
+    await page.click('cds-code-snippet button.cds--snippet-btn--expand');
     await expect(page).toHaveSelector(
-      'bx-code-snippet :not(.bx-ce--snippet-container--expanded)'
+      'cds-code-snippet :not(.cds-ce--snippet-container--expanded)'
     );
   });
 });
diff --git a/packages/carbon-web-components/tests/integration/ui/combo-box_steps.js b/packages/carbon-web-components/tests/integration/ui/combo-box_steps.js
index 9fad83a74db..d32a6eb97ed 100644
--- a/packages/carbon-web-components/tests/integration/ui/combo-box_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/combo-box_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-combo-box', () => {
+describe('cds-combo-box', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-combo-box--default`
@@ -15,12 +15,12 @@ describe('bx-combo-box', () => {
   });
 
   it('should have combo box interactive', async () => {
-    await page.click('bx-combo-box .bx--list-box__field');
-    await expect(page).toHaveSelector('bx-combo-box .bx--list-box__menu', {
+    await page.click('cds-combo-box .cds--list-box__field');
+    await expect(page).toHaveSelector('cds-combo-box .cds--list-box__menu', {
       state: 'visible',
     });
-    await page.click('bx-combo-box .bx--list-box__field');
-    await expect(page).toHaveSelector('bx-combo-box .bx--list-box__menu', {
+    await page.click('cds-combo-box .cds--list-box__field');
+    await expect(page).toHaveSelector('cds-combo-box .cds--list-box__menu', {
       state: 'hidden',
     });
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/content-switcher_steps.js b/packages/carbon-web-components/tests/integration/ui/content-switcher_steps.js
index bd17660fc03..7d0ff2ed0e5 100644
--- a/packages/carbon-web-components/tests/integration/ui/content-switcher_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/content-switcher_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-content-switcher', () => {
+describe('cds-content-switcher', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-content-switcher--default`
@@ -15,9 +15,9 @@ describe('bx-content-switcher', () => {
   });
 
   it('should have content switcher interactive', async () => {
-    await page.click('bx-content-switcher-item[value="router"] button');
+    await page.click('cds-content-switcher-item[value="router"] button');
     await expect(page).toHaveSelector(
-      'bx-content-switcher-item[value="router"] button[aria-selected="true"]'
+      'cds-content-switcher-item[value="router"] button[aria-selected="true"]'
     );
   });
 });
diff --git a/packages/carbon-web-components/tests/integration/ui/data-table_steps.js b/packages/carbon-web-components/tests/integration/ui/data-table_steps.js
index 4a839ea5453..7fda9894b0b 100644
--- a/packages/carbon-web-components/tests/integration/ui/data-table_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/data-table_steps.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -15,16 +15,16 @@ describe('data-table', () => {
   });
 
   it('should have the expando interactive', async () => {
-    await page.click('bx-table-expand-row:nth-of-type(1) button');
+    await page.click('cds-table-expand-row:nth-of-type(1) button');
     await expect(page).toHaveSelector(
-      'bx-table-expanded-row:nth-of-type(1) .bx--child-row-inner-container',
+      'cds-table-expanded-row:nth-of-type(1) .cds--child-row-inner-container',
       {
         state: 'visible',
       }
     );
-    await page.click('bx-table-expand-row:nth-of-type(1) button');
+    await page.click('cds-table-expand-row:nth-of-type(1) button');
     await expect(page).toHaveSelector(
-      'bx-table-expanded-row:nth-of-type(1) .bx--child-row-inner-container',
+      'cds-table-expanded-row:nth-of-type(1) .cds--child-row-inner-container',
       { state: 'hidden' }
     );
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/dropdown_steps.js b/packages/carbon-web-components/tests/integration/ui/dropdown_steps.js
index 42a6e29f424..812c5d84041 100644
--- a/packages/carbon-web-components/tests/integration/ui/dropdown_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/dropdown_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-dropdown', () => {
+describe('cds-dropdown', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-dropdown--default`
@@ -15,12 +15,12 @@ describe('bx-dropdown', () => {
   });
 
   it('should have dropdown interactive', async () => {
-    await page.click('bx-dropdown .bx--list-box__field');
-    await expect(page).toHaveSelector('bx-dropdown .bx--list-box__menu', {
+    await page.click('cds-dropdown .cds--list-box__field');
+    await expect(page).toHaveSelector('cds-dropdown .cds--list-box__menu', {
       state: 'visible',
     });
-    await page.click('bx-dropdown .bx--list-box__field');
-    await expect(page).toHaveSelector('bx-dropdown .bx--list-box__menu', {
+    await page.click('cds-dropdown .cds--list-box__field');
+    await expect(page).toHaveSelector('cds-dropdown .cds--list-box__menu', {
       state: 'hidden',
     });
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/modal_steps.js b/packages/carbon-web-components/tests/integration/ui/modal_steps.js
index 2f6a58e6bc7..2eeb1bd1d0d 100644
--- a/packages/carbon-web-components/tests/integration/ui/modal_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/modal_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-modal', () => {
+describe('cds-modal', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-modal--default`
@@ -15,8 +15,8 @@ describe('bx-modal', () => {
   });
 
   it('should have modal closable', async () => {
-    await page.click('bx-modal-close-button button');
-    await expect(page).toHaveSelector('bx-modal .bx--modal-container', {
+    await page.click('cds-modal-close-button button');
+    await expect(page).toHaveSelector('cds-modal .cds--modal-container', {
       state: 'hidden',
     });
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/multi-select_steps.js b/packages/carbon-web-components/tests/integration/ui/multi-select_steps.js
index 083ec93befe..f8d8f36ed83 100644
--- a/packages/carbon-web-components/tests/integration/ui/multi-select_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/multi-select_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-multi-select', () => {
+describe('cds-multi-select', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-multi-select--default`
@@ -15,12 +15,12 @@ describe('bx-multi-select', () => {
   });
 
   it('should have multi select interactive', async () => {
-    await page.click('bx-multi-select .bx--list-box__field');
-    await expect(page).toHaveSelector('bx-multi-select .bx--list-box__menu', {
+    await page.click('cds-multi-select .cds--list-box__field');
+    await expect(page).toHaveSelector('cds-multi-select .cds--list-box__menu', {
       state: 'visible',
     });
-    await page.click('bx-multi-select .bx--list-box__field');
-    await expect(page).toHaveSelector('bx-multi-select .bx--list-box__menu', {
+    await page.click('cds-multi-select .cds--list-box__field');
+    await expect(page).toHaveSelector('cds-multi-select .cds--list-box__menu', {
       state: 'hidden',
     });
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/notification_steps.js b/packages/carbon-web-components/tests/integration/ui/notification_steps.js
index c2f1f5f5009..a678b723e27 100644
--- a/packages/carbon-web-components/tests/integration/ui/notification_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/notification_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-inline-notification', () => {
+describe('cds-inline-notification', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-notifications--inline`
@@ -16,15 +16,15 @@ describe('bx-inline-notification', () => {
 
   it('should have notification closable', async () => {
     await page.click(
-      'bx-inline-notification .bx--inline-notification__close-button'
+      'cds-inline-notification .cds--inline-notification__close-button'
     );
-    await expect(page).toHaveSelector('bx-inline-notification', {
+    await expect(page).toHaveSelector('cds-inline-notification', {
       state: 'hidden',
     });
   });
 });
 
-describe('bx-toast-notification', () => {
+describe('cds-toast-notification', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-notifications--toast`
@@ -33,9 +33,9 @@ describe('bx-toast-notification', () => {
 
   it('should have notification closable', async () => {
     await page.click(
-      'bx-toast-notification .bx--toast-notification__close-button'
+      'cds-toast-notification .cds--toast-notification__close-button'
     );
-    await expect(page).toHaveSelector('bx-toast-notification', {
+    await expect(page).toHaveSelector('cds-toast-notification', {
       state: 'hidden',
     });
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/overflow-menu_steps.js b/packages/carbon-web-components/tests/integration/ui/overflow-menu_steps.js
index 28d4baa39b2..0a622dc8af6 100644
--- a/packages/carbon-web-components/tests/integration/ui/overflow-menu_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/overflow-menu_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-overflow-menu', () => {
+describe('cds-overflow-menu', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-overflow-menu--default`
@@ -15,12 +15,12 @@ describe('bx-overflow-menu', () => {
   });
 
   it('should have overflow menu interactive', async () => {
-    await page.click('bx-overflow-menu');
-    await expect(page).toHaveSelector('bx-overflow-menu-body', {
+    await page.click('cds-overflow-menu');
+    await expect(page).toHaveSelector('cds-overflow-menu-body', {
       state: 'visible',
     });
     await page.click('html');
-    await expect(page).toHaveSelector('bx-overflow-menu-body', {
+    await expect(page).toHaveSelector('cds-overflow-menu-body', {
       state: 'hidden',
     });
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/tabs_steps.js b/packages/carbon-web-components/tests/integration/ui/tabs_steps.js
index 71be16f82a7..c3ec5a35e65 100644
--- a/packages/carbon-web-components/tests/integration/ui/tabs_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/tabs_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-tabs', () => {
+describe('cds-tabs', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-tabs--default`
@@ -15,7 +15,7 @@ describe('bx-tabs', () => {
   });
 
   it('should have tabs interactive', async () => {
-    await page.click('bx-tab[value="router"] a');
+    await page.click('cds-tab[value="router"] a');
     await expect(page).toHaveSelector('#panel-all', { state: 'hidden' });
     await expect(page).toHaveSelector('#panel-cloudFoundry', {
       state: 'hidden',
diff --git a/packages/carbon-web-components/tests/integration/ui/tile_steps.js b/packages/carbon-web-components/tests/integration/ui/tile_steps.js
index 7dbf07bf9ef..6c0126058f2 100644
--- a/packages/carbon-web-components/tests/integration/ui/tile_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/tile_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-tile', () => {
+describe('cds-tile', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-tile--expandable`
@@ -15,18 +15,18 @@ describe('bx-tile', () => {
   });
 
   it('should have the expando interactive', async () => {
-    await page.click('bx-expandable-tile button');
+    await page.click('cds-expandable-tile button');
     // Playwright's auto-wait-for-transitionend feature does not seems to work here,
     // presubably because animation happens after EOM
     await page.waitForFunction(
-      () => document.querySelector('bx-expandable-tile').offsetHeight > 300,
+      () => document.querySelector('cds-expandable-tile').offsetHeight > 300,
       { polling: 'raf' }
     );
-    await page.click('bx-expandable-tile button');
+    await page.click('cds-expandable-tile button');
     // Playwright's auto-wait-for-transitionend feature does not seems to work here,
     // presubably because animation happens after EOM
     await page.waitForFunction(
-      () => document.querySelector('bx-expandable-tile').offsetHeight < 300,
+      () => document.querySelector('cds-expandable-tile').offsetHeight < 300,
       { polling: 'raf' }
     );
   });
diff --git a/packages/carbon-web-components/tests/integration/ui/tooltip_steps.js b/packages/carbon-web-components/tests/integration/ui/tooltip_steps.js
index 0f4a8877f53..ae7e7ead460 100644
--- a/packages/carbon-web-components/tests/integration/ui/tooltip_steps.js
+++ b/packages/carbon-web-components/tests/integration/ui/tooltip_steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('bx-tooltip', () => {
+describe('cds-tooltip', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-tooltip--default`
@@ -15,9 +15,9 @@ describe('bx-tooltip', () => {
   });
 
   it('should have overflow menu interactive', async () => {
-    await page.click('bx-tooltip');
-    await expect(page).toHaveSelector('bx-tooltip-body', { state: 'visible' });
+    await page.click('cds-tooltip');
+    await expect(page).toHaveSelector('cds-tooltip-body', { state: 'visible' });
     await page.click('html');
-    await expect(page).toHaveSelector('bx-tooltip-body', { state: 'hidden' });
+    await expect(page).toHaveSelector('cds-tooltip-body', { state: 'hidden' });
   });
 });
diff --git a/packages/carbon-web-components/tests/karma.conf.js b/packages/carbon-web-components/tests/karma.conf.js
index 006d37d894d..d79d2091742 100644
--- a/packages/carbon-web-components/tests/karma.conf.js
+++ b/packages/carbon-web-components/tests/karma.conf.js
@@ -117,8 +117,7 @@ module.exports = function setupKarma(config) {
             test: /\.js$/,
             include: [
               __dirname,
-              path.dirname(require.resolve('lit-html')),
-              path.dirname(require.resolve('lit-element')),
+              path.dirname(require.resolve('lit')),
               path.dirname(require.resolve('@webcomponents/custom-elements')),
               // `ShadyCSS` NPM package is missing its entry point file
               path.dirname(
@@ -163,6 +162,7 @@ module.exports = function setupKarma(config) {
                   sassOptions: {
                     includePaths: [
                       path.resolve(__dirname, '..', 'node_modules'),
+                      path.resolve(__dirname, '../../../', 'node_modules'),
                     ],
                   },
                 },
diff --git a/packages/carbon-web-components/tests/snapshots/bx-btn.md b/packages/carbon-web-components/tests/snapshots/bx-btn.md
deleted file mode 100644
index ece6934291f..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-btn.md
+++ /dev/null
@@ -1,97 +0,0 @@
-# `bx-btn`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes for <button>`
-
-```
-<button
-  class="bx--btn bx--btn--primary"
-  id="button"
-  part="button"
->
-  <slot>
-  </slot>
-  <slot name="icon">
-  </slot>
-</button>
-
-```
-
-####   `should render with various attributes for <button>`
-
-```
-<button
-  autofocus=""
-  class="bx--btn bx--btn--disabled bx--btn--secondary bx--btn--sm"
-  disabled=""
-  id="button"
-  part="button"
-  type="submit"
->
-  <slot>
-  </slot>
-  <slot name="icon">
-  </slot>
-</button>
-
-```
-
-####   `should render with minimum attributes for <a>`
-
-```
-<a
-  class="bx--btn bx--btn--primary"
-  href="about:blank"
-  id="button"
-  part="button"
-  role="button"
->
-  <slot>
-  </slot>
-  <slot name="icon">
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes for <a>`
-
-```
-<a
-  class="bx--btn bx--btn--secondary bx--btn--sm"
-  download="file-name-foo"
-  href="about:blank"
-  hreflang="en"
-  id="button"
-  part="button"
-  ping="about:blank"
-  rel="noopener"
-  role="link"
-  target="_blank"
-  type="text/plain"
->
-  <slot>
-  </slot>
-  <slot name="icon">
-  </slot>
-</a>
-
-```
-
-####   `should render disabled state for <a>`
-
-```
-<p
-  class="bx--btn bx--btn--disabled bx--btn--secondary bx--btn--sm"
-  id="button"
-  part="button"
->
-  <slot>
-  </slot>
-  <slot name="icon">
-  </slot>
-</p>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-checkbox.md b/packages/carbon-web-components/tests/snapshots/bx-checkbox.md
deleted file mode 100644
index fcf154a7dd7..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-checkbox.md
+++ /dev/null
@@ -1,54 +0,0 @@
-# `bx-checkbox`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<input
-  aria-checked="false"
-  class="bx--checkbox"
-  id="checkbox"
-  part="input"
-  type="checkbox"
->
-<label
-  class="bx--checkbox-label"
-  for="checkbox"
-  part="label"
->
-  <span class="bx--checkbox-label-text">
-    <slot>
-    </slot>
-  </span>
-</label>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<input
-  aria-checked="mixed"
-  class="bx--checkbox"
-  disabled=""
-  id="checkbox"
-  name="name-foo"
-  part="input"
-  type="checkbox"
-  value="value-foo"
->
-<label
-  class="bx--checkbox-label bx--visually-hidden"
-  for="checkbox"
-  part="label"
->
-  <span class="bx--checkbox-label-text">
-    <slot>
-      label-text-foo
-    </slot>
-  </span>
-</label>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-code-snippet.md b/packages/carbon-web-components/tests/snapshots/bx-code-snippet.md
deleted file mode 100644
index d36220e667e..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-code-snippet.md
+++ /dev/null
@@ -1,195 +0,0 @@
-# `bx-code-snippet`
-
-## `Rendering`
-
-####   `Should render with minimum attributes for single line mode`
-
-```
-<div
-  aria-label="code-snippet"
-  class="bx--snippet-container"
-  role="textbox"
-  tabindex="0"
->
-  <code>
-    <pre>
-      <slot>
-      </slot>
-    </pre>
-  </code>
-</div>
-<button
-  class="bx--snippet-button"
-  title="Copy to clipboard"
-  type="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="Copied!"
-  >
-  </div>
-</button>
-
-```
-
-####   `Should render with minimum attributes for multi line mode`
-
-```
-<div
-  aria-label="code-snippet"
-  class="bx--snippet-container"
-  role="textbox"
-  tabindex="0"
->
-  <code>
-    <pre>
-      <slot>
-      </slot>
-    </pre>
-  </code>
-</div>
-<button
-  class="bx--snippet-button"
-  title="Copy to clipboard"
-  type="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="Copied!"
-  >
-  </div>
-</button>
-
-```
-
-####   `Should render with minimum attributes for inline mode`
-
-```
-<button
-  class="bx--snippet bx--snippet--inline"
-  title="Copy to clipboard"
-  type="button"
->
-  <code aria-label="code-snippet">
-    <slot>
-    </slot>
-  </code>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="Copied!"
-  >
-  </div>
-</button>
-
-```
-
-####   `Should render with various attributes for single line mode`
-
-```
-<div
-  aria-label="code-assistive-text-foo"
-  class="bx--snippet-container"
-  role="textbox"
-  tabindex="0"
->
-  <code>
-    <pre>
-      <slot>
-      </slot>
-    </pre>
-  </code>
-</div>
-<button
-  class="bx--snippet-button"
-  title="copy-button-assistive-text-foo"
-  type="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="copy-button-feedback-text-foo"
-  >
-  </div>
-</button>
-
-```
-
-####   `Should render with various attributes for multi line mode`
-
-```
-<div
-  aria-label="code-assistive-text-foo"
-  class="bx--snippet-container"
-  role="textbox"
-  tabindex="0"
->
-  <code>
-    <pre>
-      <slot>
-      </slot>
-    </pre>
-  </code>
-</div>
-<button
-  class="bx--snippet-button"
-  title="copy-button-assistive-text-foo"
-  type="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="copy-button-feedback-text-foo"
-  >
-  </div>
-</button>
-
-```
-
-####   `Should render with various attributes for inline mode`
-
-```
-<button
-  class="bx--snippet bx--snippet--inline"
-  title="copy-button-assistive-text-foo"
-  type="button"
->
-  <code aria-label="code-assistive-text-foo">
-    <slot>
-    </slot>
-  </code>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="copy-button-feedback-text-foo"
-  >
-  </div>
-</button>
-
-```
-
-## `Expand/collapse button in multi line mode`
-
-####   `Should render the expando`
-
-```
-<button
-  class="bx--snippet-btn--expand"
-  type="button"
->
-  <span
-    class="bx--snippet-btn--text"
-    id="button-text"
-  >
-    <slot name="expand-button-text">
-      expand-button-text-foo
-    </slot>
-  </span>
-</button>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-combo-box.md b/packages/carbon-web-components/tests/snapshots/bx-combo-box.md
deleted file mode 100644
index 6665c653fb2..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-combo-box.md
+++ /dev/null
@@ -1,134 +0,0 @@
-# `bx-combo-box`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<label
-  class="bx--label"
-  part="label-text"
->
-  <slot name="label-text">
-    undefined
-  </slot>
-</label>
-<div
-  class="bx--combo-box bx--dropdown bx--list-box"
-  role="listbox"
->
-  <div
-    aria-controls="menu-body"
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
-    class="bx--list-box__field"
-    part="trigger-button"
-  >
-    <input
-      aria-autocomplete="list"
-      aria-controls="menu-body"
-      aria-label=""
-      class="bx--text-input"
-      id="trigger-label"
-      placeholder="undefined"
-      role="combobox"
-    >
-    <div class="bx--list-box__menu-icon">
-    </div>
-  </div>
-</div>
-<div
-  class="bx--form__helper-text"
-  part="helper-text"
->
-  <slot name="helper-text">
-    undefined
-  </slot>
-</div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<label
-  class="bx--label bx--label--disabled"
-  part="label-text"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div
-  class="bx--combo-box bx--dropdown bx--dropdown--invalid bx--list-box bx--list-box--disabled bx--list-box--expanded"
-  data-invalid=""
-  role="listbox"
->
-  <div
-    aria-controls="menu-body"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
-    class="bx--list-box__field"
-    part="trigger-button"
-  >
-    <input
-      aria-autocomplete="list"
-      aria-controls="menu-body"
-      aria-label=""
-      class="bx--text-input"
-      disabled=""
-      id="trigger-label"
-      placeholder="trigger-content-foo"
-      role="combobox"
-    >
-    <div
-      class="bx--list-box__selection"
-      id="selection-button"
-      role="button"
-      tabindex="0"
-      title=""
-    >
-    </div>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-    </div>
-  </div>
-  <div
-    class="bx--list-box__menu"
-    id="menu-body"
-    part="menu-body"
-    role="listbox"
-    tabindex="-1"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-<div
-  class="bx--form-requirement"
-  part="validity-message"
->
-  <slot name="validity-message">
-    validity-message-foo
-  </slot>
-</div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-copy-button.md b/packages/carbon-web-components/tests/snapshots/bx-copy-button.md
deleted file mode 100644
index d4a4cb5ddd3..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-copy-button.md
+++ /dev/null
@@ -1,42 +0,0 @@
-# `bx-copy-button`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<button
-  class="bx--snippet-button"
-  title="Copy to clipboard"
-  type="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="Copied!"
-  >
-  </div>
-</button>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<button
-  class="bx--snippet-button"
-  title="button-assistive-text-foo"
-  type="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--btn--copy__feedback"
-    data-feedback="feedback-text-foo"
-  >
-  </div>
-</button>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-dropdown.md b/packages/carbon-web-components/tests/snapshots/bx-dropdown.md
deleted file mode 100644
index 45632fa8e61..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-dropdown.md
+++ /dev/null
@@ -1,121 +0,0 @@
-# `bx-dropdown`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<label
-  class="bx--label"
-  hidden=""
-  part="label-text"
->
-  <slot name="label-text">
-  </slot>
-</label>
-<div
-  class="bx--dropdown bx--list-box"
-  role="listbox"
->
-  <div
-    aria-controls="menu-body"
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
-    class="bx--list-box__field"
-    part="trigger-button"
-    role="button"
-    tabindex="0"
-  >
-    <span
-      class="bx--list-box__label"
-      id="trigger-label"
-    >
-    </span>
-    <div class="bx--list-box__menu-icon">
-    </div>
-  </div>
-</div>
-<div
-  class="bx--form__helper-text"
-  hidden=""
-  part="helper-text"
->
-  <slot name="helper-text">
-  </slot>
-</div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<label
-  class="bx--label bx--label--disabled"
-  part="label-text"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div
-  class="bx--dropdown bx--list-box bx--list-box--disabled bx--list-box--expanded"
-  role="listbox"
->
-  <div
-    aria-controls="menu-body"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
-    class="bx--list-box__field"
-    part="trigger-button"
-    role="button"
-    tabindex="0"
-  >
-    <span
-      class="bx--list-box__label"
-      id="trigger-label"
-    >
-      Option 3
-    </span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-    </div>
-  </div>
-  <div
-    class="bx--list-box__menu"
-    id="menu-body"
-    part="menu-body"
-    role="listbox"
-    tabindex="-1"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-<div
-  class="bx--form__helper-text bx--form__helper-text--disabled"
-  part="helper-text"
->
-  <slot name="helper-text">
-    helper-text-foo
-  </slot>
-</div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-inline-loading.md b/packages/carbon-web-components/tests/snapshots/bx-inline-loading.md
deleted file mode 100644
index 002f9c53808..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-inline-loading.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `bx-inline-loading`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--inline-loading__animation">
-  <div class="bx--loading bx--loading--small">
-  </div>
-</div>
-<p class="bx--inline-loading__text">
-  <slot>
-  </slot>
-</p>
-
-```
-
-####   `should render with unknown status`
-
-```
-<p class="bx--inline-loading__text">
-  <slot>
-  </slot>
-</p>
-
-```
-
-####   `should render with inactive status`
-
-```
-<div class="bx--inline-loading__animation">
-  <div class="bx--loading bx--loading--small bx--loading--stop">
-  </div>
-</div>
-<p class="bx--inline-loading__text">
-  <slot>
-  </slot>
-</p>
-
-```
-
-####   `should render with finished status`
-
-```
-<div class="bx--inline-loading__animation">
-</div>
-<p class="bx--inline-loading__text">
-  <slot>
-  </slot>
-</p>
-
-```
-
-####   `should render with error status`
-
-```
-<div class="bx--inline-loading__animation">
-</div>
-<p class="bx--inline-loading__text">
-  <slot>
-  </slot>
-</p>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-inline-notification.md b/packages/carbon-web-components/tests/snapshots/bx-inline-notification.md
deleted file mode 100644
index 6b3b5ba58d8..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-inline-notification.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# `bx-inline-notification`
-
-## `Rendering titles`
-
-####   `Should render with minimum attributes`
-
-```
-<div class="bx--inline-notification__details">
-  <div class="bx--inline-notification__text-wrapper">
-    <p class="bx--inline-notification__title">
-      <slot name="title">
-      </slot>
-    </p>
-    <div class="bx--inline-notification__subtitle">
-      <slot name="subtitle">
-      </slot>
-    </div>
-    <slot>
-    </slot>
-  </div>
-</div>
-<button
-  class="bx--inline-notification__close-button"
-  type="button"
->
-</button>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<div class="bx--inline-notification__details">
-  <div class="bx--inline-notification__text-wrapper">
-    <p class="bx--inline-notification__title">
-      title-foo
-      <slot name="title">
-      </slot>
-    </p>
-    <div class="bx--inline-notification__subtitle">
-      subtitle-foo
-      <slot name="subtitle">
-      </slot>
-    </div>
-    <slot>
-    </slot>
-  </div>
-</div>
-<button
-  aria-label="close-button-label-foo"
-  class="bx--inline-notification__close-button"
-  title="close-button-label-foo"
-  type="button"
->
-</button>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-input.md b/packages/carbon-web-components/tests/snapshots/bx-input.md
deleted file mode 100644
index 9e81c03af03..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-input.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# `bx-input`
-
-## `Rendering`
-
-####   `Should render with various attributes`
-
-```
-<label
-  class="bx--label bx--label--disabled"
-  for="input"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div class="bx--text-input__field-wrapper">
-  <input
-    aria-describedby="helper-text"
-    autocomplete="on"
-    autofocus=""
-    class="bx--text-input bx--text-input--light bx--text-input--xl"
-    disabled=""
-    id="input"
-    name="name-foo"
-    pattern="pattern-foo"
-    placeholder="placeholder-foo"
-    readonly=""
-    required=""
-    type="text"
-  >
-</div>
-<div
-  class="bx--form__helper-text bx--form__helper-text--disabled"
-  id="helper-text"
->
-  <slot name="helper-text">
-    helper-text-foo
-  </slot>
-</div>
-<div class="bx--form-requirement">
-  <slot name="validity-message">
-    validity-message-foo
-  </slot>
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-link.md b/packages/carbon-web-components/tests/snapshots/bx-link.md
deleted file mode 100644
index 07e6d61be71..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-link.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# `bx-link`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  class="bx--link"
-  href="about:blank"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--link__icon"
-    hidden=""
-  >
-    <slot name="icon">
-    </slot>
-  </div>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  class="bx--link"
-  download="file-name-foo"
-  href="about:blank"
-  hreflang="en"
-  id="link"
-  part="link"
-  ping="about:blank"
-  rel="noopener"
-  role="button"
-  target="_blank"
-  type="text/plain"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--link__icon"
-    hidden=""
-  >
-    <slot name="icon">
-    </slot>
-  </div>
-</a>
-
-```
-
-####   `should render disabled state`
-
-```
-<p
-  class="bx--link bx--link--disabled"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</p>
-<div
-  class="bx--link__icon"
-  hidden=""
->
-  <slot name="icon">
-  </slot>
-</div>
-<p>
-</p>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-multi-select.md b/packages/carbon-web-components/tests/snapshots/bx-multi-select.md
deleted file mode 100644
index 16845927530..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-multi-select.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# `bx-multi-select`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<label
-  class="bx--label"
-  hidden=""
-  part="label-text"
->
-  <slot name="label-text">
-  </slot>
-</label>
-<div
-  class="bx--dropdown bx--list-box"
-  role="listbox"
->
-  <div
-    aria-controls="menu-body"
-    aria-expanded="false"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
-    class="bx--list-box__field"
-    part="trigger-button"
-    role="button"
-    tabindex="0"
-  >
-    <span
-      class="bx--list-box__label"
-      id="trigger-label"
-    >
-    </span>
-    <div class="bx--list-box__menu-icon">
-    </div>
-  </div>
-</div>
-<div
-  class="bx--form__helper-text"
-  hidden=""
-  part="helper-text"
->
-  <slot name="helper-text">
-  </slot>
-</div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<label
-  class="bx--label bx--label--disabled"
-  part="label-text"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div
-  class="bx--dropdown bx--dropdown--inline bx--dropdown--invalid bx--list-box bx--list-box--disabled bx--list-box--expanded bx--list-box--inline"
-  data-invalid=""
-  role="listbox"
->
-  <div
-    aria-controls="menu-body"
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-labelledby="trigger-label"
-    aria-owns="menu-body"
-    class="bx--list-box__field"
-    part="trigger-button"
-    role="button"
-    tabindex="0"
-  >
-    <div
-      class="bx--list-box__selection bx--list-box__selection--multi bx--tag--filter"
-      id="selection-button"
-      role="button"
-      tabindex="0"
-      title="clear-selection-label-foo"
-    >
-      1
-    </div>
-    <span
-      class="bx--list-box__label"
-      id="trigger-label"
-    >
-      trigger-content-foo
-    </span>
-    <div class="bx--list-box__menu-icon bx--list-box__menu-icon--open">
-    </div>
-  </div>
-  <div
-    class="bx--list-box__menu"
-    id="menu-body"
-    part="menu-body"
-    role="listbox"
-    tabindex="-1"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-<div
-  class="bx--form-requirement"
-  part="validity-message"
->
-  <slot name="validity-message">
-    validity-message-foo
-  </slot>
-</div>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-number-input.md b/packages/carbon-web-components/tests/snapshots/bx-number-input.md
deleted file mode 100644
index 3f86bce87cc..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-number-input.md
+++ /dev/null
@@ -1,78 +0,0 @@
-# `bx-number-input`
-
-## `Rendering`
-
-####   `Should render with various attributes`
-
-```
-<div class="bx--number bx--number--md">
-  <label
-    class="bx--label bx--label--disabled"
-    for="input"
-  >
-    <slot name="label-text">
-    </slot>
-  </label>
-  <div class="bx--number__input-wrapper">
-    <input
-      aria-atomic="true"
-      disabled=""
-      id="input"
-      max="200"
-      min="-100"
-      name="name-foo"
-      placeholder="placeholder-foo"
-      role="alert"
-      step="1"
-      type="number"
-    >
-    <div class="bx--number__controls">
-      <button
-        aria-atomic="true"
-        aria-label="increase number input"
-        aria-live="polite"
-        class="bx--number__control-btn up-icon"
-        disabled=""
-        type="button"
-      >
-      </button>
-      <button
-        aria-atomic="true"
-        aria-label="decrease number input"
-        aria-live="polite"
-        class="bx--number__control-btn down-icon"
-        disabled=""
-        type="button"
-      >
-      </button>
-    </div>
-  </div>
-  <div class="bx--form__helper-text bx--form__helper-text--disabled">
-    <slot name="helper-text">
-    </slot>
-  </div>
-  <div
-    class="bx--form-requirement"
-    hidden=""
-  >
-    <slot name="validity-message">
-    </slot>
-  </div>
-  <div
-    class="bx--form-requirement"
-    hidden=""
-  >
-    <slot name="validity-message-max">
-    </slot>
-  </div>
-  <div
-    class="bx--form-requirement"
-    hidden=""
-  >
-    <slot name="validity-message-min">
-    </slot>
-  </div>
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-pagination.md b/packages/carbon-web-components/tests/snapshots/bx-pagination.md
deleted file mode 100644
index fed397cb91a..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-pagination.md
+++ /dev/null
@@ -1,157 +0,0 @@
-# `bx-pagination`
-
-## `Misc attributes`
-
-####   `should render <bx-pagination> with minimum attributes`
-
-```
-<div class="bx--pagination__left">
-  <slot name="page-sizes-select">
-  </slot>
-  <div class="bx-ce--pagination__divider">
-  </div>
-  <span class="bx--pagination__items-count bx--pagination__text">
-    Item 1–10
-  </span>
-</div>
-<div class="bx-ce--pagination__divider">
-</div>
-<div class="bx--pagination__right">
-  <slot>
-  </slot>
-  <div class="bx--pagination__control-buttons">
-    <button
-      class="bx--pagination__button bx--pagination__button--backward bx--pagination__button--no-index"
-      disabled=""
-      title="Previous page"
-    >
-    </button>
-    <button
-      class="bx--pagination__button bx--pagination__button--forward"
-      title="Next page"
-    >
-    </button>
-  </div>
-</div>
-
-```
-
-####   `should render <bx-pagination> with various attributes`
-
-```
-<div class="bx--pagination__left">
-  <slot name="page-sizes-select">
-  </slot>
-  <div class="bx-ce--pagination__divider">
-  </div>
-  <span class="bx--pagination__items-count bx--pagination__text">
-    11–30 of 200 items
-  </span>
-</div>
-<div class="bx-ce--pagination__divider">
-</div>
-<div class="bx--pagination__right">
-  <slot>
-  </slot>
-  <div class="bx--pagination__control-buttons">
-    <button
-      class="bx--pagination__button bx--pagination__button--backward"
-      title="Previous page"
-    >
-    </button>
-    <button
-      class="bx--pagination__button bx--pagination__button--forward"
-      title="Next page"
-    >
-    </button>
-  </div>
-</div>
-
-```
-
-####   `should render <bx-page-sizes-select> with minimum attributes`
-
-```
-<label
-  class="bx--pagination__text"
-  for="select"
->
-  <slot name="label-text">
-    Items per page:
-  </slot>
-</label>
-<div class="bx--select__item-count">
-  <select
-    class="bx--select-input"
-    id="select"
-  >
-    <option value="10">
-      10
-    </option>
-    <option value="20">
-      20
-    </option>
-    <option value="30">
-      30
-    </option>
-  </select>
-</div>
-<div hidden="">
-  <slot>
-  </slot>
-</div>
-
-```
-
-####   `should render <bx-pages-select> with minimum attributes`
-
-```
-<div class="bx--select__page-number">
-  <label
-    class="bx--label bx--visually-hidden"
-    for="select"
-  >
-    Page number, of 10 pages
-  </label>
-  <select class="bx--select-input">
-    <option
-      selected=""
-      value="0"
-    >
-      1
-    </option>
-    <option value="1">
-      2
-    </option>
-    <option value="2">
-      3
-    </option>
-    <option value="3">
-      4
-    </option>
-    <option value="4">
-      5
-    </option>
-    <option value="5">
-      6
-    </option>
-    <option value="6">
-      7
-    </option>
-    <option value="7">
-      8
-    </option>
-    <option value="8">
-      9
-    </option>
-    <option value="9">
-      10
-    </option>
-  </select>
-</div>
-<span class="bx--pagination__text">
-  of 10 pages
-</span>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-progress-step.md b/packages/carbon-web-components/tests/snapshots/bx-progress-step.md
deleted file mode 100644
index 0f218273821..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-progress-step.md
+++ /dev/null
@@ -1,46 +0,0 @@
-# `bx-progress-step`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<slot>
-  <p
-    aria-describedby="label-tooltip"
-    class="bx--progress-label"
-    role="button"
-    tabindex="0"
-  >
-  </p>
-</slot>
-<slot name="secondary-label-text">
-</slot>
-<span class="bx--progress-line">
-</span>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<slot>
-  <p
-    aria-describedby="label-tooltip"
-    class="bx--progress-label"
-    role="button"
-    tabindex="0"
-  >
-    label-text-foo
-  </p>
-</slot>
-<slot name="secondary-label-text">
-  <p class="bx--progress-optional">
-    secondary-label-text-foo
-  </p>
-</slot>
-<span class="bx--progress-line">
-</span>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-radio-button.md b/packages/carbon-web-components/tests/snapshots/bx-radio-button.md
deleted file mode 100644
index 92db808bac0..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-radio-button.md
+++ /dev/null
@@ -1,55 +0,0 @@
-# `bx-radio-button`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<input
-  class="bx--radio-button"
-  id="input"
-  tabindex="-1"
-  type="radio"
-  value="staging"
->
-<label
-  class="bx--radio-button__label"
-  for="input"
->
-  <span class="bx--radio-button__appearance">
-  </span>
-  <span>
-    <slot>
-    </slot>
-  </span>
-</label>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<input
-  class="bx--radio-button"
-  disabled=""
-  id="input"
-  name="name-foo"
-  tabindex="0"
-  type="radio"
-  value="staging"
->
-<label
-  class="bx--radio-button__label"
-  for="input"
->
-  <span class="bx--radio-button__appearance">
-  </span>
-  <span class="bx--visually-hidden">
-    <slot>
-      label-text-foo
-    </slot>
-  </span>
-</label>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-search.md b/packages/carbon-web-components/tests/snapshots/bx-search.md
deleted file mode 100644
index 3fde9a10e7f..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-search.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# `bx-search`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<label
-  class="bx--label"
-  for="input"
-  part="label-text"
->
-  <slot>
-  </slot>
-</label>
-<input
-  class="bx--search-input"
-  id="input"
-  part="input"
-  role="searchbox"
->
-<button
-  aria-label=""
-  class="bx--search-close bx--search-close--hidden"
-  part="close-button"
-  type="button"
->
-</button>
-
-```
-
-####   `should render with various attributes`
-
-```
-<label
-  class="bx--label"
-  for="input"
-  part="label-text"
->
-  <slot>
-    label-text-foo
-  </slot>
-</label>
-<input
-  class="bx--search-input"
-  disabled=""
-  id="input"
-  name="name-foo"
-  part="input"
-  placeholder="placeholder-foo"
-  role="searchbox"
-  type="submit"
-  value="value-foo"
->
-<button
-  aria-label="close-button-assistive-text-foo"
-  class="bx--search-close"
-  part="close-button"
-  type="button"
->
-</button>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-select.md b/packages/carbon-web-components/tests/snapshots/bx-select.md
deleted file mode 100644
index d076a909dc3..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-select.md
+++ /dev/null
@@ -1,225 +0,0 @@
-# `bx-select`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<label
-  class="bx--label"
-  for="input"
->
-  <slot name="label-text">
-  </slot>
-</label>
-<div class="bx--select-input__wrapper">
-  <select
-    aria-invalid="false"
-    class="bx--select-input bx--select-input--md"
-    id="input"
-  >
-    <optgroup
-      class="bx--select-optgroup"
-      label="Category 1"
-    >
-      <option
-        class="bx--select-option"
-        label="Option 1"
-        value="all"
-      >
-        Option 1
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 2"
-        value="cloudFoundry"
-      >
-        Option 2
-      </option>
-    </optgroup>
-    <optgroup
-      class="bx--select-optgroup"
-      label="Category 2"
-    >
-      <option
-        class="bx--select-option"
-        label="Option 3"
-        value="staging"
-      >
-        Option 3
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 4"
-        value="dea"
-      >
-        Option 4
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 5"
-        value="router"
-      >
-        Option 5
-      </option>
-    </optgroup>
-  </select>
-</div>
-<div class="bx--form__helper-text">
-  <slot name="helper-text">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<label
-  class="bx--label bx--label--disabled"
-  for="input"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div class="bx--select-input__wrapper">
-  <select
-    aria-invalid="false"
-    class="bx--select-input bx--select-input--xl"
-    disabled=""
-    id="input"
-  >
-    <optgroup
-      class="bx--select-optgroup"
-      label="Category 1"
-    >
-      <option
-        class="bx--select-option"
-        label="Option 1"
-        value="all"
-      >
-        Option 1
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 2"
-        value="cloudFoundry"
-      >
-        Option 2
-      </option>
-    </optgroup>
-    <optgroup
-      class="bx--select-optgroup"
-      label="Category 2"
-    >
-      <option
-        class="bx--select-option"
-        label="Option 3"
-        value="staging"
-      >
-        Option 3
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 4"
-        value="dea"
-      >
-        Option 4
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 5"
-        value="router"
-      >
-        Option 5
-      </option>
-    </optgroup>
-  </select>
-</div>
-<div class="bx--form__helper-text bx--form__helper-text--disabled">
-  <slot name="helper-text">
-    helper-text-foo
-  </slot>
-</div>
-
-```
-
-####   `should render invalid state`
-
-```
-<label
-  class="bx--label"
-  for="input"
->
-  <slot name="label-text">
-  </slot>
-</label>
-<div
-  class="bx--select-input__wrapper"
-  data-invalid=""
->
-  <select
-    aria-describedby="validity-message"
-    aria-invalid="true"
-    class="bx--select-input bx--select-input--md"
-    id="input"
-  >
-    <optgroup
-      class="bx--select-optgroup"
-      label="Category 1"
-    >
-      <option
-        class="bx--select-option"
-        label="Option 1"
-        value="all"
-      >
-        Option 1
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 2"
-        value="cloudFoundry"
-      >
-        Option 2
-      </option>
-    </optgroup>
-    <optgroup
-      class="bx--select-optgroup"
-      label="Category 2"
-    >
-      <option
-        class="bx--select-option"
-        label="Option 3"
-        value="staging"
-      >
-        Option 3
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 4"
-        value="dea"
-      >
-        Option 4
-      </option>
-      <option
-        class="bx--select-option"
-        label="Option 5"
-        value="router"
-      >
-        Option 5
-      </option>
-    </optgroup>
-  </select>
-</div>
-<div
-  class="bx--form-requirement"
-  id="validity-message"
->
-  <slot name="validity-message">
-    validity-message-foo
-  </slot>
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-slider.md b/packages/carbon-web-components/tests/snapshots/bx-slider.md
deleted file mode 100644
index 51dee6d5543..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-slider.md
+++ /dev/null
@@ -1,124 +0,0 @@
-# `bx-slider`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<label class="bx--label">
-  <slot name="label-text">
-  </slot>
-</label>
-<div class="bx--slider-container">
-  <span class="bx--slider__range-label">
-    <slot name="min-text">
-      0
-    </slot>
-  </span>
-  <div
-    class="bx--slider"
-    role="presentation"
-  >
-    <div
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
-      class="bx--slider__thumb"
-      id="thumb"
-      role="slider"
-      style="left: 50%"
-      tabindex="0"
-    >
-    </div>
-    <div
-      class="bx--slider__track"
-      id="track"
-    >
-    </div>
-    <div class="bx-ce--slider__filled-track-container">
-      <div
-        class="bx--slider__filled-track"
-        style="transform: translate(0%, -50%) scaleX(0.5)"
-      >
-      </div>
-    </div>
-    <input
-      class="bx--slider__input"
-      max="100"
-      min="0"
-      type="hidden"
-      value="50"
-    >
-  </div>
-  <span class="bx--slider__range-label">
-    <slot name="max-text">
-      100
-    </slot>
-  </span>
-  <slot>
-  </slot>
-</div>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<label class="bx--label bx--label--disabled">
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div class="bx--slider-container">
-  <span class="bx--slider__range-label">
-    <slot name="min-text">
-      0
-    </slot>
-  </span>
-  <div
-    class="bx--slider bx--slider--disabled"
-    role="presentation"
-  >
-    <div
-      aria-valuemax="100"
-      aria-valuemin="0"
-      aria-valuenow="50"
-      class="bx--slider__thumb"
-      id="thumb"
-      role="slider"
-      style="left: 50%"
-      tabindex="0"
-    >
-    </div>
-    <div
-      class="bx--slider__track"
-      id="track"
-    >
-    </div>
-    <div class="bx-ce--slider__filled-track-container">
-      <div
-        class="bx--slider__filled-track"
-        style="transform: translate(0%, -50%) scaleX(0.5)"
-      >
-      </div>
-    </div>
-    <input
-      class="bx--slider__input"
-      max="100"
-      min="0"
-      name="name-foo"
-      type="hidden"
-      value="50"
-    >
-  </div>
-  <span class="bx--slider__range-label">
-    <slot name="max-text">
-      100
-    </slot>
-  </span>
-  <slot>
-  </slot>
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-textarea.md b/packages/carbon-web-components/tests/snapshots/bx-textarea.md
deleted file mode 100644
index 06db028ee2c..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-textarea.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# `bx-textarea`
-
-## `Rendering`
-
-####   `Should render with various attributes`
-
-```
-<label
-  class="bx--label bx--label--disabled"
-  for="input"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-</label>
-<div class="bx--text-area__wrapper">
-  <textarea
-    autocomplete=""
-    autofocus=""
-    class="bx--text-area bx--text-area--light bx--text-area--v2"
-    cols="50"
-    disabled=""
-    id="input"
-    name="name-foo"
-    pattern="pattern-foo"
-    placeholder="placeholder-foo"
-    readonly=""
-    required=""
-    rows="4"
-  >
-  </textarea>
-</div>
-<div class="bx--form__helper-text bx--form__helper-text--disabled">
-  <slot name="helper-text">
-    helper-text-foo
-  </slot>
-</div>
-<div class="bx--form-requirement">
-  <slot name="validity-message">
-    validity-message-foo
-  </slot>
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-tile.md b/packages/carbon-web-components/tests/snapshots/bx-tile.md
deleted file mode 100644
index 83067b4f5ff..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-tile.md
+++ /dev/null
@@ -1,297 +0,0 @@
-# `bx-tile`
-
-## `bx-clickable-tile`
-
-##   `Misc attributes`
-
-####     `should render with minimum attributes`
-
-```
-<a
-  class="bx--link bx--tile bx--tile--clickable"
-  id="link"
-  part="link"
-  role="button"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--link__icon"
-    hidden=""
-  >
-    <slot name="icon">
-    </slot>
-  </div>
-</a>
-
-```
-
-####     `should render with various attributes`
-
-```
-<a
-  class="bx--link bx--tile bx--tile--clickable bx--tile--light"
-  download="file-name-foo"
-  href="about:blank"
-  hreflang="en"
-  id="link"
-  part="link"
-  ping="about:blank"
-  rel="noopener"
-  role="button"
-  target="_blank"
-  type="text/plain"
->
-  <slot>
-  </slot>
-  <div
-    class="bx--link__icon"
-    hidden=""
-  >
-    <slot name="icon">
-    </slot>
-  </div>
-</a>
-
-```
-
-####     `should render disabled state`
-
-```
-<p
-  class="bx--link bx--link--disabled bx--tile bx--tile--clickable bx--tile--light"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</p>
-<div
-  class="bx--link__icon"
-  hidden=""
->
-  <slot name="icon">
-  </slot>
-</div>
-<p>
-</p>
-
-```
-
-## `bx-expandable-tile`
-
-##   `Misc attributes`
-
-####     `should render with minimum attributes`
-
-```
-<button
-  aria-controls="below-the-fold-content"
-  aria-expanded="false"
-  aria-labelledby="above-the-fold-content"
-  class="bx--tile__chevron"
->
-</button>
-<div
-  class="bx--tile-content"
-  id="content"
->
-  <div>
-    <slot name="above-the-fold-content">
-    </slot>
-  </div>
-  <div class="bx-ce--expandable-tile--below-the-fold-content">
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
-####     `should render with various attributes`
-
-```
-<button
-  aria-controls="below-the-fold-content"
-  aria-expanded="true"
-  aria-labelledby="above-the-fold-content"
-  class="bx--tile__chevron"
->
-</button>
-<div
-  class="bx--tile-content"
-  id="content"
->
-  <div>
-    <slot name="above-the-fold-content">
-    </slot>
-  </div>
-  <div
-    class="bx-ce--expandable-tile--below-the-fold-content"
-    style="max-height: 0px"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
-## `bx-radio-tile`
-
-##   `Misc attributes`
-
-####     `should render with minimum attributes`
-
-```
-<input
-  class="bx--tile-input"
-  id="input"
-  tabindex="-1"
-  type="radio"
->
-<label
-  class="bx--tile bx--tile--selectable"
-  for="input"
-  tabindex="0"
->
-  <div class="bx--tile__checkmark">
-  </div>
-  <div class="bx--tile-content">
-    <slot>
-    </slot>
-  </div>
-</label>
-
-```
-
-####     `should render with various attributes`
-
-```
-<input
-  class="bx--tile-input"
-  id="input"
-  name="name-foo"
-  tabindex="-1"
-  type="radio"
-  value="value-foo"
->
-<label
-  class="bx--tile bx--tile--light bx--tile--selectable"
-  for="input"
-  tabindex="0"
->
-  <div class="bx--tile__checkmark">
-  </div>
-  <div class="bx--tile-content">
-    <slot>
-    </slot>
-  </div>
-</label>
-
-```
-
-## `bx-selectable-tile`
-
-##   `Misc attributes`
-
-####     `should render with minimum attributes`
-
-```
-<input
-  class="bx--tile-input"
-  id="input"
-  tabindex="-1"
-  type="checkbox"
->
-<label
-  class="bx--tile bx--tile--selectable"
-  for="input"
-  tabindex="0"
->
-  <div class="bx--tile__checkmark">
-  </div>
-  <div class="bx--tile-content">
-    <slot>
-    </slot>
-  </div>
-</label>
-
-```
-
-####     `should render with various attributes`
-
-```
-<input
-  class="bx--tile-input"
-  id="input"
-  name="name-foo"
-  tabindex="-1"
-  type="checkbox"
-  value="value-foo"
->
-<label
-  class="bx--tile bx--tile--light bx--tile--selectable"
-  for="input"
-  tabindex="0"
->
-  <div class="bx--tile__checkmark">
-  </div>
-  <div class="bx--tile-content">
-    <slot>
-    </slot>
-  </div>
-</label>
-
-```
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<input
-  class="bx--tile-input"
-  id="input"
-  tabindex="-1"
-  type="checkbox"
->
-<label
-  class="bx--tile bx--tile--selectable"
-  for="input"
-  tabindex="0"
->
-  <div class="bx--tile__checkmark">
-  </div>
-  <div class="bx--tile-content">
-    <slot>
-    </slot>
-  </div>
-</label>
-```
-
-####   `should render with various attributes`
-
-```
-<input
-  class="bx--tile-input"
-  id="input"
-  name="name-foo"
-  tabindex="-1"
-  type="checkbox"
-  value="value-foo"
->
-<label
-  class="bx--tile bx--tile--light bx--tile--selectable"
-  for="input"
-  tabindex="0"
->
-  <div class="bx--tile__checkmark">
-  </div>
-  <div class="bx--tile-content">
-    <slot>
-    </slot>
-  </div>
-</label>
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-toggle.md b/packages/carbon-web-components/tests/snapshots/bx-toggle.md
deleted file mode 100644
index c50a0e95a51..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-toggle.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# `bx-toggle`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<input
-  aria-checked="false"
-  class="bx--toggle-input"
-  id="checkbox"
-  type="checkbox"
->
-<label
-  class="bx--toggle-input__label"
-  for="checkbox"
->
-  <slot name="label-text">
-  </slot>
-  <span class="bx--toggle__switch">
-    <span
-      aria-hidden="true"
-      class="bx--toggle__text--off"
-    >
-      <slot name="unchecked-text">
-      </slot>
-    </span>
-    <span
-      aria-hidden="true"
-      class="bx--toggle__text--on"
-    >
-      <slot name="checked-text">
-      </slot>
-    </span>
-  </span>
-</label>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<input
-  aria-checked="true"
-  class="bx--toggle-input bx--toggle-input--small"
-  disabled=""
-  id="checkbox"
-  name="name-foo"
-  type="checkbox"
-  value="value-foo"
->
-<label
-  class="bx--toggle-input__label"
-  for="checkbox"
->
-  <slot name="label-text">
-    label-text-foo
-  </slot>
-  <span class="bx--toggle__switch">
-    <span
-      aria-hidden="true"
-      class="bx--toggle__text--off"
-    >
-      <slot name="unchecked-text">
-        unchecked-text-foo
-      </slot>
-    </span>
-    <span
-      aria-hidden="true"
-      class="bx--toggle__text--on"
-    >
-      <slot name="checked-text">
-        checked-text-foo
-      </slot>
-    </span>
-  </span>
-</label>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-tooltip-definition.md b/packages/carbon-web-components/tests/snapshots/bx-tooltip-definition.md
deleted file mode 100644
index cbb2dffc4b5..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-tooltip-definition.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# `bx-tooltip-definition`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<button
-  aria-describedby="tooltip-body"
-  class="bx--tooltip--a11y bx--tooltip--align-center bx--tooltip--bottom bx--tooltip__trigger bx--tooltip__trigger--definition"
->
-  <slot>
-  </slot>
-</button>
-<div
-  class="bx--assistive-text"
-  id="tooltip-body"
-  role="tooltip"
->
-  <slot name="body">
-  </slot>
-</div>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<button
-  aria-describedby="tooltip-body"
-  class="bx--tooltip--a11y bx--tooltip--align-start bx--tooltip--top bx--tooltip__trigger bx--tooltip__trigger--definition"
->
-  <slot>
-  </slot>
-</button>
-<div
-  class="bx--assistive-text"
-  id="tooltip-body"
-  role="tooltip"
->
-  <slot name="body">
-    body-text-foo
-  </slot>
-</div>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/bx-tooltip-icon.md b/packages/carbon-web-components/tests/snapshots/bx-tooltip-icon.md
deleted file mode 100644
index 8fbdce90bd8..00000000000
--- a/packages/carbon-web-components/tests/snapshots/bx-tooltip-icon.md
+++ /dev/null
@@ -1,47 +0,0 @@
-# `bx-tooltip-icon`
-
-## `Rendering`
-
-####   `Should render with minimum attributes`
-
-```
-<button
-  aria-describedby="tooltip-body"
-  class="bx--tooltip--a11y bx--tooltip--align-center bx--tooltip--bottom bx--tooltip__trigger"
->
-  <span
-    class="bx--assistive-text"
-    id="tooltip-body"
-    role="tooltip"
-  >
-    <slot name="body">
-    </slot>
-  </span>
-  <slot>
-  </slot>
-</button>
-
-```
-
-####   `Should render with various attributes`
-
-```
-<button
-  aria-describedby="tooltip-body"
-  class="bx--tooltip--a11y bx--tooltip--align-start bx--tooltip--top bx--tooltip__trigger"
->
-  <span
-    class="bx--assistive-text"
-    id="tooltip-body"
-    role="tooltip"
-  >
-    <slot name="body">
-      body-text-foo
-    </slot>
-  </span>
-  <slot>
-  </slot>
-</button>
-
-```
-
diff --git a/packages/carbon-web-components/tests/snapshots/cds-btn.md b/packages/carbon-web-components/tests/snapshots/cds-btn.md
new file mode 100644
index 00000000000..764993a68ef
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-btn.md
@@ -0,0 +1,93 @@
+# `cds-button`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes for <button>`
+
+```
+<button
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  id="button"
+  part="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
+####   `should render with various attributes for <button>`
+
+```
+<button
+  class="cds--btn cds--btn--disabled cds--btn--secondary cds--btn--sm"
+  disabled=""
+  id="button"
+  part="button"
+  type="submit"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
+####   `should render with minimum attributes for <a>`
+
+```
+<a
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  href="about:blank"
+  id="button"
+  part="button"
+  role="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes for <a>`
+
+```
+<a
+  class="cds--btn cds--btn--secondary cds--btn--sm"
+  href="about:blank"
+  id="button"
+  part="button"
+  role="button"
+  type="text/plain"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</a>
+
+```
+
+####   `should render disabled state for <a>`
+
+```
+<p
+  class="cds--btn cds--btn--disabled cds--btn--secondary cds--btn--sm"
+  id="button"
+  part="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</p>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-button.md b/packages/carbon-web-components/tests/snapshots/cds-button.md
new file mode 100644
index 00000000000..3e4d8f618c6
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-button.md
@@ -0,0 +1,89 @@
+# `cds-button`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes for <button>`
+
+```
+<button
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  id="button"
+  part="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
+####   `should render with various attributes for <button>`
+
+```
+<button
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  id="button"
+  part="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
+####   `should render with minimum attributes for <a>`
+
+```
+<button
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  id="button"
+  part="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
+####   `should render with various attributes for <a>`
+
+```
+<button
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  id="button"
+  part="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
+####   `should render disabled state for <a>`
+
+```
+<button
+  class="cds--btn cds--btn--lg cds--btn--primary"
+  id="button"
+  part="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+  </slot>
+</button>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-checkbox.md b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md
new file mode 100644
index 00000000000..72500bf3278
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-checkbox.md
@@ -0,0 +1,57 @@
+# `cds-checkbox`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<input
+  aria-checked="false"
+  aria-readonly="false"
+  class="cds--checkbox"
+  id="checkbox"
+  part="input"
+  type="checkbox"
+>
+<label
+  class="cds--checkbox-label"
+  for="checkbox"
+  part="label"
+  title=""
+>
+  <span class="cds--checkbox-label-text">
+    <slot>
+      Checkbox label
+    </slot>
+  </span>
+</label>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<input
+  aria-checked="mixed"
+  aria-readonly="false"
+  class="cds--checkbox"
+  disabled=""
+  id="checkbox"
+  part="input"
+  type="checkbox"
+>
+<label
+  class="cds--checkbox-label"
+  for="checkbox"
+  part="label"
+  title=""
+>
+  <span class="cds--checkbox-label-text cds--visually-hidden">
+    <slot>
+      label-text-foo
+    </slot>
+  </span>
+</label>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-code-snippet.md b/packages/carbon-web-components/tests/snapshots/cds-code-snippet.md
new file mode 100644
index 00000000000..2bdcb90bd44
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-code-snippet.md
@@ -0,0 +1,131 @@
+# `cds-code-snippet`
+
+## `Rendering`
+
+####   `Should render with minimum attributes for single line mode`
+
+```
+<div
+  aria-label="code-snippet"
+  class="cds--snippet-container"
+  role="textbox"
+  tabindex="0"
+>
+  <code>
+    <pre>
+      <slot>
+      </slot>
+    </pre>
+  </code>
+</div>
+<cds-copy-button feedback="Copied!">
+  Copy to clipboard
+</cds-copy-button>
+
+```
+
+####   `Should render with minimum attributes for multi line mode`
+
+```
+<div
+  aria-label="code-snippet"
+  class="cds--snippet-container"
+  role="textbox"
+  tabindex="0"
+>
+  <code>
+    <pre>
+      <slot>
+      </slot>
+    </pre>
+  </code>
+</div>
+<cds-copy-button feedback="Copied!">
+  Copy to clipboard
+</cds-copy-button>
+
+```
+
+####   `Should render with minimum attributes for inline mode`
+
+```
+<cds-copy-button feedback="Copied!">
+  Copy to clipboard
+</cds-copy-button>
+
+```
+
+####   `Should render with various attributes for single line mode`
+
+```
+<div
+  aria-label="code-assistive-text-foo"
+  class="cds--snippet-container"
+  role="textbox"
+  tabindex="0"
+>
+  <code>
+    <pre>
+      <slot>
+      </slot>
+    </pre>
+  </code>
+</div>
+<cds-copy-button feedback="copy-button-feedback-text-foo">
+  copy-button-assistive-text-foo
+</cds-copy-button>
+
+```
+
+####   `Should render with various attributes for multi line mode`
+
+```
+<div
+  aria-label="code-assistive-text-foo"
+  class="cds--snippet-container"
+  role="textbox"
+  tabindex="0"
+>
+  <code>
+    <pre>
+      <slot>
+      </slot>
+    </pre>
+  </code>
+</div>
+<cds-copy-button feedback="copy-button-feedback-text-foo">
+  copy-button-assistive-text-foo
+</cds-copy-button>
+
+```
+
+####   `Should render with various attributes for inline mode`
+
+```
+<cds-copy-button feedback="copy-button-feedback-text-foo">
+  copy-button-assistive-text-foo
+</cds-copy-button>
+
+```
+
+## `Expand/collapse button in multi line mode`
+
+####   `Should render the expando`
+
+```
+<button
+  class="cds--snippet-btn--expand"
+  type="button"
+>
+  <span
+    class="cds--snippet-btn--text"
+    id="button-text"
+  >
+    <slot name="expand-button-text">
+      expand-button-text-foo
+    </slot>
+  </span>
+</button>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-combo-box.md b/packages/carbon-web-components/tests/snapshots/cds-combo-box.md
new file mode 100644
index 00000000000..04da6323721
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-combo-box.md
@@ -0,0 +1,121 @@
+# `cds-combo-box`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<label
+  class="cds--label"
+  hidden=""
+  part="title-text"
+>
+  <slot name="title-text">
+  </slot>
+</label>
+<div
+  class="cds--combo-box cds--dropdown cds--list-box cds--list-box--md"
+  role="listbox"
+>
+  <div
+    aria-controls="menu-body"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-labelledby="trigger-label"
+    aria-owns="menu-body"
+    class="cds--list-box__field"
+    part="trigger-button"
+  >
+    <input
+      aria-autocomplete="list"
+      aria-controls="menu-body"
+      aria-label=""
+      class="cds--text-input cds--text-input--empty"
+      id="trigger-label"
+      placeholder=""
+      role="combobox"
+    >
+    <div
+      class="cds--list-box__menu-icon"
+      id="trigger-caret"
+    >
+    </div>
+  </div>
+</div>
+<div
+  class="cds--form__helper-text"
+  hidden=""
+  part="helper-text"
+>
+  <slot name="helper-text">
+  </slot>
+</div>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<label
+  class="cds--label cds--label--disabled"
+  hidden=""
+  part="title-text"
+>
+  <slot name="title-text">
+  </slot>
+</label>
+<div
+  class="cds--combo-box cds--dropdown cds--dropdown--invalid cds--list-box cds--list-box--disabled cds--list-box--md"
+  data-invalid=""
+  role="listbox"
+>
+  <div
+    aria-controls="menu-body"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-labelledby="trigger-label"
+    aria-owns="menu-body"
+    class="cds--list-box__field"
+    part="trigger-button"
+  >
+    <input
+      aria-autocomplete="list"
+      aria-controls="menu-body"
+      aria-label=""
+      class="cds--text-input"
+      disabled=""
+      id="trigger-label"
+      placeholder=""
+      role="combobox"
+    >
+    <div
+      class="cds--list-box__menu-icon"
+      id="trigger-caret"
+    >
+    </div>
+  </div>
+</div>
+<div
+  class="cds--form__helper-text cds--form__helper-text--disabled"
+  part="helper-text"
+>
+  <slot name="helper-text">
+  </slot>
+</div>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-copy-button.md b/packages/carbon-web-components/tests/snapshots/cds-copy-button.md
new file mode 100644
index 00000000000..2e436f79dbe
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-copy-button.md
@@ -0,0 +1,34 @@
+# `cds-copy-button`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<cds-copy
+  feedback="Copied!"
+  feedback-timeout="2000"
+>
+  <span slot="tooltip-content">
+    <slot>
+    </slot>
+  </span>
+</cds-copy>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<cds-copy
+  feedback="feedback-text-foo"
+  feedback-timeout="16"
+>
+  <span slot="tooltip-content">
+    <slot>
+    </slot>
+  </span>
+</cds-copy>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-dropdown.md b/packages/carbon-web-components/tests/snapshots/cds-dropdown.md
new file mode 100644
index 00000000000..00a8a99d5b0
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-dropdown.md
@@ -0,0 +1,127 @@
+# `cds-dropdown`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<label
+  class="cds--label"
+  hidden=""
+  part="title-text"
+>
+  <slot name="title-text">
+  </slot>
+</label>
+<div
+  class="cds--dropdown cds--list-box cds--list-box--md"
+  role="listbox"
+>
+  <div
+    aria-controls="menu-body"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-labelledby="trigger-label"
+    aria-owns="menu-body"
+    class="cds--list-box__field"
+    part="trigger-button"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="cds--list-box__label"
+      id="trigger-label"
+    >
+    </span>
+    <div
+      class="cds--list-box__menu-icon"
+      id="trigger-caret"
+    >
+    </div>
+  </div>
+</div>
+<div
+  class="cds--form__helper-text"
+  hidden=""
+  part="helper-text"
+>
+  <slot name="helper-text">
+  </slot>
+</div>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<label
+  class="cds--label cds--label--disabled"
+  hidden=""
+  part="title-text"
+>
+  <slot name="title-text">
+  </slot>
+</label>
+<div
+  class="cds--dropdown cds--list-box cds--list-box--disabled cds--list-box--expanded cds--list-box--md"
+  role="listbox"
+>
+  <div
+    aria-controls="menu-body"
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    aria-labelledby="trigger-label"
+    aria-owns="menu-body"
+    class="cds--list-box__field"
+    part="trigger-button"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="cds--list-box__label"
+      id="trigger-label"
+    >
+    </span>
+    <div
+      class="cds--list-box__menu-icon cds--list-box__menu-icon--open"
+      id="trigger-caret"
+    >
+    </div>
+  </div>
+  <div
+    aria-label=""
+    class="cds--list-box__menu"
+    id="menu-body"
+    part="menu-body"
+    role="listbox"
+    tabindex="-1"
+  >
+    <slot>
+    </slot>
+  </div>
+</div>
+<div
+  class="cds--form__helper-text cds--form__helper-text--disabled"
+  part="helper-text"
+>
+  <slot name="helper-text">
+    helper-text-foo
+  </slot>
+</div>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-inline-loading.md b/packages/carbon-web-components/tests/snapshots/cds-inline-loading.md
new file mode 100644
index 00000000000..6f519da3458
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-inline-loading.md
@@ -0,0 +1,66 @@
+# `cds-inline-loading`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--inline-loading__animation">
+  <div class="cds--loading cds--loading--small">
+  </div>
+</div>
+<p class="cds--inline-loading__text">
+  <slot>
+  </slot>
+</p>
+
+```
+
+####   `should render with unknown status`
+
+```
+<p class="cds--inline-loading__text">
+  <slot>
+  </slot>
+</p>
+
+```
+
+####   `should render with inactive status`
+
+```
+<div class="cds--inline-loading__animation">
+  <div class="cds--loading cds--loading--small cds--loading--stop">
+  </div>
+</div>
+<p class="cds--inline-loading__text">
+  <slot>
+  </slot>
+</p>
+
+```
+
+####   `should render with finished status`
+
+```
+<div class="cds--inline-loading__animation">
+</div>
+<p class="cds--inline-loading__text">
+  <slot>
+  </slot>
+</p>
+
+```
+
+####   `should render with error status`
+
+```
+<div class="cds--inline-loading__animation">
+</div>
+<p class="cds--inline-loading__text">
+  <slot>
+  </slot>
+</p>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-inline-notification.md b/packages/carbon-web-components/tests/snapshots/cds-inline-notification.md
new file mode 100644
index 00000000000..7782a83b303
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-inline-notification.md
@@ -0,0 +1,56 @@
+# `cds-inline-notification`
+
+## `Rendering titles`
+
+####   `Should render with minimum attributes`
+
+```
+<div class="cds--inline-notification__details">
+  <div class="cds--inline-notification__text-wrapper">
+    <p class="cds--inline-notification__title">
+      <slot name="title">
+      </slot>
+    </p>
+    <div class="cds--inline-notification__subtitle">
+      <slot name="subtitle">
+      </slot>
+    </div>
+    <slot>
+    </slot>
+  </div>
+</div>
+<button
+  class="cds--inline-notification__close-button"
+  type="button"
+>
+</button>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<div class="cds--inline-notification__details">
+  <div class="cds--inline-notification__text-wrapper">
+    <p class="cds--inline-notification__title">
+      title-foo
+      <slot name="title">
+      </slot>
+    </p>
+    <div class="cds--inline-notification__subtitle">
+      subtitle-foo
+      <slot name="subtitle">
+      </slot>
+    </div>
+    <slot>
+    </slot>
+  </div>
+</div>
+<button
+  class="cds--inline-notification__close-button"
+  type="button"
+>
+</button>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-input.md b/packages/carbon-web-components/tests/snapshots/cds-input.md
new file mode 100644
index 00000000000..0aa4608d180
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-input.md
@@ -0,0 +1,47 @@
+# `cds-text-input`
+
+## `Rendering`
+
+####   `Should render with various attributes`
+
+```
+<label
+  class="cds--label cds--label--disabled"
+  for="input"
+>
+  <slot name="label-text">
+    label-text-foo
+  </slot>
+</label>
+<div class="cds--text-input__field-wrapper">
+  <input
+    aria-describedby="helper-text"
+    autocomplete="on"
+    autofocus=""
+    class="cds--text-input cds--text-input--light cds--text-input--xl"
+    disabled=""
+    id="input"
+    name="name-foo"
+    pattern="pattern-foo"
+    placeholder="placeholder-foo"
+    readonly=""
+    required=""
+    type="text"
+  >
+</div>
+<div
+  class="cds--form__helper-text cds--form__helper-text--disabled"
+  id="helper-text"
+>
+  <slot name="helper-text">
+    helper-text-foo
+  </slot>
+</div>
+<div class="cds--form-requirement">
+  <slot name="validity-message">
+    validity-message-foo
+  </slot>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-link.md b/packages/carbon-web-components/tests/snapshots/cds-link.md
new file mode 100644
index 00000000000..ebd124b606e
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-link.md
@@ -0,0 +1,80 @@
+# `cds-link`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  class="cds--link cds--link--md"
+  href="about:blank"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <slot>
+  </slot>
+  <div
+    class="cds--link__icon"
+    hidden=""
+  >
+    <slot name="icon">
+    </slot>
+  </div>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  class="cds--link cds--link--md"
+  download="file-name-foo"
+  href="about:blank"
+  hreflang="en"
+  id="link"
+  part="link"
+  ping="about:blank"
+  rel="noopener"
+  role="button"
+  tabindex="0"
+  target="_blank"
+  type="text/plain"
+>
+  <slot>
+  </slot>
+  <div
+    class="cds--link__icon"
+    hidden=""
+  >
+    <slot name="icon">
+    </slot>
+  </div>
+</a>
+
+```
+
+####   `should render disabled state`
+
+```
+<p
+  class="cds--link cds--link--disabled cds--link--md"
+  id="link"
+  part="link"
+>
+  <slot>
+  </slot>
+</p>
+<div
+  class="cds--link__icon"
+  hidden=""
+>
+  <slot name="icon">
+  </slot>
+</div>
+<p>
+</p>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-multi-select.md b/packages/carbon-web-components/tests/snapshots/cds-multi-select.md
new file mode 100644
index 00000000000..78e803f9807
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-multi-select.md
@@ -0,0 +1,116 @@
+# `cds-multi-select`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<label
+  class="cds--label"
+  hidden=""
+  part="title-text"
+>
+  <slot name="title-text">
+  </slot>
+</label>
+<div
+  class="cds--list-box cds--list-box--md cds--multi-select"
+  role="listbox"
+>
+  <div
+    aria-controls="menu-body"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-labelledby="trigger-label"
+    aria-owns="menu-body"
+    class="cds--list-box__field"
+    part="trigger-button"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="cds--list-box__label"
+      id="trigger-label"
+    >
+    </span>
+    <div
+      class="cds--list-box__menu-icon"
+      id="trigger-caret"
+    >
+    </div>
+  </div>
+</div>
+<div
+  class="cds--form__helper-text"
+  hidden=""
+  part="helper-text"
+>
+  <slot name="helper-text">
+  </slot>
+</div>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<label
+  class="cds--label cds--label--disabled"
+  hidden=""
+  part="title-text"
+>
+  <slot name="title-text">
+  </slot>
+</label>
+<div
+  class="cds--list-box cds--list-box--disabled cds--list-box--inline cds--list-box--md cds--multi-select cds--multi-select--inline cds--multi-select--invalid"
+  data-invalid=""
+  role="listbox"
+>
+  <div
+    aria-controls="menu-body"
+    aria-expanded="false"
+    aria-haspopup="listbox"
+    aria-labelledby="trigger-label"
+    aria-owns="menu-body"
+    class="cds--list-box__field"
+    part="trigger-button"
+    role="button"
+    tabindex="0"
+  >
+    <span
+      class="cds--list-box__label"
+      id="trigger-label"
+    >
+    </span>
+    <div
+      class="cds--list-box__menu-icon"
+      id="trigger-caret"
+    >
+    </div>
+  </div>
+</div>
+<div
+  class="cds--form__helper-text cds--form__helper-text--disabled"
+  part="helper-text"
+>
+  <slot name="helper-text">
+  </slot>
+</div>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-number-input.md b/packages/carbon-web-components/tests/snapshots/cds-number-input.md
new file mode 100644
index 00000000000..429f46fd279
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-number-input.md
@@ -0,0 +1,65 @@
+# `cds-number-input`
+
+## `Rendering`
+
+####   `Should render with various attributes`
+
+```
+<div class="cds--number cds--number--md cds--number--readonly">
+  <label
+    class="cds--label"
+    for="input"
+  >
+    <slot name="label-text">
+    </slot>
+  </label>
+  <div class="cds--number__input-wrapper">
+    <input
+      aria-atomic="true"
+      id="input"
+      max="200"
+      min="-100"
+      readonly=""
+      role="alert"
+      step="1"
+      type="number"
+    >
+    <div class="cds--number__controls">
+      <button
+        aria-atomic="true"
+        aria-label="decrease number input"
+        aria-live="polite"
+        class="cds--number__control-btn down-icon"
+        type="button"
+      >
+      </button>
+      <div class="cds--number__rule-divider">
+      </div>
+      <button
+        aria-atomic="true"
+        aria-label="increase number input"
+        aria-live="polite"
+        class="cds--number__control-btn up-icon"
+        type="button"
+      >
+      </button>
+      <div class="cds--number__rule-divider">
+      </div>
+    </div>
+  </div>
+  <div class="cds--form__helper-text">
+    <slot name="helper-text">
+      helper-text-foo
+    </slot>
+  </div>
+  <div
+    class="cds--form-requirement"
+    hidden=""
+  >
+    <slot name="">
+    </slot>
+  </div>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-pagination.md b/packages/carbon-web-components/tests/snapshots/cds-pagination.md
new file mode 100644
index 00000000000..597eaa276ec
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-pagination.md
@@ -0,0 +1,157 @@
+# `cds-pagination`
+
+## `Misc attributes`
+
+####   `should render <cds-pagination> with minimum attributes`
+
+```
+<div class="cds--pagination__left">
+  <slot name="page-sizes-select">
+  </slot>
+  <div class="cds-ce--pagination__divider">
+  </div>
+  <span class="cds--pagination__items-count cds--pagination__text">
+    Item 1–10
+  </span>
+</div>
+<div class="cds-ce--pagination__divider">
+</div>
+<div class="cds--pagination__right">
+  <slot>
+  </slot>
+  <div class="cds--pagination__control-buttons">
+    <button
+      class="cds--pagination__button cds--pagination__button--backward cds--pagination__button--no-index"
+      disabled=""
+      title="Previous page"
+    >
+    </button>
+    <button
+      class="cds--pagination__button cds--pagination__button--forward"
+      title="Next page"
+    >
+    </button>
+  </div>
+</div>
+
+```
+
+####   `should render <cds-pagination> with various attributes`
+
+```
+<div class="cds--pagination__left">
+  <slot name="page-sizes-select">
+  </slot>
+  <div class="cds-ce--pagination__divider">
+  </div>
+  <span class="cds--pagination__items-count cds--pagination__text">
+    11–30 of 200 items
+  </span>
+</div>
+<div class="cds-ce--pagination__divider">
+</div>
+<div class="cds--pagination__right">
+  <slot>
+  </slot>
+  <div class="cds--pagination__control-buttons">
+    <button
+      class="cds--pagination__button cds--pagination__button--backward"
+      title="Previous page"
+    >
+    </button>
+    <button
+      class="cds--pagination__button cds--pagination__button--forward"
+      title="Next page"
+    >
+    </button>
+  </div>
+</div>
+
+```
+
+####   `should render <cds-page-sizes-select> with minimum attributes`
+
+```
+<label
+  class="cds--pagination__text"
+  for="select"
+>
+  <slot name="label-text">
+    Items per page:
+  </slot>
+</label>
+<div class="cds--select__item-count">
+  <select
+    class="cds--select-input"
+    id="select"
+  >
+    <option value="10">
+      10
+    </option>
+    <option value="20">
+      20
+    </option>
+    <option value="30">
+      30
+    </option>
+  </select>
+</div>
+<div hidden="">
+  <slot>
+  </slot>
+</div>
+
+```
+
+####   `should render <cds-pages-select> with minimum attributes`
+
+```
+<div class="cds--select__page-number">
+  <label
+    class="cds--label cds--visually-hidden"
+    for="select"
+  >
+    Page number, of 10 pages
+  </label>
+  <select class="cds--select-input">
+    <option
+      selected=""
+      value="0"
+    >
+      1
+    </option>
+    <option value="1">
+      2
+    </option>
+    <option value="2">
+      3
+    </option>
+    <option value="3">
+      4
+    </option>
+    <option value="4">
+      5
+    </option>
+    <option value="5">
+      6
+    </option>
+    <option value="6">
+      7
+    </option>
+    <option value="7">
+      8
+    </option>
+    <option value="8">
+      9
+    </option>
+    <option value="9">
+      10
+    </option>
+  </select>
+</div>
+<span class="cds--pagination__text">
+  of 10 pages
+</span>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-progress-bar.md b/packages/carbon-web-components/tests/snapshots/cds-progress-bar.md
new file mode 100644
index 00000000000..f8f00b742c7
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-progress-bar.md
@@ -0,0 +1,68 @@
+# `cds-progress-bar`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<div class="cds--progress-bar cds--progress-bar--big cds--progress-bar--default">
+  <div class="cds--progress-bar__label">
+    <span class="cds--progress-bar__label-text">
+    </span>
+  </div>
+  <div
+    aria-busy="true"
+    aria-invalid="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="0"
+    class="cds--progress-bar__track"
+    role="progressbar"
+  >
+    <div
+      class="cds--progress-bar__bar"
+      style="transform: scaleX(0);"
+    >
+    </div>
+  </div>
+</div>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<div class="cds--progress-bar cds--progress-bar--big cds--progress-bar--default">
+  <div class="cds--progress-bar__label">
+    <span class="cds--progress-bar__label-text">
+      Progress Bar label
+    </span>
+  </div>
+  <div
+    aria-busy="true"
+    aria-invalid="false"
+    aria-valuemax="100"
+    aria-valuemin="0"
+    aria-valuenow="50"
+    class="cds--progress-bar__track"
+    role="progressbar"
+  >
+    <div
+      class="cds--progress-bar__bar"
+      style="transform: scaleX(0.5);"
+    >
+    </div>
+  </div>
+  <div class="cds--progress-bar__helper-text">
+    Optional helper text
+    <div
+      aria-live="polite"
+      class="cds--visually-hidden"
+    >
+      Loading
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-progress-step.md b/packages/carbon-web-components/tests/snapshots/cds-progress-step.md
new file mode 100644
index 00000000000..ce3911ca5b0
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-progress-step.md
@@ -0,0 +1,47 @@
+# `cds-progress-step`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<slot>
+  <p
+    aria-describedby="label-tooltip"
+    class="cds--progress-label"
+    role="button"
+    tabindex="0"
+  >
+    First step
+  </p>
+</slot>
+<slot name="secondary-label-text">
+</slot>
+<span class="cds--progress-line">
+</span>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<slot>
+  <p
+    aria-describedby="label-tooltip"
+    class="cds--progress-label"
+    role="button"
+    tabindex="0"
+  >
+    First step
+  </p>
+</slot>
+<slot name="secondary-label-text">
+  <p class="cds--progress-optional">
+    secondary-label-text-foo
+  </p>
+</slot>
+<span class="cds--progress-line">
+</span>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-radio-button.md b/packages/carbon-web-components/tests/snapshots/cds-radio-button.md
new file mode 100644
index 00000000000..4b85865b47f
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-radio-button.md
@@ -0,0 +1,55 @@
+# `cds-radio-button`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<input
+  class="cds--radio-button"
+  id="input"
+  tabindex="-1"
+  type="radio"
+  value="staging"
+>
+<label
+  class="cds--radio-button__label"
+  for="input"
+>
+  <span class="cds--radio-button__appearance">
+  </span>
+  <span>
+    <slot>
+    </slot>
+  </span>
+</label>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<input
+  class="cds--radio-button"
+  disabled=""
+  id="input"
+  name="name-foo"
+  tabindex="0"
+  type="radio"
+  value="staging"
+>
+<label
+  class="cds--radio-button__label"
+  for="input"
+>
+  <span class="cds--radio-button__appearance">
+  </span>
+  <span class="cds--visually-hidden">
+    <slot>
+      label-text-foo
+    </slot>
+  </span>
+</label>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-search.md b/packages/carbon-web-components/tests/snapshots/cds-search.md
new file mode 100644
index 00000000000..e3fc81427bc
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-search.md
@@ -0,0 +1,74 @@
+# `cds-search`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--search-magnifier">
+  <slot name="icon">
+  </slot>
+</div>
+<label
+  class="cds--label"
+  for="input"
+  part="label-text"
+>
+  <slot>
+  </slot>
+</label>
+<input
+  autocomplete=""
+  class="cds--search-input"
+  id="input"
+  part="input"
+  placeholder="Search"
+  role=""
+>
+<button
+  aria-label=""
+  class="cds--search-close cds--search-close--hidden"
+  part="close-button"
+  type="button"
+>
+</button>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--search-magnifier">
+  <slot name="icon">
+  </slot>
+</div>
+<label
+  class="cds--label"
+  for="input"
+  part="label-text"
+>
+  <slot>
+    label-text-foo
+  </slot>
+</label>
+<input
+  autocomplete=""
+  class="cds--search-input"
+  disabled=""
+  id="input"
+  part="input"
+  placeholder="placeholder-foo"
+  role=""
+  type="submit"
+  value="value-foo"
+>
+<button
+  aria-label=""
+  class="cds--search-close"
+  part="close-button"
+  type="button"
+>
+</button>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-select.md b/packages/carbon-web-components/tests/snapshots/cds-select.md
new file mode 100644
index 00000000000..4dd5bda2a57
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-select.md
@@ -0,0 +1,225 @@
+# `cds-select`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--select">
+  <label
+    class="cds--label"
+    for="input"
+  >
+    <slot name="label-text">
+    </slot>
+  </label>
+  <div class="cds--select-input__wrapper">
+    <select
+      aria-invalid="false"
+      aria-readonly="false"
+      class="cds--select-input cds--select-input--md"
+      id="input"
+    >
+      <optgroup
+        class="cds--select-optgroup"
+        label="Category 1"
+      >
+        <option
+          class="cds--select-option"
+          label="Option 1"
+          value="all"
+        >
+          Option 1
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 2"
+          value="cloudFoundry"
+        >
+          Option 2
+        </option>
+      </optgroup>
+      <optgroup
+        class="cds--select-optgroup"
+        label="Category 2"
+      >
+        <option
+          class="cds--select-option"
+          label="Option 3"
+          value="staging"
+        >
+          Option 3
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 4"
+          value="dea"
+        >
+          Option 4
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 5"
+          value="router"
+        >
+          Option 5
+        </option>
+      </optgroup>
+    </select>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--select cds--select--disabled">
+  <label
+    class="cds--label cds--label--disabled"
+    for="input"
+  >
+    <slot name="label-text">
+      label-text-foo
+    </slot>
+  </label>
+  <div class="cds--select-input__wrapper">
+    <select
+      aria-invalid="false"
+      aria-readonly="false"
+      class="cds--select-input cds--select-input--xl"
+      disabled=""
+      id="input"
+    >
+      <optgroup
+        class="cds--select-optgroup"
+        label="Category 1"
+      >
+        <option
+          class="cds--select-option"
+          label="Option 1"
+          value="all"
+        >
+          Option 1
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 2"
+          value="cloudFoundry"
+        >
+          Option 2
+        </option>
+      </optgroup>
+      <optgroup
+        class="cds--select-optgroup"
+        label="Category 2"
+      >
+        <option
+          class="cds--select-option"
+          label="Option 3"
+          value="staging"
+        >
+          Option 3
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 4"
+          value="dea"
+        >
+          Option 4
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 5"
+          value="router"
+        >
+          Option 5
+        </option>
+      </optgroup>
+    </select>
+  </div>
+  <div class="cds--form__helper-text cds--form__helper-text--disabled">
+    <slot name="helper-text">
+      helper-text-foo
+    </slot>
+  </div>
+</div>
+
+```
+
+####   `should render invalid state`
+
+```
+<div class="cds--select cds--select--invalid">
+  <label
+    class="cds--label"
+    for="input"
+  >
+    <slot name="label-text">
+    </slot>
+  </label>
+  <div
+    class="cds--select-input__wrapper"
+    data-invalid=""
+  >
+    <select
+      aria-describedby="invalid-text"
+      aria-invalid="true"
+      aria-readonly="false"
+      class="cds--select-input cds--select-input--md"
+      id="input"
+    >
+      <optgroup
+        class="cds--select-optgroup"
+        label="Category 1"
+      >
+        <option
+          class="cds--select-option"
+          label="Option 1"
+          value="all"
+        >
+          Option 1
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 2"
+          value="cloudFoundry"
+        >
+          Option 2
+        </option>
+      </optgroup>
+      <optgroup
+        class="cds--select-optgroup"
+        label="Category 2"
+      >
+        <option
+          class="cds--select-option"
+          label="Option 3"
+          value="staging"
+        >
+          Option 3
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 4"
+          value="dea"
+        >
+          Option 4
+        </option>
+        <option
+          class="cds--select-option"
+          label="Option 5"
+          value="router"
+        >
+          Option 5
+        </option>
+      </optgroup>
+    </select>
+  </div>
+  <div class="cds--form-requirement">
+    validity-message-foo
+  </div>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-slider.md b/packages/carbon-web-components/tests/snapshots/cds-slider.md
new file mode 100644
index 00000000000..d6f00787ec9
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-slider.md
@@ -0,0 +1,111 @@
+# `cds-slider`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<label class="cds--label">
+  <slot name="label-text">
+  </slot>
+</label>
+<div class="cds--slider-container">
+  <span class="cds--slider__range-label">
+    <slot name="min-text">
+      0
+    </slot>
+  </span>
+  <div
+    class="cds--slider"
+    role="presentation"
+    tabindex="-1"
+  >
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow=""
+      class="cds--slider__thumb"
+      id="thumb"
+      role="slider"
+      style="left: NaN%"
+      tabindex="0"
+    >
+    </div>
+    <div
+      class="cds--slider__track"
+      id="track"
+    >
+    </div>
+    <div class="cds-ce--slider__filled-track-container">
+      <div
+        class="cds--slider__filled-track"
+        style="transform: translate(0%, -50%) scaleX(NaN)"
+      >
+      </div>
+    </div>
+  </div>
+  <span class="cds--slider__range-label">
+    <slot name="max-text">
+      100
+    </slot>
+  </span>
+  <slot>
+  </slot>
+</div>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<label class="cds--label cds--label--disabled">
+  <slot name="label-text">
+    label-text-foo
+  </slot>
+</label>
+<div class="cds--slider-container">
+  <span class="cds--slider__range-label">
+    <slot name="min-text">
+      0
+    </slot>
+  </span>
+  <div
+    class="cds--slider cds--slider--disabled"
+    role="presentation"
+    tabindex="-1"
+  >
+    <div
+      aria-valuemax="100"
+      aria-valuemin="0"
+      aria-valuenow="50"
+      class="cds--slider__thumb"
+      id="thumb"
+      role="slider"
+      style="left: 50%"
+      tabindex="0"
+    >
+    </div>
+    <div
+      class="cds--slider__track"
+      id="track"
+    >
+    </div>
+    <div class="cds-ce--slider__filled-track-container">
+      <div
+        class="cds--slider__filled-track"
+        style="transform: translate(0%, -50%) scaleX(0.5)"
+      >
+      </div>
+    </div>
+  </div>
+  <span class="cds--slider__range-label">
+    <slot name="max-text">
+      100
+    </slot>
+  </span>
+  <slot>
+  </slot>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-text-input.md b/packages/carbon-web-components/tests/snapshots/cds-text-input.md
new file mode 100644
index 00000000000..379a4cab004
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-text-input.md
@@ -0,0 +1,31 @@
+# `cds-text-input`
+
+## `Rendering`
+
+####   `Should render with various attributes`
+
+```
+<div class="cds--form-item cds--text-input-wrapper">
+  <div class="cds--text-input__label-wrapper">
+  </div>
+  <div class="cds--text-input__field-outer-wrapper">
+    <div class="cds--text-input__field-wrapper">
+      <input
+        aria-describedby="helper-text"
+        class="cds--text-input cds--text-input--md"
+        id="input"
+        type="text"
+      >
+    </div>
+    <div
+      class="cds--form-requirement"
+      hidden=""
+    >
+      <slot name="">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-textarea.md b/packages/carbon-web-components/tests/snapshots/cds-textarea.md
new file mode 100644
index 00000000000..7f42178dffe
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-textarea.md
@@ -0,0 +1,42 @@
+# `cds-textarea`
+
+## `Rendering`
+
+####   `Should render with various attributes`
+
+```
+<div class="cds--text-area__label-wrapper">
+  <label
+    class="cds--label cds--label--disabled"
+    for="input"
+  >
+    <slot name="label-text">
+    </slot>
+  </label>
+</div>
+<div class="cds--text-area__wrapper cds--text-area__wrapper--readonly">
+  <textarea
+    class="cds--text-area"
+    disabled=""
+    id="input"
+    placeholder="placeholder-foo"
+    readonly=""
+    rows="4"
+  >
+  </textarea>
+</div>
+<div class="cds--form__helper-text cds--form__helper-text--disabled">
+  <slot name="helper-text">
+    helper-text-foo
+  </slot>
+</div>
+<div
+  class="cds--form-requirement"
+  hidden=""
+>
+  <slot name="warn-text">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-tile.md b/packages/carbon-web-components/tests/snapshots/cds-tile.md
new file mode 100644
index 00000000000..2661343c7cf
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-tile.md
@@ -0,0 +1,306 @@
+# `cds-tile`
+
+## `cds-clickable-tile`
+
+##   `Misc attributes`
+
+####     `should render with minimum attributes`
+
+```
+<a
+  class="cds--link cds--tile cds--tile--clickable"
+  id="link"
+  part="link"
+  role="button"
+  tabindex="0"
+>
+  <slot>
+  </slot>
+  <div
+    class="cds--link__icon"
+    hidden=""
+  >
+    <slot name="icon">
+    </slot>
+  </div>
+</a>
+
+```
+
+####     `should render with various attributes`
+
+```
+<a
+  class="cds--link cds--tile cds--tile--clickable"
+  download="file-name-foo"
+  href="about:blank"
+  hreflang="en"
+  id="link"
+  part="link"
+  ping="about:blank"
+  rel="noopener"
+  role="button"
+  tabindex="0"
+  target="_blank"
+  type="text/plain"
+>
+  <slot>
+  </slot>
+  <div
+    class="cds--link__icon"
+    hidden=""
+  >
+    <slot name="icon">
+    </slot>
+  </div>
+</a>
+
+```
+
+####     `should render disabled state`
+
+```
+<a
+  class="cds--link cds--tile cds--tile--clickable"
+  download="file-name-foo"
+  href="about:blank"
+  hreflang="en"
+  id="link"
+  part="link"
+  ping="about:blank"
+  rel="noopener"
+  role="button"
+  tabindex="0"
+  target="_blank"
+  type="text/plain"
+>
+  <slot>
+  </slot>
+  <div
+    class="cds--link__icon"
+    hidden=""
+  >
+    <slot name="icon">
+    </slot>
+  </div>
+</a>
+
+```
+
+## `cds-expandable-tile`
+
+##   `Misc attributes`
+
+####     `should render with minimum attributes`
+
+```
+<button
+  aria-controls="below-the-fold-content"
+  aria-expanded="false"
+  aria-labelledby="above-the-fold-content"
+  class="cds--tile__chevron"
+  tabindex="0"
+>
+</button>
+<div
+  class="cds--tile-content"
+  id="content"
+>
+  <div>
+    <slot name="above-the-fold-content">
+    </slot>
+  </div>
+  <div class="cds-ce--expandable-tile--below-the-fold-content">
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
+####     `should render with various attributes`
+
+```
+<button
+  aria-controls="below-the-fold-content"
+  aria-expanded="true"
+  aria-labelledby="above-the-fold-content"
+  class="cds--tile__chevron"
+  tabindex="0"
+>
+</button>
+<div
+  class="cds--tile-content"
+  id="content"
+>
+  <div>
+    <slot name="above-the-fold-content">
+    </slot>
+  </div>
+  <div
+    class="cds-ce--expandable-tile--below-the-fold-content"
+    style="max-height: 0px"
+  >
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
+## `cds-selectable-tile`
+
+##   `Misc attributes`
+
+####     `should render with minimum attributes`
+
+```
+<input
+  class="cds--tile-input"
+  id="input"
+  tabindex="-1"
+  type="checkbox"
+>
+<label
+  class="cds--tile cds--tile--selectable"
+  for="input"
+  tabindex="0"
+>
+  <div class="cds--tile__checkmark cds--tile__checkmark--persistent">
+  </div>
+  <div class="cds--tile-content">
+    <slot>
+    </slot>
+  </div>
+</label>
+
+```
+
+####     `should render with various attributes`
+
+```
+<input
+  class="cds--tile-input"
+  id="input"
+  name="name-foo"
+  tabindex="-1"
+  type="checkbox"
+  value="value-foo"
+>
+<label
+  class="cds--tile cds--tile--is-selected cds--tile--light cds--tile--selectable"
+  for="input"
+  tabindex="0"
+>
+  <div class="cds--tile__checkmark cds--tile__checkmark--persistent">
+  </div>
+  <div class="cds--tile-content">
+    <slot>
+    </slot>
+  </div>
+</label>
+
+```
+
+## `cds-radio-tile`
+
+##   `Misc attributes`
+
+####     `should render with minimum attributes`
+
+```
+<input
+  class="cds--tile-input"
+  id="input"
+  tabindex="-1"
+  type="radio"
+>
+<label
+  class="cds--tile cds--tile--selectable"
+  for="input"
+  tabindex="0"
+>
+  <div class="cds--tile__checkmark">
+  </div>
+  <div class="cds--tile-content">
+    <slot>
+    </slot>
+  </div>
+</label>
+```
+
+####     `should render with various attributes`
+
+```
+<input
+  class="cds--tile-input"
+  id="input"
+  name="name-foo"
+  tabindex="-1"
+  type="radio"
+  value="value-foo"
+>
+<label
+  class="cds--tile cds--tile--light cds--tile--selectable"
+  for="input"
+  tabindex="0"
+>
+  <div class="cds--tile__checkmark">
+  </div>
+  <div class="cds--tile-content">
+    <slot>
+    </slot>
+  </div>
+</label>
+```
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<input
+  class="bx--tile-input"
+  id="input"
+  tabindex="-1"
+  type="checkbox"
+>
+<label
+  class="bx--tile bx--tile--selectable"
+  for="input"
+  tabindex="0"
+>
+  <div class="bx--tile__checkmark">
+  </div>
+  <div class="bx--tile-content">
+    <slot>
+    </slot>
+  </div>
+</label>
+```
+
+####   `should render with various attributes`
+
+```
+<input
+  class="bx--tile-input"
+  id="input"
+  name="name-foo"
+  tabindex="-1"
+  type="checkbox"
+  value="value-foo"
+>
+<label
+  class="bx--tile bx--tile--light bx--tile--selectable"
+  for="input"
+  tabindex="0"
+>
+  <div class="bx--tile__checkmark">
+  </div>
+  <div class="bx--tile-content">
+    <slot>
+    </slot>
+  </div>
+</label>
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/cds-toggle.md b/packages/carbon-web-components/tests/snapshots/cds-toggle.md
new file mode 100644
index 00000000000..deb643b8f11
--- /dev/null
+++ b/packages/carbon-web-components/tests/snapshots/cds-toggle.md
@@ -0,0 +1,68 @@
+# `cds-toggle`
+
+## `Rendering`
+
+####   `Should render with minimum attributes`
+
+```
+<button
+  aria-checked="true"
+  aria-lable="Toggle element label"
+  class="cds--toggle__button"
+  role="switch"
+  type="button"
+>
+</button>
+<label
+  class="cds--toggle__label"
+  for=""
+>
+  <span class="cds--toggle__label-text">
+    Toggle element label
+  </span>
+  <div class="cds--toggle__appearance">
+    <div class="cds--toggle__switch cds--toggle__switch--checked">
+    </div>
+    <span
+      aria-hidden="true"
+      class="cds--toggle__text"
+    >
+      On
+    </span>
+  </div>
+</label>
+
+```
+
+####   `Should render with various attributes`
+
+```
+<button
+  aria-checked="true"
+  aria-lable="Toggle element label"
+  class="cds--toggle__button"
+  role="switch"
+  type="button"
+>
+</button>
+<label
+  class="cds--toggle__label"
+  for=""
+>
+  <span class="cds--toggle__label-text">
+    Toggle element label
+  </span>
+  <div class="cds--toggle__appearance">
+    <div class="cds--toggle__switch cds--toggle__switch--checked">
+    </div>
+    <span
+      aria-hidden="true"
+      class="cds--toggle__text"
+    >
+      On
+    </span>
+  </div>
+</label>
+
+```
+
diff --git a/packages/carbon-web-components/tests/snapshots/data-table.md b/packages/carbon-web-components/tests/snapshots/data-table.md
index d35dd15eb1b..ab57ea701bf 100644
--- a/packages/carbon-web-components/tests/snapshots/data-table.md
+++ b/packages/carbon-web-components/tests/snapshots/data-table.md
@@ -1,21 +1,21 @@
 # `data-table`
 
-## `bx-table-batch-action`
+## `cds-table-batch-action`
 
 ##   `Misc attributes`
 
 ####     `should render with minimum attributes`
 
 ```
-<div class="bx--batch-summary">
-  <p class="bx--batch-summary__para">
-    NaN items selected
+<div class="cds--batch-summary">
+  <p class="cds--batch-summary__para">
+    0 item selected
   </p>
 </div>
-<div class="bx--action-list">
+<div class="cds--action-list">
   <slot>
   </slot>
-  <button class="bx--batch-summary__cancel bx--btn bx--btn--primary">
+  <button class="cds--batch-summary__cancel cds--btn cds--btn--primary">
     <slot name="cancel-button-content">
       Cancel
     </slot>
@@ -27,15 +27,15 @@
 ####     `should render with various attributes`
 
 ```
-<div class="bx--batch-summary">
-  <p class="bx--batch-summary__para">
+<div class="cds--batch-summary">
+  <p class="cds--batch-summary__para">
     3 items selected
   </p>
 </div>
-<div class="bx--action-list">
+<div class="cds--action-list">
   <slot>
   </slot>
-  <button class="bx--batch-summary__cancel bx--btn bx--btn--primary">
+  <button class="cds--batch-summary__cancel cds--btn cds--btn--primary">
     <slot name="cancel-button-content">
       Cancel
     </slot>
@@ -47,15 +47,15 @@
 ####     `should render non-plural selected rows count`
 
 ```
-<div class="bx--batch-summary">
-  <p class="bx--batch-summary__para">
+<div class="cds--batch-summary">
+  <p class="cds--batch-summary__para">
     1 item selected
   </p>
 </div>
-<div class="bx--action-list">
+<div class="cds--action-list">
   <slot>
   </slot>
-  <button class="bx--batch-summary__cancel bx--btn bx--btn--primary">
+  <button class="cds--batch-summary__cancel cds--btn cds--btn--primary">
     <slot name="cancel-button-content">
       Cancel
     </slot>
@@ -64,7 +64,7 @@
 
 ```
 
-## `bx-table-header-cell`
+## `cds-table-header-cell`
 
 ##   `Misc attributes`
 
@@ -80,14 +80,14 @@
 
 ```
 <button
-  class="bx--table-sort"
+  class="cds--table-sort"
   part="sort-button"
   title="
       Name
     "
 >
   <span
-    class="bx--table-header-label"
+    class="cds--table-header-label"
     part="label-text"
   >
     <slot>
@@ -97,7 +97,7 @@
 
 ```
 
-## `bx-table-row`
+## `cds-table-row`
 
 ##   `Misc attributes`
 
@@ -113,11 +113,11 @@
 
 ```
 <div
-  class="bx--table-column-checkbox"
+  class="cds--table-column-checkbox"
   part="selection-container"
 >
   <input
-    class="bx--checkbox"
+    class="cds--checkbox"
     disabled=""
     id="selection"
     name="selection-name-foo"
@@ -127,7 +127,7 @@
   >
   <label
     aria-label="selection-label-foo"
-    class="bx--checkbox-label"
+    class="cds--checkbox-label"
     for="selection"
   >
   </label>
@@ -137,15 +137,15 @@
 
 ```
 
-## `bx-table-expand-row`
+## `cds-table-expand-row`
 
 ##   `Misc attributes`
 
 ####     `should render with minimum attributes`
 
 ```
-<div class="bx--table-expand">
-  <button class="bx--table-expand__button">
+<div class="cds--table-expand">
+  <button class="cds--table-expand__button">
   </button>
 </div>
 <slot>
@@ -156,16 +156,16 @@
 ####     `should render with various attributes`
 
 ```
-<div class="bx--table-expand">
-  <button class="bx--table-expand__button">
+<div class="cds--table-expand">
+  <button class="cds--table-expand__button">
   </button>
 </div>
 <div
-  class="bx--table-column-checkbox"
+  class="cds--table-column-checkbox"
   part="selection-container"
 >
   <input
-    class="bx--checkbox"
+    class="cds--checkbox"
     disabled=""
     id="selection"
     name="selection-name-foo"
@@ -175,7 +175,7 @@
   >
   <label
     aria-label="selection-label-foo"
-    class="bx--checkbox-label"
+    class="cds--checkbox-label"
     for="selection"
   >
   </label>
@@ -185,7 +185,7 @@
 
 ```
 
-## `bx-table-toolbar-search`
+## `cds-table-toolbar-search`
 
 ##   `Misc attributes`
 
@@ -193,11 +193,15 @@
 
 ```
 <div
-  class="bx--search bx--search--sm"
+  class="cds--search cds--search--sm"
   tabindex="0"
 >
+  <div class="cds--search-magnifier">
+    <slot name="icon">
+    </slot>
+  </div>
   <label
-    class="bx--label"
+    class="cds--label"
     for="input"
     part="label-text"
   >
@@ -205,14 +209,16 @@
     </slot>
   </label>
   <input
-    class="bx--search-input"
+    autocomplete="off"
+    class="cds--search-input"
     id="input"
     part="input"
-    role="searchbox"
+    placeholder="Search"
+    role="search"
   >
   <button
     aria-label=""
-    class="bx--search-close bx--search-close--hidden"
+    class="cds--search-close cds--search-close--hidden"
     part="close-button"
     type="button"
   >
@@ -225,11 +231,15 @@
 
 ```
 <div
-  class="bx--search bx--search--xl"
+  class="cds--search cds--search--xl"
   tabindex="-1"
 >
+  <div class="cds--search-magnifier">
+    <slot name="icon">
+    </slot>
+  </div>
   <label
-    class="bx--label"
+    class="cds--label"
     for="input"
     part="label-text"
   >
@@ -237,14 +247,16 @@
     </slot>
   </label>
   <input
-    class="bx--search-input"
+    autocomplete="off"
+    class="cds--search-input"
     id="input"
     part="input"
-    role="searchbox"
+    placeholder="Search"
+    role="search"
   >
   <button
     aria-label=""
-    class="bx--search-close bx--search-close--hidden"
+    class="cds--search-close cds--search-close--hidden"
     part="close-button"
     type="button"
   >
@@ -253,7 +265,7 @@
 
 ```
 
-## `Misc attributes`
+##   `Misc attributes`
 
 ####   `should render with minimum attributes`
 
diff --git a/packages/carbon-web-components/tests/snapshots/file-uploader.md b/packages/carbon-web-components/tests/snapshots/file-uploader.md
index a52f6277fb8..5137397079f 100644
--- a/packages/carbon-web-components/tests/snapshots/file-uploader.md
+++ b/packages/carbon-web-components/tests/snapshots/file-uploader.md
@@ -1,23 +1,23 @@
 # `file-uploader`
 
-## `bx-file-uploader`
+## `cds-file-uploader`
 
 ##   `Misc attributes`
 
 ####     `should render with minimum attributes`
 
 ```
-<strong class="bx--file--label">
-  <slot name="label-text">
+<p class="cds--file--label">
+  <slot name="label-title">
   </slot>
-</strong>
-<p class="bx--label-description">
-  <slot name="helperText-text">
+</p>
+<p class="cds--label-description">
+  <slot name="label-description">
   </slot>
 </p>
 <slot name="drop-container">
 </slot>
-<div class="bx--file-container">
+<div class="cds--file-container">
   <slot>
   </slot>
 </div>
@@ -27,136 +27,51 @@
 ####     `should render with various attributes`
 
 ```
-<strong class="bx--file--label">
-  <slot name="label-text">
-    label-text-foo
+<p class="cds--file--label">
+  <slot name="label-title">
   </slot>
-</strong>
-<p class="bx--label-description">
-  <slot name="helperText-text">
-    helper-text-foo
+</p>
+<p class="cds--label-description">
+  <slot name="label-description">
   </slot>
 </p>
 <slot name="drop-container">
 </slot>
-<div class="bx--file-container">
+<div class="cds--file-container">
   <slot>
   </slot>
 </div>
 
 ```
 
-## `bx-file-drop-container`
-
-##   `Misc attributes`
-
-####     `should render with minimum attributes`
-
-```
-<label
-  class="bx--file-browse-btn"
-  for="file"
-  tabindex="0"
->
-  <div
-    class="bx--file__drop-container"
-    role="button"
-  >
-    <slot>
-    </slot>
-    <input
-      class="bx--file-input"
-      id="file"
-      tabindex="-1"
-      type="file"
-    >
-  </div>
-</label>
-
-```
-
-####     `should render with various attributes`
-
-```
-<label
-  class="bx--file-browse-btn bx--file-browse-btn--disabled"
-  for="file"
-  tabindex="0"
->
-  <div
-    class="bx--file__drop-container"
-    role="button"
-  >
-    <slot>
-    </slot>
-    <input
-      accept="image/png"
-      class="bx--file-input"
-      disabled=""
-      id="file"
-      multiple=""
-      tabindex="-1"
-      type="file"
-    >
-  </div>
-</label>
-
-```
-
-##   `Handling events`
-
-####     `Should handle drag-over`
-
-```
-<label
-  class="bx--file-browse-btn"
-  for="file"
-  tabindex="0"
->
-  <div
-    class="bx--file__drop-container bx--file__drop-container--drag-over"
-    role="button"
-  >
-    <slot>
-    </slot>
-    <input
-      accept="image/png"
-      class="bx--file-input"
-      id="file"
-      tabindex="-1"
-      type="file"
-    >
-  </div>
-</label>
-
-```
-
-## `bx-file-uploader-item`
+## `cds-file-uploader-item`
 
 ##   `Misc attributes`
 
 ####     `should render with minimum attributes`
 
 ```
-<p class="bx--file-filename">
+<p class="cds--file-filename">
   <slot>
   </slot>
 </p>
-<span class="bx--file__state-container">
-  <bx-loading
-    assistive-text="Uploading"
+<span class="cds--file__state-container">
+  <cds-loading
+    assistive-text="Delete this file"
     type="small"
   >
-  </bx-loading>
+  </cds-loading>
 </span>
-<div class="bx--form-requirement">
-  <div class="bx--form-requirement__title">
-    <slot name="validity-message">
-    </slot>
+<div
+  class="cds--form-requirement"
+  hidden=""
+>
+  <div class="cds--form-requirement__title">
   </div>
-  <p class="bx--form-requirement__supplement">
-    <slot name="validity-message-supplement">
-    </slot>
+  <p
+    class="cds--form-requirement__supplement"
+    hidden=""
+  >
   </p>
 </div>
 
@@ -165,26 +80,24 @@
 ####     `should render with various attributes`
 
 ```
-<p class="bx--file-filename">
+<p class="cds--file-filename">
   <slot>
   </slot>
 </p>
-<span class="bx--file__state-container">
-  <bx-loading
-    assistive-text="uploading-assistive-text-foo"
+<span class="cds--file__state-container">
+  <cds-loading
+    assistive-text="Delete this file"
     type="small"
   >
-  </bx-loading>
+  </cds-loading>
 </span>
-<div class="bx--form-requirement">
-  <div class="bx--form-requirement__title">
-    <slot name="validity-message">
-      validity-message-foo
-    </slot>
+<div class="cds--form-requirement">
+  <div class="cds--form-requirement__title">
   </div>
-  <p class="bx--form-requirement__supplement">
-    <slot name="validity-message-supplement">
-    </slot>
+  <p
+    class="cds--form-requirement__supplement"
+    hidden=""
+  >
   </p>
 </div>
 
@@ -193,20 +106,22 @@
 ####     `should render uploaded state`
 
 ```
-<p class="bx--file-filename">
+<p class="cds--file-filename">
   <slot>
   </slot>
 </p>
-<span class="bx--file__state-container">
+<span class="cds--file__state-container">
 </span>
-<div class="bx--form-requirement">
-  <div class="bx--form-requirement__title">
-    <slot name="validity-message">
-    </slot>
+<div
+  class="cds--form-requirement"
+  hidden=""
+>
+  <div class="cds--form-requirement__title">
   </div>
-  <p class="bx--form-requirement__supplement">
-    <slot name="validity-message-supplement">
-    </slot>
+  <p
+    class="cds--form-requirement__supplement"
+    hidden=""
+  >
   </p>
 </div>
 
@@ -215,26 +130,28 @@
 ####     `should render editing state`
 
 ```
-<p class="bx--file-filename">
+<p class="cds--file-filename">
   <slot>
   </slot>
 </p>
-<span class="bx--file__state-container">
+<span class="cds--file__state-container">
   <button
     aria-label="Delete this file"
-    class="bx--file-close"
+    class="cds--file-close"
     type="button"
   >
   </button>
 </span>
-<div class="bx--form-requirement">
-  <div class="bx--form-requirement__title">
-    <slot name="validity-message">
-    </slot>
+<div
+  class="cds--form-requirement"
+  hidden=""
+>
+  <div class="cds--form-requirement__title">
   </div>
-  <p class="bx--form-requirement__supplement">
-    <slot name="validity-message-supplement">
-    </slot>
+  <p
+    class="cds--form-requirement__supplement"
+    hidden=""
+  >
   </p>
 </div>
 
@@ -243,48 +160,130 @@
 ####     `should render editing state with various attributes`
 
 ```
-<p class="bx--file-filename">
+<p class="cds--file-filename">
   <slot>
   </slot>
 </p>
-<span class="bx--file__state-container">
+<span class="cds--file__state-container">
   <button
-    aria-label="delete-assistive-text-foo"
-    class="bx--file-close"
+    aria-label="Delete this file"
+    class="cds--file-close"
     type="button"
   >
   </button>
 </span>
-<div class="bx--form-requirement">
-  <div class="bx--form-requirement__title">
-    <slot name="validity-message">
-      validity-message-foo
-    </slot>
+<div class="cds--form-requirement">
+  <div class="cds--form-requirement__title">
   </div>
-  <p class="bx--form-requirement__supplement">
-    <slot name="validity-message-supplement">
-    </slot>
+  <p
+    class="cds--form-requirement__supplement"
+    hidden=""
+  >
   </p>
 </div>
 
 ```
 
+## `cds-file-drop-container`
+
+##   `Misc attributes`
+
+####     `should render with minimum attributes`
+
+```
+<label
+  class="cds--file-browse-btn"
+  for="file"
+  tabindex="0"
+>
+  <div
+    class="cds--file__drop-container"
+    role="button"
+  >
+    <slot>
+    </slot>
+    <input
+      class="cds--file-input"
+      id="file"
+      tabindex="-1"
+      type="file"
+    >
+  </div>
+</label>
+```
+
+####     `should render with various attributes`
+
+```
+<label
+  class="cds--file-browse-btn cds--file-browse-btn--disabled"
+  for="file"
+  tabindex="0"
+>
+  <div
+    class="cds--file__drop-container"
+    role="button"
+  >
+    <slot>
+    </slot>
+    <input
+      accept="image/png"
+      class="cds--file-input"
+      disabled=""
+      id="file"
+      multiple=""
+      tabindex="-1"
+      type="file"
+    >
+  </div>
+</label>
+```
+
+##   `Handling events`
+
+####     `Should handle drag-over`
+
+```
+<label
+  class="cds--file-browse-btn"
+  for="file"
+  tabindex="0"
+>
+  <div
+    class="cds--file__drop-container cds--file__drop-container--drag-over"
+    role="button"
+  >
+    <slot>
+    </slot>
+    <input
+      accept="image/png"
+      class="cds--file-input"
+      id="file"
+      tabindex="-1"
+      type="file"
+    >
+  </div>
+</label>
+```
+
+## `cds-file-uploader-shell`
+
 ## `Misc attributes`
 
 ####   `should render with minimum attributes`
 
 ```
-<strong class="bx--file--label">
+<strong class="cds--file--label">
   <slot name="label-text">
   </slot>
 </strong>
-<p class="bx--label-description">
+<p class="cds--label-description">
   <slot name="helperText-text">
   </slot>
 </p>
 <slot name="drop-container">
 </slot>
-<div class="bx--file-container">
+<div class="cds--file-container">
   <slot>
   </slot>
 </div>
@@ -293,25 +292,25 @@
 ####   `should render with various attributes`
 
 ```
-<strong class="bx--file--label">
+<strong class="cds--file--label">
   <slot name="label-text">
     label-text-foo
   </slot>
 </strong>
-<p class="bx--label-description">
+<p class="cds--label-description">
   <slot name="helperText-text">
     helper-text-foo
   </slot>
 </p>
 <slot name="drop-container">
 </slot>
-<div class="bx--file-container">
+<div class="cds--file-container">
   <slot>
   </slot>
 </div>
 ```
 
-## `Handling events`
+##   `Handling events`
 
 ####   `Should handle drag-over`
 
diff --git a/packages/carbon-web-components/tests/snapshots/ui-shell.md b/packages/carbon-web-components/tests/snapshots/ui-shell.md
index bdb669d7b90..39a114c7a4a 100644
--- a/packages/carbon-web-components/tests/snapshots/ui-shell.md
+++ b/packages/carbon-web-components/tests/snapshots/ui-shell.md
@@ -1,6 +1,6 @@
 # `ui-shell`
 
-## `bx-header-menu-button`
+## `cds-header-menu-button`
 
 ##   `Misc attributes`
 
@@ -9,7 +9,7 @@
 ```
 <button
   aria-label="Open navigation menu"
-  class="bx--header__action bx--header__menu-toggle bx--header__menu-trigger"
+  class="cds--header__action cds--header__menu-toggle cds--header__menu-trigger"
   part="button"
 >
 </button>
@@ -21,7 +21,7 @@
 ```
 <button
   aria-label="button-label-inactive"
-  class="bx--header__action bx--header__menu-toggle bx--header__menu-trigger"
+  class="cds--header__action cds--header__menu-toggle cds--header__menu-trigger"
   disabled=""
   part="button"
 >
@@ -34,7 +34,7 @@
 ```
 <button
   aria-label="button-label-active"
-  class="bx--header__action bx--header__action--active bx--header__menu-toggle bx--header__menu-trigger"
+  class="cds--header__action cds--header__action--active cds--header__menu-toggle cds--header__menu-trigger"
   disabled=""
   part="button"
 >
@@ -42,7 +42,7 @@
 
 ```
 
-## `bx-header-menu`
+## `cds-header-menu`
 
 ##   `Misc attributes`
 
@@ -52,7 +52,7 @@
 <a
   aria-expanded="false"
   aria-haspopup="menu"
-  class="bx--header__menu-item bx--header__menu-title"
+  class="cds--header__menu-item cds--header__menu-title"
   href="javascript:void 0"
   part="trigger"
   role="button"
@@ -60,7 +60,7 @@
 >
 </a>
 <ul
-  class="bx--header__menu"
+  class="cds--header__menu"
   part="menu-body"
 >
   <slot>
@@ -75,7 +75,7 @@
 <a
   aria-expanded="true"
   aria-haspopup="menu"
-  class="bx--header__menu-item bx--header__menu-title"
+  class="cds--header__menu-item cds--header__menu-title"
   href="javascript:void 0"
   part="trigger"
   role="button"
@@ -85,7 +85,7 @@
 </a>
 <ul
   aria-label="menu-label-foo"
-  class="bx--header__menu"
+  class="cds--header__menu"
   part="menu-body"
 >
   <slot>
@@ -94,7 +94,7 @@
 
 ```
 
-## `bx-header-name`
+## `cds-header-name`
 
 ##   `Misc attributes`
 
@@ -102,7 +102,7 @@
 
 ```
 <a
-  class="bx--header__name"
+  class="cds--header__name"
   part="link"
 >
   <slot>
@@ -115,12 +115,12 @@
 
 ```
 <a
-  class="bx--header__name"
+  class="cds--header__name"
   href="about:blank"
   part="link"
 >
   <span
-    class="bx--header__name--prefix"
+    class="cds--header__name--prefix"
     part="prefix"
   >
     prefix-foo
@@ -131,7 +131,7 @@
 
 ```
 
-## `bx-header-nav`
+## `cds-header-nav`
 
 ##   `Misc attributes`
 
@@ -139,13 +139,13 @@
 
 ```
 <div
-  class="bx-ce--header__divider"
+  class="cds-ce--header__divider"
   part="divider"
 >
 </div>
 <ul
-  aria-label="undefined"
-  class="bx--header__menu-bar"
+  aria-label=""
+  class="cds--header__menu-bar"
   part="menu-body"
 >
   <slot>
@@ -158,13 +158,13 @@
 
 ```
 <div
-  class="bx-ce--header__divider"
+  class="cds-ce--header__divider"
   part="divider"
 >
 </div>
 <ul
   aria-label="menu-bar-label-foo"
-  class="bx--header__menu-bar"
+  class="cds--header__menu-bar"
   part="menu-body"
 >
   <slot>
@@ -173,7 +173,7 @@
 
 ```
 
-## `bx-header-nav-item`
+## `cds-header-nav-item`
 
 ##   `Misc attributes`
 
@@ -181,12 +181,12 @@
 
 ```
 <a
-  class="bx--header__menu-item"
+  class="cds--header__menu-item"
   part="link"
   tabindex="0"
 >
   <span
-    class="bx--text-truncate--end"
+    class="cds--text-truncate--end"
     part="title"
   >
     <slot>
@@ -200,13 +200,13 @@
 
 ```
 <a
-  class="bx--header__menu-item"
+  class="cds--header__menu-item"
   href="about:blank"
   part="link"
   tabindex="0"
 >
   <span
-    class="bx--text-truncate--end"
+    class="cds--text-truncate--end"
     part="title"
   >
     <slot>
@@ -216,7 +216,7 @@
 
 ```
 
-## `bx-side-nav-link`
+## `cds-side-nav-link`
 
 ##   `Misc attributes`
 
@@ -224,12 +224,12 @@
 
 ```
 <a
-  class="bx--side-nav__link"
+  class="cds--side-nav__link"
   href=""
   part="link"
 >
   <div
-    class="bx--side-nav__icon"
+    class="cds--side-nav__icon"
     hidden=""
     id="title-icon-container"
     part="title-icon-container"
@@ -238,7 +238,7 @@
     </slot>
   </div>
   <span
-    class="bx--side-nav__link-text"
+    class="cds--side-nav__link-text"
     part="title"
   >
     <slot>
@@ -252,12 +252,12 @@
 
 ```
 <a
-  class="bx--side-nav__link bx--side-nav__link--current"
+  class="cds--side-nav__link cds--side-nav__link--current"
   href="about:blank"
   part="link"
 >
   <div
-    class="bx--side-nav__icon"
+    class="cds--side-nav__icon"
     id="title-icon-container"
     part="title-icon-container"
   >
@@ -265,7 +265,7 @@
     </slot>
   </div>
   <span
-    class="bx--side-nav__link-text"
+    class="cds--side-nav__link-text"
     part="title"
   >
     <slot>
@@ -275,7 +275,7 @@
 
 ```
 
-## `bx-side-nav-menu`
+## `cds-side-nav-menu`
 
 ##   `Misc attributes`
 
@@ -285,12 +285,12 @@
 <button
   aria-expanded="false"
   aria-haspopup="true"
-  class="bx--side-nav__submenu"
+  class="cds--side-nav__submenu"
   part="expando"
   type="button"
 >
   <div
-    class="bx--side-nav__icon"
+    class="cds--side-nav__icon"
     hidden=""
     id="title-icon-container"
     part="title-icon-container"
@@ -299,18 +299,18 @@
     </slot>
   </div>
   <span
-    class="bx--side-nav__submenu-title"
+    class="cds--side-nav__submenu-title"
     part="title"
   >
   </span>
   <div
-    class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
+    class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
     part="expando-icon-container"
   >
   </div>
 </button>
 <ul
-  class="bx--side-nav__menu"
+  class="cds--side-nav__menu"
   part="menu-body"
 >
   <slot>
@@ -325,12 +325,12 @@
 <button
   aria-expanded="true"
   aria-haspopup="true"
-  class="bx--side-nav__submenu"
+  class="cds--side-nav__submenu"
   part="expando"
   type="button"
 >
   <div
-    class="bx--side-nav__icon"
+    class="cds--side-nav__icon"
     hidden=""
     id="title-icon-container"
     part="title-icon-container"
@@ -339,19 +339,19 @@
     </slot>
   </div>
   <span
-    class="bx--side-nav__submenu-title"
+    class="cds--side-nav__submenu-title"
     part="title"
   >
     title-foo
   </span>
   <div
-    class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
+    class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
     part="expando-icon-container"
   >
   </div>
 </button>
 <ul
-  class="bx--side-nav__menu"
+  class="cds--side-nav__menu"
   part="menu-body"
 >
   <slot>
@@ -366,12 +366,12 @@
 <button
   aria-expanded="false"
   aria-haspopup="true"
-  class="bx--side-nav__submenu"
+  class="cds--side-nav__submenu"
   part="expando"
   type="button"
 >
   <div
-    class="bx--side-nav__icon"
+    class="cds--side-nav__icon"
     hidden=""
     id="title-icon-container"
     part="title-icon-container"
@@ -380,18 +380,18 @@
     </slot>
   </div>
   <span
-    class="bx--side-nav__submenu-title"
+    class="cds--side-nav__submenu-title"
     part="title"
   >
   </span>
   <div
-    class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
+    class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron"
     part="expando-icon-container"
   >
   </div>
 </button>
 <ul
-  class="bx--side-nav__menu"
+  class="cds--side-nav__menu"
   part="menu-body"
 >
   <slot>
@@ -400,7 +400,7 @@
 
 ```
 
-## `bx-side-nav-menu-item`
+## `cds-side-nav-menu-item`
 
 ##   `Misc attributes`
 
@@ -408,12 +408,12 @@
 
 ```
 <a
-  class="bx--side-nav__link"
+  class="cds--side-nav__link"
   href=""
   part="link"
 >
   <span
-    class="bx--side-nav__link-text"
+    class="cds--side-nav__link-text"
     part="title"
   >
     <slot>
@@ -427,12 +427,12 @@
 
 ```
 <a
-  class="bx--side-nav__link bx--side-nav__link--current"
+  class="cds--side-nav__link cds--side-nav__link--current"
   href="about:blank"
   part="link"
 >
   <span
-    class="bx--side-nav__link-text"
+    class="cds--side-nav__link-text"
     part="title"
   >
     <slot>
@@ -442,7 +442,7 @@
 
 ```
 
-## `Misc attributes`
+##   `Misc attributes`
 
 ####   `should render with minimum attributes`
 
diff --git a/packages/carbon-web-components/tests/spec/accordion_spec.ts b/packages/carbon-web-components/tests/spec/accordion_spec.ts
index 804ce7803ee..8c0a786d1dd 100644
--- a/packages/carbon-web-components/tests/spec/accordion_spec.ts
+++ b/packages/carbon-web-components/tests/spec/accordion_spec.ts
@@ -1,31 +1,28 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import BXAccordionItem from '../../src/components/accordion/accordion-item';
+import CDSAccordionItem from '../../src/components/accordion/accordion-item';
 import { Default } from '../../src/components/accordion/accordion-story';
 
-const template = (props?) =>
-  Default({
-    'bx-accordion': props,
-  });
+const template = () => Default();
 
-describe('bx-accordion', function () {
+describe('cds-accordion', function () {
   describe('Toggling', function () {
-    let item: BXAccordionItem | null;
+    let item: CDSAccordionItem | null;
     const events = new EventManager();
 
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      item = document.body.querySelector('bx-accordion-item');
+      item = document.body.querySelector('cds-accordion-item');
     });
 
     it('Should open and close the item', async function () {
@@ -38,100 +35,28 @@ describe('bx-accordion', function () {
       expect(item!.open).toBe(false);
     });
 
-    it('Should have ESC key close the item', async function () {
-      render(template({ open: true }), document.body);
-      await Promise.resolve();
-      item = document.body.querySelector('bx-accordion-item');
-
-      const event = new CustomEvent('keydown', {
-        bubbles: true,
-        composed: true,
-      });
-      item!
-        .shadowRoot!.querySelector('button')!
-        .dispatchEvent(Object.assign(event, { key: 'Escape' }));
-      await Promise.resolve();
-      expect(item!.open).toBe(false);
-    });
-
-    it('Should have legacy ESC key close the item', async function () {
-      render(template({ open: true }), document.body);
-      await Promise.resolve();
-      item = document.body.querySelector('bx-accordion-item');
-
-      const event = new CustomEvent('keydown', {
-        bubbles: true,
-        composed: true,
-      });
-      item!
-        .shadowRoot!.querySelector('button')!
-        .dispatchEvent(Object.assign(event, { key: 'Esc' }));
-      await Promise.resolve();
-      expect(item!.open).toBe(false);
-    });
-
-    it('Should fire bx-accordion-item-beingtoggled/bx-accordion-item-toggled events upon opening', async function () {
+    it('Should fire cds-accordion-item-beingtoggled/cds-accordion-item-toggled events upon opening', async function () {
       const spyBeforeToggle = jasmine.createSpy('before toggle');
       const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(item!, 'bx-accordion-item-beingtoggled', spyBeforeToggle);
-      events.on(item!, 'bx-accordion-item-toggled', spyAfterToggle);
+      events.on(item!, 'cds-accordion-item-beingtoggled', spyBeforeToggle);
+      events.on(item!, 'cds-accordion-item-toggled', spyAfterToggle);
       item!.shadowRoot!.querySelector('button')!.click();
       await Promise.resolve();
       expect(spyBeforeToggle).toHaveBeenCalled();
       expect(spyAfterToggle).toHaveBeenCalled();
     });
 
-    it('Should fire bx-accordion-item-beingtoggled/bx-accordion-item-toggled events upon closing', async function () {
-      render(template({ open: true }), document.body);
-      await Promise.resolve();
-      item = document.body.querySelector('bx-accordion-item');
-      const spyBeforeToggle = jasmine.createSpy('before toggle');
-      const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(item!, 'bx-accordion-item-beingtoggled', spyBeforeToggle);
-      events.on(item!, 'bx-accordion-item-toggled', spyAfterToggle);
-      const event = new CustomEvent('keydown', {
-        bubbles: true,
-        composed: true,
-      });
-      item!
-        .shadowRoot!.querySelector('button')!
-        .dispatchEvent(Object.assign(event, { key: 'Escape' }));
-      await Promise.resolve();
-      expect(spyBeforeToggle).toHaveBeenCalled();
-      expect(spyAfterToggle).toHaveBeenCalled();
-    });
-
     it('Should support preventing modal from being opened upon user gesture', async function () {
       const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(item!, 'bx-accordion-item-beingtoggled', (event) => {
+      events.on(item!, 'cds-accordion-item-beingtoggled', (event) => {
         event.preventDefault();
       });
-      events.on(item!, 'bx-accordion-item-toggled', spyAfterToggle);
+      events.on(item!, 'cds-accordion-item-toggled', spyAfterToggle);
       item!.shadowRoot!.querySelector('button')!.click();
       await Promise.resolve();
       expect(spyAfterToggle).not.toHaveBeenCalled();
     });
 
-    it('Should support preventing modal from being closed upon user gesture', async function () {
-      render(template({ open: true }), document.body);
-      await Promise.resolve();
-      item = document.body.querySelector('bx-accordion-item');
-      const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(item!, 'bx-accordion-item-beingtoggled', (event) => {
-        event.preventDefault();
-      });
-      events.on(item!, 'bx-accordion-item-toggled', spyAfterToggle);
-      const event = new CustomEvent('keydown', {
-        bubbles: true,
-        composed: true,
-      });
-      item!
-        .shadowRoot!.querySelector('button')!
-        .dispatchEvent(Object.assign(event, { key: 'Escape' }));
-      await Promise.resolve();
-      expect(spyAfterToggle).not.toHaveBeenCalled();
-    });
-
     afterEach(async function () {
       await render(undefined!, document.body);
       events.reset();
diff --git a/packages/carbon-web-components/tests/spec/button_spec.ts b/packages/carbon-web-components/tests/spec/button_spec.ts
index df3592f1d76..4cc41fc325b 100644
--- a/packages/carbon-web-components/tests/spec/button_spec.ts
+++ b/packages/carbon-web-components/tests/spec/button_spec.ts
@@ -1,32 +1,32 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import { BUTTON_KIND } from '../../src/components/button/button';
 import { Default } from '../../src/components/button/button-story';
 
 const template = (props?) =>
   Default({
-    'bx-btn': props,
+    'cds-button': props,
   });
 
-describe('bx-btn', function () {
+describe('cds-button', function () {
   describe('Changing button type', function () {
     let elem: HTMLElement | null;
 
     beforeEach(async function () {
-      elem = document.body.appendChild(document.createElement('bx-btn'));
+      elem = document.body.appendChild(document.createElement('cds-button'));
       await Promise.resolve();
     });
 
     it('should choose the right template for default type', function () {
-      expect(elem!.shadowRoot!.querySelectorAll('button.bx--btn').length).toBe(
+      expect(elem!.shadowRoot!.querySelectorAll('button.cds--btn').length).toBe(
         1
       );
     });
@@ -34,7 +34,7 @@ describe('bx-btn', function () {
     it('should choose the right template for link type', async function () {
       elem!.setAttribute('href', 'about:blank');
       await Promise.resolve();
-      expect(elem!.shadowRoot!.querySelectorAll('a.bx--btn').length).toBe(1);
+      expect(elem!.shadowRoot!.querySelectorAll('a.cds--btn').length).toBe(1);
     });
 
     afterEach(function () {
@@ -49,29 +49,31 @@ describe('bx-btn', function () {
     let elem: HTMLElement | null;
 
     beforeAll(function () {
-      elem = document.body.appendChild(document.createElement('bx-btn'));
+      elem = document.body.appendChild(document.createElement('cds-button'));
     });
 
     it('should deactivate when disabled attribute is set', async function () {
       elem!.setAttribute('disabled', '');
       await Promise.resolve();
       expect(
-        elem!.shadowRoot!.querySelectorAll('.bx--btn--disabled').length
+        elem!.shadowRoot!.querySelectorAll('.cds--btn--disabled').length
       ).toBe(1);
     });
 
     it('should make it small when small attribute is set', async function () {
       elem!.setAttribute('size', 'sm');
       await Promise.resolve();
-      expect(elem!.shadowRoot!.querySelectorAll('.bx--btn--sm').length).toBe(1);
+      expect(elem!.shadowRoot!.querySelectorAll('.cds--btn--sm').length).toBe(
+        1
+      );
     });
 
     it('should allow user to select button type', async function () {
       elem!.setAttribute('kind', BUTTON_KIND.GHOST);
       await Promise.resolve();
-      expect(elem!.shadowRoot!.querySelectorAll('.bx--btn--ghost').length).toBe(
-        1
-      );
+      expect(
+        elem!.shadowRoot!.querySelectorAll('.cds--btn--ghost').length
+      ).toBe(1);
     });
 
     afterAll(function () {
@@ -86,7 +88,7 @@ describe('bx-btn', function () {
     it('should render with minimum attributes for <button>', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-btn' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-button' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -103,7 +105,7 @@ describe('bx-btn', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-btn' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-button' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -111,7 +113,7 @@ describe('bx-btn', function () {
     it('should render with minimum attributes for <a>', async function () {
       render(template({ href: 'about:blank' }), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-btn' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-button' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -133,7 +135,7 @@ describe('bx-btn', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-btn' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-button' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -156,7 +158,7 @@ describe('bx-btn', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-btn' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-button' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/carbon-web-components/tests/spec/checkbox_spec.ts b/packages/carbon-web-components/tests/spec/checkbox_spec.ts
index 9bdd77ac729..4c13cfe3142 100644
--- a/packages/carbon-web-components/tests/spec/checkbox_spec.ts
+++ b/packages/carbon-web-components/tests/spec/checkbox_spec.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import { Default } from '../../src/components/checkbox/checkbox-story';
+import { html, render } from 'lit';
+import { Playground as Default } from '../../src/components/checkbox/checkbox-story';
 
 /**
  * @param formData A `FormData` instance.
@@ -25,10 +25,10 @@ const getValues = (formData: FormData) => {
 
 const template = (props?) =>
   Default({
-    'bx-checkbox': props,
+    'cds-checkbox': props,
   });
 
-describe('bx-checkbox', function () {
+describe('cds-checkbox', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(
@@ -38,11 +38,11 @@ describe('bx-checkbox', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-checkbox' as any)).toMatchSnapshot(
-        {
-          mode: 'shadow',
-        }
-      );
+      expect(
+        document.body.querySelector('cds-checkbox' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
     });
 
     it('Should render with various attributes', async function () {
@@ -60,11 +60,11 @@ describe('bx-checkbox', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-checkbox' as any)).toMatchSnapshot(
-        {
-          mode: 'shadow',
-        }
-      );
+      expect(
+        document.body.querySelector('cds-checkbox' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
     });
   });
 
diff --git a/packages/carbon-web-components/tests/spec/code-snippet_spec.ts b/packages/carbon-web-components/tests/spec/code-snippet_spec.ts
index 3fa3e414b16..94265b87e8f 100644
--- a/packages/carbon-web-components/tests/spec/code-snippet_spec.ts
+++ b/packages/carbon-web-components/tests/spec/code-snippet_spec.ts
@@ -1,41 +1,32 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import {
-  singleLine,
-  multiLine,
+  singleline,
+  multiline,
   inline,
 } from '../../src/components/code-snippet/code-snippet-story';
 
-const singleLineTemplate = (props?) =>
-  singleLine({
-    'bx-code-snippet': props,
-  });
+const singleLineTemplate = () => singleline();
 
-const multiLineTemplate = (props?) =>
-  multiLine({
-    'bx-code-snippet': props,
-  });
+const multiLineTemplate = () => multiline();
 
-const inlineTemplate = (props?) =>
-  inline({
-    'bx-code-snippet': props,
-  });
+const inlineTemplate = () => inline();
 
-describe('bx-code-snippet', function () {
+describe('cds-code-snippet', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes for single line mode', async function () {
       render(singleLineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-code-snippet' as any)
+        document.body.querySelector('cds-code-snippet' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -45,7 +36,7 @@ describe('bx-code-snippet', function () {
       render(multiLineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-code-snippet' as any)
+        document.body.querySelector('cds-code-snippet' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -55,61 +46,37 @@ describe('bx-code-snippet', function () {
       render(inlineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-code-snippet' as any)
+        document.body.querySelector('cds-code-snippet' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
     it('Should render with various attributes for single line mode', async function () {
-      render(
-        singleLineTemplate({
-          codeAssistiveText: 'code-assistive-text-foo',
-          copyButtonAssistiveText: 'copy-button-assistive-text-foo',
-          copyButtonFeedbackText: 'copy-button-feedback-text-foo',
-          copyButtonFeedbackTimeout: 16,
-        }),
-        document.body
-      );
+      render(singleLineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-code-snippet' as any)
+        document.body.querySelector('cds-code-snippet' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
     it('Should render with various attributes for multi line mode', async function () {
-      render(
-        multiLineTemplate({
-          codeAssistiveText: 'code-assistive-text-foo',
-          copyButtonAssistiveText: 'copy-button-assistive-text-foo',
-          copyButtonFeedbackText: 'copy-button-feedback-text-foo',
-          copyButtonFeedbackTimeout: 16,
-        }),
-        document.body
-      );
+      render(multiLineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-code-snippet' as any)
+        document.body.querySelector('cds-code-snippet' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
     it('Should render with various attributes for inline mode', async function () {
-      render(
-        inlineTemplate({
-          codeAssistiveText: 'code-assistive-text-foo',
-          copyButtonAssistiveText: 'copy-button-assistive-text-foo',
-          copyButtonFeedbackText: 'copy-button-feedback-text-foo',
-          copyButtonFeedbackTimeout: 16,
-        }),
-        document.body
-      );
+      render(inlineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-code-snippet' as any)
+        document.body.querySelector('cds-code-snippet' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -128,18 +95,18 @@ describe('bx-code-snippet', function () {
       render(singleLineTemplate(), document.body);
       await Promise.resolve();
       const button = document.body
-        .querySelector('bx-code-snippet')!
-        .shadowRoot!.querySelector('.bx--snippet-button');
+        .querySelector('cds-code-snippet')!
+        .shadowRoot!.querySelector('.cds--snippet-button');
       (button as HTMLElement).click();
       await Promise.resolve();
-      const feedback = button!.querySelector('.bx--btn--copy__feedback');
+      const feedback = button!.querySelector('.cds--btn--copy__feedback');
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(true);
       jasmine.clock().tick(2000);
       await Promise.resolve();
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(false);
     });
 
@@ -147,40 +114,37 @@ describe('bx-code-snippet', function () {
       render(inlineTemplate(), document.body);
       await Promise.resolve();
       const button = document.body
-        .querySelector('bx-code-snippet')!
-        .shadowRoot!.querySelector('.bx--snippet--inline');
+        .querySelector('cds-code-snippet')!
+        .shadowRoot!.querySelector('.cds--snippet--inline');
       (button as HTMLElement).click();
       await Promise.resolve();
-      const feedback = button!.querySelector('.bx--btn--copy__feedback');
+      const feedback = button!.querySelector('.cds--btn--copy__feedback');
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(true);
       jasmine.clock().tick(2000);
       await Promise.resolve();
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(false);
     });
 
     it('Should support changing the duration', async function () {
-      render(
-        singleLineTemplate({ copyButtonFeedbackTimeout: 500 }),
-        document.body
-      );
+      render(singleLineTemplate(), document.body);
       await Promise.resolve();
       const button = document.body
-        .querySelector('bx-code-snippet')!
-        .shadowRoot!.querySelector('.bx--snippet-button');
+        .querySelector('cds-code-snippet')!
+        .shadowRoot!.querySelector('.cds--snippet-button');
       (button as HTMLElement).click();
       await Promise.resolve();
-      const feedback = button!.querySelector('.bx--btn--copy__feedback');
+      const feedback = button!.querySelector('.cds--btn--copy__feedback');
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(true);
       jasmine.clock().tick(500);
       await Promise.resolve();
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(false);
     });
 
@@ -191,55 +155,43 @@ describe('bx-code-snippet', function () {
 
   describe('Expand/collapse button in multi line mode', function () {
     it('Should render the expando', async function () {
-      render(
-        multiLineTemplate({
-          collapseButtonText: 'collapse-button-text-foo',
-          expandButtonText: 'expand-button-text-foo',
-        }),
-        document.body
-      );
+      render(multiLineTemplate(), document.body);
       await Promise.resolve();
-      const snippet = document.body.querySelector('bx-code-snippet');
+      const snippet = document.body.querySelector('cds-code-snippet');
       snippet!.shadowRoot!.querySelector('pre')!.style.display = 'block';
       snippet!.shadowRoot!.querySelector('pre')!.style.height = '256px';
       snippet!.textContent = 'foo'; // Force firing `slotchange` event
       await Promise.resolve(); // For firing `slotchange` event
       await Promise.resolve(); // For re-rendering
       expect(
-        snippet!.shadowRoot!.querySelector('.bx--snippet-btn--expand')
+        snippet!.shadowRoot!.querySelector('.cds--snippet-btn--expand')
       ).toMatchSnapshot();
     });
 
     it('Should change the button text by expanding/collapsing', async function () {
-      render(
-        multiLineTemplate({
-          collapseButtonText: 'collapse-button-text-foo',
-          expandButtonText: 'expand-button-text-foo',
-        }),
-        document.body
-      );
+      render(multiLineTemplate(), document.body);
       await Promise.resolve();
-      const snippet = document.body.querySelector('bx-code-snippet');
+      const snippet = document.body.querySelector('cds-code-snippet');
       snippet!.shadowRoot!.querySelector('pre')!.style.display = 'block';
       snippet!.shadowRoot!.querySelector('pre')!.style.height = '256px';
       snippet!.textContent = 'foo'; // Force firing `slotchange` event
       await Promise.resolve(); // For firing `slotchange` event
       await Promise.resolve(); // For re-rendering
       const expando = snippet!.shadowRoot!.querySelector(
-        '.bx--snippet-btn--expand'
+        '.cds--snippet-btn--expand'
       );
       expect(
-        expando!.querySelector('.bx--snippet-btn--text')!.textContent!.trim()
+        expando!.querySelector('.cds--snippet-btn--text')!.textContent!.trim()
       ).toBe('expand-button-text-foo');
       (expando as HTMLElement).click();
       await Promise.resolve(); // For re-rendering
       expect(
-        expando!.querySelector('.bx--snippet-btn--text')!.textContent!.trim()
+        expando!.querySelector('.cds--snippet-btn--text')!.textContent!.trim()
       ).toBe('collapse-button-text-foo');
     });
 
     afterEach(function () {
-      const snippet = document.body.querySelector('bx-code-snippet');
+      const snippet = document.body.querySelector('cds-code-snippet');
       snippet!.shadowRoot!.querySelector('pre')!.style.display = '';
       snippet!.shadowRoot!.querySelector('pre')!.style.height = '';
     });
diff --git a/packages/carbon-web-components/tests/spec/combo-box_spec.ts b/packages/carbon-web-components/tests/spec/combo-box_spec.ts
index 8796d79ac79..cc27dca3b98 100644
--- a/packages/carbon-web-components/tests/spec/combo-box_spec.ts
+++ b/packages/carbon-web-components/tests/spec/combo-box_spec.ts
@@ -1,26 +1,26 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { delay } from 'bluebird';
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
 
-import BXComboBox from '../../src/components/combo-box/combo-box';
-import BXComboBoxItem from '../../src/components/combo-box/combo-box-item';
-import { Default } from '../../src/components/combo-box/combo-box-story';
+import CDSComboBox from '../../src/components/combo-box/combo-box';
+import CDSComboBoxItem from '../../src/components/combo-box/combo-box-item';
+import { Playground } from '../../src/components/combo-box/combo-box-story';
 
 const template = (props?) =>
-  Default({
-    'bx-combo-box': props,
+  Playground({
+    'cds-combo-box': props,
   });
 
-describe('bx-combo-box', function () {
+describe('cds-combo-box', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
@@ -28,7 +28,7 @@ describe('bx-combo-box', function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-combo-box' as any)
+        document.body.querySelector('cds-combo-box' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -51,7 +51,7 @@ describe('bx-combo-box', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-combo-box' as any)
+        document.body.querySelector('cds-combo-box' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -65,42 +65,42 @@ describe('bx-combo-box', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-combo-box')!;
-      itemNode = elem.querySelector('bx-combo-box-item')!;
+      elem = document.body.querySelector('cds-combo-box')!;
+      itemNode = elem.querySelector('cds-combo-box-item')!;
     });
 
     it('should add "open" stateful modifier class', async function () {
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
 
     it('should remove "open" stateful modifier class (closed default state)', async function () {
-      (elem as BXComboBox).open = true;
+      (elem as CDSComboBox).open = true;
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should always close dropdown when clicking document', async function () {
-      (elem as BXComboBox).open = true;
+      (elem as CDSComboBox).open = true;
       await Promise.resolve();
       elem.dispatchEvent(new CustomEvent('focusout'));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should close dropdown when clicking on an item', async function () {
-      (elem as BXComboBox).open = true;
+      (elem as CDSComboBox).open = true;
       await Promise.resolve();
       (itemNode as HTMLElement).click();
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should support enter key to open the menu', async function () {
@@ -109,32 +109,32 @@ describe('bx-combo-box', function () {
       (event as any).key = 'Enter';
       inner!.dispatchEvent(event);
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       inner!.dispatchEvent(event);
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should provide a way to cancel opening', async function () {
-      events.on(elem, 'bx-combo-box-beingtoggled', (event: CustomEvent) => {
+      events.on(elem, 'cds-combo-box-beingtoggled', (event: CustomEvent) => {
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should provide a way to cancel closing', async function () {
-      (elem as BXComboBox).open = true;
+      (elem as CDSComboBox).open = true;
       await Promise.resolve();
-      events.on(elem, 'bx-combo-box-beingtoggled', (event: CustomEvent) => {
+      events.on(elem, 'cds-combo-box-beingtoggled', (event: CustomEvent) => {
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
   });
 
@@ -145,14 +145,14 @@ describe('bx-combo-box', function () {
     beforeEach(async function () {
       render(template({ open: true, value: 'all' }), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-combo-box')!;
-      itemNodes = elem.querySelectorAll('bx-combo-box-item');
+      elem = document.body.querySelector('cds-combo-box')!;
+      itemNodes = elem.querySelectorAll('cds-combo-box-item');
     });
 
     it('should add/remove "selected" modifier class', async function () {
       (
         document.body.querySelector(
-          'bx-combo-box-item[value="staging"]'
+          'cds-combo-box-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -166,7 +166,7 @@ describe('bx-combo-box', function () {
     it('should update text', async function () {
       (
         document.body.querySelector(
-          'bx-combo-box-item[value="staging"]'
+          'cds-combo-box-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -179,17 +179,17 @@ describe('bx-combo-box', function () {
     it('should update value', async function () {
       (
         document.body.querySelector(
-          'bx-combo-box-item[value="staging"]'
+          'cds-combo-box-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
-      expect((elem as BXComboBox).value).toBe('staging');
+      expect((elem as CDSComboBox).value).toBe('staging');
     });
 
     it('should provide a way to switch item with a value', async function () {
-      (elem as BXComboBox).value = 'staging';
-      await Promise.resolve(); // Update cycle for `<bx-combo-box>`
-      await Promise.resolve(); // Update cycle for `<bx-combo-box-item>`
+      (elem as CDSComboBox).value = 'staging';
+      await Promise.resolve(); // Update cycle for `<cds-combo-box>`
+      await Promise.resolve(); // Update cycle for `<cds-combo-box-item>`
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(true);
@@ -198,15 +198,15 @@ describe('bx-combo-box', function () {
     });
 
     it('should provide a way to cancel switching item', async function () {
-      events.on(elem, 'bx-combo-box-beingselected', (event: CustomEvent) => {
+      events.on(elem, 'cds-combo-box-beingselected', (event: CustomEvent) => {
         expect(event.detail.item).toBe(
-          document.body.querySelector('bx-combo-box-item[value="staging"]')
+          document.body.querySelector('cds-combo-box-item[value="staging"]')
         );
         event.preventDefault();
       });
       (
         document.body.querySelector(
-          'bx-combo-box-item[value="staging"]'
+          'cds-combo-box-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -222,19 +222,19 @@ describe('bx-combo-box', function () {
     });
 
     it('should provide a way to cancel clearing selection', async function () {
-      events.on(elem, 'bx-combo-box-beingselected', (event: CustomEvent) => {
+      events.on(elem, 'cds-combo-box-beingselected', (event: CustomEvent) => {
         expect(event.detail.item).toBeUndefined();
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (
         elem.shadowRoot!.querySelector(
-          '.bx--list-box__selection'
+          '.cds--list-box__selection'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
-      expect((elem as BXComboBox).value).toBe('all');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect((elem as CDSComboBox).value).toBe('all');
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       expect(itemNodes[0].hasAttribute('selected')).toBe(true);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(false);
@@ -247,11 +247,11 @@ describe('bx-combo-box', function () {
     });
 
     it('should reflect the added child to the selection', async function () {
-      const itemNode = document.createElement('bx-combo-box-item');
+      const itemNode = document.createElement('cds-combo-box-item');
       itemNode.textContent = 'text-added';
-      (itemNode as unknown as BXComboBoxItem).value = 'value-added';
+      (itemNode as unknown as CDSComboBoxItem).value = 'value-added';
       elem.appendChild(itemNode);
-      (elem as BXComboBox).value = 'value-added';
+      (elem as CDSComboBox).value = 'value-added';
       await delay(0); // Workaround for IE MutationObserver scheduling bug for moving elements to slot
       try {
         expect(
@@ -272,11 +272,11 @@ describe('bx-combo-box', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-combo-box')!;
+      elem = document.body.querySelector('cds-combo-box')!;
       inputNode = elem.shadowRoot!.getElementById(
         'trigger-label'
       ) as HTMLInputElement;
-      itemNodes = elem.querySelectorAll('bx-combo-box-item');
+      itemNodes = elem.querySelectorAll('cds-combo-box-item');
     });
 
     it('Should highlight the item user types', async function () {
@@ -284,7 +284,7 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(true);
@@ -297,7 +297,7 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(true);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -313,7 +313,7 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -329,7 +329,7 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -342,16 +342,16 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       (
         elem.shadowRoot!.querySelector(
-          '.bx--list-box__selection'
+          '.cds--list-box__selection'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
-      expect((elem as BXComboBox).value).toBe('');
+      expect((elem as CDSComboBox).value).toBe('');
       expect(inputNode.value).toBe('');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -365,17 +365,17 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       const selectionButton = elem.shadowRoot!.querySelector(
-        '.bx--list-box__selection'
+        '.cds--list-box__selection'
       );
       const event = new CustomEvent('keypress', { bubbles: true });
       (event as any).key = ' ';
       selectionButton!.dispatchEvent(event);
       await Promise.resolve();
-      expect((elem as BXComboBox).value).toBe('');
+      expect((elem as CDSComboBox).value).toBe('');
       expect(inputNode.value).toBe('');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -389,17 +389,17 @@ describe('bx-combo-box', function () {
       inputNode.dispatchEvent(new CustomEvent('input', { bubbles: true }));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
       const selectionButton = elem.shadowRoot!.querySelector(
-        '.bx--list-box__selection'
+        '.cds--list-box__selection'
       );
       const event = new CustomEvent('keypress', { bubbles: true });
       (event as any).key = 'Enter';
       selectionButton!.dispatchEvent(event);
       await Promise.resolve();
-      expect((elem as BXComboBox).value).toBe('');
+      expect((elem as CDSComboBox).value).toBe('');
       expect(inputNode.value).toBe('');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -409,11 +409,11 @@ describe('bx-combo-box', function () {
     });
 
     it('Should support selecting an item after typing', async function () {
-      (elem as BXComboBox).open = true;
+      (elem as CDSComboBox).open = true;
       await Promise.resolve();
       (
         document.body.querySelector(
-          'bx-combo-box-item[value="staging"]'
+          'cds-combo-box-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -422,12 +422,12 @@ describe('bx-combo-box', function () {
       await Promise.resolve();
       (
         document.body.querySelector(
-          'bx-combo-box-item[value="staging"]'
+          'cds-combo-box-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(true);
diff --git a/packages/carbon-web-components/tests/spec/content-switcher_spec.ts b/packages/carbon-web-components/tests/spec/content-switcher_spec.ts
index cb82e4738ce..412a313f3b5 100644
--- a/packages/carbon-web-components/tests/spec/content-switcher_spec.ts
+++ b/packages/carbon-web-components/tests/spec/content-switcher_spec.ts
@@ -1,23 +1,23 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import BXTabs from '../../src/components/tabs/tabs';
-import { Default } from '../../src/components/content-switcher/content-switcher-story';
+import CDSTabs from '../../src/components/tabs/tabs';
+import { Playground } from '../../src/components/content-switcher/content-switcher-story';
 
 const template = (props?) =>
-  Default({
-    'bx-content-switcher': props,
+  Playground({
+    'cds-content-switcher': props,
   });
 
-describe('bx-content-switcher', function () {
+describe('cds-content-switcher', function () {
   describe('Selecting an item', function () {
     const events = new EventManager();
 
@@ -25,7 +25,7 @@ describe('bx-content-switcher', function () {
       render(template(), document.body);
       await Promise.resolve();
       const itemNodes = document.body.querySelectorAll(
-        'bx-content-switcher-item'
+        'cds-content-switcher-item'
       );
       (itemNodes[2] as HTMLElement).click();
       await Promise.resolve();
@@ -40,24 +40,24 @@ describe('bx-content-switcher', function () {
       render(template(), document.body);
       await Promise.resolve();
       const itemNodes = document.body.querySelectorAll(
-        'bx-content-switcher-item'
+        'cds-content-switcher-item'
       );
       (itemNodes[2] as HTMLElement).click();
       await Promise.resolve();
       expect(
-        (document.body.querySelector('bx-content-switcher') as BXTabs).value
+        (document.body.querySelector('cds-content-switcher') as CDSTabs).value
       ).toBe('staging');
     });
 
     it('should provide a way to switch item with a value', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      (document.body.querySelector('bx-content-switcher') as BXTabs).value =
+      (document.body.querySelector('cds-content-switcher') as CDSTabs).value =
         'staging';
-      await Promise.resolve(); // Update cycle for `<bx-content-switcher>`
-      await Promise.resolve(); // Update cycle for `<bx-content-switcher-item>`
+      await Promise.resolve(); // Update cycle for `<cds-content-switcher>`
+      await Promise.resolve(); // Update cycle for `<cds-content-switcher-item>`
       const itemNodes = document.body.querySelectorAll(
-        'bx-content-switcher-item'
+        'cds-content-switcher-item'
       );
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
@@ -69,16 +69,16 @@ describe('bx-content-switcher', function () {
     it('should provide a way to cancel switching item', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-content-switcher');
+      const elem = document.body.querySelector('cds-content-switcher');
       const itemNodes = document.body.querySelectorAll(
-        'bx-content-switcher-item'
+        'cds-content-switcher-item'
       );
-      (document.body.querySelector('bx-content-switcher') as BXTabs).value =
+      (document.body.querySelector('cds-content-switcher') as CDSTabs).value =
         'all';
       await Promise.resolve();
       events.on(
         elem!,
-        'bx-content-switcher-beingselected',
+        'cds-content-switcher-beingselected',
         (event: CustomEvent) => {
           expect(event.detail.item).toBe(itemNodes[2]);
           event.preventDefault();
@@ -103,7 +103,7 @@ describe('bx-content-switcher', function () {
       render(template(), document.body);
       await Promise.resolve();
       const itemNodes = document.body.querySelectorAll(
-        'bx-content-switcher-item'
+        'cds-content-switcher-item'
       );
       itemNodes[0].dispatchEvent(
         new CustomEvent('mouseover', { bubbles: true })
diff --git a/packages/carbon-web-components/tests/spec/copy-button_spec.ts b/packages/carbon-web-components/tests/spec/copy-button_spec.ts
index a28bbc5d21f..b67e531663c 100644
--- a/packages/carbon-web-components/tests/spec/copy-button_spec.ts
+++ b/packages/carbon-web-components/tests/spec/copy-button_spec.ts
@@ -1,27 +1,27 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import { Default } from '../../src/components/copy-button/copy-button-story';
 
 const template = (props?) =>
   Default({
-    'bx-copy-button': props,
+    'cds-copy-button': props,
   });
 
-describe('bx-copy-button', function () {
+describe('cds-copy-button', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-copy-button' as any)
+        document.body.querySelector('cds-copy-button' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -38,7 +38,7 @@ describe('bx-copy-button', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-copy-button' as any)
+        document.body.querySelector('cds-copy-button' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -57,18 +57,18 @@ describe('bx-copy-button', function () {
       render(template(), document.body);
       await Promise.resolve();
       const button = document.body
-        .querySelector('bx-copy-button')!
+        .querySelector('cds-copy-button')!
         .shadowRoot!.querySelector('button');
       button!.click();
       await Promise.resolve();
-      const feedback = button!.querySelector('.bx--btn--copy__feedback');
+      const feedback = button!.querySelector('.cds--btn--copy__feedback');
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(true);
       jasmine.clock().tick(2000);
       await Promise.resolve();
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(false);
     });
 
@@ -76,18 +76,18 @@ describe('bx-copy-button', function () {
       render(template({ feedbackTimeout: 500 }), document.body);
       await Promise.resolve();
       const button = document.body
-        .querySelector('bx-copy-button')!
+        .querySelector('cds-copy-button')!
         .shadowRoot!.querySelector('button');
       button!.click();
       await Promise.resolve();
-      const feedback = button!.querySelector('.bx--btn--copy__feedback');
+      const feedback = button!.querySelector('.cds--btn--copy__feedback');
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(true);
       jasmine.clock().tick(500);
       await Promise.resolve();
       expect(
-        feedback!.classList.contains('bx--btn--copy__feedback--displayed')
+        feedback!.classList.contains('cds--btn--copy__feedback--displayed')
       ).toBe(false);
     });
 
diff --git a/packages/carbon-web-components/tests/spec/data-table_spec.ts b/packages/carbon-web-components/tests/spec/data-table_spec.ts
index 2ad86f46fdc..9821f144e56 100644
--- a/packages/carbon-web-components/tests/spec/data-table_spec.ts
+++ b/packages/carbon-web-components/tests/spec/data-table_spec.ts
@@ -1,42 +1,39 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit';
 import EventManager from '../utils/event-manager';
-import ifNonNull from '../../src/globals/directives/if-non-null';
-import { INPUT_SIZE } from '../../src/components/input/input';
-import { TABLE_COLOR_SCHEME } from '../../src/components/data-table/table';
-import BXTableHeaderCell, {
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { INPUT_SIZE } from '../../src/components/text-input/text-input';
+import CDSTableHeaderCell, {
   TABLE_SORT_CYCLE,
   TABLE_SORT_DIRECTION,
 } from '../../src/components/data-table/table-header-cell';
-import BXTableRow from '../../src/components/data-table/table-row';
-import BXTableExpandRow from '../../src/components/data-table/table-expand-row';
-import BXTableExpandedRow from '../../src/components/data-table/table-expanded-row';
-import BXTableToolbarSearch from '../../src/components/data-table/table-toolbar-search';
-import { Default } from '../../src/components/data-table/data-table-story';
-
-const template = ({ colorScheme = TABLE_COLOR_SCHEME.REGULAR, ...rest } = {}) =>
-  Default({
-    'bx-table': { ...rest },
-    'bx-table-body': { colorScheme },
+import CDSTableRow from '../../src/components/data-table/table-row';
+import CDSTableExpandedRow from '../../src/components/data-table/table-expanded-row';
+import CDSTableToolbarSearch from '../../src/components/data-table/table-toolbar-search';
+import { Playground } from '../../src/components/data-table/stories/data-table-basic-story';
+
+const template = ({ ...rest } = {}) =>
+  Playground({
+    'cds-table': { ...rest },
   });
 
 const headerCellTemplate = (props?) => {
   const { sortActive, sortCycle, sortDirection } = props ?? {};
   return html`
-    <bx-table-header-cell
+    <cds-table-header-cell
       ?sort-active="${sortActive}"
-      sort-cycle="${ifNonNull(sortCycle)}"
-      sort-direction="${ifNonNull(sortDirection)}">
+      sort-cycle="${ifDefined(sortCycle)}"
+      sort-direction="${ifDefined(sortDirection)}">
       Name
-    </bx-table-header-cell>
+    </cds-table-header-cell>
   `;
 };
 
@@ -44,12 +41,12 @@ const rowTemplate = (props?) => {
   const { disabled, selected, selectionName, selectionLabel, selectionValue } =
     props ?? {};
   return html`
-    <bx-table-row
+    <cds-table-row
       ?disabled="${disabled}"
       ?selected="${selected}"
-      selection-name="${ifNonNull(selectionName)}"
-      selection-label="${ifNonNull(selectionLabel)}"
-      selection-value="${ifNonNull(selectionValue)}"></bx-table-row>
+      selection-name="${ifDefined(selectionName)}"
+      selection-label="${ifDefined(selectionLabel)}"
+      selection-value="${ifDefined(selectionValue)}"></cds-table-row>
   `;
 };
 
@@ -63,45 +60,45 @@ const expandRowTemplate = (props?) => {
     selectionValue,
   } = props ?? {};
   return html`
-    <bx-table-expand-row
+    <cds-table-row
       ?disabled="${disabled}"
       ?expanded="${expanded}"
       ?selected="${selected}"
-      selection-name="${ifNonNull(selectionName)}"
-      selection-label="${ifNonNull(selectionLabel)}"
-      selection-value="${ifNonNull(selectionValue)}"></bx-table-expand-row>
-    <bx-table-expanded-row></bx-table-expanded-row>
+      selection-name="${ifDefined(selectionName)}"
+      selection-label="${ifDefined(selectionLabel)}"
+      selection-value="${ifDefined(selectionValue)}"></cds-table-row>
+    <cds-table-expanded-row></cds-table-expanded-row>
   `;
 };
 
 const batchActionTemplate = (props?) => {
   const { active, selectedRowsCount } = props ?? {};
   return html`
-    <bx-table-batch-actions
+    <cds-table-batch-actions
       ?active="${active}"
-      selected-rows-count="${selectedRowsCount}"></bx-table-batch-actions>
+      selected-rows-count="${selectedRowsCount}"></cds-table-batch-actions>
   `;
 };
 
 const toolbarSearchTemplate = (props?) => {
   const { expanded, size } = props ?? {};
   return html`
-    <bx-table-toolbar-search
+    <cds-table-toolbar-search
       ?expanded="${expanded}"
-      size="${ifNonNull(size)}"></bx-table-toolbar-search>
+      size="${ifDefined(size)}"></cds-table-toolbar-search>
   `;
 };
 
 describe('data-table', function () {
   const events = new EventManager();
 
-  describe('bx-table-batch-action', function () {
+  describe('cds-table-batch-action', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(batchActionTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-batch-actions' as any)
+          document.body.querySelector('cds-table-batch-actions' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -115,7 +112,7 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-batch-actions' as any)
+          document.body.querySelector('cds-table-batch-actions' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -129,7 +126,7 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-batch-actions' as any)
+          document.body.querySelector('cds-table-batch-actions' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -140,14 +137,14 @@ describe('data-table', function () {
       beforeEach(async function () {
         render(batchActionTemplate({ active: true }), document.body);
         await Promise.resolve();
-        elem = document.body.querySelector('bx-table-batch-actions')!;
+        elem = document.body.querySelector('cds-table-batch-actions')!;
       });
 
       it('should fire a custom event', async function () {
         const spyCancel = jasmine.createSpy('cancel');
-        events.on(elem!, 'bx-table-batch-actions-cancel-clicked', spyCancel);
+        events.on(elem!, 'cds-table-batch-actions-cancel-clicked', spyCancel);
         const cancelButton = elem.shadowRoot!.querySelector(
-          '.bx--batch-summary__cancel'
+          '.cds--batch-summary__cancel'
         );
         (cancelButton as HTMLElement).click();
         await Promise.resolve();
@@ -156,18 +153,15 @@ describe('data-table', function () {
     });
   });
 
-  describe('bx-table-body', function () {
+  describe('cds-table-body', function () {
     it('should support setting zebra stripe to rows', async function () {
-      render(
-        template({ colorScheme: TABLE_COLOR_SCHEME.ZEBRA }),
-        document.body
-      );
+      render(template(), document.body);
       await Promise.resolve();
       const result = Array.prototype.every.call(
-        document.body.querySelectorAll('bx-table-row'),
+        document.body.querySelectorAll('cds-table-row'),
         (item, i) =>
-          (item as BXTableRow).even === ((i + 1) % 2 === 0) &&
-          (item as BXTableRow).odd === ((i + 1) % 2 !== 0)
+          (item as CDSTableRow).even === ((i + 1) % 2 === 0) &&
+          (item as CDSTableRow).odd === ((i + 1) % 2 !== 0)
       );
       expect(result).toBe(true);
     });
@@ -176,22 +170,22 @@ describe('data-table', function () {
       render(template(), document.body);
       await Promise.resolve();
       const result = Array.prototype.every.call(
-        document.body.querySelectorAll('bx-table-row'),
+        document.body.querySelectorAll('cds-table-row'),
         (item) =>
-          (item as BXTableRow).even === false &&
-          (item as BXTableRow).odd === false
+          (item as CDSTableRow).even === false &&
+          (item as CDSTableRow).odd === false
       );
       expect(result).toBe(true);
     });
   });
 
-  describe('bx-table-header-cell', function () {
+  describe('cds-table-header-cell', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(headerCellTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-header-cell' as any)
+          document.body.querySelector('cds-table-header-cell' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -206,7 +200,7 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-header-cell' as any)
+          document.body.querySelector('cds-table-header-cell' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -223,10 +217,10 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         const elem = document.body.querySelector(
-          'bx-table-header-cell'
-        ) as BXTableHeaderCell;
+          'cds-table-header-cell'
+        ) as CDSTableHeaderCell;
         const button = elem.shadowRoot!.querySelector(
-          '.bx--table-sort'
+          '.cds--table-sort'
         ) as HTMLButtonElement;
         button.click();
         await Promise.resolve();
@@ -250,10 +244,10 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         const elem = document.body.querySelector(
-          'bx-table-header-cell'
-        ) as BXTableHeaderCell;
+          'cds-table-header-cell'
+        ) as CDSTableHeaderCell;
         const button = elem.shadowRoot!.querySelector(
-          '.bx--table-sort'
+          '.cds--table-sort'
         ) as HTMLButtonElement;
         button.click();
         await Promise.resolve();
@@ -277,10 +271,10 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         const elem = document.body.querySelector(
-          'bx-table-header-cell'
-        ) as BXTableHeaderCell;
+          'cds-table-header-cell'
+        ) as CDSTableHeaderCell;
         const button = elem.shadowRoot!.querySelector(
-          '.bx--table-sort'
+          '.cds--table-sort'
         ) as HTMLButtonElement;
         button.click();
         await Promise.resolve();
@@ -304,10 +298,10 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         const elem = document.body.querySelector(
-          'bx-table-header-cell'
-        ) as BXTableHeaderCell;
+          'cds-table-header-cell'
+        ) as CDSTableHeaderCell;
         const button = elem.shadowRoot!.querySelector(
-          '.bx--table-sort'
+          '.cds--table-sort'
         ) as HTMLButtonElement;
         button.click();
         await Promise.resolve();
@@ -331,13 +325,13 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         const elem = document.body.querySelector(
-          'bx-table-header-cell'
-        ) as BXTableHeaderCell;
-        events.on(elem, 'bx-table-header-cell-sort', (event) => {
+          'cds-table-header-cell'
+        ) as CDSTableHeaderCell;
+        events.on(elem, 'cds-table-header-cell-sort', (event) => {
           event.preventDefault();
         });
         const button = elem.shadowRoot!.querySelector(
-          '.bx--table-sort'
+          '.cds--table-sort'
         ) as HTMLButtonElement;
         button.click();
         await Promise.resolve();
@@ -346,13 +340,13 @@ describe('data-table', function () {
     });
   });
 
-  describe('bx-table-row', function () {
+  describe('cds-table-row', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(rowTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-row' as any)
+          document.body.querySelector('cds-table-row' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -371,7 +365,7 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-row' as any)
+          document.body.querySelector('cds-table-row' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -379,7 +373,7 @@ describe('data-table', function () {
     });
 
     describe('Handling selection', function () {
-      it('should fire bx-table-row-change-selection event upon selecting', async function () {
+      it('should fire cds-table-row-change-selection event upon selecting', async function () {
         const spyBeforeChange = jasmine.createSpy('before toggle');
         render(
           rowTemplate({
@@ -388,16 +382,16 @@ describe('data-table', function () {
           document.body
         );
         await Promise.resolve();
-        const row = document.body.querySelector('bx-table-row');
-        events.on(row!, 'bx-table-row-change-selection', spyBeforeChange);
+        const row = document.body.querySelector('cds-table-row');
+        events.on(row!, 'cds-table-row-change-selection', spyBeforeChange);
         row!.shadowRoot!.querySelector('input')!.click();
         expect(spyBeforeChange).toHaveBeenCalled();
         expect(spyBeforeChange.calls.argsFor(0)[0].detail.selected).toBe(true);
         await Promise.resolve();
-        expect((row as BXTableRow).selected).toBe(true);
+        expect((row as CDSTableRow).selected).toBe(true);
       });
 
-      it('should fire bx-table-row-change-selection event upon unselecting', async function () {
+      it('should fire cds-table-row-change-selection event upon unselecting', async function () {
         const spyBeforeChange = jasmine.createSpy('before toggle');
         render(
           rowTemplate({
@@ -407,13 +401,13 @@ describe('data-table', function () {
           document.body
         );
         await Promise.resolve();
-        const row = document.body.querySelector('bx-table-row');
-        events.on(row!, 'bx-table-row-change-selection', spyBeforeChange);
+        const row = document.body.querySelector('cds-table-row');
+        events.on(row!, 'cds-table-row-change-selection', spyBeforeChange);
         row!.shadowRoot!.querySelector('input')!.click();
         expect(spyBeforeChange).toHaveBeenCalled();
         expect(spyBeforeChange.calls.argsFor(0)[0].detail.selected).toBe(false);
         await Promise.resolve();
-        expect((row as BXTableRow).selected).toBe(false);
+        expect((row as CDSTableRow).selected).toBe(false);
       });
 
       it('should support preventing table row selection from being toggled upon user gesture', async function () {
@@ -424,24 +418,24 @@ describe('data-table', function () {
           document.body
         );
         await Promise.resolve();
-        const row = document.body.querySelector('bx-table-row');
-        events.on(row!, 'bx-table-row-change-selection', (event) => {
+        const row = document.body.querySelector('cds-table-row');
+        events.on(row!, 'cds-table-row-change-selection', (event) => {
           event.preventDefault();
         });
         row!.shadowRoot!.querySelector('input')!.click();
         await Promise.resolve();
-        expect((row as BXTableRow).selected).toBe(false);
+        expect((row as CDSTableRow).selected).toBe(false);
       });
     });
   });
 
-  describe('bx-table-expand-row', function () {
+  describe('cds-table-row', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(expandRowTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-expand-row' as any)
+          document.body.querySelector('cds-table-row' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -459,7 +453,7 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-expand-row' as any)
+          document.body.querySelector('cds-table-row' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -469,36 +463,36 @@ describe('data-table', function () {
         render(expandRowTemplate(), document.body);
         await Promise.resolve();
 
-        const expandRow = document.body.querySelector('bx-table-expand-row');
+        const expandRow = document.body.querySelector('cds-table-row');
         const expandedRow = document.body.querySelector(
-          'bx-table-expanded-row'
+          'cds-table-expanded-row'
         );
 
         expandRow!.shadowRoot!.querySelector('button')!.click();
         await Promise.resolve();
-        expect((expandRow as BXTableExpandRow).expanded).toBe(true);
+        expect((expandRow as CDSTableRow).expanded).toBe(true);
         await Promise.resolve();
-        expect((expandedRow as BXTableExpandedRow).expanded).toBe(true);
+        expect((expandedRow as CDSTableExpandedRow).expanded).toBe(true);
 
         expandRow!.shadowRoot!.querySelector('button')!.click();
         await Promise.resolve();
-        expect((expandRow as BXTableExpandRow).expanded).toBe(false);
+        expect((expandRow as CDSTableRow).expanded).toBe(false);
         await Promise.resolve();
-        expect((expandedRow as BXTableExpandedRow).expanded).toBe(false);
+        expect((expandedRow as CDSTableExpandedRow).expanded).toBe(false);
       });
 
-      it('should fire bx-table-row-expando-beingtoggled/bx-table-row-expando-toggled events upon expanding', async function () {
+      it('should fire cds-table-row-expando-beingtoggled/cds-table-row-expando-toggled events upon expanding', async function () {
         const spyBeforeToggle = jasmine.createSpy('before toggle');
         const spyAfterToggle = jasmine.createSpy('after toggle');
         render(expandRowTemplate(), document.body);
         await Promise.resolve();
-        const expandRow = document.body.querySelector('bx-table-expand-row');
+        const expandRow = document.body.querySelector('cds-table-row');
         events.on(
           expandRow!,
-          'bx-table-row-expando-beingtoggled',
+          'cds-table-row-expando-beingtoggled',
           spyBeforeToggle
         );
-        events.on(expandRow!, 'bx-table-row-expando-toggled', spyAfterToggle);
+        events.on(expandRow!, 'cds-table-row-expando-toggled', spyAfterToggle);
         expandRow!.shadowRoot!.querySelector('button')!.click();
         await Promise.resolve();
         expect(spyBeforeToggle).toHaveBeenCalled();
@@ -507,18 +501,18 @@ describe('data-table', function () {
         expect(spyAfterToggle.calls.argsFor(0)[0].detail.expanded).toBe(true);
       });
 
-      it('should fire bx-table-row-expando-beingtoggled/bx-table-row-expando-toggled events upon collapsing', async function () {
+      it('should fire cds-table-row-expando-beingtoggled/cds-table-row-expando-toggled events upon collapsing', async function () {
         const spyBeforeToggle = jasmine.createSpy('before toggle');
         const spyAfterToggle = jasmine.createSpy('after toggle');
         render(expandRowTemplate({ expanded: true }), document.body);
         await Promise.resolve();
-        const expandRow = document.body.querySelector('bx-table-expand-row');
+        const expandRow = document.body.querySelector('cds-table-row');
         events.on(
           expandRow!,
-          'bx-table-row-expando-beingtoggled',
+          'cds-table-row-expando-beingtoggled',
           spyBeforeToggle
         );
-        events.on(expandRow!, 'bx-table-row-expando-toggled', spyAfterToggle);
+        events.on(expandRow!, 'cds-table-row-expando-toggled', spyAfterToggle);
         expandRow!.shadowRoot!.querySelector('button')!.click();
         await Promise.resolve();
         expect(spyBeforeToggle).toHaveBeenCalled();
@@ -531,11 +525,11 @@ describe('data-table', function () {
         const spyAfterToggle = jasmine.createSpy('after toggle');
         render(expandRowTemplate(), document.body);
         await Promise.resolve();
-        const expandRow = document.body.querySelector('bx-table-expand-row');
-        events.on(expandRow!, 'bx-table-row-expando-beingtoggled', (event) => {
+        const expandRow = document.body.querySelector('cds-table-row');
+        events.on(expandRow!, 'cds-table-row-expando-beingtoggled', (event) => {
           event.preventDefault();
         });
-        events.on(expandRow!, 'bx-table-row-expando-toggled', spyAfterToggle);
+        events.on(expandRow!, 'cds-table-row-expando-toggled', spyAfterToggle);
         expandRow!.shadowRoot!.querySelector('button')!.click();
         await Promise.resolve();
         expect(spyAfterToggle).not.toHaveBeenCalled();
@@ -547,31 +541,31 @@ describe('data-table', function () {
         render(expandRowTemplate(), document.body);
         await Promise.resolve();
 
-        const expandRow = document.body.querySelector('bx-table-expand-row');
+        const expandRow = document.body.querySelector('cds-table-row');
         const expandedRow = document.body.querySelector(
-          'bx-table-expanded-row'
+          'cds-table-expanded-row'
         );
 
         expandRow!.dispatchEvent(
           new CustomEvent('mouseover', { bubbles: true })
         );
-        expect((expandedRow as BXTableExpandedRow).highlighted).toBe(true);
+        expect((expandedRow as CDSTableExpandedRow).highlighted).toBe(true);
 
         expandRow!.dispatchEvent(
           new CustomEvent('mouseout', { bubbles: true })
         );
-        expect((expandedRow as BXTableExpandedRow).highlighted).toBe(false);
+        expect((expandedRow as CDSTableExpandedRow).highlighted).toBe(false);
       });
     });
   });
 
-  describe('bx-table-toolbar-search', function () {
+  describe('cds-table-toolbar-search', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(toolbarSearchTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-toolbar-search' as any)
+          document.body.querySelector('cds-table-toolbar-search' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -585,7 +579,7 @@ describe('data-table', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-table-toolbar-search' as any)
+          document.body.querySelector('cds-table-toolbar-search' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -595,14 +589,14 @@ describe('data-table', function () {
         render(toolbarSearchTemplate(), document.body);
         await Promise.resolve();
         const toolbarSearch = document.body.querySelector(
-          'bx-table-toolbar-search'
+          'cds-table-toolbar-search'
         );
         const input = toolbarSearch!.shadowRoot!.querySelector('input');
         spyOn(input!, 'focus');
         toolbarSearch!.dispatchEvent(
           new CustomEvent('focusin', { bubbles: true })
         );
-        expect((toolbarSearch as BXTableToolbarSearch).expanded).toBe(true);
+        expect((toolbarSearch as CDSTableToolbarSearch).expanded).toBe(true);
         await Promise.resolve();
         await Promise.resolve();
         expect(input!.focus).toHaveBeenCalled();
@@ -612,12 +606,12 @@ describe('data-table', function () {
         render(toolbarSearchTemplate({ expanded: true }), document.body);
         await Promise.resolve();
         const toolbarSearch = document.body.querySelector(
-          'bx-table-toolbar-search'
+          'cds-table-toolbar-search'
         );
         toolbarSearch!.dispatchEvent(
           new CustomEvent('focusout', { bubbles: true })
         );
-        expect((toolbarSearch as BXTableToolbarSearch).expanded).toBe(false);
+        expect((toolbarSearch as CDSTableToolbarSearch).expanded).toBe(false);
       });
     });
   });
diff --git a/packages/carbon-web-components/tests/spec/date-picker_spec.ts b/packages/carbon-web-components/tests/spec/date-picker_spec.ts
index ce8cf6fe872..bdd6ab63c1f 100644
--- a/packages/carbon-web-components/tests/spec/date-picker_spec.ts
+++ b/packages/carbon-web-components/tests/spec/date-picker_spec.ts
@@ -7,132 +7,48 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit';
 import pick from 'lodash-es/pick';
 import flatpickr from 'flatpickr';
 import EventManager from '../utils/event-manager';
 
-import BXDatePicker from '../../src/components/date-picker/date-picker';
-import BXDatePickerInput from '../../src/components/date-picker/date-picker-input';
+import CDSDatePicker from '../../src/components/date-picker/date-picker';
+import CDSDatePickerInput from '../../src/components/date-picker/date-picker-input';
 import {
-  Default,
+  Playground,
   singleWithCalendar,
   rangeWithCalendar,
 } from '../../src/components/date-picker/date-picker-story';
 
 const defaultTemplate = (props?) => {
   const {
-    colorScheme,
     disabled,
-    hideLabel,
     invalid,
-    labelText,
     name,
     value,
     placeholder,
     size,
-    sizeHorizontal,
-    validityMessage,
+    short,
+    invalidText,
   } = props ?? {};
-  return Default({
-    'bx-date-picker': { disabled, name, value },
-    'bx-date-picker-input': {
-      colorScheme,
-      hideLabel,
+  return Playground({
+    'cds-date-picker': { disabled, name, value },
+    'cds-date-picker-input': {
       invalid,
-      labelText,
       placeholder,
       size,
-      sizeHorizontal,
-      validityMessage,
+      short,
+      invalidText,
     },
   });
 };
 
-const singleWithCalendarTemplate = (props?) => {
-  const {
-    colorScheme,
-    dateFormat,
-    disabled,
-    enabledRange,
-    hideLabel,
-    invalid,
-    labelText,
-    name,
-    open,
-    placeholder,
-    size,
-    validityMessage,
-    value,
-    onChanged,
-    onFlatpickrError,
-    onInput,
-  } = props ?? {};
-  return singleWithCalendar({
-    'bx-date-picker': {
-      dateFormat,
-      disabled,
-      enabledRange,
-      name,
-      open,
-      value,
-      onChanged,
-      onFlatpickrError,
-    },
-    'bx-date-picker-input': {
-      colorScheme,
-      hideLabel,
-      invalid,
-      labelText,
-      placeholder,
-      size,
-      validityMessage,
-      onInput,
-    },
-  });
+const singleWithCalendarTemplate = () => {
+  return singleWithCalendar();
 };
 
-const rangeWithCalendarTemplate = (props?) => {
-  const {
-    colorScheme,
-    dateFormat,
-    disabled,
-    enabledRange,
-    hideLabel,
-    invalid,
-    labelText,
-    name,
-    open,
-    placeholder,
-    size,
-    validityMessage,
-    value,
-    onChanged,
-    onFlatpickrError,
-    onInput,
-  } = props ?? {};
-  return rangeWithCalendar({
-    'bx-date-picker': {
-      dateFormat,
-      disabled,
-      enabledRange,
-      name,
-      open,
-      value,
-      onChanged,
-      onFlatpickrError,
-    },
-    'bx-date-picker-input': {
-      colorScheme,
-      hideLabel,
-      invalid,
-      labelText,
-      placeholder,
-      size,
-      validityMessage,
-      onInput,
-    },
-  });
+const rangeWithCalendarTemplate = () => {
+  return rangeWithCalendar();
 };
 
 /**
@@ -148,16 +64,16 @@ const getValues = (formData: FormData) => {
   return values;
 };
 
-describe('bx-date-picker', function () {
+describe('cds-date-picker', function () {
   const events = new EventManager();
 
   describe('Simple mode', function () {
-    let datePicker: BXDatePicker | null;
+    let datePicker: CDSDatePicker | null;
 
     beforeEach(async function () {
       render(defaultTemplate(), document.body);
       await Promise.resolve();
-      datePicker = document.body.querySelector('bx-date-picker');
+      datePicker = document.body.querySelector('cds-date-picker');
     });
 
     it('Should not instantiate Flatpickr', async function () {
@@ -167,14 +83,14 @@ describe('bx-date-picker', function () {
   });
 
   describe('Single mode', function () {
-    let datePicker: BXDatePicker | null;
-    let datePickerInput: BXDatePickerInput | null;
+    let datePicker: CDSDatePicker | null;
+    let datePickerInput: CDSDatePickerInput | null;
 
     beforeEach(async function () {
       render(singleWithCalendarTemplate(), document.body);
       await Promise.resolve();
-      datePicker = document.body.querySelector('bx-date-picker');
-      datePickerInput = document.body.querySelector('bx-date-picker-input');
+      datePicker = document.body.querySelector('cds-date-picker');
+      datePickerInput = document.body.querySelector('cds-date-picker-input');
     });
 
     it('Should instantiate Flatpickr', async function () {
@@ -224,19 +140,19 @@ describe('bx-date-picker', function () {
   });
 
   describe('Range mode', function () {
-    let datePicker: BXDatePicker | null;
-    let datePickerInputStart: BXDatePickerInput | null;
-    let datePickerInputEnd: BXDatePickerInput | null;
+    let datePicker: CDSDatePicker | null;
+    let datePickerInputStart: CDSDatePickerInput | null;
+    let datePickerInputEnd: CDSDatePickerInput | null;
 
     beforeEach(async function () {
       render(rangeWithCalendarTemplate(), document.body);
       await Promise.resolve();
-      datePicker = document.body.querySelector('bx-date-picker');
+      datePicker = document.body.querySelector('cds-date-picker');
       datePickerInputStart = document.body.querySelector(
-        'bx-date-picker-input[kind="from"]'
+        'cds-date-picker-input[kind="from"]'
       );
       datePickerInputEnd = document.body.querySelector(
-        'bx-date-picker-input[kind="to"]'
+        'cds-date-picker-input[kind="to"]'
       );
     });
 
@@ -314,61 +230,54 @@ describe('bx-date-picker', function () {
     beforeEach(async function () {
       render(defaultTemplate(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-date-picker-input')!;
+      elem = document.body.querySelector('cds-date-picker-input')!;
     });
 
     it('should support checking if required value exists', async function () {
-      const input = elem as BXDatePickerInput;
+      const input = elem as CDSDatePickerInput;
       input.required = true;
       const spyInvalid = jasmine.createSpy('invalid');
       events.on(input, 'invalid', spyInvalid);
-      expect(input.checkValidity()).toBe(false);
+      expect(input.invalid).toBe(false);
       expect(spyInvalid).toHaveBeenCalled();
       expect(input.invalid).toBe(true);
-      expect(input.validityMessage).toBe('Please fill out this field.');
+      expect(input.invalidText).toBe('Please fill out this field.');
       input.value = 'value-foo';
-      expect(input.checkValidity()).toBe(true);
+      expect(input.invalid).toBe(true);
       expect(input.invalid).toBe(false);
-      expect(input.validityMessage).toBe('');
+      expect(input.invalidText).toBe('');
     });
 
     it('should support canceling required check', async function () {
-      const input = elem as BXDatePickerInput;
+      const input = elem as CDSDatePickerInput;
       input.required = true;
       events.on(input, 'invalid', (event) => {
         event.preventDefault();
       });
-      expect(input.checkValidity()).toBe(false);
       expect(input.invalid).toBe(false);
-      expect(input.validityMessage).toBe('');
+      expect(input.invalid).toBe(false);
+      expect(input.invalidText).toBe('');
     });
 
     it('should treat empty custom validity message as not invalid', async function () {
-      const input = elem as BXDatePickerInput;
-      input.setCustomValidity('');
+      const input = elem as CDSDatePickerInput;
+      input.invalidText = '';
       expect(input.invalid).toBe(false);
-      expect(input.validityMessage).toBe('');
+      expect(input.invalidText).toBe('');
     });
 
     it('should treat non-empty custom validity message as invalid', async function () {
-      const input = elem as BXDatePickerInput;
-      input.setCustomValidity('validity-message-foo');
+      const input = elem as CDSDatePickerInput;
+      input.invalidText = 'validity-message-foo';
       expect(input.invalid).toBe(true);
-      expect(input.validityMessage).toBe('validity-message-foo');
+      expect(input.invalidText).toBe('validity-message-foo');
     });
   });
 
   describe('Event-based form participation', function () {
     it('Should respond to `formdata` event', async function () {
       render(
-        html`
-          <form>
-            ${singleWithCalendarTemplate({
-              name: 'name-foo',
-              value: '2000-01-01',
-            })}
-          </form>
-        `,
+        html` <form>${singleWithCalendarTemplate()}</form> `,
         document.body
       );
       await Promise.resolve();
@@ -386,15 +295,7 @@ describe('bx-date-picker', function () {
 
     it('Should not respond to `formdata` event if disabled', async function () {
       render(
-        html`
-          <form>
-            ${singleWithCalendarTemplate({
-              disabled: true,
-              name: 'name-foo',
-              value: '2000-01-01',
-            })}
-          </form>
-        `,
+        html` <form>${singleWithCalendarTemplate()}</form> `,
         document.body
       );
       await Promise.resolve();
@@ -412,14 +313,7 @@ describe('bx-date-picker', function () {
 
     it('Should respond to `formdata` event in range mode', async function () {
       render(
-        html`
-          <form>
-            ${rangeWithCalendarTemplate({
-              name: 'name-foo',
-              value: '2000-01-01/2000-01-31',
-            })}
-          </form>
-        `,
+        html` <form>${rangeWithCalendarTemplate()}</form> `,
         document.body
       );
       await Promise.resolve();
diff --git a/packages/carbon-web-components/tests/spec/dropdown_spec.ts b/packages/carbon-web-components/tests/spec/dropdown_spec.ts
index ea3bdba1056..a275003f32b 100644
--- a/packages/carbon-web-components/tests/spec/dropdown_spec.ts
+++ b/packages/carbon-web-components/tests/spec/dropdown_spec.ts
@@ -1,37 +1,37 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
 import { delay } from 'bluebird';
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
 
-import BXDropdown from '../../src/components/dropdown/dropdown';
-import BXDropdownItem from '../../src/components/dropdown/dropdown-item';
-import { Default } from '../../src/components/dropdown/dropdown-story';
+import CDSDropdown from '../../src/components/dropdown/dropdown';
+import CDSDropdownItem from '../../src/components/dropdown/dropdown-item';
+import { Playground } from '../../src/components/dropdown/dropdown-story';
 
 const template = (props?) =>
-  Default({
-    'bx-dropdown': props,
+  Playground({
+    'cds-dropdown': props,
   });
 
-describe('bx-dropdown', function () {
+describe('cds-dropdown', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-dropdown' as any)).toMatchSnapshot(
-        {
-          mode: 'shadow',
-        }
-      );
+      expect(
+        document.body.querySelector('cds-dropdown' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
     });
 
     it('should render with various attributes', async function () {
@@ -48,11 +48,11 @@ describe('bx-dropdown', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-dropdown' as any)).toMatchSnapshot(
-        {
-          mode: 'shadow',
-        }
-      );
+      expect(
+        document.body.querySelector('cds-dropdown' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
     });
   });
 
@@ -63,64 +63,64 @@ describe('bx-dropdown', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-dropdown')!;
-      itemNode = elem.querySelector('bx-dropdown-item')!;
+      elem = document.body.querySelector('cds-dropdown')!;
+      itemNode = elem.querySelector('cds-dropdown-item')!;
     });
 
     it('should add "open" stateful modifier class', async function () {
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
 
     it('should remove "open" stateful modifier class (closed default state)', async function () {
-      (elem as BXDropdown).open = true;
+      (elem as CDSDropdown).open = true;
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should always close dropdown when clicking document', async function () {
-      (elem as BXDropdown).open = true;
+      (elem as CDSDropdown).open = true;
       await Promise.resolve();
       elem.dispatchEvent(new CustomEvent('focusout'));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should close dropdown when clicking on an item', async function () {
-      (elem as BXDropdown).open = true;
+      (elem as CDSDropdown).open = true;
       await Promise.resolve();
       (itemNode as HTMLElement).click();
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should provide a way to cancel opening', async function () {
-      events.on(elem, 'bx-dropdown-beingtoggled', (event: CustomEvent) => {
+      events.on(elem, 'cds-dropdown-beingtoggled', (event: CustomEvent) => {
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should provide a way to cancel closing', async function () {
-      (elem as BXDropdown).open = true;
+      (elem as CDSDropdown).open = true;
       await Promise.resolve();
-      events.on(elem, 'bx-dropdown-beingtoggled', (event: CustomEvent) => {
+      events.on(elem, 'cds-dropdown-beingtoggled', (event: CustomEvent) => {
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
   });
 
@@ -131,14 +131,14 @@ describe('bx-dropdown', function () {
     beforeEach(async function () {
       render(template({ open: true, value: 'all' }), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-dropdown')!;
-      itemNodes = elem.querySelectorAll('bx-dropdown-item');
+      elem = document.body.querySelector('cds-dropdown')!;
+      itemNodes = elem.querySelectorAll('cds-dropdown-item');
     });
 
     it('should add/remove "selected" modifier class', async function () {
       (
         document.body.querySelector(
-          'bx-dropdown-item[value="staging"]'
+          'cds-dropdown-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -152,29 +152,29 @@ describe('bx-dropdown', function () {
     it('should update text', async function () {
       (
         document.body.querySelector(
-          'bx-dropdown-item[value="staging"]'
+          'cds-dropdown-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       expect(
-        elem.shadowRoot!.querySelector('.bx--list-box__label')!.textContent
+        elem.shadowRoot!.querySelector('.cds--list-box__label')!.textContent
       ).toBe('Option 3');
     });
 
     it('should update value', async function () {
       (
         document.body.querySelector(
-          'bx-dropdown-item[value="staging"]'
+          'cds-dropdown-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
-      expect((elem as BXDropdown).value).toBe('staging');
+      expect((elem as CDSDropdown).value).toBe('staging');
     });
 
     it('should provide a way to switch item with a value', async function () {
-      (elem as BXDropdown).value = 'staging';
-      await Promise.resolve(); // Update cycle for `<bx-dropdown>`
-      await Promise.resolve(); // Update cycle for `<bx-dropdown-item>`
+      (elem as CDSDropdown).value = 'staging';
+      await Promise.resolve(); // Update cycle for `<cds-dropdown>`
+      await Promise.resolve(); // Update cycle for `<cds-dropdown-item>`
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(true);
@@ -183,15 +183,15 @@ describe('bx-dropdown', function () {
     });
 
     it('should provide a way to cancel switching item', async function () {
-      events.on(elem, 'bx-dropdown-beingselected', (event: CustomEvent) => {
+      events.on(elem, 'cds-dropdown-beingselected', (event: CustomEvent) => {
         expect(event.detail.item).toBe(
-          document.body.querySelector('bx-dropdown-item[value="staging"]')
+          document.body.querySelector('cds-dropdown-item[value="staging"]')
         );
         event.preventDefault();
       });
       (
         document.body.querySelector(
-          'bx-dropdown-item[value="staging"]'
+          'cds-dropdown-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -201,20 +201,20 @@ describe('bx-dropdown', function () {
       expect(itemNodes[3].hasAttribute('selected')).toBe(false);
       expect(itemNodes[4].hasAttribute('selected')).toBe(false);
       expect(
-        elem.shadowRoot!.querySelector('.bx--list-box__label')!.textContent
+        elem.shadowRoot!.querySelector('.cds--list-box__label')!.textContent
       ).toBe('Option 1');
     });
 
     it('should reflect the added child to the selection', async function () {
-      const itemNode = document.createElement('bx-dropdown-item');
+      const itemNode = document.createElement('cds-dropdown-item');
       itemNode.textContent = 'text-added';
-      (itemNode as unknown as BXDropdownItem).value = 'value-added';
+      (itemNode as unknown as CDSDropdownItem).value = 'value-added';
       elem.appendChild(itemNode);
-      (elem as BXDropdown).value = 'value-added';
+      (elem as CDSDropdown).value = 'value-added';
       await delay(0); // Workaround for IE MutationObserver scheduling bug for moving elements to slot
       try {
         expect(
-          elem.shadowRoot!.querySelector('.bx--list-box__label')!.textContent
+          elem.shadowRoot!.querySelector('.cds--list-box__label')!.textContent
         ).toBe('text-added');
       } finally {
         itemNode.parentNode!.removeChild(itemNode);
@@ -228,11 +228,11 @@ describe('bx-dropdown', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-dropdown')!;
+      elem = document.body.querySelector('cds-dropdown')!;
     });
 
     it('should support checking if required value exists', async function () {
-      const dropdown = elem as BXDropdown;
+      const dropdown = elem as CDSDropdown;
       dropdown.required = true;
       const spyInvalid = jasmine.createSpy('invalid');
       events.on(dropdown, 'invalid', spyInvalid);
@@ -247,7 +247,7 @@ describe('bx-dropdown', function () {
     });
 
     it('should support canceling required check', async function () {
-      const dropdown = elem as BXDropdown;
+      const dropdown = elem as CDSDropdown;
       dropdown.required = true;
       events.on(dropdown, 'invalid', (event) => {
         event.preventDefault();
@@ -258,14 +258,14 @@ describe('bx-dropdown', function () {
     });
 
     it('should treat empty custom validity message as not invalid', async function () {
-      const dropdown = elem as BXDropdown;
+      const dropdown = elem as CDSDropdown;
       dropdown.setCustomValidity('');
       expect(dropdown.invalid).toBe(false);
       expect(dropdown.validityMessage).toBe('');
     });
 
     it('should treat non-empty custom validity message as invalid', async function () {
-      const dropdown = elem as BXDropdown;
+      const dropdown = elem as CDSDropdown;
       dropdown.setCustomValidity('validity-message-foo');
       expect(dropdown.invalid).toBe(true);
       expect(dropdown.validityMessage).toBe('validity-message-foo');
diff --git a/packages/carbon-web-components/tests/spec/file-uploader_spec.ts b/packages/carbon-web-components/tests/spec/file-uploader_spec.ts
index 5388a63031c..5f1dab85964 100644
--- a/packages/carbon-web-components/tests/spec/file-uploader_spec.ts
+++ b/packages/carbon-web-components/tests/spec/file-uploader_spec.ts
@@ -1,36 +1,35 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import ifNonNull from '../../src/globals/directives/if-non-null';
-import '../../src/components/file-uploader/file-uploader';
-import '../../src/components/file-uploader/drop-container';
+import { html, render } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import '../../src/components/file-uploader/index';
 import { FILE_UPLOADER_ITEM_STATE } from '../../src/components/file-uploader/file-uploader-item';
 import EventManager from '../utils/event-manager';
 
 const fileUploaderShellTemplate = (props?) => {
   const { helperText, labelText } = props ?? {};
   return html`
-    <bx-file-uploader
-      helper-text="${ifNonNull(helperText)}"
-      label-text="${ifNonNull(labelText)}"></bx-file-uploader>
+    <cds-file-uploader
+      helper-text="${ifDefined(helperText)}"
+      label-text="${ifDefined(labelText)}"></cds-file-uploader>
   `;
 };
 
 const dropContainerTemplate = (props?) => {
   const { accept, disabled, multiple } = props ?? {};
   return html`
-    <bx-file-drop-container
-      accept="${ifNonNull(accept)}"
+    <cds-file-uploader-drop-container
+      accept="${ifDefined(accept)}"
       ?disabled="${disabled}"
       ?multiple="${multiple}">
-    </bx-file-drop-container>
+    </cds-file-uploader-drop-container>
   `;
 };
 
@@ -44,27 +43,27 @@ const fileUploderItemTemplate = (props?) => {
     validityMessage,
   } = props ?? {};
   return html`
-    <bx-file-uploader-item
-      delete-assistive-text="${ifNonNull(deleteAssistiveText)}"
+    <cds-file-uploader-item
+      delete-assistive-text="${ifDefined(deleteAssistiveText)}"
       ?invalid="${invalid}"
-      state="${ifNonNull(state)}"
-      uploading-assistive-text="${ifNonNull(uploadingAssistiveText)}"
-      uploaded-assistive-text="${ifNonNull(uploadedAssistiveText)}"
-      validity-message="${ifNonNull(validityMessage)}">
-    </bx-file-uploader-item>
+      state="${ifDefined(state)}"
+      uploading-assistive-text="${ifDefined(uploadingAssistiveText)}"
+      uploaded-assistive-text="${ifDefined(uploadedAssistiveText)}"
+      validity-message="${ifDefined(validityMessage)}">
+    </cds-file-uploader-item>
   `;
 };
 
 describe('file-uploader', function () {
   const events = new EventManager();
 
-  describe('bx-file-uploader', function () {
+  describe('cds-file-uploader', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(fileUploaderShellTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader' as any)
+          document.body.querySelector('cds-file-uploader' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -78,19 +77,19 @@ describe('file-uploader', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader' as any)
+          document.body.querySelector('cds-file-uploader' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
   });
 
-  describe('bx-file-drop-container', function () {
+  describe('cds-file-drop-container', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(dropContainerTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-drop-container' as any)
+          document.body.querySelector('cds-file-drop-container' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -105,7 +104,7 @@ describe('file-uploader', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-drop-container' as any)
+          document.body.querySelector('cds-file-drop-container' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -122,7 +121,7 @@ describe('file-uploader', function () {
       beforeEach(async function () {
         render(dropContainerTemplate({ accept: 'image/png' }), document.body);
         await Promise.resolve();
-        elem = document.querySelector('bx-file-drop-container');
+        elem = document.querySelector('cds-file-drop-container');
       });
 
       it('Should handle drag-over', async function () {
@@ -149,7 +148,7 @@ describe('file-uploader', function () {
 
       it('Should handle drop', async function () {
         const spyChange = jasmine.createSpy('after changed');
-        events.on(elem!, 'bx-file-drop-container-changed', spyChange);
+        events.on(elem!, 'cds-file-drop-container-changed', spyChange);
         const dataTransfer = { files: [pngFile, jpegFile] };
         const event = Object.assign(
           new CustomEvent('drop', { bubbles: true, composed: true }),
@@ -176,7 +175,7 @@ describe('file-uploader', function () {
           });
         });
         const spyChange = jasmine.createSpy('after changed');
-        events.on(elem!, 'bx-file-drop-container-changed', spyChange);
+        events.on(elem!, 'cds-file-drop-container-changed', spyChange);
         const input = elem!.shadowRoot!.querySelector('input');
         const event = new CustomEvent('change', {
           bubbles: true,
@@ -192,13 +191,13 @@ describe('file-uploader', function () {
       it('Should handle filtering by file extension', async function () {
         render(dropContainerTemplate({ accept: '.png' }), document.body);
         await Promise.resolve();
-        elem = document.querySelector('bx-file-drop-container');
+        elem = document.querySelector('cds-file-drop-container');
         const pngFileWithoutMIMEType = new File(
           [new ArrayBuffer(0)],
           'foo.png'
         );
         const spyChange = jasmine.createSpy('after changed');
-        events.on(elem!, 'bx-file-drop-container-changed', spyChange);
+        events.on(elem!, 'cds-file-drop-container-changed', spyChange);
         const dataTransfer = { files: [pngFileWithoutMIMEType, jpegFile] };
         const event = Object.assign(
           new CustomEvent('drop', { bubbles: true, composed: true }),
@@ -213,13 +212,13 @@ describe('file-uploader', function () {
     });
   });
 
-  describe('bx-file-uploader-item', function () {
+  describe('cds-file-uploader-item', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(fileUploderItemTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader-item' as any)
+          document.body.querySelector('cds-file-uploader-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -234,18 +233,18 @@ describe('file-uploader', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader-item' as any)
+          document.body.querySelector('cds-file-uploader-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
       it('should render uploaded state', async function () {
         render(
-          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.UPLOADED }),
+          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.COMPLETE }),
           document.body
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader-item' as any)
+          document.body.querySelector('cds-file-uploader-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -253,7 +252,7 @@ describe('file-uploader', function () {
         render(
           fileUploderItemTemplate({
             invalid: true,
-            state: FILE_UPLOADER_ITEM_STATE.UPLOADED,
+            state: FILE_UPLOADER_ITEM_STATE.COMPLETE,
             uploadedAssistiveText: 'uploaded-assistive-text-foo',
             validityMessage: 'validity-message-foo',
           }),
@@ -262,7 +261,7 @@ describe('file-uploader', function () {
         await Promise.resolve();
         expect(
           document.body
-            .querySelector('bx-file-uploader-item')!
+            .querySelector('cds-file-uploader-item')!
             .shadowRoot!.querySelector('svg')!
             .getAttribute('aria-label')
         ).toBe('uploaded-assistive-text-foo');
@@ -270,12 +269,12 @@ describe('file-uploader', function () {
 
       it('should render editing state', async function () {
         render(
-          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.EDITING }),
+          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.EDIT }),
           document.body
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader-item' as any)
+          document.body.querySelector('cds-file-uploader-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -284,30 +283,34 @@ describe('file-uploader', function () {
           fileUploderItemTemplate({
             deleteAssistiveText: 'delete-assistive-text-foo',
             invalid: true,
-            state: FILE_UPLOADER_ITEM_STATE.EDITING,
+            state: FILE_UPLOADER_ITEM_STATE.EDIT,
             validityMessage: 'validity-message-foo',
           }),
           document.body
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-file-uploader-item' as any)
+          document.body.querySelector('cds-file-uploader-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
 
     describe('Handling delete button', function () {
-      it('Should fire bx-file-uploader-item-beingdeleted/bx-file-uploader-item-deleted events upon hiding', async function () {
+      it('Should fire cds-file-uploader-item-beingdeleted/cds-file-uploader-item-deleted events upon hiding', async function () {
         render(
-          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.EDITING }),
+          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.EDIT }),
           document.body
         );
         await Promise.resolve();
-        const elem = document.querySelector('bx-file-uploader-item');
+        const elem = document.querySelector('cds-file-uploader-item');
         const spyBeforeDelete = jasmine.createSpy('before deleted');
         const spyDelete = jasmine.createSpy('after deleted');
-        events.on(elem!, 'bx-file-uploader-item-beingdeleted', spyBeforeDelete);
-        events.on(elem!, 'bx-file-uploader-item-deleted', spyDelete);
+        events.on(
+          elem!,
+          'cds-file-uploader-item-beingdeleted',
+          spyBeforeDelete
+        );
+        events.on(elem!, 'cds-file-uploader-item-deleted', spyDelete);
         (elem!.shadowRoot!.querySelector('button') as HTMLElement).click();
         await Promise.resolve();
         expect(spyBeforeDelete).toHaveBeenCalled();
@@ -316,16 +319,16 @@ describe('file-uploader', function () {
 
       it('Should support preventing modal from being deleted upon user gesture', async function () {
         render(
-          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.EDITING }),
+          fileUploderItemTemplate({ state: FILE_UPLOADER_ITEM_STATE.EDIT }),
           document.body
         );
         await Promise.resolve();
-        const elem = document.querySelector('bx-file-uploader-item');
+        const elem = document.querySelector('cds-file-uploader-item');
         const spyDelete = jasmine.createSpy('after deleted');
-        events.on(elem!, 'bx-file-uploader-item-beingdeleted', (event) => {
+        events.on(elem!, 'cds-file-uploader-item-beingdeleted', (event) => {
           event.preventDefault();
         });
-        events.on(elem!, 'bx-file-uploader-item-deleted', spyDelete);
+        events.on(elem!, 'cds-file-uploader-item-deleted', spyDelete);
         (elem!.shadowRoot!.querySelector('button') as HTMLElement).click();
         await Promise.resolve();
         expect(spyDelete).not.toHaveBeenCalled();
diff --git a/packages/carbon-web-components/tests/spec/inline-loading_spec.ts b/packages/carbon-web-components/tests/spec/inline-loading_spec.ts
index dd1b8a11180..5da912e7d42 100644
--- a/packages/carbon-web-components/tests/spec/inline-loading_spec.ts
+++ b/packages/carbon-web-components/tests/spec/inline-loading_spec.ts
@@ -1,31 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit';
 
-import BXInlineLoading, {
+import CDSInlineLoading, {
   INLINE_LOADING_STATE,
 } from '../../src/components/inline-loading/inline-loading';
-import { Default } from '../../src/components/inline-loading/inline-loading-story';
+import { Playground } from '../../src/components/inline-loading/inline-loading-story';
 
 const template = (props?) =>
-  Default({
-    'bx-inline-loading': props,
+  Playground({
+    'cds-inline-loading': props,
   });
 
-describe('bx-inline-loading', function () {
+describe('cds-inline-loading', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-loading' as any)
+        document.body.querySelector('cds-inline-loading' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -35,12 +35,12 @@ describe('bx-inline-loading', function () {
       render(template(), document.body);
       (
         document.body.querySelector(
-          'bx-inline-loading'
-        ) as unknown as BXInlineLoading
+          'cds-inline-loading'
+        ) as unknown as CDSInlineLoading
       ).status = undefined!;
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-loading' as any)
+        document.body.querySelector('cds-inline-loading' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -55,7 +55,7 @@ describe('bx-inline-loading', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-loading' as any)
+        document.body.querySelector('cds-inline-loading' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -70,7 +70,7 @@ describe('bx-inline-loading', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-loading' as any)
+        document.body.querySelector('cds-inline-loading' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -85,7 +85,7 @@ describe('bx-inline-loading', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-loading' as any)
+        document.body.querySelector('cds-inline-loading' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
diff --git a/packages/carbon-web-components/tests/spec/input_spec.ts b/packages/carbon-web-components/tests/spec/input_spec.ts
deleted file mode 100644
index 1aa7d487cc7..00000000000
--- a/packages/carbon-web-components/tests/spec/input_spec.ts
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2022
- *
- * 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 { html, render } from 'lit-html';
-import EventManager from '../utils/event-manager';
-
-import BXInput, {
-  INPUT_COLOR_SCHEME,
-  INPUT_TYPE,
-} from '../../src/components/input/input';
-import { Default } from '../../src/components/input/input-story';
-
-/**
- * @param formData A `FormData` instance.
- * @returns The given `formData` converted to a classic key-value pair.
- */
-const getValues = (formData: FormData) => {
-  const values = {};
-  // eslint-disable-next-line no-restricted-syntax
-  for (const [key, value] of formData.entries()) {
-    values[key] = value;
-  }
-  return values;
-};
-
-const template = (props?) =>
-  Default({
-    'bx-input': props,
-  });
-
-describe('bx-input', function () {
-  const events = new EventManager();
-
-  describe('Rendering', function () {
-    it('Should render with various attributes', async function () {
-      render(
-        template({
-          autocomplete: 'on',
-          autofocus: true,
-          colorScheme: INPUT_COLOR_SCHEME.LIGHT,
-          disabled: true,
-          helperText: 'helper-text-foo',
-          hidePasswordLabel: 'Hide password',
-          labelText: 'label-text-foo',
-          name: 'name-foo',
-          pattern: 'pattern-foo',
-          placeholder: 'placeholder-foo',
-          readonly: true,
-          required: true,
-          showPasswordLabel: 'Show password',
-          showPasswordVisibilityToggle: false,
-          size: 'xl',
-          type: INPUT_TYPE.TEXT,
-          validityMessage: 'validity-message-foo',
-          value: 'value-foo',
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(document.body.querySelector('bx-input' as any)).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-  });
-
-  describe('Event-based form participation', function () {
-    it('Should respond to `formdata` event', async function () {
-      render(
-        html`
-          <form>
-            ${template({
-              name: 'name-foo',
-              value: 'value-foo',
-            })}
-          </form>
-        `,
-        document.body
-      );
-      await Promise.resolve();
-      const formData = new FormData();
-      const event = new CustomEvent('formdata', {
-        bubbles: true,
-        cancelable: false,
-        composed: false,
-      });
-      (event as any).formData = formData; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
-      const form = document.querySelector('form');
-      form!.dispatchEvent(event);
-      expect(getValues(formData)).toEqual({ 'name-foo': 'value-foo' });
-    });
-
-    it('Should not respond to `formdata` event if disabled', async function () {
-      render(
-        html`
-          <form>
-            ${template({
-              disabled: true,
-              name: 'name-foo',
-              value: 'value-foo',
-            })}
-          </form>
-        `,
-        document.body
-      );
-      await Promise.resolve();
-      const formData = new FormData();
-      const event = new CustomEvent('formdata', {
-        bubbles: true,
-        cancelable: false,
-        composed: false,
-      });
-      (event as any).formData = formData; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
-      const form = document.querySelector('form');
-      form!.dispatchEvent(event);
-      expect(getValues(formData)).toEqual({});
-    });
-  });
-
-  describe('Form validation', function () {
-    let elem: Element;
-
-    beforeEach(async function () {
-      render(template(), document.body);
-      await Promise.resolve();
-      elem = document.body.querySelector('bx-input')!;
-    });
-
-    it('should support checking if required value exists', async function () {
-      const input = elem as BXInput;
-      input.required = true;
-      const spyInvalid = jasmine.createSpy('invalid');
-      events.on(input, 'invalid', spyInvalid);
-      expect(input.checkValidity()).toBe(false);
-      expect(spyInvalid).toHaveBeenCalled();
-      expect(input.invalid).toBe(true);
-      expect(input.validityMessage).toBe('Please fill out this field.');
-      input.value = 'value-foo';
-      expect(input.checkValidity()).toBe(true);
-      expect(input.invalid).toBe(false);
-      expect(input.validityMessage).toBe('');
-    });
-
-    it('should support canceling required check', async function () {
-      const input = elem as BXInput;
-      input.required = true;
-      events.on(input, 'invalid', (event) => {
-        event.preventDefault();
-      });
-      expect(input.checkValidity()).toBe(false);
-      expect(input.invalid).toBe(false);
-      expect(input.validityMessage).toBe('');
-    });
-
-    it('should treat empty custom validity message as not invalid', async function () {
-      const input = elem as BXInput;
-      input.setCustomValidity('');
-      expect(input.invalid).toBe(false);
-      expect(input.validityMessage).toBe('');
-    });
-
-    it('should treat non-empty custom validity message as invalid', async function () {
-      const input = elem as BXInput;
-      input.setCustomValidity('validity-message-foo');
-      expect(input.invalid).toBe(true);
-      expect(input.validityMessage).toBe('validity-message-foo');
-    });
-  });
-
-  afterEach(async function () {
-    events.reset();
-    await render(undefined!, document.body);
-  });
-});
diff --git a/packages/carbon-web-components/tests/spec/link_spec.ts b/packages/carbon-web-components/tests/spec/link_spec.ts
index e7d8e862bc4..91213c13321 100644
--- a/packages/carbon-web-components/tests/spec/link_spec.ts
+++ b/packages/carbon-web-components/tests/spec/link_spec.ts
@@ -1,27 +1,27 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit';
 import '../../src/components/link/link';
-import { Default } from '../../src/components/link/link-story';
+import { pairedWithIcon } from '../../src/components/link/link-story';
 
 const template = (props?) =>
-  Default({
-    'bx-link': props,
+  pairedWithIcon({
+    'cds-link': props,
   });
 
-describe('bx-link', function () {
+describe('cds-link', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template({ href: 'about:blank' }), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-link' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-link' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -41,7 +41,7 @@ describe('bx-link', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-link' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-link' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -62,7 +62,7 @@ describe('bx-link', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-link' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-link' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/carbon-web-components/tests/spec/loading_spec.ts b/packages/carbon-web-components/tests/spec/loading_spec.ts
index 862aa151f72..1cc75158763 100644
--- a/packages/carbon-web-components/tests/spec/loading_spec.ts
+++ b/packages/carbon-web-components/tests/spec/loading_spec.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,18 +9,18 @@
 
 import { LOADING_TYPE } from '../../src/components/loading/loading';
 
-describe('bx-loading', function () {
+describe('cds-loading', function () {
   describe('Changing spinner type', function () {
     let elem: HTMLElement | null;
 
     beforeEach(function () {
-      elem = document.body.appendChild(document.createElement('bx-loading'));
+      elem = document.body.appendChild(document.createElement('cds-loading'));
     });
 
     it('should choose the right template for default type', function () {
       expect(
         elem!.shadowRoot!.querySelectorAll(
-          '.bx--loading--small,.bx--loading-overlay'
+          '.cds--loading--small,.cds--loading-overlay'
         ).length
       ).toBe(0);
     });
@@ -30,7 +30,7 @@ describe('bx-loading', function () {
       await Promise.resolve();
       expect(
         elem!.shadowRoot!.querySelectorAll(
-          '.bx--loading--small,.bx--loading-overlay'
+          '.cds--loading--small,.cds--loading-overlay'
         ).length
       ).toBe(0);
     });
@@ -38,13 +38,17 @@ describe('bx-loading', function () {
     it('should choose the right template for small type', async function () {
       elem!.setAttribute('type', LOADING_TYPE.SMALL);
       await Promise.resolve();
-      expect(elem!.shadowRoot!.querySelectorAll('.bx--loading').length).toBe(0);
+      expect(elem!.shadowRoot!.querySelectorAll('.cds--loading').length).toBe(
+        0
+      );
     });
 
     it('should choose the right template for overlay type', async function () {
-      elem!.setAttribute('type', LOADING_TYPE.OVERLAY);
+      elem!.setAttribute('type', LOADING_TYPE.REGULAR);
       await Promise.resolve();
-      expect(elem!.shadowRoot!.querySelectorAll('.bx--loading').length).toBe(1);
+      expect(elem!.shadowRoot!.querySelectorAll('.cds--loading').length).toBe(
+        1
+      );
     });
 
     afterEach(function () {
@@ -59,15 +63,15 @@ describe('bx-loading', function () {
     let elem: HTMLElement | null;
 
     beforeAll(function () {
-      elem = document.body.appendChild(document.createElement('bx-loading'));
-      elem.setAttribute('type', LOADING_TYPE.OVERLAY);
+      elem = document.body.appendChild(document.createElement('cds-loading'));
+      elem.setAttribute('type', LOADING_TYPE.REGULAR);
     });
 
     it('should deactivate when inactive attribute is set', async function () {
       elem!.setAttribute('inactive', '');
       await Promise.resolve();
       expect(
-        elem!.shadowRoot!.querySelectorAll('.bx--loading--stop').length
+        elem!.shadowRoot!.querySelectorAll('.cds--loading--stop').length
       ).toBe(1);
     });
 
@@ -75,7 +79,7 @@ describe('bx-loading', function () {
       elem!.removeAttribute('inactive');
       await Promise.resolve();
       expect(
-        elem!.shadowRoot!.querySelectorAll('.bx--loading--stop').length
+        elem!.shadowRoot!.querySelectorAll('.cds--loading--stop').length
       ).toBe(0);
     });
 
diff --git a/packages/carbon-web-components/tests/spec/modal_spec.ts b/packages/carbon-web-components/tests/spec/modal_spec.ts
index b56140611df..f253e30afa6 100644
--- a/packages/carbon-web-components/tests/spec/modal_spec.ts
+++ b/packages/carbon-web-components/tests/spec/modal_spec.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -9,92 +9,92 @@
 
 import EventManager from '../utils/event-manager';
 
-import BXModal from '../../src/components/modal/modal';
+import CDSModal from '../../src/components/modal/modal';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../../src/components/modal/modal';
 import '../../src/components/modal/modal-close-button';
 
-describe('bx-modal', function () {
+describe('cds-modal', function () {
   describe('Showing/hiding functions', function () {
     let elem: HTMLElement | null;
     const events = new EventManager();
 
     beforeEach(async function () {
-      elem = document.body.appendChild(document.createElement('bx-modal'));
+      elem = document.body.appendChild(document.createElement('cds-modal'));
       await Promise.resolve(); // Wait for initial render
     });
 
     it('Should have opening modal do nothing if already visible', async function () {
-      (elem as unknown as BXModal).open = true;
+      (elem as unknown as CDSModal).open = true;
       await Promise.resolve();
       elem!.innerHTML = '<input type="text">';
       const input = elem!.querySelector('input');
       spyOn(input!, 'focus');
-      (elem as unknown as BXModal).open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<bx-modal>`
-      await Promise.resolve(); // `update()` in `<bx-modal>` waits for child nodes' update cycles to run
+      (elem as unknown as CDSModal).open = true;
+      await Promise.resolve(); // For triggering the update cycle of `<cds-modal>`
+      await Promise.resolve(); // `update()` in `<cds-modal>` waits for child nodes' update cycles to run
       expect(input!.focus).not.toHaveBeenCalled();
     });
 
     it('Should focus on modal upon showning', async function () {
-      spyOn(BXModal as any, '_delay').and.callFake(() => {});
+      spyOn(CDSModal as any, '_delay').and.callFake(() => {});
       elem!.innerHTML = '<input type="text">';
       const input = elem!.querySelector('input');
       spyOn(input!, 'focus');
-      (elem as unknown as BXModal).open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<bx-modal>`
-      await Promise.resolve(); // `update()` in `<bx-modal>` waits for child nodes' update cycles to run
+      (elem as unknown as CDSModal).open = true;
+      await Promise.resolve(); // For triggering the update cycle of `<cds-modal>`
+      await Promise.resolve(); // `update()` in `<cds-modal>` waits for child nodes' update cycles to run
       expect(input!.focus).toHaveBeenCalled();
     });
 
     it('Should support specifying the primary focus element', async function () {
-      spyOn(BXModal as any, '_delay').and.callFake(() => {});
+      spyOn(CDSModal as any, '_delay').and.callFake(() => {});
       elem!.innerHTML =
         '<input type="text"><button data-modal-primary-focus></button>';
       const input = elem!.querySelector('input');
       const button = elem!.querySelector('button');
       spyOn(input!, 'focus');
       spyOn(button!, 'focus');
-      (elem as unknown as BXModal).open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<bx-modal>`
-      await Promise.resolve(); // `update()` in `<bx-modal>` waits for child nodes' update cycles to run
+      (elem as unknown as CDSModal).open = true;
+      await Promise.resolve(); // For triggering the update cycle of `<cds-modal>`
+      await Promise.resolve(); // `update()` in `<cds-modal>` waits for child nodes' update cycles to run
       expect(input!.focus).not.toHaveBeenCalled();
       expect(button!.focus).toHaveBeenCalled();
     });
 
     it('Should support using primary button in footer as the primary focus element', async function () {
-      spyOn(BXModal as any, '_delay').and.callFake(() => {});
+      spyOn(CDSModal as any, '_delay').and.callFake(() => {});
       elem!.innerHTML =
-        '<input type="text"><bx-modal-footer><bx-btn kind="primary"></bx-btn></bx-modal-footer>';
+        '<input type="text"><cds-modal-footer><cds-button kind="primary"></cds-button></cds-modal-footer>';
       const input = elem!.querySelector('input');
-      const button = elem!.querySelector('bx-btn');
+      const button = elem!.querySelector('cds-button');
       spyOn(input!, 'focus');
       spyOn(button as HTMLButtonElement, 'focus');
-      (elem as unknown as BXModal).open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<bx-modal>`
-      await Promise.resolve(); // `update()` in `<bx-modal>` waits for child nodes' update cycles to run
+      (elem as unknown as CDSModal).open = true;
+      await Promise.resolve(); // For triggering the update cycle of `<cds-modal>`
+      await Promise.resolve(); // `update()` in `<cds-modal>` waits for child nodes' update cycles to run
       expect(input!.focus).not.toHaveBeenCalled();
       expect((button as HTMLButtonElement).focus).toHaveBeenCalled();
     });
 
     it('Should have closing modal do nothing if already visible', async function () {
-      elem!.innerHTML = '<bx-modal-close-button></bx-modal-close-button>';
+      elem!.innerHTML = '<cds-modal-close-button></cds-modal-close-button>';
       const spyBeforeClosed = jasmine.createSpy('before closed');
-      events.on(elem!, 'bx-modal-beingclosed', spyBeforeClosed);
-      (elem!.querySelector('bx-modal-close-button') as HTMLElement).click();
+      events.on(elem!, 'cds-modal-beingclosed', spyBeforeClosed);
+      (elem!.querySelector('cds-modal-close-button') as HTMLElement).click();
       await Promise.resolve();
       expect(spyBeforeClosed).not.toHaveBeenCalled();
     });
 
-    it('Should fire bx-modal-beingclosed/bx-modal-closed events upon hiding', async function () {
-      elem!.innerHTML = '<bx-modal-close-button></bx-modal-close-button>';
-      (elem as BXModal).open = true;
+    it('Should fire cds-modal-beingclosed/cds-modal-closed events upon hiding', async function () {
+      elem!.innerHTML = '<cds-modal-close-button></cds-modal-close-button>';
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'bx-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'bx-modal-closed', spyAfterClosed);
-      (elem!.querySelector('bx-modal-close-button') as HTMLElement).click();
+      events.on(elem!, 'cds-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'cds-modal-closed', spyAfterClosed);
+      (elem!.querySelector('cds-modal-close-button') as HTMLElement).click();
       await Promise.resolve();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
@@ -105,25 +105,25 @@ describe('bx-modal', function () {
       const button = elem.appendChild(document.createElement('button'));
       button.focus();
       spyOn(button, 'focus');
-      const modal = elem.appendChild(document.createElement('bx-modal'));
+      const modal = elem.appendChild(document.createElement('cds-modal'));
       await Promise.resolve(); // Wait for initial render
-      (modal as BXModal).open = true;
+      (modal as CDSModal).open = true;
       await Promise.resolve();
-      (modal as BXModal).open = false;
+      (modal as CDSModal).open = false;
       await Promise.resolve();
       expect(button.focus).toHaveBeenCalled();
     });
 
     it('Should support preventing modal from being closed upon user gesture', async function () {
-      elem!.innerHTML = '<bx-modal-close-button></bx-modal-close-button>';
-      (elem as BXModal).open = true;
+      elem!.innerHTML = '<cds-modal-close-button></cds-modal-close-button>';
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'bx-modal-beingclosed', (event) => {
+      events.on(elem!, 'cds-modal-beingclosed', (event) => {
         event.preventDefault();
       });
-      events.on(elem!, 'bx-modal-closed', spyAfterClosed);
-      (elem!.querySelector('bx-modal-close-button') as HTMLElement).click();
+      events.on(elem!, 'cds-modal-closed', spyAfterClosed);
+      (elem!.querySelector('cds-modal-close-button') as HTMLElement).click();
       await Promise.resolve();
       expect(spyAfterClosed).not.toHaveBeenCalled();
     });
@@ -138,24 +138,24 @@ describe('bx-modal', function () {
     const events = new EventManager();
 
     beforeEach(async function () {
-      elem = document.body.appendChild(document.createElement('bx-modal'));
+      elem = document.body.appendChild(document.createElement('cds-modal'));
       await Promise.resolve(); // Wait for initial render
     });
 
     it('Should handle the ESC key to close the modal', async function () {
-      (elem as BXModal).open = true;
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'bx-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'bx-modal-closed', spyAfterClosed);
+      events.on(elem!, 'cds-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'cds-modal-closed', spyAfterClosed);
       elem!.ownerDocument!.body.dispatchEvent(
         Object.assign(new CustomEvent('keydown', { bubbles: true }), {
           key: 'Escape',
         })
       );
       await Promise.resolve();
-      expect((elem as BXModal).open).toBeFalsy();
+      expect((elem as CDSModal).open).toBeFalsy();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
       const eventDataBeforeClosed = spyBeforeClosed.calls.argsFor(0)[0].detail;
@@ -165,19 +165,19 @@ describe('bx-modal', function () {
     });
 
     it('Should handle the IE-specific ESC key to close the modal', async function () {
-      (elem as BXModal).open = true;
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'bx-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'bx-modal-closed', spyAfterClosed);
+      events.on(elem!, 'cds-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'cds-modal-closed', spyAfterClosed);
       elem!.ownerDocument!.body.dispatchEvent(
         Object.assign(new CustomEvent('keydown', { bubbles: true }), {
           key: 'Esc',
         })
       );
       await Promise.resolve();
-      expect((elem as BXModal).open).toBeFalsy();
+      expect((elem as CDSModal).open).toBeFalsy();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
       const eventDataBeforeClosed = spyBeforeClosed.calls.argsFor(0)[0].detail;
@@ -188,16 +188,16 @@ describe('bx-modal', function () {
 
     it('Should handle any elements with data-modal-close attribute to close the modal', async function () {
       elem!.innerHTML = '<button data-modal-close></button>';
-      (elem as BXModal).open = true;
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'bx-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'bx-modal-closed', spyAfterClosed);
+      events.on(elem!, 'cds-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'cds-modal-closed', spyAfterClosed);
       const closeButton = elem!.querySelector('button') as HTMLElement;
       closeButton.click();
       await Promise.resolve();
-      expect((elem as BXModal).open).toBeFalsy();
+      expect((elem as CDSModal).open).toBeFalsy();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
       const eventDataBeforeClosed = spyBeforeClosed.calls.argsFor(0)[0].detail;
@@ -207,15 +207,15 @@ describe('bx-modal', function () {
     });
 
     it('Should handle any click outside the modal element to close the modal', async function () {
-      (elem as BXModal).open = true;
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'bx-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'bx-modal-closed', spyAfterClosed);
+      events.on(elem!, 'cds-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'cds-modal-closed', spyAfterClosed);
       elem!.dispatchEvent(new CustomEvent('click', { bubbles: true }));
       await Promise.resolve();
-      expect((elem as BXModal).open).toBeFalsy();
+      expect((elem as CDSModal).open).toBeFalsy();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
       const eventDataBeforeHidden = spyBeforeClosed.calls.argsFor(0)[0].detail;
@@ -239,7 +239,7 @@ describe('bx-modal', function () {
     }
 
     beforeEach(async function () {
-      elem = document.body.appendChild(document.createElement('bx-modal'));
+      elem = document.body.appendChild(document.createElement('cds-modal'));
       elem!.innerHTML = '<input type="text"><input type="text">';
       buttonBefore = document.body.insertBefore(
         document.createElement('button'),
@@ -250,16 +250,16 @@ describe('bx-modal', function () {
     });
 
     it('Should support forward focus-wrap', async function () {
-      spyOn(BXModal as any, '_delay').and.callFake(() => {});
-      (elem as BXModal).open = true;
+      spyOn(CDSModal as any, '_delay').and.callFake(() => {});
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       buttonAfter!.focus();
       expect(document.activeElement).toBe(elem!.querySelectorAll('input')[0]);
     });
 
     it('Should support backward focus-wrap', async function () {
-      spyOn(BXModal as any, '_delay').and.callFake(() => {});
-      (elem as BXModal).open = true;
+      spyOn(CDSModal as any, '_delay').and.callFake(() => {});
+      (elem as CDSModal).open = true;
       await Promise.resolve();
       buttonBefore!.focus();
       expect(document.activeElement).toBe(elem!.querySelectorAll('input')[1]);
diff --git a/packages/carbon-web-components/tests/spec/multi-select_spec.ts b/packages/carbon-web-components/tests/spec/multi-select_spec.ts
index c1b2a1380a4..b1aacdb27a1 100644
--- a/packages/carbon-web-components/tests/spec/multi-select_spec.ts
+++ b/packages/carbon-web-components/tests/spec/multi-select_spec.ts
@@ -1,26 +1,26 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { delay } from 'bluebird';
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
 
-import BXMultiSelect from '../../src/components/multi-select/multi-select';
-import BXMultiSelectItem from '../../src/components/multi-select/multi-select-item';
-import { Default } from '../../src/components/multi-select/multi-select-story';
+import CDSMultiSelect from '../../src/components/multi-select/multi-select';
+import CDSMultiSelectItem from '../../src/components/multi-select/multi-select-item';
+import { Playground } from '../../src/components/multi-select/multi-select-story';
 
 const template = (props?) =>
-  Default({
-    'bx-multi-select': props,
+  Playground({
+    'cds-multi-select': props,
   });
 
-describe('bx-multi-select', function () {
+describe('cds-multi-select', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
@@ -28,7 +28,7 @@ describe('bx-multi-select', function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-multi-select' as any)
+        document.body.querySelector('cds-multi-select' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -55,7 +55,7 @@ describe('bx-multi-select', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-multi-select' as any)
+        document.body.querySelector('cds-multi-select' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -69,64 +69,64 @@ describe('bx-multi-select', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-multi-select')!;
-      itemNode = elem.querySelector('bx-multi-select-item')!;
+      elem = document.body.querySelector('cds-multi-select')!;
+      itemNode = elem.querySelector('cds-multi-select-item')!;
     });
 
     it('should add "open" stateful modifier class', async function () {
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
 
     it('should remove "open" stateful modifier class (closed default state)', async function () {
-      (elem as BXMultiSelect).open = true;
+      (elem as CDSMultiSelect).open = true;
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should always close multi-select when clicking document', async function () {
-      (elem as BXMultiSelect).open = true;
+      (elem as CDSMultiSelect).open = true;
       await Promise.resolve();
       elem.dispatchEvent(new CustomEvent('focusout'));
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should keep multi-select open when clicking on an item', async function () {
-      (elem as BXMultiSelect).open = true;
+      (elem as CDSMultiSelect).open = true;
       await Promise.resolve();
       (itemNode as HTMLElement).click();
       await Promise.resolve();
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
 
     it('should provide a way to cancel opening', async function () {
-      events.on(elem, 'bx-multi-select-beingtoggled', (event: CustomEvent) => {
+      events.on(elem, 'cds-multi-select-beingtoggled', (event: CustomEvent) => {
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(false);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(false);
     });
 
     it('should provide a way to cancel closing', async function () {
-      (elem as BXMultiSelect).open = true;
+      (elem as CDSMultiSelect).open = true;
       await Promise.resolve();
-      events.on(elem, 'bx-multi-select-beingtoggled', (event: CustomEvent) => {
+      events.on(elem, 'cds-multi-select-beingtoggled', (event: CustomEvent) => {
         event.preventDefault();
       });
       const inner = elem.shadowRoot!.querySelector('div[role="listbox"]');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--list-box--expanded')).toBe(true);
+      expect(inner!.classList.contains('cds--list-box--expanded')).toBe(true);
     });
   });
 
@@ -137,14 +137,14 @@ describe('bx-multi-select', function () {
     beforeEach(async function () {
       render(template({ open: true, value: 'all' }), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-multi-select')!;
-      itemNodes = elem.querySelectorAll('bx-multi-select-item');
+      elem = document.body.querySelector('cds-multi-select')!;
+      itemNodes = elem.querySelectorAll('cds-multi-select-item');
     });
 
     it('should add/remove "selected" modifier class', async function () {
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
+          'cds-multi-select-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -158,53 +158,53 @@ describe('bx-multi-select', function () {
     it('should update selection count', async function () {
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
+          'cds-multi-select-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       expect(
         elem
-          .shadowRoot!.querySelector('.bx--list-box__selection--multi')!
+          .shadowRoot!.querySelector('.cds--list-box__selection--multi')!
           .textContent!.trim()
       ).toBe('2');
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
+          'cds-multi-select-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="all"]'
+          'cds-multi-select-item[value="all"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       expect(
-        elem.shadowRoot!.querySelector('.bx--list-box__selection--multi')
+        elem.shadowRoot!.querySelector('.cds--list-box__selection--multi')
       ).toBeNull();
     });
 
     it('should update value', async function () {
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
+          'cds-multi-select-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
-      expect((elem as BXMultiSelect).value).toBe('all,staging');
+      expect((elem as CDSMultiSelect).value).toBe('all,staging');
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
+          'cds-multi-select-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="all"]'
+          'cds-multi-select-item[value="all"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
-      expect((elem as BXMultiSelect).value).toBe('');
+      expect((elem as CDSMultiSelect).value).toBe('');
     });
 
     it('should support selecting an item with space key', async function () {
@@ -214,11 +214,11 @@ describe('bx-multi-select', function () {
       );
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
-        ) as BXMultiSelectItem
+          'cds-multi-select-item[value="staging"]'
+        ) as CDSMultiSelectItem
       ).highlighted = true;
       await Promise.resolve();
-      elem.shadowRoot!.querySelector('.bx--list-box')!.dispatchEvent(event);
+      elem.shadowRoot!.querySelector('.cds--list-box')!.dispatchEvent(event);
       await Promise.resolve();
       expect(itemNodes[0].hasAttribute('selected')).toBe(true);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
@@ -234,11 +234,11 @@ describe('bx-multi-select', function () {
       );
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
-        ) as BXMultiSelectItem
+          'cds-multi-select-item[value="staging"]'
+        ) as CDSMultiSelectItem
       ).highlighted = true;
       await Promise.resolve();
-      elem.shadowRoot!.querySelector('.bx--list-box')!.dispatchEvent(event);
+      elem.shadowRoot!.querySelector('.cds--list-box')!.dispatchEvent(event);
       await Promise.resolve();
       expect(itemNodes[0].hasAttribute('selected')).toBe(true);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
@@ -248,9 +248,9 @@ describe('bx-multi-select', function () {
     });
 
     it('should provide a way to switch item with a value', async function () {
-      (elem as BXMultiSelect).value = 'staging';
-      await Promise.resolve(); // Update cycle for `<bx-multi-select>`
-      await Promise.resolve(); // Update cycle for `<bx-multi-select-item>`
+      (elem as CDSMultiSelect).value = 'staging';
+      await Promise.resolve(); // Update cycle for `<cds-multi-select>`
+      await Promise.resolve(); // Update cycle for `<cds-multi-select-item>`
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(true);
@@ -258,21 +258,27 @@ describe('bx-multi-select', function () {
       expect(itemNodes[4].hasAttribute('selected')).toBe(false);
       expect(
         elem
-          .shadowRoot!.querySelector('.bx--list-box__selection--multi')!
+          .shadowRoot!.querySelector('.cds--list-box__selection--multi')!
           .textContent!.trim()
       ).toBe('1');
     });
 
     it('should provide a way to cancel switching item', async function () {
-      events.on(elem, 'bx-multi-select-beingselected', (event: CustomEvent) => {
-        expect(event.detail.item).toBe(
-          document.body.querySelector('bx-multi-select-item[value="staging"]')
-        );
-        event.preventDefault();
-      });
+      events.on(
+        elem,
+        'cds-multi-select-beingselected',
+        (event: CustomEvent) => {
+          expect(event.detail.item).toBe(
+            document.body.querySelector(
+              'cds-multi-select-item[value="staging"]'
+            )
+          );
+          event.preventDefault();
+        }
+      );
       (
         document.body.querySelector(
-          'bx-multi-select-item[value="staging"]'
+          'cds-multi-select-item[value="staging"]'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
@@ -281,17 +287,17 @@ describe('bx-multi-select', function () {
       expect(itemNodes[2].hasAttribute('selected')).toBe(false);
       expect(itemNodes[3].hasAttribute('selected')).toBe(false);
       expect(itemNodes[4].hasAttribute('selected')).toBe(false);
-      expect((elem as BXMultiSelect).value).toBe('all');
+      expect((elem as CDSMultiSelect).value).toBe('all');
     });
 
     it('should reflect the added child to the selection', async function () {
-      const itemNode = document.createElement('bx-multi-select-item');
-      (itemNode as unknown as BXMultiSelectItem).value = 'value-added';
+      const itemNode = document.createElement('cds-multi-select-item');
+      (itemNode as unknown as CDSMultiSelectItem).value = 'value-added';
       elem.appendChild(itemNode);
-      (elem as BXMultiSelect).value = 'value-added';
+      (elem as CDSMultiSelect).value = 'value-added';
       await delay(0); // Workaround for IE MutationObserver scheduling bug for moving elements to slot
       try {
-        expect((elem as BXMultiSelect).value).toBe('value-added');
+        expect((elem as CDSMultiSelect).value).toBe('value-added');
       } finally {
         itemNode.parentNode!.removeChild(itemNode);
       }
@@ -305,13 +311,13 @@ describe('bx-multi-select', function () {
     beforeEach(async function () {
       render(template({ open: true, value: 'all' }), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-multi-select')!;
-      itemNodes = elem.querySelectorAll('bx-multi-select-item');
+      elem = document.body.querySelector('cds-multi-select')!;
+      itemNodes = elem.querySelectorAll('cds-multi-select-item');
     });
 
     it('should support clicking X button for clearing selection', async function () {
       elem
-        .shadowRoot!.querySelector('.bx--list-box__selection--multi svg')!
+        .shadowRoot!.querySelector('.cds--list-box__selection--multi svg')!
         .dispatchEvent(new CustomEvent('click', { bubbles: true }));
       await Promise.resolve();
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
@@ -320,19 +326,19 @@ describe('bx-multi-select', function () {
       expect(itemNodes[3].hasAttribute('selected')).toBe(false);
       expect(itemNodes[4].hasAttribute('selected')).toBe(false);
       await Promise.resolve();
-      expect((elem as BXMultiSelect).value).toBe('');
+      expect((elem as CDSMultiSelect).value).toBe('');
       expect(
-        elem.shadowRoot!.querySelector('.bx--list-box__selection--multi')
+        elem.shadowRoot!.querySelector('.cds--list-box__selection--multi')
       ).toBeNull();
     });
 
     it('should support space key on X button for clearing selection', async function () {
       const trigger = elem.shadowRoot!.querySelector(
-        '.bx--list-box__field'
+        '.cds--list-box__field'
       ) as HTMLElement;
       spyOn(trigger!, 'focus');
       elem
-        .shadowRoot!.querySelector('.bx--list-box__selection--multi svg')!
+        .shadowRoot!.querySelector('.cds--list-box__selection--multi svg')!
         .dispatchEvent(
           Object.assign(new CustomEvent('keypress', { bubbles: true }), {
             key: ' ',
@@ -344,20 +350,20 @@ describe('bx-multi-select', function () {
       expect(itemNodes[2].hasAttribute('selected')).toBe(false);
       expect(itemNodes[3].hasAttribute('selected')).toBe(false);
       expect(itemNodes[4].hasAttribute('selected')).toBe(false);
-      expect((elem as BXMultiSelect).value).toBe('');
+      expect((elem as CDSMultiSelect).value).toBe('');
       expect(
-        elem.shadowRoot!.querySelector('.bx--list-box__selection--multi')
+        elem.shadowRoot!.querySelector('.cds--list-box__selection--multi')
       ).toBeNull();
       expect(trigger!.focus).toHaveBeenCalledTimes(1);
     });
 
     it('should support enter key on X button for clearing selection', async function () {
       const trigger = elem.shadowRoot!.querySelector(
-        '.bx--list-box__field'
+        '.cds--list-box__field'
       ) as HTMLElement;
       spyOn(trigger!, 'focus');
       elem
-        .shadowRoot!.querySelector('.bx--list-box__selection--multi svg')!
+        .shadowRoot!.querySelector('.cds--list-box__selection--multi svg')!
         .dispatchEvent(
           Object.assign(new CustomEvent('keypress', { bubbles: true }), {
             key: 'Enter',
@@ -369,9 +375,9 @@ describe('bx-multi-select', function () {
       expect(itemNodes[2].hasAttribute('selected')).toBe(false);
       expect(itemNodes[3].hasAttribute('selected')).toBe(false);
       expect(itemNodes[4].hasAttribute('selected')).toBe(false);
-      expect((elem as BXMultiSelect).value).toBe('');
+      expect((elem as CDSMultiSelect).value).toBe('');
       expect(
-        elem.shadowRoot!.querySelector('.bx--list-box__selection--multi')
+        elem.shadowRoot!.querySelector('.cds--list-box__selection--multi')
       ).toBeNull();
       expect(trigger!.focus).toHaveBeenCalledTimes(1);
     });
@@ -383,16 +389,16 @@ describe('bx-multi-select', function () {
     beforeEach(async function () {
       render(template({ open: true, value: 'all' }), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-multi-select')!;
+      elem = document.body.querySelector('cds-multi-select')!;
     });
 
     it('should support arrow key to move focus out of the close button', async function () {
       const trigger = elem.shadowRoot!.querySelector(
-        '.bx--list-box__field'
+        '.cds--list-box__field'
       ) as HTMLElement;
       spyOn(trigger!, 'focus');
       elem
-        .shadowRoot!.querySelector('.bx--list-box__selection--multi')!
+        .shadowRoot!.querySelector('.cds--list-box__selection--multi')!
         .dispatchEvent(
           Object.assign(new CustomEvent('keydown', { bubbles: true }), {
             key: 'ArrowDown',
diff --git a/packages/carbon-web-components/tests/spec/notification_spec.ts b/packages/carbon-web-components/tests/spec/notification_spec.ts
index 87540758123..90a0b4a1bb8 100644
--- a/packages/carbon-web-components/tests/spec/notification_spec.ts
+++ b/packages/carbon-web-components/tests/spec/notification_spec.ts
@@ -1,30 +1,30 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
-import BXInlineNotification, {
+import { render } from 'lit';
+import CDSInlineNotification, {
   NOTIFICATION_KIND,
 } from '../../src/components/notification/inline-notification';
-import { inline } from '../../src/components/notification/notification-story';
+import { Playground } from '../../src/components/notification/inline-notification-story';
 
 const inlineTemplate = (props?) =>
-  inline({
-    'bx-inline-notification': props,
+  Playground({
+    'cds-inline-notification': props,
   });
 
-describe('bx-inline-notification', function () {
+describe('cds-inline-notification', function () {
   describe('Rendering titles', function () {
     it('Should render with minimum attributes', async function () {
       render(inlineTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-notification' as any)
+        document.body.querySelector('cds-inline-notification' as any)
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -43,18 +43,18 @@ describe('bx-inline-notification', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-inline-notification' as any)
+        document.body.querySelector('cds-inline-notification' as any)
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
 
   describe('Closing', function () {
-    let notification: BXInlineNotification | null;
+    let notification: CDSInlineNotification | null;
 
     beforeEach(async function () {
       render(inlineTemplate(), document.body);
       await Promise.resolve();
-      notification = document.body.querySelector('bx-inline-notification');
+      notification = document.body.querySelector('cds-inline-notification');
     });
 
     it('Should support closing', async function () {
@@ -71,10 +71,10 @@ describe('bx-inline-notification', function () {
     let notification;
 
     beforeEach(async function () {
-      const initializeTimerCloseEvent = (BXInlineNotification.prototype as any)
+      const initializeTimerCloseEvent = (CDSInlineNotification.prototype as any)
         ._handleUserOrTimerInitiatedClose;
       spyOn(
-        BXInlineNotification.prototype as any,
+        CDSInlineNotification.prototype as any,
         '_initializeTimeout'
       ).and.callFake(function () {
         // TODO: See if we can get around TS2683
@@ -89,7 +89,7 @@ describe('bx-inline-notification', function () {
         document.body
       );
       await Promise.resolve();
-      notification = document.body.querySelector('bx-inline-notification');
+      notification = document.body.querySelector('cds-inline-notification');
     });
 
     it('Should support closing after the timeout', async function () {
diff --git a/packages/carbon-web-components/tests/spec/number-input_spec.ts b/packages/carbon-web-components/tests/spec/number-input_spec.ts
index f76d9d9090b..1fd5680e3c8 100644
--- a/packages/carbon-web-components/tests/spec/number-input_spec.ts
+++ b/packages/carbon-web-components/tests/spec/number-input_spec.ts
@@ -1,17 +1,17 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit';
 import EventManager from '../utils/event-manager';
 
-import BXNumberInput from '../../src/components/number-input/number-input';
-import { Default } from '../../src/components/number-input/number-input-story';
+import CDSNumberInput from '../../src/components/number-input/number-input';
+import { Playground } from '../../src/components/number-input/number-input-story';
 
 /**
  * @param formData A `FormData` instance.
@@ -27,11 +27,11 @@ const getValues = (formData: FormData) => {
 };
 
 const template = (props?) =>
-  Default({
-    'bx-number-input': props,
+  Playground({
+    'cds-number-input': props,
   });
 
-describe('bx-number-input', function () {
+describe('cds-number-input', function () {
   const events = new EventManager();
 
   describe('Rendering', function () {
@@ -58,7 +58,7 @@ describe('bx-number-input', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-number-input' as any)
+        document.body.querySelector('cds-number-input' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -126,7 +126,7 @@ describe('bx-number-input', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-number-input')!;
+      elem = document.body.querySelector('cds-number-input')!;
     });
 
     // This test is skipped for now since there seems to be a bug somewhere in the test stack.
@@ -135,7 +135,7 @@ describe('bx-number-input', function () {
     // with this specific test case
     // eslint-disable-next-line
     xit('should support checking if required value exists', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.value = null as any;
       input.required = true;
       const spyInvalid = jasmine.createSpy('invalid');
@@ -152,7 +152,7 @@ describe('bx-number-input', function () {
     });
 
     it('should support canceling required check', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.required = true;
       events.on(input, 'invalid', (event) => {
         event.preventDefault();
@@ -163,21 +163,21 @@ describe('bx-number-input', function () {
     });
 
     it('should treat empty custom validity message as not invalid', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.setCustomValidity('');
       expect(input.invalid).toBe(false);
       expect(input.validityMessage).toBe('');
     });
 
     it('should treat non-empty custom validity message as invalid', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.setCustomValidity('validity-message-foo');
       expect(input.invalid).toBe(true);
       expect(input.validityMessage).toBe('validity-message-foo');
     });
 
     it('should warn if a value less than the min', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.min = '50';
       input.value = '0';
       await Promise.resolve();
@@ -185,7 +185,7 @@ describe('bx-number-input', function () {
     });
 
     it('should warn if a value is greater than the max', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.max = '50';
       input.value = '51';
       await Promise.resolve();
@@ -199,11 +199,11 @@ describe('bx-number-input', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-number-input')!;
+      elem = document.body.querySelector('cds-number-input')!;
     });
 
     it('should increment values', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       const initialValue = Number(input.value);
       const stepSize = Number(input.step);
       input.stepUp();
@@ -211,7 +211,7 @@ describe('bx-number-input', function () {
     });
 
     it('should decrement values', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       const initialValue = Number(input.value);
       const stepSize = Number(input.step);
       input.stepDown();
@@ -219,11 +219,11 @@ describe('bx-number-input', function () {
     });
 
     it('should increment values upon user gesture', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       const initialValue = Number(input.value);
       const stepSize = Number(input.step);
       const spyInput = jasmine.createSpy('input');
-      events.on(elem, 'bx-number-input', spyInput);
+      events.on(elem, 'cds-number-input', spyInput);
       (elem.shadowRoot!.querySelector('button.up-icon') as HTMLElement).click();
       expect(Number(input.value)).toEqual(initialValue + stepSize);
       expect(Number(spyInput.calls.argsFor(0)[0].detail.value)).toBe(
@@ -232,11 +232,11 @@ describe('bx-number-input', function () {
     });
 
     it('should decrement values upon user gesture', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       const initialValue = Number(input.value);
       const stepSize = Number(input.step);
       const spyInput = jasmine.createSpy('input');
-      events.on(elem, 'bx-number-input', spyInput);
+      events.on(elem, 'cds-number-input', spyInput);
       (
         elem.shadowRoot!.querySelector('button.down-icon') as HTMLElement
       ).click();
@@ -247,7 +247,7 @@ describe('bx-number-input', function () {
     });
 
     it('should increment values by the step amount', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       const initialValue = Number(input.value);
       input.step = '50';
       await Promise.resolve(); // wait for the value to apply
@@ -258,7 +258,7 @@ describe('bx-number-input', function () {
     });
 
     it('should decrement values by the step amount', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       const initialValue = Number(input.value);
       input.step = '50';
       await Promise.resolve(); // wait for the value to apply
@@ -269,7 +269,7 @@ describe('bx-number-input', function () {
     });
 
     it('should not step past the max value', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.max = '50';
       input.value = '50';
       await Promise.resolve();
@@ -279,7 +279,7 @@ describe('bx-number-input', function () {
     });
 
     it('should not step below the min value', async function () {
-      const input = elem as BXNumberInput;
+      const input = elem as CDSNumberInput;
       input.min = '50';
       input.value = '50';
       await Promise.resolve();
diff --git a/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts b/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
index 37cb0359ef3..b4056d574ee 100644
--- a/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
+++ b/packages/carbon-web-components/tests/spec/overflow-menu_spec.ts
@@ -1,41 +1,41 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit';
 
-import BXOverflowMenu from '../../src/components/overflow-menu/overflow-menu';
-import { Default } from '../../src/components/overflow-menu/overflow-menu-story';
+import CDSOverflowMenu from '../../src/components/overflow-menu/overflow-menu';
+import { Playground } from '../../src/components/overflow-menu/overflow-menu-story';
 
 const template = (props?) =>
-  Default({
-    'bx-overflow-menu': props,
+  Playground({
+    'cds-overflow-menu': props,
   });
 
-describe('bx-overflow-menu', function () {
+describe('cds-overflow-menu', function () {
   describe('Missing menu body', function () {
     let elem: Element;
 
     beforeEach(async function () {
       render(template({ hasBody: false }), document.body);
       await Promise.resolve();
-      document.querySelector('bx-overflow-menu')!.innerHTML = '';
-      elem = document.body.querySelector('bx-overflow-menu')!;
+      document.querySelector('cds-overflow-menu')!.innerHTML = '';
+      elem = document.body.querySelector('cds-overflow-menu')!;
     });
 
     it('Should be tolerant of missing menu body', async function () {
       (elem as HTMLElement).click();
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(true);
+      expect((elem as CDSOverflowMenu).open).toBe(true);
 
       (elem as HTMLElement).click();
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(false);
+      expect((elem as CDSOverflowMenu).open).toBe(false);
     });
 
     afterEach(function () {
@@ -50,29 +50,29 @@ describe('bx-overflow-menu', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-overflow-menu')!;
-      bodyNode = elem.querySelector('bx-overflow-menu-body')!;
+      elem = document.body.querySelector('cds-overflow-menu')!;
+      bodyNode = elem.querySelector('cds-overflow-menu-body')!;
     });
 
     it('should add "open" stateful property by clicking', async function () {
       (elem as HTMLElement).click();
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(true);
+      expect((elem as CDSOverflowMenu).open).toBe(true);
     });
 
     it('should remove "open" stateful property (closed default state) by clicking', async function () {
-      (elem as BXOverflowMenu).open = true;
+      (elem as CDSOverflowMenu).open = true;
       await Promise.resolve();
       (elem as HTMLElement).click();
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(false);
+      expect((elem as CDSOverflowMenu).open).toBe(false);
     });
 
     it('should focus on the menu body when the menu is opened by clicking on the trigger button', async function () {
       spyOn(bodyNode as HTMLElement, 'focus');
       (elem as HTMLElement).click();
-      await Promise.resolve(); // For updating `<bx-overflow-menu>`
-      await Promise.resolve(); // For updating `<bx-overflow-menu-body>`
+      await Promise.resolve(); // For updating `<cds-overflow-menu>`
+      await Promise.resolve(); // For updating `<cds-overflow-menu-body>`
       expect((bodyNode as HTMLElement).focus).toHaveBeenCalled();
     });
 
@@ -83,11 +83,11 @@ describe('bx-overflow-menu', function () {
         })
       );
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(true);
+      expect((elem as CDSOverflowMenu).open).toBe(true);
     });
 
     it('should remove "open" stateful property (closed default state) by space key', async function () {
-      (elem as BXOverflowMenu).open = true;
+      (elem as CDSOverflowMenu).open = true;
       await Promise.resolve();
       elem.dispatchEvent(
         Object.assign(new CustomEvent('keydown', { bubbles: true }), {
@@ -95,7 +95,7 @@ describe('bx-overflow-menu', function () {
         })
       );
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(false);
+      expect((elem as CDSOverflowMenu).open).toBe(false);
     });
 
     it('should focus on the menu body when the menu is opened by space key on the trigger button', async function () {
@@ -105,8 +105,8 @@ describe('bx-overflow-menu', function () {
           key: ' ',
         })
       );
-      await Promise.resolve(); // For updating `<bx-overflow-menu>`
-      await Promise.resolve(); // For updating `<bx-overflow-menu-body>`
+      await Promise.resolve(); // For updating `<cds-overflow-menu>`
+      await Promise.resolve(); // For updating `<cds-overflow-menu-body>`
       expect((bodyNode as HTMLElement).focus).toHaveBeenCalled();
     });
 
@@ -117,11 +117,11 @@ describe('bx-overflow-menu', function () {
         })
       );
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(true);
+      expect((elem as CDSOverflowMenu).open).toBe(true);
     });
 
     it('should remove "open" stateful property (closed default state) by enter key', async function () {
-      (elem as BXOverflowMenu).open = true;
+      (elem as CDSOverflowMenu).open = true;
       await Promise.resolve();
       elem.dispatchEvent(
         Object.assign(new CustomEvent('keydown', { bubbles: true }), {
@@ -129,7 +129,7 @@ describe('bx-overflow-menu', function () {
         })
       );
       await Promise.resolve();
-      expect((elem as BXOverflowMenu).open).toBe(false);
+      expect((elem as CDSOverflowMenu).open).toBe(false);
     });
 
     it('should focus on the menu body when the menu is opened by enter key on the trigger button', async function () {
@@ -139,8 +139,8 @@ describe('bx-overflow-menu', function () {
           key: 'Enter',
         })
       );
-      await Promise.resolve(); // For updating `<bx-overflow-menu>`
-      await Promise.resolve(); // For updating `<bx-overflow-menu-body>`
+      await Promise.resolve(); // For updating `<cds-overflow-menu>`
+      await Promise.resolve(); // For updating `<cds-overflow-menu-body>`
       expect((bodyNode as HTMLElement).focus).toHaveBeenCalled();
     });
   });
diff --git a/packages/carbon-web-components/tests/spec/pagination_spec.ts b/packages/carbon-web-components/tests/spec/pagination_spec.ts
index bedb773ada2..80c7516ddc4 100644
--- a/packages/carbon-web-components/tests/spec/pagination_spec.ts
+++ b/packages/carbon-web-components/tests/spec/pagination_spec.ts
@@ -1,70 +1,69 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import BXPagination from '../../src/components/pagination/pagination';
-import BXPageSizesSelect from '../../src/components/pagination/page-sizes-select';
-import BXPagesSelect from '../../src/components/pagination/pages-select';
-import { Default } from '../../src/components/pagination/pagination-story';
+import CDSPagination from '../../src/components/pagination/pagination';
+import { Playground } from '../../src/components/pagination/pagination-story';
+import CDSSelect from '../../src/components/select/select';
 
 const template = (props?) =>
-  Default({
-    'bx-pagination': props,
+  Playground({
+    'cds-pagination': props,
   });
 
-describe('bx-pagination', function () {
+describe('cds-pagination', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
-    it('should render <bx-pagination> with minimum attributes', async function () {
+    it('should render <cds-pagination> with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-pagination' as any)
+        document.body.querySelector('cds-pagination' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
-    it('should render <bx-pagination> with various attributes', async function () {
+    it('should render <cds-pagination> with various attributes', async function () {
       render(
         template({
           pageSize: 20,
           start: 10,
-          total: 200,
+          totalItems: 200,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-pagination' as any)
+        document.body.querySelector('cds-pagination' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
-    it('should render <bx-page-sizes-select> with minimum attributes', async function () {
+    it('should render <cds-page-sizes-select> with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<bx-pagination>`
-      await Promise.resolve(); // Update cycle for `<bx-page-sizes-select>`
+      await Promise.resolve(); // Update cycle for `<cds-pagination>`
+      await Promise.resolve(); // Update cycle for `<cds-page-sizes-select>`
       expect(
-        document.body.querySelector('bx-page-sizes-select' as any)
+        document.body.querySelector('cds-page-sizes-select' as any)
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
-    it('should render <bx-pages-select> with minimum attributes', async function () {
-      render(template({ total: 100 }), document.body);
-      await Promise.resolve(); // Update cycle for `<bx-pagination>`
-      await Promise.resolve(); // Update cycle for `<bx-pages-select>`
+    it('should render <cds-pages-select> with minimum attributes', async function () {
+      render(template({ totalItems: 100 }), document.body);
+      await Promise.resolve(); // Update cycle for `<cds-pagination>`
+      await Promise.resolve(); // Update cycle for `<cds-pages-select>`
       expect(
-        document.body.querySelector('bx-pages-select' as any)
+        document.body.querySelector('cds-pages-select' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -77,14 +76,14 @@ describe('bx-pagination', function () {
         template({
           pageSize: 1,
           start: 0,
-          total: 1,
+          totalItems: 1,
         }),
         document.body
       );
       await Promise.resolve();
       const textContentNode = document.body
-        .querySelector('bx-pagination')!
-        .shadowRoot!.querySelector('.bx--pagination__text');
+        .querySelector('cds-pagination')!
+        .shadowRoot!.querySelector('.cds--pagination__text');
       expect(textContentNode!.textContent!.trim()).toBe('1–1 of 1 item');
     });
 
@@ -93,14 +92,14 @@ describe('bx-pagination', function () {
         template({
           pageSize: 20,
           start: 10,
-          total: null,
+          totalItems: null,
         }),
         document.body
       );
       await Promise.resolve();
       const textContentNode = document.body
-        .querySelector('bx-pagination')!
-        .shadowRoot!.querySelector('.bx--pagination__text');
+        .querySelector('cds-pagination')!
+        .shadowRoot!.querySelector('.cds--pagination__text');
       expect(textContentNode!.textContent!.trim()).toBe('Item 11–30');
     });
 
@@ -110,61 +109,58 @@ describe('bx-pagination', function () {
           atLastPage: true,
           pageSize: 20,
           start: 30,
-          total: null,
+          totalItems: null,
         }),
         document.body
       );
       await Promise.resolve();
       const textContentNode = document.body
-        .querySelector('bx-pagination')!
-        .shadowRoot!.querySelector('.bx--pagination__text');
+        .querySelector('cds-pagination')!
+        .shadowRoot!.querySelector('.cds--pagination__text');
       expect(textContentNode!.textContent!.trim()).toBe('Item 31–');
     });
   });
 
   describe('Propagating changes', function () {
-    it('should propagate `pageSize` property to `<bx-page-sizes-select>`', async function () {
+    it('should propagate `pageSize` property to `<cds-select>`', async function () {
       render(template(), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       paginationNode.pageSize = 20;
       await Promise.resolve();
-      const pageSizesSelectNode = document.body.querySelector(
-        'bx-page-sizes-select'
-      ) as BXPageSizesSelect;
-      expect(pageSizesSelectNode.value).toBe(20);
+      const pageSizesSelectNode = paginationNode.shadowRoot?.querySelector(
+        'cds-select'
+      ) as CDSSelect;
+      expect(pageSizesSelectNode.value).toBe('20');
     });
 
-    it('should propagate the current page to `<bx-pages-select>`', async function () {
-      render(template({ total: 100 }), document.body);
+    it('should propagate the current page to `<cds-select>`', async function () {
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       paginationNode.pageSize = 5;
       paginationNode.start = 21;
       await Promise.resolve();
-      const pagesSelectNode = document.body.querySelector(
-        'bx-pages-select'
-      ) as BXPagesSelect;
-      expect(pagesSelectNode.value).toBe(4);
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
+      expect(pagesSelectNode.value).toBe('4');
     });
 
-    it('should propagate the total pages to `<bx-pages-select>`', async function () {
-      render(template({ total: 100 }), document.body);
+    it('should propagate the total pages to `<cds-pages-select>`', async function () {
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       paginationNode.pageSize = 5;
-      paginationNode.total = 21;
+      paginationNode.totalItems = 21;
       await Promise.resolve();
-      const pagesSelectNode = document.body.querySelector(
-        'bx-pages-select'
-      ) as BXPagesSelect;
-      expect(pagesSelectNode.total).toBe(5);
+      expect(paginationNode.totalItems).toBe(5);
     });
 
     it('should handle change in page size at non-first page', async function () {
@@ -174,20 +170,20 @@ describe('bx-pagination', function () {
         template({
           pageSize: 10,
           start: 190,
-          total: 200,
+          totalItems: 200,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       paginationNode.pageSize = 5;
-      await Promise.resolve(); // Update in `<bx-pagination>`
-      await Promise.resolve(); // Update in `<bx-pages-select>`
-      const pagesSelectNode = document.body.querySelector(
-        'bx-pages-select'
-      ) as BXPagesSelect;
+      await Promise.resolve(); // Update in `<cds-pagination>`
+      await Promise.resolve(); // Update in `<cds-pages-select>`
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
       expect(pagesSelectNode.shadowRoot!.querySelector('select')!.value).toBe(
         '38'
       );
@@ -206,11 +202,11 @@ describe('bx-pagination', function () {
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       events.on(
         paginationNode,
-        'bx-pagination-changed-current',
+        'cds-pagination-changed-current',
         (event: CustomEvent) => {
           newStart = event.detail.start;
         }
@@ -231,11 +227,11 @@ describe('bx-pagination', function () {
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       events.on(
         paginationNode,
-        'bx-pagination-changed-current',
+        'cds-pagination-changed-current',
         (event: CustomEvent) => {
           newStart = event.detail.start;
         }
@@ -255,10 +251,10 @@ describe('bx-pagination', function () {
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       const spyChanged = jasmine.createSpy('changed');
-      events.on(paginationNode, 'bx-pagination-changed-current', spyChanged);
+      events.on(paginationNode, 'cds-pagination-changed-current', spyChanged);
       // Prev button should be disabled when `start` indicates that we are at the first page,
       // but we ensure nothing happens even if the button is enabled
       paginationNode.shadowRoot!.querySelectorAll('button')[0].disabled = false;
@@ -278,11 +274,11 @@ describe('bx-pagination', function () {
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       events.on(
         paginationNode,
-        'bx-pagination-changed-current',
+        'cds-pagination-changed-current',
         (event: CustomEvent) => {
           newStart = event.detail.start;
         }
@@ -297,16 +293,16 @@ describe('bx-pagination', function () {
         template({
           pageSize: 10,
           start: 20,
-          total: 30,
+          totalItems: 30,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       const spyChanged = jasmine.createSpy('changed');
-      events.on(paginationNode, 'bx-pagination-changed-current', spyChanged);
+      events.on(paginationNode, 'cds-pagination-changed-current', spyChanged);
       // Next button should be disabled when `start` indicates that we are at the last page,
       // but we ensure nothing happens even if the button is enabled
       paginationNode.shadowRoot!.querySelectorAll('button')[1].disabled = false;
@@ -320,16 +316,16 @@ describe('bx-pagination', function () {
         template({
           pageSize: 10,
           start: 25,
-          total: 30,
+          totalItems: 30,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       const spyChanged = jasmine.createSpy('changed');
-      events.on(paginationNode, 'bx-pagination-changed-current', spyChanged);
+      events.on(paginationNode, 'cds-pagination-changed-current', spyChanged);
       // Next button should be disabled when `start` indicates that we are at the last page,
       // but we ensure nothing happens even if the button is enabled
       paginationNode.shadowRoot!.querySelectorAll('button')[1].disabled = false;
@@ -344,17 +340,17 @@ describe('bx-pagination', function () {
         template({
           pageSize: 10,
           start: 25,
-          total: null,
+          totalItems: null,
         }),
         document.body
       );
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       events.on(
         paginationNode,
-        'bx-pagination-changed-current',
+        'cds-pagination-changed-current',
         (event: CustomEvent) => {
           newStart = event.detail.start;
         }
@@ -365,42 +361,42 @@ describe('bx-pagination', function () {
     });
 
     it('should support user-initiated change in page size', async function () {
-      render(template({ total: 100 }), document.body);
+      render(template({ totalItems: 100 }), document.body);
       await Promise.resolve();
-      const pagesSelectNode = document.body.querySelector(
-        'bx-pages-select'
-      ) as BXPagesSelect;
+      const paginationNode = document.body.querySelector(
+        'cds-pagination'
+      ) as CDSPagination;
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
       pagesSelectNode.dispatchEvent(
-        new CustomEvent('bx-page-sizes-select-changed', {
+        new CustomEvent('cds-select-selected', {
           bubbles: true,
           detail: { value: 5 },
         })
       );
-      const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
       expect(paginationNode.pageSize).toBe(5);
     });
 
     it('should support user-initiated change in current page', async function () {
       let newStart;
-      render(template({ pageSize: 10, total: 100 }), document.body);
+      render(template({ pageSize: 10, totalItems: 100 }), document.body);
       await Promise.resolve();
       const paginationNode = document.body.querySelector(
-        'bx-pagination'
-      ) as BXPagination;
+        'cds-pagination'
+      ) as CDSPagination;
       events.on(
         paginationNode,
-        'bx-pagination-changed-current',
+        'cds-pagination-changed-current',
         (event: CustomEvent) => {
           newStart = event.detail.start;
         }
       );
-      const pagesSelectNode = document.body.querySelector(
-        'bx-pages-select'
-      ) as BXPagesSelect;
+      const pagesSelectNode = paginationNode.shadowRoot?.querySelector(
+        '#pages-select'
+      ) as CDSSelect;
       pagesSelectNode.dispatchEvent(
-        new CustomEvent('bx-pages-select-changed', {
+        new CustomEvent('cds-select-selected', {
           bubbles: true,
           detail: { value: 3 },
         })
diff --git a/packages/carbon-web-components/tests/spec/progress-bar_spec.ts b/packages/carbon-web-components/tests/spec/progress-bar_spec.ts
new file mode 100644
index 00000000000..21a78c2e2c2
--- /dev/null
+++ b/packages/carbon-web-components/tests/spec/progress-bar_spec.ts
@@ -0,0 +1,49 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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 { render } from 'lit';
+import { Playground } from '../../src/components/progress-bar/progress-bar-story';
+
+const template = (props?) =>
+  Playground({
+    'cds-progress-bar': props,
+  });
+
+describe('cds-progress-bar', function () {
+  describe('Rendering', function () {
+    it('Should render with minimum attributes', async function () {
+      render(template(), document.body);
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('cds-progress-bar' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
+    });
+
+    it('Should render with various attributes', async function () {
+      render(
+        template({
+          label: 'Progress Bar label',
+          helperText: 'Optional helper text',
+          value: 50,
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('cds-progress-bar[value="50"]' as any)
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+
+    afterEach(async function () {
+      await render(undefined!, document.body);
+    });
+  });
+});
diff --git a/packages/carbon-web-components/tests/spec/progress-indicator_spec.ts b/packages/carbon-web-components/tests/spec/progress-indicator_spec.ts
index 2e22be0f8c1..4c891f97ffd 100644
--- a/packages/carbon-web-components/tests/spec/progress-indicator_spec.ts
+++ b/packages/carbon-web-components/tests/spec/progress-indicator_spec.ts
@@ -1,28 +1,28 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import { PROGRESS_STEP_STAT } from '../../src/components/progress-indicator/progress-step';
-import { Default } from '../../src/components/progress-indicator/progress-indicator-story';
+import { Playground } from '../../src/components/progress-indicator/progress-indicator-story';
 
 const template = (props?) =>
-  Default({
-    'bx-progress-step': props,
+  Playground({
+    'cds-progress-step': props,
   });
 
-describe('bx-progress-step', function () {
+describe('cds-progress-step', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-progress-step' as any)
+        document.body.querySelector('cds-progress-step' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -41,7 +41,9 @@ describe('bx-progress-step', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-progress-step[state="complete"]' as any)
+        document.body.querySelector(
+          'cds-progress-step[state="complete"]' as any
+        )
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
diff --git a/packages/carbon-web-components/tests/spec/radio-button_spec.ts b/packages/carbon-web-components/tests/spec/radio-button_spec.ts
index e0fd3a66b3b..e8889b2fe8b 100644
--- a/packages/carbon-web-components/tests/spec/radio-button_spec.ts
+++ b/packages/carbon-web-components/tests/spec/radio-button_spec.ts
@@ -1,18 +1,18 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import BXRadioButtonGroup, {
+import { html, render } from 'lit';
+import CDSRadioButtonGroup, {
   RADIO_BUTTON_ORIENTATION,
 } from '../../src/components/radio-button/radio-button-group';
 import { RADIO_BUTTON_LABEL_POSITION } from '../../src/components/radio-button/radio-button';
-import { Default } from '../../src/components/radio-button/radio-button-story';
+import { Playground } from '../../src/components/radio-button/radio-button-story';
 
 /**
  * @param formData A `FormData` instance.
@@ -27,29 +27,32 @@ const getValues = (formData: FormData) => {
   return values;
 };
 
-const template = (props?) => Default(props);
+const template = (props?) =>
+  Playground({
+    'cds-radio-button-group': props,
+  });
 
-describe('bx-radio-button', function () {
+describe('cds-radio-button', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-radio-button[value="staging"]' as any)
+        document.body.querySelector('cds-radio-button[value="staging"]' as any)
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
     it('Should render with various attributes', async function () {
       render(
         template({
-          'bx-radio-button-group': {
+          'cds-radio-button-group': {
             disabled: true,
             labelPosition: RADIO_BUTTON_LABEL_POSITION.LEFT,
             name: 'name-foo',
             orientation: RADIO_BUTTON_ORIENTATION.VERTICAL,
             value: 'staging',
           },
-          'bx-radio-button': {
+          'cds-radio-button': {
             hideLabel: true,
             labelText: 'label-text-foo',
           },
@@ -58,21 +61,21 @@ describe('bx-radio-button', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-radio-button[value="staging"]' as any)
+        document.body.querySelector('cds-radio-button[value="staging"]' as any)
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
 
-  describe('Communication between <bx-radio-button-group> and <bx-radio-button>', function () {
+  describe('Communication between <cds-radio-button-group> and <cds-radio-button>', function () {
     it('Should propagate disabled', async function () {
       render(
-        template({ 'bx-radio-button-group': { disabled: true } }),
+        template({ 'cds-radio-button-group': { disabled: true } }),
         document.body
       );
       await Promise.resolve();
       expect(
         Array.prototype.every.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.disabled
         )
       ).toBe(true);
@@ -81,7 +84,7 @@ describe('bx-radio-button', function () {
     it('Should propagate labelPosition', async function () {
       render(
         template({
-          'bx-radio-button-group': {
+          'cds-radio-button-group': {
             labelPosition: RADIO_BUTTON_LABEL_POSITION.LEFT,
           },
         }),
@@ -90,7 +93,7 @@ describe('bx-radio-button', function () {
       await Promise.resolve();
       expect(
         Array.prototype.every.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.labelPosition === RADIO_BUTTON_LABEL_POSITION.LEFT
         )
       ).toBe(true);
@@ -99,7 +102,7 @@ describe('bx-radio-button', function () {
     it('Should propagate orientation', async function () {
       render(
         template({
-          'bx-radio-button-group': {
+          'cds-radio-button-group': {
             orientation: RADIO_BUTTON_ORIENTATION.VERTICAL,
           },
         }),
@@ -108,7 +111,7 @@ describe('bx-radio-button', function () {
       await Promise.resolve();
       expect(
         Array.prototype.every.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.orientation === RADIO_BUTTON_ORIENTATION.VERTICAL
         )
       ).toBe(true);
@@ -117,61 +120,61 @@ describe('bx-radio-button', function () {
     it('Should propagate name', async function () {
       render(
         template({
-          'bx-radio-button-group': { name: 'name-foo' },
+          'cds-radio-button-group': { name: 'name-foo' },
         }),
         document.body
       );
       await Promise.resolve();
       expect(
         Array.prototype.every.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.name === 'name-foo'
         )
       ).toBe(true);
     });
 
-    it('Should select <bx-radio-button> that matches the given value', async function () {
+    it('Should select <cds-radio-button> that matches the given value', async function () {
       render(
         template({
-          'bx-radio-button-group': { value: 'staging' },
+          'cds-radio-button-group': { value: 'staging' },
         }),
         document.body
       );
       await Promise.resolve();
       expect(
         Array.prototype.map.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.checked
         )
       ).toEqual([false, false, true]);
     });
 
-    it('Should update the value upon clicking <bx-radio-button>', async function () {
+    it('Should update the value upon clicking <cds-radio-button>', async function () {
       render(
         template({
-          'bx-radio-button-group': { name: 'name-foo' },
+          'cds-radio-button-group': { name: 'name-foo' },
         }),
         document.body
       );
       await Promise.resolve();
       (
         document.body.querySelector(
-          'bx-radio-button[value="staging"]'
+          'cds-radio-button[value="staging"]'
         ) as HTMLElement
       ).click();
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('staging');
     });
 
-    it('Should update the value upon space key on <bx-radio-button>', async function () {
+    it('Should update the value upon space key on <cds-radio-button>', async function () {
       render(
         template({
-          'bx-radio-button-group': { name: 'name-foo' },
+          'cds-radio-button-group': { name: 'name-foo' },
         }),
         document.body
       );
@@ -181,7 +184,7 @@ describe('bx-radio-button', function () {
         composed: true,
       });
       const radioBaz = document.body.querySelector(
-        'bx-radio-button[value="staging"]'
+        'cds-radio-button[value="staging"]'
       );
       (radioBaz as HTMLElement).dispatchEvent(
         Object.assign(event, { key: ' ' })
@@ -189,16 +192,16 @@ describe('bx-radio-button', function () {
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('staging');
     });
 
-    it('Should update the value upon enter key on <bx-radio-button>', async function () {
+    it('Should update the value upon enter key on <cds-radio-button>', async function () {
       render(
         template({
-          'bx-radio-button-group': { name: 'name-foo' },
+          'cds-radio-button-group': { name: 'name-foo' },
         }),
         document.body
       );
@@ -208,7 +211,7 @@ describe('bx-radio-button', function () {
         composed: true,
       });
       const radioBaz = document.body.querySelector(
-        'bx-radio-button[value="staging"]'
+        'cds-radio-button[value="staging"]'
       );
       (radioBaz as HTMLElement).dispatchEvent(
         Object.assign(event, { key: 'Enter' })
@@ -216,8 +219,8 @@ describe('bx-radio-button', function () {
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('staging');
     });
@@ -227,7 +230,7 @@ describe('bx-radio-button', function () {
     it('Should use left/right key for navigation in horizontal mode', async function () {
       render(
         template({
-          'bx-radio-button-group': {
+          'cds-radio-button-group': {
             orientation: RADIO_BUTTON_ORIENTATION.HORIZONTAL,
             name: 'name-foo',
           },
@@ -236,7 +239,7 @@ describe('bx-radio-button', function () {
       );
       await Promise.resolve();
       const radioFoo = document.body.querySelector(
-        'bx-radio-button[value="all"]'
+        'cds-radio-button[value="all"]'
       ) as HTMLElement;
       radioFoo.focus();
       const event = new CustomEvent('keydown', {
@@ -247,30 +250,30 @@ describe('bx-radio-button', function () {
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('cloudFoundry');
       expect(
         Array.prototype.map.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.shadowRoot.querySelector('input').tabIndex
         )
       ).toEqual([-1, 0, -1]);
       const radioBar = document.body.querySelector(
-        'bx-radio-button[value="cloudFoundry"]'
+        'cds-radio-button[value="cloudFoundry"]'
       ) as HTMLElement;
       radioBar.dispatchEvent(Object.assign(event, { key: 'ArrowLeft' }));
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('all');
       expect(
         Array.prototype.map.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.shadowRoot.querySelector('input').tabIndex
         )
       ).toEqual([0, -1, -1]);
@@ -279,7 +282,7 @@ describe('bx-radio-button', function () {
     it('Should use up/down key for navigation in vertical mode', async function () {
       render(
         template({
-          'bx-radio-button-group': {
+          'cds-radio-button-group': {
             orientation: RADIO_BUTTON_ORIENTATION.VERTICAL,
             name: 'name-foo',
           },
@@ -288,7 +291,7 @@ describe('bx-radio-button', function () {
       );
       await Promise.resolve();
       const radioFoo = document.body.querySelector(
-        'bx-radio-button[value="all"]'
+        'cds-radio-button[value="all"]'
       ) as HTMLElement;
       radioFoo.focus();
       const event = new CustomEvent('keydown', {
@@ -299,30 +302,30 @@ describe('bx-radio-button', function () {
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('cloudFoundry');
       expect(
         Array.prototype.map.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.shadowRoot.querySelector('input').tabIndex
         )
       ).toEqual([-1, 0, -1]);
       const radioBar = document.body.querySelector(
-        'bx-radio-button[value="cloudFoundry"]'
+        'cds-radio-button[value="cloudFoundry"]'
       ) as HTMLElement;
       radioBar.dispatchEvent(Object.assign(event, { key: 'ArrowUp' }));
       expect(
         (
           document.body.querySelector(
-            'bx-radio-button-group'
-          ) as BXRadioButtonGroup
+            'cds-radio-button-group'
+          ) as CDSRadioButtonGroup
         ).value
       ).toBe('all');
       expect(
         Array.prototype.map.call(
-          document.body.querySelectorAll('bx-radio-button'),
+          document.body.querySelectorAll('cds-radio-button'),
           (radio) => radio.shadowRoot.querySelector('input').tabIndex
         )
       ).toEqual([0, -1, -1]);
@@ -335,7 +338,7 @@ describe('bx-radio-button', function () {
         html`
           <form>
             ${template({
-              'bx-radio-button-group': {
+              'cds-radio-button-group': {
                 name: 'name-foo',
                 value: 'staging',
               },
@@ -362,7 +365,7 @@ describe('bx-radio-button', function () {
         html`
           <form>
             ${template({
-              'bx-radio-button-group': {
+              'cds-radio-button-group': {
                 value: 'staging',
               },
             })}
@@ -388,7 +391,7 @@ describe('bx-radio-button', function () {
         html`
           <form>
             ${template({
-              'bx-radio-button-group': {
+              'cds-radio-button-group': {
                 name: 'name-foo',
               },
             })}
@@ -414,7 +417,7 @@ describe('bx-radio-button', function () {
         html`
           <form>
             ${template({
-              'bx-radio-button-group': {
+              'cds-radio-button-group': {
                 disabled: true,
                 name: 'name-foo',
               },
diff --git a/packages/carbon-web-components/tests/spec/search_spec.ts b/packages/carbon-web-components/tests/spec/search_spec.ts
index 4a63adbd0e9..5686b44c7a5 100644
--- a/packages/carbon-web-components/tests/spec/search_spec.ts
+++ b/packages/carbon-web-components/tests/spec/search_spec.ts
@@ -1,33 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import { INPUT_SIZE } from '../../src/components/input/input';
-import BXSearch, {
-  SEARCH_COLOR_SCHEME,
-} from '../../src/components/search/search';
-import { Default } from '../../src/components/search/search-story';
+import { INPUT_SIZE } from '../../src/components/text-input/text-input';
+import CDSSearch from '../../src/components/search/search';
+import { Playground } from '../../src/components/search/search-story';
 
 const template = (props?) =>
-  Default({
-    'bx-search': props,
+  Playground({
+    'cds-search': props,
   });
 
-describe('bx-search', function () {
+describe('cds-search', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-search' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-search' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -36,7 +34,6 @@ describe('bx-search', function () {
       render(
         template({
           closeButtonAssistiveText: 'close-button-assistive-text-foo',
-          colorScheme: SEARCH_COLOR_SCHEME.LIGHT,
           disabled: true,
           labelText: 'label-text-foo',
           name: 'name-foo',
@@ -48,7 +45,7 @@ describe('bx-search', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-search' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-search' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -58,19 +55,19 @@ describe('bx-search', function () {
     it('should reflect the value', async function () {
       render(template({ value: 'value-foo' }), document.body);
       await Promise.resolve();
-      const search = document.body.querySelector('bx-search');
+      const search = document.body.querySelector('cds-search');
       const inputNode = search!.shadowRoot!.querySelector('input');
       inputNode!.value = 'value-bar';
       inputNode!.dispatchEvent(new CustomEvent('input', { bubbles: true }));
-      expect((search as BXSearch).value).toBe('value-bar');
+      expect((search as CDSSearch).value).toBe('value-bar');
     });
 
-    it('Should fire bx-search-input event upon typing', async function () {
+    it('Should fire cds-search-input event upon typing', async function () {
       render(template({ value: 'value-foo' }), document.body);
       await Promise.resolve();
-      const search = document.body.querySelector('bx-search');
+      const search = document.body.querySelector('cds-search');
       const spyBeforeClear = jasmine.createSpy('before clear');
-      events.on(search!, 'bx-search-input', spyBeforeClear);
+      events.on(search!, 'cds-search-input', spyBeforeClear);
       const inputNode = search!.shadowRoot!.querySelector('input');
       inputNode!.value = 'value-bar';
       inputNode!.dispatchEvent(new CustomEvent('input', { bubbles: true }));
@@ -84,17 +81,17 @@ describe('bx-search', function () {
     it('should clear the value', async function () {
       render(template({ value: 'value-foo' }), document.body);
       await Promise.resolve();
-      const search = document.body.querySelector('bx-search');
+      const search = document.body.querySelector('cds-search');
       search!.shadowRoot!.querySelector('button')!.click();
-      expect((search as BXSearch).value).toBe('');
+      expect((search as CDSSearch).value).toBe('');
     });
 
-    it('Should fire bx-search-input event upon clearing', async function () {
+    it('Should fire cds-search-input event upon clearing', async function () {
       render(template({ value: 'value-foo' }), document.body);
       await Promise.resolve();
-      const search = document.body.querySelector('bx-search');
+      const search = document.body.querySelector('cds-search');
       const spyBeforeClear = jasmine.createSpy('before clear');
-      events.on(search!, 'bx-search-input', spyBeforeClear);
+      events.on(search!, 'cds-search-input', spyBeforeClear);
       search!.shadowRoot!.querySelector('button')!.click();
       await Promise.resolve();
       expect(spyBeforeClear).toHaveBeenCalled();
diff --git a/packages/carbon-web-components/tests/spec/select_spec.ts b/packages/carbon-web-components/tests/spec/select_spec.ts
index 6b5fdf6973c..44b2d0de547 100644
--- a/packages/carbon-web-components/tests/spec/select_spec.ts
+++ b/packages/carbon-web-components/tests/spec/select_spec.ts
@@ -1,21 +1,19 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit';
 import EventManager from '../utils/event-manager';
-import { INPUT_SIZE } from '../../src/components/input/input';
-import BXSelect, {
-  SELECT_COLOR_SCHEME,
-} from '../../src/components/select/select';
-import BXSelectItem from '../../src/components/select/select-item';
-import BXSelectItemGroup from '../../src/components/select/select-item-group';
-import { Default } from '../../src/components/select/select-story';
+import { INPUT_SIZE } from '../../src/components/text-input/text-input';
+import CDSSelect from '../../src/components/select/select';
+import CDSSelectItem from '../../src/components/select/select-item';
+import CDSSelectItemGroup from '../../src/components/select/select-item-group';
+import { Playground } from '../../src/components/select/select-story';
 
 /**
  * @param formData A `FormData` instance.
@@ -31,18 +29,18 @@ const getValues = (formData: FormData) => {
 };
 
 const template = (props?) =>
-  Default({
-    'bx-select': props,
+  Playground({
+    'cds-select': props,
   });
 
-describe('bx-select', function () {
+describe('cds-select', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-select' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-select' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -51,7 +49,6 @@ describe('bx-select', function () {
       render(
         template({
           autofocus: true,
-          colorScheme: SELECT_COLOR_SCHEME.LIGHT,
           disabled: true,
           helperText: 'helper-text-foo',
           labelText: 'label-text-foo',
@@ -63,7 +60,7 @@ describe('bx-select', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-select' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-select' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -71,14 +68,14 @@ describe('bx-select', function () {
     it('should render invalid state', async function () {
       render(
         template({
-          helperText: 'helper-text-foo', // `validityMessage` should take precedence
+          helperText: 'helper-text-foo', // `invalidText` should take precedence
           invalid: true,
-          validityMessage: 'validity-message-foo',
+          invalidText: 'validity-message-foo',
         }),
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-select' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-select' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -88,8 +85,8 @@ describe('bx-select', function () {
     it('should support adding an option', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-select');
-      const item = document.createElement('bx-select-item') as BXSelectItem;
+      const elem = document.body.querySelector('cds-select');
+      const item = document.createElement('cds-select-item') as CDSSelectItem;
       item.disabled = true;
       item.label = 'label-foo';
       item.selected = true;
@@ -109,12 +106,12 @@ describe('bx-select', function () {
       render(template(), document.body);
       await Promise.resolve();
       const item = document.body.querySelector(
-        'bx-select-item[value="staging"]'
+        'cds-select-item[value="staging"]'
       );
-      (item as BXSelectItem).disabled = true;
+      (item as CDSSelectItem).disabled = true;
       await Promise.resolve(); // Let `MutationObserver` run
       await Promise.resolve(); // Update cycle of rendering new child `<option>`s
-      const elem = document.body.querySelector('bx-select');
+      const elem = document.body.querySelector('cds-select');
       const option = elem!.shadowRoot!.querySelector(
         'option[value="staging"]'
       ) as HTMLOptionElement;
@@ -125,12 +122,12 @@ describe('bx-select', function () {
       render(template(), document.body);
       await Promise.resolve();
       const item = document.body.querySelector(
-        'bx-select-item[value="staging"]'
+        'cds-select-item[value="staging"]'
       );
       item!.parentNode!.removeChild(item!);
       await Promise.resolve(); // Let `MutationObserver` run
       await Promise.resolve(); // Update cycle of rendering new child `<option>`s
-      const elem = document.body.querySelector('bx-select');
+      const elem = document.body.querySelector('cds-select');
       expect(
         elem!.shadowRoot!.querySelector('option[value="staging"]')
       ).toBeNull();
@@ -139,10 +136,10 @@ describe('bx-select', function () {
     it('should support adding an option group', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-select');
+      const elem = document.body.querySelector('cds-select');
       const item = document.createElement(
-        'bx-select-item-group'
-      ) as BXSelectItem;
+        'cds-select-item-group'
+      ) as CDSSelectItem;
       item.disabled = true;
       item.label = 'label-foo';
       elem!.appendChild(item);
@@ -159,12 +156,12 @@ describe('bx-select', function () {
       render(template(), document.body);
       await Promise.resolve();
       const itemGroup = document.body.querySelector(
-        'bx-select-item-group[label="Category 2"]'
+        'cds-select-item-group[label="Category 2"]'
       );
-      (itemGroup as BXSelectItemGroup).disabled = true;
+      (itemGroup as CDSSelectItemGroup).disabled = true;
       await Promise.resolve(); // Let `MutationObserver` run
       await Promise.resolve(); // Update cycle of rendering new child `<optgroup>`s
-      const elem = document.body.querySelector('bx-select');
+      const elem = document.body.querySelector('cds-select');
       const option = elem!.shadowRoot!.querySelector(
         'optgroup[label="Category 2"]'
       ) as HTMLOptGroupElement;
@@ -175,12 +172,12 @@ describe('bx-select', function () {
       render(template(), document.body);
       await Promise.resolve();
       const itemGroup = document.body.querySelector(
-        'bx-select-item-group[label="Category 2"]'
+        'cds-select-item-group[label="Category 2"]'
       );
       itemGroup!.parentNode!.removeChild(itemGroup!);
       await Promise.resolve(); // Let `MutationObserver` run
       await Promise.resolve(); // Update cycle of rendering new child `<optgroup>`s
-      const elem = document.body.querySelector('bx-select');
+      const elem = document.body.querySelector('cds-select');
       expect(
         elem!.shadowRoot!.querySelector('optgroup[label="Category 2"]')
       ).toBeNull();
@@ -192,14 +189,16 @@ describe('bx-select', function () {
       render(
         template({
           children: html`
-            <bx-select-item value="all">Option 1</bx-select-item>
-            <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
+            <cds-select-item value="all">Option 1</cds-select-item>
+            <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      const { options } = document.body.querySelector('bx-select') as BXSelect;
+      const { options } = document.body.querySelector(
+        'cds-select'
+      ) as CDSSelect;
       expect(
         Array.prototype.map.call(options, (option) => option.value)
       ).toEqual(['all', 'cloudFoundry']);
@@ -209,34 +208,34 @@ describe('bx-select', function () {
       render(
         template({
           children: html`
-            <bx-select-item value="all">Option 1</bx-select-item>
-            <bx-select-item value="cloudFoundry">Option 2</bx-select-item>
+            <cds-select-item value="all">Option 1</cds-select-item>
+            <cds-select-item value="cloudFoundry">Option 2</cds-select-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        (document.body.querySelector('bx-select') as BXSelect).length
+        (document.body.querySelector('cds-select') as CDSSelect).length
       ).toBe(2);
     });
 
     it('should support querying the type', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect((document.body.querySelector('bx-select') as BXSelect).type).toBe(
-        'select-one'
-      );
+      expect(
+        (document.body.querySelector('cds-select') as CDSSelect).type
+      ).toBe('select-one');
     });
 
     it('should unsupport multiple selection', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-select');
+      const elem = document.body.querySelector('cds-select');
       const { _attributeToProperty: origAttributeToProperty } = elem as any;
       let caught;
       await new Promise<void>((resolve) => {
-        spyOn(BXSelect.prototype as any, '_attributeToProperty').and.callFake(
+        spyOn(CDSSelect.prototype as any, '_attributeToProperty').and.callFake(
           function () {
             try {
               // TODO: See if we can get around TS2683
@@ -251,21 +250,21 @@ describe('bx-select', function () {
         elem!.setAttribute('multiple', '');
       });
       expect(caught).toBeDefined();
-      expect((elem as BXSelect).multiple).toBe(false);
+      expect((elem as CDSSelect).multiple).toBe(false);
     });
 
     it('should support querying the selected index', async function () {
       render(template({ value: 'staging' }), document.body);
       await Promise.resolve();
       expect(
-        (document.body.querySelector('bx-select') as BXSelect).selectedIndex
+        (document.body.querySelector('cds-select') as CDSSelect).selectedIndex
       ).toBe(2);
     });
 
     it('should support setting the selected index', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const select = document.body.querySelector('bx-select') as BXSelect;
+      const select = document.body.querySelector('cds-select') as CDSSelect;
       select.selectedIndex = 2;
       expect(select.value).toBe('staging');
     });
@@ -330,47 +329,36 @@ describe('bx-select', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-select')!;
+      elem = document.body.querySelector('cds-select')!;
     });
 
     it('should support checking if required value exists', async function () {
-      const select = elem as BXSelect;
+      const select = elem as CDSSelect;
       select.required = true;
       const spyInvalid = jasmine.createSpy('invalid');
       events.on(select, 'invalid', spyInvalid);
-      expect(select.checkValidity()).toBe(false);
       expect(spyInvalid).toHaveBeenCalled();
       expect(select.invalid).toBe(true);
-      expect(select.validityMessage).toBe('Please fill out this field.');
+      expect(select.invalidText).toBe('Please fill out this field.');
       select.value = 'staging';
-      expect(select.checkValidity()).toBe(true);
       expect(select.invalid).toBe(false);
-      expect(select.validityMessage).toBe('');
+      expect(select.invalidText).toBe('');
     });
 
     it('should support canceling required check', async function () {
-      const select = elem as BXSelect;
+      const select = elem as CDSSelect;
       select.required = true;
       events.on(select, 'invalid', (event) => {
         event.preventDefault();
       });
-      expect(select.checkValidity()).toBe(false);
       expect(select.invalid).toBe(false);
-      expect(select.validityMessage).toBe('');
+      expect(select.invalidText).toBe('');
     });
 
     it('should treat empty custom validity message as not invalid', async function () {
-      const select = elem as BXSelect;
-      select.setCustomValidity('');
+      const select = elem as CDSSelect;
       expect(select.invalid).toBe(false);
-      expect(select.validityMessage).toBe('');
-    });
-
-    it('should treat non-empty custom validity message as invalid', async function () {
-      const select = elem as BXSelect;
-      select.setCustomValidity('validity-message-foo');
-      expect(select.invalid).toBe(true);
-      expect(select.validityMessage).toBe('validity-message-foo');
+      expect(select.invalidText).toBe('');
     });
   });
 
diff --git a/packages/carbon-web-components/tests/spec/slider_spec.ts b/packages/carbon-web-components/tests/spec/slider_spec.ts
index d94f9f3df64..69968c8c295 100644
--- a/packages/carbon-web-components/tests/spec/slider_spec.ts
+++ b/packages/carbon-web-components/tests/spec/slider_spec.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import { Default } from '../../src/components/slider/slider-story';
+import { html, render } from 'lit';
+import { Playground } from '../../src/components/slider/slider-story';
 
 /**
  * @param formData A `FormData` instance.
@@ -24,16 +24,16 @@ const getValues = (formData: FormData) => {
 };
 
 const template = (props?) =>
-  Default({
-    'bx-slider': props,
+  Playground({
+    'cds-slider': props,
   });
 
-describe('bx-slider', function () {
+describe('cds-slider', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('bx-slider' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-slider' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -52,7 +52,7 @@ describe('bx-slider', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-slider' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-slider' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/carbon-web-components/tests/spec/structured-list_spec.ts b/packages/carbon-web-components/tests/spec/structured-list_spec.ts
index 5d8a71d7231..89b084e26cc 100644
--- a/packages/carbon-web-components/tests/spec/structured-list_spec.ts
+++ b/packages/carbon-web-components/tests/spec/structured-list_spec.ts
@@ -1,22 +1,22 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit';
 import BXStructuredListRow from '../../src/components/structured-list/structured-list-row';
-import { Default } from '../../src/components/structured-list/structured-list-story';
+import { Playground } from '../../src/components/structured-list/structured-list-story';
 
 const template = (props?) =>
-  Default({
-    'bx-structured-list': props,
+  Playground({
+    'cds-structured-list': props,
   });
 
-describe('bx-structured-list', function () {
+describe('cds-structured-list', function () {
   describe('Selection', function () {
     let list;
     let rows;
@@ -24,8 +24,8 @@ describe('bx-structured-list', function () {
     beforeEach(async function () {
       render(template({ hasSelection: true }), document.body);
       await Promise.resolve();
-      list = document.body.querySelector('bx-structured-list');
-      rows = document.body.querySelectorAll('bx-structured-list-row');
+      list = document.body.querySelector('cds-structured-list');
+      rows = document.body.querySelectorAll('cds-structured-list-row');
     });
 
     it('should reflect the selection settings', async function () {
@@ -34,7 +34,7 @@ describe('bx-structured-list', function () {
       expect(
         list
           .shadowRoot!.querySelector('section')!
-          .classList.contains('bx--structured-list--selection')
+          .classList.contains('cds--structured-list--selection')
       ).toBe(true);
       expect(
         Array.prototype.every.call(
diff --git a/packages/carbon-web-components/tests/spec/tabs_spec.ts b/packages/carbon-web-components/tests/spec/tabs_spec.ts
index a1629427468..d3ea249e4c2 100644
--- a/packages/carbon-web-components/tests/spec/tabs_spec.ts
+++ b/packages/carbon-web-components/tests/spec/tabs_spec.ts
@@ -1,58 +1,58 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import BXTabs from '../../src/components/tabs/tabs';
-import BXTab from '../../src/components/tabs/tab';
-import { Default } from '../../src/components/tabs/tabs-story';
+import CDSTabs from '../../src/components/tabs/tabs';
+import CDSTab from '../../src/components/tabs/tab';
+import { Playground } from '../../src/components/tabs/tabs-story';
 
 const template = (props?) =>
-  Default({
-    'bx-tabs': props,
+  Playground({
+    'cds-tabs': props,
   });
 
-describe('bx-tabs', function () {
+describe('cds-tabs', function () {
   describe('Toggling', function () {
     it('should toggle "open" attribute', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       const inner = elem!.shadowRoot!.getElementById('trigger');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--tabs-trigger--open')).toBe(true);
+      expect(inner!.classList.contains('cds--tabs-trigger--open')).toBe(true);
       (inner as HTMLElement).click();
       await Promise.resolve();
-      expect(inner!.classList.contains('bx--tabs-trigger--open')).toBe(false);
+      expect(inner!.classList.contains('cds--tabs-trigger--open')).toBe(false);
     });
 
     it('should always close dropdown when clicking document', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       const inner = elem!.shadowRoot!.getElementById('trigger');
       (inner as HTMLElement).click();
       await Promise.resolve();
       document.documentElement.click();
-      expect(elem!.classList.contains('bx--tabs-trigger--open')).toBe(false);
+      expect(elem!.classList.contains('cds--tabs-trigger--open')).toBe(false);
     });
 
     it('should close dropdown when clicking on an item', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       const inner = elem!.shadowRoot!.getElementById('trigger');
       (inner as HTMLElement).click();
       await Promise.resolve();
-      (document.body.querySelector('bx-tab') as HTMLElement).click();
-      expect(elem!.classList.contains('bx--tabs-trigger--open')).toBe(false);
+      (document.body.querySelector('cds-tab') as HTMLElement).click();
+      expect(elem!.classList.contains('cds--tabs-trigger--open')).toBe(false);
     });
   });
 
@@ -62,7 +62,7 @@ describe('bx-tabs', function () {
     it('should add/remove "selected" attribute', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       (itemNodes[2] as HTMLElement).click();
       await Promise.resolve();
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
@@ -75,8 +75,8 @@ describe('bx-tabs', function () {
     it('should update text', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const elem = document.body.querySelector('cds-tabs');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       (itemNodes[2] as HTMLElement).click();
       await Promise.resolve();
       expect(
@@ -87,10 +87,10 @@ describe('bx-tabs', function () {
     it('should update value', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       (itemNodes[2] as HTMLElement).click();
       await Promise.resolve();
-      expect((document.body.querySelector('bx-tabs') as BXTabs).value).toBe(
+      expect((document.body.querySelector('cds-tabs') as CDSTabs).value).toBe(
         'staging'
       );
     });
@@ -98,10 +98,10 @@ describe('bx-tabs', function () {
     it('should provide a way to switch item with a value', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      (document.body.querySelector('bx-tabs') as BXTabs).value = 'staging';
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      (document.body.querySelector('cds-tabs') as CDSTabs).value = 'staging';
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(true);
@@ -112,11 +112,11 @@ describe('bx-tabs', function () {
     it('should provide a way to cancel switching item', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      const itemNodes = document.body.querySelectorAll('bx-tab');
-      (document.body.querySelector('bx-tabs') as BXTabs).value = 'all';
+      const elem = document.body.querySelector('cds-tabs');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
+      (document.body.querySelector('cds-tabs') as CDSTabs).value = 'all';
       await Promise.resolve();
-      events.on(elem!, 'bx-tabs-beingselected', (event: CustomEvent) => {
+      events.on(elem!, 'cds-tabs-beingselected', (event: CustomEvent) => {
         expect(event.detail.item).toBe(itemNodes[2]);
         event.preventDefault();
       });
@@ -141,7 +141,7 @@ describe('bx-tabs', function () {
     it('should support closing narrow mode dropdown by ESC key', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       (elem as any)._open = true;
       elem!.dispatchEvent(
         Object.assign(new CustomEvent('keydown', { bubbles: true }), {
@@ -154,10 +154,10 @@ describe('bx-tabs', function () {
     it('should support left key in non-narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'all';
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'all';
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue(null);
       elem!.dispatchEvent(
@@ -166,7 +166,7 @@ describe('bx-tabs', function () {
         })
       );
       await Promise.resolve();
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('selected')).toBe(false);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(false);
@@ -177,10 +177,10 @@ describe('bx-tabs', function () {
     it('should support right key in non-narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'router';
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'router';
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue(null);
       elem!.dispatchEvent(
@@ -189,7 +189,7 @@ describe('bx-tabs', function () {
         })
       );
       await Promise.resolve();
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('selected')).toBe(true);
       expect(itemNodes[1].hasAttribute('selected')).toBe(false);
       expect(itemNodes[2].hasAttribute('selected')).toBe(false);
@@ -200,11 +200,11 @@ describe('bx-tabs', function () {
     it('should support up key in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'all';
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'all';
       (elem as any)._open = true;
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
       elem!.dispatchEvent(
@@ -213,7 +213,7 @@ describe('bx-tabs', function () {
         })
       );
       await Promise.resolve();
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -224,11 +224,11 @@ describe('bx-tabs', function () {
     it('should support down key in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'router';
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'router';
       (elem as any)._open = true;
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
       elem!.dispatchEvent(
@@ -237,7 +237,7 @@ describe('bx-tabs', function () {
         })
       );
       await Promise.resolve();
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(true);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -248,10 +248,10 @@ describe('bx-tabs', function () {
     it('should open the dropdown with down key in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'all';
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'all';
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
       elem!.dispatchEvent(
@@ -261,7 +261,7 @@ describe('bx-tabs', function () {
       );
       await Promise.resolve();
       expect((elem as any)._open).toBe(true);
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -272,10 +272,10 @@ describe('bx-tabs', function () {
     it('should open the dropdown with up key in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'all';
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'all';
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
       elem!.dispatchEvent(
@@ -285,7 +285,7 @@ describe('bx-tabs', function () {
       );
       await Promise.resolve();
       expect((elem as any)._open).toBe(true);
-      const itemNodes = document.body.querySelectorAll('bx-tab');
+      const itemNodes = document.body.querySelectorAll('cds-tab');
       expect(itemNodes[0].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[1].hasAttribute('highlighted')).toBe(false);
       expect(itemNodes[2].hasAttribute('highlighted')).toBe(false);
@@ -296,7 +296,7 @@ describe('bx-tabs', function () {
     it('should open the dropdown with space key in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
       elem!.dispatchEvent(
@@ -310,10 +310,10 @@ describe('bx-tabs', function () {
     it('should select the highlighted item with space key in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       (elem as any)._open = true;
-      const itemNodes = document.body.querySelectorAll('bx-tab');
-      (itemNodes[2] as BXTab).highlighted = true;
+      const itemNodes = document.body.querySelectorAll('cds-tab');
+      (itemNodes[2] as CDSTab).highlighted = true;
       await Promise.resolve();
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
@@ -324,19 +324,19 @@ describe('bx-tabs', function () {
       );
       await Promise.resolve();
       expect((elem as any)._open).toBe(false);
-      expect((elem as BXTabs).value).toBe('staging');
+      expect((elem as CDSTabs).value).toBe('staging');
     });
 
     it('should simply close the dropdown if user tries to choose the same selection in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
-      (elem as BXTabs).value = 'staging';
+      const elem = document.body.querySelector('cds-tabs');
+      (elem as CDSTabs).value = 'staging';
       (elem as any)._open = true;
-      const itemNodes = document.body.querySelectorAll('bx-tab');
-      (itemNodes[2] as BXTab).highlighted = true;
-      await Promise.resolve(); // Update cycle for `<bx-tabs>`
-      await Promise.resolve(); // Update cycle for `<bx-tab>`
+      const itemNodes = document.body.querySelectorAll('cds-tab');
+      (itemNodes[2] as CDSTab).highlighted = true;
+      await Promise.resolve(); // Update cycle for `<cds-tabs>`
+      await Promise.resolve(); // Update cycle for `<cds-tab>`
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
       elem!.dispatchEvent(
@@ -350,7 +350,7 @@ describe('bx-tabs', function () {
     it('should support closing the dropdown without an highlighted item in narrow mode', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const elem = document.body.querySelector('bx-tabs');
+      const elem = document.body.querySelector('cds-tabs');
       (elem as any)._open = true;
       const triggerNode = elem!.shadowRoot!.getElementById('trigger');
       spyOnProperty(triggerNode!, 'offsetParent').and.returnValue({});
diff --git a/packages/carbon-web-components/tests/spec/tag_spec.ts b/packages/carbon-web-components/tests/spec/tag_spec.ts
index df284a34a4c..24ba625aa09 100644
--- a/packages/carbon-web-components/tests/spec/tag_spec.ts
+++ b/packages/carbon-web-components/tests/spec/tag_spec.ts
@@ -1,29 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2021
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
-import { filter } from '../../src/components/tag/tag-story';
+import { Default, Playground } from '../../src/components/tag/tag-story';
 
-const filterTemplate = (props?) =>
-  filter({
-    'bx-filter-tag': props,
+const tagTemplate = () => Default();
+
+const playgroundTemplate = (props?) =>
+  Playground({
+    'cds-tag': props,
   });
 
-describe('bx-filter-tag', function () {
+describe('cds-tag', function () {
   describe('Enabling/disabling', function () {
     const events = new EventManager();
 
     it('should allow firing click event for normal condition', async function () {
-      render(filterTemplate(), document.body);
+      render(tagTemplate(), document.body);
       await Promise.resolve();
-      const elem = document.querySelector('bx-filter-tag');
+      const elem = document.querySelector('cds-tag');
       const spyClick = jasmine.createSpy('click');
       events.on(elem!, 'click', spyClick);
       elem!.shadowRoot!.querySelector('button')!.click();
@@ -31,9 +33,9 @@ describe('bx-filter-tag', function () {
     });
 
     it('should disallow firing click event if disabled', async function () {
-      render(filterTemplate({ disabled: true }), document.body);
+      render(playgroundTemplate({ disabled: true }), document.body);
       await Promise.resolve();
-      const elem = document.querySelector('bx-filter-tag');
+      const elem = document.querySelector('cds-tag');
       const spyClick = jasmine.createSpy('click');
       events.on(elem!, 'click', spyClick);
       elem!.shadowRoot!.querySelector('button')!.click();
diff --git a/packages/carbon-web-components/tests/spec/text-input_spec.ts b/packages/carbon-web-components/tests/spec/text-input_spec.ts
new file mode 100644
index 00000000000..dd5b329c1ca
--- /dev/null
+++ b/packages/carbon-web-components/tests/spec/text-input_spec.ts
@@ -0,0 +1,179 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, render } from 'lit';
+import EventManager from '../utils/event-manager';
+
+import CDSTextInput, {
+  INPUT_TYPE,
+} from '../../src/components/text-input/text-input';
+import { Playground } from '../../src/components/text-input/text-input-story';
+
+/**
+ * @param formData A `FormData` instance.
+ * @returns The given `formData` converted to a classic key-value pair.
+ */
+const getValues = (formData: FormData) => {
+  const values = {};
+  // eslint-disable-next-line no-restricted-syntax
+  for (const [key, value] of formData.entries()) {
+    values[key] = value;
+  }
+  return values;
+};
+
+const template = (props?) =>
+  Playground({
+    'cds-text-input': props,
+  });
+
+describe('cds-text-input', function () {
+  const events = new EventManager();
+
+  describe('Rendering', function () {
+    it('Should render with various attributes', async function () {
+      render(
+        template({
+          autocomplete: 'on',
+          autofocus: true,
+          disabled: true,
+          helperText: 'helper-text-foo',
+          hidePasswordLabel: 'Hide password',
+          labelText: 'label-text-foo',
+          name: 'name-foo',
+          pattern: 'pattern-foo',
+          placeholder: 'placeholder-foo',
+          readonly: true,
+          required: true,
+          showPasswordLabel: 'Show password',
+          showPasswordVisibilityToggle: false,
+          size: 'xl',
+          type: INPUT_TYPE.TEXT,
+          validityMessage: 'validity-message-foo',
+          value: 'value-foo',
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('cds-text-input' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
+    });
+  });
+
+  describe('Event-based form participation', function () {
+    it('Should respond to `formdata` event', async function () {
+      render(
+        html`
+          <form>
+            ${template({
+              name: 'name-foo',
+              value: 'value-foo',
+            })}
+          </form>
+        `,
+        document.body
+      );
+      await Promise.resolve();
+      const formData = new FormData();
+      const event = new CustomEvent('formdata', {
+        bubbles: true,
+        cancelable: false,
+        composed: false,
+      });
+      (event as any).formData = formData; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+      const form = document.querySelector('form');
+      form!.dispatchEvent(event);
+      expect(getValues(formData)).toEqual({ 'name-foo': 'value-foo' });
+    });
+
+    it('Should not respond to `formdata` event if disabled', async function () {
+      render(
+        html`
+          <form>
+            ${template({
+              disabled: true,
+              name: 'name-foo',
+              value: 'value-foo',
+            })}
+          </form>
+        `,
+        document.body
+      );
+      await Promise.resolve();
+      const formData = new FormData();
+      const event = new CustomEvent('formdata', {
+        bubbles: true,
+        cancelable: false,
+        composed: false,
+      });
+      (event as any).formData = formData; // TODO: Wait for `FormDataEvent` being available in `lib.dom.d.ts`
+      const form = document.querySelector('form');
+      form!.dispatchEvent(event);
+      expect(getValues(formData)).toEqual({});
+    });
+  });
+
+  describe('Form validation', function () {
+    let elem: Element;
+
+    beforeEach(async function () {
+      render(template(), document.body);
+      await Promise.resolve();
+      elem = document.body.querySelector('cds-text-input')!;
+    });
+
+    it('should support checking if required value exists', async function () {
+      const input = elem as CDSTextInput;
+      input.required = true;
+      const spyInvalid = jasmine.createSpy('invalid');
+      events.on(input, 'invalid', spyInvalid);
+      expect(input.checkValidity()).toBe(false);
+      expect(spyInvalid).toHaveBeenCalled();
+      expect(input.invalid).toBe(true);
+      expect(input.validityMessage).toBe('Please fill out this field.');
+      input.value = 'value-foo';
+      expect(input.checkValidity()).toBe(true);
+      expect(input.invalid).toBe(false);
+      expect(input.validityMessage).toBe('');
+    });
+
+    it('should support canceling required check', async function () {
+      const input = elem as CDSTextInput;
+      input.required = true;
+      events.on(input, 'invalid', (event) => {
+        event.preventDefault();
+      });
+      expect(input.checkValidity()).toBe(false);
+      expect(input.invalid).toBe(false);
+      expect(input.validityMessage).toBe('');
+    });
+
+    it('should treat empty custom validity message as not invalid', async function () {
+      const input = elem as CDSTextInput;
+      input.setCustomValidity('');
+      expect(input.invalid).toBe(false);
+      expect(input.validityMessage).toBe('');
+    });
+
+    it('should treat non-empty custom validity message as invalid', async function () {
+      const input = elem as CDSTextInput;
+      input.setCustomValidity('validity-message-foo');
+      expect(input.invalid).toBe(true);
+      expect(input.validityMessage).toBe('validity-message-foo');
+    });
+  });
+
+  afterEach(async function () {
+    events.reset();
+    await render(undefined!, document.body);
+  });
+});
diff --git a/packages/carbon-web-components/tests/spec/textarea_spec.ts b/packages/carbon-web-components/tests/spec/textarea_spec.ts
index 16571af005d..be84ac61db3 100644
--- a/packages/carbon-web-components/tests/spec/textarea_spec.ts
+++ b/packages/carbon-web-components/tests/spec/textarea_spec.ts
@@ -1,19 +1,17 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit';
 import EventManager from '../utils/event-manager';
 
-import BXTextarea, {
-  TEXTAREA_COLOR_SCHEME,
-} from '../../src/components/textarea/textarea';
-import { Default } from '../../src/components/textarea/textarea-story';
+import CDSTextarea from '../../src/components/textarea/textarea';
+import { Playground } from '../../src/components/textarea/textarea-story';
 
 /**
  * @param formData A `FormData` instance.
@@ -29,11 +27,11 @@ const getValues = (formData: FormData) => {
 };
 
 const template = (props?) =>
-  Default({
-    'bx-textarea': props,
+  Playground({
+    'cds-textarea': props,
   });
 
-describe('bx-textarea', function () {
+describe('cds-textarea', function () {
   const events = new EventManager();
 
   describe('Rendering', function () {
@@ -42,7 +40,6 @@ describe('bx-textarea', function () {
         template({
           autocomplete: 'on',
           autofocus: true,
-          colorScheme: TEXTAREA_COLOR_SCHEME.LIGHT,
           disabled: true,
           helperText: 'helper-text-foo',
           labelText: 'label-text-foo',
@@ -51,17 +48,17 @@ describe('bx-textarea', function () {
           placeholder: 'placeholder-foo',
           readonly: true,
           required: true,
-          validityMessage: 'validity-message-foo',
+          invalidText: 'validity-message-foo',
           value: 'value-foo',
         }),
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-textarea' as any)).toMatchSnapshot(
-        {
-          mode: 'shadow',
-        }
-      );
+      expect(
+        document.body.querySelector('cds-textarea' as any)
+      ).toMatchSnapshot({
+        mode: 'shadow',
+      });
     });
 
     it('Should reflect value in DOM', async function () {
@@ -73,7 +70,7 @@ describe('bx-textarea', function () {
       );
       await Promise.resolve();
       expect(
-        (document.body.querySelector('bx-textarea') as BXTextarea).value
+        (document.body.querySelector('cds-textarea') as CDSTextarea).value
       ).toBe('value-foo');
     });
   });
@@ -88,7 +85,7 @@ describe('bx-textarea', function () {
       );
       await Promise.resolve();
       const textareaNode = document.body
-        .querySelector('bx-textarea')!
+        .querySelector('cds-textarea')!
         .shadowRoot!.querySelector('textarea');
       expect(textareaNode!.value).toBe('');
       textareaNode!.value = 'value-foo';
@@ -158,47 +155,47 @@ describe('bx-textarea', function () {
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      elem = document.body.querySelector('bx-textarea')!;
+      elem = document.body.querySelector('cds-textarea')!;
     });
 
     it('should support checking if required value exists', async function () {
-      const textarea = elem as BXTextarea;
+      const textarea = elem as CDSTextarea;
       textarea.required = true;
       const spyInvalid = jasmine.createSpy('invalid');
       events.on(textarea, 'invalid', spyInvalid);
       expect(textarea.checkValidity()).toBe(false);
       expect(spyInvalid).toHaveBeenCalled();
       expect(textarea.invalid).toBe(true);
-      expect(textarea.validityMessage).toBe('Please fill out this field.');
+      expect(textarea.invalidText).toBe('Please fill out this field.');
       textarea.value = 'value-foo';
       expect(textarea.checkValidity()).toBe(true);
       expect(textarea.invalid).toBe(false);
-      expect(textarea.validityMessage).toBe('');
+      expect(textarea.invalidText).toBe('');
     });
 
     it('should support canceling required check', async function () {
-      const textarea = elem as BXTextarea;
+      const textarea = elem as CDSTextarea;
       textarea.required = true;
       events.on(textarea, 'invalid', (event) => {
         event.preventDefault();
       });
       expect(textarea.checkValidity()).toBe(false);
       expect(textarea.invalid).toBe(false);
-      expect(textarea.validityMessage).toBe('');
+      expect(textarea.invalidText).toBe('');
     });
 
     it('should treat empty custom validity message as not invalid', async function () {
-      const textarea = elem as BXTextarea;
+      const textarea = elem as CDSTextarea;
       textarea.setCustomValidity('');
       expect(textarea.invalid).toBe(false);
-      expect(textarea.validityMessage).toBe('');
+      expect(textarea.invalidText).toBe('');
     });
 
     it('should treat non-empty custom validity message as invalid', async function () {
-      const textarea = elem as BXTextarea;
+      const textarea = elem as CDSTextarea;
       textarea.setCustomValidity('validity-message-foo');
       expect(textarea.invalid).toBe(true);
-      expect(textarea.validityMessage).toBe('validity-message-foo');
+      expect(textarea.invalidText).toBe('validity-message-foo');
     });
   });
 
diff --git a/packages/carbon-web-components/tests/spec/tile_spec.ts b/packages/carbon-web-components/tests/spec/tile_spec.ts
index 739f90b7ee5..66f45d8adb3 100644
--- a/packages/carbon-web-components/tests/spec/tile_spec.ts
+++ b/packages/carbon-web-components/tests/spec/tile_spec.ts
@@ -1,55 +1,49 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
+import { render } from 'lit';
 import EventManager from '../utils/event-manager';
 import { TILE_COLOR_SCHEME } from '../../src/components/tile/tile';
-import BXExpandableTile from '../../src/components/tile/expandable-tile';
-import BXSelectableTile from '../../src/components/tile/selectable-tile';
-import BXRadioTile from '../../src/components/tile/radio-tile';
+import CDSExpandableTile from '../../src/components/tile/expandable-tile';
+import CDSSelectableTile from '../../src/components/tile/selectable-tile';
+import CDSRadioTile from '../../src/components/tile/radio-tile';
 import {
   clickable,
   expandable,
   multiSelectable,
-  singleSelectable,
 } from '../../src/components/tile/tile-story';
 
 const clickableTemplate = (props?) =>
   clickable({
-    'bx-clickable-tile': props,
+    'cds-clickable-tile': props,
   });
 
 const expandableTemplate = (props?) =>
   expandable({
-    'bx-expandable-tile': props,
+    'cds-expandable-tile': props,
   });
 
 const multiSelectableTemplate = (props?) =>
   multiSelectable({
-    'bx-selectable-tile': props,
+    'cds-selectable-tile': props,
   });
 
-const singleSelectableTemplate = (props?) =>
-  singleSelectable({
-    'bx-radio-tile': props,
-  });
-
-describe('bx-tile', function () {
+describe('cds-tile', function () {
   const events = new EventManager();
 
-  describe('bx-clickable-tile', function () {
+  describe('cds-clickable-tile', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(clickableTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-clickable-tile' as any)
+          document.body.querySelector('cds-clickable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -69,7 +63,7 @@ describe('bx-tile', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-clickable-tile' as any)
+          document.body.querySelector('cds-clickable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -90,19 +84,19 @@ describe('bx-tile', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-clickable-tile' as any)
+          document.body.querySelector('cds-clickable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
   });
 
-  describe('bx-expandable-tile', function () {
+  describe('cds-expandable-tile', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(expandableTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-expandable-tile' as any)
+          document.body.querySelector('cds-expandable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -116,38 +110,38 @@ describe('bx-tile', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-expandable-tile' as any)
+          document.body.querySelector('cds-expandable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
 
     describe('Toggling', function () {
-      it('Should fire bx-expandable-tile-beingtoggled/bx-expandable-tile-toggled events upon expanding', async function () {
+      it('Should fire cds-expandable-tile-beingtoggled/cds-expandable-tile-toggled events upon expanding', async function () {
         render(expandableTemplate(), document.body);
         await Promise.resolve();
-        const tile = document.querySelector('bx-expandable-tile');
+        const tile = document.querySelector('cds-expandable-tile');
         const spyBeforeToggle = jasmine.createSpy('before toggle');
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        events.on(tile!, 'bx-expandable-tile-beingtoggled', spyBeforeToggle);
-        events.on(tile!, 'bx-expandable-tile-toggled', spyAfterToggle);
+        events.on(tile!, 'cds-expandable-tile-beingtoggled', spyBeforeToggle);
+        events.on(tile!, 'cds-expandable-tile-toggled', spyAfterToggle);
         tile!.shadowRoot!.querySelector('button')!.click();
-        expect((tile as BXExpandableTile).expanded).toBe(true);
+        expect((tile as CDSExpandableTile).expanded).toBe(true);
         expect(spyBeforeToggle).toHaveBeenCalled();
         expect(spyBeforeToggle.calls.argsFor(0)[0].detail.expanded).toBe(true);
         expect(spyAfterToggle).toHaveBeenCalled();
         expect(spyAfterToggle.calls.argsFor(0)[0].detail.expanded).toBe(true);
       });
 
-      it('Should fire bx-expandable-tile-beingtoggled/bx-expandable-tile-toggled events upon collapsing', async function () {
+      it('Should fire cds-expandable-tile-beingtoggled/cds-expandable-tile-toggled events upon collapsing', async function () {
         render(expandableTemplate({ expanded: true }), document.body);
         await Promise.resolve();
-        const tile = document.querySelector('bx-expandable-tile');
+        const tile = document.querySelector('cds-expandable-tile');
         const spyBeforeToggle = jasmine.createSpy('before toggle');
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        events.on(tile!, 'bx-expandable-tile-beingtoggled', spyBeforeToggle);
-        events.on(tile!, 'bx-expandable-tile-toggled', spyAfterToggle);
+        events.on(tile!, 'cds-expandable-tile-beingtoggled', spyBeforeToggle);
+        events.on(tile!, 'cds-expandable-tile-toggled', spyAfterToggle);
         tile!.shadowRoot!.querySelector('button')!.click();
-        expect((tile as BXExpandableTile).expanded).toBe(false);
+        expect((tile as CDSExpandableTile).expanded).toBe(false);
         expect(spyBeforeToggle).toHaveBeenCalled();
         expect(spyBeforeToggle.calls.argsFor(0)[0].detail.expanded).toBe(false);
         expect(spyAfterToggle).toHaveBeenCalled();
@@ -157,40 +151,40 @@ describe('bx-tile', function () {
       it('Should support preventing tile from being expanded upon user gesture', async function () {
         render(expandableTemplate(), document.body);
         await Promise.resolve();
-        const tile = document.querySelector('bx-expandable-tile');
+        const tile = document.querySelector('cds-expandable-tile');
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        events.on(tile!, 'bx-expandable-tile-beingtoggled', (event) => {
+        events.on(tile!, 'cds-expandable-tile-beingtoggled', (event) => {
           event.preventDefault();
         });
-        events.on(tile!, 'bx-expandable-tile-toggled', spyAfterToggle);
+        events.on(tile!, 'cds-expandable-tile-toggled', spyAfterToggle);
         tile!.shadowRoot!.querySelector('button')!.click();
-        expect((tile as BXExpandableTile).expanded).toBe(false);
+        expect((tile as CDSExpandableTile).expanded).toBe(false);
         expect(spyAfterToggle).not.toHaveBeenCalled();
       });
 
       it('Should support preventing tile from being collapsed upon user gesture', async function () {
         render(expandableTemplate({ expanded: true }), document.body);
         await Promise.resolve();
-        const tile = document.querySelector('bx-expandable-tile');
+        const tile = document.querySelector('cds-expandable-tile');
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        events.on(tile!, 'bx-expandable-tile-beingtoggled', (event) => {
+        events.on(tile!, 'cds-expandable-tile-beingtoggled', (event) => {
           event.preventDefault();
         });
-        events.on(tile!, 'bx-expandable-tile-toggled', spyAfterToggle);
+        events.on(tile!, 'cds-expandable-tile-toggled', spyAfterToggle);
         tile!.shadowRoot!.querySelector('button')!.click();
-        expect((tile as BXExpandableTile).expanded).toBe(true);
+        expect((tile as CDSExpandableTile).expanded).toBe(true);
         expect(spyAfterToggle).not.toHaveBeenCalled();
       });
     });
   });
 
-  describe('bx-radio-tile', function () {
+  describe('cds-radio-tile', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
-        render(singleSelectableTemplate(), document.body);
+        render(clickableTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-radio-tile' as any)
+          document.body.querySelector('cds-radio-tile' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -198,7 +192,7 @@ describe('bx-tile', function () {
 
       it('should render with various attributes', async function () {
         render(
-          singleSelectableTemplate({
+          clickableTemplate({
             checkmarkLabel: 'checkmark-label-foo',
             colorScheme: TILE_COLOR_SCHEME.LIGHT,
             name: 'name-foo',
@@ -208,7 +202,7 @@ describe('bx-tile', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-radio-tile' as any)
+          document.body.querySelector('cds-radio-tile' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -217,28 +211,28 @@ describe('bx-tile', function () {
 
     describe('Selection', function () {
       it('should reflect the selection', async function () {
-        render(singleSelectableTemplate({ name: 'name-foo' }), document.body);
+        render(clickableTemplate({ name: 'name-foo' }), document.body);
         await Promise.resolve();
-        const tiles = document.body.querySelectorAll('bx-radio-tile');
+        const tiles = document.body.querySelectorAll('cds-radio-tile');
         const input1 = tiles[1]!.shadowRoot!.querySelector('input');
         input1!.click();
         expect(
           Array.prototype.map.call(
             tiles,
-            (item) => (item as BXRadioTile).selected
+            (item) => (item as CDSRadioTile).selected
           )
         ).toEqual([false, true, false]);
       });
     });
   });
 
-  describe('bx-selectable-tile', function () {
+  describe('cds-selectable-tile', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(multiSelectableTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-selectable-tile' as any)
+          document.body.querySelector('cds-selectable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -255,7 +249,7 @@ describe('bx-tile', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-selectable-tile' as any)
+          document.body.querySelector('cds-selectable-tile' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -264,12 +258,12 @@ describe('bx-tile', function () {
       it('should reflect the selection', async function () {
         render(multiSelectableTemplate(), document.body);
         await Promise.resolve();
-        const tile = document.body.querySelector('bx-selectable-tile');
+        const tile = document.body.querySelector('cds-selectable-tile');
         const input = tile!.shadowRoot!.querySelector('input');
         input!.click();
-        expect((tile as BXSelectableTile).selected).toBe(true);
+        expect((tile as CDSSelectableTile).selected).toBe(true);
         input!.click();
-        expect((tile as BXSelectableTile).selected).toBe(false);
+        expect((tile as CDSSelectableTile).selected).toBe(false);
       });
     });
   });
diff --git a/packages/carbon-web-components/tests/spec/toggle_spec.ts b/packages/carbon-web-components/tests/spec/toggle_spec.ts
index 79095835663..f18abdc85ed 100644
--- a/packages/carbon-web-components/tests/spec/toggle_spec.ts
+++ b/packages/carbon-web-components/tests/spec/toggle_spec.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit';
 import { Default } from '../../src/components/toggle/toggle-story';
 
 /**
@@ -25,10 +25,10 @@ const getValues = (formData: FormData) => {
 
 const template = (props?) =>
   Default({
-    'bx-toggle': props,
+    'cds-toggle': props,
   });
 
-describe('bx-toggle', function () {
+describe('cds-toggle', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(
@@ -38,7 +38,7 @@ describe('bx-toggle', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-toggle' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-toggle' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -59,7 +59,7 @@ describe('bx-toggle', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('bx-toggle' as any)).toMatchSnapshot({
+      expect(document.body.querySelector('cds-toggle' as any)).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/carbon-web-components/tests/spec/tooltip_spec.ts b/packages/carbon-web-components/tests/spec/tooltip_spec.ts
index 95592d83e61..2ff6151e495 100644
--- a/packages/carbon-web-components/tests/spec/tooltip_spec.ts
+++ b/packages/carbon-web-components/tests/spec/tooltip_spec.ts
@@ -7,24 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render, TemplateResult } from 'lit-html';
+import { html, render, TemplateResult } from 'lit';
 import ResizeObserver from 'resize-observer-polyfill';
-import BXTooltip from '../../src/components/tooltip/tooltip';
-import BXTooltipBody from '../../src/components/tooltip/tooltip-body';
-import {
-  TOOLTIP_ALIGNMENT,
-  TOOLTIP_DIRECTION,
-} from '../../src/components/tooltip/tooltip-definition';
-import { definition, icon } from '../../src/components/tooltip/tooltip-story';
-
-const bodyTemplate = () => html` <bx-tooltip-body></bx-tooltip-body> `;
+import CDSTooltip from '../../src/components/tooltip/tooltip';
+import CDSTooltipContent from '../../src/components/tooltip/tooltip-content';
+import { POPOVER_ALIGNMENT } from '../../src/components/popover/defs';
+import { Playground } from '../../src/components/tooltip/tooltip-story';
+
+const bodyTemplate = () => html` <cds-tooltip-content></cds-tooltip-content> `;
 const contentTemplate = ({
   hasBody = true,
 }: { hasBody?: boolean } = {}) => html`
   <div data-floating-menu-container style="position:relative">
-    <!-- <div> for resize testing, distinguishing the parent node of <bx-tooltip> vs. the floating menu container -->
+    <!-- <div> for resize testing, distinguishing the parent node of <cds-tooltip> vs. the floating menu container -->
     <div>
-      <bx-tooltip> ${!hasBody ? undefined : bodyTemplate()} </bx-tooltip>
+      <cds-tooltip> ${!hasBody ? undefined : bodyTemplate()} </cds-tooltip>
     </div>
   </div>
 `;
@@ -34,24 +31,19 @@ const template = ({
 }: { hasContent?: boolean; hasBody?: boolean } = {}) =>
   !hasContent ? (undefined! as TemplateResult) : contentTemplate({ hasBody });
 
-const definitionTemplate = (props?) =>
-  definition({
-    'bx-tooltip-definition': props,
-  });
-
 const iconTemplate = (props?) =>
-  icon({
-    'bx-tooltip-icon': props,
+  Playground({
+    'cds-tooltip-icon': props,
   });
 
-describe('bx-tooltip', function () {
+describe('cds-tooltip', function () {
   describe('Missing menu body', function () {
-    let trigger: BXTooltip | null;
+    let trigger: CDSTooltip | null;
 
     beforeEach(async function () {
       render(template({ hasBody: false }), document.body);
       await Promise.resolve();
-      trigger = document.body.querySelector('bx-tooltip');
+      trigger = document.body.querySelector('cds-tooltip');
     });
 
     it('Should be tolerant of missing menu body', async function () {
@@ -64,14 +56,14 @@ describe('bx-tooltip', function () {
   });
 
   describe('Toggling', function () {
-    let trigger: BXTooltip | null;
-    let body: BXTooltipBody | null;
+    let trigger: CDSTooltip | null;
+    let content: CDSTooltipContent | null;
 
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      trigger = document.body.querySelector('bx-tooltip');
-      body = document.body.querySelector('bx-tooltip-body');
+      trigger = document.body.querySelector('cds-tooltip');
+      content = document.body.querySelector('cds-tooltip-content');
     });
 
     it('Should open and close the menu', async function () {
@@ -80,7 +72,7 @@ describe('bx-tooltip', function () {
       );
       await Promise.resolve();
       expect(trigger!.open).toBe(true);
-      expect(body!.open).toBe(true);
+      expect(content!.open).toBe(true);
       expect(trigger?.getAttribute('aria-expanded')).toBe('true');
     });
 
@@ -90,8 +82,8 @@ describe('bx-tooltip', function () {
       trigger!.shadowRoot!.firstElementChild!.dispatchEvent(
         new CustomEvent('click', { bubbles: true, composed: true })
       );
-      await Promise.resolve(); // Calls `update()` of `<bx-tooltip>`
-      await Promise.resolve(); // Calls `update()` of `<bx-tooltip-body>`
+      await Promise.resolve(); // Calls `update()` of `<cds-tooltip>`
+      await Promise.resolve(); // Calls `update()` of `<cds-tooltip-content>`
       const floatingMenuContainer = document.body.querySelector(
         'div[data-floating-menu-container]'
       );
@@ -104,8 +96,8 @@ describe('bx-tooltip', function () {
       trigger!.shadowRoot!.firstElementChild!.dispatchEvent(
         new CustomEvent('click', { bubbles: true, composed: true })
       );
-      await Promise.resolve(); // Calls `update()` of `<bx-tooltip>`
-      await Promise.resolve(); // Calls `update()` of `<bx-tooltip-body>`
+      await Promise.resolve(); // Calls `update()` of `<cds-tooltip>`
+      await Promise.resolve(); // Calls `update()` of `<cds-tooltip-content>`
       expect(ResizeObserver.prototype.unobserve).toHaveBeenCalledWith(
         trigger!.parentElement!
       );
@@ -116,14 +108,14 @@ describe('bx-tooltip', function () {
   });
 
   describe('Placing', function () {
-    let trigger: BXTooltip | null;
-    let body: BXTooltipBody | null;
+    let trigger: CDSTooltip | null;
+    let content: CDSTooltipContent | null;
 
     beforeEach(async function () {
       render(template(), document.body);
       await Promise.resolve();
-      trigger = document.body.querySelector('bx-tooltip');
-      body = document.body.querySelector('bx-tooltip-body');
+      trigger = document.body.querySelector('cds-tooltip');
+      content = document.body.querySelector('cds-tooltip-content');
     });
 
     it('Should place and position', async function () {
@@ -136,15 +128,15 @@ describe('bx-tooltip', function () {
       trigger!.shadowRoot!.firstElementChild!.dispatchEvent(
         new CustomEvent('click', { bubbles: true, composed: true })
       );
-      await Promise.resolve(); // Calls `update()` of `<bx-tooltip>`
-      await Promise.resolve(); // Calls `update()` of `<bx-tooltip-body>`
-      expect(body!.parentElement).toBe(
+      await Promise.resolve(); // Calls `update()` of `<cds-tooltip>`
+      await Promise.resolve(); // Calls `update()` of `<cds-tooltip-body>`
+      expect(content!.parentElement).toBe(
         document.body.querySelector(
           'div[data-floating-menu-container]'
         ) as HTMLElement
       );
-      expect(body!.style.left).toBe('1px');
-      expect(body!.style.top).toBe('2px');
+      expect(content!.style.left).toBe('1px');
+      expect(content!.style.top).toBe('2px');
     });
   });
 
@@ -153,44 +145,13 @@ describe('bx-tooltip', function () {
   });
 });
 
-describe('bx-tooltip-definition', function () {
-  describe('Rendering', function () {
-    it('Should render with minimum attributes', async function () {
-      render(definitionTemplate(), document.body);
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('bx-tooltip-definition' as any)
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('Should render with various attributes', async function () {
-      render(
-        definitionTemplate({
-          alignment: TOOLTIP_ALIGNMENT.START,
-          bodyText: 'body-text-foo',
-          direction: TOOLTIP_DIRECTION.TOP,
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('bx-tooltip-definition' as any)
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  afterEach(async function () {
-    await render(definitionTemplate({ hasContent: false }), document.body);
-  });
-});
-
-describe('bx-tooltip-icon', function () {
+describe('cds-tooltip-icon', function () {
   describe('Rendering', function () {
     it('Should render with minimum attributes', async function () {
       render(iconTemplate(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-tooltip-icon' as any)
+        document.body.querySelector('cds-tooltip-icon' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
@@ -199,15 +160,14 @@ describe('bx-tooltip-icon', function () {
     it('Should render with various attributes', async function () {
       render(
         iconTemplate({
-          alignment: TOOLTIP_ALIGNMENT.START,
+          alignment: POPOVER_ALIGNMENT.TOP,
           bodyText: 'body-text-foo',
-          direction: TOOLTIP_DIRECTION.TOP,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('bx-tooltip-icon' as any)
+        document.body.querySelector('cds-tooltip-icon' as any)
       ).toMatchSnapshot({
         mode: 'shadow',
       });
diff --git a/packages/carbon-web-components/tests/spec/ui-shell_spec.ts b/packages/carbon-web-components/tests/spec/ui-shell_spec.ts
index 985e5f11288..0b54f2665d5 100644
--- a/packages/carbon-web-components/tests/spec/ui-shell_spec.ts
+++ b/packages/carbon-web-components/tests/spec/ui-shell_spec.ts
@@ -7,28 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit';
 // Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import Fade16 from '@carbon/icons/lib/fade/16';
+import Fade16 from '@carbon/web-components/es/icons/fade/16';
 import EventManager from '../utils/event-manager';
-import ifNonNull from '../../src/globals/directives/if-non-null';
-import BXHeaderMenu from '../../src/components/ui-shell/header-menu';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import CDSHeaderMenu from '../../src/components/ui-shell/header-menu';
 // Above import does not seem to register the custom element
 import '../../src/components/ui-shell/header-menu';
-import BXSideNavMenuButton from '../../src/components/ui-shell/header-menu-button';
+import CDSSideNavMenuButton from '../../src/components/ui-shell/header-menu-button';
 // Above import does not seem to register the custom element
 import '../../src/components/ui-shell/header-menu-button';
 import '../../src/components/ui-shell/header-name';
 import '../../src/components/ui-shell/header-nav';
 import '../../src/components/ui-shell/header-nav-item';
-import BXSideNav, {
+import CDSSideNav, {
   SIDE_NAV_COLLAPSE_MODE,
   SIDE_NAV_USAGE_MODE,
 } from '../../src/components/ui-shell/side-nav';
 import '../../src/components/ui-shell/side-nav-link';
-import BXSideNavMenu from '../../src/components/ui-shell/side-nav-menu';
+import CDSSideNavMenu from '../../src/components/ui-shell/side-nav-menu';
 // Above import does not seem to register the custom element
 import '../../src/components/ui-shell/side-nav-menu';
 import '../../src/components/ui-shell/side-nav-menu-item';
@@ -40,72 +40,71 @@ const headerMenuButtonTemplate = (props?) => {
     buttonLabelInactive,
     collapseMode,
     disabled,
-    usageMode,
   } = props ?? {};
   return html`
-    <bx-header-menu-button
-      ?active="${ifNonNull(active)}"
-      button-label-active="${ifNonNull(buttonLabelActive)}"
-      button-label-inactive="${ifNonNull(buttonLabelInactive)}"
-      collapse-mode="${ifNonNull(collapseMode)}"
-      ?disabled="${disabled}"
-      usage-mode="${ifNonNull(usageMode)}">
-    </bx-header-menu-button>
+    <cds-header-menu-button
+      ?active="${ifDefined(active)}"
+      button-label-active="${ifDefined(buttonLabelActive)}"
+      button-label-inactive="${ifDefined(buttonLabelInactive)}"
+      collapse-mode="${ifDefined(collapseMode)}"
+      ?disabled="${disabled}">
+    </cds-header-menu-button>
   `;
 };
 
 const headerMenuTemplate = (props?) => {
   const { expanded, menuLabel, triggerContent } = props ?? {};
   return html`
-    <bx-header-menu
+    <cds-header-menu
       ?expanded="${expanded}"
-      menu-label="${ifNonNull(menuLabel)}"
-      trigger-content="${ifNonNull(triggerContent)}">
-    </bx-header-menu>
+      menu-label="${ifDefined(menuLabel)}"
+      trigger-content="${ifDefined(triggerContent)}">
+    </cds-header-menu>
   `;
 };
 
 const headerNameTemplate = (props?) => {
   const { href, prefix } = props ?? {};
   return html`
-    <bx-header-name
-      href="${ifNonNull(href)}"
-      prefix="${ifNonNull(prefix)}"></bx-header-name>
+    <cds-header-name
+      href="${ifDefined(href)}"
+      prefix="${ifDefined(prefix)}"></cds-header-name>
   `;
 };
 
 const headerNavTemplate = (props?) => {
   const { menuBarLabel } = props ?? {};
   return html`
-    <bx-header-nav menu-bar-label="${ifNonNull(menuBarLabel)}"></bx-header-nav>
+    <cds-header-nav
+      menu-bar-label="${ifDefined(menuBarLabel)}"></cds-header-nav>
   `;
 };
 
 const headerNavItemTemplate = (props?) => {
   const { href } = props ?? {};
   return html`
-    <bx-header-nav-item href="${ifNonNull(href)}"></bx-header-nav-item>
+    <cds-header-nav-item href="${ifDefined(href)}"></cds-header-nav-item>
   `;
 };
 
 const sideNavTemplate = (props?) => {
   const { collapseMode, expanded, usageMode, children } = props ?? {};
   return html`
-    <bx-header-menu-button></bx-header-menu-button>
-    <bx-side-nav
-      collapse-mode="${ifNonNull(collapseMode)}"
+    <cds-header-menu-button></cds-header-menu-button>
+    <cds-side-nav
+      collapse-mode="${ifDefined(collapseMode)}"
       ?expanded="${expanded}"
-      usage-mode="${ifNonNull(usageMode)}">
+      usage-mode="${ifDefined(usageMode)}">
       ${children}
-    </bx-side-nav>
+    </cds-side-nav>
   `;
 };
 
 const sideNavLinkTemplate = (props?) => {
   const { active, href, children } = props ?? {};
   return html`
-    <bx-side-nav-link ?active="${active}" href="${ifNonNull(href)}"
-      >${children}</bx-side-nav-link
+    <cds-side-nav-link ?active="${active}" href="${ifDefined(href)}"
+      >${children}</cds-side-nav-link
     >
   `;
 };
@@ -113,38 +112,38 @@ const sideNavLinkTemplate = (props?) => {
 const sideNavMenuTemplate = (props?) => {
   const { active, expanded, forceCollapsed, title, children } = props ?? {};
   return html`
-    <bx-side-nav-menu
+    <cds-side-nav-menu
       ?active="${active}"
       ?expanded="${expanded}"
       ?force-collapsed="${forceCollapsed}"
-      title="${ifNonNull(title)}">
+      title="${ifDefined(title)}">
       ${children}
-    </bx-side-nav-menu>
+    </cds-side-nav-menu>
   `;
 };
 
 const sideNavMenuItemTemplate = (props?) => {
   const { active, href } = props ?? {};
   return html`
-    <bx-side-nav-menu>
-      <bx-side-nav-menu-item
+    <cds-side-nav-menu>
+      <cds-side-nav-menu-item
         ?active="${active}"
-        href="${ifNonNull(href)}"></bx-side-nav-menu-item>
-    </bx-side-nav-menu>
+        href="${ifDefined(href)}"></cds-side-nav-menu-item>
+    </cds-side-nav-menu>
   `;
 };
 
 describe('ui-shell', function () {
   const events = new EventManager();
 
-  describe('bx-header-menu-button', function () {
+  describe('cds-header-menu-button', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(headerMenuButtonTemplate(), document.body);
         await Promise.resolve();
         // @ts-ignore
         expect(
-          document.body.querySelector('bx-header-menu-button')
+          document.body.querySelector('cds-header-menu-button')
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -161,7 +160,7 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-menu-button' as any)
+          document.body.querySelector('cds-header-menu-button' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -179,31 +178,31 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-menu-button' as any)
+          document.body.querySelector('cds-header-menu-button' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
 
     describe('Handling user interaction', function () {
-      it('should fire bx-header-menu-button-toggled event upon clicking the button', async function () {
+      it('should fire cds-header-menu-button-toggled event upon clicking the button', async function () {
         render(headerMenuButtonTemplate(), document.body);
         await Promise.resolve();
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        const button = document.body.querySelector('bx-header-menu-button');
-        events.on(button!, 'bx-header-menu-button-toggled', spyAfterToggle);
+        const button = document.body.querySelector('cds-header-menu-button');
+        events.on(button!, 'cds-header-menu-button-toggled', spyAfterToggle);
         button!.shadowRoot!.querySelector('button')!.click();
         expect(spyAfterToggle).toHaveBeenCalled();
       });
     });
   });
 
-  describe('bx-header-menu', function () {
+  describe('cds-header-menu', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(headerMenuTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-menu' as any)
+          document.body.querySelector('cds-header-menu' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -220,7 +219,7 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-menu' as any)
+          document.body.querySelector('cds-header-menu' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -231,17 +230,17 @@ describe('ui-shell', function () {
       it('should toggle the expanded state upon clicking the button', async function () {
         render(headerMenuTemplate(), document.body);
         await Promise.resolve();
-        const menu = document.body.querySelector('bx-header-menu');
+        const menu = document.body.querySelector('cds-header-menu');
         menu!.shadowRoot!.querySelector('a')!.click();
-        expect((menu as BXHeaderMenu).expanded).toBe(true);
+        expect((menu as CDSHeaderMenu).expanded).toBe(true);
         menu!.shadowRoot!.querySelector('a')!.click();
-        expect((menu as BXHeaderMenu).expanded).toBe(false);
+        expect((menu as CDSHeaderMenu).expanded).toBe(false);
       });
 
       it('should collapse upon hitting ESC key', async function () {
         render(headerMenuTemplate({ expanded: true }), document.body);
         await Promise.resolve();
-        const menu = document.body.querySelector('bx-header-menu');
+        const menu = document.body.querySelector('cds-header-menu');
         const trigger = menu!.shadowRoot!.querySelector('a');
         spyOn(trigger!, 'focus');
         trigger!.dispatchEvent(
@@ -249,29 +248,29 @@ describe('ui-shell', function () {
             key: 'Escape',
           })
         );
-        expect((menu as BXHeaderMenu).expanded).toBe(false);
+        expect((menu as CDSHeaderMenu).expanded).toBe(false);
         expect(trigger!.focus).toHaveBeenCalled();
       });
 
       it('should collapse upon losing focus', async function () {
         render(headerMenuTemplate({ expanded: true }), document.body);
         await Promise.resolve();
-        const menu = document.body.querySelector('bx-header-menu');
+        const menu = document.body.querySelector('cds-header-menu');
         (menu as HTMLElement).dispatchEvent(
           new CustomEvent('focusout', { bubbles: true })
         );
-        expect((menu as BXHeaderMenu).expanded).toBe(false);
+        expect((menu as CDSHeaderMenu).expanded).toBe(false);
       });
     });
   });
 
-  describe('bx-header-name', function () {
+  describe('cds-header-name', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(headerNameTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-name' as any)
+          document.body.querySelector('cds-header-name' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -287,7 +286,7 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-name' as any)
+          document.body.querySelector('cds-header-name' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -295,13 +294,13 @@ describe('ui-shell', function () {
     });
   });
 
-  describe('bx-header-nav', function () {
+  describe('cds-header-nav', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(headerNavTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-nav' as any)
+          document.body.querySelector('cds-header-nav' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -316,7 +315,7 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-nav' as any)
+          document.body.querySelector('cds-header-nav' as any)
         ).toMatchSnapshot({
           mode: 'shadow',
         });
@@ -324,13 +323,13 @@ describe('ui-shell', function () {
     });
   });
 
-  describe('bx-header-nav-item', function () {
+  describe('cds-header-nav-item', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(headerNavItemTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-nav-item' as any)
+          document.body.querySelector('cds-header-nav-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -343,19 +342,19 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-header-nav-item' as any)
+          document.body.querySelector('cds-header-nav-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
   });
 
-  describe('bx-side-nav-link', function () {
+  describe('cds-side-nav-link', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(sideNavLinkTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-side-nav-link' as any)
+          document.body.querySelector('cds-side-nav-link' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -371,52 +370,54 @@ describe('ui-shell', function () {
         await Promise.resolve(); // First update cycle
         await Promise.resolve(); // Update cycle upon `slotchange` event
         expect(
-          document.body.querySelector('bx-side-nav-link' as any)
+          document.body.querySelector('cds-side-nav-link' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
   });
 
-  describe('bx-side-nav', function () {
+  describe('cds-side-nav', function () {
     describe('Handling events', function () {
       it('should let child side nav menu collapse if this side nav is collapsed', async function () {
         render(
           sideNavTemplate({
-            children: html` <bx-side-nav-menu></bx-side-nav-menu> `,
+            children: html` <cds-side-nav-menu></cds-side-nav-menu> `,
           }),
           document.body
         );
         await Promise.resolve();
-        const nav = document.body.querySelector('bx-side-nav');
-        const menu = document.body.querySelector('bx-side-nav-menu');
-        expect((menu as BXSideNavMenu).forceCollapsed).toBe(true);
+        const nav = document.body.querySelector('cds-side-nav');
+        const menu = document.body.querySelector('cds-side-nav-menu');
+        expect((menu as CDSSideNavMenu).forceCollapsed).toBe(true);
         nav!.dispatchEvent(new CustomEvent('mouseover', { bubbles: true }));
         await Promise.resolve();
-        expect((menu as BXSideNavMenu).forceCollapsed).toBe(false);
+        expect((menu as CDSSideNavMenu).forceCollapsed).toBe(false);
         nav!.dispatchEvent(new CustomEvent('mouseout', { bubbles: true }));
         await Promise.resolve();
-        expect((menu as BXSideNavMenu).forceCollapsed).toBe(true);
+        expect((menu as CDSSideNavMenu).forceCollapsed).toBe(true);
       });
 
       it('should toggle expand state upon upon clicking on header menu button', async function () {
         render(sideNavTemplate(), document.body);
         await Promise.resolve();
-        const nav = document.body.querySelector('bx-side-nav');
-        const menuButton = document.body.querySelector('bx-header-menu-button');
+        const nav = document.body.querySelector('cds-side-nav');
+        const menuButton = document.body.querySelector(
+          'cds-header-menu-button'
+        );
         menuButton!.dispatchEvent(
-          new CustomEvent('bx-header-menu-button-toggled', {
+          new CustomEvent('cds-header-menu-button-toggled', {
             bubbles: true,
             detail: { active: true },
           })
         );
-        expect((nav as BXSideNav).expanded).toBe(true);
+        expect((nav as CDSSideNav).expanded).toBe(true);
         menuButton!.dispatchEvent(
-          new CustomEvent('bx-header-menu-button-toggled', {
+          new CustomEvent('cds-header-menu-button-toggled', {
             bubbles: true,
             detail: { active: false },
           })
         );
-        expect((nav as BXSideNav).expanded).toBe(false);
+        expect((nav as CDSSideNav).expanded).toBe(false);
       });
     });
 
@@ -430,36 +431,24 @@ describe('ui-shell', function () {
           document.body
         );
         await Promise.resolve();
-        const menuButton = document.body.querySelector('bx-header-menu-button');
-        expect((menuButton as BXSideNavMenuButton).collapseMode).toBe(
-          SIDE_NAV_COLLAPSE_MODE.RAIL
-        );
-        expect((menuButton as BXSideNavMenuButton).active).toBe(true);
-      });
-
-      it('should propagate usage mode to header menu button', async function () {
-        render(
-          sideNavTemplate({
-            usageMode: SIDE_NAV_USAGE_MODE.HEADER_NAV,
-          }),
-          document.body
+        const menuButton = document.body.querySelector(
+          'cds-header-menu-button'
         );
-        await Promise.resolve();
-        const menuButton = document.body.querySelector('bx-header-menu-button');
-        expect((menuButton as BXSideNavMenuButton).usageMode).toBe(
-          SIDE_NAV_USAGE_MODE.HEADER_NAV
+        expect((menuButton as CDSSideNavMenuButton).collapseMode).toBe(
+          SIDE_NAV_COLLAPSE_MODE.RAIL
         );
+        expect((menuButton as CDSSideNavMenuButton).active).toBe(true);
       });
     });
   });
 
-  describe('bx-side-nav-menu', function () {
+  describe('cds-side-nav-menu', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(sideNavMenuTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-side-nav-menu' as any)
+          document.body.querySelector('cds-side-nav-menu' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -474,7 +463,7 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-side-nav-menu' as any)
+          document.body.querySelector('cds-side-nav-menu' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -489,20 +478,20 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-side-nav-menu' as any)
+          document.body.querySelector('cds-side-nav-menu' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
 
     describe('Handling user interaction', function () {
-      it('should fire bx-side-nav-menu-beingtoggled/bx-side-nav-menu-toggled events upon toggling', async function () {
+      it('should fire cds-side-nav-menu-beingtoggled/cds-side-nav-menu-toggled events upon toggling', async function () {
         render(sideNavMenuTemplate(), document.body);
         await Promise.resolve();
         const spyBeforeToggle = jasmine.createSpy('before toggle');
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        const button = document.body.querySelector('bx-side-nav-menu');
-        events.on(button!, 'bx-side-nav-menu-beingtoggled', spyBeforeToggle);
-        events.on(button!, 'bx-side-nav-menu-toggled', spyAfterToggle);
+        const button = document.body.querySelector('cds-side-nav-menu');
+        events.on(button!, 'cds-side-nav-menu-beingtoggled', spyBeforeToggle);
+        events.on(button!, 'cds-side-nav-menu-toggled', spyAfterToggle);
         button!.shadowRoot!.querySelector('button')!.click();
         expect(spyBeforeToggle).toHaveBeenCalled();
         expect(spyAfterToggle).toHaveBeenCalled();
@@ -512,11 +501,11 @@ describe('ui-shell', function () {
         render(sideNavMenuTemplate(), document.body);
         await Promise.resolve();
         const spyAfterToggle = jasmine.createSpy('after toggle');
-        const button = document.body.querySelector('bx-side-nav-menu');
-        events.on(button!, 'bx-side-nav-menu-beingtoggled', (event) => {
+        const button = document.body.querySelector('cds-side-nav-menu');
+        events.on(button!, 'cds-side-nav-menu-beingtoggled', (event) => {
           event.preventDefault();
         });
-        events.on(button!, 'bx-side-nav-menu-toggled', spyAfterToggle);
+        events.on(button!, 'cds-side-nav-menu-toggled', spyAfterToggle);
         button!.shadowRoot!.querySelector('button')!.click();
         await Promise.resolve();
         expect(spyAfterToggle).not.toHaveBeenCalled();
@@ -532,8 +521,8 @@ describe('ui-shell', function () {
           document.body
         );
         await Promise.resolve();
-        const menu = document.body.querySelector('bx-side-nav-menu');
-        const menuItem = document.createElement('bx-side-nav-menu-item');
+        const menu = document.body.querySelector('cds-side-nav-menu');
+        const menuItem = document.createElement('cds-side-nav-menu-item');
         menu!.appendChild(menuItem);
         await Promise.resolve(); // `slotchange` event seems to happen at EOM
         expect(menuItem.hasAttribute('parent-has-icon')).toBe(true);
@@ -542,13 +531,13 @@ describe('ui-shell', function () {
       it('should tell existing child side nav item that the parent side nav menu has an icon', async function () {
         render(
           sideNavMenuTemplate({
-            children: html` <bx-side-nav-menu-item></bx-side-nav-menu-item> `,
+            children: html` <cds-side-nav-menu-item></cds-side-nav-menu-item> `,
           }),
           document.body
         );
         await Promise.resolve();
-        const menu = document.body.querySelector('bx-side-nav-menu');
-        const menuItem = menu!.querySelector('bx-side-nav-menu-item');
+        const menu = document.body.querySelector('cds-side-nav-menu');
+        const menuItem = menu!.querySelector('cds-side-nav-menu-item');
         const svg = document.createElement('svg');
         svg.setAttribute('slot', 'title-icon');
         menu!.appendChild(svg);
@@ -558,13 +547,13 @@ describe('ui-shell', function () {
     });
   });
 
-  describe('bx-side-nav-menu-item', function () {
+  describe('cds-side-nav-menu-item', function () {
     describe('Misc attributes', function () {
       it('should render with minimum attributes', async function () {
         render(sideNavMenuItemTemplate(), document.body);
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-side-nav-menu-item' as any)
+          document.body.querySelector('cds-side-nav-menu-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
 
@@ -578,7 +567,7 @@ describe('ui-shell', function () {
         );
         await Promise.resolve();
         expect(
-          document.body.querySelector('bx-side-nav-menu-item' as any)
+          document.body.querySelector('cds-side-nav-menu-item' as any)
         ).toMatchSnapshot({ mode: 'shadow' });
       });
     });
@@ -588,7 +577,7 @@ describe('ui-shell', function () {
         render(sideNavMenuItemTemplate({ active: true }), document.body);
         await Promise.resolve();
         expect(
-          (document.body.querySelector('bx-side-nav-menu') as BXSideNavMenu)
+          (document.body.querySelector('cds-side-nav-menu') as CDSSideNavMenu)
             .active
         ).toBe(true);
       });
diff --git a/packages/carbon-web-components/tests/typings/snapshot.d.ts b/packages/carbon-web-components/tests/typings/snapshot.d.ts
index 1dcca229eab..61839600cac 100644
--- a/packages/carbon-web-components/tests/typings/snapshot.d.ts
+++ b/packages/carbon-web-components/tests/typings/snapshot.d.ts
@@ -8,7 +8,7 @@
  */
 
 declare namespace jasmine {
-  interface Matchers<T> {
+  interface Matchers {
     toMatchSnapshot(options?: { mode: string }): boolean;
   }
 }
diff --git a/packages/carbon-web-components/tests/utils/event-manager.ts b/packages/carbon-web-components/tests/utils/event-manager.ts
index 01ca7cffaa4..0a979786569 100644
--- a/packages/carbon-web-components/tests/utils/event-manager.ts
+++ b/packages/carbon-web-components/tests/utils/event-manager.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import on from 'carbon-components/es/globals/js/misc/on';
+import on from '../../src/globals/mixins/on';
 import Handle from '../../src/globals/internal/handle';
 
 interface CustomEventListener {
diff --git a/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js b/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js
index 7c7b54f4d4c..75f92544954 100644
--- a/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js
+++ b/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type-def.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -86,7 +86,7 @@ module.exports = function generateCreateReactCustomElementType(api) {
                ${events.join('\n')}
                ${parentDescriptorSource ? '' : '[prop: string]: unknown;'}
              }
-             ${classComments.map(({ value }) => `/*${value}*/`).join('\n')}
+             ${classComments.map((value) => `/*${value}*/`).join('\n')}
              declare class ${className} extends Component<ComponentProps> {}
              export default ${className};
            `,
diff --git a/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js b/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js
index 44e1cae5dc4..e4064bcbeab 100644
--- a/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js
+++ b/packages/carbon-web-components/tools/babel-plugin-create-react-custom-element-type.js
@@ -545,8 +545,7 @@ module.exports = function generateCreateReactCustomElementType(
             buildCreateReactCustomElementTypeImport(declaredProps),
             ...template.ast`
                import PropTypes from "prop-types";
-               import settings from "carbon-components/es/globals/js/settings.js";
-               var prefix = settings.prefix;
+               import { prefix } from '../../globals/settings.js';
                export var descriptor = ${descriptorsWithParent};
                export var propTypes = ${propTypesWithParent};
                const Component = createReactCustomElementType(${context.customElementName}, descriptor);
diff --git a/packages/carbon-web-components/tools/css-result-loader.js b/packages/carbon-web-components/tools/css-result-loader.js
index ff0ec282149..e535e7f3209 100644
--- a/packages/carbon-web-components/tools/css-result-loader.js
+++ b/packages/carbon-web-components/tools/css-result-loader.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -14,7 +14,7 @@
  */
 function cssResultLoader(fileContent) {
   return `
-    import { css } from 'lit-element';
+    import { css } from 'lit';
     export default css([${JSON.stringify(fileContent)}]);
   `;
 }
diff --git a/packages/carbon-web-components/tools/deploy.sh b/packages/carbon-web-components/tools/deploy.sh
new file mode 100755
index 00000000000..c118bf8214e
--- /dev/null
+++ b/packages/carbon-web-components/tools/deploy.sh
@@ -0,0 +1,23 @@
+#!/bin/sh
+
+set -e
+
+git clean -f
+mv storybook-static ../storybook-static
+cd ../storybook-static
+echo "web-components.carbondesignsystem.com" > CNAME
+touch .nojekyll
+
+git init
+git config user.name "carbon-bot"
+git config user.email "carbon@us.ibm.com"
+git fetch "https://git:${GH_TOKEN}@github.com/carbon-design-system/carbon-web-components.git" gh-pages
+
+set +e
+
+git add .
+git commit -m "Deploy to GitHub Pages"
+
+if [ $? -eq 0 ]; then
+  git push --force "https://git:${GH_TOKEN}@github.com/carbon-design-system/carbon-web-components.git" main:gh-pages > /dev/null 2>&1
+fi
diff --git a/packages/carbon-web-components/tools/fix-carbon-sass-imports.js b/packages/carbon-web-components/tools/fix-carbon-sass-imports.js
new file mode 100644
index 00000000000..244e403f613
--- /dev/null
+++ b/packages/carbon-web-components/tools/fix-carbon-sass-imports.js
@@ -0,0 +1,56 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('node:path');
+const fs = require('node:fs');
+const localCarbonPath = [__dirname, '..', 'node_modules', '@carbon'];
+const rootCarbonPath = [__dirname, '..', '..', '..', 'node_modules', '@carbon'];
+
+// map of root Carbon package to local Carbon Sass module index
+const modulesMap = new Map([
+  ['colors', 'styles/scss/_colors.scss'],
+  ['feature-flags', 'styles/scss/_feature-flags.scss'],
+  ['motion', 'styles/scss/_motion.scss'],
+]);
+
+modulesMap.forEach((localModuleIndex, packageName) => {
+  const localModuleIndexPath = path.join(...localCarbonPath, localModuleIndex);
+  const localCarbonExists = fs.existsSync(localModuleIndexPath);
+  const projectDependencyPath = path.join(...rootCarbonPath, packageName);
+  const projectCarbonExists = fs.existsSync(projectDependencyPath);
+  if (!localCarbonExists) {
+    throw new Error(
+      `Could not find local Carbon Sass module for ${packageName}`
+    );
+  }
+  if (!projectCarbonExists) {
+    throw new Error(
+      `Could not find Carbon ${packageName} package in project root dependencies`
+    );
+  }
+  const localModuleContents = fs.readFileSync(localModuleIndexPath, 'utf8');
+  const relativePath = path.relative(
+    // go up one directory to offset filename in filepath
+    path.resolve(localModuleIndexPath, '..'),
+    projectDependencyPath
+  );
+  const [fixedPath] = relativePath.split('/@carbon/');
+  if (localModuleContents.includes(fixedPath)) {
+    console.log(
+      `Skipping ${localModuleIndex} as it already has the correct path`
+    );
+    return;
+  }
+  const newContents = localModuleContents.replace(
+    "@forward '@carbon",
+    `@forward '${fixedPath}/@carbon`
+  );
+
+  fs.writeFileSync(localModuleIndexPath, newContents, 'utf8');
+});
diff --git a/packages/carbon-web-components/tools/get-rollup-config.js b/packages/carbon-web-components/tools/get-rollup-config.js
index 037b5aed35d..cc39eff342f 100644
--- a/packages/carbon-web-components/tools/get-rollup-config.js
+++ b/packages/carbon-web-components/tools/get-rollup-config.js
@@ -149,7 +149,7 @@ function getRollupConfig({
             ? []
             : [
                 [
-                  'template-html-minifier',
+                  'template-html-minifier', // TODO: verify this is actually needed, doesn't seem to be doing anything
                   {
                     modules: {
                       'lit-html': ['html'],
diff --git a/packages/carbon-web-components/tools/postcss-fix-host-pseudo.js b/packages/carbon-web-components/tools/postcss-fix-host-pseudo.js
index e8b8352a1f0..ce2647e9c95 100644
--- a/packages/carbon-web-components/tools/postcss-fix-host-pseudo.js
+++ b/packages/carbon-web-components/tools/postcss-fix-host-pseudo.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -25,15 +25,15 @@ const pseudoElementNames = [
 const rePseudoElements = new RegExp(`::?(${pseudoElementNames.join('|')})`);
 
 /**
- * Below Sass code yields `:hover:host(bx-foo) svg` and `:host(bx-foo):hover svg` selectors.
- * We want `:host(bx-foo:hover)` instead.
+ * Below Sass code yields `:hover:host(cds-foo) svg` and `:host(cds-foo):hover svg` selectors.
+ * We want `:host(cds-foo:hover)` instead.
  *
- * Though generating `:host(bx-foo:hover)` from below Sass code is not what Sass language intends,
- * `:hover:host(bx-foo) svg` or `:host(bx-foo):hover svg` is not meangful in real world.
- * Therefore this PostCSS plugin converts `:hover:host(bx-foo) svg` and `:host(bx-foo):hover svg` to `:host(bx-foo:hover)`.
+ * Though generating `:host(cds-foo:hover)` from below Sass code is not what Sass language intends,
+ * `:hover:host(cds-foo) svg` or `:host(cds-foo):hover svg` is not meangful in real world.
+ * Therefore this PostCSS plugin converts `:hover:host(cds-foo) svg` and `:host(cds-foo):hover svg` to `:host(cds-foo:hover)`.
  *
  * ```scss
- * .bx--foo {
+ * .cds--foo {
  *   &:hover {
  *     svg {
  *       fill: white;
@@ -41,11 +41,11 @@ const rePseudoElements = new RegExp(`::?(${pseudoElementNames.join('|')})`);
  *   }
  * }
  *
- * :host(bx-foo) {
- *   @extend .bx--foo;
+ * :host(cds-foo) {
+ *   @extend .cds--foo;
  * }
  *
- * :host(bx-foo) {
+ * :host(cds-foo) {
  *   &:hover {
  *     svg {
  *       fill: white;
diff --git a/packages/carbon-web-components/tools/rollup-plugin-icons.js b/packages/carbon-web-components/tools/rollup-plugin-icons.js
index 31c6ce7ba14..7caacbc6e4d 100644
--- a/packages/carbon-web-components/tools/rollup-plugin-icons.js
+++ b/packages/carbon-web-components/tools/rollup-plugin-icons.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -52,7 +52,7 @@ function rollupPluginIcons({
       const svg = require(id); // eslint-disable-line global-require
 
       const code = [
-        `import { svg } from 'lit-html'`,
+        `import { svg } from 'lit'`,
         `import spread from '${path.resolve(
           __dirname,
           '../src/globals/directives/spread'
diff --git a/packages/carbon-web-components/tools/rollup-plugin-lit-scss.js b/packages/carbon-web-components/tools/rollup-plugin-lit-scss.js
index f69ad01efe5..5243c73b613 100644
--- a/packages/carbon-web-components/tools/rollup-plugin-lit-scss.js
+++ b/packages/carbon-web-components/tools/rollup-plugin-lit-scss.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -20,7 +20,7 @@ const noop = (s) => s;
  * @returns {string} A `lit-html` template of the given CSS.
  */
 function transformToTemplate(css) {
-  return `import { css } from 'lit-element';export default css([${JSON.stringify(
+  return `import { css } from 'lit';export default css([${JSON.stringify(
     css
   )}])`;
 }
diff --git a/packages/carbon-web-components/tools/svg-result-carbon-icon-loader.js b/packages/carbon-web-components/tools/svg-result-carbon-icon-loader.js
index 3be5679cb0b..21421fb1ec5 100644
--- a/packages/carbon-web-components/tools/svg-result-carbon-icon-loader.js
+++ b/packages/carbon-web-components/tools/svg-result-carbon-icon-loader.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -18,7 +18,7 @@ const createSVGResultFromCarbonIcon = require('./svg-result-carbon-icon');
 function svgResultCarbonIconLoader() {
   const descriptor = require(this.resourcePath); // eslint-disable-line global-require
   return `
-    import { svg } from 'lit-html';
+    import { svg } from 'lit';
     import spread from '${path.resolve(
       __dirname,
       '../src/globals/directives/spread'
diff --git a/packages/eslint-config-ibmdotcom/package.json b/packages/eslint-config-ibmdotcom/package.json
index bd472be9522..e5c0d927a69 100644
--- a/packages/eslint-config-ibmdotcom/package.json
+++ b/packages/eslint-config-ibmdotcom/package.json
@@ -29,7 +29,7 @@
     "eslint-plugin-import": "^2.26.0",
     "eslint-plugin-jsdoc": "^39.6.2",
     "eslint-plugin-jsx-a11y": "^6.6.1",
-    "eslint-plugin-lit": "^1.6.1",
+    "eslint-plugin-lit": "^1.8.3",
     "eslint-plugin-prettier": "^4.2.1",
     "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
diff --git a/packages/react/.achecker.yml b/packages/react/.achecker.yml
deleted file mode 100644
index 76f279c3791..00000000000
--- a/packages/react/.achecker.yml
+++ /dev/null
@@ -1,58 +0,0 @@
-# optional - Specify the rule archive
-# i.e. For march rule archive use ruleArchive: 2017MayDeploy
-# Default: latest
-# Refer to README.md FAQ section below to get the rule archive ID.
-ruleArchive: latest
-
-# optional - Specify one or many policies to scan.
-# i.e. For one policy use policies: IBM_Accessibility_2017_02
-# i.e. Multiple policies: IBM_Accessibility_2017_02,IBM_Accessibility_BETA or refer to below as a list
-# Default: null (all policies)
-# Refer to README.md FAQ section below to get the policy ID.
-policies:
-    - IBM_Accessibility
-
-# optional - Specify one or many violation levels on which to fail the test
-#            i.e. If specified violation then the testcase will only fail if
-#                 a violation is found during the scan.
-# i.e. failLevels: violation
-# i.e. failLevels: violation,potential violation or refer to below as a list
-# Default: violation, potentialviolation
-failLevels:
-    - violation
-    - potentialviolation
-
-# optional - Specify one or many violation levels which should be reported
-#            i.e. If specified violation then in the report it would only contain
-#                 results which are level of violation.
-# i.e. reportLevels: violation
-# i.e. reportLevels: violation,potentialviolation or refer to below as a list
-# Default: violation, potentialviolation, recommendation, potentialrecommendation, manual
-reportLevels:
-    - violation
-    - potentialviolation
-    - recommendation
-    - potentialrecommendation
-    - manual
-
-# Optional - In what format types the results should be output in (json, html)
-# Default: json
-outputFormat:
-    - json
-
-# Optional - Specify labels that you would like associated to your scan
-#
-# i.e.
-#   label: Firefox,master,V12,Linux
-#   label:
-#       - Firefox
-#       - master
-#       - V12
-#       - Linux
-# Default: N/A
-label:
-    - master
-
-# optional - Where the scan results should be saved.
-# Default: results
-outputFolder: tests/a11y-results
diff --git a/packages/react/.cfignore b/packages/react/.cfignore
deleted file mode 100644
index 5bfe8acd2cd..00000000000
--- a/packages/react/.cfignore
+++ /dev/null
@@ -1,4 +0,0 @@
-*
-!manifest.yml
-!Staticfile
-!storybook-static
diff --git a/packages/react/.env.example b/packages/react/.env.example
deleted file mode 100644
index fc8dab6ed52..00000000000
--- a/packages/react/.env.example
+++ /dev/null
@@ -1,27 +0,0 @@
-# Storybook
-STORYBOOK_SOURCEMAPS=<Boolean to turn on/off sourcemaps in storybook>
-STORYBOOK_USE_RTL=<Boolean to turn on/off rtl>
-
-# Search Redirect
-SEARCH_REDIRECT_ENDPOINT=<endpoint for ibm.com search, e.g. https://www.ibm.com/search>
-
-# Search Typeahead
-SEARCH_TYPEAHEAD_VERSION=<api version for ibm.com search, e.g. v1>
-SEARCH_TYPEAHEAD_API=<host for ibm.com search, e.g. https://www-api.ibm.com>
-
-# Marketing Search
-MARKETING_SEARCH_VERSION=<api version for ibm.com marketing search, e.g. v3>
-MARKETING_SEARCH_HOST=<host for ibm.com marketing search, e.g. https://www.ibm.com>
-
-# VideoPlayer
-KALTURA_PARTNER_ID=<Kaltura partner id, e.g. 243342>
-KALTURA_UICONF_ID=<Kaltura uiconf id, e.g. 12905712>
-
-# Feature Flags
-DDS_FLAGS_ALL=<Boolean flag to turn on all feature flags>
-DDS_CARD_WITH_PICTOGRAM=<Boolean flag to turn on/off the Card with pictogram>
-DDS_AUDIO_PLAYER=<Boolean flag to turn on/off the Audio Player>
-DDS_NOTICE_CHOICE=<Boolean flag to turn on/off the Notice Choice>
-
-# Selenium
-SELENIUM_HOST=<Host URL to test, e.g. https://www.ibm.com/standards/carbon/react>
diff --git a/packages/react/.gitignore b/packages/react/.gitignore
deleted file mode 100644
index a9768eca831..00000000000
--- a/packages/react/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-.env
-coverage
-tests/a11y-results
-
-# Storybook
-storybook-static
-storybook-static-experimental
-storybook-static-rtl
-
-# rollup
-stats.html
-
-# Generated vendor files
-src/internal/vendor
-
-# e2e tests
-tests/e2e/cypress/screenshots
-tests/e2e/cypress/videos
-tests/e2e-storybook/cypress/screenshots
-tests/e2e-storybook/cypress/videos
-tests/e2e-storybook/cypress/fixtures/components.json
-/results
-/log
diff --git a/packages/react/.percy.json b/packages/react/.percy.json
deleted file mode 100644
index 09fac6a303a..00000000000
--- a/packages/react/.percy.json
+++ /dev/null
@@ -1,15 +0,0 @@
-{
-    "version": 2,
-    "snapshot": {
-      "widths": [
-        320,
-        1280
-      ],
-      "min-height": 800,
-      "enable-javascript": true
-    },
-    "discovery": {
-      "network-idle-timeout": 250
-    }
-}
-  
\ No newline at end of file
diff --git a/packages/react/.storybook/.babelrc.js b/packages/react/.storybook/.babelrc.js
deleted file mode 100644
index bbb9f652a3d..00000000000
--- a/packages/react/.storybook/.babelrc.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 path = require('path');
-const babelConfigFile = require('../babel.config');
-
-const root = path.resolve(__dirname, '../');
-const babelConfig = Object.keys(babelConfigFile).reduce((acc, key) => {
-  const options = babelConfigFile[key].map((option) => {
-    // If the preset/plugin is not a relative path, we can use it directly
-    if (option[0] !== '.') {
-      return option;
-    }
-    // Otherwise, resolve the full path for storybook to work as intended
-    return path.resolve(root, option);
-  });
-
-  return {
-    ...acc,
-    [key]: options,
-  };
-}, {});
-
-babelConfig.plugins.push('transform-inline-environment-variables');
-
-module.exports = babelConfig;
diff --git a/packages/react/.storybook/Container.js b/packages/react/.storybook/Container.js
deleted file mode 100644
index 06e6e3abd0f..00000000000
--- a/packages/react/.storybook/Container.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 cx from 'classnames';
-import React, { Component } from 'react';
-import './_container.scss';
-import { settings } from 'carbon-components';
-
-/**
- * @param {Element} elem An element.
- * @param {string[]} props CSS property names.
- * @returns {object<string, any>}
- *   The key-value pair of CSS property name/value.
- *   Used primary for integration testing.
- */
-window.getStyleValues = function getStyleValues(elem, props) {
-  const computedStyle = elem.ownerDocument.defaultView.getComputedStyle(elem);
-  return props.reduce(
-    (acc, prop) => ({
-      ...acc,
-      [prop]: computedStyle.getPropertyValue(prop),
-    }),
-    {}
-  );
-};
-
-const { prefix } = settings;
-export default class Container extends Component {
-  componentDidMount() {
-    const params = new URLSearchParams(window.location.search);
-
-    if (params.has('theme')) {
-      const theme = params.get('theme');
-      document.body.classList.add(`dds-theme-zone-${theme}`);
-    }
-
-    if (typeof STORYBOOK_USE_RTL !== 'undefined' && STORYBOOK_USE_RTL) {
-      document.documentElement.dir = 'rtl';
-      document.getElementsByTagName('html')[0].setAttribute('dir', 'rtl');
-    }
-  }
-
-  render() {
-    const { parameters, story } = this.props;
-    const classes = cx({
-      'storybook-proxy-story': parameters.proxy,
-    });
-
-    return (
-      <React.StrictMode>
-        <div data-floating-menu-container="" role="main" className={classes}>
-          {story()}
-        </div>
-      </React.StrictMode>
-    );
-  }
-}
diff --git a/packages/react/.storybook/_container.scss b/packages/react/.storybook/_container.scss
deleted file mode 100644
index e41731585ca..00000000000
--- a/packages/react/.storybook/_container.scss
+++ /dev/null
@@ -1,100 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 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.
-//
-
-// IMPORTANT: This import path should _not_ be used outside our source tree
-// as `src` directory is _not_ meant to be shipped in our NPM package.
-// Use e.g. `@import '~carbon-components/scss/globals/scss/styles.scss'` instead.
-// @import '~carbon-components/src/globals/scss/styles.scss'; // SEE THE NOTE ABOVE
-
-// Carbon fonts
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@import '@carbon/type/scss/font-face/serif';
-@import '@carbon/type/scss/reset';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@include carbon--font-face-serif();
-@include carbon--type-reset();
-
-@import '@carbon/layout/scss/breakpoint';
-
-@import '../../styles/scss/ibm-dotcom-styles.scss';
-
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-
-:root {
-  @include carbon--theme($carbon--theme--white, true);
-
-  height: 100%;
-}
-
-:root[storybook-carbon-theme='g10'] {
-  @include carbon--theme($carbon--theme--g10, true);
-}
-
-:root[storybook-carbon-theme='g90'] {
-  @include carbon--theme($carbon--theme--g90, true);
-}
-
-:root[storybook-carbon-theme='g100'] {
-  @include carbon--theme($carbon--theme--g100, true);
-}
-
-body {
-  background-color: $ui-background;
-  color: $text-01;
-  height: 100%;
-}
-
-#root,
-div[role='main'] {
-  height: 100%;
-}
-
-// Storybook styles
-.storybook-center-container {
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  @include carbon--breakpoint(lg) {
-    padding: 3rem;
-  }
-}
-
-.storybook-readme-story {
-  width: 100%;
-}
-
-.storybook-proxy-story {
-  padding: 1rem;
-}
-
-// hide the cookie button
-#teconsent {
-  visibility: hidden;
-}
-
-// Fixes the README docs styles
-#docs-root {
-  ul {
-    list-style: disc;
-
-    ul {
-      list-style: circle;
-    }
-  }
-
-  ol {
-    list-style: decimal;
-  }
-}
-
-.bx--grid--card {
-  padding-top: 1rem;
-}
diff --git a/packages/react/.storybook/main.js b/packages/react/.storybook/main.js
deleted file mode 100644
index ac869a36703..00000000000
--- a/packages/react/.storybook/main.js
+++ /dev/null
@@ -1,183 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 path = require('path');
-const webpack = require('webpack');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const TerserPlugin = require('terser-webpack-plugin');
-const rtlcss = require('rtlcss');
-
-const NODE_ENV = 'development';
-
-/**
- * Flag to switch to use the miniextract plugin
- *
- * @type {boolean}
- */
-const useExternalCss = process.env.STORYBOOK_USE_EXTERNAL_CSS === 'true';
-
-/**
- * Determines if sourcemaps should be turned on or off
- *
- * @type {boolean}
- */
-const useStyleSourceMap = process.env.STORYBOOK_SOURCEMAPS === 'true';
-
-/**
- * Sets the document direction (https://developer.mozilla.org/en-US/docs/Web/API/Document/dir)
- *
- * @type {boolean}
- */
-const useRtl = process.env.STORYBOOK_USE_RTL === 'true';
-
-const styleLoaders = [
-  {
-    loader: 'css-loader',
-    options: {
-      importLoaders: 2,
-      sourceMap: useStyleSourceMap,
-    },
-  },
-  {
-    loader: 'postcss-loader',
-    options: {
-      plugins: () => {
-        const autoPrefixer = require('autoprefixer')({
-          overrideBrowserslist: ['last 1 version', 'ie >= 11'],
-        });
-        return !useRtl ? [autoPrefixer] : [autoPrefixer, rtlcss];
-      },
-      sourceMap: useStyleSourceMap,
-    },
-  },
-];
-
-module.exports = {
-  stories: [
-    '../docs/*.mdx',
-    '../src/**/*.stories.js',
-    '../src/**/*.stories.mdx',
-  ],
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-knobs',
-    '@storybook/addon-storysource',
-    '@carbon/storybook-addon-theme/es/register',
-  ],
-  framework: '@storybook/react',
-  webpack: async (config, { configType }) => {
-    config.devtool = configType === 'DEVELOPMENT' ? 'source-map' : '';
-    config.optimization = {
-      ...config.optimization,
-      splitChunks: {
-        chunks: 'all',
-        minSize: 30 * 1024,
-        maxSize: 1024 * 1024,
-      },
-      minimizer: [
-        new TerserPlugin({
-          minify: TerserPlugin.esbuildMinify,
-          sourceMap: useStyleSourceMap,
-          terserOptions: {
-            minify: true,
-          },
-        }),
-      ],
-    };
-
-    config.module.rules.push({
-      test: /.stories\.jsx?$/,
-      use: [
-        {
-          loader: require.resolve('@storybook/source-loader'),
-          options: {
-            prettierConfig: {
-              parser: 'babylon',
-              printWidth: 80,
-              tabWidth: 2,
-              bracketSpacing: true,
-              trailingComma: 'es5',
-              singleQuote: true,
-            },
-          },
-        },
-      ],
-      enforce: 'pre',
-    });
-
-    const sassLoader = {
-      loader: 'sass-loader',
-      options: {
-        includePaths: [
-          path.resolve(__dirname, '..', 'node_modules'),
-          path.resolve(__dirname, '../../../', 'node_modules'),
-        ],
-        data: `
-          $feature-flags: (
-            enable-css-custom-properties: true
-          );
-        `,
-        sourceMap: useStyleSourceMap,
-      },
-    };
-
-    const fastSassLoader = {
-      loader: 'fast-sass-loader',
-      options: {
-        includePaths: [
-          path.resolve(__dirname, '..', 'node_modules'),
-          path.resolve(__dirname, '../../../', 'node_modules'),
-        ],
-        data: `
-        $feature-flags: (
-          enable-css-custom-properties: true
-        );
-      `,
-      },
-    };
-
-    config.module.rules.push({
-      test: /\.scss$/,
-      sideEffects: true,
-      use: [
-        'cache-loader',
-        {
-          loader: useExternalCss ? MiniCssExtractPlugin.loader : 'style-loader',
-        },
-        ...styleLoaders,
-        NODE_ENV === 'production' ? sassLoader : fastSassLoader,
-      ],
-    });
-
-    config.plugins.push(
-      new webpack.EnvironmentPlugin({
-        TRANSLATION_HOST: '',
-        STORYBOOK_USE_RTL: false,
-      }),
-      new webpack.DefinePlugin({
-        STORYBOOK_USE_RTL: useRtl,
-      })
-    );
-
-    if (useExternalCss) {
-      config.plugins.push(
-        new MiniCssExtractPlugin({
-          filename: '[name].[contenthash].css',
-        })
-      );
-    }
-
-    config.resolve = {
-      modules: ['node_modules'],
-    };
-
-    return config;
-  },
-};
diff --git a/packages/react/.storybook/manager-head.html b/packages/react/.storybook/manager-head.html
deleted file mode 100644
index 93f19be7657..00000000000
--- a/packages/react/.storybook/manager-head.html
+++ /dev/null
@@ -1,63 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<meta
-  name="keywords"
-  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js"
-/>
-<meta
-  name="description"
-  content="A collection of IBM.com components and patterns implemented using React and Carbon Design System."
-/>
-
-<!-- Open Graph -->
-<meta property="og:title" content="Carbon for IBM.com React" />
-<meta property="og:site_name" content="Carbon for IBM.com React" />
-<meta
-  property="og:description"
-  content="A collection of IBM.com components and patterns implemented using React and Carbon Design System."
-/>
-<meta
-  property="og:image"
-  content="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/i/carbon-for-ibmcom-react.png"
-/>
-<meta property="og:url" content="https://www.ibm.com/standards/carbon/react" />
-
-<!-- Social -->
-<meta name="twitter:card" content="summary_large_image" />
-<meta name="twitter:image:alt" content="Carbon for IBM.com" />
-<meta name="twitter:site" content="@_IBM" />
-
-<!-- Storybook override -->
-<script>
-  document.title = 'Carbon for IBM.com React';
-</script>
-
-<!-- Minimum setting to use IBM Plex font -->
-<style type="text/css">
-  @font-face {
-    font-weight: 400;
-    font-family: 'IBM Plex Sans';
-    font-style: normal;
-    src: local('IBM Plex Sans'), local('IBMPlexSans'),
-      url(https://1www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff)
-        format('woff');
-    font-display: auto;
-  }
-
-  @font-face {
-    font-weight: 600;
-    font-family: 'IBM Plex Sans';
-    font-style: normal;
-    src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-      url(https://1www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff)
-        format('woff');
-    font-display: auto;
-  }
-</style>
diff --git a/packages/react/.storybook/manager.js b/packages/react/.storybook/manager.js
deleted file mode 100644
index 276fb40050d..00000000000
--- a/packages/react/.storybook/manager.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { addons } from '@storybook/addons';
-import yourTheme from './theme';
-
-addons.setConfig({
-  theme: yourTheme,
-});
-
-/**
- * Conditionally generate CSS to hide a component based on its corresponding
- * feature flag environment variable.
- *
- * @param {*} envVar
- *   Environment variable to check.
- * @param {*} cssId
- *   CSS ID for selector.
- * @returns
- */
-const getCss = (envVar, cssId) => {
-  return envVar !== 'true'
-    ? `button[id^="${cssId}"] { display: none !important; }\n`
-    : '';
-};
-
-// Build string of CSS rules.
-let css = '';
-if (!process.env.DDS_FLAGS_ALL) {
-  css += getCss(process.env.DDS_AUDIO_PLAYER, 'components-audio-player');
-  css += getCss(
-    process.env.DDS_CONTENT_BLOCK_HEADLINES,
-    'components-content-block-headlines'
-  );
-  css += getCss(
-    process.env.DDS_LEADSPACE_WITH_SEARCH,
-    'components-lead-space-with-search'
-  );
-  css += getCss(process.env.DDS_NOTICE_CHOICE, 'components-notice-choice');
-}
-
-// Inject any CSS rules into the page.
-if (css.length) {
-  const head = document.head || document.getElementsByTagName('head')[0];
-  const style = document.createElement('style');
-  head.appendChild(style);
-  style.appendChild(document.createTextNode(css));
-}
diff --git a/packages/react/.storybook/preview-head.html b/packages/react/.storybook/preview-head.html
deleted file mode 100755
index 56e595c422f..00000000000
--- a/packages/react/.storybook/preview-head.html
+++ /dev/null
@@ -1,772 +0,0 @@
-<!-- Americas -->
-<link
-  rel="alternate"
-  hreflang="en-ag"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ag&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ai"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ai&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-aw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=aw&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bb"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bb&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bm"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bm&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bs"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bs&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ca"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-cw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cw&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-dm"
-  href="iframe.html?id=components-dotcom-shell--default&cc=dm&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-gd"
-  href="iframe.html?id=components-dotcom-shell--default&cc=gd&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-gy"
-  href="iframe.html?id=components-dotcom-shell--default&cc=gy&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-jm"
-  href="iframe.html?id=components-dotcom-shell--default&cc=jm&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ky"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ky&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ms"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ms&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-tc"
-  href="iframe.html?id=components-dotcom-shell--default&cc=tc&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-tt"
-  href="iframe.html?id=components-dotcom-shell--default&cc=tt&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-us"
-  href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-vc"
-  href="iframe.html?id=components-dotcom-shell--default&cc=vc&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-vg"
-  href="iframe.html?id=components-dotcom-shell--default&cc=vg&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="es-ar"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ar&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-bo"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bo&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-cl"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cl&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-co"
-  href="iframe.html?id=components-dotcom-shell--default&cc=co&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-cr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cr&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-ec"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ec&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-mx"
-  href="iframe.html?id=components-dotcom-shell--default&cc=mx&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-pe"
-  href="iframe.html?id=components-dotcom-shell--default&cc=pe&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-py"
-  href="iframe.html?id=components-dotcom-shell--default&cc=py&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-uy"
-  href="iframe.html?id=components-dotcom-shell--default&cc=uy&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="es-ve"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ve&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-ca"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="pt-br"
-  href="iframe.html?id=components-dotcom-shell--default&cc=br&lc=pt"
-/>
-<link
-  rel="alternate"
-  hreflang="x-defult"
-  href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en"
-/>
-
-<!-- Asia Pacific -->
-<link
-  rel="alternate"
-  hreflang="en-au"
-  href="iframe.html?id=components-dotcom-shell--default&cc=au&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bd"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bd&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-hk"
-  href="iframe.html?id=components-dotcom-shell--default&cc=hk&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-id"
-  href="iframe.html?id=components-dotcom-shell--default&cc=id&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-in"
-  href="iframe.html?id=components-dotcom-shell--default&cc=in&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-kh"
-  href="iframe.html?id=components-dotcom-shell--default&cc=kh&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-kn"
-  href="iframe.html?id=components-dotcom-shell--default&cc=kn&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-lc"
-  href="iframe.html?id=components-dotcom-shell--default&cc=lc&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-lk"
-  href="iframe.html?id=components-dotcom-shell--default&cc=lk&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-my"
-  href="iframe.html?id=components-dotcom-shell--default&cc=my&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-np"
-  href="iframe.html?id=components-dotcom-shell--default&cc=np&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-nz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=nz&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ph"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ph&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-sg"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sg&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-th"
-  href="iframe.html?id=components-dotcom-shell--default&cc=th&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-vn"
-  href="iframe.html?id=components-dotcom-shell--default&cc=vn&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="ja-jp"
-  href="iframe.html?id=components-dotcom-shell--default&cc=jp&lc=ja"
-/>
-<link
-  rel="alternate"
-  hreflang="ko-kr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=kr&lc=ko"
-/>
-<link
-  rel="alternate"
-  hreflang="zh-cn"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cn&lc=zh"
-/>
-<link
-  rel="alternate"
-  hreflang="zh-tw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=tw&lc=zh"
-/>
-
-<!-- Europe -->
-<!-- <link
-  rel="alternate"
-  hreflang="de-at"
-  href="iframe.html?id=components-dotcom-shell--default&cc=at&lc=de"
-/>
-<link
-  rel="alternate"
-  hreflang="de-ch"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ch&lc=de"
-/>
-<link
-  rel="alternate"
-  hreflang="de-de"
-  href="iframe.html?id=components-dotcom-shell--default&cc=de&lc=de"
-/>
-<link
-  rel="alternate"
-  hreflang="en-be"
-  href="iframe.html?id=components-dotcom-shell--default&cc=be&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bg"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bg&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-cy"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cy&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-cz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cz&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-dk"
-  href="iframe.html?id=components-dotcom-shell--default&cc=dk&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ee"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ee&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-fi"
-  href="iframe.html?id=components-dotcom-shell--default&cc=fi&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-gb"
-  href="iframe.html?id=components-dotcom-shell--default&cc=uk&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-gr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=gr&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-hr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=hr&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-hu"
-  href="iframe.html?id=components-dotcom-shell--default&cc=hu&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ie"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ie&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-kz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=kz&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-lt"
-  href="iframe.html?id=components-dotcom-shell--default&cc=lt&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-lv"
-  href="iframe.html?id=components-dotcom-shell--default&cc=lv&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-nl"
-  href="iframe.html?id=components-dotcom-shell--default&cc=nl&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-no"
-  href="iframe.html?id=components-dotcom-shell--default&cc=no&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-pt"
-  href="iframe.html?id=components-dotcom-shell--default&cc=pt&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ro"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ro&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-rs"
-  href="iframe.html?id=components-dotcom-shell--default&cc=rs&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-se"
-  href="iframe.html?id=components-dotcom-shell--default&cc=se&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-si"
-  href="iframe.html?id=components-dotcom-shell--default&cc=si&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-sk"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sk&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ua"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ua&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-uz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=uz&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="es-es"
-  href="iframe.html?id=components-dotcom-shell--default&cc=es&lc=es"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-ch"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ch&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-fr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=fr&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="it-it"
-  href="iframe.html?id=components-dotcom-shell--default&cc=it&lc=it"
-/>
-<link
-  rel="alternate"
-  hreflang="pl-pl"
-  href="iframe.html?id=components-dotcom-shell--default&cc=pl&lc=pl"
-/>
-<link
-  rel="alternate"
-  hreflang="pt-pt"
-  href="iframe.html?id=components-dotcom-shell--default&cc=pt&lc=pt"
-/>
-<link
-  rel="alternate"
-  hreflang="ru-ru"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ru&lc=ru"
-/>
-<link
-  rel="alternate"
-  hreflang="tr-tr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=tr&lc=tr"
-/> -->
-
-<!-- Middle East and Africa -->
-<link
-  rel="alternate"
-  hreflang="ar-ae"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=ar"
-/>
-<link
-  rel="alternate"
-  hreflang="ar-sa"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=ar"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ae"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-af"
-  href="iframe.html?id=components-dotcom-shell--default&cc=af&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bh"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bh&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bn"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bn&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-bw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bw&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-eg"
-  href="iframe.html?id=components-dotcom-shell--default&cc=eg&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-et"
-  href="iframe.html?id=components-dotcom-shell--default&cc=et&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-gh"
-  href="iframe.html?id=components-dotcom-shell--default&cc=gh&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-il"
-  href="iframe.html?id=components-dotcom-shell--default&cc=il&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-iq"
-  href="iframe.html?id=components-dotcom-shell--default&cc=iq&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-jo"
-  href="iframe.html?id=components-dotcom-shell--default&cc=jo&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ke"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ke&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-kw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=kw&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-lb"
-  href="iframe.html?id=components-dotcom-shell--default&cc=lb&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ly"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ly&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-mw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=mw&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-na"
-  href="iframe.html?id=components-dotcom-shell--default&cc=na&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ng"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ng&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-om"
-  href="iframe.html?id=components-dotcom-shell--default&cc=om&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-pk"
-  href="iframe.html?id=components-dotcom-shell--default&cc=pk&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-qa"
-  href="iframe.html?id=components-dotcom-shell--default&cc=qa&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-sa"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-sl"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sl&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-sr"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sr&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-tz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=tz&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ug"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ug&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-ye"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ye&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-za"
-  href="iframe.html?id=components-dotcom-shell--default&cc=za&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-zm"
-  href="iframe.html?id=components-dotcom-shell--default&cc=zm&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="en-zw"
-  href="iframe.html?id=components-dotcom-shell--default&cc=zw&lc=en"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-bf"
-  href="iframe.html?id=components-dotcom-shell--default&cc=bf&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-cd"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cd&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-cg"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cg&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-ci"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ci&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-cm"
-  href="iframe.html?id=components-dotcom-shell--default&cc=cm&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-dz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=dz&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-ga"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ga&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-ma"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ma&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-mg"
-  href="iframe.html?id=components-dotcom-shell--default&cc=mg&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-mu"
-  href="iframe.html?id=components-dotcom-shell--default&cc=mu&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-ne"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ne&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-sc"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sc&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-sn"
-  href="iframe.html?id=components-dotcom-shell--default&cc=sn&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-td"
-  href="iframe.html?id=components-dotcom-shell--default&cc=td&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="fr-tn"
-  href="iframe.html?id=components-dotcom-shell--default&cc=tn&lc=fr"
-/>
-<link
-  rel="alternate"
-  hreflang="pt-ao"
-  href="iframe.html?id=components-dotcom-shell--default&cc=ao&lc=pt"
-/>
-<link
-  rel="alternate"
-  hreflang="pt-mz"
-  href="iframe.html?id=components-dotcom-shell--default&cc=mz&lc=pt"
-/>
-
-<link
-  rel="stylesheet"
-  href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/themes.css"
-/>
-
-<script>
-  window.digitalData = window.digitalData || {
-    page: {
-      category: {
-        primaryCategory: '',
-      },
-      pageInfo: {
-        effectiveDate: '',
-        expiryDate: '',
-        language: 'en-US',
-        publishDate: '',
-        publisher: '',
-        version: 'Carbon for IBM.com',
-        ibm: {
-          contentDelivery: '',
-          contentProducer: '',
-          country: 'US',
-          industry: '',
-          owner: '',
-          siteID: '',
-          subject: '',
-          type: '',
-        },
-      },
-      isDataLayerReady: true,
-    },
-  };
-
-  var params = new URLSearchParams(window.location.search);
-
-  if (params.has('lc')) {
-    var currentLang = params.get('lc');
-    if (params.has('cc')) {
-      currentLang += '-' + params.get('cc').toUpperCase();
-      digitalData.page.pageInfo.ibm.country = params.get('cc').toUpperCase();
-    } else {
-      digitalData.page.pageInfo.ibm.country = '';
-    }
-    document.getElementsByTagName('html')[0].setAttribute('lang', currentLang);
-    digitalData.page.pageInfo.language = currentLang;
-  }
-</script>
-
-<!-- IBM Tag Management and Site Analytics -->
-<!--<script src="//1.www.s81c.com/common/stats/ibm-common.js" defer></script>-->
-
-<style>
-  @media only percy {
-    [data-autoid='dds--privacy-cp'] {
-      display: none !important;
-    }
-
-    .bx--link-list__list--video,
-    .bx--video-player,
-    .bx--card__video {
-      display: none !important;
-    }
-
-    /* hiding elements with sameHeight in long pages to prevent percy
-    false positives */
-    [data-autoid='dds--dotcom-shell__content']
-      [data-autoid='dds--cta-section']
-      [data-autoid='dds--content-item'],
-    [data-autoid='dds--content-block-mixed']
-      [data-autoid='dds--content-group-cards'] {
-      display: none !important;
-    }
-  }
-</style>
diff --git a/packages/react/.storybook/preview.js b/packages/react/.storybook/preview.js
deleted file mode 100644
index 702e4114aec..00000000000
--- a/packages/react/.storybook/preview.js
+++ /dev/null
@@ -1,105 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 addons from '@storybook/addons';
-import { CURRENT_THEME } from '@carbon/storybook-addon-theme/es/shared';
-import Container from './Container';
-import { knob } from '@storybook/addon-knobs';
-
-const SORT_ORDER_GROUP = ['Overview', 'Components'];
-
-const SORT_ORDER = [
-  'overview-getting-started--page',
-  'overview-building-for-ibm-dot-com--page',
-  'overview-environment-variables--page',
-  'overview-feature-flags--page',
-  'overview-enable-right-to-left-rtl--page',
-  'overview-contributing-to-the-react-package--page',
-  'overview-breaking-changes--page',
-];
-
-export const parameters = {
-  layout: 'fullscreen',
-  controls: { disabled: true },
-  actions: { disabled: true },
-  options: {
-    storySort(lhs, rhs) {
-      const [lhsId, lhsMeta] = lhs;
-      const [rhsId, rhsMeta] = rhs;
-      const lhsSortOrder = SORT_ORDER.indexOf(lhsId);
-      const rhsSortOrder = SORT_ORDER.indexOf(rhsId);
-      if (lhsSortOrder >= 0 && rhsSortOrder >= 0) {
-        return lhsSortOrder - rhsSortOrder;
-      }
-      const { kind: lhsKind } = lhsMeta;
-      const { kind: rhsKind } = rhsMeta;
-      const lhsGroup = lhsKind.split('|')[0];
-      const rhsGroup = rhsKind.split('|')[0];
-      const lhsGroupSortOrder = SORT_ORDER_GROUP.indexOf(lhsGroup);
-      const rhsGroupSortOrder = SORT_ORDER_GROUP.indexOf(rhsGroup);
-      if (lhsGroupSortOrder >= 0 && rhsGroupSortOrder >= 0) {
-        return lhsGroupSortOrder - rhsGroupSortOrder;
-      }
-      return 0;
-    },
-  },
-};
-
-let preservedTheme;
-
-export const decorators = [
-  (story, { parameters }) => {
-    const root = document.documentElement;
-    if (parameters['carbon-theme']?.disabled) {
-      root.setAttribute('storybook-carbon-theme', '');
-    } else {
-      root.setAttribute('storybook-carbon-theme', preservedTheme || '');
-    }
-    return story();
-  },
-  (story, { parameters }) => {
-    return <Container story={story} parameters={parameters}></Container>;
-  },
-];
-
-addons.getChannel().on(CURRENT_THEME, (theme) => {
-  document.documentElement.setAttribute(
-    'storybook-carbon-theme',
-    (preservedTheme = theme)
-  );
-  addons.getChannel().emit(coreEvents.FORCE_RE_RENDER);
-});
-
-// Reset knobs when changing stories to prevent them carrying over.
-// This can be removed when stories switch to controls.
-// https://github.com/storybookjs/addon-knobs/issues/19
-let currentPath;
-if (window.parent) {
-  const parentWindow = window.parent;
-  parentWindow.setInterval(function () {
-    const urlParams = new URLSearchParams(parentWindow.location.search);
-    const path = urlParams.get('path');
-    if (path && path !== currentPath) {
-      currentPath = path;
-
-      const knobButtons = parentWindow.document.querySelectorAll(
-        '#panel-tab-content button'
-      );
-      if (knobButtons) {
-        const resetButton = knobButtons[knobButtons.length - 1];
-        if (resetButton) resetButton.click();
-      }
-    }
-    const knobLabel = parentWindow.document.querySelector(
-      '[id*="tabbutton-knobs-"]'
-    );
-    if (knobLabel) {
-      knobLabel.textContent = 'Knobs';
-    }
-  }, 100);
-}
diff --git a/packages/react/.storybook/settings.js b/packages/react/.storybook/settings.js
deleted file mode 100644
index d6d2f9c707d..00000000000
--- a/packages/react/.storybook/settings.js
+++ /dev/null
@@ -1,4 +0,0 @@
-const settings = {
-  prefix: 'bx',
-};
-module.exports = settings;
diff --git a/packages/react/.storybook/theme.js b/packages/react/.storybook/theme.js
deleted file mode 100644
index 3790e328985..00000000000
--- a/packages/react/.storybook/theme.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @license
- *
- * 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 { create } from '@storybook/theming';
-import packageJson from '../package.json';
-
-export default create({
-  base: 'light',
-  brandTitle: `Carbon for IBM.com React v${packageJson.version}`,
-  brandUrl:
-    'https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react',
-  fontBase: '"IBM Plex Sans", "Helvetica Neue", Arial, sans-serif',
-  fontCode:
-    '"IBM Plex Mono", Menlo, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", Courier, monospace',
-});
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
deleted file mode 100644
index 1fc6feab4d7..00000000000
--- a/packages/react/CHANGELOG.md
+++ /dev/null
@@ -1,5059 +0,0 @@
-# Change Log
-
-All notable changes to this project will be documented in this file.
-See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.53.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.53.0-rc.2...@carbon/ibmdotcom-react@1.53.0) (2023-11-15)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.53.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.53.0-rc.1...@carbon/ibmdotcom-react@1.53.0-rc.2) (2023-11-06)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.53.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.52.0-rc.1...@carbon/ibmdotcom-react@1.53.0-rc.1) (2023-11-02)
-
-
-### Bug Fixes
-
-* **masthead-a11y:** navigation role do not have unique labels ([#10881](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10881)) ([2c9d0ab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2c9d0ab2ea97e6cdce58c41a677714077196b480))
-
-
-
-
-
-# [1.53.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.52.0-rc.1...@carbon/ibmdotcom-react@1.53.0-rc.0) (2023-10-30)
-
-
-### Bug Fixes
-
-* **masthead-a11y:** navigation role do not have unique labels ([#10881](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10881)) ([2c9d0ab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2c9d0ab2ea97e6cdce58c41a677714077196b480))
-
-
-
-
-
-# [1.52.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.52.0-rc.0...@carbon/ibmdotcom-react@1.52.0-rc.1) (2023-10-12)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.52.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.51.1-rc.0...@carbon/ibmdotcom-react@1.52.0-rc.0) (2023-10-03)
-
-
-### Bug Fixes
-
-* **masthead:** add high contrast styles for ibm logo ([#10988](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10988)) ([c5331f2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c5331f2ec063676d2efe07d05b07cd1e5a7063dc)), closes [#10977](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10977)
-
-
-
-
-
-## [1.51.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.51.0...@carbon/ibmdotcom-react@1.51.1-rc.0) (2023-09-25)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.51.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.51.0-rc.0...@carbon/ibmdotcom-react@1.51.0) (2023-09-19)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.51.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.50.0...@carbon/ibmdotcom-react@1.51.0-rc.0) (2023-09-06)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.50.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.50.0-rc.2...@carbon/ibmdotcom-react@1.50.0) (2023-08-22)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.50.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.50.0-rc.1...@carbon/ibmdotcom-react@1.50.0-rc.2) (2023-08-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.50.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.50.0-rc.0...@carbon/ibmdotcom-react@1.50.0-rc.1) (2023-08-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.50.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.49.0...@carbon/ibmdotcom-react@1.50.0-rc.0) (2023-08-14)
-
-
-### Bug Fixes
-
-* **deps:** update dependency carbon-components to v10.58.8 ([#10690](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10690)) ([c22052d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c22052dbd218d2e6d968515982bd2369e0d4733b))
-
-
-
-
-
-# [1.49.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.49.0-rc.0...@carbon/ibmdotcom-react@1.49.0) (2023-07-26)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.49.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.48.0...@carbon/ibmdotcom-react@1.49.0-rc.0) (2023-07-11)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.48.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.48.0-rc.3...@carbon/ibmdotcom-react@1.48.0) (2023-06-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.48.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.48.0-rc.2...@carbon/ibmdotcom-react@1.48.0-rc.3) (2023-06-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.48.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.48.0-rc.1...@carbon/ibmdotcom-react@1.48.0-rc.2) (2023-06-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.48.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.48.0-rc.0...@carbon/ibmdotcom-react@1.48.0-rc.1) (2023-06-22)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.48.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.47.0...@carbon/ibmdotcom-react@1.48.0-rc.0) (2023-06-09)
-
-
-### Bug Fixes
-
-* **deps:** update dependency carbon-components to v10.58.7 ([#10490](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10490)) ([1902578](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1902578d1f724921ddc0787d81b326ed614078d1))
-* **geolocation:** remove geolocation utility, replace with new DDO service method - getLocation ([#10547](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10547)) ([558faaf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/558faaf3b7004d5639f74e922497d106e99fe0bf)), closes [#10546](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10546)
-
-
-
-
-
-# [1.47.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.47.0-rc.2...@carbon/ibmdotcom-react@1.47.0) (2023-05-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.47.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.47.0-rc.1...@carbon/ibmdotcom-react@1.47.0-rc.2) (2023-05-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.47.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.47.0-rc.0...@carbon/ibmdotcom-react@1.47.0-rc.1) (2023-05-11)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.47.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.46.0-rc.0...@carbon/ibmdotcom-react@1.47.0-rc.0) (2023-05-08)
-
-
-### Features
-
-* **e2e:** introducing parallelization  ([#10314](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10314)) ([eb6f61f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eb6f61f68bf02080881b45ff935340a7fa4e6328)), closes [#9093](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9093) [#8814](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8814)
-
-
-
-
-
-# [1.46.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.46.0-rc.1...@carbon/ibmdotcom-react@1.46.0) (2023-04-25)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.46.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.46.0-rc.0...@carbon/ibmdotcom-react@1.46.0-rc.1) (2023-04-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.46.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.45.0...@carbon/ibmdotcom-react@1.46.0-rc.0) (2023-04-11)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.45.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.45.0-rc.3...@carbon/ibmdotcom-react@1.45.0) (2023-03-28)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.45.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.45.0-rc.2...@carbon/ibmdotcom-react@1.45.0-rc.3) (2023-03-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.45.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.45.0-rc.1...@carbon/ibmdotcom-react@1.45.0-rc.2) (2023-03-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.45.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.45.0-rc.0...@carbon/ibmdotcom-react@1.45.0-rc.1) (2023-03-16)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.45.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.44.0...@carbon/ibmdotcom-react@1.45.0-rc.0) (2023-03-13)
-
-
-### Bug Fixes
-
-* **deps:** update dependency carbon-components to v10.58.6 ([#10062](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10062)) ([0ebdc34](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0ebdc34b509c24e6acd7593ba3b7374ad7b44eb0))
-* **leadspace-search:**  clear button ([#10176](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10176)) ([910ea47](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/910ea4777d0638679893bacb520f1e13829970af)), closes [#9860](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9860)
-
-
-
-
-
-# [1.44.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.44.0-rc.0...@carbon/ibmdotcom-react@1.44.0) (2023-02-28)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.44.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.43.0...@carbon/ibmdotcom-react@1.44.0-rc.0) (2023-02-10)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.43.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.43.0-rc.0...@carbon/ibmdotcom-react@1.43.0) (2023-01-31)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.43.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.42.0...@carbon/ibmdotcom-react@1.43.0-rc.0) (2023-01-25)
-
-
-### Bug Fixes
-
-* **masthead:** update logo url protocol ([#9914](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9914)) ([ece8c04](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ece8c0426bb222341b2ddd423498fcb9b899e7dc)), closes [#9567](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9567)
-
-
-### Features
-
-* **button-group:** update button type order ([#9884](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9884)) ([56a43dc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/56a43dcd72fe67d4d417c2e711499c7c922e066b)), closes [#9831](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9831)
-
-
-
-
-
-# [1.42.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.42.0-rc.0...@carbon/ibmdotcom-react@1.42.0) (2023-01-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.42.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.41.0...@carbon/ibmdotcom-react@1.42.0-rc.0) (2023-01-04)
-
-
-### Features
-
-* **content-section:** combining components ([#9348](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9348)) ([ebfb388](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ebfb388bb09a254ba1bcbb845be371eae4a871af)), closes [#8843](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8843)
-
-
-
-
-
-# [1.41.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.41.0-rc.2...@carbon/ibmdotcom-react@1.41.0) (2022-12-06)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.41.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.41.0-rc.1...@carbon/ibmdotcom-react@1.41.0-rc.2) (2022-12-06)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.41.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.41.0-rc.0...@carbon/ibmdotcom-react@1.41.0-rc.1) (2022-11-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.41.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.40.0...@carbon/ibmdotcom-react@1.41.0-rc.0) (2022-11-22)
-
-
-### Bug Fixes
-
-* **deps:** update dependency carbon-components ([#9642](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9642)) ([66caa62](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/66caa62bda65e4a704ad352cb090156828b23d09))
-
-
-### Features
-
-* china PIPL notice for react notice and choice ([#9606](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9606)) ([be01818](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be0181898e013d6ae179f92da73dc44aaa36cf19))
-
-
-
-
-
-# [1.40.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.40.0-rc.0...@carbon/ibmdotcom-react@1.40.0) (2022-11-08)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.40.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.39.0...@carbon/ibmdotcom-react@1.40.0-rc.0) (2022-10-31)
-
-
-### Bug Fixes
-
-* **a11y:** allow localized labels for rewind/forward/caption buttons ([#9452](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9452)) ([e7b33d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e7b33d8cc8790eb8712422fa5e7d182e3c275c78))
-* indexed external docs paths ([#9448](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9448)) ([f96b0b9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f96b0b9efe81a96a0be845e344cb3582f7814ff7))
-* **LocaleModal:** assign focus on modal close to avoid focus being stuck on VO ([#9449](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9449)) ([da393d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da393d7efaa02fa1e90bec30d6483c15eed292d8)), closes [#8898](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8898) [#8574](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8574)
-* **MastheadLeftNav:** trap focus to mobile masthead on VO ([#9454](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9454)) ([af28f3e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/af28f3e3c2460ac494ae9882cb33cec032cc149c)), closes [#8557](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8557)
-* **notice-choice:** update callback functions ([#9421](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9421)) ([c11ac04](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c11ac046f16b1388f5b775196bd12afee6a16d07))
-* **react:** storybook experimental/rtl gh-pages ([#9455](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9455)) ([93ed6c4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/93ed6c44841fdb1c413019d0ecf24a3c42731626))
-* **storybook:** improve feature flags granularity ([#9568](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9568)) ([3434803](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3434803765775a91173acd14039a8516c7b58474))
-* **storybook:** react/wc experimental ([#9450](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9450)) ([07dbab6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07dbab6dcfd6f0abffd8c7a40acb9c5563b8fccc))
-* **text-cta:** add visually-hidden helper text ([#9461](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9461)) ([e1cb87b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e1cb87b1170de185f03a39a1308a7b14cfa4291a)), closes [#8296](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8296)
-* **VideoPlayer:** pass custom caption to LightboxMediaViewer ([#9458](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9458)) ([79930cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/79930cf4716b462960e3d4e3e6a84823604e4183)), closes [#8283](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8283)
-
-
-### Features
-
-* **content-item-horizontal:** update spacing and add media option to default ([#9475](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9475)) ([ce15cde](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ce15cdec03f56cb91d8364e6a51541a9327001a8)), closes [#9436](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9436)
-
-
-
-
-
-# [1.39.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.39.0-rc.0...@carbon/ibmdotcom-react@1.39.0) (2022-10-10)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.39.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.38.0-rc.0...@carbon/ibmdotcom-react@1.39.0-rc.0) (2022-09-26)
-
-
-### Bug Fixes
-
-* **deps:** update dependency classnames to v2.3.2 ([#9383](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9383)) ([d631df2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d631df2e2c1494254315d69c24333fd21a0452ea))
-* **masthead:** search locale fix ([#9372](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9372)) ([ab8fbd3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ab8fbd3476f9ddbda3c0d95638dd3a7f1a490116)), closes [#9364](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9364)
-* **notice-choice:** missing build script for tests ([#9380](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9380)) ([18db362](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/18db362f0381d09bd3549a9d1da46d9f5552decd))
-
-
-
-
-
-# [1.38.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.38.0-rc.0...@carbon/ibmdotcom-react@1.38.0) (2022-09-13)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.38.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.37.0...@carbon/ibmdotcom-react@1.38.0-rc.0) (2022-08-29)
-
-
-### Bug Fixes
-
-* **notice-choice:** codesandbox example ([#9217](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9217)) ([9d9f530](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9d9f530826927d4d485e846972fcc84e9dc5bf21))
-* **notice-choice:** missing build cmd ([#9227](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9227)) ([914088a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/914088a0a6c52eea23826ddc092f157690b68e77))
-
-
-
-
-
-# [1.37.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.37.0-rc.1...@carbon/ibmdotcom-react@1.37.0) (2022-08-17)
-
-
-
-# 1.37.0-rc.1 (2022-08-05)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.37.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.37.0-rc.0...@carbon/ibmdotcom-react@1.37.0-rc.1) (2022-08-05)
-
-
-
-# 1.37.0-rc.0 (2022-07-29)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.37.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.36.0...@carbon/ibmdotcom-react@1.37.0-rc.0) (2022-07-29)
-
-
-### Features
-
-* **notice-choice:** React notice choice ([#9081](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9081)) ([7c476bd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7c476bd42887fe9f5ea76ce06c6be2c76d997121))
-
-
-
-# 1.36.0 (2022-07-18)
-
-
-
-## 1.35.1 (2022-07-08)
-
-
-
-
-
-# [1.36.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.36.0-rc.0...@carbon/ibmdotcom-react@1.36.0) (2022-07-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-## [1.35.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.35.0...@carbon/ibmdotcom-react@1.35.1) (2022-07-08)
-
-
-# [1.36.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.35.0...@carbon/ibmdotcom-react@1.36.0-rc.0) (2022-07-08)
-
-
-### Bug Fixes
-
-* **masthead:** fixing expected selected item ([#9034](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9034)) ([1734a0a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1734a0a83e31cf654770a2e0b28582ea30d5601a))
-
-
-
-# 1.35.0 (2022-06-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-### Features
-
-* **pricing-table:** add sticky header ([#8824](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8824)) ([40b94f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/40b94f7b731e50bc24b5dab4bd3031aa2c97ea60)), closes [#8420](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8420)
-
-
-
-
-
-# [1.35.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.35.0-rc.0...@carbon/ibmdotcom-react@1.35.0) (2022-06-17)
-
-
-
-# 1.35.0-rc.0 (2022-06-07)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.35.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.34.0...@carbon/ibmdotcom-react@1.35.0-rc.0) (2022-06-07)
-
-
-### Bug Fixes
-
-* **cta:** reorder csb styles ([#8948](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8948)) ([bfb3343](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bfb3343ae399f27b1d9eeac4b70228cba7dd1ce0))
-* **deps:** update dependency carbon-components ([#8925](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8925)) ([d36320f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d36320f8460ede20d27557873edbcf7a661e77bd))
-* **quote:** update max breakpoint corner bracket position ([#8907](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8907)) ([53f6cbe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/53f6cbef52191720d9b95cf58e9498214853e6be)), closes [#8690](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8690)
-
-
-
-# 1.34.0 (2022-05-20)
-
-
-### Bug Fixes
-
-* **dotcom-shell:** remove padding top ([#8818](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8818)) ([da2ff39](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da2ff398a2dc70cf128f5945a695cef6d4c22844)), closes [#8703](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8703)
-
-
-### Features
-
-* **background-media:** introducing react wrapper ([#8819](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8819)) ([6c13daf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6c13dafd38d724059a933afa56663a9dded3715d)), closes [#8617](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8617)
-
-
-
-
-
-# [1.34.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.34.0-rc.0...@carbon/ibmdotcom-react@1.34.0) (2022-05-20)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.34.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.33.1...@carbon/ibmdotcom-react@1.34.0-rc.0) (2022-05-06)
-
-
-### Features
-
-* **video-player:** add alt prop in VideoPlayer component ([#8764](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8764)) ([7bf30ef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7bf30ef))
-
-
-
-## 1.33.1 (2022-05-04)
-
-
-### Bug Fixes
-
-* **content-block:** add border to mixed and media ([#8779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8779)) ([dfa1b5d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dfa1b5d)), closes [#8287](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8287)
-* **e2e:** adding wait times for React storybook e2e percy snapshots ([#8758](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8758)) ([dc4475e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dc4475e))
-* **masthead:** add optional chaining ([#8698](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8698)) ([e3413e5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e3413e5))
-* **masthead:** using better selector ([#8737](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8737)) ([739fb41](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/739fb41))
-* **table-of-contents:** add scroll behavior to react with toc wrapper ([#8676](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8676)) ([2f09beb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2f09beb)), closes [#7641](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7641)
-
-
-
-
-
-## [1.33.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.33.0...@carbon/ibmdotcom-react@1.33.1) (2022-05-04)
-
-
-
-# 1.33.0 (2022-04-25)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.33.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.33.0-rc.1...@carbon/ibmdotcom-react@1.33.0) (2022-04-25)
-
-
-
-# 1.33.0-rc.1 (2022-04-21)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.33.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.33.0-rc.0...@carbon/ibmdotcom-react@1.33.0-rc.1) (2022-04-21)
-
-
-### Bug Fixes
-
-* **vendor:** fix to pull direct source for internal vendor packages ([#8734](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8734)) ([be94613](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be94613))
-
-
-
-
-
-# [1.33.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.31.0...@carbon/ibmdotcom-react@1.33.0-rc.0) (2022-04-11)
-
-
-### Bug Fixes
-
-* **axe-core:** resolved accessibility errors ([#8453](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8453)) ([8366418](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8366418)), closes [#8351](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8351) [#8353](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8353)
-* **axe-core:** update aria attribute errors ([#8689](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8689)) ([27838bf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/27838bf)), closes [#8459](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8459)
-* **browserstack:** add axe-core npm dependencies ([#8354](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8354)) ([757514b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/757514b))
-* **CTA:** update button docs and codesandbox ([#8681](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8681)) ([97940a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97940a2))
-* **deps:** update dependency @carbon/telemetry to v0.1.0 ([#8481](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8481)) ([2a7a0c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2a7a0c6))
-* **deps:** update dependency carbon-components to v10.54.0 ([#8408](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8408)) ([588981c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/588981c))
-* **deps:** update dependency carbon-components to v10.55.1 ([#8483](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8483)) ([579f9a4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/579f9a4))
-* **deps:** update dependency carbon-components-react to v7.54.0 ([#8409](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8409)) ([4a704d9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4a704d9))
-* **deps:** update dependency carbon-components-react to v7.54.2 ([#8460](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8460)) ([4f5ae2a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f5ae2a))
-* **e2e:** fix to fixtures in e2e integration tests ([#8350](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8350)) ([47e207c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/47e207c))
-* **layout:** removed unneeded white background inline styles ([#8554](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8554)) ([4c37ec3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4c37ec3)), closes [#8294](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8294)
-* **masthead:** added menusection null checks ([#8324](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8324)) ([fdfe5ae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fdfe5ae)), closes [#8322](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8322)
-* **masthead:** aligned L1 sticky with wc ([#8398](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8398)) ([72bcf21](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/72bcf21)), closes [#8032](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8032)
-* **masthead:** fix search combobox `aria-expanded` value ([#8662](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8662)) ([28d4407](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/28d4407)), closes [#8473](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8473)
-* **masthead-search:** react searchNoRedirect prop doesn't work on enter ([#8516](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8516)) ([a176c21](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a176c21)), closes [#8334](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8334)
-* **table-of-contents:** Let VO interact with the destination content ([#8253](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8253)) ([c8f4c56](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c8f4c56))
-
-
-### Features
-
-* **accessibility-testing:** introduce cypress-axe-core ([#8233](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8233)) ([48fb0f5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48fb0f5)), closes [#8063](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8063)
-
-
-
-
-
-## [1.32.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.32.0...@carbon/ibmdotcom-react@1.32.1) (2022-04-01)
-
-
-
-# 1.32.0 (2022-03-28)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.32.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.32.0-rc.1...@carbon/ibmdotcom-react@1.32.0) (2022-03-28)
-
-
-
-# 1.32.0-rc.1 (2022-03-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.32.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.32.0-rc.0...@carbon/ibmdotcom-react@1.32.0-rc.1) (2022-03-17)
-
-
-### Bug Fixes
-
-* **masthead-search:** react searchNoRedirect prop doesn't work on enter ([#8516](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8516)) ([#8541](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8541)) ([d1d1c95](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d1d1c95)), closes [#8334](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8334)
-* **plex:** replace `gstatic` font references with akamai ([#8502](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8502)) ([e0b3a51](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e0b3a51))
-
-
-### Features
-
-* **scrolling-utility:** Add new utility to mimic dotcom-shell functionality ([#8434](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8434)) ([d06b45a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d06b45a))
-
-
-
-# 1.32.0-rc.0 (2022-03-16)
-
-
-
-
-
-# [1.32.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.31.0...@carbon/ibmdotcom-react@1.32.0-rc.0) (2022-03-16)
-
-
-### Bug Fixes
-
-* **browserstack:** add axe-core npm dependencies ([#8354](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8354)) ([757514b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/757514b))
-* **deps:** update dependency carbon-components to v10.54.0 ([#8408](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8408)) ([588981c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/588981c))
-* **deps:** update dependency carbon-components-react to v7.54.0 ([#8409](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8409)) ([4a704d9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4a704d9))
-* **deps:** update dependency carbon-components-react to v7.54.2 ([#8460](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8460)) ([4f5ae2a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f5ae2a))
-* **e2e:** fix to fixtures in e2e integration tests ([#8350](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8350)) ([47e207c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/47e207c))
-* **masthead:** added menusection null checks ([#8324](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8324)) ([fdfe5ae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fdfe5ae)), closes [#8322](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8322)
-* **masthead:** aligned L1 sticky with wc ([#8398](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8398)) ([72bcf21](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/72bcf21)), closes [#8032](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8032)
-* **table-of-contents:** Let VO interact with the destination content ([#8253](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8253)) ([c8f4c56](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c8f4c56))
-
-
-### Features
-
-* **accessibility-testing:** introduce cypress-axe-core ([#8233](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8233)) ([48fb0f5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48fb0f5)), closes [#8063](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8063)
-
-
-
-
-
-# [1.31.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.31.0-rc.3...@carbon/ibmdotcom-react@1.31.0) (2022-02-28)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.31.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.31.0-rc.2...@carbon/ibmdotcom-react@1.31.0-rc.3) (2022-02-25)
-
-
-
-# 1.31.0-rc.2 (2022-02-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.31.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.31.0-rc.1...@carbon/ibmdotcom-react@1.31.0-rc.2) (2022-02-24)
-
-
-
-# 1.31.0-rc.1 (2022-02-14)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.31.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.31.0-rc.0...@carbon/ibmdotcom-react@1.31.0-rc.1) (2022-02-14)
-
-
-### Bug Fixes
-
-* **content-section:** update child elements alignment to the top ([#8182](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8182)) ([4358e2d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4358e2d)), closes [#7804](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7804)
-* **deps:** fix to marked dependency issues ([#8172](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8172)) ([c1bb7f5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c1bb7f5))
-* **deps:** update dependency carbon-components to v10.52.0 ([#8209](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8209)) ([3ec4a16](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ec4a16))
-* **footer:** change cypress intercept for translation to use raw data ([#8244](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8244)) ([444b310](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/444b310))
-* **footer:** stabilization of e2e tests ([#8241](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8241)) ([7fddf06](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7fddf06))
-* **masthead:** return focus to trigger items on close/escape ([#8186](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8186)) ([77efc3b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/77efc3b)), closes [#8080](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8080) [#8081](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8081)
-
-
-
-
-
-# [1.31.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.30.0...@carbon/ibmdotcom-react@1.31.0-rc.0) (2022-02-01)
-
-
-
-# 1.30.0 (2022-01-31)
-
-
-### Bug Fixes
-
-* **deps:** update dependency carbon-components to v10.51.0 ([#8125](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8125)) ([594594d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/594594d))
-* **e2e:** mock ibm-common.js in e2e tests ([#8147](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8147)) ([a32b3e5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a32b3e5))
-* **video:** use component width to build video thumbnail ([#7914](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7914)) ([1cb82ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1cb82ee)), closes [#7660](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7660)
-
-
-
-
-
-# [1.30.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.30.0-rc.1...@carbon/ibmdotcom-react@1.30.0) (2022-01-31)
-
-
-
-# 1.30.0-rc.1 (2022-01-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.30.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.30.0-rc.0...@carbon/ibmdotcom-react@1.30.0-rc.1) (2022-01-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.30.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.29.1...@carbon/ibmdotcom-react@1.30.0-rc.0) (2022-01-18)
-
-
-### Bug Fixes
-
-* **a11y-checker:** fix file-loader for karma a11y checker in React ([#7868](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7868)) ([5284925](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5284925))
-* **browserstack:** add missing dependency ws ([#8006](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/8006)) ([875ad0f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/875ad0f))
-* **ContentBlockHorizontal:** add border-bottom option & knob ([#7832](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7832)) ([af04dfd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/af04dfd)), closes [#7640](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7640)
-* **cta-card:** add knob and docs to allow poster to be turned off ([#7784](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7784)) ([7d93d9e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d93d9e)), closes [#7065](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7065)
-* **deps:** update dependency classnames to v2.3.1 ([#7909](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7909)) ([7bf9f70](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7bf9f70))
-* **leadspace:** fix gradient rotation for leadspace centered ([#7777](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7777)) ([b4f1200](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4f1200)), closes [#7573](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7573)
-* **localemodal:** disable region button when no countries present ([#7840](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7840)) ([927c32e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/927c32e)), closes [#7831](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7831)
-* **storybook-image:** realligned web component and react images ([#7828](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7828)) ([07f4604](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07f4604))
-
-
-### Features
-
-* **karma-accessibility-checker:** add to web components ([#7997](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7997)) ([5ac82c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ac82c6)), closes [#7599](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7599)
-* **masthead:** hide and show upon scroll on mobile ([#7982](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7982)) ([630172b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/630172b)), closes [#6046](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6046)
-
-
-
-
-
-## [1.29.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.29.1-rc.0...@carbon/ibmdotcom-react@1.29.1) (2021-12-13)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.29.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.29.0...@carbon/ibmdotcom-react@1.29.1-rc.0) (2021-12-09)
-
-
-
-# 1.29.0 (2021-12-01)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.29.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.28.0-rc.0...@carbon/ibmdotcom-react@1.29.0) (2021-12-01)
-
-
-
-# 1.28.0-rc.0 (2021-11-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.28.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.28.0-rc.0...@carbon/ibmdotcom-react@1.28.0) (2021-12-01)
-
-
-
-# 1.28.0-rc.0 (2021-11-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.28.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.27.0...@carbon/ibmdotcom-react@1.28.0-rc.0) (2021-11-24)
-
-
-### Bug Fixes
-
-* **browserstack:** add `cypress-wait-until` for browserstack automate ([#7586](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7586)) ([b351f4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b351f4f))
-* **browserstack:** various browserstack e2e test fixes ([#7592](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7592)) ([b9cb7f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b9cb7f9))
-* **card:** update storybook knobs ([#7665](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7665)) ([88ff4d3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/88ff4d3)), closes [#5651](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5651)
-* **content-item-horizontal:** use accessible focus order ([#7528](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7528)) ([07da36c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07da36c))
-* **masthead:** clean up storybook demos ([#7664](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7664)) ([1292f82](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1292f82)), closes [#6409](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6409)
-* **masthead:** display L0 nav with L1 when scrolling up ([#7591](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7591)) ([a5bb87e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a5bb87e))
-* **Masthead:** add optional chaining to root.location to remove error in NextJS when rendering server-side ([#7681](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7681)) ([845cf31](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/845cf31)), closes [#7678](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7678)
-* **Masthead:** collapse left nav on overlay click ([#7545](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7545)) ([533a549](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/533a549)), closes [#7190](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7190)
-* **Masthead:** use `window` or `global` object ([#7708](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7708)) ([699b93b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/699b93b)), closes [#7707](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7707) [#6391](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6391)
-* **TableOfContents:** sync props and state for dynamically added items ([#7687](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7687)) ([a04b670](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a04b670)), closes [#7676](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7676) [#7676](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7676)
-
-
-### Features
-
-* **Layout:** remove Layout component and switch to style mixins ([#7656](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7656)) ([7d2aba1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d2aba1)), closes [#7327](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7327)
-
-
-
-
-
-# [1.27.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.27.0-rc.0...@carbon/ibmdotcom-react@1.27.0) (2021-11-10)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.27.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.26.0...@carbon/ibmdotcom-react@1.27.0-rc.0) (2021-10-29)
-
-
-### Bug Fixes
-
-* **browserstack:** update cypress configs for browserstack ([#7543](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7543)) ([6ff8ac1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6ff8ac1))
-* **content-section:** expose content section ([#7351](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7351)) ([42c64f5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/42c64f5)), closes [#6699](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6699)
-* **footer:** address different style issues ([#7392](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7392)) ([cad1915](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cad1915)), closes [#7189](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7189)
-* **gulp:** adjustment to react vendor builds ([#7396](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7396)) ([259bae3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/259bae3))
-* **locale-modal:** fix to properly type in locale modal e2e tests ([#7477](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7477)) ([cc8e573](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc8e573))
-* **masthead:** ensure reverse tabbing works in megamenu ([#7368](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7368)) ([ebe397a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ebe397a)), closes [#6624](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6624)
-* **Masthead:** resolve React and PropTypes warnings ([#7401](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7401)) ([3d3961e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3d3961e)), closes [#7224](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7224) [/github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js#L305-L309](https://github.com//github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js/issues/L305-L309)
-* **Masthead:** set selected state for L1 menu items and mobile ([#7530](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7530)) ([0ffc894](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0ffc894)), closes [#7312](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7312)
-* **masthead-e2e:** update overflow test ([#7511](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7511)) ([25fddcd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/25fddcd))
-* **MastheadSearch:** allow search event handlers to determine method of change ([#7365](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7365)) ([773774e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/773774e)), closes [#7081](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7081)
-* **quote:** Load Plex Serif font into Storybook previews ([#7437](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7437)) ([4a5bf3e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4a5bf3e))
-
-
-### Features
-
-* **filter-panel:** introducing react wrapper ([#7470](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7470)) ([b828912](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b828912)), closes [#6644](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6644)
-* **storybook:** position elements to top left ([#7397](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7397)) ([c6e8e22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c6e8e22)), closes [#6515](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6515)
-
-
-
-
-
-# [1.26.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.26.0-rc.2...@carbon/ibmdotcom-react@1.26.0) (2021-10-18)
-
-
-
-# 1.26.0-rc.2 (2021-10-13)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.26.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.26.0-rc.1...@carbon/ibmdotcom-react@1.26.0-rc.2) (2021-10-13)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.26.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.26.0-rc.0...@carbon/ibmdotcom-react@1.26.0-rc.1) (2021-10-12)
-
-
-
-# 1.26.0-rc.0 (2021-10-08)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.26.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.25.0...@carbon/ibmdotcom-react@1.26.0-rc.0) (2021-10-08)
-
-
-### Bug Fixes
-
-* **content-block:** expose story ([#7294](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7294)) ([af8eeb1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/af8eeb1)), closes [#6702](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6702)
-* **content-item:** expose component in storybook ([#7233](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7233)) ([43208ad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/43208ad)), closes [#6700](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6700)
-* **footer:** react and web components storybooks fixed ([#7259](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7259)) ([7a9ae86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a9ae86)), closes [#7201](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7201)
-* **storybook:** added react wrapper link to search with typeahead ([#7320](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7320)) ([48dda3d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48dda3d))
-* **webpack:** adding splitchunk optimization for react storybook and upgrade terser plugin ([#7298](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7298)) ([f8553fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f8553fe))
-
-
-### Features
-
-* **card-section-offset:** created react wrapper ([#7344](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7344)) ([7f4482e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7f4482e)), closes [#6288](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6288)
-* **feature-section:** introducing react wrapper ([#7266](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7266)) ([6996d0d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6996d0d)), closes [#6290](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6290)
-* **Image:** add `border` prop ([#7255](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7255)) ([60942cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/60942cf)), closes [#6315](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6315) [#6529](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6529)
-* **services:** translation and locale to handle `lc` only locales ([#7306](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7306)) ([186e06f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/186e06f)), closes [#7168](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7168)
-
-
-
-# 1.25.0 (2021-09-27)
-
-
-### Bug Fixes
-
-* **content-group-horizontal:** deleted story content group horizontal ([#7192](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7192)) ([194e65b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/194e65b))
-
-
-### Features
-
-* **content-group:** expose content-group in storybook ([#7182](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7182)) ([7a30258](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a30258)), closes [#6701](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6701)
-
-
-
-
-
-# [1.25.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.25.0-rc.2...@carbon/ibmdotcom-react@1.25.0) (2021-09-27)
-
-
-
-# 1.25.0-rc.2 (2021-09-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.25.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.25.0-rc.1...@carbon/ibmdotcom-react@1.25.0-rc.2) (2021-09-24)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.25.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.25.0-rc.0...@carbon/ibmdotcom-react@1.25.0-rc.1) (2021-09-22)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.25.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.24.0...@carbon/ibmdotcom-react@1.25.0-rc.0) (2021-09-17)
-
-
-### Bug Fixes
-
-* **dotcom-shell:** adding missing dependency for codesandbox example ([#7114](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7114)) ([8ec65a7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8ec65a7))
-* **footer:** expressive sunset cleanup ([#7103](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7103)) ([4d54b7b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d54b7b)), closes [#7094](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7094)
-* **footer:** update footer a11y labels ([#7042](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7042)) ([adcef7e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/adcef7e)), closes [#6025](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6025)
-* **Logo-grid:** changed the card heading style to expressive ([#7045](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7045)) ([56978ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/56978ee)), closes [#6211](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6211)
-* **masthead:** add check for focus elem in Masthead SideNavMenuSection to prevent type error ([#7101](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7101)) ([6b15acc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6b15acc))
-* **masthead:** expressive sunset cleanup ([#7100](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7100)) ([ac46dc5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ac46dc5)), closes [#7087](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7087)
-* **masthead:** remove aria-selected from menu items ([#7030](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7030)) ([dacbc19](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dacbc19)), closes [#6888](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6888)
-
-
-### Features
-
-* **content-group-banner:** create react wrapper ([#7115](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7115)) ([80f37b6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80f37b6)), closes [#5372](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5372)
-* **CTA:** enabling custom video title ([#6983](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6983)) ([37473d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/37473d7)), closes [#6868](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6868) [#7033](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7033)
-* **expressive-theme:** sunset of the expressive theme ([#7012](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7012)) ([265f563](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/265f563))
-* **masthead:** masthead L0 selected when child item is current page ([#7040](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7040)) ([37168e8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/37168e8)), closes [#6764](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6764)
-
-
-
-## 1.23.3 (2021-09-01)
-
-
-### Features
-
-* **VideoPlayer:** support image and caption overrides ([#7007](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7007)) ([d6d098b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d6d098b)), closes [#5753](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5753)
-
-
-
-## 1.23.3-rc.0 (2021-09-01)
-
-
-
-
-
-# [1.24.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.24.0-rc.2...@carbon/ibmdotcom-react@1.24.0) (2021-09-08)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.24.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.24.0-rc.1...@carbon/ibmdotcom-react@1.24.0-rc.2) (2021-09-02)
-
-
-### Bug Fixes
-
-* **github-action:** fix to the github action to have push access ([#7023](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7023)) ([f0b56c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f0b56c6))
-
-
-
-
-
-# [1.24.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.24.0-rc.0...@carbon/ibmdotcom-react@1.24.0-rc.1) (2021-08-31)
-
-
-### Bug Fixes
-
-* **LightboxMediaPlayer:** set `autoPlay` based on modal open state ([#7010](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7010)) ([333043c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/333043c)), closes [#6958](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6958)
-
-
-
-
-
-# [1.24.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.2...@carbon/ibmdotcom-react@1.24.0-rc.0) (2021-08-27)
-
-
-### Bug Fixes
-
-* **background-media:** add generate react wrapper comment ([#6993](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6993)) ([ff46fc1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ff46fc1))
-* **card:** pictogram theme colors and heading font style ([#6990](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6990)) ([da12df6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da12df6)), closes [#6985](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6985) [#6959](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6959)
-* **card-in-card:** create react wrapper ([#6920](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6920)) ([9086cc5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9086cc5)), closes [#5339](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5339)
-* **content-item-horizontal:** create react wrapper ([#6903](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6903)) ([a600476](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a600476)), closes [#5338](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5338)
-* **tabs-extended-media:** add react wrapper ([#6919](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6919)) ([82f03b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/82f03b2)), closes [#5395](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5395)
-* **VideoPlayer:** restrict lightbox variant autoplay to modal open state ([#6958](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6958)) ([183b66a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/183b66a)), closes [#6953](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6953)
-
-
-### Features
-
-* **card-group:** change same height util to apply to whole group instead of per row ([#6900](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6900)) ([24dc4c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/24dc4c6))
-* **plex:** adding optional weights for non-latin dynamic loader ([#6909](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6909)) ([cff0050](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cff0050))
-
-
-
-# 1.12.0-beta.65.147 (2021-08-13)
-
-
-### Features
-
-* **videoPlayer:** introducing `playingMode` feature (pairing with wc version) ([#6832](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6832)) ([9e281de](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9e281de)), closes [#5266](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5266)
-
-
-## [1.23.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.3-rc.0...@carbon/ibmdotcom-react@1.23.3) (2021-09-01)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.23.3-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.2...@carbon/ibmdotcom-react@1.23.3-rc.0) (2021-09-01)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.23.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.2-rc.0...@carbon/ibmdotcom-react@1.23.2) (2021-08-26)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.23.2-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.1...@carbon/ibmdotcom-react@1.23.2-rc.0) (2021-08-25)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.23.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.1-rc.0...@carbon/ibmdotcom-react@1.23.1) (2021-08-19)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.23.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.0...@carbon/ibmdotcom-react@1.23.1-rc.0) (2021-08-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.23.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.0-rc.3...@carbon/ibmdotcom-react@1.23.0) (2021-08-16)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.23.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.0-rc.2...@carbon/ibmdotcom-react@1.23.0-rc.3) (2021-08-13)
-
-
-### Bug Fixes
-
-* **lightbox-media:** check for kaltura onClose ([#6885](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6885)) ([eaeb5e5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eaeb5e5)), closes [#6884](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6884)
-
-
-
-
-
-# [1.23.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.0-rc.1...@carbon/ibmdotcom-react@1.23.0-rc.2) (2021-08-11)
-
-
-### Bug Fixes
-
-* **CTA:** allow onClick for buttonCTA to be passed ([#6863](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6863)) ([dac084a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dac084a)), closes [#6844](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6844)
-
-
-
-
-
-# [1.23.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.23.0-rc.0...@carbon/ibmdotcom-react@1.23.0-rc.1) (2021-08-10)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.23.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.22.0...@carbon/ibmdotcom-react@1.23.0-rc.0) (2021-08-06)
-
-
-### Bug Fixes
-
-* **language-selector:** added missing label to select ([#6782](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6782)) ([60a3d78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/60a3d78))
-* **link-with-icon:** add icon line wrap behavior by default ([#6812](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6812)) ([77a673f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/77a673f)), closes [#5705](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5705)
-* **masthead:** react rtl overflow ([#6828](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6828)) ([589a99b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/589a99b)), closes [#6750](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6750)
-
-
-### Features
-
-* **loadNonLatinPlex:** introduce loadNonLatinPlex utility ([#6802](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6802)) ([d312016](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d312016))
-
-
-
-# 1.12.0-beta.64.108 (2021-07-30)
-
-
-### Bug Fixes
-
-* **content-group-horizontal:** multiple style bugs ([#6494](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6494)) ([9b4c0cc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9b4c0cc))
-
-
-
-
-
-# [1.22.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.22.0-rc.2...@carbon/ibmdotcom-react@1.22.0) (2021-07-26)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.22.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.22.0-rc.1...@carbon/ibmdotcom-react@1.22.0-rc.2) (2021-07-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.22.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.22.0-rc.0...@carbon/ibmdotcom-react@1.22.0-rc.1) (2021-07-21)
-
-
-### Features
-
-* **env:** adding rtl staging environments ([#6684](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6684)) ([56b813b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/56b813b))
-
-
-
-
-
-# [1.22.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.21.0...@carbon/ibmdotcom-react@1.22.0-rc.0) (2021-07-16)
-
-
-### Bug Fixes
-
-* **CardLink:** fix disabled behavior ([#6514](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6514)) ([3f6c76b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3f6c76b)), closes [#6513](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6513)
-* **FeatureCTA:** adjust prop cta structure to set target correctly ([#6590](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6590)) ([4b630ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4b630ee)), closes [#6550](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6550)
-* **link-with-icon:** fixes layout styles ([#6479](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6479)) ([664912d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/664912d)), closes [#6464](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6464)
-* **masthead:** set text wrapping for menu dropdown items ([#6640](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6640)) ([1a8b77a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1a8b77a))
-* **playwright:** removal of playwright and integration tests ([#6613](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6613)) ([13825e4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/13825e4))
-
-
-### Features
-
-* **content-block-horizontal:** name change and deprecation (React) ([#6666](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6666)) ([72708c9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/72708c9))
-
-
-
-
-
-# [1.21.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.21.0-rc.3...@carbon/ibmdotcom-react@1.21.0) (2021-07-06)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.21.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.21.0-rc.2...@carbon/ibmdotcom-react@1.21.0-rc.3) (2021-07-02)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.21.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.21.0-rc.1...@carbon/ibmdotcom-react@1.21.0-rc.2) (2021-07-01)
-
-
-### Bug Fixes
-
-* **MastheadSearch:** set focus on search suggestion to false ([#6553](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6553)) ([a9275fa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a9275fa)), closes [#6505](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6505)
-
-
-
-
-
-# [1.21.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.21.0-rc.0...@carbon/ibmdotcom-react@1.21.0-rc.1) (2021-06-29)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.21.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.61.29...@carbon/ibmdotcom-react@1.21.0-rc.0) (2021-06-25)
-
-
-### Bug Fixes
-
-* **cta:** aligned feature card stories ([#6301](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6301)) ([f87a172](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f87a172)), closes [#5542](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5542)
-* **leadspace:** width and theme fix ([#6448](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6448)) ([1f18a3c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1f18a3c))
-* **masthead:** update search WAI-ARIA attributes ([#6440](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6440)) ([fb0cad6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fb0cad6)), closes [#6115](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6115) [#6116](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6116) [#6117](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6117)
-* **masthead:** use aria-label instead of labelledby ([#6468](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6468)) ([a3cee0e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a3cee0e)), closes [#6465](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6465)
-
-
-### Features
-
-* **card-group:** add option for 2-4 cards per row ([#6367](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6367)) ([940ec1e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/940ec1e)), closes [#5286](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5286) [#5520](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5520)
-* **footer:** added custom adjunct links ([#6271](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6271)) ([c2cd4fb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c2cd4fb))
-
-
-
-
-
-# [1.20.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.20.0-rc.1...@carbon/ibmdotcom-react@1.20.0) (2021-06-14)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.20.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.20.0-rc.0...@carbon/ibmdotcom-react@1.20.0-rc.1) (2021-06-10)
-
-
-### Bug Fixes
-
-* **leadspace:** overlapping bug ([#6336](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6336)) ([e5a1789](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e5a1789)), closes [#6323](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6323)
-
-
-
-
-
-# [1.20.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.60.60...@carbon/ibmdotcom-react@1.20.0-rc.0) (2021-06-04)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.19.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.19.1-rc.0...@carbon/ibmdotcom-react@1.19.1) (2021-06-01)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.19.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.19.0...@carbon/ibmdotcom-react@1.19.1-rc.0) (2021-05-22)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.19.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.19.0-rc.1...@carbon/ibmdotcom-react@1.19.0) (2021-05-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.19.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.19.0-rc.0...@carbon/ibmdotcom-react@1.19.0-rc.1) (2021-05-12)
-
-
-### Bug Fixes
-
-* **masthead:** switching protocol for ibm logo to https ([#6033](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6033)) ([26f6aa7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/26f6aa7))
-
-
-
-
-
-# [1.19.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.58.45...@carbon/ibmdotcom-react@1.19.0-rc.0) (2021-05-07)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.18.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.18.1-rc.1...@carbon/ibmdotcom-react@1.18.1) (2021-04-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.18.1-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.18.1-rc.0...@carbon/ibmdotcom-react@1.18.1-rc.1) (2021-04-26)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.18.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.18.0...@carbon/ibmdotcom-react@1.18.1-rc.0) (2021-04-22)
-
-
-### Bug Fixes
-
-* **dependencies:** changed @carbon/telemetry to be a dependency ([#5871](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5871)) ([5a1e23b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5a1e23b)), closes [#5867](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5867)
-
-
-
-
-
-# [1.18.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.18.0-rc.1...@carbon/ibmdotcom-react@1.18.0) (2021-04-21)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.18.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.18.0-rc.0...@carbon/ibmdotcom-react@1.18.0-rc.1) (2021-04-20)
-
-
-### Bug Fixes
-
-* **callout-with-media:** change styles for carbon themes ([#5828](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5828)) ([eebf5c1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eebf5c1)), closes [#5818](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5818)
-* **MastheadSearch:** remove tooltip from search button ([#5780](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5780)) ([653302b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/653302b)), closes [#5778](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5778)
-
-
-
-
-
-# [1.18.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.56.39...@carbon/ibmdotcom-react@1.18.0-rc.0) (2021-04-14)
-
-
-### Bug Fixes
-
-* **MastheadLeftNav:** set aria-hidden to unseen menu panels ([#5770](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5770)) ([1e1c1cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1e1c1cd)), closes [#5771](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5771)
-
-
-### Features
-
-* **cta-section:** created component ([#5767](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5767)) ([e714d24](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e714d24)), closes [#5218](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5218)
-
-
-
-
-
-# [1.17.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.17.0-rc.1...@carbon/ibmdotcom-react@1.17.0) (2021-03-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.17.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.17.0-rc.0...@carbon/ibmdotcom-react@1.17.0-rc.1) (2021-03-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.17.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.54.96...@carbon/ibmdotcom-react@1.17.0-rc.0) (2021-03-12)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.16.1-rc.0...@carbon/ibmdotcom-react@1.16.1) (2021-03-01)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-## [1.16.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.16.0-rc.1...@carbon/ibmdotcom-react@1.16.1-rc.0) (2021-02-25)
-
-
-### Bug Fixes
-
-* **masthead-search:** removed focus on first item prop ([#5292](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5292)) ([ed4ae60](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ed4ae60)), closes [#5287](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5287)
-
-
-
-
-
-# [1.16.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.16.0-rc.1...@carbon/ibmdotcom-react@1.16.0) (2021-02-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.16.0-rc.0...@carbon/ibmdotcom-react@1.16.0-rc.1) (2021-02-17)
-
-
-### Features
-
-* **search:** allow custom url with noSearchRedirect ([#5198](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5198)) ([47b275b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/47b275b)), closes [#4845](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4845)
-
-
-
-
-
-# [1.16.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.53.48...@carbon/ibmdotcom-react@1.16.0-rc.0) (2021-02-12)
-
-
-### Bug Fixes
-
-* **masthead:** customtypeahead api fix ([#5168](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/5168)) ([1603e63](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1603e63))
-
-
-
-
-
-# [1.15.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.15.0-rc.2...@carbon/ibmdotcom-react@1.15.0) (2021-01-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.15.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.15.0-rc.1...@carbon/ibmdotcom-react@1.15.0-rc.2) (2021-01-22)
-
-
-### Bug Fixes
-
-* **Masthead:** make sure last selected menu item has selected styles in mobile nav ([#4973](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4973)) ([c52aff6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c52aff6)), closes [#4971](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4971)
-
-
-
-
-
-# [1.15.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.15.0-rc.0...@carbon/ibmdotcom-react@1.15.0-rc.1) (2021-01-20)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-
-
-
-
-# [1.15.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.51.51...@carbon/ibmdotcom-react@1.15.0-rc.0) (2021-01-16)
-
-
-### Features
-
-* **masthead:** search no redirect ([#4913](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4913)) ([41ba452](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/41ba452)), closes [#4599](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4599)
-* **profile:** change profile api endpoint ([#4909](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4909)) ([e9cffaa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e9cffaa)), closes [#4701](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4701)
-
-
-
-
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.14.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.14.0-rc.1...@carbon/ibmdotcom-react@1.14.0) (2020-12-15)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.14.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.14.0-rc.0...@carbon/ibmdotcom-react@1.14.0-rc.1) (2020-12-08)
-
-### Bug Fixes
-
-- **locale-modal:** replaced href target to avoid storybook refresh
-  ([#4647](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4647))
-  ([9ba076e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9ba076e))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.14.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.48.54...@carbon/ibmdotcom-react@1.14.0-rc.0) (2020-12-04)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.13.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.13.0-rc.4...@carbon/ibmdotcom-react@1.13.0) (2020-11-25)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.13.0-rc.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.13.0-rc.3...@carbon/ibmdotcom-react@1.13.0-rc.4) (2020-11-23)
-
-### Bug Fixes
-
-- **Footer:** fixes language selector clear
-  ([#4557](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4557))
-  ([64142e4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/64142e4)),
-  closes
-  [#4550](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4550)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.13.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.13.0-rc.2...@carbon/ibmdotcom-react@1.13.0-rc.3) (2020-11-20)
-
-### Bug Fixes
-
-- **SideNavMenu:** remove role from li wrapper on menu item buttons
-  ([#4538](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4538))
-  ([4b4f4e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4b4f4e3)),
-  closes
-  [#4526](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4526)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.13.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.13.0-rc.1...@carbon/ibmdotcom-react@1.13.0-rc.2) (2020-11-19)
-
-### Bug Fixes
-
-- **Masthead:** change side nav menu item role to menuitem
-  ([#4530](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4530))
-  ([d30ed8e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d30ed8e)),
-  closes
-  [#4526](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4526)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.13.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.13.0-rc.0...@carbon/ibmdotcom-react@1.13.0-rc.1) (2020-11-18)
-
-### Bug Fixes
-
-- **Masthead:** regular dropdown menu visible outside of masthead nav bar
-  ([#4510](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4510))
-  ([30c6724](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/30c6724)),
-  closes
-  [#4504](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4504)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.13.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.46.61...@carbon/ibmdotcom-react@1.13.0-rc.0) (2020-11-13)
-
-### Bug Fixes
-
-- **cardgroup:** update sameheight selectors
-  ([#4484](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4484))
-  ([0a25048](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0a25048)),
-  closes
-  [#4311](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4311)
-- **Images:** update FPO images url
-  ([#4482](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4482))
-  ([13b0181](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/13b0181))
-- **masthead:** add aria-hidden to overflow nav carets
-  ([#4489](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4489))
-  ([c44b6a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c44b6a5)),
-  closes
-  [#4182](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4182)
-
-### Features
-
-- **Masthead:** add search custom events
-  ([#4460](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4460))
-  ([a4abe4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a4abe4f)),
-  closes
-  [#4398](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4398)
-- **megamenu:** megamenu desktop web component
-  ([#4384](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4384))
-  ([a9707fd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a9707fd)),
-  closes
-  [#3284](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3284)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.12.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-rc.0...@carbon/ibmdotcom-react@1.12.0) (2020-10-20)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.12.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.12.0-beta.34...@carbon/ibmdotcom-react@1.12.0-rc.0) (2020-10-09)
-
-### Bug Fixes
-
-- **masthead:** search options visible
-  ([#4205](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4205))
-  ([f1e48a6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f1e48a6)),
-  closes
-  [#4190](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4190)
-  [#4181](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4181)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.11.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.11.0-rc.1...@carbon/ibmdotcom-react@1.11.0) (2020-09-22)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.11.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.11.0-rc.0...@carbon/ibmdotcom-react@1.11.0-rc.1) (2020-09-16)
-
-### Bug Fixes
-
-- **masthead:** remove hide L0 logic
-  ([#3960](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3960))
-  ([fe2ae3f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fe2ae3f)),
-  closes
-  [#3958](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3958)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.11.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.2...@carbon/ibmdotcom-react@1.11.0-rc.0) (2020-09-11)
-
-# 1.11.0-beta.4917 (2020-09-11)
-
-### Bug Fixes
-
-- **HorizontalRule:** change style prop name to type
-  ([#3892](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3892))
-  ([3317f57](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3317f57))
-- **Masthead:** indicate the active navigation item in Masthead navigation links
-  ([#3890](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3890))
-  ([42b1599](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/42b1599)),
-  closes
-  [#3826](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3826)
-- **MastheadLeftNav:** when user goes through menu levels, set scrollTop to 0
-  ([#3921](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3921))
-  ([0ecc2a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0ecc2a5)),
-  closes
-  [#3730](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3730)
-
-### Features
-
-- **search:** add redirect and typeahead hooks
-  ([#3918](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3918))
-  ([84c0481](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/84c0481)),
-  closes
-  [#3766](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3766)
-
-## 1.10.2 (2020-09-08)
-
-### Bug Fixes
-
-- **styles:** dedupe Carbon grid in the bundle
-  ([#3811](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3811))
-  ([4119a43](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4119a43)),
-  closes
-  [#3809](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3809)
-
-### Features
-
-- **Card:** supports onClick
-  ([#3812](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3812))
-  ([9245135](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9245135)),
-  closes
-  [#3756](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3756)
-
-# 1.11.0-beta.4847 (2020-08-28)
-
-### Bug Fixes
-
-- **CardGroup:** passing pictogram prop to card from CardGroup
-  ([#3689](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3689))
-  ([fa2b2ef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fa2b2ef)),
-  closes
-  [#3654](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3654)
-- **leadspace:** fixes codesandbox leadspace example
-  ([#3581](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3581))
-  ([59414e1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/59414e1))
-- **Masthead:** keep focus in sub menus
-  ([#3723](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3723))
-  ([af1ce57](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/af1ce57)),
-  closes
-  [#3663](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3663)
-- **MegaMenu:** explicity set focus to HeaderMenu L0 item when clicked
-  ([#3751](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3751))
-  ([626d40f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/626d40f)),
-  closes
-  [#3617](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3617)
-  [#3731](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3731)
-
-### Features
-
-- **card-with-pictogram:** adding new card variation
-  ([#3654](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3654))
-  ([3bdc14e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3bdc14e))
-- **Footer:** add micro variation
-  ([#3645](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3645))
-  ([14acb43](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/14acb43)),
-  closes
-  [#3431](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3431)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.10.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.2-rc.2...@carbon/ibmdotcom-react@1.10.2) (2020-09-08)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.10.2-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.2-rc.1...@carbon/ibmdotcom-react@1.10.2-rc.2) (2020-09-03)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.10.2-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.2-rc.0...@carbon/ibmdotcom-react@1.10.2-rc.1) (2020-09-02)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.10.2-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.1...@carbon/ibmdotcom-react@1.10.2-rc.0) (2020-09-01)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.10.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.1-rc.0...@carbon/ibmdotcom-react@1.10.1) (2020-08-28)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.10.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.0...@carbon/ibmdotcom-react@1.10.1-rc.0) (2020-08-27)
-
-### Bug Fixes
-
-- **MegaMenu:** account for focus within the megamenu component
-  ([#3763](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3763))
-  ([2f43ee5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2f43ee5)),
-  closes
-  [#3758](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3758)
-- **MegaMenu:** explicity set focus to HeaderMenu L0 item when clicked
-  ([#3751](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3751))
-  ([#3762](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3762))
-  ([5c95e0a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5c95e0a)),
-  closes
-  [#3617](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3617)
-  [#3731](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3731)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.10.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.0-rc.2...@carbon/ibmdotcom-react@1.10.0) (2020-08-26)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.10.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.0-rc.1...@carbon/ibmdotcom-react@1.10.0-rc.2) (2020-08-26)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.10.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.10.0-rc.0...@carbon/ibmdotcom-react@1.10.0-rc.1) (2020-08-25)
-
-### Bug Fixes
-
-- **expressivetheme:** enable css custom properties with the theme
-  ([#3699](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3699))
-  ([cdf12a3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cdf12a3)),
-  closes
-  [#3698](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3698)
-  [#3643](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3643)
-- **masthead:** locked focus while left menu active
-  ([#3705](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3705))
-  ([ff766f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ff766f7)),
-  closes
-  [#3663](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3663)
-- **masthead:** ssr fix for scroll check
-  ([#3704](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3704))
-  ([c087815](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c087815)),
-  closes
-  [#3661](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3661)
-  [#3661](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3661)
-- **MegaMenu:** add tabindex attr for safari not detecting event
-  ([#3673](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3673))
-  ([b3c1c7e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b3c1c7e)),
-  closes
-  [#3641](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3641)
-- **MegaMenu:** disable body scroll when megamenu is open
-  ([#3676](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3676))
-  ([828bfa7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/828bfa7)),
-  closes
-  [#3633](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3633)
-- **MegaMenu:** disable scrolling for mobile nav
-  ([#3692](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3692))
-  ([44167d5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/44167d5)),
-  closes
-  [#3661](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3661)
-- **MegaMenu:** pass href prop to the CategoryGroup so link can be accessed as
-  expected
-  ([#3668](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3668))
-  ([abfbb56](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/abfbb56))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.10.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.9.0...@carbon/ibmdotcom-react@1.10.0-rc.0) (2020-08-19)
-
-### Bug Fixes
-
-- **CalloutWithMedia:** g90 theme rendering well
-  ([#3392](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3392))
-  ([c0c6351](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c0c6351)),
-  closes
-  [#3383](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3383)
-- **docs:** fixed codesandbox links pointing to old folders
-  ([#3544](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3544))
-  ([902a1c3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/902a1c3)),
-  closes
-  [#3541](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3541)
-- **jest:** remove console errors
-  ([#3490](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3490))
-  ([e43bbfe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e43bbfe))
-- **lightboxMediaViewer:** update react version
-  ([#3489](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3489))
-  ([d58e6fa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d58e6fa)),
-  closes
-  [#3295](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3295)
-- **LinkwithIcon:** disabled hover styling
-  ([#3384](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3384))
-  ([af30476](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/af30476)),
-  closes
-  [#3294](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3294)
-- **LocaleModal:** accessibility issue on navigation
-  ([#3466](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3466))
-  ([e7e10a9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e7e10a9)),
-  closes
-  [#3412](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3412)
-- **LocaleModal:** changing icon size and margin
-  ([#3532](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3532))
-  ([69109dd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/69109dd)),
-  closes
-  [#3329](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3329)
-- **LocaleModal:** html semantic, filter by region, scrollTop by region
-  ([#3513](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3513))
-  ([5a703d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5a703d1)),
-  closes
-  [#3409](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3409)
-- **LocaleModal:** modal close btn accessibility
-  ([#3447](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3447))
-  ([88b3a53](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/88b3a53)),
-  closes
-  [#3410](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3410)
-- **LocalModal:** reset scroll to top
-  ([#3465](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3465))
-  ([8ffa44d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8ffa44d)),
-  closes
-  [#3350](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3350)
-- **masthead:** left menu focus
-  ([#3611](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3611))
-  ([26ce5f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/26ce5f9)),
-  closes
-  [#3588](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3588)
-- **Masthead:** edit hamburger menu autoid to new format
-  ([#3618](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3618))
-  ([eaf073f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eaf073f))
-- **MastheadSearch:** fix UC browser
-  ([#3442](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3442))
-  ([5d5f0c9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d5f0c9)),
-  closes
-  [#2896](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2896)
-- **MegaMenu:** assign button role for the back button in mobile menu
-  ([#3610](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3610))
-  ([f840b28](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f840b28)),
-  closes
-  [#3587](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3587)
-- **MegaMenu:** break down MegaMenu into smaller components
-  ([#3488](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3488))
-  ([cf32071](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cf32071)),
-  closes
-  [/github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/3395#issuecomment-669766125](https://github.com//github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/3395/issues/issuecomment-669766125)
-- **MegaMenu:** prevent menu items from overlapping
-  ([#3565](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3565))
-  ([8bd6375](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8bd6375)),
-  closes
-  [#3519](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3519)
-- **MegaMenu:** set correct aria label to hamburger menu when open/closed
-  ([#3608](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3608))
-  ([e780ffa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e780ffa)),
-  closes
-  [#3584](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3584)
-- **MegaMenu:** tweak data-autoids for the mobile navigation
-  ([#3576](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3576))
-  ([7520594](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7520594)),
-  closes
-  [#3381](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3381)
-- **side-nav:** cope with large list of parent menu items
-  ([#3607](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3607))
-  ([bce8890](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bce8890)),
-  closes
-  [#3512](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3512)
-- **storybook:** fix to storybook react docs pages
-  ([#3572](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3572))
-  ([2a8c72d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2a8c72d)),
-  closes
-  [#3571](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3571)
-- **VideoPlayerAPI:** stop video when modal closes
-  ([#3427](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3427))
-  ([b61b5ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b61b5ee)),
-  closes
-  [#3295](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3295)
-
-### Features
-
-- **left-nav:** support focus wrapping
-  ([#3348](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3348))
-  ([8414000](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8414000)),
-  closes
-  [#3160](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3160)
-- **Masthead:** add megamenu to mobile nav
-  ([#3464](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3464))
-  ([5422747](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5422747)),
-  closes
-  [#3300](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3300)
-- **MegaMenu:** MegaMenu component
-  ([#3395](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3395))
-  ([c962e2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c962e2f)),
-  closes
-  [#3279](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3279)
-- **MegaMenu:** set up auto ids
-  ([#3517](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3517))
-  ([f106790](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f106790)),
-  closes
-  [#3381](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3381)
-- **VideoPlayer:** adding stories for different aspect ratios
-  ([#3434](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3434))
-  ([055e10f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/055e10f)),
-  closes
-  [#3396](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3396)
-
-# 1.10.0-beta.4670 (2020-07-31)
-
-### Bug Fixes
-
-- **callout-data:** fixed wrong story display on iframe mode
-  ([#3241](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3241))
-  ([217095b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/217095b))
-- **components:** revert type size back to one of v1.8.0
-  ([#3293](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3293))
-  ([b97771b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b97771b)),
-  closes
-  [#3287](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3287)
-- **CTASection:** add sameHeight to content items
-  ([#3330](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3330))
-  ([18aff80](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/18aff80))
-- **CTASection:** buttongroup styling
-  ([#3254](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3254))
-  ([4857422](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4857422)),
-  closes
-  [#3016](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3016)
-- **docs:** wrong scss import path in docs
-  ([#3335](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3335))
-  ([57ee99b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/57ee99b)),
-  closes
-  [#3332](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3332)
-  [#3333](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3333)
-- **LightboxMediaViewer:** modal dialog accessibility
-  ([#3275](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3275))
-  ([e0dd2d2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e0dd2d2)),
-  closes
-  [#2727](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2727)
-- **TableOfContents:** Sticky offset not working
-  ([#3255](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3255))
-  ([195a26e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/195a26e)),
-  closes
-  [#2979](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2979)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.9.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.9.0-rc.1...@carbon/ibmdotcom-react@1.9.0) (2020-07-29)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.9.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.9.0-rc.0...@carbon/ibmdotcom-react@1.9.0-rc.1) (2020-07-22)
-
-### Bug Fixes
-
-- **CardLink:** disabled state
-  ([#3247](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3247))
-  ([838d567](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/838d567)),
-  closes
-  [#3229](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3229)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.9.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0...@carbon/ibmdotcom-react@1.9.0-rc.0) (2020-07-17)
-
-### Bug Fixes
-
-- **ContentBlockCards:** add video and cta
-  ([#3196](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3196))
-  ([6dcfe8e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6dcfe8e)),
-  closes
-  [#2985](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2985)
-  [#3051](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3051)
-
-# 1.9.0-beta.4592 (2020-07-17)
-
-### Bug Fixes
-
-- **ButtonGroup:** added sameHeight feature - Leadspace issue related
-  ([#2939](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2939))
-  ([7762075](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7762075))
-- **ButtonGroup:** put React key in the right place
-  ([67706c1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67706c1)),
-  closes
-  [#2693](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2693)
-- **ButtonGroup:** removed row-reverse styling
-  ([845d239](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/845d239))
-- **CalloutData:** add missing export
-  ([30c85d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/30c85d8))
-- **CalloutData:** hide it from Storybook
-  ([#3013](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3013))
-  ([6102089](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6102089))
-- **CalloutData:** moving all knobs to same tab
-  ([#3028](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3028))
-  ([6d68375](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6d68375))
-- **CalloutData:** updated docs
-  ([#2947](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2947))
-  ([6b00447](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6b00447))
-- **CalloutQuote:** fix icon size on mobile
-  ([#2926](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2926))
-  ([2ecf21f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2ecf21f))
-- **CallOutQuote:** added copy2 knob to the story pannel
-  ([#2963](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2963))
-  ([7ee99b9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7ee99b9))
-- **CallOutWithMedia:** media spacing adjustments
-  ([#3022](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3022))
-  ([e77da69](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e77da69))
-- **Card:** fix prop type
-  ([#2767](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2767))
-  ([2561006](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2561006))
-- **Card:** fixed column number for small breakpoint
-  ([#2934](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2934))
-  ([9640c18](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9640c18))
-- **Card:** reduce bottom margin when link has text
-  ([#3144](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3144))
-  ([c39e926](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c39e926))
-- **CardGroup:** allow CardGroup to set Card with cta copy
-  ([#3164](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3164))
-  ([f039d31](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f039d31))
-- **CardLink:** `bx--grid--condensed` added to the storybook story
-  ([#2757](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2757))
-  ([8237778](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8237778))
-- **CardSectionSimple:** remove filter for card eyebrow
-  ([ff51c2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ff51c2f))
-- **contentblockcards:** grid fix
-  ([#2924](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2924))
-  ([e3a72f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e3a72f9))
-- **ContentItem:** grid spacing fixes
-  ([#2986](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2986))
-  ([198f378](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/198f378))
-- **ContentItemHorizontal:** grid alignment
-  ([2ce7f5f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2ce7f5f))
-- **ContentItemHorizontal:** links default to vertical
-  ([06c609d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/06c609d))
-- **ContentItemHorizontal:** updated storybook with design specs
-  ([#2974](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2974))
-  ([8fa4ae1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8fa4ae1))
-- **CTASection:** add buttongroup for cta
-  ([#2992](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2992))
-  ([68e51a1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/68e51a1))
-- **CTASection:** adjust spacing when no content items
-  ([#2868](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2868))
-  ([0c606e6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0c606e6))
-- **FeatureCardBlockLarge:** ensure correct image asset ratio is passed in for
-  custom breakpoint
-  ([#2921](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2921))
-  ([6da2ba2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6da2ba2))
-- **FeatureCardBlockMedium:** fixed circular dependency
-  ([#2920](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2920))
-  ([7cd2008](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7cd2008))
-- **LanguageSelector:** placeholder prop added
-  ([#2807](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2807))
-  ([2a6682e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2a6682e))
-- **LanguageSelector:** refresh value on focus lost
-  ([#3131](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3131))
-  ([2830b77](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2830b77)),
-  closes
-  [#2319](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2319)
-- **LeadSpace:** prevent content from being cut off in mobile
-  ([#3181](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3181))
-  ([871869a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/871869a)),
-  closes
-  [#3114](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3114)
-- **LeadSpaceBlock:** grid adjustment
-  ([#2853](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2853))
-  ([876d57e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/876d57e))
-- **LocaleModal:** region card focus state
-  ([#2995](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2995))
-  ([64079e5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/64079e5))
-- **masthead:** fix to profile menu scroll away issue
-  ([3ac4c52](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ac4c52))
-- **Masthead:** fixed missing platform on mobile
-  ([18d97ad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/18d97ad))
-- **MastheadL1:** increased max-width, eyebrow validation and new prop
-  ([#3091](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3091))
-  ([1f35219](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1f35219))
-- **Quote:** optional `copy2` prop added to the component
-  ([#2835](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2835))
-  ([821f227](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/821f227))
-- **SimpleOverview:** remove SimpleOverview pattern
-  ([285d013](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/285d013))
-- **styles:** add missing css imports
-  ([#3064](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3064))
-  ([00875fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/00875fe))
-- **TableOfContents:** added offset to fix scroll issues on mobile
-  ([#2760](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2760))
-  ([ee9a229](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ee9a229))
-- **TableOfContents:** changed `headingContent` from div to Image
-  ([#2842](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2842))
-  ([35899c7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/35899c7))
-- **TableOfContents:** fixed missing hover and hidden default label
-  ([#2800](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2800))
-  ([a411717](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a411717))
-- **ToC:** mobile selector css fixes
-  ([b4371cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4371cd))
-- **VideoPlayer:** create distinct videoplayer ids in order to place multiple of
-  the same video
-  ([#2938](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2938))
-  ([d8aa7c2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d8aa7c2))
-- **VideoPlayer:** ensure only the video thumbnail for the video clicked gets
-  removed from DOM
-  ([#2857](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2857))
-  ([e723958](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e723958))
-
-### Features
-
-- **ButtonGroup:** added top alignment to icon in ButtonGroup
-  ([#2785](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2785))
-  ([129d897](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/129d897))
-- **CalloutData:** new experimental pattern created
-  ([#2873](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2873))
-  ([7de0938](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7de0938))
-- **Card:** add link text option to clickable card
-  ([#3097](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3097))
-  ([26b5678](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/26b5678))
-- **CardSectionImages:** added codesandbox implementation
-  ([#2804](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2804))
-  ([48c7743](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48c7743))
-- **CardSectionSimple:** added codesandbox implementation
-  ([#2846](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2846))
-  ([5d7bdcc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d7bdcc))
-- **content-group-simple:** added codesandbox example implementation
-  ([#2759](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2759))
-  ([d67f015](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d67f015))
-- **ContentBlockHeadlines:** add ContentBlockHeadlines pattern
-  ([#3040](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3040))
-  ([750587b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/750587b))
-- **ContentBlockMedia:** added codesandbox example implementation
-  ([#2843](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2843))
-  ([ecf5af4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ecf5af4))
-- **ContentBlockMixed:** added codesandbox example implementation
-  ([#2809](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2809))
-  ([86699c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/86699c6))
-- **ContentBlockSegmented:** added codesandbox example implementation
-  ([#2808](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2808))
-  ([dcd12d4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dcd12d4))
-- **ContentBlockSimple:** added codesandbox example implementation
-  ([#2806](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2806))
-  ([abfd22f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/abfd22f))
-- **ContentGroupCards:** added codesandbox example implementation
-  ([#2773](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2773))
-  ([2aee162](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2aee162))
-- **ContentGroupPictograms:** added codesandbox example implementation
-  ([#2763](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2763))
-  ([a4ff165](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a4ff165))
-- **Leadspace:** added codesandbox implementation
-  ([#2844](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2844))
-  ([e3c8cb5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e3c8cb5))
-- **LinkList:** added codesandbox exampl
-  ([bf68a9b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bf68a9b))
-- **LinkWithIcon:** add option for icon on left
-  ([#2980](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2980))
-  ([109f926](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/109f926))
-- **LinkWithIcon:** enabled inverse theming
-  ([1278218](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1278218))
-- **MarkdownToHTML:** add full markdown support in content
-  ([#2925](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2925))
-  ([abd4848](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/abd4848))
-- **MastheadL1:** component enabled for dynamic data
-  ([#3053](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3053))
-  ([6100d9d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6100d9d))
-- **VideoPlayer:** add aspect ratio overrides
-  ([#3139](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/3139))
-  ([7be6d3b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7be6d3b))
-- **VideoPlayer:** added codesandbox example implementation
-  ([#2745](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2745))
-  ([39e192d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/39e192d))
-- **WebComponents:** add Web Components package
-  ([#2820](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2820))
-  ([6372912](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6372912)),
-  closes
-  [#2810](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2810)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0-rc.5...@carbon/ibmdotcom-react@1.8.0) (2020-06-23)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0-rc.5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0-rc.4...@carbon/ibmdotcom-react@1.8.0-rc.5) (2020-06-22)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0-rc.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0-rc.3...@carbon/ibmdotcom-react@1.8.0-rc.4) (2020-06-19)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0-rc.3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0-rc.2...@carbon/ibmdotcom-react@1.8.0-rc.3) (2020-06-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0-rc.1...@carbon/ibmdotcom-react@1.8.0-rc.2) (2020-06-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.8.0-rc.0...@carbon/ibmdotcom-react@1.8.0-rc.1) (2020-06-16)
-
-### Bug Fixes
-
-- **ButtonGroup:** text wrapping fix
-  ([#2775](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2775))
-  ([d0897c2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d0897c2))
-- **TableOfContents:** added offset to fix scroll issue on mobile
-  ([#2760](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2760))
-  ([a7754f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a7754f9))
-- **utilities:** add new util to remove html tags and entities
-  ([9bab97f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9bab97f))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.8.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.7.0...@carbon/ibmdotcom-react@1.8.0-rc.0) (2020-06-12)
-
-### Bug Fixes
-
-- **ButtonGroup:** adding sameWidth utility to the pattern
-  ([#2490](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2490))
-  ([542283e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/542283e)),
-  closes
-  [#2602](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2602)
-- **ContentGroupHorizontal:** adding horizontal rule at the end
-  ([#2562](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2562))
-  ([23d7f4a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/23d7f4a))
-- **CTA:** disable thumbnail image when using video card in linklist
-  ([#2691](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2691))
-  ([969da0e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/969da0e))
-- **FeatCardBlockLarge:** corrected grid alignment
-  ([#2719](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2719))
-  ([0370355](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0370355))
-- **Footer:** `key` prop added to the trustE <li/> item
-  ([#2703](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2703))
-  ([76ac7d5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/76ac7d5))
-- **Quote:** decode-string util called on effect
-  ([#2694](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2694))
-  ([63ba6ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/63ba6ea))
-- **VideoPlayer:** fix for mocking VideoPlayerAPI in storyshots
-  ([#2692](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2692))
-  ([3699699](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3699699))
-- **VideoPlayer:** have overlay poster image on video player to align with
-  visual specs
-  ([#2716](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2716))
-  ([0ceed38](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0ceed38))
-
-### Features
-
-- **cors-proxy:** adding new cors proxy for adopters
-  ([#2742](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2742))
-  ([d31201d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d31201d))
-- **examples:** codesandbox examples added to layout, table-of-contents and
-  link-with-icon
-  ([#2721](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2721))
-  ([25696ae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/25696ae))
-- **FeatureCard:** added codesandbox example implementation
-  ([#2739](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2739))
-  ([3e4d84f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e4d84f))
-- **Layout:** added codesandbox example in readme
-  ([#2709](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2709))
-  ([e16f33e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e16f33e))
-- **markdownToHTML:** adds full markdown support
-  ([#2715](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2715))
-  ([41ebf6f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/41ebf6f))
-- **styles:** support CSS custom properties in theme zoning
-  ([#2735](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2735))
-  ([032fa6f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/032fa6f)),
-  closes
-  [#2733](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2733)
-
-# 1.8.0-beta.4335 (2020-06-05)
-
-### Bug Fixes
-
-- **accessibility:** jaws cannot read `LinksList`
-  ([#2634](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2634))
-  ([88b30fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/88b30fe))
-- **accessibility:** lifting up role=region from anchor tag in CardLink
-  ([#2659](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2659))
-  ([43b1f22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/43b1f22))
-- **corsproxy:** removing cors proxy on production environments
-  ([#2633](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2633))
-  ([81a4587](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/81a4587))
-- **Image:** fix invalid aria-describedby
-  ([#2629](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2629))
-  ([831ad3a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/831ad3a))
-- **pattern:** added default no icon option for button CTA
-  ([#2601](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2601))
-  ([184e648](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/184e648))
-- **pattern:** feature-card border style fixed on focus
-  ([#2580](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2580))
-  ([078a4ab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/078a4ab))
-- **pattern:** fixed missing export on content-block-cards
-  ([#2507](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2507))
-  ([62674a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/62674a2))
-- **pattern:** table-of-contents aside child now gets scrolled
-  ([#2631](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2631))
-  ([257b47c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/257b47c))
-- **pattern:** updated section detection on table-of-contents
-  ([#2640](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2640))
-  ([00ae5e9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/00ae5e9))
-- **storybook:** bug happening in the masthead iframe view
-  ([#2593](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2593))
-  ([6053de1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6053de1))
-- **useVideoData:** fix a call in TDZ
-  ([#2628](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2628))
-  ([0dc8cc8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0dc8cc8))
-
-### Features
-
-- **cardlink:** adds cardlink
-  ([#2506](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2506))
-  ([bfae7e0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bfae7e0))
-- **codesandbox:** masthead-footer-dotcomshell-examples
-  ([#2636](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2636))
-  ([6450e78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6450e78))
-- **component:** enhance card to support video
-  ([#2652](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2652))
-  ([d363d4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d363d4f))
-- **logogrid:** adding logogrid pattern
-  ([#2489](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2489))
-  ([c2492f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c2492f9))
-- **pattern:** adding disable option for cardlink
-  ([#2626](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2626))
-  ([a49a306](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a49a306))
-- **patterns:** adding optional copy for ContentGroup patterns
-  ([#2620](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2620))
-  ([3588907](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3588907))
-
-# 1.7.0-beta.4287 (2020-05-26)
-
-### Bug Fixes
-
-- **masthead:** added top property to profile-list
-  ([#2454](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2454))
-  ([ad6a6fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ad6a6fe))
-- **pattern:** fixed jump type not working on card-cta
-  ([#2500](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2500))
-  ([438e3e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/438e3e3))
-- **pattern:** fixed video type not working on feature-cta
-  ([#2496](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2496))
-  ([4f8a8f3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f8a8f3))
-- **pattern:** updated section detection on table-of-contents
-  ([#2459](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2459))
-  ([35f76e0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/35f76e0))
-
-### Features
-
-- **linklist:** add linklist variations
-  ([#2452](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2452))
-  ([0180477](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0180477)),
-  closes
-  [#1850](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1850)
-- **pattern:** cta added to content-block-segmented items
-  ([#2396](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2396))
-  ([0246fb6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0246fb6))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.7.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.7.0-rc.1...@carbon/ibmdotcom-react@1.7.0) (2020-05-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.7.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.7.0-rc.0...@carbon/ibmdotcom-react@1.7.0-rc.1) (2020-05-20)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.7.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.6.0...@carbon/ibmdotcom-react@1.7.0-rc.0) (2020-05-18)
-
-### Bug Fixes
-
-- **accessibility:** add aria-current to active item; fixes
-  [#1396](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1396)
-  ([8ab2547](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8ab2547))
-- **callout:** changed object classname to content
-  ([bc2ac5b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bc2ac5b))
-- **callout:** deleted buttongroup example
-  ([9fe36dc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9fe36dc))
-- **callout:** missing readme import
-  ([cef490f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cef490f))
-- **callout:** updated readme
-  ([87831fc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/87831fc))
-- **callout:** updated readme and changed linklist to buttongroup
-  ([1e11f4a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1e11f4a))
-- **calloutwithmedia:** passed props in directly, updated readme
-  ([f274fba](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f274fba))
-- **calloutwithmedia:** updated readme
-  ([4243f64](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4243f64))
-- **calloutwithmedia:** updated readme
-  ([2339100](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2339100))
-- **calloutwithmedia:** updated readme and deleted image prop
-  ([266b6ff](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/266b6ff))
-- **card:** change icon color for card back to blue and use icon passed in from
-  props
-  ([#2428](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2428))
-  ([de1c2d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/de1c2d8))
-- **card-section:** adding style imports for cardsection patterns
-  ([f1a01b9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f1a01b9))
-- **component:** add component export
-  ([67cdf6a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67cdf6a))
-- **component:** remove CardSection pattern
-  ([bae8b30](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bae8b30))
-- **component:** remove CardSection to use ContentSection
-  ([eaad27b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eaad27b))
-- **components:** update showDescription prop to showCaption
-  ([f72a3c8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f72a3c8))
-- **console:** add icon description to remove footer console error
-  ([1cb501b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1cb501b))
-- **console:** add icondescription and keys
-  ([00b2298](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/00b2298))
-- **console:** remove console errors for locale modal
-  ([1f34b0e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1f34b0e))
-- **console:** various fixes to console errors
-  ([08ed036](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/08ed036))
-- **content-section:** applying new mixin name in selectors
-  ([d828be2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d828be2))
-- **contentblock:** added inverse to grid and changed type to inverse
-  ([c175fab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c175fab))
-- **contentblock:** changed function to only apply token styles
-  ([a63553e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a63553e))
-- **contentblock:** deleted content-inverse mixin and fixed function
-  ([b6776a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b6776a5))
-- **contentblock:** fixed grid class
-  ([b975aaa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b975aaa))
-- **contentblock:** updated readme
-  ([8795d02](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8795d02))
-- **contentblock:** updated readme with inverse
-  ([6fda091](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6fda091))
-- **contentitem:** deleted boolean import and passed down inverse prop
-  ([dca6340](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dca6340))
-- **css:** update CardGroup/CardSection css imports
-  ([eca7c1d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eca7c1d))
-- **cta:** create custom hook for video data
-  ([8a18c77](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8a18c77))
-- **cta:** pass videoid to custom hook directly
-  ([1b63991](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1b63991))
-- **cta:** remove props and use ctalogic class instead
-  ([11b3f7c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/11b3f7c))
-- **cta:** remove rendercta method
-  ([bd206b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bd206b2))
-- **cta:** separate some basic logic into CTALogic file
-  ([dbf554d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dbf554d))
-- **cta-section:** adding key attribute to ContentItens
-  ([a6204de](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a6204de))
-- **cta-section:** adding themes support to the cta-section
-  ([#2409](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2409))
-  ([a11bb1d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a11bb1d))
-- **cta-section:** exporting cta-section in the sections module
-  ([a5a3315](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a5a3315))
-- **cta-section:** fixing css layout and removed useless knob
-  ([6543ba3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6543ba3))
-- **cta-section:** removing string from the storybook knob
-  ([d70124c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d70124c))
-- **cta-section:** updating snapshot in the react package
-  ([287399d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/287399d))
-- **cta-section:** updating snapshot to match changes
-  ([4338108](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4338108))
-- **dotcomshell:** passing additional footer props through dotcomshell
-  ([4880d72](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4880d72))
-- **imagewithcaption:** added inverse theme to grid
-  ([599e3bd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/599e3bd))
-- **imagewithcaption:** added inverse to readme
-  ([ca6d979](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ca6d979))
-- **imagewithcaption:** changed functions for better logic
-  ([1f3d403](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1f3d403))
-- **imagewithcaption:** changed type to bolean inverse update color token
-  ([d4ee7f8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d4ee7f8))
-- **imagewithcaption:** deleted text function and replaced with scss
-  ([e6df412](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e6df412))
-- **imagewithcaption:** updated readme
-  ([052a26f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/052a26f))
-- **index:** add lightbox and videoplayer to root
-  ([60b1e62](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/60b1e62))
-- **ipcinfo:** properly set the ipcinfo cookie in the locale modal
-  ([0f5fdcd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0f5fdcd))
-- **issue-1852:** cta size, no pattern heading
-  ([40ae8cb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/40ae8cb))
-- **issue-1852:** featcardlarge story
-  ([5f6db8f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5f6db8f))
-- **issue-1852:** no-copy token
-  ([21fd968](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/21fd968))
-- **issue-1852:** renaming
-  ([857e9f5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/857e9f5))
-- **issue-1852:** revet featcard
-  ([ccabc3e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ccabc3e))
-- **issue-1852:** update snapshot
-  ([1a258fc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1a258fc))
-- **issue-1852:** updated snapshot
-  ([0f7acde](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0f7acde))
-- **issue-1857:** "no-desc" breakpoints
-  ([f453e51](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f453e51))
-- **issue-1857:** more style/storybook fixes
-  ([40849ac](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/40849ac))
-- **issue-1857:** props directly in component
-  ([e75f6e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e75f6e3))
-- **issue-1857:** story edit
-  ([9ae0355](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9ae0355))
-- **issue-1857:** storybook knobs
-  ([b7591d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b7591d8))
-- **issue-1857:** taking care of the breakpoints
-  ([2027816](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2027816))
-- **issue-1857:** tokens, other fixes
-  ([458239e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/458239e))
-- **issue-1857:** updated snapshot
-  ([c506524](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c506524))
-- **issue-1857:** updated snapshot
-  ([357a176](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/357a176))
-- **issue-1857:** updated snapshot
-  ([0c17d78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0c17d78))
-- **issue-1857:** updated snapshot
-  ([19130b1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/19130b1))
-- **jest:** snapshot
-  ([23ea00d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/23ea00d))
-- **jest:** update snapshot
-  ([cf9e6ff](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cf9e6ff))
-- **jest:** update snapshot
-  ([4f77e73](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f77e73))
-- **jsx:** horizontal line reordered
-  ([3fa04be](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3fa04be))
-- **languageselector:** adding id to combo box
-  ([116dfd6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/116dfd6))
-- **languageselector:** properly pass the selected item to the callback
-  ([b179845](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b179845))
-- **languageselector:** uncommenting initialSelectedItem
-  ([197bac2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/197bac2))
-- **localemodal:** fixing prettier format
-  ([7069b33](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7069b33))
-- **localemodal:** updating async calls to be parallel
-  ([2490f99](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2490f99))
-- **markdown:** pass in false for createParagraphs
-  ([38cf5da](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/38cf5da))
-- **masthead:** update masthead nav chevron size; fixes
-  [#2069](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2069)
-  ([159e49f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/159e49f))
-- **pattern:** added listener cleanup for several patterns
-  ([806bd0f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/806bd0f))
-- **pattern:** added listener cleanup for several patterns
-  ([fb263b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fb263b8))
-- **pattern:** added listener cleanup for several patterns
-  ([eb24fbe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eb24fbe))
-- **pattern:** changed logic behind ul tags rendering
-  ([62072f4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/62072f4))
-- **pattern:** fixed circular dependency on card pattern
-  ([#2326](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2326))
-  ([110b0b4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/110b0b4))
-- **pattern:** updated legal nav logic
-  ([23462d0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/23462d0))
-- **percy:** adding pupetteer for jenkins
-  ([69ab916](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/69ab916))
-- **percy:** fixing percy flag for locale modal story
-  ([36e8fc5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36e8fc5))
-- **percy:** hiding cookie preferences in footer in percy output
-  ([#2427](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2427))
-  ([17e79e4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/17e79e4))
-- **percy:** hiding cookie preferences in percy output
-  ([#2420](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2420))
-  ([0c0a48a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0c0a48a))
-- **percy:** skipping various tests
-  ([82c2b3d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/82c2b3d))
-- **proptypes:** edit proptypes def for imagewithcaption and featurecard
-  ([48f5fe8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48f5fe8))
-- **react:** use relative paths for component import
-  ([616d315](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/616d315))
-- **react-exports:** fixing missing react exports
-  ([194e371](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/194e371))
-- **snapshot:** update snapshot
-  ([ac1fbaf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ac1fbaf))
-- **test:** update unit test for useVideoDat
-  ([7038378](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7038378))
-- **video:** use video name for caption; fixes
-  [#2313](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2313)
-  ([e737776](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e737776))
-- **video-player:** set different partner and uiconf ids for vp
-  ([523d45c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/523d45c))
-- **videoplayer:** got rid of text function and switched to scss
-  ([1e2a81a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1e2a81a))
-- **videoplayer:** add markdown utility to remove html
-  ([3b50514](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3b50514))
-- **videoplayer:** added inverse theme to grid
-  ([250f28e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/250f28e))
-- **videoplayer:** added inverse to readme
-  ([c51aa14](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c51aa14))
-- **videoplayer:** changed type string to inverse boolean
-  ([86cdcbd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/86cdcbd))
-- **videoplayer:** format partnerid and handle html in desc
-  ([6708a1c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6708a1c))
-- **videoplayer:** remove html markup from video description
-  ([8c97bb9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8c97bb9))
-- **videoplayer:** updated readme
-  ([f898027](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f898027))
-- **videoplayer:** use video player name for caption
-  ([77076bd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/77076bd))
-
-### Features
-
-- **callout:** added readme and storysnapshot
-  ([deda9ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/deda9ea))
-- **callout:** first commit
-  ([f68c33a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f68c33a))
-- **callout:** fixed grid spacing and added empty story example
-  ([c4abbdb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4abbdb))
-- **calloutwithmedia:** created callout with media block
-  ([18482b0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/18482b0))
-- **component:** add CardGroup sub-pattern
-  ([7108c2d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7108c2d))
-- **component:** add ContentItemHorizontal sub-pattern
-  ([12afacc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/12afacc))
-- **components:** add CardGroup pattern; fixes
-  [#1855](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1855)
-  ([c18cab2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c18cab2))
-- **contentblock:** added inverse theme
-  ([ba1fbb4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ba1fbb4))
-- **contentblocksimple:** added inverse theme to contentblocksimple
-  ([2db5e26](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2db5e26))
-- **contentitem:** added inverse to content item
-  ([908b2b7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/908b2b7))
-- **cta:** add download type; fixes
-  [#2352](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2352)
-  ([b0a6036](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b0a6036))
-- **cta-section:** `ContentItem` props and knobs added
-  ([50ed463](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/50ed463))
-- **cta-section:** added knob to the cta copy
-  ([5b4bf88](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5b4bf88))
-- **cta-section:** booting component
-  ([ac21874](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ac21874))
-- **cta-section:** change cta type storybook knob added
-  ([8aaae8f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8aaae8f))
-- **image-with-caption:** launch lightbox for image with caption
-  ([#2413](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2413))
-  ([ede324f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ede324f))
-- **imagewithcaption-inverse:** added inverse theme
-  ([9a21f76](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9a21f76))
-- **languageselector:** adding language selector option for the footer
-  ([a3e9c35](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a3e9c35))
-- **localemodal:** exposing the locale modal data/display as props
-  ([88c6060](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/88c6060))
-- **pattern:** add ContentBlockCards pattern
-  ([8b7d23e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8b7d23e))
-- **pattern:** added new layout for lg and above resolutions
-  ([c0cab2c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c0cab2c))
-- **pattern:** callout-quote pattern created
-  ([41a68cb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/41a68cb))
-- **pattern:** callout-quote pattern created
-  ([c458929](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c458929))
-- **pattern:** feature-card sub-pattern created
-  ([dec3d80](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dec3d80))
-- **pattern:** feature-card sub-pattern created
-  ([a61f933](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a61f933))
-- **pattern:** quote pattern created
-  ([04417cc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/04417cc))
-- **percy:** adding visual regression testing tool
-  ([b2d6110](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b2d6110))
-- **percy:** passing data into locale modal for percy
-  ([2e04a35](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2e04a35))
-- **rtl:** adding cloud foundry manifest
-  ([bb25cad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bb25cad))
-- **rtl:** tweaks to rtl flag for storybook
-  ([3e9e530](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e9e530))
-- **scss:** updated colors based on new design specs
-  ([cde4131](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cde4131))
-- **style:** add ContentItemHorizontal styles and story
-  ([8aa3c22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8aa3c22))
-- **videoplayer:** added inverse theme
-  ([9d55807](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9d55807))
-- **videoplayer:** added inverse theme with better logic
-  ([3ae9396](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ae9396))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.6.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.6.0-rc.1...@carbon/ibmdotcom-react@1.6.0) (2020-04-28)
-
-### Bug Fixes
-
-- **storybook:** add separate story for aside elements
-  ([f8005ae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f8005ae))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.6.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.6.0-rc.0...@carbon/ibmdotcom-react@1.6.0-rc.1) (2020-04-22)
-
-### Bug Fixes
-
-- **cta:** pass in title and desc from video api
-  ([3b4c3d0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3b4c3d0))
-- **leadspace:** properly point to defaultSrc for the Image
-  ([ad415af](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ad415af))
-- **lightbox:** have lightbox make video api call for text
-  ([bf02da0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bf02da0))
-- **props:** fix proptype type
-  ([3a3e07e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3a3e07e))
-- **react:** fix react console errors; fixes
-  [#2099](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2099)
-  ([3e1d4ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3e1d4ee))
-- **react:** fix react masthead console errors
-  ([a4e401e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a4e401e))
-- **react:** remove javascript:void fixes react errors
-  ([c9e9431](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c9e9431))
-- **storybook:** add grid classes for content block patterns mobile
-  ([077c522](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/077c522))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.6.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.1...@carbon/ibmdotcom-react@1.6.0-rc.0) (2020-04-17)
-
-### Bug Fixes
-
-- **access:** add aria elements to locale; fixes
-  [#1768](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1768)
-  ([952adad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/952adad))
-- **accessibilit:** add aria role to CTA card; fixes
-  [#1426](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1426)
-  ([dd041bb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dd041bb))
-- **accessibility:** add aria-label to IBM logo; fixes
-  [#2055](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2055)
-  ([c463449](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c463449))
-- **accessibility:** added aria-label to back button
-  ([0a983df](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0a983df))
-- **accessibility:** added dynamic label to back button
-  ([5460ed7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5460ed7))
-- **accessibility:** added heading as aria-label
-  ([5465356](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5465356))
-- **accessibility:** added label to footer locale button
-  ([1d506d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1d506d8))
-- **accessibility:** added long-description to image component
-  ([b494a53](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b494a53))
-- **accessibility:** added region to wrapping div of card
-  ([1b59c38](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1b59c38))
-- **accessibility:** added tab-index to locale cards and heading
-  ([36f011e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36f011e))
-- **accessibility:** added video description as aria-label
-  ([4774dfc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4774dfc))
-- **accessibility:** changed footer tag for div in card
-  ([3415dfa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3415dfa))
-- **accessibility:** changed long-description for aria-labeledby
-  ([99ca4a6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/99ca4a6))
-- **accessibility:** focus now change to the content heading on toc
-  ([9f1d1a1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9f1d1a1))
-- **accessibility:** locale-modal back button now works with keyboard
-  ([07c7617](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07c7617))
-- **accessibility:** locale-modal back button now works with keyboard
-  ([97bca78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97bca78))
-- **accessibility:** removed duplicate listeners
-  ([58ea48f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/58ea48f))
-- **accessibility:** removed duplicate listeners
-  ([0028dc9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0028dc9))
-- **autoid:** add autoid to ContentGroup CTA; fixes
-  [#1884](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1884);
-  fixes 1747
-  ([ebc15f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ebc15f9))
-- **content-block:** add check for aside object to prevent breaking
-  ([6e64519](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6e64519))
-- **content-block:** add check for linklist and wrap in layout
-  ([836e50b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/836e50b))
-- **content-block:** make right pannel of content block more generic
-  ([b29e4fb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b29e4fb))
-- **content-block:** pass in aside knob in contentblock decorators
-  ([a2bef9a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a2bef9a))
-- **content-block:** use layout to include linklist
-  ([ce18629](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ce18629))
-- **contentblockmedia:** exposing knob for media object
-  ([e65d488](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e65d488))
-- **css:** fix layout with carbon-col
-  ([f87aa8c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f87aa8c))
-- **cta:** add preventDefault to prevent reload when link is clicked
-  ([0e1fea8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0e1fea8))
-- **cta:** pass props to featurecardcta correctly
-  ([e54ac1b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e54ac1b))
-- **cta:** refactor cta into subcomponents
-  ([e705a20](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e705a20))
-- **cta:** rename func used in useEffect to be more specific
-  ([c4e8273](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4e8273))
-- **cta:** set duration state for button group
-  ([2617657](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2617657))
-- **cta:** set href if video and prevent rerendering
-  ([ebde5b5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ebde5b5))
-- **cta:** simplify to remove duplicate code
-  ([094994d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/094994d))
-- **docs:** removed feature-flag from docs and env example
-  ([c7c4bd0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c7c4bd0))
-- **docs:** updated links
-  ([b447c14](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b447c14))
-- **expressivemodal:** changed fullwidth to expanded and max-height to height
-  ([#1658](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1658))
-  ([6f1c933](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6f1c933))
-- **grid:** adding grid classes by default in global import
-  ([9c1a2cc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9c1a2cc))
-- **image:** decode image strings to prevent encoding
-  ([5b728ce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5b728ce))
-- **imports:** bunch of import fixes for styles
-  ([7a10229](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a10229))
-- **leadspace:** added optional button feature
-  ([234a713](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/234a713))
-- **leadspace:** fixed default icons on buttongroup for leadspace
-  ([24343ef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/24343ef))
-- **leadspace:** fixed default icons on buttongroup for leadspace
-  ([266aa78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/266aa78))
-- **leadspace:** fixed tabbing order for buttons on leadspace
-  ([d6f8dee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d6f8dee))
-- **locale-selector:** changed icon and em-dash added
-  ([18a5688](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/18a5688))
-- **locale-service:** changed dash to em-dash in location string
-  ([5003965](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5003965))
-- **masthead:** add search visibility event handlers
-  ([09ac31d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/09ac31d))
-- **masthead:** move search actions out of combobox
-  ([12b6e11](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/12b6e11))
-- **nodesass:** adding node-sass in offline mirror
-  ([8aa9d86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8aa9d86))
-- **pattern:** fixed current section indicator override
-  ([9dc78ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9dc78ee))
-- **pattern:** fixed dropdown label for mobile
-  ([03e991d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/03e991d))
-- **pattern:** fixed same height usage for the top-level card-link
-  ([6535a76](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6535a76))
-- **profile:** stops profile menu scroll; fixes
-  [#1332](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1332)
-  ([0dc4a6c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0dc4a6c))
-- **readme:** add readme to contentblock
-  ([7c4e563](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7c4e563))
-- **scss:** added max-width to dotcom-shell content
-  ([845afd6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/845afd6))
-- **scss:** added max-width to dotcom-shell content
-  ([2d9176e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2d9176e))
-- **scss:** changed footer link selector and added new class to links
-  ([ba086d2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ba086d2))
-- **search:** close search on blur; fixes
-  [#2064](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2064)
-  ([b89c2cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b89c2cf))
-- **search:** search remains open on blur; fixes
-  [#2060](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2060)
-  ([cced600](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cced600))
-- **search:** update aria label for search icon; fixes
-  [#2061](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/2061)
-  ([77b18ca](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/77b18ca))
-- **story:** removed dotcomshell from leadspace story
-  ([e97178f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e97178f))
-- **storybook:** alignment of storybook package versions
-  ([45e30df](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/45e30df))
-- **storybook:** specify image object to pass into contentblock decorator
-  ([8aed7c7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8aed7c7))
-- **storyshots:** update snapshot file
-  ([2315f2e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2315f2e))
-- **tableofcontents:** added trimming for empty prop validation
-  ([#1582](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1582))
-  ([280eb78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/280eb78))
-- **tests:** updated snapshot
-  ([45fd2e9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/45fd2e9))
-- **uishell:** skipping carbon UIShell for jest code coverage
-  ([d1c95fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d1c95fe))
-- **unittesting:** adding back unit test run in ci-check for React
-  ([8cb0829](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8cb0829))
-- **unittesting:** additional snapshot update
-  ([5c8db3c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5c8db3c))
-- **unittesting:** additional snapshot update
-  ([fb9144e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fb9144e))
-- **unittesting:** aligning jest versions across packages
-  ([c4e8ac0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4e8ac0))
-- **unittesting:** aligning storybook version across packages
-  ([766161f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/766161f))
-- **unittesting:** multiple unit test fixes in React package
-  ([7c0de21](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7c0de21))
-- **util:** added optional offset parameter
-  ([1305062](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1305062))
-- **util:** remove decodeString util from Image
-  ([f6ea46c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f6ea46c))
-
-### Features
-
-- **cloud:** adding manifest files for canary deployments
-  ([828f4cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/828f4cd))
-- **cta:** pull in video title from api to use in cta
-  ([d709928](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d709928))
-- **cta:** render lightbox for buttongroup cta
-  ([781a9a3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/781a9a3))
-- **cta:** render lightbox video player to ctas
-  ([38b2d9f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/38b2d9f))
-- **embedded-vp:** first pass at trying to render vp in lightbox
-  ([a40b29f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a40b29f))
-- **node:** updating to node 12
-  ([951989b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/951989b))
-- **pattern:** removed feature-flag for lightbox
-  ([67b6513](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67b6513))
-- **videoplayer:** update patterns to use videoplayer
-  ([e62a167](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e62a167))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.5.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.1-rc.2...@carbon/ibmdotcom-react@1.5.1) (2020-03-30)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.5.1-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.1-rc.1...@carbon/ibmdotcom-react@1.5.1-rc.2) (2020-03-26)
-
-### Bug Fixes
-
-- **card-section-images:** account for eyebrow in sameheight utility
-  ([74184d2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/74184d2))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.5.1-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.1-rc.0...@carbon/ibmdotcom-react@1.5.1-rc.1) (2020-03-26)
-
-### Bug Fixes
-
-- **accessibility:** focus now change to the content heading on toc
-  ([#1787](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1787))
-  ([5af81de](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5af81de))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.5.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.0...@carbon/ibmdotcom-react@1.5.1-rc.0) (2020-03-23)
-
-### Bug Fixes
-
-- **cardsection:** fixed the aspect ratio on images
-  ([f686ddf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f686ddf))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.5.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.0-rc.1...@carbon/ibmdotcom-react@1.5.0) (2020-03-18)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.5.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.5.0-rc.0...@carbon/ibmdotcom-react@1.5.0-rc.1) (2020-03-13)
-
-### Bug Fixes
-
-- **autoid:** make autoids more specific for card section
-  ([0fd8333](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0fd8333))
-- **cta:** fix CTA text link prop object; fixes
-  [#1682](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1682)
-  ([dc9d1d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dc9d1d8))
-- **layout:** fix to sticky attribute for safari browsers
-  ([680b57e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/680b57e))
-- **pattern:** fixed left navigation not showing any selected section
-  ([d537c41](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d537c41))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.5.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.4.1...@carbon/ibmdotcom-react@1.5.0-rc.0) (2020-03-06)
-
-### Bug Fixes
-
-- **accessibility:** added role and aria-labelledby on cards
-  ([7033207](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7033207))
-- **accessibility:** removed trigger focus
-  ([d05244e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d05244e))
-- **alignment:** added sameheight for eyebrow to fix alignment
-  ([6c86a8b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6c86a8b))
-- **branch:** fixed merged conflicts
-  ([d35ed22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d35ed22))
-- **cardsection:** added role and aria-labelledby in card of cardSection
-  ([#1489](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1489))
-  ([ca3c2af](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ca3c2af))
-- **component:** add translation props
-  ([a46572f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a46572f))
-- **content-item:** update readme with links to imagewithcaption
-  ([fca68e8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fca68e8))
-- **contentgroupcards:** raised test coverage on ContentGroupCards
-  ([ea9b68c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ea9b68c))
-- **docs:** changed image component reference on readme
-  ([bda3351](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bda3351))
-- **docs:** update docs with new FPO image hosts
-  ([d57034d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d57034d))
-- **feature-card:** address small tweaks to readme
-  ([ddd9574](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ddd9574))
-- **feature-card:** change icon position and accept icon as prop
-  ([cff070c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cff070c))
-- **feature-card:** correct cta object structure for icon
-  ([a23efba](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a23efba))
-- **feature-card:** pass in correct card prop
-  ([60f0333](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/60f0333))
-- **feature-card:** remove unnecessary index scss file
-  ([162b9c1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/162b9c1))
-- **feature-card:** renaming feature link to feature card
-  ([19234ed](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/19234ed))
-- **feature-card:** set card itself to hang
-  ([0bf92a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0bf92a5))
-- **feature-card:** update prop type
-  ([ab50679](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ab50679))
-- **feature-card:** update readme and prop docs
-  ([66d38f2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/66d38f2))
-- **image:** align image props to func specs
-  ([c0c85cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c0c85cd))
-- **image-with-caption:** add grid to image with caption story
-  ([76cb568](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/76cb568))
-- **leadspace:** added gradient
-  ([43cfaee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/43cfaee))
-- **leadspace:** adjust leadspace centered mobile
-  ([cf05a58](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cf05a58))
-- **leadspace:** deleted leadspace centered
-  ([4ac73c3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4ac73c3))
-- **leadspace:** fixed alignment
-  ([744fc89](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/744fc89))
-- **leadspace:** remove buttongroup flag and update readme
-  ([f45d432](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f45d432))
-- **leadspace:** remove centerContent func
-  ([9b33012](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9b33012))
-- **leadspace:** remove leadspace centered from index file
-  ([395dc9b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/395dc9b))
-- **leadspace:** remove window event listener
-  ([4763712](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4763712))
-- **leadspace:** removed feature flag
-  ([b960a1a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b960a1a))
-- **leadspace:** removed feature flag from leadspace centered
-  ([1660ebd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1660ebd))
-- **leadspace:** removed featureflag from leadspace
-  ([13a91b3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/13a91b3))
-- **mastheadprofile:** fixed styling of profile icon on masthead
-  ([fa8517d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fa8517d))
-- **pattern:** changes on props
-  ([24e124b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/24e124b))
-- **pattern:** name change fixed on jump to menu
-  ([ce05b79](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ce05b79))
-- **pattern:** switch back to delete operator
-  ([4fc1ff0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4fc1ff0))
-- **pattern:** updated according review comments
-  ([64b7efb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/64b7efb))
-- **pattern:** use ContentGroupSimple in ContentBlockMedia
-  ([2eebb3a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2eebb3a))
-- **pattern:** validate and do not pass cta into cardsectionimages
-  ([2bd3f83](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2bd3f83))
-- **profileicon:** fixed dropshadow and added focus on first item
-  ([36595b6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36595b6))
-- **readme:** rename to featurecard in readme
-  ([2aad63d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2aad63d))
-- **scss:** adjusted padding on mobile version to match design specs
-  ([d06cccb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d06cccb))
-- **scss:** adjusted padding on mobile version to match design specs
-  ([9d7ac4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9d7ac4f))
-- **spacing:** added correct spacing for card
-  ([991e84b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/991e84b))
-- **spacing:** fixes spacing on the content group for the moment
-  ([2343059](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2343059))
-- **spacing:** initial pass to fix contentitem spacing
-  ([753f1d2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/753f1d2))
-- **spacing:** removing sub-pattern classnames from decorators
-  ([2182b7b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2182b7b))
-- **spacing:** worked to fix spacing in content block
-  ([abb3349](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/abb3349))
-- **story:** removed aria knob from story
-  ([65bf04a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/65bf04a))
-- **storybook:** fix storybook var for TOC
-  ([d51778a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d51778a))
-- **storybook:** update FPO image host for stories
-  ([896ef4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/896ef4f))
-- **styles:** fix to import in style build
-  ([e965755](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e965755))
-- **sub-pattern:** screen reader content targeting
-  ([1a2fce3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1a2fce3))
-- **sub-pattern:** screen reader content targeting
-  ([80c82cc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80c82cc))
-
-### Features
-
-- **cardsectionimages:** added aspect ratio for cardsection images pattern
-  ([#1495](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1495))
-  ([48f7d7a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48f7d7a))
-- **componont:** change component props to use json; fixes
-  [#1310](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1310)
-  ([211fabb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/211fabb))
-- **content-item:** update content item with imagewithcaption component
-  ([675dbad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/675dbad))
-- **image-with-caption:** image with caption component)
-  ([98316da](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/98316da))
-- **layout:** added 2/3 - 1/3 layout
-  ([#1606](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1606))
-  ([2255a54](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2255a54))
-- **leadspace:** added background image functionality
-  ([3a7b6cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3a7b6cf))
-- **leadspace:** merging centered leadspace with leadspace
-  ([9743fb4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9743fb4))
-- **learntest:** adding learn test page for nextjs
-  ([0f3c694](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0f3c694))
-- **pattern:** added ### in CardSectionImages README file
-  ([67dcede](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67dcede))
-- **pattern:** added boolean knob in cardSection -simple story
-  ([a4b5b96](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a4b5b96))
-- **pattern:** added boolean knob to control a cta prop
-  ([f00296f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f00296f))
-- **pattern:** added CTA inverse for cardSection simple
-  ([5a3a710](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5a3a710))
-- **pattern:** added grid in story and cotainer
-  ([06ee965](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/06ee965))
-- **pattern:** added little condition to add cta based pattern type
-  ([793ea81](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/793ea81))
-- **pattern:** added scss, unittest and documentation
-  ([0300c0b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0300c0b))
-- **pattern:** added the README files for pattern and scss
-  ([c4e0acc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4e0acc))
-- **pattern:** added unit test case
-  ([b819730](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b819730))
-- **pattern:** centered the LinkList in storybook
-  ([fcf141a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fcf141a))
-- **pattern:** changed prop name of Card content to copy
-  ([c4573b4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4573b4))
-- **pattern:** changed story name to - with images
-  ([07b24b0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07b24b0))
-- **pattern:** changed the heading to copy
-  ([b2d4448](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b2d4448))
-- **pattern:** contentsection initial commit
-  ([6107d5c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6107d5c))
-- **pattern:** created LinkList pattern
-  ([2ba2129](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2ba2129))
-- **pattern:** cta is now optional for content-group-pictograms
-  ([014d4fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/014d4fe))
-- **pattern:** gave spave for text knob
-  ([c60a938](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c60a938))
-- **pattern:** leaverage the cardSection cards array
-  ([44212b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/44212b8))
-- **pattern:** made changes according to review comments
-  ([39c6024](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/39c6024))
-- **pattern:** made changes as per review comments
-  ([85f1224](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/85f1224))
-- **pattern:** made changes as per review comments
-  ([b7eeffd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b7eeffd))
-- **pattern:** made changes as per review comments
-  ([9fb96f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9fb96f6))
-- **pattern:** made changes cards.json fileds
-  ([ac05dcc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ac05dcc))
-- **pattern:** made changes in scss and jsx
-  ([26d8d62](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/26d8d62))
-- **pattern:** made changes to address the review comments
-  ([748903e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/748903e))
-- **pattern:** made changes to the ontology and functional specs
-  ([322712b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/322712b))
-- **pattern:** made changes to the ontology and functional specs
-  ([d49286d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d49286d))
-- **pattern:** made CTA inverse optional as a knob
-  ([7b67199](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7b67199))
-- **pattern:** moved heading text knob to above
-  ([a8c75db](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a8c75db))
-- **pattern:** pattern ontology development of card section
-  ([7d77ad8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d77ad8))
-- **pattern:** props alignment in documentaion and scss
-  ([8f0bfe2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8f0bfe2))
-- **pattern:** removed cta prop from CardSectionImages story
-  ([48d2e3f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/48d2e3f))
-- **pattern:** renamed and updated as per functional specs
-  ([33a8458](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/33a8458))
-- **pattern:** responded to the review comments
-  ([9148b9f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9148b9f))
-- **pattern:** responded to the review comments
-  ([f2bef6d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f2bef6d))
-- **pattern:** separated from cardSection story and repose to review
-  ([b43c020](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b43c020))
-- **pattern:** separated from cardSection story and reponse to review
-  ([dbdbce6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dbdbce6))
-- **pattern:** small jsx changes and documentation
-  ([0477d6e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0477d6e))
-- **pattern:** small parameter changes
-  ([8df6d5c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8df6d5c))
-- **pattern:** updated and added scss documentation
-  ([c9d6f31](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c9d6f31))
-- **pattern:** updated as per the review comments
-  ([4b1f60f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4b1f60f))
-- **pattern:** updated CTA style to card and updated styles
-  ([f92c6e0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f92c6e0))
-- **pattern:** updated styling and cards props
-  ([a1e8ceb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a1e8ceb))
-- **pattern:** updated the documentation
-  ([4c4284b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4c4284b))
-- **pattern:** updated the documentation
-  ([8c323b4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8c323b4))
-- **pattern:** updated the documentation
-  ([bc06cb0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bc06cb0))
-- **pattern:** updated the documentation
-  ([f567a96](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f567a96))
-- **pattern:** updated the documentation
-  ([2c6b1ff](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2c6b1ff))
-- **pattern:** updated the documentation and cards array
-  ([23a8453](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/23a8453))
-- **pattern:** updated the documentation as per review commnents
-  ([d7aaca1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d7aaca1))
-- **pattern:** updated the documentation as per review commnents
-  ([b2b0568](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b2b0568))
-- **pattern:** updated the documentation as per review commnents
-  ([40c5c42](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/40c5c42))
-- **pattern:** updated the documentation as per review commnents
-  ([753e5f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/753e5f6))
-- **pattern:** updated the documents based on review
-  ([fe97913](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fe97913))
-- **pattern:** updated the imports and README
-  ([1aa3e96](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1aa3e96))
-- **pattern:** updated the jsx, documentation, story and scss
-  ([c9208db](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c9208db))
-- **pattern:** updated the modifier hyphen to underscore
-  ([fad11eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fad11eb))
-- **pattern:** updated the README
-  ([07a88e9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07a88e9))
-- **pattern:** updated the README
-  ([8b2e280](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8b2e280))
-- **pattern:** updated the README
-  ([bce39c9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bce39c9))
-- **pattern:** updated the README
-  ([1cd4a22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1cd4a22))
-- **pattern:** updated the README file
-  ([c6c11d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c6c11d8))
-- **pattern:** updated the scss and story
-  ([e758f75](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e758f75))
-- **pattern:** updated the scss selector
-  ([9a4ea01](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9a4ea01))
-- **pattern:** updated the scss selector and rules
-  ([ce6501c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ce6501c))
-- **pattern:** utilizing the ContentSection in CardSection pattern
-  ([eefedbf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eefedbf))
-- **story:** updated storybook
-  ([d302025](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d302025))
-- **utility:** addressed the review comments
-  ([89c550c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/89c550c))
-- **utility:** make use of smoothScroll util in tableOfContents
-  ([b79ef5a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b79ef5a))
-- **utility:** removed smoothScroll args, parameters from curly braces
-  ([b1fa073](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b1fa073))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.4.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.4.1-rc.0...@carbon/ibmdotcom-react@1.4.1) (2020-02-28)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.4.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.4.0...@carbon/ibmdotcom-react@1.4.1-rc.0) (2020-02-26)
-
-### Bug Fixes
-
-- **css:** adds missing css to block-level patterns; fixes
-  [#1488](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1488)
-  ([d3d6052](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d3d6052))
-- **localebutton:** added prop to disable the locale button
-  ([dee069f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dee069f))
-- **pattern:** fix block-level autoid structure; fixes
-  [#1490](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1490)
-  ([e078536](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e078536))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.4.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.4.0-rc.2...@carbon/ibmdotcom-react@1.4.0) (2020-02-25)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.4.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.4.0-rc.1...@carbon/ibmdotcom-react@1.4.0-rc.2) (2020-02-25)
-
-### Bug Fixes
-
-- **dependencies:** updating utilities dependency to rc.1
-  ([efcdd19](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/efcdd19))
-- **featureflags:** removed unused feature flags
-  ([0642cde](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0642cde))
-- **pattern:** listsection is now ContentBlockMixed
-  ([5b1edf2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5b1edf2))
-- **tableofcontents:** removed feature flag documentation
-  ([fbde8ce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fbde8ce))
-- **tableofcontents:** switch back from requestAnimationFrame
-  ([9b36ca3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9b36ca3))
-- **tableofcontents:** various fixes for dynamic menu items
-  ([5f59b83](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5f59b83))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.4.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.4.0-rc.0...@carbon/ibmdotcom-react@1.4.0-rc.1) (2020-02-24)
-
-### Bug Fixes
-
-- **card:** adjust props to match card func specs
-  ([53de6b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/53de6b2))
-- **card:** change card proptype to object to avoid build error
-  ([d826aee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d826aee))
-- **card:** change class names for card
-  ([b4f8850](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4f8850))
-- **card:** feedback addressing
-  ([fe2f9ac](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fe2f9ac))
-- **card:** fix content group prop pass to card
-  ([e96d1a8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e96d1a8))
-- **card:** high contrast modifier
-  ([dca7ae1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dca7ae1))
-- **card:** various adjustments to address feedback
-  ([1bea864](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1bea864))
-- **component:** updates content item; PR fixes
-  ([62cb925](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/62cb925))
-- **content-group:** adjust prop to card for content-group component
-  ([b152842](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b152842))
-- **content-group-simple:** adjust cta object in story
-  ([71a6160](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/71a6160))
-- **content-item:** change customClassName passed into CTA
-  ([70a9b21](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/70a9b21))
-- **css:** fix responsive image padding
-  ([e7155b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e7155b2))
-- **cta:** adjust cta story props for card
-  ([d11c351](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d11c351))
-- **cta:** change prop name to otherProps to avoid confusion
-  ([dacefea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dacefea))
-- **docs:** udpate readme
-  ([0306683](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0306683))
-- **docs:** update prop names in readme
-  ([c29f284](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c29f284))
-- **docs:** update readme
-  ([17abefa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/17abefa))
-- **docs:** update readme
-  ([3ce6514](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ce6514))
-- **docs:** update readme and stories
-  ([ad2f95b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ad2f95b))
-- **docs:** update README links
-  ([202332d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/202332d))
-- **image:** add max-width and aspect ratio
-  ([7d19b17](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d19b17))
-- **images:** replaces FPO images; fixes
-  [#1316](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1316)
-  ([28faf87](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/28faf87))
-- **images:** replaces FPO images; fixes
-  [#1316](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1316)
-  ([4b46ffc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4b46ffc))
-- **jsx:** remove unused div
-  ([c4d3497](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4d3497))
-- **patter:** update pattern markup; fixes
-  [#1263](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1263)
-  ([85ba3ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/85ba3ee))
-- **pattern:** data object props instead of components
-  ([81c0fa8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/81c0fa8))
-- **pattern:** fix CTA href prop
-  ([a82231b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a82231b))
-- **pattern:** optimize pattern iteration
-  ([c020b79](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c020b79))
-- **pattern:** removed intersection-observer and scroll fixed
-  ([f688b98](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f688b98))
-- **pattern:** update pattern markup
-  ([6d97bb2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6d97bb2))
-- **pattern:** update pattern props for item copy
-  ([8cf9636](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8cf9636))
-- **pattern:** update props types and data; update docs
-  ([c207a20](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c207a20))
-- **props:** fix ContentBlock copy proptype
-  ([bb8946b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bb8946b))
-- **props:** update cta object shape and heading
-  ([106c708](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/106c708))
-- **story:** abstract ContentGroupCards story data
-  ([e414c57](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e414c57))
-- **story:** update CTA props in story
-  ([2b66300](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2b66300))
-- **story:** update image fpo and css
-  ([b8f531b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b8f531b))
-- **story:** update story content paragraphs
-  ([dcad0c9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dcad0c9))
-- **story:** update story data
-  ([2fee536](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2fee536))
-- **story:** update story data and readme
-  ([833240e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/833240e))
-- **story:** update storybook
-  ([7cfa125](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7cfa125))
-- **story:** use abstracted story data
-  ([52f3b42](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/52f3b42))
-- **styles:** fix to style imports
-  ([cfece30](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cfece30))
-
-### Features
-
-- **component:** add ContentBlockSegmented pattern
-  ([9b99a5f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9b99a5f))
-- **component:** adds ContentBlockMixedGroups pattern; fixes
-  [#1263](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1263)
-  ([6cd9443](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6cd9443))
-- **component:** adds ContentBlockSegmented component
-  ([da91ea1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da91ea1))
-- **component:** adds ContentBlockSimple component; fixes
-  [#1275](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1275)
-  ([f154007](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f154007))
-- **component:** update story and component; fixes
-  [#1267](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1267)
-  ([789f32d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/789f32d))
-- **docs:** add ContentBlockMixedGroups README
-  ([d65c921](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d65c921))
-- **docs:** update readme and story
-  ([5a97f8a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5a97f8a))
-- **story:** add ContentBlockMixedGroups story
-  ([3d3627a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3d3627a))
-- **story:** add ContentBlockMixedGroups tests
-  ([8d541c9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8d541c9))
-- **storybook:** add reusable knob data
-  ([287cf85](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/287cf85))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.4.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.3.1...@carbon/ibmdotcom-react@1.4.0-rc.0) (2020-02-14)
-
-### Bug Fixes
-
-- **block:** changed functions and variable names
-  ([e9669e5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e9669e5))
-- **blocks:** rename UseCases to ContentBlockMedia
-  ([115de2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/115de2f))
-- **blocks:** rename UseCases to ContentBlockMedia
-  ([b7e13d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b7e13d8))
-- **branch:** fixed conflicts
-  ([3ca6b80](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ca6b80))
-- **card:** add markdown utility to card copy
-  ([75f5d82](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/75f5d82))
-- **card:** add static story for card
-  ([06882f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/06882f9))
-- **card:** adding static or unclickable option to card
-  ([4f606c8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f606c8))
-- **card:** have icon outside of cta object
-  ([20ae2a6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/20ae2a6))
-- **card:** opt out of bold instead in markdown utility
-  ([39fd949](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/39fd949))
-- **card:** pass classname to img and wrap transition
-  ([1388e3f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1388e3f))
-- **card:** remove markdown utility in patterns using card
-  ([f2fdf9f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f2fdf9f))
-- **card:** rename all cardlink to card
-  ([3ab94f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3ab94f7))
-- **component:** fix conditional cta style assignment
-  ([a8cc77a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a8cc77a))
-- **component:** merge conflicts
-  ([5d179b4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d179b4))
-- **component:** restore cta component
-  ([c2cd7b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c2cd7b8))
-- **component:** update ContentBlockMedia to use CTA
-  ([e551878](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e551878))
-- **component:** use cta directly from ContentBlock
-  ([e2c2f3f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e2c2f3f))
-- **content-item:** add unit test and adjust to feedback
-  ([271e02c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/271e02c))
-- **content-item:** pass in href to cta object and adjust readme
-  ([378d443](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/378d443))
-- **content-item:** scss readme and adjustment to copy element
-  ([97cd95f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97cd95f))
-- **css:** clean up css class names
-  ([4e1847d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4e1847d))
-- **docs:** docs updated
-  ([710df0a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/710df0a))
-- **docs:** docs updated
-  ([a73da7a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a73da7a))
-- **docs:** docs updated
-  ([7fec545](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7fec545))
-- **docs:** docs updated
-  ([1ca992a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1ca992a))
-- **docs:** docs updated and added to the storybook
-  ([240b8d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/240b8d8))
-- **docs:** documentation updated to reflect the naming changes
-  ([7d811db](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d811db))
-- **docs:** fixed mention to old pattern name
-  ([abce97f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/abce97f))
-- **docs:** update README; fix inconsistent naming
-  ([8155a4d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8155a4d))
-- **eslint:** adjust config for sort-imports in eslint
-  ([3a4a3dc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3a4a3dc))
-- **icon:** fix arrow icon usage
-  ([26ce826](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/26ce826))
-- **jest:** add stories to the file
-  ([eca0192](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eca0192))
-- **logogrid:** fix to the storybook story nmame for logogrid
-  ([b49b3a1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b49b3a1))
-- **nextjs-test:** updated yarn lock file
-  ([ffc673f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ffc673f))
-- **pattern:** added class-name as a prop and removed not used scss
-  ([68e2964](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/68e2964))
-- **pattern:** added class-name as a prop changed grid handling to story
-  ([4b968c8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4b968c8))
-- **pattern:** addresed the PR review comments
-  ([be02ca9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be02ca9))
-- **pattern:** changed class and stable selector namings to be compliant
-  ([8fda62d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8fda62d))
-- **pattern:** changed data structure to follow the card functional specs
-  ([80db7e1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80db7e1))
-- **pattern:** removed image styles and div it is using image component
-  ([49a6ad8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/49a6ad8))
-- **patterns:** dev dependency fixes for react storybook
-  ([e49e622](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e49e622))
-- **patterns:** enable terserplugin sourcemaps by env variable
-  ([5691c42](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5691c42))
-- **patterns:** remove UseCase export
-  ([97c79aa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97c79aa))
-- **patterns:** storybook failure fix
-  ([6ea6282](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6ea6282))
-- **prettier:** fix prettier errors
-  ([ef0a428](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ef0a428))
-- **props:** moved cta type to inside of the script
-  ([4f38c91](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f38c91))
-- **readme:** updated documentation
-  ([c9dad36](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c9dad36))
-- **readme:** updated documentation
-  ([424331a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/424331a))
-- **readme:** updated documentation
-  ([40aeabf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/40aeabf))
-- **release:** resolve merge conflicts
-  ([dc80f5f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dc80f5f))
-- **scss:** fixed selector for content-group story styling
-  ([e9934c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e9934c6))
-- **ssr-test:** added ibm common
-  ([c5084f8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c5084f8))
-- **ssr-test:** adding staging manifest file
-  ([9d156d4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9d156d4))
-- **ssr-test:** changed to loop data file
-  ([f4c0db9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f4c0db9))
-- **ssr-test:** fixes to properly load in the language/country combo
-  ([9001779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9001779))
-- **ssr-test:** removed unnecessary prop for altlang
-  ([07adc3d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07adc3d))
-- **ssr-test:** updates to the nextjs deployment to use express
-  ([f6bd788](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f6bd788))
-- **story:** fixed missing class
-  ([2de7aaa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2de7aaa))
-- **storybook:** add FPO content to ContentBlock pattern story
-  ([54f5cf4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/54f5cf4))
-- **storybook:** fixes IE11 loading issues in Storybook; fixes
-  [#840](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/840)
-  ([53d2fa3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/53d2fa3))
-- **storybook:** move localemodal knob within story
-  ([e6f7e6d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e6f7e6d))
-- **sub-pattern:** cleaned the code old comments
-  ([b700823](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b700823))
-- **svg:** removed custom view-box
-  ([fa0bfc7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fa0bfc7))
-- **test:** update variables in test
-  ([9947afd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9947afd))
-
-### Features
-
-- **block:** content-group-pictogram created
-  ([45947c7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/45947c7))
-- **card:** use CTA component when card is static
-  ([b9855bc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b9855bc))
-- **cloud:** adding manifest file for react experimental staging
-  ([83d56f4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/83d56f4))
-- **component:** add ContentBlock component
-  ([a74b860](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a74b860))
-- **component:** add ContentBlock component
-  ([b383a8f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b383a8f))
-- **component:** add ContentBlock component
-  ([bc18c02](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bc18c02))
-- **component:** add ContentBlock component
-  ([851966f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/851966f))
-- **component:** add ContentBlockMedia story and README
-  ([31dd469](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/31dd469))
-- **component:** add ContentBlockMedia story and README
-  ([55430af](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/55430af))
-- **component:** added external type condition/changed to if else
-  ([f1884ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f1884ee))
-- **component:** added smooth scroll for jump type removed target object
-  ([1f1ad4f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1f1ad4f))
-- **component:** added the external and jump props
-  ([830a50c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/830a50c))
-- **component:** addressed PR review comments
-  ([2b60331](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2b60331))
-- **component:** addressed PR review comments
-  ([e7b2b3d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e7b2b3d))
-- **component:** changed the event from onClick to onMouseDown event
-  ([76e32fd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/76e32fd))
-- **component:** changes
-  ([f994d34](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f994d34))
-- **component:** content blocks initial commit
-  ([769288a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/769288a))
-- **component:** content blocks initial commit
-  ([765ae7e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/765ae7e))
-- **component:** created cta component and changing the data model
-  ([2b2d9da](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2b2d9da))
-- **component:** created utility for smoothScrolling
-  ([7d4e186](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d4e186))
-- **component:** first commit
-  ([059b393](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/059b393))
-- **component:** fixed declarations in case/default clauses
-  ([69cd617](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/69cd617))
-- **component:** fixed lint issues and alignments in README
-  ([ca4d3b6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ca4d3b6))
-- **component:** made changes according to carbonIcons
-  ([eb8ed52](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eb8ed52))
-- **component:** refactored the CTA and updated the README
-  ([9a48125](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9a48125))
-- **component:** renamed Cta to CTA
-  ([1982e22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1982e22))
-- **component:** renamed Cta to CTA
-  ([e6cf625](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e6cf625))
-- **component:** renamed Cta.stories to CTA.stories
-  ([36b6a3a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36b6a3a))
-- **component:** revert the change back to onClick event
-  ([c7882d5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c7882d5))
-- **component:** reverted back contentGroup changes
-  ([fbf4b55](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fbf4b55))
-- **component:** shifted title little up
-  ([4f2e0ac](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f2e0ac))
-- **component:** updated the buttonGrp and featureCard
-  ([57e7ae8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/57e7ae8))
-- **component:** updated the CTA path name in story
-  ([66e1f79](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/66e1f79))
-- **component:** updated the document of util and added private to const
-  ([09af5d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/09af5d8))
-- **component:** updated to switch case and made few changes
-  ([bd8d783](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bd8d783))
-- **component/pattern:** addressed PR comments, including 1173 changes
-  ([2c0d430](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2c0d430))
-- **component/pattern:** exporting CTA inside index
-  ([8bded33](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8bded33))
-- **content-item:** add cta component to content item
-  ([fe83e2e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fe83e2e))
-- **content-item:** add cta to readme for content item
-  ([d5358ac](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d5358ac))
-- **content-item:** add grid to content item story
-  ([7806a29](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7806a29))
-- **content-item:** export content item
-  ([85e02de](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/85e02de))
-- **content-item:** general styles for content item
-  ([c66f59f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c66f59f))
-- **content-item:** readme and stable selectors added
-  ([2785624](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2785624))
-- **content-item:** set up of content item
-  ([588b9cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/588b9cd))
-- **flag:** remove feature flag from FeaturedLink
-  ([f59a22f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f59a22f))
-- **pattern:** added area-label and area-hidden to pictogram-item
-  ([d3efd6c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d3efd6c))
-- **pattern:** added new spread to pictogram-item
-  ([ad252c9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ad252c9))
-- **pattern:** added the customeClassName as a prop
-  ([6d4d907](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6d4d907))
-- **pattern:** added type prop for card
-  ([77bc0fa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/77bc0fa))
-- **pattern:** changed back to CTA object from instanceOf
-  ([3915b46](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3915b46))
-- **pattern:** content-group-simple block created
-  ([4d26e78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d26e78))
-- **pattern:** content-group-simple block created
-  ([d59a6b5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d59a6b5))
-- **pattern:** contentBlockMedia pattern replaces UseCases; fixes
-  [#1238](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1238)
-  ([cc0bbe6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc0bbe6))
-- **pattern:** contentBlockMedia pattern replaces UseCases; fixes
-  [#1238](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1238)
-  ([41e8a22](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/41e8a22))
-- **pattern:** cta added to content-group
-  ([97e6703](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97e6703))
-- **pattern:** exporting CTA in inde
-  ([4ca7927](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4ca7927))
-- **pattern:** fixed lint errors
-  ([1ec30f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1ec30f7))
-- **pattern:** implemented spread props on pictogram
-  ([dd29c06](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dd29c06))
-- **pattern:** name change and feature-flag removed
-  ([f764d6e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f764d6e))
-- **pattern:** name change and feature-flag removed
-  ([db5be90](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/db5be90))
-- **pattern:** new changes
-  ([c62a644](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c62a644))
-- **pattern:** removed feature flag
-  ([997b620](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/997b620))
-- **pattern:** rename the file content
-  ([aece66c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/aece66c))
-- **pattern:** renamed to ContentGroup.stories.js
-  ([e9d9fb5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e9d9fb5))
-- **pattern:** resolved errors
-  ([422e84c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/422e84c))
-- **pattern:** resolved issues
-  ([bd8a148](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bd8a148))
-- **pattern:** resolved linting errors
-  ([a1b5e4b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a1b5e4b))
-- **pattern:** resolved reviews
-  ([14ed230](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/14ed230))
-- **pattern:** responded review comments
-  ([a065bde](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a065bde))
-- **pattern:** updated comments
-  ([1f1aff9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1f1aff9))
-- **pattern:** updated functional specs, ontology ref and CTA
-  ([219a855](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/219a855))
-- **pattern:** updated image object structure, using the Image component
-  ([f04ac7b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f04ac7b))
-- **pattern:** updated reviews
-  ([1616375](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1616375))
-- **pattern:** updated the README file for image component props
-  ([9354dce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9354dce))
-- **pattern:** updated the README file for image component props
-  ([f646dcc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f646dcc))
-- **pattern:** updated the reviews
-  ([b4ff668](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b4ff668))
-- **pattern:** updated the scss,jsx and added new class in jsx
-  ([10cc03c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/10cc03c))
-- **patterns:** patterns package re-org
-  ([b5b2633](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b5b2633))
-- **patterns:** update reviews
-  ([d483f73](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d483f73))
-- **readme:** add/update component README
-  ([92246ca](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/92246ca))
-- **readme:** readme added to storybook
-  ([836c159](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/836c159))
-- **ssr-test:** adding language switching capabilities to nextjs test
-  ([0a5c414](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0a5c414))
-- **ssr-test:** adding nextjs ssr test application
-  ([61a8c9c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/61a8c9c))
-- **ssr-test:** adding update script for staging environment
-  ([73ba8e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/73ba8e3))
-- **ssr-test:** fixes to production build
-  ([8fe3311](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8fe3311))
-- **sub-pattern:** added unit-test and js and scss documentation
-  ([189a92b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/189a92b))
-- **sub-pattern:** first version of pictogram-item
-  ([cc83bb2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc83bb2))
-- **test:** content-group-cards test added
-  ([694cbfb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/694cbfb))
-- **test:** content-group-cards test added
-  ([0f81ead](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0f81ead))
-- **vanilla:** changed to linking to sample data instead
-  ([434e3a8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/434e3a8))
-- **vanilla:** cleanup of vanilla storybook
-  ([0db130d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0db130d))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.3.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.3.1-rc.1...@carbon/ibmdotcom-react@1.3.1) (2020-02-11)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.3.1-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.3.1-rc.0...@carbon/ibmdotcom-react@1.3.1-rc.1) (2020-02-10)
-
-### Bug Fixes
-
-- **locale:** fixes locale for multiple langs; fixes
-  [#1347](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1347)
-  ([05f6be0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/05f6be0))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.3.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.3.0...@carbon/ibmdotcom-react@1.3.1-rc.0) (2020-02-06)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.3.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.3.0-rc.1...@carbon/ibmdotcom-react@1.3.0) (2020-01-27)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.3.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.3.0-rc.0...@carbon/ibmdotcom-react@1.3.0-rc.1) (2020-01-24)
-
-### Bug Fixes
-
-- **footer:** pass display language to the locale button
-  ([4b4ad03](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4b4ad03))
-- **footer:** render modal when locale button is clicked
-  ([c23fdef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c23fdef))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.3.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.2.1...@carbon/ibmdotcom-react@1.3.0-rc.0) (2020-01-20)
-
-### Bug Fixes
-
-- **branch:** gathered components and pattern from another branch
-  ([99a12ad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/99a12ad))
-- **branch:** gathered components and pattern from another branch
-  ([c4651e1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4651e1))
-- **button-group:** fix typos in readme examples
-  ([526fe29](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/526fe29))
-- **button-group:** implement add/remove buttons
-  ([500b779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/500b779))
-- **cloud:** fixing output folder targets
-  ([c87b470](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c87b470))
-- **component:** readme & uri object structure update
-  ([afbd414](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/afbd414))
-- **components:** move component.scss into application.scss
-  ([5b29ace](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5b29ace))
-- **dependency-upgrade:** fix modale from recent dependency updates
-  ([9eaec26](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9eaec26))
-- **expressive:** bump carbon dependencies, include prefix for tokens
-  ([9798562](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9798562))
-- **feature-flag:** fixed content-group feature-flag variable
-  ([a196180](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a196180))
-- **feature-flag:** fixed content-group feature-flag variable
-  ([86a4446](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/86a4446))
-- **feature-flags:** removed duplicates
-  ([175b80f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/175b80f))
-- **image:** properly linking the Image README to storybook
-  ([fdc703e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fdc703e))
-- **lint:** fixed alphabertic imports on lightbox
-  ([b13b467](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b13b467))
-- **lint:** fixed lint issues for another components
-  ([bed7f89](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bed7f89))
-- **lint:** fixed prettier issues on react feature-flags
-  ([10ce3f1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/10ce3f1))
-- **lint:** imports sorted alphabetically
-  ([4f0029d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4f0029d))
-- **scss:** added display table to the parent div
-  ([3efadec](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3efadec))
-
-### Features
-
-- **cloud:** adding cloud foundry manifest files
-  ([af82de3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/af82de3))
-- **cloud:** adding manifest files for staging environments
-  ([f6ef759](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f6ef759))
-- **component:** changed content-group component structure and scss
-  ([5cee9b3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5cee9b3))
-- **component:** content-group component created and added to card-array
-  ([8cb4bae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8cb4bae))
-- **component:** content-group component created and added to card-array
-  ([e1e8c1f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e1e8c1f))
-- **component:** fix
-  ([6dbe69f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6dbe69f))
-- **component:** image component
-  ([9b3b6ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9b3b6ee))
-- **component:** image read me
-  ([6732830](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6732830))
-- **component:** implement Lightbox component
-  ([dee25e2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dee25e2))
-- **component:** rename image
-  ([42d1381](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/42d1381))
-- **component:** update stable selectors
-  ([c4f3408](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4f3408))
-- **expressive:** adding manifest files for expressive package deploys
-  ([f2fcd14](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f2fcd14))
-- **pattern:** add use cases
-  ([40b1e44](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/40b1e44))
-- **pattern:** changed card link changes
-  ([6e9bb3a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6e9bb3a))
-- **pattern:** created an alpha version of CardSection pattern layout
-  ([742783b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/742783b))
-- **pattern:** resolved merge conflicts
-  ([c876bcd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c876bcd))
-- **pattern:** resolved merge conflicts
-  ([ae92b5b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ae92b5b))
-- **patterns:** updated card link and image css
-  ([c1accc4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c1accc4))
-- **readme:** readme added for the content-group component
-  ([8ce8ea9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8ce8ea9))
-- **readme:** readme added for the content-group component
-  ([4442da4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4442da4))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.2.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.2.1-rc.0...@carbon/ibmdotcom-react@1.2.1) (2019-12-20)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.2.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.2.0...@carbon/ibmdotcom-react@1.2.1-rc.0) (2019-12-17)
-
-### Bug Fixes
-
-- **component:** minor code indentation
-  ([ec00b2d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ec00b2d))
-- **component:** readme update
-  ([2025ca3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2025ca3))
-- **component:** readme update
-  ([d93508d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d93508d))
-- **css:** move buttongroup story grid.css into index.scss
-  ([f5b011f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f5b011f))
-- **css:** move storybook css out of story file into local index.scss
-  ([4726410](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4726410))
-- **masthead:** add platform name to sidenav; fixes
-  [#782](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/782)
-  ([a669dc0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a669dc0))
-- **rollup:** update to bundle thresholds
-  ([66c27d5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/66c27d5))
-- **storybook:** fix to layout issues in storybook for mobile
-  ([f9b83cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f9b83cd))
-
-### Features
-
-- **component:** implement fullwidth variant for expressive model
-  ([31a7cf0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/31a7cf0))
-- **dependencies:** updates to carbon package dependencies
-  ([c436c55](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c436c55))
-- **storybook:** adding overview story for storybook
-  ([aeab973](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/aeab973))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.2.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.2.0-rc.2...@carbon/ibmdotcom-react@1.2.0) (2019-12-16)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.2.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.2.0-rc.1...@carbon/ibmdotcom-react@1.2.0-rc.2) (2019-12-13)
-
-### Bug Fixes
-
-- **locale:** fix locale filter availability text; fixes
-  [#847](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/847)
-  ([815547f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/815547f))
-- **locale-selector:** reset country search results
-  ([2b081ab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2b081ab))
-- **locale-selector:** various fixes to the locale modal
-  ([4e893ab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4e893ab))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.2.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.2.0-rc.0...@carbon/ibmdotcom-react@1.2.0-rc.1) (2019-12-10)
-
-### Bug Fixes
-
-- **feature:** remove CardLink and FooterLocaleButton feature flag
-  ([b2434b4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b2434b4))
-- **flags:** remove feature flag in comments
-  ([1b098f0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1b098f0))
-- **footer:** fix footer css; update close functionality
-  ([ab60f03](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ab60f03))
-- **locale:** add localized country/lang header
-  ([76a76dd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/76a76dd))
-- **locale:** fix locale from footer; fixes
-  [#795](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/795)
-  ([55492c7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/55492c7))
-
-### Features
-
-- **card:** remove featureFlag
-  ([e83777b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e83777b))
-
-# 1.2.0-rc.0 (2019-12-09)
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.2.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.2...@carbon/ibmdotcom-react@1.2.0-rc.0) (2019-12-09)
-
-### Bug Fixes
-
-- **babel:** update plugin load order
-  ([f5167a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f5167a2))
-- **buttongroup:** added example without the grid system
-  ([ce920fb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ce920fb))
-- **buttongroup:** adding columns to the story
-  ([0f88187](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0f88187))
-- **buttongroup:** adds h3 titles to README examples
-  ([9549834](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9549834))
-- **component:** fixed dark theme class on parent element
-  ([c1f37ff](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c1f37ff))
-- **component:** readme updated
-  ([4c0409d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4c0409d))
-- **css:** remove relative paths for icons
-  ([314d85f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/314d85f))
-- **css:** use local css for component (test)
-  ([a83c764](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a83c764))
-- **css:** use local css for footer component
-  ([14193f8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/14193f8))
-- **dependencies:** adjusting services/utilities dependencies to alpha
-  ([006137f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/006137f))
-- **dependencies:** fix to circular dependencies btwn services/utilities
-  ([cff6e13](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cff6e13))
-- **featureflag:** add dds prefix to pattern-react feature flags
-  ([7b3959e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7b3959e))
-- **featureflag:** add dds prefix to react feature flags
-  ([8c91448](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8c91448))
-- **fonts:** merged with master, updated css imports
-  ([93be6a0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/93be6a0))
-- **fonts:** moving carbon font imports, adding instructions to readmes
-  ([2501e6b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2501e6b))
-- **footer:** move footer ibm logo to styles package
-  ([ba7709d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ba7709d))
-- **layout:** properly set mobile columns to be sticky if set
-  ([b620de5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b620de5))
-- **locale:** fixes issue where only one language of a country listed
-  ([ba5863c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ba5863c))
-- **locale:** remove relative package reference
-  ([81c3240](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/81c3240))
-- **locale:** responsive css fixes
-  ([07a8147](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/07a8147))
-- **logo:** update masthead logo svg; fixes
-  [#411](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/411)
-  ([d36bbce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d36bbce))
-- **masthead:** add new props to readme
-  ([b7cb2da](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b7cb2da))
-- **masthead:** have eyebrow link + title as props
-  ([7a6d571](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a6d571))
-- **masthead:** implement L1 missing props
-  ([46f70a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/46f70a2))
-- **masthead:** rollback out-of-scope props implementation
-  ([aaf48ed](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/aaf48ed))
-- **masthead:** share more css rules to masthead l1
-  ([fe6a282](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fe6a282))
-- **masthead:** shrink masthead L1 when it becomes sticky
-  ([24deb67](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/24deb67))
-- **masthead:** use contextual selector for short l1
-  ([961501f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/961501f))
-- **readme:** clean up of readme's and updated missed components
-  ([01cad1f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/01cad1f))
-- **readme:** prop descriptions in readmes for some patterns
-  ([243a878](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/243a878))
-- **readme:** readme updated
-  ([cc9bc99](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc9bc99))
-- **storybook:** configure custom properties from carbon expressive flag
-  ([6673053](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6673053))
-- **storybook:** render with styles on reload
-  ([f6a897f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f6a897f))
-- removed console.log
-  ([31a97c8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/31a97c8))
-- **webpack:** install style-loader
-  ([c99cb0f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c99cb0f))
-- added mobile menu label dynamically
-  ([43c6c77](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/43c6c77))
-- adjusted select button posiiton
-  ([3063a84](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3063a84))
-- adjusted select icon position
-  ([5441159](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5441159))
-- minor readme fixes
-  ([3a9c59a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3a9c59a))
-- placed toc mobile into layout
-  ([cd9a512](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd9a512))
-- remove menu label from rendering in desktop menu
-  ([9bd55fc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9bd55fc))
-- replaced menuLabel string
-  ([46a4ae9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/46a4ae9))
-
-### Features
-
-- **component:** add locale modal component
-  ([312dfc6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/312dfc6))
-- **component:** add locale modal component
-  ([9e88c5c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9e88c5c))
-- **component:** add locale modal component
-  ([6c58d95](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6c58d95))
-- **examples:** adding example of ibm.com library react with nextjs
-  ([47a3cef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/47a3cef))
-- **examples:** adding example with create-react-app
-  ([4aaaa73](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4aaaa73))
-- **examples:** adding example with create-react-app
-  ([f5e819b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f5e819b))
-- **expressive:** adding initial expressive theme via custom properties
-  ([5d6d2f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d6d2f6))
-- **expressive:** initial feature flag functionality (wip)
-  ([8aafa6b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8aafa6b))
-- **expressive:** quarantine temporary expressive overrides
-  ([54979c8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/54979c8))
-- **expressive:** tweak to .env.example descriptions
-  ([c365158](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c365158))
-- **expressive:** updating README files
-  ([c38287b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c38287b))
-- **footer:** removal of feature flag for the locale selector in footer
-  ([44e16b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/44e16b8))
-- **locale:** bump alpha version to use new endpiont
-  ([d090174](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d090174))
-- **nextjs:** adding sample content in the DotcomShell
-  ([624e945](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/624e945))
-- **pattern:** sticky table of contents
-  ([435fdc3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/435fdc3)),
-  closes
-  [#708](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/708)
-- **readme:** prop description in readme
-  ([f74506f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f74506f))
-- **test:** add LocaleModal test
-  ([dc7cd5c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dc7cd5c))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.1.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.2-rc.0...@carbon/ibmdotcom-react@1.1.2) (2019-11-19)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.1.2-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.1...@carbon/ibmdotcom-react@1.1.2-rc.0) (2019-11-15)
-
-### Bug Fixes
-
-- **masthead:** fixes masthead link render from json; fixes
-  [#634](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/634)'
-  ([6ebbd80](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6ebbd80))
-
-## 1.1.1 (2019-11-11)
-
-### Bug Fixes
-
-- **bug:** expose search placeholder prop; fixes
-  [#631](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/631)
-  ([79370ce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/79370ce))
-- **layout:** added Layout in index export
-  ([a293156](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a293156))
-- **storybook:** fixed storybook version dependencies
-  ([21efb79](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/21efb79))
-
-### Features
-
-- **altlang:** utility for fetching all alternative languages on page
-  ([#580](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/580))
-  ([c0ca382](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c0ca382))
-- **flags:** adding DDS_FLAGS_ALL environment flag
-  ([c4d2f1d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4d2f1d))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.1.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.1-rc.1...@carbon/ibmdotcom-react@1.1.1) (2019-11-11)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.1.1-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.1-rc.0...@carbon/ibmdotcom-react@1.1.1-rc.1) (2019-11-11)
-
-### Bug Fixes
-
-- **masthead:** ssr fix for missing document
-  ([aa9a003](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/aa9a003))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [1.1.1-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.0...@carbon/ibmdotcom-react@1.1.1-rc.0) (2019-11-07)
-
-### Bug Fixes
-
-- **footer:** add navigation prop to be passed into Dotcomshell
-  ([20117fb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/20117fb))
-- **footer:** add to readme and be able to turn of custom navigation
-  ([67f5eab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67f5eab))
-- **footer:** pass params to the translationapi and small lint changes
-  ([a4ee671](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a4ee671))
-- **lang:** dispatch correct action type
-  ([0f28637](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0f28637))
-- **masthead:** skipping focusing hidden elements
-  ([363d300](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/363d300))
-- **react:** moved initial state inside component func
-  ([5c7c0fa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5c7c0fa))
-- **react:** open by default blur shouldnt close search
-  ([0eddcc2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0eddcc2))
-- **search-input:** set correct key in actions
-  ([18bdc78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/18bdc78))
-- **storybook-knobs:** move knobs within the add scope
-  ([da711a1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da711a1))
-
-### Features
-
-- **masthead:** add focus on search button after close
-  ([03fd742](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/03fd742))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.1.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.0-rc.1...@carbon/ibmdotcom-react@1.1.0) (2019-11-04)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.1.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.1.0-rc.0...@carbon/ibmdotcom-react@1.1.0-rc.1) (2019-11-04)
-
-### Bug Fixes
-
-- **jest:** multiple jest test fixes
-  ([2174892](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2174892))
-- **masthead:** adds space for suggestion item
-  ([#594](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/594))
-  ([57ea91f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/57ea91f))
-- **masthead:** fix to search input not closing
-  ([a12bdf2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a12bdf2))
-- **react:** moved container class onto accordion
-  ([#600](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/600))
-  ([5ee78a5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ee78a5))
-
-### Features
-
-- **masthead:** flag to open masthead search by default, multiple fixes
-  ([#592](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/592))
-  ([c93fe40](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c93fe40))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.1.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.0.0...@carbon/ibmdotcom-react@1.1.0-rc.0) (2019-10-29)
-
-### Bug Fixes
-
-- **buttongroup:** adding ButtonGroup
-  ([9ec6f96](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9ec6f96))
-- **buttongroup:** adjustment to the buttongroup story
-  ([6fea3fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6fea3fe))
-- **buttongroup:** fix button group test
-  ([5cdc971](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5cdc971))
-- **buttongroup:** fixed ButtonGroup story props
-  ([14ac86d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/14ac86d))
-- **buttongroup:** fixes to ButtonGroup props and unit tests
-  ([de19918](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/de19918))
-- **buttongroup:** removed cap for number of buttons in the group
-  ([308a1e3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/308a1e3))
-- **buttongroup:** simplified buttongroup layout
-  ([da0c546](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da0c546))
-- **buttongroup:** updated button group to allow any icons
-  ([9923fd8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9923fd8))
-- **buttongroup:** various fixes to the ButtonGroup layout
-  ([d8a65d9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d8a65d9))
-- **buttongroup:** various fixes to the Buttons and documentation
-  ([ca53867](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ca53867))
-- **featureflag:** hiding experimental stories from production
-  ([#577](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/577))
-  ([394b9df](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/394b9df))
-- **jest:** fixes stable selector prefix
-  ([428b452](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/428b452))
-- **js:** remove dupe object
-  ([c8fcd4b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c8fcd4b))
-- **lint:** fix jsdoc linting errors
-  ([eb9c36c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eb9c36c))
-- **locale:** check if list first
-  ([4d1d08c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d1d08c))
-- **locale:** rely on locale service to get countrylist
-  ([fe3c7ce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fe3c7ce))
-- **masthead:** add default props
-  ([fbce7ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fbce7ea))
-- **masthead:** add proptypes
-  ([cbf91f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cbf91f6))
-- **masthead:** fix masthead keyboard accessibility; fixes
-  [#160](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/160)
-  ([588d0f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/588d0f7))
-- **package:** update utilities package in services
-  ([115c48a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/115c48a))
-- **props:** add missing props
-  ([22df546](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/22df546))
-- **react:** adding linkwithicon for import
-  ([49aa879](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/49aa879))
-- **search:** update focus and active states
-  ([858c84b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/858c84b))
-- **translation:** adjust masthead for diff data structures
-  ([8e3c4fa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8e3c4fa))
-
-### Features
-
-- **analytics:** adding initial event for dynamic tabs
-  ([6ad3085](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6ad3085))
-- **analytics:** global analytics for modal and dynamic tabs
-  ([1dade0e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1dade0e))
-- **block-link:** added feature flag
-  ([b2a51b7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b2a51b7))
-- **buttongroup:** added feature flag for ButtonGroup
-  ([7666688](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7666688))
-- **cardlink:** added new cardlink component
-  ([47b2aed](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/47b2aed))
-- **component:** adds LinkWithIcon component; fixes
-  [#163](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/163)
-  ([8ffb21b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8ffb21b))
-- **geolocation:** geolocation utility
-  ([5878365](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5878365))
-- **locale:** add checks in masthead logic and pull lang attr
-  ([3d06d52](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3d06d52))
-- **locale:** displays list of countries/regions in dropdown
-  ([ac54e31](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ac54e31))
-- **locale:** footer hooked up to reload translation
-  ([27998eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/27998eb))
-- **locale:** split get lang attr into its own method
-  ([36315fa](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36315fa))
-- **locale:** use session storage for country list
-  ([1adcd87](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1adcd87))
-- **masthead:** makes search and profile optional; fixes
-  [#101](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/101)
-  ([79df921](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/79df921))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.0.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.0.0-rc.2...@carbon/ibmdotcom-react@1.0.0) (2019-10-07)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.0.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.0.0-rc.1...@carbon/ibmdotcom-react@1.0.0-rc.2) (2019-10-07)
-
-### Bug Fixes
-
-- **masthead:** removed console logs
-  ([898fb61](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/898fb61))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.0.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@1.0.0-rc.0...@carbon/ibmdotcom-react@1.0.0-rc.1) (2019-10-04)
-
-### Bug Fixes
-
-- **carbon:** add local carbon internal utils
-  ([415c254](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/415c254))
-- **css:** fixes leftnav css; fixes
-  [#144](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/144)
-  ([eba3f12](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eba3f12))
-- **ddo:** fixing datalayer_ready listener in DDO API
-  ([94d7aa1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/94d7aa1))
-- **ddo:** updated react package to point to services v1.0.0-alpha.1
-  ([7362c77](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7362c77))
-- **ddo:** updating services package in react to 1.0.0-alpha.0
-  ([f04fc4b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f04fc4b))
-- **hamburger:** fixes
-  [#144](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/144),
-  fixes
-  [#143](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/143)
-  ([c5bbe8f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c5bbe8f))
-- **masthead:** add platform css class
-  ([e554b6b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e554b6b))
-- **masthead:** css fixes; fixes
-  [#112](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/112),
-  fixes
-  [#115](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/115),
-  fixes
-  [#116](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/116),
-  fixes
-  [#118](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/118),
-  fixes
-  [#124](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/124),
-  fixes
-  [#126](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/126)
-  ([7b22a7f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7b22a7f))
-- **masthead:** fix nav menu toggle; fixes
-  [#111](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/111)
-  ([e65cdce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e65cdce))
-- **masthead:** fix toggle states based on blur
-  ([31fbc85](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/31fbc85))
-- **shell:** fixed dotcom shell imports
-  ([72683f9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/72683f9))
-- **sidenav:** fixes
-  [#145](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/145)
-  ([da08acc](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/da08acc))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [1.0.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@0.5.2...@carbon/ibmdotcom-react@1.0.0-rc.0) (2019-09-27)
-
-### Bug Fixes
-
-- **ddo:** adding babel runtime helpers for services package
-  ([80e5b19](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80e5b19))
-- **ddo:** bumping services dependency to alpha 509
-  ([79637a2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/79637a2))
-- **ddo:** commenting out global call for now
-  ([5e339c6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5e339c6))
-- **ddo:** repointing services package to alpha 507 with DDO API
-  ([ccf1c9b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ccf1c9b))
-- **docs:** fix storybook platform name; update readme
-  ([32d8bce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/32d8bce))
-- **emojis👀:** clean up css; merge and closes
-  [#84](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/84)
-  ([319757a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/319757a))
-- **jest:** added comment regarding the dds-privacy-cp placeholder
-  ([4fcac49](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4fcac49))
-- **jest:** additional console error fixes for jest tests
-  ([44a01df](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/44a01df))
-- **jest:** multiple jest fixes for the footer
-  ([3af0f36](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3af0f36))
-- **jest:** remove yarn test again
-  ([2d009f5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2d009f5))
-- **masthead:** remove L1 from DotcomStory;L1 is conditional
-  ([2ccc3b7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2ccc3b7))
-- **masthead:** use window-or-global for window event listener
-  ([d313e78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d313e78))
-- **misc:** fixes PR review comments
-  ([c02a0c7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c02a0c7))
-- **misc:** update footerType prop name; add masthead/footer to dotcomshell.scss
-  ([ea39b15](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ea39b15))
-- **prefix:** fix incorrect prefix name
-  ([e6cd3e1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e6cd3e1))
-- **release:** fixed repository links for changelogs
-  ([bc6fd1e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bc6fd1e))
-- **settings:** revert carbon prefix and update dds with new one
-  ([cd9747c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd9747c))
-
-### Features
-
-- **analytics:** add global file
-  ([dd53ca0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/dd53ca0))
-- **analytics:** adding base IBM analytics tag to storybook
-  ([71382d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/71382d7))
-- **analytics:** adjusted logic as previous did not work
-  ([91bd88e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/91bd88e))
-- **analytics:** example of eventData object jsDoc
-  ([c7781d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c7781d7))
-- **analytics:** moving scroll tracking to dotcomshell
-  ([d0a1822](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d0a1822))
-- **analytics:** scroll tracker
-  ([56aa04d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/56aa04d))
-- **components:** use dds prefix for stable selectors
-  ([0cc4893](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0cc4893))
-- **ddo:** adding setVersion of DDO in the global import
-  ([4620e86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4620e86))
-- **dotcomshell:** adds footer type select; adds readme
-  ([7d8f82d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7d8f82d))
-- **featureflags:** exploring window.featureflags
-  ([d98def1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d98def1))
-- **featureflags:** testing context featureflags
-  ([b9f79b7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b9f79b7))
-- **footer:** added locale-button to footer
-  ([0d9c3d2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0d9c3d2))
-- **leadspace:** base set up for the component
-  ([b344602](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b344602))
-- **leadspace:** bumping up grid, layout, and components packages
-  ([190545a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/190545a))
-- **leadspace:** button logic and span of content
-  ([304d318](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/304d318))
-- **leadspace:** move leadspace to patterns package
-  ([f17acea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f17acea))
-- **masthead:** adds sticky masthead to dotcom shell
-  ([039a17e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/039a17e))
-- **masthead:** sticky masthead with js
-  ([a4227ad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a4227ad))
-- **truste:** adding truste element in the footer
-  ([5c72aa7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5c72aa7))
-- **util:** adds global settings to utilities
-  ([cc89fc1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc89fc1))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.5.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@0.5.1...@carbon/ibmdotcom-react@0.5.2) (2019-09-17)
-
-### Bug Fixes
-
-- **react:** exports DotcomShell; fixes
-  [#94](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/94)
-  ([d2e2fdb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d2e2fdb))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-## [0.5.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@0.5.0...@carbon/ibmdotcom-react@0.5.1) (2019-09-17)
-
-### Bug Fixes
-
-- **hr:** export hr in components
-  ([e2736a8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e2736a8))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.5.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@0.5.0-rc.0...@carbon/ibmdotcom-react@0.5.0) (2019-09-17)
-
-**Note:** Version bump only for package @carbon/ibmdotcom-react
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# [0.5.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-react@0.4.0...@carbon/ibmdotcom-react@0.5.0-rc.0) (2019-09-17)
-
-### Bug Fixes
-
-- **jest:** various jest test fixes
-  ([0c93cf1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0c93cf1))
-- **storybook:** removed commented code
-  ([23d5968](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/23d5968))
-- **storybook:** various fixes to the storybook configuration
-  ([a7cc11a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a7cc11a))
-
-### Features
-
-- **component:** adds translation data to masthead
-  ([7f55815](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7f55815))
-- **footer:** fetching content from translation service
-  ([86e6d6f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/86e6d6f))
-- **masthead:** adds masthead types with translation API
-  ([60223fb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/60223fb))
-- **profile:** add dynamic profile menu from translation api
-  ([68c40df](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/68c40df))
-
-# 0.4.0 (2019-09-10)
-
-### Bug Fixes
-
-- **react:** removed test Translation API call
-  ([71ae263](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/71ae263))
-
-### Features
-
-- **patterns:** added placeholder scss file for leadspace
-  ([7df5633](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7df5633))
-- **patterns:** initial patterns package (WIP)
-  ([436e5eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/436e5eb))
-- **translation:** switching name to patterns-react
-  ([b035c10](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b035c10))
-
-# Change Log
-
-All notable changes to this project will be documented in this file. See
-[Conventional Commits](https://conventionalcommits.org) for commit guidelines.
-
-# 0.4.0 (2019-09-10)
-
-### Bug Fixes
-
-- **release:** reset versions to rc.0 temporarily
-  ([e7c46ce](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e7c46ce))
-- **docs:** fixed typos
-  ([69e1fad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/69e1fad))
-- **hr:** import carbon style for storybook container and scss tweaks
-  ([#64](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/64))
-  ([cd0929c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd0929c))
-- **lint:** fixed lint issue in Footer
-  ([4d5fa86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d5fa86))
-- **netlify:** fix to point to alpha releases of services/utilities
-  ([a9fdeb4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a9fdeb4))
-- **profile:** bump up alpha release for services in react
-  ([0e44093](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0e44093))
-- **profile:** wrap profile call in promise
-  ([64f827d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/64f827d))
-- **readme:** fixed rendering of readme files in storybook
-  ([5fda9d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5fda9d8))
-- **release:** manually updating package.json
-  ([2c21cef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2c21cef))
-- **rollup:** fixed rollup config
-  ([5a8f32a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5a8f32a))
-- **search:** fixed package references for services and utilities
-  ([56fede8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/56fede8))
-- **search:** fixing babel transform runtime issues
-  ([922d3d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/922d3d7))
-- **storybook:** fixed issue with masthead not rendering
-  ([692a911](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/692a911))
-- **utilities:** updated react package dependencies
-  ([d129c40](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d129c40))
-
-### Features
-
-- **carbon:** changed npm namespace to carbon
-  ([0e0896d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0e0896d))
-- **carbon:** switched to carbon ibmdotcom packages
-  ([b541b73](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b541b73))
-- **component:** adds Dotcom shell
-  ([ccd4c4b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ccd4c4b))
-- **component:** adds search to masthead
-  ([#50](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/50))
-  ([292bd2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/292bd2f)),
-  closes
-  [#1214](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1214)
-  [#1215](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1215)
-  [#1217](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1217)
-  [#1218](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1218)
-  [#1212](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1212)
-  [#1213](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1213)
-- **deployments:** added and updated deployment scripts for packages
-  ([b8f8ccf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b8f8ccf))
-- **featureflags:** adding feature flags functionality for react
-  ([84b9fcd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/84b9fcd))
-- **jest:** adding coverage reports for jest
-  ([7145a7c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7145a7c))
-- **profile:** add signedIn icon
-  ([7f5d0d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7f5d0d7))
-- **profile:** adds static profile component
-  ([388059f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/388059f))
-- **profile:** getting user status endpoint up - returning default
-  ([63c880a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/63c880a))
-- **react:** adds Dotcom ui-shell component
-  ([c392c70](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c392c70))
-- **react:** horizontalrule component
-  ([#56](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/56))
-  ([507a0f3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/507a0f3))
-- **react:** wraps up first MVP for footer
-  ([#51](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/51))
-  ([cc75800](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc75800)),
-  closes
-  [webstandards/digital-design#1368](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1368)
-  [webstandards/digital-design#1080](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1080)
-- **search:** added highlighted test in suggestions and redirect link
-  ([#47](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/47))
-  ([67218eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67218eb))
-- **search:** adding initial masthead search components (wip)
-  ([bad3b8e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bad3b8e))
-- **search:** adding integration of typeahead api to autosuggest
-  ([36fb186](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36fb186))
-
-# [0.3.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@ibmdotcom/react@0.1.0...@ibmdotcom/react@0.3.0) (2019-08-29)
-
-# 0.3.0-rc.0 (2019-08-28)
-
-### Bug Fixes
-
-- **hr:** import carbon style for storybook container and scss tweaks
-  ([#64](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/64))
-  ([cd0929c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd0929c))
-- **lint:** fixed lint issue in Footer
-  ([4d5fa86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d5fa86))
-- **netlify:** fix to point to alpha releases of services/utilities
-  ([a9fdeb4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a9fdeb4))
-- **readme:** fixed rendering of readme files in storybook
-  ([5fda9d8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5fda9d8))
-- **rollup:** fixed rollup config
-  ([5a8f32a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5a8f32a))
-- **search:** fixed package references for services and utilities
-  ([56fede8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/56fede8))
-- **search:** fixing babel transform runtime issues
-  ([922d3d7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/922d3d7))
-- **storybook:** fixed issue with masthead not rendering
-  ([692a911](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/692a911))
-- **utilities:** updated react package dependencies
-  ([d129c40](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d129c40))
-
-### Features
-
-- **component:** adds search to masthead
-  ([#50](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/50))
-  ([292bd2f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/292bd2f)),
-  closes
-  [#1214](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1214)
-  [#1215](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1215)
-  [#1217](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1217)
-  [#1218](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1218)
-  [#1212](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1212)
-  [#1213](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1213)
-- **deployments:** added and updated deployment scripts for packages
-  ([b8f8ccf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b8f8ccf))
-- **featureflags:** adding feature flags functionality for react
-  ([84b9fcd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/84b9fcd))
-- **jest:** adding coverage reports for jest
-  ([7145a7c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7145a7c))
-- **react:** horizontalrule component
-  ([#56](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/56))
-  ([507a0f3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/507a0f3))
-- **react:** wraps up first MVP for footer
-  ([#51](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/51))
-  ([cc75800](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cc75800)),
-  closes
-  [webstandards/digital-design#1368](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1368)
-  [webstandards/digital-design#1080](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/1080)
-- **search:** added highlighted test in suggestions and redirect link
-  ([#47](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/47))
-  ([67218eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/67218eb))
-- **search:** adding initial masthead search components (wip)
-  ([bad3b8e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bad3b8e))
-- **search:** adding integration of typeahead api to autosuggest
-  ([36fb186](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/36fb186))
-
-# 0.2.0 (2019-08-05)
-
-# 0.2.0-rc.0 (2019-08-05)
-
-### Features
-
-- **footer:** laying down the basework for the footer
-  ([bf05b3c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bf05b3c))
-
-# 0.1.0 (2019-07-30)
-
-# 0.1.0-rc.0 (2019-07-30)
-
-### Bug Fixes
-
-- **ci:** move loads.js to correct dir
-  ([584fdd5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/584fdd5))
-- **yarn:** add loader file for ci-check
-  ([ca02703](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ca02703))
-
-### Features
-
-- **component:** add Masthead component stub
-  ([fee6b44](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fee6b44))
-- **components:** add masthead react stub
-  ([3cd2b5b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3cd2b5b))
-- **jsdoc:** added jsdoc generation from services
-  ([d2089e4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d2089e4))
-- **lerna:** adjusting initial version to 0.0.0
-  ([3f01404](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3f01404))
-- **lerna:** cleaned up react package.json
-  ([fde3da3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fde3da3))
-- **lerna:** updated package names and versions
-  ([9929d1c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9929d1c))
diff --git a/packages/react/README.md b/packages/react/README.md
deleted file mode 100644
index 2bed782837a..00000000000
--- a/packages/react/README.md
+++ /dev/null
@@ -1,86 +0,0 @@
-# @carbon/ibmdotcom-react
-
-> A collection of IBM.com components and patterns implemented using
-> [React](https://reactjs.org/) and
-> [Carbon](https://www.carbondesignsystem.com/).
-
-## Getting Started
-
-Run the following command using [npm](https://www.npmjs.com/):
-
-```bash
-npm i @carbon/ibmdotcom-react
-```
-
-If you prefer [Yarn](https://yarnpkg.com/en/), use the following command
-instead:
-
-```bash
-yarn add @carbon/ibmdotcom-react
-```
-
-> NOTE: Carbon dependencies will be managed by Carbon for IBM.com starting in
-> `v1.3.0`. For earlier versions, Carbon dependencies will have to be installed
-> separately:
->
-> ```bash
-> yarn add carbon-components carbon-components-react carbon-icons
-> ```
-
-1. These components require the use of [Webpack](https://webpack.js.org/) in
-   your project. See our
-   [`webpack.config.js`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/.storybook/webpack.config.js)
-   for an example configuration.
-
-2. Components do not import any of the styles themselves, use the scss or css
-   from `@carbon/ibmdotcom-styles` to bring in styling.
-
-### Styles
-
-Styles are in a separate package entirely, as they are considered to be
-framework agnostic and can be used with any framework.
-[Learn how to include styles here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles/README.md).
-
-## Usage
-
-### List of Available Components
-
-View available React Components
-[here](https://www.ibm.com/standards/carbon/react). You can see usage
-information in several ways:
-
-1. Clicking the **DOCS** tab in the top of the selected component. You can see
-   the list of available React props as well as how to use in your project.
-2. Clicking the **STORY** tab at the bottom. This tab contains the code that
-   shows how the component is being used
-3. Clicking the **KNOBS** tab at the bottom and changing values there. Most
-   knobs are shown as something like `Button kind (kind)`, where `kind` is the
-   name of React prop
-4. Clicking the **CARBON THEME** tab at the bottom and interacting with the
-   selected component. You can see what the component looks like in the four
-   available Carbon themes (NOTE: not all components are available in all
-   themes).
-
-## Documentation
-
-- See our documentation site [here](https://www.ibm.com/standards/carbon) for
-  full how-to docs and guidelines
-- [Contributing](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/.github/CONTRIBUTING.md):
-  Guidelines for making contributions to this repo.
-
-## 🙌 Contributing
-
-We're always looking for contributors to help us fix bugs, build new features,
-or help us improve the project documentation. If you're interested, definitely
-check out our
-[Contributing Guide](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/.github/CONTRIBUTING.md)
-and our
-[Developer Guide](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/developing.md)!
-👀
-
-## 📝 License
-
-Licensed under the
-[Apache 2.0 License](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/LICENSE).
-
-# dpo-cms-mission
diff --git a/packages/react/babel.config.js b/packages/react/babel.config.js
deleted file mode 100644
index d5e39dbce2f..00000000000
--- a/packages/react/babel.config.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * 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.
- */
-
-module.exports = {
-  presets: ['./scripts/env', '@babel/preset-react'],
-  plugins: [
-    'macros',
-    ['@babel/plugin-transform-class-properties', { loose: true }],
-    ['@babel/plugin-transform-private-methods', { loose: true }],
-    ['@babel/plugin-transform-private-property-in-object', { loose: true }],
-    '@babel/plugin-transform-export-namespace-from',
-    '@babel/plugin-proposal-export-default-from',
-    '@babel/plugin-transform-nullish-coalescing-operator',
-    '@babel/plugin-transform-optional-chaining',
-    'inline-react-svg',
-    [
-      '@babel/plugin-transform-runtime',
-      {
-        runtimeHelpers: true,
-      },
-    ],
-  ],
-};
diff --git a/packages/react/carbon.yml b/packages/react/carbon.yml
deleted file mode 100644
index 4710833d189..00000000000
--- a/packages/react/carbon.yml
+++ /dev/null
@@ -1,534 +0,0 @@
-# yaml-language-server: $schema=https://unpkg.com/@carbon-platform/schemas@v1/carbon-resources.schema.json
-library:
-  id: ibmdotcom-react
-  name: IBM.com React
-  description: Create web experiences that adhere to IBM’s web standards.
-  externalDocsUrl: https://www.ibm.com/standards/web/carbon-for-ibm-dotcom
-  inherits: ibmdotcom-styles
-  demoLinks:
-    - type: storybook
-      name: Storybook
-      action: link
-      url: https://www.ibm.com/standards/carbon/react
-assets:
-  button-group:
-    status:
-      key: stable
-      note: Additional usage guidelines are coming soon.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/button-group
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-button-group
-  callout-quote:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/callout-quote
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-callout-quote
-  callout-with-media:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/callout-with-media
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-callout-with-media
-  card:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#card
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card
-  card-link:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#card-link
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card-link
-  feature-card:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#feature-card
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-feature-card
-  card-group:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-group
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card-group
-  card-section:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card-section-simple
-  card-section-images:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section#card-section-with-images
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card-section-images
-  content-block:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block
-  content-block-cards:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-cards
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-cards
-  content-block-horizontal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-horizontal
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-horizontal
-  content-block-media:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-media
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-media
-  content-block-segmented:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-segmented
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-segmented
-  content-block-simple:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-simple
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-block-simple
-  content-group:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-group
-  content-group-cards:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-cards
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-cards
-  content-group-pictograms:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-pictograms
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-pictograms
-  content-group-simple:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-simple
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-simple
-  content-item:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-item
-  content-item-horizontal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-item-horizontal
-  content-section:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-section
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-section
-  cta:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/cta
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-cta
-  cta-section:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/cta-block-and-section#cta-section
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-cta-section
-  dotcom-shell:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/dotcom-shell
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-dotcom-shell
-  expressive-modal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/expressive-modal
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-expressive-modal
-  footer:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/footer
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-footer
-  horizontal-rule:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/horizontal-rule
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-horizontal-rule
-  image:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/images#image
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-image
-  image-with-caption:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/images#image-with-caption
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-image-with-caption
-  language-selector:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/language-selector
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-footer--default-language-only
-  layout:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/layout
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-layout
-  lead-space:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/leadspace
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-lead-space
-  lead-space-block:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/lead-space-block
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-lead-space-block
-  lead-space-search:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/lead-space-search
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        # Mapping to storybook homepage, dotcom doesn't yet have a an entry for this in react storybook
-        url: https://www.ibm.com/standards/carbon/react
-  lightbox-media-viewer:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/lightbox-media-viewer
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-lightbox-media-viewer
-  link-list:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/link-list
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-link-list
-  link-list-section:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/link-list-section
-    status:
-      key: draft
-      note: This component is currently being worked on.
-    framework: react
-  link-with-icon:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/link-with-icon
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-link-with-icon
-  locale-modal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/localemodal
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-locale-modal
-  logo-grid:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/logo-grid
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-logo-grid
-  masthead:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/masthead
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-masthead
-  pictogram-item:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/pictogram-item
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-pictogram-item
-  quote:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/quote
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-quote
-  table-of-contents:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/table-of-contents
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-table-of-contents
-  universal-banner:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/universal-banner
-    status:
-      key: draft
-      note: This component is currently being worked on.
-    framework: react
-  video:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/video
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-video-player
-  back-to-top:
-    status: stable
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/back-to-top
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-back-to-top
-  card-in-card:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#card-in-card
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card-in-card
-  card-section-carousel:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section-carousel
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-card-section-carousel
-  carousel:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/carousel
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-carousel
-  content-group-banner:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-banner
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-content-group-banner
-  tabs-extended:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/tabs-extended#tabs-extended
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-tabs-extended
-  tag-link:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/tag-link
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-tag-link
-  leaving-ibm-modal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/leaving-ibm-modal
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-leaving-ibm
-  filter-panel:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/filter-panel
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-filter-panel
-  tabs-extended-media:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/tabs-extended#tabs-extended-media
-    status:
-      key: draft
-      note: This component is currently being worked on.
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-tabs-extended-media
-  feature-section:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/feature-section
-    status: stable
-    framework: react
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/react/?path=/story/components-feature-section
diff --git a/packages/react/config/jest/__mocks__/KalturaPlayerAPI.js b/packages/react/config/jest/__mocks__/KalturaPlayerAPI.js
deleted file mode 100644
index d08c45b0ae2..00000000000
--- a/packages/react/config/jest/__mocks__/KalturaPlayerAPI.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * 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 apiResponse from '../../../../services/src/services/KalturaPlayer/__tests__/data/response.json';
-
-module.exports = {
-  getThumbnailUrl: jest.fn(() => {
-    return 'https://cdnsecakmi.kaltura.com/p/123456/thumbnail/entry_id/1_9h94wo6b/width/320';
-  }),
-  api: jest.fn(() => Promise.resolve(apiResponse)),
-  getMediaDuration: jest.fn(() => {
-    return '(1:00)';
-  }),
-  fireEvent: jest.fn(() => {}),
-  embedMedia: jest.fn(() => Promise.resolve()),
-};
diff --git a/packages/react/config/jest/__mocks__/LocaleAPI.js b/packages/react/config/jest/__mocks__/LocaleAPI.js
deleted file mode 100644
index 4f409b0dbaf..00000000000
--- a/packages/react/config/jest/__mocks__/LocaleAPI.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 mocklist from '../../../src/components/Footer/__data__/locale-list';
-
-module.exports = {
-  getLocale: jest.fn(() => Promise.resolve({ cc: 'us', lc: 'en' })),
-  getList: jest.fn(() => Promise.resolve(mocklist)),
-};
diff --git a/packages/react/config/jest/__mocks__/ProfileAPI.js b/packages/react/config/jest/__mocks__/ProfileAPI.js
deleted file mode 100644
index 463f7ada6e0..00000000000
--- a/packages/react/config/jest/__mocks__/ProfileAPI.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * 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.
- */
-
-module.exports = {
-  getUserStatus: jest.fn(() => Promise.resolve({ user: 'Unauthenticated' })),
-};
diff --git a/packages/react/config/jest/cssTransform.js b/packages/react/config/jest/cssTransform.js
deleted file mode 100644
index a0a06f2b90c..00000000000
--- a/packages/react/config/jest/cssTransform.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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';
-
-// This is a custom Jest transformer turning style imports into empty objects.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-module.exports = {
-  process() {
-    return 'module.exports = {};';
-  },
-  getCachekey() {
-    // The output is always the same
-    return 'cssTransform';
-  },
-};
diff --git a/packages/react/config/jest/fileTransform.js b/packages/react/config/jest/fileTransform.js
deleted file mode 100644
index 6fceaa4c418..00000000000
--- a/packages/react/config/jest/fileTransform.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 path = require('path');
-
-// This is a custom Jest transformer turning file imports into filenames.
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-module.exports = {
-  process(src, filename) {
-    return `module.exports = ${JSON.stringify(path.basename(filename))};`;
-  },
-};
diff --git a/packages/react/config/jest/jsTransform.js b/packages/react/config/jest/jsTransform.js
deleted file mode 100644
index efdae9409ff..00000000000
--- a/packages/react/config/jest/jsTransform.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 { createTransformer } = require('babel-jest');
-const babelConfig = require('../../babel.config');
-
-// This is a custom Jest transformer that process *.js files
-// http://facebook.github.io/jest/docs/tutorial-webpack.html
-module.exports = createTransformer(babelConfig);
diff --git a/packages/react/config/jest/setup.js b/packages/react/config/jest/setup.js
deleted file mode 100644
index 27333c7f2d0..00000000000
--- a/packages/react/config/jest/setup.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { TextDecoder, TextEncoder } from 'util';
-
-jest.unmock('promise');
-jest.unmock('whatwg-fetch');
-jest.unmock('object-assign');
-
-global.process.env.NODE_ENV = true;
-
-delete global.window.location;
-global.window = Object.create(window);
-global.window.location = {
-  port: '80',
-  protocol: 'http:',
-  hostname: 'localhost',
-  href: 'http://localhost',
-};
-
-// required for latest isomorphic-dompurify
-global.TextEncoder = TextEncoder;
-global.TextDecoder = TextDecoder;
-
-// mock matchMedia to resolve JSOM error
-Object.defineProperty(window, 'matchMedia', {
-  writable: true,
-  value: jest.fn().mockImplementation((query) => ({
-    matches: false,
-    media: query,
-    onchange: null,
-    addEventListener: jest.fn(),
-    removeEventListener: jest.fn(),
-    dispatchEvent: jest.fn(),
-  })),
-});
-
-jest.mock('@carbon/ibmdotcom-services/lib/services/Locale/Locale', () =>
-  require('./__mocks__/LocaleAPI')
-);
-jest.mock('@carbon/ibmdotcom-services/lib/services/Profile/Profile', () =>
-  require('./__mocks__/ProfileAPI')
-);
-jest.mock(
-  '@carbon/ibmdotcom-services/lib/services/KalturaPlayer/KalturaPlayer',
-  () => require('./__mocks__/KalturaPlayerAPI')
-);
-jest.mock('@carbon/ibmdotcom-services/lib/services/global/global', () => ({
-  globalInit: jest.fn(() => {}),
-}));
-
-const enzyme = require.requireActual('enzyme');
-const Adapter = require.requireActual('enzyme-adapter-react-16');
-
-enzyme.configure({ adapter: new Adapter() });
diff --git a/packages/react/config/polyfills.js b/packages/react/config/polyfills.js
deleted file mode 100644
index 5c530163398..00000000000
--- a/packages/react/config/polyfills.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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';
-
-require('babel-polyfill');
-
-if (typeof Promise === 'undefined') {
-  // Rejection tracking prevents a common issue where React gets into an
-  // inconsistent state due to an error, but it gets swallowed by a Promise,
-  // and the user has no idea what causes React's erratic future behavior.
-  require('promise/lib/rejection-tracking').enable();
-  window.Promise = require('promise/lib/es6-extension.js');
-}
-
-// fetch() polyfill for making API calls.
-require('whatwg-fetch');
-
-// Object.assign() is commonly used with React.
-// It will use the native implementation if it's present and isn't buggy.
-Object.assign = require('object-assign');
-
-// Starting with React 16, we'll have to polyfill this in test environments.
-// Defining this earlier than loading Enzyme to avoid "React depends on requestAnimationFrame" warning.
-global.requestAnimationFrame = function (callback) {
-  callback();
-};
diff --git a/packages/react/docs/a11y-compliance-tests.md b/packages/react/docs/a11y-compliance-tests.md
deleted file mode 100644
index 3dd4de9629d..00000000000
--- a/packages/react/docs/a11y-compliance-tests.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# Running a11y compliance tests
-
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
-
-- [Ignoring aChecker results](#ignoring-achecker-results)
-- [Debugging aChecker results](#debugging-achecker-results)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-You can test your changes by running our test commands:
-
-```sh
-> gulp test:a11y
-```
-
-If you are very sure that your change affects a specific set of components, you can use `-s` option with a regular expression of the list of stories that should be tested, like:
-
-```sh
-> gulp test:a11y -s 'CTA\.stories\.js$'
-```
-
-You can run the test in a real browser with `-b` option along with other options to keep the test session (`-k`), like:
-
-```sh
-> gulp test:a11y -b Chrome -k
-```
-
-You can enable verbose output with `--verbose` option, like:
-
-```sh
-> gulp test:a11y --verbose
-```
-
-Above options can be used together, like:
-
-```sh
-> gulp test:a11y -s 'CTA\.stories\.js$' -b Chrome -k --verbose
-```
-
-## Ignoring aChecker results
-
-The a11y test may report potential issues that should be handled in application-level, not in `carbon-for-ibm-dotcom` code. In such case, you can ignore those issues by adding an item to `shouldIssueBeIgnoredForRule` table in [tests/utils/global-ignore-achecker-issues.js](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/tests/utils/global-ignore-achecker-issues.js). The table is keyed by something like `Rpt_Aria_RegionLabel_Implicit ` which helps indentifying what aChecker rule to ignore. You can specify `true` to the value which ignores all violations of the rule, or a function which takes the DOM element violating the rule and returns `true` if such violation should be ignored:
-
-```javascript
-const shouldIssueBeIgnoredForRule = {
-  // We are ignoring `Rpt_Aria_RegionLabel_Implicit` rule because (the reason).
-  'Rpt_Aria_RegionLabel_Implicit': true,
-  // We are ignoring `Rpt_Aria_ValidIdRef` rule if the element is `<div>` because (the reason).
-  'Rpt_Aria_ValidIdRef': elem => elem.tagName === 'DIV',
-};
-```
-
-## Debugging aChecker results
-
-You can dig into why aChecker complains against your test case, by:
-
-1. Search for the error message in [aChecker engine codebase](https://github.com/IBMa/equal-access/tree/master/accessibility-checker-engine). For example, if you got an error with `Rpt_Aria_RegionLabel_Implicit` rule ID, you can search for that in [aChecker engine codebase](https://github.com/IBMa/equal-access/tree/master/accessibility-checker-engine), which leads you to [here](https://github.com/IBMa/equal-access/search?q=Rpt_Aria_RegionLabel_Implicit&unscoped_q=Rpt_Aria_RegionLabel_Implicit).
-2. One of the search result shows the rule implementation, like https://github.com/IBMa/equal-access/blob/3.0.3/accessibility-checker-engine/src/v2/checker/accessibility/rules/rpt-ariaLabeling-rules.ts#L22-L49. Analyze the code to see why it complains for your case.
-3. If the logic shows your particular error is a false positive, report an issue at [aChecker engine codebase](https://github.com/IBMa/equal-access/issues). Otherwise, fix your code.
diff --git a/packages/react/docs/breaking-changes.md b/packages/react/docs/breaking-changes.md
deleted file mode 100644
index d031f22ea30..00000000000
--- a/packages/react/docs/breaking-changes.md
+++ /dev/null
@@ -1,131 +0,0 @@
-# Breaking changes
-
-## v1.32.0
-
-### Deprecation warning
-
-#### React
-
-- The React `Masthead` is now in feature freeze, where any new features or enhancements will only be done on the Web Component version. We will continue to support
-any bugs or issues for the rest of `Carbon for IBM.com v1`.
-
-## v1.28.0
-
-### Deprecation warning
-
-#### React
-
-- `Layout` has been deprecated to better align with the style mixin and classes used in Web Components. Layout documentation has been updated on how to use the mixin and classes.
-
-## v1.26.0
-
-### Deprecation warning
-
-- Due to low usage, and the availability of more rapid full releases, we are
-  discontinuing bi-weekly beta releases of Carbon for IBM.com.
-
-## v1.25.0
-
-### Design adjustment
-
-- All content block and content group components should now pass the Card
-  CTA `copy` as `heading`. Example:
-
-```javascript
-<ContentBlockSimple
-  cta={{
-    cta: {
-      href: 'https://www.example.com',
-    },
-    style: 'card',
-    type: 'local',
-    heading: 'Lorem ipsum dolor sit ametttt',
-  }}
-  ...
-/>
-```
-
-## v1.24.0
-
-### Deprecation warning
-
-#### Styles
-
-- The `Expressive Theme` has been integrated into Carbon Design System’s core
-  library. This means that expressive continues to be available to IBM.com, but
-  now all Carbon adopters can get both productive and expressive experiences
-  from the same library source. This change will be seamless for current
-  adopters of Carbon for IBM.com. In the next few sprints, we will be shifting
-  to use expressive styling and elements from core, then the Expressive Theme
-  within Carbon for IBM.com will no longer be maintained.
-
-## v1.23.0
-
-### Deprecation warning
-
-#### Services
-
-- `AnalyticsAPI.initScrollTracker` has been deprecated as GESTURES v1.x should
-  no longer be used. GESTURES v2.x is owned by IBM DBDM team and is managed
-  within their platform.
-
-## v1.22.0
-
-### Deprecation warning
-
-#### Services
-
-- `VideoPlayerAPI` has been deprecated in favor of `KalturaPlayerAPI`
-
-## v1.20.0
-
-### Deprecation warning
-
-- With the continuing enhancements and changes in the `lead space`, the `react`
-  version is now in feature freeze. For any new features and enhancements of the
-  `lead space`, the wrapper version of the `web-components` lead space should be
-  used.
-
-## v1.11.0
-
-- The `<HorizontalRule />` has a change in prop name, namely the `style` prop is
-  now called `type`.
-
-### Services
-
-- The environment variable `SEARCH_TYPEAHEAD_HOST` has been renamed to
-  `SEARCH_TYPEAHEAD_API`.
-
-## v1.9.0
-
-### Deprecation warning
-
-#### Patterns are now Components!
-
-Similar to the pivot from `v1.8.0` release for `sub-patterns`, we have now
-consolidated all `patterns / blocks` and `patterns / sections` into
-`components`, so now all `coded things` are considered as `components`! With
-this change, the `scss` imports have now been remapped under `/scss/components`,
-however we have kept a deprecation import so that nothing breaks (for now) on
-the application side. A deprecation warning will show for imports pointing to
-the patterns folder, which we will ultimately remove in a future release.
-
-## v1.8.0
-
-### Deprecation warning
-
-#### Sub-patterns
-
-Sub-patterns have been consolidated into `components`. With this change, the
-scss imports now fall under the `components` folder instead of `sub-patterns`. A
-deprecation warning will show for imports pointing to the `sub-patterns`
-folder, which we will ultimately remove in a future release.
-
-## v1.7.0
-
-- The `DotcomShell` formerly passed in `Footer` and `Masthead` props as flat
-  props into the `DotcomShell` for functionality. We are now breaking them out
-  into two separate prop objects, `footerProps` and `mastheadProps`. If you are
-  upgrading to `v1.7.0` and are using the `DotcomShell`, you will need to make
-  this modification to your code for it to continue to render properly.
-
diff --git a/packages/react/docs/breaking-changes.stories.mdx b/packages/react/docs/breaking-changes.stories.mdx
deleted file mode 100644
index 750fcc5c21c..00000000000
--- a/packages/react/docs/breaking-changes.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from './breaking-changes.md';
-
-<Meta title="Overview/Breaking changes" />
-
-<Description markdown={readme} />
diff --git a/packages/react/docs/building-for-ibm-dotcom.stories.mdx b/packages/react/docs/building-for-ibm-dotcom.stories.mdx
deleted file mode 100644
index 3efd61af18a..00000000000
--- a/packages/react/docs/building-for-ibm-dotcom.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from '../../../docs/building-for-ibm-dotcom.md';
-
-<Meta title="Overview/Building for IBM(dot)com" />
-
-<Description markdown={readme} />
diff --git a/packages/react/docs/contributing-to-react.md b/packages/react/docs/contributing-to-react.md
deleted file mode 100644
index 604c164a3ba..00000000000
--- a/packages/react/docs/contributing-to-react.md
+++ /dev/null
@@ -1,173 +0,0 @@
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
-
-- [Contributing to Carbon for IBM.com React package](#contributing-to-carbon-for-ibmcom-react-package)
-  - [Overview](#overview)
-  - [Packages](#packages)
-  - [React DocGen](#react-docgen)
-  - [Stable Selectors](#stable-selectors)
-  - [Feature Flag](#feature-flag)
-  - [Environment Variables](#environment-variables)
-  - [Storybook](#storybook)
-  - [Unit Test Coverage](#unit-test-coverage)
-  - [Don't Forget To...](#dont-forget-to)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-# Contributing to Carbon for IBM.com React package
-
-> Guidelines for how to make a code contribution to the React package
-
-## Overview
-
-Thank you for your contribution to Carbon for IBM.com! Below are guidelines on
-what some of the things we would be looking for as part of your contribution.
-
-## Packages
-
-We try to have any contributions to the library to live in their corresponding
-package(s). The main packages to look out for when contributing a React 
-component:
-
-- **Styles**: ([@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles)) 
-All styles should live in the styles package in the monorepo. This way, the
-styles can be shared with any other framework package (e.g. web components). 
-In addition, the way that web components utilize styles requires that there 
-isn't a heavy amount of nesting happening in the `SCSS` code. 
-- **Services**: ([@carbon/ibmdotcom-services](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/services))
-If your component makes any API requests to a service that does not currently
-exist yet in our Services package, you can add in a new ES6 service class in
-this package. If you need to test across multiple packages, you can make use of
-[yarn link](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/developing.md#developing-locally).
-Be sure to properly export the class from the main `index.js`.
-- **Utilities**: ([@carbon/ibmdotcom-utilities](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/utilities))
-Similar to ([Services](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/services)),
-any abstract utilities can be added to the Utilities package as an ES6 class or
-function. Be sure to properly export the class or function from the main 
-`index.js`.
-
-## React DocGen
-
-It is important that the component includes full documentation using [React DocGen](https://github.com/reactjs/react-docgen)
-standards. Be sure to fully define the `propTypes`, and provide any default 
-values (under `defaultProps`) as well as all possible values for any props that
-are looking for one of many values values (e.g. `PropTypes.oneOf`)
-
-## Stable Selectors
-
-Every component must include [stable selectors](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/stable-selectors.md) 
-as part of the overall markup, identifying any key elements that would be useful
-to have the ability to identify in a DOM search. At minimum, there should be at
-least a container level stable selector defined, and all should use the `dds--`
-prefix identified from the utilities package. For example:
-
-```javascript
-const { stablePrefix } = ddsSettings;
-
-const MyComponent = () => {
-  
-  return (
-    <div
-      data-autoid={`${stablePrefix}--my-components`}
-    >
-    </div>
-  );
-};
-```
-
-## Feature Flag
-
-If this is a new component or enhancement, we would require that it is 
-introduced into Carbon for IBM.com behind a feature flag. 
-
-[You can read full details on how to create and implement a feature flag here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/docs/feature-flags.md).
-
-An example of creating a Storybook story that will be ignored if the feature
-flag is disabled:
-
-```javascript
-import MyComponent from '../MyComponent';
-import { DDS_MY_COMPONENT } from '../../../internal/FeatureFlags';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-export default !DDS_MY_COMPONENT
-  ? undefined
-  : {
-      title: 'Components|My component',
-      parameters: {
-        ...readme.parameters,
-        knobs: {
-          MyComponent: ({ groupId }) => ({
-            props: {
-              prop1: text('Prop 1 (prop1):', 'Lorem Ipsum', groupId),
-              prop2: text('Prop 2 (prop2):', 'Lorem Ipsum', groupId),
-            },
-          }),
-        },
-      },
-    };
-```
-
-## Environment Variables
-
-If introducing any new environment variables (e.g. feature flags), be sure to 
-also update the `.env.example` file at the root of the React package folder. 
-The example should include a good description of what the environment variable 
-does.
-
-## Storybook
-
-In storybook, we are looking for the following criteria:
-
-- Blend of configurable knobs to multiple sub-stories that capture full
-functionality and features. When it makes sense, break down to multiple stories
-so that our automated visual regression tool ([Percy](https://percy.io)) can 
-automatically capture in its snapshot suite rather than creating multiple 
-knobs.
-- Knob labels include the actual prop name in parenthesis
-- README (`README.stories.mdx`) with clear instructions for any Carbon for 
-IBM.com user to get started right away. This would include:
-  * Which import(s) to include
-  * How to implement in a sample React application (multiple examples if 
-    necessary)
-  * Environment variable description and implementation details (if introducing 
-    a new component)
-  * Prop table
-  * Stable Selectors table
-  * Contributing snippet (imported from root docs)
-
-## Unit Test Coverage
-
-Our team looks to include a minimum of 80% unit test coverage. One of the 
-features that we have included in Storybook is [Storyshots](https://www.npmjs.com/package/@storybook/addon-storyshots),
-which will auto-generate snapshot tests based on existing storybook stories. 
-While this gives automatic coverage right off the bat, additional unit tests
-may be required to get over the 80% goal. All component level tests must live
-in the component folder under a sub-folder `__tests__`. The file name structure
-should be `MyComponent.test.js`. Be sure to include any mock data (if necessary)
-in a `data` subfolder under `__tests__`. 
-
-To view a coverage report (and run the test suite), you can run:
-
-```bash
-yarn test:unit
-``` 
-
-This will generate a `coverage` folder which includes what the current coverage
-amount is, and which line(s) are missing any coverage.
-
-To update the snapshot file, run the following:
-
-```bash
-yarn test:unit:updateSnapshot
-```
-
-## Don't Forget To...
-
-<ul>
-<li>Export any new components from the main `index.js`</li>
-</ul>
-
-Read more about our [submission guidelines](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/submission-guidelines.md).
diff --git a/packages/react/docs/contributing-to-react.stories.mdx b/packages/react/docs/contributing-to-react.stories.mdx
deleted file mode 100644
index b1b4eb8604a..00000000000
--- a/packages/react/docs/contributing-to-react.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from './contributing-to-react.md';
-
-<Meta title="Overview/Contributing to the React package" />
-
-<Description markdown={readme} />
diff --git a/packages/react/docs/enable-rtl.stories.mdx b/packages/react/docs/enable-rtl.stories.mdx
deleted file mode 100644
index 8806ecd9c53..00000000000
--- a/packages/react/docs/enable-rtl.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from '../../../docs/enable-rtl.md';
-
-<Meta title="Overview/Enable right-to-left (RTL)" />
-
-<Description markdown={readme} />
diff --git a/packages/react/docs/environment-variables.md b/packages/react/docs/environment-variables.md
deleted file mode 100644
index 1368c7200ee..00000000000
--- a/packages/react/docs/environment-variables.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# Environment Variables
-
-<!-- prettier-ignore-start -->
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
-
-- [Overview](#overview)
-- [Local Environment Variables](#local-environment-variables)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-<!-- prettier-ignore-end -->
-
-## Overview
-
-Environment variables can be set for the React package in order to set various 
-behavior within the application. This includes 
-[feature flags](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/docs/feature-flags.md) 
-and other settings.
-
-## Local Environment Variables
-Environment variables can be set within the local package, which are picked up
-by start-storybook. To use environment variables, create a file called `.env` at
-the root of the react package folder, then copy and paste the contents of 
-`.env.example` into the file.
-
-Within `.env`, the values can then be set for the local environment:
-
-`.env`
-
-```text
-REACT_STORYBOOK_SOURCEMAPS=true
-
-# Feature Flags
-FEATURE_NAME=true
-```
diff --git a/packages/react/docs/environment-variables.stories.mdx b/packages/react/docs/environment-variables.stories.mdx
deleted file mode 100644
index fdcb2e045b4..00000000000
--- a/packages/react/docs/environment-variables.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from './environment-variables.md';
-
-<Meta title="Overview/Environment variables" />
-
-<Description markdown={readme} />
diff --git a/packages/react/docs/feature-flags.md b/packages/react/docs/feature-flags.md
deleted file mode 100644
index 63127bc9afa..00000000000
--- a/packages/react/docs/feature-flags.md
+++ /dev/null
@@ -1,133 +0,0 @@
-<!-- START doctoc generated TOC please keep comment here to allow auto update -->
-<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
-## Table of Contents
-
-- [Feature Flags](#feature-flags)
-  - [Overview](#overview)
-  - [Creating a Feature Flag](#creating-a-feature-flag)
-  - [Wrapping Storybook Stories with Feature Flags](#wrapping-storybook-stories-with-feature-flags)
-- [Using Feature Flags](#using-feature-flags)
-  - [Turning On/Off Feature Flags Locally](#turning-onoff-feature-flags-locally)
-
-<!-- END doctoc generated TOC please keep comment here to allow auto update -->
-
-# Feature Flags
-
-> Guidelines for how to create and use feature flags in the React package
-
-## Overview
-
-Feature flags should be used when a particular feature is not ready for public
-comsumption. This can pertain to proof of concepts, works in progress that will
-not be ready for the next release, etc.
-
-## Creating a Feature Flag
-
-Within the file `FeatureFlags.js`, add a line with the following structure:
-
-```javascript
-export const DDS_FEATURE_NAME = process.env.DDS_FEATURE_NAME === 'true' || DDS_FLAGS_ALL || false;
-```
-
-Then, add `DDS_FEATURE_NAME` to `.env.example` in the root of the package:
-
-```text
-# Feature Flags
-DDS_FEATURE_NAME=<boolean flag to turn on or off feature xyz>
-```
-
-## Wrapping Storybook Stories with Feature Flags
-
-When rendering the Storybook instance, experimental features should not appear
-unless the flag is enabled. Any storybook stories should be exported with the 
-feature flag:
-
-```javascript
-import MyFeature from '../MyFeature';
-import { DDS_MY_FEATURE } from '../../../internal/FeatureFlags';
-import React from 'react';
-
-export default !DDS_MY_FEATURE
-  ? undefined
-  : {
-      title: 'Components|My feature',
-      parameters: {
-        ...
-      },
-    };
-
-export const Default = !DDS_MY_FEATURE
-  ? undefined
-  : ({ parameters }) => {
-      ...
-    };
-```
-
-# Using Feature Flags
-
-Once a flag is created, it can then be imported for use within a component.
-
-For example:
-
-```javascript
-import React from 'react';
-import PropTypes from 'prop-types';
-import { DDS_FEATURE_NAME } from '../../internal/FeatureFlags.js';
-import { featureFlag } from '@carbon/ibmdotcom-utilities';
-
-/**
- * EXPERIMENTAL: Renders Lorem ipsum component
- *
- * @returns {*} The rendered component
- * @private
- * @class
- */
-const FeatureName = () => featureFlag(DDS_FEATURE_NAME, <div>Lorem Ipsum</div>);
-
-export default FeatureName;
-```
-
-The feature can also be selectively injected into another component using the
-feature flag:
-
-```javascript
-import React from 'react';
-import { DDS_FEATURE_NAME } from '../../internal/FeatureFlags.js';
-import { featureFlag } from '@carbon/ibmdotcom-utilities';
-import FeatureName from './FeatureName';
-
-/** Footer component */
-class MyComponent extends React.Component {
-  /**
-   * Renders my component
-   *
-   * @returns {object} JSX object
-   */
-  render() {
-    return (
-      <div>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-        {featureFlag(DDS_FEATURE_NAME, <FeatureName />)}
-      </div>
-    );
-  }
-}
-
-export default MyComponent;
-```
-
-## Turning On/Off Feature Flags Locally
-
-To enable a feature locally, follow the instructions on 
-[environment variables](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/docs/environment-variables.md).
-
-Replace the helper text with the value `true`. For example:
-
-`.env`
-
-```text
-# Feature Flags
-DDS_FEATURE_NAME=true
-```
-
-Once the flag is in place, storybook can be deployed and will honor the flag.
diff --git a/packages/react/docs/feature-flags.stories.mdx b/packages/react/docs/feature-flags.stories.mdx
deleted file mode 100644
index 179bdd029b1..00000000000
--- a/packages/react/docs/feature-flags.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from './feature-flags.md';
-
-<Meta title="Overview/Feature flags" />
-
-<Description markdown={readme} />
diff --git a/packages/react/docs/overview.stories.mdx b/packages/react/docs/overview.stories.mdx
deleted file mode 100644
index cc9f0872a59..00000000000
--- a/packages/react/docs/overview.stories.mdx
+++ /dev/null
@@ -1,6 +0,0 @@
-import { Description, Meta } from '@storybook/addon-docs/blocks';
-import readme from '../README.md';
-
-<Meta title="Overview/Getting started" />
-
-<Description markdown={readme} />
diff --git a/packages/react/examples/codesandbox/components/ButtonGroup/.gitignore b/packages/react/examples/codesandbox/components/ButtonGroup/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/ButtonGroup/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ButtonGroup/package.json b/packages/react/examples/codesandbox/components/ButtonGroup/package.json
deleted file mode 100644
index 436dedfe083..00000000000
--- a/packages/react/examples/codesandbox/components/ButtonGroup/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-buttongroup-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ButtonGroup/public/index.html b/packages/react/examples/codesandbox/components/ButtonGroup/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/ButtonGroup/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ButtonGroup/src/index.js b/packages/react/examples/codesandbox/components/ButtonGroup/src/index.js
deleted file mode 100644
index caf3d62954e..00000000000
--- a/packages/react/examples/codesandbox/components/ButtonGroup/src/index.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { ButtonGroup } from '@carbon/ibmdotcom-react/es/components/ButtonGroup';
-import ReactDom from 'react-dom';
-
-const buttons = [
-  {
-    href: "https://www.example.com",
-    copy: "Button 2",
-  },
-  {
-    href: "https://www.example.com",
-    copy: "Button 1",
-  },
-];
-
-const buttonsWithIcons = [
-  {
-    href: "https://www.example.com",
-    copy: "Button 2",
-    renderIcon: ArrowRight20,
-  },
-  {
-    href: "https://www.example.com",
-    copy: "Button 1",
-    renderIcon: ArrowRight20,
-  },
-];
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <p>Default buttons</p>
-        <div>
-          <ButtonGroup buttons={buttons} />
-        </div>
-        <p style={{ paddingTop: "2rem" }}>Buttons with icons</p>
-        <div>
-          <ButtonGroup buttons={buttonsWithIcons} />
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ButtonGroup/src/styles.scss b/packages/react/examples/codesandbox/components/ButtonGroup/src/styles.scss
deleted file mode 100644
index 961c1832cf1..00000000000
--- a/packages/react/examples/codesandbox/components/ButtonGroup/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CTA/.gitignore b/packages/react/examples/codesandbox/components/CTA/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/CTA/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CTA/package.json b/packages/react/examples/codesandbox/components/CTA/package.json
deleted file mode 100644
index 25a9d182311..00000000000
--- a/packages/react/examples/codesandbox/components/CTA/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-cta-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CTA/public/index.html b/packages/react/examples/codesandbox/components/CTA/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/CTA/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CTA/src/index.js b/packages/react/examples/codesandbox/components/CTA/src/index.js
deleted file mode 100644
index b9d5054f142..00000000000
--- a/packages/react/examples/codesandbox/components/CTA/src/index.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ArrowRight20 from "@carbon/icons-react/es/arrow--right/20";
-import { CTA } from "@carbon/ibmdotcom-react/es/components/CTA";
-import ReactDom from 'react-dom';
-
-const ctaLocal = {
-  style: "text",
-  href: "https://www.example.com",
-  copy: "Lorem ipsum dolor sit amet",
-  media: {
-    type: "video",
-    src: "1_9h94wo6b",
-  },
-};
-
-const ctaButton = {
-  style: "button",
-  buttons: [
-    {
-      type: "video",
-      href: "https://www.example.com",
-      copy: "Lorem Ipsum",
-      media: {
-        src: "1_9h94wo6b",
-        type: "video"
-      },
-    },
-    {
-      type: "external",
-      href: "https://www.example.com",
-      copy: "Lorem Ipsum",
-      renderIcon: ArrowRight20
-    },
-  ],
-};
-
-const card = {
-  style: "card",
-  copy: "Lorem ipsum dolor sit amet",
-  cta: {
-    href: "https://www.example.com",
-  },
-};
-
-const feature = {
-  style: "feature",
-  heading: "Lorem ipsum dolor sit amet",
-  card: {
-    type: 'local',
-    heading: "Consectetur adipisicing elit",
-    cta: {
-      href: "https://www.example.com",
-    },
-    image: {
-      defaultSrc: "https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616",
-      alt: "Image alt text",
-    },
-  },
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-10">
-        <h4>Text CTA</h4>
-        <CTA type="local" {...ctaLocal} />
-        <CTA type="video" {...ctaLocal} id="cta-video" />
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-10">
-        <h4>Button CTA</h4>
-        <CTA type="video" {...ctaButton} />
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-10">
-        <h4>Card CTA</h4>
-        <CTA type="local" {...card} />
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-10">
-        <h4>Feature CTA</h4>
-        <CTA type="local" {...feature} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CTA/src/styles.scss b/packages/react/examples/codesandbox/components/CTA/src/styles.scss
deleted file mode 100644
index f69f6d09006..00000000000
--- a/packages/react/examples/codesandbox/components/CTA/src/styles.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 "carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/index";
-@import "@carbon/ibmdotcom-styles/scss/internal/content-group/content-group";
-@import "@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup";
-@import "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card";
-@import "@carbon/ibmdotcom-styles/scss/components/card-link/card-link";
-@import "@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
-
-// Suppress styles in visual regression tool
-@media only percy {
-  #cta-video {
-    display: none !important;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CTASection/.gitignore b/packages/react/examples/codesandbox/components/CTASection/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/CTASection/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CTASection/package.json b/packages/react/examples/codesandbox/components/CTASection/package.json
deleted file mode 100644
index 639194267d5..00000000000
--- a/packages/react/examples/codesandbox/components/CTASection/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-ctasection-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CTASection/public/index.html b/packages/react/examples/codesandbox/components/CTASection/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/CTASection/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CTASection/src/index.js b/packages/react/examples/codesandbox/components/CTASection/src/index.js
deleted file mode 100644
index 2e62355b9a4..00000000000
--- a/packages/react/examples/codesandbox/components/CTASection/src/index.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { CTASection } from '@carbon/ibmdotcom-react/es/components/CTASection';
-
-const heading = 'Take the next step';
-const copy =
-  'Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.';
-const cta = {
-  style: 'button',
-  type: 'local',
-  buttons: [
-    {
-      type: 'default',
-      copy: 'Secondary button',
-      href: 'https://example.com/',
-    },
-    {
-      type: 'default',
-      copy: 'Primary button',
-      href: 'https://example.com/',
-    },
-  ],
-};
-const items = [
-  {
-    heading: 'Get connected',
-    copy:
-      'IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.',
-    cta: {
-      copy: 'Find a partner',
-      type: 'local',
-      href: 'https://example.com/',
-    },
-  },
-  {
-    heading: 'Learn how',
-    copy:
-      'IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.',
-    cta: {
-      copy: 'Browse tutorials',
-      type: 'external',
-      href: 'https://example.com/',
-    },
-  },
-];
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-16">
-        <CTASection heading={heading} copy={copy} cta={cta} items={items} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CTASection/src/styles.scss b/packages/react/examples/codesandbox/components/CTASection/src/styles.scss
deleted file mode 100644
index 80ac11c1f41..00000000000
--- a/packages/react/examples/codesandbox/components/CTASection/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/ctasection/index";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CalloutQuote/.gitignore b/packages/react/examples/codesandbox/components/CalloutQuote/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutQuote/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CalloutQuote/package.json b/packages/react/examples/codesandbox/components/CalloutQuote/package.json
deleted file mode 100644
index bc7c976d6b7..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutQuote/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-calloutquote-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CalloutQuote/public/index.html b/packages/react/examples/codesandbox/components/CalloutQuote/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutQuote/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CalloutQuote/src/index.js b/packages/react/examples/codesandbox/components/CalloutQuote/src/index.js
deleted file mode 100644
index 3dc6136422a..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutQuote/src/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { CalloutQuote } from '@carbon/ibmdotcom-react/es/components/CalloutQuote';
-
-const quote = {
-  copy:
-    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.",
-  markType: "doubleCurved",
-  source: {
-    heading: "Lorem ipsum dolor sit amet",
-    copy: "consectetur adipiscing elit",
-    copy2: "IBM Cloud",
-  },
-  cta: {
-    copy: "Link with Icon",
-    type: "local",
-    href: "https://example.com",
-  },
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12">
-        <CalloutQuote quote={quote} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CalloutQuote/src/styles.scss b/packages/react/examples/codesandbox/components/CalloutQuote/src/styles.scss
deleted file mode 100644
index b42cdded3fc..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutQuote/src/styles.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/callout-quote/index";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CalloutWithMedia/.gitignore b/packages/react/examples/codesandbox/components/CalloutWithMedia/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutWithMedia/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CalloutWithMedia/package.json b/packages/react/examples/codesandbox/components/CalloutWithMedia/package.json
deleted file mode 100644
index 15abc8e1dd6..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutWithMedia/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-calloutwithmedia-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CalloutWithMedia/public/index.html b/packages/react/examples/codesandbox/components/CalloutWithMedia/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutWithMedia/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CalloutWithMedia/src/index.js b/packages/react/examples/codesandbox/components/CalloutWithMedia/src/index.js
deleted file mode 100644
index efd6560d981..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutWithMedia/src/index.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { CalloutWithMedia } from '@carbon/ibmdotcom-react/es/components/CalloutWithMedia';
-
-const image = {
-  heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  image: {
-    sources: [
-      {
-        src: "https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616",
-        breakpoint: 320,
-      },
-      {
-        src: "https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616",
-        breakpoint: 400,
-      },
-      {
-        src: "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-        breakpoint: 672,
-      },
-    ],
-    alt: "Image alt text",
-    defaultSrc: "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-  },
-};
-const video = {
-  videoId: "1_9h94wo6b",
-  showCaption: true,
-};
-const heading = "Curabitur malesuada varius mi eu posuere";
-const copy =
-  "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.\n      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales\n      nulla quis, *consequat* libero. Here are\n      some common categories:";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12">
-        <h4>CalloutWithMedia - Image</h4>
-        <div>
-          <CalloutWithMedia
-            mediaData={image}
-            mediaType="image"
-            heading={heading}
-            copy={copy}
-          />
-        </div>
-        <h4 style={{ paddingTop: "2rem" }}>CalloutWithMedia - Video</h4>
-        <div>
-          <CalloutWithMedia
-            mediaData={video}
-            mediaType="video"
-            heading={heading}
-            copy={copy}
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CalloutWithMedia/src/styles.scss b/packages/react/examples/codesandbox/components/CalloutWithMedia/src/styles.scss
deleted file mode 100644
index 66d3c2ea4f1..00000000000
--- a/packages/react/examples/codesandbox/components/CalloutWithMedia/src/styles.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/callout-with-media/index";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
-
-// Suppress styles in visual regression tool
-@media only percy {
-  [data-autoid="dds--content-block-simple__media"] {
-    display: none !important;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Card/.gitignore b/packages/react/examples/codesandbox/components/Card/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/Card/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/Card/package.json b/packages/react/examples/codesandbox/components/Card/package.json
deleted file mode 100644
index c3dc508f5a2..00000000000
--- a/packages/react/examples/codesandbox/components/Card/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-card-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Card/public/index.html b/packages/react/examples/codesandbox/components/Card/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/Card/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Card/src/index.js b/packages/react/examples/codesandbox/components/Card/src/index.js
deleted file mode 100644
index c9e72e70cd8..00000000000
--- a/packages/react/examples/codesandbox/components/Card/src/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { Card } from '@carbon/ibmdotcom-react/es/components/Card';
-import ReactDom from 'react-dom';
-
-const card = {
-  eyebrow: "eyebrow text",
-  heading: "Lorem ipsum dolor sit amet",
-};
-
-const cta = {
-  type: "local",
-  href: "https://example.com",
-  icon: {
-    src: ArrowRight20,
-  },
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-6">
-        <Card cta={cta} {...card} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/Card/src/styles.scss b/packages/react/examples/codesandbox/components/Card/src/styles.scss
deleted file mode 100644
index d72d622b8da..00000000000
--- a/packages/react/examples/codesandbox/components/Card/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/card/index";
-@import "@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardGroup/.gitignore b/packages/react/examples/codesandbox/components/CardGroup/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/CardGroup/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CardGroup/package.json b/packages/react/examples/codesandbox/components/CardGroup/package.json
deleted file mode 100644
index eefe439f175..00000000000
--- a/packages/react/examples/codesandbox/components/CardGroup/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-cardgroup-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardGroup/public/index.html b/packages/react/examples/codesandbox/components/CardGroup/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/CardGroup/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CardGroup/src/data.json b/packages/react/examples/codesandbox/components/CardGroup/src/data.json
deleted file mode 100644
index 09a32106256..00000000000
--- a/packages/react/examples/codesandbox/components/CardGroup/src/data.json
+++ /dev/null
@@ -1,39 +0,0 @@
-{
-  "cards": [
-    {
-      "heading": "Nunc convallis lobortis",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Fusce gravida eu arcu",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Interdum et malesuada",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Nunc convallis loborti",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Nunc convallis lbortis",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    }
-  ]
-}
diff --git a/packages/react/examples/codesandbox/components/CardGroup/src/index.js b/packages/react/examples/codesandbox/components/CardGroup/src/index.js
deleted file mode 100644
index cf578b4afe4..00000000000
--- a/packages/react/examples/codesandbox/components/CardGroup/src/index.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { CardGroup } from '@carbon/ibmdotcom-react/es/components/CardGroup';
-import data from './data.json';
-import ReactDom from 'react-dom';
-
-const cta = {
-  heading: "Top level card link",
-  cta: {
-    href: "https://www.example.com",
-  },
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <CardGroup cards={data.cards} cta={cta} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CardGroup/src/styles.scss b/packages/react/examples/codesandbox/components/CardGroup/src/styles.scss
deleted file mode 100644
index fef1cdfb57b..00000000000
--- a/packages/react/examples/codesandbox/components/CardGroup/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/card-group/card-group";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardLink/.gitignore b/packages/react/examples/codesandbox/components/CardLink/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/CardLink/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CardLink/package.json b/packages/react/examples/codesandbox/components/CardLink/package.json
deleted file mode 100644
index c22fff92dd7..00000000000
--- a/packages/react/examples/codesandbox/components/CardLink/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-cardlink-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardLink/public/index.html b/packages/react/examples/codesandbox/components/CardLink/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/CardLink/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CardLink/src/index.js b/packages/react/examples/codesandbox/components/CardLink/src/index.js
deleted file mode 100644
index 1749fea48b1..00000000000
--- a/packages/react/examples/codesandbox/components/CardLink/src/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { CardLink } from '@carbon/ibmdotcom-react/es/components/CardLink';
-import ReactDom from 'react-dom';
-
-const card = {
-  copy: "Explore AI use cases in all industries",
-  cta: {
-    href: "https://www.example.com",
-    icon: {
-      src: ArrowRight20,
-    },
-  },
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-6">
-        <CardLink card={card} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CardLink/src/styles.scss b/packages/react/examples/codesandbox/components/CardLink/src/styles.scss
deleted file mode 100644
index b27ad95e57e..00000000000
--- a/packages/react/examples/codesandbox/components/CardLink/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/card/index";
-@import "@carbon/ibmdotcom-styles/scss/components/card-link/card-link";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardSectionImages/.gitignore b/packages/react/examples/codesandbox/components/CardSectionImages/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionImages/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CardSectionImages/package.json b/packages/react/examples/codesandbox/components/CardSectionImages/package.json
deleted file mode 100644
index a3f34bfaf52..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionImages/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-cardsectionimages-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardSectionImages/public/index.html b/packages/react/examples/codesandbox/components/CardSectionImages/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionImages/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CardSectionImages/src/index.js b/packages/react/examples/codesandbox/components/CardSectionImages/src/index.js
deleted file mode 100644
index bf82a97fe50..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionImages/src/index.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { CardSectionImages } from '@carbon/ibmdotcom-react/es/components/CardSectionImages';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-16">
-        <CardSectionImages
-          cards={[
-            {
-              image: {
-                defaultSrc:
-                  "https://fpoimg.com/1056x792?text=4:3&bg_color=ee5396&text_color=161616",
-                alt: "Image alt text"
-              },
-              eyebrow: "Topic",
-              heading: "Natural language processing.",
-              cta: {
-                href: "https://www.example.com"
-              }
-            },
-            {
-              image: {
-                defaultSrc:
-                  "https://fpoimg.com/792x1056?text=3:4&bg_color=ee5396&text_color=161616",
-                alt: "Image alt text"
-              },
-              eyebrow: "Blog",
-              heading: "Natural language processing.",
-              cta: {
-                href: "https://www.example.com"
-              }
-            },
-            {
-              image: {
-                defaultSrc:
-                  "https://fpoimg.com/1056x1056?text=1:1&bg_color=ee5396&text_color=161616",
-                alt: "Image alt text"
-              },
-              eyebrow: "Topic",
-              heading: "Natural language processing.",
-              cta: {
-                href: "https://www.example.com"
-              }
-            },
-            {
-              image: {
-                defaultSrc:
-                  "https://fpoimg.com/1056x528?text=2:1&bg_color=ee5396&text_color=161616",
-                alt: "Image alt text"
-              },
-              eyebrow: "Blog",
-              heading:
-                "Serving society ethically in the age of Artificial Intelligence.",
-              cta: {
-                href: "https://www.example.com"
-              }
-            },
-            {
-              image: {
-                defaultSrc:
-                  "https://fpoimg.com/1056x594?text=16:9&bg_color=ee5396&text_color=161616",
-                alt: "Image alt text"
-              },
-              eyebrow: "Topic",
-              heading:
-                "Serving society ethically in the age of Artificial Intelligence.",
-              cta: {
-                href: "https://www.example.com"
-              }
-            }
-          ]}
-          heading="Lorem ipsum dolor sit amet"
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CardSectionImages/src/styles.scss b/packages/react/examples/codesandbox/components/CardSectionImages/src/styles.scss
deleted file mode 100644
index d10b53be8ab..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionImages/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/card-section-images/card-section-images';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardSectionSimple/.gitignore b/packages/react/examples/codesandbox/components/CardSectionSimple/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionSimple/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/CardSectionSimple/package.json b/packages/react/examples/codesandbox/components/CardSectionSimple/package.json
deleted file mode 100644
index ea49b30f8a9..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionSimple/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-cardsectionsimple-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/CardSectionSimple/public/index.html b/packages/react/examples/codesandbox/components/CardSectionSimple/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionSimple/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/CardSectionSimple/src/index.js b/packages/react/examples/codesandbox/components/CardSectionSimple/src/index.js
deleted file mode 100644
index 23893afa749..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionSimple/src/index.js
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { CardSectionSimple } from '@carbon/ibmdotcom-react/es/components/CardSectionSimple';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-16">
-        <CardSectionSimple
-          cards={
-            [
-              {
-                copy: 'Lorem ipsum dolor sit amet',
-                heading: 'Aliquam condimentum',
-                cta: {
-                  href: 'https://www.example.com',
-                },
-              },
-              {
-                copy: 'Lorem ipsum dolor sit amet',
-                heading: 'Aliquam condimentum',
-                cta: {
-                  href: 'https://www.example.com',
-                },
-              },
-              {
-                copy: 'Lorem ipsum dolor sit amet',
-                heading: 'Aliquam condimentum',
-                cta: {
-                  href: 'https://www.example.com',
-                },
-              },
-              {
-                copy: 'Lorem ipsum dolor sit amet',
-                heading: 'Aliquam condimentum',
-                cta: {
-                  href: 'https://www.example.com',
-                },
-              },
-              {
-                copy: 'Lorem ipsum dolor sit amet',
-                heading: 'Aliquam condimentum',
-                cta: {
-                  href: 'https://www.example.com',
-                },
-              },
-            ]
-          }
-          heading="Aliquam condimentum interdum"
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/CardSectionSimple/src/styles.scss b/packages/react/examples/codesandbox/components/CardSectionSimple/src/styles.scss
deleted file mode 100644
index 100be43fe1c..00000000000
--- a/packages/react/examples/codesandbox/components/CardSectionSimple/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/card-section-simple/card-section-simple';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlock/.gitignore b/packages/react/examples/codesandbox/components/ContentBlock/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlock/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlock/package.json b/packages/react/examples/codesandbox/components/ContentBlock/package.json
deleted file mode 100644
index 8df39fdebc5..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlock/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblock-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlock/public/index.html b/packages/react/examples/codesandbox/components/ContentBlock/public/index.html
deleted file mode 100644
index 3d1f8218d22..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlock/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlock/src/index.js b/packages/react/examples/codesandbox/components/ContentBlock/src/index.js
deleted file mode 100644
index 93f634deabb..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlock/src/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentBlock } from '@carbon/ibmdotcom-react/es/components/ContentBlock';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentBlock
-          heading='Lorem ipsum dolor sit amet.'
-          copy='copy text'
-          cta={{
-            cta: {
-              href: 'https://www.example.com',
-            },
-            style: 'card',
-            type: 'local',
-            heading: 'CTA heading',
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlock/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlock/src/styles.scss
deleted file mode 100644
index 0d0921e6896..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlock/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-@import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/.gitignore b/packages/react/examples/codesandbox/components/ContentBlockCards/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockCards/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/package.json b/packages/react/examples/codesandbox/components/ContentBlockCards/package.json
deleted file mode 100644
index 2269223111f..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockCards/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblockcards-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/public/index.html b/packages/react/examples/codesandbox/components/ContentBlockCards/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockCards/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/src/cards.json b/packages/react/examples/codesandbox/components/ContentBlockCards/src/cards.json
deleted file mode 100644
index 5835448eef8..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockCards/src/cards.json
+++ /dev/null
@@ -1,96 +0,0 @@
-{
-  "Simple": [
-    {
-      "heading": "Nunc convallis lobortis",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Fusce gravida eu arcu",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Interdum et malesuada",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Nunc convallis loborti",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "heading": "Nunc convallis lbortis",
-      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    }
-  ],
-  "Images": [
-    {
-      "image": {
-        "defaultSrc": "https://fpoimg.com/1056x792?text=4:3&bg_color=ee5396&text_color=161616",
-        "alt": "Image alt text"
-      },
-      "eyebrow": "Topic",
-      "heading": "Natural language processing.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "image": {
-        "defaultSrc": "https://fpoimg.com/792x1056?text=3:4&bg_color=ee5396&text_color=161616",
-        "alt": "Image alt text"
-      },
-      "eyebrow": "Blog",
-      "heading": "Natural language processing.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "image": {
-        "defaultSrc": "https://fpoimg.com/1056x1056?text=1:1&bg_color=ee5396&text_color=161616",
-        "alt": "Image alt text"
-      },
-      "eyebrow": "Topic",
-      "heading": "Natural language processing.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "image": {
-        "defaultSrc": "https://fpoimg.com/1056x528?text=2:1&bg_color=ee5396&text_color=161616",
-        "alt": "Image alt text"
-      },
-      "eyebrow": "Blog",
-      "heading": "Serving society ethically in the age of Artificial Intelligence.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    },
-    {
-      "image": {
-        "defaultSrc": "https://fpoimg.com/1056x594?text=16:9&bg_color=ee5396&text_color=161616",
-        "alt": "Image alt text"
-      },
-      "eyebrow": "Topic",
-      "heading": "Serving society ethically in the age of Artificial Intelligence.",
-      "cta": {
-        "href": "https://www.example.com"
-      }
-    }
-  ]
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/src/index.js b/packages/react/examples/codesandbox/components/ContentBlockCards/src/index.js
deleted file mode 100644
index 72a677f384c..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockCards/src/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import cards from './cards.json';
-import ReactDom from 'react-dom';
-import { ContentBlockCards } from '@carbon/ibmdotcom-react/es/components/ContentBlockCards';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12">
-        <h4>ContentBlockCards - Simple</h4>
-        <div>
-          <ContentBlockCards
-            heading="Aliquam condimentum interdum"
-            cards={cards["Simple"]}
-          />
-        </div>
-        <h4>ContentBlockCards - Images</h4>
-        <div>
-          <ContentBlockCards
-            heading="Aliquam condimentum interdum"
-            cards={cards["Images"]}
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlockCards/src/styles.scss
deleted file mode 100644
index 5ce0a429743..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockCards/src/styles.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/content-block-cards/content-block-cards";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/.gitignore b/packages/react/examples/codesandbox/components/ContentBlockHorizontal/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/package.json b/packages/react/examples/codesandbox/components/ContentBlockHorizontal/package.json
deleted file mode 100644
index 661fae2b0b8..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblockhorizontal-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/public/index.html b/packages/react/examples/codesandbox/components/ContentBlockHorizontal/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/index.js b/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/index.js
deleted file mode 100644
index 37cee6ae6f4..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import items from './items.json';
-import ReactDom from 'react-dom';
-import { ContentBlockHorizontal } from '@carbon/ibmdotcom-react/es/components/ContentBlockHorizontal';
-
-const heading = "Aliquam condimentum";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12">
-        <ContentBlockHorizontal heading={heading} items={items["items"]} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/items.json b/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/items.json
deleted file mode 100644
index 00a3ab4b9b2..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/items.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "items": [
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          },
-          {
-            "type": "external",
-            "copy": "External link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    },
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          },
-          {
-            "type": "external",
-            "copy": "External link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    },
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    }
-  ]
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/styles.scss
deleted file mode 100644
index 4775f524b4d..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMedia/.gitignore b/packages/react/examples/codesandbox/components/ContentBlockMedia/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMedia/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMedia/package.json b/packages/react/examples/codesandbox/components/ContentBlockMedia/package.json
deleted file mode 100644
index 48e843a03cc..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMedia/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblockmedia-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMedia/public/index.html b/packages/react/examples/codesandbox/components/ContentBlockMedia/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMedia/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMedia/src/index.js b/packages/react/examples/codesandbox/components/ContentBlockMedia/src/index.js
deleted file mode 100644
index 9b5e3e254ba..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMedia/src/index.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentBlockMedia } from "@carbon/ibmdotcom-react/es/components/ContentBlockMedia";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-        <ContentBlockMedia
-          copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean
-              et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
-              elit sollicitudin, sodales nulla quis, *consequat* libero. Phasellus at
-              elit sollicitudin, sodales nulla quis, consequat [libero](https://www.google.com)."
-          heading="Content Block - with Media"
-          items={[
-            {
-              mediaType: "image",
-              mediaData: {
-                heading: "Lorem ipsum dolor sit amet.",
-                image: {
-                  sources: [
-                    {
-                      src:
-                        "https://fpoimg.com/320x180?text=16:9&bg_color=ee5396&text_color=161616",
-                      breakpoint: 320,
-                    },
-                    {
-                      src:
-                        "https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616",
-                      breakpoint: 400,
-                    },
-                    {
-                      src:
-                        "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-                      breakpoint: 672,
-                    },
-                  ],
-                  alt: "Image alt text",
-                  defaultSrc:
-                    "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-                },
-              },
-              heading: "Lorem ipsum dolor sit amet",
-              items: [
-                {
-                  heading: "Lorem ipsum dolor sit amet.",
-                  copy:
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                },
-                {
-                  heading: "Lorem ipsum dolor sit amet.",
-                  copy:
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                },
-              ],
-              cta: {
-                cta: {
-                  href: "https://www.example.com",
-                },
-                style: "card",
-                type: "local",
-                heading: "Lorem ipsum dolor sit ametttt",
-              },
-            },
-            {
-              mediaType: "image",
-              mediaData: {
-                heading: "Lorem ipsum dolor sit amet.",
-                image: {
-                  sources: [
-                    {
-                      src:
-                        "https://fpoimg.com/320x180?text=16:9&bg_color=ee5396&text_color=161616",
-                      breakpoint: 320,
-                    },
-                    {
-                      src:
-                        "https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616",
-                      breakpoint: 400,
-                    },
-                    {
-                      src:
-                        "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-                      breakpoint: 672,
-                    },
-                  ],
-                  alt: "Image alt text",
-                  defaultSrc:
-                    "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-                },
-              },
-              heading: "Lorem ipsum dolor sit amet",
-              items: [
-                {
-                  heading: "Lorem ipsum dolor sit amet.",
-                  copy:
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                },
-                {
-                  heading: "Lorem ipsum dolor sit amet.",
-                  copy:
-                    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                },
-              ],
-              cta: {
-                cta: {
-                  href: "https://www.example.com",
-                },
-                style: "card",
-                type: "local",
-                heading: "Lorem ipsum dolor sit ametttt",
-              },
-            },
-          ]}
-          cta={{
-            heading: "Feature Card",
-            card: {
-              type: 'local',
-              heading: "Consectetur adipisicing elit",
-              image: {
-                defaultSrc:
-                  "https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616",
-                alt: "Image alt text",
-              },
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMedia/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlockMedia/src/styles.scss
deleted file mode 100644
index cf4c013dc35..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMedia/src/styles.scss
+++ /dev/null
@@ -1,19 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-block-media/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMixed/.gitignore b/packages/react/examples/codesandbox/components/ContentBlockMixed/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMixed/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMixed/package.json b/packages/react/examples/codesandbox/components/ContentBlockMixed/package.json
deleted file mode 100644
index f0dbd101651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMixed/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblockmixed-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMixed/public/index.html b/packages/react/examples/codesandbox/components/ContentBlockMixed/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMixed/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMixed/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentBlockMixed/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMixed/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMixed/src/index.js b/packages/react/examples/codesandbox/components/ContentBlockMixed/src/index.js
deleted file mode 100644
index a35bb2e7201..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMixed/src/index.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentBlockMixed } from '@carbon/ibmdotcom-react/es/components/ContentBlockMixed';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentBlockMixed
-          heading="Lorem ipsum dolor sit amet"
-          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-          cta={{
-            cta: {
-              href: 'https://www.ibm.com',
-            },
-            style: 'text',
-            type: 'local',
-            copy: 'ContentGroupSimple CTA copy',
-            heading: 'ContentGroupSimple CTA heading',
-          }}
-          items={[
-            {
-              type: 'ContentGroupCards',
-              heading: 'ContentGroupCards heading',
-              items: [
-                {
-                  heading: 'ContentGroupCards item heading',
-                  copy: 'ContentGroupCards item copy.',
-                  cta: {
-                    href: 'https://www.ibm.com',
-                  },
-                },
-              ],
-            },
-            {
-              type: 'ContentGroupSimple',
-              mediaType: 'image',
-              mediaData: {
-                sources: [
-                  { src: 'https://fpoimg.com/320x160?text=16:9&bg_color=ee5396&text_color=161616', breakpoint: 320 },
-                  { src: 'https://fpoimg.com/400x400?text=16:9&bg_color=ee5396&text_color=161616', breakpoint: 400 },
-                  { src: 'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616', breakpoint: 672 },
-                ],
-                alt: 'Image alt',
-                defaultSrc: 'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-              },
-              heading: 'ContentGroupSimple heading.',
-              items: [
-                {
-                  heading: 'ContentGroupSimple item heading.',
-                  copy: 'ContentGroupSimple item copy.',
-                },
-              ],
-              cta: {
-                cta: {
-                  href: 'https://www.ibm.com',
-                },
-                style: 'text',
-                type: 'local',
-                copy: 'ContentGroupSimple CTA copy',
-                heading: 'ContentGroupSimple CTA heading',
-              },
-            },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMixed/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlockMixed/src/styles.scss
deleted file mode 100644
index 733552c18d6..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockMixed/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSegmented/.gitignore b/packages/react/examples/codesandbox/components/ContentBlockSegmented/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSegmented/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSegmented/package.json b/packages/react/examples/codesandbox/components/ContentBlockSegmented/package.json
deleted file mode 100644
index c8e9eb1934f..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSegmented/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblocksegmented-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSegmented/public/index.html b/packages/react/examples/codesandbox/components/ContentBlockSegmented/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSegmented/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSegmented/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentBlockSegmented/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSegmented/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSegmented/src/index.js b/packages/react/examples/codesandbox/components/ContentBlockSegmented/src/index.js
deleted file mode 100644
index f689df32b85..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSegmented/src/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentBlockSegmented } from '@carbon/ibmdotcom-react/es/components/ContentBlockSegmented';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentBlockSegmented
-          heading="Lorem ipsum dolor sit amet."
-          copy="Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-          mediaType="image"
-          mediaData={{
-            heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            image: {
-              sources: [
-                {
-                  src: 'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-                  breakpoint: 320,
-                },
-                {
-                  src: 'https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-                  breakpoint: 400,
-                },
-                {
-                  src: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-                  breakpoint: 672,
-                },
-              ],
-              alt: 'Image alt text',
-              defaultSrc: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-            },
-          }}
-          items={[
-            {
-              heading: 'Lorem ipsum dolor sit amet.',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet.',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-              image: {
-                sources: [
-                  {
-                    src: 'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-                    breakpoint: 320,
-                  },
-                  {
-                    src: 'https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-                    breakpoint: 400,
-                  },
-                  {
-                    src: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-                    breakpoint: 672,
-                  },
-                ],
-                alt: 'Image alt text',
-                defaultSrc: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-              },
-            },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSegmented/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlockSegmented/src/styles.scss
deleted file mode 100644
index a1a6b5ee9a1..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSegmented/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-block-segmented/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSimple/.gitignore b/packages/react/examples/codesandbox/components/ContentBlockSimple/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSimple/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSimple/package.json b/packages/react/examples/codesandbox/components/ContentBlockSimple/package.json
deleted file mode 100644
index 15477f7b4ea..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSimple/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentblocksimple-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSimple/public/index.html b/packages/react/examples/codesandbox/components/ContentBlockSimple/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSimple/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSimple/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentBlockSimple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSimple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSimple/src/index.js b/packages/react/examples/codesandbox/components/ContentBlockSimple/src/index.js
deleted file mode 100644
index 7c2cec9ffa3..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSimple/src/index.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentBlockSimple } from '@carbon/ibmdotcom-react/es/components/ContentBlockSimple';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentBlockSimple
-          inverse={false}
-          heading="Lorem ipsum dolor sit amet"
-          copy="Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur."
-          mediaType="image"
-          mediaData={{
-            heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-            image: {
-              sources: [
-                {
-                  src: 'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-                  breakpoint: 320,
-                },
-                {
-                  src: 'https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-                  breakpoint: 400,
-                },
-                {
-                  src: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-                  breakpoint: 672,
-                },
-              ],
-              alt: 'Image alt text',
-              defaultSrc: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-            },
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentBlockSimple/src/styles.scss b/packages/react/examples/codesandbox/components/ContentBlockSimple/src/styles.scss
deleted file mode 100644
index 21f5560aaea..00000000000
--- a/packages/react/examples/codesandbox/components/ContentBlockSimple/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-block-simple/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroup/.gitignore b/packages/react/examples/codesandbox/components/ContentGroup/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroup/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentGroup/package.json b/packages/react/examples/codesandbox/components/ContentGroup/package.json
deleted file mode 100644
index 391b81d8a21..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroup/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentgroup-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroup/public/index.html b/packages/react/examples/codesandbox/components/ContentGroup/public/index.html
deleted file mode 100644
index 3d1f8218d22..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroup/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentGroup/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentGroup/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroup/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroup/src/index.js b/packages/react/examples/codesandbox/components/ContentGroup/src/index.js
deleted file mode 100644
index 3d9bafe4846..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroup/src/index.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentGroup } from '@carbon/ibmdotcom-react/es/components/ContentGroup';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentGroup
-          heading='Lorem ipsum dolor sit amet.'
-          copy='copy text'
-          cta={{
-            cta: {
-              href: 'https://www.example.com',
-            },
-            style: 'card',
-            type: 'local',
-            heading: 'CTA heading',
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentGroup/src/styles.scss b/packages/react/examples/codesandbox/components/ContentGroup/src/styles.scss
deleted file mode 100644
index 47dc9721ec8..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroup/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/internal/content-group/content-group';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupCards/.gitignore b/packages/react/examples/codesandbox/components/ContentGroupCards/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupCards/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentGroupCards/package.json b/packages/react/examples/codesandbox/components/ContentGroupCards/package.json
deleted file mode 100644
index a7ba1059fe0..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupCards/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentgroupcards-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupCards/public/index.html b/packages/react/examples/codesandbox/components/ContentGroupCards/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupCards/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentGroupCards/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentGroupCards/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupCards/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupCards/src/index.js b/packages/react/examples/codesandbox/components/ContentGroupCards/src/index.js
deleted file mode 100644
index 3f9b4197198..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupCards/src/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-
-import { ContentGroupCards } from '@carbon/ibmdotcom-react/es/components/ContentGroupCards';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentGroupCards
-          heading="Lorem ipsum dolor sit amet"
-          items={[
-            {
-              heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentGroupCards/src/styles.scss b/packages/react/examples/codesandbox/components/ContentGroupCards/src/styles.scss
deleted file mode 100644
index 05d7519fe4e..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupCards/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-group-cards/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/.gitignore b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/package.json b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/package.json
deleted file mode 100644
index f071ec805d4..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentgrouphorizontal-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/public/index.html b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/index.js b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/index.js
deleted file mode 100644
index 2e5900f1be1..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/index.js
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import items from "./items.json";
-import ReactDom from 'react-dom';
-import { ContentGroupHorizontal } from "@carbon/ibmdotcom-react/es/components/ContentGroupHorizontal";
-
-const heading = "Aliquam condimentum";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12">
-        <ContentGroupHorizontal heading={heading} items={items["items"]} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/items.json b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/items.json
deleted file mode 100644
index 00a3ab4b9b2..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/items.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "items": [
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          },
-          {
-            "type": "external",
-            "copy": "External link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    },
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          },
-          {
-            "type": "external",
-            "copy": "External link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    },
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    }
-  ]
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/styles.scss b/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/styles.scss
deleted file mode 100644
index 97b42825a27..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupHorizontal/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/content-group-horizontal/content-group-horizontal";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupPictograms/.gitignore b/packages/react/examples/codesandbox/components/ContentGroupPictograms/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupPictograms/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentGroupPictograms/package.json b/packages/react/examples/codesandbox/components/ContentGroupPictograms/package.json
deleted file mode 100644
index 05340cd1841..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupPictograms/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentgrouppictograms-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/pictograms-react": "10.12.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupPictograms/public/index.html b/packages/react/examples/codesandbox/components/ContentGroupPictograms/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupPictograms/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentGroupPictograms/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentGroupPictograms/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupPictograms/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupPictograms/src/index.js b/packages/react/examples/codesandbox/components/ContentGroupPictograms/src/index.js
deleted file mode 100644
index afea6c1f170..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupPictograms/src/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { Desktop } from '@carbon/pictograms-react';
-import { ContentGroupPictograms } from '@carbon/ibmdotcom-react/es/components/ContentGroupPictograms';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentGroupPictograms
-          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-          items={[
-            {
-              heading: 'Aliquam condimentum interdum',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-              cta: {
-                type: 'local',
-                href: 'https://www.example.com',
-                copy: 'Lorem ipsum dolor',
-              },
-              pictogram: {
-                src: Desktop,
-                'aria-label': 'Desktop Pictogram',
-              },
-            },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentGroupPictograms/src/styles.scss b/packages/react/examples/codesandbox/components/ContentGroupPictograms/src/styles.scss
deleted file mode 100644
index 2d38a304732..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupPictograms/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupSimple/.gitignore b/packages/react/examples/codesandbox/components/ContentGroupSimple/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupSimple/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentGroupSimple/package.json b/packages/react/examples/codesandbox/components/ContentGroupSimple/package.json
deleted file mode 100644
index 67a3c79a3ff..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupSimple/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentgroupsimple-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupSimple/public/index.html b/packages/react/examples/codesandbox/components/ContentGroupSimple/public/index.html
deleted file mode 100644
index 3d1f8218d22..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupSimple/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentGroupSimple/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentGroupSimple/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupSimple/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentGroupSimple/src/index.js b/packages/react/examples/codesandbox/components/ContentGroupSimple/src/index.js
deleted file mode 100644
index 458d51012b2..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupSimple/src/index.js
+++ /dev/null
@@ -1,76 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentGroupSimple } from '@carbon/ibmdotcom-react/es/components/ContentGroupSimple';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentGroupSimple
-          mediaType="image"
-          mediaData={{
-            image: {
-              sources: [
-                {
-                  src: 'https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616',
-                  breakpoint: 320,
-                },
-                {
-                  src: 'https://fpoimg.com/400x400?text=1:1&bg_color=ee5396&text_color=161616',
-                  breakpoint: 400,
-                },
-                {
-                  src: 'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-                  breakpoint: 672,
-                },
-              ],
-              alt: 'Image alt text',
-              defaultSrc: 'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-            },
-          }}
-          heading="Lorem ipsum dolor sit amet"
-          items={[
-            {
-              heading: 'Lorem ipsum dolor sit amet.',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet.',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet.',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-            },
-            {
-              heading: 'Lorem ipsum dolor sit amet.',
-              copy:
-                'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-            },
-          ]}
-          cta={{
-            cta: {
-              href: 'https://www.example.com',
-            },
-            style: 'card',
-            type: 'local',
-            heading: 'Lorem ipsum dolor sit ametttt',
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentGroupSimple/src/styles.scss b/packages/react/examples/codesandbox/components/ContentGroupSimple/src/styles.scss
deleted file mode 100644
index 47558f2c9a0..00000000000
--- a/packages/react/examples/codesandbox/components/ContentGroupSimple/src/styles.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/content-group-simple/index';
-@import '@carbon/ibmdotcom-styles/scss/components/image-with-caption/image-with-caption';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentItem/.gitignore b/packages/react/examples/codesandbox/components/ContentItem/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItem/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentItem/package.json b/packages/react/examples/codesandbox/components/ContentItem/package.json
deleted file mode 100644
index d38fb07428b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItem/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentitem-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentItem/public/index.html b/packages/react/examples/codesandbox/components/ContentItem/public/index.html
deleted file mode 100644
index 3d1f8218d22..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItem/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentItem/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentItem/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItem/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentItem/src/index.js b/packages/react/examples/codesandbox/components/ContentItem/src/index.js
deleted file mode 100644
index 79ce70f01ef..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItem/src/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ContentItem } from '@carbon/ibmdotcom-react/es/components/ContentItem';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <ContentItem
-          heading="heading"
-          copy="copy"
-          cta={{
-            style: 'text',
-            type: 'local',
-            copy: 'CTA text',
-            href: 'https://www.example.com',
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentItem/src/styles.scss b/packages/react/examples/codesandbox/components/ContentItem/src/styles.scss
deleted file mode 100644
index 815f6e0efff..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItem/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/internal/content-item/content-item';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentItemHorizontal/.gitignore b/packages/react/examples/codesandbox/components/ContentItemHorizontal/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItemHorizontal/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentItemHorizontal/package.json b/packages/react/examples/codesandbox/components/ContentItemHorizontal/package.json
deleted file mode 100644
index 75b32041e80..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItemHorizontal/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentitemhorizontal-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentItemHorizontal/public/index.html b/packages/react/examples/codesandbox/components/ContentItemHorizontal/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItemHorizontal/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentItemHorizontal/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentItemHorizontal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItemHorizontal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentItemHorizontal/src/index.js b/packages/react/examples/codesandbox/components/ContentItemHorizontal/src/index.js
deleted file mode 100644
index 5acca3d74a3..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItemHorizontal/src/index.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { ContentItemHorizontal } from '@carbon/ibmdotcom-react/es/components/ContentItemHorizontal';
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-6">
-        <ContentItemHorizontal
-          eyebrow="Lorem ipsum"
-          heading="Aliquam condimentum"
-          copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-          cta={{
-            items: [
-              {
-                type: 'local',
-                copy: 'Learn more',
-                cta: {
-                  href: 'https://ibm.com',
-                },
-              },
-              {
-                type: 'external',
-                copy: 'Microservices and containers',
-                cta: {
-                  href: 'https://ibm.com',
-                },
-              },
-            ],
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentItemHorizontal/src/styles.scss b/packages/react/examples/codesandbox/components/ContentItemHorizontal/src/styles.scss
deleted file mode 100644
index 64eee684730..00000000000
--- a/packages/react/examples/codesandbox/components/ContentItemHorizontal/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/card/index";
-@import "@carbon/ibmdotcom-styles/scss/components/link-list/index";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentSection/.gitignore b/packages/react/examples/codesandbox/components/ContentSection/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/ContentSection/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ContentSection/package.json b/packages/react/examples/codesandbox/components/ContentSection/package.json
deleted file mode 100644
index dac4e2d466e..00000000000
--- a/packages/react/examples/codesandbox/components/ContentSection/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-contentsection-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ContentSection/public/index.html b/packages/react/examples/codesandbox/components/ContentSection/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/ContentSection/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ContentSection/sandbox.config.json b/packages/react/examples/codesandbox/components/ContentSection/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ContentSection/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ContentSection/src/index.js b/packages/react/examples/codesandbox/components/ContentSection/src/index.js
deleted file mode 100644
index 8ed584139dc..00000000000
--- a/packages/react/examples/codesandbox/components/ContentSection/src/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { ContentSection } from '@carbon/ibmdotcom-react/es/components/ContentSection';
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <ContentSection
-    heading="Content section heading"
-    copy="copy text"
-    cta={{
-      href: 'https://www.example.com',
-      type: 'local',
-      copy: 'Link action'
-    }}
-  />
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ContentSection/src/styles.scss b/packages/react/examples/codesandbox/components/ContentSection/src/styles.scss
deleted file mode 100644
index 35d98357985..00000000000
--- a/packages/react/examples/codesandbox/components/ContentSection/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/internal/content-section/content-section';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/.gitignore b/packages/react/examples/codesandbox/components/DotcomShell/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/package.json b/packages/react/examples/codesandbox/components/DotcomShell/package.json
deleted file mode 100644
index 214aad79271..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-dotcomshell-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "carbon-components-react": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/public/index.html b/packages/react/examples/codesandbox/components/DotcomShell/public/index.html
deleted file mode 100644
index e6872059e6c..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/public/index.html
+++ /dev/null
@@ -1,175 +0,0 @@
-<!--
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <title>IBM.com React DotcomShell</title>
-    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-
-    <script>
-      window.digitalData = {
-        page: {
-          pageInfo: {
-            language: 'en-US',
-            ibm: {
-              country: 'US',
-              siteID: 'IBMTESTWWW',
-            },
-          },
-          isDataLayerReady: true,
-        },
-      };
-    </script>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <script src="../src/index.js"></script>
-  </body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/sandbox.config.json b/packages/react/examples/codesandbox/components/DotcomShell/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/src/App.js b/packages/react/examples/codesandbox/components/DotcomShell/src/App.js
deleted file mode 100644
index 7d1143043bb..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/src/App.js
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './styles.scss';
-import content from "./data/content";
-import { DotcomShell } from "@carbon/ibmdotcom-react/es/components/DotcomShell";
-
-export default function App() {
-  return (
-    <div className="App">
-      <DotcomShell
-        mastheadProps={{
-          navigation: "default",
-          platform: {
-            name: "IBM Cloud",
-            url: "https://www.ibm.com/cloud",
-          },
-          searchProps: {
-            hasSearch: true,
-            placeHolderText: "Search all of IBM",
-            searchOpenOnload: false,
-          },
-          hasNavigation: true,
-          hasProfile: true,
-        }}
-        footerProps={{
-          type: "default",
-        }}
-      >
-        {content}
-      </DotcomShell>
-    </div>
-  );
-}
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/src/data/content.js b/packages/react/examples/codesandbox/components/DotcomShell/src/data/content.js
deleted file mode 100644
index 453acaa850e..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/src/data/content.js
+++ /dev/null
@@ -1,164 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 "carbon-components/scss/components/button/_button.scss";
-import "carbon-components/scss/components/data-table/_data-table.scss";
-import "carbon-components/scss/components/structured-list/_structured-list.scss";
-import {
-  Button,
-  DataTableSkeleton,
-  StructuredListBody,
-  StructuredListCell,
-  StructuredListHead,
-  StructuredListRow,
-  StructuredListWrapper,
-} from "carbon-components-react";
-
-const content = (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-8">
-        <h1>Some random content</h1>
-        <p style={{ paddingBottom: "1rem" }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
-          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
-          aliquip ex ea commodo consequat. Duis aute irure dolor in
-          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
-          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-          culpa qui officia deserunt mollit anim id est laborum.
-        </p>
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-lg-10" style={{ paddingTop: "4rem" }}>
-        <h1>Carbon structured list</h1>
-        <StructuredListWrapper>
-          <StructuredListHead>
-            <StructuredListRow head>
-              <StructuredListCell head>ColumnA</StructuredListCell>
-              <StructuredListCell head>ColumnB</StructuredListCell>
-              <StructuredListCell head>ColumnC</StructuredListCell>
-            </StructuredListRow>
-          </StructuredListHead>
-          <StructuredListBody>
-            <StructuredListRow>
-              <StructuredListCell noWrap>Row 1</StructuredListCell>
-              <StructuredListCell>Row 1</StructuredListCell>
-              <StructuredListCell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
-                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
-                Pellentesque vulputate nisl a porttitor interdum.
-              </StructuredListCell>
-            </StructuredListRow>
-            <StructuredListRow>
-              <StructuredListCell noWrap>Row 2</StructuredListCell>
-              <StructuredListCell>Row 2</StructuredListCell>
-              <StructuredListCell>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc
-                dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean
-                posuere sem vel euismod dignissim. Nulla ut cursus dolor.
-                Pellentesque vulputate nisl a porttitor interdum.
-              </StructuredListCell>
-            </StructuredListRow>
-          </StructuredListBody>
-        </StructuredListWrapper>
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-lg-5" style={{ paddingTop: "0rem" }}>
-        <h1>Some info about this data table</h1>
-        <p style={{ paddingBottom: "2rem" }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div className="bx--col-lg-7" style={{ paddingTop: "0rem" }}>
-        <DataTableSkeleton
-          headers={["Name", "Protocol", "Port", "Rule", "Attached Groups"]}
-          zebra={false}
-          compact={false}
-        />
-      </div>
-    </div>
-    <div
-      className="bx--row"
-      style={{
-        marginTop: "5rem",
-        backgroundColor: "#f3f3f3",
-        paddingTop: "2rem",
-        paddingBottom: "2rem",
-        paddingRight: "2rem",
-      }}
-    >
-      <div
-        className="bx--col-md-2"
-        style={{ paddingBottom: "2rem", paddingTop: "2rem" }}
-      >
-        <h5>Content card</h5>
-        <p style={{ paddingBottom: "2rem", paddingTop: "2rem" }}>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-          eiusmod tempor incididunt ut labore et dolore magna aliqua.
-        </p>
-      </div>
-      <div
-        className="bx--col-md-2"
-        style={{ paddingBottom: "2rem", paddingTop: "2rem" }}
-      >
-        <div style={{ padding: "2rem", backgroundColor: "#fff" }}>
-          <h5>Content card</h5>
-          <p style={{ paddingBottom: "2rem", paddingTop: "2rem" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <p style={{ paddingBottom: "2rem" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <Button>Click me</Button>
-        </div>
-      </div>
-      <div
-        className="bx--col-md-2"
-        style={{ paddingBottom: "2rem", paddingTop: "2rem" }}
-      >
-        <div style={{ padding: "2rem", backgroundColor: "#fff" }}>
-          <h5>Content card</h5>
-          <p style={{ paddingBottom: "2rem", paddingTop: "2rem" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <p style={{ paddingBottom: "2rem" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <Button>Click me</Button>
-        </div>
-      </div>
-      <div
-        className="bx--col-md-2"
-        style={{ paddingBottom: "2rem", paddingTop: "2rem" }}
-      >
-        <div style={{ padding: "2rem", backgroundColor: "#fff" }}>
-          <h5>Content card</h5>
-          <p style={{ paddingBottom: "2rem", paddingTop: "2rem" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <p style={{ paddingBottom: "2rem" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-            eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </p>
-          <Button>Click me</Button>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-export default content;
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/src/index.js b/packages/react/examples/codesandbox/components/DotcomShell/src/index.js
deleted file mode 100644
index b9999fca24a..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 App from "./App";
-import ReactDom from 'react-dom';
-
-const rootElement = document.getElementById('root');
-ReactDom.render(
-  <App />,
-  rootElement
-);
diff --git a/packages/react/examples/codesandbox/components/DotcomShell/src/styles.scss b/packages/react/examples/codesandbox/components/DotcomShell/src/styles.scss
deleted file mode 100644
index 8866e61506d..00000000000
--- a/packages/react/examples/codesandbox/components/DotcomShell/src/styles.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 "@carbon/ibmdotcom-styles/scss/components/dotcom-shell/dotcom-shell";
-
diff --git a/packages/react/examples/codesandbox/components/ExpressiveModal/.gitignore b/packages/react/examples/codesandbox/components/ExpressiveModal/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/ExpressiveModal/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ExpressiveModal/package.json b/packages/react/examples/codesandbox/components/ExpressiveModal/package.json
deleted file mode 100644
index bc9933369b7..00000000000
--- a/packages/react/examples/codesandbox/components/ExpressiveModal/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-expressivemodal-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ExpressiveModal/public/index.html b/packages/react/examples/codesandbox/components/ExpressiveModal/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/ExpressiveModal/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ExpressiveModal/sandbox.config.json b/packages/react/examples/codesandbox/components/ExpressiveModal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ExpressiveModal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ExpressiveModal/src/index.js b/packages/react/examples/codesandbox/components/ExpressiveModal/src/index.js
deleted file mode 100644
index b53656a98fa..00000000000
--- a/packages/react/examples/codesandbox/components/ExpressiveModal/src/index.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { ButtonGroup } from '@carbon/ibmdotcom-react/es/components/ButtonGroup';
-import { ExpressiveModal } from '@carbon/ibmdotcom-react/es/components/ExpressiveModal';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { ModalBody } from 'carbon-components-react';
-import ReactDom from 'react-dom';
-
-function StoryContent({ title, paragraph, button }) {
-  return (
-    <div>
-      <h1 style={{ marginBottom: '16px' }}>{title}</h1>
-      <p style={{ marginBottom: '48px' }}>{paragraph}</p>
-      <ButtonGroup
-        buttons={[
-          {
-            href: 'https://www.example.com',
-            copy: button,
-            renderIcon: ArrowRight20,
-          },
-        ]}
-      />
-    </div>
-  );
-}
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-16">
-        <ExpressiveModal open={true} className="bx--modal--expressive">
-          <ModalBody>
-            <StoryContent
-              title="Lorem ipsum dolor sit amet"
-              paragraph="Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit."
-              button="Lorem ipsum dolor"
-            />
-          </ModalBody>
-        </ExpressiveModal>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ExpressiveModal/src/styles.scss b/packages/react/examples/codesandbox/components/ExpressiveModal/src/styles.scss
deleted file mode 100644
index 5c9a36404b2..00000000000
--- a/packages/react/examples/codesandbox/components/ExpressiveModal/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup";
-@import "@carbon/ibmdotcom-styles/scss/components/expressive-modal/expressive-modal";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/FeatureCard/.gitignore b/packages/react/examples/codesandbox/components/FeatureCard/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/FeatureCard/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/FeatureCard/package.json b/packages/react/examples/codesandbox/components/FeatureCard/package.json
deleted file mode 100644
index 38e1bb7a7a8..00000000000
--- a/packages/react/examples/codesandbox/components/FeatureCard/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-featurecard-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/FeatureCard/public/index.html b/packages/react/examples/codesandbox/components/FeatureCard/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/FeatureCard/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/FeatureCard/sandbox.config.json b/packages/react/examples/codesandbox/components/FeatureCard/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/FeatureCard/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/FeatureCard/src/index.js b/packages/react/examples/codesandbox/components/FeatureCard/src/index.js
deleted file mode 100644
index 7496ed4fa59..00000000000
--- a/packages/react/examples/codesandbox/components/FeatureCard/src/index.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ArrowRight20 from "@carbon/icons-react/es/arrow--right/20";
-import { FeatureCard } from "@carbon/ibmdotcom-react/es/components/FeatureCard";
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <FeatureCard
-          card={{
-            heading: "Lorem ipsum dolor sit amet.",
-            image: {
-              defaultSrc:
-                "https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616",
-              alt: "Image alt text",
-            },
-            cta: {
-              href: "https://www.example.com",
-              icon: {
-                src: ArrowRight20,
-              },
-            },
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/FeatureCard/src/styles.scss b/packages/react/examples/codesandbox/components/FeatureCard/src/styles.scss
deleted file mode 100644
index b91ceae27fc..00000000000
--- a/packages/react/examples/codesandbox/components/FeatureCard/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Footer/.gitignore b/packages/react/examples/codesandbox/components/Footer/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/Footer/package.json b/packages/react/examples/codesandbox/components/Footer/package.json
deleted file mode 100644
index 410cf3e1a60..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-footer-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Footer/public/index.html b/packages/react/examples/codesandbox/components/Footer/public/index.html
deleted file mode 100644
index 9bf0fdd65d8..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/public/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
-<!--
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <title>IBM.com React Footer</title>
-    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-
-    <script>
-      window.digitalData = {
-        page: {
-          pageInfo: {
-            language: 'en-US',
-            ibm: {
-              country: 'US',
-              siteID: 'IBMTESTWWW',
-            },
-          },
-          isDataLayerReady: true,
-        },
-      };
-    </script>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-16">
-          <div id="root"></div>
-        </div>
-      </div>
-    </div>
-    <script src="../src/index.js"></script>
-  </body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Footer/sandbox.config.json b/packages/react/examples/codesandbox/components/Footer/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/Footer/src/App.js b/packages/react/examples/codesandbox/components/Footer/src/App.js
deleted file mode 100644
index a67b663235e..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/src/App.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './styles.scss';
-import { Footer } from "@carbon/ibmdotcom-react/es/components/Footer";
-
-export default function App() {
-  return (
-    <div className="App">
-      <Footer type="default" />
-    </div>
-  );
-}
diff --git a/packages/react/examples/codesandbox/components/Footer/src/index.js b/packages/react/examples/codesandbox/components/Footer/src/index.js
deleted file mode 100644
index b9999fca24a..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 App from "./App";
-import ReactDom from 'react-dom';
-
-const rootElement = document.getElementById('root');
-ReactDom.render(
-  <App />,
-  rootElement
-);
diff --git a/packages/react/examples/codesandbox/components/Footer/src/styles.scss b/packages/react/examples/codesandbox/components/Footer/src/styles.scss
deleted file mode 100644
index bd40189a01d..00000000000
--- a/packages/react/examples/codesandbox/components/Footer/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/footer/index";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/HorizontalRule/.gitignore b/packages/react/examples/codesandbox/components/HorizontalRule/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/HorizontalRule/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/HorizontalRule/package.json b/packages/react/examples/codesandbox/components/HorizontalRule/package.json
deleted file mode 100644
index 46cf732b371..00000000000
--- a/packages/react/examples/codesandbox/components/HorizontalRule/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-horizontalrule-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/HorizontalRule/public/index.html b/packages/react/examples/codesandbox/components/HorizontalRule/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/HorizontalRule/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/HorizontalRule/sandbox.config.json b/packages/react/examples/codesandbox/components/HorizontalRule/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/HorizontalRule/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/HorizontalRule/src/index.js b/packages/react/examples/codesandbox/components/HorizontalRule/src/index.js
deleted file mode 100644
index d4c3db24fd6..00000000000
--- a/packages/react/examples/codesandbox/components/HorizontalRule/src/index.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { HorizontalRule } from "@carbon/ibmdotcom-react/es/components/HorizontalRule";
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <h4>Default</h4>
-        <HorizontalRule />
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <h4>Dashed</h4>
-        <HorizontalRule type="dashed" />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/HorizontalRule/src/styles.scss b/packages/react/examples/codesandbox/components/HorizontalRule/src/styles.scss
deleted file mode 100644
index be75efc53ac..00000000000
--- a/packages/react/examples/codesandbox/components/HorizontalRule/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/horizontalrule/horizontalrule";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Image/.gitignore b/packages/react/examples/codesandbox/components/Image/.gitignore
deleted file mode 100644
index abe6fd170a4..00000000000
--- a/packages/react/examples/codesandbox/components/Image/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
diff --git a/packages/react/examples/codesandbox/components/Image/package.json b/packages/react/examples/codesandbox/components/Image/package.json
deleted file mode 100644
index f71f11014f7..00000000000
--- a/packages/react/examples/codesandbox/components/Image/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-image-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Image/public/index.html b/packages/react/examples/codesandbox/components/Image/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/Image/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Image/sandbox.config.json b/packages/react/examples/codesandbox/components/Image/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/Image/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/Image/src/index.js b/packages/react/examples/codesandbox/components/Image/src/index.js
deleted file mode 100644
index da32a24ec01..00000000000
--- a/packages/react/examples/codesandbox/components/Image/src/index.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { Image } from "@carbon/ibmdotcom-react/es/components/Image";
-
-const image = [
-  {
-    src: 'https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616',
-    breakpoint: 'sm',
-  },
-  {
-    src: 'https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616',
-    breakpoint: 'md',
-  },
-  {
-    src: 'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616',
-    breakpoint: 'lg',
-  },
-];
-const alt = "Image alt text";
-const defaultSrc = "https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <Image sources={image} defaultSrc={defaultSrc} alt={alt} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/Image/src/styles.scss b/packages/react/examples/codesandbox/components/Image/src/styles.scss
deleted file mode 100644
index 9e66307c056..00000000000
--- a/packages/react/examples/codesandbox/components/Image/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/image/image";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ImageWithCaption/.gitignore b/packages/react/examples/codesandbox/components/ImageWithCaption/.gitignore
deleted file mode 100644
index abe6fd170a4..00000000000
--- a/packages/react/examples/codesandbox/components/ImageWithCaption/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
diff --git a/packages/react/examples/codesandbox/components/ImageWithCaption/package.json b/packages/react/examples/codesandbox/components/ImageWithCaption/package.json
deleted file mode 100644
index fef59b49556..00000000000
--- a/packages/react/examples/codesandbox/components/ImageWithCaption/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-imagewithcaption-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ImageWithCaption/public/index.html b/packages/react/examples/codesandbox/components/ImageWithCaption/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/ImageWithCaption/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ImageWithCaption/sandbox.config.json b/packages/react/examples/codesandbox/components/ImageWithCaption/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ImageWithCaption/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ImageWithCaption/src/index.js b/packages/react/examples/codesandbox/components/ImageWithCaption/src/index.js
deleted file mode 100644
index 67db5b9d4a8..00000000000
--- a/packages/react/examples/codesandbox/components/ImageWithCaption/src/index.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { ImageWithCaption } from "@carbon/ibmdotcom-react/es/components/ImageWithCaption";
-
-const image = {
-  sources: [
-    {
-      src: 'https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 'sm',
-    },
-    {
-      src: 'https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 'md',
-    },
-    {
-      src: 'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 'lg',
-    },
-  ],
-  alt: 'Image with caption image',
-  defaultSrc: 'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616',
-};
-const copy = "This is a description of the image.";
-const heading = "This is the image caption.";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <h4>Default</h4>
-        <ImageWithCaption
-          copy={copy}
-          image={image}
-          heading={heading}
-          inverse={false}
-        />
-      </div>
-    </div>
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <h4>Opens in modal</h4>
-        <ImageWithCaption
-          copy={copy}
-          image={image}
-          heading={heading}
-          inverse={false}
-          lightbox={true}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ImageWithCaption/src/styles.scss b/packages/react/examples/codesandbox/components/ImageWithCaption/src/styles.scss
deleted file mode 100644
index f266587ee15..00000000000
--- a/packages/react/examples/codesandbox/components/ImageWithCaption/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/image-with-caption/image-with-caption";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Layout/.gitignore b/packages/react/examples/codesandbox/components/Layout/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/Layout/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/Layout/package.json b/packages/react/examples/codesandbox/components/Layout/package.json
deleted file mode 100644
index 1583a672f2a..00000000000
--- a/packages/react/examples/codesandbox/components/Layout/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-layout-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Layout/public/index.html b/packages/react/examples/codesandbox/components/Layout/public/index.html
deleted file mode 100644
index 3d1f8218d22..00000000000
--- a/packages/react/examples/codesandbox/components/Layout/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Layout/sandbox.config.json b/packages/react/examples/codesandbox/components/Layout/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/Layout/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/Layout/src/index.js b/packages/react/examples/codesandbox/components/Layout/src/index.js
deleted file mode 100644
index ffd43efe9fd..00000000000
--- a/packages/react/examples/codesandbox/components/Layout/src/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <div className="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-    <div className="bx--row">
-      <div className="bx--layout-1-3">
-        <div className="bx--layout--sticky" style={{ top: 50 }}>
-          <h3>Column 1 (layout 1-3) </h3>
-          <p style={{ paddingBottom: '1rem' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ac turpis egestas maecenas pharetra convallis posuere.
-            Ultrices dui sapien eget mi proin sed libero enim. Elementum
-            facilisis leo vel fringilla. Sed tempus urna et pharetra
-            pharetra massa massa ultricies mi. Nascetur ridiculus mus
-            mauris vitae ultricies leo integer. Eget mauris pharetra et
-            ultrices. Urna neque viverra justo nec ultrices dui sapien.
-            Augue eget arcu dictum varius duis. Eget mauris pharetra et
-            ultrices neque ornare aenean.
-          </p>
-        </div>
-      </div>
-      <div className="bx--layout-2-3">
-        <div>
-          <h3>Column 2</h3>
-          <p style={{ paddingBottom: '1rem' }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-            do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            Ac turpis egestas maecenas pharetra convallis posuere.
-            Ultrices dui sapien eget mi proin sed libero enim. Elementum
-            facilisis leo vel fringilla. Sed tempus urna et pharetra
-            pharetra massa massa ultricies mi. Nascetur ridiculus mus
-            mauris vitae ultricies leo integer. Eget mauris pharetra et
-            ultrices. Urna neque viverra justo nec ultrices dui sapien.
-            Augue eget arcu dictum varius duis. Eget mauris pharetra et
-            ultrices neque ornare aenean.
-          </p>
-        </div>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/Layout/src/styles.scss b/packages/react/examples/codesandbox/components/Layout/src/styles.scss
deleted file mode 100644
index 759052527a7..00000000000
--- a/packages/react/examples/codesandbox/components/Layout/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LeadSpaceBlock/.gitignore b/packages/react/examples/codesandbox/components/LeadSpaceBlock/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/LeadSpaceBlock/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/LeadSpaceBlock/package.json b/packages/react/examples/codesandbox/components/LeadSpaceBlock/package.json
deleted file mode 100644
index 8ac96c115d3..00000000000
--- a/packages/react/examples/codesandbox/components/LeadSpaceBlock/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-leadspaceblock-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LeadSpaceBlock/public/index.html b/packages/react/examples/codesandbox/components/LeadSpaceBlock/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/LeadSpaceBlock/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/LeadSpaceBlock/sandbox.config.json b/packages/react/examples/codesandbox/components/LeadSpaceBlock/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/LeadSpaceBlock/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/LeadSpaceBlock/src/index.js b/packages/react/examples/codesandbox/components/LeadSpaceBlock/src/index.js
deleted file mode 100644
index 6dffac5bf50..00000000000
--- a/packages/react/examples/codesandbox/components/LeadSpaceBlock/src/index.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { LeadSpaceBlock } from "@carbon/ibmdotcom-react/es/components/LeadSpaceBlock";
-
-const title = "Continuous delivery";
-const heading = "Innovate like a startup and scale for the enterprise ";
-const copy = `Automate your software release process with continuous delivery (CD)—the most
-            critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-            ensuring software is always ready for deployment.`;
-const mediaData = {
-  heading: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-  image: {
-    sources: [
-      {
-        src: "https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616",
-        breakpoint: 320,
-      },
-      {
-        src: "https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616",
-        breakpoint: 400,
-      },
-      {
-        src: "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-        breakpoint: 672,
-      },
-    ],
-    alt: "Image alt text",
-    defaultSrc: "https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616",
-  },
-};
-const items = {
-  heading: "Featured products",
-  items: [
-    {
-      type: "local",
-      copy: "IBM Cloud Continuous Delivery",
-      cta: {
-        href: "https://ibm.com",
-      },
-    },
-    {
-      type: "local",
-      copy: "UrbanCode",
-      cta: {
-        href: "https://ibm.com",
-      },
-    },
-    {
-      type: "download",
-      copy: "View all products",
-      cta: {
-        href: "https://ibm.com",
-      },
-    },
-  ],
-};
-const cta = {
-  style: "button",
-  type: "local",
-  buttons: [
-    {
-      type: "local",
-      copy: "Contact sales",
-      href: "https://example.com/",
-    },
-  ],
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-8">
-        <LeadSpaceBlock
-          title={title}
-          copy={copy}
-          heading={heading}
-          mediaType="image"
-          mediaData={mediaData}
-          items={items}
-          cta={cta}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/LeadSpaceBlock/src/styles.scss b/packages/react/examples/codesandbox/components/LeadSpaceBlock/src/styles.scss
deleted file mode 100644
index dd93f5c4fd6..00000000000
--- a/packages/react/examples/codesandbox/components/LeadSpaceBlock/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Leadspace/.gitignore b/packages/react/examples/codesandbox/components/Leadspace/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/Leadspace/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/Leadspace/package.json b/packages/react/examples/codesandbox/components/Leadspace/package.json
deleted file mode 100644
index 1fe8457333a..00000000000
--- a/packages/react/examples/codesandbox/components/Leadspace/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-leadspace-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Leadspace/public/index.html b/packages/react/examples/codesandbox/components/Leadspace/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/Leadspace/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Leadspace/sandbox.config.json b/packages/react/examples/codesandbox/components/Leadspace/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/Leadspace/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/Leadspace/src/index.js b/packages/react/examples/codesandbox/components/Leadspace/src/index.js
deleted file mode 100644
index acc611b45d3..00000000000
--- a/packages/react/examples/codesandbox/components/Leadspace/src/index.js
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- Copyright IBM Corp. 2016, 2022
-
- 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { LeadSpace } from '@carbon/ibmdotcom-react/es/components/LeadSpace';
-import ArrowRight20 from "@carbon/icons-react/es/arrow--right/20";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-16">
-        <LeadSpace
-          type="default"
-          theme="g100"
-          title="Lorem Ipsum"
-          copy="Lorem Ipsum Dolor"
-          gradient={true}
-          buttons={[
-            {
-              copy: 'Button 1',
-              renderIcon: ArrowRight20,
-              href: 'https://www.example.com',
-            },
-            {
-              copy: 'Button 2',
-              renderIcon: ArrowRight20,
-              href: 'https://www.example.com',
-            },
-          ]}
-          image={{
-            sources: [
-              {
-                src: 'https://picsum.photos/id/1076/320/370',
-                breakpoint: 'sm',
-              },
-              { src: 'https://picsum.photos/id/1076/672/400', breakpoint: 'md' },
-            ],
-            defaultSrc: 'https://picsum.photos/id/1076/1056/480',
-            alt: 'lead space image',
-          }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/Leadspace/src/styles.scss b/packages/react/examples/codesandbox/components/Leadspace/src/styles.scss
deleted file mode 100644
index 1159e375737..00000000000
--- a/packages/react/examples/codesandbox/components/Leadspace/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LightboxMediaViewer/.gitignore b/packages/react/examples/codesandbox/components/LightboxMediaViewer/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/LightboxMediaViewer/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/LightboxMediaViewer/package.json b/packages/react/examples/codesandbox/components/LightboxMediaViewer/package.json
deleted file mode 100644
index 5dac1cf4ee9..00000000000
--- a/packages/react/examples/codesandbox/components/LightboxMediaViewer/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-lightboxmediaviewer-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LightboxMediaViewer/public/index.html b/packages/react/examples/codesandbox/components/LightboxMediaViewer/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/LightboxMediaViewer/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/LightboxMediaViewer/sandbox.config.json b/packages/react/examples/codesandbox/components/LightboxMediaViewer/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/LightboxMediaViewer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/LightboxMediaViewer/src/index.js b/packages/react/examples/codesandbox/components/LightboxMediaViewer/src/index.js
deleted file mode 100644
index 33bae50e68b..00000000000
--- a/packages/react/examples/codesandbox/components/LightboxMediaViewer/src/index.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { ButtonGroup } from "@carbon/ibmdotcom-react/es/components/ButtonGroup";
-import { LightboxMediaViewer } from "@carbon/ibmdotcom-react/es/components/LightboxMediaViewer";
-import React, { useState } from "react";
-import ReactDom from 'react-dom';
-
-const App = () => {
-  const image = {
-    src: "https://fpoimg.com/1280x720?text=16:9&bg_color=ee5396&text_color=161616",
-    alt: "Image alt text",
-    title: "Curabitur malesuada varius mi eu posuere",
-    description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:`,
-    type: "image",
-  };
-
-  const video = {
-    src: "1_9h94wo6b",
-    type: "video",
-  };
-
-  const imageButton = [
-    {
-      copy: "Open image modal",
-      href: "#",
-      onClick: openImage,
-    },
-  ];
-
-  const videoButton = [
-    {
-      copy: "Open video modal",
-      href: "#",
-      onClick: openVideo,
-    },
-  ];
-
-  const [isImageOpen, setIsImageOpen] = useState(false);
-  const [isVideoOpen, setIsVideoOpen] = useState(false);
-
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8">
-          <h4>LightboxMediaViewer - Image</h4>
-          <ButtonGroup buttons={imageButton} />
-          {isImageOpen && (
-            <LightboxMediaViewer open={isImageOpen} media={image} />
-          )}
-        </div>
-      </div>
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8">
-          <h4>LightboxMediaViewer - Embedded Video</h4>
-          <ButtonGroup buttons={videoButton} />
-          {isVideoOpen && (
-            <LightboxMediaViewer open={isVideoOpen} media={video} />
-          )}
-        </div>
-      </div>
-    </div>
-  );
-
-  function openImage() {
-    setIsImageOpen(true);
-  }
-
-  function openVideo() {
-    setIsVideoOpen(true);
-  }
-};
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/LightboxMediaViewer/src/styles.scss b/packages/react/examples/codesandbox/components/LightboxMediaViewer/src/styles.scss
deleted file mode 100644
index 25209a78cf6..00000000000
--- a/packages/react/examples/codesandbox/components/LightboxMediaViewer/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup";
-@import "@carbon/ibmdotcom-styles/scss/components/lightbox-media-viewer/lightbox-media-viewer";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LinkList/.gitignore b/packages/react/examples/codesandbox/components/LinkList/.gitignore
deleted file mode 100644
index abe6fd170a4..00000000000
--- a/packages/react/examples/codesandbox/components/LinkList/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
diff --git a/packages/react/examples/codesandbox/components/LinkList/package.json b/packages/react/examples/codesandbox/components/LinkList/package.json
deleted file mode 100644
index 6e497c40a97..00000000000
--- a/packages/react/examples/codesandbox/components/LinkList/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-linklist-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LinkList/public/index.html b/packages/react/examples/codesandbox/components/LinkList/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/LinkList/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/LinkList/sandbox.config.json b/packages/react/examples/codesandbox/components/LinkList/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/LinkList/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/LinkList/src/index.js b/packages/react/examples/codesandbox/components/LinkList/src/index.js
deleted file mode 100644
index de2df6172c4..00000000000
--- a/packages/react/examples/codesandbox/components/LinkList/src/index.js
+++ /dev/null
@@ -1,51 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { LinkList } from "@carbon/ibmdotcom-react/es/components/LinkList";
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-6">
-        <LinkList
-          style="vertical"
-          heading="Lorem ipsum dolor sit amet"
-          items={[
-            {
-              heading: "Containerization: A Complete Guide",
-              type: "local",
-              copy: "Lorem ipsum dolor sit amet",
-              cta: {
-                href: "https://ibm.com",
-              },
-            },
-            {
-              heading: "Why should you use microservices and containers?",
-              type: "external",
-              copy: "Lorem ipsum dolor sit amet",
-              cta: {
-                href: "https://ibm.com",
-              },
-            },
-            {
-              type: "video",
-              media: {
-                src: "1_9h94wo6b",
-                type: "video",
-              },
-            },
-          ]}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/LinkList/src/styles.scss b/packages/react/examples/codesandbox/components/LinkList/src/styles.scss
deleted file mode 100644
index 1c4a382dbad..00000000000
--- a/packages/react/examples/codesandbox/components/LinkList/src/styles.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/link-list/index";
-@import "@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
-
-// Suppress styles in visual regression tool
-@media only percy {
-  .bx--link-list__list--video {
-    display: none !important;
-  }
-}
-
diff --git a/packages/react/examples/codesandbox/components/LinkWithIcon/.gitignore b/packages/react/examples/codesandbox/components/LinkWithIcon/.gitignore
deleted file mode 100644
index abe6fd170a4..00000000000
--- a/packages/react/examples/codesandbox/components/LinkWithIcon/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
diff --git a/packages/react/examples/codesandbox/components/LinkWithIcon/package.json b/packages/react/examples/codesandbox/components/LinkWithIcon/package.json
deleted file mode 100644
index ec359bea746..00000000000
--- a/packages/react/examples/codesandbox/components/LinkWithIcon/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-linkwithicon-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/icons-react": "10.49.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LinkWithIcon/public/index.html b/packages/react/examples/codesandbox/components/LinkWithIcon/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/LinkWithIcon/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/LinkWithIcon/sandbox.config.json b/packages/react/examples/codesandbox/components/LinkWithIcon/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/LinkWithIcon/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/LinkWithIcon/src/index.js b/packages/react/examples/codesandbox/components/LinkWithIcon/src/index.js
deleted file mode 100644
index be7c365e2d9..00000000000
--- a/packages/react/examples/codesandbox/components/LinkWithIcon/src/index.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ArrowRight20 from "@carbon/icons-react/es/arrow--right/20";
-import { LinkWithIcon } from "@carbon/ibmdotcom-react/es/components/LinkWithIcon";
-import ReactDom from 'react-dom';
-
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <LinkWithIcon href="https://www.example.com">
-          <span>LinkWithIcon</span>
-          <ArrowRight20 />
-        </LinkWithIcon>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/LinkWithIcon/src/styles.scss b/packages/react/examples/codesandbox/components/LinkWithIcon/src/styles.scss
deleted file mode 100644
index b8f8548774b..00000000000
--- a/packages/react/examples/codesandbox/components/LinkWithIcon/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/link-with-icon/_link-with-icon.scss';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LocaleModal/.gitignore b/packages/react/examples/codesandbox/components/LocaleModal/.gitignore
deleted file mode 100644
index abe6fd170a4..00000000000
--- a/packages/react/examples/codesandbox/components/LocaleModal/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
\ No newline at end of file
diff --git a/packages/react/examples/codesandbox/components/LocaleModal/package.json b/packages/react/examples/codesandbox/components/LocaleModal/package.json
deleted file mode 100644
index 446000789ce..00000000000
--- a/packages/react/examples/codesandbox/components/LocaleModal/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-localemodal-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LocaleModal/public/index.html b/packages/react/examples/codesandbox/components/LocaleModal/public/index.html
deleted file mode 100644
index 18afe96fc87..00000000000
--- a/packages/react/examples/codesandbox/components/LocaleModal/public/index.html
+++ /dev/null
@@ -1,169 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <title>@carbon/ibmdotcom-react example</title>
-    <meta charset="UTF-8" />
-    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-
-    <script>
-      window.digitalData = {
-        page: {
-          pageInfo: {
-            language: 'en-US',
-            ibm: {
-              country: 'US',
-              siteID: 'IBMTESTWWW',
-            },
-          },
-          isDataLayerReady: true,
-        },
-      };
-    </script>
-  </head>
-
-  <body>
-    <div id="app"></div>
-
-    <script src="../src/index.js"></script>
-  </body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/LocaleModal/sandbox.config.json b/packages/react/examples/codesandbox/components/LocaleModal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/LocaleModal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/LocaleModal/src/index.js b/packages/react/examples/codesandbox/components/LocaleModal/src/index.js
deleted file mode 100644
index 4dfd5fc654d..00000000000
--- a/packages/react/examples/codesandbox/components/LocaleModal/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { LocaleModal } from "@carbon/ibmdotcom-react/es/components/LocaleModal";
-import ReactDom from 'react-dom';
-
-const App = () => <LocaleModal isOpen={true} />;
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/LocaleModal/src/styles.scss b/packages/react/examples/codesandbox/components/LocaleModal/src/styles.scss
deleted file mode 100644
index a11dcb9c0b2..00000000000
--- a/packages/react/examples/codesandbox/components/LocaleModal/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/locale-modal/locale-modal";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/.gitignore b/packages/react/examples/codesandbox/components/LogoGrid/.gitignore
deleted file mode 100644
index b9edf2e9773..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.parcel-cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/package.json b/packages/react/examples/codesandbox/components/LogoGrid/package.json
deleted file mode 100644
index 8fc39e3ba6f..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-logogrid-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/public/index.html b/packages/react/examples/codesandbox/components/LogoGrid/public/index.html
deleted file mode 100644
index f0bcde64651..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/sandbox.config.json b/packages/react/examples/codesandbox/components/LogoGrid/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/src/index.js b/packages/react/examples/codesandbox/components/LogoGrid/src/index.js
deleted file mode 100644
index fecb88fc34b..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/src/index.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 2022
-
-  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 './styles.scss';
-
-import logos from "./logos.json";
-import ReactDom from 'react-dom';
-import { LogoGrid } from "@carbon/ibmdotcom-react/es/components/LogoGrid";
-
-const heading = "Our customers";
-const ctaCopy = "Lorem ipsum dolor sit amet";
-const ctaHref = "http://local.url.com/";
-const hideBorder = false;
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12">
-        <LogoGrid
-          heading={heading}
-          logosGroup={logos}
-          ctaCopy={ctaCopy}
-          ctaHref={ctaHref}
-          hideBorder={hideBorder}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/src/logos.json b/packages/react/examples/codesandbox/components/LogoGrid/src/logos.json
deleted file mode 100644
index 4b25a1a0094..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/src/logos.json
+++ /dev/null
@@ -1,47 +0,0 @@
-[
-  {
-    "label": "Company A",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company B",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company C",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company D",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company E",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company F",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company G",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company H",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  },
-  {
-    "label": "Company I",
-    "imgSrc": "https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616",
-    "altText": "Image alt text"
-  }
-]
diff --git a/packages/react/examples/codesandbox/components/LogoGrid/src/styles.scss b/packages/react/examples/codesandbox/components/LogoGrid/src/styles.scss
deleted file mode 100644
index 376c44e66f9..00000000000
--- a/packages/react/examples/codesandbox/components/LogoGrid/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
-  Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Masthead/.gitignore b/packages/react/examples/codesandbox/components/Masthead/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/Masthead/package.json b/packages/react/examples/codesandbox/components/Masthead/package.json
deleted file mode 100644
index d5836a55ead..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-masthead-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Masthead/public/index.html b/packages/react/examples/codesandbox/components/Masthead/public/index.html
deleted file mode 100644
index 069e26a2475..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/public/index.html
+++ /dev/null
@@ -1,184 +0,0 @@
-<!--
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <title>IBM.com React Masthead</title>
-    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-
-    <script>
-      window.digitalData = {
-        page: {
-          pageInfo: {
-            language: 'en-US',
-            ibm: {
-              country: 'US',
-              siteID: 'IBMTESTWWW',
-            },
-          },
-          isDataLayerReady: true,
-        },
-      };
-    </script>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-16">
-          <div id="root"></div>
-        </div>
-      </div>
-    </div>
-
-    <script src="../src/index.js"></script>
-  </body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Masthead/sandbox.config.json b/packages/react/examples/codesandbox/components/Masthead/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/Masthead/src/App.js b/packages/react/examples/codesandbox/components/Masthead/src/App.js
deleted file mode 100644
index 473e79c6693..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/src/App.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './styles.scss';
-import { Masthead } from '@carbon/ibmdotcom-react/es/components/Masthead';
-
-export default function App() {
-  const mastheadProps = {
-    navigation: 'default',
-    platform: {
-      name: 'IBM Cloud',
-      url: 'https://www.ibm.com/cloud',
-    },
-    hasNavigation: true,
-    hasProfile: true,
-    searchProps: {
-      hasSearch: true,
-      placeHolderText: 'Search all of IBM',
-      searchOpenOnload: false,
-    },
-  };
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-16">
-          <Masthead {...mastheadProps} />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/react/examples/codesandbox/components/Masthead/src/index.js b/packages/react/examples/codesandbox/components/Masthead/src/index.js
deleted file mode 100644
index b9999fca24a..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 App from "./App";
-import ReactDom from 'react-dom';
-
-const rootElement = document.getElementById('root');
-ReactDom.render(
-  <App />,
-  rootElement
-);
diff --git a/packages/react/examples/codesandbox/components/Masthead/src/styles.scss b/packages/react/examples/codesandbox/components/Masthead/src/styles.scss
deleted file mode 100644
index ceff2537edf..00000000000
--- a/packages/react/examples/codesandbox/components/Masthead/src/styles.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '@carbon/ibmdotcom-styles/scss/components/masthead/index';
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/babel.config.json b/packages/react/examples/codesandbox/components/MastheadL1/babel.config.json
deleted file mode 100644
index c5f23bc89a2..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/babel.config.json
+++ /dev/null
@@ -1,8 +0,0 @@
-{
-  "presets": ["@babel/preset-react"],
-  "env": {
-    "development": {
-      "plugins": ["react-refresh/babel"]
-    }
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/package.json b/packages/react/examples/codesandbox/components/MastheadL1/package.json
deleted file mode 100644
index 12f4dfef43f..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-masthead-l1-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/public/index.html b/packages/react/examples/codesandbox/components/MastheadL1/public/index.html
deleted file mode 100644
index cd1b3063739..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/public/index.html
+++ /dev/null
@@ -1,183 +0,0 @@
-<!--
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="theme-color" content="#000000" />
-    <title>IBM.com React Masthead</title>
-    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-
-    <script>
-      window.digitalData = {
-        page: {
-          pageInfo: {
-            language: 'en-US',
-            ibm: {
-              country: 'US',
-              siteID: 'IBMTESTWWW',
-            },
-          },
-          isDataLayerReady: true,
-        },
-      };
-    </script>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-16">
-          <div id="root"></div>
-        </div>
-      </div>
-    </div>
-    <script src="../src/index.js"></script>
-  </body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/sandbox.config.json b/packages/react/examples/codesandbox/components/MastheadL1/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/src/App.js b/packages/react/examples/codesandbox/components/MastheadL1/src/App.js
deleted file mode 100644
index 22be9196a8b..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/src/App.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { Masthead } from '@carbon/ibmdotcom-react/es/components/Masthead';
-import links from './links';
-import './styles.scss';
-
-export default function App() {
-  const mastheadProps = {
-    navigation: 'default',
-    platform: {
-      name: 'Stock Charts',
-      url: 'https://www.example.com',
-    },
-    hasNavigation: true,
-    hasProfile: true,
-    searchProps: {
-      hasSearch: true,
-      placeHolderText: 'Search all of IBM',
-      searchOpenOnload: false,
-    },
-    mastheadL1Data: {
-      navigationL1: links,
-    },
-  };
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-16">
-          <Masthead {...mastheadProps} />
-        </div>
-      </div>
-    </div>
-  );
-}
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/src/index.js b/packages/react/examples/codesandbox/components/MastheadL1/src/index.js
deleted file mode 100644
index 828746d91cb..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/src/index.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 App from './App';
-import ReactDOM from 'react-dom';
-
-const rootElement = document.getElementById('root');
-ReactDOM.render(
-  <App />,
-  rootElement
-);
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/src/links.js b/packages/react/examples/codesandbox/components/MastheadL1/src/links.js
deleted file mode 100644
index 69c772cf2bf..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/src/links.js
+++ /dev/null
@@ -1,359 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * URLs for Masthead L0
- *
- * type {{}}
- */
-
-const mastheadLinks = [
-  {
-    title: 'Lorem ipsum dolor sit amet',
-    titleEnglish: 'Lorem ipsum dolor sit amet',
-    url: '',
-    hasMenu: true,
-    hasMegapanel: false,
-    menuSections: [
-      {
-        heading: 'Explore',
-        menuItems: [
-          {
-            title: 'Link 1',
-            url: '',
-            megapanelContent: {
-              headingTitle: '',
-              headingUrl: '',
-              description: '',
-              quickLinks: {
-                title: 'Title',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: '',
-                imageUrl: '',
-                linkTitle: '',
-                linkUrl: '',
-              },
-            },
-          },
-          {
-            title: 'Menu dropdown item with extra long text',
-            url: '',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Consectetur adipiscing elit',
-    titleEnglish: 'Consectetur adipiscing elit',
-    url: '',
-    hasMenu: true,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'Link 2',
-            url: '',
-            megapanelContent: {
-              headingTitle: 'Services',
-              headingUrl:
-                'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn',
-              description:
-                'Reimagine your business, designing and building the platforms necessary for growth',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'IBM Services, your Digital Reinvention â„¢ partner',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg',
-                linkTitle:
-                  'Explore all our business consulting and technology services',
-                linkUrl: 'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Financing',
-            url: 'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Financing',
-              headingUrl:
-                'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn',
-              description: 'Funding options that fit your business',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading:
-                  'Cloud financing strategies that work for your business',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1',
-                linkTitle:
-                  'Committed to cloud? Make the most of your cash flow.',
-                linkUrl:
-                  'https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Nulla quis sem at nibh elementum imperdiet',
-    titleEnglish: 'Nulla quis sem at nibh elementum imperdiet',
-    url: 'https://www.ibm.com/industries?lnk=min',
-    hasMenu: false,
-    hasMegapanel: false,
-    menuSections: [],
-  },
-  {
-    title: 'Fusce nec tellus sed augue semper porta',
-    titleEnglish: 'Fusce nec tellus sed augue semper porta',
-    url: '',
-    hasMenu: true,
-    hasMegapanel: false,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'IBM Developer',
-            url: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'IBM Developer',
-              headingUrl: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'IBM Developer newsletters',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg',
-                linkTitle:
-                  'Technical info on popular software development topics, including AI, Blockchain, Java and more',
-                linkUrl:
-                  'https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Blockchain',
-            url:
-              'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Blockchain',
-              headingUrl:
-                'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'Blockchain 101',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3',
-                linkTitle:
-                  'Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan',
-                linkUrl:
-                  'https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Containers',
-            url:
-              'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Containers',
-              headingUrl:
-                'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Code patterns',
-                    url:
-                      'https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Tutorials',
-                    url:
-                      'https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Events',
-                    url:
-                      'https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'Make sense of Kubernetes',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2',
-                linkTitle: 'Deploy a simple Python application with Kubernetes',
-                linkUrl:
-                  'https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Analytics',
-            url:
-              'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Analytics',
-              headingUrl:
-                'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Code patterns',
-                    url:
-                      'https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Tutorials',
-                    url:
-                      'https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Events',
-                    url:
-                      'https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Developer community',
-                    url:
-                      'https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'Train your data no matter where it lives',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg',
-                linkTitle:
-                  'Easily and securely connect to your data source for initial model training and continuous learning',
-                linkUrl:
-                  'https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Sed cursus ante dapibus diam',
-    titleEnglish: 'Sed cursus ante dapibus diam',
-    url: 'https://www.ibm.com/support/home/?lnk=msu_usen',
-    hasMenu: false,
-    hasMegapanel: false,
-    menuSections: [],
-  },
-];
-
-module.exports = mastheadLinks;
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/src/styles.scss b/packages/react/examples/codesandbox/components/MastheadL1/src/styles.scss
deleted file mode 100644
index e04d8ba4277..00000000000
--- a/packages/react/examples/codesandbox/components/MastheadL1/src/styles.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 '@carbon/ibmdotcom-styles/scss/components/masthead/index';
diff --git a/packages/react/examples/codesandbox/components/PictogramItem/.gitignore b/packages/react/examples/codesandbox/components/PictogramItem/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/PictogramItem/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/PictogramItem/package.json b/packages/react/examples/codesandbox/components/PictogramItem/package.json
deleted file mode 100644
index a613f6fb959..00000000000
--- a/packages/react/examples/codesandbox/components/PictogramItem/package.json
+++ /dev/null
@@ -1,33 +0,0 @@
-{
-  "name": "ibmdotcom-react-pictogramitem-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "@carbon/pictograms-react": "10.12.0",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/PictogramItem/public/index.html b/packages/react/examples/codesandbox/components/PictogramItem/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/PictogramItem/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/PictogramItem/sandbox.config.json b/packages/react/examples/codesandbox/components/PictogramItem/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/PictogramItem/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/PictogramItem/src/index.js b/packages/react/examples/codesandbox/components/PictogramItem/src/index.js
deleted file mode 100644
index 225fb5cbca4..00000000000
--- a/packages/react/examples/codesandbox/components/PictogramItem/src/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import Desktop from "@carbon/pictograms-react/es/desktop";
-import { PictogramItem } from "@carbon/ibmdotcom-react/es/components/PictogramItem";
-import ReactDom from 'react-dom';
-
-const heading = "Lorem ipsum dolor sit";
-const copy =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam";
-const pictogram = {
-  src: Desktop,
-  "aria-label": "Pictogram description",
-};
-
-const cta = {
-  type: "local",
-  href: "https://www.example.com",
-  copy: "Lorem ipsum dolor",
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <PictogramItem
-          heading={heading}
-          copy={copy}
-          pictogram={pictogram}
-          cta={cta}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/PictogramItem/src/styles.scss b/packages/react/examples/codesandbox/components/PictogramItem/src/styles.scss
deleted file mode 100644
index ce6dd96e321..00000000000
--- a/packages/react/examples/codesandbox/components/PictogramItem/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Quote/.gitignore b/packages/react/examples/codesandbox/components/Quote/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/Quote/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/Quote/package.json b/packages/react/examples/codesandbox/components/Quote/package.json
deleted file mode 100644
index 8b9b7326d4a..00000000000
--- a/packages/react/examples/codesandbox/components/Quote/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-quote-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/Quote/public/index.html b/packages/react/examples/codesandbox/components/Quote/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/Quote/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/Quote/sandbox.config.json b/packages/react/examples/codesandbox/components/Quote/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/Quote/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/Quote/src/index.js b/packages/react/examples/codesandbox/components/Quote/src/index.js
deleted file mode 100644
index a0e96ee1460..00000000000
--- a/packages/react/examples/codesandbox/components/Quote/src/index.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { Quote } from "@carbon/ibmdotcom-react/es/components/Quote";
-import ReactDom from 'react-dom';
-
-const copy =
-  "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.";
-const markType = "doubleCurved";
-const cta = {
-  copy: "Link with Icon",
-  type: "local",
-  href: "https://example.com",
-};
-const source = {
-  heading: "Lorem ipsum dolor sit amet",
-  copy: "consectetur adipiscing elit",
-  copy2: "IBM Cloud",
-};
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <Quote markType={markType} copy={copy} source={source} cta={cta} />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/Quote/src/styles.scss b/packages/react/examples/codesandbox/components/Quote/src/styles.scss
deleted file mode 100644
index e52cab5b83b..00000000000
--- a/packages/react/examples/codesandbox/components/Quote/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 "@carbon/ibmdotcom-styles/scss/components/quote/quote";
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ScrollAnimations/.gitignore b/packages/react/examples/codesandbox/components/ScrollAnimations/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/ScrollAnimations/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/ScrollAnimations/package.json b/packages/react/examples/codesandbox/components/ScrollAnimations/package.json
deleted file mode 100644
index a504ddad82e..00000000000
--- a/packages/react/examples/codesandbox/components/ScrollAnimations/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-scroll-animations-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/ScrollAnimations/public/index.html b/packages/react/examples/codesandbox/components/ScrollAnimations/public/index.html
deleted file mode 100644
index cf7f6ddb2f5..00000000000
--- a/packages/react/examples/codesandbox/components/ScrollAnimations/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
- Copyright IBM Corp. 2016, 2020
-
- This source code is licensed under the Apache-2.0 license found in the
- LICENSE file in the root directory of this source tree.
- -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/ScrollAnimations/sandbox.config.json b/packages/react/examples/codesandbox/components/ScrollAnimations/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/ScrollAnimations/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/ScrollAnimations/src/index.js b/packages/react/examples/codesandbox/components/ScrollAnimations/src/index.js
deleted file mode 100644
index 28c1a96ad96..00000000000
--- a/packages/react/examples/codesandbox/components/ScrollAnimations/src/index.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import { ScrollAnimations } from "@carbon/ibmdotcom-react/es/components/ScrollAnimations";
-import ReactDom from 'react-dom';
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <ScrollAnimations animation={'fade'} selectorTargets={'h1'}>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-          <h1>This is extra content so we can scroll!</h1>
-        </ScrollAnimations>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/ScrollAnimations/src/styles.scss b/packages/react/examples/codesandbox/components/ScrollAnimations/src/styles.scss
deleted file mode 100644
index ac2304bfa35..00000000000
--- a/packages/react/examples/codesandbox/components/ScrollAnimations/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/scroll-into-view';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/TableOfContents/.gitignore b/packages/react/examples/codesandbox/components/TableOfContents/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/TableOfContents/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/TableOfContents/package.json b/packages/react/examples/codesandbox/components/TableOfContents/package.json
deleted file mode 100644
index 4b22d6f21ef..00000000000
--- a/packages/react/examples/codesandbox/components/TableOfContents/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-tableofcontents-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/TableOfContents/public/index.html b/packages/react/examples/codesandbox/components/TableOfContents/public/index.html
deleted file mode 100644
index c97b8a8ac97..00000000000
--- a/packages/react/examples/codesandbox/components/TableOfContents/public/index.html
+++ /dev/null
@@ -1,21 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/TableOfContents/sandbox.config.json b/packages/react/examples/codesandbox/components/TableOfContents/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/TableOfContents/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/TableOfContents/src/index.js b/packages/react/examples/codesandbox/components/TableOfContents/src/index.js
deleted file mode 100644
index 35df9afa289..00000000000
--- a/packages/react/examples/codesandbox/components/TableOfContents/src/index.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { TableOfContents } from "@carbon/ibmdotcom-react/es/components/TableOfContents";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <TableOfContents>
-          <a name="1" data-title="Section - 1" />
-          <h3>Section - 1</h3>
-          <p style={{ marginBottom: "200px" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Praesent tristique
-            magna sit amet purus gravida quis blandit turpis. Id eu nisl nunc mi
-            ipsum. Purus in massa tempor nec feugiat nisl pretium. Sit amet tellus
-            cras adipiscing enim eu turpis. Urna id volutpat lacus laoreet. Et leo
-            duis ut diam. Lectus magna fringilla urna porttitor rhoncus dolor. Neque
-            egestas congue quisque egestas diam in arcu cursus euismod. Vitae et leo
-            duis ut diam quam nulla porttitor. Id ornare arcu odio ut sem nulla
-            pharetra diam sit. Cursus turpis massa tincidunt dui ut ornare lectus sit
-            amet. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar
-            pellentesque habitant. Risus viverra adipiscing at in. Ullamcorper morbi
-            tincidunt ornare massa eget egestas purus viverra. Hendrerit gravida
-            rutrum quisque non tellus orci ac auctor augue.
-          </p>
-
-          <a name="2" data-title="Section - 2" />
-          <h3>Section - 2</h3>
-          <p style={{ marginBottom: "200px" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Praesent tristique
-            magna sit amet purus gravida quis blandit turpis. Id eu nisl nunc mi
-            ipsum. Purus in massa tempor nec feugiat nisl pretium. Sit amet tellus
-            cras adipiscing enim eu turpis. Urna id volutpat lacus laoreet. Et leo
-            duis ut diam. Lectus magna fringilla urna porttitor rhoncus dolor. Neque
-            egestas congue quisque egestas diam in arcu cursus euismod. Vitae et leo
-            duis ut diam quam nulla porttitor. Id ornare arcu odio ut sem nulla
-            pharetra diam sit. Cursus turpis massa tincidunt dui ut ornare lectus sit
-            amet. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar
-            pellentesque habitant. Risus viverra adipiscing at in. Ullamcorper morbi
-            tincidunt ornare massa eget egestas purus viverra. Hendrerit gravida
-            rutrum quisque non tellus orci ac auctor augue.
-          </p>
-
-          <a name="3" data-title="Section - 3" />
-          <h3>Section - 3</h3>
-          <p style={{ marginBottom: "200px" }}>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-            tempor incididunt ut labore et dolore magna aliqua. Praesent tristique
-            magna sit amet purus gravida quis blandit turpis. Id eu nisl nunc mi
-            ipsum. Purus in massa tempor nec feugiat nisl pretium. Sit amet tellus
-            cras adipiscing enim eu turpis. Urna id volutpat lacus laoreet. Et leo
-            duis ut diam. Lectus magna fringilla urna porttitor rhoncus dolor. Neque
-            egestas congue quisque egestas diam in arcu cursus euismod. Vitae et leo
-            duis ut diam quam nulla porttitor. Id ornare arcu odio ut sem nulla
-            pharetra diam sit. Cursus turpis massa tincidunt dui ut ornare lectus sit
-            amet. Rhoncus aenean vel elit scelerisque mauris pellentesque pulvinar
-            pellentesque habitant. Risus viverra adipiscing at in. Ullamcorper morbi
-            tincidunt ornare massa eget egestas purus viverra. Hendrerit gravida
-            rutrum quisque non tellus orci ac auctor augue.
-          </p>
-        </TableOfContents>
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/TableOfContents/src/styles.scss b/packages/react/examples/codesandbox/components/TableOfContents/src/styles.scss
deleted file mode 100644
index 7be05da4377..00000000000
--- a/packages/react/examples/codesandbox/components/TableOfContents/src/styles.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/tableofcontents/index';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/VideoPlayer/.gitignore b/packages/react/examples/codesandbox/components/VideoPlayer/.gitignore
deleted file mode 100644
index fafb5d052fa..00000000000
--- a/packages/react/examples/codesandbox/components/VideoPlayer/.gitignore
+++ /dev/null
@@ -1,23 +0,0 @@
-# See https://help.github.com/ignore-files/ for more about ignoring files.
-
-# dependencies
-/node_modules
-
-# testing
-/coverage
-
-# production
-/build
-/dist
-
-# misc
-.DS_Store
-.cache
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
diff --git a/packages/react/examples/codesandbox/components/VideoPlayer/package.json b/packages/react/examples/codesandbox/components/VideoPlayer/package.json
deleted file mode 100644
index 51414f4b490..00000000000
--- a/packages/react/examples/codesandbox/components/VideoPlayer/package.json
+++ /dev/null
@@ -1,32 +0,0 @@
-{
-  "name": "ibmdotcom-react-videoplayer-example",
-  "private": true,
-  "version": "1.0.0",
-  "homepage": "./",
-  "scripts": {
-    "start": "react-scripts start",
-    "build": "BUILD_PATH='./dist' react-scripts build"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-react": "latest",
-    "@carbon/ibmdotcom-styles": "latest",
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
-  },
-  "devDependencies": {
-    "react-scripts": "4.0.3",
-    "sass": "^1.53.0"
-  },
-  "browserslist": {
-    "production": [
-      ">0.2%",
-      "not dead",
-      "not op_mini all"
-    ],
-    "development": [
-      "last 1 chrome version",
-      "last 1 firefox version",
-      "last 1 safari version"
-    ]
-  }
-}
diff --git a/packages/react/examples/codesandbox/components/VideoPlayer/public/index.html b/packages/react/examples/codesandbox/components/VideoPlayer/public/index.html
deleted file mode 100644
index d084e9c0aca..00000000000
--- a/packages/react/examples/codesandbox/components/VideoPlayer/public/index.html
+++ /dev/null
@@ -1,20 +0,0 @@
-<!--
-  Copyright IBM Corp. 2016, 2020
-  This source code is licensed under the Apache-2.0 license found in the
-  LICENSE file in the root directory of this source tree.
-  -->
-
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<title>@carbon/ibmdotcom-react example</title>
-	<meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-</head>
-
-<body>
-  <div id="app"></div>
-	<script src="../src/index.js"></script>
-</body>
-</html>
diff --git a/packages/react/examples/codesandbox/components/VideoPlayer/sandbox.config.json b/packages/react/examples/codesandbox/components/VideoPlayer/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/react/examples/codesandbox/components/VideoPlayer/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/react/examples/codesandbox/components/VideoPlayer/src/index.js b/packages/react/examples/codesandbox/components/VideoPlayer/src/index.js
deleted file mode 100644
index 7ccb7bced1b..00000000000
--- a/packages/react/examples/codesandbox/components/VideoPlayer/src/index.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './styles.scss';
-
-import ReactDom from 'react-dom';
-import { VideoPlayer } from "@carbon/ibmdotcom-react/es/components/VideoPlayer";
-
-const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12">
-        <VideoPlayer inverse={false} videoId="1_9h94wo6b" showCaption />
-      </div>
-    </div>
-  </div>
-);
-
-ReactDom.render(<App />, document.getElementById('app'));
diff --git a/packages/react/examples/codesandbox/components/VideoPlayer/src/styles.scss b/packages/react/examples/codesandbox/components/VideoPlayer/src/styles.scss
deleted file mode 100644
index d4e5dee1fe1..00000000000
--- a/packages/react/examples/codesandbox/components/VideoPlayer/src/styles.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '@carbon/ibmdotcom-styles/scss/components/video-player/video-player';
-@import '@carbon/ibmdotcom-styles/scss/components/lightbox-media-viewer/lightbox-media-viewer';
-
-body {
-  padding: 1rem 0;
-}
-
-.bx--row {
-  padding-top: 1rem;
-
-  h4 {
-    margin-top: 1rem;
-  }
-}
diff --git a/packages/react/gulp-tasks/config.js b/packages/react/gulp-tasks/config.js
deleted file mode 100644
index 4bdee8f5a9a..00000000000
--- a/packages/react/gulp-tasks/config.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-const path = require('path');
-const { program } = require('commander');
-
-/**
- * @param {*} v The value.
- * @param {*[]} a The accumulator.
- * @returns {*[]} The accumulator with the given value added.
- */
-const collect = (v, a) => a.add(v);
-
-const {
-  browser: browsers,
-  spec: specs,
-  ...rest
-} = program
-  .option(
-    '-b, --browser [browser]',
-    'Browser to test with (ChromeHeadless or Chrome) for Karma testing',
-    collect,
-    new Set()
-  )
-  .option(
-    '-d, --debug',
-    'Disables collection of code coverage for Karma testing, useful for runinng debugger against specs or sources'
-  )
-  .option(
-    '-k, --keepalive',
-    'Keeps browser open after first run of Karma test finishes'
-  )
-  .option(
-    '-s, --spec [file]',
-    'Spec files to run for Karma testing',
-    collect,
-    new Set()
-  )
-  .option('--verbose', 'Enables verbose output')
-  .parse(process.argv);
-const cloptions = {
-  browsers: (browsers && Array.from(browsers)) || [],
-  specs: (specs && Array.from(specs)) || [],
-  ...rest,
-};
-
-module.exports = {
-  cloptions,
-  srcDir: 'src',
-  iconsDir: path.dirname(require.resolve('@carbon/icons/lib')),
-  testsDir: 'tests',
-  tasksDir: 'gulp-tasks',
-  carbonComponentsReactESSrcDir: path.resolve(
-    path.dirname(require.resolve('carbon-components-react/package.json')),
-    'es'
-  ),
-  carbonComponentsReactCJSSrcDir: path.resolve(
-    path.dirname(require.resolve('carbon-components-react/package.json')),
-    'lib'
-  ),
-  carbonComponentsReactVendorSrcDir: path.resolve(
-    __dirname,
-    '../src/internal/vendor/carbon-components-react'
-  ),
-  carbonComponentsReactVendorESDstDir: path.resolve(
-    __dirname,
-    '../es/internal/vendor/carbon-components-react'
-  ),
-  carbonComponentsReactVendorCJSDstDir: path.resolve(
-    __dirname,
-    '../lib/internal/vendor/carbon-components-react'
-  ),
-  servicesCJSSrcDir: path.resolve(__dirname, '../../services/lib'),
-  servicesESSrcDir: path.resolve(__dirname, '../../services/es'),
-  servicesVendorSrcDir: path.resolve(
-    __dirname,
-    '../src/internal/vendor/@carbon/ibmdotcom-services'
-  ),
-  servicesVendorESDstDir: path.resolve(
-    __dirname,
-    '../es/internal/vendor/@carbon/ibmdotcom-services'
-  ),
-  servicesVendorCJSDstDir: path.resolve(
-    __dirname,
-    '../lib/internal/vendor/@carbon/ibmdotcom-services'
-  ),
-  utilitiesCJSSrcDir: path.resolve(__dirname, '../../utilities/lib'),
-  utilitiesESSrcDir: path.resolve(__dirname, '../../utilities/es'),
-  utilitiesVendorSrcDir: path.resolve(
-    __dirname,
-    '../src/internal/vendor/@carbon/ibmdotcom-utilities'
-  ),
-  utilitiesVendorESDstDir: path.resolve(
-    __dirname,
-    '../es/internal/vendor/@carbon/ibmdotcom-utilities'
-  ),
-  utilitiesVendorCJSDstDir: path.resolve(
-    __dirname,
-    '../lib/internal/vendor/@carbon/ibmdotcom-utilities'
-  ),
-};
diff --git a/packages/react/gulp-tasks/test.js b/packages/react/gulp-tasks/test.js
deleted file mode 100644
index 6315743f84c..00000000000
--- a/packages/react/gulp-tasks/test.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 path = require('path');
-const { Server } = require('karma');
-
-const config = require('./config');
-
-const { cloptions, testsDir } = config;
-const { browsers, specs, keepalive, verbose } = cloptions;
-
-module.exports = {
-  a11y(done) {
-    if (specs.length > 1) {
-      throw new RangeError(
-        'test:a11y can take only one -s option, which is a regular expression of target stories.'
-      );
-    }
-    new Server(
-      {
-        configFile: path.resolve(
-          __dirname,
-          '..',
-          testsDir,
-          'karma-accessibility-checker.conf.js'
-        ),
-        singleRun: !keepalive,
-        customConfig: {
-          browsers, // We'll massage browser list in `karma.config.js`
-          specs,
-          verbose,
-        },
-      },
-      done
-    ).start();
-  },
-};
diff --git a/packages/react/gulp-tasks/vendor.js b/packages/react/gulp-tasks/vendor.js
deleted file mode 100644
index 5d61d766fde..00000000000
--- a/packages/react/gulp-tasks/vendor.js
+++ /dev/null
@@ -1,311 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 path = require('path');
-const { promisify } = require('util');
-const asyncDone = require('async-done');
-const gulp = require('gulp');
-const through2 = require('through2');
-const { Parser } = require('acorn');
-const acornJsx = require('acorn-jsx');
-const { base, simple } = require('acorn-walk');
-const { extend } = require('acorn-jsx-walk');
-const MagicString = require('magic-string');
-const {
-  carbonComponentsReactESSrcDir,
-  carbonComponentsReactCJSSrcDir,
-  carbonComponentsReactVendorSrcDir,
-  carbonComponentsReactVendorESDstDir,
-  carbonComponentsReactVendorCJSDstDir,
-  servicesCJSSrcDir,
-  servicesESSrcDir,
-  servicesVendorSrcDir,
-  servicesVendorCJSDstDir,
-  servicesVendorESDstDir,
-  utilitiesCJSSrcDir,
-  utilitiesESSrcDir,
-  utilitiesVendorSrcDir,
-  utilitiesVendorCJSDstDir,
-  utilitiesVendorESDstDir,
-} = require('./config');
-
-const promisifyStream = promisify(asyncDone);
-
-const parser = Parser.extend(acornJsx());
-extend(base);
-
-const parserOptions = {
-  ecmaVersion: 10,
-  preserveParens: true,
-  sourceType: 'module',
-  allowAwaitOutsideFunction: true,
-  allowReturnOutsideFunction: true,
-  allowHashBang: true,
-};
-
-/**
- * Creates the table of:
- *
- * ```javascript
- * {
- *   '@carbon/icons-react': {
- *     Add16: 'es/add/16',
- *     Add20: 'es/add/20',
- *     ...
- *   }
- * }
- * ````
- *
- * @param {object} options The options.
- * @param {object<string, object<string, string>>} options.table
- *   The table pointing to import paths, keyed by the package name and the import name.
- * @returns {Function} The Gulp transform function to create the table.
- */
-function scan({ table }) {
-  return through2.obj((file, _, done) => {
-    const source = String(file.contents);
-    simple(parser.parse(source, parserOptions), {
-      ExportDefaultDeclaration(node) {
-        const { name } = node.declaration;
-        table[name] = `es/${path.dirname(file.relative)}/${path.basename(
-          file.basename,
-          file.extname
-        )}`;
-      },
-    });
-    done(null, file);
-  });
-}
-
-/**
- * Converts:
- *
- * ```javascript
- * import { Add16 } from '@carbon/icons-react';
- * import { settings } from 'carbon-components';
- * ````
- *
- * To:
- *
- * ```javascript
- * import Add16 from '@carbon/icons-react/es/add/16';
- * import settings from 'carbon-components/es/globals/js/settings';
- * ````
- *
- * @param {object} options The options.
- * @param {object<string, object<string, string>>} options.table
- *   The table pointing to import paths, keyed by the package name and the import name.
- * @returns {Function} The Gulp transform function to optimize imports.
- */
-function convert({ table }) {
-  return through2.obj((file, _, done) => {
-    if (file.extname === '.js') {
-      const source = String(file.contents);
-      const magicString = new MagicString(source);
-      simple(
-        parser.parse(source, {
-          ...parserOptions,
-          sourceFile: file.path,
-        }),
-        {
-          ImportDeclaration(node) {
-            const { start, end, source, specifiers } = node;
-            const { value: moduleName } = source;
-            const tableForModule = table[moduleName];
-
-            if (tableForModule) {
-              const names = specifiers.map(
-                (specifier) => specifier.imported?.name
-              );
-              const unknownImportNames = names.filter(
-                (name) => !tableForModule[name]
-              );
-
-              names.forEach((name, i) => {
-                const importPath = tableForModule[name];
-                if (importPath) {
-                  const {
-                    start: specifierStart,
-                    end: specifierEnd,
-                    local,
-                  } = specifiers[i];
-                  const { start: nextSpecifierStart = specifierEnd } =
-                    specifiers[i + 1] || {};
-                  magicString.remove(specifierStart, nextSpecifierStart);
-                  magicString.appendRight(
-                    end,
-                    `import ${local.name} from '${moduleName}/${importPath}';`
-                  );
-                }
-              });
-
-              if (unknownImportNames.length > 0) {
-                console.warn(
-                  [
-                    `There are unknown imports ${unknownImportNames} in: ${moduleName}.`,
-                    'It indicates possible needs for performance optimizations.',
-                  ].join(' ')
-                );
-              } else {
-                magicString.remove(start, end);
-              }
-            }
-          },
-        }
-      );
-      file.contents = Buffer.from(magicString.toString());
-    }
-    done(null, file);
-  });
-}
-
-/**
- * @returns {object<string, object<string, string>>}
- *   The table pointing to import paths, keyed by the package name and the import name.
- */
-const generateTable = (() => {
-  let promiseTable;
-  return async () => {
-    if (!promiseTable) {
-      const table = {
-        '@carbon/icons-react': {},
-        '@carbon/feature-flags': {},
-        'carbon-components': {
-          settings: 'es/globals/js/settings',
-        },
-      };
-      promiseTable = promisifyStream(() =>
-        gulp
-          .src(
-            path.resolve(
-              path.dirname(require.resolve('@carbon/icons-react/package.json')),
-              'es/**/*.js'
-            )
-          )
-          .pipe(scan({ table: table['@carbon/icons-react'] }))
-      ).then(() => table);
-    }
-    return await promiseTable;
-  };
-})();
-
-/**
- * Generates `src/internal/vendor` contents.
- */
-const carbonComponentsReactVendorSrc = async () => {
-  const table = await generateTable();
-  await promisifyStream(() =>
-    gulp
-      .src([
-        `${carbonComponentsReactESSrcDir}/**/*`,
-        `!${carbonComponentsReactESSrcDir}/**/*-{test,story}.js`,
-        `!${carbonComponentsReactESSrcDir}/**/*.stories.js`,
-        `!${carbonComponentsReactESSrcDir}/**/stories/*`,
-      ])
-      .pipe(convert({ table }))
-      .pipe(gulp.dest(carbonComponentsReactVendorSrcDir))
-  );
-};
-
-/**
- * Generate `es/internal/vendor` contents.
- */
-const carbonComponentsReactVendorESDst = async () => {
-  const table = await generateTable();
-  await promisifyStream(() =>
-    gulp
-      .src([
-        `${carbonComponentsReactESSrcDir}/**/*`,
-        `!${carbonComponentsReactESSrcDir}/**/*-{test,story}.js`,
-        `!${carbonComponentsReactESSrcDir}/**/*.stories.js`,
-        `!${carbonComponentsReactESSrcDir}/**/stories/*`,
-      ])
-      .pipe(convert({ table }))
-      .pipe(gulp.dest(carbonComponentsReactVendorESDstDir))
-  );
-};
-
-/**
- * The Gulp stream to generate `lib/internal/vendor` contents.
- */
-const carbonComponentsReactVendorCJSDst = () =>
-  gulp
-    .src([
-      `${carbonComponentsReactCJSSrcDir}/**/*`,
-      `!${carbonComponentsReactESSrcDir}/**/*-{test,story}.js`,
-      `!${carbonComponentsReactESSrcDir}/**/*.stories.js`,
-      `!${carbonComponentsReactESSrcDir}/**/stories/*`,
-    ])
-    .pipe(gulp.dest(carbonComponentsReactVendorCJSDstDir));
-
-/**
- * Generates `src/internal/vendor` contents.
- */
-const servicesVendorSrc = () =>
-  gulp
-    .src([`${servicesESSrcDir}/**/*`, '!**/*-{test,story}.js'])
-    .pipe(gulp.dest(servicesVendorSrcDir));
-
-/**
- * Generate `es/internal/vendor` contents.
- */
-const servicesVendorESDst = () =>
-  gulp
-    .src([`${servicesESSrcDir}/**/*`, '!**/*-{test,story}.js'])
-    .pipe(gulp.dest(servicesVendorESDstDir));
-
-/**
- * Generate `lib/internal/vendor` contents.
- */
-const servicesVendorCJSDst = () =>
-  gulp
-    .src([`${servicesCJSSrcDir}/**/*`, '!**/*-{test,story}.js'])
-    .pipe(gulp.dest(servicesVendorCJSDstDir));
-
-/**
- * Generates `src/internal/vendor` contents.
- */
-const utilitiesVendorSrc = () =>
-  gulp
-    .src([`${utilitiesESSrcDir}/**/*`, '!**/*-{test,story}.js'])
-    .pipe(gulp.dest(utilitiesVendorSrcDir));
-
-/**
- * Generate `es/internal/vendor` contents.
- */
-const utilitiesVendorESDst = () =>
-  gulp
-    .src([`${utilitiesESSrcDir}/**/*`, '!**/*-{test,story}.js'])
-    .pipe(gulp.dest(utilitiesVendorESDstDir));
-
-/**
- * Generate `lib/internal/vendor` contents.
- */
-const utilitiesVendorCJSDst = () =>
-  gulp
-    .src([`${utilitiesCJSSrcDir}/**/*`, '!**/*-{test,story}.js'])
-    .pipe(gulp.dest(utilitiesVendorCJSDstDir));
-
-module.exports = {
-  carbonComponentsReact: gulp.parallel(
-    carbonComponentsReactVendorSrc,
-    carbonComponentsReactVendorESDst,
-    carbonComponentsReactVendorCJSDst
-  ),
-  servicesVendor: gulp.parallel(
-    servicesVendorSrc,
-    servicesVendorESDst,
-    servicesVendorCJSDst
-  ),
-  utilitiesVendor: gulp.parallel(
-    utilitiesVendorSrc,
-    utilitiesVendorESDst,
-    utilitiesVendorCJSDst
-  ),
-};
diff --git a/packages/react/gulpfile.js b/packages/react/gulpfile.js
deleted file mode 100644
index 357f0c9134b..00000000000
--- a/packages/react/gulpfile.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 gulp = require('gulp');
-const test = require('./gulp-tasks/test');
-const vendor = require('./gulp-tasks/vendor');
-
-gulp.task('vendor:carbon-components-react', vendor.carbonComponentsReact);
-gulp.task('vendor:services', vendor.servicesVendor);
-gulp.task('vendor:utilities', vendor.utilitiesVendor);
-
-gulp.task(
-  'vendor',
-  gulp.series(
-    gulp.task('vendor:carbon-components-react'),
-    gulp.task('vendor:services'),
-    gulp.task('vendor:utilities')
-  )
-);
-
-gulp.task('test:a11y', test.a11y);
-gulp.task('test', gulp.task('test:a11y'));
-
-process.once('SIGINT', () => {
-  process.exit(0);
-});
diff --git a/packages/react/jest.config.js b/packages/react/jest.config.js
deleted file mode 100644
index 08e01dd7706..00000000000
--- a/packages/react/jest.config.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-module.exports = {
-  collectCoverage: true,
-  collectCoverageFrom: [
-    'src/components/**/*.js',
-    'src/internal/components/**/*.js',
-    '!src/components/**/*.stories.js',
-  ],
-  coverageDirectory: 'coverage',
-  coverageReporters: ['text', 'html'],
-  setupFiles: ['<rootDir>/config/jest/setup.js', 'raf/polyfill'],
-  setupFilesAfterEnv: ['../../tasks/jest/setupafter.js'],
-  testMatch: [
-    '<rootDir>/**/__tests__/**/*.test.js?(x)',
-    '<rootDir>/**/?(*-)(spec|test).js?(x)',
-    '!<rootDir>/**/bundle-size.test.js',
-    '!**/vendor/**',
-  ],
-  testRunner: 'jest-circus/runner',
-  testURL: 'http://localhost',
-  transform: {
-    '^.+\\.(js|jsx)$': '<rootDir>/config/jest/jsTransform.js',
-    '^.+\\.s?css$': '<rootDir>/config/jest/cssTransform.js',
-    '^(?!.*\\.(js|jsx|css|json)$)': '<rootDir>/config/jest/fileTransform.js',
-  },
-  testPathIgnorePatterns: [
-    '/node_modules/',
-    '/examples/',
-    '/config/',
-    '/lib/',
-    '/es/',
-    '/cjs/',
-    '/gulp-tasks/',
-  ],
-  transformIgnorePatterns: [
-    '[/\\\\]node_modules[/\\\\](?!(carbon-icons)).+\\.(js|jsx)$',
-    '/node_modules/(?!@carbon/ibmdotcom-utilities)',
-  ],
-  moduleFileExtensions: ['js', 'json'],
-  snapshotSerializers: ['enzyme-to-json/serializer'],
-  moduleNameMapper: {
-    axios: 'axios/dist/node/axios.cjs',
-  },
-};
diff --git a/packages/react/package.json b/packages/react/package.json
deleted file mode 100644
index b09b143c191..00000000000
--- a/packages/react/package.json
+++ /dev/null
@@ -1,194 +0,0 @@
-{
-  "name": "@carbon/ibmdotcom-react",
-  "description": "Carbon for IBM.com React Components",
-  "version": "1.53.0",
-  "license": "Apache-2.0",
-  "main": "lib/index.js",
-  "module": "es/index.js",
-  "repository": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom",
-  "bugs": "https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues",
-  "files": [
-    "lib/**/*",
-    "es/**/*",
-    "umd/**/*"
-  ],
-  "keywords": [
-    "react",
-    "carbon",
-    "carbon-components",
-    "ibm",
-    "carbon-design-system",
-    "components"
-  ],
-  "publishConfig": {
-    "access": "public"
-  },
-  "scripts": {
-    "build": "yarn clean && gulp vendor && node scripts/build.js",
-    "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider BABEL_ENV=es build-storybook",
-    "build-storybook:experimental": "cross-env NODE_OPTIONS=--openssl-legacy-provider DDS_FLAGS_ALL=true build-storybook -o storybook-static-experimental",
-    "build-storybook:rtl": "cross-env NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_USE_RTL=true build-storybook -o storybook-static-rtl",
-    "ci-check": "yarn test-ssr && yarn test:unit",
-    "clean": "rimraf src/internal/vendor es lib umd storybook-static",
-    "contributors:add": "all-contributors add",
-    "contributors:generate": "all-contributors generate",
-    "doctoc": "doctoc --title '## Table of Contents' docs",
-    "preinstall": "echo \"⛔️⛔️⛔️ATTENTION: @carbon/ibmdotcom-react package will be deprecated in Carbon for IBM.com V2. This package will fall into maintaince-mode only; we will make updates only for potential security issues and high severity bugs. Head to https://www.ibm.com/standards/carbon/developing/frameworks/react for more details.⛔️⛔️⛔️\"",
-    "postinstall": "carbon-telemetry collect --install",
-    "start": "yarn storybook",
-    "storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000",
-    "test:e2e:build": "node ./tests/e2e/build/build-examples.js",
-    "test:e2e:run": "npx -y http-server -c-1 tests/e2e/dist --silent",
-    "test:e2e:test": "NODE_OPTIONS=--openssl-legacy-provider npx -y start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config video=false --config-file tests/e2e/cypress.json'",
-    "test:e2e:test:no-percy": "npx -y start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config video=false --config-file tests/e2e/cypress.json'",
-    "test:e2e-storybook:run": "NODE_OPTIONS=--openssl-legacy-provider npx -y http-server -c-1 storybook-static --silent -p 8082",
-    "test:e2e-storybook:test": "npx -y start-server-and-test 'yarn test:e2e-storybook:run' 8082 'percy exec --config tests/e2e-storybook/.percy.json -- cypress run --config video=false --config-file tests/e2e-storybook/cypress.json'",
-    "test:e2e-storybook:dev": "cypress open --config-file ./tests/e2e-storybook/cypress-local.json",
-    "test:e2e-storybook:test:parallel": "npx -y start-server-and-test 'yarn test:e2e-storybook:run' 8082 'cy2 run --parallel --ci-build-id $CI_BUILD_ID --record --key 'carbon-for-ibm-dotcom-react' --config-file tests/e2e-storybook/cypress.json'",
-    "test:e2e-storybook:test:debug": "npx -y start-server-and-test 'yarn test:e2e-storybook:run' 8082 'cypress open --config-file tests/e2e-storybook/cypress.json'",
-    "test:e2e-storybook:test:no-percy": "npx -y start-server-and-test 'yarn test:e2e-storybook:run' http://0.0.0.0:8082 'cypress run --config-file tests/e2e-storybook/cypress.json'",
-    "test:e2e-storybook:test:no-percy:firefox": "npx -y start-server-and-test 'yarn test:e2e-storybook:run' 8082 'cypress run --config-file tests/e2e-storybook/cypress.json --browser firefox'",
-    "test:e2e-storybook:test:no-percy:with-video": "npx -y start-server-and-test 'yarn test:e2e-storybook:run' 8082 'cypress run --config video=true,screenshotOnRunFailure=true --config-file tests/e2e-storybook/cypress.json'",
-    "test:e2e-storybook:browserstack:canary": "browserstack-cypress run --cf tests/e2e-storybook/browserstack.json --ccf tests/e2e-storybook/cypress-canary.json --sync --build-name 'React Storybook Canary'",
-    "test:e2e-storybook:browserstack:next": "browserstack-cypress run --cf tests/e2e-storybook/browserstack.json --ccf tests/e2e-storybook/cypress-next.json --sync --build-name 'React Storybook Next'",
-    "test:unit": "cross-env NODE_OPTIONS=--unhandled-rejections=none jest",
-    "test:unit:updateSnapshot": "cross-env NODE_OPTIONS=--unhandled-rejections=none jest -u",
-    "test:a11y": "NODE_OPTIONS=--openssl-legacy-provider gulp test:a11y",
-    "test-ssr": "yarn build && node ssr-tests/*.js",
-    "visual-snapshot": "yarn build-storybook && percy storybook ./storybook-static"
-  },
-  "peerDependencies": {
-    "react": "^16.14.0 || ^17.0.2",
-    "react-dom": "^16.14.0 || ^17.0.2"
-  },
-  "dependencies": {
-    "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-services": "1.53.0",
-    "@carbon/ibmdotcom-styles": "1.53.0",
-    "@carbon/ibmdotcom-utilities": "1.53.0",
-    "@carbon/telemetry": "^0.1.0",
-    "autosuggest-highlight": "^3.1.1",
-    "carbon-components": "10.58.12",
-    "carbon-components-react": "7.59.17",
-    "carbon-icons": "7.0.7",
-    "classnames": "2.3.2",
-    "react-autosuggest": "^10.1.0",
-    "window-or-global": "^1.0.1"
-  },
-  "devDependencies": {
-    "@babel/cli": "~7.12.0",
-    "@babel/core": "~7.12.0",
-    "@babel/plugin-proposal-export-default-from": "~7.12.0",
-    "@babel/plugin-transform-class-properties": "~7.22.5",
-    "@babel/plugin-transform-export-namespace-from": "~7.22.11",
-    "@babel/plugin-transform-private-methods": "~7.22.5",
-    "@babel/plugin-transform-private-property-in-object": "~7.22.11",
-    "@babel/plugin-transform-runtime": "7.18.5",
-    "@babel/preset-env": "~7.23.2",
-    "@babel/preset-react": "~7.12.1",
-    "@carbon/icons-react": "10.49.2",
-    "@carbon/pictograms-react": "11.50.0",
-    "@carbon/storybook-addon-theme": "1.44.0",
-    "@percy-io/in-percy": "^0.1.11",
-    "@percy/cli": "^1.8.1",
-    "@percy/cypress": "^3.1.1",
-    "@percy/dom": "^1.0.5",
-    "@percy/sdk-utils": "^1.0.5",
-    "@percy/storybook": "^4.3.4",
-    "@rollup/plugin-babel": "^5.3.1",
-    "@rollup/plugin-commonjs": "^21.0.3",
-    "@rollup/plugin-json": "^4.1.0",
-    "@rollup/plugin-node-resolve": "^8.4.0",
-    "@rollup/plugin-replace": "^4.0.0",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-knobs": "^6.4.0",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/addon-storyshots": "^6.5.15",
-    "@storybook/addon-storysource": "^6.5.15",
-    "@storybook/addons": "^6.5.15",
-    "@storybook/builder-webpack5": "^6.5.15",
-    "@storybook/manager-webpack5": "^6.5.15",
-    "@storybook/react": "^6.5.15",
-    "@storybook/source-loader": "^6.5.15",
-    "acorn": "^8.0.0",
-    "acorn-jsx": "^5.2.0",
-    "acorn-jsx-walk": "^2.0.0",
-    "acorn-walk": "^8.0.0",
-    "all-contributors-cli": "^6.0.0",
-    "autoprefixer": "^9.8.8",
-    "axe-core": "^4.4.1",
-    "babel-jest": "^24.0.0",
-    "babel-loader": "^8.0.4",
-    "babel-plugin-dev-expression": "^0.2.1",
-    "babel-plugin-inline-react-svg": "^1.1.0",
-    "babel-plugin-macros": "^3.0.0",
-    "babel-plugin-transform-define": "^2.0.0",
-    "babel-plugin-transform-inline-environment-variables": "^0.4.0",
-    "browserslist-config-carbon": "10.6.1",
-    "browserstack-cypress-cli": "^1.11.1",
-    "cache-loader": "^4.1.0",
-    "chalk": "^4.1.1",
-    "cli-table": "^0.3.0",
-    "commander": "^11.1.0",
-    "cross-env": "^7.0.0",
-    "css-loader": "^5.2.0",
-    "cy2": "^4.0.6",
-    "cypress": "~9.7.0",
-    "cypress-axe": "^0.14.0",
-    "cypress-wait-until": "^1.7.2",
-    "doctoc": "^2.0.0",
-    "enzyme": "^3.10.0",
-    "enzyme-adapter-react-16": "^1.14.0",
-    "fast-sass-loader": "2.0.1",
-    "file-loader": "^6.2.0",
-    "fs-extra": "^10.0.0",
-    "gulp": "^4.0.2",
-    "gzip-size": "^5.0.0",
-    "jest": "25.5.4",
-    "jest-circus": "25.5.4",
-    "karma": "^6.0.0",
-    "karma-accessibility-checker": "^3.1.28",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-firefox-launcher": "^2.1.2",
-    "karma-jasmine": "^4.0.1",
-    "karma-sourcemap-loader": "^0.4.0",
-    "karma-spec-reporter": "0.0.36",
-    "karma-webpack": "^4.0.2",
-    "lodash-es": "^4.17.21",
-    "magic-string": "^0.30.0",
-    "mini-css-extract-plugin": "~2.7.0",
-    "null-loader": "^4.0.0",
-    "object-assign": "^4.1.1",
-    "postcss-loader": "^3.0.0",
-    "promise": "^8.0.1",
-    "prop-types": "^15.7.2",
-    "raf": "^3.4.1",
-    "react": "16.14.0",
-    "react-dom": "16.14.0",
-    "requestanimationframe": "^0.0.23",
-    "require-context.macro": "^1.0.4",
-    "rimraf": "^3.0.0",
-    "rollup": "^2.55.1",
-    "rollup-plugin-analyzer": "^4.0.0",
-    "rollup-plugin-node-builtins": "^2.1.2",
-    "rollup-plugin-scss": "^3.0.0",
-    "rollup-plugin-sizes": "^1.0.4",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-visualizer": "^2.5.4",
-    "rtlcss": "^3.0.0",
-    "sass-loader": "^10.0.0",
-    "style-loader": "^2.0.0",
-    "temp": "^0.9.0",
-    "terser-webpack-plugin": "^4.2.3",
-    "through2": "^3.0.0",
-    "webpack": "^4.46.0",
-    "webpack-dev-server": "^4.0.0",
-    "whatwg-fetch": "^2.0.3"
-  },
-  "resolutions": {
-    "@carbon/icons-react": "10.49.2"
-  }
-}
diff --git a/packages/react/scripts/build.js b/packages/react/scripts/build.js
deleted file mode 100644
index 35dbfc84bf9..00000000000
--- a/packages/react/scripts/build.js
+++ /dev/null
@@ -1,62 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { execSync } = require('child_process');
-const path = require('path');
-
-const babelPath = path
-  .resolve(__dirname, '../../../node_modules/.bin/babel')
-  .replace(/ /g, '\\ ');
-const rollupPath = path
-  .resolve(__dirname, '../../../node_modules/.bin/rollup')
-  .replace(/ /g, '\\ ');
-
-/**
- * Executes the corresponding comment
- *
- * @param {string} command Command to run
- * @param {object} extraEnv Additional environment configurations
- * @returns {Buffer} Buffer stream
- */
-const exec = (command, extraEnv) =>
-  execSync(command, {
-    stdio: 'inherit',
-    env: Object.assign({}, process.env, extraEnv),
-  });
-
-const ignoreGlobs = [
-  '**/vendor/*',
-  '**/__tests__/*',
-  '**/*.test.js',
-  '**/*.stories.js',
-].join(',');
-
-try {
-  exec(`${babelPath} src --quiet -d es --ignore "${ignoreGlobs}"`, {
-    BABEL_ENV: 'es',
-  });
-  exec(`${babelPath} src --quiet -d lib --ignore "${ignoreGlobs}"`, {
-    BABEL_ENV: 'cjs',
-  });
-  exec(
-    `${rollupPath} -c scripts/rollup.config.js -o umd/ibmdotcom-components-react.js`,
-    {
-      NODE_ENV: 'development',
-    }
-  );
-  exec(
-    `${rollupPath} -c scripts/rollup.config.js -o umd/ibmdotcom-components-react.min.js`,
-    {
-      NODE_ENV: 'production',
-    }
-  );
-} catch (error) {
-  console.error('One of the commands failed:', error.stack); // eslint-disable-line no-console
-  process.exit(1);
-}
diff --git a/packages/react/scripts/env.js b/packages/react/scripts/env.js
deleted file mode 100644
index c30fe051f84..00000000000
--- a/packages/react/scripts/env.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 path = require('path');
-
-const BABEL_ENV = process.env.BABEL_ENV;
-
-module.exports = () => ({
-  presets: [
-    [
-      require.resolve('@babel/preset-env'),
-      {
-        modules: BABEL_ENV === 'es' ? false : 'commonjs',
-        targets: {
-          browsers: ['extends browserslist-config-carbon'],
-        },
-      },
-    ],
-  ],
-  plugins: [
-    ...(BABEL_ENV === 'es'
-      ? []
-      : [
-          path.resolve(
-            __dirname,
-            '../../../tasks/babel-plugin-module-js-paths'
-          ),
-        ]),
-  ],
-});
diff --git a/packages/react/scripts/rollup.config.js b/packages/react/scripts/rollup.config.js
deleted file mode 100644
index 599f45b3aa1..00000000000
--- a/packages/react/scripts/rollup.config.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 chalk = require('chalk');
-const Table = require('cli-table');
-const gzip = require('gzip-size');
-
-const commonjs = require('@rollup/plugin-commonjs');
-const { nodeResolve } = require('@rollup/plugin-node-resolve');
-const builtins = require('rollup-plugin-node-builtins');
-const babel = require('@rollup/plugin-babel');
-const scss = require('rollup-plugin-scss');
-const replace = require('@rollup/plugin-replace');
-const json = require('@rollup/plugin-json');
-const { terser } = require('rollup-plugin-terser');
-const sizes = require('rollup-plugin-sizes');
-const visualizer = require('rollup-plugin-visualizer');
-
-const packageJson = require('../package.json');
-const peerDependencies = Object.keys(packageJson.peerDependencies || {}).concat(
-  ['classnames', 'prop-types']
-);
-
-const env = process.env.NODE_ENV || 'development';
-const prodSettings =
-  env === 'development'
-    ? []
-    : [
-        terser(),
-        visualizer(),
-        sizes({
-          report(details) {
-            const table = new Table({
-              head: [
-                chalk.gray.yellow('Dependency/app'),
-                chalk.gray.yellow('Size'),
-              ],
-              colAligns: ['left', 'right'],
-            });
-            details.totals
-              .map((item) => [chalk.white.bold(item.name), item.size])
-              .forEach((item) => {
-                table.push(item);
-              });
-            console.log(`Sizes of app/dependencies:\n${table}`); // eslint-disable-line no-console
-            console.log('Total size:', details.total); // eslint-disable-line no-console
-          },
-        }),
-        {
-          generateBundle(options, bundle) {
-            const gzipSize = gzip.sync(
-              bundle['ibmdotcom-components-react.min.js'].code
-            );
-            const { bundleSizeThreshold } = packageJson;
-            console.log('Total size (gzipped):', gzipSize); // eslint-disable-line no-console
-            if (gzipSize > bundleSizeThreshold) {
-              throw new RangeError(
-                `Exceeded size threshold of ${bundleSizeThreshold} bytes (gzipped)!`
-              );
-            }
-          },
-        },
-      ];
-
-process.env.BABEL_ENV = 'es';
-
-module.exports = {
-  input: 'src/index.js',
-  plugins: [
-    nodeResolve({
-      browser: true,
-      mainFields: ['jsnext', 'module', 'main'],
-    }),
-    commonjs({
-      include: [/node_modules/, /icons-react\/lib/],
-      sourceMap: true,
-    }),
-    babel.babel({
-      babelHelpers: 'runtime',
-      exclude: ['node_modules/**'], // only transpile our source code
-    }),
-    replace({
-      'process.env.NODE_ENV': JSON.stringify(env),
-      preventAssignment: true,
-    }),
-    builtins(),
-    scss(),
-    json(),
-    ...prodSettings,
-  ],
-  treeshake: {
-    propertyReadSideEffects: false,
-    moduleSideEffects: 'no-external',
-  },
-  external: peerDependencies,
-  output: {
-    name: 'IBMDotcomReact',
-    format: 'umd',
-    globals: {
-      classnames: 'classNames',
-      'prop-types': 'PropTypes',
-      react: 'React',
-      'react-dom': 'ReactDOM',
-      'carbon-icons': 'CarbonIcons',
-      'carbon-components': 'CarbonComponents',
-      'carbon-components-react': 'CarbonComponentsReact',
-    },
-  },
-};
diff --git a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap b/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
deleted file mode 100644
index 6c1206d14e6..00000000000
--- a/packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap
+++ /dev/null
@@ -1,131160 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Storyshots Components/Audio player Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-audio-player--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/AudioPlayer/__stories__/AudioPlayer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-md-8 bx--col-lg-16 bx--col-xlg-16 bx--col-max-16"
-        >
-          <div
-            style={
-              Object {
-                "alignItems": "center",
-                "display": "flex",
-                "height": "100vh",
-                "justifyContent": "center",
-              }
-            }
-          >
-            <AudioPlayer
-              audioId="1_gp572bda"
-              autoPlay={false}
-              availablePlaybackRates={
-                Array [
-                  1,
-                  1.5,
-                  2,
-                ]
-              }
-              customClassName=""
-              hasSettings={true}
-              playbackRates={
-                Array [
-                  1,
-                  1.5,
-                  2,
-                ]
-              }
-              showCaptionMenu={true}
-              showPlaybackRateMenu={true}
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Back to top Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-back-to-top--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/BackToTop/__stories__/BackToTop.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-back-to-top--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Background media Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-background-media--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/BackgroundMedia/__stories__/BackgroundMedia.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components-react/?path=/story/components-background-media"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Button group Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-button-group--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ButtonGroup/__stories__/ButtonGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Button group: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ButtonGroup": Object {
-            "buttons": Array [
-              Object {
-                "copy": "Button 1",
-                "href": "https://example.com",
-              },
-              Object {
-                "copy": "Button 2",
-                "href": "https://example.com",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx-grid"
-      style={
-        Object {
-          "padding": "2rem",
-        }
-      }
-    >
-      <div>
-        This button group is wrapped within the grid to let the buttons shrink when the text gets smaller
-      </div>
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-lg-16 bx--col-md-6 bx--col-sm-16"
-        >
-          <ButtonGroup
-            buttons={
-              Array [
-                Object {
-                  "copy": "Button 1",
-                  "href": "https://example.com",
-                  "renderIcon": undefined,
-                },
-                Object {
-                  "copy": "Button 2",
-                  "href": "https://example.com",
-                  "renderIcon": undefined,
-                },
-              ]
-            }
-          >
-            <ol
-              className="bx--buttongroup"
-              data-autoid="dds--button-group"
-            >
-              <li
-                className="bx--buttongroup-item"
-                key="0"
-              >
-                <Button
-                  copy="Button 1"
-                  data-autoid="dds--button-group-0"
-                  href="https://example.com"
-                  isExpressive={true}
-                  kind="primary"
-                  type="button"
-                >
-                  <a
-                    className="bx--btn bx--btn--primary bx--btn--expressive"
-                    copy="Button 1"
-                    data-autoid="dds--button-group-0"
-                    href="https://example.com"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    tabIndex={0}
-                  >
-                    Button 1
-                  </a>
-                </Button>
-              </li>
-              <li
-                className="bx--buttongroup-item"
-                key="1"
-              >
-                <Button
-                  copy="Button 2"
-                  data-autoid="dds--button-group-1"
-                  href="https://example.com"
-                  isExpressive={true}
-                  kind="tertiary"
-                  type="button"
-                >
-                  <a
-                    className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                    copy="Button 2"
-                    data-autoid="dds--button-group-1"
-                    href="https://example.com"
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                    onFocus={[Function]}
-                    onMouseEnter={[Function]}
-                    onMouseLeave={[Function]}
-                    tabIndex={0}
-                  >
-                    Button 2
-                  </a>
-                </Button>
-              </li>
-            </ol>
-          </ButtonGroup>
-        </div>
-      </div>
-      <div
-        style={
-          Object {
-            "paddingTop": "20px",
-          }
-        }
-      >
-        This button group is not using the grid, so the buttons won't shrink according to the text size
-      </div>
-      <ButtonGroup
-        buttons={
-          Array [
-            Object {
-              "copy": "Button 1",
-              "href": "https://example.com",
-              "renderIcon": undefined,
-            },
-            Object {
-              "copy": "Button 2",
-              "href": "https://example.com",
-              "renderIcon": undefined,
-            },
-          ]
-        }
-      >
-        <ol
-          className="bx--buttongroup"
-          data-autoid="dds--button-group"
-        >
-          <li
-            className="bx--buttongroup-item"
-            key="0"
-          >
-            <Button
-              copy="Button 1"
-              data-autoid="dds--button-group-0"
-              href="https://example.com"
-              isExpressive={true}
-              kind="primary"
-              type="button"
-            >
-              <a
-                className="bx--btn bx--btn--primary bx--btn--expressive"
-                copy="Button 1"
-                data-autoid="dds--button-group-0"
-                href="https://example.com"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                tabIndex={0}
-              >
-                Button 1
-              </a>
-            </Button>
-          </li>
-          <li
-            className="bx--buttongroup-item"
-            key="1"
-          >
-            <Button
-              copy="Button 2"
-              data-autoid="dds--button-group-1"
-              href="https://example.com"
-              isExpressive={true}
-              kind="tertiary"
-              type="button"
-            >
-              <a
-                className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                copy="Button 2"
-                data-autoid="dds--button-group-1"
-                href="https://example.com"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onFocus={[Function]}
-                onMouseEnter={[Function]}
-                onMouseLeave={[Function]}
-                tabIndex={0}
-              >
-                Button 2
-              </a>
-            </Button>
-          </li>
-        </ol>
-      </ButtonGroup>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/CTA Button 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-cta--button",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CTA/__stories__/CTA.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|CTA: Button",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid cta-grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <CTA
-            buttons={
-              Array [
-                Object {
-                  "copy": "See more use cases",
-                  "href": "https://www.example.com",
-                  "iconDescription": "right arrow icon",
-                  "media": Object {
-                    "description": undefined,
-                    "src": "1_9h94wo6b",
-                    "title": undefined,
-                    "type": "video",
-                  },
-                  "onClick": [Function],
-                  "renderIcon": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "render": [Function],
-                  },
-                  "target": null,
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Try for free",
-                  "href": "https://www.example.com",
-                  "iconDescription": "right arrow icon",
-                  "media": Object {
-                    "description": undefined,
-                    "src": "1_sf5ovm7u",
-                    "title": undefined,
-                    "type": "video",
-                  },
-                  "onClick": [Function],
-                  "renderIcon": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "render": [Function],
-                  },
-                  "target": null,
-                  "type": "local",
-                },
-              ]
-            }
-            copy=""
-            customVideoTitle={null}
-            href=""
-            style="button"
-            type={
-              Array [
-                "local",
-                "local",
-              ]
-            }
-          >
-            <div>
-              <ButtonCTA
-                buttons={
-                  Array [
-                    Object {
-                      "copy": "See more use cases",
-                      "href": "https://www.example.com",
-                      "iconDescription": "right arrow icon",
-                      "media": Object {
-                        "description": undefined,
-                        "src": "1_9h94wo6b",
-                        "title": undefined,
-                        "type": "video",
-                      },
-                      "onClick": [Function],
-                      "renderIcon": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                      "target": null,
-                      "type": "local",
-                    },
-                    Object {
-                      "copy": "Try for free",
-                      "href": "https://www.example.com",
-                      "iconDescription": "right arrow icon",
-                      "media": Object {
-                        "description": undefined,
-                        "src": "1_sf5ovm7u",
-                        "title": undefined,
-                        "type": "video",
-                      },
-                      "onClick": [Function],
-                      "renderIcon": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                      "target": null,
-                      "type": "local",
-                    },
-                  ]
-                }
-                copy=""
-                customVideoTitle={null}
-                formatCTAcopy={[Function]}
-                href=""
-                openLightBox={[Function]}
-                renderLightBox={false}
-                style="button"
-                type={
-                  Array [
-                    "local",
-                    "local",
-                  ]
-                }
-                videoTitle={
-                  Array [
-                    Object {
-                      "duration": "",
-                      "key": 0,
-                      "title": "",
-                    },
-                  ]
-                }
-              >
-                <ButtonGroup
-                  buttons={
-                    Array [
-                      Object {
-                        "copy": "See more use cases",
-                        "href": "https://www.example.com",
-                        "iconDescription": "right arrow icon",
-                        "media": Object {
-                          "description": undefined,
-                          "src": "1_9h94wo6b",
-                          "title": undefined,
-                          "type": "video",
-                        },
-                        "onClick": [Function],
-                        "renderIcon": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                        "target": null,
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "Try for free",
-                        "href": "https://www.example.com",
-                        "iconDescription": "right arrow icon",
-                        "media": Object {
-                          "description": undefined,
-                          "src": "1_sf5ovm7u",
-                          "title": undefined,
-                          "type": "video",
-                        },
-                        "onClick": [Function],
-                        "renderIcon": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                        "target": null,
-                        "type": "local",
-                      },
-                    ]
-                  }
-                >
-                  <ol
-                    className="bx--buttongroup"
-                    data-autoid="dds--button-group"
-                  >
-                    <li
-                      className="bx--buttongroup-item"
-                      key="0"
-                    >
-                      <Button
-                        copy="See more use cases"
-                        data-autoid="dds--button-group-0"
-                        href="https://www.example.com"
-                        iconDescription="right arrow icon"
-                        isExpressive={true}
-                        kind="primary"
-                        media={
-                          Object {
-                            "description": undefined,
-                            "src": "1_9h94wo6b",
-                            "title": undefined,
-                            "type": "video",
-                          }
-                        }
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                        target={null}
-                        type="button"
-                      >
-                        <a
-                          className="bx--btn bx--btn--primary bx--btn--expressive"
-                          copy="See more use cases"
-                          data-autoid="dds--button-group-0"
-                          href="https://www.example.com"
-                          media={
-                            Object {
-                              "description": undefined,
-                              "src": "1_9h94wo6b",
-                              "title": undefined,
-                              "type": "video",
-                            }
-                          }
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          target={null}
-                        >
-                          See more use cases
-                          <ForwardRef(ArrowRight20)
-                            aria-hidden="true"
-                            aria-label="right arrow icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="right arrow icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="right arrow icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(ArrowRight20)>
-                        </a>
-                      </Button>
-                    </li>
-                    <li
-                      className="bx--buttongroup-item"
-                      key="1"
-                    >
-                      <Button
-                        copy="Try for free"
-                        data-autoid="dds--button-group-1"
-                        href="https://www.example.com"
-                        iconDescription="right arrow icon"
-                        isExpressive={true}
-                        kind="tertiary"
-                        media={
-                          Object {
-                            "description": undefined,
-                            "src": "1_sf5ovm7u",
-                            "title": undefined,
-                            "type": "video",
-                          }
-                        }
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                        target={null}
-                        type="button"
-                      >
-                        <a
-                          className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                          copy="Try for free"
-                          data-autoid="dds--button-group-1"
-                          href="https://www.example.com"
-                          media={
-                            Object {
-                              "description": undefined,
-                              "src": "1_sf5ovm7u",
-                              "title": undefined,
-                              "type": "video",
-                            }
-                          }
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          target={null}
-                        >
-                          Try for free
-                          <ForwardRef(ArrowRight20)
-                            aria-hidden="true"
-                            aria-label="right arrow icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="right arrow icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="right arrow icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(ArrowRight20)>
-                        </a>
-                      </Button>
-                    </li>
-                  </ol>
-                </ButtonGroup>
-              </ButtonCTA>
-            </div>
-          </CTA>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/CTA Card 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-cta--card",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CTA/__stories__/CTA.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|CTA: Card",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid cta-grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4"
-        >
-          <CTA
-            copy=""
-            cta={
-              Object {
-                "href": "https://www.example.com",
-              }
-            }
-            customVideoTitle={null}
-            disableImage={null}
-            heading="Explore AI uses cases in all industries"
-            href=""
-            media={
-              Object {
-                "description": null,
-                "src": "1_9h94wo6b",
-                "title": null,
-                "type": "video",
-              }
-            }
-            style="card"
-            type="local"
-          >
-            <div>
-              <CardCTA
-                copy=""
-                cta={
-                  Object {
-                    "href": "https://www.example.com",
-                  }
-                }
-                customVideoTitle={null}
-                disableImage={null}
-                heading="Explore AI uses cases in all industries"
-                href=""
-                media={
-                  Object {
-                    "description": null,
-                    "src": "1_9h94wo6b",
-                    "title": null,
-                    "type": "video",
-                  }
-                }
-                openLightBox={[Function]}
-                renderLightBox={false}
-                style="card"
-                type="local"
-                videoTitle={
-                  Array [
-                    Object {
-                      "duration": "",
-                      "key": 0,
-                      "title": "",
-                    },
-                  ]
-                }
-              >
-                <CardLink
-                  card={
-                    Object {
-                      "copy": "",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                        "icon": Object {
-                          "src": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                        "type": "local",
-                      },
-                      "customVideoTitle": null,
-                      "heading": "Explore AI uses cases in all industries",
-                      "href": "https://www.example.com",
-                      "media": Object {
-                        "description": null,
-                        "src": "1_9h94wo6b",
-                        "title": null,
-                        "type": "video",
-                      },
-                      "size": undefined,
-                      "target": null,
-                    }
-                  }
-                  customClassName="bx--card__CardCTA"
-                  disabled={false}
-                >
-                  <Card
-                    copy=""
-                    cta={
-                      Object {
-                        "href": "https://www.example.com",
-                        "icon": Object {
-                          "src": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                        "type": "local",
-                      }
-                    }
-                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                    customVideoTitle={null}
-                    heading="Explore AI uses cases in all industries"
-                    href="https://www.example.com"
-                    media={
-                      Object {
-                        "description": null,
-                        "src": "1_9h94wo6b",
-                        "title": null,
-                        "type": "video",
-                      }
-                    }
-                    target={null}
-                  >
-                    <Tile
-                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                      customVideoTitle={null}
-                      data-autoid="dds--card"
-                      href="https://www.example.com"
-                      light={false}
-                      media={
-                        Object {
-                          "description": null,
-                          "src": "1_9h94wo6b",
-                          "title": null,
-                          "type": "video",
-                        }
-                      }
-                      target={null}
-                    >
-                      <div
-                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                        customVideoTitle={null}
-                        data-autoid="dds--card"
-                        href="https://www.example.com"
-                        media={
-                          Object {
-                            "description": null,
-                            "src": "1_9h94wo6b",
-                            "title": null,
-                            "type": "video",
-                          }
-                        }
-                        target={null}
-                      >
-                        <div
-                          className="bx--card__wrapper"
-                        >
-                          <div
-                            className="bx--card__content"
-                          >
-                            <h3
-                              className="bx--card__heading"
-                            >
-                              Explore AI uses cases in all industries
-                            </h3>
-                            <Link
-                              aria-label="Explore AI uses cases in all industries"
-                              className="bx--card__footer"
-                              href="https://www.example.com"
-                              target={null}
-                            >
-                              <a
-                                aria-label="Explore AI uses cases in all industries"
-                                className="bx--link bx--card__footer"
-                                href="https://www.example.com"
-                                rel={null}
-                                target={null}
-                              >
-                                <ForwardRef(ArrowRight20)
-                                  className="bx--card__cta"
-                                  src={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                >
-                                  <Icon
-                                    className="bx--card__cta"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    src={
-                                      Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      }
-                                    }
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--card__cta"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      src={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </div>
-                      </div>
-                    </Tile>
-                  </Card>
-                </CardLink>
-              </CardCTA>
-            </div>
-          </CTA>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/CTA Feature 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-cta--feature",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CTA/__stories__/CTA.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|CTA: Feature",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid cta-grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 cta-feature-container"
-        >
-          <CTA
-            card={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                  "media": Object {
-                    "description": null,
-                    "src": "1_9h94wo6b",
-                    "title": null,
-                    "type": "video",
-                  },
-                  "type": "local",
-                },
-                "heading": "Explore AI use cases in all industries",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--1x1--720x720--002.jpg",
-                },
-              }
-            }
-            copy=""
-            customVideoTitle={null}
-            featureHeading="Explore AI use cases in all industries"
-            heading="Explore AI uses cases in all industries"
-            href=""
-            style="feature"
-            type="local"
-          >
-            <div>
-              <FeatureCTA
-                card={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                      "media": Object {
-                        "description": null,
-                        "src": "1_9h94wo6b",
-                        "title": null,
-                        "type": "video",
-                      },
-                      "type": "local",
-                    },
-                    "heading": "Explore AI use cases in all industries",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--1x1--720x720--002.jpg",
-                    },
-                  }
-                }
-                copy=""
-                customVideoTitle={null}
-                featureHeading="Explore AI use cases in all industries"
-                formatCTAcopy={[Function]}
-                heading="Explore AI uses cases in all industries"
-                href=""
-                openLightBox={[Function]}
-                renderLightBox={false}
-                style="feature"
-                type="local"
-                videoTitle={
-                  Array [
-                    Object {
-                      "duration": "",
-                      "key": 0,
-                      "title": "",
-                    },
-                  ]
-                }
-              >
-                <FeatureCard
-                  card={
-                    Object {
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                        "icon": Object {
-                          "src": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                        "media": Object {
-                          "description": null,
-                          "src": "1_9h94wo6b",
-                          "title": null,
-                          "type": "video",
-                        },
-                        "type": "local",
-                      },
-                      "heading": "Explore AI use cases in all industries",
-                      "image": Object {
-                        "alt": "Image alt text",
-                        "defaultSrc": "fpo--1x1--720x720--002.jpg",
-                      },
-                      "type": "link",
-                    }
-                  }
-                  size="medium"
-                >
-                  <div
-                    className="bx--feature-card"
-                    data-autoid="dds--feature-card"
-                  >
-                    <Card
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                          "media": Object {
-                            "description": null,
-                            "src": "1_9h94wo6b",
-                            "title": null,
-                            "type": "video",
-                          },
-                          "type": "local",
-                        }
-                      }
-                      customClassName="bx--feature-card__card"
-                      heading="Explore AI use cases in all industries"
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--1x1--720x720--002.jpg",
-                        }
-                      }
-                      type="link"
-                    >
-                      <Tile
-                        className="bx--card bx--feature-card__card"
-                        data-autoid="dds--card"
-                        light={false}
-                        type="link"
-                      >
-                        <div
-                          className="bx--tile bx--card bx--feature-card__card"
-                          data-autoid="dds--card"
-                          type="link"
-                        >
-                          <Image
-                            alt="Image alt text"
-                            classname="bx--card__img"
-                            defaultSrc="fpo--1x1--720x720--002.jpg"
-                          >
-                            <div
-                              className="bx--image"
-                              data-autoid="dds--image__longdescription"
-                            >
-                              <picture>
-                                <img
-                                  alt="Image alt text"
-                                  className="bx--image__img bx--card__img"
-                                  src="fpo--1x1--720x720--002.jpg"
-                                />
-                              </picture>
-                            </div>
-                          </Image>
-                          <div
-                            className="bx--card__wrapper"
-                          >
-                            <div
-                              className="bx--card__content"
-                            >
-                              <h3
-                                className="bx--card__heading"
-                              >
-                                Explore AI use cases in all industries
-                              </h3>
-                              <Link
-                                aria-label="Explore AI use cases in all industries"
-                                className="bx--card__footer"
-                                href="https://www.example.com"
-                                target={null}
-                              >
-                                <a
-                                  aria-label="Explore AI use cases in all industries"
-                                  className="bx--link bx--card__footer"
-                                  href="https://www.example.com"
-                                  rel={null}
-                                  target={null}
-                                >
-                                  <ForwardRef(ArrowRight20)
-                                    className="bx--card__cta"
-                                    src={
-                                      Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      }
-                                    }
-                                  >
-                                    <Icon
-                                      className="bx--card__cta"
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      src={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        className="bx--card__cta"
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(ArrowRight20)>
-                                </a>
-                              </Link>
-                            </div>
-                          </div>
-                        </div>
-                      </Tile>
-                    </Card>
-                  </div>
-                </FeatureCard>
-              </FeatureCTA>
-            </div>
-          </CTA>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/CTA Text 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-cta--text",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CTA/__stories__/CTA.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|CTA: Text",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid cta-grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <CTA
-            copy="Explore AI uses cases in all industries"
-            cta={
-              Object {
-                "href": "https://www.example.com",
-              }
-            }
-            customVideoTitle={null}
-            disableImage={null}
-            heading="Explore AI uses cases in all industries"
-            href="https://www.example.com"
-            iconPlacement="right"
-            media={
-              Object {
-                "description": null,
-                "src": "1_9h94wo6b",
-                "title": null,
-                "type": "video",
-              }
-            }
-            style="text"
-            type="local"
-          >
-            <div>
-              <TextCTA
-                copy="Explore AI uses cases in all industries"
-                cta={
-                  Object {
-                    "href": "https://www.example.com",
-                  }
-                }
-                customVideoTitle={null}
-                disableImage={null}
-                formatCTAcopy={[Function]}
-                heading="Explore AI uses cases in all industries"
-                href="https://www.example.com"
-                iconPlacement="right"
-                media={
-                  Object {
-                    "description": null,
-                    "src": "1_9h94wo6b",
-                    "title": null,
-                    "type": "video",
-                  }
-                }
-                openLightBox={[Function]}
-                renderLightBox={false}
-                style="text"
-                type="local"
-                videoTitle={
-                  Array [
-                    Object {
-                      "duration": "",
-                      "key": 0,
-                      "title": "",
-                    },
-                  ]
-                }
-              >
-                <LinkWithIcon
-                  href="https://www.example.com"
-                  iconInline={true}
-                  iconPlacement="right"
-                  onClick={[Function]}
-                  target={null}
-                >
-                  <div
-                    className="bx--link-with-icon__container"
-                    data-autoid="dds--link-with-icon"
-                  >
-                    <Link
-                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                      href="https://www.example.com"
-                      onClick={[Function]}
-                      size="lg"
-                      target={null}
-                    >
-                      <a
-                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                        href="https://www.example.com"
-                        onClick={[Function]}
-                        rel={null}
-                        target={null}
-                      >
-                        <span>
-                          Explore AI uses cases in all industries
-                        </span>
-                        <span
-                          className="bx--visually-hidden"
-                        />
-                        <ForwardRef(ArrowRight20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(ArrowRight20)>
-                      </a>
-                    </Link>
-                  </div>
-                </LinkWithIcon>
-              </TextCTA>
-            </div>
-          </CTA>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/CTA section Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-cta-section--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CTASection/__stories__/CTASection.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|CTA section: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CTASection": Object {
-            "items": Array [
-              Object {
-                "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                "cta": Object {
-                  "copy": "Find a partner",
-                  "href": "https://example.com/",
-                  "type": "local",
-                },
-                "heading": "Get connected",
-              },
-              Object {
-                "copy": "IBM DevOps partners have a wide range of expertise",
-                "cta": Object {
-                  "copy": "Browse tutorials",
-                  "href": "https://example.com/",
-                  "type": "local",
-                },
-                "heading": "Learn how",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <CTASection
-            copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-            cta={
-              Object {
-                "buttons": Array [
-                  Object {
-                    "copy": "Secondary button",
-                    "href": "https://example.com/",
-                    "iconDescription": "right arrow icon",
-                    "onClick": [Function],
-                    "renderIcon": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                    "target": null,
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "Primary button",
-                    "href": "https://example.com/",
-                    "iconDescription": "right arrow icon",
-                    "onClick": [Function],
-                    "renderIcon": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                    "target": null,
-                    "type": "local",
-                  },
-                ],
-                "style": "button",
-                "type": "local",
-              }
-            }
-            heading="Take the next step"
-            theme="white"
-          >
-            <section
-              className="bx--cta-section bx--cta-section--white"
-              data-autoid="dds--cta-section"
-            >
-              <ContentBlock
-                border={false}
-                copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                heading="Take the next step"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Take the next step
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  />
-                </div>
-              </ContentBlock>
-              <CTA
-                buttons={
-                  Array [
-                    Object {
-                      "copy": "Secondary button",
-                      "href": "https://example.com/",
-                      "iconDescription": "right arrow icon",
-                      "onClick": [Function],
-                      "renderIcon": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                      "target": null,
-                      "type": "local",
-                    },
-                    Object {
-                      "copy": "Primary button",
-                      "href": "https://example.com/",
-                      "iconDescription": "right arrow icon",
-                      "onClick": [Function],
-                      "renderIcon": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                      "target": null,
-                      "type": "local",
-                    },
-                  ]
-                }
-                copy=""
-                customClassName="bx--cta-section__cta"
-                customVideoTitle={null}
-                href=""
-                style="button"
-                type="local"
-              >
-                <div
-                  className="bx--cta-section__cta"
-                >
-                  <ButtonCTA
-                    buttons={
-                      Array [
-                        Object {
-                          "copy": "Secondary button",
-                          "href": "https://example.com/",
-                          "iconDescription": "right arrow icon",
-                          "onClick": [Function],
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                          "target": null,
-                          "type": "local",
-                        },
-                        Object {
-                          "copy": "Primary button",
-                          "href": "https://example.com/",
-                          "iconDescription": "right arrow icon",
-                          "onClick": [Function],
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                          "target": null,
-                          "type": "local",
-                        },
-                      ]
-                    }
-                    copy=""
-                    customVideoTitle={null}
-                    formatCTAcopy={[Function]}
-                    href=""
-                    openLightBox={[Function]}
-                    renderLightBox={false}
-                    style="button"
-                    type="local"
-                    videoTitle={
-                      Array [
-                        Object {
-                          "duration": "",
-                          "key": 0,
-                          "title": "",
-                        },
-                      ]
-                    }
-                  >
-                    <ButtonGroup
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Secondary button",
-                            "href": "https://example.com/",
-                            "iconDescription": "right arrow icon",
-                            "onClick": [Function],
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                            "target": null,
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Primary button",
-                            "href": "https://example.com/",
-                            "iconDescription": "right arrow icon",
-                            "onClick": [Function],
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                            "target": null,
-                            "type": "local",
-                          },
-                        ]
-                      }
-                    >
-                      <ol
-                        className="bx--buttongroup"
-                        data-autoid="dds--button-group"
-                      >
-                        <li
-                          className="bx--buttongroup-item"
-                          key="0"
-                        >
-                          <Button
-                            copy="Secondary button"
-                            data-autoid="dds--button-group-0"
-                            href="https://example.com/"
-                            iconDescription="right arrow icon"
-                            isExpressive={true}
-                            kind="primary"
-                            onClick={[Function]}
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            target={null}
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--primary bx--btn--expressive"
-                              copy="Secondary button"
-                              data-autoid="dds--button-group-0"
-                              href="https://example.com/"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                              target={null}
-                            >
-                              Secondary button
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                aria-label="right arrow icon"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  aria-label="right arrow icon"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    aria-label="right arrow icon"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                        <li
-                          className="bx--buttongroup-item"
-                          key="1"
-                        >
-                          <Button
-                            copy="Primary button"
-                            data-autoid="dds--button-group-1"
-                            href="https://example.com/"
-                            iconDescription="right arrow icon"
-                            isExpressive={true}
-                            kind="tertiary"
-                            onClick={[Function]}
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            target={null}
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                              copy="Primary button"
-                              data-autoid="dds--button-group-1"
-                              href="https://example.com/"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                              target={null}
-                            >
-                              Primary button
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                aria-label="right arrow icon"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  aria-label="right arrow icon"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    aria-label="right arrow icon"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                      </ol>
-                    </ButtonGroup>
-                  </ButtonCTA>
-                </div>
-              </CTA>
-            </section>
-          </CTASection>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/CTA section With content items 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-cta-section--with-content-items",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CTASection/__stories__/CTASection.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|CTA section: Default",
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <CTASection
-            copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-            cta={
-              Object {
-                "buttons": Array [
-                  Object {
-                    "copy": "Secondary button",
-                    "href": "https://example.com/",
-                    "iconDescription": "right arrow icon",
-                    "onClick": [Function],
-                    "renderIcon": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                    "target": null,
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "Primary button",
-                    "href": "https://example.com/",
-                    "iconDescription": "right arrow icon",
-                    "onClick": [Function],
-                    "renderIcon": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                    "target": null,
-                    "type": "local",
-                  },
-                ],
-                "style": "button",
-                "type": "local",
-              }
-            }
-            heading="Take the next step"
-            items={
-              Array [
-                Object {
-                  "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                  "cta": Object {
-                    "copy": "Find a partner",
-                    "href": "https://example.com/",
-                    "type": "local",
-                  },
-                  "heading": "Get connected",
-                },
-                Object {
-                  "copy": "IBM DevOps partners have a wide range of expertise",
-                  "cta": Object {
-                    "copy": "Browse tutorials",
-                    "href": "https://example.com/",
-                    "type": "local",
-                  },
-                  "heading": "Learn how",
-                },
-              ]
-            }
-            theme="white"
-          >
-            <section
-              className="bx--cta-section bx--cta-section__has-items bx--cta-section--white"
-              data-autoid="dds--cta-section"
-            >
-              <ContentBlock
-                border={false}
-                copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                heading="Take the next step"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Take the next step
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  />
-                </div>
-              </ContentBlock>
-              <CTA
-                buttons={
-                  Array [
-                    Object {
-                      "copy": "Secondary button",
-                      "href": "https://example.com/",
-                      "iconDescription": "right arrow icon",
-                      "onClick": [Function],
-                      "renderIcon": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                      "target": null,
-                      "type": "local",
-                    },
-                    Object {
-                      "copy": "Primary button",
-                      "href": "https://example.com/",
-                      "iconDescription": "right arrow icon",
-                      "onClick": [Function],
-                      "renderIcon": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                      "target": null,
-                      "type": "local",
-                    },
-                  ]
-                }
-                copy=""
-                customClassName="bx--cta-section__cta"
-                customVideoTitle={null}
-                href=""
-                style="button"
-                type="local"
-              >
-                <div
-                  className="bx--cta-section__cta"
-                >
-                  <ButtonCTA
-                    buttons={
-                      Array [
-                        Object {
-                          "copy": "Secondary button",
-                          "href": "https://example.com/",
-                          "iconDescription": "right arrow icon",
-                          "onClick": [Function],
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                          "target": null,
-                          "type": "local",
-                        },
-                        Object {
-                          "copy": "Primary button",
-                          "href": "https://example.com/",
-                          "iconDescription": "right arrow icon",
-                          "onClick": [Function],
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                          "target": null,
-                          "type": "local",
-                        },
-                      ]
-                    }
-                    copy=""
-                    customVideoTitle={null}
-                    formatCTAcopy={[Function]}
-                    href=""
-                    openLightBox={[Function]}
-                    renderLightBox={false}
-                    style="button"
-                    type="local"
-                    videoTitle={
-                      Array [
-                        Object {
-                          "duration": "",
-                          "key": 0,
-                          "title": "",
-                        },
-                      ]
-                    }
-                  >
-                    <ButtonGroup
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Secondary button",
-                            "href": "https://example.com/",
-                            "iconDescription": "right arrow icon",
-                            "onClick": [Function],
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                            "target": null,
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Primary button",
-                            "href": "https://example.com/",
-                            "iconDescription": "right arrow icon",
-                            "onClick": [Function],
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                            "target": null,
-                            "type": "local",
-                          },
-                        ]
-                      }
-                    >
-                      <ol
-                        className="bx--buttongroup"
-                        data-autoid="dds--button-group"
-                      >
-                        <li
-                          className="bx--buttongroup-item"
-                          key="0"
-                        >
-                          <Button
-                            copy="Secondary button"
-                            data-autoid="dds--button-group-0"
-                            href="https://example.com/"
-                            iconDescription="right arrow icon"
-                            isExpressive={true}
-                            kind="primary"
-                            onClick={[Function]}
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            target={null}
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--primary bx--btn--expressive"
-                              copy="Secondary button"
-                              data-autoid="dds--button-group-0"
-                              href="https://example.com/"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                              target={null}
-                            >
-                              Secondary button
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                aria-label="right arrow icon"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  aria-label="right arrow icon"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    aria-label="right arrow icon"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                        <li
-                          className="bx--buttongroup-item"
-                          key="1"
-                        >
-                          <Button
-                            copy="Primary button"
-                            data-autoid="dds--button-group-1"
-                            href="https://example.com/"
-                            iconDescription="right arrow icon"
-                            isExpressive={true}
-                            kind="tertiary"
-                            onClick={[Function]}
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            target={null}
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                              copy="Primary button"
-                              data-autoid="dds--button-group-1"
-                              href="https://example.com/"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                              target={null}
-                            >
-                              Primary button
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                aria-label="right arrow icon"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  aria-label="right arrow icon"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden="true"
-                                    aria-label="right arrow icon"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                      </ol>
-                    </ButtonGroup>
-                  </ButtonCTA>
-                </div>
-              </CTA>
-              <div
-                className="bx--helper-wrapper"
-              >
-                <div
-                  className="bx--content-item-wrapper"
-                >
-                  <ContentItem
-                    copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                    cta={
-                      Object {
-                        "copy": "Find a partner",
-                        "href": "https://example.com/",
-                        "type": "local",
-                      }
-                    }
-                    heading="Get connected"
-                    key="0"
-                  >
-                    <div
-                      className="bx--content-item"
-                      data-autoid="dds--content-item"
-                    >
-                      <h4
-                        className="bx--content-item__heading"
-                        data-autoid="dds--content-item__heading"
-                      >
-                        Get connected
-                      </h4>
-                      <div
-                        className="bx--content-item__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                          }
-                        }
-                        data-autoid="dds--content-item__copy"
-                      />
-                      <CTA
-                        copy="Find a partner"
-                        customClassName="bx--content-item__cta"
-                        customVideoTitle={null}
-                        href="https://example.com/"
-                        style="text"
-                        type="local"
-                      >
-                        <div
-                          className="bx--content-item__cta"
-                        >
-                          <TextCTA
-                            copy="Find a partner"
-                            customVideoTitle={null}
-                            formatCTAcopy={[Function]}
-                            href="https://example.com/"
-                            iconPlacement="right"
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="text"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <LinkWithIcon
-                              href="https://example.com/"
-                              iconInline={true}
-                              iconPlacement="right"
-                              onClick={[Function]}
-                              target={null}
-                            >
-                              <div
-                                className="bx--link-with-icon__container"
-                                data-autoid="dds--link-with-icon"
-                              >
-                                <Link
-                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                  href="https://example.com/"
-                                  onClick={[Function]}
-                                  size="lg"
-                                  target={null}
-                                >
-                                  <a
-                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                    href="https://example.com/"
-                                    onClick={[Function]}
-                                    rel={null}
-                                    target={null}
-                                  >
-                                    <span>
-                                      Find a partner
-                                    </span>
-                                    <span
-                                      className="bx--visually-hidden"
-                                    />
-                                    <ForwardRef(ArrowRight20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Link>
-                              </div>
-                            </LinkWithIcon>
-                          </TextCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                  </ContentItem>
-                  <ContentItem
-                    copy="IBM DevOps partners have a wide range of expertise"
-                    cta={
-                      Object {
-                        "copy": "Browse tutorials",
-                        "href": "https://example.com/",
-                        "type": "local",
-                      }
-                    }
-                    heading="Learn how"
-                    key="1"
-                  >
-                    <div
-                      className="bx--content-item"
-                      data-autoid="dds--content-item"
-                    >
-                      <h4
-                        className="bx--content-item__heading"
-                        data-autoid="dds--content-item__heading"
-                      >
-                        Learn how
-                      </h4>
-                      <div
-                        className="bx--content-item__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>IBM DevOps partners have a wide range of expertise</p> ",
-                          }
-                        }
-                        data-autoid="dds--content-item__copy"
-                      />
-                      <CTA
-                        copy="Browse tutorials"
-                        customClassName="bx--content-item__cta"
-                        customVideoTitle={null}
-                        href="https://example.com/"
-                        style="text"
-                        type="local"
-                      >
-                        <div
-                          className="bx--content-item__cta"
-                        >
-                          <TextCTA
-                            copy="Browse tutorials"
-                            customVideoTitle={null}
-                            formatCTAcopy={[Function]}
-                            href="https://example.com/"
-                            iconPlacement="right"
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="text"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <LinkWithIcon
-                              href="https://example.com/"
-                              iconInline={true}
-                              iconPlacement="right"
-                              onClick={[Function]}
-                              target={null}
-                            >
-                              <div
-                                className="bx--link-with-icon__container"
-                                data-autoid="dds--link-with-icon"
-                              >
-                                <Link
-                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                  href="https://example.com/"
-                                  onClick={[Function]}
-                                  size="lg"
-                                  target={null}
-                                >
-                                  <a
-                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                    href="https://example.com/"
-                                    onClick={[Function]}
-                                    rel={null}
-                                    target={null}
-                                  >
-                                    <span>
-                                      Browse tutorials
-                                    </span>
-                                    <span
-                                      className="bx--visually-hidden"
-                                    />
-                                    <ForwardRef(ArrowRight20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Link>
-                              </div>
-                            </LinkWithIcon>
-                          </TextCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                  </ContentItem>
-                </div>
-              </div>
-            </section>
-          </CTASection>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Callout quote Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-callout-quote--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CalloutQuote/__stories__/CalloutQuote.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Callout quote: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--offset-lg-4 bx--col-lg-12"
-        >
-          <CalloutQuote
-            quote={
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.",
-                "cta": Object {
-                  "copy": "Link with Icon",
-                  "href": "https://example.com",
-                  "type": "local",
-                },
-                "markType": "doubleCurved",
-                "source": Object {
-                  "copy": "consectetur adipiscing elit",
-                  "copy2": "IBM Cloud",
-                  "heading": "Lorem ipsum dolor sit amet",
-                },
-              }
-            }
-          >
-            <div
-              className="bx--callout-quote"
-              data-autoid="dds--callout-quote"
-            >
-              <Callout>
-                <section
-                  className="bx--callout__container"
-                  data-autoid="dds--callout__container"
-                >
-                  <div
-                    className="bx--callout__column"
-                    data-autoid="dds--callout__column"
-                  >
-                    <div
-                      className="bx--callout__content"
-                      data-autoid="dds--callout__content"
-                    >
-                      <Quote
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna."
-                        cta={
-                          Object {
-                            "copy": "Link with Icon",
-                            "href": "https://example.com",
-                            "type": "local",
-                          }
-                        }
-                        markType="doubleCurved"
-                        source={
-                          Object {
-                            "copy": "consectetur adipiscing elit",
-                            "copy2": "IBM Cloud",
-                            "heading": "Lorem ipsum dolor sit amet",
-                          }
-                        }
-                      >
-                        <div
-                          className="bx--quote"
-                          data-autoid="dds--quote"
-                        >
-                          <div
-                            className="bx--quote__container"
-                          >
-                            <div
-                              className="bx--quote__wrapper"
-                              data-autoid="dds--quote__copy"
-                            >
-                              <span
-                                className="bx--quote__mark"
-                              >
-                                “
-                              </span>
-                              <blockquote
-                                className="bx--quote__copy"
-                              >
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.
-                                ”
-                              </blockquote>
-                            </div>
-                            <div
-                              className="bx--quote__source"
-                              data-autoid="dds--quote__source"
-                            >
-                              <p
-                                className="bx--quote__source-heading"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </p>
-                              <p
-                                className="bx--quote__source-body"
-                              >
-                                consectetur adipiscing elit
-                              </p>
-                              <p
-                                className="bx--quote__source-optional-copy"
-                              >
-                                IBM Cloud
-                              </p>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--quote__footer"
-                          >
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                            <LinkWithIcon
-                              href="https://example.com"
-                              iconInline={true}
-                              iconPlacement="right"
-                            >
-                              <div
-                                className="bx--link-with-icon__container"
-                                data-autoid="dds--link-with-icon"
-                              >
-                                <Link
-                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                  href="https://example.com"
-                                  size="lg"
-                                >
-                                  <a
-                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                    href="https://example.com"
-                                    rel={null}
-                                  >
-                                    <span>
-                                      Link with Icon
-                                    </span>
-                                    <ForwardRef(ArrowRight20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Link>
-                              </div>
-                            </LinkWithIcon>
-                          </div>
-                        </div>
-                      </Quote>
-                    </div>
-                  </div>
-                </section>
-              </Callout>
-            </div>
-          </CalloutQuote>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Callout with media Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-callout-with-media--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Callout with media: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--offset-lg-4 bx--col-lg-12"
-        >
-          <CalloutWithMedia
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-      nulla quis, *consequat* libero. Here are
-      some common categories:"
-            heading="Curabitur malesuada varius mi eu posuere"
-            mediaData={
-              Object {
-                "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--16x9--320x180--005.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--005.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--005.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-          >
-            <div
-              className="bx--callout-with-media"
-              data-autoid="dds--callout-with-media"
-            >
-              <Callout>
-                <section
-                  className="bx--callout__container"
-                  data-autoid="dds--callout__container"
-                >
-                  <div
-                    className="bx--callout__column"
-                    data-autoid="dds--callout__column"
-                  >
-                    <div
-                      className="bx--callout__content"
-                      data-autoid="dds--callout__content"
-                    >
-                      <ContentBlockSimple
-                        copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-      nulla quis, *consequat* libero. Here are
-      some common categories:"
-                        heading="Curabitur malesuada varius mi eu posuere"
-                        mediaData={
-                          Object {
-                            "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                              "sources": Array [
-                                Object {
-                                  "breakpoint": 320,
-                                  "src": "fpo--16x9--320x180--005.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 400,
-                                  "src": "fpo--16x9--480x270--005.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 672,
-                                  "src": "fpo--16x9--720x405--005.jpg",
-                                },
-                              ],
-                            },
-                          }
-                        }
-                        mediaType="image"
-                      >
-                        <div
-                          className="bx--content-block-simple"
-                          data-autoid="dds--content-block-simple"
-                        >
-                          <ContentBlock
-                            border={false}
-                            heading="Curabitur malesuada varius mi eu posuere"
-                          >
-                            <div
-                              className="bx--content-block"
-                              data-autoid="dds--content-block"
-                            >
-                              <h2
-                                className="bx--content-block__heading"
-                                data-autoid="dds--content-block__heading"
-                              >
-                                Curabitur malesuada varius mi eu posuere
-                              </h2>
-                              <div
-                                className="bx--content-block__children"
-                                data-autoid="dds--content-block__children"
-                              >
-                                <div
-                                  className="bx--content-block-simple__content"
-                                >
-                                  <ContentItem
-                                    copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-      nulla quis, *consequat* libero. Here are
-      some common categories:"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Here are  some common categories:</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <div
-                                    className="bx--content-block-simple__media-image"
-                                    data-autoid="dds--content-block-simple__media"
-                                  >
-                                    <ImageWithCaption
-                                      copy=""
-                                      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                                          "sources": Array [
-                                            Object {
-                                              "breakpoint": 320,
-                                              "src": "fpo--16x9--320x180--005.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 400,
-                                              "src": "fpo--16x9--480x270--005.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 672,
-                                              "src": "fpo--16x9--720x405--005.jpg",
-                                            },
-                                          ],
-                                        }
-                                      }
-                                      lightbox={false}
-                                    >
-                                      <div
-                                        className="bx--image-with-caption"
-                                        data-autoid="dds--image-with-caption"
-                                      >
-                                        <Image
-                                          alt="Image alt text"
-                                          defaultSrc="fpo--16x9--720x405--005.jpg"
-                                          sources={
-                                            Array [
-                                              Object {
-                                                "breakpoint": 320,
-                                                "src": "fpo--16x9--320x180--005.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 400,
-                                                "src": "fpo--16x9--480x270--005.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 672,
-                                                "src": "fpo--16x9--720x405--005.jpg",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <div
-                                            className="bx--image"
-                                            data-autoid="dds--image__longdescription"
-                                          >
-                                            <picture>
-                                              <source
-                                                key="0"
-                                                media="(min-width: 672px)"
-                                                srcSet="fpo--16x9--720x405--005.jpg"
-                                              />
-                                              <source
-                                                key="1"
-                                                media="(min-width: 400px)"
-                                                srcSet="fpo--16x9--480x270--005.jpg"
-                                              />
-                                              <source
-                                                key="2"
-                                                media="(min-width: 320px)"
-                                                srcSet="fpo--16x9--320x180--005.jpg"
-                                              />
-                                              <img
-                                                alt="Image alt text"
-                                                className="bx--image__img"
-                                                src="fpo--16x9--720x405--005.jpg"
-                                              />
-                                            </picture>
-                                          </div>
-                                        </Image>
-                                        <p
-                                          className="bx--image__caption"
-                                          data-autoid="dds--image__caption"
-                                        >
-                                          Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                                        </p>
-                                      </div>
-                                    </ImageWithCaption>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </ContentBlock>
-                        </div>
-                      </ContentBlockSimple>
-                    </div>
-                  </div>
-                </section>
-              </Callout>
-            </div>
-          </CalloutWithMedia>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card Card static 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card--card-static",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Card/__stories__/Card.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Card: Card static",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--card--white"
-    >
-      <div
-        className="bx--grid bx--grid--card"
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter"
-          >
-            <Card
-              border={true}
-              cardStatic={true}
-              copy="Enjoy full SPSS Statistics capabilities including all add-ons. All trial registrants are restricted to one free trial per computer per user."
-              cta=""
-              eyebrow="SPSS Statistics"
-              heading="Free trial"
-              light={true}
-            >
-              <Tile
-                className="bx--card bx--card--static bx--card--light bx--card--border"
-                data-autoid="dds--card"
-                light={false}
-              >
-                <div
-                  className="bx--tile bx--card bx--card--static bx--card--light bx--card--border"
-                  data-autoid="dds--card"
-                >
-                  <div
-                    className="bx--card__wrapper"
-                  >
-                    <div
-                      className="bx--card__content"
-                    >
-                      <p
-                        className="bx--card__eyebrow"
-                      >
-                        SPSS Statistics
-                      </p>
-                      <h3
-                        className="bx--card__heading"
-                      >
-                        Free trial
-                      </h3>
-                      <div
-                        className="bx--card__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>Enjoy full SPSS Statistics capabilities including all add-ons. All trial registrants are restricted to one free trial per computer per user.</p> ",
-                          }
-                        }
-                      />
-                    </div>
-                  </div>
-                </div>
-              </Tile>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Card/__stories__/Card.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Card: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--card--white"
-    >
-      <div
-        className="bx--grid bx--grid--card"
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter"
-          >
-            <Card
-              border={false}
-              copy=""
-              cta={
-                Object {
-                  "copy": "Learn more",
-                  "href": "https://example.com",
-                  "icon": Object {
-                    "src": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                  },
-                }
-              }
-              eyebrow="Industry"
-              heading="Aerospace and defence"
-              inverse={false}
-              light={false}
-              pictogram={null}
-            >
-              <Tile
-                className="bx--card"
-                data-autoid="dds--card"
-                light={false}
-              >
-                <div
-                  className="bx--tile bx--card"
-                  data-autoid="dds--card"
-                >
-                  <div
-                    className="bx--card__wrapper"
-                  >
-                    <div
-                      className="bx--card__content"
-                    >
-                      <p
-                        className="bx--card__eyebrow"
-                      >
-                        Industry
-                      </p>
-                      <h3
-                        className="bx--card__heading"
-                      >
-                        Aerospace and defence
-                      </h3>
-                      <Link
-                        aria-label=""
-                        className="bx--card__footer bx--card__footer__copy"
-                        href="https://example.com"
-                        target={null}
-                      >
-                        <a
-                          aria-label=""
-                          className="bx--link bx--card__footer bx--card__footer__copy"
-                          href="https://example.com"
-                          rel={null}
-                          target={null}
-                        >
-                          <span
-                            className="bx--card__cta__copy"
-                          >
-                            Learn more
-                          </span>
-                          <ForwardRef(ArrowRight20)
-                            className="bx--card__cta"
-                            src={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                          >
-                            <Icon
-                              className="bx--card__cta"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              src={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden={true}
-                                className="bx--card__cta"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                src={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  }
-                                }
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(ArrowRight20)>
-                        </a>
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              </Tile>
-            </Card>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card group Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-group--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardGroup/__stories__/CardGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CardGroup": Object {
-            "cards": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lobortis",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Fusce gravida eu arcu",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Interdum et malesuada",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis loborti",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lbortis",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid bx--content-group-story"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12"
-        >
-          <CardGroup
-            border={false}
-            cards={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-              ]
-            }
-            cardsPerRow="3"
-          >
-            <div
-              className="bx--card-group__cards__row bx--row--condensed"
-              data-autoid="dds--card-group"
-              style={
-                Object {
-                  "--dds--card-group--cards-in-row": "3",
-                }
-              }
-            >
-              <div
-                className="bx--card-group__cards__col"
-                key="0"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="0"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="1"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="1"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="2"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="2"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="3"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="3"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="4"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="4"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-            </div>
-          </CardGroup>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card group With CTA 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-group--with-cta",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardGroup/__stories__/CardGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CardGroup": Object {
-            "cards": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lobortis",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Fusce gravida eu arcu",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Interdum et malesuada",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis loborti",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lbortis",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid bx--content-group-story"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12"
-        >
-          <CardGroup
-            cards={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis",
-                  "type": "local",
-                },
-              ]
-            }
-            cardsPerRow="3"
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Top level card link",
-              }
-            }
-          >
-            <div
-              className="bx--card-group__cards__row bx--row--condensed"
-              data-autoid="dds--card-group"
-              style={
-                Object {
-                  "--dds--card-group--cards-in-row": "3",
-                }
-              }
-            >
-              <div
-                className="bx--card-group__cards__col"
-                key="0"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="0"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="1"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="1"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="2"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="2"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="3"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="3"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="4"
-              >
-                <CTA
-                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  heading="Nunc convallis lobortis"
-                  href=""
-                  key="4"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Nunc convallis lobortis"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": undefined,
-                            "heading": "Nunc convallis lobortis",
-                            "href": "https://www.example.com",
-                            "image": undefined,
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Nunc convallis lobortis"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Nunc convallis lobortis
-                                  </h3>
-                                  <div
-                                    className="bx--card__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                      }
-                                    }
-                                  />
-                                  <Link
-                                    aria-label="Nunc convallis lobortis"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Nunc convallis lobortis"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-              >
-                <Card
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  heading="Top level card link"
-                  inverse={true}
-                >
-                  <Tile
-                    className="bx--card bx--card--inverse"
-                    data-autoid="dds--card"
-                    light={false}
-                  >
-                    <div
-                      className="bx--tile bx--card bx--card--inverse"
-                      data-autoid="dds--card"
-                    >
-                      <div
-                        className="bx--card__wrapper"
-                      >
-                        <div
-                          className="bx--card__content"
-                        >
-                          <h3
-                            className="bx--card__heading"
-                          >
-                            Top level card link
-                          </h3>
-                          <Link
-                            aria-label="Top level card link"
-                            className="bx--card__footer"
-                            href="https://www.example.com"
-                            target={null}
-                          >
-                            <a
-                              aria-label="Top level card link"
-                              className="bx--link bx--card__footer"
-                              href="https://www.example.com"
-                              rel={null}
-                              target={null}
-                            >
-                              <ForwardRef(ArrowRight20)
-                                className="bx--card__cta"
-                                src={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  }
-                                }
-                              >
-                                <Icon
-                                  className="bx--card__cta"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  src={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--card__cta"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    src={
-                                      Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      }
-                                    }
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
-                  </Tile>
-                </Card>
-              </div>
-            </div>
-          </CardGroup>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card group With images 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-group--with-images",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardGroup/__stories__/CardGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Card group: With images",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CardGroup": Object {
-            "cards": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lobortis",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Fusce gravida eu arcu",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Interdum et malesuada",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis loborti",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lbortis",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid bx--content-group-story"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12"
-        >
-          <CardGroup
-            cards={
-              Array [
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-              ]
-            }
-            cardsPerRow="3"
-          >
-            <div
-              className="bx--card-group__cards__row bx--row--condensed"
-              data-autoid="dds--card-group"
-              style={
-                Object {
-                  "--dds--card-group--cards-in-row": "3",
-                }
-              }
-            >
-              <div
-                className="bx--card-group__cards__col"
-                key="0"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="0"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="1"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="1"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="2"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="2"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="3"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="3"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="4"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="4"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-            </div>
-          </CardGroup>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card group With images and CTA 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-group--with-images-and-cta",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardGroup/__stories__/CardGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Card group: With images and CTA",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CardGroup": Object {
-            "cards": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lobortis",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Fusce gravida eu arcu",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Interdum et malesuada",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis loborti",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lbortis",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid bx--content-group-story"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12"
-        >
-          <CardGroup
-            cards={
-              Array [
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                  },
-                  "type": "local",
-                },
-              ]
-            }
-            cardsPerRow="3"
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Top level card link",
-              }
-            }
-          >
-            <div
-              className="bx--card-group__cards__row bx--row--condensed"
-              data-autoid="dds--card-group"
-              style={
-                Object {
-                  "--dds--card-group--cards-in-row": "3",
-                }
-              }
-            >
-              <div
-                className="bx--card-group__cards__col"
-                key="0"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="0"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="1"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="1"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="2"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="2"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="3"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="3"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-                key="4"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  customClassName="bx--card-group__card"
-                  customVideoTitle={null}
-                  eyebrow="Topic"
-                  heading="Natural language processing."
-                  href=""
-                  image={
-                    Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                    }
-                  }
-                  key="4"
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--card-group__card"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                          "icon": Object {
-                            "src": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      eyebrow="Topic"
-                      heading="Natural language processing."
-                      href=""
-                      image={
-                        Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                        }
-                      }
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "eyebrow": "Topic",
-                            "heading": "Natural language processing.",
-                            "href": "https://www.example.com",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            },
-                            "media": null,
-                            "pictogram": undefined,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          eyebrow="Topic"
-                          heading="Natural language processing."
-                          href="https://www.example.com"
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--4x3--1312x984--003.jpg",
-                            }
-                          }
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Image
-                                alt="Image alt text"
-                                classname="bx--card__img"
-                                defaultSrc="fpo--4x3--1312x984--003.jpg"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img bx--card__img"
-                                      src="fpo--4x3--1312x984--003.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <p
-                                    className="bx--card__eyebrow"
-                                  >
-                                    Topic
-                                  </p>
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Natural language processing.
-                                  </h3>
-                                  <Link
-                                    aria-label="Natural language processing."
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Natural language processing."
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-              <div
-                className="bx--card-group__cards__col"
-              >
-                <Card
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                      "icon": Object {
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    }
-                  }
-                  heading="Top level card link"
-                  inverse={true}
-                >
-                  <Tile
-                    className="bx--card bx--card--inverse"
-                    data-autoid="dds--card"
-                    light={false}
-                  >
-                    <div
-                      className="bx--tile bx--card bx--card--inverse"
-                      data-autoid="dds--card"
-                    >
-                      <div
-                        className="bx--card__wrapper"
-                      >
-                        <div
-                          className="bx--card__content"
-                        >
-                          <h3
-                            className="bx--card__heading"
-                          >
-                            Top level card link
-                          </h3>
-                          <Link
-                            aria-label="Top level card link"
-                            className="bx--card__footer"
-                            href="https://www.example.com"
-                            target={null}
-                          >
-                            <a
-                              aria-label="Top level card link"
-                              className="bx--link bx--card__footer"
-                              href="https://www.example.com"
-                              rel={null}
-                              target={null}
-                            >
-                              <ForwardRef(ArrowRight20)
-                                className="bx--card__cta"
-                                src={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  }
-                                }
-                              >
-                                <Icon
-                                  className="bx--card__cta"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  src={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--card__cta"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    src={
-                                      Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      }
-                                    }
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Link>
-                        </div>
-                      </div>
-                    </div>
-                  </Tile>
-                </Card>
-              </div>
-            </div>
-          </CardGroup>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card in card Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-in-card--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardInCard/__stories__/CardInCard.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/card-in-card"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card link Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-link--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardLink/__stories__/CardLink.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Card link: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid bx--grid--card bx--grid--condensed"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter"
-        >
-          <CardLink
-            card={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                  "icon": Object {
-                    "src": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                  },
-                },
-                "disabled": false,
-                "heading": "Explore AI use cases in all industries",
-              }
-            }
-            disabled={false}
-          >
-            <Card
-              cta={
-                Object {
-                  "href": "https://www.example.com",
-                  "icon": Object {
-                    "src": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                  },
-                }
-              }
-              customClassName="bx--card-link bx--card__CTA"
-              disabled={false}
-              heading="Explore AI use cases in all industries"
-            >
-              <Tile
-                className="bx--card bx--card-link bx--card__CTA"
-                data-autoid="dds--card"
-                disabled={false}
-                light={false}
-              >
-                <div
-                  className="bx--tile bx--card bx--card-link bx--card__CTA"
-                  data-autoid="dds--card"
-                  disabled={false}
-                >
-                  <div
-                    className="bx--card__wrapper"
-                  >
-                    <div
-                      className="bx--card__content"
-                    >
-                      <h3
-                        className="bx--card__heading"
-                      >
-                        Explore AI use cases in all industries
-                      </h3>
-                      <Link
-                        aria-label="Explore AI use cases in all industries"
-                        className="bx--card__footer"
-                        href="https://www.example.com"
-                        target={null}
-                      >
-                        <a
-                          aria-label="Explore AI use cases in all industries"
-                          className="bx--link bx--card__footer"
-                          href="https://www.example.com"
-                          rel={null}
-                          target={null}
-                        >
-                          <ForwardRef(ArrowRight20)
-                            className="bx--card__cta"
-                            src={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                          >
-                            <Icon
-                              className="bx--card__cta"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              src={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden={true}
-                                className="bx--card__cta"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                src={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  }
-                                }
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(ArrowRight20)>
-                        </a>
-                      </Link>
-                    </div>
-                  </div>
-                </div>
-              </Tile>
-            </Card>
-          </CardLink>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card section carousel Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-section-carousel--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardSectionCarousel/__stories__/CardSectionCarousel.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-card-section-carousel--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card section images Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-section-images--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardSectionImages/__stories__/CardSectionImages.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Card section images: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CardSectionImages": Object {
-            "cards": Array [
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Topic",
-                "heading": "Natural language processing.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Blog",
-                "heading": "Natural language processing.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Topic",
-                "heading": "Natural language processing.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Blog",
-                "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Topic",
-                "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <CardSectionImages
-      cards={
-        Array [
-          Object {
-            "cta": Object {
-              "href": "https://www.example.com",
-            },
-            "eyebrow": "Topic",
-            "heading": "Natural language processing.",
-            "image": Object {
-              "alt": "Image alt text",
-              "defaultSrc": "fpo--3x2--874--004.jpg",
-            },
-          },
-          Object {
-            "cta": Object {
-              "href": "https://www.example.com",
-            },
-            "eyebrow": "Blog",
-            "heading": "Natural language processing.",
-            "image": Object {
-              "alt": "Image alt text",
-              "defaultSrc": "fpo--3x2--874--004.jpg",
-            },
-          },
-          Object {
-            "cta": Object {
-              "href": "https://www.example.com",
-            },
-            "eyebrow": "Topic",
-            "heading": "Natural language processing.",
-            "image": Object {
-              "alt": "Image alt text",
-              "defaultSrc": "fpo--3x2--874--004.jpg",
-            },
-          },
-          Object {
-            "cta": Object {
-              "href": "https://www.example.com",
-            },
-            "eyebrow": "Blog",
-            "heading": "Serving society ethically in the age of Artificial Intelligence.",
-            "image": Object {
-              "alt": "Image alt text",
-              "defaultSrc": "fpo--3x2--874--004.jpg",
-            },
-          },
-          Object {
-            "cta": Object {
-              "href": "https://www.example.com",
-            },
-            "eyebrow": "Topic",
-            "heading": "Serving society ethically in the age of Artificial Intelligence.",
-            "image": Object {
-              "alt": "Image alt text",
-              "defaultSrc": "fpo--3x2--874--004.jpg",
-            },
-          },
-        ]
-      }
-      heading="Aliquam condimentum interdum"
-      theme="white"
-    >
-      <ContentSection
-        autoid="dds--card-group-images-group"
-        customClassName="bx--card-group bx--card-group--white"
-        heading="Aliquam condimentum interdum"
-      >
-        <section
-          className="bx--content-section bx--card-group bx--card-group--white"
-          data-autoid="dds--card-group-images-group"
-        >
-          <div
-            className="bx--content-section__grid"
-          >
-            <div
-              className="bx--content-section__row"
-            >
-              <div
-                className="bx--content-section__left"
-              >
-                <h2
-                  className="bx--content-section__heading"
-                >
-                  Aliquam condimentum interdum
-                </h2>
-              </div>
-              <div
-                className="bx--content-section__children"
-              >
-                <CardGroup
-                  cards={
-                    Array [
-                      Object {
-                        "cta": Object {
-                          "href": "https://www.example.com",
-                        },
-                        "eyebrow": "Topic",
-                        "heading": "Natural language processing.",
-                        "image": Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                        },
-                      },
-                      Object {
-                        "cta": Object {
-                          "href": "https://www.example.com",
-                        },
-                        "eyebrow": "Blog",
-                        "heading": "Natural language processing.",
-                        "image": Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                        },
-                      },
-                      Object {
-                        "cta": Object {
-                          "href": "https://www.example.com",
-                        },
-                        "eyebrow": "Topic",
-                        "heading": "Natural language processing.",
-                        "image": Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                        },
-                      },
-                      Object {
-                        "cta": Object {
-                          "href": "https://www.example.com",
-                        },
-                        "eyebrow": "Blog",
-                        "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                        "image": Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                        },
-                      },
-                      Object {
-                        "cta": Object {
-                          "href": "https://www.example.com",
-                        },
-                        "eyebrow": "Topic",
-                        "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                        "image": Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                        },
-                      },
-                    ]
-                  }
-                  cardsPerRow={3}
-                >
-                  <div
-                    className="bx--card-group__cards__row bx--row--condensed"
-                    data-autoid="dds--card-group"
-                    style={
-                      Object {
-                        "--dds--card-group--cards-in-row": 3,
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="0"
-                    >
-                      <CTA
-                        copy=""
-                        cta={
-                          Object {
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        eyebrow="Topic"
-                        heading="Natural language processing."
-                        href=""
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--3x2--874--004.jpg",
-                          }
-                        }
-                        key="0"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy=""
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            eyebrow="Topic"
-                            heading="Natural language processing."
-                            href=""
-                            image={
-                              Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              }
-                            }
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": "Topic",
-                                  "heading": "Natural language processing.",
-                                  "href": "https://www.example.com",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  },
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                eyebrow="Topic"
-                                heading="Natural language processing."
-                                href="https://www.example.com"
-                                image={
-                                  Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  }
-                                }
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      classname="bx--card__img"
-                                      defaultSrc="fpo--3x2--874--004.jpg"
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img bx--card__img"
-                                            src="fpo--3x2--874--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <p
-                                          className="bx--card__eyebrow"
-                                        >
-                                          Topic
-                                        </p>
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Natural language processing.
-                                        </h3>
-                                        <Link
-                                          aria-label="Natural language processing."
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Natural language processing."
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="1"
-                    >
-                      <CTA
-                        copy=""
-                        cta={
-                          Object {
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        eyebrow="Blog"
-                        heading="Natural language processing."
-                        href=""
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--3x2--874--004.jpg",
-                          }
-                        }
-                        key="1"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy=""
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            eyebrow="Blog"
-                            heading="Natural language processing."
-                            href=""
-                            image={
-                              Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              }
-                            }
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": "Blog",
-                                  "heading": "Natural language processing.",
-                                  "href": "https://www.example.com",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  },
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                eyebrow="Blog"
-                                heading="Natural language processing."
-                                href="https://www.example.com"
-                                image={
-                                  Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  }
-                                }
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      classname="bx--card__img"
-                                      defaultSrc="fpo--3x2--874--004.jpg"
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img bx--card__img"
-                                            src="fpo--3x2--874--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <p
-                                          className="bx--card__eyebrow"
-                                        >
-                                          Blog
-                                        </p>
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Natural language processing.
-                                        </h3>
-                                        <Link
-                                          aria-label="Natural language processing."
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Natural language processing."
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="2"
-                    >
-                      <CTA
-                        copy=""
-                        cta={
-                          Object {
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        eyebrow="Topic"
-                        heading="Natural language processing."
-                        href=""
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--3x2--874--004.jpg",
-                          }
-                        }
-                        key="2"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy=""
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            eyebrow="Topic"
-                            heading="Natural language processing."
-                            href=""
-                            image={
-                              Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              }
-                            }
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": "Topic",
-                                  "heading": "Natural language processing.",
-                                  "href": "https://www.example.com",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  },
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                eyebrow="Topic"
-                                heading="Natural language processing."
-                                href="https://www.example.com"
-                                image={
-                                  Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  }
-                                }
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      classname="bx--card__img"
-                                      defaultSrc="fpo--3x2--874--004.jpg"
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img bx--card__img"
-                                            src="fpo--3x2--874--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <p
-                                          className="bx--card__eyebrow"
-                                        >
-                                          Topic
-                                        </p>
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Natural language processing.
-                                        </h3>
-                                        <Link
-                                          aria-label="Natural language processing."
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Natural language processing."
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="3"
-                    >
-                      <CTA
-                        copy=""
-                        cta={
-                          Object {
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        eyebrow="Blog"
-                        heading="Serving society ethically in the age of Artificial Intelligence."
-                        href=""
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--3x2--874--004.jpg",
-                          }
-                        }
-                        key="3"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy=""
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            eyebrow="Blog"
-                            heading="Serving society ethically in the age of Artificial Intelligence."
-                            href=""
-                            image={
-                              Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              }
-                            }
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": "Blog",
-                                  "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                                  "href": "https://www.example.com",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  },
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                eyebrow="Blog"
-                                heading="Serving society ethically in the age of Artificial Intelligence."
-                                href="https://www.example.com"
-                                image={
-                                  Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  }
-                                }
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      classname="bx--card__img"
-                                      defaultSrc="fpo--3x2--874--004.jpg"
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img bx--card__img"
-                                            src="fpo--3x2--874--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <p
-                                          className="bx--card__eyebrow"
-                                        >
-                                          Blog
-                                        </p>
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Serving society ethically in the age of Artificial Intelligence.
-                                        </h3>
-                                        <Link
-                                          aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="4"
-                    >
-                      <CTA
-                        copy=""
-                        cta={
-                          Object {
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        eyebrow="Topic"
-                        heading="Serving society ethically in the age of Artificial Intelligence."
-                        href=""
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--3x2--874--004.jpg",
-                          }
-                        }
-                        key="4"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy=""
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            eyebrow="Topic"
-                            heading="Serving society ethically in the age of Artificial Intelligence."
-                            href=""
-                            image={
-                              Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              }
-                            }
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": "Topic",
-                                  "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                                  "href": "https://www.example.com",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  },
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                eyebrow="Topic"
-                                heading="Serving society ethically in the age of Artificial Intelligence."
-                                href="https://www.example.com"
-                                image={
-                                  Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                                  }
-                                }
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      classname="bx--card__img"
-                                      defaultSrc="fpo--3x2--874--004.jpg"
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img bx--card__img"
-                                            src="fpo--3x2--874--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <p
-                                          className="bx--card__eyebrow"
-                                        >
-                                          Topic
-                                        </p>
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Serving society ethically in the age of Artificial Intelligence.
-                                        </h3>
-                                        <Link
-                                          aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                  </div>
-                </CardGroup>
-              </div>
-            </div>
-          </div>
-        </section>
-      </ContentSection>
-    </CardSectionImages>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card section offset Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-section-offset--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardSectionOffset/__stories__/CardSectionOffset.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-card-section-offset"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card section simple Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-section-simple--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <CardSectionSimple
-      cards={
-        Array [
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Fusce gravida eu arcu",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Interdum et malesuada",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Nunc convallis loborti",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Nunc convallis lbortis",
-          },
-        ]
-      }
-      heading="Aliquam condimentum interdum"
-      theme="white"
-    >
-      <ContentSection
-        autoid="dds--card-group-simple-group"
-        customClassName="bx--card-group bx--card-group--white"
-        heading="Aliquam condimentum interdum"
-      >
-        <section
-          className="bx--content-section bx--card-group bx--card-group--white"
-          data-autoid="dds--card-group-simple-group"
-        >
-          <div
-            className="bx--content-section__grid"
-          >
-            <div
-              className="bx--content-section__row"
-            >
-              <div
-                className="bx--content-section__left"
-              >
-                <h2
-                  className="bx--content-section__heading"
-                >
-                  Aliquam condimentum interdum
-                </h2>
-              </div>
-              <div
-                className="bx--content-section__children"
-              >
-                <CardGroup
-                  cards={
-                    Array [
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Fusce gravida eu arcu",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Interdum et malesuada",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Nunc convallis loborti",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Nunc convallis lbortis",
-                      },
-                    ]
-                  }
-                  cardsPerRow={3}
-                >
-                  <div
-                    className="bx--card-group__cards__row bx--row--condensed"
-                    data-autoid="dds--card-group"
-                    style={
-                      Object {
-                        "--dds--card-group--cards-in-row": 3,
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="0"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Nunc convallis lobortis Nunc convallis lobortis"
-                        href=""
-                        key="0"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Nunc convallis lobortis Nunc convallis lobortis"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Nunc convallis lobortis Nunc convallis lobortis"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Nunc convallis lobortis Nunc convallis lobortis
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Nunc convallis lobortis Nunc convallis lobortis"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Nunc convallis lobortis Nunc convallis lobortis"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="1"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Fusce gravida eu arcu"
-                        href=""
-                        key="1"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Fusce gravida eu arcu"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Fusce gravida eu arcu",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Fusce gravida eu arcu"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Fusce gravida eu arcu
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Fusce gravida eu arcu"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Fusce gravida eu arcu"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="2"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Interdum et malesuada"
-                        href=""
-                        key="2"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Interdum et malesuada"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Interdum et malesuada",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Interdum et malesuada"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Interdum et malesuada
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Interdum et malesuada"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Interdum et malesuada"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="3"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Nunc convallis loborti"
-                        href=""
-                        key="3"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Nunc convallis loborti"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Nunc convallis loborti",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Nunc convallis loborti"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Nunc convallis loborti
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Nunc convallis loborti"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Nunc convallis loborti"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="4"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Nunc convallis lbortis"
-                        href=""
-                        key="4"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Nunc convallis lbortis"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Nunc convallis lbortis",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Nunc convallis lbortis"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Nunc convallis lbortis
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Nunc convallis lbortis"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Nunc convallis lbortis"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                  </div>
-                </CardGroup>
-              </div>
-            </div>
-          </div>
-        </section>
-      </ContentSection>
-    </CardSectionSimple>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Card section simple With CTA 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-card-section-simple--with-cta",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "CardSectionSimple": Object {
-            "cta": Object {
-              "cta": Object {
-                "href": "https://www.example.com",
-              },
-              "heading": "Top level card link",
-            },
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <CardSectionSimple
-      cards={
-        Array [
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Fusce gravida eu arcu",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Interdum et malesuada",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Nunc convallis loborti",
-          },
-          Object {
-            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-            "cta": Object {
-              "copy": "cta text here",
-              "href": "https://www.example.com",
-            },
-            "heading": "Nunc convallis lbortis",
-          },
-        ]
-      }
-      cta={
-        Object {
-          "cta": Object {
-            "href": "https://www.example.com",
-          },
-          "heading": "Top level card link",
-        }
-      }
-      heading="Aliquam condimentum interdum"
-      theme="white"
-    >
-      <ContentSection
-        autoid="dds--card-group-simple-group"
-        customClassName="bx--card-group bx--card-group--white"
-        heading="Aliquam condimentum interdum"
-      >
-        <section
-          className="bx--content-section bx--card-group bx--card-group--white"
-          data-autoid="dds--card-group-simple-group"
-        >
-          <div
-            className="bx--content-section__grid"
-          >
-            <div
-              className="bx--content-section__row"
-            >
-              <div
-                className="bx--content-section__left"
-              >
-                <h2
-                  className="bx--content-section__heading"
-                >
-                  Aliquam condimentum interdum
-                </h2>
-              </div>
-              <div
-                className="bx--content-section__children"
-              >
-                <CardGroup
-                  cards={
-                    Array [
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Fusce gravida eu arcu",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Interdum et malesuada",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Nunc convallis loborti",
-                      },
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                        "cta": Object {
-                          "copy": "cta text here",
-                          "href": "https://www.example.com",
-                        },
-                        "heading": "Nunc convallis lbortis",
-                      },
-                    ]
-                  }
-                  cardsPerRow={3}
-                  cta={
-                    Object {
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Top level card link",
-                    }
-                  }
-                >
-                  <div
-                    className="bx--card-group__cards__row bx--row--condensed"
-                    data-autoid="dds--card-group"
-                    style={
-                      Object {
-                        "--dds--card-group--cards-in-row": 3,
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="0"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Nunc convallis lobortis Nunc convallis lobortis"
-                        href=""
-                        key="0"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Nunc convallis lobortis Nunc convallis lobortis"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Nunc convallis lobortis Nunc convallis lobortis"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Nunc convallis lobortis Nunc convallis lobortis
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Nunc convallis lobortis Nunc convallis lobortis"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Nunc convallis lobortis Nunc convallis lobortis"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="1"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Fusce gravida eu arcu"
-                        href=""
-                        key="1"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Fusce gravida eu arcu"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Fusce gravida eu arcu",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Fusce gravida eu arcu"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Fusce gravida eu arcu
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Fusce gravida eu arcu"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Fusce gravida eu arcu"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="2"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Interdum et malesuada"
-                        href=""
-                        key="2"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Interdum et malesuada"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Interdum et malesuada",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Interdum et malesuada"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Interdum et malesuada
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Interdum et malesuada"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Interdum et malesuada"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="3"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Nunc convallis loborti"
-                        href=""
-                        key="3"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Nunc convallis loborti"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Nunc convallis loborti",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Nunc convallis loborti"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Nunc convallis loborti
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Nunc convallis loborti"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Nunc convallis loborti"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                      key="4"
-                    >
-                      <CTA
-                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                        cta={
-                          Object {
-                            "copy": "cta text here",
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        customClassName="bx--card-group__card"
-                        customVideoTitle={null}
-                        heading="Nunc convallis lbortis"
-                        href=""
-                        key="4"
-                        style="card"
-                        type="local"
-                      >
-                        <div
-                          className="bx--card-group__card"
-                        >
-                          <CardCTA
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                            cta={
-                              Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customVideoTitle={null}
-                            disableImage={false}
-                            heading="Nunc convallis lbortis"
-                            href=""
-                            media={null}
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="card"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <CardLink
-                              card={
-                                Object {
-                                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  },
-                                  "customVideoTitle": null,
-                                  "eyebrow": undefined,
-                                  "heading": "Nunc convallis lbortis",
-                                  "href": "https://www.example.com",
-                                  "image": undefined,
-                                  "media": null,
-                                  "pictogram": undefined,
-                                  "size": undefined,
-                                  "target": null,
-                                }
-                              }
-                              customClassName="bx--card__CardCTA"
-                              disabled={false}
-                            >
-                              <Card
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "local",
-                                  }
-                                }
-                                customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                heading="Nunc convallis lbortis"
-                                href="https://www.example.com"
-                                media={null}
-                                target={null}
-                              >
-                                <Tile
-                                  className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  light={false}
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--card__wrapper"
-                                    >
-                                      <div
-                                        className="bx--card__content"
-                                      >
-                                        <h3
-                                          className="bx--card__heading"
-                                        >
-                                          Nunc convallis lbortis
-                                        </h3>
-                                        <div
-                                          className="bx--card__copy"
-                                          dangerouslySetInnerHTML={
-                                            Object {
-                                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                            }
-                                          }
-                                        />
-                                        <Link
-                                          aria-label="Nunc convallis lbortis"
-                                          className="bx--card__footer"
-                                          href="https://www.example.com"
-                                          target={null}
-                                        >
-                                          <a
-                                            aria-label="Nunc convallis lbortis"
-                                            className="bx--link bx--card__footer"
-                                            href="https://www.example.com"
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <ForwardRef(ArrowRight20)
-                                              className="bx--card__cta"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                            >
-                                              <Icon
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </Tile>
-                              </Card>
-                            </CardLink>
-                          </CardCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <div
-                      className="bx--card-group__cards__col"
-                    >
-                      <Card
-                        cta={
-                          Object {
-                            "href": "https://www.example.com",
-                            "icon": Object {
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          }
-                        }
-                        heading="Top level card link"
-                        inverse={true}
-                      >
-                        <Tile
-                          className="bx--card bx--card--inverse"
-                          data-autoid="dds--card"
-                          light={false}
-                        >
-                          <div
-                            className="bx--tile bx--card bx--card--inverse"
-                            data-autoid="dds--card"
-                          >
-                            <div
-                              className="bx--card__wrapper"
-                            >
-                              <div
-                                className="bx--card__content"
-                              >
-                                <h3
-                                  className="bx--card__heading"
-                                >
-                                  Top level card link
-                                </h3>
-                                <Link
-                                  aria-label="Top level card link"
-                                  className="bx--card__footer"
-                                  href="https://www.example.com"
-                                  target={null}
-                                >
-                                  <a
-                                    aria-label="Top level card link"
-                                    className="bx--link bx--card__footer"
-                                    href="https://www.example.com"
-                                    rel={null}
-                                    target={null}
-                                  >
-                                    <ForwardRef(ArrowRight20)
-                                      className="bx--card__cta"
-                                      src={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                    >
-                                      <Icon
-                                        className="bx--card__cta"
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Link>
-                              </div>
-                            </div>
-                          </div>
-                        </Tile>
-                      </Card>
-                    </div>
-                  </div>
-                </CardGroup>
-              </div>
-            </div>
-          </div>
-        </section>
-      </ContentSection>
-    </CardSectionSimple>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Carousel Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-carousel--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Carousel/__stories__/Carousel.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-carousel--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlock/__stories__/ContentBlock.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlock
-            aside={Object {}}
-            border={false}
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ligula, vitae finibus ante aliquet a."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Learn more about natual language processing",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="What is the latest news in artificial intelligence?"
-          >
-            <div
-              className="bx--content-block"
-              data-autoid="dds--content-block"
-            >
-              <h2
-                className="bx--content-block__heading"
-                data-autoid="dds--content-block__heading"
-              >
-                What is the latest news in artificial intelligence?
-              </h2>
-              <div
-                className="bx--content-block__copy"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ligula, vitae finibus ante aliquet a.</p> ",
-                  }
-                }
-              />
-              <div
-                className="bx--content-block__children"
-                data-autoid="dds--content-block__children"
-              />
-              <div
-                className="bx--content-block__cta-row"
-                data-autoid="dds--content-block__cta"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                    }
-                  }
-                  customClassName="bx--content-block__cta bx--content-block__cta-col"
-                  customVideoTitle={null}
-                  heading="Learn more about natual language processing"
-                  href=""
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--content-block__cta bx--content-block__cta-col"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Learn more about natual language processing"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "heading": "Learn more about natual language processing",
-                            "href": "https://www.example.com",
-                            "media": null,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Learn more about natual language processing"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Learn more about natual language processing
-                                  </h3>
-                                  <Link
-                                    aria-label="Learn more about natual language processing"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Learn more about natual language processing"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-            </div>
-          </ContentBlock>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block cards Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-cards--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockCards": Object {
-            "cards": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                "cta": Object {
-                  "copy": "cta text here",
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                "cta": Object {
-                  "copy": "cta text here",
-                  "href": "https://www.example.com",
-                },
-                "heading": "Fusce gravida eu arcu",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                "cta": Object {
-                  "copy": "cta text here",
-                  "href": "https://www.example.com",
-                },
-                "heading": "Interdum et malesuada",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                "cta": Object {
-                  "copy": "cta text here",
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis loborti",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                "cta": Object {
-                  "copy": "cta text here",
-                  "href": "https://www.example.com",
-                },
-                "heading": "Nunc convallis lbortis",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockCards
-            cards={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                  "cta": Object {
-                    "copy": "cta text here",
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                  "cta": Object {
-                    "copy": "cta text here",
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Fusce gravida eu arcu",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                  "cta": Object {
-                    "copy": "cta text here",
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Interdum et malesuada",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                  "cta": Object {
-                    "copy": "cta text here",
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis loborti",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                  "cta": Object {
-                    "copy": "cta text here",
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Nunc convallis lbortis",
-                },
-              ]
-            }
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Aliquam condimentum interdum"
-          >
-            <div
-              className="bx--content-block-cards"
-              data-autoid="dds--content-block-cards"
-            >
-              <ContentBlock
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Aliquam condimentum interdum"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Aliquam condimentum interdum
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--content-block-cards__content"
-                    >
-                      <CardGroup
-                        cards={
-                          Array [
-                            Object {
-                              "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                              "cta": Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                            },
-                            Object {
-                              "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                              "cta": Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Fusce gravida eu arcu",
-                            },
-                            Object {
-                              "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                              "cta": Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Interdum et malesuada",
-                            },
-                            Object {
-                              "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                              "cta": Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Nunc convallis loborti",
-                            },
-                            Object {
-                              "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                              "cta": Object {
-                                "copy": "cta text here",
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Nunc convallis lbortis",
-                            },
-                          ]
-                        }
-                        cardsPerRow={3}
-                      >
-                        <div
-                          className="bx--card-group__cards__row bx--row--condensed"
-                          data-autoid="dds--card-group"
-                          style={
-                            Object {
-                              "--dds--card-group--cards-in-row": 3,
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="0"
-                          >
-                            <CTA
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                              cta={
-                                Object {
-                                  "copy": "cta text here",
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              heading="Nunc convallis lobortis Nunc convallis lobortis"
-                              href=""
-                              key="0"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                  cta={
-                                    Object {
-                                      "copy": "cta text here",
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  heading="Nunc convallis lobortis Nunc convallis lobortis"
-                                  href=""
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "Nunc convallis lobortis Nunc convallis lobortis",
-                                        "href": "https://www.example.com",
-                                        "image": undefined,
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      heading="Nunc convallis lobortis Nunc convallis lobortis"
-                                      href="https://www.example.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Nunc convallis lobortis Nunc convallis lobortis
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Nunc convallis lobortis Nunc convallis lobortis"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Nunc convallis lobortis Nunc convallis lobortis"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="1"
-                          >
-                            <CTA
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                              cta={
-                                Object {
-                                  "copy": "cta text here",
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              heading="Fusce gravida eu arcu"
-                              href=""
-                              key="1"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                                  cta={
-                                    Object {
-                                      "copy": "cta text here",
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  heading="Fusce gravida eu arcu"
-                                  href=""
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "Fusce gravida eu arcu",
-                                        "href": "https://www.example.com",
-                                        "image": undefined,
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      heading="Fusce gravida eu arcu"
-                                      href="https://www.example.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Fusce gravida eu arcu
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Fusce gravida eu arcu"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Fusce gravida eu arcu"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="2"
-                          >
-                            <CTA
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                              cta={
-                                Object {
-                                  "copy": "cta text here",
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              heading="Interdum et malesuada"
-                              href=""
-                              key="2"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                                  cta={
-                                    Object {
-                                      "copy": "cta text here",
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  heading="Interdum et malesuada"
-                                  href=""
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "Interdum et malesuada",
-                                        "href": "https://www.example.com",
-                                        "image": undefined,
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est."
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      heading="Interdum et malesuada"
-                                      href="https://www.example.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Interdum et malesuada
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Interdum et malesuada"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Interdum et malesuada"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="3"
-                          >
-                            <CTA
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                              cta={
-                                Object {
-                                  "copy": "cta text here",
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              heading="Nunc convallis loborti"
-                              href=""
-                              key="3"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                                  cta={
-                                    Object {
-                                      "copy": "cta text here",
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  heading="Nunc convallis loborti"
-                                  href=""
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "Nunc convallis loborti",
-                                        "href": "https://www.example.com",
-                                        "image": undefined,
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      heading="Nunc convallis loborti"
-                                      href="https://www.example.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Nunc convallis loborti
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Nunc convallis loborti"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Nunc convallis loborti"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="4"
-                          >
-                            <CTA
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                              cta={
-                                Object {
-                                  "copy": "cta text here",
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              heading="Nunc convallis lbortis"
-                              href=""
-                              key="4"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                  cta={
-                                    Object {
-                                      "copy": "cta text here",
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  heading="Nunc convallis lbortis"
-                                  href=""
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "Nunc convallis lbortis",
-                                        "href": "https://www.example.com",
-                                        "image": undefined,
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      heading="Nunc convallis lbortis"
-                                      href="https://www.example.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Nunc convallis lbortis
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Nunc convallis lbortis"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Nunc convallis lbortis"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                        </div>
-                      </CardGroup>
-                    </div>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockCards>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block cards With images 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-cards--with-images",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block cards: With images",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockCards": Object {
-            "cards": Array [
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Topic",
-                "heading": "Natural language processing.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Blog",
-                "heading": "Natural language processing.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Topic",
-                "heading": "Natural language processing.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Blog",
-                "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "eyebrow": "Topic",
-                "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockCards
-            cards={
-              Array [
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Blog",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Natural language processing.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Blog",
-                  "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "eyebrow": "Topic",
-                  "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--3x2--874--004.jpg",
-                  },
-                },
-              ]
-            }
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Aliquam condimentum interdum"
-          >
-            <div
-              className="bx--content-block-cards"
-              data-autoid="dds--content-block-cards"
-            >
-              <ContentBlock
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Aliquam condimentum interdum"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Aliquam condimentum interdum
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--content-block-cards__content"
-                    >
-                      <CardGroup
-                        cards={
-                          Array [
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "eyebrow": "Topic",
-                              "heading": "Natural language processing.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "eyebrow": "Blog",
-                              "heading": "Natural language processing.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "eyebrow": "Topic",
-                              "heading": "Natural language processing.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "eyebrow": "Blog",
-                              "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "eyebrow": "Topic",
-                              "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--3x2--874--004.jpg",
-                              },
-                            },
-                          ]
-                        }
-                        cardsPerRow={3}
-                      >
-                        <div
-                          className="bx--card-group__cards__row bx--row--condensed"
-                          data-autoid="dds--card-group"
-                          style={
-                            Object {
-                              "--dds--card-group--cards-in-row": 3,
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="0"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              eyebrow="Topic"
-                              heading="Natural language processing."
-                              href=""
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                                }
-                              }
-                              key="0"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  eyebrow="Topic"
-                                  heading="Natural language processing."
-                                  href=""
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--3x2--874--004.jpg",
-                                    }
-                                  }
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": "Topic",
-                                        "heading": "Natural language processing.",
-                                        "href": "https://www.example.com",
-                                        "image": Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        },
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      eyebrow="Topic"
-                                      heading="Natural language processing."
-                                      href="https://www.example.com"
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        }
-                                      }
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <Image
-                                            alt="Image alt text"
-                                            classname="bx--card__img"
-                                            defaultSrc="fpo--3x2--874--004.jpg"
-                                          >
-                                            <div
-                                              className="bx--image"
-                                              data-autoid="dds--image__longdescription"
-                                            >
-                                              <picture>
-                                                <img
-                                                  alt="Image alt text"
-                                                  className="bx--image__img bx--card__img"
-                                                  src="fpo--3x2--874--004.jpg"
-                                                />
-                                              </picture>
-                                            </div>
-                                          </Image>
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <p
-                                                className="bx--card__eyebrow"
-                                              >
-                                                Topic
-                                              </p>
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Natural language processing.
-                                              </h3>
-                                              <Link
-                                                aria-label="Natural language processing."
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Natural language processing."
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="1"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              eyebrow="Blog"
-                              heading="Natural language processing."
-                              href=""
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                                }
-                              }
-                              key="1"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  eyebrow="Blog"
-                                  heading="Natural language processing."
-                                  href=""
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--3x2--874--004.jpg",
-                                    }
-                                  }
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": "Blog",
-                                        "heading": "Natural language processing.",
-                                        "href": "https://www.example.com",
-                                        "image": Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        },
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      eyebrow="Blog"
-                                      heading="Natural language processing."
-                                      href="https://www.example.com"
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        }
-                                      }
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <Image
-                                            alt="Image alt text"
-                                            classname="bx--card__img"
-                                            defaultSrc="fpo--3x2--874--004.jpg"
-                                          >
-                                            <div
-                                              className="bx--image"
-                                              data-autoid="dds--image__longdescription"
-                                            >
-                                              <picture>
-                                                <img
-                                                  alt="Image alt text"
-                                                  className="bx--image__img bx--card__img"
-                                                  src="fpo--3x2--874--004.jpg"
-                                                />
-                                              </picture>
-                                            </div>
-                                          </Image>
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <p
-                                                className="bx--card__eyebrow"
-                                              >
-                                                Blog
-                                              </p>
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Natural language processing.
-                                              </h3>
-                                              <Link
-                                                aria-label="Natural language processing."
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Natural language processing."
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="2"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              eyebrow="Topic"
-                              heading="Natural language processing."
-                              href=""
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                                }
-                              }
-                              key="2"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  eyebrow="Topic"
-                                  heading="Natural language processing."
-                                  href=""
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--3x2--874--004.jpg",
-                                    }
-                                  }
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": "Topic",
-                                        "heading": "Natural language processing.",
-                                        "href": "https://www.example.com",
-                                        "image": Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        },
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      eyebrow="Topic"
-                                      heading="Natural language processing."
-                                      href="https://www.example.com"
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        }
-                                      }
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <Image
-                                            alt="Image alt text"
-                                            classname="bx--card__img"
-                                            defaultSrc="fpo--3x2--874--004.jpg"
-                                          >
-                                            <div
-                                              className="bx--image"
-                                              data-autoid="dds--image__longdescription"
-                                            >
-                                              <picture>
-                                                <img
-                                                  alt="Image alt text"
-                                                  className="bx--image__img bx--card__img"
-                                                  src="fpo--3x2--874--004.jpg"
-                                                />
-                                              </picture>
-                                            </div>
-                                          </Image>
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <p
-                                                className="bx--card__eyebrow"
-                                              >
-                                                Topic
-                                              </p>
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Natural language processing.
-                                              </h3>
-                                              <Link
-                                                aria-label="Natural language processing."
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Natural language processing."
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="3"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              eyebrow="Blog"
-                              heading="Serving society ethically in the age of Artificial Intelligence."
-                              href=""
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                                }
-                              }
-                              key="3"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  eyebrow="Blog"
-                                  heading="Serving society ethically in the age of Artificial Intelligence."
-                                  href=""
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--3x2--874--004.jpg",
-                                    }
-                                  }
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": "Blog",
-                                        "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                                        "href": "https://www.example.com",
-                                        "image": Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        },
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      eyebrow="Blog"
-                                      heading="Serving society ethically in the age of Artificial Intelligence."
-                                      href="https://www.example.com"
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        }
-                                      }
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <Image
-                                            alt="Image alt text"
-                                            classname="bx--card__img"
-                                            defaultSrc="fpo--3x2--874--004.jpg"
-                                          >
-                                            <div
-                                              className="bx--image"
-                                              data-autoid="dds--image__longdescription"
-                                            >
-                                              <picture>
-                                                <img
-                                                  alt="Image alt text"
-                                                  className="bx--image__img bx--card__img"
-                                                  src="fpo--3x2--874--004.jpg"
-                                                />
-                                              </picture>
-                                            </div>
-                                          </Image>
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <p
-                                                className="bx--card__eyebrow"
-                                              >
-                                                Blog
-                                              </p>
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Serving society ethically in the age of Artificial Intelligence.
-                                              </h3>
-                                              <Link
-                                                aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="4"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              eyebrow="Topic"
-                              heading="Serving society ethically in the age of Artificial Intelligence."
-                              href=""
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--3x2--874--004.jpg",
-                                }
-                              }
-                              key="4"
-                              style="card"
-                              type="local"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  eyebrow="Topic"
-                                  heading="Serving society ethically in the age of Artificial Intelligence."
-                                  href=""
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--3x2--874--004.jpg",
-                                    }
-                                  }
-                                  media={null}
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": "Topic",
-                                        "heading": "Serving society ethically in the age of Artificial Intelligence.",
-                                        "href": "https://www.example.com",
-                                        "image": Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        },
-                                        "media": null,
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                        "target": null,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "type": "local",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      eyebrow="Topic"
-                                      heading="Serving society ethically in the age of Artificial Intelligence."
-                                      href="https://www.example.com"
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--3x2--874--004.jpg",
-                                        }
-                                      }
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href="https://www.example.com"
-                                        light={false}
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <Image
-                                            alt="Image alt text"
-                                            classname="bx--card__img"
-                                            defaultSrc="fpo--3x2--874--004.jpg"
-                                          >
-                                            <div
-                                              className="bx--image"
-                                              data-autoid="dds--image__longdescription"
-                                            >
-                                              <picture>
-                                                <img
-                                                  alt="Image alt text"
-                                                  className="bx--image__img bx--card__img"
-                                                  src="fpo--3x2--874--004.jpg"
-                                                />
-                                              </picture>
-                                            </div>
-                                          </Image>
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <p
-                                                className="bx--card__eyebrow"
-                                              >
-                                                Topic
-                                              </p>
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Serving society ethically in the age of Artificial Intelligence.
-                                              </h3>
-                                              <Link
-                                                aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Serving society ethically in the age of Artificial Intelligence."
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                        </div>
-                      </CardGroup>
-                    </div>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockCards>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block cards With videos 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-cards--with-videos",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockCards": Object {
-            "cards": Array [
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-              },
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockCards
-            cards={
-              Array [
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                },
-                Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                },
-              ]
-            }
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Aliquam condimentum interdum"
-          >
-            <div
-              className="bx--content-block-cards"
-              data-autoid="dds--content-block-cards"
-            >
-              <ContentBlock
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Aliquam condimentum interdum"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Aliquam condimentum interdum
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--content-block-cards__content"
-                    >
-                      <CardGroup
-                        cards={
-                          Array [
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                            },
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                            },
-                          ]
-                        }
-                        cardsPerRow={3}
-                      >
-                        <div
-                          className="bx--card-group__cards__row bx--row--condensed"
-                          data-autoid="dds--card-group"
-                          style={
-                            Object {
-                              "--dds--card-group--cards-in-row": 3,
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="0"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              href=""
-                              key="0"
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                              style="card"
-                              type="video"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  href=""
-                                  media={
-                                    Object {
-                                      "src": "1_9h94wo6b",
-                                      "type": "video",
-                                    }
-                                  }
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="video"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "",
-                                        "href": "",
-                                        "image": Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        },
-                                        "media": Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        },
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA bx--card__video"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                      customVideoTitle={null}
-                                      heading=""
-                                      href=""
-                                      image={
-                                        Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        }
-                                      }
-                                      media={
-                                        Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        }
-                                      }
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href=""
-                                        light={false}
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href=""
-                                          media={
-                                            Object {
-                                              "src": "1_9h94wo6b",
-                                              "type": "video",
-                                            }
-                                          }
-                                        >
-                                          <Image
-                                            alt=""
-                                            classname="bx--card__img"
-                                            defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                            icon={[Function]}
-                                            refImage={[Function]}
-                                          />
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <Link
-                                                aria-label=""
-                                                className="bx--card__footer bx--card__footer__icon-left"
-                                                href="#"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label=""
-                                                  className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                  href="#"
-                                                  onClick={[Function]}
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(PlayOutline20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                        />
-                                                        <path
-                                                          d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(PlayOutline20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="1"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              href=""
-                              key="1"
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                              style="card"
-                              type="video"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  href=""
-                                  media={
-                                    Object {
-                                      "src": "1_9h94wo6b",
-                                      "type": "video",
-                                    }
-                                  }
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="video"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "",
-                                        "href": "",
-                                        "image": Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        },
-                                        "media": Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        },
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA bx--card__video"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                      customVideoTitle={null}
-                                      heading=""
-                                      href=""
-                                      image={
-                                        Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        }
-                                      }
-                                      media={
-                                        Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        }
-                                      }
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href=""
-                                        light={false}
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href=""
-                                          media={
-                                            Object {
-                                              "src": "1_9h94wo6b",
-                                              "type": "video",
-                                            }
-                                          }
-                                        >
-                                          <Image
-                                            alt=""
-                                            classname="bx--card__img"
-                                            defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                            icon={[Function]}
-                                            refImage={[Function]}
-                                          />
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <Link
-                                                aria-label=""
-                                                className="bx--card__footer bx--card__footer__icon-left"
-                                                href="#"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label=""
-                                                  className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                  href="#"
-                                                  onClick={[Function]}
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(PlayOutline20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                        />
-                                                        <path
-                                                          d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(PlayOutline20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="2"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              href=""
-                              key="2"
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                              style="card"
-                              type="video"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  href=""
-                                  media={
-                                    Object {
-                                      "src": "1_9h94wo6b",
-                                      "type": "video",
-                                    }
-                                  }
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="video"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "",
-                                        "href": "",
-                                        "image": Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        },
-                                        "media": Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        },
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA bx--card__video"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                      customVideoTitle={null}
-                                      heading=""
-                                      href=""
-                                      image={
-                                        Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        }
-                                      }
-                                      media={
-                                        Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        }
-                                      }
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href=""
-                                        light={false}
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href=""
-                                          media={
-                                            Object {
-                                              "src": "1_9h94wo6b",
-                                              "type": "video",
-                                            }
-                                          }
-                                        >
-                                          <Image
-                                            alt=""
-                                            classname="bx--card__img"
-                                            defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                            icon={[Function]}
-                                            refImage={[Function]}
-                                          />
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <Link
-                                                aria-label=""
-                                                className="bx--card__footer bx--card__footer__icon-left"
-                                                href="#"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label=""
-                                                  className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                  href="#"
-                                                  onClick={[Function]}
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(PlayOutline20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                        />
-                                                        <path
-                                                          d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(PlayOutline20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="3"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              href=""
-                              key="3"
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                              style="card"
-                              type="video"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  href=""
-                                  media={
-                                    Object {
-                                      "src": "1_9h94wo6b",
-                                      "type": "video",
-                                    }
-                                  }
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="video"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "",
-                                        "href": "",
-                                        "image": Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        },
-                                        "media": Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        },
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA bx--card__video"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                      customVideoTitle={null}
-                                      heading=""
-                                      href=""
-                                      image={
-                                        Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        }
-                                      }
-                                      media={
-                                        Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        }
-                                      }
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href=""
-                                        light={false}
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href=""
-                                          media={
-                                            Object {
-                                              "src": "1_9h94wo6b",
-                                              "type": "video",
-                                            }
-                                          }
-                                        >
-                                          <Image
-                                            alt=""
-                                            classname="bx--card__img"
-                                            defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                            icon={[Function]}
-                                            refImage={[Function]}
-                                          />
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <Link
-                                                aria-label=""
-                                                className="bx--card__footer bx--card__footer__icon-left"
-                                                href="#"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label=""
-                                                  className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                  href="#"
-                                                  onClick={[Function]}
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(PlayOutline20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                        />
-                                                        <path
-                                                          d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(PlayOutline20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                          <div
-                            className="bx--card-group__cards__col"
-                            key="4"
-                          >
-                            <CTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--card-group__card"
-                              customVideoTitle={null}
-                              href=""
-                              key="4"
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                              style="card"
-                              type="video"
-                            >
-                              <div
-                                className="bx--card-group__card"
-                              >
-                                <CardCTA
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={false}
-                                  href=""
-                                  media={
-                                    Object {
-                                      "src": "1_9h94wo6b",
-                                      "type": "video",
-                                    }
-                                  }
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="card"
-                                  type="video"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <CardLink
-                                    card={
-                                      Object {
-                                        "copy": "",
-                                        "cta": Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        },
-                                        "customVideoTitle": null,
-                                        "eyebrow": undefined,
-                                        "heading": "",
-                                        "href": "",
-                                        "image": Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        },
-                                        "media": Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        },
-                                        "pictogram": undefined,
-                                        "size": undefined,
-                                      }
-                                    }
-                                    customClassName="bx--card__CardCTA bx--card__video"
-                                    disabled={false}
-                                  >
-                                    <Card
-                                      copy=""
-                                      cta={
-                                        Object {
-                                          "copy": "",
-                                          "handleClick": [Function],
-                                          "href": "#",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                          "iconPlacement": "left",
-                                        }
-                                      }
-                                      customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                      customVideoTitle={null}
-                                      heading=""
-                                      href=""
-                                      image={
-                                        Object {
-                                          "alt": "",
-                                          "defaultSrc": "https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3",
-                                          "icon": [Function],
-                                          "refImage": [Function],
-                                        }
-                                      }
-                                      media={
-                                        Object {
-                                          "src": "1_9h94wo6b",
-                                          "type": "video",
-                                        }
-                                      }
-                                    >
-                                      <Tile
-                                        className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                        customVideoTitle={null}
-                                        data-autoid="dds--card"
-                                        href=""
-                                        light={false}
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href=""
-                                          media={
-                                            Object {
-                                              "src": "1_9h94wo6b",
-                                              "type": "video",
-                                            }
-                                          }
-                                        >
-                                          <Image
-                                            alt=""
-                                            classname="bx--card__img"
-                                            defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                            icon={[Function]}
-                                            refImage={[Function]}
-                                          />
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <Link
-                                                aria-label=""
-                                                className="bx--card__footer bx--card__footer__icon-left"
-                                                href="#"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label=""
-                                                  className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                  href="#"
-                                                  onClick={[Function]}
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(PlayOutline20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                        />
-                                                        <path
-                                                          d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(PlayOutline20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </CardLink>
-                                </CardCTA>
-                              </div>
-                            </CTA>
-                          </div>
-                        </div>
-                      </CardGroup>
-                    </div>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockCards>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block headlines Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-headlines--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockHeadlines/__stories__/ContentBlockHeadlines.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <ContentBlockHeadlines
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-            heading="Aliquam condimentum"
-            items={
-              Array [
-                Object {
-                  "copy": "Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent faster.",
-                  "headline": "25%",
-                },
-                Object {
-                  "copy": "Realize up to 90 percent reduction in time spent and 75 percent reduction in IT operations expense.",
-                  "cta": Object {
-                    "copy": "View the infographic",
-                    "cta": Object {
-                      "href": "https://example.com",
-                    },
-                    "type": "local",
-                  },
-                  "headline": "75%",
-                },
-                Object {
-                  "copy": "Build cloud native apps with microservices code generation and improved DevOps processes with up to 50 percent less effort.",
-                  "cta": Object {
-                    "copy": "Take the assessment",
-                    "cta": Object {
-                      "href": "https://example.com",
-                    },
-                    "type": "external",
-                  },
-                  "headline": "50%",
-                },
-                Object {
-                  "copy": "Save 1.34M per year by optimizing your time and IT expenses.",
-                  "cta": Object {
-                    "copy": "Calculate your savings",
-                    "cta": Object {
-                      "href": "https://example.com",
-                    },
-                    "type": "local",
-                  },
-                  "headline": "1.34M",
-                },
-              ]
-            }
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block horizontal Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-horizontal--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockHorizontal/__stories__/ContentBlockHorizontal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block horizontal: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockHorizontal": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                "cta": Object {
-                  "items": Array [
-                    Object {
-                      "copy": "Link text",
-                      "cta": Object {
-                        "href": "https://example.com",
-                      },
-                      "type": "local",
-                    },
-                    Object {
-                      "copy": "External link text",
-                      "cta": Object {
-                        "href": "https://example.com",
-                      },
-                      "type": "external",
-                    },
-                  ],
-                },
-                "eyebrow": "Lorem ipsum",
-                "heading": "Aliquam condimentum",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                "cta": Object {
-                  "items": Array [
-                    Object {
-                      "copy": "Link text",
-                      "cta": Object {
-                        "href": "https://example.com",
-                      },
-                      "type": "local",
-                    },
-                    Object {
-                      "copy": "External link text",
-                      "cta": Object {
-                        "href": "https://example.com",
-                      },
-                      "type": "external",
-                    },
-                  ],
-                },
-                "eyebrow": "Lorem ipsum",
-                "heading": "Aliquam condimentum",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                "cta": Object {
-                  "items": Array [
-                    Object {
-                      "copy": "Link text",
-                      "cta": Object {
-                        "href": "https://example.com",
-                      },
-                      "type": "local",
-                    },
-                  ],
-                },
-                "eyebrow": "Lorem ipsum",
-                "heading": "Aliquam condimentum",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <ContentBlockHorizontal
-            border={true}
-            heading="Aliquam condimentum"
-            items={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                  "cta": Object {
-                    "items": Array [
-                      Object {
-                        "copy": "Link text",
-                        "cta": Object {
-                          "href": "https://example.com",
-                        },
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "External link text",
-                        "cta": Object {
-                          "href": "https://example.com",
-                        },
-                        "type": "external",
-                      },
-                    ],
-                  },
-                  "eyebrow": "Lorem ipsum",
-                  "heading": "Aliquam condimentum",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                  "cta": Object {
-                    "items": Array [
-                      Object {
-                        "copy": "Link text",
-                        "cta": Object {
-                          "href": "https://example.com",
-                        },
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "External link text",
-                        "cta": Object {
-                          "href": "https://example.com",
-                        },
-                        "type": "external",
-                      },
-                    ],
-                  },
-                  "eyebrow": "Lorem ipsum",
-                  "heading": "Aliquam condimentum",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                  "cta": Object {
-                    "items": Array [
-                      Object {
-                        "copy": "Link text",
-                        "cta": Object {
-                          "href": "https://example.com",
-                        },
-                        "type": "local",
-                      },
-                    ],
-                  },
-                  "eyebrow": "Lorem ipsum",
-                  "heading": "Aliquam condimentum",
-                },
-              ]
-            }
-          >
-            <div
-              className="bx--content-block-horizontal"
-              data-autoid="dds--content-block-horizontal"
-            >
-              <ContentBlock
-                border={true}
-                heading="Aliquam condimentum"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Aliquam condimentum
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <ContentItemHorizontal
-                      copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                      cta={
-                        Object {
-                          "items": Array [
-                            Object {
-                              "copy": "Link text",
-                              "cta": Object {
-                                "href": "https://example.com",
-                              },
-                              "type": "local",
-                            },
-                            Object {
-                              "copy": "External link text",
-                              "cta": Object {
-                                "href": "https://example.com",
-                              },
-                              "type": "external",
-                            },
-                          ],
-                        }
-                      }
-                      eyebrow="Lorem ipsum"
-                      heading="Aliquam condimentum"
-                      key="0"
-                    >
-                      <div
-                        className="bx--content-item-horizontal__item "
-                        data-autoid="dds--content-item-horizontal__item"
-                      >
-                        <div
-                          className="bx--content-item-horizontal__row"
-                        >
-                          <div
-                            className="bx--content-item-horizontal__col"
-                          >
-                            <p
-                              className="bx--content-item-horizontal__item--eyebrow"
-                              data-autoid="dds--content-item-horizontal__item--eyebrow"
-                            >
-                              Lorem ipsum
-                            </p>
-                            <h3
-                              className="bx--content-item-horizontal__item--heading"
-                              data-autoid="dds--content-item-horizontal__item--heading"
-                            >
-                              Aliquam condimentum
-                            </h3>
-                          </div>
-                          <div
-                            className="bx--content-item-horizontal__col"
-                          >
-                            <div
-                              className="bx--content-item-horizontal__item--copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                }
-                              }
-                              data-autoid="dds--content-item-horizontal__item--copy"
-                            />
-                            <div
-                              className="bx--content-item-horizontal__item--cta"
-                              data-autoid="dds--content-item-horizontal__item--cta"
-                            >
-                              <LinkList
-                                items={
-                                  Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "cta": Object {
-                                        "href": "https://example.com",
-                                      },
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "cta": Object {
-                                        "href": "https://example.com",
-                                      },
-                                      "type": "external",
-                                    },
-                                  ]
-                                }
-                                style="vertical"
-                              >
-                                <div
-                                  className="bx--link-list"
-                                  data-autoid="dds--link-list"
-                                >
-                                  <ul
-                                    className="bx--link-list__list bx--link-list__list--vertical"
-                                  >
-                                    <li
-                                      className="bx--link-list__list__CTA bx--link-list__list--local"
-                                      key="0"
-                                    >
-                                      <CTA
-                                        ariaRole="listitem"
-                                        copy="Link text"
-                                        cta={
-                                          Object {
-                                            "href": "https://example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        iconInline={true}
-                                        style="text"
-                                        type="local"
-                                      >
-                                        <div>
-                                          <TextCTA
-                                            ariaRole="listitem"
-                                            copy="Link text"
-                                            cta={
-                                              Object {
-                                                "href": "https://example.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            formatCTAcopy={[Function]}
-                                            href=""
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                            openLightBox={[Function]}
-                                            renderLightBox={false}
-                                            style="text"
-                                            type="local"
-                                            videoTitle={
-                                              Array [
-                                                Object {
-                                                  "duration": "",
-                                                  "key": 0,
-                                                  "title": "",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <LinkWithIcon
-                                              href="https://example.com"
-                                              iconInline={true}
-                                              iconPlacement="right"
-                                              onClick={[Function]}
-                                              target={null}
-                                            >
-                                              <div
-                                                className="bx--link-with-icon__container"
-                                                data-autoid="dds--link-with-icon"
-                                              >
-                                                <Link
-                                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                  href="https://example.com"
-                                                  onClick={[Function]}
-                                                  size="lg"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <span>
-                                                      Link text
-                                                    </span>
-                                                    <span
-                                                      className="bx--visually-hidden"
-                                                    />
-                                                    <ForwardRef(ArrowRight20)>
-                                                      <Icon
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </LinkWithIcon>
-                                          </TextCTA>
-                                        </div>
-                                      </CTA>
-                                    </li>
-                                    <li
-                                      className="bx--link-list__list__CTA bx--link-list__list--external"
-                                      key="1"
-                                    >
-                                      <CTA
-                                        ariaRole="listitem"
-                                        copy="External link text"
-                                        cta={
-                                          Object {
-                                            "href": "https://example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        iconInline={true}
-                                        style="text"
-                                        type="external"
-                                      >
-                                        <div>
-                                          <TextCTA
-                                            ariaRole="listitem"
-                                            copy="External link text"
-                                            cta={
-                                              Object {
-                                                "href": "https://example.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            formatCTAcopy={[Function]}
-                                            href=""
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                            openLightBox={[Function]}
-                                            renderLightBox={false}
-                                            style="text"
-                                            type="external"
-                                            videoTitle={
-                                              Array [
-                                                Object {
-                                                  "duration": "",
-                                                  "key": 0,
-                                                  "title": "",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <LinkWithIcon
-                                              href="https://example.com"
-                                              iconInline={true}
-                                              iconPlacement="right"
-                                              onClick={[Function]}
-                                              target="_blank"
-                                            >
-                                              <div
-                                                className="bx--link-with-icon__container"
-                                                data-autoid="dds--link-with-icon"
-                                              >
-                                                <Link
-                                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                  href="https://example.com"
-                                                  onClick={[Function]}
-                                                  size="lg"
-                                                  target="_blank"
-                                                >
-                                                  <a
-                                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    rel="noopener"
-                                                    target="_blank"
-                                                  >
-                                                    <span>
-                                                      External link text
-                                                    </span>
-                                                    <span
-                                                      className="bx--visually-hidden"
-                                                    >
-                                                       - This link opens in a new tab
-                                                    </span>
-                                                    <ForwardRef(Launch20)>
-                                                      <Icon
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 32 32"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                          />
-                                                          <path
-                                                            d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(Launch20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </LinkWithIcon>
-                                          </TextCTA>
-                                        </div>
-                                      </CTA>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </LinkList>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </ContentItemHorizontal>
-                    <ContentItemHorizontal
-                      copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                      cta={
-                        Object {
-                          "items": Array [
-                            Object {
-                              "copy": "Link text",
-                              "cta": Object {
-                                "href": "https://example.com",
-                              },
-                              "type": "local",
-                            },
-                            Object {
-                              "copy": "External link text",
-                              "cta": Object {
-                                "href": "https://example.com",
-                              },
-                              "type": "external",
-                            },
-                          ],
-                        }
-                      }
-                      eyebrow="Lorem ipsum"
-                      heading="Aliquam condimentum"
-                      key="1"
-                    >
-                      <div
-                        className="bx--content-item-horizontal__item "
-                        data-autoid="dds--content-item-horizontal__item"
-                      >
-                        <div
-                          className="bx--content-item-horizontal__row"
-                        >
-                          <div
-                            className="bx--content-item-horizontal__col"
-                          >
-                            <p
-                              className="bx--content-item-horizontal__item--eyebrow"
-                              data-autoid="dds--content-item-horizontal__item--eyebrow"
-                            >
-                              Lorem ipsum
-                            </p>
-                            <h3
-                              className="bx--content-item-horizontal__item--heading"
-                              data-autoid="dds--content-item-horizontal__item--heading"
-                            >
-                              Aliquam condimentum
-                            </h3>
-                          </div>
-                          <div
-                            className="bx--content-item-horizontal__col"
-                          >
-                            <div
-                              className="bx--content-item-horizontal__item--copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                }
-                              }
-                              data-autoid="dds--content-item-horizontal__item--copy"
-                            />
-                            <div
-                              className="bx--content-item-horizontal__item--cta"
-                              data-autoid="dds--content-item-horizontal__item--cta"
-                            >
-                              <LinkList
-                                items={
-                                  Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "cta": Object {
-                                        "href": "https://example.com",
-                                      },
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "cta": Object {
-                                        "href": "https://example.com",
-                                      },
-                                      "type": "external",
-                                    },
-                                  ]
-                                }
-                                style="vertical"
-                              >
-                                <div
-                                  className="bx--link-list"
-                                  data-autoid="dds--link-list"
-                                >
-                                  <ul
-                                    className="bx--link-list__list bx--link-list__list--vertical"
-                                  >
-                                    <li
-                                      className="bx--link-list__list__CTA bx--link-list__list--local"
-                                      key="0"
-                                    >
-                                      <CTA
-                                        ariaRole="listitem"
-                                        copy="Link text"
-                                        cta={
-                                          Object {
-                                            "href": "https://example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        iconInline={true}
-                                        style="text"
-                                        type="local"
-                                      >
-                                        <div>
-                                          <TextCTA
-                                            ariaRole="listitem"
-                                            copy="Link text"
-                                            cta={
-                                              Object {
-                                                "href": "https://example.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            formatCTAcopy={[Function]}
-                                            href=""
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                            openLightBox={[Function]}
-                                            renderLightBox={false}
-                                            style="text"
-                                            type="local"
-                                            videoTitle={
-                                              Array [
-                                                Object {
-                                                  "duration": "",
-                                                  "key": 0,
-                                                  "title": "",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <LinkWithIcon
-                                              href="https://example.com"
-                                              iconInline={true}
-                                              iconPlacement="right"
-                                              onClick={[Function]}
-                                              target={null}
-                                            >
-                                              <div
-                                                className="bx--link-with-icon__container"
-                                                data-autoid="dds--link-with-icon"
-                                              >
-                                                <Link
-                                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                  href="https://example.com"
-                                                  onClick={[Function]}
-                                                  size="lg"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <span>
-                                                      Link text
-                                                    </span>
-                                                    <span
-                                                      className="bx--visually-hidden"
-                                                    />
-                                                    <ForwardRef(ArrowRight20)>
-                                                      <Icon
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </LinkWithIcon>
-                                          </TextCTA>
-                                        </div>
-                                      </CTA>
-                                    </li>
-                                    <li
-                                      className="bx--link-list__list__CTA bx--link-list__list--external"
-                                      key="1"
-                                    >
-                                      <CTA
-                                        ariaRole="listitem"
-                                        copy="External link text"
-                                        cta={
-                                          Object {
-                                            "href": "https://example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        iconInline={true}
-                                        style="text"
-                                        type="external"
-                                      >
-                                        <div>
-                                          <TextCTA
-                                            ariaRole="listitem"
-                                            copy="External link text"
-                                            cta={
-                                              Object {
-                                                "href": "https://example.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            formatCTAcopy={[Function]}
-                                            href=""
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                            openLightBox={[Function]}
-                                            renderLightBox={false}
-                                            style="text"
-                                            type="external"
-                                            videoTitle={
-                                              Array [
-                                                Object {
-                                                  "duration": "",
-                                                  "key": 0,
-                                                  "title": "",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <LinkWithIcon
-                                              href="https://example.com"
-                                              iconInline={true}
-                                              iconPlacement="right"
-                                              onClick={[Function]}
-                                              target="_blank"
-                                            >
-                                              <div
-                                                className="bx--link-with-icon__container"
-                                                data-autoid="dds--link-with-icon"
-                                              >
-                                                <Link
-                                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                  href="https://example.com"
-                                                  onClick={[Function]}
-                                                  size="lg"
-                                                  target="_blank"
-                                                >
-                                                  <a
-                                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    rel="noopener"
-                                                    target="_blank"
-                                                  >
-                                                    <span>
-                                                      External link text
-                                                    </span>
-                                                    <span
-                                                      className="bx--visually-hidden"
-                                                    >
-                                                       - This link opens in a new tab
-                                                    </span>
-                                                    <ForwardRef(Launch20)>
-                                                      <Icon
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 32 32"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                          />
-                                                          <path
-                                                            d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(Launch20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </LinkWithIcon>
-                                          </TextCTA>
-                                        </div>
-                                      </CTA>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </LinkList>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </ContentItemHorizontal>
-                    <ContentItemHorizontal
-                      copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                      cta={
-                        Object {
-                          "items": Array [
-                            Object {
-                              "copy": "Link text",
-                              "cta": Object {
-                                "href": "https://example.com",
-                              },
-                              "type": "local",
-                            },
-                          ],
-                        }
-                      }
-                      eyebrow="Lorem ipsum"
-                      heading="Aliquam condimentum"
-                      key="2"
-                    >
-                      <div
-                        className="bx--content-item-horizontal__item "
-                        data-autoid="dds--content-item-horizontal__item"
-                      >
-                        <div
-                          className="bx--content-item-horizontal__row"
-                        >
-                          <div
-                            className="bx--content-item-horizontal__col"
-                          >
-                            <p
-                              className="bx--content-item-horizontal__item--eyebrow"
-                              data-autoid="dds--content-item-horizontal__item--eyebrow"
-                            >
-                              Lorem ipsum
-                            </p>
-                            <h3
-                              className="bx--content-item-horizontal__item--heading"
-                              data-autoid="dds--content-item-horizontal__item--heading"
-                            >
-                              Aliquam condimentum
-                            </h3>
-                          </div>
-                          <div
-                            className="bx--content-item-horizontal__col"
-                          >
-                            <div
-                              className="bx--content-item-horizontal__item--copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                }
-                              }
-                              data-autoid="dds--content-item-horizontal__item--copy"
-                            />
-                            <div
-                              className="bx--content-item-horizontal__item--cta"
-                              data-autoid="dds--content-item-horizontal__item--cta"
-                            >
-                              <LinkList
-                                items={
-                                  Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "cta": Object {
-                                        "href": "https://example.com",
-                                      },
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                                style="vertical"
-                              >
-                                <div
-                                  className="bx--link-list"
-                                  data-autoid="dds--link-list"
-                                >
-                                  <ul
-                                    className="bx--link-list__list bx--link-list__list--vertical"
-                                  >
-                                    <li
-                                      className="bx--link-list__list__CTA bx--link-list__list--local"
-                                      key="0"
-                                    >
-                                      <CTA
-                                        ariaRole="listitem"
-                                        copy="Link text"
-                                        cta={
-                                          Object {
-                                            "href": "https://example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        iconInline={true}
-                                        style="text"
-                                        type="local"
-                                      >
-                                        <div>
-                                          <TextCTA
-                                            ariaRole="listitem"
-                                            copy="Link text"
-                                            cta={
-                                              Object {
-                                                "href": "https://example.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            formatCTAcopy={[Function]}
-                                            href=""
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                            openLightBox={[Function]}
-                                            renderLightBox={false}
-                                            style="text"
-                                            type="local"
-                                            videoTitle={
-                                              Array [
-                                                Object {
-                                                  "duration": "",
-                                                  "key": 0,
-                                                  "title": "",
-                                                },
-                                              ]
-                                            }
-                                          >
-                                            <LinkWithIcon
-                                              href="https://example.com"
-                                              iconInline={true}
-                                              iconPlacement="right"
-                                              onClick={[Function]}
-                                              target={null}
-                                            >
-                                              <div
-                                                className="bx--link-with-icon__container"
-                                                data-autoid="dds--link-with-icon"
-                                              >
-                                                <Link
-                                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                  href="https://example.com"
-                                                  onClick={[Function]}
-                                                  size="lg"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <span>
-                                                      Link text
-                                                    </span>
-                                                    <span
-                                                      className="bx--visually-hidden"
-                                                    />
-                                                    <ForwardRef(ArrowRight20)>
-                                                      <Icon
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </LinkWithIcon>
-                                          </TextCTA>
-                                        </div>
-                                      </CTA>
-                                    </li>
-                                  </ul>
-                                </div>
-                              </LinkList>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </ContentItemHorizontal>
-                  </div>
-                  <HorizontalRule>
-                    <hr
-                      className="bx--hr"
-                      data-autoid="dds--hr"
-                    />
-                  </HorizontalRule>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockHorizontal>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block media Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-media--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockMedia/__stories__/ContentBlockMedia.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block media: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockMedia": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "style": "card",
-                  "type": "local",
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "items": Array [
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                ],
-                "mediaData": Object {
-                  "image": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "video": Object {
-                    "showCaption": true,
-                    "videoId": "1_9h94wo6b",
-                  },
-                },
-                "mediaType": Object {},
-                "types": Object {
-                  "image": "image",
-                  "none": "none",
-                  "video": "video",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <ContentBlockMedia
-            border={false}
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-            cta={
-              Object {
-                "card": Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                    "type": "external",
-                  },
-                  "heading": "Consectetur adipisicing elit",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                  },
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "style": "feature",
-              }
-            }
-            heading="Curabitur malesuada varius mi eu posuere"
-            items={
-              Array [
-                Object {
-                  "cta": Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "card",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                  ],
-                  "mediaData": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "mediaType": "image",
-                },
-                Object {
-                  "cta": Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "card",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                  ],
-                  "mediaData": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "mediaType": "image",
-                },
-              ]
-            }
-          >
-            <div
-              className="bx--content-block-media"
-              data-autoid="dds--content-block-media"
-            >
-              <ContentBlock
-                border={false}
-                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                cta={
-                  Object {
-                    "card": Object {
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                        "type": "external",
-                      },
-                      "heading": "Consectetur adipisicing elit",
-                      "image": Object {
-                        "alt": "Image alt text",
-                        "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                      },
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "feature",
-                  }
-                }
-                heading="Curabitur malesuada varius mi eu posuere"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Curabitur malesuada varius mi eu posuere
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <ContentGroupSimple
-                      cta={
-                        Object {
-                          "cta": Object {
-                            "href": "https://www.example.com",
-                          },
-                          "heading": "Lorem ipsum dolor sit amet",
-                          "style": "card",
-                          "type": "local",
-                        }
-                      }
-                      heading="Lorem ipsum dolor sit amet"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                        ]
-                      }
-                      key="0"
-                      mediaData={
-                        Object {
-                          "heading": "Lorem ipsum dolor sit amet.",
-                          "image": Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                            "sources": Array [
-                              Object {
-                                "breakpoint": 320,
-                                "src": "fpo--16x9--320x180--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 400,
-                                "src": "fpo--16x9--480x270--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 672,
-                                "src": "fpo--16x9--720x405--004.jpg",
-                              },
-                            ],
-                          },
-                        }
-                      }
-                      mediaType="image"
-                    >
-                      <div
-                        className="bx--content-group-simple"
-                        data-autoid="dds--content-group-simple"
-                      >
-                        <ContentGroup
-                          cta={
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Lorem ipsum dolor sit amet",
-                              "style": "card",
-                              "type": "local",
-                            }
-                          }
-                          heading="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <div
-                                data-autoid="dds--content-group-simple__media"
-                              >
-                                <ImageWithCaption
-                                  copy=""
-                                  heading="Lorem ipsum dolor sit amet."
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                      "sources": Array [
-                                        Object {
-                                          "breakpoint": 320,
-                                          "src": "fpo--16x9--320x180--004.jpg",
-                                        },
-                                        Object {
-                                          "breakpoint": 400,
-                                          "src": "fpo--16x9--480x270--004.jpg",
-                                        },
-                                        Object {
-                                          "breakpoint": 672,
-                                          "src": "fpo--16x9--720x405--004.jpg",
-                                        },
-                                      ],
-                                    }
-                                  }
-                                  lightbox={false}
-                                >
-                                  <div
-                                    className="bx--image-with-caption"
-                                    data-autoid="dds--image-with-caption"
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      defaultSrc="fpo--16x9--720x405--004.jpg"
-                                      sources={
-                                        Array [
-                                          Object {
-                                            "breakpoint": 320,
-                                            "src": "fpo--16x9--320x180--004.jpg",
-                                          },
-                                          Object {
-                                            "breakpoint": 400,
-                                            "src": "fpo--16x9--480x270--004.jpg",
-                                          },
-                                          Object {
-                                            "breakpoint": 672,
-                                            "src": "fpo--16x9--720x405--004.jpg",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <source
-                                            key="0"
-                                            media="(min-width: 672px)"
-                                            srcSet="fpo--16x9--720x405--004.jpg"
-                                          />
-                                          <source
-                                            key="1"
-                                            media="(min-width: 400px)"
-                                            srcSet="fpo--16x9--480x270--004.jpg"
-                                          />
-                                          <source
-                                            key="2"
-                                            media="(min-width: 320px)"
-                                            srcSet="fpo--16x9--320x180--004.jpg"
-                                          />
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img"
-                                            src="fpo--16x9--720x405--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <p
-                                      className="bx--image__caption"
-                                      data-autoid="dds--image__caption"
-                                    >
-                                      Lorem ipsum dolor sit amet.
-                                    </p>
-                                  </div>
-                                </ImageWithCaption>
-                              </div>
-                              <ContentItem
-                                copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                heading="Lorem ipsum dolor sit amet."
-                                key="0"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                              <ContentItem
-                                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                                heading="Lorem ipsum dolor sit amet."
-                                key="1"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                              <ContentItem
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                heading="Lorem ipsum dolor sit amet."
-                                key="2"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                            </div>
-                            <div
-                              className="bx--content-group__cta-row"
-                              data-autoid="dds--content-group__cta"
-                            >
-                              <CTA
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                  }
-                                }
-                                customClassName="bx--content-group__cta"
-                                customVideoTitle={null}
-                                heading="Lorem ipsum dolor sit amet"
-                                href=""
-                                style="card"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-group__cta"
-                                >
-                                  <CardCTA
-                                    copy=""
-                                    cta={
-                                      Object {
-                                        "href": "https://www.example.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={false}
-                                    heading="Lorem ipsum dolor sit amet"
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "copy": "",
-                                          "cta": Object {
-                                            "href": "https://www.example.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          },
-                                          "customVideoTitle": null,
-                                          "heading": "Lorem ipsum dolor sit amet",
-                                          "href": "https://www.example.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": null,
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        copy=""
-                                        cta={
-                                          Object {
-                                            "href": "https://www.example.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        heading="Lorem ipsum dolor sit amet"
-                                        href="https://www.example.com"
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <Tile
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          light={false}
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://www.example.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <h3
-                                                  className="bx--card__heading"
-                                                >
-                                                  Lorem ipsum dolor sit amet
-                                                </h3>
-                                                <Link
-                                                  aria-label="Lorem ipsum dolor sit amet"
-                                                  className="bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    aria-label="Lorem ipsum dolor sit amet"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://www.example.com"
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <ForwardRef(ArrowRight20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                      </div>
-                    </ContentGroupSimple>
-                    <ContentGroupSimple
-                      cta={
-                        Object {
-                          "cta": Object {
-                            "href": "https://www.example.com",
-                          },
-                          "heading": "Lorem ipsum dolor sit amet",
-                          "style": "card",
-                          "type": "local",
-                        }
-                      }
-                      heading="Lorem ipsum dolor sit amet"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                        ]
-                      }
-                      key="1"
-                      mediaData={
-                        Object {
-                          "heading": "Lorem ipsum dolor sit amet.",
-                          "image": Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                            "sources": Array [
-                              Object {
-                                "breakpoint": 320,
-                                "src": "fpo--16x9--320x180--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 400,
-                                "src": "fpo--16x9--480x270--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 672,
-                                "src": "fpo--16x9--720x405--004.jpg",
-                              },
-                            ],
-                          },
-                        }
-                      }
-                      mediaType="image"
-                    >
-                      <div
-                        className="bx--content-group-simple"
-                        data-autoid="dds--content-group-simple"
-                      >
-                        <ContentGroup
-                          cta={
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Lorem ipsum dolor sit amet",
-                              "style": "card",
-                              "type": "local",
-                            }
-                          }
-                          heading="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <div
-                                data-autoid="dds--content-group-simple__media"
-                              >
-                                <ImageWithCaption
-                                  copy=""
-                                  heading="Lorem ipsum dolor sit amet."
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                      "sources": Array [
-                                        Object {
-                                          "breakpoint": 320,
-                                          "src": "fpo--16x9--320x180--004.jpg",
-                                        },
-                                        Object {
-                                          "breakpoint": 400,
-                                          "src": "fpo--16x9--480x270--004.jpg",
-                                        },
-                                        Object {
-                                          "breakpoint": 672,
-                                          "src": "fpo--16x9--720x405--004.jpg",
-                                        },
-                                      ],
-                                    }
-                                  }
-                                  lightbox={false}
-                                >
-                                  <div
-                                    className="bx--image-with-caption"
-                                    data-autoid="dds--image-with-caption"
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      defaultSrc="fpo--16x9--720x405--004.jpg"
-                                      sources={
-                                        Array [
-                                          Object {
-                                            "breakpoint": 320,
-                                            "src": "fpo--16x9--320x180--004.jpg",
-                                          },
-                                          Object {
-                                            "breakpoint": 400,
-                                            "src": "fpo--16x9--480x270--004.jpg",
-                                          },
-                                          Object {
-                                            "breakpoint": 672,
-                                            "src": "fpo--16x9--720x405--004.jpg",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <source
-                                            key="0"
-                                            media="(min-width: 672px)"
-                                            srcSet="fpo--16x9--720x405--004.jpg"
-                                          />
-                                          <source
-                                            key="1"
-                                            media="(min-width: 400px)"
-                                            srcSet="fpo--16x9--480x270--004.jpg"
-                                          />
-                                          <source
-                                            key="2"
-                                            media="(min-width: 320px)"
-                                            srcSet="fpo--16x9--320x180--004.jpg"
-                                          />
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img"
-                                            src="fpo--16x9--720x405--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <p
-                                      className="bx--image__caption"
-                                      data-autoid="dds--image__caption"
-                                    >
-                                      Lorem ipsum dolor sit amet.
-                                    </p>
-                                  </div>
-                                </ImageWithCaption>
-                              </div>
-                              <ContentItem
-                                copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                heading="Lorem ipsum dolor sit amet."
-                                key="0"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                              <ContentItem
-                                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                                heading="Lorem ipsum dolor sit amet."
-                                key="1"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                              <ContentItem
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                heading="Lorem ipsum dolor sit amet."
-                                key="2"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                            </div>
-                            <div
-                              className="bx--content-group__cta-row"
-                              data-autoid="dds--content-group__cta"
-                            >
-                              <CTA
-                                copy=""
-                                cta={
-                                  Object {
-                                    "href": "https://www.example.com",
-                                  }
-                                }
-                                customClassName="bx--content-group__cta"
-                                customVideoTitle={null}
-                                heading="Lorem ipsum dolor sit amet"
-                                href=""
-                                style="card"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-group__cta"
-                                >
-                                  <CardCTA
-                                    copy=""
-                                    cta={
-                                      Object {
-                                        "href": "https://www.example.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={false}
-                                    heading="Lorem ipsum dolor sit amet"
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "copy": "",
-                                          "cta": Object {
-                                            "href": "https://www.example.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          },
-                                          "customVideoTitle": null,
-                                          "heading": "Lorem ipsum dolor sit amet",
-                                          "href": "https://www.example.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": null,
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        copy=""
-                                        cta={
-                                          Object {
-                                            "href": "https://www.example.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        heading="Lorem ipsum dolor sit amet"
-                                        href="https://www.example.com"
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <Tile
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://www.example.com"
-                                          light={false}
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://www.example.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <h3
-                                                  className="bx--card__heading"
-                                                >
-                                                  Lorem ipsum dolor sit amet
-                                                </h3>
-                                                <Link
-                                                  aria-label="Lorem ipsum dolor sit amet"
-                                                  className="bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    aria-label="Lorem ipsum dolor sit amet"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://www.example.com"
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <ForwardRef(ArrowRight20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                      </div>
-                    </ContentGroupSimple>
-                  </div>
-                  <CTA
-                    card={
-                      Object {
-                        "cta": Object {
-                          "href": "https://www.example.com",
-                          "type": "external",
-                        },
-                        "heading": "Consectetur adipisicing elit",
-                        "image": Object {
-                          "alt": "Image alt text",
-                          "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                        },
-                      }
-                    }
-                    copy=""
-                    customClassName="bx--content-block__cta"
-                    customVideoTitle={null}
-                    heading="Lorem ipsum dolor sit amet"
-                    href=""
-                    style="feature"
-                    type="default"
-                  >
-                    <div
-                      className="bx--content-block__cta"
-                    >
-                      <FeatureCTA
-                        card={
-                          Object {
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "type": "external",
-                            },
-                            "heading": "Consectetur adipisicing elit",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                            },
-                          }
-                        }
-                        copy=""
-                        customVideoTitle={null}
-                        formatCTAcopy={[Function]}
-                        heading="Lorem ipsum dolor sit amet"
-                        href=""
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="feature"
-                        type="default"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <FeatureCard
-                          card={
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "external",
-                              },
-                              "heading": "Consectetur adipisicing elit",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                              },
-                              "type": "link",
-                            }
-                          }
-                          size="medium"
-                        >
-                          <div
-                            className="bx--feature-card"
-                            data-autoid="dds--feature-card"
-                          >
-                            <Card
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "external",
-                                }
-                              }
-                              customClassName="bx--feature-card__card"
-                              heading="Consectetur adipisicing elit"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                                }
-                              }
-                              type="link"
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card__card"
-                                data-autoid="dds--card"
-                                light={false}
-                                type="link"
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card__card"
-                                  data-autoid="dds--card"
-                                  type="link"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--003.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--003.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Consectetur adipisicing elit
-                                      </h3>
-                                      <Link
-                                        aria-label="Consectetur adipisicing elit - This link opens in a new tab"
-                                        className="bx--card__footer"
-                                        href="https://www.example.com"
-                                        target="_blank"
-                                      >
-                                        <a
-                                          aria-label="Consectetur adipisicing elit - This link opens in a new tab"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.example.com"
-                                          rel="noopener"
-                                          target="_blank"
-                                        >
-                                          <ForwardRef(Launch20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                />
-                                                <path
-                                                  d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Launch20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                      </FeatureCTA>
-                    </div>
-                  </CTA>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockMedia>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block media With link list 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-media--with-link-list",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockMedia/__stories__/ContentBlockMedia.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block media: With link list",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockMedia": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "style": "card",
-                  "type": "local",
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "items": Array [
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                ],
-                "mediaData": Object {
-                  "image": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "video": Object {
-                    "showCaption": true,
-                    "videoId": "1_9h94wo6b",
-                  },
-                },
-                "mediaType": Object {},
-                "types": Object {
-                  "image": "image",
-                  "none": "none",
-                  "video": "video",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <ContentBlockMedia
-            aside={
-              Object {
-                "items": <LinkList
-                  heading="Tutorials"
-                  items={
-                    Array [
-                      Object {
-                        "copy": "Containerization A Complete Guide",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "Why should you use microservices and containers",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "external",
-                      },
-                    ]
-                  }
-                  style="card"
-                  totalLinks={2}
-                />,
-              }
-            }
-            border={false}
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-            cta={
-              Object {
-                "card": Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                    "type": "external",
-                  },
-                  "heading": "Consectetur adipisicing elit",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                  },
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "style": "feature",
-              }
-            }
-            heading="Curabitur malesuada varius mi eu posuere"
-            items={
-              Array [
-                Object {
-                  "cta": Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "card",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                  ],
-                  "mediaData": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "mediaType": "image",
-                },
-                Object {
-                  "cta": Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "card",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                  ],
-                  "mediaData": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "mediaType": "image",
-                },
-              ]
-            }
-          >
-            <div
-              className="bx--content-block-media"
-              data-autoid="dds--content-block-media"
-            >
-              <ContentBlock
-                aside={
-                  Object {
-                    "items": <LinkList
-                      heading="Tutorials"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Containerization A Complete Guide",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Why should you use microservices and containers",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "external",
-                          },
-                        ]
-                      }
-                      style="card"
-                      totalLinks={2}
-                    />,
-                  }
-                }
-                border={false}
-                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                cta={
-                  Object {
-                    "card": Object {
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                        "type": "external",
-                      },
-                      "heading": "Consectetur adipisicing elit",
-                      "image": Object {
-                        "alt": "Image alt text",
-                        "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                      },
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "feature",
-                  }
-                }
-                heading="Curabitur malesuada varius mi eu posuere"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Curabitur malesuada varius mi eu posuere
-                  </h2>
-                  <div
-                    className="bx--content-layout bx--content-layout--with-complementary"
-                  >
-                    <div
-                      className="bx--content-layout__body"
-                    >
-                      <div
-                        className="bx--content-block__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                          }
-                        }
-                      />
-                      <div
-                        className="bx--content-block__children"
-                        data-autoid="dds--content-block__children"
-                      >
-                        <ContentGroupSimple
-                          cta={
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Lorem ipsum dolor sit amet",
-                              "style": "card",
-                              "type": "local",
-                            }
-                          }
-                          heading="Lorem ipsum dolor sit amet"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                            ]
-                          }
-                          key="0"
-                          mediaData={
-                            Object {
-                              "heading": "Lorem ipsum dolor sit amet.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                "sources": Array [
-                                  Object {
-                                    "breakpoint": 320,
-                                    "src": "fpo--16x9--320x180--004.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 400,
-                                    "src": "fpo--16x9--480x270--004.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 672,
-                                    "src": "fpo--16x9--720x405--004.jpg",
-                                  },
-                                ],
-                              },
-                            }
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-group-simple"
-                            data-autoid="dds--content-group-simple"
-                          >
-                            <ContentGroup
-                              cta={
-                                Object {
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                  },
-                                  "heading": "Lorem ipsum dolor sit amet",
-                                  "style": "card",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Lorem ipsum dolor sit amet"
-                            >
-                              <div
-                                className="bx--content-group"
-                                data-autoid="dds--content-group"
-                              >
-                                <h3
-                                  className="bx--content-group__title"
-                                  data-autoid="dds--content-group__title"
-                                >
-                                  Lorem ipsum dolor sit amet
-                                </h3>
-                                <div
-                                  className="bx--content-group__col bx--content-group__children"
-                                  data-autoid="dds--content-group__children"
-                                >
-                                  <div
-                                    data-autoid="dds--content-group-simple__media"
-                                  >
-                                    <ImageWithCaption
-                                      copy=""
-                                      heading="Lorem ipsum dolor sit amet."
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                          "sources": Array [
-                                            Object {
-                                              "breakpoint": 320,
-                                              "src": "fpo--16x9--320x180--004.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 400,
-                                              "src": "fpo--16x9--480x270--004.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 672,
-                                              "src": "fpo--16x9--720x405--004.jpg",
-                                            },
-                                          ],
-                                        }
-                                      }
-                                      lightbox={false}
-                                    >
-                                      <div
-                                        className="bx--image-with-caption"
-                                        data-autoid="dds--image-with-caption"
-                                      >
-                                        <Image
-                                          alt="Image alt text"
-                                          defaultSrc="fpo--16x9--720x405--004.jpg"
-                                          sources={
-                                            Array [
-                                              Object {
-                                                "breakpoint": 320,
-                                                "src": "fpo--16x9--320x180--004.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 400,
-                                                "src": "fpo--16x9--480x270--004.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 672,
-                                                "src": "fpo--16x9--720x405--004.jpg",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <div
-                                            className="bx--image"
-                                            data-autoid="dds--image__longdescription"
-                                          >
-                                            <picture>
-                                              <source
-                                                key="0"
-                                                media="(min-width: 672px)"
-                                                srcSet="fpo--16x9--720x405--004.jpg"
-                                              />
-                                              <source
-                                                key="1"
-                                                media="(min-width: 400px)"
-                                                srcSet="fpo--16x9--480x270--004.jpg"
-                                              />
-                                              <source
-                                                key="2"
-                                                media="(min-width: 320px)"
-                                                srcSet="fpo--16x9--320x180--004.jpg"
-                                              />
-                                              <img
-                                                alt="Image alt text"
-                                                className="bx--image__img"
-                                                src="fpo--16x9--720x405--004.jpg"
-                                              />
-                                            </picture>
-                                          </div>
-                                        </Image>
-                                        <p
-                                          className="bx--image__caption"
-                                          data-autoid="dds--image__caption"
-                                        >
-                                          Lorem ipsum dolor sit amet.
-                                        </p>
-                                      </div>
-                                    </ImageWithCaption>
-                                  </div>
-                                  <ContentItem
-                                    copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <ContentItem
-                                    copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <ContentItem
-                                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                </div>
-                                <div
-                                  className="bx--content-group__cta-row"
-                                  data-autoid="dds--content-group__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    cta={
-                                      Object {
-                                        "href": "https://www.example.com",
-                                      }
-                                    }
-                                    customClassName="bx--content-group__cta"
-                                    customVideoTitle={null}
-                                    heading="Lorem ipsum dolor sit amet"
-                                    href=""
-                                    style="card"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--content-group__cta"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={
-                                          Object {
-                                            "href": "https://www.example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={false}
-                                        heading="Lorem ipsum dolor sit amet"
-                                        href=""
-                                        media={null}
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "type": "local",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "Lorem ipsum dolor sit amet",
-                                              "href": "https://www.example.com",
-                                              "media": null,
-                                              "size": undefined,
-                                              "target": null,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "type": "local",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            heading="Lorem ipsum dolor sit amet"
-                                            href="https://www.example.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href="https://www.example.com"
-                                              light={false}
-                                              media={null}
-                                              target={null}
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href="https://www.example.com"
-                                                media={null}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <h3
-                                                      className="bx--card__heading"
-                                                    >
-                                                      Lorem ipsum dolor sit amet
-                                                    </h3>
-                                                    <Link
-                                                      aria-label="Lorem ipsum dolor sit amet"
-                                                      className="bx--card__footer"
-                                                      href="https://www.example.com"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label="Lorem ipsum dolor sit amet"
-                                                        className="bx--link bx--card__footer"
-                                                        href="https://www.example.com"
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(ArrowRight20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentGroup>
-                          </div>
-                        </ContentGroupSimple>
-                        <ContentGroupSimple
-                          cta={
-                            Object {
-                              "cta": Object {
-                                "href": "https://www.example.com",
-                              },
-                              "heading": "Lorem ipsum dolor sit amet",
-                              "style": "card",
-                              "type": "local",
-                            }
-                          }
-                          heading="Lorem ipsum dolor sit amet"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                            ]
-                          }
-                          key="1"
-                          mediaData={
-                            Object {
-                              "heading": "Lorem ipsum dolor sit amet.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                "sources": Array [
-                                  Object {
-                                    "breakpoint": 320,
-                                    "src": "fpo--16x9--320x180--004.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 400,
-                                    "src": "fpo--16x9--480x270--004.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 672,
-                                    "src": "fpo--16x9--720x405--004.jpg",
-                                  },
-                                ],
-                              },
-                            }
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-group-simple"
-                            data-autoid="dds--content-group-simple"
-                          >
-                            <ContentGroup
-                              cta={
-                                Object {
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                  },
-                                  "heading": "Lorem ipsum dolor sit amet",
-                                  "style": "card",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Lorem ipsum dolor sit amet"
-                            >
-                              <div
-                                className="bx--content-group"
-                                data-autoid="dds--content-group"
-                              >
-                                <h3
-                                  className="bx--content-group__title"
-                                  data-autoid="dds--content-group__title"
-                                >
-                                  Lorem ipsum dolor sit amet
-                                </h3>
-                                <div
-                                  className="bx--content-group__col bx--content-group__children"
-                                  data-autoid="dds--content-group__children"
-                                >
-                                  <div
-                                    data-autoid="dds--content-group-simple__media"
-                                  >
-                                    <ImageWithCaption
-                                      copy=""
-                                      heading="Lorem ipsum dolor sit amet."
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                          "sources": Array [
-                                            Object {
-                                              "breakpoint": 320,
-                                              "src": "fpo--16x9--320x180--004.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 400,
-                                              "src": "fpo--16x9--480x270--004.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 672,
-                                              "src": "fpo--16x9--720x405--004.jpg",
-                                            },
-                                          ],
-                                        }
-                                      }
-                                      lightbox={false}
-                                    >
-                                      <div
-                                        className="bx--image-with-caption"
-                                        data-autoid="dds--image-with-caption"
-                                      >
-                                        <Image
-                                          alt="Image alt text"
-                                          defaultSrc="fpo--16x9--720x405--004.jpg"
-                                          sources={
-                                            Array [
-                                              Object {
-                                                "breakpoint": 320,
-                                                "src": "fpo--16x9--320x180--004.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 400,
-                                                "src": "fpo--16x9--480x270--004.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 672,
-                                                "src": "fpo--16x9--720x405--004.jpg",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <div
-                                            className="bx--image"
-                                            data-autoid="dds--image__longdescription"
-                                          >
-                                            <picture>
-                                              <source
-                                                key="0"
-                                                media="(min-width: 672px)"
-                                                srcSet="fpo--16x9--720x405--004.jpg"
-                                              />
-                                              <source
-                                                key="1"
-                                                media="(min-width: 400px)"
-                                                srcSet="fpo--16x9--480x270--004.jpg"
-                                              />
-                                              <source
-                                                key="2"
-                                                media="(min-width: 320px)"
-                                                srcSet="fpo--16x9--320x180--004.jpg"
-                                              />
-                                              <img
-                                                alt="Image alt text"
-                                                className="bx--image__img"
-                                                src="fpo--16x9--720x405--004.jpg"
-                                              />
-                                            </picture>
-                                          </div>
-                                        </Image>
-                                        <p
-                                          className="bx--image__caption"
-                                          data-autoid="dds--image__caption"
-                                        >
-                                          Lorem ipsum dolor sit amet.
-                                        </p>
-                                      </div>
-                                    </ImageWithCaption>
-                                  </div>
-                                  <ContentItem
-                                    copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <ContentItem
-                                    copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <ContentItem
-                                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                </div>
-                                <div
-                                  className="bx--content-group__cta-row"
-                                  data-autoid="dds--content-group__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    cta={
-                                      Object {
-                                        "href": "https://www.example.com",
-                                      }
-                                    }
-                                    customClassName="bx--content-group__cta"
-                                    customVideoTitle={null}
-                                    heading="Lorem ipsum dolor sit amet"
-                                    href=""
-                                    style="card"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--content-group__cta"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={
-                                          Object {
-                                            "href": "https://www.example.com",
-                                          }
-                                        }
-                                        customVideoTitle={null}
-                                        disableImage={false}
-                                        heading="Lorem ipsum dolor sit amet"
-                                        href=""
-                                        media={null}
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "type": "local",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "Lorem ipsum dolor sit amet",
-                                              "href": "https://www.example.com",
-                                              "media": null,
-                                              "size": undefined,
-                                              "target": null,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "type": "local",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            heading="Lorem ipsum dolor sit amet"
-                                            href="https://www.example.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href="https://www.example.com"
-                                              light={false}
-                                              media={null}
-                                              target={null}
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href="https://www.example.com"
-                                                media={null}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <h3
-                                                      className="bx--card__heading"
-                                                    >
-                                                      Lorem ipsum dolor sit amet
-                                                    </h3>
-                                                    <Link
-                                                      aria-label="Lorem ipsum dolor sit amet"
-                                                      className="bx--card__footer"
-                                                      href="https://www.example.com"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label="Lorem ipsum dolor sit amet"
-                                                        className="bx--link bx--card__footer"
-                                                        href="https://www.example.com"
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(ArrowRight20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentGroup>
-                          </div>
-                        </ContentGroupSimple>
-                      </div>
-                      <CTA
-                        card={
-                          Object {
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "type": "external",
-                            },
-                            "heading": "Consectetur adipisicing elit",
-                            "image": Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                            },
-                          }
-                        }
-                        copy=""
-                        customClassName="bx--content-block__cta"
-                        customVideoTitle={null}
-                        heading="Lorem ipsum dolor sit amet"
-                        href=""
-                        style="feature"
-                        type="default"
-                      >
-                        <div
-                          className="bx--content-block__cta"
-                        >
-                          <FeatureCTA
-                            card={
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                  "type": "external",
-                                },
-                                "heading": "Consectetur adipisicing elit",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                                },
-                              }
-                            }
-                            copy=""
-                            customVideoTitle={null}
-                            formatCTAcopy={[Function]}
-                            heading="Lorem ipsum dolor sit amet"
-                            href=""
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="feature"
-                            type="default"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <FeatureCard
-                              card={
-                                Object {
-                                  "cta": Object {
-                                    "href": "https://www.example.com",
-                                    "icon": Object {
-                                      "src": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                    },
-                                    "type": "external",
-                                  },
-                                  "heading": "Consectetur adipisicing elit",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                                  },
-                                  "type": "link",
-                                }
-                              }
-                              size="medium"
-                            >
-                              <div
-                                className="bx--feature-card"
-                                data-autoid="dds--feature-card"
-                              >
-                                <Card
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "external",
-                                    }
-                                  }
-                                  customClassName="bx--feature-card__card"
-                                  heading="Consectetur adipisicing elit"
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--1x1--720x720--003.jpg",
-                                    }
-                                  }
-                                  type="link"
-                                >
-                                  <Tile
-                                    className="bx--card bx--feature-card__card"
-                                    data-autoid="dds--card"
-                                    light={false}
-                                    type="link"
-                                  >
-                                    <div
-                                      className="bx--tile bx--card bx--feature-card__card"
-                                      data-autoid="dds--card"
-                                      type="link"
-                                    >
-                                      <Image
-                                        alt="Image alt text"
-                                        classname="bx--card__img"
-                                        defaultSrc="fpo--1x1--720x720--003.jpg"
-                                      >
-                                        <div
-                                          className="bx--image"
-                                          data-autoid="dds--image__longdescription"
-                                        >
-                                          <picture>
-                                            <img
-                                              alt="Image alt text"
-                                              className="bx--image__img bx--card__img"
-                                              src="fpo--1x1--720x720--003.jpg"
-                                            />
-                                          </picture>
-                                        </div>
-                                      </Image>
-                                      <div
-                                        className="bx--card__wrapper"
-                                      >
-                                        <div
-                                          className="bx--card__content"
-                                        >
-                                          <h3
-                                            className="bx--card__heading"
-                                          >
-                                            Consectetur adipisicing elit
-                                          </h3>
-                                          <Link
-                                            aria-label="Consectetur adipisicing elit - This link opens in a new tab"
-                                            className="bx--card__footer"
-                                            href="https://www.example.com"
-                                            target="_blank"
-                                          >
-                                            <a
-                                              aria-label="Consectetur adipisicing elit - This link opens in a new tab"
-                                              className="bx--link bx--card__footer"
-                                              href="https://www.example.com"
-                                              rel="noopener"
-                                              target="_blank"
-                                            >
-                                              <ForwardRef(Launch20)
-                                                className="bx--card__cta"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                              >
-                                                <Icon
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--card__cta"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                    />
-                                                    <path
-                                                      d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(Launch20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </Tile>
-                                </Card>
-                              </div>
-                            </FeatureCard>
-                          </FeatureCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                    <aside
-                      className="bx--content-layout__aside"
-                    >
-                      <LinkList
-                        heading="Tutorials"
-                        items={
-                          Array [
-                            Object {
-                              "copy": "Containerization A Complete Guide",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "local",
-                            },
-                            Object {
-                              "copy": "Why should you use microservices and containers",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "external",
-                            },
-                          ]
-                        }
-                        style="card"
-                        totalLinks={2}
-                      >
-                        <div
-                          className="bx--link-list"
-                          data-autoid="dds--link-list"
-                        >
-                          <h4
-                            className="bx--link-list__heading"
-                          >
-                            Tutorials
-                          </h4>
-                          <ul
-                            className="bx--link-list__list bx--link-list__list--card"
-                          >
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--local"
-                              key="0"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Containerization A Complete Guide"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="local"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Containerization A Complete Guide"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Containerization A Complete Guide",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": null,
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Containerization A Complete Guide"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Containerization A Complete Guide</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Containerization A Complete Guide"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    aria-label="Containerization A Complete Guide"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <ForwardRef(ArrowRight20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--external"
-                              key="1"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Why should you use microservices and containers"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="external"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Why should you use microservices and containers"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="external"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Why should you use microservices and containers",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": "_blank",
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Why should you use microservices and containers"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target="_blank"
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target="_blank"
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target="_blank"
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Why should you use microservices and containers</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target="_blank"
-                                                >
-                                                  <a
-                                                    aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel="noopener"
-                                                    target="_blank"
-                                                  >
-                                                    <ForwardRef(Launch20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 32 32"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                          />
-                                                          <path
-                                                            d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(Launch20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                          </ul>
-                        </div>
-                      </LinkList>
-                    </aside>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockMedia>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block mixed Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-mixed--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockMixed/__stories__/ContentBlockMixed.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block mixed: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockMixed": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "style": "card",
-                  "type": "local",
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "items": Array [
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                ],
-                "mediaData": Object {
-                  "image": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "video": Object {
-                    "showCaption": true,
-                    "videoId": "1_9h94wo6b",
-                  },
-                },
-                "mediaType": Object {},
-                "type": "ContentGroupSimple",
-                "types": Object {
-                  "image": "image",
-                  "none": "none",
-                  "video": "video",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <ContentBlockMixed
-            border={false}
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-    Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-    nulla quis, *consequat* libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Lorem ipsum dolor sit amet"
-            items={
-              Array [
-                Object {
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                    },
-                  ],
-                  "type": "ContentGroupCards",
-                },
-                Object {
-                  "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                      "cta": Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.ibm.com",
-                        "type": "local",
-                      },
-                      "heading": "Aliquam condimentum interdum",
-                      "pictogram": Object {
-                        "aria-label": "Desktop",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                      "cta": Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.ibm.com",
-                        "type": "local",
-                      },
-                      "heading": "Aliquam condimentum interdum",
-                      "pictogram": Object {
-                        "aria-label": "Pattern",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                      "cta": Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.ibm.com",
-                        "type": "local",
-                      },
-                      "heading": "Aliquam condimentum interdum",
-                      "pictogram": Object {
-                        "aria-label": "Touch",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    },
-                  ],
-                  "type": "ContentGroupPictograms",
-                },
-                Object {
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                  ],
-                  "mediaData": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "mediaType": "image",
-                  "type": "ContentGroupSimple",
-                },
-              ]
-            }
-          >
-            <div
-              className="bx--content-block-mixed"
-              data-autoid="dds--content-block-mixed"
-            >
-              <ContentBlock
-                border={false}
-                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-    Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-    nulla quis, *consequat* libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Lorem ipsum dolor sit amet"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Lorem ipsum dolor sit amet
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <ContentGroupCards
-                      heading="Lorem ipsum dolor sit amet"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                            },
-                            "heading": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                            },
-                            "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                            },
-                            "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                            },
-                            "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                          },
-                        ]
-                      }
-                      key="0"
-                      type="ContentGroupCards"
-                    >
-                      <section
-                        className="bx--content-group-cards"
-                        data-autoid="dds--content-group-cards"
-                      >
-                        <ContentGroup
-                          heading="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <div
-                                className="bx--content-group-cards-group bx--grid--condensed"
-                                data-autoid="dds--content-group-cards-group"
-                              >
-                                <div
-                                  className="bx--content-group-cards__row"
-                                >
-                                  <div
-                                    className="bx--content-group-cards-item__col"
-                                    data-autoid="dds--content-group-cards-item"
-                                    key="0"
-                                    role="region"
-                                  >
-                                    <Card
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                        }
-                                      }
-                                      customClassName="bx--content-group-cards-item"
-                                      heading="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                    >
-                                      <Tile
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                        className="bx--card bx--content-group-cards-item"
-                                        data-autoid="dds--card"
-                                        light={false}
-                                      >
-                                        <div
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                          className="bx--tile bx--card bx--content-group-cards-item"
-                                          data-autoid="dds--card"
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </div>
-                                  <div
-                                    className="bx--content-group-cards-item__col"
-                                    data-autoid="dds--content-group-cards-item"
-                                    key="1"
-                                    role="region"
-                                  >
-                                    <Card
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                        }
-                                      }
-                                      customClassName="bx--content-group-cards-item"
-                                      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                    >
-                                      <Tile
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        className="bx--card bx--content-group-cards-item"
-                                        data-autoid="dds--card"
-                                        light={false}
-                                      >
-                                        <div
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          className="bx--tile bx--card bx--content-group-cards-item"
-                                          data-autoid="dds--card"
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </div>
-                                  <div
-                                    className="bx--content-group-cards-item__col"
-                                    data-autoid="dds--content-group-cards-item"
-                                    key="2"
-                                    role="region"
-                                  >
-                                    <Card
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      copy="Lorem ipsum dolor sit amet"
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                        }
-                                      }
-                                      customClassName="bx--content-group-cards-item"
-                                      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                    >
-                                      <Tile
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        className="bx--card bx--content-group-cards-item"
-                                        data-autoid="dds--card"
-                                        light={false}
-                                      >
-                                        <div
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          className="bx--tile bx--card bx--content-group-cards-item"
-                                          data-autoid="dds--card"
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </div>
-                                  <div
-                                    className="bx--content-group-cards-item__col"
-                                    data-autoid="dds--content-group-cards-item"
-                                    key="3"
-                                    role="region"
-                                  >
-                                    <Card
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
-                                      cta={
-                                        Object {
-                                          "href": "https://www.example.com",
-                                          "icon": Object {
-                                            "src": Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            },
-                                          },
-                                        }
-                                      }
-                                      customClassName="bx--content-group-cards-item"
-                                      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                    >
-                                      <Tile
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        className="bx--card bx--content-group-cards-item"
-                                        data-autoid="dds--card"
-                                        light={false}
-                                      >
-                                        <div
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          className="bx--tile bx--card bx--content-group-cards-item"
-                                          data-autoid="dds--card"
-                                        >
-                                          <div
-                                            className="bx--card__wrapper"
-                                          >
-                                            <div
-                                              className="bx--card__content"
-                                            >
-                                              <h3
-                                                className="bx--card__heading"
-                                              >
-                                                Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                              </h3>
-                                              <div
-                                                className="bx--card__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> ",
-                                                  }
-                                                }
-                                              />
-                                              <Link
-                                                aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                className="bx--card__footer"
-                                                href="https://www.example.com"
-                                                target={null}
-                                              >
-                                                <a
-                                                  aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                  className="bx--link bx--card__footer"
-                                                  href="https://www.example.com"
-                                                  rel={null}
-                                                  target={null}
-                                                >
-                                                  <ForwardRef(ArrowRight20)
-                                                    className="bx--card__cta"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                  >
-                                                    <Icon
-                                                      className="bx--card__cta"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </div>
-                                        </div>
-                                      </Tile>
-                                    </Card>
-                                  </div>
-                                </div>
-                              </div>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                      </section>
-                    </ContentGroupCards>
-                    <ContentGroupPictograms
-                      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                            "cta": Object {
-                              "copy": "Lorem ipsum dolor",
-                              "href": "https://www.ibm.com",
-                              "type": "local",
-                            },
-                            "heading": "Aliquam condimentum interdum",
-                            "pictogram": Object {
-                              "aria-label": "Desktop",
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                            "cta": Object {
-                              "copy": "Lorem ipsum dolor",
-                              "href": "https://www.ibm.com",
-                              "type": "local",
-                            },
-                            "heading": "Aliquam condimentum interdum",
-                            "pictogram": Object {
-                              "aria-label": "Pattern",
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                            "cta": Object {
-                              "copy": "Lorem ipsum dolor",
-                              "href": "https://www.ibm.com",
-                              "type": "local",
-                            },
-                            "heading": "Aliquam condimentum interdum",
-                            "pictogram": Object {
-                              "aria-label": "Touch",
-                              "src": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          },
-                        ]
-                      }
-                      key="1"
-                      type="ContentGroupPictograms"
-                    >
-                      <div
-                        className="bx--content-group-pictograms"
-                        data-autoid="dds--content-group-pictograms"
-                      >
-                        <ContentGroup
-                          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <PictogramItem
-                                className="bx--content-group-pictograms__item"
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                cta={
-                                  Object {
-                                    "copy": "Lorem ipsum dolor",
-                                    "href": "https://www.ibm.com",
-                                    "type": "local",
-                                  }
-                                }
-                                data-autoid="bx--content-group-pictograms__item"
-                                heading="Aliquam condimentum interdum"
-                                key="0"
-                                pictogram={
-                                  Object {
-                                    "aria-label": "Desktop",
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  }
-                                }
-                              >
-                                <div
-                                  className="bx--content-group-pictograms__item bx--pictogram-item"
-                                  data-autoid="dds--pictogram-item"
-                                >
-                                  <div
-                                    className="bx--pictogram-item__row"
-                                  >
-                                    <div
-                                      className="bx--pictogram-item__wrapper"
-                                    >
-                                      <ForwardRef(Desktop)
-                                        aria-label="Desktop"
-                                        className="bx--pictogram-item__pictogram"
-                                        data-autoid="dds--pictogram-item__pictogram"
-                                      >
-                                        <Icon
-                                          aria-label="Desktop"
-                                          className="bx--pictogram-item__pictogram"
-                                          data-autoid="dds--pictogram-item__pictogram"
-                                          fill="currentColor"
-                                          height={64}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={64}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-label="Desktop"
-                                            className="bx--pictogram-item__pictogram"
-                                            data-autoid="dds--pictogram-item__pictogram"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={64}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            role="img"
-                                            viewBox="0 0 32 32"
-                                            width={64}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26	c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,0.904,0.736,1.64,1.64,1.64	h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5	V18.64z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Desktop)>
-                                    </div>
-                                    <div
-                                      className="bx--pictogram-item__content"
-                                      data-autoid="dds--pictogram-item__content"
-                                    >
-                                      <ContentItem
-                                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                        cta={
-                                          Object {
-                                            "copy": "Lorem ipsum dolor",
-                                            "href": "https://www.ibm.com",
-                                            "style": "text",
-                                            "type": "local",
-                                          }
-                                        }
-                                        heading="Aliquam condimentum interdum"
-                                      >
-                                        <div
-                                          className="bx--content-item"
-                                          data-autoid="dds--content-item"
-                                        >
-                                          <h4
-                                            className="bx--content-item__heading"
-                                            data-autoid="dds--content-item__heading"
-                                          >
-                                            Aliquam condimentum interdum
-                                          </h4>
-                                          <div
-                                            className="bx--content-item__copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item__copy"
-                                          />
-                                          <CTA
-                                            copy="Lorem ipsum dolor"
-                                            customClassName="bx--content-item__cta"
-                                            customVideoTitle={null}
-                                            href="https://www.ibm.com"
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--content-item__cta"
-                                            >
-                                              <TextCTA
-                                                copy="Lorem ipsum dolor"
-                                                customVideoTitle={null}
-                                                formatCTAcopy={[Function]}
-                                                href="https://www.ibm.com"
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://www.ibm.com"
-                                                  iconInline={true}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                      href="https://www.ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                        href="https://www.ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          Lorem ipsum dolor
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </ContentItem>
-                                    </div>
-                                  </div>
-                                </div>
-                              </PictogramItem>
-                              <PictogramItem
-                                className="bx--content-group-pictograms__item"
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                cta={
-                                  Object {
-                                    "copy": "Lorem ipsum dolor",
-                                    "href": "https://www.ibm.com",
-                                    "type": "local",
-                                  }
-                                }
-                                data-autoid="bx--content-group-pictograms__item"
-                                heading="Aliquam condimentum interdum"
-                                key="1"
-                                pictogram={
-                                  Object {
-                                    "aria-label": "Pattern",
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  }
-                                }
-                              >
-                                <div
-                                  className="bx--content-group-pictograms__item bx--pictogram-item"
-                                  data-autoid="dds--pictogram-item"
-                                >
-                                  <div
-                                    className="bx--pictogram-item__row"
-                                  >
-                                    <div
-                                      className="bx--pictogram-item__wrapper"
-                                    >
-                                      <ForwardRef(Pattern)
-                                        aria-label="Pattern"
-                                        className="bx--pictogram-item__pictogram"
-                                        data-autoid="dds--pictogram-item__pictogram"
-                                      >
-                                        <Icon
-                                          aria-label="Pattern"
-                                          className="bx--pictogram-item__pictogram"
-                                          data-autoid="dds--pictogram-item__pictogram"
-                                          fill="currentColor"
-                                          height={64}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={64}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-label="Pattern"
-                                            className="bx--pictogram-item__pictogram"
-                                            data-autoid="dds--pictogram-item__pictogram"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={64}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            role="img"
-                                            viewBox="0 0 32 32"
-                                            width={64}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3	c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16	C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13	c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8	c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6	c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3	c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36	V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2	c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36	H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36	c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2	c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1	C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8	v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Pattern)>
-                                    </div>
-                                    <div
-                                      className="bx--pictogram-item__content"
-                                      data-autoid="dds--pictogram-item__content"
-                                    >
-                                      <ContentItem
-                                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                        cta={
-                                          Object {
-                                            "copy": "Lorem ipsum dolor",
-                                            "href": "https://www.ibm.com",
-                                            "style": "text",
-                                            "type": "local",
-                                          }
-                                        }
-                                        heading="Aliquam condimentum interdum"
-                                      >
-                                        <div
-                                          className="bx--content-item"
-                                          data-autoid="dds--content-item"
-                                        >
-                                          <h4
-                                            className="bx--content-item__heading"
-                                            data-autoid="dds--content-item__heading"
-                                          >
-                                            Aliquam condimentum interdum
-                                          </h4>
-                                          <div
-                                            className="bx--content-item__copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item__copy"
-                                          />
-                                          <CTA
-                                            copy="Lorem ipsum dolor"
-                                            customClassName="bx--content-item__cta"
-                                            customVideoTitle={null}
-                                            href="https://www.ibm.com"
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--content-item__cta"
-                                            >
-                                              <TextCTA
-                                                copy="Lorem ipsum dolor"
-                                                customVideoTitle={null}
-                                                formatCTAcopy={[Function]}
-                                                href="https://www.ibm.com"
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://www.ibm.com"
-                                                  iconInline={true}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                      href="https://www.ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                        href="https://www.ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          Lorem ipsum dolor
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </ContentItem>
-                                    </div>
-                                  </div>
-                                </div>
-                              </PictogramItem>
-                              <PictogramItem
-                                className="bx--content-group-pictograms__item"
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                cta={
-                                  Object {
-                                    "copy": "Lorem ipsum dolor",
-                                    "href": "https://www.ibm.com",
-                                    "type": "local",
-                                  }
-                                }
-                                data-autoid="bx--content-group-pictograms__item"
-                                heading="Aliquam condimentum interdum"
-                                key="2"
-                                pictogram={
-                                  Object {
-                                    "aria-label": "Touch",
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  }
-                                }
-                              >
-                                <div
-                                  className="bx--content-group-pictograms__item bx--pictogram-item"
-                                  data-autoid="dds--pictogram-item"
-                                >
-                                  <div
-                                    className="bx--pictogram-item__row"
-                                  >
-                                    <div
-                                      className="bx--pictogram-item__wrapper"
-                                    >
-                                      <ForwardRef(Touch)
-                                        aria-label="Touch"
-                                        className="bx--pictogram-item__pictogram"
-                                        data-autoid="dds--pictogram-item__pictogram"
-                                      >
-                                        <Icon
-                                          aria-label="Touch"
-                                          className="bx--pictogram-item__pictogram"
-                                          data-autoid="dds--pictogram-item__pictogram"
-                                          fill="currentColor"
-                                          height={64}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={64}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-label="Touch"
-                                            className="bx--pictogram-item__pictogram"
-                                            data-autoid="dds--pictogram-item__pictogram"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={64}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            role="img"
-                                            viewBox="0 0 32 32"
-                                            width={64}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444	c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269	c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0	c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01	C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357	c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7	c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337	c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192	c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729	C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729	l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64	c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Touch)>
-                                    </div>
-                                    <div
-                                      className="bx--pictogram-item__content"
-                                      data-autoid="dds--pictogram-item__content"
-                                    >
-                                      <ContentItem
-                                        copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                        cta={
-                                          Object {
-                                            "copy": "Lorem ipsum dolor",
-                                            "href": "https://www.ibm.com",
-                                            "style": "text",
-                                            "type": "local",
-                                          }
-                                        }
-                                        heading="Aliquam condimentum interdum"
-                                      >
-                                        <div
-                                          className="bx--content-item"
-                                          data-autoid="dds--content-item"
-                                        >
-                                          <h4
-                                            className="bx--content-item__heading"
-                                            data-autoid="dds--content-item__heading"
-                                          >
-                                            Aliquam condimentum interdum
-                                          </h4>
-                                          <div
-                                            className="bx--content-item__copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item__copy"
-                                          />
-                                          <CTA
-                                            copy="Lorem ipsum dolor"
-                                            customClassName="bx--content-item__cta"
-                                            customVideoTitle={null}
-                                            href="https://www.ibm.com"
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--content-item__cta"
-                                            >
-                                              <TextCTA
-                                                copy="Lorem ipsum dolor"
-                                                customVideoTitle={null}
-                                                formatCTAcopy={[Function]}
-                                                href="https://www.ibm.com"
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://www.ibm.com"
-                                                  iconInline={true}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                      href="https://www.ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                        href="https://www.ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          Lorem ipsum dolor
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </ContentItem>
-                                    </div>
-                                  </div>
-                                </div>
-                              </PictogramItem>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                      </div>
-                    </ContentGroupPictograms>
-                    <ContentGroupSimple
-                      heading="Lorem ipsum dolor sit amet"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                          Object {
-                            "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                            "heading": "Lorem ipsum dolor sit amet.",
-                          },
-                        ]
-                      }
-                      key="2"
-                      mediaData={
-                        Object {
-                          "heading": "Lorem ipsum dolor sit amet.",
-                          "image": Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                            "sources": Array [
-                              Object {
-                                "breakpoint": 320,
-                                "src": "fpo--16x9--320x180--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 400,
-                                "src": "fpo--16x9--480x270--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 672,
-                                "src": "fpo--16x9--720x405--004.jpg",
-                              },
-                            ],
-                          },
-                        }
-                      }
-                      mediaType="image"
-                      type="ContentGroupSimple"
-                    >
-                      <div
-                        className="bx--content-group-simple"
-                        data-autoid="dds--content-group-simple"
-                      >
-                        <ContentGroup
-                          heading="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <div
-                                data-autoid="dds--content-group-simple__media"
-                              >
-                                <ImageWithCaption
-                                  copy=""
-                                  heading="Lorem ipsum dolor sit amet."
-                                  image={
-                                    Object {
-                                      "alt": "Image alt text",
-                                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                      "sources": Array [
-                                        Object {
-                                          "breakpoint": 320,
-                                          "src": "fpo--16x9--320x180--004.jpg",
-                                        },
-                                        Object {
-                                          "breakpoint": 400,
-                                          "src": "fpo--16x9--480x270--004.jpg",
-                                        },
-                                        Object {
-                                          "breakpoint": 672,
-                                          "src": "fpo--16x9--720x405--004.jpg",
-                                        },
-                                      ],
-                                    }
-                                  }
-                                  lightbox={false}
-                                >
-                                  <div
-                                    className="bx--image-with-caption"
-                                    data-autoid="dds--image-with-caption"
-                                  >
-                                    <Image
-                                      alt="Image alt text"
-                                      defaultSrc="fpo--16x9--720x405--004.jpg"
-                                      sources={
-                                        Array [
-                                          Object {
-                                            "breakpoint": 320,
-                                            "src": "fpo--16x9--320x180--004.jpg",
-                                          },
-                                          Object {
-                                            "breakpoint": 400,
-                                            "src": "fpo--16x9--480x270--004.jpg",
-                                          },
-                                          Object {
-                                            "breakpoint": 672,
-                                            "src": "fpo--16x9--720x405--004.jpg",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <div
-                                        className="bx--image"
-                                        data-autoid="dds--image__longdescription"
-                                      >
-                                        <picture>
-                                          <source
-                                            key="0"
-                                            media="(min-width: 672px)"
-                                            srcSet="fpo--16x9--720x405--004.jpg"
-                                          />
-                                          <source
-                                            key="1"
-                                            media="(min-width: 400px)"
-                                            srcSet="fpo--16x9--480x270--004.jpg"
-                                          />
-                                          <source
-                                            key="2"
-                                            media="(min-width: 320px)"
-                                            srcSet="fpo--16x9--320x180--004.jpg"
-                                          />
-                                          <img
-                                            alt="Image alt text"
-                                            className="bx--image__img"
-                                            src="fpo--16x9--720x405--004.jpg"
-                                          />
-                                        </picture>
-                                      </div>
-                                    </Image>
-                                    <p
-                                      className="bx--image__caption"
-                                      data-autoid="dds--image__caption"
-                                    >
-                                      Lorem ipsum dolor sit amet.
-                                    </p>
-                                  </div>
-                                </ImageWithCaption>
-                              </div>
-                              <ContentItem
-                                copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                heading="Lorem ipsum dolor sit amet."
-                                key="0"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                              <ContentItem
-                                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                                heading="Lorem ipsum dolor sit amet."
-                                key="1"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                              <ContentItem
-                                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                heading="Lorem ipsum dolor sit amet."
-                                key="2"
-                              >
-                                <div
-                                  className="bx--content-item"
-                                  data-autoid="dds--content-item"
-                                >
-                                  <h4
-                                    className="bx--content-item__heading"
-                                    data-autoid="dds--content-item__heading"
-                                  >
-                                    Lorem ipsum dolor sit amet.
-                                  </h4>
-                                  <div
-                                    className="bx--content-item__copy"
-                                    dangerouslySetInnerHTML={
-                                      Object {
-                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                      }
-                                    }
-                                    data-autoid="dds--content-item__copy"
-                                  />
-                                </div>
-                              </ContentItem>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                      </div>
-                    </ContentGroupSimple>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockMixed>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block mixed With link list 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-mixed--with-link-list",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockMixed/__stories__/ContentBlockMixed.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block mixed: With link list",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockMixed": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "style": "card",
-                  "type": "local",
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "items": Array [
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                  Object {
-                    "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                    "heading": "Lorem ipsum dolor sit amet.",
-                  },
-                ],
-                "mediaData": Object {
-                  "image": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "video": Object {
-                    "showCaption": true,
-                    "videoId": "1_9h94wo6b",
-                  },
-                },
-                "mediaType": Object {},
-                "type": "ContentGroupSimple",
-                "types": Object {
-                  "image": "image",
-                  "none": "none",
-                  "video": "video",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <ContentBlockMixed
-            aside={
-              Object {
-                "items": <LinkList
-                  heading="Tutorials"
-                  items={
-                    Array [
-                      Object {
-                        "copy": "Containerization A Complete Guide",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "Why should you use microservices and containers",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "external",
-                      },
-                    ]
-                  }
-                  style="card"
-                />,
-              }
-            }
-            border={false}
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-    Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-    nulla quis, *consequat* libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Lorem ipsum dolor sit amet"
-            items={
-              Array [
-                Object {
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-                      "cta": Object {
-                        "href": "https://www.example.com",
-                      },
-                      "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                    },
-                  ],
-                  "type": "ContentGroupCards",
-                },
-                Object {
-                  "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                      "cta": Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.ibm.com",
-                        "type": "local",
-                      },
-                      "heading": "Aliquam condimentum interdum",
-                      "pictogram": Object {
-                        "aria-label": "Desktop",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                      "cta": Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.ibm.com",
-                        "type": "local",
-                      },
-                      "heading": "Aliquam condimentum interdum",
-                      "pictogram": Object {
-                        "aria-label": "Pattern",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                      "cta": Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.ibm.com",
-                        "type": "local",
-                      },
-                      "heading": "Aliquam condimentum interdum",
-                      "pictogram": Object {
-                        "aria-label": "Touch",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      },
-                    },
-                  ],
-                  "type": "ContentGroupPictograms",
-                },
-                Object {
-                  "heading": "Lorem ipsum dolor sit amet",
-                  "items": Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                      "heading": "Lorem ipsum dolor sit amet.",
-                    },
-                  ],
-                  "mediaData": Object {
-                    "heading": "Lorem ipsum dolor sit amet.",
-                    "image": Object {
-                      "alt": "Image alt text",
-                      "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                      "sources": Array [
-                        Object {
-                          "breakpoint": 320,
-                          "src": "fpo--16x9--320x180--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 400,
-                          "src": "fpo--16x9--480x270--004.jpg",
-                        },
-                        Object {
-                          "breakpoint": 672,
-                          "src": "fpo--16x9--720x405--004.jpg",
-                        },
-                      ],
-                    },
-                  },
-                  "mediaType": "image",
-                  "type": "ContentGroupSimple",
-                },
-              ]
-            }
-          >
-            <div
-              className="bx--content-block-mixed"
-              data-autoid="dds--content-block-mixed"
-            >
-              <ContentBlock
-                aside={
-                  Object {
-                    "items": <LinkList
-                      heading="Tutorials"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Containerization A Complete Guide",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Why should you use microservices and containers",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "external",
-                          },
-                        ]
-                      }
-                      style="card"
-                    />,
-                  }
-                }
-                border={false}
-                copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-    Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-    nulla quis, *consequat* libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Lorem ipsum dolor sit amet"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Lorem ipsum dolor sit amet
-                  </h2>
-                  <div
-                    className="bx--content-layout bx--content-layout--with-complementary"
-                  >
-                    <div
-                      className="bx--content-layout__body"
-                    >
-                      <div
-                        className="bx--content-block__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                          }
-                        }
-                      />
-                      <div
-                        className="bx--content-block__children"
-                        data-autoid="dds--content-block__children"
-                      >
-                        <ContentGroupCards
-                          heading="Lorem ipsum dolor sit amet"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "heading": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet",
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                              },
-                            ]
-                          }
-                          key="0"
-                          type="ContentGroupCards"
-                        >
-                          <section
-                            className="bx--content-group-cards"
-                            data-autoid="dds--content-group-cards"
-                          >
-                            <ContentGroup
-                              heading="Lorem ipsum dolor sit amet"
-                            >
-                              <div
-                                className="bx--content-group"
-                                data-autoid="dds--content-group"
-                              >
-                                <h3
-                                  className="bx--content-group__title"
-                                  data-autoid="dds--content-group__title"
-                                >
-                                  Lorem ipsum dolor sit amet
-                                </h3>
-                                <div
-                                  className="bx--content-group__col bx--content-group__children"
-                                  data-autoid="dds--content-group__children"
-                                >
-                                  <div
-                                    className="bx--content-group-cards-group bx--grid--condensed"
-                                    data-autoid="dds--content-group-cards-group"
-                                  >
-                                    <div
-                                      className="bx--content-group-cards__row"
-                                    >
-                                      <div
-                                        className="bx--content-group-cards-item__col"
-                                        data-autoid="dds--content-group-cards-item"
-                                        key="0"
-                                        role="region"
-                                      >
-                                        <Card
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                                          cta={
-                                            Object {
-                                              "href": "https://www.example.com",
-                                              "icon": Object {
-                                                "src": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                              },
-                                            }
-                                          }
-                                          customClassName="bx--content-group-cards-item"
-                                          heading="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                        >
-                                          <Tile
-                                            aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                            className="bx--card bx--content-group-cards-item"
-                                            data-autoid="dds--card"
-                                            light={false}
-                                          >
-                                            <div
-                                              aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                              className="bx--tile bx--card bx--content-group-cards-item"
-                                              data-autoid="dds--card"
-                                            >
-                                              <div
-                                                className="bx--card__wrapper"
-                                              >
-                                                <div
-                                                  className="bx--card__content"
-                                                >
-                                                  <h3
-                                                    className="bx--card__heading"
-                                                  >
-                                                    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                                                  </h3>
-                                                  <div
-                                                    className="bx--card__copy"
-                                                    dangerouslySetInnerHTML={
-                                                      Object {
-                                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-                                                      }
-                                                    }
-                                                  />
-                                                  <Link
-                                                    aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                                    className="bx--card__footer"
-                                                    href="https://www.example.com"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                                      className="bx--link bx--card__footer"
-                                                      href="https://www.example.com"
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <ForwardRef(ArrowRight20)
-                                                        className="bx--card__cta"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                      >
-                                                        <Icon
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </Tile>
-                                        </Card>
-                                      </div>
-                                      <div
-                                        className="bx--content-group-cards-item__col"
-                                        data-autoid="dds--content-group-cards-item"
-                                        key="1"
-                                        role="region"
-                                      >
-                                        <Card
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          cta={
-                                            Object {
-                                              "href": "https://www.example.com",
-                                              "icon": Object {
-                                                "src": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                              },
-                                            }
-                                          }
-                                          customClassName="bx--content-group-cards-item"
-                                          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        >
-                                          <Tile
-                                            aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                            className="bx--card bx--content-group-cards-item"
-                                            data-autoid="dds--card"
-                                            light={false}
-                                          >
-                                            <div
-                                              aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                              className="bx--tile bx--card bx--content-group-cards-item"
-                                              data-autoid="dds--card"
-                                            >
-                                              <div
-                                                className="bx--card__wrapper"
-                                              >
-                                                <div
-                                                  className="bx--card__content"
-                                                >
-                                                  <h3
-                                                    className="bx--card__heading"
-                                                  >
-                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                                  </h3>
-                                                  <div
-                                                    className="bx--card__copy"
-                                                    dangerouslySetInnerHTML={
-                                                      Object {
-                                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> ",
-                                                      }
-                                                    }
-                                                  />
-                                                  <Link
-                                                    aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                    className="bx--card__footer"
-                                                    href="https://www.example.com"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                      className="bx--link bx--card__footer"
-                                                      href="https://www.example.com"
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <ForwardRef(ArrowRight20)
-                                                        className="bx--card__cta"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                      >
-                                                        <Icon
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </Tile>
-                                        </Card>
-                                      </div>
-                                      <div
-                                        className="bx--content-group-cards-item__col"
-                                        data-autoid="dds--content-group-cards-item"
-                                        key="2"
-                                        role="region"
-                                      >
-                                        <Card
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          copy="Lorem ipsum dolor sit amet"
-                                          cta={
-                                            Object {
-                                              "href": "https://www.example.com",
-                                              "icon": Object {
-                                                "src": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                              },
-                                            }
-                                          }
-                                          customClassName="bx--content-group-cards-item"
-                                          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        >
-                                          <Tile
-                                            aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                            className="bx--card bx--content-group-cards-item"
-                                            data-autoid="dds--card"
-                                            light={false}
-                                          >
-                                            <div
-                                              aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                              className="bx--tile bx--card bx--content-group-cards-item"
-                                              data-autoid="dds--card"
-                                            >
-                                              <div
-                                                className="bx--card__wrapper"
-                                              >
-                                                <div
-                                                  className="bx--card__content"
-                                                >
-                                                  <h3
-                                                    className="bx--card__heading"
-                                                  >
-                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                                  </h3>
-                                                  <div
-                                                    className="bx--card__copy"
-                                                    dangerouslySetInnerHTML={
-                                                      Object {
-                                                        "__html": "<p>Lorem ipsum dolor sit amet</p> ",
-                                                      }
-                                                    }
-                                                  />
-                                                  <Link
-                                                    aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                    className="bx--card__footer"
-                                                    href="https://www.example.com"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                      className="bx--link bx--card__footer"
-                                                      href="https://www.example.com"
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <ForwardRef(ArrowRight20)
-                                                        className="bx--card__cta"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                      >
-                                                        <Icon
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </Tile>
-                                        </Card>
-                                      </div>
-                                      <div
-                                        className="bx--content-group-cards-item__col"
-                                        data-autoid="dds--content-group-cards-item"
-                                        key="3"
-                                        role="region"
-                                      >
-                                        <Card
-                                          aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
-                                          cta={
-                                            Object {
-                                              "href": "https://www.example.com",
-                                              "icon": Object {
-                                                "src": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                              },
-                                            }
-                                          }
-                                          customClassName="bx--content-group-cards-item"
-                                          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        >
-                                          <Tile
-                                            aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                            className="bx--card bx--content-group-cards-item"
-                                            data-autoid="dds--card"
-                                            light={false}
-                                          >
-                                            <div
-                                              aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                              className="bx--tile bx--card bx--content-group-cards-item"
-                                              data-autoid="dds--card"
-                                            >
-                                              <div
-                                                className="bx--card__wrapper"
-                                              >
-                                                <div
-                                                  className="bx--card__content"
-                                                >
-                                                  <h3
-                                                    className="bx--card__heading"
-                                                  >
-                                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                                  </h3>
-                                                  <div
-                                                    className="bx--card__copy"
-                                                    dangerouslySetInnerHTML={
-                                                      Object {
-                                                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> ",
-                                                      }
-                                                    }
-                                                  />
-                                                  <Link
-                                                    aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                    className="bx--card__footer"
-                                                    href="https://www.example.com"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                                      className="bx--link bx--card__footer"
-                                                      href="https://www.example.com"
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <ForwardRef(ArrowRight20)
-                                                        className="bx--card__cta"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                      >
-                                                        <Icon
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </Tile>
-                                        </Card>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentGroup>
-                          </section>
-                        </ContentGroupCards>
-                        <ContentGroupPictograms
-                          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                                "cta": Object {
-                                  "copy": "Lorem ipsum dolor",
-                                  "href": "https://www.ibm.com",
-                                  "type": "local",
-                                },
-                                "heading": "Aliquam condimentum interdum",
-                                "pictogram": Object {
-                                  "aria-label": "Desktop",
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                                "cta": Object {
-                                  "copy": "Lorem ipsum dolor",
-                                  "href": "https://www.ibm.com",
-                                  "type": "local",
-                                },
-                                "heading": "Aliquam condimentum interdum",
-                                "pictogram": Object {
-                                  "aria-label": "Pattern",
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                                "cta": Object {
-                                  "copy": "Lorem ipsum dolor",
-                                  "href": "https://www.ibm.com",
-                                  "type": "local",
-                                },
-                                "heading": "Aliquam condimentum interdum",
-                                "pictogram": Object {
-                                  "aria-label": "Touch",
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          key="1"
-                          type="ContentGroupPictograms"
-                        >
-                          <div
-                            className="bx--content-group-pictograms"
-                            data-autoid="dds--content-group-pictograms"
-                          >
-                            <ContentGroup
-                              heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                            >
-                              <div
-                                className="bx--content-group"
-                                data-autoid="dds--content-group"
-                              >
-                                <h3
-                                  className="bx--content-group__title"
-                                  data-autoid="dds--content-group__title"
-                                >
-                                  Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                </h3>
-                                <div
-                                  className="bx--content-group__col bx--content-group__children"
-                                  data-autoid="dds--content-group__children"
-                                >
-                                  <PictogramItem
-                                    className="bx--content-group-pictograms__item"
-                                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor",
-                                        "href": "https://www.ibm.com",
-                                        "type": "local",
-                                      }
-                                    }
-                                    data-autoid="bx--content-group-pictograms__item"
-                                    heading="Aliquam condimentum interdum"
-                                    key="0"
-                                    pictogram={
-                                      Object {
-                                        "aria-label": "Desktop",
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className="bx--content-group-pictograms__item bx--pictogram-item"
-                                      data-autoid="dds--pictogram-item"
-                                    >
-                                      <div
-                                        className="bx--pictogram-item__row"
-                                      >
-                                        <div
-                                          className="bx--pictogram-item__wrapper"
-                                        >
-                                          <ForwardRef(Desktop)
-                                            aria-label="Desktop"
-                                            className="bx--pictogram-item__pictogram"
-                                            data-autoid="dds--pictogram-item__pictogram"
-                                          >
-                                            <Icon
-                                              aria-label="Desktop"
-                                              className="bx--pictogram-item__pictogram"
-                                              data-autoid="dds--pictogram-item__pictogram"
-                                              fill="currentColor"
-                                              height={64}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={64}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-label="Desktop"
-                                                className="bx--pictogram-item__pictogram"
-                                                data-autoid="dds--pictogram-item__pictogram"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={64}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                role="img"
-                                                viewBox="0 0 32 32"
-                                                width={64}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26	c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,0.904,0.736,1.64,1.64,1.64	h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5	V18.64z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Desktop)>
-                                        </div>
-                                        <div
-                                          className="bx--pictogram-item__content"
-                                          data-autoid="dds--pictogram-item__content"
-                                        >
-                                          <ContentItem
-                                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                            cta={
-                                              Object {
-                                                "copy": "Lorem ipsum dolor",
-                                                "href": "https://www.ibm.com",
-                                                "style": "text",
-                                                "type": "local",
-                                              }
-                                            }
-                                            heading="Aliquam condimentum interdum"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <h4
-                                                className="bx--content-item__heading"
-                                                data-autoid="dds--content-item__heading"
-                                              >
-                                                Aliquam condimentum interdum
-                                              </h4>
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                              <CTA
-                                                copy="Lorem ipsum dolor"
-                                                customClassName="bx--content-item__cta"
-                                                customVideoTitle={null}
-                                                href="https://www.ibm.com"
-                                                style="text"
-                                                type="local"
-                                              >
-                                                <div
-                                                  className="bx--content-item__cta"
-                                                >
-                                                  <TextCTA
-                                                    copy="Lorem ipsum dolor"
-                                                    customVideoTitle={null}
-                                                    formatCTAcopy={[Function]}
-                                                    href="https://www.ibm.com"
-                                                    iconPlacement="right"
-                                                    openLightBox={[Function]}
-                                                    renderLightBox={false}
-                                                    style="text"
-                                                    type="local"
-                                                    videoTitle={
-                                                      Array [
-                                                        Object {
-                                                          "duration": "",
-                                                          "key": 0,
-                                                          "title": "",
-                                                        },
-                                                      ]
-                                                    }
-                                                  >
-                                                    <LinkWithIcon
-                                                      href="https://www.ibm.com"
-                                                      iconInline={true}
-                                                      iconPlacement="right"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--link-with-icon__container"
-                                                        data-autoid="dds--link-with-icon"
-                                                      >
-                                                        <Link
-                                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                          href="https://www.ibm.com"
-                                                          onClick={[Function]}
-                                                          size="lg"
-                                                          target={null}
-                                                        >
-                                                          <a
-                                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                            href="https://www.ibm.com"
-                                                            onClick={[Function]}
-                                                            rel={null}
-                                                            target={null}
-                                                          >
-                                                            <span>
-                                                              Lorem ipsum dolor
-                                                            </span>
-                                                            <span
-                                                              className="bx--visually-hidden"
-                                                            />
-                                                            <ForwardRef(ArrowRight20)>
-                                                              <Icon
-                                                                fill="currentColor"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  fill="currentColor"
-                                                                  focusable="false"
-                                                                  height={20}
-                                                                  preserveAspectRatio="xMidYMid meet"
-                                                                  viewBox="0 0 20 20"
-                                                                  width={20}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                >
-                                                                  <path
-                                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                  />
-                                                                </svg>
-                                                              </Icon>
-                                                            </ForwardRef(ArrowRight20)>
-                                                          </a>
-                                                        </Link>
-                                                      </div>
-                                                    </LinkWithIcon>
-                                                  </TextCTA>
-                                                </div>
-                                              </CTA>
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </PictogramItem>
-                                  <PictogramItem
-                                    className="bx--content-group-pictograms__item"
-                                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor",
-                                        "href": "https://www.ibm.com",
-                                        "type": "local",
-                                      }
-                                    }
-                                    data-autoid="bx--content-group-pictograms__item"
-                                    heading="Aliquam condimentum interdum"
-                                    key="1"
-                                    pictogram={
-                                      Object {
-                                        "aria-label": "Pattern",
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className="bx--content-group-pictograms__item bx--pictogram-item"
-                                      data-autoid="dds--pictogram-item"
-                                    >
-                                      <div
-                                        className="bx--pictogram-item__row"
-                                      >
-                                        <div
-                                          className="bx--pictogram-item__wrapper"
-                                        >
-                                          <ForwardRef(Pattern)
-                                            aria-label="Pattern"
-                                            className="bx--pictogram-item__pictogram"
-                                            data-autoid="dds--pictogram-item__pictogram"
-                                          >
-                                            <Icon
-                                              aria-label="Pattern"
-                                              className="bx--pictogram-item__pictogram"
-                                              data-autoid="dds--pictogram-item__pictogram"
-                                              fill="currentColor"
-                                              height={64}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={64}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-label="Pattern"
-                                                className="bx--pictogram-item__pictogram"
-                                                data-autoid="dds--pictogram-item__pictogram"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={64}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                role="img"
-                                                viewBox="0 0 32 32"
-                                                width={64}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3	c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16	C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13	c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8	c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6	c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3	c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36	V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2	c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36	H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36	c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2	c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1	C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8	v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Pattern)>
-                                        </div>
-                                        <div
-                                          className="bx--pictogram-item__content"
-                                          data-autoid="dds--pictogram-item__content"
-                                        >
-                                          <ContentItem
-                                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                            cta={
-                                              Object {
-                                                "copy": "Lorem ipsum dolor",
-                                                "href": "https://www.ibm.com",
-                                                "style": "text",
-                                                "type": "local",
-                                              }
-                                            }
-                                            heading="Aliquam condimentum interdum"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <h4
-                                                className="bx--content-item__heading"
-                                                data-autoid="dds--content-item__heading"
-                                              >
-                                                Aliquam condimentum interdum
-                                              </h4>
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                              <CTA
-                                                copy="Lorem ipsum dolor"
-                                                customClassName="bx--content-item__cta"
-                                                customVideoTitle={null}
-                                                href="https://www.ibm.com"
-                                                style="text"
-                                                type="local"
-                                              >
-                                                <div
-                                                  className="bx--content-item__cta"
-                                                >
-                                                  <TextCTA
-                                                    copy="Lorem ipsum dolor"
-                                                    customVideoTitle={null}
-                                                    formatCTAcopy={[Function]}
-                                                    href="https://www.ibm.com"
-                                                    iconPlacement="right"
-                                                    openLightBox={[Function]}
-                                                    renderLightBox={false}
-                                                    style="text"
-                                                    type="local"
-                                                    videoTitle={
-                                                      Array [
-                                                        Object {
-                                                          "duration": "",
-                                                          "key": 0,
-                                                          "title": "",
-                                                        },
-                                                      ]
-                                                    }
-                                                  >
-                                                    <LinkWithIcon
-                                                      href="https://www.ibm.com"
-                                                      iconInline={true}
-                                                      iconPlacement="right"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--link-with-icon__container"
-                                                        data-autoid="dds--link-with-icon"
-                                                      >
-                                                        <Link
-                                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                          href="https://www.ibm.com"
-                                                          onClick={[Function]}
-                                                          size="lg"
-                                                          target={null}
-                                                        >
-                                                          <a
-                                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                            href="https://www.ibm.com"
-                                                            onClick={[Function]}
-                                                            rel={null}
-                                                            target={null}
-                                                          >
-                                                            <span>
-                                                              Lorem ipsum dolor
-                                                            </span>
-                                                            <span
-                                                              className="bx--visually-hidden"
-                                                            />
-                                                            <ForwardRef(ArrowRight20)>
-                                                              <Icon
-                                                                fill="currentColor"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  fill="currentColor"
-                                                                  focusable="false"
-                                                                  height={20}
-                                                                  preserveAspectRatio="xMidYMid meet"
-                                                                  viewBox="0 0 20 20"
-                                                                  width={20}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                >
-                                                                  <path
-                                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                  />
-                                                                </svg>
-                                                              </Icon>
-                                                            </ForwardRef(ArrowRight20)>
-                                                          </a>
-                                                        </Link>
-                                                      </div>
-                                                    </LinkWithIcon>
-                                                  </TextCTA>
-                                                </div>
-                                              </CTA>
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </PictogramItem>
-                                  <PictogramItem
-                                    className="bx--content-group-pictograms__item"
-                                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem ipsum dolor",
-                                        "href": "https://www.ibm.com",
-                                        "type": "local",
-                                      }
-                                    }
-                                    data-autoid="bx--content-group-pictograms__item"
-                                    heading="Aliquam condimentum interdum"
-                                    key="2"
-                                    pictogram={
-                                      Object {
-                                        "aria-label": "Touch",
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      }
-                                    }
-                                  >
-                                    <div
-                                      className="bx--content-group-pictograms__item bx--pictogram-item"
-                                      data-autoid="dds--pictogram-item"
-                                    >
-                                      <div
-                                        className="bx--pictogram-item__row"
-                                      >
-                                        <div
-                                          className="bx--pictogram-item__wrapper"
-                                        >
-                                          <ForwardRef(Touch)
-                                            aria-label="Touch"
-                                            className="bx--pictogram-item__pictogram"
-                                            data-autoid="dds--pictogram-item__pictogram"
-                                          >
-                                            <Icon
-                                              aria-label="Touch"
-                                              className="bx--pictogram-item__pictogram"
-                                              data-autoid="dds--pictogram-item__pictogram"
-                                              fill="currentColor"
-                                              height={64}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={64}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-label="Touch"
-                                                className="bx--pictogram-item__pictogram"
-                                                data-autoid="dds--pictogram-item__pictogram"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={64}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                role="img"
-                                                viewBox="0 0 32 32"
-                                                width={64}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444	c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269	c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0	c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01	C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357	c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7	c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337	c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192	c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729	C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729	l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64	c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Touch)>
-                                        </div>
-                                        <div
-                                          className="bx--pictogram-item__content"
-                                          data-autoid="dds--pictogram-item__content"
-                                        >
-                                          <ContentItem
-                                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero."
-                                            cta={
-                                              Object {
-                                                "copy": "Lorem ipsum dolor",
-                                                "href": "https://www.ibm.com",
-                                                "style": "text",
-                                                "type": "local",
-                                              }
-                                            }
-                                            heading="Aliquam condimentum interdum"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <h4
-                                                className="bx--content-item__heading"
-                                                data-autoid="dds--content-item__heading"
-                                              >
-                                                Aliquam condimentum interdum
-                                              </h4>
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                              <CTA
-                                                copy="Lorem ipsum dolor"
-                                                customClassName="bx--content-item__cta"
-                                                customVideoTitle={null}
-                                                href="https://www.ibm.com"
-                                                style="text"
-                                                type="local"
-                                              >
-                                                <div
-                                                  className="bx--content-item__cta"
-                                                >
-                                                  <TextCTA
-                                                    copy="Lorem ipsum dolor"
-                                                    customVideoTitle={null}
-                                                    formatCTAcopy={[Function]}
-                                                    href="https://www.ibm.com"
-                                                    iconPlacement="right"
-                                                    openLightBox={[Function]}
-                                                    renderLightBox={false}
-                                                    style="text"
-                                                    type="local"
-                                                    videoTitle={
-                                                      Array [
-                                                        Object {
-                                                          "duration": "",
-                                                          "key": 0,
-                                                          "title": "",
-                                                        },
-                                                      ]
-                                                    }
-                                                  >
-                                                    <LinkWithIcon
-                                                      href="https://www.ibm.com"
-                                                      iconInline={true}
-                                                      iconPlacement="right"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--link-with-icon__container"
-                                                        data-autoid="dds--link-with-icon"
-                                                      >
-                                                        <Link
-                                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                          href="https://www.ibm.com"
-                                                          onClick={[Function]}
-                                                          size="lg"
-                                                          target={null}
-                                                        >
-                                                          <a
-                                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                            href="https://www.ibm.com"
-                                                            onClick={[Function]}
-                                                            rel={null}
-                                                            target={null}
-                                                          >
-                                                            <span>
-                                                              Lorem ipsum dolor
-                                                            </span>
-                                                            <span
-                                                              className="bx--visually-hidden"
-                                                            />
-                                                            <ForwardRef(ArrowRight20)>
-                                                              <Icon
-                                                                fill="currentColor"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <svg
-                                                                  aria-hidden={true}
-                                                                  fill="currentColor"
-                                                                  focusable="false"
-                                                                  height={20}
-                                                                  preserveAspectRatio="xMidYMid meet"
-                                                                  viewBox="0 0 20 20"
-                                                                  width={20}
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                >
-                                                                  <path
-                                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                  />
-                                                                </svg>
-                                                              </Icon>
-                                                            </ForwardRef(ArrowRight20)>
-                                                          </a>
-                                                        </Link>
-                                                      </div>
-                                                    </LinkWithIcon>
-                                                  </TextCTA>
-                                                </div>
-                                              </CTA>
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </PictogramItem>
-                                </div>
-                              </div>
-                            </ContentGroup>
-                          </div>
-                        </ContentGroupPictograms>
-                        <ContentGroupSimple
-                          heading="Lorem ipsum dolor sit amet"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                                "heading": "Lorem ipsum dolor sit amet.",
-                              },
-                            ]
-                          }
-                          key="2"
-                          mediaData={
-                            Object {
-                              "heading": "Lorem ipsum dolor sit amet.",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                "sources": Array [
-                                  Object {
-                                    "breakpoint": 320,
-                                    "src": "fpo--16x9--320x180--004.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 400,
-                                    "src": "fpo--16x9--480x270--004.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 672,
-                                    "src": "fpo--16x9--720x405--004.jpg",
-                                  },
-                                ],
-                              },
-                            }
-                          }
-                          mediaType="image"
-                          type="ContentGroupSimple"
-                        >
-                          <div
-                            className="bx--content-group-simple"
-                            data-autoid="dds--content-group-simple"
-                          >
-                            <ContentGroup
-                              heading="Lorem ipsum dolor sit amet"
-                            >
-                              <div
-                                className="bx--content-group"
-                                data-autoid="dds--content-group"
-                              >
-                                <h3
-                                  className="bx--content-group__title"
-                                  data-autoid="dds--content-group__title"
-                                >
-                                  Lorem ipsum dolor sit amet
-                                </h3>
-                                <div
-                                  className="bx--content-group__col bx--content-group__children"
-                                  data-autoid="dds--content-group__children"
-                                >
-                                  <div
-                                    data-autoid="dds--content-group-simple__media"
-                                  >
-                                    <ImageWithCaption
-                                      copy=""
-                                      heading="Lorem ipsum dolor sit amet."
-                                      image={
-                                        Object {
-                                          "alt": "Image alt text",
-                                          "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                          "sources": Array [
-                                            Object {
-                                              "breakpoint": 320,
-                                              "src": "fpo--16x9--320x180--004.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 400,
-                                              "src": "fpo--16x9--480x270--004.jpg",
-                                            },
-                                            Object {
-                                              "breakpoint": 672,
-                                              "src": "fpo--16x9--720x405--004.jpg",
-                                            },
-                                          ],
-                                        }
-                                      }
-                                      lightbox={false}
-                                    >
-                                      <div
-                                        className="bx--image-with-caption"
-                                        data-autoid="dds--image-with-caption"
-                                      >
-                                        <Image
-                                          alt="Image alt text"
-                                          defaultSrc="fpo--16x9--720x405--004.jpg"
-                                          sources={
-                                            Array [
-                                              Object {
-                                                "breakpoint": 320,
-                                                "src": "fpo--16x9--320x180--004.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 400,
-                                                "src": "fpo--16x9--480x270--004.jpg",
-                                              },
-                                              Object {
-                                                "breakpoint": 672,
-                                                "src": "fpo--16x9--720x405--004.jpg",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <div
-                                            className="bx--image"
-                                            data-autoid="dds--image__longdescription"
-                                          >
-                                            <picture>
-                                              <source
-                                                key="0"
-                                                media="(min-width: 672px)"
-                                                srcSet="fpo--16x9--720x405--004.jpg"
-                                              />
-                                              <source
-                                                key="1"
-                                                media="(min-width: 400px)"
-                                                srcSet="fpo--16x9--480x270--004.jpg"
-                                              />
-                                              <source
-                                                key="2"
-                                                media="(min-width: 320px)"
-                                                srcSet="fpo--16x9--320x180--004.jpg"
-                                              />
-                                              <img
-                                                alt="Image alt text"
-                                                className="bx--image__img"
-                                                src="fpo--16x9--720x405--004.jpg"
-                                              />
-                                            </picture>
-                                          </div>
-                                        </Image>
-                                        <p
-                                          className="bx--image__caption"
-                                          data-autoid="dds--image__caption"
-                                        >
-                                          Lorem ipsum dolor sit amet.
-                                        </p>
-                                      </div>
-                                    </ImageWithCaption>
-                                  </div>
-                                  <ContentItem
-                                    copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <ContentItem
-                                    copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                  <ContentItem
-                                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                    heading="Lorem ipsum dolor sit amet."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-item"
-                                      data-autoid="dds--content-item"
-                                    >
-                                      <h4
-                                        className="bx--content-item__heading"
-                                        data-autoid="dds--content-item__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet.
-                                      </h4>
-                                      <div
-                                        className="bx--content-item__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                          }
-                                        }
-                                        data-autoid="dds--content-item__copy"
-                                      />
-                                    </div>
-                                  </ContentItem>
-                                </div>
-                              </div>
-                            </ContentGroup>
-                          </div>
-                        </ContentGroupSimple>
-                      </div>
-                      <div
-                        className="bx--content-block__cta-row"
-                        data-autoid="dds--content-block__cta"
-                      >
-                        <CTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customClassName="bx--content-block__cta bx--content-block__cta-col"
-                          customVideoTitle={null}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          style="card"
-                          type="local"
-                        >
-                          <div
-                            className="bx--content-block__cta bx--content-block__cta-col"
-                          >
-                            <CardCTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={false}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href=""
-                              media={null}
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="card"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <CardLink
-                                card={
-                                  Object {
-                                    "copy": "",
-                                    "cta": Object {
-                                      "href": "https://www.ibm.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "local",
-                                    },
-                                    "customVideoTitle": null,
-                                    "heading": "Lorem ipsum dolor sit ametttt",
-                                    "href": "https://www.ibm.com",
-                                    "media": null,
-                                    "size": undefined,
-                                    "target": null,
-                                  }
-                                }
-                                customClassName="bx--card__CardCTA"
-                                disabled={false}
-                              >
-                                <Card
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.ibm.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "local",
-                                    }
-                                  }
-                                  customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  heading="Lorem ipsum dolor sit ametttt"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <Tile
-                                    className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.ibm.com"
-                                    light={false}
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      data-autoid="dds--card"
-                                      href="https://www.ibm.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--card__wrapper"
-                                      >
-                                        <div
-                                          className="bx--card__content"
-                                        >
-                                          <h3
-                                            className="bx--card__heading"
-                                          >
-                                            Lorem ipsum dolor sit ametttt
-                                          </h3>
-                                          <Link
-                                            aria-label="Lorem ipsum dolor sit ametttt"
-                                            className="bx--card__footer"
-                                            href="https://www.ibm.com"
-                                            target={null}
-                                          >
-                                            <a
-                                              aria-label="Lorem ipsum dolor sit ametttt"
-                                              className="bx--link bx--card__footer"
-                                              href="https://www.ibm.com"
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <ForwardRef(ArrowRight20)
-                                                className="bx--card__cta"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                              >
-                                                <Icon
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--card__cta"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </Tile>
-                                </Card>
-                              </CardLink>
-                            </CardCTA>
-                          </div>
-                        </CTA>
-                      </div>
-                    </div>
-                    <aside
-                      className="bx--content-layout__aside"
-                    >
-                      <LinkList
-                        heading="Tutorials"
-                        items={
-                          Array [
-                            Object {
-                              "copy": "Containerization A Complete Guide",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "local",
-                            },
-                            Object {
-                              "copy": "Why should you use microservices and containers",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "external",
-                            },
-                          ]
-                        }
-                        style="card"
-                      >
-                        <div
-                          className="bx--link-list"
-                          data-autoid="dds--link-list"
-                        >
-                          <h4
-                            className="bx--link-list__heading"
-                          >
-                            Tutorials
-                          </h4>
-                          <ul
-                            className="bx--link-list__list bx--link-list__list--card"
-                          >
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--local"
-                              key="0"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Containerization A Complete Guide"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="local"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Containerization A Complete Guide"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Containerization A Complete Guide",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": null,
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Containerization A Complete Guide"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Containerization A Complete Guide</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Containerization A Complete Guide"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    aria-label="Containerization A Complete Guide"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <ForwardRef(ArrowRight20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--external"
-                              key="1"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Why should you use microservices and containers"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="external"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Why should you use microservices and containers"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="external"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Why should you use microservices and containers",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": "_blank",
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Why should you use microservices and containers"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target="_blank"
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target="_blank"
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target="_blank"
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Why should you use microservices and containers</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target="_blank"
-                                                >
-                                                  <a
-                                                    aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel="noopener"
-                                                    target="_blank"
-                                                  >
-                                                    <ForwardRef(Launch20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 32 32"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                          />
-                                                          <path
-                                                            d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(Launch20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                          </ul>
-                        </div>
-                      </LinkList>
-                    </aside>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockMixed>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block segmented Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-segmented--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block segmented: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockSegmented": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                "cta": Object {
-                  "copy": "Lorem Ipsum dolor sit",
-                  "href": "https://example.com",
-                  "type": "local",
-                },
-                "heading": "Lorem ipsum dolor sit amet.",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                "cta": Object {
-                  "copy": "Lorem Ipsum dolor sit",
-                  "href": "https://example.com",
-                  "type": "local",
-                },
-                "heading": "Lorem ipsum dolor sit amet.",
-                "video": Object {
-                  "showCaption": true,
-                  "videoId": "1_9h94wo6b",
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4"
-        >
-          <ContentBlockSegmented
-            border={true}
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Lorem ipsum dolor",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Lorem ipsum dolor sit amet."
-            items={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                  "cta": Object {
-                    "copy": "Lorem Ipsum dolor sit",
-                    "href": "https://example.com",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet.",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                  "cta": Object {
-                    "copy": "Lorem Ipsum dolor sit",
-                    "href": "https://example.com",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet.",
-                  "video": Object {
-                    "showCaption": true,
-                    "videoId": "1_9h94wo6b",
-                  },
-                },
-              ]
-            }
-            mediaData={
-              Object {
-                "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--16x9--320x180--005.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--005.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--005.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-          >
-            <div
-              className="bx--content-block-segmented bx--content-block-segmented-border"
-              data-autoid="dds--content-block-segmented"
-            >
-              <ContentBlock
-                border={true}
-                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Lorem ipsum dolor sit amet."
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Lorem ipsum dolor sit amet.
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      data-autoid="dds--content-block-segmented__media"
-                    >
-                      <ImageWithCaption
-                        copy=""
-                        heading="Mauris iaculis eget dolor nec hendrerit."
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                            "sources": Array [
-                              Object {
-                                "breakpoint": 320,
-                                "src": "fpo--16x9--320x180--005.jpg",
-                              },
-                              Object {
-                                "breakpoint": 400,
-                                "src": "fpo--16x9--480x270--005.jpg",
-                              },
-                              Object {
-                                "breakpoint": 672,
-                                "src": "fpo--16x9--720x405--005.jpg",
-                              },
-                            ],
-                          }
-                        }
-                        lightbox={false}
-                      >
-                        <div
-                          className="bx--image-with-caption"
-                          data-autoid="dds--image-with-caption"
-                        >
-                          <Image
-                            alt="Image alt text"
-                            defaultSrc="fpo--16x9--720x405--005.jpg"
-                            sources={
-                              Array [
-                                Object {
-                                  "breakpoint": 320,
-                                  "src": "fpo--16x9--320x180--005.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 400,
-                                  "src": "fpo--16x9--480x270--005.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 672,
-                                  "src": "fpo--16x9--720x405--005.jpg",
-                                },
-                              ]
-                            }
-                          >
-                            <div
-                              className="bx--image"
-                              data-autoid="dds--image__longdescription"
-                            >
-                              <picture>
-                                <source
-                                  key="0"
-                                  media="(min-width: 672px)"
-                                  srcSet="fpo--16x9--720x405--005.jpg"
-                                />
-                                <source
-                                  key="1"
-                                  media="(min-width: 400px)"
-                                  srcSet="fpo--16x9--480x270--005.jpg"
-                                />
-                                <source
-                                  key="2"
-                                  media="(min-width: 320px)"
-                                  srcSet="fpo--16x9--320x180--005.jpg"
-                                />
-                                <img
-                                  alt="Image alt text"
-                                  className="bx--image__img"
-                                  src="fpo--16x9--720x405--005.jpg"
-                                />
-                              </picture>
-                            </div>
-                          </Image>
-                          <p
-                            className="bx--image__caption"
-                            data-autoid="dds--image__caption"
-                          >
-                            Mauris iaculis eget dolor nec hendrerit.
-                          </p>
-                        </div>
-                      </ImageWithCaption>
-                    </div>
-                    <ContentGroup
-                      cta={
-                        Object {
-                          "copy": "Lorem Ipsum dolor sit",
-                          "href": "https://example.com",
-                          "style": "text",
-                          "type": "local",
-                        }
-                      }
-                      heading="Lorem ipsum dolor sit amet."
-                      key="0"
-                    >
-                      <div
-                        className="bx--content-group"
-                        data-autoid="dds--content-group"
-                      >
-                        <h3
-                          className="bx--content-group__title"
-                          data-autoid="dds--content-group__title"
-                        >
-                          Lorem ipsum dolor sit amet.
-                        </h3>
-                        <div
-                          className="bx--content-group__col bx--content-group__children"
-                          data-autoid="dds--content-group__children"
-                        >
-                          <div
-                            data-autoid="dds--content-block-segmented__content-group"
-                          >
-                            <ContentItem
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                        <div
-                          className="bx--content-group__cta-row"
-                          data-autoid="dds--content-group__cta"
-                        >
-                          <CTA
-                            copy="Lorem Ipsum dolor sit"
-                            customClassName="bx--content-group__cta"
-                            customVideoTitle={null}
-                            href="https://example.com"
-                            style="text"
-                            type="local"
-                          >
-                            <div
-                              className="bx--content-group__cta"
-                            >
-                              <TextCTA
-                                copy="Lorem Ipsum dolor sit"
-                                customVideoTitle={null}
-                                formatCTAcopy={[Function]}
-                                href="https://example.com"
-                                iconPlacement="right"
-                                openLightBox={[Function]}
-                                renderLightBox={false}
-                                style="text"
-                                type="local"
-                                videoTitle={
-                                  Array [
-                                    Object {
-                                      "duration": "",
-                                      "key": 0,
-                                      "title": "",
-                                    },
-                                  ]
-                                }
-                              >
-                                <LinkWithIcon
-                                  href="https://example.com"
-                                  iconInline={true}
-                                  iconPlacement="right"
-                                  onClick={[Function]}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--link-with-icon__container"
-                                    data-autoid="dds--link-with-icon"
-                                  >
-                                    <Link
-                                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                      href="https://example.com"
-                                      onClick={[Function]}
-                                      size="lg"
-                                      target={null}
-                                    >
-                                      <a
-                                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                        href="https://example.com"
-                                        onClick={[Function]}
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <span>
-                                          Lorem Ipsum dolor sit
-                                        </span>
-                                        <span
-                                          className="bx--visually-hidden"
-                                        />
-                                        <ForwardRef(ArrowRight20)>
-                                          <Icon
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </LinkWithIcon>
-                              </TextCTA>
-                            </div>
-                          </CTA>
-                        </div>
-                      </div>
-                    </ContentGroup>
-                    <ContentGroup
-                      cta={
-                        Object {
-                          "copy": "Lorem Ipsum dolor sit",
-                          "href": "https://example.com",
-                          "style": "text",
-                          "type": "local",
-                        }
-                      }
-                      heading="Lorem ipsum dolor sit amet."
-                      key="1"
-                    >
-                      <div
-                        className="bx--content-group"
-                        data-autoid="dds--content-group"
-                      >
-                        <h3
-                          className="bx--content-group__title"
-                          data-autoid="dds--content-group__title"
-                        >
-                          Lorem ipsum dolor sit amet.
-                        </h3>
-                        <div
-                          className="bx--content-group__col bx--content-group__children"
-                          data-autoid="dds--content-group__children"
-                        >
-                          <div
-                            data-autoid="dds--content-block-segmented__content-group"
-                          >
-                            <ContentItem
-                              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                              </div>
-                            </ContentItem>
-                            <div
-                              data-autoid="dds--content-block-segmented__media"
-                            >
-                              <VideoPlayer
-                                autoPlay={false}
-                                playingMode="inline"
-                                showCaption={true}
-                                videoId="1_9h94wo6b"
-                              >
-                                <div
-                                  aria-label=" 0"
-                                  className="bx--video-player"
-                                  role="region"
-                                >
-                                  <div
-                                    className="bx--video-player__video-container "
-                                    data-autoid="dds--video-player__video-1_9h94wo6b"
-                                  >
-                                    <div
-                                      className="bx--video-player__video"
-                                      id="bx--video-player__video-1_9h94wo6b-35"
-                                    >
-                                      <VideoImageOverlay
-                                        embedVideo={[Function]}
-                                        playingMode="inline"
-                                        videoData={
-                                          Object {
-                                            "description": "",
-                                            "name": "",
-                                          }
-                                        }
-                                        videoId="1_9h94wo6b"
-                                      >
-                                        <button
-                                          className="bx--video-player__image-overlay"
-                                          data-autoid="dds--video-player__image-overlay"
-                                          onClick={[Function]}
-                                        >
-                                          <Image
-                                            alt=""
-                                            defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                            icon={[Function]}
-                                            refImage={[Function]}
-                                          />
-                                        </button>
-                                      </VideoImageOverlay>
-                                    </div>
-                                  </div>
-                                  <div
-                                    className="bx--video-player__video-caption"
-                                  >
-                                     0
-                                  </div>
-                                </div>
-                              </VideoPlayer>
-                            </div>
-                          </div>
-                        </div>
-                        <div
-                          className="bx--content-group__cta-row"
-                          data-autoid="dds--content-group__cta"
-                        >
-                          <CTA
-                            copy="Lorem Ipsum dolor sit"
-                            customClassName="bx--content-group__cta"
-                            customVideoTitle={null}
-                            href="https://example.com"
-                            style="text"
-                            type="local"
-                          >
-                            <div
-                              className="bx--content-group__cta"
-                            >
-                              <TextCTA
-                                copy="Lorem Ipsum dolor sit"
-                                customVideoTitle={null}
-                                formatCTAcopy={[Function]}
-                                href="https://example.com"
-                                iconPlacement="right"
-                                openLightBox={[Function]}
-                                renderLightBox={false}
-                                style="text"
-                                type="local"
-                                videoTitle={
-                                  Array [
-                                    Object {
-                                      "duration": "",
-                                      "key": 0,
-                                      "title": "",
-                                    },
-                                  ]
-                                }
-                              >
-                                <LinkWithIcon
-                                  href="https://example.com"
-                                  iconInline={true}
-                                  iconPlacement="right"
-                                  onClick={[Function]}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--link-with-icon__container"
-                                    data-autoid="dds--link-with-icon"
-                                  >
-                                    <Link
-                                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                      href="https://example.com"
-                                      onClick={[Function]}
-                                      size="lg"
-                                      target={null}
-                                    >
-                                      <a
-                                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                        href="https://example.com"
-                                        onClick={[Function]}
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <span>
-                                          Lorem Ipsum dolor sit
-                                        </span>
-                                        <span
-                                          className="bx--visually-hidden"
-                                        />
-                                        <ForwardRef(ArrowRight20)>
-                                          <Icon
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </LinkWithIcon>
-                              </TextCTA>
-                            </div>
-                          </CTA>
-                        </div>
-                      </div>
-                    </ContentGroup>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row bx--content-block__cta-row-border"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor",
-                                "href": "https://www.example.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.example.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor"
-                                        className="bx--card__footer"
-                                        href="https://www.example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                  <HorizontalRule>
-                    <hr
-                      className="bx--hr"
-                      data-autoid="dds--hr"
-                    />
-                  </HorizontalRule>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockSegmented>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block segmented With link list 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-segmented--with-link-list",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block segmented: With link list",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentBlockSegmented": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                "heading": "Lorem ipsum dolor sit amet.",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                "heading": "Lorem ipsum dolor sit amet.",
-                "image": Object {
-                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                    "sources": Array [
-                      Object {
-                        "breakpoint": 320,
-                        "src": "fpo--16x9--320x180--005.jpg",
-                      },
-                      Object {
-                        "breakpoint": 400,
-                        "src": "fpo--16x9--480x270--005.jpg",
-                      },
-                      Object {
-                        "breakpoint": 672,
-                        "src": "fpo--16x9--720x405--005.jpg",
-                      },
-                    ],
-                  },
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <ContentBlockSegmented
-            aside={
-              Object {
-                "border": true,
-                "items": <LinkList
-                  heading="Tutorials"
-                  items={
-                    Array [
-                      Object {
-                        "copy": "Containerization A Complete Guide",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "Why should you use microservices and containers",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "external",
-                      },
-                    ]
-                  }
-                  style="card"
-                  totalLinks={2}
-                />,
-              }
-            }
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Lorem ipsum dolor",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Lorem ipsum dolor sit amet."
-            items={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                  "cta": Object {
-                    "copy": "Lorem Ipsum dolor sit",
-                    "href": "https://example.com",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet.",
-                  "image": undefined,
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                  "cta": Object {
-                    "copy": "Lorem Ipsum dolor sit",
-                    "href": "https://example.com",
-                    "type": "local",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet.",
-                  "image": undefined,
-                  "video": Object {
-                    "showCaption": true,
-                    "videoId": "1_9h94wo6b",
-                  },
-                },
-              ]
-            }
-            mediaData={
-              Object {
-                "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--16x9--320x180--005.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--005.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--005.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-          >
-            <div
-              className="bx--content-block-segmented bx--content-block-segmented-border"
-              data-autoid="dds--content-block-segmented"
-            >
-              <ContentBlock
-                aside={
-                  Object {
-                    "border": true,
-                    "items": <LinkList
-                      heading="Tutorials"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Containerization A Complete Guide",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Why should you use microservices and containers",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "external",
-                          },
-                        ]
-                      }
-                      style="card"
-                      totalLinks={2}
-                    />,
-                  }
-                }
-                border={false}
-                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit."
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Lorem ipsum dolor sit amet."
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Lorem ipsum dolor sit amet.
-                  </h2>
-                  <div
-                    className="bx--content-layout bx--content-layout--with-complementary"
-                  >
-                    <div
-                      className="bx--content-layout__body"
-                    >
-                      <div
-                        className="bx--content-block__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p> ",
-                          }
-                        }
-                      />
-                      <div
-                        className="bx--content-block__children"
-                        data-autoid="dds--content-block__children"
-                      >
-                        <div
-                          data-autoid="dds--content-block-segmented__media"
-                        >
-                          <ImageWithCaption
-                            copy=""
-                            heading="Mauris iaculis eget dolor nec hendrerit."
-                            image={
-                              Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--16x9--720x405--005.jpg",
-                                "sources": Array [
-                                  Object {
-                                    "breakpoint": 320,
-                                    "src": "fpo--16x9--320x180--005.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 400,
-                                    "src": "fpo--16x9--480x270--005.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 672,
-                                    "src": "fpo--16x9--720x405--005.jpg",
-                                  },
-                                ],
-                              }
-                            }
-                            lightbox={false}
-                          >
-                            <div
-                              className="bx--image-with-caption"
-                              data-autoid="dds--image-with-caption"
-                            >
-                              <Image
-                                alt="Image alt text"
-                                defaultSrc="fpo--16x9--720x405--005.jpg"
-                                sources={
-                                  Array [
-                                    Object {
-                                      "breakpoint": 320,
-                                      "src": "fpo--16x9--320x180--005.jpg",
-                                    },
-                                    Object {
-                                      "breakpoint": 400,
-                                      "src": "fpo--16x9--480x270--005.jpg",
-                                    },
-                                    Object {
-                                      "breakpoint": 672,
-                                      "src": "fpo--16x9--720x405--005.jpg",
-                                    },
-                                  ]
-                                }
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <source
-                                      key="0"
-                                      media="(min-width: 672px)"
-                                      srcSet="fpo--16x9--720x405--005.jpg"
-                                    />
-                                    <source
-                                      key="1"
-                                      media="(min-width: 400px)"
-                                      srcSet="fpo--16x9--480x270--005.jpg"
-                                    />
-                                    <source
-                                      key="2"
-                                      media="(min-width: 320px)"
-                                      srcSet="fpo--16x9--320x180--005.jpg"
-                                    />
-                                    <img
-                                      alt="Image alt text"
-                                      className="bx--image__img"
-                                      src="fpo--16x9--720x405--005.jpg"
-                                    />
-                                  </picture>
-                                </div>
-                              </Image>
-                              <p
-                                className="bx--image__caption"
-                                data-autoid="dds--image__caption"
-                              >
-                                Mauris iaculis eget dolor nec hendrerit.
-                              </p>
-                            </div>
-                          </ImageWithCaption>
-                        </div>
-                        <ContentGroup
-                          cta={
-                            Object {
-                              "copy": "Lorem Ipsum dolor sit",
-                              "href": "https://example.com",
-                              "style": "text",
-                              "type": "local",
-                            }
-                          }
-                          heading="Lorem ipsum dolor sit amet."
-                          key="0"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet.
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <div
-                                data-autoid="dds--content-block-segmented__content-group"
-                              >
-                                <ContentItem
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                  key="0"
-                                >
-                                  <div
-                                    className="bx--content-item"
-                                    data-autoid="dds--content-item"
-                                  >
-                                    <div
-                                      className="bx--content-item__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                        }
-                                      }
-                                      data-autoid="dds--content-item__copy"
-                                    />
-                                  </div>
-                                </ContentItem>
-                              </div>
-                            </div>
-                            <div
-                              className="bx--content-group__cta-row"
-                              data-autoid="dds--content-group__cta"
-                            >
-                              <CTA
-                                copy="Lorem Ipsum dolor sit"
-                                customClassName="bx--content-group__cta"
-                                customVideoTitle={null}
-                                href="https://example.com"
-                                style="text"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-group__cta"
-                                >
-                                  <TextCTA
-                                    copy="Lorem Ipsum dolor sit"
-                                    customVideoTitle={null}
-                                    formatCTAcopy={[Function]}
-                                    href="https://example.com"
-                                    iconPlacement="right"
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="text"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <LinkWithIcon
-                                      href="https://example.com"
-                                      iconInline={true}
-                                      iconPlacement="right"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--link-with-icon__container"
-                                        data-autoid="dds--link-with-icon"
-                                      >
-                                        <Link
-                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                          href="https://example.com"
-                                          onClick={[Function]}
-                                          size="lg"
-                                          target={null}
-                                        >
-                                          <a
-                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                            href="https://example.com"
-                                            onClick={[Function]}
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <span>
-                                              Lorem Ipsum dolor sit
-                                            </span>
-                                            <span
-                                              className="bx--visually-hidden"
-                                            />
-                                            <ForwardRef(ArrowRight20)>
-                                              <Icon
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </LinkWithIcon>
-                                  </TextCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                        <ContentGroup
-                          cta={
-                            Object {
-                              "copy": "Lorem Ipsum dolor sit",
-                              "href": "https://example.com",
-                              "style": "text",
-                              "type": "local",
-                            }
-                          }
-                          heading="Lorem ipsum dolor sit amet."
-                          key="1"
-                        >
-                          <div
-                            className="bx--content-group"
-                            data-autoid="dds--content-group"
-                          >
-                            <h3
-                              className="bx--content-group__title"
-                              data-autoid="dds--content-group__title"
-                            >
-                              Lorem ipsum dolor sit amet.
-                            </h3>
-                            <div
-                              className="bx--content-group__col bx--content-group__children"
-                              data-autoid="dds--content-group__children"
-                            >
-                              <div
-                                data-autoid="dds--content-block-segmented__content-group"
-                              >
-                                <ContentItem
-                                  copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                                  key="1"
-                                >
-                                  <div
-                                    className="bx--content-item"
-                                    data-autoid="dds--content-item"
-                                  >
-                                    <div
-                                      className="bx--content-item__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                                        }
-                                      }
-                                      data-autoid="dds--content-item__copy"
-                                    />
-                                  </div>
-                                </ContentItem>
-                                <div
-                                  data-autoid="dds--content-block-segmented__media"
-                                >
-                                  <VideoPlayer
-                                    autoPlay={false}
-                                    playingMode="inline"
-                                    showCaption={true}
-                                    videoId="1_9h94wo6b"
-                                  >
-                                    <div
-                                      aria-label=" 0"
-                                      className="bx--video-player"
-                                      role="region"
-                                    >
-                                      <div
-                                        className="bx--video-player__video-container "
-                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                      >
-                                        <div
-                                          className="bx--video-player__video"
-                                          id="bx--video-player__video-1_9h94wo6b-38"
-                                        >
-                                          <VideoImageOverlay
-                                            embedVideo={[Function]}
-                                            playingMode="inline"
-                                            videoData={
-                                              Object {
-                                                "description": "",
-                                                "name": "",
-                                              }
-                                            }
-                                            videoId="1_9h94wo6b"
-                                          >
-                                            <button
-                                              className="bx--video-player__image-overlay"
-                                              data-autoid="dds--video-player__image-overlay"
-                                              onClick={[Function]}
-                                            >
-                                              <Image
-                                                alt=""
-                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                icon={[Function]}
-                                                refImage={[Function]}
-                                              />
-                                            </button>
-                                          </VideoImageOverlay>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--video-player__video-caption"
-                                      >
-                                         0
-                                      </div>
-                                    </div>
-                                  </VideoPlayer>
-                                </div>
-                              </div>
-                            </div>
-                            <div
-                              className="bx--content-group__cta-row"
-                              data-autoid="dds--content-group__cta"
-                            >
-                              <CTA
-                                copy="Lorem Ipsum dolor sit"
-                                customClassName="bx--content-group__cta"
-                                customVideoTitle={null}
-                                href="https://example.com"
-                                style="text"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-group__cta"
-                                >
-                                  <TextCTA
-                                    copy="Lorem Ipsum dolor sit"
-                                    customVideoTitle={null}
-                                    formatCTAcopy={[Function]}
-                                    href="https://example.com"
-                                    iconPlacement="right"
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="text"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <LinkWithIcon
-                                      href="https://example.com"
-                                      iconInline={true}
-                                      iconPlacement="right"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--link-with-icon__container"
-                                        data-autoid="dds--link-with-icon"
-                                      >
-                                        <Link
-                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                          href="https://example.com"
-                                          onClick={[Function]}
-                                          size="lg"
-                                          target={null}
-                                        >
-                                          <a
-                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                            href="https://example.com"
-                                            onClick={[Function]}
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <span>
-                                              Lorem Ipsum dolor sit
-                                            </span>
-                                            <span
-                                              className="bx--visually-hidden"
-                                            />
-                                            <ForwardRef(ArrowRight20)>
-                                              <Icon
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </LinkWithIcon>
-                                  </TextCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </div>
-                        </ContentGroup>
-                      </div>
-                      <div
-                        className="bx--content-block__cta-row"
-                        data-autoid="dds--content-block__cta"
-                      >
-                        <CTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                            }
-                          }
-                          customClassName="bx--content-block__cta bx--content-block__cta-col"
-                          customVideoTitle={null}
-                          heading="Lorem ipsum dolor"
-                          href=""
-                          style="card"
-                          type="local"
-                        >
-                          <div
-                            className="bx--content-block__cta bx--content-block__cta-col"
-                          >
-                            <CardCTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={false}
-                              heading="Lorem ipsum dolor"
-                              href=""
-                              media={null}
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="card"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <CardLink
-                                card={
-                                  Object {
-                                    "copy": "",
-                                    "cta": Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "local",
-                                    },
-                                    "customVideoTitle": null,
-                                    "heading": "Lorem ipsum dolor",
-                                    "href": "https://www.example.com",
-                                    "media": null,
-                                    "size": undefined,
-                                    "target": null,
-                                  }
-                                }
-                                customClassName="bx--card__CardCTA"
-                                disabled={false}
-                              >
-                                <Card
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.example.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "local",
-                                    }
-                                  }
-                                  customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  heading="Lorem ipsum dolor"
-                                  href="https://www.example.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <Tile
-                                    className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.example.com"
-                                    light={false}
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      data-autoid="dds--card"
-                                      href="https://www.example.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--card__wrapper"
-                                      >
-                                        <div
-                                          className="bx--card__content"
-                                        >
-                                          <h3
-                                            className="bx--card__heading"
-                                          >
-                                            Lorem ipsum dolor
-                                          </h3>
-                                          <Link
-                                            aria-label="Lorem ipsum dolor"
-                                            className="bx--card__footer"
-                                            href="https://www.example.com"
-                                            target={null}
-                                          >
-                                            <a
-                                              aria-label="Lorem ipsum dolor"
-                                              className="bx--link bx--card__footer"
-                                              href="https://www.example.com"
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <ForwardRef(ArrowRight20)
-                                                className="bx--card__cta"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                              >
-                                                <Icon
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--card__cta"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </Tile>
-                                </Card>
-                              </CardLink>
-                            </CardCTA>
-                          </div>
-                        </CTA>
-                      </div>
-                    </div>
-                    <aside
-                      className="bx--content-layout__aside"
-                    >
-                      <LinkList
-                        heading="Tutorials"
-                        items={
-                          Array [
-                            Object {
-                              "copy": "Containerization A Complete Guide",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "local",
-                            },
-                            Object {
-                              "copy": "Why should you use microservices and containers",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "external",
-                            },
-                          ]
-                        }
-                        style="card"
-                        totalLinks={2}
-                      >
-                        <div
-                          className="bx--link-list"
-                          data-autoid="dds--link-list"
-                        >
-                          <h4
-                            className="bx--link-list__heading"
-                          >
-                            Tutorials
-                          </h4>
-                          <ul
-                            className="bx--link-list__list bx--link-list__list--card"
-                          >
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--local"
-                              key="0"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Containerization A Complete Guide"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="local"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Containerization A Complete Guide"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Containerization A Complete Guide",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": null,
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Containerization A Complete Guide"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Containerization A Complete Guide</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Containerization A Complete Guide"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    aria-label="Containerization A Complete Guide"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <ForwardRef(ArrowRight20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--external"
-                              key="1"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Why should you use microservices and containers"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="external"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Why should you use microservices and containers"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="external"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Why should you use microservices and containers",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": "_blank",
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Why should you use microservices and containers"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target="_blank"
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target="_blank"
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target="_blank"
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Why should you use microservices and containers</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target="_blank"
-                                                >
-                                                  <a
-                                                    aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel="noopener"
-                                                    target="_blank"
-                                                  >
-                                                    <ForwardRef(Launch20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 32 32"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                          />
-                                                          <path
-                                                            d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(Launch20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                          </ul>
-                        </div>
-                      </LinkList>
-                    </aside>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockSegmented>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block simple Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-simple--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block simple: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockSimple
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Curabitur malesuada varius mi eu posuere"
-          >
-            <div
-              className="bx--content-block-simple"
-              data-autoid="dds--content-block-simple"
-            >
-              <ContentBlock
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Curabitur malesuada varius mi eu posuere"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Curabitur malesuada varius mi eu posuere
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--content-block-simple__content"
-                    >
-                      <ContentItem
-                        copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-                      >
-                        <div
-                          className="bx--content-item"
-                          data-autoid="dds--content-item"
-                        >
-                          <div
-                            className="bx--content-item__copy"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Here are  some common categories:</p> <p> Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 1a</li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                              }
-                            }
-                            data-autoid="dds--content-item__copy"
-                          />
-                        </div>
-                      </ContentItem>
-                    </div>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockSimple>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block simple With image 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-simple--with-image",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block simple: With image",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockSimple
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Curabitur malesuada varius mi eu posuere"
-            mediaData={
-              Object {
-                "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--002.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--1x1--320x320--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--002.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-          >
-            <div
-              className="bx--content-block-simple"
-              data-autoid="dds--content-block-simple"
-            >
-              <ContentBlock
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Curabitur malesuada varius mi eu posuere"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Curabitur malesuada varius mi eu posuere
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--content-block-simple__content"
-                    >
-                      <ContentItem
-                        copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-                      >
-                        <div
-                          className="bx--content-item"
-                          data-autoid="dds--content-item"
-                        >
-                          <div
-                            className="bx--content-item__copy"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Here are  some common categories:</p> <p> Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 1a</li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                              }
-                            }
-                            data-autoid="dds--content-item__copy"
-                          />
-                        </div>
-                      </ContentItem>
-                      <div
-                        className="bx--content-block-simple__media-image"
-                        data-autoid="dds--content-block-simple__media"
-                      >
-                        <ImageWithCaption
-                          copy=""
-                          heading="Mauris iaculis eget dolor nec hendrerit."
-                          image={
-                            Object {
-                              "alt": "Image alt text",
-                              "defaultSrc": "fpo--16x9--720x405--002.jpg",
-                              "sources": Array [
-                                Object {
-                                  "breakpoint": 320,
-                                  "src": "fpo--1x1--320x320--002.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 400,
-                                  "src": "fpo--16x9--480x270--002.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 672,
-                                  "src": "fpo--16x9--720x405--002.jpg",
-                                },
-                              ],
-                            }
-                          }
-                          lightbox={false}
-                        >
-                          <div
-                            className="bx--image-with-caption"
-                            data-autoid="dds--image-with-caption"
-                          >
-                            <Image
-                              alt="Image alt text"
-                              defaultSrc="fpo--16x9--720x405--002.jpg"
-                              sources={
-                                Array [
-                                  Object {
-                                    "breakpoint": 320,
-                                    "src": "fpo--1x1--320x320--002.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 400,
-                                    "src": "fpo--16x9--480x270--002.jpg",
-                                  },
-                                  Object {
-                                    "breakpoint": 672,
-                                    "src": "fpo--16x9--720x405--002.jpg",
-                                  },
-                                ]
-                              }
-                            >
-                              <div
-                                className="bx--image"
-                                data-autoid="dds--image__longdescription"
-                              >
-                                <picture>
-                                  <source
-                                    key="0"
-                                    media="(min-width: 672px)"
-                                    srcSet="fpo--16x9--720x405--002.jpg"
-                                  />
-                                  <source
-                                    key="1"
-                                    media="(min-width: 400px)"
-                                    srcSet="fpo--16x9--480x270--002.jpg"
-                                  />
-                                  <source
-                                    key="2"
-                                    media="(min-width: 320px)"
-                                    srcSet="fpo--1x1--320x320--002.jpg"
-                                  />
-                                  <img
-                                    alt="Image alt text"
-                                    className="bx--image__img"
-                                    src="fpo--16x9--720x405--002.jpg"
-                                  />
-                                </picture>
-                              </div>
-                            </Image>
-                            <p
-                              className="bx--image__caption"
-                              data-autoid="dds--image__caption"
-                            >
-                              Mauris iaculis eget dolor nec hendrerit.
-                            </p>
-                          </div>
-                        </ImageWithCaption>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockSimple>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block simple With link list 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-simple--with-link-list",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block simple: With link list",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockSimple
-            aside={
-              Object {
-                "border": false,
-                "items": <LinkList
-                  heading="Tutorials"
-                  items={
-                    Array [
-                      Object {
-                        "copy": "Containerization A Complete Guide",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "local",
-                      },
-                      Object {
-                        "copy": "Why should you use microservices and containers",
-                        "cta": Object {
-                          "href": "https://ibm.com",
-                        },
-                        "type": "external",
-                      },
-                    ]
-                  }
-                  style="card"
-                />,
-              }
-            }
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Curabitur malesuada varius mi eu posuere"
-            mediaData={
-              Object {
-                "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--002.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--1x1--320x320--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--002.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-          >
-            <div
-              className="bx--content-block-simple"
-              data-autoid="dds--content-block-simple"
-            >
-              <ContentBlock
-                aside={
-                  Object {
-                    "border": false,
-                    "items": <LinkList
-                      heading="Tutorials"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Containerization A Complete Guide",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Why should you use microservices and containers",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "external",
-                          },
-                        ]
-                      }
-                      style="card"
-                    />,
-                  }
-                }
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Curabitur malesuada varius mi eu posuere"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Curabitur malesuada varius mi eu posuere
-                  </h2>
-                  <div
-                    className="bx--content-layout bx--content-layout--with-complementary"
-                  >
-                    <div
-                      className="bx--content-layout__body"
-                    >
-                      <div
-                        className="bx--content-block__children"
-                        data-autoid="dds--content-block__children"
-                      >
-                        <div
-                          className="bx--content-block-simple__content"
-                        >
-                          <ContentItem
-                            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-                          >
-                            <div
-                              className="bx--content-item"
-                              data-autoid="dds--content-item"
-                            >
-                              <div
-                                className="bx--content-item__copy"
-                                dangerouslySetInnerHTML={
-                                  Object {
-                                    "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Here are  some common categories:</p> <p> Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 1a</li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                                  }
-                                }
-                                data-autoid="dds--content-item__copy"
-                              />
-                            </div>
-                          </ContentItem>
-                          <div
-                            className="bx--content-block-simple__media-image"
-                            data-autoid="dds--content-block-simple__media"
-                          >
-                            <ImageWithCaption
-                              copy=""
-                              heading="Mauris iaculis eget dolor nec hendrerit."
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--16x9--720x405--002.jpg",
-                                  "sources": Array [
-                                    Object {
-                                      "breakpoint": 320,
-                                      "src": "fpo--1x1--320x320--002.jpg",
-                                    },
-                                    Object {
-                                      "breakpoint": 400,
-                                      "src": "fpo--16x9--480x270--002.jpg",
-                                    },
-                                    Object {
-                                      "breakpoint": 672,
-                                      "src": "fpo--16x9--720x405--002.jpg",
-                                    },
-                                  ],
-                                }
-                              }
-                              lightbox={false}
-                            >
-                              <div
-                                className="bx--image-with-caption"
-                                data-autoid="dds--image-with-caption"
-                              >
-                                <Image
-                                  alt="Image alt text"
-                                  defaultSrc="fpo--16x9--720x405--002.jpg"
-                                  sources={
-                                    Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--1x1--320x320--002.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--002.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--002.jpg",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <div
-                                    className="bx--image"
-                                    data-autoid="dds--image__longdescription"
-                                  >
-                                    <picture>
-                                      <source
-                                        key="0"
-                                        media="(min-width: 672px)"
-                                        srcSet="fpo--16x9--720x405--002.jpg"
-                                      />
-                                      <source
-                                        key="1"
-                                        media="(min-width: 400px)"
-                                        srcSet="fpo--16x9--480x270--002.jpg"
-                                      />
-                                      <source
-                                        key="2"
-                                        media="(min-width: 320px)"
-                                        srcSet="fpo--1x1--320x320--002.jpg"
-                                      />
-                                      <img
-                                        alt="Image alt text"
-                                        className="bx--image__img"
-                                        src="fpo--16x9--720x405--002.jpg"
-                                      />
-                                    </picture>
-                                  </div>
-                                </Image>
-                                <p
-                                  className="bx--image__caption"
-                                  data-autoid="dds--image__caption"
-                                >
-                                  Mauris iaculis eget dolor nec hendrerit.
-                                </p>
-                              </div>
-                            </ImageWithCaption>
-                          </div>
-                        </div>
-                      </div>
-                      <div
-                        className="bx--content-block__cta-row"
-                        data-autoid="dds--content-block__cta"
-                      >
-                        <CTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customClassName="bx--content-block__cta bx--content-block__cta-col"
-                          customVideoTitle={null}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          style="card"
-                          type="local"
-                        >
-                          <div
-                            className="bx--content-block__cta bx--content-block__cta-col"
-                          >
-                            <CardCTA
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={false}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href=""
-                              media={null}
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="card"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <CardLink
-                                card={
-                                  Object {
-                                    "copy": "",
-                                    "cta": Object {
-                                      "href": "https://www.ibm.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "local",
-                                    },
-                                    "customVideoTitle": null,
-                                    "heading": "Lorem ipsum dolor sit ametttt",
-                                    "href": "https://www.ibm.com",
-                                    "media": null,
-                                    "size": undefined,
-                                    "target": null,
-                                  }
-                                }
-                                customClassName="bx--card__CardCTA"
-                                disabled={false}
-                              >
-                                <Card
-                                  copy=""
-                                  cta={
-                                    Object {
-                                      "href": "https://www.ibm.com",
-                                      "icon": Object {
-                                        "src": Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        },
-                                      },
-                                      "type": "local",
-                                    }
-                                  }
-                                  customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  heading="Lorem ipsum dolor sit ametttt"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <Tile
-                                    className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                    customVideoTitle={null}
-                                    data-autoid="dds--card"
-                                    href="https://www.ibm.com"
-                                    light={false}
-                                    media={null}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                      customVideoTitle={null}
-                                      data-autoid="dds--card"
-                                      href="https://www.ibm.com"
-                                      media={null}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--card__wrapper"
-                                      >
-                                        <div
-                                          className="bx--card__content"
-                                        >
-                                          <h3
-                                            className="bx--card__heading"
-                                          >
-                                            Lorem ipsum dolor sit ametttt
-                                          </h3>
-                                          <Link
-                                            aria-label="Lorem ipsum dolor sit ametttt"
-                                            className="bx--card__footer"
-                                            href="https://www.ibm.com"
-                                            target={null}
-                                          >
-                                            <a
-                                              aria-label="Lorem ipsum dolor sit ametttt"
-                                              className="bx--link bx--card__footer"
-                                              href="https://www.ibm.com"
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <ForwardRef(ArrowRight20)
-                                                className="bx--card__cta"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                              >
-                                                <Icon
-                                                  className="bx--card__cta"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  src={
-                                                    Object {
-                                                      "$$typeof": Symbol(react.forward_ref),
-                                                      "render": [Function],
-                                                    }
-                                                  }
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--card__cta"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    src={
-                                                      Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      }
-                                                    }
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </Tile>
-                                </Card>
-                              </CardLink>
-                            </CardCTA>
-                          </div>
-                        </CTA>
-                      </div>
-                    </div>
-                    <aside
-                      className="bx--content-layout__aside"
-                    >
-                      <LinkList
-                        heading="Tutorials"
-                        items={
-                          Array [
-                            Object {
-                              "copy": "Containerization A Complete Guide",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "local",
-                            },
-                            Object {
-                              "copy": "Why should you use microservices and containers",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                              },
-                              "type": "external",
-                            },
-                          ]
-                        }
-                        style="card"
-                      >
-                        <div
-                          className="bx--link-list"
-                          data-autoid="dds--link-list"
-                        >
-                          <h4
-                            className="bx--link-list__heading"
-                          >
-                            Tutorials
-                          </h4>
-                          <ul
-                            className="bx--link-list__list bx--link-list__list--card"
-                          >
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--local"
-                              key="0"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Containerization A Complete Guide"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="local"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Containerization A Complete Guide"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Containerization A Complete Guide",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": null,
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Containerization A Complete Guide"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "local",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target={null}
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target={null}
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target={null}
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Containerization A Complete Guide</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Containerization A Complete Guide"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target={null}
-                                                >
-                                                  <a
-                                                    aria-label="Containerization A Complete Guide"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel={null}
-                                                    target={null}
-                                                  >
-                                                    <ForwardRef(ArrowRight20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(ArrowRight20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                            <li
-                              className="bx--link-list__list__CTA bx--link-list__list--external"
-                              key="1"
-                            >
-                              <CTA
-                                ariaRole="listitem"
-                                copy="Why should you use microservices and containers"
-                                cta={
-                                  Object {
-                                    "href": "https://ibm.com",
-                                  }
-                                }
-                                customVideoTitle={null}
-                                disableImage={true}
-                                href=""
-                                style="card"
-                                type="external"
-                              >
-                                <div>
-                                  <CardCTA
-                                    ariaRole="listitem"
-                                    copy="Why should you use microservices and containers"
-                                    cta={
-                                      Object {
-                                        "href": "https://ibm.com",
-                                      }
-                                    }
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={null}
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="card"
-                                    type="external"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <CardLink
-                                      card={
-                                        Object {
-                                          "ariaRole": "listitem",
-                                          "copy": "Why should you use microservices and containers",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          },
-                                          "customVideoTitle": null,
-                                          "href": "https://ibm.com",
-                                          "media": null,
-                                          "size": undefined,
-                                          "target": "_blank",
-                                        }
-                                      }
-                                      customClassName="bx--card__CardCTA"
-                                      disabled={false}
-                                    >
-                                      <Card
-                                        ariaRole="listitem"
-                                        copy="Why should you use microservices and containers"
-                                        cta={
-                                          Object {
-                                            "href": "https://ibm.com",
-                                            "icon": Object {
-                                              "src": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                            },
-                                            "type": "external",
-                                          }
-                                        }
-                                        customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                        customVideoTitle={null}
-                                        href="https://ibm.com"
-                                        media={null}
-                                        target="_blank"
-                                      >
-                                        <Tile
-                                          ariaRole="listitem"
-                                          className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                          customVideoTitle={null}
-                                          data-autoid="dds--card"
-                                          href="https://ibm.com"
-                                          light={false}
-                                          media={null}
-                                          target="_blank"
-                                        >
-                                          <div
-                                            ariaRole="listitem"
-                                            className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                            customVideoTitle={null}
-                                            data-autoid="dds--card"
-                                            href="https://ibm.com"
-                                            media={null}
-                                            target="_blank"
-                                          >
-                                            <div
-                                              className="bx--card__wrapper"
-                                            >
-                                              <div
-                                                className="bx--card__content"
-                                              >
-                                                <div
-                                                  className="bx--card__copy"
-                                                  dangerouslySetInnerHTML={
-                                                    Object {
-                                                      "__html": "<p>Why should you use microservices and containers</p> ",
-                                                    }
-                                                  }
-                                                />
-                                                <Link
-                                                  aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                  className="bx--card__footer"
-                                                  href="https://ibm.com"
-                                                  target="_blank"
-                                                >
-                                                  <a
-                                                    aria-label="Why should you use microservices and containers - This link opens in a new tab"
-                                                    className="bx--link bx--card__footer"
-                                                    href="https://ibm.com"
-                                                    rel="noopener"
-                                                    target="_blank"
-                                                  >
-                                                    <ForwardRef(Launch20)
-                                                      className="bx--card__cta"
-                                                      src={
-                                                        Object {
-                                                          "$$typeof": Symbol(react.forward_ref),
-                                                          "render": [Function],
-                                                        }
-                                                      }
-                                                    >
-                                                      <Icon
-                                                        className="bx--card__cta"
-                                                        fill="currentColor"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        src={
-                                                          Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          }
-                                                        }
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <svg
-                                                          aria-hidden={true}
-                                                          className="bx--card__cta"
-                                                          fill="currentColor"
-                                                          focusable="false"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                          viewBox="0 0 32 32"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <path
-                                                            d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                          />
-                                                          <path
-                                                            d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                          />
-                                                        </svg>
-                                                      </Icon>
-                                                    </ForwardRef(Launch20)>
-                                                  </a>
-                                                </Link>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </Tile>
-                                      </Card>
-                                    </CardLink>
-                                  </CardCTA>
-                                </div>
-                              </CTA>
-                            </li>
-                          </ul>
-                        </div>
-                      </LinkList>
-                    </aside>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockSimple>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content block simple With video 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-block-simple--with-video",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content block simple: Default",
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 content-block-story"
-        >
-          <ContentBlockSimple
-            copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.ibm.com",
-                },
-                "heading": "Lorem ipsum dolor sit ametttt",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Curabitur malesuada varius mi eu posuere"
-            mediaData={
-              Object {
-                "showCaption": true,
-                "videoId": "1_9h94wo6b",
-              }
-            }
-            mediaType="video"
-          >
-            <div
-              className="bx--content-block-simple"
-              data-autoid="dds--content-block-simple"
-            >
-              <ContentBlock
-                border={false}
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit ametttt",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Curabitur malesuada varius mi eu posuere"
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Curabitur malesuada varius mi eu posuere
-                  </h2>
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--content-block-simple__content"
-                    >
-                      <ContentItem
-                        copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-"
-                      >
-                        <div
-                          className="bx--content-item"
-                          data-autoid="dds--content-item"
-                        >
-                          <div
-                            className="bx--content-item__copy"
-                            dangerouslySetInnerHTML={
-                              Object {
-                                "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est.  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales  nulla quis, <em>consequat</em> libero. Here are  some common categories:</p> <p> Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 1a</li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                              }
-                            }
-                            data-autoid="dds--content-item__copy"
-                          />
-                        </div>
-                      </ContentItem>
-                      <div
-                        className="bx--content-block-simple__media-video"
-                        data-autoid="dds--content-block-simple__media"
-                      >
-                        <VideoPlayer
-                          autoPlay={false}
-                          playingMode="inline"
-                          showCaption={true}
-                          videoId="1_9h94wo6b"
-                        >
-                          <div
-                            aria-label=" 0"
-                            className="bx--video-player"
-                            role="region"
-                          >
-                            <div
-                              className="bx--video-player__video-container "
-                              data-autoid="dds--video-player__video-1_9h94wo6b"
-                            >
-                              <div
-                                className="bx--video-player__video"
-                                id="bx--video-player__video-1_9h94wo6b-42"
-                              >
-                                <VideoImageOverlay
-                                  embedVideo={[Function]}
-                                  playingMode="inline"
-                                  videoData={
-                                    Object {
-                                      "description": "",
-                                      "name": "",
-                                    }
-                                  }
-                                  videoId="1_9h94wo6b"
-                                >
-                                  <button
-                                    className="bx--video-player__image-overlay"
-                                    data-autoid="dds--video-player__image-overlay"
-                                    onClick={[Function]}
-                                  >
-                                    <Image
-                                      alt=""
-                                      defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                      icon={[Function]}
-                                      refImage={[Function]}
-                                    />
-                                  </button>
-                                </VideoImageOverlay>
-                              </div>
-                            </div>
-                            <div
-                              className="bx--video-player__video-caption"
-                            >
-                               0
-                            </div>
-                          </div>
-                        </VideoPlayer>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    className="bx--content-block__cta-row"
-                    data-autoid="dds--content-block__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.ibm.com",
-                        }
-                      }
-                      customClassName="bx--content-block__cta bx--content-block__cta-col"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit ametttt"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-block__cta bx--content-block__cta-col"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.ibm.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit ametttt"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit ametttt",
-                                "href": "https://www.ibm.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit ametttt"
-                              href="https://www.ibm.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.ibm.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit ametttt
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit ametttt"
-                                        className="bx--card__footer"
-                                        href="https://www.ibm.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit ametttt"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.ibm.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-            </div>
-          </ContentBlockSimple>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content group Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-group--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentGroup/__stories__/ContentGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content group: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4"
-        >
-          <ContentGroup
-            addChildren=""
-            contentItemCta={
-              Object {
-                "copy": "Read more about NLP",
-                "href": "https://www.example.com",
-                "style": "text",
-                "type": "local",
-              }
-            }
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ligula, vitae finibus ante aliquet a."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Learn more about natual language processing",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Natural language processing (NLP)"
-            mediaData={
-              Object {
-                "image": Object {
-                  "heading": "Image caption text",
-                  "image": Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                    "sources": Array [
-                      Object {
-                        "breakpoint": 320,
-                        "src": "fpo--16x9--320x180--003.jpg",
-                      },
-                      Object {
-                        "breakpoint": 400,
-                        "src": "fpo--16x9--480x270--003.jpg",
-                      },
-                      Object {
-                        "breakpoint": 672,
-                        "src": "fpo--16x9--720x405--003.jpg",
-                      },
-                    ],
-                  },
-                },
-                "video": Object {
-                  "showCaption": true,
-                  "videoId": "1_9h94wo6b",
-                },
-              }
-            }
-          >
-            <div
-              className="bx--content-group"
-              data-autoid="dds--content-group"
-            >
-              <h3
-                className="bx--content-group__title"
-                data-autoid="dds--content-group__title"
-              >
-                Natural language processing (NLP)
-              </h3>
-              <div
-                className="bx--content-group__copy"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ligula, vitae finibus ante aliquet a.</p> ",
-                  }
-                }
-              />
-              <div
-                className="bx--content-group__col bx--content-group__children"
-                data-autoid="dds--content-group__children"
-              />
-              <div
-                className="bx--content-group__cta-row"
-                data-autoid="dds--content-group__cta"
-              >
-                <CTA
-                  copy=""
-                  cta={
-                    Object {
-                      "href": "https://www.example.com",
-                    }
-                  }
-                  customClassName="bx--content-group__cta"
-                  customVideoTitle={null}
-                  heading="Learn more about natual language processing"
-                  href=""
-                  style="card"
-                  type="local"
-                >
-                  <div
-                    className="bx--content-group__cta"
-                  >
-                    <CardCTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                        }
-                      }
-                      customVideoTitle={null}
-                      disableImage={false}
-                      heading="Learn more about natual language processing"
-                      href=""
-                      media={null}
-                      openLightBox={[Function]}
-                      renderLightBox={false}
-                      style="card"
-                      type="local"
-                      videoTitle={
-                        Array [
-                          Object {
-                            "duration": "",
-                            "key": 0,
-                            "title": "",
-                          },
-                        ]
-                      }
-                    >
-                      <CardLink
-                        card={
-                          Object {
-                            "copy": "",
-                            "cta": Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            },
-                            "customVideoTitle": null,
-                            "heading": "Learn more about natual language processing",
-                            "href": "https://www.example.com",
-                            "media": null,
-                            "size": undefined,
-                            "target": null,
-                          }
-                        }
-                        customClassName="bx--card__CardCTA"
-                        disabled={false}
-                      >
-                        <Card
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                              "icon": Object {
-                                "src": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                              },
-                              "type": "local",
-                            }
-                          }
-                          customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                          customVideoTitle={null}
-                          heading="Learn more about natual language processing"
-                          href="https://www.example.com"
-                          media={null}
-                          target={null}
-                        >
-                          <Tile
-                            className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            data-autoid="dds--card"
-                            href="https://www.example.com"
-                            light={false}
-                            media={null}
-                            target={null}
-                          >
-                            <div
-                              className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                className="bx--card__wrapper"
-                              >
-                                <div
-                                  className="bx--card__content"
-                                >
-                                  <h3
-                                    className="bx--card__heading"
-                                  >
-                                    Learn more about natual language processing
-                                  </h3>
-                                  <Link
-                                    aria-label="Learn more about natual language processing"
-                                    className="bx--card__footer"
-                                    href="https://www.example.com"
-                                    target={null}
-                                  >
-                                    <a
-                                      aria-label="Learn more about natual language processing"
-                                      className="bx--link bx--card__footer"
-                                      href="https://www.example.com"
-                                      rel={null}
-                                      target={null}
-                                    >
-                                      <ForwardRef(ArrowRight20)
-                                        className="bx--card__cta"
-                                        src={
-                                          Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          }
-                                        }
-                                      >
-                                        <Icon
-                                          className="bx--card__cta"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ArrowRight20)>
-                                    </a>
-                                  </Link>
-                                </div>
-                              </div>
-                            </div>
-                          </Tile>
-                        </Card>
-                      </CardLink>
-                    </CardCTA>
-                  </div>
-                </CTA>
-              </div>
-            </div>
-          </ContentGroup>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content group banner Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-group-banner--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentGroupBanner/__stories__/ContentGroupBanner.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-group-banner"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content group cards Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-group-cards--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentGroupCards/__stories__/ContentGroupCards.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content group cards: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4"
-        >
-          <ContentGroupCards
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-            heading="Lorem ipsum dolor sit amet"
-            items={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt",
-                  "cta": Object {
-                    "href": "https://www.example.com",
-                  },
-                  "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit",
-                },
-              ]
-            }
-          >
-            <section
-              className="bx--content-group-cards"
-              data-autoid="dds--content-group-cards"
-            >
-              <ContentGroup
-                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                heading="Lorem ipsum dolor sit amet"
-              >
-                <div
-                  className="bx--content-group"
-                  data-autoid="dds--content-group"
-                >
-                  <h3
-                    className="bx--content-group__title"
-                    data-autoid="dds--content-group__title"
-                  >
-                    Lorem ipsum dolor sit amet
-                  </h3>
-                  <div
-                    className="bx--content-group__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-group__col bx--content-group__children"
-                    data-autoid="dds--content-group__children"
-                  >
-                    <div
-                      className="bx--content-group-cards-group bx--grid--condensed"
-                      data-autoid="dds--content-group-cards-group"
-                    >
-                      <div
-                        className="bx--content-group-cards__row"
-                      >
-                        <div
-                          className="bx--content-group-cards-item__col"
-                          data-autoid="dds--content-group-cards-item"
-                          key="0"
-                          role="region"
-                        >
-                          <Card
-                            aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customClassName="bx--content-group-cards-item"
-                            heading="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                          >
-                            <Tile
-                              aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                              className="bx--card bx--content-group-cards-item"
-                              data-autoid="dds--card"
-                              light={false}
-                            >
-                              <div
-                                aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                className="bx--tile bx--card bx--content-group-cards-item"
-                                data-autoid="dds--card"
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <h3
-                                      className="bx--card__heading"
-                                    >
-                                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                                    </h3>
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                      className="bx--card__footer"
-                                      href="https://www.example.com"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt"
-                                        className="bx--link bx--card__footer"
-                                        href="https://www.example.com"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(ArrowRight20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </div>
-                        <div
-                          className="bx--content-group-cards-item__col"
-                          data-autoid="dds--content-group-cards-item"
-                          key="1"
-                          role="region"
-                        >
-                          <Card
-                            aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customClassName="bx--content-group-cards-item"
-                            heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                          >
-                            <Tile
-                              aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                              className="bx--card bx--content-group-cards-item"
-                              data-autoid="dds--card"
-                              light={false}
-                            >
-                              <div
-                                aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                className="bx--tile bx--card bx--content-group-cards-item"
-                                data-autoid="dds--card"
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <h3
-                                      className="bx--card__heading"
-                                    >
-                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                    </h3>
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      className="bx--card__footer"
-                                      href="https://www.example.com"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        className="bx--link bx--card__footer"
-                                        href="https://www.example.com"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(ArrowRight20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </div>
-                        <div
-                          className="bx--content-group-cards-item__col"
-                          data-autoid="dds--content-group-cards-item"
-                          key="2"
-                          role="region"
-                        >
-                          <Card
-                            aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                            copy="Lorem ipsum dolor sit amet"
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customClassName="bx--content-group-cards-item"
-                            heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                          >
-                            <Tile
-                              aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                              className="bx--card bx--content-group-cards-item"
-                              data-autoid="dds--card"
-                              light={false}
-                            >
-                              <div
-                                aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                className="bx--tile bx--card bx--content-group-cards-item"
-                                data-autoid="dds--card"
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <h3
-                                      className="bx--card__heading"
-                                    >
-                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                    </h3>
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Lorem ipsum dolor sit amet</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      className="bx--card__footer"
-                                      href="https://www.example.com"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        className="bx--link bx--card__footer"
-                                        href="https://www.example.com"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(ArrowRight20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </div>
-                        <div
-                          className="bx--content-group-cards-item__col"
-                          data-autoid="dds--content-group-cards-item"
-                          key="3"
-                          role="region"
-                        >
-                          <Card
-                            aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt"
-                            cta={
-                              Object {
-                                "href": "https://www.example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              }
-                            }
-                            customClassName="bx--content-group-cards-item"
-                            heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                          >
-                            <Tile
-                              aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                              className="bx--card bx--content-group-cards-item"
-                              data-autoid="dds--card"
-                              light={false}
-                            >
-                              <div
-                                aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                className="bx--tile bx--card bx--content-group-cards-item"
-                                data-autoid="dds--card"
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <h3
-                                      className="bx--card__heading"
-                                    >
-                                      Lorem ipsum dolor sit amet, consectetur adipiscing elit
-                                    </h3>
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                      className="bx--card__footer"
-                                      href="https://www.example.com"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Lorem ipsum dolor sit amet, consectetur adipiscing elit"
-                                        className="bx--link bx--card__footer"
-                                        href="https://www.example.com"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(ArrowRight20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </ContentGroup>
-            </section>
-          </ContentGroupCards>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content group pictograms Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-group-pictograms--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content group pictograms: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentGroupPictograms": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.",
-                "heading": "Aliquam condimentum interdum",
-                "pictogram": Object {
-                  "aria-label": "Pictogram",
-                  "src": undefined,
-                },
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <ContentGroupPictograms
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-          copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-          heading="Lorem ipsum dolor sit amet"
-          items={
-            Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "copy": "Lorem ipsum dolor sit amet ",
-                  "href": "https://www.example.com",
-                  "type": "local",
-                },
-                "heading": "Aliquam condimentum interdum",
-                "pictogram": Object {
-                  "aria-label": "Pictogram",
-                  "src": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "render": [Function],
-                  },
-                },
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "copy": "Lorem ipsum dolor sit amet ",
-                  "href": "https://www.example.com",
-                  "type": "local",
-                },
-                "heading": "Aliquam condimentum interdum",
-                "pictogram": Object {
-                  "aria-label": "Pictogram",
-                  "src": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "render": [Function],
-                  },
-                },
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.",
-                "cta": Object {
-                  "copy": "Lorem ipsum dolor sit amet ",
-                  "href": "https://www.example.com",
-                  "type": "local",
-                },
-                "heading": "Aliquam condimentum interdum",
-                "pictogram": Object {
-                  "aria-label": "Pictogram",
-                  "src": Object {
-                    "$$typeof": Symbol(react.forward_ref),
-                    "render": [Function],
-                  },
-                },
-              },
-            ]
-          }
-        >
-          <div
-            className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 bx--content-group-pictograms"
-            data-autoid="dds--content-group-pictograms"
-          >
-            <ContentGroup
-              copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-              heading="Lorem ipsum dolor sit amet"
-            >
-              <div
-                className="bx--content-group"
-                data-autoid="dds--content-group"
-              >
-                <h3
-                  className="bx--content-group__title"
-                  data-autoid="dds--content-group__title"
-                >
-                  Lorem ipsum dolor sit amet
-                </h3>
-                <div
-                  className="bx--content-group__copy"
-                  dangerouslySetInnerHTML={
-                    Object {
-                      "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.</p> ",
-                    }
-                  }
-                />
-                <div
-                  className="bx--content-group__col bx--content-group__children"
-                  data-autoid="dds--content-group__children"
-                >
-                  <PictogramItem
-                    className="bx--content-group-pictograms__item"
-                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                    cta={
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet ",
-                        "href": "https://www.example.com",
-                        "type": "local",
-                      }
-                    }
-                    data-autoid="bx--content-group-pictograms__item"
-                    heading="Aliquam condimentum interdum"
-                    key="0"
-                    pictogram={
-                      Object {
-                        "aria-label": "Pictogram",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--content-group-pictograms__item bx--pictogram-item"
-                      data-autoid="dds--pictogram-item"
-                    >
-                      <div
-                        className="bx--pictogram-item__row"
-                      >
-                        <div
-                          className="bx--pictogram-item__wrapper"
-                        >
-                          <ForwardRef(TouchScreen)
-                            aria-label="Pictogram"
-                            className="bx--pictogram-item__pictogram"
-                            data-autoid="dds--pictogram-item__pictogram"
-                          >
-                            <Icon
-                              aria-label="Pictogram"
-                              className="bx--pictogram-item__pictogram"
-                              data-autoid="dds--pictogram-item__pictogram"
-                              fill="currentColor"
-                              height={64}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={64}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-label="Pictogram"
-                                className="bx--pictogram-item__pictogram"
-                                data-autoid="dds--pictogram-item__pictogram"
-                                fill="currentColor"
-                                focusable="false"
-                                height={64}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={64}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M13.002,30.36c-2.405,0-4.362-2.027-4.362-4.519V15.037c0-0.771,0.609-1.397,1.358-1.397	s1.358,0.626,1.358,1.397l0.003,3.354c0.191-0.105,0.409-0.166,0.641-0.166c0.51,0,0.956,0.291,1.188,0.72	c0.227-0.174,0.509-0.277,0.813-0.277c0.596,0,1.104,0.397,1.286,0.948c0.208-0.133,0.453-0.21,0.715-0.21	c0.749,0,1.358,0.627,1.358,1.397v5.039C17.36,28.333,15.405,30.36,13.002,30.36z M9.998,14.36c-0.352,0-0.638,0.304-0.638,0.677	v10.805c0,2.095,1.634,3.798,3.643,3.798c2.006,0,3.638-1.703,3.638-3.798v-5.039c0-0.373-0.286-0.677-0.638-0.677	s-0.638,0.304-0.638,0.677v1.196c0,0.198-0.161,0.359-0.359,0.36l0,0c-0.198,0-0.359-0.161-0.36-0.359l-0.005-1.935	c0-0.374-0.286-0.678-0.638-0.678c-0.354,0-0.642,0.304-0.642,0.677l0.004,1.934c0,0.199-0.16,0.36-0.359,0.361l0,0	c-0.199,0-0.359-0.161-0.36-0.359l-0.005-2.378v-0.001c0-0.373-0.286-0.676-0.638-0.676s-0.638,0.303-0.638,0.676v2.378	c0,0.199-0.161,0.36-0.36,0.36s-0.36-0.161-0.36-0.36l-0.005-6.961C10.636,14.664,10.35,14.36,9.998,14.36z M31,29.36h-9	c-0.199,0-0.36-0.161-0.36-0.36v-7.64H19v-0.72h6.64v-2.28H19v-0.72h6.64V2.36H1.36v15.28H7v0.721H1.36v2.279H7v0.721H1	c-0.199,0-0.36-0.161-0.36-0.36V2c0-0.199,0.161-0.36,0.36-0.36h25c0.199,0,0.36,0.161,0.36,0.36v10.64H31	c0.199,0,0.36,0.161,0.36,0.36v16C31.36,29.199,31.199,29.36,31,29.36z M22.36,28.64h8.279v-2.28H22.36V28.64z M22.36,25.64h8.279	V13.36H26.36V21c0,0.199-0.161,0.36-0.36,0.36h-3.64V25.64z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(TouchScreen)>
-                        </div>
-                        <div
-                          className="bx--pictogram-item__content"
-                          data-autoid="dds--pictogram-item__content"
-                        >
-                          <ContentItem
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                            cta={
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet ",
-                                "href": "https://www.example.com",
-                                "style": "text",
-                                "type": "local",
-                              }
-                            }
-                            heading="Aliquam condimentum interdum"
-                          >
-                            <div
-                              className="bx--content-item"
-                              data-autoid="dds--content-item"
-                            >
-                              <h4
-                                className="bx--content-item__heading"
-                                data-autoid="dds--content-item__heading"
-                              >
-                                Aliquam condimentum interdum
-                              </h4>
-                              <div
-                                className="bx--content-item__copy"
-                                dangerouslySetInnerHTML={
-                                  Object {
-                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.</p> ",
-                                  }
-                                }
-                                data-autoid="dds--content-item__copy"
-                              />
-                              <CTA
-                                copy="Lorem ipsum dolor sit amet "
-                                customClassName="bx--content-item__cta"
-                                customVideoTitle={null}
-                                href="https://www.example.com"
-                                style="text"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-item__cta"
-                                >
-                                  <TextCTA
-                                    copy="Lorem ipsum dolor sit amet "
-                                    customVideoTitle={null}
-                                    formatCTAcopy={[Function]}
-                                    href="https://www.example.com"
-                                    iconPlacement="right"
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="text"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <LinkWithIcon
-                                      href="https://www.example.com"
-                                      iconInline={true}
-                                      iconPlacement="right"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--link-with-icon__container"
-                                        data-autoid="dds--link-with-icon"
-                                      >
-                                        <Link
-                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                          href="https://www.example.com"
-                                          onClick={[Function]}
-                                          size="lg"
-                                          target={null}
-                                        >
-                                          <a
-                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                            href="https://www.example.com"
-                                            onClick={[Function]}
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <span>
-                                              Lorem ipsum dolor sit amet 
-                                            </span>
-                                            <span
-                                              className="bx--visually-hidden"
-                                            />
-                                            <ForwardRef(ArrowRight20)>
-                                              <Icon
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </LinkWithIcon>
-                                  </TextCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </ContentItem>
-                        </div>
-                      </div>
-                    </div>
-                  </PictogramItem>
-                  <PictogramItem
-                    className="bx--content-group-pictograms__item"
-                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                    cta={
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet ",
-                        "href": "https://www.example.com",
-                        "type": "local",
-                      }
-                    }
-                    data-autoid="bx--content-group-pictograms__item"
-                    heading="Aliquam condimentum interdum"
-                    key="1"
-                    pictogram={
-                      Object {
-                        "aria-label": "Pictogram",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--content-group-pictograms__item bx--pictogram-item"
-                      data-autoid="dds--pictogram-item"
-                    >
-                      <div
-                        className="bx--pictogram-item__row"
-                      >
-                        <div
-                          className="bx--pictogram-item__wrapper"
-                        >
-                          <ForwardRef(TouchScreen)
-                            aria-label="Pictogram"
-                            className="bx--pictogram-item__pictogram"
-                            data-autoid="dds--pictogram-item__pictogram"
-                          >
-                            <Icon
-                              aria-label="Pictogram"
-                              className="bx--pictogram-item__pictogram"
-                              data-autoid="dds--pictogram-item__pictogram"
-                              fill="currentColor"
-                              height={64}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={64}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-label="Pictogram"
-                                className="bx--pictogram-item__pictogram"
-                                data-autoid="dds--pictogram-item__pictogram"
-                                fill="currentColor"
-                                focusable="false"
-                                height={64}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={64}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M13.002,30.36c-2.405,0-4.362-2.027-4.362-4.519V15.037c0-0.771,0.609-1.397,1.358-1.397	s1.358,0.626,1.358,1.397l0.003,3.354c0.191-0.105,0.409-0.166,0.641-0.166c0.51,0,0.956,0.291,1.188,0.72	c0.227-0.174,0.509-0.277,0.813-0.277c0.596,0,1.104,0.397,1.286,0.948c0.208-0.133,0.453-0.21,0.715-0.21	c0.749,0,1.358,0.627,1.358,1.397v5.039C17.36,28.333,15.405,30.36,13.002,30.36z M9.998,14.36c-0.352,0-0.638,0.304-0.638,0.677	v10.805c0,2.095,1.634,3.798,3.643,3.798c2.006,0,3.638-1.703,3.638-3.798v-5.039c0-0.373-0.286-0.677-0.638-0.677	s-0.638,0.304-0.638,0.677v1.196c0,0.198-0.161,0.359-0.359,0.36l0,0c-0.198,0-0.359-0.161-0.36-0.359l-0.005-1.935	c0-0.374-0.286-0.678-0.638-0.678c-0.354,0-0.642,0.304-0.642,0.677l0.004,1.934c0,0.199-0.16,0.36-0.359,0.361l0,0	c-0.199,0-0.359-0.161-0.36-0.359l-0.005-2.378v-0.001c0-0.373-0.286-0.676-0.638-0.676s-0.638,0.303-0.638,0.676v2.378	c0,0.199-0.161,0.36-0.36,0.36s-0.36-0.161-0.36-0.36l-0.005-6.961C10.636,14.664,10.35,14.36,9.998,14.36z M31,29.36h-9	c-0.199,0-0.36-0.161-0.36-0.36v-7.64H19v-0.72h6.64v-2.28H19v-0.72h6.64V2.36H1.36v15.28H7v0.721H1.36v2.279H7v0.721H1	c-0.199,0-0.36-0.161-0.36-0.36V2c0-0.199,0.161-0.36,0.36-0.36h25c0.199,0,0.36,0.161,0.36,0.36v10.64H31	c0.199,0,0.36,0.161,0.36,0.36v16C31.36,29.199,31.199,29.36,31,29.36z M22.36,28.64h8.279v-2.28H22.36V28.64z M22.36,25.64h8.279	V13.36H26.36V21c0,0.199-0.161,0.36-0.36,0.36h-3.64V25.64z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(TouchScreen)>
-                        </div>
-                        <div
-                          className="bx--pictogram-item__content"
-                          data-autoid="dds--pictogram-item__content"
-                        >
-                          <ContentItem
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                            cta={
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet ",
-                                "href": "https://www.example.com",
-                                "style": "text",
-                                "type": "local",
-                              }
-                            }
-                            heading="Aliquam condimentum interdum"
-                          >
-                            <div
-                              className="bx--content-item"
-                              data-autoid="dds--content-item"
-                            >
-                              <h4
-                                className="bx--content-item__heading"
-                                data-autoid="dds--content-item__heading"
-                              >
-                                Aliquam condimentum interdum
-                              </h4>
-                              <div
-                                className="bx--content-item__copy"
-                                dangerouslySetInnerHTML={
-                                  Object {
-                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.</p> ",
-                                  }
-                                }
-                                data-autoid="dds--content-item__copy"
-                              />
-                              <CTA
-                                copy="Lorem ipsum dolor sit amet "
-                                customClassName="bx--content-item__cta"
-                                customVideoTitle={null}
-                                href="https://www.example.com"
-                                style="text"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-item__cta"
-                                >
-                                  <TextCTA
-                                    copy="Lorem ipsum dolor sit amet "
-                                    customVideoTitle={null}
-                                    formatCTAcopy={[Function]}
-                                    href="https://www.example.com"
-                                    iconPlacement="right"
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="text"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <LinkWithIcon
-                                      href="https://www.example.com"
-                                      iconInline={true}
-                                      iconPlacement="right"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--link-with-icon__container"
-                                        data-autoid="dds--link-with-icon"
-                                      >
-                                        <Link
-                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                          href="https://www.example.com"
-                                          onClick={[Function]}
-                                          size="lg"
-                                          target={null}
-                                        >
-                                          <a
-                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                            href="https://www.example.com"
-                                            onClick={[Function]}
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <span>
-                                              Lorem ipsum dolor sit amet 
-                                            </span>
-                                            <span
-                                              className="bx--visually-hidden"
-                                            />
-                                            <ForwardRef(ArrowRight20)>
-                                              <Icon
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </LinkWithIcon>
-                                  </TextCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </ContentItem>
-                        </div>
-                      </div>
-                    </div>
-                  </PictogramItem>
-                  <PictogramItem
-                    className="bx--content-group-pictograms__item"
-                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                    cta={
-                      Object {
-                        "copy": "Lorem ipsum dolor sit amet ",
-                        "href": "https://www.example.com",
-                        "type": "local",
-                      }
-                    }
-                    data-autoid="bx--content-group-pictograms__item"
-                    heading="Aliquam condimentum interdum"
-                    key="2"
-                    pictogram={
-                      Object {
-                        "aria-label": "Pictogram",
-                        "src": Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        },
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--content-group-pictograms__item bx--pictogram-item"
-                      data-autoid="dds--pictogram-item"
-                    >
-                      <div
-                        className="bx--pictogram-item__row"
-                      >
-                        <div
-                          className="bx--pictogram-item__wrapper"
-                        >
-                          <ForwardRef(TouchScreen)
-                            aria-label="Pictogram"
-                            className="bx--pictogram-item__pictogram"
-                            data-autoid="dds--pictogram-item__pictogram"
-                          >
-                            <Icon
-                              aria-label="Pictogram"
-                              className="bx--pictogram-item__pictogram"
-                              data-autoid="dds--pictogram-item__pictogram"
-                              fill="currentColor"
-                              height={64}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={64}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-label="Pictogram"
-                                className="bx--pictogram-item__pictogram"
-                                data-autoid="dds--pictogram-item__pictogram"
-                                fill="currentColor"
-                                focusable="false"
-                                height={64}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={64}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M13.002,30.36c-2.405,0-4.362-2.027-4.362-4.519V15.037c0-0.771,0.609-1.397,1.358-1.397	s1.358,0.626,1.358,1.397l0.003,3.354c0.191-0.105,0.409-0.166,0.641-0.166c0.51,0,0.956,0.291,1.188,0.72	c0.227-0.174,0.509-0.277,0.813-0.277c0.596,0,1.104,0.397,1.286,0.948c0.208-0.133,0.453-0.21,0.715-0.21	c0.749,0,1.358,0.627,1.358,1.397v5.039C17.36,28.333,15.405,30.36,13.002,30.36z M9.998,14.36c-0.352,0-0.638,0.304-0.638,0.677	v10.805c0,2.095,1.634,3.798,3.643,3.798c2.006,0,3.638-1.703,3.638-3.798v-5.039c0-0.373-0.286-0.677-0.638-0.677	s-0.638,0.304-0.638,0.677v1.196c0,0.198-0.161,0.359-0.359,0.36l0,0c-0.198,0-0.359-0.161-0.36-0.359l-0.005-1.935	c0-0.374-0.286-0.678-0.638-0.678c-0.354,0-0.642,0.304-0.642,0.677l0.004,1.934c0,0.199-0.16,0.36-0.359,0.361l0,0	c-0.199,0-0.359-0.161-0.36-0.359l-0.005-2.378v-0.001c0-0.373-0.286-0.676-0.638-0.676s-0.638,0.303-0.638,0.676v2.378	c0,0.199-0.161,0.36-0.36,0.36s-0.36-0.161-0.36-0.36l-0.005-6.961C10.636,14.664,10.35,14.36,9.998,14.36z M31,29.36h-9	c-0.199,0-0.36-0.161-0.36-0.36v-7.64H19v-0.72h6.64v-2.28H19v-0.72h6.64V2.36H1.36v15.28H7v0.721H1.36v2.279H7v0.721H1	c-0.199,0-0.36-0.161-0.36-0.36V2c0-0.199,0.161-0.36,0.36-0.36h25c0.199,0,0.36,0.161,0.36,0.36v10.64H31	c0.199,0,0.36,0.161,0.36,0.36v16C31.36,29.199,31.199,29.36,31,29.36z M22.36,28.64h8.279v-2.28H22.36V28.64z M22.36,25.64h8.279	V13.36H26.36V21c0,0.199-0.161,0.36-0.36,0.36h-3.64V25.64z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(TouchScreen)>
-                        </div>
-                        <div
-                          className="bx--pictogram-item__content"
-                          data-autoid="dds--pictogram-item__content"
-                        >
-                          <ContentItem
-                            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                            cta={
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet ",
-                                "href": "https://www.example.com",
-                                "style": "text",
-                                "type": "local",
-                              }
-                            }
-                            heading="Aliquam condimentum interdum"
-                          >
-                            <div
-                              className="bx--content-item"
-                              data-autoid="dds--content-item"
-                            >
-                              <h4
-                                className="bx--content-item__heading"
-                                data-autoid="dds--content-item__heading"
-                              >
-                                Aliquam condimentum interdum
-                              </h4>
-                              <div
-                                className="bx--content-item__copy"
-                                dangerouslySetInnerHTML={
-                                  Object {
-                                    "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.</p> ",
-                                  }
-                                }
-                                data-autoid="dds--content-item__copy"
-                              />
-                              <CTA
-                                copy="Lorem ipsum dolor sit amet "
-                                customClassName="bx--content-item__cta"
-                                customVideoTitle={null}
-                                href="https://www.example.com"
-                                style="text"
-                                type="local"
-                              >
-                                <div
-                                  className="bx--content-item__cta"
-                                >
-                                  <TextCTA
-                                    copy="Lorem ipsum dolor sit amet "
-                                    customVideoTitle={null}
-                                    formatCTAcopy={[Function]}
-                                    href="https://www.example.com"
-                                    iconPlacement="right"
-                                    openLightBox={[Function]}
-                                    renderLightBox={false}
-                                    style="text"
-                                    type="local"
-                                    videoTitle={
-                                      Array [
-                                        Object {
-                                          "duration": "",
-                                          "key": 0,
-                                          "title": "",
-                                        },
-                                      ]
-                                    }
-                                  >
-                                    <LinkWithIcon
-                                      href="https://www.example.com"
-                                      iconInline={true}
-                                      iconPlacement="right"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <div
-                                        className="bx--link-with-icon__container"
-                                        data-autoid="dds--link-with-icon"
-                                      >
-                                        <Link
-                                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                          href="https://www.example.com"
-                                          onClick={[Function]}
-                                          size="lg"
-                                          target={null}
-                                        >
-                                          <a
-                                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                            href="https://www.example.com"
-                                            onClick={[Function]}
-                                            rel={null}
-                                            target={null}
-                                          >
-                                            <span>
-                                              Lorem ipsum dolor sit amet 
-                                            </span>
-                                            <span
-                                              className="bx--visually-hidden"
-                                            />
-                                            <ForwardRef(ArrowRight20)>
-                                              <Icon
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ArrowRight20)>
-                                          </a>
-                                        </Link>
-                                      </div>
-                                    </LinkWithIcon>
-                                  </TextCTA>
-                                </div>
-                              </CTA>
-                            </div>
-                          </ContentItem>
-                        </div>
-                      </div>
-                    </div>
-                  </PictogramItem>
-                </div>
-              </div>
-            </ContentGroup>
-          </div>
-        </ContentGroupPictograms>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content group simple Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-group-simple--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentGroupSimple/__stories__/ContentGroupSimple.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content group simple: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentGroupSimple": Object {
-            "items": Array [
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                "heading": "Lorem ipsum dolor sit amet.",
-              },
-              Object {
-                "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                "heading": "Lorem ipsum dolor sit amet.",
-              },
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                "heading": "Lorem ipsum dolor sit amet.",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4"
-        >
-          <ContentGroupSimple
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-            cta={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                },
-                "heading": "Lorem ipsum dolor sit amet",
-                "style": "card",
-                "type": "local",
-              }
-            }
-            heading="Lorem ipsum dolor sit amet"
-            items={
-              Array [
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                  "heading": "Lorem ipsum dolor sit amet.",
-                },
-                Object {
-                  "copy": "Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-",
-                  "heading": "Lorem ipsum dolor sit amet.",
-                },
-                Object {
-                  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.",
-                  "heading": "Lorem ipsum dolor sit amet.",
-                },
-              ]
-            }
-            mediaData={
-              Object {
-                "heading": "Lorem ipsum dolor sit amet.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--16x9--320x180--004.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--004.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--004.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-          >
-            <div
-              className="bx--content-group-simple"
-              data-autoid="dds--content-group-simple"
-            >
-              <ContentGroup
-                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna."
-                cta={
-                  Object {
-                    "cta": Object {
-                      "href": "https://www.example.com",
-                    },
-                    "heading": "Lorem ipsum dolor sit amet",
-                    "style": "card",
-                    "type": "local",
-                  }
-                }
-                heading="Lorem ipsum dolor sit amet"
-              >
-                <div
-                  className="bx--content-group"
-                  data-autoid="dds--content-group"
-                >
-                  <h3
-                    className="bx--content-group__title"
-                    data-autoid="dds--content-group__title"
-                  >
-                    Lorem ipsum dolor sit amet
-                  </h3>
-                  <div
-                    className="bx--content-group__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-group__col bx--content-group__children"
-                    data-autoid="dds--content-group__children"
-                  >
-                    <div
-                      data-autoid="dds--content-group-simple__media"
-                    >
-                      <ImageWithCaption
-                        copy=""
-                        heading="Lorem ipsum dolor sit amet."
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                            "sources": Array [
-                              Object {
-                                "breakpoint": 320,
-                                "src": "fpo--16x9--320x180--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 400,
-                                "src": "fpo--16x9--480x270--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 672,
-                                "src": "fpo--16x9--720x405--004.jpg",
-                              },
-                            ],
-                          }
-                        }
-                        lightbox={false}
-                      >
-                        <div
-                          className="bx--image-with-caption"
-                          data-autoid="dds--image-with-caption"
-                        >
-                          <Image
-                            alt="Image alt text"
-                            defaultSrc="fpo--16x9--720x405--004.jpg"
-                            sources={
-                              Array [
-                                Object {
-                                  "breakpoint": 320,
-                                  "src": "fpo--16x9--320x180--004.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 400,
-                                  "src": "fpo--16x9--480x270--004.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 672,
-                                  "src": "fpo--16x9--720x405--004.jpg",
-                                },
-                              ]
-                            }
-                          >
-                            <div
-                              className="bx--image"
-                              data-autoid="dds--image__longdescription"
-                            >
-                              <picture>
-                                <source
-                                  key="0"
-                                  media="(min-width: 672px)"
-                                  srcSet="fpo--16x9--720x405--004.jpg"
-                                />
-                                <source
-                                  key="1"
-                                  media="(min-width: 400px)"
-                                  srcSet="fpo--16x9--480x270--004.jpg"
-                                />
-                                <source
-                                  key="2"
-                                  media="(min-width: 320px)"
-                                  srcSet="fpo--16x9--320x180--004.jpg"
-                                />
-                                <img
-                                  alt="Image alt text"
-                                  className="bx--image__img"
-                                  src="fpo--16x9--720x405--004.jpg"
-                                />
-                              </picture>
-                            </div>
-                          </Image>
-                          <p
-                            className="bx--image__caption"
-                            data-autoid="dds--image__caption"
-                          >
-                            Lorem ipsum dolor sit amet.
-                          </p>
-                        </div>
-                      </ImageWithCaption>
-                    </div>
-                    <ContentItem
-                      copy="Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                      heading="Lorem ipsum dolor sit amet."
-                      key="0"
-                    >
-                      <div
-                        className="bx--content-item"
-                        data-autoid="dds--content-item"
-                      >
-                        <h4
-                          className="bx--content-item__heading"
-                          data-autoid="dds--content-item__heading"
-                        >
-                          Lorem ipsum dolor sit amet.
-                        </h4>
-                        <div
-                          className="bx--content-item__copy"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                            }
-                          }
-                          data-autoid="dds--content-item__copy"
-                        />
-                      </div>
-                    </ContentItem>
-                    <ContentItem
-                      copy="Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list \\"item 1a\\"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-"
-                      heading="Lorem ipsum dolor sit amet."
-                      key="1"
-                    >
-                      <div
-                        className="bx--content-item"
-                        data-autoid="dds--content-item"
-                      >
-                        <h4
-                          className="bx--content-item__heading"
-                          data-autoid="dds--content-item__heading"
-                        >
-                          Lorem ipsum dolor sit amet.
-                        </h4>
-                        <div
-                          className="bx--content-item__copy"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "<p>Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:</p> <p>Lorem ipsum dolor sit amet, <a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">consectetur adipiscing</a> elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat <strong>libero</strong>.</p> <ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\"><a href=\\"https://www.ibm.com\\" class=\\"bx--link bx--link--lg\\">list item link</a><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list “item 1a”</li><li class=\\"bx--list__item\\">list item 2a<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a.a</li></ul></li></ol></li></ul><ol class=\\"bx--list--ordered\\"><li class=\\"bx--list__item\\">list item 2<ul class=\\"bx--list--unordered\\"><li class=\\"bx--list__item\\">list item 2a</li></ul></li></ol>",
-                            }
-                          }
-                          data-autoid="dds--content-item__copy"
-                        />
-                      </div>
-                    </ContentItem>
-                    <ContentItem
-                      copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien."
-                      heading="Lorem ipsum dolor sit amet."
-                      key="2"
-                    >
-                      <div
-                        className="bx--content-item"
-                        data-autoid="dds--content-item"
-                      >
-                        <h4
-                          className="bx--content-item__heading"
-                          data-autoid="dds--content-item__heading"
-                        >
-                          Lorem ipsum dolor sit amet.
-                        </h4>
-                        <div
-                          className="bx--content-item__copy"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</p> ",
-                            }
-                          }
-                          data-autoid="dds--content-item__copy"
-                        />
-                      </div>
-                    </ContentItem>
-                  </div>
-                  <div
-                    className="bx--content-group__cta-row"
-                    data-autoid="dds--content-group__cta"
-                  >
-                    <CTA
-                      copy=""
-                      cta={
-                        Object {
-                          "href": "https://www.example.com",
-                        }
-                      }
-                      customClassName="bx--content-group__cta"
-                      customVideoTitle={null}
-                      heading="Lorem ipsum dolor sit amet"
-                      href=""
-                      style="card"
-                      type="local"
-                    >
-                      <div
-                        className="bx--content-group__cta"
-                      >
-                        <CardCTA
-                          copy=""
-                          cta={
-                            Object {
-                              "href": "https://www.example.com",
-                            }
-                          }
-                          customVideoTitle={null}
-                          disableImage={false}
-                          heading="Lorem ipsum dolor sit amet"
-                          href=""
-                          media={null}
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="card"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <CardLink
-                            card={
-                              Object {
-                                "copy": "",
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                },
-                                "customVideoTitle": null,
-                                "heading": "Lorem ipsum dolor sit amet",
-                                "href": "https://www.example.com",
-                                "media": null,
-                                "size": undefined,
-                                "target": null,
-                              }
-                            }
-                            customClassName="bx--card__CardCTA"
-                            disabled={false}
-                          >
-                            <Card
-                              copy=""
-                              cta={
-                                Object {
-                                  "href": "https://www.example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                  "type": "local",
-                                }
-                              }
-                              customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              heading="Lorem ipsum dolor sit amet"
-                              href="https://www.example.com"
-                              media={null}
-                              target={null}
-                            >
-                              <Tile
-                                className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.example.com"
-                                light={false}
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                  customVideoTitle={null}
-                                  data-autoid="dds--card"
-                                  href="https://www.example.com"
-                                  media={null}
-                                  target={null}
-                                >
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Lorem ipsum dolor sit amet
-                                      </h3>
-                                      <Link
-                                        aria-label="Lorem ipsum dolor sit amet"
-                                        className="bx--card__footer"
-                                        href="https://www.example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          className="bx--link bx--card__footer"
-                                          href="https://www.example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </CardLink>
-                        </CardCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentGroup>
-            </div>
-          </ContentGroupSimple>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content item Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-item--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentItem/__stories__/ContentItem.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content item: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-10 bx--offset-lg-4"
-        >
-          <ContentItem
-            copy="This area of NLP takes “real world” text and applies a symbolic system for a machine to interpret its meaning, using formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic tools."
-            cta={
-              Object {
-                "buttons": Array [
-                  Object {
-                    "copy": "Learn more about NLP",
-                    "href": "https://example.com/",
-                  },
-                ],
-                "copy": "Learn more about NLP",
-                "href": "https://www.example.com",
-                "style": "text",
-                "type": "local",
-              }
-            }
-            heading="Natural language understanding"
-            mediaData={
-              Object {
-                "heading": "Image caption text",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                },
-                "showCaption": true,
-                "videoId": "1_9h94wo6b",
-              }
-            }
-            mediaType="none"
-          >
-            <div
-              className="bx--content-item"
-              data-autoid="dds--content-item"
-            >
-              <h4
-                className="bx--content-item__heading"
-                data-autoid="dds--content-item__heading"
-              >
-                Natural language understanding
-              </h4>
-              <div
-                data-autoid="dds--content-item__media"
-              />
-              <div
-                className="bx--content-item__copy"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<p>This area of NLP takes “real world” text and applies a symbolic system for a machine to interpret its meaning, using formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic tools.</p> ",
-                  }
-                }
-                data-autoid="dds--content-item__copy"
-              />
-              <CTA
-                buttons={
-                  Array [
-                    Object {
-                      "copy": "Learn more about NLP",
-                      "href": "https://example.com/",
-                    },
-                  ]
-                }
-                copy="Learn more about NLP"
-                customClassName="bx--content-item__cta"
-                customVideoTitle={null}
-                href="https://www.example.com"
-                style="text"
-                type="local"
-              >
-                <div
-                  className="bx--content-item__cta"
-                >
-                  <TextCTA
-                    buttons={
-                      Array [
-                        Object {
-                          "copy": "Learn more about NLP",
-                          "href": "https://example.com/",
-                        },
-                      ]
-                    }
-                    copy="Learn more about NLP"
-                    customVideoTitle={null}
-                    formatCTAcopy={[Function]}
-                    href="https://www.example.com"
-                    iconPlacement="right"
-                    openLightBox={[Function]}
-                    renderLightBox={false}
-                    style="text"
-                    type="local"
-                    videoTitle={
-                      Array [
-                        Object {
-                          "duration": "",
-                          "key": 0,
-                          "title": "",
-                        },
-                      ]
-                    }
-                  >
-                    <LinkWithIcon
-                      href="https://www.example.com"
-                      iconInline={true}
-                      iconPlacement="right"
-                      onClick={[Function]}
-                      target={null}
-                    >
-                      <div
-                        className="bx--link-with-icon__container"
-                        data-autoid="dds--link-with-icon"
-                      >
-                        <Link
-                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                          href="https://www.example.com"
-                          onClick={[Function]}
-                          size="lg"
-                          target={null}
-                        >
-                          <a
-                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                            href="https://www.example.com"
-                            onClick={[Function]}
-                            rel={null}
-                            target={null}
-                          >
-                            <span>
-                              Learn more about NLP
-                            </span>
-                            <span
-                              className="bx--visually-hidden"
-                            />
-                            <ForwardRef(ArrowRight20)>
-                              <Icon
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Link>
-                      </div>
-                    </LinkWithIcon>
-                  </TextCTA>
-                </div>
-              </CTA>
-            </div>
-          </ContentItem>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content item horizontal Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-item-horizontal--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentItemHorizontal/__stories__/ContentItemHorizontal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content item horizontal: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentItemHorizontal": Object {
-            "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-            "eyebrow": "Lorem ipsum",
-            "heading": "Aliquam condimentum",
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid bx--content-group-story"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-        >
-          <ContentItemHorizontal
-            copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-            cta={
-              Object {
-                "items": Array [
-                  Object {
-                    "copy": "Learn more",
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "Microservices and containers",
-                    "cta": Object {
-                      "href": "https://www.ibm.com",
-                    },
-                    "type": "external",
-                  },
-                ],
-              }
-            }
-            eyebrow="Lorem ipsum"
-            heading="Aliquam condimentum"
-          >
-            <div
-              className="bx--content-item-horizontal__item "
-              data-autoid="dds--content-item-horizontal__item"
-            >
-              <div
-                className="bx--content-item-horizontal__row"
-              >
-                <div
-                  className="bx--content-item-horizontal__col"
-                >
-                  <p
-                    className="bx--content-item-horizontal__item--eyebrow"
-                    data-autoid="dds--content-item-horizontal__item--eyebrow"
-                  >
-                    Lorem ipsum
-                  </p>
-                  <h3
-                    className="bx--content-item-horizontal__item--heading"
-                    data-autoid="dds--content-item-horizontal__item--heading"
-                  >
-                    Aliquam condimentum
-                  </h3>
-                </div>
-                <div
-                  className="bx--content-item-horizontal__col"
-                >
-                  <div
-                    className="bx--content-item-horizontal__item--copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                      }
-                    }
-                    data-autoid="dds--content-item-horizontal__item--copy"
-                  />
-                  <div
-                    className="bx--content-item-horizontal__item--cta"
-                    data-autoid="dds--content-item-horizontal__item--cta"
-                  >
-                    <LinkList
-                      items={
-                        Array [
-                          Object {
-                            "copy": "Learn more",
-                            "cta": Object {
-                              "href": "https://www.ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "Microservices and containers",
-                            "cta": Object {
-                              "href": "https://www.ibm.com",
-                            },
-                            "type": "external",
-                          },
-                        ]
-                      }
-                      style="vertical"
-                    >
-                      <div
-                        className="bx--link-list"
-                        data-autoid="dds--link-list"
-                      >
-                        <ul
-                          className="bx--link-list__list bx--link-list__list--vertical"
-                        >
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--local"
-                            key="0"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="Learn more"
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={true}
-                              style="text"
-                              type="local"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="Learn more"
-                                  cta={
-                                    Object {
-                                      "href": "https://www.ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={true}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://www.ibm.com"
-                                    iconInline={true}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                        href="https://www.ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                          href="https://www.ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            Learn more
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          />
-                                          <ForwardRef(ArrowRight20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--external"
-                            key="1"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="Microservices and containers"
-                              cta={
-                                Object {
-                                  "href": "https://www.ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={true}
-                              style="text"
-                              type="external"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="Microservices and containers"
-                                  cta={
-                                    Object {
-                                      "href": "https://www.ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={true}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="external"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://www.ibm.com"
-                                    iconInline={true}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target="_blank"
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                        href="https://www.ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target="_blank"
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                          href="https://www.ibm.com"
-                                          onClick={[Function]}
-                                          rel="noopener"
-                                          target="_blank"
-                                        >
-                                          <span>
-                                            Microservices and containers
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          >
-                                             - This link opens in a new tab
-                                          </span>
-                                          <ForwardRef(Launch20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                />
-                                                <path
-                                                  d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Launch20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                        </ul>
-                      </div>
-                    </LinkList>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </ContentItemHorizontal>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content item horizontal With media 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-item-horizontal--with-media",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentItemHorizontal/__stories__/ContentItemHorizontal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "ContentItemHorizontal": [Function],
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content item horizontal: Default",
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentItemHorizontal": Object {
-            "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-            "eyebrow": "Lorem ipsum",
-            "heading": "Aliquam condimentum",
-          },
-        },
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-item-horizontal--with-media"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content item horizontal With thumbnail 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-item-horizontal--with-thumbnail",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentItemHorizontal/__stories__/ContentItemHorizontal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "ContentItemHorizontal": [Function],
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content item horizontal: Default",
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "ContentItemHorizontal": Object {
-            "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-            "eyebrow": "Lorem ipsum",
-            "heading": "Aliquam condimentum",
-          },
-        },
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-item-horizontal--with-thumbnail"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Content section Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-content-section--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ContentSection/__stories__/ContentSection.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Content section: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <ContentSection
-      addChildren=""
-      childrenCustomClassName="bx--col-lg-8"
-      copy="AI features for understanding speech can be trained for a specific speaker’s voice."
-      cta={
-        Object {
-          "copy": "Link action",
-          "href": "https://www.example.com",
-          "type": "local",
-        }
-      }
-      heading="Speech recognition (statistical Artificial Intelligence)"
-    >
-      <section
-        className="bx--content-section"
-        data-autoid="dds--content-section"
-      >
-        <div
-          className="bx--content-section__grid"
-        >
-          <div
-            className="bx--content-section__row"
-          >
-            <div
-              className="bx--content-section__left"
-            >
-              <h2
-                className="bx--content-section__heading"
-              >
-                Speech recognition (statistical Artificial Intelligence)
-              </h2>
-              <div
-                className="bx--content-section__copy"
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "<p>AI features for understanding speech can be trained for a specific speaker’s voice.</p> ",
-                  }
-                }
-                data-autoid="dds--content-section__copy"
-              />
-              <CTA
-                copy="Link action"
-                customClassName="bx--content-section__cta"
-                customVideoTitle={null}
-                href="https://www.example.com"
-                style="text"
-                type="local"
-              >
-                <div
-                  className="bx--content-section__cta"
-                >
-                  <TextCTA
-                    copy="Link action"
-                    customVideoTitle={null}
-                    formatCTAcopy={[Function]}
-                    href="https://www.example.com"
-                    iconPlacement="right"
-                    openLightBox={[Function]}
-                    renderLightBox={false}
-                    style="text"
-                    type="local"
-                    videoTitle={
-                      Array [
-                        Object {
-                          "duration": "",
-                          "key": 0,
-                          "title": "",
-                        },
-                      ]
-                    }
-                  >
-                    <LinkWithIcon
-                      href="https://www.example.com"
-                      iconInline={true}
-                      iconPlacement="right"
-                      onClick={[Function]}
-                      target={null}
-                    >
-                      <div
-                        className="bx--link-with-icon__container"
-                        data-autoid="dds--link-with-icon"
-                      >
-                        <Link
-                          className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                          href="https://www.example.com"
-                          onClick={[Function]}
-                          size="lg"
-                          target={null}
-                        >
-                          <a
-                            className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                            href="https://www.example.com"
-                            onClick={[Function]}
-                            rel={null}
-                            target={null}
-                          >
-                            <span>
-                              Link action
-                            </span>
-                            <span
-                              className="bx--visually-hidden"
-                            />
-                            <ForwardRef(ArrowRight20)>
-                              <Icon
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Link>
-                      </div>
-                    </LinkWithIcon>
-                  </TextCTA>
-                </div>
-              </CTA>
-            </div>
-            <div
-              className="bx--content-section__children bx--col-lg-8"
-            />
-          </div>
-        </div>
-      </section>
-    </ContentSection>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell Default (footer language only) 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--default-language-only",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: Default (footer language only)",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-          "languageInitialItem": Object {
-            "id": "en",
-            "text": "English",
-          },
-          "languageItems": Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ],
-          "languageOnly": true,
-          "type": "default",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-61"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-66"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-67"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-67"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-68"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-68"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-69"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-69"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-70"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-70"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-71"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-71"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-72"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-72"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        languageItems={
-          Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ]
-        }
-        languageOnly={true}
-        mastheadProps={null}
-        type="default"
-      >
-        <footer
-          className="bx--footer"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LanguageSelector
-                    callback={[Function]}
-                    initialSelectedItem={
-                      Object {
-                        "id": "en",
-                        "text": "English",
-                      }
-                    }
-                    items={
-                      Array [
-                        Object {
-                          "id": "ar",
-                          "text": "Arabic / عربية",
-                        },
-                        Object {
-                          "id": "bs",
-                          "text": "Bosnian / Bosanski",
-                        },
-                        Object {
-                          "id": "bg",
-                          "text": "Bulgarian / Български",
-                        },
-                        Object {
-                          "id": "ca",
-                          "text": "Catalan / Català",
-                        },
-                        Object {
-                          "id": "zh",
-                          "text": "Chinese Simplified / 简体中文",
-                        },
-                        Object {
-                          "id": "zh-tw",
-                          "text": "Chinese Traditional / 繁體中文",
-                        },
-                        Object {
-                          "id": "hr",
-                          "text": "Croatian / Hrvatski",
-                        },
-                        Object {
-                          "id": "cs",
-                          "text": "Czech / Čeština",
-                        },
-                        Object {
-                          "id": "da",
-                          "text": "Danish / Dansk",
-                        },
-                        Object {
-                          "id": "nl",
-                          "text": "Dutch / Nederlands",
-                        },
-                        Object {
-                          "id": "en",
-                          "text": "English",
-                        },
-                        Object {
-                          "id": "fi",
-                          "text": "Finnish / Suomi",
-                        },
-                        Object {
-                          "id": "fr",
-                          "text": "French / Français",
-                        },
-                        Object {
-                          "id": "de",
-                          "text": "German / Deutsch",
-                        },
-                        Object {
-                          "id": "el",
-                          "text": "Greek / Ελληνικά",
-                        },
-                        Object {
-                          "id": "he",
-                          "text": "Hebrew / עברית",
-                        },
-                        Object {
-                          "id": "hu",
-                          "text": "Hungarian / Magyar",
-                        },
-                        Object {
-                          "id": "it",
-                          "text": "Italian / Italiano",
-                        },
-                        Object {
-                          "id": "ja",
-                          "text": "Japanese / 日本語",
-                        },
-                        Object {
-                          "id": "kk",
-                          "text": "Kazakh / Қазақша",
-                        },
-                        Object {
-                          "id": "ko",
-                          "text": "Korean / 한국어",
-                        },
-                        Object {
-                          "id": "mk",
-                          "text": "Macedonian / македонски",
-                        },
-                        Object {
-                          "id": "no",
-                          "text": "Norwegian / Norsk",
-                        },
-                        Object {
-                          "id": "pl",
-                          "text": "Polish / polski",
-                        },
-                        Object {
-                          "id": "pt-br",
-                          "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                        },
-                        Object {
-                          "id": "pt",
-                          "text": "Portuguese/Portugal / Português/Portugal",
-                        },
-                        Object {
-                          "id": "ro",
-                          "text": "Romanian / Română",
-                        },
-                        Object {
-                          "id": "ru",
-                          "text": "Russian / Русский",
-                        },
-                        Object {
-                          "id": "sr",
-                          "text": "Serbian / srpski",
-                        },
-                        Object {
-                          "id": "sk",
-                          "text": "Slovak / Slovenčina",
-                        },
-                        Object {
-                          "id": "sl",
-                          "text": "Slovenian / Slovenščina",
-                        },
-                        Object {
-                          "id": "es",
-                          "text": "Spanish / Español",
-                        },
-                        Object {
-                          "id": "sv",
-                          "text": "Swedish / Svenska",
-                        },
-                        Object {
-                          "id": "th",
-                          "text": "Thai / ภาษาไทย",
-                        },
-                        Object {
-                          "id": "tr",
-                          "text": "Turkish / Türkçe",
-                        },
-                        Object {
-                          "id": "vi",
-                          "text": "Vietnamese / Tiếng Việt",
-                        },
-                      ]
-                    }
-                    labelText="Choose a language"
-                  >
-                    <div
-                      className="bx--language-selector__container"
-                    >
-                      <ComboBox
-                        ariaLabel="Choose an item"
-                        className="bx--language-selector"
-                        data-autoid="dds--language-selector"
-                        direction="top"
-                        disabled={false}
-                        id="dds-language-selector"
-                        initialSelectedItem={
-                          Object {
-                            "id": "en",
-                            "text": "English",
-                          }
-                        }
-                        itemToElement={null}
-                        itemToString={[Function]}
-                        items={
-                          Array [
-                            Object {
-                              "id": "ar",
-                              "text": "Arabic / عربية",
-                            },
-                            Object {
-                              "id": "bs",
-                              "text": "Bosnian / Bosanski",
-                            },
-                            Object {
-                              "id": "bg",
-                              "text": "Bulgarian / Български",
-                            },
-                            Object {
-                              "id": "ca",
-                              "text": "Catalan / Català",
-                            },
-                            Object {
-                              "id": "zh",
-                              "text": "Chinese Simplified / 简体中文",
-                            },
-                            Object {
-                              "id": "zh-tw",
-                              "text": "Chinese Traditional / 繁體中文",
-                            },
-                            Object {
-                              "id": "hr",
-                              "text": "Croatian / Hrvatski",
-                            },
-                            Object {
-                              "id": "cs",
-                              "text": "Czech / Čeština",
-                            },
-                            Object {
-                              "id": "da",
-                              "text": "Danish / Dansk",
-                            },
-                            Object {
-                              "id": "nl",
-                              "text": "Dutch / Nederlands",
-                            },
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            },
-                            Object {
-                              "id": "fi",
-                              "text": "Finnish / Suomi",
-                            },
-                            Object {
-                              "id": "fr",
-                              "text": "French / Français",
-                            },
-                            Object {
-                              "id": "de",
-                              "text": "German / Deutsch",
-                            },
-                            Object {
-                              "id": "el",
-                              "text": "Greek / Ελληνικά",
-                            },
-                            Object {
-                              "id": "he",
-                              "text": "Hebrew / עברית",
-                            },
-                            Object {
-                              "id": "hu",
-                              "text": "Hungarian / Magyar",
-                            },
-                            Object {
-                              "id": "it",
-                              "text": "Italian / Italiano",
-                            },
-                            Object {
-                              "id": "ja",
-                              "text": "Japanese / 日本語",
-                            },
-                            Object {
-                              "id": "kk",
-                              "text": "Kazakh / Қазақша",
-                            },
-                            Object {
-                              "id": "ko",
-                              "text": "Korean / 한국어",
-                            },
-                            Object {
-                              "id": "mk",
-                              "text": "Macedonian / македонски",
-                            },
-                            Object {
-                              "id": "no",
-                              "text": "Norwegian / Norsk",
-                            },
-                            Object {
-                              "id": "pl",
-                              "text": "Polish / polski",
-                            },
-                            Object {
-                              "id": "pt-br",
-                              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                            },
-                            Object {
-                              "id": "pt",
-                              "text": "Portuguese/Portugal / Português/Portugal",
-                            },
-                            Object {
-                              "id": "ro",
-                              "text": "Romanian / Română",
-                            },
-                            Object {
-                              "id": "ru",
-                              "text": "Russian / Русский",
-                            },
-                            Object {
-                              "id": "sr",
-                              "text": "Serbian / srpski",
-                            },
-                            Object {
-                              "id": "sk",
-                              "text": "Slovak / Slovenčina",
-                            },
-                            Object {
-                              "id": "sl",
-                              "text": "Slovenian / Slovenščina",
-                            },
-                            Object {
-                              "id": "es",
-                              "text": "Spanish / Español",
-                            },
-                            Object {
-                              "id": "sv",
-                              "text": "Swedish / Svenska",
-                            },
-                            Object {
-                              "id": "th",
-                              "text": "Thai / ภาษาไทย",
-                            },
-                            Object {
-                              "id": "tr",
-                              "text": "Turkish / Türkçe",
-                            },
-                            Object {
-                              "id": "vi",
-                              "text": "Vietnamese / Tiếng Việt",
-                            },
-                          ]
-                        }
-                        light={false}
-                        onChange={[Function]}
-                        placeholder="Choose a language"
-                        selectedItem={
-                          Object {
-                            "id": "en",
-                            "text": "English",
-                          }
-                        }
-                        shouldFilterItem={[Function]}
-                        size="xl"
-                        titleText="Choose a language"
-                        type="default"
-                      >
-                        <Downshift
-                          defaultHighlightedIndex={null}
-                          defaultIsOpen={false}
-                          environment={[Window]}
-                          getA11yStatusMessage={[Function]}
-                          initialSelectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          inputId="dds-language-selector"
-                          inputValue="English"
-                          itemToString={[Function]}
-                          onChange={[Function]}
-                          onInputValueChange={[Function]}
-                          onOuterClick={[Function]}
-                          onSelect={[Function]}
-                          onStateChange={[Function]}
-                          onUserAction={[Function]}
-                          scrollIntoView={[Function]}
-                          selectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          selectedItemChanged={[Function]}
-                          stateReducer={[Function]}
-                          suppressRefError={false}
-                        >
-                          <div
-                            className="bx--list-box__wrapper"
-                          >
-                            <Text
-                              as="label"
-                              className="bx--label"
-                              htmlFor="dds-language-selector"
-                              id="downshift-1-label"
-                            >
-                              <label
-                                className="bx--label"
-                                dir="auto"
-                                htmlFor="dds-language-selector"
-                                id="downshift-1-label"
-                              >
-                                Choose a language
-                              </label>
-                            </Text>
-                            <ListBox
-                              className="bx--combo-box bx--language-selector bx--list-box--up"
-                              disabled={false}
-                              isOpen={false}
-                              light={false}
-                              size="xl"
-                              type="default"
-                            >
-                              <div
-                                className="bx--combo-box bx--language-selector bx--list-box--up bx--list-box bx--list-box--xl"
-                                onClick={[Function]}
-                                onKeyDown={[Function]}
-                              >
-                                <div
-                                  className="bx--list-box__field"
-                                >
-                                  <input
-                                    aria-activedescendant={null}
-                                    aria-autocomplete="list"
-                                    aria-controls={null}
-                                    aria-expanded={false}
-                                    aria-haspopup="listbox"
-                                    aria-labelledby={null}
-                                    autoComplete="off"
-                                    className="bx--text-input"
-                                    data-autoid="dds--language-selector"
-                                    disabled={false}
-                                    id="dds-language-selector"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                    placeholder="Choose a language"
-                                    role="combobox"
-                                    tabIndex="0"
-                                    type="text"
-                                    value="English"
-                                  />
-                                  <ListBoxSelection
-                                    clearSelection={[Function]}
-                                    disabled={false}
-                                    onClearSelection={[Function]}
-                                    translateWithId={[Function]}
-                                  >
-                                    <button
-                                      aria-label="Clear selected item"
-                                      className="bx--list-box__selection"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                      title="Clear selected item"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close16)>
-                                        <Icon
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close16)>
-                                    </button>
-                                  </ListBoxSelection>
-                                  <ListBoxTrigger
-                                    aria-haspopup={true}
-                                    aria-label="open menu"
-                                    data-toggle={true}
-                                    disabled={false}
-                                    isOpen={false}
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                    onKeyUp={[Function]}
-                                    onMouseUp={[Function]}
-                                    role="button"
-                                    translateWithId={[Function]}
-                                    type="button"
-                                  >
-                                    <button
-                                      aria-haspopup={true}
-                                      aria-label="Open"
-                                      className="bx--list-box__menu-icon"
-                                      data-toggle={true}
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseUp={[Function]}
-                                      role="button"
-                                      tabIndex="-1"
-                                      title="Open"
-                                      type="button"
-                                    >
-                                      <ForwardRef(ChevronDown16)>
-                                        <Icon
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ChevronDown16)>
-                                    </button>
-                                  </ListBoxTrigger>
-                                </div>
-                                <ListBoxMenu
-                                  aria-label="Choose an item"
-                                  aria-labelledby={null}
-                                  id="downshift-1-menu"
-                                  role="listbox"
-                                >
-                                  <div
-                                    aria-label="Choose an item"
-                                    aria-labelledby={null}
-                                    className="bx--list-box__menu"
-                                    id="downshift-1-menu"
-                                    role="listbox"
-                                  />
-                                </ListBoxMenu>
-                              </div>
-                            </ListBox>
-                          </div>
-                        </Downshift>
-                      </ComboBox>
-                      <Select
-                        aria-label="Choose a language"
-                        className="bx--language-selector"
-                        data-autoid="dds--language-selector__select"
-                        defaultValue="en"
-                        disabled={false}
-                        helperText=""
-                        id="bx--language-selector"
-                        inline={false}
-                        invalid={false}
-                        invalidText=""
-                        labelText="Choose a language"
-                        light={false}
-                        onChange={[Function]}
-                        text="English"
-                      >
-                        <div
-                          className="bx--form-item"
-                        >
-                          <div
-                            className="bx--select bx--language-selector"
-                          >
-                            <label
-                              className="bx--label"
-                              htmlFor="bx--language-selector"
-                            >
-                              Choose a language
-                            </label>
-                            <div
-                              className="bx--select-input__wrapper"
-                              data-invalid={null}
-                            >
-                              <select
-                                aria-label="Choose a language"
-                                className="bx--select-input"
-                                data-autoid="dds--language-selector__select"
-                                defaultValue="en"
-                                id="bx--language-selector"
-                                onChange={[Function]}
-                                text="English"
-                              >
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="0"
-                                  text="Arabic / عربية"
-                                  value="ar"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ar"
-                                  >
-                                    Arabic / عربية
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="1"
-                                  text="Bosnian / Bosanski"
-                                  value="bs"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="bs"
-                                  >
-                                    Bosnian / Bosanski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="2"
-                                  text="Bulgarian / Български"
-                                  value="bg"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="bg"
-                                  >
-                                    Bulgarian / Български
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="3"
-                                  text="Catalan / Català"
-                                  value="ca"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ca"
-                                  >
-                                    Catalan / Català
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="4"
-                                  text="Chinese Simplified / 简体中文"
-                                  value="zh"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="zh"
-                                  >
-                                    Chinese Simplified / 简体中文
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="5"
-                                  text="Chinese Traditional / 繁體中文"
-                                  value="zh-tw"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="zh-tw"
-                                  >
-                                    Chinese Traditional / 繁體中文
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="6"
-                                  text="Croatian / Hrvatski"
-                                  value="hr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="hr"
-                                  >
-                                    Croatian / Hrvatski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="7"
-                                  text="Czech / Čeština"
-                                  value="cs"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="cs"
-                                  >
-                                    Czech / Čeština
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="8"
-                                  text="Danish / Dansk"
-                                  value="da"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="da"
-                                  >
-                                    Danish / Dansk
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="9"
-                                  text="Dutch / Nederlands"
-                                  value="nl"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="nl"
-                                  >
-                                    Dutch / Nederlands
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="10"
-                                  text="English"
-                                  value="en"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="en"
-                                  >
-                                    English
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="11"
-                                  text="Finnish / Suomi"
-                                  value="fi"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="fi"
-                                  >
-                                    Finnish / Suomi
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="12"
-                                  text="French / Français"
-                                  value="fr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="fr"
-                                  >
-                                    French / Français
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="13"
-                                  text="German / Deutsch"
-                                  value="de"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="de"
-                                  >
-                                    German / Deutsch
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="14"
-                                  text="Greek / Ελληνικά"
-                                  value="el"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="el"
-                                  >
-                                    Greek / Ελληνικά
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="15"
-                                  text="Hebrew / עברית"
-                                  value="he"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="he"
-                                  >
-                                    Hebrew / עברית
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="16"
-                                  text="Hungarian / Magyar"
-                                  value="hu"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="hu"
-                                  >
-                                    Hungarian / Magyar
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="17"
-                                  text="Italian / Italiano"
-                                  value="it"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="it"
-                                  >
-                                    Italian / Italiano
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="18"
-                                  text="Japanese / 日本語"
-                                  value="ja"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ja"
-                                  >
-                                    Japanese / 日本語
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="19"
-                                  text="Kazakh / Қазақша"
-                                  value="kk"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="kk"
-                                  >
-                                    Kazakh / Қазақша
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="20"
-                                  text="Korean / 한국어"
-                                  value="ko"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ko"
-                                  >
-                                    Korean / 한국어
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="21"
-                                  text="Macedonian / македонски"
-                                  value="mk"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="mk"
-                                  >
-                                    Macedonian / македонски
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="22"
-                                  text="Norwegian / Norsk"
-                                  value="no"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="no"
-                                  >
-                                    Norwegian / Norsk
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="23"
-                                  text="Polish / polski"
-                                  value="pl"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="pl"
-                                  >
-                                    Polish / polski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="24"
-                                  text="Portuguese/Brazil/Brazil / Português/Brasil"
-                                  value="pt-br"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="pt-br"
-                                  >
-                                    Portuguese/Brazil/Brazil / Português/Brasil
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="25"
-                                  text="Portuguese/Portugal / Português/Portugal"
-                                  value="pt"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="pt"
-                                  >
-                                    Portuguese/Portugal / Português/Portugal
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="26"
-                                  text="Romanian / Română"
-                                  value="ro"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ro"
-                                  >
-                                    Romanian / Română
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="27"
-                                  text="Russian / Русский"
-                                  value="ru"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ru"
-                                  >
-                                    Russian / Русский
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="28"
-                                  text="Serbian / srpski"
-                                  value="sr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sr"
-                                  >
-                                    Serbian / srpski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="29"
-                                  text="Slovak / Slovenčina"
-                                  value="sk"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sk"
-                                  >
-                                    Slovak / Slovenčina
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="30"
-                                  text="Slovenian / Slovenščina"
-                                  value="sl"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sl"
-                                  >
-                                    Slovenian / Slovenščina
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="31"
-                                  text="Spanish / Español"
-                                  value="es"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="es"
-                                  >
-                                    Spanish / Español
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="32"
-                                  text="Swedish / Svenska"
-                                  value="sv"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sv"
-                                  >
-                                    Swedish / Svenska
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="33"
-                                  text="Thai / ภาษาไทย"
-                                  value="th"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="th"
-                                  >
-                                    Thai / ภาษาไทย
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="34"
-                                  text="Turkish / Türkçe"
-                                  value="tr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="tr"
-                                  >
-                                    Turkish / Türkçe
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="35"
-                                  text="Vietnamese / Tiếng Việt"
-                                  value="vi"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="vi"
-                                  >
-                                    Vietnamese / Tiếng Việt
-                                  </option>
-                                </SelectItem>
-                              </select>
-                              <ForwardRef(ChevronDown16)
-                                className="bx--select__arrow"
-                              >
-                                <Icon
-                                  className="bx--select__arrow"
-                                  fill="currentColor"
-                                  height={16}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--select__arrow"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={16}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ChevronDown16)>
-                            </div>
-                          </div>
-                        </div>
-                      </Select>
-                    </div>
-                  </LanguageSelector>
-                </div>
-              </div>
-              <FooterNav
-                disableLocaleButton={false}
-                groups={Array []}
-              />
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-            type="default"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-          "type": "default",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-45"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-50"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-51"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-51"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-52"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-52"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-53"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-53"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-54"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-54"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-55"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-55"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-56"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-56"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        mastheadProps={null}
-        type="default"
-      >
-        <footer
-          className="bx--footer"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LocaleButton
-                    aria=""
-                    displayLang=""
-                  >
-                    <div
-                      className="bx--locale-btn__container"
-                    >
-                      <Button
-                        aria-label=""
-                        className="bx--locale-btn"
-                        data-autoid="dds--locale-btn"
-                        iconDescription="Earth Filled Icon"
-                        kind="tertiary"
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label=""
-                          aria-pressed={null}
-                          className="bx--locale-btn bx--btn bx--btn--tertiary"
-                          data-autoid="dds--locale-btn"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <ForwardRef(EarthFilled20)
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(EarthFilled20)>
-                        </button>
-                      </Button>
-                      <LocaleModal
-                        closeFunc={[Function]}
-                        isOpen={false}
-                        localeData={null}
-                        localeDisplay={null}
-                        setIsOpen={[Function]}
-                      >
-                        <ComposedModal
-                          className="bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          selectorPrimaryFocus=".bx--modal-close"
-                        >
-                          <div
-                            aria-hidden={true}
-                            className="bx--modal bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            role="presentation"
-                          >
-                            <div
-                              aria-label={
-                                Array [
-                                  undefined,
-                                  <ForwardRef(EarthFilled16)
-                                    className="bx--locale-modal__label-globe"
-                                  />,
-                                ]
-                              }
-                              aria-modal="true"
-                              className="bx--modal-container"
-                              role="dialog"
-                            >
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                              <div
-                                className="bx--modal-container-body"
-                              >
-                                <ModalHeader
-                                  buttonOnClick={[Function]}
-                                  closeModal={[Function]}
-                                  iconDescription="Close"
-                                  key=".0"
-                                  label={
-                                    Array [
-                                      undefined,
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                      />,
-                                    ]
-                                  }
-                                >
-                                  <div
-                                    className="bx--modal-header"
-                                  >
-                                    <h2
-                                      className="bx--modal-header__label bx--type-delta"
-                                    >
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                        key="earthfilled"
-                                      >
-                                        <Icon
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(EarthFilled16)>
-                                    </h2>
-                                    <button
-                                      aria-label="Close"
-                                      className="bx--modal-close"
-                                      onClick={[Function]}
-                                      title="Close"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close20)
-                                        className="bx--modal-close__icon"
-                                      >
-                                        <Icon
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close20)>
-                                    </button>
-                                  </div>
-                                </ModalHeader>
-                                <ForwardRef(ModalBody)
-                                  className="bx--locale-modal "
-                                  key=".1"
-                                >
-                                  <div
-                                    className="bx--modal-content bx--locale-modal "
-                                  >
-                                    <LocaleModalRegions
-                                      regionList={Array []}
-                                      setClearResults={[Function]}
-                                      setCurrentRegion={[Function]}
-                                      setIsFiltering={[Function]}
-                                    >
-                                      <div
-                                        className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                      >
-                                        <div
-                                          className="bx--row"
-                                        />
-                                      </div>
-                                    </LocaleModalRegions>
-                                    <LocaleModalCountries
-                                      regionList={Array []}
-                                      searchLabel="Search by location or language"
-                                      setClearResults={[Function]}
-                                    >
-                                      <div
-                                        className="bx--locale-modal__filter"
-                                      >
-                                        <div
-                                          className="bx--locale-modal__search"
-                                        >
-                                          <Search
-                                            closeButtonLabelText="Clear search input"
-                                            data-autoid="dds--locale-modal__filter"
-                                            id="bx--locale-modal__filter"
-                                            labelText="Search by location or language"
-                                            onChange={[Function]}
-                                            onClear={[Function]}
-                                            placeholder=""
-                                            tabIndex="0"
-                                            type="text"
-                                          >
-                                            <div
-                                              aria-labelledby="bx--locale-modal__filter-search"
-                                              className="bx--search bx--search--xl"
-                                              role="search"
-                                            >
-                                              <div
-                                                className="bx--search-magnifier"
-                                              >
-                                                <ForwardRef(Search16)
-                                                  className="bx--search-magnifier-icon"
-                                                >
-                                                  <Icon
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Search16)>
-                                              </div>
-                                              <label
-                                                className="bx--label"
-                                                htmlFor="bx--locale-modal__filter"
-                                                id="bx--locale-modal__filter-search"
-                                              >
-                                                Search by location or language
-                                              </label>
-                                              <input
-                                                autoComplete="off"
-                                                className="bx--search-input"
-                                                data-autoid="dds--locale-modal__filter"
-                                                id="bx--locale-modal__filter"
-                                                onChange={[Function]}
-                                                onKeyDown={[Function]}
-                                                placeholder=""
-                                                role="searchbox"
-                                                tabIndex="0"
-                                                type="text"
-                                              />
-                                              <button
-                                                aria-label="Clear search input"
-                                                className="bx--search-close bx--search-close--hidden"
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <ForwardRef(Close16)>
-                                                  <Icon
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Close16)>
-                                              </button>
-                                            </div>
-                                          </Search>
-                                          <p
-                                            className="bx--locale-modal__search-text"
-                                          />
-                                        </div>
-                                        <ul
-                                          className="bx--locale-modal__list"
-                                        >
-                                          <p
-                                            aria-live="assertive"
-                                            className="bx--assistive-text"
-                                            role="status"
-                                          />
-                                        </ul>
-                                      </div>
-                                    </LocaleModalCountries>
-                                  </div>
-                                </ForwardRef(ModalBody)>
-                              </div>
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                            </div>
-                          </div>
-                        </ComposedModal>
-                      </LocaleModal>
-                    </div>
-                  </LocaleButton>
-                </div>
-              </div>
-              <FooterNav
-                disableLocaleButton={false}
-                groups={Array []}
-              />
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-            type="default"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell Search open 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--search-open-by-default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: Search open",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-          "type": "default",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "searchOpenOnload": true,
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={true}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className="bx--masthead__header--search-active"
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--masthead__header--search-active bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--masthead__header--search-active bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={true}
-                    >
-                      <div
-                        className="bx--header__logo bx--search-active"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search bx--masthead__header--search-active"
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={true}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={true}
-                      >
-                        <div
-                          className="bx--masthead__search bx--masthead__search--active"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <form
-                            action="https://www.ibm.com/search?lnk=mhsrch"
-                            id="bx--masthead__search--form"
-                            method="get"
-                          >
-                            <input
-                              name="lang"
-                              type="hidden"
-                              value="en"
-                            />
-                            <input
-                              name="cc"
-                              type="hidden"
-                              value="us"
-                            />
-                            <input
-                              name="lnk"
-                              type="hidden"
-                              value="mhsrch"
-                            />
-                            <Autosuggest
-                              alwaysRenderSuggestions={false}
-                              containerProps={
-                                Object {
-                                  "aria-expanded": null,
-                                  "aria-haspopup": null,
-                                  "aria-label": null,
-                                  "aria-owns": null,
-                                  "role": null,
-                                }
-                              }
-                              focusInputOnSuggestionClick={false}
-                              getSuggestionValue={[Function]}
-                              highlightFirstSuggestion={false}
-                              id="1"
-                              inputProps={
-                                Object {
-                                  "aria-expanded": true,
-                                  "aria-label": "Search all of IBM",
-                                  "className": "bx--header__search--input",
-                                  "id": "bx--header__search--input",
-                                  "onChange": [Function],
-                                  "onKeyDown": [Function],
-                                  "placeholder": "Search all of IBM",
-                                  "role": "combobox",
-                                  "value": "",
-                                }
-                              }
-                              multiSection={false}
-                              onSuggestionSelected={[Function]}
-                              onSuggestionsClearRequested={[Function]}
-                              onSuggestionsFetchRequested={[Function]}
-                              renderInputComponent={[Function]}
-                              renderSuggestion={[Function]}
-                              renderSuggestionsContainer={[Function]}
-                              shouldKeepSuggestionsOnSelect={[Function]}
-                              shouldRenderSuggestions={[Function]}
-                              suggestions={Array []}
-                              theme={
-                                Object {
-                                  "container": "react-autosuggest__container",
-                                  "containerOpen": "react-autosuggest__container--open",
-                                  "input": "react-autosuggest__input",
-                                  "inputFocused": "react-autosuggest__input--focused",
-                                  "inputOpen": "react-autosuggest__input--open",
-                                  "sectionContainer": "react-autosuggest__section-container",
-                                  "sectionContainerFirst": "react-autosuggest__section-container--first",
-                                  "sectionTitle": "react-autosuggest__section-title",
-                                  "suggestion": "react-autosuggest__suggestion",
-                                  "suggestionFirst": "react-autosuggest__suggestion--first",
-                                  "suggestionHighlighted": "react-autosuggest__suggestion--highlighted",
-                                  "suggestionsContainer": "react-autosuggest__suggestions-container",
-                                  "suggestionsContainerOpen": "react-autosuggest__suggestions-container--open",
-                                  "suggestionsList": "react-autosuggest__suggestions-list",
-                                }
-                              }
-                            >
-                              <Autowhatever
-                                containerProps={
-                                  Object {
-                                    "aria-expanded": null,
-                                    "aria-haspopup": null,
-                                    "aria-label": null,
-                                    "aria-owns": null,
-                                    "role": null,
-                                  }
-                                }
-                                getSectionItems={[Function]}
-                                highlightedItemIndex={null}
-                                highlightedSectionIndex={null}
-                                id="1"
-                                inputProps={
-                                  Object {
-                                    "aria-expanded": true,
-                                    "aria-label": "Search all of IBM",
-                                    "className": "bx--header__search--input",
-                                    "id": "bx--header__search--input",
-                                    "onBlur": [Function],
-                                    "onChange": [Function],
-                                    "onFocus": [Function],
-                                    "onKeyDown": [Function],
-                                    "placeholder": "Search all of IBM",
-                                    "role": "combobox",
-                                    "value": "",
-                                  }
-                                }
-                                itemProps={[Function]}
-                                items={Array []}
-                                multiSection={false}
-                                renderInputComponent={[Function]}
-                                renderItem={[Function]}
-                                renderItemData={
-                                  Object {
-                                    "query": "",
-                                  }
-                                }
-                                renderItemsContainer={[Function]}
-                                renderSectionTitle={[Function]}
-                                theme={
-                                  Object {
-                                    "container": "react-autosuggest__container",
-                                    "containerOpen": "react-autosuggest__container--open",
-                                    "input": "react-autosuggest__input",
-                                    "inputFocused": "react-autosuggest__input--focused",
-                                    "inputOpen": "react-autosuggest__input--open",
-                                    "item": "react-autosuggest__suggestion",
-                                    "itemFirst": "react-autosuggest__suggestion--first",
-                                    "itemHighlighted": "react-autosuggest__suggestion--highlighted",
-                                    "itemsContainer": "react-autosuggest__suggestions-container",
-                                    "itemsContainerOpen": "react-autosuggest__suggestions-container--open",
-                                    "itemsList": "react-autosuggest__suggestions-list",
-                                    "sectionContainer": "react-autosuggest__section-container",
-                                    "sectionContainerFirst": "react-autosuggest__section-container--first",
-                                    "sectionTitle": "react-autosuggest__section-title",
-                                  }
-                                }
-                              >
-                                <div
-                                  aria-expanded={null}
-                                  aria-haspopup={null}
-                                  aria-label={null}
-                                  aria-owns={null}
-                                  className="react-autosuggest__container"
-                                  key="react-autowhatever-1-container"
-                                  role={null}
-                                >
-                                  <MastheadSearchInput
-                                    componentInputProps={
-                                      Object {
-                                        "aria-activedescendant": null,
-                                        "aria-autocomplete": "list",
-                                        "aria-controls": "react-autowhatever-1",
-                                        "aria-expanded": true,
-                                        "aria-label": "Search all of IBM",
-                                        "autoComplete": "off",
-                                        "className": "bx--header__search--input",
-                                        "id": "bx--header__search--input",
-                                        "key": "react-autowhatever-1-input",
-                                        "onBlur": [Function],
-                                        "onChange": [Function],
-                                        "onFocus": [Function],
-                                        "onKeyDown": [Function],
-                                        "placeholder": "Search all of IBM",
-                                        "ref": [Function],
-                                        "role": "combobox",
-                                        "type": "text",
-                                        "value": "",
-                                      }
-                                    }
-                                    disableFocus={true}
-                                    dispatch={[Function]}
-                                    isActive={true}
-                                    searchIconClick={[Function]}
-                                  >
-                                    <input
-                                      aria-activedescendant={null}
-                                      aria-autocomplete="list"
-                                      aria-controls="react-autowhatever-1"
-                                      aria-expanded={true}
-                                      aria-label="Search all of IBM"
-                                      autoComplete="off"
-                                      className="bx--header__search--input"
-                                      data-autoid="dds--header__search--input"
-                                      id="bx--header__search--input"
-                                      key="react-autowhatever-1-input"
-                                      name="q"
-                                      onBlur={[Function]}
-                                      onChange={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      placeholder="Search all of IBM"
-                                      role="combobox"
-                                      tabIndex={null}
-                                      type="text"
-                                      value=""
-                                    />
-                                  </MastheadSearchInput>
-                                  <div
-                                    className="react-autosuggest__suggestions-container"
-                                    id="react-autowhatever-1"
-                                    key="react-autowhatever-1-items-container"
-                                    role="listbox"
-                                  />
-                                </div>
-                              </Autowhatever>
-                            </Autosuggest>
-                          </form>
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Search all of IBM"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Search all of IBM"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Search all of IBM"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Search all of IBM"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Search all of IBM
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-109"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-114"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-115"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-115"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-116"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-116"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-117"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-117"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-118"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-118"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-119"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-119"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-120"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-120"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        mastheadProps={null}
-        type="default"
-      >
-        <footer
-          className="bx--footer"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LocaleButton
-                    aria=""
-                    displayLang=""
-                  >
-                    <div
-                      className="bx--locale-btn__container"
-                    >
-                      <Button
-                        aria-label=""
-                        className="bx--locale-btn"
-                        data-autoid="dds--locale-btn"
-                        iconDescription="Earth Filled Icon"
-                        kind="tertiary"
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label=""
-                          aria-pressed={null}
-                          className="bx--locale-btn bx--btn bx--btn--tertiary"
-                          data-autoid="dds--locale-btn"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <ForwardRef(EarthFilled20)
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(EarthFilled20)>
-                        </button>
-                      </Button>
-                      <LocaleModal
-                        closeFunc={[Function]}
-                        isOpen={false}
-                        localeData={null}
-                        localeDisplay={null}
-                        setIsOpen={[Function]}
-                      >
-                        <ComposedModal
-                          className="bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          selectorPrimaryFocus=".bx--modal-close"
-                        >
-                          <div
-                            aria-hidden={true}
-                            className="bx--modal bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            role="presentation"
-                          >
-                            <div
-                              aria-label={
-                                Array [
-                                  undefined,
-                                  <ForwardRef(EarthFilled16)
-                                    className="bx--locale-modal__label-globe"
-                                  />,
-                                ]
-                              }
-                              aria-modal="true"
-                              className="bx--modal-container"
-                              role="dialog"
-                            >
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                              <div
-                                className="bx--modal-container-body"
-                              >
-                                <ModalHeader
-                                  buttonOnClick={[Function]}
-                                  closeModal={[Function]}
-                                  iconDescription="Close"
-                                  key=".0"
-                                  label={
-                                    Array [
-                                      undefined,
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                      />,
-                                    ]
-                                  }
-                                >
-                                  <div
-                                    className="bx--modal-header"
-                                  >
-                                    <h2
-                                      className="bx--modal-header__label bx--type-delta"
-                                    >
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                        key="earthfilled"
-                                      >
-                                        <Icon
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(EarthFilled16)>
-                                    </h2>
-                                    <button
-                                      aria-label="Close"
-                                      className="bx--modal-close"
-                                      onClick={[Function]}
-                                      title="Close"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close20)
-                                        className="bx--modal-close__icon"
-                                      >
-                                        <Icon
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close20)>
-                                    </button>
-                                  </div>
-                                </ModalHeader>
-                                <ForwardRef(ModalBody)
-                                  className="bx--locale-modal "
-                                  key=".1"
-                                >
-                                  <div
-                                    className="bx--modal-content bx--locale-modal "
-                                  >
-                                    <LocaleModalRegions
-                                      regionList={Array []}
-                                      setClearResults={[Function]}
-                                      setCurrentRegion={[Function]}
-                                      setIsFiltering={[Function]}
-                                    >
-                                      <div
-                                        className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                      >
-                                        <div
-                                          className="bx--row"
-                                        />
-                                      </div>
-                                    </LocaleModalRegions>
-                                    <LocaleModalCountries
-                                      regionList={Array []}
-                                      searchLabel="Search by location or language"
-                                      setClearResults={[Function]}
-                                    >
-                                      <div
-                                        className="bx--locale-modal__filter"
-                                      >
-                                        <div
-                                          className="bx--locale-modal__search"
-                                        >
-                                          <Search
-                                            closeButtonLabelText="Clear search input"
-                                            data-autoid="dds--locale-modal__filter"
-                                            id="bx--locale-modal__filter"
-                                            labelText="Search by location or language"
-                                            onChange={[Function]}
-                                            onClear={[Function]}
-                                            placeholder=""
-                                            tabIndex="0"
-                                            type="text"
-                                          >
-                                            <div
-                                              aria-labelledby="bx--locale-modal__filter-search"
-                                              className="bx--search bx--search--xl"
-                                              role="search"
-                                            >
-                                              <div
-                                                className="bx--search-magnifier"
-                                              >
-                                                <ForwardRef(Search16)
-                                                  className="bx--search-magnifier-icon"
-                                                >
-                                                  <Icon
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Search16)>
-                                              </div>
-                                              <label
-                                                className="bx--label"
-                                                htmlFor="bx--locale-modal__filter"
-                                                id="bx--locale-modal__filter-search"
-                                              >
-                                                Search by location or language
-                                              </label>
-                                              <input
-                                                autoComplete="off"
-                                                className="bx--search-input"
-                                                data-autoid="dds--locale-modal__filter"
-                                                id="bx--locale-modal__filter"
-                                                onChange={[Function]}
-                                                onKeyDown={[Function]}
-                                                placeholder=""
-                                                role="searchbox"
-                                                tabIndex="0"
-                                                type="text"
-                                              />
-                                              <button
-                                                aria-label="Clear search input"
-                                                className="bx--search-close bx--search-close--hidden"
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <ForwardRef(Close16)>
-                                                  <Icon
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Close16)>
-                                              </button>
-                                            </div>
-                                          </Search>
-                                          <p
-                                            className="bx--locale-modal__search-text"
-                                          />
-                                        </div>
-                                        <ul
-                                          className="bx--locale-modal__list"
-                                        >
-                                          <p
-                                            aria-live="assertive"
-                                            className="bx--assistive-text"
-                                            role="status"
-                                          />
-                                        </ul>
-                                      </div>
-                                    </LocaleModalCountries>
-                                  </div>
-                                </ForwardRef(ModalBody)>
-                              </div>
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                            </div>
-                          </div>
-                        </ComposedModal>
-                      </LocaleModal>
-                    </div>
-                  </LocaleButton>
-                </div>
-              </div>
-              <FooterNav
-                disableLocaleButton={false}
-                groups={Array []}
-              />
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-            type="default"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell With L1 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--with-l-1",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: With L1",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "mastheadL1Data": Object {
-            "navigationL1": Array [
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "Explore",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "",
-                            "imageUrl": "",
-                            "linkTitle": "",
-                            "linkUrl": "",
-                          },
-                          "headingTitle": "",
-                          "headingUrl": "",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Title",
-                          },
-                        },
-                        "title": "Link 1",
-                        "url": "",
-                      },
-                      Object {
-                        "title": "Menu dropdown item with extra long text",
-                        "url": "",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Lorem ipsum dolor sit amet",
-                "titleEnglish": "Lorem ipsum dolor sit amet",
-                "url": "",
-              },
-              Object {
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                          "feature": Object {
-                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                            "linkTitle": "Explore all our business consulting and technology services",
-                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          },
-                          "headingTitle": "Services",
-                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Link 2",
-                        "url": "",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Funding options that fit your business",
-                          "feature": Object {
-                            "heading": "Cloud financing strategies that work for your business",
-                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                          },
-                          "headingTitle": "Financing",
-                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Financing",
-                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Consectetur adipiscing elit",
-                "titleEnglish": "Consectetur adipiscing elit",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Nulla quis sem at nibh elementum imperdiet",
-                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                "url": "https://www.ibm.com/industries?lnk=min",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "IBM Developer newsletters",
-                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "IBM Developer",
-                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "IBM Developer",
-                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Blockchain 101",
-                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Blockchain",
-                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Blockchain",
-                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Make sense of Kubernetes",
-                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                            "linkTitle": "Deploy a simple Python application with Kubernetes",
-                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Containers",
-                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Containers",
-                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Train your data no matter where it lives",
-                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Analytics",
-                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Developer community",
-                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Analytics",
-                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Fusce nec tellus sed augue semper porta",
-                "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Sed cursus ante dapibus diam",
-                "titleEnglish": "Sed cursus ante dapibus diam",
-                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-              },
-            ],
-          },
-          "placeHolderText": "Search all of IBM",
-          "platform": Object {
-            "name": "Stock Charts",
-            "url": "https://www.example.com",
-          },
-          "selectedMenuItem": "Lorem ipsum dolor sit amet",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={
-          Object {
-            "navigationL1": Array [
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "Explore",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "",
-                            "imageUrl": "",
-                            "linkTitle": "",
-                            "linkUrl": "",
-                          },
-                          "headingTitle": "",
-                          "headingUrl": "",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Title",
-                          },
-                        },
-                        "title": "Link 1",
-                        "url": "",
-                      },
-                      Object {
-                        "title": "Menu dropdown item with extra long text",
-                        "url": "",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Lorem ipsum dolor sit amet",
-                "titleEnglish": "Lorem ipsum dolor sit amet",
-                "url": "",
-              },
-              Object {
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                          "feature": Object {
-                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                            "linkTitle": "Explore all our business consulting and technology services",
-                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          },
-                          "headingTitle": "Services",
-                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Link 2",
-                        "url": "",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Funding options that fit your business",
-                          "feature": Object {
-                            "heading": "Cloud financing strategies that work for your business",
-                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                          },
-                          "headingTitle": "Financing",
-                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Financing",
-                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Consectetur adipiscing elit",
-                "titleEnglish": "Consectetur adipiscing elit",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Nulla quis sem at nibh elementum imperdiet",
-                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                "url": "https://www.ibm.com/industries?lnk=min",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "IBM Developer newsletters",
-                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "IBM Developer",
-                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "IBM Developer",
-                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Blockchain 101",
-                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Blockchain",
-                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Blockchain",
-                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Make sense of Kubernetes",
-                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                            "linkTitle": "Deploy a simple Python application with Kubernetes",
-                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Containers",
-                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Containers",
-                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Train your data no matter where it lives",
-                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Analytics",
-                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Developer community",
-                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Analytics",
-                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Fusce nec tellus sed augue semper porta",
-                "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Sed cursus ante dapibus diam",
-                "titleEnglish": "Sed cursus ante dapibus diam",
-                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-              },
-            ],
-          }
-        }
-        placeHolderText="Search all of IBM"
-        platform={
-          Object {
-            "name": "Stock Charts",
-            "url": "https://www.example.com",
-          }
-        }
-        searchOpenOnload={false}
-        selectedMenuItem="Lorem ipsum dolor sit amet"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className="bx--masthead__platform"
-                      data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={true}
-                      isSideNavExpanded={false}
-                      navType="eco"
-                      navigation={
-                        Array [
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "Explore",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "",
-                                        "imageUrl": "",
-                                        "linkTitle": "",
-                                        "linkUrl": "",
-                                      },
-                                      "headingTitle": "",
-                                      "headingUrl": "",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Title",
-                                      },
-                                    },
-                                    "title": "Link 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Menu dropdown item with extra long text",
-                                    "url": "",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Lorem ipsum dolor sit amet",
-                            "titleEnglish": "Lorem ipsum dolor sit amet",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                      "feature": Object {
-                                        "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                        "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                        "linkTitle": "Explore all our business consulting and technology services",
-                                        "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                      },
-                                      "headingTitle": "Services",
-                                      "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Link 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "Funding options that fit your business",
-                                      "feature": Object {
-                                        "heading": "Cloud financing strategies that work for your business",
-                                        "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                        "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                        "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                      },
-                                      "headingTitle": "Financing",
-                                      "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Financing",
-                                    "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Consectetur adipiscing elit",
-                            "titleEnglish": "Consectetur adipiscing elit",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": false,
-                            "menuSections": Array [],
-                            "title": "Nulla quis sem at nibh elementum imperdiet",
-                            "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                            "url": "https://www.ibm.com/industries?lnk=min",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "IBM Developer newsletters",
-                                        "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                        "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                        "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "IBM Developer",
-                                      "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "IBM Developer",
-                                    "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Blockchain 101",
-                                        "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                        "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                        "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Blockchain",
-                                      "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Blockchain",
-                                    "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Make sense of Kubernetes",
-                                        "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                        "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                        "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Containers",
-                                      "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Code patterns",
-                                            "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Tutorials",
-                                            "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Events",
-                                            "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Containers",
-                                    "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Train your data no matter where it lives",
-                                        "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                        "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                        "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Analytics",
-                                      "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Code patterns",
-                                            "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Tutorials",
-                                            "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Events",
-                                            "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Developer community",
-                                            "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Analytics",
-                                    "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Fusce nec tellus sed augue semper porta",
-                            "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": false,
-                            "menuSections": Array [],
-                            "title": "Sed cursus ante dapibus diam",
-                            "titleEnglish": "Sed cursus ante dapibus diam",
-                            "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                          },
-                        ]
-                      }
-                      onOverlayClick={[Function]}
-                      platform={
-                        Object {
-                          "name": "Stock Charts",
-                          "url": "https://www.example.com",
-                        }
-                      }
-                      selectedMenuItem="Lorem ipsum dolor sit amet"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-eco-sidenav__l0"
-                          >
-                            <a
-                              className="bx--side-nav__submenu bx--side-nav__submenu-platform"
-                              data-autoid="dds--masthead-eco-sidenav__l0-productname"
-                              href="https://www.example.com"
-                            >
-                              Stock Charts
-                            </a>
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav0"
-                                            dataTitle="lorem-ipsum-dolor-sit-amet"
-                                            isSideNavExpanded={false}
-                                            key="Lorem ipsum dolor sit amet"
-                                            onToggle={[Function]}
-                                            selected={true}
-                                            title="Lorem ipsum dolor sit amet"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav0"
-                                              buttonRef={null}
-                                              dataTitle="lorem-ipsum-dolor-sit-amet"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={true}
-                                              title="Lorem ipsum dolor sit amet"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu bx--masthead__side-nav--submemu--selected"
-                                                  data-selected="true"
-                                                  data-title="lorem-ipsum-dolor-sit-amet"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0"
-                                                    >
-                                                      Lorem ipsum dolor sit amet
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1"
-                                            dataTitle="consectetur-adipiscing-elit"
-                                            isSideNavExpanded={false}
-                                            key="Consectetur adipiscing elit"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Consectetur adipiscing elit"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1"
-                                              buttonRef={null}
-                                              dataTitle="consectetur-adipiscing-elit"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Consectetur adipiscing elit"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  data-title="consectetur-adipiscing-elit"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1"
-                                                    >
-                                                      Consectetur adipiscing elit
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav2"
-                                            href="https://www.ibm.com/industries?lnk=min"
-                                            key="Nulla quis sem at nibh elementum imperdiet"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav2"
-                                                element="a"
-                                                href="https://www.ibm.com/industries?lnk=min"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav2"
-                                                  href="https://www.ibm.com/industries?lnk=min"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Nulla quis sem at nibh elementum imperdiet
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3"
-                                            dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                            isSideNavExpanded={false}
-                                            key="Fusce nec tellus sed augue semper porta"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Fusce nec tellus sed augue semper porta"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3"
-                                              buttonRef={null}
-                                              dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Fusce nec tellus sed augue semper porta"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  data-title="fusce-nec-tellus-sed-augue-semper-porta"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3"
-                                                    >
-                                                      Fusce nec tellus sed augue semper porta
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav4"
-                                            href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                            key="Sed cursus ante dapibus diam"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav4"
-                                                element="a"
-                                                href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav4"
-                                                  href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Sed cursus ante dapibus diam
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading="Explore"
-                                        id="panel__(0,-1)"
-                                        isSubmenu={true}
-                                        key="Lorem ipsum dolor sit amet"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Lorem ipsum dolor sit amet"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Lorem ipsum dolor sit amet
-                                          </li>
-                                          <p
-                                            className="bx--masthead__side-nav--submemu-heading"
-                                          >
-                                            Explore
-                                          </p>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Link 1"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Link 1"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Link 1"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
-                                                    >
-                                                      Link 1
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
-                                            href=""
-                                            key="Menu dropdown item with extra long text"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Menu dropdown item with extra long text
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading=""
-                                        id="panel__(1,-1)"
-                                        isSubmenu={true}
-                                        key="Consectetur adipiscing elit"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Consectetur adipiscing elit"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Consectetur adipiscing elit
-                                          </li>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Link 2"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Link 2"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Link 2"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
-                                                    >
-                                                      Link 2
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Financing"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Financing"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Financing"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
-                                                    >
-                                                      Financing
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading=""
-                                        id="panel__(3,-1)"
-                                        isSubmenu={true}
-                                        key="Fusce nec tellus sed augue semper porta"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Fusce nec tellus sed augue semper porta"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Fusce nec tellus sed augue semper porta
-                                          </li>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="IBM Developer"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="IBM Developer"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="IBM Developer"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
-                                                    >
-                                                      IBM Developer
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Blockchain"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Blockchain"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Blockchain"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
-                                                    >
-                                                      Blockchain
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Containers"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Containers"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Containers"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
-                                                    >
-                                                      Containers
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Analytics"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Analytics"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Analytics"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
-                                                    >
-                                                      Analytics
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(0,0)"
-                                        isSubmenu={true}
-                                        key="Link 1"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Link 1"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Link 1
-                                          </li>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(0,1)"
-                                        isSubmenu={true}
-                                        key="Menu dropdown item with extra long text"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Menu dropdown item with extra long text"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Menu dropdown item with extra long text
-                                          </li>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,0)"
-                                        isSubmenu={true}
-                                        key="Link 2"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Link 2"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Link 2
-                                          </li>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,1)"
-                                        isSubmenu={true}
-                                        key="Financing"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Financing"
-                                        titleUrl="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Financing
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,0)"
-                                        isSubmenu={true}
-                                        key="IBM Developer"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="IBM Developer"
-                                        titleUrl="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        IBM Developer
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,1)"
-                                        isSubmenu={true}
-                                        key="Blockchain"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Blockchain"
-                                        titleUrl="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Blockchain
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,2)"
-                                        isSubmenu={true}
-                                        key="Containers"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Containers"
-                                        titleUrl="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,2)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Containers
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
-                                            href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
-                                                  href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
-                                            href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
-                                            href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
-                                                  href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,3)"
-                                        isSubmenu={true}
-                                        key="Analytics"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Analytics"
-                                        titleUrl="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,3)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Analytics
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
-                                            href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
-                                                  href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
-                                            href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
-                                            href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
-                                                  href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
-                                            href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Developer community"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
-                                                  href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Developer community
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-eco__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-eco__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search bx--masthead__platform"
-                    >
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="eco"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-eco__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-eco__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="eco"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-eco__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-eco__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-eco__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-eco__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-              <div>
-                <MastheadL1
-                  hasCurrentUrl={[Function]}
-                  navType="eco"
-                  navigationL1={
-                    Array [
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "Explore",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "",
-                                    "imageUrl": "",
-                                    "linkTitle": "",
-                                    "linkUrl": "",
-                                  },
-                                  "headingTitle": "",
-                                  "headingUrl": "",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Title",
-                                  },
-                                },
-                                "title": "Link 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Menu dropdown item with extra long text",
-                                "url": "",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Lorem ipsum dolor sit amet",
-                        "titleEnglish": "Lorem ipsum dolor sit amet",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                  "feature": Object {
-                                    "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                    "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                    "linkTitle": "Explore all our business consulting and technology services",
-                                    "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                  },
-                                  "headingTitle": "Services",
-                                  "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Link 2",
-                                "url": "",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "Funding options that fit your business",
-                                  "feature": Object {
-                                    "heading": "Cloud financing strategies that work for your business",
-                                    "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                    "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                    "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                  },
-                                  "headingTitle": "Financing",
-                                  "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Financing",
-                                "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Consectetur adipiscing elit",
-                        "titleEnglish": "Consectetur adipiscing elit",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": false,
-                        "menuSections": Array [],
-                        "title": "Nulla quis sem at nibh elementum imperdiet",
-                        "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                        "url": "https://www.ibm.com/industries?lnk=min",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "IBM Developer newsletters",
-                                    "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                    "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                    "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "IBM Developer",
-                                  "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "IBM Developer",
-                                "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Blockchain 101",
-                                    "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                    "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                    "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Blockchain",
-                                  "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Blockchain",
-                                "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Make sense of Kubernetes",
-                                    "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                    "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                    "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Containers",
-                                  "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Code patterns",
-                                        "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Tutorials",
-                                        "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Events",
-                                        "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Containers",
-                                "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Train your data no matter where it lives",
-                                    "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                    "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                    "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Analytics",
-                                  "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Code patterns",
-                                        "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Tutorials",
-                                        "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Events",
-                                        "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Developer community",
-                                        "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Analytics",
-                                "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Fusce nec tellus sed augue semper porta",
-                        "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": false,
-                        "menuSections": Array [],
-                        "title": "Sed cursus ante dapibus diam",
-                        "titleEnglish": "Sed cursus ante dapibus diam",
-                        "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                      },
-                    ]
-                  }
-                  platform={
-                    Object {
-                      "name": "Stock Charts",
-                      "url": "https://www.example.com",
-                    }
-                  }
-                  selectedMenuItem="Lorem ipsum dolor sit amet"
-                  titleLink={null}
-                >
-                  <div
-                    className="bx--masthead__l1"
-                  >
-                    <div
-                      className="bx--masthead__l1-inner-container"
-                    >
-                      <div
-                        className="bx--masthead__l1-name"
-                        data-selected={false}
-                      >
-                        <span
-                          className="bx--masthead__l1-name-title"
-                        >
-                          <a
-                            href="https://www.example.com"
-                          >
-                            Stock Charts
-                          </a>
-                        </span>
-                      </div>
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
-                          <div
-                            className="bx--header__nav-content"
-                          >
-                            <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label="Main Navigation"
-                              className="bx--masthead__l1-nav"
-                            >
-                              <nav
-                                aria-label="Main Navigation"
-                                className="bx--header__nav bx--masthead__l1-nav"
-                              >
-                                <ul
-                                  aria-label="Main Navigation"
-                                  className="bx--header__menu-bar"
-                                >
-                                  <ForwardRef
-                                    aria-label="Lorem ipsum dolor sit amet"
-                                    autoId="dds--masthead-eco__l1-nav0"
-                                    className=""
-                                    key=".$0"
-                                    menuLinkName="Lorem ipsum dolor sit amet"
-                                    selected={true}
-                                  >
-                                    <HeaderMenu
-                                      aria-label="Lorem ipsum dolor sit amet"
-                                      autoId="dds--masthead-eco__l1-nav0"
-                                      className=""
-                                      focusRef={[Function]}
-                                      menuLinkName="Lorem ipsum dolor sit amet"
-                                      renderMenuContent={[Function]}
-                                      selected={true}
-                                      setOverlay={[Function]}
-                                    >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav0"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
-                                      >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          data-selected="true"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Lorem ipsum dolor sit amet
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
-                                                className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          className="bx--header__menu"
-                                        >
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href=""
-                                            key=".$Link 1"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href=""
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Link 1
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href=""
-                                            key=".$Menu dropdown item with extra long text"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href=""
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Menu dropdown item with extra long text
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <ForwardRef
-                                    aria-label="Consectetur adipiscing elit"
-                                    autoId="dds--masthead-eco__l1-nav1"
-                                    className=""
-                                    key=".$1"
-                                    menuLinkName="Consectetur adipiscing elit"
-                                    selected={false}
-                                  >
-                                    <HeaderMenu
-                                      aria-label="Consectetur adipiscing elit"
-                                      autoId="dds--masthead-eco__l1-nav1"
-                                      className=""
-                                      focusRef={[Function]}
-                                      menuLinkName="Consectetur adipiscing elit"
-                                      renderMenuContent={[Function]}
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav1"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
-                                      >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Consectetur adipiscing elit"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          data-selected="false"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Consectetur adipiscing elit
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
-                                                className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Consectetur adipiscing elit"
-                                          className="bx--header__menu"
-                                        >
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href=""
-                                            key=".$Link 2"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href=""
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Link 2
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                            key=".$Financing"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Financing
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <HeaderMenuItem
-                                    data-autoid="dds--masthead-eco__l1-nav2"
-                                    data-selected="false"
-                                    href="https://www.ibm.com/industries?lnk=min"
-                                    key=".$2"
-                                  >
-                                    <li>
-                                      <Link
-                                        className="bx--header__menu-item"
-                                        data-autoid="dds--masthead-eco__l1-nav2"
-                                        data-selected="false"
-                                        element="a"
-                                        href="https://www.ibm.com/industries?lnk=min"
-                                        tabIndex={0}
-                                      >
-                                        <a
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-eco__l1-nav2"
-                                          data-selected="false"
-                                          href="https://www.ibm.com/industries?lnk=min"
-                                          tabIndex={0}
-                                        >
-                                          <span
-                                            className="bx--text-truncate--end"
-                                          >
-                                            Nulla quis sem at nibh elementum imperdiet
-                                          </span>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  </HeaderMenuItem>
-                                  <ForwardRef
-                                    aria-label="Fusce nec tellus sed augue semper porta"
-                                    autoId="dds--masthead-eco__l1-nav3"
-                                    className=""
-                                    key=".$3"
-                                    menuLinkName="Fusce nec tellus sed augue semper porta"
-                                    selected={false}
-                                  >
-                                    <HeaderMenu
-                                      aria-label="Fusce nec tellus sed augue semper porta"
-                                      autoId="dds--masthead-eco__l1-nav3"
-                                      className=""
-                                      focusRef={[Function]}
-                                      menuLinkName="Fusce nec tellus sed augue semper porta"
-                                      renderMenuContent={[Function]}
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav3"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
-                                      >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Fusce nec tellus sed augue semper porta"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          data-selected="false"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Fusce nec tellus sed augue semper porta
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
-                                                className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Fusce nec tellus sed augue semper porta"
-                                          className="bx--header__menu"
-                                        >
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$IBM Developer"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    IBM Developer
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Blockchain"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Blockchain
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Containers"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Containers
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Analytics"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Analytics
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <HeaderMenuItem
-                                    data-autoid="dds--masthead-eco__l1-nav4"
-                                    data-selected="false"
-                                    href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                    key=".$4"
-                                  >
-                                    <li>
-                                      <Link
-                                        className="bx--header__menu-item"
-                                        data-autoid="dds--masthead-eco__l1-nav4"
-                                        data-selected="false"
-                                        element="a"
-                                        href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                        tabIndex={0}
-                                      >
-                                        <a
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-eco__l1-nav4"
-                                          data-selected="false"
-                                          href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                          tabIndex={0}
-                                        >
-                                          <span
-                                            className="bx--text-truncate--end"
-                                          >
-                                            Sed cursus ante dapibus diam
-                                          </span>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  </HeaderMenuItem>
-                                </ul>
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
-                            <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
-                          </div>
-                        </div>
-                      </HeaderNavContainer>
-                    </div>
-                  </div>
-                </MastheadL1>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={true}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="96"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "96px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-157"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-162"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-163"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-163"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-164"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-164"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-165"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-165"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-166"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-166"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-167"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-167"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-168"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-168"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        footerProps={null}
-        mastheadProps={null}
-      >
-        <footer
-          className="bx--footer"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LocaleButton
-                    aria=""
-                    displayLang=""
-                  >
-                    <div
-                      className="bx--locale-btn__container"
-                    >
-                      <Button
-                        aria-label=""
-                        className="bx--locale-btn"
-                        data-autoid="dds--locale-btn"
-                        iconDescription="Earth Filled Icon"
-                        kind="tertiary"
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label=""
-                          aria-pressed={null}
-                          className="bx--locale-btn bx--btn bx--btn--tertiary"
-                          data-autoid="dds--locale-btn"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <ForwardRef(EarthFilled20)
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(EarthFilled20)>
-                        </button>
-                      </Button>
-                      <LocaleModal
-                        closeFunc={[Function]}
-                        isOpen={false}
-                        localeData={null}
-                        localeDisplay={null}
-                        setIsOpen={[Function]}
-                      >
-                        <ComposedModal
-                          className="bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          selectorPrimaryFocus=".bx--modal-close"
-                        >
-                          <div
-                            aria-hidden={true}
-                            className="bx--modal bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            role="presentation"
-                          >
-                            <div
-                              aria-label={
-                                Array [
-                                  undefined,
-                                  <ForwardRef(EarthFilled16)
-                                    className="bx--locale-modal__label-globe"
-                                  />,
-                                ]
-                              }
-                              aria-modal="true"
-                              className="bx--modal-container"
-                              role="dialog"
-                            >
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                              <div
-                                className="bx--modal-container-body"
-                              >
-                                <ModalHeader
-                                  buttonOnClick={[Function]}
-                                  closeModal={[Function]}
-                                  iconDescription="Close"
-                                  key=".0"
-                                  label={
-                                    Array [
-                                      undefined,
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                      />,
-                                    ]
-                                  }
-                                >
-                                  <div
-                                    className="bx--modal-header"
-                                  >
-                                    <h2
-                                      className="bx--modal-header__label bx--type-delta"
-                                    >
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                        key="earthfilled"
-                                      >
-                                        <Icon
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(EarthFilled16)>
-                                    </h2>
-                                    <button
-                                      aria-label="Close"
-                                      className="bx--modal-close"
-                                      onClick={[Function]}
-                                      title="Close"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close20)
-                                        className="bx--modal-close__icon"
-                                      >
-                                        <Icon
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close20)>
-                                    </button>
-                                  </div>
-                                </ModalHeader>
-                                <ForwardRef(ModalBody)
-                                  className="bx--locale-modal "
-                                  key=".1"
-                                >
-                                  <div
-                                    className="bx--modal-content bx--locale-modal "
-                                  >
-                                    <LocaleModalRegions
-                                      regionList={Array []}
-                                      setClearResults={[Function]}
-                                      setCurrentRegion={[Function]}
-                                      setIsFiltering={[Function]}
-                                    >
-                                      <div
-                                        className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                      >
-                                        <div
-                                          className="bx--row"
-                                        />
-                                      </div>
-                                    </LocaleModalRegions>
-                                    <LocaleModalCountries
-                                      regionList={Array []}
-                                      searchLabel="Search by location or language"
-                                      setClearResults={[Function]}
-                                    >
-                                      <div
-                                        className="bx--locale-modal__filter"
-                                      >
-                                        <div
-                                          className="bx--locale-modal__search"
-                                        >
-                                          <Search
-                                            closeButtonLabelText="Clear search input"
-                                            data-autoid="dds--locale-modal__filter"
-                                            id="bx--locale-modal__filter"
-                                            labelText="Search by location or language"
-                                            onChange={[Function]}
-                                            onClear={[Function]}
-                                            placeholder=""
-                                            tabIndex="0"
-                                            type="text"
-                                          >
-                                            <div
-                                              aria-labelledby="bx--locale-modal__filter-search"
-                                              className="bx--search bx--search--xl"
-                                              role="search"
-                                            >
-                                              <div
-                                                className="bx--search-magnifier"
-                                              >
-                                                <ForwardRef(Search16)
-                                                  className="bx--search-magnifier-icon"
-                                                >
-                                                  <Icon
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Search16)>
-                                              </div>
-                                              <label
-                                                className="bx--label"
-                                                htmlFor="bx--locale-modal__filter"
-                                                id="bx--locale-modal__filter-search"
-                                              >
-                                                Search by location or language
-                                              </label>
-                                              <input
-                                                autoComplete="off"
-                                                className="bx--search-input"
-                                                data-autoid="dds--locale-modal__filter"
-                                                id="bx--locale-modal__filter"
-                                                onChange={[Function]}
-                                                onKeyDown={[Function]}
-                                                placeholder=""
-                                                role="searchbox"
-                                                tabIndex="0"
-                                                type="text"
-                                              />
-                                              <button
-                                                aria-label="Clear search input"
-                                                className="bx--search-close bx--search-close--hidden"
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <ForwardRef(Close16)>
-                                                  <Icon
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Close16)>
-                                              </button>
-                                            </div>
-                                          </Search>
-                                          <p
-                                            className="bx--locale-modal__search-text"
-                                          />
-                                        </div>
-                                        <ul
-                                          className="bx--locale-modal__list"
-                                        >
-                                          <p
-                                            aria-live="assertive"
-                                            className="bx--assistive-text"
-                                            role="status"
-                                          />
-                                        </ul>
-                                      </div>
-                                    </LocaleModalCountries>
-                                  </div>
-                                </ForwardRef(ModalBody)>
-                              </div>
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                            </div>
-                          </div>
-                        </ComposedModal>
-                      </LocaleModal>
-                    </div>
-                  </LocaleButton>
-                </div>
-              </div>
-              <FooterNav
-                disableLocaleButton={false}
-                groups={Array []}
-              />
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell With micro footer (language only) 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--micro-footer-language-only",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: With micro footer (language only)",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "footerProps": Object {
-            "disableLocaleButton": false,
-          },
-          "languageInitialItem": Object {
-            "id": "en",
-            "text": "English",
-          },
-          "languageItems": Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ],
-          "languageOnly": true,
-          "type": "micro",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-93"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-98"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-99"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-99"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-100"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-100"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-101"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-101"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-102"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-102"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-103"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-103"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-104"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-104"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        footerProps={
-          Object {
-            "disableLocaleButton": false,
-          }
-        }
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        languageItems={
-          Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ]
-        }
-        languageOnly={true}
-        mastheadProps={null}
-        type="micro"
-      >
-        <footer
-          className="bx--footer bx--footer--micro"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                />
-              </div>
-            </div>
-          </section>
-          <LegalNav
-            button={
-              <LanguageSelector
-                callback={[Function]}
-                initialSelectedItem={
-                  Object {
-                    "id": "en",
-                    "text": "English",
-                  }
-                }
-                items={
-                  Array [
-                    Object {
-                      "id": "ar",
-                      "text": "Arabic / عربية",
-                    },
-                    Object {
-                      "id": "bs",
-                      "text": "Bosnian / Bosanski",
-                    },
-                    Object {
-                      "id": "bg",
-                      "text": "Bulgarian / Български",
-                    },
-                    Object {
-                      "id": "ca",
-                      "text": "Catalan / Català",
-                    },
-                    Object {
-                      "id": "zh",
-                      "text": "Chinese Simplified / 简体中文",
-                    },
-                    Object {
-                      "id": "zh-tw",
-                      "text": "Chinese Traditional / 繁體中文",
-                    },
-                    Object {
-                      "id": "hr",
-                      "text": "Croatian / Hrvatski",
-                    },
-                    Object {
-                      "id": "cs",
-                      "text": "Czech / Čeština",
-                    },
-                    Object {
-                      "id": "da",
-                      "text": "Danish / Dansk",
-                    },
-                    Object {
-                      "id": "nl",
-                      "text": "Dutch / Nederlands",
-                    },
-                    Object {
-                      "id": "en",
-                      "text": "English",
-                    },
-                    Object {
-                      "id": "fi",
-                      "text": "Finnish / Suomi",
-                    },
-                    Object {
-                      "id": "fr",
-                      "text": "French / Français",
-                    },
-                    Object {
-                      "id": "de",
-                      "text": "German / Deutsch",
-                    },
-                    Object {
-                      "id": "el",
-                      "text": "Greek / Ελληνικά",
-                    },
-                    Object {
-                      "id": "he",
-                      "text": "Hebrew / עברית",
-                    },
-                    Object {
-                      "id": "hu",
-                      "text": "Hungarian / Magyar",
-                    },
-                    Object {
-                      "id": "it",
-                      "text": "Italian / Italiano",
-                    },
-                    Object {
-                      "id": "ja",
-                      "text": "Japanese / 日本語",
-                    },
-                    Object {
-                      "id": "kk",
-                      "text": "Kazakh / Қазақша",
-                    },
-                    Object {
-                      "id": "ko",
-                      "text": "Korean / 한국어",
-                    },
-                    Object {
-                      "id": "mk",
-                      "text": "Macedonian / македонски",
-                    },
-                    Object {
-                      "id": "no",
-                      "text": "Norwegian / Norsk",
-                    },
-                    Object {
-                      "id": "pl",
-                      "text": "Polish / polski",
-                    },
-                    Object {
-                      "id": "pt-br",
-                      "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                    },
-                    Object {
-                      "id": "pt",
-                      "text": "Portuguese/Portugal / Português/Portugal",
-                    },
-                    Object {
-                      "id": "ro",
-                      "text": "Romanian / Română",
-                    },
-                    Object {
-                      "id": "ru",
-                      "text": "Russian / Русский",
-                    },
-                    Object {
-                      "id": "sr",
-                      "text": "Serbian / srpski",
-                    },
-                    Object {
-                      "id": "sk",
-                      "text": "Slovak / Slovenčina",
-                    },
-                    Object {
-                      "id": "sl",
-                      "text": "Slovenian / Slovenščina",
-                    },
-                    Object {
-                      "id": "es",
-                      "text": "Spanish / Español",
-                    },
-                    Object {
-                      "id": "sv",
-                      "text": "Swedish / Svenska",
-                    },
-                    Object {
-                      "id": "th",
-                      "text": "Thai / ภาษาไทย",
-                    },
-                    Object {
-                      "id": "tr",
-                      "text": "Turkish / Türkçe",
-                    },
-                    Object {
-                      "id": "vi",
-                      "text": "Vietnamese / Tiếng Việt",
-                    },
-                  ]
-                }
-                labelText="Choose a language"
-              />
-            }
-            links={Array []}
-            type="micro"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell With micro footer 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--micro-footer",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: With micro footer",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-          "type": "micro",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-77"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-82"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-83"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-83"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-84"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-84"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-85"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-85"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-86"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-86"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-87"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-87"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-88"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-88"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        mastheadProps={null}
-        type="micro"
-      >
-        <footer
-          className="bx--footer bx--footer--micro"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                />
-              </div>
-            </div>
-          </section>
-          <LegalNav
-            button={
-              <LocaleButton
-                aria=""
-                displayLang=""
-              />
-            }
-            links={Array []}
-            type="micro"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell With platform 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--with-platform",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: With platform",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "platform": Object {
-            "name": "IBM Cloud",
-            "url": "https://www.ibm.com/cloud",
-          },
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={
-          Object {
-            "name": "IBM Cloud",
-            "url": "https://www.ibm.com/cloud",
-          }
-        }
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className="bx--masthead__platform"
-                      data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="eco"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={
-                        Object {
-                          "name": "IBM Cloud",
-                          "url": "https://www.ibm.com/cloud",
-                        }
-                      }
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-eco-sidenav__l0"
-                          >
-                            <a
-                              className="bx--side-nav__submenu bx--side-nav__submenu-platform"
-                              data-autoid="dds--masthead-eco-sidenav__l0-productname"
-                              href="https://www.ibm.com/cloud"
-                            >
-                              IBM Cloud
-                            </a>
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-eco__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-eco__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search bx--masthead__platform"
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="eco"
-                        navigation={Array []}
-                        platform={
-                          Object {
-                            "name": "IBM Cloud",
-                            "url": "https://www.ibm.com/cloud",
-                          }
-                        }
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <div
-                          className="bx--masthead__platform-name"
-                        >
-                          <HeaderName
-                            data-autoid="dds--masthead-eco__l0-ecosystemname"
-                            href="https://www.ibm.com/cloud"
-                            prefix=""
-                          >
-                            <Link
-                              className="bx--header__name"
-                              data-autoid="dds--masthead-eco__l0-ecosystemname"
-                              element="a"
-                              href="https://www.ibm.com/cloud"
-                            >
-                              <a
-                                className="bx--header__name"
-                                data-autoid="dds--masthead-eco__l0-ecosystemname"
-                                href="https://www.ibm.com/cloud"
-                              >
-                                IBM Cloud
-                              </a>
-                            </Link>
-                          </HeaderName>
-                        </div>
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="eco"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-eco__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-eco__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="eco"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-eco__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-eco__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-eco__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-eco__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-173"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-178"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-179"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-179"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-180"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-180"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-181"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-181"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-182"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-182"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-183"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-183"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-184"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-184"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        mastheadProps={null}
-      >
-        <footer
-          className="bx--footer"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LocaleButton
-                    aria=""
-                    displayLang=""
-                  >
-                    <div
-                      className="bx--locale-btn__container"
-                    >
-                      <Button
-                        aria-label=""
-                        className="bx--locale-btn"
-                        data-autoid="dds--locale-btn"
-                        iconDescription="Earth Filled Icon"
-                        kind="tertiary"
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label=""
-                          aria-pressed={null}
-                          className="bx--locale-btn bx--btn bx--btn--tertiary"
-                          data-autoid="dds--locale-btn"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <ForwardRef(EarthFilled20)
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(EarthFilled20)>
-                        </button>
-                      </Button>
-                      <LocaleModal
-                        closeFunc={[Function]}
-                        isOpen={false}
-                        localeData={null}
-                        localeDisplay={null}
-                        setIsOpen={[Function]}
-                      >
-                        <ComposedModal
-                          className="bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          selectorPrimaryFocus=".bx--modal-close"
-                        >
-                          <div
-                            aria-hidden={true}
-                            className="bx--modal bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            role="presentation"
-                          >
-                            <div
-                              aria-label={
-                                Array [
-                                  undefined,
-                                  <ForwardRef(EarthFilled16)
-                                    className="bx--locale-modal__label-globe"
-                                  />,
-                                ]
-                              }
-                              aria-modal="true"
-                              className="bx--modal-container"
-                              role="dialog"
-                            >
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                              <div
-                                className="bx--modal-container-body"
-                              >
-                                <ModalHeader
-                                  buttonOnClick={[Function]}
-                                  closeModal={[Function]}
-                                  iconDescription="Close"
-                                  key=".0"
-                                  label={
-                                    Array [
-                                      undefined,
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                      />,
-                                    ]
-                                  }
-                                >
-                                  <div
-                                    className="bx--modal-header"
-                                  >
-                                    <h2
-                                      className="bx--modal-header__label bx--type-delta"
-                                    >
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                        key="earthfilled"
-                                      >
-                                        <Icon
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(EarthFilled16)>
-                                    </h2>
-                                    <button
-                                      aria-label="Close"
-                                      className="bx--modal-close"
-                                      onClick={[Function]}
-                                      title="Close"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close20)
-                                        className="bx--modal-close__icon"
-                                      >
-                                        <Icon
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close20)>
-                                    </button>
-                                  </div>
-                                </ModalHeader>
-                                <ForwardRef(ModalBody)
-                                  className="bx--locale-modal "
-                                  key=".1"
-                                >
-                                  <div
-                                    className="bx--modal-content bx--locale-modal "
-                                  >
-                                    <LocaleModalRegions
-                                      regionList={Array []}
-                                      setClearResults={[Function]}
-                                      setCurrentRegion={[Function]}
-                                      setIsFiltering={[Function]}
-                                    >
-                                      <div
-                                        className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                      >
-                                        <div
-                                          className="bx--row"
-                                        />
-                                      </div>
-                                    </LocaleModalRegions>
-                                    <LocaleModalCountries
-                                      regionList={Array []}
-                                      searchLabel="Search by location or language"
-                                      setClearResults={[Function]}
-                                    >
-                                      <div
-                                        className="bx--locale-modal__filter"
-                                      >
-                                        <div
-                                          className="bx--locale-modal__search"
-                                        >
-                                          <Search
-                                            closeButtonLabelText="Clear search input"
-                                            data-autoid="dds--locale-modal__filter"
-                                            id="bx--locale-modal__filter"
-                                            labelText="Search by location or language"
-                                            onChange={[Function]}
-                                            onClear={[Function]}
-                                            placeholder=""
-                                            tabIndex="0"
-                                            type="text"
-                                          >
-                                            <div
-                                              aria-labelledby="bx--locale-modal__filter-search"
-                                              className="bx--search bx--search--xl"
-                                              role="search"
-                                            >
-                                              <div
-                                                className="bx--search-magnifier"
-                                              >
-                                                <ForwardRef(Search16)
-                                                  className="bx--search-magnifier-icon"
-                                                >
-                                                  <Icon
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Search16)>
-                                              </div>
-                                              <label
-                                                className="bx--label"
-                                                htmlFor="bx--locale-modal__filter"
-                                                id="bx--locale-modal__filter-search"
-                                              >
-                                                Search by location or language
-                                              </label>
-                                              <input
-                                                autoComplete="off"
-                                                className="bx--search-input"
-                                                data-autoid="dds--locale-modal__filter"
-                                                id="bx--locale-modal__filter"
-                                                onChange={[Function]}
-                                                onKeyDown={[Function]}
-                                                placeholder=""
-                                                role="searchbox"
-                                                tabIndex="0"
-                                                type="text"
-                                              />
-                                              <button
-                                                aria-label="Clear search input"
-                                                className="bx--search-close bx--search-close--hidden"
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <ForwardRef(Close16)>
-                                                  <Icon
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Close16)>
-                                              </button>
-                                            </div>
-                                          </Search>
-                                          <p
-                                            className="bx--locale-modal__search-text"
-                                          />
-                                        </div>
-                                        <ul
-                                          className="bx--locale-modal__list"
-                                        >
-                                          <p
-                                            aria-live="assertive"
-                                            className="bx--assistive-text"
-                                            role="status"
-                                          />
-                                        </ul>
-                                      </div>
-                                    </LocaleModalCountries>
-                                  </div>
-                                </ForwardRef(ModalBody)>
-                              </div>
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                            </div>
-                          </div>
-                        </ComposedModal>
-                      </LocaleModal>
-                    </div>
-                  </LocaleButton>
-                </div>
-              </div>
-              <FooterNav
-                disableLocaleButton={false}
-                groups={Array []}
-              />
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell With short footer (language only) 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--short-footer-language-only",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: With short footer (language only)",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-          "languageInitialItem": Object {
-            "id": "en",
-            "text": "English",
-          },
-          "languageItems": Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ],
-          "languageOnly": true,
-          "type": "short",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-141"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-146"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-147"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-147"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-148"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-148"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-149"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-149"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-150"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-150"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-151"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-151"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-152"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-152"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        languageItems={
-          Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ]
-        }
-        languageOnly={true}
-        mastheadProps={null}
-        type="short"
-      >
-        <footer
-          className="bx--footer bx--footer--short"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LanguageSelector
-                    callback={[Function]}
-                    initialSelectedItem={
-                      Object {
-                        "id": "en",
-                        "text": "English",
-                      }
-                    }
-                    items={
-                      Array [
-                        Object {
-                          "id": "ar",
-                          "text": "Arabic / عربية",
-                        },
-                        Object {
-                          "id": "bs",
-                          "text": "Bosnian / Bosanski",
-                        },
-                        Object {
-                          "id": "bg",
-                          "text": "Bulgarian / Български",
-                        },
-                        Object {
-                          "id": "ca",
-                          "text": "Catalan / Català",
-                        },
-                        Object {
-                          "id": "zh",
-                          "text": "Chinese Simplified / 简体中文",
-                        },
-                        Object {
-                          "id": "zh-tw",
-                          "text": "Chinese Traditional / 繁體中文",
-                        },
-                        Object {
-                          "id": "hr",
-                          "text": "Croatian / Hrvatski",
-                        },
-                        Object {
-                          "id": "cs",
-                          "text": "Czech / Čeština",
-                        },
-                        Object {
-                          "id": "da",
-                          "text": "Danish / Dansk",
-                        },
-                        Object {
-                          "id": "nl",
-                          "text": "Dutch / Nederlands",
-                        },
-                        Object {
-                          "id": "en",
-                          "text": "English",
-                        },
-                        Object {
-                          "id": "fi",
-                          "text": "Finnish / Suomi",
-                        },
-                        Object {
-                          "id": "fr",
-                          "text": "French / Français",
-                        },
-                        Object {
-                          "id": "de",
-                          "text": "German / Deutsch",
-                        },
-                        Object {
-                          "id": "el",
-                          "text": "Greek / Ελληνικά",
-                        },
-                        Object {
-                          "id": "he",
-                          "text": "Hebrew / עברית",
-                        },
-                        Object {
-                          "id": "hu",
-                          "text": "Hungarian / Magyar",
-                        },
-                        Object {
-                          "id": "it",
-                          "text": "Italian / Italiano",
-                        },
-                        Object {
-                          "id": "ja",
-                          "text": "Japanese / 日本語",
-                        },
-                        Object {
-                          "id": "kk",
-                          "text": "Kazakh / Қазақша",
-                        },
-                        Object {
-                          "id": "ko",
-                          "text": "Korean / 한국어",
-                        },
-                        Object {
-                          "id": "mk",
-                          "text": "Macedonian / македонски",
-                        },
-                        Object {
-                          "id": "no",
-                          "text": "Norwegian / Norsk",
-                        },
-                        Object {
-                          "id": "pl",
-                          "text": "Polish / polski",
-                        },
-                        Object {
-                          "id": "pt-br",
-                          "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                        },
-                        Object {
-                          "id": "pt",
-                          "text": "Portuguese/Portugal / Português/Portugal",
-                        },
-                        Object {
-                          "id": "ro",
-                          "text": "Romanian / Română",
-                        },
-                        Object {
-                          "id": "ru",
-                          "text": "Russian / Русский",
-                        },
-                        Object {
-                          "id": "sr",
-                          "text": "Serbian / srpski",
-                        },
-                        Object {
-                          "id": "sk",
-                          "text": "Slovak / Slovenčina",
-                        },
-                        Object {
-                          "id": "sl",
-                          "text": "Slovenian / Slovenščina",
-                        },
-                        Object {
-                          "id": "es",
-                          "text": "Spanish / Español",
-                        },
-                        Object {
-                          "id": "sv",
-                          "text": "Swedish / Svenska",
-                        },
-                        Object {
-                          "id": "th",
-                          "text": "Thai / ภาษาไทย",
-                        },
-                        Object {
-                          "id": "tr",
-                          "text": "Turkish / Türkçe",
-                        },
-                        Object {
-                          "id": "vi",
-                          "text": "Vietnamese / Tiếng Việt",
-                        },
-                      ]
-                    }
-                    labelText="Choose a language"
-                  >
-                    <div
-                      className="bx--language-selector__container"
-                    >
-                      <ComboBox
-                        ariaLabel="Choose an item"
-                        className="bx--language-selector"
-                        data-autoid="dds--language-selector"
-                        direction="top"
-                        disabled={false}
-                        id="dds-language-selector"
-                        initialSelectedItem={
-                          Object {
-                            "id": "en",
-                            "text": "English",
-                          }
-                        }
-                        itemToElement={null}
-                        itemToString={[Function]}
-                        items={
-                          Array [
-                            Object {
-                              "id": "ar",
-                              "text": "Arabic / عربية",
-                            },
-                            Object {
-                              "id": "bs",
-                              "text": "Bosnian / Bosanski",
-                            },
-                            Object {
-                              "id": "bg",
-                              "text": "Bulgarian / Български",
-                            },
-                            Object {
-                              "id": "ca",
-                              "text": "Catalan / Català",
-                            },
-                            Object {
-                              "id": "zh",
-                              "text": "Chinese Simplified / 简体中文",
-                            },
-                            Object {
-                              "id": "zh-tw",
-                              "text": "Chinese Traditional / 繁體中文",
-                            },
-                            Object {
-                              "id": "hr",
-                              "text": "Croatian / Hrvatski",
-                            },
-                            Object {
-                              "id": "cs",
-                              "text": "Czech / Čeština",
-                            },
-                            Object {
-                              "id": "da",
-                              "text": "Danish / Dansk",
-                            },
-                            Object {
-                              "id": "nl",
-                              "text": "Dutch / Nederlands",
-                            },
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            },
-                            Object {
-                              "id": "fi",
-                              "text": "Finnish / Suomi",
-                            },
-                            Object {
-                              "id": "fr",
-                              "text": "French / Français",
-                            },
-                            Object {
-                              "id": "de",
-                              "text": "German / Deutsch",
-                            },
-                            Object {
-                              "id": "el",
-                              "text": "Greek / Ελληνικά",
-                            },
-                            Object {
-                              "id": "he",
-                              "text": "Hebrew / עברית",
-                            },
-                            Object {
-                              "id": "hu",
-                              "text": "Hungarian / Magyar",
-                            },
-                            Object {
-                              "id": "it",
-                              "text": "Italian / Italiano",
-                            },
-                            Object {
-                              "id": "ja",
-                              "text": "Japanese / 日本語",
-                            },
-                            Object {
-                              "id": "kk",
-                              "text": "Kazakh / Қазақша",
-                            },
-                            Object {
-                              "id": "ko",
-                              "text": "Korean / 한국어",
-                            },
-                            Object {
-                              "id": "mk",
-                              "text": "Macedonian / македонски",
-                            },
-                            Object {
-                              "id": "no",
-                              "text": "Norwegian / Norsk",
-                            },
-                            Object {
-                              "id": "pl",
-                              "text": "Polish / polski",
-                            },
-                            Object {
-                              "id": "pt-br",
-                              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                            },
-                            Object {
-                              "id": "pt",
-                              "text": "Portuguese/Portugal / Português/Portugal",
-                            },
-                            Object {
-                              "id": "ro",
-                              "text": "Romanian / Română",
-                            },
-                            Object {
-                              "id": "ru",
-                              "text": "Russian / Русский",
-                            },
-                            Object {
-                              "id": "sr",
-                              "text": "Serbian / srpski",
-                            },
-                            Object {
-                              "id": "sk",
-                              "text": "Slovak / Slovenčina",
-                            },
-                            Object {
-                              "id": "sl",
-                              "text": "Slovenian / Slovenščina",
-                            },
-                            Object {
-                              "id": "es",
-                              "text": "Spanish / Español",
-                            },
-                            Object {
-                              "id": "sv",
-                              "text": "Swedish / Svenska",
-                            },
-                            Object {
-                              "id": "th",
-                              "text": "Thai / ภาษาไทย",
-                            },
-                            Object {
-                              "id": "tr",
-                              "text": "Turkish / Türkçe",
-                            },
-                            Object {
-                              "id": "vi",
-                              "text": "Vietnamese / Tiếng Việt",
-                            },
-                          ]
-                        }
-                        light={false}
-                        onChange={[Function]}
-                        placeholder="Choose a language"
-                        selectedItem={
-                          Object {
-                            "id": "en",
-                            "text": "English",
-                          }
-                        }
-                        shouldFilterItem={[Function]}
-                        size="xl"
-                        titleText="Choose a language"
-                        type="default"
-                      >
-                        <Downshift
-                          defaultHighlightedIndex={null}
-                          defaultIsOpen={false}
-                          environment={[Window]}
-                          getA11yStatusMessage={[Function]}
-                          initialSelectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          inputId="dds-language-selector"
-                          inputValue="English"
-                          itemToString={[Function]}
-                          onChange={[Function]}
-                          onInputValueChange={[Function]}
-                          onOuterClick={[Function]}
-                          onSelect={[Function]}
-                          onStateChange={[Function]}
-                          onUserAction={[Function]}
-                          scrollIntoView={[Function]}
-                          selectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          selectedItemChanged={[Function]}
-                          stateReducer={[Function]}
-                          suppressRefError={false}
-                        >
-                          <div
-                            className="bx--list-box__wrapper"
-                          >
-                            <Text
-                              as="label"
-                              className="bx--label"
-                              htmlFor="dds-language-selector"
-                              id="downshift-3-label"
-                            >
-                              <label
-                                className="bx--label"
-                                dir="auto"
-                                htmlFor="dds-language-selector"
-                                id="downshift-3-label"
-                              >
-                                Choose a language
-                              </label>
-                            </Text>
-                            <ListBox
-                              className="bx--combo-box bx--language-selector bx--list-box--up"
-                              disabled={false}
-                              isOpen={false}
-                              light={false}
-                              size="xl"
-                              type="default"
-                            >
-                              <div
-                                className="bx--combo-box bx--language-selector bx--list-box--up bx--list-box bx--list-box--xl"
-                                onClick={[Function]}
-                                onKeyDown={[Function]}
-                              >
-                                <div
-                                  className="bx--list-box__field"
-                                >
-                                  <input
-                                    aria-activedescendant={null}
-                                    aria-autocomplete="list"
-                                    aria-controls={null}
-                                    aria-expanded={false}
-                                    aria-haspopup="listbox"
-                                    aria-labelledby={null}
-                                    autoComplete="off"
-                                    className="bx--text-input"
-                                    data-autoid="dds--language-selector"
-                                    disabled={false}
-                                    id="dds-language-selector"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                    placeholder="Choose a language"
-                                    role="combobox"
-                                    tabIndex="0"
-                                    type="text"
-                                    value="English"
-                                  />
-                                  <ListBoxSelection
-                                    clearSelection={[Function]}
-                                    disabled={false}
-                                    onClearSelection={[Function]}
-                                    translateWithId={[Function]}
-                                  >
-                                    <button
-                                      aria-label="Clear selected item"
-                                      className="bx--list-box__selection"
-                                      onClick={[Function]}
-                                      tabIndex={-1}
-                                      title="Clear selected item"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close16)>
-                                        <Icon
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close16)>
-                                    </button>
-                                  </ListBoxSelection>
-                                  <ListBoxTrigger
-                                    aria-haspopup={true}
-                                    aria-label="open menu"
-                                    data-toggle={true}
-                                    disabled={false}
-                                    isOpen={false}
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onKeyDown={[Function]}
-                                    onKeyUp={[Function]}
-                                    onMouseUp={[Function]}
-                                    role="button"
-                                    translateWithId={[Function]}
-                                    type="button"
-                                  >
-                                    <button
-                                      aria-haspopup={true}
-                                      aria-label="Open"
-                                      className="bx--list-box__menu-icon"
-                                      data-toggle={true}
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseUp={[Function]}
-                                      role="button"
-                                      tabIndex="-1"
-                                      title="Open"
-                                      type="button"
-                                    >
-                                      <ForwardRef(ChevronDown16)>
-                                        <Icon
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 16 16"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(ChevronDown16)>
-                                    </button>
-                                  </ListBoxTrigger>
-                                </div>
-                                <ListBoxMenu
-                                  aria-label="Choose an item"
-                                  aria-labelledby={null}
-                                  id="downshift-3-menu"
-                                  role="listbox"
-                                >
-                                  <div
-                                    aria-label="Choose an item"
-                                    aria-labelledby={null}
-                                    className="bx--list-box__menu"
-                                    id="downshift-3-menu"
-                                    role="listbox"
-                                  />
-                                </ListBoxMenu>
-                              </div>
-                            </ListBox>
-                          </div>
-                        </Downshift>
-                      </ComboBox>
-                      <Select
-                        aria-label="Choose a language"
-                        className="bx--language-selector"
-                        data-autoid="dds--language-selector__select"
-                        defaultValue="en"
-                        disabled={false}
-                        helperText=""
-                        id="bx--language-selector"
-                        inline={false}
-                        invalid={false}
-                        invalidText=""
-                        labelText="Choose a language"
-                        light={false}
-                        onChange={[Function]}
-                        text="English"
-                      >
-                        <div
-                          className="bx--form-item"
-                        >
-                          <div
-                            className="bx--select bx--language-selector"
-                          >
-                            <label
-                              className="bx--label"
-                              htmlFor="bx--language-selector"
-                            >
-                              Choose a language
-                            </label>
-                            <div
-                              className="bx--select-input__wrapper"
-                              data-invalid={null}
-                            >
-                              <select
-                                aria-label="Choose a language"
-                                className="bx--select-input"
-                                data-autoid="dds--language-selector__select"
-                                defaultValue="en"
-                                id="bx--language-selector"
-                                onChange={[Function]}
-                                text="English"
-                              >
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="0"
-                                  text="Arabic / عربية"
-                                  value="ar"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ar"
-                                  >
-                                    Arabic / عربية
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="1"
-                                  text="Bosnian / Bosanski"
-                                  value="bs"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="bs"
-                                  >
-                                    Bosnian / Bosanski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="2"
-                                  text="Bulgarian / Български"
-                                  value="bg"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="bg"
-                                  >
-                                    Bulgarian / Български
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="3"
-                                  text="Catalan / Català"
-                                  value="ca"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ca"
-                                  >
-                                    Catalan / Català
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="4"
-                                  text="Chinese Simplified / 简体中文"
-                                  value="zh"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="zh"
-                                  >
-                                    Chinese Simplified / 简体中文
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="5"
-                                  text="Chinese Traditional / 繁體中文"
-                                  value="zh-tw"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="zh-tw"
-                                  >
-                                    Chinese Traditional / 繁體中文
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="6"
-                                  text="Croatian / Hrvatski"
-                                  value="hr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="hr"
-                                  >
-                                    Croatian / Hrvatski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="7"
-                                  text="Czech / Čeština"
-                                  value="cs"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="cs"
-                                  >
-                                    Czech / Čeština
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="8"
-                                  text="Danish / Dansk"
-                                  value="da"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="da"
-                                  >
-                                    Danish / Dansk
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="9"
-                                  text="Dutch / Nederlands"
-                                  value="nl"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="nl"
-                                  >
-                                    Dutch / Nederlands
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="10"
-                                  text="English"
-                                  value="en"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="en"
-                                  >
-                                    English
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="11"
-                                  text="Finnish / Suomi"
-                                  value="fi"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="fi"
-                                  >
-                                    Finnish / Suomi
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="12"
-                                  text="French / Français"
-                                  value="fr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="fr"
-                                  >
-                                    French / Français
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="13"
-                                  text="German / Deutsch"
-                                  value="de"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="de"
-                                  >
-                                    German / Deutsch
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="14"
-                                  text="Greek / Ελληνικά"
-                                  value="el"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="el"
-                                  >
-                                    Greek / Ελληνικά
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="15"
-                                  text="Hebrew / עברית"
-                                  value="he"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="he"
-                                  >
-                                    Hebrew / עברית
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="16"
-                                  text="Hungarian / Magyar"
-                                  value="hu"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="hu"
-                                  >
-                                    Hungarian / Magyar
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="17"
-                                  text="Italian / Italiano"
-                                  value="it"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="it"
-                                  >
-                                    Italian / Italiano
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="18"
-                                  text="Japanese / 日本語"
-                                  value="ja"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ja"
-                                  >
-                                    Japanese / 日本語
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="19"
-                                  text="Kazakh / Қазақша"
-                                  value="kk"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="kk"
-                                  >
-                                    Kazakh / Қазақша
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="20"
-                                  text="Korean / 한국어"
-                                  value="ko"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ko"
-                                  >
-                                    Korean / 한국어
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="21"
-                                  text="Macedonian / македонски"
-                                  value="mk"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="mk"
-                                  >
-                                    Macedonian / македонски
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="22"
-                                  text="Norwegian / Norsk"
-                                  value="no"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="no"
-                                  >
-                                    Norwegian / Norsk
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="23"
-                                  text="Polish / polski"
-                                  value="pl"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="pl"
-                                  >
-                                    Polish / polski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="24"
-                                  text="Portuguese/Brazil/Brazil / Português/Brasil"
-                                  value="pt-br"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="pt-br"
-                                  >
-                                    Portuguese/Brazil/Brazil / Português/Brasil
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="25"
-                                  text="Portuguese/Portugal / Português/Portugal"
-                                  value="pt"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="pt"
-                                  >
-                                    Portuguese/Portugal / Português/Portugal
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="26"
-                                  text="Romanian / Română"
-                                  value="ro"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ro"
-                                  >
-                                    Romanian / Română
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="27"
-                                  text="Russian / Русский"
-                                  value="ru"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="ru"
-                                  >
-                                    Russian / Русский
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="28"
-                                  text="Serbian / srpski"
-                                  value="sr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sr"
-                                  >
-                                    Serbian / srpski
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="29"
-                                  text="Slovak / Slovenčina"
-                                  value="sk"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sk"
-                                  >
-                                    Slovak / Slovenčina
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="30"
-                                  text="Slovenian / Slovenščina"
-                                  value="sl"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sl"
-                                  >
-                                    Slovenian / Slovenščina
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="31"
-                                  text="Spanish / Español"
-                                  value="es"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="es"
-                                  >
-                                    Spanish / Español
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="32"
-                                  text="Swedish / Svenska"
-                                  value="sv"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="sv"
-                                  >
-                                    Swedish / Svenska
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="33"
-                                  text="Thai / ภาษาไทย"
-                                  value="th"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="th"
-                                  >
-                                    Thai / ภาษาไทย
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="34"
-                                  text="Turkish / Türkçe"
-                                  value="tr"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="tr"
-                                  >
-                                    Turkish / Türkçe
-                                  </option>
-                                </SelectItem>
-                                <SelectItem
-                                  disabled={false}
-                                  hidden={false}
-                                  key="35"
-                                  text="Vietnamese / Tiếng Việt"
-                                  value="vi"
-                                >
-                                  <option
-                                    className="bx--select-option"
-                                    disabled={false}
-                                    hidden={false}
-                                    value="vi"
-                                  >
-                                    Vietnamese / Tiếng Việt
-                                  </option>
-                                </SelectItem>
-                              </select>
-                              <ForwardRef(ChevronDown16)
-                                className="bx--select__arrow"
-                              >
-                                <Icon
-                                  className="bx--select__arrow"
-                                  fill="currentColor"
-                                  height={16}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--select__arrow"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={16}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ChevronDown16)>
-                            </div>
-                          </div>
-                        </div>
-                      </Select>
-                    </div>
-                  </LanguageSelector>
-                </div>
-              </div>
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-            type="short"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Dotcom shell With short footer 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-dotcom-shell--short-footer",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/DotcomShell/__stories__/DotcomShell.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Dotcom shell: With short footer",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <DotcomShell
-      footerProps={
-        Object {
-          "disableLocaleButton": false,
-          "type": "short",
-        }
-      }
-      mastheadProps={
-        Object {
-          "hasProfile": true,
-          "hasSearch": true,
-          "initialSearchTerm": "",
-          "navigation": "default",
-          "placeHolderText": "Search all of IBM",
-          "selectedMenuItem": "Consulting & Services",
-        }
-      }
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={Array []}
-                        platform={null}
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-      <div
-        className="bx--dotcom-shell"
-        data-autoid="dds--dotcom-shell"
-      >
-        <div
-          className="bx--dotcom-shell__content"
-          data-autoid="dds--dotcom-shell__content"
-        >
-          <main
-            id="main-content"
-          >
-            <Content
-              withL1={false}
-            >
-              <TableOfContents
-                menuItems={null}
-                menuLabel="Jump to"
-                stickyOffset="48"
-                theme="white"
-              >
-                <section
-                  className="bx--tableofcontents bx--tableofcontents--white"
-                  data-autoid="dds--tableofcontents"
-                >
-                  <div
-                    className="dds-ce--table-of-contents__container"
-                  >
-                    <div
-                      className="bx--tableofcontents__sidebar"
-                    >
-                      <div
-                        className="bx--tableofcontents__mobile-top"
-                      />
-                      <div
-                        style={
-                          Object {
-                            "position": "sticky",
-                            "top": "48px",
-                          }
-                        }
-                      >
-                        <TOCDesktop
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__desktop"
-                            data-autoid="dds--tableofcontents__desktop"
-                          >
-                            <ul />
-                          </div>
-                        </TOCDesktop>
-                        <TOCMobile
-                          menuItems={
-                            Array [
-                              Object {
-                                "id": "menuLabel",
-                                "title": "Jump to ...",
-                              },
-                            ]
-                          }
-                          menuLabel="Jump to"
-                          selectedId=""
-                          selectedTitle=""
-                          updateState={[Function]}
-                        >
-                          <div
-                            className="bx--tableofcontents__mobile"
-                            data-autoid="dds--tableofcontents__mobile"
-                          >
-                            <div
-                              className="bx--tableofcontents__mobile__select__wrapper"
-                            >
-                              <select
-                                aria-label="Jump to"
-                                className="bx--tableofcontents__mobile__select"
-                                onBlur={[Function]}
-                                onChange={[Function]}
-                                value=""
-                              >
-                                <option
-                                  className="bx--tableofcontents__mobile__select__option"
-                                  data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                                  defaultValue={true}
-                                  disabled={true}
-                                  hidden={true}
-                                  key="0"
-                                  value="menuLabel"
-                                >
-                                  Jump to ...
-                                </option>
-                              </select>
-                              <ForwardRef(TableOfContents20)
-                                aria-label="menu icon"
-                                className="bx--tableofcontents__mobile__select__icon"
-                              >
-                                <Icon
-                                  aria-label="menu icon"
-                                  className="bx--tableofcontents__mobile__select__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-label="menu icon"
-                                    className="bx--tableofcontents__mobile__select__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    role="img"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                                    />
-                                    <title>
-                                      menu icon
-                                    </title>
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(TableOfContents20)>
-                            </div>
-                          </div>
-                        </TOCMobile>
-                      </div>
-                    </div>
-                    <div
-                      className="bx--tableofcontents__content"
-                    >
-                      <div
-                        className="bx--tableofcontents__content-wrapper"
-                      >
-                        <a
-                          data-title="Lorem ipsum dolor sit amet"
-                          name="section-1"
-                        />
-                        <LeadSpaceBlock
-                          copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                          cta={
-                            Object {
-                              "buttons": Array [
-                                Object {
-                                  "copy": "Excepteur sint occaecat",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ],
-                              "style": "button",
-                              "type": "local",
-                            }
-                          }
-                          heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                          items={
-                            Object {
-                              "heading": "Featured products",
-                              "items": Array [
-                                Object {
-                                  "copy": "IBM Cloud Continuous Delivery",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "UrbanCode",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                                Object {
-                                  "copy": "View all products",
-                                  "cta": Object {
-                                    "href": "https://ibm.com",
-                                  },
-                                  "type": "local",
-                                },
-                              ],
-                            }
-                          }
-                          mediaData={
-                            Object {
-                              "showDescription": true,
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                          title="Lorem ipsum dolor sit amet"
-                        >
-                          <div
-                            className="bx--leadspace-block"
-                            data-autoid="dds--leadspace-block"
-                          >
-                            <div>
-                              <h1
-                                className="bx--leadspace-block__title"
-                                data-autoid="dds--leadspace-block__title"
-                              >
-                                Lorem ipsum dolor sit amet
-                              </h1>
-                            </div>
-                            <ContentBlock
-                              border={false}
-                              copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-                              heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-                                </h2>
-                                <div
-                                  className="bx--content-block__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p> ",
-                                    }
-                                  }
-                                />
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--leadspace-block__media"
-                                    data-autoid="dds--leadspace-block__media"
-                                  >
-                                    <VideoPlayer
-                                      autoPlay={false}
-                                      playingMode="inline"
-                                      showDescription={true}
-                                      videoId="1_9h94wo6b"
-                                    >
-                                      <div
-                                        aria-label=" 0"
-                                        className="bx--video-player"
-                                        role="region"
-                                      >
-                                        <div
-                                          className="bx--video-player__video-container "
-                                          data-autoid="dds--video-player__video-1_9h94wo6b"
-                                        >
-                                          <div
-                                            className="bx--video-player__video"
-                                            id="bx--video-player__video-1_9h94wo6b-125"
-                                          >
-                                            <VideoImageOverlay
-                                              embedVideo={[Function]}
-                                              playingMode="inline"
-                                              videoData={
-                                                Object {
-                                                  "description": "",
-                                                  "name": "",
-                                                }
-                                              }
-                                              videoId="1_9h94wo6b"
-                                            >
-                                              <button
-                                                className="bx--video-player__image-overlay"
-                                                data-autoid="dds--video-player__image-overlay"
-                                                onClick={[Function]}
-                                              >
-                                                <Image
-                                                  alt=""
-                                                  defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                  icon={[Function]}
-                                                  refImage={[Function]}
-                                                />
-                                              </button>
-                                            </VideoImageOverlay>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </VideoPlayer>
-                                  </div>
-                                  <LinkList
-                                    heading="Featured products"
-                                    items={
-                                      Array [
-                                        Object {
-                                          "copy": "IBM Cloud Continuous Delivery",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "UrbanCode",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                        Object {
-                                          "copy": "View all products",
-                                          "cta": Object {
-                                            "href": "https://ibm.com",
-                                          },
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    style="vertical-end"
-                                  >
-                                    <div
-                                      className="bx--link-list"
-                                      data-autoid="dds--link-list"
-                                    >
-                                      <h4
-                                        className="bx--link-list__heading"
-                                      >
-                                        Featured products
-                                      </h4>
-                                      <ul
-                                        className="bx--link-list__list bx--link-list__list--vertical-end"
-                                      >
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="IBM Cloud Continuous Delivery"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="IBM Cloud Continuous Delivery"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          IBM Cloud Continuous Delivery
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="UrbanCode"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="UrbanCode"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          UrbanCode
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                        <li
-                                          className="bx--link-list__list__CTA bx--link-list__list--local"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            ariaRole="listitem"
-                                            copy="View all products"
-                                            cta={
-                                              Object {
-                                                "href": "https://ibm.com",
-                                              }
-                                            }
-                                            customVideoTitle={null}
-                                            disableImage={true}
-                                            href=""
-                                            iconInline={false}
-                                            style="text"
-                                            type="local"
-                                          >
-                                            <div>
-                                              <TextCTA
-                                                ariaRole="listitem"
-                                                copy="View all products"
-                                                cta={
-                                                  Object {
-                                                    "href": "https://ibm.com",
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={true}
-                                                formatCTAcopy={[Function]}
-                                                href=""
-                                                iconInline={false}
-                                                iconPlacement="right"
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="text"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <LinkWithIcon
-                                                  href="https://ibm.com"
-                                                  iconInline={false}
-                                                  iconPlacement="right"
-                                                  onClick={[Function]}
-                                                  target={null}
-                                                >
-                                                  <div
-                                                    className="bx--link-with-icon__container"
-                                                    data-autoid="dds--link-with-icon"
-                                                  >
-                                                    <Link
-                                                      className="bx--link-with-icon"
-                                                      href="https://ibm.com"
-                                                      onClick={[Function]}
-                                                      size="lg"
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        className="bx--link bx--link-with-icon bx--link--lg"
-                                                        href="https://ibm.com"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <span>
-                                                          View all products
-                                                        </span>
-                                                        <span
-                                                          className="bx--visually-hidden"
-                                                        />
-                                                        <ForwardRef(ArrowRight20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ArrowRight20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </LinkWithIcon>
-                                              </TextCTA>
-                                            </div>
-                                          </CTA>
-                                        </li>
-                                      </ul>
-                                    </div>
-                                  </LinkList>
-                                  <CTA
-                                    buttons={
-                                      Array [
-                                        Object {
-                                          "copy": "Excepteur sint occaecat",
-                                          "href": "https://example.com/",
-                                          "iconDescription": "right arrow icon",
-                                          "onClick": [Function],
-                                          "renderIcon": Object {
-                                            "$$typeof": Symbol(react.forward_ref),
-                                            "render": [Function],
-                                          },
-                                          "target": null,
-                                          "type": "local",
-                                        },
-                                      ]
-                                    }
-                                    copy=""
-                                    customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    customVideoTitle={null}
-                                    href=""
-                                    style="button"
-                                    type="local"
-                                  >
-                                    <div
-                                      className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                                    >
-                                      <ButtonCTA
-                                        buttons={
-                                          Array [
-                                            Object {
-                                              "copy": "Excepteur sint occaecat",
-                                              "href": "https://example.com/",
-                                              "iconDescription": "right arrow icon",
-                                              "onClick": [Function],
-                                              "renderIcon": Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              },
-                                              "target": null,
-                                              "type": "local",
-                                            },
-                                          ]
-                                        }
-                                        copy=""
-                                        customVideoTitle={null}
-                                        formatCTAcopy={[Function]}
-                                        href=""
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="button"
-                                        type="local"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <ButtonGroup
-                                          buttons={
-                                            Array [
-                                              Object {
-                                                "copy": "Excepteur sint occaecat",
-                                                "href": "https://example.com/",
-                                                "iconDescription": "right arrow icon",
-                                                "onClick": [Function],
-                                                "renderIcon": Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                },
-                                                "target": null,
-                                                "type": "local",
-                                              },
-                                            ]
-                                          }
-                                        >
-                                          <ol
-                                            className="bx--buttongroup"
-                                            data-autoid="dds--button-group"
-                                          >
-                                            <li
-                                              className="bx--buttongroup-item"
-                                              key="0"
-                                            >
-                                              <Button
-                                                copy="Excepteur sint occaecat"
-                                                data-autoid="dds--button-group-0"
-                                                href="https://example.com/"
-                                                iconDescription="right arrow icon"
-                                                isExpressive={true}
-                                                kind="primary"
-                                                onClick={[Function]}
-                                                renderIcon={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                target={null}
-                                                type="button"
-                                              >
-                                                <a
-                                                  className="bx--btn bx--btn--primary bx--btn--expressive"
-                                                  copy="Excepteur sint occaecat"
-                                                  data-autoid="dds--button-group-0"
-                                                  href="https://example.com/"
-                                                  onBlur={[Function]}
-                                                  onClick={[Function]}
-                                                  onFocus={[Function]}
-                                                  onMouseEnter={[Function]}
-                                                  onMouseLeave={[Function]}
-                                                  tabIndex={0}
-                                                  target={null}
-                                                >
-                                                  Excepteur sint occaecat
-                                                  <ForwardRef(ArrowRight20)
-                                                    aria-hidden="true"
-                                                    aria-label="right arrow icon"
-                                                    className="bx--btn__icon"
-                                                  >
-                                                    <Icon
-                                                      aria-hidden="true"
-                                                      aria-label="right arrow icon"
-                                                      className="bx--btn__icon"
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden="true"
-                                                        aria-label="right arrow icon"
-                                                        className="bx--btn__icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        role="img"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Button>
-                                            </li>
-                                          </ol>
-                                        </ButtonGroup>
-                                      </ButtonCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </div>
-                        </LeadSpaceBlock>
-                        <a
-                          data-title="Pharetra pharetra massa massa ultricies mi quis."
-                          name="section-2"
-                        />
-                        <ContentBlockSegmented
-                          heading="Pharetra pharetra massa massa ultricies mi quis."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Pharetra pharetra massa massa ultricies mi quis."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Pharetra pharetra massa massa ultricies mi quis.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="2"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="2"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="3"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="3"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <FeatureCard
-                          card={
-                            Object {
-                              "copy": "Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.",
-                              "cta": Object {
-                                "href": "https://example.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                              },
-                              "eyebrow": "scelerisque purus",
-                              "heading": "Elementum nibh tellus molestie nunc?",
-                              "image": Object {
-                                "alt": "Image alt text",
-                                "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                              },
-                            }
-                          }
-                          size="large"
-                        >
-                          <div
-                            className="bx--feature-card-large"
-                            data-autoid="dds--feature-card-large"
-                          >
-                            <Card
-                              copy="Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique."
-                              cta={
-                                Object {
-                                  "href": "https://example.com",
-                                  "icon": Object {
-                                    "src": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                  },
-                                }
-                              }
-                              customClassName="bx--feature-card-large__card"
-                              eyebrow="scelerisque purus"
-                              heading="Elementum nibh tellus molestie nunc?"
-                              image={
-                                Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                                }
-                              }
-                            >
-                              <Tile
-                                className="bx--card bx--feature-card-large__card"
-                                data-autoid="dds--card"
-                                light={false}
-                              >
-                                <div
-                                  className="bx--tile bx--card bx--feature-card-large__card"
-                                  data-autoid="dds--card"
-                                >
-                                  <Image
-                                    alt="Image alt text"
-                                    classname="bx--card__img"
-                                    defaultSrc="fpo--1x1--720x720--004.jpg"
-                                  >
-                                    <div
-                                      className="bx--image"
-                                      data-autoid="dds--image__longdescription"
-                                    >
-                                      <picture>
-                                        <img
-                                          alt="Image alt text"
-                                          className="bx--image__img bx--card__img"
-                                          src="fpo--1x1--720x720--004.jpg"
-                                        />
-                                      </picture>
-                                    </div>
-                                  </Image>
-                                  <div
-                                    className="bx--card__wrapper"
-                                  >
-                                    <div
-                                      className="bx--card__content"
-                                    >
-                                      <p
-                                        className="bx--card__eyebrow"
-                                      >
-                                        scelerisque purus
-                                      </p>
-                                      <h3
-                                        className="bx--card__heading"
-                                      >
-                                        Elementum nibh tellus molestie nunc?
-                                      </h3>
-                                      <div
-                                        className="bx--card__copy"
-                                        dangerouslySetInnerHTML={
-                                          Object {
-                                            "__html": "<p>Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.</p> ",
-                                          }
-                                        }
-                                      />
-                                      <Link
-                                        aria-label="Elementum nibh tellus molestie nunc?"
-                                        className="bx--card__footer"
-                                        href="https://example.com"
-                                        target={null}
-                                      >
-                                        <a
-                                          aria-label="Elementum nibh tellus molestie nunc?"
-                                          className="bx--link bx--card__footer"
-                                          href="https://example.com"
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <ForwardRef(ArrowRight20)
-                                            className="bx--card__cta"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                          >
-                                            <Icon
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                className="bx--card__cta"
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                src={
-                                                  Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  }
-                                                }
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </div>
-                                </div>
-                              </Tile>
-                            </Card>
-                          </div>
-                        </FeatureCard>
-                        <a
-                          data-title="Elementum nibh tellus molestie nunc non"
-                          name="section-3"
-                        />
-                        <ContentBlockSegmented
-                          cta={
-                            Object {
-                              "disableImage": true,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "style": "card",
-                              "type": "video",
-                            }
-                          }
-                          heading="Elementum nibh tellus molestie nunc non."
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "cta": Object {
-                                  "copy": "Lorem Ipsum dolor sit",
-                                  "href": "https://example.com",
-                                  "type": "local",
-                                },
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--003.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--003.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                              Object {
-                                "copy": "Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.",
-                                "heading": "A scelerisque purus semper eget duis at tellus.",
-                                "image": Object {
-                                  "heading": "Mauris iaculis eget dolor nec hendrerit.",
-                                  "image": Object {
-                                    "alt": "Image alt text",
-                                    "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                    "sources": Array [
-                                      Object {
-                                        "breakpoint": 320,
-                                        "src": "fpo--16x9--320x180--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 400,
-                                        "src": "fpo--16x9--480x270--004.jpg",
-                                      },
-                                      Object {
-                                        "breakpoint": 672,
-                                        "src": "fpo--16x9--720x405--004.jpg",
-                                      },
-                                    ],
-                                  },
-                                },
-                              },
-                            ]
-                          }
-                          mediaType="image"
-                        >
-                          <div
-                            className="bx--content-block-segmented"
-                            data-autoid="dds--content-block-segmented"
-                          >
-                            <ContentBlock
-                              border={false}
-                              cta={
-                                Object {
-                                  "disableImage": true,
-                                  "media": Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  },
-                                  "style": "card",
-                                  "type": "video",
-                                }
-                              }
-                              heading="Elementum nibh tellus molestie nunc non."
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Elementum nibh tellus molestie nunc non.
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentGroup
-                                    cta={
-                                      Object {
-                                        "copy": "Lorem Ipsum dolor sit",
-                                        "href": "https://example.com",
-                                        "style": "text",
-                                        "type": "local",
-                                      }
-                                    }
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="0"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--003.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--003.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--003.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--003.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--003.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--003.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--003.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--003.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--003.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                      <div
-                                        className="bx--content-group__cta-row"
-                                        data-autoid="dds--content-group__cta"
-                                      >
-                                        <CTA
-                                          copy="Lorem Ipsum dolor sit"
-                                          customClassName="bx--content-group__cta"
-                                          customVideoTitle={null}
-                                          href="https://example.com"
-                                          style="text"
-                                          type="local"
-                                        >
-                                          <div
-                                            className="bx--content-group__cta"
-                                          >
-                                            <TextCTA
-                                              copy="Lorem Ipsum dolor sit"
-                                              customVideoTitle={null}
-                                              formatCTAcopy={[Function]}
-                                              href="https://example.com"
-                                              iconPlacement="right"
-                                              openLightBox={[Function]}
-                                              renderLightBox={false}
-                                              style="text"
-                                              type="local"
-                                              videoTitle={
-                                                Array [
-                                                  Object {
-                                                    "duration": "",
-                                                    "key": 0,
-                                                    "title": "",
-                                                  },
-                                                ]
-                                              }
-                                            >
-                                              <LinkWithIcon
-                                                href="https://example.com"
-                                                iconInline={true}
-                                                iconPlacement="right"
-                                                onClick={[Function]}
-                                                target={null}
-                                              >
-                                                <div
-                                                  className="bx--link-with-icon__container"
-                                                  data-autoid="dds--link-with-icon"
-                                                >
-                                                  <Link
-                                                    className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                    href="https://example.com"
-                                                    onClick={[Function]}
-                                                    size="lg"
-                                                    target={null}
-                                                  >
-                                                    <a
-                                                      className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                      href="https://example.com"
-                                                      onClick={[Function]}
-                                                      rel={null}
-                                                      target={null}
-                                                    >
-                                                      <span>
-                                                        Lorem Ipsum dolor sit
-                                                      </span>
-                                                      <span
-                                                        className="bx--visually-hidden"
-                                                      />
-                                                      <ForwardRef(ArrowRight20)>
-                                                        <Icon
-                                                          fill="currentColor"
-                                                          height={20}
-                                                          preserveAspectRatio="xMidYMid meet"
-                                                          viewBox="0 0 20 20"
-                                                          width={20}
-                                                          xmlns="http://www.w3.org/2000/svg"
-                                                        >
-                                                          <svg
-                                                            aria-hidden={true}
-                                                            fill="currentColor"
-                                                            focusable="false"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 20 20"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <path
-                                                              d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                            />
-                                                          </svg>
-                                                        </Icon>
-                                                      </ForwardRef(ArrowRight20)>
-                                                    </a>
-                                                  </Link>
-                                                </div>
-                                              </LinkWithIcon>
-                                            </TextCTA>
-                                          </div>
-                                        </CTA>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                  <ContentGroup
-                                    heading="A scelerisque purus semper eget duis at tellus."
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-group"
-                                      data-autoid="dds--content-group"
-                                    >
-                                      <h3
-                                        className="bx--content-group__title"
-                                        data-autoid="dds--content-group__title"
-                                      >
-                                        A scelerisque purus semper eget duis at tellus.
-                                      </h3>
-                                      <div
-                                        className="bx--content-group__col bx--content-group__children"
-                                        data-autoid="dds--content-group__children"
-                                      >
-                                        <div
-                                          data-autoid="dds--content-block-segmented__content-group"
-                                        >
-                                          <ContentItem
-                                            copy="Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames."
-                                            key="1"
-                                          >
-                                            <div
-                                              className="bx--content-item"
-                                              data-autoid="dds--content-item"
-                                            >
-                                              <div
-                                                className="bx--content-item__copy"
-                                                dangerouslySetInnerHTML={
-                                                  Object {
-                                                    "__html": "<p>Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.</p> ",
-                                                  }
-                                                }
-                                                data-autoid="dds--content-item__copy"
-                                              />
-                                            </div>
-                                          </ContentItem>
-                                          <div
-                                            data-autoid="dds--content-block-segmented__media"
-                                          >
-                                            <ImageWithCaption
-                                              copy=""
-                                              heading="Mauris iaculis eget dolor nec hendrerit."
-                                              image={
-                                                Object {
-                                                  "alt": "Image alt text",
-                                                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                                                  "sources": Array [
-                                                    Object {
-                                                      "breakpoint": 320,
-                                                      "src": "fpo--16x9--320x180--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 400,
-                                                      "src": "fpo--16x9--480x270--004.jpg",
-                                                    },
-                                                    Object {
-                                                      "breakpoint": 672,
-                                                      "src": "fpo--16x9--720x405--004.jpg",
-                                                    },
-                                                  ],
-                                                }
-                                              }
-                                              lightbox={false}
-                                            >
-                                              <div
-                                                className="bx--image-with-caption"
-                                                data-autoid="dds--image-with-caption"
-                                              >
-                                                <Image
-                                                  alt="Image alt text"
-                                                  defaultSrc="fpo--16x9--720x405--004.jpg"
-                                                  sources={
-                                                    Array [
-                                                      Object {
-                                                        "breakpoint": 320,
-                                                        "src": "fpo--16x9--320x180--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 400,
-                                                        "src": "fpo--16x9--480x270--004.jpg",
-                                                      },
-                                                      Object {
-                                                        "breakpoint": 672,
-                                                        "src": "fpo--16x9--720x405--004.jpg",
-                                                      },
-                                                    ]
-                                                  }
-                                                >
-                                                  <div
-                                                    className="bx--image"
-                                                    data-autoid="dds--image__longdescription"
-                                                  >
-                                                    <picture>
-                                                      <source
-                                                        key="0"
-                                                        media="(min-width: 672px)"
-                                                        srcSet="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="1"
-                                                        media="(min-width: 400px)"
-                                                        srcSet="fpo--16x9--480x270--004.jpg"
-                                                      />
-                                                      <source
-                                                        key="2"
-                                                        media="(min-width: 320px)"
-                                                        srcSet="fpo--16x9--320x180--004.jpg"
-                                                      />
-                                                      <img
-                                                        alt="Image alt text"
-                                                        className="bx--image__img"
-                                                        src="fpo--16x9--720x405--004.jpg"
-                                                      />
-                                                    </picture>
-                                                  </div>
-                                                </Image>
-                                                <p
-                                                  className="bx--image__caption"
-                                                  data-autoid="dds--image__caption"
-                                                >
-                                                  Mauris iaculis eget dolor nec hendrerit.
-                                                </p>
-                                              </div>
-                                            </ImageWithCaption>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentGroup>
-                                </div>
-                                <div
-                                  className="bx--content-block__cta-row"
-                                  data-autoid="dds--content-block__cta"
-                                >
-                                  <CTA
-                                    copy=""
-                                    customClassName="bx--content-block__cta bx--content-block__cta-col"
-                                    customVideoTitle={null}
-                                    disableImage={true}
-                                    href=""
-                                    media={
-                                      Object {
-                                        "src": "1_9h94wo6b",
-                                        "type": "video",
-                                      }
-                                    }
-                                    style="card"
-                                    type="video"
-                                  >
-                                    <div
-                                      className="bx--content-block__cta bx--content-block__cta-col"
-                                    >
-                                      <CardCTA
-                                        copy=""
-                                        cta={null}
-                                        customVideoTitle={null}
-                                        disableImage={true}
-                                        href=""
-                                        media={
-                                          Object {
-                                            "src": "1_9h94wo6b",
-                                            "type": "video",
-                                          }
-                                        }
-                                        openLightBox={[Function]}
-                                        renderLightBox={false}
-                                        style="card"
-                                        type="video"
-                                        videoTitle={
-                                          Array [
-                                            Object {
-                                              "duration": "",
-                                              "key": 0,
-                                              "title": "",
-                                            },
-                                          ]
-                                        }
-                                      >
-                                        <CardLink
-                                          card={
-                                            Object {
-                                              "copy": "",
-                                              "cta": Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              },
-                                              "customVideoTitle": null,
-                                              "heading": "",
-                                              "href": "",
-                                              "image": undefined,
-                                              "media": Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              },
-                                              "size": undefined,
-                                            }
-                                          }
-                                          customClassName="bx--card__CardCTA bx--card__video"
-                                          disabled={false}
-                                        >
-                                          <Card
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "copy": "",
-                                                "handleClick": [Function],
-                                                "href": "#",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                                "iconPlacement": "left",
-                                              }
-                                            }
-                                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                            customVideoTitle={null}
-                                            heading=""
-                                            href=""
-                                            media={
-                                              Object {
-                                                "src": "1_9h94wo6b",
-                                                "type": "video",
-                                              }
-                                            }
-                                          >
-                                            <Tile
-                                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                              customVideoTitle={null}
-                                              data-autoid="dds--card"
-                                              href=""
-                                              light={false}
-                                              media={
-                                                Object {
-                                                  "src": "1_9h94wo6b",
-                                                  "type": "video",
-                                                }
-                                              }
-                                            >
-                                              <div
-                                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                                customVideoTitle={null}
-                                                data-autoid="dds--card"
-                                                href=""
-                                                media={
-                                                  Object {
-                                                    "src": "1_9h94wo6b",
-                                                    "type": "video",
-                                                  }
-                                                }
-                                              >
-                                                <div
-                                                  className="bx--card__wrapper"
-                                                >
-                                                  <div
-                                                    className="bx--card__content"
-                                                  >
-                                                    <Link
-                                                      aria-label=""
-                                                      className="bx--card__footer bx--card__footer__icon-left"
-                                                      href="#"
-                                                      onClick={[Function]}
-                                                      target={null}
-                                                    >
-                                                      <a
-                                                        aria-label=""
-                                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                                        href="#"
-                                                        onClick={[Function]}
-                                                        rel={null}
-                                                        target={null}
-                                                      >
-                                                        <ForwardRef(PlayOutline20)
-                                                          className="bx--card__cta"
-                                                          src={
-                                                            Object {
-                                                              "$$typeof": Symbol(react.forward_ref),
-                                                              "render": [Function],
-                                                            }
-                                                          }
-                                                        >
-                                                          <Icon
-                                                            className="bx--card__cta"
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            src={
-                                                              Object {
-                                                                "$$typeof": Symbol(react.forward_ref),
-                                                                "render": [Function],
-                                                              }
-                                                            }
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              className="bx--card__cta"
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              src={
-                                                                Object {
-                                                                  "$$typeof": Symbol(react.forward_ref),
-                                                                  "render": [Function],
-                                                                }
-                                                              }
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                                              />
-                                                              <path
-                                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(PlayOutline20)>
-                                                      </a>
-                                                    </Link>
-                                                  </div>
-                                                </div>
-                                              </div>
-                                            </Tile>
-                                          </Card>
-                                        </CardLink>
-                                      </CardCTA>
-                                    </div>
-                                  </CTA>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockSegmented>
-                        <CalloutWithMedia
-                          copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                          heading="Mauris ultrices eros in cursus"
-                          mediaData={
-                            Object {
-                              "videoId": "1_9h94wo6b",
-                            }
-                          }
-                          mediaType="video"
-                        >
-                          <div
-                            className="bx--callout-with-media"
-                            data-autoid="dds--callout-with-media"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <ContentBlockSimple
-                                      copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                      heading="Mauris ultrices eros in cursus"
-                                      mediaData={
-                                        Object {
-                                          "videoId": "1_9h94wo6b",
-                                        }
-                                      }
-                                      mediaType="video"
-                                    >
-                                      <div
-                                        className="bx--content-block-simple"
-                                        data-autoid="dds--content-block-simple"
-                                      >
-                                        <ContentBlock
-                                          border={false}
-                                          heading="Mauris ultrices eros in cursus"
-                                        >
-                                          <div
-                                            className="bx--content-block"
-                                            data-autoid="dds--content-block"
-                                          >
-                                            <h2
-                                              className="bx--content-block__heading"
-                                              data-autoid="dds--content-block__heading"
-                                            >
-                                              Mauris ultrices eros in cursus
-                                            </h2>
-                                            <div
-                                              className="bx--content-block__children"
-                                              data-autoid="dds--content-block__children"
-                                            >
-                                              <div
-                                                className="bx--content-block-simple__content"
-                                              >
-                                                <ContentItem
-                                                  copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-                                                >
-                                                  <div
-                                                    className="bx--content-item"
-                                                    data-autoid="dds--content-item"
-                                                  >
-                                                    <div
-                                                      className="bx--content-item__copy"
-                                                      dangerouslySetInnerHTML={
-                                                        Object {
-                                                          "__html": "<p>Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui.</p> ",
-                                                        }
-                                                      }
-                                                      data-autoid="dds--content-item__copy"
-                                                    />
-                                                  </div>
-                                                </ContentItem>
-                                                <div
-                                                  className="bx--content-block-simple__media-video"
-                                                  data-autoid="dds--content-block-simple__media"
-                                                >
-                                                  <VideoPlayer
-                                                    autoPlay={false}
-                                                    playingMode="inline"
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <div
-                                                      aria-label=" 0"
-                                                      className="bx--video-player"
-                                                      role="region"
-                                                    >
-                                                      <div
-                                                        className="bx--video-player__video-container "
-                                                        data-autoid="dds--video-player__video-1_9h94wo6b"
-                                                      >
-                                                        <div
-                                                          className="bx--video-player__video"
-                                                          id="bx--video-player__video-1_9h94wo6b-130"
-                                                        >
-                                                          <VideoImageOverlay
-                                                            embedVideo={[Function]}
-                                                            playingMode="inline"
-                                                            videoData={
-                                                              Object {
-                                                                "description": "",
-                                                                "name": "",
-                                                              }
-                                                            }
-                                                            videoId="1_9h94wo6b"
-                                                          >
-                                                            <button
-                                                              className="bx--video-player__image-overlay"
-                                                              data-autoid="dds--video-player__image-overlay"
-                                                              onClick={[Function]}
-                                                            >
-                                                              <Image
-                                                                alt=""
-                                                                defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                                icon={[Function]}
-                                                                refImage={[Function]}
-                                                              />
-                                                            </button>
-                                                          </VideoImageOverlay>
-                                                        </div>
-                                                      </div>
-                                                    </div>
-                                                  </VideoPlayer>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </div>
-                                        </ContentBlock>
-                                      </div>
-                                    </ContentBlockSimple>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutWithMedia>
-                        <a
-                          data-title="Tincidunt ornare massa"
-                          name="section-4"
-                        />
-                        <ContentGroupHorizontal
-                          heading="Tincidunt ornare massa"
-                          items={
-                            Array [
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                              Object {
-                                "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-                                "cta": Object {
-                                  "heading": "Aliquam condimentum",
-                                  "items": Array [
-                                    Object {
-                                      "copy": "Link text",
-                                      "href": "https://example.com",
-                                      "type": "local",
-                                    },
-                                    Object {
-                                      "copy": "External link text",
-                                      "href": "https://example.com",
-                                      "type": "external",
-                                    },
-                                  ],
-                                },
-                                "eyebrow": "Lorem ipsum",
-                                "heading": "Aliquam condimentum",
-                              },
-                            ]
-                          }
-                        >
-                          <div
-                            className="bx--content-group-horizontal"
-                            data-autoid="dds--content-group-horizontal"
-                          >
-                            <ContentBlock
-                              border={true}
-                              heading="Tincidunt ornare massa"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Tincidunt ornare massa
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="0"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                  <ContentItemHorizontal
-                                    copy="Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin."
-                                    cta={
-                                      Object {
-                                        "heading": "Aliquam condimentum",
-                                        "items": Array [
-                                          Object {
-                                            "copy": "Link text",
-                                            "href": "https://example.com",
-                                            "type": "local",
-                                          },
-                                          Object {
-                                            "copy": "External link text",
-                                            "href": "https://example.com",
-                                            "type": "external",
-                                          },
-                                        ],
-                                      }
-                                    }
-                                    eyebrow="Lorem ipsum"
-                                    heading="Aliquam condimentum"
-                                    key="1"
-                                  >
-                                    <div
-                                      className="bx--content-item-horizontal__item "
-                                      data-autoid="dds--content-item-horizontal__item"
-                                    >
-                                      <div
-                                        className="bx--content-item-horizontal__row"
-                                      >
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <p
-                                            className="bx--content-item-horizontal__item--eyebrow"
-                                            data-autoid="dds--content-item-horizontal__item--eyebrow"
-                                          >
-                                            Lorem ipsum
-                                          </p>
-                                          <h3
-                                            className="bx--content-item-horizontal__item--heading"
-                                            data-autoid="dds--content-item-horizontal__item--heading"
-                                          >
-                                            Aliquam condimentum
-                                          </h3>
-                                        </div>
-                                        <div
-                                          className="bx--content-item-horizontal__col"
-                                        >
-                                          <div
-                                            className="bx--content-item-horizontal__item--copy"
-                                            dangerouslySetInnerHTML={
-                                              Object {
-                                                "__html": "<p>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</p> ",
-                                              }
-                                            }
-                                            data-autoid="dds--content-item-horizontal__item--copy"
-                                          />
-                                          <div
-                                            className="bx--content-item-horizontal__item--cta"
-                                            data-autoid="dds--content-item-horizontal__item--cta"
-                                          >
-                                            <LinkList
-                                              heading="Aliquam condimentum"
-                                              items={
-                                                Array [
-                                                  Object {
-                                                    "copy": "Link text",
-                                                    "href": "https://example.com",
-                                                    "type": "local",
-                                                  },
-                                                  Object {
-                                                    "copy": "External link text",
-                                                    "href": "https://example.com",
-                                                    "type": "external",
-                                                  },
-                                                ]
-                                              }
-                                              style="vertical"
-                                            >
-                                              <div
-                                                className="bx--link-list"
-                                                data-autoid="dds--link-list"
-                                              >
-                                                <h4
-                                                  className="bx--link-list__heading"
-                                                >
-                                                  Aliquam condimentum
-                                                </h4>
-                                                <ul
-                                                  className="bx--link-list__list bx--link-list__list--vertical"
-                                                >
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--local"
-                                                    key="0"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="Link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="local"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="Link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="local"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target={null}
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target={null}
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel={null}
-                                                                  target={null}
-                                                                >
-                                                                  <span>
-                                                                    Link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  />
-                                                                  <ForwardRef(ArrowRight20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 20 20"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(ArrowRight20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                  <li
-                                                    className="bx--link-list__list__CTA bx--link-list__list--external"
-                                                    key="1"
-                                                  >
-                                                    <CTA
-                                                      ariaRole="listitem"
-                                                      copy="External link text"
-                                                      customVideoTitle={null}
-                                                      disableImage={true}
-                                                      href="https://example.com"
-                                                      iconInline={true}
-                                                      style="text"
-                                                      type="external"
-                                                    >
-                                                      <div>
-                                                        <TextCTA
-                                                          ariaRole="listitem"
-                                                          copy="External link text"
-                                                          customVideoTitle={null}
-                                                          disableImage={true}
-                                                          formatCTAcopy={[Function]}
-                                                          href="https://example.com"
-                                                          iconInline={true}
-                                                          iconPlacement="right"
-                                                          openLightBox={[Function]}
-                                                          renderLightBox={false}
-                                                          style="text"
-                                                          type="external"
-                                                          videoTitle={
-                                                            Array [
-                                                              Object {
-                                                                "duration": "",
-                                                                "key": 0,
-                                                                "title": "",
-                                                              },
-                                                            ]
-                                                          }
-                                                        >
-                                                          <LinkWithIcon
-                                                            href="https://example.com"
-                                                            iconInline={true}
-                                                            iconPlacement="right"
-                                                            onClick={[Function]}
-                                                            target="_blank"
-                                                          >
-                                                            <div
-                                                              className="bx--link-with-icon__container"
-                                                              data-autoid="dds--link-with-icon"
-                                                            >
-                                                              <Link
-                                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                                href="https://example.com"
-                                                                onClick={[Function]}
-                                                                size="lg"
-                                                                target="_blank"
-                                                              >
-                                                                <a
-                                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                                  href="https://example.com"
-                                                                  onClick={[Function]}
-                                                                  rel="noopener"
-                                                                  target="_blank"
-                                                                >
-                                                                  <span>
-                                                                    External link text
-                                                                  </span>
-                                                                  <span
-                                                                    className="bx--visually-hidden"
-                                                                  >
-                                                                     - This link opens in a new tab
-                                                                  </span>
-                                                                  <ForwardRef(Launch20)>
-                                                                    <Icon
-                                                                      fill="currentColor"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      viewBox="0 0 32 32"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <svg
-                                                                        aria-hidden={true}
-                                                                        fill="currentColor"
-                                                                        focusable="false"
-                                                                        height={20}
-                                                                        preserveAspectRatio="xMidYMid meet"
-                                                                        viewBox="0 0 32 32"
-                                                                        width={20}
-                                                                        xmlns="http://www.w3.org/2000/svg"
-                                                                      >
-                                                                        <path
-                                                                          d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                                                        />
-                                                                        <path
-                                                                          d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                                                        />
-                                                                      </svg>
-                                                                    </Icon>
-                                                                  </ForwardRef(Launch20)>
-                                                                </a>
-                                                              </Link>
-                                                            </div>
-                                                          </LinkWithIcon>
-                                                        </TextCTA>
-                                                      </div>
-                                                    </CTA>
-                                                  </li>
-                                                </ul>
-                                              </div>
-                                            </LinkList>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </ContentItemHorizontal>
-                                </div>
-                                <HorizontalRule>
-                                  <hr
-                                    className="bx--hr"
-                                    data-autoid="dds--hr"
-                                  />
-                                </HorizontalRule>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentGroupHorizontal>
-                        <a
-                          data-title="Lobortis elementum nibh tellus"
-                          name="section-5"
-                        />
-                        <LogoGrid
-                          heading="Lobortis elementum nibh tellus"
-                          logosGroup={
-                            Array [
-                              Object {
-                                "altText": "Microsoft",
-                                "imgSrc": "logo-microsoft.png",
-                                "label": "Microsoft",
-                              },
-                              Object {
-                                "altText": "Dell",
-                                "imgSrc": "logo-dell.png",
-                                "label": "Dell",
-                              },
-                              Object {
-                                "altText": "Rabobank",
-                                "imgSrc": "logo-rabobank.png",
-                                "label": "Rabobank",
-                              },
-                              Object {
-                                "altText": "Adobe",
-                                "imgSrc": "logo-adobe.png",
-                                "label": "Adobe",
-                              },
-                              Object {
-                                "altText": "US Bank",
-                                "imgSrc": "logo-usbank.png",
-                                "label": "US Bank",
-                              },
-                              Object {
-                                "altText": "Cisco",
-                                "imgSrc": "logo-cisco.png",
-                                "label": "Cisco",
-                              },
-                            ]
-                          }
-                        >
-                          <section
-                            className="bx--logo-grid"
-                            data-autoid="dds--logo-grid"
-                          >
-                            <div
-                              className="bx--logo-grid__container"
-                            >
-                              <div
-                                className="bx--logo-grid__wrapper"
-                              >
-                                <ContentBlock
-                                  border={false}
-                                  cta={null}
-                                  heading="Lobortis elementum nibh tellus"
-                                >
-                                  <div
-                                    className="bx--content-block"
-                                    data-autoid="dds--content-block"
-                                  >
-                                    <h2
-                                      className="bx--content-block__heading"
-                                      data-autoid="dds--content-block__heading"
-                                    >
-                                      Lobortis elementum nibh tellus
-                                    </h2>
-                                    <div
-                                      className="bx--content-block__children"
-                                      data-autoid="dds--content-block__children"
-                                    >
-                                      <div
-                                        className="bx--logo-grid__row"
-                                      >
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="0"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Microsoft"
-                                          >
-                                            <Image
-                                              alt="Microsoft"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-microsoft.png"
-                                              longDescription="Microsoft"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Microsoft"
-                                                    aria-describedby="bx--image-131"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-microsoft.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-131"
-                                                >
-                                                  Microsoft
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="1"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Dell"
-                                          >
-                                            <Image
-                                              alt="Dell"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-dell.png"
-                                              longDescription="Dell"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Dell"
-                                                    aria-describedby="bx--image-132"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-dell.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-132"
-                                                >
-                                                  Dell
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="2"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Rabobank"
-                                          >
-                                            <Image
-                                              alt="Rabobank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-rabobank.png"
-                                              longDescription="Rabobank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Rabobank"
-                                                    aria-describedby="bx--image-133"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-rabobank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-133"
-                                                >
-                                                  Rabobank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="3"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Adobe"
-                                          >
-                                            <Image
-                                              alt="Adobe"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-adobe.png"
-                                              longDescription="Adobe"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Adobe"
-                                                    aria-describedby="bx--image-134"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-adobe.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-134"
-                                                >
-                                                  Adobe
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="4"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="US Bank"
-                                          >
-                                            <Image
-                                              alt="US Bank"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-usbank.png"
-                                              longDescription="US Bank"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="US Bank"
-                                                    aria-describedby="bx--image-135"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-usbank.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-135"
-                                                >
-                                                  US Bank
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--logo-grid__col"
-                                          key="5"
-                                        >
-                                          <div
-                                            className="bx--logo-grid__logo"
-                                            key="Cisco"
-                                          >
-                                            <Image
-                                              alt="Cisco"
-                                              classname="bx--logo-grid_img"
-                                              defaultSrc="logo-cisco.png"
-                                              longDescription="Cisco"
-                                            >
-                                              <div
-                                                className="bx--image"
-                                                data-autoid="dds--image__longdescription"
-                                              >
-                                                <picture>
-                                                  <img
-                                                    alt="Cisco"
-                                                    aria-describedby="bx--image-136"
-                                                    className="bx--image__img bx--logo-grid_img"
-                                                    src="logo-cisco.png"
-                                                  />
-                                                </picture>
-                                                <div
-                                                  className="bx--image__longdescription"
-                                                  id="bx--image-136"
-                                                >
-                                                  Cisco
-                                                </div>
-                                              </div>
-                                            </Image>
-                                          </div>
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ContentBlock>
-                              </div>
-                            </div>
-                            <HorizontalRule>
-                              <hr
-                                className="bx--hr"
-                                data-autoid="dds--hr"
-                              />
-                            </HorizontalRule>
-                          </section>
-                        </LogoGrid>
-                        <a
-                          data-title="Aliquam condimentum interdum"
-                          name="section-6"
-                        />
-                        <ContentBlockCards
-                          cards={
-                            Array [
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                              Object {
-                                "cta": Object {
-                                  "href": "https://www.example.com",
-                                },
-                                "eyebrow": "Topic",
-                                "heading": "Natural language processing.",
-                                "image": Object {
-                                  "alt": "Image alt text",
-                                  "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                },
-                              },
-                            ]
-                          }
-                          heading="Aliquam condimentum interdum"
-                        >
-                          <div
-                            className="bx--content-block-cards"
-                            data-autoid="dds--content-block-cards"
-                          >
-                            <ContentBlock
-                              border={false}
-                              heading="Aliquam condimentum interdum"
-                            >
-                              <div
-                                className="bx--content-block"
-                                data-autoid="dds--content-block"
-                              >
-                                <h2
-                                  className="bx--content-block__heading"
-                                  data-autoid="dds--content-block__heading"
-                                >
-                                  Aliquam condimentum interdum
-                                </h2>
-                                <div
-                                  className="bx--content-block__children"
-                                  data-autoid="dds--content-block__children"
-                                >
-                                  <div
-                                    className="bx--content-block-cards__content"
-                                  >
-                                    <CardGroup
-                                      cards={
-                                        Array [
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                          Object {
-                                            "cta": Object {
-                                              "href": "https://www.example.com",
-                                            },
-                                            "eyebrow": "Topic",
-                                            "heading": "Natural language processing.",
-                                            "image": Object {
-                                              "alt": "Image alt text",
-                                              "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                            },
-                                          },
-                                        ]
-                                      }
-                                      cardsPerRow={3}
-                                    >
-                                      <div
-                                        className="bx--card-group__cards__row bx--row--condensed"
-                                        data-autoid="dds--card-group"
-                                        style={
-                                          Object {
-                                            "--dds--card-group--cards-in-row": 3,
-                                          }
-                                        }
-                                      >
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="0"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="0"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="1"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="1"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                        <div
-                                          className="bx--card-group__cards__col"
-                                          key="2"
-                                        >
-                                          <CTA
-                                            copy=""
-                                            cta={
-                                              Object {
-                                                "href": "https://www.example.com",
-                                                "icon": Object {
-                                                  "src": Object {
-                                                    "$$typeof": Symbol(react.forward_ref),
-                                                    "render": [Function],
-                                                  },
-                                                },
-                                              }
-                                            }
-                                            customClassName="bx--card-group__card"
-                                            customVideoTitle={null}
-                                            eyebrow="Topic"
-                                            heading="Natural language processing."
-                                            href=""
-                                            image={
-                                              Object {
-                                                "alt": "Image alt text",
-                                                "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                              }
-                                            }
-                                            key="2"
-                                            style="card"
-                                            type="local"
-                                          >
-                                            <div
-                                              className="bx--card-group__card"
-                                            >
-                                              <CardCTA
-                                                copy=""
-                                                cta={
-                                                  Object {
-                                                    "href": "https://www.example.com",
-                                                    "icon": Object {
-                                                      "src": Object {
-                                                        "$$typeof": Symbol(react.forward_ref),
-                                                        "render": [Function],
-                                                      },
-                                                    },
-                                                  }
-                                                }
-                                                customVideoTitle={null}
-                                                disableImage={false}
-                                                eyebrow="Topic"
-                                                heading="Natural language processing."
-                                                href=""
-                                                image={
-                                                  Object {
-                                                    "alt": "Image alt text",
-                                                    "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                  }
-                                                }
-                                                media={null}
-                                                openLightBox={[Function]}
-                                                renderLightBox={false}
-                                                style="card"
-                                                type="local"
-                                                videoTitle={
-                                                  Array [
-                                                    Object {
-                                                      "duration": "",
-                                                      "key": 0,
-                                                      "title": "",
-                                                    },
-                                                  ]
-                                                }
-                                              >
-                                                <CardLink
-                                                  card={
-                                                    Object {
-                                                      "copy": "",
-                                                      "cta": Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      },
-                                                      "customVideoTitle": null,
-                                                      "eyebrow": "Topic",
-                                                      "heading": "Natural language processing.",
-                                                      "href": "https://www.example.com",
-                                                      "image": Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      },
-                                                      "media": null,
-                                                      "pictogram": undefined,
-                                                      "size": undefined,
-                                                      "target": null,
-                                                    }
-                                                  }
-                                                  customClassName="bx--card__CardCTA"
-                                                  disabled={false}
-                                                >
-                                                  <Card
-                                                    copy=""
-                                                    cta={
-                                                      Object {
-                                                        "href": "https://www.example.com",
-                                                        "icon": Object {
-                                                          "src": Object {
-                                                            "$$typeof": Symbol(react.forward_ref),
-                                                            "render": [Function],
-                                                          },
-                                                        },
-                                                        "type": "local",
-                                                      }
-                                                    }
-                                                    customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                    customVideoTitle={null}
-                                                    eyebrow="Topic"
-                                                    heading="Natural language processing."
-                                                    href="https://www.example.com"
-                                                    image={
-                                                      Object {
-                                                        "alt": "Image alt text",
-                                                        "defaultSrc": "fpo--4x3--1312x984--002.jpg",
-                                                      }
-                                                    }
-                                                    media={null}
-                                                    target={null}
-                                                  >
-                                                    <Tile
-                                                      className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                      customVideoTitle={null}
-                                                      data-autoid="dds--card"
-                                                      href="https://www.example.com"
-                                                      light={false}
-                                                      media={null}
-                                                      target={null}
-                                                    >
-                                                      <div
-                                                        className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                                        customVideoTitle={null}
-                                                        data-autoid="dds--card"
-                                                        href="https://www.example.com"
-                                                        media={null}
-                                                        target={null}
-                                                      >
-                                                        <Image
-                                                          alt="Image alt text"
-                                                          classname="bx--card__img"
-                                                          defaultSrc="fpo--4x3--1312x984--002.jpg"
-                                                        >
-                                                          <div
-                                                            className="bx--image"
-                                                            data-autoid="dds--image__longdescription"
-                                                          >
-                                                            <picture>
-                                                              <img
-                                                                alt="Image alt text"
-                                                                className="bx--image__img bx--card__img"
-                                                                src="fpo--4x3--1312x984--002.jpg"
-                                                              />
-                                                            </picture>
-                                                          </div>
-                                                        </Image>
-                                                        <div
-                                                          className="bx--card__wrapper"
-                                                        >
-                                                          <div
-                                                            className="bx--card__content"
-                                                          >
-                                                            <p
-                                                              className="bx--card__eyebrow"
-                                                            >
-                                                              Topic
-                                                            </p>
-                                                            <h3
-                                                              className="bx--card__heading"
-                                                            >
-                                                              Natural language processing.
-                                                            </h3>
-                                                            <Link
-                                                              aria-label="Natural language processing."
-                                                              className="bx--card__footer"
-                                                              href="https://www.example.com"
-                                                              target={null}
-                                                            >
-                                                              <a
-                                                                aria-label="Natural language processing."
-                                                                className="bx--link bx--card__footer"
-                                                                href="https://www.example.com"
-                                                                rel={null}
-                                                                target={null}
-                                                              >
-                                                                <ForwardRef(ArrowRight20)
-                                                                  className="bx--card__cta"
-                                                                  src={
-                                                                    Object {
-                                                                      "$$typeof": Symbol(react.forward_ref),
-                                                                      "render": [Function],
-                                                                    }
-                                                                  }
-                                                                >
-                                                                  <Icon
-                                                                    className="bx--card__cta"
-                                                                    fill="currentColor"
-                                                                    height={20}
-                                                                    preserveAspectRatio="xMidYMid meet"
-                                                                    src={
-                                                                      Object {
-                                                                        "$$typeof": Symbol(react.forward_ref),
-                                                                        "render": [Function],
-                                                                      }
-                                                                    }
-                                                                    viewBox="0 0 20 20"
-                                                                    width={20}
-                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                  >
-                                                                    <svg
-                                                                      aria-hidden={true}
-                                                                      className="bx--card__cta"
-                                                                      fill="currentColor"
-                                                                      focusable="false"
-                                                                      height={20}
-                                                                      preserveAspectRatio="xMidYMid meet"
-                                                                      src={
-                                                                        Object {
-                                                                          "$$typeof": Symbol(react.forward_ref),
-                                                                          "render": [Function],
-                                                                        }
-                                                                      }
-                                                                      viewBox="0 0 20 20"
-                                                                      width={20}
-                                                                      xmlns="http://www.w3.org/2000/svg"
-                                                                    >
-                                                                      <path
-                                                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                      />
-                                                                    </svg>
-                                                                  </Icon>
-                                                                </ForwardRef(ArrowRight20)>
-                                                              </a>
-                                                            </Link>
-                                                          </div>
-                                                        </div>
-                                                      </div>
-                                                    </Tile>
-                                                  </Card>
-                                                </CardLink>
-                                              </CardCTA>
-                                            </div>
-                                          </CTA>
-                                        </div>
-                                      </div>
-                                    </CardGroup>
-                                  </div>
-                                </div>
-                              </div>
-                            </ContentBlock>
-                          </div>
-                        </ContentBlockCards>
-                        <a
-                          data-title="Duis aute irure dolor in reprehenderit"
-                          name="section-7"
-                        />
-                        <CalloutQuote
-                          quote={
-                            Object {
-                              "copy": "Duis aute irure dolor in reprehenderit",
-                              "cta": Object {
-                                "copy": "Link with Icon",
-                                "href": "https://example.com",
-                                "type": "local",
-                              },
-                              "source": Object {
-                                "copy": "dolor sit amet",
-                                "heading": "Lorem ipsum",
-                              },
-                            }
-                          }
-                        >
-                          <div
-                            className="bx--callout-quote"
-                            data-autoid="dds--callout-quote"
-                          >
-                            <Callout>
-                              <section
-                                className="bx--callout__container"
-                                data-autoid="dds--callout__container"
-                              >
-                                <div
-                                  className="bx--callout__column"
-                                  data-autoid="dds--callout__column"
-                                >
-                                  <div
-                                    className="bx--callout__content"
-                                    data-autoid="dds--callout__content"
-                                  >
-                                    <Quote
-                                      copy="Duis aute irure dolor in reprehenderit"
-                                      cta={
-                                        Object {
-                                          "copy": "Link with Icon",
-                                          "href": "https://example.com",
-                                          "type": "local",
-                                        }
-                                      }
-                                      source={
-                                        Object {
-                                          "copy": "dolor sit amet",
-                                          "heading": "Lorem ipsum",
-                                        }
-                                      }
-                                    >
-                                      <div
-                                        className="bx--quote"
-                                        data-autoid="dds--quote"
-                                      >
-                                        <div
-                                          className="bx--quote__container"
-                                        >
-                                          <div
-                                            className="bx--quote__wrapper"
-                                            data-autoid="dds--quote__copy"
-                                          >
-                                            <span
-                                              className="bx--quote__mark"
-                                            >
-                                              “
-                                            </span>
-                                            <blockquote
-                                              className="bx--quote__copy"
-                                            >
-                                              Duis aute irure dolor in reprehenderit
-                                              ”
-                                            </blockquote>
-                                          </div>
-                                          <div
-                                            className="bx--quote__source"
-                                            data-autoid="dds--quote__source"
-                                          >
-                                            <p
-                                              className="bx--quote__source-heading"
-                                            >
-                                              Lorem ipsum
-                                            </p>
-                                            <p
-                                              className="bx--quote__source-body"
-                                            >
-                                              dolor sit amet
-                                            </p>
-                                          </div>
-                                        </div>
-                                        <div
-                                          className="bx--quote__footer"
-                                        >
-                                          <HorizontalRule>
-                                            <hr
-                                              className="bx--hr"
-                                              data-autoid="dds--hr"
-                                            />
-                                          </HorizontalRule>
-                                          <LinkWithIcon
-                                            href="https://example.com"
-                                            iconInline={true}
-                                            iconPlacement="right"
-                                          >
-                                            <div
-                                              className="bx--link-with-icon__container"
-                                              data-autoid="dds--link-with-icon"
-                                            >
-                                              <Link
-                                                className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                                href="https://example.com"
-                                                size="lg"
-                                              >
-                                                <a
-                                                  className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                                  href="https://example.com"
-                                                  rel={null}
-                                                >
-                                                  <span>
-                                                    Link with Icon
-                                                  </span>
-                                                  <ForwardRef(ArrowRight20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 20 20"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 20 20"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ArrowRight20)>
-                                                </a>
-                                              </Link>
-                                            </div>
-                                          </LinkWithIcon>
-                                        </div>
-                                      </div>
-                                    </Quote>
-                                  </div>
-                                </div>
-                              </section>
-                            </Callout>
-                          </div>
-                        </CalloutQuote>
-                      </div>
-                    </div>
-                  </div>
-                </section>
-              </TableOfContents>
-              <div
-                className="bx--grid"
-                style={
-                  Object {
-                    "backgroundColor": "#f4f4f4",
-                  }
-                }
-              >
-                <div
-                  className="bx--row"
-                >
-                  <div
-                    className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4"
-                  >
-                    <CTASection
-                      copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                      cta={
-                        Object {
-                          "buttons": Array [
-                            Object {
-                              "copy": "Contact sales",
-                              "href": "https://example.com/",
-                              "iconDescription": "right arrow icon",
-                              "onClick": [Function],
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                              "target": null,
-                              "type": "local",
-                            },
-                          ],
-                          "style": "button",
-                          "type": "local",
-                        }
-                      }
-                      heading="Take the next step"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.",
-                            "cta": Object {
-                              "copy": "Find a partner",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Get connected",
-                          },
-                          Object {
-                            "copy": "Dig into more self-directed learning about DevOps methodologies.",
-                            "cta": Object {
-                              "copy": "Browse tutorials",
-                              "href": "https://example.com/",
-                              "type": "local",
-                            },
-                            "heading": "Learn how",
-                          },
-                        ]
-                      }
-                      theme="g10"
-                    >
-                      <section
-                        className="bx--cta-section bx--cta-section__has-items bx--cta-section--g10"
-                        data-autoid="dds--cta-section"
-                      >
-                        <ContentBlock
-                          border={false}
-                          copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-                          heading="Take the next step"
-                        >
-                          <div
-                            className="bx--content-block"
-                            data-autoid="dds--content-block"
-                          >
-                            <h2
-                              className="bx--content-block__heading"
-                              data-autoid="dds--content-block__heading"
-                            >
-                              Take the next step
-                            </h2>
-                            <div
-                              className="bx--content-block__copy"
-                              dangerouslySetInnerHTML={
-                                Object {
-                                  "__html": "<p>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</p> ",
-                                }
-                              }
-                            />
-                            <div
-                              className="bx--content-block__children"
-                              data-autoid="dds--content-block__children"
-                            />
-                          </div>
-                        </ContentBlock>
-                        <CTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customClassName="bx--cta-section__cta"
-                          customVideoTitle={null}
-                          href=""
-                          style="button"
-                          type="local"
-                        >
-                          <div
-                            className="bx--cta-section__cta"
-                          >
-                            <ButtonCTA
-                              buttons={
-                                Array [
-                                  Object {
-                                    "copy": "Contact sales",
-                                    "href": "https://example.com/",
-                                    "iconDescription": "right arrow icon",
-                                    "onClick": [Function],
-                                    "renderIcon": Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    },
-                                    "target": null,
-                                    "type": "local",
-                                  },
-                                ]
-                              }
-                              copy=""
-                              customVideoTitle={null}
-                              formatCTAcopy={[Function]}
-                              href=""
-                              openLightBox={[Function]}
-                              renderLightBox={false}
-                              style="button"
-                              type="local"
-                              videoTitle={
-                                Array [
-                                  Object {
-                                    "duration": "",
-                                    "key": 0,
-                                    "title": "",
-                                  },
-                                ]
-                              }
-                            >
-                              <ButtonGroup
-                                buttons={
-                                  Array [
-                                    Object {
-                                      "copy": "Contact sales",
-                                      "href": "https://example.com/",
-                                      "iconDescription": "right arrow icon",
-                                      "onClick": [Function],
-                                      "renderIcon": Object {
-                                        "$$typeof": Symbol(react.forward_ref),
-                                        "render": [Function],
-                                      },
-                                      "target": null,
-                                      "type": "local",
-                                    },
-                                  ]
-                                }
-                              >
-                                <ol
-                                  className="bx--buttongroup"
-                                  data-autoid="dds--button-group"
-                                >
-                                  <li
-                                    className="bx--buttongroup-item"
-                                    key="0"
-                                  >
-                                    <Button
-                                      copy="Contact sales"
-                                      data-autoid="dds--button-group-0"
-                                      href="https://example.com/"
-                                      iconDescription="right arrow icon"
-                                      isExpressive={true}
-                                      kind="primary"
-                                      onClick={[Function]}
-                                      renderIcon={
-                                        Object {
-                                          "$$typeof": Symbol(react.forward_ref),
-                                          "render": [Function],
-                                        }
-                                      }
-                                      target={null}
-                                      type="button"
-                                    >
-                                      <a
-                                        className="bx--btn bx--btn--primary bx--btn--expressive"
-                                        copy="Contact sales"
-                                        data-autoid="dds--button-group-0"
-                                        href="https://example.com/"
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onFocus={[Function]}
-                                        onMouseEnter={[Function]}
-                                        onMouseLeave={[Function]}
-                                        tabIndex={0}
-                                        target={null}
-                                      >
-                                        Contact sales
-                                        <ForwardRef(ArrowRight20)
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                        >
-                                          <Icon
-                                            aria-hidden="true"
-                                            aria-label="right arrow icon"
-                                            className="bx--btn__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              aria-label="right arrow icon"
-                                              className="bx--btn__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              role="img"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Button>
-                                  </li>
-                                </ol>
-                              </ButtonGroup>
-                            </ButtonCTA>
-                          </div>
-                        </CTA>
-                        <div
-                          className="bx--helper-wrapper"
-                        >
-                          <div
-                            className="bx--content-item-wrapper"
-                          >
-                            <ContentItem
-                              copy="IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you."
-                              cta={
-                                Object {
-                                  "copy": "Find a partner",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Get connected"
-                              key="0"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Get connected
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Find a partner"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Find a partner"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Find a partner
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                            <ContentItem
-                              copy="Dig into more self-directed learning about DevOps methodologies."
-                              cta={
-                                Object {
-                                  "copy": "Browse tutorials",
-                                  "href": "https://example.com/",
-                                  "type": "local",
-                                }
-                              }
-                              heading="Learn how"
-                              key="1"
-                            >
-                              <div
-                                className="bx--content-item"
-                                data-autoid="dds--content-item"
-                              >
-                                <h4
-                                  className="bx--content-item__heading"
-                                  data-autoid="dds--content-item__heading"
-                                >
-                                  Learn how
-                                </h4>
-                                <div
-                                  className="bx--content-item__copy"
-                                  dangerouslySetInnerHTML={
-                                    Object {
-                                      "__html": "<p>Dig into more self-directed learning about DevOps methodologies.</p> ",
-                                    }
-                                  }
-                                  data-autoid="dds--content-item__copy"
-                                />
-                                <CTA
-                                  copy="Browse tutorials"
-                                  customClassName="bx--content-item__cta"
-                                  customVideoTitle={null}
-                                  href="https://example.com/"
-                                  style="text"
-                                  type="local"
-                                >
-                                  <div
-                                    className="bx--content-item__cta"
-                                  >
-                                    <TextCTA
-                                      copy="Browse tutorials"
-                                      customVideoTitle={null}
-                                      formatCTAcopy={[Function]}
-                                      href="https://example.com/"
-                                      iconPlacement="right"
-                                      openLightBox={[Function]}
-                                      renderLightBox={false}
-                                      style="text"
-                                      type="local"
-                                      videoTitle={
-                                        Array [
-                                          Object {
-                                            "duration": "",
-                                            "key": 0,
-                                            "title": "",
-                                          },
-                                        ]
-                                      }
-                                    >
-                                      <LinkWithIcon
-                                        href="https://example.com/"
-                                        iconInline={true}
-                                        iconPlacement="right"
-                                        onClick={[Function]}
-                                        target={null}
-                                      >
-                                        <div
-                                          className="bx--link-with-icon__container"
-                                          data-autoid="dds--link-with-icon"
-                                        >
-                                          <Link
-                                            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                            href="https://example.com/"
-                                            onClick={[Function]}
-                                            size="lg"
-                                            target={null}
-                                          >
-                                            <a
-                                              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                              href="https://example.com/"
-                                              onClick={[Function]}
-                                              rel={null}
-                                              target={null}
-                                            >
-                                              <span>
-                                                Browse tutorials
-                                              </span>
-                                              <span
-                                                className="bx--visually-hidden"
-                                              />
-                                              <ForwardRef(ArrowRight20)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 20 20"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 20 20"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ArrowRight20)>
-                                            </a>
-                                          </Link>
-                                        </div>
-                                      </LinkWithIcon>
-                                    </TextCTA>
-                                  </div>
-                                </CTA>
-                              </div>
-                            </ContentItem>
-                          </div>
-                        </div>
-                      </section>
-                    </CTASection>
-                  </div>
-                </div>
-              </div>
-            </Content>
-          </main>
-        </div>
-      </div>
-      <Footer
-        disableLocaleButton={false}
-        footerProps={null}
-        mastheadProps={null}
-        type="short"
-      >
-        <footer
-          className="bx--footer bx--footer--short"
-          data-autoid="dds--footer"
-        >
-          <section
-            className="bx--footer__main"
-          >
-            <div
-              className="bx--footer__main-container"
-            >
-              <div
-                className="bx--footer__logo-container"
-              >
-                <div
-                  className="bx--footer__logo-row"
-                >
-                  <Logo>
-                    <div
-                      className="bx--footer-logo"
-                      data-autoid="dds--footer-logo"
-                    >
-                      <a
-                        className="bx--footer-logo__link"
-                        data-autoid="dds--footer-logo__link"
-                        href="https://www.ibm.com/"
-                      >
-                        <FooterLogo
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <title>
-                              IBM Logo
-                            </title>
-                            <path
-                              d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                            />
-                          </svg>
-                        </FooterLogo>
-                      </a>
-                    </div>
-                  </Logo>
-                  <LocaleButton
-                    aria=""
-                    displayLang=""
-                  >
-                    <div
-                      className="bx--locale-btn__container"
-                    >
-                      <Button
-                        aria-label=""
-                        className="bx--locale-btn"
-                        data-autoid="dds--locale-btn"
-                        iconDescription="Earth Filled Icon"
-                        kind="tertiary"
-                        onClick={[Function]}
-                        renderIcon={
-                          Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          }
-                        }
-                      >
-                        <button
-                          aria-describedby={null}
-                          aria-label=""
-                          aria-pressed={null}
-                          className="bx--locale-btn bx--btn bx--btn--tertiary"
-                          data-autoid="dds--locale-btn"
-                          disabled={false}
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onFocus={[Function]}
-                          onMouseEnter={[Function]}
-                          onMouseLeave={[Function]}
-                          tabIndex={0}
-                          type="button"
-                        >
-                          <ForwardRef(EarthFilled20)
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                          >
-                            <Icon
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                focusable="false"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                role="img"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                />
-                              </svg>
-                            </Icon>
-                          </ForwardRef(EarthFilled20)>
-                        </button>
-                      </Button>
-                      <LocaleModal
-                        closeFunc={[Function]}
-                        isOpen={false}
-                        localeData={null}
-                        localeDisplay={null}
-                        setIsOpen={[Function]}
-                      >
-                        <ComposedModal
-                          className="bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          selectorPrimaryFocus=".bx--modal-close"
-                        >
-                          <div
-                            aria-hidden={true}
-                            className="bx--modal bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            role="presentation"
-                          >
-                            <div
-                              aria-label={
-                                Array [
-                                  undefined,
-                                  <ForwardRef(EarthFilled16)
-                                    className="bx--locale-modal__label-globe"
-                                  />,
-                                ]
-                              }
-                              aria-modal="true"
-                              className="bx--modal-container"
-                              role="dialog"
-                            >
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                              <div
-                                className="bx--modal-container-body"
-                              >
-                                <ModalHeader
-                                  buttonOnClick={[Function]}
-                                  closeModal={[Function]}
-                                  iconDescription="Close"
-                                  key=".0"
-                                  label={
-                                    Array [
-                                      undefined,
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                      />,
-                                    ]
-                                  }
-                                >
-                                  <div
-                                    className="bx--modal-header"
-                                  >
-                                    <h2
-                                      className="bx--modal-header__label bx--type-delta"
-                                    >
-                                      <ForwardRef(EarthFilled16)
-                                        className="bx--locale-modal__label-globe"
-                                        key="earthfilled"
-                                      >
-                                        <Icon
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(EarthFilled16)>
-                                    </h2>
-                                    <button
-                                      aria-label="Close"
-                                      className="bx--modal-close"
-                                      onClick={[Function]}
-                                      title="Close"
-                                      type="button"
-                                    >
-                                      <ForwardRef(Close20)
-                                        className="bx--modal-close__icon"
-                                      >
-                                        <Icon
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <svg
-                                            aria-hidden={true}
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                            />
-                                          </svg>
-                                        </Icon>
-                                      </ForwardRef(Close20)>
-                                    </button>
-                                  </div>
-                                </ModalHeader>
-                                <ForwardRef(ModalBody)
-                                  className="bx--locale-modal "
-                                  key=".1"
-                                >
-                                  <div
-                                    className="bx--modal-content bx--locale-modal "
-                                  >
-                                    <LocaleModalRegions
-                                      regionList={Array []}
-                                      setClearResults={[Function]}
-                                      setCurrentRegion={[Function]}
-                                      setIsFiltering={[Function]}
-                                    >
-                                      <div
-                                        className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                      >
-                                        <div
-                                          className="bx--row"
-                                        />
-                                      </div>
-                                    </LocaleModalRegions>
-                                    <LocaleModalCountries
-                                      regionList={Array []}
-                                      searchLabel="Search by location or language"
-                                      setClearResults={[Function]}
-                                    >
-                                      <div
-                                        className="bx--locale-modal__filter"
-                                      >
-                                        <div
-                                          className="bx--locale-modal__search"
-                                        >
-                                          <Search
-                                            closeButtonLabelText="Clear search input"
-                                            data-autoid="dds--locale-modal__filter"
-                                            id="bx--locale-modal__filter"
-                                            labelText="Search by location or language"
-                                            onChange={[Function]}
-                                            onClear={[Function]}
-                                            placeholder=""
-                                            tabIndex="0"
-                                            type="text"
-                                          >
-                                            <div
-                                              aria-labelledby="bx--locale-modal__filter-search"
-                                              className="bx--search bx--search--xl"
-                                              role="search"
-                                            >
-                                              <div
-                                                className="bx--search-magnifier"
-                                              >
-                                                <ForwardRef(Search16)
-                                                  className="bx--search-magnifier-icon"
-                                                >
-                                                  <Icon
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Search16)>
-                                              </div>
-                                              <label
-                                                className="bx--label"
-                                                htmlFor="bx--locale-modal__filter"
-                                                id="bx--locale-modal__filter-search"
-                                              >
-                                                Search by location or language
-                                              </label>
-                                              <input
-                                                autoComplete="off"
-                                                className="bx--search-input"
-                                                data-autoid="dds--locale-modal__filter"
-                                                id="bx--locale-modal__filter"
-                                                onChange={[Function]}
-                                                onKeyDown={[Function]}
-                                                placeholder=""
-                                                role="searchbox"
-                                                tabIndex="0"
-                                                type="text"
-                                              />
-                                              <button
-                                                aria-label="Clear search input"
-                                                className="bx--search-close bx--search-close--hidden"
-                                                onClick={[Function]}
-                                                type="button"
-                                              >
-                                                <ForwardRef(Close16)>
-                                                  <Icon
-                                                    fill="currentColor"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <svg
-                                                      aria-hidden={true}
-                                                      fill="currentColor"
-                                                      focusable="false"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <path
-                                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                      />
-                                                    </svg>
-                                                  </Icon>
-                                                </ForwardRef(Close16)>
-                                              </button>
-                                            </div>
-                                          </Search>
-                                          <p
-                                            className="bx--locale-modal__search-text"
-                                          />
-                                        </div>
-                                        <ul
-                                          className="bx--locale-modal__list"
-                                        >
-                                          <p
-                                            aria-live="assertive"
-                                            className="bx--assistive-text"
-                                            role="status"
-                                          />
-                                        </ul>
-                                      </div>
-                                    </LocaleModalCountries>
-                                  </div>
-                                </ForwardRef(ModalBody)>
-                              </div>
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                            </div>
-                          </div>
-                        </ComposedModal>
-                      </LocaleModal>
-                    </div>
-                  </LocaleButton>
-                </div>
-              </div>
-            </div>
-          </section>
-          <LegalNav
-            button={null}
-            links={Array []}
-            type="short"
-          />
-        </footer>
-      </Footer>
-    </DotcomShell>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Expressive modal Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-expressive-modal--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ExpressiveModal/__stories__/ExpressiveModal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Expressive modal: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <ExpressiveModal
-      className="bx--modal--expressive"
-      open={true}
-    >
-      <ComposedModal
-        className="bx--modal--expressive bx--modal--expressive"
-        data-autoid="dds--expressive-modal"
-        onKeyDown={[Function]}
-        open={true}
-        selectorPrimaryFocus=".bx--modal-close"
-      >
-        <div
-          aria-hidden={false}
-          className="bx--modal is-visible bx--modal--expressive bx--modal--expressive"
-          data-autoid="dds--expressive-modal"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onTransitionEnd={[Function]}
-          open={true}
-          role="presentation"
-        >
-          <div
-            aria-modal="true"
-            className="bx--modal-container"
-            role="dialog"
-          >
-            <button
-              className="bx--visually-hidden"
-              type="button"
-            >
-              Focus sentinel
-            </button>
-            <div
-              className="bx--modal-container-body"
-            >
-              <ExpressiveModalCloseBtn
-                iconDescription="Close"
-                key=".0"
-                onClick={[Function]}
-              >
-                <button
-                  className="bx--modal-close"
-                  data-autoid="dds--expressive-modal__close"
-                  onClick={[Function]}
-                  title="Close"
-                  type="button"
-                >
-                  <ForwardRef(Close20)
-                    aria-label="Close"
-                    className="bx--modal-close__icon"
-                  >
-                    <Icon
-                      aria-label="Close"
-                      className="bx--modal-close__icon"
-                      fill="currentColor"
-                      height={20}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width={20}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Close"
-                        className="bx--modal-close__icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(Close20)>
-                </button>
-              </ExpressiveModalCloseBtn>
-              <ForwardRef(ModalBody)
-                key=".1"
-              >
-                <div
-                  className="bx--modal-content"
-                >
-                  <StoryContent
-                    button="Lorem ipsum dolor"
-                    paragraph="Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit."
-                    title="Lorem ipsum dolor sit amet"
-                  >
-                    <div>
-                      <h1
-                        style={
-                          Object {
-                            "marginBottom": "16px",
-                          }
-                        }
-                      >
-                        Lorem ipsum dolor sit amet
-                      </h1>
-                      <p
-                        style={
-                          Object {
-                            "marginBottom": "48px",
-                          }
-                        }
-                      >
-                        Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit.
-                      </p>
-                      <ButtonGroup
-                        buttons={
-                          Array [
-                            Object {
-                              "copy": "Lorem ipsum dolor",
-                              "href": "",
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          ]
-                        }
-                      >
-                        <ol
-                          className="bx--buttongroup"
-                          data-autoid="dds--button-group"
-                        >
-                          <li
-                            className="bx--buttongroup-item"
-                            key="0"
-                          >
-                            <Button
-                              copy="Lorem ipsum dolor"
-                              data-autoid="dds--button-group-0"
-                              href=""
-                              isExpressive={true}
-                              kind="primary"
-                              renderIcon={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-pressed={null}
-                                className="bx--btn bx--btn--primary bx--btn--expressive"
-                                copy="Lorem ipsum dolor"
-                                data-autoid="dds--button-group-0"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                                type="button"
-                              >
-                                Lorem ipsum dolor
-                                <ForwardRef(ArrowRight20)
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                >
-                                  <Icon
-                                    aria-hidden="true"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--btn__icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </button>
-                            </Button>
-                          </li>
-                        </ol>
-                      </ButtonGroup>
-                    </div>
-                  </StoryContent>
-                </div>
-              </ForwardRef(ModalBody)>
-            </div>
-            <button
-              className="bx--visually-hidden"
-              type="button"
-            >
-              Focus sentinel
-            </button>
-          </div>
-        </div>
-      </ComposedModal>
-    </ExpressiveModal>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Expressive modal Expanded 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-expressive-modal--expanded",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ExpressiveModal/__stories__/ExpressiveModal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Expressive modal: Expanded",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <ExpressiveModal
-      className="bx--modal--expressive"
-      fullwidth={true}
-      open={true}
-    >
-      <ComposedModal
-        className="bx--modal--expressive bx--modal--expressive bx--modal--expressive--fullwidth"
-        data-autoid="dds--expressive-modal"
-        onKeyDown={[Function]}
-        open={true}
-        selectorPrimaryFocus=".bx--modal-close"
-      >
-        <div
-          aria-hidden={false}
-          className="bx--modal is-visible bx--modal--expressive bx--modal--expressive bx--modal--expressive--fullwidth"
-          data-autoid="dds--expressive-modal"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onKeyDown={[Function]}
-          onTransitionEnd={[Function]}
-          open={true}
-          role="presentation"
-        >
-          <div
-            aria-modal="true"
-            className="bx--modal-container"
-            role="dialog"
-          >
-            <button
-              className="bx--visually-hidden"
-              type="button"
-            >
-              Focus sentinel
-            </button>
-            <div
-              className="bx--modal-container-body"
-            >
-              <ExpressiveModalCloseBtn
-                iconDescription="Close"
-                key=".0"
-                onClick={[Function]}
-              >
-                <button
-                  className="bx--modal-close"
-                  data-autoid="dds--expressive-modal__close"
-                  onClick={[Function]}
-                  title="Close"
-                  type="button"
-                >
-                  <ForwardRef(Close20)
-                    aria-label="Close"
-                    className="bx--modal-close__icon"
-                  >
-                    <Icon
-                      aria-label="Close"
-                      className="bx--modal-close__icon"
-                      fill="currentColor"
-                      height={20}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width={20}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Close"
-                        className="bx--modal-close__icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(Close20)>
-                </button>
-              </ExpressiveModalCloseBtn>
-              <ForwardRef(ModalBody)
-                key=".1"
-              >
-                <div
-                  className="bx--modal-content"
-                >
-                  <StoryContent
-                    button="Lorem ipsum dolor"
-                    paragraph="Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit."
-                    title="Lorem ipsum dolor sit amet"
-                  >
-                    <div>
-                      <h1
-                        style={
-                          Object {
-                            "marginBottom": "16px",
-                          }
-                        }
-                      >
-                        Lorem ipsum dolor sit amet
-                      </h1>
-                      <p
-                        style={
-                          Object {
-                            "marginBottom": "48px",
-                          }
-                        }
-                      >
-                        Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit.
-                      </p>
-                      <ButtonGroup
-                        buttons={
-                          Array [
-                            Object {
-                              "copy": "Lorem ipsum dolor",
-                              "href": "",
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          ]
-                        }
-                      >
-                        <ol
-                          className="bx--buttongroup"
-                          data-autoid="dds--button-group"
-                        >
-                          <li
-                            className="bx--buttongroup-item"
-                            key="0"
-                          >
-                            <Button
-                              copy="Lorem ipsum dolor"
-                              data-autoid="dds--button-group-0"
-                              href=""
-                              isExpressive={true}
-                              kind="primary"
-                              renderIcon={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-pressed={null}
-                                className="bx--btn bx--btn--primary bx--btn--expressive"
-                                copy="Lorem ipsum dolor"
-                                data-autoid="dds--button-group-0"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                                type="button"
-                              >
-                                Lorem ipsum dolor
-                                <ForwardRef(ArrowRight20)
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                >
-                                  <Icon
-                                    aria-hidden="true"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--btn__icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </button>
-                            </Button>
-                          </li>
-                        </ol>
-                      </ButtonGroup>
-                    </div>
-                  </StoryContent>
-                </div>
-              </ForwardRef(ModalBody)>
-            </div>
-            <button
-              className="bx--visually-hidden"
-              type="button"
-            >
-              Focus sentinel
-            </button>
-          </div>
-        </div>
-      </ComposedModal>
-    </ExpressiveModal>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Feature card Large 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-feature-card--large",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/FeatureCard/__stories__/FeatureCard.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Feature card: Large",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-2"
-          style={
-            Object {
-              "paddingTop": "20px",
-            }
-          }
-        >
-          <FeatureCard
-            card={
-              Object {
-                "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
-                "cta": Object {
-                  "href": "https://www.example.com",
-                  "icon": Object {
-                    "src": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                  },
-                },
-                "eyebrow": "This is an eyebrow",
-                "heading": "Explore AI use cases in all industries",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--2x1--1312x656--002.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": "sm",
-                      "src": "fpo--2x1--320x160--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": "md",
-                      "src": "fpo--2x1--480x240--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": 991,
-                      "src": "fpo--1x1--720x720--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": "lg",
-                      "src": "fpo--2x1--1312x656--002.jpg",
-                    },
-                    Object {
-                      "breakpoint": "xlg",
-                      "src": "fpo--1x1--1584x1584--002.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            size="large"
-          >
-            <div
-              className="bx--feature-card-large"
-              data-autoid="dds--feature-card-large"
-            >
-              <Card
-                copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
-                cta={
-                  Object {
-                    "href": "https://www.example.com",
-                    "icon": Object {
-                      "src": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                    },
-                  }
-                }
-                customClassName="bx--feature-card-large__card"
-                eyebrow="This is an eyebrow"
-                heading="Explore AI use cases in all industries"
-                image={
-                  Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--2x1--1312x656--002.jpg",
-                    "sources": Array [
-                      Object {
-                        "breakpoint": "sm",
-                        "src": "fpo--2x1--320x160--002.jpg",
-                      },
-                      Object {
-                        "breakpoint": "md",
-                        "src": "fpo--2x1--480x240--002.jpg",
-                      },
-                      Object {
-                        "breakpoint": 991,
-                        "src": "fpo--1x1--720x720--002.jpg",
-                      },
-                      Object {
-                        "breakpoint": "lg",
-                        "src": "fpo--2x1--1312x656--002.jpg",
-                      },
-                      Object {
-                        "breakpoint": "xlg",
-                        "src": "fpo--1x1--1584x1584--002.jpg",
-                      },
-                    ],
-                  }
-                }
-              >
-                <Tile
-                  className="bx--card bx--feature-card-large__card"
-                  data-autoid="dds--card"
-                  light={false}
-                >
-                  <div
-                    className="bx--tile bx--card bx--feature-card-large__card"
-                    data-autoid="dds--card"
-                  >
-                    <Image
-                      alt="Image alt text"
-                      classname="bx--card__img"
-                      defaultSrc="fpo--2x1--1312x656--002.jpg"
-                      sources={
-                        Array [
-                          Object {
-                            "breakpoint": "sm",
-                            "src": "fpo--2x1--320x160--002.jpg",
-                          },
-                          Object {
-                            "breakpoint": "md",
-                            "src": "fpo--2x1--480x240--002.jpg",
-                          },
-                          Object {
-                            "breakpoint": 991,
-                            "src": "fpo--1x1--720x720--002.jpg",
-                          },
-                          Object {
-                            "breakpoint": "lg",
-                            "src": "fpo--2x1--1312x656--002.jpg",
-                          },
-                          Object {
-                            "breakpoint": "xlg",
-                            "src": "fpo--1x1--1584x1584--002.jpg",
-                          },
-                        ]
-                      }
-                    >
-                      <div
-                        className="bx--image"
-                        data-autoid="dds--image__longdescription"
-                      >
-                        <picture>
-                          <source
-                            key="0"
-                            media="(min-width: 1312px)"
-                            srcSet="fpo--1x1--1584x1584--002.jpg"
-                          />
-                          <source
-                            key="1"
-                            media="(min-width: 1056px)"
-                            srcSet="fpo--2x1--1312x656--002.jpg"
-                          />
-                          <source
-                            key="2"
-                            media="(min-width: 991px)"
-                            srcSet="fpo--1x1--720x720--002.jpg"
-                          />
-                          <source
-                            key="3"
-                            media="(min-width: 672px)"
-                            srcSet="fpo--2x1--480x240--002.jpg"
-                          />
-                          <source
-                            key="4"
-                            media="(min-width: 320px)"
-                            srcSet="fpo--2x1--320x160--002.jpg"
-                          />
-                          <img
-                            alt="Image alt text"
-                            className="bx--image__img bx--card__img"
-                            src="fpo--2x1--1312x656--002.jpg"
-                          />
-                        </picture>
-                      </div>
-                    </Image>
-                    <div
-                      className="bx--card__wrapper"
-                    >
-                      <div
-                        className="bx--card__content"
-                      >
-                        <p
-                          className="bx--card__eyebrow"
-                        >
-                          This is an eyebrow
-                        </p>
-                        <h3
-                          className="bx--card__heading"
-                        >
-                          Explore AI use cases in all industries
-                        </h3>
-                        <div
-                          className="bx--card__copy"
-                          dangerouslySetInnerHTML={
-                            Object {
-                              "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p> ",
-                            }
-                          }
-                        />
-                        <Link
-                          aria-label="Explore AI use cases in all industries"
-                          className="bx--card__footer"
-                          href="https://www.example.com"
-                          target={null}
-                        >
-                          <a
-                            aria-label="Explore AI use cases in all industries"
-                            className="bx--link bx--card__footer"
-                            href="https://www.example.com"
-                            rel={null}
-                            target={null}
-                          >
-                            <ForwardRef(ArrowRight20)
-                              className="bx--card__cta"
-                              src={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                            >
-                              <Icon
-                                className="bx--card__cta"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                src={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  }
-                                }
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--card__cta"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  src={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Link>
-                      </div>
-                    </div>
-                  </div>
-                </Tile>
-              </Card>
-            </div>
-          </FeatureCard>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Feature card Medium 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-feature-card--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/FeatureCard/__stories__/FeatureCard.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Feature card: Medium",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-          style={
-            Object {
-              "paddingTop": "20px",
-            }
-          }
-        >
-          <FeatureCard
-            card={
-              Object {
-                "cta": Object {
-                  "href": "https://www.example.com",
-                  "icon": Object {
-                    "src": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                  },
-                },
-                "heading": "Explore AI use cases in all industries",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                },
-              }
-            }
-            size="medium"
-          >
-            <div
-              className="bx--feature-card"
-              data-autoid="dds--feature-card"
-            >
-              <Card
-                cta={
-                  Object {
-                    "href": "https://www.example.com",
-                    "icon": Object {
-                      "src": Object {
-                        "$$typeof": Symbol(react.forward_ref),
-                        "render": [Function],
-                      },
-                    },
-                  }
-                }
-                customClassName="bx--feature-card__card"
-                heading="Explore AI use cases in all industries"
-                image={
-                  Object {
-                    "alt": "Image alt text",
-                    "defaultSrc": "fpo--1x1--720x720--004.jpg",
-                  }
-                }
-              >
-                <Tile
-                  className="bx--card bx--feature-card__card"
-                  data-autoid="dds--card"
-                  light={false}
-                >
-                  <div
-                    className="bx--tile bx--card bx--feature-card__card"
-                    data-autoid="dds--card"
-                  >
-                    <Image
-                      alt="Image alt text"
-                      classname="bx--card__img"
-                      defaultSrc="fpo--1x1--720x720--004.jpg"
-                    >
-                      <div
-                        className="bx--image"
-                        data-autoid="dds--image__longdescription"
-                      >
-                        <picture>
-                          <img
-                            alt="Image alt text"
-                            className="bx--image__img bx--card__img"
-                            src="fpo--1x1--720x720--004.jpg"
-                          />
-                        </picture>
-                      </div>
-                    </Image>
-                    <div
-                      className="bx--card__wrapper"
-                    >
-                      <div
-                        className="bx--card__content"
-                      >
-                        <h3
-                          className="bx--card__heading"
-                        >
-                          Explore AI use cases in all industries
-                        </h3>
-                        <Link
-                          aria-label="Explore AI use cases in all industries"
-                          className="bx--card__footer"
-                          href="https://www.example.com"
-                          target={null}
-                        >
-                          <a
-                            aria-label="Explore AI use cases in all industries"
-                            className="bx--link bx--card__footer"
-                            href="https://www.example.com"
-                            rel={null}
-                            target={null}
-                          >
-                            <ForwardRef(ArrowRight20)
-                              className="bx--card__cta"
-                              src={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                            >
-                              <Icon
-                                className="bx--card__cta"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                src={
-                                  Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  }
-                                }
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--card__cta"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  src={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Link>
-                      </div>
-                    </div>
-                  </div>
-                </Tile>
-              </Card>
-            </div>
-          </FeatureCard>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Feature section Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-feature-section--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/FeatureSection/__stories__/FeatureSection.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-feature-section"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Filter panel Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-filter-panel--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/FilterPanel/__stories__/FilterPanel.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-filter-panel"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--default",
-      "__isArgsStory": true,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Footer
-      disableLocaleButton={false}
-      footerProps={null}
-      langCode={null}
-      languageInitialItem={
-        Object {
-          "id": "en",
-          "text": "English",
-        }
-      }
-      languageItems={null}
-      mastheadProps={null}
-      navigation={null}
-      type="default"
-    >
-      <footer
-        className="bx--footer"
-        data-autoid="dds--footer"
-      >
-        <section
-          className="bx--footer__main"
-        >
-          <div
-            className="bx--footer__main-container"
-          >
-            <div
-              className="bx--footer__logo-container"
-            >
-              <div
-                className="bx--footer__logo-row"
-              >
-                <Logo>
-                  <div
-                    className="bx--footer-logo"
-                    data-autoid="dds--footer-logo"
-                  >
-                    <a
-                      className="bx--footer-logo__link"
-                      data-autoid="dds--footer-logo__link"
-                      href="https://www.ibm.com/"
-                    >
-                      <FooterLogo
-                        className="bx--footer-logo__logo"
-                        height="65"
-                        viewBox="0 0 157 65"
-                        width="157"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <title>
-                            IBM Logo
-                          </title>
-                          <path
-                            d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                          />
-                        </svg>
-                      </FooterLogo>
-                    </a>
-                  </div>
-                </Logo>
-                <LocaleButton
-                  aria=""
-                  displayLang=""
-                >
-                  <div
-                    className="bx--locale-btn__container"
-                  >
-                    <Button
-                      aria-label=""
-                      className="bx--locale-btn"
-                      data-autoid="dds--locale-btn"
-                      iconDescription="Earth Filled Icon"
-                      kind="tertiary"
-                      onClick={[Function]}
-                      renderIcon={
-                        Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        }
-                      }
-                    >
-                      <button
-                        aria-describedby={null}
-                        aria-label=""
-                        aria-pressed={null}
-                        className="bx--locale-btn bx--btn bx--btn--tertiary"
-                        data-autoid="dds--locale-btn"
-                        disabled={false}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        tabIndex={0}
-                        type="button"
-                      >
-                        <ForwardRef(EarthFilled20)
-                          aria-hidden="true"
-                          aria-label="Earth Filled Icon"
-                          className="bx--btn__icon"
-                        >
-                          <Icon
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              role="img"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(EarthFilled20)>
-                      </button>
-                    </Button>
-                    <LocaleModal
-                      closeFunc={[Function]}
-                      isOpen={false}
-                      localeData={null}
-                      localeDisplay={null}
-                      setIsOpen={[Function]}
-                    >
-                      <ComposedModal
-                        className="bx--locale-modal-container"
-                        data-autoid="dds--locale-modal"
-                        onClose={[Function]}
-                        onKeyDown={[Function]}
-                        open={false}
-                        selectorPrimaryFocus=".bx--modal-close"
-                      >
-                        <div
-                          aria-hidden={true}
-                          className="bx--modal bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          role="presentation"
-                        >
-                          <div
-                            aria-label={
-                              Array [
-                                undefined,
-                                <ForwardRef(EarthFilled16)
-                                  className="bx--locale-modal__label-globe"
-                                />,
-                              ]
-                            }
-                            aria-modal="true"
-                            className="bx--modal-container"
-                            role="dialog"
-                          >
-                            <button
-                              className="bx--visually-hidden"
-                              type="button"
-                            >
-                              Focus sentinel
-                            </button>
-                            <div
-                              className="bx--modal-container-body"
-                            >
-                              <ModalHeader
-                                buttonOnClick={[Function]}
-                                closeModal={[Function]}
-                                iconDescription="Close"
-                                key=".0"
-                                label={
-                                  Array [
-                                    undefined,
-                                    <ForwardRef(EarthFilled16)
-                                      className="bx--locale-modal__label-globe"
-                                    />,
-                                  ]
-                                }
-                              >
-                                <div
-                                  className="bx--modal-header"
-                                >
-                                  <h2
-                                    className="bx--modal-header__label bx--type-delta"
-                                  >
-                                    <ForwardRef(EarthFilled16)
-                                      className="bx--locale-modal__label-globe"
-                                      key="earthfilled"
-                                    >
-                                      <Icon
-                                        className="bx--locale-modal__label-globe"
-                                        fill="currentColor"
-                                        height={16}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(EarthFilled16)>
-                                  </h2>
-                                  <button
-                                    aria-label="Close"
-                                    className="bx--modal-close"
-                                    onClick={[Function]}
-                                    title="Close"
-                                    type="button"
-                                  >
-                                    <ForwardRef(Close20)
-                                      className="bx--modal-close__icon"
-                                    >
-                                      <Icon
-                                        className="bx--modal-close__icon"
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(Close20)>
-                                  </button>
-                                </div>
-                              </ModalHeader>
-                              <ForwardRef(ModalBody)
-                                className="bx--locale-modal "
-                                key=".1"
-                              >
-                                <div
-                                  className="bx--modal-content bx--locale-modal "
-                                >
-                                  <LocaleModalRegions
-                                    regionList={Array []}
-                                    setClearResults={[Function]}
-                                    setCurrentRegion={[Function]}
-                                    setIsFiltering={[Function]}
-                                  >
-                                    <div
-                                      className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                    >
-                                      <div
-                                        className="bx--row"
-                                      />
-                                    </div>
-                                  </LocaleModalRegions>
-                                  <LocaleModalCountries
-                                    regionList={Array []}
-                                    searchLabel="Search by location or language"
-                                    setClearResults={[Function]}
-                                  >
-                                    <div
-                                      className="bx--locale-modal__filter"
-                                    >
-                                      <div
-                                        className="bx--locale-modal__search"
-                                      >
-                                        <Search
-                                          closeButtonLabelText="Clear search input"
-                                          data-autoid="dds--locale-modal__filter"
-                                          id="bx--locale-modal__filter"
-                                          labelText="Search by location or language"
-                                          onChange={[Function]}
-                                          onClear={[Function]}
-                                          placeholder=""
-                                          tabIndex="0"
-                                          type="text"
-                                        >
-                                          <div
-                                            aria-labelledby="bx--locale-modal__filter-search"
-                                            className="bx--search bx--search--xl"
-                                            role="search"
-                                          >
-                                            <div
-                                              className="bx--search-magnifier"
-                                            >
-                                              <ForwardRef(Search16)
-                                                className="bx--search-magnifier-icon"
-                                              >
-                                                <Icon
-                                                  className="bx--search-magnifier-icon"
-                                                  fill="currentColor"
-                                                  height={16}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(Search16)>
-                                            </div>
-                                            <label
-                                              className="bx--label"
-                                              htmlFor="bx--locale-modal__filter"
-                                              id="bx--locale-modal__filter-search"
-                                            >
-                                              Search by location or language
-                                            </label>
-                                            <input
-                                              autoComplete="off"
-                                              className="bx--search-input"
-                                              data-autoid="dds--locale-modal__filter"
-                                              id="bx--locale-modal__filter"
-                                              onChange={[Function]}
-                                              onKeyDown={[Function]}
-                                              placeholder=""
-                                              role="searchbox"
-                                              tabIndex="0"
-                                              type="text"
-                                            />
-                                            <button
-                                              aria-label="Clear search input"
-                                              className="bx--search-close bx--search-close--hidden"
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <ForwardRef(Close16)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={16}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(Close16)>
-                                            </button>
-                                          </div>
-                                        </Search>
-                                        <p
-                                          className="bx--locale-modal__search-text"
-                                        />
-                                      </div>
-                                      <ul
-                                        className="bx--locale-modal__list"
-                                      >
-                                        <p
-                                          aria-live="assertive"
-                                          className="bx--assistive-text"
-                                          role="status"
-                                        />
-                                      </ul>
-                                    </div>
-                                  </LocaleModalCountries>
-                                </div>
-                              </ForwardRef(ModalBody)>
-                            </div>
-                            <button
-                              className="bx--visually-hidden"
-                              type="button"
-                            >
-                              Focus sentinel
-                            </button>
-                          </div>
-                        </div>
-                      </ComposedModal>
-                    </LocaleModal>
-                  </div>
-                </LocaleButton>
-              </div>
-            </div>
-            <FooterNav
-              disableLocaleButton={false}
-              groups={Array []}
-            />
-          </div>
-        </section>
-        <LegalNav
-          button={null}
-          links={Array []}
-          type="default"
-        />
-      </footer>
-    </Footer>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Default language only 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--default-language-only",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Default language only",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="default-language-only"
-    >
-      <Default
-        items={
-          Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ]
-        }
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        languageOnly={true}
-        type="default"
-      >
-        <Footer
-          footerProps={null}
-          langCode={null}
-          languageInitialItem={
-            Object {
-              "id": "en",
-              "text": "English",
-            }
-          }
-          languageItems={
-            Array [
-              Object {
-                "id": "ar",
-                "text": "Arabic / عربية",
-              },
-              Object {
-                "id": "bs",
-                "text": "Bosnian / Bosanski",
-              },
-              Object {
-                "id": "bg",
-                "text": "Bulgarian / Български",
-              },
-              Object {
-                "id": "ca",
-                "text": "Catalan / Català",
-              },
-              Object {
-                "id": "zh",
-                "text": "Chinese Simplified / 简体中文",
-              },
-              Object {
-                "id": "zh-tw",
-                "text": "Chinese Traditional / 繁體中文",
-              },
-              Object {
-                "id": "hr",
-                "text": "Croatian / Hrvatski",
-              },
-              Object {
-                "id": "cs",
-                "text": "Czech / Čeština",
-              },
-              Object {
-                "id": "da",
-                "text": "Danish / Dansk",
-              },
-              Object {
-                "id": "nl",
-                "text": "Dutch / Nederlands",
-              },
-              Object {
-                "id": "en",
-                "text": "English",
-              },
-              Object {
-                "id": "fi",
-                "text": "Finnish / Suomi",
-              },
-              Object {
-                "id": "fr",
-                "text": "French / Français",
-              },
-              Object {
-                "id": "de",
-                "text": "German / Deutsch",
-              },
-              Object {
-                "id": "el",
-                "text": "Greek / Ελληνικά",
-              },
-              Object {
-                "id": "he",
-                "text": "Hebrew / עברית",
-              },
-              Object {
-                "id": "hu",
-                "text": "Hungarian / Magyar",
-              },
-              Object {
-                "id": "it",
-                "text": "Italian / Italiano",
-              },
-              Object {
-                "id": "ja",
-                "text": "Japanese / 日本語",
-              },
-              Object {
-                "id": "kk",
-                "text": "Kazakh / Қазақша",
-              },
-              Object {
-                "id": "ko",
-                "text": "Korean / 한국어",
-              },
-              Object {
-                "id": "mk",
-                "text": "Macedonian / македонски",
-              },
-              Object {
-                "id": "no",
-                "text": "Norwegian / Norsk",
-              },
-              Object {
-                "id": "pl",
-                "text": "Polish / polski",
-              },
-              Object {
-                "id": "pt-br",
-                "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-              },
-              Object {
-                "id": "pt",
-                "text": "Portuguese/Portugal / Português/Portugal",
-              },
-              Object {
-                "id": "ro",
-                "text": "Romanian / Română",
-              },
-              Object {
-                "id": "ru",
-                "text": "Russian / Русский",
-              },
-              Object {
-                "id": "sr",
-                "text": "Serbian / srpski",
-              },
-              Object {
-                "id": "sk",
-                "text": "Slovak / Slovenčina",
-              },
-              Object {
-                "id": "sl",
-                "text": "Slovenian / Slovenščina",
-              },
-              Object {
-                "id": "es",
-                "text": "Spanish / Español",
-              },
-              Object {
-                "id": "sv",
-                "text": "Swedish / Svenska",
-              },
-              Object {
-                "id": "th",
-                "text": "Thai / ภาษาไทย",
-              },
-              Object {
-                "id": "tr",
-                "text": "Turkish / Türkçe",
-              },
-              Object {
-                "id": "vi",
-                "text": "Vietnamese / Tiếng Việt",
-              },
-            ]
-          }
-          languageOnly={true}
-          mastheadProps={null}
-          navigation={null}
-          type="default"
-        >
-          <footer
-            className="bx--footer"
-            data-autoid="dds--footer"
-          >
-            <section
-              className="bx--footer__main"
-            >
-              <div
-                className="bx--footer__main-container"
-              >
-                <div
-                  className="bx--footer__logo-container"
-                >
-                  <div
-                    className="bx--footer__logo-row"
-                  >
-                    <Logo>
-                      <div
-                        className="bx--footer-logo"
-                        data-autoid="dds--footer-logo"
-                      >
-                        <a
-                          className="bx--footer-logo__link"
-                          data-autoid="dds--footer-logo__link"
-                          href="https://www.ibm.com/"
-                        >
-                          <FooterLogo
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              className="bx--footer-logo__logo"
-                              height="65"
-                              viewBox="0 0 157 65"
-                              width="157"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <title>
-                                IBM Logo
-                              </title>
-                              <path
-                                d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                              />
-                            </svg>
-                          </FooterLogo>
-                        </a>
-                      </div>
-                    </Logo>
-                    <LanguageSelector
-                      callback={[Function]}
-                      initialSelectedItem={
-                        Object {
-                          "id": "en",
-                          "text": "English",
-                        }
-                      }
-                      items={
-                        Array [
-                          Object {
-                            "id": "ar",
-                            "text": "Arabic / عربية",
-                          },
-                          Object {
-                            "id": "bs",
-                            "text": "Bosnian / Bosanski",
-                          },
-                          Object {
-                            "id": "bg",
-                            "text": "Bulgarian / Български",
-                          },
-                          Object {
-                            "id": "ca",
-                            "text": "Catalan / Català",
-                          },
-                          Object {
-                            "id": "zh",
-                            "text": "Chinese Simplified / 简体中文",
-                          },
-                          Object {
-                            "id": "zh-tw",
-                            "text": "Chinese Traditional / 繁體中文",
-                          },
-                          Object {
-                            "id": "hr",
-                            "text": "Croatian / Hrvatski",
-                          },
-                          Object {
-                            "id": "cs",
-                            "text": "Czech / Čeština",
-                          },
-                          Object {
-                            "id": "da",
-                            "text": "Danish / Dansk",
-                          },
-                          Object {
-                            "id": "nl",
-                            "text": "Dutch / Nederlands",
-                          },
-                          Object {
-                            "id": "en",
-                            "text": "English",
-                          },
-                          Object {
-                            "id": "fi",
-                            "text": "Finnish / Suomi",
-                          },
-                          Object {
-                            "id": "fr",
-                            "text": "French / Français",
-                          },
-                          Object {
-                            "id": "de",
-                            "text": "German / Deutsch",
-                          },
-                          Object {
-                            "id": "el",
-                            "text": "Greek / Ελληνικά",
-                          },
-                          Object {
-                            "id": "he",
-                            "text": "Hebrew / עברית",
-                          },
-                          Object {
-                            "id": "hu",
-                            "text": "Hungarian / Magyar",
-                          },
-                          Object {
-                            "id": "it",
-                            "text": "Italian / Italiano",
-                          },
-                          Object {
-                            "id": "ja",
-                            "text": "Japanese / 日本語",
-                          },
-                          Object {
-                            "id": "kk",
-                            "text": "Kazakh / Қазақша",
-                          },
-                          Object {
-                            "id": "ko",
-                            "text": "Korean / 한국어",
-                          },
-                          Object {
-                            "id": "mk",
-                            "text": "Macedonian / македонски",
-                          },
-                          Object {
-                            "id": "no",
-                            "text": "Norwegian / Norsk",
-                          },
-                          Object {
-                            "id": "pl",
-                            "text": "Polish / polski",
-                          },
-                          Object {
-                            "id": "pt-br",
-                            "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                          },
-                          Object {
-                            "id": "pt",
-                            "text": "Portuguese/Portugal / Português/Portugal",
-                          },
-                          Object {
-                            "id": "ro",
-                            "text": "Romanian / Română",
-                          },
-                          Object {
-                            "id": "ru",
-                            "text": "Russian / Русский",
-                          },
-                          Object {
-                            "id": "sr",
-                            "text": "Serbian / srpski",
-                          },
-                          Object {
-                            "id": "sk",
-                            "text": "Slovak / Slovenčina",
-                          },
-                          Object {
-                            "id": "sl",
-                            "text": "Slovenian / Slovenščina",
-                          },
-                          Object {
-                            "id": "es",
-                            "text": "Spanish / Español",
-                          },
-                          Object {
-                            "id": "sv",
-                            "text": "Swedish / Svenska",
-                          },
-                          Object {
-                            "id": "th",
-                            "text": "Thai / ภาษาไทย",
-                          },
-                          Object {
-                            "id": "tr",
-                            "text": "Turkish / Türkçe",
-                          },
-                          Object {
-                            "id": "vi",
-                            "text": "Vietnamese / Tiếng Việt",
-                          },
-                        ]
-                      }
-                      labelText="Choose a language"
-                    >
-                      <div
-                        className="bx--language-selector__container"
-                      >
-                        <ComboBox
-                          ariaLabel="Choose an item"
-                          className="bx--language-selector"
-                          data-autoid="dds--language-selector"
-                          direction="top"
-                          disabled={false}
-                          id="dds-language-selector"
-                          initialSelectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          itemToElement={null}
-                          itemToString={[Function]}
-                          items={
-                            Array [
-                              Object {
-                                "id": "ar",
-                                "text": "Arabic / عربية",
-                              },
-                              Object {
-                                "id": "bs",
-                                "text": "Bosnian / Bosanski",
-                              },
-                              Object {
-                                "id": "bg",
-                                "text": "Bulgarian / Български",
-                              },
-                              Object {
-                                "id": "ca",
-                                "text": "Catalan / Català",
-                              },
-                              Object {
-                                "id": "zh",
-                                "text": "Chinese Simplified / 简体中文",
-                              },
-                              Object {
-                                "id": "zh-tw",
-                                "text": "Chinese Traditional / 繁體中文",
-                              },
-                              Object {
-                                "id": "hr",
-                                "text": "Croatian / Hrvatski",
-                              },
-                              Object {
-                                "id": "cs",
-                                "text": "Czech / Čeština",
-                              },
-                              Object {
-                                "id": "da",
-                                "text": "Danish / Dansk",
-                              },
-                              Object {
-                                "id": "nl",
-                                "text": "Dutch / Nederlands",
-                              },
-                              Object {
-                                "id": "en",
-                                "text": "English",
-                              },
-                              Object {
-                                "id": "fi",
-                                "text": "Finnish / Suomi",
-                              },
-                              Object {
-                                "id": "fr",
-                                "text": "French / Français",
-                              },
-                              Object {
-                                "id": "de",
-                                "text": "German / Deutsch",
-                              },
-                              Object {
-                                "id": "el",
-                                "text": "Greek / Ελληνικά",
-                              },
-                              Object {
-                                "id": "he",
-                                "text": "Hebrew / עברית",
-                              },
-                              Object {
-                                "id": "hu",
-                                "text": "Hungarian / Magyar",
-                              },
-                              Object {
-                                "id": "it",
-                                "text": "Italian / Italiano",
-                              },
-                              Object {
-                                "id": "ja",
-                                "text": "Japanese / 日本語",
-                              },
-                              Object {
-                                "id": "kk",
-                                "text": "Kazakh / Қазақша",
-                              },
-                              Object {
-                                "id": "ko",
-                                "text": "Korean / 한국어",
-                              },
-                              Object {
-                                "id": "mk",
-                                "text": "Macedonian / македонски",
-                              },
-                              Object {
-                                "id": "no",
-                                "text": "Norwegian / Norsk",
-                              },
-                              Object {
-                                "id": "pl",
-                                "text": "Polish / polski",
-                              },
-                              Object {
-                                "id": "pt-br",
-                                "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                              },
-                              Object {
-                                "id": "pt",
-                                "text": "Portuguese/Portugal / Português/Portugal",
-                              },
-                              Object {
-                                "id": "ro",
-                                "text": "Romanian / Română",
-                              },
-                              Object {
-                                "id": "ru",
-                                "text": "Russian / Русский",
-                              },
-                              Object {
-                                "id": "sr",
-                                "text": "Serbian / srpski",
-                              },
-                              Object {
-                                "id": "sk",
-                                "text": "Slovak / Slovenčina",
-                              },
-                              Object {
-                                "id": "sl",
-                                "text": "Slovenian / Slovenščina",
-                              },
-                              Object {
-                                "id": "es",
-                                "text": "Spanish / Español",
-                              },
-                              Object {
-                                "id": "sv",
-                                "text": "Swedish / Svenska",
-                              },
-                              Object {
-                                "id": "th",
-                                "text": "Thai / ภาษาไทย",
-                              },
-                              Object {
-                                "id": "tr",
-                                "text": "Turkish / Türkçe",
-                              },
-                              Object {
-                                "id": "vi",
-                                "text": "Vietnamese / Tiếng Việt",
-                              },
-                            ]
-                          }
-                          light={false}
-                          onChange={[Function]}
-                          placeholder="Choose a language"
-                          selectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          shouldFilterItem={[Function]}
-                          size="xl"
-                          titleText="Choose a language"
-                          type="default"
-                        >
-                          <Downshift
-                            defaultHighlightedIndex={null}
-                            defaultIsOpen={false}
-                            environment={[Window]}
-                            getA11yStatusMessage={[Function]}
-                            initialSelectedItem={
-                              Object {
-                                "id": "en",
-                                "text": "English",
-                              }
-                            }
-                            inputId="dds-language-selector"
-                            inputValue="English"
-                            itemToString={[Function]}
-                            onChange={[Function]}
-                            onInputValueChange={[Function]}
-                            onOuterClick={[Function]}
-                            onSelect={[Function]}
-                            onStateChange={[Function]}
-                            onUserAction={[Function]}
-                            scrollIntoView={[Function]}
-                            selectedItem={
-                              Object {
-                                "id": "en",
-                                "text": "English",
-                              }
-                            }
-                            selectedItemChanged={[Function]}
-                            stateReducer={[Function]}
-                            suppressRefError={false}
-                          >
-                            <div
-                              className="bx--list-box__wrapper"
-                            >
-                              <Text
-                                as="label"
-                                className="bx--label"
-                                htmlFor="dds-language-selector"
-                                id="downshift-5-label"
-                              >
-                                <label
-                                  className="bx--label"
-                                  dir="auto"
-                                  htmlFor="dds-language-selector"
-                                  id="downshift-5-label"
-                                >
-                                  Choose a language
-                                </label>
-                              </Text>
-                              <ListBox
-                                className="bx--combo-box bx--language-selector bx--list-box--up"
-                                disabled={false}
-                                isOpen={false}
-                                light={false}
-                                size="xl"
-                                type="default"
-                              >
-                                <div
-                                  className="bx--combo-box bx--language-selector bx--list-box--up bx--list-box bx--list-box--xl"
-                                  onClick={[Function]}
-                                  onKeyDown={[Function]}
-                                >
-                                  <div
-                                    className="bx--list-box__field"
-                                  >
-                                    <input
-                                      aria-activedescendant={null}
-                                      aria-autocomplete="list"
-                                      aria-controls={null}
-                                      aria-expanded={false}
-                                      aria-haspopup="listbox"
-                                      aria-labelledby={null}
-                                      autoComplete="off"
-                                      className="bx--text-input"
-                                      data-autoid="dds--language-selector"
-                                      disabled={false}
-                                      id="dds-language-selector"
-                                      onBlur={[Function]}
-                                      onChange={[Function]}
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      placeholder="Choose a language"
-                                      role="combobox"
-                                      tabIndex="0"
-                                      type="text"
-                                      value="English"
-                                    />
-                                    <ListBoxSelection
-                                      clearSelection={[Function]}
-                                      disabled={false}
-                                      onClearSelection={[Function]}
-                                      translateWithId={[Function]}
-                                    >
-                                      <button
-                                        aria-label="Clear selected item"
-                                        className="bx--list-box__selection"
-                                        onClick={[Function]}
-                                        tabIndex={-1}
-                                        title="Clear selected item"
-                                        type="button"
-                                      >
-                                        <ForwardRef(Close16)>
-                                          <Icon
-                                            fill="currentColor"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={16}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Close16)>
-                                      </button>
-                                    </ListBoxSelection>
-                                    <ListBoxTrigger
-                                      aria-haspopup={true}
-                                      aria-label="open menu"
-                                      data-toggle={true}
-                                      disabled={false}
-                                      isOpen={false}
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseUp={[Function]}
-                                      role="button"
-                                      translateWithId={[Function]}
-                                      type="button"
-                                    >
-                                      <button
-                                        aria-haspopup={true}
-                                        aria-label="Open"
-                                        className="bx--list-box__menu-icon"
-                                        data-toggle={true}
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseUp={[Function]}
-                                        role="button"
-                                        tabIndex="-1"
-                                        title="Open"
-                                        type="button"
-                                      >
-                                        <ForwardRef(ChevronDown16)>
-                                          <Icon
-                                            fill="currentColor"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={16}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ChevronDown16)>
-                                      </button>
-                                    </ListBoxTrigger>
-                                  </div>
-                                  <ListBoxMenu
-                                    aria-label="Choose an item"
-                                    aria-labelledby={null}
-                                    id="downshift-5-menu"
-                                    role="listbox"
-                                  >
-                                    <div
-                                      aria-label="Choose an item"
-                                      aria-labelledby={null}
-                                      className="bx--list-box__menu"
-                                      id="downshift-5-menu"
-                                      role="listbox"
-                                    />
-                                  </ListBoxMenu>
-                                </div>
-                              </ListBox>
-                            </div>
-                          </Downshift>
-                        </ComboBox>
-                        <Select
-                          aria-label="Choose a language"
-                          className="bx--language-selector"
-                          data-autoid="dds--language-selector__select"
-                          defaultValue="en"
-                          disabled={false}
-                          helperText=""
-                          id="bx--language-selector"
-                          inline={false}
-                          invalid={false}
-                          invalidText=""
-                          labelText="Choose a language"
-                          light={false}
-                          onChange={[Function]}
-                          text="English"
-                        >
-                          <div
-                            className="bx--form-item"
-                          >
-                            <div
-                              className="bx--select bx--language-selector"
-                            >
-                              <label
-                                className="bx--label"
-                                htmlFor="bx--language-selector"
-                              >
-                                Choose a language
-                              </label>
-                              <div
-                                className="bx--select-input__wrapper"
-                                data-invalid={null}
-                              >
-                                <select
-                                  aria-label="Choose a language"
-                                  className="bx--select-input"
-                                  data-autoid="dds--language-selector__select"
-                                  defaultValue="en"
-                                  id="bx--language-selector"
-                                  onChange={[Function]}
-                                  text="English"
-                                >
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="0"
-                                    text="Arabic / عربية"
-                                    value="ar"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ar"
-                                    >
-                                      Arabic / عربية
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="1"
-                                    text="Bosnian / Bosanski"
-                                    value="bs"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="bs"
-                                    >
-                                      Bosnian / Bosanski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="2"
-                                    text="Bulgarian / Български"
-                                    value="bg"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="bg"
-                                    >
-                                      Bulgarian / Български
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="3"
-                                    text="Catalan / Català"
-                                    value="ca"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ca"
-                                    >
-                                      Catalan / Català
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="4"
-                                    text="Chinese Simplified / 简体中文"
-                                    value="zh"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="zh"
-                                    >
-                                      Chinese Simplified / 简体中文
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="5"
-                                    text="Chinese Traditional / 繁體中文"
-                                    value="zh-tw"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="zh-tw"
-                                    >
-                                      Chinese Traditional / 繁體中文
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="6"
-                                    text="Croatian / Hrvatski"
-                                    value="hr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="hr"
-                                    >
-                                      Croatian / Hrvatski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="7"
-                                    text="Czech / Čeština"
-                                    value="cs"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="cs"
-                                    >
-                                      Czech / Čeština
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="8"
-                                    text="Danish / Dansk"
-                                    value="da"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="da"
-                                    >
-                                      Danish / Dansk
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="9"
-                                    text="Dutch / Nederlands"
-                                    value="nl"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="nl"
-                                    >
-                                      Dutch / Nederlands
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="10"
-                                    text="English"
-                                    value="en"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="en"
-                                    >
-                                      English
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="11"
-                                    text="Finnish / Suomi"
-                                    value="fi"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="fi"
-                                    >
-                                      Finnish / Suomi
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="12"
-                                    text="French / Français"
-                                    value="fr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="fr"
-                                    >
-                                      French / Français
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="13"
-                                    text="German / Deutsch"
-                                    value="de"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="de"
-                                    >
-                                      German / Deutsch
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="14"
-                                    text="Greek / Ελληνικά"
-                                    value="el"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="el"
-                                    >
-                                      Greek / Ελληνικά
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="15"
-                                    text="Hebrew / עברית"
-                                    value="he"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="he"
-                                    >
-                                      Hebrew / עברית
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="16"
-                                    text="Hungarian / Magyar"
-                                    value="hu"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="hu"
-                                    >
-                                      Hungarian / Magyar
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="17"
-                                    text="Italian / Italiano"
-                                    value="it"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="it"
-                                    >
-                                      Italian / Italiano
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="18"
-                                    text="Japanese / 日本語"
-                                    value="ja"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ja"
-                                    >
-                                      Japanese / 日本語
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="19"
-                                    text="Kazakh / Қазақша"
-                                    value="kk"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="kk"
-                                    >
-                                      Kazakh / Қазақша
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="20"
-                                    text="Korean / 한국어"
-                                    value="ko"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ko"
-                                    >
-                                      Korean / 한국어
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="21"
-                                    text="Macedonian / македонски"
-                                    value="mk"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="mk"
-                                    >
-                                      Macedonian / македонски
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="22"
-                                    text="Norwegian / Norsk"
-                                    value="no"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="no"
-                                    >
-                                      Norwegian / Norsk
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="23"
-                                    text="Polish / polski"
-                                    value="pl"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="pl"
-                                    >
-                                      Polish / polski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="24"
-                                    text="Portuguese/Brazil/Brazil / Português/Brasil"
-                                    value="pt-br"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="pt-br"
-                                    >
-                                      Portuguese/Brazil/Brazil / Português/Brasil
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="25"
-                                    text="Portuguese/Portugal / Português/Portugal"
-                                    value="pt"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="pt"
-                                    >
-                                      Portuguese/Portugal / Português/Portugal
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="26"
-                                    text="Romanian / Română"
-                                    value="ro"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ro"
-                                    >
-                                      Romanian / Română
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="27"
-                                    text="Russian / Русский"
-                                    value="ru"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ru"
-                                    >
-                                      Russian / Русский
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="28"
-                                    text="Serbian / srpski"
-                                    value="sr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sr"
-                                    >
-                                      Serbian / srpski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="29"
-                                    text="Slovak / Slovenčina"
-                                    value="sk"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sk"
-                                    >
-                                      Slovak / Slovenčina
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="30"
-                                    text="Slovenian / Slovenščina"
-                                    value="sl"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sl"
-                                    >
-                                      Slovenian / Slovenščina
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="31"
-                                    text="Spanish / Español"
-                                    value="es"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="es"
-                                    >
-                                      Spanish / Español
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="32"
-                                    text="Swedish / Svenska"
-                                    value="sv"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sv"
-                                    >
-                                      Swedish / Svenska
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="33"
-                                    text="Thai / ภาษาไทย"
-                                    value="th"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="th"
-                                    >
-                                      Thai / ภาษาไทย
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="34"
-                                    text="Turkish / Türkçe"
-                                    value="tr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="tr"
-                                    >
-                                      Turkish / Türkçe
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="35"
-                                    text="Vietnamese / Tiếng Việt"
-                                    value="vi"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="vi"
-                                    >
-                                      Vietnamese / Tiếng Việt
-                                    </option>
-                                  </SelectItem>
-                                </select>
-                                <ForwardRef(ChevronDown16)
-                                  className="bx--select__arrow"
-                                >
-                                  <Icon
-                                    className="bx--select__arrow"
-                                    fill="currentColor"
-                                    height={16}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--select__arrow"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={16}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ChevronDown16)>
-                              </div>
-                            </div>
-                          </div>
-                        </Select>
-                      </div>
-                    </LanguageSelector>
-                  </div>
-                </div>
-                <FooterNav
-                  disableLocaleButton={false}
-                  groups={Array []}
-                />
-              </div>
-            </section>
-            <LegalNav
-              button={null}
-              links={Array []}
-              type="default"
-            />
-          </footer>
-        </Footer>
-      </Default>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Default with adjunct legal links 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--default-with-adjunct-legal-links",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Default with adjunct legal links",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Footer
-      adjunctLinks={
-        Array [
-          Object {
-            "title": "Read the updated Terms of Use.",
-            "url": "https://www.example.com",
-          },
-          Object {
-            "title": "Read Learning Technologies Privacy",
-            "url": "https://www.example.com",
-          },
-        ]
-      }
-      disableLocaleButton={false}
-      footerProps={null}
-      langCode={null}
-      languageInitialItem={
-        Object {
-          "id": "en",
-          "text": "English",
-        }
-      }
-      languageItems={null}
-      mastheadProps={null}
-      navigation={null}
-      type="default"
-    >
-      <footer
-        className="bx--footer"
-        data-autoid="dds--footer"
-      >
-        <section
-          className="bx--footer__main"
-        >
-          <div
-            className="bx--footer__main-container"
-          >
-            <div
-              className="bx--footer__logo-container"
-            >
-              <div
-                className="bx--footer__logo-row"
-              >
-                <Logo>
-                  <div
-                    className="bx--footer-logo"
-                    data-autoid="dds--footer-logo"
-                  >
-                    <a
-                      className="bx--footer-logo__link"
-                      data-autoid="dds--footer-logo__link"
-                      href="https://www.ibm.com/"
-                    >
-                      <FooterLogo
-                        className="bx--footer-logo__logo"
-                        height="65"
-                        viewBox="0 0 157 65"
-                        width="157"
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          className="bx--footer-logo__logo"
-                          height="65"
-                          viewBox="0 0 157 65"
-                          width="157"
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <title>
-                            IBM Logo
-                          </title>
-                          <path
-                            d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                          />
-                        </svg>
-                      </FooterLogo>
-                    </a>
-                  </div>
-                </Logo>
-                <LocaleButton
-                  aria=""
-                  displayLang=""
-                >
-                  <div
-                    className="bx--locale-btn__container"
-                  >
-                    <Button
-                      aria-label=""
-                      className="bx--locale-btn"
-                      data-autoid="dds--locale-btn"
-                      iconDescription="Earth Filled Icon"
-                      kind="tertiary"
-                      onClick={[Function]}
-                      renderIcon={
-                        Object {
-                          "$$typeof": Symbol(react.forward_ref),
-                          "render": [Function],
-                        }
-                      }
-                    >
-                      <button
-                        aria-describedby={null}
-                        aria-label=""
-                        aria-pressed={null}
-                        className="bx--locale-btn bx--btn bx--btn--tertiary"
-                        data-autoid="dds--locale-btn"
-                        disabled={false}
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        onFocus={[Function]}
-                        onMouseEnter={[Function]}
-                        onMouseLeave={[Function]}
-                        tabIndex={0}
-                        type="button"
-                      >
-                        <ForwardRef(EarthFilled20)
-                          aria-hidden="true"
-                          aria-label="Earth Filled Icon"
-                          className="bx--btn__icon"
-                        >
-                          <Icon
-                            aria-hidden="true"
-                            aria-label="Earth Filled Icon"
-                            className="bx--btn__icon"
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              role="img"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(EarthFilled20)>
-                      </button>
-                    </Button>
-                    <LocaleModal
-                      closeFunc={[Function]}
-                      isOpen={false}
-                      localeData={null}
-                      localeDisplay={null}
-                      setIsOpen={[Function]}
-                    >
-                      <ComposedModal
-                        className="bx--locale-modal-container"
-                        data-autoid="dds--locale-modal"
-                        onClose={[Function]}
-                        onKeyDown={[Function]}
-                        open={false}
-                        selectorPrimaryFocus=".bx--modal-close"
-                      >
-                        <div
-                          aria-hidden={true}
-                          className="bx--modal bx--locale-modal-container"
-                          data-autoid="dds--locale-modal"
-                          onBlur={[Function]}
-                          onClick={[Function]}
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          role="presentation"
-                        >
-                          <div
-                            aria-label={
-                              Array [
-                                undefined,
-                                <ForwardRef(EarthFilled16)
-                                  className="bx--locale-modal__label-globe"
-                                />,
-                              ]
-                            }
-                            aria-modal="true"
-                            className="bx--modal-container"
-                            role="dialog"
-                          >
-                            <button
-                              className="bx--visually-hidden"
-                              type="button"
-                            >
-                              Focus sentinel
-                            </button>
-                            <div
-                              className="bx--modal-container-body"
-                            >
-                              <ModalHeader
-                                buttonOnClick={[Function]}
-                                closeModal={[Function]}
-                                iconDescription="Close"
-                                key=".0"
-                                label={
-                                  Array [
-                                    undefined,
-                                    <ForwardRef(EarthFilled16)
-                                      className="bx--locale-modal__label-globe"
-                                    />,
-                                  ]
-                                }
-                              >
-                                <div
-                                  className="bx--modal-header"
-                                >
-                                  <h2
-                                    className="bx--modal-header__label bx--type-delta"
-                                  >
-                                    <ForwardRef(EarthFilled16)
-                                      className="bx--locale-modal__label-globe"
-                                      key="earthfilled"
-                                    >
-                                      <Icon
-                                        className="bx--locale-modal__label-globe"
-                                        fill="currentColor"
-                                        height={16}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={16}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="bx--locale-modal__label-globe"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={16}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={16}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(EarthFilled16)>
-                                  </h2>
-                                  <button
-                                    aria-label="Close"
-                                    className="bx--modal-close"
-                                    onClick={[Function]}
-                                    title="Close"
-                                    type="button"
-                                  >
-                                    <ForwardRef(Close20)
-                                      className="bx--modal-close__icon"
-                                    >
-                                      <Icon
-                                        className="bx--modal-close__icon"
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(Close20)>
-                                  </button>
-                                </div>
-                              </ModalHeader>
-                              <ForwardRef(ModalBody)
-                                className="bx--locale-modal "
-                                key=".1"
-                              >
-                                <div
-                                  className="bx--modal-content bx--locale-modal "
-                                >
-                                  <LocaleModalRegions
-                                    regionList={Array []}
-                                    setClearResults={[Function]}
-                                    setCurrentRegion={[Function]}
-                                    setIsFiltering={[Function]}
-                                  >
-                                    <div
-                                      className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                    >
-                                      <div
-                                        className="bx--row"
-                                      />
-                                    </div>
-                                  </LocaleModalRegions>
-                                  <LocaleModalCountries
-                                    regionList={Array []}
-                                    searchLabel="Search by location or language"
-                                    setClearResults={[Function]}
-                                  >
-                                    <div
-                                      className="bx--locale-modal__filter"
-                                    >
-                                      <div
-                                        className="bx--locale-modal__search"
-                                      >
-                                        <Search
-                                          closeButtonLabelText="Clear search input"
-                                          data-autoid="dds--locale-modal__filter"
-                                          id="bx--locale-modal__filter"
-                                          labelText="Search by location or language"
-                                          onChange={[Function]}
-                                          onClear={[Function]}
-                                          placeholder=""
-                                          tabIndex="0"
-                                          type="text"
-                                        >
-                                          <div
-                                            aria-labelledby="bx--locale-modal__filter-search"
-                                            className="bx--search bx--search--xl"
-                                            role="search"
-                                          >
-                                            <div
-                                              className="bx--search-magnifier"
-                                            >
-                                              <ForwardRef(Search16)
-                                                className="bx--search-magnifier-icon"
-                                              >
-                                                <Icon
-                                                  className="bx--search-magnifier-icon"
-                                                  fill="currentColor"
-                                                  height={16}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 16 16"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--search-magnifier-icon"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 16 16"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(Search16)>
-                                            </div>
-                                            <label
-                                              className="bx--label"
-                                              htmlFor="bx--locale-modal__filter"
-                                              id="bx--locale-modal__filter-search"
-                                            >
-                                              Search by location or language
-                                            </label>
-                                            <input
-                                              autoComplete="off"
-                                              className="bx--search-input"
-                                              data-autoid="dds--locale-modal__filter"
-                                              id="bx--locale-modal__filter"
-                                              onChange={[Function]}
-                                              onKeyDown={[Function]}
-                                              placeholder=""
-                                              role="searchbox"
-                                              tabIndex="0"
-                                              type="text"
-                                            />
-                                            <button
-                                              aria-label="Clear search input"
-                                              className="bx--search-close bx--search-close--hidden"
-                                              onClick={[Function]}
-                                              type="button"
-                                            >
-                                              <ForwardRef(Close16)>
-                                                <Icon
-                                                  fill="currentColor"
-                                                  height={16}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={16}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={16}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={16}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(Close16)>
-                                            </button>
-                                          </div>
-                                        </Search>
-                                        <p
-                                          className="bx--locale-modal__search-text"
-                                        />
-                                      </div>
-                                      <ul
-                                        className="bx--locale-modal__list"
-                                      >
-                                        <p
-                                          aria-live="assertive"
-                                          className="bx--assistive-text"
-                                          role="status"
-                                        />
-                                      </ul>
-                                    </div>
-                                  </LocaleModalCountries>
-                                </div>
-                              </ForwardRef(ModalBody)>
-                            </div>
-                            <button
-                              className="bx--visually-hidden"
-                              type="button"
-                            >
-                              Focus sentinel
-                            </button>
-                          </div>
-                        </div>
-                      </ComposedModal>
-                    </LocaleModal>
-                  </div>
-                </LocaleButton>
-              </div>
-            </div>
-            <FooterNav
-              disableLocaleButton={false}
-              groups={Array []}
-            />
-          </div>
-        </section>
-        <LegalNav
-          adjunctLinks={
-            Array [
-              Object {
-                "title": "Read the updated Terms of Use.",
-                "url": "https://www.example.com",
-              },
-              Object {
-                "title": "Read Learning Technologies Privacy",
-                "url": "https://www.example.com",
-              },
-            ]
-          }
-          button={null}
-          links={Array []}
-          type="default"
-        />
-      </footer>
-    </Footer>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Micro 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--micro",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Micro",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "minHeight": "100%",
-        }
-      }
-    >
-      <Default
-        adjunctLinks={false}
-        disableLocaleButton={false}
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        type="micro"
-      >
-        <Footer
-          adjunctLinks={false}
-          disableLocaleButton={false}
-          footerProps={null}
-          langCode={null}
-          languageInitialItem={
-            Object {
-              "id": "en",
-              "text": "English",
-            }
-          }
-          languageItems={null}
-          mastheadProps={null}
-          navigation={null}
-          type="micro"
-        >
-          <footer
-            className="bx--footer bx--footer--micro"
-            data-autoid="dds--footer"
-          >
-            <section
-              className="bx--footer__main"
-            >
-              <div
-                className="bx--footer__main-container"
-              >
-                <div
-                  className="bx--footer__logo-container"
-                >
-                  <div
-                    className="bx--footer__logo-row"
-                  />
-                </div>
-              </div>
-            </section>
-            <LegalNav
-              adjunctLinks={false}
-              button={
-                <LocaleButton
-                  aria=""
-                  displayLang=""
-                />
-              }
-              links={Array []}
-              type="micro"
-            />
-          </footer>
-        </Footer>
-      </Default>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Micro language only 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--micro-language-only",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Micro language only",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "minHeight": "100%",
-        }
-      }
-    >
-      <Default
-        items={
-          Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ]
-        }
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        languageOnly={true}
-        type="micro"
-      >
-        <Footer
-          footerProps={null}
-          langCode={null}
-          languageInitialItem={
-            Object {
-              "id": "en",
-              "text": "English",
-            }
-          }
-          languageItems={
-            Array [
-              Object {
-                "id": "ar",
-                "text": "Arabic / عربية",
-              },
-              Object {
-                "id": "bs",
-                "text": "Bosnian / Bosanski",
-              },
-              Object {
-                "id": "bg",
-                "text": "Bulgarian / Български",
-              },
-              Object {
-                "id": "ca",
-                "text": "Catalan / Català",
-              },
-              Object {
-                "id": "zh",
-                "text": "Chinese Simplified / 简体中文",
-              },
-              Object {
-                "id": "zh-tw",
-                "text": "Chinese Traditional / 繁體中文",
-              },
-              Object {
-                "id": "hr",
-                "text": "Croatian / Hrvatski",
-              },
-              Object {
-                "id": "cs",
-                "text": "Czech / Čeština",
-              },
-              Object {
-                "id": "da",
-                "text": "Danish / Dansk",
-              },
-              Object {
-                "id": "nl",
-                "text": "Dutch / Nederlands",
-              },
-              Object {
-                "id": "en",
-                "text": "English",
-              },
-              Object {
-                "id": "fi",
-                "text": "Finnish / Suomi",
-              },
-              Object {
-                "id": "fr",
-                "text": "French / Français",
-              },
-              Object {
-                "id": "de",
-                "text": "German / Deutsch",
-              },
-              Object {
-                "id": "el",
-                "text": "Greek / Ελληνικά",
-              },
-              Object {
-                "id": "he",
-                "text": "Hebrew / עברית",
-              },
-              Object {
-                "id": "hu",
-                "text": "Hungarian / Magyar",
-              },
-              Object {
-                "id": "it",
-                "text": "Italian / Italiano",
-              },
-              Object {
-                "id": "ja",
-                "text": "Japanese / 日本語",
-              },
-              Object {
-                "id": "kk",
-                "text": "Kazakh / Қазақша",
-              },
-              Object {
-                "id": "ko",
-                "text": "Korean / 한국어",
-              },
-              Object {
-                "id": "mk",
-                "text": "Macedonian / македонски",
-              },
-              Object {
-                "id": "no",
-                "text": "Norwegian / Norsk",
-              },
-              Object {
-                "id": "pl",
-                "text": "Polish / polski",
-              },
-              Object {
-                "id": "pt-br",
-                "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-              },
-              Object {
-                "id": "pt",
-                "text": "Portuguese/Portugal / Português/Portugal",
-              },
-              Object {
-                "id": "ro",
-                "text": "Romanian / Română",
-              },
-              Object {
-                "id": "ru",
-                "text": "Russian / Русский",
-              },
-              Object {
-                "id": "sr",
-                "text": "Serbian / srpski",
-              },
-              Object {
-                "id": "sk",
-                "text": "Slovak / Slovenčina",
-              },
-              Object {
-                "id": "sl",
-                "text": "Slovenian / Slovenščina",
-              },
-              Object {
-                "id": "es",
-                "text": "Spanish / Español",
-              },
-              Object {
-                "id": "sv",
-                "text": "Swedish / Svenska",
-              },
-              Object {
-                "id": "th",
-                "text": "Thai / ภาษาไทย",
-              },
-              Object {
-                "id": "tr",
-                "text": "Turkish / Türkçe",
-              },
-              Object {
-                "id": "vi",
-                "text": "Vietnamese / Tiếng Việt",
-              },
-            ]
-          }
-          languageOnly={true}
-          mastheadProps={null}
-          navigation={null}
-          type="micro"
-        >
-          <footer
-            className="bx--footer bx--footer--micro"
-            data-autoid="dds--footer"
-          >
-            <section
-              className="bx--footer__main"
-            >
-              <div
-                className="bx--footer__main-container"
-              >
-                <div
-                  className="bx--footer__logo-container"
-                >
-                  <div
-                    className="bx--footer__logo-row"
-                  />
-                </div>
-              </div>
-            </section>
-            <LegalNav
-              button={
-                <LanguageSelector
-                  callback={[Function]}
-                  initialSelectedItem={
-                    Object {
-                      "id": "en",
-                      "text": "English",
-                    }
-                  }
-                  items={
-                    Array [
-                      Object {
-                        "id": "ar",
-                        "text": "Arabic / عربية",
-                      },
-                      Object {
-                        "id": "bs",
-                        "text": "Bosnian / Bosanski",
-                      },
-                      Object {
-                        "id": "bg",
-                        "text": "Bulgarian / Български",
-                      },
-                      Object {
-                        "id": "ca",
-                        "text": "Catalan / Català",
-                      },
-                      Object {
-                        "id": "zh",
-                        "text": "Chinese Simplified / 简体中文",
-                      },
-                      Object {
-                        "id": "zh-tw",
-                        "text": "Chinese Traditional / 繁體中文",
-                      },
-                      Object {
-                        "id": "hr",
-                        "text": "Croatian / Hrvatski",
-                      },
-                      Object {
-                        "id": "cs",
-                        "text": "Czech / Čeština",
-                      },
-                      Object {
-                        "id": "da",
-                        "text": "Danish / Dansk",
-                      },
-                      Object {
-                        "id": "nl",
-                        "text": "Dutch / Nederlands",
-                      },
-                      Object {
-                        "id": "en",
-                        "text": "English",
-                      },
-                      Object {
-                        "id": "fi",
-                        "text": "Finnish / Suomi",
-                      },
-                      Object {
-                        "id": "fr",
-                        "text": "French / Français",
-                      },
-                      Object {
-                        "id": "de",
-                        "text": "German / Deutsch",
-                      },
-                      Object {
-                        "id": "el",
-                        "text": "Greek / Ελληνικά",
-                      },
-                      Object {
-                        "id": "he",
-                        "text": "Hebrew / עברית",
-                      },
-                      Object {
-                        "id": "hu",
-                        "text": "Hungarian / Magyar",
-                      },
-                      Object {
-                        "id": "it",
-                        "text": "Italian / Italiano",
-                      },
-                      Object {
-                        "id": "ja",
-                        "text": "Japanese / 日本語",
-                      },
-                      Object {
-                        "id": "kk",
-                        "text": "Kazakh / Қазақша",
-                      },
-                      Object {
-                        "id": "ko",
-                        "text": "Korean / 한국어",
-                      },
-                      Object {
-                        "id": "mk",
-                        "text": "Macedonian / македонски",
-                      },
-                      Object {
-                        "id": "no",
-                        "text": "Norwegian / Norsk",
-                      },
-                      Object {
-                        "id": "pl",
-                        "text": "Polish / polski",
-                      },
-                      Object {
-                        "id": "pt-br",
-                        "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                      },
-                      Object {
-                        "id": "pt",
-                        "text": "Portuguese/Portugal / Português/Portugal",
-                      },
-                      Object {
-                        "id": "ro",
-                        "text": "Romanian / Română",
-                      },
-                      Object {
-                        "id": "ru",
-                        "text": "Russian / Русский",
-                      },
-                      Object {
-                        "id": "sr",
-                        "text": "Serbian / srpski",
-                      },
-                      Object {
-                        "id": "sk",
-                        "text": "Slovak / Slovenčina",
-                      },
-                      Object {
-                        "id": "sl",
-                        "text": "Slovenian / Slovenščina",
-                      },
-                      Object {
-                        "id": "es",
-                        "text": "Spanish / Español",
-                      },
-                      Object {
-                        "id": "sv",
-                        "text": "Swedish / Svenska",
-                      },
-                      Object {
-                        "id": "th",
-                        "text": "Thai / ภาษาไทย",
-                      },
-                      Object {
-                        "id": "tr",
-                        "text": "Turkish / Türkçe",
-                      },
-                      Object {
-                        "id": "vi",
-                        "text": "Vietnamese / Tiếng Việt",
-                      },
-                    ]
-                  }
-                  labelText="Choose a language"
-                />
-              }
-              links={Array []}
-              type="micro"
-            />
-          </footer>
-        </Footer>
-      </Default>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Short 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--short",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Short",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "minHeight": "100%",
-        }
-      }
-    >
-      <Default
-        disableLocaleButton={false}
-        isCustom={false}
-        navigation={null}
-        type="short"
-      >
-        <Footer
-          disableLocaleButton={false}
-          footerProps={null}
-          langCode={null}
-          languageItems={null}
-          mastheadProps={null}
-          navigation={null}
-          type="short"
-        >
-          <footer
-            className="bx--footer bx--footer--short"
-            data-autoid="dds--footer"
-          >
-            <section
-              className="bx--footer__main"
-            >
-              <div
-                className="bx--footer__main-container"
-              >
-                <div
-                  className="bx--footer__logo-container"
-                >
-                  <div
-                    className="bx--footer__logo-row"
-                  >
-                    <Logo>
-                      <div
-                        className="bx--footer-logo"
-                        data-autoid="dds--footer-logo"
-                      >
-                        <a
-                          className="bx--footer-logo__link"
-                          data-autoid="dds--footer-logo__link"
-                          href="https://www.ibm.com/"
-                        >
-                          <FooterLogo
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              className="bx--footer-logo__logo"
-                              height="65"
-                              viewBox="0 0 157 65"
-                              width="157"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <title>
-                                IBM Logo
-                              </title>
-                              <path
-                                d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                              />
-                            </svg>
-                          </FooterLogo>
-                        </a>
-                      </div>
-                    </Logo>
-                    <LocaleButton
-                      aria=""
-                      displayLang=""
-                    >
-                      <div
-                        className="bx--locale-btn__container"
-                      >
-                        <Button
-                          aria-label=""
-                          className="bx--locale-btn"
-                          data-autoid="dds--locale-btn"
-                          iconDescription="Earth Filled Icon"
-                          kind="tertiary"
-                          onClick={[Function]}
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                        >
-                          <button
-                            aria-describedby={null}
-                            aria-label=""
-                            aria-pressed={null}
-                            className="bx--locale-btn bx--btn bx--btn--tertiary"
-                            data-autoid="dds--locale-btn"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                            type="button"
-                          >
-                            <ForwardRef(EarthFilled20)
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  aria-label="Earth Filled Icon"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  role="img"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(EarthFilled20)>
-                          </button>
-                        </Button>
-                        <LocaleModal
-                          closeFunc={[Function]}
-                          isOpen={false}
-                          localeData={null}
-                          localeDisplay={null}
-                          setIsOpen={[Function]}
-                        >
-                          <ComposedModal
-                            className="bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            selectorPrimaryFocus=".bx--modal-close"
-                          >
-                            <div
-                              aria-hidden={true}
-                              className="bx--modal bx--locale-modal-container"
-                              data-autoid="dds--locale-modal"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              open={false}
-                              role="presentation"
-                            >
-                              <div
-                                aria-label={
-                                  Array [
-                                    undefined,
-                                    <ForwardRef(EarthFilled16)
-                                      className="bx--locale-modal__label-globe"
-                                    />,
-                                  ]
-                                }
-                                aria-modal="true"
-                                className="bx--modal-container"
-                                role="dialog"
-                              >
-                                <button
-                                  className="bx--visually-hidden"
-                                  type="button"
-                                >
-                                  Focus sentinel
-                                </button>
-                                <div
-                                  className="bx--modal-container-body"
-                                >
-                                  <ModalHeader
-                                    buttonOnClick={[Function]}
-                                    closeModal={[Function]}
-                                    iconDescription="Close"
-                                    key=".0"
-                                    label={
-                                      Array [
-                                        undefined,
-                                        <ForwardRef(EarthFilled16)
-                                          className="bx--locale-modal__label-globe"
-                                        />,
-                                      ]
-                                    }
-                                  >
-                                    <div
-                                      className="bx--modal-header"
-                                    >
-                                      <h2
-                                        className="bx--modal-header__label bx--type-delta"
-                                      >
-                                        <ForwardRef(EarthFilled16)
-                                          className="bx--locale-modal__label-globe"
-                                          key="earthfilled"
-                                        >
-                                          <Icon
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--locale-modal__label-globe"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={16}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(EarthFilled16)>
-                                      </h2>
-                                      <button
-                                        aria-label="Close"
-                                        className="bx--modal-close"
-                                        onClick={[Function]}
-                                        title="Close"
-                                        type="button"
-                                      >
-                                        <ForwardRef(Close20)
-                                          className="bx--modal-close__icon"
-                                        >
-                                          <Icon
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--modal-close__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Close20)>
-                                      </button>
-                                    </div>
-                                  </ModalHeader>
-                                  <ForwardRef(ModalBody)
-                                    className="bx--locale-modal "
-                                    key=".1"
-                                  >
-                                    <div
-                                      className="bx--modal-content bx--locale-modal "
-                                    >
-                                      <LocaleModalRegions
-                                        regionList={Array []}
-                                        setClearResults={[Function]}
-                                        setCurrentRegion={[Function]}
-                                        setIsFiltering={[Function]}
-                                      >
-                                        <div
-                                          className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                        >
-                                          <div
-                                            className="bx--row"
-                                          />
-                                        </div>
-                                      </LocaleModalRegions>
-                                      <LocaleModalCountries
-                                        regionList={Array []}
-                                        searchLabel="Search by location or language"
-                                        setClearResults={[Function]}
-                                      >
-                                        <div
-                                          className="bx--locale-modal__filter"
-                                        >
-                                          <div
-                                            className="bx--locale-modal__search"
-                                          >
-                                            <Search
-                                              closeButtonLabelText="Clear search input"
-                                              data-autoid="dds--locale-modal__filter"
-                                              id="bx--locale-modal__filter"
-                                              labelText="Search by location or language"
-                                              onChange={[Function]}
-                                              onClear={[Function]}
-                                              placeholder=""
-                                              tabIndex="0"
-                                              type="text"
-                                            >
-                                              <div
-                                                aria-labelledby="bx--locale-modal__filter-search"
-                                                className="bx--search bx--search--xl"
-                                                role="search"
-                                              >
-                                                <div
-                                                  className="bx--search-magnifier"
-                                                >
-                                                  <ForwardRef(Search16)
-                                                    className="bx--search-magnifier-icon"
-                                                  >
-                                                    <Icon
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--search-magnifier-icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={16}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 16 16"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(Search16)>
-                                                </div>
-                                                <label
-                                                  className="bx--label"
-                                                  htmlFor="bx--locale-modal__filter"
-                                                  id="bx--locale-modal__filter-search"
-                                                >
-                                                  Search by location or language
-                                                </label>
-                                                <input
-                                                  autoComplete="off"
-                                                  className="bx--search-input"
-                                                  data-autoid="dds--locale-modal__filter"
-                                                  id="bx--locale-modal__filter"
-                                                  onChange={[Function]}
-                                                  onKeyDown={[Function]}
-                                                  placeholder=""
-                                                  role="searchbox"
-                                                  tabIndex="0"
-                                                  type="text"
-                                                />
-                                                <button
-                                                  aria-label="Clear search input"
-                                                  className="bx--search-close bx--search-close--hidden"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <ForwardRef(Close16)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={16}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(Close16)>
-                                                </button>
-                                              </div>
-                                            </Search>
-                                            <p
-                                              className="bx--locale-modal__search-text"
-                                            />
-                                          </div>
-                                          <ul
-                                            className="bx--locale-modal__list"
-                                          >
-                                            <p
-                                              aria-live="assertive"
-                                              className="bx--assistive-text"
-                                              role="status"
-                                            />
-                                          </ul>
-                                        </div>
-                                      </LocaleModalCountries>
-                                    </div>
-                                  </ForwardRef(ModalBody)>
-                                </div>
-                                <button
-                                  className="bx--visually-hidden"
-                                  type="button"
-                                >
-                                  Focus sentinel
-                                </button>
-                              </div>
-                            </div>
-                          </ComposedModal>
-                        </LocaleModal>
-                      </div>
-                    </LocaleButton>
-                  </div>
-                </div>
-              </div>
-            </section>
-            <LegalNav
-              button={null}
-              links={Array []}
-              type="short"
-            />
-          </footer>
-        </Footer>
-      </Default>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Short language only 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--short-language-only",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Short language only",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "minHeight": "100%",
-        }
-      }
-    >
-      <Default
-        isCustom={false}
-        items={
-          Array [
-            Object {
-              "id": "ar",
-              "text": "Arabic / عربية",
-            },
-            Object {
-              "id": "bs",
-              "text": "Bosnian / Bosanski",
-            },
-            Object {
-              "id": "bg",
-              "text": "Bulgarian / Български",
-            },
-            Object {
-              "id": "ca",
-              "text": "Catalan / Català",
-            },
-            Object {
-              "id": "zh",
-              "text": "Chinese Simplified / 简体中文",
-            },
-            Object {
-              "id": "zh-tw",
-              "text": "Chinese Traditional / 繁體中文",
-            },
-            Object {
-              "id": "hr",
-              "text": "Croatian / Hrvatski",
-            },
-            Object {
-              "id": "cs",
-              "text": "Czech / Čeština",
-            },
-            Object {
-              "id": "da",
-              "text": "Danish / Dansk",
-            },
-            Object {
-              "id": "nl",
-              "text": "Dutch / Nederlands",
-            },
-            Object {
-              "id": "en",
-              "text": "English",
-            },
-            Object {
-              "id": "fi",
-              "text": "Finnish / Suomi",
-            },
-            Object {
-              "id": "fr",
-              "text": "French / Français",
-            },
-            Object {
-              "id": "de",
-              "text": "German / Deutsch",
-            },
-            Object {
-              "id": "el",
-              "text": "Greek / Ελληνικά",
-            },
-            Object {
-              "id": "he",
-              "text": "Hebrew / עברית",
-            },
-            Object {
-              "id": "hu",
-              "text": "Hungarian / Magyar",
-            },
-            Object {
-              "id": "it",
-              "text": "Italian / Italiano",
-            },
-            Object {
-              "id": "ja",
-              "text": "Japanese / 日本語",
-            },
-            Object {
-              "id": "kk",
-              "text": "Kazakh / Қазақша",
-            },
-            Object {
-              "id": "ko",
-              "text": "Korean / 한국어",
-            },
-            Object {
-              "id": "mk",
-              "text": "Macedonian / македонски",
-            },
-            Object {
-              "id": "no",
-              "text": "Norwegian / Norsk",
-            },
-            Object {
-              "id": "pl",
-              "text": "Polish / polski",
-            },
-            Object {
-              "id": "pt-br",
-              "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-            },
-            Object {
-              "id": "pt",
-              "text": "Portuguese/Portugal / Português/Portugal",
-            },
-            Object {
-              "id": "ro",
-              "text": "Romanian / Română",
-            },
-            Object {
-              "id": "ru",
-              "text": "Russian / Русский",
-            },
-            Object {
-              "id": "sr",
-              "text": "Serbian / srpski",
-            },
-            Object {
-              "id": "sk",
-              "text": "Slovak / Slovenčina",
-            },
-            Object {
-              "id": "sl",
-              "text": "Slovenian / Slovenščina",
-            },
-            Object {
-              "id": "es",
-              "text": "Spanish / Español",
-            },
-            Object {
-              "id": "sv",
-              "text": "Swedish / Svenska",
-            },
-            Object {
-              "id": "th",
-              "text": "Thai / ภาษาไทย",
-            },
-            Object {
-              "id": "tr",
-              "text": "Turkish / Türkçe",
-            },
-            Object {
-              "id": "vi",
-              "text": "Vietnamese / Tiếng Việt",
-            },
-          ]
-        }
-        languageInitialItem={
-          Object {
-            "id": "en",
-            "text": "English",
-          }
-        }
-        languageOnly={true}
-        navigation={null}
-        type="short"
-      >
-        <Footer
-          footerProps={null}
-          langCode={null}
-          languageInitialItem={
-            Object {
-              "id": "en",
-              "text": "English",
-            }
-          }
-          languageItems={
-            Array [
-              Object {
-                "id": "ar",
-                "text": "Arabic / عربية",
-              },
-              Object {
-                "id": "bs",
-                "text": "Bosnian / Bosanski",
-              },
-              Object {
-                "id": "bg",
-                "text": "Bulgarian / Български",
-              },
-              Object {
-                "id": "ca",
-                "text": "Catalan / Català",
-              },
-              Object {
-                "id": "zh",
-                "text": "Chinese Simplified / 简体中文",
-              },
-              Object {
-                "id": "zh-tw",
-                "text": "Chinese Traditional / 繁體中文",
-              },
-              Object {
-                "id": "hr",
-                "text": "Croatian / Hrvatski",
-              },
-              Object {
-                "id": "cs",
-                "text": "Czech / Čeština",
-              },
-              Object {
-                "id": "da",
-                "text": "Danish / Dansk",
-              },
-              Object {
-                "id": "nl",
-                "text": "Dutch / Nederlands",
-              },
-              Object {
-                "id": "en",
-                "text": "English",
-              },
-              Object {
-                "id": "fi",
-                "text": "Finnish / Suomi",
-              },
-              Object {
-                "id": "fr",
-                "text": "French / Français",
-              },
-              Object {
-                "id": "de",
-                "text": "German / Deutsch",
-              },
-              Object {
-                "id": "el",
-                "text": "Greek / Ελληνικά",
-              },
-              Object {
-                "id": "he",
-                "text": "Hebrew / עברית",
-              },
-              Object {
-                "id": "hu",
-                "text": "Hungarian / Magyar",
-              },
-              Object {
-                "id": "it",
-                "text": "Italian / Italiano",
-              },
-              Object {
-                "id": "ja",
-                "text": "Japanese / 日本語",
-              },
-              Object {
-                "id": "kk",
-                "text": "Kazakh / Қазақша",
-              },
-              Object {
-                "id": "ko",
-                "text": "Korean / 한국어",
-              },
-              Object {
-                "id": "mk",
-                "text": "Macedonian / македонски",
-              },
-              Object {
-                "id": "no",
-                "text": "Norwegian / Norsk",
-              },
-              Object {
-                "id": "pl",
-                "text": "Polish / polski",
-              },
-              Object {
-                "id": "pt-br",
-                "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-              },
-              Object {
-                "id": "pt",
-                "text": "Portuguese/Portugal / Português/Portugal",
-              },
-              Object {
-                "id": "ro",
-                "text": "Romanian / Română",
-              },
-              Object {
-                "id": "ru",
-                "text": "Russian / Русский",
-              },
-              Object {
-                "id": "sr",
-                "text": "Serbian / srpski",
-              },
-              Object {
-                "id": "sk",
-                "text": "Slovak / Slovenčina",
-              },
-              Object {
-                "id": "sl",
-                "text": "Slovenian / Slovenščina",
-              },
-              Object {
-                "id": "es",
-                "text": "Spanish / Español",
-              },
-              Object {
-                "id": "sv",
-                "text": "Swedish / Svenska",
-              },
-              Object {
-                "id": "th",
-                "text": "Thai / ภาษาไทย",
-              },
-              Object {
-                "id": "tr",
-                "text": "Turkish / Türkçe",
-              },
-              Object {
-                "id": "vi",
-                "text": "Vietnamese / Tiếng Việt",
-              },
-            ]
-          }
-          languageOnly={true}
-          mastheadProps={null}
-          navigation={null}
-          type="short"
-        >
-          <footer
-            className="bx--footer bx--footer--short"
-            data-autoid="dds--footer"
-          >
-            <section
-              className="bx--footer__main"
-            >
-              <div
-                className="bx--footer__main-container"
-              >
-                <div
-                  className="bx--footer__logo-container"
-                >
-                  <div
-                    className="bx--footer__logo-row"
-                  >
-                    <Logo>
-                      <div
-                        className="bx--footer-logo"
-                        data-autoid="dds--footer-logo"
-                      >
-                        <a
-                          className="bx--footer-logo__link"
-                          data-autoid="dds--footer-logo__link"
-                          href="https://www.ibm.com/"
-                        >
-                          <FooterLogo
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              className="bx--footer-logo__logo"
-                              height="65"
-                              viewBox="0 0 157 65"
-                              width="157"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <title>
-                                IBM Logo
-                              </title>
-                              <path
-                                d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                              />
-                            </svg>
-                          </FooterLogo>
-                        </a>
-                      </div>
-                    </Logo>
-                    <LanguageSelector
-                      callback={[Function]}
-                      initialSelectedItem={
-                        Object {
-                          "id": "en",
-                          "text": "English",
-                        }
-                      }
-                      items={
-                        Array [
-                          Object {
-                            "id": "ar",
-                            "text": "Arabic / عربية",
-                          },
-                          Object {
-                            "id": "bs",
-                            "text": "Bosnian / Bosanski",
-                          },
-                          Object {
-                            "id": "bg",
-                            "text": "Bulgarian / Български",
-                          },
-                          Object {
-                            "id": "ca",
-                            "text": "Catalan / Català",
-                          },
-                          Object {
-                            "id": "zh",
-                            "text": "Chinese Simplified / 简体中文",
-                          },
-                          Object {
-                            "id": "zh-tw",
-                            "text": "Chinese Traditional / 繁體中文",
-                          },
-                          Object {
-                            "id": "hr",
-                            "text": "Croatian / Hrvatski",
-                          },
-                          Object {
-                            "id": "cs",
-                            "text": "Czech / Čeština",
-                          },
-                          Object {
-                            "id": "da",
-                            "text": "Danish / Dansk",
-                          },
-                          Object {
-                            "id": "nl",
-                            "text": "Dutch / Nederlands",
-                          },
-                          Object {
-                            "id": "en",
-                            "text": "English",
-                          },
-                          Object {
-                            "id": "fi",
-                            "text": "Finnish / Suomi",
-                          },
-                          Object {
-                            "id": "fr",
-                            "text": "French / Français",
-                          },
-                          Object {
-                            "id": "de",
-                            "text": "German / Deutsch",
-                          },
-                          Object {
-                            "id": "el",
-                            "text": "Greek / Ελληνικά",
-                          },
-                          Object {
-                            "id": "he",
-                            "text": "Hebrew / עברית",
-                          },
-                          Object {
-                            "id": "hu",
-                            "text": "Hungarian / Magyar",
-                          },
-                          Object {
-                            "id": "it",
-                            "text": "Italian / Italiano",
-                          },
-                          Object {
-                            "id": "ja",
-                            "text": "Japanese / 日本語",
-                          },
-                          Object {
-                            "id": "kk",
-                            "text": "Kazakh / Қазақша",
-                          },
-                          Object {
-                            "id": "ko",
-                            "text": "Korean / 한국어",
-                          },
-                          Object {
-                            "id": "mk",
-                            "text": "Macedonian / македонски",
-                          },
-                          Object {
-                            "id": "no",
-                            "text": "Norwegian / Norsk",
-                          },
-                          Object {
-                            "id": "pl",
-                            "text": "Polish / polski",
-                          },
-                          Object {
-                            "id": "pt-br",
-                            "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                          },
-                          Object {
-                            "id": "pt",
-                            "text": "Portuguese/Portugal / Português/Portugal",
-                          },
-                          Object {
-                            "id": "ro",
-                            "text": "Romanian / Română",
-                          },
-                          Object {
-                            "id": "ru",
-                            "text": "Russian / Русский",
-                          },
-                          Object {
-                            "id": "sr",
-                            "text": "Serbian / srpski",
-                          },
-                          Object {
-                            "id": "sk",
-                            "text": "Slovak / Slovenčina",
-                          },
-                          Object {
-                            "id": "sl",
-                            "text": "Slovenian / Slovenščina",
-                          },
-                          Object {
-                            "id": "es",
-                            "text": "Spanish / Español",
-                          },
-                          Object {
-                            "id": "sv",
-                            "text": "Swedish / Svenska",
-                          },
-                          Object {
-                            "id": "th",
-                            "text": "Thai / ภาษาไทย",
-                          },
-                          Object {
-                            "id": "tr",
-                            "text": "Turkish / Türkçe",
-                          },
-                          Object {
-                            "id": "vi",
-                            "text": "Vietnamese / Tiếng Việt",
-                          },
-                        ]
-                      }
-                      labelText="Choose a language"
-                    >
-                      <div
-                        className="bx--language-selector__container"
-                      >
-                        <ComboBox
-                          ariaLabel="Choose an item"
-                          className="bx--language-selector"
-                          data-autoid="dds--language-selector"
-                          direction="top"
-                          disabled={false}
-                          id="dds-language-selector"
-                          initialSelectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          itemToElement={null}
-                          itemToString={[Function]}
-                          items={
-                            Array [
-                              Object {
-                                "id": "ar",
-                                "text": "Arabic / عربية",
-                              },
-                              Object {
-                                "id": "bs",
-                                "text": "Bosnian / Bosanski",
-                              },
-                              Object {
-                                "id": "bg",
-                                "text": "Bulgarian / Български",
-                              },
-                              Object {
-                                "id": "ca",
-                                "text": "Catalan / Català",
-                              },
-                              Object {
-                                "id": "zh",
-                                "text": "Chinese Simplified / 简体中文",
-                              },
-                              Object {
-                                "id": "zh-tw",
-                                "text": "Chinese Traditional / 繁體中文",
-                              },
-                              Object {
-                                "id": "hr",
-                                "text": "Croatian / Hrvatski",
-                              },
-                              Object {
-                                "id": "cs",
-                                "text": "Czech / Čeština",
-                              },
-                              Object {
-                                "id": "da",
-                                "text": "Danish / Dansk",
-                              },
-                              Object {
-                                "id": "nl",
-                                "text": "Dutch / Nederlands",
-                              },
-                              Object {
-                                "id": "en",
-                                "text": "English",
-                              },
-                              Object {
-                                "id": "fi",
-                                "text": "Finnish / Suomi",
-                              },
-                              Object {
-                                "id": "fr",
-                                "text": "French / Français",
-                              },
-                              Object {
-                                "id": "de",
-                                "text": "German / Deutsch",
-                              },
-                              Object {
-                                "id": "el",
-                                "text": "Greek / Ελληνικά",
-                              },
-                              Object {
-                                "id": "he",
-                                "text": "Hebrew / עברית",
-                              },
-                              Object {
-                                "id": "hu",
-                                "text": "Hungarian / Magyar",
-                              },
-                              Object {
-                                "id": "it",
-                                "text": "Italian / Italiano",
-                              },
-                              Object {
-                                "id": "ja",
-                                "text": "Japanese / 日本語",
-                              },
-                              Object {
-                                "id": "kk",
-                                "text": "Kazakh / Қазақша",
-                              },
-                              Object {
-                                "id": "ko",
-                                "text": "Korean / 한국어",
-                              },
-                              Object {
-                                "id": "mk",
-                                "text": "Macedonian / македонски",
-                              },
-                              Object {
-                                "id": "no",
-                                "text": "Norwegian / Norsk",
-                              },
-                              Object {
-                                "id": "pl",
-                                "text": "Polish / polski",
-                              },
-                              Object {
-                                "id": "pt-br",
-                                "text": "Portuguese/Brazil/Brazil / Português/Brasil",
-                              },
-                              Object {
-                                "id": "pt",
-                                "text": "Portuguese/Portugal / Português/Portugal",
-                              },
-                              Object {
-                                "id": "ro",
-                                "text": "Romanian / Română",
-                              },
-                              Object {
-                                "id": "ru",
-                                "text": "Russian / Русский",
-                              },
-                              Object {
-                                "id": "sr",
-                                "text": "Serbian / srpski",
-                              },
-                              Object {
-                                "id": "sk",
-                                "text": "Slovak / Slovenčina",
-                              },
-                              Object {
-                                "id": "sl",
-                                "text": "Slovenian / Slovenščina",
-                              },
-                              Object {
-                                "id": "es",
-                                "text": "Spanish / Español",
-                              },
-                              Object {
-                                "id": "sv",
-                                "text": "Swedish / Svenska",
-                              },
-                              Object {
-                                "id": "th",
-                                "text": "Thai / ภาษาไทย",
-                              },
-                              Object {
-                                "id": "tr",
-                                "text": "Turkish / Türkçe",
-                              },
-                              Object {
-                                "id": "vi",
-                                "text": "Vietnamese / Tiếng Việt",
-                              },
-                            ]
-                          }
-                          light={false}
-                          onChange={[Function]}
-                          placeholder="Choose a language"
-                          selectedItem={
-                            Object {
-                              "id": "en",
-                              "text": "English",
-                            }
-                          }
-                          shouldFilterItem={[Function]}
-                          size="xl"
-                          titleText="Choose a language"
-                          type="default"
-                        >
-                          <Downshift
-                            defaultHighlightedIndex={null}
-                            defaultIsOpen={false}
-                            environment={[Window]}
-                            getA11yStatusMessage={[Function]}
-                            initialSelectedItem={
-                              Object {
-                                "id": "en",
-                                "text": "English",
-                              }
-                            }
-                            inputId="dds-language-selector"
-                            inputValue="English"
-                            itemToString={[Function]}
-                            onChange={[Function]}
-                            onInputValueChange={[Function]}
-                            onOuterClick={[Function]}
-                            onSelect={[Function]}
-                            onStateChange={[Function]}
-                            onUserAction={[Function]}
-                            scrollIntoView={[Function]}
-                            selectedItem={
-                              Object {
-                                "id": "en",
-                                "text": "English",
-                              }
-                            }
-                            selectedItemChanged={[Function]}
-                            stateReducer={[Function]}
-                            suppressRefError={false}
-                          >
-                            <div
-                              className="bx--list-box__wrapper"
-                            >
-                              <Text
-                                as="label"
-                                className="bx--label"
-                                htmlFor="dds-language-selector"
-                                id="downshift-7-label"
-                              >
-                                <label
-                                  className="bx--label"
-                                  dir="auto"
-                                  htmlFor="dds-language-selector"
-                                  id="downshift-7-label"
-                                >
-                                  Choose a language
-                                </label>
-                              </Text>
-                              <ListBox
-                                className="bx--combo-box bx--language-selector bx--list-box--up"
-                                disabled={false}
-                                isOpen={false}
-                                light={false}
-                                size="xl"
-                                type="default"
-                              >
-                                <div
-                                  className="bx--combo-box bx--language-selector bx--list-box--up bx--list-box bx--list-box--xl"
-                                  onClick={[Function]}
-                                  onKeyDown={[Function]}
-                                >
-                                  <div
-                                    className="bx--list-box__field"
-                                  >
-                                    <input
-                                      aria-activedescendant={null}
-                                      aria-autocomplete="list"
-                                      aria-controls={null}
-                                      aria-expanded={false}
-                                      aria-haspopup="listbox"
-                                      aria-labelledby={null}
-                                      autoComplete="off"
-                                      className="bx--text-input"
-                                      data-autoid="dds--language-selector"
-                                      disabled={false}
-                                      id="dds-language-selector"
-                                      onBlur={[Function]}
-                                      onChange={[Function]}
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      placeholder="Choose a language"
-                                      role="combobox"
-                                      tabIndex="0"
-                                      type="text"
-                                      value="English"
-                                    />
-                                    <ListBoxSelection
-                                      clearSelection={[Function]}
-                                      disabled={false}
-                                      onClearSelection={[Function]}
-                                      translateWithId={[Function]}
-                                    >
-                                      <button
-                                        aria-label="Clear selected item"
-                                        className="bx--list-box__selection"
-                                        onClick={[Function]}
-                                        tabIndex={-1}
-                                        title="Clear selected item"
-                                        type="button"
-                                      >
-                                        <ForwardRef(Close16)>
-                                          <Icon
-                                            fill="currentColor"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={16}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Close16)>
-                                      </button>
-                                    </ListBoxSelection>
-                                    <ListBoxTrigger
-                                      aria-haspopup={true}
-                                      aria-label="open menu"
-                                      data-toggle={true}
-                                      disabled={false}
-                                      isOpen={false}
-                                      onBlur={[Function]}
-                                      onClick={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseUp={[Function]}
-                                      role="button"
-                                      translateWithId={[Function]}
-                                      type="button"
-                                    >
-                                      <button
-                                        aria-haspopup={true}
-                                        aria-label="Open"
-                                        className="bx--list-box__menu-icon"
-                                        data-toggle={true}
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseUp={[Function]}
-                                        role="button"
-                                        tabIndex="-1"
-                                        title="Open"
-                                        type="button"
-                                      >
-                                        <ForwardRef(ChevronDown16)>
-                                          <Icon
-                                            fill="currentColor"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 16 16"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={16}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 16 16"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ChevronDown16)>
-                                      </button>
-                                    </ListBoxTrigger>
-                                  </div>
-                                  <ListBoxMenu
-                                    aria-label="Choose an item"
-                                    aria-labelledby={null}
-                                    id="downshift-7-menu"
-                                    role="listbox"
-                                  >
-                                    <div
-                                      aria-label="Choose an item"
-                                      aria-labelledby={null}
-                                      className="bx--list-box__menu"
-                                      id="downshift-7-menu"
-                                      role="listbox"
-                                    />
-                                  </ListBoxMenu>
-                                </div>
-                              </ListBox>
-                            </div>
-                          </Downshift>
-                        </ComboBox>
-                        <Select
-                          aria-label="Choose a language"
-                          className="bx--language-selector"
-                          data-autoid="dds--language-selector__select"
-                          defaultValue="en"
-                          disabled={false}
-                          helperText=""
-                          id="bx--language-selector"
-                          inline={false}
-                          invalid={false}
-                          invalidText=""
-                          labelText="Choose a language"
-                          light={false}
-                          onChange={[Function]}
-                          text="English"
-                        >
-                          <div
-                            className="bx--form-item"
-                          >
-                            <div
-                              className="bx--select bx--language-selector"
-                            >
-                              <label
-                                className="bx--label"
-                                htmlFor="bx--language-selector"
-                              >
-                                Choose a language
-                              </label>
-                              <div
-                                className="bx--select-input__wrapper"
-                                data-invalid={null}
-                              >
-                                <select
-                                  aria-label="Choose a language"
-                                  className="bx--select-input"
-                                  data-autoid="dds--language-selector__select"
-                                  defaultValue="en"
-                                  id="bx--language-selector"
-                                  onChange={[Function]}
-                                  text="English"
-                                >
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="0"
-                                    text="Arabic / عربية"
-                                    value="ar"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ar"
-                                    >
-                                      Arabic / عربية
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="1"
-                                    text="Bosnian / Bosanski"
-                                    value="bs"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="bs"
-                                    >
-                                      Bosnian / Bosanski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="2"
-                                    text="Bulgarian / Български"
-                                    value="bg"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="bg"
-                                    >
-                                      Bulgarian / Български
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="3"
-                                    text="Catalan / Català"
-                                    value="ca"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ca"
-                                    >
-                                      Catalan / Català
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="4"
-                                    text="Chinese Simplified / 简体中文"
-                                    value="zh"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="zh"
-                                    >
-                                      Chinese Simplified / 简体中文
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="5"
-                                    text="Chinese Traditional / 繁體中文"
-                                    value="zh-tw"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="zh-tw"
-                                    >
-                                      Chinese Traditional / 繁體中文
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="6"
-                                    text="Croatian / Hrvatski"
-                                    value="hr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="hr"
-                                    >
-                                      Croatian / Hrvatski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="7"
-                                    text="Czech / Čeština"
-                                    value="cs"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="cs"
-                                    >
-                                      Czech / Čeština
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="8"
-                                    text="Danish / Dansk"
-                                    value="da"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="da"
-                                    >
-                                      Danish / Dansk
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="9"
-                                    text="Dutch / Nederlands"
-                                    value="nl"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="nl"
-                                    >
-                                      Dutch / Nederlands
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="10"
-                                    text="English"
-                                    value="en"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="en"
-                                    >
-                                      English
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="11"
-                                    text="Finnish / Suomi"
-                                    value="fi"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="fi"
-                                    >
-                                      Finnish / Suomi
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="12"
-                                    text="French / Français"
-                                    value="fr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="fr"
-                                    >
-                                      French / Français
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="13"
-                                    text="German / Deutsch"
-                                    value="de"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="de"
-                                    >
-                                      German / Deutsch
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="14"
-                                    text="Greek / Ελληνικά"
-                                    value="el"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="el"
-                                    >
-                                      Greek / Ελληνικά
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="15"
-                                    text="Hebrew / עברית"
-                                    value="he"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="he"
-                                    >
-                                      Hebrew / עברית
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="16"
-                                    text="Hungarian / Magyar"
-                                    value="hu"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="hu"
-                                    >
-                                      Hungarian / Magyar
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="17"
-                                    text="Italian / Italiano"
-                                    value="it"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="it"
-                                    >
-                                      Italian / Italiano
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="18"
-                                    text="Japanese / 日本語"
-                                    value="ja"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ja"
-                                    >
-                                      Japanese / 日本語
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="19"
-                                    text="Kazakh / Қазақша"
-                                    value="kk"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="kk"
-                                    >
-                                      Kazakh / Қазақша
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="20"
-                                    text="Korean / 한국어"
-                                    value="ko"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ko"
-                                    >
-                                      Korean / 한국어
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="21"
-                                    text="Macedonian / македонски"
-                                    value="mk"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="mk"
-                                    >
-                                      Macedonian / македонски
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="22"
-                                    text="Norwegian / Norsk"
-                                    value="no"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="no"
-                                    >
-                                      Norwegian / Norsk
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="23"
-                                    text="Polish / polski"
-                                    value="pl"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="pl"
-                                    >
-                                      Polish / polski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="24"
-                                    text="Portuguese/Brazil/Brazil / Português/Brasil"
-                                    value="pt-br"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="pt-br"
-                                    >
-                                      Portuguese/Brazil/Brazil / Português/Brasil
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="25"
-                                    text="Portuguese/Portugal / Português/Portugal"
-                                    value="pt"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="pt"
-                                    >
-                                      Portuguese/Portugal / Português/Portugal
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="26"
-                                    text="Romanian / Română"
-                                    value="ro"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ro"
-                                    >
-                                      Romanian / Română
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="27"
-                                    text="Russian / Русский"
-                                    value="ru"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="ru"
-                                    >
-                                      Russian / Русский
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="28"
-                                    text="Serbian / srpski"
-                                    value="sr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sr"
-                                    >
-                                      Serbian / srpski
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="29"
-                                    text="Slovak / Slovenčina"
-                                    value="sk"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sk"
-                                    >
-                                      Slovak / Slovenčina
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="30"
-                                    text="Slovenian / Slovenščina"
-                                    value="sl"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sl"
-                                    >
-                                      Slovenian / Slovenščina
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="31"
-                                    text="Spanish / Español"
-                                    value="es"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="es"
-                                    >
-                                      Spanish / Español
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="32"
-                                    text="Swedish / Svenska"
-                                    value="sv"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="sv"
-                                    >
-                                      Swedish / Svenska
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="33"
-                                    text="Thai / ภาษาไทย"
-                                    value="th"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="th"
-                                    >
-                                      Thai / ภาษาไทย
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="34"
-                                    text="Turkish / Türkçe"
-                                    value="tr"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="tr"
-                                    >
-                                      Turkish / Türkçe
-                                    </option>
-                                  </SelectItem>
-                                  <SelectItem
-                                    disabled={false}
-                                    hidden={false}
-                                    key="35"
-                                    text="Vietnamese / Tiếng Việt"
-                                    value="vi"
-                                  >
-                                    <option
-                                      className="bx--select-option"
-                                      disabled={false}
-                                      hidden={false}
-                                      value="vi"
-                                    >
-                                      Vietnamese / Tiếng Việt
-                                    </option>
-                                  </SelectItem>
-                                </select>
-                                <ForwardRef(ChevronDown16)
-                                  className="bx--select__arrow"
-                                >
-                                  <Icon
-                                    className="bx--select__arrow"
-                                    fill="currentColor"
-                                    height={16}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--select__arrow"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={16}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 16 16"
-                                      width={16}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M8 11L3 6 3.7 5.3 8 9.6 12.3 5.3 13 6z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ChevronDown16)>
-                              </div>
-                            </div>
-                          </div>
-                        </Select>
-                      </div>
-                    </LanguageSelector>
-                  </div>
-                </div>
-              </div>
-            </section>
-            <LegalNav
-              button={null}
-              links={Array []}
-              type="short"
-            />
-          </footer>
-        </Footer>
-      </Default>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Footer Short with adjunct legal links 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-footer--short-with-adjunct-legal-links",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Footer/__stories__/Footer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Footer: Short with adjunct legal links",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "minHeight": "100%",
-        }
-      }
-    >
-      <Default
-        adjunctLinks={
-          Array [
-            Object {
-              "title": "Read the updated Terms of Use.",
-              "url": "https://www.example.com",
-            },
-            Object {
-              "title": "Read Learning Technologies Privacy",
-              "url": "https://www.example.com",
-            },
-          ]
-        }
-        disableLocaleButton={false}
-        isCustom={false}
-        navigation={null}
-        type="short"
-      >
-        <Footer
-          adjunctLinks={
-            Array [
-              Object {
-                "title": "Read the updated Terms of Use.",
-                "url": "https://www.example.com",
-              },
-              Object {
-                "title": "Read Learning Technologies Privacy",
-                "url": "https://www.example.com",
-              },
-            ]
-          }
-          disableLocaleButton={false}
-          footerProps={null}
-          langCode={null}
-          languageItems={null}
-          mastheadProps={null}
-          navigation={null}
-          type="short"
-        >
-          <footer
-            className="bx--footer bx--footer--short"
-            data-autoid="dds--footer"
-          >
-            <section
-              className="bx--footer__main"
-            >
-              <div
-                className="bx--footer__main-container"
-              >
-                <div
-                  className="bx--footer__logo-container"
-                >
-                  <div
-                    className="bx--footer__logo-row"
-                  >
-                    <Logo>
-                      <div
-                        className="bx--footer-logo"
-                        data-autoid="dds--footer-logo"
-                      >
-                        <a
-                          className="bx--footer-logo__link"
-                          data-autoid="dds--footer-logo__link"
-                          href="https://www.ibm.com/"
-                        >
-                          <FooterLogo
-                            className="bx--footer-logo__logo"
-                            height="65"
-                            viewBox="0 0 157 65"
-                            width="157"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              className="bx--footer-logo__logo"
-                              height="65"
-                              viewBox="0 0 157 65"
-                              width="157"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <title>
-                                IBM Logo
-                              </title>
-                              <path
-                                d="M30.444 60.208v4.03H0v-4.03h30.444zm78.291-.001v4.03H86.983v-4.03h21.752zm47.858 0v4.03H134.84v-4.03h21.753zm-33.416 0l-1.398 4.03-1.38-4.03h2.778zm-88.384 0h42.775c-2.797 2.426-6.39 3.925-10.327 4.025l-.423.006H34.793v-4.03h42.775zm-4.35-8.46v4.03H0v-4.03h30.444zm52.402 0c-.332 1.248-.8 2.44-1.389 3.555l-.259.474H34.793v-4.029h48.052zm73.748-.005v4.031H134.84v-4.03h21.753zm-47.858 0v4.031H86.983v-4.03h21.752zm17.375 0l-1.398 4.031h-5.85l-1.395-4.03h8.643zM21.745 43.285v4.03H8.698v-4.03h13.047zm61.195 0a17.32 17.32 0 0 1 .476 3.51l.008.52H68.796v-4.03H82.94zm-26.401 0v4.03H43.491v-4.03H56.54zm72.502-.007l-1.396 4.03H115.93l-1.397-4.03h14.507zm18.85 0v4.03h-13.05v-4.03h13.05zm-39.156 0v4.03H95.684v-4.03h13.051zm-86.99-8.454v4.03H8.698v-4.03h13.047zm56.117 0a16.945 16.945 0 0 1 2.926 3.582l.264.447h-37.56v-4.03h34.37zm30.873-.01v4.03H95.684v-4.03h13.051zm39.157 0v4.03H134.84v-4.03h13.052zm-15.919 0l-1.396 4.03h-17.579l-1.396-4.03h20.371zm-50.778-8.452a16.963 16.963 0 0 1-2.82 3.674l-.37.355H43.49v-4.029h37.704zm-59.45 0v4.03H8.698v-4.03h13.047zm126.147-.013v4.031H134.84v-3.839l-1.33 3.839h-11.456l1.373-4.03h24.465zm-27.743 0l1.372 4.031h-11.456l-1.33-3.839v3.84H95.684v-4.032h24.465zm-98.404-8.448v4.03H8.698V17.9h13.047zm61.68 0c0 1.215-.134 2.399-.375 3.542l-.11.487H68.796V17.9h14.628zM56.538 17.9v4.03H43.491V17.9H56.54zm91.352-.015v4.03h-22.954l1.37-4.03h21.584zm-30.624 0l1.372 4.03H95.684v-4.03h21.583zM30.444 9.437v4.03H0v-4.03h30.444zm50.753 0a17.048 17.048 0 0 1 1.498 3.499l.15.531H34.794v-4.03h46.403zm75.396-.018v4.03h-28.776l1.373-4.03h27.403zm-42.207 0l1.372 4.031H86.982V9.42h27.404zM30.444.978v4.03H0V.977h30.444zm36.374 0c3.96 0 7.594 1.415 10.448 3.772l.303.257H34.794V.977h32.024zm89.775-.022v4.031h-25.894l1.372-4.03h24.522zm-45.098 0l1.372 4.03H86.982V.955h24.513z"
-                              />
-                            </svg>
-                          </FooterLogo>
-                        </a>
-                      </div>
-                    </Logo>
-                    <LocaleButton
-                      aria=""
-                      displayLang=""
-                    >
-                      <div
-                        className="bx--locale-btn__container"
-                      >
-                        <Button
-                          aria-label=""
-                          className="bx--locale-btn"
-                          data-autoid="dds--locale-btn"
-                          iconDescription="Earth Filled Icon"
-                          kind="tertiary"
-                          onClick={[Function]}
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                        >
-                          <button
-                            aria-describedby={null}
-                            aria-label=""
-                            aria-pressed={null}
-                            className="bx--locale-btn bx--btn bx--btn--tertiary"
-                            data-autoid="dds--locale-btn"
-                            disabled={false}
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                            type="button"
-                          >
-                            <ForwardRef(EarthFilled20)
-                              aria-hidden="true"
-                              aria-label="Earth Filled Icon"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                aria-label="Earth Filled Icon"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 32 32"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden="true"
-                                  aria-label="Earth Filled Icon"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  role="img"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(EarthFilled20)>
-                          </button>
-                        </Button>
-                        <LocaleModal
-                          closeFunc={[Function]}
-                          isOpen={false}
-                          localeData={null}
-                          localeDisplay={null}
-                          setIsOpen={[Function]}
-                        >
-                          <ComposedModal
-                            className="bx--locale-modal-container"
-                            data-autoid="dds--locale-modal"
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            selectorPrimaryFocus=".bx--modal-close"
-                          >
-                            <div
-                              aria-hidden={true}
-                              className="bx--modal bx--locale-modal-container"
-                              data-autoid="dds--locale-modal"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              open={false}
-                              role="presentation"
-                            >
-                              <div
-                                aria-label={
-                                  Array [
-                                    undefined,
-                                    <ForwardRef(EarthFilled16)
-                                      className="bx--locale-modal__label-globe"
-                                    />,
-                                  ]
-                                }
-                                aria-modal="true"
-                                className="bx--modal-container"
-                                role="dialog"
-                              >
-                                <button
-                                  className="bx--visually-hidden"
-                                  type="button"
-                                >
-                                  Focus sentinel
-                                </button>
-                                <div
-                                  className="bx--modal-container-body"
-                                >
-                                  <ModalHeader
-                                    buttonOnClick={[Function]}
-                                    closeModal={[Function]}
-                                    iconDescription="Close"
-                                    key=".0"
-                                    label={
-                                      Array [
-                                        undefined,
-                                        <ForwardRef(EarthFilled16)
-                                          className="bx--locale-modal__label-globe"
-                                        />,
-                                      ]
-                                    }
-                                  >
-                                    <div
-                                      className="bx--modal-header"
-                                    >
-                                      <h2
-                                        className="bx--modal-header__label bx--type-delta"
-                                      >
-                                        <ForwardRef(EarthFilled16)
-                                          className="bx--locale-modal__label-globe"
-                                          key="earthfilled"
-                                        >
-                                          <Icon
-                                            className="bx--locale-modal__label-globe"
-                                            fill="currentColor"
-                                            height={16}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={16}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--locale-modal__label-globe"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={16}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={16}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(EarthFilled16)>
-                                      </h2>
-                                      <button
-                                        aria-label="Close"
-                                        className="bx--modal-close"
-                                        onClick={[Function]}
-                                        title="Close"
-                                        type="button"
-                                      >
-                                        <ForwardRef(Close20)
-                                          className="bx--modal-close__icon"
-                                        >
-                                          <Icon
-                                            className="bx--modal-close__icon"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--modal-close__icon"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Close20)>
-                                      </button>
-                                    </div>
-                                  </ModalHeader>
-                                  <ForwardRef(ModalBody)
-                                    className="bx--locale-modal "
-                                    key=".1"
-                                  >
-                                    <div
-                                      className="bx--modal-content bx--locale-modal "
-                                    >
-                                      <LocaleModalRegions
-                                        regionList={Array []}
-                                        setClearResults={[Function]}
-                                        setCurrentRegion={[Function]}
-                                        setIsFiltering={[Function]}
-                                      >
-                                        <div
-                                          className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                                        >
-                                          <div
-                                            className="bx--row"
-                                          />
-                                        </div>
-                                      </LocaleModalRegions>
-                                      <LocaleModalCountries
-                                        regionList={Array []}
-                                        searchLabel="Search by location or language"
-                                        setClearResults={[Function]}
-                                      >
-                                        <div
-                                          className="bx--locale-modal__filter"
-                                        >
-                                          <div
-                                            className="bx--locale-modal__search"
-                                          >
-                                            <Search
-                                              closeButtonLabelText="Clear search input"
-                                              data-autoid="dds--locale-modal__filter"
-                                              id="bx--locale-modal__filter"
-                                              labelText="Search by location or language"
-                                              onChange={[Function]}
-                                              onClear={[Function]}
-                                              placeholder=""
-                                              tabIndex="0"
-                                              type="text"
-                                            >
-                                              <div
-                                                aria-labelledby="bx--locale-modal__filter-search"
-                                                className="bx--search bx--search--xl"
-                                                role="search"
-                                              >
-                                                <div
-                                                  className="bx--search-magnifier"
-                                                >
-                                                  <ForwardRef(Search16)
-                                                    className="bx--search-magnifier-icon"
-                                                  >
-                                                    <Icon
-                                                      className="bx--search-magnifier-icon"
-                                                      fill="currentColor"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 16 16"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        className="bx--search-magnifier-icon"
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={16}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 16 16"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(Search16)>
-                                                </div>
-                                                <label
-                                                  className="bx--label"
-                                                  htmlFor="bx--locale-modal__filter"
-                                                  id="bx--locale-modal__filter-search"
-                                                >
-                                                  Search by location or language
-                                                </label>
-                                                <input
-                                                  autoComplete="off"
-                                                  className="bx--search-input"
-                                                  data-autoid="dds--locale-modal__filter"
-                                                  id="bx--locale-modal__filter"
-                                                  onChange={[Function]}
-                                                  onKeyDown={[Function]}
-                                                  placeholder=""
-                                                  role="searchbox"
-                                                  tabIndex="0"
-                                                  type="text"
-                                                />
-                                                <button
-                                                  aria-label="Clear search input"
-                                                  className="bx--search-close bx--search-close--hidden"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <ForwardRef(Close16)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={16}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={16}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={16}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={16}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(Close16)>
-                                                </button>
-                                              </div>
-                                            </Search>
-                                            <p
-                                              className="bx--locale-modal__search-text"
-                                            />
-                                          </div>
-                                          <ul
-                                            className="bx--locale-modal__list"
-                                          >
-                                            <p
-                                              aria-live="assertive"
-                                              className="bx--assistive-text"
-                                              role="status"
-                                            />
-                                          </ul>
-                                        </div>
-                                      </LocaleModalCountries>
-                                    </div>
-                                  </ForwardRef(ModalBody)>
-                                </div>
-                                <button
-                                  className="bx--visually-hidden"
-                                  type="button"
-                                >
-                                  Focus sentinel
-                                </button>
-                              </div>
-                            </div>
-                          </ComposedModal>
-                        </LocaleModal>
-                      </div>
-                    </LocaleButton>
-                  </div>
-                </div>
-              </div>
-            </section>
-            <LegalNav
-              adjunctLinks={
-                Array [
-                  Object {
-                    "title": "Read the updated Terms of Use.",
-                    "url": "https://www.example.com",
-                  },
-                  Object {
-                    "title": "Read Learning Technologies Privacy",
-                    "url": "https://www.example.com",
-                  },
-                ]
-              }
-              button={null}
-              links={Array []}
-              type="short"
-            />
-          </footer>
-        </Footer>
-      </Default>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Horizontal rule Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-horizontal-rule--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/HorizontalRule/__stories__/HorizontalRule.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Horizontal rule: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div>
-      <h3>
-        <b>
-          Horizontal Rule in Grid with no Gutter
-        </b>
-      </h3>
-      <div
-        className="bx--grid bx--no-gutter"
-        style={
-          Object {
-            "marginBottom": "50px",
-          }
-        }
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col"
-          >
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            <HorizontalRule>
-              <hr
-                className="bx--hr"
-                data-autoid="dds--hr"
-              />
-            </HorizontalRule>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </div>
-        </div>
-      </div>
-      <div
-        className="bx--grid"
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col"
-          >
-            <h3>
-              <b>
-                Horizontal Rule in Grid with Gutter
-              </b>
-            </h3>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-            <HorizontalRule>
-              <hr
-                className="bx--hr"
-                data-autoid="dds--hr"
-              />
-            </HorizontalRule>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Image Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-image--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Image/__stories__/Image.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Image: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <Image
-            alt="Image alt text"
-            border={false}
-            defaultSrc="fpo--2x1--960x480--001.jpg"
-            sources={
-              Array [
-                Object {
-                  "breakpoint": "sm",
-                  "src": "fpo--2x1--320x160--001.jpg",
-                },
-                Object {
-                  "breakpoint": "md",
-                  "src": "fpo--2x1--480x240--001.jpg",
-                },
-                Object {
-                  "breakpoint": "lg",
-                  "src": "fpo--2x1--960x480--001.jpg",
-                },
-              ]
-            }
-          >
-            <div
-              className="bx--image"
-              data-autoid="dds--image__longdescription"
-            >
-              <picture>
-                <source
-                  key="0"
-                  media="(min-width: 1056px)"
-                  srcSet="fpo--2x1--960x480--001.jpg"
-                />
-                <source
-                  key="1"
-                  media="(min-width: 672px)"
-                  srcSet="fpo--2x1--480x240--001.jpg"
-                />
-                <source
-                  key="2"
-                  media="(min-width: 320px)"
-                  srcSet="fpo--2x1--320x160--001.jpg"
-                />
-                <img
-                  alt="Image alt text"
-                  className="bx--image__img"
-                  src="fpo--2x1--960x480--001.jpg"
-                />
-              </picture>
-            </div>
-          </Image>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Image with caption Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-image-with-caption--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/ImageWithCaption/__stories__/ImageWithCaption.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Image with caption: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <ImageWithCaption
-            copy="This is a description of the image."
-            heading="This is a caption"
-            image={
-              Object {
-                "alt": "image with caption image",
-                "defaultSrc": "fpo--2x1--720x360--004.jpg",
-                "sources": Array [
-                  Object {
-                    "breakpoint": "sm",
-                    "src": "fpo--2x1--320x160--004.jpg",
-                  },
-                  Object {
-                    "breakpoint": "md",
-                    "src": "fpo--2x1--480x240--004.jpg",
-                  },
-                  Object {
-                    "breakpoint": "lg",
-                    "src": "fpo--2x1--720x360--004.jpg",
-                  },
-                ],
-              }
-            }
-            lightbox={true}
-          >
-            <div
-              className="bx--image-with-caption"
-              data-autoid="dds--image-with-caption"
-            >
-              <button
-                aria-label="launch light box media viewer"
-                className="bx--image-with-caption__image"
-                onClick={[Function]}
-              >
-                <Image
-                  alt="image with caption image"
-                  defaultSrc="fpo--2x1--720x360--004.jpg"
-                  sources={
-                    Array [
-                      Object {
-                        "breakpoint": "sm",
-                        "src": "fpo--2x1--320x160--004.jpg",
-                      },
-                      Object {
-                        "breakpoint": "md",
-                        "src": "fpo--2x1--480x240--004.jpg",
-                      },
-                      Object {
-                        "breakpoint": "lg",
-                        "src": "fpo--2x1--720x360--004.jpg",
-                      },
-                    ]
-                  }
-                >
-                  <div
-                    className="bx--image"
-                    data-autoid="dds--image__longdescription"
-                  >
-                    <picture>
-                      <source
-                        key="0"
-                        media="(min-width: 1056px)"
-                        srcSet="fpo--2x1--720x360--004.jpg"
-                      />
-                      <source
-                        key="1"
-                        media="(min-width: 672px)"
-                        srcSet="fpo--2x1--480x240--004.jpg"
-                      />
-                      <source
-                        key="2"
-                        media="(min-width: 320px)"
-                        srcSet="fpo--2x1--320x160--004.jpg"
-                      />
-                      <img
-                        alt="image with caption image"
-                        className="bx--image__img"
-                        src="fpo--2x1--720x360--004.jpg"
-                      />
-                    </picture>
-                  </div>
-                </Image>
-                <div
-                  className="bx--image-with-caption__zoom-button"
-                >
-                  <ForwardRef(ZoomIn20)
-                    aria-label="Zoom In Icon"
-                  >
-                    <Icon
-                      aria-label="Zoom In Icon"
-                      fill="currentColor"
-                      height={20}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width={20}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Zoom In Icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M18 12L14 12 14 8 12 8 12 12 8 12 8 14 12 14 12 18 14 18 14 14 18 14 18 12z"
-                        />
-                        <path
-                          d="M21.4479,20A10.856,10.856,0,0,0,24,13,11,11,0,1,0,13,24a10.856,10.856,0,0,0,7-2.5521L27.5859,29,29,27.5859ZM13,22a9,9,0,1,1,9-9A9.01,9.01,0,0,1,13,22Z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(ZoomIn20)>
-                </div>
-              </button>
-              <p
-                className="bx--image__caption"
-                data-autoid="dds--image__caption"
-              >
-                This is a caption
-              </p>
-            </div>
-          </ImageWithCaption>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Layout Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-layout--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Layout/__stories__/Layout.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Layout: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p
-      style={
-        Object {
-          "paddingBottom": "1rem",
-        }
-      }
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Nascetur ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-    </p>
-    <p
-      style={
-        Object {
-          "paddingBottom": "1rem",
-        }
-      }
-    >
-      Layout classes used below.
-    </p>
-    <div
-      className="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--layout-1-3"
-        >
-          <div
-            className="bx--layout--sticky"
-            style={
-              Object {
-                "top": 0,
-              }
-            }
-          >
-            <h3>
-              Column 1
-            </h3>
-            <ul
-              className="bx--list--unordered"
-            >
-              <li
-                className="bx--list__item"
-              >
-                Item 1
-              </li>
-              <li
-                className="bx--list__item"
-              >
-                Item 2
-              </li>
-              <li
-                className="bx--list__item"
-              >
-                Item 3
-              </li>
-              <li
-                className="bx--list__item"
-              >
-                Item 4
-              </li>
-              <li
-                className="bx--list__item"
-              >
-                Item 5
-              </li>
-              <li
-                className="bx--list__item"
-              >
-                Item 6
-              </li>
-              <li
-                className="bx--list__item"
-              >
-                Item 7
-              </li>
-            </ul>
-          </div>
-        </div>
-        <div
-          className="bx--layout-2-3"
-        >
-          <div
-            className="bx--row"
-          >
-            <div
-              className="bx--layout-2-3"
-            >
-              <h3>
-                Column 2.1
-              </h3>
-              <p
-                style={
-                  Object {
-                    "paddingBottom": "1rem",
-                  }
-                }
-              >
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Nascetur ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-              </p>
-              <p
-                style={
-                  Object {
-                    "paddingBottom": "1rem",
-                  }
-                }
-              >
-                A pellentesque sit amet porttitor. Sed euismod nisi porta lorem. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Est ultricies integer quis auctor elit sed. Quis risus sed vulputate odio ut. Varius sit amet mattis vulputate. Enim ut tellus elementum sagittis vitae et leo. Posuere ac ut consequat semper viverra nam libero. Habitant morbi tristique senectus et netus et malesuada fames. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla.
-              </p>
-              <p
-                style={
-                  Object {
-                    "paddingBottom": "1rem",
-                  }
-                }
-              >
-                Eu facilisis sed odio morbi quis commodo. Non tellus orci ac auctor augue mauris augue. Accumsan tortor posuere ac ut. Orci sagittis eu volutpat odio facilisis. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Id leo in vitae turpis massa sed elementum. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Duis ultricies lacus sed turpis tincidunt id aliquet. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Tempus iaculis urna id volutpat lacus. Rhoncus aenean vel elit scelerisque mauris.
-              </p>
-              <p
-                style={
-                  Object {
-                    "paddingBottom": "1rem",
-                  }
-                }
-              >
-                Hac habitasse platea dictumst quisque sagittis. Faucibus nisl tincidunt eget nullam non nisi est sit. Volutpat ac tincidunt vitae semper quis lectus. Nisi lacus sed viverra tellus in hac. Rhoncus dolor purus non enim. Suspendisse sed nisi lacus sed viverra. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Augue interdum velit euismod in pellentesque massa. Fermentum iaculis eu non diam phasellus vestibulum lorem sed. Volutpat maecenas volutpat blandit aliquam etiam erat velit scelerisque.
-              </p>
-              <p
-                style={
-                  Object {
-                    "paddingBottom": "1rem",
-                  }
-                }
-              >
-                Mi in nulla posuere sollicitudin aliquam ultrices sagittis. Elit pellentesque habitant morbi tristique senectus. Nunc non blandit massa enim nec dui nunc mattis enim. In egestas erat imperdiet sed euismod nisi porta lorem mollis. Donec pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu. Auctor urna nunc id cursus metus aliquam eleifend mi. Velit aliquet sagittis id consectetur. Arcu cursus vitae congue mauris. Gravida rutrum quisque non tellus orci ac. At erat pellentesque adipiscing commodo elit at. Amet tellus cras adipiscing enim eu turpis egestas. Purus gravida quis blandit turpis cursus in hac habitasse. Interdum velit laoreet id donec ultrices tincidunt arcu non sodales. Interdum posuere lorem ipsum dolor sit. Quam quisque id diam vel quam elementum pulvinar etiam non. Massa enim nec dui nunc mattis enim. Ac tortor vitae purus faucibus ornare suspendisse sed. Non pulvinar neque laoreet suspendisse.
-              </p>
-            </div>
-            <div
-              className="bx--layout-1-3"
-            >
-              <div
-                className="bx--layout--sticky"
-              >
-                <h3>
-                  Column 2.2
-                </h3>
-                <ul
-                  className="bx--list--unordered"
-                >
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 1
-                  </li>
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 2
-                  </li>
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 3
-                  </li>
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 4
-                  </li>
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 5
-                  </li>
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 6
-                  </li>
-                  <li
-                    className="bx--list__item"
-                  >
-                    Item 7
-                  </li>
-                </ul>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <p
-      style={
-        Object {
-          "paddingBottom": "1rem",
-        }
-      }
-    >
-      Layout ends above.
-    </p>
-    <p
-      style={
-        Object {
-          "paddingBottom": "1rem",
-        }
-      }
-    >
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies mi. Nascetur ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-    </p>
-    <p
-      style={
-        Object {
-          "paddingBottom": "1rem",
-        }
-      }
-    >
-      A pellentesque sit amet porttitor. Sed euismod nisi porta lorem. Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Eu lobortis elementum nibh tellus molestie nunc non blandit massa. Risus at ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Est ultricies integer quis auctor elit sed. Quis risus sed vulputate odio ut. Varius sit amet mattis vulputate. Enim ut tellus elementum sagittis vitae et leo. Posuere ac ut consequat semper viverra nam libero. Habitant morbi tristique senectus et netus et malesuada fames. Enim neque volutpat ac tincidunt vitae semper quis lectus nulla.
-    </p>
-    <p
-      style={
-        Object {
-          "paddingBottom": "1rem",
-        }
-      }
-    >
-      Eu facilisis sed odio morbi quis commodo. Non tellus orci ac auctor augue mauris augue. Accumsan tortor posuere ac ut. Orci sagittis eu volutpat odio facilisis. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Vestibulum rhoncus est pellentesque elit ullamcorper dignissim cras tincidunt. Id leo in vitae turpis massa sed elementum. Euismod elementum nisi quis eleifend quam adipiscing vitae proin sagittis. Duis ultricies lacus sed turpis tincidunt id aliquet. Nibh mauris cursus mattis molestie a iaculis at erat pellentesque. Tempus iaculis urna id volutpat lacus. Rhoncus aenean vel elit scelerisque mauris.
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Centered 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--centered",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Centered",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <LeadSpace
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      theme="white"
-      title="Leadspace Title"
-      type="centered"
-    >
-      <div
-        className="bx--leadspace bx--leadspace--tall"
-        data-autoid="dds--leadspace"
-      >
-        <section
-          className="bx--leadspace__section bx--leadspace--white bx--leadspace--centered"
-        >
-          <div
-            className="bx--leadspace__container"
-          >
-            <div
-              className="bx--leadspace__overlay"
-            >
-              <svg
-                className="bx--leadspace__gradient"
-                preserveAspectRatio="none"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <linearGradient
-                    className="bx--leadspace__gradient__stops"
-                    gradientTransform="rotate(90)"
-                    id="stops"
-                  >
-                    <stop
-                      offset="0%"
-                    />
-                    <stop
-                      offset="54%"
-                    />
-                    <stop
-                      offset="77%"
-                    />
-                    <stop
-                      offset="100%"
-                    />
-                  </linearGradient>
-                </defs>
-                <rect
-                  className="bx--leadspace__gradient__rect"
-                  height="100"
-                  width="100"
-                />
-              </svg>
-              <div
-                className="bx--leadspace--content__container"
-              >
-                <div
-                  className="bx--leadspace__row"
-                >
-                  <h1
-                    className="bx--leadspace__title"
-                  >
-                    Leadspace Title
-                  </h1>
-                </div>
-                <div
-                  className="bx--leadspace__content"
-                >
-                  <div
-                    className="bx--leadspace__row"
-                  >
-                    <p
-                      className="bx--leadspace__desc"
-                      data-autoid="dds--leadspace__desc"
-                    >
-                      Use this area for a short line of copy to support the title
-                    </p>
-                  </div>
-                  <ButtonGroup
-                    buttons={
-                      Array [
-                        Object {
-                          "copy": "Button 1",
-                          "href": "https://www.example.com",
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                        Object {
-                          "copy": "Button 2",
-                          "href": "https://www.example.com",
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                      ]
-                    }
-                  >
-                    <ol
-                      className="bx--buttongroup"
-                      data-autoid="dds--button-group"
-                    >
-                      <li
-                        className="bx--buttongroup-item"
-                        key="0"
-                      >
-                        <Button
-                          copy="Button 1"
-                          data-autoid="dds--button-group-0"
-                          href="https://www.example.com"
-                          isExpressive={true}
-                          kind="primary"
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                          type="button"
-                        >
-                          <a
-                            className="bx--btn bx--btn--primary bx--btn--expressive"
-                            copy="Button 1"
-                            data-autoid="dds--button-group-0"
-                            href="https://www.example.com"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                          >
-                            Button 1
-                            <ForwardRef(ArrowRight20)
-                              aria-hidden="true"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Button>
-                      </li>
-                      <li
-                        className="bx--buttongroup-item"
-                        key="1"
-                      >
-                        <Button
-                          copy="Button 2"
-                          data-autoid="dds--button-group-1"
-                          href="https://www.example.com"
-                          isExpressive={true}
-                          kind="tertiary"
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                          type="button"
-                        >
-                          <a
-                            className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                            copy="Button 2"
-                            data-autoid="dds--button-group-1"
-                            href="https://www.example.com"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                          >
-                            Button 2
-                            <ForwardRef(ArrowRight20)
-                              aria-hidden="true"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Button>
-                      </li>
-                    </ol>
-                  </ButtonGroup>
-                </div>
-              </div>
-            </div>
-          </div>
-        </section>
-      </div>
-    </LeadSpace>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Centered with image 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--centered-with-image",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Centered with image",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <LeadSpace
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      defaultSrc="leadspaceMax.jpg"
-      image={
-        Object {
-          "alt": "lead space image",
-          "defaultSrc": "leadspaceMax.jpg",
-          "sources": Array [
-            Object {
-              "breakpoint": "sm",
-              "src": "leadspaceMax.jpg",
-            },
-            Object {
-              "breakpoint": "md",
-              "src": "leadspaceMax.jpg",
-            },
-          ],
-        }
-      }
-      theme="white"
-      title="Leadspace Title"
-      type="centered"
-    >
-      <div
-        className="bx--leadspace bx--leadspace--tall"
-        data-autoid="dds--leadspace"
-      >
-        <section
-          className="bx--leadspace__section bx--leadspace--white bx--leadspace--centered"
-        >
-          <div
-            className="bx--leadspace__container"
-          >
-            <div
-              className="bx--leadspace__overlay bx--leadspace--gradient"
-            >
-              <svg
-                className="bx--leadspace__gradient"
-                preserveAspectRatio="none"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <linearGradient
-                    className="bx--leadspace__gradient__stops"
-                    gradientTransform="rotate(90)"
-                    id="stops"
-                  >
-                    <stop
-                      offset="0%"
-                    />
-                    <stop
-                      offset="54%"
-                    />
-                    <stop
-                      offset="77%"
-                    />
-                    <stop
-                      offset="100%"
-                    />
-                  </linearGradient>
-                </defs>
-                <rect
-                  className="bx--leadspace__gradient__rect"
-                  height="100"
-                  width="100"
-                />
-              </svg>
-              <div
-                className="bx--leadspace--content__container"
-              >
-                <div
-                  className="bx--leadspace__row"
-                >
-                  <h1
-                    className="bx--leadspace__title"
-                  >
-                    Leadspace Title
-                  </h1>
-                </div>
-                <div
-                  className="bx--leadspace__content"
-                >
-                  <div
-                    className="bx--leadspace__row"
-                  >
-                    <p
-                      className="bx--leadspace__desc"
-                      data-autoid="dds--leadspace__desc"
-                    >
-                      Use this area for a short line of copy to support the title
-                    </p>
-                  </div>
-                  <ButtonGroup
-                    buttons={
-                      Array [
-                        Object {
-                          "copy": "Button 1",
-                          "href": "https://www.example.com",
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                        Object {
-                          "copy": "Button 2",
-                          "href": "https://www.example.com",
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                      ]
-                    }
-                  >
-                    <ol
-                      className="bx--buttongroup"
-                      data-autoid="dds--button-group"
-                    >
-                      <li
-                        className="bx--buttongroup-item"
-                        key="0"
-                      >
-                        <Button
-                          copy="Button 1"
-                          data-autoid="dds--button-group-0"
-                          href="https://www.example.com"
-                          isExpressive={true}
-                          kind="primary"
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                          type="button"
-                        >
-                          <a
-                            className="bx--btn bx--btn--primary bx--btn--expressive"
-                            copy="Button 1"
-                            data-autoid="dds--button-group-0"
-                            href="https://www.example.com"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                          >
-                            Button 1
-                            <ForwardRef(ArrowRight20)
-                              aria-hidden="true"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Button>
-                      </li>
-                      <li
-                        className="bx--buttongroup-item"
-                        key="1"
-                      >
-                        <Button
-                          copy="Button 2"
-                          data-autoid="dds--button-group-1"
-                          href="https://www.example.com"
-                          isExpressive={true}
-                          kind="tertiary"
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                          type="button"
-                        >
-                          <a
-                            className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                            copy="Button 2"
-                            data-autoid="dds--button-group-1"
-                            href="https://www.example.com"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                          >
-                            Button 2
-                            <ForwardRef(ArrowRight20)
-                              aria-hidden="true"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Button>
-                      </li>
-                    </ol>
-                  </ButtonGroup>
-                </div>
-              </div>
-            </div>
-            <Image
-              alt="lead space image"
-              defaultSrc="leadspaceMax.jpg"
-              sources={
-                Array [
-                  Object {
-                    "breakpoint": "sm",
-                    "src": "leadspaceMax.jpg",
-                  },
-                  Object {
-                    "breakpoint": "md",
-                    "src": "leadspaceMax.jpg",
-                  },
-                ]
-              }
-            >
-              <div
-                className="bx--image"
-                data-autoid="dds--image__longdescription"
-              >
-                <picture>
-                  <source
-                    key="0"
-                    media="(min-width: 672px)"
-                    srcSet="leadspaceMax.jpg"
-                  />
-                  <source
-                    key="1"
-                    media="(min-width: 320px)"
-                    srcSet="leadspaceMax.jpg"
-                  />
-                  <img
-                    alt="lead space image"
-                    className="bx--image__img"
-                    src="leadspaceMax.jpg"
-                  />
-                </picture>
-              </div>
-            </Image>
-          </div>
-        </section>
-      </div>
-    </LeadSpace>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Medium 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--medium",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Medium",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <TallWithNoImage
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      size="medium"
-      title="Lead space title"
-    >
-      <TallWithImage
-        buttons={
-          Array [
-            Object {
-              "copy": "Button 1",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-            Object {
-              "copy": "Button 2",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-          ]
-        }
-        copy="Use this area for a short line of copy to support the title"
-        size="medium"
-        title="Lead space title"
-      >
-        <LeadSpace
-          buttons={
-            Array [
-              Object {
-                "copy": "Button 1",
-                "href": "https://www.example.com",
-                "renderIcon": Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "render": [Function],
-                },
-              },
-              Object {
-                "copy": "Button 2",
-                "href": "https://www.example.com",
-                "renderIcon": Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "render": [Function],
-                },
-              },
-            ]
-          }
-          copy="Use this area for a short line of copy to support the title"
-          size="medium"
-          theme="white"
-          title="Lead space title"
-        >
-          <div
-            className="bx--leadspace bx--leadspace--medium"
-            data-autoid="dds--leadspace"
-          >
-            <section
-              className="bx--leadspace__section bx--leadspace--white"
-            >
-              <div
-                className="bx--leadspace__container"
-              >
-                <div
-                  className="bx--leadspace__overlay"
-                >
-                  <svg
-                    className="bx--leadspace__gradient"
-                    preserveAspectRatio="none"
-                    viewBox="0 0 100 100"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlnsXlink="http://www.w3.org/1999/xlink"
-                  >
-                    <defs>
-                      <linearGradient
-                        className="bx--leadspace__gradient__stops"
-                        gradientTransform=""
-                        id="stops"
-                      >
-                        <stop
-                          offset="0%"
-                        />
-                        <stop
-                          offset="25%"
-                        />
-                        <stop
-                          offset="50%"
-                        />
-                        <stop
-                          offset="75%"
-                        />
-                      </linearGradient>
-                    </defs>
-                    <rect
-                      className="bx--leadspace__gradient__rect"
-                      height="100"
-                      width="100"
-                    />
-                  </svg>
-                  <div
-                    className="bx--leadspace--content__container"
-                  >
-                    <div
-                      className="bx--leadspace__row"
-                    >
-                      <h1
-                        className="bx--leadspace__title"
-                      >
-                        Lead space title
-                      </h1>
-                    </div>
-                    <div
-                      className="bx--leadspace__content"
-                    >
-                      <div
-                        className="bx--leadspace__row"
-                      >
-                        <p
-                          className="bx--leadspace__desc"
-                          data-autoid="dds--leadspace__desc"
-                        >
-                          Use this area for a short line of copy to support the title
-                        </p>
-                      </div>
-                      <ButtonGroup
-                        buttons={
-                          Array [
-                            Object {
-                              "copy": "Button 1",
-                              "href": "https://www.example.com",
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                            Object {
-                              "copy": "Button 2",
-                              "href": "https://www.example.com",
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          ]
-                        }
-                      >
-                        <ol
-                          className="bx--buttongroup"
-                          data-autoid="dds--button-group"
-                        >
-                          <li
-                            className="bx--buttongroup-item"
-                            key="0"
-                          >
-                            <Button
-                              copy="Button 1"
-                              data-autoid="dds--button-group-0"
-                              href="https://www.example.com"
-                              isExpressive={true}
-                              kind="primary"
-                              renderIcon={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              type="button"
-                            >
-                              <a
-                                className="bx--btn bx--btn--primary bx--btn--expressive"
-                                copy="Button 1"
-                                data-autoid="dds--button-group-0"
-                                href="https://www.example.com"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                              >
-                                Button 1
-                                <ForwardRef(ArrowRight20)
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                >
-                                  <Icon
-                                    aria-hidden="true"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--btn__icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Button>
-                          </li>
-                          <li
-                            className="bx--buttongroup-item"
-                            key="1"
-                          >
-                            <Button
-                              copy="Button 2"
-                              data-autoid="dds--button-group-1"
-                              href="https://www.example.com"
-                              isExpressive={true}
-                              kind="tertiary"
-                              renderIcon={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              type="button"
-                            >
-                              <a
-                                className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                                copy="Button 2"
-                                data-autoid="dds--button-group-1"
-                                href="https://www.example.com"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                              >
-                                Button 2
-                                <ForwardRef(ArrowRight20)
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                >
-                                  <Icon
-                                    aria-hidden="true"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--btn__icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Button>
-                          </li>
-                        </ol>
-                      </ButtonGroup>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </LeadSpace>
-      </TallWithImage>
-    </TallWithNoImage>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Medium with image 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--medium-with-image",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Medium with image",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <TallWithImage
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      defaultSrc="leadspaceMax.jpg"
-      gradient={true}
-      image={
-        Object {
-          "alt": "lead space image",
-          "defaultSrc": "leadspaceMax.jpg",
-          "sources": Array [
-            Object {
-              "breakpoint": "sm",
-              "src": "leadspaceMax.jpg",
-            },
-            Object {
-              "breakpoint": "md",
-              "src": "leadspaceMax.jpg",
-            },
-          ],
-        }
-      }
-      size="medium"
-      title="Lead space title"
-    >
-      <LeadSpace
-        buttons={
-          Array [
-            Object {
-              "copy": "Button 1",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-            Object {
-              "copy": "Button 2",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-          ]
-        }
-        copy="Use this area for a short line of copy to support the title"
-        defaultSrc="leadspaceMax.jpg"
-        gradient={true}
-        image={
-          Object {
-            "alt": "lead space image",
-            "defaultSrc": "leadspaceMax.jpg",
-            "sources": Array [
-              Object {
-                "breakpoint": "sm",
-                "src": "leadspaceMax.jpg",
-              },
-              Object {
-                "breakpoint": "md",
-                "src": "leadspaceMax.jpg",
-              },
-            ],
-          }
-        }
-        size="medium"
-        theme="white"
-        title="Lead space title"
-      >
-        <div
-          className="bx--leadspace bx--leadspace--medium"
-          data-autoid="dds--leadspace"
-        >
-          <section
-            className="bx--leadspace__section bx--leadspace--white"
-          >
-            <div
-              className="bx--leadspace__container"
-            >
-              <div
-                className="bx--leadspace__overlay bx--leadspace--gradient"
-              >
-                <svg
-                  className="bx--leadspace__gradient"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <defs>
-                    <linearGradient
-                      className="bx--leadspace__gradient__stops"
-                      gradientTransform=""
-                      id="stops"
-                    >
-                      <stop
-                        offset="0%"
-                      />
-                      <stop
-                        offset="25%"
-                      />
-                      <stop
-                        offset="50%"
-                      />
-                      <stop
-                        offset="75%"
-                      />
-                    </linearGradient>
-                  </defs>
-                  <rect
-                    className="bx--leadspace__gradient__rect"
-                    height="100"
-                    width="100"
-                  />
-                </svg>
-                <div
-                  className="bx--leadspace--content__container"
-                >
-                  <div
-                    className="bx--leadspace__row"
-                  >
-                    <h1
-                      className="bx--leadspace__title"
-                    >
-                      Lead space title
-                    </h1>
-                  </div>
-                  <div
-                    className="bx--leadspace__content"
-                  >
-                    <div
-                      className="bx--leadspace__row"
-                    >
-                      <p
-                        className="bx--leadspace__desc"
-                        data-autoid="dds--leadspace__desc"
-                      >
-                        Use this area for a short line of copy to support the title
-                      </p>
-                    </div>
-                    <ButtonGroup
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Button 1",
-                            "href": "https://www.example.com",
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                          Object {
-                            "copy": "Button 2",
-                            "href": "https://www.example.com",
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        ]
-                      }
-                    >
-                      <ol
-                        className="bx--buttongroup"
-                        data-autoid="dds--button-group"
-                      >
-                        <li
-                          className="bx--buttongroup-item"
-                          key="0"
-                        >
-                          <Button
-                            copy="Button 1"
-                            data-autoid="dds--button-group-0"
-                            href="https://www.example.com"
-                            isExpressive={true}
-                            kind="primary"
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--primary bx--btn--expressive"
-                              copy="Button 1"
-                              data-autoid="dds--button-group-0"
-                              href="https://www.example.com"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                            >
-                              Button 1
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                        <li
-                          className="bx--buttongroup-item"
-                          key="1"
-                        >
-                          <Button
-                            copy="Button 2"
-                            data-autoid="dds--button-group-1"
-                            href="https://www.example.com"
-                            isExpressive={true}
-                            kind="tertiary"
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                              copy="Button 2"
-                              data-autoid="dds--button-group-1"
-                              href="https://www.example.com"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                            >
-                              Button 2
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                      </ol>
-                    </ButtonGroup>
-                  </div>
-                </div>
-              </div>
-              <Image
-                alt="lead space image"
-                defaultSrc="leadspaceMax.jpg"
-                sources={
-                  Array [
-                    Object {
-                      "breakpoint": "sm",
-                      "src": "leadspaceMax.jpg",
-                    },
-                    Object {
-                      "breakpoint": "md",
-                      "src": "leadspaceMax.jpg",
-                    },
-                  ]
-                }
-              >
-                <div
-                  className="bx--image"
-                  data-autoid="dds--image__longdescription"
-                >
-                  <picture>
-                    <source
-                      key="0"
-                      media="(min-width: 672px)"
-                      srcSet="leadspaceMax.jpg"
-                    />
-                    <source
-                      key="1"
-                      media="(min-width: 320px)"
-                      srcSet="leadspaceMax.jpg"
-                    />
-                    <img
-                      alt="lead space image"
-                      className="bx--image__img"
-                      src="leadspaceMax.jpg"
-                    />
-                  </picture>
-                </div>
-              </Image>
-            </div>
-          </section>
-        </div>
-      </LeadSpace>
-    </TallWithImage>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Super 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--super",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Super",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <TallWithNoImage
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      size="super"
-      title="Lead space title"
-    >
-      <TallWithImage
-        buttons={
-          Array [
-            Object {
-              "copy": "Button 1",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-            Object {
-              "copy": "Button 2",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-          ]
-        }
-        copy="Use this area for a short line of copy to support the title"
-        size="super"
-        title="Lead space title"
-      >
-        <LeadSpace
-          buttons={
-            Array [
-              Object {
-                "copy": "Button 1",
-                "href": "https://www.example.com",
-                "renderIcon": Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "render": [Function],
-                },
-              },
-              Object {
-                "copy": "Button 2",
-                "href": "https://www.example.com",
-                "renderIcon": Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "render": [Function],
-                },
-              },
-            ]
-          }
-          copy="Use this area for a short line of copy to support the title"
-          size="super"
-          theme="white"
-          title="Lead space title"
-        >
-          <div
-            className="bx--leadspace bx--leadspace--super"
-            data-autoid="dds--leadspace"
-          >
-            <section
-              className="bx--leadspace__section bx--leadspace--white"
-            >
-              <div
-                className="bx--leadspace__container"
-              >
-                <div
-                  className="bx--leadspace__overlay"
-                >
-                  <svg
-                    className="bx--leadspace__gradient"
-                    preserveAspectRatio="none"
-                    viewBox="0 0 100 100"
-                    xmlns="http://www.w3.org/2000/svg"
-                    xmlnsXlink="http://www.w3.org/1999/xlink"
-                  >
-                    <defs>
-                      <linearGradient
-                        className="bx--leadspace__gradient__stops"
-                        gradientTransform=""
-                        id="stops"
-                      >
-                        <stop
-                          offset="0%"
-                        />
-                        <stop
-                          offset="25%"
-                        />
-                        <stop
-                          offset="50%"
-                        />
-                        <stop
-                          offset="75%"
-                        />
-                      </linearGradient>
-                    </defs>
-                    <rect
-                      className="bx--leadspace__gradient__rect"
-                      height="100"
-                      width="100"
-                    />
-                  </svg>
-                  <div
-                    className="bx--leadspace--content__container"
-                  >
-                    <div
-                      className="bx--leadspace__row"
-                    >
-                      <h1
-                        className="bx--leadspace__title"
-                      >
-                        Lead space title
-                      </h1>
-                    </div>
-                    <div
-                      className="bx--leadspace__content"
-                    >
-                      <div
-                        className="bx--leadspace__row"
-                      >
-                        <p
-                          className="bx--leadspace__desc"
-                          data-autoid="dds--leadspace__desc"
-                        >
-                          Use this area for a short line of copy to support the title
-                        </p>
-                      </div>
-                      <ButtonGroup
-                        buttons={
-                          Array [
-                            Object {
-                              "copy": "Button 1",
-                              "href": "https://www.example.com",
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                            Object {
-                              "copy": "Button 2",
-                              "href": "https://www.example.com",
-                              "renderIcon": Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              },
-                            },
-                          ]
-                        }
-                      >
-                        <ol
-                          className="bx--buttongroup"
-                          data-autoid="dds--button-group"
-                        >
-                          <li
-                            className="bx--buttongroup-item"
-                            key="0"
-                          >
-                            <Button
-                              copy="Button 1"
-                              data-autoid="dds--button-group-0"
-                              href="https://www.example.com"
-                              isExpressive={true}
-                              kind="primary"
-                              renderIcon={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              type="button"
-                            >
-                              <a
-                                className="bx--btn bx--btn--primary bx--btn--expressive"
-                                copy="Button 1"
-                                data-autoid="dds--button-group-0"
-                                href="https://www.example.com"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                              >
-                                Button 1
-                                <ForwardRef(ArrowRight20)
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                >
-                                  <Icon
-                                    aria-hidden="true"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--btn__icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Button>
-                          </li>
-                          <li
-                            className="bx--buttongroup-item"
-                            key="1"
-                          >
-                            <Button
-                              copy="Button 2"
-                              data-autoid="dds--button-group-1"
-                              href="https://www.example.com"
-                              isExpressive={true}
-                              kind="tertiary"
-                              renderIcon={
-                                Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                }
-                              }
-                              type="button"
-                            >
-                              <a
-                                className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                                copy="Button 2"
-                                data-autoid="dds--button-group-1"
-                                href="https://www.example.com"
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                              >
-                                Button 2
-                                <ForwardRef(ArrowRight20)
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                >
-                                  <Icon
-                                    aria-hidden="true"
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="bx--btn__icon"
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Button>
-                          </li>
-                        </ol>
-                      </ButtonGroup>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </section>
-          </div>
-        </LeadSpace>
-      </TallWithImage>
-    </TallWithNoImage>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Super with image 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--super-with-image",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Super with image",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <TallWithImage
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      defaultSrc="leadspaceMax.jpg"
-      gradient={true}
-      image={
-        Object {
-          "alt": "lead space image",
-          "defaultSrc": "leadspaceMax.jpg",
-          "sources": Array [
-            Object {
-              "breakpoint": "sm",
-              "src": "leadspaceMax.jpg",
-            },
-            Object {
-              "breakpoint": "md",
-              "src": "leadspaceMax.jpg",
-            },
-          ],
-        }
-      }
-      size="super"
-      title="Lead space title"
-    >
-      <LeadSpace
-        buttons={
-          Array [
-            Object {
-              "copy": "Button 1",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-            Object {
-              "copy": "Button 2",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-          ]
-        }
-        copy="Use this area for a short line of copy to support the title"
-        defaultSrc="leadspaceMax.jpg"
-        gradient={true}
-        image={
-          Object {
-            "alt": "lead space image",
-            "defaultSrc": "leadspaceMax.jpg",
-            "sources": Array [
-              Object {
-                "breakpoint": "sm",
-                "src": "leadspaceMax.jpg",
-              },
-              Object {
-                "breakpoint": "md",
-                "src": "leadspaceMax.jpg",
-              },
-            ],
-          }
-        }
-        size="super"
-        theme="white"
-        title="Lead space title"
-      >
-        <div
-          className="bx--leadspace bx--leadspace--super"
-          data-autoid="dds--leadspace"
-        >
-          <section
-            className="bx--leadspace__section bx--leadspace--white"
-          >
-            <div
-              className="bx--leadspace__container"
-            >
-              <div
-                className="bx--leadspace__overlay bx--leadspace--gradient"
-              >
-                <svg
-                  className="bx--leadspace__gradient"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <defs>
-                    <linearGradient
-                      className="bx--leadspace__gradient__stops"
-                      gradientTransform=""
-                      id="stops"
-                    >
-                      <stop
-                        offset="0%"
-                      />
-                      <stop
-                        offset="25%"
-                      />
-                      <stop
-                        offset="50%"
-                      />
-                      <stop
-                        offset="75%"
-                      />
-                    </linearGradient>
-                  </defs>
-                  <rect
-                    className="bx--leadspace__gradient__rect"
-                    height="100"
-                    width="100"
-                  />
-                </svg>
-                <div
-                  className="bx--leadspace--content__container"
-                >
-                  <div
-                    className="bx--leadspace__row"
-                  >
-                    <h1
-                      className="bx--leadspace__title"
-                    >
-                      Lead space title
-                    </h1>
-                  </div>
-                  <div
-                    className="bx--leadspace__content"
-                  >
-                    <div
-                      className="bx--leadspace__row"
-                    >
-                      <p
-                        className="bx--leadspace__desc"
-                        data-autoid="dds--leadspace__desc"
-                      >
-                        Use this area for a short line of copy to support the title
-                      </p>
-                    </div>
-                    <ButtonGroup
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Button 1",
-                            "href": "https://www.example.com",
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                          Object {
-                            "copy": "Button 2",
-                            "href": "https://www.example.com",
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        ]
-                      }
-                    >
-                      <ol
-                        className="bx--buttongroup"
-                        data-autoid="dds--button-group"
-                      >
-                        <li
-                          className="bx--buttongroup-item"
-                          key="0"
-                        >
-                          <Button
-                            copy="Button 1"
-                            data-autoid="dds--button-group-0"
-                            href="https://www.example.com"
-                            isExpressive={true}
-                            kind="primary"
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--primary bx--btn--expressive"
-                              copy="Button 1"
-                              data-autoid="dds--button-group-0"
-                              href="https://www.example.com"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                            >
-                              Button 1
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                        <li
-                          className="bx--buttongroup-item"
-                          key="1"
-                        >
-                          <Button
-                            copy="Button 2"
-                            data-autoid="dds--button-group-1"
-                            href="https://www.example.com"
-                            isExpressive={true}
-                            kind="tertiary"
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                              copy="Button 2"
-                              data-autoid="dds--button-group-1"
-                              href="https://www.example.com"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                            >
-                              Button 2
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                      </ol>
-                    </ButtonGroup>
-                  </div>
-                </div>
-              </div>
-              <Image
-                alt="lead space image"
-                defaultSrc="leadspaceMax.jpg"
-                sources={
-                  Array [
-                    Object {
-                      "breakpoint": "sm",
-                      "src": "leadspaceMax.jpg",
-                    },
-                    Object {
-                      "breakpoint": "md",
-                      "src": "leadspaceMax.jpg",
-                    },
-                  ]
-                }
-              >
-                <div
-                  className="bx--image"
-                  data-autoid="dds--image__longdescription"
-                >
-                  <picture>
-                    <source
-                      key="0"
-                      media="(min-width: 672px)"
-                      srcSet="leadspaceMax.jpg"
-                    />
-                    <source
-                      key="1"
-                      media="(min-width: 320px)"
-                      srcSet="leadspaceMax.jpg"
-                    />
-                    <img
-                      alt="lead space image"
-                      className="bx--image__img"
-                      src="leadspaceMax.jpg"
-                    />
-                  </picture>
-                </div>
-              </Image>
-            </div>
-          </section>
-        </div>
-      </LeadSpace>
-    </TallWithImage>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Tall 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--tall-with-no-image",
-      "__isArgsStory": true,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Tall",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <TallWithImage
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      title="Lead space title"
-    >
-      <LeadSpace
-        buttons={
-          Array [
-            Object {
-              "copy": "Button 1",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-            Object {
-              "copy": "Button 2",
-              "href": "https://www.example.com",
-              "renderIcon": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-          ]
-        }
-        copy="Use this area for a short line of copy to support the title"
-        theme="white"
-        title="Lead space title"
-      >
-        <div
-          className="bx--leadspace bx--leadspace--tall"
-          data-autoid="dds--leadspace"
-        >
-          <section
-            className="bx--leadspace__section bx--leadspace--white"
-          >
-            <div
-              className="bx--leadspace__container"
-            >
-              <div
-                className="bx--leadspace__overlay"
-              >
-                <svg
-                  className="bx--leadspace__gradient"
-                  preserveAspectRatio="none"
-                  viewBox="0 0 100 100"
-                  xmlns="http://www.w3.org/2000/svg"
-                  xmlnsXlink="http://www.w3.org/1999/xlink"
-                >
-                  <defs>
-                    <linearGradient
-                      className="bx--leadspace__gradient__stops"
-                      gradientTransform=""
-                      id="stops"
-                    >
-                      <stop
-                        offset="0%"
-                      />
-                      <stop
-                        offset="25%"
-                      />
-                      <stop
-                        offset="50%"
-                      />
-                      <stop
-                        offset="75%"
-                      />
-                    </linearGradient>
-                  </defs>
-                  <rect
-                    className="bx--leadspace__gradient__rect"
-                    height="100"
-                    width="100"
-                  />
-                </svg>
-                <div
-                  className="bx--leadspace--content__container"
-                >
-                  <div
-                    className="bx--leadspace__row"
-                  >
-                    <h1
-                      className="bx--leadspace__title"
-                    >
-                      Lead space title
-                    </h1>
-                  </div>
-                  <div
-                    className="bx--leadspace__content"
-                  >
-                    <div
-                      className="bx--leadspace__row"
-                    >
-                      <p
-                        className="bx--leadspace__desc"
-                        data-autoid="dds--leadspace__desc"
-                      >
-                        Use this area for a short line of copy to support the title
-                      </p>
-                    </div>
-                    <ButtonGroup
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Button 1",
-                            "href": "https://www.example.com",
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                          Object {
-                            "copy": "Button 2",
-                            "href": "https://www.example.com",
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                          },
-                        ]
-                      }
-                    >
-                      <ol
-                        className="bx--buttongroup"
-                        data-autoid="dds--button-group"
-                      >
-                        <li
-                          className="bx--buttongroup-item"
-                          key="0"
-                        >
-                          <Button
-                            copy="Button 1"
-                            data-autoid="dds--button-group-0"
-                            href="https://www.example.com"
-                            isExpressive={true}
-                            kind="primary"
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--primary bx--btn--expressive"
-                              copy="Button 1"
-                              data-autoid="dds--button-group-0"
-                              href="https://www.example.com"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                            >
-                              Button 1
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                        <li
-                          className="bx--buttongroup-item"
-                          key="1"
-                        >
-                          <Button
-                            copy="Button 2"
-                            data-autoid="dds--button-group-1"
-                            href="https://www.example.com"
-                            isExpressive={true}
-                            kind="tertiary"
-                            renderIcon={
-                              Object {
-                                "$$typeof": Symbol(react.forward_ref),
-                                "render": [Function],
-                              }
-                            }
-                            type="button"
-                          >
-                            <a
-                              className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                              copy="Button 2"
-                              data-autoid="dds--button-group-1"
-                              href="https://www.example.com"
-                              onBlur={[Function]}
-                              onClick={[Function]}
-                              onFocus={[Function]}
-                              onMouseEnter={[Function]}
-                              onMouseLeave={[Function]}
-                              tabIndex={0}
-                            >
-                              Button 2
-                              <ForwardRef(ArrowRight20)
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                              >
-                                <Icon
-                                  aria-hidden="true"
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--btn__icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(ArrowRight20)>
-                            </a>
-                          </Button>
-                        </li>
-                      </ol>
-                    </ButtonGroup>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </section>
-        </div>
-      </LeadSpace>
-    </TallWithImage>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space Tall with image 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space--tall-with-image",
-      "__isArgsStory": true,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpace/__stories__/LeadSpace.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space: Tall with image",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <LeadSpace
-      buttons={
-        Array [
-          Object {
-            "copy": "Button 1",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-          Object {
-            "copy": "Button 2",
-            "href": "https://www.example.com",
-            "renderIcon": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "render": [Function],
-            },
-          },
-        ]
-      }
-      copy="Use this area for a short line of copy to support the title"
-      defaultSrc="leadspaceMax.jpg"
-      image={
-        Object {
-          "alt": "lead space image",
-          "defaultSrc": "leadspaceMax.jpg",
-          "sources": Array [
-            Object {
-              "breakpoint": "sm",
-              "src": "leadspaceMax.jpg",
-            },
-            Object {
-              "breakpoint": "md",
-              "src": "leadspaceMax.jpg",
-            },
-          ],
-        }
-      }
-      theme="white"
-      title="Lead space title"
-    >
-      <div
-        className="bx--leadspace bx--leadspace--tall"
-        data-autoid="dds--leadspace"
-      >
-        <section
-          className="bx--leadspace__section bx--leadspace--white"
-        >
-          <div
-            className="bx--leadspace__container"
-          >
-            <div
-              className="bx--leadspace__overlay bx--leadspace--gradient"
-            >
-              <svg
-                className="bx--leadspace__gradient"
-                preserveAspectRatio="none"
-                viewBox="0 0 100 100"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink"
-              >
-                <defs>
-                  <linearGradient
-                    className="bx--leadspace__gradient__stops"
-                    gradientTransform=""
-                    id="stops"
-                  >
-                    <stop
-                      offset="0%"
-                    />
-                    <stop
-                      offset="25%"
-                    />
-                    <stop
-                      offset="50%"
-                    />
-                    <stop
-                      offset="75%"
-                    />
-                  </linearGradient>
-                </defs>
-                <rect
-                  className="bx--leadspace__gradient__rect"
-                  height="100"
-                  width="100"
-                />
-              </svg>
-              <div
-                className="bx--leadspace--content__container"
-              >
-                <div
-                  className="bx--leadspace__row"
-                >
-                  <h1
-                    className="bx--leadspace__title"
-                  >
-                    Lead space title
-                  </h1>
-                </div>
-                <div
-                  className="bx--leadspace__content"
-                >
-                  <div
-                    className="bx--leadspace__row"
-                  >
-                    <p
-                      className="bx--leadspace__desc"
-                      data-autoid="dds--leadspace__desc"
-                    >
-                      Use this area for a short line of copy to support the title
-                    </p>
-                  </div>
-                  <ButtonGroup
-                    buttons={
-                      Array [
-                        Object {
-                          "copy": "Button 1",
-                          "href": "https://www.example.com",
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                        Object {
-                          "copy": "Button 2",
-                          "href": "https://www.example.com",
-                          "renderIcon": Object {
-                            "$$typeof": Symbol(react.forward_ref),
-                            "render": [Function],
-                          },
-                        },
-                      ]
-                    }
-                  >
-                    <ol
-                      className="bx--buttongroup"
-                      data-autoid="dds--button-group"
-                    >
-                      <li
-                        className="bx--buttongroup-item"
-                        key="0"
-                      >
-                        <Button
-                          copy="Button 1"
-                          data-autoid="dds--button-group-0"
-                          href="https://www.example.com"
-                          isExpressive={true}
-                          kind="primary"
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                          type="button"
-                        >
-                          <a
-                            className="bx--btn bx--btn--primary bx--btn--expressive"
-                            copy="Button 1"
-                            data-autoid="dds--button-group-0"
-                            href="https://www.example.com"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                          >
-                            Button 1
-                            <ForwardRef(ArrowRight20)
-                              aria-hidden="true"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Button>
-                      </li>
-                      <li
-                        className="bx--buttongroup-item"
-                        key="1"
-                      >
-                        <Button
-                          copy="Button 2"
-                          data-autoid="dds--button-group-1"
-                          href="https://www.example.com"
-                          isExpressive={true}
-                          kind="tertiary"
-                          renderIcon={
-                            Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            }
-                          }
-                          type="button"
-                        >
-                          <a
-                            className="bx--btn bx--btn--tertiary bx--btn--expressive"
-                            copy="Button 2"
-                            data-autoid="dds--button-group-1"
-                            href="https://www.example.com"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onFocus={[Function]}
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                            tabIndex={0}
-                          >
-                            Button 2
-                            <ForwardRef(ArrowRight20)
-                              aria-hidden="true"
-                              className="bx--btn__icon"
-                            >
-                              <Icon
-                                aria-hidden="true"
-                                className="bx--btn__icon"
-                                fill="currentColor"
-                                height={20}
-                                preserveAspectRatio="xMidYMid meet"
-                                viewBox="0 0 20 20"
-                                width={20}
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <svg
-                                  aria-hidden={true}
-                                  className="bx--btn__icon"
-                                  fill="currentColor"
-                                  focusable="false"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 20 20"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <path
-                                    d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                  />
-                                </svg>
-                              </Icon>
-                            </ForwardRef(ArrowRight20)>
-                          </a>
-                        </Button>
-                      </li>
-                    </ol>
-                  </ButtonGroup>
-                </div>
-              </div>
-            </div>
-            <Image
-              alt="lead space image"
-              defaultSrc="leadspaceMax.jpg"
-              sources={
-                Array [
-                  Object {
-                    "breakpoint": "sm",
-                    "src": "leadspaceMax.jpg",
-                  },
-                  Object {
-                    "breakpoint": "md",
-                    "src": "leadspaceMax.jpg",
-                  },
-                ]
-              }
-            >
-              <div
-                className="bx--image"
-                data-autoid="dds--image__longdescription"
-              >
-                <picture>
-                  <source
-                    key="0"
-                    media="(min-width: 672px)"
-                    srcSet="leadspaceMax.jpg"
-                  />
-                  <source
-                    key="1"
-                    media="(min-width: 320px)"
-                    srcSet="leadspaceMax.jpg"
-                  />
-                  <img
-                    alt="lead space image"
-                    className="bx--image__img"
-                    src="leadspaceMax.jpg"
-                  />
-                </picture>
-              </div>
-            </Image>
-          </div>
-        </section>
-      </div>
-    </LeadSpace>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space block Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space-block--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpaceBlock/__stories__/LeadSpaceBlock.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space block: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LeadSpaceBlock": Object {
-            "heading": "Innovate like a startup and scale for the enterprise ",
-            "items": Object {
-              "items": Array [
-                Object {
-                  "copy": "IBM Cloud Continuous Delivery",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "UrbanCode",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "View all products",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "download",
-                },
-              ],
-            },
-            "title": "Continuous delivery",
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <LeadSpaceBlock
-            copy="Automate your software release process with continuous delivery (CD)—the most
-      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-      ensuring software is always ready for deployment."
-            cta={
-              Object {
-                "buttons": Array [
-                  Object {
-                    "copy": "Contact sales",
-                    "href": "https://example.com/",
-                    "iconDescription": "right arrow icon",
-                    "onClick": [Function],
-                    "renderIcon": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                    "target": null,
-                    "type": "local",
-                  },
-                ],
-                "style": "button",
-                "type": "local",
-              }
-            }
-            heading="Innovate like a startup and scale for the enterprise "
-            items={
-              Object {
-                "heading": "Featured products",
-                "items": Array [
-                  Object {
-                    "copy": "IBM Cloud Continuous Delivery",
-                    "cta": Object {
-                      "href": "https://ibm.com",
-                    },
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "UrbanCode",
-                    "cta": Object {
-                      "href": "https://ibm.com",
-                    },
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "View all products",
-                    "cta": Object {
-                      "href": "https://ibm.com",
-                    },
-                    "type": "download",
-                  },
-                ],
-              }
-            }
-            mediaData={
-              Object {
-                "heading": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                "image": Object {
-                  "alt": "Image alt text",
-                  "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                  "sources": Array [
-                    Object {
-                      "breakpoint": 320,
-                      "src": "fpo--16x9--320x180--004.jpg",
-                    },
-                    Object {
-                      "breakpoint": 400,
-                      "src": "fpo--16x9--480x270--004.jpg",
-                    },
-                    Object {
-                      "breakpoint": 672,
-                      "src": "fpo--16x9--720x405--004.jpg",
-                    },
-                  ],
-                },
-              }
-            }
-            mediaType="image"
-            title="Continuous delivery"
-          >
-            <div
-              className="bx--leadspace-block"
-              data-autoid="dds--leadspace-block"
-            >
-              <div>
-                <h1
-                  className="bx--leadspace-block__title"
-                  data-autoid="dds--leadspace-block__title"
-                >
-                  Continuous delivery
-                </h1>
-              </div>
-              <ContentBlock
-                border={false}
-                copy="Automate your software release process with continuous delivery (CD)—the most
-      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-      ensuring software is always ready for deployment."
-                heading="Innovate like a startup and scale for the enterprise "
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Innovate like a startup and scale for the enterprise 
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Automate your software release process with continuous delivery (CD)—the most  critical part of adopting DevOps. Build, test, and deploy code changes quickly,  ensuring software is always ready for deployment.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--leadspace-block__media"
-                      data-autoid="dds--leadspace-block__media"
-                    >
-                      <ImageWithCaption
-                        copy=""
-                        heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        image={
-                          Object {
-                            "alt": "Image alt text",
-                            "defaultSrc": "fpo--16x9--720x405--004.jpg",
-                            "sources": Array [
-                              Object {
-                                "breakpoint": 320,
-                                "src": "fpo--16x9--320x180--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 400,
-                                "src": "fpo--16x9--480x270--004.jpg",
-                              },
-                              Object {
-                                "breakpoint": 672,
-                                "src": "fpo--16x9--720x405--004.jpg",
-                              },
-                            ],
-                          }
-                        }
-                        lightbox={false}
-                      >
-                        <div
-                          className="bx--image-with-caption"
-                          data-autoid="dds--image-with-caption"
-                        >
-                          <Image
-                            alt="Image alt text"
-                            defaultSrc="fpo--16x9--720x405--004.jpg"
-                            sources={
-                              Array [
-                                Object {
-                                  "breakpoint": 320,
-                                  "src": "fpo--16x9--320x180--004.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 400,
-                                  "src": "fpo--16x9--480x270--004.jpg",
-                                },
-                                Object {
-                                  "breakpoint": 672,
-                                  "src": "fpo--16x9--720x405--004.jpg",
-                                },
-                              ]
-                            }
-                          >
-                            <div
-                              className="bx--image"
-                              data-autoid="dds--image__longdescription"
-                            >
-                              <picture>
-                                <source
-                                  key="0"
-                                  media="(min-width: 672px)"
-                                  srcSet="fpo--16x9--720x405--004.jpg"
-                                />
-                                <source
-                                  key="1"
-                                  media="(min-width: 400px)"
-                                  srcSet="fpo--16x9--480x270--004.jpg"
-                                />
-                                <source
-                                  key="2"
-                                  media="(min-width: 320px)"
-                                  srcSet="fpo--16x9--320x180--004.jpg"
-                                />
-                                <img
-                                  alt="Image alt text"
-                                  className="bx--image__img"
-                                  src="fpo--16x9--720x405--004.jpg"
-                                />
-                              </picture>
-                            </div>
-                          </Image>
-                          <p
-                            className="bx--image__caption"
-                            data-autoid="dds--image__caption"
-                          >
-                            Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                          </p>
-                        </div>
-                      </ImageWithCaption>
-                    </div>
-                    <LinkList
-                      heading="Featured products"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM Cloud Continuous Delivery",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "UrbanCode",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "View all products",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "download",
-                          },
-                        ]
-                      }
-                      style="vertical-end"
-                    >
-                      <div
-                        className="bx--link-list"
-                        data-autoid="dds--link-list"
-                      >
-                        <h4
-                          className="bx--link-list__heading"
-                        >
-                          Featured products
-                        </h4>
-                        <ul
-                          className="bx--link-list__list bx--link-list__list--vertical-end"
-                        >
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--local"
-                            key="0"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="IBM Cloud Continuous Delivery"
-                              cta={
-                                Object {
-                                  "href": "https://ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={false}
-                              style="text"
-                              type="local"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="IBM Cloud Continuous Delivery"
-                                  cta={
-                                    Object {
-                                      "href": "https://ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={false}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://ibm.com"
-                                    iconInline={false}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon"
-                                        href="https://ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link--lg"
-                                          href="https://ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            IBM Cloud Continuous Delivery
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          />
-                                          <ForwardRef(ArrowRight20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--local"
-                            key="1"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="UrbanCode"
-                              cta={
-                                Object {
-                                  "href": "https://ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={false}
-                              style="text"
-                              type="local"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="UrbanCode"
-                                  cta={
-                                    Object {
-                                      "href": "https://ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={false}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://ibm.com"
-                                    iconInline={false}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon"
-                                        href="https://ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link--lg"
-                                          href="https://ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            UrbanCode
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          />
-                                          <ForwardRef(ArrowRight20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--download"
-                            key="2"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="View all products"
-                              cta={
-                                Object {
-                                  "href": "https://ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={false}
-                              style="text"
-                              type="download"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="View all products"
-                                  cta={
-                                    Object {
-                                      "href": "https://ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={false}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="download"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://ibm.com"
-                                    iconInline={false}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon"
-                                        href="https://ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link--lg"
-                                          href="https://ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            View all products
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          >
-                                             - This link downloads a file
-                                          </span>
-                                          <ForwardRef(Download20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Download20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                        </ul>
-                      </div>
-                    </LinkList>
-                    <CTA
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Contact sales",
-                            "href": "https://example.com/",
-                            "iconDescription": "right arrow icon",
-                            "onClick": [Function],
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                            "target": null,
-                            "type": "local",
-                          },
-                        ]
-                      }
-                      copy=""
-                      customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                      customVideoTitle={null}
-                      href=""
-                      style="button"
-                      type="local"
-                    >
-                      <div
-                        className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                      >
-                        <ButtonCTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customVideoTitle={null}
-                          formatCTAcopy={[Function]}
-                          href=""
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="button"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <ButtonGroup
-                            buttons={
-                              Array [
-                                Object {
-                                  "copy": "Contact sales",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ]
-                            }
-                          >
-                            <ol
-                              className="bx--buttongroup"
-                              data-autoid="dds--button-group"
-                            >
-                              <li
-                                className="bx--buttongroup-item"
-                                key="0"
-                              >
-                                <Button
-                                  copy="Contact sales"
-                                  data-autoid="dds--button-group-0"
-                                  href="https://example.com/"
-                                  iconDescription="right arrow icon"
-                                  isExpressive={true}
-                                  kind="primary"
-                                  onClick={[Function]}
-                                  renderIcon={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                  target={null}
-                                  type="button"
-                                >
-                                  <a
-                                    className="bx--btn bx--btn--primary bx--btn--expressive"
-                                    copy="Contact sales"
-                                    data-autoid="dds--button-group-0"
-                                    href="https://example.com/"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseEnter={[Function]}
-                                    onMouseLeave={[Function]}
-                                    tabIndex={0}
-                                    target={null}
-                                  >
-                                    Contact sales
-                                    <ForwardRef(ArrowRight20)
-                                      aria-hidden="true"
-                                      aria-label="right arrow icon"
-                                      className="bx--btn__icon"
-                                    >
-                                      <Icon
-                                        aria-hidden="true"
-                                        aria-label="right arrow icon"
-                                        className="bx--btn__icon"
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          role="img"
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Button>
-                              </li>
-                            </ol>
-                          </ButtonGroup>
-                        </ButtonCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-              <HorizontalRule>
-                <hr
-                  className="bx--hr"
-                  data-autoid="dds--hr"
-                />
-              </HorizontalRule>
-            </div>
-          </LeadSpaceBlock>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space block With Video 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space-block--with-video",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadSpaceBlock/__stories__/LeadSpaceBlock.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Lead space block: With Video",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LeadSpaceBlock": Object {
-            "heading": "Innovate like a startup and scale for the enterprise ",
-            "items": Object {
-              "items": Array [
-                Object {
-                  "copy": "IBM Cloud Continuous Delivery",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "UrbanCode",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "View all products",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "download",
-                },
-              ],
-            },
-            "title": "Continuous delivery",
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <LeadSpaceBlock
-            copy="Automate your software release process with continuous delivery (CD)—the most
-      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-      ensuring software is always ready for deployment."
-            cta={
-              Object {
-                "buttons": Array [
-                  Object {
-                    "copy": "Contact sales",
-                    "href": "https://example.com/",
-                    "iconDescription": "right arrow icon",
-                    "onClick": [Function],
-                    "renderIcon": Object {
-                      "$$typeof": Symbol(react.forward_ref),
-                      "render": [Function],
-                    },
-                    "target": null,
-                    "type": "local",
-                  },
-                ],
-                "style": "button",
-                "type": "local",
-              }
-            }
-            heading="Innovate like a startup and scale for the enterprise "
-            items={
-              Object {
-                "heading": "Featured products",
-                "items": Array [
-                  Object {
-                    "copy": "IBM Cloud Continuous Delivery",
-                    "cta": Object {
-                      "href": "https://ibm.com",
-                    },
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "UrbanCode",
-                    "cta": Object {
-                      "href": "https://ibm.com",
-                    },
-                    "type": "local",
-                  },
-                  Object {
-                    "copy": "View all products",
-                    "cta": Object {
-                      "href": "https://ibm.com",
-                    },
-                    "type": "download",
-                  },
-                ],
-              }
-            }
-            mediaData={
-              Object {
-                "showCaption": true,
-                "videoId": "1_9h94wo6b",
-              }
-            }
-            mediaType="video"
-            title="Continuous delivery"
-          >
-            <div
-              className="bx--leadspace-block"
-              data-autoid="dds--leadspace-block"
-            >
-              <div>
-                <h1
-                  className="bx--leadspace-block__title"
-                  data-autoid="dds--leadspace-block__title"
-                >
-                  Continuous delivery
-                </h1>
-              </div>
-              <ContentBlock
-                border={false}
-                copy="Automate your software release process with continuous delivery (CD)—the most
-      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-      ensuring software is always ready for deployment."
-                heading="Innovate like a startup and scale for the enterprise "
-              >
-                <div
-                  className="bx--content-block"
-                  data-autoid="dds--content-block"
-                >
-                  <h2
-                    className="bx--content-block__heading"
-                    data-autoid="dds--content-block__heading"
-                  >
-                    Innovate like a startup and scale for the enterprise 
-                  </h2>
-                  <div
-                    className="bx--content-block__copy"
-                    dangerouslySetInnerHTML={
-                      Object {
-                        "__html": "<p>Automate your software release process with continuous delivery (CD)—the most  critical part of adopting DevOps. Build, test, and deploy code changes quickly,  ensuring software is always ready for deployment.</p> ",
-                      }
-                    }
-                  />
-                  <div
-                    className="bx--content-block__children"
-                    data-autoid="dds--content-block__children"
-                  >
-                    <div
-                      className="bx--leadspace-block__media"
-                      data-autoid="dds--leadspace-block__media"
-                    >
-                      <VideoPlayer
-                        autoPlay={false}
-                        playingMode="inline"
-                        showCaption={true}
-                        videoId="1_9h94wo6b"
-                      >
-                        <div
-                          aria-label=" 0"
-                          className="bx--video-player"
-                          role="region"
-                        >
-                          <div
-                            className="bx--video-player__video-container "
-                            data-autoid="dds--video-player__video-1_9h94wo6b"
-                          >
-                            <div
-                              className="bx--video-player__video"
-                              id="bx--video-player__video-1_9h94wo6b-198"
-                            >
-                              <VideoImageOverlay
-                                embedVideo={[Function]}
-                                playingMode="inline"
-                                videoData={
-                                  Object {
-                                    "description": "",
-                                    "name": "",
-                                  }
-                                }
-                                videoId="1_9h94wo6b"
-                              >
-                                <button
-                                  className="bx--video-player__image-overlay"
-                                  data-autoid="dds--video-player__image-overlay"
-                                  onClick={[Function]}
-                                >
-                                  <Image
-                                    alt=""
-                                    defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                    icon={[Function]}
-                                    refImage={[Function]}
-                                  />
-                                </button>
-                              </VideoImageOverlay>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--video-player__video-caption"
-                          >
-                             0
-                          </div>
-                        </div>
-                      </VideoPlayer>
-                    </div>
-                    <LinkList
-                      heading="Featured products"
-                      items={
-                        Array [
-                          Object {
-                            "copy": "IBM Cloud Continuous Delivery",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "UrbanCode",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "local",
-                          },
-                          Object {
-                            "copy": "View all products",
-                            "cta": Object {
-                              "href": "https://ibm.com",
-                            },
-                            "type": "download",
-                          },
-                        ]
-                      }
-                      style="vertical-end"
-                    >
-                      <div
-                        className="bx--link-list"
-                        data-autoid="dds--link-list"
-                      >
-                        <h4
-                          className="bx--link-list__heading"
-                        >
-                          Featured products
-                        </h4>
-                        <ul
-                          className="bx--link-list__list bx--link-list__list--vertical-end"
-                        >
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--local"
-                            key="0"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="IBM Cloud Continuous Delivery"
-                              cta={
-                                Object {
-                                  "href": "https://ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={false}
-                              style="text"
-                              type="local"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="IBM Cloud Continuous Delivery"
-                                  cta={
-                                    Object {
-                                      "href": "https://ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={false}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://ibm.com"
-                                    iconInline={false}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon"
-                                        href="https://ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link--lg"
-                                          href="https://ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            IBM Cloud Continuous Delivery
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          />
-                                          <ForwardRef(ArrowRight20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--local"
-                            key="1"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="UrbanCode"
-                              cta={
-                                Object {
-                                  "href": "https://ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={false}
-                              style="text"
-                              type="local"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="UrbanCode"
-                                  cta={
-                                    Object {
-                                      "href": "https://ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={false}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="local"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://ibm.com"
-                                    iconInline={false}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon"
-                                        href="https://ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link--lg"
-                                          href="https://ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            UrbanCode
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          />
-                                          <ForwardRef(ArrowRight20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 20 20"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(ArrowRight20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                          <li
-                            className="bx--link-list__list__CTA bx--link-list__list--download"
-                            key="2"
-                          >
-                            <CTA
-                              ariaRole="listitem"
-                              copy="View all products"
-                              cta={
-                                Object {
-                                  "href": "https://ibm.com",
-                                }
-                              }
-                              customVideoTitle={null}
-                              disableImage={true}
-                              href=""
-                              iconInline={false}
-                              style="text"
-                              type="download"
-                            >
-                              <div>
-                                <TextCTA
-                                  ariaRole="listitem"
-                                  copy="View all products"
-                                  cta={
-                                    Object {
-                                      "href": "https://ibm.com",
-                                    }
-                                  }
-                                  customVideoTitle={null}
-                                  disableImage={true}
-                                  formatCTAcopy={[Function]}
-                                  href=""
-                                  iconInline={false}
-                                  iconPlacement="right"
-                                  openLightBox={[Function]}
-                                  renderLightBox={false}
-                                  style="text"
-                                  type="download"
-                                  videoTitle={
-                                    Array [
-                                      Object {
-                                        "duration": "",
-                                        "key": 0,
-                                        "title": "",
-                                      },
-                                    ]
-                                  }
-                                >
-                                  <LinkWithIcon
-                                    href="https://ibm.com"
-                                    iconInline={false}
-                                    iconPlacement="right"
-                                    onClick={[Function]}
-                                    target={null}
-                                  >
-                                    <div
-                                      className="bx--link-with-icon__container"
-                                      data-autoid="dds--link-with-icon"
-                                    >
-                                      <Link
-                                        className="bx--link-with-icon"
-                                        href="https://ibm.com"
-                                        onClick={[Function]}
-                                        size="lg"
-                                        target={null}
-                                      >
-                                        <a
-                                          className="bx--link bx--link-with-icon bx--link--lg"
-                                          href="https://ibm.com"
-                                          onClick={[Function]}
-                                          rel={null}
-                                          target={null}
-                                        >
-                                          <span>
-                                            View all products
-                                          </span>
-                                          <span
-                                            className="bx--visually-hidden"
-                                          >
-                                             - This link downloads a file
-                                          </span>
-                                          <ForwardRef(Download20)>
-                                            <Icon
-                                              fill="currentColor"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <svg
-                                                aria-hidden={true}
-                                                fill="currentColor"
-                                                focusable="false"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <path
-                                                  d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                                />
-                                              </svg>
-                                            </Icon>
-                                          </ForwardRef(Download20)>
-                                        </a>
-                                      </Link>
-                                    </div>
-                                  </LinkWithIcon>
-                                </TextCTA>
-                              </div>
-                            </CTA>
-                          </li>
-                        </ul>
-                      </div>
-                    </LinkList>
-                    <CTA
-                      buttons={
-                        Array [
-                          Object {
-                            "copy": "Contact sales",
-                            "href": "https://example.com/",
-                            "iconDescription": "right arrow icon",
-                            "onClick": [Function],
-                            "renderIcon": Object {
-                              "$$typeof": Symbol(react.forward_ref),
-                              "render": [Function],
-                            },
-                            "target": null,
-                            "type": "local",
-                          },
-                        ]
-                      }
-                      copy=""
-                      customClassName="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                      customVideoTitle={null}
-                      href=""
-                      style="button"
-                      type="local"
-                    >
-                      <div
-                        className="bx--leadspace-block__cta bx--leadspace-block__cta-col"
-                      >
-                        <ButtonCTA
-                          buttons={
-                            Array [
-                              Object {
-                                "copy": "Contact sales",
-                                "href": "https://example.com/",
-                                "iconDescription": "right arrow icon",
-                                "onClick": [Function],
-                                "renderIcon": Object {
-                                  "$$typeof": Symbol(react.forward_ref),
-                                  "render": [Function],
-                                },
-                                "target": null,
-                                "type": "local",
-                              },
-                            ]
-                          }
-                          copy=""
-                          customVideoTitle={null}
-                          formatCTAcopy={[Function]}
-                          href=""
-                          openLightBox={[Function]}
-                          renderLightBox={false}
-                          style="button"
-                          type="local"
-                          videoTitle={
-                            Array [
-                              Object {
-                                "duration": "",
-                                "key": 0,
-                                "title": "",
-                              },
-                            ]
-                          }
-                        >
-                          <ButtonGroup
-                            buttons={
-                              Array [
-                                Object {
-                                  "copy": "Contact sales",
-                                  "href": "https://example.com/",
-                                  "iconDescription": "right arrow icon",
-                                  "onClick": [Function],
-                                  "renderIcon": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                  "target": null,
-                                  "type": "local",
-                                },
-                              ]
-                            }
-                          >
-                            <ol
-                              className="bx--buttongroup"
-                              data-autoid="dds--button-group"
-                            >
-                              <li
-                                className="bx--buttongroup-item"
-                                key="0"
-                              >
-                                <Button
-                                  copy="Contact sales"
-                                  data-autoid="dds--button-group-0"
-                                  href="https://example.com/"
-                                  iconDescription="right arrow icon"
-                                  isExpressive={true}
-                                  kind="primary"
-                                  onClick={[Function]}
-                                  renderIcon={
-                                    Object {
-                                      "$$typeof": Symbol(react.forward_ref),
-                                      "render": [Function],
-                                    }
-                                  }
-                                  target={null}
-                                  type="button"
-                                >
-                                  <a
-                                    className="bx--btn bx--btn--primary bx--btn--expressive"
-                                    copy="Contact sales"
-                                    data-autoid="dds--button-group-0"
-                                    href="https://example.com/"
-                                    onBlur={[Function]}
-                                    onClick={[Function]}
-                                    onFocus={[Function]}
-                                    onMouseEnter={[Function]}
-                                    onMouseLeave={[Function]}
-                                    tabIndex={0}
-                                    target={null}
-                                  >
-                                    Contact sales
-                                    <ForwardRef(ArrowRight20)
-                                      aria-hidden="true"
-                                      aria-label="right arrow icon"
-                                      className="bx--btn__icon"
-                                    >
-                                      <Icon
-                                        aria-hidden="true"
-                                        aria-label="right arrow icon"
-                                        className="bx--btn__icon"
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden="true"
-                                          aria-label="right arrow icon"
-                                          className="bx--btn__icon"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          role="img"
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Button>
-                              </li>
-                            </ol>
-                          </ButtonGroup>
-                        </ButtonCTA>
-                      </div>
-                    </CTA>
-                  </div>
-                </div>
-              </ContentBlock>
-              <HorizontalRule>
-                <hr
-                  className="bx--hr"
-                  data-autoid="dds--hr"
-                />
-              </HorizontalRule>
-            </div>
-          </LeadSpaceBlock>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lead space with search Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lead-space-with-search--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeadspaceWithSearch/__stories__/LeadspaceWithSearch.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <LeadspaceWithSearch
-      copy="Duis aute irure dolor in reprehen deritirure"
-      heading="Find a product"
-      searchProps={
-        Object {
-          "labelText": "Search keywords",
-          "onChange": [Function],
-          "onKeyDown": [Function],
-          "placeholder": Object {
-            "desktop": "Search known issues, documentation and support forums",
-            "mobile": "Search keywords",
-          },
-        }
-      }
-    >
-      <section
-        className="bx--leadspace-with-search"
-        data-autoid="dds--leadspace-with-search"
-      >
-        <div
-          className="bx--leadspace-with-search__row"
-        >
-          <div
-            className="bx--leadspace-with-search__content"
-          >
-            <h1
-              className="bx--leadspace-with-search__heading"
-            >
-              Find a product
-            </h1>
-            <p
-              className="bx--leadspace-with-search__copy"
-            >
-              Duis aute irure dolor in reprehen deritirure
-            </p>
-            <Search
-              className="bx--leadspace-with-search__search"
-              closeButtonLabelText="Clear search input"
-              id="bx--leadspace-with-search__search-input"
-              labelText="Search keywords"
-              onChange={[Function]}
-              onClear={[Function]}
-              onKeyDown={[Function]}
-              placeHolderText={null}
-              placeholder={
-                Object {
-                  "desktop": "Search known issues, documentation and support forums",
-                  "mobile": "Search keywords",
-                }
-              }
-              type="text"
-            >
-              <div
-                aria-labelledby="bx--leadspace-with-search__search-input-search"
-                className="bx--search bx--search--xl bx--leadspace-with-search__search"
-                role="search"
-              >
-                <div
-                  className="bx--search-magnifier"
-                >
-                  <ForwardRef(Search16)
-                    className="bx--search-magnifier-icon"
-                  >
-                    <Icon
-                      className="bx--search-magnifier-icon"
-                      fill="currentColor"
-                      height={16}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 16 16"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-hidden={true}
-                        className="bx--search-magnifier-icon"
-                        fill="currentColor"
-                        focusable="false"
-                        height={16}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 16 16"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(Search16)>
-                </div>
-                <label
-                  className="bx--label"
-                  htmlFor="bx--leadspace-with-search__search-input"
-                  id="bx--leadspace-with-search__search-input-search"
-                >
-                  Search keywords
-                </label>
-                <input
-                  autoComplete="off"
-                  className="bx--search-input"
-                  id="bx--leadspace-with-search__search-input"
-                  onChange={[Function]}
-                  onKeyDown={[Function]}
-                  placeholder={
-                    Object {
-                      "desktop": "Search known issues, documentation and support forums",
-                      "mobile": "Search keywords",
-                    }
-                  }
-                  role="searchbox"
-                  type="text"
-                />
-                <button
-                  aria-label="Clear search input"
-                  className="bx--search-close bx--search-close--hidden"
-                  onClick={[Function]}
-                  type="button"
-                >
-                  <ForwardRef(Close16)>
-                    <Icon
-                      fill="currentColor"
-                      height={16}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width={16}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-hidden={true}
-                        fill="currentColor"
-                        focusable="false"
-                        height={16}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 32 32"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(Close16)>
-                </button>
-              </div>
-            </Search>
-          </div>
-        </div>
-      </section>
-    </LeadspaceWithSearch>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Leaving IBM Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-leaving-ibm--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LeavingIBM/__stories__/LeavingIBM.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-leaving-ibm--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lightbox media viewer Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lightbox-media-viewer--default",
-      "__isArgsStory": true,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LightboxMediaViewer/__stories__/LightboxMediaViewer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LightboxMediaViewer": Object {
-            "media": Object {
-              "alt": "Image alt text",
-              "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:",
-              "src": "fpo--16x9--1312x738--002.jpg",
-              "title": "Curabitur malesuada varius mi eu posuere",
-              "type": "image",
-            },
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <LightboxMediaViewer
-      media={
-        Object {
-          "alt": "Image alt text",
-          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:",
-          "src": "fpo--16x9--1312x738--002.jpg",
-          "title": "Curabitur malesuada varius mi eu posuere",
-          "type": "image",
-        }
-      }
-      open={true}
-    >
-      <section
-        className="bx--lightbox-media-viewer"
-        data-autoid="dds--lightbox-media-viewer"
-      >
-        <ExpressiveModal
-          fullwidth={true}
-          onClose={[Function]}
-          open={true}
-        >
-          <ComposedModal
-            className="bx--modal--expressive bx--modal--expressive--fullwidth"
-            data-autoid="dds--expressive-modal"
-            onClose={[Function]}
-            onKeyDown={[Function]}
-            open={true}
-            selectorPrimaryFocus=".bx--modal-close"
-          >
-            <div
-              aria-hidden={false}
-              className="bx--modal is-visible bx--modal--expressive bx--modal--expressive--fullwidth"
-              data-autoid="dds--expressive-modal"
-              onBlur={[Function]}
-              onClick={[Function]}
-              onClose={[Function]}
-              onKeyDown={[Function]}
-              onTransitionEnd={[Function]}
-              open={true}
-              role="presentation"
-            >
-              <div
-                aria-modal="true"
-                className="bx--modal-container"
-                role="dialog"
-              >
-                <button
-                  className="bx--visually-hidden"
-                  type="button"
-                >
-                  Focus sentinel
-                </button>
-                <div
-                  className="bx--modal-container-body"
-                >
-                  <ExpressiveModalCloseBtn
-                    iconDescription="Close"
-                    key=".0"
-                    onClick={[Function]}
-                  >
-                    <button
-                      className="bx--modal-close"
-                      data-autoid="dds--expressive-modal__close"
-                      onClick={[Function]}
-                      title="Close"
-                      type="button"
-                    >
-                      <ForwardRef(Close20)
-                        aria-label="Close"
-                        className="bx--modal-close__icon"
-                      >
-                        <Icon
-                          aria-label="Close"
-                          className="bx--modal-close__icon"
-                          fill="currentColor"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-label="Close"
-                            className="bx--modal-close__icon"
-                            fill="currentColor"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            role="img"
-                            viewBox="0 0 32 32"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Close20)>
-                    </button>
-                  </ExpressiveModalCloseBtn>
-                  <ForwardRef(ModalBody)
-                    key=".1"
-                  >
-                    <div
-                      className="bx--modal-content"
-                    >
-                      <div
-                        className="bx--lightbox-media-viewer__container"
-                      >
-                        <div
-                          className="bx--lightbox-media-viewer__row"
-                        >
-                          <div
-                            className="bx--lightbox-media-viewer__media bx--no-gutter"
-                          >
-                            <Image
-                              alt="Image alt text"
-                              defaultSrc="fpo--16x9--1312x738--002.jpg"
-                            >
-                              <div
-                                className="bx--image"
-                                data-autoid="dds--image__longdescription"
-                              >
-                                <picture>
-                                  <img
-                                    alt="Image alt text"
-                                    className="bx--image__img"
-                                    src="fpo--16x9--1312x738--002.jpg"
-                                  />
-                                </picture>
-                              </div>
-                            </Image>
-                          </div>
-                          <div
-                            className="bx--lightbox-media-viewer__media-description bx--no-gutter"
-                          >
-                            <div
-                              className="bx--lightbox-media-viewer__content"
-                            >
-                              <div
-                                className="bx--lightbox-media-viewer__content__title"
-                                data-autoid="dds--lightbox-media-viewer__content__title"
-                                id="dds-205"
-                              >
-                                Curabitur malesuada varius mi eu posuere
-                              </div>
-                              <div
-                                className="bx--lightbox-media-viewer__content__desc"
-                                data-autoid="dds--lightbox-media-viewer__content__desc"
-                                id="dds-206"
-                              >
-                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:
-                              </div>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </ForwardRef(ModalBody)>
-                </div>
-                <button
-                  className="bx--visually-hidden"
-                  type="button"
-                >
-                  Focus sentinel
-                </button>
-              </div>
-            </div>
-          </ComposedModal>
-        </ExpressiveModal>
-      </section>
-    </LightboxMediaViewer>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Lightbox media viewer Embedded video player 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-lightbox-media-viewer--embedded-video-player",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LightboxMediaViewer/__stories__/LightboxMediaViewer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LightboxMediaViewer": Object {
-            "media": Object {
-              "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:",
-              "src": "1_9h94wo6b",
-              "title": "Curabitur malesuada varius mi eu posuere",
-              "type": "video",
-            },
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      media={
-        Object {
-          "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:",
-          "src": "1_9h94wo6b",
-          "title": "Curabitur malesuada varius mi eu posuere",
-          "type": "video",
-        }
-      }
-      open={true}
-    >
-      <LightboxMediaViewer
-        media={
-          Object {
-            "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:",
-            "src": "1_9h94wo6b",
-            "title": "Curabitur malesuada varius mi eu posuere",
-            "type": "video",
-          }
-        }
-        open={true}
-      >
-        <section
-          className="bx--lightbox-media-viewer"
-          data-autoid="dds--lightbox-media-viewer"
-        >
-          <ExpressiveModal
-            fullwidth={true}
-            onClose={[Function]}
-            open={true}
-          >
-            <ComposedModal
-              className="bx--modal--expressive bx--modal--expressive--fullwidth"
-              data-autoid="dds--expressive-modal"
-              onClose={[Function]}
-              onKeyDown={[Function]}
-              open={true}
-              selectorPrimaryFocus=".bx--modal-close"
-            >
-              <div
-                aria-hidden={false}
-                className="bx--modal is-visible bx--modal--expressive bx--modal--expressive--fullwidth"
-                data-autoid="dds--expressive-modal"
-                onBlur={[Function]}
-                onClick={[Function]}
-                onClose={[Function]}
-                onKeyDown={[Function]}
-                onTransitionEnd={[Function]}
-                open={true}
-                role="presentation"
-              >
-                <div
-                  aria-modal="true"
-                  className="bx--modal-container"
-                  role="dialog"
-                >
-                  <button
-                    className="bx--visually-hidden"
-                    type="button"
-                  >
-                    Focus sentinel
-                  </button>
-                  <div
-                    className="bx--modal-container-body"
-                  >
-                    <ExpressiveModalCloseBtn
-                      iconDescription="Close"
-                      key=".0"
-                      onClick={[Function]}
-                    >
-                      <button
-                        className="bx--modal-close"
-                        data-autoid="dds--expressive-modal__close"
-                        onClick={[Function]}
-                        title="Close"
-                        type="button"
-                      >
-                        <ForwardRef(Close20)
-                          aria-label="Close"
-                          className="bx--modal-close__icon"
-                        >
-                          <Icon
-                            aria-label="Close"
-                            className="bx--modal-close__icon"
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 32 32"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-label="Close"
-                              className="bx--modal-close__icon"
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              role="img"
-                              viewBox="0 0 32 32"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Close20)>
-                      </button>
-                    </ExpressiveModalCloseBtn>
-                    <ForwardRef(ModalBody)
-                      key=".1"
-                    >
-                      <div
-                        className="bx--modal-content"
-                      >
-                        <div
-                          className="bx--lightbox-media-viewer__container"
-                        >
-                          <div
-                            className="bx--lightbox-media-viewer__row"
-                          >
-                            <div
-                              className="bx--lightbox-media-viewer__media bx--no-gutter"
-                            >
-                              <VideoPlayer
-                                autoPlay={true}
-                                playingMode="inline"
-                                videoId="1_9h94wo6b"
-                              >
-                                <div
-                                  aria-label=" 0"
-                                  className="bx--video-player"
-                                  role="region"
-                                >
-                                  <div
-                                    className="bx--video-player__video-container "
-                                    data-autoid="dds--video-player__video-1_9h94wo6b"
-                                  >
-                                    <div
-                                      className="bx--video-player__video"
-                                      id="bx--video-player__video-1_9h94wo6b-213"
-                                    />
-                                  </div>
-                                </div>
-                              </VideoPlayer>
-                            </div>
-                            <div
-                              className="bx--lightbox-media-viewer__media-description bx--no-gutter"
-                            >
-                              <div
-                                className="bx--lightbox-media-viewer__content"
-                              />
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </ForwardRef(ModalBody)>
-                  </div>
-                  <button
-                    className="bx--visually-hidden"
-                    type="button"
-                  >
-                    Focus sentinel
-                  </button>
-                </div>
-              </div>
-            </ComposedModal>
-          </ExpressiveModal>
-        </section>
-      </LightboxMediaViewer>
-    </Default>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Link list Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-link-list--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LinkList/__stories__/LinkList.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Link list: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LinkList": Object {
-            "items": Array [
-              Object {
-                "copy": "Learn more about Kubernetes",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "local",
-              },
-              Object {
-                "copy": "Containerization A Complete Guide",
-                "cta": Object {
-                  "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                },
-                "type": "download",
-              },
-              Object {
-                "copy": "Microservices and containers",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "external",
-              },
-              Object {
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-                "type": "video",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-3 bx--offset-lg-4"
-        >
-          <LinkList
-            heading="Tutorials"
-            items={
-              Array [
-                Object {
-                  "copy": "Learn more about Kubernetes",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Containerization A Complete Guide",
-                  "cta": Object {
-                    "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                  },
-                  "type": "download",
-                },
-                Object {
-                  "copy": "Microservices and containers",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "external",
-                },
-                Object {
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                  "type": "video",
-                },
-              ]
-            }
-            style="card"
-          >
-            <div
-              className="bx--link-list"
-              data-autoid="dds--link-list"
-            >
-              <h4
-                className="bx--link-list__heading"
-              >
-                Tutorials
-              </h4>
-              <ul
-                className="bx--link-list__list bx--link-list__list--card"
-              >
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--local"
-                  key="0"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Learn more about Kubernetes"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    style="card"
-                    type="local"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy="Learn more about Kubernetes"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={null}
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="local"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "Learn more about Kubernetes",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "local",
-                              },
-                              "customVideoTitle": null,
-                              "href": "https://ibm.com",
-                              "media": null,
-                              "size": undefined,
-                              "target": null,
-                            }
-                          }
-                          customClassName="bx--card__CardCTA"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy="Learn more about Kubernetes"
-                            cta={
-                              Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "local",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            href="https://ibm.com"
-                            media={null}
-                            target={null}
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://ibm.com"
-                              light={false}
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://ibm.com"
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Learn more about Kubernetes</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Learn more about Kubernetes"
-                                      className="bx--card__footer"
-                                      href="https://ibm.com"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Learn more about Kubernetes"
-                                        className="bx--link bx--card__footer"
-                                        href="https://ibm.com"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(ArrowRight20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--download"
-                  key="1"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Containerization A Complete Guide"
-                    cta={
-                      Object {
-                        "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    style="card"
-                    type="download"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy="Containerization A Complete Guide"
-                        cta={
-                          Object {
-                            "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={null}
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="download"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "Containerization A Complete Guide",
-                              "cta": Object {
-                                "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "download",
-                              },
-                              "customVideoTitle": null,
-                              "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                              "media": null,
-                              "size": undefined,
-                              "target": null,
-                            }
-                          }
-                          customClassName="bx--card__CardCTA"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy="Containerization A Complete Guide"
-                            cta={
-                              Object {
-                                "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "download",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                            media={null}
-                            target={null}
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                              light={false}
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Containerization A Complete Guide</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Containerization A Complete Guide - This link downloads a file"
-                                      className="bx--card__footer"
-                                      href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Containerization A Complete Guide - This link downloads a file"
-                                        className="bx--link bx--card__footer"
-                                        href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(Download20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Download20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--external"
-                  key="2"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Microservices and containers"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    style="card"
-                    type="external"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy="Microservices and containers"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={null}
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="external"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "Microservices and containers",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "external",
-                              },
-                              "customVideoTitle": null,
-                              "href": "https://ibm.com",
-                              "media": null,
-                              "size": undefined,
-                              "target": "_blank",
-                            }
-                          }
-                          customClassName="bx--card__CardCTA"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy="Microservices and containers"
-                            cta={
-                              Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "external",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            href="https://ibm.com"
-                            media={null}
-                            target="_blank"
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://ibm.com"
-                              light={false}
-                              media={null}
-                              target="_blank"
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://ibm.com"
-                                media={null}
-                                target="_blank"
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Microservices and containers</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Microservices and containers - This link opens in a new tab"
-                                      className="bx--card__footer"
-                                      href="https://ibm.com"
-                                      target="_blank"
-                                    >
-                                      <a
-                                        aria-label="Microservices and containers - This link opens in a new tab"
-                                        className="bx--link bx--card__footer"
-                                        href="https://ibm.com"
-                                        rel="noopener"
-                                        target="_blank"
-                                      >
-                                        <ForwardRef(Launch20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                              />
-                                              <path
-                                                d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Launch20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--video"
-                  key="3"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy=""
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    media={
-                      Object {
-                        "src": "1_9h94wo6b",
-                        "type": "video",
-                      }
-                    }
-                    style="card"
-                    type="video"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy=""
-                        cta={null}
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={
-                          Object {
-                            "src": "1_9h94wo6b",
-                            "type": "video",
-                          }
-                        }
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="video"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "",
-                              "cta": Object {
-                                "copy": "",
-                                "handleClick": [Function],
-                                "href": "#",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "iconPlacement": "left",
-                              },
-                              "customVideoTitle": null,
-                              "heading": "",
-                              "href": "",
-                              "image": undefined,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "size": undefined,
-                            }
-                          }
-                          customClassName="bx--card__CardCTA bx--card__video"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy=""
-                            cta={
-                              Object {
-                                "copy": "",
-                                "handleClick": [Function],
-                                "href": "#",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "iconPlacement": "left",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                            customVideoTitle={null}
-                            heading=""
-                            href=""
-                            media={
-                              Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              }
-                            }
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href=""
-                              light={false}
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href=""
-                                media={
-                                  Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <Link
-                                      aria-label=""
-                                      className="bx--card__footer bx--card__footer__icon-left"
-                                      href="#"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label=""
-                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                        href="#"
-                                        onClick={[Function]}
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(PlayOutline20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                              />
-                                              <path
-                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(PlayOutline20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-              </ul>
-            </div>
-          </LinkList>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Link list End of section 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-link-list--end-of-section",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LinkList/__stories__/LinkList.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Link list: End of section",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LinkList": Object {
-            "items": Array [
-              Object {
-                "copy": "Learn more about Kubernetes",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "local",
-              },
-              Object {
-                "copy": "Containerization A Complete Guide",
-                "cta": Object {
-                  "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                },
-                "type": "download",
-              },
-              Object {
-                "copy": "Microservices and containers",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "external",
-              },
-              Object {
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-                "type": "video",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <LinkList
-            heading="Tutorials"
-            items={
-              Array [
-                Object {
-                  "copy": "Learn more about Kubernetes",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Containerization A Complete Guide",
-                  "cta": Object {
-                    "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                  },
-                  "type": "download",
-                },
-                Object {
-                  "copy": "Microservices and containers",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "external",
-                },
-                Object {
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                  "type": "video",
-                },
-              ]
-            }
-            style="vertical-end"
-          >
-            <div
-              className="bx--link-list"
-              data-autoid="dds--link-list"
-            >
-              <h4
-                className="bx--link-list__heading"
-              >
-                Tutorials
-              </h4>
-              <ul
-                className="bx--link-list__list bx--link-list__list--vertical-end"
-              >
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--local"
-                  key="0"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Learn more about Kubernetes"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={false}
-                    style="text"
-                    type="local"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Learn more about Kubernetes"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={false}
-                        iconPlacement="right"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="local"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={false}
-                          iconPlacement="right"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Learn more about Kubernetes
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                />
-                                <ForwardRef(ArrowRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--download"
-                  key="1"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Containerization A Complete Guide"
-                    cta={
-                      Object {
-                        "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={false}
-                    style="text"
-                    type="download"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Containerization A Complete Guide"
-                        cta={
-                          Object {
-                            "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={false}
-                        iconPlacement="right"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="download"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                          iconInline={false}
-                          iconPlacement="right"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon"
-                              href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link--lg"
-                                href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Containerization A Complete Guide
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link downloads a file
-                                </span>
-                                <ForwardRef(Download20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Download20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--external"
-                  key="2"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Microservices and containers"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={false}
-                    style="text"
-                    type="external"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Microservices and containers"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={false}
-                        iconPlacement="right"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="external"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={false}
-                          iconPlacement="right"
-                          onClick={[Function]}
-                          target="_blank"
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target="_blank"
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel="noopener"
-                                target="_blank"
-                              >
-                                <span>
-                                  Microservices and containers
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link opens in a new tab
-                                </span>
-                                <ForwardRef(Launch20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                      />
-                                      <path
-                                        d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Launch20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--video"
-                  key="3"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy=""
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={false}
-                    media={
-                      Object {
-                        "src": "1_9h94wo6b",
-                        "type": "video",
-                      }
-                    }
-                    style="text"
-                    type="video"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy=""
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={false}
-                        iconPlacement="right"
-                        media={
-                          Object {
-                            "src": "1_9h94wo6b",
-                            "type": "video",
-                          }
-                        }
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="video"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="#"
-                          iconInline={false}
-                          iconPlacement="right"
-                          onClick={[Function]}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon"
-                              href="#"
-                              onClick={[Function]}
-                              size="lg"
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link--lg"
-                                href="#"
-                                onClick={[Function]}
-                                rel={null}
-                              >
-                                <span>
-                                   
-                                  <span
-                                    className="bx--visually-hidden"
-                                  >
-                                     - This link plays a video
-                                  </span>
-                                </span>
-                                <ForwardRef(PlayOutline20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                      />
-                                      <path
-                                        d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(PlayOutline20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-              </ul>
-            </div>
-          </LinkList>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Link list Horizontal 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-link-list--horizontal",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LinkList/__stories__/LinkList.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Link list: Horizontal",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LinkList": Object {
-            "items": Array [
-              Object {
-                "copy": "Learn more about Kubernetes",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "local",
-              },
-              Object {
-                "copy": "Containerization A Complete Guide",
-                "cta": Object {
-                  "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                },
-                "type": "download",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-10 bx--offset-lg-4"
-        >
-          <LinkList
-            heading="Tutorials"
-            iconPlacement="right"
-            items={
-              Array [
-                Object {
-                  "copy": "Learn more about Kubernetes",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Containerization A Complete Guide",
-                  "cta": Object {
-                    "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                  },
-                  "type": "download",
-                },
-              ]
-            }
-            style="horizontal"
-          >
-            <div
-              className="bx--link-list"
-              data-autoid="dds--link-list"
-            >
-              <h4
-                className="bx--link-list__heading"
-              >
-                Tutorials
-              </h4>
-              <ul
-                className="bx--link-list__list bx--link-list__list--horizontal"
-              >
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--local"
-                  key="0"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Learn more about Kubernetes"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="right"
-                    style="text"
-                    type="local"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Learn more about Kubernetes"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="right"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="local"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={true}
-                          iconPlacement="right"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Learn more about Kubernetes
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                />
-                                <ForwardRef(ArrowRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 20 20"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 20 20"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowRight20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--download"
-                  key="1"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Containerization A Complete Guide"
-                    cta={
-                      Object {
-                        "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="right"
-                    style="text"
-                    type="download"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Containerization A Complete Guide"
-                        cta={
-                          Object {
-                            "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="right"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="download"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                          iconInline={true}
-                          iconPlacement="right"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                              href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Containerization A Complete Guide
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link downloads a file
-                                </span>
-                                <ForwardRef(Download20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Download20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-              </ul>
-            </div>
-          </LinkList>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Link list Vertical 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-link-list--vertical",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LinkList/__stories__/LinkList.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Link list: Vertical",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LinkList": Object {
-            "items": Array [
-              Object {
-                "copy": "Learn more about Kubernetes",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "local",
-              },
-              Object {
-                "copy": "Containerization A Complete Guide",
-                "cta": Object {
-                  "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                },
-                "type": "download",
-              },
-              Object {
-                "copy": "Microservices and containers",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "external",
-              },
-              Object {
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-                "type": "video",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-4 bx--offset-lg-4"
-        >
-          <LinkList
-            heading="Tutorials"
-            iconPlacement="left"
-            items={
-              Array [
-                Object {
-                  "copy": "Learn more about Kubernetes",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Containerization A Complete Guide",
-                  "cta": Object {
-                    "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                  },
-                  "type": "download",
-                },
-                Object {
-                  "copy": "Microservices and containers",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "external",
-                },
-              ]
-            }
-            style="vertical"
-          >
-            <div
-              className="bx--link-list"
-              data-autoid="dds--link-list"
-            >
-              <h4
-                className="bx--link-list__heading"
-              >
-                Tutorials
-              </h4>
-              <ul
-                className="bx--link-list__list bx--link-list__list--vertical"
-              >
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--local"
-                  key="0"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Learn more about Kubernetes"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    style="text"
-                    type="local"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Learn more about Kubernetes"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="local"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Learn more about Kubernetes
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                />
-                                <ForwardRef(ArrowLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M14 26L15.41 24.59 7.83 17 28 17 28 15 7.83 15 15.41 7.41 14 6 4 16 14 26z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowLeft20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--download"
-                  key="1"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Containerization A Complete Guide"
-                    cta={
-                      Object {
-                        "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    style="text"
-                    type="download"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Containerization A Complete Guide"
-                        cta={
-                          Object {
-                            "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="download"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Containerization A Complete Guide
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link downloads a file
-                                </span>
-                                <ForwardRef(Download20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Download20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--external"
-                  key="2"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Microservices and containers"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    style="text"
-                    type="external"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Microservices and containers"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="external"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                          target="_blank"
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target="_blank"
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel="noopener"
-                                target="_blank"
-                              >
-                                <span>
-                                  Microservices and containers
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link opens in a new tab
-                                </span>
-                                <ForwardRef(Launch20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                      />
-                                      <path
-                                        d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Launch20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-              </ul>
-            </div>
-          </LinkList>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Link list Vertical with cards 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-link-list--vertical-with-cards",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LinkList/__stories__/LinkList.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Link list: Vertical with cards",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LinkList": Object {
-            "items": Array [
-              Object {
-                "copy": "Learn more about Kubernetes",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "local",
-              },
-              Object {
-                "copy": "Containerization A Complete Guide",
-                "cta": Object {
-                  "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                },
-                "type": "download",
-              },
-              Object {
-                "copy": "Microservices and containers",
-                "cta": Object {
-                  "href": "https://ibm.com",
-                },
-                "type": "external",
-              },
-              Object {
-                "media": Object {
-                  "src": "1_9h94wo6b",
-                  "type": "video",
-                },
-                "type": "video",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-4 bx--offset-lg-4"
-        >
-          <LinkList
-            heading="Tutorials"
-            iconPlacement="left"
-            items={
-              Array [
-                Object {
-                  "copy": "Learn more about Kubernetes",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Containerization A Complete Guide",
-                  "cta": Object {
-                    "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                  },
-                  "type": "download",
-                },
-                Object {
-                  "copy": "Microservices and containers",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "external",
-                },
-                Object {
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                  "type": "video",
-                },
-              ]
-            }
-            style="vertical"
-          >
-            <div
-              className="bx--link-list"
-              data-autoid="dds--link-list"
-            >
-              <h4
-                className="bx--link-list__heading"
-              >
-                Tutorials
-              </h4>
-              <ul
-                className="bx--link-list__list bx--link-list__list--vertical"
-              >
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--local"
-                  key="0"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Learn more about Kubernetes"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    style="text"
-                    type="local"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Learn more about Kubernetes"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="local"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Learn more about Kubernetes
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                />
-                                <ForwardRef(ArrowLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M14 26L15.41 24.59 7.83 17 28 17 28 15 7.83 15 15.41 7.41 14 6 4 16 14 26z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(ArrowLeft20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--download"
-                  key="1"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Containerization A Complete Guide"
-                    cta={
-                      Object {
-                        "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    style="text"
-                    type="download"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Containerization A Complete Guide"
-                        cta={
-                          Object {
-                            "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="download"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                          target={null}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                              onClick={[Function]}
-                              size="lg"
-                              target={null}
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                onClick={[Function]}
-                                rel={null}
-                                target={null}
-                              >
-                                <span>
-                                  Containerization A Complete Guide
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link downloads a file
-                                </span>
-                                <ForwardRef(Download20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Download20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--external"
-                  key="2"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Microservices and containers"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    style="text"
-                    type="external"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy="Microservices and containers"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="external"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="https://ibm.com"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                          target="_blank"
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="https://ibm.com"
-                              onClick={[Function]}
-                              size="lg"
-                              target="_blank"
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="https://ibm.com"
-                                onClick={[Function]}
-                                rel="noopener"
-                                target="_blank"
-                              >
-                                <span>
-                                  Microservices and containers
-                                </span>
-                                <span
-                                  className="bx--visually-hidden"
-                                >
-                                   - This link opens in a new tab
-                                </span>
-                                <ForwardRef(Launch20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                      />
-                                      <path
-                                        d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Launch20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--video"
-                  key="3"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy=""
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    iconInline={true}
-                    iconPlacement="left"
-                    media={
-                      Object {
-                        "src": "1_9h94wo6b",
-                        "type": "video",
-                      }
-                    }
-                    style="text"
-                    type="video"
-                  >
-                    <div>
-                      <TextCTA
-                        ariaRole="listitem"
-                        copy=""
-                        customVideoTitle={null}
-                        disableImage={true}
-                        formatCTAcopy={[Function]}
-                        href=""
-                        iconInline={true}
-                        iconPlacement="left"
-                        media={
-                          Object {
-                            "src": "1_9h94wo6b",
-                            "type": "video",
-                          }
-                        }
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="text"
-                        type="video"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <LinkWithIcon
-                          href="#"
-                          iconInline={true}
-                          iconPlacement="left"
-                          onClick={[Function]}
-                        >
-                          <div
-                            className="bx--link-with-icon__container"
-                            data-autoid="dds--link-with-icon"
-                          >
-                            <Link
-                              className="bx--link-with-icon bx--link-with-icon__icon-left"
-                              href="#"
-                              onClick={[Function]}
-                              size="lg"
-                            >
-                              <a
-                                className="bx--link bx--link-with-icon bx--link-with-icon__icon-left bx--link--lg"
-                                href="#"
-                                onClick={[Function]}
-                                rel={null}
-                              >
-                                <span>
-                                   
-                                  <span
-                                    className="bx--visually-hidden"
-                                  >
-                                     - This link plays a video
-                                  </span>
-                                </span>
-                                <ForwardRef(PlayOutline20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                      />
-                                      <path
-                                        d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(PlayOutline20)>
-                              </a>
-                            </Link>
-                          </div>
-                        </LinkWithIcon>
-                      </TextCTA>
-                    </div>
-                  </CTA>
-                </li>
-              </ul>
-            </div>
-          </LinkList>
-          <LinkList
-            heading="Tutorials"
-            items={
-              Array [
-                Object {
-                  "copy": "Learn more about Kubernetes",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "local",
-                },
-                Object {
-                  "copy": "Containerization A Complete Guide",
-                  "cta": Object {
-                    "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                  },
-                  "type": "download",
-                },
-                Object {
-                  "copy": "Microservices and containers",
-                  "cta": Object {
-                    "href": "https://ibm.com",
-                  },
-                  "type": "external",
-                },
-                Object {
-                  "media": Object {
-                    "src": "1_9h94wo6b",
-                    "type": "video",
-                  },
-                  "type": "video",
-                },
-              ]
-            }
-            style="card"
-          >
-            <div
-              className="bx--link-list"
-              data-autoid="dds--link-list"
-            >
-              <h4
-                className="bx--link-list__heading"
-              >
-                Tutorials
-              </h4>
-              <ul
-                className="bx--link-list__list bx--link-list__list--card"
-              >
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--local"
-                  key="0"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Learn more about Kubernetes"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    style="card"
-                    type="local"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy="Learn more about Kubernetes"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={null}
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="local"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "Learn more about Kubernetes",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "local",
-                              },
-                              "customVideoTitle": null,
-                              "href": "https://ibm.com",
-                              "media": null,
-                              "size": undefined,
-                              "target": null,
-                            }
-                          }
-                          customClassName="bx--card__CardCTA"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy="Learn more about Kubernetes"
-                            cta={
-                              Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "local",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            href="https://ibm.com"
-                            media={null}
-                            target={null}
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://ibm.com"
-                              light={false}
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://ibm.com"
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Learn more about Kubernetes</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Learn more about Kubernetes"
-                                      className="bx--card__footer"
-                                      href="https://ibm.com"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Learn more about Kubernetes"
-                                        className="bx--link bx--card__footer"
-                                        href="https://ibm.com"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(ArrowRight20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 20 20"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 20 20"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(ArrowRight20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--download"
-                  key="1"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Containerization A Complete Guide"
-                    cta={
-                      Object {
-                        "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    style="card"
-                    type="download"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy="Containerization A Complete Guide"
-                        cta={
-                          Object {
-                            "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={null}
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="download"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "Containerization A Complete Guide",
-                              "cta": Object {
-                                "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "download",
-                              },
-                              "customVideoTitle": null,
-                              "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                              "media": null,
-                              "size": undefined,
-                              "target": null,
-                            }
-                          }
-                          customClassName="bx--card__CardCTA"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy="Containerization A Complete Guide"
-                            cta={
-                              Object {
-                                "href": "https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "download",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                            media={null}
-                            target={null}
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                              light={false}
-                              media={null}
-                              target={null}
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                media={null}
-                                target={null}
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Containerization A Complete Guide</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Containerization A Complete Guide - This link downloads a file"
-                                      className="bx--card__footer"
-                                      href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label="Containerization A Complete Guide - This link downloads a file"
-                                        className="bx--link bx--card__footer"
-                                        href="https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf"
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(Download20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Download20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--external"
-                  key="2"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy="Microservices and containers"
-                    cta={
-                      Object {
-                        "href": "https://ibm.com",
-                      }
-                    }
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    style="card"
-                    type="external"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy="Microservices and containers"
-                        cta={
-                          Object {
-                            "href": "https://ibm.com",
-                          }
-                        }
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={null}
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="external"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "Microservices and containers",
-                              "cta": Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "external",
-                              },
-                              "customVideoTitle": null,
-                              "href": "https://ibm.com",
-                              "media": null,
-                              "size": undefined,
-                              "target": "_blank",
-                            }
-                          }
-                          customClassName="bx--card__CardCTA"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy="Microservices and containers"
-                            cta={
-                              Object {
-                                "href": "https://ibm.com",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "type": "external",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA"
-                            customVideoTitle={null}
-                            href="https://ibm.com"
-                            media={null}
-                            target="_blank"
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href="https://ibm.com"
-                              light={false}
-                              media={null}
-                              target="_blank"
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href="https://ibm.com"
-                                media={null}
-                                target="_blank"
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <div
-                                      className="bx--card__copy"
-                                      dangerouslySetInnerHTML={
-                                        Object {
-                                          "__html": "<p>Microservices and containers</p> ",
-                                        }
-                                      }
-                                    />
-                                    <Link
-                                      aria-label="Microservices and containers - This link opens in a new tab"
-                                      className="bx--card__footer"
-                                      href="https://ibm.com"
-                                      target="_blank"
-                                    >
-                                      <a
-                                        aria-label="Microservices and containers - This link opens in a new tab"
-                                        className="bx--link bx--card__footer"
-                                        href="https://ibm.com"
-                                        rel="noopener"
-                                        target="_blank"
-                                      >
-                                        <ForwardRef(Launch20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z"
-                                              />
-                                              <path
-                                                d="M20 2L20 4 26.586 4 18 12.586 19.414 14 28 5.414 28 12 30 12 30 2 20 2z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(Launch20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-                <li
-                  className="bx--link-list__list__CTA bx--link-list__list--video"
-                  key="3"
-                >
-                  <CTA
-                    ariaRole="listitem"
-                    copy=""
-                    customVideoTitle={null}
-                    disableImage={true}
-                    href=""
-                    media={
-                      Object {
-                        "src": "1_9h94wo6b",
-                        "type": "video",
-                      }
-                    }
-                    style="card"
-                    type="video"
-                  >
-                    <div>
-                      <CardCTA
-                        ariaRole="listitem"
-                        copy=""
-                        cta={null}
-                        customVideoTitle={null}
-                        disableImage={true}
-                        href=""
-                        media={
-                          Object {
-                            "src": "1_9h94wo6b",
-                            "type": "video",
-                          }
-                        }
-                        openLightBox={[Function]}
-                        renderLightBox={false}
-                        style="card"
-                        type="video"
-                        videoTitle={
-                          Array [
-                            Object {
-                              "duration": "",
-                              "key": 0,
-                              "title": "",
-                            },
-                          ]
-                        }
-                      >
-                        <CardLink
-                          card={
-                            Object {
-                              "ariaRole": "listitem",
-                              "copy": "",
-                              "cta": Object {
-                                "copy": "",
-                                "handleClick": [Function],
-                                "href": "#",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "iconPlacement": "left",
-                              },
-                              "customVideoTitle": null,
-                              "heading": "",
-                              "href": "",
-                              "image": undefined,
-                              "media": Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              },
-                              "size": undefined,
-                            }
-                          }
-                          customClassName="bx--card__CardCTA bx--card__video"
-                          disabled={false}
-                        >
-                          <Card
-                            ariaRole="listitem"
-                            copy=""
-                            cta={
-                              Object {
-                                "copy": "",
-                                "handleClick": [Function],
-                                "href": "#",
-                                "icon": Object {
-                                  "src": Object {
-                                    "$$typeof": Symbol(react.forward_ref),
-                                    "render": [Function],
-                                  },
-                                },
-                                "iconPlacement": "left",
-                              }
-                            }
-                            customClassName="bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                            customVideoTitle={null}
-                            heading=""
-                            href=""
-                            media={
-                              Object {
-                                "src": "1_9h94wo6b",
-                                "type": "video",
-                              }
-                            }
-                          >
-                            <Tile
-                              ariaRole="listitem"
-                              className="bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                              customVideoTitle={null}
-                              data-autoid="dds--card"
-                              href=""
-                              light={false}
-                              media={
-                                Object {
-                                  "src": "1_9h94wo6b",
-                                  "type": "video",
-                                }
-                              }
-                            >
-                              <div
-                                ariaRole="listitem"
-                                className="bx--tile bx--card bx--card-link bx--card__CTA bx--card__CardCTA bx--card__video"
-                                customVideoTitle={null}
-                                data-autoid="dds--card"
-                                href=""
-                                media={
-                                  Object {
-                                    "src": "1_9h94wo6b",
-                                    "type": "video",
-                                  }
-                                }
-                              >
-                                <div
-                                  className="bx--card__wrapper"
-                                >
-                                  <div
-                                    className="bx--card__content"
-                                  >
-                                    <Link
-                                      aria-label=""
-                                      className="bx--card__footer bx--card__footer__icon-left"
-                                      href="#"
-                                      onClick={[Function]}
-                                      target={null}
-                                    >
-                                      <a
-                                        aria-label=""
-                                        className="bx--link bx--card__footer bx--card__footer__icon-left"
-                                        href="#"
-                                        onClick={[Function]}
-                                        rel={null}
-                                        target={null}
-                                      >
-                                        <ForwardRef(PlayOutline20)
-                                          className="bx--card__cta"
-                                          src={
-                                            Object {
-                                              "$$typeof": Symbol(react.forward_ref),
-                                              "render": [Function],
-                                            }
-                                          }
-                                        >
-                                          <Icon
-                                            className="bx--card__cta"
-                                            fill="currentColor"
-                                            height={20}
-                                            preserveAspectRatio="xMidYMid meet"
-                                            src={
-                                              Object {
-                                                "$$typeof": Symbol(react.forward_ref),
-                                                "render": [Function],
-                                              }
-                                            }
-                                            viewBox="0 0 32 32"
-                                            width={20}
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <svg
-                                              aria-hidden={true}
-                                              className="bx--card__cta"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height={20}
-                                              preserveAspectRatio="xMidYMid meet"
-                                              src={
-                                                Object {
-                                                  "$$typeof": Symbol(react.forward_ref),
-                                                  "render": [Function],
-                                                }
-                                              }
-                                              viewBox="0 0 32 32"
-                                              width={20}
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z"
-                                              />
-                                              <path
-                                                d="M16,4A12,12,0,1,1,4,16,12,12,0,0,1,16,4m0-2A14,14,0,1,0,30,16,14,14,0,0,0,16,2Z"
-                                              />
-                                            </svg>
-                                          </Icon>
-                                        </ForwardRef(PlayOutline20)>
-                                      </a>
-                                    </Link>
-                                  </div>
-                                </div>
-                              </div>
-                            </Tile>
-                          </Card>
-                        </CardLink>
-                      </CardCTA>
-                    </div>
-                  </CTA>
-                </li>
-              </ul>
-            </div>
-          </LinkList>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Link with icon Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-link-with-icon--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LinkWithIcon/__stories__/LinkWithIcon.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Link with icon: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      style={
-        Object {
-          "alignItems": "center",
-          "display": "flex",
-          "flexDirection": "column",
-          "padding": "2rem",
-        }
-      }
-    >
-      <LinkWithIcon
-        disabled={false}
-        href="https://www.example.com"
-        iconInline={true}
-        iconPlacement="right"
-        visited={false}
-      >
-        <div
-          className="bx--link-with-icon__container"
-          data-autoid="dds--link-with-icon"
-        >
-          <Link
-            className="bx--link-with-icon bx--link-with-icon--inline-icon"
-            disabled={false}
-            href="https://www.example.com"
-            size="lg"
-            visited={false}
-          >
-            <a
-              className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-              href="https://www.example.com"
-              rel={null}
-            >
-              <span>
-                Link text
-              </span>
-              <ForwardRef(ArrowRight20)>
-                <Icon
-                  fill="currentColor"
-                  height={20}
-                  preserveAspectRatio="xMidYMid meet"
-                  viewBox="0 0 20 20"
-                  width={20}
-                  xmlns="http://www.w3.org/2000/svg"
-                >
-                  <svg
-                    aria-hidden={true}
-                    fill="currentColor"
-                    focusable="false"
-                    height={20}
-                    preserveAspectRatio="xMidYMid meet"
-                    viewBox="0 0 20 20"
-                    width={20}
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                    />
-                  </svg>
-                </Icon>
-              </ForwardRef(ArrowRight20)>
-            </a>
-          </Link>
-        </div>
-      </LinkWithIcon>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Locale modal Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-locale-modal--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LocaleModal/__stories__/LocaleModal.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Locale modal: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <LocaleModal
-      closeFunc={[Function]}
-      isOpen={true}
-      localeData={null}
-      localeDisplay={null}
-      setIsOpen={[Function]}
-    >
-      <ComposedModal
-        className="bx--locale-modal-container"
-        data-autoid="dds--locale-modal"
-        onClose={[Function]}
-        onKeyDown={[Function]}
-        open={true}
-        selectorPrimaryFocus=".bx--modal-close"
-      >
-        <div
-          aria-hidden={false}
-          className="bx--modal is-visible bx--locale-modal-container"
-          data-autoid="dds--locale-modal"
-          onBlur={[Function]}
-          onClick={[Function]}
-          onClose={[Function]}
-          onKeyDown={[Function]}
-          onTransitionEnd={[Function]}
-          open={true}
-          role="presentation"
-        >
-          <div
-            aria-label={
-              Array [
-                undefined,
-                <ForwardRef(EarthFilled16)
-                  className="bx--locale-modal__label-globe"
-                />,
-              ]
-            }
-            aria-modal="true"
-            className="bx--modal-container"
-            role="dialog"
-          >
-            <button
-              className="bx--visually-hidden"
-              type="button"
-            >
-              Focus sentinel
-            </button>
-            <div
-              className="bx--modal-container-body"
-            >
-              <ModalHeader
-                buttonOnClick={[Function]}
-                closeModal={[Function]}
-                iconDescription="Close"
-                key=".0"
-                label={
-                  Array [
-                    undefined,
-                    <ForwardRef(EarthFilled16)
-                      className="bx--locale-modal__label-globe"
-                    />,
-                  ]
-                }
-              >
-                <div
-                  className="bx--modal-header"
-                >
-                  <h2
-                    className="bx--modal-header__label bx--type-delta"
-                  >
-                    <ForwardRef(EarthFilled16)
-                      className="bx--locale-modal__label-globe"
-                      key="earthfilled"
-                    >
-                      <Icon
-                        className="bx--locale-modal__label-globe"
-                        fill="currentColor"
-                        height={16}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 32 32"
-                        width={16}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          aria-hidden={true}
-                          className="bx--locale-modal__label-globe"
-                          fill="currentColor"
-                          focusable="false"
-                          height={16}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 32 32"
-                          width={16}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M16,2A14,14,0,1,0,30,16,14.0158,14.0158,0,0,0,16,2ZM4.02,16.394l1.3384.4458L7,19.3027v1.2831a1,1,0,0,0,.2929.7071L10,24v2.3765A11.9941,11.9941,0,0,1,4.02,16.394ZM16,28a11.9682,11.9682,0,0,1-2.5718-.2847L14,26l1.8046-4.5116a1,1,0,0,0-.0964-.9261l-1.4113-2.117A1,1,0,0,0,13.4648,18h-4.93L7.2866,16.1274,9.4141,14H11v2h2V13.2656l3.8682-6.7695-1.7364-.9922L14.2769,7H11.5352l-1.086-1.6289A11.861,11.861,0,0,1,20,4.7V8a1,1,0,0,0,1,1h1.4648a1,1,0,0,0,.8321-.4453l.8769-1.3154A12.0331,12.0331,0,0,1,26.8945,11H22.82a1,1,0,0,0-.9806.8039l-.7221,4.4708a1,1,0,0,0,.54,1.0539L25,19l.6851,4.0557A11.9793,11.9793,0,0,1,16,28Z"
-                          />
-                        </svg>
-                      </Icon>
-                    </ForwardRef(EarthFilled16)>
-                  </h2>
-                  <button
-                    aria-label="Close"
-                    className="bx--modal-close"
-                    onClick={[Function]}
-                    title="Close"
-                    type="button"
-                  >
-                    <ForwardRef(Close20)
-                      className="bx--modal-close__icon"
-                    >
-                      <Icon
-                        className="bx--modal-close__icon"
-                        fill="currentColor"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          aria-hidden={true}
-                          className="bx--modal-close__icon"
-                          fill="currentColor"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                          />
-                        </svg>
-                      </Icon>
-                    </ForwardRef(Close20)>
-                  </button>
-                </div>
-              </ModalHeader>
-              <ForwardRef(ModalBody)
-                className="bx--locale-modal "
-                key=".1"
-              >
-                <div
-                  className="bx--modal-content bx--locale-modal "
-                >
-                  <LocaleModalRegions
-                    regionList={Array []}
-                    setClearResults={[Function]}
-                    setCurrentRegion={[Function]}
-                    setIsFiltering={[Function]}
-                  >
-                    <div
-                      className="bx--grid bx--no-gutter bx--locale-modal__regions"
-                    >
-                      <div
-                        className="bx--row"
-                      />
-                    </div>
-                  </LocaleModalRegions>
-                  <LocaleModalCountries
-                    regionList={Array []}
-                    searchLabel="Search by location or language"
-                    setClearResults={[Function]}
-                  >
-                    <div
-                      className="bx--locale-modal__filter"
-                    >
-                      <div
-                        className="bx--locale-modal__search"
-                      >
-                        <Search
-                          closeButtonLabelText="Clear search input"
-                          data-autoid="dds--locale-modal__filter"
-                          id="bx--locale-modal__filter"
-                          labelText="Search by location or language"
-                          onChange={[Function]}
-                          onClear={[Function]}
-                          placeholder=""
-                          tabIndex="0"
-                          type="text"
-                        >
-                          <div
-                            aria-labelledby="bx--locale-modal__filter-search"
-                            className="bx--search bx--search--xl"
-                            role="search"
-                          >
-                            <div
-                              className="bx--search-magnifier"
-                            >
-                              <ForwardRef(Search16)
-                                className="bx--search-magnifier-icon"
-                              >
-                                <Icon
-                                  className="bx--search-magnifier-icon"
-                                  fill="currentColor"
-                                  height={16}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 16 16"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    className="bx--search-magnifier-icon"
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={16}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 16 16"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M15,14.3L10.7,10c1.9-2.3,1.6-5.8-0.7-7.7S4.2,0.7,2.3,3S0.7,8.8,3,10.7c2,1.7,5,1.7,7,0l4.3,4.3L15,14.3z M2,6.5	C2,4,4,2,6.5,2S11,4,11,6.5S9,11,6.5,11S2,9,2,6.5z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(Search16)>
-                            </div>
-                            <label
-                              className="bx--label"
-                              htmlFor="bx--locale-modal__filter"
-                              id="bx--locale-modal__filter-search"
-                            >
-                              Search by location or language
-                            </label>
-                            <input
-                              autoComplete="off"
-                              className="bx--search-input"
-                              data-autoid="dds--locale-modal__filter"
-                              id="bx--locale-modal__filter"
-                              onChange={[Function]}
-                              onKeyDown={[Function]}
-                              placeholder=""
-                              role="searchbox"
-                              tabIndex="0"
-                              type="text"
-                            />
-                            <button
-                              aria-label="Clear search input"
-                              className="bx--search-close bx--search-close--hidden"
-                              onClick={[Function]}
-                              type="button"
-                            >
-                              <ForwardRef(Close16)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={16}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={16}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={16}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={16}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(Close16)>
-                            </button>
-                          </div>
-                        </Search>
-                        <p
-                          className="bx--locale-modal__search-text"
-                        />
-                      </div>
-                      <ul
-                        className="bx--locale-modal__list"
-                      >
-                        <p
-                          aria-live="assertive"
-                          className="bx--assistive-text"
-                          role="status"
-                        />
-                      </ul>
-                    </div>
-                  </LocaleModalCountries>
-                </div>
-              </ForwardRef(ModalBody)>
-            </div>
-            <button
-              className="bx--visually-hidden"
-              type="button"
-            >
-              Focus sentinel
-            </button>
-          </div>
-        </div>
-      </ComposedModal>
-    </LocaleModal>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Logo grid Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-logo-grid--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "carbon-theme": Object {
-        "disabled": true,
-      },
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/LogoGrid/__stories__/LogoGrid.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Logo grid: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "LogoGrid": Object {
-            "logosGroup": Array [
-              Object {
-                "altText": "Microsoft",
-                "imgSrc": "logo-microsoft.png",
-                "label": "Microsoft",
-              },
-              Object {
-                "altText": "Dell",
-                "imgSrc": "logo-dell.png",
-                "label": "Dell",
-              },
-              Object {
-                "altText": "Rabobank",
-                "imgSrc": "logo-rabobank.png",
-                "label": "Rabobank",
-              },
-              Object {
-                "altText": "Adobe",
-                "imgSrc": "logo-adobe.png",
-                "label": "Adobe",
-              },
-              Object {
-                "altText": "US Bank",
-                "imgSrc": "logo-usbank.png",
-                "label": "US Bank",
-              },
-              Object {
-                "altText": "Cisco",
-                "imgSrc": "logo-cisco.png",
-                "label": "Cisco",
-              },
-            ],
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-2"
-        >
-          <LogoGrid
-            ctaCopy=""
-            ctaHref=""
-            heading="Our customers"
-            hideBorder={false}
-            logosGroup={
-              Array [
-                Object {
-                  "altText": "Microsoft",
-                  "imgSrc": "logo-microsoft.png",
-                  "label": "Microsoft",
-                },
-                Object {
-                  "altText": "Dell",
-                  "imgSrc": "logo-dell.png",
-                  "label": "Dell",
-                },
-                Object {
-                  "altText": "Rabobank",
-                  "imgSrc": "logo-rabobank.png",
-                  "label": "Rabobank",
-                },
-                Object {
-                  "altText": "Adobe",
-                  "imgSrc": "logo-adobe.png",
-                  "label": "Adobe",
-                },
-                Object {
-                  "altText": "US Bank",
-                  "imgSrc": "logo-usbank.png",
-                  "label": "US Bank",
-                },
-                Object {
-                  "altText": "Cisco",
-                  "imgSrc": "logo-cisco.png",
-                  "label": "Cisco",
-                },
-              ]
-            }
-            showCta={false}
-          >
-            <section
-              className="bx--logo-grid"
-              data-autoid="dds--logo-grid"
-            >
-              <div
-                className="bx--logo-grid__container"
-              >
-                <div
-                  className="bx--logo-grid__wrapper"
-                >
-                  <ContentBlock
-                    border={false}
-                    cta={null}
-                    heading="Our customers"
-                  >
-                    <div
-                      className="bx--content-block"
-                      data-autoid="dds--content-block"
-                    >
-                      <h2
-                        className="bx--content-block__heading"
-                        data-autoid="dds--content-block__heading"
-                      >
-                        Our customers
-                      </h2>
-                      <div
-                        className="bx--content-block__children"
-                        data-autoid="dds--content-block__children"
-                      >
-                        <div
-                          className="bx--logo-grid__row"
-                        >
-                          <div
-                            className="bx--logo-grid__col"
-                            key="0"
-                          >
-                            <div
-                              className="bx--logo-grid__logo"
-                              key="Microsoft"
-                            >
-                              <Image
-                                alt="Microsoft"
-                                classname="bx--logo-grid_img"
-                                defaultSrc="logo-microsoft.png"
-                                longDescription="Microsoft"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Microsoft"
-                                      aria-describedby="bx--image-214"
-                                      className="bx--image__img bx--logo-grid_img"
-                                      src="logo-microsoft.png"
-                                    />
-                                  </picture>
-                                  <div
-                                    className="bx--image__longdescription"
-                                    id="bx--image-214"
-                                  >
-                                    Microsoft
-                                  </div>
-                                </div>
-                              </Image>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--logo-grid__col"
-                            key="1"
-                          >
-                            <div
-                              className="bx--logo-grid__logo"
-                              key="Dell"
-                            >
-                              <Image
-                                alt="Dell"
-                                classname="bx--logo-grid_img"
-                                defaultSrc="logo-dell.png"
-                                longDescription="Dell"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Dell"
-                                      aria-describedby="bx--image-215"
-                                      className="bx--image__img bx--logo-grid_img"
-                                      src="logo-dell.png"
-                                    />
-                                  </picture>
-                                  <div
-                                    className="bx--image__longdescription"
-                                    id="bx--image-215"
-                                  >
-                                    Dell
-                                  </div>
-                                </div>
-                              </Image>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--logo-grid__col"
-                            key="2"
-                          >
-                            <div
-                              className="bx--logo-grid__logo"
-                              key="Rabobank"
-                            >
-                              <Image
-                                alt="Rabobank"
-                                classname="bx--logo-grid_img"
-                                defaultSrc="logo-rabobank.png"
-                                longDescription="Rabobank"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Rabobank"
-                                      aria-describedby="bx--image-216"
-                                      className="bx--image__img bx--logo-grid_img"
-                                      src="logo-rabobank.png"
-                                    />
-                                  </picture>
-                                  <div
-                                    className="bx--image__longdescription"
-                                    id="bx--image-216"
-                                  >
-                                    Rabobank
-                                  </div>
-                                </div>
-                              </Image>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--logo-grid__col"
-                            key="3"
-                          >
-                            <div
-                              className="bx--logo-grid__logo"
-                              key="Adobe"
-                            >
-                              <Image
-                                alt="Adobe"
-                                classname="bx--logo-grid_img"
-                                defaultSrc="logo-adobe.png"
-                                longDescription="Adobe"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Adobe"
-                                      aria-describedby="bx--image-217"
-                                      className="bx--image__img bx--logo-grid_img"
-                                      src="logo-adobe.png"
-                                    />
-                                  </picture>
-                                  <div
-                                    className="bx--image__longdescription"
-                                    id="bx--image-217"
-                                  >
-                                    Adobe
-                                  </div>
-                                </div>
-                              </Image>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--logo-grid__col"
-                            key="4"
-                          >
-                            <div
-                              className="bx--logo-grid__logo"
-                              key="US Bank"
-                            >
-                              <Image
-                                alt="US Bank"
-                                classname="bx--logo-grid_img"
-                                defaultSrc="logo-usbank.png"
-                                longDescription="US Bank"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="US Bank"
-                                      aria-describedby="bx--image-218"
-                                      className="bx--image__img bx--logo-grid_img"
-                                      src="logo-usbank.png"
-                                    />
-                                  </picture>
-                                  <div
-                                    className="bx--image__longdescription"
-                                    id="bx--image-218"
-                                  >
-                                    US Bank
-                                  </div>
-                                </div>
-                              </Image>
-                            </div>
-                          </div>
-                          <div
-                            className="bx--logo-grid__col"
-                            key="5"
-                          >
-                            <div
-                              className="bx--logo-grid__logo"
-                              key="Cisco"
-                            >
-                              <Image
-                                alt="Cisco"
-                                classname="bx--logo-grid_img"
-                                defaultSrc="logo-cisco.png"
-                                longDescription="Cisco"
-                              >
-                                <div
-                                  className="bx--image"
-                                  data-autoid="dds--image__longdescription"
-                                >
-                                  <picture>
-                                    <img
-                                      alt="Cisco"
-                                      aria-describedby="bx--image-219"
-                                      className="bx--image__img bx--logo-grid_img"
-                                      src="logo-cisco.png"
-                                    />
-                                  </picture>
-                                  <div
-                                    className="bx--image__longdescription"
-                                    id="bx--image-219"
-                                  >
-                                    Cisco
-                                  </div>
-                                </div>
-                              </Image>
-                            </div>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </ContentBlock>
-                </div>
-              </div>
-              <HorizontalRule>
-                <hr
-                  className="bx--hr"
-                  data-autoid="dds--hr"
-                />
-              </HorizontalRule>
-            </section>
-          </LogoGrid>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Masthead Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--default",
-      "__isArgsStory": true,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Masthead: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Masthead
-      customProfileLogin={null}
-      hasProfile={true}
-      hasSearch={true}
-      initialSearchTerm=""
-      mastheadL1Data={null}
-      navigation="default"
-      placeHolderText="Search all of IBM"
-      platform={null}
-      searchOpenOnload={false}
-      selectedMenuItem="Consulting & Services"
-    >
-      <HeaderContainer
-        isSideNavExpanded={false}
-        render={[Function]}
-      >
-        <render
-          isSideNavExpanded={false}
-          onClickSideNavExpand={[Function]}
-        >
-          <div
-            className="bx--masthead"
-          >
-            <div
-              className="bx--masthead__l0"
-            >
-              <Header
-                aria-label="IBM"
-                data-autoid="dds--masthead"
-              >
-                <header
-                  aria-label="IBM"
-                  className="bx--header"
-                  data-autoid="dds--masthead"
-                >
-                  <SkipToContent
-                    href="#main-content"
-                    tabIndex="0"
-                  >
-                    <a
-                      className="bx--skip-to-content"
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      Skip to main content
-                    </a>
-                  </SkipToContent>
-                  <HeaderMenuButton
-                    aria-label="Open menu"
-                    className=""
-                    data-autoid="dds--masthead-default-sidenav__l0-menu"
-                    isActive={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="Open menu"
-                      className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      title="Open menu"
-                      type="button"
-                    >
-                      <ForwardRef(Menu20)>
-                        <Icon
-                          fill="currentColor"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 20 20"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-hidden={true}
-                            fill="currentColor"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Menu20)>
-                    </button>
-                  </HeaderMenuButton>
-                  <MastheadLeftNav
-                    backButtonText="Back"
-                    customProfileLogin={null}
-                    hasL1Data={false}
-                    isSideNavExpanded={false}
-                    navType="default"
-                    navigation={Array []}
-                    onOverlayClick={[Function]}
-                    platform={null}
-                    selectedMenuItem="Consulting & Services"
-                  >
-                    <SideNav
-                      addFocusListeners={true}
-                      addMouseListeners={true}
-                      aria-label="Side navigation"
-                      defaultExpanded={false}
-                      expanded={false}
-                      isChildOfHeader={true}
-                      isFixedNav={false}
-                      isPersistent={false}
-                      onOverlayClick={[Function]}
-                    >
-                      <div
-                        className="bx--side-nav__overlay"
-                        onClick={[Function]}
-                      />
-                      <nav
-                        aria-label="Side navigation"
-                        className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                        onBlur={[Function]}
-                        onFocus={[Function]}
-                      >
-                        <nav
-                          data-autoid="dds--masthead-default-sidenav__l0"
-                        >
-                          <SideNavItems>
-                            <ul
-                              className="bx--side-nav__items"
-                            >
-                              <HeaderSideNavItems
-                                hasDivider={false}
-                                key=".0"
-                              >
-                                <ul
-                                  className="bx--side-nav__header-navigation"
-                                >
-                                  <div>
-                                    <SideNavMenuSection
-                                      focusNode={
-                                        <button
-                                          aria-label="Open menu"
-                                          class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                          data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                          title="Open menu"
-                                          type="button"
-                                        >
-                                          <svg
-                                            aria-hidden="true"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height="20"
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width="20"
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                            />
-                                          </svg>
-                                        </button>
-                                      }
-                                      id="panel__(-1,-1)"
-                                      onBackClick={[Function]}
-                                      show={true}
-                                    >
-                                      <div
-                                        aria-hidden={false}
-                                        className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                        id="panel__(-1,-1)"
-                                      >
-                                        <button
-                                          className="bx--masthead__focus"
-                                          onFocus={[Function]}
-                                        >
-                                          focus trapping button
-                                        </button>
-                                      </div>
-                                    </SideNavMenuSection>
-                                  </div>
-                                </ul>
-                              </HeaderSideNavItems>
-                            </ul>
-                          </SideNavItems>
-                        </nav>
-                      </nav>
-                    </SideNav>
-                  </MastheadLeftNav>
-                  <IbmLogo
-                    autoid="dds--masthead-default__l0-logo"
-                    isSearchActive={false}
-                  >
-                    <div
-                      className="bx--header__logo"
-                    >
-                      <ConditionalWrapper
-                        wrapper={[Function]}
-                      >
-                        <a
-                          aria-label="IBM®"
-                          data-autoid="dds--masthead-default__l0-logo"
-                          href="https://www.ibm.com"
-                        >
-                          <MastheadLogo
-                            height="23"
-                            viewBox="0 0 58 23"
-                            width="58"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                fill="none"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </MastheadLogo>
-                        </a>
-                      </ConditionalWrapper>
-                    </div>
-                  </IbmLogo>
-                  <div
-                    className="bx--header__search "
-                  >
-                    <MastheadTopNav
-                      customProfileLogin={null}
-                      hasCurrentUrl={[Function]}
-                      navType="default"
-                      navigation={Array []}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
-                          <div
-                            className="bx--header__nav-content"
-                          >
-                            <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label="IBM"
-                              data-autoid="dds--masthead__l0-nav"
-                            >
-                              <nav
-                                aria-label="IBM"
-                                className="bx--header__nav"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <ul
-                                  aria-label="IBM"
-                                  className="bx--header__menu-bar"
-                                />
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
-                            <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
-                          </div>
-                        </div>
-                      </HeaderNavContainer>
-                      <div
-                        className="bx--masthead__overlay"
-                      />
-                    </MastheadTopNav>
-                    <ForwardRef
-                      customProfileLogin={null}
-                      initialSearchTerm=""
-                      isSearchActive={false}
-                      navType="default"
-                      onChangeSearchActive={[Function]}
-                      placeHolderText="Search all of IBM"
-                      renderValue={3}
-                      searchOpenOnload={false}
-                    >
-                      <div
-                        className="bx--masthead__search"
-                        data-autoid="dds--masthead__search"
-                      >
-                        <div
-                          className="bx--header__search--actions"
-                        >
-                          <HeaderGlobalAction
-                            aria-label="Open IBM search field"
-                            className="bx--header__search--search"
-                            data-autoid="dds--masthead-default__l0-search"
-                            onClick={[Function]}
-                            tabIndex={0}
-                          >
-                            <Button
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search bx--header__action"
-                              data-autoid="dds--masthead-default__l0-search"
-                              hasIconOnly={true}
-                              iconDescription="Open IBM search field"
-                              onClick={[Function]}
-                              tabIndex={0}
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Open IBM search field"
-                                aria-pressed={null}
-                                className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Open IBM search field
-                                </div>
-                                <ForwardRef(Search20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Search20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                          <HeaderGlobalAction
-                            aria-label="Clear input"
-                            className="bx--header__search--close"
-                            data-autoid="dds--masthead-default__l0-search--close"
-                            onClick={[Function]}
-                            part="close-button"
-                          >
-                            <Button
-                              aria-label="Clear input"
-                              className="bx--header__search--close bx--header__action"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              hasIconOnly={true}
-                              iconDescription="Clear input"
-                              onClick={[Function]}
-                              part="close-button"
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Clear input"
-                                aria-pressed={null}
-                                className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                part="close-button"
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Clear input
-                                </div>
-                                <ForwardRef(Close20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Close20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                        </div>
-                      </div>
-                    </ForwardRef>
-                  </div>
-                  <HeaderGlobalBar
-                    className="bx--header__profile"
-                  >
-                    <div
-                      className="bx--header__global bx--header__profile"
-                    >
-                      <MastheadProfile
-                        navType="default"
-                        overflowMenuItemProps={
-                          Object {
-                            "wrapperClassName": "bx--masthead__profile-item",
-                          }
-                        }
-                        overflowMenuProps={
-                          Object {
-                            "ariaLabel": "User Profile",
-                            "data-autoid": "dds--masthead-default__l0-account",
-                            "flipped": true,
-                            "onOpen": [Function],
-                            "renderIcon": [Function],
-                            "style": Object {
-                              "width": "3rem",
-                            },
-                          }
-                        }
-                        profileMenu={Array []}
-                      >
-                        <ForwardRef(OverflowMenu)
-                          ariaLabel="User Profile"
-                          className="bx--header__action"
-                          data-autoid="dds--masthead-default__l0-account"
-                          flipped={true}
-                          onOpen={[Function]}
-                          renderIcon={[Function]}
-                          style={
-                            Object {
-                              "width": "3rem",
-                            }
-                          }
-                        >
-                          <OverflowMenu
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            direction="bottom"
-                            flipped={true}
-                            focusTrap={true}
-                            iconDescription="Open and close list of options"
-                            innerRef={null}
-                            light={false}
-                            menuOffset={[Function]}
-                            menuOffsetFlip={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            onOpen={[Function]}
-                            open={false}
-                            renderIcon={[Function]}
-                            selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <ClickListener
-                              onClickOutside={[Function]}
-                            >
-                              <button
-                                aria-controls={null}
-                                aria-expanded={false}
-                                aria-haspopup={true}
-                                aria-label="User Profile"
-                                className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                data-autoid="dds--masthead-default__l0-account"
-                                onClick={[Function]}
-                                onClose={[Function]}
-                                onKeyDown={[Function]}
-                                open={false}
-                                style={
-                                  Object {
-                                    "width": "3rem",
-                                  }
-                                }
-                                type="button"
-                              >
-                                <renderIcon
-                                  aria-label="Open and close list of options"
-                                  className="bx--overflow-menu__icon"
-                                >
-                                  <ForwardRef(User20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(User20)>
-                                </renderIcon>
-                              </button>
-                            </ClickListener>
-                          </OverflowMenu>
-                        </ForwardRef(OverflowMenu)>
-                      </MastheadProfile>
-                    </div>
-                  </HeaderGlobalBar>
-                </header>
-              </Header>
-            </div>
-          </div>
-        </render>
-      </HeaderContainer>
-    </Masthead>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Masthead Search open onload 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--search-open-onload",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Masthead: Search open onload",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Masthead
-      customProfileLogin={null}
-      hasProfile={true}
-      hasSearch={true}
-      initialSearchTerm=""
-      mastheadL1Data={null}
-      navigation="default"
-      placeHolderText="Search all of IBM"
-      platform={null}
-      searchOpenOnload={true}
-      selectedMenuItem="Consulting & Services"
-    >
-      <HeaderContainer
-        isSideNavExpanded={false}
-        render={[Function]}
-      >
-        <render
-          isSideNavExpanded={false}
-          onClickSideNavExpand={[Function]}
-        >
-          <div
-            className="bx--masthead"
-          >
-            <div
-              className="bx--masthead__l0"
-            >
-              <Header
-                aria-label="IBM"
-                data-autoid="dds--masthead"
-              >
-                <header
-                  aria-label="IBM"
-                  className="bx--header"
-                  data-autoid="dds--masthead"
-                >
-                  <SkipToContent
-                    href="#main-content"
-                    tabIndex="0"
-                  >
-                    <a
-                      className="bx--skip-to-content"
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      Skip to main content
-                    </a>
-                  </SkipToContent>
-                  <HeaderMenuButton
-                    aria-label="Open menu"
-                    className="bx--masthead__header--search-active"
-                    data-autoid="dds--masthead-default-sidenav__l0-menu"
-                    isActive={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="Open menu"
-                      className="bx--masthead__header--search-active bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      title="Open menu"
-                      type="button"
-                    >
-                      <ForwardRef(Menu20)>
-                        <Icon
-                          fill="currentColor"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 20 20"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-hidden={true}
-                            fill="currentColor"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Menu20)>
-                    </button>
-                  </HeaderMenuButton>
-                  <MastheadLeftNav
-                    backButtonText="Back"
-                    customProfileLogin={null}
-                    hasL1Data={false}
-                    isSideNavExpanded={false}
-                    navType="default"
-                    navigation={Array []}
-                    onOverlayClick={[Function]}
-                    platform={null}
-                    selectedMenuItem="Consulting & Services"
-                  >
-                    <SideNav
-                      addFocusListeners={true}
-                      addMouseListeners={true}
-                      aria-label="Side navigation"
-                      defaultExpanded={false}
-                      expanded={false}
-                      isChildOfHeader={true}
-                      isFixedNav={false}
-                      isPersistent={false}
-                      onOverlayClick={[Function]}
-                    >
-                      <div
-                        className="bx--side-nav__overlay"
-                        onClick={[Function]}
-                      />
-                      <nav
-                        aria-label="Side navigation"
-                        className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                        onBlur={[Function]}
-                        onFocus={[Function]}
-                      >
-                        <nav
-                          data-autoid="dds--masthead-default-sidenav__l0"
-                        >
-                          <SideNavItems>
-                            <ul
-                              className="bx--side-nav__items"
-                            >
-                              <HeaderSideNavItems
-                                hasDivider={false}
-                                key=".0"
-                              >
-                                <ul
-                                  className="bx--side-nav__header-navigation"
-                                >
-                                  <div>
-                                    <SideNavMenuSection
-                                      focusNode={
-                                        <button
-                                          aria-label="Open menu"
-                                          class="bx--masthead__header--search-active bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                          data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                          title="Open menu"
-                                          type="button"
-                                        >
-                                          <svg
-                                            aria-hidden="true"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height="20"
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width="20"
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                            />
-                                          </svg>
-                                        </button>
-                                      }
-                                      id="panel__(-1,-1)"
-                                      onBackClick={[Function]}
-                                      show={true}
-                                    >
-                                      <div
-                                        aria-hidden={false}
-                                        className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                        id="panel__(-1,-1)"
-                                      >
-                                        <button
-                                          className="bx--masthead__focus"
-                                          onFocus={[Function]}
-                                        >
-                                          focus trapping button
-                                        </button>
-                                      </div>
-                                    </SideNavMenuSection>
-                                  </div>
-                                </ul>
-                              </HeaderSideNavItems>
-                            </ul>
-                          </SideNavItems>
-                        </nav>
-                      </nav>
-                    </SideNav>
-                  </MastheadLeftNav>
-                  <IbmLogo
-                    autoid="dds--masthead-default__l0-logo"
-                    isSearchActive={true}
-                  >
-                    <div
-                      className="bx--header__logo bx--search-active"
-                    >
-                      <ConditionalWrapper
-                        wrapper={[Function]}
-                      >
-                        <a
-                          aria-label="IBM®"
-                          data-autoid="dds--masthead-default__l0-logo"
-                          href="https://www.ibm.com"
-                        >
-                          <MastheadLogo
-                            height="23"
-                            viewBox="0 0 58 23"
-                            width="58"
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                fill="none"
-                                fillRule="evenodd"
-                              />
-                            </svg>
-                          </MastheadLogo>
-                        </a>
-                      </ConditionalWrapper>
-                    </div>
-                  </IbmLogo>
-                  <div
-                    className="bx--header__search bx--masthead__header--search-active"
-                  >
-                    <MastheadTopNav
-                      customProfileLogin={null}
-                      hasCurrentUrl={[Function]}
-                      navType="default"
-                      navigation={Array []}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
-                          <div
-                            className="bx--header__nav-content"
-                          >
-                            <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label="IBM"
-                              data-autoid="dds--masthead__l0-nav"
-                            >
-                              <nav
-                                aria-label="IBM"
-                                className="bx--header__nav"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <ul
-                                  aria-label="IBM"
-                                  className="bx--header__menu-bar"
-                                />
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
-                            <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
-                          </div>
-                        </div>
-                      </HeaderNavContainer>
-                      <div
-                        className="bx--masthead__overlay"
-                      />
-                    </MastheadTopNav>
-                    <ForwardRef
-                      customProfileLogin={null}
-                      initialSearchTerm=""
-                      isSearchActive={true}
-                      navType="default"
-                      onChangeSearchActive={[Function]}
-                      placeHolderText="Search all of IBM"
-                      renderValue={3}
-                      searchOpenOnload={true}
-                    >
-                      <div
-                        className="bx--masthead__search bx--masthead__search--active"
-                        data-autoid="dds--masthead__search"
-                      >
-                        <form
-                          action="https://www.ibm.com/search?lnk=mhsrch"
-                          id="bx--masthead__search--form"
-                          method="get"
-                        >
-                          <input
-                            name="lang"
-                            type="hidden"
-                            value="en"
-                          />
-                          <input
-                            name="cc"
-                            type="hidden"
-                            value="us"
-                          />
-                          <input
-                            name="lnk"
-                            type="hidden"
-                            value="mhsrch"
-                          />
-                          <Autosuggest
-                            alwaysRenderSuggestions={false}
-                            containerProps={
-                              Object {
-                                "aria-expanded": null,
-                                "aria-haspopup": null,
-                                "aria-label": null,
-                                "aria-owns": null,
-                                "role": null,
-                              }
-                            }
-                            focusInputOnSuggestionClick={false}
-                            getSuggestionValue={[Function]}
-                            highlightFirstSuggestion={false}
-                            id="1"
-                            inputProps={
-                              Object {
-                                "aria-expanded": true,
-                                "aria-label": "Search all of IBM",
-                                "className": "bx--header__search--input",
-                                "id": "bx--header__search--input",
-                                "onChange": [Function],
-                                "onKeyDown": [Function],
-                                "placeholder": "Search all of IBM",
-                                "role": "combobox",
-                                "value": "",
-                              }
-                            }
-                            multiSection={false}
-                            onSuggestionSelected={[Function]}
-                            onSuggestionsClearRequested={[Function]}
-                            onSuggestionsFetchRequested={[Function]}
-                            renderInputComponent={[Function]}
-                            renderSuggestion={[Function]}
-                            renderSuggestionsContainer={[Function]}
-                            shouldKeepSuggestionsOnSelect={[Function]}
-                            shouldRenderSuggestions={[Function]}
-                            suggestions={Array []}
-                            theme={
-                              Object {
-                                "container": "react-autosuggest__container",
-                                "containerOpen": "react-autosuggest__container--open",
-                                "input": "react-autosuggest__input",
-                                "inputFocused": "react-autosuggest__input--focused",
-                                "inputOpen": "react-autosuggest__input--open",
-                                "sectionContainer": "react-autosuggest__section-container",
-                                "sectionContainerFirst": "react-autosuggest__section-container--first",
-                                "sectionTitle": "react-autosuggest__section-title",
-                                "suggestion": "react-autosuggest__suggestion",
-                                "suggestionFirst": "react-autosuggest__suggestion--first",
-                                "suggestionHighlighted": "react-autosuggest__suggestion--highlighted",
-                                "suggestionsContainer": "react-autosuggest__suggestions-container",
-                                "suggestionsContainerOpen": "react-autosuggest__suggestions-container--open",
-                                "suggestionsList": "react-autosuggest__suggestions-list",
-                              }
-                            }
-                          >
-                            <Autowhatever
-                              containerProps={
-                                Object {
-                                  "aria-expanded": null,
-                                  "aria-haspopup": null,
-                                  "aria-label": null,
-                                  "aria-owns": null,
-                                  "role": null,
-                                }
-                              }
-                              getSectionItems={[Function]}
-                              highlightedItemIndex={null}
-                              highlightedSectionIndex={null}
-                              id="1"
-                              inputProps={
-                                Object {
-                                  "aria-expanded": true,
-                                  "aria-label": "Search all of IBM",
-                                  "className": "bx--header__search--input",
-                                  "id": "bx--header__search--input",
-                                  "onBlur": [Function],
-                                  "onChange": [Function],
-                                  "onFocus": [Function],
-                                  "onKeyDown": [Function],
-                                  "placeholder": "Search all of IBM",
-                                  "role": "combobox",
-                                  "value": "",
-                                }
-                              }
-                              itemProps={[Function]}
-                              items={Array []}
-                              multiSection={false}
-                              renderInputComponent={[Function]}
-                              renderItem={[Function]}
-                              renderItemData={
-                                Object {
-                                  "query": "",
-                                }
-                              }
-                              renderItemsContainer={[Function]}
-                              renderSectionTitle={[Function]}
-                              theme={
-                                Object {
-                                  "container": "react-autosuggest__container",
-                                  "containerOpen": "react-autosuggest__container--open",
-                                  "input": "react-autosuggest__input",
-                                  "inputFocused": "react-autosuggest__input--focused",
-                                  "inputOpen": "react-autosuggest__input--open",
-                                  "item": "react-autosuggest__suggestion",
-                                  "itemFirst": "react-autosuggest__suggestion--first",
-                                  "itemHighlighted": "react-autosuggest__suggestion--highlighted",
-                                  "itemsContainer": "react-autosuggest__suggestions-container",
-                                  "itemsContainerOpen": "react-autosuggest__suggestions-container--open",
-                                  "itemsList": "react-autosuggest__suggestions-list",
-                                  "sectionContainer": "react-autosuggest__section-container",
-                                  "sectionContainerFirst": "react-autosuggest__section-container--first",
-                                  "sectionTitle": "react-autosuggest__section-title",
-                                }
-                              }
-                            >
-                              <div
-                                aria-expanded={null}
-                                aria-haspopup={null}
-                                aria-label={null}
-                                aria-owns={null}
-                                className="react-autosuggest__container"
-                                key="react-autowhatever-1-container"
-                                role={null}
-                              >
-                                <MastheadSearchInput
-                                  componentInputProps={
-                                    Object {
-                                      "aria-activedescendant": null,
-                                      "aria-autocomplete": "list",
-                                      "aria-controls": "react-autowhatever-1",
-                                      "aria-expanded": true,
-                                      "aria-label": "Search all of IBM",
-                                      "autoComplete": "off",
-                                      "className": "bx--header__search--input",
-                                      "id": "bx--header__search--input",
-                                      "key": "react-autowhatever-1-input",
-                                      "onBlur": [Function],
-                                      "onChange": [Function],
-                                      "onFocus": [Function],
-                                      "onKeyDown": [Function],
-                                      "placeholder": "Search all of IBM",
-                                      "ref": [Function],
-                                      "role": "combobox",
-                                      "type": "text",
-                                      "value": "",
-                                    }
-                                  }
-                                  disableFocus={true}
-                                  dispatch={[Function]}
-                                  isActive={true}
-                                  searchIconClick={[Function]}
-                                >
-                                  <input
-                                    aria-activedescendant={null}
-                                    aria-autocomplete="list"
-                                    aria-controls="react-autowhatever-1"
-                                    aria-expanded={true}
-                                    aria-label="Search all of IBM"
-                                    autoComplete="off"
-                                    className="bx--header__search--input"
-                                    data-autoid="dds--header__search--input"
-                                    id="bx--header__search--input"
-                                    key="react-autowhatever-1-input"
-                                    name="q"
-                                    onBlur={[Function]}
-                                    onChange={[Function]}
-                                    onFocus={[Function]}
-                                    onKeyDown={[Function]}
-                                    placeholder="Search all of IBM"
-                                    role="combobox"
-                                    tabIndex={null}
-                                    type="text"
-                                    value=""
-                                  />
-                                </MastheadSearchInput>
-                                <div
-                                  className="react-autosuggest__suggestions-container"
-                                  id="react-autowhatever-1"
-                                  key="react-autowhatever-1-items-container"
-                                  role="listbox"
-                                />
-                              </div>
-                            </Autowhatever>
-                          </Autosuggest>
-                        </form>
-                        <div
-                          className="bx--header__search--actions"
-                        >
-                          <HeaderGlobalAction
-                            aria-label="Search all of IBM"
-                            className="bx--header__search--search"
-                            data-autoid="dds--masthead-default__l0-search"
-                            onClick={[Function]}
-                            tabIndex={0}
-                          >
-                            <Button
-                              aria-label="Search all of IBM"
-                              className="bx--header__search--search bx--header__action"
-                              data-autoid="dds--masthead-default__l0-search"
-                              hasIconOnly={true}
-                              iconDescription="Search all of IBM"
-                              onClick={[Function]}
-                              tabIndex={0}
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Search all of IBM"
-                                aria-pressed={null}
-                                className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Search all of IBM
-                                </div>
-                                <ForwardRef(Search20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Search20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                          <HeaderGlobalAction
-                            aria-label="Clear input"
-                            className="bx--header__search--close"
-                            data-autoid="dds--masthead-default__l0-search--close"
-                            onClick={[Function]}
-                            part="close-button"
-                          >
-                            <Button
-                              aria-label="Clear input"
-                              className="bx--header__search--close bx--header__action"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              hasIconOnly={true}
-                              iconDescription="Clear input"
-                              onClick={[Function]}
-                              part="close-button"
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Clear input"
-                                aria-pressed={null}
-                                className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                part="close-button"
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Clear input
-                                </div>
-                                <ForwardRef(Close20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Close20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                        </div>
-                      </div>
-                    </ForwardRef>
-                  </div>
-                  <HeaderGlobalBar
-                    className="bx--header__profile"
-                  >
-                    <div
-                      className="bx--header__global bx--header__profile"
-                    >
-                      <MastheadProfile
-                        navType="default"
-                        overflowMenuItemProps={
-                          Object {
-                            "wrapperClassName": "bx--masthead__profile-item",
-                          }
-                        }
-                        overflowMenuProps={
-                          Object {
-                            "ariaLabel": "User Profile",
-                            "data-autoid": "dds--masthead-default__l0-account",
-                            "flipped": true,
-                            "onOpen": [Function],
-                            "renderIcon": [Function],
-                            "style": Object {
-                              "width": "3rem",
-                            },
-                          }
-                        }
-                        profileMenu={Array []}
-                      >
-                        <ForwardRef(OverflowMenu)
-                          ariaLabel="User Profile"
-                          className="bx--header__action"
-                          data-autoid="dds--masthead-default__l0-account"
-                          flipped={true}
-                          onOpen={[Function]}
-                          renderIcon={[Function]}
-                          style={
-                            Object {
-                              "width": "3rem",
-                            }
-                          }
-                        >
-                          <OverflowMenu
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            direction="bottom"
-                            flipped={true}
-                            focusTrap={true}
-                            iconDescription="Open and close list of options"
-                            innerRef={null}
-                            light={false}
-                            menuOffset={[Function]}
-                            menuOffsetFlip={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            onOpen={[Function]}
-                            open={false}
-                            renderIcon={[Function]}
-                            selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <ClickListener
-                              onClickOutside={[Function]}
-                            >
-                              <button
-                                aria-controls={null}
-                                aria-expanded={false}
-                                aria-haspopup={true}
-                                aria-label="User Profile"
-                                className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                data-autoid="dds--masthead-default__l0-account"
-                                onClick={[Function]}
-                                onClose={[Function]}
-                                onKeyDown={[Function]}
-                                open={false}
-                                style={
-                                  Object {
-                                    "width": "3rem",
-                                  }
-                                }
-                                type="button"
-                              >
-                                <renderIcon
-                                  aria-label="Open and close list of options"
-                                  className="bx--overflow-menu__icon"
-                                >
-                                  <ForwardRef(User20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(User20)>
-                                </renderIcon>
-                              </button>
-                            </ClickListener>
-                          </OverflowMenu>
-                        </ForwardRef(OverflowMenu)>
-                      </MastheadProfile>
-                    </div>
-                  </HeaderGlobalBar>
-                </header>
-              </Header>
-            </div>
-          </div>
-        </render>
-      </HeaderContainer>
-    </Masthead>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Masthead With L1 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--with-l-1",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Masthead: With L1",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      hasProfile={true}
-      hasSearch={true}
-      mastheadL1Data={
-        Object {
-          "navigationL1": Array [
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "Explore",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "",
-                          "imageUrl": "",
-                          "linkTitle": "",
-                          "linkUrl": "",
-                        },
-                        "headingTitle": "",
-                        "headingUrl": "",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Title",
-                        },
-                      },
-                      "title": "Link 1",
-                      "url": "",
-                    },
-                    Object {
-                      "title": "Menu dropdown item with extra long text",
-                      "url": "",
-                    },
-                  ],
-                },
-              ],
-              "title": "Lorem ipsum dolor sit amet",
-              "titleEnglish": "Lorem ipsum dolor sit amet",
-              "url": "",
-            },
-            Object {
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                        "feature": Object {
-                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                          "linkTitle": "Explore all our business consulting and technology services",
-                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        },
-                        "headingTitle": "Services",
-                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Link 2",
-                      "url": "",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Funding options that fit your business",
-                        "feature": Object {
-                          "heading": "Cloud financing strategies that work for your business",
-                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                        },
-                        "headingTitle": "Financing",
-                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Financing",
-                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Consectetur adipiscing elit",
-              "titleEnglish": "Consectetur adipiscing elit",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Nulla quis sem at nibh elementum imperdiet",
-              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-              "url": "https://www.ibm.com/industries?lnk=min",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "IBM Developer newsletters",
-                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "IBM Developer",
-                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "IBM Developer",
-                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Blockchain 101",
-                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Blockchain",
-                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Blockchain",
-                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Make sense of Kubernetes",
-                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                          "linkTitle": "Deploy a simple Python application with Kubernetes",
-                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Containers",
-                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Containers",
-                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Train your data no matter where it lives",
-                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Analytics",
-                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Developer community",
-                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Analytics",
-                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Fusce nec tellus sed augue semper porta",
-              "titleEnglish": "Fusce nec tellus sed augue semper porta",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Sed cursus ante dapibus diam",
-              "titleEnglish": "Sed cursus ante dapibus diam",
-              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-            },
-          ],
-        }
-      }
-      placeHolderText="Search all of IBM"
-      platform={
-        Object {
-          "name": "Stock Charts",
-          "url": "https://www.example.com",
-        }
-      }
-      selectedMenuItem="Lorem ipsum dolor sit amet"
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={
-          Object {
-            "navigationL1": Array [
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "Explore",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "",
-                            "imageUrl": "",
-                            "linkTitle": "",
-                            "linkUrl": "",
-                          },
-                          "headingTitle": "",
-                          "headingUrl": "",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Title",
-                          },
-                        },
-                        "title": "Link 1",
-                        "url": "",
-                      },
-                      Object {
-                        "title": "Menu dropdown item with extra long text",
-                        "url": "",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Lorem ipsum dolor sit amet",
-                "titleEnglish": "Lorem ipsum dolor sit amet",
-                "url": "",
-              },
-              Object {
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                          "feature": Object {
-                            "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                            "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                            "linkTitle": "Explore all our business consulting and technology services",
-                            "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          },
-                          "headingTitle": "Services",
-                          "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Link 2",
-                        "url": "",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "Funding options that fit your business",
-                          "feature": Object {
-                            "heading": "Cloud financing strategies that work for your business",
-                            "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                            "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                            "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                          },
-                          "headingTitle": "Financing",
-                          "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Financing",
-                        "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Consectetur adipiscing elit",
-                "titleEnglish": "Consectetur adipiscing elit",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Nulla quis sem at nibh elementum imperdiet",
-                "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                "url": "https://www.ibm.com/industries?lnk=min",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": true,
-                "menuSections": Array [
-                  Object {
-                    "heading": "",
-                    "menuItems": Array [
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "IBM Developer newsletters",
-                            "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                            "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                            "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "IBM Developer",
-                          "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "IBM Developer",
-                        "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Blockchain 101",
-                            "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                            "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                            "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Blockchain",
-                          "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Subnav 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 2",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 3",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Subnav 4",
-                                "url": "",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Blockchain",
-                        "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Make sense of Kubernetes",
-                            "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                            "linkTitle": "Deploy a simple Python application with Kubernetes",
-                            "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Containers",
-                          "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Containers",
-                        "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      Object {
-                        "megapanelContent": Object {
-                          "description": "",
-                          "feature": Object {
-                            "heading": "Train your data no matter where it lives",
-                            "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                            "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                            "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          "headingTitle": "Analytics",
-                          "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          "quickLinks": Object {
-                            "links": Array [
-                              Object {
-                                "title": "Code patterns",
-                                "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Tutorials",
-                                "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Events",
-                                "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "title": "Developer community",
-                                "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                            "title": "Quicklinks",
-                          },
-                        },
-                        "title": "Analytics",
-                        "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                    ],
-                  },
-                ],
-                "title": "Fusce nec tellus sed augue semper porta",
-                "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                "url": "",
-              },
-              Object {
-                "hasMegapanel": false,
-                "hasMenu": false,
-                "menuSections": Array [],
-                "title": "Sed cursus ante dapibus diam",
-                "titleEnglish": "Sed cursus ante dapibus diam",
-                "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-              },
-            ],
-          }
-        }
-        placeHolderText="Search all of IBM"
-        platform={
-          Object {
-            "name": "Stock Charts",
-            "url": "https://www.example.com",
-          }
-        }
-        searchOpenOnload={false}
-        selectedMenuItem="Lorem ipsum dolor sit amet"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className="bx--masthead__platform"
-                      data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={true}
-                      isSideNavExpanded={false}
-                      navType="eco"
-                      navigation={
-                        Array [
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "Explore",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "",
-                                        "imageUrl": "",
-                                        "linkTitle": "",
-                                        "linkUrl": "",
-                                      },
-                                      "headingTitle": "",
-                                      "headingUrl": "",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Title",
-                                      },
-                                    },
-                                    "title": "Link 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Menu dropdown item with extra long text",
-                                    "url": "",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Lorem ipsum dolor sit amet",
-                            "titleEnglish": "Lorem ipsum dolor sit amet",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                      "feature": Object {
-                                        "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                        "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                        "linkTitle": "Explore all our business consulting and technology services",
-                                        "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                      },
-                                      "headingTitle": "Services",
-                                      "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Link 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "Funding options that fit your business",
-                                      "feature": Object {
-                                        "heading": "Cloud financing strategies that work for your business",
-                                        "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                        "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                        "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                      },
-                                      "headingTitle": "Financing",
-                                      "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Financing",
-                                    "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Consectetur adipiscing elit",
-                            "titleEnglish": "Consectetur adipiscing elit",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": false,
-                            "menuSections": Array [],
-                            "title": "Nulla quis sem at nibh elementum imperdiet",
-                            "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                            "url": "https://www.ibm.com/industries?lnk=min",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "IBM Developer newsletters",
-                                        "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                        "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                        "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "IBM Developer",
-                                      "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "IBM Developer",
-                                    "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Blockchain 101",
-                                        "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                        "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                        "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Blockchain",
-                                      "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Blockchain",
-                                    "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Make sense of Kubernetes",
-                                        "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                        "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                        "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Containers",
-                                      "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Code patterns",
-                                            "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Tutorials",
-                                            "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Events",
-                                            "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Containers",
-                                    "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Train your data no matter where it lives",
-                                        "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                        "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                        "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Analytics",
-                                      "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Code patterns",
-                                            "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Tutorials",
-                                            "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Events",
-                                            "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Developer community",
-                                            "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Analytics",
-                                    "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Fusce nec tellus sed augue semper porta",
-                            "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": false,
-                            "menuSections": Array [],
-                            "title": "Sed cursus ante dapibus diam",
-                            "titleEnglish": "Sed cursus ante dapibus diam",
-                            "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                          },
-                        ]
-                      }
-                      onOverlayClick={[Function]}
-                      platform={
-                        Object {
-                          "name": "Stock Charts",
-                          "url": "https://www.example.com",
-                        }
-                      }
-                      selectedMenuItem="Lorem ipsum dolor sit amet"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-eco-sidenav__l0"
-                          >
-                            <a
-                              className="bx--side-nav__submenu bx--side-nav__submenu-platform"
-                              data-autoid="dds--masthead-eco-sidenav__l0-productname"
-                              href="https://www.example.com"
-                            >
-                              Stock Charts
-                            </a>
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav0"
-                                            dataTitle="lorem-ipsum-dolor-sit-amet"
-                                            isSideNavExpanded={false}
-                                            key="Lorem ipsum dolor sit amet"
-                                            onToggle={[Function]}
-                                            selected={true}
-                                            title="Lorem ipsum dolor sit amet"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav0"
-                                              buttonRef={null}
-                                              dataTitle="lorem-ipsum-dolor-sit-amet"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={true}
-                                              title="Lorem ipsum dolor sit amet"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu bx--masthead__side-nav--submemu--selected"
-                                                  data-selected="true"
-                                                  data-title="lorem-ipsum-dolor-sit-amet"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0"
-                                                    >
-                                                      Lorem ipsum dolor sit amet
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1"
-                                            dataTitle="consectetur-adipiscing-elit"
-                                            isSideNavExpanded={false}
-                                            key="Consectetur adipiscing elit"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Consectetur adipiscing elit"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1"
-                                              buttonRef={null}
-                                              dataTitle="consectetur-adipiscing-elit"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Consectetur adipiscing elit"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  data-title="consectetur-adipiscing-elit"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1"
-                                                    >
-                                                      Consectetur adipiscing elit
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav2"
-                                            href="https://www.ibm.com/industries?lnk=min"
-                                            key="Nulla quis sem at nibh elementum imperdiet"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav2"
-                                                element="a"
-                                                href="https://www.ibm.com/industries?lnk=min"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav2"
-                                                  href="https://www.ibm.com/industries?lnk=min"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Nulla quis sem at nibh elementum imperdiet
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3"
-                                            dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                            isSideNavExpanded={false}
-                                            key="Fusce nec tellus sed augue semper porta"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Fusce nec tellus sed augue semper porta"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3"
-                                              buttonRef={null}
-                                              dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Fusce nec tellus sed augue semper porta"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  data-title="fusce-nec-tellus-sed-augue-semper-porta"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3"
-                                                    >
-                                                      Fusce nec tellus sed augue semper porta
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav4"
-                                            href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                            key="Sed cursus ante dapibus diam"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav4"
-                                                element="a"
-                                                href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav4"
-                                                  href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Sed cursus ante dapibus diam
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading="Explore"
-                                        id="panel__(0,-1)"
-                                        isSubmenu={true}
-                                        key="Lorem ipsum dolor sit amet"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Lorem ipsum dolor sit amet"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Lorem ipsum dolor sit amet
-                                          </li>
-                                          <p
-                                            className="bx--masthead__side-nav--submemu-heading"
-                                          >
-                                            Explore
-                                          </p>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Link 1"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Link 1"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Link 1"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0"
-                                                    >
-                                                      Link 1
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
-                                            href=""
-                                            key="Menu dropdown item with extra long text"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Menu dropdown item with extra long text
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading=""
-                                        id="panel__(1,-1)"
-                                        isSubmenu={true}
-                                        key="Consectetur adipiscing elit"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Consectetur adipiscing elit"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Consectetur adipiscing elit
-                                          </li>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Link 2"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Link 2"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Link 2"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0"
-                                                    >
-                                                      Link 2
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Financing"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Financing"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Financing"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1"
-                                                    >
-                                                      Financing
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading=""
-                                        id="panel__(3,-1)"
-                                        isSubmenu={true}
-                                        key="Fusce nec tellus sed augue semper porta"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Fusce nec tellus sed augue semper porta"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Fusce nec tellus sed augue semper porta
-                                          </li>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="IBM Developer"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="IBM Developer"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="IBM Developer"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0"
-                                                    >
-                                                      IBM Developer
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Blockchain"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Blockchain"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Blockchain"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1"
-                                                    >
-                                                      Blockchain
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Containers"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Containers"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Containers"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2"
-                                                    >
-                                                      Containers
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Analytics"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Analytics"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Analytics"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3"
-                                                    >
-                                                      Analytics
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(0,0)"
-                                        isSubmenu={true}
-                                        key="Link 1"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Link 1"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Link 1
-                                          </li>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav0-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(0,1)"
-                                        isSubmenu={true}
-                                        key="Menu dropdown item with extra long text"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Menu dropdown item with extra long text"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Menu dropdown item with extra long text
-                                          </li>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,0)"
-                                        isSubmenu={true}
-                                        key="Link 2"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Link 2"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Link 2
-                                          </li>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,1)"
-                                        isSubmenu={true}
-                                        key="Financing"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Financing"
-                                        titleUrl="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Financing
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav1-list1-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,0)"
-                                        isSubmenu={true}
-                                        key="IBM Developer"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="IBM Developer"
-                                        titleUrl="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        IBM Developer
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,1)"
-                                        isSubmenu={true}
-                                        key="Blockchain"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Blockchain"
-                                        titleUrl="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Blockchain
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list1-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,2)"
-                                        isSubmenu={true}
-                                        key="Containers"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Containers"
-                                        titleUrl="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,2)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Containers
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
-                                            href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item0"
-                                                  href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
-                                            href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
-                                            href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list2-item2"
-                                                  href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,3)"
-                                        isSubmenu={true}
-                                        key="Analytics"
-                                        navType="eco"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Analytics"
-                                        titleUrl="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,3)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="eco"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Analytics
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
-                                            href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item0"
-                                                  href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
-                                            href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
-                                            href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item2"
-                                                  href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
-                                            href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Developer community"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-eco-sidenav__l1-nav3-list3-item3"
-                                                  href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Developer community
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-eco__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-eco__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search bx--masthead__platform"
-                    >
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="eco"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-eco__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-eco__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="eco"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-eco__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-eco__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-eco__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-eco__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-              <div>
-                <MastheadL1
-                  hasCurrentUrl={[Function]}
-                  navType="eco"
-                  navigationL1={
-                    Array [
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "Explore",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "",
-                                    "imageUrl": "",
-                                    "linkTitle": "",
-                                    "linkUrl": "",
-                                  },
-                                  "headingTitle": "",
-                                  "headingUrl": "",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Title",
-                                  },
-                                },
-                                "title": "Link 1",
-                                "url": "",
-                              },
-                              Object {
-                                "title": "Menu dropdown item with extra long text",
-                                "url": "",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Lorem ipsum dolor sit amet",
-                        "titleEnglish": "Lorem ipsum dolor sit amet",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                  "feature": Object {
-                                    "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                    "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                    "linkTitle": "Explore all our business consulting and technology services",
-                                    "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                  },
-                                  "headingTitle": "Services",
-                                  "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Link 2",
-                                "url": "",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "Funding options that fit your business",
-                                  "feature": Object {
-                                    "heading": "Cloud financing strategies that work for your business",
-                                    "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                    "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                    "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                  },
-                                  "headingTitle": "Financing",
-                                  "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Financing",
-                                "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Consectetur adipiscing elit",
-                        "titleEnglish": "Consectetur adipiscing elit",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": false,
-                        "menuSections": Array [],
-                        "title": "Nulla quis sem at nibh elementum imperdiet",
-                        "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                        "url": "https://www.ibm.com/industries?lnk=min",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": true,
-                        "menuSections": Array [
-                          Object {
-                            "heading": "",
-                            "menuItems": Array [
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "IBM Developer newsletters",
-                                    "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                    "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                    "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "IBM Developer",
-                                  "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "IBM Developer",
-                                "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Blockchain 101",
-                                    "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                    "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                    "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Blockchain",
-                                  "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Subnav 1",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 2",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 3",
-                                        "url": "",
-                                      },
-                                      Object {
-                                        "title": "Subnav 4",
-                                        "url": "",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Blockchain",
-                                "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Make sense of Kubernetes",
-                                    "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                    "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                    "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Containers",
-                                  "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Code patterns",
-                                        "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Tutorials",
-                                        "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Events",
-                                        "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Containers",
-                                "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                              Object {
-                                "megapanelContent": Object {
-                                  "description": "",
-                                  "feature": Object {
-                                    "heading": "Train your data no matter where it lives",
-                                    "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                    "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                    "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  "headingTitle": "Analytics",
-                                  "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  "quickLinks": Object {
-                                    "links": Array [
-                                      Object {
-                                        "title": "Code patterns",
-                                        "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Tutorials",
-                                        "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Events",
-                                        "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      Object {
-                                        "title": "Developer community",
-                                        "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                    ],
-                                    "title": "Quicklinks",
-                                  },
-                                },
-                                "title": "Analytics",
-                                "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                              },
-                            ],
-                          },
-                        ],
-                        "title": "Fusce nec tellus sed augue semper porta",
-                        "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                        "url": "",
-                      },
-                      Object {
-                        "hasMegapanel": false,
-                        "hasMenu": false,
-                        "menuSections": Array [],
-                        "title": "Sed cursus ante dapibus diam",
-                        "titleEnglish": "Sed cursus ante dapibus diam",
-                        "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                      },
-                    ]
-                  }
-                  platform={
-                    Object {
-                      "name": "Stock Charts",
-                      "url": "https://www.example.com",
-                    }
-                  }
-                  selectedMenuItem="Lorem ipsum dolor sit amet"
-                  titleLink={null}
-                >
-                  <div
-                    className="bx--masthead__l1"
-                  >
-                    <div
-                      className="bx--masthead__l1-inner-container"
-                    >
-                      <div
-                        className="bx--masthead__l1-name"
-                        data-selected={false}
-                      >
-                        <span
-                          className="bx--masthead__l1-name-title"
-                        >
-                          <a
-                            href="https://www.example.com"
-                          >
-                            Stock Charts
-                          </a>
-                        </span>
-                      </div>
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
-                          <div
-                            className="bx--header__nav-content"
-                          >
-                            <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label="Main Navigation"
-                              className="bx--masthead__l1-nav"
-                            >
-                              <nav
-                                aria-label="Main Navigation"
-                                className="bx--header__nav bx--masthead__l1-nav"
-                              >
-                                <ul
-                                  aria-label="Main Navigation"
-                                  className="bx--header__menu-bar"
-                                >
-                                  <ForwardRef
-                                    aria-label="Lorem ipsum dolor sit amet"
-                                    autoId="dds--masthead-eco__l1-nav0"
-                                    className=""
-                                    key=".$0"
-                                    menuLinkName="Lorem ipsum dolor sit amet"
-                                    selected={true}
-                                  >
-                                    <HeaderMenu
-                                      aria-label="Lorem ipsum dolor sit amet"
-                                      autoId="dds--masthead-eco__l1-nav0"
-                                      className=""
-                                      focusRef={[Function]}
-                                      menuLinkName="Lorem ipsum dolor sit amet"
-                                      renderMenuContent={[Function]}
-                                      selected={true}
-                                      setOverlay={[Function]}
-                                    >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav0"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
-                                      >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          data-selected="true"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Lorem ipsum dolor sit amet
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
-                                                className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Lorem ipsum dolor sit amet"
-                                          className="bx--header__menu"
-                                        >
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href=""
-                                            key=".$Link 1"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href=""
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Link 1
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href=""
-                                            key=".$Menu dropdown item with extra long text"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href=""
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Menu dropdown item with extra long text
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <ForwardRef
-                                    aria-label="Consectetur adipiscing elit"
-                                    autoId="dds--masthead-eco__l1-nav1"
-                                    className=""
-                                    key=".$1"
-                                    menuLinkName="Consectetur adipiscing elit"
-                                    selected={false}
-                                  >
-                                    <HeaderMenu
-                                      aria-label="Consectetur adipiscing elit"
-                                      autoId="dds--masthead-eco__l1-nav1"
-                                      className=""
-                                      focusRef={[Function]}
-                                      menuLinkName="Consectetur adipiscing elit"
-                                      renderMenuContent={[Function]}
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav1"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
-                                      >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Consectetur adipiscing elit"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          data-selected="false"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Consectetur adipiscing elit
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
-                                                className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Consectetur adipiscing elit"
-                                          className="bx--header__menu"
-                                        >
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href=""
-                                            key=".$Link 2"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href=""
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Link 2
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                            key=".$Financing"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Financing
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <HeaderMenuItem
-                                    data-autoid="dds--masthead-eco__l1-nav2"
-                                    data-selected="false"
-                                    href="https://www.ibm.com/industries?lnk=min"
-                                    key=".$2"
-                                  >
-                                    <li>
-                                      <Link
-                                        className="bx--header__menu-item"
-                                        data-autoid="dds--masthead-eco__l1-nav2"
-                                        data-selected="false"
-                                        element="a"
-                                        href="https://www.ibm.com/industries?lnk=min"
-                                        tabIndex={0}
-                                      >
-                                        <a
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-eco__l1-nav2"
-                                          data-selected="false"
-                                          href="https://www.ibm.com/industries?lnk=min"
-                                          tabIndex={0}
-                                        >
-                                          <span
-                                            className="bx--text-truncate--end"
-                                          >
-                                            Nulla quis sem at nibh elementum imperdiet
-                                          </span>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  </HeaderMenuItem>
-                                  <ForwardRef
-                                    aria-label="Fusce nec tellus sed augue semper porta"
-                                    autoId="dds--masthead-eco__l1-nav3"
-                                    className=""
-                                    key=".$3"
-                                    menuLinkName="Fusce nec tellus sed augue semper porta"
-                                    selected={false}
-                                  >
-                                    <HeaderMenu
-                                      aria-label="Fusce nec tellus sed augue semper porta"
-                                      autoId="dds--masthead-eco__l1-nav3"
-                                      className=""
-                                      focusRef={[Function]}
-                                      menuLinkName="Fusce nec tellus sed augue semper porta"
-                                      renderMenuContent={[Function]}
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <li
-                                        className="bx--header__submenu"
-                                        data-autoid="dds--masthead-eco__l1-nav3"
-                                        onBlur={[Function]}
-                                        onKeyDown={[Function]}
-                                      >
-                                        <a
-                                          aria-expanded={false}
-                                          aria-haspopup="menu"
-                                          aria-label="Fusce nec tellus sed augue semper porta"
-                                          className="bx--header__menu-item bx--header__menu-title"
-                                          data-selected="false"
-                                          href="#"
-                                          onClick={[Function]}
-                                          onKeyDown={[Function]}
-                                          role="menuitem"
-                                          tabIndex={0}
-                                        >
-                                          Fusce nec tellus sed augue semper porta
-                                          <defaultRenderMenuContent>
-                                            <ForwardRef(ChevronDown20)
-                                              className="bx--header__menu-arrow"
-                                            >
-                                              <Icon
-                                                className="bx--header__menu-arrow"
-                                                fill="currentColor"
-                                                height={20}
-                                                preserveAspectRatio="xMidYMid meet"
-                                                viewBox="0 0 32 32"
-                                                width={20}
-                                                xmlns="http://www.w3.org/2000/svg"
-                                              >
-                                                <svg
-                                                  aria-hidden={true}
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  focusable="false"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <path
-                                                    d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                  />
-                                                </svg>
-                                              </Icon>
-                                            </ForwardRef(ChevronDown20)>
-                                          </defaultRenderMenuContent>
-                                        </a>
-                                        <ul
-                                          aria-label="Fusce nec tellus sed augue semper porta"
-                                          className="bx--header__menu"
-                                        >
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$IBM Developer"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item0"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    IBM Developer
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Blockchain"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item1"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Blockchain
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Containers"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item2"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Containers
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                          <HeaderMenuItem
-                                            data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key=".$Analytics"
-                                            role="none"
-                                          >
-                                            <li
-                                              role="none"
-                                            >
-                                              <Link
-                                                className="bx--header__menu-item"
-                                                data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                tabIndex={0}
-                                              >
-                                                <a
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-eco__l1-nav0-item3"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <span
-                                                    className="bx--text-truncate--end"
-                                                  >
-                                                    Analytics
-                                                  </span>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </HeaderMenuItem>
-                                        </ul>
-                                      </li>
-                                    </HeaderMenu>
-                                  </ForwardRef>
-                                  <HeaderMenuItem
-                                    data-autoid="dds--masthead-eco__l1-nav4"
-                                    data-selected="false"
-                                    href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                    key=".$4"
-                                  >
-                                    <li>
-                                      <Link
-                                        className="bx--header__menu-item"
-                                        data-autoid="dds--masthead-eco__l1-nav4"
-                                        data-selected="false"
-                                        element="a"
-                                        href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                        tabIndex={0}
-                                      >
-                                        <a
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-eco__l1-nav4"
-                                          data-selected="false"
-                                          href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                          tabIndex={0}
-                                        >
-                                          <span
-                                            className="bx--text-truncate--end"
-                                          >
-                                            Sed cursus ante dapibus diam
-                                          </span>
-                                        </a>
-                                      </Link>
-                                    </li>
-                                  </HeaderMenuItem>
-                                </ul>
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
-                            <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
-                          </div>
-                        </div>
-                      </HeaderNavContainer>
-                    </div>
-                  </div>
-                </MastheadL1>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-    </Default>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Masthead With alternate logo and tooltip 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--with-alternate-logo-and-tooltip",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Masthead: With alternate logo and tooltip",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Masthead
-      hasProfile={true}
-      hasSearch={true}
-      initialSearchTerm=""
-      mastheadL1Data={null}
-      mastheadLogo={
-        Object {
-          "allowlist": Array [],
-          "denylist": Array [],
-          "end": "May 5, 2021 0:00:01",
-          "path": "/",
-          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-        }
-      }
-      navigation="default"
-      placeHolderText="Search all of IBM"
-      platform={null}
-      searchOpenOnload={false}
-      selectedMenuItem="Consulting & Services"
-    >
-      <HeaderContainer
-        isSideNavExpanded={false}
-        render={[Function]}
-      >
-        <render
-          isSideNavExpanded={false}
-          onClickSideNavExpand={[Function]}
-        >
-          <div
-            className="bx--masthead"
-          >
-            <div
-              className="bx--masthead__l0"
-            >
-              <Header
-                aria-label="IBM"
-                data-autoid="dds--masthead"
-              >
-                <header
-                  aria-label="IBM"
-                  className="bx--header"
-                  data-autoid="dds--masthead"
-                >
-                  <SkipToContent
-                    href="#main-content"
-                    tabIndex="0"
-                  >
-                    <a
-                      className="bx--skip-to-content"
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      Skip to main content
-                    </a>
-                  </SkipToContent>
-                  <HeaderMenuButton
-                    aria-label="Open menu"
-                    className=""
-                    data-autoid="dds--masthead-default-sidenav__l0-menu"
-                    isActive={false}
-                    onBlur={[Function]}
-                    onClick={[Function]}
-                  >
-                    <button
-                      aria-label="Open menu"
-                      className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                      title="Open menu"
-                      type="button"
-                    >
-                      <ForwardRef(Menu20)>
-                        <Icon
-                          fill="currentColor"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          viewBox="0 0 20 20"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <svg
-                            aria-hidden={true}
-                            fill="currentColor"
-                            focusable="false"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <path
-                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                            />
-                          </svg>
-                        </Icon>
-                      </ForwardRef(Menu20)>
-                    </button>
-                  </HeaderMenuButton>
-                  <MastheadLeftNav
-                    backButtonText="Back"
-                    hasL1Data={false}
-                    isSideNavExpanded={false}
-                    mastheadLogo={
-                      Object {
-                        "allowlist": Array [],
-                        "denylist": Array [],
-                        "end": "May 5, 2021 0:00:01",
-                        "path": "/",
-                        "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                        "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                      }
-                    }
-                    navType="default"
-                    navigation={Array []}
-                    onOverlayClick={[Function]}
-                    platform={null}
-                    selectedMenuItem="Consulting & Services"
-                  >
-                    <SideNav
-                      addFocusListeners={true}
-                      addMouseListeners={true}
-                      aria-label="Side navigation"
-                      defaultExpanded={false}
-                      expanded={false}
-                      isChildOfHeader={true}
-                      isFixedNav={false}
-                      isPersistent={false}
-                      onOverlayClick={[Function]}
-                    >
-                      <div
-                        className="bx--side-nav__overlay"
-                        onClick={[Function]}
-                      />
-                      <nav
-                        aria-label="Side navigation"
-                        className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                        onBlur={[Function]}
-                        onFocus={[Function]}
-                      >
-                        <nav
-                          data-autoid="dds--masthead-default-sidenav__l0"
-                        >
-                          <SideNavItems>
-                            <ul
-                              className="bx--side-nav__items"
-                            >
-                              <HeaderSideNavItems
-                                hasDivider={false}
-                                key=".0"
-                              >
-                                <ul
-                                  className="bx--side-nav__header-navigation"
-                                >
-                                  <div>
-                                    <SideNavMenuSection
-                                      focusNode={
-                                        <button
-                                          aria-label="Open menu"
-                                          class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                          data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                          title="Open menu"
-                                          type="button"
-                                        >
-                                          <svg
-                                            aria-hidden="true"
-                                            fill="currentColor"
-                                            focusable="false"
-                                            height="20"
-                                            preserveAspectRatio="xMidYMid meet"
-                                            viewBox="0 0 20 20"
-                                            width="20"
-                                            xmlns="http://www.w3.org/2000/svg"
-                                          >
-                                            <path
-                                              d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                            />
-                                          </svg>
-                                        </button>
-                                      }
-                                      id="panel__(-1,-1)"
-                                      onBackClick={[Function]}
-                                      show={true}
-                                    >
-                                      <div
-                                        aria-hidden={false}
-                                        className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                        id="panel__(-1,-1)"
-                                      >
-                                        <button
-                                          className="bx--masthead__focus"
-                                          onFocus={[Function]}
-                                        >
-                                          focus trapping button
-                                        </button>
-                                      </div>
-                                    </SideNavMenuSection>
-                                  </div>
-                                </ul>
-                              </HeaderSideNavItems>
-                            </ul>
-                          </SideNavItems>
-                        </nav>
-                      </nav>
-                    </SideNav>
-                  </MastheadLeftNav>
-                  <IbmLogo
-                    autoid="dds--masthead-default__l0-logo"
-                    isSearchActive={false}
-                    logoData={
-                      Object {
-                        "allowlist": Array [],
-                        "denylist": Array [],
-                        "end": "May 5, 2021 0:00:01",
-                        "path": "/",
-                        "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                        "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                      }
-                    }
-                  >
-                    <div
-                      className="bx--header__logo"
-                    >
-                      <ConditionalWrapper
-                        condition={true}
-                        wrapper={[Function]}
-                      >
-                        <TooltipDefinition
-                          align="start"
-                          direction="bottom"
-                          tooltipText="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-                        >
-                          <span
-                            className="bx--tooltip--definition bx--tooltip--a11y"
-                            onMouseEnter={[Function]}
-                            onMouseLeave={[Function]}
-                          >
-                            <button
-                              aria-describedby="definition-tooltip-4"
-                              className="bx--tooltip__trigger bx--tooltip--a11y bx--tooltip__trigger--definition bx--tooltip--bottom bx--tooltip--align-start"
-                              onBlur={[Function]}
-                              onFocus={[Function]}
-                              type="button"
-                            >
-                              <a
-                                aria-label="IBM®"
-                                data-autoid="dds--masthead-default__l0-logo"
-                                href="https://www.ibm.com"
-                              >
-                                <MastheadLogo
-                                  height="23"
-                                  viewBox="0 0 58 23"
-                                  width="58"
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    height="23"
-                                    viewBox="0 0 58 23"
-                                    width="58"
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                      fill="none"
-                                      fillRule="evenodd"
-                                    />
-                                  </svg>
-                                </MastheadLogo>
-                              </a>
-                            </button>
-                            <span
-                              className="bx--assistive-text"
-                              id="definition-tooltip-4"
-                              role="tooltip"
-                            >
-                              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                            </span>
-                          </span>
-                        </TooltipDefinition>
-                      </ConditionalWrapper>
-                    </div>
-                  </IbmLogo>
-                  <div
-                    className="bx--header__search "
-                  >
-                    <MastheadTopNav
-                      hasCurrentUrl={[Function]}
-                      mastheadLogo={
-                        Object {
-                          "allowlist": Array [],
-                          "denylist": Array [],
-                          "end": "May 5, 2021 0:00:01",
-                          "path": "/",
-                          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                        }
-                      }
-                      navType="default"
-                      navigation={Array []}
-                      platform={null}
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <HeaderNavContainer>
-                        <div
-                          className="bx--header__nav-container"
-                        >
-                          <div
-                            className="bx--header__nav-content"
-                          >
-                            <div
-                              className="bx--sub-content-left"
-                            />
-                            <div
-                              className="bx--sub-content-right"
-                            />
-                            <HeaderNavigation
-                              aria-label="IBM"
-                              data-autoid="dds--masthead__l0-nav"
-                            >
-                              <nav
-                                aria-label="IBM"
-                                className="bx--header__nav"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <ul
-                                  aria-label="IBM"
-                                  className="bx--header__menu-bar"
-                                />
-                              </nav>
-                            </HeaderNavigation>
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-left-container"
-                            hidden={true}
-                          >
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead left caret"
-                              className="bx--header__nav-caret-left"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretLeft20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M20 24L10 16 20 8z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretLeft20)>
-                            </button>
-                            <div
-                              className="bx--header__nav-caret-left-gradient"
-                            />
-                          </div>
-                          <div
-                            className="bx--header__nav-caret-right-container"
-                            hidden={true}
-                          >
-                            <div
-                              className="bx--header__nav-caret-right-gradient"
-                            />
-                            <button
-                              aria-hidden="true"
-                              aria-label="Masthead right caret"
-                              className="bx--header__nav-caret-right"
-                              onClick={[Function]}
-                              tabIndex="-1"
-                            >
-                              <ForwardRef(CaretRight20)>
-                                <Icon
-                                  fill="currentColor"
-                                  height={20}
-                                  preserveAspectRatio="xMidYMid meet"
-                                  viewBox="0 0 32 32"
-                                  width={20}
-                                  xmlns="http://www.w3.org/2000/svg"
-                                >
-                                  <svg
-                                    aria-hidden={true}
-                                    fill="currentColor"
-                                    focusable="false"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <path
-                                      d="M12 8L22 16 12 24z"
-                                    />
-                                  </svg>
-                                </Icon>
-                              </ForwardRef(CaretRight20)>
-                            </button>
-                          </div>
-                        </div>
-                      </HeaderNavContainer>
-                      <div
-                        className="bx--masthead__overlay"
-                      />
-                    </MastheadTopNav>
-                    <ForwardRef
-                      initialSearchTerm=""
-                      isSearchActive={false}
-                      mastheadLogo={
-                        Object {
-                          "allowlist": Array [],
-                          "denylist": Array [],
-                          "end": "May 5, 2021 0:00:01",
-                          "path": "/",
-                          "svg": "<svg width=\\"81px\\" height=\\"33px\\" viewBox=\\"0 0 81 33\\" xmlns=\\"http://www.w3.org/2000/svg\\" version=\\"1.1\\" xmlns:xlink=\\"http://www.w3.org/1999/xlink\\">
-      <title>Artboard</title>
-      <defs>
-        <path d=\\"M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z\\" id=\\"path-1\\"></path>
-      </defs>
-      <g id=\\"Artboard\\" stroke=\\"none\\" stroke-width=\\"1\\" fill=\\"none\\" fill-rule=\\"evenodd\\">
-        <g id=\\"Group-7\\">
-          <mask id=\\"mask-2\\" fill=\\"white\\">
-            <use xlink:href=\\"#path-1\\"></use>
-          </mask>
-          <g id=\\"Clip-2\\"></g>
-          <polygon id=\\"Fill-1\\" fill=\\"#EC1D24\\" mask=\\"url(#mask-2)\\" points=\\"-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-3\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998\\"></polygon>
-          <polygon id=\\"Fill-4\\" fill=\\"#2E3092\\" mask=\\"url(#mask-2)\\" points=\\"-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222\\"></polygon>
-          <polygon id=\\"Fill-5\\" fill=\\"#00A550\\" mask=\\"url(#mask-2)\\" points=\\"-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562\\"></polygon>
-          <polygon id=\\"Fill-6\\" fill=\\"#FFF100\\" mask=\\"url(#mask-2)\\" points=\\"-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892\\"></polygon>
-        </g>
-      </g>
-      </svg>",
-                          "tooltip": "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-                        }
-                      }
-                      navType="default"
-                      onChangeSearchActive={[Function]}
-                      placeHolderText="Search all of IBM"
-                      renderValue={3}
-                      searchOpenOnload={false}
-                    >
-                      <div
-                        className="bx--masthead__search"
-                        data-autoid="dds--masthead__search"
-                      >
-                        <div
-                          className="bx--header__search--actions"
-                        >
-                          <HeaderGlobalAction
-                            aria-label="Open IBM search field"
-                            className="bx--header__search--search"
-                            data-autoid="dds--masthead-default__l0-search"
-                            onClick={[Function]}
-                            tabIndex={0}
-                          >
-                            <Button
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search bx--header__action"
-                              data-autoid="dds--masthead-default__l0-search"
-                              hasIconOnly={true}
-                              iconDescription="Open IBM search field"
-                              onClick={[Function]}
-                              tabIndex={0}
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Open IBM search field"
-                                aria-pressed={null}
-                                className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Open IBM search field
-                                </div>
-                                <ForwardRef(Search20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Search20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                          <HeaderGlobalAction
-                            aria-label="Clear input"
-                            className="bx--header__search--close"
-                            data-autoid="dds--masthead-default__l0-search--close"
-                            onClick={[Function]}
-                            part="close-button"
-                          >
-                            <Button
-                              aria-label="Clear input"
-                              className="bx--header__search--close bx--header__action"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              hasIconOnly={true}
-                              iconDescription="Clear input"
-                              onClick={[Function]}
-                              part="close-button"
-                              tooltipPosition="bottom"
-                              type="button"
-                            >
-                              <button
-                                aria-describedby={null}
-                                aria-label="Clear input"
-                                aria-pressed={null}
-                                className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                disabled={false}
-                                onBlur={[Function]}
-                                onClick={[Function]}
-                                onFocus={[Function]}
-                                onMouseEnter={[Function]}
-                                onMouseLeave={[Function]}
-                                part="close-button"
-                                tabIndex={0}
-                                type="button"
-                              >
-                                <div
-                                  className="bx--assistive-text"
-                                  onMouseEnter={[Function]}
-                                >
-                                  Clear input
-                                </div>
-                                <ForwardRef(Close20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(Close20)>
-                              </button>
-                            </Button>
-                          </HeaderGlobalAction>
-                        </div>
-                      </div>
-                    </ForwardRef>
-                  </div>
-                  <HeaderGlobalBar
-                    className="bx--header__profile"
-                  >
-                    <div
-                      className="bx--header__global bx--header__profile"
-                    >
-                      <MastheadProfile
-                        navType="default"
-                        overflowMenuItemProps={
-                          Object {
-                            "wrapperClassName": "bx--masthead__profile-item",
-                          }
-                        }
-                        overflowMenuProps={
-                          Object {
-                            "ariaLabel": "User Profile",
-                            "data-autoid": "dds--masthead-default__l0-account",
-                            "flipped": true,
-                            "onOpen": [Function],
-                            "renderIcon": [Function],
-                            "style": Object {
-                              "width": "3rem",
-                            },
-                          }
-                        }
-                        profileMenu={Array []}
-                      >
-                        <ForwardRef(OverflowMenu)
-                          ariaLabel="User Profile"
-                          className="bx--header__action"
-                          data-autoid="dds--masthead-default__l0-account"
-                          flipped={true}
-                          onOpen={[Function]}
-                          renderIcon={[Function]}
-                          style={
-                            Object {
-                              "width": "3rem",
-                            }
-                          }
-                        >
-                          <OverflowMenu
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            direction="bottom"
-                            flipped={true}
-                            focusTrap={true}
-                            iconDescription="Open and close list of options"
-                            innerRef={null}
-                            light={false}
-                            menuOffset={[Function]}
-                            menuOffsetFlip={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            onOpen={[Function]}
-                            open={false}
-                            renderIcon={[Function]}
-                            selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <ClickListener
-                              onClickOutside={[Function]}
-                            >
-                              <button
-                                aria-controls={null}
-                                aria-expanded={false}
-                                aria-haspopup={true}
-                                aria-label="User Profile"
-                                className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                data-autoid="dds--masthead-default__l0-account"
-                                onClick={[Function]}
-                                onClose={[Function]}
-                                onKeyDown={[Function]}
-                                open={false}
-                                style={
-                                  Object {
-                                    "width": "3rem",
-                                  }
-                                }
-                                type="button"
-                              >
-                                <renderIcon
-                                  aria-label="Open and close list of options"
-                                  className="bx--overflow-menu__icon"
-                                >
-                                  <ForwardRef(User20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(User20)>
-                                </renderIcon>
-                              </button>
-                            </ClickListener>
-                          </OverflowMenu>
-                        </ForwardRef(OverflowMenu)>
-                      </MastheadProfile>
-                    </div>
-                  </HeaderGlobalBar>
-                </header>
-              </Header>
-            </div>
-          </div>
-        </render>
-      </HeaderContainer>
-    </Masthead>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Masthead With custom navigation 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--with-custom-navigation",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Masthead: With custom navigation",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      customProfileLogin={null}
-      hasProfile={true}
-      hasSearch={true}
-      navigation={
-        Array [
-          Object {
-            "hasMegapanel": false,
-            "hasMenu": true,
-            "menuSections": Array [
-              Object {
-                "heading": "Explore",
-                "menuItems": Array [
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "",
-                      "feature": Object {
-                        "heading": "",
-                        "imageUrl": "",
-                        "linkTitle": "",
-                        "linkUrl": "",
-                      },
-                      "headingTitle": "",
-                      "headingUrl": "",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Subnav 1",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 2",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 3",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 4",
-                            "url": "",
-                          },
-                        ],
-                        "title": "Title",
-                      },
-                    },
-                    "title": "Link 1",
-                    "url": "",
-                  },
-                  Object {
-                    "title": "Menu dropdown item with extra long text",
-                    "url": "",
-                  },
-                ],
-              },
-            ],
-            "title": "Lorem ipsum dolor sit amet",
-            "titleEnglish": "Lorem ipsum dolor sit amet",
-            "url": "",
-          },
-          Object {
-            "hasMenu": true,
-            "menuSections": Array [
-              Object {
-                "heading": "",
-                "menuItems": Array [
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                      "feature": Object {
-                        "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                        "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                        "linkTitle": "Explore all our business consulting and technology services",
-                        "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                      },
-                      "headingTitle": "Services",
-                      "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Subnav 1",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 2",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 3",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 4",
-                            "url": "",
-                          },
-                        ],
-                        "title": "Quicklinks",
-                      },
-                    },
-                    "title": "Link 2",
-                    "url": "",
-                  },
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "Funding options that fit your business",
-                      "feature": Object {
-                        "heading": "Cloud financing strategies that work for your business",
-                        "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                        "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                        "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                      },
-                      "headingTitle": "Financing",
-                      "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Subnav 1",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 2",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 3",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 4",
-                            "url": "",
-                          },
-                        ],
-                        "title": "Quicklinks",
-                      },
-                    },
-                    "title": "Financing",
-                    "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                  },
-                ],
-              },
-            ],
-            "title": "Consectetur adipiscing elit",
-            "titleEnglish": "Consectetur adipiscing elit",
-            "url": "",
-          },
-          Object {
-            "hasMegapanel": false,
-            "hasMenu": false,
-            "menuSections": Array [],
-            "title": "Nulla quis sem at nibh elementum imperdiet",
-            "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-            "url": "https://www.ibm.com/industries?lnk=min",
-          },
-          Object {
-            "hasMegapanel": false,
-            "hasMenu": true,
-            "menuSections": Array [
-              Object {
-                "heading": "",
-                "menuItems": Array [
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "",
-                      "feature": Object {
-                        "heading": "IBM Developer newsletters",
-                        "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                        "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                        "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      "headingTitle": "IBM Developer",
-                      "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Subnav 1",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 2",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 3",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 4",
-                            "url": "",
-                          },
-                        ],
-                        "title": "Quicklinks",
-                      },
-                    },
-                    "title": "IBM Developer",
-                    "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                  },
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "",
-                      "feature": Object {
-                        "heading": "Blockchain 101",
-                        "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                        "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                        "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      "headingTitle": "Blockchain",
-                      "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Subnav 1",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 2",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 3",
-                            "url": "",
-                          },
-                          Object {
-                            "title": "Subnav 4",
-                            "url": "",
-                          },
-                        ],
-                        "title": "Quicklinks",
-                      },
-                    },
-                    "title": "Blockchain",
-                    "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                  },
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "",
-                      "feature": Object {
-                        "heading": "Make sense of Kubernetes",
-                        "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                        "linkTitle": "Deploy a simple Python application with Kubernetes",
-                        "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      "headingTitle": "Containers",
-                      "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Code patterns",
-                            "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          Object {
-                            "title": "Tutorials",
-                            "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          Object {
-                            "title": "Events",
-                            "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                        ],
-                        "title": "Quicklinks",
-                      },
-                    },
-                    "title": "Containers",
-                    "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                  },
-                  Object {
-                    "megapanelContent": Object {
-                      "description": "",
-                      "feature": Object {
-                        "heading": "Train your data no matter where it lives",
-                        "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                        "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                        "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                      },
-                      "headingTitle": "Analytics",
-                      "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                      "quickLinks": Object {
-                        "links": Array [
-                          Object {
-                            "title": "Code patterns",
-                            "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          Object {
-                            "title": "Tutorials",
-                            "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          Object {
-                            "title": "Events",
-                            "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                          Object {
-                            "title": "Developer community",
-                            "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                          },
-                        ],
-                        "title": "Quicklinks",
-                      },
-                    },
-                    "title": "Analytics",
-                    "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                  },
-                ],
-              },
-            ],
-            "title": "Fusce nec tellus sed augue semper porta",
-            "titleEnglish": "Fusce nec tellus sed augue semper porta",
-            "url": "",
-          },
-          Object {
-            "hasMegapanel": false,
-            "hasMenu": false,
-            "menuSections": Array [],
-            "title": "Sed cursus ante dapibus diam",
-            "titleEnglish": "Sed cursus ante dapibus diam",
-            "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-          },
-        ]
-      }
-      placeHolderText="Search all of IBM"
-      selectedMenuItem="Lorem ipsum dolor sit amet"
-    >
-      <Masthead
-        customProfileLogin={null}
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation={
-          Array [
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "Explore",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "",
-                          "imageUrl": "",
-                          "linkTitle": "",
-                          "linkUrl": "",
-                        },
-                        "headingTitle": "",
-                        "headingUrl": "",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Title",
-                        },
-                      },
-                      "title": "Link 1",
-                      "url": "",
-                    },
-                    Object {
-                      "title": "Menu dropdown item with extra long text",
-                      "url": "",
-                    },
-                  ],
-                },
-              ],
-              "title": "Lorem ipsum dolor sit amet",
-              "titleEnglish": "Lorem ipsum dolor sit amet",
-              "url": "",
-            },
-            Object {
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                        "feature": Object {
-                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                          "linkTitle": "Explore all our business consulting and technology services",
-                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        },
-                        "headingTitle": "Services",
-                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Link 2",
-                      "url": "",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "Funding options that fit your business",
-                        "feature": Object {
-                          "heading": "Cloud financing strategies that work for your business",
-                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                        },
-                        "headingTitle": "Financing",
-                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Financing",
-                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Consectetur adipiscing elit",
-              "titleEnglish": "Consectetur adipiscing elit",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Nulla quis sem at nibh elementum imperdiet",
-              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-              "url": "https://www.ibm.com/industries?lnk=min",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": true,
-              "menuSections": Array [
-                Object {
-                  "heading": "",
-                  "menuItems": Array [
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "IBM Developer newsletters",
-                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "IBM Developer",
-                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "IBM Developer",
-                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Blockchain 101",
-                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Blockchain",
-                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Subnav 1",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 2",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 3",
-                              "url": "",
-                            },
-                            Object {
-                              "title": "Subnav 4",
-                              "url": "",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Blockchain",
-                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Make sense of Kubernetes",
-                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                          "linkTitle": "Deploy a simple Python application with Kubernetes",
-                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Containers",
-                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Containers",
-                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                    Object {
-                      "megapanelContent": Object {
-                        "description": "",
-                        "feature": Object {
-                          "heading": "Train your data no matter where it lives",
-                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                        },
-                        "headingTitle": "Analytics",
-                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                        "quickLinks": Object {
-                          "links": Array [
-                            Object {
-                              "title": "Code patterns",
-                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Tutorials",
-                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Events",
-                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                            Object {
-                              "title": "Developer community",
-                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                            },
-                          ],
-                          "title": "Quicklinks",
-                        },
-                      },
-                      "title": "Analytics",
-                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                    },
-                  ],
-                },
-              ],
-              "title": "Fusce nec tellus sed augue semper porta",
-              "titleEnglish": "Fusce nec tellus sed augue semper porta",
-              "url": "",
-            },
-            Object {
-              "hasMegapanel": false,
-              "hasMenu": false,
-              "menuSections": Array [],
-              "title": "Sed cursus ante dapibus diam",
-              "titleEnglish": "Sed cursus ante dapibus diam",
-              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-            },
-          ]
-        }
-        placeHolderText="Search all of IBM"
-        platform={null}
-        searchOpenOnload={false}
-        selectedMenuItem="Lorem ipsum dolor sit amet"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className=""
-                      data-autoid="dds--masthead-default-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-default-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      customProfileLogin={null}
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="default"
-                      navigation={
-                        Array [
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "Explore",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "",
-                                        "imageUrl": "",
-                                        "linkTitle": "",
-                                        "linkUrl": "",
-                                      },
-                                      "headingTitle": "",
-                                      "headingUrl": "",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Title",
-                                      },
-                                    },
-                                    "title": "Link 1",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "title": "Menu dropdown item with extra long text",
-                                    "url": "",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Lorem ipsum dolor sit amet",
-                            "titleEnglish": "Lorem ipsum dolor sit amet",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                      "feature": Object {
-                                        "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                        "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                        "linkTitle": "Explore all our business consulting and technology services",
-                                        "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                      },
-                                      "headingTitle": "Services",
-                                      "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Link 2",
-                                    "url": "",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "Funding options that fit your business",
-                                      "feature": Object {
-                                        "heading": "Cloud financing strategies that work for your business",
-                                        "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                        "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                        "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                      },
-                                      "headingTitle": "Financing",
-                                      "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Financing",
-                                    "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Consectetur adipiscing elit",
-                            "titleEnglish": "Consectetur adipiscing elit",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": false,
-                            "menuSections": Array [],
-                            "title": "Nulla quis sem at nibh elementum imperdiet",
-                            "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                            "url": "https://www.ibm.com/industries?lnk=min",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": true,
-                            "menuSections": Array [
-                              Object {
-                                "heading": "",
-                                "menuItems": Array [
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "IBM Developer newsletters",
-                                        "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                        "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                        "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "IBM Developer",
-                                      "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "IBM Developer",
-                                    "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Blockchain 101",
-                                        "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                        "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                        "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Blockchain",
-                                      "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Subnav 1",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 2",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 3",
-                                            "url": "",
-                                          },
-                                          Object {
-                                            "title": "Subnav 4",
-                                            "url": "",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Blockchain",
-                                    "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Make sense of Kubernetes",
-                                        "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                        "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                        "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Containers",
-                                      "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Code patterns",
-                                            "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Tutorials",
-                                            "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Events",
-                                            "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Containers",
-                                    "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                  Object {
-                                    "megapanelContent": Object {
-                                      "description": "",
-                                      "feature": Object {
-                                        "heading": "Train your data no matter where it lives",
-                                        "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                        "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                        "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                      },
-                                      "headingTitle": "Analytics",
-                                      "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                      "quickLinks": Object {
-                                        "links": Array [
-                                          Object {
-                                            "title": "Code patterns",
-                                            "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Tutorials",
-                                            "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Events",
-                                            "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                          Object {
-                                            "title": "Developer community",
-                                            "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                          },
-                                        ],
-                                        "title": "Quicklinks",
-                                      },
-                                    },
-                                    "title": "Analytics",
-                                    "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                  },
-                                ],
-                              },
-                            ],
-                            "title": "Fusce nec tellus sed augue semper porta",
-                            "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                            "url": "",
-                          },
-                          Object {
-                            "hasMegapanel": false,
-                            "hasMenu": false,
-                            "menuSections": Array [],
-                            "title": "Sed cursus ante dapibus diam",
-                            "titleEnglish": "Sed cursus ante dapibus diam",
-                            "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                          },
-                        ]
-                      }
-                      onOverlayClick={[Function]}
-                      platform={null}
-                      selectedMenuItem="Lorem ipsum dolor sit amet"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-default-sidenav__l0"
-                          >
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-default-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav0"
-                                            dataTitle="lorem-ipsum-dolor-sit-amet"
-                                            isSideNavExpanded={false}
-                                            key="Lorem ipsum dolor sit amet"
-                                            onToggle={[Function]}
-                                            selected={true}
-                                            title="Lorem ipsum dolor sit amet"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav0"
-                                              buttonRef={null}
-                                              dataTitle="lorem-ipsum-dolor-sit-amet"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={true}
-                                              title="Lorem ipsum dolor sit amet"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu bx--masthead__side-nav--submemu--selected"
-                                                  data-selected="true"
-                                                  data-title="lorem-ipsum-dolor-sit-amet"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav0"
-                                                    >
-                                                      Lorem ipsum dolor sit amet
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav1"
-                                            dataTitle="consectetur-adipiscing-elit"
-                                            isSideNavExpanded={false}
-                                            key="Consectetur adipiscing elit"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Consectetur adipiscing elit"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav1"
-                                              buttonRef={null}
-                                              dataTitle="consectetur-adipiscing-elit"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Consectetur adipiscing elit"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  data-title="consectetur-adipiscing-elit"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1"
-                                                    >
-                                                      Consectetur adipiscing elit
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav2"
-                                            href="https://www.ibm.com/industries?lnk=min"
-                                            key="Nulla quis sem at nibh elementum imperdiet"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav2"
-                                                element="a"
-                                                href="https://www.ibm.com/industries?lnk=min"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav2"
-                                                  href="https://www.ibm.com/industries?lnk=min"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Nulla quis sem at nibh elementum imperdiet
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3"
-                                            dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                            isSideNavExpanded={false}
-                                            key="Fusce nec tellus sed augue semper porta"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Fusce nec tellus sed augue semper porta"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3"
-                                              buttonRef={null}
-                                              dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Fusce nec tellus sed augue semper porta"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  data-title="fusce-nec-tellus-sed-augue-semper-porta"
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3"
-                                                    >
-                                                      Fusce nec tellus sed augue semper porta
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav4"
-                                            href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                            key="Sed cursus ante dapibus diam"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav4"
-                                                element="a"
-                                                href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav4"
-                                                  href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Sed cursus ante dapibus diam
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading="Explore"
-                                        id="panel__(0,-1)"
-                                        isSubmenu={true}
-                                        key="Lorem ipsum dolor sit amet"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Lorem ipsum dolor sit amet"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Lorem ipsum dolor sit amet
-                                          </li>
-                                          <p
-                                            className="bx--masthead__side-nav--submemu-heading"
-                                          >
-                                            Explore
-                                          </p>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav0-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Link 1"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Link 1"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav0-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Link 1"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav0-list0"
-                                                    >
-                                                      Link 1
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
-                                            href=""
-                                            key="Menu dropdown item with extra long text"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Menu dropdown item with extra long text
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading=""
-                                        id="panel__(1,-1)"
-                                        isSubmenu={true}
-                                        key="Consectetur adipiscing elit"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Consectetur adipiscing elit"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Consectetur adipiscing elit
-                                          </li>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav1-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Link 2"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Link 2"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav1-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Link 2"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1-list0"
-                                                    >
-                                                      Link 2
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav1-list1"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Financing"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Financing"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav1-list1"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Financing"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav1-list1"
-                                                    >
-                                                      Financing
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        heading=""
-                                        id="panel__(3,-1)"
-                                        isSubmenu={true}
-                                        key="Fusce nec tellus sed augue semper porta"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Fusce nec tellus sed augue semper porta"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Fusce nec tellus sed augue semper porta
-                                          </li>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list0"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="IBM Developer"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="IBM Developer"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list0"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="IBM Developer"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list0"
-                                                    >
-                                                      IBM Developer
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list1"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Blockchain"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Blockchain"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list1"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Blockchain"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list1"
-                                                    >
-                                                      Blockchain
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list2"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Containers"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Containers"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list2"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Containers"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list2"
-                                                    >
-                                                      Containers
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <ForwardRef
-                                            autoid="dds--masthead-default-sidenav__l0-nav3-list3"
-                                            className={null}
-                                            isSideNavExpanded={false}
-                                            key="Analytics"
-                                            onToggle={[Function]}
-                                            selected={false}
-                                            title="Analytics"
-                                          >
-                                            <SideNavMenu
-                                              autoid="dds--masthead-default-sidenav__l0-nav3-list3"
-                                              buttonRef={null}
-                                              className={null}
-                                              defaultExpanded={false}
-                                              isActive={false}
-                                              isSideNavExpanded={false}
-                                              large={false}
-                                              onToggle={[Function]}
-                                              selected={false}
-                                              title="Analytics"
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <button
-                                                  aria-expanded={false}
-                                                  aria-haspopup="true"
-                                                  className="bx--side-nav__submenu"
-                                                  data-selected=""
-                                                  onClick={[Function]}
-                                                  type="button"
-                                                >
-                                                  <div
-                                                    className="bx--side-nav__submenu-content"
-                                                  >
-                                                    <span
-                                                      className="bx--side-nav__submenu-title"
-                                                      data-autoid="dds--masthead-default-sidenav__l0-nav3-list3"
-                                                    >
-                                                      Analytics
-                                                    </span>
-                                                    <SideNavIcon
-                                                      className="bx--side-nav__submenu-chevron"
-                                                      small={true}
-                                                    >
-                                                      <div
-                                                        className="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron"
-                                                      >
-                                                        <ForwardRef(ChevronDown20)>
-                                                          <Icon
-                                                            fill="currentColor"
-                                                            height={20}
-                                                            preserveAspectRatio="xMidYMid meet"
-                                                            viewBox="0 0 32 32"
-                                                            width={20}
-                                                            xmlns="http://www.w3.org/2000/svg"
-                                                          >
-                                                            <svg
-                                                              aria-hidden={true}
-                                                              fill="currentColor"
-                                                              focusable="false"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 32 32"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <path
-                                                                d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                              />
-                                                            </svg>
-                                                          </Icon>
-                                                        </ForwardRef(ChevronDown20)>
-                                                      </div>
-                                                    </SideNavIcon>
-                                                  </div>
-                                                </button>
-                                              </li>
-                                            </SideNavMenu>
-                                          </ForwardRef>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(0,0)"
-                                        isSubmenu={true}
-                                        key="Link 1"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Link 1"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Link 1
-                                          </li>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav0-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(0,1)"
-                                        isSubmenu={true}
-                                        key="Menu dropdown item with extra long text"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Menu dropdown item with extra long text"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(0,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Menu dropdown item with extra long text
-                                          </li>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,0)"
-                                        isSubmenu={true}
-                                        key="Link 2"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Link 2"
-                                        titleUrl=""
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <li
-                                            className="bx--masthead__side-nav--submemu-title"
-                                          >
-                                            Link 2
-                                          </li>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(1,1)"
-                                        isSubmenu={true}
-                                        key="Financing"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Financing"
-                                        titleUrl="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(1,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Financing
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav1-list1-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,0)"
-                                        isSubmenu={true}
-                                        key="IBM Developer"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="IBM Developer"
-                                        titleUrl="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,0)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        IBM Developer
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list0-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,1)"
-                                        isSubmenu={true}
-                                        key="Blockchain"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Blockchain"
-                                        titleUrl="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Blockchain
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
-                                            href=""
-                                            key="Subnav 1"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item0"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 1
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
-                                            href=""
-                                            key="Subnav 2"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item1"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 2
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
-                                            href=""
-                                            key="Subnav 3"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item2"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 3
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
-                                            href=""
-                                            key="Subnav 4"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
-                                                element="a"
-                                                href=""
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list1-item3"
-                                                  href=""
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Subnav 4
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,2)"
-                                        isSubmenu={true}
-                                        key="Containers"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Containers"
-                                        titleUrl="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,2)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Containers
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
-                                            href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item0"
-                                                  href="https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
-                                            href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
-                                            href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list2-item2"
-                                                  href="https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                      <SideNavMenuSection
-                                        backButtonText="Back"
-                                        className="bx--side-nav__menu-section-submenu"
-                                        id="panel__(3,3)"
-                                        isSubmenu={true}
-                                        key="Analytics"
-                                        navType="default"
-                                        onBackClick={[Function]}
-                                        show={false}
-                                        title="Analytics"
-                                        titleUrl="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                      >
-                                        <div
-                                          aria-hidden={true}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section-submenu"
-                                          id="panel__(3,3)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                          <ForwardRef(SideNavMenuBackButton)
-                                            backButtonText="Back"
-                                            navType="default"
-                                            onBackClick={[Function]}
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item bx--masthead__side-nav--submemu-back"
-                                            >
-                                              <button
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-back"
-                                                isbackbutton="true"
-                                                onClick={[Function]}
-                                                onKeyPress={[Function]}
-                                              >
-                                                <span
-                                                  className="bx--side-nav__link-text"
-                                                >
-                                                  <ForwardRef(ChevronLeft20)>
-                                                    <Icon
-                                                      fill="currentColor"
-                                                      height={20}
-                                                      preserveAspectRatio="xMidYMid meet"
-                                                      viewBox="0 0 32 32"
-                                                      width={20}
-                                                      xmlns="http://www.w3.org/2000/svg"
-                                                    >
-                                                      <svg
-                                                        aria-hidden={true}
-                                                        fill="currentColor"
-                                                        focusable="false"
-                                                        height={20}
-                                                        preserveAspectRatio="xMidYMid meet"
-                                                        viewBox="0 0 32 32"
-                                                        width={20}
-                                                        xmlns="http://www.w3.org/2000/svg"
-                                                      >
-                                                        <path
-                                                          d="M10 16L20 6 21.4 7.4 12.8 16 21.4 24.6 20 26z"
-                                                        />
-                                                      </svg>
-                                                    </Icon>
-                                                  </ForwardRef(ChevronLeft20)>
-                                                  Back
-                                                </span>
-                                              </button>
-                                            </li>
-                                          </ForwardRef(SideNavMenuBackButton)>
-                                          <SideNavLink
-                                            className="bx--masthead__side-nav--submemu-section-title"
-                                            element="a"
-                                            href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            large={false}
-                                          >
-                                            <SideNavItem
-                                              large={false}
-                                            >
-                                              <li
-                                                className="bx--side-nav__item"
-                                              >
-                                                <Link
-                                                  className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                >
-                                                  <a
-                                                    className="bx--side-nav__link bx--masthead__side-nav--submemu-section-title"
-                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  >
-                                                    <SideNavLinkText>
-                                                      <span
-                                                        className="bx--side-nav__link-text"
-                                                      >
-                                                        Analytics
-                                                        <div
-                                                          className="bx--masthead__side-nav--submemu-section-title__icon"
-                                                        >
-                                                          <ForwardRef(ArrowRight20)>
-                                                            <Icon
-                                                              fill="currentColor"
-                                                              height={20}
-                                                              preserveAspectRatio="xMidYMid meet"
-                                                              viewBox="0 0 20 20"
-                                                              width={20}
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                            >
-                                                              <svg
-                                                                aria-hidden={true}
-                                                                fill="currentColor"
-                                                                focusable="false"
-                                                                height={20}
-                                                                preserveAspectRatio="xMidYMid meet"
-                                                                viewBox="0 0 20 20"
-                                                                width={20}
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                              >
-                                                                <path
-                                                                  d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                                                />
-                                                              </svg>
-                                                            </Icon>
-                                                          </ForwardRef(ArrowRight20)>
-                                                        </div>
-                                                      </span>
-                                                    </SideNavLinkText>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </SideNavItem>
-                                          </SideNavLink>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
-                                            href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Code patterns"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
-                                                element="a"
-                                                href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item0"
-                                                  href="https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Code patterns
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
-                                            href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Tutorials"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
-                                                element="a"
-                                                href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item1"
-                                                  href="https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Tutorials
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
-                                            href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Events"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
-                                                element="a"
-                                                href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item2"
-                                                  href="https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Events
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <SideNavMenuItem
-                                            className={null}
-                                            data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
-                                            href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                            key="Developer community"
-                                            role="menuitem"
-                                          >
-                                            <li
-                                              className="bx--side-nav__menu-item"
-                                            >
-                                              <Link
-                                                className="bx--side-nav__link"
-                                                data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
-                                                element="a"
-                                                href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                role="menuitem"
-                                              >
-                                                <a
-                                                  className="bx--side-nav__link"
-                                                  data-autoid="dds--masthead-default-sidenav__l0-nav3-list3-item3"
-                                                  href="https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn"
-                                                  role="menuitem"
-                                                >
-                                                  <SideNavLinkText>
-                                                    <span
-                                                      className="bx--side-nav__link-text"
-                                                    >
-                                                      Developer community
-                                                    </span>
-                                                  </SideNavLinkText>
-                                                </a>
-                                              </Link>
-                                            </li>
-                                          </SideNavMenuItem>
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-default__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-default__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search "
-                    >
-                      <MastheadTopNav
-                        customProfileLogin={null}
-                        hasCurrentUrl={[Function]}
-                        navType="default"
-                        navigation={
-                          Array [
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": true,
-                              "menuSections": Array [
-                                Object {
-                                  "heading": "Explore",
-                                  "menuItems": Array [
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "",
-                                          "imageUrl": "",
-                                          "linkTitle": "",
-                                          "linkUrl": "",
-                                        },
-                                        "headingTitle": "",
-                                        "headingUrl": "",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Title",
-                                        },
-                                      },
-                                      "title": "Link 1",
-                                      "url": "",
-                                    },
-                                    Object {
-                                      "title": "Menu dropdown item with extra long text",
-                                      "url": "",
-                                    },
-                                  ],
-                                },
-                              ],
-                              "title": "Lorem ipsum dolor sit amet",
-                              "titleEnglish": "Lorem ipsum dolor sit amet",
-                              "url": "",
-                            },
-                            Object {
-                              "hasMenu": true,
-                              "menuSections": Array [
-                                Object {
-                                  "heading": "",
-                                  "menuItems": Array [
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "Reimagine your business, designing and building the platforms necessary for growth",
-                                        "feature": Object {
-                                          "heading": "IBM Services, your Digital Reinvention â„¢ partner",
-                                          "imageUrl": "https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg",
-                                          "linkTitle": "Explore all our business consulting and technology services",
-                                          "linkUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                        },
-                                        "headingTitle": "Services",
-                                        "headingUrl": "https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Link 2",
-                                      "url": "",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "Funding options that fit your business",
-                                        "feature": Object {
-                                          "heading": "Cloud financing strategies that work for your business",
-                                          "imageUrl": "https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1",
-                                          "linkTitle": "Committed to cloud? Make the most of your cash flow.",
-                                          "linkUrl": "https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn",
-                                        },
-                                        "headingTitle": "Financing",
-                                        "headingUrl": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Financing",
-                                      "url": "https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn",
-                                    },
-                                  ],
-                                },
-                              ],
-                              "title": "Consectetur adipiscing elit",
-                              "titleEnglish": "Consectetur adipiscing elit",
-                              "url": "",
-                            },
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": false,
-                              "menuSections": Array [],
-                              "title": "Nulla quis sem at nibh elementum imperdiet",
-                              "titleEnglish": "Nulla quis sem at nibh elementum imperdiet",
-                              "url": "https://www.ibm.com/industries?lnk=min",
-                            },
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": true,
-                              "menuSections": Array [
-                                Object {
-                                  "heading": "",
-                                  "menuItems": Array [
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "IBM Developer newsletters",
-                                          "imageUrl": "https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg",
-                                          "linkTitle": "Technical info on popular software development topics, including AI, Blockchain, Java and more",
-                                          "linkUrl": "https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "IBM Developer",
-                                        "headingUrl": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "IBM Developer",
-                                      "url": "https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "Blockchain 101",
-                                          "imageUrl": "https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3",
-                                          "linkTitle": "Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan",
-                                          "linkUrl": "https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "Blockchain",
-                                        "headingUrl": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Subnav 1",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 2",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 3",
-                                              "url": "",
-                                            },
-                                            Object {
-                                              "title": "Subnav 4",
-                                              "url": "",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Blockchain",
-                                      "url": "https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "Make sense of Kubernetes",
-                                          "imageUrl": "https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2",
-                                          "linkTitle": "Deploy a simple Python application with Kubernetes",
-                                          "linkUrl": "https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "Containers",
-                                        "headingUrl": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Code patterns",
-                                              "url": "https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Tutorials",
-                                              "url": "https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Events",
-                                              "url": "https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Containers",
-                                      "url": "https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                    Object {
-                                      "megapanelContent": Object {
-                                        "description": "",
-                                        "feature": Object {
-                                          "heading": "Train your data no matter where it lives",
-                                          "imageUrl": "https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg",
-                                          "linkTitle": "Easily and securely connect to your data source for initial model training and continuous learning",
-                                          "linkUrl": "https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn",
-                                        },
-                                        "headingTitle": "Analytics",
-                                        "headingUrl": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                        "quickLinks": Object {
-                                          "links": Array [
-                                            Object {
-                                              "title": "Code patterns",
-                                              "url": "https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Tutorials",
-                                              "url": "https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Events",
-                                              "url": "https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                            Object {
-                                              "title": "Developer community",
-                                              "url": "https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn",
-                                            },
-                                          ],
-                                          "title": "Quicklinks",
-                                        },
-                                      },
-                                      "title": "Analytics",
-                                      "url": "https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn",
-                                    },
-                                  ],
-                                },
-                              ],
-                              "title": "Fusce nec tellus sed augue semper porta",
-                              "titleEnglish": "Fusce nec tellus sed augue semper porta",
-                              "url": "",
-                            },
-                            Object {
-                              "hasMegapanel": false,
-                              "hasMenu": false,
-                              "menuSections": Array [],
-                              "title": "Sed cursus ante dapibus diam",
-                              "titleEnglish": "Sed cursus ante dapibus diam",
-                              "url": "https://www.ibm.com/support/home/?lnk=msu_usen",
-                            },
-                          ]
-                        }
-                        platform={null}
-                        selectedMenuItem="Lorem ipsum dolor sit amet"
-                      >
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  >
-                                    <ForwardRef
-                                      aria-label="Lorem ipsum dolor sit amet"
-                                      autoId="dds--masthead-default__l0-nav0"
-                                      className=""
-                                      dataTitle="lorem-ipsum-dolor-sit-amet"
-                                      disableScroll={false}
-                                      key=".$0"
-                                      menuLinkName="Lorem ipsum dolor sit amet"
-                                      selected={true}
-                                      setOverlay={[Function]}
-                                    >
-                                      <HeaderMenu
-                                        aria-label="Lorem ipsum dolor sit amet"
-                                        autoId="dds--masthead-default__l0-nav0"
-                                        className=""
-                                        dataTitle="lorem-ipsum-dolor-sit-amet"
-                                        disableScroll={false}
-                                        focusRef={[Function]}
-                                        menuLinkName="Lorem ipsum dolor sit amet"
-                                        renderMenuContent={[Function]}
-                                        selected={true}
-                                        setOverlay={[Function]}
-                                      >
-                                        <li
-                                          className="bx--header__submenu"
-                                          data-autoid="dds--masthead-default__l0-nav0"
-                                          onBlur={[Function]}
-                                          onKeyDown={[Function]}
-                                        >
-                                          <a
-                                            aria-expanded={false}
-                                            aria-haspopup="menu"
-                                            aria-label="Lorem ipsum dolor sit amet"
-                                            className="bx--header__menu-item bx--header__menu-title"
-                                            data-selected="true"
-                                            data-title="lorem-ipsum-dolor-sit-amet"
-                                            href="#"
-                                            onClick={[Function]}
-                                            onKeyDown={[Function]}
-                                            role="menuitem"
-                                            tabIndex={0}
-                                          >
-                                            Lorem ipsum dolor sit amet
-                                            <defaultRenderMenuContent>
-                                              <ForwardRef(ChevronDown20)
-                                                className="bx--header__menu-arrow"
-                                              >
-                                                <Icon
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--header__menu-arrow"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ChevronDown20)>
-                                            </defaultRenderMenuContent>
-                                          </a>
-                                          <ul
-                                            aria-label="Lorem ipsum dolor sit amet"
-                                            className="bx--header__menu"
-                                          >
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
-                                              href=""
-                                              key=".$Link 1"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
-                                                  element="a"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item0"
-                                                    href=""
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Link 1
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
-                                              href=""
-                                              key=".$Menu dropdown item with extra long text"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
-                                                  element="a"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav0--subnav-col0-item1"
-                                                    href=""
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Menu dropdown item with extra long text
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                          </ul>
-                                        </li>
-                                      </HeaderMenu>
-                                    </ForwardRef>
-                                    <ForwardRef
-                                      aria-label="Consectetur adipiscing elit"
-                                      autoId="dds--masthead-default__l0-nav1"
-                                      className=""
-                                      dataTitle="consectetur-adipiscing-elit"
-                                      key=".$1"
-                                      menuLinkName="Consectetur adipiscing elit"
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <HeaderMenu
-                                        aria-label="Consectetur adipiscing elit"
-                                        autoId="dds--masthead-default__l0-nav1"
-                                        className=""
-                                        dataTitle="consectetur-adipiscing-elit"
-                                        focusRef={[Function]}
-                                        menuLinkName="Consectetur adipiscing elit"
-                                        renderMenuContent={[Function]}
-                                        selected={false}
-                                        setOverlay={[Function]}
-                                      >
-                                        <li
-                                          className="bx--header__submenu"
-                                          data-autoid="dds--masthead-default__l0-nav1"
-                                          onBlur={[Function]}
-                                          onKeyDown={[Function]}
-                                        >
-                                          <a
-                                            aria-expanded={false}
-                                            aria-haspopup="menu"
-                                            aria-label="Consectetur adipiscing elit"
-                                            className="bx--header__menu-item bx--header__menu-title"
-                                            data-selected="false"
-                                            data-title="consectetur-adipiscing-elit"
-                                            href="#"
-                                            onClick={[Function]}
-                                            onKeyDown={[Function]}
-                                            role="menuitem"
-                                            tabIndex={0}
-                                          >
-                                            Consectetur adipiscing elit
-                                            <defaultRenderMenuContent>
-                                              <ForwardRef(ChevronDown20)
-                                                className="bx--header__menu-arrow"
-                                              >
-                                                <Icon
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--header__menu-arrow"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ChevronDown20)>
-                                            </defaultRenderMenuContent>
-                                          </a>
-                                          <ul
-                                            aria-label="Consectetur adipiscing elit"
-                                            className="bx--header__menu"
-                                          >
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
-                                              href=""
-                                              key=".$Link 2"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
-                                                  element="a"
-                                                  href=""
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item0"
-                                                    href=""
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Link 2
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
-                                              href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                              key=".$Financing"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
-                                                  element="a"
-                                                  href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav1--subnav-col0-item1"
-                                                    href="https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn"
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Financing
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                          </ul>
-                                        </li>
-                                      </HeaderMenu>
-                                    </ForwardRef>
-                                    <HeaderMenuItem
-                                      data-autoid="dds--masthead-default__l0-nav2"
-                                      data-selected="false"
-                                      href="https://www.ibm.com/industries?lnk=min"
-                                      key=".$2"
-                                    >
-                                      <li>
-                                        <Link
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-default__l0-nav2"
-                                          data-selected="false"
-                                          element="a"
-                                          href="https://www.ibm.com/industries?lnk=min"
-                                          tabIndex={0}
-                                        >
-                                          <a
-                                            className="bx--header__menu-item"
-                                            data-autoid="dds--masthead-default__l0-nav2"
-                                            data-selected="false"
-                                            href="https://www.ibm.com/industries?lnk=min"
-                                            tabIndex={0}
-                                          >
-                                            <span
-                                              className="bx--text-truncate--end"
-                                            >
-                                              Nulla quis sem at nibh elementum imperdiet
-                                            </span>
-                                          </a>
-                                        </Link>
-                                      </li>
-                                    </HeaderMenuItem>
-                                    <ForwardRef
-                                      aria-label="Fusce nec tellus sed augue semper porta"
-                                      autoId="dds--masthead-default__l0-nav3"
-                                      className=""
-                                      dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                      disableScroll={false}
-                                      key=".$3"
-                                      menuLinkName="Fusce nec tellus sed augue semper porta"
-                                      selected={false}
-                                      setOverlay={[Function]}
-                                    >
-                                      <HeaderMenu
-                                        aria-label="Fusce nec tellus sed augue semper porta"
-                                        autoId="dds--masthead-default__l0-nav3"
-                                        className=""
-                                        dataTitle="fusce-nec-tellus-sed-augue-semper-porta"
-                                        disableScroll={false}
-                                        focusRef={[Function]}
-                                        menuLinkName="Fusce nec tellus sed augue semper porta"
-                                        renderMenuContent={[Function]}
-                                        selected={false}
-                                        setOverlay={[Function]}
-                                      >
-                                        <li
-                                          className="bx--header__submenu"
-                                          data-autoid="dds--masthead-default__l0-nav3"
-                                          onBlur={[Function]}
-                                          onKeyDown={[Function]}
-                                        >
-                                          <a
-                                            aria-expanded={false}
-                                            aria-haspopup="menu"
-                                            aria-label="Fusce nec tellus sed augue semper porta"
-                                            className="bx--header__menu-item bx--header__menu-title"
-                                            data-selected="false"
-                                            data-title="fusce-nec-tellus-sed-augue-semper-porta"
-                                            href="#"
-                                            onClick={[Function]}
-                                            onKeyDown={[Function]}
-                                            role="menuitem"
-                                            tabIndex={0}
-                                          >
-                                            Fusce nec tellus sed augue semper porta
-                                            <defaultRenderMenuContent>
-                                              <ForwardRef(ChevronDown20)
-                                                className="bx--header__menu-arrow"
-                                              >
-                                                <Icon
-                                                  className="bx--header__menu-arrow"
-                                                  fill="currentColor"
-                                                  height={20}
-                                                  preserveAspectRatio="xMidYMid meet"
-                                                  viewBox="0 0 32 32"
-                                                  width={20}
-                                                  xmlns="http://www.w3.org/2000/svg"
-                                                >
-                                                  <svg
-                                                    aria-hidden={true}
-                                                    className="bx--header__menu-arrow"
-                                                    fill="currentColor"
-                                                    focusable="false"
-                                                    height={20}
-                                                    preserveAspectRatio="xMidYMid meet"
-                                                    viewBox="0 0 32 32"
-                                                    width={20}
-                                                    xmlns="http://www.w3.org/2000/svg"
-                                                  >
-                                                    <path
-                                                      d="M16 22L6 12 7.4 10.6 16 19.2 24.6 10.6 26 12z"
-                                                    />
-                                                  </svg>
-                                                </Icon>
-                                              </ForwardRef(ChevronDown20)>
-                                            </defaultRenderMenuContent>
-                                          </a>
-                                          <ul
-                                            aria-label="Fusce nec tellus sed augue semper porta"
-                                            className="bx--header__menu"
-                                          >
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
-                                              href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$IBM Developer"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item0"
-                                                    href="https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn"
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      IBM Developer
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
-                                              href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$Blockchain"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item1"
-                                                    href="https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn"
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Blockchain
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
-                                              href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$Containers"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item2"
-                                                    href="https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn"
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Containers
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                            <HeaderMenuItem
-                                              data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
-                                              href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                              key=".$Analytics"
-                                              role="none"
-                                            >
-                                              <li
-                                                role="none"
-                                              >
-                                                <Link
-                                                  className="bx--header__menu-item"
-                                                  data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
-                                                  element="a"
-                                                  href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                  tabIndex={0}
-                                                >
-                                                  <a
-                                                    className="bx--header__menu-item"
-                                                    data-autoid="dds--masthead-default__l0-nav3--subnav-col0-item3"
-                                                    href="https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn"
-                                                    tabIndex={0}
-                                                  >
-                                                    <span
-                                                      className="bx--text-truncate--end"
-                                                    >
-                                                      Analytics
-                                                    </span>
-                                                  </a>
-                                                </Link>
-                                              </li>
-                                            </HeaderMenuItem>
-                                          </ul>
-                                        </li>
-                                      </HeaderMenu>
-                                    </ForwardRef>
-                                    <HeaderMenuItem
-                                      data-autoid="dds--masthead-default__l0-nav4"
-                                      data-selected="false"
-                                      href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                      key=".$4"
-                                    >
-                                      <li>
-                                        <Link
-                                          className="bx--header__menu-item"
-                                          data-autoid="dds--masthead-default__l0-nav4"
-                                          data-selected="false"
-                                          element="a"
-                                          href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                          tabIndex={0}
-                                        >
-                                          <a
-                                            className="bx--header__menu-item"
-                                            data-autoid="dds--masthead-default__l0-nav4"
-                                            data-selected="false"
-                                            href="https://www.ibm.com/support/home/?lnk=msu_usen"
-                                            tabIndex={0}
-                                          >
-                                            <span
-                                              className="bx--text-truncate--end"
-                                            >
-                                              Sed cursus ante dapibus diam
-                                            </span>
-                                          </a>
-                                        </Link>
-                                      </li>
-                                    </HeaderMenuItem>
-                                  </ul>
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        customProfileLogin={null}
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="default"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-default__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-default__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-default__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-default__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="default"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-default__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-default__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-default__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-default__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-    </Default>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Masthead With platform 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-masthead--with-platform",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Masthead/__stories__/Masthead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": Object {
-        "escapeHTML": false,
-      },
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Masthead: With platform",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      hasProfile={true}
-      hasSearch={true}
-      navigation="default"
-      placeHolderText="Search all of IBM"
-      platform={
-        Object {
-          "name": "IBM Cloud",
-          "url": "https://www.ibm.com/cloud",
-        }
-      }
-      selectedMenuItem="Consulting & Services"
-    >
-      <Masthead
-        hasProfile={true}
-        hasSearch={true}
-        initialSearchTerm=""
-        mastheadL1Data={null}
-        navigation="default"
-        placeHolderText="Search all of IBM"
-        platform={
-          Object {
-            "name": "IBM Cloud",
-            "url": "https://www.ibm.com/cloud",
-          }
-        }
-        searchOpenOnload={false}
-        selectedMenuItem="Consulting & Services"
-      >
-        <HeaderContainer
-          isSideNavExpanded={false}
-          render={[Function]}
-        >
-          <render
-            isSideNavExpanded={false}
-            onClickSideNavExpand={[Function]}
-          >
-            <div
-              className="bx--masthead"
-            >
-              <div
-                className="bx--masthead__l0"
-              >
-                <Header
-                  aria-label="IBM"
-                  data-autoid="dds--masthead"
-                >
-                  <header
-                    aria-label="IBM"
-                    className="bx--header"
-                    data-autoid="dds--masthead"
-                  >
-                    <SkipToContent
-                      href="#main-content"
-                      tabIndex="0"
-                    >
-                      <a
-                        className="bx--skip-to-content"
-                        href="#main-content"
-                        tabIndex="0"
-                      >
-                        Skip to main content
-                      </a>
-                    </SkipToContent>
-                    <HeaderMenuButton
-                      aria-label="Open menu"
-                      className="bx--masthead__platform"
-                      data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                      isActive={false}
-                      onBlur={[Function]}
-                      onClick={[Function]}
-                    >
-                      <button
-                        aria-label="Open menu"
-                        className="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                        data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                        onBlur={[Function]}
-                        onClick={[Function]}
-                        title="Open menu"
-                        type="button"
-                      >
-                        <ForwardRef(Menu20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(Menu20)>
-                      </button>
-                    </HeaderMenuButton>
-                    <MastheadLeftNav
-                      backButtonText="Back"
-                      hasL1Data={false}
-                      isSideNavExpanded={false}
-                      navType="eco"
-                      navigation={Array []}
-                      onOverlayClick={[Function]}
-                      platform={
-                        Object {
-                          "name": "IBM Cloud",
-                          "url": "https://www.ibm.com/cloud",
-                        }
-                      }
-                      selectedMenuItem="Consulting & Services"
-                    >
-                      <SideNav
-                        addFocusListeners={true}
-                        addMouseListeners={true}
-                        aria-label="Side navigation"
-                        defaultExpanded={false}
-                        expanded={false}
-                        isChildOfHeader={true}
-                        isFixedNav={false}
-                        isPersistent={false}
-                        onOverlayClick={[Function]}
-                      >
-                        <div
-                          className="bx--side-nav__overlay"
-                          onClick={[Function]}
-                        />
-                        <nav
-                          aria-label="Side navigation"
-                          className="bx--side-nav__navigation bx--side-nav bx--side-nav--ux bx--side-nav--hidden"
-                          onBlur={[Function]}
-                          onFocus={[Function]}
-                        >
-                          <nav
-                            data-autoid="dds--masthead-eco-sidenav__l0"
-                          >
-                            <a
-                              className="bx--side-nav__submenu bx--side-nav__submenu-platform"
-                              data-autoid="dds--masthead-eco-sidenav__l0-productname"
-                              href="https://www.ibm.com/cloud"
-                            >
-                              IBM Cloud
-                            </a>
-                            <SideNavItems>
-                              <ul
-                                className="bx--side-nav__items"
-                              >
-                                <HeaderSideNavItems
-                                  hasDivider={false}
-                                  key=".0"
-                                >
-                                  <ul
-                                    className="bx--side-nav__header-navigation"
-                                  >
-                                    <div>
-                                      <SideNavMenuSection
-                                        focusNode={
-                                          <button
-                                            aria-label="Open menu"
-                                            class="bx--masthead__platform bx--header__action bx--header__menu-trigger bx--header__menu-toggle bx--header__menu-toggle__hidden"
-                                            data-autoid="dds--masthead-eco-sidenav__l0-menu"
-                                            title="Open menu"
-                                            type="button"
-                                          >
-                                            <svg
-                                              aria-hidden="true"
-                                              fill="currentColor"
-                                              focusable="false"
-                                              height="20"
-                                              preserveAspectRatio="xMidYMid meet"
-                                              viewBox="0 0 20 20"
-                                              width="20"
-                                              xmlns="http://www.w3.org/2000/svg"
-                                            >
-                                              <path
-                                                d="M2 14.8H18V16H2zM2 11.2H18V12.399999999999999H2zM2 7.6H18V8.799999999999999H2zM2 4H18V5.2H2z"
-                                              />
-                                            </svg>
-                                          </button>
-                                        }
-                                        id="panel__(-1,-1)"
-                                        onBackClick={[Function]}
-                                        show={true}
-                                      >
-                                        <div
-                                          aria-hidden={false}
-                                          className="bx--side-nav__menu-section bx--side-nav__menu-section--expanded"
-                                          id="panel__(-1,-1)"
-                                        >
-                                          <button
-                                            className="bx--masthead__focus"
-                                            onFocus={[Function]}
-                                          >
-                                            focus trapping button
-                                          </button>
-                                        </div>
-                                      </SideNavMenuSection>
-                                    </div>
-                                  </ul>
-                                </HeaderSideNavItems>
-                              </ul>
-                            </SideNavItems>
-                          </nav>
-                        </nav>
-                      </SideNav>
-                    </MastheadLeftNav>
-                    <IbmLogo
-                      autoid="dds--masthead-eco__l0-logo"
-                      isSearchActive={false}
-                    >
-                      <div
-                        className="bx--header__logo"
-                      >
-                        <ConditionalWrapper
-                          wrapper={[Function]}
-                        >
-                          <a
-                            aria-label="IBM®"
-                            data-autoid="dds--masthead-eco__l0-logo"
-                            href="https://www.ibm.com"
-                          >
-                            <MastheadLogo
-                              height="23"
-                              viewBox="0 0 58 23"
-                              width="58"
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <svg
-                                height="23"
-                                viewBox="0 0 58 23"
-                                width="58"
-                                xmlns="http://www.w3.org/2000/svg"
-                              >
-                                <path
-                                  d="M58 21.467V23h-7.632v-1.533H58zm-18.316 0V23h-7.631v-1.533h7.631zm5.955 0L45.025 23l-.606-1.533h1.22zm-17.097 0A6.285 6.285 0 0 1 24.391 23H12.21v-1.533zm-17.858 0V23H0v-1.533h10.684zm29-3.067v1.533h-7.631V18.4h7.631zm7.148 0l-.594 1.533H43.82l-.598-1.533h3.609zm-16.764 0a5.719 5.719 0 0 1-.64 1.533H12.21V18.4zm-19.384 0v1.533H0V18.4h10.684zM58 18.4v1.533h-7.632V18.4H58zm-3.053-3.067v1.534h-4.579v-1.534h4.58zm-15.263 0v1.534h-4.579v-1.534h4.58zm8.345 0l-.6 1.534h-4.806l-.604-1.534h6.01zm-18.174 0c.137.49.213 1.003.213 1.534h-5.647v-1.534zm-10.013 0v1.534h-4.579v-1.534h4.58zm-12.21 0v1.534h-4.58v-1.534h4.58zm47.315-3.066V13.8h-4.579v-1.533h4.58zm-15.263 0V13.8h-4.579v-1.533h4.58zm9.541 0l-.597 1.533h-7.22l-.591-1.533h8.408zm-21.248 0c.527.432.98.951 1.328 1.533H15.263v-1.533zm-20.345 0V13.8h-4.58v-1.533h4.58zM44.599 9.2l.427 1.24.428-1.24h9.493v1.533h-4.579V9.324l-.519 1.41h-9.661l-.504-1.41v1.41h-4.579V9.2H44.6zm-36.967 0v1.533h-4.58V9.2h4.58zm21.673 0a5.95 5.95 0 0 1-1.328 1.533H15.263V9.2zm25.642-3.067v1.534h-8.964l.54-1.534h8.424zm-11.413 0l.54 1.534h-8.969V6.133h8.43zm-13.466 0c0 .531-.076 1.045-.213 1.534H24.42V6.133zm-10.226 0v1.534h-4.579V6.133h4.58zm-12.21 0v1.534h-4.58V6.133h4.58zm34.845-3.066l.53 1.533H32.054V3.067h10.424zm15.523 0V4.6H47.04l.55-1.533H58zm-28.573 0c.284.473.504.988.641 1.533H12.211V3.067zm-18.743 0V4.6H0V3.067h10.684zM41.406 0l.54 1.533h-9.893V0h9.353zM58 0v1.533h-9.881L48.647 0H58zM24.39 0c1.601 0 3.057.581 4.152 1.533H12.211V0zM10.685 0v1.533H0V0h10.684z"
-                                  fill="none"
-                                  fillRule="evenodd"
-                                />
-                              </svg>
-                            </MastheadLogo>
-                          </a>
-                        </ConditionalWrapper>
-                      </div>
-                    </IbmLogo>
-                    <div
-                      className="bx--header__search bx--masthead__platform"
-                    >
-                      <MastheadTopNav
-                        hasCurrentUrl={[Function]}
-                        navType="eco"
-                        navigation={Array []}
-                        platform={
-                          Object {
-                            "name": "IBM Cloud",
-                            "url": "https://www.ibm.com/cloud",
-                          }
-                        }
-                        selectedMenuItem="Consulting & Services"
-                      >
-                        <div
-                          className="bx--masthead__platform-name"
-                        >
-                          <HeaderName
-                            data-autoid="dds--masthead-eco__l0-ecosystemname"
-                            href="https://www.ibm.com/cloud"
-                            prefix=""
-                          >
-                            <Link
-                              className="bx--header__name"
-                              data-autoid="dds--masthead-eco__l0-ecosystemname"
-                              element="a"
-                              href="https://www.ibm.com/cloud"
-                            >
-                              <a
-                                className="bx--header__name"
-                                data-autoid="dds--masthead-eco__l0-ecosystemname"
-                                href="https://www.ibm.com/cloud"
-                              >
-                                IBM Cloud
-                              </a>
-                            </Link>
-                          </HeaderName>
-                        </div>
-                        <HeaderNavContainer>
-                          <div
-                            className="bx--header__nav-container"
-                          >
-                            <div
-                              className="bx--header__nav-content"
-                            >
-                              <div
-                                className="bx--sub-content-left"
-                              />
-                              <div
-                                className="bx--sub-content-right"
-                              />
-                              <HeaderNavigation
-                                aria-label="IBM"
-                                data-autoid="dds--masthead__l0-nav"
-                              >
-                                <nav
-                                  aria-label="IBM"
-                                  className="bx--header__nav"
-                                  data-autoid="dds--masthead__l0-nav"
-                                >
-                                  <ul
-                                    aria-label="IBM"
-                                    className="bx--header__menu-bar"
-                                  />
-                                </nav>
-                              </HeaderNavigation>
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-left-container"
-                              hidden={true}
-                            >
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead left caret"
-                                className="bx--header__nav-caret-left"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretLeft20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M20 24L10 16 20 8z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretLeft20)>
-                              </button>
-                              <div
-                                className="bx--header__nav-caret-left-gradient"
-                              />
-                            </div>
-                            <div
-                              className="bx--header__nav-caret-right-container"
-                              hidden={true}
-                            >
-                              <div
-                                className="bx--header__nav-caret-right-gradient"
-                              />
-                              <button
-                                aria-hidden="true"
-                                aria-label="Masthead right caret"
-                                className="bx--header__nav-caret-right"
-                                onClick={[Function]}
-                                tabIndex="-1"
-                              >
-                                <ForwardRef(CaretRight20)>
-                                  <Icon
-                                    fill="currentColor"
-                                    height={20}
-                                    preserveAspectRatio="xMidYMid meet"
-                                    viewBox="0 0 32 32"
-                                    width={20}
-                                    xmlns="http://www.w3.org/2000/svg"
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      fill="currentColor"
-                                      focusable="false"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <path
-                                        d="M12 8L22 16 12 24z"
-                                      />
-                                    </svg>
-                                  </Icon>
-                                </ForwardRef(CaretRight20)>
-                              </button>
-                            </div>
-                          </div>
-                        </HeaderNavContainer>
-                        <div
-                          className="bx--masthead__overlay"
-                        />
-                      </MastheadTopNav>
-                      <ForwardRef
-                        initialSearchTerm=""
-                        isSearchActive={false}
-                        navType="eco"
-                        onChangeSearchActive={[Function]}
-                        placeHolderText="Search all of IBM"
-                        renderValue={3}
-                        searchOpenOnload={false}
-                      >
-                        <div
-                          className="bx--masthead__search"
-                          data-autoid="dds--masthead__search"
-                        >
-                          <div
-                            className="bx--header__search--actions"
-                          >
-                            <HeaderGlobalAction
-                              aria-label="Open IBM search field"
-                              className="bx--header__search--search"
-                              data-autoid="dds--masthead-eco__l0-search"
-                              onClick={[Function]}
-                              tabIndex={0}
-                            >
-                              <Button
-                                aria-label="Open IBM search field"
-                                className="bx--header__search--search bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search"
-                                hasIconOnly={true}
-                                iconDescription="Open IBM search field"
-                                onClick={[Function]}
-                                tabIndex={0}
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Open IBM search field"
-                                  aria-pressed={null}
-                                  className="bx--header__search--search bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Open IBM search field
-                                  </div>
-                                  <ForwardRef(Search20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M29,27.5859l-7.5521-7.5521a11.0177,11.0177,0,1,0-1.4141,1.4141L27.5859,29ZM4,13a9,9,0,1,1,9,9A9.01,9.01,0,0,1,4,13Z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Search20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                            <HeaderGlobalAction
-                              aria-label="Clear input"
-                              className="bx--header__search--close"
-                              data-autoid="dds--masthead-eco__l0-search--close"
-                              onClick={[Function]}
-                              part="close-button"
-                            >
-                              <Button
-                                aria-label="Clear input"
-                                className="bx--header__search--close bx--header__action"
-                                data-autoid="dds--masthead-eco__l0-search--close"
-                                hasIconOnly={true}
-                                iconDescription="Clear input"
-                                onClick={[Function]}
-                                part="close-button"
-                                tooltipPosition="bottom"
-                                type="button"
-                              >
-                                <button
-                                  aria-describedby={null}
-                                  aria-label="Clear input"
-                                  aria-pressed={null}
-                                  className="bx--header__search--close bx--header__action bx--btn bx--btn--primary bx--tooltip--hidden bx--btn--icon-only bx--tooltip__trigger bx--tooltip--a11y bx--btn--icon-only--bottom bx--tooltip--align-center"
-                                  data-autoid="dds--masthead-eco__l0-search--close"
-                                  disabled={false}
-                                  onBlur={[Function]}
-                                  onClick={[Function]}
-                                  onFocus={[Function]}
-                                  onMouseEnter={[Function]}
-                                  onMouseLeave={[Function]}
-                                  part="close-button"
-                                  tabIndex={0}
-                                  type="button"
-                                >
-                                  <div
-                                    className="bx--assistive-text"
-                                    onMouseEnter={[Function]}
-                                  >
-                                    Clear input
-                                  </div>
-                                  <ForwardRef(Close20)>
-                                    <Icon
-                                      fill="currentColor"
-                                      height={20}
-                                      preserveAspectRatio="xMidYMid meet"
-                                      viewBox="0 0 32 32"
-                                      width={20}
-                                      xmlns="http://www.w3.org/2000/svg"
-                                    >
-                                      <svg
-                                        aria-hidden={true}
-                                        fill="currentColor"
-                                        focusable="false"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <path
-                                          d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                        />
-                                      </svg>
-                                    </Icon>
-                                  </ForwardRef(Close20)>
-                                </button>
-                              </Button>
-                            </HeaderGlobalAction>
-                          </div>
-                        </div>
-                      </ForwardRef>
-                    </div>
-                    <HeaderGlobalBar
-                      className="bx--header__profile"
-                    >
-                      <div
-                        className="bx--header__global bx--header__profile"
-                      >
-                        <MastheadProfile
-                          navType="eco"
-                          overflowMenuItemProps={
-                            Object {
-                              "wrapperClassName": "bx--masthead__profile-item",
-                            }
-                          }
-                          overflowMenuProps={
-                            Object {
-                              "ariaLabel": "User Profile",
-                              "data-autoid": "dds--masthead-eco__l0-account",
-                              "flipped": true,
-                              "onOpen": [Function],
-                              "renderIcon": [Function],
-                              "style": Object {
-                                "width": "3rem",
-                              },
-                            }
-                          }
-                          profileMenu={Array []}
-                        >
-                          <ForwardRef(OverflowMenu)
-                            ariaLabel="User Profile"
-                            className="bx--header__action"
-                            data-autoid="dds--masthead-eco__l0-account"
-                            flipped={true}
-                            onOpen={[Function]}
-                            renderIcon={[Function]}
-                            style={
-                              Object {
-                                "width": "3rem",
-                              }
-                            }
-                          >
-                            <OverflowMenu
-                              ariaLabel="User Profile"
-                              className="bx--header__action"
-                              data-autoid="dds--masthead-eco__l0-account"
-                              direction="bottom"
-                              flipped={true}
-                              focusTrap={true}
-                              iconDescription="Open and close list of options"
-                              innerRef={null}
-                              light={false}
-                              menuOffset={[Function]}
-                              menuOffsetFlip={[Function]}
-                              onClick={[Function]}
-                              onClose={[Function]}
-                              onKeyDown={[Function]}
-                              onOpen={[Function]}
-                              open={false}
-                              renderIcon={[Function]}
-                              selectorPrimaryFocus="[data-overflow-menu-primary-focus]"
-                              style={
-                                Object {
-                                  "width": "3rem",
-                                }
-                              }
-                            >
-                              <ClickListener
-                                onClickOutside={[Function]}
-                              >
-                                <button
-                                  aria-controls={null}
-                                  aria-expanded={false}
-                                  aria-haspopup={true}
-                                  aria-label="User Profile"
-                                  className="bx--header__action bx--overflow-menu bx--overflow-menu--md"
-                                  data-autoid="dds--masthead-eco__l0-account"
-                                  onClick={[Function]}
-                                  onClose={[Function]}
-                                  onKeyDown={[Function]}
-                                  open={false}
-                                  style={
-                                    Object {
-                                      "width": "3rem",
-                                    }
-                                  }
-                                  type="button"
-                                >
-                                  <renderIcon
-                                    aria-label="Open and close list of options"
-                                    className="bx--overflow-menu__icon"
-                                  >
-                                    <ForwardRef(User20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M16 4a5 5 0 11-5 5 5 5 0 015-5m0-2a7 7 0 107 7A7 7 0 0016 2zM26 30H24V25a5 5 0 00-5-5H13a5 5 0 00-5 5v5H6V25a7 7 0 017-7h6a7 7 0 017 7z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(User20)>
-                                  </renderIcon>
-                                </button>
-                              </ClickListener>
-                            </OverflowMenu>
-                          </ForwardRef(OverflowMenu)>
-                        </MastheadProfile>
-                      </div>
-                    </HeaderGlobalBar>
-                  </header>
-                </Header>
-              </div>
-            </div>
-          </render>
-        </HeaderContainer>
-      </Masthead>
-    </Default>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Notice Choice Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-notice-choice--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/NoticeChoice/__stories__/NoticeChoice.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "propsSet": Object {
-        "default": Object {
-          "NoticeChoice": Object {},
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-      style={
-        Object {
-          "marginTop": "2rem",
-        }
-      }
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-2"
-        >
-          <NoticeChoice
-            bpidLegalText=""
-            classNames="custom-class-by-app"
-            country="IN"
-            defaultValues={Object {}}
-            email=""
-            enableAllOptIn={false}
-            locale="in-en"
-            onChange={[Function]}
-            questionChoices={
-              Array [
-                1,
-                2,
-              ]
-            }
-            state=""
-            termsConditionLink="https://www.ibm.com/legal"
-          />
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Pictogram item Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-pictogram-item--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/PictogramItem/__stories__/PictogramItem.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Pictogram item: Default",
-      },
-      "propsSet": Object {
-        "default": Object {
-          "PictogramItem": Object {
-            "pictogram": Object {
-              "src": Object {
-                "$$typeof": Symbol(react.forward_ref),
-                "render": [Function],
-              },
-            },
-          },
-        },
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <PictogramItem
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
-            cta={
-              Object {
-                "copy": "Lorem ipsum dolor",
-                "href": "https://www.example.com",
-                "type": "local",
-              }
-            }
-            heading="Lorem ipsum dolor sit"
-            pictogram={
-              Object {
-                "aria-label": "Pictogram description",
-                "src": Object {
-                  "$$typeof": Symbol(react.forward_ref),
-                  "render": [Function],
-                },
-              }
-            }
-          >
-            <div
-              className="bx--pictogram-item"
-              data-autoid="dds--pictogram-item"
-            >
-              <div
-                className="bx--pictogram-item__row"
-              >
-                <div
-                  className="bx--pictogram-item__wrapper"
-                >
-                  <ForwardRef(Desktop)
-                    aria-label="Pictogram description"
-                    className="bx--pictogram-item__pictogram"
-                    data-autoid="dds--pictogram-item__pictogram"
-                  >
-                    <Icon
-                      aria-label="Pictogram description"
-                      className="bx--pictogram-item__pictogram"
-                      data-autoid="dds--pictogram-item__pictogram"
-                      fill="currentColor"
-                      height={64}
-                      preserveAspectRatio="xMidYMid meet"
-                      viewBox="0 0 32 32"
-                      width={64}
-                      xmlns="http://www.w3.org/2000/svg"
-                    >
-                      <svg
-                        aria-label="Pictogram description"
-                        className="bx--pictogram-item__pictogram"
-                        data-autoid="dds--pictogram-item__pictogram"
-                        fill="currentColor"
-                        focusable="false"
-                        height={64}
-                        preserveAspectRatio="xMidYMid meet"
-                        role="img"
-                        viewBox="0 0 32 32"
-                        width={64}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <path
-                          d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26	c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,0.904,0.736,1.64,1.64,1.64	h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5	V18.64z"
-                        />
-                      </svg>
-                    </Icon>
-                  </ForwardRef(Desktop)>
-                </div>
-                <div
-                  className="bx--pictogram-item__content"
-                  data-autoid="dds--pictogram-item__content"
-                >
-                  <ContentItem
-                    copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam"
-                    cta={
-                      Object {
-                        "copy": "Lorem ipsum dolor",
-                        "href": "https://www.example.com",
-                        "style": "text",
-                        "type": "local",
-                      }
-                    }
-                    heading="Lorem ipsum dolor sit"
-                  >
-                    <div
-                      className="bx--content-item"
-                      data-autoid="dds--content-item"
-                    >
-                      <h4
-                        className="bx--content-item__heading"
-                        data-autoid="dds--content-item__heading"
-                      >
-                        Lorem ipsum dolor sit
-                      </h4>
-                      <div
-                        className="bx--content-item__copy"
-                        dangerouslySetInnerHTML={
-                          Object {
-                            "__html": "<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</p> ",
-                          }
-                        }
-                        data-autoid="dds--content-item__copy"
-                      />
-                      <CTA
-                        copy="Lorem ipsum dolor"
-                        customClassName="bx--content-item__cta"
-                        customVideoTitle={null}
-                        href="https://www.example.com"
-                        style="text"
-                        type="local"
-                      >
-                        <div
-                          className="bx--content-item__cta"
-                        >
-                          <TextCTA
-                            copy="Lorem ipsum dolor"
-                            customVideoTitle={null}
-                            formatCTAcopy={[Function]}
-                            href="https://www.example.com"
-                            iconPlacement="right"
-                            openLightBox={[Function]}
-                            renderLightBox={false}
-                            style="text"
-                            type="local"
-                            videoTitle={
-                              Array [
-                                Object {
-                                  "duration": "",
-                                  "key": 0,
-                                  "title": "",
-                                },
-                              ]
-                            }
-                          >
-                            <LinkWithIcon
-                              href="https://www.example.com"
-                              iconInline={true}
-                              iconPlacement="right"
-                              onClick={[Function]}
-                              target={null}
-                            >
-                              <div
-                                className="bx--link-with-icon__container"
-                                data-autoid="dds--link-with-icon"
-                              >
-                                <Link
-                                  className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                                  href="https://www.example.com"
-                                  onClick={[Function]}
-                                  size="lg"
-                                  target={null}
-                                >
-                                  <a
-                                    className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                                    href="https://www.example.com"
-                                    onClick={[Function]}
-                                    rel={null}
-                                    target={null}
-                                  >
-                                    <span>
-                                      Lorem ipsum dolor
-                                    </span>
-                                    <span
-                                      className="bx--visually-hidden"
-                                    />
-                                    <ForwardRef(ArrowRight20)>
-                                      <Icon
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 20 20"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-hidden={true}
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          viewBox="0 0 20 20"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(ArrowRight20)>
-                                  </a>
-                                </Link>
-                              </div>
-                            </LinkWithIcon>
-                          </TextCTA>
-                        </div>
-                      </CTA>
-                    </div>
-                  </ContentItem>
-                </div>
-              </div>
-            </div>
-          </PictogramItem>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Quote Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-quote--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/Quote/__stories__/Quote.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Quote: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--offset-lg-4 bx--col-lg-12"
-        >
-          <Quote
-            copy="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna."
-            cta={
-              Object {
-                "copy": "Link with Icon",
-                "href": "https://example.com",
-                "type": "local",
-              }
-            }
-            inverse={false}
-            markType="doubleCurved"
-            source={
-              Object {
-                "copy": "consectetur adipiscing elit",
-                "copy2": "IBM Cloud",
-                "heading": "Lorem ipsum dolor sit amet",
-              }
-            }
-          >
-            <div
-              className="bx--quote"
-              data-autoid="dds--quote"
-            >
-              <div
-                className="bx--quote__container"
-              >
-                <div
-                  className="bx--quote__wrapper"
-                  data-autoid="dds--quote__copy"
-                >
-                  <span
-                    className="bx--quote__mark"
-                  >
-                    “
-                  </span>
-                  <blockquote
-                    className="bx--quote__copy"
-                  >
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.
-                    ”
-                  </blockquote>
-                </div>
-                <div
-                  className="bx--quote__source"
-                  data-autoid="dds--quote__source"
-                >
-                  <p
-                    className="bx--quote__source-heading"
-                  >
-                    Lorem ipsum dolor sit amet
-                  </p>
-                  <p
-                    className="bx--quote__source-body"
-                  >
-                    consectetur adipiscing elit
-                  </p>
-                  <p
-                    className="bx--quote__source-optional-copy"
-                  >
-                    IBM Cloud
-                  </p>
-                </div>
-              </div>
-              <div
-                className="bx--quote__footer"
-              >
-                <HorizontalRule>
-                  <hr
-                    className="bx--hr"
-                    data-autoid="dds--hr"
-                  />
-                </HorizontalRule>
-                <LinkWithIcon
-                  href="https://example.com"
-                  iconInline={true}
-                  iconPlacement="right"
-                >
-                  <div
-                    className="bx--link-with-icon__container"
-                    data-autoid="dds--link-with-icon"
-                  >
-                    <Link
-                      className="bx--link-with-icon bx--link-with-icon--inline-icon"
-                      href="https://example.com"
-                      size="lg"
-                    >
-                      <a
-                        className="bx--link bx--link-with-icon bx--link-with-icon--inline-icon bx--link--lg"
-                        href="https://example.com"
-                        rel={null}
-                      >
-                        <span>
-                          Link with Icon
-                        </span>
-                        <ForwardRef(ArrowRight20)>
-                          <Icon
-                            fill="currentColor"
-                            height={20}
-                            preserveAspectRatio="xMidYMid meet"
-                            viewBox="0 0 20 20"
-                            width={20}
-                            xmlns="http://www.w3.org/2000/svg"
-                          >
-                            <svg
-                              aria-hidden={true}
-                              fill="currentColor"
-                              focusable="false"
-                              height={20}
-                              preserveAspectRatio="xMidYMid meet"
-                              viewBox="0 0 20 20"
-                              width={20}
-                              xmlns="http://www.w3.org/2000/svg"
-                            >
-                              <path
-                                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-                              />
-                            </svg>
-                          </Icon>
-                        </ForwardRef(ArrowRight20)>
-                      </a>
-                    </Link>
-                  </div>
-                </LinkWithIcon>
-              </div>
-            </div>
-          </Quote>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Search With Typeahead Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-search-with-typeahead--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/SearchWithTypeahead/__stories__/SearchWithTypeahead.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-search-with-typeahead--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Table of contents Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-table-of-contents--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/TableOfContents/__stories__/TableOfContents.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Table of contents: Default",
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <style />
-    <TableOfContents
-      headingContent={false}
-      menuItems={null}
-      menuLabel="Jump to"
-      menuRule={true}
-      stickyOffset={null}
-      theme="white"
-    >
-      <section
-        className="bx--tableofcontents bx--tableofcontents--white"
-        data-autoid="dds--tableofcontents"
-      >
-        <div
-          className="dds-ce--table-of-contents__container"
-        >
-          <div
-            className="bx--tableofcontents__sidebar"
-          >
-            <div
-              className="bx--tableofcontents__mobile-top"
-            />
-            <div
-              style={
-                Object {
-                  "position": "sticky",
-                  "top": 0,
-                }
-              }
-            >
-              <TOCDesktop
-                headingContent={false}
-                menuItems={
-                  Array [
-                    Object {
-                      "id": "menuLabel",
-                      "title": "Jump to ...",
-                    },
-                  ]
-                }
-                menuLabel="Jump to"
-                menuRule={true}
-                selectedId=""
-                selectedTitle=""
-                updateState={[Function]}
-              >
-                <div
-                  className="bx--tableofcontents__desktop"
-                  data-autoid="dds--tableofcontents__desktop"
-                >
-                  <ul />
-                </div>
-              </TOCDesktop>
-              <TOCMobile
-                menuItems={
-                  Array [
-                    Object {
-                      "id": "menuLabel",
-                      "title": "Jump to ...",
-                    },
-                  ]
-                }
-                menuLabel="Jump to"
-                selectedId=""
-                selectedTitle=""
-                updateState={[Function]}
-              >
-                <div
-                  className="bx--tableofcontents__mobile"
-                  data-autoid="dds--tableofcontents__mobile"
-                >
-                  <div
-                    className="bx--tableofcontents__mobile__select__wrapper"
-                  >
-                    <select
-                      aria-label="Jump to"
-                      className="bx--tableofcontents__mobile__select"
-                      onBlur={[Function]}
-                      onChange={[Function]}
-                      value=""
-                    >
-                      <option
-                        className="bx--tableofcontents__mobile__select__option"
-                        data-autoid="dds--tableofcontents__mobile__select__option-menuLabel"
-                        defaultValue={true}
-                        disabled={true}
-                        hidden={true}
-                        key="0"
-                        value="menuLabel"
-                      >
-                        Jump to ...
-                      </option>
-                    </select>
-                    <ForwardRef(TableOfContents20)
-                      aria-label="menu icon"
-                      className="bx--tableofcontents__mobile__select__icon"
-                    >
-                      <Icon
-                        aria-label="menu icon"
-                        className="bx--tableofcontents__mobile__select__icon"
-                        fill="currentColor"
-                        height={20}
-                        preserveAspectRatio="xMidYMid meet"
-                        viewBox="0 0 32 32"
-                        width={20}
-                        xmlns="http://www.w3.org/2000/svg"
-                      >
-                        <svg
-                          aria-label="menu icon"
-                          className="bx--tableofcontents__mobile__select__icon"
-                          fill="currentColor"
-                          focusable="false"
-                          height={20}
-                          preserveAspectRatio="xMidYMid meet"
-                          role="img"
-                          viewBox="0 0 32 32"
-                          width={20}
-                          xmlns="http://www.w3.org/2000/svg"
-                        >
-                          <path
-                            d="M4 6H22V8H4zM4 12H22V14H4zM4 18H22V20H4zM4 24H22V26H4zM26 6H28V8H26zM26 12H28V14H26zM26 18H28V20H26zM26 24H28V26H26z"
-                          />
-                          <title>
-                            menu icon
-                          </title>
-                        </svg>
-                      </Icon>
-                    </ForwardRef(TableOfContents20)>
-                  </div>
-                </div>
-              </TOCMobile>
-            </div>
-          </div>
-          <div
-            className="bx--tableofcontents__content"
-          >
-            <div
-              className="bx--tableofcontents__content-wrapper"
-            >
-              <div
-                className="bx--tableofcontents__children__mobile"
-              />
-              <DataContent
-                items={
-                  Array [
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.",
-                      "heading": "Forward thinkers",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.",
-                      "heading": "Innovation and transformation",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.",
-                      "heading": "Client success stories",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.",
-                      "heading": "Iconic moments in IBM history",
-                    },
-                    Object {
-                      "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.",
-                      "heading": "Trust and responsibility",
-                    },
-                  ]
-                }
-              >
-                <div
-                  className="dds-react-demo--table-of-contents"
-                >
-                  <a
-                    data-title="Forward thinkers"
-                    name={0}
-                  >
-                    <h3>
-                      Forward thinkers
-                    </h3>
-                  </a>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <a
-                    data-title="Innovation and transformation"
-                    name={1}
-                  >
-                    <h3>
-                      Innovation and transformation
-                    </h3>
-                  </a>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <a
-                    data-title="Client success stories"
-                    name={2}
-                  >
-                    <h3>
-                      Client success stories
-                    </h3>
-                  </a>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <a
-                    data-title="Iconic moments in IBM history"
-                    name={3}
-                  >
-                    <h3>
-                      Iconic moments in IBM history
-                    </h3>
-                  </a>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <a
-                    data-title="Trust and responsibility"
-                    name={4}
-                  >
-                    <h3>
-                      Trust and responsibility
-                    </h3>
-                  </a>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                  <p>
-                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.
-                  </p>
-                </div>
-              </DataContent>
-            </div>
-          </div>
-        </div>
-      </section>
-    </TableOfContents>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Table of contents Horizontal 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-table-of-contents--horizontal",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/TableOfContents/__stories__/TableOfContents.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "knobs": null,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "name": "Components|Table of contents: Default",
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <style />
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-table-of-contents--horizontal"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Tabs extended Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-tabs-extended--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/TabsExtended/__stories__/TabsExtended.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Tabs extended media Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-tabs-extended-media--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/TabsExtendedMedia/__stories__/TabsExtendedMedia.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended-media--default"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Tag group Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-tag-group--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/TagGroup/__stories__/TagGroup.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tag-group"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Tag link Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-tag-link--default",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/TagLink/__stories__/TagLink.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-      "proxy": true,
-    }
-  }
-  story={[Function]}
->
-  <div
-    className="storybook-proxy-story"
-    data-floating-menu-container=""
-    role="main"
-  >
-    <p>
-      This component is maintained in
-       
-      <code>
-        @carbon/ibmdotcom-web-components
-      </code>
-       library with a
-       
-      <a
-        className="bx--link"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tag-link"
-        target="_blank"
-      >
-        React wrapper
-      </a>
-      .
-    </p>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Video player Aspect ratio 1:1 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-video-player--aspect-ratio-1-x-1",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/VideoPlayer/__stories__/VideoPlayer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      alt=""
-      aspectRatio="1x1"
-      caption=""
-      playingMode="inline"
-      showCaption={true}
-      thumbnail=""
-      videoId="1_9h94wo6b"
-    >
-      <div
-        className="bx--grid"
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-          >
-            <VideoPlayer
-              alt=""
-              aspectRatio="1x1"
-              autoPlay={false}
-              caption=""
-              playingMode="inline"
-              showCaption={true}
-              thumbnail=""
-              videoId="1_9h94wo6b"
-            >
-              <div
-                aria-label=" 0"
-                className="bx--video-player"
-                role="region"
-              >
-                <div
-                  className="bx--video-player__video-container bx--video-player__aspect-ratio--1x1"
-                  data-autoid="dds--video-player__video-1_9h94wo6b"
-                >
-                  <div
-                    className="bx--video-player__video"
-                    id="bx--video-player__video-1_9h94wo6b-223"
-                  >
-                    <VideoImageOverlay
-                      alt=""
-                      embedVideo={[Function]}
-                      playingMode="inline"
-                      thumbnail=""
-                      videoData={
-                        Object {
-                          "description": "",
-                          "name": "",
-                        }
-                      }
-                      videoId="1_9h94wo6b"
-                    >
-                      <button
-                        className="bx--video-player__image-overlay"
-                        data-autoid="dds--video-player__image-overlay"
-                        onClick={[Function]}
-                      >
-                        <Image
-                          alt=""
-                          defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                          icon={[Function]}
-                          refImage={[Function]}
-                        />
-                      </button>
-                    </VideoImageOverlay>
-                  </div>
-                </div>
-                <div
-                  className="bx--video-player__video-caption"
-                >
-                   0
-                </div>
-              </div>
-            </VideoPlayer>
-          </div>
-        </div>
-      </div>
-    </Default>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Video player Aspect ratio 4:3 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-video-player--aspect-ratio-4-x-3",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/VideoPlayer/__stories__/VideoPlayer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      alt=""
-      aspectRatio="4x3"
-      caption=""
-      playingMode="inline"
-      showCaption={true}
-      thumbnail=""
-      videoId="1_9h94wo6b"
-    >
-      <div
-        className="bx--grid"
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-          >
-            <VideoPlayer
-              alt=""
-              aspectRatio="4x3"
-              autoPlay={false}
-              caption=""
-              playingMode="inline"
-              showCaption={true}
-              thumbnail=""
-              videoId="1_9h94wo6b"
-            >
-              <div
-                aria-label=" 0"
-                className="bx--video-player"
-                role="region"
-              >
-                <div
-                  className="bx--video-player__video-container bx--video-player__aspect-ratio--4x3"
-                  data-autoid="dds--video-player__video-1_9h94wo6b"
-                >
-                  <div
-                    className="bx--video-player__video"
-                    id="bx--video-player__video-1_9h94wo6b-225"
-                  >
-                    <VideoImageOverlay
-                      alt=""
-                      embedVideo={[Function]}
-                      playingMode="inline"
-                      thumbnail=""
-                      videoData={
-                        Object {
-                          "description": "",
-                          "name": "",
-                        }
-                      }
-                      videoId="1_9h94wo6b"
-                    >
-                      <button
-                        className="bx--video-player__image-overlay"
-                        data-autoid="dds--video-player__image-overlay"
-                        onClick={[Function]}
-                      >
-                        <Image
-                          alt=""
-                          defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                          icon={[Function]}
-                          refImage={[Function]}
-                        />
-                      </button>
-                    </VideoImageOverlay>
-                  </div>
-                </div>
-                <div
-                  className="bx--video-player__video-caption"
-                >
-                   0
-                </div>
-              </div>
-            </VideoPlayer>
-          </div>
-        </div>
-      </div>
-    </Default>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Video player Default 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-video-player--default",
-      "__isArgsStory": true,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/VideoPlayer/__stories__/VideoPlayer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <div
-      className="bx--grid"
-    >
-      <div
-        className="bx--row"
-      >
-        <div
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-        >
-          <VideoPlayer
-            alt=""
-            aspectRatio="default"
-            autoPlay={false}
-            caption=""
-            playingMode="inline"
-            showCaption={true}
-            thumbnail=""
-            videoId="1_9h94wo6b"
-          >
-            <div
-              aria-label=" 0"
-              className="bx--video-player"
-              role="region"
-            >
-              <div
-                className="bx--video-player__video-container bx--video-player__aspect-ratio--default"
-                data-autoid="dds--video-player__video-1_9h94wo6b"
-              >
-                <div
-                  className="bx--video-player__video"
-                  id="bx--video-player__video-1_9h94wo6b-221"
-                >
-                  <VideoImageOverlay
-                    alt=""
-                    embedVideo={[Function]}
-                    playingMode="inline"
-                    thumbnail=""
-                    videoData={
-                      Object {
-                        "description": "",
-                        "name": "",
-                      }
-                    }
-                    videoId="1_9h94wo6b"
-                  >
-                    <button
-                      className="bx--video-player__image-overlay"
-                      data-autoid="dds--video-player__image-overlay"
-                      onClick={[Function]}
-                    >
-                      <Image
-                        alt=""
-                        defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                        icon={[Function]}
-                        refImage={[Function]}
-                      />
-                    </button>
-                  </VideoImageOverlay>
-                </div>
-              </div>
-              <div
-                className="bx--video-player__video-caption"
-              >
-                 0
-              </div>
-            </div>
-          </VideoPlayer>
-        </div>
-      </div>
-    </div>
-  </div>
-</Container>
-`;
-
-exports[`Storyshots Components/Video player With lightbox media viewer 1`] = `
-<Container
-  parameters={
-    Object {
-      "__id": "components-video-player--with-lightbox-media-viewer",
-      "__isArgsStory": false,
-      "actions": Object {
-        "disabled": true,
-      },
-      "argTypes": Object {},
-      "args": Object {},
-      "controls": Object {
-        "disabled": true,
-      },
-      "fileName": "./src/components/VideoPlayer/__stories__/VideoPlayer.stories.js",
-      "framework": "react",
-      "globalTypes": undefined,
-      "globals": undefined,
-      "layout": "fullscreen",
-      "options": Object {
-        "storySort": [Function],
-      },
-      "percy": Object {
-        "skip": true,
-      },
-    }
-  }
-  story={[Function]}
->
-  <div
-    className=""
-    data-floating-menu-container=""
-    role="main"
-  >
-    <Default
-      alt=""
-      aspectRatio="default"
-      caption=""
-      playingMode="lightbox"
-      showCaption={true}
-      thumbnail=""
-      videoId="1_9h94wo6b"
-    >
-      <div
-        className="bx--grid"
-      >
-        <div
-          className="bx--row"
-        >
-          <div
-            className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4"
-          >
-            <VideoPlayer
-              alt=""
-              aspectRatio="default"
-              autoPlay={false}
-              caption=""
-              playingMode="lightbox"
-              showCaption={true}
-              thumbnail=""
-              videoId="1_9h94wo6b"
-            >
-              <div
-                aria-label=" 0"
-                className="bx--video-player"
-                role="region"
-              >
-                <div
-                  className="bx--video-player__video-container bx--video-player__aspect-ratio--default"
-                  data-autoid="dds--video-player__video-1_9h94wo6b"
-                >
-                  <div
-                    className="bx--video-player__video"
-                  >
-                    <VideoImageOverlay
-                      alt=""
-                      embedVideo={[Function]}
-                      onClick={[Function]}
-                      playingMode="lightbox"
-                      thumbnail=""
-                      videoData={
-                        Object {
-                          "description": "",
-                          "name": "",
-                        }
-                      }
-                      videoId="1_9h94wo6b"
-                    >
-                      <button
-                        className="bx--video-player__image-overlay"
-                        data-autoid="dds--video-player__image-overlay"
-                        onClick={[Function]}
-                      >
-                        <Image
-                          alt=""
-                          defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                          icon={[Function]}
-                          refImage={[Function]}
-                        />
-                      </button>
-                    </VideoImageOverlay>
-                  </div>
-                  <LightboxMediaViewer
-                    media={
-                      Object {
-                        "src": "1_9h94wo6b",
-                        "title": "",
-                        "type": "video",
-                      }
-                    }
-                    onClose={[Function]}
-                    open={false}
-                  >
-                    <section
-                      className="bx--lightbox-media-viewer"
-                      data-autoid="dds--lightbox-media-viewer"
-                    >
-                      <ExpressiveModal
-                        fullwidth={true}
-                        onClose={[Function]}
-                        open={false}
-                      >
-                        <ComposedModal
-                          className="bx--modal--expressive bx--modal--expressive--fullwidth"
-                          data-autoid="dds--expressive-modal"
-                          onClose={[Function]}
-                          onKeyDown={[Function]}
-                          open={false}
-                          selectorPrimaryFocus=".bx--modal-close"
-                        >
-                          <div
-                            aria-hidden={true}
-                            className="bx--modal bx--modal--expressive bx--modal--expressive--fullwidth"
-                            data-autoid="dds--expressive-modal"
-                            onBlur={[Function]}
-                            onClick={[Function]}
-                            onClose={[Function]}
-                            onKeyDown={[Function]}
-                            open={false}
-                            role="presentation"
-                          >
-                            <div
-                              aria-modal="true"
-                              className="bx--modal-container"
-                              role="dialog"
-                            >
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                              <div
-                                className="bx--modal-container-body"
-                              >
-                                <ExpressiveModalCloseBtn
-                                  iconDescription="Close"
-                                  key=".0"
-                                  onClick={[Function]}
-                                >
-                                  <button
-                                    className="bx--modal-close"
-                                    data-autoid="dds--expressive-modal__close"
-                                    onClick={[Function]}
-                                    title="Close"
-                                    type="button"
-                                  >
-                                    <ForwardRef(Close20)
-                                      aria-label="Close"
-                                      className="bx--modal-close__icon"
-                                    >
-                                      <Icon
-                                        aria-label="Close"
-                                        className="bx--modal-close__icon"
-                                        fill="currentColor"
-                                        height={20}
-                                        preserveAspectRatio="xMidYMid meet"
-                                        viewBox="0 0 32 32"
-                                        width={20}
-                                        xmlns="http://www.w3.org/2000/svg"
-                                      >
-                                        <svg
-                                          aria-label="Close"
-                                          className="bx--modal-close__icon"
-                                          fill="currentColor"
-                                          focusable="false"
-                                          height={20}
-                                          preserveAspectRatio="xMidYMid meet"
-                                          role="img"
-                                          viewBox="0 0 32 32"
-                                          width={20}
-                                          xmlns="http://www.w3.org/2000/svg"
-                                        >
-                                          <path
-                                            d="M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z"
-                                          />
-                                        </svg>
-                                      </Icon>
-                                    </ForwardRef(Close20)>
-                                  </button>
-                                </ExpressiveModalCloseBtn>
-                                <ForwardRef(ModalBody)
-                                  key=".1"
-                                >
-                                  <div
-                                    className="bx--modal-content"
-                                  >
-                                    <div
-                                      className="bx--lightbox-media-viewer__container"
-                                    >
-                                      <div
-                                        className="bx--lightbox-media-viewer__row"
-                                      >
-                                        <div
-                                          className="bx--lightbox-media-viewer__media bx--no-gutter"
-                                        >
-                                          <VideoPlayer
-                                            autoPlay={false}
-                                            playingMode="inline"
-                                            videoId="1_9h94wo6b"
-                                          >
-                                            <div
-                                              aria-label=" 0"
-                                              className="bx--video-player"
-                                              role="region"
-                                            >
-                                              <div
-                                                className="bx--video-player__video-container "
-                                                data-autoid="dds--video-player__video-1_9h94wo6b"
-                                              >
-                                                <div
-                                                  className="bx--video-player__video"
-                                                  id="bx--video-player__video-1_9h94wo6b-233"
-                                                >
-                                                  <VideoImageOverlay
-                                                    embedVideo={[Function]}
-                                                    playingMode="inline"
-                                                    videoData={
-                                                      Object {
-                                                        "description": "",
-                                                        "name": "",
-                                                      }
-                                                    }
-                                                    videoId="1_9h94wo6b"
-                                                  >
-                                                    <button
-                                                      className="bx--video-player__image-overlay"
-                                                      data-autoid="dds--video-player__image-overlay"
-                                                      onClick={[Function]}
-                                                    >
-                                                      <Image
-                                                        alt=""
-                                                        defaultSrc="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/1_9h94wo6b/width/3"
-                                                        icon={[Function]}
-                                                        refImage={[Function]}
-                                                      />
-                                                    </button>
-                                                  </VideoImageOverlay>
-                                                </div>
-                                              </div>
-                                            </div>
-                                          </VideoPlayer>
-                                        </div>
-                                        <div
-                                          className="bx--lightbox-media-viewer__media-description bx--no-gutter"
-                                        >
-                                          <div
-                                            className="bx--lightbox-media-viewer__content"
-                                          />
-                                        </div>
-                                      </div>
-                                    </div>
-                                  </div>
-                                </ForwardRef(ModalBody)>
-                              </div>
-                              <button
-                                className="bx--visually-hidden"
-                                type="button"
-                              >
-                                Focus sentinel
-                              </button>
-                            </div>
-                          </div>
-                        </ComposedModal>
-                      </ExpressiveModal>
-                    </section>
-                  </LightboxMediaViewer>
-                </div>
-                <div
-                  className="bx--video-player__video-caption"
-                >
-                   0
-                </div>
-              </div>
-            </VideoPlayer>
-          </div>
-        </div>
-      </div>
-    </Default>
-  </div>
-</Container>
-`;
diff --git a/packages/react/src/__tests__/storyshots.test.js b/packages/react/src/__tests__/storyshots.test.js
deleted file mode 100644
index 371e83ba3d8..00000000000
--- a/packages/react/src/__tests__/storyshots.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * 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 initStoryshots from '@storybook/addon-storyshots';
-import { mount } from 'enzyme';
-import path from 'path';
-
-// Mocking ResizeObserver to avoid CI error where it appears to be undefined
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
-
-/**
- * This will initialize storyshots for snapshot testing.
- * NOTE: If a molecule/organism requires deeper testing, a __tests__ folder must be created in the corresponding folder
- * and create additional tests in there.
- */
-initStoryshots({
-  renderer: mount,
-
-  /* configuration options */
-  configPath: path.resolve(__dirname, '../../.storybook'),
-
-  // Ignore stories with "skip" in the storiesOf text value
-  storyKindRegex: /^((?!.*?skip).)*$/,
-});
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayer.js b/packages/react/src/components/AudioPlayer/AudioPlayer.js
deleted file mode 100644
index 63547e18f3c..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayer.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useState, useEffect } from 'react';
-import AudioPLayerCaptionsMenu from './AudioPlayerCaptionsMenu';
-import AudioPlayerCaptionText from './AudioPlayerCaptionText';
-import AudioPlayerPlaybackRateMenu from './AudioPlayerPlaybackRateMenu';
-import AudioPlayerPlayButton from './AudioPlayerPlayButton';
-import AudioPlayerScrubber from './AudioPlayerScrubber';
-import AudioPlayerThumbnail from './AudioPlayerThumbnail';
-import AudioPlayerVolumeControl from './AudioPlayerVolumeControl';
-import cx from 'classnames';
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import featureFlag from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/featureflag/featureflag';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-import uniqueid from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/uniqueid/uniqueid';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * AudioPlayer component.
- */
-export function AudioPlayer({
-  audioId,
-  customClassName,
-  autoPlay,
-  showCaptionMenu,
-  showPlaybackRateMenu,
-  availablePlaybackRates,
-  ...other
-}) {
-  const [audioData, setAudioData] = useState({ duration: 0 });
-  const [displayVolumeControl, setDisplayVolumeControl] = useState(false);
-  const audioPlayerId = uniqueid(`audio-player__audio-${audioId}-`);
-  const uniqueAudioPlayerId = `${prefix}--${audioPlayerId}`;
-  const [kalturaDigitalPlayer, setKalturaDigitalPlayer] = useState(false); // The KDP Object
-  const [availableCaptions, setAvailableCaptions] = useState({}); // All Available Captions
-
-  /**
-   * The current state of the player
-   *
-   * @param {string} '' - Player not initialized
-   * @param {string} 'loading' - Player initialized but waiting kdp to load
-   * @param {string} 'playing' - Player is playing
-   * @param {string} 'paused' - Player is paused
-   * @param {string} 'stopped' - Player stopped playing (audio finished)
-   */
-  const [audioState, setAudioState] = useState('');
-  const [audioVolume, setAudioVolume] = useState(1); // Current Volume
-  const [audioTime, setAudioTime] = useState(0); // Current Play Time
-  const [audioCaption, setAudioCaption] = useState(''); // Current Caption Language
-  const [audioPlaybackRate, setAudioPlaybackRate] = useState(1); // Current Playback Rate
-
-  useEffect(() => {
-    let stale = false;
-    (async () => {
-      if (audioState === 'loading') {
-        const embedAnswer = await KalturaPlayerAPI.embedMedia(
-          audioId,
-          uniqueAudioPlayerId,
-          {
-            autoPlay: true,
-            playbackRateSelector: {
-              defaultSpeed: 1,
-              plugin: true,
-            },
-          }
-        );
-
-        setAudioState('playing');
-
-        const kdp = await embedAnswer.kWidget();
-
-        setKalturaDigitalPlayer(kdp);
-
-        const listeners = {
-          playerUpdatePlayhead: (time) => {
-            setAudioTime(Math.floor(time));
-          },
-          newClosedCaptionsData: (captionData) => {
-            const processedCaptions = availableCaptions;
-            processedCaptions[captionData.label] = captionData.captions;
-            setAvailableCaptions(processedCaptions);
-          },
-          playerPlayEnd: () => {
-            setAudioState('stopped');
-            /**
-             * As the audio current time is floored on playhead update
-             *  when the audio stop because it endend, there is a huge
-             *  chance that the scrubber will show something like:
-             *  2:29 <---- scrubber ----> 2:30
-             *  but the audio will be ended and playbutton will show
-             *  the reload icon
-             * In order to fix it, we're manually setting the current
-             *  audio time to the audio duration
-             */
-            setAudioTime(audioData.duration);
-          },
-        };
-
-        // Loop and bind all the player listeners
-        root.Object.keys(listeners).map((listenerKey) => {
-          kdp.addJsListener(listenerKey, listeners[listenerKey]);
-        });
-      }
-      if (stale) {
-        return;
-      }
-      if (audioData.duration === 0) {
-        const newAudioData = await KalturaPlayerAPI.api(audioId);
-        if (stale) {
-          return;
-        }
-        setAudioData(newAudioData);
-      }
-    })();
-    return () => {
-      stale = true;
-    };
-  }, [
-    audioId,
-    audioState,
-    uniqueAudioPlayerId,
-    availableCaptions,
-    audioData.duration,
-  ]);
-
-  const initPlayer = () => {
-    setAudioState('loading');
-  };
-
-  if (autoPlay && audioState === '') {
-    initPlayer();
-  }
-
-  const classnames = cx(`${prefix}--audio-player`, customClassName);
-
-  return featureFlag(
-    DDS_AUDIO_PLAYER,
-    <div className={classnames}>
-      <div
-        className={`${prefix}--audio-player__embedded-player`}
-        data-autoid={`${stablePrefix}--audio-player__audio-${audioId}`}
-        id={uniqueAudioPlayerId}></div>
-
-      <AudioPlayerThumbnail audioId={audioId} />
-
-      <AudioPlayerPlayButton
-        kalturaDigitalPlayer={kalturaDigitalPlayer}
-        initPlayer={initPlayer}
-        audioState={audioState}
-        setAudioState={setAudioState}
-        setDisplayVolumeControl={setDisplayVolumeControl}
-      />
-
-      <AudioPlayerScrubber
-        kalturaDigitalPlayer={kalturaDigitalPlayer}
-        audioDuration={audioData.duration}
-        audioTime={audioTime}
-        setAudioTime={setAudioTime}
-        setDisplayVolumeControl={setDisplayVolumeControl}
-        rewindHelperText={other.rewindHelperText}
-        forwardHelperText={other.forwardHelperText}
-      />
-
-      <AudioPlayerVolumeControl
-        kalturaDigitalPlayer={kalturaDigitalPlayer}
-        audioVolume={audioVolume}
-        setAudioVolume={setAudioVolume}
-        displayVolumeControl={displayVolumeControl}
-        setDisplayVolumeControl={setDisplayVolumeControl}
-      />
-
-      {showPlaybackRateMenu && (
-        <AudioPlayerPlaybackRateMenu
-          kalturaDigitalPlayer={kalturaDigitalPlayer}
-          availablePlaybackRates={availablePlaybackRates}
-          audioPlaybackRate={audioPlaybackRate}
-          setAudioPlaybackRate={setAudioPlaybackRate}
-          setDisplayVolumeControl={setDisplayVolumeControl}
-        />
-      )}
-
-      {showCaptionMenu && (
-        <>
-          <AudioPLayerCaptionsMenu
-            kalturaDigitalPlayer={kalturaDigitalPlayer}
-            setDisplayVolumeControl={setDisplayVolumeControl}
-            availableCaptions={availableCaptions}
-            audioCaption={audioCaption}
-            setAudioCaption={setAudioCaption}
-            closedCaptionsHelperText={other.closedCaptionsHelperText}
-          />
-
-          {availableCaptions?.[audioCaption] && (
-            <AudioPlayerCaptionText
-              captions={availableCaptions[audioCaption]}
-              audioTime={audioTime}
-            />
-          )}
-        </>
-      )}
-    </div>
-  );
-}
-
-AudioPlayer.propTypes = {
-  /**
-   * Media ID from Kaltura media platform.
-   */
-  audioId: PropTypes.string.isRequired,
-  /**
-   * The CSS class name to apply.
-   */
-  customClassName: PropTypes.string,
-  /**
-   * `true` to autoplay the audio on load
-   */
-  autoPlay: PropTypes.bool,
-  /**
-   * `true` to show the playback rate button.
-   */
-  showPlaybackRateMenu: PropTypes.bool,
-  /**
-   * `true` to show the captions object.
-   */
-  showCaptionMenu: PropTypes.bool,
-  /**
-   * The available speed multiplier for playback rate
-   * example: [1, 1.5, 2]
-   */
-  availablePlaybackRates: PropTypes.arrayOf(PropTypes.number),
-  /**
-   * The CSS class name to apply.
-   */
-};
-
-AudioPlayer.defaultProps = {
-  customClassName: '',
-  autoPlay: false,
-  showCaptionMenu: true,
-  showPlaybackRateMenu: true,
-  availablePlaybackRates: [1, 1.5, 2],
-};
-
-export default AudioPlayer;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerCaptionText.js b/packages/react/src/components/AudioPlayer/AudioPlayerCaptionText.js
deleted file mode 100644
index ae78f7a54df..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerCaptionText.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-const AudioPlayerCaptionText = ({ captions, audioTime }) => {
-  const captionText = (captions || [])
-    .filter((caption) => {
-      return audioTime >= caption.start && audioTime <= caption.end;
-    })
-    .map((caption) => {
-      return caption.content;
-    })
-    .join('<br />');
-
-  return (
-    captions && (
-      <div className={`${prefix}--audio-player__captions`}>
-        <p
-          className={`${prefix}--audio-player__captions-text`}
-          dangerouslySetInnerHTML={{
-            __html: captionText,
-          }}></p>
-      </div>
-    )
-  );
-};
-
-AudioPlayerCaptionText.propTypes = {
-  /**
-   * An array containing all the captions for the current
-   *  selected language.
-   * Each entry of this array is an object containing:
-   *  start -> Number - The first second of the audio where
-   *          the caption should be displayed
-   *  end -> Number - The last second of the audio where
-   *          the caption should be displayed
-   *  content -> String - The html content of the caption
-   */
-  captions: PropTypes.array.isRequired,
-  /**
-   * The state getter for the current audio time (in seconds)
-   */
-  audioTime: PropTypes.number.isRequired,
-};
-
-AudioPlayerCaptionText.defaultProps = {
-  captions: [],
-  audioTime: 0,
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerCaptionText;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerCaptionsMenu.js b/packages/react/src/components/AudioPlayer/AudioPlayerCaptionsMenu.js
deleted file mode 100644
index de76319c80e..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerCaptionsMenu.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 AudioPlayerDisabledButton from './AudioPlayerDisabledButton';
-import ClosedCaptionFilled32 from '@carbon/icons-react/es/closed-caption--filled/20';
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-
-import OverflowMenu from '../../internal/vendor/carbon-components-react/components/OverflowMenu';
-import OverflowMenuItem from '../../internal/vendor/carbon-components-react/components/OverflowMenuItem';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-const AudioPlayerCaptionsMenu = ({
-  kalturaDigitalPlayer,
-  availableCaptions,
-  audioCaption,
-  setAudioCaption,
-  setDisplayVolumeControl,
-  closedCaptionsHelperText,
-}) => {
-  const hasCaptions = () => {
-    return Object.keys(availableCaptions).length > 0;
-  };
-
-  const handleAudioCaptions = (caption = '') => {
-    setAudioCaption(caption);
-  };
-
-  return (
-    <>
-      {!kalturaDigitalPlayer || !hasCaptions() ? (
-        <AudioPlayerDisabledButton icon={ClosedCaptionFilled32} />
-      ) : (
-        <div className={`${prefix}--audio-player__overflow-menu-container`}>
-          <OverflowMenu
-            renderIcon={ClosedCaptionFilled32}
-            direction="top"
-            flipped={true}
-            iconDescription={closedCaptionsHelperText}
-            selectorPrimaryFocus={`.${prefix}--audio-player__button-for-closed-caption-${audioCaption.toLowerCase()}`}
-            onOpen={() => setDisplayVolumeControl(false)}>
-            <OverflowMenuItem
-              className={`${prefix}--audio-player__button-for-closed-caption-`}
-              itemText="Off"
-              hasDivider
-              onClick={() => handleAudioCaptions()}
-              disabled={!kalturaDigitalPlayer || !hasCaptions()}
-            />
-
-            {Object.keys(availableCaptions).map(
-              (captionLabel, captionIndex) => {
-                return (
-                  <OverflowMenuItem
-                    className={`${prefix}--audio-player__button-for-closed-caption-${captionLabel.toLowerCase()}`}
-                    key={captionIndex}
-                    itemText={captionLabel}
-                    hasDivider
-                    onClick={() => handleAudioCaptions(captionLabel.toString())}
-                    disabled={!kalturaDigitalPlayer || !hasCaptions()}
-                  />
-                );
-              }
-            )}
-          </OverflowMenu>
-        </div>
-      )}
-    </>
-  );
-};
-
-AudioPlayerCaptionsMenu.propTypes = {
-  /**
-   * The kaltura digital player (KDP) object
-   * It starts as false and gets morphed into the html element
-   *  of the target player id reference during the kaltura player
-   *  embeding process as soon as the kaltura ready callback triggers
-   */
-  kalturaDigitalPlayer: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
-    .isRequired,
-  /**
-   * An object containing all captions.
-   * Each key of the object is the caption language label
-   *  and contain an array of entries.
-   * Each entry of this array is an object containing:
-   *  start -> Number - The first second of the audio where
-   *          the caption should be displayed
-   *  end -> Number - The last second of the audio where
-   *          the caption should be displayed
-   *  content -> String - The html content of the caption
-   */
-  availableCaptions: PropTypes.object.isRequired,
-  /**
-   * The state getter for the current selected caption language
-   */
-  audioCaption: PropTypes.string.isRequired,
-  /**
-   * The helper text label for the closed captions button
-   */
-  closedCaptionsHelperText: PropTypes.string,
-  /**
-   * The state setter for the current selected caption language
-   */
-  setAudioCaption: PropTypes.func.isRequired,
-  /**
-   * The state setter that show/hide the custom volume menu
-   */
-  setDisplayVolumeControl: PropTypes.func.isRequired,
-};
-
-AudioPlayerCaptionsMenu.defaultProps = {
-  kalturaDigitalPlayer: false,
-  availableCaptions: [],
-  audioCaption: '',
-  closedCaptionsHelperText: 'Closed captions',
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerCaptionsMenu;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerDisabledButton.js b/packages/react/src/components/AudioPlayer/AudioPlayerDisabledButton.js
deleted file mode 100644
index 7998d0a38ac..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerDisabledButton.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 Button from '../../internal/vendor/carbon-components-react/components/Button/Button';
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const AudioPlayerDisabledButton = ({ icon }) => {
-  return (
-    <Button
-      renderIcon={icon}
-      iconDescription="Disabled"
-      hasIconOnly
-      kind="ghost"
-      disabled={true}
-    />
-  );
-};
-
-AudioPlayerDisabledButton.propTypes = {
-  /**
-   * The icon that the button should render
-   */
-  icon: PropTypes.object,
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerDisabledButton;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerPlayButton.js b/packages/react/src/components/AudioPlayer/AudioPlayerPlayButton.js
deleted file mode 100644
index 497d2ded211..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerPlayButton.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 Button from '../../internal/vendor/carbon-components-react/components/Button/Button';
-
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-
-import PauseFilled32 from '@carbon/icons-react/es/pause--filled/32';
-import PlayFilledAlt32 from '@carbon/icons-react/es/play--filled--alt/32';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-const AudioPlayerPlayButton = ({
-  kalturaDigitalPlayer,
-  initPlayer,
-  audioState,
-  setAudioState,
-  setDisplayVolumeControl,
-}) => {
-  const handlePlayButton = () => {
-    if (audioState === '') {
-      initPlayer();
-    } else if (kalturaDigitalPlayer) {
-      if (audioState === 'playing') {
-        setAudioState('paused');
-        kalturaDigitalPlayer.sendNotification('doPause');
-      } else if (audioState === 'paused' || audioState === 'stopped') {
-        setAudioState('playing');
-        kalturaDigitalPlayer.sendNotification('doPlay');
-      }
-      // Hide the Volume Control Bar if Opened
-      setDisplayVolumeControl(false);
-    }
-  };
-
-  const handleButtonProps = () => {
-    let icon = PlayFilledAlt32;
-    let iconDescription = 'Play';
-
-    switch (audioState) {
-      case 'loading':
-      case 'playing':
-        icon = PauseFilled32;
-        iconDescription = 'Pause';
-        break;
-    }
-
-    return {
-      icon,
-      iconDescription,
-    };
-  };
-
-  const playButtonProps = handleButtonProps();
-
-  return (
-    <Button
-      className={`${prefix}--audio-player__play-button`}
-      renderIcon={playButtonProps.icon}
-      iconDescription={playButtonProps.iconDescription}
-      hasIconOnly
-      kind="ghost"
-      onClick={() => {
-        handlePlayButton();
-      }}
-      tooltipPosition="top"
-    />
-  );
-};
-
-AudioPlayerPlayButton.propTypes = {
-  /**
-   * The kaltura digital player (KDP) object
-   * It starts as false and gets morphed into the html element
-   *  of the target player id reference during the kaltura player
-   *  embeding process as soon as the kaltura ready callback triggers
-   */
-  kalturaDigitalPlayer: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
-    .isRequired,
-  /**
-   * The function that start the kaltura digital player embeding
-   *  process, bind all the events and start / gives-life-to the
-   *  audio component.
-   */
-  initPlayer: PropTypes.func.isRequired,
-  /**
-   * The state getter for the current state of the player
-   * The state list can be found in AudioPlayer.js
-   */
-  audioState: PropTypes.string.isRequired,
-  /**
-   * The state setter for the current state of the player
-   * The state list can be found in AudioPlayer.js
-   */
-  setAudioState: PropTypes.func.isRequired,
-  /**
-   * The state setter that show/hide the custom volume menu
-   */
-  setDisplayVolumeControl: PropTypes.func.isRequired,
-};
-
-AudioPlayerPlayButton.defaultProps = {
-  kalturaDigitalPlayer: false,
-  audioState: '',
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerPlayButton;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerPlaybackRateMenu.js b/packages/react/src/components/AudioPlayer/AudioPlayerPlaybackRateMenu.js
deleted file mode 100644
index fa93bd91d1b..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerPlaybackRateMenu.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 AudioPlayerDisabledButton from './AudioPlayerDisabledButton';
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-
-import OverflowMenu from '../../internal/vendor/carbon-components-react/components/OverflowMenu';
-import OverflowMenuItem from '../../internal/vendor/carbon-components-react/components/OverflowMenuItem';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import Time32 from '@carbon/icons-react/es/time/32';
-
-const { prefix } = settings;
-
-const AudioPlayerPlaybackRateMenu = ({
-  kalturaDigitalPlayer,
-  availablePlaybackRates,
-  audioPlaybackRate,
-  setAudioPlaybackRate,
-  setDisplayVolumeControl,
-}) => {
-  const handleAudioPlaybackRate = (velocity) => {
-    if (kalturaDigitalPlayer) {
-      setAudioPlaybackRate(velocity);
-
-      kalturaDigitalPlayer.sendNotification(
-        'playbackRateChangeSpeed',
-        velocity.toString()
-      );
-    }
-  };
-
-  return (
-    <>
-      {!kalturaDigitalPlayer ? (
-        <AudioPlayerDisabledButton icon={Time32} />
-      ) : (
-        <div className={`${prefix}--audio-player__overflow-menu-container`}>
-          <OverflowMenu
-            renderIcon={Time32}
-            direction="top"
-            flipped={true}
-            iconDescription="Playback Rate Speed"
-            selectorPrimaryFocus={`.${prefix}--audio-player__button-for-playback-rate-${audioPlaybackRate
-              .toString()
-              .split('.')
-              .join('-')}x`}
-            onOpen={() => setDisplayVolumeControl(false)}>
-            {availablePlaybackRates
-              .sort((a, b) => {
-                return a - b;
-              })
-              .map((playbackRateValue, playbackRateIndex) => {
-                return (
-                  <OverflowMenuItem
-                    className={`${prefix}--audio-player__button-for-playback-rate-${playbackRateValue
-                      .toString()
-                      .split('.')
-                      .join('-')}x`}
-                    key={playbackRateIndex}
-                    itemText={playbackRateValue.toString() + 'x'}
-                    hasDivider
-                    onClick={() => handleAudioPlaybackRate(playbackRateValue)}
-                    disabled={!kalturaDigitalPlayer}
-                  />
-                );
-              })}
-          </OverflowMenu>
-        </div>
-      )}
-    </>
-  );
-};
-
-AudioPlayerPlaybackRateMenu.propTypes = {
-  /**
-   * The kaltura digital player (KDP) object
-   * It starts as false and gets morphed into the html element
-   *  of the target player id reference during the kaltura player
-   *  embeding process as soon as the kaltura ready callback triggers
-   */
-  kalturaDigitalPlayer: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
-    .isRequired,
-  /**
-   * An array containing the available velocities/rates of the playback
-   * Decimal - Ideally the decimals should be multiples of 0.25
-   * Example & Default Values (inherited from parent):
-   *  [1, 1.5, 2]
-   */
-  availablePlaybackRates: PropTypes.arrayOf(PropTypes.number).isRequired,
-  /**
-   * The state getter for the current playback rate
-   */
-  audioPlaybackRate: PropTypes.number.isRequired,
-  /**
-   * The state setter for the current playback rate
-   */
-  setAudioPlaybackRate: PropTypes.func.isRequired,
-  /**
-   * The state setter that show/hide the custom volume menu
-   */
-  setDisplayVolumeControl: PropTypes.func.isRequired,
-};
-
-AudioPlayerPlaybackRateMenu.defaultProps = {
-  kalturaDigitalPlayer: false,
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerPlaybackRateMenu;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerScrubber.js b/packages/react/src/components/AudioPlayer/AudioPlayerScrubber.js
deleted file mode 100644
index 2d3590c3122..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerScrubber.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 Button from '../../internal/vendor/carbon-components-react/components/Button/Button';
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-import Forward1032 from '@carbon/icons-react/es/forward--10/32';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import PropTypes from 'prop-types';
-import React from 'react';
-import Rewind_1032 from '@carbon/icons-react/es/rewind--10/32';
-import settings from 'carbon-components/es/globals/js/settings';
-import Slider from '../../internal/vendor/carbon-components-react/components/Slider/Slider';
-
-const { prefix } = settings;
-
-const AudioPlayerScrubber = ({
-  kalturaDigitalPlayer,
-  audioTime,
-  setAudioTime,
-  audioDuration,
-  setDisplayVolumeControl,
-  rewindHelperText,
-  forwardHelperText,
-}) => {
-  const audioDurationAsString =
-    KalturaPlayerAPI.getMediaDuration(audioDuration); // Audio Total Time
-
-  const handleFormat = (minMax, minOrMaxLabel) => {
-    return minOrMaxLabel;
-  };
-
-  const handleRewindForwardAudio = (addedValue) => {
-    if (kalturaDigitalPlayer) {
-      let time = audioTime + addedValue;
-      time = time < 0 ? 0 : time;
-      time = time >= audioDuration ? audioDuration : time;
-
-      kalturaDigitalPlayer.sendNotification('doSeek', time);
-      setAudioTime(time);
-      // Hide the Volume Control Bar if Opened
-      setDisplayVolumeControl(false);
-    }
-  };
-
-  const handleScrubberChange = (time) => {
-    /**
-     * As this will trigger every time the updatePlayhead listener triggers
-     *  and we floor the floating value returned, sometimes it will return like
-     *  1.123 -> Floored to 1
-     *  then next tick / callback will return
-     *  1.98123 -> Floored to 1
-     * Meaning that this function will trigger and set the second
-     *  on the player to 1 - making it go back in the audio time
-     *  and thus generating a really SAD choke/gulp in the audio
-     * So this function should ONLY trigger if the absolute difference
-     *  of the new scrubber time is bigger then 1 from the previou time value
-     */
-    if (Math.abs(time - audioTime) >= 1 && kalturaDigitalPlayer) {
-      kalturaDigitalPlayer.sendNotification('doSeek', time);
-      setAudioTime(time);
-      // Hide the Volume Control Bar if Opened
-      setDisplayVolumeControl(false);
-    }
-  };
-
-  return (
-    <>
-      <Button
-        renderIcon={Rewind_1032}
-        iconDescription={rewindHelperText}
-        hasIconOnly
-        kind="ghost"
-        tooltipPosition="top"
-        onClick={() => {
-          handleRewindForwardAudio(-10);
-        }}
-        disabled={!kalturaDigitalPlayer}
-      />
-
-      <div className={`${prefix}--audio-player__audio-time`}>
-        <Slider
-          min={0}
-          max={audioDuration}
-          minLabel={KalturaPlayerAPI.getMediaDuration(audioTime)}
-          maxLabel={audioDurationAsString}
-          value={audioTime}
-          onChange={({ value }) => handleScrubberChange(value)}
-          hideTextInput
-          formatLabel={(value, minOrMaxLabel) =>
-            handleFormat(value, minOrMaxLabel)
-          }
-          step={1}
-          stepMultiplier={10}
-          disabled={!kalturaDigitalPlayer}
-        />
-      </div>
-
-      <Button
-        renderIcon={Forward1032}
-        iconDescription={forwardHelperText}
-        hasIconOnly
-        kind="ghost"
-        tooltipPosition="top"
-        onClick={() => {
-          handleRewindForwardAudio(10);
-        }}
-        disabled={!kalturaDigitalPlayer}
-      />
-    </>
-  );
-};
-
-AudioPlayerScrubber.propTypes = {
-  /**
-   * The kaltura digital player (KDP) object
-   * It starts as false and gets morphed into the html element
-   *  of the target player id reference during the kaltura player
-   *  embeding process as soon as the kaltura ready callback triggers
-   */
-  kalturaDigitalPlayer: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
-    .isRequired,
-  /**
-   * The state getter for the current audio time (in seconds)
-   */
-  audioTime: PropTypes.number.isRequired,
-  /**
-   * The setter function for the current audio time (in seconds)
-   */
-  setAudioTime: PropTypes.func.isRequired,
-  /**
-   * The duration of the audio (in seconds)
-   */
-  audioDuration: PropTypes.number.isRequired,
-  /**
-   * The state setter that show/hide the custom volume menu
-   */
-  setDisplayVolumeControl: PropTypes.func.isRequired,
-  /**
-   * The helper text label for the rewind button
-   */
-  rewindHelperText: PropTypes.string,
-  /**
-   * The helper text label for the rewind button
-   */
-  forwardHelperText: PropTypes.string,
-};
-
-AudioPlayerScrubber.defaultProps = {
-  kalturaDigitalPlayer: false,
-  audioTime: 0,
-  audioDuration: 0,
-  rewindHelperText: 'Rewind 10 seconds',
-  forwardHelperText: 'Forward 10 seconds',
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerScrubber;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerThumbnail.js b/packages/react/src/components/AudioPlayer/AudioPlayerThumbnail.js
deleted file mode 100644
index d06d3eb3744..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerThumbnail.js
+++ /dev/null
@@ -1,46 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useRef } from 'react';
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-const AudioPlayerThumbnail = ({ audioId }) => {
-  const inputRef = useRef(null);
-
-  const thumbnailUrl = KalturaPlayerAPI.getThumbnailUrl({
-    mediaId: audioId,
-    width: '48',
-    height: '48',
-  });
-
-  return (
-    <>
-      <div
-        className={`${prefix}--audio-player__thumbnail-container`}
-        ref={inputRef}>
-        <div
-          className={`${prefix}--audio-player__thumbnail`}
-          style={{ backgroundImage: `url('${thumbnailUrl}')` }}></div>
-      </div>
-    </>
-  );
-};
-
-AudioPlayerThumbnail.propTypes = {
-  /**
-   * The Media ID from Kaltura media platform.
-   */
-  audioId: PropTypes.string.isRequired,
-};
-
-AudioPlayerThumbnail.defaultProps = {};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerThumbnail;
diff --git a/packages/react/src/components/AudioPlayer/AudioPlayerVolumeControl.js b/packages/react/src/components/AudioPlayer/AudioPlayerVolumeControl.js
deleted file mode 100644
index 4b11905b5d7..00000000000
--- a/packages/react/src/components/AudioPlayer/AudioPlayerVolumeControl.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 Button from '../../internal/vendor/carbon-components-react/components/Button/Button';
-
-import cx from 'classnames';
-
-import { DDS_AUDIO_PLAYER } from '../../internal/FeatureFlags';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import root from 'window-or-global';
-
-import settings from 'carbon-components/es/globals/js/settings';
-
-import Slider from '../../internal/vendor/carbon-components-react/components/Slider/Slider';
-
-import VolumeDown32 from '@carbon/icons-react/es/volume--down/32';
-import VolumeMute32 from '@carbon/icons-react/es/volume--mute/32';
-import VolumeUp32 from '@carbon/icons-react/es/volume--up/32';
-
-const { prefix } = settings;
-
-const AudioPlayerVolumeControl = ({
-  kalturaDigitalPlayer,
-  audioVolume,
-  setAudioVolume,
-  displayVolumeControl,
-  setDisplayVolumeControl,
-}) => {
-  const handleAudioVolumeChange = (volume) => {
-    volume = root.Number.parseFloat(volume.toString().substring(0, 3));
-    if (kalturaDigitalPlayer) {
-      kalturaDigitalPlayer.sendNotification('changeVolume', volume);
-      setAudioVolume(volume);
-    }
-  };
-
-  const renderVolumeButtonIcon = () => {
-    if (audioVolume === 0) {
-      return VolumeMute32;
-    } else if (audioVolume > 0 && audioVolume < 0.8) {
-      return VolumeDown32;
-    }
-    return VolumeUp32;
-  };
-
-  const buttonClasses = cx({
-    [`${prefix}--force-tooltip-hidden ${prefix}--menu--open`]:
-      displayVolumeControl,
-  });
-
-  return (
-    <div className={`${prefix}--audio-player__volume-control`}>
-      <Button
-        className={buttonClasses}
-        renderIcon={renderVolumeButtonIcon()}
-        iconDescription="Volume"
-        hasIconOnly
-        kind="ghost"
-        onClick={() => setDisplayVolumeControl((prev) => !prev)}
-        tooltipPosition="top"
-        disabled={!kalturaDigitalPlayer}
-      />
-
-      {displayVolumeControl && (
-        <div
-          className={`${prefix}--audio-player__volume-control-menu ${prefix}--audio-player__shadow`}>
-          <Slider
-            max={1}
-            min={0}
-            step={0.1}
-            value={audioVolume}
-            onChange={({ value }) => handleAudioVolumeChange(value)}
-            hideTextInput
-            formatLabel={() => ''}
-          />
-        </div>
-      )}
-    </div>
-  );
-};
-
-AudioPlayerVolumeControl.propTypes = {
-  /**
-   * The kaltura digital player (KDP) object
-   * It starts as false and gets morphed into the html element
-   *  of the target player id reference during the kaltura player
-   *  embeding process as soon as the kaltura ready callback triggers
-   */
-  kalturaDigitalPlayer: PropTypes.oneOfType([PropTypes.object, PropTypes.bool])
-    .isRequired,
-  /**
-   * The state getter for the current volume of the player
-   * 0 to 1, stepping by 0.1
-   */
-  audioVolume: PropTypes.number.isRequired,
-  /**
-   * The state setter for the current volume of the player
-   * 0 to 1, stepping by 0.1
-   */
-  setAudioVolume: PropTypes.func.isRequired,
-  /**
-   * The state getter that show/hide the custom volume menu
-   */
-  displayVolumeControl: PropTypes.bool.isRequired,
-  /**
-   * The state setter that show/hide the custom volume menu
-   */
-  setDisplayVolumeControl: PropTypes.func.isRequired,
-};
-
-AudioPlayerVolumeControl.defaultProps = {
-  kalturaDigitalPlayer: false,
-  audioVolume: 1,
-  displayVolumeControl: false,
-};
-
-export default !DDS_AUDIO_PLAYER ? undefined : AudioPlayerVolumeControl;
diff --git a/packages/react/src/components/AudioPlayer/README.stories.mdx b/packages/react/src/components/AudioPlayer/README.stories.mdx
deleted file mode 100644
index 4fe303f82ab..00000000000
--- a/packages/react/src/components/AudioPlayer/README.stories.mdx
+++ /dev/null
@@ -1,133 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import AudioPlayer from './AudioPlayer';
-
-# Audio Player
-
-> Audio players play embedded audios using the Kaltura Media platform. It can be
-> used in inline patterns. It is always the full width of its
-> containing element and maintains a fixed height of 48 pixels.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/audioplayer)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/audioplayer)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/audio-player/audio-player';
-```
-
-> 💡 Only import fonts once per usage
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { AudioPlayer } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <AudioPlayer
-      audioId="your-audio-id"
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import AudioPlayer from '@carbon/ibmdotcom-react/es/components/AudioPlayer/AudioPlayer';
-```
-
-## Feature Flag
-
-This pattern is currently behind a feature flag, in order to use it you'll need
-to add the following into your `.env` file.
-
-```
-  DDS_AUDIO_PLAYER=true
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the AudioPlayer styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Environment Variables
-
-The partner ID and uiconf ID necessary to render media from the desired Kaltura Instance can be
-set from the `.env` file.
-
-example:
-
-```
-KALTURA_PARTNER_ID=243342
-KALTURA_UICONF_ID=12905712
-```
-
-## Manual usage of Kaltura API
-
-With `@carbon/ibmdotcom-services`, you can keep track of the readiness of
-[Kaltura Player API](http://player.kaltura.com/docs/api) and use it when it is ready.
-Here is an example of stopping the audio player when it is hidden in DOM:
-
-```javascript
-import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';
-
-// Keeps track of element resize and detect if the element of our interest is hidden
-const resizeObserver = new ResizeObserver(entries => {
-  entries.forEach(entry => {
-    const { width, height } = entry.contentRect;
-    if (width === 0 && height === 0) {
-      // Uses Kaltura API to stop the audio
-      entry.target.sendNotification('doPause');
-    }
-  });
-});
-
-KalturaPlayerAPI.checkScript().then(() => {
-  window.kWidget.addReadyCallback(playerId => {
-    // Observes the resize of the audio player
-    resizeObserver.observe(document.getElementById(playerId));
-  });
-});
-```
-
-> 💡 We don't test `<AudioPlayer>` against arbitray usage of Kaltura API. Use
-> this technique at your own risk.
-
-## Props
-
-<Props of={AudioPlayer} />
-
-## Stable selectors
-
-| Name                                   | Description |
-| -------------------------------------- | ----------- |
-| `dds--audio-player--{media-player-id}` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/AudioPlayer/__stories__/AudioPlayer.stories.js b/packages/react/src/components/AudioPlayer/__stories__/AudioPlayer.stories.js
deleted file mode 100644
index 6674c932ba2..00000000000
--- a/packages/react/src/components/AudioPlayer/__stories__/AudioPlayer.stories.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { array, boolean, text } from '@storybook/addon-knobs';
-import AudioPlayer from '../AudioPlayer';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => ({
-  audioId: text("Kaltura's Audio ID (audioId):", '1_gp572bda'),
-  autoPlay: boolean('Start widget with audio (autoPlay)', false),
-  showCaptionMenu: boolean('Show caption menu (showCaptionMenu):', true),
-  showPlaybackRateMenu: boolean(
-    'Show Playback Speed Rate Menu (showPlaybackRateMenu):',
-    true
-  ),
-  playbackRates: array(
-    'The available velocities/rates of the playback (playbackRates):',
-    [1, 1.5, 2],
-    ','
-  ),
-  customClassName: text(
-    'Custom CSS classes added to the main container (customClassName):',
-    ''
-  ),
-});
-
-export default {
-  title: 'Components/Audio player',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-16 bx--col-xlg-16 bx--col-max-16">
-          <div
-            style={{
-              height: '100vh',
-              display: 'flex',
-              alignItems: 'center',
-              justifyContent: 'center',
-            }}>
-            <AudioPlayer {...props()} hasSettings={true} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/AudioPlayer/index.js b/packages/react/src/components/AudioPlayer/index.js
deleted file mode 100644
index 6176a2b7317..00000000000
--- a/packages/react/src/components/AudioPlayer/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-export { default as AudioPlayer } from './AudioPlayer';
diff --git a/packages/react/src/components/BackToTop/README.stories.mdx b/packages/react/src/components/BackToTop/README.stories.mdx
deleted file mode 100644
index 52772d8bf33..00000000000
--- a/packages/react/src/components/BackToTop/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Back to top
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-back-to-top--default).
diff --git a/packages/react/src/components/BackToTop/__stories__/BackToTop.stories.js b/packages/react/src/components/BackToTop/__stories__/BackToTop.stories.js
deleted file mode 100644
index 08dd9174917..00000000000
--- a/packages/react/src/components/BackToTop/__stories__/BackToTop.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Back to top',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-back-to-top--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/BackgroundMedia/README.stories.mdx b/packages/react/src/components/BackgroundMedia/README.stories.mdx
deleted file mode 100644
index c1b338898e3..00000000000
--- a/packages/react/src/components/BackgroundMedia/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Background media
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components-react/?path=/story/components-background-media).
\ No newline at end of file
diff --git a/packages/react/src/components/BackgroundMedia/__stories__/BackgroundMedia.stories.js b/packages/react/src/components/BackgroundMedia/__stories__/BackgroundMedia.stories.js
deleted file mode 100644
index a004d33223b..00000000000
--- a/packages/react/src/components/BackgroundMedia/__stories__/BackgroundMedia.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Background media',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components-react/?path=/story/components-background-media">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/ButtonGroup/ButtonGroup.js b/packages/react/src/components/ButtonGroup/ButtonGroup.js
deleted file mode 100644
index 5338909a6ea..00000000000
--- a/packages/react/src/components/ButtonGroup/ButtonGroup.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useEffect, useRef } from 'react';
-import Button from '../../internal/vendor/carbon-components-react/components/Button/Button';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Button group.
- */
-const ButtonGroup = ({ buttons }) => {
-  const groupRef = useRef(null);
-
-  useEffect(() => {
-    if (groupRef.current) {
-      groupRef.current.style.setProperty(
-        `--${stablePrefix}--button-group--item-count`,
-        String(buttons.length)
-      );
-    }
-  }, [buttons]);
-
-  return (
-    <ol
-      className={`${prefix}--buttongroup`}
-      data-autoid={`${stablePrefix}--button-group`}
-      ref={groupRef}>
-      {buttons.map((button, key) => {
-        return (
-          <li key={key} className={`${prefix}--buttongroup-item`}>
-            <Button
-              data-autoid={`${stablePrefix}--button-group-${key}`}
-              isExpressive
-              {...button}
-              type="button"
-              kind={key === 0 ? 'primary' : 'tertiary'}>
-              {button.copy}
-            </Button>
-          </li>
-        );
-      })}
-    </ol>
-  );
-};
-
-ButtonGroup.propTypes = {
-  /**
-   * Array of button objects to render.
-   * Use the following for each items:
-   *
-   * | Name         | Data Type | Description                                                                                                                    |
-   * | ------------ | --------- | ------------------------------------------------------------------------------------------------------------------------------ |
-   * | `href`       | String    | URL for the button item                                                                                                        |
-   * | `onClick`    | Function  | Function triggered on click of button                                                                                          |
-   * | `copy`       | String    | Button copy                                                                                                                    |
-   * | `renderIcon` | Object    | Provide an optional icon for the CTA from [Carbon's icon library](https://www.carbondesignsystem.com/guidelines/icons/library) |
-   *
-   * Visit the [Button documentation](http://react.carbondesignsystem.com/?path=/story/buttons--default)
-   * from Carbon for a full list of available props.
-   */
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      copy: PropTypes.string,
-      href: PropTypes.string,
-      onClick: PropTypes.func,
-      renderIcon: PropTypes.elementType,
-    })
-  ).isRequired,
-};
-
-export default ButtonGroup;
diff --git a/packages/react/src/components/ButtonGroup/README.stories.mdx b/packages/react/src/components/ButtonGroup/README.stories.mdx
deleted file mode 100644
index ddb01195f8b..00000000000
--- a/packages/react/src/components/ButtonGroup/README.stories.mdx
+++ /dev/null
@@ -1,144 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ButtonGroup from './ButtonGroup';
-
-# Button Group
-
-> Use button groups when you want to display multiple buttons, such as in a
-> call-to-action.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ButtonGroup)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ButtonGroup)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the ButtonGroup
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-### Base example
-
-This is the base example 'ButtonGroup'. Note, the buttons will not resize based
-on text size.
-
-> 💡 If the button is the last button or the only button in the button group, it
-> will be a primary button.
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ArrowRight20, ArrowDown20 } from '@carbon/icons-react';
-import { ButtonGroup } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <ButtonGroup
-      buttons={[
-        {
-          href: 'https://example.com',
-          copy: 'Secondary action button',
-          renderIcon: ArrowDown20,
-        },
-        {
-          href: 'https://example.com',
-          copy: 'Primary action button',
-          renderIcon: ArrowRight20,
-        },
-      ]}
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Only import fonts once per usage. 💡
-
-### Example with buttons based on text size
-
-This example utilizes the grid system in order to adjust the button size based
-on text size. Adjust the columns as needed.
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ArrowRight20, ArrowDown20 } from '@carbon/icons-react';
-import { ButtonGroup } from '@carbon/ibmdotcom-react';
-import '@carbon/grid/scss/grid.scss';
-import 'yourapplication.scss';
-function App() {
-  return (
-    <div className="bx-grid">
-      <div className="row">
-        <div className="bx--col-lg-12 bx--col-md-8 bx--col-sm-16">
-          <ButtonGroup
-            buttons={[
-              {
-                onClick: () => alert('button clicked'),
-                copy: 'Secondary action button',
-                renderIcon: ArrowDown20,
-              },
-              {
-                href: 'https://example.com',
-                copy: 'Primary action button',
-                renderIcon: ArrowRight20,
-              },
-            ]}
-          />
-        </div>
-      </div>
-    </div>
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-> Don't forget to import the button group styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ButtonGroup from '@carbon/ibmdotcom-react/es/components/ButtonGroup/ButtonGroup';
-```
-
-## Props
-
-<Props of={ButtonGroup} />
-
-## Stable selectors
-
-| Name                         | Description                                 |
-| ---------------------------- | ------------------------------------------- |
-| `dds--button-group`          | `ButtonGroup` wrapper layer                 |
-| `dds--button-group-${index}` | `Button` component within the `ButtonGroup` |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ButtonGroup/__stories__/ButtonGroup.stories.js b/packages/react/src/components/ButtonGroup/__stories__/ButtonGroup.stories.js
deleted file mode 100644
index aa28efee70f..00000000000
--- a/packages/react/src/components/ButtonGroup/__stories__/ButtonGroup.stories.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { number, select, text } from '@storybook/addon-knobs';
-import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import ButtonGroup from '../ButtonGroup';
-import Pdf20 from '@carbon/icons-react/es/PDF/20';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const iconMap = {
-  ArrowRight20,
-  ArrowDown20,
-  Pdf20,
-};
-
-const iconOptions = {
-  Default: null,
-  'Arrow Right': 'ArrowRight20',
-  'Arrow Down': 'ArrowDown20',
-  PDF: 'Pdf20',
-};
-
-const props = () => ({
-  buttons: Array.from({
-    length: number('Number of buttons', 2, {}),
-  }).map((_, i) => ({
-    href: text(`Link ${i + 1}`, `https://example.com`),
-    copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
-    renderIcon:
-      iconMap[select(`Icon ${i + 1}`, iconOptions, iconOptions['Default'])],
-  })),
-});
-
-export default {
-  title: 'Components/Button group',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Button group: Default',
-    },
-    propsSet: {
-      default: {
-        ButtonGroup: {
-          buttons: [
-            {
-              href: 'https://example.com',
-              copy: 'Button 1',
-            },
-            {
-              href: 'https://example.com',
-              copy: 'Button 2',
-            },
-          ],
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div
-      className="bx-grid"
-      style={{
-        padding: 2 + `rem`,
-      }}>
-      <div>
-        This button group is wrapped within the grid to let the buttons shrink
-        when the text gets smaller
-      </div>
-      <div className="bx--row">
-        <div className="bx--col-lg-16 bx--col-md-6 bx--col-sm-16">
-          <ButtonGroup {...props()} />
-        </div>
-      </div>
-      <div style={{ paddingTop: '20px' }}>
-        This button group is not using the grid, so the buttons won't shrink
-        according to the text size
-      </div>
-      <ButtonGroup {...props()} />
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ButtonGroup/index.js b/packages/react/src/components/ButtonGroup/index.js
deleted file mode 100644
index 9b4a8f6e4e6..00000000000
--- a/packages/react/src/components/ButtonGroup/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ButtonGroup } from './ButtonGroup';
diff --git a/packages/react/src/components/CTA/ButtonCTA.js b/packages/react/src/components/CTA/ButtonCTA.js
deleted file mode 100644
index c0db529f5d1..00000000000
--- a/packages/react/src/components/CTA/ButtonCTA.js
+++ /dev/null
@@ -1,205 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useState } from 'react';
-import { ButtonGroup } from '../ButtonGroup';
-import CTALogic from './CTALogic';
-import PropTypes from 'prop-types';
-
-/**
- * Button subcomponent for CTA.
- */
-const ButtonCTA = ({
-  type,
-  openLightBox,
-  renderLightBox,
-  videoTitle,
-  formatCTAcopy,
-  ...otherProps
-}) => {
-  const [mediaData, setMediaData] = useState({});
-
-  return type.includes('video') ? (
-    <div>
-      {CTALogic.launchLightBox(renderLightBox, openLightBox, mediaData)}
-      {!renderLightBox && (
-        <ButtonGroup
-          buttons={_renderButtons({
-            videoTitle,
-            openLightBox,
-            setMediaData,
-            formatCTAcopy,
-            ...otherProps,
-          })}
-        />
-      )}
-    </div>
-  ) : (
-    <ButtonGroup buttons={_renderButtons({ ...otherProps })} />
-  );
-};
-
-/**
- * sets button
- *
- * @param {object} param param object
- * @param {Function} param.openLightBox func to set renderLightBox state
- * @param {Array} param.videoTitle array of video titles
- * @param {Function} param.setMediaData func to set media data state
- * @param {Function} param.formatCTAcopy func to format the cta copy
- * @param {object} param.buttons object with buttons array
- * @private
- * @returns {*} object
- */
-const _renderButtons = ({
-  openLightBox,
-  videoTitle,
-  setMediaData,
-  formatCTAcopy,
-  buttons,
-}) => {
-  return buttons.map((button, key) => {
-    if (button.type === 'video') {
-      button.onClick = (e) => {
-        e.preventDefault();
-        setMediaData(button.media);
-        return CTALogic.setLightBox(e, openLightBox);
-      };
-      let title = videoTitle.filter((name) => {
-        return name.key === key;
-      });
-      button.copy = !title[0]
-        ? button.copy
-        : formatCTAcopy({
-            title: button?.media.title || title[0].title,
-            duration: title[0].duration,
-          });
-      button.href = '#';
-    } else {
-      button.onClick = button.onClick || ((e) => CTALogic.jump(e, button.type));
-      button.target = CTALogic.external(button.type);
-    }
-    button.renderIcon = CTALogic.iconSelector(button.type);
-    button.iconDescription = _renderIconDesc(button.type);
-    return button;
-  });
-};
-
-/**
- * render the icon description for screen reader
- *
- * @param {string} type type of cta
- * @private
- * @returns {string} icon description
- */
-const _renderIconDesc = (type) => {
-  switch (type) {
-    case 'external':
-      return 'external launch icon';
-    case 'jump':
-      return 'down arrow icon';
-    case 'video':
-      return 'play button icon';
-    default:
-      return 'right arrow icon';
-  }
-};
-
-ButtonCTA.propTypes = {
-  /**
-   * CTA type. Choose from:
-   *
-   * | Type       | SVG element Name | Description                                                      |
-   * | ---------- | ---------------- | ---------------------------------------------------------------- |
-   * | `local`    | ArrowRight20     | Describes right arrow onClick which loads in self page.          |
-   * | `jump`     | ArrowDown20      | Describes down arrow onClick which scrollToView of target.       |
-   * | `external` | Launch20         | Describes launch arrow onClick which loads in new tab.           |
-   * | `download` | Download20       | Describes download arrow onClick for downloading files.          |
-   * | `video`    | PlayOutline20    | Describes play icon onClick which loads the video in a lightbox. |
-   * | `default`  | None             | Describes the default CTA - without icon                         |
-   *
-   * For more details of icons, refer to:
-   *
-   * - [Icons library](https://www.carbondesignsystem.com/guidelines/icons/library/)!👀
-   * - [@carbon/icons-react](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react)!👀
-   * - [carbon-icons](https://www.npmjs.com/package/carbon-icons)!👀
-   */
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf([
-      'jump',
-      'local',
-      'external',
-      'download',
-      'video',
-      'default',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'jump',
-        'local',
-        'external',
-        'download',
-        'video',
-        'default',
-      ])
-    ),
-  ]),
-
-  /**
-   * Array of button objects to render.
-   */
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      type: PropTypes.oneOf(['local', 'external', 'jump', 'video']),
-      copy: PropTypes.string,
-      href: PropTypes.string,
-      mediaData: PropTypes.shape({
-        customClassName: PropTypes.string,
-        videoId: PropTypes.string.isRequired,
-        showCaption: PropTypes.bool,
-        inverse: PropTypes.bool,
-      }),
-    })
-  ).isRequired,
-
-  /**
-   * Func to set renderLightBox state.
-   */
-  openLightBox: PropTypes.func,
-
-  /**
-   * Bool to determine whether to open lightbox.
-   */
-  renderLightBox: PropTypes.bool,
-
-  /**
-   * Array of video titles.
-   */
-  videoTitle: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      duration: PropTypes.string,
-      key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    })
-  ),
-
-  /**
-   * The function to set media data.
-   */
-  setMediaData: PropTypes.func,
-
-  /**
-   * Func to format the cta copy
-   */
-  formatCTAcopy: PropTypes.func,
-};
-
-ButtonCTA.defaultProps = {
-  type: 'default',
-  formatCTAcopy: ({ title, duration }) => `${title} ${duration}`,
-};
-
-export default ButtonCTA;
diff --git a/packages/react/src/components/CTA/CTA.js b/packages/react/src/components/CTA/CTA.js
deleted file mode 100644
index e90189fdff5..00000000000
--- a/packages/react/src/components/CTA/CTA.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useState } from 'react';
-import ButtonCTA from './ButtonCTA';
-import CardCTA from './CardCTA';
-import CTALogic from './CTALogic';
-import FeatureCTA from './FeatureCTA';
-import PropTypes from 'prop-types';
-import TextCTA from './TextCTA';
-import { useVideoData } from '../../internal/hooks/useVideoData';
-
-/**
- * CTA component.
- */
-const CTA = ({ style, type, size, customClassName, ...otherProps }) => {
-  const [renderLightBox, openLightBox] = useState(false);
-
-  const customVideoData =
-    style === 'feature' ? otherProps?.card?.cta?.media : otherProps.media;
-
-  const videoId =
-    type && (type === 'video' || type.includes('video'))
-      ? CTALogic.getVideoId(style, otherProps)
-      : [];
-  const videoTitle = useVideoData(type, videoId, customVideoData?.title);
-
-  const CTAComponent =
-    style === 'card'
-      ? CardCTA
-      : style === 'button'
-      ? ButtonCTA
-      : style === 'feature'
-      ? FeatureCTA
-      : TextCTA;
-
-  const ctaProps = {
-    style,
-    size,
-    type,
-    renderLightBox,
-    openLightBox,
-    videoTitle,
-    ...otherProps,
-  };
-
-  return (
-    <div className={customClassName}>
-      <CTAComponent {...ctaProps} />
-    </div>
-  );
-};
-
-CTA.propTypes = {
-  /**
-   * Size of Feature Card. Choose from:
-   *
-   * | Name    | Description                                                  |
-   * | ------- | -------------------------------------------------------------|
-   * | `medium`| Default Feature Card variant                                 |
-   * | `large` | Large Feature Card variant that contains eyebrow and heading |
-   */
-  size: PropTypes.oneOf(['medium', 'large']),
-
-  /**
-   * CTA style. Choose from:
-   *
-   * | Style     | Component Name | Description                                                                                                                                 |
-   * | --------- | -------------- | ------------------------------------------------------------------------------------------------------------------------------------------- |
-   * | `text`    | LinkWithIcon   | For more details [see here](https://www.ibm.com/standards/carbon/react/?path=/story/components-link-with-icon--default)!👀 |
-   * | `button`  | ButtonGroup    | For more details [see here](https://www.ibm.com/standards/carbon/react/?path=/story/components-buttongroup--default)!👀    |
-   * | `card`    | Card           | For more details [see here](https://www.ibm.com/standards/carbon/react/?path=/story/components-card--link)!👀              |
-   * | `feature` | FeatureCard    | For more details [see here](https://www.ibm.com/standards/carbon/react/?path=/story/components-card--link)!👀              |
-   */
-  style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-
-  /**
-   * CTA type. Choose from:
-   *
-   * | Type       | SVG element Name | Description                                                      |
-   * | ---------- | ---------------- | ---------------------------------------------------------------- |
-   * | `local`    | ArrowRight20     | Describes right arrow onClick which loads in self page.          |
-   * | `jump`     | ArrowDown20      | Describes down arrow onClick which scrollToView of target.       |
-   * | `external` | Launch20         | Describes launch arrow onClick which loads in new tab.           |
-   * | `download` | Download20       | Describes download arrow onClick for downloading files.          |
-   * | `video`    | PlayOutline20    | Describes play icon onClick which loads the video in a lightbox. |
-   * | `default`  | None             | Describes the default CTA - without icon                         |
-   *
-   * For more details of icons, refer to:
-   *
-   * - [Icons library](https://www.carbondesignsystem.com/guidelines/icons/library/)!👀
-   * - [@carbon/icons-react](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react)!👀
-   * - [carbon-icons](https://www.npmjs.com/package/carbon-icons)!👀
-   */
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf([
-      'jump',
-      'local',
-      'external',
-      'download',
-      'video',
-      'default',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'jump',
-        'local',
-        'external',
-        'download',
-        'video',
-        'default',
-      ])
-    ),
-  ]),
-
-  /**
-   * Optional text for CTA.
-   * Used for ones except `style="feature"`.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Valid URL for a the location of an internal or external resource.
-   * Used for `style="text"`.
-   */
-  href: PropTypes.string,
-
-  /**
-   * Custom classname from parent.
-   */
-  customClassName: PropTypes.string,
-};
-
-CTA.defaultProps = {
-  style: 'text',
-  type: 'default',
-  copy: '',
-  href: '',
-  customVideoTitle: null,
-};
-
-export default CTA;
diff --git a/packages/react/src/components/CTA/CTALogic.js b/packages/react/src/components/CTA/CTALogic.js
deleted file mode 100644
index 70ac49f4ef1..00000000000
--- a/packages/react/src/components/CTA/CTALogic.js
+++ /dev/null
@@ -1,145 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowDown20 from '@carbon/icons-react/es/arrow--down/20';
-import ArrowLeft20 from '@carbon/icons-react/es/arrow--left/20';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import Download20 from '@carbon/icons-react/es/download/20';
-import Launch20 from '@carbon/icons-react/es/launch/20';
-import { LightboxMediaViewer } from '../LightboxMediaViewer';
-import PlayOutline20 from '@carbon/icons-react/es/play--outline/20';
-import React from 'react';
-import smoothScroll from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/smoothScroll/smoothScroll';
-
-/**
- * The logic behind the CTA component
- */
-class CTALogic {
-  /**
-   * extract video id from props
-   *
-   * @param {string} style cta type ( external | jump | local)
-   * @param {object} otherProps cta type ( external | jump | local)
-   * @returns {*} behaviour object
-   */
-  static getVideoId(style, otherProps) {
-    switch (style) {
-      case 'text':
-        return [{ src: otherProps.media.src }];
-      case 'card':
-        return [{ src: otherProps.media.src }];
-      case 'feature':
-        return [{ src: otherProps.card.cta.media.src }];
-      case 'button': {
-        const videoIds = otherProps.buttons
-          .map((button, key) => {
-            if (button.type === 'video' && button.media)
-              return { src: button.media.src, key };
-          })
-          .filter((id) => id && id);
-        return videoIds;
-      }
-      default:
-        return [];
-    }
-  }
-
-  /**
-   * Gets the default aria label if translated label isn't provided.
-   *
-   * @param {string} type cta type { download | external | video }
-   * @returns {string} default type aria label
-   */
-  static getDefaultLabel(type) {
-    switch (type) {
-      case 'download':
-        return ' - This link downloads a file';
-      case 'external':
-        return ' - This link opens in a new tab';
-      case 'video':
-        return ' - This link plays a video';
-      default:
-        return '';
-    }
-  }
-
-  /**
-   * jump to target element  onClick
-   *
-   * @param {*} e event object
-   * @param {string} type cta type ( external | jump | local)
-   * @returns {*} behaviour object
-   */
-  static jump(e, type) {
-    return type === 'jump' ? smoothScroll(e) : null;
-  }
-
-  /**
-   * sets target
-   *
-   * @param {string} type cta type ( external | jump | local)
-   * @returns {string} target value
-   */
-  static external(type) {
-    return type === 'external' ? '_blank' : null;
-  }
-
-  /**
-   * sets icon based on link type
-   *
-   * @param {string} type cta type ( external | jump | local)
-   * @returns {*} cta type component
-   */
-  static iconSelector(type, iconPlacement) {
-    switch (type) {
-      case 'download':
-        return Download20;
-      case 'external':
-        return Launch20;
-      case 'jump':
-        return ArrowDown20;
-      case 'video':
-        return PlayOutline20;
-      case 'default':
-        return null;
-      default:
-        return iconPlacement === 'left' ? ArrowLeft20 : ArrowRight20;
-    }
-  }
-
-  /**
-   * Opens the LightBoxMediaViewer component when CTA is clicked
-   *
-   * @param {boolean} renderLightBox determine whether to render the lightbox
-   * @param {Function} openLightBox func to toggle the lightbox
-   * @param {object} media media object to render within the lightbox
-   * @returns {*} lightbox component
-   */
-  static launchLightBox(renderLightBox, openLightBox, media) {
-    return (
-      renderLightBox && (
-        <LightboxMediaViewer
-          media={media}
-          open={true}
-          onClose={() => openLightBox(false)}
-        />
-      )
-    );
-  }
-
-  /**
-   *
-   * @param {*} e event
-   * @param {Function} openLightBox function to toggle lightbox
-   * @returns {*} set lightbox state
-   */
-  static setLightBox(e, openLightBox) {
-    e.preventDefault();
-    return openLightBox(true);
-  }
-}
-
-export default CTALogic;
diff --git a/packages/react/src/components/CTA/CardCTA.js b/packages/react/src/components/CTA/CardCTA.js
deleted file mode 100644
index b40599aeb88..00000000000
--- a/packages/react/src/components/CTA/CardCTA.js
+++ /dev/null
@@ -1,179 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useCallback, useState } from 'react';
-import { CardLink } from '../CardLink';
-import CTALogic from './CTALogic';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import PlayIcon from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Card subcomponent for CTA.
- */
-const CardCTA = ({
-  type,
-  openLightBox,
-  renderLightBox,
-  videoTitle,
-  disableImage,
-  ...otherProps
-}) => {
-  // eslint-disable-next-line no-unused-vars
-  const { style, ...cardProps } = otherProps;
-
-  const [thumbnailSize, setThumbnailSize] = useState(3);
-
-  const refImage = useCallback((node) => {
-    if (node?.parentElement) {
-      setThumbnailSize(node.parentElement.offsetWidth);
-    }
-  }, []);
-
-  if (type === 'video') {
-    let image;
-    if (!disableImage) {
-      // use image src if passed in through props, otherwise use Kaltura's generated thumbnail image
-      image = cardProps.image
-        ? cardProps.image
-        : {
-            defaultSrc: KalturaPlayerAPI.getThumbnailUrl({
-              mediaId: cardProps.media?.src,
-              width: thumbnailSize,
-            }),
-            alt: videoTitle[0].title,
-          };
-      image = { ...image, icon: PlayIcon, refImage };
-    }
-
-    return (
-      <>
-        {CTALogic.launchLightBox(
-          renderLightBox,
-          openLightBox,
-          otherProps.media
-        )}
-        {!renderLightBox && (
-          <CardLink
-            customClassName={`${prefix}--card__CardCTA ${prefix}--card__video`}
-            card={{
-              ...cardProps,
-              cta: {
-                href: '#',
-                icon: {
-                  src: CTALogic.iconSelector(type),
-                },
-                iconPlacement: 'left',
-                copy: videoTitle[0].duration?.replace(/\(|\)/g, ''),
-                handleClick: (e) => CTALogic.setLightBox(e, openLightBox),
-              },
-              image: image,
-              heading: videoTitle[0].title,
-            }}
-          />
-        )}
-      </>
-    );
-  } else {
-    return (
-      <CardLink
-        customClassName={`${prefix}--card__CardCTA`}
-        card={{
-          ...cardProps,
-          cta: {
-            type,
-            href: otherProps.cta.href,
-            icon: {
-              src: CTALogic.iconSelector(type),
-            },
-          },
-          copy: otherProps.copy,
-          target: CTALogic.external(type),
-          href: otherProps.cta.href,
-        }}
-      />
-    );
-  }
-};
-
-CardCTA.propTypes = {
-  /**
-   * CTA type. Choose from:
-   *
-   * | Type       | SVG element Name | Description                                                      |
-   * | ---------- | ---------------- | ---------------------------------------------------------------- |
-   * | `local`    | ArrowRight20     | Describes right arrow onClick which loads in self page.          |
-   * | `jump`     | ArrowDown20      | Describes down arrow onClick which scrollToView of target.       |
-   * | `external` | Launch20         | Describes launch arrow onClick which loads in new tab.           |
-   * | `download` | Download20       | Describes download arrow onClick for downloading files.          |
-   * | `video`    | PlayOutline20    | Describes play icon onClick which loads the video in a lightbox. |
-   * | `default`  | None             | Describes the default CTA - without icon                         |
-   *
-   * For more details of icons, refer to:
-   *
-   * - [Icons library](https://www.carbondesignsystem.com/guidelines/icons/library/)!👀
-   * - [@carbon/icons-react](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react)!👀
-   * - [carbon-icons](https://www.npmjs.com/package/carbon-icons)!👀
-   */
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf([
-      'jump',
-      'local',
-      'external',
-      'download',
-      'video',
-      'default',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'jump',
-        'local',
-        'external',
-        'download',
-        'video',
-        'default',
-      ])
-    ),
-  ]),
-
-  /**
-   * Boolean to determine whether to disable image for card
-   */
-  disableImage: PropTypes.bool,
-  /**
-   * Func to set renderLightBox state.
-   */
-  openLightBox: PropTypes.func,
-
-  /**
-   * Bool to determine whether to open lightbox.
-   */
-  renderLightBox: PropTypes.bool,
-
-  /**
-   * Array of video titles.
-   */
-  videoTitle: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      duration: PropTypes.string,
-      key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    })
-  ),
-};
-
-CardCTA.defaultProps = {
-  type: 'default',
-  copy: '',
-  cta: null,
-  disableImage: false,
-  media: null,
-};
-
-export default CardCTA;
diff --git a/packages/react/src/components/CTA/FeatureCTA.js b/packages/react/src/components/CTA/FeatureCTA.js
deleted file mode 100644
index 81a7f559a76..00000000000
--- a/packages/react/src/components/CTA/FeatureCTA.js
+++ /dev/null
@@ -1,159 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 CTALogic from './CTALogic';
-import { FeatureCard } from '../FeatureCard';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-/**
- * FeatureCard subcomponent for CTA.
- */
-const FeatureCTA = ({
-  size,
-  type,
-  openLightBox,
-  renderLightBox,
-  videoTitle,
-  formatCTAcopy,
-  ...otherProps
-}) => {
-  return type === 'video' ? (
-    <div>
-      {CTALogic.launchLightBox(
-        renderLightBox,
-        openLightBox,
-        otherProps.card.cta.media
-      )}
-      {!renderLightBox && (
-        <FeatureCard
-          card={_renderFeatureCard({
-            card: {
-              ...otherProps.card,
-              heading: formatCTAcopy({
-                title: videoTitle[0].title,
-                duration: videoTitle[0].duration,
-              }),
-            },
-          })}
-          size={size}
-          onClick={(e) => CTALogic.setLightBox(e, openLightBox)}
-        />
-      )}
-    </div>
-  ) : (
-    <FeatureCard
-      card={_renderFeatureCard({
-        card: {
-          ...otherProps.card,
-        },
-      })}
-      size={size}
-    />
-  );
-};
-
-/**
- * sets featureCard
- *
- * @param {object} param param object
- * @param {object} param.card card object
- * @private
- * @returns {*} object
- */
-const _renderFeatureCard = ({ card }) => {
-  if (card.type === 'jump') card.cta.type = 'jump';
-  else if (card.type === 'video') card.cta.href = '#';
-  card.cta = {
-    ...card.cta,
-    icon: { src: CTALogic.iconSelector(card.cta.type) },
-  };
-  card.type = 'link';
-  return card;
-};
-
-FeatureCTA.propTypes = {
-  /**
-   * Size of Feature Card. Choose from:
-   *
-   * | Name    | Description                                                  |
-   * | ------- | -------------------------------------------------------------|
-   * | `medium`| Default Feature Card variant                                 |
-   * | `large` | Large Feature Card variant that contains eyebrow and heading |
-   */
-  size: PropTypes.oneOf(['medium', 'large']),
-
-  /**
-   * CTA type. Choose from:
-   *
-   * | Type       | SVG element Name | Description                                                      |
-   * | ---------- | ---------------- | ---------------------------------------------------------------- |
-   * | `local`    | ArrowRight20     | Describes right arrow onClick which loads in self page.          |
-   * | `jump`     | ArrowDown20      | Describes down arrow onClick which scrollToView of target.       |
-   * | `external` | Launch20         | Describes launch arrow onClick which loads in new tab.           |
-   * | `download` | Download20       | Describes download arrow onClick for downloading files.          |
-   * | `video`    | PlayOutline20    | Describes play icon onClick which loads the video in a lightbox. |
-   * | `default`  | None             | Describes the default CTA - without icon                         |
-   *
-   * For more details of icons, refer to:
-   *
-   * - [Icons library](https://www.carbondesignsystem.com/guidelines/icons/library/)!👀
-   * - [@carbon/icons-react](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react)!👀
-   * - [carbon-icons](https://www.npmjs.com/package/carbon-icons)!👀
-   */
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf([
-      'jump',
-      'local',
-      'external',
-      'download',
-      'video',
-      'default',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'jump',
-        'local',
-        'external',
-        'download',
-        'video',
-        'default',
-      ])
-    ),
-  ]),
-
-  /**
-   * Func to set renderLightBox state.
-   */
-  openLightBox: PropTypes.func,
-  /**
-   * Bool to determine whether to open lightbox.
-   */
-  renderLightBox: PropTypes.bool,
-
-  /**
-   * Array of video titles.
-   */
-  videoTitle: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      duration: PropTypes.string,
-      key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    })
-  ),
-
-  /**
-   * Func to format the cta copy
-   */
-  formatCTAcopy: PropTypes.func,
-};
-
-FeatureCTA.defaultProps = {
-  type: 'default',
-  formatCTAcopy: ({ title, duration }) => `${title} ${duration}`,
-};
-
-export default FeatureCTA;
diff --git a/packages/react/src/components/CTA/README.stories.mdx b/packages/react/src/components/CTA/README.stories.mdx
deleted file mode 100644
index d4ec44cb519..00000000000
--- a/packages/react/src/components/CTA/README.stories.mdx
+++ /dev/null
@@ -1,281 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CTA from './CTA';
-
-# CTA
-
-> The CTA component is used to select from various CTA link types – text, cards,
-> and buttons – as well as defining their behavior, such as anchor links,
-> videos, and external links.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CTA)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CTA)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import "@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup";
-@import "@carbon/ibmdotcom-styles/scss/components/card-link/card-link";
-@import "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card";
-@import "@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon";
-```
-
-> 💡 Only import fonts once per usage.
-
-##### JS
-
-##### Text Link
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTA } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CTA
-      style="text"
-      type="local"
-      copy="IBM Homepage"
-      href="https://www.example.com"
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-##### Video Link
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTA } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CTA
-      style="text"
-      type="video"
-      media={{
-        src: '1_9h94wo6b',
-        type: 'video',
-      }}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-###### Custom video title and description
-
-If needed, you can provide a custom video title and/or description for the video passing the props `title` and `description` under `media`. Example:
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTA } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CTA
-      style="text"
-      type="video"
-      media={{
-        src: '1_9h94wo6b',
-        type: 'video',
-        title: 'Custom video title',
-        description: 'Custom video description',
-      }}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-##### Feature Card
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTA } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CTA
-      style="feature"
-      type="local"
-      heading="Lorem Ipsum"
-      image={{
-        defaultSrc:
-          'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-        alt: 'Image alt text',
-      }}
-      cta={{
-        href: 'https://www.example.com',
-      }}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-The Feature Card for CTA can also use the 'large' variation, but be sure to at least include an eyebrow and heading.
-
-```javascript
-function App() {
-  return (
-    <CTA
-      style="feature"
-      size="large"
-      type="local"
-      eyebrow="This is an eyebrow"
-      heading="Lorem Ipsum"
-      image={{
-        defaultSrc:
-          'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-        alt: 'Image alt text',
-      }}
-      cta={{
-        href: 'https://www.example.com',
-      }}
-    />
-  );
-}
-```
-
-##### Button(s)
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTA } from '@carbon/ibmdotcom-react';
-import { ArrowRight20 } from '@carbon/icons-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CTA
-      style="button"
-      buttons={[
-        {
-          type: 'video',
-          href: 'https://www.example.com',
-          copy: 'Lorem Ipsum',
-          media: {
-            src: '1_9h94wo6b',
-            type: 'video',
-          },
-        },
-        {
-          type: 'external',
-          href: 'https://www.example.com',
-          copy: 'Lorem Ipsum',
-          renderIcon: ArrowRight20,
-        },
-      ]}
-    />
-  );
-}
-```
-
-##### Card
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTA } from '@carbon/ibmdotcom-react';
-import { ArrowRight20 } from '@carbon/icons-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CTA
-      style="card"
-      type="local"
-      copy="Lorem Ipsum"
-      cta={{
-        href: 'https://www.example.com',
-      }}
-    />
-  );
-}
-
-function AppVideo() {
-  return (
-    <CTA
-      style="card"
-      type="video"
-      copy="Lorem Ipsum"
-      media={{
-        src: '1_9h94wo6b',
-        type: 'video',
-      }}
-    />
-  );
-}
-```
-
-For the video variation, there is an optional `disableImage` boolean prop to allow the poster image be turned off.
-
-```javascript
-function AppVideo() {
-  return (
-    <CTA
-      style="card"
-      type="video"
-      copy="Lorem Ipsum"
-      media={{
-        src: '1_9h94wo6b',
-        type: 'video',
-      }}
-      disableImage={true}
-    />
-  );
-}
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import CTA from '@carbon/ibmdotcom-react/es/components/CTA/CTA';
-```
-
-## Resolving Dependencies
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the image styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={CTA} />
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CTA/TextCTA.js b/packages/react/src/components/CTA/TextCTA.js
deleted file mode 100644
index c72e7c622d2..00000000000
--- a/packages/react/src/components/CTA/TextCTA.js
+++ /dev/null
@@ -1,147 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 CTALogic from './CTALogic';
-import { LinkWithIcon } from '../LinkWithIcon';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-/**
- * Link subcomponent for CTA.
- */
-const TextCTA = ({
-  type,
-  openLightBox,
-  renderLightBox,
-  videoTitle,
-  formatCTAcopy,
-  iconPlacement,
-  ...otherProps
-}) => {
-  const Icon = CTALogic.iconSelector(type, iconPlacement);
-  const href =
-    type !== 'video'
-      ? otherProps.href
-        ? otherProps.href
-        : otherProps.cta?.href
-      : null;
-  return type === 'video' ? (
-    <>
-      {CTALogic.launchLightBox(renderLightBox, openLightBox, otherProps.media)}
-      {!renderLightBox && (
-        <LinkWithIcon
-          href="#"
-          onClick={(e) => CTALogic.setLightBox(e, openLightBox)}
-          iconInline={otherProps.iconInline}
-          {...(iconPlacement && { iconPlacement })}>
-          <span>
-            {formatCTAcopy({
-              title: videoTitle[0].title,
-              duration: videoTitle[0].duration,
-            })}
-            <span className="bx--visually-hidden">
-              {CTALogic.getDefaultLabel(type)}
-            </span>
-          </span>
-          <Icon />
-        </LinkWithIcon>
-      )}
-    </>
-  ) : (
-    <LinkWithIcon
-      href={href}
-      target={CTALogic.external(type)}
-      onClick={(e) => CTALogic.jump(e, type)}
-      iconInline={otherProps.iconInline}
-      {...(iconPlacement && { iconPlacement })}>
-      <span>{otherProps.copy}</span>
-      <span className="bx--visually-hidden">
-        {CTALogic.getDefaultLabel(type)}
-      </span>
-      {type !== 'default' && <Icon />}
-    </LinkWithIcon>
-  );
-};
-
-TextCTA.propTypes = {
-  /**
-   * CTA type. Choose from:
-   *
-   * | Type       | SVG element Name | Description                                                      |
-   * | ---------- | ---------------- | ---------------------------------------------------------------- |
-   * | `local`    | ArrowRight20     | Describes right arrow onClick which loads in self page.          |
-   * | `jump`     | ArrowDown20      | Describes down arrow onClick which scrollToView of target.       |
-   * | `external` | Launch20         | Describes launch arrow onClick which loads in new tab.           |
-   * | `download` | Download20       | Describes download arrow onClick for downloading files.          |
-   * | `video`    | PlayOutline20    | Describes play icon onClick which loads the video in a lightbox. |
-   * | `default`  | None             | Describes the default CTA - without icon                         |
-   *
-   * For more details of icons, refer to:
-   *
-   * - [Icons library](https://www.carbondesignsystem.com/guidelines/icons/library/)!👀
-   * - [@carbon/icons-react](https://github.com/carbon-design-system/carbon/tree/main/packages/icons-react)!👀
-   * - [carbon-icons](https://www.npmjs.com/package/carbon-icons)!👀
-   */
-  type: PropTypes.oneOfType([
-    PropTypes.oneOf([
-      'jump',
-      'local',
-      'external',
-      'download',
-      'video',
-      'default',
-    ]),
-    PropTypes.arrayOf(
-      PropTypes.oneOf([
-        'jump',
-        'local',
-        'external',
-        'download',
-        'video',
-        'default',
-      ])
-    ),
-  ]),
-
-  /**
-   * Icon placement.
-   */
-  iconPlacement: PropTypes.oneOf(['left', 'right']),
-
-  /**
-   * Func to set renderLightBox state.
-   */
-  openLightBox: PropTypes.func,
-
-  /**
-   * Bool to determine whether to open lightbox.
-   */
-  renderLightBox: PropTypes.bool,
-
-  /**
-   * Array of video titles.
-   */
-  videoTitle: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      duration: PropTypes.string,
-      key: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    })
-  ),
-
-  /**
-   * Func to format the cta copy
-   */
-  formatCTAcopy: PropTypes.func,
-};
-
-TextCTA.defaultProps = {
-  type: 'default',
-  formatCTAcopy: ({ title, duration }) => `${title} ${duration}`,
-  iconPlacement: 'right',
-};
-
-export default TextCTA;
diff --git a/packages/react/src/components/CTA/__stories__/CTA.stories.js b/packages/react/src/components/CTA/__stories__/CTA.stories.js
deleted file mode 100755
index 8d41effa479..00000000000
--- a/packages/react/src/components/CTA/__stories__/CTA.stories.js
+++ /dev/null
@@ -1,341 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './CTA.stories.scss';
-import { boolean, select, text } from '@storybook/addon-knobs';
-import CTA from '../CTA';
-import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = ['local', 'download', 'jump', 'external', 'video', 'default'];
-const featureTypes = ['local', 'download', 'jump', 'external', 'video'];
-const buttonCopy = ['See more use cases', 'Try for free'];
-const copy = ['Explore AI uses cases in all industries', 'Contact sales'];
-const placement = ['left', 'right'];
-
-const urlBy = {
-  download:
-    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  jump: '#example',
-  local: 'https://www.example.com',
-  external: 'https://www.example.com',
-  default: 'https://www.example.com',
-};
-
-const miscCTAData = {
-  text({ type, customVideoTitle, customVideoDescription }) {
-    return {
-      type: type,
-      href: urlBy[type],
-      copy: copy[0],
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-        title: customVideoTitle,
-        description: customVideoDescription,
-      },
-    };
-  },
-  card({ type, customVideoTitle, customVideoDescription, disableImage }) {
-    return {
-      disableImage: disableImage,
-      heading: type !== 'video' ? copy[0] : '',
-      cta: {
-        href: urlBy[type],
-      },
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-        title: customVideoTitle,
-        description: customVideoDescription,
-      },
-    };
-  },
-  feature({ featureHeading, type, customVideoTitle, customVideoDescription }) {
-    return {
-      heading: copy[0],
-      card: {
-        heading: featureHeading || copy[1],
-        cta: {
-          type: type,
-          href: urlBy[type],
-          media: {
-            src: '1_9h94wo6b',
-            type: 'video',
-            title: customVideoTitle,
-            description: customVideoDescription,
-          },
-        },
-        image: {
-          defaultSrc: imgLg1x1,
-          alt: 'Image alt text',
-        },
-      },
-    };
-  },
-  button({ type, customVideoTitle, customVideoDescription }) {
-    return {
-      buttons: [
-        {
-          type: type[0],
-          href: urlBy[type[0]],
-          copy: buttonCopy[0],
-          media: {
-            src: '1_9h94wo6b',
-            type: 'video',
-            title: customVideoTitle[0],
-            description: customVideoDescription[0],
-          },
-        },
-        {
-          type: type[1],
-          href: urlBy[type[1]],
-          copy: buttonCopy[1],
-          media: {
-            src: '1_sf5ovm7u',
-            type: 'video',
-            title: customVideoTitle[1],
-            description: customVideoDescription[1],
-          },
-        },
-      ],
-    };
-  },
-};
-
-const wrapper = (CTA, style, type) => {
-  return (
-    <div className="bx--grid cta-grid">
-      {style === 'card' ? (
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4">
-            {CTA}
-          </div>
-        </div>
-      ) : style === 'feature' ? (
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-lg-8 cta-feature-container">
-            {CTA}
-          </div>
-        </div>
-      ) : (
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">{CTA}</div>
-        </div>
-      )}
-      {type === 'jump' || type?.[0] === 'jump' || type?.[1] === 'jump' ? (
-        <div
-          className="bx--row"
-          style={{ marginTop: '80px', marginBottom: '80px' }}>
-          <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-            {(() => {
-              let content = [];
-              for (let i = 0; i < 10; i++) {
-                if (i === 4) {
-                  content.push(
-                    <h4 id="example" style={{ marginBottom: '32px' }}>
-                      Example
-                    </h4>
-                  );
-                }
-                content.push(
-                  <p style={{ marginBottom: '32px' }}>
-                    {
-                      'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'
-                    }
-                  </p>
-                );
-              }
-              return content;
-            })()}
-          </div>
-        </div>
-      ) : null}
-    </div>
-  );
-};
-
-const props = {
-  text: () => {
-    const knobs = props.card();
-    const iconPlacement = select(
-      'Icon Placement (iconPlacement)',
-      placement,
-      placement[1]
-    );
-
-    const customVideoTitle =
-      knobs.type === 'video'
-        ? text('Custom video title', 'Custom video title')
-        : null;
-    const customVideoDescription =
-      knobs.type === 'video'
-        ? text('Custom video description', 'Custom video description')
-        : null;
-    return {
-      ...knobs,
-      iconPlacement,
-      ...miscCTAData['text']({
-        type: knobs.type,
-        customVideoTitle,
-        customVideoDescription,
-      }),
-    };
-  },
-  button: () => {
-    const type = [
-      select('Button 1 type (buttons[0].type)', [...types], types[0]),
-      select('Button 2 type (buttons[1].type)', [...types], types[0]),
-    ];
-
-    const customVideoTitles = type
-      .filter((ctaType) => ctaType === 'video')
-      .map((_ctaType, index) =>
-        text(
-          `Button ${index + 1} custom video title`,
-          `Custom video title ${index + 1}`
-        )
-      );
-    const customVideoDescriptions = type
-      .filter((ctaType) => ctaType === 'video')
-      .map((_ctaType, index) =>
-        text(
-          `Button ${index + 1}`,
-          `This is a custom video description for CTA Button ${index + 1}.`
-        )
-      );
-    return {
-      type,
-      ...miscCTAData['button']({
-        type,
-        customVideoTitle: customVideoTitles,
-        customVideoDescription: customVideoDescriptions,
-      }),
-    };
-  },
-  card: () => {
-    const type = select('type', types, types[0]);
-
-    const customVideoTitle =
-      type === 'video'
-        ? text('Custom video title', 'Custom video title')
-        : null;
-    const customVideoDescription =
-      type === 'video'
-        ? text('Custom video description', 'Custom video description')
-        : null;
-    const disableImage =
-      type === 'video' ? boolean('No Video Poster', false) : null;
-    return {
-      type,
-      ...miscCTAData['card']({
-        type,
-        customVideoTitle,
-        customVideoDescription,
-        disableImage,
-      }),
-    };
-  },
-  feature: () => {
-    const type = select('CTA type:', featureTypes, featureTypes[0]);
-    const featureHeading = text(
-      'Heading:',
-      'Explore AI use cases in all industries'
-    );
-
-    const customVideoTitle =
-      type === 'video'
-        ? text('Custom video title', 'Custom video title')
-        : null;
-    const customVideoDescription =
-      type === 'video'
-        ? text('Custom video description', 'Custom video description')
-        : null;
-    return {
-      featureHeading,
-      type,
-      ...miscCTAData['feature']({
-        featureHeading,
-        type,
-        customVideoTitle,
-        customVideoDescription,
-      }),
-    };
-  },
-};
-
-export default {
-  title: 'Components/CTA',
-  parameters: {
-    ...readme.parameters,
-  },
-};
-
-export const Text = () => {
-  return wrapper(<CTA style="text" {...props.text()} />, props.text().type);
-};
-
-Text.story = {
-  name: 'Text',
-  parameters: {
-    percy: {
-      name: 'Components|CTA: Text',
-    },
-  },
-};
-
-export const Button = () => {
-  return wrapper(<CTA style="button" {...props.button()} />, props.button.type);
-};
-
-Button.story = {
-  name: 'Button',
-  parameters: {
-    percy: {
-      name: 'Components|CTA: Button',
-    },
-  },
-};
-
-export const Card = () => {
-  return wrapper(
-    <CTA style="card" {...props.card()} />,
-    'card',
-    props.card().type
-  );
-};
-
-Card.story = {
-  name: 'Card',
-  parameters: {
-    percy: {
-      name: 'Components|CTA: Card',
-    },
-  },
-};
-
-export const Feature = () => {
-  if (props.feature().type !== 'video') {
-    props.feature().card.heading = props.feature().featureHeading;
-  }
-
-  return wrapper(
-    <CTA style="feature" {...props.feature()} />,
-    'feature',
-    props.feature().type
-  );
-};
-
-Feature.story = {
-  name: 'Feature',
-  parameters: {
-    percy: {
-      name: 'Components|CTA: Feature',
-    },
-  },
-};
diff --git a/packages/react/src/components/CTA/__stories__/CTA.stories.scss b/packages/react/src/components/CTA/__stories__/CTA.stories.scss
deleted file mode 100644
index 84950205521..00000000000
--- a/packages/react/src/components/CTA/__stories__/CTA.stories.scss
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-.cta-feature-container {
-  padding-top: 1rem;
-}
-
-.cta-grid {
-  /* stylelint-disable declaration-no-important */
-  /* uses !important to override padding-left: 2rem from bx--grid */
-  padding-left: 1rem !important;
-  margin-left: 0 !important;
-  /* stylelint-enable declaration-no-important */
-}
diff --git a/packages/react/src/components/CTA/__tests__/CTA.test.js b/packages/react/src/components/CTA/__tests__/CTA.test.js
deleted file mode 100644
index 98f09277f6e..00000000000
--- a/packages/react/src/components/CTA/__tests__/CTA.test.js
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 ButtonCTA from '../ButtonCTA';
-import CardCTA from '../CardCTA';
-import CTALogic from '../CTALogic';
-import FeatureCTA from '../FeatureCTA';
-import { mount } from 'enzyme';
-import React from 'react';
-import TextCTA from '../TextCTA';
-
-describe('CTA', () => {
-  beforeAll(() => {
-    const div = document.createElement('div');
-    div.innerHTML = `<div id="test"></test>`;
-    window.domNode = div;
-    document.body.appendChild(div);
-    window.scroll = jest.fn();
-  });
-
-  it('Renders TextCTA | type jump', () => {
-    jest.spyOn(CTALogic, 'jump');
-    const cta = mount(<TextCTA type="jump" href="#test" copy="Lorem Ipsum" />);
-    cta.find('a').simulate('click');
-    expect(CTALogic.jump).toHaveBeenCalled();
-  });
-
-  it('Renders TextCTA | type video', () => {
-    jest.spyOn(CTALogic, 'setLightBox');
-    const cta = mount(
-      <TextCTA
-        type="video"
-        href="#"
-        openLightBox={jest.fn()}
-        videoTitle={[{ title: 'Lorem Ipsum' }]}
-      />
-    );
-    cta.find('a').simulate('click');
-    expect(CTALogic.setLightBox).toHaveBeenCalled();
-  });
-
-  it('Renders FeatureCTA | type video', () => {
-    jest.spyOn(CTALogic, 'setLightBox');
-    jest.spyOn(CTALogic, 'launchLightBox');
-    const cta = mount(
-      <FeatureCTA
-        card={{
-          cta: {
-            icon: {
-              src: '',
-            },
-          },
-          image: {
-            src: '1_9h94wo6b',
-            type: 'video',
-          },
-        }}
-        openLightBox={jest.fn()}
-        type="video"
-        renderLightBox={false}
-        heading="lorem ipsum"
-        videoTitle={[{ title: 'Lorem Ipsum' }]}
-      />
-    );
-    cta.find('a').simulate('click');
-    expect(CTALogic.launchLightBox).toHaveBeenCalled();
-  });
-
-  it('Renders CardCTA | type video', () => {
-    jest.spyOn(CTALogic, 'setLightBox');
-    jest.spyOn(CTALogic, 'launchLightBox');
-    const cta = mount(
-      <CardCTA
-        type="video"
-        openLightBox={jest.fn()}
-        videoTitle={[{ title: 'Lorem Ipsum' }]}
-      />
-    );
-    expect(CTALogic.launchLightBox).toHaveBeenCalled();
-    cta.find('a').simulate('click');
-    expect(CTALogic.setLightBox).toHaveBeenCalled();
-  });
-
-  it('Renders CardCTA | type jump', () => {
-    jest.spyOn(CTALogic, 'jump');
-    const cta = mount(
-      <CardCTA
-        type="jump"
-        cta={{
-          href: '#test',
-        }}
-      />
-    );
-    cta.find('a').simulate('click');
-    expect(CTALogic.jump).toHaveBeenCalled();
-  });
-
-  it('Renders ButtonCTA | type video', () => {
-    jest.spyOn(CTALogic, 'setLightBox');
-    const cta = mount(
-      <ButtonCTA
-        buttons={[
-          {
-            type: 'video',
-            href: 'https://www.example.com',
-            copy: 'Lorem Ipsum',
-            media: {
-              src: '1_9h94wo6b',
-              type: 'video',
-            },
-          },
-        ]}
-        type="video"
-        videoTitle={[{ title: 'Lorem Ipsum' }]}
-        openLightBox={jest.fn()}
-      />
-    );
-    cta.find('a').simulate('click');
-    expect(CTALogic.setLightBox).toHaveBeenCalled();
-  });
-
-  it('Renders ButtonCTA | type jump', () => {
-    jest.spyOn(CTALogic, 'jump');
-    const cta = mount(
-      <ButtonCTA
-        buttons={[
-          {
-            type: 'jump',
-            href: '#test',
-            copy: 'Lorem Ipsum',
-          },
-        ]}
-        type="jump"
-      />
-    );
-    cta.find('a').simulate('click');
-    expect(CTALogic.jump).toHaveBeenCalled();
-  });
-
-  it('Renders ButtonCTA | type external', () => {
-    const cta = mount(
-      <ButtonCTA
-        buttons={[
-          {
-            type: 'external',
-            href: 'https://www.example.com',
-            copy: 'Lorem Ipsum',
-          },
-        ]}
-        type="external"
-      />
-    );
-    expect(cta.find('svg[aria-label="external launch icon"]')).toHaveLength(1);
-  });
-
-  it('Tests CTALogic', () => {
-    expect(
-      CTALogic.getVideoId('feature', {
-        card: {
-          cta: {
-            media: {
-              src: 'https://example.com',
-            },
-          },
-        },
-      })
-    ).toEqual([{ src: 'https://example.com' }]);
-    expect(
-      CTALogic.getVideoId('button', {
-        buttons: [
-          {
-            type: 'video',
-            media: {
-              src: 'test',
-            },
-          },
-        ],
-      })
-    ).toEqual([{ src: 'test', key: 0 }]);
-    expect(CTALogic.getVideoId('invalid', {})).toEqual([]);
-  });
-});
diff --git a/packages/react/src/components/CTA/index.js b/packages/react/src/components/CTA/index.js
deleted file mode 100644
index a80045940a3..00000000000
--- a/packages/react/src/components/CTA/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as CTA } from './CTA';
diff --git a/packages/react/src/components/CTASection/CTASection.js b/packages/react/src/components/CTASection/CTASection.js
deleted file mode 100644
index 9a4c52c40d2..00000000000
--- a/packages/react/src/components/CTASection/CTASection.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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, { useRef, useEffect } from 'react';
-import classNames from 'classnames';
-import ContentBlock from '../ContentBlock/ContentBlock';
-import ContentItem from '../ContentItem/ContentItem';
-import { CTA } from '../CTA';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * CTASection pattern.
- */
-const CTASection = ({ heading, copy, cta, items, theme }) => {
-  const containerRef = useRef();
-
-  /**
-   * Resize observer to trigger same height function.
-   *
-   * @private
-   */
-  const resizeObserver = useRef(null);
-
-  useEffect(() => {
-    resizeObserver.current = new ResizeObserver(setSameHeight);
-    resizeObserver.current.observe(document.documentElement);
-    return () => (resizeObserver.current = null);
-  }, []);
-
-  /**
-   * Function that activates the sameHeight utility
-   */
-  const setSameHeight = () => {
-    window.requestAnimationFrame(() => {
-      const { current: containerNode } = containerRef;
-      if (containerNode) {
-        sameHeight(
-          containerNode.getElementsByClassName(
-            `${prefix}--content-item__heading`
-          ),
-          'md'
-        );
-        sameHeight(
-          containerNode.getElementsByClassName(`${prefix}--content-item__copy`),
-          'md'
-        );
-      }
-    });
-  };
-
-  return (
-    <section
-      data-autoid={`${stablePrefix}--cta-section`}
-      ref={containerRef}
-      className={classNames(`${prefix}--cta-section`, {
-        [`${prefix}--cta-section__has-items`]: items,
-        [`${prefix}--cta-section--${theme}`]: theme,
-      })}>
-      <ContentBlock heading={heading} copy={copy} />
-      <CTA customClassName={`${prefix}--cta-section__cta`} {...cta} />
-      {items && (
-        <div className={`${prefix}--helper-wrapper`}>
-          <div className={`${prefix}--content-item-wrapper`}>
-            {items.map((item, index) => (
-              <ContentItem
-                key={index}
-                heading={item.heading}
-                copy={item.copy}
-                cta={item.cta}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-    </section>
-  );
-};
-
-CTASection.propTypes = {
-  /**
-   * The heading for the CTA Section pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * The copy for the CTA Section pattern.
-   */
-  copy: PropTypes.string.isRequired,
-
-  /**
-   * CTA object.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf([
-        'jump',
-        'local',
-        'external',
-        'download',
-        'video',
-        'default',
-      ]),
-      PropTypes.arrayOf(
-        PropTypes.oneOf([
-          'jump',
-          'local',
-          'external',
-          'download',
-          'video',
-          'default',
-        ])
-      ),
-    ]),
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Color theme for pattern.
-   */
-  theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
-
-  /**
-   * The `<ContentItem>` data to render.
-   * See the [`<ContentItem>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/patterns-sub-patterms-contentitem--default#props) for full usage details.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      cta: PropTypes.shape({
-        heading: PropTypes.string,
-        copy: PropTypes.string,
-        cta: PropTypes.shape({
-          style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-          type: PropTypes.oneOfType([
-            PropTypes.oneOf([
-              'jump',
-              'local',
-              'external',
-              'download',
-              'video',
-              'default',
-            ]),
-            PropTypes.arrayOf(
-              PropTypes.oneOf([
-                'jump',
-                'local',
-                'external',
-                'download',
-                'video',
-                'default',
-              ])
-            ),
-          ]),
-          copy: PropTypes.string,
-          href: PropTypes.string,
-          customClassName: PropTypes.string,
-        }),
-      }),
-    })
-  ),
-};
-
-export default CTASection;
diff --git a/packages/react/src/components/CTASection/README.stories.mdx b/packages/react/src/components/CTASection/README.stories.mdx
deleted file mode 100644
index 2a9d9f54976..00000000000
--- a/packages/react/src/components/CTASection/README.stories.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CTASection from './CTASection';
-
-# CTA Section
-
-> Use the CTASection to provide additional contextual information for the
-> section or page with specific calls to action.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CTASection)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CTASection)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/ctasection/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the CTA Section
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-#### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CTASection } from '@carbon/ibmdotcom-react';
-
-import 'yourapplication.scss';
-
-const ctaProps = {
-  style: 'button',
-  type: 'local',
-  buttons: [
-    {
-      type: 'local',
-      copy: ['Contact sales'],
-    },
-  ],
-};
-
-const contentBlockProps = {
-  heading: 'Take the next step',
-  copy: `Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.`,
-};
-
-const contentItemsProps = [
-  {
-    heading: 'Get connected',
-    copy: `
-      IBM DevOps partners have a wide range of expertise.
-      Find one to build the right solution for you.
-      `,
-    cta: {
-      copy: 'Find a partner',
-      type: 'local',
-      href: 'https://example.com/',
-    },
-  },
-  {
-    heading: 'Learn how',
-    copy: 'Dig into more self-directed learning about DevOps methodologies.',
-    cta: {
-      copy: 'Browse tutorials',
-      type: 'local',
-      href: 'https://example.com/',
-    },
-  },
-];
-
-function App() {
-  return (
-    <CTASection
-      {...contentBlockProps}
-      cta={ctaProps}
-      items={contentItemsProps}
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import CTASection from '@carbon/ibmdotcom-react/es/components/CTASection/CTASection';
-````
-
-## Props
-
-<Props of={CTASection} />
-
-## Stable selectors
-
-| Name               | Description |
-| ------------------ | ----------- |
-| `dds--cta-section` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CTASection/__stories__/CTASection.stories.js b/packages/react/src/components/CTASection/__stories__/CTASection.stories.js
deleted file mode 100644
index 7e232eb9825..00000000000
--- a/packages/react/src/components/CTASection/__stories__/CTASection.stories.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-import CTASection from '../CTASection';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = ['local', 'external'];
-
-const props = {
-  default: () => ({
-    heading: text('ContentBlock | heading:', 'Take the next step'),
-    copy: text(
-      'ContentBlock | copy:',
-      `Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.`
-    ),
-    cta: {
-      style: 'button',
-      type: types[0],
-      buttons: [
-        {
-          type: select('ContentBlock | CTA type', types, types[0]),
-          copy: 'Secondary button',
-          href: 'https://example.com/',
-        },
-        {
-          type: select('ContentBlock | CTA type', types, types[0]),
-          copy: 'Primary button',
-          href: 'https://example.com/',
-        },
-      ],
-    },
-  }),
-  WithContentItems: () => ({
-    heading: text('Heading (heading):', 'Take the next step'),
-    copy: text(
-      'Copy (copy):',
-      `Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.`
-    ),
-    cta: {
-      style: 'button',
-      type: types[0],
-      buttons: [
-        {
-          type: select('CTA (type):', types, types[0]),
-          copy: 'Secondary button',
-          href: 'https://example.com/',
-        },
-        {
-          type: select('CTA (type):', types, types[0]),
-          copy: 'Primary button',
-          href: 'https://example.com/',
-        },
-      ],
-    },
-    items: contentItemsProps,
-  }),
-};
-
-const contentItemsProps = [
-  {
-    heading: 'Get connected',
-    copy: 'IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.',
-    cta: {
-      copy: 'Find a partner',
-      type: types[0],
-      href: 'https://example.com/',
-    },
-  },
-  {
-    heading: 'Learn how',
-    copy: 'IBM DevOps partners have a wide range of expertise',
-    cta: {
-      copy: 'Browse tutorials',
-      type: types[0],
-      href: 'https://example.com/',
-    },
-  },
-];
-
-export default {
-  title: 'Components/CTA section',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|CTA section: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <CTASection {...props.default()} theme={theme} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    propsSet: {
-      default: {
-        CTASection: {
-          items: contentItemsProps,
-        },
-      },
-    },
-  },
-};
-
-export const WithContentItems = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <CTASection {...props.WithContentItems()} theme={theme} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithContentItems.story = {
-  name: 'With content items',
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
diff --git a/packages/react/src/components/CTASection/__tests__/CTASection.test.js b/packages/react/src/components/CTASection/__tests__/CTASection.test.js
deleted file mode 100644
index 94434c7442f..00000000000
--- a/packages/react/src/components/CTASection/__tests__/CTASection.test.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 ContentItem from '../../ContentItem/ContentItem';
-import CTASection from '../CTASection';
-import { mount } from 'enzyme';
-import React from 'react';
-
-// Mocking ResizeObserver to avoid CI error where it appears to be undefined
-window.ResizeObserver =
-  window.ResizeObserver ||
-  jest.fn().mockImplementation(() => ({
-    disconnect: jest.fn(),
-    observe: jest.fn(),
-    unobserve: jest.fn(),
-  }));
-
-const ctaSectionProps = {
-  heading: 'Content item heading',
-  copy: 'Content item copy',
-};
-
-const contentItemsProps = {
-  items: [
-    {
-      heading: 'Get connected',
-      copy: `
-        IBM DevOps partners have a wide range of expertise.
-        Find one to build the right solution for you.
-        `,
-      cta: {
-        copy: 'Find a partner',
-        type: 'external',
-        href: 'https://example.com/',
-      },
-    },
-    {
-      heading: 'Learn how',
-      copy: 'Dig into more self-directed learning about DevOps methodologies.',
-      cta: {
-        copy: 'Browse tutorials',
-        type: 'local',
-        href: 'https://example.com/',
-      },
-    },
-  ],
-};
-
-describe('CTA Section', () => {
-  it('renders two ContentItems', () => {
-    const wrapper = mount(
-      <CTASection
-        heading={ctaSectionProps.heading}
-        copy={ctaSectionProps.copy}
-        items={contentItemsProps.items}
-      />
-    );
-    expect(wrapper.find(ContentItem)).toHaveLength(
-      contentItemsProps.items.length
-    );
-  });
-});
diff --git a/packages/react/src/components/CTASection/index.js b/packages/react/src/components/CTASection/index.js
deleted file mode 100644
index f2f4467f256..00000000000
--- a/packages/react/src/components/CTASection/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CTASection } from './CTASection';
diff --git a/packages/react/src/components/CalloutQuote/CalloutQuote.js b/packages/react/src/components/CalloutQuote/CalloutQuote.js
deleted file mode 100644
index e9c29a33b66..00000000000
--- a/packages/react/src/components/CalloutQuote/CalloutQuote.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 Callout from '../../internal/components/Callout/Callout';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import { Quote } from '../Quote';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * CalloutQuote component.
- */
-const CalloutQuote = ({ quote }) => {
-  return (
-    <div
-      className={`${prefix}--callout-quote`}
-      data-autoid={`${stablePrefix}--callout-quote`}>
-      <Callout>
-        <Quote {...quote} />
-      </Callout>
-    </div>
-  );
-};
-
-CalloutQuote.propTypes = {
-  /**
-   * Quote object.
-   * See [`<Quote>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-quote--default#props) for full usage details.
-   */
-  quote: PropTypes.shape({
-    markType: PropTypes.oneOf([
-      'doubleCurved',
-      'singleCurved',
-      'doubleAngle',
-      'singleAngle',
-      'lowHighReversedDoubleCurved',
-    ]),
-    copy: PropTypes.string.isRequired,
-    source: PropTypes.shape({
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-    }),
-    cta: PropTypes.shape({
-      copy: PropTypes.string,
-      type: PropTypes.oneOf(['local', 'external']),
-      href: PropTypes.string,
-    }),
-    inverse: PropTypes.bool,
-  }),
-};
-
-export default CalloutQuote;
diff --git a/packages/react/src/components/CalloutQuote/README.stories.mdx b/packages/react/src/components/CalloutQuote/README.stories.mdx
deleted file mode 100644
index b996a0a70e8..00000000000
--- a/packages/react/src/components/CalloutQuote/README.stories.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CalloutQuote from './CalloutQuote';
-
-# Callout Quote
-
-> The "Callout Quote" is a decorator of `Callout`, which includes a `Quote`.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-```scss
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/callout-quote/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the CalloutQuote
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CalloutQuote } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const quote = {
-    copy: 'Lorem ipsum dolor sit amet',
-    source: {
-      heading: 'Lorem ipsum',
-      copy: 'dolor sit amet',
-    },
-    cta: {
-      copy: 'Link with Icon',
-      type: 'local',
-      href: 'https://example.com',
-    },
-  };
-
-  return <CalloutQuote quote={quote} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the CalloutQuote styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import CalloutQuote from '@carbon/ibmdotcom-react/es/components/CalloutQuote/CalloutQuote';
-````
-
-## Props
-
-<Props of={CalloutQuote} />
-
-## Stable selectors
-
-| Name                 | Description |
-| -------------------- | ----------- |
-| `dds--callout-quote` | Pattern     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CalloutQuote/__stories__/CalloutQuote.stories.js b/packages/react/src/components/CalloutQuote/__stories__/CalloutQuote.stories.js
deleted file mode 100644
index e72b28e2a0f..00000000000
--- a/packages/react/src/components/CalloutQuote/__stories__/CalloutQuote.stories.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, select, object } from '@storybook/addon-knobs';
-import CalloutQuote from '../CalloutQuote';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = {
-  singleCurved: 'singleCurved',
-  doubleCurved: 'doubleCurved',
-  doubleAngle: 'doubleAngle',
-  singleAngle: 'singleAngle',
-  lowHighReversedDoubleCurved: 'lowHighReversedDoubleCurved',
-  cornerBracket: 'cornerBracket',
-};
-
-const props = () => ({
-  quote: {
-    copy: text(
-      'Quote (copy): ',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.'
-    ),
-    markType: select('Quote Mark (markType):', types, types.doubleCurved),
-    source: {
-      heading: text(
-        'Quote Source Heading (source.heading): ',
-        'Lorem ipsum dolor sit amet'
-      ),
-      copy: text(
-        'Quote Source Copy (source.copy): ',
-        'consectetur adipiscing elit'
-      ),
-      copy2: text('Quote Source Copy 2 (source.copy2)', 'IBM Cloud'),
-    },
-    cta: object('CTA Object:', {
-      copy: 'Link with Icon',
-      type: 'local',
-      href: 'https://example.com',
-    }),
-  },
-});
-
-export default {
-  title: 'Components/Callout quote',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Callout quote: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--offset-lg-4 bx--col-lg-12">
-          <CalloutQuote {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.test.js b/packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.test.js
deleted file mode 100644
index d9676838185..00000000000
--- a/packages/react/src/components/CalloutQuote/__tests__/CalloutQuote.test.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 CalloutQuote from '../CalloutQuote';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-describe('CalloutQuote', () => {
-  it('renders as expected', () => {
-    const quote = {
-      copy: 'Lorem ipsum dolor',
-      cta: {
-        copy: 'Link with Icon',
-        type: 'local',
-        href: 'https://example.com',
-      },
-      source: {
-        heading: 'lorem ipsum',
-        copy: 'dolor sit amet',
-      },
-    };
-
-    const callout = shallow(<CalloutQuote quote={quote} />);
-
-    expect(callout.find('.bx--callout-quote')).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/CalloutQuote/index.js b/packages/react/src/components/CalloutQuote/index.js
deleted file mode 100644
index 5b7bba40fbe..00000000000
--- a/packages/react/src/components/CalloutQuote/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CalloutQuote } from './CalloutQuote';
diff --git a/packages/react/src/components/CalloutWithMedia/CalloutWithMedia.js b/packages/react/src/components/CalloutWithMedia/CalloutWithMedia.js
deleted file mode 100644
index 768d10cc7f9..00000000000
--- a/packages/react/src/components/CalloutWithMedia/CalloutWithMedia.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 Callout from '../../internal/components/Callout/Callout';
-import { ContentBlockSimple } from '../ContentBlockSimple';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Callout with media pattern.
- */
-const CalloutWithMedia = ({ ...ContentBlockSimpleProps }) => {
-  return (
-    <div
-      data-autoid={`${stablePrefix}--callout-with-media`}
-      className={`${prefix}--callout-with-media`}>
-      <Callout>
-        <ContentBlockSimple {...ContentBlockSimpleProps} />
-      </Callout>
-    </div>
-  );
-};
-
-CalloutWithMedia.propTypes = ContentBlockSimple.propTypes;
-
-export default CalloutWithMedia;
diff --git a/packages/react/src/components/CalloutWithMedia/README.stories.mdx b/packages/react/src/components/CalloutWithMedia/README.stories.mdx
deleted file mode 100644
index 9727f940246..00000000000
--- a/packages/react/src/components/CalloutWithMedia/README.stories.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CalloutWithMedia from '../CalloutWithMedia/CalloutWithMedia';
-
-# Callout With Media
-
-> The "Callout With Media" is a decorator of `Callout`, which includes
-> `Content Block Simple`.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CalloutWithMedia)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CalloutWithMedia)
-
-## Getting started
-
-Here's a quick example to get your started.
-
-```scss
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/callout-with-media/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> CalloutWithMedia styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CalloutWithMedia } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const copy = 'lorum ipsum dolor sit ameet';
-  const heading = 'lorum ipsum dolor sit amet';
-  const mediaData = {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    image: {
-      sources: [
-        {
-          src:
-            'http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 320,
-        },
-        {
-          src:
-            'http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 400,
-        },
-        {
-          src:
-            'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 672,
-        },
-      ],
-      alt: 'Image alt text',
-      defaultSrc:
-        'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-    },
-  };
-  const mediaType = 'image';
-
-  return (
-    <CalloutWithMedia
-      heading={heading}
-      copy={copy}
-      mediaType={mediaType}
-      mediaData={mediaData}
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import CalloutWithMedia from '@carbon/ibmdotcom-react/es/components/CalloutWithMedia/CalloutWithMedia';
-```
-
-## Props
-
-<Props of={CalloutWithMedia} />
-
-## Stable selectors
-
-| Name                      | Description |
-| ------------------------- | ----------- |
-| `dds--callout-with-media` | Pattern     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js b/packages/react/src/components/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js
deleted file mode 100644
index d4ec38a1d03..00000000000
--- a/packages/react/src/components/CalloutWithMedia/__stories__/CalloutWithMedia.stories.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-import CalloutWithMedia from '../CalloutWithMedia';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
-import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const mediaDataByType = {
-  image: {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    image: {
-      sources: [
-        {
-          src: imgSm16x9,
-          breakpoint: 320,
-        },
-        {
-          src: imgMd16x9,
-          breakpoint: 400,
-        },
-        {
-          src: imgLg16x9,
-          breakpoint: 672,
-        },
-      ],
-      alt: 'Image alt text',
-      defaultSrc: imgLg16x9,
-    },
-  },
-  video: {
-    videoId: '1_9h94wo6b',
-    showCaption: true,
-  },
-};
-
-const props = () => {
-  const mediaType = select(
-    'mediaType (optional)',
-    ['image', 'video', 'none'],
-    'image'
-  );
-  return {
-    mediaData: mediaDataByType[mediaType],
-    mediaType: mediaType === 'none' ? undefined : mediaType,
-    heading: text('heading', 'Curabitur malesuada varius mi eu posuere'),
-    copy: text(
-      'copy',
-      'Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.\n      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales\n      nulla quis, *consequat* libero. Here are\n      some common categories:'
-    ),
-  };
-};
-
-export default {
-  title: 'Components/Callout with media',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Callout with media: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--offset-lg-4 bx--col-lg-12">
-          <CalloutWithMedia {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/CalloutWithMedia/index.js b/packages/react/src/components/CalloutWithMedia/index.js
deleted file mode 100644
index cb1fb4e609d..00000000000
--- a/packages/react/src/components/CalloutWithMedia/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CalloutWithMedia } from './CalloutWithMedia';
diff --git a/packages/react/src/components/Card/Card.js b/packages/react/src/components/Card/Card.js
deleted file mode 100644
index 7af86f52be3..00000000000
--- a/packages/react/src/components/Card/Card.js
+++ /dev/null
@@ -1,243 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useCallback, useEffect, useRef } from 'react';
-import classNames from 'classnames';
-import CTALogic from '../CTA/CTALogic';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { Image } from '../Image';
-import Link from '../../internal/vendor/carbon-components-react/components/Link/Link';
-import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml';
-import on from 'carbon-components/es/globals/js/misc/on';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import { Tile } from '../../internal/vendor/carbon-components-react/components/Tile/Tile';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Card Link Component.
- */
-export const Card = ({
-  cardStatic,
-  light,
-  inverse,
-  border,
-  image,
-  eyebrow,
-  heading,
-  customClassName,
-  copy,
-  cta,
-  pictogram,
-  onClick,
-  ...props
-}) => {
-  const refWrapper = useRef(null);
-
-  const handleClick = useCallback(
-    (e) => {
-      if (!onClick || onClick(e) !== false) {
-        cta?.type === 'jump' ? CTALogic.jump(e, cta.type) : false;
-      }
-    },
-    [cta, onClick]
-  );
-
-  useEffect(() => {
-    let hClick;
-    const { current: wrapperNode } = refWrapper;
-    const tileNode = wrapperNode.closest('.bx--tile');
-    if (tileNode) {
-      // Manually attach an event listener given `onClick()` of Carbon `<Tile>` runs after `<Tile>` changes its state
-      hClick = on(tileNode, 'click', handleClick);
-    }
-    return () => {
-      if (hClick) {
-        hClick = hClick.release();
-      }
-    };
-  }, [handleClick]);
-
-  return (
-    <Tile
-      data-autoid={`${stablePrefix}--card`}
-      className={classNames(
-        `${prefix}--card`,
-        {
-          [`${prefix}--card--static`]: cardStatic,
-          [`${prefix}--card--light`]: light,
-          [`${prefix}--card--inverse`]: inverse,
-          [`${prefix}--card__CTA--disabled`]: props.disabled,
-          [`${prefix}--card--border`]: border,
-        },
-        customClassName
-      )}
-      {...props}>
-      {image && <Image {...image} classname={`${prefix}--card__img`} />}
-      <div className={`${prefix}--card__wrapper`} ref={refWrapper}>
-        <div className={`${prefix}--card__content`}>
-          {eyebrow && <p className={`${prefix}--card__eyebrow`}>{eyebrow}</p>}
-          {heading && <h3 className={`${prefix}--card__heading`}>{heading}</h3>}
-          {optionalContent(copy)}
-          {renderFooter(cta, copy, props.disabled, heading, pictogram)}
-        </div>
-      </div>
-    </Tile>
-  );
-};
-
-/**
- * Card Link optional content
- *
- * @param {string} copy paragraph of text
- * @returns {object} JSX object
- */
-function optionalContent(copy) {
-  return !copy ? null : (
-    <div
-      className={`${prefix}--card__copy`}
-      dangerouslySetInnerHTML={{
-        __html: markdownToHtml(copy, { bold: false }),
-      }}></div>
-  );
-}
-
-/**
- * Render footer with icon
- *
- * @param {object} cta cta object
- * @returns {object} JSX object
- */
-function renderFooter(cta, copy, disabled, heading, pictogram) {
-  const CardFooter = disabled ? 'p' : Link;
-
-  return (
-    cta && (
-      <CardFooter
-        className={classNames(`${prefix}--card__footer`, {
-          [`${prefix}--card__footer__icon-left`]: cta?.iconPlacement === 'left',
-          [`${prefix}--card__footer__copy`]: cta?.copy,
-        })}
-        href={cta?.href}
-        target={CTALogic.external(cta?.type)}
-        aria-label={
-          (cta?.copy ? '' : heading ? heading : copy) +
-          CTALogic.getDefaultLabel(cta?.type)
-        }
-        onClick={cta?.handleClick}>
-        {cta?.copy && !pictogram && (
-          <span className={`${prefix}--card__cta__copy`}>{cta?.copy}</span>
-        )}
-        {cta?.icon?.src && !pictogram && (
-          <cta.icon.src className={`${prefix}--card__cta`} {...cta?.icon} />
-        )}
-        {pictogram && pictogram}
-      </CardFooter>
-    )
-  );
-}
-
-export const cardPropTypes = {
-  /**
-   * Concise yet descriptive string of text describing the linked resource.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * Eyebrow text to be passed as a property to the Card component.
-   * Style for Card component has been set to "text".
-   */
-  eyebrow: PropTypes.string,
-
-  /**
-   * Paragraph of text that further describing the resource with added detail.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Disable card link
-   */
-  disabled: PropTypes.bool,
-
-  /**
-   * Pictogram located at the bottom left side of the Card. This prop disables the CTA.copy and CTA.icon (experimental)
-   */
-  pictogram: PropTypes.node,
-
-  /**
-   * CTA options. Has the following structure in summary:
-   *
-   * | Name            | Data Type | Description                                                                                                                      |
-   * | --------------- | --------- | -------------------------------------------------------------------------------------------------------------------------------- |
-   * | `href`          | String    | Valid URL for a the location of an internal or external resource                                                                 |
-   * | `icon`          | String    | Provide an optional icon to the footer from [Carbon's icon library](https://www.carbondesignsystem.com/guidelines/icons/library) |
-   * | `iconPlacement` | String    | Option to place icon left or right of cta text                                                                                   |
-   * | `copy`          | String    | Optional text for CTA                                                                                                            |
-   * | `type`          | String    | type of CTA (local or external) when Card type is static                                                                         |
-   *
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    type: PropTypes.oneOf(['jump', 'local', 'external', 'download']),
-    icon: PropTypes.shape({
-      src: PropTypes.elementType,
-    }),
-    iconPlacement: PropTypes.oneOf(['left', 'right']),
-  }),
-
-  /**
-   * Contains source and alt text properties.
-   * See [`<Image>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-image--default#props) for full usage details.
-   */
-  image: PropTypes.shape({
-    classname: PropTypes.string,
-    sources: PropTypes.arrayOf(
-      PropTypes.shape({
-        src: PropTypes.string,
-        breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      })
-    ),
-    defaultSrc: PropTypes.string.isRequired,
-    alt: PropTypes.string.isRequired,
-    longDescription: PropTypes.string,
-  }),
-
-  /**
-   * `true` to set a 1px solid border around Card.
-   */
-  border: PropTypes.bool,
-
-  /**
-   * `true` to set the Card static variation.
-   */
-  cardStatic: PropTypes.bool,
-
-  /**
-   * `true` to set the high contrast for Card.
-   */
-  inverse: PropTypes.bool,
-
-  /**
-   * `true` to set the light theme for Card.
-   */
-  light: PropTypes.bool,
-
-  /**
-   * Classname to be assigned to the Card component.
-   */
-  customClassName: PropTypes.string,
-
-  /**
-   * A handler for `click` event on the card.
-   */
-  onClick: PropTypes.func,
-};
-
-Card.propTypes = cardPropTypes;
diff --git a/packages/react/src/components/Card/README.stories.mdx b/packages/react/src/components/Card/README.stories.mdx
deleted file mode 100644
index 07dd82adec8..00000000000
--- a/packages/react/src/components/Card/README.stories.mdx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import { Card } from './Card';
-
-# Card
-
-> Cards use
-> [Carbon's Clickable Tile component](https://www.carbondesignsystem.com/components/tile/code#clickable-tile)
-> while presenting content in a concise and readable style.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Card)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Card)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Card styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Card } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <Card
-      heading="Lorem ipsum dolor sit amet"
-      copy="Copy text"
-      href="https://example.com"
-    />);
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-## Card - static
-
-The static variation should be used when there is no URL being passed to the `Card`'s href attribute,
-to ensure the card is no longer clickable. To use it, be sure to pass in the `static` boolean prop.
-
-
-
-##### JS
-
-```javascript
-
-function App() {
-  return (
-    <Card
-      heading="Lorem ipsum dolor sit amet"
-      copy="Copy text"
-      href="https://example.com"
-      static={true}
-    />);
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-## Light theme
-
-An optional light theme is available by passing in the `light` boolean attribute.
-
-```javascript
-function App() {
-  return (
-    <Card
-      heading="Lorem ipsum dolor sit amet"
-      copy="Copy text"
-      href="https://example.com"
-      light={true}
-    />);
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the card link styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import Card from '@carbon/ibmdotcom-react/es/components/Card/Card';
-````
-
-## Props
-
-<Props of={Card} />
-
-## Stable selectors
-
-| Name        | Description |
-| ----------- | ----------- |
-| `dds--card` | Interactive |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/Card/__stories__/Card.stories.js b/packages/react/src/components/Card/__stories__/Card.stories.js
deleted file mode 100644
index e5be84e04a6..00000000000
--- a/packages/react/src/components/Card/__stories__/Card.stories.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, boolean, select } from '@storybook/addon-knobs';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import Bee from '@carbon/pictograms-react/lib/bee';
-import { Card } from '../';
-import { DDS_CARD_WITH_PICTOGRAM } from '../../../internal/FeatureFlags';
-import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = {
-  default: () => {
-    const showPictogram = DDS_CARD_WITH_PICTOGRAM
-      ? boolean('Show pictogram (hides CTA)', false)
-      : null;
-    const image =
-      (boolean('Add image:', false) && {
-        defaultSrc: imgXlg4x3,
-        alt: 'Image alt text',
-      }) ||
-      undefined;
-    const eyebrow = text('Eyebrow:', 'Industry');
-    const heading = text('Heading:', 'Aerospace and defence');
-    const copy = text('Body copy:', '');
-    const cta = {
-      href: 'https://example.com',
-      copy: text('CTA:', 'Learn more'),
-      icon: {
-        src: ArrowRight20,
-      },
-    };
-    const cardStyles = select(
-      'Card style:',
-      ['Outlined card', 'Inverse card', 'none'],
-      'none'
-    );
-    return {
-      image,
-      eyebrow,
-      heading,
-      copy,
-      light: cardStyles === 'Outlined card',
-      border: cardStyles === 'Outlined card',
-      cta,
-      inverse: cardStyles === 'Inverse card',
-      pictogram: showPictogram && DDS_CARD_WITH_PICTOGRAM ? <Bee /> : null,
-    };
-  },
-  staticProps: () => {
-    const image =
-      (boolean('Add image:', false) && {
-        defaultSrc: imgXlg4x3,
-        alt: 'Image alt text',
-      }) ||
-      undefined;
-    const eyebrow = text('Eyebrow:', 'SPSS Statistics', 'staticID');
-    const heading = text('Heading:', 'Free trial', 'staticID');
-    const copy = text(
-      'Body copy:',
-      'Enjoy full SPSS Statistics capabilities including all add-ons. All trial registrants are restricted to one free trial per computer per user.',
-      'staticID'
-    );
-    const cta = boolean('Add CTA:', false, 'staticID');
-    const outlinedCard = boolean('Outlined card:', true);
-    return {
-      image,
-      eyebrow: eyebrow,
-      heading: heading,
-      copy,
-      light: outlinedCard,
-      border: outlinedCard,
-      cardStatic: outlinedCard,
-      cta: cta
-        ? {
-            href: 'https://example.com',
-            copy: text('CTA copy:', 'Sign up for the trial'),
-            icon: {
-              src: ArrowRight20,
-            },
-          }
-        : '',
-    };
-  },
-};
-
-export default {
-  title: 'Components/Card',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Card: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-
-  return (
-    <div className={`bx--card--${theme}`}>
-      <div className="bx--grid bx--grid--card">
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
-            <Card {...props.default()} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const CardStatic = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-
-  return (
-    <div className={`bx--card--${theme}`}>
-      <div className="bx--grid bx--grid--card">
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
-            <Card {...props.staticProps()} />
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
-
-CardStatic.story = {
-  name: 'Card static',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Card: Card static',
-    },
-  },
-};
diff --git a/packages/react/src/components/Card/__tests__/Card.steps.js b/packages/react/src/components/Card/__tests__/Card.steps.js
deleted file mode 100644
index 95873f3969c..00000000000
--- a/packages/react/src/components/Card/__tests__/Card.steps.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('Card', () => {
-  beforeAll(async () => {
-    await page.goto(
-      `http://localhost:${process.env.PORT}/iframe.html?id=components-card--default`
-    );
-  });
-
-  it('should have the right type for the eyebrow', async () => {
-    const eyebrow = await page.waitForSelector('.bx--card__eyebrow');
-    const styleValues = await page.evaluate(
-      (eyebrow) =>
-        window.getStyleValues(eyebrow, [
-          'font-size',
-          'font-weight',
-          'line-height',
-          'letter-spacing',
-        ]),
-      eyebrow
-    );
-    expect(styleValues).toEqual({
-      'font-size': '14px',
-      'font-weight': '400',
-      'line-height': '18px',
-      'letter-spacing': '0.16px',
-    });
-  });
-
-  it('should have the right type for the footer', async () => {
-    const footerSpan = await page.waitForSelector('.bx--card__footer span');
-    const styleValues = await page.evaluate(
-      (footerSpan) =>
-        window.getStyleValues(footerSpan, [
-          'font-size',
-          'font-weight',
-          'line-height',
-          'letter-spacing',
-        ]),
-      footerSpan
-    );
-    expect(styleValues).toEqual({
-      'font-size': '16px',
-      'font-weight': '400',
-      'line-height': '22px',
-      'letter-spacing': 'normal',
-    });
-  });
-});
diff --git a/packages/react/src/components/Card/index.js b/packages/react/src/components/Card/index.js
deleted file mode 100644
index 4746d188b21..00000000000
--- a/packages/react/src/components/Card/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 * from './Card';
diff --git a/packages/react/src/components/CardGroup/CardGroup.js b/packages/react/src/components/CardGroup/CardGroup.js
deleted file mode 100644
index 6229bd55039..00000000000
--- a/packages/react/src/components/CardGroup/CardGroup.js
+++ /dev/null
@@ -1,229 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useRef, useCallback, useEffect } from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { Card } from '../Card';
-import { CTA } from '../CTA';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * CardGroup component
- */
-const CardGroup = ({ cards, cardsPerRow, cta, border }) => {
-  const containerRef = useRef();
-
-  /**
-   * Resize observer to trigger same height function.
-   *
-   * @private
-   */
-  const resizeObserver = useRef(null);
-
-  useEffect(() => {
-    resizeObserver.current = new ResizeObserver(setSameHeight);
-    resizeObserver.current.observe(document.documentElement);
-    return () => (resizeObserver.current = null);
-  }, [setSameHeight]);
-
-  /**
-   * Function that activates the sameHeight utility
-   */
-  const setSameHeight = useCallback(() => {
-    window.requestAnimationFrame(() => {
-      const { current: containerNode } = containerRef;
-      if (containerNode) {
-        if (
-          containerNode.getElementsByClassName(`${prefix}--card__eyebrow`)
-            .length > 0
-        ) {
-          sameHeight(
-            containerNode.getElementsByClassName(`${prefix}--card__eyebrow`),
-            'md'
-          );
-        }
-        if (
-          containerNode.getElementsByClassName(`${prefix}--card__heading`)
-            .length > 0
-        ) {
-          sameHeight(
-            containerNode.getElementsByClassName(`${prefix}--card__heading`),
-            'md'
-          );
-        }
-        if (
-          containerNode.getElementsByClassName(`${prefix}--card__copy`).length >
-          0
-        ) {
-          sameHeight(
-            containerNode.getElementsByClassName(`${prefix}--card__copy`),
-            'md'
-          );
-        }
-        if (
-          containerNode.getElementsByClassName(`${prefix}--card__footer`)
-            .length > 0
-        ) {
-          sameHeight(
-            containerNode.getElementsByClassName(`${prefix}--card__footer`),
-            'md'
-          );
-        }
-      }
-    });
-  }, []);
-
-  return _renderCards(cards, cardsPerRow, containerRef, cta, border);
-};
-
-/**
- * Renders the cards based on the CardGroup entries.
- *
- * @param {Array} cards objects array
- * @param {number} cardsPerRow number of cards per column
- * @param {object} containerRef ref of elements
- * @param {object} cta object
- * @param {boolean} border boolean
- * @returns {*} CardGroup JSX objects
- */
-const _renderCards = (cards, cardsPerRow, containerRef, cta, border) => (
-  <div
-    data-autoid={`${stablePrefix}--card-group`}
-    className={cx(`${prefix}--card-group__cards__row`, {
-      [`${prefix}--card-group--border`]: border,
-      [`${prefix}--row--condensed`]: !border,
-    })}
-    style={{ '--dds--card-group--cards-in-row': cardsPerRow }}
-    ref={containerRef}>
-    {cards.map((card, index) => {
-      return (
-        <div key={index} className={`${prefix}--card-group__cards__col`}>
-          <CTA
-            style="card"
-            key={index}
-            customClassName={`${prefix}--card-group__card`}
-            image={card.image}
-            media={card.media}
-            heading={card.heading}
-            eyebrow={card.eyebrow}
-            copy={card.copy}
-            pictogram={card.pictogram}
-            cta={{
-              ...card.cta,
-              icon: {
-                src: ArrowRight20,
-              },
-            }}
-            type={card.media ? 'video' : card.type ? card.type : 'local'}
-          />
-        </div>
-      );
-    })}
-    {cta && (
-      <div className={`${prefix}--card-group__cards__col`}>
-        <Card
-          inverse={true}
-          heading={cta.heading}
-          cta={{
-            href: cta.cta.href,
-            icon: {
-              src: ArrowRight20,
-            },
-          }}
-        />
-      </div>
-    )}
-  </div>
-);
-
-CardGroup.propTypes = {
-  /**
-   * Array of card objects.
-   * Uses a sub-scheme of `<CTA style="card">`'s props for each items.
-   *
-   * Simple:
-   *
-   * | Name       | Required | Data Type | Description                            |
-   * | ---------- | -------- | --------- | -------------------------------------- |
-   * | `copy`     | YES      | String    | Copy of the card.                      |
-   * | `heading`  | YES      | String    | Heading of the card.                   |
-   * | `cta.href` | YES      | String    | URI for internal or external resource. |
-   *
-   * Image:
-   *
-   * | Name       | Required | Data Type | Description                              |
-   * | ---------- | -------- | --------- | ---------------------------------------- |
-   * | `image`    | YES      | Object    | Contains source and alt text properties. |
-   * | `eyebrow`  | YES      | String    | Eyebrow of the card.                     |
-   * | `heading`  | YES      | String    | Heading of the card.                     |
-   * | `cta.href` | YES      | String    | URI for internal or external resource.   |
-   *
-   * See [`<CTA style="card">`'s README](https://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--card#props) for full usage details.
-   */
-  cards: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string,
-      eyebrow: PropTypes.string,
-      copy: PropTypes.string,
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        media: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            type: PropTypes.string,
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }),
-      cta: PropTypes.shape({
-        href: PropTypes.string,
-      }),
-      pictogram: PropTypes.node,
-    })
-  ).isRequired,
-
-  /**
-   * The number of columns per row. Min 2, max 4, default 3. Applies to >=`lg` breakpoint only.
-   */
-  cardsPerRow: PropTypes.number,
-
-  /**
-   * Optional CTA card for group. Always displays as last item.
-   * Uses a sub-scheme of `<Card>`'s props.
-   * See [`<Card>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-card--static#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    heading: PropTypes.string,
-    cta: PropTypes.shape({
-      href: PropTypes.string,
-    }),
-  }),
-};
-
-CardGroup.defaultProps = {
-  cardsPerRow: 3,
-};
-
-export default CardGroup;
diff --git a/packages/react/src/components/CardGroup/README.stories.mdx b/packages/react/src/components/CardGroup/README.stories.mdx
deleted file mode 100644
index 141baac5584..00000000000
--- a/packages/react/src/components/CardGroup/README.stories.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CardGroup from './CardGroup';
-
-# Card Group
-
-> Card groups are a collection of card components that can be used in block and
-> group -level patterns.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/card-group/card-group';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the card-group
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardGroup)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardGroup)
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CardGroup } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return <CardGroup cards={cards} cta={cta} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import CardGroup from '@carbon/ibmdotcom-react/es/components/CardGroup/CardGroup';
-````
-
-## Props
-
-<Props of={CardGroup} />
-
-## Stable selectors
-
-| Name              | Description |
-| ----------------- | ----------- |
-| `dds--card-group` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CardGroup/__stories__/CardGroup.stories.js b/packages/react/src/components/CardGroup/__stories__/CardGroup.stories.js
deleted file mode 100644
index 13a95797fb4..00000000000
--- a/packages/react/src/components/CardGroup/__stories__/CardGroup.stories.js
+++ /dev/null
@@ -1,254 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { number, boolean, select } from '@storybook/addon-knobs';
-import CardGroup from '../CardGroup';
-import cx from 'classnames';
-import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const cardsCol = {
-  '3 cards per row (Default)': '3',
-  '2 cards per row': '2',
-  '4 cards per row': '4',
-};
-
-const props = {
-  default: () => ({
-    cards: Array.from({
-      length: number('Number of cards', 5, {}),
-    }).map((_) => defaultCard),
-    border: boolean('Outlined cards:', false),
-    cardsPerRow: select(
-      'Number of cards per row (cardsPerRow):',
-      cardsCol,
-      cardsCol['3 cards per row (Default)']
-    ),
-  }),
-  withCTA: () => ({
-    cards: Array.from({
-      length: number('Number of cards', 5, {}),
-    }).map((_) => defaultCard),
-    cta: groupCTA,
-    cardsPerRow: select(
-      'Number of cards per row (cardsPerRow):',
-      cardsCol,
-      cardsCol['3 cards per row (Default)']
-    ),
-  }),
-  withImages: () => ({
-    cards: Array.from({
-      length: number('Number of cards', 5, {}),
-    }).map((_) => cardWithImages),
-    cardsPerRow: select(
-      'Number of cards per row (cardsPerRow):',
-      cardsCol,
-      cardsCol['3 cards per row (Default)']
-    ),
-  }),
-  withImagesAndCTA: () => ({
-    cards: Array.from({
-      length: number('Number of cards', 5, {}),
-    }).map((_) => cardWithImages),
-    cta: groupCTA,
-    cardsPerRow: select(
-      'Number of cards per row (cardsPerRow):',
-      cardsCol,
-      cardsCol['3 cards per row (Default)']
-    ),
-  }),
-};
-
-export default {
-  title: 'Components/Card group',
-  parameters: {
-    ...readme.parameters,
-    propsSet: {
-      default: {
-        CardGroup: {
-          cards: [
-            {
-              heading: 'Nunc convallis lobortis',
-              copy: 'Lorem ipsum dolor sit amet.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Fusce gravida eu arcu',
-              copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Interdum et malesuada',
-              copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Nunc convallis loborti',
-              copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-            {
-              heading: 'Nunc convallis lbortis',
-              copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-              cta: {
-                href: 'https://www.example.com',
-              },
-            },
-          ],
-        },
-      },
-    },
-  },
-};
-
-const defaultCard = {
-  heading: 'Nunc convallis lobortis',
-  type: 'local',
-  copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-  cta: {
-    href: 'https://www.example.com',
-  },
-};
-
-const cardWithImages = {
-  image: {
-    defaultSrc: imgXlg4x3,
-    alt: 'Image alt text',
-  },
-  type: 'local',
-  eyebrow: 'Topic',
-  heading: 'Natural language processing.',
-  cta: {
-    href: 'https://www.example.com',
-  },
-};
-
-const groupCTA = {
-  heading: 'Top level card link',
-  cta: {
-    href: 'https://www.example.com',
-  },
-};
-
-export const Default = () => {
-  const classes = cx({
-    [`bx--col-sm-4`]: true,
-    [`bx--col-lg-8`]: props.default().cardsPerRow == 2,
-    [`bx--col-lg-12`]: props.default().cardsPerRow == 3,
-    [`bx--col-lg-16`]: props.default().cardsPerRow == 4,
-  });
-
-  return (
-    <div className="bx--grid bx--content-group-story">
-      <div className="bx--row">
-        <div className={classes}>
-          <CardGroup {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const WithCTA = () => {
-  const classes = cx({
-    [`bx--col-sm-4`]: true,
-    [`bx--col-lg-8`]: props.withCTA().cardsPerRow == 2,
-    [`bx--col-lg-12`]: props.withCTA().cardsPerRow == 3,
-    [`bx--col-lg-16`]: props.withCTA().cardsPerRow == 4,
-  });
-
-  return (
-    <div className="bx--grid bx--content-group-story">
-      <div className="bx--row">
-        <div className={classes}>
-          <CardGroup {...props.withCTA()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithCTA.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const WithImages = () => {
-  const classes = cx({
-    [`bx--col-sm-4`]: true,
-    [`bx--col-lg-8`]: props.withImages().cardsPerRow == 2,
-    [`bx--col-lg-12`]: props.withImages().cardsPerRow == 3,
-    [`bx--col-lg-16`]: props.withImages().cardsPerRow == 4,
-  });
-
-  return (
-    <div className="bx--grid bx--content-group-story">
-      <div className="bx--row">
-        <div className={classes}>
-          <CardGroup {...props.withImages()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithImages.story = {
-  name: 'With images',
-  parameters: {
-    percy: {
-      name: 'Components|Card group: With images',
-    },
-  },
-};
-
-export const WithImagesAndCTA = () => {
-  const classes = cx({
-    [`bx--col-sm-4`]: true,
-    [`bx--col-lg-8`]: props.withImagesAndCTA().cardsPerRow == 2,
-    [`bx--col-lg-12`]: props.withImagesAndCTA().cardsPerRow == 3,
-    [`bx--col-lg-16`]: props.withImagesAndCTA().cardsPerRow == 4,
-  });
-
-  return (
-    <div className="bx--grid bx--content-group-story">
-      <div className="bx--row">
-        <div className={classes}>
-          <CardGroup {...props.withImagesAndCTA()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithImagesAndCTA.story = {
-  name: 'With images and CTA',
-  parameters: {
-    percy: {
-      name: 'Components|Card group: With images and CTA',
-    },
-  },
-};
diff --git a/packages/react/src/components/CardGroup/__stories__/data/cards.js b/packages/react/src/components/CardGroup/__stories__/data/cards.js
deleted file mode 100644
index eb15d71d84e..00000000000
--- a/packages/react/src/components/CardGroup/__stories__/data/cards.js
+++ /dev/null
@@ -1,165 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 imgXlg16x9 from '../../../../../../storybook-images/assets/1312/fpo--3x2--874--004.jpg';
-import imgXlg1x1 from '../../../../../../storybook-images/assets/1312/fpo--3x2--874--004.jpg';
-import imgXlg2x1 from '../../../../../../storybook-images/assets/1312/fpo--3x2--874--004.jpg';
-import imgXlg3x2 from '../../../../../../storybook-images/assets/1312/fpo--3x2--874--004.jpg';
-import imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--3x2--874--004.jpg';
-
-const cards = {
-  Simple: [
-    {
-      heading: 'Nunc convallis lobortis Nunc convallis lobortis',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-      cta: {
-        href: 'https://www.example.com',
-        copy: 'cta text here',
-      },
-    },
-    {
-      heading: 'Fusce gravida eu arcu',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.',
-      cta: {
-        href: 'https://www.example.com',
-        copy: 'cta text here',
-      },
-    },
-    {
-      heading: 'Interdum et malesuada',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.',
-      cta: {
-        href: 'https://www.example.com',
-        copy: 'cta text here',
-      },
-    },
-    {
-      heading: 'Nunc convallis loborti',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-      cta: {
-        href: 'https://www.example.com',
-        copy: 'cta text here',
-      },
-    },
-    {
-      heading: 'Nunc convallis lbortis',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
-      cta: {
-        href: 'https://www.example.com',
-        copy: 'cta text here',
-      },
-    },
-  ],
-  Images: [
-    {
-      image: {
-        defaultSrc: imgXlg1x1,
-        alt: 'Image alt text',
-      },
-      eyebrow: 'Topic',
-      heading: 'Natural language processing.',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      image: {
-        defaultSrc: imgXlg4x3,
-        alt: 'Image alt text',
-      },
-      eyebrow: 'Blog',
-      heading: 'Natural language processing.',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      image: {
-        defaultSrc: imgXlg2x1,
-        alt: 'Image alt text',
-      },
-      eyebrow: 'Topic',
-      heading: 'Natural language processing.',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      image: {
-        defaultSrc: imgXlg3x2,
-        alt: 'Image alt text',
-      },
-      eyebrow: 'Blog',
-      heading:
-        'Serving society ethically in the age of Artificial Intelligence.',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      image: {
-        defaultSrc: imgXlg16x9,
-        alt: 'Image alt text',
-      },
-      eyebrow: 'Topic',
-      heading:
-        'Serving society ethically in the age of Artificial Intelligence.',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-  ],
-  Videos: [
-    {
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-      },
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-      },
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-      },
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-      },
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-      },
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-  ],
-};
-
-export default cards;
diff --git a/packages/react/src/components/CardGroup/index.js b/packages/react/src/components/CardGroup/index.js
deleted file mode 100644
index 0e66fcbd7eb..00000000000
--- a/packages/react/src/components/CardGroup/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CardGroup } from './CardGroup';
diff --git a/packages/react/src/components/CardInCard/README.stories.mdx b/packages/react/src/components/CardInCard/README.stories.mdx
deleted file mode 100644
index 1af34508c18..00000000000
--- a/packages/react/src/components/CardInCard/README.stories.mdx
+++ /dev/null
@@ -1,5 +0,0 @@
-# Card in card
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with
-a
-[React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/card-in-card).
diff --git a/packages/react/src/components/CardInCard/__stories__/CardInCard.stories.js b/packages/react/src/components/CardInCard/__stories__/CardInCard.stories.js
deleted file mode 100644
index 88c7bf3d7ca..00000000000
--- a/packages/react/src/components/CardInCard/__stories__/CardInCard.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Card in card',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/card-in-card">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/CardLink/CardLink.js b/packages/react/src/components/CardLink/CardLink.js
deleted file mode 100644
index 3ce5ee1d60d..00000000000
--- a/packages/react/src/components/CardLink/CardLink.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { Card } from '../Card';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * CardLink component
- */
-const CardLink = ({ card, customClassName }) => {
-  const cardLinkClassname = cx(
-    `${prefix}--card-link ${prefix}--card__CTA`,
-    customClassName
-  );
-  return <Card customClassName={cardLinkClassname} {...card} />;
-};
-
-CardLink.propTypes = {
-  /**
-   * Card options.
-   * See [`<Card>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-card--link-clickable#props) for full usage details.
-   */
-  card: PropTypes.shape(Card.propTypes).isRequired,
-
-  /**
-   * Custom className
-   */
-  customClassName: PropTypes.string,
-};
-
-CardLink.defaultProps = {
-  disabled: false,
-};
-
-export default CardLink;
diff --git a/packages/react/src/components/CardLink/README.stories.mdx b/packages/react/src/components/CardLink/README.stories.mdx
deleted file mode 100644
index d231b685b46..00000000000
--- a/packages/react/src/components/CardLink/README.stories.mdx
+++ /dev/null
@@ -1,87 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import { CardLink } from '../CardLink';
-
-# CardLink
-
-> Card links use
-> [Carbon's Clickable Tile component](https://www.carbondesignsystem.com/components/tile/code#clickable-tile)
-> while presenting content in a concise and readable style.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardLink)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardLink)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Card styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CardLink } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CardLink
-      card={{
-        heading: 'Heading',
-        copy: 'Lorem ipsum dolor sit amet',
-        cta: {
-          href: 'http://www.example.com',
-          icon: {
-            src: ArrowRight20,
-          },
-        },
-        disabled={false},
-      }}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the card styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import CardLink from '@carbon/ibmdotcom-react/es/components/CardLink/CardLink';
-````
-
-## Props
-
-<Props of={CardLink} />
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CardLink/__stories__/CardLink.stories.js b/packages/react/src/components/CardLink/__stories__/CardLink.stories.js
deleted file mode 100644
index 6614f875612..00000000000
--- a/packages/react/src/components/CardLink/__stories__/CardLink.stories.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import CardLink from '../CardLink';
-import Error20 from '@carbon/icons-react/es/error/20';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => {
-  const disabled = boolean('Disabled (disabled):', false);
-  const iconStyle = disabled ? Error20 : ArrowRight20;
-  return {
-    card: {
-      heading: text(
-        'Card Heading (card.heading):',
-        'Explore AI use cases in all industries'
-      ),
-      cta: {
-        href: text('Card href (card.cta.href):', 'https://www.example.com'),
-        icon: {
-          src: iconStyle,
-        },
-      },
-      disabled: disabled,
-    },
-  };
-};
-
-export default {
-  title: 'Components/Card link',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Card link: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid bx--grid--card bx--grid--condensed">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
-          <CardLink {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/CardLink/index.js b/packages/react/src/components/CardLink/index.js
deleted file mode 100644
index 6e982e7e486..00000000000
--- a/packages/react/src/components/CardLink/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CardLink } from './CardLink';
diff --git a/packages/react/src/components/CardSectionCarousel/README.stories.mdx b/packages/react/src/components/CardSectionCarousel/README.stories.mdx
deleted file mode 100644
index 3fdcbba99a6..00000000000
--- a/packages/react/src/components/CardSectionCarousel/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Card Section - Carousel
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-carousel--default).
diff --git a/packages/react/src/components/CardSectionCarousel/__stories__/CardSectionCarousel.stories.js b/packages/react/src/components/CardSectionCarousel/__stories__/CardSectionCarousel.stories.js
deleted file mode 100644
index d2e25f5e052..00000000000
--- a/packages/react/src/components/CardSectionCarousel/__stories__/CardSectionCarousel.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Card section carousel',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-card-section-carousel--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/CardSectionImages/CardSectionImages.js b/packages/react/src/components/CardSectionImages/CardSectionImages.js
deleted file mode 100755
index 4f369c13adf..00000000000
--- a/packages/react/src/components/CardSectionImages/CardSectionImages.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { CardGroup } from '../CardGroup';
-import classNames from 'classnames';
-import ContentSection from '../ContentSection/ContentSection';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * CardSectionImages pattern it is Cards with images.
- */
-const CardSectionImages = ({ cards, theme, ...otherProps }) => {
-  const cardsWithImages = cards.filter(
-    ({ image, eyebrow, heading, copy, cta: { href } }) =>
-      image && eyebrow && heading && !copy && href
-  );
-
-  return (
-    <ContentSection
-      heading={otherProps.heading}
-      autoid={`${stablePrefix}--card-group-images-group`}
-      customClassName={classNames(`${prefix}--card-group`, {
-        [`${prefix}--card-group--${theme}`]: theme,
-      })}
-      children={[<CardGroup cards={cardsWithImages} />]}
-    />
-  );
-};
-
-CardSectionImages.propTypes = {
-  /**
-   * Color theme for pattern. Choose from:
-   *
-   * | Name    | Data Type | Description                  |
-   * | ------- | --------- | ---------------------------- |
-   * | `white` | String    | Carbon White theme           |
-   * | `g10`   | String    | Carbon Gray 10 (g10) theme   |
-   * | `g90`   | String    | Carbon Gray 90 (g90) theme   |
-   * | `g100`  | String    | Carbon Gray 100 (g100) theme |
-   */
-  theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
-
-  /**
-   * Section heading.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Cards data. Has the following structure for each items:
-   *
-   * | Name       | Required | Data Type | Description                              |
-   * | ---------- | -------- | --------- | ---------------------------------------- |
-   * | `image`    | YES      | Object    | Contains source and alt text properties. |
-   * | `eyebrow`  | YES      | String    | Eyebrow of the card.                     |
-   * | `heading`  | YES      | String    | Heading of the card.                     |
-   * | `cta.href` | YES      | String    | URI for internal or external resource.   |
-   *
-   * See example
-   * [card data](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/src/components/CardGroup/__stories__/data/cards.js).
-   */
-  cards: PropTypes.arrayOf(
-    PropTypes.exact({
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }),
-      eyebrow: PropTypes.string,
-      heading: PropTypes.string,
-      cta: PropTypes.shape({
-        href: PropTypes.string,
-      }),
-    })
-  ).isRequired,
-};
-
-export default CardSectionImages;
diff --git a/packages/react/src/components/CardSectionImages/README.stories.mdx b/packages/react/src/components/CardSectionImages/README.stories.mdx
deleted file mode 100644
index 58623582a41..00000000000
--- a/packages/react/src/components/CardSectionImages/README.stories.mdx
+++ /dev/null
@@ -1,71 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CardSectionImages from './CardSectionImages';
-
-# Card Section - Images
-
-> The Card Section - Images pattern is a collection of cards with images
-> presented in a section with a left-column header.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardSectionImages)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardSectionImages)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/card-section-images/card-section-images';
-```
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CardSectionImages } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CardSectionImages
-      cards={cards}
-      heading="Aliquam condimentum interdum"
-      theme={theme}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import CardSectionImages from '@carbon/ibmdotcom-react/es/components/CardSectionImages/CardSectionImages';
-````
-
-## Props
-
-<Props of={CardSectionImages} />
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CardSectionImages/__stories__/CardSectionImages.stories.js b/packages/react/src/components/CardSectionImages/__stories__/CardSectionImages.stories.js
deleted file mode 100755
index 66bebe1b867..00000000000
--- a/packages/react/src/components/CardSectionImages/__stories__/CardSectionImages.stories.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 cards from '../../CardGroup/__stories__/data/cards';
-import CardSectionImages from '../CardSectionImages';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import { text } from '@storybook/addon-knobs';
-
-const props = () => ({
-  heading: text('Heading (heading):', 'Aliquam condimentum interdum'),
-  cards: cards.Images,
-});
-
-export default {
-  title: 'Components/Card section images',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Card section images: Default',
-    },
-    propsSet: {
-      default: {
-        CardSectionImages: {
-          cards: cards.Images,
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-  return <CardSectionImages {...props()} theme={theme} />;
-};
diff --git a/packages/react/src/components/CardSectionImages/index.js b/packages/react/src/components/CardSectionImages/index.js
deleted file mode 100644
index 1ac96b18204..00000000000
--- a/packages/react/src/components/CardSectionImages/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CardSectionImages } from './CardSectionImages';
diff --git a/packages/react/src/components/CardSectionOffset/README.stories.mdx b/packages/react/src/components/CardSectionOffset/README.stories.mdx
deleted file mode 100644
index f69f12aa85a..00000000000
--- a/packages/react/src/components/CardSectionOffset/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Card section offset
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-card-section-offset).
diff --git a/packages/react/src/components/CardSectionOffset/__stories__/CardSectionOffset.stories.js b/packages/react/src/components/CardSectionOffset/__stories__/CardSectionOffset.stories.js
deleted file mode 100644
index 17889ef1012..00000000000
--- a/packages/react/src/components/CardSectionOffset/__stories__/CardSectionOffset.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Card section offset',
-
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-card-section-offset">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/CardSectionSimple/CardSectionSimple.js b/packages/react/src/components/CardSectionSimple/CardSectionSimple.js
deleted file mode 100755
index a83d84819ba..00000000000
--- a/packages/react/src/components/CardSectionSimple/CardSectionSimple.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { CardGroup } from '../CardGroup';
-import classNames from 'classnames';
-import ContentSection from '../ContentSection/ContentSection';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * CardSectionSimple pattern it is Cards without images.
- */
-const CardSectionSimple = ({ cards, cta, theme, ...otherProps }) => {
-  const cardsWithoutImages = cards.filter(
-    ({ image, heading, copy, cta: { href } }) =>
-      !image && heading && copy && href
-  );
-
-  return (
-    <ContentSection
-      heading={otherProps.heading}
-      autoid={`${stablePrefix}--card-group-simple-group`}
-      customClassName={classNames(`${prefix}--card-group`, {
-        [`${prefix}--card-group--${theme}`]: theme,
-      })}
-      children={[<CardGroup cards={cardsWithoutImages} cta={cta} />]}
-    />
-  );
-};
-
-CardSectionSimple.propTypes = {
-  /**
-   * Color theme for pattern. Choose from:
-   *
-   * | Name    | Data Type | Description                  |
-   * | ------- | --------- | ---------------------------- |
-   * | `white` | String    | Carbon White theme           |
-   * | `g10`   | String    | Carbon Gray 10 (g10) theme   |
-   * | `g90`   | String    | Carbon Gray 90 (g90) theme   |
-   * | `g100`  | String    | Carbon Gray 100 (g100) theme |
-   */
-  theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
-
-  /**
-   * Section heading.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Array of card data. Has the following structure for each items:
-   *
-   * | Name       | Required | Data Type | Description                            |
-   * | ---------- | -------- | --------- | -------------------------------------- |
-   * | `copy`     | YES      | String    | Copy of the card.                      |
-   * | `heading`  | YES      | String    | Heading of the card.                   |
-   * | `cta.href` | YES      | String    | URI for internal or external resource. |
-   *
-   * See example
-   * [card data](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/src/components/CardGroup/__stories__/data/cards.js).
-   */
-  cards: PropTypes.arrayOf(
-    PropTypes.exact({
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      cta: PropTypes.shape({
-        href: PropTypes.string,
-      }),
-    })
-  ).isRequired,
-
-  /**
-   * Optional CTA card for group. Always displays as last item.
-   * See [`<CardGroup>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cardgroup--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    heading: PropTypes.string,
-    cta: PropTypes.shape({
-      href: PropTypes.string,
-    }),
-  }),
-};
-export default CardSectionSimple;
diff --git a/packages/react/src/components/CardSectionSimple/README.stories.mdx b/packages/react/src/components/CardSectionSimple/README.stories.mdx
deleted file mode 100644
index b60cc7aa0ce..00000000000
--- a/packages/react/src/components/CardSectionSimple/README.stories.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import CardSectionSimple from './CardSectionSimple';
-
-# Card Section - Simple
-
-> The Card Section - Simple pattern is a collection of simple cards presented in
-> a section with a left-column header.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardSectionSimple)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/CardSectionSimple)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/card-section-simple/card-section-simple'
-```
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CardSectionSimple } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <CardSectionSimple
-      cards={cards}
-      heading="Aliquam condimentum interdum"
-      theme={theme}
-      cta={cta}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import CardSectionSimple from '@carbon/ibmdotcom-react/es/components/CardSectionSimple/CardSectionSimple';
-````
-
-## Props
-
-<Props of={CardSectionSimple} />
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js b/packages/react/src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js
deleted file mode 100644
index 4cf098e47d3..00000000000
--- a/packages/react/src/components/CardSectionSimple/__stories__/CardSectionSimple.stories.js
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 cards from '../../CardGroup/__stories__/data/cards.js';
-import CardSectionSimple from '../CardSectionSimple';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import { text } from '@storybook/addon-knobs';
-
-const props = {
-  default: () => ({
-    heading: text('Heading (heading):', 'Aliquam condimentum interdum'),
-    cards: cards.Simple,
-  }),
-  withCTA: () => ({
-    ...props.default(),
-    cta: {
-      heading: 'Top level card link',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-  }),
-};
-
-export default {
-  title: 'Components/Card section simple',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-  return <CardSectionSimple {...props.default()} theme={theme} />;
-};
-
-export const WithCTA = () => {
-  const theme =
-    document.documentElement.getAttribute('storybook-carbon-theme') || 'white';
-  return <CardSectionSimple {...props.withCTA()} theme={theme} />;
-};
-
-WithCTA.story = {
-  parameters: {
-    propsSet: {
-      default: {
-        CardSectionSimple: {
-          cta: {
-            heading: 'Top level card link',
-            cta: {
-              href: 'https://www.example.com',
-            },
-          },
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/CardSectionSimple/index.js b/packages/react/src/components/CardSectionSimple/index.js
deleted file mode 100644
index a09e7c77756..00000000000
--- a/packages/react/src/components/CardSectionSimple/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as CardSectionSimple } from './CardSectionSimple';
diff --git a/packages/react/src/components/Carousel/README.stories.mdx b/packages/react/src/components/Carousel/README.stories.mdx
deleted file mode 100644
index 75282965aa1..00000000000
--- a/packages/react/src/components/Carousel/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Carousel
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-carousel--default).
diff --git a/packages/react/src/components/Carousel/__stories__/Carousel.stories.js b/packages/react/src/components/Carousel/__stories__/Carousel.stories.js
deleted file mode 100644
index 8a5f7ee2e1d..00000000000
--- a/packages/react/src/components/Carousel/__stories__/Carousel.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Carousel',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-carousel--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/ContentBlock/ContentBlock.js b/packages/react/src/components/ContentBlock/ContentBlock.js
deleted file mode 100755
index 864881ed532..00000000000
--- a/packages/react/src/components/ContentBlock/ContentBlock.js
+++ /dev/null
@@ -1,178 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { CTA } from '../CTA';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { HorizontalRule } from '../HorizontalRule';
-import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentBlock internal component
- */
-const ContentBlock = ({
-  heading,
-  copy,
-  children,
-  customClassName,
-  cta,
-  aside,
-  border,
-}) => {
-  const classnames = cx(`${prefix}--content-block`, customClassName);
-  const content = (
-    <>
-      {copy && (
-        <div
-          className={`${prefix}--content-block__copy`}
-          dangerouslySetInnerHTML={{
-            __html: markdownToHtml(copy, { bold: false }),
-          }}
-        />
-      )}
-      <div
-        data-autoid={`${stablePrefix}--content-block__children`}
-        className={`${prefix}--content-block__children`}>
-        {children}
-      </div>
-      {cta && _renderCTA(cta, border)}
-    </>
-  );
-
-  const title = (
-    <>
-      {heading && (
-        <h2
-          data-autoid={`${stablePrefix}--content-block__heading`}
-          className={`${prefix}--content-block__heading`}>
-          {heading}
-        </h2>
-      )}
-    </>
-  );
-
-  return (
-    <div data-autoid={`${stablePrefix}--content-block`} className={classnames}>
-      {title}
-      {aside && aside.items ? _layoutWrap(content, aside) : content}
-      {border ? <HorizontalRule /> : ''}
-    </div>
-  );
-};
-
-/**
- * lays out the content with aside items in 2-1 format
- *
- * @private
- * @param {Element} content content elements
- * @param {Element} aside  aside elements
- * @returns {*} jsx cta component
- */
-const _layoutWrap = (content, aside) => (
-  <div
-    className={`${prefix}--content-layout ${prefix}--content-layout--with-complementary`}>
-    <div className={`${prefix}--content-layout__body`}>{content}</div>
-    <aside className={`${prefix}--content-layout__aside`}>{aside.items}</aside>
-  </div>
-);
-
-/**
- * sets the class name based on theme type
- *
- * @private
- * @param {object} cta a cta object
- * @returns {*} jsx cta component
- */
-function _renderCTA(cta, border) {
-  if (cta.style === 'feature') {
-    return (
-      <CTA customClassName={cx(`${prefix}--content-block__cta`)} {...cta} />
-    );
-  }
-
-  return (
-    <div
-      data-autoid={`${stablePrefix}--content-block__cta`}
-      className={cx(`${prefix}--content-block__cta-row`, {
-        [`${prefix}--content-block__cta-row-border`]: border,
-      })}>
-      <CTA
-        customClassName={`${prefix}--content-block__cta ${prefix}--content-block__cta-col`}
-        {...cta}
-      />
-    </div>
-  );
-}
-
-ContentBlock.propTypes = {
-  /**
-   * Heading text.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * Copy text.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Children elements passed into `ContentBlock` to be rendered.
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-
-  /**
-   * CTA object.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Custom className to wrap the `<ContentBlock>` component.
-   */
-  customClassName: PropTypes.string,
-
-  /**
-   * Object containing elements to be rendered within `<aside>` html element on right panel.
-   * The structure is:
-   *
-   * | Name     | Data Type | Description                                                |
-   * | -------- | --------- | ---------------------------------------------------------- |
-   * | `items`  | Element   | Elements/Components to be rendered on the right panel.     |
-   */
-  aside: PropTypes.shape({
-    items: PropTypes.element,
-  }),
-  /**
-   * border for content block.
-   */
-  border: PropTypes.bool,
-};
-
-ContentBlock.defaultProps = {
-  border: false,
-};
-export default ContentBlock;
diff --git a/packages/react/src/components/ContentBlock/README.stories.mdx b/packages/react/src/components/ContentBlock/README.stories.mdx
deleted file mode 100644
index 7670c90e406..00000000000
--- a/packages/react/src/components/ContentBlock/README.stories.mdx
+++ /dev/null
@@ -1,83 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlock from './ContentBlock';
-
-# Content Block
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlock)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlock)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the ContentBlock
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlock } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'Lorem ipsum dolor sit amet.';
-  const cta = {
-    heading: 'Lorem ipsum dolor sit amet',
-    style: 'card',
-    type: 'local',
-    href: 'https://www.example.com',
-  };
-
-  return (
-    <ContentBlock heading={heading} cta={cta}>
-      //Children goes here
-    </ContentBlock>
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the content block styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={ContentBlock} />
-
-## Stable selectors
-
-| Name                             | Description                      |
-| -------------------------------- | -------------------------------  |
-| `dds--content-block`             | Content block wrapper element    |
-| `dds--content-block__cta`        | Content block CTA element        |
-| `dds--content-block__heading`    | Content block heading element    |
-| `dds--content-block__copy`       | Content block optional copy      |
-| `dds--content-block__children`   | Wrapper for children elements    |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlock/__stories__/ContentBlock.stories.js b/packages/react/src/components/ContentBlock/__stories__/ContentBlock.stories.js
deleted file mode 100644
index a817f9aac91..00000000000
--- a/packages/react/src/components/ContentBlock/__stories__/ContentBlock.stories.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, boolean, optionsKnob } from '@storybook/addon-knobs';
-import ContentBlock from '../ContentBlock';
-import ContentGroupSimple from '../../ContentGroupSimple/ContentGroupSimple';
-import ContentGroupSimpleKnobs from '../../ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs';
-import { LinkList } from '../../LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const linkListProps = {
-  heading: 'Tutorials',
-  items: [
-    {
-      type: 'local',
-      copy: 'Learn more about Kubernetes',
-      cta: {
-        href: 'https://ibm.com',
-      },
-    },
-    {
-      type: 'local',
-      copy: 'Containerization A Complete Guide',
-      cta: {
-        href: 'https://ibm.com',
-      },
-    },
-  ],
-  totalLinks: 2,
-};
-
-const props = () => {
-  // TODO options isn't working
-  const addChildren = optionsKnob(
-    'Add children',
-    {
-      'Content group simple': 'Content group simple',
-    },
-    '',
-    { display: 'multi-select' }
-  );
-  const children = addChildren.includes('Content group simple') ? (
-    <ContentGroupSimple
-      mediaType="image"
-      mediaData={ContentGroupSimpleKnobs.mediaData.image}
-      heading="Natural language processing (NLP)"
-      items={ContentGroupSimpleKnobs.items}
-      copy={ContentGroupSimpleKnobs.copy}
-    />
-  ) : (
-    ''
-  );
-  const asideItems = {
-    items: <LinkList style="card" {...linkListProps} />,
-    border: false,
-  };
-  const showAside = boolean('Aside (aside)', false);
-  const aside = showAside ? asideItems : {};
-  const showCTA = boolean('CTA', true);
-  const cta = showCTA
-    ? {
-        cta: {
-          href: 'https://www.example.com',
-        },
-        style: 'card',
-        type: 'local',
-        heading: 'Learn more about natual language processing',
-      }
-    : {};
-  return {
-    heading: text(
-      'Heading (heading)',
-      'What is the latest news in artificial intelligence?'
-    ),
-    copy: text(
-      'Copy (copy)',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ligula, vitae finibus ante aliquet a.'
-    ),
-    children,
-    aside,
-    cta,
-    border: boolean('Border (border)', false),
-  };
-};
-
-export default {
-  title: 'Components/Content block',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content block: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story">
-          <ContentBlock {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentBlock/index.js b/packages/react/src/components/ContentBlock/index.js
deleted file mode 100644
index 65c5d133950..00000000000
--- a/packages/react/src/components/ContentBlock/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-export { default as ContentBlock } from './ContentBlock';
diff --git a/packages/react/src/components/ContentBlockCards/ContentBlockCards.js b/packages/react/src/components/ContentBlockCards/ContentBlockCards.js
deleted file mode 100644
index df8ce21140c..00000000000
--- a/packages/react/src/components/ContentBlockCards/ContentBlockCards.js
+++ /dev/null
@@ -1,111 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { CardGroup } from '../CardGroup';
-import ContentBlock from '../ContentBlock/ContentBlock';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Content Block - Cards pattern.
- */
-const ContentBlockCards = ({ heading, cards, cta }) => (
-  <div
-    data-autoid={`${stablePrefix}--content-block-cards`}
-    className={`${prefix}--content-block-cards`}>
-    <ContentBlock heading={heading} cta={cta}>
-      <div className={`${prefix}--content-block-cards__content`}>
-        <CardGroup cards={cards} />
-      </div>
-    </ContentBlock>
-  </div>
-);
-
-ContentBlockCards.propTypes = {
-  /**
-   * Main title of ContentBlockCards pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Array of card objects.
-   * Uses a sub-scheme of `<Card>`'s props for each items, like below, depending on what type of card is used:
-   *
-   * Simple:
-   *
-   * | Name       | Required | Data Type | Description                            |
-   * | ---------- | -------- | --------- | -------------------------------------- |
-   * | `copy`     | YES      | String    | Copy of the card.                      |
-   * | `heading`  | YES      | String    | Heading of the card.                   |
-   * | `cta.href` | YES      | String    | URI for internal or external resource. |
-   *
-   * Image:
-   *
-   * | Name       | Required | Data Type | Description                              |
-   * | ---------- | -------- | --------- | ---------------------------------------- |
-   * | `image`    | YES      | Object    | Contains source and alt text properties. |
-   * | `eyebrow`  | YES      | String    | Eyebrow of the card.                     |
-   * | `heading`  | YES      | String    | Heading of the card.                     |
-   * | `cta.href` | YES      | String    | URI for internal or external resource.   |
-   *
-   * See [`<CardGroup>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cardgroup--default#props) for full usage details.
-   */
-  cards: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string,
-      eyebrow: PropTypes.string,
-      copy: PropTypes.string,
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        media: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            type: PropTypes.string,
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }),
-      cta: PropTypes.shape({
-        href: PropTypes.string,
-      }),
-    })
-  ).isRequired,
-
-  /**
-   * CTA used at the end of content body. `Card` style supported.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['card']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-};
-
-export default ContentBlockCards;
diff --git a/packages/react/src/components/ContentBlockCards/README.stories.mdx b/packages/react/src/components/ContentBlockCards/README.stories.mdx
deleted file mode 100644
index fc0ef22af3c..00000000000
--- a/packages/react/src/components/ContentBlockCards/README.stories.mdx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockCards from './ContentBlockCards';
-
-# Content Block - Cards
-
-> The Content Block - Simple pattern is a decorator of `ContentBlock`, and
-> includes a single `CardGroup`.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockCards)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockCards)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-```scss
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-cards/content-block-cards';
-```
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockCards } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <ContentBlockCards heading={'Aliquam condimentum interdum'} cards={data} />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentBlockCards from '@carbon/ibmdotcom-react/es/components/ContentBlockCards/ContentBlockCards';
-````
-
-## Props
-
-<Props of={ContentBlockCards} />
-
-## Stable selectors
-
-| Name                       | Description |
-| -------------------------- | ----------- |
-| `dds--content-block-cards` | Pattern     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js b/packages/react/src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js
deleted file mode 100644
index 2301ca272ed..00000000000
--- a/packages/react/src/components/ContentBlockCards/__stories__/ContentBlockCards.stories.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-import cards from '../../CardGroup/__stories__/data/cards.js';
-import ContentBlockCards from '../ContentBlockCards';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-/**
- * @returns {object} The knobs data.
- */
-const getBaseKnobs = () => {
-  return {
-    heading: text('Heading (heading):', 'Aliquam condimentum interdum'),
-  };
-};
-
-const ctaTypes = {
-  local: 'local',
-  jump: 'jump',
-  external: 'external',
-};
-
-const props = () => ({
-  ...getBaseKnobs(),
-  cards: cards['Simple'],
-  cta: {
-    cta: {
-      href: 'https://www.ibm.com',
-    },
-    style: 'card',
-    type: select('CTA type', ctaTypes, ctaTypes.local),
-    heading: 'Lorem ipsum dolor sit ametttt',
-  },
-});
-
-export default {
-  title: 'Components/Content block cards',
-  parameters: {
-    ...readme.parameters,
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story">
-          <ContentBlockCards {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-    propsSet: {
-      default: {
-        ContentBlockCards: {
-          cards: cards['Simple'],
-        },
-      },
-    },
-  },
-};
-
-const propsWithImages = () => ({
-  ...getBaseKnobs(),
-  cards: cards['Images'],
-  cta: {
-    cta: {
-      href: 'https://www.ibm.com',
-    },
-    style: 'card',
-    type: select('CTA type', ctaTypes, ctaTypes.local),
-    heading: 'Lorem ipsum dolor sit ametttt',
-  },
-});
-
-export const WithImages = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story">
-          <ContentBlockCards {...propsWithImages()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithImages.story = {
-  name: 'With images',
-  parameters: {
-    percy: {
-      name: 'Components|Content block cards: With images',
-    },
-    propsSet: {
-      default: {
-        ContentBlockCards: {
-          cards: cards['Images'],
-        },
-      },
-    },
-  },
-};
-
-const propsWithVideos = () => ({
-  ...getBaseKnobs(),
-  cards: cards['Videos'],
-  cta: {
-    cta: {
-      href: 'https://www.ibm.com',
-    },
-    style: 'card',
-    type: select('CTA type', ctaTypes, ctaTypes.local),
-    heading: 'Lorem ipsum dolor sit ametttt',
-  },
-});
-
-export const WithVideos = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story">
-          <ContentBlockCards {...propsWithVideos()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithVideos.story = {
-  name: 'With videos',
-  parameters: {
-    percy: {
-      skip: true,
-    },
-    propsSet: {
-      default: {
-        ContentBlockCards: {
-          cards: cards['Videos'],
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/ContentBlockCards/index.js b/packages/react/src/components/ContentBlockCards/index.js
deleted file mode 100644
index 5b10f11e3de..00000000000
--- a/packages/react/src/components/ContentBlockCards/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentBlockCards } from './ContentBlockCards';
diff --git a/packages/react/src/components/ContentBlockHeadlines/ContentBlockHeadlines.js b/packages/react/src/components/ContentBlockHeadlines/ContentBlockHeadlines.js
deleted file mode 100644
index fbdb055c9dc..00000000000
--- a/packages/react/src/components/ContentBlockHeadlines/ContentBlockHeadlines.js
+++ /dev/null
@@ -1,122 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import { CTA } from '../CTA';
-import { DDS_CONTENTBLOCK_HEADLINES } from '../../internal/FeatureFlags';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import featureFlag from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/featureflag/featureflag';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentBlockHeadlines pattern
- */
-const ContentBlockHeadlines = ({ heading, copy, items }) => {
-  return featureFlag(
-    DDS_CONTENTBLOCK_HEADLINES,
-    <div
-      data-autoid={`${stablePrefix}--content-block-headlines`}
-      className={`${prefix}--content-block-headlines`}>
-      <ContentBlock heading={heading} copy={copy} border={true}>
-        <div className={`${prefix}--content-block-headlines__container`}>
-          <div className={`${prefix}--content-block-headlines__row`}>
-            <div
-              className={`${prefix}--content-block-headlines__item-container`}>
-              {renderItems(items)}
-            </div>
-          </div>
-        </div>
-      </ContentBlock>
-    </div>
-  );
-};
-
-/**
- * Renders the ContentBlockHeadlines items
- *
- * @param {Array} items array of content rows
- * @private
- * @returns {*} JSX component
- */
-function renderItems(items) {
-  const headlineItems = [];
-
-  items.forEach((item, index) => {
-    headlineItems.push(
-      <div className={`${prefix}--content-block-headlines__item`} key={index}>
-        <h4 className={`${prefix}--content-block-headlines__heading`}>
-          {item.headline}
-        </h4>
-        <p className={`${prefix}--content-block-headlines__copy`}>
-          {item.copy}
-        </p>
-        {item.cta && (
-          <CTA
-            customClassName={`${prefix}--content-block-headlines__cta-container`}
-            {...item.cta}
-          />
-        )}
-      </div>
-    );
-  });
-
-  return headlineItems;
-}
-
-ContentBlockHeadlines.propTypes = {
-  /**
-   * Heading of the content block.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Intro copy of the content block.
-   */
-  copy: PropTypes.string.isRequired,
-
-  /**
-   * Array of content items.
-   * See [CTA](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#text-link) for full usage details.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      headline: PropTypes.string.isRequired,
-      copy: PropTypes.string.isRequired,
-      cta: PropTypes.shape({
-        type: PropTypes.oneOfType([
-          PropTypes.oneOf([
-            'local',
-            'download',
-            'jump',
-            'external',
-            'video',
-            'default',
-          ]),
-          PropTypes.arrayOf(
-            PropTypes.oneOf([
-              'local',
-              'download',
-              'jump',
-              'external',
-              'video',
-              'default',
-            ])
-          ),
-        ]),
-        copy: PropTypes.string,
-        href: PropTypes.string,
-        customClassName: PropTypes.string,
-      }),
-    })
-  ).isRequired,
-};
-
-export default ContentBlockHeadlines;
diff --git a/packages/react/src/components/ContentBlockHeadlines/README.stories.mdx b/packages/react/src/components/ContentBlockHeadlines/README.stories.mdx
deleted file mode 100644
index 68680c4042c..00000000000
--- a/packages/react/src/components/ContentBlockHeadlines/README.stories.mdx
+++ /dev/null
@@ -1,86 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockHeadlines from './ContentBlockHeadlines';
-
-# Content Block - Headlines
-
-> The ContentBlockHeadlines pattern contains a collection of content items
-> consisting of a large, bold headline, copy, and a text link.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-headlines/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> content-block-headlines styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockHeadlines } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading: 'Aliquam condimentum',
-  const copy: 'Lorem ipsum dolor sit amet, _consectetur_ sellus at elit sollicitudin.',
-  const items = [
-    {
-      headline: 'Aliquam condimentum',
-      copy: 'Lorem ipsum dolor sit amet.',
-      cta: {
-        type: 'local',
-        copy: 'This is a link',
-        cta: {
-          href: 'https://example.com'
-        }
-      }
-    }
-  ];
-
-  return <ContentBlockHeadlines heading={heading} copy={copy} items={items} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentBlockHeadlines from '@carbon/ibmdotcom-react/es/components/ContentBlockHeadlines/ContentBlockHeadlines';
-````
-
-## Props
-
-<Props of={ContentBlockHeadlines} />
-
-## Stable selectors
-
-| Name                           | Description |
-| ------------------------------ | ----------- |
-| `dds--content-block-headlines` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockHeadlines/__stories__/ContentBlockHeadlines.stories.js b/packages/react/src/components/ContentBlockHeadlines/__stories__/ContentBlockHeadlines.stories.js
deleted file mode 100644
index 809e892aa62..00000000000
--- a/packages/react/src/components/ContentBlockHeadlines/__stories__/ContentBlockHeadlines.stories.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlockHeadlines from '../ContentBlockHeadlines';
-import items from './data/items.json';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import { text } from '@storybook/addon-knobs';
-
-const props = () => ({
-  heading: text('Heading', 'Aliquam condimentum'),
-  copy: text(
-    'Copy',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.'
-  ),
-  items: items.items,
-});
-
-export default {
-  title: 'Components/Content block headlines',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <ContentBlockHeadlines {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentBlockHeadlines/__stories__/data/items.json b/packages/react/src/components/ContentBlockHeadlines/__stories__/data/items.json
deleted file mode 100644
index 39856bd017b..00000000000
--- a/packages/react/src/components/ContentBlockHeadlines/__stories__/data/items.json
+++ /dev/null
@@ -1,41 +0,0 @@
-{
-  "items": [
-    {
-      "headline": "25%",
-      "copy": "Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent faster."
-    },
-    {
-      "headline": "75%",
-      "copy": "Realize up to 90 percent reduction in time spent and 75 percent reduction in IT operations expense.",
-      "cta": {
-        "type": "local",
-        "copy": "View the infographic",
-        "cta": {
-          "href": "https://example.com"
-        }
-      }
-    },
-    {
-      "headline": "50%",
-      "copy": "Build cloud native apps with microservices code generation and improved DevOps processes with up to 50 percent less effort.",
-      "cta": {
-        "type": "external",
-        "copy": "Take the assessment",
-        "cta": {
-          "href": "https://example.com"
-        }
-      }
-    },
-    {
-      "headline": "1.34M",
-      "copy": "Save 1.34M per year by optimizing your time and IT expenses.",
-      "cta": {
-        "type": "local",
-        "copy": "Calculate your savings",
-        "cta": {
-          "href": "https://example.com"
-        }
-      }
-    }
-  ]
-}
diff --git a/packages/react/src/components/ContentBlockHeadlines/index.js b/packages/react/src/components/ContentBlockHeadlines/index.js
deleted file mode 100644
index 9eb585f0361..00000000000
--- a/packages/react/src/components/ContentBlockHeadlines/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentBlockHeadlines } from './ContentBlockHeadlines';
diff --git a/packages/react/src/components/ContentBlockHorizontal/ContentBlockHorizontal.js b/packages/react/src/components/ContentBlockHorizontal/ContentBlockHorizontal.js
deleted file mode 100644
index 272c70041b9..00000000000
--- a/packages/react/src/components/ContentBlockHorizontal/ContentBlockHorizontal.js
+++ /dev/null
@@ -1,79 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import { ContentItemHorizontal } from '../ContentItemHorizontal';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentBlockHorizontal pattern.
- */
-const ContentBlockHorizontal = ({ heading, items, border }) => {
-  return (
-    <div
-      data-autoid={`${stablePrefix}--content-block-horizontal`}
-      className={`${prefix}--content-block-horizontal`}>
-      <ContentBlock heading={heading} border={border}>
-        {items.map((item, index) => (
-          <ContentItemHorizontal
-            eyebrow={item.eyebrow}
-            heading={item.heading}
-            copy={item.copy}
-            cta={item.cta}
-            key={index}
-          />
-        ))}
-      </ContentBlock>
-    </div>
-  );
-};
-
-ContentBlockHorizontal.propTypes = {
-  /**
-   * Heading of the content block.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Array of content items.
-   * See [`<ContentItemHorizontal>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-contentitemhorizontal--default#props) for full usage details.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      eyebrow: PropTypes.string,
-      heading: PropTypes.string.isRequired,
-      copy: PropTypes.string.isRequired,
-      cta: PropTypes.shape({
-        heading: PropTypes.string,
-        items: PropTypes.arrayOf(
-          PropTypes.shape({
-            type: PropTypes.oneOfType([
-              PropTypes.oneOf(['local', 'external']),
-              PropTypes.arrayOf(PropTypes.oneOf(['local', 'external'])),
-            ]),
-            copy: PropTypes.string,
-            href: PropTypes.string,
-            customClassName: PropTypes.string,
-          })
-        ).isRequired,
-        iconPlacement: PropTypes.oneOf(['left', 'right']),
-      }),
-    })
-  ).isRequired,
-
-  /**
-   * border for content block.
-   */
-  border: PropTypes.bool,
-};
-
-export default ContentBlockHorizontal;
diff --git a/packages/react/src/components/ContentBlockHorizontal/README.stories.mdx b/packages/react/src/components/ContentBlockHorizontal/README.stories.mdx
deleted file mode 100644
index 2d8fffb7dc5..00000000000
--- a/packages/react/src/components/ContentBlockHorizontal/README.stories.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockHorizontal from './ContentBlockHorizontal';
-
-# Content Block - Horizontal
-
-> The ContentBlockHorizontal block pattern contains a collection of
-> [ContentItemHorizontal](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/src/components/ContentItemHorizontal)
-> content items.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentItemHorizontal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentItemHorizontal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> content-block-horizontal styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockHorizontal } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const items = [
-    {
-      eyebrow: 'Lorem ipsum',
-      heading: 'Aliquam condimentum',
-      copy:
-        'Lorem ipsum dolor sit amet, _consectetur_ sellus at elit sollicitudin.',
-      cta: {
-        items: [
-          {
-            type: 'local',
-            copy: 'Link text',
-            cta: {
-              href: 'https://example.com',
-            },
-          },
-          {
-            type: 'external',
-            copy: 'External link text',
-            cta: {
-              href: 'https://example.com',
-            },
-          },
-        ],
-      },
-    },
-    {
-      eyebrow: 'Lorem ipsum',
-      heading: 'Aliquam condimentum',
-      copy:
-        'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
-    },
-  ];
-
-  return <ContentBlockHorizontal heading="Aliquam condimentum" items={items} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentBlockHorizontal from '@carbon/ibmdotcom-react/es/components/ContentBlockHorizontal/ContentBlockHorizontal';
-````
-
-## Props
-
-<Props of={ContentBlockHorizontal} />
-
-## Stable selectors
-
-| Name                            | Description |
-| ------------------------------- | ----------- |
-| `dds--content-block-horizontal` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockHorizontal/__stories__/ContentBlockHorizontal.stories.js b/packages/react/src/components/ContentBlockHorizontal/__stories__/ContentBlockHorizontal.stories.js
deleted file mode 100644
index 8c5ca1d7403..00000000000
--- a/packages/react/src/components/ContentBlockHorizontal/__stories__/ContentBlockHorizontal.stories.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import ContentBlockHorizontal from '../ContentBlockHorizontal';
-import items from './data/items.json';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => ({
-  heading: text('Heading (heading):', 'Aliquam condimentum'),
-  items: items.items,
-  border: boolean('Has bottom border (border):', true),
-});
-
-export default {
-  title: 'Components/Content block horizontal',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content block horizontal: Default',
-    },
-    propsSet: {
-      default: {
-        ContentBlockHorizontal: {
-          items: items.items,
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <ContentBlockHorizontal {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentBlockHorizontal/__stories__/data/items.json b/packages/react/src/components/ContentBlockHorizontal/__stories__/data/items.json
deleted file mode 100644
index 00a3ab4b9b2..00000000000
--- a/packages/react/src/components/ContentBlockHorizontal/__stories__/data/items.json
+++ /dev/null
@@ -1,66 +0,0 @@
-{
-  "items": [
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          },
-          {
-            "type": "external",
-            "copy": "External link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    },
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          },
-          {
-            "type": "external",
-            "copy": "External link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    },
-    {
-      "eyebrow": "Lorem ipsum",
-      "heading": "Aliquam condimentum",
-      "copy": "Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.",
-      "cta": {
-        "items": [
-          {
-            "type": "local",
-            "copy": "Link text",
-            "cta": {
-              "href": "https://example.com"
-            }
-          }
-        ]
-      }
-    }
-  ]
-}
diff --git a/packages/react/src/components/ContentBlockHorizontal/index.js b/packages/react/src/components/ContentBlockHorizontal/index.js
deleted file mode 100644
index d62a3456ffb..00000000000
--- a/packages/react/src/components/ContentBlockHorizontal/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-export { default as ContentBlockHorizontal } from './ContentBlockHorizontal';
diff --git a/packages/react/src/components/ContentBlockMedia/ContentBlockMedia.js b/packages/react/src/components/ContentBlockMedia/ContentBlockMedia.js
deleted file mode 100755
index 541b0caaacc..00000000000
--- a/packages/react/src/components/ContentBlockMedia/ContentBlockMedia.js
+++ /dev/null
@@ -1,218 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import { ContentGroupSimple } from '../ContentGroupSimple';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Content Block - segmented pattern.
- */
-const ContentBlockMedia = ({ copy, heading, items, cta, aside, border }) => {
-  if (cta) cta.style = 'feature';
-
-  const content = items.map((item, index) => {
-    return <ContentGroupSimple key={index} {...item} />;
-  });
-
-  return (
-    <div
-      data-autoid={`${stablePrefix}--content-block-media`}
-      className={`${prefix}--content-block-media`}>
-      <ContentBlock
-        heading={heading}
-        copy={copy}
-        cta={cta}
-        aside={aside}
-        border={border}>
-        {content}
-      </ContentBlock>
-    </div>
-  );
-};
-
-ContentBlockMedia.propTypes = {
-  /**
-   * Short copy to suppport title.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Main title of `<ContentBlockMedia>`.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Array of content items objects to render.
-   * Each items have the following structure in summary:
-   *
-   * | Name        | Required | Data Type | Description                                                                                                                                                                        |
-   * | ----------- | -------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-   * | `heading`   | YES      | String    | Describes the block that it is a part of.                                                                                                                                          |
-   * | `mediaData` | YES      | Object    | See `mediaData` below.                                                                                                                                                             |
-   * | `cta`       | NO       | Object    | See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details. |
-   *
-   * `mediaData`:
-   *
-   * | Name      | Description                                                                                                                            |
-   * | --------- | -------------------------------------------------------------------------------------------------------------------------------------- |
-   * | `heading` | Describes the media section                                                                                                            |
-   * | `image`   | See See [`<Image>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-image--default#props) for full usage details. |
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string.isRequired,
-      mediaType: PropTypes.oneOf(['image', 'video']),
-      mediaData: PropTypes.oneOfType([
-        PropTypes.shape({
-          inverse: PropTypes.bool,
-          image: PropTypes.shape({
-            classname: PropTypes.string,
-            sources: PropTypes.arrayOf(
-              PropTypes.shape({
-                src: PropTypes.string,
-                breakpoint: PropTypes.oneOfType([
-                  PropTypes.string,
-                  PropTypes.number,
-                ]),
-              })
-            ),
-            defaultSrc: PropTypes.string.isRequired,
-            alt: PropTypes.string.isRequired,
-            longDescription: PropTypes.string,
-          }).isRequired,
-          lightbox: PropTypes.bool,
-          heading: PropTypes.string,
-          copy: PropTypes.string,
-          customClassName: PropTypes.string,
-        }),
-        PropTypes.shape({
-          customClassName: PropTypes.string,
-          videoId: PropTypes.string.isRequired,
-          showCaption: PropTypes.bool,
-          inverse: PropTypes.bool,
-        }),
-      ]).isRequired,
-      items: PropTypes.arrayOf(
-        PropTypes.shape({
-          cta: PropTypes.shape({
-            style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-            type: PropTypes.oneOfType([
-              PropTypes.oneOf([
-                'jump',
-                'local',
-                'external',
-                'download',
-                'video',
-              ]),
-              PropTypes.arrayOf(
-                PropTypes.oneOf([
-                  'jump',
-                  'local',
-                  'external',
-                  'download',
-                  'video',
-                ])
-              ),
-            ]),
-            heading: PropTypes.string,
-            href: PropTypes.string,
-            customClassName: PropTypes.string,
-          }),
-          customClassName: PropTypes.string,
-          copy: PropTypes.string,
-          heading: PropTypes.string,
-          mediaType: PropTypes.oneOf(['image', 'video']),
-          mediaData: PropTypes.oneOfType([
-            PropTypes.shape({
-              inverse: PropTypes.bool,
-              image: PropTypes.shape({
-                classname: PropTypes.string,
-                sources: PropTypes.arrayOf(
-                  PropTypes.shape({
-                    src: PropTypes.string,
-                    breakpoint: PropTypes.oneOfType([
-                      PropTypes.string,
-                      PropTypes.number,
-                    ]),
-                  })
-                ),
-                defaultSrc: PropTypes.string.isRequired,
-                alt: PropTypes.string.isRequired,
-                longDescription: PropTypes.string,
-              }).isRequired,
-              lightbox: PropTypes.bool,
-              heading: PropTypes.string,
-              copy: PropTypes.string,
-              customClassName: PropTypes.string,
-            }),
-            PropTypes.shape({
-              customClassName: PropTypes.string,
-              videoId: PropTypes.string.isRequired,
-              showCaption: PropTypes.bool,
-              inverse: PropTypes.bool,
-            }),
-          ]),
-          inverse: PropTypes.bool,
-        })
-      ).isRequired,
-      cta: PropTypes.shape({
-        style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-        type: PropTypes.oneOfType([
-          PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-          PropTypes.arrayOf(
-            PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-          ),
-        ]),
-        heading: PropTypes.string,
-        href: PropTypes.string,
-        customClassName: PropTypes.string,
-      }),
-    })
-  ).isRequired,
-
-  /**
-   * Optional CTA. Must be `Feature Link`.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['feature']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    heading: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Object containing elements to be rendered within <aside> html element on right panel.
-   * The structure is:
-   *
-   * | Name     | Data Type | Description                                                |
-   * | -------- | --------- | ---------------------------------------------------------- |
-   * | `items`  | Element   | Elements/Components to be rendered on the right panel.     |
-   * | `border` | Boolean   | Determines whether bottom border of `ContentBlock` is set. |
-   */
-  aside: PropTypes.object,
-
-  /**
-   * border for content block.
-   */
-  border: PropTypes.bool,
-};
-
-export default ContentBlockMedia;
diff --git a/packages/react/src/components/ContentBlockMedia/README.stories.mdx b/packages/react/src/components/ContentBlockMedia/README.stories.mdx
deleted file mode 100644
index 258b7cb4e6b..00000000000
--- a/packages/react/src/components/ContentBlockMedia/README.stories.mdx
+++ /dev/null
@@ -1,156 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockMedia from './ContentBlockMedia';
-
-# Content Block With Media
-
-> The "Content Block - With Media" is a decorator of `ContentBlock`, which
-> includes a number of `Content Group - Simple`, and ends with a `Feature Card`.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockMedia)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockMedia)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-media/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentBlockMedia styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockMedia } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'Lorem Ipsum';
-  const copy = 'Lorem Ipsum';
-  const items={[
-    {
-      mediaType: 'image',
-      mediaData: {
-        heading: 'Lorem ipsum dolor sit amet.',
-        image: {
-          sources: [
-            {
-              src:
-                'http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-              breakpoint: 320,
-            },
-            {
-              src:
-                'http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-              breakpoint: 400,
-            },
-            {
-              src:
-                'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-              breakpoint: 672,
-            },
-          ],
-          alt: 'Image alt text',
-          defaultSrc:
-            'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-        },
-      },
-      heading: 'Lorem ipsum dolor sit amet',
-      items: [
-        {
-          heading: 'Lorem ipsum dolor sit amet.',
-          copy:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        },
-        {
-          heading: 'Lorem ipsum dolor sit amet.',
-          copy:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-        },
-      ],
-      cta: {
-        cta: {
-          href: 'https://www.example.com',
-        },
-        style: 'card',
-        type: 'local',
-        heading: 'Lorem ipsum dolor sit ametttt',
-      },
-    }
-  ]};
-
-  const cta = {
-    heading: 'Feature Link heading',
-    card: {
-      cta: {
-        type: 'local'|'jump'|'external',
-        href: 'https://www.example.com',
-      },
-      heading: 'Feature Card title',
-      image: {
-        defaultSrc: 'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-        alt: 'Image alt text',
-      },
-    }
-  };
-
-  return (
-    <ContentBlockWithMedia
-      copy={copy}
-      heading={heading}
-      items={items}
-      cta={cta}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the ContentBlockWithMedia styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ContentBlockMedia from '@carbon/ibmdotcom-react/es/components/ContentBlockMedia/ContentBlockMedia';
-```
-
-## Props
-
-<Props of={ContentBlockMedia} />
-
-## Stable selectors
-
-| Name                       | Description |
-| -------------------------- | ----------- |
-| `dds--content-block-media` | Pattern     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockMedia/__stories__/ContentBlockMedia.stories.js b/packages/react/src/components/ContentBlockMedia/__stories__/ContentBlockMedia.stories.js
deleted file mode 100755
index a48fd8a7f44..00000000000
--- a/packages/react/src/components/ContentBlockMedia/__stories__/ContentBlockMedia.stories.js
+++ /dev/null
@@ -1,217 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text, boolean } from '@storybook/addon-knobs';
-import ContentBlockMedia from '../ContentBlockMedia';
-import ContentGroupSimpleKnobs from '../../ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs';
-import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--003.jpg';
-import { LinkList } from '../../../components/LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.`;
-
-const ctaProps = {
-  heading: 'Lorem ipsum dolor sit amet',
-  card: {
-    cta: {
-      type: 'external',
-      href: 'https://www.example.com',
-    },
-    heading: 'Consectetur adipisicing elit',
-    image: {
-      defaultSrc: imgLg1x1,
-      alt: 'Image alt text',
-    },
-  },
-};
-
-const ctaChoices = {
-  CTA: ctaProps,
-  none: null,
-};
-
-const simpleHeading = ContentGroupSimpleKnobs.heading;
-const simpleMediaData = ContentGroupSimpleKnobs.mediaData.image;
-const simpleTypes = ContentGroupSimpleKnobs.types;
-const simpleMediaType = simpleTypes.image;
-const simpleItems = ContentGroupSimpleKnobs.items;
-const simpleCta = ContentGroupSimpleKnobs.cta;
-
-export default {
-  title: 'Components/Content block media',
-  parameters: {
-    ...readme.parameters,
-  },
-};
-
-const props = {
-  default: () => {
-    const heading = text(
-      'Heading (required)',
-      'Curabitur malesuada varius mi eu posuere'
-    );
-
-    const item = {
-      heading: text('Simple Group Heading (heading)', simpleHeading),
-      mediaType: simpleMediaType,
-      mediaData: simpleMediaData,
-      items: simpleItems,
-      cta: simpleCta,
-    };
-
-    const items = [item, item];
-
-    const ctaKnob = select(
-      'Feature Link (optional)',
-      ctaChoices,
-      ctaChoices.CTA
-    );
-    const cta = ctaKnob === null ? '' : ctaProps;
-
-    return {
-      copy,
-      heading,
-      items,
-      cta,
-      border: boolean('Border (border)', false),
-    };
-  },
-  withLinkList: () => {
-    const heading = text(
-      'Heading (required)',
-      'Curabitur malesuada varius mi eu posuere'
-    );
-
-    const item = {
-      heading: text('Simple Group Heading (heading)', simpleHeading),
-      mediaType: simpleMediaType,
-      mediaData: simpleMediaData,
-      items: simpleItems,
-      cta: simpleCta,
-    };
-
-    const items = [item, item];
-
-    const ctaKnob = select(
-      'Feature Link (optional)',
-      ctaChoices,
-      ctaChoices.CTA
-    );
-    const cta = ctaKnob === null ? '' : ctaProps;
-
-    const linkListProps = {
-      heading: text('Link List (heading)', 'Tutorials'),
-      items: [
-        {
-          type: 'local',
-          copy: 'Containerization A Complete Guide',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'external',
-          copy: 'Why should you use microservices and containers',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'local',
-          copy: 'Learn more about Kubernetes',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'local',
-          copy: 'Explore AI use cases in all industries',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-      ],
-      totalLinks: select('Number of links', [2, 3, 4], 2),
-    };
-
-    linkListProps.items = linkListProps.items.slice(
-      0,
-      linkListProps.totalLinks
-    );
-
-    const aside = {
-      items: <LinkList style="card" {...linkListProps} />,
-    };
-
-    return {
-      copy,
-      heading,
-      items,
-      cta,
-      aside,
-      border: boolean('Border (border)', false),
-    };
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <ContentBlockMedia {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Content block media: Default',
-    },
-    propsSet: {
-      default: {
-        ContentBlockMedia: {
-          items: [ContentGroupSimpleKnobs],
-        },
-      },
-    },
-  },
-};
-
-export const WithLinkList = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <ContentBlockMedia {...props.withLinkList()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithLinkList.story = {
-  name: 'With link list',
-  parameters: {
-    percy: {
-      name: 'Components|Content block media: With link list',
-    },
-    propsSet: {
-      default: {
-        ContentBlockMedia: {
-          items: [ContentGroupSimpleKnobs],
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/ContentBlockMedia/index.js b/packages/react/src/components/ContentBlockMedia/index.js
deleted file mode 100644
index afff88b31d3..00000000000
--- a/packages/react/src/components/ContentBlockMedia/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentBlockMedia } from './ContentBlockMedia';
diff --git a/packages/react/src/components/ContentBlockMixed/ContentBlockMixed.js b/packages/react/src/components/ContentBlockMixed/ContentBlockMixed.js
deleted file mode 100644
index a931aec978d..00000000000
--- a/packages/react/src/components/ContentBlockMixed/ContentBlockMixed.js
+++ /dev/null
@@ -1,290 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import { ContentGroupCards } from '../ContentGroupCards';
-import { ContentGroupPictograms } from '../ContentGroupPictograms';
-import { ContentGroupSimple } from '../ContentGroupSimple';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentBlockMixed Pattern.
- */
-const ContentBlockMixed = ({ heading, copy, cta, items, aside, border }) => {
-  const patterns = {
-    ContentGroupCards,
-    ContentGroupSimple,
-    ContentGroupPictograms,
-  };
-  const groups = items.map((item, index) => {
-    const Pattern = patterns[item.type];
-    return <Pattern key={index} {...item} />;
-  });
-
-  return (
-    <div
-      data-autoid={`${stablePrefix}--content-block-mixed`}
-      className={`${prefix}--content-block-mixed`}>
-      <ContentBlock
-        heading={heading}
-        copy={copy}
-        cta={cta}
-        aside={aside}
-        border={border}>
-        {groups}
-      </ContentBlock>
-    </div>
-  );
-};
-
-ContentBlockMixed.propTypes = {
-  /**
-   * Title of the content block.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Simple content item.
-   * Uses [`markdownToHtml`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/utilities/src/utilities/markdownToHtml) utility.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * The data of the content groups to render. See the following for full usage details:
-   *
-   * [`<ContentGroupCards>`](http://www.ibm.com/standards/carbon/react/?path=/docs/patterns-blocks-contentgroupcards--default#props)
-   * [`<ContentGroupSimple>`](http://www.ibm.com/standards/carbon/react/?path=/docs/patterns-blocks-contentgroupsimple--default#props)
-   * [`<ContentGroupPictograms>`](http://www.ibm.com/standards/carbon/react/?path=/docs/patterns-blocks-contentgrouppictograms--default#props)
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.oneOfType([
-      PropTypes.shape({
-        type: PropTypes.oneOf([
-          'ContentGroupCards',
-          'ContentGroupSimple',
-          'ContentGroupPictograms',
-        ]).isRequired,
-        heading: PropTypes.string.isRequired,
-        items: PropTypes.arrayOf(
-          PropTypes.shape({
-            title: PropTypes.string,
-            copy: PropTypes.string,
-            cta: PropTypes.shape({
-              href: PropTypes.string,
-            }),
-          })
-        ),
-      }),
-      PropTypes.shape({
-        type: PropTypes.oneOf([
-          'ContentGroupCards',
-          'ContentGroupSimple',
-          'ContentGroupPictograms',
-        ]).isRequired,
-        heading: PropTypes.string.isRequired,
-        mediaType: PropTypes.oneOf(['image', 'video']),
-        mediaData: PropTypes.oneOfType([
-          PropTypes.shape({
-            inverse: PropTypes.bool,
-            image: PropTypes.shape({
-              classname: PropTypes.string,
-              sources: PropTypes.arrayOf(
-                PropTypes.shape({
-                  src: PropTypes.string,
-                  breakpoint: PropTypes.oneOfType([
-                    PropTypes.string,
-                    PropTypes.number,
-                  ]),
-                })
-              ),
-              defaultSrc: PropTypes.string.isRequired,
-              alt: PropTypes.string.isRequired,
-              longDescription: PropTypes.string,
-            }).isRequired,
-            lightbox: PropTypes.bool,
-            heading: PropTypes.string,
-            copy: PropTypes.string,
-            customClassName: PropTypes.string,
-          }),
-          PropTypes.shape({
-            customClassName: PropTypes.string,
-            videoId: PropTypes.string.isRequired,
-            showCaption: PropTypes.bool,
-            inverse: PropTypes.bool,
-          }),
-        ]),
-        items: PropTypes.arrayOf(
-          PropTypes.shape({
-            cta: PropTypes.shape({
-              style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-              type: PropTypes.oneOfType([
-                PropTypes.oneOf([
-                  'jump',
-                  'local',
-                  'external',
-                  'download',
-                  'video',
-                ]),
-                PropTypes.arrayOf(
-                  PropTypes.oneOf([
-                    'jump',
-                    'local',
-                    'external',
-                    'download',
-                    'video',
-                  ])
-                ),
-              ]),
-              copy: PropTypes.string,
-              href: PropTypes.string,
-              customClassName: PropTypes.string,
-            }),
-            customClassName: PropTypes.string,
-            copy: PropTypes.string,
-            heading: PropTypes.string,
-            mediaType: PropTypes.oneOf(['image', 'video']),
-            mediaData: PropTypes.oneOfType([
-              PropTypes.shape({
-                inverse: PropTypes.bool,
-                image: PropTypes.shape({
-                  classname: PropTypes.string,
-                  sources: PropTypes.arrayOf(
-                    PropTypes.shape({
-                      src: PropTypes.string,
-                      breakpoint: PropTypes.oneOfType([
-                        PropTypes.string,
-                        PropTypes.number,
-                      ]),
-                    })
-                  ),
-                  defaultSrc: PropTypes.string.isRequired,
-                  alt: PropTypes.string.isRequired,
-                  longDescription: PropTypes.string,
-                }).isRequired,
-                lightbox: PropTypes.bool,
-                heading: PropTypes.string,
-                copy: PropTypes.string,
-                customClassName: PropTypes.string,
-              }),
-              PropTypes.shape({
-                customClassName: PropTypes.string,
-                videoId: PropTypes.string.isRequired,
-                showCaption: PropTypes.bool,
-                inverse: PropTypes.bool,
-              }),
-            ]),
-            inverse: PropTypes.bool,
-          })
-        ).isRequired,
-        cta: PropTypes.shape({
-          style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-          type: PropTypes.oneOfType([
-            PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-            PropTypes.arrayOf(
-              PropTypes.oneOf([
-                'jump',
-                'local',
-                'external',
-                'download',
-                'video',
-              ])
-            ),
-          ]),
-          copy: PropTypes.string,
-          href: PropTypes.string,
-          customClassName: PropTypes.string,
-        }),
-      }),
-      PropTypes.shape({
-        type: PropTypes.oneOf([
-          'ContentGroupCards',
-          'ContentGroupSimple',
-          'ContentGroupPictograms',
-        ]).isRequired,
-        heading: PropTypes.string.isRequired,
-        items: PropTypes.arrayOf(
-          PropTypes.shape({
-            heading: PropTypes.string.isRequired,
-            copy: PropTypes.string.isRequired,
-            cta: PropTypes.shape({
-              style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-              type: PropTypes.oneOfType([
-                PropTypes.oneOf([
-                  'jump',
-                  'local',
-                  'external',
-                  'download',
-                  'video',
-                ]),
-                PropTypes.arrayOf(
-                  PropTypes.oneOf([
-                    'jump',
-                    'local',
-                    'external',
-                    'download',
-                    'video',
-                  ])
-                ),
-              ]),
-              copy: PropTypes.string,
-              href: PropTypes.string,
-              customClassName: PropTypes.string,
-            }),
-            pictogram: PropTypes.shape({
-              src: PropTypes.object.isRequired,
-            }),
-            className: PropTypes.string,
-          })
-        ).isRequired,
-        className: PropTypes.string,
-      }),
-    ])
-  ).isRequired,
-
-  /**
-   * CTA used at the end of content body. `Card` style supported.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['card']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Object containing elements to be rendered within <aside> html element on right panel.
-   * The structure is:
-   *
-   * | Name     | Data Type | Description                                                |
-   * | -------- | --------- | ---------------------------------------------------------- |
-   * | `items`  | Element   | Elements/Components to be rendered on the right panel.     |
-   * | `border` | Boolean   | Determines whether bottom border of `ContentBlock` is set. |
-   */
-  aside: PropTypes.shape({
-    items: PropTypes.element,
-    border: PropTypes.bool,
-  }),
-
-  /**
-   * border for content block.
-   */
-  border: PropTypes.bool,
-};
-
-export default ContentBlockMixed;
diff --git a/packages/react/src/components/ContentBlockMixed/README.stories.mdx b/packages/react/src/components/ContentBlockMixed/README.stories.mdx
deleted file mode 100644
index 5cf63df22bd..00000000000
--- a/packages/react/src/components/ContentBlockMixed/README.stories.mdx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockMixed from './ContentBlockMixed';
-
-# Content Block - Mixed Groups
-
-> The "Content Block - Mixed Groups" pattern leverages the Content Block as the
-> overall container of this pattern, and allows only a few opinionated block
-> patterns to be included.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockMixed)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockMixed)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentBlockMixed styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockMixed } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'This is the content block heading.';
-  const copy = `__This__ *is* the content block intro copy.`;
-  const cta = {
-    cta: {
-      href: 'https://www.ibm.com',
-    },
-    style: 'card',
-    type: 'local',
-    heading: 'Content Block CTA heading',
-  };
-
-  const items = [
-    {
-      type: 'ContentGroupCards',
-      heading: 'ContentGroupCards heading',
-      items: [
-        {
-          heading: 'ContentGroupCards item heading',
-          copy: 'ContentGroupCards item copy.',
-          cta: {
-            href: 'https://www.ibm.com',
-          },
-        },
-      ],
-    },
-    {
-      type: 'ContentGroupPictograms',
-      heading: 'ContentGroupPictograms heading',
-      items: [
-        {
-          heading: 'ContentGroupPictograms item heading.',
-          copy: 'ContentGroupPictograms item copy.',
-          cta: {
-            cta: {
-              href: 'https://www.ibm.com',
-            },
-            type: 'local',
-            copy: 'ContentGroupPictograms CTA copy',
-          },
-          pictogram: {
-            src: Desktop,
-            'aria-label': 'Desktop',
-          },
-        },
-      ],
-    },
-    {
-      type: 'ContentGroupSimple',
-      mediaType: 'image',
-      mediaData: {
-        sources: [
-          { src: 'https://your-image.com/320/160', breakpoint: 320 },
-          { src: 'https://your-image.com/400/400', breakpoint: 400 },
-          { src: 'https://your-image.com/672/672', breakpoint: 672 },
-        ],
-        alt: 'Image alt',
-        defaultSrc: 'https://your-image.com/672/672',
-      },
-      heading: 'ContentGroupSimple heading.',
-      items: [
-        {
-          heading: 'ContentGroupSimple item heading.',
-          copy: 'ContentGroupSimple item copy.',
-        },
-      ],
-      cta: {
-        cta: {
-          href: 'https://www.ibm.com',
-        },
-        style: 'text',
-        type: 'local',
-        copy: 'ContentGroupSimple CTA copy',
-      },
-    },
-  ];
-
-  return (
-    <ContentBlockMixed heading={heading} copy={copy} cta={cta} items={items} />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentBlockMixed from '@carbon/ibmdotcom-react/es/components/ContentBlockMixed/ContentBlockMixed';
-````
-
-## Props
-
-<Props of={ContentBlockMixed} />
-
-### Stable selectors
-
-| Name                             | Description |
-| -------------------------------- | ----------- |
-| `dds--content-block-mixedgroups` | Pattern     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockMixed/__stories__/ContentBlockMixed.stories.js b/packages/react/src/components/ContentBlockMixed/__stories__/ContentBlockMixed.stories.js
deleted file mode 100755
index 3af71c0a921..00000000000
--- a/packages/react/src/components/ContentBlockMixed/__stories__/ContentBlockMixed.stories.js
+++ /dev/null
@@ -1,223 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { Desktop, Pattern, Touch } from '@carbon/pictograms-react';
-import { text, select, boolean } from '@storybook/addon-knobs';
-import ContentBlockMixed from '../ContentBlockMixed';
-import ContentGroupCardsKnobs from '../../ContentGroupCards/__stories__/data/ContentGroupCards.knobs';
-import ContentGroupSimpleKnobs from '../../ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs';
-import { LinkList } from '../../../components/LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const heading = 'Lorem ipsum dolor sit amet';
-
-const ctaTypes = {
-  local: 'local',
-  jump: 'jump',
-  external: 'external',
-};
-
-const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-    Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-    nulla quis, *consequat* libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.`;
-
-const pictogramHeading =
-  'Lorem ipsum dolor sit amet, consectetur adipiscing elit';
-
-const pictogramItems = [
-  {
-    heading: 'Aliquam condimentum interdum',
-    copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-    cta: {
-      href: 'https://www.ibm.com',
-      type: 'local',
-      copy: 'Lorem ipsum dolor',
-    },
-    pictogram: {
-      src: Desktop,
-      'aria-label': 'Desktop',
-    },
-  },
-  {
-    heading: 'Aliquam condimentum interdum',
-    copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-    cta: {
-      href: 'https://www.ibm.com',
-      type: 'local',
-      copy: 'Lorem ipsum dolor',
-    },
-    pictogram: {
-      src: Pattern,
-      'aria-label': 'Pattern',
-    },
-  },
-  {
-    heading: 'Aliquam condimentum interdum',
-    copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-    cta: {
-      href: 'https://www.ibm.com',
-      type: 'local',
-      copy: 'Lorem ipsum dolor',
-    },
-    pictogram: {
-      src: Touch,
-      'aria-label': 'Touch',
-    },
-  },
-];
-
-const simpleHeading = ContentGroupSimpleKnobs.heading;
-const simpleMediaData = ContentGroupSimpleKnobs.mediaData;
-const simpleTypes = ContentGroupSimpleKnobs.types;
-const simpleMediaType = simpleTypes.image;
-const simpleItems = ContentGroupSimpleKnobs.items;
-
-const props = {
-  default: () => {
-    const items = [
-      {
-        type: 'ContentGroupCards',
-        heading: text(
-          'Card group heading (heading):',
-          ContentGroupCardsKnobs.heading
-        ),
-        items: ContentGroupCardsKnobs.items,
-      },
-      {
-        type: 'ContentGroupPictograms',
-        heading: text('Pictogram group heading (heading):', pictogramHeading),
-        items: pictogramItems,
-      },
-      {
-        type: 'ContentGroupSimple',
-        mediaType: simpleMediaType,
-        mediaData: simpleMediaData.image,
-        heading: text('Simple group heading (heading):', simpleHeading),
-        items: simpleItems,
-      },
-    ];
-
-    return {
-      heading: heading,
-      copy: copy,
-      cta: {
-        cta: {
-          href: 'https://www.ibm.com',
-        },
-        style: 'card',
-        type: select('CTA type', ctaTypes, ctaTypes.local),
-        heading: 'Lorem ipsum dolor sit ametttt',
-      },
-      items,
-      border: boolean('Border (border)', false),
-    };
-  },
-  WithLinkList: () => {
-    const linkListProps = {
-      heading: text('link list heading:', 'Tutorials'),
-      items: [
-        {
-          type: 'local',
-          copy: 'Containerization A Complete Guide',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'external',
-          copy: 'Why should you use microservices and containers',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-      ],
-    };
-
-    const aside = {
-      items: <LinkList style="card" {...linkListProps} />,
-    };
-
-    return {
-      ...props.default(),
-      aside,
-      border: boolean('Border (border)', false),
-    };
-  },
-};
-
-export default {
-  title: 'Components/Content block mixed',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content block mixed: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <ContentBlockMixed {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    propsSet: {
-      default: {
-        ContentBlockMixed: {
-          items: [
-            {
-              ...ContentGroupSimpleKnobs,
-              type: 'ContentGroupSimple',
-            },
-          ],
-        },
-      },
-    },
-  },
-};
-
-export const WithLinkList = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <ContentBlockMixed {...props.WithLinkList()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithLinkList.story = {
-  name: 'With link list',
-  parameters: {
-    percy: {
-      name: 'Components|Content block mixed: With link list',
-    },
-    propsSet: {
-      default: {
-        ContentBlockMixed: {
-          items: [
-            {
-              ...ContentGroupSimpleKnobs,
-              type: 'ContentGroupSimple',
-            },
-          ],
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/ContentBlockMixed/index.js b/packages/react/src/components/ContentBlockMixed/index.js
deleted file mode 100644
index 615dc34fc70..00000000000
--- a/packages/react/src/components/ContentBlockMixed/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentBlockMixed } from './ContentBlockMixed';
diff --git a/packages/react/src/components/ContentBlockSegmented/ContentBlockSegmented.js b/packages/react/src/components/ContentBlockSegmented/ContentBlockSegmented.js
deleted file mode 100755
index 6c1d3c7af76..00000000000
--- a/packages/react/src/components/ContentBlockSegmented/ContentBlockSegmented.js
+++ /dev/null
@@ -1,246 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import ContentGroup from '../ContentGroup/ContentGroup';
-import ContentItem from '../ContentItem/ContentItem';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { ImageWithCaption } from '../ImageWithCaption';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import { VideoPlayer } from '../VideoPlayer';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Content Block - Segmented pattern.
- */
-const ContentBlockSegmented = ({
-  copy,
-  cta,
-  heading,
-  mediaType,
-  mediaData,
-  items,
-  aside,
-  border,
-}) => {
-  return (
-    <div
-      data-autoid={`${stablePrefix}--content-block-segmented`}
-      className={cx(`${prefix}--content-block-segmented`, {
-        [`${prefix}--content-block-segmented-border`]:
-          border || (aside && aside.border),
-      })}>
-      <ContentBlock
-        heading={heading}
-        copy={copy}
-        cta={cta}
-        aside={aside}
-        border={border}>
-        {_renderMedia(mediaType, mediaData)}
-        {_renderGroup(items)}
-      </ContentBlock>
-    </div>
-  );
-};
-
-/**
- * renders either video or image content
- *
- * @param {string} type cta type ( external | jump | local)
- * @param {object} data cta type ( external | jump | local)
- * @private
- */
-const _renderMedia = (type, data) => {
-  if (data) {
-    return (
-      <div data-autoid={`${stablePrefix}--content-block-segmented__media`}>
-        {type === 'image' && <ImageWithCaption {...data} />}
-        {type === 'video' && <VideoPlayer {...data} />}
-      </div>
-    );
-  }
-};
-
-/**
- *
- * @param {object} items content item data
- * @returns {*} JSX Component with the media
- */
-const _renderGroup = (items) =>
-  items.map((item, index) => (
-    <ContentGroup
-      heading={item.heading}
-      key={index}
-      cta={
-        item.cta && (item.cta.type === 'jump' || item.cta.type === 'local')
-          ? {
-              style: 'text',
-              ...item.cta,
-            }
-          : undefined
-      }>
-      <div
-        data-autoid={`${stablePrefix}--content-block-segmented__content-group`}>
-        <ContentItem copy={item.copy} key={index} />
-        {(item.image || item.video) && (
-          <div data-autoid={`${stablePrefix}--content-block-segmented__media`}>
-            {item.image && <ImageWithCaption {...item.image} />}
-            {item.video && <VideoPlayer {...item.video} />}
-          </div>
-        )}
-      </div>
-    </ContentGroup>
-  ));
-
-ContentBlockSegmented.propTypes = {
-  /**
-   * Main title of pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Short copy to suppport title.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Supports `text` and `card` styles.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'card']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    heading: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Determines media type (image or video).
-   */
-  mediaType: PropTypes.oneOf(['image', 'video']),
-
-  /**
-   * Media Data for either image or video.
-   * See the following components' README for more details:
-   *
-   * `mediaType="image"`: [`<ImageWithCaption>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-imagewithcaption--default#props)
-   * `mediaType="video"`: [`<VideoPlayer>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-videoplayer--default#props)
-   */
-  mediaData: PropTypes.oneOfType([
-    PropTypes.shape({
-      inverse: PropTypes.bool,
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }).isRequired,
-      lightbox: PropTypes.bool,
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      customClassName: PropTypes.string,
-    }),
-    PropTypes.shape({
-      customClassName: PropTypes.string,
-      videoId: PropTypes.string.isRequired,
-      showCaption: PropTypes.bool,
-      inverse: PropTypes.bool,
-    }),
-  ]),
-
-  /**
-   * Array of content items to render. Has the following structure for each items:
-   *
-   * | Name      | Required | Data Type | Description                                                                                                                                                                                                             |
-   * | --------- | -------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-   * | `heading` | YES      | String    | Short copy describing content item.                                                                                                                                                                                     |
-   * | `image`   | NO       | Object    | See the [`Image`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/src/components/Image) component for full usage details.                                                         |
-   * | `cta`     | NO       | Object    | `jump` and `local` types are allowed, for more information, see the [`CTA`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/src/components/CTA) component for full usage details. |
-   * | `copy`    | YES      | String    | Item content.                                                                                                                                                                                                           |
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      image: PropTypes.shape({
-        inverse: PropTypes.bool,
-        image: PropTypes.shape({
-          classname: PropTypes.string,
-          sources: PropTypes.arrayOf(
-            PropTypes.shape({
-              src: PropTypes.string,
-              breakpoint: PropTypes.oneOfType([
-                PropTypes.string,
-                PropTypes.number,
-              ]),
-            })
-          ),
-          defaultSrc: PropTypes.string.isRequired,
-          alt: PropTypes.string.isRequired,
-          longDescription: PropTypes.string,
-        }).isRequired,
-        lightbox: PropTypes.bool,
-        heading: PropTypes.string,
-        copy: PropTypes.string,
-        customClassName: PropTypes.string,
-      }),
-      cta: PropTypes.shape({
-        style: PropTypes.oneOf(['card']),
-        type: PropTypes.oneOf(['local']),
-        heading: PropTypes.string,
-        customClassName: PropTypes.string,
-      }),
-      video: PropTypes.shape({
-        customClassName: PropTypes.string,
-        videoId: PropTypes.string.isRequired,
-        showCaption: PropTypes.bool,
-        inverse: PropTypes.bool,
-      }),
-    })
-  ).isRequired,
-
-  /**
-   * Object containing elements to be rendered within <aside> html element on right panel.
-   * The structure is:
-   *
-   * | Name     | Data Type | Description                                                |
-   * | -------- | --------- | ---------------------------------------------------------- |
-   * | `items`  | Element   | Elements/Components to be rendered on the right panel.     |
-   * | `border` | Boolean   | Determines whether bottom border of `ContentBlock` is set. |
-   */
-  aside: PropTypes.shape({
-    items: PropTypes.element,
-    border: PropTypes.bool,
-  }),
-
-  /**
-   * Boolean to show border without aside elements.
-   */
-  border: PropTypes.bool,
-};
-
-export default ContentBlockSegmented;
diff --git a/packages/react/src/components/ContentBlockSegmented/README.stories.mdx b/packages/react/src/components/ContentBlockSegmented/README.stories.mdx
deleted file mode 100644
index 4a9d9c8a80d..00000000000
--- a/packages/react/src/components/ContentBlockSegmented/README.stories.mdx
+++ /dev/null
@@ -1,122 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockSegmented from './ContentBlockSegmented';
-
-# Content Block - Segmented
-
-> The Content Block - Segmented pattern allows for larger groups of content to
-> be presented at once.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockSegmented)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockSegmented)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-segmented/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentBlockSegmented styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockSegmented } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const mediaType = 'image';
-  const mediaData = {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    image: {
-      sources: [
-        {
-          src:
-            'http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 320,
-        },
-        {
-          src:
-            'http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 400,
-        },
-        {
-          src:
-            'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 672,
-        },
-      ],
-      alt: 'Image alt text',
-      defaultSrc:
-        'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-    },
-  };
-  const cta = {
-    cta: {
-      href: 'https://www.ibm.com',
-    },
-    style: 'card',
-    type: 'local',
-    heading: 'Content Block CTA heading',
-  };
-
-  return (
-    <ContentBlockSegmented
-      copy={copy}
-      cta={cta}
-      heading={heading}
-      mediaType={mediaType}
-      mediaData={mediaData}
-      items={items}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ContentBlockSegmented from '@carbon/ibmdotcom-react/es/components/ContentBlockSegmented/ContentBlockSegmented';
-```
-
-## Props
-
-<Props of={ContentBlockSegmented} />
-
-## Stable selectors
-
-| Name                                  | Description   |
-| ------------------------------------- | ------------- |
-| `dds--content-block-segmented`        | Pattern       |
-| `dds--content-block-segmented__media` | Media element |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js b/packages/react/src/components/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js
deleted file mode 100755
index 848e7024af9..00000000000
--- a/packages/react/src/components/ContentBlockSegmented/__stories__/ContentBlockSegmented.stories.js
+++ /dev/null
@@ -1,316 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-import ContentBlockSegmented from '../ContentBlockSegmented';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
-import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
-import { LinkList } from '../../../components/LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-const borderOptions = {
-  'Without border': false,
-  // eslint-disable-next-line max-len
-  'With border': true,
-};
-
-const image = {
-  heading: 'Mauris iaculis eget dolor nec hendrerit.',
-  image: {
-    sources: [
-      {
-        src: imgSm16x9,
-        breakpoint: 320,
-      },
-      {
-        src: imgMd16x9,
-        breakpoint: 400,
-      },
-      {
-        src: imgLg16x9,
-        breakpoint: 672,
-      },
-    ],
-    alt: 'Image alt text',
-    defaultSrc: imgLg16x9,
-  },
-};
-
-const ctaStyles = {
-  text: 'text',
-  card: 'card',
-};
-
-const ctaTypes = {
-  external: 'external',
-  jump: 'jump',
-  local: 'local',
-};
-
-const video = {
-  videoId: '1_9h94wo6b',
-  showCaption: true,
-};
-
-const defaultItems = [
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
-    cta: {
-      type: 'local',
-      copy: 'Lorem Ipsum dolor sit',
-      href: 'https://example.com',
-    },
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    video,
-    copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
-    cta: {
-      type: 'local',
-      copy: 'Lorem Ipsum dolor sit',
-      href: 'https://example.com',
-    },
-  },
-];
-
-const defaultWithAsideElementsItems = [
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    image,
-    copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
-  },
-];
-
-/**
- * @returns {object} The knobs data.
- */
-const getBaseKnobs = () => {
-  return {
-    heading: text('Heading (heading):', 'Lorem ipsum dolor sit amet.'),
-    copy: text(
-      'Copy (copy):',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.'
-    ),
-  };
-};
-
-/**
- * @returns {object} The knobs data.
- */
-const getCTAKnobs = () => {
-  return {
-    cta: {
-      cta: {
-        href: 'https://www.example.com',
-      },
-      style: select('CTA style (style):', ctaStyles, ctaStyles.card),
-      type: select('CTA type (type):', ctaTypes, ctaTypes.local),
-      heading: 'Lorem ipsum dolor',
-      copy: 'Lorem ipsum dolor',
-    },
-  };
-};
-
-const props = {
-  default: () => {
-    const knobs = getBaseKnobs();
-    const ctaKnobs = getCTAKnobs();
-    if (ctaKnobs.cta.style === 'card') {
-      delete ctaKnobs.cta.copy;
-    } else {
-      delete ctaKnobs.cta.heading;
-    }
-
-    return {
-      ...knobs,
-      ...ctaKnobs,
-      items: defaultItems,
-      border: select(
-        'Container bottom border',
-        borderOptions,
-        borderOptions['With border']
-      ),
-    };
-  },
-  WithLinkList: () => {
-    const knobs = getBaseKnobs();
-    const items = defaultItems;
-
-    const linkListProps = {
-      heading: text('Link list heading (heading):', 'Tutorials'),
-      items: [
-        {
-          type: 'local',
-          copy: 'Containerization A Complete Guide',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'external',
-          copy: 'Why should you use microservices and containers',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'local',
-          copy: 'Learn more about Kubernetes',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'local',
-          copy: 'Explore AI use cases in all industries',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-      ],
-      totalLinks: select('Number of links', [2, 3, 4], 2),
-    };
-
-    linkListProps.items = linkListProps.items.slice(
-      0,
-      linkListProps.totalLinks
-    );
-
-    const ctaKnobs = getCTAKnobs();
-    if (ctaKnobs.cta.style === 'card') {
-      delete ctaKnobs.cta.copy;
-    } else {
-      delete ctaKnobs.cta.heading;
-    }
-
-    const aside = {
-      items: <LinkList style="card" {...linkListProps} />,
-      border: select(
-        'Container bottom border',
-        borderOptions,
-        borderOptions['With border']
-      ),
-    };
-
-    const result = {
-      ...knobs,
-      ...ctaKnobs,
-      heading: 'Lorem ipsum dolor sit amet.',
-      // The URL in the JSON from the knob gets `&amp`
-      items: items.map((item) => {
-        return {
-          ...item,
-          image: !item.image
-            ? undefined
-            : {
-                ...item.image,
-                image: !item.image.image
-                  ? undefined
-                  : {
-                      ...item.image.image,
-                      sources: item.image.image.sources?.map((item) => ({
-                        ...item,
-                        src: item.src?.replace(/&amp;/g, '&'),
-                      })),
-                      defaultSrc: item.image.image.defaultSrc?.replace(
-                        /&amp;/g,
-                        '&'
-                      ),
-                    },
-              },
-        };
-      }),
-      aside,
-    };
-
-    return result;
-  },
-};
-
-export default {
-  title: 'Components/Content block segmented',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content block segmented: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className={`${prefix}--grid`}>
-      <div className="bx--row">
-        <div className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          <ContentBlockSegmented
-            {...props.default()}
-            mediaType="image"
-            mediaData={image}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    propsSet: {
-      default: {
-        ContentBlockSegmented: {
-          items: defaultItems,
-        },
-      },
-    },
-  },
-};
-
-export const WithLinkList = () => {
-  return (
-    <div className={`${prefix}--grid`}>
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <ContentBlockSegmented
-            {...props.WithLinkList()}
-            mediaType="image"
-            mediaData={image}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithLinkList.story = {
-  name: 'With link list',
-  parameters: {
-    percy: {
-      name: 'Components|Content block segmented: With link list',
-    },
-    propsSet: {
-      default: {
-        ContentBlockSegmented: {
-          items: defaultWithAsideElementsItems,
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/ContentBlockSegmented/__tests__/ContentBlockSegmented.test.js b/packages/react/src/components/ContentBlockSegmented/__tests__/ContentBlockSegmented.test.js
deleted file mode 100644
index f3d2ee79596..00000000000
--- a/packages/react/src/components/ContentBlockSegmented/__tests__/ContentBlockSegmented.test.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlockSegmented from '../ContentBlockSegmented';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-describe('ContentBlockSegmented', () => {
-  it('renders as expected', () => {
-    const items = [
-      {
-        heading: 'Lorem ipsum dolor sit amet.',
-        copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.`,
-        cta: {
-          type: 'local',
-          copy: 'Lorem Ipsum dolor sit',
-          href: 'https://example.com',
-        },
-      },
-    ];
-
-    const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-      Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-      nulla quis, *consequat* libero. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.`;
-
-    const image = {
-      heading: 'Mauris iaculis eget dolor nec hendrerit.',
-      image: {
-        sources: [
-          {
-            src: 'https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-            breakpoint: 320,
-          },
-          {
-            src: 'https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-            breakpoint: 400,
-          },
-          {
-            src: 'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-            breakpoint: 672,
-          },
-        ],
-        alt: 'Image alt text',
-        defaultSrc:
-          'https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-      },
-    };
-
-    const component = shallow(
-      <ContentBlockSegmented
-        items={items}
-        heading="Lorem ipsum dolor sit amet"
-        copy={copy}
-        mediaType="image"
-        mediaData={image}
-      />
-    );
-
-    expect(component.find('.bx--content-block-segmented')).toHaveLength(1);
-    expect(
-      component.find('[data-autoid="dds--content-block-segmented__media"]')
-    ).toHaveLength(1);
-    expect(
-      component.find(
-        '[data-autoid="dds--content-block-segmented__content-group"]'
-      )
-    ).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/ContentBlockSegmented/index.js b/packages/react/src/components/ContentBlockSegmented/index.js
deleted file mode 100755
index c1e844115bc..00000000000
--- a/packages/react/src/components/ContentBlockSegmented/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentBlockSegmented } from './ContentBlockSegmented';
diff --git a/packages/react/src/components/ContentBlockSimple/ContentBlockSimple.js b/packages/react/src/components/ContentBlockSimple/ContentBlockSimple.js
deleted file mode 100644
index 0ba5cfbb891..00000000000
--- a/packages/react/src/components/ContentBlockSimple/ContentBlockSimple.js
+++ /dev/null
@@ -1,150 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import ContentItem from '../ContentItem/ContentItem';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { ImageWithCaption } from '../ImageWithCaption';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import { VideoPlayer } from '../VideoPlayer';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Content Block - Simple pattern.
- */
-const ContentBlockSimple = ({
-  copy,
-  heading,
-  mediaType,
-  mediaData,
-  cta,
-  aside,
-}) => (
-  <div
-    data-autoid={`${stablePrefix}--content-block-simple`}
-    className={`${prefix}--content-block-simple`}>
-    <ContentBlock heading={heading} cta={cta} aside={aside}>
-      <div className={`${prefix}--content-block-simple__content`}>
-        <ContentItem copy={copy} />
-        {_renderMedia(mediaType, mediaData)}
-      </div>
-    </ContentBlock>
-  </div>
-);
-
-/**
- * renders either video or image content
- *
- * @param {string} type cta type ( external | jump | local)
- * @param {object} data cta type ( external | jump | local)
- * @private
- */
-const _renderMedia = (type, data) => {
-  if (data) {
-    return (
-      <div
-        data-autoid={`${stablePrefix}--content-block-simple__media`}
-        className={cx({
-          [`${prefix}--content-block-simple__media-video`]: type === 'video',
-          [`${prefix}--content-block-simple__media-image`]: type === 'image',
-        })}>
-        {type === 'image' && <ImageWithCaption {...data} />}
-        {type === 'video' && <VideoPlayer {...data} />}
-      </div>
-    );
-  }
-};
-
-ContentBlockSimple.propTypes = {
-  /**
-   * Simple content item.
-   * Uses [`markdownToHtml`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/utilities/src/utilities/markdownToHtml) utility.
-   */
-  copy: PropTypes.string.isRequired,
-
-  /**
-   * Title of the content block.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Determines media type (image or video).
-   */
-  mediaType: PropTypes.string,
-
-  /**
-   * Media Data for either image or video.
-   * See the following components' README for more details:
-   *
-   * `mediaType="image"`: [`<ImageWithCaption>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-imagewithcaption--default#props)
-   * `mediaType="video"`: [`<VideoPlayer>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-videoplayer--default#props)
-   */
-  mediaData: PropTypes.oneOfType([
-    PropTypes.shape({
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }).isRequired,
-      lightbox: PropTypes.bool,
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      customClassName: PropTypes.string,
-    }),
-    PropTypes.shape({
-      customClassName: PropTypes.string,
-      videoId: PropTypes.string.isRequired,
-      showCaption: PropTypes.bool,
-    }),
-  ]),
-
-  /**
-   * CTA used at the end of content body.
-   * `Text` and `Card` styles supported.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'card']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    heading: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Object containing elements to be rendered within <aside> html element on right panel.
-   * The structure is:
-   *
-   * | Name     | Data Type | Description                                                |
-   * | -------- | --------- | ---------------------------------------------------------- |
-   * | `items`  | Element   | Elements/Components to be rendered on the right panel.     |
-   * | `border` | Boolean   | Determines whether bottom border of `ContentBlock` is set. |
-   */
-  aside: PropTypes.object,
-};
-
-export default ContentBlockSimple;
diff --git a/packages/react/src/components/ContentBlockSimple/README.stories.mdx b/packages/react/src/components/ContentBlockSimple/README.stories.mdx
deleted file mode 100644
index 36c60ab9540..00000000000
--- a/packages/react/src/components/ContentBlockSimple/README.stories.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentBlockSimple from './ContentBlockSimple';
-
-# Content Block - Simple
-
-> The Content Block - Simple pattern is a decorator of `ContentBlock`, and
-> includes a single `ContentItem`, optional media (image), and ends with a CTA.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockSimple)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockSimple)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-simple/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentBlockSimple styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentBlockSimple } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const mediaType = 'image';
-  const mediaData = {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    image: {
-      sources: [
-        {
-          src:
-            'http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 320,
-        },
-        {
-          src:
-            'http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 400,
-        },
-        {
-          src:
-            'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 672,
-        },
-      ],
-      alt: 'Image alt text',
-      defaultSrc:
-        'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-    },
-  };
-
-  return (
-    <ContentBlockSimple
-      inverse={false}
-      heading={heading}
-      copy={copy}
-      mediaType={mediaType}
-      mediaData={mediaData}
-      cta={cta}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the ContentBlockSimple styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ContentBlockSimple from '@carbon/ibmdotcom-react/es/components/ContentBlockSimple/ContentBlockSimple';
-```
-
-## Props
-
-<Props of={ContentBlockSimple} />
-
-## Stable selectors
-
-| Name                                 | Description     |
-| ------------------------------------ | --------------- |
-| `dds--content-block-simple`          | Pattern         |
-| `dds--content-block-simple__content` | Pattern content |
-| `dds--content-block-simple__media`   | Media content   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js b/packages/react/src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js
deleted file mode 100755
index 0ae41bd2198..00000000000
--- a/packages/react/src/components/ContentBlockSimple/__stories__/ContentBlockSimple.stories.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text, boolean } from '@storybook/addon-knobs';
-import ContentBlockSimple from '../ContentBlockSimple';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';
-import imgSm1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
-import { LinkList } from '../../../components/LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const ctaStyles = {
-  text: 'text',
-  card: 'card',
-};
-
-const ctaTypes = {
-  local: 'local',
-  jump: 'jump',
-  external: 'external',
-};
-
-const image = {
-  heading: 'Mauris iaculis eget dolor nec hendrerit.',
-  image: {
-    sources: [
-      {
-        src: imgSm1x1,
-        breakpoint: 320,
-      },
-      {
-        src: imgMd16x9,
-        breakpoint: 400,
-      },
-      {
-        src: imgLg16x9,
-        breakpoint: 672,
-      },
-    ],
-    alt: 'Image alt text',
-    defaultSrc: imgLg16x9,
-  },
-};
-
-const video = {
-  videoId: '1_9h94wo6b',
-  showCaption: true,
-};
-
-const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    1. list item 1a
-  1. list item 2
-     - list item 2a
-`;
-
-/**
- * @returns {object} The knobs data.
- */
-const getBaseKnobs = () => {
-  return {
-    copy,
-    heading: text(
-      'Heading (required)',
-      'Curabitur malesuada varius mi eu posuere'
-    ),
-    cta: {
-      cta: {
-        href: 'https://www.ibm.com',
-      },
-      style: select('CTA style', ctaStyles, ctaStyles.card),
-      type: select('CTA type', ctaTypes, ctaTypes.local),
-      heading: 'Lorem ipsum dolor sit ametttt',
-    },
-  };
-};
-
-const props = {
-  default: () => {
-    const knobs = getBaseKnobs();
-    return {
-      ...knobs,
-    };
-  },
-  withLinkList: () => {
-    const linkListProps = {
-      heading: text('Link list heading (heading):', 'Tutorials'),
-      items: [
-        {
-          type: 'local',
-          copy: 'Containerization A Complete Guide',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-        {
-          type: 'external',
-          copy: 'Why should you use microservices and containers',
-          cta: {
-            href: 'https://ibm.com',
-          },
-        },
-      ],
-    };
-    const knobs = getBaseKnobs();
-    return {
-      ...knobs,
-      aside: {
-        items: <LinkList style="card" {...linkListProps} />,
-        border: boolean('border', false),
-      },
-    };
-  },
-};
-
-export default {
-  title: 'Components/Content block simple',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content block simple: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 content-block-story">
-          <ContentBlockSimple {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const WithImage = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 content-block-story">
-          <ContentBlockSimple
-            {...props.default()}
-            mediaType="image"
-            mediaData={image}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithImage.story = {
-  name: 'With image',
-  parameters: {
-    percy: {
-      name: 'Components|Content block simple: With image',
-    },
-  },
-};
-
-export const WithVideo = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4 content-block-story">
-          <ContentBlockSimple
-            {...props.default()}
-            mediaType="video"
-            mediaData={video}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithVideo.story = {
-  name: 'With video',
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const WithLinkList = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 content-block-story">
-          <ContentBlockSimple
-            {...props.withLinkList()}
-            mediaType="image"
-            mediaData={image}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithLinkList.story = {
-  name: 'With link list',
-  parameters: {
-    percy: {
-      name: 'Components|Content block simple: With link list',
-    },
-  },
-};
diff --git a/packages/react/src/components/ContentBlockSimple/index.js b/packages/react/src/components/ContentBlockSimple/index.js
deleted file mode 100644
index facee167e14..00000000000
--- a/packages/react/src/components/ContentBlockSimple/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentBlockSimple } from './ContentBlockSimple';
diff --git a/packages/react/src/components/ContentGroup/ContentGroup.js b/packages/react/src/components/ContentGroup/ContentGroup.js
deleted file mode 100644
index 9fd6bd116e7..00000000000
--- a/packages/react/src/components/ContentGroup/ContentGroup.js
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 classNames from 'classnames';
-import { CTA } from '../CTA';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentArrayGroup Component, for use with content arrays
- *
- * @param {object} props props object
- * @param {*} props.children JSX Components
- * @param {string} props.heading  Heading string
- * @param {string} props.className optional class to be applied to the containing node
- * @param {*} props.cta CTA component props object
- * @returns {*} JSX ContentGroup component
- */
-const ContentGroup = ({ children, heading, customClassName, cta, copy }) => {
-  const className = classNames(`${prefix}--content-group`, customClassName);
-
-  return (
-    <div className={className} data-autoid={`${stablePrefix}--content-group`}>
-      <h3
-        data-autoid={`${stablePrefix}--content-group__title`}
-        className={`${prefix}--content-group__title`}>
-        {heading}
-      </h3>
-      {copy && (
-        <div
-          className={`${prefix}--content-group__copy`}
-          dangerouslySetInnerHTML={{
-            __html: markdownToHtml(copy, { bold: false }),
-          }}
-        />
-      )}
-      <div
-        data-autoid={`${stablePrefix}--content-group__children`}
-        className={classNames(
-          `${prefix}--content-group__col`,
-          `${prefix}--content-group__children`
-        )}>
-        {children}
-      </div>
-      {cta && (
-        <div
-          data-autoid={`${stablePrefix}--content-group__cta`}
-          className={`${prefix}--content-group__cta-row`}>
-          <CTA customClassName={`${prefix}--content-group__cta`} {...cta} />
-        </div>
-      )}
-    </div>
-  );
-};
-
-ContentGroup.propTypes = {
-  /**
-   * Heading text.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * Copy text (enabled for the `markdownToHtml` utility)
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Container for other components.
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-
-  /**
-   * Class to be applied to the containing node.
-   */
-  customClassName: PropTypes.string,
-
-  /**
-   * CTA. Allowed style is `card` and type is `local`.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    type: PropTypes.oneOf(['local']),
-    copy: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-};
-
-export default ContentGroup;
diff --git a/packages/react/src/components/ContentGroup/README.stories.mdx b/packages/react/src/components/ContentGroup/README.stories.mdx
deleted file mode 100644
index 8af26783030..00000000000
--- a/packages/react/src/components/ContentGroup/README.stories.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentGroup from './ContentGroup';
-
-# Content Group
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroup)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroup)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/internal/content-group/content-group';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the ContentGroup
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentGroup } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'Lorem ipsum dolor sit amet.';
-  const cta = {
-    title: 'Lorem ipsum dolor sit amet',
-    href: 'https://www.example.com',
-  };
-
-  return (
-    <ContentGroup heading={heading} cta={cta}>
-      //Children goes here
-    </ContentGroup>
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the content group styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={ContentGroup} />
-
-## Stable selectors
-
-| Name                           | Description                    |
-| ------------------------------ | -----------------------------  |
-| `dds--content-group`           | Content group wrapper element  |
-| `dds--content-group__cta`      | Content group CTA element      |
-| `dds--content-group__title`    | Content group title element    |
-| `dds--content-group__copy`     | Content group optional copy    |
-| `dds--content-group__children` | Wrapper for children elements  |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentGroup/__stories__/ContentGroup.stories.js b/packages/react/src/components/ContentGroup/__stories__/ContentGroup.stories.js
deleted file mode 100644
index 83f20ac4237..00000000000
--- a/packages/react/src/components/ContentGroup/__stories__/ContentGroup.stories.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, boolean, optionsKnob } from '@storybook/addon-knobs';
-import ContentGroup from '../ContentGroup';
-import ContentItem from '../../ContentItem/ContentItem';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--003.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--003.jpg';
-import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--003.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => {
-  const showCTA = boolean('CTA', true);
-  const cta = showCTA
-    ? {
-        cta: {
-          href: 'https://www.example.com',
-        },
-        style: 'card',
-        type: 'local',
-        heading: 'Learn more about natual language processing',
-      }
-    : {};
-  return {
-    heading: text('Heading:', 'Natural language processing (NLP)'),
-    copy: text(
-      'Copy:',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at, molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ligula, vitae finibus ante aliquet a.'
-    ),
-    addChildren: optionsKnob(
-      'Add children:',
-      {
-        'Content item simple': 'Content item simple',
-        'Content item with image': 'Content item with image',
-        'Content item with video': 'Content item with video',
-      },
-      '',
-      { display: 'multi-select' }
-    ),
-    contentItemCta: {
-      style: 'text',
-      type: 'local',
-      href: 'https://www.example.com',
-      copy: 'Read more about NLP',
-    },
-    mediaData: {
-      image: {
-        heading: 'Image caption text',
-        image: {
-          sources: [
-            {
-              src: imgSm16x9,
-              breakpoint: 320,
-            },
-            {
-              src: imgMd16x9,
-              breakpoint: 400,
-            },
-            {
-              src: imgLg16x9,
-              breakpoint: 672,
-            },
-          ],
-          alt: 'Image alt text',
-          defaultSrc: imgLg16x9,
-        },
-      },
-      video: {
-        videoId: '1_9h94wo6b',
-        showCaption: true,
-      },
-    },
-    cta,
-  };
-};
-
-export default {
-  title: 'Components/Content group',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content group: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const { mediaData, contentItemCta, addChildren } = props() ?? {};
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          <ContentGroup
-            {...props()}
-            children={[
-              addChildren.includes('Content item simple') ? (
-                <ContentItem
-                  heading="Natural language understanding"
-                  copy='This area of NLP takes "real world" text and applies a symbolic system for a machine to interpret its meaning, using formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic tools.'
-                />
-              ) : (
-                ''
-              ),
-              addChildren.includes('Content item with image') ? (
-                <ContentItem
-                  heading="Natural language understanding"
-                  mediaType="image"
-                  mediaData={mediaData.image}
-                  copy='This area of NLP takes "real world" text and applies a symbolic system for a machine to interpret its meaning, using formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic tools.'
-                  cta={contentItemCta}
-                />
-              ) : (
-                ''
-              ),
-              addChildren.includes('Content item with video') ? (
-                <ContentItem
-                  heading="Natural language understanding"
-                  mediaType="video"
-                  mediaData={mediaData.video}
-                  copy='This area of NLP takes "real world" text and applies a symbolic system for a machine to interpret its meaning, using formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic tools.'
-                  cta={contentItemCta}
-                />
-              ) : (
-                ''
-              ),
-            ]}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentGroup/index.js b/packages/react/src/components/ContentGroup/index.js
deleted file mode 100644
index 5fe460ad372..00000000000
--- a/packages/react/src/components/ContentGroup/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-export { default as ContentGroup } from './ContentGroup';
diff --git a/packages/react/src/components/ContentGroupBanner/README.stories.mdx b/packages/react/src/components/ContentGroupBanner/README.stories.mdx
deleted file mode 100644
index 93c660528c7..00000000000
--- a/packages/react/src/components/ContentGroupBanner/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Content group banner
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-group-banner).
diff --git a/packages/react/src/components/ContentGroupBanner/__stories__/ContentGroupBanner.stories.js b/packages/react/src/components/ContentGroupBanner/__stories__/ContentGroupBanner.stories.js
deleted file mode 100644
index fdfd5e469af..00000000000
--- a/packages/react/src/components/ContentGroupBanner/__stories__/ContentGroupBanner.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Content group banner',
-
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-group-banner">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/ContentGroupCards/ContentGroupCards.js b/packages/react/src/components/ContentGroupCards/ContentGroupCards.js
deleted file mode 100644
index 9b4c29cd16c..00000000000
--- a/packages/react/src/components/ContentGroupCards/ContentGroupCards.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { Card } from '../Card';
-import ContentGroup from '../ContentGroup/ContentGroup';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-const { stablePrefix } = ddsSettings;
-/**
- * Card Array Component.
- */
-const ContentGroupCards = ({ heading, items, copy }) => {
-  return (
-    <section
-      data-autoid={`${stablePrefix}--content-group-cards`}
-      className={`${prefix}--content-group-cards`}>
-      <ContentGroup heading={heading} copy={copy}>
-        <div
-          data-autoid={`${stablePrefix}--content-group-cards-group`}
-          className={`${prefix}--content-group-cards-group ${prefix}--grid--condensed`}>
-          <div className={`${prefix}--content-group-cards__row`}>
-            {_renderCards(items)}
-          </div>
-        </div>
-      </ContentGroup>
-    </section>
-  );
-};
-
-/**
- * Renders the cards based on the ContentArray entries
- *
- * @param {Array} items Content object array
- * @returns {*} CardArrayItem JSX objects
- */
-const _renderCards = (items) =>
-  items.map((elem, index) => (
-    <div
-      data-autoid={`${stablePrefix}--content-group-cards-item`}
-      className={`${prefix}--content-group-cards-item__col`}
-      key={index}
-      role="region">
-      <Card
-        customClassName={`${prefix}--content-group-cards-item`}
-        heading={elem.heading}
-        copy={elem.copy}
-        cta={{
-          href: elem.cta.href,
-          icon: {
-            src: ArrowRight20,
-          },
-        }}
-        aria-label={elem.heading}
-      />
-    </div>
-  ));
-
-ContentGroupCards.propTypes = {
-  /**
-   * Main heading of the pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Copy text (enabled for the `markdownToHtml` utility)
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Array of content group objects. Has the following structure:
-   *
-   * | Name      | Data Type | Description                                                |
-   * | --------- | --------- | ---------------------------------------------------------- |
-   * | `heading` | String    | Title for the Card.                                        |
-   * | `copy`    | String    | Copy for the Card.                                         |
-   * | `cta`     | Object    | Object containing target and href of cta. See `cta` below. |
-   *
-   * `cta`:
-   *
-   * | Name   | Data Type | Description                       |
-   * | ------ | --------- | --------------------------------- |
-   * | `href` | String    | Url of the Content Card item cta. |
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      heading: PropTypes.string,
-      cta: PropTypes.shape({
-        href: PropTypes.string,
-      }),
-    })
-  ),
-};
-
-export default ContentGroupCards;
diff --git a/packages/react/src/components/ContentGroupCards/README.stories.mdx b/packages/react/src/components/ContentGroupCards/README.stories.mdx
deleted file mode 100644
index c1638aa3a50..00000000000
--- a/packages/react/src/components/ContentGroupCards/README.stories.mdx
+++ /dev/null
@@ -1,118 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentGroupCards from './ContentGroupCards';
-
-# Content Group Cards
-
-> The Content Group Cards pattern is to be utilized within IBM.com.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroupCards)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroupCards)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-cards/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentGroupCards styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentGroupCards } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-const heading = 'Lorem ipsum dolor sit amet.';
-
-const items = [
-  {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    cta: {
-      href: 'https://www.example.com',
-    },
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    cta: {
-      href: 'https://www.example.com',
-    },
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    cta: {
-      href: 'https://www.example.com',
-    },
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-    cta: {
-      href: 'https://www.example.com',
-    },
-  },
-];
-
-function App() {
-  return <ContentGroupCards heading={heading} content={content} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the ContentGroupCards styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentGroupCards from '@carbon/ibmdotcom-react/es/components/ContentGroupCards/ContentGroupCards';
-````
-
-## Props
-
-<Props of={ContentGroupCards} />
-
-## Stable selectors
-
-| Name                             | Description                 |
-| -------------------------------- | --------------------------- |
-| `dds--content-group-cards`       | Component                   |
-| `dds--content-group__copy`       | Content group optional copy |
-| `dds--content-group-cards-group` | Component                   |
-| `dds--content-group-cards-item`  | Component                   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentGroupCards/__stories__/ContentGroupCards.stories.js b/packages/react/src/components/ContentGroupCards/__stories__/ContentGroupCards.stories.js
deleted file mode 100755
index 65fed883e71..00000000000
--- a/packages/react/src/components/ContentGroupCards/__stories__/ContentGroupCards.stories.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentGroupCards from '../ContentGroupCards';
-import ContentGroupCardsKnobs from './data/ContentGroupCards.knobs';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import { text } from '@storybook/addon-knobs';
-
-const props = () => ({
-  heading: text('Heading (heading):', ContentGroupCardsKnobs.heading),
-  copy: text('Copy (copy):', ContentGroupCardsKnobs.copy),
-  items: ContentGroupCardsKnobs.items,
-});
-
-export default {
-  title: 'Components/Content group cards',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content group cards: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          <ContentGroupCards {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentGroupCards/__stories__/data/ContentGroupCards.knobs.js b/packages/react/src/components/ContentGroupCards/__stories__/data/ContentGroupCards.knobs.js
deleted file mode 100755
index aecb30107bc..00000000000
--- a/packages/react/src/components/ContentGroupCards/__stories__/data/ContentGroupCards.knobs.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Knobs for CustomGroupCards
- *
- * type {{}}
- */
-
-const ContentGroupCardsKnobs = {
-  heading: 'Lorem ipsum dolor sit amet',
-  copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  items: [
-    {
-      heading:
-        'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      copy: 'Lorem ipsum dolor sit amet',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-    {
-      heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt',
-      cta: {
-        href: 'https://www.example.com',
-      },
-    },
-  ],
-};
-
-module.exports = ContentGroupCardsKnobs;
diff --git a/packages/react/src/components/ContentGroupCards/index.js b/packages/react/src/components/ContentGroupCards/index.js
deleted file mode 100644
index 86b22af7641..00000000000
--- a/packages/react/src/components/ContentGroupCards/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentGroupCards } from './ContentGroupCards';
diff --git a/packages/react/src/components/ContentGroupHorizontal/ContentGroupHorizontal.js b/packages/react/src/components/ContentGroupHorizontal/ContentGroupHorizontal.js
deleted file mode 100644
index 67527f11556..00000000000
--- a/packages/react/src/components/ContentGroupHorizontal/ContentGroupHorizontal.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import { ContentItemHorizontal } from '../ContentItemHorizontal';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate.js';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentGroupHorizontal pattern.
- */
-const ContentGroupHorizontal = ({ heading, items }) => {
-  return (
-    <div
-      data-autoid={`${stablePrefix}--content-group-horizontal`}
-      className={`${prefix}--content-group-horizontal`}>
-      <ContentBlock heading={heading} border={true}>
-        {items.map((item, index) => (
-          <ContentItemHorizontal
-            eyebrow={item.eyebrow}
-            heading={item.heading}
-            copy={item.copy}
-            cta={item.cta}
-            key={index}
-          />
-        ))}
-      </ContentBlock>
-    </div>
-  );
-};
-
-ContentGroupHorizontal.propTypes = {
-  /**
-   * Heading of the content group.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Array of content items.
-   * See [`<ContentItemHorizontal>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-contentitemhorizontal--default#props) for full usage details.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      eyebrow: PropTypes.string,
-      heading: PropTypes.string.isRequired,
-      copy: PropTypes.string.isRequired,
-      cta: PropTypes.shape({
-        heading: PropTypes.string,
-        items: PropTypes.arrayOf(
-          PropTypes.shape({
-            type: PropTypes.oneOfType([
-              PropTypes.oneOf(['local', 'external']),
-              PropTypes.arrayOf(PropTypes.oneOf(['local', 'external'])),
-            ]),
-            copy: PropTypes.string,
-            href: PropTypes.string,
-            customClassName: PropTypes.string,
-          })
-        ).isRequired,
-        iconPlacement: PropTypes.oneOf(['left', 'right']),
-      }),
-    })
-  ).isRequired,
-};
-
-export default deprecate(
-  ContentGroupHorizontal,
-  `
-  The ContentGroupHorizontal component has been deprecated in favor of the ContentBlockHorizontal component.
-  See ContentBlockHorizontal documentation for more information.
-`
-);
diff --git a/packages/react/src/components/ContentGroupHorizontal/README.stories.mdx b/packages/react/src/components/ContentGroupHorizontal/README.stories.mdx
deleted file mode 100644
index d733a042f5f..00000000000
--- a/packages/react/src/components/ContentGroupHorizontal/README.stories.mdx
+++ /dev/null
@@ -1,110 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentGroupHorizontal from './ContentGroupHorizontal';
-
-# Content Group - Horizontal
-
-> The ContentGroupHorizontal block pattern contains a collection of
-> [ContentItemHorizontal](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/src/components/ContentItemHorizontal)
-> content items.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockHorizontal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentBlockHorizontal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-horizontal/content-group-horizontal';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> content-group-horizontal styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentGroupHorizontal } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const items = [
-    {
-      eyebrow: 'Lorem ipsum',
-      heading: 'Aliquam condimentum',
-      copy:
-        'Lorem ipsum dolor sit amet, _consectetur_ sellus at elit sollicitudin.',
-      cta: {
-        items: [
-          {
-            type: 'local',
-            copy: 'Link text',
-            cta: {
-              href: 'https://example.com',
-            },
-          },
-          {
-            type: 'external',
-            copy: 'External link text',
-            cta: {
-              href: 'https://example.com',
-            },
-          },
-        ],
-      },
-    },
-    {
-      eyebrow: 'Lorem ipsum',
-      heading: 'Aliquam condimentum',
-      copy:
-        'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
-    },
-  ];
-
-  return <ContentGroupHorizontal heading="Aliquam condimentum" items={items} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentGroupHorizontal from '@carbon/ibmdotcom-react/es/components/ContentGroupHorizontal/ContentGroupHorizontal';
-````
-
-## Props
-
-<Props of={ContentGroupHorizontal} />
-
-## Stable selectors
-
-| Name                            | Description |
-| ------------------------------- | ----------- |
-| `dds--content-group-horizontal` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentGroupHorizontal/index.js b/packages/react/src/components/ContentGroupHorizontal/index.js
deleted file mode 100644
index 3f8ff8ded11..00000000000
--- a/packages/react/src/components/ContentGroupHorizontal/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentGroupHorizontal } from './ContentGroupHorizontal';
diff --git a/packages/react/src/components/ContentGroupPictograms/ContentGroupPictograms.js b/packages/react/src/components/ContentGroupPictograms/ContentGroupPictograms.js
deleted file mode 100644
index 0f13b762534..00000000000
--- a/packages/react/src/components/ContentGroupPictograms/ContentGroupPictograms.js
+++ /dev/null
@@ -1,92 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 classNames from 'classnames';
-import ContentGroup from '../ContentGroup/ContentGroup';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { PictogramItem } from '../PictogramItem';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Content group — with pictograms.
- */
-const ContentGroupPictograms = ({ heading, items, className, copy }) => (
-  <div
-    data-autoid={`${stablePrefix}--content-group-pictograms`}
-    className={classNames(className, `${prefix}--content-group-pictograms`)}>
-    <ContentGroup heading={heading} copy={copy}>
-      {_renderItems(items)}
-    </ContentGroup>
-  </div>
-);
-
-/**
- * Renders the array of items
- *
- * @param {Array} items Array of items for PictogramItem
- * @returns {*} PictogramItem JSX components
- */
-const _renderItems = (items) =>
-  items.map((item, index) => (
-    <PictogramItem
-      className={`${prefix}--content-group-pictograms__item`}
-      data-autoid={`${prefix}--content-group-pictograms__item`}
-      {...item}
-      key={index}
-    />
-  ));
-
-ContentGroupPictograms.propTypes = {
-  /**
-   * Main title of Content Group — with Pictograms pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Copy text (enabled for the `markdownToHtml` utility)
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Array of PictogramItems.
-   * See [`<PictogramItem>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-pictogramitem--default#props) for full usage details.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      heading: PropTypes.string.isRequired,
-      copy: PropTypes.string.isRequired,
-      cta: PropTypes.shape({
-        style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-        type: PropTypes.oneOfType([
-          PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-          PropTypes.arrayOf(
-            PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-          ),
-        ]),
-        copy: PropTypes.string,
-        href: PropTypes.string,
-        customClassName: PropTypes.string,
-      }),
-      pictogram: PropTypes.shape({
-        src: PropTypes.object.isRequired,
-      }),
-      className: PropTypes.string,
-    })
-  ).isRequired,
-
-  /**
-   * The CSS class name to apply to the top-level element.
-   */
-  className: PropTypes.string,
-};
-
-export default ContentGroupPictograms;
diff --git a/packages/react/src/components/ContentGroupPictograms/README.stories.mdx b/packages/react/src/components/ContentGroupPictograms/README.stories.mdx
deleted file mode 100644
index 80b065be197..00000000000
--- a/packages/react/src/components/ContentGroupPictograms/README.stories.mdx
+++ /dev/null
@@ -1,146 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentGroupPictograms from './ContentGroupPictograms';
-
-# Content Group — with Pictograms
-
-> The Content Group — with Pictograms pattern is to be utilized within IBM.com.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroupPictograms)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroupPictograms)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentGroupPictograms styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentGroupPictograms } from '@carbon/ibmdotcom-react';
-import { Desktop, Touch, Pattern } from '@carbon/pictograms-react';
-import 'yourapplication.scss';
-
-const heading = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-const items = [
-  {
-    heading: 'Aliquam condimentum interdum',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-    cta: {
-      type: 'local',
-      href: 'https://www.example.com',
-      copy: 'Lorem ipsum dolor',
-    },
-    pictogram: {
-      src: Desktop,
-      'aria-label': 'Desktop Pictogram',
-    },
-  },
-  {
-    heading: 'Aliquam condimentum interdum',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-    cta: {
-      type: 'local',
-      href: 'https://www.example.com',
-      copy: 'Lorem ipsum dolor',
-    },
-    pictogram: {
-      src: Touch,
-      'aria-label': 'Touch Pictogram',
-    },
-  },
-  {
-    heading: 'Aliquam condimentum interdum',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-    cta: {
-      type: 'local',
-      href: 'https://www.example.com',
-      copy: 'Lorem ipsum dolor',
-    },
-    pictogram: {
-      src: Pattern,
-      'aria-label': 'Pattern Pictogram',
-    },
-  },
-];
-
-function App() {
-  return <ContentGroupPictograms heading={heading} items={items} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the Content Group Pictograms styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-#### Markdown
-
-Italic is accepted in the copy of the content item using markdown sytanx: single
-`_` (underscore) or `*` (asterisk)
-
-Example:
-
-```javascript
-{
-  copy: '_Lorem_ ipsum *dolor* sit amet.',
-  ...
-}
-```
-
-Renders:
-
-_Lorem_ ipsum _dolor_ sit amet.
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentGroupPictograms from '@carbon/ibmdotcom-react/es/components/ContentGroupPictograms/ContentGroupPictograms';
-````
-
-## Props
-
-<Props of={ContentGroupPictograms} />
-
-## Stable selectors
-
-| Name                                  | Description                 |
-| ------------------------------------- | --------------------------- |
-| `dds--content-group-pictograms`       | Component                   |
-| `dds--content-group__copy`            | Content group optional copy |
-| `dds--content-group-pictograms__item` | Component                   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js b/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js
deleted file mode 100644
index ebafc75e350..00000000000
--- a/packages/react/src/components/ContentGroupPictograms/__stories__/ContentGroupPictograms.stories.js
+++ /dev/null
@@ -1,134 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text, boolean, number } from '@storybook/addon-knobs';
-import { TouchScreen, Pattern, Touch } from '@carbon/pictograms-react';
-import classNames from 'classnames';
-import ContentGroupPictograms from '../ContentGroupPictograms';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const pictograms = {
-  TouchScreen: 'TouchScreen',
-  Touch: 'Touch',
-  Pattern: 'Pattern',
-};
-
-/**
- * Returns the react component based on the value in the pictogram variables
- *
- * @param {string} sel string that defines the returning pictogram
- * @returns {*} JSX pictogram component
- */
-const selectPictogram = (sel) => {
-  switch (sel) {
-    case 'TouchScreen':
-      return TouchScreen;
-    case 'Pattern':
-      return Pattern;
-    case 'Touch':
-      return Touch;
-  }
-};
-
-/**
- * Toggles CTA data based on item value
- *
- * @param {boolean} item defines if cta will be rendered
- * @returns {*} if true returns cta data, if false, returns null
- */
-const toggleCTA = (item) => {
-  if (item) {
-    return {
-      type: 'local',
-      href: 'https://www.example.com',
-      copy: 'Lorem ipsum dolor sit amet ',
-    };
-  } else {
-    return null;
-  }
-};
-
-const props = () => {
-  const pictogramCount = number('Number of PictogramItems', 3, {});
-  const items = [];
-
-  for (let i = 0; i < pictogramCount; i++) {
-    items.push({
-      heading: text(
-        `Item ${i + 1} Heading (items.heading)`,
-        'Aliquam condimentum interdum'
-      ),
-      copy: text(
-        `Item ${i + 1} Copy (items.copy)`,
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.'
-      ),
-      cta: toggleCTA(boolean(`Item ${i + 1} CTA (items.cta)`, true)),
-      pictogram: {
-        src: selectPictogram(
-          select(
-            `Item ${i + 1} Pictogram (pictogram)`,
-            pictograms,
-            pictograms.TouchScreen
-          )
-        ),
-        'aria-label': 'Pictogram',
-      },
-    });
-  }
-  return {
-    heading: text('Pattern title (heading)', 'Lorem ipsum dolor sit amet'),
-    copy: text(
-      'Copy (copy)',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.'
-    ),
-    items,
-  };
-};
-
-export default {
-  title: 'Components/Content group pictograms',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content group pictograms: Default',
-    },
-    propsSet: {
-      default: {
-        ContentGroupPictograms: {
-          items: [
-            {
-              heading: 'Aliquam condimentum interdum',
-              copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.',
-              pictogram: {
-                src: selectPictogram(pictograms.Desktop),
-                'aria-label': 'Pictogram',
-              },
-            },
-          ],
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <ContentGroupPictograms
-          className={classNames(
-            `bx--col-sm-4`,
-            `bx--col-lg-8`,
-            `bx--offset-lg-4`
-          )}
-          {...props()}
-        />
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentGroupPictograms/index.js b/packages/react/src/components/ContentGroupPictograms/index.js
deleted file mode 100644
index 642c25a4295..00000000000
--- a/packages/react/src/components/ContentGroupPictograms/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentGroupPictograms } from './ContentGroupPictograms';
diff --git a/packages/react/src/components/ContentGroupSimple/ContentGroupSimple.js b/packages/react/src/components/ContentGroupSimple/ContentGroupSimple.js
deleted file mode 100644
index 00ee723d2cd..00000000000
--- a/packages/react/src/components/ContentGroupSimple/ContentGroupSimple.js
+++ /dev/null
@@ -1,221 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentGroup from '../ContentGroup/ContentGroup';
-import ContentItem from '../ContentItem/ContentItem';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { ImageWithCaption } from '../ImageWithCaption';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import { VideoPlayer } from '../VideoPlayer';
-
-const { prefix } = settings;
-const { stablePrefix } = ddsSettings;
-
-/**
- * ContentGroupSimple.
- */
-const ContentGroupSimple = ({
-  heading,
-  mediaType,
-  mediaData,
-  items,
-  cta,
-  copy,
-}) => (
-  <div
-    data-autoid={`${stablePrefix}--content-group-simple`}
-    className={`${prefix}--content-group-simple`}>
-    <ContentGroup cta={cta} heading={heading} copy={copy}>
-      {_renderMedia(mediaType, mediaData)}
-      {_renderContent(items)}
-    </ContentGroup>
-  </div>
-);
-
-/**
- *
- * @param {Array} items Array of data for ContentItems to be rendered
- * @returns {*} Array of ContentItem Components
- */
-const _renderContent = (items) =>
-  items.map((item, index) => <ContentItem {...item} key={index} />);
-
-/**
- * renders either video or image content
- *
- * @param {string} type cta type ( external | jump | local)
- * @param {object} data cta type ( external | jump | local)
- * @private
- */
-const _renderMedia = (type, data) => {
-  if (data) {
-    return (
-      <div data-autoid={`${stablePrefix}--content-group-simple__media`}>
-        {type === 'image' && <ImageWithCaption {...data} />}
-        {type === 'video' && <VideoPlayer {...data} />}
-      </div>
-    );
-  }
-};
-
-ContentGroupSimple.propTypes = {
-  /**
-   * Main heading of the pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Copy text (enabled for the `markdownToHtml` utility)
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Determines media type (image or video).
-   */
-  mediaType: PropTypes.oneOf(['image', 'video']),
-
-  /**
-   * Media Data for either image or video.
-   * See the following components' README for more details:
-   *
-   * `mediaType="image"`: [`<ImageWithCaption>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-imagewithcaption--default#props)
-   * `mediaType="video"`: [`<VideoPlayer>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-videoplayer--default#props)
-   */
-  mediaData: PropTypes.oneOfType([
-    PropTypes.shape({
-      inverse: PropTypes.bool,
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }).isRequired,
-      lightbox: PropTypes.bool,
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      customClassName: PropTypes.string,
-    }),
-    PropTypes.shape({
-      customClassName: PropTypes.string,
-      videoId: PropTypes.string.isRequired,
-      showCaption: PropTypes.bool,
-      inverse: PropTypes.bool,
-    }),
-  ]),
-
-  /**
-   * Data to be used on `<ContentItem>`s.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      cta: PropTypes.shape({
-        type: PropTypes.oneOfType([
-          PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-          PropTypes.arrayOf(
-            PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-          ),
-        ]),
-        heading: PropTypes.string,
-        href: PropTypes.string,
-        customClassName: PropTypes.string,
-      }),
-
-      /**
-       * Allows user to pass in custom class name.
-       */
-      customClassName: PropTypes.string,
-
-      /**
-       * Copy text.
-       */
-      copy: PropTypes.string,
-
-      /**
-       * Heading text.
-       */
-      heading: PropTypes.string,
-
-      /**
-       * Determines media type (image or video).
-       */
-      mediaType: PropTypes.oneOf(['image', 'video']),
-
-      /**
-       * Media Data for either image or video.
-       * See the following components' README for more details:
-       *
-       * `mediaType="image"`: [`<ImageWithCaption>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-imagewithcaption--default#props)
-       * `mediaType="video"`: [`<VideoPlayer>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-videoplayer--default#props)
-       */
-      mediaData: PropTypes.oneOfType([
-        PropTypes.shape({
-          inverse: PropTypes.bool,
-          image: PropTypes.shape({
-            classname: PropTypes.string,
-            sources: PropTypes.arrayOf(
-              PropTypes.shape({
-                src: PropTypes.string,
-                breakpoint: PropTypes.oneOfType([
-                  PropTypes.string,
-                  PropTypes.number,
-                ]),
-              })
-            ),
-            defaultSrc: PropTypes.string.isRequired,
-            alt: PropTypes.string.isRequired,
-            longDescription: PropTypes.string,
-          }).isRequired,
-          lightbox: PropTypes.bool,
-          heading: PropTypes.string,
-          copy: PropTypes.string,
-          customClassName: PropTypes.string,
-        }),
-        PropTypes.shape({
-          customClassName: PropTypes.string,
-          videoId: PropTypes.string.isRequired,
-          showCaption: PropTypes.bool,
-          inverse: PropTypes.bool,
-        }),
-      ]),
-
-      /**
-       * `true` to changes theme to inverse.
-       */
-      inverse: PropTypes.bool,
-    })
-  ).isRequired,
-
-  /**
-   * Data to be used on CTA.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    heading: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-};
-
-export default ContentGroupSimple;
diff --git a/packages/react/src/components/ContentGroupSimple/README.stories.mdx b/packages/react/src/components/ContentGroupSimple/README.stories.mdx
deleted file mode 100644
index e4bec4a4e9a..00000000000
--- a/packages/react/src/components/ContentGroupSimple/README.stories.mdx
+++ /dev/null
@@ -1,145 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentGroupSimple from './ContentGroupSimple';
-
-# Content Group - Simple
-
-> The Content Group – Simple pattern includes a heading, Content Items, an
-> optional CTA Component, and an optional media (image or video).
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroupSimple)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentGroupSimple)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-simple/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ContentGroupSimple styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentGroupSimple } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-const heading = 'Lorem ipsum dolor sit amet';
-
-const mediaData = {
-  sources: [
-    {
-      src:
-        'http://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 320,
-    },
-    {
-      src:
-        'http://fpoimg.com/400x400?text=1:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 400,
-    },
-    {
-      src:
-        'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 672,
-    },
-  ],
-  alt: 'Image alt text',
-  defaultSrc:
-    'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-};
-
-const mediaType = 'image';
-
-const items = [
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-  },
-  {
-    heading: 'Lorem ipsum dolor sit amet.',
-    copy:
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-  },
-];
-
-const cta = {
-  title: 'Lorem ipsum dolor',
-  href: 'https://www.example.com',
-};
-
-function App() {
-  return (
-    <ContentGroupSimple
-      mediaType={mediaType}
-      mediaData={mediaData}
-      heading={heading}
-      items={items}
-      cta={cta}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the content-group-simple styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ContentGroupSimple from '@carbon/ibmdotcom-react/es/components/ContentGroupSimple/ContentGroupSimple';
-```
-
-## Props
-
-<Props of={ContentGroupSimple} />
-
-## Stable selectors
-
-| Name                               | Description                                     |
-| ---------------------------------- | ----------------------------------------------- |
-| `dds--content-group-simple`        | Main Wrapper for Content Group - Simple pattern |
-| `dds--content-group__copy`         | Content group - Simple optional copy            |
-| `dds--content-group-simple__media` | Wrapper for the media component.                |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentGroupSimple/__stories__/ContentGroupSimple.stories.js b/packages/react/src/components/ContentGroupSimple/__stories__/ContentGroupSimple.stories.js
deleted file mode 100755
index f25d01f33a4..00000000000
--- a/packages/react/src/components/ContentGroupSimple/__stories__/ContentGroupSimple.stories.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, select } from '@storybook/addon-knobs';
-import ContentGroupSimple from '../ContentGroupSimple';
-import ContentGroupSimpleKnobs from './data/ContentGroupSimple.knobs.js';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = {
-  None: null,
-  Image: 'image',
-  Video: 'video',
-};
-
-const props = () => ({
-  heading: text('Heading (heading)', ContentGroupSimpleKnobs.heading),
-  copy: text('Copy (copy):', ContentGroupSimpleKnobs.copy),
-  items: ContentGroupSimpleKnobs.items,
-  cta: ContentGroupSimpleKnobs.cta,
-  mediaType: select('With media:', types, types.Image),
-});
-
-export default {
-  title: 'Components/Content group simple',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content group simple: Default',
-    },
-    propsSet: {
-      default: {
-        ContentGroupSimple: {
-          items: ContentGroupSimpleKnobs.items,
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          {props().mediaType === null ? (
-            <ContentGroupSimple {...props()} />
-          ) : (
-            ''
-          )}
-          {props().mediaType === 'image' ? (
-            <ContentGroupSimple
-              mediaData={ContentGroupSimpleKnobs.mediaData.image}
-              {...props()}
-            />
-          ) : (
-            ''
-          )}
-          {props().mediaType === 'video' ? (
-            <ContentGroupSimple
-              mediaData={ContentGroupSimpleKnobs.mediaData.video}
-              {...props()}
-            />
-          ) : (
-            ''
-          )}
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs.js b/packages/react/src/components/ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs.js
deleted file mode 100755
index 07ddf4dccc8..00000000000
--- a/packages/react/src/components/ContentGroupSimple/__stories__/data/ContentGroupSimple.knobs.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 imgLg16x9 from '../../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
-import imgMd16x9 from '../../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
-import imgSm16x9 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
-
-/**
- * Knobs for CustomGroupSimple
- *
- * type {{}}
- */
-const copyWithList = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-nulla quis, *consequat* libero. Here are
-some common categories:
-
-Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris iaculis eget
-dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat __libero__.
-
-- [list item link](https://www.ibm.com)
-  1. list "item 1a"
-  2. list item 2a
-      - list item 2a.a
-1. list item 2
-    - list item 2a
-`;
-
-const ContentGroupSimpleKnobs = {
-  heading: 'Lorem ipsum dolor sit amet',
-  copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.',
-  mediaData: {
-    image: {
-      heading: 'Lorem ipsum dolor sit amet.',
-      image: {
-        sources: [
-          {
-            src: imgSm16x9,
-            breakpoint: 320,
-          },
-          {
-            src: imgMd16x9,
-            breakpoint: 400,
-          },
-          {
-            src: imgLg16x9,
-            breakpoint: 672,
-          },
-        ],
-        alt: 'Image alt text',
-        defaultSrc: imgLg16x9,
-      },
-    },
-    video: {
-      videoId: '1_9h94wo6b',
-      showCaption: true,
-    },
-  },
-  types: {
-    image: 'image',
-    video: 'video',
-    none: 'none',
-  },
-  mediaType: {},
-  items: [
-    {
-      heading: 'Lorem ipsum dolor sit amet.',
-      copy: 'Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-    },
-    {
-      heading: 'Lorem ipsum dolor sit amet.',
-      copy: copyWithList,
-    },
-    {
-      heading: 'Lorem ipsum dolor sit amet.',
-      copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.',
-    },
-  ],
-  cta: {
-    cta: {
-      href: 'https://www.example.com',
-    },
-    style: 'card',
-    type: 'local',
-    heading: 'Lorem ipsum dolor sit amet',
-  },
-};
-
-export default ContentGroupSimpleKnobs;
diff --git a/packages/react/src/components/ContentGroupSimple/index.js b/packages/react/src/components/ContentGroupSimple/index.js
deleted file mode 100644
index 83a3ba9d56e..00000000000
--- a/packages/react/src/components/ContentGroupSimple/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentGroupSimple } from './ContentGroupSimple';
diff --git a/packages/react/src/components/ContentItem/ContentItem.js b/packages/react/src/components/ContentItem/ContentItem.js
deleted file mode 100644
index e31763668ab..00000000000
--- a/packages/react/src/components/ContentItem/ContentItem.js
+++ /dev/null
@@ -1,172 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { CTA } from '../CTA';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { ImageWithCaption } from '../ImageWithCaption';
-import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import { VideoPlayer } from '../VideoPlayer';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentItem Component
- *
- * @param {object} props props object
- * @param {boolean} props.inverse inverse class
- * @param {string} props.customClassName allows user to pass in custom class name
- * @param {string} props.cta cta object
- * @param {string} props.copy copy text
- * @param {string} props.heading  heading object
- * @param {string} props.mediaType Determines the media type (image or video)
- * @param {object} props.mediaData Data properties for image or video
- * @returns {*} JSX ContentItem component
- */
-const ContentItem = ({
-  cta,
-  copy,
-  heading,
-  mediaType,
-  mediaData,
-  inverse,
-  customClassName,
-}) => {
-  const classnames = cx(
-    `${prefix}--content-item`,
-    { [`${prefix}--content-item--inverse`]: inverse },
-    customClassName
-  );
-  return (
-    <div className={classnames} data-autoid={`${stablePrefix}--content-item`}>
-      {heading && (
-        <h4
-          data-autoid={`${stablePrefix}--content-item__heading`}
-          className={`${prefix}--content-item__heading`}>
-          {heading}
-        </h4>
-      )}
-      {_renderMedia(mediaType, mediaData, inverse)}
-      {copy && (
-        <div
-          data-autoid={`${stablePrefix}--content-item__copy`}
-          className={`${prefix}--content-item__copy`}
-          dangerouslySetInnerHTML={{
-            __html: markdownToHtml(copy, { bold: false }),
-          }}></div>
-      )}
-      {cta && <CTA {...cta} customClassName={`${prefix}--content-item__cta`} />}
-    </div>
-  );
-};
-
-/**
- * renders either video or image content
- *
- * @param {string} type cta type ( external | jump | local)
- * @param {object} data cta type ( external | jump | local)
- * @param {boolean} inverse inverse type
- * @private
- */
-const _renderMedia = (type, data, inverse) => {
-  if (data) {
-    return (
-      <div data-autoid={`${stablePrefix}--content-item__media`}>
-        {type === 'image' && <ImageWithCaption inverse={inverse} {...data} />}
-        {type === 'video' && <VideoPlayer inverse={inverse} {...data} />}
-      </div>
-    );
-  }
-};
-
-ContentItem.propTypes = {
-  /**
-   * CTA object.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'button']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Allows user to pass in custom class name.
-   */
-  customClassName: PropTypes.string,
-
-  /**
-   * Copy text.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Heading text.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * Determines media type (image or video).
-   */
-  mediaType: PropTypes.oneOf(['image', 'video']),
-
-  /**
-   * Media Data for either image or video.
-   * See the following components' README for more details:
-   *
-   * `mediaType="image"`: [`<ImageWithCaption>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-imagewithcaption--default#props)
-   * `mediaType="video"`: [`<VideoPlayer>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-videoplayer--default#props)
-   */
-  mediaData: PropTypes.oneOfType([
-    PropTypes.shape({
-      inverse: PropTypes.bool,
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }).isRequired,
-      lightbox: PropTypes.bool,
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      customClassName: PropTypes.string,
-    }),
-    PropTypes.shape({
-      customClassName: PropTypes.string,
-      videoId: PropTypes.string.isRequired,
-      showCaption: PropTypes.bool,
-      inverse: PropTypes.bool,
-    }),
-  ]),
-
-  /**
-   * `true` to changes theme to inverse.
-   */
-  inverse: PropTypes.bool,
-};
-
-export default ContentItem;
diff --git a/packages/react/src/components/ContentItem/README.stories.mdx b/packages/react/src/components/ContentItem/README.stories.mdx
deleted file mode 100644
index a96b48cc444..00000000000
--- a/packages/react/src/components/ContentItem/README.stories.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentItem from './ContentItem';
-
-# Content Item
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/internal/content-item/content-item';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the ContentItem
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentItem } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'Lorem ipsum dolor sit amet.';
-  const copy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-  const mediaType = 'image';
-  const mediaData = {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    image: {
-      sources: [
-        {
-          src:
-            'http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 320,
-        },
-        {
-          src:
-            'http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 400,
-        },
-        {
-          src:
-            'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 672,
-        },
-      ],
-      alt: 'Image alt text',
-      defaultSrc:
-        'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-    },
-  };
-
-  const cta = {
-    style: 'text',
-    type: 'jump',
-    copy: 'Click here',
-    href: 'www.ibm.com',
-  };
-
-  return (
-    <ContentItem
-      inverse={false}
-      heading={heading}
-      copy={copy}
-      mediaType={mediaType}
-      mediaData={mediaData}
-      cta={cta}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the content group styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={ContentItem} />
-
-### image (optional)
-
-Visit the
-[ImageWithCaption documentation](https://www.ibm.com/standards/carbon/react/?path=/story/components-imagewithcaption--default)
-for more details on the ImageWithCaption options.
-
-## Stable selectors
-
-| Name                         | Description                   |
-| ---------------------------- | ----------------------------- |
-| `dds--content-item`          | Content item wrapper element. |
-| `dds--content-item__heading` | Content item heading element. |
-| `dds--content-item__copy`    | Content item copy element.    |
-| `dds--content-item__media`   | Content item media element.   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentItem/__stories__/ContentItem.stories.js b/packages/react/src/components/ContentItem/__stories__/ContentItem.stories.js
deleted file mode 100644
index 9730355a202..00000000000
--- a/packages/react/src/components/ContentItem/__stories__/ContentItem.stories.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, select } from '@storybook/addon-knobs';
-import ContentItem from '../ContentItem';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--003.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => ({
-  heading: text('Heading (heading):', 'Natural language understanding'),
-  media: select('Media type:', ['none', 'image', 'video'], 'none'),
-  copy: text(
-    'Copy (copy):',
-    'This area of NLP takes “real world” text and applies a symbolic ' +
-      'system for a machine to interpret its meaning, using formal logic; structures ' +
-      'that describe the various relationships between concepts (ontologies); and other semantic tools.'
-  ),
-  ctaStyle: select('CTA style', ['text', 'button'], 'text'),
-  ctaCopy: text('CTA copy', 'Learn more about NLP'),
-});
-
-export default {
-  title: 'Components/Content item',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content item: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const { heading, media, copy, ctaStyle, ctaCopy } = props() ?? {};
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-10 bx--offset-lg-4">
-          <ContentItem
-            heading={heading}
-            mediaType={media}
-            mediaData={{
-              heading: 'Image caption text',
-              image: {
-                defaultSrc: imgLg16x9,
-                alt: 'Image alt text',
-              },
-              videoId: '1_9h94wo6b',
-              showCaption: true,
-            }}
-            copy={copy}
-            cta={{
-              style: ctaStyle,
-              type: 'local',
-              copy: ctaCopy,
-              href: 'https://www.example.com',
-              buttons: [
-                {
-                  copy: 'Learn more about NLP',
-                  href: 'https://example.com/',
-                },
-              ],
-            }}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ContentItem/index.js b/packages/react/src/components/ContentItem/index.js
deleted file mode 100644
index a070bc5faf8..00000000000
--- a/packages/react/src/components/ContentItem/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-export { default as ContentItem } from './ContentItem';
diff --git a/packages/react/src/components/ContentItemHorizontal/ContentItemHorizontal.js b/packages/react/src/components/ContentItemHorizontal/ContentItemHorizontal.js
deleted file mode 100644
index 186bac62fbb..00000000000
--- a/packages/react/src/components/ContentItemHorizontal/ContentItemHorizontal.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { LinkList } from '../LinkList';
-import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentItemHorizontal Pattern
- *
- * @param {object} props props object
- * @param {string} props.eyebrow eyebrow text
- * @param {string} props.heading heading text
- * @param {string} props.copy copy text
- * @param {Array} props.cta cta array
- * @returns {*} JSX ContentItemHorizontal pattern
- */
-const ContentItemHorizontal = ({ eyebrow, heading, copy, cta }) => (
-  <div
-    className={`${prefix}--content-item-horizontal__item `}
-    data-autoid={`${stablePrefix}--content-item-horizontal__item`}>
-    <div className={`${prefix}--content-item-horizontal__row`}>
-      <div className={`${prefix}--content-item-horizontal__col`}>
-        {eyebrow && (
-          <p
-            className={`${prefix}--content-item-horizontal__item--eyebrow`}
-            data-autoid={`${stablePrefix}--content-item-horizontal__item--eyebrow`}>
-            {eyebrow}
-          </p>
-        )}
-        <h3
-          className={`${prefix}--content-item-horizontal__item--heading`}
-          data-autoid={`${stablePrefix}--content-item-horizontal__item--heading`}>
-          {heading}
-        </h3>
-      </div>
-      <div className={`${prefix}--content-item-horizontal__col`}>
-        <div
-          className={`${prefix}--content-item-horizontal__item--copy`}
-          data-autoid={`${stablePrefix}--content-item-horizontal__item--copy`}
-          dangerouslySetInnerHTML={{
-            __html: markdownToHtml(copy, { bold: false }),
-          }}
-        />
-        {cta && (
-          <div
-            className={`${prefix}--content-item-horizontal__item--cta`}
-            data-autoid={`${stablePrefix}--content-item-horizontal__item--cta`}>
-            <LinkList style="vertical" {...cta} />
-          </div>
-        )}
-      </div>
-    </div>
-  </div>
-);
-
-ContentItemHorizontal.propTypes = {
-  /**
-   * Optional text displayed above the heading.
-   */
-  eyebrow: PropTypes.string,
-
-  /**
-   * Heading of the content item.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Copy of the content item. Accepts _italic_ markdown formatting.
-   */
-  copy: PropTypes.string.isRequired,
-
-  /**
-   * Optional CTA links displayed below the copy.
-   * Each item has the following structure:
-   *
-   * | Name   | Required | Data Type | Description                                |
-   * | ------ | -------- | --------- | ------------------------------------------ |
-   * | `type` | YES      | Object    | Link type. Accepts `local` and `external`. |
-   * | `copy` | YES      | String    | Link text.                                 |
-   * | `href` | YES      | String    | URI for internal or external resource.     |
-   */
-  cta: PropTypes.shape({
-    heading: PropTypes.string,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        type: PropTypes.oneOfType([
-          PropTypes.oneOf(['local', 'external']),
-          PropTypes.arrayOf(PropTypes.oneOf(['local', 'external'])),
-        ]),
-        copy: PropTypes.string,
-        href: PropTypes.string,
-        customClassName: PropTypes.string,
-      })
-    ).isRequired,
-    iconPlacement: PropTypes.oneOf(['left', 'right']),
-  }),
-};
-
-export default ContentItemHorizontal;
diff --git a/packages/react/src/components/ContentItemHorizontal/README.stories.mdx b/packages/react/src/components/ContentItemHorizontal/README.stories.mdx
deleted file mode 100644
index a6cc4d54ad6..00000000000
--- a/packages/react/src/components/ContentItemHorizontal/README.stories.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentItemHorizontal from './ContentItemHorizontal';
-
-# Content Item - Horizontal
-
-> Use this component to present content in a horizontal orientation.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentItemHorizontal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ContentItemHorizontal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> content-item-horizontal styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { CardGroup } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const eyebrow = 'Lorem ipsum';
-  const heading = 'Aliquam condimentum';
-  const copy =
-    'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.';
-  const cta = [
-    {
-      type: 'local',
-      copy: 'Link text',
-      href: 'https://example.com',
-    },
-    {
-      type: 'external',
-      copy: 'External link text',
-      href: 'https://example.com',
-    },
-  ];
-
-  return (
-    <ContentItemHorizontal
-      eyebrow={eyebrow}
-      heading={heading}
-      copy={copy}
-      cta={cta}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)..
-
-```
-  SASS_PATH=node_modules:src
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ContentItemHorizontal from '@carbon/ibmdotcom-react/es/components/ContentItemHorizontal/ContentItemHorizontal';
-````
-
-## Props
-
-<Props of={ContentItemHorizontal} />
-
-## Stable selectors
-
-| Name                                          | Description                   |
-| --------------------------------------------- | ----------------------------- |
-| `dds--content-item-horizontal__item`          | Content item wrapper element. |
-| `dds--content-item-horizontal__item--eyebrow` | Content item eyebrow element. |
-| `dds--content-item-horizontal__item--heading` | Content item heading element. |
-| `dds--content-item-horizontal__item--copy`    | Content item copy element.    |
-| `dds--content-item-horizontal__item--cta`     | Content item cta element.     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentItemHorizontal/__stories__/ContentItemHorizontal.stories.js b/packages/react/src/components/ContentItemHorizontal/__stories__/ContentItemHorizontal.stories.js
deleted file mode 100644
index c90db6b7010..00000000000
--- a/packages/react/src/components/ContentItemHorizontal/__stories__/ContentItemHorizontal.stories.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, select } from '@storybook/addon-knobs';
-import ContentItemHorizontal from '../ContentItemHorizontal';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => ({
-  eyebrow: text('Eyebrow (eyebrow):', 'Lorem ipsum'),
-  heading: text('Heading (heading):', 'Aliquam condimentum'),
-  copy: text(
-    'Copy (copy):',
-    'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.'
-  ),
-  cta: {
-    items: [
-      {
-        type: select('CTA 1 Type (type):', ['local', 'external'], 'local'),
-        copy: text('CTA 1 Copy (copy):', 'Learn more'),
-        cta: {
-          href: text('CTA 1 Href (cta.href):', 'https://www.ibm.com'),
-        },
-      },
-      {
-        type: select('CTA 2 Type (type):', ['local', 'external'], 'external'),
-        copy: text('CTA 2 Copy (copy):', 'Microservices and containers'),
-        cta: {
-          href: text('CTA 2 Href (cta.href):', 'https://www.ibm.com'),
-        },
-      },
-    ],
-  },
-});
-
-export default {
-  title: 'Components/Content item horizontal',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content item horizontal: Default',
-    },
-    propsSet: {
-      default: {
-        ContentItemHorizontal: {
-          eyebrow: 'Lorem ipsum',
-          heading: 'Aliquam condimentum',
-          copy: 'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid bx--content-group-story">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <ContentItemHorizontal {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const WithMedia = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-item-horizontal--with-media">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
-
-WithMedia.story = {
-  name: 'With media',
-  parameters: {
-    ...readme.parameters,
-    knobs: { ContentItemHorizontal: () => ({}) },
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const WithThumbnail = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-content-item-horizontal--with-thumbnail">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
-
-WithThumbnail.story = {
-  name: 'With thumbnail',
-  parameters: {
-    ...readme.parameters,
-    knobs: { ContentItemHorizontal: () => ({}) },
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
diff --git a/packages/react/src/components/ContentItemHorizontal/__tests__/ContentItemHorizontal.steps.js b/packages/react/src/components/ContentItemHorizontal/__tests__/ContentItemHorizontal.steps.js
deleted file mode 100644
index dc5dd7b1633..00000000000
--- a/packages/react/src/components/ContentItemHorizontal/__tests__/ContentItemHorizontal.steps.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('ContentItemHorizontal', () => {
-  beforeAll(async () => {
-    await page.goto(
-      `http://localhost:${process.env.PORT}/iframe.html?id=components-contentitemhorizontal--default`
-    );
-  });
-
-  it('should have the right type for the eyebrow', async () => {
-    const eyebrow = await page.waitForSelector(
-      '.bx--content-item-horizontal__item--eyebrow'
-    );
-    const styleValues = await page.evaluate(
-      (eyebrow) =>
-        window.getStyleValues(eyebrow, [
-          'font-size',
-          'font-weight',
-          'line-height',
-          'letter-spacing',
-        ]),
-      eyebrow
-    );
-    expect(styleValues).toEqual({
-      'font-size': '14px',
-      'font-weight': '400',
-      'line-height': '20px',
-      'letter-spacing': '0.16px',
-    });
-  });
-});
diff --git a/packages/react/src/components/ContentItemHorizontal/__tests__/ContentItemHorizontal.test.js b/packages/react/src/components/ContentItemHorizontal/__tests__/ContentItemHorizontal.test.js
deleted file mode 100644
index 160b732d954..00000000000
--- a/packages/react/src/components/ContentItemHorizontal/__tests__/ContentItemHorizontal.test.js
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 ContentItemHorizontal from '../ContentItemHorizontal';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-describe('ContentItemHorizontal', () => {
-  it('renders as expected', () => {
-    const eyebrow = 'Lorem ipsum';
-    const heading = 'Aliquam condimentum';
-    const copy = 'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit.';
-    const cta = {
-      heading: 'Example heading',
-      items: [
-        {
-          type: 'local',
-          copy: 'Link text',
-          href: 'https://example.com',
-        },
-        {
-          type: 'external',
-          copy: 'External link text',
-          href: 'https://example.com',
-        },
-      ],
-    };
-
-    const callout = shallow(
-      <ContentItemHorizontal
-        eyebrow={eyebrow}
-        heading={heading}
-        copy={copy}
-        cta={cta}
-      />
-    );
-
-    expect(callout.find('.bx--content-item-horizontal__item')).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/ContentItemHorizontal/index.js b/packages/react/src/components/ContentItemHorizontal/index.js
deleted file mode 100644
index 5b219c621d5..00000000000
--- a/packages/react/src/components/ContentItemHorizontal/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as ContentItemHorizontal } from './ContentItemHorizontal';
diff --git a/packages/react/src/components/ContentSection/ContentSection.js b/packages/react/src/components/ContentSection/ContentSection.js
deleted file mode 100644
index 4ed6d6b2bed..00000000000
--- a/packages/react/src/components/ContentSection/ContentSection.js
+++ /dev/null
@@ -1,132 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 classNames from 'classnames';
-import { CTA } from '../CTA';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * ContentSection Component, for use with cardSection.
- */
-const ContentSection = ({
-  heading,
-  copy,
-  theme,
-  children,
-  cta,
-  customClassName,
-  childrenCustomClassName,
-  ...otherProps
-}) => {
-  return (
-    <section
-      className={classNames(`${prefix}--content-section`, customClassName, {
-        [`${prefix}--content-section--${theme}`]: theme,
-      })}
-      data-autoid={
-        otherProps.autoid
-          ? otherProps.autoid
-          : `${stablePrefix}--content-section`
-      }>
-      <div className={`${prefix}--content-section__grid`}>
-        <div className={`${prefix}--content-section__row`}>
-          <div className={`${prefix}--content-section__left`}>
-            {heading && (
-              <h2 className={`${prefix}--content-section__heading`}>
-                {heading}
-              </h2>
-            )}
-            {copy && (
-              <div
-                data-autoid={`${stablePrefix}--content-section__copy`}
-                className={`${prefix}--content-section__copy`}
-                dangerouslySetInnerHTML={{
-                  __html: markdownToHtml(copy, { bold: false }),
-                }}></div>
-            )}
-            {cta && (
-              <CTA
-                style="text"
-                type={cta.type}
-                copy={cta.copy}
-                href={cta.href}
-                customClassName={`${prefix}--content-section__cta`}
-              />
-            )}
-          </div>
-          <div
-            className={classNames(
-              `${prefix}--content-section__children`,
-              childrenCustomClassName
-            )}>
-            {children}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-ContentSection.propTypes = {
-  /**
-   * Heading text.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Copy text.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Theme name.
-   */
-  theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
-
-  /**
-   * Container for other components.
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-
-  /**
-   * CTA object.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Optional class to be applied to the containing node.
-   */
-  customClassName: PropTypes.string,
-
-  /**
-   * Optional class to be applied to the child node.
-   */
-  childrenCustomClassName: PropTypes.string,
-};
-
-export default ContentSection;
diff --git a/packages/react/src/components/ContentSection/README.stories.mdx b/packages/react/src/components/ContentSection/README.stories.mdx
deleted file mode 100644
index 643e027abcd..00000000000
--- a/packages/react/src/components/ContentSection/README.stories.mdx
+++ /dev/null
@@ -1,75 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ContentSection from './ContentSection';
-
-# Content Section
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/internal/content-section/content-section';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the ContentSection
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ContentItem } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <ContentSection
-      heading="Content section heading"
-      copy="copy text"
-      cta={{
-        href: 'https://www.example.com',
-        type: 'local',
-        copy: 'Link action'
-      }}
-     />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the content group styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={ContentSection} />
-
-## Stable selectors
-
-| Name                               | Description                        |
-| ---------------------------------- | ---------------------------------- |
-| `dds--content-section`             | Content section wrapper element.   |
-| `dds--content-section__heading`    | Content section heading element.   |
-| `dds--content-section__copy`       | Content section copy element.      |
-| `content-section__cta              | Content section cta element.       |
-| `dds--content-section__children`   | Content section children element.  |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ContentSection/__stories__/ContentSection.stories.js b/packages/react/src/components/ContentSection/__stories__/ContentSection.stories.js
deleted file mode 100644
index a94ecae8483..00000000000
--- a/packages/react/src/components/ContentSection/__stories__/ContentSection.stories.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, optionsKnob } from '@storybook/addon-knobs';
-import ContentBlockSimple from '../../ContentBlockSimple/ContentBlockSimple';
-import ContentGroupCards from '../../ContentGroupCards/ContentGroupCards';
-import ContentGroupCardsKnobs from '../../ContentGroupCards/__stories__/data/ContentGroupCards.knobs';
-import ContentSection from '../ContentSection';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const blockCopy = `Simply: when a technology gives a machine any ability that mimics human thought processes, we call it “artificial intelligence” (or AI).
-
-Human fascination with thinking machines has been with us as long as machines themselves. In every generation, new technologies perform tasks that we previously believed were only possible for humans. Our curiosity drives us to make technology always do more, and better.
-
-And here's an intriguing paradox: over time, as our assumptions shift about what machines can and can't do, we also gradually change our assessment of what counts as “genuine” intelligence. So what we call “artificial intelligence” keeps changing, too.
-
-For example: optical scan of documents (to create a text file out of an image of text) used to be considered artificial intelligence before it became common in our everyday lives. Observers of the history of AI call this phenomenon "the AI effect."
-`;
-
-const video = {
-  videoId: '1_9h94wo6b',
-  showCaption: true,
-};
-
-const props = {
-  default: () => {
-    const knobs = {
-      heading: text(
-        'Heading:',
-        'Speech recognition (statistical Artificial Intelligence)'
-      ),
-      copy: text(
-        'Copy:',
-        'AI features for understanding speech can be trained for a specific speaker’s voice.'
-      ),
-      addChildren: optionsKnob(
-        'Add children:',
-        {
-          'Content block simple': 'Content block simple',
-          'Content group cards': 'Content group cards',
-        },
-        '',
-        { display: 'multi-select' }
-      ),
-    };
-    return knobs;
-  },
-};
-
-export default {
-  title: 'Components/Content section',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Content section: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const { addChildren } = props?.default() ?? {};
-  return (
-    <ContentSection
-      {...props.default()}
-      cta={{
-        href: 'https://www.example.com',
-        type: 'local',
-        copy: 'Link action',
-      }}
-      childrenCustomClassName={'bx--col-lg-8'}
-      children={
-        addChildren.length > 0
-          ? [
-              addChildren.includes('Content block simple') && (
-                <ContentBlockSimple
-                  copy={blockCopy}
-                  heading="What’s the latest news in artificial intelligence?"
-                  cta={{
-                    cta: {
-                      href: 'https://www.ibm.com',
-                    },
-                    style: 'text',
-                    type: 'jump',
-                    copy: 'Jump to AI ethics and trust',
-                  }}
-                  mediaType="video"
-                  mediaData={video}
-                />
-              ),
-              addChildren.includes('Content group cards') && (
-                <ContentGroupCards
-                  heading={ContentGroupCardsKnobs.heading}
-                  copy={ContentGroupCardsKnobs.copy}
-                  items={ContentGroupCardsKnobs.items}
-                />
-              ),
-            ]
-          : ''
-      }
-    />
-  );
-};
diff --git a/packages/react/src/components/ContentSection/index.js b/packages/react/src/components/ContentSection/index.js
deleted file mode 100644
index 839eb6c4c00..00000000000
--- a/packages/react/src/components/ContentSection/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-export { default as ContentSection } from './ContentSection';
diff --git a/packages/react/src/components/DotcomShell/DotcomShell.js b/packages/react/src/components/DotcomShell/DotcomShell.js
deleted file mode 100644
index 3884c1df038..00000000000
--- a/packages/react/src/components/DotcomShell/DotcomShell.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { Footer } from '../Footer';
-import { Masthead } from '../Masthead';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * DotcomShell component.
- */
-const DotcomShell = ({ children, footerProps, mastheadProps }) => {
-  return (
-    <>
-      <Masthead {...mastheadProps} />
-      <div
-        data-autoid={`${stablePrefix}--dotcom-shell`}
-        className={`${prefix}--dotcom-shell`}>
-        <div
-          data-autoid={`${stablePrefix}--dotcom-shell__content`}
-          className={`${prefix}--dotcom-shell__content`}>
-          {children}
-        </div>
-      </div>
-      <Footer {...footerProps} />
-    </>
-  );
-};
-
-DotcomShell.propTypes = {
-  /**
-   * Component(s) to render within the UI shell.
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-
-  /**
-   * Props for the Masthead.
-   * See [`<Footer>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-footer--default) for more details.
-   */
-  footerProps: PropTypes.shape({
-    navigation: PropTypes.shape({
-      footerMenu: PropTypes.arrayOf(
-        PropTypes.shape({
-          title: PropTypes.string,
-          links: PropTypes.arrayOf(
-            PropTypes.shape({
-              title: PropTypes.string,
-              url: PropTypes.string,
-            })
-          ),
-        })
-      ),
-      footerThin: PropTypes.arrayOf(
-        PropTypes.shape({
-          title: PropTypes.string,
-          url: PropTypes.string,
-        })
-      ),
-    }),
-    type: PropTypes.oneOf(['default', 'short', 'micro']),
-    langCode: PropTypes.shape({
-      cc: PropTypes.string,
-      lc: PropTypes.string,
-    }),
-    disableLocaleButton: PropTypes.bool,
-    languageOnly: PropTypes.bool,
-    languageItems: PropTypes.arrayOf(PropTypes.shape({})),
-    languageInitialItem: PropTypes.shape({
-      id: PropTypes.string,
-      text: PropTypes.string,
-    }),
-    languageCallback: PropTypes.func,
-  }),
-
-  /**
-   * Props for the Masthead.
-   * See [`<Masthead>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-masthead--default) for more details.
-   */
-  mastheadProps: PropTypes.shape(Masthead.propTypes),
-};
-
-Footer.defaultProps = {
-  footerProps: null,
-  mastheadProps: null,
-};
-
-export default DotcomShell;
diff --git a/packages/react/src/components/DotcomShell/README.stories.mdx b/packages/react/src/components/DotcomShell/README.stories.mdx
deleted file mode 100644
index a228a8169be..00000000000
--- a/packages/react/src/components/DotcomShell/README.stories.mdx
+++ /dev/null
@@ -1,116 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import DotcomShell from './DotcomShell';
-
-# DotcomShell
-
-> The Dotcom shell includes the `Masthead`, and `Footer` components, all wrapped
-> in a UI shell using Carbon's grid.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/DotcomShell)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/DotcomShell)
-
-## Getting started
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/dotcom-shell/dotcom-shell';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the DotcomShell
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-##### Content
-
-```javascript
-import React from 'react';
-import 'yourapplication.scss';
-
-const content = (
-  <>
-    <p>Your content here (probably include something nicer than this! 😄)</p>
-  </>
-);
-
-export default content;
-```
-
-##### DotcomShell
-
-```javascript
-import React from 'react';
-import { DotcomShell } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-import content from 'content';
-
-function App() {
-  return <DotcomShell>{content}</DotcomShell>;
-}
-```
-
-Example with custom `Masthead` and `Footer` props:
-
-```javascript
-import React from 'react';
-import { DotcomShell } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-import content from 'content';
-
-function App() {
-  return (
-    <DotcomShell
-      footerProps={{
-        type: 'short',
-      }}
-      mastheadProps={{
-        platform: 'My Platform Name',
-      }}>
-      {content}
-    </DotcomShell>
-  );
-}
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 And don't forget to import the DotcomShell styles from
-> [@carbon/ibmdotcom-styles](/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import DotcomShell from '@carbon/ibmdotcom-react/es/components/DotcomShell/DotcomShell';
-````
-
-## Props
-
-<Props of={DotcomShell} />
-
-## Stable selectors
-
-| Name                         | Description |
-| ---------------------------- | ----------- |
-| `dds--dotcom-shell`          | Component   |
-| `dds--dotcom-shell__content` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/DotcomShell/__stories__/DotcomShell.stories.js b/packages/react/src/components/DotcomShell/__stories__/DotcomShell.stories.js
deleted file mode 100644
index 38bdbc263d8..00000000000
--- a/packages/react/src/components/DotcomShell/__stories__/DotcomShell.stories.js
+++ /dev/null
@@ -1,469 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, select, text, object } from '@storybook/addon-knobs';
-import Content from './data/content';
-import DotcomShell from '../DotcomShell';
-import languageItems from '../../Footer/__data__/language-items.json';
-import mastheadLinks from '../../Masthead/__stories__/data/MastheadLinks';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const footerTypeOptions = {
-  default: 'default',
-  short: 'short',
-  micro: 'micro',
-};
-
-const mastheadKnobs = () => {
-  return {
-    navigation: 'default',
-    hasProfile: boolean(
-      'show the profile functionality (hasProfile)',
-      true,
-      'Masthead'
-    ),
-    hasSearch: boolean(
-      'show the search functionality (hasSearch)',
-      true,
-      'Masthead'
-    ),
-    placeHolderText: text(
-      'search placeholder (placeHolderText)',
-      'Search all of IBM',
-      'Masthead'
-    ),
-    initialSearchTerm: text(
-      'initial search term (initialSearchTerm)',
-      '',
-      'Masthead'
-    ),
-    selectedMenuItem: text(
-      'selected menu item (selectedMenuItem)',
-      `Consulting & Services`,
-      'Masthead'
-    ),
-  };
-};
-
-const props = {
-  default: () => {
-    return {
-      mastheadProps: mastheadKnobs(),
-      footerProps: {
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-        type: select(
-          'Footer (footerProps): sets the type of footer (type)',
-          footerTypeOptions,
-          footerTypeOptions.default,
-          'Footer'
-        ),
-      },
-    };
-  },
-
-  defaultLanguageOnly: () => {
-    const languageOnly = true;
-    return {
-      mastheadProps: mastheadKnobs(),
-      footerProps: {
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-        type: select(
-          'Footer (footerProps): sets the type of footer (type)',
-          footerTypeOptions,
-          footerTypeOptions.default,
-          'Footer'
-        ),
-        languageOnly,
-        languageItems: !languageOnly
-          ? undefined
-          : object('language dropdown items (languageItems)', languageItems),
-        languageInitialItem: { id: 'en', text: 'English' },
-      },
-    };
-  },
-
-  searchOpenByDefault: () => {
-    return {
-      mastheadProps: {
-        ...mastheadKnobs(),
-        searchOpenOnload: true,
-      },
-      footerProps: {
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-        type: select(
-          'Footer (footerProps): sets the type of footer (type)',
-          footerTypeOptions,
-          footerTypeOptions.default,
-          'Footer'
-        ),
-      },
-    };
-  },
-
-  withPlatform: () => {
-    return {
-      mastheadProps: {
-        ...mastheadKnobs(),
-        platform: {
-          name: 'IBM Cloud',
-          url: 'https://www.ibm.com/cloud',
-        },
-      },
-      footerProps: {
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-      },
-    };
-  },
-
-  shortFooter: () => {
-    return {
-      mastheadProps: mastheadKnobs(),
-      footerProps: {
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-        type: 'short',
-      },
-    };
-  },
-
-  shortFooterLanguageOnly: () => {
-    const languageOnly = true;
-    return {
-      mastheadProps: mastheadKnobs(),
-      footerProps: {
-        type: 'short',
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-        languageOnly,
-        languageItems: !languageOnly
-          ? undefined
-          : object('language dropdown items (languageItems)', languageItems),
-        languageInitialItem: { id: 'en', text: 'English' },
-      },
-    };
-  },
-
-  microFooter: () => {
-    return {
-      mastheadProps: mastheadKnobs(),
-      footerProps: {
-        disableLocaleButton: boolean(
-          'hide the locale button (disableLocaleButton)',
-          false,
-          'Footer'
-        ),
-        type: 'micro',
-      },
-    };
-  },
-
-  microFooterLanguageOnly: () => {
-    const languageOnly = true;
-    return {
-      mastheadProps: mastheadKnobs(),
-      footerProps: {
-        type: 'micro',
-        languageOnly,
-        languageItems: !languageOnly
-          ? undefined
-          : object('language dropdown items (languageItems)', languageItems),
-        languageInitialItem: { id: 'en', text: 'English' },
-        footerProps: {
-          disableLocaleButton: boolean(
-            'hide the locale button (disableLocaleButton)',
-            false,
-            'Footer'
-          ),
-        },
-      },
-    };
-  },
-
-  withL1: () => {
-    return {
-      mastheadProps: {
-        platform: {
-          name: 'Stock Charts',
-          url: 'https://www.example.com',
-        },
-        hasProfile: boolean(
-          'show the profile functionality (hasProfile)',
-          true
-        ),
-        hasSearch: boolean('show the search functionality (hasSearch)', true),
-        placeHolderText: text(
-          'search placeholder (placeHolderText)',
-          'Search all of IBM'
-        ),
-        mastheadL1Data: {
-          navigationL1: mastheadLinks,
-        },
-        selectedMenuItem: text(
-          'selected menu item (selectedMenuItem)',
-          'Lorem ipsum dolor sit amet'
-        ),
-      },
-    };
-  },
-};
-
-export default {
-  title: 'Components/Dotcom shell',
-  parameters: {
-    ...readme.parameters,
-    'carbon-theme': { disabled: true },
-    percy: {
-      name: 'Components|Dotcom shell: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const { mastheadProps, footerProps } = props.default() ?? {};
-
-  console.log(props.default());
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.default()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-export const DefaultLanguageOnly = () => {
-  const { mastheadProps, footerProps } = props.defaultLanguageOnly() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.defaultLanguageOnly()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-DefaultLanguageOnly.story = {
-  name: 'Default (footer language only)',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: Default (footer language only)',
-    },
-  },
-};
-
-export const SearchOpenByDefault = () => {
-  const { mastheadProps, footerProps } = props.searchOpenByDefault() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.searchOpenByDefault()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-SearchOpenByDefault.story = {
-  name: 'Search open',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: Search open',
-    },
-  },
-};
-
-export const WithPlatform = () => {
-  const { mastheadProps, footerProps } = props.withPlatform() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.withPlatform()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-WithPlatform.story = {
-  name: 'With platform',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: With platform',
-    },
-  },
-};
-
-export const ShortFooter = () => {
-  const { mastheadProps, footerProps } = props.shortFooter() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.shortFooter()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-ShortFooter.story = {
-  name: 'With short footer',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: With short footer',
-    },
-  },
-};
-
-export const ShortFooterLanguageOnly = () => {
-  const { mastheadProps, footerProps } = props.shortFooterLanguageOnly() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.shortFooterLanguageOnly()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-ShortFooterLanguageOnly.story = {
-  name: 'With short footer (language only)',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: With short footer (language only)',
-    },
-  },
-};
-
-export const MicroFooter = () => {
-  const { mastheadProps, footerProps } = props.microFooter() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.microFooter()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-MicroFooter.story = {
-  name: 'With micro footer',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: With micro footer',
-    },
-  },
-};
-
-export const MicroFooterLanguageOnly = () => {
-  const { mastheadProps, footerProps } = props.microFooterLanguageOnly() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.microFooterLanguageOnly()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-
-MicroFooterLanguageOnly.story = {
-  name: 'With micro footer (language only)',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: With micro footer (language only)',
-    },
-  },
-};
-
-export const WithL1 = () => {
-  const { mastheadProps, footerProps } = props.withL1() ?? {};
-  return (
-    <DotcomShell
-      mastheadProps={mastheadProps}
-      footerProps={footerProps}
-      {...props.withL1()}>
-      <main id="main-content">
-        <Content withL1={!!mastheadProps.mastheadL1Data} />
-      </main>
-    </DotcomShell>
-  );
-};
-WithL1.story = {
-  name: 'With L1',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Dotcom shell: With L1',
-    },
-  },
-};
diff --git a/packages/react/src/components/DotcomShell/__stories__/data/content.js b/packages/react/src/components/DotcomShell/__stories__/data/content.js
deleted file mode 100644
index 175ed47d82a..00000000000
--- a/packages/react/src/components/DotcomShell/__stories__/data/content.js
+++ /dev/null
@@ -1,429 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content */
-import {
-  CalloutQuote,
-  CalloutWithMedia,
-  ContentBlockCards,
-  ContentBlockSegmented,
-  ContentGroupHorizontal,
-  CTASection,
-  LeadSpaceBlock,
-  LogoGrid,
-  FeatureCard,
-  TableOfContents,
-} from '../../../../index';
-
-import { ArrowRight20 } from '@carbon/icons-react';
-import imgLg16x9 from '../../../../../../storybook-images/assets/720/fpo--16x9--720x405--003.jpg';
-import imgLg16x9_2 from '../../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
-import imgLg1x1 from '../../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
-import imgMd16x9 from '../../../../../../storybook-images/assets/480/fpo--16x9--480x270--003.jpg';
-import imgMd16x9_2 from '../../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
-import imgSm16x9 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--003.jpg';
-import imgSm16x9_2 from '../../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
-import imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--002.jpg';
-import logoAdobe from '../../../../../../storybook-images/assets/logos/logo-adobe.png';
-import logoCisco from '../../../../../../storybook-images/assets/logos/logo-cisco.png';
-import logoDell from '../../../../../../storybook-images/assets/logos/logo-dell.png';
-import logoMicrosoft from '../../../../../../storybook-images/assets/logos/logo-microsoft.png';
-import logoRabobank from '../../../../../../storybook-images/assets/logos/logo-rabobank.png';
-import logoUsBank from '../../../../../../storybook-images/assets/logos/logo-usbank.png';
-
-import PropTypes from 'prop-types';
-import React from 'react';
-
-/**
- * DDS patterns template
- *
- * @returns {*} JSX for Learn template
- */
-const Content = ({ withL1 }) => (
-  <>
-    <TableOfContents
-      menuLabel="Jump to"
-      theme="white"
-      stickyOffset={withL1 ? '96' : '48'}>
-      <a name="section-1" data-title="Lorem ipsum dolor sit amet" />
-      <LeadSpaceBlock
-        title="Lorem ipsum dolor sit amet"
-        copy="Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
-        heading="Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut."
-        mediaType="video"
-        mediaData={{
-          videoId: '1_9h94wo6b',
-          showDescription: true,
-        }}
-        items={{
-          heading: 'Featured products',
-          items: [
-            {
-              type: 'local',
-              copy: 'IBM Cloud Continuous Delivery',
-              cta: {
-                href: 'https://ibm.com',
-              },
-            },
-            {
-              type: 'local',
-              copy: 'UrbanCode',
-              cta: {
-                href: 'https://ibm.com',
-              },
-            },
-            {
-              type: 'local',
-              copy: 'View all products',
-              cta: {
-                href: 'https://ibm.com',
-              },
-            },
-          ],
-        }}
-        cta={{
-          style: 'button',
-          type: 'local',
-          buttons: [
-            {
-              type: 'local',
-              copy: 'Excepteur sint occaecat',
-              href: 'https://example.com/',
-            },
-          ],
-        }}
-      />
-      <a
-        name="section-2"
-        data-title="Pharetra pharetra massa massa ultricies mi quis."
-      />
-      <ContentBlockSegmented
-        heading="Pharetra pharetra massa massa ultricies mi quis."
-        items={[
-          {
-            heading: 'A scelerisque purus semper eget duis at tellus.',
-            copy: 'Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.',
-            cta: {
-              type: 'local',
-              copy: 'Lorem Ipsum dolor sit',
-              href: 'https://example.com',
-            },
-          },
-          {
-            heading: 'A scelerisque purus semper eget duis at tellus.',
-            copy: 'Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.',
-          },
-          {
-            heading: 'A scelerisque purus semper eget duis at tellus.',
-            copy: 'Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.',
-            cta: {
-              type: 'local',
-              copy: 'Lorem Ipsum dolor sit',
-              href: 'https://example.com',
-            },
-          },
-          {
-            heading: 'A scelerisque purus semper eget duis at tellus.',
-            copy: 'Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.',
-          },
-        ]}
-      />
-      <FeatureCard
-        card={{
-          eyebrow: 'scelerisque purus',
-          heading: 'Elementum nibh tellus molestie nunc?',
-          copy: 'Habitant morbi tristique senectus et netus et malesuada fames. Habitant morbi tristique.',
-          cta: {
-            href: 'https://example.com',
-            icon: {
-              src: ArrowRight20,
-            },
-          },
-          image: {
-            defaultSrc: imgLg1x1,
-            alt: 'Image alt text',
-          },
-        }}
-        size={'large'}
-      />
-
-      <a
-        name="section-3"
-        data-title="Elementum nibh tellus molestie nunc non"
-      />
-      <ContentBlockSegmented
-        heading="Elementum nibh tellus molestie nunc non."
-        items={[
-          {
-            heading: 'A scelerisque purus semper eget duis at tellus.',
-            copy: 'Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.',
-            image: {
-              heading: 'Mauris iaculis eget dolor nec hendrerit.',
-              image: {
-                sources: [
-                  {
-                    src: imgSm16x9,
-                    breakpoint: 320,
-                  },
-                  {
-                    src: imgMd16x9,
-                    breakpoint: 400,
-                  },
-                  {
-                    src: imgLg16x9,
-                    breakpoint: 672,
-                  },
-                ],
-                alt: 'Image alt text',
-                defaultSrc: imgLg16x9,
-              },
-            },
-            cta: {
-              type: 'local',
-              copy: 'Lorem Ipsum dolor sit',
-              href: 'https://example.com',
-            },
-          },
-          {
-            heading: 'A scelerisque purus semper eget duis at tellus.',
-            copy: 'Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus et netus et malesuada fames.',
-            image: {
-              heading: 'Mauris iaculis eget dolor nec hendrerit.',
-              image: {
-                sources: [
-                  {
-                    src: imgSm16x9_2,
-                    breakpoint: 320,
-                  },
-                  {
-                    src: imgMd16x9_2,
-                    breakpoint: 400,
-                  },
-                  {
-                    src: imgLg16x9_2,
-                    breakpoint: 672,
-                  },
-                ],
-                alt: 'Image alt text',
-                defaultSrc: imgLg16x9_2,
-              },
-            },
-          },
-        ]}
-        cta={{
-          style: 'card',
-          disableImage: true,
-          type: 'video',
-          media: {
-            src: '1_9h94wo6b',
-            type: 'video',
-          },
-        }}
-        mediaType="image"
-      />
-
-      <CalloutWithMedia
-        heading="Mauris ultrices eros in cursus"
-        copy="Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada proin libero nunc consequat. In est ante in nibh mauris cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est velit egestas dui."
-        mediaType="video"
-        mediaData={{
-          videoId: '1_9h94wo6b',
-        }}
-      />
-
-      <a name="section-4" data-title="Tincidunt ornare massa" />
-      <ContentGroupHorizontal
-        heading="Tincidunt ornare massa"
-        items={[
-          {
-            eyebrow: 'Lorem ipsum',
-            heading: 'Aliquam condimentum',
-            copy: 'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
-            cta: {
-              heading: 'Aliquam condimentum',
-              items: [
-                {
-                  type: 'local',
-                  copy: 'Link text',
-                  href: 'https://example.com',
-                },
-                {
-                  type: 'external',
-                  copy: 'External link text',
-                  href: 'https://example.com',
-                },
-              ],
-            },
-          },
-          {
-            eyebrow: 'Lorem ipsum',
-            heading: 'Aliquam condimentum',
-            copy: 'Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.',
-            cta: {
-              heading: 'Aliquam condimentum',
-              items: [
-                {
-                  type: 'local',
-                  copy: 'Link text',
-                  href: 'https://example.com',
-                },
-                {
-                  type: 'external',
-                  copy: 'External link text',
-                  href: 'https://example.com',
-                },
-              ],
-            },
-          },
-        ]}
-      />
-
-      <a name="section-5" data-title="Lobortis elementum nibh tellus" />
-      <LogoGrid
-        heading="Lobortis elementum nibh tellus"
-        logosGroup={[
-          {
-            label: 'Microsoft',
-            imgSrc: logoMicrosoft,
-            altText: 'Microsoft',
-          },
-          {
-            label: 'Dell',
-            imgSrc: logoDell,
-            altText: 'Dell',
-          },
-          {
-            label: 'Rabobank',
-            imgSrc: logoRabobank,
-            altText: 'Rabobank',
-          },
-          {
-            label: 'Adobe',
-            imgSrc: logoAdobe,
-            altText: 'Adobe',
-          },
-          {
-            label: 'US Bank',
-            imgSrc: logoUsBank,
-            altText: 'US Bank',
-          },
-          {
-            label: 'Cisco',
-            imgSrc: logoCisco,
-            altText: 'Cisco',
-          },
-        ]}
-      />
-
-      <a name="section-6" data-title="Aliquam condimentum interdum" />
-      <ContentBlockCards
-        heading="Aliquam condimentum interdum"
-        cards={[
-          {
-            image: {
-              defaultSrc: imgXlg4x3,
-              alt: 'Image alt text',
-            },
-            eyebrow: 'Topic',
-            heading: 'Natural language processing.',
-            cta: {
-              href: 'https://www.example.com',
-            },
-          },
-          {
-            image: {
-              defaultSrc: imgXlg4x3,
-              alt: 'Image alt text',
-            },
-            eyebrow: 'Topic',
-            heading: 'Natural language processing.',
-            cta: {
-              href: 'https://www.example.com',
-            },
-          },
-          {
-            image: {
-              defaultSrc: imgXlg4x3,
-              alt: 'Image alt text',
-            },
-            eyebrow: 'Topic',
-            heading: 'Natural language processing.',
-            cta: {
-              href: 'https://www.example.com',
-            },
-          },
-        ]}
-      />
-      <a name="section-7" data-title="Duis aute irure dolor in reprehenderit" />
-      <CalloutQuote
-        quote={{
-          copy: 'Duis aute irure dolor in reprehenderit',
-          source: {
-            heading: 'Lorem ipsum',
-            copy: 'dolor sit amet',
-          },
-          cta: {
-            copy: 'Link with Icon',
-            type: 'local',
-            href: 'https://example.com',
-          },
-        }}
-      />
-    </TableOfContents>
-    <div className="bx--grid" style={{ backgroundColor: '#f4f4f4' }}>
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <CTASection
-            theme="g10"
-            cta={{
-              style: 'button',
-              type: 'local',
-              buttons: [
-                {
-                  type: 'local',
-                  copy: 'Contact sales',
-                  href: 'https://example.com/',
-                },
-              ],
-            }}
-            items={[
-              {
-                heading: 'Get connected',
-                copy: 'IBM DevOps partners have a wide range of expertise. Find one to build the right solution for you.',
-                cta: {
-                  copy: 'Find a partner',
-                  type: 'local',
-                  href: 'https://example.com/',
-                },
-              },
-              {
-                heading: 'Learn how',
-                copy: 'Dig into more self-directed learning about DevOps methodologies.',
-                cta: {
-                  copy: 'Browse tutorials',
-                  type: 'local',
-                  href: 'https://example.com/',
-                },
-              },
-            ]}
-            heading="Take the next step"
-            copy="Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs."
-          />
-        </div>
-      </div>
-    </div>
-  </>
-);
-
-Content.propTypes = {
-  /**
-   * `true` if content is rendered with an L1 on the page
-   */
-  withL1: PropTypes.bool,
-};
-
-export default Content;
diff --git a/packages/react/src/components/DotcomShell/index.js b/packages/react/src/components/DotcomShell/index.js
deleted file mode 100644
index f329aeb3d1d..00000000000
--- a/packages/react/src/components/DotcomShell/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as DotcomShell } from './DotcomShell';
diff --git a/packages/react/src/components/ExpressiveModal/ExpressiveModal.js b/packages/react/src/components/ExpressiveModal/ExpressiveModal.js
deleted file mode 100644
index e69ae64fd1b..00000000000
--- a/packages/react/src/components/ExpressiveModal/ExpressiveModal.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect, useState } from 'react';
-import classNames from 'classnames';
-import ComposedModal from '../../internal/vendor/carbon-components-react/components/ComposedModal/ComposedModal';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import ExpressiveModalCloseBtn from './ExpressiveModalCloseBtn';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Expressive Modal.
- */
-const ExpressiveModal = ({
-  open,
-  className,
-  children,
-  fullwidth,
-  onClose,
-  ...props
-}) => {
-  const [isOpen, setIsOpen] = useState(open);
-
-  useEffect(manageOpenState, [open]);
-
-  return (
-    <ComposedModal
-      onClose={onClose}
-      open={isOpen}
-      data-autoid={`${stablePrefix}--expressive-modal`}
-      className={classNames(`${prefix}--modal--expressive`, className, {
-        [`${prefix}--modal--expressive--fullwidth`]: fullwidth,
-      })}
-      selectorPrimaryFocus={`.${prefix}--modal-close`}
-      {...props}>
-      <ExpressiveModalCloseBtn onClick={closeModal} />
-      {children}
-    </ComposedModal>
-  );
-
-  /**
-   * Close modal
-   */
-  function closeModal() {
-    if (onClose?.() !== false) {
-      setIsOpen(false);
-    }
-  }
-
-  /**
-   * Manage open prop and isOpen state
-   */
-  function manageOpenState() {
-    setIsOpen(open);
-  }
-};
-
-ExpressiveModal.propTypes = {
-  /**
-   * Sets whether the Modal is fullwidth or not.
-   */
-  fullwidth: PropTypes.bool,
-
-  /**
-   * Sets whether the Modal is open/close.
-   */
-  open: PropTypes.bool,
-
-  /**
-   * Custom classname(s) for the Modal.
-   */
-  className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
-
-  /**
-   * Components/Elements to be rendered within the Modal.
-   */
-  children: PropTypes.node,
-
-  /**
-   * Function to be triggered on close of Modal.
-   */
-  onClose: PropTypes.func,
-};
-
-ExpressiveModal.defaultProps = {
-  open: false,
-};
-
-export default ExpressiveModal;
diff --git a/packages/react/src/components/ExpressiveModal/ExpressiveModalCloseBtn.js b/packages/react/src/components/ExpressiveModal/ExpressiveModalCloseBtn.js
deleted file mode 100644
index 3138f584f10..00000000000
--- a/packages/react/src/components/ExpressiveModal/ExpressiveModalCloseBtn.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 classNames from 'classnames';
-import Close20 from '@carbon/icons-react/es/close/20';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Close button for Expressive Modal.
- */
-const ExpressiveModalCloseBtn = ({
-  btnClassName,
-  iconDescription,
-  iconClassName,
-  ...props
-}) => {
-  return (
-    <button
-      data-autoid={`${stablePrefix}--expressive-modal__close`}
-      className={classNames(`${prefix}--modal-close`, btnClassName)}
-      title={iconDescription}
-      type="button"
-      {...props}>
-      <Close20
-        aria-label={iconDescription}
-        className={classNames(`${prefix}--modal-close__icon`, iconClassName)}
-      />
-    </button>
-  );
-};
-
-ExpressiveModalCloseBtn.propTypes = {
-  /**
-   * A custom class name to the button.
-   */
-  btnClassName: PropTypes.string,
-
-  /**
-   * A custom class name to the icon.
-   */
-  iconClassName: PropTypes.string,
-
-  /**
-   * Accessible description that describes icon action.
-   */
-  iconDescription: PropTypes.string,
-};
-
-ExpressiveModalCloseBtn.defaultProps = {
-  iconDescription: 'Close',
-};
-
-export default ExpressiveModalCloseBtn;
diff --git a/packages/react/src/components/ExpressiveModal/README.stories.mdx b/packages/react/src/components/ExpressiveModal/README.stories.mdx
deleted file mode 100644
index d53171e028a..00000000000
--- a/packages/react/src/components/ExpressiveModal/README.stories.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ExpressiveModal from './ExpressiveModal';
-
-# Expressive modal
-
-> The expressive modal is based on
-> [Carbon's Modal component](https://www.carbondesignsystem.com/components/modal/code)
-> with slight styling updates to increase readability and reduce strain.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ExpressiveModal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ExpressiveModal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/expressive-modal/expressive-modal';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ExpressiveModal styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { ExpressiveModal } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <>
-      <ExpressiveModal open={true}>Hello world!</ExpressiveModal>
-    </>
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-> 💡 See
-> [Carbon's Modal component](https://www.carbondesignsystem.com/components/modal/code)
-> for props and other usage documentation.
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the expressive modal styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import ExpressiveModal from '@carbon/ibmdotcom-react/es/components/ExpressiveModal/ExpressiveModal';
-````
-
-## Props
-
-<Props of={ExpressiveModal} />
-
-## Stable selectors
-
-| Name                           | Description |
-| ------------------------------ | ----------- |
-| `dds--expressive-modal`        | Component   |
-| `dds--expressive-modal__close` | Interactive |
-
-## Stable selectors
-
-| Name                           | Description |
-| ------------------------------ | ----------- |
-| `dds--expressive-modal`        | Component   |
-| `dds--expressive-modal__close` | Interactive |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ExpressiveModal/__stories__/ExpressiveModal.stories.js b/packages/react/src/components/ExpressiveModal/__stories__/ExpressiveModal.stories.js
deleted file mode 100644
index 4a7d4c3b1d8..00000000000
--- a/packages/react/src/components/ExpressiveModal/__stories__/ExpressiveModal.stories.js
+++ /dev/null
@@ -1,99 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { ButtonGroup } from '../../ButtonGroup';
-import { ExpressiveModal } from '../';
-import { ModalBody } from 'carbon-components-react';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-/**
- * Dummy content for the modal story
- *
- * @returns {object} JSX object
- */
-function StoryContent({ title, paragraph, button }) {
-  return (
-    <div>
-      {title ? <h1 style={{ marginBottom: '16px' }}>{title}</h1> : null}
-      {paragraph ? <p style={{ marginBottom: '48px' }}>{paragraph}</p> : null}
-      {button ? (
-        <ButtonGroup
-          buttons={[
-            {
-              href: '',
-              copy: button,
-              renderIcon: ArrowRight20,
-            },
-          ]}
-        />
-      ) : null}
-    </div>
-  );
-}
-
-const props = {
-  ExpressiveModal: () => ({
-    open: boolean('Toggle modal', true),
-  }),
-  Other: () => ({
-    title: text('Title (placeholder)', 'Lorem ipsum dolor sit amet'),
-    paragraph: text(
-      'Paragraph (placeholder)',
-      'Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit.'
-    ),
-    button: text('Button (placeholder)', 'Lorem ipsum dolor'),
-  }),
-};
-
-export default {
-  title: 'Components/Expressive modal',
-  parameters: {
-    ...readme.parameters,
-    'carbon-theme': { disabled: true },
-    percy: {
-      name: 'Components|Expressive modal: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const { open } = props?.ExpressiveModal() ?? {};
-  const { title, paragraph, button } = props?.Other() ?? {};
-  return (
-    <ExpressiveModal open={open} className="bx--modal--expressive">
-      <ModalBody>
-        <StoryContent title={title} paragraph={paragraph} button={button} />
-      </ModalBody>
-    </ExpressiveModal>
-  );
-};
-
-export const Expanded = () => {
-  const { open } = props?.ExpressiveModal() ?? {};
-  const { title, paragraph, button } = props?.Other() ?? {};
-  return (
-    <ExpressiveModal
-      open={open}
-      fullwidth={true}
-      className="bx--modal--expressive">
-      <ModalBody>
-        <StoryContent title={title} paragraph={paragraph} button={button} />
-      </ModalBody>
-    </ExpressiveModal>
-  );
-};
-
-Expanded.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Expressive modal: Expanded',
-    },
-  },
-};
diff --git a/packages/react/src/components/ExpressiveModal/__tests__/ExpressiveModal.test.js b/packages/react/src/components/ExpressiveModal/__tests__/ExpressiveModal.test.js
deleted file mode 100644
index c8224be18f9..00000000000
--- a/packages/react/src/components/ExpressiveModal/__tests__/ExpressiveModal.test.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { act } from 'react-dom/test-utils';
-import ExpressiveModal from '../ExpressiveModal';
-import MockedComponent from './mocks/mock-component';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-describe('<ExpressiveModal />', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('opens and closes on command', () => {
-    act(() => {
-      ReactDOM.render(<MockedComponent />, container);
-    });
-
-    const expressiveModal = container.querySelector('.bx--modal--expressive');
-    const expressiveModalCloseBtn = container.querySelector('.bx--modal-close');
-    const openBtn = container.querySelector('button');
-
-    expect(expressiveModal.classList.contains('bx--modal')).toBeTruthy();
-    expect(expressiveModal.classList.contains('is-visible')).toBeFalsy();
-
-    // open
-    act(() => {
-      openBtn.dispatchEvent(new MouseEvent('click', { bubbles: true }));
-    });
-
-    expect(expressiveModal.classList.contains('is-visible')).toBeTruthy();
-
-    // close
-    act(() => {
-      expressiveModalCloseBtn.dispatchEvent(
-        new MouseEvent('click', { bubbles: true })
-      );
-    });
-
-    expect(expressiveModal.classList.contains('is-visible')).toBeFalsy();
-  });
-
-  it('disable close event', () => {
-    act(() => {
-      ReactDOM.render(
-        <ExpressiveModal open={true} onClose={() => false} />,
-        container
-      );
-    });
-
-    const expressiveModal = container.querySelector('.bx--modal--expressive');
-    const expressiveModalCloseBtn = container.querySelector('.bx--modal-close');
-
-    expect(expressiveModal.classList.contains('is-visible')).toBeTruthy();
-
-    // open
-    act(() => {
-      expressiveModalCloseBtn.dispatchEvent(
-        new MouseEvent('click', { bubbles: true })
-      );
-    });
-
-    expect(expressiveModal.classList.contains('is-visible')).toBeTruthy();
-  });
-});
diff --git a/packages/react/src/components/ExpressiveModal/__tests__/mocks/mock-component.js b/packages/react/src/components/ExpressiveModal/__tests__/mocks/mock-component.js
deleted file mode 100644
index 00c2a2ab334..00000000000
--- a/packages/react/src/components/ExpressiveModal/__tests__/mocks/mock-component.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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, { useState } from 'react';
-import ExpressiveModal from '../../ExpressiveModal';
-
-/**
- * wrapper for testing open/close expressive modal
- *
- * @returns {object} JSX object
- */
-function MockComponent() {
-  const [isOpen, setIsOpen] = useState(false);
-
-  return (
-    <>
-      <button onClick={() => setIsOpen(true)} />
-      <ExpressiveModal open={isOpen} />
-    </>
-  );
-}
-
-export default MockComponent;
diff --git a/packages/react/src/components/ExpressiveModal/index.js b/packages/react/src/components/ExpressiveModal/index.js
deleted file mode 100644
index 4a073f77965..00000000000
--- a/packages/react/src/components/ExpressiveModal/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as ExpressiveModal } from './ExpressiveModal';
diff --git a/packages/react/src/components/FeatureCard/FeatureCard.js b/packages/react/src/components/FeatureCard/FeatureCard.js
deleted file mode 100644
index bb9193e0d33..00000000000
--- a/packages/react/src/components/FeatureCard/FeatureCard.js
+++ /dev/null
@@ -1,137 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { Card } from '../Card';
-import classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Featured Card Component
- *
- * @param {object} props props object
- * @param {object} props.card section card object
- * @param {Function} props.onClick onClick function
- * @returns {*} FeatureCard JSX component
- */
-const FeatureCard = ({ card, size, ...otherProps }) => {
-  const { image, cta, copy } = card;
-
-  return (
-    cta &&
-    image && (
-      <div
-        className={classNames({
-          [`${prefix}--feature-card`]: size == 'medium',
-          [`${prefix}--feature-card-large`]: size == 'large',
-          [`${prefix}--feature-card-large_no-copy-text`]:
-            size === 'large' && !copy,
-        })}
-        data-autoid={
-          size === 'large'
-            ? `${stablePrefix}--feature-card-large`
-            : `${stablePrefix}--feature-card`
-        }>
-        <Card
-          customClassName={classNames({
-            [`${prefix}--feature-card__card`]: size === 'medium',
-            [`${prefix}--feature-card-large__card`]: size === 'large',
-          })}
-          {...card}
-          {...otherProps}
-        />
-      </div>
-    )
-  );
-};
-
-FeatureCard.propTypes = {
-  /**
-   * "Eyebrow" text above copy and CTA.
-   */
-  eyebrow: PropTypes.string,
-
-  /**
-   * Title of the Card item.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Body text for the card.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Object containing Feature Card details.
-   * In summary, has the following structure.
-   *
-   * | Name      | Data Type | Description                                                                                                                                                                        |
-   * | --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-   * | `heading` | String    | Title of the Card item.                                                                                                                                                            |
-   * | `image`   | Object    | Image object used in the FeatureCard component. See [`<Image>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-image--default#props) for full usage details. |
-   * | `cta`     | Object    | Object containing target and href of link. See below.                                                                                                                              |
-   *
-   * CTA object has the following structure in summary:
-   *
-   * | Name   | Data Type | Description                       |
-   * | ------ | --------- | --------------------------------- |
-   * | `href` | String    | Url of the FeatureCard component. |
-   *
-   * See [`<Card>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-card--static#props) for full usage details.
-   */
-  card: PropTypes.shape({
-    heading: PropTypes.string,
-    eyebrow: PropTypes.string,
-    copy: PropTypes.string,
-    cta: PropTypes.shape({
-      copy: PropTypes.string,
-      href: PropTypes.string,
-      type: PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-    }),
-    image: PropTypes.shape({
-      classname: PropTypes.string,
-      sources: PropTypes.arrayOf(
-        PropTypes.shape({
-          src: PropTypes.string,
-          breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        })
-      ),
-      defaultSrc: PropTypes.string.isRequired,
-      alt: PropTypes.string.isRequired,
-      longDescription: PropTypes.string,
-    }),
-    inverse: PropTypes.bool,
-    customClassName: PropTypes.string,
-    type: PropTypes.oneOf(['link']),
-  }).isRequired,
-
-  /**
-   * The handler for `onclick` event.
-   */
-  onClick: PropTypes.func,
-
-  /**
-   * Size of Feature Card. Choose from:
-   *
-   * | Name    | Description                                                  |
-   * | ------- | -------------------------------------------------------------|
-   * | `medium`| Default Feature Card variant                                 |
-   * | `large` | Large Feature Card variant that contains eyebrow and heading |
-   */
-  size: PropTypes.oneOf(['medium', 'large']),
-};
-
-FeatureCard.defaultProps = {
-  size: 'medium',
-};
-
-export default FeatureCard;
diff --git a/packages/react/src/components/FeatureCard/README.stories.mdx b/packages/react/src/components/FeatureCard/README.stories.mdx
deleted file mode 100644
index 1db24efe68f..00000000000
--- a/packages/react/src/components/FeatureCard/README.stories.mdx
+++ /dev/null
@@ -1,111 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import FeatureCard from './FeatureCard';
-
-# Feature Card
-
-> Feature cards consist of an image, heading, copy, and CTA. Additionally, the Feature Card Large variation also includes an eyebrow.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/FeatureCard)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/FeatureCard)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the FeatureCard
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FeatureCard } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-const card = {
-  cta: {
-    href: 'https://www.example.com',
-  },
-  heading: "Explore AI use cases in all industries",
-  image: {
-    defaultSrc:
-      'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-    alt: 'Image alt text',
-  },
-};
-
-function App() {
-  return <FeatureCard card={card} />;
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Here's an example using the Feature Card Large variant (previously known as `FeatureCardBlockLarge`)
-
-```javascript
-const largeCard = {
-  cta: {
-    href: 'https://www.example.com',
-  },
-  eyebrow: "This is an eyebrow",
-  heading: "Explore AI use cases in all industries",
-  copy: "This is a copy",
-  image: {
-    defaultSrc:
-      'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-    alt: 'Image alt text',
-  },
-};
-
-function App() {
-  return <Feature card={card} size={'large'}/>;
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the FeatureCard styles *and* add the CSS custom properties flag from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import FeatureCard from '@carbon/ibmdotcom-react/es/components/FeatureCard/FeatureCard';
-```
-
-## Props
-
-<Props of={FeatureCard} />
-
-## Stable selectors
-
-| Name                | Description |
-| ------------------- | ----------- |
-| `dds--feature-card` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/FeatureCard/__stories__/FeatureCard.stories.js b/packages/react/src/components/FeatureCard/__stories__/FeatureCard.stories.js
deleted file mode 100644
index 8f0d398388d..00000000000
--- a/packages/react/src/components/FeatureCard/__stories__/FeatureCard.stories.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import FeatureCard from '../FeatureCard';
-import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
-import imgMax1x1 from '../../../../../storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
-import imgMd2x1 from '../../../../../storybook-images/assets/480/fpo--2x1--480x240--002.jpg';
-import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--002.jpg';
-import imgXlg2x1 from '../../../../../storybook-images/assets/1312/fpo--2x1--1312x656--002.jpg';
-import mediumImgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import { text } from '@storybook/addon-knobs';
-
-export default {
-  title: 'Components/Feature card',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Feature card: Default',
-    },
-  },
-};
-
-const props = {
-  default: () => {
-    const knobs = {
-      card: {
-        heading: text(
-          'Card heading:',
-          'Explore AI use cases in all industries'
-        ),
-        image: {
-          defaultSrc: mediumImgLg1x1,
-          alt: 'Image alt text',
-        },
-        cta: {
-          href: 'https://www.example.com',
-          icon: {
-            src: ArrowRight20,
-          },
-        },
-      },
-    };
-    return knobs;
-  },
-  large: () => {
-    const knobs = {
-      card: {
-        eyebrow: text('Card eyebrow:', 'This is an eyebrow'),
-        heading: text(
-          'Card heading:',
-          'Explore AI use cases in all industries'
-        ),
-        copy: text(
-          'Card copy:',
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-        ),
-        cta: {
-          href: 'https://www.example.com',
-          icon: {
-            src: ArrowRight20,
-          },
-        },
-        image: {
-          sources: [
-            {
-              src: imgSm2x1,
-              breakpoint: 'sm',
-            },
-            {
-              src: imgMd2x1,
-              breakpoint: 'md',
-            },
-            {
-              src: imgLg1x1,
-              breakpoint: 991,
-            },
-            {
-              src: imgXlg2x1,
-              breakpoint: 'lg',
-            },
-            {
-              src: imgMax1x1,
-              breakpoint: 'xlg',
-            },
-          ],
-          defaultSrc: imgXlg2x1,
-          alt: 'Image alt text',
-        },
-      },
-    };
-    return knobs;
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div
-          style={{ paddingTop: '20px' }}
-          className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <FeatureCard size={'medium'} {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  name: 'Medium',
-  parameters: {
-    percy: {
-      name: 'Components|Feature card: Medium',
-    },
-  },
-};
-
-export const Large = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div
-          style={{ paddingTop: '20px' }}
-          className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-2">
-          <FeatureCard size={'large'} {...props.large()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Large.story = {
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Feature card: Large',
-    },
-  },
-};
diff --git a/packages/react/src/components/FeatureCard/__tests__/FeatureCard.test.js b/packages/react/src/components/FeatureCard/__tests__/FeatureCard.test.js
deleted file mode 100644
index 9aa2c46104c..00000000000
--- a/packages/react/src/components/FeatureCard/__tests__/FeatureCard.test.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import FeatureCard from '../FeatureCard';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-describe('Callout', () => {
-  it('renders as expected', () => {
-    const featureCard = shallow(
-      <FeatureCard
-        card={{
-          heading: 'lorem ipsum',
-          image: {
-            defaultSrc:
-              'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-            alt: 'Image alt text',
-          },
-          cta: {
-            href: 'https://example.com',
-            icon: {
-              src: ArrowRight20,
-            },
-          },
-        }}
-      />
-    );
-    expect(featureCard.find('.bx--feature-card')).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/FeatureCard/index.js b/packages/react/src/components/FeatureCard/index.js
deleted file mode 100644
index 5f3c8c82f2a..00000000000
--- a/packages/react/src/components/FeatureCard/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as FeatureCard } from './FeatureCard';
diff --git a/packages/react/src/components/FeatureCardBlockLarge/FeatureCardBlockLarge.js b/packages/react/src/components/FeatureCardBlockLarge/FeatureCardBlockLarge.js
deleted file mode 100644
index 93296542e96..00000000000
--- a/packages/react/src/components/FeatureCardBlockLarge/FeatureCardBlockLarge.js
+++ /dev/null
@@ -1,103 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { Card } from '../Card';
-import classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Featured Card Block Large Component.
- * Note: Deprecated, use FeatureCard with size='large' attribute.
- */
-const FeatureCardBlockLarge = (props) => {
-  return (
-    props.eyebrow &&
-    props.heading &&
-    props.image &&
-    props.cta && (
-      <section
-        className={classNames(`${prefix}--feature-card-block-large`, {
-          [`${prefix}--feature-card-block-large_no-copy-text`]: !props.copy,
-        })}
-        data-autoid={`${stablePrefix}--feature-card-block-large`}>
-        <div className={`${prefix}--feature-card-block-large__container`}>
-          <Card
-            customClassName={`${prefix}--feature-card-block-large__card`}
-            {...props}
-          />
-        </div>
-      </section>
-    )
-  );
-};
-
-FeatureCardBlockLarge.propTypes = {
-  /**
-   * "Eyebrow" text above copy and CTA.
-   */
-  eyebrow: PropTypes.string.isRequired,
-
-  /**
-   * Title of the Card item.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Body text for the card.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Object containing target and href of link. Has the following structure in summary:
-   *
-   * | Name   | Data Type | Description                                 |
-   * | ------ | --------- | ------------------------------------------- |
-   * | `href` | String    | Url of the FeatureCardBlockLarge component. |
-   *
-   * See [`<Card>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-card--static#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-  }).isRequired,
-
-  /**
-   * Contains source and alt text properties.
-   * See [`<Image>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-image--default#props) for full usage details.
-   */
-  image: PropTypes.shape({
-    classname: PropTypes.string,
-    sources: PropTypes.arrayOf(
-      PropTypes.shape({
-        src: PropTypes.string,
-        breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      })
-    ),
-    defaultSrc: PropTypes.string.isRequired,
-    alt: PropTypes.string.isRequired,
-    longDescription: PropTypes.string,
-  }).isRequired,
-};
-
-export default deprecate(
-  FeatureCardBlockLarge,
-  `The FeatureCardBlockLarge component has been deprecated in favor of the FeatureCard component. ` +
-    `See FeatureCard's size attribute documentation for more information.`
-);
diff --git a/packages/react/src/components/FeatureCardBlockLarge/README.stories.mdx b/packages/react/src/components/FeatureCardBlockLarge/README.stories.mdx
deleted file mode 100644
index ab212e55ad9..00000000000
--- a/packages/react/src/components/FeatureCardBlockLarge/README.stories.mdx
+++ /dev/null
@@ -1,101 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import FeatureCardBlockLarge from './FeatureCardBlockLarge';
-
-# Feature Card Block Large
-
-> The Feature Card Block Large pattern is to be utilized within IBM.com.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/FeatureCardBlockLarge)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/FeatureCardBlockLarge)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-```scss
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card-block-large/feature-card-block-large.scss';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> FeatureCardBlockLarge styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FeatureCardBlockLarge } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-const heading = 'Lorem ipsum dolor sit amet.';
-const card = [
-  {
-    cta: {
-      href: 'https://www.example.com',
-    },
-    image: {
-      defaultSrc:
-        'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-      alt: 'Image alt text',
-    },
-  },
-];
-function App() {
-  return (
-    <FeatureCardBlockLarge
-      eyebrow={eyebrow}
-      heading={heading}
-      copy={copy}
-      cta={cta}
-      image={image}
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line on your `.env` file at the root of your project,
-[see more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage)
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the FeatureCardBlockLarge styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import FeatureCardBlockLarge from '@carbon/ibmdotcom-react/es/components/FeatureCardBlockLarge/FeatureCardBlockLarge';
-```
-
-## Props
-
-<Props of={FeatureCardBlockLarge} />
-
-## Stable selectors
-
-| Name                            | Description |
-| ------------------------------- | ----------- |
-| `dds--feature-card-block-large` | Component   |
-
-## Image Assets
-
-Note that the `<FeatureCardBlockLarge />` uses custom breakpoints depending if
-`copy` prop has been passed in. If there is a copy, please pass a 1:1 ratio
-image for the 991px breakpoint. If there is no copy, please pass in a 1:1 ratio
-image for the 751px breakpoint. For an example of this, take a look at
-`FeatureCardBlockLarge`'s image prop in the story.
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/FeatureCardBlockLarge/index.js b/packages/react/src/components/FeatureCardBlockLarge/index.js
deleted file mode 100644
index 0bc35649789..00000000000
--- a/packages/react/src/components/FeatureCardBlockLarge/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-export { default as FeatureCardBlockLarge } from './FeatureCardBlockLarge';
diff --git a/packages/react/src/components/FeatureCardBlockMedium/FeatureCardBlockMedium.js b/packages/react/src/components/FeatureCardBlockMedium/FeatureCardBlockMedium.js
deleted file mode 100644
index ba8b2b991fe..00000000000
--- a/packages/react/src/components/FeatureCardBlockMedium/FeatureCardBlockMedium.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import { FeatureCard } from '../FeatureCard';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Featured Card Component.
- */
-const FeatureCardBlockMedium = ({ heading, card, ...otherProps }) => {
-  return (
-    heading &&
-    card.cta && (
-      <section
-        className={`${prefix}--feature-card-block-medium`}
-        data-autoid={`${stablePrefix}--feature-card-block-medium`}>
-        <h3 className={`${prefix}--feature-card-block-medium__heading`}>
-          {heading}
-        </h3>
-        <FeatureCard card={card} {...otherProps} />
-      </section>
-    )
-  );
-};
-
-FeatureCardBlockMedium.propTypes = {
-  /**
-   * Main title of the pattern.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Object containing Feature Card details. Has the following structure in summary:
-   *
-   * | Name      | Data Type | Description                                                                                                                                                                        |
-   * | --------- | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-   * | `heading` | String    | Title of the Card item.                                                                                                                                                            |
-   * | `image`   | Object    | Image object used in the FeatureCard component. See [`<Image>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-image--default#props) for full usage details. |
-   * | `cta`     | Object    | Object containing target and href of link. See `cta` below.                                                                                                                        |
-   *
-   * `cta`:
-   *
-   * | Name   | Data Type | Description                       |
-   * | ------ | --------- | --------------------------------- |
-   * | `href` | String    | Url of the FeatureCard component. |
-   *
-   * See [`<FeatureCard>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/patterns-blocks-featurecard--default#props) for full usage details.
-   */
-  card: PropTypes.shape({
-    heading: PropTypes.string,
-    eyebrow: PropTypes.string,
-    copy: PropTypes.string,
-    cta: PropTypes.shape({
-      copy: PropTypes.string,
-      href: PropTypes.string,
-      type: PropTypes.oneOfType([
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-        PropTypes.arrayOf(
-          PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-        ),
-      ]),
-    }).isRequired,
-    image: PropTypes.shape({
-      classname: PropTypes.string,
-      sources: PropTypes.arrayOf(
-        PropTypes.shape({
-          src: PropTypes.string,
-          breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-        })
-      ),
-      defaultSrc: PropTypes.string.isRequired,
-      alt: PropTypes.string.isRequired,
-      longDescription: PropTypes.string,
-    }),
-    inverse: PropTypes.bool,
-    customClassName: PropTypes.string,
-    type: PropTypes.oneOf(['link']),
-  }).isRequired,
-};
-
-export default deprecate(
-  FeatureCardBlockMedium,
-  `The FeatureCardBlockMedium component has been deprecated in favor of the FeatureCard component.`
-);
diff --git a/packages/react/src/components/FeatureCardBlockMedium/README.stories.mdx b/packages/react/src/components/FeatureCardBlockMedium/README.stories.mdx
deleted file mode 100644
index ce6f3d9449a..00000000000
--- a/packages/react/src/components/FeatureCardBlockMedium/README.stories.mdx
+++ /dev/null
@@ -1,88 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import FeatureCardBlockMedium from './FeatureCardBlockMedium';
-
-# Feature Card Block Medium
-
-> The Feature Card Block Medium pattern is to be utilized within IBM.com.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/FeatureCardBlockMedium)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/FeatureCardBlockMedium)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card-block-medium/feature-card-block-medium';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> FeatureCardBlockMedium styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { FeatureCardBlockMedium } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-const heading = 'Lorem ipsum dolor sit amet.';
-const card = {
-  heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  cta: {
-    href: 'https://www.example.com',
-  },
-  image: {
-    defaultSrc:
-      'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-    alt: 'Image alt text',
-  },
-};
-function App() {
-  return <FeatureCardBlockMedium heading={heading} card={card} />;
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the FeatureCardBlockMedium styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import FeatureCardBlockMedium from '@carbon/ibmdotcom-react/es/components/FeatureCardBlockMedium/FeatureCardBlockMedium';
-```
-
-## Props
-
-<Props of={FeatureCardBlockMedium} />
-
-## Stable selectors
-
-| Name                             | Description |
-| -------------------------------- | ----------- |
-| `dds--feature-card-block-medium` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/FeatureCardBlockMedium/index.js b/packages/react/src/components/FeatureCardBlockMedium/index.js
deleted file mode 100644
index 643611007c8..00000000000
--- a/packages/react/src/components/FeatureCardBlockMedium/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-export { default as FeatureCardBlockMedium } from './FeatureCardBlockMedium';
diff --git a/packages/react/src/components/FeatureSection/README.stories.mdx b/packages/react/src/components/FeatureSection/README.stories.mdx
deleted file mode 100644
index c777fb2b82c..00000000000
--- a/packages/react/src/components/FeatureSection/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Feature section
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-feature-section).
diff --git a/packages/react/src/components/FeatureSection/__stories__/FeatureSection.stories.js b/packages/react/src/components/FeatureSection/__stories__/FeatureSection.stories.js
deleted file mode 100644
index 443e42f8147..00000000000
--- a/packages/react/src/components/FeatureSection/__stories__/FeatureSection.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Feature section',
-
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-feature-section">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/FilterPanel/README.stories.mdx b/packages/react/src/components/FilterPanel/README.stories.mdx
deleted file mode 100644
index 1853f9b5833..00000000000
--- a/packages/react/src/components/FilterPanel/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Filter panel
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-filter-panel).
diff --git a/packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js b/packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js
deleted file mode 100644
index 0fe388193be..00000000000
--- a/packages/react/src/components/FilterPanel/__stories__/FilterPanel.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Filter panel',
-
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-filter-panel">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/Footer/Footer.js b/packages/react/src/components/Footer/Footer.js
deleted file mode 100644
index 5344a41e6b9..00000000000
--- a/packages/react/src/components/Footer/Footer.js
+++ /dev/null
@@ -1,288 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect, useState } from 'react';
-import classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import FooterLogo from './FooterLogo';
-import FooterNav from './FooterNav';
-import { globalInit } from '../../internal/vendor/@carbon/ibmdotcom-services/services/global/global';
-import LanguageSelector from './LanguageSelector';
-import LegalNav from './LegalNav';
-import LocaleAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Locale/Locale';
-import LocaleButton from './LocaleButton';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import TranslationAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Translation/Translation';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Footer component.
- */
-const Footer = ({
-  type,
-  navigation,
-  langCode,
-  disableLocaleButton,
-  languageOnly,
-  labelText,
-  languageItems,
-  languageInitialItem,
-  languageCallback,
-  adjunctLinks,
-}) => {
-  let [footerMenuData, setFooterMenuData] = useState([]);
-  let [footerLegalData, setFooterLegalData] = useState([]);
-  let [displayLang, setDisplayLang] = useState('');
-  useEffect(() => {
-    // initialize global execution calls
-    globalInit();
-  }, []);
-
-  useEffect(() => {
-    let stale = false;
-    if (!navigation) {
-      (async () => {
-        try {
-          const response = await TranslationAPI.getTranslation();
-          if (!stale) {
-            setFooterMenuData(response.footerMenu);
-            setFooterLegalData(response.footerThin);
-          }
-        } catch (error) {
-          console.error('Error populating footer data:', error);
-        }
-      })();
-    }
-    return () => {
-      stale = true;
-    };
-  }, [navigation]);
-
-  useEffect(() => {
-    let stale = false;
-    (async () => {
-      const response = await LocaleAPI.getLangDisplay(langCode);
-      if (stale) {
-        return;
-      }
-      setDisplayLang(response);
-    })();
-    return () => {
-      stale = true;
-    };
-  }, [langCode]);
-
-  if (navigation) {
-    footerMenuData = navigation.footerMenu;
-    footerLegalData = navigation.footerThin;
-  }
-
-  return (
-    <footer
-      data-autoid={`${stablePrefix}--footer`}
-      className={classNames(`${prefix}--footer`, {
-        [`${prefix}--footer--short`]: type === 'short',
-        [`${prefix}--footer--micro`]: type === 'micro',
-      })}>
-      <section className={`${prefix}--footer__main`}>
-        <div className={`${prefix}--footer__main-container`}>
-          <div
-            className={classNames(`${prefix}--footer__logo-container`, {
-              [`${prefix}--footer__locale-button--disabled`]:
-                disableLocaleButton,
-            })}>
-            <div className={`${prefix}--footer__logo-row`}>
-              {type !== 'micro' && <FooterLogo />}
-              {type !== 'micro' &&
-                _loadLocaleLanguage(
-                  disableLocaleButton,
-                  displayLang,
-                  languageOnly,
-                  labelText,
-                  languageItems,
-                  languageInitialItem,
-                  languageCallback
-                )}
-            </div>
-          </div>
-          {(type === 'default' || type === undefined) && (
-            <FooterNav
-              groups={footerMenuData}
-              disableLocaleButton={disableLocaleButton}
-            />
-          )}
-        </div>
-      </section>
-      <LegalNav
-        links={footerLegalData}
-        type={type}
-        adjunctLinks={adjunctLinks}
-        button={
-          type === 'micro'
-            ? _loadLocaleLanguage(
-                disableLocaleButton,
-                displayLang,
-                languageOnly,
-                labelText,
-                languageItems,
-                languageInitialItem,
-                languageCallback
-              )
-            : null
-        }
-      />
-    </footer>
-  );
-};
-
-/**
- * Loads in the locale modal, language selector, or null
- *
- * @param {boolean} disableLocaleButton Flag to disable to locale button
- * @param {string} displayLang display language and aria-label for locale button
- * @param {boolean} languageOnly Switches to the language selector
- * @param {string} labelText Label text for locale/language selector
- * @param {Array} languageItems Array of language data for the dropdown
- * @param {object} languageInitialItem Initial language selected
- * @param {Function} languageCallback Callback function when language is selected
- * @returns {null|*} JSX or null
- * @private
- */
-function _loadLocaleLanguage(
-  disableLocaleButton,
-  displayLang,
-  languageOnly,
-  labelText,
-  languageItems,
-  languageInitialItem,
-  languageCallback
-) {
-  if (languageOnly) {
-    return (
-      <LanguageSelector
-        items={languageItems}
-        initialSelectedItem={languageInitialItem}
-        callback={languageCallback}
-        labelText={labelText}
-      />
-    );
-  } else if (!disableLocaleButton) {
-    return <LocaleButton aria={displayLang} displayLang={displayLang} />;
-  } else {
-    return null;
-  }
-}
-
-Footer.propTypes = {
-  /**
-   * Navigation data object for Footer, used for server-side rendering.
-   */
-  navigation: PropTypes.shape({
-    footerMenu: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        links: PropTypes.arrayOf(
-          PropTypes.shape({
-            title: PropTypes.string,
-            url: PropTypes.string,
-          })
-        ),
-      })
-    ),
-    footerThin: PropTypes.arrayOf(
-      PropTypes.shape({
-        title: PropTypes.string,
-        url: PropTypes.string,
-      })
-    ),
-  }),
-
-  /**
-   * Type of Footer. Choose from:
-   *
-   * | Name    | Description                                                                 |
-   * | ------- | --------------------------------------------------------------------------- |
-   * | `default`  | Default footer variant includes additional navigation taking up more space. |
-   * | `short` | Short footer variant reduces space by removing any additional navigation.   |
-   * | `micro` | Micro footer variant includes legal navigation and locale button only.      |
-   */
-  type: PropTypes.oneOf(['default', 'short', 'micro']),
-
-  /**
-   * Language code for fetching the display name.
-   */
-  langCode: PropTypes.shape({
-    cc: PropTypes.string,
-    lc: PropTypes.string,
-  }),
-
-  /**
-   * `true` to disable the Locale button.
-   */
-  disableLocaleButton: PropTypes.bool,
-
-  /**
-   * `true` to switch the locale button with a language selector.
-   */
-  languageOnly: PropTypes.bool,
-
-  /**
-   * Label text for combobox/select
-   */
-  labelText: PropTypes.string,
-
-  /**
-   * Array of items for the language selector,
-   * uses [Carbon ComboBox](https://react.carbondesignsystem.com/?path=/story/combobox--combobox) for desktop,
-   * and [Carbon Select](https://react.carbondesignsystem.com/?path=/story/select--default) for tablet/mobile.
-   */
-  languageItems: PropTypes.arrayOf(PropTypes.object),
-
-  /**
-   * Sets the initial language selector value when the component is loaded.
-   * The default is the first item.
-   */
-  languageInitialItem: PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string,
-  }),
-
-  /**
-   * Callback function onChange of the language selector.
-   */
-  languageCallback: PropTypes.func,
-
-  /**
-   * List of adjunct links to be rendered
-   */
-  adjunctLinks: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-    })
-  ),
-};
-
-/**
- * @property {object} defaultProps default Footer props
- * @type {{navigation: null, langCode: null, disableLocaleButton: boolean,
- * type: string}}
- */
-Footer.defaultProps = {
-  navigation: null,
-  type: 'default',
-  langCode: null,
-  disableLocaleButton: false,
-  languageOnly: false,
-  languageItems: [],
-  languageCallback: () => {},
-  adjunctLinks: [],
-};
-
-export default Footer;
diff --git a/packages/react/src/components/Footer/FooterLogo.js b/packages/react/src/components/Footer/FooterLogo.js
deleted file mode 100644
index 592fe016551..00000000000
--- a/packages/react/src/components/Footer/FooterLogo.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import FooterLogo from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h65-white.svg';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Footer logo component
- *
- * @returns {object} JSX object
- */
-const Logo = () => {
-  return (
-    <div
-      data-autoid={`${stablePrefix}--footer-logo`}
-      className={`${prefix}--footer-logo`}>
-      <a
-        data-autoid={`${stablePrefix}--footer-logo__link`}
-        className={`${prefix}--footer-logo__link`}
-        href="https://www.ibm.com/">
-        <FooterLogo />
-      </a>
-    </div>
-  );
-};
-
-export default Logo;
diff --git a/packages/react/src/components/Footer/FooterNav.js b/packages/react/src/components/Footer/FooterNav.js
deleted file mode 100644
index 1fc3d06eb3f..00000000000
--- a/packages/react/src/components/Footer/FooterNav.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 Accordion from '../../internal/vendor/carbon-components-react/components/Accordion/Accordion';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import FooterNavGroup from './FooterNavGroup';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Footer nav component.
- */
-const FooterNav = ({ groups, disableLocaleButton }) => {
-  if (!groups?.length) {
-    return null;
-  }
-
-  return (
-    <nav
-      data-autoid={`${stablePrefix}--footer-nav`}
-      aria-label="Footer navigation"
-      className={cx(`${prefix}--footer-nav`, {
-        [`${prefix}--footer-nav__locale-button--disabled`]: disableLocaleButton,
-      })}>
-      <Accordion className={`${prefix}--footer-nav__container`}>
-        {renderGroups(groups)}
-      </Accordion>
-    </nav>
-  );
-};
-
-/**
- * Loops through and renders a list of nav groups for the footer nav
- *
- * @param {Array} groups A list of groups to be rendered
- * @returns {object} JSX object
- */
-function renderGroups(groups) {
-  return groups.map(({ title, links }, index) => (
-    <FooterNavGroup title={title} links={links} key={index} />
-  ));
-}
-
-FooterNav.propTypes = {
-  /**
-   * Update the CSS selectors depending on the locale button being rendered or not.
-   */
-  disableLocaleButton: PropTypes.bool,
-
-  /**
-   * A list of groups to be rendered.
-   */
-  groups: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      links: PropTypes.arrayOf(
-        PropTypes.shape({
-          title: PropTypes.string,
-          url: PropTypes.string,
-        })
-      ),
-    })
-  ),
-};
-
-FooterNav.defaultProps = {
-  groups: null,
-  disableLocaleButton: false,
-};
-
-export default FooterNav;
diff --git a/packages/react/src/components/Footer/FooterNavGroup.js b/packages/react/src/components/Footer/FooterNavGroup.js
deleted file mode 100644
index 544992ab067..00000000000
--- a/packages/react/src/components/Footer/FooterNavGroup.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 AccordionItem from '../../internal/vendor/carbon-components-react/components/Accordion/AccordionItem';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import Link from '../../internal/vendor/carbon-components-react/components/Link/Link';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Footer nav group component.
- */
-const FooterNavGroup = ({ title, links }) => {
-  if (!title || !links?.length) {
-    return null;
-  }
-
-  return (
-    <AccordionItem
-      data-autoid={`${stablePrefix}--footer-nav-group`}
-      title={title}
-      className={`${prefix}--footer-nav-group`}>
-      <h2 className={`${prefix}--footer-nav-group__title`}>{title}</h2>
-      <ul>{renderListItems(links)}</ul>
-    </AccordionItem>
-  );
-};
-
-/**
- * Loops through and renders a list of links for footer nav group
- *
- * @param {Array} links A list of links to be rendered
- * @returns {object} JSX object
- */
-function renderListItems(links) {
-  return links.map(({ title, url }, index) => {
-    if (!title || !url) {
-      return null;
-    }
-
-    return (
-      <li className={`${prefix}--footer-nav-group__item`} key={index}>
-        <Link
-          className={`${prefix}--footer-nav-group__link ${prefix}--footer__link`}
-          data-autoid={`${stablePrefix}--footer-nav-group__link`}
-          href={url}>
-          {title}
-        </Link>
-      </li>
-    );
-  });
-}
-
-FooterNavGroup.propTypes = {
-  /**
-   * The title.
-   */
-  title: PropTypes.string,
-
-  /**
-   * A list of links to be rendered.
-   */
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-    })
-  ),
-};
-
-FooterNavGroup.defaultProps = {
-  title: null,
-  links: null,
-};
-
-export default FooterNavGroup;
diff --git a/packages/react/src/components/Footer/LanguageSelector.js b/packages/react/src/components/Footer/LanguageSelector.js
deleted file mode 100644
index 47b6030cc9c..00000000000
--- a/packages/react/src/components/Footer/LanguageSelector.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useState, useEffect, useRef } from 'react';
-import ComboBox from '../../internal/vendor/carbon-components-react/components/ComboBox/ComboBox';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import Select from '../../internal/vendor/carbon-components-react/components/Select/Select';
-import SelectItem from '../../internal/vendor/carbon-components-react/components/SelectItem/SelectItem';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Footer language selector component.
- */
-const LanguageSelector = ({
-  items,
-  initialSelectedItem,
-  callback,
-  labelText,
-}) => {
-  const { ref } = useClickOutside();
-
-  const [selectedItem, setSelectedItem] = useState(
-    initialSelectedItem || items[0]
-  );
-
-  const [lastSelectedItem, setLastSelectedItem] = useState(
-    initialSelectedItem || items[0]
-  );
-
-  /**
-   * Sets the selected item and then runs the callback function
-   *
-   * @param {object} selectedItem Selected item object
-   * @private
-   */
-  function _setSelectedItem(selectedItem) {
-    const item = selectedItem !== null ? selectedItem : '';
-    setSelectedItem(item);
-    callback(item);
-
-    if (selectedItem !== null) {
-      setLastSelectedItem(selectedItem);
-    }
-  }
-
-  /**
-   * Identifies the click outisde the language selector and resets its value to the previously selected
-   */
-  function useClickOutside() {
-    const ref = useRef(null);
-
-    const handleClickOutside = (event) => {
-      if (ref.current && !ref.current.contains(event.target)) {
-        setSelectedItem(lastSelectedItem);
-      }
-    };
-
-    useEffect(() => {
-      root.document.addEventListener('click', handleClickOutside, true);
-      return () => {
-        root.document.removeEventListener('click', handleClickOutside, true);
-      };
-    });
-
-    return { ref };
-  }
-
-  return (
-    <div className={`${prefix}--language-selector__container`} ref={ref}>
-      <ComboBox
-        id="dds-language-selector"
-        data-autoid={`${stablePrefix}--language-selector`}
-        className={`${prefix}--language-selector`}
-        onChange={({ selectedItem }) => _setSelectedItem(selectedItem)}
-        items={items}
-        itemToString={(item) => (item ? item.text : '')}
-        initialSelectedItem={initialSelectedItem}
-        selectedItem={selectedItem}
-        direction="top"
-        placeholder={labelText}
-        titleText={labelText}
-        size="xl"
-      />
-      <Select
-        defaultValue={selectedItem.id}
-        data-autoid={`${stablePrefix}--language-selector__select`}
-        id={`${prefix}--language-selector`}
-        className={`${prefix}--language-selector`}
-        onChange={(evt) => _setSelectedItem(evt)}
-        text={selectedItem.text}
-        labelText={labelText}
-        aria-label={labelText}>
-        {renderSelectItems(items)}
-      </Select>
-    </div>
-  );
-};
-
-/**
- * Iterate through and render a list of select items
- *
- * @param {Array} items A list of items to be rendered
- * @returns {object} JSX object
- */
-
-function renderSelectItems(items) {
-  const selectItems = [];
-  items.map((item, index) => {
-    selectItems.push(
-      <SelectItem value={item.id} text={item.text} key={index} />
-    );
-  });
-  return selectItems;
-}
-
-LanguageSelector.propTypes = {
-  /**
-   * Array of items to pass into Select.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      id: PropTypes.string,
-      text: PropTypes.string,
-    })
-  ),
-
-  /**
-   * Initial selected item for the Select.
-   */
-  initialSelectedItem: PropTypes.shape({
-    id: PropTypes.string,
-    text: PropTypes.string,
-  }),
-
-  /**
-   * Callback function when an item is selected.
-   */
-  callback: PropTypes.func,
-
-  /**
-   * Label text
-   */
-  labelText: PropTypes.string,
-};
-
-LanguageSelector.defaultProps = {
-  items: null,
-  initialSelectedItem: null,
-  callback: () => {},
-  labelText: 'Choose a language',
-};
-
-export default LanguageSelector;
diff --git a/packages/react/src/components/Footer/LegalNav.js b/packages/react/src/components/Footer/LegalNav.js
deleted file mode 100644
index 1ab7633bcf1..00000000000
--- a/packages/react/src/components/Footer/LegalNav.js
+++ /dev/null
@@ -1,140 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import Link from '../../internal/vendor/carbon-components-react/components/Link/Link';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Footer legal nav component.
- */
-const LegalNav = ({ links, type, button, adjunctLinks }) => {
-  if (!links?.length) {
-    return null;
-  }
-
-  const listStyle = cx({
-    [`${prefix}--legal-nav__micro`]: type === 'micro',
-  });
-
-  return (
-    <aside
-      data-autoid={`${stablePrefix}--footer-legal-nav`}
-      className={`${prefix}--legal-nav__container`}
-      aria-label="Footer legal links container">
-      <nav
-        className={`${prefix}--legal-nav`}
-        aria-label="Footer legal link list">
-        <div className={`${prefix}--legal-nav__list ${listStyle}`}>
-          <ul className={`${prefix}--legal-nav__holder`}>
-            {links &&
-              links.map(({ title, titleEnglish, url }, index) => {
-                if (!title || !url) {
-                  return null;
-                }
-
-                const dataTitle = titleEnglish
-                  ? titleEnglish
-                      .replace(/[^-a-zA-Z0-9_ ]/g, '')
-                      .replace(/ +/g, '-')
-                      .toLowerCase()
-                  : null;
-
-                return (
-                  <li className={`${prefix}--legal-nav__list-item`} key={index}>
-                    <Link
-                      data-autoid={`${stablePrefix}--footer-legal-nav__link-${dataTitle}`}
-                      className={`${prefix}--footer__link`}
-                      href={url}>
-                      {title}
-                    </Link>
-                  </li>
-                );
-              })}
-            <li
-              className={`${prefix}--legal-nav__list-item`}
-              data-autoid={`${stablePrefix}--privacy-cp`}
-            />
-          </ul>
-          {button}
-        </div>
-        {adjunctLinks && (
-          <ul className={`${prefix}--adjunct-links__holder`}>
-            {adjunctLinks.map(({ title, titleEnglish, url }, index) => {
-              if (!title || !url) {
-                return null;
-              }
-
-              const dataTitle = titleEnglish
-                ? titleEnglish
-                    .replace(/[^-a-zA-Z0-9_ ]/g, '')
-                    .replace(/ +/g, '-')
-                    .toLowerCase()
-                : null;
-
-              return (
-                <li className={`${prefix}--legal-nav__list-item`} key={index}>
-                  <Link
-                    data-autoid={`${stablePrefix}--footer-legal-nav__link-${dataTitle}`}
-                    className={`${prefix}--footer__link`}
-                    href={url}>
-                    {title}
-                  </Link>
-                </li>
-              );
-            })}
-          </ul>
-        )}
-      </nav>
-    </aside>
-  );
-};
-
-LegalNav.propTypes = {
-  /**
-   * A list of links to be rendered.
-   */
-  links: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-    })
-  ),
-
-  /**
-   * List of adjunct links to be rendered
-   */
-  adjunctLinks: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-    })
-  ),
-
-  /**
-   * Footer type
-   */
-  type: PropTypes.string,
-
-  /**
-   * The locale/language selector button.
-   * Renders only in micro version
-   */
-  button: PropTypes.object,
-};
-
-LegalNav.defaultProps = {
-  links: null,
-};
-
-export default LegalNav;
diff --git a/packages/react/src/components/Footer/LocaleButton.js b/packages/react/src/components/Footer/LocaleButton.js
deleted file mode 100644
index 5c5ec80101f..00000000000
--- a/packages/react/src/components/Footer/LocaleButton.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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, { useState, useRef } from 'react';
-import Button from '../../internal/vendor/carbon-components-react/components/Button/Button';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import EarthFilled20 from '@carbon/icons-react/es/earth--filled/20';
-import LocaleModal from '../LocaleModal/LocaleModal';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Renders the locale button.
- */
-const LocaleButton = ({ displayLang, aria }) => {
-  const [isOpen, setIsOpen] = useState(false);
-  const localeButton = useRef();
-  return (
-    <div className={`${prefix}--locale-btn__container`}>
-      <Button
-        data-autoid={`${stablePrefix}--locale-btn`}
-        className={`${prefix}--locale-btn`}
-        kind="tertiary"
-        ref={localeButton}
-        onClick={open}
-        renderIcon={EarthFilled20}
-        iconDescription="Earth Filled Icon"
-        aria-label={aria}>
-        {displayLang}
-      </Button>
-
-      <LocaleModal
-        isOpen={isOpen}
-        setIsOpen={setIsOpen}
-        closeFunc={() => {
-          setTimeout(() => {
-            localeButton.current.focus();
-          });
-        }}
-      />
-    </div>
-  );
-
-  /**
-   * Sets modal state to open
-   *
-   * @private
-   */
-  function open() {
-    setIsOpen(true);
-  }
-};
-
-LocaleButton.propTypes = {
-  /**
-   * Display language for locale button.
-   */
-  displayLang: PropTypes.string,
-
-  /**
-   * `aria-label`` value.
-   */
-  aria: PropTypes.string,
-};
-
-export default LocaleButton;
diff --git a/packages/react/src/components/Footer/README.stories.mdx b/packages/react/src/components/Footer/README.stories.mdx
deleted file mode 100644
index fd42e53c2c3..00000000000
--- a/packages/react/src/components/Footer/README.stories.mdx
+++ /dev/null
@@ -1,165 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import Footer from './Footer';
-
-# Footer
-
-> The footer component is a required navigational pattern for IBM.com that
-> displays consistently at the bottom of each page.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Footer)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Footer)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/footer/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Footer styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Footer } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-import '@carbon/ibmdotcom-styles/scss/components/footer/index';
-
-function App() {
-  return <Footer />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the footer styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import Footer from '@carbon/ibmdotcom-react/es/components/Footer/Footer';
-```
-
-## Props
-
-<Props of={Footer} />
-
-### Navigation data
-
-If setting the navigation data manually, examples can be seen here based on
-type:
-
-- [Default](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/src/components/Footer/__data__/footer-menu.json)
-- [Short](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/src/components/Footer/__data__/footer-thin.json)
-
-### Language selector
-
-The option to use a language selector is available in lieu of the locale
-button/selector.
-
-Example implementation:
-
-```javascript
-const items = [
-  { id: 'da', text: 'Danish / Dansk' },
-  { id: 'nl', text: 'Dutch / Nederlands' },
-  { id: 'en', text: 'English' },
-];
-
-function myLanguageCallback(selectedItem) {
-  console.log(selectedItem); // { "id": "en", "text": "English" }
-}
-
-function App() {
-  return (
-    <Footer
-      languageOnly={true}
-      languageItems={items}
-      languageInitialItem={items[2]}
-      languageCallback={myLanguageCallback}
-    />
-  );
-}
-```
-
-> See
-> [.env.example](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/.env.example)
-> for more information
-
-## Stable selectors
-
-| Name                          | Description |
-| ----------------------------- | ----------- |
-| `dds--footer`                 | Component   |
-| `dds--footer-nav`             | Component   |
-| `dds--footer-nav-group`       | Component   |
-| `dds--footer-nav-group__link` | Interactive |
-| `dds--footer-logo`            | Component   |
-| `dds--footer-logo__link`      | Interactive |
-| `dds--footer-locale-btn`      | Interactive |
-| `dds--privacy-cp`             | Component   |
-| `dds--legal-nav`              | Component   |
-| `dds--legal-nav__link`        | Interactive |
-| `dds--locale-modal`           | Component   |
-| `dds--language-selector`      | Component   |
-
-## Server-Side Rendering
-
-For server-side rendering of the footer, the `Translation` service call needs to
-be made to retrieve navigation links. Make sure to pass in the `lc` and `cc`
-values as shown in the example below.
-
-```javascript
-import { TranslationAPI } from '@carbon/ibmdotcom-services';
-import { Footer } from '@carbon/ibmdotcom-react';
-
-server.get('/', async (req, res) => {
-  const langCode = { lc: 'en', cc: 'us' };
-  const response = await TranslationAPI.getTranslation(langCode);
-  const body = renderToString(
-    <Footer navigation={response} langCode={langCode} />
-  );
-  res.send(body);
-});
-```
-
-## Cookie Preferences
-
-For Cookie Preferences to appear in the footer, make sure the analytics script
-tag has been set:
-
-```javascript
-<script src="//1.www.s81c.com/common/stats/ibm-common.js" defer="" async="async"></script>
-```
-
-More details can be found at
-[cookie consent adoption instructions](https://w3.ibm.com/w3publisher/digital-behavior-data-management/gdpr/cookie-consent-adoption).
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/Footer/__data__/footer-menu.json b/packages/react/src/components/Footer/__data__/footer-menu.json
deleted file mode 100644
index 0f8f02f7866..00000000000
--- a/packages/react/src/components/Footer/__data__/footer-menu.json
+++ /dev/null
@@ -1,129 +0,0 @@
-[
-  {
-    "title": "Discover",
-    "links": [
-      {
-        "title": "Marketplace",
-        "url": "https://www.ibm.com/products?lnk=fdi"
-      },
-      {
-        "title": "Redbooks",
-        "url": "https://www.redbooks.ibm.com/?lnk=fdi"
-      },
-      {
-        "title": "Services",
-        "url": "https://www.ibm.com/services?lnk=fdi"
-      },
-      {
-        "title": "Industries",
-        "url": "https://www.ibm.com/industries?lnk=fdi"
-      },
-      {
-        "title": "IBM Research",
-        "url": "https://research.ibm.com/?lnk=fdi"
-      },
-      {
-        "title": "Case studies",
-        "url": "https://www.ibm.com/case-studies?lnk=fdi"
-      },
-      {
-        "title": "Demos",
-        "url": "https://www.ibm.com/demos/?lnk=fdi"
-      },
-      {
-        "title": "Financing",
-        "url": "https://www.ibm.com/financing?ref=ibmfooter&lnk=fdi"
-      }
-    ]
-  },
-  {
-    "title": "Information for...",
-    "links": [
-      {
-        "title": "Developers",
-        "url": "https://www.ibm.com/developerworks/?lnk=fif"
-      },
-      {
-        "title": "Business Partners",
-        "url":
-        "https://www-356.ibm.com/partnerworld/wps/servlet/ContentHandler/partnerworld-home?lnk=fif"
-      },
-      {
-        "title": "Federal and state contracts",
-        "url": "https://www.ibm.com/industries/sled-contracts?lnk=fif"
-      }
-    ]
-  },
-  {
-    "title": "Connect with us",
-    "links": [
-      {
-        "title": "Support",
-        "url": "https://support.ibm.com?lnk=fcw"
-      },
-      {
-        "title": "Find a Business Partner",
-        "url":
-        "https://www.ibm.com/partnerworld/wps/bplocator/search.jsp?lnk=fcw"
-      }
-    ]
-  },
-  {
-    "title": "About IBM",
-    "links": [
-      {
-        "title": "Careers",
-        "url": "https://www.ibm.com/employment/?lnk=fab"
-      },
-      {
-        "title": "Events",
-        "url": "https://www.ibm.com/events?lnk=fab"
-      },
-      {
-        "title": "Latest news",
-        "url": "https://newsroom.ibm.com/?lnk=fab"
-      },
-      {
-        "title": "Investor relations",
-        "url": "https://www.ibm.com/investor/?lnk=fab"
-      },
-      {
-        "title": "Diversity and inclusion",
-        "url": "https://www.ibm.com/employment/us/diverse/?lnk=fab"
-      },
-      {
-        "title": "Corporate responsibility",
-        "url": "https://www.ibm.org/?lnk=fab"
-      },
-      {
-        "title": "About IBM",
-        "url": "https://www.ibm.com/ibm/us/en/?lnk=fab"
-      }
-    ]
-  },
-  {
-    "title": "Social",
-    "links": [
-      {
-        "linkClass": "ibm-twitter-encircled-link",
-        "title": "Twitter",
-        "url": "https://www.twitter.com/ibm"
-      },
-      {
-        "linkClass": "ibm-linkedin-encircled-link",
-        "title": "LinkedIn",
-        "url": "https://www.linkedin.com/company/ibm"
-      },
-      {
-        "linkClass": "ibm-facebook-encircled-link",
-        "title": "Facebook",
-        "url": "https://www.facebook.com/ibm"
-      },
-      {
-        "linkClass": "ibm-youtube-encircled-link",
-        "title": "YouTube",
-        "url": "https://www.youtube.com/ibm"
-      }
-    ]
-  }
-]
diff --git a/packages/react/src/components/Footer/__data__/footer-thin.json b/packages/react/src/components/Footer/__data__/footer-thin.json
deleted file mode 100644
index 5454abd74aa..00000000000
--- a/packages/react/src/components/Footer/__data__/footer-thin.json
+++ /dev/null
@@ -1,18 +0,0 @@
-[
-  {
-    "title": "Contact IBM",
-    "url": "https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"
-  },
-  {
-    "title": "Privacy",
-    "url": "https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"
-  },
-  {
-    "title": "Terms of use",
-    "url": "https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"
-  },
-  {
-    "title": "Accessibility",
-    "url": "https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"
-  }
-]
diff --git a/packages/react/src/components/Footer/__data__/language-items.json b/packages/react/src/components/Footer/__data__/language-items.json
deleted file mode 100644
index 49545f7892c..00000000000
--- a/packages/react/src/components/Footer/__data__/language-items.json
+++ /dev/null
@@ -1,38 +0,0 @@
-[
-  { "id": "ar", "text": "Arabic / عربية" },
-  { "id": "bs", "text": "Bosnian / Bosanski" },
-  { "id": "bg", "text": "Bulgarian / Български" },
-  { "id": "ca", "text": "Catalan / Català" },
-  { "id": "zh", "text": "Chinese Simplified / 简体中文" },
-  { "id": "zh-tw", "text": "Chinese Traditional / 繁體中文" },
-  { "id": "hr", "text": "Croatian / Hrvatski" },
-  { "id": "cs", "text": "Czech / Čeština" },
-  { "id": "da", "text": "Danish / Dansk" },
-  { "id": "nl", "text": "Dutch / Nederlands" },
-  { "id": "en", "text": "English" },
-  { "id": "fi", "text": "Finnish / Suomi" },
-  { "id": "fr", "text": "French / Français" },
-  { "id": "de", "text": "German / Deutsch" },
-  { "id": "el", "text": "Greek / Ελληνικά" },
-  { "id": "he", "text": "Hebrew / עברית" },
-  { "id": "hu", "text": "Hungarian / Magyar" },
-  { "id": "it", "text": "Italian / Italiano" },
-  { "id": "ja", "text": "Japanese / 日本語" },
-  { "id": "kk", "text": "Kazakh / Қазақша" },
-  { "id": "ko", "text": "Korean / 한국어" },
-  { "id": "mk", "text": "Macedonian / македонски" },
-  { "id": "no", "text": "Norwegian / Norsk" },
-  { "id": "pl", "text": "Polish / polski" },
-  { "id": "pt-br", "text": "Portuguese/Brazil/Brazil / Português/Brasil" },
-  { "id": "pt", "text": "Portuguese/Portugal / Português/Portugal" },
-  { "id": "ro", "text": "Romanian / Română" },
-  { "id": "ru", "text": "Russian / Русский" },
-  { "id": "sr", "text": "Serbian / srpski" },
-  { "id": "sk", "text": "Slovak / Slovenčina" },
-  { "id": "sl", "text": "Slovenian / Slovenščina" },
-  { "id": "es", "text": "Spanish / Español" },
-  { "id": "sv", "text": "Swedish / Svenska" },
-  { "id": "th", "text": "Thai / ภาษาไทย" },
-  { "id": "tr", "text": "Turkish / Türkçe" },
-  { "id": "vi", "text": "Vietnamese / Tiếng Việt" }
-]
diff --git a/packages/react/src/components/Footer/__data__/locale-list.json b/packages/react/src/components/Footer/__data__/locale-list.json
deleted file mode 100644
index 8730e498391..00000000000
--- a/packages/react/src/components/Footer/__data__/locale-list.json
+++ /dev/null
@@ -1,1472 +0,0 @@
-{
-  "translations": {
-    "mapView": "Map View",
-    "listView": "List View",
-    "sortBy": "Sort By",
-    "select": "Select a country/region"
-  },
-  "regionList": [
-    {
-      "name": "Asia Pacific",
-      "key": "ap",
-      "countryList": [
-        {
-          "name": "Australia",
-          "locale": [
-            [
-              "en-au",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Bangladesh",
-          "locale": [
-            [
-              "en-bd",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Brunei Darussalam",
-          "locale": [
-            [
-              "en-bn",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Cambodia",
-          "locale": [
-            [
-              "en-kh",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "China",
-          "locale": [
-            [
-              "zh-cn",
-              "Chinese (Simplified)"
-            ]
-          ]
-        },
-        {
-          "name": "Hong Kong S.A.R. of China",
-          "locale": [
-            [
-              "en-hk",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "India",
-          "locale": [
-            [
-              "en-in",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Indonesia",
-          "locale": [
-            [
-              "en-id",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Japan",
-          "locale": [
-            [
-              "ja-jp",
-              "Japanese"
-            ]
-          ]
-        },
-        {
-          "name": "Korea, Republic of",
-          "locale": [
-            [
-              "ko-kr",
-              "Korean"
-            ]
-          ]
-        },
-        {
-          "name": "Malaysia",
-          "locale": [
-            [
-              "en-my",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "New Zealand",
-          "locale": [
-            [
-              "en-nz",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Philippines",
-          "locale": [
-            [
-              "en-ph",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Singapore",
-          "locale": [
-            [
-              "en-sg",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Sri Lanka",
-          "locale": [
-            [
-              "en-lk",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Taiwan",
-          "locale": [
-            [
-              "zh-tw",
-              "Chinese (Traditional)"
-            ]
-          ]
-        },
-        {
-          "name": "Thailand",
-          "locale": [
-            [
-              "en-th",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Vietnam",
-          "locale": [
-            [
-              "en-vn",
-              "English"
-            ],
-            [
-              "vi-vn",
-              "Vietnamese"
-            ]
-          ]
-        }
-      ]
-    },
-    {
-      "name": "Europe",
-      "key": "eu",
-      "countryList": [
-        {
-          "name": "Austria",
-          "locale": [
-            [
-              "de-at",
-              "German"
-            ]
-          ]
-        },
-        {
-          "name": "Belgium/Luxembourg",
-          "locale": [
-            [
-              "nl-be",
-              "Dutch"
-            ],
-            [
-              "en-be",
-              "English"
-            ],
-            [
-              "fr-be",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Bulgaria",
-          "locale": [
-            [
-              "bg-bg",
-              "Bulgarian"
-            ]
-          ]
-        },
-        {
-          "name": "Bulgaria",
-          "locale": [
-            [
-              "en-bg",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Croatia",
-          "locale": [
-            [
-              "hr-hr",
-              "Croatian"
-            ]
-          ]
-        },
-        {
-          "name": "Croatia",
-          "locale": [
-            [
-              "en-hr",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Cyprus",
-          "locale": [
-            [
-              "en-cy",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Czech Republic",
-          "locale": [
-            [
-              "en-cz",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Czech Republic",
-          "locale": [
-            [
-              "cs-cz",
-              "Czech"
-            ]
-          ]
-        },
-        {
-          "name": "Denmark",
-          "locale": [
-            [
-              "en-dk",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Denmark",
-          "locale": [
-            [
-              "da-dk",
-              "Danish"
-            ]
-          ]
-        },
-        {
-          "name": "Estonia",
-          "locale": [
-            [
-              "et-ee",
-              "Estonian"
-            ]
-          ]
-        },
-        {
-          "name": "Estonia",
-          "locale": [
-            [
-              "en-ee",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Finland",
-          "locale": [
-            [
-              "fi-fi",
-              "Finnish"
-            ]
-          ]
-        },
-        {
-          "name": "Finland",
-          "locale": [
-            [
-              "en-fi",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "France",
-          "locale": [
-            [
-              "fr-fr",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Germany",
-          "locale": [
-            [
-              "de-de",
-              "German"
-            ]
-          ]
-        },
-        {
-          "name": "Greece",
-          "locale": [
-            [
-              "el-gr",
-              "Greek"
-            ]
-          ]
-        },
-        {
-          "name": "Greece",
-          "locale": [
-            [
-              "en-gr",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Hungary",
-          "locale": [
-            [
-              "en-hu",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Hungary",
-          "locale": [
-            [
-              "hu-hu",
-              "Hungarian"
-            ]
-          ]
-        },
-        {
-          "name": "Ireland",
-          "locale": [
-            [
-              "en-ie",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Italy",
-          "locale": [
-            [
-              "it-it",
-              "Italian"
-            ]
-          ]
-        },
-        {
-          "name": "Kazakhstan",
-          "locale": [
-            [
-              "kk-kz",
-              "Kazakh"
-            ]
-          ]
-        },
-        {
-          "name": "Kazakhstan",
-          "locale": [
-            [
-              "en-kz",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Latvia",
-          "locale": [
-            [
-              "lv-lv",
-              "Latvian"
-            ]
-          ]
-        },
-        {
-          "name": "Latvia",
-          "locale": [
-            [
-              "en-lv",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Lithuania",
-          "locale": [
-            [
-              "en-lt",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Lithuania",
-          "locale": [
-            [
-              "lt-lt",
-              "Lithuanian"
-            ]
-          ]
-        },
-        {
-          "name": "Netherlands",
-          "locale": [
-            [
-              "nl-nl",
-              "Dutch"
-            ]
-          ]
-        },
-        {
-          "name": "Netherlands",
-          "locale": [
-            [
-              "en-nl",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Norway",
-          "locale": [
-            [
-              "no-no",
-              "Norwegian"
-            ]
-          ]
-        },
-        {
-          "name": "Norway",
-          "locale": [
-            [
-              "en-no",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Poland",
-          "locale": [
-            [
-              "pl-pl",
-              "Polish"
-            ]
-          ]
-        },
-        {
-          "name": "Portugal",
-          "locale": [
-            [
-              "pt-pt",
-              "Portuguese"
-            ]
-          ]
-        },
-        {
-          "name": "Portugal",
-          "locale": [
-            [
-              "en-pt",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Romania",
-          "locale": [
-            [
-              "ro-ro",
-              "Romanian"
-            ]
-          ]
-        },
-        {
-          "name": "Romania",
-          "locale": [
-            [
-              "en-ro",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Russian Federation",
-          "locale": [
-            [
-              "ru-ru",
-              "Russian"
-            ]
-          ]
-        },
-        {
-          "name": "Serbia",
-          "locale": [
-            [
-              "sr-rs",
-              "Serbian"
-            ]
-          ]
-        },
-        {
-          "name": "Serbia",
-          "locale": [
-            [
-              "en-rs",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Slovakia",
-          "locale": [
-            [
-              "sk-sk",
-              "Slovak"
-            ]
-          ]
-        },
-        {
-          "name": "Slovakia",
-          "locale": [
-            [
-              "en-sk",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Slovenia",
-          "locale": [
-            [
-              "en-si",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Slovenia",
-          "locale": [
-            [
-              "sl-si",
-              "Slovenian"
-            ]
-          ]
-        },
-        {
-          "name": "Spain",
-          "locale": [
-            [
-              "es-es",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Sweden",
-          "locale": [
-            [
-              "en-se",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Sweden",
-          "locale": [
-            [
-              "sv-se",
-              "Swedish"
-            ]
-          ]
-        },
-        {
-          "name": "Switzerland",
-          "locale": [
-            [
-              "fr-ch",
-              "French"
-            ],
-            [
-              "de-ch",
-              "German"
-            ]
-          ]
-        },
-        {
-          "name": "Turkey",
-          "locale": [
-            [
-              "tr-tr",
-              "Turkish"
-            ]
-          ]
-        },
-        {
-          "name": "Ukraine",
-          "locale": [
-            [
-              "uk-ua",
-              "Ukrainian"
-            ]
-          ]
-        },
-        {
-          "name": "Ukraine",
-          "locale": [
-            [
-              "en-ua",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "United Kingdom",
-          "locale": [
-            [
-              "en-gb",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Uzbekistan",
-          "locale": [
-            [
-              "en-uz",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Uzbekistan",
-          "locale": [
-            [
-              "uz-uz",
-              "Uzbek"
-            ]
-          ]
-        }
-      ]
-    },
-    {
-      "name": "Latin America",
-      "key": "la",
-      "countryList": [
-        {
-          "name": "Argentina",
-          "locale": [
-            [
-              "es-ar",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Bolivia",
-          "locale": [
-            [
-              "es-bo",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Brazil",
-          "locale": [
-            [
-              "pt-br",
-              "Portuguese"
-            ]
-          ]
-        },
-        {
-          "name": "Chile",
-          "locale": [
-            [
-              "es-cl",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Colombia",
-          "locale": [
-            [
-              "es-co",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Costa Rica",
-          "locale": [
-            [
-              "es-cr",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Ecuador",
-          "locale": [
-            [
-              "es-ec",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Guyana",
-          "locale": [
-            [
-              "en-gy",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Paraguay",
-          "locale": [
-            [
-              "es-py",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Peru",
-          "locale": [
-            [
-              "es-pe",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Suriname",
-          "locale": [
-            [
-              "en-sr",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Uruguay",
-          "locale": [
-            [
-              "es-uy",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Venezuela",
-          "locale": [
-            [
-              "es-ve",
-              "Spanish"
-            ]
-          ]
-        }
-      ]
-    },
-    {
-      "name": "Middle East and Africa",
-      "key": "mea",
-      "countryList": [
-        {
-          "name": "Afghanistan",
-          "locale": [
-            [
-              "en-af",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Algeria",
-          "locale": [
-            [
-              "fr-dz",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Angola",
-          "locale": [
-            [
-              "pt-ao",
-              "Portuguese"
-            ]
-          ]
-        },
-        {
-          "name": "Bahrain",
-          "locale": [
-            [
-              "en-bh",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Botswana",
-          "locale": [
-            [
-              "en-bw",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Burkina Faso",
-          "locale": [
-            [
-              "fr-bf",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Cameroon",
-          "locale": [
-            [
-              "en-cm",
-              "English"
-            ],
-            [
-              "fr-cm",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Chad",
-          "locale": [
-            [
-              "fr-td",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Congo",
-          "locale": [
-            [
-              "fr-cg",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Congo, The Democratic Republic of the",
-          "locale": [
-            [
-              "fr-cd",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Egypt",
-          "locale": [
-            [
-              "en-eg",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Ethiopia",
-          "locale": [
-            [
-              "en-et",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Gabon",
-          "locale": [
-            [
-              "fr-ga",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Ghana",
-          "locale": [
-            [
-              "en-gh",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Iraq",
-          "locale": [
-            [
-              "en-iq",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Israel",
-          "locale": [
-            [
-              "he-il",
-              "Hebrew"
-            ]
-          ]
-        },
-        {
-          "name": "Israel",
-          "locale": [
-            [
-              "en-il",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Ivory Coast",
-          "locale": [
-            [
-              "fr-ci",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Jordan",
-          "locale": [
-            [
-              "en-jo",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Kenya",
-          "locale": [
-            [
-              "en-ke",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Kuwait",
-          "locale": [
-            [
-              "en-kw",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Lebanon",
-          "locale": [
-            [
-              "en-lb",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Libya",
-          "locale": [
-            [
-              "en-ly",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Madagascar",
-          "locale": [
-            [
-              "fr-mg",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Malawi",
-          "locale": [
-            [
-              "en-mw",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Mauritius",
-          "locale": [
-            [
-              "en-mu",
-              "English"
-            ],
-            [
-              "fr-mu",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Morocco",
-          "locale": [
-            [
-              "fr-ma",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Mozambique",
-          "locale": [
-            [
-              "pt-mz",
-              "Portuguese"
-            ]
-          ]
-        },
-        {
-          "name": "Namibia",
-          "locale": [
-            [
-              "en-na",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Nepal",
-          "locale": [
-            [
-              "en-np",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Niger",
-          "locale": [
-            [
-              "fr-ne",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Nigeria",
-          "locale": [
-            [
-              "en-ng",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Oman",
-          "locale": [
-            [
-              "en-om",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Pakistan",
-          "locale": [
-            [
-              "en-pk",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Qatar",
-          "locale": [
-            [
-              "en-qa",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Saudi Arabia",
-          "locale": [
-            [
-              "en-sa",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Saudi Arabia",
-          "locale": [
-            [
-              "ar-sa",
-              "Arabic"
-            ]
-          ]
-        },
-        {
-          "name": "Senegal",
-          "locale": [
-            [
-              "fr-sn",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Seychelles",
-          "locale": [
-            [
-              "fr-sc",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Sierra Leone",
-          "locale": [
-            [
-              "en-sl",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "South Africa",
-          "locale": [
-            [
-              "en-za",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Tanzania, United Republic of",
-          "locale": [
-            [
-              "en-tz",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Tunisia",
-          "locale": [
-            [
-              "fr-tn",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Uganda",
-          "locale": [
-            [
-              "en-ug",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "United Arab Emirates",
-          "locale": [
-            [
-              "en-ae",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "United Arab Emirates",
-          "locale": [
-            [
-              "ar-ae",
-              "Arabic"
-            ]
-          ]
-        },
-        {
-          "name": "Yemen",
-          "locale": [
-            [
-              "en-ye",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Zambia",
-          "locale": [
-            [
-              "en-zm",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Zimbabwe",
-          "locale": [
-            [
-              "en-zw",
-              "English"
-            ]
-          ]
-        }
-      ]
-    },
-    {
-      "name": "North America",
-      "key": "na",
-      "countryList": [
-        {
-          "name": "Anguilla",
-          "locale": [
-            [
-              "en-ai",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Antigua and Barbuda",
-          "locale": [
-            [
-              "en-ag",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Aruba",
-          "locale": [
-            [
-              "en-aw",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Bahamas",
-          "locale": [
-            [
-              "en-bs",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Barbados",
-          "locale": [
-            [
-              "en-bb",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Bermuda",
-          "locale": [
-            [
-              "en-bm",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Canada",
-          "locale": [
-            [
-              "en-ca",
-              "English"
-            ],
-            [
-              "fr-ca",
-              "French"
-            ]
-          ]
-        },
-        {
-          "name": "Cayman Islands",
-          "locale": [
-            [
-              "en-ky",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Curacao",
-          "locale": [
-            [
-              "en-cw",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Dominica",
-          "locale": [
-            [
-              "en-dm",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Grenada",
-          "locale": [
-            [
-              "en-gd",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Jamaica",
-          "locale": [
-            [
-              "en-jm",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Mexico",
-          "locale": [
-            [
-              "es-mx",
-              "Spanish"
-            ]
-          ]
-        },
-        {
-          "name": "Montserrat",
-          "locale": [
-            [
-              "en-ms",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Saint Kitts and Nevis",
-          "locale": [
-            [
-              "en-kn",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Saint Lucia",
-          "locale": [
-            [
-              "en-lc",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Saint Vincent and the Grenadines",
-          "locale": [
-            [
-              "en-vc",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Trinidad and Tobago",
-          "locale": [
-            [
-              "en-tt",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Turks and Caicos Islands",
-          "locale": [
-            [
-              "en-tc",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "United States",
-          "locale": [
-            [
-              "en-us",
-              "English"
-            ]
-          ]
-        },
-        {
-          "name": "Virgin Islands, British",
-          "locale": [
-            [
-              "en-vg",
-              "English"
-            ]
-          ]
-        }
-      ]
-    }
-  ]
-}
\ No newline at end of file
diff --git a/packages/react/src/components/Footer/__stories__/Footer.stories.js b/packages/react/src/components/Footer/__stories__/Footer.stories.js
deleted file mode 100644
index 1f0016c3af7..00000000000
--- a/packages/react/src/components/Footer/__stories__/Footer.stories.js
+++ /dev/null
@@ -1,332 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 './footer.stories.scss';
-import { boolean, object } from '@storybook/addon-knobs';
-import { Footer } from '../';
-import footerMenu from '../__data__/footer-menu.json';
-import footerThin from '../__data__/footer-thin.json';
-import inPercy from '@percy-io/in-percy';
-import languageItems from '../__data__/language-items.json';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = {
-  default: () => ({
-    type: 'default',
-    languageInitialItem: { id: 'en', text: 'English' },
-    disableLocaleButton: boolean(
-      'hide the locale button (disableLocaleButton)',
-      false
-    ),
-  }),
-  defaultLanguageOnly: () => {
-    const languageOnly = true;
-    return {
-      type: 'default',
-      languageOnly,
-      items: !languageOnly
-        ? undefined
-        : object('language dropdown items (languageItems)', languageItems),
-      languageInitialItem: { id: 'en', text: 'English' },
-    };
-  },
-  short: () => {
-    const isCustom = boolean('show custom navigation (not a prop)', inPercy());
-    return {
-      type: 'short',
-      isCustom,
-      navigation: isCustom
-        ? object('custom navigation data (navigation)', {
-            footerMenu,
-            footerThin,
-          })
-        : null,
-      disableLocaleButton: boolean(
-        'hide the locale button (disableLocaleButton)',
-        false
-      ),
-    };
-  },
-  shortWithAdjunctLegalLinks: () => {
-    const isCustom = boolean('show custom navigation (not a prop)', inPercy());
-    return {
-      isCustom,
-      type: 'short',
-      adjunctLinks: [
-        {
-          title: 'Read the updated Terms of Use.',
-          url: 'https://www.example.com',
-        },
-        {
-          title: 'Read Learning Technologies Privacy',
-          url: 'https://www.example.com',
-        },
-      ],
-      navigation: isCustom
-        ? object('custom navigation data (navigation)', {
-            footerMenu,
-            footerThin,
-          })
-        : null,
-      disableLocaleButton: boolean(
-        'hide the locale button (disableLocaleButton)',
-        false
-      ),
-    };
-  },
-  shortLanguageOnly: () => {
-    const isCustom = boolean('show custom navigation (not a prop)', inPercy());
-    const languageOnly = true;
-
-    return {
-      type: 'short',
-      isCustom,
-      languageOnly,
-      items: !languageOnly
-        ? undefined
-        : object('language dropdown items (languageItems)', languageItems),
-      languageInitialItem: { id: 'en', text: 'English' },
-      navigation: isCustom
-        ? object('custom navigation data (navigation)', {
-            footerMenu,
-            footerThin,
-          })
-        : null,
-    };
-  },
-  micro: () => ({
-    type: 'micro',
-    disableLocaleButton: boolean(
-      'hide the locale button (disableLocaleButton)',
-      false
-    ),
-    languageInitialItem: { id: 'en', text: 'English' },
-    adjunctLinks: false,
-  }),
-  microLanugaugeOnly: () => {
-    const languageOnly = true;
-
-    return {
-      type: 'micro',
-      languageOnly,
-      items: !languageOnly
-        ? undefined
-        : object('language dropdown items (languageItems)', languageItems),
-      languageInitialItem: { id: 'en', text: 'English' },
-    };
-  },
-};
-
-export default {
-  title: 'Components/Footer',
-  parameters: {
-    ...readme.parameters,
-    'carbon-theme': { disabled: true },
-    percy: {
-      name: 'Components|Footer: Default',
-    },
-  },
-};
-
-export const Default = (args) => {
-  const {
-    type,
-    isCustom,
-    navigation,
-    disableLocaleButton,
-    languageOnly,
-    items,
-    languageInitialItem,
-    languageCallback,
-    adjunctLinks,
-  } = { ...(Object.keys(args).length > 0 ? args : props.default()) } ?? {};
-
-  return (
-    <Footer
-      navigation={isCustom ? navigation : null}
-      type={type}
-      disableLocaleButton={disableLocaleButton}
-      langCode={inPercy() ? { lc: 'en', cc: 'us' } : null}
-      languageOnly={languageOnly}
-      languageItems={languageOnly ? items : null}
-      languageInitialItem={languageInitialItem}
-      languageCallback={languageCallback}
-      adjunctLinks={adjunctLinks}
-    />
-  );
-};
-
-export const DefaultWithAdjunctLegalLinks = () => {
-  const {
-    type,
-    isCustom,
-    navigation,
-    disableLocaleButton,
-    languageOnly,
-    items,
-    languageInitialItem,
-    languageCallback,
-  } = props.default() ?? {};
-
-  return (
-    <Footer
-      navigation={isCustom ? navigation : null}
-      type={type}
-      disableLocaleButton={disableLocaleButton}
-      langCode={inPercy() ? { lc: 'en', cc: 'us' } : null}
-      languageOnly={languageOnly}
-      languageItems={languageOnly ? items : null}
-      languageInitialItem={languageInitialItem}
-      languageCallback={languageCallback}
-      adjunctLinks={[
-        {
-          title: 'Read the updated Terms of Use.',
-          url: 'https://www.example.com',
-        },
-        {
-          title: 'Read Learning Technologies Privacy',
-          url: 'https://www.example.com',
-        },
-      ]}
-    />
-  );
-};
-
-DefaultWithAdjunctLegalLinks.story = {
-  name: 'Default with adjunct legal links',
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Default with adjunct legal links',
-    },
-  },
-};
-
-export const DefaultLanguageOnly = () => {
-  return (
-    <div className="default-language-only">
-      <Default {...props.defaultLanguageOnly()} />
-    </div>
-  );
-};
-
-DefaultLanguageOnly.story = {
-  name: 'Default language only',
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Default language only',
-    },
-  },
-};
-
-/**
- * Footer (short)
- *
- * @returns {*} CSF story
- */
-export const Short = () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', minHeight: '100%' }}>
-      <Default {...props.short()} />
-    </div>
-  );
-};
-
-Short.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Short',
-    },
-  },
-};
-
-/**
- * Footer (short)
- *
- * @returns {*} CSF story
- */
-export const ShortWithAdjunctLegalLinks = () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', minHeight: '100%' }}>
-      <Default {...props.shortWithAdjunctLegalLinks()} />
-    </div>
-  );
-};
-
-ShortWithAdjunctLegalLinks.story = {
-  name: 'Short with adjunct legal links',
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Short with adjunct legal links',
-    },
-  },
-};
-
-/**
- * Footer (short language only)
- *
- * @returns {*} CSF story
- */
-export const ShortLanguageOnly = () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', minHeight: '100%' }}>
-      <Default {...props.shortLanguageOnly()} />
-    </div>
-  );
-};
-
-ShortLanguageOnly.story = {
-  name: 'Short language only',
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Short language only',
-    },
-  },
-};
-
-/**
- * Footer (micro)
- *
- * @returns {*} CSF story
- */
-export const Micro = () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', minHeight: '100%' }}>
-      <Default {...props.micro()} />
-    </div>
-  );
-};
-
-Micro.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Micro',
-    },
-  },
-};
-
-/**
- * Footer (micro language only)
- *
- * @returns {*} CSF story
- */
-export const MicroLanguageOnly = () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center', minHeight: '100%' }}>
-      <Default {...props.microLanugaugeOnly()} />
-    </div>
-  );
-};
-
-MicroLanguageOnly.story = {
-  name: 'Micro language only',
-  parameters: {
-    percy: {
-      name: 'Components|Footer: Micro language only',
-    },
-  },
-};
diff --git a/packages/react/src/components/Footer/__stories__/footer.stories.scss b/packages/react/src/components/Footer/__stories__/footer.stories.scss
deleted file mode 100644
index d3f849ab563..00000000000
--- a/packages/react/src/components/Footer/__stories__/footer.stories.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-
-.default-language-only {
-  @include carbon--breakpoint(lg) {
-    padding-top: 15rem;
-  }
-}
diff --git a/packages/react/src/components/Footer/__tests__/Footer.test.js b/packages/react/src/components/Footer/__tests__/Footer.test.js
deleted file mode 100644
index 1acef649326..00000000000
--- a/packages/react/src/components/Footer/__tests__/Footer.test.js
+++ /dev/null
@@ -1,106 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { act } from 'react-dom/test-utils';
-import Footer from '../Footer';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import TranslationAPI from '../../../internal/vendor/@carbon/ibmdotcom-services/services/Translation/Translation';
-
-const FOOTER_MENU_MOCK_DATA = require('../__data__/footer-menu.json');
-const FOOTER_THIN_MOCK_DATA = require('../__data__/footer-thin.json');
-
-const MOCK_DATA = {
-  footerMenu: FOOTER_MENU_MOCK_DATA,
-  footerThin: FOOTER_THIN_MOCK_DATA,
-};
-
-jest.mock(
-  '@carbon/ibmdotcom-services/lib/services/Translation/Translation',
-  () => ({
-    getTranslation: jest.fn(() => Promise.resolve(MOCK_DATA)),
-  })
-);
-
-jest.mock('@carbon/ibmdotcom-services/lib/services/Locale/Locale', () => ({
-  getLocale: jest.fn(() => Promise.resolve({ cc: 'us', lc: 'en' })),
-  getList: jest.fn(() => Promise.resolve({})),
-}));
-
-jest.mock('@carbon/ibmdotcom-services/lib/services/DDO/DDO', () => ({
-  setVersion: jest.fn(),
-}));
-
-jest.mock(
-  '@carbon/ibmdotcom-services/lib/services/Analytics/Analytics',
-  () => ({
-    initAll: jest.fn(),
-  })
-);
-
-xdescribe('<Footer />', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('renders with everything as expected', async () => {
-    await act(async () => {
-      await ReactDOM.render(<Footer type="short" />, container);
-    });
-
-    const footer = container.querySelector('.bx--footer');
-
-    expect(TranslationAPI.getTranslation).toHaveBeenCalledTimes(1);
-    expect(footer.querySelectorAll('.bx--footer-logo')).toHaveLength(1);
-    expect(footer.querySelectorAll('.bx--footer-nav-group')).toHaveLength(
-      MOCK_DATA.footerMenu.length
-    );
-    expect(footer.querySelectorAll('.bx--legal-nav__list-item')).toHaveLength(
-      MOCK_DATA.footerThin.length + 1
-    );
-    expect(footer.querySelectorAll('.bx--footer--short')).toHaveLength(1);
-  });
-  it('renders with a custom navigation', async () => {
-    const navigationData = {
-      footerThin: [
-        {
-          title: 'Contact IBM',
-          url: 'https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen',
-        },
-        {
-          title: 'Privacy',
-          url: 'https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen',
-        },
-        {
-          title: 'Terms of use',
-          url: 'https://www.ibm.com/us-en/legal?lnk=flg-tous-usen',
-        },
-        {
-          title: 'Accessibility',
-          url: 'https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen',
-        },
-      ],
-    };
-
-    await act(async () => {
-      await ReactDOM.render(<Footer navigation={navigationData} />, container);
-    });
-
-    const footer = container.querySelector('.bx--footer');
-    expect(
-      footer.querySelectorAll('[data-autoid*=dds--footer-legal-nav__link]')
-    ).toHaveLength(4);
-  });
-});
diff --git a/packages/react/src/components/Footer/__tests__/FooterNav.test.js b/packages/react/src/components/Footer/__tests__/FooterNav.test.js
deleted file mode 100644
index 88a2a6a16b5..00000000000
--- a/packages/react/src/components/Footer/__tests__/FooterNav.test.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 FooterNav from '../FooterNav';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-const FOOTER_NAV_DATA = require('../__data__/footer-menu.json');
-
-describe('<FooterNav />', () => {
-  it('returns null if no "groups" prop', () => {
-    const footerNav = shallow(<FooterNav />);
-    expect(footerNav.isEmptyRender()).toBeTruthy();
-  });
-
-  it('returns null if "groups" prop has no length', () => {
-    const footerNav = shallow(<FooterNav groups={[]} />);
-    expect(footerNav.isEmptyRender()).toBeTruthy();
-  });
-
-  it('renders as expected', () => {
-    const footerNav = shallow(<FooterNav groups={FOOTER_NAV_DATA} />);
-
-    expect(footerNav.hasClass('bx--footer-nav')).toBeTruthy();
-  });
-});
diff --git a/packages/react/src/components/Footer/__tests__/FooterNavGroup.test.js b/packages/react/src/components/Footer/__tests__/FooterNavGroup.test.js
deleted file mode 100644
index 007f47475d8..00000000000
--- a/packages/react/src/components/Footer/__tests__/FooterNavGroup.test.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 FooterNavGroup from '../FooterNavGroup';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-const FOOTER_NAV_DATA = require('../__data__/footer-menu.json');
-
-describe('<FooterNavGroup />', () => {
-  let MOCK_DATA;
-
-  beforeEach(() => {
-    MOCK_DATA = JSON.parse(JSON.stringify(FOOTER_NAV_DATA[0]));
-  });
-
-  it('returns null if no props', () => {
-    const footerNavGroup = shallow(<FooterNavGroup />);
-
-    expect(footerNavGroup.isEmptyRender()).toBeTruthy();
-  });
-
-  it('returns null if no "title" prop', () => {
-    const footerNavGroup = shallow(<FooterNavGroup links={MOCK_DATA.links} />);
-
-    expect(footerNavGroup.isEmptyRender()).toBeTruthy();
-  });
-
-  it('returns null if no "links" prop', () => {
-    const footerNavGroup = shallow(<FooterNavGroup title={MOCK_DATA.title} />);
-
-    expect(footerNavGroup.isEmptyRender()).toBeTruthy();
-  });
-
-  it('returns null if "links" prop has no length', () => {
-    const footerNavGroup = shallow(
-      <FooterNavGroup title={MOCK_DATA.title} links={[]} />
-    );
-
-    expect(footerNavGroup.isEmptyRender()).toBeTruthy();
-  });
-
-  it('item child returns null if "title" is missing', () => {
-    delete MOCK_DATA.links[0].title;
-
-    const footerNavGroup = shallow(
-      <FooterNavGroup title={MOCK_DATA.title} links={MOCK_DATA.links} />
-    );
-
-    expect(footerNavGroup.exists('.bx--footer-nav-group')).toBeTruthy();
-    expect(footerNavGroup.find('.bx--footer-nav-group__item')).toHaveLength(
-      FOOTER_NAV_DATA[0].links.length - 1
-    );
-  });
-
-  it('item child returns null if "url" is missing', () => {
-    delete MOCK_DATA.links[0].url;
-
-    const footerNavGroup = shallow(
-      <FooterNavGroup title={MOCK_DATA.title} links={MOCK_DATA.links} />
-    );
-
-    expect(footerNavGroup.exists('.bx--footer-nav-group')).toBeTruthy();
-    expect(footerNavGroup.find('.bx--footer-nav-group__item')).toHaveLength(
-      FOOTER_NAV_DATA[0].links.length - 1
-    );
-  });
-
-  it('renders as expected', () => {
-    const footerNavGroup = shallow(
-      <FooterNavGroup title={MOCK_DATA.title} links={MOCK_DATA.links} />
-    );
-
-    expect(footerNavGroup.exists('.bx--footer-nav-group')).toBeTruthy();
-    expect(footerNavGroup.find('.bx--footer-nav-group__item')).toHaveLength(
-      FOOTER_NAV_DATA[0].links.length
-    );
-  });
-});
diff --git a/packages/react/src/components/Footer/__tests__/LegalNav.test.js b/packages/react/src/components/Footer/__tests__/LegalNav.test.js
deleted file mode 100644
index 173517ff869..00000000000
--- a/packages/react/src/components/Footer/__tests__/LegalNav.test.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 LegalNav from '../LegalNav';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-const FOOTER_NAV_DATA = require('../__data__/footer-thin.json');
-
-describe('<LegalNav />', () => {
-  let MOCK_DATA;
-
-  beforeEach(() => {
-    MOCK_DATA = JSON.parse(JSON.stringify(FOOTER_NAV_DATA));
-  });
-
-  it('returns null if no "links" prop', () => {
-    const legalNav = shallow(<LegalNav />);
-
-    expect(legalNav.isEmptyRender()).toBeTruthy();
-  });
-
-  it('returns null if "links" prop has no length', () => {
-    const legalNav = shallow(<LegalNav links={[]} />);
-
-    expect(legalNav.isEmptyRender()).toBeTruthy();
-  });
-
-  it('does not render nav item when title is missing', () => {
-    delete MOCK_DATA[0].title;
-
-    const legalNav = shallow(<LegalNav links={MOCK_DATA} />);
-
-    expect(legalNav.exists('.bx--legal-nav')).toBeTruthy();
-
-    // adding an additional LI to legalNav for the `dds-privacy-cp` placeholder
-    expect(legalNav.find('.bx--legal-nav__list-item')).toHaveLength(
-      FOOTER_NAV_DATA.length
-    );
-  });
-
-  it('does not render nav item when url is missing', () => {
-    delete MOCK_DATA[0].url;
-
-    const legalNav = shallow(<LegalNav links={MOCK_DATA} />);
-
-    expect(legalNav.exists('.bx--legal-nav')).toBeTruthy();
-
-    // adding an additional LI to legalNav for the `dds-privacy-cp` placeholder
-    expect(legalNav.find('.bx--legal-nav__list-item')).toHaveLength(
-      FOOTER_NAV_DATA.length
-    );
-  });
-
-  it('renders as expected', () => {
-    const legalNav = shallow(<LegalNav links={MOCK_DATA} />);
-
-    expect(legalNav.exists('.bx--legal-nav')).toBeTruthy();
-
-    // adding an additional LI to legalNav for the `dds-privacy-cp` placeholder
-    expect(legalNav.find('.bx--legal-nav__list-item')).toHaveLength(
-      FOOTER_NAV_DATA.length + 1
-    );
-  });
-});
diff --git a/packages/react/src/components/Footer/__tests__/LocaleButton.test.js b/packages/react/src/components/Footer/__tests__/LocaleButton.test.js
deleted file mode 100644
index b60fc286ebc..00000000000
--- a/packages/react/src/components/Footer/__tests__/LocaleButton.test.js
+++ /dev/null
@@ -1,75 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { act } from 'react-dom/test-utils';
-import LocaleButton from '../LocaleButton';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-jest.mock('@carbon/ibmdotcom-services/lib/services/Locale/Locale', () => ({
-  getLocale: jest.fn(() => Promise.resolve({ cc: 'us', lc: 'en' })),
-  getList: jest.fn(() => Promise.resolve({})),
-  getLangDisplay: jest.fn(() => Promise.resolve()),
-  setLangDisplay: jest.fn(() => Promise.resolve()),
-}));
-
-describe('<LocaleButton />', () => {
-  let container;
-
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('renders button and locale modal', () => {
-    act(() => {
-      ReactDOM.render(<LocaleButton />, container);
-    });
-
-    const btnContainer = container.querySelector('.bx--locale-btn__container');
-
-    expect(btnContainer.querySelectorAll('button.bx--locale-btn')).toHaveLength(
-      1
-    );
-    expect(
-      btnContainer.querySelectorAll('.bx--locale-modal-container')
-    ).toHaveLength(1);
-  });
-
-  it('opens and closes properly', () => {
-    act(() => {
-      ReactDOM.render(<LocaleButton />, container);
-    });
-
-    const btn = container.querySelector('button.bx--locale-btn');
-    const modal = container.querySelector('.bx--locale-modal-container');
-    const modalCloseBtn = modal.querySelector('button.bx--modal-close');
-
-    // Closed on load
-    expect(modal.classList.contains('is-visible')).toBe(false);
-    expect(modal.hasAttribute('open')).toBe(false);
-
-    // Open when button is clicked
-    act(() => {
-      btn.click();
-    });
-    expect(modal.classList.contains('is-visible')).toBe(true);
-    expect(modal.hasAttribute('open')).toBe(true);
-
-    // And closed again
-    act(() => {
-      modalCloseBtn.click();
-    });
-    expect(modal.classList.contains('is-visible')).toBe(false);
-    expect(modal.hasAttribute('open')).toBe(false);
-  });
-});
diff --git a/packages/react/src/components/Footer/index.js b/packages/react/src/components/Footer/index.js
deleted file mode 100644
index 2f265558077..00000000000
--- a/packages/react/src/components/Footer/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as Footer } from './Footer';
-export { default as FooterLogo } from './FooterLogo';
-export { default as FooterNav } from './FooterNav';
-export { default as FooterNavGroup } from './FooterNavGroup';
-export { default as LegalNav } from './LegalNav';
diff --git a/packages/react/src/components/HorizontalRule/HorizontalRule.js b/packages/react/src/components/HorizontalRule/HorizontalRule.js
deleted file mode 100644
index ea4eae41fb1..00000000000
--- a/packages/react/src/components/HorizontalRule/HorizontalRule.js
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 classnames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Horizontal Rule component.
- */
-const HorizontalRule = ({ type, size, contrast, weight }) => (
-  <hr
-    data-autoid={`${stablePrefix}--hr`}
-    className={classnames(`${prefix}--hr`, {
-      [`${prefix}--hr--${type}`]: type,
-      [`${prefix}--hr--${contrast}`]: contrast,
-      [`${prefix}--hr--${size}`]: size,
-      [`${prefix}--hr--${weight}`]: weight,
-    })}
-  />
-);
-
-HorizontalRule.propTypes = {
-  /**
-   * Type of HR. Choose from:
-   *
-   * | Name     | Description                                                                    |
-   * | -------- | ------------------------------------------------------------------------------ |
-   * | `solid`  | Default type variant of the horizontal rule                                   |
-   * | `dashed` | Dashed/dotted type variant (type is applied in conjuction with `fluid` size) |
-   */
-  type: PropTypes.oneOf(['solid', 'dashed']),
-
-  /**
-   * Length of the HR. Choose from:
-   *
-   * | Name     | Description                                                         |
-   * | -------- | ------------------------------------------------------------------- |
-   * | `fluid`  | Default size variant - horizontal rule takes full width of the grid |
-   * | `small`  | Shorter fixed-length variant with a max-width of 32px               |
-   * | `medium` | Medium fixed-length variant with a max-width of 48px                |
-   * | `large`  | Longer fixed-length variant with a max-width of 64px                |
-   */
-  size: PropTypes.oneOf(['fluid', 'small', 'medium', 'large']),
-
-  /**
-   * Contrast of the HR. Choose from:
-   *
-   * | Name              | Description                    |
-   * | ----------------- | ------------------------------ |
-   * | `medium-contrast` | Default contrast color variant |
-   * | `low-contrast`    | Lighter contrast color variant |
-   * | `high-contrast`   | Darker contrast color variant  |
-   */
-  contrast: PropTypes.oneOf([
-    'medium-contrast',
-    'low-contrast',
-    'high-contrast',
-  ]),
-
-  /**
-   * Weight of the HR. Choose from:
-   *
-   * | Name    | Description                                                                          |
-   * | ------- | ------------------------------------------------------------------------------------ |
-   * | `thin`  | Default weight variant                                                               |
-   * | `thick` | Slightly thicker weight variant (this only applied in conjunction with `fluid` size) |
-   */
-  weight: PropTypes.oneOf(['thin', 'thick']),
-};
-
-export default HorizontalRule;
diff --git a/packages/react/src/components/HorizontalRule/README.stories.mdx b/packages/react/src/components/HorizontalRule/README.stories.mdx
deleted file mode 100644
index f1b5fb41742..00000000000
--- a/packages/react/src/components/HorizontalRule/README.stories.mdx
+++ /dev/null
@@ -1,77 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import HorizontalRule from './HorizontalRule';
-
-# Horizontal Rule
-
-> Horizontal rules provide thematic breaks between content.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/HorizontalRule)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/HorizontalRule)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/horizontalrule/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the HorizontalRule
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { HorizontalRule } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return <HorizontalRule />;
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the horizontal rule styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import HorizontalRule from '@carbon/ibmdotcom-react/es/components/HorizontalRule/HorizontalRule';
-````
-
-## Props
-
-<Props of={HorizontalRule} />
-
-## Stable selectors
-
-| Name              | Description |
-| ----------------- | ----------- |
-| `dds--hr`         | Component   |
-| `dds--hr--${mod}` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/HorizontalRule/__stories__/HorizontalRule.stories.js b/packages/react/src/components/HorizontalRule/__stories__/HorizontalRule.stories.js
deleted file mode 100644
index eb24e61df50..00000000000
--- a/packages/react/src/components/HorizontalRule/__stories__/HorizontalRule.stories.js
+++ /dev/null
@@ -1,95 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-import HorizontalRule from '../HorizontalRule';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = {
-  solid: undefined,
-  dashed: 'dashed',
-};
-
-const sizes = {
-  small: 'small',
-  medium: 'medium',
-  large: 'large',
-  fluid: undefined,
-};
-
-const contrasts = {
-  'low-contrast': 'low-contrast',
-  'medium-contrast': undefined,
-  'high-contrast': 'high-contrast',
-};
-
-const weights = {
-  thin: undefined,
-  thick: 'thick',
-};
-
-const props = {
-  HorizontalRule: () => ({
-    type: select('type (type)', types, types.solid),
-    size: select('size (size)', sizes, sizes.fluid),
-    contrast: select(
-      'contrast (contrast)',
-      contrasts,
-      contrasts['medium-contrast']
-    ),
-    weight: select('weight (weight)', weights, weights.thin),
-  }),
-  Other: () => ({
-    words: text(
-      'text',
-      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.'
-    ),
-  }),
-};
-
-export default {
-  title: 'Components/Horizontal rule',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Horizontal rule: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div>
-      <h3>
-        <b>Horizontal Rule in Grid with no Gutter</b>
-      </h3>
-      <div className="bx--grid bx--no-gutter" style={{ marginBottom: '50px' }}>
-        <div className="bx--row">
-          <div className="bx--col">
-            {props.Other().words}
-            <HorizontalRule {...props.HorizontalRule()} />
-            {props.Other().words}
-          </div>
-        </div>
-      </div>
-
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col">
-            <h3>
-              <b>Horizontal Rule in Grid with Gutter</b>
-            </h3>
-            {props.Other().words}
-            <HorizontalRule {...props.HorizontalRule()} />
-            {props.Other().words}
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/HorizontalRule/index.js b/packages/react/src/components/HorizontalRule/index.js
deleted file mode 100644
index 03f30336a7e..00000000000
--- a/packages/react/src/components/HorizontalRule/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as HorizontalRule } from './HorizontalRule';
diff --git a/packages/react/src/components/Icon/IbmLogo.js b/packages/react/src/components/Icon/IbmLogo.js
deleted file mode 100644
index 88b12bac48c..00000000000
--- a/packages/react/src/components/Icon/IbmLogo.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 ConditionalWrapper from '../../internal/components/ConditionalWrapper/ConditionalWrapper';
-import cx from 'classnames';
-import MastheadLogo from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h23.svg';
-import MastheadLogoAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/MastheadLogo/MastheadLogo';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import TooltipDefinition from '../../internal/vendor/carbon-components-react/components/TooltipDefinition';
-
-const { prefix } = settings;
-
-/**
- * IBM Logo 8-bar component.
- */
-const IbmLogo = ({ autoid, logoData, isSearchActive }) => {
-  const useAlternateLogo = MastheadLogoAPI.setMastheadLogo(logoData);
-  const logoClasses = cx({
-    [`${prefix}--header__logo`]: true,
-    [`${prefix}--search-active`]: isSearchActive,
-  });
-
-  return (
-    <div className={logoClasses}>
-      <ConditionalWrapper
-        condition={logoData && logoData.tooltip !== undefined}
-        wrapper={(children) => (
-          <TooltipDefinition tooltipText={logoData.tooltip}>
-            {children}
-          </TooltipDefinition>
-        )}>
-        {useAlternateLogo ? (
-          <a // eslint-disable-line
-            aria-label="IBM®"
-            data-autoid={autoid}
-            href={`https://www.ibm.com${logoData.path}`}
-            dangerouslySetInnerHTML={{ __html: logoData.svg }}
-          />
-        ) : (
-          <a
-            aria-label="IBM®"
-            data-autoid={autoid}
-            href={`https://www.ibm.com`}>
-            {!useAlternateLogo && <MastheadLogo />}
-          </a>
-        )}
-      </ConditionalWrapper>
-    </div>
-  );
-};
-
-export default IbmLogo;
-
-IbmLogo.propTypes = {
-  /**
-   * data-autoid attribute for analytics
-   */
-  autoid: PropTypes.string,
-
-  /**
-   * `true` when search is active
-   */
-  isSearchActive: PropTypes.bool,
-
-  /**
-   * Masthead logo object
-   * See [mastheadLogo](#mastheadlogo)
-   * for details.
-   */
-  logoData: PropTypes.shape({
-    svg: PropTypes.string,
-    tooltip: PropTypes.string,
-    denyList: PropTypes.array,
-    allowList: PropTypes.array,
-    expire: PropTypes.string,
-    path: PropTypes.string,
-  }),
-};
diff --git a/packages/react/src/components/Icon/index.js b/packages/react/src/components/Icon/index.js
deleted file mode 100644
index 767019de39e..00000000000
--- a/packages/react/src/components/Icon/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as IbmLogo } from './IbmLogo';
diff --git a/packages/react/src/components/Image/Image.js b/packages/react/src/components/Image/Image.js
deleted file mode 100755
index 73e2a3bbfe6..00000000000
--- a/packages/react/src/components/Image/Image.js
+++ /dev/null
@@ -1,143 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { baseFontSize, breakpoints } from '@carbon/layout';
-import classnames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import uniqueid from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/uniqueid/uniqueid';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- *  sorts media query min-widths order to ensure the
- * browser returns the proper sources and the specified widths
- *
- * @param {Array} sources image sources and min-widths
- * @returns {Array} sorted array of sources
- */
-const sortSources = (sources) => {
-  const images = sources.map((elem) => {
-    if (typeof elem.breakpoint == 'number') {
-      return elem;
-    }
-    return {
-      breakpoint: parseFloat(breakpoints[elem.breakpoint].width) * baseFontSize,
-      src: elem.src,
-    };
-  });
-  return images.sort((a, b) => (a.breakpoint > b.breakpoint ? -1 : 1));
-};
-
-/**
- * Picture element.
- */
-const Image = ({
-  classname,
-  sources,
-  defaultSrc,
-  alt,
-  longDescription,
-  icon: Icon,
-  border,
-  refImage,
-}) => {
-  if (!defaultSrc || !alt) {
-    return null;
-  }
-
-  const sortedImages = sources ? sortSources(sources) : [];
-  const id = uniqueid(`${prefix}--image-`);
-  const imageClasses = classnames(`${prefix}--image__img`, classname, {
-    [`${prefix}--image__img--border`]: border,
-  });
-  return (
-    <div
-      className={`${prefix}--image`}
-      data-autoid={`${stablePrefix}--image__longdescription`}>
-      <picture ref={refImage}>
-        {sortedImages.map((imgSrc, key) => {
-          return (
-            <source
-              media={`(min-width: ${imgSrc.breakpoint}px)`}
-              key={key}
-              srcSet={imgSrc.src}
-            />
-          );
-        })}
-        <img
-          className={imageClasses}
-          src={defaultSrc}
-          alt={alt}
-          aria-describedby={longDescription ? `${id}` : undefined}
-        />
-      </picture>
-      {longDescription ? (
-        <div id={id} className={`${prefix}--image__longdescription`}>
-          {longDescription}
-        </div>
-      ) : null}
-      {Icon && <Icon className={`${prefix}--image__icon`} />}
-    </div>
-  );
-};
-
-Image.propTypes = {
-  /**
-   * The CSS class names.
-   */
-  classname: PropTypes.string,
-
-  /**
-   * Array of image objects. Use below object structure for each items:
-   *
-   * | Name         | Data Type     | Description                                  |
-   * | ------------ | ------------- | -------------------------------------------- |
-   * | `src`        | String        | Url of Image.                                |
-   * | `breakpoint` | Num OR String | min-width breakpoint to render the image src |
-   */
-  sources: PropTypes.arrayOf(
-    PropTypes.shape({
-      src: PropTypes.string,
-      breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    })
-  ),
-
-  /**
-   * Default image (usually image for largest breakpoint).
-   */
-  defaultSrc: PropTypes.string.isRequired,
-
-  /**
-   * Alternate text for image component.
-   */
-  alt: PropTypes.string.isRequired,
-
-  /**
-   * Visible to screen readers, hidden from users.
-   */
-  longDescription: PropTypes.string,
-
-  /**
-   * Icon that overlays the image
-   */
-  icon: PropTypes.func,
-
-  /**
-   * Option to apply a solid border around the image
-   */
-  border: PropTypes.bool,
-
-  /**
-   * Callback ref to get proper thumbnail sizing on Kaltura videos
-   */
-  refImage: PropTypes.func,
-};
-
-export default Image;
diff --git a/packages/react/src/components/Image/README.stories.mdx b/packages/react/src/components/Image/README.stories.mdx
deleted file mode 100644
index 0041ea3b1ad..00000000000
--- a/packages/react/src/components/Image/README.stories.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import Image from './Image';
-
-# Image
-
-> The image component is used to embed images within content and can display a
-> specific image depending on viewport size.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Image)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Image)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/image/image';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Image styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'yourapplication.scss';
-
-function App() {
-  const sources = [
-    {
-      src:
-        'https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 320,
-    },
-    {
-      src:
-        'https://fpoimg.com/400x400?text=1:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 400,
-    },
-    {
-      src:
-        'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-      breakpoint: 672,
-    },
-  ];
-
-  const defaultSrc =
-    'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616';
-  const alt = 'Lorem Ipsum';
-  const longDescription = 'Lorem Ipsum Dolor';
-
-  return (
-    <Image
-      sources={sources}
-      defaultSrc={defaultSrc}
-      alt={alt}
-      longDescription={longDescription}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the image styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import Image from '@carbon/ibmdotcom-react/es/components/Image/Image';
-```
-
-## Props
-
-<Props of={Image} />
-
-## Stable selectors
-
-| Name                         | Description |
-| ---------------------------- | ----------- |
-| `dds--imagecomponent`        | Interactive |
-| `dds--imagecomponent__image` | Interactive |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/Image/__stories__/Image.stories.js b/packages/react/src/components/Image/__stories__/Image.stories.js
deleted file mode 100755
index 750a0085ba9..00000000000
--- a/packages/react/src/components/Image/__stories__/Image.stories.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import Image from '../Image';
-import img320 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--001.jpg';
-import img480 from '../../../../../storybook-images/assets/480/fpo--2x1--480x240--001.jpg';
-import img960 from '../../../../../storybook-images/assets/960/fpo--2x1--960x480--001.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-const props = () => ({
-  sources: [
-    {
-      src: img320,
-      breakpoint: 'sm',
-    },
-    {
-      src: img480,
-      breakpoint: 'md',
-    },
-    {
-      src: img960,
-      breakpoint: 'lg',
-    },
-  ],
-  alt: text('Image alt text (alt):', 'Image alt text'),
-  defaultSrc: text('Default image (defaultSrc):', img960),
-  border: boolean('Image border (border):', false),
-});
-
-export default {
-  title: 'Components/Image',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Image: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className={`${prefix}--grid`}>
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <Image {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/Image/index.js b/packages/react/src/components/Image/index.js
deleted file mode 100644
index 2ed3bc01802..00000000000
--- a/packages/react/src/components/Image/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as Image } from './Image';
diff --git a/packages/react/src/components/ImageWithCaption/ImageWithCaption.js b/packages/react/src/components/ImageWithCaption/ImageWithCaption.js
deleted file mode 100644
index 9abf9693eb6..00000000000
--- a/packages/react/src/components/ImageWithCaption/ImageWithCaption.js
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useState } from 'react';
-import CTALogic from '../CTA/CTALogic';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { Image } from '../Image';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import ZoomIn20 from '@carbon/icons-react/es/zoom--in/20';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Picture element.
- */
-const ImageWithCaption = ({
-  image,
-  lightbox,
-  heading,
-  copy,
-  customClassName,
-}) => {
-  const [renderLightBox, openLightBox] = useState(false);
-
-  if (!image) {
-    return null;
-  }
-  const classnames = cx(`${prefix}--image-with-caption`, customClassName);
-
-  const media = {
-    type: 'image',
-    src: image.defaultSrc,
-    title: heading,
-    alt: image.alt,
-    description: copy,
-  };
-
-  return (
-    <div
-      className={classnames}
-      data-autoid={`${stablePrefix}--image-with-caption`}>
-      {CTALogic.launchLightBox(renderLightBox, openLightBox, media)}
-      {lightbox ? (
-        <button
-          aria-label="launch light box media viewer"
-          className={`${prefix}--image-with-caption__image`}
-          onClick={(e) => CTALogic.setLightBox(e, openLightBox)}>
-          <Image {...image} />
-          <div className={`${prefix}--image-with-caption__zoom-button`}>
-            <ZoomIn20 aria-label="Zoom In Icon" />
-          </div>
-        </button>
-      ) : (
-        <Image {...image} />
-      )}
-      <p
-        className={`${prefix}--image__caption`}
-        data-autoid={`${stablePrefix}--image__caption`}>
-        {heading}
-      </p>
-    </div>
-  );
-};
-
-ImageWithCaption.propTypes = {
-  /**
-   * Image object needed for ImageWithCaption component.
-   * Visit the [Image storybook](https://www.ibm.com/standards/carbon/react/?path=/story/components-image--default)
-   * for more details on the Image component.
-   */
-  image: PropTypes.shape({
-    classname: PropTypes.string,
-    sources: PropTypes.arrayOf(
-      PropTypes.shape({
-        src: PropTypes.string,
-        breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      })
-    ),
-    defaultSrc: PropTypes.string.isRequired,
-    alt: PropTypes.string.isRequired,
-    longDescription: PropTypes.string,
-  }).isRequired,
-
-  /**
-   * `true` to enable lightbox functionality, allowing user to see enlarged image.
-   */
-  lightbox: PropTypes.bool,
-
-  /**
-   * Caption text.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * More detailed description of the image.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * The CSS class name to apply.
-   */
-  customClassName: PropTypes.string,
-};
-
-ImageWithCaption.defaultProps = {
-  copy: '',
-  lightbox: false,
-};
-
-export default ImageWithCaption;
diff --git a/packages/react/src/components/ImageWithCaption/README.stories.mdx b/packages/react/src/components/ImageWithCaption/README.stories.mdx
deleted file mode 100644
index d8127a03e1a..00000000000
--- a/packages/react/src/components/ImageWithCaption/README.stories.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ImageWithCaption from './ImageWithCaption';
-
-# Image With Caption
-
-> This leverages the image component and can also display a caption for the
-> image.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ImageWithCaption)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ImageWithCaption)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/image-with-caption/image-with-caption';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> ImageWithCaption styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'this is the caption text.';
-  const image = {
-    defaultSrc:
-      'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-    alt: 'image with caption alt text',
-    sources: [
-      {
-        src:
-          'https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616',
-        breakpoint: 320,
-      },
-      {
-        src:
-          'https://fpoimg.com/400x400?text=1:1&bg_color=ee5396&text_color=161616',
-        breakpoint: 400,
-      },
-      {
-        src:
-          'https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616',
-        breakpoint: 672,
-      },
-    ],
-  };
-
-  return <ImageWithCaption inverse={false} image={image} heading={heading} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the image styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={ImageWithCaption} />
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ImageWithCaption from '@carbon/ibmdotcom-react/es/components/ImageWithCaption/ImageWithCaption';
-```
-
-## Stable selectors
-
-| Name                      | Description |
-| ------------------------- | ----------- |
-| `dds--image-with-caption` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ImageWithCaption/__stories__/ImageWithCaption.stories.js b/packages/react/src/components/ImageWithCaption/__stories__/ImageWithCaption.stories.js
deleted file mode 100755
index 646c1e039b9..00000000000
--- a/packages/react/src/components/ImageWithCaption/__stories__/ImageWithCaption.stories.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import ImageWithCaption from '../ImageWithCaption';
-import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--004.jpg';
-import imgMd2x1 from '../../../../../storybook-images/assets/480/fpo--2x1--480x240--004.jpg';
-import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--004.jpg';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const props = () => ({
-  heading: text('Heading (heading):', 'This is a caption'),
-  image: {
-    sources: [
-      {
-        src: imgSm2x1,
-        breakpoint: 'sm',
-      },
-      {
-        src: imgMd2x1,
-        breakpoint: 'md',
-      },
-      {
-        src: imgLg2x1,
-        breakpoint: 'lg',
-      },
-    ],
-    alt: 'image with caption image',
-    defaultSrc: imgLg2x1,
-  },
-  copy: text('Copy (copy):', 'This is a description of the image.'),
-  lightbox: boolean('lightbox', true),
-});
-
-export default {
-  title: 'Components/Image with caption',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Image with caption: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <ImageWithCaption {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/ImageWithCaption/__stories__/index.scss b/packages/react/src/components/ImageWithCaption/__stories__/index.scss
deleted file mode 100644
index 0400a485eac..00000000000
--- a/packages/react/src/components/ImageWithCaption/__stories__/index.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-//
-// Copyright IBM Corp. 2016, 2018
-//
-// 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 '../../../../../styles/scss/components/image-with-caption/image-with-caption';
diff --git a/packages/react/src/components/ImageWithCaption/__tests__/ImageWithCaption.steps.js b/packages/react/src/components/ImageWithCaption/__tests__/ImageWithCaption.steps.js
deleted file mode 100644
index 7fd0042b365..00000000000
--- a/packages/react/src/components/ImageWithCaption/__tests__/ImageWithCaption.steps.js
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('ImageWithCaption', () => {
-  beforeAll(async () => {
-    await page.goto(
-      `http://localhost:${process.env.PORT}/iframe.html?id=components-imagewithcaption--default`
-    );
-  });
-
-  it('should have the right type for the caption', async () => {
-    const caption = await page.waitForSelector('.bx--image__caption');
-    const styleValues = await page.evaluate(
-      (caption) =>
-        window.getStyleValues(caption, [
-          'font-size',
-          'font-weight',
-          'line-height',
-          'letter-spacing',
-        ]),
-      caption
-    );
-    expect(styleValues).toEqual({
-      'font-size': '14px',
-      'font-weight': '400',
-      'line-height': '18px',
-      'letter-spacing': '0.16px',
-    });
-  });
-});
diff --git a/packages/react/src/components/ImageWithCaption/index.js b/packages/react/src/components/ImageWithCaption/index.js
deleted file mode 100644
index 0f8e112c2e7..00000000000
--- a/packages/react/src/components/ImageWithCaption/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as ImageWithCaption } from './ImageWithCaption';
diff --git a/packages/react/src/components/Layout/Layout.js b/packages/react/src/components/Layout/Layout.js
deleted file mode 100644
index 2e1bbe01820..00000000000
--- a/packages/react/src/components/Layout/Layout.js
+++ /dev/null
@@ -1,203 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 classnames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate.js';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Layout types
- *
- * @type {{'1-3': string[]}}
- * @private
- */
-const _types = {
-  '1-3': [`${prefix}--col-lg-4`, `${prefix}--col-lg-12`], // 1/4 - 3/4
-  '2-1': [`${prefix}--layout-2-3`, `${prefix}--layout-1-3`], // 2/3 - 1/3
-};
-
-/**
- * Returns the child classes with the proper column class names
- *
- * @param {string} type layout type
- * @param {number} stickyOffset Sticky offset amount (in pixels)
- * @param {object} children child nodes
- * @returns {*} modified child content
- * @private
- */
-function _updateChild(type, stickyOffset, children) {
-  const final = [];
-
-  children.map((child, i) => {
-    if (child.props['data-sticky'] === 'true') {
-      final.push(
-        <div
-          className={classnames(
-            _types[type] && _types[type][i]
-              ? `${_types[type][i]} ${prefix}--layout--sticky-mobile`
-              : `${prefix}--col`
-          )}
-          key={i}
-          style={{
-            top: stickyOffset ? `${stickyOffset}px` : 0,
-          }}>
-          {React.cloneElement(child, {
-            className: classnames(
-              child.props.className,
-              `${prefix}--layout--sticky-desktop`
-            ),
-            style: {
-              top: stickyOffset ? `${stickyOffset}px` : 0,
-            },
-          })}
-        </div>
-      );
-    } else {
-      final.push(
-        React.cloneElement(child, {
-          className: classnames(
-            child.props.className,
-            _types[type] && _types[type][i] ? _types[type][i] : `${prefix}--col`
-          ),
-          key: i,
-        })
-      );
-    }
-  });
-
-  return final;
-}
-
-/**
- * Returns the spacing modifier class
- *
- * @param {string} position top or bottom position of the layout
- * @param {string} modifier layout modifier from the layout scale
- * @returns {*|string} spacing class
- * @private
- */
-function _spacingClass(position, modifier) {
-  return modifier && `${prefix}--layout--${position}-${modifier}`;
-}
-
-/**
- * Layout component
- * This is an abstract layout component that can be reutilized for multiple
- * patterns. This autocreates the proper grid classes, along with the optional
- * sticky attribute to the child elements (columns).
- */
-const Layout = ({
-  type,
-  marginTop,
-  marginBottom,
-  stickyOffset,
-  border,
-  nested,
-  children,
-}) => (
-  <section
-    data-autoid={`${stablePrefix}--layout`}
-    className={classnames(nested ? `` : `${prefix}--grid`, {
-      [_spacingClass('top', marginTop)]: marginTop,
-      [_spacingClass('bottom', marginBottom)]: marginBottom,
-    })}>
-    <div
-      className={classnames(`${prefix}--row`, {
-        [`${prefix}--layout--border`]: border,
-      })}>
-      {_updateChild(type, stickyOffset, children)}
-    </div>
-  </section>
-);
-
-Layout.propTypes = {
-  /**
-   * Layout type. Choose from:
-   *
-   * | Name  | Description             |
-   * | ----- | ----------------------- |
-   * | `1-3` | 1/4 - 3/4 column layout |
-   * | `2-1` | 2/3 - 1/3 column layout |
-   */
-  type: PropTypes.oneOf(['1-3', '2-1']).isRequired,
-
-  /**
-   * Top Margin value for Layout. Choose from:
-   *
-   * | Name                    | Description                            |
-   * | ----------------------- | -------------------------------------- |
-   * | `layout-01 - layout-07` | Layout token values for the top margin |
-   */
-  marginTop: PropTypes.oneOf([
-    'layout-01',
-    'layout-02',
-    'layout-03',
-    'layout-04',
-    'layout-05',
-    'layout-06',
-    'layout-07',
-  ]),
-
-  /**
-   * Bottom Margin value for Layout. Choose from:
-   *
-   * | Name                    | Description                               |
-   * | ----------------------- | ----------------------------------------- |
-   * | `layout-01 - layout-07` | Layout token values for the bottom margin |
-   */
-  marginBottom: PropTypes.oneOf([
-    'layout-01',
-    'layout-02',
-    'layout-03',
-    'layout-04',
-    'layout-05',
-    'layout-06',
-    'layout-07',
-  ]),
-
-  /**
-   * Component/Element to render within `<Layout>`.
-   */
-  children: PropTypes.node,
-
-  /**
-   * Defines the offset for the sticky column(s).
-   */
-  stickyOffset: PropTypes.number,
-
-  /**
-   * `true` to use the optional border at the bottom of pattern.
-   */
-  border: PropTypes.bool,
-
-  /**
-   * `true` to make the pattern fits inside a grid.
-   */
-  nested: PropTypes.bool,
-};
-
-Layout.defaultProps = {
-  marginTop: null,
-  marginBottom: null,
-  stickyOffset: null,
-  border: false,
-  nested: false,
-};
-
-export default deprecate(
-  Layout,
-  `
-  The Layout component has been deprecated in favor of the style mixin and classes.
-  See Layout documentation for more information.
-`
-);
diff --git a/packages/react/src/components/Layout/README.stories.mdx b/packages/react/src/components/Layout/README.stories.mdx
deleted file mode 100644
index 07d180652d9..00000000000
--- a/packages/react/src/components/Layout/README.stories.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import Layout from './Layout';
-
-# Layout
-
-> The Layout style mixins and classes are to be utilized within IBM.com for
-> various abstract layout configurations.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Layout)
-> example implementation.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Layout styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'yourapplication.scss';
-import '@carbon/grid/scss/grid.scss';
-
-function App() {
-  return (
-    <div className="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-      <div className="bx--row">
-        <div className="bx--layout-1-3">
-          <div className="bx--layout--sticky" style={{ top: 50 }}>
-            <h3>Column 1 (layout 1-3) </h3>
-            <p style={{ paddingBottom: '1rem' }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac
-              turpis egestas maecenas pharetra convallis posuere.
-            </p>
-          </div>
-        </div>
-        <div className="bx--layout-2-3">
-          <div>
-            <h3>Column 2</h3>
-            <p style={{ paddingBottom: '1rem' }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
-              eiusmod tempor incididunt ut labore et dolore magna aliqua. Ac
-              turpis egestas maecenas pharetra convallis posuere.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the layout styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-#### Modifiers
-
-Use these modifiers with `.bx--layout` class.
-
-| Class                                                              | Description             |
-| ------------------------------------------------------------------ | ----------------------- |
-| `.bx--layout--top-layout-01` to `.bx--layout--top-layout-07`       | Top spacing modifier    |
-| `.bx--layout--bottom-layout-01` to `.bx--layout--bottom-layout-07` | Bottom spacing modifier |
-| `.bx--layout--border`                                              | Border modifier         |
-| `.bx--layout--sticky`                                              | Sticky column modifier  |
-| `.bx--layout-2-3`                                                  | 2-3 column modifier     |
-| `.bx--layout-1-3`                                                  | 1-3 column modifier     |
diff --git a/packages/react/src/components/Layout/__stories__/Layout.stories.js b/packages/react/src/components/Layout/__stories__/Layout.stories.js
deleted file mode 100644
index c5e2b8019ae..00000000000
--- a/packages/react/src/components/Layout/__stories__/Layout.stories.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { select, number, boolean } from '@storybook/addon-knobs';
-import cx from 'classnames';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const layoutOptions = {
-  none: null,
-  'layout-01': 'layout-01',
-  'layout-02': 'layout-02',
-  'layout-03': 'layout-03',
-  'layout-04': 'layout-04',
-  'layout-05': 'layout-05',
-  'layout-06': 'layout-06',
-  'layout-07': 'layout-07',
-};
-
-const props = {
-  'Layout 1-3': () => ({
-    marginTop: select('Top Margin', layoutOptions, layoutOptions['layout-03']),
-    marginBottom: select(
-      'Bottom Margin',
-      layoutOptions,
-      layoutOptions['layout-06']
-    ),
-    stickyOffset: number('Sticky offset (in pixels)', 0, {}),
-  }),
-  'Layout 2-1': () => ({
-    border: boolean('Optional border:', false),
-  }),
-  'Story content 1-3': () => ({
-    'data-sticky': select('Sticky left column', [true, false], true),
-  }),
-  'Story content 2-2': () => ({
-    'data-sticky': select('Sticky right column', [true, false], true),
-  }),
-};
-
-export default {
-  title: 'Components/Layout',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Layout: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const { marginTop, marginBottom, stickyOffset } = props['Layout 1-3']() ?? {};
-  const { border } = props['Layout 2-1'] ?? {};
-  const { 'data-sticky': stickyLeft } = props['Story content 1-3']() ?? {};
-  const { 'data-sticky': stickyRight } = props['Story content 2-2']() ?? {};
-
-  return (
-    <>
-      <p style={{ paddingBottom: '1rem' }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas
-        maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin
-        sed libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna
-        et pharetra pharetra massa massa ultricies mi. Nascetur ridiculus mus
-        mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices.
-        Urna neque viverra justo nec ultrices dui sapien. Augue eget arcu dictum
-        varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-      </p>
-
-      <p style={{ paddingBottom: '1rem' }}>Layout classes used below.</p>
-
-      <div
-        className={cx(`bx--grid`, {
-          [`bx--layout--top-${marginTop}`]: marginTop,
-          [`bx--layout--bottom-${marginBottom}`]: marginBottom,
-        })}>
-        <div className="bx--row">
-          <div className="bx--layout-1-3">
-            <div
-              className={cx({
-                [`bx--layout--sticky`]: stickyLeft,
-              })}
-              style={{
-                top: stickyOffset ? `${stickyOffset}px` : 0,
-              }}>
-              <h3>Column 1</h3>
-
-              <ul className="bx--list--unordered">
-                <li className="bx--list__item">Item 1</li>
-                <li className="bx--list__item">Item 2</li>
-                <li className="bx--list__item">Item 3</li>
-                <li className="bx--list__item">Item 4</li>
-                <li className="bx--list__item">Item 5</li>
-                <li className="bx--list__item">Item 6</li>
-                <li className="bx--list__item">Item 7</li>
-              </ul>
-            </div>
-          </div>
-          <div
-            className={cx('bx--layout-2-3', {
-              [`bx--layout--border`]: border,
-            })}>
-            <div className="bx--row">
-              <div className="bx--layout-2-3">
-                <h3>Column 2.1</h3>
-                <p style={{ paddingBottom: '1rem' }}>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ac turpis egestas maecenas pharetra convallis posuere.
-                  Ultrices dui sapien eget mi proin sed libero enim. Elementum
-                  facilisis leo vel fringilla. Sed tempus urna et pharetra
-                  pharetra massa massa ultricies mi. Nascetur ridiculus mus
-                  mauris vitae ultricies leo integer. Eget mauris pharetra et
-                  ultrices. Urna neque viverra justo nec ultrices dui sapien.
-                  Augue eget arcu dictum varius duis. Eget mauris pharetra et
-                  ultrices neque ornare aenean.
-                </p>
-
-                <p style={{ paddingBottom: '1rem' }}>
-                  A pellentesque sit amet porttitor. Sed euismod nisi porta
-                  lorem. Pellentesque dignissim enim sit amet venenatis urna
-                  cursus eget nunc. Eu lobortis elementum nibh tellus molestie
-                  nunc non blandit massa. Risus at ultrices mi tempus imperdiet
-                  nulla malesuada pellentesque elit. Est ultricies integer quis
-                  auctor elit sed. Quis risus sed vulputate odio ut. Varius sit
-                  amet mattis vulputate. Enim ut tellus elementum sagittis vitae
-                  et leo. Posuere ac ut consequat semper viverra nam libero.
-                  Habitant morbi tristique senectus et netus et malesuada fames.
-                  Enim neque volutpat ac tincidunt vitae semper quis lectus
-                  nulla.
-                </p>
-
-                <p style={{ paddingBottom: '1rem' }}>
-                  Eu facilisis sed odio morbi quis commodo. Non tellus orci ac
-                  auctor augue mauris augue. Accumsan tortor posuere ac ut. Orci
-                  sagittis eu volutpat odio facilisis. Vestibulum mattis
-                  ullamcorper velit sed ullamcorper morbi. Vestibulum rhoncus
-                  est pellentesque elit ullamcorper dignissim cras tincidunt. Id
-                  leo in vitae turpis massa sed elementum. Euismod elementum
-                  nisi quis eleifend quam adipiscing vitae proin sagittis. Duis
-                  ultricies lacus sed turpis tincidunt id aliquet. Nibh mauris
-                  cursus mattis molestie a iaculis at erat pellentesque. Tempus
-                  iaculis urna id volutpat lacus. Rhoncus aenean vel elit
-                  scelerisque mauris.
-                </p>
-
-                <p style={{ paddingBottom: '1rem' }}>
-                  Hac habitasse platea dictumst quisque sagittis. Faucibus nisl
-                  tincidunt eget nullam non nisi est sit. Volutpat ac tincidunt
-                  vitae semper quis lectus. Nisi lacus sed viverra tellus in
-                  hac. Rhoncus dolor purus non enim. Suspendisse sed nisi lacus
-                  sed viverra. Faucibus vitae aliquet nec ullamcorper sit amet
-                  risus nullam eget. Augue interdum velit euismod in
-                  pellentesque massa. Fermentum iaculis eu non diam phasellus
-                  vestibulum lorem sed. Volutpat maecenas volutpat blandit
-                  aliquam etiam erat velit scelerisque.
-                </p>
-
-                <p style={{ paddingBottom: '1rem' }}>
-                  Mi in nulla posuere sollicitudin aliquam ultrices sagittis.
-                  Elit pellentesque habitant morbi tristique senectus. Nunc non
-                  blandit massa enim nec dui nunc mattis enim. In egestas erat
-                  imperdiet sed euismod nisi porta lorem mollis. Donec pretium
-                  vulputate sapien nec sagittis aliquam malesuada bibendum arcu.
-                  Auctor urna nunc id cursus metus aliquam eleifend mi. Velit
-                  aliquet sagittis id consectetur. Arcu cursus vitae congue
-                  mauris. Gravida rutrum quisque non tellus orci ac. At erat
-                  pellentesque adipiscing commodo elit at. Amet tellus cras
-                  adipiscing enim eu turpis egestas. Purus gravida quis blandit
-                  turpis cursus in hac habitasse. Interdum velit laoreet id
-                  donec ultrices tincidunt arcu non sodales. Interdum posuere
-                  lorem ipsum dolor sit. Quam quisque id diam vel quam elementum
-                  pulvinar etiam non. Massa enim nec dui nunc mattis enim. Ac
-                  tortor vitae purus faucibus ornare suspendisse sed. Non
-                  pulvinar neque laoreet suspendisse.
-                </p>
-              </div>
-              <div className="bx--layout-1-3">
-                <div
-                  className={cx({
-                    [`bx--layout--sticky`]: stickyRight,
-                  })}>
-                  <h3>Column 2.2</h3>
-
-                  <ul className="bx--list--unordered">
-                    <li className="bx--list__item">Item 1</li>
-                    <li className="bx--list__item">Item 2</li>
-                    <li className="bx--list__item">Item 3</li>
-                    <li className="bx--list__item">Item 4</li>
-                    <li className="bx--list__item">Item 5</li>
-                    <li className="bx--list__item">Item 6</li>
-                    <li className="bx--list__item">Item 7</li>
-                  </ul>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-
-      <p style={{ paddingBottom: '1rem' }}>Layout ends above.</p>
-
-      <p style={{ paddingBottom: '1rem' }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ac turpis egestas
-        maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin
-        sed libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna
-        et pharetra pharetra massa massa ultricies mi. Nascetur ridiculus mus
-        mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices.
-        Urna neque viverra justo nec ultrices dui sapien. Augue eget arcu dictum
-        varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-      </p>
-
-      <p style={{ paddingBottom: '1rem' }}>
-        A pellentesque sit amet porttitor. Sed euismod nisi porta lorem.
-        Pellentesque dignissim enim sit amet venenatis urna cursus eget nunc. Eu
-        lobortis elementum nibh tellus molestie nunc non blandit massa. Risus at
-        ultrices mi tempus imperdiet nulla malesuada pellentesque elit. Est
-        ultricies integer quis auctor elit sed. Quis risus sed vulputate odio
-        ut. Varius sit amet mattis vulputate. Enim ut tellus elementum sagittis
-        vitae et leo. Posuere ac ut consequat semper viverra nam libero.
-        Habitant morbi tristique senectus et netus et malesuada fames. Enim
-        neque volutpat ac tincidunt vitae semper quis lectus nulla.
-      </p>
-
-      <p style={{ paddingBottom: '1rem' }}>
-        Eu facilisis sed odio morbi quis commodo. Non tellus orci ac auctor
-        augue mauris augue. Accumsan tortor posuere ac ut. Orci sagittis eu
-        volutpat odio facilisis. Vestibulum mattis ullamcorper velit sed
-        ullamcorper morbi. Vestibulum rhoncus est pellentesque elit ullamcorper
-        dignissim cras tincidunt. Id leo in vitae turpis massa sed elementum.
-        Euismod elementum nisi quis eleifend quam adipiscing vitae proin
-        sagittis. Duis ultricies lacus sed turpis tincidunt id aliquet. Nibh
-        mauris cursus mattis molestie a iaculis at erat pellentesque. Tempus
-        iaculis urna id volutpat lacus. Rhoncus aenean vel elit scelerisque
-        mauris.
-      </p>
-    </>
-  );
-};
diff --git a/packages/react/src/components/Layout/index.js b/packages/react/src/components/Layout/index.js
deleted file mode 100644
index 5947c755d2c..00000000000
--- a/packages/react/src/components/Layout/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as Layout } from './Layout';
diff --git a/packages/react/src/components/LeadSpace/LeadSpace.js b/packages/react/src/components/LeadSpace/LeadSpace.js
deleted file mode 100644
index b5bad3ad4a3..00000000000
--- a/packages/react/src/components/LeadSpace/LeadSpace.js
+++ /dev/null
@@ -1,222 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { ButtonGroup } from '../../components/ButtonGroup';
-import classnames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate.js';
-import { Image } from '../Image';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * renders main class name
- *
- * @param {string} type switches between centered or default
- * @param {string} theme theme of the pattern
- * @returns {string} classnames
- */
-const classNames = (type, theme) => {
-  return classnames(`${prefix}--leadspace__section`, {
-    [`${prefix}--leadspace--${theme}`]: theme,
-    [`${prefix}--leadspace--centered`]: type === 'centered',
-    [`${prefix}--leadspace--productive`]: type === 'small',
-  });
-};
-
-/**
- *
- * @param {object} image image
- * @returns {object} returns either image component or the centered image div
- */
-function imageClassname(image) {
-  return <Image {...image} />;
-}
-
-/**
- * Lead space component (left-aligned)
- *
- * @param {object} props props object
- * @param {Array} props.buttons array of buttons for lead space (max 2 buttons)
- * @param {string} props.copy lead space short copy to support the title
- * @param {object} props.image image object with diff source for diff breakpoints
- * @param {string} props.theme theme of the pattern (g100 or white (default))
- * @param {string} props.title lead space title
- * @param {string} props.type type of lead space
- * @returns {*} Lead space component
- */
-
-const LeadSpace = ({
-  buttons,
-  copy,
-  image,
-  theme,
-  title,
-  type,
-  size = 'tall',
-}) => {
-  return (
-    <div
-      data-autoid={`${stablePrefix}--leadspace`}
-      className={classnames(`${prefix}--leadspace`, {
-        [`${prefix}--leadspace--medium`]: size === 'medium',
-        [`${prefix}--leadspace--tall`]: size === 'tall',
-        [`${prefix}--leadspace--super`]: size === 'super',
-      })}>
-      <section className={classNames(type, theme)}>
-        <div className={`${prefix}--leadspace__container`}>
-          <div
-            className={classnames(`${prefix}--leadspace__overlay`, {
-              [`${prefix}--leadspace--gradient`]: image && image.defaultSrc,
-            })}>
-            {image && image.defaultSrc === true ? undefined : (
-              <svg
-                className={`${prefix}--leadspace__gradient`}
-                viewBox="0 0 100 100"
-                preserveAspectRatio="none"
-                xmlns="http://www.w3.org/2000/svg"
-                xmlnsXlink="http://www.w3.org/1999/xlink">
-                <defs>
-                  <linearGradient
-                    id="stops"
-                    className={`${prefix}--leadspace__gradient__stops`}
-                    gradientTransform={type === 'centered' ? 'rotate(90)' : ''}>
-                    {type === 'centered' ? (
-                      <>
-                        <stop offset="0%" />
-                        <stop offset="54%" />
-                        <stop offset="77%" />
-                        <stop offset="100%" />
-                      </>
-                    ) : (
-                      <>
-                        <stop offset="0%" />
-                        <stop offset="25%" />
-                        <stop offset="50%" />
-                        <stop offset="75%" />
-                      </>
-                    )}
-                  </linearGradient>
-                </defs>
-                <rect
-                  className={`${prefix}--leadspace__gradient__rect`}
-                  width="100"
-                  height="100"
-                />
-              </svg>
-            )}
-            <div className={`${prefix}--leadspace--content__container`}>
-              <div className={`${prefix}--leadspace__row`}>
-                <h1 className={`${prefix}--leadspace__title`}>{title}</h1>
-              </div>
-              <div className={`${prefix}--leadspace__content`}>
-                {copy && (
-                  <div className={`${prefix}--leadspace__row`}>
-                    <p
-                      data-autoid={`${stablePrefix}--leadspace__desc`}
-                      className={`${prefix}--leadspace__desc`}>
-                      {copy}
-                    </p>
-                  </div>
-                )}
-                {buttons && buttons.length > 0 && (
-                  <ButtonGroup buttons={buttons} />
-                )}
-              </div>
-            </div>
-          </div>
-          {image && imageClassname(image)}
-        </div>
-      </section>
-    </div>
-  );
-};
-
-LeadSpace.propTypes = {
-  /**
-   * Array of button objects to render (max 2).
-   * See [`<ButtonGroup>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-buttongroup--default#button-item) for full usage details.
-   */
-  buttons: PropTypes.arrayOf(
-    PropTypes.shape({
-      copy: PropTypes.string.isRequired,
-      href: PropTypes.string.isRequired,
-      renderIcon: PropTypes.elementType,
-    })
-  ),
-
-  /**
-   * Short copy of LeadSpace.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Object with different ratio options for corresponding breakpoints.
-   * See [`<Image>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-image--default#props) for full usage details.
-   */
-  image: PropTypes.shape({
-    classname: PropTypes.string,
-    sources: PropTypes.arrayOf(
-      PropTypes.shape({
-        src: PropTypes.string,
-        breakpoint: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-      })
-    ),
-    defaultSrc: PropTypes.string.isRequired,
-    alt: PropTypes.string.isRequired,
-    longDescription: PropTypes.string,
-  }),
-
-  /**
-   * Color theme of LeadSpace. Choose from:
-   *
-   * | Name    | Data Type | Description           |
-   * | ------- | --------- | --------------------- |
-   * | `white` | String    | Carbon White theme    |
-   * | `g10`   | String    | Carbon Gray 10 theme  |
-   * | `g90`   | String    | Carbon Gray 90 theme  |
-   * | `g100`  | String    | Carbon Gray 100 theme |
-   */
-  theme: PropTypes.oneOf(['white', 'g10', 'g90', 'g100']),
-
-  /**
-   * Title of LeadSpace.
-   */
-  title: PropTypes.string.isRequired,
-
-  /**
-   * Sets the type of Leadspace layout. Choose from:
-   *
-   * | Name              | Data Type | Description                                         |
-   * | ----------------- | --------- | --------------------------------------------------- |
-   * | `default`         | String    | Left-aligned - default style of the leadspace title |
-   * | `left`            | String    | Left-aligned - large style of the leadspace title   |
-   * | `centered`        | String    | Centered type of the LeadSpace                      |
-   */
-  type: PropTypes.oneOf(['default', 'left', 'centered']),
-  /**
-   * | Name         | Data Type | Description                           |
-   * |--------------|-----------|---------------------------------------|
-   * | `tall`/empty | String/-- | Default - tall size of the leadspace  |
-   * | `medium`     | String    | Medium - medium size of the leadspace |
-   * | `super`      | String    | Super - super size of the leadspace   |
-   */
-  size: PropTypes.oneOf(['tall', 'medium', 'super']),
-};
-
-export default deprecate(
-  LeadSpace,
-  `
-  The Leadspace Small and Leadspace Small With Image variations are now deprecated.
-  Please refer to the Carbon for IBM.com documentation for further details.
-  https://www.ibm.com/standards/carbon/components/leadspace
-`
-);
diff --git a/packages/react/src/components/LeadSpace/README.stories.mdx b/packages/react/src/components/LeadSpace/README.stories.mdx
deleted file mode 100644
index c9a2b843f22..00000000000
--- a/packages/react/src/components/LeadSpace/README.stories.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LeadSpace from './LeadSpace';
-
-# Lead Space
-
-> The Lead Space pattern is to be utilized within IBM.com.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Leadspace)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Leadspace)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Leadspace
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LeadSpace } from '@carbon/ibmdotcom-react';
-import { ArrowRight20 } from '@carbon/icons-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <LeadSpace
-      type="default"
-      theme="g100"
-      title="Lorem Ipsum"
-      copy="Lorem Ipsum Dolor"
-      gradient={true}
-      buttons={[
-        {
-          copy: 'Button 1',
-          renderIcon: ArrowRight20,
-          href: 'https://www.example.com',
-        },
-        {
-          copy: 'Button 2',
-          renderIcon: ArrowRight20,
-          href: 'https://www.example.com',
-        },
-      ]}
-      image={{
-        sources: [
-          { src: 'https://picsum.photos/id/1076/320/370', breakpoint: 'sm' },
-          { src: 'https://picsum.photos/id/1076/672/400', breakpoint: 'md' },
-        ],
-        defaultSrc: 'https://picsum.photos/id/1076/1056/480',
-        alt: 'lead space image',
-      }}
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the leadspace styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import Leadspace from '@carbon/ibmdotcom-react/es/components/Leadspace/Leadspace';
-````
-
-## Props
-
-<Props of={LeadSpace} />
-
-## Stable selectors
-
-| Name                    | Description                 |
-| ----------------------- | --------------------------- |
-| `dds--leadspace`        | Pattern                     |
-| `dds--leadspace__desc`  | LeadSpace short description |
-| `dds--leadspace__image` | LeadSpace background image  |
-| `dds--leadspace__ctas`  | LeadSpace CTAs wrapper      |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LeadSpace/__stories__/LeadSpace.stories.js b/packages/react/src/components/LeadSpace/__stories__/LeadSpace.stories.js
deleted file mode 100644
index 1b576bed7b5..00000000000
--- a/packages/react/src/components/LeadSpace/__stories__/LeadSpace.stories.js
+++ /dev/null
@@ -1,426 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { number, select, text } from '@storybook/addon-knobs';
-import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import LeadSpace from '../LeadSpace';
-import leadspaceImg from '../../../../../storybook-images/assets/leadspace/leadspaceMax.jpg';
-import leadspaceImg3 from '../../../../../storybook-images/assets/leadspace/leadspaceMax.jpg';
-import Pdf20 from '@carbon/icons-react/es/PDF/20';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const iconMap = {
-  ArrowRight20,
-  ArrowDown20,
-  Pdf20,
-};
-
-const iconOptions = {
-  None: null,
-  ArrowRight: 'ArrowRight20',
-  ArrowDown: 'ArrowDown20',
-  PDF: 'Pdf20',
-};
-
-const images = {
-  sources: [
-    { src: leadspaceImg, breakpoint: 'sm' },
-    { src: leadspaceImg, breakpoint: 'md' },
-  ],
-  defaultSrc: leadspaceImg,
-  alt: 'lead space image',
-};
-
-const props = {
-  tallWithNoImage: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Lead space title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      buttons,
-    };
-  },
-  tallWithImage: () => {
-    const knobs = props.tallWithNoImage();
-    return {
-      ...knobs,
-      defaultSrc: text('Default image (defaultSrc):', leadspaceImg),
-      image: images,
-    };
-  },
-  centered: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Leadspace Title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      buttons,
-    };
-  },
-  centeredWithImage: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Leadspace Title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      defaultSrc: text('Default image (defaultSrc):', leadspaceImg3),
-      buttons,
-    };
-  },
-  medium: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Lead space title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      buttons,
-      size: 'medium',
-    };
-  },
-  mediumWithImage: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Lead space title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      buttons,
-      defaultSrc: text('Default image (defaultSrc):', leadspaceImg),
-      size: 'medium',
-      image: images,
-      gradient: true,
-    };
-  },
-  super: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Lead space title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      buttons,
-      size: 'super',
-    };
-  },
-  superWithImage: () => {
-    const buttonCount = number('Number of buttons', 2, {});
-    const buttons = [];
-
-    for (let i = 0; i < buttonCount; i++) {
-      buttons.push({
-        copy: text(`Button ${i + 1} (copy)`, `Button ${i + 1}`),
-        renderIcon:
-          iconMap[
-            select(
-              `Button Icon ${i + 1} (renderIcon)`,
-              iconOptions,
-              iconOptions.ArrowRight
-            )
-          ],
-        href: text(`Button link (href)`, 'https://www.example.com'),
-      });
-    }
-
-    return {
-      title: text('title (title)', 'Lead space title'),
-      copy: text(
-        'copy (copy)',
-        'Use this area for a short line of copy to support the title'
-      ),
-      buttons,
-      defaultSrc: text('Default image (defaultSrc):', leadspaceImg),
-      size: 'super',
-      gradient: true,
-      image: images,
-    };
-  },
-};
-
-export default {
-  title: 'Components/Lead space',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Lead space: Default',
-    },
-  },
-};
-
-export const TallWithNoImage = (args) => (
-  <TallWithImage
-    {...(Object.keys(args).length > 0 ? args : props.tallWithNoImage())}
-  />
-);
-
-TallWithNoImage.story = {
-  name: 'Tall',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Tall',
-    },
-  },
-};
-
-export const TallWithImage = (args) => {
-  const { defaultSrc, image } = props.tallWithImage();
-
-  if (defaultSrc) {
-    image.defaultSrc = defaultSrc;
-    image.sources[0].src = defaultSrc;
-    image.sources[1].src = defaultSrc;
-  }
-  const params = new URLSearchParams(window.location.search);
-  const themeParam = params.has('theme') ? params.get('theme') : null;
-  const theme =
-    themeParam ||
-    document.documentElement.getAttribute('storybook-carbon-theme') ||
-    'white';
-  return (
-    <LeadSpace
-      theme={theme}
-      {...(Object.keys(args).length > 0 ? args : props.tallWithImage())}
-    />
-  );
-};
-
-TallWithImage.story = {
-  name: 'Tall with image',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Tall with image',
-    },
-  },
-};
-
-export const Centered = () => {
-  const params = new URLSearchParams(window.location.search);
-  const themeParam = params.has('theme') ? params.get('theme') : null;
-  const theme =
-    themeParam ||
-    document.documentElement.getAttribute('storybook-carbon-theme') ||
-    'white';
-  return <LeadSpace type="centered" theme={theme} {...props.centered()} />;
-};
-
-Centered.story = {
-  name: 'Centered',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Centered',
-    },
-  },
-};
-
-export const CenteredWithImage = () => {
-  const { defaultSrc } = props.centeredWithImage();
-  const params = new URLSearchParams(window.location.search);
-  const themeParam = params.has('theme') ? params.get('theme') : null;
-  const theme =
-    themeParam ||
-    document.documentElement.getAttribute('storybook-carbon-theme') ||
-    'white';
-
-  const centeredImage = {
-    sources: [
-      {
-        src: leadspaceImg3,
-        breakpoint: 'sm',
-      },
-      {
-        src: leadspaceImg3,
-        breakpoint: 'md',
-      },
-    ],
-    defaultSrc: leadspaceImg3,
-    alt: 'lead space image',
-  };
-  if (defaultSrc) {
-    centeredImage.defaultSrc = defaultSrc;
-    centeredImage.sources[0].src = defaultSrc;
-    centeredImage.sources[1].src = defaultSrc;
-  }
-  return (
-    <LeadSpace
-      type="centered"
-      theme={theme}
-      {...props.centeredWithImage()}
-      image={centeredImage}
-    />
-  );
-};
-
-CenteredWithImage.story = {
-  name: 'Centered with image',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Centered with image',
-    },
-  },
-};
-
-export const Medium = () => <TallWithNoImage {...props.medium()} />;
-
-Medium.story = {
-  name: 'Medium',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Medium',
-    },
-  },
-};
-
-export const MediumWithImage = () => (
-  <TallWithImage {...props.mediumWithImage()} />
-);
-
-MediumWithImage.story = {
-  name: 'Medium with image',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Medium with image',
-    },
-  },
-};
-
-export const Super = () => <TallWithNoImage {...props.super()} />;
-
-Super.story = {
-  name: 'Super',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Super',
-    },
-  },
-};
-
-export const SuperWithImage = () => (
-  <TallWithImage {...props.superWithImage()} />
-);
-
-SuperWithImage.story = {
-  name: 'Super with image',
-  parameters: {
-    percy: {
-      name: 'Components|Lead space: Super with image',
-    },
-  },
-};
diff --git a/packages/react/src/components/LeadSpace/index.js b/packages/react/src/components/LeadSpace/index.js
deleted file mode 100644
index 47893bd3d97..00000000000
--- a/packages/react/src/components/LeadSpace/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as LeadSpace } from './LeadSpace';
diff --git a/packages/react/src/components/LeadSpaceBlock/LeadSpaceBlock.js b/packages/react/src/components/LeadSpaceBlock/LeadSpaceBlock.js
deleted file mode 100644
index 16e5740ad02..00000000000
--- a/packages/react/src/components/LeadSpaceBlock/LeadSpaceBlock.js
+++ /dev/null
@@ -1,192 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import { CTA } from '../CTA';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { HorizontalRule } from '../HorizontalRule';
-import { ImageWithCaption } from '../ImageWithCaption';
-import { LinkList } from '../LinkList';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import { VideoPlayer } from '../VideoPlayer';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * renders media either video or image content
- *
- * @param {string} type media type
- * @param {object} data media data
- */
-const _renderMedia = (type, data) => {
-  if (data) {
-    return (
-      <div
-        data-autoid={`${stablePrefix}--leadspace-block__media`}
-        className={`${prefix}--leadspace-block__media`}>
-        {type === 'image' && <ImageWithCaption {...data} />}
-        {type === 'video' && <VideoPlayer {...data} />}
-      </div>
-    );
-  }
-};
-
-/**
- * Lead space block component (left-aligned).
- */
-const LeadSpaceBlock = ({
-  title,
-  heading,
-  copy,
-  mediaType,
-  mediaData,
-  items,
-  cta,
-}) => {
-  const pageTitle = (
-    <div>
-      {title && (
-        <h1
-          data-autoid={`${stablePrefix}--leadspace-block__title`}
-          className={`${prefix}--leadspace-block__title`}>
-          {title}
-        </h1>
-      )}
-    </div>
-  );
-
-  return (
-    <div
-      data-autoid={`${stablePrefix}--leadspace-block`}
-      className={`${prefix}--leadspace-block`}>
-      {pageTitle}
-      <ContentBlock heading={heading} copy={copy}>
-        {_renderMedia(mediaType, mediaData)}
-        <LinkList
-          style="vertical-end"
-          heading={items.heading}
-          items={items.items}
-        />
-        <CTA
-          customClassName={`${prefix}--leadspace-block__cta ${prefix}--leadspace-block__cta-col`}
-          {...cta}
-        />
-      </ContentBlock>
-      <HorizontalRule />
-    </div>
-  );
-};
-
-LeadSpaceBlock.propTypes = {
-  /**
-   * Heading of the content block.
-   */
-  title: PropTypes.string.isRequired,
-
-  /**
-   * Subheading of the content block.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Link list items.
-   */
-  items: PropTypes.shape({
-    heading: PropTypes.string.isRequired,
-    items: PropTypes.arrayOf(
-      PropTypes.shape({
-        style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-        type: PropTypes.oneOfType([
-          PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-          PropTypes.arrayOf(
-            PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-          ),
-        ]),
-        copy: PropTypes.string,
-        href: PropTypes.string,
-        customClassName: PropTypes.string,
-      })
-    ).isRequired,
-  }).isRequired,
-
-  /**
-   * Simple content item.
-   */
-  copy: PropTypes.string,
-
-  /**
-   * Media Type [image, video or none].
-   */
-  mediaType: PropTypes.oneOf(['image', 'video']),
-
-  /**
-   * Media Data for either image or video.
-   * See the following components' README for more details:
-   *
-   * `mediaType="image"`: [`<ImageWithCaption>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-imagewithcaption--default#props)
-   * `mediaType="video"`: [`<VideoPlayer>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-videoplayer--default#props)
-   */
-  mediaData: PropTypes.oneOfType([
-    PropTypes.shape({
-      inverse: PropTypes.bool,
-      image: PropTypes.shape({
-        classname: PropTypes.string,
-        sources: PropTypes.arrayOf(
-          PropTypes.shape({
-            src: PropTypes.string,
-            breakpoint: PropTypes.oneOfType([
-              PropTypes.string,
-              PropTypes.number,
-            ]),
-          })
-        ),
-        defaultSrc: PropTypes.string.isRequired,
-        alt: PropTypes.string.isRequired,
-        longDescription: PropTypes.string,
-      }).isRequired,
-      lightbox: PropTypes.bool,
-      heading: PropTypes.string,
-      copy: PropTypes.string,
-      customClassName: PropTypes.string,
-    }),
-    PropTypes.shape({
-      customClassName: PropTypes.string,
-      videoId: PropTypes.string.isRequired,
-      showCaption: PropTypes.bool,
-      inverse: PropTypes.bool,
-    }),
-  ]),
-
-  /**
-   * CTA props.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-};
-
-LeadSpaceBlock.defaultProps = {
-  copy: '',
-  mediaType: null,
-  mediaData: null,
-  cta: null,
-};
-
-export default LeadSpaceBlock;
diff --git a/packages/react/src/components/LeadSpaceBlock/README.stories.mdx b/packages/react/src/components/LeadSpaceBlock/README.stories.mdx
deleted file mode 100644
index 67bc0ce1c7b..00000000000
--- a/packages/react/src/components/LeadSpaceBlock/README.stories.mdx
+++ /dev/null
@@ -1,157 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LeadSpaceBlock from './LeadSpaceBlock';
-
-# Lead Space Block
-
-> The "Lead Space Block" pattern leverages the Content Block as the container of
-> this pattern, and allows to select media with link lists followed by a button.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LeadSpaceBlock)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LeadSpaceBlock)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block';
-```
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LeadSpaceBlock } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const title = 'Continuous delivery';
-
-  const heading = 'Innovate like a startup and scale for the enterprise';
-
-  const copy = `Automate your software release process with continuous delivery (CD)—the most
-      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-      ensuring software is always ready for deployment.`;
-
-  const mediaType = 'image';
-
-  const video = {
-    videoId: '1_9h94wo6b',
-    showDescription: true,
-  };
-
-  const image = {
-    heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    image: {
-      sources: [
-        {
-          src:
-            'http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 320,
-        },
-        {
-          src:
-            'http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 400,
-        },
-        {
-          src:
-            'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-          breakpoint: 672,
-        },
-      ],
-      alt: 'Image alt text',
-      defaultSrc:
-        'http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616',
-    },
-  };
-
-  const mediaData = mediaType === 'image' ? image : video;
-
-  const ctaProps = {
-    style: 'button',
-    type: 'local',
-    buttons: [
-      {
-        type: 'local',
-        copy: ['Contact sales'],
-      },
-    ],
-  };
-
-  const linkListProps = {
-    heading: 'Featured products',
-    items: [
-      {
-        type: 'local',
-        copy: 'IBM Cloud Continuous Delivery',
-        cta: {
-          href: 'https://ibm.com',
-        },
-      },
-      {
-        type: 'local',
-        copy: 'UrbanCode',
-        cta: {
-          href: 'https://ibm.com',
-        },
-      },
-      {
-        type: 'local',
-        copy: 'View all products',
-        cta: {
-          href: 'https://ibm.com',
-        },
-      },
-    ],
-  };
-
-  return (
-    <LeadSpaceBlock
-      title={title}
-      heading={heading}
-      copy={copy}
-      mediaType={mediaType}
-      mediaData={mediaData}
-      items={linkListProps}
-      cta={ctaProps}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import LeadspaceBlock from '@carbon/ibmdotcom-react/es/components/LeadspaceBlock/LeadspaceBlock';
-```
-
-## Props
-
-<Props of={LeadSpaceBlock} />
-
-### Stable selectors
-
-| Name                   | Description |
-| ---------------------- | ----------- |
-| `dds--leadspace-block` | Pattern     |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LeadSpaceBlock/__stories__/LeadSpaceBlock.stories.js b/packages/react/src/components/LeadSpaceBlock/__stories__/LeadSpaceBlock.stories.js
deleted file mode 100644
index db213cc0273..00000000000
--- a/packages/react/src/components/LeadSpaceBlock/__stories__/LeadSpaceBlock.stories.js
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
-import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
-import LeadSpaceBlock from '../LeadSpaceBlock.js';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const image = {
-  heading: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-  image: {
-    sources: [
-      {
-        src: imgSm16x9,
-        breakpoint: 320,
-      },
-      {
-        src: imgMd16x9,
-        breakpoint: 400,
-      },
-      {
-        src: imgLg16x9,
-        breakpoint: 672,
-      },
-    ],
-    alt: 'Image alt text',
-    defaultSrc: imgLg16x9,
-  },
-};
-
-const video = {
-  videoId: '1_9h94wo6b',
-  showCaption: true,
-};
-
-const types = ['local', 'external'];
-
-const defaultItems = [
-  {
-    type: 'local',
-    copy: 'IBM Cloud Continuous Delivery',
-    cta: {
-      href: 'https://ibm.com',
-    },
-  },
-  {
-    type: 'local',
-    copy: 'UrbanCode',
-    cta: {
-      href: 'https://ibm.com',
-    },
-  },
-  {
-    type: 'download',
-    copy: 'View all products',
-    cta: {
-      href: 'https://ibm.com',
-    },
-  },
-];
-
-const props = () => ({
-  title: 'Continuous delivery',
-  copy: `Automate your software release process with continuous delivery (CD)—the most
-      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
-      ensuring software is always ready for deployment.`,
-  heading: text(
-    'Heading (required):',
-    'Innovate like a startup and scale for the enterprise '
-  ),
-  items: {
-    heading: text('Link list heading (heading):', 'Featured products'),
-    items: defaultItems,
-  },
-  cta: {
-    style: 'button',
-    type: 'local',
-    buttons: [
-      {
-        type: select('CTA type (type):', types, types[0]),
-        copy: text('CTA copy (copy):', 'Contact sales'),
-        href: 'https://example.com/',
-      },
-    ],
-  },
-});
-
-export default {
-  title: 'Components/Lead space block',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Lead space block: Default',
-    },
-    propsSet: {
-      default: {
-        LeadSpaceBlock: {
-          title: 'Continuous delivery',
-          heading: 'Innovate like a startup and scale for the enterprise ',
-          items: {
-            items: defaultItems,
-          },
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <LeadSpaceBlock mediaType="image" mediaData={image} {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const WithVideo = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <LeadSpaceBlock mediaType="video" mediaData={video} {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-WithVideo.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Lead space block: With Video',
-    },
-  },
-};
diff --git a/packages/react/src/components/LeadSpaceBlock/index.js b/packages/react/src/components/LeadSpaceBlock/index.js
deleted file mode 100644
index d11391b0aba..00000000000
--- a/packages/react/src/components/LeadSpaceBlock/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as LeadSpaceBlock } from './LeadSpaceBlock';
diff --git a/packages/react/src/components/LeadspaceWithSearch/LeadspaceWithSearch.js b/packages/react/src/components/LeadspaceWithSearch/LeadspaceWithSearch.js
deleted file mode 100644
index be00131a487..00000000000
--- a/packages/react/src/components/LeadspaceWithSearch/LeadspaceWithSearch.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useState, useEffect, useRef } from 'react';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import Search from 'carbon-components-react/lib/components/Search';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-const LeadspaceWithSearch = ({ heading, copy, searchProps }) => {
-  const [searchPlaceHolder, setSearchplaceHolder] = useState(null);
-  const leadspaceContainer = useRef(null);
-
-  useEffect(() => {
-    leadspaceContainer.current = new ResizeObserver((entries) => {
-      for (const entry of entries) {
-        const CARBON_MD_BREAKPOINT = 672;
-        const { inlineSize: leadspaceWidth } = entry.borderBoxSize[0];
-        const { desktop, mobile } = searchProps.placeholder;
-
-        if (leadspaceWidth > CARBON_MD_BREAKPOINT || !mobile) {
-          setSearchplaceHolder(desktop);
-        }
-        if (leadspaceWidth <= CARBON_MD_BREAKPOINT && mobile) {
-          setSearchplaceHolder(mobile);
-        }
-      }
-    });
-    leadspaceContainer.current.observe(document.documentElement);
-
-    return () => {
-      leadspaceContainer.current.disconnect();
-      leadspaceContainer.current = null;
-    };
-  }, [searchProps.placeholder]);
-
-  return heading ? (
-    <section
-      data-autoid={`${stablePrefix}--leadspace-with-search`}
-      className={`${prefix}--leadspace-with-search`}
-      ref={leadspaceContainer}>
-      <div className={`${prefix}--leadspace-with-search__row`}>
-        <div className={`${prefix}--leadspace-with-search__content`}>
-          <h1 className={`${prefix}--leadspace-with-search__heading`}>
-            {heading}
-          </h1>
-          {copy && (
-            <p className={`${prefix}--leadspace-with-search__copy`}>{copy}</p>
-          )}
-          <Search
-            className={`${prefix}--leadspace-with-search__search`}
-            placeHolderText={searchPlaceHolder}
-            id={`${prefix}--leadspace-with-search__search-input`}
-            {...searchProps}
-          />
-        </div>
-      </div>
-    </section>
-  ) : null;
-};
-
-LeadspaceWithSearch.propTypes = {
-  /**
-   * Required heading for the Leadspace with search
-   */
-  heading: PropTypes.string.isRequired,
-  /**
-   *  An optional copy for the Leadspace with search
-   */
-  copy: PropTypes.string,
-  /**
-   *  The search mechanism does not have a built-in behavior. Make sure to provide both onChange and onKeyDown functions to the component with the validations and behavior you want it to have.
-   *
-   *  | Function    | Parameters | Description                                                                                                  |
-   *  |-------------|------------|--------------------------------------------------------------------------------------------------------------|
-   *  | `onChange`  | event      | Use this to reach out to `event.target.value`, the value inputed by the user.                                |
-   *  | `onKeyDown` | event      | You could use it to detect the user pressing the 'Enter/Return' key and trigger the search mechanism to work |
-   *
-   * Any other functions and properties passed down to this will be applyed to the [Search component](https://www.carbondesignsystem.com/components/search/usage/).
-   *
-   */
-  searchProps: PropTypes.shape({
-    /**
-     * The Leadspace With Search accepts two placeholders. One for mobile view and another for desktop. Both are optional. If you do not provide, it will be set to "Search".
-     */
-    placeholder: PropTypes.shape({
-      mobile: PropTypes.string,
-      desktop: PropTypes.string,
-    }),
-    labelText: PropTypes.string,
-    ...Search.propTypes,
-  }),
-};
-
-LeadspaceWithSearch.defaultProps = {
-  searchProps: {
-    desktop: 'Search',
-  },
-};
-
-export default LeadspaceWithSearch;
diff --git a/packages/react/src/components/LeadspaceWithSearch/README.stories.mdx b/packages/react/src/components/LeadspaceWithSearch/README.stories.mdx
deleted file mode 100644
index d56849b9e94..00000000000
--- a/packages/react/src/components/LeadspaceWithSearch/README.stories.mdx
+++ /dev/null
@@ -1,98 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LeadSpaceWithSearch from './LeadspaceWithSearch';
-
-# Leadspace with search
-
-> The Leadspace with search pattern is to be utilized within IBM.com.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace-with-search';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Leadspace
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LeadspaceWithSearch } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <LeadSpaceWithSearch
-      heading="Find a product"
-      copy="Duis aute irure dolor in reprehen deritirure"
-      searchProps={{
-        onChange: (event) => {
-          // You can access the user inputed value under event.target.value
-          return null;
-        },
-        onKeyDown: (event) => {
-          // You can use this function to detect when the user, for instance, is pressing enter/return keys.
-          return null;
-        }
-      }}
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import LeadspaceWithSearch from '@carbon/ibmdotcom-react/es/components/LeadspaceWithSearch/LeadspaceWithSearch';
-````
-
-## Feature Flag
-
-This pattern is currently behind a feature flag, in order to use it you'll need
-to add the following into your `.env` file.
-
-```
-  DDS_LEADSPACE_WITH_SEARCH=true
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the Leadspace With Search styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Props
-
-<Props of={LeadSpaceWithSearch} />
-
-## Stable selectors
-
-| Name                                   | Description                      |
-| -------------------------------------- | -------------------------------- |
-| `bx--leadspace-with-search`            | Pattern (grid container)         |
-| `bx--leadspace-with-search__row`       | LeadSpace grid row               |
-| `bx--leadspace-with-search__content`   | LeadSpace content (grid column)  |
-| `bx--leadspace-with-search__heading`   | Leadspace heading                |
-| `bx--leadspace-with-search__copy`      | LeadSpace optional copy          |
-| `bx--leadspace-with-search__search`    | LeadSpace search input           |
diff --git a/packages/react/src/components/LeadspaceWithSearch/__stories__/LeadspaceWithSearch.stories.js b/packages/react/src/components/LeadspaceWithSearch/__stories__/LeadspaceWithSearch.stories.js
deleted file mode 100644
index 81c09347c1d..00000000000
--- a/packages/react/src/components/LeadspaceWithSearch/__stories__/LeadspaceWithSearch.stories.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 LeadspaceWithSearch from '../LeadspaceWithSearch';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import { text } from '@storybook/addon-knobs';
-
-const props = () => ({
-  heading: text('Heading (heading):', 'Find a product'),
-  copy: text('Copy (copy):', 'Duis aute irure dolor in reprehen deritirure'),
-  searchProps: {
-    placeholder: {
-      mobile: text(
-        'Mobile placeholder (searchProps.placeHolder.mobile):',
-        'Search keywords'
-      ),
-      desktop: text(
-        'Desktop placeholder (searchProps.placeHolder.desktop)',
-        'Search known issues, documentation and support forums'
-      ),
-    },
-    labelText: 'Search keywords',
-    onChange: () => {},
-    onKeyDown: () => {},
-  },
-});
-
-export default {
-  title: 'Components/Lead space with search',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = () => {
-  return <LeadspaceWithSearch {...props()} />;
-};
diff --git a/packages/react/src/components/LeadspaceWithSearch/index.js b/packages/react/src/components/LeadspaceWithSearch/index.js
deleted file mode 100644
index d5e67648e8d..00000000000
--- a/packages/react/src/components/LeadspaceWithSearch/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as LeadspaceWithSearch } from './LeadspaceWithSearch';
diff --git a/packages/react/src/components/LeavingIBM/README.stories.mdx b/packages/react/src/components/LeavingIBM/README.stories.mdx
deleted file mode 100644
index d3fdcded13f..00000000000
--- a/packages/react/src/components/LeavingIBM/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Leaving IBM
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-leaving-ibm--default).
diff --git a/packages/react/src/components/LeavingIBM/__stories__/LeavingIBM.stories.js b/packages/react/src/components/LeavingIBM/__stories__/LeavingIBM.stories.js
deleted file mode 100644
index 80f5a1e08ce..00000000000
--- a/packages/react/src/components/LeavingIBM/__stories__/LeavingIBM.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Leaving IBM',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-leaving-ibm--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/LightboxMediaViewer/LightboxMediaViewer.js b/packages/react/src/components/LightboxMediaViewer/LightboxMediaViewer.js
deleted file mode 100644
index ad3c33c854b..00000000000
--- a/packages/react/src/components/LightboxMediaViewer/LightboxMediaViewer.js
+++ /dev/null
@@ -1,168 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect, useState, useRef } from 'react';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { ExpressiveModal } from '../ExpressiveModal';
-import { Image } from '../Image';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import { ModalBody } from '../../internal/vendor/carbon-components-react/components/ComposedModal/ComposedModal';
-import PropTypes from 'prop-types';
-import removeHtmlTagEntities from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/removeHtmlTagEntities/removeHtmlTagEntities';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-import uniqueid from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/uniqueid/uniqueid';
-import { VideoPlayer } from '../VideoPlayer';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * LightboxMediaViewer Component.
- */
-const LightboxMediaViewer = ({ media, onClose, ...modalProps }) => {
-  const [videoData, setVideoData] = useState({
-    title: '',
-    alt: '',
-    description: '',
-  });
-
-  /**
-   * Generates an ID for video title to be used by aria-labelledby.
-   */
-  const titleId = uniqueid('dds-');
-
-  /**
-   * Generates an ID for video description, to be used by aria-describedby.
-   */
-  const descriptionId = uniqueid('dds-');
-
-  const containerRef = useRef(null);
-
-  /**
-   * Adds aria-labelledby attribute to dialog container with video title.
-   */
-  useEffect(() => {
-    const { current: containerNode } = containerRef;
-    const dialogNode = containerNode.querySelector('div[role="dialog"]');
-    if (dialogNode && (media.title || videoData.title)) {
-      dialogNode.setAttribute('aria-label', media.title || videoData.title);
-    }
-  }, [titleId, media.title, videoData.title]);
-
-  useEffect(() => {
-    let stale = false;
-    (async () => {
-      if (media.type === 'video') {
-        const data = await KalturaPlayerAPI.api(media.src);
-        if (!stale) {
-          setVideoData({
-            title: media.title ? media.title : data.name,
-            alt: media.title ? media.title : data.name,
-            description: media.description
-              ? media.description
-              : data.description,
-          });
-        }
-      } else {
-        setVideoData({
-          title: media.title,
-          alt: media.alt,
-          description: media.description,
-        });
-      }
-    })();
-    return () => {
-      stale = true;
-    };
-  }, [media]);
-
-  const videoDesc = removeHtmlTagEntities(videoData.description);
-
-  return (
-    <section
-      data-autoid={`${stablePrefix}--lightbox-media-viewer`}
-      className={`${prefix}--lightbox-media-viewer`}
-      ref={containerRef}>
-      <ExpressiveModal fullwidth={true} {...modalProps} onClose={closeModal}>
-        <ModalBody>
-          <div className={`${prefix}--lightbox-media-viewer__container`}>
-            <div className={`${prefix}--lightbox-media-viewer__row`}>
-              <div
-                className={`${prefix}--lightbox-media-viewer__media ${prefix}--no-gutter`}>
-                {media.type === 'video' ? (
-                  <VideoPlayer videoId={media.src} autoPlay={modalProps.open} />
-                ) : (
-                  <Image defaultSrc={media.src} alt={videoData.alt} />
-                )}
-              </div>
-              <div
-                className={`${prefix}--lightbox-media-viewer__media-description ${prefix}--no-gutter`}>
-                <div className={`${prefix}--lightbox-media-viewer__content`}>
-                  {videoData.title && (
-                    <div
-                      id={titleId}
-                      data-autoid={`${stablePrefix}--lightbox-media-viewer__content__title`}
-                      className={`${prefix}--lightbox-media-viewer__content__title`}>
-                      {videoData.title}
-                    </div>
-                  )}
-                  {videoData.description && (
-                    <div
-                      id={descriptionId}
-                      data-autoid={`${stablePrefix}--lightbox-media-viewer__content__desc`}
-                      className={`${prefix}--lightbox-media-viewer__content__desc`}>
-                      {videoDesc}
-                    </div>
-                  )}
-                </div>
-              </div>
-            </div>
-          </div>
-        </ModalBody>
-      </ExpressiveModal>
-    </section>
-  );
-
-  /**
-   * Stop video on modal close
-   */
-  function closeModal() {
-    if (onClose?.() !== false && root.kWidget) {
-      root.kWidget.addReadyCallback((videoId) => {
-        const kdp = document.getElementById(videoId);
-        kdp.sendNotification('doStop');
-      });
-    }
-  }
-};
-
-LightboxMediaViewer.propTypes = {
-  /**
-   * Object containing media info. The structure is:
-   *
-   * | Name          | Data Type | Description                                                                                                            |
-   * | ------------- | --------- | ---------------------------------------------------------------------------------------------------------------------- |
-   * | `type`        | String    | Determines whether to render `image` or `video`                                                                        |
-   * | `src`         | String    | Image link or video id                                                                                                 |
-   * | `alt`         | String    | Alternate text for image. For video, this is generated from api call.                                                  |
-   * | `title`       | String    | Overrides the Kaltura video title if `type=video`.       |
-   * | `description` | String    | Overrides the Kaltura video description if `type=video`. |
-   */
-  media: PropTypes.shape({
-    type: PropTypes.string,
-    src: PropTypes.string,
-    title: PropTypes.string,
-    description: PropTypes.string,
-    alt: PropTypes.string,
-  }).isRequired,
-
-  /**
-   * Function to be triggered on close of Modal.
-   */
-  onClose: PropTypes.func,
-};
-export default LightboxMediaViewer;
diff --git a/packages/react/src/components/LightboxMediaViewer/README.stories.mdx b/packages/react/src/components/LightboxMediaViewer/README.stories.mdx
deleted file mode 100644
index 4f818a09e1f..00000000000
--- a/packages/react/src/components/LightboxMediaViewer/README.stories.mdx
+++ /dev/null
@@ -1,128 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LightboxMediaViewer from './LightboxMediaViewer';
-
-# Lightbox Media Viewer
-
-> This launches a modal containing an image or video, and a description
-> detailing the media content.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LightboxMediaViewer)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LightboxMediaViewer)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/lightbox-media-viewer/lightbox-media-viewer';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> LightBoxMediaViewer styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-##### Image Media
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LightboxMediaViewer } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <LightboxMediaViewer
-      title='Curabitur malesuada varius mi eu posuere'
-      copy='Lorem ipsum dolor sit amet, consectetur adipiscing Aenean et ultricies est.'
-      media={{
-        src: 'Image source string',
-        alt: 'Image alt text',
-        title: 'Curabitur malesuada varius mi eu posuere',
-        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit.',
-        type: 'image',
-      }}
-      open
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-##### Video Media
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LightboxMediaViewer } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <LightboxMediaViewer
-      media={{
-        src: '1_9h94wo6b',
-        title: 'Curabitur malesuada varius mi eu posuere',
-        description: 'Lorem ipsum dolor sit amet, consectetur adipiscing Aenean et ultricies est.'
-        type: 'video',
-      }}
-      open
-    />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> Don't forget to import the LightboxMediaViewer styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import LightBoxMediaViewer from '@carbon/ibmdotcom-react/es/components/LightBoxMediaViewer/LightBoxMediaViewer';
-````
-
-## Props
-
-<Props of={LightboxMediaViewer} />
-
-> 💡 See uri object structure above in `Getting started` section.
-
-> 💡 Also refer to
-> [`<ExpressiveModal>`](http://www.ibm.com/standards/carbon/react/?path=/docs/components-expressive-modal--default)
-> and Carbon's
-> [`<ComposedModal>`](https://react.carbondesignsystem.com/?path=/story/composedmodal--using-child-nodes)
-> for other props.
-
-## Stable selectors
-
-| Name                                         | Description |
-| -------------------------------------------- | ----------- |
-| `dds--lightbox-media-viewer`                 | Component   |
-| `dds--lightbox-media-viewer__image`          | Interactive |
-| `dds--lightbox-media-viewer__content__title` | Interactive |
-| `dds--lightbox-media-viewer__content__desc`  | Interactive |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LightboxMediaViewer/__stories__/LightboxMediaViewer.stories.js b/packages/react/src/components/LightboxMediaViewer/__stories__/LightboxMediaViewer.stories.js
deleted file mode 100755
index 5d173749988..00000000000
--- a/packages/react/src/components/LightboxMediaViewer/__stories__/LightboxMediaViewer.stories.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, select, text } from '@storybook/addon-knobs';
-import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
-import imgMax16x9 from '../../../../../storybook-images/assets/1584/fpo--16x9--1312x738--002.jpg';
-import imgXlg16x9 from '../../../../../storybook-images/assets/1312/fpo--16x9--1312x738--002.jpg';
-import imgXlg2x1 from '../../../../../storybook-images/assets/1312/fpo--2x1--1312x656--002.jpg';
-import LightboxMediaViewer from '../LightboxMediaViewer';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const images = {
-  '720 x 720 (1:1)': imgLg1x1,
-  '1312 x 656 (2:1)': imgXlg2x1,
-  '1312 x 738 (16:9)': imgXlg16x9,
-  '1584 x 738 (16:9)': imgMax16x9,
-};
-
-const props = {
-  default: () => ({
-    open: boolean('open', true),
-    media: {
-      src: select('Image', images, images['1312 x 738 (16:9)']),
-      alt: 'Image alt text',
-      title: text(
-        'title (required)',
-        'Curabitur malesuada varius mi eu posuere'
-      ),
-      description: text(
-        'description (required)',
-        `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:`
-      ),
-      type: 'image',
-    },
-  }),
-  embeddedVideoPlayer: () => ({
-    open: boolean('open', true),
-    media: {
-      src: '1_9h94wo6b',
-      type: 'video',
-      title: text(
-        'title (optional)',
-        'Curabitur malesuada varius mi eu posuere'
-      ),
-      description: text(
-        'description (optional)',
-        `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:`
-      ),
-    },
-  }),
-};
-
-export default {
-  title: 'Components/Lightbox media viewer',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <LightboxMediaViewer
-      {...(Object.keys(args).length > 0 ? args : props.default())}
-    />
-  );
-};
-
-Default.story = {
-  parameters: {
-    propsSet: {
-      default: {
-        LightboxMediaViewer: {
-          media: {
-            src: imgXlg16x9,
-            alt: 'Image alt text',
-            title: 'Curabitur malesuada varius mi eu posuere',
-            description:
-              'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:',
-            type: 'image',
-          },
-        },
-      },
-    },
-  },
-};
-
-export const EmbeddedVideoPlayer = () => (
-  <Default {...props.embeddedVideoPlayer()} />
-);
-
-EmbeddedVideoPlayer.story = {
-  name: 'Embedded video player',
-  parameters: {
-    propsSet: {
-      default: {
-        LightboxMediaViewer: {
-          media: {
-            src: '1_9h94wo6b',
-            type: 'video',
-            title: 'Curabitur malesuada varius mi eu posuere',
-            description: `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Here are some common categories:`,
-          },
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/LightboxMediaViewer/index.js b/packages/react/src/components/LightboxMediaViewer/index.js
deleted file mode 100644
index d3180bb77ee..00000000000
--- a/packages/react/src/components/LightboxMediaViewer/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as LightboxMediaViewer } from './LightboxMediaViewer';
diff --git a/packages/react/src/components/LinkList/LinkList.js b/packages/react/src/components/LinkList/LinkList.js
deleted file mode 100644
index cfc63700dda..00000000000
--- a/packages/react/src/components/LinkList/LinkList.js
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { CTA } from '../CTA';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * LinkList Component, for use with items array
- *
- * @param {object} props props object
- * @param {string} props.heading  Heading string
- * @param {Array} props.items array of item
- * @returns {*} JSX LinkList component
- */
-const LinkList = ({ heading, iconPlacement, items, style }) => {
-  const linkStyle = style === 'card' ? 'card' : 'text';
-  const iconInline = style === 'vertical' || style === 'horizontal';
-  return (
-    <div
-      className={`${prefix}--link-list`}
-      data-autoid={`${stablePrefix}--link-list`}>
-      {heading && (
-        <h4 className={`${prefix}--link-list__heading`}>{heading}</h4>
-      )}
-
-      <ul
-        className={`${prefix}--link-list__list ${prefix}--link-list__list--${style}`}>
-        {items.map((cta, index) => {
-          return (
-            <li
-              className={`${prefix}--link-list__list__CTA ${prefix}--link-list__list--${cta.type}`}
-              key={index}>
-              <CTA
-                style={linkStyle}
-                ariaRole={'listitem'}
-                {...cta}
-                disableImage
-                {...(iconPlacement &&
-                  linkStyle === 'text' && { iconPlacement })}
-                {...(linkStyle === 'text' && { iconInline })}
-              />
-            </li>
-          );
-        })}
-      </ul>
-    </div>
-  );
-};
-
-LinkList.propTypes = {
-  /**
-   * Describes heading of LinkList.
-   */
-  heading: PropTypes.string,
-
-  /**
-   * Describes the list of CTA.
-   * The summary of the structure of each items are:
-   *
-   * | Name      | Description                                                                             |
-   * | --------- | --------------------------------------------------------------------------------------- |
-   * | `heading` | Describing the resource with added detail.                                              |
-   * | `type`    | Describes after onClick where to load. It has `external`, `local`, and `video` options. |
-   *
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  items: PropTypes.arrayOf(
-    PropTypes.shape({
-      style: PropTypes.oneOf(['text', 'card', 'button', 'feature']),
-      type: PropTypes.oneOfType([
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-        PropTypes.arrayOf(
-          PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-        ),
-      ]),
-      copy: PropTypes.string,
-      href: PropTypes.string,
-      customClassName: PropTypes.string,
-    })
-  ).isRequired,
-
-  /**
-   * Icon placement.
-   */
-  iconPlacement: PropTypes.oneOf(['left', 'right']),
-
-  /**
-   * Orientation of LinkList.
-   */
-  style: PropTypes.oneOf(['card', 'horizontal', 'vertical', 'vertical-end'])
-    .isRequired,
-};
-
-export default LinkList;
diff --git a/packages/react/src/components/LinkList/README.stories.mdx b/packages/react/src/components/LinkList/README.stories.mdx
deleted file mode 100644
index aafdba15759..00000000000
--- a/packages/react/src/components/LinkList/README.stories.mdx
+++ /dev/null
@@ -1,103 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LinkList from './LinkList';
-
-# Link List
-
-> Link lists are a collection of links that can be presented in various
-> orientations and styles, such as horizontal, vertical, and cards.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LinkList)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LinkList)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/link-list/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the LinkList
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LinkList } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const items = [
-    {
-      heading: 'Containerization: A Complete Guide',
-      type: 'local',
-      copy: 'Lorem ipsum dolor sit amet',
-      cta: {
-        href: 'https://ibm.com',
-      },
-    },
-    {
-      heading: 'Why should you use microservices and containers?',
-      type: 'external',
-      copy: 'Lorem ipsum dolor sit amet',
-      cta: {
-        href: 'https://ibm.com',
-      },
-    },
-    {
-      type: 'video',
-      media: {
-        src: '1_9h94wo6b',
-        type: 'video',
-      },
-    },
-  ];
-  return (
-    <LinkList
-      style="card|horizontal|vertical"
-      heading={heading}
-      items={items}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the LinkList styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import LinkList from '@carbon/ibmdotcom-react/es/components/LinkList/LinkList';
-````
-
-## Props
-
-<Props of={LinkList} />
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LinkList/__stories__/LinkList.stories.js b/packages/react/src/components/LinkList/__stories__/LinkList.stories.js
deleted file mode 100644
index 8656321471c..00000000000
--- a/packages/react/src/components/LinkList/__stories__/LinkList.stories.js
+++ /dev/null
@@ -1,228 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, select } from '@storybook/addon-knobs';
-import LinkList from '../LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = ['download', 'local', 'external', 'video'];
-const headlines = [
-  'Learn more about Kubernetes',
-  'Containerization A Complete Guide',
-  'Microservices and containers',
-];
-const iconPlacement = ['left', 'right'];
-const items = [
-  {
-    type: types[1],
-    copy: headlines[0],
-    cta: {
-      href: 'https://ibm.com',
-    },
-  },
-  {
-    type: types[0],
-    copy: headlines[1],
-    cta: {
-      href: 'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-    },
-  },
-  {
-    type: types[2],
-    copy: headlines[2],
-    cta: {
-      href: 'https://ibm.com',
-    },
-  },
-  {
-    type: types[3],
-    media: {
-      src: '1_9h94wo6b',
-      type: 'video',
-    },
-  },
-];
-
-const props = {
-  default: () => ({
-    heading: text('Heading (heading):', 'Tutorials'),
-    items: items,
-  }),
-  horizontal: () => ({
-    heading: text('Heading (heading):', 'Tutorials'),
-    items: items.slice(0, 2),
-    iconPlacement: select(
-      'Icon placement (iconPlacement):',
-      iconPlacement,
-      iconPlacement[1]
-    ),
-  }),
-  vertical: () => ({
-    heading: text('Heading (heading):', 'Tutorials'),
-    items: items.slice(0, 3),
-    iconPlacement: select(
-      'Icon placement (iconPlacement):',
-      iconPlacement,
-      iconPlacement[0]
-    ),
-  }),
-  verticalWithCards: () => ({
-    heading: text('Heading (heading):', 'Tutorials'),
-    items: items,
-    iconPlacement: select(
-      'Icon placement (iconPlacement):',
-      iconPlacement,
-      iconPlacement[0]
-    ),
-  }),
-};
-
-export default {
-  title: 'Components/Link list',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Link list: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-3 bx--offset-lg-4">
-          <LinkList style="card" {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Default.story = {
-  parameters: {
-    propsSet: {
-      default: {
-        LinkList: {
-          items,
-        },
-      },
-    },
-  },
-};
-
-export const Horizontal = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-10 bx--offset-lg-4">
-          <LinkList style="horizontal" {...props.horizontal()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Horizontal.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Link list: Horizontal',
-    },
-    propsSet: {
-      default: {
-        LinkList: {
-          items: items.slice(0, 2),
-        },
-      },
-    },
-  },
-};
-
-export const Vertical = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-4 bx--offset-lg-4">
-          <LinkList style="vertical" {...props.vertical()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-Vertical.story = {
-  parameters: {
-    percy: {
-      name: 'Components|Link list: Vertical',
-    },
-    propsSet: {
-      default: {
-        LinkList: {
-          items,
-        },
-      },
-    },
-  },
-};
-
-export const VerticalWithCards = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-4 bx--offset-lg-4">
-          <LinkList style="vertical" {...props.verticalWithCards()} />
-          <LinkList style="card" {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-VerticalWithCards.story = {
-  name: 'Vertical with cards',
-  parameters: {
-    percy: {
-      name: 'Components|Link list: Vertical with cards',
-    },
-    propsSet: {
-      default: {
-        LinkList: {
-          items,
-        },
-      },
-    },
-  },
-};
-
-export const EndOfSection = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <LinkList style="vertical-end" {...props.default()} />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-EndOfSection.story = {
-  name: 'End of section',
-  parameters: {
-    percy: {
-      name: 'Components|Link list: End of section',
-    },
-    propsSet: {
-      default: {
-        LinkList: {
-          items,
-        },
-      },
-    },
-  },
-};
diff --git a/packages/react/src/components/LinkList/index.js b/packages/react/src/components/LinkList/index.js
deleted file mode 100644
index 312e2747501..00000000000
--- a/packages/react/src/components/LinkList/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as LinkList } from './LinkList';
diff --git a/packages/react/src/components/LinkWithIcon/LinkWithIcon.js b/packages/react/src/components/LinkWithIcon/LinkWithIcon.js
deleted file mode 100644
index 9642c393a28..00000000000
--- a/packages/react/src/components/LinkWithIcon/LinkWithIcon.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import Link from '../../internal/vendor/carbon-components-react/components/Link/Link';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * LinkWithIcon component.
- */
-const LinkWithIcon = ({
-  children,
-  className: customClassName,
-  href,
-  inverse,
-  iconInline,
-  iconPlacement,
-  ...props
-}) => {
-  return (
-    <div
-      className={classNames(
-        `${prefix}--link-with-icon__container`,
-        customClassName,
-        {
-          [`${prefix}--link-with-icon__container__inverse`]: inverse,
-        }
-      )}
-      data-autoid={`${stablePrefix}--link-with-icon`}>
-      <Link
-        size="lg"
-        href={href}
-        className={classNames(`${prefix}--link-with-icon`, {
-          [`${prefix}--link-with-icon__icon-left`]: iconPlacement === 'left',
-          [`${prefix}--link-with-icon--inline-icon`]:
-            iconInline && iconPlacement === 'right',
-        })}
-        {...props}>
-        {children}
-      </Link>
-    </div>
-  );
-};
-
-LinkWithIcon.propTypes = {
-  /**
-   * Array containing Link text and icon elements.
-   */
-  children: PropTypes.arrayOf(PropTypes.node),
-
-  /**
-   * Url of link.
-   */
-  href: PropTypes.string,
-
-  /**
-   * Positions the icon inline with text when `true`
-   */
-  iconInline: PropTypes.bool,
-
-  /**
-   * Icon placement.
-   */
-  iconPlacement: PropTypes.oneOf(['left', 'right']),
-
-  /**
-   * Toggles inverse theming
-   */
-  inverse: PropTypes.bool,
-
-  /**
-   * custom classname
-   */
-  className: PropTypes.string,
-};
-
-LinkWithIcon.defaultProps = {
-  children: [],
-  href: '',
-  iconInline: true,
-  iconPlacement: 'right',
-};
-
-export default LinkWithIcon;
diff --git a/packages/react/src/components/LinkWithIcon/README.stories.mdx b/packages/react/src/components/LinkWithIcon/README.stories.mdx
deleted file mode 100644
index 74cbacb7a13..00000000000
--- a/packages/react/src/components/LinkWithIcon/README.stories.mdx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LinkWithIcon from './LinkWithIcon';
-
-# LinkWithIcon
-
-> Links with an icon should be used primarily as a navigational element, with
-> the icon as an indicator to the type of content being referenced, e.g. url,
-> file, video.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LinkWithIcon)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LinkWithIcon)
-
-## Getting started
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the LinkWithIcon
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import { ArrowRight20 } from '@carbon/icons-react';
-import { LinkWithIcon } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <LinkWithIcon href="https://www.example.com">
-      <span>Link text</span>
-      <ArrowRight20 />
-    </LinkWithIcon>
-  );
-}
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 And don't forget to import the LinkWithIcon styles from
-> [@carbon/ibmdotcom-styles](/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import LinkWithIcon from '@carbon/ibmdotcom-react/es/components/LinkWithIcon/LinkWithIcon';
-````
-
-## Props
-
-<Props of={LinkWithIcon} />
-
-> 💡 See the
-> [Carbon link](https://www.carbondesignsystem.com/components/link/code) for a
-> complete list of configurations.
-
-## Stable selectors
-
-| Name                  | Description |
-| --------------------- | ----------- |
-| `dds--link-with-icon` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LinkWithIcon/__stories__/LinkWithIcon.stories.js b/packages/react/src/components/LinkWithIcon/__stories__/LinkWithIcon.stories.js
deleted file mode 100755
index c235d7e47b5..00000000000
--- a/packages/react/src/components/LinkWithIcon/__stories__/LinkWithIcon.stories.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, select } from '@storybook/addon-knobs';
-import ArrowLeft20 from '@carbon/icons-react/es/arrow--left/20';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import LinkWithIcon from '../LinkWithIcon';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const iconPlacement = ['left', 'right'];
-
-export default {
-  title: 'Components/Link with icon',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Link with icon: Default',
-    },
-  },
-};
-
-const props = () => ({
-  disabled: boolean('Disabled (disabled):', false),
-  iconPlacement: select(
-    'Icon placement (iconPlacement):',
-    iconPlacement,
-    iconPlacement[1]
-  ),
-  visited: boolean('Allow visited styles (visited):', false),
-});
-
-export const Default = () => {
-  return (
-    <div
-      style={{
-        padding: 2 + `rem`,
-        display: 'flex',
-        alignItems: 'center',
-        flexDirection: 'column',
-      }}>
-      <LinkWithIcon href="https://www.example.com" {...props()}>
-        <span>Link text</span>
-        {iconPlacement === 'left' ? <ArrowLeft20 /> : <ArrowRight20 />}
-      </LinkWithIcon>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/LinkWithIcon/__tests__/LinkWithIcon.test.js b/packages/react/src/components/LinkWithIcon/__tests__/LinkWithIcon.test.js
deleted file mode 100755
index 087088d6f77..00000000000
--- a/packages/react/src/components/LinkWithIcon/__tests__/LinkWithIcon.test.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 LinkWithIcon from '../LinkWithIcon';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-describe('LinkWithIcon', () => {
-  it('renders as expected', () => {
-    const linkWithIcon = shallow(
-      <LinkWithIcon href="https://www.example.com" inverse={true} />
-    );
-
-    expect(linkWithIcon.find('.bx--link-with-icon')).toHaveLength(1);
-    expect(
-      linkWithIcon.find('.bx--link-with-icon__container__inverse')
-    ).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/LinkWithIcon/index.js b/packages/react/src/components/LinkWithIcon/index.js
deleted file mode 100644
index 0138b25d377..00000000000
--- a/packages/react/src/components/LinkWithIcon/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as LinkWithIcon } from './LinkWithIcon';
diff --git a/packages/react/src/components/LocaleModal/LocaleModal.js b/packages/react/src/components/LocaleModal/LocaleModal.js
deleted file mode 100755
index f1e8aad2b74..00000000000
--- a/packages/react/src/components/LocaleModal/LocaleModal.js
+++ /dev/null
@@ -1,273 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ComposedModal, {
-  ModalBody,
-  ModalHeader,
-} from '../../internal/vendor/carbon-components-react/components/ComposedModal/ComposedModal';
-import React, { useEffect, useState } from 'react';
-import altlangs from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/altlangs/altlangs';
-import ArrowLeft20 from '@carbon/icons-react/es/arrow--left/20';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import EarthFilled16 from '@carbon/icons-react/es/earth--filled/16';
-import { LinkWithIcon } from '../LinkWithIcon';
-import LocaleAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Locale/Locale';
-import LocaleModalCountries from './LocaleModalCountries';
-import LocaleModalRegions from './LocaleModalRegions';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * LocaleModal component.
- */
-const LocaleModal = ({
-  closeFunc,
-  isOpen,
-  setIsOpen,
-  localeData,
-  localeDisplay,
-}) => {
-  const [list, setList] = useState({});
-  const [langDisplay, setLangDisplay] = useState();
-  const [modalLabels, setModalLabels] = useState({});
-  const [isFiltering, setIsFiltering] = useState(false);
-  const [clearResults, setClearResults] = useState(false);
-  const [currentRegion, setCurrentRegion] = useState();
-
-  const filterClass = cx({
-    [`${prefix}--locale-modal__filtering`]: isFiltering,
-  });
-
-  useEffect(() => {
-    let stale = false;
-
-    (async () => {
-      let list, getLangDisplay;
-      if (localeData && localeDisplay) {
-        list = Object.assign({}, localeData);
-        getLangDisplay = localeDisplay;
-      } else {
-        const pair = await Promise.all([
-          LocaleAPI.getLocale(),
-          LocaleAPI.getLangDisplay(),
-        ]);
-        if (!stale) {
-          const locale = pair[0];
-          getLangDisplay = pair[1];
-          list = locale && (await LocaleAPI.getList(locale));
-        }
-      }
-
-      setLangDisplay(getLangDisplay);
-      setList(list);
-      setModalLabels(list.localeModal);
-    })();
-
-    // reset the country search results when clicking close icon or back to region button
-    if (clearResults) {
-      const localeItems = document.querySelectorAll(
-        `.${prefix}--locale-modal__locales`
-      );
-
-      const localeHidden = `${prefix}--locale-modal__locales-hidden`;
-
-      [...localeItems].map((item) => {
-        item.classList.remove(localeHidden);
-      });
-    }
-
-    return () => {
-      stale = true;
-    };
-  }, [clearResults, localeData, localeDisplay]);
-
-  useEffect(() => {
-    document
-      .querySelector(`.${prefix}--modal-header__heading`)
-      ?.setAttribute('tabindex', '0');
-
-    const localeModalContainer = document.querySelector(
-      `.${prefix}--locale-modal-container .${prefix}--modal-container`
-    );
-
-    localeModalContainer?.setAttribute('role', 'dialog');
-    localeModalContainer?.setAttribute(
-      'aria-labelledby',
-      modalLabels.headerTitle
-    );
-    localeModalContainer?.setAttribute('tabindex', '-1');
-    localeModalContainer?.setAttribute('aria-modal', 'true');
-  });
-
-  return (
-    <ComposedModal
-      open={isOpen}
-      onClose={() => {
-        _close(setIsOpen, closeFunc);
-      }}
-      className={`${prefix}--locale-modal-container`}
-      data-autoid={`${stablePrefix}--locale-modal`}
-      selectorPrimaryFocus={`.${prefix}--modal-close`}>
-      {isFiltering ? (
-        <ModalHeader
-          data-autoid={`${stablePrefix}--locale-modal__region-back`}
-          label={[
-            <LinkWithIcon href="#" iconPlacement={'left'}>
-              <span>{modalLabels.headerTitle}</span>
-              {
-                <ArrowLeft20
-                  className={`${prefix}--locale-modal__label-arrow`}
-                  key="arrow-left"
-                />
-              }
-            </LinkWithIcon>,
-          ]}
-          title={currentRegion}
-          className={`${prefix}--locale-modal__back`}
-        />
-      ) : (
-        <ModalHeader
-          label={[
-            langDisplay,
-            <EarthFilled16
-              key="earthfilled"
-              className={`${prefix}--locale-modal__label-globe`}
-            />,
-          ]}
-          title={modalLabels.headerTitle}
-          iconDescription={modalLabels.modalClose}
-        />
-      )}
-      <ModalBody className={`${prefix}--locale-modal ${filterClass}`}>
-        <LocaleModalRegions
-          regionList={sortList(list)}
-          setCurrentRegion={setCurrentRegion}
-          setIsFiltering={setIsFiltering}
-          setClearResults={setClearResults}
-          returnButtonLabel={modalLabels.headerTitle}
-          closeModalLabel={modalLabels.modalClose}
-        />
-        <LocaleModalCountries
-          regionList={sortList(list)}
-          setClearResults={setClearResults}
-          currentRegion={currentRegion}
-          {...modalLabels}
-        />
-      </ModalBody>
-    </ComposedModal>
-  );
-};
-
-LocaleModal.propTypes = {
-  /**
-   * `true` to open modal in its initial state.
-   */
-  isOpen: PropTypes.bool,
-
-  /**
-   * The setter for `isOpen`.
-   */
-  setIsOpen: PropTypes.func,
-
-  /**
-   * Function triggered on close
-   */
-  closeFunc: PropTypes.func,
-
-  /**
-   * Locale/Language data to bypass the service call.
-   */
-  localeData: PropTypes.shape({
-    regionList: PropTypes.arrayOf(
-      PropTypes.shape({
-        name: PropTypes.string,
-        key: PropTypes.string,
-        countryList: PropTypes.shape({
-          name: PropTypes.string,
-          locale: PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.string)),
-        }),
-      })
-    ),
-    localeModal: PropTypes.shape({
-      headerTitle: PropTypes.string,
-      modalClose: PropTypes.string,
-      searchLabel: PropTypes.string,
-      searchClearText: PropTypes.string,
-      searchPlaceholder: PropTypes.string,
-      availabilityText: PropTypes.string,
-      unavailabilityText: PropTypes.string,
-    }),
-  }),
-
-  /**
-   * Display text for current locale/language to bypass service call.
-   */
-  localeDisplay: PropTypes.string,
-};
-
-LocaleModal.defaultProps = {
-  isOpen: false,
-  setIsOpen: () => {},
-  closeFunc: () => {},
-  localeData: null,
-  localeDisplay: null,
-};
-
-/**
- *  New region/country list based lang attributes available on page
- *
- * @param {object} list country list
- * @returns {object} list item
- */
-export const sortList = (list) => {
-  const pageLangs = altlangs();
-  const filterList = [];
-
-  list.regionList &&
-    list.regionList.map((region, index) => {
-      filterList.push({
-        name: region.name,
-        key: region.key,
-        countries: [],
-      });
-
-      for (let [key, value] of Object.entries(pageLangs)) {
-        region.countryList.map((country) => {
-          country.locale.map((loc) => {
-            if (loc[0].includes(key)) {
-              filterList[index].countries.push({
-                region: region.key,
-                name: country.name,
-                locale: loc[0],
-                language: loc[1],
-                href: value,
-              });
-            }
-          });
-        });
-      }
-
-      filterList[index].countries.sort((a, b) => (a.name > b.name ? 1 : -1));
-    });
-  return filterList;
-};
-
-/**
- * Sets modal state to closed
- *
- * @private
- */
-export const _close = (setIsOpen, closeFunc) => {
-  setIsOpen(false);
-  closeFunc();
-};
-
-export default LocaleModal;
diff --git a/packages/react/src/components/LocaleModal/LocaleModalCountries.js b/packages/react/src/components/LocaleModal/LocaleModalCountries.js
deleted file mode 100755
index f5011a62792..00000000000
--- a/packages/react/src/components/LocaleModal/LocaleModalCountries.js
+++ /dev/null
@@ -1,244 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useEffect, useRef } from 'react';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import ipcinfoCookie from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/ipcinfoCookie/ipcinfoCookie';
-import PropTypes from 'prop-types';
-import Search from '../../internal/vendor/carbon-components-react/components/Search/Search';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * LocaleModalCountries component
- *
- * @param {object} props props object
- * @param {object} props.regionList object of country and language codes
- * @param {Function} props.setClearResults set flag to determine whether to reset the filtered results
- * @param {string} props.currentRegion current region
- * @returns {*} LocaleModal component
- */
-const LocaleModalCountries = ({
-  regionList,
-  setClearResults,
-  currentRegion,
-  ...modalLabels
-}) => {
-  const componentRef = useRef(null);
-  const localList = useRef(null);
-  useEffect(() => {
-    localList.current.scrollTop = 0;
-  }, [currentRegion, regionList]);
-
-  useEffect(() => {
-    const localeFilter = document.getElementById(
-      `${prefix}--locale-modal__filter`
-    );
-    const localeText = document.querySelector(
-      `.${prefix}--locale-modal__search-text`
-    );
-    const closeBtn = document.querySelector(
-      `.${prefix}--search .${prefix}--search-close`
-    );
-    const localeHidden = `${prefix}--locale-modal__locales-hidden`;
-
-    localeFilter?.addEventListener(
-      'keyup',
-      filterLocale.bind(
-        null,
-        setClearResults,
-        localeFilter,
-        localeHidden,
-        localeText,
-        modalLabels,
-        componentRef
-      )
-    );
-
-    /**
-     * Set initial focus on search input when panel loads
-     *
-     */
-    localeFilter?.focus();
-
-    /**
-     * Show all links when close button clicked
-     *
-     */
-    closeBtn?.addEventListener('click', setClearResults.bind(null, true));
-
-    return () => {
-      closeBtn?.removeEventListener('click', setClearResults.bind(null, true));
-      localeFilter?.removeEventListener(
-        'keyup',
-        filterLocale.bind(
-          null,
-          setClearResults,
-          localeFilter,
-          localeHidden,
-          localeText,
-          modalLabels,
-          componentRef
-        )
-      );
-      localeText ? (localeText.innerHTML = modalLabels.availabilityText) : '';
-    };
-  });
-
-  return (
-    <div ref={componentRef} className={`${prefix}--locale-modal__filter`}>
-      <div className={`${prefix}--locale-modal__search`}>
-        <Search
-          data-autoid={`${stablePrefix}--locale-modal__filter`}
-          placeHolderText={modalLabels.searchPlaceholder}
-          labelText={modalLabels.searchLabel}
-          closeButtonLabelText={modalLabels.searchClearText}
-          id={`${prefix}--locale-modal__filter`}
-          tabIndex="0"
-        />
-        <p className={`${prefix}--locale-modal__search-text`}>
-          {modalLabels.availabilityText}
-        </p>
-      </div>
-      <ul className={`${prefix}--locale-modal__list`} ref={localList}>
-        <p
-          className={`${prefix}--assistive-text`}
-          role="status"
-          aria-live="assertive"></p>
-        {regionList?.map(
-          (region) =>
-            currentRegion === region.name &&
-            region.countries.map((country, index) => (
-              <li key={index}>
-                <a
-                  className={`${prefix}--locale-modal__locales`}
-                  onClick={() => _setCookie(country.locale)}
-                  href={country.href}
-                  data-region={country.region}>
-                  <div className={`${prefix}--locale-modal__locales__name`}>
-                    {country.name}
-                  </div>
-                  <div className={`${prefix}--locale-modal__locales__name`}>
-                    {country.language}
-                  </div>
-                </a>
-              </li>
-            ))
-        )}
-      </ul>
-    </div>
-  );
-};
-
-/**
- * @property {object} propTypes LocaleModalCountries propTypes
- * @description Defined property types for component
- * @type {{regionList: Array, availabilityText: string, unavailabilityText: string, placeHolderText: string, labelText: string}}
- */
-LocaleModalCountries.propTypes = {
-  /**
-   * Array of regions, countries, and languages.
-   */
-  regionList: PropTypes.array,
-
-  /**
-   * Func to clear search input.
-   */
-  setClearResults: PropTypes.func,
-  /**
-   * String of current region.
-   */
-  currentRegion: PropTypes.string,
-};
-
-LocaleModalCountries.defaultProps = {
-  searchLabel: 'Search by location or language',
-};
-
-/**
- * method to handle when country/region has been selected
- * sets the ipcInfo cookie with selected locale
- *
- * @param {object} locale selected country/region
- * @private
- */
-export const _setCookie = (locale) => {
-  const localeSplit = locale.split('-');
-  const localeObj = {
-    cc: localeSplit[1],
-    lc: localeSplit[0],
-  };
-  ipcinfoCookie.set(localeObj);
-};
-
-/**
- * Filter locale links based on search input
- *
- */
-export const filterLocale = (
-  setClearResults,
-  localeFilter,
-  localeHidden,
-  localeText,
-  modalLabels,
-  componentRef
-) => {
-  const localeItems = document.querySelectorAll(
-    `.${prefix}--locale-modal__list a:not(.${prefix}--locale-modal__locales-filtered)`
-  );
-
-  setClearResults(false);
-  const filterVal = localeFilter.value.toUpperCase();
-
-  [...localeItems].map((item) => {
-    const locale = item.getElementsByTagName('div');
-
-    const country = locale[0].textContent || locale[0].innerText;
-    const language = locale[1].textContent || locale[1].innerText;
-
-    if (
-      country.toUpperCase().indexOf(filterVal) > -1 ||
-      language.toUpperCase().indexOf(filterVal) > -1
-    ) {
-      item.classList.remove(localeHidden);
-    } else {
-      item.classList.add(localeHidden);
-    }
-  });
-
-  /**
-   * Update locale copy when no results
-   *
-   */
-  const localeItemsHidden = document.querySelectorAll(`.${localeHidden}`);
-
-  localeText.innerHTML =
-    localeItems.length === localeItemsHidden.length
-      ? modalLabels.unavailabilityText
-      : modalLabels.availabilityText;
-
-  /**
-   *  Reflect number of results in the accessibility readout
-   */
-  if (componentRef) {
-    const resultsElement = componentRef.current.querySelector(
-      `.${prefix}--locale-modal__list .${prefix}--assistive-text`
-    );
-
-    const resultsCount = localeItems.length - localeItemsHidden.length;
-
-    if (resultsElement) {
-      resultsElement.textContent = `${resultsCount} ${
-        resultsCount == 1 ? 'result' : 'results'
-      } found.`;
-    }
-  }
-};
-
-export default LocaleModalCountries;
diff --git a/packages/react/src/components/LocaleModal/LocaleModalRegions.js b/packages/react/src/components/LocaleModal/LocaleModalRegions.js
deleted file mode 100755
index a281e70883f..00000000000
--- a/packages/react/src/components/LocaleModal/LocaleModalRegions.js
+++ /dev/null
@@ -1,201 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect } from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import { CardLink } from '../CardLink';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import Error20 from '@carbon/icons-react/es/error/20';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * LocaleModalRegions component
- *
- * @param {object} props props object
- * @param {object} props.regionList object of regions
- * @param {Function} props.setCurrentRegion sets state for region name
- * @param {boolean} props.setIsFiltering true when search filter is visible
- * @param {Function} props.setClearResults set flag to determine whether to reset the filtered results
- * @param {string} props.closeModalLabel label for the close button
- * @param {string} props.returnButtonLabel label for the return button
- * @returns {*} LocaleModalRegions component
- */
-const LocaleModalRegions = ({
-  regionList,
-  setCurrentRegion,
-  setIsFiltering,
-  setClearResults,
-  returnButtonLabel,
-  closeModalLabel,
-}) => {
-  const handleClick = (e) => {
-    setCurrentRegion(e.currentTarget.getAttribute('aria-label'));
-    setIsFiltering(true);
-    e.preventDefault();
-  };
-
-  useEffect(() => {
-    /**
-     * go back to region selection
-     *
-     */
-    const localeBackBtn = document.querySelectorAll(
-      `.${prefix}--locale-modal__back .${prefix}--modal-header__label,
-            .${prefix}--locale-modal__back .${prefix}--modal-close`
-    );
-
-    addLocaleBackBtnListeners(
-      localeBackBtn,
-      returnButtonLabel,
-      setIsFiltering,
-      setClearResults,
-      closeModalLabel
-    );
-  });
-
-  return (
-    <div
-      className={`${prefix}--grid ${prefix}--no-gutter ${prefix}--locale-modal__regions`}>
-      <div className={`${prefix}--row`}>
-        {regionList &&
-          regionList.map((region) => {
-            const hasCountries = region.countries.length !== 0;
-
-            return (
-              <div
-                key={`${region.name}`}
-                className={`${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--col-xlg-8 ${prefix}--no-gutter`}>
-                <CardLink
-                  data-autoid={`${stablePrefix}--locale-modal__geo-btn-${region.key}`}
-                  key={region.key}
-                  card={{
-                    'data-region': region.key,
-                    heading: region.name,
-                    cta: {
-                      type: 'local',
-                      href: '#',
-                      icon: {
-                        src: hasCountries ? ArrowRight20 : Error20,
-                      },
-                      handleClick: hasCountries
-                        ? (e) => {
-                            handleClick(e);
-                          }
-                        : null,
-                    },
-                    disabled: !hasCountries,
-                  }}
-                />
-              </div>
-            );
-          })}
-      </div>
-    </div>
-  );
-};
-
-/**
- * Removes tabindex and role as it goes back
- *
- * @param {*} btn btn element
- */
-export const localeBackActive = (btn, setIsFiltering, setClearResults) => {
-  setIsFiltering(false);
-  setClearResults(true);
-  const filter = document.getElementById(`${prefix}--locale-modal__filter`);
-  if (filter) {
-    filter.value = '';
-  }
-  btn.removeAttribute('tabindex');
-  btn.removeAttribute('role');
-  btn.removeAttribute('aria-label');
-};
-
-/**
- * Add listeners and appropriate role, tab-index and aria-label to the buttons provided
- *
- * @param {Array} buttons buttons to be processed
- * @param {Function} returnButtonLabel hook from props
- * @param {Function} setIsFiltering hook from props
- * @param {Function} setClearResults hook from props
- * @param {Function} closeModalLabel hook from props
- */
-export const addLocaleBackBtnListeners = (
-  buttons,
-  returnButtonLabel,
-  setIsFiltering,
-  setClearResults,
-  closeModalLabel
-) => {
-  [...buttons].forEach((btn) => {
-    btn.setAttribute('tabindex', '0');
-    btn.setAttribute('role', 'button');
-    btn.setAttribute(
-      'aria-label',
-      btn.tagName.toLowerCase() === 'button'
-        ? closeModalLabel
-        : returnButtonLabel
-    );
-
-    btn.addEventListener('click', function click(e) {
-      localeBackActive(btn, setIsFiltering, setClearResults);
-      btn.removeEventListener('click', click);
-      e.preventDefault();
-    });
-    btn.addEventListener('keyup', function keyup(e) {
-      if (e.keyCode === 32 || e.keyCode === 13) {
-        localeBackActive(btn, setIsFiltering, setClearResults);
-        btn.removeEventListener('keyup', keyup);
-        e.preventDefault();
-      }
-    });
-  });
-};
-
-/**
- * @property {object} propTypes LocaleModalRegions propTypes
- * @description Defined property types for component
- * @type {{}}
- */
-LocaleModalRegions.propTypes = {
-  /**
-   * Object with region list json data
-   * https://1.www.s81c.com/common/js/dynamicnav/www/countrylist/jsononly/usen-utf8.json
-   */
-  regionList: PropTypes.array,
-
-  /**
-   * Sets current region
-   */
-  setCurrentRegion: PropTypes.func,
-
-  /**
-   * Sets region filter
-   */
-  setIsFiltering: PropTypes.func,
-
-  /**
-   * Clears filter input and resets list
-   */
-  setClearResults: PropTypes.func,
-
-  /**
-   * Back button copy
-   */
-  returnButtonLabel: PropTypes.string,
-
-  /**
-   * Close button copy
-   */
-  closeModalLabel: PropTypes.string,
-};
-
-export default LocaleModalRegions;
diff --git a/packages/react/src/components/LocaleModal/README.stories.mdx b/packages/react/src/components/LocaleModal/README.stories.mdx
deleted file mode 100644
index 89db1f200fd..00000000000
--- a/packages/react/src/components/LocaleModal/README.stories.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LocaleModal from './LocaleModal';
-
-# Locale Modal
-
-> The locale modal allows users to change geographic regions and translate pages
-> to those region languages, if available.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LocaleModal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LocaleModal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/local-modal/locale-modal';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the LocaleModal
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LocaleModal } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return <LocaleModal />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the footer styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import LocaleModal from '@carbon/ibmdotcom-react/es/components/LocaleModal/LocaleModal';
-````
-
-## Setting the current page language
-
-The current page language is based on the `lang` attribute in `<html>`:
-
-```html
-<html lang="[language code]-[country code]"></html>
-```
-
-See
-[Building for IBM.com](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/building-for-ibm-dotcom.md#page-language)
-for more details.
-
-See how to
-[Configure Available Languages](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/docs/building-for-ibm-dotcom.md#page-language#configuring-available-languages).
-
-## Options
-
-<Props of={LocaleModal} />
-
-> 💡 Props default to English if not provided.
-
-> 💡 Also refer to Carbon's
-> [`<ComposedModal>`](https://react.carbondesignsystem.com/?path=/story/composedmodal--using-child-nodes)
-> for other props.
-
-## Stable selectors
-
-| Name                                   | Description |
-| -------------------------------------- | ----------- |
-| `dds--locale-modal`                    | Component   |
-| `dds--locale-modal__geo-btn-${region}` | Interactive |
-| `dds--locale-modal__filter`            | Interactive |
-| `dds--locale-modal__region-back`       | Interactive |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LocaleModal/__data__/locale-data.json b/packages/react/src/components/LocaleModal/__data__/locale-data.json
deleted file mode 100755
index 89be3f8b7bb..00000000000
--- a/packages/react/src/components/LocaleModal/__data__/locale-data.json
+++ /dev/null
@@ -1,583 +0,0 @@
-{
-  "regionList": [
-    {
-      "name": "Americas",
-      "key": "am",
-      "countryList": [
-        {
-          "name": "Anguilla",
-          "locale": [["en-ai", "English"]]
-        },
-        {
-          "name": "Antigua and Barbuda",
-          "locale": [["en-ag", "English"]]
-        },
-        {
-          "name": "Argentina",
-          "locale": [["es-ar", "Spanish (Español)"]]
-        },
-        {
-          "name": "Aruba",
-          "locale": [["en-aw", "English"]]
-        },
-        {
-          "name": "Bahamas",
-          "locale": [["en-bs", "English"]]
-        },
-        {
-          "name": "Barbados",
-          "locale": [["en-bb", "English"]]
-        },
-        {
-          "name": "Bermuda",
-          "locale": [["en-bm", "English"]]
-        },
-        {
-          "name": "Bolivia",
-          "locale": [["es-bo", "Spanish (Español)"]]
-        },
-        {
-          "name": "Brazil (Brasil)",
-          "locale": [["pt-br", "Portuguese (Português)"]]
-        },
-        {
-          "name": "Canada",
-          "locale": [
-            ["en-ca", "English"],
-            ["fr-ca", "French (Français)"]
-          ]
-        },
-        {
-          "name": "Cayman Islands",
-          "locale": [["en-ky", "English"]]
-        },
-        {
-          "name": "Chile",
-          "locale": [["es-cl", "Spanish (Español)"]]
-        },
-        {
-          "name": "Colombia",
-          "locale": [["es-co", "Spanish (Español)"]]
-        },
-        {
-          "name": "Costa Rica",
-          "locale": [["es-cr", "Spanish (Español)"]]
-        },
-        {
-          "name": "Curacao",
-          "locale": [["en-cw", "English"]]
-        },
-        {
-          "name": "Dominica",
-          "locale": [["en-dm", "English"]]
-        },
-        {
-          "name": "Ecuador",
-          "locale": [["es-ec", "Spanish (Español)"]]
-        },
-        {
-          "name": "Grenada",
-          "locale": [["en-gd", "English"]]
-        },
-        {
-          "name": "Guyana",
-          "locale": [["en-gy", "English"]]
-        },
-        {
-          "name": "Jamaica",
-          "locale": [["en-jm", "English"]]
-        },
-        {
-          "name": "Mexico",
-          "locale": [["es-mx", "Spanish (Español)"]]
-        },
-        {
-          "name": "Montserrat",
-          "locale": [["en-ms", "English"]]
-        },
-        {
-          "name": "Paraguay",
-          "locale": [["es-py", "Spanish (Español)"]]
-        },
-        {
-          "name": "Peru",
-          "locale": [["es-pe", "Spanish (Español)"]]
-        },
-        {
-          "name": "Saint Kitts and Nevis",
-          "locale": [["en-kn", "English"]]
-        },
-        {
-          "name": "Saint Lucia",
-          "locale": [["en-lc", "English"]]
-        },
-        {
-          "name": "Saint Vincent and the Grenadines",
-          "locale": [["en-vc", "English"]]
-        },
-        {
-          "name": "Suriname",
-          "locale": [["en-sr", "English"]]
-        },
-        {
-          "name": "Trinidad and Tobago",
-          "locale": [["en-tt", "English"]]
-        },
-        {
-          "name": "Turks and Caicos Islands",
-          "locale": [["en-tc", "English"]]
-        },
-        {
-          "name": "United States",
-          "locale": [["en-us", "English"]]
-        },
-        {
-          "name": "Uruguay",
-          "locale": [["es-uy", "Spanish (Español)"]]
-        },
-        {
-          "name": "Venezuela",
-          "locale": [["es-ve", "Spanish (Español)"]]
-        },
-        {
-          "name": "Virgin Islands, British",
-          "locale": [["en-vg", "English"]]
-        }
-      ]
-    },
-    {
-      "name": "Asia Pacific",
-      "key": "ap",
-      "countryList": [
-        {
-          "name": "Australia",
-          "locale": [["en-au", "English"]]
-        },
-        {
-          "name": "Bangladesh",
-          "locale": [["en-bd", "English"]]
-        },
-        {
-          "name": "Brunei Darussalam",
-          "locale": [["en-bn", "English"]]
-        },
-        {
-          "name": "Cambodia",
-          "locale": [["en-kh", "English"]]
-        },
-        {
-          "name": "China (中国)",
-          "locale": [["zh-cn", "Chinese (简体中文)"]]
-        },
-        {
-          "name": "Hong Kong S.A.R. of China",
-          "locale": [["en-hk", "English"]]
-        },
-        {
-          "name": "India",
-          "locale": [["en-in", "English"]]
-        },
-        {
-          "name": "Indonesia",
-          "locale": [["en-id", "English"]]
-        },
-        {
-          "name": "Japan (日本)",
-          "locale": [["ja-jp", "Japanese (日本語)"]]
-        },
-        {
-          "name": "Korea, Republic of (대한민국)",
-          "locale": [["ko-kr", "Korean (한국어)"]]
-        },
-        {
-          "name": "Malaysia",
-          "locale": [["en-my", "English"]]
-        },
-        {
-          "name": "Nepal",
-          "locale": [["en-np", "English"]]
-        },
-        {
-          "name": "New Zealand",
-          "locale": [["en-nz", "English"]]
-        },
-        {
-          "name": "Philippines",
-          "locale": [["en-ph", "English"]]
-        },
-        {
-          "name": "Singapore",
-          "locale": [["en-sg", "English"]]
-        },
-        {
-          "name": "Sri Lanka",
-          "locale": [["en-lk", "English"]]
-        },
-        {
-          "name": "Taiwan (台灣)",
-          "locale": [["zh-tw", "Chinese (繁體中文)"]]
-        },
-        {
-          "name": "Thailand",
-          "locale": [["en-th", "English"]]
-        },
-        {
-          "name": "Vietnam",
-          "locale": [
-            ["en-vn", "English"],
-            ["vi-vn", "Vietnamese"]
-          ]
-        }
-      ]
-    },
-    {
-      "name": "Europe",
-      "key": "eu",
-      "countryList": [
-        {
-          "name": "Austria (Österreich)",
-          "locale": [["de-at", "German (Deutsche)"]]
-        },
-        {
-          "name": "Belgium/Luxembourg",
-          "locale": [["en-be", "English"]]
-        },
-        {
-          "name": "Bulgaria",
-          "locale": [["en-bg", "English"]]
-        },
-        {
-          "name": "Croatia",
-          "locale": [["en-hr", "English"]]
-        },
-        {
-          "name": "Cyprus",
-          "locale": [["en-cy", "English"]]
-        },
-        {
-          "name": "Czech Republic",
-          "locale": [["en-cz", "English"]]
-        },
-        {
-          "name": "Denmark",
-          "locale": [["en-dk", "English"]]
-        },
-        {
-          "name": "Estonia",
-          "locale": [["en-ee", "English"]]
-        },
-        {
-          "name": "Finland",
-          "locale": [["en-fi", "English"]]
-        },
-        {
-          "name": "France",
-          "locale": [["fr-fr", "French (Français)"]]
-        },
-        {
-          "name": "Germany (Deutschland)",
-          "locale": [["de-de", "German (Deutsche)"]]
-        },
-        {
-          "name": "Greece",
-          "locale": [["en-gr", "English"]]
-        },
-        {
-          "name": "Hungary",
-          "locale": [["en-hu", "English"]]
-        },
-        {
-          "name": "Ireland",
-          "locale": [["en-ie", "English"]]
-        },
-        {
-          "name": "Italy (Italia)",
-          "locale": [["it-it", "Italian (Italiano)"]]
-        },
-        {
-          "name": "Kazakhstan",
-          "locale": [["en-kz", "English"]]
-        },
-        {
-          "name": "Latvia",
-          "locale": [["en-lv", "English"]]
-        },
-        {
-          "name": "Lithuania",
-          "locale": [["en-lt", "English"]]
-        },
-        {
-          "name": "Netherlands",
-          "locale": [["en-nl", "English"]]
-        },
-        {
-          "name": "Norway",
-          "locale": [["en-no", "English"]]
-        },
-        {
-          "name": "Poland (Polska)",
-          "locale": [["pl-pl", "Polish (Polskie)"]]
-        },
-        {
-          "name": "Portugal",
-          "locale": [["en-pt", "English"]]
-        },
-        {
-          "name": "Romania",
-          "locale": [["en-ro", "English"]]
-        },
-        {
-          "name": "Russian (Россия)",
-          "locale": [["ru-ru", "Russian (русский)"]]
-        },
-        {
-          "name": "Serbia",
-          "locale": [["en-rs", "English"]]
-        },
-        {
-          "name": "Slovakia",
-          "locale": [["en-sk", "English"]]
-        },
-        {
-          "name": "Slovenia",
-          "locale": [["en-si", "English"]]
-        },
-        {
-          "name": "Spain (España)",
-          "locale": [["es-es", "Spanish (Español)"]]
-        },
-        {
-          "name": "Sweden",
-          "locale": [["en-se", "English"]]
-        },
-        {
-          "name": "Switzerland (Suisse)",
-          "locale": [["fr-ch", "French (Français)"]]
-        },
-        {
-          "name": "Switzerland (Schweiz)",
-          "locale": [["de-ch", "German (Deutsche)"]]
-        },
-        {
-          "name": "Turkey (Türkiye)",
-          "locale": [["tr-tr", "Turkish (Türk)"]]
-        },
-        {
-          "name": "Ukraine",
-          "locale": [["en-ua", "English"]]
-        },
-        {
-          "name": "United Kingdom",
-          "locale": [["en-gb", "English"]]
-        },
-        {
-          "name": "Uzbekistan",
-          "locale": [["en-uz", "English"]]
-        }
-      ]
-    },
-    {
-      "name": "Middle East and Africa",
-      "key": "mea",
-      "countryList": [
-        {
-          "name": "Afghanistan",
-          "locale": [["en-af", "English"]]
-        },
-        {
-          "name": "Algeria (Algérie)",
-          "locale": [["fr-dz", "French (Français)"]]
-        },
-        {
-          "name": "Angola",
-          "locale": [["pt-ao", "Portuguese (Português)"]]
-        },
-        {
-          "name": "Bahrain",
-          "locale": [["en-bh", "English"]]
-        },
-        {
-          "name": "Botswana",
-          "locale": [["en-bw", "English"]]
-        },
-        {
-          "name": "Burkina Faso",
-          "locale": [["fr-bf", "French (Français)"]]
-        },
-        {
-          "name": "Cameroon (Cameroun)",
-          "locale": [["fr-cm", "French (Français)"]]
-        },
-        {
-          "name": "Chad (Tchad)",
-          "locale": [["fr-td", "French (Français)"]]
-        },
-        {
-          "name": "Congo",
-          "locale": [["fr-cg", "French (Français)"]]
-        },
-        {
-          "name": "Congo, Democratic Republic of (République Démocratique du Congo)",
-          "locale": [["fr-cd", "French (Français)"]]
-        },
-        {
-          "name": "Egypt",
-          "locale": [["en-eg", "English"]]
-        },
-        {
-          "name": "Ethiopia",
-          "locale": [["en-et", "English"]]
-        },
-        {
-          "name": "Gabon",
-          "locale": [["fr-ga", "French (Français)"]]
-        },
-        {
-          "name": "Ghana",
-          "locale": [["en-gh", "English"]]
-        },
-        {
-          "name": "Iraq",
-          "locale": [["en-iq", "English"]]
-        },
-        {
-          "name": "Israel",
-          "locale": [["en-il", "English"]]
-        },
-        {
-          "name": "Ivory Coast (Côte d'Ivoire)",
-          "locale": [["fr-ci", "French (Français)"]]
-        },
-        {
-          "name": "Jordan",
-          "locale": [["en-jo", "English"]]
-        },
-        {
-          "name": "Kenya",
-          "locale": [["en-ke", "English"]]
-        },
-        {
-          "name": "Kuwait",
-          "locale": [["en-kw", "English"]]
-        },
-        {
-          "name": "Lebanon",
-          "locale": [["en-lb", "English"]]
-        },
-        {
-          "name": "Libya",
-          "locale": [["en-ly", "English"]]
-        },
-        {
-          "name": "Madagascar",
-          "locale": [["fr-mg", "French (Français)"]]
-        },
-        {
-          "name": "Malawi",
-          "locale": [["en-mw", "English"]]
-        },
-        {
-          "name": "Mauritius (Maurice)",
-          "locale": [["fr-mu", "French (Français)"]]
-        },
-        {
-          "name": "Morocco (Maroc)",
-          "locale": [["fr-ma", "French (Français)"]]
-        },
-        {
-          "name": "Mozambique",
-          "locale": [["pt-mz", "Portuguese (Português)"]]
-        },
-        {
-          "name": "Namibia",
-          "locale": [["en-na", "English"]]
-        },
-        {
-          "name": "Niger",
-          "locale": [["fr-ne", "French (Français)"]]
-        },
-        {
-          "name": "Nigeria",
-          "locale": [["en-ng", "English"]]
-        },
-        {
-          "name": "Oman",
-          "locale": [["en-om", "English"]]
-        },
-        {
-          "name": "Pakistan",
-          "locale": [["en-pk", "English"]]
-        },
-        {
-          "name": "Qatar",
-          "locale": [["en-qa", "English"]]
-        },
-        {
-          "name": "Saudi Arabia",
-          "locale": [["en-sa", "English"]]
-        },
-        {
-          "name": "Saudi Arabia (المملكة العربية السعودية)",
-          "locale": [["ar-sa", "Arabic (عربى)"]]
-        },
-        {
-          "name": "Senegal (Sénégal)",
-          "locale": [["fr-sn", "French (Français)"]]
-        },
-        {
-          "name": "Seychelles",
-          "locale": [["fr-sc", "French (Français)"]]
-        },
-        {
-          "name": "Sierra Leone",
-          "locale": [["en-sl", "English"]]
-        },
-        {
-          "name": "South Africa",
-          "locale": [["en-za", "English"]]
-        },
-        {
-          "name": "Tanzania, United Republic of",
-          "locale": [["en-tz", "English"]]
-        },
-        {
-          "name": "Tunisia (Tunisie)",
-          "locale": [["fr-tn", "French (Français)"]]
-        },
-        {
-          "name": "Uganda",
-          "locale": [["en-ug", "English"]]
-        },
-        {
-          "name": "United Arab Emirates",
-          "locale": [["en-ae", "English"]]
-        },
-        {
-          "name": "United Arab Emirates (الإمارات العربية المتحدة)",
-          "locale": [["ar-ae", "Arabic (عربى)"]]
-        },
-        {
-          "name": "Yemen",
-          "locale": [["en-ye", "English"]]
-        },
-        {
-          "name": "Zambia",
-          "locale": [["en-zm", "English"]]
-        },
-        {
-          "name": "Zimbabwe",
-          "locale": [["en-zw", "English"]]
-        }
-      ]
-    }
-  ],
-  "localeModal": {
-    "headerTitle": "Select geographic area",
-    "modalClose": "Close modal",
-    "searchLabel": "Search by location or language",
-    "searchClearText": "Clear search input",
-    "searchPlaceholder": "Search by location or language",
-    "availabilityText": "This page is available in the following locations and languages",
-    "unavailabilityText": "This page is unavailable in your preferred location or language"
-  }
-}
diff --git a/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js b/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js
deleted file mode 100644
index b51b5006dbe..00000000000
--- a/packages/react/src/components/LocaleModal/__stories__/LocaleModal.stories.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean } from '@storybook/addon-knobs';
-import inPercy from '@percy-io/in-percy';
-import localeData from '../__data__/locale-data.json';
-import LocaleModal from '../LocaleModal';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Locale modal',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Locale modal: Default',
-    },
-  },
-};
-
-const props = () => ({
-  useMockData: boolean('Use mock data', inPercy()),
-});
-
-export const Default = () => {
-  return (
-    <LocaleModal
-      isOpen
-      localeData={props().useMockData ? localeData : null}
-      localeDisplay={props().useMockData ? 'United States - English' : null}
-    />
-  );
-};
diff --git a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.data.js b/packages/react/src/components/LocaleModal/__tests__/LocaleModal.data.js
deleted file mode 100644
index 64df46020b7..00000000000
--- a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.data.js
+++ /dev/null
@@ -1,2023 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 const localeData = {
-  regionList: [
-    {
-      name: 'Americas',
-      key: 'am',
-      countryList: [
-        {
-          name: 'Anguilla',
-          locale: [['en-ai', 'English']],
-        },
-        {
-          name: 'Antigua and Barbuda',
-          locale: [['en-ag', 'English']],
-        },
-        {
-          name: 'Argentina',
-          locale: [['es-ar', 'Spanish']],
-        },
-        {
-          name: 'Aruba',
-          locale: [['en-aw', 'English']],
-        },
-        {
-          name: 'Bahamas',
-          locale: [['en-bs', 'English']],
-        },
-        {
-          name: 'Barbados',
-          locale: [['en-bb', 'English']],
-        },
-        {
-          name: 'Bermuda',
-          locale: [['en-bm', 'English']],
-        },
-        {
-          name: 'Bolivia',
-          locale: [['es-bo', 'Spanish']],
-        },
-        {
-          name: 'Brazil',
-          locale: [['pt-br', 'Portuguese']],
-        },
-        {
-          name: 'Canada',
-          locale: [
-            ['en-ca', 'English'],
-            ['fr-ca', 'French'],
-          ],
-        },
-        {
-          name: 'Cayman Islands',
-          locale: [['en-ky', 'English']],
-        },
-        {
-          name: 'Chile',
-          locale: [['es-cl', 'Spanish']],
-        },
-        {
-          name: 'Colombia',
-          locale: [['es-co', 'Spanish']],
-        },
-        {
-          name: 'Costa Rica',
-          locale: [['es-cr', 'Spanish']],
-        },
-        {
-          name: 'Curacao',
-          locale: [['en-cw', 'English']],
-        },
-        {
-          name: 'Dominica',
-          locale: [['en-dm', 'English']],
-        },
-        {
-          name: 'Ecuador',
-          locale: [['es-ec', 'Spanish']],
-        },
-        {
-          name: 'Grenada',
-          locale: [['en-gd', 'English']],
-        },
-        {
-          name: 'Guyana',
-          locale: [['en-gy', 'English']],
-        },
-        {
-          name: 'Jamaica',
-          locale: [['en-jm', 'English']],
-        },
-        {
-          name: 'Mexico',
-          locale: [['es-mx', 'Spanish']],
-        },
-        {
-          name: 'Montserrat',
-          locale: [['en-ms', 'English']],
-        },
-        {
-          name: 'Paraguay',
-          locale: [['es-py', 'Spanish']],
-        },
-        {
-          name: 'Peru',
-          locale: [['es-pe', 'Spanish']],
-        },
-        {
-          name: 'Saint Kitts and Nevis',
-          locale: [['en-kn', 'English']],
-        },
-        {
-          name: 'Saint Lucia',
-          locale: [['en-lc', 'English']],
-        },
-        {
-          name: 'Saint Vincent and the Grenadines',
-          locale: [['en-vc', 'English']],
-        },
-        {
-          name: 'Suriname',
-          locale: [['en-sr', 'English']],
-        },
-        {
-          name: 'Trinidad and Tobago',
-          locale: [['en-tt', 'English']],
-        },
-        {
-          name: 'Turks and Caicos Islands',
-          locale: [['en-tc', 'English']],
-        },
-        {
-          name: 'United States',
-          locale: [['en-us', 'English']],
-        },
-        {
-          name: 'Uruguay',
-          locale: [['es-uy', 'Spanish']],
-        },
-        {
-          name: 'Venezuela',
-          locale: [['es-ve', 'Spanish']],
-        },
-        {
-          name: 'Virgin Islands, British',
-          locale: [['en-vg', 'English']],
-        },
-      ],
-      countries: [
-        {
-          name: 'Anguilla',
-          locale: [['en-ai', 'English']],
-        },
-        {
-          name: 'Antigua and Barbuda',
-          locale: [['en-ag', 'English']],
-        },
-        {
-          name: 'Argentina',
-          locale: [['es-ar', 'Spanish']],
-        },
-        {
-          name: 'Aruba',
-          locale: [['en-aw', 'English']],
-        },
-        {
-          name: 'Bahamas',
-          locale: [['en-bs', 'English']],
-        },
-        {
-          name: 'Barbados',
-          locale: [['en-bb', 'English']],
-        },
-        {
-          name: 'Bermuda',
-          locale: [['en-bm', 'English']],
-        },
-        {
-          name: 'Bolivia',
-          locale: [['es-bo', 'Spanish']],
-        },
-        {
-          name: 'Brazil',
-          locale: [['pt-br', 'Portuguese']],
-        },
-        {
-          name: 'Canada',
-          locale: [
-            ['en-ca', 'English'],
-            ['fr-ca', 'French'],
-          ],
-        },
-        {
-          name: 'Cayman Islands',
-          locale: [['en-ky', 'English']],
-        },
-        {
-          name: 'Chile',
-          locale: [['es-cl', 'Spanish']],
-        },
-        {
-          name: 'Colombia',
-          locale: [['es-co', 'Spanish']],
-        },
-        {
-          name: 'Costa Rica',
-          locale: [['es-cr', 'Spanish']],
-        },
-        {
-          name: 'Curacao',
-          locale: [['en-cw', 'English']],
-        },
-        {
-          name: 'Dominica',
-          locale: [['en-dm', 'English']],
-        },
-        {
-          name: 'Ecuador',
-          locale: [['es-ec', 'Spanish']],
-        },
-        {
-          name: 'Grenada',
-          locale: [['en-gd', 'English']],
-        },
-        {
-          name: 'Guyana',
-          locale: [['en-gy', 'English']],
-        },
-        {
-          name: 'Jamaica',
-          locale: [['en-jm', 'English']],
-        },
-        {
-          name: 'Mexico',
-          locale: [['es-mx', 'Spanish']],
-        },
-        {
-          name: 'Montserrat',
-          locale: [['en-ms', 'English']],
-        },
-        {
-          name: 'Paraguay',
-          locale: [['es-py', 'Spanish']],
-        },
-        {
-          name: 'Peru',
-          locale: [['es-pe', 'Spanish']],
-        },
-        {
-          name: 'Saint Kitts and Nevis',
-          locale: [['en-kn', 'English']],
-        },
-        {
-          name: 'Saint Lucia',
-          locale: [['en-lc', 'English']],
-        },
-        {
-          name: 'Saint Vincent and the Grenadines',
-          locale: [['en-vc', 'English']],
-        },
-        {
-          name: 'Suriname',
-          locale: [['en-sr', 'English']],
-        },
-        {
-          name: 'Trinidad and Tobago',
-          locale: [['en-tt', 'English']],
-        },
-        {
-          name: 'Turks and Caicos Islands',
-          locale: [['en-tc', 'English']],
-        },
-        {
-          name: 'United States',
-          locale: [['en-us', 'English']],
-        },
-        {
-          name: 'Uruguay',
-          locale: [['es-uy', 'Spanish']],
-        },
-        {
-          name: 'Venezuela',
-          locale: [['es-ve', 'Spanish']],
-        },
-        {
-          name: 'Virgin Islands, British',
-          locale: [['en-vg', 'English']],
-        },
-      ],
-    },
-    {
-      name: 'Asia Pacific',
-      key: 'ap',
-      countryList: [
-        {
-          name: 'Australia',
-          locale: [['en-au', 'English']],
-        },
-        {
-          name: 'Bangladesh',
-          locale: [['en-bd', 'English']],
-        },
-        {
-          name: 'Brunei Darussalam',
-          locale: [['en-bn', 'English']],
-        },
-        {
-          name: 'Cambodia',
-          locale: [['en-kh', 'English']],
-        },
-        {
-          name: 'China',
-          locale: [['zh-cn', 'Chinese (Simplified)']],
-        },
-        {
-          name: 'Hong Kong S.A.R. of China',
-          locale: [['en-hk', 'English']],
-        },
-        {
-          name: 'India',
-          locale: [['en-in', 'English']],
-        },
-        {
-          name: 'Indonesia',
-          locale: [['en-id', 'English']],
-        },
-        {
-          name: 'Japan',
-          locale: [['ja-jp', 'Japanese']],
-        },
-        {
-          name: 'Korea, Republic of',
-          locale: [['ko-kr', 'Korean']],
-        },
-        {
-          name: 'Malaysia',
-          locale: [['en-my', 'English']],
-        },
-        {
-          name: 'New Zealand',
-          locale: [['en-nz', 'English']],
-        },
-        {
-          name: 'Philippines',
-          locale: [['en-ph', 'English']],
-        },
-        {
-          name: 'Singapore',
-          locale: [['en-sg', 'English']],
-        },
-        {
-          name: 'Sri Lanka',
-          locale: [['en-lk', 'English']],
-        },
-        {
-          name: 'Taiwan',
-          locale: [['zh-tw', 'Chinese (Traditional)']],
-        },
-        {
-          name: 'Thailand',
-          locale: [['en-th', 'English']],
-        },
-        {
-          name: 'Vietnam',
-          locale: [
-            ['en-vn', 'English'],
-            ['vi-vn', 'Vietnamese'],
-          ],
-        },
-      ],
-      countries: [
-        {
-          name: 'Australia',
-          locale: [['en-au', 'English']],
-        },
-        {
-          name: 'Bangladesh',
-          locale: [['en-bd', 'English']],
-        },
-        {
-          name: 'Brunei Darussalam',
-          locale: [['en-bn', 'English']],
-        },
-        {
-          name: 'Cambodia',
-          locale: [['en-kh', 'English']],
-        },
-        {
-          name: 'China',
-          locale: [['zh-cn', 'Chinese (Simplified)']],
-        },
-        {
-          name: 'Hong Kong S.A.R. of China',
-          locale: [['en-hk', 'English']],
-        },
-        {
-          name: 'India',
-          locale: [['en-in', 'English']],
-        },
-        {
-          name: 'Indonesia',
-          locale: [['en-id', 'English']],
-        },
-        {
-          name: 'Japan',
-          locale: [['ja-jp', 'Japanese']],
-        },
-        {
-          name: 'Korea, Republic of',
-          locale: [['ko-kr', 'Korean']],
-        },
-        {
-          name: 'Malaysia',
-          locale: [['en-my', 'English']],
-        },
-        {
-          name: 'New Zealand',
-          locale: [['en-nz', 'English']],
-        },
-        {
-          name: 'Philippines',
-          locale: [['en-ph', 'English']],
-        },
-        {
-          name: 'Singapore',
-          locale: [['en-sg', 'English']],
-        },
-        {
-          name: 'Sri Lanka',
-          locale: [['en-lk', 'English']],
-        },
-        {
-          name: 'Taiwan',
-          locale: [['zh-tw', 'Chinese (Traditional)']],
-        },
-        {
-          name: 'Thailand',
-          locale: [['en-th', 'English']],
-        },
-        {
-          name: 'Vietnam',
-          locale: [
-            ['en-vn', 'English'],
-            ['vi-vn', 'Vietnamese'],
-          ],
-        },
-      ],
-    },
-    {
-      name: 'Europe',
-      key: 'eu',
-      countryList: [
-        {
-          name: 'Austria',
-          locale: [['de-at', 'German']],
-        },
-        {
-          name: 'Belgium/Luxembourg',
-          locale: [
-            ['nl-be', 'Dutch'],
-            ['en-be', 'English'],
-            ['fr-be', 'French'],
-          ],
-        },
-        {
-          name: 'Bulgaria',
-          locale: [['bg-bg', 'Bulgarian']],
-        },
-        {
-          name: 'Bulgaria',
-          locale: [['en-bg', 'English']],
-        },
-        {
-          name: 'Croatia',
-          locale: [['hr-hr', 'Croatian']],
-        },
-        {
-          name: 'Croatia',
-          locale: [['en-hr', 'English']],
-        },
-        {
-          name: 'Cyprus',
-          locale: [['en-cy', 'English']],
-        },
-        {
-          name: 'Czech Republic',
-          locale: [['en-cz', 'English']],
-        },
-        {
-          name: 'Czech Republic',
-          locale: [['cs-cz', 'Czech']],
-        },
-        {
-          name: 'Denmark',
-          locale: [['en-dk', 'English']],
-        },
-        {
-          name: 'Denmark',
-          locale: [['da-dk', 'Danish']],
-        },
-        {
-          name: 'Estonia',
-          locale: [['et-ee', 'Estonian']],
-        },
-        {
-          name: 'Estonia',
-          locale: [['en-ee', 'English']],
-        },
-        {
-          name: 'Finland',
-          locale: [['fi-fi', 'Finnish']],
-        },
-        {
-          name: 'Finland',
-          locale: [['en-fi', 'English']],
-        },
-        {
-          name: 'France',
-          locale: [['fr-fr', 'French']],
-        },
-        {
-          name: 'Germany',
-          locale: [['de-de', 'German']],
-        },
-        {
-          name: 'Greece',
-          locale: [['el-gr', 'Greek']],
-        },
-        {
-          name: 'Greece',
-          locale: [['en-gr', 'English']],
-        },
-        {
-          name: 'Hungary',
-          locale: [['en-hu', 'English']],
-        },
-        {
-          name: 'Hungary',
-          locale: [['hu-hu', 'Hungarian']],
-        },
-        {
-          name: 'Ireland',
-          locale: [['en-ie', 'English']],
-        },
-        {
-          name: 'Italy',
-          locale: [['it-it', 'Italian']],
-        },
-        {
-          name: 'Kazakhstan',
-          locale: [['kk-kz', 'Kazakh']],
-        },
-        {
-          name: 'Kazakhstan',
-          locale: [['en-kz', 'English']],
-        },
-        {
-          name: 'Latvia',
-          locale: [['lv-lv', 'Latvian']],
-        },
-        {
-          name: 'Latvia',
-          locale: [['en-lv', 'English']],
-        },
-        {
-          name: 'Lithuania',
-          locale: [['en-lt', 'English']],
-        },
-        {
-          name: 'Lithuania',
-          locale: [['lt-lt', 'Lithuanian']],
-        },
-        {
-          name: 'Netherlands',
-          locale: [['nl-nl', 'Dutch']],
-        },
-        {
-          name: 'Netherlands',
-          locale: [['en-nl', 'English']],
-        },
-        {
-          name: 'Norway',
-          locale: [['no-no', 'Norwegian']],
-        },
-        {
-          name: 'Norway',
-          locale: [['en-no', 'English']],
-        },
-        {
-          name: 'Poland',
-          locale: [['pl-pl', 'Polish']],
-        },
-        {
-          name: 'Portugal',
-          locale: [['pt-pt', 'Portuguese']],
-        },
-        {
-          name: 'Portugal',
-          locale: [['en-pt', 'English']],
-        },
-        {
-          name: 'Romania',
-          locale: [['ro-ro', 'Romanian']],
-        },
-        {
-          name: 'Romania',
-          locale: [['en-ro', 'English']],
-        },
-        {
-          name: 'Russian Federation',
-          locale: [['ru-ru', 'Russian']],
-        },
-        {
-          name: 'Serbia',
-          locale: [['sr-rs', 'Serbian']],
-        },
-        {
-          name: 'Serbia',
-          locale: [['en-rs', 'English']],
-        },
-        {
-          name: 'Slovakia',
-          locale: [['sk-sk', 'Slovak']],
-        },
-        {
-          name: 'Slovakia',
-          locale: [['en-sk', 'English']],
-        },
-        {
-          name: 'Slovenia',
-          locale: [['en-si', 'English']],
-        },
-        {
-          name: 'Slovenia',
-          locale: [['sl-si', 'Slovenian']],
-        },
-        {
-          name: 'Spain',
-          locale: [['es-es', 'Spanish']],
-        },
-        {
-          name: 'Sweden',
-          locale: [['en-se', 'English']],
-        },
-        {
-          name: 'Sweden',
-          locale: [['sv-se', 'Swedish']],
-        },
-        {
-          name: 'Switzerland',
-          locale: [
-            ['fr-ch', 'French'],
-            ['de-ch', 'German'],
-          ],
-        },
-        {
-          name: 'Turkey',
-          locale: [['tr-tr', 'Turkish']],
-        },
-        {
-          name: 'Ukraine',
-          locale: [['uk-ua', 'Ukrainian']],
-        },
-        {
-          name: 'Ukraine',
-          locale: [['en-ua', 'English']],
-        },
-        {
-          name: 'United Kingdom',
-          locale: [['en-gb', 'English']],
-        },
-        {
-          name: 'Uzbekistan',
-          locale: [['en-uz', 'English']],
-        },
-        {
-          name: 'Uzbekistan',
-          locale: [['uz-uz', 'Uzbek']],
-        },
-      ],
-      countries: [
-        {
-          name: 'Austria',
-          locale: [['de-at', 'German']],
-        },
-        {
-          name: 'Belgium/Luxembourg',
-          locale: [
-            ['nl-be', 'Dutch'],
-            ['en-be', 'English'],
-            ['fr-be', 'French'],
-          ],
-        },
-        {
-          name: 'Bulgaria',
-          locale: [['bg-bg', 'Bulgarian']],
-        },
-        {
-          name: 'Bulgaria',
-          locale: [['en-bg', 'English']],
-        },
-        {
-          name: 'Croatia',
-          locale: [['hr-hr', 'Croatian']],
-        },
-        {
-          name: 'Croatia',
-          locale: [['en-hr', 'English']],
-        },
-        {
-          name: 'Cyprus',
-          locale: [['en-cy', 'English']],
-        },
-        {
-          name: 'Czech Republic',
-          locale: [['en-cz', 'English']],
-        },
-        {
-          name: 'Czech Republic',
-          locale: [['cs-cz', 'Czech']],
-        },
-        {
-          name: 'Denmark',
-          locale: [['en-dk', 'English']],
-        },
-        {
-          name: 'Denmark',
-          locale: [['da-dk', 'Danish']],
-        },
-        {
-          name: 'Estonia',
-          locale: [['et-ee', 'Estonian']],
-        },
-        {
-          name: 'Estonia',
-          locale: [['en-ee', 'English']],
-        },
-        {
-          name: 'Finland',
-          locale: [['fi-fi', 'Finnish']],
-        },
-        {
-          name: 'Finland',
-          locale: [['en-fi', 'English']],
-        },
-        {
-          name: 'France',
-          locale: [['fr-fr', 'French']],
-        },
-        {
-          name: 'Germany',
-          locale: [['de-de', 'German']],
-        },
-        {
-          name: 'Greece',
-          locale: [['el-gr', 'Greek']],
-        },
-        {
-          name: 'Greece',
-          locale: [['en-gr', 'English']],
-        },
-        {
-          name: 'Hungary',
-          locale: [['en-hu', 'English']],
-        },
-        {
-          name: 'Hungary',
-          locale: [['hu-hu', 'Hungarian']],
-        },
-        {
-          name: 'Ireland',
-          locale: [['en-ie', 'English']],
-        },
-        {
-          name: 'Italy',
-          locale: [['it-it', 'Italian']],
-        },
-        {
-          name: 'Kazakhstan',
-          locale: [['kk-kz', 'Kazakh']],
-        },
-        {
-          name: 'Kazakhstan',
-          locale: [['en-kz', 'English']],
-        },
-        {
-          name: 'Latvia',
-          locale: [['lv-lv', 'Latvian']],
-        },
-        {
-          name: 'Latvia',
-          locale: [['en-lv', 'English']],
-        },
-        {
-          name: 'Lithuania',
-          locale: [['en-lt', 'English']],
-        },
-        {
-          name: 'Lithuania',
-          locale: [['lt-lt', 'Lithuanian']],
-        },
-        {
-          name: 'Netherlands',
-          locale: [['nl-nl', 'Dutch']],
-        },
-        {
-          name: 'Netherlands',
-          locale: [['en-nl', 'English']],
-        },
-        {
-          name: 'Norway',
-          locale: [['no-no', 'Norwegian']],
-        },
-        {
-          name: 'Norway',
-          locale: [['en-no', 'English']],
-        },
-        {
-          name: 'Poland',
-          locale: [['pl-pl', 'Polish']],
-        },
-        {
-          name: 'Portugal',
-          locale: [['pt-pt', 'Portuguese']],
-        },
-        {
-          name: 'Portugal',
-          locale: [['en-pt', 'English']],
-        },
-        {
-          name: 'Romania',
-          locale: [['ro-ro', 'Romanian']],
-        },
-        {
-          name: 'Romania',
-          locale: [['en-ro', 'English']],
-        },
-        {
-          name: 'Russian Federation',
-          locale: [['ru-ru', 'Russian']],
-        },
-        {
-          name: 'Serbia',
-          locale: [['sr-rs', 'Serbian']],
-        },
-        {
-          name: 'Serbia',
-          locale: [['en-rs', 'English']],
-        },
-        {
-          name: 'Slovakia',
-          locale: [['sk-sk', 'Slovak']],
-        },
-        {
-          name: 'Slovakia',
-          locale: [['en-sk', 'English']],
-        },
-        {
-          name: 'Slovenia',
-          locale: [['en-si', 'English']],
-        },
-        {
-          name: 'Slovenia',
-          locale: [['sl-si', 'Slovenian']],
-        },
-        {
-          name: 'Spain',
-          locale: [['es-es', 'Spanish']],
-        },
-        {
-          name: 'Sweden',
-          locale: [['en-se', 'English']],
-        },
-        {
-          name: 'Sweden',
-          locale: [['sv-se', 'Swedish']],
-        },
-        {
-          name: 'Switzerland',
-          locale: [
-            ['fr-ch', 'French'],
-            ['de-ch', 'German'],
-          ],
-        },
-        {
-          name: 'Turkey',
-          locale: [['tr-tr', 'Turkish']],
-        },
-        {
-          name: 'Ukraine',
-          locale: [['uk-ua', 'Ukrainian']],
-        },
-        {
-          name: 'Ukraine',
-          locale: [['en-ua', 'English']],
-        },
-        {
-          name: 'United Kingdom',
-          locale: [['en-gb', 'English']],
-        },
-        {
-          name: 'Uzbekistan',
-          locale: [['en-uz', 'English']],
-        },
-        {
-          name: 'Uzbekistan',
-          locale: [['uz-uz', 'Uzbek']],
-        },
-      ],
-    },
-    {
-      name: 'Middle East and Africa',
-      key: 'mea',
-      countryList: [
-        {
-          name: 'Afghanistan',
-          locale: [['en-af', 'English']],
-        },
-        {
-          name: 'Algeria',
-          locale: [['fr-dz', 'French']],
-        },
-        {
-          name: 'Angola',
-          locale: [['pt-ao', 'Portuguese']],
-        },
-        {
-          name: 'Bahrain',
-          locale: [['en-bh', 'English']],
-        },
-        {
-          name: 'Botswana',
-          locale: [['en-bw', 'English']],
-        },
-        {
-          name: 'Burkina Faso',
-          locale: [['fr-bf', 'French']],
-        },
-        {
-          name: 'Cameroon',
-          locale: [
-            ['en-cm', 'English'],
-            ['fr-cm', 'French'],
-          ],
-        },
-        {
-          name: 'Chad',
-          locale: [['fr-td', 'French']],
-        },
-        {
-          name: 'Congo',
-          locale: [['fr-cg', 'French']],
-        },
-        {
-          name: 'Congo, The Democratic Republic of the',
-          locale: [['fr-cd', 'French']],
-        },
-        {
-          name: 'Egypt',
-          locale: [['en-eg', 'English']],
-        },
-        {
-          name: 'Ethiopia',
-          locale: [['en-et', 'English']],
-        },
-        {
-          name: 'Gabon',
-          locale: [['fr-ga', 'French']],
-        },
-        {
-          name: 'Ghana',
-          locale: [['en-gh', 'English']],
-        },
-        {
-          name: 'Iraq',
-          locale: [['en-iq', 'English']],
-        },
-        {
-          name: 'Israel',
-          locale: [['he-il', 'Hebrew']],
-        },
-        {
-          name: 'Israel',
-          locale: [['en-il', 'English']],
-        },
-        {
-          name: 'Ivory Coast',
-          locale: [['fr-ci', 'French']],
-        },
-        {
-          name: 'Jordan',
-          locale: [['en-jo', 'English']],
-        },
-        {
-          name: 'Kenya',
-          locale: [['en-ke', 'English']],
-        },
-        {
-          name: 'Kuwait',
-          locale: [['en-kw', 'English']],
-        },
-        {
-          name: 'Lebanon',
-          locale: [['en-lb', 'English']],
-        },
-        {
-          name: 'Libya',
-          locale: [['en-ly', 'English']],
-        },
-        {
-          name: 'Madagascar',
-          locale: [['fr-mg', 'French']],
-        },
-        {
-          name: 'Malawi',
-          locale: [['en-mw', 'English']],
-        },
-        {
-          name: 'Mauritius',
-          locale: [
-            ['en-mu', 'English'],
-            ['fr-mu', 'French'],
-          ],
-        },
-        {
-          name: 'Morocco',
-          locale: [['fr-ma', 'French']],
-        },
-        {
-          name: 'Mozambique',
-          locale: [['pt-mz', 'Portuguese']],
-        },
-        {
-          name: 'Namibia',
-          locale: [['en-na', 'English']],
-        },
-        {
-          name: 'Nepal',
-          locale: [['en-np', 'English']],
-        },
-        {
-          name: 'Niger',
-          locale: [['fr-ne', 'French']],
-        },
-        {
-          name: 'Nigeria',
-          locale: [['en-ng', 'English']],
-        },
-        {
-          name: 'Oman',
-          locale: [['en-om', 'English']],
-        },
-        {
-          name: 'Pakistan',
-          locale: [['en-pk', 'English']],
-        },
-        {
-          name: 'Qatar',
-          locale: [['en-qa', 'English']],
-        },
-        {
-          name: 'Saudi Arabia',
-          locale: [['en-sa', 'English']],
-        },
-        {
-          name: 'Saudi Arabia',
-          locale: [['ar-sa', 'Arabic']],
-        },
-        {
-          name: 'Senegal',
-          locale: [['fr-sn', 'French']],
-        },
-        {
-          name: 'Seychelles',
-          locale: [['fr-sc', 'French']],
-        },
-        {
-          name: 'Sierra Leone',
-          locale: [['en-sl', 'English']],
-        },
-        {
-          name: 'South Africa',
-          locale: [['en-za', 'English']],
-        },
-        {
-          name: 'Tanzania, United Republic of',
-          locale: [['en-tz', 'English']],
-        },
-        {
-          name: 'Tunisia',
-          locale: [['fr-tn', 'French']],
-        },
-        {
-          name: 'Uganda',
-          locale: [['en-ug', 'English']],
-        },
-        {
-          name: 'United Arab Emirates',
-          locale: [['en-ae', 'English']],
-        },
-        {
-          name: 'United Arab Emirates',
-          locale: [['ar-ae', 'Arabic']],
-        },
-        {
-          name: 'Yemen',
-          locale: [['en-ye', 'English']],
-        },
-        {
-          name: 'Zambia',
-          locale: [['en-zm', 'English']],
-        },
-        {
-          name: 'Zimbabwe',
-          locale: [['en-zw', 'English']],
-        },
-      ],
-      countries: [
-        {
-          name: 'Afghanistan',
-          locale: [['en-af', 'English']],
-        },
-        {
-          name: 'Algeria',
-          locale: [['fr-dz', 'French']],
-        },
-        {
-          name: 'Angola',
-          locale: [['pt-ao', 'Portuguese']],
-        },
-        {
-          name: 'Bahrain',
-          locale: [['en-bh', 'English']],
-        },
-        {
-          name: 'Botswana',
-          locale: [['en-bw', 'English']],
-        },
-        {
-          name: 'Burkina Faso',
-          locale: [['fr-bf', 'French']],
-        },
-        {
-          name: 'Cameroon',
-          locale: [
-            ['en-cm', 'English'],
-            ['fr-cm', 'French'],
-          ],
-        },
-        {
-          name: 'Chad',
-          locale: [['fr-td', 'French']],
-        },
-        {
-          name: 'Congo',
-          locale: [['fr-cg', 'French']],
-        },
-        {
-          name: 'Congo, The Democratic Republic of the',
-          locale: [['fr-cd', 'French']],
-        },
-        {
-          name: 'Egypt',
-          locale: [['en-eg', 'English']],
-        },
-        {
-          name: 'Ethiopia',
-          locale: [['en-et', 'English']],
-        },
-        {
-          name: 'Gabon',
-          locale: [['fr-ga', 'French']],
-        },
-        {
-          name: 'Ghana',
-          locale: [['en-gh', 'English']],
-        },
-        {
-          name: 'Iraq',
-          locale: [['en-iq', 'English']],
-        },
-        {
-          name: 'Israel',
-          locale: [['he-il', 'Hebrew']],
-        },
-        {
-          name: 'Israel',
-          locale: [['en-il', 'English']],
-        },
-        {
-          name: 'Ivory Coast',
-          locale: [['fr-ci', 'French']],
-        },
-        {
-          name: 'Jordan',
-          locale: [['en-jo', 'English']],
-        },
-        {
-          name: 'Kenya',
-          locale: [['en-ke', 'English']],
-        },
-        {
-          name: 'Kuwait',
-          locale: [['en-kw', 'English']],
-        },
-        {
-          name: 'Lebanon',
-          locale: [['en-lb', 'English']],
-        },
-        {
-          name: 'Libya',
-          locale: [['en-ly', 'English']],
-        },
-        {
-          name: 'Madagascar',
-          locale: [['fr-mg', 'French']],
-        },
-        {
-          name: 'Malawi',
-          locale: [['en-mw', 'English']],
-        },
-        {
-          name: 'Mauritius',
-          locale: [
-            ['en-mu', 'English'],
-            ['fr-mu', 'French'],
-          ],
-        },
-        {
-          name: 'Morocco',
-          locale: [['fr-ma', 'French']],
-        },
-        {
-          name: 'Mozambique',
-          locale: [['pt-mz', 'Portuguese']],
-        },
-        {
-          name: 'Namibia',
-          locale: [['en-na', 'English']],
-        },
-        {
-          name: 'Nepal',
-          locale: [['en-np', 'English']],
-        },
-        {
-          name: 'Niger',
-          locale: [['fr-ne', 'French']],
-        },
-        {
-          name: 'Nigeria',
-          locale: [['en-ng', 'English']],
-        },
-        {
-          name: 'Oman',
-          locale: [['en-om', 'English']],
-        },
-        {
-          name: 'Pakistan',
-          locale: [['en-pk', 'English']],
-        },
-        {
-          name: 'Qatar',
-          locale: [['en-qa', 'English']],
-        },
-        {
-          name: 'Saudi Arabia',
-          locale: [['en-sa', 'English']],
-        },
-        {
-          name: 'Saudi Arabia',
-          locale: [['ar-sa', 'Arabic']],
-        },
-        {
-          name: 'Senegal',
-          locale: [['fr-sn', 'French']],
-        },
-        {
-          name: 'Seychelles',
-          locale: [['fr-sc', 'French']],
-        },
-        {
-          name: 'Sierra Leone',
-          locale: [['en-sl', 'English']],
-        },
-        {
-          name: 'South Africa',
-          locale: [['en-za', 'English']],
-        },
-        {
-          name: 'Tanzania, United Republic of',
-          locale: [['en-tz', 'English']],
-        },
-        {
-          name: 'Tunisia',
-          locale: [['fr-tn', 'French']],
-        },
-        {
-          name: 'Uganda',
-          locale: [['en-ug', 'English']],
-        },
-        {
-          name: 'United Arab Emirates',
-          locale: [['en-ae', 'English']],
-        },
-        {
-          name: 'United Arab Emirates',
-          locale: [['ar-ae', 'Arabic']],
-        },
-        {
-          name: 'Yemen',
-          locale: [['en-ye', 'English']],
-        },
-        {
-          name: 'Zambia',
-          locale: [['en-zm', 'English']],
-        },
-        {
-          name: 'Zimbabwe',
-          locale: [['en-zw', 'English']],
-        },
-      ],
-    },
-  ],
-  localeModal: {
-    headerTitle: 'Select geographic area',
-    modalClose: 'Close modal',
-    searchLabel: 'Search by location or language',
-    searchClearText: 'Clear search input',
-    searchPlaceholder: 'Search by location or language',
-    availabilityText:
-      'This page is available in the following locations and languages',
-    unavailabilityText:
-      'This page is unavailable in your preferred location or language',
-  },
-};
-
-export const getList = {
-  regionList: [
-    {
-      name: 'Americas',
-      key: 'am',
-      countryList: [
-        {
-          name: 'Anguilla',
-          locale: [['en-ai', 'English']],
-        },
-        {
-          name: 'Antigua and Barbuda',
-          locale: [['en-ag', 'English']],
-        },
-        {
-          name: 'Argentina',
-          locale: [['es-ar', 'Spanish']],
-        },
-        {
-          name: 'Aruba',
-          locale: [['en-aw', 'English']],
-        },
-        {
-          name: 'Bahamas',
-          locale: [['en-bs', 'English']],
-        },
-        {
-          name: 'Barbados',
-          locale: [['en-bb', 'English']],
-        },
-        {
-          name: 'Bermuda',
-          locale: [['en-bm', 'English']],
-        },
-        {
-          name: 'Bolivia',
-          locale: [['es-bo', 'Spanish']],
-        },
-        {
-          name: 'Brazil',
-          locale: [['pt-br', 'Portuguese']],
-        },
-        {
-          name: 'Canada',
-          locale: [
-            ['en-ca', 'English'],
-            ['fr-ca', 'French'],
-          ],
-        },
-        {
-          name: 'Cayman Islands',
-          locale: [['en-ky', 'English']],
-        },
-        {
-          name: 'Chile',
-          locale: [['es-cl', 'Spanish']],
-        },
-        {
-          name: 'Colombia',
-          locale: [['es-co', 'Spanish']],
-        },
-        {
-          name: 'Costa Rica',
-          locale: [['es-cr', 'Spanish']],
-        },
-        {
-          name: 'Curacao',
-          locale: [['en-cw', 'English']],
-        },
-        {
-          name: 'Dominica',
-          locale: [['en-dm', 'English']],
-        },
-        {
-          name: 'Ecuador',
-          locale: [['es-ec', 'Spanish']],
-        },
-        {
-          name: 'Grenada',
-          locale: [['en-gd', 'English']],
-        },
-        {
-          name: 'Guyana',
-          locale: [['en-gy', 'English']],
-        },
-        {
-          name: 'Jamaica',
-          locale: [['en-jm', 'English']],
-        },
-        {
-          name: 'Mexico',
-          locale: [['es-mx', 'Spanish']],
-        },
-        {
-          name: 'Montserrat',
-          locale: [['en-ms', 'English']],
-        },
-        {
-          name: 'Paraguay',
-          locale: [['es-py', 'Spanish']],
-        },
-        {
-          name: 'Peru',
-          locale: [['es-pe', 'Spanish']],
-        },
-        {
-          name: 'Saint Kitts and Nevis',
-          locale: [['en-kn', 'English']],
-        },
-        {
-          name: 'Saint Lucia',
-          locale: [['en-lc', 'English']],
-        },
-        {
-          name: 'Saint Vincent and the Grenadines',
-          locale: [['en-vc', 'English']],
-        },
-        {
-          name: 'Suriname',
-          locale: [['en-sr', 'English']],
-        },
-        {
-          name: 'Trinidad and Tobago',
-          locale: [['en-tt', 'English']],
-        },
-        {
-          name: 'Turks and Caicos Islands',
-          locale: [['en-tc', 'English']],
-        },
-        {
-          name: 'United States',
-          locale: [['en-us', 'English']],
-        },
-        {
-          name: 'Uruguay',
-          locale: [['es-uy', 'Spanish']],
-        },
-        {
-          name: 'Venezuela',
-          locale: [['es-ve', 'Spanish']],
-        },
-        {
-          name: 'Virgin Islands, British',
-          locale: [['en-vg', 'English']],
-        },
-      ],
-    },
-    {
-      name: 'Asia Pacific',
-      key: 'ap',
-      countryList: [
-        {
-          name: 'Australia',
-          locale: [['en-au', 'English']],
-        },
-        {
-          name: 'Bangladesh',
-          locale: [['en-bd', 'English']],
-        },
-        {
-          name: 'Brunei Darussalam',
-          locale: [['en-bn', 'English']],
-        },
-        {
-          name: 'Cambodia',
-          locale: [['en-kh', 'English']],
-        },
-        {
-          name: 'China',
-          locale: [['zh-cn', 'Chinese (Simplified)']],
-        },
-        {
-          name: 'Hong Kong S.A.R. of China',
-          locale: [['en-hk', 'English']],
-        },
-        {
-          name: 'India',
-          locale: [['en-in', 'English']],
-        },
-        {
-          name: 'Indonesia',
-          locale: [['en-id', 'English']],
-        },
-        {
-          name: 'Japan',
-          locale: [['ja-jp', 'Japanese']],
-        },
-        {
-          name: 'Korea, Republic of',
-          locale: [['ko-kr', 'Korean']],
-        },
-        {
-          name: 'Malaysia',
-          locale: [['en-my', 'English']],
-        },
-        {
-          name: 'New Zealand',
-          locale: [['en-nz', 'English']],
-        },
-        {
-          name: 'Philippines',
-          locale: [['en-ph', 'English']],
-        },
-        {
-          name: 'Singapore',
-          locale: [['en-sg', 'English']],
-        },
-        {
-          name: 'Sri Lanka',
-          locale: [['en-lk', 'English']],
-        },
-        {
-          name: 'Taiwan',
-          locale: [['zh-tw', 'Chinese (Traditional)']],
-        },
-        {
-          name: 'Thailand',
-          locale: [['en-th', 'English']],
-        },
-        {
-          name: 'Vietnam',
-          locale: [
-            ['en-vn', 'English'],
-            ['vi-vn', 'Vietnamese'],
-          ],
-        },
-      ],
-    },
-    {
-      name: 'Europe',
-      key: 'eu',
-      countryList: [
-        {
-          name: 'Austria',
-          locale: [['de-at', 'German']],
-        },
-        {
-          name: 'Belgium/Luxembourg',
-          locale: [
-            ['nl-be', 'Dutch'],
-            ['en-be', 'English'],
-            ['fr-be', 'French'],
-          ],
-        },
-        {
-          name: 'Bulgaria',
-          locale: [['bg-bg', 'Bulgarian']],
-        },
-        {
-          name: 'Bulgaria',
-          locale: [['en-bg', 'English']],
-        },
-        {
-          name: 'Croatia',
-          locale: [['hr-hr', 'Croatian']],
-        },
-        {
-          name: 'Croatia',
-          locale: [['en-hr', 'English']],
-        },
-        {
-          name: 'Cyprus',
-          locale: [['en-cy', 'English']],
-        },
-        {
-          name: 'Czech Republic',
-          locale: [['en-cz', 'English']],
-        },
-        {
-          name: 'Czech Republic',
-          locale: [['cs-cz', 'Czech']],
-        },
-        {
-          name: 'Denmark',
-          locale: [['en-dk', 'English']],
-        },
-        {
-          name: 'Denmark',
-          locale: [['da-dk', 'Danish']],
-        },
-        {
-          name: 'Estonia',
-          locale: [['et-ee', 'Estonian']],
-        },
-        {
-          name: 'Estonia',
-          locale: [['en-ee', 'English']],
-        },
-        {
-          name: 'Finland',
-          locale: [['fi-fi', 'Finnish']],
-        },
-        {
-          name: 'Finland',
-          locale: [['en-fi', 'English']],
-        },
-        {
-          name: 'France',
-          locale: [['fr-fr', 'French']],
-        },
-        {
-          name: 'Germany',
-          locale: [['de-de', 'German']],
-        },
-        {
-          name: 'Greece',
-          locale: [['el-gr', 'Greek']],
-        },
-        {
-          name: 'Greece',
-          locale: [['en-gr', 'English']],
-        },
-        {
-          name: 'Hungary',
-          locale: [['en-hu', 'English']],
-        },
-        {
-          name: 'Hungary',
-          locale: [['hu-hu', 'Hungarian']],
-        },
-        {
-          name: 'Ireland',
-          locale: [['en-ie', 'English']],
-        },
-        {
-          name: 'Italy',
-          locale: [['it-it', 'Italian']],
-        },
-        {
-          name: 'Kazakhstan',
-          locale: [['kk-kz', 'Kazakh']],
-        },
-        {
-          name: 'Kazakhstan',
-          locale: [['en-kz', 'English']],
-        },
-        {
-          name: 'Latvia',
-          locale: [['lv-lv', 'Latvian']],
-        },
-        {
-          name: 'Latvia',
-          locale: [['en-lv', 'English']],
-        },
-        {
-          name: 'Lithuania',
-          locale: [['en-lt', 'English']],
-        },
-        {
-          name: 'Lithuania',
-          locale: [['lt-lt', 'Lithuanian']],
-        },
-        {
-          name: 'Netherlands',
-          locale: [['nl-nl', 'Dutch']],
-        },
-        {
-          name: 'Netherlands',
-          locale: [['en-nl', 'English']],
-        },
-        {
-          name: 'Norway',
-          locale: [['no-no', 'Norwegian']],
-        },
-        {
-          name: 'Norway',
-          locale: [['en-no', 'English']],
-        },
-        {
-          name: 'Poland',
-          locale: [['pl-pl', 'Polish']],
-        },
-        {
-          name: 'Portugal',
-          locale: [['pt-pt', 'Portuguese']],
-        },
-        {
-          name: 'Portugal',
-          locale: [['en-pt', 'English']],
-        },
-        {
-          name: 'Romania',
-          locale: [['ro-ro', 'Romanian']],
-        },
-        {
-          name: 'Romania',
-          locale: [['en-ro', 'English']],
-        },
-        {
-          name: 'Russian Federation',
-          locale: [['ru-ru', 'Russian']],
-        },
-        {
-          name: 'Serbia',
-          locale: [['sr-rs', 'Serbian']],
-        },
-        {
-          name: 'Serbia',
-          locale: [['en-rs', 'English']],
-        },
-        {
-          name: 'Slovakia',
-          locale: [['sk-sk', 'Slovak']],
-        },
-        {
-          name: 'Slovakia',
-          locale: [['en-sk', 'English']],
-        },
-        {
-          name: 'Slovenia',
-          locale: [['en-si', 'English']],
-        },
-        {
-          name: 'Slovenia',
-          locale: [['sl-si', 'Slovenian']],
-        },
-        {
-          name: 'Spain',
-          locale: [['es-es', 'Spanish']],
-        },
-        {
-          name: 'Sweden',
-          locale: [['en-se', 'English']],
-        },
-        {
-          name: 'Sweden',
-          locale: [['sv-se', 'Swedish']],
-        },
-        {
-          name: 'Switzerland',
-          locale: [
-            ['fr-ch', 'French'],
-            ['de-ch', 'German'],
-          ],
-        },
-        {
-          name: 'Turkey',
-          locale: [['tr-tr', 'Turkish']],
-        },
-        {
-          name: 'Ukraine',
-          locale: [['uk-ua', 'Ukrainian']],
-        },
-        {
-          name: 'Ukraine',
-          locale: [['en-ua', 'English']],
-        },
-        {
-          name: 'United Kingdom',
-          locale: [['en-gb', 'English']],
-        },
-        {
-          name: 'Uzbekistan',
-          locale: [['en-uz', 'English']],
-        },
-        {
-          name: 'Uzbekistan',
-          locale: [['uz-uz', 'Uzbek']],
-        },
-      ],
-    },
-    {
-      name: 'Middle East and Africa',
-      key: 'mea',
-      countryList: [
-        {
-          name: 'Afghanistan',
-          locale: [['en-af', 'English']],
-        },
-        {
-          name: 'Algeria',
-          locale: [['fr-dz', 'French']],
-        },
-        {
-          name: 'Angola',
-          locale: [['pt-ao', 'Portuguese']],
-        },
-        {
-          name: 'Bahrain',
-          locale: [['en-bh', 'English']],
-        },
-        {
-          name: 'Botswana',
-          locale: [['en-bw', 'English']],
-        },
-        {
-          name: 'Burkina Faso',
-          locale: [['fr-bf', 'French']],
-        },
-        {
-          name: 'Cameroon',
-          locale: [
-            ['en-cm', 'English'],
-            ['fr-cm', 'French'],
-          ],
-        },
-        {
-          name: 'Chad',
-          locale: [['fr-td', 'French']],
-        },
-        {
-          name: 'Congo',
-          locale: [['fr-cg', 'French']],
-        },
-        {
-          name: 'Congo, The Democratic Republic of the',
-          locale: [['fr-cd', 'French']],
-        },
-        {
-          name: 'Egypt',
-          locale: [['en-eg', 'English']],
-        },
-        {
-          name: 'Ethiopia',
-          locale: [['en-et', 'English']],
-        },
-        {
-          name: 'Gabon',
-          locale: [['fr-ga', 'French']],
-        },
-        {
-          name: 'Ghana',
-          locale: [['en-gh', 'English']],
-        },
-        {
-          name: 'Iraq',
-          locale: [['en-iq', 'English']],
-        },
-        {
-          name: 'Israel',
-          locale: [['he-il', 'Hebrew']],
-        },
-        {
-          name: 'Israel',
-          locale: [['en-il', 'English']],
-        },
-        {
-          name: 'Ivory Coast',
-          locale: [['fr-ci', 'French']],
-        },
-        {
-          name: 'Jordan',
-          locale: [['en-jo', 'English']],
-        },
-        {
-          name: 'Kenya',
-          locale: [['en-ke', 'English']],
-        },
-        {
-          name: 'Kuwait',
-          locale: [['en-kw', 'English']],
-        },
-        {
-          name: 'Lebanon',
-          locale: [['en-lb', 'English']],
-        },
-        {
-          name: 'Libya',
-          locale: [['en-ly', 'English']],
-        },
-        {
-          name: 'Madagascar',
-          locale: [['fr-mg', 'French']],
-        },
-        {
-          name: 'Malawi',
-          locale: [['en-mw', 'English']],
-        },
-        {
-          name: 'Mauritius',
-          locale: [
-            ['en-mu', 'English'],
-            ['fr-mu', 'French'],
-          ],
-        },
-        {
-          name: 'Morocco',
-          locale: [['fr-ma', 'French']],
-        },
-        {
-          name: 'Mozambique',
-          locale: [['pt-mz', 'Portuguese']],
-        },
-        {
-          name: 'Namibia',
-          locale: [['en-na', 'English']],
-        },
-        {
-          name: 'Nepal',
-          locale: [['en-np', 'English']],
-        },
-        {
-          name: 'Niger',
-          locale: [['fr-ne', 'French']],
-        },
-        {
-          name: 'Nigeria',
-          locale: [['en-ng', 'English']],
-        },
-        {
-          name: 'Oman',
-          locale: [['en-om', 'English']],
-        },
-        {
-          name: 'Pakistan',
-          locale: [['en-pk', 'English']],
-        },
-        {
-          name: 'Qatar',
-          locale: [['en-qa', 'English']],
-        },
-        {
-          name: 'Saudi Arabia',
-          locale: [['en-sa', 'English']],
-        },
-        {
-          name: 'Saudi Arabia',
-          locale: [['ar-sa', 'Arabic']],
-        },
-        {
-          name: 'Senegal',
-          locale: [['fr-sn', 'French']],
-        },
-        {
-          name: 'Seychelles',
-          locale: [['fr-sc', 'French']],
-        },
-        {
-          name: 'Sierra Leone',
-          locale: [['en-sl', 'English']],
-        },
-        {
-          name: 'South Africa',
-          locale: [['en-za', 'English']],
-        },
-        {
-          name: 'Tanzania, United Republic of',
-          locale: [['en-tz', 'English']],
-        },
-        {
-          name: 'Tunisia',
-          locale: [['fr-tn', 'French']],
-        },
-        {
-          name: 'Uganda',
-          locale: [['en-ug', 'English']],
-        },
-        {
-          name: 'United Arab Emirates',
-          locale: [['en-ae', 'English']],
-        },
-        {
-          name: 'United Arab Emirates',
-          locale: [['ar-ae', 'Arabic']],
-        },
-        {
-          name: 'Yemen',
-          locale: [['en-ye', 'English']],
-        },
-        {
-          name: 'Zambia',
-          locale: [['en-zm', 'English']],
-        },
-        {
-          name: 'Zimbabwe',
-          locale: [['en-zw', 'English']],
-        },
-      ],
-    },
-  ],
-  localeModal: {
-    headerTitle: 'Select geographic area',
-    modalClose: 'Close modal',
-    searchLabel: 'Search by location or language',
-    searchClearText: 'Clear search input',
-    searchPlaceholder: 'Search by location or language',
-    availabilityText:
-      'This page is available in the following locations and languages',
-    unavailabilityText:
-      'This page is unavailable in your preferred location or language',
-  },
-};
diff --git a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.steps.js b/packages/react/src/components/LocaleModal/__tests__/LocaleModal.steps.js
deleted file mode 100644
index 26805cbca11..00000000000
--- a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.steps.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('LocaleModal', () => {
-  describe('Main UI', () => {
-    beforeAll(async () => {
-      await page.goto(
-        `http://localhost:${process.env.PORT}/iframe.html?id=components-locale-modal--default&knob-Use%20mock%20data=true`
-      );
-    });
-
-    it('should have the right type for the header label', async () => {
-      const headerLabel = await page.waitForSelector(
-        '.bx--modal-header__label'
-      );
-      const styleValues = await page.evaluate(
-        (headerLabel) =>
-          window.getStyleValues(headerLabel, [
-            'font-size',
-            'font-weight',
-            'line-height',
-            'letter-spacing',
-          ]),
-        headerLabel
-      );
-      expect(styleValues).toEqual({
-        'font-size': '14px',
-        'font-weight': '400',
-        'line-height': '18px',
-        'letter-spacing': '0.16px',
-      });
-    });
-  });
-
-  describe('Locale search UI', () => {
-    beforeAll(async () => {
-      await page.goto(
-        `http://localhost:${process.env.PORT}/iframe.html?id=components-locale-modal--default&knob-Use%20mock%20data=true`
-      );
-      await page.click('.bx--tile--clickable');
-    });
-
-    it('should have the right type for the search text', async () => {
-      const searchText = await page.waitForSelector(
-        '.bx--locale-modal__search-text'
-      );
-      const styleValues = await page.evaluate(
-        (searchText) =>
-          window.getStyleValues(searchText, [
-            'font-size',
-            'font-weight',
-            'line-height',
-            'letter-spacing',
-          ]),
-        searchText
-      );
-      expect(styleValues).toEqual({
-        'font-size': '14px',
-        'font-weight': '600',
-        'line-height': '18px',
-        'letter-spacing': '0.16px',
-      });
-    });
-  });
-});
diff --git a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.test.js b/packages/react/src/components/LocaleModal/__tests__/LocaleModal.test.js
deleted file mode 100644
index 0fa7a6cc393..00000000000
--- a/packages/react/src/components/LocaleModal/__tests__/LocaleModal.test.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { localeData, getList } from './LocaleModal.data';
-import LocaleModal, { _close, sortList } from '../LocaleModal';
-import LocaleModalCountries, {
-  _setCookie,
-  filterLocale,
-} from '../LocaleModalCountries';
-import LocaleModalRegions, {
-  addLocaleBackBtnListeners,
-  localeBackActive,
-} from '../LocaleModalRegions';
-import ipcinfoCookie from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/ipcinfoCookie/ipcinfoCookie';
-import LocaleAPI from '../../../internal/vendor/@carbon/ibmdotcom-services/services/Locale/Locale';
-import { mount } from 'enzyme';
-import React from 'react';
-
-const localeDisplay = 'Testing';
-
-const setupModal = (props) =>
-  new Promise((resolve) => {
-    let wrapper;
-    if (props) {
-      wrapper = mount(
-        <LocaleModal localeDisplay={localeDisplay} localeData={localeData} />
-      );
-    } else {
-      wrapper = mount(<LocaleModal />);
-    }
-    setTimeout(() => resolve(wrapper), 3000);
-  });
-
-describe('LocaleModal', () => {
-  window.innerHtml += `<div class="bx--locale-btn__container"><button class="bx--btn--secondary">test</button></div>`;
-  LocaleAPI.getLangDisplay = jest.fn(() => 'United States — English');
-
-  it('Renders properly', async () => {
-    LocaleAPI.getLocale = jest.fn(() => ({ cc: 'us', lc: 'en' }));
-    LocaleAPI.getList = jest.fn(() => getList);
-    const wrapper = await setupModal(false);
-    const footerBtn = document.createElement('div');
-    footerBtn.innerHTML = `<div class="bx--locale-btn__container"><div class="bx--btn--secondary">test</div></div>`;
-    window.innerHtml += footerBtn;
-    _close(jest.fn(), jest.fn());
-    wrapper.find('.bx--modal-close').simulate('click');
-  });
-});
-
-describe('LocaleModalCountries', () => {
-  it('Tests _setCookie', () => {
-    const spy = jest.fn(() => {});
-    ipcinfoCookie.set = spy;
-    _setCookie('us-en');
-    expect(spy).toHaveBeenCalledWith({ cc: 'en', lc: 'us' });
-  });
-
-  it('Renders properly', () => {
-    const spyClearResults = jest.fn(() => {});
-    const wrapper = mount(
-      <LocaleModalCountries
-        regionList={localeData.regionList}
-        setClearResults={spyClearResults}
-        {...localeData.localeModal}
-      />
-    );
-    wrapper.find('input.bx--search-input').value = 'Brazi';
-    wrapper.find('input.bx--search-input').simulate('keyup');
-
-    const setClearResults = jest.fn((val) => val);
-    const localeFilter = document.createElement('input');
-    localeFilter.value = 'Brazil';
-    const localeText = document.createElement('div');
-    const localeItem = `<div class="bx-locale-modal__list"><a><div>Brazil</div></a></div>`;
-    document.body.innerHTML = localeItem;
-
-    filterLocale(
-      setClearResults,
-      localeFilter,
-      `bx--locale-modal__locales-hidden`,
-      localeText,
-      { unavailabilityText: 'unavailable', AvailabilityText: 'available' }
-    );
-
-    const btn = document.createElement('div');
-    btn.innerHTML = `
-      <div tabindex="1" role="button" aria-label="label"></div>
-    `;
-    document.body.innerHTML += `<input value="test" id="bx--locale-modal__filter" />`;
-    localeBackActive(
-      btn,
-      jest.fn(() => {}),
-      jest.fn(() => {})
-    );
-
-    document.body.innerHTML += `<div class="bx--card" id="test-card"></div>`;
-    document.querySelector('#test-card').dispatchEvent(new MouseEvent('click'));
-  });
-});
-
-describe('Locale Modal Regions', () => {
-  it('handles the listeners properly', () => {
-    const setCurrentRegionSpy = jest.fn();
-    const setIsFilteringSpy = jest.fn();
-    const setClearResultsSpy = jest.fn();
-    const wrapper = mount(
-      <LocaleModalRegions
-        regionList={sortList(localeData)}
-        setCurrentRegion={setCurrentRegionSpy}
-        setIsFiltering={setIsFilteringSpy}
-        setClearResults={setClearResultsSpy}
-        returnButtonLabel={`Return button`}
-      />
-    );
-    wrapper.find('.bx--tile').at(0).simulate('click');
-    const testButton = document.createElement('button');
-    testButton.innerText = 'testing';
-    addLocaleBackBtnListeners(
-      [testButton],
-      'testing',
-      setIsFilteringSpy,
-      setClearResultsSpy
-    );
-    testButton.dispatchEvent(new MouseEvent('click'));
-    testButton.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 32 }));
-    testButton.dispatchEvent(new KeyboardEvent('keyup', { keyCode: 13 }));
-    wrapper.find('.bx--card').at(0).simulate('click');
-  });
-});
diff --git a/packages/react/src/components/LocaleModal/index.js b/packages/react/src/components/LocaleModal/index.js
deleted file mode 100644
index 4817389b055..00000000000
--- a/packages/react/src/components/LocaleModal/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as LocaleModal } from './LocaleModal';
-export { default as LocaleModalCountries } from './LocaleModalCountries';
-export { default as LocaleModalRegions } from './LocaleModalRegions';
diff --git a/packages/react/src/components/LogoGrid/LogoGrid.js b/packages/react/src/components/LogoGrid/LogoGrid.js
deleted file mode 100644
index e4fb669009d..00000000000
--- a/packages/react/src/components/LogoGrid/LogoGrid.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ContentBlock from '../ContentBlock/ContentBlock';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { HorizontalRule } from '../HorizontalRule';
-import { Image } from '../Image';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-/**
- * Logo Grid component.
- */
-const LogoGrid = ({ heading, logosGroup, ctaCopy, ctaHref, hideBorder }) => {
-  /**
-   * sets the class name based on theme type
-   *
-   * @param {string} theme theme type ( g10 | white/default )
-   * @returns {string} theme css class names
-   */
-
-  let cta = null;
-
-  if (ctaHref) {
-    cta = {
-      style: 'card',
-      type: 'local',
-      heading: ctaCopy,
-      cta: {
-        href: ctaHref,
-      },
-    };
-  }
-
-  return (
-    <section
-      data-autoid={`${stablePrefix}--logo-grid`}
-      className={`${prefix}--logo-grid`}>
-      <div className={`${prefix}--logo-grid__container`}>
-        <div className={`${prefix}--logo-grid__wrapper`}>
-          <ContentBlock heading={heading} cta={cta}>
-            <div className={`${prefix}--logo-grid__row`}>
-              {logosGroup.map((placeholder, index) => (
-                <div className={`${prefix}--logo-grid__col`} key={index}>
-                  <div
-                    className={`${prefix}--logo-grid__logo`}
-                    key={placeholder.label}>
-                    <Image
-                      defaultSrc={placeholder.imgSrc}
-                      classname={`${prefix}--logo-grid_img`}
-                      alt={placeholder.altText}
-                      longDescription={placeholder.label}
-                    />
-                  </div>
-                </div>
-              ))}
-            </div>
-          </ContentBlock>
-        </div>
-      </div>
-      {!hideBorder && <HorizontalRule />}
-    </section>
-  );
-};
-
-LogoGrid.propTypes = {
-  /**
-   * Heading text.
-   */
-  heading: PropTypes.string,
-  /**
-   * An array of logo objects to be rendered as Image components surrounded by hypertext links:
-   *
-   * | Name     | Data Type | Description                                                |
-   * | -------- | --------- | ---------------------------------------------------------- |
-   * | `label`  | String    | Visible to screen readers, hidden from users.              |
-   * | `imgSrc` | String    | Image source for logo placeholder.                         |
-   * | `altText`| String    | Alternate text for logo placeholder.                       |
-   */
-  logosGroup: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string,
-      imgSrc: PropTypes.string,
-      altText: PropTypes.string,
-    })
-  ).isRequired,
-  /**
-   * Optional copy for the CTA
-   */
-  ctaCopy: PropTypes.string,
-  /**
-   * Link address for the CTA. If omitted, CTA doesn't render.
-   */
-  ctaHref: PropTypes.string,
-  /**
-   * Set to true to hide the default bottom border.
-   */
-  hideBorder: PropTypes.bool,
-};
-
-export default LogoGrid;
diff --git a/packages/react/src/components/LogoGrid/README.stories.mdx b/packages/react/src/components/LogoGrid/README.stories.mdx
deleted file mode 100755
index 0b46c234fd6..00000000000
--- a/packages/react/src/components/LogoGrid/README.stories.mdx
+++ /dev/null
@@ -1,108 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import LogoGrid from './LogoGrid';
-
-# Logo Grid
-
-> The Logo Grid pattern is to be utilized within IBM.com. It's available **only
-> under** the
-> [Carbon white theme](https://www.carbondesignsystem.com/guidelines/themes/overview#default-theme).
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LogoGrid)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/LogoGrid)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-
-@import '@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the LogoGrid
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { LogoGrid } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-const heading = 'Our customers.';
-
-const logosGroup = [
-  {
-    title: 'Company A',
-    imgSrc:
-      'https://fpoimg.com/140x140?text=Example%20Logo&bg_color=ee5396&text_color=161616',
-    altText: 'Image alt text',
-  },
-  {
-    title: 'Company B',
-    imgSrc:
-      'https://fpoimg.com/140x140?text=Example%20Logo&bg_color=ee5396&text_color=161616',
-    altText: 'Image alt text',
-  },
-];
-
-const ctaCopy = 'Lorem ipsum dolor sit amet';
-const ctaHref = 'http://local.url.com/';
-
-function App() {
-  return (
-    <LogoGrid
-      title={title}
-      logosGroup={logosGroup}
-      ctaCopy={ctaCopy}
-      ctaHref={ctaHref}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the logogrid styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import LogoGrid from '@carbon/ibmdotcom-react/es/components/LogoGrid/LogoGrid';
-```
-
-## Props
-
-<Props of={LogoGrid} />
-
-## Stable selectors
-
-| Name             | Description |
-| ---------------- | ----------- |
-| `dds--logo-grid` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/LogoGrid/__stories__/LogoGrid.stories.js b/packages/react/src/components/LogoGrid/__stories__/LogoGrid.stories.js
deleted file mode 100644
index f39f9cefc9e..00000000000
--- a/packages/react/src/components/LogoGrid/__stories__/LogoGrid.stories.js
+++ /dev/null
@@ -1,102 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import logoAdobe from '../../../../../storybook-images/assets/logos/logo-adobe.png';
-import logoCisco from '../../../../../storybook-images/assets/logos/logo-cisco.png';
-import logoDell from '../../../../../storybook-images/assets/logos/logo-dell.png';
-import LogoGrid from '../LogoGrid';
-import logoMicrosoft from '../../../../../storybook-images/assets/logos/logo-microsoft.png';
-import logoRabobank from '../../../../../storybook-images/assets/logos/logo-rabobank.png';
-import logoUsBank from '../../../../../storybook-images/assets/logos/logo-usbank.png';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const logos = [
-  {
-    label: 'Microsoft',
-    imgSrc: logoMicrosoft,
-    altText: 'Microsoft',
-  },
-  {
-    label: 'Dell',
-    imgSrc: logoDell,
-    altText: 'Dell',
-  },
-  {
-    label: 'Rabobank',
-    imgSrc: logoRabobank,
-    altText: 'Rabobank',
-  },
-  {
-    label: 'Adobe',
-    imgSrc: logoAdobe,
-    altText: 'Adobe',
-  },
-  {
-    label: 'US Bank',
-    imgSrc: logoUsBank,
-    altText: 'US Bank',
-  },
-  {
-    label: 'Cisco',
-    imgSrc: logoCisco,
-    altText: 'Cisco',
-  },
-];
-
-const props = () => {
-  const showCta = boolean('Display CTA:', false);
-  const ctaHref = showCta
-    ? text('CTA Href (ctaHref):', 'http://local.url.com/')
-    : '';
-  const ctaCopy = showCta
-    ? text('CTA Copy (ctaCopy)', 'Lorem ipsum dolor sit amet')
-    : '';
-
-  return {
-    heading: text('Heading (heading)', 'Our customers'),
-    logosGroup: logos,
-    hideBorder: boolean(
-      'Hide border (hideBorder): Hide the bottom border',
-      false
-    ),
-    showCta,
-    ctaHref,
-    ctaCopy,
-  };
-};
-
-export default {
-  title: 'Components/Logo grid',
-  parameters: {
-    ['carbon-theme']: { disabled: true },
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Logo grid: Default',
-    },
-    propsSet: {
-      default: {
-        LogoGrid: {
-          logosGroup: logos,
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-2">
-          <LogoGrid {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/LogoGrid/__tests__/LogoGrid.steps.js b/packages/react/src/components/LogoGrid/__tests__/LogoGrid.steps.js
deleted file mode 100644
index 9654d724ec3..00000000000
--- a/packages/react/src/components/LogoGrid/__tests__/LogoGrid.steps.js
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('LogoGrid', () => {
-  beforeAll(async () => {
-    await page.goto(
-      `http://localhost:${process.env.PORT}/iframe.html?id=components-logogrid--default`
-    );
-    const copy = await page.waitForSelector('.bx--card__copy');
-    await page.evaluate((copy) => {
-      copy.insertAdjacentHTML(
-        'beforeBegin',
-        '<div class="bx--card__heading">Heading</div>'
-      );
-    }, copy);
-  });
-
-  it('should have the right type for the heading', async () => {
-    const heading = await page.waitForSelector('.bx--card__heading');
-    const styleValues = await page.evaluate(
-      (heading) =>
-        window.getStyleValues(heading, [
-          'font-size',
-          'font-weight',
-          'line-height',
-          'letter-spacing',
-        ]),
-      heading
-    );
-    expect(styleValues).toEqual({
-      'font-size': '14px',
-      'font-weight': '600',
-      'line-height': '18px',
-      'letter-spacing': '0.16px',
-    });
-  });
-});
diff --git a/packages/react/src/components/LogoGrid/index.js b/packages/react/src/components/LogoGrid/index.js
deleted file mode 100644
index b1c099b5ef8..00000000000
--- a/packages/react/src/components/LogoGrid/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as LogoGrid } from './LogoGrid';
diff --git a/packages/react/src/components/Masthead/HeaderNavContainer.js b/packages/react/src/components/Masthead/HeaderNavContainer.js
deleted file mode 100644
index b16750a7b45..00000000000
--- a/packages/react/src/components/Masthead/HeaderNavContainer.js
+++ /dev/null
@@ -1,327 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 {
-  keys,
-  matches,
-} from '../../internal/vendor/carbon-components-react/internal/keyboard';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import CaretLeft20 from '@carbon/icons-react/es/caret--left/20';
-import CaretRight20 from '@carbon/icons-react/es/caret--right/20';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Header nav container component.
- */
-const HeaderNavContainer = ({ children }) => {
-  const containerRef = useRef(null);
-  const contentRef = useRef(null);
-  const contentLeftRef = useRef(null);
-  const contentRightRef = useRef(null);
-  const caretLeftRef = useRef(null);
-  const caretRightRef = useRef(null);
-  const [io, setIO] = useState(null);
-  const [position, setPosition] = useState(0);
-  const buttonSize = 48; // 40px(width) + 8px(gradient)
-  const pageIsRTL = root.document?.dir === 'rtl';
-
-  const paginateLeft = useCallback(() => {
-    let menuItems = contentRef.current.querySelectorAll(
-      '.bx--header__menu-bar > li'
-    );
-    if (pageIsRTL) {
-      for (let i = 0; i < menuItems.length; i++) {
-        if (
-          contentRef.current.offsetWidth -
-            menuItems[i].offsetLeft -
-            buttonSize >
-          -parseFloat(window.getComputedStyle(contentRef.current).right)
-        ) {
-          setPosition(
-            Math.min(
-              -contentRef.current.offsetWidth +
-                containerRef.current.offsetWidth +
-                menuItems[i].offsetLeft -
-                buttonSize,
-              0
-            )
-          );
-          contentRef.current.style.right =
-            String(
-              Math.min(
-                -contentRef.current.offsetWidth +
-                  containerRef.current.offsetWidth +
-                  menuItems[i].offsetLeft -
-                  buttonSize,
-                0
-              )
-            ) + 'px';
-          break;
-        }
-      }
-    } else {
-      for (let i = 0; i < menuItems.length; i++) {
-        // checks if first visible item is partially hidden
-        if (
-          menuItems[i].offsetLeft + menuItems[i].offsetWidth + position >=
-          buttonSize
-        ) {
-          // checks if there is space for remaining menuItems
-          if (
-            menuItems[i].offsetLeft + menuItems[i].offsetWidth >
-            containerRef.current.offsetWidth - buttonSize
-          ) {
-            setPosition(
-              containerRef.current.offsetWidth -
-                menuItems[i].offsetLeft -
-                menuItems[i].offsetWidth -
-                buttonSize
-            );
-            contentRef.current.style.left =
-              String(
-                containerRef.current.offsetWidth -
-                  menuItems[i].offsetLeft -
-                  menuItems[i].offsetWidth -
-                  buttonSize
-              ) + 'px';
-          } else {
-            setPosition(0);
-            contentRef.current.style.left = '0px';
-          }
-          break;
-        }
-      }
-    }
-  }, [position, pageIsRTL]);
-
-  const paginateRight = useCallback(() => {
-    let menuItems = contentRef.current.querySelectorAll(
-      '.bx--header__menu-bar > li'
-    );
-    if (pageIsRTL) {
-      for (let i = 0; i < menuItems.length; i++) {
-        // checks if the right most visible element is partially hidden
-        if (
-          contentRef.current.offsetWidth - menuItems[i].offsetLeft >
-          containerRef.current.offsetWidth - buttonSize - position
-        ) {
-          setPosition(
-            Math.max(
-              -contentRef.current.offsetWidth +
-                menuItems[i].offsetLeft +
-                menuItems[i].offsetWidth +
-                buttonSize,
-              containerRef.current.offsetWidth - contentRef.current.offsetWidth
-            )
-          );
-          contentRef.current.style.right =
-            String(
-              Math.max(
-                -contentRef.current.offsetWidth +
-                  menuItems[i].offsetLeft +
-                  menuItems[i].offsetWidth +
-                  buttonSize,
-                containerRef.current.offsetWidth -
-                  contentRef.current.offsetWidth
-              )
-            ) + 'px';
-          break;
-        }
-      }
-    } else {
-      for (let i = 0; i < menuItems.length; i++) {
-        if (
-          menuItems[i].offsetLeft + menuItems[i].offsetWidth + position >
-          containerRef.current.offsetWidth - buttonSize
-        ) {
-          // checks if there is space for remaining menuItems
-          if (
-            contentRef.current.offsetWidth - menuItems[i].offsetLeft <
-            containerRef.current.offsetWidth - buttonSize
-          ) {
-            setPosition(
-              containerRef.current.offsetWidth - contentRef.current.offsetWidth
-            );
-            contentRef.current.style.left =
-              String(
-                containerRef.current.offsetWidth -
-                  contentRef.current.offsetWidth
-              ) + 'px';
-          } else {
-            setPosition(buttonSize - menuItems[i].offsetLeft);
-            contentRef.current.style.left =
-              String(buttonSize - menuItems[i].offsetLeft) + 'px';
-          }
-          break;
-        }
-      }
-    }
-  }, [position, pageIsRTL]);
-
-  useEffect(() => {
-    if (window.IntersectionObserver) {
-      setIO(
-        new IntersectionObserver(
-          (records) => {
-            records.forEach((record) => {
-              if (
-                contentLeftRef.current &&
-                record.target.classList.contains(
-                  contentLeftRef.current.className
-                )
-              ) {
-                caretLeftRef.current.hidden = record.isIntersecting;
-              }
-              if (
-                contentRightRef.current &&
-                record.target.classList.contains(
-                  contentRightRef.current.className
-                )
-              ) {
-                caretRightRef.current.hidden = record.isIntersecting;
-              }
-            });
-          },
-          {
-            root: containerRef.current,
-            threshold: 1,
-          }
-        )
-      );
-    }
-  }, [setIO]);
-
-  useEffect(() => {
-    const navContent = contentRef.current;
-
-    if (io) {
-      navContent.addEventListener('keydown', handleOnKeyDown);
-      io.observe(contentLeftRef.current);
-      io.observe(contentRightRef.current);
-    } else {
-      return () => {
-        if (io) {
-          navContent.removeEventListener('keydown', handleOnKeyDown);
-          io.disconnect();
-        }
-      };
-    }
-  });
-
-  /**
-   * Keyboard event handler for menu items.
-   */
-  const handleOnKeyDown = (event) => {
-    if (matches(event, [keys.Tab])) {
-      if (pageIsRTL) {
-        if (event.shiftKey) {
-          if (
-            document.activeElement?.parentElement?.previousSibling &&
-            document.activeElement?.parentElement?.previousSibling?.offsetLeft +
-              document.activeElement?.parentElement?.previousSibling
-                ?.offsetWidth -
-              parseFloat(window.getComputedStyle(contentRef.current).right) +
-              buttonSize >
-              contentRef.current.offsetWidth
-          ) {
-            paginateLeft();
-          }
-        } else {
-          if (
-            document.activeElement?.parentElement?.nextSibling &&
-            contentRef.current.offsetWidth -
-              document.activeElement?.parentElement?.nextSibling?.offsetLeft >
-              containerRef.current.offsetWidth - buttonSize - position
-          ) {
-            paginateRight();
-          }
-        }
-      } else {
-        if (event.shiftKey) {
-          //Focus previous input
-          if (
-            document.activeElement.parentElement.previousSibling &&
-            document.activeElement.parentElement.previousSibling.offsetLeft +
-              position <=
-              buttonSize
-          ) {
-            paginateLeft();
-          }
-        } else {
-          //Focus next input
-          if (
-            document.activeElement.parentElement.nextSibling &&
-            document.activeElement.parentElement.nextSibling.offsetLeft +
-              document.activeElement.parentElement.nextSibling.offsetWidth >=
-              containerRef.current.offsetWidth - buttonSize
-          ) {
-            paginateRight();
-          }
-        }
-      }
-    }
-  };
-
-  return (
-    <>
-      <div className={`${prefix}--header__nav-container`} ref={containerRef}>
-        <div className={`${prefix}--header__nav-content`} ref={contentRef}>
-          <div className={`${prefix}--sub-content-left`} ref={contentLeftRef} />
-          <div
-            className={`${prefix}--sub-content-right`}
-            ref={contentRightRef}
-          />
-          {children}
-        </div>
-        <div
-          ref={caretLeftRef}
-          className={`${prefix}--header__nav-caret-left-container`}
-          hidden>
-          <button
-            className={`${prefix}--header__nav-caret-left`}
-            aria-label="Masthead left caret"
-            onClick={paginateLeft}
-            tabIndex="-1"
-            aria-hidden="true">
-            {pageIsRTL ? <CaretRight20 /> : <CaretLeft20 />}
-          </button>
-          <div className={`${prefix}--header__nav-caret-left-gradient`} />
-        </div>
-        <div
-          ref={caretRightRef}
-          className={`${prefix}--header__nav-caret-right-container`}
-          hidden>
-          <div className={`${prefix}--header__nav-caret-right-gradient`} />
-          <button
-            className={`${prefix}--header__nav-caret-right`}
-            aria-label="Masthead right caret"
-            onClick={paginateRight}
-            tabIndex="-1"
-            aria-hidden="true">
-            {pageIsRTL ? <CaretLeft20 /> : <CaretRight20 />}
-          </button>
-        </div>
-      </div>
-    </>
-  );
-};
-
-HeaderNavContainer.propTypes = {
-  /**
-   * Container for other components.
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-export default HeaderNavContainer;
diff --git a/packages/react/src/components/Masthead/Masthead.js b/packages/react/src/components/Masthead/Masthead.js
deleted file mode 100644
index a1d20d3825d..00000000000
--- a/packages/react/src/components/Masthead/Masthead.js
+++ /dev/null
@@ -1,634 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { baseFontSize, breakpoints } from '@carbon/layout';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-import cx from 'classnames';
-import { DDS_CUSTOM_PROFILE_LOGIN } from '../../internal/FeatureFlags';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate.js';
-import { globalInit } from '../../internal/vendor/@carbon/ibmdotcom-services/services/global/global';
-import Header from '../../internal/vendor/carbon-components-react/components/UIShell/Header';
-import HeaderContainer from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderContainer';
-import HeaderGlobalBar from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderGlobalBar';
-import HeaderMenuButton from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderMenuButton';
-import { IbmLogo } from '../Icon';
-import MastheadL1 from './MastheadL1';
-import MastheadLeftNav from './MastheadLeftNav';
-import MastheadProfile from './MastheadProfile';
-import MastheadSearch from './MastheadSearch';
-import MastheadTopNav from './MastheadTopNav';
-import ProfileAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Profile/Profile';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-import SkipToContent from '../../internal/vendor/carbon-components-react/components/UIShell/SkipToContent';
-import TranslationAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Translation/Translation';
-import User20 from '@carbon/icons-react/es/user/20';
-import UserOnline20 from '@carbon/icons-react/es/user--online/20';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-const gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
-
-/**
- * MastHead component
- *
- * @param {object} props React props object
- * @param {object} props.navigation Object containing navigation elements
- * @param {boolean} props.hasProfile Determines whether to render Profile component
- * @param {boolean} props.hasSearch Determines whether to render Search Bar
- * @param {boolean} props.searchOpenOnload Determines if the search field is open on page load
- * @param {string} props.placeHolderText Placeholder value for search input
- * @param {string} props.initialSearchTerm Initial value for search input
- * @param {object} props.platform Platform name that appears on L0.
- * @param {string} props.title Title for the masthead L1
- * @param {string} props.eyebrowText Text for the eyebrow link in masthead L1
- * @param {string} props.eyebrowLink URL for the eyebrow link in masthead L1
- * @param {string} props.selectedMenuItem L0/L1 menu item to render with selected state
- * @returns {*} Masthead component
- */
-const Masthead = ({
-  navigation,
-  hasProfile,
-  hasSearch,
-  searchOpenOnload,
-  placeHolderText,
-  initialSearchTerm,
-  platform,
-  mastheadL1Data,
-  selectedMenuItem,
-  ...mastheadProps
-}) => {
-  /**
-   * Returns IBM.com authenticated status
-   *
-   * @param {boolean} isAuthenticated Whether the user is authenticated to IBM.com
-   * @returns {*} The user status
-   */
-  const [isAuthenticated, setStatus] = useState(false);
-
-  /**
-   * Returns state of search status
-   *
-   * @param {boolean} isSearchActive Whether the search bar is open
-   * @returns {*} The active search status
-   */
-  const [isSearchActive, setIsSearchActive] = useState(searchOpenOnload);
-  const searchIconButton = useRef(null);
-
-  const handleChangeSearchActive = useCallback((event, { isOpen }) => {
-    setIsSearchActive(isOpen);
-    setTimeout(() => {
-      searchIconButton.current.focus();
-    }, 0);
-  }, []);
-
-  useEffect(() => {
-    // initialize global execution calls
-    globalInit();
-  }, []);
-
-  useEffect(() => {
-    let unmounted = false;
-    (async () => {
-      const status = await ProfileAPI.getUserStatus();
-      if (!unmounted) {
-        setStatus(status.user !== 'Unauthenticated');
-      }
-    })();
-    return () => {
-      unmounted = true;
-    };
-  }, []);
-
-  let [mastheadData, setMastheadData] = useState([]);
-  let [searchData, setSearchData] = useState([]);
-  const [profileData, setProfileData] = useState({
-    signedin: [],
-    signedout: [],
-  });
-
-  useEffect(() => {
-    let unmounted = false;
-    (async () => {
-      try {
-        const pageData = await TranslationAPI.getTranslation();
-        if (!unmounted) {
-          setMastheadData(pageData.mastheadNav.links);
-          setProfileData(pageData.profileMenu);
-          setSearchData(pageData.masthead.search);
-        }
-      } catch (error) {
-        console.error('Error populating masthead data:', error);
-      }
-    })();
-    return () => {
-      unmounted = true;
-    };
-  }, []);
-
-  /**
-   * Forces profile menu position to fixed to prevent scrolling
-   *
-   */
-  const _setProfileListPosition = () => {
-    const profileMenuList = document.querySelector(
-      `.${prefix}--masthead__profile-item`
-    );
-    profileMenuList.closest('ul').style.position = 'fixed';
-    profileMenuList.closest('ul').style.top = '48px';
-  };
-
-  const stickyRef = useRef(null);
-  const mastheadL1Ref = useRef(null);
-
-  const headerSearchClasses = cx({
-    [`${prefix}--masthead__platform`]: platform,
-    [`${prefix}--masthead__header--search-active`]: isSearchActive,
-  });
-
-  const [scrollOffset] = useState(root.scrollY);
-  const [tableOfContents, setTableOfContents] = useState(null);
-
-  useEffect(() => {
-    setTableOfContents(
-      document.querySelector('.bx--tableofcontents__sidebar') ??
-        document
-          .querySelector('dds-table-of-contents')
-          ?.shadowRoot.querySelector('.bx--tableofcontents__navbar')
-    );
-  }, [tableOfContents]);
-
-  useEffect(() => {
-    let lastScrollPosition = 0;
-
-    /**
-     * Sets sticky masthead. If both L0 and L1 are present, L1 will be sticky.
-     *
-     */
-    const handleScroll = root.addEventListener('scroll', () => {
-      /**
-       * L0 will hide on scroll down, show on scroll up
-       *
-       */
-      if (mastheadL1Ref.current != null && tableOfContents != null) {
-        const tocBoundingClient = tableOfContents.getBoundingClientRect();
-        const mobileMastheadTop = Math.round(
-          Math.min(0, tocBoundingClient.top - stickyRef.current.offsetHeight)
-        );
-        const tocPosition =
-          tocBoundingClient.top + lastScrollPosition - window.scrollY;
-
-        tableOfContents.style.top = `${Math.max(
-          Math.min(tocPosition, stickyRef.current.offsetHeight),
-          0
-        )}px`;
-
-        const regularMastheadTop =
-          window.scrollY < lastScrollPosition
-            ? 0
-            : -Math.min(
-                stickyRef.current.offsetHeight -
-                  mastheadL1Ref.current.offsetHeight,
-                Math.abs(mobileMastheadTop)
-              );
-        const mastheadTop =
-          window.innerWidth < gridBreakpoint
-            ? mobileMastheadTop
-            : regularMastheadTop;
-
-        stickyRef.current.style.top = `${mastheadTop}px`;
-        stickyRef.current.style.transition = 'none';
-
-        /**
-         * L0 will hide on scroll down, show up on scroll up when mobile ToC is present
-         */
-      } else if (tableOfContents != null && stickyRef.current !== null) {
-        const tocBoundingClient = tableOfContents.getBoundingClientRect();
-        stickyRef.current.style.transition = `none`;
-
-        const mastheadTop = Math.round(
-          Math.min(0, tocBoundingClient.top - stickyRef.current.offsetHeight)
-        );
-        const tocPosition =
-          tocBoundingClient.top + lastScrollPosition - window.scrollY;
-
-        if (
-          tableOfContents?.getRootNode()?.host?.getAttribute('toc-layout') ===
-          'horizontal'
-        ) {
-          tableOfContents.style.top = `${stickyRef.current.offsetHeight}px`;
-        } else if (window.innerWidth < gridBreakpoint) {
-          tableOfContents.style.top = `${Math.max(
-            Math.min(tocPosition, stickyRef.current.offsetHeight),
-            0
-          )}px`;
-
-          if (tableOfContents.style.top === '0px') {
-            stickyRef.current.style.top = `-${stickyRef.current.offsetHeight}px`;
-          } else if (
-            tableOfContents.style.top === `${stickyRef.current.offsetHeight}px`
-          ) {
-            stickyRef.current.style.top = '0';
-          } else {
-            stickyRef.current.style.top = `${mastheadTop}px`;
-          }
-        }
-      }
-      lastScrollPosition = window.scrollY;
-    });
-
-    return () => {
-      root.removeEventListener('scroll', () => handleScroll);
-    };
-  }, [scrollOffset, tableOfContents]);
-
-  if (navigation) {
-    switch (typeof navigation) {
-      case 'default':
-        // eslint-disable-next-line
-        mastheadData = mastheadData;
-        break;
-      case 'object':
-        mastheadData = navigation;
-        break;
-      default:
-        break;
-    }
-  }
-
-  // set navigation type (default, alternate, or ecosystem) for autoids
-  let navType;
-  if (!navigation && !platform) {
-    navType = 'alt';
-  } else if (navigation && !platform) {
-    navType = 'default';
-  } else if (platform) {
-    navType = 'eco';
-  }
-
-  /**
-   * checks if there is a child item in the menu section that matches current url and returns true for first valid result
-   *
-   * @returns {boolean} function that returns true or false
-   */
-  // eslint-disable-next-line class-methods-use-this
-  const _hasCurrentUrl = () => {
-    let matchFound = false;
-
-    return (sections, currentUrlPath) => {
-      if (!matchFound) {
-        if (sections.url === currentUrlPath) {
-          matchFound = true;
-        } else if (sections?.menuSections?.[0]) {
-          const { menuItems } = sections?.menuSections[0];
-
-          for (let i = 0; i < menuItems.length; i++) {
-            if (
-              menuItems[i]?.url === currentUrlPath ||
-              menuItems[i]?.megapanelContent?.quickLinks?.links?.filter(
-                (link) => link.url === currentUrlPath
-              ).length
-            ) {
-              matchFound = true;
-            }
-          }
-        }
-        return matchFound;
-      }
-      return false;
-    };
-  };
-
-  return (
-    <HeaderContainer
-      render={({ isSideNavExpanded, onClickSideNavExpand }) => {
-        if (isSideNavExpanded) {
-          root.document?.body?.classList.add(`${prefix}--body__lock-scroll`);
-        } else {
-          root.document?.body?.classList.remove(`${prefix}--body__lock-scroll`);
-        }
-        return (
-          <div className={`${prefix}--masthead`} ref={stickyRef}>
-            <div className={`${prefix}--masthead__l0`}>
-              <Header
-                aria-label="IBM"
-                data-autoid={`${stablePrefix}--masthead`}>
-                <SkipToContent />
-
-                {(mastheadL1Data || navigation) && (
-                  <HeaderMenuButton
-                    aria-label={isSideNavExpanded ? 'Close menu' : 'Open menu'}
-                    data-autoid={`${stablePrefix}--masthead-${navType}-sidenav__l0-menu`}
-                    onClick={onClickSideNavExpand}
-                    isActive={isSideNavExpanded}
-                    className={headerSearchClasses}
-                    onBlur={(e) => {
-                      const platform = e.target.parentElement.querySelector(
-                        `nav .${prefix}--side-nav__submenu-platform`
-                      );
-
-                      const firstMenuItem =
-                        e.target.parentElement.querySelector(
-                          `.${prefix}--side-nav__menu-section--expanded li:first-of-type button`
-                        ) ||
-                        e.target.parentElement.querySelector(
-                          `.${prefix}--side-nav__menu-section--expanded li:first-of-type a`
-                        );
-
-                      const lastMenuItem =
-                        e.target.parentElement.querySelector(
-                          `.${prefix}--side-nav__menu-section--expanded li:last-of-type button`
-                        ) ||
-                        e.target.parentElement.querySelector(
-                          `.${prefix}--side-nav__menu-section--expanded li:last-of-type a`
-                        );
-
-                      if (
-                        e.relatedTarget &&
-                        e.relatedTarget !== firstMenuItem &&
-                        e.relatedTarget !== platform
-                      )
-                        return lastMenuItem.focus();
-                    }}
-                  />
-                )}
-
-                {(navigation || mastheadL1Data) && (
-                  <MastheadLeftNav
-                    {...mastheadProps}
-                    backButtonText="Back"
-                    platform={platform}
-                    hasL1Data={!!mastheadL1Data}
-                    navigation={mastheadL1Data?.navigationL1 ?? mastheadData}
-                    isSideNavExpanded={isSideNavExpanded}
-                    navType={navType}
-                    selectedMenuItem={selectedMenuItem}
-                    onOverlayClick={onClickSideNavExpand}
-                  />
-                )}
-
-                <IbmLogo
-                  logoData={mastheadProps.mastheadLogo}
-                  autoid={`${stablePrefix}--masthead-${navType}__l0-logo`}
-                  isSearchActive={isSearchActive}
-                />
-
-                <div
-                  className={`${prefix}--header__search ${headerSearchClasses}`}>
-                  {navigation && !mastheadL1Data && (
-                    <MastheadTopNav
-                      {...mastheadProps}
-                      platform={platform}
-                      navigation={mastheadData}
-                      navType={navType}
-                      hasCurrentUrl={_hasCurrentUrl}
-                      selectedMenuItem={selectedMenuItem}
-                    />
-                  )}
-                  {hasSearch && (
-                    <MastheadSearch
-                      {...mastheadProps}
-                      {...(searchOpenOnload
-                        ? { searchOpenOnload: searchOpenOnload }
-                        : {})}
-                      placeHolderText={
-                        placeHolderText || searchData?.placeHolderText
-                      }
-                      initialSearchTerm={initialSearchTerm}
-                      navType={navType}
-                      isSearchActive={isSearchActive}
-                      ref={searchIconButton}
-                      onChangeSearchActive={handleChangeSearchActive}
-                    />
-                  )}
-                </div>
-
-                {hasProfile && (
-                  <HeaderGlobalBar className={`${prefix}--header__profile`}>
-                    <MastheadProfile
-                      overflowMenuProps={{
-                        ariaLabel: 'User Profile',
-                        'data-autoid': `${stablePrefix}--masthead-${navType}__l0-account`,
-                        flipped: true,
-                        style: { width: '3rem' },
-                        onOpen: () => _setProfileListPosition(),
-                        renderIcon: () =>
-                          isAuthenticated ? <UserOnline20 /> : <User20 />,
-                      }}
-                      overflowMenuItemProps={{
-                        wrapperClassName: `${prefix}--masthead__profile-item`,
-                      }}
-                      profileMenu={
-                        isAuthenticated
-                          ? profileData.signedin
-                          : profileData.signedout
-                      }
-                      {...(mastheadProps.customProfileLogin &&
-                      DDS_CUSTOM_PROFILE_LOGIN
-                        ? {
-                            customProfileLogin:
-                              mastheadProps.customProfileLogin,
-                          }
-                        : {})}
-                      navType={navType}
-                    />
-                  </HeaderGlobalBar>
-                )}
-              </Header>
-            </div>
-            {mastheadL1Data && (
-              <div ref={mastheadL1Ref}>
-                <MastheadL1
-                  {...mastheadL1Data}
-                  platform={platform}
-                  navType={navType}
-                  hasCurrentUrl={_hasCurrentUrl}
-                  selectedMenuItem={selectedMenuItem}
-                />
-              </div>
-            )}
-          </div>
-        );
-      }}
-    />
-  );
-};
-
-Masthead.propTypes = {
-  /**
-   * Navigation data object/string for Masthead. These navigation properties belongs to the Masthead L0 Top navigation. Use one from below:
-   *
-   * | Behavior           | Data Type | Description                                 | Example                             |
-   * | ------------------ | --------- | ------------------------------------------- | ----------------------------------- |
-   * | default navigation | String    | Default navigation data from IBM.com        | `<Masthead navigation="default" />` |
-   * | custom navigation  | Object    | Pass in custom navigation data as an object | `<Masthead navigation={myNavObj}/>` |
-   * | none               | null      | No navigation                               | `<Masthead />`                      |
-   *
-   * `Custom` navigation data must follow the same structure and key names as `default`.
-   * See [this](https://1.www.s81c.com/common/carbon-for-ibm-dotcom/translations/masthead-footer/usen.json) for an example.
-   */
-  navigation: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.arrayOf(
-      PropTypes.shape({
-        hasMenu: PropTypes.bool,
-        title: PropTypes.string,
-        url: PropTypes.string,
-        menuSections: PropTypes.arrayOf(
-          PropTypes.shape({
-            menuItems: PropTypes.arrayOf(
-              PropTypes.shape({
-                title: PropTypes.string,
-                url: PropTypes.string,
-              })
-            ),
-          })
-        ),
-      })
-    ),
-  ]),
-
-  /**
-   * `true` to render IBM Profile Menu component.
-   */
-  hasProfile: PropTypes.bool,
-
-  /**
-   * Custom login url in masthead profile menu (experimental)
-   */
-  customProfileLogin: PropTypes.string,
-
-  /**
-   * `true` to render SearchBar component.
-   */
-  hasSearch: PropTypes.bool,
-
-  /**
-   * `true` to have search field open on page load. Does not close `onBlur`
-   */
-  searchOpenOnload: PropTypes.bool,
-
-  /**
-   * Platform name that appears on L0.
-   * Includes platform name (only available with `default` and `custom navigation`).
-   * Object requires `name` and `url`.
-   * See [docs](http://www.ibm.com/standards/carbon/react/?path=/docs/components-masthead--default#platform) for more details.
-   */
-  platform: PropTypes.shape({
-    name: PropTypes.string,
-    url: PropTypes.string,
-  }),
-
-  /**
-   * L0 menu item to render with selected state. Needs to match `titleEnglish` field from nav data.
-   */
-  selectedMenuItem: PropTypes.string,
-
-  /**
-   * Placeholder value for search input.
-   */
-  placeHolderText: PropTypes.string,
-
-  /**
-   * Initial value for search input.
-   */
-  initialSearchTerm: PropTypes.string,
-
-  /**
-   * All the data that goes to the L1 of the Masthead.
-   */
-  mastheadL1Data: PropTypes.shape({
-    /**
-     * Platform name that appears on L1.
-     * Includes platform name
-     * Object requires `name` and `url`.
-     * See [docs](http://www.ibm.com/standards/carbon/react/?path=/docs/components-masthead--default#platform) for more details.
-     */
-    platform: PropTypes.shape({
-      name: PropTypes.string,
-      url: PropTypes.string,
-    }),
-
-    /**
-     * Text for the eyebrow link in masthead L1 (experimental).
-     */
-    eyebrowText: PropTypes.string,
-
-    /**
-     * URL for the eyebrow link in masthead L1 (experimental).
-     */
-    eyebrowLink: PropTypes.string,
-    /**
-     * Navigation data object/string for Masthead L1. Use one from below:
-     *
-     * | Behavior           | Data Type | Description                                 | Example                             |
-     * | ------------------ | --------- | ------------------------------------------- | ----------------------------------- |
-     * | default navigation | String    | Default navigation data from IBM.com        | `<MastheadL1 navigationL1="default" />` |
-     * | custom navigation  | Object    | Pass in custom navigation data as an object | `<MastheadL1 navigationL1={myNavObj}/>` |
-     * | none               | null      | No navigation                               | `<MastheadL1 />`                      |
-     *
-     * `Custom` navigation data must follow the same structure and key names as `default`.
-     * See [this](https://1.www.s81c.com/common/carbon-for-ibm-dotcom/translations/masthead-footer/usen.json) for an example.
-     */
-    navigationL1: PropTypes.oneOfType([
-      PropTypes.string,
-      PropTypes.arrayOf(
-        PropTypes.shape({
-          hasMenu: PropTypes.bool,
-          title: PropTypes.string,
-          url: PropTypes.string,
-          menuSections: PropTypes.arrayOf(
-            PropTypes.shape({
-              menuItems: PropTypes.arrayOf(
-                PropTypes.shape({
-                  title: PropTypes.string,
-                  url: PropTypes.string,
-                })
-              ),
-            })
-          ),
-        })
-      ),
-    ]),
-  }),
-
-  /**
-   * Custom typeahead API function
-   */
-  customTypeaheadApi: PropTypes.func,
-
-  /**
-   * Multiple search sections
-   */
-  multiSection: PropTypes.bool,
-};
-
-Masthead.defaultProps = {
-  hasProfile: true,
-  hasSearch: true,
-  searchOpenOnload: false,
-  selectedMenuItem: '',
-  platform: null,
-  placeHolderText: 'Search all of IBM',
-  initialSearchTerm: '',
-  mastheadL1Data: null,
-};
-
-export default deprecate(
-  Masthead,
-  `
-  The React Masthead is now in feature freeze; any new features or enhancements will only be added to the Web Components Masthead. 
-  
-  We will continue to address any bugs specific to the React version for the rest of of Carbon for IBM.com v1.
-  
-  Please refer to the Web Components Masthead documentation for further details.
-  https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-masthead--default
-`
-);
diff --git a/packages/react/src/components/Masthead/MastheadL1.js b/packages/react/src/components/Masthead/MastheadL1.js
deleted file mode 100644
index a43273cb210..00000000000
--- a/packages/react/src/components/Masthead/MastheadL1.js
+++ /dev/null
@@ -1,163 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect } from 'react';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import HeaderMenu from '../carbon-components-react/UIShell/HeaderMenu';
-import HeaderMenuItem from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderMenuItem';
-import HeaderNavContainer from './HeaderNavContainer';
-import HeaderNavigation from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderNavigation';
-import MegaMenu from './MastheadMegaMenu/MegaMenu';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * MastHead L1 component.
- */
-const MastheadL1 = ({ navigationL1, ...rest }) => {
-  const className = cx({
-    [`${prefix}--masthead__l1`]: true,
-  });
-  const childLinkChecker = rest.hasCurrentUrl();
-
-  useEffect(() => {
-    document
-      .querySelector(`.${prefix}--header__menu-bar`)
-      ?.setAttribute('role', 'menu');
-  }, []);
-
-  const mastheadL1Links = navigationL1.map((link, index) => {
-    const selectedUrlItem =
-      childLinkChecker && childLinkChecker(link, root.location?.href);
-    const autoid = `${stablePrefix}--masthead-${rest.navType}__l1-nav${index}`;
-    const selected = rest.selectedMenuItem
-      ? link.titleEnglish === rest.selectedMenuItem
-      : selectedUrlItem;
-    if (link.hasMenu || link.hasMegapanel) {
-      return (
-        <HeaderMenu
-          aria-label={link.title}
-          menuLinkName={link.title}
-          className={cx({
-            [`${prefix}--masthead__megamenu__l1-nav`]: link.hasMegapanel,
-          })}
-          selected={selected}
-          autoId={autoid}
-          key={index}>
-          {renderNav(link, rest.navType, autoid)}
-        </HeaderMenu>
-      );
-    }
-
-    return (
-      <HeaderMenuItem
-        data-selected={`${!!selected}`}
-        href={link.url}
-        data-autoid={autoid}
-        key={index}>
-        {link.title}
-      </HeaderMenuItem>
-    );
-  });
-
-  return (
-    <>
-      <div className={className}>
-        <div className={`${prefix}--masthead__l1-inner-container`}>
-          <div
-            className={`${prefix}--masthead__l1-name`}
-            data-selected={!rest.selectedMenuItem}>
-            <span className={`${prefix}--masthead__l1-name-title`}>
-              <a href={rest.platform.url}>{rest.platform.name}</a>
-            </span>
-          </div>
-          <HeaderNavContainer>
-            <HeaderNavigation
-              className={`${prefix}--masthead__l1-nav`}
-              aria-label="Main Navigation">
-              {mastheadL1Links}
-            </HeaderNavigation>
-          </HeaderNavContainer>
-        </div>
-      </div>
-    </>
-  );
-};
-
-/**
- * Loops through and renders a list of links for the masthead nav
- *
- * @param {object} link A list of links to be rendered
- * @param {string} navType navigation type for autoids
- * @param {string} autoid autoid predecessor for megamenu items/menu items data-autoids
- * @returns {object} JSX object
- */
-function renderNav(link, navType, autoid) {
-  const navItems = [];
-  if (link.hasMegapanel) {
-    navItems.push(<MegaMenu key={link.title} data={link} autoid={autoid} />);
-  } else {
-    link.menuSections.forEach((section, i) => {
-      section.menuItems.forEach((item, j) => {
-        navItems.push(
-          <HeaderMenuItem
-            href={item.url}
-            data-autoid={`${stablePrefix}--masthead-${navType}__l1-nav${i}-item${j}`}
-            key={item.title}>
-            {item.title}
-          </HeaderMenuItem>
-        );
-      });
-    });
-  }
-  return navItems;
-}
-
-MastheadL1.propTypes = {
-  /**
-   * The title (experimental).
-   */
-  title: PropTypes.string,
-
-  /**
-   * The optional title link (experimental)
-   */
-  titleLink: PropTypes.string,
-
-  /**
-   * Object containing masthead l1 navigation elements.
-   */
-  navigationL1: PropTypes.arrayOf(
-    PropTypes.shape({
-      hasMenu: PropTypes.bool,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      menuSections: PropTypes.arrayOf(
-        PropTypes.shape({
-          menuItems: PropTypes.arrayOf(
-            PropTypes.shape({
-              title: PropTypes.string,
-              url: PropTypes.string,
-            })
-          ),
-        })
-      ),
-    })
-  ),
-};
-
-MastheadL1.defaultProps = {
-  navigationL1: [],
-  titleLink: null,
-};
-
-export default MastheadL1;
diff --git a/packages/react/src/components/Masthead/MastheadLeftNav.js b/packages/react/src/components/Masthead/MastheadLeftNav.js
deleted file mode 100755
index b84666467bc..00000000000
--- a/packages/react/src/components/Masthead/MastheadLeftNav.js
+++ /dev/null
@@ -1,462 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect, useRef, useState } from 'react';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import HeaderSideNavItems from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderSideNavItems';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-import SideNav from '../../internal/vendor/carbon-components-react/components/UIShell/SideNav';
-import SideNavItems from '../../internal/vendor/carbon-components-react/components/UIShell/SideNavItems';
-import SideNavMenu from '../carbon-components-react/UIShell/SideNavMenu';
-import SideNavMenuItem from '../../internal/vendor/carbon-components-react/components/UIShell/SideNavMenuItem';
-import SideNavMenuSection from '../carbon-components-react/UIShell/SideNavMenuSection';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Masthead left nav component.
- */
-const MastheadLeftNav = ({
-  backButtonText,
-  navigation,
-  isSideNavExpanded,
-  platform,
-  ...rest
-}) => {
-  /**
-   * checks if menu item's children url match the current url path, if so return the menu item and its children
-   * will set the selected state for entire hierarchy of menu items
-   *
-   * @returns {object} selectedItems
-   */
-  // eslint-disable-next-line class-methods-use-this
-  const _selectedLeftNavItems = () => {
-    let matchFound = false;
-    const selectedItems = { level0: '', level1: '', level2: '' };
-
-    return ({
-      menu = [
-        { url: '', megapanelContent: { quickLinks: { links: [{ url: '' }] } } },
-      ],
-      key = '',
-      parentItemUrl = '',
-    }) => {
-      const currentUrlPath = root.location?.href;
-      if (!matchFound) {
-        if (parentItemUrl === currentUrlPath) {
-          selectedItems.level0 = `${key}`;
-          matchFound = true;
-        }
-        // check if child url matches current url path
-        else {
-          for (let i = 0; i < menu?.length; i++) {
-            if (menu[i]?.url === currentUrlPath) {
-              selectedItems.level0 = `${key}`;
-              selectedItems.level1 = `${key}-${i}`;
-              matchFound = true;
-              break;
-            } else {
-              const links = menu[i]?.megapanelContent?.quickLinks?.links;
-              for (let k = 0; k < links?.length; k++) {
-                if (links[k]?.url === currentUrlPath) {
-                  selectedItems.level0 = `${key}`;
-                  selectedItems.level1 = `${key}-${i}`;
-                  selectedItems.level2 = `${key}-${i}-${k}`;
-                  matchFound = true;
-                  break;
-                }
-              }
-            }
-          }
-        }
-        return selectedItems;
-      }
-      return selectedItems;
-    };
-  };
-
-  const selectedUrlCheck = _selectedLeftNavItems();
-
-  /**
-   * Keep track of which menu section is visible/expanded and ties current visible panel
-   * back to its parent menu panel
-   *
-   * Example interaction and menuState change:
-   * 1. When left nav is first opened - default state --> {level0: -1, level1: -1}
-   * 2. User then clicks on first menu item (item index is 0) --> {level0: 0, level1: -1}
-   * 3. User then clicks on second menu item (item index is 1) of current visible panel --> {level0: 0, level1: 1}
-   * 4. User then clicks back button --> {level0: 0, level1: -1}
-   * 5. User then clicks back button again, going back to first panel --> {level0: -1, level1: -1}
-   */
-  const [menuState, setMenuState] = useState({ level0: -1, level1: -1 });
-
-  // reset the left nav to default menu section when closed
-  useEffect(() => {
-    if (!isSideNavExpanded) {
-      setMenuState({ level0: -1, level1: -1 });
-    }
-  }, [isSideNavExpanded]);
-
-  const sideNavRef = useRef();
-
-  const level0Items = [];
-  const level1Items = [];
-
-  const sideNav = () => {
-    let selectedItems;
-
-    navigation.map((link, i) => {
-      const dataTitle = link.titleEnglish
-        ? link.titleEnglish
-            .replace(/[^-a-zA-Z0-9_ ]/g, '')
-            .replace(/ +/g, '-')
-            .toLowerCase()
-        : null;
-
-      const autoid = `${stablePrefix}--masthead-${rest.navType}-sidenav__${
-        rest.hasL1Data ? 'l1' : 'l0'
-      }-nav${i}`;
-
-      const menuItems = link.menuSections?.[0]?.menuItems;
-      selectedItems = selectedUrlCheck({
-        menu: menuItems,
-        key: i,
-        parentItemUrl: link.url,
-      });
-
-      if (
-        link.hasMenu ||
-        link.hasMegaPanel ||
-        link.menuSections?.length !== 0
-      ) {
-        level1Items.push({
-          title: link.title,
-          autoid,
-          parentKey: i,
-          sections: link.menuSections,
-        });
-
-        level0Items.push(
-          <SideNavMenu
-            autoid={autoid}
-            dataTitle={dataTitle}
-            key={link.title}
-            title={link.title}
-            selected={
-              !rest.selectedMenuItem
-                ? selectedItems?.level0 === `${i}`
-                : rest.selectedMenuItem === link.titleEnglish
-            }
-            onToggle={() => setMenuState({ ...menuState, level0: i })}
-            isSideNavExpanded={i === menuState.level0 && menuState.level1 == -1}
-          />
-        );
-      } else {
-        level0Items.push(
-          <SideNavMenuItem
-            href={link.url}
-            className={
-              ((!rest.selectedMenuItem
-                ? selectedItems?.level0 === `${i}`
-                : rest.selectedMenuItem === link.titleEnglish) &&
-                `${prefix}--masthead__side-nav--submemu--selected`) ||
-              null
-            }
-            data-autoid={autoid}
-            key={link.title}
-            role="menuitem">
-            {link.title}
-          </SideNavMenuItem>
-        );
-      }
-    });
-
-    const level1 = _renderLevel1Submenus(
-      level1Items,
-      backButtonText,
-      setMenuState,
-      menuState,
-      rest.navType,
-      rest.selectedMenuItem,
-      selectedItems
-    );
-
-    const level2Submenus = _renderLevel2Submenus(
-      level1.submenus,
-      backButtonText,
-      setMenuState,
-      menuState,
-      rest.navType,
-      rest.selectedMenuItem,
-      selectedItems
-    );
-
-    return (
-      <div>
-        <SideNavMenuSection
-          id={`panel__(-1,-1)`}
-          focusNode={sideNavRef.current?.parentNode.querySelector(
-            `.${prefix}--header__menu-toggle`
-          )}
-          show={menuState.level0 === -1}>
-          {level0Items}
-        </SideNavMenuSection>
-        {level1.menuSections}
-        {level2Submenus}
-      </div>
-    );
-  };
-
-  return (
-    <SideNav
-      aria-label="Side navigation"
-      expanded={isSideNavExpanded}
-      isPersistent={false}
-      ref={sideNavRef}
-      onOverlayClick={rest.onOverlayClick}>
-      <nav
-        data-autoid={`${stablePrefix}--masthead-${rest.navType}-sidenav__l0`}>
-        {platform && (
-          <a
-            data-autoid={`${stablePrefix}--masthead-${rest.navType}-sidenav__l0-productname`}
-            href={platform.url}
-            className={cx(
-              `${prefix}--side-nav__submenu`,
-              `${prefix}--side-nav__submenu-platform`
-            )}>
-            {platform.name}
-          </a>
-        )}
-        <SideNavItems>
-          <HeaderSideNavItems>{sideNav()}</HeaderSideNavItems>
-        </SideNavItems>
-      </nav>
-    </SideNav>
-  );
-};
-
-/**
- * Loops through and renders a list of links for the side nav
- *
- * @param {Array} menuItems menu items
- * @param {string} backButtonText back button text
- * @param {Function} setMenuState setState func
- * @param {object} menuState currrent menu that is visible
- * @param {string} navType navigation type
- * @param {string} selectedMenuItem inputted selected menu item
- * @param {object} selectedItems selected menu items based on url
- * @returns {object} JSX object
- */
-function _renderLevel1Submenus(
-  menuItems,
-  backButtonText,
-  setMenuState,
-  menuState,
-  navType,
-  selectedMenuItem,
-  selectedItems
-) {
-  // gather submenu items for next level
-  const submenus = [];
-
-  const sideNavMenuSections = menuItems.map((menu, i) => {
-    // get array of highlighted menu items to render first
-    let highlightedItems = [];
-    const items = [];
-
-    menu.sections?.[0].menuItems.forEach((item) => {
-      if (item.highlighted) return highlightedItems.push(item);
-      return items.push(item);
-    });
-
-    const sortedMenu = highlightedItems.concat(items);
-    const highlightedCount = highlightedItems.length;
-
-    return (
-      <SideNavMenuSection
-        isSubmenu
-        className={cx({
-          [`${prefix}--side-nav__menu-section-submenu`]: true,
-          [`${prefix}--side-nav__menu-section-submenu--expanded`]:
-            menuState.level0 === menu.parentKey && menuState.level1 >= 0,
-        })}
-        id={`panel__(${menu.parentKey},-1)`}
-        heading={menu.sections?.[0]?.heading}
-        key={menu.title}
-        title={menu.title}
-        navType={navType}
-        backButtonText={backButtonText}
-        onBackClick={() => setMenuState({ level0: -1, level1: -1 })}
-        show={menuState.level0 === menu.parentKey && menuState.level1 === -1}>
-        {sortedMenu.map((item, index) => {
-          submenus.push({
-            title: item.title,
-            titleUrl: item.url,
-            autoid: `${menu.autoid}-list${index}`,
-            sections: item.megapanelContent?.quickLinks?.links,
-            parentKey: menu.parentKey,
-            index,
-          });
-
-          const highlightedClass =
-            (highlightedCount !== 0 &&
-              index + 1 === highlightedCount &&
-              `${prefix}--masthead__side-nav__last-highlighted`) ||
-            null;
-
-          if (item.megapanelContent) {
-            return (
-              <SideNavMenu
-                autoid={`${menu.autoid}-list${index}`}
-                title={item.title}
-                key={item.title}
-                selected={
-                  !selectedMenuItem &&
-                  selectedItems?.level1 === `${menu.parentKey}-${index}`
-                }
-                className={highlightedClass}
-                onToggle={() => setMenuState({ ...menuState, level1: index })}
-                isSideNavExpanded={
-                  i === menuState.level0 && menuState.level1 == index
-                }
-              />
-            );
-          }
-
-          return (
-            <SideNavMenuItem
-              href={item.url}
-              className={highlightedClass}
-              data-autoid={`${menu.autoid}-list${index}`}
-              key={item.title}
-              className={
-                (!selectedMenuItem &&
-                  selectedItems?.level1 === `${menu.parentKey}-${index}` &&
-                  `${prefix}--masthead__side-nav--submemu--selected`) ||
-                null
-              }
-              role="menuitem">
-              {item.title}
-            </SideNavMenuItem>
-          );
-        })}
-      </SideNavMenuSection>
-    );
-  });
-
-  return { menuSections: sideNavMenuSections, submenus };
-}
-
-/**
- * Loops through and renders a list of links for the side nav
- *
- * @param {Array} menuItems menu items
- * @param {string} backButtonText back button text
- * @param {Function} setMenuState setState func
- * @param {object} menuState currrent menu that is visible
- * @param {string} navType navigation type
- * @param {string} selectedMenuItem inputted selected menu item
- * @param {object} selectedItems selected menu items based on url
- * @returns {object} JSX object
- */
-function _renderLevel2Submenus(
-  menuItems,
-  backButtonText,
-  setMenuState,
-  menuState,
-  navType,
-  selectedMenuItem,
-  selectedItems
-) {
-  const sideNavMenuSections = menuItems.map((menu) => {
-    return (
-      <SideNavMenuSection
-        isSubmenu
-        className={`${prefix}--side-nav__menu-section-submenu`}
-        id={`panel__(${menu.parentKey},${menu.index})`}
-        key={menu.title}
-        title={menu.title}
-        titleUrl={menu.titleUrl}
-        navType={navType}
-        backButtonText={backButtonText}
-        onBackClick={() => setMenuState({ ...menuState, level1: -1 })}
-        show={
-          menuState.level0 === menu.parentKey && menuState.level1 === menu.index
-        }>
-        {menu.sections?.map((item, k) => {
-          return (
-            <SideNavMenuItem
-              href={item.url}
-              data-autoid={`${menu.autoid}-item${k}`}
-              key={item.title}
-              className={
-                (!selectedMenuItem &&
-                  selectedItems?.level2 ===
-                    `${menu.parentKey}-${menu.index}-${k}` &&
-                  `${prefix}--masthead__side-nav--submemu--selected`) ||
-                null
-              }
-              role="menuitem">
-              {item.title}
-            </SideNavMenuItem>
-          );
-        })}
-      </SideNavMenuSection>
-    );
-  });
-
-  return sideNavMenuSections;
-}
-
-MastheadLeftNav.propTypes = {
-  /**
-   * Back button text
-   */
-  backButtonText: PropTypes.string,
-
-  /**
-   * Object containing left navigation elements.
-   */
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      hasMenu: PropTypes.bool,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      menuSections: PropTypes.arrayOf(
-        PropTypes.shape({
-          menuItems: PropTypes.arrayOf(
-            PropTypes.shape({
-              title: PropTypes.string,
-              url: PropTypes.string,
-            })
-          ),
-        })
-      ),
-    })
-  ),
-  /**
-   * `true` to make the sidenav expanded.
-   */
-  isSideNavExpanded: PropTypes.bool,
-
-  /**
-   * Platform object with name and url
-   */
-  platform: PropTypes.shape({
-    name: PropTypes.string,
-    url: PropTypes.string,
-  }),
-};
-
-MastheadLeftNav.defaultProps = {
-  backButtonText: 'Back',
-};
-
-export default MastheadLeftNav;
diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js b/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js
deleted file mode 100644
index 4d27c806d54..00000000000
--- a/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryGroup.js
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight16 from '@carbon/icons-react/es/arrow--right/16';
-import LinkWithIcon from '../../LinkWithIcon/LinkWithIcon';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Category Group of the MegaMenu
- * contains the category headline and sublinks
- */
-const CategoryGroup = ({ href, title, children, ...rest }) => (
-  <div className={`${prefix}--masthead__megamenu__category-group`}>
-    <div className={`${prefix}--masthead__megamenu__category-group-shield`}>
-      <div className={`${prefix}--masthead__megamenu__category-group-content`}>
-        {href ? (
-          <LinkWithIcon
-            href={href}
-            className={`${prefix}--masthead__megamenu__category-headline`}
-            data-autoid={`${rest.autoid}-list${rest.index}`}>
-            <span>{title}</span>
-            <ArrowRight16 />
-          </LinkWithIcon>
-        ) : (
-          <div
-            className={`${prefix}--masthead__megamenu__category-headline`}
-            data-autoid={`${rest.autoid}-list${rest.index}`}>
-            <p>{title}</p>
-          </div>
-        )}
-        {children}
-      </div>
-    </div>
-  </div>
-);
-
-CategoryGroup.propTypes = {
-  /**
-   * Category Groups sublinks
-   */
-  children: PropTypes.node,
-
-  /**
-   * url of the Category Group headline
-   */
-  href: PropTypes.string,
-
-  /**
-   * Category Group headline title
-   */
-  title: PropTypes.string.isRequired,
-};
-
-export default CategoryGroup;
diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryLink.js b/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryLink.js
deleted file mode 100644
index 05b4b86b926..00000000000
--- a/packages/react/src/components/Masthead/MastheadMegaMenu/CategoryLink.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight16 from '@carbon/icons-react/es/arrow--right/16';
-import Link from '../../../internal/vendor/carbon-components-react/components/Link/Link';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Category sublink
- */
-const CategoryLink = ({ href, title, highlighted, ...rest }) => {
-  return (
-    <>
-      {highlighted ? (
-        <Link
-          className={`${prefix}--masthead__megamenu__category-sublink--highlighted`}
-          href={href}
-          renderIcon={ArrowRight16}>
-          <span>{title}</span>
-        </Link>
-      ) : (
-        <a
-          tabIndex={0}
-          href={href}
-          className={`${prefix}--masthead__megamenu__category-sublink`}
-          data-autoid={`${rest.autoid}-item${rest.index}`}>
-          {title}
-        </a>
-      )}
-    </>
-  );
-};
-
-CategoryLink.propTypes = {
-  /**
-   * Category sublink href
-   */
-  href: PropTypes.string.isRequired,
-
-  /**
-   * Category sublink text
-   */
-  title: PropTypes.string.isRequired,
-
-  /**
-   * Determines whether to render regular link style or link with icon
-   */
-  highlighted: PropTypes.bool,
-};
-
-export default CategoryLink;
diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/LeftNavigation.js b/packages/react/src/components/Masthead/MastheadMegaMenu/LeftNavigation.js
deleted file mode 100644
index e5e73cf39e7..00000000000
--- a/packages/react/src/components/Masthead/MastheadMegaMenu/LeftNavigation.js
+++ /dev/null
@@ -1,31 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Left Navigation Section of MegaMenu
- */
-const LeftNavigation = ({ children, ...props }) => (
-  <div
-    className={`${prefix}--masthead__megamenu__highlight-section`}
-    {...props}>
-    {children}
-  </div>
-);
-
-LeftNavigation.propTypes = {
-  /**
-   * Category Groups to be rendered in the Left Navigation Section
-   */
-  children: PropTypes.node.isRequired,
-};
-
-export default LeftNavigation;
diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/MegaMenu.js b/packages/react/src/components/Masthead/MastheadMegaMenu/MegaMenu.js
deleted file mode 100644
index 23932a273b7..00000000000
--- a/packages/react/src/components/Masthead/MastheadMegaMenu/MegaMenu.js
+++ /dev/null
@@ -1,133 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 CategoryGroup from './CategoryGroup';
-import CategoryLink from './CategoryLink';
-import LeftNavigation from './LeftNavigation';
-import NavigationGroup from './NavigationGroup';
-import PropTypes from 'prop-types';
-import React from 'react';
-import RightNavigation from './RightNavigation';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Masthead megamenu component.
- */
-const MegaMenu = React.forwardRef(function MegaMenu(props, ref) {
-  const { data, ...rest } = props;
-  let highlightedItems = [];
-  let viewAllLink;
-  let menuItems = [];
-
-  data.menuSections[0].menuItems.forEach((item) => {
-    if (item.highlighted) return highlightedItems.push(item);
-    if (item.megaPanelViewAll) return (viewAllLink = item);
-    else return menuItems.push(item);
-  });
-
-  const hasHighlights = highlightedItems.length !== 0;
-
-  const heading = data.menuSections[0]?.heading;
-
-  return (
-    <NavigationGroup ref={ref}>
-      {hasHighlights && (
-        <LeftNavigation>
-          {heading && (
-            <p className={`${prefix}--masthead__megamenu__copy`}>{heading}</p>
-          )}
-          {highlightedItems.map((item, i) => (
-            <CategoryGroup
-              autoid={rest.autoid}
-              key={i}
-              href={item.url}
-              title={item.title}>
-              {item.megapanelContent?.description && (
-                <p className={`${prefix}--masthead__megamenu__copy`}>
-                  {item.megapanelContent?.description}
-                </p>
-              )}
-              {item.megapanelContent?.quickLinks?.links.map(
-                ({ title, url, highlightedLink }, key) => (
-                  <CategoryLink
-                    href={url}
-                    title={title}
-                    highlighted={highlightedLink}
-                    autoid={`${rest.autoid}-list${i}`}
-                    key={key}
-                  />
-                )
-              )}
-            </CategoryGroup>
-          ))}
-        </LeftNavigation>
-      )}
-      <RightNavigation
-        hasHighlights={hasHighlights}
-        viewAllLinkHref={viewAllLink?.url}
-        viewAllLinkTitle={viewAllLink?.title}
-        autoid={rest.autoid}>
-        {menuItems.map((item, i) => (
-          <CategoryGroup
-            key={i}
-            autoid={rest.autoid}
-            index={i + highlightedItems.length}
-            href={item.url}
-            title={item.title}>
-            {item.megapanelContent?.quickLinks?.links.map(
-              ({ title, url }, key) => (
-                <CategoryLink
-                  key={key}
-                  href={url}
-                  title={title}
-                  autoid={`${rest.autoid}-list${i + highlightedItems.length}`}
-                  index={key}
-                />
-              )
-            )}
-          </CategoryGroup>
-        ))}
-      </RightNavigation>
-    </NavigationGroup>
-  );
-});
-
-MegaMenu.propTypes = {
-  /**
-   * Object containing megamenu nav data
-   */
-  data: PropTypes.shape({
-    hasMenupanel: PropTypes.bool,
-    title: PropTypes.string,
-    url: PropTypes.string,
-    menuSections: PropTypes.arrayOf(
-      PropTypes.shape({
-        heading: PropTypes.string,
-        menuItems: PropTypes.arrayOf(
-          PropTypes.shape({
-            highlighted: PropTypes.bool,
-            title: PropTypes.string,
-            url: PropTypes.string,
-            megapanelContent: PropTypes.shape({
-              quickLinks: PropTypes.shape({
-                links: PropTypes.arrayOf(
-                  PropTypes.shape({
-                    title: PropTypes.string,
-                    url: PropTypes.string,
-                  })
-                ),
-              }),
-            }),
-          })
-        ),
-      })
-    ),
-  }),
-};
-
-export default MegaMenu;
diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/NavigationGroup.js b/packages/react/src/components/Masthead/MastheadMegaMenu/NavigationGroup.js
deleted file mode 100644
index ba1ff0f0bed..00000000000
--- a/packages/react/src/components/Masthead/MastheadMegaMenu/NavigationGroup.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-const { stablePrefix } = ddsSettings;
-
-const { prefix } = settings;
-
-/**
- * MegaMenu panel
- */
-const NavigationGroup = React.forwardRef(function NavigationGroup(props, ref) {
-  const { children, ...rest } = props;
-  return (
-    <section
-      className={`${prefix}--masthead__megamenu`}
-      data-autoid={`${stablePrefix}--masthead__megamenu`}
-      ref={ref}
-      {...rest}>
-      <div className={`${prefix}--masthead__megamenu__container`}>
-        <div className={`${prefix}--masthead__megamenu__container--row`}>
-          {children}
-        </div>
-      </div>
-    </section>
-  );
-});
-
-NavigationGroup.propTypes = {
-  /**
-   * children elements
-   */
-  children: PropTypes.node,
-};
-
-export default NavigationGroup;
diff --git a/packages/react/src/components/Masthead/MastheadMegaMenu/RightNavigation.js b/packages/react/src/components/Masthead/MastheadMegaMenu/RightNavigation.js
deleted file mode 100644
index 98c2ce0b224..00000000000
--- a/packages/react/src/components/Masthead/MastheadMegaMenu/RightNavigation.js
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight16 from '@carbon/icons-react/es/arrow--right/16';
-import classnames from 'classnames';
-import LinkWithIcon from '../../LinkWithIcon/LinkWithIcon';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Right/Main Panel Navigation of MegaMenu
- */
-const RightNavigation = ({
-  children,
-  viewAllLinkHref,
-  viewAllLinkTitle,
-  hasHighlights,
-  ...rest
-}) => (
-  <div className={`${prefix}--masthead__megamenu__categories-section`}>
-    <div
-      className={classnames(`${prefix}--masthead__megamenu__categories`, {
-        [`${prefix}--masthead__megamenu--hasHighlights`]: hasHighlights,
-        [`${prefix}--masthead__megamenu--hasViewAllLink`]: viewAllLinkHref,
-      })}>
-      {children}
-    </div>
-    {viewAllLinkHref && (
-      <LinkWithIcon
-        className={`${prefix}--masthead__megamenu__view-all-cta`}
-        data-autoid={`${rest.autoid}-view-all`}
-        href={viewAllLinkHref}
-        iconInline={false}>
-        <span>{viewAllLinkTitle}</span>
-        <ArrowRight16 />
-      </LinkWithIcon>
-    )}
-  </div>
-);
-
-RightNavigation.propTypes = {
-  /**
-   * Category Groups to be rendered in the Left Navigation Section
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * Determines whether to render the Highlight Section (Left Navigation)
-   */
-  hasHighlights: PropTypes.bool,
-
-  /**
-   * Megamenu view all cta url
-   */
-  viewAllLinkHref: PropTypes.string,
-
-  /**
-   * Megamenu view all cta title
-   */
-  viewAllLinkTitle: PropTypes.string,
-};
-
-export default RightNavigation;
diff --git a/packages/react/src/components/Masthead/MastheadProfile.js b/packages/react/src/components/Masthead/MastheadProfile.js
deleted file mode 100755
index e725db689ae..00000000000
--- a/packages/react/src/components/Masthead/MastheadProfile.js
+++ /dev/null
@@ -1,83 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 OverflowMenu from '../../internal/vendor/carbon-components-react/components/OverflowMenu/OverflowMenu';
-import OverflowMenuItem from '../../internal/vendor/carbon-components-react/components/OverflowMenuItem/OverflowMenuItem';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * MastHead Profile component.
- */
-const MastheadProfile = ({
-  overflowMenuProps,
-  overflowMenuItemProps,
-  profileMenu,
-  customProfileLogin,
-}) => {
-  /**
-   * Masthead profile menu
-   *
-   * @returns {*} Masthead profile menu
-   */
-  const profileNav = profileMenu.map((item, i) => {
-    const loginUrl =
-      customProfileLogin && item.id === 'signin'
-        ? customProfileLogin
-        : item.url;
-
-    return (
-      <OverflowMenuItem
-        {...overflowMenuItemProps}
-        itemText={item.title}
-        href={loginUrl}
-        hasDivider={i > 0}
-        key={i}
-      />
-    );
-  });
-
-  return (
-    <OverflowMenu
-      className={`${prefix}--header__action`}
-      {...overflowMenuProps}>
-      {profileNav}
-    </OverflowMenu>
-  );
-};
-
-MastheadProfile.propTypes = {
-  /**
-   * The props for Carbon `<OverflowMenu>`.
-   */
-  overflowMenuProps: PropTypes.object,
-
-  /**
-   * The props for Carbon `<OverflowMenuItem>`.
-   */
-  overflowMenuItemProps: PropTypes.object,
-
-  /**
-   * The data to generate the Carbon `<OverflowMenuItem>`s from.
-   */
-  profileMenu: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string,
-      url: PropTypes.string,
-    })
-  ),
-
-  /**
-   * Custom login url in masthead profile menu (experimental)
-   */
-  customProfileLogin: PropTypes.string,
-};
-
-export default MastheadProfile;
diff --git a/packages/react/src/components/Masthead/MastheadSearch.js b/packages/react/src/components/Masthead/MastheadSearch.js
deleted file mode 100755
index cf9287195b5..00000000000
--- a/packages/react/src/components/Masthead/MastheadSearch.js
+++ /dev/null
@@ -1,686 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, {
-  forwardRef,
-  useCallback,
-  useEffect,
-  useReducer,
-  useRef,
-  useState,
-} from 'react';
-import Autosuggest from 'react-autosuggest';
-import Close20 from '@carbon/icons-react/es/close/20';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import escapeRegExp from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/escaperegexp/escaperegexp';
-import HeaderGlobalAction from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderGlobalAction';
-import LocaleAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Locale/Locale';
-import MastheadSearchInput from './MastheadSearchInput';
-import MastheadSearchSuggestion from './MastheadSearchSuggestion';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import Search20 from '@carbon/icons-react/es/search/20';
-import SearchTypeaheadAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/SearchTypeahead/SearchTypeahead';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Sets up the redirect URL when a user selects a search suggestion
- *
- * @type {string}
- * @private
- */
-const _redirectUrl =
-  process.env.SEARCH_REDIRECT_ENDPOINT ||
-  `https://www.ibm.com/search?lnk=mhsrch`;
-
-/**
- * Converts the string to lower case and trims extra white space
- *
- * @param {string} valueString The text field
- * @returns {string} lower cased and trimmed text
- */
-const _trimAndLower = (valueString) => valueString.toLowerCase().trim();
-
-/**
- * When a suggestion item is clicked, we populate the input with its name field
- *
- * @param {object} suggestion The individual object or key name from the data
- * @returns {*} The name val
- */
-const _getSuggestionValue = (suggestion) => suggestion[0] || suggestion.name;
-
-/**
- * Reducer for the useReducer hook
- *
- * @param {object} state The state
- * @param {object} action contains the type and payload
- * @returns {*} the new state value
- * @private
- */
-function _reducer(state, action) {
-  switch (action.type) {
-    case 'setVal':
-      return Object.assign({}, state, { val: action.payload.val });
-    case 'emptySuggestions':
-      return Object.assign({}, state, { suggestions: [] });
-    case 'setPrevSuggestions':
-      return Object.assign({}, state, {
-        prevSuggestions: action.payload.prevSuggestions,
-      });
-    case 'setSuggestionsToPrevious':
-      return Object.assign({}, state, { suggestions: state.prevSuggestions });
-    case 'showSuggestionsContainer':
-      return Object.assign({}, state, { suggestionContainerVisible: true });
-    case 'hideSuggestionsContainer':
-      return Object.assign({}, state, { suggestionContainerVisible: false });
-    case 'setSearchOpen':
-      return Object.assign({}, state, { isSearchOpen: true });
-    case 'setSearchClosed':
-      return Object.assign({}, state, { isSearchOpen: false });
-    case 'setLc':
-      return Object.assign({}, state, { lc: action.payload.lc });
-    case 'setCc':
-      return Object.assign({}, state, { cc: action.payload.cc });
-    default:
-      return state;
-  }
-}
-
-let openOnLoadFocus = true;
-
-/**
- * MastheadSearch component which includes autosuggestion results from the
- * SearchTypeaheadAPI.
- *
- * The search field utilizes "react-autosuggest". Documentation available here:
- * http://react-autosuggest.js.org/
- * https://github.com/moroshko/react-autosuggest
- */
-const MastheadSearch = forwardRef(
-  (
-    {
-      placeHolderText,
-      initialSearchTerm,
-      renderValue,
-      searchOpenOnload,
-      navType,
-      isSearchActive: propIsSearchActive,
-      onChangeSearchActive,
-      ...rest
-    },
-    searchIconButton
-  ) => {
-    const { ref } = useSearchVisible(false);
-
-    /**
-     * Initial state of the autocomplete component
-     *
-     * @type {{val: string, prevSuggestions: Array, suggestions: Array, suggestionContainerVisible: boolean}}
-     * @private
-     */
-    const _initialState = {
-      val: initialSearchTerm || getValueFromQueryString() || '',
-      suggestions: [],
-      prevSuggestions: [],
-      suggestionContainerVisible: false,
-      isSearchOpen: searchOpenOnload,
-      lc: 'en',
-      cc: 'us',
-    };
-
-    const [state, dispatch] = useReducer(_reducer, _initialState);
-
-    const [isSearchActive, setIsSearchActive] = useState(searchOpenOnload);
-    useEffect(() => {
-      setIsSearchActive(propIsSearchActive);
-    }, [propIsSearchActive]);
-
-    const handleChangeSearchActive = useCallback(
-      (event) => {
-        const newisSearchActive = !isSearchActive;
-        setIsSearchActive(newisSearchActive);
-        openOnLoadFocus = false;
-        onChangeSearchActive(event, { isOpen: newisSearchActive });
-      },
-      [isSearchActive, onChangeSearchActive]
-    );
-
-    // Sets aria-labelledby to suggestions list to suppress a11y errors.
-    // Autosuggest package does not provide method to add attribute to this element.
-    useEffect(() => {
-      const suggestionsListContainer = document.getElementById(
-        'react-autowhatever-1'
-      );
-
-      suggestionsListContainer &&
-        suggestionsListContainer.setAttribute(
-          'aria-labelledby',
-          `${prefix}--header__search--input`
-        );
-    });
-
-    useEffect(() => {
-      const abortController =
-        typeof AbortController !== 'undefined'
-          ? new AbortController()
-          : {
-              signal: {},
-              abort() {
-                this.signal.aborted = true;
-              },
-            };
-      abortController.abort();
-      (async () => {
-        const response = await LocaleAPI.getLang();
-        state.lc = response.lc;
-        state.cc = response.cc;
-
-        if (!abortController.signal.aborted && response) {
-          dispatch({ type: 'setLc', payload: { lc: response.lc } });
-          dispatch({ type: 'setCc', payload: { cc: response.cc } });
-        }
-      })();
-      return () => {
-        abortController.abort();
-      };
-    }, [state]);
-
-    /**
-     * Event handlers to toggle visiblity of search
-     *
-     * @returns {*} search ref
-     */
-    function useSearchVisible() {
-      const ref = useRef(null);
-      /**
-       * Close search entirely if autosuggestions collapsed
-       *
-       * @param {*} event Escape keypress
-       */
-      const handleHideSearch = (event) => {
-        if (event.key === 'Escape') {
-          if (!state.suggestionContainerVisible) {
-            dispatch({ type: 'setSearchClosed' });
-            resetSearch();
-          }
-        }
-      };
-
-      /**
-       * Close search when click detected outside of component.
-       * This is necessary otherwise search stays open even when
-       * elements other than the close button and the
-       * profile button are clicked.
-       *
-       * @param {*} event Click event outside masthead component
-       */
-      const handleClickOutside = (event) => {
-        if (!searchOpenOnload) {
-          const mastheadRef = ref.current?.closest(`.${prefix}--masthead`);
-          if (mastheadRef && !mastheadRef.contains(event.target)) {
-            // If a click was detected outside the Search ref but there is a text value in state, don't hide the Search.
-            if (state.val.length === 0 && isSearchActive) {
-              handleChangeSearchActive();
-              resetSearch();
-            }
-          }
-        }
-      };
-
-      useEffect(() => {
-        root.document.addEventListener('keydown', handleHideSearch, true);
-        root.document.addEventListener('click', handleClickOutside, true);
-        return () => {
-          root.document.removeEventListener('keydown', handleHideSearch, true);
-          root.document.removeEventListener('click', handleClickOutside, true);
-        };
-      });
-
-      return { ref };
-    }
-
-    const className = cx({
-      [`${prefix}--masthead__search`]: true,
-      [`${prefix}--masthead__search--active`]: isSearchActive,
-    });
-
-    /**
-     * Custom event emitted when search does not redirect to default url
-     *
-     * @param {event} event The callback event
-     * @param {object} params Custom event parameters
-     * @param {object} params.suggestion the selected suggestion in `react-autosuggest`
-     * @param {string} params.suggestionValue The new val of the input
-     * @param {string} params.method String describing how the change has occurred (data from `react-autosuggest`)
-     */
-    function onSearchNoRedirect(
-      event,
-      { suggestion, suggestionValue, method }
-    ) {
-      const onSearchNoRedirect = new CustomEvent('onSearchNoRedirect', {
-        bubbles: true,
-        detail: {
-          method,
-          suggestion,
-          value: suggestionValue,
-        },
-      });
-
-      event.currentTarget.dispatchEvent(onSearchNoRedirect);
-    }
-
-    /**
-     * Custom onKeyDown event handlers
-     *
-     * @param {event} event The callback event
-     */
-    function onKeyDown(event) {
-      switch (event.key) {
-        case 'Enter': {
-          // Disables Enter key if searchNoRirect is true
-          if (rest.searchNoRedirect) {
-            onSearchNoRedirect(event, state.val);
-            event.preventDefault();
-          }
-          // Disable search on enter key if the search field is empty
-          if (!state.val) {
-            event.preventDefault();
-          }
-        }
-      }
-    }
-
-    /**
-     * When the input field changes, we set the new val to our state
-     *
-     * @param {event} event The callback event
-     * @param {string} newValue The new val of the input
-     */
-    function onChange(event, { newValue }) {
-      // emit custom event for search input onchange
-      const onSearchValueChanged = new CustomEvent('onSearchValueChanged', {
-        bubbles: true,
-        detail: { value: newValue },
-      });
-
-      event.currentTarget.dispatchEvent(onSearchValueChanged);
-      dispatch({ type: 'setVal', payload: { val: newValue } });
-    }
-
-    /**
-     * Autosuggest will pass through all these props to the input.
-     *
-     * @type {{placeholder: string, value: string, onChange: Function, className: string, 'aria-labelledby': string, role: string, 'aria-expanded': string}}
-     */
-    const inputProps = {
-      placeholder: placeHolderText,
-      value: state.val,
-      onChange,
-      onKeyDown,
-      className: `${prefix}--header__search--input`,
-      'aria-label': placeHolderText,
-      role: 'combobox',
-      'aria-expanded': isSearchActive,
-      id: `${prefix}--header__search--input`,
-    };
-
-    /**
-     * Autosuggest will pass through all these props to the container.
-     * Set WAI-ARIA attributes to null to override default container
-     * which is following outdated 1.1 specifications.
-     *
-     */
-    const containerProps = {
-      role: null,
-      'aria-haspopup': null,
-      'aria-owns': null,
-      'aria-expanded': null,
-      'aria-label': null,
-    };
-
-    /**
-     * Executes the logic for the search icon depending on search input state.
-     * This will execute the search if the search is open, or will open the
-     * search field if closed.
-     *
-     */
-    function searchIconClick(event) {
-      // emit custom event for search icon click when search is closed
-      if (!isSearchActive) {
-        const onOpenSearch = new CustomEvent('onOpenSearch', {
-          bubbles: true,
-        });
-
-        event.currentTarget.dispatchEvent(onOpenSearch);
-
-        dispatch({ type: 'setSearchOpen' });
-        handleChangeSearchActive();
-      }
-
-      // emit custom event for search icon click when search is open
-      if (isSearchActive) {
-        const onSearchButtonClicked = new CustomEvent('onSearchButtonClicked', {
-          bubbles: true,
-          detail: { value: state.val },
-        });
-
-        event.currentTarget.dispatchEvent(onSearchButtonClicked);
-      }
-
-      if (isSearchActive && state.val.length) {
-        if (rest.searchNoRedirect) {
-          onSearchNoRedirect(event, { suggestionValue: state.val });
-        } else {
-          root.parent.location.href = getRedirect(state.val);
-        }
-      } else {
-        dispatch({ type: 'setSearchOpen' });
-      }
-    }
-
-    /**
-     * Clear search and clear input when called
-     */
-    const resetSearch = useCallback(() => {
-      dispatch({ type: 'setSearchClosed' });
-      dispatch({
-        type: 'setVal',
-        payload: { val: '' },
-      });
-    }, [dispatch]);
-
-    /**
-     * closeBtnAction resets and sets focus after search is closed
-     */
-    function closeBtnAction(event) {
-      // emit custom event for search close button click
-      const onSearchCloseClicked = new CustomEvent('onSearchCloseClicked', {
-        bubbles: true,
-      });
-
-      event.currentTarget.dispatchEvent(onSearchCloseClicked);
-
-      resetSearch();
-      handleChangeSearchActive();
-    }
-
-    /**
-     * Renders the input bar with the search icon
-     *
-     * @param {object} componentInputProps contains the input props
-     * @returns {*} The rendered component
-     */
-    function renderInputComponent(componentInputProps) {
-      return (
-        <MastheadSearchInput
-          componentInputProps={componentInputProps}
-          dispatch={dispatch}
-          isActive={isSearchActive}
-          disableFocus={openOnLoadFocus}
-        />
-      );
-    }
-
-    /**
-     * Returns the action/redirect value
-     *
-     * @param {string} value string value from the input or suggestions list
-     * @returns {string} final redirect string
-     */
-    function getRedirect(value) {
-      return `${_redirectUrl}&q=${encodeURIComponent(value)}&lang=${
-        state.lc
-      }&cc=${state.cc}`;
-    }
-
-    /**
-     * Renders the Suggestion Value with the function for the adding the suggestion
-     *
-     * @param {object} suggestion The suggestion to render
-     * @param {object} properties The property object of the incoming suggestion
-     * @param {string} properties.query The query being searched for
-     * @param {boolean} properties.isHighlighted Whether the suggestion is currently highlighted by the user
-     * @returns {*} The suggestion value
-     */
-    function renderSuggestion(suggestion, { query, isHighlighted }) {
-      return (
-        <MastheadSearchSuggestion
-          suggestion={suggestion}
-          query={query}
-          isHighlighted={isHighlighted}
-          getSuggestionValue={_getSuggestionValue}
-        />
-      );
-    }
-
-    /**
-     * This function is called everytime we need new suggestions. If input has
-     * changed, we fetch for new suggestions else we return the previous
-     * suggestions
-     *
-     * Available reason values:
-     * https://github.com/moroshko/react-autosuggest#onsuggestionsfetchrequested-required
-     *
-     * @param {object} request Object response from when onSuggestionsFetchRequested is called
-     * @param {string} request.value the current value of the input
-     * @param {string} request.reason string describing why onSuggestionsFetchRequested was called
-     */
-    async function onSuggestionsFetchRequest(request) {
-      const searchValue = _trimAndLower(escapeRegExp(request.value));
-
-      if (request.reason === 'input-changed') {
-        // if the search input has changed
-        let response = rest.customTypeaheadApi
-          ? await rest.customTypeaheadApi(searchValue)
-          : await SearchTypeaheadAPI.getResults(searchValue);
-
-        if (response !== undefined) {
-          dispatch({
-            type: 'setPrevSuggestions',
-            payload: { prevSuggestions: response },
-          });
-          dispatch({ type: 'setSuggestionsToPrevious' });
-          dispatch({ type: 'showSuggestionsContainer' });
-        }
-      } else if (request.reason === 'escape-pressed') {
-        onSuggestionsClearedRequested();
-      } else {
-        dispatch({ type: 'setSuggestionsToPrevious' });
-        dispatch({ type: 'showSuggestionsContainer' });
-      }
-    }
-
-    /**
-     * Called every time we clear suggestions
-     */
-    function onSuggestionsClearedRequested() {
-      dispatch({ type: 'emptySuggestions' });
-      dispatch({ type: 'hideSuggestionsContainer' });
-    }
-
-    /**
-     * Sends the user to the search results page when a suggestion is selected
-     *
-     * @param {object} event The event object
-     * @param {object} params Param object coming from react-autosuggest
-     * @param {string} params.suggestionValue Suggestion value
-     * @param {string} params.method Method of selection ("click" or "enter")
-     */
-    function onSuggestionSelected(
-      event,
-      { suggestion, suggestionValue, method }
-    ) {
-      if (rest.searchNoRedirect) {
-        onSearchNoRedirect(event, { suggestion, suggestionValue, method });
-        event.preventDefault();
-      } else {
-        root.parent.location.href = getRedirect(suggestionValue);
-      }
-    }
-
-    /**
-     * Only render suggestions if we have more than the renderValue
-     *
-     * @param {string} value Name of the suggestion
-     * @returns {boolean} Whether or not to display the value
-     */
-    function shouldRenderSuggestions(value) {
-      return value.trim().length >= renderValue;
-    }
-
-    /**
-     * Render section title
-     *
-     * @param {Array} section Array of section results
-     * @returns {string} Section title
-     */
-    function renderSectionTitle(section) {
-      return section.items.length > 0 && section.title ? (
-        <span>{section.title}</span>
-      ) : null;
-    }
-
-    /**
-     * Render section results
-     *
-     * @param {Array} section Array of section results
-     * @returns {object} Section items
-     */
-    function getSectionSuggestions(section) {
-      return section.items;
-    }
-
-    /**
-     * Get inital search term from query string
-     *
-     * @returns {string} Search term
-     */
-    function getValueFromQueryString() {
-      try {
-        return new URLSearchParams(root.location.search).get('q');
-      } catch (e) {
-        return '';
-      }
-    }
-
-    /* eslint-disable react/prop-types */
-    const renderSuggestionsContainer = ({ containerProps, children }) => (
-      <div {...containerProps}>{children}</div>
-    );
-
-    return (
-      <div
-        data-autoid={`${stablePrefix}--masthead__search`}
-        className={className}
-        ref={ref}>
-        {isSearchActive && (
-          <form
-            id={`${prefix}--masthead__search--form`}
-            action={_redirectUrl}
-            method="get">
-            <input type="hidden" name="lang" value={state.lc} />
-            <input type="hidden" name="cc" value={state.cc} />
-            <input type="hidden" name="lnk" value="mhsrch" />
-            <Autosuggest
-              suggestions={state.suggestions} // The state value of suggestion
-              onSuggestionsFetchRequested={onSuggestionsFetchRequest} // Method to fetch data (should be async call)
-              onSuggestionsClearRequested={onSuggestionsClearedRequested} // When input bar loses focus
-              getSuggestionValue={_getSuggestionValue} // Name of suggestion
-              renderSuggestion={renderSuggestion} // How to display a suggestion
-              renderSuggestionsContainer={renderSuggestionsContainer}
-              onSuggestionSelected={onSuggestionSelected} // When a suggestion is selected
-              focusInputOnSuggestionClick={false}
-              inputProps={inputProps}
-              containerProps={containerProps}
-              renderInputComponent={renderInputComponent}
-              shouldRenderSuggestions={shouldRenderSuggestions}
-              {...(rest.multiSection
-                ? {
-                    multiSection: true,
-                    renderSectionTitle,
-                    getSectionSuggestions,
-                  }
-                : {})}
-            />
-          </form>
-        )}
-        <div className={`${prefix}--header__search--actions`}>
-          <HeaderGlobalAction
-            onClick={searchIconClick}
-            aria-label={
-              isSearchActive ? 'Search all of IBM' : 'Open IBM search field'
-            }
-            className={`${prefix}--header__search--search`}
-            data-autoid={`${stablePrefix}--masthead-${navType}__l0-search`}
-            tabIndex={0}
-            ref={searchIconButton}>
-            <Search20 />
-          </HeaderGlobalAction>
-          <HeaderGlobalAction
-            onClick={closeBtnAction}
-            part="close-button"
-            aria-label="Clear input"
-            className={`${prefix}--header__search--close`}
-            data-autoid={`${stablePrefix}--masthead-${navType}__l0-search--close`}>
-            <Close20 />
-          </HeaderGlobalAction>
-        </div>
-      </div>
-    );
-  }
-);
-
-MastheadSearch.propTypes = {
-  /**
-   * Placeholder text for the search field.
-   */
-  placeHolderText: PropTypes.string,
-
-  /**
-   * Initial value for the search field.
-   */
-  initialSearchTerm: PropTypes.string,
-
-  /**
-   * Current <MastheadSearch /> state returned to <Masthead />
-   */
-  isSearchActive: PropTypes.bool,
-
-  /**
-   * Hook to toggle active state back to <Masthead />
-   */
-  onChangeSearchActive: PropTypes.func,
-
-  /**
-   * Number of characters to begin showing suggestions.
-   */
-  renderValue: PropTypes.number,
-
-  /**
-   * `true` to make the search field open in the initial state.
-   */
-  searchOpenOnload: PropTypes.bool,
-
-  /**
-   * navigation type for autoids
-   */
-  navType: PropTypes.oneOf(['default', 'alt', 'eco']),
-};
-
-MastheadSearch.defaultProps = {
-  placeHolderText: 'Search all of IBM',
-  initialSearchTerm: '',
-  renderValue: 3,
-  searchOpenOnload: false,
-};
-
-// Export the react component
-export default MastheadSearch;
diff --git a/packages/react/src/components/Masthead/MastheadSearchInput.js b/packages/react/src/components/Masthead/MastheadSearchInput.js
deleted file mode 100755
index da0f037b521..00000000000
--- a/packages/react/src/components/Masthead/MastheadSearchInput.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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, { useCallback, useEffect, useRef } from 'react';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-
-const { stablePrefix } = ddsSettings;
-
-/**
- * Renders the input bar with the search icon.
- */
-const MastheadSearchInput = ({
-  componentInputProps,
-  dispatch,
-  isActive,
-  disableFocus,
-}) => {
-  const searchRef = useRef();
-
-  /**
-   * Clear search and clear input when called
-   */
-  const resetSearch = useCallback(() => {
-    dispatch({ type: 'setSearchClosed' });
-    dispatch({
-      type: 'setVal',
-      payload: { val: '' },
-    });
-  }, [dispatch]);
-
-  /**
-   * emit custom event for search input enter keypress
-   */
-  const handleSearchEnter = (event) => {
-    if (event.key === 'Enter') {
-      const onSearchEnter = new CustomEvent('onSearchEnter', {
-        bubbles: true,
-        detail: { value: event.target.value },
-      });
-
-      event.currentTarget.dispatchEvent(onSearchEnter);
-    }
-  };
-
-  useEffect(() => {
-    if (isActive) {
-      if (!disableFocus) {
-        searchRef.current && searchRef.current.focus();
-      }
-      root.document.addEventListener('keyup', handleSearchEnter, true);
-      return () => {
-        root.document.removeEventListener('keyup', handleSearchEnter, true);
-      };
-    } else resetSearch();
-  }, [isActive, disableFocus, resetSearch]);
-
-  return (
-    <>
-      <input
-        {...componentInputProps}
-        data-autoid={`${stablePrefix}--header__search--input`}
-        ref={searchRef}
-        name="q"
-        tabIndex={isActive ? null : '-1'}
-      />
-    </>
-  );
-};
-
-MastheadSearchInput.propTypes = {
-  /**
-   * The input props.
-   */
-  componentInputProps: PropTypes.object,
-
-  /**
-   * The Redux action dispatcher to control `<MastheadSearch>`.
-   */
-  dispatch: PropTypes.func,
-
-  /**
-   * `true` to make the search active.
-   */
-  isActive: PropTypes.bool,
-
-  /**
-   * Executes when the search icon is clicked.
-   */
-  searchIconClick: PropTypes.func,
-
-  /**
-   * Boolean to prevent focusing on the input if open on load, focus normally upon reopen.
-   */
-  disableFocus: PropTypes.bool,
-};
-
-MastheadSearchInput.defaultProps = {
-  componentInputProps: {},
-  dispatch: () => {},
-  searchIconClick: () => {},
-};
-
-export default MastheadSearchInput;
diff --git a/packages/react/src/components/Masthead/MastheadSearchSuggestion.js b/packages/react/src/components/Masthead/MastheadSearchSuggestion.js
deleted file mode 100755
index 677e8bfdf3b..00000000000
--- a/packages/react/src/components/Masthead/MastheadSearchSuggestion.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import match from 'autosuggest-highlight/match';
-import parse from 'autosuggest-highlight/parse';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * The rendered suggestion in the suggestion list.
- */
-const MastheadSearchSuggestion = ({
-  suggestion,
-  query,
-  isHighlighted,
-  getSuggestionValue,
-}) => {
-  const suggestionValue = getSuggestionValue(suggestion);
-  const matches = match(suggestionValue, query);
-  const parts = parse(suggestionValue, matches);
-
-  return (
-    <div
-      className={classNames(`${prefix}--container-class`, {
-        [`${prefix}--container-highlight-class`]: isHighlighted,
-      })}
-      tabIndex="-1"
-      data-autoid={`${stablePrefix}--masthead__searchresults--suggestion`}
-      {...(suggestion.href ? { 'data-href': suggestion.href } : {})}>
-      {parts.map((part, index) => (
-        <span
-          key={index}
-          style={{
-            // TODO: switch to final styles
-            fontWeight: part.highlight ? 600 : 400,
-          }}>
-          {part.text.replace(' ', '\u00A0')}
-        </span>
-      ))}
-    </div>
-  );
-};
-
-MastheadSearchSuggestion.propTypes = {
-  /**
-   * The individual object from the data.
-   */
-  suggestion: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.string),
-    PropTypes.object,
-  ]),
-
-  /**
-   * The query being searched for.
-   */
-  query: PropTypes.string,
-
-  /**
-   * `true` to make the suggestion currently highlighted by the user.
-   */
-  isHighlighted: PropTypes.bool,
-
-  /**
-   * A funciton ot get the suggestion value.
-   */
-  getSuggestionValue: PropTypes.func,
-};
-
-MastheadSearchSuggestion.defaultProps = {
-  suggestion: [],
-  query: '',
-  isHighlighted: false,
-  getSuggestionValue: () => {},
-};
-
-export default MastheadSearchSuggestion;
diff --git a/packages/react/src/components/Masthead/MastheadTopNav.js b/packages/react/src/components/Masthead/MastheadTopNav.js
deleted file mode 100755
index c327f6a3fd2..00000000000
--- a/packages/react/src/components/Masthead/MastheadTopNav.js
+++ /dev/null
@@ -1,171 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect, useState } from 'react';
-import classnames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import HeaderMenu from '../carbon-components-react/UIShell/HeaderMenu';
-import HeaderMenuItem from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderMenuItem';
-import HeaderName from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderName';
-import HeaderNavContainer from './HeaderNavContainer';
-import HeaderNavigation from '../../internal/vendor/carbon-components-react/components/UIShell/HeaderNavigation';
-import MegaMenu from './MastheadMegaMenu/MegaMenu';
-import PropTypes from 'prop-types';
-import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Masthead top nav component.
- */
-const MastheadTopNav = ({ navigation, ...topNavProps }) => {
-  const [overlay, setOverlay] = useState(false);
-
-  const childLinkChecker = topNavProps.hasCurrentUrl();
-
-  useEffect(() => {
-    document
-      .querySelector(`.${prefix}--header__menu-bar`)
-      ?.setAttribute('role', 'menu');
-    document
-      .querySelectorAll(`.${prefix}--header__menu-bar li`)
-      .forEach((e) => {
-        e.setAttribute('role', 'menuitem');
-        e.querySelector('a').removeAttribute('role');
-      });
-  }, []);
-
-  /**
-   * Top masthead navigation
-   *
-   * @returns {*} Top masthead navigation
-   */
-  const mastheadLinks = navigation.map((link, i) => {
-    const selectedUrlItem =
-      childLinkChecker && childLinkChecker(link, root.location?.href);
-    const autoid = `${stablePrefix}--masthead-${topNavProps.navType}__l0-nav${i}`;
-    const selected = topNavProps.selectedMenuItem
-      ? link.titleEnglish === topNavProps.selectedMenuItem
-      : selectedUrlItem;
-    const dataTitle = link.titleEnglish
-      ? link.titleEnglish
-          .replace(/[^-a-zA-Z0-9_ ]/g, '')
-          .replace(/ +/g, '-')
-          .toLowerCase()
-      : null;
-
-    if (link.hasMenu || link.hasMegapanel) {
-      return (
-        <HeaderMenu
-          aria-label={link.title}
-          menuLinkName={link.title}
-          className={classnames({
-            [`${prefix}--masthead__megamenu__l0-nav`]: link.hasMegapanel,
-          })}
-          selected={selected}
-          autoId={autoid}
-          key={i}
-          disableScroll={link.hasMegapanel}
-          setOverlay={setOverlay}
-          dataTitle={dataTitle}>
-          {renderNav(link, autoid)}
-        </HeaderMenu>
-      );
-    }
-
-    return (
-      <HeaderMenuItem
-        data-selected={`${!!selected}`}
-        href={link.url}
-        data-autoid={autoid}
-        key={i}>
-        {link.title}
-      </HeaderMenuItem>
-    );
-  });
-
-  return (
-    <>
-      {topNavProps.platform && (
-        <div className={`${prefix}--masthead__platform-name`}>
-          <HeaderName
-            prefix=""
-            href={topNavProps.platform.url}
-            data-autoid={`${stablePrefix}--masthead-${topNavProps.navType}__l0-ecosystemname`}>
-            {topNavProps.platform.name}
-          </HeaderName>
-        </div>
-      )}
-      <HeaderNavContainer>
-        <HeaderNavigation
-          aria-label="IBM"
-          data-autoid={`${stablePrefix}--masthead__l0-nav`}>
-          {mastheadLinks}
-        </HeaderNavigation>
-      </HeaderNavContainer>
-      <div
-        className={classnames(`${prefix}--masthead__overlay`, {
-          [`${prefix}--masthead__overlay-show`]: overlay,
-        })}></div>
-    </>
-  );
-};
-
-/**
- * Loops through and renders a list of links for the masthead nav
- *
- * @param {object} link A list of links to be rendered
- * @param {string} autoid autoid predecessor for megamenu items/menu items data-autoids
- * @returns {object} JSX object
- */
-function renderNav(link, autoid) {
-  const navItems = [];
-  if (link.hasMegapanel) {
-    navItems.push(<MegaMenu key={link.title} data={link} autoid={autoid} />);
-  } else {
-    link.menuSections.forEach((section, i) => {
-      section.menuItems.forEach((item, j) => {
-        navItems.push(
-          <HeaderMenuItem
-            href={item.url}
-            data-autoid={`${autoid}--subnav-col${i}-item${j}`}
-            key={item.title}>
-            {item.title}
-          </HeaderMenuItem>
-        );
-      });
-    });
-  }
-  return navItems;
-}
-
-MastheadTopNav.propTypes = {
-  /**
-   * Object containing top navigation elements.
-   */
-  navigation: PropTypes.arrayOf(
-    PropTypes.shape({
-      hasMenu: PropTypes.bool,
-      title: PropTypes.string,
-      url: PropTypes.string,
-      menuSections: PropTypes.arrayOf(
-        PropTypes.shape({
-          menuItems: PropTypes.arrayOf(
-            PropTypes.shape({
-              title: PropTypes.string,
-              url: PropTypes.string,
-            })
-          ),
-        })
-      ),
-    })
-  ),
-};
-
-export default MastheadTopNav;
diff --git a/packages/react/src/components/Masthead/README.stories.mdx b/packages/react/src/components/Masthead/README.stories.mdx
deleted file mode 100755
index 07faef8a2c9..00000000000
--- a/packages/react/src/components/Masthead/README.stories.mdx
+++ /dev/null
@@ -1,344 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import Masthead from './Masthead';
-
-# Masthead
-
-> The masthead component is a required navigational pattern for IBM.com that
-> displays consistently at the top of each page. It also includes search and
-> profile services for IBM.com.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Masthead)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Masthead)
-
-## Getting started
-
-##### Note: Masthead uses the Carbon White theme by design. Using other themes will not change the Masthead color scheme.
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Masthead
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Masthead } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-function App() {
-  return <Masthead />;
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the masthead styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import Masthead from '@carbon/ibmdotcom-react/es/components/Masthead/Masthead';
-```
-
-## Using L1 nav
-
-To use L1 nav, set `mastheadL1Data` prop. `mastheadL1Data` prop should be an
-object that contains the navigation data of L1 nav:
-
-```javascipt
-const mastheadL1Data = {
-  platform: {
-    name: 'Stock Charts',
-    url: 'https://example.com/',
-  },
-  navigationL1: (The nav links),
-}
-
-...
-
-<Masthead mastheadL1Data={mastheadL1Data} />
-```
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/MastheadL1)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/MastheadL1)
-
-## Custom Events
-
-The masthead emits several custom events.
-
-```javascript
-// masthead and left nav menu toggle
-document.addEventListener('onMegaMenuToggle', e => {
-  console.log(e.detail); // { isExpanded: true|false }
-  // do something here
-});
-
-// search icon clicked to open search input
-document.addEventListener('onOpenSearch', () => {
-  // do something here
-};
-
-// close icon clicked to close search input
-document.addEventListener('onSearchCloseClicked', () => {
-  // do something here
-);
-
-// enter key pressed to perform search
-document.addEventListener('onSearchEnter', e => {
-  console.log(e.detail); // { value: inputValue }
-  // do something here
-);
-
-// search icon clicked to perform search
-document.addEventListener('onSearchButtonClicked', e => {
-  console.log(e.detail); // { value: inputValue }
-  // do something here
-);
-
-// search input onchange
-document.addEventListener('onSearchValueChanged', e =>
-  console.log(e.detail); // { value: inputValue }
-  // do something here
-);
-
-// disables search redirect onClick and onEnter
-document.addEventListener('onSearchNoRedirect', e =>
-  console.log(e.detail); // { suggestion, value: inputValue, method: 'click'|'enter' }
-  // do something here
-);
-```
-
-## Props
-
-<Props of={Masthead} />
-
-## customTypeaheadApi
-
-The masthead search supports a user-defined redirect host URL and typeahead API.
-
-**Custom redirect URL endpoint**
-
-Changing the redirect host is as simple as adding an environment variable to
-your application.
-
-```
-SEARCH_REDIRECT_ENDPOINT=https://www.custom-redirect-endpoint.com
-```
-
-This will replace the default endpoint when creating redirect URLs.
-
-```javascript
-${SEARCH_REDIRECT_ENDPOINT}&q=${encodeURIComponent(value)}&lang=${state.lc}&cc=${state.cc}
-```
-
-**Custom typeahead API**
-
-To use a custom endpoint, pass `customTypeaheadApi` to get the response and
-transform the data if needed.
-
-```javascript
-async function customTypeaheadApi(searchVal) {
-  return await fetch(`https://<fetch-url>?query=${searchVal}&foo=foo&bar=bar`)
-    .then(response => response.json())
-    .then(data => {
-      // transform results
-      return searchResults;
-    });
-}
-
-<Masthead customTypeaheadApi={customTypeaheadApi} />;
-```
-
-In order for the results to display correctly, here is how the response should
-be structured:
-
-```javascript
-[
-  ['cloud', '0'],
-  ['cloud pak for data', '1'],
-  ['cloud pak', '2'],
-  ['cloud pak for integration', '3'],
-  ['cloud pak for automation', '4'],
-  ['cloud object storage', '5'],
-];
-```
-
-> 💡 A maximum of 10 results will be displayed.
-
-**Multiple search result sections**
-
-The masthead search can display groups of results with the `multiSection` prop:
-
-```javascript
-async function customTypeaheadApi(searchVal) {
-  return await fetch(`https://<fetch-url>?query=${searchVal}&foo=foo&bar=bar`)
-    .then(response => response.json())
-    .then(data => {
-      // transform results with multiple sections
-      return searchResults;
-    });
-}
-
-<Masthead customTypeaheadApi={customTypeaheadApi} multiSection />;
-```
-
-The results must follow this stucture:
-
-```javascript
-[
-  {
-    title: 'Section one',
-    items: [
-      {
-        name: 'Item one', // the search value to be filtered
-        // additional items
-      },
-    ],
-  },
-  // additional sections
-];
-```
-
-## platform
-
-Includes platform name (only available with `default` and `custom navigation`).
-Object requires `name` and `url`.
-
-```javascript
-const platformData = {
-  name: 'IBM Cloud',
-  url: 'https://www.ibm.com/cloud',
-};
-
-<Masthead platform={platformData} navigation="default" />;
-```
-
-## searchNoRedirect
-
-This will disable the default redirecting of the search component as well as
-emit the `onSearchNoRedirect` [custom event](#custom-events).
-
-> Note that unless a custom redirect action is provided in the event, the search
-> will do nothing except list search suggestions.
-
-```javascript
-<Masthead navigation="default" searchNoRedirect />
-```
-
-## customProfileLogin
-
-This allows setting a user-defined login URL. This is currently an experimental
-feature. Please see the [feature flags](#feature-flags) section for usage
-information.
-
-In order to use this feature, the `profileMenu.signedout` login object must
-contain an `id: signin` entry in the corresponding translation data file. See
-[here](https://github.ibm.com/webstandards/ibm-dotcom-translations/blob/master/translations/masthead-footer/jsononly/usen.json#L1467)
-for an example.
-
-## logo
-
-The masthead can display an alternate logo and a tooltip on hover. Additionally,
-the logo can be set with an expiration date, which will revert the logo to
-default when reached. There are also allow/deny lists to control on what paths
-an alternate logo can be displayed. Leaving the `allowList` array empty serves
-as a wildcard.
-
-Please note that the `svg` dimensions are set to `58px` x `23px` and will be
-used regardless of what the asset's width/height attributes are.
-
-This feature is available only from IBM.com translation files. To enable, the
-`masthead` object must contain a `logo` object with the following structure:
-
-```javascript
-"masthead": {
-  ...
-  "logo": {
-    svg: `<svg width="58" height="23"...></svg>`, // notice template literal
-    tooltip: "Lorem ipsum dolor sit amet, consectetur adipiscing elit.",
-    denylist: ["/example-path"],
-    allowlist: [], // leave empty for wildcard
-    end: "May 5, 2021 0:00:01",
-    path: "/", // URL path, e.g. /it-it
-  },
-  ...
-}
-```
-
-#### Feature Flags
-
-To utilize the following features, set the following variables to `true` within
-your `.env` file or your application build settings.
-
-```
-DDS_CUSTOM_PROFILE_LOGIN=true
-```
-
-> See
-> [feature-flags.md](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/patterns-react/docs/feature-flags.md)
-> and
-> [.env.example](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/patterns-react/.env.example)
-> for more information
-
-## Stable selectors
-
-| Name                                                                     | Description |
-| ------------------------------------------------------------------------ | ----------- |
-| `dds--masthead`                                                          | Component   |
-| `dds--masthead__hamburger`                                               | Interactive |
-| `dds--masthead-${navType}__l0-logo`                                      | Interactive |
-| `dds--masthead-${navType}__l0-search`                                    | Interactive |
-| `dds--masthead-${navType}__l0-search--close`                             | Interactive |
-| `dds--masthead-${navType}__l0-account`                                   | Interactive |
-| `dds--masthead-${navType}__l0-ecosystemname`                             | Interactive |
-| `dds--masthead-${navType}__l1--platformname`                             | Interactive |
-| `dds--masthead__megamenu`                                                | Component   |
-| `dds--masthead-${navType}__l${level}-nav${item}`                         | Interactive |
-| `dds--masthead-${navType}__l${level}-nav${item}-list${item}`             | Interactive |
-| `dds--masthead-${navType}__l${level}-nav${item}-list${item}-item${item}` | Interactive |
-| `dds--masthead__l{level}-nav`                                            | Component   |
-| `dds--masthead-${navType}__l1-nav${item}`                                | Interactive |
-| `dds--masthead-${navType}__l1-nav${item}-item${item}`                    | Interactive |
-| `dds--masthead-${navType}__l0-sidenav`                                   | Component   |
-| `dds--masthead-${navType}__l0-sidenav-nav${item}`                        | Interactive |
-| `dds--masthead__l0-sidenav--subnav-col${item}-item${item}`               | Interactive |
-| `dds--masthead__l0-sidenav--subnav-col${item}-item${item}`               | Interactive |
-| `dds--masthead__l1`                                                      | Component   |
-| `dds--masthead__l1--short`                                               | Interactive |
-| `dds--masthead-${navType}__l1--name-platformname`                        | Interactive |
-| `dds--masthead__l1-nav`                                                  | Component   |
-
-\*\* All these selectors belongs to the `MastheadL1` component, which is
-experimental and is behind a feature flag.
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/Masthead/__stories__/Masthead.stories.js b/packages/react/src/components/Masthead/__stories__/Masthead.stories.js
deleted file mode 100644
index 5a2ac597b38..00000000000
--- a/packages/react/src/components/Masthead/__stories__/Masthead.stories.js
+++ /dev/null
@@ -1,246 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, select, text } from '@storybook/addon-knobs';
-import { DDS_CUSTOM_PROFILE_LOGIN } from '../../../internal/FeatureFlags';
-import inPercy from '@percy-io/in-percy';
-import Masthead from '../Masthead';
-import mastheadKnobs from './data/Masthead.stories.knobs.js';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import TranslationAPI from '../../../internal/vendor/@carbon/ibmdotcom-services/services/Translation/Translation';
-
-// For mocking in integration tests
-// TODO: See if `TranslationAPI.getTranslation()` call can be avoided when we use mock data
-const origGetTranslation = TranslationAPI.getTranslation;
-
-const props = {
-  default: () => {
-    const useMockData = inPercy();
-
-    // For mocking in integration tests
-    // TODO: See if `TranslationAPI.getTranslation()` call can be avoided when we use mock data
-    TranslationAPI.getTranslation = !useMockData
-      ? origGetTranslation
-      : () =>
-          new Promise((resolve) => {
-            setTimeout(resolve, 300000);
-          });
-
-    const customProfileLogin = DDS_CUSTOM_PROFILE_LOGIN
-      ? text(
-          'custom profile login url (customProfileLogin)',
-          'https://www.example.com/'
-        )
-      : null;
-
-    return {
-      navigation: useMockData
-        ? mastheadKnobs.navigation.custom
-        : mastheadKnobs.navigation.default,
-      hasProfile: boolean('show the profile functionality (hasProfile)', true),
-      customProfileLogin,
-      hasSearch: boolean('show the search functionality (hasSearch)', true),
-      placeHolderText: text(
-        'search placeholder (placeHolderText)',
-        'Search all of IBM'
-      ),
-      initialSearchTerm: text('initial search term (initialSearchTerm)', ''),
-      selectedMenuItem: text(
-        'selected menu item (selectedMenuItem)',
-        'Consulting & Services'
-      ),
-    };
-  },
-  withCustomNavigation: () => {
-    const customProfileLogin = DDS_CUSTOM_PROFILE_LOGIN
-      ? text(
-          'custom profile login url (customProfileLogin)',
-          'https://www.example.com/'
-        )
-      : null;
-
-    return {
-      navigation: mastheadKnobs.navigation.custom,
-      hasProfile: boolean('show the profile functionality (hasProfile)', true),
-      customProfileLogin,
-      hasSearch: boolean('show the search functionality (hasSearch)', true),
-      placeHolderText: text(
-        'search placeholder (placeHolderText)',
-        inPercy() ? '' : 'Search all of IBM'
-      ),
-      selectedMenuItem: text(
-        'selected menu item (selectedMenuItem)',
-        'Lorem ipsum dolor sit amet'
-      ),
-    };
-  },
-  withPlatform: () => {
-    const useMockData = inPercy();
-
-    return {
-      navigation: select(
-        'navigation data (navigation)',
-        mastheadKnobs.navigation,
-        useMockData
-          ? mastheadKnobs.navigation.custom
-          : mastheadKnobs.navigation.default
-      ),
-      platform: mastheadKnobs.platform.platform,
-      hasProfile: boolean('show the profile functionality (hasProfile)', true),
-      hasSearch: boolean('show the search functionality (hasSearch)', true),
-      placeHolderText: text(
-        'search placeholder (placeHolderText)',
-        'Search all of IBM'
-      ),
-      selectedMenuItem: text(
-        'selected menu item (selectedMenuItem)',
-        'Consulting & Services'
-      ),
-    };
-  },
-  withL1: () => ({
-    platform: mastheadKnobs.l1Platform,
-    hasProfile: boolean('show the profile functionality (hasProfile)', true),
-    hasSearch: boolean('show the search functionality (hasSearch)', true),
-    placeHolderText: text(
-      'search placeholder (placeHolderText)',
-      'Search all of IBM'
-    ),
-    mastheadL1Data: {
-      navigationL1: mastheadKnobs.navigation.custom,
-    },
-    selectedMenuItem: text(
-      'selected menu item (selectedMenuItem)',
-      'Lorem ipsum dolor sit amet'
-    ),
-  }),
-  withAlternateLogoAndTooltip: () => {
-    const useMockData = inPercy();
-
-    return {
-      navigation: select(
-        'navigation data (navigation)',
-        mastheadKnobs.navigation,
-        useMockData
-          ? mastheadKnobs.navigation.custom
-          : mastheadKnobs.navigation.default
-      ),
-      hasProfile: boolean('show the profile functionality (hasProfile)', true),
-      hasSearch: boolean('show the search functionality (hasSearch)', true),
-      placeHolderText: text(
-        'search placeholder (placeHolderText)',
-        'Search all of IBM'
-      ),
-      selectedMenuItem: text(
-        'selected menu item (selectedMenuItem)',
-        'Consulting & Services'
-      ),
-      mastheadLogo: select(
-        'masthead logo data (mastheadLogo)',
-        mastheadKnobs.mastheadLogo,
-        mastheadKnobs.mastheadLogo.alternateWithTooltip
-      ),
-    };
-  },
-};
-
-export default {
-  title: 'Components/Masthead',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Masthead: Default',
-    },
-  },
-};
-
-export const Default = (args) => (
-  <Masthead {...(Object.keys(args).length > 0 ? args : props.default())} />
-);
-
-Default.story = {
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-  },
-};
-
-export const WithCustomNavigation = () => (
-  <Default {...props.withCustomNavigation()} />
-);
-
-WithCustomNavigation.story = {
-  name: 'With custom navigation',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Masthead: With custom navigation',
-    },
-  },
-};
-
-export const SearchOpenOnload = () => (
-  <Masthead {...props.default()} searchOpenOnload />
-);
-
-SearchOpenOnload.story = {
-  name: 'Search open onload',
-  parameters: {
-    knobs: { escapeHTML: false },
-    percy: {
-      name: 'Components|Masthead: Search open onload',
-    },
-  },
-};
-
-export const WithPlatform = () => <Default {...props.withPlatform()} />;
-
-WithPlatform.story = {
-  name: 'With platform',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Masthead: With platform',
-    },
-  },
-};
-
-export const WithL1 = () => <Default {...props.withL1()} />;
-
-WithL1.story = {
-  name: 'With L1',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Masthead: With L1',
-    },
-  },
-};
-
-export const WithAlternateLogoAndTooltip = () => (
-  <Masthead {...props.withAlternateLogoAndTooltip()} />
-);
-
-WithAlternateLogoAndTooltip.story = {
-  name: 'With alternate logo and tooltip',
-  parameters: {
-    knobs: {
-      escapeHTML: false,
-    },
-    percy: {
-      name: 'Components|Masthead: With alternate logo and tooltip',
-    },
-  },
-};
diff --git a/packages/react/src/components/Masthead/__stories__/data/Masthead.stories.knobs.js b/packages/react/src/components/Masthead/__stories__/data/Masthead.stories.knobs.js
deleted file mode 100644
index 30208b30913..00000000000
--- a/packages/react/src/components/Masthead/__stories__/data/Masthead.stories.knobs.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * 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.
- */
-
-/**
- * Knobs for Masthead. Also used by DotcomShell.stories.js
- *
- * type {{}}
- */
-import mastheadLinks from './MastheadLinks.js';
-
-const mastheadKnobs = {
-  navigation: {
-    default: 'default',
-    custom: mastheadLinks,
-    none: null,
-  },
-  platform: {
-    none: null,
-    platform: {
-      name: 'IBM Cloud',
-      url: 'https://www.ibm.com/cloud',
-    },
-  },
-  l1Platform: {
-    name: 'Stock Charts',
-    url: 'https://www.example.com',
-  },
-  mastheadLogo: {
-    defaultNoTooltip: {
-      denylist: [],
-      allowlist: [],
-      end: 'May 5, 2021 0:00:01',
-      path: '/',
-    },
-    alternateWithTooltip: {
-      svg: `<svg width="81px" height="33px" viewBox="0 0 81 33" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
-      <title>Artboard</title>
-      <defs>
-        <path d="M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z" id="path-1"></path>
-      </defs>
-      <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group-7">
-          <mask id="mask-2" fill="white">
-            <use xlink:href="#path-1"></use>
-          </mask>
-          <g id="Clip-2"></g>
-          <polygon id="Fill-1" fill="#EC1D24" mask="url(#mask-2)" points="-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998"></polygon>
-          <polygon id="Fill-3" fill="#2E3092" mask="url(#mask-2)" points="-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998"></polygon>
-          <polygon id="Fill-4" fill="#2E3092" mask="url(#mask-2)" points="-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222"></polygon>
-          <polygon id="Fill-5" fill="#00A550" mask="url(#mask-2)" points="-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562"></polygon>
-          <polygon id="Fill-6" fill="#FFF100" mask="url(#mask-2)" points="-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892"></polygon>
-        </g>
-      </g>
-      </svg>`,
-      tooltip: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-      denylist: [],
-      allowlist: [],
-      end: 'May 5, 2021 0:00:01',
-      path: '/',
-    },
-  },
-};
-
-export default mastheadKnobs;
diff --git a/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js b/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js
deleted file mode 100644
index 99bfb511ad0..00000000000
--- a/packages/react/src/components/Masthead/__stories__/data/MastheadLinks.js
+++ /dev/null
@@ -1,349 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * URLs for Masthead L0
- *
- * type {{}}
- */
-
-const mastheadLinks = [
-  {
-    title: 'Lorem ipsum dolor sit amet',
-    titleEnglish: 'Lorem ipsum dolor sit amet',
-    url: '',
-    hasMenu: true,
-    hasMegapanel: false,
-    menuSections: [
-      {
-        heading: 'Explore',
-        menuItems: [
-          {
-            title: 'Link 1',
-            url: '',
-            megapanelContent: {
-              headingTitle: '',
-              headingUrl: '',
-              description: '',
-              quickLinks: {
-                title: 'Title',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: '',
-                imageUrl: '',
-                linkTitle: '',
-                linkUrl: '',
-              },
-            },
-          },
-          {
-            title: 'Menu dropdown item with extra long text',
-            url: '',
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Consectetur adipiscing elit',
-    titleEnglish: 'Consectetur adipiscing elit',
-    url: '',
-    hasMenu: true,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'Link 2',
-            url: '',
-            megapanelContent: {
-              headingTitle: 'Services',
-              headingUrl:
-                'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn',
-              description:
-                'Reimagine your business, designing and building the platforms necessary for growth',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'IBM Services, your Digital Reinvention â„¢ partner',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg',
-                linkTitle:
-                  'Explore all our business consulting and technology services',
-                linkUrl: 'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Financing',
-            url: 'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Financing',
-              headingUrl:
-                'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn',
-              description: 'Funding options that fit your business',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading:
-                  'Cloud financing strategies that work for your business',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1',
-                linkTitle:
-                  'Committed to cloud? Make the most of your cash flow.',
-                linkUrl:
-                  'https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Nulla quis sem at nibh elementum imperdiet',
-    titleEnglish: 'Nulla quis sem at nibh elementum imperdiet',
-    url: 'https://www.ibm.com/industries?lnk=min',
-    hasMenu: false,
-    hasMegapanel: false,
-    menuSections: [],
-  },
-  {
-    title: 'Fusce nec tellus sed augue semper porta',
-    titleEnglish: 'Fusce nec tellus sed augue semper porta',
-    url: '',
-    hasMenu: true,
-    hasMegapanel: false,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'IBM Developer',
-            url: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'IBM Developer',
-              headingUrl: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'IBM Developer newsletters',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg',
-                linkTitle:
-                  'Technical info on popular software development topics, including AI, Blockchain, Java and more',
-                linkUrl:
-                  'https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Blockchain',
-            url: 'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Blockchain',
-              headingUrl:
-                'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Subnav 1',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 2',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 3',
-                    url: '',
-                  },
-                  {
-                    title: 'Subnav 4',
-                    url: '',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'Blockchain 101',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3',
-                linkTitle:
-                  'Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan',
-                linkUrl:
-                  'https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Containers',
-            url: 'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Containers',
-              headingUrl:
-                'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Code patterns',
-                    url: 'https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Tutorials',
-                    url: 'https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Events',
-                    url: 'https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'Make sense of Kubernetes',
-                imageUrl:
-                  'https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2',
-                linkTitle: 'Deploy a simple Python application with Kubernetes',
-                linkUrl:
-                  'https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-          {
-            title: 'Analytics',
-            url: 'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn',
-            megapanelContent: {
-              headingTitle: 'Analytics',
-              headingUrl:
-                'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn',
-              description: '',
-              quickLinks: {
-                title: 'Quicklinks',
-                links: [
-                  {
-                    title: 'Code patterns',
-                    url: 'https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Tutorials',
-                    url: 'https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Events',
-                    url: 'https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                  {
-                    title: 'Developer community',
-                    url: 'https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn',
-                  },
-                ],
-              },
-              feature: {
-                heading: 'Train your data no matter where it lives',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg',
-                linkTitle:
-                  'Easily and securely connect to your data source for initial model training and continuous learning',
-                linkUrl:
-                  'https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn',
-              },
-            },
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Sed cursus ante dapibus diam',
-    titleEnglish: 'Sed cursus ante dapibus diam',
-    url: 'https://www.ibm.com/support/home/?lnk=msu_usen',
-    hasMenu: false,
-    hasMegapanel: false,
-    menuSections: [],
-  },
-];
-
-module.exports = mastheadLinks;
diff --git a/packages/react/src/components/Masthead/__stories__/data/MastheadLinksWithPlatform.js b/packages/react/src/components/Masthead/__stories__/data/MastheadLinksWithPlatform.js
deleted file mode 100644
index f602eacb4be..00000000000
--- a/packages/react/src/components/Masthead/__stories__/data/MastheadLinksWithPlatform.js
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * URLs for Masthead with Platform name L0
- *
- * type {{}}
- */
-
-const mastheadLinksWithPlatform = {
-  platform: {
-    name: 'Platform Name',
-    path: '#',
-  },
-  links: [
-    {
-      path: '#',
-      name: 'Link 1',
-    },
-    {
-      path: '#',
-      name: 'Link 2',
-    },
-    {
-      path: '#',
-      name: 'Link 3',
-    },
-    {
-      path: '#',
-      name: 'Link 4',
-      subnav: [
-        {
-          path: '#',
-          name: 'Sublink 1',
-        },
-        {
-          path: '#',
-          name: 'Sublink 2',
-        },
-        {
-          path: '#',
-          name: 'Sublink 3',
-        },
-        {
-          path: '#',
-          name: 'Sublink 4',
-        },
-      ],
-    },
-  ],
-};
-
-module.exports = mastheadLinksWithPlatform;
diff --git a/packages/react/src/components/Masthead/__stories__/data/MastheadNavL1.js b/packages/react/src/components/Masthead/__stories__/data/MastheadNavL1.js
deleted file mode 100644
index c4fe28fe5d7..00000000000
--- a/packages/react/src/components/Masthead/__stories__/data/MastheadNavL1.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * URLs for Masthead L1
- *
- * type {{}}
- */
-
-const mastheadLinksL1 = [
-  {
-    path: '#',
-    name: 'Link 1',
-  },
-  {
-    path: '#',
-    name: 'Link 2',
-  },
-  {
-    path: '#',
-    name: 'Link 3',
-  },
-  {
-    path: '#',
-    name: 'Link 4',
-  },
-];
-
-module.exports = mastheadLinksL1;
diff --git a/packages/react/src/components/Masthead/__stories__/data/knobs.json b/packages/react/src/components/Masthead/__stories__/data/knobs.json
deleted file mode 100644
index 8c869a45ffd..00000000000
--- a/packages/react/src/components/Masthead/__stories__/data/knobs.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "type": ["Platform","Standard"]
-}
diff --git a/packages/react/src/components/Masthead/__tests__/Masthead.steps.js b/packages/react/src/components/Masthead/__tests__/Masthead.steps.js
deleted file mode 100644
index 8838314adab..00000000000
--- a/packages/react/src/components/Masthead/__tests__/Masthead.steps.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('Masthead', () => {
-  describe('Submenu in narrow screen', () => {
-    beforeAll(async () => {
-      await page.setViewportSize({ width: 672, height: 720 });
-      await page.goto(
-        `http://localhost:${process.env.PORT}/iframe.html?id=components-masthead--default&knob-Use%20mock%20data=true`
-      );
-      await page.click(
-        '[data-autoid="dds--masthead"] .bx--header__menu-toggle'
-      );
-      await page.click('button.bx--side-nav__submenu');
-    });
-
-    it('should have the right type for the side nav link text', async () => {
-      const linkText = await page.waitForSelector(
-        '.bx--masthead__side-nav--submemu-back .bx--side-nav__link-text'
-      );
-      const styleValues = await page.evaluate(
-        (linkText) =>
-          window.getStyleValues(linkText, [
-            'font-size',
-            'font-weight',
-            'line-height',
-            'letter-spacing',
-          ]),
-        linkText
-      );
-      expect(styleValues).toEqual({
-        'font-size': '16px',
-        'font-weight': '400',
-        'line-height': '22px',
-        'letter-spacing': 'normal',
-      });
-    });
-  });
-});
diff --git a/packages/react/src/components/Masthead/__tests__/MastheadLeftNav.test.js b/packages/react/src/components/Masthead/__tests__/MastheadLeftNav.test.js
deleted file mode 100644
index 0f0a5b63010..00000000000
--- a/packages/react/src/components/Masthead/__tests__/MastheadLeftNav.test.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
-import MastheadLeftNav from '../MastheadLeftNav';
-import mockData from './data/response.json';
-import { mount } from 'enzyme';
-import React from 'react';
-
-const { stablePrefix } = ddsSettings;
-
-describe('MastheadLeftNav', () => {
-  it('renders one MastheadLeftNav', () => {
-    const wrapper = mount(<MastheadLeftNav navigation={[]} />);
-    expect(wrapper).toHaveLength(1);
-  });
-
-  it('receives the `navigation` prop correctly', () => {
-    const wrapper = mount(<MastheadLeftNav navigation={mockData.links} />);
-    expect(wrapper.prop('navigation')).not.toBeUndefined();
-  });
-
-  it('receives the `platform` prop correctly', () => {
-    const platform = {
-      name: 'IBM Cloud',
-      url: 'https://www.ibm.com/cloud',
-    };
-
-    const navType = 'eco';
-
-    const component = mount(
-      <MastheadLeftNav
-        navigation={mockData.links}
-        navType={navType}
-        platform={platform}
-      />
-    );
-
-    const anchor = component.find(
-      `a[data-autoid="${stablePrefix}--masthead-${navType}-sidenav__l0-productname"]`
-    );
-
-    expect(anchor.text()).toMatch('IBM Cloud');
-    expect(anchor.prop('href')).toMatch('https://www.ibm.com/cloud');
-  });
-});
diff --git a/packages/react/src/components/Masthead/__tests__/MastheadSearch.test.js b/packages/react/src/components/Masthead/__tests__/MastheadSearch.test.js
deleted file mode 100644
index 8693aa637e2..00000000000
--- a/packages/react/src/components/Masthead/__tests__/MastheadSearch.test.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
-import Masthead from '../Masthead';
-import { mount } from 'enzyme';
-import React from 'react';
-import SearchTypeaheadAPI from '../../../internal/vendor/@carbon/ibmdotcom-services/services/SearchTypeahead/SearchTypeahead';
-
-const { stablePrefix } = ddsSettings;
-
-jest.mock(
-  '../../../internal/vendor/@carbon/ibmdotcom-services/services/SearchTypeahead/SearchTypeahead',
-  () => ({
-    getResults: jest.fn(() =>
-      Promise.resolve([
-        ['red hat', '0'],
-        ['red hat linux', '1'],
-        ['red hat enterprise linux x3500 7977', '2'],
-        ['red hat acquisition', '3'],
-      ])
-    ),
-  })
-);
-
-describe('MastheadSearch', () => {
-  it('should search for results if the user enters 3 or more characters', async () => {
-    const masthead = mount(<Masthead searchOpenOnload />);
-    const input = masthead.find(
-      `[data-autoid="${stablePrefix}--header__search--input"]`
-    );
-
-    input.simulate('change', {
-      target: {
-        value: 'IBM',
-      },
-    });
-    input.simulate('focus');
-    expect(SearchTypeaheadAPI.getResults).toHaveBeenCalled();
-  });
-});
diff --git a/packages/react/src/components/Masthead/__tests__/MastheadTopNav.test.js b/packages/react/src/components/Masthead/__tests__/MastheadTopNav.test.js
deleted file mode 100644
index e97baba472b..00000000000
--- a/packages/react/src/components/Masthead/__tests__/MastheadTopNav.test.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { settings as ddsSettings } from '@carbon/ibmdotcom-utilities';
-import MastheadTopNav from '../MastheadTopNav';
-import mockData from './data/response.json';
-import { mount } from 'enzyme';
-import React from 'react';
-
-const { stablePrefix } = ddsSettings;
-
-describe('MastheadTopNav', () => {
-  const hasCurrentUrl = () => {
-    return null;
-  };
-
-  it('renders one MastheadTopNav', () => {
-    const wrapper = mount(
-      <MastheadTopNav navigation={[]} hasCurrentUrl={hasCurrentUrl} />
-    );
-
-    expect(wrapper).toHaveLength(1);
-  });
-
-  it('renders all the items based in the `navigation` prop', () => {
-    const wrapper = mount(
-      <MastheadTopNav
-        navigation={mockData.links}
-        hasCurrentUrl={hasCurrentUrl}
-      />
-    );
-    const menuItems = mockData.links.map((_items, index) => {
-      return wrapper.find(
-        `a[data-autoid="${stablePrefix}--masthead-default__l1-nav${index}"]`
-      );
-    });
-
-    expect(menuItems).toHaveLength(mockData.links.length);
-  });
-
-  it('uses the platform name and link correctly', () => {
-    const platform = {
-      name: 'IBM Cloud',
-      url: 'https://www.ibm.com/cloud',
-    };
-
-    const navType = 'eco';
-
-    const wrapper = mount(
-      <MastheadTopNav
-        navigation={[]}
-        navType={navType}
-        platform={platform}
-        hasCurrentUrl={hasCurrentUrl}
-      />
-    );
-
-    const headerName = wrapper.find(
-      `a[data-autoid="${stablePrefix}--masthead-${navType}__l0-ecosystemname"]`
-    );
-    expect(headerName.prop('href')).toMatch(platform.url);
-    expect(headerName.text()).toMatch(platform.name);
-  });
-});
diff --git a/packages/react/src/components/Masthead/__tests__/data/response.json b/packages/react/src/components/Masthead/__tests__/data/response.json
deleted file mode 100644
index f463b49a8e0..00000000000
--- a/packages/react/src/components/Masthead/__tests__/data/response.json
+++ /dev/null
@@ -1,1460 +0,0 @@
-{
-  "links": [
-    {
-      "title": "Products & Solutions",
-      "titleEnglish": "Products & Solutions",
-      "url": "",
-      "hasMenu": true,
-      "hasMegapanel": true,
-      "menuSections": [
-        {
-          "heading": "",
-          "menuItems": [
-            {
-              "title": "Top products & platforms",
-              "titleEnglish": "Top products & platforms",
-              "url": "https://www.ibm.com/products?lnk=hpmps_bupr",
-              "highlighted": true,
-              "megapanelContent": {
-                "headingTitle": "Top products & platforms",
-                "headingUrl": "https://www.ibm.com/products?lnk=hpmps_bupr",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Db2",
-                      "titleEnglish": "Db2",
-                      "url": "https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"
-                    },
-                    {
-                      "title": "IBM Cloud",
-                      "titleEnglish": "IBM Cloud",
-                      "url": "https://www.ibm.com/cloud?lnk=hpmps_bupr"
-                    },
-                    {
-                      "title": "IBM Sterling",
-                      "titleEnglish": "IBM Sterling",
-                      "url": "https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"
-                    },
-                    {
-                      "title": "IBM Z",
-                      "titleEnglish": "IBM Z",
-                      "url": "https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"
-                    },
-                    {
-                      "title": "SPSS Statistics",
-                      "titleEnglish": "SPSS Statistics",
-                      "url": "https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"
-                    },
-                    {
-                      "title": "Watson",
-                      "titleEnglish": "Watson",
-                      "url": "https://www.ibm.com/watson?lnk=hpmps_bupr"
-                    },
-                    {
-                      "title": "WebSphere",
-                      "titleEnglish": "WebSphere",
-                      "url": "https://www.ibm.com/cloud/websphere-application-platform/?lnk=hpmps_bupr"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/7b8ce832a78108d5/original/megamenu-pictogram-top-products-and-services.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Industries",
-              "titleEnglish": "Industries",
-              "url": "https://www.ibm.com/industries?lnk=hpmps_buin",
-              "highlighted": true,
-              "megapanelContent": {
-                "headingTitle": "Industries",
-                "headingUrl": "https://www.ibm.com/industries?lnk=hpmps_buin",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Banking & financial markets",
-                      "titleEnglish": "Banking & financial markets",
-                      "url": "https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "Government",
-                      "titleEnglish": "Government",
-                      "url": "https://www.ibm.com/industries/government?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "Healthcare",
-                      "titleEnglish": "Healthcare",
-                      "url": "https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "Insurance",
-                      "titleEnglish": "Insurance",
-                      "url": "https://www.ibm.com/industries/insurance?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "Manufacturing",
-                      "titleEnglish": "Manufacturing",
-                      "url": "https://www.ibm.com/industries/manufacturing?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "Retail & consumer products",
-                      "titleEnglish": "Retail & consumer products",
-                      "url": "https://www.ibm.com/industries/retail-consumer-products?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "Telco, media & entertainment",
-                      "titleEnglish": "Telco, media & entertainment",
-                      "url": "https://www.ibm.com/industries/telecom-media-entertainment?lnk=hpmps_buin"
-                    },
-                    {
-                      "title": "View all Industries",
-                      "titleEnglish": "View all Industries",
-                      "url": "https://www.ibm.com/industries?lnk=hpmps_buin"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/6cad5af285e48a89/original/megamenu-pictogram-industries.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Artificial intelligence",
-              "titleEnglish": "Artificial intelligence",
-              "url": "https://www.ibm.com/artificial-intelligence?lnk=hpmps_buai",
-              "megapanelContent": {
-                "headingTitle": "Artificial intelligence",
-                "headingUrl": "https://www.ibm.com/artificial-intelligence?lnk=hpmps_buai",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Customer service",
-                      "titleEnglish": "Customer service",
-                      "url": "https://www.ibm.com/watson/ai-customer-service?lnk=hpmps_buai"
-                    },
-                    {
-                      "title": "Deep learning",
-                      "titleEnglish": "Deep learning",
-                      "url": "https://www.ibm.com/cloud/deep-learning?lnk=hpmps_buai"
-                    },
-                    {
-                      "title": "Image recognition",
-                      "titleEnglish": "Image recognition",
-                      "url": "https://www.ibm.com/cloud/watson-visual-recognition?lnk=hpmps_buai"
-                    },
-                    {
-                      "title": "Platforms & APIs",
-                      "titleEnglish": "Platforms & APIs",
-                      "url": "https://www.ibm.com/watson/products-services?lnk=hpmps_buai"
-                    },
-                    {
-                      "title": "View all AI products",
-                      "titleEnglish": "View all AI products",
-                      "url": "https://www.ibm.com/us-en/products/category/technology/cognitive-computing-and-AI?lnk=hpmps_buai"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/3ed6517e90739279/original/megamenu-pictogram-artificial-intelligence.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Automation",
-              "titleEnglish": "Automation",
-              "url": "https://www.ibm.com/automation?lnk=hpmps_buau",
-              "megapanelContent": {
-                "headingTitle": "Automation",
-                "headingUrl": "https://www.ibm.com/automation?lnk=hpmps_buau",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Business process automation",
-                      "titleEnglish": "Business process automation",
-                      "url": "https://www.ibm.com/automation/services?lnk=hpmps_buau"
-                    },
-                    {
-                      "title": "Business process mapping",
-                      "titleEnglish": "Business process mapping",
-                      "url": "https://www.ibm.com/automation/process-mapping?lnk=hpmps_buau"
-                    },
-                    {
-                      "title": "Business rules management",
-                      "titleEnglish": "Business rules management",
-                      "url": "https://www.ibm.com/automation/enterprise-content-management?lnk=hpmps_buau"
-                    },
-                    {
-                      "title": "Data capture",
-                      "titleEnglish": "Data capture",
-                      "url": "https://www.ibm.com/automation/data-capture?lnk=hpmps_buau"
-                    },
-                    {
-                      "title": "View all Automation products",
-                      "titleEnglish": "View all Automation products",
-                      "url": "https://www.ibm.com/us-en/products/categories?technologyTopics[0][0]=cat.topic:Automation&from_page=landing&lnk=hpmps_buau"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/15598df3a3519f7f/original/megamenu-pictogram-business-automation.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Blockchain",
-              "titleEnglish": "Blockchain",
-              "url": "https://www.ibm.com/blockchain?lnk=hpmps_bubc",
-              "megapanelContent": {
-                "headingTitle": "Blockchain",
-                "headingUrl": "https://www.ibm.com/blockchain?lnk=hpmps_bubc",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Blockchain for supplier management",
-                      "titleEnglish": "Blockchain for supplier management",
-                      "url": "https://www.ibm.com/blockchain/solutions/trust-your-supplier?lnk=hpmps_bubc"
-                    },
-                    {
-                      "title": "Blockchain for trade finance",
-                      "titleEnglish": "Blockchain for trade finance",
-                      "url": "https://www.ibm.com/blockchain/solutions/trade-finance?lnk=hpmps_bubc"
-                    },
-                    {
-                      "title": "Blockchain for supply chain",
-                      "titleEnglish": "Blockchain for supply chain",
-                      "url": "https://www.ibm.com/blockchain/industries/supply-chain?lnk=hpmps_bubc"
-                    },
-                    {
-                      "title": "Blockchain for food",
-                      "titleEnglish": "Blockchain for food",
-                      "url": "https://www.ibm.com/blockchain/solutions/food-trust?lnk=hpmps_bubc"
-                    },
-                    {
-                      "title": "View all Blockchain products",
-                      "titleEnglish": "View all Blockchain products",
-                      "url": "https://www.ibm.com/us-en/products/category/technology/blockchain?lnk=hpmps_bubc"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/75dc99f23dced53/original/megamenu-pictogram-blockchain.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Business operations",
-              "titleEnglish": "Business operations",
-              "url": "https://www.ibm.com/business-operations?lnk=hpmps_buop",
-              "megapanelContent": {
-                "headingTitle": "Business operations",
-                "headingUrl": "https://www.ibm.com/business-operations?lnk=hpmps_buop",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Enterprise asset management",
-                      "titleEnglish": "Enterprise asset management",
-                      "url": "https://www.ibm.com/business-operations/enterprise-asset-management?lnk=hpmps_buop"
-                    },
-                    {
-                      "title": "Facilities management",
-                      "titleEnglish": "Facilities management",
-                      "url": "https://www.ibm.com/business-operations/facilities-management/integrated-workplace-management-system?lnk=hpmps_buop"
-                    },
-                    {
-                      "title": "Systems engineering",
-                      "titleEnglish": "Systems engineering",
-                      "url": "https://www.ibm.com/business-operations/systems-engineering?lnk=hpmps_buop"
-                    },
-                    {
-                      "title": "Weather Business Solutions",
-                      "titleEnglish": "Weather Business Solutions",
-                      "url": "https://www.ibm.com/weather/industries?lnk=hpmps_buop"
-                    },
-                    {
-                      "title": "View all Business operations products",
-                      "titleEnglish": "View all Business operations products",
-                      "url": "https://www.ibm.com/us-en/products/category/business/business-operations?lnk=hpmps_buop"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/5e600deb01c4ebd3/original/megamenu-pictogram-business-operations.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Cloud computing",
-              "titleEnglish": "Cloud computing",
-              "url": "https://www.ibm.com/cloud?lnk=hpmps_bucl&lnk2=link",
-              "megapanelContent": {
-                "headingTitle": "Cloud computing",
-                "headingUrl": "https://www.ibm.com/cloud?lnk=hpmps_bucl",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Containers",
-                      "titleEnglish": "Containers",
-                      "url": "https://www.ibm.com/cloud/container-service?lnk=hpmps_bucl"
-                    },
-                    {
-                      "title": "Databases",
-                      "titleEnglish": "Databases",
-                      "url": "https://www.ibm.com/cloud/databases?lnk=hpmps_bucl"
-                    },
-                    {
-                      "title": "DevOps",
-                      "titleEnglish": "DevOps",
-                      "url": "https://www.ibm.com/cloud/devops?lnk=hpmps_bucl"
-                    },
-                    {
-                      "title": "Multicloud management",
-                      "titleEnglish": "Multicloud management",
-                      "url": "https://www.ibm.com/cloud/management?lnk=hpmps_bucl"
-                    },
-                    {
-                      "title": "View all Cloud computing products",
-                      "titleEnglish": "View all Cloud computing products",
-                      "url": "https://www.ibm.com/cloud/products?lnk=hpmps_bucl"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/1f27aeccb7d68054/original/megamenu-pictogram-cloud-computing.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Data & Analytics",
-              "titleEnglish": "Data & Analytics",
-              "url": "https://www.ibm.com/analytics?lnk=hpmps_buda",
-              "megapanelContent": {
-                "headingTitle": "Data & Analytics",
-                "headingUrl": "https://www.ibm.com/analytics?lnk=hpmps_buda",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Big data",
-                      "titleEnglish": "Big data",
-                      "url": "https://www.ibm.com/analytics/hadoop/big-data-analytics?lnk=hpmps_buda"
-                    },
-                    {
-                      "title": "Business intelligence",
-                      "titleEnglish": "Business intelligence",
-                      "url": "https://www.ibm.com/analytics/business-intelligence?lnk=hpmps_buda"
-                    },
-                    {
-                      "title": "Data governance",
-                      "titleEnglish": "Data governance",
-                      "url": "https://www.ibm.com/analytics/data-governance?lnk=hpmps_buda"
-                    },
-                    {
-                      "title": "Data science",
-                      "titleEnglish": "Data science",
-                      "url": "https://www.ibm.com/analytics/data-science-business-analytics?lnk=hpmps_buda"
-                    },
-                    {
-                      "title": "View all Data & Analytics products",
-                      "titleEnglish": "View all Data & Analytics products",
-                      "url": "https://www.ibm.com/us-en/products/category/technology/analytics?lnk=hpmps_buda"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/6d9bf0fd66e54f9a/original/megamenu-pictogram-data-analytics.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "IT infrastructure",
-              "titleEnglish": "IT infrastructure",
-              "url": "https://www.ibm.com/it-infrastructure?lnk=hpmps_buit",
-              "megapanelContent": {
-                "headingTitle": "IT infrastructure",
-                "headingUrl": "https://www.ibm.com/it-infrastructure?lnk=hpmps_buit",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Data storage",
-                      "titleEnglish": "Data storage",
-                      "url": "https://www.ibm.com/it-infrastructure/storage?lnk=hpmps_buit"
-                    },
-                    {
-                      "title": "Enterprise servers",
-                      "titleEnglish": "Enterprise servers",
-                      "url": "https://www.ibm.com/it-infrastructure/servers?lnk=hpmps_buit"
-                    },
-                    {
-                      "title": "Hybrid cloud infrastructure",
-                      "titleEnglish": "Hybrid cloud infrastructure",
-                      "url": "https://www.ibm.com/it-infrastructure/solutions/hybrid-cloud?lnk=hpmps_buit"
-                    },
-                    {
-                      "title": "Mainframes",
-                      "titleEnglish": "Mainframes",
-                      "url": "https://www.ibm.com/it-infrastructure/servers/mainframes?lnk=hpmps_buit"
-                    },
-                    {
-                      "title": "View all IT infrastructure products",
-                      "titleEnglish": "View all IT infrastructure products",
-                      "url": "https://www.ibm.com/us-en/products/category/technology/IT-infrastructure?lnk=hpmps_buit"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/18758c6b890d488e/original/megamenu-pictogram-IT-infrastructure.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Security",
-              "titleEnglish": "Security",
-              "url": "https://www.ibm.com/security?lnk=hpmps_buse",
-              "megapanelContent": {
-                "headingTitle": "Security",
-                "headingUrl": "https://www.ibm.com/security?lnk=hpmps_buse",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Data security",
-                      "titleEnglish": "Data security",
-                      "url": "https://www.ibm.com/security/data-security?lnk=hpmps_buse"
-                    },
-                    {
-                      "title": "Identity & access management",
-                      "titleEnglish": "Identity & access management",
-                      "url": "https://www.ibm.com/security/identity-access-management?lnk=hpmps_buse"
-                    },
-                    {
-                      "title": "Security information & event management",
-                      "titleEnglish": "Security information & event management",
-                      "url": "https://www.ibm.com/security/security-intelligence?lnk=hpmps_buse"
-                    },
-                    {
-                      "title": "Security orchestration, automation & response",
-                      "titleEnglish": "Security orchestration, automation & response",
-                      "url": "https://www.ibm.com/security/intelligent-orchestration?lnk=hpmps_buse"
-                    },
-                    {
-                      "title": "View all Security products",
-                      "titleEnglish": "View all Security products",
-                      "url": "https://www.ibm.com/us-en/products/category/technology/security?lnk=hpmps_buse?lnk=hpmps_buse"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/335f1d6485cede0/original/megamenu-pictogram-security.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Supply chain",
-              "titleEnglish": "Supply chain",
-              "url": "https://www.ibm.com/supply-chain?lnk=hpmps_busc",
-              "megapanelContent": {
-                "headingTitle": "Supply chain",
-                "headingUrl": "https://www.ibm.com/supply-chain?lnk=hpmps_busc",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Supply chain visibility",
-                      "titleEnglish": "Supply chain visibility",
-                      "url": "https://www.ibm.com/supply-chain/visibility?lnk=hpmps_busc"
-                    },
-                    {
-                      "title": "Supplier collaboration",
-                      "titleEnglish": "Supplier collaboration",
-                      "url": "https://www.ibm.com/supply-chain/supplier-collaboration-solutions?lnk=hpmps_busc"
-                    },
-                    {
-                      "title": "Business process improvement",
-                      "titleEnglish": "Business process improvement",
-                      "url": "https://www.ibm.com/supply-chain/process-improvement-solutions?lnk=hpmps_busc"
-                    },
-                    {
-                      "title": "Order management and fulfillment",
-                      "titleEnglish": "Order management and fulfillment",
-                      "url": "https://www.ibm.com/supply-chain/order-management-software?lnk=hpmps_busc"
-                    },
-                    {
-                      "title": "View all Supply Chain products",
-                      "titleEnglish": "View all Supply Chain products",
-                      "url": "https://www.ibm.com/supply-chain/products?lnk=hpmps_busc"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/53c30e47cbfc167/original/megamenu-pictogram-supply-chain.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "COVID-19 Solutions",
-              "titleEnglish": "COVID-19 Solutions",
-              "url": "https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco",
-              "highlighted": true
-            },
-            {
-              "title": "Flexible payment plans",
-              "titleEnglish": "Flexible payment plans",
-              "url": "https://www.ibm.com/financing?lnk=hpmps_bufi",
-              "highlighted": true
-            },
-            {
-              "title": "View all products",
-              "titleEnglish": "View all products",
-              "url": "https://www.ibm.com/products?lnk=hpmps_buall",
-              "megaPanelViewAll": true
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Consulting & Services",
-      "titleEnglish": "Consulting & Services",
-      "url": "",
-      "hasMenu": true,
-      "hasMegapanel": true,
-      "menuSections": [
-        {
-          "heading": "",
-          "menuItems": [
-            {
-              "title": "Business process services",
-              "titleEnglish": "Business process services",
-              "url": "https://www.ibm.com/services/process?lnk=hpmsc_bups",
-              "megapanelContent": {
-                "headingTitle": "Business process services",
-                "headingUrl": "https://www.ibm.com/services/process?lnk=hpmsc_bups",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Artificial intelligence services",
-                      "titleEnglish": "Artificial intelligence services",
-                      "url": "https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Automation",
-                      "titleEnglish": "Automation",
-                      "url": "https://www.ibm.com/automation/services?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Big data & data platform",
-                      "titleEnglish": "Big data & data platform",
-                      "url": "https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Business process outsourcing",
-                      "titleEnglish": "Business process outsourcing",
-                      "url": "https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Edge consulting",
-                      "titleEnglish": "Edge consulting",
-                      "url": "https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Finance transformation",
-                      "titleEnglish": "Finance transformation",
-                      "url": "https://www.ibm.com/services/process/finance?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "IoT consulting",
-                      "titleEnglish": "IoT consulting",
-                      "url": "https://www.ibm.com/services/process/iot-consulting?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Procurement & strategic sourcing",
-                      "titleEnglish": "Procurement & strategic sourcing",
-                      "url": "https://www.ibm.com/services/process/procurement?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Risk consulting & fraud management",
-                      "titleEnglish": "Risk consulting & fraud management",
-                      "url": "https://www.ibm.com/services/process/risk?lnk=hpmsc_bups"
-                    },
-                    {
-                      "title": "Supply chain",
-                      "titleEnglish": "Supply chain",
-                      "url": "https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Design & business strategy",
-              "titleEnglish": "Design & business strategy",
-              "url": "https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs",
-              "megapanelContent": {
-                "headingTitle": "Design & business strategy",
-                "headingUrl": "https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Digital strategy",
-                      "titleEnglish": "Digital strategy",
-                      "url": "https://www.ibm.com/services/business/digital?lnk=hpmsc_bubs"
-                    },
-                    {
-                      "title": "Experience strategy",
-                      "titleEnglish": "Experience strategy",
-                      "url": "https://www.ibm.com/services/ibmix/experience-strategy?lnk=hpmsc_bubs"
-                    },
-                    {
-                      "title": "Marketing platforms",
-                      "titleEnglish": "Marketing platforms",
-                      "url": "https://www.ibm.com/services/ibmix/marketing-platforms?lnk=hpmsc_bubs"
-                    },
-                    {
-                      "title": "Salesforce consulting",
-                      "titleEnglish": "Salesforce consulting",
-                      "url": "https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Hybrid multicloud services",
-              "titleEnglish": "Hybrid multicloud services",
-              "url": "https://www.ibm.com/services?lnk=hpmsc_buhs",
-              "megapanelContent": {
-                "headingTitle": "Hybrid multicloud services",
-                "headingUrl": "https://www.ibm.com/services?lnk=hpmsc_buhs",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Business continuity & resiliency",
-                      "titleEnglish": "Business continuity & resiliency",
-                      "url": "https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs"
-                    },
-                    {
-                      "title": "Cloud services",
-                      "titleEnglish": "Cloud services",
-                      "url": "https://www.ibm.com/services/cloud?lnk=hpmsc_buhs"
-                    },
-                    {
-                      "title": "Network",
-                      "titleEnglish": "Network",
-                      "url": "https://www.ibm.com/services/network?lnk=hpmsc_buhs"
-                    },
-                    {
-                      "title": "Workplace services",
-                      "titleEnglish": "Workplace services",
-                      "url": "https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Talent & transformation",
-              "titleEnglish": "Talent & transformation",
-              "url": "https://www.ibm.com/talent-management?lnk=hpmsc_buta",
-              "megapanelContent": {
-                "headingTitle": "Talent & transformation",
-                "headingUrl": "https://www.ibm.com/talent-management?lnk=hpmsc_buta",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "HR transformation",
-                      "titleEnglish": "HR transformation",
-                      "url": "https://www.ibm.com/services/process/talent/human-resources?lnk=hpmsc_buta"
-                    },
-                    {
-                      "title": "Talent acquisition",
-                      "titleEnglish": "Talent acquisition",
-                      "url": "https://www.ibm.com/talent-management/talent-acquisition?lnk=hpmsc_buta"
-                    },
-                    {
-                      "title": "Talent development",
-                      "titleEnglish": "Talent development",
-                      "url": "https://www.ibm.com/services/process/talent/development?lnk=hpmsc_buta"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Application services",
-              "titleEnglish": "Application services",
-              "url": "https://www.ibm.com/services/applications?lnk=hpmsc_buas",
-              "megapanelContent": {
-                "headingTitle": "Application services",
-                "headingUrl": "https://www.ibm.com/services/applications?lnk=hpmsc_buas",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Application development",
-                      "titleEnglish": "Application development",
-                      "url": "https://www.ibm.com/services/applications/development?lnk=hpmsc_buas"
-                    },
-                    {
-                      "title": "Application testing",
-                      "titleEnglish": "Application testing",
-                      "url": "https://www.ibm.com/services/applications/testing?lnk=hpmsc_buas"
-                    },
-                    {
-                      "title": "Enterprise application management",
-                      "titleEnglish": "Enterprise application management",
-                      "url": "https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas"
-                    },
-                    {
-                      "title": "Enterprise applications strategy",
-                      "titleEnglish": "Enterprise applications strategy",
-                      "url": "https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Security services",
-              "titleEnglish": "Security services",
-              "url": "https://www.ibm.com/security/services?lnk=hpmsc_buse",
-              "megapanelContent": {
-                "headingTitle": "Security services",
-                "headingUrl": "https://www.ibm.com/security/services?lnk=hpmsc_buse",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Application security",
-                      "titleEnglish": "Application security",
-                      "url": "https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"
-                    },
-                    {
-                      "title": "Cloud security",
-                      "titleEnglish": "Cloud security",
-                      "url": "https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"
-                    },
-                    {
-                      "title": "Data security",
-                      "titleEnglish": "Data security",
-                      "url": "https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"
-                    },
-                    {
-                      "title": "Identity & access management",
-                      "titleEnglish": "Identity & access management",
-                      "url": "https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"
-                    },
-                    {
-                      "title": "Managed security",
-                      "titleEnglish": "Managed security",
-                      "url": "https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"
-                    },
-                    {
-                      "title": "Security governance",
-                      "titleEnglish": "Security governance",
-                      "url": "https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Services for tech support",
-              "titleEnglish": "Services for tech support",
-              "url": "https://www.ibm.com/services/technology-support?lnk=hpmsc_busv",
-              "megapanelContent": {
-                "headingTitle": "Services for tech support",
-                "headingUrl": "https://www.ibm.com/services/technology-support?lnk=hpmsc_busv",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Open source",
-                      "titleEnglish": "Open source",
-                      "url": "https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"
-                    },
-                    {
-                      "title": "Third party & multivendor",
-                      "titleEnglish": "Third party & multivendor",
-                      "url": "https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"
-                    },
-                    {
-                      "title": "IBM warranties and maintenance",
-                      "titleEnglish": "IBM warranties and maintenance",
-                      "url": "https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Flexible payment plans",
-              "titleEnglish": "Flexible payment plans",
-              "url": "https://www.ibm.com/financing/solutions/it-services-financing?lnk=hpmsc_bufi"
-            },
-            {
-              "title": "View all services",
-              "titleEnglish": "View all services",
-              "url": "https://www.ibm.com/services?lnk=hpmsc_buall",
-              "megaPanelViewAll": true
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Learn & Support",
-      "titleEnglish": "Learn & Support",
-      "url": "",
-      "hasMenu": true,
-      "hasMegapanel": true,
-      "menuSections": [
-        {
-          "heading": "",
-          "menuItems": [
-            {
-              "title": "What is...",
-              "titleEnglish": "What is...",
-              "url": "https://www.ibm.com/cloud/learn?lnk=hpmls_buwi",
-              "megapanelContent": {
-                "headingTitle": "What is...",
-                "headingUrl": "https://www.ibm.com/cloud/learn?lnk=hpmls_buwi",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Artificial intelligence",
-                      "titleEnglish": "Artificial intelligence",
-                      "url": "https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Automation",
-                      "titleEnglish": "Automation",
-                      "url": "https://www.ibm.com/topics/automation?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Blockchain",
-                      "titleEnglish": "Blockchain",
-                      "url": "https://www.ibm.com/blockchain/what-is-blockchain?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Business intelligence",
-                      "titleEnglish": "Business intelligence",
-                      "url": "https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Chatbots",
-                      "titleEnglish": "Chatbots",
-                      "url": "https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Cloud computing",
-                      "titleEnglish": "Cloud computing",
-                      "url": "https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Containerization",
-                      "titleEnglish": "Containerization",
-                      "url": "https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Cybersecurity",
-                      "titleEnglish": "Cybersecurity",
-                      "url": "https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Databases",
-                      "titleEnglish": "Databases",
-                      "url": "https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "DevOps",
-                      "titleEnglish": "DevOps",
-                      "url": "https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Kubernetes",
-                      "titleEnglish": "Kubernetes",
-                      "url": "https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Quantum computing",
-                      "titleEnglish": "Quantum computing",
-                      "url": "https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"
-                    },
-                    {
-                      "title": "Supply chain",
-                      "titleEnglish": "Supply chain",
-                      "url": "https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Training",
-              "titleEnglish": "Training",
-              "url": "https://www.ibm.com/training/?lnk=hpmls_butr",
-              "megapanelContent": {
-                "headingTitle": "Training",
-                "headingUrl": "https://www.ibm.com/training/?lnk=hpmls_butr",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Courses",
-                      "titleEnglish": "Courses",
-                      "url": "https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"
-                    },
-                    {
-                      "title": "Learning journeys",
-                      "titleEnglish": "Learning journeys",
-                      "url": "https://www.ibm.com/training/journeys?lnk=hpmls_butr"
-                    },
-                    {
-                      "title": "Professional certifications",
-                      "titleEnglish": "Professional certifications",
-                      "url": "https://www.ibm.com/certify?lnk=hpmls_butr"
-                    },
-                    {
-                      "title": "Digital learning subscriptions",
-                      "titleEnglish": "Digital learning subscriptions",
-                      "url": "https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Developer education",
-              "titleEnglish": "Developer education",
-              "url": "https://developer.ibm.com/?lnk=hpmls_bude",
-              "megapanelContent": {
-                "headingTitle": "Developer education",
-                "headingUrl": "https://developer.ibm.com/?lnk=hpmls_bude",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Code patterns",
-                      "titleEnglish": "Code patterns",
-                      "url": "https://developer.ibm.com/patterns/?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "Developer community",
-                      "titleEnglish": "Developer community",
-                      "url": "https://developer.ibm.com/community/?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "Developer events",
-                      "titleEnglish": "Developer events",
-                      "url": "https://developer.ibm.com/events/?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "Open Source @ IBM",
-                      "titleEnglish": "Open Source @ IBM",
-                      "url": "https://ibm.com/opensource?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "Technical articles",
-                      "titleEnglish": "Technical articles",
-                      "url": "https://developer.ibm.com/articles?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "Tutorials",
-                      "titleEnglish": "Tutorials",
-                      "url": "https://developer.ibm.com/tutorials/?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "Videos",
-                      "titleEnglish": "Videos",
-                      "url": "https://developer.ibm.com/videos?lnk=hpmls_bude"
-                    },
-                    {
-                      "title": "View more Developer education",
-                      "titleEnglish": "View more Developer education",
-                      "url": "https://developer.ibm.com/?lnk=hpmls_bude"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Documentation",
-              "titleEnglish": "Documentation",
-              "url": "https://www.ibm.com/support/knowledgecenter/?lnk=hpmls_budc",
-              "megapanelContent": {
-                "headingTitle": "Documentation",
-                "headingUrl": "https://www.ibm.com/support/knowledgecenter/?lnk=hpmls_budc",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "All product documentation",
-                      "titleEnglish": "All product documentation",
-                      "url": "https://www.ibm.com/support/knowledgecenter?lnk=hpmls_budc"
-                    },
-                    {
-                      "title": "For products on IBM Cloud",
-                      "titleEnglish": "For products on IBM Cloud",
-                      "url": "https://cloud.ibm.com/docs?lnk=hpmls_budc"
-                    },
-                    {
-                      "title": "For use cases — IBM Redbooks",
-                      "titleEnglish": "For use cases — IBM Redbooks",
-                      "url": "http://www.redbooks.ibm.com/?lnk=hpmls_budc"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Community",
-              "titleEnglish": "Community",
-              "url": "",
-              "megapanelContent": {
-                "headingTitle": "Community",
-                "headingUrl": "",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "IBM Developer",
-                      "titleEnglish": "IBM Developer",
-                      "url": "https://developer.ibm.com/?lnk=hpmls_buco"
-                    },
-                    {
-                      "title": "IBM Community",
-                      "titleEnglish": "IBM Community",
-                      "url": "https://community.ibm.com/community/user/home?lnk=hpmls_buco"
-                    },
-                    {
-                      "title": "Support forums",
-                      "titleEnglish": "Support forums",
-                      "url": "https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Resources",
-              "titleEnglish": "Resources",
-              "url": "https://www.ibm.com/blogs/?lnk=hpmls_bure",
-              "megapanelContent": {
-                "headingTitle": "Resources",
-                "headingUrl": "https://www.ibm.com/blogs/?lnk=hpmls_bure",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Blogs & thought leadership",
-                      "titleEnglish": "Blogs & thought leadership",
-                      "url": "https://www.ibm.com/blogs/?lnk=hpmls_bure"
-                    },
-                    {
-                      "title": "Case studies & client stories",
-                      "titleEnglish": "Case studies & client stories",
-                      "url": "https://www.ibm.com/case-studies?lnk=hpmls_bure"
-                    },
-                    {
-                      "title": "Upcoming events & webinars",
-                      "titleEnglish": "Upcoming events & webinars",
-                      "url": "http://www.ibm.com/events?lnk=hpmls_bure"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Support",
-              "titleEnglish": "Support",
-              "url": "https://www.ibm.com/support?lnk=hpmls_busu",
-              "megapanelContent": {
-                "headingTitle": "Support",
-                "headingUrl": "https://www.ibm.com/support?lnk=hpmls_busu",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Download fixes, updates & drivers",
-                      "titleEnglish": "Download fixes, updates & drivers",
-                      "url": "https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"
-                    },
-                    {
-                      "title": "Download licensed software",
-                      "titleEnglish": "Download licensed software",
-                      "url": "https://www.ibm.com/software/passportadvantage/?lnk=hpmls_busu"
-                    },
-                    {
-                      "title": "Open a case",
-                      "titleEnglish": "Open a case",
-                      "url": "https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"
-                    },
-                    {
-                      "title": "View available support plans",
-                      "titleEnglish": "View available support plans",
-                      "url": "https://www.ibm.com/support/offerings?lnk=hpmls_busu"
-                    },
-                    {
-                      "title": "View more on Support",
-                      "titleEnglish": "View more on Support",
-                      "url": "https://www.ibm.com/support?lnk=hpmls_busu&lnk2=all"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "Cloud platform support",
-              "titleEnglish": "Cloud platform support",
-              "url": "https://www.ibm.com/cloud/support?lnk=hpmls_bucl"
-            }
-          ]
-        }
-      ]
-    },
-    {
-      "title": "Explore more",
-      "titleEnglish": "Explore more",
-      "url": "",
-      "hasMenu": true,
-      "hasMegapanel": true,
-      "menuSections": [
-        {
-          "heading": "",
-          "menuItems": [
-            {
-              "title": "Partners",
-              "titleEnglish": "Partners",
-              "url": "https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa",
-              "megapanelContent": {
-                "headingTitle": "Partners",
-                "headingUrl": "https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Partner with us — PartnerWorld",
-                      "titleEnglish": "Partner with us — PartnerWorld",
-                      "url": "https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"
-                    },
-                    {
-                      "title": "Our strategic partnerships",
-                      "titleEnglish": "Our strategic partnerships",
-                      "url": "https://www.ibm.com/alliances?lnk=hpmex_bupa"
-                    },
-                    {
-                      "title": "Flexible payment plans",
-                      "titleEnglish": "Flexible payment plans",
-                      "url": "https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "IBM Research",
-              "titleEnglish": "IBM Research",
-              "url": "https://www.research.ibm.com/?lnk=hpmex_bure",
-              "megapanelContent": {
-                "headingTitle": "IBM Research",
-                "headingUrl": "https://www.research.ibm.com/?lnk=hpmex_bure",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Research areas",
-                      "titleEnglish": "Research areas",
-                      "url": "https://www.research.ibm.com/?lnk=hpmex_bure"
-                    },
-                    {
-                      "title": "Researcher directory",
-                      "titleEnglish": "Researcher directory",
-                      "url": "https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"
-                    },
-                    {
-                      "title": "Patents",
-                      "titleEnglish": "Patents",
-                      "url": "https://www.research.ibm.com/patents/?lnk=hpmex_bure"
-                    },
-                    {
-                      "title": "Work with us",
-                      "titleEnglish": "Work with us",
-                      "url": "https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "About IBM",
-              "titleEnglish": "About IBM",
-              "url": "https://www.ibm.com/ibm/us/en/?lnk=hpmex_buab",
-              "megapanelContent": {
-                "headingTitle": "About IBM",
-                "headingUrl": "https://www.ibm.com/ibm/us/en/?lnk=hpmex_buab",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Annual report",
-                      "titleEnglish": "Annual report",
-                      "url": "https://www.ibm.com/annualreport/?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "Career opportunities",
-                      "titleEnglish": "Career opportunities",
-                      "url": "https://www.ibm.com/employment/?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "Corporate social responsibility",
-                      "titleEnglish": "Corporate social responsibility",
-                      "url": "https://www.ibm.org?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "Diversity & inclusion",
-                      "titleEnglish": "Diversity & inclusion",
-                      "url": "https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "Investor relations",
-                      "titleEnglish": "Investor relations",
-                      "url": "https://www.ibm.com/investor/?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "News & announcements",
-                      "titleEnglish": "News & announcements",
-                      "url": "http://newsroom.ibm.com?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "Thought leadership",
-                      "titleEnglish": "Thought leadership",
-                      "url": "https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"
-                    },
-                    {
-                      "title": "Security, privacy & trust",
-                      "titleEnglish": "Security, privacy & trust",
-                      "url": "https://www.ibm.com/trust?lnk=hpmex_buab"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            },
-            {
-              "title": "COVID-19",
-              "titleEnglish": "COVID-19",
-              "url": "https://www.ibm.com/impact/covid-19?lnk=hpmex_buco",
-              "megapanelContent": {
-                "headingTitle": "COVID-19",
-                "headingUrl": "https://www.ibm.com/impact/covid-19?lnk=hpmex_buco",
-                "description": "",
-                "quickLinks": {
-                  "title": "",
-                  "links": [
-                    {
-                      "title": "Business solutions",
-                      "titleEnglish": "Business solutions",
-                      "url": "https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"
-                    },
-                    {
-                      "title": "Action guide",
-                      "titleEnglish": "Action guide",
-                      "url": "https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"
-                    },
-                    {
-                      "title": "News",
-                      "titleEnglish": "News",
-                      "url": "https://newsroom.ibm.com/COVID-19?lnk=hpmex_buco"
-                    }
-                  ]
-                },
-                "feature": {
-                  "heading": "",
-                  "imageUrl": "",
-                  "linkTitle": "",
-                  "linkUrl": ""
-                }
-              }
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}
diff --git a/packages/react/src/components/Masthead/index.js b/packages/react/src/components/Masthead/index.js
deleted file mode 100644
index 0e4a9101729..00000000000
--- a/packages/react/src/components/Masthead/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as Masthead } from './Masthead';
-export { default as MastheadL1 } from './MastheadL1';
-export { default as MastheadSearch } from './MastheadSearch';
-export { default as MastheadLeftNav } from './MastheadLeftNav';
-export { default as MastheadTopNav } from './MastheadTopNav';
diff --git a/packages/react/src/components/NoticeChoice/BPIDLegalText.js b/packages/react/src/components/NoticeChoice/BPIDLegalText.js
deleted file mode 100644
index 0bfbe0719bf..00000000000
--- a/packages/react/src/components/NoticeChoice/BPIDLegalText.js
+++ /dev/null
@@ -1,18 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 from 'react';
-const BPIDLegalText = ({ bpidLegalText }) => {
-  return <p>{bpidLegalText}</p>;
-};
-BPIDLegalText.propTypes = {
-  /**
-   * @description Legal text based on the ibmid query params
-   */
-  bpidLegalText: PropTypes.string.isRequired,
-};
-export default BPIDLegalText;
diff --git a/packages/react/src/components/NoticeChoice/NoticeChoice.js b/packages/react/src/components/NoticeChoice/NoticeChoice.js
deleted file mode 100644
index 257e015993f..00000000000
--- a/packages/react/src/components/NoticeChoice/NoticeChoice.js
+++ /dev/null
@@ -1,517 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// eslint-disable-next-line sort-imports
-import { checkPreferencesv3, loadContent } from './services';
-import React, { useCallback, useEffect, useRef, useState } from 'react';
-
-import BPIDLegalText from './BPIDLegalText';
-import Checkbox from '../../internal/vendor/carbon-components-react/components/Checkbox';
-// eslint-disable-next-line sort-imports
-import countrySettings from './country-settings';
-import { DDS_NOTICE_CHOICE } from '../../internal/FeatureFlags.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import featureFlag from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/featureflag/featureflag';
-import { getMappedValue } from './utils';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import SkeletonText from '../../internal/vendor/carbon-components-react/components/SkeletonText';
-import worldWideContent from './world-wide-content';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-const emailRegExp =
-  /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/;
-
-export function NoticeChoice({
-  locale,
-  country,
-  questionChoices,
-  email,
-  onChange,
-  termsConditionLink,
-  classNames,
-  defaultValues,
-  enableAllOptIn,
-  bpidLegalText,
-  state,
-}) {
-  const [loaded, setLoaded] = useState(false);
-  const [changed, setChanged] = useState(false);
-  const [preText, setPreText] = useState('');
-  const [postText, setPostText] = useState('');
-  const [checkboxes, setCheckboxes] = useState();
-  const [ncData, setNcData] = useState();
-  const [optInContent, setOptInContent] = useState({
-    ...worldWideContent.OptInContent,
-    cclc: `${worldWideContent.cc_name}-${worldWideContent.cc_lang}`,
-  });
-  const [prefChange, setPrefChange] = useState(false);
-  const [fetchedPref, setFetchedPref] = useState('');
-  const [values, setValues] = useState({
-    EMAIL: false,
-    PHONE: false,
-    POSTAL: false,
-    NC_HIDDEN_EMAIL: worldWideContent.cc_default_status,
-    NC_HIDDEN_PHONE: worldWideContent.cc_default_status,
-    NC_HIDDEN_POSTAL: worldWideContent.cc_default_status,
-  });
-  let defaultPreText = useRef('');
-
-  const getOptionByQuestion = useCallback(
-    (question, OptInContentValue) => {
-      let OptInContent = OptInContentValue;
-      if (!OptInContent) {
-        OptInContent = ncData.OptInContent;
-      }
-      let option;
-      switch (question) {
-        case 'EMAIL': {
-          option = OptInContent.fourQuestionApp[0];
-          break;
-        }
-        case 'PHONE': {
-          option = OptInContent.fourQuestionApp[1];
-          break;
-        }
-        case 'POSTAL': {
-          option = OptInContent.fourQuestionApp[2];
-          break;
-        }
-        default: {
-          option = OptInContent.fourQuestionApp[0];
-          break;
-        }
-      }
-      return option;
-    },
-    [ncData]
-  );
-
-  /**
-   * If the `enableAllOptIn` variable is false, then for each key in the `checkboxes` object, set the
-   * value of the `newValues` object to the value defined in the notice choice content, or if the
-   * `defaultValues` object has a property with the same name as the key, then set the value of the
-   * `newValues` object to the value of the `defaultValues` object's property
-   */
-  const setDefaultSelections = useCallback(() => {
-    if (!enableAllOptIn && checkboxes) {
-      const newValues = { ...values };
-      Object.keys(checkboxes).forEach((key) => {
-        const option = getOptionByQuestion(key, optInContent);
-        newValues[key] = !!(
-          option.checked === 'true' || option.checked === true
-        );
-        if (Object.prototype.hasOwnProperty.call(defaultValues, key)) {
-          newValues[key] = defaultValues[key];
-        }
-        const fieldName = `NC_CHECK_${key}`;
-        const hiddenFieldName = `NC_HIDDEN_${key}`;
-        onChange(fieldName, newValues[key]);
-        onChange(hiddenFieldName, newValues[key] ? 'OPT_IN' : null);
-      });
-      if (JSON.stringify(values) !== JSON.stringify(newValues)) {
-        setValues(newValues);
-      }
-    }
-  }, [
-    values,
-    checkboxes,
-    enableAllOptIn,
-    defaultValues,
-    onChange,
-    getOptionByQuestion,
-    optInContent,
-  ]);
-  /**
-   * The function is called when the user changes the country. It checks if the country is English,
-   * and if so, it sets the pre-text to the default pre-text
-   */
-  const countryChangeAction = useCallback(() => {
-    const splitValue = locale.split('-', 2);
-    const ncData = getNcContentFromWindow();
-    if (splitValue[1] === 'en') {
-      let preText = defaultPreText.current;
-      if (ncData.OtherPreferences.englishNoticeText !== '') {
-        preText = ncData.OtherPreferences.englishNoticeText;
-      }
-      setPreText(preText);
-    }
-    /**
-     * @description if the user already interacted with the checkboxes,
-     * skip country default selection.
-     */
-    if (!changed && !fetchedPref) {
-      /**
-       * @description
-       * change checkbox checked option based on new country.
-       */
-      setDefaultSelections();
-    }
-  }, [locale, setDefaultSelections, changed, fetchedPref]);
-
-  useEffect(() => {
-    if (optInContent.cclc) {
-      countryChangeAction();
-    }
-  }, [optInContent.cclc, countryChangeAction]);
-
-  const loadECMData = useCallback(() => {
-    let cc = 'zz';
-    let lc = 'en';
-    const ccLcObject = getMappedValue(locale);
-    cc = ccLcObject.cc;
-    lc = ccLcObject.lc;
-
-    resetToWorldWideContent();
-    loadContent(cc, lc, (data) => {
-      // Sent content language
-      setNcData(data);
-    }),
-      (e) => {
-        console.error('Unable to load ncContent', e);
-      };
-  }, [locale]);
-  useEffect(() => {
-    loadECMData();
-  }, [locale, loadECMData]);
-
-  useEffect(() => {
-    let cc = 'zz';
-    let lc = 'en';
-    if (country && countrySettings[country.toLocaleLowerCase()]) {
-      cc = country.toLocaleLowerCase();
-      lc = countrySettings[country.toLocaleLowerCase()].lang;
-    }
-    resetToWorldWideContent();
-    loadContent(cc, lc, (data) => {
-      /**
-       * @description Do not change content language.
-       * Change the checkbox according to the country rule.
-       */
-      setOptInContent({
-        ...data.OptInContent,
-        cclc: `${worldWideContent.cc_name}-${worldWideContent.cc_lang}`,
-      });
-    }),
-      (e) => {
-        console.error('Unable to load ncContent', e);
-      };
-  }, [country]);
-
-  /**
-   * It checks if the email address is Opt-in (Supressed) the preferences, and if it is, it sets
-   * the checkbox to false
-   */
-  const emailChanged = useCallback(
-    (email) => {
-      if (prefChange === false) {
-        checkPreferencesv3(email).then((response) => {
-          if (
-            response === 'S' &&
-            JSON.stringify(values) !==
-              JSON.stringify({
-                ...values,
-                EMAIL: false,
-              })
-          ) {
-            setFetchedPref(email);
-            setValues({
-              ...values,
-              EMAIL: false,
-            });
-            onChange('NC_CHECK_EMAIL', false);
-            onChange('NC_HIDDEN_EMAIL', null);
-          }
-        });
-      }
-    },
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    []
-  );
-  const getPostText = useCallback(() => {
-    const OptInContent = ncData.OptInContent;
-    const OtherPreferences = ncData.OtherPreferences;
-    let postText = OptInContent.postText;
-    let tcHtml = '';
-    if (termsConditionLink) {
-      let originalValue = OtherPreferences.trailPrivacyText;
-      const matchedValue = originalValue.match(/<tc>.*<\/tc>/g);
-      if (matchedValue) {
-        const anrTagHtml = matchedValue[0].replace(/<tc>|<\/tc>/g, '');
-        const link = `<a href='${termsConditionLink}' target='_blank' class='ibm-tooltip' >${anrTagHtml}</a>`;
-        const reg = new RegExp('<tc>' + anrTagHtml + '</tc>', 'g');
-        tcHtml = `<p>I accept the product  <a href='${termsConditionLink}' target='_blank' class='ibm-tooltip' >${anrTagHtml}</a> of this registration form.</p>`;
-        postText = originalValue.replace(reg, link);
-      }
-    }
-    // replace default privacy link
-    try {
-      const { cc, lc } = getMappedValue(locale);
-      postText = postText.replaceAll(
-        'www.ibm.com/privacy/zz/en/',
-        `www.ibm.com/${cc}-${lc}/privacy`
-      );
-    } catch (e) {
-      console.log('unable to replace privacy link locale code.');
-    }
-    const ccLcObject = getMappedValue(locale);
-    const cc = ccLcObject.cc;
-    const lc = ccLcObject.lc;
-    const ccpa = country === 'US' && (state === 'CA' || state === '');
-    if (country === 'CN' && lc === 'en') {
-      return `<p class="nc-gdpr-info">I agree and acknowledge that IBM may share my personal information with IBM affiliates and third parties globally.
-         I understand that I can withdraw my marketing consent at any time by submitting an <a href="https://www.ibm.com/account/reg/${cc}-${lc}/signup?formid=urx-42537" target="_blank">opt-out request</a>,
-         and also may unsubscribe from receiving marketing emails by clicking the unsubscribe link in each email. More information in IBM’s use and processing of personal information can be found in the <a href="https://www.ibm.com/privacy" target="_blank">IBM Privacy Statement</a>.
-         <p class="nc-gdpr-ack">By ticking the above boxes and submitting this form, I have read and understand the above notice and  IBM Privacy Statement.</p>${tcHtml}`;
-    } else if (lc === 'en' && ccpa) {
-      return `<p class="nc-gdpr-info">You can withdraw your marketing consent at any time by submitting an <a href='https://www.ibm.com/account/reg/us-en/signup?formid=urx-42537' target='_blank'>opt-out request</a>. Also you may unsubscribe from receiving marketing emails by clicking the unsubscribe link in each email.</p>
-      <p class="nc-gdpr-ack"> More information on our processing can be found in the <a href='https://www.ibm.com/privacy' target='_blank'>IBM Privacy Statement.</a>
-      California residents, review <a href="https://www.ibm.com/privacy/ccpa" target="_blank">our notice and your privacy choices</a>.
-      <br> By submitting this form, I acknowledge that I have read and understand the IBM Privacy Statement.</p>${tcHtml}`;
-    }
-    return postText;
-  }, [ncData, country, state, termsConditionLink, locale]);
-
-  // Email changed
-  useEffect(() => {
-    if (email) {
-      if (email !== fetchedPref) {
-        // Handle throttle using debounce approach.
-        if (emailRegExp.test(email)) {
-          setTimeout(() => {
-            emailChanged(email);
-          }, 1000);
-        }
-      }
-    } else {
-      if (fetchedPref) {
-        setFetchedPref('');
-      }
-    }
-  }, [email, emailChanged, fetchedPref]);
-
-  useEffect(() => {
-    if (values && !loaded) {
-      setLoaded(true);
-    }
-  }, [values, loaded]);
-  useEffect(() => {
-    if (ncData) {
-      const buildCheckboxes = (OptInContent) => {
-        const fieldElements = {};
-        const fieldCollections = {
-          EMAIL: {
-            id: 'EMAIL',
-            labelText: getOptionByQuestion('EMAIL', OptInContent)
-              .optionTextPost,
-          },
-          PHONE: {
-            id: 'PHONE',
-            labelText: getOptionByQuestion('PHONE', OptInContent)
-              .optionTextPost,
-          },
-          POSTAL: {
-            id: 'POSTAL',
-            labelText: getOptionByQuestion('POSTAL', OptInContent)
-              .optionTextPost,
-          },
-        };
-        // by email
-        if (questionChoices.indexOf(1) > -1) {
-          fieldElements.EMAIL = fieldCollections.EMAIL;
-        }
-        // by Phone
-        if (questionChoices.indexOf(2) > -1) {
-          fieldElements.PHONE = fieldCollections.PHONE;
-        }
-        // by Postal mail
-        if (questionChoices.indexOf(3) > -1) {
-          fieldElements.POSTAL = fieldCollections.POSTAL;
-        }
-        return fieldElements;
-      };
-      try {
-        const OptInContent = ncData.OptInContent;
-        const newCheckboxes = buildCheckboxes(OptInContent);
-        setPreText(OptInContent.preText);
-        setPostText(getPostText());
-        defaultPreText.current = OptInContent.preText;
-        setCheckboxes(newCheckboxes);
-      } catch (e) {
-        console.log('Unable to build checkboxes', e);
-      }
-    }
-  }, [
-    ncData,
-    termsConditionLink,
-    questionChoices,
-    getOptionByQuestion,
-    getPostText,
-  ]);
-
-  // end of useEffect
-  const resetToWorldWideContent = () => {
-    try {
-      window.NoticeChoice = window.NoticeChoice || {};
-      window.NoticeChoice.Content = worldWideContent;
-    } catch (e) {
-      console.log('unable to set worldWideContent', e);
-    }
-  };
-  const getNcContentFromWindow = () => {
-    let Content;
-    try {
-      Content = window.NoticeChoice.Content;
-    } catch (e) {
-      Content = worldWideContent;
-    }
-    return Content;
-  };
-
-  const checkBoxChange = (checked, id) => {
-    const newValues = {
-      ...values,
-    };
-    newValues[id] = !!checked;
-    setValues(newValues);
-    setChanged(true);
-    setPrefChange(true);
-    const fieldName = `NC_CHECK_${id}`;
-    const hiddenFieldName = `NC_HIDDEN_${id}`;
-    onChange(fieldName, checked);
-    onChange(hiddenFieldName, checked ? 'PERMISSION' : 'SUPPRESSION');
-  };
-  let customPostText = postText;
-  const ncHeading = useCallback(() => {
-    return (
-      <p
-        id="ncHeading"
-        className={`${prefix}--nc__pre-text`}
-        dangerouslySetInnerHTML={{ __html: preText }}
-      />
-    );
-  }, [preText]);
-  return featureFlag(
-    DDS_NOTICE_CHOICE,
-    <section
-      data-autoid={`${stablePrefix}--nc`}
-      className={`${prefix}--nc ${classNames}`}>
-      {loaded ? (
-        <div>
-          {ncHeading()}
-          <div className={`${prefix}--checkbox-group`}>
-            {checkboxes &&
-              Object.keys(checkboxes).length > 0 &&
-              Object.keys(checkboxes).map((key) => {
-                const checked = values[key];
-                return (
-                  <span key={key}>
-                    <Checkbox
-                      {...checkboxes[key]}
-                      checked={checked}
-                      onChange={checkBoxChange}
-                      key={key}
-                      className={`${prefix}--nc__checkbox-${key}`}
-                    />
-                  </span>
-                );
-              })}
-          </div>
-          <div
-            className={`${prefix}--nc__post-text`}
-            dangerouslySetInnerHTML={{ __html: customPostText }}
-          />
-        </div>
-      ) : (
-        <>
-          <SkeletonText />
-          <SkeletonText />
-          <SkeletonText />
-          <SkeletonText />
-        </>
-      )}
-      {bpidLegalText && <BPIDLegalText bpidLegalText={bpidLegalText} />}
-    </section>
-  );
-}
-
-NoticeChoice.propTypes = {
-  /**
-   * locale in a format of counrycode-languagecode example: us-en.
-   */
-  locale: PropTypes.string.isRequired,
-  /**
-   * Country value.
-   */
-  country: PropTypes.string.isRequired,
-  /**
-   * questionChoices of the widget. Choose from:
-   *
-   * | Name    | Description                                                                 |
-   * | ------- | --------------------------------------------------------------------------- |
-   * | `[1]`          | Only email field exist on your form.  |
-   * | `[1, 2]`       | form has email and phone number.      |
-   * | `[1, 2, 3]`    | email phone and postal code.          |
-   */
-  questionChoices: PropTypes.array,
-  /**
-   * Email value.
-   * Important! Only change email value prop when the user ends typing the email.
-   */
-  email: PropTypes.string,
-  /**
-   * callback function when a value changes
-   */
-  onChange: PropTypes.func.isRequired,
-  /**
-   * Custom terms & condition link if applicable. Otherwise default value is https://www.ibm.com/legal
-   */
-  termsConditionLink: PropTypes.string,
-  /**
-   * custom class name of the main
-   */
-  classNames: PropTypes.string,
-  /**
-   * default values of the chekboxes:
-   */
-  defaultValues: PropTypes.shape({
-    EMAIL: PropTypes.bool,
-    PHONE: PropTypes.bool,
-    POSTAL: PropTypes.bool,
-  }),
-  /**
-   * enableAllOptIn, only true in some specific cases.
-   * if true, then by default all checkexes will be unchecked inrespective of country law.
-   */
-  enableAllOptIn: PropTypes.bool,
-  /**
-   * bpidLegalText, applicable when the form data may shared with business partner.
-   * bpid should preset in the host page query string.
-   * Sample english copy:
-   * If you register with IBM for an IBM offering promoted by a business partner site,
-   * we may inform them that you registered with us.
-   */
-  bpidLegalText: PropTypes.string,
-  /**
-   * state, Users residing state
-   * Optional. required to apply state specific privacy satement
-   */
-  state: PropTypes.string,
-};
-NoticeChoice.defaultProps = {
-  email: '',
-  locale: 'en-us',
-  onChange: () => {},
-  questionChoices: [1],
-  classNames: '',
-  defaultValues: {},
-  enableAllOptIn: false,
-  country: 'us',
-  state: '',
-};
-export default NoticeChoice;
diff --git a/packages/react/src/components/NoticeChoice/README.stories.mdx b/packages/react/src/components/NoticeChoice/README.stories.mdx
deleted file mode 100644
index 98e0e07bf99..00000000000
--- a/packages/react/src/components/NoticeChoice/README.stories.mdx
+++ /dev/null
@@ -1,102 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import NoticeChoice from './NoticeChoice';
-
-# Notice Choice
-
-> The NoticeChoice component is to be utilized within IBM.com or IBM Authorized partnet websites.
-
-> 💡 Check our
-> [CodeSandbox](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/NoticeChoice)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/NoticeChoice)
-
-## Getting started
-
-The NoticeChoice component is to be utilized within IBM.com or IBM Authorized partner websites and is required on all registration forms.  Please note that this service displays the proper notice and choice content and uses country and user information to determine whether to pre-check the boxes.  It does NOT save the results of the user’s selection.  You must use [MRS API](https://w3.ibm.com/w3publisher/mrs/mrsaas-api) to store the interaction along with the users choices.
-
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/ibmdotcom-styles/scss/components/checkbox/checkbox';
-@import '@carbon/ibmdotcom-styles/scss/components/notice-choice/notice-choice';
-```
-
-> 💡 It's not mandatory to import above css if you have your own css.
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ReactDOM from 'react-dom';
-import { NoticeChoice } from '@carbon/ibmdotcom-react';
-
-import 'yourapplication.scss';
-
-const questionChoices = [1,2,3]
-const termsConditionLink = ``
-const locale = 'us-en'
-const country = 'US'
-const email = ''
-const classNames = ''
-const enableAllOptIn = false
-
-function App() {
- return (
-    <NoticeChoice
-      questionChoices={questionChoices}
-      termsConditionLink={termsConditionLink}
-      locale={locale}
-      country={country}
-      onChange={onChange}
-      email={email}
-      classNames={classNames}
-      enableAllOptIn={enableAllOptIn}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-#### Feature Flags
-
-To utilize the following features, set the following variables to `true` within
-your `.env` file or your application build settings.
-
-```
-DDS_NOTICE_CHOICE=true
-```
-
-```
-  SASS_PATH=node_modules:src
-```
-
-
-## Props
-
-<Props of={NoticeChoice} />
-
-## Stable selectors
-
-| Name         | Description |
-| ------------ | ----------- |
-| `dds--nc`    | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/NoticeChoice/__stories__/NoticeChoice.stories.js b/packages/react/src/components/NoticeChoice/__stories__/NoticeChoice.stories.js
deleted file mode 100644
index ed174a7737a..00000000000
--- a/packages/react/src/components/NoticeChoice/__stories__/NoticeChoice.stories.js
+++ /dev/null
@@ -1,85 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 { boolean, select, text } from '@storybook/addon-knobs';
-import { action } from '@storybook/addon-actions';
-import NoticeChoice from '../NoticeChoice';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const locales = {
-  'United States English': 'us-en',
-  'fr-fr': 'fr-fr',
-  'ca-fr': 'ca-fr',
-  'br-pt': 'br-pt',
-  'it-it': 'it-it',
-  'pl-pl': 'pl-pl',
-  'cn-zh': 'cn-zh',
-  'ru-ru': 'ru-ru',
-  'kr-ko': 'kr-ko',
-  'jp-ja': 'jp-ja',
-  'de-de': 'de-de',
-  'tw-zh': 'tw-zh',
-  'tr-tr': 'tr-tr',
-  'in-en': 'in-en',
-};
-const questionChoices = {
-  Email: [1],
-  'Email + Phone': [1, 2],
-  'Email + Phone + Postal': [1, 2, 3],
-};
-const countryList = {
-  'Unites States': 'US',
-  Germany: 'DE',
-  India: 'IN',
-  'Mainland China': 'CN',
-};
-const stateList = {
-  Unknown: '',
-  Alabama: 'AL',
-  California: 'CA',
-};
-
-const props = () => ({
-  locale: select('Locale', locales, 'in-en'),
-  country: select('Country', countryList, 'IN'),
-  state: select('State', stateList, ''),
-  onChange: action('onChange'),
-  questionChoices: select('Question Choices', questionChoices, [1, 2]),
-  email: text('Email', ''),
-  termsConditionLink: text('termsConditionLink', 'https://www.ibm.com/legal'),
-  classNames: text('classNames', `custom-class-by-app`),
-  enableAllOptIn: boolean('enableAllOptIn', false),
-  bpidLegalText: text('bpidLegalText', ''),
-});
-
-export default {
-  title: 'Components/Notice Choice',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    propsSet: {
-      default: {
-        NoticeChoice: {},
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid" style={{ marginTop: '2rem' }}>
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-2">
-          <NoticeChoice {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/NoticeChoice/__stories__/styles.scss b/packages/react/src/components/NoticeChoice/__stories__/styles.scss
deleted file mode 100644
index ea416b2dfc2..00000000000
--- a/packages/react/src/components/NoticeChoice/__stories__/styles.scss
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 '@carbon/styles/scss/components/skeleton';
diff --git a/packages/react/src/components/NoticeChoice/__tests__/BPIDLegalText.test.js b/packages/react/src/components/NoticeChoice/__tests__/BPIDLegalText.test.js
deleted file mode 100644
index 53cebe02438..00000000000
--- a/packages/react/src/components/NoticeChoice/__tests__/BPIDLegalText.test.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 BPIDLegalText from '../BPIDLegalText';
-import { mount } from 'enzyme';
-import React from 'react';
-
-describe('BPIDLegalText', () => {
-  it('renders as expected', () => {
-    const bpidLegalText = mount(<BPIDLegalText bpidLegalText={`Some text`} />);
-    expect(bpidLegalText.find('p')).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/NoticeChoice/__tests__/NoticeChoice.test.js b/packages/react/src/components/NoticeChoice/__tests__/NoticeChoice.test.js
deleted file mode 100644
index c4cb0abbc5b..00000000000
--- a/packages/react/src/components/NoticeChoice/__tests__/NoticeChoice.test.js
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 { act } from 'react-dom/test-utils';
-import { Checkbox } from 'carbon-components-react';
-import NoticeChoice from '../NoticeChoice';
-import React from 'react';
-import ReactDOM from 'react-dom';
-
-xdescribe('<NoticeChoice />', () => {
-  let container;
-  const questionChoices = [1, 2, 3];
-  const termsConditionLink = ``;
-  const locale = 'us-en';
-  const country = 'US';
-  const email = '';
-  const classNames = '';
-  const enableAllOptIn = false;
-  const onChange = () => {};
-  beforeEach(() => {
-    container = document.createElement('div');
-    document.body.appendChild(container);
-  });
-
-  afterEach(() => {
-    document.body.removeChild(container);
-    container = null;
-  });
-
-  it('renders with everything as expected', async () => {
-    await act(async () => {
-      await ReactDOM.render(
-        <NoticeChoice
-          questionChoices={questionChoices}
-          termsConditionLink={termsConditionLink}
-          locale={locale}
-          country={country}
-          onChange={onChange}
-          email={email}
-          classNames={classNames}
-          enableAllOptIn={enableAllOptIn}
-        />,
-        container
-      );
-    });
-    const noticechoice = container.querySelector('.bx--nc');
-    expect(noticechoice.querySelectorAll('.bx--nc__pre-text')).toHaveLength(1);
-    expect(noticechoice.querySelectorAll('.bx--checkbox-group')).toHaveLength(
-      1
-    );
-    expect(noticechoice.find(Checkbox)).toHaveLength(3);
-    expect(noticechoice.querySelectorAll('.bx--nc__post-text')).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/components/NoticeChoice/cc-lc-map.js b/packages/react/src/components/NoticeChoice/cc-lc-map.js
deleted file mode 100644
index 1365a49875a..00000000000
--- a/packages/react/src/components/NoticeChoice/cc-lc-map.js
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 CcLcMap = {
-  en: { cc: 'us', lc: 'en' },
-  es: { cc: 'es', lc: 'es' },
-  fr: { cc: 'fr', lc: 'fr' },
-  it: { cc: 'it', lc: 'it' },
-  zh: { cc: 'cn', lc: 'zh' },
-  pl: { cc: 'pl', lc: 'pl' },
-  tr: { cc: 'tr', lc: 'tr' },
-  ko: { cc: 'kr', lc: 'ko' },
-  ja: { cc: 'jp', lc: 'ja' },
-  pt: { cc: 'pt', lc: 'pt' },
-  de: { cc: 'de', lc: 'de' },
-  ru: { cc: 'ru', lc: 'ru' },
-};
-export default CcLcMap;
diff --git a/packages/react/src/components/NoticeChoice/country-settings.js b/packages/react/src/components/NoticeChoice/country-settings.js
deleted file mode 100644
index e11a1fc3527..00000000000
--- a/packages/react/src/components/NoticeChoice/country-settings.js
+++ /dev/null
@@ -1,1017 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 countrySettings = {
-  us: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ag: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ai: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  aw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bb: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bs: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gd: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gy: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  jm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  kn: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ky: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ms: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sr: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tt: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  vc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  vg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ca: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  at: {
-    status: 'OPT_IN',
-    lang: 'de',
-  },
-  ch: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  de: {
-    status: 'OPT_IN',
-    lang: 'de',
-  },
-  dk: {
-    status: 'OPT_IN',
-    lang: 'da',
-  },
-  fi: {
-    status: 'OPT_IN',
-    lang: 'fi',
-  },
-  no: {
-    status: 'OPT_IN',
-    lang: 'no',
-  },
-  se: {
-    status: 'OPT_IN',
-    lang: 'sv',
-  },
-  uk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ie: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  be: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  nl: {
-    status: 'OPT_IN',
-    lang: 'nl',
-  },
-  fr: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  it: {
-    status: 'OPT_IN',
-    lang: 'it',
-  },
-  cy: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  es: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  gr: {
-    status: 'OPT_IN',
-    lang: 'el',
-  },
-  il: {
-    status: 'OPT_IN',
-    lang: 'he',
-  },
-  pt: {
-    status: 'OPT_IN',
-    lang: 'pt',
-  },
-  ar: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  bo: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  br: {
-    status: 'OPT_IN',
-    lang: 'pt',
-  },
-  cl: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  co: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  do: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ec: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  mx: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  pe: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  py: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  uy: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  ve: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  au: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  id: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  my: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ph: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  th: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cn: {
-    status: 'OPT_IN',
-    lang: 'zh',
-  },
-  hk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tw: {
-    status: 'OPT_IN',
-    lang: 'zh',
-  },
-  bd: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  in: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  lk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  kr: {
-    status: 'OPT_IN',
-    lang: 'ko',
-  },
-  bg: {
-    status: 'OPT_IN',
-    lang: 'bg',
-  },
-  bh: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cz: {
-    status: 'OPT_IN',
-    lang: 'cs',
-  },
-  dz: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  ee: {
-    status: 'OPT_IN',
-    lang: 'et',
-  },
-  eg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  hr: {
-    status: 'OPT_IN',
-    lang: 'hr',
-  },
-  hu: {
-    status: 'OPT_IN',
-    lang: 'hu',
-  },
-  jo: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  kw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  lb: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  lt: {
-    status: 'OPT_IN',
-    lang: 'lt',
-  },
-  lv: {
-    status: 'OPT_IN',
-    lang: 'lv',
-  },
-  ma: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  om: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pl: {
-    status: 'OPT_IN',
-    lang: 'pl',
-  },
-  qa: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ro: {
-    status: 'OPT_IN',
-    lang: 'ro',
-  },
-  rs: {
-    status: 'OPT_IN',
-    lang: 'sr',
-  },
-  me: {
-    status: 'OPT_IN',
-    lang: 'sr',
-  },
-  ru: {
-    status: 'OPT_IN',
-    lang: 'ru',
-  },
-  sk: {
-    status: 'OPT_IN',
-    lang: 'sk',
-  },
-  tn: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  tr: {
-    status: 'OPT_IN',
-    lang: 'tr',
-  },
-  ua: {
-    status: 'OPT_IN',
-    lang: 'uk',
-  },
-  za: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ad: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  af: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  al: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  am: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  an: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ao: {
-    status: 'OPT_IN',
-    lang: 'pt',
-  },
-  as: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ax: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  az: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ba: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bi: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bj: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bn: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bt: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bv: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  by: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bz: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ci: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ck: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cu: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cv: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  cx: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  dj: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  eh: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  er: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  fj: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  fk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  fm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  fo: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ge: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gi: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gl: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gn: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gp: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gq: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gs: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gt: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gu: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  hm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  hn: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ht: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  im: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  io: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  iq: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ir: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  is: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  je: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ke: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  kg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  kh: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ki: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  km: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  kp: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  la: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  li: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  lr: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ls: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  lu: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ly: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  md: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mh: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ml: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mn: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mo: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mp: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mq: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mr: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mt: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mv: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  nc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  nf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ng: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ni: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  np: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  nr: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  nu: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  nz: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pa: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pn: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pr: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ps: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  pw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  re: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  rw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sb: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sd: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sh: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sj: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  si: {
-    status: 'OPT_IN',
-    lang: 'sl',
-  },
-  sm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  so: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sp: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  st: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sv: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sy: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sz: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tg: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tj: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tk: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tl: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  to: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tv: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  va: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  vi: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  vu: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  wf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ws: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ye: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  yt: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  zm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  zw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  vn: {
-    status: 'OPT_IN',
-    lang: 'vi',
-  },
-  cr: {
-    status: 'OPT_IN',
-    lang: 'es',
-  },
-  kz: {
-    status: 'OPT_IN',
-    lang: 'ru',
-  },
-  uz: {
-    status: 'OPT_IN',
-    lang: 'ru',
-  },
-  bw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gh: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sl: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  tz: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  na: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ug: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  et: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bf: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  cm: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  td: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  cg: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  cd: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  ga: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  mg: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  mu: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  ne: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  sn: {
-    status: 'OPT_IN',
-    lang: 'fr',
-  },
-  mz: {
-    status: 'OPT_IN',
-    lang: 'pt',
-  },
-  jp: {
-    status: 'OPT_IN',
-    lang: 'ja',
-  },
-  cw: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  dm: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  lc: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  gb: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  aq: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bl: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  bq: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  mf: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  ss: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sx: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  um: {
-    status: 'OPT_IN',
-    lang: 'en',
-  },
-  sa: {
-    status: 'OPT_IN',
-    lang: 'ar',
-  },
-  ae: {
-    status: 'OPT_IN',
-    lang: 'ar',
-  },
-};
-export default countrySettings;
diff --git a/packages/react/src/components/NoticeChoice/index.js b/packages/react/src/components/NoticeChoice/index.js
deleted file mode 100644
index 75b9c664abe..00000000000
--- a/packages/react/src/components/NoticeChoice/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 { default as NoticeChoice } from './NoticeChoice';
diff --git a/packages/react/src/components/NoticeChoice/services.js b/packages/react/src/components/NoticeChoice/services.js
deleted file mode 100644
index e4053658c1f..00000000000
--- a/packages/react/src/components/NoticeChoice/services.js
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 axios from 'axios';
-
-export function checkPreferencesv3(emailAddress) {
-  const endpoint = `https://www.ibm.com/account/apis/v2.0/pws/V3.0/lookup`;
-  return new Promise((resolve, reject) => {
-    if (emailAddress && emailAddress.indexOf('*****') > -1) {
-      resolve('N');
-    } else {
-      axios
-        .get(endpoint, {
-          params: { emailAddress },
-        })
-        .then((response) => {
-          resolve(response.data ? response.data.email : 'N');
-        })
-        .catch((error) => {
-          console.error(error); // eslint-disable-line no-console
-          reject('N');
-        });
-    }
-  });
-}
-export function loadContent(cc, lc, onSuccess = () => {}, onError = () => {}) {
-  const script = document.createElement('script');
-  script.async = false;
-  script.charset = 'utf-8';
-  script.src = `https://www.ibm.com/common/translations/notice/${cc}/${lc}/ncContent_v18.js`; // URL for the third-party library being loaded.
-  document.body.appendChild(script);
-  script.onload = () => {
-    try {
-      if (onSuccess) onSuccess(window.NoticeChoice.Content);
-    } catch (e) {
-      if (onError) onError(e);
-    }
-  };
-  script.onerror = () => {
-    if (onError) onError();
-  };
-}
diff --git a/packages/react/src/components/NoticeChoice/utils.js b/packages/react/src/components/NoticeChoice/utils.js
deleted file mode 100644
index 1d6c2750d77..00000000000
--- a/packages/react/src/components/NoticeChoice/utils.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 CcLcMap from './cc-lc-map';
-export const getMappedValue = (locale) => {
-  let CcLcValue = {
-    cc: 'us',
-    lc: 'en',
-  };
-  if (Object.prototype.isPrototypeOf.call(CcLcMap, locale)) {
-    CcLcValue = CcLcMap[locale];
-  } else if (locale.indexOf('-') > -1) {
-    const splitValue = locale.split('-', 2);
-    CcLcValue = {
-      cc: splitValue[0],
-      lc: splitValue[1],
-    };
-  }
-  return CcLcValue;
-};
diff --git a/packages/react/src/components/NoticeChoice/world-wide-content.js b/packages/react/src/components/NoticeChoice/world-wide-content.js
deleted file mode 100644
index dfe7ca3382f..00000000000
--- a/packages/react/src/components/NoticeChoice/world-wide-content.js
+++ /dev/null
@@ -1,87 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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 worldWideContent = {
-  cc_name: 'zz',
-  cc_lang: 'en',
-  cc_default_status: 'OPT_IN',
-  OptInContent: {
-    preText:
-      'IBM may use my contact data to keep me informed of products, services and offerings:',
-    oneQuestionApp: [
-      {
-        id: '0',
-        optionTextPre: '',
-        checked: 'false',
-        optionTextPost:
-          'IBM may use my contact data to keep me informed by email of products, services and offerings',
-      },
-    ],
-    twoQuestionApp: [
-      {
-        id: '0',
-        optionTextPre: '',
-        checked: 'false',
-        optionTextPost: 'by email',
-      },
-      {
-        id: '4',
-        optionTextPre: '',
-        checked: 'true',
-        optionTextPost: 'by telephone or postal mail.',
-      },
-    ],
-    fourQuestionApp: [
-      {
-        id: '0',
-        optionTextPre: '',
-        checked: 'false',
-        optionTextPost: 'by email.',
-      },
-      {
-        id: '1',
-        optionTextPre: '',
-        checked: 'false',
-        optionTextPost: 'by telephone.',
-      },
-      {
-        id: '2',
-        optionTextPre: '',
-        checked: 'true',
-        optionTextPost: 'by postal mail.',
-      },
-      {
-        id: '3',
-        optionTextPre: '',
-        checked: 'hidden',
-        optionTextPost: '',
-      },
-    ],
-    postText:
-      '<p class="nc-gdpr-info">You can withdraw your marketing consent at any time by submitting an <a href="https://www.ibm.com/account/reg/signup?formid=urx-33276" target="_blank">opt-out request</a>. Also you may unsubscribe from receiving marketing emails by clicking the unsubscribe link in each email.</p><p class="nc-gdpr-ack">More information on our processing can be found in the <a href="https://www.ibm.com/privacy/zz/en/" target="_blank">IBM Privacy Statement.</a> By submitting this form, I acknowledge that I have read and understand the IBM Privacy Statement.</p>',
-  },
-
-  GranularPreference: {
-    GranularEmailText:
-      'Please keep me informed by email of products, services and offerings from IBM companies worldwide.  Check the boxes below to receive more information about:',
-    GranularText:
-      'Please keep me informed of products, services and offerings from IBM companies worldwide.  Check the boxes below to receive more information about:',
-    EnglishGranularText: '',
-  },
-  OtherPreferences: {
-    allIBMNotice:
-      'I would also like to receive information about other IBM products.',
-    englishNoticeText: '',
-    allIBMNoticeChecked: 'false',
-    noMediaErrorTextt:
-      'You have selected a product category, please select your preferred media choice.',
-    mediaChoice: 'Please tell us how you would like to be contacted.',
-    trailPrivacyText:
-      '<p class="nc-gdpr-info">You can withdraw your marketing consent at any time by submitting an <a href="https://www.ibm.com/account/reg/signup?formid=urx-33276" target="_blank">opt-out request</a>. Also you may unsubscribe from receiving marketing emails by clicking the unsubscribe link in each email.</p><p class="nc-gdpr-ack">More information on our processing can be found in the <a href="https://www.ibm.com/privacy/zz/en/" target="_blank">IBM Privacy Statement</a>. By submitting this form, I acknowledge that I have read and understand the IBM Privacy Statement.</p><p>I accept the product <tc>Terms and Conditions</tc> of this registration form. </p>',
-  },
-};
-export default worldWideContent;
diff --git a/packages/react/src/components/PictogramItem/PictogramItem.js b/packages/react/src/components/PictogramItem/PictogramItem.js
deleted file mode 100644
index 2c68d0b2b61..00000000000
--- a/packages/react/src/components/PictogramItem/PictogramItem.js
+++ /dev/null
@@ -1,96 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 classNames from 'classnames';
-import ContentItem from '../ContentItem/ContentItem';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Content with pictogram component.
- */
-const PictogramItem = ({
-  heading,
-  copy,
-  pictogram: { src: Pictogram, ...pictogramProps },
-  cta,
-  className,
-}) => (
-  <div
-    className={classNames(className, `${prefix}--pictogram-item`)}
-    data-autoid={`${stablePrefix}--pictogram-item`}>
-    <div className={`${prefix}--pictogram-item__row`}>
-      <div className={`${prefix}--pictogram-item__wrapper`}>
-        <Pictogram
-          data-autoid={`${stablePrefix}--pictogram-item__pictogram`}
-          className={`${prefix}--pictogram-item__pictogram`}
-          {...pictogramProps}
-        />
-      </div>
-      <div
-        data-autoid={`${stablePrefix}--pictogram-item__content`}
-        className={`${prefix}--pictogram-item__content`}>
-        <ContentItem
-          heading={heading}
-          copy={copy}
-          cta={cta && { style: 'text', ...cta }}
-        />
-      </div>
-    </div>
-  </div>
-);
-
-PictogramItem.propTypes = {
-  /**
-   * Content with pictogram component title property.
-   */
-  heading: PropTypes.string.isRequired,
-
-  /**
-   * Content with pictogram component copy property.
-   */
-  copy: PropTypes.string.isRequired,
-
-  /**
-   * Object with CTA data.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    type: PropTypes.oneOfType([
-      PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video']),
-      PropTypes.arrayOf(
-        PropTypes.oneOf(['jump', 'local', 'external', 'download', 'video'])
-      ),
-    ]),
-    copy: PropTypes.string,
-    href: PropTypes.string,
-    customClassName: PropTypes.string,
-  }),
-
-  /**
-   * Pictogram data object.
-   * The structure is:
-   *
-   * | Name  | Required | Data Type | Default Value | Description                                                  |
-   * | ----- | -------- | --------- | ------------- | ------------------------------------------------------------ |
-   * | `src` | YES      | Component | null          | Pictogram component imported from `@carbon/pictograms-react` |
-   */
-  pictogram: PropTypes.shape({
-    src: PropTypes.object.isRequired,
-  }).isRequired,
-
-  /**
-   * Pictogram Item `className`` prop.
-   */
-  className: PropTypes.string,
-};
-
-export default PictogramItem;
diff --git a/packages/react/src/components/PictogramItem/README.stories.mdx b/packages/react/src/components/PictogramItem/README.stories.mdx
deleted file mode 100644
index 19de8b0b4c1..00000000000
--- a/packages/react/src/components/PictogramItem/README.stories.mdx
+++ /dev/null
@@ -1,105 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import PictogramItem from './PictogramItem';
-
-# Pictogram Item
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/pictogram-item';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the PictogramItem
-> styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import { Desktop } from '@carbon/pictograms-react';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { PictogramItem } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const heading = 'Lorem ipsum dolor sit amet.';
-  const copy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-  const cta = {
-    type: 'local',
-    href: 'https://www.example.com',
-    copy: 'Lorem ipsum dolor',
-  };
-
-  const pictogram = {
-    src: Desktop,
-    ariaLabel: 'Desktop pictogram',
-  };
-
-  return (
-    <PictogramItem
-      heading={heading}
-      copy={copy}
-      cta={cta}
-      pictogram={pictogram}
-    />
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the pictogram item styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import PictogramItem from '@carbon/ibmdotcom-react/es/components/PictogramItem/PictogramItem';
-````
-
-## Props
-
-<Props of={PictogramItem} />
-
-## Accessibility
-
-In order to make the component acessible to screen readers, you can provide aria
-attributes inside the pictogram object.
-
-```javascript
-const pictogram = {
-  src: Desktop,
-  'aria-label': 'Description for the screen reader',
-};
-```
-
-## Stable selectors
-
-| Name                             | Description                                        |
-| -------------------------------- | -------------------------------------------------- |
-| `dds--pictogram-item`            | Pictogram item wrapper element.                    |
-| `dds--pictogram-item__content`   | Pictogram item wrapper for Content Item component. |
-| `dds--pictogram-item__pictogram` | Pictogram item SVG.                                |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js b/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js
deleted file mode 100644
index 00394a9a5d3..00000000000
--- a/packages/react/src/components/PictogramItem/__stories__/PictogramItem.stories.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { Desktop, Pattern, Touch } from '@carbon/pictograms-react';
-import { text, select } from '@storybook/addon-knobs';
-import PictogramItem from '../PictogramItem';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-/**
- * Returns the react component based on the value in the pictogram variables
- *
- * @param {string} sel string that defines the returning pictogram
- * @returns {*} JSX pictogram component
- */
-const selectPictogram = (sel) => {
-  switch (sel) {
-    case 'Desktop':
-      return Desktop;
-    case 'Pattern':
-      return Pattern;
-    case 'Touch':
-      return Touch;
-  }
-};
-
-const pictograms = {
-  Desktop: 'Desktop',
-  Touch: 'Touch',
-  Pattern: 'Pattern',
-};
-
-const props = () => ({
-  heading: text('Heading (required)', 'Lorem ipsum dolor sit'),
-  copy: text(
-    'Copy (required)',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam'
-  ),
-  pictogram: {
-    src: selectPictogram(
-      select('Pictogram (required)', pictograms, pictograms.Desktop)
-    ),
-    'aria-label': text('Aria-label:', 'Pictogram description'),
-  },
-
-  cta: {
-    type: 'local',
-    href: 'https://www.example.com',
-    copy: 'Lorem ipsum dolor',
-  },
-});
-
-export default {
-  title: 'Components/Pictogram item',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Pictogram item: Default',
-    },
-    propsSet: {
-      default: {
-        PictogramItem: {
-          pictogram: {
-            src: selectPictogram(pictograms.Desktop),
-          },
-        },
-      },
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <PictogramItem {...props()} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/PictogramItem/index.js b/packages/react/src/components/PictogramItem/index.js
deleted file mode 100644
index 542af9d9f24..00000000000
--- a/packages/react/src/components/PictogramItem/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as PictogramItem } from './PictogramItem';
diff --git a/packages/react/src/components/Quote/Quote.js b/packages/react/src/components/Quote/Quote.js
deleted file mode 100644
index c65f5ab1a62..00000000000
--- a/packages/react/src/components/Quote/Quote.js
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useState, useEffect } from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import classnames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import decodeString from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/decodeString/decodeString';
-import { HorizontalRule } from '../HorizontalRule';
-import Launch20 from '@carbon/icons-react/es/launch/20';
-import { LinkWithIcon } from '../LinkWithIcon';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Quote Pattern
- *
- * @param {object} props props Object
- * @param {string} props.markType type of the quote marks
- * @param {string} props.copy quote copy
- * @param {object} props.source source object
- * @param {string} props.source.heading name heading for quote source
- * @param {string} props.source.copy title copy for quote source
- * @param {object} props.cta cta props object
- * @param {string} props.cta.copy cta copy
- * @param {string} props.cta.type type 'local' or 'external'
- * @param {string} props.cta.href cta href
- * @param {boolean} props.inverse toggles inverse theme
- * @returns {*} Quote Pattern
- */
-const Quote = ({ markType = 'doubleCurved', copy, source, cta, inverse }) => {
-  const [decodedCopy, setDecodedCopy] = useState('');
-
-  useEffect(() => {
-    setDecodedCopy(decodeString(copy));
-  }, [copy]);
-
-  /**
-   * Render the Quote copy with the selected quote marks
-   *
-   * @returns {*} Blockquote with quote marks
-   */
-  const renderQuote = () => {
-    switch (markType) {
-      case 'doubleCurved':
-        return (
-          <>
-            <span className={`${prefix}--quote__mark`}>“</span>
-            <blockquote className={`${prefix}--quote__copy`}>
-              {decodedCopy}”
-            </blockquote>
-          </>
-        );
-      case 'singleCurved':
-        return (
-          <>
-            <span className={`${prefix}--quote__mark`}>‘</span>
-            <blockquote className={`${prefix}--quote__copy`}>
-              {decodedCopy}’
-            </blockquote>
-          </>
-        );
-      case 'doubleAngle':
-        return (
-          <>
-            <span className={`${prefix}--quote__mark`}>«</span>
-            <blockquote className={`${prefix}--quote__copy`}>
-              {decodedCopy}»
-            </blockquote>
-          </>
-        );
-      case 'singleAngle':
-        return (
-          <>
-            <span className={`${prefix}--quote__mark`}>‹</span>
-            <blockquote className={`${prefix}--quote__copy`}>
-              {decodedCopy}›
-            </blockquote>
-          </>
-        );
-      case 'lowHighReversedDoubleCurved':
-        return (
-          <>
-            <span className={`${prefix}--quote__mark`}>„</span>
-            <blockquote className={`${prefix}--quote__copy`}>
-              {decodedCopy}“
-            </blockquote>
-          </>
-        );
-      case 'cornerBracket':
-        return (
-          <>
-            <span
-              className={`${prefix}--quote__mark ${prefix}--quote__mark-corner-bracket`}>
-              「
-            </span>
-            <blockquote className={`${prefix}--quote__copy`}>
-              {decodedCopy}」
-            </blockquote>
-          </>
-        );
-    }
-  };
-  return (
-    <div
-      data-autoid={`${stablePrefix}--quote`}
-      className={classnames(`${prefix}--quote`, {
-        [`${prefix}--quote__inverse`]: inverse,
-      })}>
-      <div className={`${prefix}--quote__container`}>
-        <div
-          className={`${prefix}--quote__wrapper`}
-          data-autoid={`${stablePrefix}--quote__copy`}>
-          {renderQuote()}
-        </div>
-        {source && source.heading && source.copy ? (
-          <div
-            className={`${prefix}--quote__source`}
-            data-autoid={`${stablePrefix}--quote__source`}>
-            <p className={`${prefix}--quote__source-heading`}>
-              {source.heading}
-            </p>
-            <p className={`${prefix}--quote__source-body`}>{source.copy}</p>
-            {source.copy2 && (
-              <p className={`${prefix}--quote__source-optional-copy`}>
-                {source.copy2}
-              </p>
-            )}
-          </div>
-        ) : (
-          false
-        )}
-      </div>
-      {cta ? (
-        <div className={`${prefix}--quote__footer`}>
-          <HorizontalRule />
-          <LinkWithIcon href={cta.href}>
-            <span>{cta.copy}</span>
-            {cta.type === 'local' ? <ArrowRight20 /> : false}
-            {cta.type === 'external' ? <Launch20 /> : false}
-          </LinkWithIcon>
-        </div>
-      ) : (
-        false
-      )}
-    </div>
-  );
-};
-
-Quote.propTypes = {
-  /**
-   * Type of the quote marks. Choose from:
-   *
-   * | Name                          | Description |
-   * | ----------------------------- | ----------- |
-   * | `singleCurved`                | ‘ ’         |
-   * | `doubleCurved`                | “ ”         |
-   * | `singleAngle`                 | ‹ ›         |
-   * | `doubleAngle`                 | « »         |
-   * | `lowHighReversedDoubleCurved` | „ “         |
-   * | `cornerBracket`               |「 」         |
-   */
-  markType: PropTypes.oneOf([
-    'doubleCurved',
-    'singleCurved',
-    'doubleAngle',
-    'singleAngle',
-    'lowHighReversedDoubleCurved',
-    'cornerBracket',
-  ]),
-
-  /**
-   * Main Quote.
-   */
-  copy: PropTypes.string.isRequired,
-
-  /**
-   * Source object. The structure is:
-   *
-   * | Name      | Required | Data Type | Default Value | Description                  |
-   * | --------- | -------- | --------- | ------------- | ---------------------------- |
-   * | `heading` | YES      | String    | null          | Source heading               |
-   * | `copy`    | YES      | String    | null          | Source body text             |
-   * | `copy2`   | NO       | String    | null          | Optional second line of copy |
-   */
-  source: PropTypes.shape({
-    heading: PropTypes.string.isRequired,
-    copy: PropTypes.string.isRequired,
-    copy2: PropTypes.string,
-  }),
-
-  /**
-   * Object with a sub-scheme of CTA data.
-   * See the [`<CTA>`'s README](http://www.ibm.com/standards/carbon/react/?path=/docs/components-cta--default#props) for full usage details.
-   */
-  cta: PropTypes.shape({
-    copy: PropTypes.string,
-    type: PropTypes.oneOf(['local', 'external']),
-    href: PropTypes.string,
-  }),
-
-  /**
-   * `true` to use the invese colors.
-   */
-  inverse: PropTypes.bool,
-};
-
-export default Quote;
diff --git a/packages/react/src/components/Quote/README.stories.mdx b/packages/react/src/components/Quote/README.stories.mdx
deleted file mode 100644
index ee9452f69da..00000000000
--- a/packages/react/src/components/Quote/README.stories.mdx
+++ /dev/null
@@ -1,85 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import Quote from './Quote';
-
-# Quote
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/quote';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Quote styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import { Desktop } from '@carbon/pictograms-react';
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { Quote } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  const copy = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.';
-
-  const cta = {
-    type: 'local',
-    href: 'https://www.example.com',
-    copy: 'Lorem ipsum dolor',
-  };
-
-  const source = {
-    heading: 'lorem ipsum',
-    copy: 'dolor sit amet',
-  };
-
-  return <Quote copy={copy} cta={cta} source={source} />;
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the quote styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import Quote from '@carbon/ibmdotcom-react/es/components/Quote/Quote';
-````
-
-## Props
-
-<Props of={Quote} />
-
-## Stable selectors
-
-| Name                 | Description                         |
-| -------------------- | ----------------------------------- |
-| `dds--quote`         | Quote wrapper element.              |
-| `dds--quote__copy`   | Main Quote body text                |
-| `dds--quote__source` | Quote source title and body wrapper |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/Quote/__stories__/Quote.stories.js b/packages/react/src/components/Quote/__stories__/Quote.stories.js
deleted file mode 100644
index 9ae2fbba211..00000000000
--- a/packages/react/src/components/Quote/__stories__/Quote.stories.js
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { text, select, object } from '@storybook/addon-knobs';
-import Quote from '../Quote';
-import React from 'react';
-import readme from '../README.stories.mdx';
-
-const types = {
-  singleCurved: 'singleCurved',
-  doubleCurved: 'doubleCurved',
-  doubleAngle: 'doubleAngle',
-  singleAngle: 'singleAngle',
-  lowHighReversedDoubleCurved: 'lowHighReversedDoubleCurved',
-  cornerBracket: 'cornerBracket',
-};
-
-const props = () => ({
-  copy: text(
-    'Quote (copy): ',
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.'
-  ),
-
-  markType: select('Quote Mark (markType):', types, types.doubleCurved),
-
-  source: {
-    heading: text(
-      'Quote Source Heading (source.heading): ',
-      'Lorem ipsum dolor sit amet'
-    ),
-    copy: text(
-      'Quote Source Copy (source.copy): ',
-      'consectetur adipiscing elit'
-    ),
-    copy2: text('Quote Source optional Copy (source.copy2)', 'IBM Cloud'),
-  },
-
-  cta: object('CTA Object:', {
-    copy: 'Link with Icon',
-    type: 'local',
-    href: 'https://example.com',
-  }),
-});
-export default {
-  title: 'Components/Quote',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Quote: Default',
-    },
-  },
-};
-
-export const Default = () => {
-  const inverse =
-    ['g90', 'g100'].indexOf(
-      document.documentElement.getAttribute('storybook-carbon-theme')
-    ) >= 0;
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--offset-lg-4 bx--col-lg-12">
-          <Quote {...props()} inverse={inverse} />
-        </div>
-      </div>
-    </div>
-  );
-};
diff --git a/packages/react/src/components/Quote/__tests__/Quote.test.js b/packages/react/src/components/Quote/__tests__/Quote.test.js
deleted file mode 100644
index 4f27b08ee55..00000000000
--- a/packages/react/src/components/Quote/__tests__/Quote.test.js
+++ /dev/null
@@ -1,97 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 Quote from '../Quote';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-describe('Quotes', () => {
-  it('renders as expected', () => {
-    const source = {
-      heading: 'lorem ipsum',
-      copy: 'dolor sit amet',
-    };
-
-    const cta = {
-      copy: 'Link with Icon',
-      type: 'local',
-      href: 'https://example.com',
-    };
-
-    const quote = shallow(
-      <Quote
-        copy="Lorem ipsum dolor"
-        source={source}
-        cta={cta}
-        inverse={true}
-        markType="singleCurved"
-      />
-    );
-
-    expect(quote.find('.bx--quote')).toHaveLength(1);
-    expect(quote.find('.bx--quote__inverse')).toHaveLength(1);
-    expect(quote.find('.bx--quote__mark')).toHaveLength(1);
-    expect(quote.find('.bx--quote__copy')).toHaveLength(1);
-    expect(quote.find('.bx--quote__source')).toHaveLength(1);
-    expect(quote.find('.bx--quote__footer')).toHaveLength(1);
-
-    const doubleCurved = shallow(
-      <Quote
-        copy="Lorem ipsum dolor"
-        source={source}
-        cta={cta}
-        inverse={true}
-        markType="doubleCurved"
-      />
-    );
-    expect(doubleCurved.find('.bx--quote__mark')).toHaveLength(1);
-
-    const doubleAngle = shallow(
-      <Quote
-        copy="Lorem ipsum dolor"
-        source={source}
-        cta={cta}
-        inverse={true}
-        markType="doubleAngle"
-      />
-    );
-    expect(doubleAngle.find('.bx--quote__mark')).toHaveLength(1);
-
-    const singleAngle = shallow(
-      <Quote
-        copy="Lorem ipsum dolor"
-        source={source}
-        cta={cta}
-        inverse={true}
-        markType="singleAngle"
-      />
-    );
-    expect(singleAngle.find('.bx--quote__mark')).toHaveLength(1);
-
-    const lowHighReversedDoubleCurved = shallow(
-      <Quote
-        copy="Lorem ipsum dolor"
-        source={source}
-        cta={cta}
-        inverse={true}
-        markType="lowHighReversedDoubleCurved"
-      />
-    );
-    expect(lowHighReversedDoubleCurved.find('.bx--quote__mark')).toHaveLength(
-      1
-    );
-
-    const noSource = shallow(
-      <Quote copy="Lorem ipsum dolor" cta={cta} inverse={false} />
-    );
-    expect(noSource.find('.bx--quote__source')).toHaveLength(0);
-    expect(noSource.find('.bx--quote__inverse')).toHaveLength(0);
-
-    const noCTA = shallow(<Quote copy="Lorem ipsum dolor" inverse={false} />);
-    expect(noCTA.find('.bx--quote__footer')).toHaveLength(0);
-  });
-});
diff --git a/packages/react/src/components/Quote/index.js b/packages/react/src/components/Quote/index.js
deleted file mode 100644
index c831c13ce73..00000000000
--- a/packages/react/src/components/Quote/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as Quote } from './Quote';
diff --git a/packages/react/src/components/ScrollAnimations/README.stories.mdx b/packages/react/src/components/ScrollAnimations/README.stories.mdx
deleted file mode 100644
index 47fbc94276f..00000000000
--- a/packages/react/src/components/ScrollAnimations/README.stories.mdx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import ScrollAnimations from './ScrollAnimations'
-
-# Scroll Animations
-
-> Function component that handles fade transition effects for selected elements.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ScrollAnimations)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/ScrollAnimations)
-
-## Getting started
-
-### Quick start
-##### (Note: Fade effect won't be noticeable unless the page is long enough to scroll through)
-
-In order to use the `<ScrollAnimations>` component, it needs to be wrapped around the elements that need to be targeted,
-passing in a querystring containing the exact identifiers to control which elements it should target.
-
-Here's a simple example to get started:
-
-```css
-// yourapplication.scss
-@import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the Image styles
-> from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-#### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <ScrollAnimations animation={'fade'} selectorTargets={'.targeted-class'}>
-      <div className={'targeted-class'}>
-        <p>This content will fade in upon scrolled into view.</p>
-      </div>
-
-      <div>
-        <p>This content is not included in the selector, it will not fade.</p>
-      </div>
-    </ScrollAnimations>
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-
-```
-
-### CSS
-
-An optional custom delay can be set within targeted class in the application's CSS code as such:
-
-```css
-// yourapplication.scss
-.targeted-class {
-  --dds--fade-in-out-delay: 250ms;
-}
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the image styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-### Animation Effects
-
-There are currently nine effects that can be applied in the component.
-To use a specific animation effect, pass one of the following to the `animation` attribute (e.g. `animation='slide-left'`):
-
-* `fade`
-* `slide-up`
-* `slide-up-right`
-* `slide-right`
-* `slide-down-right`
-* `slide-down`
-* `slide-down-left`
-* `slide-left`
-* `slide-up-left`
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import ScrollAnimations from '@carbon/ibmdotcom-react/es/components/ScrollAnimations/ScrollAnimations';
-import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
-```
-
-## Props
-
-<Props of={ScrollAnimations} />
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/ScrollAnimations/ScrollAnimations.js b/packages/react/src/components/ScrollAnimations/ScrollAnimations.js
deleted file mode 100644
index 7cbd84121f4..00000000000
--- a/packages/react/src/components/ScrollAnimations/ScrollAnimations.js
+++ /dev/null
@@ -1,274 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useCallback, useEffect, useRef } from 'react';
-import { breakpoints } from '@carbon/layout';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-
-/**
- * Amount of columns used for calculation.
- *
- * @private
- */
-const colSpan = 3;
-
-/**
- * Utility handles fade transition for selected elements.
- *
- * @example
- * import { ScrollAnimations } from '@carbon/ibmdotcom-react';
- * import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
- *
- * As an example, the function can be called to target all instances of the
- * elements in a list:
- *
- * const list = '.bx--content-block, .bx--content-group';
- *
- * For default values of 400ms and 'one and done' play:
- * <ScrollAnimations selectorTargets={selectorTargets}>
- *   // some content
- * </ScrollAnimations>
- *
- * With 'continuous play' option:
- * <ScrollAnimations animation={'fade'} selectorTargets={selectorTargets} keepAnimations={true}>
- *   // some content
- * </ScrollAnimations>
- *
- * For custom delay time, set within targeted class in the application's CSS code as such:
- *
- * .bx--content-block {
- *   --#{$dds-prefix}--fade-in-out-delay: 250ms;
- * }
- */
-const ScrollAnimations = ({
-  animation,
-  children,
-  selectorTargets,
-  keepAnimations,
-}) => {
-  /**
-   * Outer div component ref for using with query selector.
-   *
-   * @private
-   */
-  const componentRef = useRef(null);
-
-  /**
-   * Intersection Observer that watches outer viewport.
-   *
-   * @private
-   */
-  const rootObserver = useRef(null);
-
-  /**
-   * Intersection observer that watches the inner viewport.
-   *
-   * @private
-   */
-  const innerObserver = useRef(null);
-
-  /**
-   * Resize observer to trigger rootMargin recalculations
-   *
-   * @private
-   */
-  const resizeObserver = useRef(null);
-
-  /**
-   * Scroll animation class to be applied when element is within viewport.
-   *
-   * @private
-   */
-  const effectClass = useRef(null);
-
-  /**
-   * Scroll animation to be applied when elements are out of view.
-   *
-   * @private
-   */
-  const exitEffectClass = useRef(null);
-
-  /**
-   * Create observers upon render and update.
-   */
-  useEffect(() => {
-    setAnimationClasses();
-    rootObserver.current = new IntersectionObserver(handleExit);
-    resizeObserver.current = new ResizeObserver(handleResize);
-
-    if (selectorTargets) {
-      componentRef.current
-        ?.querySelectorAll(selectorTargets)
-        .forEach((item) => {
-          rootObserver?.current.observe(item);
-        });
-    }
-    resizeObserver.current.observe(document.documentElement);
-
-    return () => {
-      rootObserver.current.disconnect();
-      innerObserver.current.disconnect();
-      resizeObserver.current.disconnect();
-      rootObserver.current = null;
-      innerObserver.current = null;
-      resizeObserver.current = null;
-    };
-  }, [
-    componentRef,
-    selectorTargets,
-    setAnimationClasses,
-    handleEntrance,
-    handleResize,
-  ]);
-
-  /**
-   * Handler to add recalculated rootMargin to a new instance of
-   * inner observer after clearing old one first.
-   *
-   * The calculation is done to retrieve the best fitting top and bottom
-   * margin for the fade animation to trigger/remove from elements in a
-   * user's screen.
-   *
-   * The resulting value is the optimal point where a user's attention will be
-   * grabbed by the animation without restricting their view and perception of
-   * the adopting website. The displayed elements will keep the user's attention
-   * for a longer time as they scroll down the website.
-   *
-   * @private
-   */
-  const handleResize = useCallback(() => {
-    if (innerObserver.current) {
-      innerObserver.current.disconnect();
-      innerObserver.current = null;
-    }
-
-    innerObserver.current = new IntersectionObserver(handleEntrance, {
-      rootMargin: `-${(
-        (document.documentElement.clientHeight * colSpan) /
-        breakpoints.max.columns
-      ).toString()}px 0px`,
-    });
-
-    if (selectorTargets) {
-      componentRef.current
-        ?.querySelectorAll(selectorTargets)
-        .forEach((item) => {
-          innerObserver?.current.observe(item);
-        });
-    }
-  }, [componentRef, innerObserver, selectorTargets, handleEntrance]);
-
-  /**
-   * Handler to add fade animation to element
-   *
-   * @param {*} records observed elements
-   * @private
-   */
-  const handleEntrance = useCallback(
-    (records) => {
-      records.forEach(({ intersectionRatio, target }) => {
-        if (intersectionRatio > 0) {
-          target.classList.remove(exitEffectClass.current);
-          target.classList.add(effectClass.current);
-          if (!keepAnimations) {
-            rootObserver.current.unobserve(target);
-            innerObserver.current.unobserve(target);
-          }
-        }
-      });
-    },
-    [keepAnimations, rootObserver, innerObserver]
-  );
-
-  /**
-   * Handler to remove element from view
-   *
-   * @param {*} records observed elements
-   * @private
-   */
-  function handleExit(records) {
-    records.forEach(({ intersectionRatio, target }) => {
-      if (intersectionRatio == 0) {
-        target.classList.remove(effectClass.current);
-        target.classList.add(exitEffectClass.current);
-      }
-    });
-  }
-
-  const setAnimationClasses = useCallback(() => {
-    switch (animation) {
-      case 'slide-up':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-up`;
-        break;
-      case 'slide-up-right':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-up-right`;
-        break;
-      case 'slide-right':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-right`;
-        break;
-      case 'slide-down-right':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-down-right`;
-        break;
-      case 'slide-down':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-down`;
-        break;
-      case 'slide-down-left':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-down-left`;
-        break;
-      case 'slide-left':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-left`;
-        break;
-      case 'slide-up-left':
-        effectClass.current = `${prefix}--slide-in`;
-        exitEffectClass.current = `${prefix}--slide-up-left`;
-        break;
-      default:
-        effectClass.current = `${prefix}--fade-in`;
-        exitEffectClass.current = `${prefix}--fade-out`;
-        break;
-    }
-  }, [animation, effectClass, exitEffectClass]);
-
-  return <div ref={componentRef}>{children}</div>;
-};
-
-ScrollAnimations.propTypes = {
-  /**
-   * String that determines what effect to display
-   */
-  animation: PropTypes.string,
-
-  /**
-   * Component(s) to render within the component
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]).isRequired,
-
-  /**
-   * List of elements to be targeted
-   */
-  selectorTargets: PropTypes.string,
-
-  /**
-   * Boolean to define if animation is continuous
-   */
-  keepAnimations: PropTypes.bool,
-};
-
-export default ScrollAnimations;
diff --git a/packages/react/src/components/ScrollAnimations/__stories__/ScrollAnimations.stories.js b/packages/react/src/components/ScrollAnimations/__stories__/ScrollAnimations.stories.js
deleted file mode 100644
index b2f587d3e39..00000000000
--- a/packages/react/src/components/ScrollAnimations/__stories__/ScrollAnimations.stories.js
+++ /dev/null
@@ -1,269 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
-import './scroll-animations.stories.scss';
-
-import Content from '../../DotcomShell/__stories__/data/content';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import ScrollAnimations from '../ScrollAnimations';
-
-const selectorTargets = `
-  .bx--content-block__heading,
-  .bx--content-block__copy,
-  .bx--leadspace-block__media,
-  .bx--link-list,
-  .bx--leadspace-block__cta,
-  .bx--feature-card-block-large,
-  .bx--content-group,
-  .bx--image,
-  .bx--content-block__cta,
-  .bx--callout-with-media,
-  .bx--content-item-horizontal__item,
-  .bx--logo-grid__col,
-  .bx--card-group__cards__col,
-  .bx--callout-quote,
-  .bx--cta-section,
-  .bx--cta-section__cta,
-  .bx--content-item
-`;
-
-export default {
-  title: 'Components/Scroll animations',
-  parameters: {
-    ...readme.parameters,
-    'carbon-theme': { disabled: true },
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations selectorTargets={selectorTargets}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-Default.story = {
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const WithContinuousAnimations = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'fade'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-WithContinuousAnimations.story = {
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideUp = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-up'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideUp.story = {
-  name: 'Slide up',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideUpRight = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-up-right'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideUpRight.story = {
-  name: 'Slide up right',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideRight = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-right'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideRight.story = {
-  name: 'Slide right',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideDownRight = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-down-right'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideDownRight.story = {
-  name: 'Slide down right',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideDown = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-down'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideDown.story = {
-  name: 'Slide down',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideDownLeft = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-down-left'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideDownLeft.story = {
-  name: 'Slide down left',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideLeft = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-left'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideLeft.story = {
-  name: 'Slide left',
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
-
-export const SlideUpLeft = () => {
-  return (
-    <main id="main-content">
-      <div style={{ paddingTop: '6rem' }}>
-        <ScrollAnimations
-          animation={'slide-up-left'}
-          selectorTargets={selectorTargets}
-          keepAnimations={true}>
-          <Content />
-        </ScrollAnimations>
-      </div>
-    </main>
-  );
-};
-
-SlideUpLeft.story = {
-  // to avoid jest errors with Intersection Observer
-  parameters: {
-    storyshots: { disable: true },
-  },
-};
diff --git a/packages/react/src/components/ScrollAnimations/__stories__/scroll-animations.stories.scss b/packages/react/src/components/ScrollAnimations/__stories__/scroll-animations.stories.scss
deleted file mode 100644
index 7576237f1d2..00000000000
--- a/packages/react/src/components/ScrollAnimations/__stories__/scroll-animations.stories.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-.bx--logo-grid__col,
-.bx--card-group__cards__col,
-.bx--content-item-wrapper > .bx--content-item {
-  &:nth-of-type(3n) {
-    --dds--fade-in-out-delay: 0;
-  }
-  &:nth-of-type(3n + 1) {
-    --dds--fade-in-out-delay: 250ms;
-  }
-  &:nth-of-type(3n + 2) {
-    --dds--fade-in-out-delay: 500ms;
-  }
-  &:nth-of-type(3n + 3) {
-    --dds--fade-in-out-delay: 750ms;
-  }
-}
diff --git a/packages/react/src/components/ScrollAnimations/index.js b/packages/react/src/components/ScrollAnimations/index.js
deleted file mode 100644
index 00270a0f7c1..00000000000
--- a/packages/react/src/components/ScrollAnimations/index.js
+++ /dev/null
@@ -1,7 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-export { default as ScrollAnimations } from './ScrollAnimations';
diff --git a/packages/react/src/components/SearchWithTypeahead/README.stories.mdx b/packages/react/src/components/SearchWithTypeahead/README.stories.mdx
deleted file mode 100644
index 2d2c40136eb..00000000000
--- a/packages/react/src/components/SearchWithTypeahead/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Search with typeahead
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-search-with-typeahead).
diff --git a/packages/react/src/components/SearchWithTypeahead/__stories__/SearchWithTypeahead.stories.js b/packages/react/src/components/SearchWithTypeahead/__stories__/SearchWithTypeahead.stories.js
deleted file mode 100644
index 3dc276441af..00000000000
--- a/packages/react/src/components/SearchWithTypeahead/__stories__/SearchWithTypeahead.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Search With Typeahead',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-search-with-typeahead--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/TableOfContents/README.stories.mdx b/packages/react/src/components/TableOfContents/README.stories.mdx
deleted file mode 100644
index 88e352ca11f..00000000000
--- a/packages/react/src/components/TableOfContents/README.stories.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import TableOfContents from './TableOfContents';
-
-# Table of Contents
-
-> Table of contents display pre-defined sections of the page and provide a
-> convenient way to navigate to those sections. It also sticks to the top of the
-> page when scrolling for easy access.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/TableOfContents)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/TableOfContents)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/index';
-```
-
-> 💡 Only import fonts once per usage. Don't forget to import the
-> TableOfContents styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { TableOfContents } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-const theme = ''; //Empty for light, g100 for dark
-
-const menuItems = [
-  {
-    title: 'Cras molestie condimentum',
-    id: '8',
-  },
-  {
-    title: 'Praesent fermentum sodales',
-    id: '7',
-  },
-];
-
-const headingContent = <div>Lorem ipsum dolor sit amet</div>;
-
-function App() {
-  return (
-    <TableOfContents
-      headingContent={headingContent}
-      theme={theme}
-      menuItems={menuItems}>
-      <a name="8"></a>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Cras molestie condimentum
-      </h3>
-      <p>
-        Elementum dui gravida non. Mauris et nisl semper, elementum quam non,
-        lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur.
-      </p>
-
-      <a name="7"></a>
-      <h3 style={{ paddingBottom: '1rem', paddingTop: '2rem' }}>
-        Praesent fermentum sodales
-      </h3>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie
-        condimentum consectetur. Nulla tristique lacinia elit.
-      </p>
-    </TableOfContents>
-  );
-}
-
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the tableofcontents styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation and have less reliance on tree-shaking determinations from build scripts:
-
-````js
-import TableOfContents from '@carbon/ibmdotcom-react/es/components/TableOfContents/TableOfContents';
-````
-
-## Props
-
-<Props of={TableOfContents} />
-
-## Stable selectors
-
-| Name                                                        | Description |
-| ----------------------------------------------------------- | ----------- |
-| `dds--tableofcontents`                                      | component   |
-| `dds--tableofcontents__sidebar`                             | interactive |
-| `dds--tableofcontents__content`                             | interactive |
-| `dds--tableofcontents__content-wrapper`                     | component   |
-| `dds--tableofcontents__desktop`                             | component   |
-| `dds--tableofcontents__desktop__item-${item.id}`            | interactive |
-| `dds--tableofcontents__mobile`                              | component   |
-| `dds--tableofcontents__mobile__select__option-${option.id}` | interactive |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/TableOfContents/TOCDesktop.js b/packages/react/src/components/TableOfContents/TOCDesktop.js
deleted file mode 100644
index ffb2858fc6e..00000000000
--- a/packages/react/src/components/TableOfContents/TOCDesktop.js
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-import smoothScroll from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/smoothScroll/smoothScroll';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * DesktopMenu Component.
- */
-const TOCDesktop = ({ menuItems, selectedId }) => {
-  /**
-   * Render menu items
-   *
-   * @param {Array} items menu items array
-   * @param {string} activeId selected item id
-   * @returns {*} JSX Object
-   */
-  const renderMenuItems = (items, activeId) => {
-    return items.map((item, index) => {
-      if (item?.id !== 'menuLabel') {
-        const isActive = activeId === item.id;
-        return (
-          <li
-            key={index}
-            data-autoid={`${stablePrefix}--tableofcontents__desktop__item-${item.id}`}
-            className={classNames(`${prefix}--tableofcontents__desktop__item`, {
-              [`${prefix}--tableofcontents__desktop__item--active`]: isActive,
-            })}>
-            <a
-              {...(isActive ? { 'aria-current': 'location' } : {})}
-              onClick={(e) => handleOnClick(e, item.id)}
-              href={`#${item.id}`}>
-              {item.title}
-            </a>
-          </li>
-        );
-      }
-    });
-  };
-
-  /**
-   * Handle OnClick
-   *
-   * @param {*} e event object
-   * @param {*} id menu item id
-   */
-  const handleOnClick = (e, id) => {
-    e.preventDefault();
-    const selector = `a[name="${id}"]`;
-    const masthead = e.target.ownerDocument.querySelector(
-      `.${prefix}--masthead`
-    );
-    smoothScroll(null, selector, masthead?.offsetHeight);
-    triggerFocus(selector);
-  };
-
-  /**
-   * Trigger the focus on screen readers, so they can read the target paragraph
-   *
-   * @param {*} elem Selector to find the item
-   */
-  function triggerFocus(elem) {
-    const element = document.querySelector(elem);
-
-    const handleFocusOut = (event) => {
-      const focusoutTarget = event.target;
-      focusoutTarget.removeAttribute('tabindex');
-    };
-
-    element.setAttribute('tabindex', '0');
-    element.focus({ preventScroll: true });
-    element.addEventListener('focusout', handleFocusOut, {
-      once: true,
-    });
-  }
-
-  return (
-    <div
-      className={`${prefix}--tableofcontents__desktop`}
-      data-autoid={`${stablePrefix}--tableofcontents__desktop`}>
-      <ul>{renderMenuItems(menuItems, selectedId)}</ul>
-    </div>
-  );
-};
-
-TOCDesktop.propTypes = {
-  /**
-   * Array of menu item objects to render within the side nav.
-   * Each items has the following structure:
-   *
-   * | Properties Name | Data Type | Description     |
-   * | --------------- | --------- | --------------- |
-   * | title           | String    | Menu title text |
-   * | id              | String    | Menu id         |
-   */
-  menuItems: PropTypes.array,
-
-  /**
-   * Id of a menu item.
-   */
-  selectedId: PropTypes.string,
-};
-
-export default TOCDesktop;
diff --git a/packages/react/src/components/TableOfContents/TOCMobile.js b/packages/react/src/components/TableOfContents/TOCMobile.js
deleted file mode 100644
index 75a75868ac2..00000000000
--- a/packages/react/src/components/TableOfContents/TOCMobile.js
+++ /dev/null
@@ -1,160 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useState, useEffect } from 'react';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import smoothScroll from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/smoothScroll/smoothScroll';
-import TableOfContents20 from '@carbon/icons-react/es/table-of-contents/20';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Mobile Component.
- */
-const TOCMobile = ({ menuItems, selectedId, menuLabel, updateState }) => {
-  const [selectedOption, setSelectedOption] = useState('menuLabel');
-
-  useEffect(() => {
-    setSelectedOption(selectedId);
-  }, [selectedId]);
-
-  /**
-   * Handle onChange event of select
-   *
-   * @param {*} e event object
-   */
-  const handleChange = (e) => {
-    const id = e.target.value;
-    const filteredItems = menuItems.filter((menu) => {
-      return menu.id === id;
-    });
-    const title = filteredItems[0].title;
-    updateState(id, title);
-    const selector = `a[name="${id}"]`;
-    smoothScroll(null, selector, 50);
-    triggerFocus(selector);
-  };
-
-  /**
-   * Trigger the focus on screen readers, so they can read the target paragraph
-   *
-   * @param {*} elem Selector to find the item
-   */
-  function triggerFocus(elem) {
-    const element = document.querySelector(elem);
-
-    if (element) {
-      const handleFocusOut = (event) => {
-        const focusoutTarget = event.target;
-        focusoutTarget.removeAttribute('tabindex');
-      };
-
-      element.setAttribute('tabindex', '0');
-      element.focus({ preventScroll: true });
-      element.addEventListener('focusout', handleFocusOut, {
-        once: true,
-      });
-    }
-  }
-
-  /**
-   * Handle OnBlur event
-   *
-   * @returns {null} Returns null for blur events
-   */
-  const handleOnBlur = () => {
-    return null;
-  };
-
-  return (
-    <div
-      className={`${prefix}--tableofcontents__mobile`}
-      data-autoid={`${stablePrefix}--tableofcontents__mobile`}>
-      <div className={`${prefix}--tableofcontents__mobile__select__wrapper`}>
-        <select
-          aria-label={menuLabel}
-          className={`${prefix}--tableofcontents__mobile__select`}
-          onBlur={handleOnBlur}
-          value={selectedOption}
-          onChange={(e) => handleChange(e)}>
-          {renderOptions(menuItems, menuLabel)}
-        </select>
-        <TableOfContents20
-          className={`${prefix}--tableofcontents__mobile__select__icon`}
-          aria-label="menu icon">
-          <title>menu icon</title>
-        </TableOfContents20>
-      </div>
-    </div>
-  );
-};
-
-/**
- * Render options for select
- *
- * @param {Array} options menu item arrray
- * @param {Array} label menu label
- * @returns {*} JSX Object
- */
-const renderOptions = (options, label) => {
-  const labelObj = {
-    title: `${label} ...`,
-    id: 'menuLabel',
-  };
-  options.findIndex((x) => x.id === labelObj.id) === -1
-    ? options.unshift(labelObj)
-    : null;
-  return options.map((option, index) => {
-    if (option) {
-      return (
-        <option
-          className={`${prefix}--tableofcontents__mobile__select__option`}
-          data-autoid={`${stablePrefix}--tableofcontents__mobile__select__option-${option.id}`}
-          key={index}
-          value={option.id}
-          defaultValue={index === 0}
-          disabled={index === 0}
-          hidden={index === 0}>
-          {option.title}
-        </option>
-      );
-    }
-  });
-};
-
-TOCMobile.propTypes = {
-  /**
-   * Array of menu item objects to render within the side nav.
-   * Each items has the following structure:
-   *
-   * | Properties Name | Data Type | Description     |
-   * | --------------- | --------- | --------------- |
-   * | title           | String    | Menu title text |
-   * | id              | String    | Menu id         |
-   */
-  menuItems: PropTypes.array,
-
-  /**
-   * Id of a menu item.
-   */
-  selectedId: PropTypes.string,
-
-  /**
-   * Menu label for mobile menu.
-   */
-  menuLabel: PropTypes.string,
-
-  /**
-   * Function to update parent state.
-   */
-  updateState: PropTypes.func,
-};
-
-export default TOCMobile;
diff --git a/packages/react/src/components/TableOfContents/TableOfContents.js b/packages/react/src/components/TableOfContents/TableOfContents.js
deleted file mode 100644
index 5c190baa42d..00000000000
--- a/packages/react/src/components/TableOfContents/TableOfContents.js
+++ /dev/null
@@ -1,304 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useEffect, useState } from 'react';
-import classNames from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { HorizontalRule } from '../HorizontalRule';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import TOCDesktop from './TOCDesktop';
-import TOCMobile from './TOCMobile';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * loops into the array of elements and returns the values
- *
- * @private
- * @returns {Array} returns element name and data title
- */
-const _findMenuItems = () => {
-  const eles = document.querySelectorAll('a[name]');
-  const menuItems = [];
-  eles.forEach((element) => {
-    if (element.getAttribute('name') !== 'menuLabel') {
-      menuItems.push({
-        id: element.getAttribute('name'),
-        title: element.getAttribute('data-title') || '',
-      });
-    }
-  });
-  return menuItems;
-};
-
-/**
- * Table of Contents pattern.
- */
-const TableOfContents = ({
-  menuItems,
-  children,
-  menuLabel,
-  theme,
-  stickyOffset,
-  menuRule,
-  headingContent,
-}) => {
-  const [useMenuItems, setUseMenuItems] = useState([]);
-  const [selectedId, setSelectedId] = useState('');
-  const [selectedTitle, setSelectedTitle] = useState('');
-
-  useEffect(() => {
-    setUseMenuItems(menuItems?.length ? [...menuItems] : _findMenuItems());
-  }, [children, menuItems]);
-
-  useEffect(() => {
-    let id = useMenuItems[0] ? useMenuItems[0].id : '';
-    let title = useMenuItems[0] ? useMenuItems[0].title : '';
-    if (id === 'menuLabel' && useMenuItems[1]) {
-      id = useMenuItems[1].id;
-      title = useMenuItems[1].title;
-    }
-
-    setSelectedId(id);
-    setSelectedTitle(title);
-  }, [useMenuItems]);
-
-  useEffect(() => {
-    /**
-     * Function to be added to eventListener and cleaned later on
-     */
-    const handleRAF = () => {
-      window.requestAnimationFrame(setSelectedItem);
-    };
-
-    window.addEventListener('scroll', handleRAF);
-    return () => window.removeEventListener('scroll', handleRAF);
-  });
-
-  /**
-   * Set selected id & title
-   *
-   */
-  const setSelectedItem = () => {
-    const elems = getElemsInView();
-    if (elems) {
-      const id = elems || useMenuItems[0].id;
-      const filteredItems = useMenuItems.filter((menu) => {
-        if (id !== 'undefined') {
-          return menu.id === id;
-        }
-      });
-      const title = filteredItems[0]?.title;
-      if (title !== undefined) {
-        setSelectedId(id);
-        setSelectedTitle(title);
-      }
-    }
-  };
-
-  /**
-   * Check whether provided anchor tags are in visible viewport
-   *
-   * @returns {string} name attribute
-   */
-  const getElemsInView = () => {
-    const items = [...document.querySelectorAll('a[name]')]
-      .map((elem, index, arr) => ({
-        elem,
-        height: arr[index + 1]
-          ? arr[index + 1].getBoundingClientRect().y -
-            elem.getBoundingClientRect().y
-          : null,
-        position: elem.getBoundingClientRect().y,
-      }))
-      .filter((elem, index, arr) =>
-        elem.height === null
-          ? arr[index - 1].position < arr[index - 1].height
-          : elem.position - 50 - stickyOffset > -elem.height
-      );
-
-    // Sets last section as active at the end of page in case there is not enough height for it to dynamically activate
-    const bottomReached =
-      document.documentElement.scrollTop +
-        document.documentElement.clientHeight ===
-      document.documentElement.scrollHeight;
-    return !bottomReached
-      ? items[0].elem.getAttribute('name')
-      : items[items.length - 1].elem.getAttribute('name');
-  };
-
-  /**
-   * Sets the selected menu item
-   *
-   * @param {*} id selected id of menu item
-   * @param {*} title selected title of menu item
-   */
-  const updateState = (id, title) => {
-    setSelectedId(id);
-    setSelectedTitle(title);
-  };
-
-  /**
-   * Validate if the Menu Items has Id and Title filled
-   *
-   * @param {Array} menuItems array of Items
-   * @returns {Array} filtered array of items
-   */
-  const validateMenuItems = (menuItems) =>
-    menuItems.filter(
-      (item) => item?.title?.trim().length && item?.id?.trim().length
-    );
-
-  /**
-   * Props for TOCDesktop and TOCMobile
-   *
-   * @type {{
-   * updateState: Function,
-   * selectedId: string,
-   * menuItems: Array,
-   * selectedTitle: string,
-   * menuLabel: string
-   * children: object
-   * }}
-   */
-  const props = {
-    menuItems: validateMenuItems(useMenuItems),
-    selectedId,
-    selectedTitle,
-    menuLabel,
-    updateState,
-    children: children.length > 1 ? children[0] : null,
-  };
-
-  /**
-   * Render TableOfContents pattern
-   *
-   * @returns {*} JSX Object
-   */
-  return (
-    <section
-      data-autoid={`${stablePrefix}--tableofcontents`}
-      className={classNames(`${prefix}--tableofcontents`, {
-        [`${prefix}--tableofcontents--${theme}`]: theme,
-      })}>
-      <div className={`${stablePrefix}-ce--table-of-contents__container`}>
-        <div className={`${prefix}--tableofcontents__sidebar`}>
-          {headingContent && (
-            <div className={`${prefix}--tableofcontents__desktop__children`}>
-              {headingContent}
-
-              {menuRule && <HorizontalRule />}
-            </div>
-          )}
-          <div className={`${prefix}--tableofcontents__mobile-top`}></div>
-          <div
-            style={{
-              position: 'sticky',
-              top: stickyOffset ? `${stickyOffset}px` : 0,
-            }}>
-            <TOCDesktop
-              menuRule={menuRule}
-              headingContent={headingContent}
-              {...props}
-            />
-            <TOCMobile {...props} />
-          </div>
-        </div>
-        <div className={`${prefix}--tableofcontents__content`}>
-          <div className={`${prefix}--tableofcontents__content-wrapper`}>
-            {headingContent !== undefined ? (
-              <>
-                <div className={`${prefix}--tableofcontents__children__mobile`}>
-                  {headingContent}
-                </div>
-                {children}
-              </>
-            ) : (
-              children
-            )}
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-};
-
-TableOfContents.propTypes = {
-  /**
-   * Array of menu item objects to render within the side nav.
-   * Each items has the following structure:
-   *
-   * | Properties Name | Data Type | Description     |
-   * | --------------- | --------- | --------------- |
-   * | title           | String    | Menu title text |
-   * | id              | String    | Menu id         |
-   *
-   * If `menuItems` is not passed in as a prop, the menu items are dynamically
-   * generated based on anchor links that exist on the page. The anchor links should
-   * follow the following format:
-   *
-   * ```html
-   * <a name="name-of-section" data-title="Lorem Ipsum"></a>
-   * ```
-   */
-  menuItems: PropTypes.arrayOf(
-    PropTypes.shape({
-      title: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
-    })
-  ),
-
-  /**
-   * Content to display next to the side nav.
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-
-  /**
-   * Placeholder value for menu label.
-   */
-  menuLabel: PropTypes.string,
-
-  /**
-   * Defines the color theme for the pattern. Choose from:
-   *
-   * | Name            | Description                              |
-   * | --------------- | ---------------------------------------- |
-   * | white / default | White theme applied to pattern           |
-   * | g10             | Gray 10 (g10) theme applied to pattern   |
-   * | g100            | Gray 100 (g100) theme applied to pattern |
-   */
-  theme: PropTypes.oneOf(['white', 'g10', 'g100']),
-
-  /**
-   * Defines the offset for the sticky column.
-   */
-  stickyOffset: PropTypes.number,
-
-  /**
-   * Defines if the menu ruler will be rendered.
-   */
-  menuRule: PropTypes.bool,
-
-  /**
-   * Content to be displayed above the navigation menu.
-   */
-  headingContent: PropTypes.node,
-};
-
-TableOfContents.defaultProps = {
-  menuItems: null,
-  menuLabel: 'Jump to',
-  theme: 'white',
-  stickyOffset: null,
-};
-
-export default TableOfContents;
diff --git a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
deleted file mode 100644
index a12e2c38bc3..00000000000
--- a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.js
+++ /dev/null
@@ -1,109 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, select, text } from '@storybook/addon-knobs';
-import DataContent, { headings, LOREM } from './data/DataContent';
-import LinkList from '../../LinkList/LinkList';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import styles from './TableOfContents.stories.scss';
-import TableOfContents from '../TableOfContents';
-
-const props = {
-  default: () => ({
-    withHeadingContent: boolean('With heading content', false),
-    numberOfItems: Array.from({
-      length: select('Number of items', [5, 6, 7, 8], 5),
-    }).map((_, i) => ({
-      heading: text(`Section ${i + 1} heading`, headings[i % headings.length]),
-      copy: text(`Section ${i + 1} copy`, `${LOREM}\n`.repeat(3).trim()),
-    })),
-  }),
-};
-
-export const Default = () => {
-  const { withHeadingContent, numberOfItems: menuItems } = props.default();
-  const headingItems = [
-    {
-      type: 'local',
-      copy: 'DevOps',
-      cta: {
-        href: 'https://github.com/carbon-design-system/carbon-web-components',
-      },
-    },
-    {
-      type: 'local',
-      copy: 'Automation',
-      cta: {
-        href: 'https://github.com/carbon-design-system/carbon-web-components',
-      },
-    },
-    {
-      type: 'local',
-      copy: 'Development',
-      cta: {
-        href: 'https://github.com/carbon-design-system/carbon-web-components',
-      },
-    },
-  ];
-  const headingContent = (
-    <LinkList style="vertical" iconPlacement="left" items={headingItems} />
-  );
-  return (
-    <>
-      <TableOfContents
-        headingContent={withHeadingContent && headingContent}
-        menuRule={!!headingContent}>
-        <DataContent items={menuItems} />
-      </TableOfContents>
-    </>
-  );
-};
-
-export default {
-  title: 'Components/Table of contents',
-  decorators: [
-    (story) => (
-      <>
-        <style>{styles.cssText}</style>
-        {story()}
-      </>
-    ),
-  ],
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      name: 'Components|Table of contents: Default',
-    },
-  },
-};
-
-export const Horizontal = () => (
-  <p>
-    This component is maintained in{' '}
-    <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-    <a
-      className="bx--link"
-      target="_blank"
-      href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-table-of-contents--horizontal">
-      React wrapper
-    </a>
-    .
-  </p>
-);
-
-Horizontal.story = {
-  name: 'Horizontal',
-  parameters: {
-    ...readme.parameters,
-    knobs: null,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
diff --git a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss b/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
deleted file mode 100644
index 8621670b9bf..00000000000
--- a/packages/react/src/components/TableOfContents/__stories__/TableOfContents.stories.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-//
-// 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
-@import 'carbon-components/scss/globals/scss/typography';
-
-.dds-react-demo--table-of-contents {
-  padding-top: 2rem;
-  padding-bottom: 3rem;
-
-  a[name] {
-    display: block;
-    color: $text-01;
-  }
-
-  h3 {
-    padding-top: rem(32px);
-    padding-bottom: rem(32px);
-  }
-}
diff --git a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js b/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
deleted file mode 100644
index c4c6d5682c4..00000000000
--- a/packages/react/src/components/TableOfContents/__stories__/data/DataContent.js
+++ /dev/null
@@ -1,49 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable jsx-a11y/anchor-is-valid */
-import { PropTypes } from 'prop-types';
-import React from 'react';
-
-export const headings = [
-  'Forward thinkers',
-  'Innovation and transformation',
-  'Client success stories',
-  'Iconic moments in IBM history',
-  'Trust and responsibility',
-  'Connect with IBM',
-];
-
-// eslint-disable-next-line max-len
-export const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque nisl.`;
-
-const generateCopySections = (n) => [...Array(n)].map(() => <p>{LOREM}</p>);
-
-const DataContent = ({ items }) => (
-  <div className="dds-react-demo--table-of-contents">
-    {items?.map(({ heading, copy }, i) => (
-      <>
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
-        <a data-title={heading} name={i}>
-          <h3>{heading}</h3>
-        </a>
-        {copy
-          ? copy.split('\n').map((section) => <p>{section}</p>)
-          : generateCopySections(3)}
-      </>
-    ))}
-  </div>
-);
-
-DataContent.propTypes = {
-  /**
-   * Array of table of contents items
-   */
-  items: PropTypes.array,
-};
-
-export default DataContent;
diff --git a/packages/react/src/components/TableOfContents/__tests__/TableOfContents.test.js b/packages/react/src/components/TableOfContents/__tests__/TableOfContents.test.js
deleted file mode 100644
index e50c937f1a9..00000000000
--- a/packages/react/src/components/TableOfContents/__tests__/TableOfContents.test.js
+++ /dev/null
@@ -1,91 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 * as smoothScroll from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/smoothScroll/smoothScroll';
-import DataContent from '../__stories__/data/DataContent';
-import { mount } from 'enzyme';
-import React from 'react';
-import TableOfContents from '../TableOfContents';
-import TOCDesktop from '../TOCDesktop';
-import TOCMobile from '../TOCMobile';
-
-const menuItems = [
-  {
-    title: 'Cras molestie condimentum',
-    id: '8',
-  },
-  {
-    title: 'Praesent fermentum sodales',
-    id: '7',
-  },
-  {
-    title: 'Nulla tristique lacinia',
-    id: '2',
-  },
-  {
-    title: 'Morbi id nibh metus',
-    id: '3',
-  },
-  {
-    title: 'Integer non scelerisque',
-    id: '14',
-  },
-];
-
-describe('TableOfContents', () => {
-  it('renders as expected', () => {
-    const toc = mount(
-      <TableOfContents
-        menuItems={menuItems}
-        menuRule={true}
-        menuLabel="Menu label">
-        <DataContent />
-      </TableOfContents>
-    );
-    expect(toc.find('.bx--tableofcontents__desktop__item')).toHaveLength(
-      menuItems.length
-    );
-    expect(
-      toc.find('.bx--tableofcontents__desktop__item--active')
-    ).toHaveLength(1);
-    menuItems.forEach((item) => expect(toc.find(`[name='${item.id}']`)));
-  });
-});
-
-describe('TOCMobile', () => {
-  it('Handles onChange properly', () => {
-    smoothScroll.default = jest.fn();
-    const spyUpdate = jest.fn();
-    const toc = mount(
-      <TOCMobile
-        menuItems={menuItems}
-        selectedId={menuItems[0].id}
-        menuLabel="Menu label"
-        updateState={spyUpdate}
-      />,
-      { attachTo: window.domNode }
-    );
-    toc
-      .find('select')
-      .simulate('change', { target: { value: menuItems[1].id } });
-    toc.find('select').props().onBlur();
-    expect(spyUpdate).toHaveBeenCalledWith(menuItems[1].id, menuItems[1].title);
-  });
-});
-
-describe('TOCDesktop', () => {
-  it('Handles onClick properly', () => {
-    document.body.innerHTML = `<div><a name="${menuItems[1].id}" /></div>`;
-    smoothScroll.default = jest.fn();
-    const toc = mount(
-      <TOCDesktop menuItems={menuItems} selectedId={menuItems[0].id} />
-    );
-    toc
-      .find(`a[href="#${menuItems[1].id}"]`)
-      .simulate('click', { preventDefault: jest.fn() });
-  });
-});
diff --git a/packages/react/src/components/TableOfContents/index.js b/packages/react/src/components/TableOfContents/index.js
deleted file mode 100644
index 963815cdc84..00000000000
--- a/packages/react/src/components/TableOfContents/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 { default as TableOfContents } from './TableOfContents';
diff --git a/packages/react/src/components/TabsExtended/README.stories.mdx b/packages/react/src/components/TabsExtended/README.stories.mdx
deleted file mode 100644
index ddfa6687f3a..00000000000
--- a/packages/react/src/components/TabsExtended/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tabs Extended
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended--default).
diff --git a/packages/react/src/components/TabsExtended/__stories__/TabsExtended.stories.js b/packages/react/src/components/TabsExtended/__stories__/TabsExtended.stories.js
deleted file mode 100644
index cdfae38c5d4..00000000000
--- a/packages/react/src/components/TabsExtended/__stories__/TabsExtended.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Tabs extended',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/TabsExtendedMedia/README.stories.mdx b/packages/react/src/components/TabsExtendedMedia/README.stories.mdx
deleted file mode 100644
index c50b7327397..00000000000
--- a/packages/react/src/components/TabsExtendedMedia/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tabs Extended Media
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended-media--default).
diff --git a/packages/react/src/components/TabsExtendedMedia/__stories__/TabsExtendedMedia.stories.js b/packages/react/src/components/TabsExtendedMedia/__stories__/TabsExtendedMedia.stories.js
deleted file mode 100644
index 7f175501fcf..00000000000
--- a/packages/react/src/components/TabsExtendedMedia/__stories__/TabsExtendedMedia.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Tabs extended media',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tabs-extended-media--default">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/TagGroup/README.stories.mdx b/packages/react/src/components/TagGroup/README.stories.mdx
deleted file mode 100644
index 39bc432aec0..00000000000
--- a/packages/react/src/components/TagGroup/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tag group
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tag-group).
diff --git a/packages/react/src/components/TagGroup/__stories__/TagGroup.stories.js b/packages/react/src/components/TagGroup/__stories__/TagGroup.stories.js
deleted file mode 100644
index ff44dccf21a..00000000000
--- a/packages/react/src/components/TagGroup/__stories__/TagGroup.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Tag group',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tag-group">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/TagLink/README.stories.mdx b/packages/react/src/components/TagLink/README.stories.mdx
deleted file mode 100644
index f5c3514ce4a..00000000000
--- a/packages/react/src/components/TagLink/README.stories.mdx
+++ /dev/null
@@ -1,3 +0,0 @@
-# Tag link
-
-This component is maintained in `@carbon/ibmdotcom-web-components` library with a [React wrapper](https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tag-link).
diff --git a/packages/react/src/components/TagLink/__stories__/TagLink.stories.js b/packages/react/src/components/TagLink/__stories__/TagLink.stories.js
deleted file mode 100644
index 7c6ffa8800b..00000000000
--- a/packages/react/src/components/TagLink/__stories__/TagLink.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 readme from '../README.stories.mdx';
-
-export default {
-  title: 'Components/Tag link',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-    proxy: true,
-  },
-};
-
-export const Default = () => {
-  return (
-    <p>
-      This component is maintained in{' '}
-      <code>@carbon/ibmdotcom-web-components</code> library with a{' '}
-      <a
-        className="bx--link"
-        target="_blank"
-        href="https://www.ibm.com/standards/carbon/web-components/react/?path=/story/components-tag-link">
-        React wrapper
-      </a>
-      .
-    </p>
-  );
-};
diff --git a/packages/react/src/components/VideoPlayer/README.stories.mdx b/packages/react/src/components/VideoPlayer/README.stories.mdx
deleted file mode 100644
index 9841e994cc4..00000000000
--- a/packages/react/src/components/VideoPlayer/README.stories.mdx
+++ /dev/null
@@ -1,123 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../docs/contributing-license.md';
-import VideoPlayer from './VideoPlayer';
-
-# Video Player
-
-> Video players play embedded videos using the Kaltura video platform. It can be
-> used in inline patterns as well as modals. It is always the full width of its
-> containing element and maintains an aspect ratio of 16:9.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/VideoPlayer)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/VideoPlayer)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@import '@carbon/ibmdotcom-styles/scss/components/video-player/video-player';
-@import '@carbon/ibmdotcom-styles/scss/components/image/image';
-```
-
-> 💡 Only import fonts once per usage
-
-##### JS
-
-```javascript
-import React from 'react';
-import ReactDOM from 'react-dom';
-import { VideoPlayer } from '@carbon/ibmdotcom-react';
-import 'yourapplication.scss';
-
-function App() {
-  return (
-    <VideoPlayer inverse={false} videoId="your-video-id" showDescription />
-  );
-}
-ReactDOM.render(<App />, document.querySelector('#app'));
-```
-
-Add the following line in your `.env` file at the root of your project.
-[See more details](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles#usage).
-
-```
-  SASS_PATH=node_modules:src
-```
-
-> 💡 Don't forget to import the VideoPlayer styles from
-> [@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/styles).
-
-## Environment Variables
-
-The partner ID and uiconf ID necessary to render videos from the Kaltura can be
-set from the `.env` file.
-
-example:
-
-```
-KALTURA_PARTNER_ID=243342
-KALTURA_UICONF_ID=12905712
-```
-
-## Manual usage of Kaltura API
-
-With `@carbon/ibmdotcom-services`, you can keep track of the readiness of
-[Kaltura API](http://player.kaltura.com/docs/api) and use it when it is ready.
-Here is an example of stopping the video player when it is hidden in DOM:
-
-```javascript
-import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';
-
-// Keeps track of element resize and detect if the element of our interest is hidden
-const resizeObserver = new ResizeObserver(entries => {
-  entries.forEach(entry => {
-    const { width, height } = entry.contentRect;
-    if (width === 0 && height === 0) {
-      // Uses Kaltura API to stop the video
-      entry.target.sendNotification('doPause');
-    }
-  });
-});
-
-KalturaPlayerAPI.checkScript().then(() => {
-  window.kWidget.addReadyCallback(playerId => {
-    // Observes the resize of the video player
-    resizeObserver.observe(document.getElementById(playerId));
-  });
-});
-```
-
-> 💡 We don't test `<VideoPlayer>` against arbitray usage of Kaltura API. Use
-> this technique at your own risk.
-
-##### OPTIONAL 💡
-
-In addition, direct ES module imports can be used to speed up build compilation
-and have less reliance on tree-shaking determinations from build scripts:
-
-```js
-import VideoPlayer from '@carbon/ibmdotcom-react/es/components/VideoPlayer/VideoPlayer';
-```
-
-## Props
-
-<Props of={VideoPlayer} />
-
-## Stable selectors
-
-| Name                                   | Description |
-| -------------------------------------- | ----------- |
-| `dds--video-player--{video-player-id}` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/react/src/components/VideoPlayer/VideoImageOverlay.js b/packages/react/src/components/VideoPlayer/VideoImageOverlay.js
deleted file mode 100644
index 236550ab457..00000000000
--- a/packages/react/src/components/VideoPlayer/VideoImageOverlay.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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, { useCallback, useState } from 'react';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { Image } from '../Image';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import PlayIcon from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * VideoPlayer Image Overlay component
- */
-const VideoImageOverlay = ({
-  videoId,
-  videoData,
-  embedVideo,
-  playingMode,
-  thumbnail,
-  alt,
-  ...rest
-}) => {
-  const [thumbnailSize, setThumbnailSize] = useState(3);
-
-  const refImage = useCallback((node) => {
-    if (node?.parentElement) {
-      setThumbnailSize(node.parentElement.offsetWidth);
-    }
-  }, []);
-
-  const handleClick = (event) => {
-    const { onClick } = rest;
-    onClick && onClick(event);
-
-    if (playingMode === 'inline') {
-      _embedPlayer(event, embedVideo);
-    }
-  };
-
-  const imageSrc =
-    thumbnail ||
-    KalturaPlayerAPI.getThumbnailUrl({
-      mediaId: videoId,
-      width: thumbnailSize,
-    });
-
-  return (
-    <button
-      className={`${prefix}--video-player__image-overlay`}
-      data-autoid={`${stablePrefix}--video-player__image-overlay`}
-      onClick={handleClick}>
-      <Image
-        refImage={refImage}
-        defaultSrc={imageSrc}
-        alt={alt || videoData.name}
-        icon={PlayIcon}
-      />
-    </button>
-  );
-};
-
-const _embedPlayer = (e, embedVideo) => {
-  const element = e.target;
-  element.remove();
-  embedVideo(true);
-};
-
-VideoImageOverlay.propTypes = {
-  /**
-   * Video ID from Kaltura video platform.
-   */
-  videoId: PropTypes.string.isRequired,
-
-  /**
-   * Object containing videoData such as name, description, duration, etc.
-   */
-  videoData: PropTypes.object,
-
-  /**
-   * Func to set state to trigger embedding of video
-   */
-  embedVideo: PropTypes.func,
-
-  /**
-   * Choose whether the video will be rendered inline or using the `LightboxMediaViewer`.
-   */
-  playingMode: PropTypes.oneOf(['inline', 'lightbox']),
-
-  /**
-   * Optional custom video thumbnail
-   */
-  thumbnail: PropTypes.string,
-
-  /**
-   * Optional custom alt text
-   */
-  alt: PropTypes.string,
-};
-
-export default VideoImageOverlay;
diff --git a/packages/react/src/components/VideoPlayer/VideoPlayer.js b/packages/react/src/components/VideoPlayer/VideoPlayer.js
deleted file mode 100644
index 87cdc25c02a..00000000000
--- a/packages/react/src/components/VideoPlayer/VideoPlayer.js
+++ /dev/null
@@ -1,188 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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, { useEffect, useState } from 'react';
-import cx from 'classnames';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import LightboxMediaViewer from '../LightboxMediaViewer/LightboxMediaViewer';
-import PropTypes from 'prop-types';
-import settings from 'carbon-components/es/globals/js/settings';
-import uniqueid from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/uniqueid/uniqueid';
-import VideoImageOverlay from './VideoImageOverlay';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * VideoPlayer component.
- */
-const VideoPlayer = ({
-  showCaption,
-  videoId,
-  customClassName,
-  autoPlay,
-  aspectRatio,
-  playingMode,
-  caption,
-  thumbnail,
-  alt,
-}) => {
-  const [videoData, setVideoData] = useState({ description: '', name: '' });
-
-  // embedVideo is set to true when overlay thumbnail is clicked
-  const [embedVideo, setEmbedVideo] = useState(false);
-  const videoPlayerId = uniqueid(`video-player__video-${videoId}-`);
-  const videoDuration = KalturaPlayerAPI.getMediaDuration(
-    videoData.msDuration,
-    true
-  );
-
-  useEffect(() => {
-    let stale = false;
-    (async () => {
-      if (autoPlay || embedVideo) {
-        await KalturaPlayerAPI.embedMedia(
-          videoId,
-          `${prefix}--${videoPlayerId}`
-        );
-      }
-      if (stale) {
-        return;
-      }
-      const newVideoData = await KalturaPlayerAPI.api(videoId);
-      if (stale) {
-        return;
-      }
-      setVideoData(newVideoData);
-    })();
-    return () => {
-      stale = true;
-    };
-  }, [autoPlay, videoId, videoPlayerId, embedVideo]);
-
-  const classnames = cx(`${prefix}--video-player`, customClassName);
-
-  const aspectRatioClass = cx({
-    [`${prefix}--video-player__aspect-ratio--${aspectRatio}`]: aspectRatio,
-  });
-
-  const renderInLightbox = (
-    <>
-      <div className={`${prefix}--video-player__video`}>
-        <VideoImageOverlay
-          videoId={videoId}
-          videoData={videoData}
-          embedVideo={setEmbedVideo}
-          playingMode={playingMode}
-          onClick={() => setEmbedVideo(true)}
-          thumbnail={thumbnail}
-          alt={alt}
-        />
-      </div>
-      <LightboxMediaViewer
-        open={embedVideo}
-        media={{
-          type: 'video',
-          src: videoId,
-          title: caption,
-        }}
-        onClose={() => setEmbedVideo(false)}
-      />
-    </>
-  );
-
-  const renderInline = (
-    <div
-      className={`${prefix}--video-player__video`}
-      id={`${prefix}--${videoPlayerId}`}>
-      {!autoPlay && (
-        <VideoImageOverlay
-          videoId={videoId}
-          videoData={videoData}
-          embedVideo={setEmbedVideo}
-          playingMode={playingMode}
-          thumbnail={thumbnail}
-          alt={alt}
-        />
-      )}
-    </div>
-  );
-
-  const videoCaption = `${caption || videoData.name} ${videoDuration}`;
-  return (
-    <div aria-label={videoCaption} role="region" className={classnames}>
-      <div
-        className={`${prefix}--video-player__video-container ${aspectRatioClass}`}
-        data-autoid={`${stablePrefix}--video-player__video-${videoId}`}>
-        {playingMode === 'lightbox' ? renderInLightbox : renderInline}
-      </div>
-      {showCaption && (
-        <div className={`${prefix}--video-player__video-caption`}>
-          {videoCaption}
-        </div>
-      )}
-    </div>
-  );
-};
-
-VideoPlayer.propTypes = {
-  /**
-   * `true` to autoplay the video on load
-   */
-  autoPlay: PropTypes.bool,
-
-  /**
-   * Override default aspect ratio of `16x9`.
-   * Available aspect ratios:
-   *
-   * `16x9`, `9x16`, `2x1`, `1x2`, `4x3`, `3x4`, `1x1`
-   */
-  aspectRatio: PropTypes.string,
-
-  /**
-   * The CSS class name to apply.
-   */
-  customClassName: PropTypes.string,
-
-  /**
-   * Video ID from Kaltura video platform.
-   */
-  videoId: PropTypes.string.isRequired,
-
-  /**
-   * `true` to show the description.
-   */
-  showCaption: PropTypes.bool,
-
-  /**
-   * Optional custom video caption
-   */
-  caption: PropTypes.string,
-
-  /**
-   * Choose whether the video will be rendered inline or using the `LightboxMediaViewer`.
-   */
-  playingMode: PropTypes.oneOf(['inline', 'lightbox']),
-
-  /**
-   * Optional custom video thumbnail
-   */
-  thumbnail: PropTypes.string,
-
-  /**
-   * Optional custom alt text
-   */
-  alt: PropTypes.string,
-};
-
-VideoPlayer.defaultProps = {
-  autoPlay: false,
-  playingMode: 'inline',
-};
-
-export default VideoPlayer;
diff --git a/packages/react/src/components/VideoPlayer/__stories__/VideoPlayer.stories.js b/packages/react/src/components/VideoPlayer/__stories__/VideoPlayer.stories.js
deleted file mode 100644
index 8a9e75de057..00000000000
--- a/packages/react/src/components/VideoPlayer/__stories__/VideoPlayer.stories.js
+++ /dev/null
@@ -1,94 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 { boolean, text } from '@storybook/addon-knobs';
-import React from 'react';
-import readme from '../README.stories.mdx';
-import VideoPlayer from '../VideoPlayer';
-
-const props = {
-  default: () => ({
-    showCaption: boolean('Show caption (showCaption):', true),
-    aspectRatio: 'default',
-    videoId: '1_9h94wo6b',
-    playingMode: 'inline',
-    caption: text('Custom caption (caption):', ''),
-    thumbnail: text('Custom thumbnail (thumbnail):', ''),
-    alt: text('Custom alt text (alt):', ''),
-  }),
-  aspectRatio1x1: () => ({
-    showCaption: boolean('Show caption (showCaption):', true),
-    aspectRatio: '1x1',
-    videoId: '1_9h94wo6b',
-    playingMode: 'inline',
-    caption: text('Custom caption (caption):', ''),
-    thumbnail: text('Custom thumbnail (thumbnail):', ''),
-    alt: text('Custom alt text (alt):', ''),
-  }),
-  aspectRatio4x3: () => ({
-    showCaption: boolean('Show caption (showCaption):', true),
-    aspectRatio: '4x3',
-    videoId: '1_9h94wo6b',
-    playingMode: 'inline',
-    caption: text('Custom caption (caption):', ''),
-    thumbnail: text('Custom thumbnail (thumbnail):', ''),
-    alt: text('Custom alt text (alt):', ''),
-  }),
-  withLightboxMediaViewer: () => ({
-    showCaption: boolean('Show caption (showCaption):', true),
-    aspectRatio: 'default',
-    videoId: '1_9h94wo6b',
-    playingMode: 'lightbox',
-    caption: text('Custom caption (caption):', ''),
-    thumbnail: text('Custom thumbnail (thumbnail):', ''),
-    alt: text('Custom alt text (alt):', ''),
-  }),
-};
-
-export default {
-  title: 'Components/Video player',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-export const Default = (args) => {
-  return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <VideoPlayer
-            {...(Object.keys(args).length > 0 ? args : props.default())}
-          />
-        </div>
-      </div>
-    </div>
-  );
-};
-
-export const aspectRatio1x1 = () => <Default {...props.aspectRatio1x1()} />;
-
-aspectRatio1x1.story = {
-  name: 'Aspect ratio 1:1',
-};
-
-export const aspectRatio4x3 = () => <Default {...props.aspectRatio4x3()} />;
-
-aspectRatio4x3.story = {
-  name: 'Aspect ratio 4:3',
-};
-
-export const withLightboxMediaViewer = () => (
-  <Default {...props.withLightboxMediaViewer()} />
-);
-
-withLightboxMediaViewer.story = {
-  name: 'With lightbox media viewer',
-};
diff --git a/packages/react/src/components/VideoPlayer/__tests__/VideoPlayer.steps.js b/packages/react/src/components/VideoPlayer/__tests__/VideoPlayer.steps.js
deleted file mode 100644
index 62d006ea748..00000000000
--- a/packages/react/src/components/VideoPlayer/__tests__/VideoPlayer.steps.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-describe('VideoPlayer', () => {
-  beforeAll(async () => {
-    await page.goto(
-      `http://localhost:${process.env.PORT}/iframe.html?id=components-videoplayer--default`
-    );
-  });
-
-  it('should have the right type for the caption', async () => {
-    const caption = await page.waitForSelector(
-      '.bx--video-player__video-caption'
-    );
-    const styleValues = await page.evaluate(
-      (caption) =>
-        window.getStyleValues(caption, [
-          'font-size',
-          'font-weight',
-          'line-height',
-          'letter-spacing',
-        ]),
-      caption
-    );
-    expect(styleValues).toEqual({
-      'font-size': '14px',
-      'font-weight': '400',
-      'line-height': '20px',
-      'letter-spacing': '0.16px',
-    });
-  });
-});
diff --git a/packages/react/src/components/VideoPlayer/index.js b/packages/react/src/components/VideoPlayer/index.js
deleted file mode 100644
index 5cf0b6abe06..00000000000
--- a/packages/react/src/components/VideoPlayer/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as VideoPlayer } from './VideoPlayer';
diff --git a/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js b/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js
deleted file mode 100755
index c05e8db27b0..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/HeaderMenu.js
+++ /dev/null
@@ -1,314 +0,0 @@
-/* istanbul ignore file */
-
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ChevronDown20 from '@carbon/icons-react/es/chevron--down/20';
-import settings from 'carbon-components/es/globals/js/settings';
-import cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import {
-  keys,
-  matches,
-} from '../../../internal/vendor/carbon-components-react/internal/keyboard';
-import { AriaLabelPropType } from '../../../internal/vendor/carbon-components-react/prop-types/AriaPropTypes';
-import root from 'window-or-global';
-
-const { prefix } = settings;
-
-const defaultRenderMenuContent = () => (
-  <ChevronDown20 className={`${prefix}--header__menu-arrow`} />
-);
-
-/**
- * `HeaderMenu` is used to render submenu's in the `Header`. Most often children
- * will be a `HeaderMenuItem`. It handles certain keyboard events to help
- * with managing focus. It also passes along refs to each child so that it can
- * help manage focus state of its children.
- */
-class HeaderMenu extends React.Component {
-  static propTypes = {
-    /**
-     * Required props for the accessibility label of the menu
-     */
-    ...AriaLabelPropType,
-
-    /**
-     * Optional data-title attribute
-     */
-    dataTitle: PropTypes.string,
-
-    /**
-     * Provide a custom ref handler for the menu button
-     */
-    focusRef: PropTypes.func,
-
-    /**
-     * Optionally provide a tabIndex for the underlying menu button
-     */
-    tabIndex: PropTypes.number,
-
-    /**
-     * Provide a label for the link text
-     */
-    menuLinkName: PropTypes.string.isRequired,
-
-    /**
-     * Optional component to render instead of string
-     */
-    renderMenuContent: PropTypes.func,
-
-    /**
-     * Determines whether to disable body scroll
-     */
-    disableScroll: PropTypes.bool,
-
-    /**
-     * function to toogle overlay that appears when opening menu
-     */
-    setOverlay: PropTypes.func,
-
-    /**
-     * sets the selected styles
-     */
-    selected: PropTypes.bool,
-  };
-
-  static defaultProps = {
-    renderMenuContent: defaultRenderMenuContent,
-    setOverlay: () => {},
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      // Used to manage the expansion state of the menu
-      expanded: false,
-      // Refers to the menuitem that is currently focused
-      // Note: children should have `role="menuitem"` on node consuming ref
-      selectedIndex: null,
-    };
-    this.items = [];
-    this.scrollBarWidth =
-      root.window?.innerWidth - root.document?.body.offsetWidth;
-    this.menuLinkRef = React.createRef();
-  }
-  /**
-   * Toggle the expanded state of the menu on click.
-   */
-  handleOnClick = (event) => {
-    event.preventDefault();
-    this.menuLinkRef.current.focus();
-
-    // set the margin for masthead and body to adjust for scrollbar disappearing on scroll lock
-    const elems = root.document?.querySelectorAll(
-      `.${prefix}--masthead__l0, body`
-    );
-
-    this.setState((prevState) => {
-      if (this.props.disableScroll) {
-        if (prevState.expanded) {
-          this.props.setOverlay(false);
-          root.document?.body?.classList.remove(`${prefix}--body__lock-scroll`);
-          elems.forEach((elem) => (elem.style.marginRight = '0px'));
-        } else {
-          this.props.setOverlay(true);
-          root.document?.body?.classList.add(`${prefix}--body__lock-scroll`);
-          elems.forEach(
-            (elem) => (elem.style.marginRight = `${this.scrollBarWidth}px`)
-          );
-        }
-      }
-
-      const onMegaMenuToggle = new CustomEvent('onMegaMenuToggle', {
-        bubbles: true,
-        detail: { isExpanded: !prevState.expanded },
-      });
-      this.menuLinkRef.current.dispatchEvent(onMegaMenuToggle);
-
-      return {
-        expanded: !prevState.expanded,
-      };
-    });
-  };
-
-  /**
-   * Keyboard event handler for the entire menu.
-   */
-  handleOnKeyDown = (event) => {
-    // Handle enter or space key for toggling the expanded state of the menu.
-    if (matches(event, [keys.Enter, keys.Space])) {
-      event.stopPropagation();
-      event.preventDefault();
-
-      this.handleOnClick(event);
-
-      return;
-    }
-  };
-
-  /**
-   * Checks if user has tabbed to menu items within the megamenu,
-   * if so do not set overlay to false
-   */
-  checkMenuItems = (event) => {
-    const megamenuItems = [
-      `${prefix}--masthead__megamenu__category-headline`,
-      `${prefix}--masthead__megamenu__category-group`,
-      `${prefix}--masthead__megamenu__view-all-cta`,
-      `${prefix}--masthead__megamenu__l0-nav`,
-      `${prefix}--masthead__megamenu__l1-nav`,
-      `${prefix}--header__menu`,
-    ];
-
-    return megamenuItems.filter((item) =>
-      event.relatedTarget.parentElement.className?.includes(item)
-    );
-  };
-
-  /**
-   * Handle our blur event from our underlying menuitems. Will mostly be used
-   * for toggling the expansion status of our menu in response to a user
-   * clicking off of the menu or menubar.
-   */
-  handleOnBlur = (event) => {
-    const elems = root.document?.querySelectorAll(
-      `.${prefix}--masthead__l0, body`
-    );
-    if (!event.currentTarget.contains(event.relatedTarget)) {
-      this.setState({ expanded: false, selectedIndex: null });
-      if (this.props.disableScroll) {
-        root.document?.body?.classList.remove(`${prefix}--body__lock-scroll`);
-        elems.forEach((elem) => (elem.style.marginRight = '0px'));
-      }
-    }
-
-    if (!event.relatedTarget || !this.checkMenuItems(event).length) {
-      this.props.setOverlay(false);
-    }
-  };
-
-  /**
-   * ref handler for our menu button. This node is represented by the
-   * `role="menu"` attribute. If we are supplied a `focusRef` prop, we also
-   * forward along the node.
-   *
-   * This is useful when this component is a child in a
-   * menu or menubar as it will allow the parent to explicitly focus the menu
-   * button node when that child should receive focus.
-   */
-  handleMenuButtonRef = (node) => {
-    if (this.props.focusRef) {
-      this.props.focusRef(node);
-    }
-    this.menuButtonRef = node;
-  };
-
-  /**
-   * Handles individual menuitem refs. We assign them to a class instance
-   * property so that we can properly manage focus of our children.
-   */
-  handleItemRef = (index) => (node) => {
-    this.items[index] = node;
-  };
-
-  handleMenuClose = (event) => {
-    // Handle ESC keydown for closing the expanded menu.
-    if (matches(event, [keys.Escape]) && this.state.expanded) {
-      event.stopPropagation();
-      event.preventDefault();
-
-      this.setState(() => ({
-        expanded: false,
-        selectedIndex: null,
-      }));
-
-      // remove overlay
-      this.props.setOverlay(false);
-
-      // Return focus to menu button when the user hits ESC.
-      this.menuLinkRef.current.focus();
-      return;
-    }
-  };
-
-  render() {
-    const {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-      className: customClassName,
-      children,
-      renderMenuContent: MenuContent,
-      menuLinkName,
-      autoId,
-      selected,
-      dataTitle,
-    } = this.props;
-    const accessibilityLabel = {
-      'aria-label': ariaLabel,
-      'aria-labelledby': ariaLabelledBy,
-    };
-
-    const className = cx(`${prefix}--header__submenu`, customClassName);
-    // Notes on eslint comments and based on the examples in:
-    // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
-    // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
-    // users
-    // - aria-haspopup can definitely have the value "menu"
-    // - aria-expanded is on their example node with role="menuitem"
-    // - href can be set to javascript:void(0), ideally this will be a button
-    return (
-      <li // eslint-disable-line jsx-a11y/mouse-events-have-key-events,jsx-a11y/no-noninteractive-element-interactions
-        className={className}
-        data-autoid={autoId}
-        onKeyDown={this.handleMenuClose}
-        onBlur={this.handleOnBlur}>
-        <a // eslint-disable-line jsx-a11y/role-supports-aria-props,jsx-a11y/anchor-is-valid
-          aria-haspopup="menu" // eslint-disable-line jsx-a11y/aria-proptypes
-          aria-expanded={this.state.expanded}
-          className={`${prefix}--header__menu-item ${prefix}--header__menu-title`}
-          data-title={dataTitle}
-          href="#"
-          onClick={this.handleOnClick}
-          onKeyDown={this.handleOnKeyDown}
-          role="menuitem"
-          data-selected={`${!!selected}`}
-          tabIndex={0}
-          ref={this.menuLinkRef}
-          {...accessibilityLabel}>
-          {menuLinkName}
-          <MenuContent />
-        </a>
-        <ul {...accessibilityLabel} className={`${prefix}--header__menu`}>
-          {React.Children.map(children, this._renderMenuItem)}
-        </ul>
-      </li>
-    );
-  }
-
-  /**
-   * Render an individual menuitem, passing along `role: 'none'` because the
-   * host node <li> doesn't apply when in a <ul> with `role="menu"` and so we
-   * need to revert the semantics.
-   *
-   * We also capture the `ref` for each child inside of `this.items` to properly
-   * manage focus. In addition to this focus management, all items receive a
-   * `tabIndex: -1` so the user won't hit a large number of items in their tab
-   * sequence when they might not want to go through all the items.
-   */
-  _renderMenuItem = (item, index) => {
-    return React.cloneElement(item, {
-      ref: this.handleItemRef(index),
-      role: 'none',
-    });
-  };
-}
-
-export default React.forwardRef((props, ref) => {
-  return <HeaderMenu {...props} focusRef={ref} />;
-});
diff --git a/packages/react/src/components/carbon-components-react/UIShell/SideNavIcon.js b/packages/react/src/components/carbon-components-react/UIShell/SideNavIcon.js
deleted file mode 100644
index 99e40f58f28..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/SideNavIcon.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/* istanbul ignore file */
-
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 settings from 'carbon-components/es/globals/js/settings';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const { prefix } = settings;
-
-const SideNavIcon = ({ children, className: customClassName, small }) => {
-  const className = cx({
-    [`${prefix}--side-nav__icon`]: true,
-    [`${prefix}--side-nav__icon--small`]: small,
-    [customClassName]: !!customClassName,
-  });
-  return <div className={className}>{children}</div>;
-};
-
-SideNavIcon.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-
-  /**
-   * Provide a single icon as the child to `SideNavIcon` to render in the
-   * container
-   */
-  children: PropTypes.node.isRequired,
-
-  /**
-   * Specify whether the icon should be placed in a smaller bounding box
-   */
-  small: PropTypes.bool.isRequired,
-};
-
-SideNavIcon.defaultProps = {
-  small: false,
-};
-
-export default SideNavIcon;
diff --git a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenu.js b/packages/react/src/components/carbon-components-react/UIShell/SideNavMenu.js
deleted file mode 100755
index 95e5a409a8c..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenu.js
+++ /dev/null
@@ -1,220 +0,0 @@
-/* eslint-disable jsx-a11y/role-supports-aria-props */
-/* istanbul ignore file */
-
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ChevronDown20 from '@carbon/icons-react/es/chevron--down/20';
-import settings from 'carbon-components/es/globals/js/settings';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React from 'react';
-import SideNavIcon from './SideNavIcon';
-const { prefix } = settings;
-
-export class SideNavMenu extends React.Component {
-  static propTypes = {
-    /**
-     * Provide an optional class to be applied to the containing node
-     */
-    className: PropTypes.string,
-
-    /**
-     * Pass in a custom icon to render next to the `SideNavMenu` title
-     */
-    renderIcon: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
-
-    /**
-     * Specify whether the `SideNavMenu` is "active". `SideNavMenu` should be
-     * considered active if one of its menu items are a link for the current
-     * page.
-     */
-    isActive: PropTypes.bool,
-
-    /**
-     * Provide the text for the overall menu name
-     */
-    title: PropTypes.string.isRequired,
-
-    /**
-     * Specify whether the menu should default to expanded. By default, it will
-     * be closed.
-     */
-    defaultExpanded: PropTypes.bool,
-
-    /**
-     * Property to indicate if the side nav container is open (or not). Use to
-     * keep local state and styling in step with the SideNav expansion state.
-     */
-    isSideNavExpanded: PropTypes.bool,
-
-    /**
-     * Specify if this is a large variation of the SideNavMenu
-     */
-    large: PropTypes.bool,
-
-    /**
-     * For submenu back button to toggle expand/collapse
-     */
-    isbackbutton: PropTypes.string,
-
-    /**
-     * A callback that is called when this side nav menu is toggled by user gesture.
-     */
-    onToggle: PropTypes.func,
-  };
-
-  static defaultProps = {
-    defaultExpanded: false,
-    isActive: false,
-    large: false,
-  };
-
-  static getDerivedStateFromProps = (props, state) => {
-    let derivedState = null;
-
-    if (props.isSideNavExpanded === false && state.isExpanded === true) {
-      derivedState = {
-        isExpanded: props.isSideNavExpanded,
-        wasPreviouslyExpanded: true,
-      };
-    } else if (
-      props.isSideNavExpanded === true &&
-      state.wasPreviouslyExpanded === true
-    ) {
-      derivedState = {
-        isExpanded: props.isSideNavExpanded,
-        wasPreviouslyExpanded: false,
-      };
-    }
-
-    return derivedState;
-  };
-
-  constructor(props) {
-    super(props);
-    this.state = {
-      isExpanded: props.defaultExpanded || false,
-      wasPreviouslyExpanded: props.defaultExpanded || false,
-    };
-  }
-
-  handleToggleExpand = (event) => {
-    const { onToggle } = this.props;
-    const onMegaMenuToggle = new CustomEvent('onMegaMenuToggle', {
-      bubbles: true,
-      detail: { isExpanded: !this.state.isExpanded },
-    });
-
-    event.currentTarget.dispatchEvent(onMegaMenuToggle);
-
-    event.persist();
-    this.setState(
-      (state) => ({ isExpanded: !state.isExpanded }),
-      () => {
-        if (onToggle) {
-          onToggle(event, { isExpanded: this.state.isExpanded });
-        }
-      }
-    );
-  };
-
-  handleKeyToggleExpand = (event) => {
-    if (event.key === 'Enter' || event.charCode === ' ') {
-      event.stopPropagation();
-      event.preventDefault();
-      const { onToggle } = this.props;
-
-      event.persist();
-      this.setState(
-        (state) => ({ isExpanded: !state.isExpanded }),
-        () => {
-          if (onToggle) {
-            onToggle(event, { isExpanded: this.state.isExpanded });
-          }
-        }
-      );
-    }
-  };
-
-  render() {
-    const {
-      buttonRef,
-      className: customClassName,
-      renderIcon: IconElement,
-      isActive,
-      title,
-      large,
-      isbackbutton: _isbackbutton,
-      ...rest
-    } = this.props;
-    const { isExpanded } = this.state;
-
-    let hasActiveChild;
-
-    const className = cx({
-      [`${prefix}--side-nav__item`]: true,
-      [`${prefix}--side-nav__item--active`]:
-        isActive || (hasActiveChild && !isExpanded),
-      [`${prefix}--side-nav__item--icon`]: IconElement,
-      [`${prefix}--side-nav__item--large`]: large,
-      [customClassName]: !!customClassName,
-    });
-    return (
-      <li className={className}>
-        <button
-          aria-haspopup="true"
-          aria-expanded={isExpanded}
-          data-selected={rest.selected ? 'true' : ''}
-          className={cx(`${prefix}--side-nav__submenu`, {
-            [`${prefix}--masthead__side-nav--submemu--selected`]: rest.selected,
-          })}
-          data-title={rest.dataTitle}
-          onClick={this.handleToggleExpand}
-          ref={buttonRef}
-          type="button">
-          {IconElement && (
-            <SideNavIcon>
-              <IconElement />
-            </SideNavIcon>
-          )}
-          <div className={`${prefix}--side-nav__submenu-content`}>
-            <span
-              className={`${prefix}--side-nav__submenu-title`}
-              data-autoid={`${rest.autoid}`}>
-              {title}
-            </span>
-            <SideNavIcon
-              className={`${prefix}--side-nav__submenu-chevron`}
-              small>
-              <ChevronDown20 />
-            </SideNavIcon>
-          </div>
-        </button>
-      </li>
-    );
-  }
-
-  _renderSideNavItem = (item) => {
-    if (item) {
-      return React.cloneElement(item, {
-        onClick:
-          item.props.isbackbutton === 'true'
-            ? this.handleToggleExpand.bind(this)
-            : null,
-        onKeyPress:
-          item.props.isbackbutton === 'true'
-            ? this.handleKeyToggleExpand.bind(this)
-            : null,
-      });
-    }
-  };
-}
-
-export default React.forwardRef((props, ref) => {
-  return <SideNavMenu {...props} buttonRef={ref} />;
-});
diff --git a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuBackButton.js b/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuBackButton.js
deleted file mode 100644
index c890a1dfa06..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuBackButton.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ChevronLeft20 from '@carbon/icons-react/es/chevron--left/20';
-import settings from 'carbon-components/es/globals/js/settings';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * SideNavMenu BackButton component
- */
-const SideNavMenuBackButton = React.forwardRef(function SideNavMenuBackButton(
-  props,
-  ref
-) {
-  const { onBackClick, backButtonText, ...rest } = props;
-
-  const handleBackButtonClick = (event) => {
-    event.preventDefault();
-    onBackClick();
-  };
-
-  const handleBackButtonKeyPress = (event) => {
-    if (event.key === 'Enter' || event.charCode === ' ') {
-      event.preventDefault();
-      onBackClick();
-    }
-  };
-
-  return (
-    <li
-      className={`${prefix}--side-nav__menu-item ${prefix}--masthead__side-nav--submemu-back`}>
-      <button
-        ref={ref}
-        onClick={handleBackButtonClick}
-        onKeyPress={handleBackButtonKeyPress}
-        className={`${prefix}--side-nav__link`}
-        data-autoid={`${stablePrefix}--masthead-${rest.navType}-sidenav__l0-back`}
-        isbackbutton="true">
-        <span className={`${prefix}--side-nav__link-text`}>
-          <ChevronLeft20 />
-          {backButtonText}
-        </span>
-      </button>
-    </li>
-  );
-});
-
-SideNavMenuBackButton.propTypes = {
-  /**
-   * action on back click
-   */
-  onBackClick: PropTypes.func,
-
-  /**
-   * back button text
-   */
-  backButtonText: PropTypes.string,
-};
-
-SideNavMenuBackButton.defaultProps = {
-  backButtonText: 'Back',
-  onBackClick: () => {},
-};
-
-export default SideNavMenuBackButton;
diff --git a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuSection.js b/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuSection.js
deleted file mode 100644
index 959b0f6a5a5..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuSection.js
+++ /dev/null
@@ -1,161 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import cx from 'classnames';
-import SideNavLink from '../../../internal/vendor/carbon-components-react/components/UIShell/SideNavLink';
-import SideNavMenuBackButton from './SideNavMenuBackButton';
-import settings from 'carbon-components/es/globals/js/settings';
-import PropTypes from 'prop-types';
-import React, { useRef, useEffect } from 'react';
-
-const { prefix } = settings;
-
-/**
- * SideNavMenuSection component
- */
-const SideNavMenuSection = ({
-  className: customClassName,
-  children,
-  onBackClick,
-  show,
-  ...rest
-}) => {
-  const menuSectionRef = useRef(null);
-  const backButtonRef = useRef(null);
-
-  useEffect(() => {
-    if (show) {
-      /**
-       * In order for tabbing to work, focus has to be set in the menu section when it
-       * becomes visible. If menu section is a submenu, set focus to the back button. If menu section
-       * is the first parent section, set focus to the hamburger toggle button.
-       *
-       * @param {Node} focusElement node element to focus
-       */
-      const setFocus = (focusElement) => {
-        menuSectionRef.current?.addEventListener(
-          'transitionend',
-          function focus(event) {
-            if (
-              event.propertyName === 'left' ||
-              event.propertyName === 'background-color' ||
-              event.propertyName === 'color'
-            ) {
-              focusElement?.focus();
-            }
-            menuSectionRef.current?.removeEventListener('transitionend', focus);
-          }
-        );
-      };
-
-      if (rest.isSubmenu) {
-        setFocus(backButtonRef.current);
-      } else {
-        setFocus(rest.focusNode);
-      }
-    }
-  }, [rest.focusNode, rest.isSubmenu, show]);
-
-  const className = cx({
-    [`${prefix}--side-nav__menu-section`]: true,
-    [`${prefix}--side-nav__menu-section--expanded`]: show,
-    [customClassName]: !!customClassName,
-  });
-
-  return (
-    <div
-      aria-hidden={!show}
-      className={className}
-      id={rest.id}
-      ref={menuSectionRef}>
-      {rest.isSubmenu && (
-        <>
-          <button
-            className={`${prefix}--masthead__focus`}
-            onFocus={(e) => {
-              const lastMenuItem =
-                e.target.parentElement.querySelector(
-                  'li:last-of-type button'
-                ) || e.target.parentElement.querySelector('li:last-of-type a');
-              return lastMenuItem.focus();
-            }}>
-            focus trapping button
-          </button>
-          <SideNavMenuBackButton
-            ref={backButtonRef}
-            onBackClick={onBackClick}
-            navType={rest.navType}
-            backButtonText={rest.backButtonText}
-          />
-          {rest.titleUrl ? (
-            <SideNavLink
-              className={`${prefix}--masthead__side-nav--submemu-section-title`}
-              href={rest.titleUrl}>
-              {rest.title}
-              <div
-                className={`${prefix}--masthead__side-nav--submemu-section-title__icon`}>
-                <ArrowRight20 />
-              </div>
-            </SideNavLink>
-          ) : (
-            <li className={`${prefix}--masthead__side-nav--submemu-title`}>
-              {rest.title}
-            </li>
-          )}
-          {rest.heading && (
-            <p className={`${prefix}--masthead__side-nav--submemu-heading`}>
-              {rest.heading}
-            </p>
-          )}
-        </>
-      )}
-      {children}
-      <button
-        className={`${prefix}--masthead__focus`}
-        onFocus={(e) => {
-          if (rest.focusNode) {
-            rest.focusNode.focus();
-          } else {
-            e.target.parentElement
-              .querySelector('button[isbackbutton="true"]')
-              .focus();
-          }
-        }}>
-        focus trapping button
-      </button>
-    </div>
-  );
-};
-
-SideNavMenuSection.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-
-  /**
-   * <SideNavMenuItem>'s within SideNavMenuSection
-   */
-  children: PropTypes.node,
-
-  /**
-   * action on back click
-   */
-  onBackClick: PropTypes.func,
-
-  /**
-   * Determine whether to show SideNavMenuSection
-   */
-  show: PropTypes.bool,
-};
-
-SideNavMenuSection.defaultProps = {
-  show: false,
-  onBackClick: () => {},
-};
-
-export default SideNavMenuSection;
diff --git a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuWithBackForward.js b/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuWithBackForward.js
deleted file mode 100755
index 53e2d6e89ab..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/SideNavMenuWithBackForward.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ArrowRight20 from '@carbon/icons-react/es/arrow--right/20';
-import ChevronLeft20 from '@carbon/icons-react/es/chevron--left/20';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import settings from 'carbon-components/es/globals/js/settings';
-import SideNavLink from '../../../internal/vendor/carbon-components-react/components/UIShell/SideNavLink';
-import SideNavMenu from './SideNavMenu';
-import SideNavMenuItem from '../../../internal/vendor/carbon-components-react/components/UIShell/SideNavMenuItem';
-import PropTypes from 'prop-types';
-import React, { useCallback, useRef } from 'react';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Side nav menu with back button
- *
- * @returns {*} SideNavMenuWithBackFoward menu items
- */
-const SideNavMenuWithBackForward = ({
-  title,
-  titleUrl,
-  backButtonText,
-  children,
-  ...rest
-}) => {
-  const refSideNavMenu = useRef(null);
-  const handleToggle = useCallback(() => {
-    const { current: sideNavMenuNode } = refSideNavMenu;
-    const sideNav = sideNavMenuNode.closest('.bx--side-nav');
-    if (sideNav) {
-      Array.prototype.forEach.call(
-        sideNav.querySelectorAll('.bx--side-nav__menu'),
-        (elem) => {
-          const hasExpandedSubmenu = elem.querySelector(
-            '.bx--side-nav__submenu[aria-expanded="true"]'
-          );
-          elem.classList.toggle(
-            'bx--side-nav__menu--hasactivechildren',
-            hasExpandedSubmenu
-          );
-        }
-      );
-    }
-
-    // return scroll to top when menu toggles
-    const sideNavItems = sideNavMenuNode.closest('.bx--side-nav__items');
-    sideNavItems.scrollTop = 0;
-  }, []);
-  return (
-    <SideNavMenu
-      autoid={rest.autoid}
-      selected={rest.selected}
-      title={title}
-      className={
-        rest.lastHighlighted &&
-        `${prefix}--masthead__side-nav__last-highlighted`
-      }
-      onToggle={handleToggle}
-      ref={refSideNavMenu}
-      dataTitle={rest.dataTitle}>
-      <SideNavMenuItem
-        onClick={(event) => event.preventDefault()}
-        className={`${prefix}--masthead__side-nav--submemu-back`}
-        data-autoid={`${stablePrefix}--masthead-${rest.navType}-sidenav__l0-back`}
-        isbackbutton="true"
-        role="button"
-        tabIndex="0">
-        <ChevronLeft20 />
-        {backButtonText}
-      </SideNavMenuItem>
-      {titleUrl ? (
-        <SideNavLink
-          className={`${prefix}--masthead__side-nav--submemu-section-title`}
-          href={titleUrl}>
-          {title}
-          <div
-            className={`${prefix}--masthead__side-nav--submemu-section-title__icon`}>
-            <ArrowRight20 />
-          </div>
-        </SideNavLink>
-      ) : (
-        <li className={`${prefix}--masthead__side-nav--submemu-title`}>
-          {title}
-        </li>
-      )}
-      {rest.heading && (
-        <p className={`${prefix}--masthead__side-nav--submemu-heading`}>
-          {rest.heading}
-        </p>
-      )}
-      {children}
-    </SideNavMenu>
-  );
-};
-
-SideNavMenuWithBackForward.propTypes = {
-  /**
-   * Submenu nav section title
-   */
-  title: PropTypes.string.isRequired,
-
-  /**
-   * Submenu nav section title url
-   */
-  titleUrl: PropTypes.string,
-
-  /**
-   * Back button text
-   */
-  backButtonText: PropTypes.string,
-
-  /**
-   * Sidenav child elements to be rendered
-   */
-  children: PropTypes.oneOfType([
-    PropTypes.arrayOf(PropTypes.node),
-    PropTypes.node,
-  ]),
-};
-
-export default SideNavMenuWithBackForward;
diff --git a/packages/react/src/components/carbon-components-react/UIShell/index.js b/packages/react/src/components/carbon-components-react/UIShell/index.js
deleted file mode 100644
index 7aa2a6be800..00000000000
--- a/packages/react/src/components/carbon-components-react/UIShell/index.js
+++ /dev/null
@@ -1,13 +0,0 @@
-/* istanbul ignore file */
-
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 HeaderMenu from './HeaderMenu';
-export SideNavIcon from './SideNavIcon';
-export SideNavMenu from './SideNavMenu';
-export SideNavMenuWithBackForward from './SideNavMenuWithBackForward';
diff --git a/packages/react/src/components/index.js b/packages/react/src/components/index.js
deleted file mode 100644
index eccc7bc7fad..00000000000
--- a/packages/react/src/components/index.js
+++ /dev/null
@@ -1,60 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 * from './AudioPlayer';
-export * from './ButtonGroup';
-export * from './CalloutQuote';
-export * from './CalloutWithMedia';
-export * from './carbon-components-react/UIShell';
-export * from './Card';
-export * from './CardGroup';
-export * from './CardLink';
-export * from './CardSectionImages';
-export * from './CardSectionSimple';
-export * from './ContentBlockCards';
-export * from './ContentBlock';
-export * from './ContentGroup';
-export * from './ContentBlockHeadlines';
-export * from './ContentBlockHorizontal';
-export * from './ContentBlockMedia';
-export * from './ContentBlockMixed';
-export * from './ContentBlockSegmented';
-export * from './ContentBlockSimple';
-export * from './ContentGroupCards';
-export * from './ContentGroupHorizontal';
-export * from './ContentGroupPictograms';
-export * from './ContentGroupSimple';
-export * from './ContentItem';
-export * from './ContentItemHorizontal';
-export * from './ContentSection';
-export * from './CTA';
-export * from './CTASection';
-export * from './DotcomShell';
-export * from './ExpressiveModal';
-export * from './FeatureCard';
-export * from './FeatureCardBlockLarge';
-export * from './FeatureCardBlockMedium';
-export * from './Footer';
-export * from './HorizontalRule';
-export * from './Icon';
-export * from './Image';
-export * from './ImageWithCaption';
-export * from './Layout';
-export * from './LeadSpace';
-export * from './LeadSpaceBlock';
-export * from './LightboxMediaViewer';
-export * from './LinkList';
-export * from './LinkWithIcon';
-export * from './LocaleModal';
-export * from './LogoGrid';
-export * from './Masthead';
-export * from './PictogramItem';
-export * from './Quote';
-export * from './ScrollAnimations';
-export * from './TableOfContents';
-export * from './VideoPlayer';
-export * from './NoticeChoice';
diff --git a/packages/react/src/index.js b/packages/react/src/index.js
deleted file mode 100644
index 31be890c0f2..00000000000
--- a/packages/react/src/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 * from './components/';
diff --git a/packages/react/src/internal/FeatureFlags.js b/packages/react/src/internal/FeatureFlags.js
deleted file mode 100644
index fa208ec0807..00000000000
--- a/packages/react/src/internal/FeatureFlags.js
+++ /dev/null
@@ -1,73 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * This file contains the list of the default values of compile-time feature flags.
- */
-
-/**
- * This flag will determine if all feature flags should be enabled
- *
- * @type {boolean}
- */
-export const DDS_FLAGS_ALL = process.env.DDS_FLAGS_ALL === 'true' || false;
-
-/**
- * Feature flag to turn on the Audio Player
- *
- * @type {boolean}
- */
-export const DDS_AUDIO_PLAYER =
-  process.env.DDS_AUDIO_PLAYER === 'true' || DDS_FLAGS_ALL || false;
-
-/**
- * Feature flag to turn on the Card with Pictogram
- *
- * @type {boolean}
- */
-export const DDS_CARD_WITH_PICTOGRAM =
-  process.env.DDS_CARD_WITH_PICTOGRAM === 'true' || DDS_FLAGS_ALL || false;
-
-/**
- * Feature flag to enable custom login url in masthead profile menu
- *
- * @type {boolean}
- */
-export const DDS_CUSTOM_PROFILE_LOGIN =
-  process.env.DDS_CUSTOM_PROFILE_LOGIN === 'true' || DDS_FLAGS_ALL || false;
-
-/**
- * Feature flag for the optional language selector in the footer
- *
- * @type {boolean}
- */
-export const DDS_LANGUAGE_SELECTOR =
-  process.env.DDS_LANGUAGE_SELECTOR === 'true' || DDS_FLAGS_ALL || false;
-
-/**
- * This determines if content block - headlines will be rendered or not
- *
- * @type {string | boolean}
- */
-export const DDS_CONTENTBLOCK_HEADLINES =
-  process.env.DDS_CONTENTBLOCK_HEADLINES === 'true' || DDS_FLAGS_ALL || false;
-
-/**
- * This determines if Leadspace with search will be rendered or not
- *
- * @type {string | boolean}
- */
-export const DDS_LEADSPACE_WITH_SEARCH =
-  process.env.DDS_LEADSPACE_WITH_SEARCH === 'true' || DDS_FLAGS_ALL || false;
-
-/**
- * This determines if notice choice will be rendered or not
- *
- * @type {string | boolean}
- */
-export const DDS_NOTICE_CHOICE =
-  process.env.DDS_NOTICE_CHOICE === 'true' || DDS_FLAGS_ALL || false;
diff --git a/packages/react/src/internal/components/Callout/Callout.js b/packages/react/src/internal/components/Callout/Callout.js
deleted file mode 100644
index f9c78890bbf..00000000000
--- a/packages/react/src/internal/components/Callout/Callout.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 ddsSettings from '../../vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import PropTypes from 'prop-types';
-import React from 'react';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { stablePrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Callout with child object.
- */
-const Callout = ({ children }) => (
-  <section
-    className={`${prefix}--callout__container`}
-    data-autoid={`${stablePrefix}--callout__container`}>
-    <div
-      className={`${prefix}--callout__column`}
-      data-autoid={`${stablePrefix}--callout__column`}>
-      <div
-        className={`${prefix}--callout__content`}
-        data-autoid={`${stablePrefix}--callout__content`}>
-        {children}
-      </div>
-    </div>
-  </section>
-);
-
-Callout.propTypes = {
-  /**
-   * The component being imported into the callout container.
-   */
-  children: PropTypes.node,
-};
-
-export default Callout;
diff --git a/packages/react/src/internal/components/Callout/__tests__/Callout.test.js b/packages/react/src/internal/components/Callout/__tests__/Callout.test.js
deleted file mode 100644
index b4d2b1ea714..00000000000
--- a/packages/react/src/internal/components/Callout/__tests__/Callout.test.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 Callout from '../Callout';
-import React from 'react';
-import { shallow } from 'enzyme';
-
-const children = <p>hello world</p>;
-
-describe('Callout', () => {
-  it('renders as expected', () => {
-    const callout = shallow(<Callout children={children} />);
-    expect(callout.find('.bx--callout__container')).toHaveLength(1);
-    expect(callout.find('.bx--callout__column')).toHaveLength(1);
-    expect(callout.find('.bx--callout__content')).toHaveLength(1);
-  });
-});
diff --git a/packages/react/src/internal/components/ConditionalWrapper/ConditionalWrapper.js b/packages/react/src/internal/components/ConditionalWrapper/ConditionalWrapper.js
deleted file mode 100644
index 4d9065db257..00000000000
--- a/packages/react/src/internal/components/ConditionalWrapper/ConditionalWrapper.js
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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';
-
-/**
- * Conditional wrapper internal component
- *
- * @param {object} props React props object
- * @param {boolean} props.condition whether to use wrapper
- * @param {*} props.wrapper JSX components
- * @param {*} props.children element(s)
- * @returns {*} JSX element
- * @example
- * import ConditionalWrapper from '../../internal/components/ConditionalWrapper/ConditionalWrapper';
- *
- * const example = ({ link, copy }) => {
- *   return (
- *     <ConditionalWrapper
- *       condition={link}
- *       wrapper={children => <a href={link}>{children}</a>}
- *     >
- *       <p>{children}</p>
- *     </ConditionalWrapper>
- *   );
- * }
- */
-const ConditionalWrapper = ({ condition, wrapper, children }) =>
-  condition ? wrapper(children) : children;
-
-ConditionalWrapper.propTypes = {
-  /**
-   * Condition whether to use wrapper or not
-   */
-  condition: PropTypes.bool,
-
-  /**
-   * Wrapper element
-   */
-  wrapper: PropTypes.func,
-
-  /**
-   * Children elements
-   */
-  children: PropTypes.node,
-};
-
-export default ConditionalWrapper;
diff --git a/packages/react/src/internal/hooks/useVideoData/__tests__/useVideoData.test.js b/packages/react/src/internal/hooks/useVideoData/__tests__/useVideoData.test.js
deleted file mode 100644
index ffe64fdb88b..00000000000
--- a/packages/react/src/internal/hooks/useVideoData/__tests__/useVideoData.test.js
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 KalturaPlayerAPI from '../../../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-import { mount } from 'enzyme';
-import React from 'react';
-import useVideoData from '../useVideoData';
-
-jest.mock(
-  '../../../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer',
-  () => ({
-    api: jest.fn(() => Promise.resolve({ msDuration: 10000 })),
-    getMediaDuration: jest.fn(() => '1:30'),
-  })
-);
-
-describe('useVideoData hook', () => {
-  const type = 'video';
-  const videoId = [{ src: '1_9h94wo6b' }];
-  /**
-   * @param {object} otherProps otherprops
-   * @param {string} style style of CTA
-   * @param {string} type type of CTA
-   * @returns {*} returns an empty value
-   */
-  function setup(otherProps, style, type) {
-    const returnVal = {};
-
-    /**
-     * writing test component here that uses the useVideoData hook
-     *
-     * @returns {*} null
-     */
-    function TestComponent() {
-      Object.assign(returnVal, useVideoData(otherProps, style, type));
-      return null;
-    }
-    mount(<TestComponent />);
-    return returnVal;
-  }
-  it('should call the KalturaPlayerAPI', async () => {
-    setup(type, videoId);
-    expect(KalturaPlayerAPI.api).toHaveBeenCalled();
-  });
-});
diff --git a/packages/react/src/internal/hooks/useVideoData/index.js b/packages/react/src/internal/hooks/useVideoData/index.js
deleted file mode 100644
index a262ac9c968..00000000000
--- a/packages/react/src/internal/hooks/useVideoData/index.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * 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 { default as useVideoData } from './useVideoData';
diff --git a/packages/react/src/internal/hooks/useVideoData/useVideoData.js b/packages/react/src/internal/hooks/useVideoData/useVideoData.js
deleted file mode 100644
index 0598d52d7f8..00000000000
--- a/packages/react/src/internal/hooks/useVideoData/useVideoData.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 { useState, useEffect, useCallback } from 'react';
-import KalturaPlayerAPI from '../../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
-
-/**
- * utilizes the KalturaPlayerAPI to extract video data and
- * returns video title with duration for CTA
- *
- * @param {string} type type of CTA
- * @param {Array} videoId array of video ids
- * @param {string} customVideoTitle if provided, overrides the video original title
- * @returns {*} JSX Object
- */
-function useVideoData(type, videoId, customVideoTitle) {
-  const [videoTitle, setVideoTitle] = useState([
-    { title: '', duration: '', key: 0 },
-  ]);
-
-  let getVideoData;
-
-  useEffect(() => {
-    getVideoData();
-  }, [getVideoData, type, customVideoTitle]);
-  /**
-   * retrieve duration and title information from the video if
-   * the type of the CTA is `video`
-   *
-   * sets the `videoTitle` state with an array of title objects
-   *
-   */
-  getVideoData = useCallback(async () => {
-    if (type === 'video' || type.includes('video')) {
-      const title = await Promise.all(
-        videoId.map(async (vidId) => {
-          const video = await KalturaPlayerAPI.api(vidId.src);
-          const time = KalturaPlayerAPI.getMediaDuration(
-            video.msDuration,
-            true
-          );
-          return {
-            title: customVideoTitle ? customVideoTitle : video.name,
-            duration: time,
-            key: vidId.key,
-          };
-        })
-      );
-      setVideoTitle(title);
-    }
-  }, [type, videoId, customVideoTitle]);
-
-  return videoTitle;
-}
-
-export default useVideoData;
diff --git a/packages/react/src/prop-types/AriaPropTypes.js b/packages/react/src/prop-types/AriaPropTypes.js
deleted file mode 100644
index 1cfa831b711..00000000000
--- a/packages/react/src/prop-types/AriaPropTypes.js
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 isRequiredOneOf from './isRequiredOneOf';
-
-// DEPRECATED. Use `packages/react/src/internal/vendor/carbon-components-react/prop-types/AriaPropTypes.js` instead
-export const AriaLabelPropType = isRequiredOneOf({
-  'aria-label': PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-});
diff --git a/packages/react/src/prop-types/isRequiredOneOf.js b/packages/react/src/prop-types/isRequiredOneOf.js
deleted file mode 100644
index b669ab88690..00000000000
--- a/packages/react/src/prop-types/isRequiredOneOf.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * @param {object<string, Function>} propTypes The list of type checkers, keyed by prop names.
- * @returns {object<string, Function>}
- *   The new prop type checkers that checks if one of the given props exist,
- *   in addition to the original type checkings.
- */
-// DEPRECATED. Use `packages/react/src/internal/vendor/carbon-components-react/prop-types/isRequiredOneOf.js` instead
-export default function isRequiredOneOf(propTypes) {
-  const names = Object.keys(propTypes);
-  const checker =
-    (propType) =>
-    (props, propName, componentName, ...rest) => {
-      if (
-        process.env.NODE_ENV !== 'production' &&
-        names.every((name) => typeof props[name] === 'undefined')
-      ) {
-        return new Error(
-          `${componentName} requires one of the following props: ${names.join(
-            ', '
-          )}`
-        );
-      }
-      return propType(props, propName, componentName, ...rest);
-    };
-  return names.reduce(
-    (o, name) => ({
-      ...o,
-      [name]: checker(propTypes[name]),
-    }),
-    {}
-  );
-}
diff --git a/packages/react/ssr-tests/loads.js b/packages/react/ssr-tests/loads.js
deleted file mode 100644
index 1782a38242f..00000000000
--- a/packages/react/ssr-tests/loads.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// Simple test to ensure the components can at least be loaded in Node.js
-// Note: this test is *not* run by Jest because Jest's polyfills mask some errors
-
-'use strict';
-
-var assert = require('assert');
-var carbonComponentsReact = require('../lib');
-assert(carbonComponentsReact);
-console.log('server-side-rendering load test passed'); // eslint-disable-line no-console
diff --git a/packages/react/tests/a11y/karma-setup-context.js b/packages/react/tests/a11y/karma-setup-context.js
deleted file mode 100644
index 5a6345128b9..00000000000
--- a/packages/react/tests/a11y/karma-setup-context.js
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * Copyright IBM Corp. 2020
- *
- * 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 style from '../../../styles/scss/ibm-dotcom-styles.scss';
-
-(() => {
-  const contextHtml = `<style id="offleft-style" type="text/css">
-    .offleft {
-      position: absolute;
-      top: 0;
-      left: -10000px;
-      width: 1px;
-      height: 1px;
-      overflow: hidden;
-    }
-
-    ${style}
-  </style>
-  <div role="main">
-    <a class="offleft" href="#maincontent">Skip to main content</a>
-    <a name="maincontent"></a>
-    <div id="html-fragment-container"></div>
-    <form>
-      <fieldset data-invalid class="bx--form__fieldset">
-        <legend class="bx--form__legend">Dummy legend for g497</legend>
-        <div id="form-html-fragment-container"></div>
-      </fieldset>
-      <button class="bx--btn" type="submit">Submit</button><!-- Dummy submit button for g324 -->
-    </form>
-  </div>`;
-
-  document.title = 'Karma runner context';
-  document.documentElement.setAttribute('lang', 'en');
-  document.body.insertAdjacentHTML('afterBegin', contextHtml);
-})();
diff --git a/packages/react/tests/a11y/karma-test-shim.js b/packages/react/tests/a11y/karma-test-shim.js
deleted file mode 100644
index c46459d123b..00000000000
--- a/packages/react/tests/a11y/karma-test-shim.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { default: merge } = require('lodash-es/merge');
-const React = require('react');
-const ReactDOM = require('react-dom');
-
-const specContext = require.context(
-  '../../src',
-  true,
-  process.env.AAT_STORIES_REGEXP // To be replaced by a Babel plugin
-);
-
-const storyModules = specContext.keys().map(specContext);
-
-describe('Test a11y compliance', function () {
-  const container = document.getElementById('html-fragment-container');
-
-  storyModules
-    .filter(
-      (storyModule) =>
-        !storyModule.default?.parameters?.['karma-accessibility-checker']
-          ?.disabled
-    )
-    .forEach((storyModule) => {
-      const { title: groupTitle } = storyModule.default ?? {};
-
-      Object.keys(storyModule)
-        .filter((name) => {
-          const Story = storyModule[name];
-          return (
-            typeof Story === 'function' &&
-            !Story.story?.parameters?.['karma-accessibility-checker']?.disabled
-          );
-        })
-        .forEach((name) => {
-          const Story = storyModule[name];
-          const { parameters, title = name } = Story.story ?? {};
-          const propsSet = merge(
-            {},
-            storyModule.default?.parameters?.propsSet,
-            parameters?.propsSet
-          );
-
-          const keys = Object.keys(propsSet);
-          if (keys.length > 0) {
-            keys.forEach((itemTitle) => {
-              const combinedTitle =
-                itemTitle === 'default'
-                  ? `${groupTitle}|${title}`
-                  : `${groupTitle}|${title}|${itemTitle}`;
-              it(`Should have a11y-compliant ${combinedTitle}`, async function () {
-                ReactDOM.render(
-                  <Story parameters={{ props: propsSet[itemTitle] }} />,
-                  container
-                );
-                await expectAsync(container).toBeACheckerCompliant();
-              }, 30000);
-            });
-          } else {
-            it(`Should have a11y-compliant ${groupTitle}|${title}`, async function () {
-              ReactDOM.render(<Story />, container);
-              await expectAsync(container).toBeACheckerCompliant();
-            }, 30000);
-          }
-        });
-    });
-
-  afterEach(function () {
-    ReactDOM.render(undefined, container);
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/.percy.json b/packages/react/tests/e2e-storybook/.percy.json
deleted file mode 100644
index 6bed27c5f3a..00000000000
--- a/packages/react/tests/e2e-storybook/.percy.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "version": 2,
-  "snapshot": {
-    "widths": [
-      375,
-      1280
-    ]
-  }
-}
diff --git a/packages/react/tests/e2e-storybook/browserstack.json b/packages/react/tests/e2e-storybook/browserstack.json
deleted file mode 100644
index 0b5c1489673..00000000000
--- a/packages/react/tests/e2e-storybook/browserstack.json
+++ /dev/null
@@ -1,53 +0,0 @@
-{
-  "browsers": [
-    {
-      "browser": "chrome",
-      "os": "Windows 10",
-      "versions": ["latest"]
-    },
-    {
-      "browser": "firefox",
-      "os": "Windows 10",
-      "versions": ["latest"]
-    },
-    {
-      "browser": "edge",
-      "os": "Windows 10",
-      "versions": ["latest"]
-    },
-    {
-      "browser": "chrome",
-      "os": "OS X Big Sur",
-      "versions": ["latest"]
-    },
-    {
-      "browser": "firefox",
-      "os": "OS X Big Sur",
-      "versions": ["latest"]
-    }
-  ],
-  "run_settings": {
-    "cypress_config_file": "tests/e2e-storybook/cypress-canary.json",
-    "project_name": "Carbon for IBM.com",
-    "build_name": "React Storybook",
-    "exclude": ["cypress/integration/StorybookDocs/*.e2e.js"],
-    "parallels": "5",
-    "npm_dependencies": {
-      "@percy/cypress": "^3.1.0",
-      "@percy/dom": "^1.0.0-beta.55",
-      "cypress-wait-until": "^1.7.2",
-      "ws": "^8.4.0",
-      "axe-core": "^4.4.1",
-      "cypress-axe": "^0.14.0"
-    },
-    "package_config_options": {},
-    "headless": true
-  },
-  "connection_settings": {
-    "local": false,
-    "local_identifier": null,
-    "local_mode": null,
-    "local_config_file": null
-  },
-  "disable_usage_reporting": false
-}
diff --git a/packages/react/tests/e2e-storybook/cypress-canary.json b/packages/react/tests/e2e-storybook/cypress-canary.json
deleted file mode 100644
index f5f679b08a6..00000000000
--- a/packages/react/tests/e2e-storybook/cypress-canary.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "baseUrl": "https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/react",
-  "browser": "chrome",
-  "headless": true,
-  "includeShadowDom": true,
-  "testFiles": "**/*.e2e.js",
-  "pageLoadTimeout": 90000,
-  "defaultCommandTimeout": 90000,
-  "retries": {
-    "runMode": 2,
-    "openMode": 0
-  },
-  "numTestsKeptInMemory": 0
-}
diff --git a/packages/react/tests/e2e-storybook/cypress-local.json b/packages/react/tests/e2e-storybook/cypress-local.json
deleted file mode 100644
index 6ec8129e2f3..00000000000
--- a/packages/react/tests/e2e-storybook/cypress-local.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "baseUrl": "http://localhost:9000",
-  "browser": "chrome",
-  "headless": true,
-  "fixturesFolder": "tests/e2e-storybook/cypress/fixtures",
-  "fileServerFolder": "storybook-static",
-  "screenshotsFolder": "tests/e2e-storybook/cypress/screenshots",
-  "videosFolder": "tests/e2e-storybook/cypress/videos",
-  "integrationFolder": "tests/e2e-storybook/cypress/integration",
-  "supportFile": "tests/e2e-storybook/cypress/support/index.js",
-  "pluginsFile": "tests/e2e-storybook/cypress/plugins/index.js",
-  "includeShadowDom": true,
-  "testFiles": "**/*.e2e.js",
-  "pageLoadTimeout": 90000,
-  "defaultCommandTimeout": 90000,
-  "retries": {
-    "runMode": 2,
-    "openMode": 0
-  },
-  "numTestsKeptInMemory": 0
-}
diff --git a/packages/react/tests/e2e-storybook/cypress-next.json b/packages/react/tests/e2e-storybook/cypress-next.json
deleted file mode 100644
index 28ea3802aaa..00000000000
--- a/packages/react/tests/e2e-storybook/cypress-next.json
+++ /dev/null
@@ -1,14 +0,0 @@
-{
-  "baseUrl": "https://carbon-design-system.github.io/carbon-for-ibm-dotcom/next/react",
-  "browser": "chrome",
-  "headless": true,
-  "includeShadowDom": true,
-  "testFiles": "**/*.e2e.js",
-  "pageLoadTimeout": 90000,
-  "defaultCommandTimeout": 90000,
-  "retries": {
-    "runMode": 2,
-    "openMode": 0
-  },
-  "numTestsKeptInMemory": 0
-}
diff --git a/packages/react/tests/e2e-storybook/cypress.json b/packages/react/tests/e2e-storybook/cypress.json
deleted file mode 100644
index 781721057a4..00000000000
--- a/packages/react/tests/e2e-storybook/cypress.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "baseUrl": "http://localhost:8082",
-  "projectId": "carbon-for-ibmdotcom-react",
-  "browser": "chrome",
-  "headless": true,
-  "fixturesFolder": "tests/e2e-storybook/cypress/fixtures",
-  "fileServerFolder": "storybook-static",
-  "screenshotsFolder": "tests/e2e-storybook/cypress/screenshots",
-  "videosFolder": "tests/e2e-storybook/cypress/videos",
-  "integrationFolder": "tests/e2e-storybook/cypress/integration",
-  "supportFile": "tests/e2e-storybook/cypress/support/index.js",
-  "pluginsFile": "tests/e2e-storybook/cypress/plugins/index.js",
-  "testFiles": "**/*.e2e.js",
-  "screenshotOnRunFailure": false,
-  "video": false,
-  "pageLoadTimeout": 90000,
-  "defaultCommandTimeout": 90000,
-  "retries": {
-    "runMode": 2,
-    "openMode": 0
-  },
-  "numTestsKeptInMemory": 0
-}
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/countrylist.json b/packages/react/tests/e2e-storybook/cypress/fixtures/countrylist.json
deleted file mode 100644
index b89e14d7399..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/countrylist.json
+++ /dev/null
@@ -1 +0,0 @@
-{"regionList":[{"name":"Americas","key":"am","countryList":[{"name":"Anguilla","locale":[["en-ai","English"]]},{"name":"Antigua and Barbuda","locale":[["en-ag","English"]]},{"name":"Argentina","locale":[["es-ar","Spanish (Español)"]]},{"name":"Aruba","locale":[["en-aw","English"]]},{"name":"Bahamas","locale":[["en-bs","English"]]},{"name":"Barbados","locale":[["en-bb","English"]]},{"name":"Bermuda","locale":[["en-bm","English"]]},{"name":"Bolivia","locale":[["es-bo","Spanish (Español)"]]},{"name":"Brazil (Brasil)","locale":[["pt-br","Portuguese (Português)"]]},{"name":"Canada","locale":[["en-ca","English"]]},{"name":"Canada","locale":[["fr-ca","French (Français)"]]},{"name":"Cayman Islands","locale":[["en-ky","English"]]},{"name":"Chile","locale":[["es-cl","Spanish (Español)"]]},{"name":"Colombia","locale":[["es-co","Spanish (Español)"]]},{"name":"Costa Rica","locale":[["es-cr","Spanish (Español)"]]},{"name":"Curacao","locale":[["en-cw","English"]]},{"name":"Dominica","locale":[["en-dm","English"]]},{"name":"Ecuador","locale":[["es-ec","Spanish (Español)"]]},{"name":"Grenada","locale":[["en-gd","English"]]},{"name":"Guyana","locale":[["en-gy","English"]]},{"name":"Jamaica","locale":[["en-jm","English"]]},{"name":"Mexico","locale":[["es-mx","Spanish (Español)"]]},{"name":"Montserrat","locale":[["en-ms","English"]]},{"name":"Paraguay","locale":[["es-py","Spanish (Español)"]]},{"name":"Peru","locale":[["es-pe","Spanish (Español)"]]},{"name":"Saint Kitts and Nevis","locale":[["en-kn","English"]]},{"name":"Saint Lucia","locale":[["en-lc","English"]]},{"name":"Saint Vincent and the Grenadines","locale":[["en-vc","English"]]},{"name":"Suriname","locale":[["en-sr","English"]]},{"name":"Trinidad and Tobago","locale":[["en-tt","English"]]},{"name":"Turks and Caicos Islands","locale":[["en-tc","English"]]},{"name":"United States","locale":[["en-us","English"]]},{"name":"Uruguay","locale":[["es-uy","Spanish (Español)"]]},{"name":"Venezuela","locale":[["es-ve","Spanish (Español)"]]},{"name":"Virgin Islands, British","locale":[["en-vg","English"]]}]},{"name":"Asia Pacific","key":"ap","countryList":[{"name":"Australia","locale":[["en-au","English"]]},{"name":"Bangladesh","locale":[["en-bd","English"]]},{"name":"Brunei Darussalam","locale":[["en-bn","English"]]},{"name":"Cambodia","locale":[["en-kh","English"]]},{"name":"China (中国)","locale":[["zh-cn","Chinese (简体中文)"]]},{"name":"Hong Kong S.A.R. of China","locale":[["en-hk","English"]]},{"name":"India","locale":[["en-in","English"]]},{"name":"Indonesia","locale":[["en-id","English"]]},{"name":"Japan (日本)","locale":[["ja-jp","Japanese (日本語)"]]},{"name":"Korea, Republic of (대한민국)","locale":[["ko-kr","Korean (한국어)"]]},{"name":"Malaysia","locale":[["en-my","English"]]},{"name":"Nepal","locale":[["en-np","English"]]},{"name":"New Zealand","locale":[["en-nz","English"]]},{"name":"Philippines","locale":[["en-ph","English"]]},{"name":"Singapore","locale":[["en-sg","English"]]},{"name":"Sri Lanka","locale":[["en-lk","English"]]},{"name":"Taiwan (台灣)","locale":[["zh-tw","Chinese (繁體中文)"]]},{"name":"Thailand","locale":[["en-th","English"]]},{"name":"Vietnam","locale":[["en-vn","English"]]}]},{"name":"Europe","key":"eu","countryList":[{"name":"Austria (Österreich)","locale":[["de-at","German (Deutsch)"]]},{"name":"Belgium/Luxembourg","locale":[["en-be","English"]]},{"name":"Bulgaria","locale":[["en-bg","English"]]},{"name":"Croatia","locale":[["en-hr","English"]]},{"name":"Cyprus","locale":[["en-cy","English"]]},{"name":"Czech Republic","locale":[["en-cz","English"]]},{"name":"Denmark","locale":[["en-dk","English"]]},{"name":"Estonia","locale":[["en-ee","English"]]},{"name":"Finland","locale":[["en-fi","English"]]},{"name":"France","locale":[["fr-fr","French (Français)"]]},{"name":"Germany (Deutschland)","locale":[["de-de","German (Deutsch)"]]},{"name":"Greece","locale":[["en-gr","English"]]},{"name":"Hungary","locale":[["en-hu","English"]]},{"name":"Ireland","locale":[["en-ie","English"]]},{"name":"Italy (Italia)","locale":[["it-it","Italian (Italiano)"]]},{"name":"Kazakhstan","locale":[["en-kz","English"]]},{"name":"Latvia","locale":[["en-lv","English"]]},{"name":"Lithuania","locale":[["en-lt","English"]]},{"name":"Netherlands","locale":[["en-nl","English"]]},{"name":"Norway","locale":[["en-no","English"]]},{"name":"Poland (Polska)","locale":[["pl-pl","Polish (Polskie)"]]},{"name":"Portugal","locale":[["en-pt","English"]]},{"name":"Romania","locale":[["en-ro","English"]]},{"name":"Russian (Россия)","locale":[["ru-ru","Russian (русский)"]]},{"name":"Serbia","locale":[["en-rs","English"]]},{"name":"Slovakia","locale":[["en-sk","English"]]},{"name":"Slovenia","locale":[["en-si","English"]]},{"name":"Spain (España)","locale":[["es-es","Spanish (Español)"]]},{"name":"Sweden","locale":[["en-se","English"]]},{"name":"Switzerland (Suisse)","locale":[["fr-ch","French (Français)"]]},{"name":"Switzerland (Schweiz)","locale":[["de-ch","German (Deutsch)"]]},{"name":"Turkey (Türkiye)","locale":[["tr-tr","Turkish (Türk)"]]},{"name":"Ukraine","locale":[["en-ua","English"]]},{"name":"United Kingdom","locale":[["en-uk","English"]]},{"name":"United Kingdom","locale":[["en-gb","English"]]},{"name":"Uzbekistan","locale":[["en-uz","English"]]}]},{"name":"Middle East and Africa","key":"mea","countryList":[{"name":"Afghanistan","locale":[["en-af","English"]]},{"name":"Algeria (Algérie)","locale":[["fr-dz","French (Français)"]]},{"name":"Angola","locale":[["pt-ao","Portuguese (Português)"]]},{"name":"Bahrain","locale":[["en-bh","English"]]},{"name":"Botswana","locale":[["en-bw","English"]]},{"name":"Burkina Faso","locale":[["fr-bf","French (Français)"]]},{"name":"Cameroon (Cameroun)","locale":[["fr-cm","French (Français)"]]},{"name":"Chad (Tchad)","locale":[["fr-td","French (Français)"]]},{"name":"Congo","locale":[["fr-cg","French (Français)"]]},{"name":"Congo, Democratic Republic of (République Démocratique du Congo)","locale":[["fr-cd","French (Français)"]]},{"name":"Egypt","locale":[["en-eg","English"]]},{"name":"Ethiopia","locale":[["en-et","English"]]},{"name":"Gabon","locale":[["fr-ga","French (Français)"]]},{"name":"Ghana","locale":[["en-gh","English"]]},{"name":"Iraq","locale":[["en-iq","English"]]},{"name":"Israel","locale":[["en-il","English"]]},{"name":"Ivory Coast (Côte d'Ivoire)","locale":[["fr-ci","French (Français)"]]},{"name":"Jordan","locale":[["en-jo","English"]]},{"name":"Kenya","locale":[["en-ke","English"]]},{"name":"Kuwait","locale":[["en-kw","English"]]},{"name":"Lebanon","locale":[["en-lb","English"]]},{"name":"Libya","locale":[["en-ly","English"]]},{"name":"Madagascar","locale":[["fr-mg","French (Français)"]]},{"name":"Malawi","locale":[["en-mw","English"]]},{"name":"Mauritius (Maurice)","locale":[["fr-mu","French (Français)"]]},{"name":"Morocco (Maroc)","locale":[["fr-ma","French (Français)"]]},{"name":"Mozambique","locale":[["pt-mz","Portuguese (Português)"]]},{"name":"Namibia","locale":[["en-na","English"]]},{"name":"Niger","locale":[["fr-ne","French (Français)"]]},{"name":"Nigeria","locale":[["en-ng","English"]]},{"name":"Oman","locale":[["en-om","English"]]},{"name":"Pakistan","locale":[["en-pk","English"]]},{"name":"Qatar","locale":[["en-qa","English"]]},{"name":"Saudi Arabia","locale":[["en-sa","English"]]},{"name":"Saudi Arabia (المملكة العربية السعودية)","locale":[["ar-sa","Arabic (عربى)"]]},{"name":"Senegal (Sénégal)","locale":[["fr-sn","French (Français)"]]},{"name":"Seychelles","locale":[["fr-sc","French (Français)"]]},{"name":"Sierra Leone","locale":[["en-sl","English"]]},{"name":"South Africa","locale":[["en-za","English"]]},{"name":"Tanzania, United Republic of","locale":[["en-tz","English"]]},{"name":"Tunisia (Tunisie)","locale":[["fr-tn","French (Français)"]]},{"name":"Uganda","locale":[["en-ug","English"]]},{"name":"United Arab Emirates","locale":[["en-ae","English"]]},{"name":"United Arab Emirates (الإمارات العربية المتحدة)","locale":[["ar-ae","Arabic (عربى)"]]},{"name":"Yemen","locale":[["en-ye","English"]]},{"name":"Zambia","locale":[["en-zm","English"]]},{"name":"Zimbabwe","locale":[["en-zw","English"]]}]}],"localeModal":{"headerTitle":"Select geographic area","modalClose":"Close modal","searchLabel":"Search by location or language. Note: Location/Language will be dynamically updated as you provide the input","searchClearText":"Clear search input","searchPlaceholder":"Search by location or language","availabilityText":"This page is available in the following locations and languages","unavailabilityText":"This page is unavailable in your preferred location or language"},"timestamp":1635277797890}
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/ibm-common.js b/packages/react/tests/e2e-storybook/cypress/fixtures/ibm-common.js
deleted file mode 100644
index 5eca5702f57..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/ibm-common.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-module.exports = {}
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/kaltura.json b/packages/react/tests/e2e-storybook/cypress/fixtures/kaltura.json
deleted file mode 100644
index 130fd8b1276..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/kaltura.json
+++ /dev/null
@@ -1,56 +0,0 @@
-[
-  {
-    "partnerId": 1773841,
-    "ks": "djJ8MTc3Mzg0MXzXmO_c8-odVPKLvG2ra3a6YVZy9BYsTPfiybim2nodeZY4xc7JCZFb5i-02ug6JWiAGMkzPPH5JLlQfIHiZtkZF7YWUOylPjGtqmp2mibEYw==",
-    "userId": 0,
-    "objectType": "KalturaStartWidgetSessionResponse"
-  },
-  {
-    "mediaType": 1,
-    "conversionQuality": 5897601,
-    "sourceType": "1",
-    "dataUrl": "https:\/\/cdnapisec.kaltura.com\/p\/1773841\/sp\/177384100\/playManifest\/entryId\/1_9h94wo6b\/format\/url\/protocol\/https",
-    "flavorParamsIds": "0,487041,487051,487061,487071,487081,487091",
-    "plays": 6259,
-    "views": 9838,
-    "lastPlayedAt": 1638586800,
-    "width": 1080,
-    "height": 1080,
-    "duration": 18,
-    "msDuration": 18074,
-    "id": "1_9h94wo6b",
-    "name": "Cypress Test Video - 1:1",
-    "description": "<div>Official Production Test Video for 1:1 Aspect-Ratio with unrestricted domain access.<br><\/div>",
-    "partnerId": 1773841,
-    "userId": "310002SA8H",
-    "creatorId": "310002SA8H",
-    "tags": "test, 1:1, video, ctas in production",
-    "status": 2,
-    "moderationStatus": 6,
-    "moderationCount": 0,
-    "type": 1,
-    "createdAt": 1595621798,
-    "updatedAt": 1625053823,
-    "rank": 0,
-    "totalRank": 0,
-    "votes": 0,
-    "downloadUrl": "https:\/\/cdnapisec.kaltura.com\/p\/1773841\/sp\/177384100\/playManifest\/entryId\/1_9h94wo6b\/format\/download\/protocol\/https\/flavorParamIds\/0",
-    "searchText": "_PAR_ONLY_ _1773841_ _MEDIA_TYPE_1|  Test Video - 1:1 test, 1:1, video, ctas in production <div>Oficial Production Test Video for 1:1 Aspect-Ratio with unrestricted domain access.<br><\/div> ",
-    "licenseType": -1,
-    "version": 0,
-    "thumbnailUrl": "https:\/\/cfvod.kaltura.com\/p\/1773841\/sp\/177384100\/thumbnail\/entry_id\/1_9h94wo6b\/version\/100021",
-    "accessControlId": 2709212,
-    "replacementStatus": 0,
-    "partnerSortValue": 0,
-    "conversionProfileId": 5897601,
-    "rootEntryId": "1_9h94wo6b",
-    "operationAttributes": [],
-    "entitledUsersEdit": "",
-    "entitledUsersPublish": "",
-    "entitledUsersView": "",
-    "capabilities": "",
-    "displayInSearch": 1,
-    "blockAutoTranscript": false,
-    "objectType": "KalturaMediaEntry"
-  }
-]
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/status.json b/packages/react/tests/e2e-storybook/cypress/fixtures/status.json
deleted file mode 100644
index b8539094e87..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/status.json
+++ /dev/null
@@ -1 +0,0 @@
-{"user":"Unauthenticated"}
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/translation-raw.json b/packages/react/tests/e2e-storybook/cypress/fixtures/translation-raw.json
deleted file mode 100644
index 579696137dd..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/translation-raw.json
+++ /dev/null
@@ -1 +0,0 @@
-{"mastheadNav":{"links":[{"title":"Products & Solutions","titleEnglish":"Products & Solutions","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"The essentials","menuItems":[{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Hybrid Cloud","headingUrl":"","description":"Blend cloud and on-premises resources for flexibility and balance","quickLinks":{"title":"","links":[{"title":"What is Hybrid Cloud?","titleEnglish":"What is Hybrid Cloud?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"},{"title":"Hybrid Cloud solutions","titleEnglish":"Hybrid Cloud solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Artificial intelligence","headingUrl":"","description":"Unlock the value in your organization with Watson","quickLinks":{"title":"","links":[{"title":"What is AI?","titleEnglish":"What is AI?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?mhsrc=ibmsearch_a&mhq=what%20is%20AI%3F"},{"title":"AI solutions","titleEnglish":"AI solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/ai?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Top products & platforms","titleEnglish":"Top products & platforms","url":"https://www.ibm.com/products?lnk=hpmps_bupr","megapanelContent":{"headingTitle":"Top products & platforms","headingUrl":"https://www.ibm.com/products?lnk=hpmps_bupr","description":"","quickLinks":{"title":"","links":[{"title":"Aspera","titleEnglish":"Aspera","url":"https://www.ibm.com/products/aspera?lnk=hpmps_bupr"},{"title":"Cognos","titleEnglish":"Cognos","url":"https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"},{"title":"Db2","titleEnglish":"Db2","url":"https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"},{"title":"IBM Cloud","titleEnglish":"IBM Cloud","url":"https://www.ibm.com/cloud?lnk=hpmps_bupr"},{"title":"IBM Cloud Paks","titleEnglish":"IBM Cloud Paks","url":"https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"},{"title":"IBM Sterling","titleEnglish":"IBM Sterling","url":"https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"},{"title":"IBM Storage","titleEnglish":"IBM Storage","url":"https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"},{"title":"IBM Z","titleEnglish":"IBM Z","url":"https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"},{"title":"Red Hat OpenShift","titleEnglish":"Red Hat OpenShift","url":"https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"},{"title":"SPSS Statistics","titleEnglish":"SPSS Statistics","url":"https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"},{"title":"Watson","titleEnglish":"Watson","url":"https://www.ibm.com/watson?lnk=hpmps_bupr"},{"title":"WebSphere","titleEnglish":"WebSphere","url":"https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Solutions","titleEnglish":"Solutions","url":"","megapanelContent":{"headingTitle":"Solutions","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/ai?lnk=hpmps_buai"},{"title":"Automation","titleEnglish":"Business automation","url":"https://www.ibm.com/cloud/automation?lnk=hpmps_buau"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=hpmps_bubc"},{"title":"Business operations","titleEnglish":"Business operations","url":"https://www.ibm.com/business-operations?lnk=hpmps_buop"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=hpmps_bucl"},{"title":"Data & Analytics","titleEnglish":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=hpmps_buda"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"},{"title":"IT infrastructure","titleEnglish":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"},{"title":"Security","titleEnglish":"Security","url":"https://www.ibm.com/security?lnk=hpmps_buse"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=hpmps_busc"},{"title":"COVID-19 solutions","titleEnglish":"COVID-19 solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Industries","titleEnglish":"Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin","megapanelContent":{"headingTitle":"Industries","headingUrl":"https://www.ibm.com/industries?lnk=hpmps_buin","description":"","quickLinks":{"title":"","links":[{"title":"Aerospace & defense","titleEnglish":"Aerospace & defense","url":"https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"},{"title":"Automotive","titleEnglish":"Automotive","url":"https://www.ibm.com/industries/automotive?lnk=hpmps_buin"},{"title":"Banking & financial markets","titleEnglish":"Banking & financial markets","url":"https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"},{"title":"Education","titleEnglish":"Education","url":"https://www.ibm.com/industries/education?lnk=hpmps_buin"},{"title":"Electronics","titleEnglish":"Electronics","url":"https://www.ibm.com/industries/electronics?lnk=hpmps_buin"},{"title":"Energy & utilities","titleEnglish":"Energy & utilities","url":"https://www.ibm.com/industries/energy?lnk=hpmps_buin"},{"title":"Government","titleEnglish":"Government","url":"https://www.ibm.com/industries/government?lnk=hpmps_buin"},{"title":"Healthcare","titleEnglish":"Healthcare","url":"https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"},{"title":"Insurance","titleEnglish":"Insurance","url":"https://www.ibm.com/industries/insurance?lnk=hpmps_buin"},{"title":"Life sciences","titleEnglish":"Life sciences","url":"https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"},{"title":"View all Industries","titleEnglish":"View all Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin#2546397"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"View all products","titleEnglish":"View all products","url":"https://www.ibm.com/products?lnk=hpmps_buall","megaPanelViewAll":true}]}]},{"title":"Consulting & Services","titleEnglish":"Consulting & Services","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"IBM Consulting","titleEnglish":"IBM Consulting","url":"https://www.ibm.com/consulting?lnk=hpmco&lnk2=link","megapanelContent":{"headingTitle":"IBM Consulting","headingUrl":"https://www.ibm.com/consulting?lnk=hpmco&lnk2=link","description":"","quickLinks":{"title":"","links":[{"title":"Strategy Consulting","titleEnglish":"Strategy Consulting","url":"https://www.ibm.com/consulting/strategy?lnk=hpmco_bust&lnk2=learn"},{"title":"Experience Consulting","titleEnglish":"Experience Consulting","url":"https://www.ibm.com/consulting/experience?lnk=hpmco_buex&lnk2=learn"},{"title":"Operations Consulting","titleEnglish":"Operations Consulting","url":"https://www.ibm.com/consulting/operations?lnk=hpmco_buop&lnk2=learn"},{"title":"Technology Consulting","titleEnglish":"Technology Consulting","url":"https://www.ibm.com/consulting/technology?lnk=hpmco_bute&lnk2=learn"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Business consulting services","titleEnglish":"Business process services","url":"https://www.ibm.com/services/business?lnk=hpmsc_bups","megapanelContent":{"headingTitle":"Business consulting services","headingUrl":"https://www.ibm.com/services/business?lnk=hpmsc_bups","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence services","titleEnglish":"Artificial intelligence services","url":"https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"},{"title":"Big data & data platform","titleEnglish":"Big data & data platform","url":"https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"},{"title":"Business process outsourcing","titleEnglish":"Business process outsourcing","url":"https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"},{"title":"Edge consulting","titleEnglish":"Edge consulting","url":"https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"},{"title":"Finance consulting and outsourcing services","titleEnglish":"Finance transformation","url":"https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"},{"title":"Operations consulting","titleEnglish":"IoT consulting","url":"https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"},{"title":"Procurement consulting and managed services","titleEnglish":"Procurement & strategic sourcing","url":"https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"},{"title":"Risk management consulting services","titleEnglish":"Risk consulting & fraud management","url":"https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"},{"title":"Supply chain consulting services","titleEnglish":"Supply chain","url":"https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Design & business strategy","titleEnglish":"Design & business strategy","url":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs","megapanelContent":{"headingTitle":"Design & business strategy","headingUrl":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs","description":"","quickLinks":{"title":"","links":[{"title":"Customer experience consulting","titleEnglish":"Experience strategy","url":"https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"},{"title":"E-commerce consulting","titleEnglish":"Digital strategy","url":"https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"},{"title":"Marketing consulting","titleEnglish":"Marketing platforms","url":"https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"},{"title":"Salesforce consulting","titleEnglish":"Salesforce consulting","url":"https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png","linkTitle":"","linkUrl":""}}},{"title":"Hybrid multicloud services","titleEnglish":"Hybrid multicloud services","url":"https://www.ibm.com/cloud/services?lnk=hpmsc_bups"},{"title":"Talent management services","titleEnglish":"Talent & transformation","url":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","megapanelContent":{"headingTitle":"Talent management services","headingUrl":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","description":"","quickLinks":{"title":"","links":[{"title":"HR transformation services","titleEnglish":"HR transformation","url":"https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"},{"title":"Talent acquisition services","titleEnglish":"Talent acquisition","url":"https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"},{"title":"Talent development services","titleEnglish":"Talent development","url":"https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png","linkTitle":"","linkUrl":""}}},{"title":"Application services","titleEnglish":"Application services","url":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","megapanelContent":{"headingTitle":"Application services","headingUrl":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","description":"","quickLinks":{"title":"","links":[{"title":"Application Modernization","titleEnglish":"Application Modernization","url":"https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"},{"title":"Enterprise applications strategy","titleEnglish":"Enterprise applications strategy","url":"https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Garage","titleEnglish":"IBM Garages","url":"https://www.ibm.com/garage?lnk=hpmsc_buas"},{"title":"Security services","titleEnglish":"Security services","url":"https://www.ibm.com/security/services?lnk=hpmsc_buse","megapanelContent":{"headingTitle":"Security services","headingUrl":"https://www.ibm.com/security/services?lnk=hpmsc_buse","description":"","quickLinks":{"title":"","links":[{"title":"Application security","titleEnglish":"Application security","url":"https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"},{"title":"Cloud security","titleEnglish":"Cloud security","url":"https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"},{"title":"Data security","titleEnglish":"Data security","url":"https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"},{"title":"Identity & access management","titleEnglish":"Identity & access management","url":"https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"},{"title":"Managed security","titleEnglish":"Managed security","url":"https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"},{"title":"Security governance","titleEnglish":"Security governance","url":"https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png","linkTitle":"","linkUrl":""}}},{"title":"Technology Support Services","titleEnglish":"Services for tech support","url":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","megapanelContent":{"headingTitle":"Technology Support Services","headingUrl":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","description":"","quickLinks":{"title":"","links":[{"title":"Open source","titleEnglish":"Open source","url":"https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"},{"title":"Third party & multivendor","titleEnglish":"Third party & multivendor","url":"https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"},{"title":"IBM warranties and maintenance","titleEnglish":"IBM warranties and maintenance","url":"https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png","linkTitle":"","linkUrl":""}}},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/financing?lnk=hpmsc_bufi"},{"title":"View all services","titleEnglish":"View all services","url":"https://www.ibm.com/services?lnk=hpmsc_buall","megaPanelViewAll":true}]}]},{"title":"Learn & Support","titleEnglish":"Learn & Support","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"What is...","titleEnglish":"What is...","url":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","megapanelContent":{"headingTitle":"What is...","headingUrl":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/topics/automation?lnk=hpmls_buwi"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"},{"title":"Business intelligence","titleEnglish":"Business intelligence","url":"https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"},{"title":"Chatbots","titleEnglish":"Chatbots","url":"https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"},{"title":"Containerization","titleEnglish":"Containerization","url":"https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"},{"title":"Cybersecurity","titleEnglish":"Cybersecurity","url":"https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"},{"title":"Databases","titleEnglish":"Databases","url":"https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"},{"title":"DevOps","titleEnglish":"DevOps","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"},{"title":"Kubernetes","titleEnglish":"Kubernetes","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png","linkTitle":"","linkUrl":""}}},{"title":"Training","titleEnglish":"Training","url":"https://www.ibm.com/training/?lnk=hpmls_butr","megapanelContent":{"headingTitle":"Training","headingUrl":"https://www.ibm.com/training/?lnk=hpmls_butr","description":"","quickLinks":{"title":"","links":[{"title":"Courses","titleEnglish":"Courses","url":"https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"},{"title":"Learning journeys","titleEnglish":"Learning journeys","url":"https://www.ibm.com/training/journeys?lnk=hpmls_butr"},{"title":"Professional certifications","titleEnglish":"Professional certifications","url":"https://www.ibm.com/certify?lnk=hpmls_butr"},{"title":"Digital learning subscriptions","titleEnglish":"Digital learning subscriptions","url":"https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png","linkTitle":"","linkUrl":""}}},{"title":"Developer education","titleEnglish":"Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude","megapanelContent":{"headingTitle":"Developer education","headingUrl":"https://developer.ibm.com/?lnk=hpmls_bude","description":"","quickLinks":{"title":"","links":[{"title":"Code patterns","titleEnglish":"Code patterns","url":"https://developer.ibm.com/patterns/?lnk=hpmls_bude"},{"title":"Developer community","titleEnglish":"Developer community","url":"https://developer.ibm.com/community/?lnk=hpmls_bude"},{"title":"Developer events","titleEnglish":"Developer events","url":"https://developer.ibm.com/events/?lnk=hpmls_bude"},{"title":"Open Source @ IBM","titleEnglish":"Open Source @ IBM","url":"https://ibm.com/opensource?lnk=hpmls_bude"},{"title":"Technical articles","titleEnglish":"Technical articles","url":"https://developer.ibm.com/articles?lnk=hpmls_bude"},{"title":"Tutorials","titleEnglish":"Tutorials","url":"https://developer.ibm.com/tutorials/?lnk=hpmls_bude"},{"title":"Videos","titleEnglish":"Videos","url":"https://developer.ibm.com/videos?lnk=hpmls_bude"},{"title":"View more Developer education","titleEnglish":"View more Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png","linkTitle":"","linkUrl":""}}},{"title":"Documentation","titleEnglish":"Documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc","megapanelContent":{"headingTitle":"Documentation","headingUrl":"https://www.ibm.com/docs/en?lnk=hpmls_budc","description":"","quickLinks":{"title":"","links":[{"title":"All product documentation","titleEnglish":"All product documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc"},{"title":"For products on IBM Cloud","titleEnglish":"For products on IBM Cloud","url":"https://cloud.ibm.com/docs?lnk=hpmls_budc"},{"title":"For use cases — IBM Redbooks","titleEnglish":"For use cases — IBM Redbooks","url":"https://www.redbooks.ibm.com/?lnk=hpmls_budc"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png","linkTitle":"","linkUrl":""}}},{"title":"Community","titleEnglish":"Community","url":"","megapanelContent":{"headingTitle":"Community","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"IBM Developer","titleEnglish":"IBM Developer","url":"https://developer.ibm.com/?lnk=hpmls_buco"},{"title":"IBM Community","titleEnglish":"IBM Community","url":"https://community.ibm.com/community/user/home?lnk=hpmls_buco"},{"title":"Support forums","titleEnglish":"Support forums","url":"https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Resources","titleEnglish":"Resources","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure","megapanelContent":{"headingTitle":"Resources","headingUrl":"https://www.ibm.com/blogs/?lnk=hpmls_bure","description":"","quickLinks":{"title":"","links":[{"title":"Blogs & thought leadership","titleEnglish":"Blogs & thought leadership","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure"},{"title":"Case studies & client stories","titleEnglish":"Case studies & client stories","url":"https://www.ibm.com/case-studies?lnk=hpmls_bure"},{"title":"Upcoming events & webinars","titleEnglish":"Upcoming events & webinars","url":"https://www.ibm.com/events?lnk=hpmls_bure"},{"title":"IBM Institute for Business Value","titleEnglish":"IBM Institute for Business Value","url":"https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png","linkTitle":"","linkUrl":""}}},{"title":"Support","titleEnglish":"Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu","megapanelContent":{"headingTitle":"Support","headingUrl":"https://www.ibm.com/mysupport?lnk=hpmls_busu","description":"","quickLinks":{"title":"","links":[{"title":"Download fixes, updates & drivers","titleEnglish":"Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"},{"title":"Download licensed software - Passport Advantage","titleEnglish":"Download licensed software - Passport Advantage","url":"https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"},{"title":"View your cases","titleEnglish":"View your cases","url":"https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"},{"title":"Open a case","titleEnglish":"Open a case","url":"https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"},{"title":"View available support plans","titleEnglish":"View available support plans","url":"https://www.ibm.com/support/offerings?lnk=hpmls_busu"},{"title":"View more on Support","titleEnglish":"View more on Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png","linkTitle":"","linkUrl":""}}},{"title":"Cloud platform support","titleEnglish":"Cloud platform support","url":"https://www.ibm.com/cloud/support?lnk=hpmls_bucl"}]}]},{"title":"Explore more","titleEnglish":"Explore more","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Partner with us","titleEnglish":"Partners","url":"https://www.ibm.com/partners?lnk=hpmex_bupa","megapanelContent":{"headingTitle":"Partner with us","headingUrl":"https://www.ibm.com/partners?lnk=hpmex_bupa","description":"","quickLinks":{"title":"","links":[{"title":"PartnerWorld","titleEnglish":"Partner with us — PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"},{"title":"Our strategic partnerships","titleEnglish":"Our strategic partnerships","url":"https://www.ibm.com/alliances?lnk=hpmex_bupa"},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Research","titleEnglish":"IBM Research","url":"https://www.research.ibm.com/?lnk=hpmex_bure","megapanelContent":{"headingTitle":"IBM Research","headingUrl":"https://www.research.ibm.com/?lnk=hpmex_bure","description":"","quickLinks":{"title":"","links":[{"title":"Research areas","titleEnglish":"Research areas","url":"https://www.research.ibm.com/?lnk=hpmex_bure"},{"title":"Researcher directory","titleEnglish":"Researcher directory","url":"https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"},{"title":"Patents","titleEnglish":"Patents","url":"https://www.research.ibm.com/patents/?lnk=hpmex_bure"},{"title":"Work with us","titleEnglish":"Work with us","url":"https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png","linkTitle":"","linkUrl":""}}},{"title":"About IBM","titleEnglish":"About IBM","url":"https://www.ibm.com/about?lnk=hpmex_buab","megapanelContent":{"headingTitle":"About IBM","headingUrl":"https://www.ibm.com/about?lnk=hpmex_buab","description":"","quickLinks":{"title":"","links":[{"title":"Annual report","titleEnglish":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=hpmex_buab"},{"title":"Career opportunities","titleEnglish":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=hpmex_buab"},{"title":"Corporate social responsibility","titleEnglish":"Corporate social responsibility","url":"https://www.ibm.org?lnk=hpmex_buab"},{"title":"Diversity & inclusion","titleEnglish":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"},{"title":"Investor relations","titleEnglish":"Investor relations","url":"https://www.ibm.com/investor/?lnk=hpmex_buab"},{"title":"News & announcements","titleEnglish":"News & announcements","url":"https://newsroom.ibm.com?lnk=hpmex_buab"},{"title":"Thought leadership","titleEnglish":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"},{"title":"Security, privacy & trust","titleEnglish":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=hpmex_buab"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png","linkTitle":"","linkUrl":""}}},{"title":"COVID-19","titleEnglish":"COVID-19","url":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","megapanelContent":{"headingTitle":"COVID-19","headingUrl":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","description":"","quickLinks":{"title":"","links":[{"title":"Business solutions","titleEnglish":"Business solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"},{"title":"Action guide","titleEnglish":"Action guide","url":"https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}}]}]}]},"masthead":{"search":{"btnSearchClosed":"Open IBM search field","btnSearchOpen":"Search all of IBM","btnClose":"Close IBM search field","placeHolderText":"Search all of IBM"},"profileMenu":{"signedout":{"iconLabel":"User Profile","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}]},"signedin":{"iconLabel":"User Profile: Logged in","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]}}},"profileMenu":{"signedout":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"id":"signin","title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}],"signedin":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"id":"signout","title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]},"marketplace":{"title":"Products","url":""},"footerMenu":[{"title":"Products & Solutions","links":[{"title":"Top products & platforms","url":"https://www.ibm.com/products?lnk=fps"},{"title":"Industries","url":"https://www.ibm.com/industries?lnk=fps"},{"title":"Artificial intelligence","url":"https://ibm.com/cloud/ai?lnk=fps"},{"title":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=fps"},{"title":"Business operations","url":"https://www.ibm.com/business-operations?lnk=fps"},{"title":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=fps"},{"title":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=fps"},{"title":"Hybrid cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=fps"},{"title":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=fps"},{"title":"Security","url":"https://www.ibm.com/security?lnk=fps"},{"title":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=fps"}]},{"title":"Learn about","links":[{"title":"What is Hybrid Cloud?","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"},{"title":"What is Artificial intelligence?","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"},{"title":"What is Cloud Computing?","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"},{"title":"What is Kubernetes?","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"},{"title":"What are Containers?","url":"https://www.ibm.com/cloud/learn/containers?lnk=fle"},{"title":"What is DevOps?","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"},{"title":"What is Machine Learning?","url":"https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"}]},{"title":"Popular links","links":[{"title":"IBM Consulting","url":"https://www.ibm.com/consulting?lnk=fco"},{"title":"Communities","url":"https://community.ibm.com/community/user/home?lnk=fpo"},{"title":"Developer education","url":"https://developer.ibm.com/?lnk=fpo"},{"title":"Support - Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=fpo"},{"title":"IBM Research","url":"https://www.research.ibm.com/?lnk=fpo"},{"title":"Partner with us - PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=fpo"},{"title":"Training - Courses","url":"https://www.ibm.com/training/search?q=course&lnk=fpo"},{"title":"Upcoming events & webinars","url":"https://www.ibm.com/events/?lnk=fpo"}]},{"title":"About IBM","links":[{"title":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=fab"},{"title":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=fab"},{"title":"Corporate social responsibility","url":"https://www.ibm.org/?lnk=fab"},{"title":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=fab"},{"title":"Investor relations","url":"https://www.ibm.com/investor/?lnk=fab"},{"title":"News & announcements","url":"https://newsroom.ibm.com/?lnk=fab"},{"title":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=fab"},{"title":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=fab"},{"title":"About IBM","url":"https://www.ibm.com/about?lnk=fab"}]}],"footerThin":[{"title":"Contact IBM","titleEnglish":"Contact IBM","url":"https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"},{"title":"Privacy","titleEnglish":"Privacy","url":"https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"},{"title":"Terms of use","titleEnglish":"Terms of use","url":"https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"},{"title":"Accessibility","titleEnglish":"Accessibility","url":"https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"}],"localeSelector":{"localVersions":"Localized versions of this page","homepages":"Worldwide ibm.com home pages"},"socialFollow":{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]},"socialSharing":[{"id":"facebook","title":"Facebook","url":"https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"},{"id":"twitter","title":"Twitter","url":"https://twitter.com/?status=%{URL}%20-%20%{TITLE}"},{"id":"linkedin","title":"Linked In","url":"https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"}],"leaving":{"LEAVING001":"Leaving the IBM Web site","LEAVING002":"You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.","LEAVING003":"You are headed to","LEAVING004":"Notice"},"misc":{"backtotop":"Back to top","cancelText":"Cancel","close":"Close","cookiePrefs":"Cookie preferences","continueText":"Continue","editProfile":"Edit profile","emailThisPage":"E-mail this page","feedback":"Feedback","mpScopedSearh":"Products","withinMp":"Products","next":"Next","noresults":"No results found","prev":"Previous","resultsNav":"Use down and up arrow keys to navigate through the results.","search":"Search","selectCountry":"Select a country/region","sharePage":"Share this page","signin":"Sign in","signout":"Sign out","sitenav":"Site navigation","welcomeback":"Welcome back"}}
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/translation.json b/packages/react/tests/e2e-storybook/cypress/fixtures/translation.json
deleted file mode 100644
index e4873c57d86..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/translation.json
+++ /dev/null
@@ -1 +0,0 @@
-{"mastheadNav":{"links":[{"title":"Products & Solutions","titleEnglish":"Products & Solutions","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"The essentials","menuItems":[{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Hybrid Cloud","headingUrl":"","description":"Blend cloud and on-premises resources for flexibility and balance","quickLinks":{"title":"","links":[{"title":"What is Hybrid Cloud?","titleEnglish":"What is Hybrid Cloud?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"},{"title":"Hybrid Cloud solutions","titleEnglish":"Hybrid Cloud solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Artificial intelligence","headingUrl":"","description":"Unlock the value in your organization with Watson","quickLinks":{"title":"","links":[{"title":"What is AI?","titleEnglish":"What is AI?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?mhsrc=ibmsearch_a&mhq=what%20is%20AI%3F"},{"title":"AI solutions","titleEnglish":"AI solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/ai?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Top products & platforms","titleEnglish":"Top products & platforms","url":"https://www.ibm.com/products?lnk=hpmps_bupr","megapanelContent":{"headingTitle":"Top products & platforms","headingUrl":"https://www.ibm.com/products?lnk=hpmps_bupr","description":"","quickLinks":{"title":"","links":[{"title":"Aspera","titleEnglish":"Aspera","url":"https://www.ibm.com/products/aspera?lnk=hpmps_bupr"},{"title":"Cognos","titleEnglish":"Cognos","url":"https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"},{"title":"Db2","titleEnglish":"Db2","url":"https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"},{"title":"IBM Cloud","titleEnglish":"IBM Cloud","url":"https://www.ibm.com/cloud?lnk=hpmps_bupr"},{"title":"IBM Cloud Paks","titleEnglish":"IBM Cloud Paks","url":"https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"},{"title":"IBM Sterling","titleEnglish":"IBM Sterling","url":"https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"},{"title":"IBM Storage","titleEnglish":"IBM Storage","url":"https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"},{"title":"IBM Z","titleEnglish":"IBM Z","url":"https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"},{"title":"Red Hat OpenShift","titleEnglish":"Red Hat OpenShift","url":"https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"},{"title":"SPSS Statistics","titleEnglish":"SPSS Statistics","url":"https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"},{"title":"Watson","titleEnglish":"Watson","url":"https://www.ibm.com/watson?lnk=hpmps_bupr"},{"title":"WebSphere","titleEnglish":"WebSphere","url":"https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Solutions","titleEnglish":"Solutions","url":"","megapanelContent":{"headingTitle":"Solutions","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/ai?lnk=hpmps_buai"},{"title":"Automation","titleEnglish":"Business automation","url":"https://www.ibm.com/cloud/automation?lnk=hpmps_buau"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=hpmps_bubc"},{"title":"Business operations","titleEnglish":"Business operations","url":"https://www.ibm.com/business-operations?lnk=hpmps_buop"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=hpmps_bucl"},{"title":"Data & Analytics","titleEnglish":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=hpmps_buda"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"},{"title":"IT infrastructure","titleEnglish":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"},{"title":"Security","titleEnglish":"Security","url":"https://www.ibm.com/security?lnk=hpmps_buse"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=hpmps_busc"},{"title":"COVID-19 solutions","titleEnglish":"COVID-19 solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Industries","titleEnglish":"Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin","megapanelContent":{"headingTitle":"Industries","headingUrl":"https://www.ibm.com/industries?lnk=hpmps_buin","description":"","quickLinks":{"title":"","links":[{"title":"Aerospace & defense","titleEnglish":"Aerospace & defense","url":"https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"},{"title":"Automotive","titleEnglish":"Automotive","url":"https://www.ibm.com/industries/automotive?lnk=hpmps_buin"},{"title":"Banking & financial markets","titleEnglish":"Banking & financial markets","url":"https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"},{"title":"Education","titleEnglish":"Education","url":"https://www.ibm.com/industries/education?lnk=hpmps_buin"},{"title":"Electronics","titleEnglish":"Electronics","url":"https://www.ibm.com/industries/electronics?lnk=hpmps_buin"},{"title":"Energy & utilities","titleEnglish":"Energy & utilities","url":"https://www.ibm.com/industries/energy?lnk=hpmps_buin"},{"title":"Government","titleEnglish":"Government","url":"https://www.ibm.com/industries/government?lnk=hpmps_buin"},{"title":"Healthcare","titleEnglish":"Healthcare","url":"https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"},{"title":"Insurance","titleEnglish":"Insurance","url":"https://www.ibm.com/industries/insurance?lnk=hpmps_buin"},{"title":"Life sciences","titleEnglish":"Life sciences","url":"https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"},{"title":"View all Industries","titleEnglish":"View all Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin#2546397"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"View all products","titleEnglish":"View all products","url":"https://www.ibm.com/products?lnk=hpmps_buall","megaPanelViewAll":true}]}]},{"title":"Consulting & Services","titleEnglish":"Consulting & Services","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"IBM Consulting","titleEnglish":"IBM Consulting","url":"https://www.ibm.com/consulting?lnk=hpmco&lnk2=link","megapanelContent":{"headingTitle":"IBM Consulting","headingUrl":"https://www.ibm.com/consulting?lnk=hpmco&lnk2=link","description":"","quickLinks":{"title":"","links":[{"title":"Strategy Consulting","titleEnglish":"Strategy Consulting","url":"https://www.ibm.com/consulting/strategy?lnk=hpmco_bust&lnk2=learn"},{"title":"Experience Consulting","titleEnglish":"Experience Consulting","url":"https://www.ibm.com/consulting/experience?lnk=hpmco_buex&lnk2=learn"},{"title":"Operations Consulting","titleEnglish":"Operations Consulting","url":"https://www.ibm.com/consulting/operations?lnk=hpmco_buop&lnk2=learn"},{"title":"Technology Consulting","titleEnglish":"Technology Consulting","url":"https://www.ibm.com/consulting/technology?lnk=hpmco_bute&lnk2=learn"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Business consulting services","titleEnglish":"Business process services","url":"https://www.ibm.com/services/business?lnk=hpmsc_bups","megapanelContent":{"headingTitle":"Business consulting services","headingUrl":"https://www.ibm.com/services/business?lnk=hpmsc_bups","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence services","titleEnglish":"Artificial intelligence services","url":"https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"},{"title":"Big data & data platform","titleEnglish":"Big data & data platform","url":"https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"},{"title":"Business process outsourcing","titleEnglish":"Business process outsourcing","url":"https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"},{"title":"Edge consulting","titleEnglish":"Edge consulting","url":"https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"},{"title":"Finance consulting and outsourcing services","titleEnglish":"Finance transformation","url":"https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"},{"title":"Operations consulting","titleEnglish":"IoT consulting","url":"https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"},{"title":"Procurement consulting and managed services","titleEnglish":"Procurement & strategic sourcing","url":"https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"},{"title":"Risk management consulting services","titleEnglish":"Risk consulting & fraud management","url":"https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"},{"title":"Supply chain consulting services","titleEnglish":"Supply chain","url":"https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Design & business strategy","titleEnglish":"Design & business strategy","url":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs","megapanelContent":{"headingTitle":"Design & business strategy","headingUrl":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs","description":"","quickLinks":{"title":"","links":[{"title":"Customer experience consulting","titleEnglish":"Experience strategy","url":"https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"},{"title":"E-commerce consulting","titleEnglish":"Digital strategy","url":"https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"},{"title":"Marketing consulting","titleEnglish":"Marketing platforms","url":"https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"},{"title":"Salesforce consulting","titleEnglish":"Salesforce consulting","url":"https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png","linkTitle":"","linkUrl":""}}},{"title":"Hybrid multicloud services","titleEnglish":"Hybrid multicloud services","url":"https://www.ibm.com/cloud/services?lnk=hpmsc_bups"},{"title":"Talent management services","titleEnglish":"Talent & transformation","url":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","megapanelContent":{"headingTitle":"Talent management services","headingUrl":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","description":"","quickLinks":{"title":"","links":[{"title":"HR transformation services","titleEnglish":"HR transformation","url":"https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"},{"title":"Talent acquisition services","titleEnglish":"Talent acquisition","url":"https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"},{"title":"Talent development services","titleEnglish":"Talent development","url":"https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png","linkTitle":"","linkUrl":""}}},{"title":"Application services","titleEnglish":"Application services","url":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","megapanelContent":{"headingTitle":"Application services","headingUrl":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","description":"","quickLinks":{"title":"","links":[{"title":"Application Modernization","titleEnglish":"Application Modernization","url":"https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"},{"title":"Enterprise applications strategy","titleEnglish":"Enterprise applications strategy","url":"https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Garage","titleEnglish":"IBM Garages","url":"https://www.ibm.com/garage?lnk=hpmsc_buas"},{"title":"Security services","titleEnglish":"Security services","url":"https://www.ibm.com/security/services?lnk=hpmsc_buse","megapanelContent":{"headingTitle":"Security services","headingUrl":"https://www.ibm.com/security/services?lnk=hpmsc_buse","description":"","quickLinks":{"title":"","links":[{"title":"Application security","titleEnglish":"Application security","url":"https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"},{"title":"Cloud security","titleEnglish":"Cloud security","url":"https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"},{"title":"Data security","titleEnglish":"Data security","url":"https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"},{"title":"Identity & access management","titleEnglish":"Identity & access management","url":"https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"},{"title":"Managed security","titleEnglish":"Managed security","url":"https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"},{"title":"Security governance","titleEnglish":"Security governance","url":"https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png","linkTitle":"","linkUrl":""}}},{"title":"Technology Support Services","titleEnglish":"Services for tech support","url":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","megapanelContent":{"headingTitle":"Technology Support Services","headingUrl":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","description":"","quickLinks":{"title":"","links":[{"title":"Open source","titleEnglish":"Open source","url":"https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"},{"title":"Third party & multivendor","titleEnglish":"Third party & multivendor","url":"https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"},{"title":"IBM warranties and maintenance","titleEnglish":"IBM warranties and maintenance","url":"https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png","linkTitle":"","linkUrl":""}}},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/financing?lnk=hpmsc_bufi"},{"title":"View all services","titleEnglish":"View all services","url":"https://www.ibm.com/services?lnk=hpmsc_buall","megaPanelViewAll":true}]}]},{"title":"Learn & Support","titleEnglish":"Learn & Support","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"What is...","titleEnglish":"What is...","url":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","megapanelContent":{"headingTitle":"What is...","headingUrl":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/topics/automation?lnk=hpmls_buwi"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"},{"title":"Business intelligence","titleEnglish":"Business intelligence","url":"https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"},{"title":"Chatbots","titleEnglish":"Chatbots","url":"https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"},{"title":"Containerization","titleEnglish":"Containerization","url":"https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"},{"title":"Cybersecurity","titleEnglish":"Cybersecurity","url":"https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"},{"title":"Databases","titleEnglish":"Databases","url":"https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"},{"title":"DevOps","titleEnglish":"DevOps","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"},{"title":"Kubernetes","titleEnglish":"Kubernetes","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png","linkTitle":"","linkUrl":""}}},{"title":"Training","titleEnglish":"Training","url":"https://www.ibm.com/training/?lnk=hpmls_butr","megapanelContent":{"headingTitle":"Training","headingUrl":"https://www.ibm.com/training/?lnk=hpmls_butr","description":"","quickLinks":{"title":"","links":[{"title":"Courses","titleEnglish":"Courses","url":"https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"},{"title":"Learning journeys","titleEnglish":"Learning journeys","url":"https://www.ibm.com/training/journeys?lnk=hpmls_butr"},{"title":"Professional certifications","titleEnglish":"Professional certifications","url":"https://www.ibm.com/certify?lnk=hpmls_butr"},{"title":"Digital learning subscriptions","titleEnglish":"Digital learning subscriptions","url":"https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png","linkTitle":"","linkUrl":""}}},{"title":"Developer education","titleEnglish":"Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude","megapanelContent":{"headingTitle":"Developer education","headingUrl":"https://developer.ibm.com/?lnk=hpmls_bude","description":"","quickLinks":{"title":"","links":[{"title":"Code patterns","titleEnglish":"Code patterns","url":"https://developer.ibm.com/patterns/?lnk=hpmls_bude"},{"title":"Developer community","titleEnglish":"Developer community","url":"https://developer.ibm.com/community/?lnk=hpmls_bude"},{"title":"Developer events","titleEnglish":"Developer events","url":"https://developer.ibm.com/events/?lnk=hpmls_bude"},{"title":"Open Source @ IBM","titleEnglish":"Open Source @ IBM","url":"https://ibm.com/opensource?lnk=hpmls_bude"},{"title":"Technical articles","titleEnglish":"Technical articles","url":"https://developer.ibm.com/articles?lnk=hpmls_bude"},{"title":"Tutorials","titleEnglish":"Tutorials","url":"https://developer.ibm.com/tutorials/?lnk=hpmls_bude"},{"title":"Videos","titleEnglish":"Videos","url":"https://developer.ibm.com/videos?lnk=hpmls_bude"},{"title":"View more Developer education","titleEnglish":"View more Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png","linkTitle":"","linkUrl":""}}},{"title":"Documentation","titleEnglish":"Documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc","megapanelContent":{"headingTitle":"Documentation","headingUrl":"https://www.ibm.com/docs/en?lnk=hpmls_budc","description":"","quickLinks":{"title":"","links":[{"title":"All product documentation","titleEnglish":"All product documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc"},{"title":"For products on IBM Cloud","titleEnglish":"For products on IBM Cloud","url":"https://cloud.ibm.com/docs?lnk=hpmls_budc"},{"title":"For use cases — IBM Redbooks","titleEnglish":"For use cases — IBM Redbooks","url":"https://www.redbooks.ibm.com/?lnk=hpmls_budc"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png","linkTitle":"","linkUrl":""}}},{"title":"Community","titleEnglish":"Community","url":"","megapanelContent":{"headingTitle":"Community","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"IBM Developer","titleEnglish":"IBM Developer","url":"https://developer.ibm.com/?lnk=hpmls_buco"},{"title":"IBM Community","titleEnglish":"IBM Community","url":"https://community.ibm.com/community/user/home?lnk=hpmls_buco"},{"title":"Support forums","titleEnglish":"Support forums","url":"https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Resources","titleEnglish":"Resources","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure","megapanelContent":{"headingTitle":"Resources","headingUrl":"https://www.ibm.com/blogs/?lnk=hpmls_bure","description":"","quickLinks":{"title":"","links":[{"title":"Blogs & thought leadership","titleEnglish":"Blogs & thought leadership","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure"},{"title":"Case studies & client stories","titleEnglish":"Case studies & client stories","url":"https://www.ibm.com/case-studies?lnk=hpmls_bure"},{"title":"Upcoming events & webinars","titleEnglish":"Upcoming events & webinars","url":"https://www.ibm.com/events?lnk=hpmls_bure"},{"title":"IBM Institute for Business Value","titleEnglish":"IBM Institute for Business Value","url":"https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png","linkTitle":"","linkUrl":""}}},{"title":"Support","titleEnglish":"Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu","megapanelContent":{"headingTitle":"Support","headingUrl":"https://www.ibm.com/mysupport?lnk=hpmls_busu","description":"","quickLinks":{"title":"","links":[{"title":"Download fixes, updates & drivers","titleEnglish":"Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"},{"title":"Download licensed software - Passport Advantage","titleEnglish":"Download licensed software - Passport Advantage","url":"https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"},{"title":"View your cases","titleEnglish":"View your cases","url":"https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"},{"title":"Open a case","titleEnglish":"Open a case","url":"https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"},{"title":"View available support plans","titleEnglish":"View available support plans","url":"https://www.ibm.com/support/offerings?lnk=hpmls_busu"},{"title":"View more on Support","titleEnglish":"View more on Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png","linkTitle":"","linkUrl":""}}},{"title":"Cloud platform support","titleEnglish":"Cloud platform support","url":"https://www.ibm.com/cloud/support?lnk=hpmls_bucl"}]}]},{"title":"Explore more","titleEnglish":"Explore more","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Partner with us","titleEnglish":"Partners","url":"https://www.ibm.com/partners?lnk=hpmex_bupa","megapanelContent":{"headingTitle":"Partner with us","headingUrl":"https://www.ibm.com/partners?lnk=hpmex_bupa","description":"","quickLinks":{"title":"","links":[{"title":"PartnerWorld","titleEnglish":"Partner with us — PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"},{"title":"Our strategic partnerships","titleEnglish":"Our strategic partnerships","url":"https://www.ibm.com/alliances?lnk=hpmex_bupa"},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Research","titleEnglish":"IBM Research","url":"https://www.research.ibm.com/?lnk=hpmex_bure","megapanelContent":{"headingTitle":"IBM Research","headingUrl":"https://www.research.ibm.com/?lnk=hpmex_bure","description":"","quickLinks":{"title":"","links":[{"title":"Research areas","titleEnglish":"Research areas","url":"https://www.research.ibm.com/?lnk=hpmex_bure"},{"title":"Researcher directory","titleEnglish":"Researcher directory","url":"https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"},{"title":"Patents","titleEnglish":"Patents","url":"https://www.research.ibm.com/patents/?lnk=hpmex_bure"},{"title":"Work with us","titleEnglish":"Work with us","url":"https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png","linkTitle":"","linkUrl":""}}},{"title":"About IBM","titleEnglish":"About IBM","url":"https://www.ibm.com/about?lnk=hpmex_buab","megapanelContent":{"headingTitle":"About IBM","headingUrl":"https://www.ibm.com/about?lnk=hpmex_buab","description":"","quickLinks":{"title":"","links":[{"title":"Annual report","titleEnglish":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=hpmex_buab"},{"title":"Career opportunities","titleEnglish":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=hpmex_buab"},{"title":"Corporate social responsibility","titleEnglish":"Corporate social responsibility","url":"https://www.ibm.org?lnk=hpmex_buab"},{"title":"Diversity & inclusion","titleEnglish":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"},{"title":"Investor relations","titleEnglish":"Investor relations","url":"https://www.ibm.com/investor/?lnk=hpmex_buab"},{"title":"News & announcements","titleEnglish":"News & announcements","url":"https://newsroom.ibm.com?lnk=hpmex_buab"},{"title":"Thought leadership","titleEnglish":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"},{"title":"Security, privacy & trust","titleEnglish":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=hpmex_buab"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png","linkTitle":"","linkUrl":""}}},{"title":"COVID-19","titleEnglish":"COVID-19","url":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","megapanelContent":{"headingTitle":"COVID-19","headingUrl":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","description":"","quickLinks":{"title":"","links":[{"title":"Business solutions","titleEnglish":"Business solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"},{"title":"Action guide","titleEnglish":"Action guide","url":"https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}}]}]}]},"masthead":{"search":{"btnSearchClosed":"Open IBM search field","btnSearchOpen":"Search all of IBM","btnClose":"Close IBM search field","placeHolderText":"Search all of IBM"},"profileMenu":{"signedout":{"iconLabel":"User Profile","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}]},"signedin":{"iconLabel":"User Profile: Logged in","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]}}},"profileMenu":{"signedout":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"id":"signin","title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com%2Fus-en%3Far%3D1&nonce=8675309"}],"signedin":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"id":"signout","title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]},"marketplace":{"title":"Products","url":""},"footerMenu":[{"title":"Products & Solutions","links":[{"title":"Top products & platforms","url":"https://www.ibm.com/products?lnk=fps"},{"title":"Industries","url":"https://www.ibm.com/industries?lnk=fps"},{"title":"Artificial intelligence","url":"https://ibm.com/cloud/ai?lnk=fps"},{"title":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=fps"},{"title":"Business operations","url":"https://www.ibm.com/business-operations?lnk=fps"},{"title":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=fps"},{"title":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=fps"},{"title":"Hybrid cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=fps"},{"title":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=fps"},{"title":"Security","url":"https://www.ibm.com/security?lnk=fps"},{"title":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=fps"}]},{"title":"Learn about","links":[{"title":"What is Hybrid Cloud?","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"},{"title":"What is Artificial intelligence?","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"},{"title":"What is Cloud Computing?","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"},{"title":"What is Kubernetes?","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"},{"title":"What are Containers?","url":"https://www.ibm.com/cloud/learn/containers?lnk=fle"},{"title":"What is DevOps?","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"},{"title":"What is Machine Learning?","url":"https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"}]},{"title":"Popular links","links":[{"title":"IBM Consulting","url":"https://www.ibm.com/consulting?lnk=fco"},{"title":"Communities","url":"https://community.ibm.com/community/user/home?lnk=fpo"},{"title":"Developer education","url":"https://developer.ibm.com/?lnk=fpo"},{"title":"Support - Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=fpo"},{"title":"IBM Research","url":"https://www.research.ibm.com/?lnk=fpo"},{"title":"Partner with us - PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=fpo"},{"title":"Training - Courses","url":"https://www.ibm.com/training/search?q=course&lnk=fpo"},{"title":"Upcoming events & webinars","url":"https://www.ibm.com/events/?lnk=fpo"}]},{"title":"About IBM","links":[{"title":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=fab"},{"title":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=fab"},{"title":"Corporate social responsibility","url":"https://www.ibm.org/?lnk=fab"},{"title":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=fab"},{"title":"Investor relations","url":"https://www.ibm.com/investor/?lnk=fab"},{"title":"News & announcements","url":"https://newsroom.ibm.com/?lnk=fab"},{"title":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=fab"},{"title":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=fab"},{"title":"About IBM","url":"https://www.ibm.com/about?lnk=fab"}]},{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]}],"footerThin":[{"title":"Contact IBM","titleEnglish":"Contact IBM","url":"https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"},{"title":"Privacy","titleEnglish":"Privacy","url":"https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"},{"title":"Terms of use","titleEnglish":"Terms of use","url":"https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"},{"title":"Accessibility","titleEnglish":"Accessibility","url":"https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"}],"localeSelector":{"localVersions":"Localized versions of this page","homepages":"Worldwide ibm.com home pages"},"socialFollow":{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]},"socialSharing":[{"id":"facebook","title":"Facebook","url":"https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"},{"id":"twitter","title":"Twitter","url":"https://twitter.com/?status=%{URL}%20-%20%{TITLE}"},{"id":"linkedin","title":"Linked In","url":"https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"}],"leaving":{"LEAVING001":"Leaving the IBM Web site","LEAVING002":"You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.","LEAVING003":"You are headed to","LEAVING004":"Notice"},"misc":{"backtotop":"Back to top","cancelText":"Cancel","close":"Close","cookiePrefs":"Cookie preferences","continueText":"Continue","editProfile":"Edit profile","emailThisPage":"E-mail this page","feedback":"Feedback","mpScopedSearh":"Products","withinMp":"Products","next":"Next","noresults":"No results found","prev":"Previous","resultsNav":"Use down and up arrow keys to navigate through the results.","search":"Search","selectCountry":"Select a country/region","sharePage":"Share this page","signin":"Sign in","signout":"Sign out","sitenav":"Site navigation","welcomeback":"Welcome back"},"timestamp":1644420748748}
diff --git a/packages/react/tests/e2e-storybook/cypress/fixtures/typeahead.json b/packages/react/tests/e2e-storybook/cypress/fixtures/typeahead.json
deleted file mode 100644
index e8b231ab9d8..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/fixtures/typeahead.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "response" : [ ["test", "0"],["testing", "1"],["tester", "2"],["test automation", "3"],["testing jobs", "4"],["test realtime", "5"],["test of between subjects effects", "6"],["test data management", "7"],["test specialist", "8"],["test tls 1.2", "9"] ] }
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CTA/ButtonCTA.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CTA/ButtonCTA.e2e.js
deleted file mode 100644
index fe714089fde..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CTA/ButtonCTA.e2e.js
+++ /dev/null
@@ -1,93 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 createTests from './_tests';
-
-/**
- * Defines the button CTA variant path.
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-cta--button';
-
-/**
- * Path definitions for the test creation function.
- *
- * @type {Object.<string, string>}
- * @private
- */
-const _paths = {
-  ctaType: `${_path}&knob-Button%201%20type%20(buttons[0].type)=`,
-};
-
-/**
- * Defines the button CTA variant selector.
- *
- * @type {string}
- * @private
- */
-const _selector = '[data-autoid="dds--button-group"] .bx--buttongroup-item';
-
-/**
- * Defines the variants' SVG icon paths.
- *
- * @TODO Fix icon options not being respected when viewing component iframe. Once done, we can remove this
- *
- * @type {Object<string, string>}
- * @private
- */
-const _typeIcons = {
-  local:
-    'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-};
-
-/**
- * Collection of common test scenarios.
- *
- * @type {Array<function>}
- * @private
- */
-const _tests = createTests(_selector, _paths, _typeIcons);
-
-/**
- * Collection of test scenarios specific to the button CTA variant.
- *
- * @type {Array<function>}
- * @private
- */
-const _buttonTests = [
-  () => {
-    it('should render two buttons', () => {
-      cy.get(_selector).should('have.length', 2);
-    });
-  },
-];
-
-describe('dds-cta | button (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(_path);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  _buttonTests.forEach(test => test());
-  _tests.forEach(test => test());
-});
-
-describe('dds-cta | button (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(_path);
-    cy.injectAxe();
-    cy.viewport(325, 720);
-  });
-
-  _buttonTests.forEach(test => test());
-  _tests.forEach(test => test());
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CTA/Card.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CTA/Card.e2e.js
deleted file mode 100644
index b646fa0ba93..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CTA/Card.e2e.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 getCssPropertyForRule from '../../utils/get-css-property-for-rule';
-
-/**
- * Sets the correct path
- *
- * @type {string} String
- * @private
- */
-const _paths = {
-  default: 'iframe.html?id=components-cta--card',
-  types: 'iframe.html?id=components-cta--card&knob-type=',
-};
-
-/**
- * Finds top-most element in document (or given root) at given coordinates
- *
- * @param {number} x - The x coordinate
- * @param {number} y - The y coordinate
- * @param {document} root - The document object in which to search
- * @returns {string} lowercase tagname of element
- */
-const getTopElement = (x, y, root = window.document) => {
-  return root.elementFromPoint(x, y).tagName.toLowerCase();
-};
-
-/**
- * Collection of all tests for dds-table-of-contents
- *
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  },
-  checkBlockLink: () => {
-    cy.visit(`/${_paths.default}`)
-      .get('.bx--card__CardCTA')
-      .then(card => {
-        const bcr = card[0].getBoundingClientRect();
-
-        const box = {
-          top: bcr.top + 5,
-          right: bcr.right - 5,
-          bottom: bcr.bottom - 5,
-          left: bcr.left + 5,
-          centerX: bcr.left + bcr.width / 2,
-          centerY: bcr.top + bcr.height / 2,
-        };
-
-        const root = card[0].ownerDocument;
-
-        expect(getTopElement(box.left, box.top, root)).to.be.eq('a');
-        expect(getTopElement(box.left, box.bottom, root)).to.be.eq('a');
-        expect(getTopElement(box.right, box.top, root)).to.be.eq('a');
-        expect(getTopElement(box.right, box.bottom, root)).to.be.eq('a');
-        expect(getTopElement(box.centerX, box.centerY, root)).to.be.eq('a');
-      });
-  },
-  checkTypeKnob: () => {
-    const types = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    cy.wrap(Object.entries(types)).each(([type, pathAttr]) => {
-      cy.visit(`/${_paths.types}${type}`)
-        .get('.bx--card__footer path')
-        .then(([path]) => {
-          expect(path.getAttribute('d')).to.be.eq(pathAttr);
-        });
-    });
-  },
-  checkHoverStyles: () => {
-    cy.get('.bx--card__CardCTA').then(([card]) => {
-      const sheets = card.ownerDocument.styleSheets;
-
-      if (sheets) {
-        const hover = getCssPropertyForRule(
-          '.bx--card:hover, :host(dds-card):hover, :host(dds-link-list-item-card):hover, :host(dds-card-group-item):hover, :host(dds-card-group-item) .bx--card:hover, :host(dds-card-cta):hover, :host(dds-link-list-item-card-cta):hover, :host(dds-card-in-card):hover, :host(dds-content-group-cards-item):hover, :host(dds-content-group-cards-item) .bx--card:hover',
-          'background-color',
-          sheets
-        );
-        expect(hover).to.be.eq('var(--cds-hover-ui, #e5e5e5)');
-      }
-    });
-  },
-};
-
-describe('dds-card-cta | (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 720);
-  });
-
-  it('Should load and be fully clickable', _tests.checkBlockLink);
-  it('Should have customizable CTA type', _tests.checkTypeKnob);
-  it('Should have hover-state styling', _tests.checkHoverStyles);
-  it('Should check a11y', _tests.checkA11y);
-});
-
-describe('dds-card-cta | (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 720);
-  });
-
-  it('Should load and be fully clickable', _tests.checkBlockLink);
-  it('Should have customizable CTA type', _tests.checkTypeKnob);
-  it('Should have hover-state styling', _tests.checkHoverStyles);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CTA/Feature.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CTA/Feature.e2e.js
deleted file mode 100644
index 5d3758e7b86..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CTA/Feature.e2e.js
+++ /dev/null
@@ -1,209 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string} url
- * @private
- */
-const _paths = {
-  default: 'iframe.html?id=components-cta--feature',
-  types: 'iframe.html?id=components-cta--feature&knob-CTA%20type:=',
-};
-
-/**
- * Finds top-most element in document (or given root) at given coordinates
- *
- * @param {number} x The x coordinate
- * @param {number} y The y coordinate
- * @param {document} root The document object in which to search
- * @returns {string} lowercase tagname of element
- */
-const getTopElement = (x, y, root = window.document) => {
-  return root.elementFromPoint(x, y).tagName.toLowerCase();
-};
-
-/**
- * Collection of all tests for dds-table-of-contents
- *
- * @function checkBlockLink - Asserts that entirety of card is covered by footer link pseudoelement
- * @function checkHorizontalLayout - Asserts that card image is full-height, left-aligned and content is full-height, right-aligned
- * @function checkVerticalLayout - Asserts that card image is full-width, top-aligned and content is full-width, bottom-aligned
- * @function checkHeadingKnob - Asserts that card heading can be set by knob url param
- * @function checkTypeKnob - Asserts that CTA link icon is set by footer attribute
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  checkBlockLink: () => {
-    cy.get('.bx--feature-card').then(card => {
-      const bcr = card[0].getBoundingClientRect();
-
-      const box = {
-        top: bcr.top + 5,
-        right: bcr.right - 5,
-        bottom: bcr.bottom - 5,
-        left: bcr.left + 5,
-        centerX: bcr.left + bcr.width / 2,
-        centerY: bcr.top + bcr.height / 2,
-      };
-
-      const root = card[0].ownerDocument;
-
-      expect(getTopElement(box.left, box.top, root)).to.be.eq('a');
-      expect(getTopElement(box.left, box.bottom, root)).to.be.eq('a');
-      expect(getTopElement(box.right, box.top, root)).to.be.eq('a');
-      expect(getTopElement(box.right, box.bottom, root)).to.be.eq('a');
-      expect(getTopElement(box.centerX, box.centerY, root)).to.be.eq('a');
-    });
-  },
-  checkHorizontalLayout: () => {
-    let cardBox, imageBox, contentBox;
-
-    cy.waitUntil(() => {
-        // Waits for image to load and page to redo layout.
-        return (
-          cy.get('.bx--feature-card .bx--image')
-            .then(([image]) => image.getBoundingClientRect().height > 0)
-        );
-      })
-      .get('.bx--feature-card')
-      .then(([card]) => {
-        cardBox = card.getBoundingClientRect();
-      })
-      .get('.bx--feature-card .bx--image')
-      .then(([image]) => {
-        imageBox = image.getBoundingClientRect();
-      })
-      .get('.bx--feature-card .bx--card__content')
-      .then(([content]) => {
-        contentBox = content.getBoundingClientRect();
-
-        // Image full height, left aligned
-        expect(imageBox.top).to.be.eq(cardBox.top);
-        expect(imageBox.left).to.be.eq(cardBox.left);
-        expect(imageBox.bottom).to.be.eq(cardBox.bottom);
-
-        // Content full height, right aligned
-        expect(contentBox.top).to.be.eq(cardBox.top);
-        expect(contentBox.right).to.be.eq(cardBox.right);
-        expect(contentBox.bottom).to.be.eq(cardBox.bottom);
-
-        // Image & content don't overlap
-        expect(imageBox.width + contentBox.width).to.be.eq(cardBox.width);
-      });
-  },
-  checkVerticalLayout: () => {
-    let cardBox, imageBox, contentBox;
-
-    cy.waitUntil(() => {
-        // Waits for image to load and page to redo layout.
-        return (
-          cy.get('.bx--feature-card .bx--image')
-            .then(([image]) => image.getBoundingClientRect().height > 0)
-        );
-      })
-      .get('.bx--feature-card')
-      .then(([card]) => {
-        cardBox = card.getBoundingClientRect();
-      })
-      .get('.bx--feature-card .bx--image')
-      .then(([image]) => {
-        imageBox = image.getBoundingClientRect();
-      })
-      .get('.bx--card__content')
-      .then(([content]) => {
-        contentBox = content.getBoundingClientRect();
-
-        // Image full width, top aligned
-        expect(imageBox.top).to.be.eq(cardBox.top);
-        expect(imageBox.left).to.be.eq(cardBox.left);
-        expect(imageBox.right).to.be.eq(cardBox.right);
-
-        // Content full width, bottom aligned
-        expect(contentBox.left).to.be.eq(cardBox.left);
-        expect(contentBox.right).to.be.eq(cardBox.right);
-        expect(contentBox.bottom).to.be.eq(cardBox.bottom);
-
-        // Image & content don't overlap
-        expect(imageBox.height + contentBox.height).to.be.eq(cardBox.height);
-      });
-  },
-  checkHeadingKnob: () => {
-    let defaultText, customTextOutput;
-
-    const customTextInput = 'Lorem Ipsum Dolor Sit Amet.';
-
-    const knobs = new URLSearchParams({
-      'knob-Heading:': customTextInput,
-    });
-
-    cy.get('.bx--card__heading')
-      .then(([heading]) => {
-        defaultText = heading.innerText;
-      })
-      .visit(`/${_paths.default}&${knobs.toString()}`)
-      .get('.bx--card__heading')
-      .then(([heading]) => {
-        customTextOutput = heading.innerText;
-
-        expect(customTextInput).to.be.eq(customTextOutput);
-        expect(customTextOutput).to.not.eq(defaultText);
-      });
-  },
-  checkTypeKnob: () => {
-    const types = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    cy.wrap(Object.entries(types)).each(([type, pathAttr]) => {
-      cy.visit(`/${_paths.types}${type}`)
-        .get('.bx--card__footer path')
-        .then(([path]) => {
-          expect(path.getAttribute('d')).to.be.eq(pathAttr);
-        });
-    });
-  },
-};
-
-describe('dds-feature-cta | (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 720);
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-  });
-
-  it('Should load and be fully clickable', _tests.checkBlockLink);
-  it('Should load image on left and content on right', _tests.checkHorizontalLayout);
-  it('Should have customizable heading from knobs', _tests.checkHeadingKnob);
-  it('Should have customizable CTA type from knobs', _tests.checkTypeKnob);
-  it('Should check a11y', _tests.checkA11y);
-});
-
-describe('dds-feature-cta | (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 720);
-    cy.visit(`/${_paths.default}`);
-  });
-
-  it('Should load and be fully clickable', _tests.checkBlockLink);
-  it('Should load image on top and content on bottom', _tests.checkVerticalLayout);
-  it('Should have customizable heading from knobs', _tests.checkHeadingKnob);
-  it('Should have customizable CTA type from knobs', _tests.checkTypeKnob);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CTA/TextCTA.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CTA/TextCTA.e2e.js
deleted file mode 100644
index b89f4e5aa30..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CTA/TextCTA.e2e.js
+++ /dev/null
@@ -1,90 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 createTests from './_tests';
-
-/**
- * Defines the text CTA variant path.
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-cta--text';
-
-/**
- * Path definitions for the test creation function.
- *
- * @type {Object.<string, string>}
- * @private
- */
-const _paths = {
-  ctaType: `${_path}&knob-type=`,
-};
-
-/**
- * Defines the text CTA variant selector.
- *
- * @type {string}
- * @private
- */
-const _selector = '[data-autoid="dds--link-with-icon"]';
-
-/**
- * An array of test scenarios.
- *
- * @type {Array<Function>}
- * @private
- */
-const _tests = createTests(_selector, _paths);
-
-const _textTests = [
-  () => {
-    it('should check icon placements', () => {
-      ['left', 'right'].forEach(placement => {
-        cy.visit(
-          `${_path}&knob-Icon%20Placement%20(iconPlacement)=${placement}`
-        )
-          .get(_selector)
-          .find('a')
-          .should($link => {
-            const svgPosition = $link.find('svg')[0].getBoundingClientRect();
-            const textPosition = $link.find('span')[0].getBoundingClientRect();
-
-            if (placement === 'left') {
-              expect(svgPosition.left).to.be.lt(textPosition.left);
-            } else {
-              expect(svgPosition.left).to.be.gt(textPosition.left);
-            }
-          });
-      });
-    });
-  },
-];
-
-describe('dds-cta | text (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(_path);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  _textTests.forEach(test => test());
-  _tests.forEach(test => test());
-});
-
-describe('dds-cta | text (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(_path);
-    cy.injectAxe();
-    cy.viewport(325, 720);
-  });
-
-  _textTests.forEach(test => test());
-  _tests.forEach(test => test());
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CTA/_tests.js b/packages/react/tests/e2e-storybook/cypress/integration/CTA/_tests.js
deleted file mode 100644
index 2939f13bab8..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CTA/_tests.js
+++ /dev/null
@@ -1,82 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-/**
- * Defines the variants' SVG icon paths.
- *
- * @type {Object<string, string>}
- * @private
- */
-const _typeIcons = {
-  local:
-    'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-  jump:
-    'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-  external:
-    'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-  download:
-    'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-  video:
-    'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-};
-
-/**
- * Generates an array of test scenarios.
- *
- * @param {string} selector - Cypress selector for the component to be tested/
- * @param {Object} paths - Paths to component variations.
- * @param {string} paths.copy - Path with URL params for Copy knob, not
- * including the copy text. E.g. "/iframe.html?id=some_component&copy="
- * @param {string} paths.href - Path with URL params for content link knob, not
- * including the link. E.g. "/iframe.html?id=some_component&href="
- * @param {string} paths.ctaType - Path with URL params for CTA type knob, not
- * including the type. E.g. "/iframe.html?id=some_component&cta_type=".
- * @param {Object<string, string>} typeIcons - SVG icon paths.
- * @returns {Array<Function>} - Collection of Cypress test scenarios.
- */
-export default (selector, paths, typeIcons = _typeIcons) => [
-  () => {
-    it('should check a11y', () => {
-      cy.checkAxeA11y();
-    });
-  },
-  () => {
-    it('should render link text', () => {
-      cy.get(selector).should('not.be.empty');
-    });
-  },
-  () => {
-    it('should have a clickable link', () => {
-      cy.get(selector)
-        .find('a')
-        .should($link => {
-          expect($link.prop('href')).not.to.be.empty;
-        });
-    });
-  },
-  () => {
-    it('should check CTA types', () => {
-      Object.keys(typeIcons).forEach(type => {
-        cy.visit(`${paths.ctaType}${type}`);
-        cy.get(selector)
-          .find('a svg path')
-          .should($path => {
-            expect($path.attr('d')).to.be.eq(typeIcons[type]);
-          });
-      });
-    });
-  },
-  () => {
-    it('should render correctly in all themes', () => {
-      cy.carbonThemesScreenshot({
-        capture: 'viewport',
-      });
-    });
-  },
-];
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CalloutQuote/CalloutQuote.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CalloutQuote/CalloutQuote.e2e.js
deleted file mode 100644
index 3812bcdd0c9..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CalloutQuote/CalloutQuote.e2e.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-callout-quote--default';
-
-/* eslint-disable cypress/no-unnecessary-waiting */
-describe('CalloutQuote | default', () => {
-  beforeEach(() => {
-    cy.visit(`${_path}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should render correctly in all themes', () => {
-    cy.waitUntil(() =>
-      cy
-        .get('[data-autoid="dds--callout-quote"] .bx--quote__copy')
-        .then($copy => $copy.text().trim() !== '')
-    );
-
-    cy.carbonThemesScreenshot();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Card/Card.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Card/Card.e2e.js
deleted file mode 100644
index ff6979ea4ba..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Card/Card.e2e.js
+++ /dev/null
@@ -1,204 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 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.
- */
-
-'use strict';
-
-/**
- * Defines the default component variant path.
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-card--default';
-
-/**
- * Defines the static component variant path.
- *
- * @type {string}
- * @private
- */
-const _pathStatic = '/iframe.html?id=components-card--card-static';
-
-/**
- * Defines the base card component selector.
- *
- * @type {string}
- * @private
- */
-const _selectorBase = `[data-autoid="dds--card"]`;
-
-/**
- * Defines the card element selectors.
- *
- * @type {Object.<string>}
- * @private
- */
-const _selectors = {
-  eyebrow: `${_selectorBase} .bx--card__eyebrow`,
-  heading: `${_selectorBase} .bx--card__heading`,
-  footer: `${_selectorBase} .bx--card__footer`,
-  image: `${_selectorBase} .bx--image img`,
-  copy: `${_selectorBase} .bx--card__copy`,
-};
-
-/**
- * Collection of all tests for DDSCard
- *
- * @property {function} screenshotThemes
- * @property {function} checkTextRenders
- * @property {function} checkClickableCard
- * @property {function} checkNonClickableCard
- * @property {function} checkImageRenders
- * @property {function} checkOutlineRenders
- * @property {function} checkInverseRenders
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  screenshotThemes: () => {
-    cy.carbonThemesScreenshot({
-      capture: 'viewport',
-    });
-  },
-  checkTextRenders: () => {
-    it('should render eyebrow content', () => {
-      cy.get(_selectors.eyebrow).then($eyebrow => {
-        expect($eyebrow).not.to.be.empty;
-      });
-    });
-
-    it('should render heading content', () => {
-      cy.get(_selectors.heading).then($heading => {
-        expect($heading).not.to.be.empty;
-      });
-    });
-
-    it('should render body copy content', () => {
-      cy.get(_selectors.copy).then($copy => {
-        expect($copy).not.to.be.empty;
-      });
-    });
-
-    it('should render footer content', () => {
-      cy.get(_selectors.footer).then($footer => {
-        expect($footer).not.to.be.empty;
-      });
-    });
-  },
-  checkClickableCard: () => {
-    it('should check for link', () => {
-      cy.get(`.bx--card a.bx--link`).then($link => {
-        const url = $link.prop('href');
-        expect(url).not.to.be.empty;
-      });
-    });
-
-    it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-      cy.get(`.bx--card a.bx--link`).then($els => {
-        const win = $els[0].ownerDocument.defaultView;
-        const after = win.getComputedStyle($els[0], ':after');
-        const positionValue = after.getPropertyValue('position');
-        const insetValue = after.getPropertyValue('inset');
-
-        expect(positionValue).to.eq('absolute');
-        if (Cypress.browser.name !== 'firefox') {
-          expect(insetValue).to.eq('0px');
-        }
-      });
-    });
-  },
-  checkNonClickableCard: () => {
-    it('should not respond to a click ', () => {
-      let initialLocation;
-      cy.location('href')
-        .then(location => {
-          initialLocation = location;
-        })
-        .get(_selectorBase)
-        .click()
-        .location('href')
-        .then(location => {
-          expect(location).to.equal(initialLocation);
-        });
-    });
-  },
-  checkImageRenders: path => {
-    it('should render with image', () => {
-      cy.visit(`${path}&knob-Add%20image:=true`);
-      cy.get(_selectors.image).should('have.length', 1);
-      cy.takeSnapshots();
-    });
-  },
-  checkOutlineRenders: path => {
-    it('should render with outline', () => {
-      cy.visit(path);
-      cy.get(_selectorBase).should('have.class', 'bx--card--border');
-      // converted HEX var(--cds-ui-03, #e0e0e0) to RGB
-
-      if (Cypress.browser.name !== 'firefox') {
-        cy.get(_selectorBase)
-          .should('have.css', 'border')
-          .and('equal', '1px solid rgb(224, 224, 224)');
-      }
-
-      cy.get(_selectorBase).should('have.class', 'bx--card--light');
-      // converted HEX var(--cds-ui-02, #ffffff) to RGB
-      cy.get(_selectorBase)
-        .should('have.css', 'background-color')
-        .and('equal', 'rgb(255, 255, 255)');
-
-      cy.takeSnapshots();
-    });
-  },
-  checkInverseRenders: path => {
-    it('should render with inverse', () => {
-      cy.visit(`${path}&knob-Card%20style:=Inverse%20card`);
-      cy.get(_selectorBase).should('have.class', 'bx--card--inverse');
-      // converted HEX var(--cds-inverse-02, #393939) to RGB
-      cy.get(_selectorBase)
-        .should('have.css', 'background-color')
-        .and('equal', 'rgb(57, 57, 57)');
-
-      cy.takeSnapshots();
-    });
-  },
-};
-
-describe('Card | Default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`${_path}&knob-Body%20copy:=copy`);
-    cy.injectAxe();
-  });
-
-  _tests.checkTextRenders();
-  _tests.checkClickableCard();
-  _tests.checkImageRenders(_path);
-  _tests.checkOutlineRenders(
-    `${_path}&knob-Card%20style:=Outlined%20card`
-  );
-  _tests.checkInverseRenders(_path);
-  it('should render correctly in all themes', _tests.screenshotThemes);
-  it('should check a11y', _tests.checkA11y);
-});
-
-describe('Card | Static (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`${_pathStatic}&knob-Add%20CTA:_staticID=true`);
-    cy.injectAxe();
-  });
-
-  _tests.checkTextRenders();
-  _tests.checkNonClickableCard();
-  _tests.checkImageRenders(_pathStatic);
-  _tests.checkOutlineRenders(`${_pathStatic}&knob-Outlined%20card=true`);
-  it('should render correctly in all themes', _tests.screenshotThemes);
-  it('should check a11y', _tests.checkA11y);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CardLink/CardLink.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CardLink/CardLink.e2e.js
deleted file mode 100644
index 2cb989419ae..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CardLink/CardLink.e2e.js
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 getCssPropertyForRule from '../../utils/get-css-property-for-rule';
-
-/**
- * Sets the correct path
- *
- * @type {string} Path options
- * @private
- */
-const _paths = {
-  default: 'iframe.html?id=components-card-link--default',
-  types: '',
-};
-
-/**
- * Finds top-most element in document (or given root) at given coordinates
- *
- * @param {number} x X-Coordinate to test
- * @param {number} y Y-Coordinate to test
- * @param {document} root Owner Document to test
- * @returns {string} lowercase tagname of element
- */
-const getTopElement = (x, y, root = window.document) => {
-  return root.elementFromPoint(x, y).tagName.toLowerCase();
-};
-
-/**
- * Collection of all tests for dds-table-of-contents
- *
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  },
-  checkBlockLink: () => {
-    let box;
-
-    cy.visit(`/${_paths.default}`)
-      .get('.bx--card-link')
-      .then(card => {
-        const bcr = card[0].getBoundingClientRect();
-
-        box = {
-          top: bcr.top + 5,
-          right: bcr.right - 5,
-          bottom: bcr.bottom - 5,
-          left: bcr.left + 5,
-          centerX: bcr.left + bcr.width / 2,
-          centerY: bcr.top + bcr.height / 2,
-        };
-
-        const root = card[0].ownerDocument;
-        expect(getTopElement(box.left, box.top, root)).to.be.eq('a');
-        expect(getTopElement(box.left, box.bottom, root)).to.be.eq('a');
-        expect(getTopElement(box.right, box.top, root)).to.be.eq('a');
-        expect(getTopElement(box.right, box.bottom, root)).to.be.eq('a');
-        expect(getTopElement(box.centerX, box.centerY, root)).to.be.eq('a');
-      });
-  },
-  checkTypeKnob: () => {
-    const types = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    cy.wrap(Object.entries(types)).each(([type, pathAttr]) => {
-      cy.visit(`/${_paths.types}${type}`)
-        .get('.bx--card__footer path')
-        .then(([path]) => {
-          expect(path.getAttribute('d')).to.be.eq(pathAttr);
-        });
-    });
-  },
-  checkHoverStyles: () => {
-    cy.get('.bx--card-link').then(([card]) => {
-      const sheets = card.ownerDocument.styleSheets;
-
-      if (sheets) {
-        const hover = getCssPropertyForRule(
-          '.bx--card:hover, :host(dds-card):hover, :host(dds-link-list-item-card):hover, :host(dds-card-group-item):hover, :host(dds-card-group-item) .bx--card:hover, :host(dds-card-cta):hover, :host(dds-link-list-item-card-cta):hover, :host(dds-card-in-card):hover, :host(dds-content-group-cards-item):hover, :host(dds-content-group-cards-item) .bx--card:hover',
-          'background-color',
-          sheets
-        );
-        expect(hover).to.be.eq('var(--cds-hover-ui, #e5e5e5)');
-      }
-    });
-  },
-};
-
-describe('dds-card-cta | (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 720);
-  });
-
-  it('Should load and be fully clickable', _tests.checkBlockLink);
-  it('Should have hover-state styling', _tests.checkHoverStyles);
-  it('Should check a11y', _tests.checkA11y);
-});
-
-describe('dds-card-cta | (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 720);
-  });
-
-  it('Should load and be fully clickable', _tests.checkBlockLink);
-  it('Should have hover-state styling', _tests.checkHoverStyles);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CardSectionImages/CardSectionImages.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CardSectionImages/CardSectionImages.e2e.js
deleted file mode 100644
index 319b8914538..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CardSectionImages/CardSectionImages.e2e.js
+++ /dev/null
@@ -1,162 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Card section images - Default)
- *
- * @type {string}
- * @private
- */
-const _pathDefault = '/iframe.html?id=components-card-section-images--default';
-
-describe('dds-card-section-images | default (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefault}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load clickable card with images and content', () => {
-    cy.get('[data-autoid="dds--card"][href] a.bx--card__footer').each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-
-    cy.get(
-      '[data-autoid="dds--card"] [data-autoid="dds--image__longdescription"] img'
-    ).each($img => {
-      expect($img).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"] .bx--card__eyebrow').each($eyebrow => {
-      expect($eyebrow).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"] .bx--card__heading').each($heading => {
-      expect($heading).to.be.visible;
-    });
-  });
-
-  it('should load heading bold and left aligned', () => {
-    cy.get(
-      '[data-autoid="dds--card-group-images-group"] .bx--content-section__heading'
-    ).then($heading => {
-      expect($heading.css('textAlign')).to.be.eq('start');
-      expect($heading.css('fontWeight')).to.be.eq('600');
-    });
-  });
-
-  it('should load cards content', () => {
-    cy.get('[data-autoid="dds--card"] .bx--card__eyebrow').each($eyebrow => {
-      expect($eyebrow).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"] .bx--card__heading').each($heading => {
-      expect($heading).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"][href] a.bx--card__footer')
-      .find('svg path')
-      .each($icon => {
-        expect($icon).to.have.attr(
-          'd',
-          'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z'
-        );
-      });
-
-    cy.wait(3000);
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(1280, 780);
-
-    cy.wait(3000);
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('dds-card-section-images | default (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-  });
-
-  it('should load clickable card with images and content', () => {
-    cy.get('[data-autoid="dds--card"][href] a.bx--card__footer').each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-
-    cy.get(
-      '[data-autoid="dds--card"] [data-autoid="dds--image__longdescription"] img'
-    ).each($img => {
-      expect($img).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"] .bx--card__eyebrow').each($eyebrow => {
-      expect($eyebrow).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"] .bx--card__heading').each($heading => {
-      expect($heading).to.be.visible;
-    });
-  });
-
-  it('should load heading bold and left aligned', () => {
-    cy.get(
-      '[data-autoid="dds--card-group-images-group"] .bx--content-section__heading'
-    ).then($heading => {
-      expect($heading.css('textAlign')).to.be.eq('start');
-      expect($heading.css('fontWeight')).to.be.eq('600');
-    });
-  });
-
-  it('should load cards content', () => {
-    cy.get('[data-autoid="dds--card"] .bx--card__eyebrow').each($eyebrow => {
-      expect($eyebrow).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"] .bx--card__heading').each($heading => {
-      expect($heading).to.be.visible;
-    });
-
-    cy.get('[data-autoid="dds--card"][href] a.bx--card__footer')
-      .find('svg path')
-      .each($icon => {
-        expect($icon).to.have.attr(
-          'd',
-          'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z'
-        );
-      });
-
-    cy.wait(3000);
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-
-    cy.wait(3000);
-
-    cy.carbonThemesScreenshot(
-      {},
-      {
-        widths: [320],
-      }
-    );
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/CardSectionSimple/CardSectionSimple.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/CardSectionSimple/CardSectionSimple.e2e.js
deleted file mode 100644
index c6145a711c5..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/CardSectionSimple/CardSectionSimple.e2e.js
+++ /dev/null
@@ -1,123 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @param default - Path to default variant
- * @param withCta - path to variant with CTA card
- * @private
- */
-const _paths = {
-  default: 'iframe.html?id=components-card-section-simple--default',
-  withCta: 'iframe.html?id=components-card-section-simple--with-cta',
-};
-
-/**
- * Collection of all tests for DDSCardSectionSimple
- *
- * @function checkForBlocklink - Asserts a full-sized pseudoelement from the footer link
- * @function checkForTitlePosition - Asserts left-aligned title (16 || 32)px from left edge
- * @function checkForCardContent - Asserts that all card child elements are rendered in shadowRoot slots
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  checkForBlocklink: () => {
-    cy.get('.bx--link.bx--card__footer').each($els => {
-      const win = $els[0].ownerDocument.defaultView;
-      const after = win.getComputedStyle($els[0], ':after');
-      const positionValue = after.getPropertyValue('position');
-      const insetValue = after.getPropertyValue('inset');
-
-      expect(positionValue).to.eq('absolute');
-      if (Cypress.browser.name !== 'firefox') {
-        expect(insetValue).to.eq('0px');
-      }
-    });
-  },
-  checkForTitlePosition: () => {
-    cy.get('.bx--content-section__heading').then(heading => {
-      expect(
-        heading.offset().left == 16 || heading.offset().left == 32
-      ).to.be.eq(true);
-      expect(heading.css('textAlign')).to.be.eq('start');
-    });
-  },
-  checkForCardContent: () => {
-    cy.get('.bx--card-group__card').each($card => {
-      expect(Cypress.dom.isVisible($card.find('.bx--card__heading'))).to.be.eq(
-        true
-      );
-      expect(Cypress.dom.isVisible($card.find('.bx--card__copy'))).to.be.eq(
-        true
-      );
-      expect(Cypress.dom.isVisible($card.find('.bx--card__footer'))).to.be.eq(
-        true
-      );
-    });
-  },
-  checkThemes: () => {
-    cy.wait(3000);
-
-    cy.carbonThemesScreenshot();
-  },
-};
-
-describe('DDSCardSectionSimple | default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 720);
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-  });
-
-  it('should load card as blocklink', _tests.checkForBlocklink);
-  it('should load left-aligned section title', _tests.checkForTitlePosition);
-  it('should load heading, copy, cta on each card', _tests.checkForCardContent);
-  it('should render correctly in all themes', _tests.checkThemes);
-  it('should check a11y', _tests.checkA11y);
-});
-
-describe('DDSCardSectionSimple | with cta (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 720);
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-  });
-
-  it('should load card as blocklink', _tests.checkForBlocklink);
-  it('should load left-aligned section title', _tests.checkForTitlePosition);
-  it('should load heading, copy, cta on each card', _tests.checkForCardContent);
-  it('should render correctly in all themes', _tests.checkThemes);
-  it('should check a11y', _tests.checkA11y);
-});
-
-describe('DDSCardSectionSimple | default (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 720);
-    cy.visit(`/${_paths.default}`);
-  });
-
-  it('should load card as blocklink', _tests.checkForBlocklink);
-  it('should load left-aligned section title', _tests.checkForTitlePosition);
-  it('should load heading, copy, cta on each card', _tests.checkForCardContent);
-  it('should render correctly in all themes', _tests.checkThemes);
-});
-
-describe('DDSCardSectionSimple | with cta (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 720);
-    cy.visit(`/${_paths.default}`);
-  });
-
-  it('should load card as blocklink', _tests.checkForBlocklink);
-  it('should load left-aligned section title', _tests.checkForTitlePosition);
-  it('should load heading, copy, cta on each card', _tests.checkForCardContent);
-  it('should render correctly in all themes', _tests.checkThemes);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/ContentGroupPictograms/ContentGroupPictograms.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/ContentGroupPictograms/ContentGroupPictograms.e2e.js
deleted file mode 100644
index 0ede55fcf54..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/ContentGroupPictograms/ContentGroupPictograms.e2e.js
+++ /dev/null
@@ -1,263 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (default Content Group Pictograms Default)
- *
- * @type {string}
- * @private
- */
-const _pathDefault =
-  '/iframe.html?id=components-content-group-pictograms--default';
-
-/**
- * Sets parameters to render Pictogram Items with CTA
- *
- * @type {string}
- * @private
- */
-const _withCTA =
-  '&knob-Number%20of%20PictogramItems=3&knob-Item%202%20CTA%20(items.cta)=true&knob-Item%201%20CTA%20(items.cta)=true&knob-Item%203%20CTA%20(items.cta)=true';
-
-/**
- * Sets parameters to render Pictogram Items with custom pictograms
- *
- * @type {string}
- * @private
- */
-const _withCustomPictograms =
-  '&knob-Number%20of%20PictogramItems=3&knob-Item%201%20Pictogram%20(pictogram)=TouchScreen&knob-Item%202%20Pictogram%20(pictogram)=Touch&knob-Item%203%20Pictogram%20(pictogram)=Pattern';
-
-describe('dds-content-group-pictograms | default (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefault}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load content group heading and copy before the pictograms', () => {
-    cy.get(`[data-autoid="dds--content-group__children"]`).then(() => {
-      cy.get(`[data-autoid="dds--content-group"]`)
-        .find(`[data-autoid="dds--content-group__title"]`)
-        .should('be.visible');
-
-      cy.get(`[data-autoid="dds--content-group"]`)
-        .find(`div.bx--content-group__copy p`)
-        .should('be.visible');
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load pictogram item and content', () => {
-    cy.visit(`/${_pathDefault}${_withCTA}`);
-    cy.viewport(1280, 780);
-
-    cy.wait(100);
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item`
-    ).each($item => {
-      cy.wrap($item).within(() => {
-        cy.get('[data-autoid="dds--pictogram-item__pictogram"]').should(
-          'be.visible'
-        );
-
-        cy.get('[data-autoid="dds--content-item__heading"]').should(
-          'be.visible'
-        );
-
-        cy.get('[data-autoid="dds--content-item__copy"]').should('be.visible');
-
-        cy.get('[data-autoid="dds--link-with-icon"]').should('be.visible');
-      });
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should have CTA Link with icon loaded and clickable for each pictogram', () => {
-    cy.visit(`/${_pathDefault}${_withCTA}`);
-    cy.viewport(1280, 780);
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item`
-    ).each($item => {
-      cy.wrap($item).within(() => {
-        cy.get('[data-autoid="dds--link-with-icon"]')
-          .find('a')
-          .each($link => {
-            const url = $link.prop('href');
-            expect(url).not.to.be.empty;
-          });
-      });
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should have customizable pictogram SVG', () => {
-    cy.visit(`/${_pathDefault}${_withCustomPictograms}`);
-    cy.viewport(1280, 780);
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item:nth-child(1) svg path`
-    ).then($pictogram => {
-      expect($pictogram).to.have.attr(
-        'd',
-        'M13.002,30.36c-2.405,0-4.362-2.027-4.362-4.519V15.037c0-0.771,0.609-1.397,1.358-1.397	s1.358,0.626,1.358,1.397l0.003,3.354c0.191-0.105,0.409-0.166,0.641-0.166c0.51,0,0.956,0.291,1.188,0.72	c0.227-0.174,0.509-0.277,0.813-0.277c0.596,0,1.104,0.397,1.286,0.948c0.208-0.133,0.453-0.21,0.715-0.21	c0.749,0,1.358,0.627,1.358,1.397v5.039C17.36,28.333,15.405,30.36,13.002,30.36z M9.998,14.36c-0.352,0-0.638,0.304-0.638,0.677	v10.805c0,2.095,1.634,3.798,3.643,3.798c2.006,0,3.638-1.703,3.638-3.798v-5.039c0-0.373-0.286-0.677-0.638-0.677	s-0.638,0.304-0.638,0.677v1.196c0,0.198-0.161,0.359-0.359,0.36l0,0c-0.198,0-0.359-0.161-0.36-0.359l-0.005-1.935	c0-0.374-0.286-0.678-0.638-0.678c-0.354,0-0.642,0.304-0.642,0.677l0.004,1.934c0,0.199-0.16,0.36-0.359,0.361l0,0	c-0.199,0-0.359-0.161-0.36-0.359l-0.005-2.378v-0.001c0-0.373-0.286-0.676-0.638-0.676s-0.638,0.303-0.638,0.676v2.378	c0,0.199-0.161,0.36-0.36,0.36s-0.36-0.161-0.36-0.36l-0.005-6.961C10.636,14.664,10.35,14.36,9.998,14.36z M31,29.36h-9	c-0.199,0-0.36-0.161-0.36-0.36v-7.64H19v-0.72h6.64v-2.28H19v-0.72h6.64V2.36H1.36v15.28H7v0.721H1.36v2.279H7v0.721H1	c-0.199,0-0.36-0.161-0.36-0.36V2c0-0.199,0.161-0.36,0.36-0.36h25c0.199,0,0.36,0.161,0.36,0.36v10.64H31	c0.199,0,0.36,0.161,0.36,0.36v16C31.36,29.199,31.199,29.36,31,29.36z M22.36,28.64h8.279v-2.28H22.36V28.64z M22.36,25.64h8.279	V13.36H26.36V21c0,0.199-0.161,0.36-0.36,0.36h-3.64V25.64z'
-      );
-    });
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item:nth-child(2) svg path`
-    ).then($pictogram => {
-      expect($pictogram).to.have.attr(
-        'd',
-        'M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444	c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269	c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0	c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01	C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357	c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7	c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337	c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192	c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729	C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729	l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64	c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z'
-      );
-    });
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item:nth-child(3) svg path`
-    ).then($pictogram => {
-      expect($pictogram).to.have.attr(
-        'd',
-        'M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3	c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16	C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13	c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8	c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6	c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3	c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36	V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2	c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36	H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36	c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2	c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1	C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8	v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z'
-      );
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(1280, 780);
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('dds-content-group-pictograms | default (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-  });
-
-  it('should load content group heading and copy before the pictograms', () => {
-    cy.get(`[data-autoid="dds--content-group__children"]`).then(() => {
-      cy.get(`[data-autoid="dds--content-group"]`)
-        .find(`[data-autoid="dds--content-group__title"]`)
-        .should('be.visible');
-
-      cy.get(`[data-autoid="dds--content-group"]`)
-        .find(`div.bx--content-group__copy p`)
-        .should('be.visible');
-    });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load pictogram item and content', () => {
-    cy.visit(`/${_pathDefault}${_withCTA}`);
-    cy.viewport(320, 780);
-
-    cy.wait(100);
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item`
-    ).each($item => {
-      cy.wrap($item).within(() => {
-        cy.get('[data-autoid="dds--pictogram-item__pictogram"]').should(
-          'be.visible'
-        );
-
-        cy.get('[data-autoid="dds--content-item__heading"]').should(
-          'be.visible'
-        );
-
-        cy.get('[data-autoid="dds--content-item__copy"]').should('be.visible');
-
-        cy.get('[data-autoid="dds--link-with-icon"]').should('be.visible');
-      });
-    });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should have CTA Link with icon loaded and clickable for each pictogram', () => {
-    cy.visit(`/${_pathDefault}${_withCTA}`);
-    cy.viewport(320, 780);
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item`
-    ).each($item => {
-      cy.wrap($item).within(() => {
-        cy.get('[data-autoid="dds--link-with-icon"]')
-          .find('a')
-          .each($link => {
-            const url = $link.prop('href');
-            expect(url).not.to.be.empty;
-          });
-      });
-    });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should have customizable pictogram SVG', () => {
-    // TODO d. Pictogram item can be customized (desktop, touch, pattern)
-
-    cy.visit(`/${_pathDefault}${_withCustomPictograms}`);
-    cy.viewport(320, 780);
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item:nth-child(1) svg path`
-    ).then($pictogram => {
-      expect($pictogram).to.have.attr(
-        'd',
-        'M13.002,30.36c-2.405,0-4.362-2.027-4.362-4.519V15.037c0-0.771,0.609-1.397,1.358-1.397	s1.358,0.626,1.358,1.397l0.003,3.354c0.191-0.105,0.409-0.166,0.641-0.166c0.51,0,0.956,0.291,1.188,0.72	c0.227-0.174,0.509-0.277,0.813-0.277c0.596,0,1.104,0.397,1.286,0.948c0.208-0.133,0.453-0.21,0.715-0.21	c0.749,0,1.358,0.627,1.358,1.397v5.039C17.36,28.333,15.405,30.36,13.002,30.36z M9.998,14.36c-0.352,0-0.638,0.304-0.638,0.677	v10.805c0,2.095,1.634,3.798,3.643,3.798c2.006,0,3.638-1.703,3.638-3.798v-5.039c0-0.373-0.286-0.677-0.638-0.677	s-0.638,0.304-0.638,0.677v1.196c0,0.198-0.161,0.359-0.359,0.36l0,0c-0.198,0-0.359-0.161-0.36-0.359l-0.005-1.935	c0-0.374-0.286-0.678-0.638-0.678c-0.354,0-0.642,0.304-0.642,0.677l0.004,1.934c0,0.199-0.16,0.36-0.359,0.361l0,0	c-0.199,0-0.359-0.161-0.36-0.359l-0.005-2.378v-0.001c0-0.373-0.286-0.676-0.638-0.676s-0.638,0.303-0.638,0.676v2.378	c0,0.199-0.161,0.36-0.36,0.36s-0.36-0.161-0.36-0.36l-0.005-6.961C10.636,14.664,10.35,14.36,9.998,14.36z M31,29.36h-9	c-0.199,0-0.36-0.161-0.36-0.36v-7.64H19v-0.72h6.64v-2.28H19v-0.72h6.64V2.36H1.36v15.28H7v0.721H1.36v2.279H7v0.721H1	c-0.199,0-0.36-0.161-0.36-0.36V2c0-0.199,0.161-0.36,0.36-0.36h25c0.199,0,0.36,0.161,0.36,0.36v10.64H31	c0.199,0,0.36,0.161,0.36,0.36v16C31.36,29.199,31.199,29.36,31,29.36z M22.36,28.64h8.279v-2.28H22.36V28.64z M22.36,25.64h8.279	V13.36H26.36V21c0,0.199-0.161,0.36-0.36,0.36h-3.64V25.64z'
-      );
-    });
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item:nth-child(2) svg path`
-    ).then($pictogram => {
-      expect($pictogram).to.have.attr(
-        'd',
-        'M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444	c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269	c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0	c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01	C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357	c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7	c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337	c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192	c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729	C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729	l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64	c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z'
-      );
-    });
-
-    cy.get(
-      `[data-autoid="dds--content-group__children"] .bx--pictogram-item:nth-child(3) svg path`
-    ).then($pictogram => {
-      expect($pictogram).to.have.attr(
-        'd',
-        'M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3	c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16	C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13	c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8	c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6	c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3	c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36	V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2	c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36	H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36	c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2	c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3	c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1	C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1	c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8	c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8	v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z'
-      );
-    });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-
-    cy.carbonThemesScreenshot(
-      {},
-      {
-        widths: [320],
-      }
-    );
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/ContentItem/ContentItem.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/ContentItem/ContentItem.e2e.js
deleted file mode 100644
index f334b75503d..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/ContentItem/ContentItem.e2e.js
+++ /dev/null
@@ -1,158 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * 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';
-
-/**
- * Defines the component path.
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-content-item--default';
-
-/**
- * Defines the component selector.
- *
- * @type {string}
- * @private
- */
-const _selector = '[data-autoid="dds--content-item"]';
-
-/**
- * Collection of test scenarios.
- *
- * @type {Array<function>}
- * @private
- */
-const _tests = [
-  () => {
-    it('should check a11y', () => {
-      cy.visit(_path);
-      cy.injectAxe();
-      cy.checkAxeA11y();
-    });
-  },
-  () => {
-    it('should render customizable header text', () => {
-      let defaultHeader, customHeaderOutput;
-      const customHeaderInput = 'Lorem ipsum dolor sit amet';
-
-      cy.visit(_path)
-        .get(_selector)
-        .find('[data-autoid="dds--content-item__heading"]')
-        .then(([copy]) => {
-          defaultHeader = copy.innerText.trim();
-        })
-        .visit(`${_path}&knob-Heading%20(heading):=${customHeaderInput}`)
-        .get(_selector)
-        .find('[data-autoid="dds--content-item__heading"]')
-        .should(([copy]) => {
-          customHeaderOutput = copy.innerText.trim();
-          expect(customHeaderOutput).to.be.eq(customHeaderInput);
-          expect(customHeaderOutput).to.not.eq(defaultHeader);
-        });
-      cy.takeSnapshots();
-    });
-  },
-  () => {
-    let defaultCopy, customCopyOutput;
-    const customCopyInput = 'Lorem ipsum dolor sit amet';
-
-    it('should render customizable copy text', () => {
-      cy.visit(_path)
-        .get(_selector)
-        .find('[data-autoid="dds--content-item__copy"]')
-        .then(([copy]) => {
-          defaultCopy = copy.innerText.trim();
-        })
-        .visit(`${_path}&knob-Copy%20(copy):=${customCopyInput}`)
-        .get(_selector)
-        .find('[data-autoid="dds--content-item__copy"]')
-        .then(([copy]) => {
-          customCopyOutput = copy.innerText.trim();
-          expect(customCopyOutput).to.be.eq(customCopyInput);
-          expect(customCopyOutput).to.not.eq(defaultCopy);
-        });
-      cy.takeSnapshots();
-    });
-  },
-  () => {
-    it('should render customizable CTA text', () => {
-      let defaultCopy, customCopyOutput;
-      const customCopyInput = 'Consectetur adipiscing elit.';
-      cy.visit(_path)
-        .get(_selector)
-        .find('.bx--content-item__cta a')
-        .then(([copy]) => {
-          defaultCopy = copy.innerText.trim();
-        })
-        .visit(`${_path}&knob-CTA%20copy=${customCopyInput}`)
-        .get(_selector)
-        .find('.bx--content-item__cta a')
-        .should(([copy]) => {
-          customCopyOutput = copy.innerText.trim();
-          expect(customCopyOutput).to.be.eq(customCopyInput);
-          expect(customCopyOutput).to.not.eq(defaultCopy);
-        });
-      cy.takeSnapshots();
-    });
-  },
-  () => {
-    it('should support clickable text and button CTA links', () => {
-      const cta_types = {
-        text: 'a.bx--link-with-icon',
-        button: 'a.bx--btn',
-      };
-      Object.keys(cta_types).forEach(type => {
-        cy.visit(`${_path}&knob-CTA%20style=${type}`)
-          .get(_selector)
-          .find(cta_types[type])
-          .should($link => {
-            expect($link.prop('href')).not.to.be.empty;
-          });
-        cy.takeSnapshots();
-      });
-    });
-  },
-  () => {
-    it('should support image and video media', () => {
-      const media_types = {
-        image: '[data-autoid="dds--image-with-caption"]',
-        video: '.bx--video-player',
-      };
-      Object.keys(media_types).forEach(type => {
-        cy.visit(`${_path}&knob-Media%20type:=${type}`)
-          .get(_selector)
-          .find(media_types[type])
-          .should('have.length', 1);
-        cy.takeSnapshots();
-      });
-    });
-  },
-  () => {
-    it('should render correctly in all themes', () => {
-      cy.visit(_path).carbonThemesScreenshot({
-        capture: 'viewport',
-      });
-    });
-  },
-];
-
-describe('dds-content-item | default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-  });
-  _tests.forEach(test => test());
-});
-
-describe('dds-content-item | default (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(320, 720);
-  });
-  _tests.forEach(test => test());
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/FeatureCard/FeatureCard.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/FeatureCard/FeatureCard.e2e.js
deleted file mode 100644
index 3bf77bfeb2c..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/FeatureCard/FeatureCard.e2e.js
+++ /dev/null
@@ -1,210 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path for the medium variation
- *
- * @type {string}
- * @private
- */
-const _pathMedium = '/iframe.html?id=components-feature-card--default';
-
-/**
- * Sets the correct path for the large variation
- *
- * @type {string}
- * @private
- */
-const _pathLarge = '/iframe.html?id=components-feature-card--large';
-
-/* eslint-disable cypress/no-unnecessary-waiting */
-describe('Feature Card | medium', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathMedium}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check for a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should check for link', () => {
-    cy.get('.bx--feature-card a.bx--link').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-    cy.screenshot();
-  });
-
-  it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('.bx--feature-card a.bx--link').then($els => {
-      const win = $els[0].ownerDocument.defaultView;
-      const after = win.getComputedStyle($els[0], ':after');
-      const positionValue = after.getPropertyValue('position');
-      const insetValue = after.getPropertyValue('inset');
-
-      expect(positionValue).to.eq('absolute');
-      if (Cypress.browser.name !== 'firefox') {
-        expect(insetValue).to.eq('0px');
-      }
-    });
-  });
-
-  it('should have image on the left and content on the right side of the card', () => {
-    // TODO: currently React's FeatureCard stories aren't left aligned,
-    // update these values when they become as such
-
-    // image takes the left half
-    cy.get('.bx--image').then($image => {
-      expect($image[0].getBoundingClientRect().left).to.equal(344);
-      expect($image[0].getBoundingClientRect().right).to.equal(640);
-    });
-
-    // image takes the right half
-    cy.get('.bx--card__wrapper').then($content => {
-      expect($content[0].getBoundingClientRect().left).to.equal(640);
-      expect($content[0].getBoundingClientRect().right).to.equal(936);
-    });
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathMedium}`);
-    cy.viewport(1280, 780);
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('FeatureCard medium (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathMedium}`);
-    cy.viewport(320, 780);
-  });
-
-  it('should check for link', () => {
-    cy.get('.bx--feature-card a.bx--link').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-    cy.screenshot();
-  });
-
-  it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('.bx--feature-card a.bx--link').then($els => {
-      const win = $els[0].ownerDocument.defaultView;
-      const after = win.getComputedStyle($els[0], ':after');
-      const positionValue = after.getPropertyValue('position');
-      const insetValue = after.getPropertyValue('inset');
-
-      expect(positionValue).to.eq('absolute');
-      if (Cypress.browser.name !== 'firefox') {
-        expect(insetValue).to.eq('0px');
-      }
-    });
-  });
-});
-
-describe('FeatureCard | large', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathLarge}`);
-    cy.injectAxe();
-    cy.viewport(1400, 780);
-  });
-
-  it('should check for a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should check for link', () => {
-    cy.get('.bx--feature-card-large a.bx--link').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-    cy.screenshot();
-  });
-
-  it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('.bx--feature-card-large a.bx--link').then($els => {
-      const win = $els[0].ownerDocument.defaultView;
-      const after = win.getComputedStyle($els[0], ':after');
-      const positionValue = after.getPropertyValue('position');
-      const insetValue = after.getPropertyValue('inset');
-
-      expect(positionValue).to.eq('absolute');
-      if (Cypress.browser.name !== 'firefox') {
-        expect(insetValue).to.eq('0px');
-      }
-    });
-  });
-
-  it('should have eyebrow, heading, and copy content', () => {
-    cy.get('.bx--card__eyebrow')
-      .invoke('text')
-      .should('not.be.empty');
-    cy.get('.bx--card__heading')
-      .invoke('text')
-      .should('not.be.empty');
-    cy.get('.bx--card__copy')
-      .invoke('text')
-      .should('not.be.empty');
-  });
-
-  it('should have image on the left and content on the right half of the card', () => {
-    // TODO: currently React's FeatureCard stories aren't left aligned,
-    // update these values when they become as such
-
-    // image takes the left half
-    cy.get('.bx--image').then($image => {
-      expect($image[0].getBoundingClientRect().left).to.equal(187);
-      expect($image[0].getBoundingClientRect().right).to.equal(700);
-    });
-
-    // image takes the right half
-    cy.get('.bx--card__wrapper').then($content => {
-      expect($content[0].getBoundingClientRect().left).to.equal(700);
-      expect($content[0].getBoundingClientRect().right).to.equal(1213);
-    });
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathLarge}`);
-    cy.viewport(1280, 780);
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('FeatureCard large (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathLarge}`);
-    cy.viewport(320, 780);
-  });
-
-  it('should check for link', () => {
-    cy.get('.bx--feature-card-large a.bx--link').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-
-    cy.screenshot();
-  });
-
-  it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('.bx--feature-card-large a.bx--link').then($els => {
-      const win = $els[0].ownerDocument.defaultView;
-      const after = win.getComputedStyle($els[0], ':after');
-      const positionValue = after.getPropertyValue('position');
-      const insetValue = after.getPropertyValue('inset');
-
-      expect(positionValue).to.eq('absolute');
-      if (Cypress.browser.name !== 'firefox') {
-        expect(insetValue).to.eq('0px');
-      }
-    });
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer-micro.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer-micro.e2e.js
deleted file mode 100644
index 947e59ed1c6..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer-micro.e2e.js
+++ /dev/null
@@ -1,156 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Micro)
- *
- * @type {string}
- * @private
- */
-const _pathMicro = '/iframe.html?id=components-footer--micro';
-
-/**
- * Sets the correct path (Micro language only)
- *
- * @type {string}
- * @private
- */
-const _pathMicroLanguageOnly =
-  '/iframe.html?id=components-footer--micro-language-only';
-
-describe('Footer | Micro (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathMicro}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load locale modal with 4 geos ', () => {
-    cy.get(`[data-autoid="dds--locale-btn"]`).click();
-
-    cy.get('div[data-autoid="dds--locale-modal"]').should('have.attr', 'open');
-
-    cy.get('.bx--locale-modal [data-region]').should('have.length', 4);
-
-    cy.screenshot();
-  });
-
-  it('should load the Asia Pacific region with its languages and locations', () => {
-    cy.get(`[data-autoid="dds--locale-btn"]`).click();
-    cy.get('[data-region="ap"]').click();
-
-    cy.get('.bx--locale-modal__locales').should('have.length', 19);
-
-    cy.takeSnapshots();
-  });
-
-  it('should load all 4 interactable legal links', () => {
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).should('have.length', 4);
-
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-});
-
-describe('Footer | Micro language only (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathMicroLanguageOnly}`);
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should load language selector dropdown', () => {
-    cy.get(`[data-autoid="dds--language-selector"]`).click();
-
-    cy.takeSnapshots();
-  });
-
-  it('should be able to select a language from combo box', () => {
-    cy.get(`[data-autoid="dds--language-selector"]`).click();
-    cy.get(`[data-autoid="dds--footer"]`)
-      .find(
-        `.bx--list-box__menu > .bx--list-box__menu-item:nth-of-type(1) .bx--list-box__menu-item__option`
-      )
-      .click();
-    cy.get(`[data-autoid="dds--language-selector"]`).should(
-      'have.value',
-      'Arabic / عربية'
-    );
-
-    cy.takeSnapshots();
-  });
-});
-
-describe('Footer | Micro (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathMicro}`);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should load locale modal with 4 geos ', () => {
-    cy.get(`[data-autoid="dds--locale-btn"]`).click();
-
-    cy.get('div[data-autoid="dds--locale-modal"]').should('have.attr', 'open');
-
-    cy.get('.bx--locale-modal [data-region]').should('have.length', 4);
-
-    cy.screenshot();
-  });
-
-  it('should load the Asia Pacific region with its languages and locations', () => {
-    cy.get(`[data-autoid="dds--locale-btn"]`).click();
-    cy.get('[data-region="ap"]').click();
-
-    cy.get('.bx--locale-modal__locales').should('have.length', 19);
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load all 4 interactable legal links', () => {
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).should('have.length', 4);
-
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-});
-
-describe('Footer | Micro language only (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathMicroLanguageOnly}`);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should load language selector and be interactive', () => {
-    cy.get('[data-autoid="dds--language-selector__select"]').should(
-      'have.length',
-      1
-    );
-
-    const languageSelector = cy.get(
-      '[data-autoid="dds--language-selector__select"]'
-    );
-    languageSelector.select('Arabic / عربية');
-    languageSelector.should('have.value', 'ar');
-
-    cy.takeSnapshots('mobile');
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer-short.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer-short.e2e.js
deleted file mode 100644
index 0e7c866973b..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer-short.e2e.js
+++ /dev/null
@@ -1,289 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Short)
- *
- * @type {string}
- * @private
- */
-const _pathShort = '/iframe.html?id=components-footer--short';
-
-/**
- * Sets the correct path (Short language only)
- *
- * @type {string}
- * @private
- */
-const _pathShortLanguageOnly =
-  '/iframe.html?id=components-footer--short-language-only';
-
-describe('Footer | Short (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`${_pathShort}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should display clickable IBM logo', () => {
-    cy.get('a[data-autoid="dds--footer-logo__link"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should open locale modal with 4 geos when clicked on locale button', () => {
-    cy.get('button[data-autoid="dds--locale-btn"]').click();
-
-    cy.wait(500);
-
-    cy.get('div[data-autoid="dds--locale-modal"]').should('have.attr', 'open');
-
-    cy.get('[data-autoid="dds--locale-modal"] [data-region]').should(
-      'have.length',
-      4
-    );
-
-    cy.takeSnapshots();
-  });
-
-  it('should display the specific locations and languages of a selected geo', () => {
-    cy.get('button[data-autoid="dds--locale-btn"]').click();
-
-    cy.wait(500);
-
-    cy.get(
-      '[data-autoid="dds--locale-modal"] [data-autoid="dds--card"][data-region="mea"]'
-    )
-      .find('a')
-      .click();
-
-    cy.wait(500);
-
-    cy.get('[data-autoid="dds--locale-modal"]')
-      .find('ul li a[href][data-region]')
-      .each($locale => {
-        if (!$locale.attr('data-region') === 'mea') {
-          $locale.should('not.be.visible');
-        }
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should display interactive search field and with keywords for locations and languages', () => {
-    cy.get('button[data-autoid="dds--locale-btn"]').click();
-
-    cy.wait(500);
-
-    cy.get(
-      '[data-autoid="dds--locale-modal"] [data-autoid="dds--card"][data-region="am"]'
-    )
-      .find('a')
-      .click();
-
-    cy.wait(500);
-
-    cy.get('input[data-autoid="dds--locale-modal__filter"]')
-      .type('gen')
-      .get(
-        '.bx--locale-modal__list li a:not(.bx--locale-modal__locales-hidden)'
-      )
-      .contains('Argentina');
-
-    cy.get('.bx--locale-modal__search input')
-      .clear()
-      .type('por')
-      .get(
-        '.bx--locale-modal__list li a:not(.bx--locale-modal__locales-hidden)'
-      )
-      .contains('Brazil (Brasil)');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load footer legal navigation with clickable links', () => {
-    cy.get('[data-autoid="dds--footer-legal-nav"]')
-      .find('.bx--legal-nav__list-item .bx--footer__link')
-      .each($link => {
-        const url = $link.prop('href');
-        expect(url).not.to.be.empty;
-      });
-
-    cy.takeSnapshots();
-  });
-});
-
-describe('Footer | Short language only (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathShortLanguageOnly}`);
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should load IBM logo and and be interactive', () => {
-    const footerLogo = cy.get('[data-autoid="dds--footer-logo"]');
-    footerLogo.should('have.length', 1);
-    footerLogo.find('a').each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load language selector dropdown', () => {
-    cy.get(`[data-autoid="dds--language-selector"]`).click();
-
-    cy.takeSnapshots();
-  });
-
-  it('should be able to select a language from combo box', () => {
-    cy.get(`[data-autoid="dds--language-selector"]`).click();
-    cy.get(`[data-autoid="dds--footer"]`)
-      .find(
-        `.bx--list-box__menu > .bx--list-box__menu-item:nth-of-type(1) .bx--list-box__menu-item__option`
-      )
-      .click();
-    cy.get(`[data-autoid="dds--language-selector"]`).should(
-      'have.value',
-      'Arabic / عربية'
-    );
-
-    cy.takeSnapshots();
-  });
-});
-
-describe('Footer | Short (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`${_pathShort}`);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should display clickable IBM logo', () => {
-    cy.get('a[data-autoid="dds--footer-logo__link"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should open locale modal with 4 geos when clicked on locale button', () => {
-    cy.get('button[data-autoid="dds--locale-btn"]').click();
-
-    cy.wait(500);
-
-    cy.get('div[data-autoid="dds--locale-modal"]').should('have.attr', 'open');
-
-    cy.get('[data-autoid="dds--locale-modal"] [data-region]').should(
-      'have.length',
-      4
-    );
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should display the specific locations and languages of a selected geo', () => {
-    cy.get('button[data-autoid="dds--locale-btn"]').click();
-
-    cy.wait(500);
-
-    cy.get(
-      '[data-autoid="dds--locale-modal"] [data-autoid="dds--card"][data-region="mea"]'
-    )
-      .find('a')
-      .click();
-
-    cy.wait(500);
-
-    cy.get('[data-autoid="dds--locale-modal"]')
-      .find('ul li a[href][data-region]')
-      .each($locale => {
-        if (!$locale.attr('data-region') === 'mea') {
-          $locale.should('not.be.visible');
-        }
-      });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should display interactive search field and with keywords for locations and languages', () => {
-    cy.get('button[data-autoid="dds--locale-btn"]').click();
-
-    cy.wait(500);
-
-    cy.get(
-      '[data-autoid="dds--locale-modal"] [data-autoid="dds--card"][data-region="am"]'
-    )
-      .find('a')
-      .click();
-
-    cy.wait(500);
-
-    cy.get('input[data-autoid="dds--locale-modal__filter"]')
-      .type('gen')
-      .get(
-        '.bx--locale-modal__list li a:not(.bx--locale-modal__locales-hidden)'
-      )
-      .contains('Argentina');
-
-    cy.get('.bx--locale-modal__search input')
-      .clear()
-      .type('por')
-      .get(
-        '.bx--locale-modal__list li a:not(.bx--locale-modal__locales-hidden)'
-      )
-      .contains('Brazil (Brasil)');
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load footer legal navigation with clickable links', () => {
-    cy.get('[data-autoid="dds--footer-legal-nav"]')
-      .find('.bx--legal-nav__list-item .bx--footer__link')
-      .each($link => {
-        const url = $link.prop('href');
-        expect(url).not.to.be.empty;
-      });
-
-    cy.takeSnapshots('mobile');
-  });
-});
-
-describe('Footer | Short language only (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathShortLanguageOnly}`);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
-  });
-
-  it('should load language selector and be interactive', () => {
-    cy.get('[data-autoid="dds--language-selector__select"]').should(
-      'have.length',
-      1
-    );
-
-    const languageSelector = cy.get(
-      '[data-autoid="dds--language-selector__select"]'
-    );
-    languageSelector.select('Arabic / عربية');
-    languageSelector.should('have.value', 'ar');
-
-    cy.takeSnapshots('mobile');
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer.e2e.js
deleted file mode 100644
index 786ed55f473..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Footer/Footer.e2e.js
+++ /dev/null
@@ -1,269 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (default Footer)
- *
- * @type {string}
- * @private
- */
-const _pathDefault = '/iframe.html?id=components-footer--default';
-
-/**
- * Sets the correct path (default language only Footer)
- *
- * @type {string}
- * @private
- */
-const _pathDefaultLanguageOnly =
-  '/iframe.html?id=components-footer--default-language-only';
-
-describe('Footer | default (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefault}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-nav-group"]').first().should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should have interactable url for IBM logo', () => {
-    cy.get('[data-autoid="dds--footer-logo__link"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load locale modal', () => {
-    const localeButton = cy.get(`[data-autoid="dds--locale-btn"]`);
-    localeButton.click();
-
-    cy.screenshot();
-  });
-
-  it('should load the Americas region with its languages and locations', () => {
-    const localeButton = cy.get(`[data-autoid="dds--locale-btn"]`);
-    localeButton.click();
-
-    cy.get('[data-region="am"]').click();
-
-    cy.get('.bx--locale-modal__locales').should('have.length', 35);
-
-    cy.takeSnapshots();
-  });
-
-  it('should be able to search with keywords for locations and languages', () => {
-    const localeButton = cy.get(`[data-autoid="dds--locale-btn"]`);
-    localeButton.click();
-
-    cy.get('[data-region="am"]').click();
-    cy.get('[data-autoid="dds--locale-modal__filter"]').type('mexico', {
-      force: true,
-    });
-
-    cy.get(
-      '.bx--locale-modal__locales:not(.bx--locale-modal__locales-hidden) > div'
-    )
-      .first()
-      .then(e => {
-        expect(e.text()).to.equal('Mexico');
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load all the 38 navigation links', () => {
-    cy.get(`[data-autoid="dds--footer-nav-group__link"]`).should(
-      'have.length',
-      38
-    );
-    cy.screenshot();
-  });
-
-  it('should load all 4 interactable legal links', () => {
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).should('have.length', 4);
-
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-});
-
-describe('Footer | Default language only (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefaultLanguageOnly}`);
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-nav-group"]').first().should('not.be.empty'));
-  });
-
-  it('should load IBM logo and and be interactive', () => {
-    const footerLogo = cy.get('[data-autoid="dds--footer-logo"]');
-    footerLogo.should('have.length', 1);
-    footerLogo.find('a').each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load language selector dropdown', () => {
-    cy.get(`[data-autoid="dds--language-selector"]`).click();
-
-    cy.takeSnapshots();
-  });
-
-  it('should be able to select a language from combo box', () => {
-    cy.get(`[data-autoid="dds--language-selector"]`).click();
-    cy.get(`[data-autoid="dds--footer"]`)
-      .find(
-        `.bx--list-box__menu > .bx--list-box__menu-item:nth-of-type(1) .bx--list-box__menu-item__option`
-      )
-      .click();
-    cy.get(`[data-autoid="dds--language-selector"]`).should(
-      'have.value',
-      'Arabic / عربية'
-    );
-
-    cy.takeSnapshots();
-  });
-
-  it('should load all the 38 navigation links', () => {
-    cy.get(`[data-autoid="dds--footer-nav-group__link"]`).should(
-      'have.length',
-      38
-    );
-    cy.screenshot();
-  });
-
-  it('should load all 4 interactable legal links', () => {
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).should('have.length', 4);
-
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-});
-
-describe('Footer | default (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-nav-group"]').first().should('not.be.empty'));
-  });
-
-  it('should have interactable url for IBM logo', () => {
-    cy.get('[data-autoid="dds--footer-logo__link"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load locale modal', () => {
-    const localeButton = cy.get(`[data-autoid="dds--locale-btn"]`);
-    localeButton.click();
-
-    cy.screenshot();
-  });
-
-  it('should load the Americas region with its languages and locations', () => {
-    const localeButton = cy.get(`[data-autoid="dds--locale-btn"]`);
-    localeButton.click();
-
-    cy.get('[data-region="am"]').click();
-
-    cy.get('.bx--locale-modal__locales').should('have.length', 35);
-
-    cy.screenshot();
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should be able to search with keywords for locations and languages', () => {
-    const localeButton = cy.get(`[data-autoid="dds--locale-btn"]`);
-    localeButton.click();
-
-    cy.get('[data-region="am"]').click();
-    cy.get('[data-autoid="dds--locale-modal__filter"]').type('mexico', {
-      force: true,
-    });
-
-    cy.get(
-      '.bx--locale-modal__locales:not(.bx--locale-modal__locales-hidden) > div'
-    )
-      .first()
-      .then(e => {
-        expect(e.text()).to.equal('Mexico');
-      });
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load all the 38 navigation links', () => {
-    cy.get(`[data-autoid="dds--footer-nav-group__link"]`).should(
-      'have.length',
-      38
-    );
-    cy.screenshot();
-  });
-
-  it('should load all 4 interactable legal links', () => {
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).should('have.length', 4);
-
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-});
-
-describe('Footer | Default language only (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(`/${_pathDefaultLanguageOnly}`);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-nav-group"]').first().should('not.be.empty'));
-  });
-
-  it('should load language selector and be interactive', () => {
-    cy.get('[data-autoid="dds--language-selector__select"]').should(
-      'have.length',
-      1
-    );
-
-    const languageSelector = cy.get(
-      '[data-autoid="dds--language-selector__select"]'
-    );
-    languageSelector.select('Arabic / عربية');
-    languageSelector.should('have.value', 'ar');
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load all the 38 navigation links', () => {
-    cy.get(`[data-autoid="dds--footer-nav-group__link"]`).should(
-      'have.length',
-      38
-    );
-    cy.screenshot();
-  });
-
-  it('should load all 4 interactable legal links', () => {
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).should('have.length', 4);
-
-    cy.get(`[data-autoid^='dds--footer-legal-nav__']`).each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LeadSpace/LeadSpace.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LeadSpace/LeadSpace.e2e.js
deleted file mode 100644
index ed2342207f8..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LeadSpace/LeadSpace.e2e.js
+++ /dev/null
@@ -1,449 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Tall)
- *
- * @type {string}
- * @private
- */
-const _pathTall = '/iframe.html?id=components-lead-space--tall-with-no-image';
-
-/**
- * Sets the correct path (Tall with image)
- *
- * @type {string}
- * @private
- */
-const _pathTallImage = '/iframe.html?id=components-lead-space--tall-with-image';
-
-/**
- * Sets the correct path (Centered)
- *
- * @type {string}
- * @private
- */
-const _pathCentered = '/iframe.html?id=components-lead-space--centered';
-
-/**
- * Sets the correct path (Centered with image)
- *
- * @type {string}
- * @private
- */
-const _pathCenteredImage =
-  '/iframe.html?id=components-lead-space--centered-with-image';
-
-/**
- * Sets the correct path (Medium)
- *
- * @type {string}
- * @private
- */
-const _pathMedium = '/iframe.html?id=components-lead-space--medium';
-
-/**
- * Sets the correct path (Medium with image)
- *
- * @type {string}
- * @private
- */
-const _pathMediumWithImage =
-  '/iframe.html?id=components-lead-space--medium-with-image';
-
-/**
- * Sets the correct path (Super)
- *
- * @type {string}
- * @private
- */
-const _pathSuper = '/iframe.html?id=components-lead-space--super';
-
-/**
- * Sets the correct path (Super with image)
- *
- * @type {string}
- * @private
- */
-const _pathSuperWithImage =
-  '/iframe.html?id=components-lead-space--super-with-image';
-
-/* eslint-disable cypress/no-unnecessary-waiting */
-describe('LeadSpace | tall', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathTall);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load title and copy - both left aligned', () => {
-    cy.visit(_pathTall);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--leadspace__title').then($title => {
-      expect($title[0].getBoundingClientRect().left).to.equal(16);
-    });
-
-    cy.get('.bx--leadspace__desc').then($desc => {
-      expect($desc[0].getBoundingClientRect().left).to.equal(16);
-    });
-  });
-
-  it('should render 3 buttons with different icons (arrow right, left, and PDF)', () => {
-    cy.visit(
-      `${_pathTall}&knob-Number%20of%20buttons=3&knob-Button%20Icon%201%20(renderIcon)=ArrowRight20&knob-Button%20Icon%202%20(renderIcon)=ArrowDown20&knob-Button%20Icon%203%20(renderIcon)=Pdf20`
-    );
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--buttongroup-item:nth-child(1) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z'
-      );
-    });
-
-    cy.get('.bx--buttongroup-item:nth-child(2) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z'
-      );
-    });
-
-    cy.get('.bx--buttongroup-item:nth-child(3) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M30 11L30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11zM8 9H2V23H4V18H8a2 2 0 002-2V11A2 2 0 008 9zm0 7H4V11H8zM16 23H12V9h4a4 4 0 014 4v6A4 4 0 0116 23zm-2-2h2a2 2 0 002-2V13a2 2 0 00-2-2H14z'
-      );
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load two buttons by default', () => {
-    cy.visit(_pathTall);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--button-group"] li').should('have.length', 2);
-  });
-
-  it('should load more than 2 buttons when customized and should all have links', () => {
-    cy.visit(`${_pathTall}&knob-Number%20of%20buttons=3`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--button-group"] li').should('have.length', 3);
-
-    cy.get('[data-autoid="dds--button-group"] li > a').each($button => {
-      const url = $button.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load without a background image', () => {
-    cy.visit(_pathTall);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--image').should('not.exist');
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`${_pathTall}`);
-    cy.viewport(1280, 780);
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | tall with image', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathTallImage);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load with background image', () => {
-    cy.visit(`/${_pathTallImage}`);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--image')
-      .find('picture')
-      .find('img')
-      .then($src => {
-        const imageSrc = $src.prop('src');
-        expect(imageSrc).not.to.be.empty;
-      });
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathTallImage}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | centered', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathCentered);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load title and copy - both centered', () => {
-    cy.visit(`/${_pathCentered}`);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--leadspace__title').then($title => {
-      expect($title[0].getBoundingClientRect().left).to.equal(328);
-    });
-
-    cy.get('.bx--leadspace__desc').then($desc => {
-      expect($desc[0].getBoundingClientRect().left).to.equal(328);
-    });
-  });
-
-  it('should load two buttons by default', () => {
-    cy.visit(`/${_pathCentered}`);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--buttongroup-item').should('have.length', 2);
-  });
-
-  it('should load buttons centered aligned', () => {
-    cy.visit(`/${_pathCentered}`);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--buttongroup').then($button => {
-      expect($button[0].getBoundingClientRect().left).to.equal(344);
-    });
-  });
-
-  it('should render 3 buttons with different icons (arrow right, left, and PDF)', () => {
-    cy.visit(
-      `/${_pathCentered}&knob-Number%20of%20buttons=3&knob-Button%20Icon%201%20(renderIcon)=ArrowRight20&knob-Button%20Icon%202%20(renderIcon)=ArrowDown20&knob-Button%20Icon%203%20(renderIcon)=Pdf20`
-    );
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--buttongroup-item:nth-child(1) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z'
-      );
-    });
-
-    cy.get('.bx--buttongroup-item:nth-child(2) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z'
-      );
-    });
-
-    cy.get('.bx--buttongroup-item:nth-child(3) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M30 11L30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11zM8 9H2V23H4V18H8a2 2 0 002-2V11A2 2 0 008 9zm0 7H4V11H8zM16 23H12V9h4a4 4 0 014 4v6A4 4 0 0116 23zm-2-2h2a2 2 0 002-2V13a2 2 0 00-2-2H14z'
-      );
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathCentered}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | centered with image', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathCenteredImage);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load with background image', () => {
-    cy.visit(`/${_pathCenteredImage}`);
-    cy.viewport(1280, 780);
-
-    cy.wait(500);
-
-    cy.get('.bx--image')
-      .find('picture')
-      .find('img')
-      .then($src => {
-        const imageSrc = $src.prop('src');
-        expect(imageSrc).not.to.be.empty;
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathCenteredImage}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | medium', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathMedium);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathMedium}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | medium with image', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathMediumWithImage);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathMediumWithImage}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | super', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathSuper);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load title and copy - both left aligned', () => {
-    cy.visit(_pathSuper);
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--leadspace__title').then($title => {
-      expect($title[0].getBoundingClientRect().left).to.equal(16);
-    });
-
-    cy.get('.bx--leadspace__desc').then($desc => {
-      expect($desc[0].getBoundingClientRect().left).to.equal(16);
-    });
-  });
-
-  it('should render 3 buttons with different icons (arrow right, left, and PDF)', () => {
-    cy.visit(
-      `${_pathSuper}&knob-Number%20of%20buttons=3&knob-Button%20Icon%201%20(renderIcon)=ArrowRight20&knob-Button%20Icon%202%20(renderIcon)=ArrowDown20&knob-Button%20Icon%203%20(renderIcon)=Pdf20`
-    );
-    cy.viewport(1280, 780);
-
-    cy.get('.bx--buttongroup-item:nth-child(1) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z'
-      );
-    });
-
-    cy.get('.bx--buttongroup-item:nth-child(2) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z'
-      );
-    });
-
-    cy.get('.bx--buttongroup-item:nth-child(3) svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M30 11L30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11zM8 9H2V23H4V18H8a2 2 0 002-2V11A2 2 0 008 9zm0 7H4V11H8zM16 23H12V9h4a4 4 0 014 4v6A4 4 0 0116 23zm-2-2h2a2 2 0 002-2V13a2 2 0 00-2-2H14z'
-      );
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load two buttons by default', () => {
-    cy.visit(_pathSuper);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--button-group"] li').should('have.length', 2);
-  });
-
-  it('should load more than 2 buttons when customized and should all have links', () => {
-    cy.visit(`${_pathSuper}&knob-Number%20of%20buttons=3`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--button-group"] li').should('have.length', 3);
-
-    cy.get('[data-autoid="dds--button-group"] li > a').each($button => {
-      const url = $button.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathSuper}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LeadSpace | super with image', () => {
-  it('should check a11y', () => {
-    cy.visit(_pathSuperWithImage);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load with background image', () => {
-    cy.visit(`/${_pathSuperWithImage}`);
-    cy.viewport(1280, 780);
-
-    cy.wait(500);
-
-    cy.get('.bx--image')
-      .find('picture')
-      .find('img')
-      .then($src => {
-        const imageSrc = $src.prop('src');
-        expect(imageSrc).not.to.be.empty;
-      });
-
-    cy.get('.bx--image').then($ele => {
-      expect($ele[0].offsetHeight).to.equal(640);
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathSuperWithImage}`);
-    cy.viewport(1280, 780);
-
-    cy.get('[data-autoid="dds--leadspace"]');
-
-    cy.carbonThemesScreenshot();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LightboxMediaViewer/LightboxMediaViewer.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LightboxMediaViewer/LightboxMediaViewer.e2e.js
deleted file mode 100644
index cac1dd6db14..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LightboxMediaViewer/LightboxMediaViewer.e2e.js
+++ /dev/null
@@ -1,224 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct defaultPath for LightboxMediaViewer
- *
- * @type {string}
- * @private
- */
-const _defaultPath =
-  '/iframe.html?id=components-lightbox-media-viewer--default';
-const _embeddedVideoPlayerPath =
-  '/iframe.html?id=components-lightbox-media-viewer--embedded-video-player';
-
-const _tests = {
-  checkMediaMetadata() {
-    cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]').should(
-      'not.be.empty'
-    );
-    cy.get('[data-autoid="dds--lightbox-media-viewer__content__desc"]').should(
-      'not.be.empty'
-    );
-  },
-};
-
-describe('LightboxMediaViewer | default', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.visit(_defaultPath);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should render with all elements', () => {
-    cy.visit(`/${_defaultPath}`);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--image__img')
-      .should('be.visible')
-      .then(() => {
-        cy.get('[data-autoid="dds--image__longdescription"]').should(
-          'have.length',
-          1
-        );
-        cy.get('[data-autoid="dds--lightbox-media-viewer__content__desc"]')
-          .should('be.visible')
-          .then(() => {
-            _tests.checkMediaMetadata();
-
-            cy.takeSnapshots();
-          });
-      });
-  });
-
-  it('should align elements', () => {
-    cy.visit(`/${_defaultPath}`);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--image__img')
-      .should('be.visible')
-      .then(() => {
-        cy.get('[data-autoid="dds--image__longdescription"]').then($image => {
-          expect($image[0].getBoundingClientRect().left).to.equal(64);
-        });
-
-        cy.get('.bx--lightbox-media-viewer__content').then($content => {
-          expect($content[0].getBoundingClientRect().right).to.equal(1280 - 64);
-        });
-      });
-  });
-
-  it('should verify the image size 1:1', () => {
-    cy.visit(
-      `${_defaultPath}&knob-Image=https://fpoimg.com/720x720?text=1:1`
-    );
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--image__img')
-      .should('be.visible')
-      .then($image => {
-        expect($image.width()).to.equal($image.height());
-
-        cy.takeSnapshots();
-      });
-  });
-
-  it('should verify the image size 2:1', () => {
-    cy.visit(
-      `${_defaultPath}&knob-Image=https://fpoimg.com/1312x656?text=2:1`
-    );
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--image__img')
-      .should('be.visible')
-      .then($image => {
-        expect($image.width() / 2).to.equal($image.height());
-
-        cy.takeSnapshots();
-      });
-  });
-
-  it('should verify the image size 16:9', () => {
-    cy.visit(`/${_defaultPath}`);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--image__img')
-      .should('be.visible')
-      .then($image => {
-        expect(($image.width() * 9) / 16).to.equal($image.height());
-      });
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_defaultPath}`);
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-        .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('LightboxMediaViewer | embedded video player', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`/${_embeddedVideoPlayerPath}`);
-  });
-
-  it('should check a11y', () => {
-    cy.visit(_embeddedVideoPlayerPath);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should render with all elements', () => {
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    _tests.checkMediaMetadata();
-    cy.takeSnapshots();
-  });
-
-  it('should align elements correctly', () => {
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--video-player__video').then($video => {
-      expect($video[0].getBoundingClientRect().left).to.equal(64);
-    });
-
-    cy.get('.bx--lightbox-media-viewer__content').then($content => {
-      expect($content[0].getBoundingClientRect().right).to.equal(1280 - 64);
-    });
-  });
-
-  it('should have interactive video controls', () => {
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--video-player__video .controlsContainer').should(
-      'not.be.empty'
-    );
-
-    // play/pause
-    cy.get('.bx--video-player__video')
-      .find('.playPauseBtn')
-      .should('not.be.empty');
-
-    // mute
-    cy.get('.bx--video-player__video')
-      .find('button[title="Mute"]')
-      .should('not.be.empty');
-
-    // full screen
-    cy.get('.bx--video-player__video')
-      .find('.fullScreenBtn')
-      .should('not.be.empty');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-    cy.carbonThemesScreenshot();
-  });
-
-  it('should close the modal when close button is clicked', () => {
-    cy.waitUntil(() => cy.get('[data-autoid="dds--lightbox-media-viewer__content__title"]')
-      .contains('Curabitur malesuada varius mi eu posuere')
-    );
-
-    cy.get('.bx--modal-close').click();
-    cy.takeSnapshots();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Default.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Default.e2e.js
deleted file mode 100644
index c24c7012a49..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Default.e2e.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 getCssPropertyForRule from '../../utils/get-css-property-for-rule';
-
-/**
- * Sets the correct path
- *
- * @type {string} path of component
- * @private
- */
-const _path = 'iframe.html?id=components-link-list--default';
-
-/**
- * Collection of tests for the component
- *
- * @function checkComponentLoad Asserts that each list item loads body copy and one clickable link
- * @function checkVerticalAlignment Asserts that each list item is positioned directly below its previous sibling
- * @function checkHoverState Asserts that list items have a CSS rule that sets the background color on hover
- * @function checkCTATypes Asserts that the CTA icon is set correctly for each type
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  checkComponentLoad: () => {
-    cy.get('.bx--link-list').then(([list]) => {
-      const items = list.querySelectorAll('.bx--link-list__list__CTA');
-      items.forEach(item => {
-        const bodyCopy = item.textContent.replaceAll(/(\\n)|\s/g, '');
-        expect(bodyCopy).to.not.be.eq('');
-
-        const links = item.querySelectorAll('a');
-        const icons = item.querySelectorAll('a svg');
-        expect(links.length).to.be.equal(1);
-        expect(links[0]).to.be.visible;
-        expect(icons.length).to.be.equal(1);
-      });
-    });
-  },
-  checkVerticalAlignment: () => {
-    let previous, window;
-    cy.window()
-      .then(win => (window = win))
-      .get('.bx--link-list__list__CTA')
-      .each(([card], i) => {
-        if (i !== 0) {
-          const cardBox = card.getBoundingClientRect();
-          const prevBox = previous.getBoundingClientRect();
-          const cardStyles = window.getComputedStyle(card);
-          const prevStyles = window.getComputedStyle(previous);
-
-          expect(cardBox.top).to.be.eq(
-            prevBox.bottom +
-              parseInt(prevStyles.marginBottom) +
-              parseInt(cardStyles.marginTop)
-          );
-        }
-        previous = card;
-      });
-  },
-  checkHoverState: () => {
-    cy.get('.bx--link-list .bx--card').then(([card]) => {
-      const sheets = card.ownerDocument.styleSheets;
-
-      if (sheets) {
-        const hover = getCssPropertyForRule(
-          '.bx--card:hover, :host(dds-card):hover, :host(dds-link-list-item-card):hover, :host(dds-card-group-item):hover, :host(dds-card-group-item) .bx--card:hover, :host(dds-card-cta):hover, :host(dds-link-list-item-card-cta):hover, :host(dds-card-in-card):hover, :host(dds-content-group-cards-item):hover, :host(dds-content-group-cards-item) .bx--card:hover',
-          'background-color',
-          sheets
-        );
-
-        expect(hover).to.be.eq('var(--cds-hover-ui, #e5e5e5)');
-      }
-    });
-  },
-  checkCTATypes: () => {
-    const expected = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    const ctaPrefix = 'bx--link-list__list--';
-
-    cy.get('.bx--link-list__list__CTA').each($item => {
-      const thisType = $item
-        .attr('class')
-        .split(' ')
-        .filter(className => className.indexOf(ctaPrefix) !== -1)
-        .pop()
-        .substr(ctaPrefix.length);
-
-      cy.get($item)
-        .find('a.bx--link path')
-        .then(path => {
-          expect(path.attr('d')).to.be.eq(expected[thisType]);
-        });
-    });
-  },
-};
-
-describe('LinkList | default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`/${_path}`).wait(1000);
-    cy.injectAxe();
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should change styles on hover', _tests.checkHoverState);
-  it('should render different CTA types', _tests.checkCTATypes);
-  it('should check a11y', _tests.checkA11y);
-});
-
-describe('LinkList | default (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 780);
-    cy.visit(`/${_path}`).wait(1000);
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should change styles on hover', _tests.checkHoverState);
-  it('should render different CTA types', _tests.checkCTATypes);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/EndOfSection.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LinkList/EndOfSection.e2e.js
deleted file mode 100644
index 89a90c33280..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/EndOfSection.e2e.js
+++ /dev/null
@@ -1,138 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 getCssPropertyForRule from '../../utils/get-css-property-for-rule';
-
-/**
- * Sets the correct path
- *
- * @type {string} path of component
- * @private
- */
-const _path = 'iframe.html?id=components-link-list--end-of-section';
-
-/**
- * Collection of tests for the component
- *
- * @function checkComponentLoad Asserts that each list item loads body copy and one clickable link
- * @function checkVerticalAlignment Asserts that each list item is positioned directly below its previous sibling
- * @function checkHoverState Asserts that list items have a CSS rule that sets the background color on hover
- * @function checkCTATypes Asserts that the CTA icon is set correctly for each type
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  checkComponentLoad: () => {
-    cy.get('.bx--link-list').then(([list]) => {
-      const items = list.querySelectorAll('.bx--link-list__list__CTA');
-      items.forEach(item => {
-        const bodyCopy = item.textContent.replaceAll(/(\\n)|\s/g, '');
-        expect(bodyCopy).to.not.be.eq('');
-
-        const links = item.querySelectorAll('a');
-        const icons = item.querySelectorAll('a svg');
-        expect(links.length).to.be.equal(1);
-        expect(links[0]).to.be.visible;
-        expect(icons.length).to.be.equal(1);
-      });
-    });
-  },
-  checkVerticalAlignment: () => {
-    let previous, window;
-    cy.window()
-      .then(win => (window = win))
-      .get('.bx--link-list__list__CTA')
-      .each(([card], i) => {
-        if (i !== 0) {
-          const cardBox = card.getBoundingClientRect();
-          const prevBox = previous.getBoundingClientRect();
-          const cardStyles = window.getComputedStyle(card);
-          const prevStyles = window.getComputedStyle(previous);
-
-          expect(cardBox.top).to.be.eq(
-            prevBox.bottom +
-              parseInt(prevStyles.marginBottom) +
-              parseInt(cardStyles.marginTop)
-          );
-        }
-        previous = card;
-      });
-  },
-  checkHoverState: () => {
-    cy.get('.bx--link-list .bx--link-list__list__CTA').then(([card]) => {
-      const sheets = card.ownerDocument.styleSheets;
-
-      if (sheets) {
-        const hover = getCssPropertyForRule(
-          '.bx--link-list__list--vertical-end .bx--link-list__list__CTA:hover',
-          'background',
-          sheets
-        );
-
-        expect(hover).to.be.eq('var(--cds-hover-ui, #e5e5e5)');
-      }
-    });
-  },
-  checkCTATypes: () => {
-    const expected = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    const ctaPrefix = 'bx--link-list__list--';
-
-    cy.get('.bx--link-list__list__CTA').each($item => {
-      const thisType = $item
-        .attr('class')
-        .split(' ')
-        .filter(className => className.indexOf(ctaPrefix) !== -1)
-        .pop()
-        .substr(ctaPrefix.length);
-
-      cy.get($item)
-        .find('a.bx--link path')
-        .then(path => {
-          expect(path.attr('d')).to.be.eq(expected[thisType]);
-        });
-    });
-  },
-};
-
-describe('LinkList | default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`/${_path}`).wait(1000);
-    cy.injectAxe();
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should change styles on hover', _tests.checkHoverState);
-  it('should render different CTA types', _tests.checkCTATypes);
-  it('should check a11y', _tests.checkA11y);
-});
-
-describe('LinkList | default (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 780);
-    cy.visit(`/${_path}`).wait(1000);
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should change styles on hover', _tests.checkHoverState);
-  it('should render different CTA types', _tests.checkCTATypes);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Horizontal.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Horizontal.e2e.js
deleted file mode 100644
index 9fcfb5871dc..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Horizontal.e2e.js
+++ /dev/null
@@ -1,141 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string} path of component
- * @private
- */
-const _path = 'iframe.html?id=components-link-list--horizontal';
-
-/**
- * Collection of tests for the component
- *
- * @function checkComponentLoad Asserts that each list item loads body copy and one clickable link
- * @function checkHorizontalAlignment Asserts that each list item is positioned directly to the left of its previous sibling
- * @function checkVerticalAlignment Asserts that each list item is positioned directly below its previous sibling
- * @function checkCTATypes Asserts that the CTA icon is set correctly for each type
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  checkComponentLoad: () => {
-    cy.get('.bx--link-list').then(([list]) => {
-      const items = list.querySelectorAll('.bx--link-list__list__CTA');
-      items.forEach(item => {
-        const bodyCopy = item.textContent.replaceAll(/(\\n)|\s/g, '');
-        expect(bodyCopy).to.not.be.eq('');
-
-        const links = item.querySelectorAll('a');
-        const icons = item.querySelectorAll('a svg');
-        expect(links.length).to.be.equal(1);
-        expect(links[0]).to.be.visible;
-        expect(icons.length).to.be.equal(1);
-      });
-    });
-  },
-  checkHorizontalAlignment: () => {
-    let previous, window;
-    cy.window()
-      .then(win => (window = win))
-      .get('.bx--link-list__list__CTA')
-      .each(([card], i) => {
-        if (i !== 0) {
-          const cardBox = card.getBoundingClientRect();
-          const prevBox = previous.getBoundingClientRect();
-          const cardStyles = window.getComputedStyle(card);
-          const prevStyles = window.getComputedStyle(previous);
-
-          expect(cardBox.left).to.be.eq(
-            prevBox.right +
-              parseInt(prevStyles.marginRight) +
-              parseInt(cardStyles.marginLeft)
-          );
-        }
-        previous = card;
-      });
-  },
-  checkVerticalAlignment: () => {
-    let previous, window;
-    cy.window()
-      .then(win => (window = win))
-      .get('.bx--link-list__list__CTA')
-      .each(([card], i) => {
-        if (i !== 0) {
-          const cardBox = card.getBoundingClientRect();
-          const prevBox = previous.getBoundingClientRect();
-          const cardStyles = window.getComputedStyle(card);
-          const prevStyles = window.getComputedStyle(previous);
-
-          expect(cardBox.top).to.be.eq(
-            prevBox.bottom +
-              parseInt(prevStyles.marginBottom) +
-              parseInt(cardStyles.marginTop)
-          );
-        }
-        previous = card;
-      });
-  },
-  checkCTATypes: () => {
-    const expected = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    const ctaPrefix = 'bx--link-list__list--';
-
-    cy.get('.bx--link-list__list__CTA').each($item => {
-      const thisType = $item
-        .attr('class')
-        .split(' ')
-        .filter(className => className.indexOf(ctaPrefix) !== -1)
-        .pop()
-        .substr(ctaPrefix.length);
-
-      cy.get($item)
-        .find('a.bx--link path')
-        .then(path => {
-          expect(path.attr('d')).to.be.eq(expected[thisType]);
-        });
-    });
-  },
-};
-
-describe('LinkList | horizontal (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`/${_path}`).wait(1000);
-    cy.injectAxe();
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a horizontal layout', _tests.checkHorizontalAlignment);
-  it('should render different CTA types', _tests.checkCTATypes);
-  it('should check a11y', _tests.checkA11y)
-});
-
-describe('LinkList | horizontal (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 780);
-    cy.visit(`/${_path}`).wait(1000);
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should render different CTA types', _tests.checkCTATypes);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Vertical.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Vertical.e2e.js
deleted file mode 100644
index edba3110ae7..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LinkList/Vertical.e2e.js
+++ /dev/null
@@ -1,128 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string} path of component
- * @private
- */
-const _path = 'iframe.html?id=components-link-list--vertical';
-
-/**
- * Collection of tests for the component
- *
- * @function checkComponentLoad Asserts that each list item loads body copy and one clickable link
- * @function checkVerticalAlignment Asserts that each list item is positioned directly below its previous sibling
- * @function checkCTATypes Asserts that the CTA icon is set correctly for each type
- * @private
- */
-const _tests = {
-  checkA11y: () => {
-    cy.checkAxeA11y();
-  },
-  checkComponentLoad: () => {
-    cy.get('.bx--link-list').then(([list]) => {
-      const items = list.querySelectorAll('.bx--link-list__list__CTA');
-      items.forEach(item => {
-        const bodyCopy = item.textContent.replaceAll(/(\\n)|\s/g, '');
-        expect(bodyCopy).to.not.be.eq('');
-
-        const links = item.querySelectorAll('a');
-        const icons = item.querySelectorAll('a svg');
-        expect(links.length).to.be.equal(1);
-        expect(links[0]).to.be.visible;
-        expect(icons.length).to.be.equal(1);
-      });
-    });
-  },
-  checkVerticalAlignment: () => {
-    let previous, window;
-    cy.window()
-      .then(win => (window = win))
-      .get('.bx--link-list__list__CTA')
-      .each(([card], i) => {
-        if (i !== 0) {
-          const cardBox = card.getBoundingClientRect();
-          const prevBox = previous.getBoundingClientRect();
-          const cardStyles = window.getComputedStyle(card);
-          const prevStyles = window.getComputedStyle(previous);
-
-          expect(cardBox.top).to.be.eq(
-            prevBox.bottom +
-              parseInt(prevStyles.marginBottom) +
-              parseInt(cardStyles.marginTop)
-          );
-        }
-        previous = card;
-      });
-  },
-  checkCTATypes: () => {
-    const expected = {
-      local:
-        'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z',
-      local_left:
-        'M14 26L15.41 24.59 7.83 17 28 17 28 15 7.83 15 15.41 7.41 14 6 4 16 14 26z',
-      jump:
-        'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z',
-      external:
-        'M26,28H6a2.0027,2.0027,0,0,1-2-2V6A2.0027,2.0027,0,0,1,6,4H16V6H6V26H26V16h2V26A2.0027,2.0027,0,0,1,26,28Z',
-      download:
-        'M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z',
-      video:
-        'M11,23a1,1,0,0,1-1-1V10a1,1,0,0,1,1.4473-.8945l12,6a1,1,0,0,1,0,1.789l-12,6A1.001,1.001,0,0,1,11,23Zm1-11.3821v8.7642L20.7642,16Z',
-    };
-
-    const ctaPrefix = 'bx--link-list__list--';
-
-    cy.get('.bx--link-list__list__CTA').each($item => {
-      const thisType = $item
-        .attr('class')
-        .split(' ')
-        .filter(className => className.indexOf(ctaPrefix) !== -1)
-        .pop()
-        .substr(ctaPrefix.length);
-
-      cy.get($item)
-        .find('a.bx--link path')
-        .then(path => {
-          if (
-            thisType === 'local' &&
-            path.closest('a').hasClass('bx--link-with-icon__icon-left')
-          ) {
-            expect(path.attr('d')).to.be.eq(expected.local_left);
-          } else {
-            expect(path.attr('d')).to.be.eq(expected[thisType]);
-          }
-        });
-    });
-  },
-};
-
-describe('LinkList | vertical (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`/${_path}`).wait(1000);
-    cy.injectAxe();
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should render different CTA types', _tests.checkCTATypes);
-  it('should check a11y', _tests.checkA11y);
-});
-
-describe('LinkList | vertical (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 780);
-    cy.visit(`/${_path}`).wait(1000);
-  });
-
-  it('should load items with text and link', _tests.checkComponentLoad);
-  it('should have a vertical layout', _tests.checkVerticalAlignment);
-  it('should render different CTA types', _tests.checkCTATypes);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LinkWithIcon/Default.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LinkWithIcon/Default.e2e.js
deleted file mode 100644
index f183db70ff9..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LinkWithIcon/Default.e2e.js
+++ /dev/null
@@ -1,121 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-/**
- * Defines the component path.
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-link-with-icon--default';
-
-/**
- * Defines the component selector.
- *
- * @type {string}
- * @private
- */
-const _selector = '[data-autoid="dds--link-with-icon"]';
-
-/**
- * Collection of test scenarios.
- *
- * @type {Array<function>}
- * @private
- */
-const _tests = [
-  () => {
-    it('should check a11y', () => {
-      cy.visit(_path);
-      cy.injectAxe();
-      cy.checkAxeA11y();
-    });
-  },
-  () => {
-    it('should render link text', () => {
-      cy.visit(_path)
-        .get(_selector)
-        .should('not.be.empty');
-    });
-  },
-  () => {
-    it('should have a clickable link', () => {
-      cy.visit(_path)
-        .get(_selector)
-        .find('a')
-        .should($link => {
-          expect($link.prop('href')).not.to.be.empty;
-        });
-    });
-  },
-  () => {
-    it('should not be clickable when disabled', () => {
-      cy.visit(`${_path}&knob-Disabled%20(disabled):=true`)
-        .get(_selector)
-        .find('a')
-        .should($link => {
-          expect($link.prop('href')).to.be.empty;
-        });
-    });
-  },
-  () => {
-    it('should optionally allow visited styles', () => {
-      cy.visit(
-        `${_path}&knob-Allow%20visited%20styles%20(visited):=true`
-      )
-        .get(_selector)
-        .find('a')
-        .should('have.class', 'bx--link--visited');
-    });
-  },
-  () => {
-    it('should check icon placements', () => {
-      ['left', 'right'].forEach(placement => {
-        cy.visit(
-          `${_path}&knob-Icon%20placement%20(iconPlacement):=${placement}`
-        )
-          .get(_selector)
-          .find('a')
-          .should($link => {
-            const svgPosition = $link.find('svg')[0].getBoundingClientRect();
-            const textPosition = $link.find('span')[0].getBoundingClientRect();
-
-            if (placement === 'left') {
-              expect(svgPosition.left).to.be.lt(textPosition.left);
-            } else {
-              expect(svgPosition.left).to.be.gt(textPosition.left);
-            }
-          });
-      });
-    });
-  },
-  () => {
-    it('should render correctly in all themes', () => {
-      cy.visit(_path).carbonThemesScreenshot({
-        capture: 'viewport',
-      });
-    });
-  },
-];
-
-describe('dds-link-with-icon | default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-  });
-
-  _tests.forEach(test => test());
-});
-
-describe('dds-link-with-icon | default (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 720);
-  });
-
-  _tests.forEach(test => test());
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LocaleModal/LocaleModal.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LocaleModal/LocaleModal.e2e.js
deleted file mode 100644
index 9884d5c0ab5..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LocaleModal/LocaleModal.e2e.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-locale-modal--default';
-
-describe('LocaleModal | default', () => {
-  beforeEach(() => {
-    cy.visit(`/${_path}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load with four regions', () => {
-    cy.get('[data-region]').should('have.length', 4);
-
-    cy.get('[data-region="am"]').should('be.visible');
-    cy.get('[data-region="ap"]').should('be.visible');
-    cy.get('[data-region="eu"]').should('be.visible');
-    cy.get('[data-region="mea"]').should('be.visible');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load the Americas region', () => {
-    cy.get('[data-region="am"]').click();
-    cy.get('.bx--locale-modal__locales').should('have.length', 35);
-
-    cy.takeSnapshots();
-  });
-
-  it('should filter locales/languages', () => {
-    cy.get('[data-region="am"]').click();
-    cy.get('[data-autoid="dds--locale-modal__filter"]').type('mexico', {
-      force: true,
-    });
-
-    cy.get(
-      '.bx--locale-modal__locales:not(.bx--locale-modal__locales-hidden) > div'
-    )
-      .first()
-      .then(e => {
-        expect(e.text()).to.equal('Mexico');
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should be able to go back to the region menu', () => {
-    cy.get('[data-region="am"]').click();
-    cy.get('.bx--locale-modal__regions').should('not.be.visible');
-    cy.get('.bx--modal-container .bx--link-with-icon').click();
-    cy.get('.bx--locale-modal__regions').should('be.visible');
-  });
-
-  it('should have a clickable X icon and is able to close menu', () => {
-    const closeButton = cy.get('.bx--modal-close');
-    closeButton.find('svg path').then($icon => {
-      expect($icon).to.have.attr(
-        'd',
-        'M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z'
-      );
-    });
-    closeButton.click();
-
-    cy.takeSnapshots();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/LogoGrid/LogoGrid.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/LogoGrid/LogoGrid.e2e.js
deleted file mode 100644
index 35153320da3..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/LogoGrid/LogoGrid.e2e.js
+++ /dev/null
@@ -1,84 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct defaultPath for LogoGrid
- *
- * @type {string}
- * @private
- */
-const _defaultPath = '/iframe.html?id=components-logo-grid--default';
-
-/**
- * Sets the logo grid defaultPath for LogoGrid with a CTA
- *
- * @type {string}
- * @private
- */
-const _pathWithCTA =
-  '/iframe.html?id=components-logo-grid--default&knob-Heading%20(heading)=Our%20customers&knob-Display%20CTA:=true&knob-CTA%20Copy%20(ctaCopy)=Lorem%20ipsum%20dolor%20sit%20amet&knob-CTA%20Href%20(ctaHref):=http://local.url.com/';
-
-/* eslint-disable cypress/no-unnecessary-waiting */
-describe('LogoGrid | default', () => {
-  beforeEach(() => {
-    cy.visit(`/${_defaultPath}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should have page heading with different brand logos', () => {
-    cy.get('[data-autoid="dds--content-block__heading"]').should(
-      'have.length',
-      1
-    );
-    cy.get('.bx--logo-grid__col .bx--image__img').then($els => {
-      const logoItems = Array.from($els, el => el.src);
-      const equalLogos = logoItems.filter(
-        (item, i, ar) => ar.indexOf(item) != i
-      );
-
-      // resulting array only has duplicate values -- empty array means distinct images
-      expect(equalLogos).to.be.length(0);
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should have clickable CTA card link with heading', () => {
-    cy.visit(`/${_pathWithCTA}`);
-
-    cy.get('.bx--logo-grid .bx--card').should('have.length', 1);
-    cy.get('.bx--logo-grid .bx--card__heading').should('have.length', 1);
-
-    cy.get('.bx--logo-grid a.bx--link').then($els => {
-      const win = $els[0].ownerDocument.defaultView;
-      const after = win.getComputedStyle($els[0], 'after');
-      const positionValue = after.getPropertyValue('position');
-      const insetValue = after.getPropertyValue('inset');
-
-      if (Cypress.browser.name === 'firefox') {
-        expect(positionValue).to.eq('static');
-      } else {
-        expect(positionValue).to.eq('absolute');
-        expect(insetValue).to.eq('0px');
-      }
-    });
-
-    cy.takeSnapshots();
-  });
-
-  it('should render correctly in all themes', () => {
-    cy.visit(`/${_defaultPath}`);
-    cy.viewport(1280, 780);
-
-    cy.carbonThemesScreenshot();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-L1.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-L1.e2e.js
deleted file mode 100644
index 3538290aebd..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-L1.e2e.js
+++ /dev/null
@@ -1,117 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Masthead with L1)
- *
- * @type {string}
- * @private
- */
-const _pathl1 = '/iframe.html?id=components-masthead--with-l-1';
-
-describe('Masthead | with L1 (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(_pathl1);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-eco__l1-nav0"]').first().should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should render platform below the IBM logo', () => {
-    cy.get('.bx--masthead__l1-name-title').then($platform => {
-      cy.get('[data-autoid="dds--masthead-eco__l0-logo"]').then($logo => {
-        expect($logo[0].getBoundingClientRect().down).to.equal(
-          $platform[0].parentElement.getBoundingClientRect().up
-        );
-      });
-    });
-  });
-
-  it('should render 5 menu items', () => {
-    cy.get('.bx--header__menu-bar > li').should('have.length', 5);
-  });
-
-  it('should load L1 menu item with selected state', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l1-nav0"] a').then($menuItem => {
-      expect($menuItem).to.have.attr('data-selected', 'true');
-    });
-
-    cy.waitUntil(() =>
-      cy.get('.bx--header__nav-caret-right').then($elem => $elem.is(':visible'))
-    );
-
-    cy.takeSnapshots();
-  });
-
-  it('should load L1 menu - first L1 nav item', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l1-nav0"]')
-      .trigger('click')
-      .find('a')
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('aria-expanded', 'true');
-      });
-  });
-
-  it('should load L1 menu - second L1 nav item', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l1-nav1"]')
-      .trigger('click')
-      .find('a')
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('aria-expanded', 'true');
-      });
-  });
-
-  it('should load third nav L1 item', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l1-nav2"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load L1 menu - fourth L1 nav item', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l1-nav3"]')
-      .trigger('click')
-      .find('a')
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('aria-expanded', 'true');
-      });
-  });
-
-  it('should load fifth nav L1 item', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l1-nav4"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should scroll the L1 overflow properly', () => {
-    cy.get('.bx--header__nav-caret-right').trigger('click');
-    cy.waitUntil(() =>
-      cy
-        .get('.bx--header__nav-caret-right')
-        .then($elem => !$elem.is(':visible'))
-    );
-
-    cy.get('.bx--header__nav-caret-left').should('be.visible');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load platform containing a link', () => {
-    cy.get('.bx--masthead__l1-name-title')
-      .find('a')
-      .then($link => {
-        const url = $link.prop('href');
-        expect(url).not.to.be.empty;
-      });
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-custom.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-custom.e2e.js
deleted file mode 100644
index 78e8ddf6c97..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-custom.e2e.js
+++ /dev/null
@@ -1,108 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Custom Masthead)
- *
- * @type {string}
- * @private
- */
-const _pathCustom =
-  '/iframe.html?id=components-masthead--with-custom-navigation';
-
-describe('Masthead | custom (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(_pathCustom);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should render 5 custom menu items', () => {
-    cy.get('.bx--header__menu-bar > li').should('have.length', 5);
-  });
-
-  it('should load custom menu item with selected state', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"] a').then(
-      $menuItem => {
-        expect($menuItem).to.have.attr('data-selected', 'true');
-      }
-    );
-
-    cy.waitUntil(() =>
-      cy.get('.bx--header__nav-caret-right').then($elem => $elem.is(':visible'))
-    );
-
-    cy.takeSnapshots();
-  });
-
-  it('should load regular menu - custom first nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]')
-      .trigger('click')
-      .find('a')
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('aria-expanded', 'true');
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load regular menu - custom second nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav1"]')
-      .trigger('click')
-      .find('a')
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('aria-expanded', 'true');
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load regular menu - custom third nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav2"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load regular menu - custom fourth nav item', () => {
-    cy.get('.bx--header__nav-caret-right').trigger('click');
-    cy.get('[data-autoid="dds--masthead-default__l0-nav3"]')
-      .trigger('click')
-      .find('a')
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('aria-expanded', 'true');
-      });
-
-    cy.takeSnapshots();
-  });
-
-  it('should load regular menu - custom fifth nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav4"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should scroll the L0 overflow properly', () => {
-    cy.get('.bx--header__nav-caret-right').trigger('click');
-    cy.waitUntil(() =>
-      cy
-        .get('.bx--header__nav-caret-right')
-        .then($elem => !$elem.is(':visible'))
-    );
-
-    cy.get('.bx--header__nav-caret-left').should('be.visible');
-
-    cy.takeSnapshots();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-search-open-onload.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-search-open-onload.e2e.js
deleted file mode 100644
index dae9cfe12d8..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-search-open-onload.e2e.js
+++ /dev/null
@@ -1,65 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Masthead search open onload)
- *
- * @type {string}
- * @private
- */
-const _pathSearchOpenOnload =
-  '/iframe.html?id=components-masthead--search-open-onload';
-
-describe('Masthead | search open onload (desktop)', () => {
-  beforeEach(() => {
-    // TODO: fix the uncaught exception in Firefox only
-    cy.on('uncaught:exception', (err, runnable) => {
-      if (err.message.includes('Request aborted')) {
-        return false;
-      }
-    });
-
-    cy.visit(`/${_pathSearchOpenOnload}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').first().should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load search field open by default', () => {
-    cy.get('[data-autoid="dds--masthead__search"]')
-      .find('input[data-autoid="dds--header__search--input"]')
-      .should('be.visible');
-
-    cy.takeSnapshots();
-  });
-
-  it('should have typable search field', () => {
-    cy.get('[data-autoid="dds--masthead__search"]')
-      .find('input[data-autoid="dds--header__search--input"]')
-      .type('test')
-      .should('have.value', 'test');
-  });
-
-  it('should display 10 auto suggest results', () => {
-    cy.get('[data-autoid="dds--masthead__search"]')
-      .find('input[data-autoid="dds--header__search--input"]')
-      .type('test')
-      .get('.react-autosuggest__suggestions-list li')
-      .should('have.length', 10);
-
-    cy.takeSnapshots();
-  });
-
-  it('should not display menu options while search field is open', () => {
-    cy.get('.bx--header__nav-container').should('have.css', 'display', 'none');
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-with-platform.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-with-platform.e2e.js
deleted file mode 100644
index d042561aa6f..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead-with-platform.e2e.js
+++ /dev/null
@@ -1,55 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (Masthead with Platform)
- *
- * @type {string}
- * @private
- */
-const _pathPlatform = '/iframe.html?id=components-masthead--with-platform';
-
-describe('Masthead | with platform (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(_pathPlatform);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-eco__l0-nav0"]').first().should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load platform containing a link', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l0-ecosystemname"]').then(
-      $link => {
-        const url = $link.prop('href');
-        expect(url).not.to.be.empty;
-      }
-    );
-  });
-
-  it('should render platform next to IBM logo', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l0-ecosystemname"]').then(
-      $platform => {
-        cy.get('[data-autoid="dds--masthead-eco__l0-logo"]').then($logo => {
-          expect($logo[0].getBoundingClientRect().right).to.equal(
-            $platform[0].parentElement.getBoundingClientRect().left
-          );
-        });
-      }
-    );
-  });
-
-  it('should open the search bar with platform', () => {
-    cy.get('[data-autoid="dds--masthead-eco__l0-search"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead.e2e.js
deleted file mode 100644
index a31a1fd5e81..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Masthead/Masthead.e2e.js
+++ /dev/null
@@ -1,144 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (default Masthead)
- *
- * @type {string}
- * @private
- */
-const _pathDefault = '/iframe.html?id=components-masthead--default';
-
-describe('Masthead | default (desktop)', () => {
-  beforeEach(() => {
-    cy.visit(_pathDefault);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should have url for IBM logo', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-logo"]').then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should load menu item with selected state', () => {
-    cy.get('.bx--header__menu-item').each(
-      $menuItem => {
-        if ($menuItem.attr('aria-label') === 'Consulting & Services') {
-          expect($menuItem).to.have.attr('data-selected', 'true');
-        } else {
-          expect($menuItem).to.have.attr('data-selected', 'false');
-        }
-      }
-    );
-
-    cy.takeSnapshots();
-  });
-
-  it('should render 4 menu items', () => {
-    cy.get('.bx--masthead__megamenu__l0-nav').should('have.length', 4);
-  });
-
-  it('should load the megamenu - first nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load the megamenu - second nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav1"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load the megamenu - third nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav2"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-
-  it('should load the megamenu - fourth nav item', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-nav3"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-
-  it('should have urls for the submenu items within the megamenu', () => {
-    cy.get(
-      '.bx--header__submenu a.bx--masthead__megamenu__category-sublink--highlighted'
-    ).then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-
-    cy.get(
-      '.bx--header__submenu a.bx--masthead__megamenu__category-sublink'
-    ).then($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should open the login menu', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-account"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-
-  it('should have 2 menu items under the login menu', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-account"]').trigger('click');
-    cy.get('.bx--masthead__profile-item').should('have.length', 2);
-  });
-
-  it('should open the search bar on click', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-search"]').trigger('click');
-
-    cy.takeSnapshots();
-  });
-
-  it('should allow keywords in the search bar and display 10 suggested results', () => {
-    cy.get('[data-autoid="dds--masthead-default__l0-search"]').trigger('click');
-
-    cy.get('[data-autoid="dds--masthead__search"]')
-      .find('input[data-autoid="dds--header__search--input"]')
-      .type('redhat', { force: true });
-
-    cy.get('.react-autosuggest__suggestions-list li').should('have.length', 10);
-
-    cy.takeSnapshots();
-  });
-});
-
-describe('Masthead | default (mobile)', () => {
-  beforeEach(() => {
-    cy.visit(_pathDefault);
-    cy.viewport(320, 780);
-
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').first().should('not.be.empty'));
-  });
-
-  it('should load the mobile menu', () => {
-    cy.get('[data-autoid="dds--masthead-default-sidenav__l0-menu"]').trigger('click');
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load the mobile menu | menu level 2', () => {
-    cy.get('[data-autoid="dds--masthead-default-sidenav__l0-menu"]').trigger('click');
-    cy.get('[data-autoid="dds--masthead-default-sidenav__l0-nav0"]').trigger('click');
-
-    cy.takeSnapshots('mobile');
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js
deleted file mode 100644
index 2a7f8823120..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/PictogramItem/PictogramItem.e2e.js
+++ /dev/null
@@ -1,114 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path (default Pictogram item)
- *
- * @type {string}
- * @private
- */
-const _pathDefault = '/iframe.html?id=components-pictogram-item--default';
-
-describe('dds-pictogram-item | Pictogram item (desktop)', () => {
-  it('should check a11y', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.injectAxe();
-    cy.checkAxeA11y();
-  });
-
-  it('should load pictogram item and content', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(1280, 780);
-    cy.get('[data-autoid="dds--pictogram-item"]').should('have.length', 1);
-    cy.get(
-      '[data-autoid="dds--pictogram-item"] [data-autoid="dds--pictogram-item__pictogram"]'
-    ).should('have.length', 1);
-    cy.get(
-      '[data-autoid="dds--pictogram-item"] [data-autoid="dds--content-item__heading"]'
-    ).should('have.length', 1);
-
-    cy.takeSnapshots();
-  });
-
-  it('should check that the Link with icon is loaded and clickable', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(1280, 780);
-    const linkWithIcon = cy.get(
-      '[data-autoid="dds--pictogram-item"] [data-autoid="dds--link-with-icon"]'
-    );
-    linkWithIcon.should('have.length', 1);
-    linkWithIcon.find('a').each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should support customizable pictogram SVGs', () => {
-    cy.visit(
-      `/${_pathDefault}&knob-Pictogram%20(required)=Touch`
-    );
-    cy.viewport(1280, 780);
-
-    cy.takeSnapshots();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(1280, 780);
-    cy.carbonThemesScreenshot();
-  });
-});
-
-describe('dds-pictogram-item | Pictogram item (mobile)', () => {
-  it('should load pictogram item and content', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-    cy.get('[data-autoid="dds--pictogram-item"]').should('have.length', 1);
-    cy.get(
-      '[data-autoid="dds--pictogram-item"] [data-autoid="dds--pictogram-item__pictogram"]'
-    ).should('have.length', 1);
-    cy.get(
-      '[data-autoid="dds--pictogram-item"] [data-autoid="dds--content-item__heading"]'
-    ).should('have.length', 1);
-
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should check that the Link with icon is loaded and clickable', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-    const linkWithIcon = cy.get(
-      '[data-autoid="dds--pictogram-item"] [data-autoid="dds--link-with-icon"]'
-    );
-    linkWithIcon.should('have.length', 1);
-    linkWithIcon.find('a').each($link => {
-      const url = $link.prop('href');
-      expect(url).not.to.be.empty;
-    });
-  });
-
-  it('should support customizable pictogram SVGs', () => {
-    cy.visit(
-      `/${_pathDefault}&knob-Pictogram%20(required)=Touch`
-    );
-
-    cy.viewport(320, 780);
-    cy.takeSnapshots('mobile');
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.visit(`/${_pathDefault}`);
-    cy.viewport(320, 780);
-
-    cy.carbonThemesScreenshot(
-      {},
-      {
-        widths: [320],
-      }
-    );
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/Quote/Quote.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/Quote/Quote.e2e.js
deleted file mode 100644
index faa0c5123dc..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/Quote/Quote.e2e.js
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string}
- * @private
- */
-const _path = '/iframe.html?id=components-quote--default';
-
-/* eslint-disable cypress/no-unnecessary-waiting */
-describe('Quote | default', () => {
-  beforeEach(() => {
-    cy.visit(`${_path}`);
-    cy.injectAxe();
-    cy.viewport(1280, 780);
-  });
-
-  it('should check a11y', () => {
-    cy.checkAxeA11y();
-  });
-
-  it('should load correctly in all themes', () => {
-    cy.waitUntil(() =>
-      cy
-        .get('[data-autoid="dds--quote"] .bx--quote__copy')
-        .then($copy => $copy.text().trim() !== '')
-    );
-
-    cy.carbonThemesScreenshot();
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/StorybookDocs/StorybookComponents.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/StorybookDocs/StorybookComponents.e2e.js
deleted file mode 100644
index 717b4d29b60..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/StorybookDocs/StorybookComponents.e2e.js
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
- xdescribe('Storybook Docs | grab component list', () => {
-
-  it('should grab docs url from all Storybook components', () => {
-    
-    cy.visit('/');
-
-     let docs = [];
-
-    /**
-     * grab all components and get their href values which contain
-     * url to the corresponding docs
-     */
-     cy.get('button[id^="components-"]').each($el => {
-       cy.get($el)
-       .click()
-       .then( ([copy]) => {
-         const name = copy.innerText.trim();
-         const docsPath = $el[0].nextSibling.firstChild.href;
- 
-         if (docsPath) {
-           const url = docsPath.split('?')[1].replace('path=/story', 'path=/docs');
-           docs.push({ url, name });
-         }
-       });
-     })
-     
-     cy.writeFile('tests/e2e-storybook/cypress/fixtures/components.json', docs);
-   });
-  });
\ No newline at end of file
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/StorybookDocs/StorybookDocs.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/StorybookDocs/StorybookDocs.e2e.js
deleted file mode 100644
index 7e229963186..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/StorybookDocs/StorybookDocs.e2e.js
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/* eslint-disable cypress/no-unnecessary-waiting */
-xdescribe('storybook docs | default', () => {
-  // const components = require('../../fixtures/components.json');
-
-  // components.forEach(component => {
-    it(`should load Storybook Docs tab for components without exceptions`, () => {
-      cy.viewport(1280, 720);
-      cy.visit(`/?${component.url}`);
-
-      cy.wait(1000);
-
-      const iframe = cy
-      .get('iframe')
-      .its('0.contentDocument.body')
-      .should('be.visible')
-      .then(cy.wrap);
-
-      iframe.within({}, $iframe => {
-        cy.get('code[id="error-stack"]').should('be.empty');
-      });
-    });
-  // });
-});
\ No newline at end of file
diff --git a/packages/react/tests/e2e-storybook/cypress/integration/TableOfContents/TableOfContents.e2e.js b/packages/react/tests/e2e-storybook/cypress/integration/TableOfContents/TableOfContents.e2e.js
deleted file mode 100644
index fdffd1bda53..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/integration/TableOfContents/TableOfContents.e2e.js
+++ /dev/null
@@ -1,288 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * Sets the correct path
- *
- * @type {string}
- * @private
- */
-const _paths = {
-  default: 'iframe.html?id=components-table-of-contents--default',
-};
-
-/**
- * Collection of all tests for dds-table-of-contents
- *
- * @property {function} all
- * @property {function} desktop
- * @property {function} mobile
- * @private
- */
-const _tests = {
-  /**
-   * Collection of tests for use across browser dimensions.
-   *
-   * @function screenshotThemes - Takes a screenshot of the given page in each theme.
-   */
-  all: {
-    screenshotThemes: () => {
-      cy.carbonThemesScreenshot({
-        capture: 'viewport',
-      });
-    },
-    checkA11y: () => {
-      cy.checkAxeA11y();
-    },
-  },
-  /**
-   * Collection of tests for use on desktop-sized viewports.
-   *
-   * @function checkRender            - Asserts [linkID] === [sectionID]
-   * @function checkLinkFunctionality - Asserts each link scrolls page to proper position
-   * @function checkScrollSpy         - Asserts each link updates onscroll properly
-   * @function checkStickyNav         - Asserts navigation stays within viewport
-   */
-  desktop: {
-    checkRender: () => {
-      const navItemsIds = [];
-      const sectionIds = [];
-
-      cy.get('.bx--tableofcontents__desktop__item a')
-        .each(link => {
-          navItemsIds.push(link.attr('href').replace('#', ''));
-        })
-        .get('a[name]')
-        .each(section => {
-          sectionIds.push(section.attr('name'));
-        })
-        .then(() => {
-          expect(navItemsIds).to.deep.equal(sectionIds);
-          cy.takeSnapshots(
-            'desktop',
-            {},
-            {
-              capture: 'viewport',
-            }
-          );
-        });
-    },
-    checkLinkFunctionality: () => {
-      const maxScrollVal = document.body.clientHeight - window.innerHeight;
-
-      cy.get('.bx--tableofcontents__desktop__item a').each((link, i) => {
-        cy.get(link)
-          .click()
-          .get(`a[name="${link.attr('href').replace('#', '')}"]`)
-          .then(section => {
-            const sectionScrolledTo =
-              section.offset().top === 0 || window.scrollY === maxScrollVal;
-            expect(sectionScrolledTo).to.be.true;
-            if (i === 1) {
-              cy.takeSnapshots(
-                'desktop',
-                {},
-                {
-                  capture: 'viewport',
-                }
-              );
-            }
-          });
-      });
-    },
-    checkScrollSpy: () => {
-      cy.get('a[name]').each((section, i) => {
-        cy.scrollTo(0, section.offset().top)
-          .wait(1000) // Give the browser time to execute the event callback.
-          .get(`a[href="#${section.attr('name')}"]`)
-          .then(link => {
-            expect(link.attr('aria-current')).to.equal('location');
-            expect(link.parent()).to.have.class(
-              'bx--tableofcontents__desktop__item--active'
-            );
-            if (i === 1) {
-              cy.takeSnapshots(
-                'desktop',
-                {},
-                {
-                  capture: 'viewport',
-                }
-              );
-            }
-          });
-      });
-    },
-    checkStickyNav: () => {
-      cy.wrap(['top', 'center', 'bottom']).each(pos => {
-        cy.scrollTo(pos)
-          .get('.bx--tableofcontents__desktop')
-          .then(sidebar => {
-            expect(sidebar.offset().top).to.be.greaterThan(0);
-            if (pos === 'bottom') {
-              cy.wait(3000);
-
-              cy.takeSnapshots(
-                'desktop',
-                {},
-                {
-                  capture: 'viewport',
-                }
-              );
-            }
-          });
-      });
-    },
-  },
-  /**
-   * Collection of tests for use on mobile-sized viewports.
-   *
-   * @function checkRender            - Asserts [optionID] === [sectionID]
-   * @function checkLinkFunctionality - Asserts each select option scrolls page to proper position
-   * @function checkScrollSpy         - Asserts select nav updates onscroll properly
-   * @function checkStickyNav         - Asserts navigation stays within viewport
-   */
-  mobile: {
-    checkRender: () => {
-      const navItemsIds = [];
-      const sectionIds = [];
-
-      cy.get('.bx--tableofcontents__mobile__select__option:not([disabled])')
-        .each(option => {
-          navItemsIds.push(option.val());
-        })
-        .get('a[name]')
-        .each(section => {
-          sectionIds.push(section.attr('name'));
-        })
-        .then(() => {
-          expect(navItemsIds).to.deep.equal(sectionIds);
-          cy.takeSnapshots(
-            'mobile',
-            {},
-            {
-              capture: 'viewport',
-            }
-          );
-        });
-    },
-    checkLinkFunctionality: () => {
-      const maxScrollVal = document.body.clientHeight - window.innerHeight;
-
-      cy.get(
-        '.bx--tableofcontents__mobile__select__option:not([disabled])'
-      ).each((option, i) => {
-        cy.get(option)
-          .parent()
-          .select(option.val())
-          .get(`a[name=${option.val()}]`)
-          .then(section => {
-            const sectionScrolledTo =
-              section.offset().top === 0 || window.scrollY === maxScrollVal;
-            expect(sectionScrolledTo).to.be.true;
-            if (i === 1) {
-              cy.wait(3000);
-
-              cy.takeSnapshots(
-                'mobile',
-                {},
-                {
-                  capture: 'viewport',
-                }
-              );
-            }
-          });
-      });
-    },
-    checkScrollSpy: () => {
-      cy.get('a[name]').each((section, i) => {
-        cy.scrollTo(0, section.offset().top)
-          .wait(1000) // Give the browser time to execute the event callback.
-          .get('.bx--tableofcontents__mobile__select')
-          .then(select => {
-            expect(select.val()).to.equal(section.attr('name'));
-            if (i === 1) {
-              cy.takeSnapshots(
-                'mobile',
-                {},
-                {
-                  capture: 'viewport',
-                }
-              );
-            }
-          });
-      });
-    },
-    checkStickyNav: () => {
-      cy.wrap(['top', 'center', 'bottom']).each(pos => {
-        cy.scrollTo(pos)
-          .get('.bx--tableofcontents__mobile')
-          .then(mobileNav => {
-            expect(mobileNav.offset().top).to.be.greaterThan(-1);
-            if (pos === 'bottom') {
-              cy.wait(3000);
-
-              cy.takeSnapshots(
-                'mobile',
-                {},
-                {
-                  capture: 'viewport',
-                }
-              );
-            }
-          });
-      });
-    },
-  },
-};
-
-describe('TableOfContents | default (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 720);
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-  });
-
-  it(
-    'should load table of contents sidebar with links',
-    _tests.desktop.checkRender
-  );
-  it(
-    'should navigate content to selected section',
-    _tests.desktop.checkLinkFunctionality
-  );
-  xit('should update current section on scroll', _tests.desktop.checkScrollSpy);
-  it(
-    'should remain visible on page throughout scroll',
-    _tests.desktop.checkStickyNav
-  );
-  it('should render correctly in all themes', _tests.all.screenshotThemes);
-  it('should check a11y', _tests.all.checkA11y);
-});
-
-describe('TableOfContents | default (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(320, 720);
-    cy.visit(`/${_paths.default}`);
-    cy.injectAxe();
-  });
-
-  it(
-    'should load table of contents sidebar with links',
-    _tests.mobile.checkRender
-  );
-  it(
-    'should navigate content to selected section',
-    _tests.mobile.checkLinkFunctionality
-  );
-  xit('should update current section on scroll', _tests.mobile.checkScrollSpy);
-  it(
-    'should remain visible on page throughout scroll',
-    _tests.mobile.checkStickyNav
-  );
-  it('should render correctly in all themes', _tests.all.screenshotThemes);
-  it('should check a11y', _tests.all.checkA11y);
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/plugins/index.js b/packages/react/tests/e2e-storybook/cypress/plugins/index.js
deleted file mode 100644
index a75d139f4f2..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/plugins/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-  on('task', {
-    log(message) {
-      console.log(message);
-
-      return null;
-    },
-    table(message) {
-      console.table(message);
-
-      return null;
-    },
-  });
-};
diff --git a/packages/react/tests/e2e-storybook/cypress/support/commands.js b/packages/react/tests/e2e-storybook/cypress/support/commands.js
deleted file mode 100644
index 4f57f419cb1..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/support/commands.js
+++ /dev/null
@@ -1,107 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 'cypress-wait-until';
-
-/**
- * Takes Cypress and Percy snapshots
- */
-Cypress.Commands.add(
-  'takeSnapshots',
-  (size = 'desktop', additionalPercyOptions = {}, screenshotOptions = {}) => {
-    const sizes = {
-      desktop: [1280],
-      mobile: [320],
-    };
-
-    cy.screenshot(
-      `${Cypress.currentTest.titlePath[0]} | ${Cypress.currentTest.titlePath[1]}`,
-      screenshotOptions
-    );
-    cy.percySnapshot(
-      `${Cypress.currentTest.titlePath[0]} | ${Cypress.currentTest.titlePath[1]}`,
-      {
-        ...additionalPercyOptions,
-        widths: sizes[size],
-      }
-    );
-  }
-);
-
-/**
- * Cycle through carbon themes and take a screenshot
- */
-Cypress.Commands.add(
-  'carbonThemesScreenshot',
-  (screenshotOpts = {}, percyOptions = {}) => {
-    const themes = ['white', 'g10', 'g90', 'g100'];
-
-    cy.wrap(themes).each(theme => {
-      cy.get('html')
-        .then(doc => doc.attr('storybook-carbon-theme', theme))
-        .screenshot(
-          `${Cypress.currentTest.titlePath[0]} | ${
-            Cypress.currentTest.titlePath[1]
-          } | [${theme.toUpperCase()}]`,
-          screenshotOpts
-        )
-        .percySnapshot(
-          `${Cypress.currentTest.titlePath[0]} | ${
-            Cypress.currentTest.titlePath[1]
-          } | [${theme.toUpperCase()}]`,
-          percyOptions
-        );
-    });
-  }
-);
-
-/**
- * Check a11y
- *
- * @param {string} context optional to specify component context (ex. '.bx--content-item)
- * @param {Array} additionalRules optional to remove unnecessary rules by there id to pass a11y test (ex. ['list', 'region'])
- */
-Cypress.Commands.add('checkAxeA11y', (context, additionalRules) => {
-  function terminalLog(violations) {
-    cy.task(
-      'log',
-      `${violations.length} accessibility violation${violations.length === 1 ? '' : 's'} ${
-        violations.length === 1 ? 'was' : 'were'
-      } detected`
-    );
-    // pluck specific keys to keep the table readable
-    const violationData = violations.map(({ id, impact, description, nodes }) => ({
-      id,
-      impact,
-      description,
-      nodes: `${nodes.length}: ${nodes.map(({ target }) => target).toString()}`,
-    }));
-
-    cy.task('table', violationData);
-  }
-
-  // skipping page a11y issues because we are only interested at the component level
-  let rules = {
-    region: { enabled: false },
-    'page-has-heading-one': { enabled: false },
-    'landmark-one-main': { enabled: false },
-  };
-
-  if (additionalRules) {
-    additionalRules.forEach(rule => (rules[rule] = { enabled: false }));
-  }
-
-  cy.checkA11y(
-    context || null,
-    {
-      rules: rules,
-      includedImpacts: ['moderate', 'critical', 'serious']
-    },
-    terminalLog,
-    true
-  );
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/support/index.js b/packages/react/tests/e2e-storybook/cypress/support/index.js
deleted file mode 100644
index 7be460e9d7f..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/support/index.js
+++ /dev/null
@@ -1,78 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 '@percy/cypress';
-import 'cypress-axe'
-import './commands';
-
-beforeEach(() => {
-  // Mock the country list
-  cy.intercept(
-    'https://1.www.s81c.com/common/js/dynamicnav/www/countrylist/jsononly/usen-utf8.json',
-    { fixture: 'countrylist.json' }
-  );
-
-  // Mock the translation file
-  cy.intercept(
-    'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/translations/masthead-footer/usen.json',
-    { fixture: 'translation-raw.json' }
-  );
-
-  // Mock the user status
-  cy.intercept('https://login.ibm.com/v1/mgmt/idaas/user/status/\n', {
-    fixture: 'status.json',
-  });
-
-  cy.intercept('https://prepiam.ice.ibmcloud.com/v1/mgmt/idaas/user/status/', {
-    fixture: 'status.json',
-  });
-
-  // Mock search typeahead API
-  cy.intercept('**/search/typeahead/v1?*', {
-    fixture: 'typeahead.json',
-  });
-
-  // Block ibm-common.js
-  cy.intercept('https://1.www.s81c.com/common/stats/ibm-common.js', {
-    fixture: 'ibm-common.js',
-  });
-
-  // Mock Kaltura API
-  // cy.intercept('https://cdnapisec.kaltura.com/api_v3/index.php?*', {
-  //   fixture: 'kaltura.json',
-  // });
-
-  // Set an initial `digitalData` object
-  cy.window().then(win => {
-    win.digitalData = {
-      page: {
-        category: {
-          primaryCategory: '',
-        },
-        pageInfo: {
-          effectiveDate: '',
-          expiryDate: '',
-          language: 'en-US',
-          publishDate: '',
-          publisher: '',
-          version: 'Carbon for IBM.com',
-          ibm: {
-            contentDelivery: '',
-            contentProducer: '',
-            country: 'US',
-            industry: '',
-            owner: '',
-            siteID: '',
-            subject: '',
-            type: '',
-          },
-        },
-        isDataLayerReady: true,
-      },
-    };
-  });
-});
diff --git a/packages/react/tests/e2e-storybook/cypress/utils/get-css-property-for-rule.js b/packages/react/tests/e2e-storybook/cypress/utils/get-css-property-for-rule.js
deleted file mode 100644
index 5c27faf1ce5..00000000000
--- a/packages/react/tests/e2e-storybook/cypress/utils/get-css-property-for-rule.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-export default function getCssPropertyForRule(rule, prop, sheets) {
-  const slen = sheets.length;
-  for (let i = 0; i < slen; i++) {
-    let rules;
-    try {
-      rules = sheets[i].cssRules;
-    } catch (e) {
-      continue;
-    }
-    const rlen = rules.length;
-    for (let j = 0; j < rlen; j++) {
-      if (rules[j].selectorText === rule) {
-        return rules[j].style[prop];
-      }
-    }
-  }
-}
diff --git a/packages/react/tests/e2e/.gitignore b/packages/react/tests/e2e/.gitignore
deleted file mode 100644
index 1521c8b7652..00000000000
--- a/packages/react/tests/e2e/.gitignore
+++ /dev/null
@@ -1 +0,0 @@
-dist
diff --git a/packages/react/tests/e2e/.percy.json b/packages/react/tests/e2e/.percy.json
deleted file mode 100644
index 6bed27c5f3a..00000000000
--- a/packages/react/tests/e2e/.percy.json
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-  "version": 2,
-  "snapshot": {
-    "widths": [
-      375,
-      1280
-    ]
-  }
-}
diff --git a/packages/react/tests/e2e/build/build-examples.js b/packages/react/tests/e2e/build/build-examples.js
deleted file mode 100644
index 64492521a5a..00000000000
--- a/packages/react/tests/e2e/build/build-examples.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 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.
- */
-
-'use strict';
-
-const fsExtra = require('fs-extra');
-const fs = require('fs');
-const path = require('path');
-const { execSync } = require('child_process');
-const chalk = require('chalk');
-const { program } = require('commander');
-const { mkdirSync, track } = require('temp');
-
-program
-  .option('-C, --skip-clean', 'Skips cleaning build folders')
-  .option('-P, --skip-packages', 'Skips the local package setup')
-  .option('-D, --skip-dist', 'Skips the local dist components build')
-  .option('-E, --skip-examples', 'Skips the local examples setup');
-program.parse();
-
-/**
- * Command line options
- *
- * @type {program.OptionValues}
- */
-const _opts = program.opts();
-
-const { log, error } = console;
-
-/**
- * Project root folder
- *
- * @type {string}
- * @private
- */
-const _projectRoot = path.resolve(__dirname, '../../..');
-
-/**
- * Test script folder
- *
- * @type {string}
- * @private
- */
-const _testScriptFolder = `${_projectRoot}/tests/e2e/build`;
-
-/**
- * Examples source folder
- *
- * @type {string}
- * @private
- */
-const _exampleSrc = path.resolve(__dirname, '../../../examples/codesandbox/components');
-
-/**
- * Local packages for the examples
- *
- * @type {string}
- * @private
- */
-const _localPackagesFolder = mkdirSync('temp-packages-');
-
-/**
- * Examples build folder
- *
- * @type {string}
- * @private
- */
-const _exampleBuild = mkdirSync('temp-examples-');
-
-/**
- * Distribution folder
- *
- * @type {string}
- * @private
- */
-const _distFolder = path.resolve(__dirname, '../dist/');
-
-/**
- * Defines the local packs to build
- *
- * @type {{styles: string, services: string, utilities: string}}
- * @private
- */
-const _packages = {
-  react: path.resolve(__dirname, '../../../../react'),
-  services: path.resolve(__dirname, '../../../../services'),
-  styles: path.resolve(__dirname, '../../../../styles'),
-  utilities: path.resolve(__dirname, '../../../../utilities'),
-};
-
-/**
- * Use older version of Yarn for example builds.
- * Later versions would require changes to every example's package.json file.
- *
- * @type {string}
- * @private
- */
-const _oldYarnVersion = '1.22.19';
-
-/**
- * Stores the list of examples
- *
- * @type {*[]}
- * @private
- */
-let _examples = [];
-
-/**
- * Gets the list of directories in the examples folder
- *
- * @param {string} folder Folder to get the list of sub directories from
- * @returns {*} Array of folders
- * @private
- */
-function _getDirectories(folder) {
-  return fsExtra
-    .readdirSync(folder, { withFileTypes: true })
-    .filter(dirent => dirent.isDirectory())
-    .map(dirent => dirent.name);
-}
-
-/**
- * Puts the build artifacts in the given temporary directory
- * and resolves dependencies in `package.json` to use such build artifacts.
- *
- * @private
- */
-function _setupPackages() {
-  if (!_opts.skipPackages) {
-    log(chalk.yellow('Creating local packages...'));
-
-    Object.keys(_packages).forEach(pack => {
-      log(chalk.green(`Building package: ${pack}`));
-
-      const commands = [];
-      commands.push(
-        `cd "${_packages[pack]}" && yarn pack --filename "${_localPackagesFolder}/carbon-ibmdotcom-${pack}.tar.gz"`,
-        `tar xzf "${_localPackagesFolder}/carbon-ibmdotcom-${pack}.tar.gz" --directory "${_localPackagesFolder}"`,
-        `mv "${_localPackagesFolder}/package" "${_localPackagesFolder}/ibmdotcom-${pack}"`,
-        // eslint-disable-next-line max-len
-        `node "${_testScriptFolder}/replace-dependencies.js" -f "${_localPackagesFolder}" "${_localPackagesFolder}/ibmdotcom-${pack}/package.json"`
-      );
-
-      commands.forEach(command => {
-        const { stdout, stderr } = execSync(command);
-        if (stdout) {
-          log(stdout.toString());
-        }
-        if (stderr) {
-          error(stderr.toString());
-        }
-      });
-    });
-  }
-}
-
-/**
- * Builds then copies the dist folder to the final location
- *
- * @private
- */
-function _buildExamples() {
-  // Use older Yarn version for example builds.
-  // Setting the version earlier in the build chain will alter the root project.
-  log(chalk.yellow('Installing all examples...'));
-  // need to install twice for some reason, need to look into this
-  execSync(`yarn set version ${_oldYarnVersion} && yarn install --network-timeout 100000`, {
-    cwd: _exampleBuild,
-    stdio: 'inherit',
-  });
-
-  execSync(`yarn set version ${_oldYarnVersion} && yarn cache clean && yarn install --network-timeout 100000`, {
-    cwd: _exampleBuild,
-    stdio: 'inherit',
-  });
-
-  log(chalk.yellow('Building all examples...'));
-  _examples.forEach(example => {
-    log(chalk.green(`Building ${example}...`));
-    execSync('NODE_OPTIONS=--openssl-legacy-provider yarn build', {
-      cwd: `${_exampleBuild}/components/${example}`,
-      stdio: 'inherit',
-    });
-
-    // Copying dist output
-    log(chalk.green(`Copying ${example} to dist...`));
-    execSync(`mv "${_exampleBuild}/components/${example}/dist" "${_distFolder}/${example}"`);
-  });
-}
-
-/**
- * Cleans all of the build folders
- *
- * @private
- */
-function _clean() {
-  if (!_opts.skipClean) {
-    // cleans the temporary folders
-    track();
-
-    // Delete the dist folder
-    if (fsExtra.existsSync(_distFolder)) {
-      log(chalk.yellow(`Deleting dist folder: ${_distFolder}`));
-      fsExtra.rmdirSync(_distFolder, { recursive: true });
-    }
-    fsExtra.mkdirSync(_distFolder);
-  }
-}
-
-/**
- * Copies the source examples to the local examples folder for building
- *
- * @private
- */
-function _copyExamples() {
-  if (!_opts.skipExamples) {
-    log(chalk.yellow('Copying examples folder...'));
-    fsExtra.mkdirSync(`${_exampleBuild}/components`);
-    fsExtra.copySync(`${_testScriptFolder}/examples-scaffold`, `${_exampleBuild}`);
-    fsExtra.copySync(_exampleSrc, `${_exampleBuild}/components`);
-    _examples = _getDirectories(`${_exampleBuild}/components`);
-  }
-}
-
-/**
- * Creates the index file for the deploy preview
- *
- * @private
- */
-function _createIndex() {
-  log(chalk.yellow('Creating index file...'));
-
-  // eslint-disable-next-line max-len
-  let content = `<html><head><link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" /></head><body style="padding: 2rem;"><ul style="list-style: disc;">`;
-
-  _examples.forEach(example => {
-    content += `
-<li><a href="./${example}/index.html">${example}</a></li>`;
-  });
-
-  content += '</ul></body></html>';
-
-  // Writing to dist
-  fs.writeFileSync(`${_distFolder}/index.html`, content);
-}
-
-/**
- * Building the examples
- */
-function build() {
-  _clean();
-
-  log(chalk.yellow(`Temporary packages directory created: ${_localPackagesFolder}`));
-  _setupPackages();
-
-  log(chalk.yellow(`Temporary examples directory created: ${_exampleBuild}`));
-  _copyExamples();
-
-  // Create the dynamic index root file
-  _createIndex();
-
-  _examples.forEach(example => {
-    log(chalk.green(`Replacing dependencies for ${example} and installing`));
-    execSync(
-      // eslint-disable-next-line max-len
-      `node "${_testScriptFolder}/replace-dependencies.js" -f "${_localPackagesFolder}" "${_exampleBuild}/components/${example}/package.json"`
-    );
-  });
-
-  _buildExamples();
-}
-
-build();
diff --git a/packages/react/tests/e2e/build/examples-scaffold/.yarn/releases/yarn-1.22.10.js b/packages/react/tests/e2e/build/examples-scaffold/.yarn/releases/yarn-1.22.10.js
deleted file mode 100755
index 68b1990b1d9..00000000000
--- a/packages/react/tests/e2e/build/examples-scaffold/.yarn/releases/yarn-1.22.10.js
+++ /dev/null
@@ -1,147392 +0,0 @@
-#!/usr/bin/env node
-module.exports =
-/******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-/******/
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-/******/
-/******/ 		// Check if module is in cache
-/******/ 		if(installedModules[moduleId]) {
-/******/ 			return installedModules[moduleId].exports;
-/******/ 		}
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			i: moduleId,
-/******/ 			l: false,
-/******/ 			exports: {}
-/******/ 		};
-/******/
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-/******/
-/******/ 		// Flag the module as loaded
-/******/ 		module.l = true;
-/******/
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-/******/
-/******/
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-/******/
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-/******/
-/******/ 	// identity function for calling harmony imports with the correct context
-/******/ 	__webpack_require__.i = function(value) { return value; };
-/******/
-/******/ 	// define getter function for harmony exports
-/******/ 	__webpack_require__.d = function(exports, name, getter) {
-/******/ 		if(!__webpack_require__.o(exports, name)) {
-/******/ 			Object.defineProperty(exports, name, {
-/******/ 				configurable: false,
-/******/ 				enumerable: true,
-/******/ 				get: getter
-/******/ 			});
-/******/ 		}
-/******/ 	};
-/******/
-/******/ 	// getDefaultExport function for compatibility with non-harmony modules
-/******/ 	__webpack_require__.n = function(module) {
-/******/ 		var getter = module && module.__esModule ?
-/******/ 			function getDefault() { return module['default']; } :
-/******/ 			function getModuleExports() { return module; };
-/******/ 		__webpack_require__.d(getter, 'a', getter);
-/******/ 		return getter;
-/******/ 	};
-/******/
-/******/ 	// Object.prototype.hasOwnProperty.call
-/******/ 	__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
-/******/
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-/******/
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(__webpack_require__.s = 549);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ (function(module, exports) {
-
-module.exports = require("path");
-
-/***/ }),
-/* 1 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = __extends;
-/* unused harmony export __assign */
-/* unused harmony export __rest */
-/* unused harmony export __decorate */
-/* unused harmony export __param */
-/* unused harmony export __metadata */
-/* unused harmony export __awaiter */
-/* unused harmony export __generator */
-/* unused harmony export __exportStar */
-/* unused harmony export __values */
-/* unused harmony export __read */
-/* unused harmony export __spread */
-/* unused harmony export __await */
-/* unused harmony export __asyncGenerator */
-/* unused harmony export __asyncDelegator */
-/* unused harmony export __asyncValues */
-/* unused harmony export __makeTemplateObject */
-/* unused harmony export __importStar */
-/* unused harmony export __importDefault */
-/*! *****************************************************************************
-Copyright (c) Microsoft Corporation. All rights reserved.
-Licensed under the Apache License, Version 2.0 (the "License"); you may not use
-this file except in compliance with the License. You may obtain a copy of the
-License at http://www.apache.org/licenses/LICENSE-2.0
-
-THIS CODE IS PROVIDED ON AN *AS IS* BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
-KIND, EITHER EXPRESS OR IMPLIED, INCLUDING WITHOUT LIMITATION ANY IMPLIED
-WARRANTIES OR CONDITIONS OF TITLE, FITNESS FOR A PARTICULAR PURPOSE,
-MERCHANTABLITY OR NON-INFRINGEMENT.
-
-See the Apache Version 2.0 License for specific language governing permissions
-and limitations under the License.
-***************************************************************************** */
-/* global Reflect, Promise */
-
-var extendStatics = function(d, b) {
-    extendStatics = Object.setPrototypeOf ||
-        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-    return extendStatics(d, b);
-};
-
-function __extends(d, b) {
-    extendStatics(d, b);
-    function __() { this.constructor = d; }
-    d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-}
-
-var __assign = function() {
-    __assign = Object.assign || function __assign(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
-        }
-        return t;
-    }
-    return __assign.apply(this, arguments);
-}
-
-function __rest(s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) if (e.indexOf(p[i]) < 0)
-            t[p[i]] = s[p[i]];
-    return t;
-}
-
-function __decorate(decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
-}
-
-function __param(paramIndex, decorator) {
-    return function (target, key) { decorator(target, key, paramIndex); }
-}
-
-function __metadata(metadataKey, metadataValue) {
-    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(metadataKey, metadataValue);
-}
-
-function __awaiter(thisArg, _arguments, P, generator) {
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : new P(function (resolve) { resolve(result.value); }).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-}
-
-function __generator(thisArg, body) {
-    var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g;
-    return g = { next: verb(0), "throw": verb(1), "return": verb(2) }, typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
-    function verb(n) { return function (v) { return step([n, v]); }; }
-    function step(op) {
-        if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
-            if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
-            if (y = 0, t) op = [op[0] & 2, t.value];
-            switch (op[0]) {
-                case 0: case 1: t = op; break;
-                case 4: _.label++; return { value: op[1], done: false };
-                case 5: _.label++; y = op[1]; op = [0]; continue;
-                case 7: op = _.ops.pop(); _.trys.pop(); continue;
-                default:
-                    if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
-                    if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
-                    if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
-                    if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
-                    if (t[2]) _.ops.pop();
-                    _.trys.pop(); continue;
-            }
-            op = body.call(thisArg, _);
-        } catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
-        if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
-    }
-}
-
-function __exportStar(m, exports) {
-    for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
-}
-
-function __values(o) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0;
-    if (m) return m.call(o);
-    return {
-        next: function () {
-            if (o && i >= o.length) o = void 0;
-            return { value: o && o[i++], done: !o };
-        }
-    };
-}
-
-function __read(o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-}
-
-function __spread() {
-    for (var ar = [], i = 0; i < arguments.length; i++)
-        ar = ar.concat(__read(arguments[i]));
-    return ar;
-}
-
-function __await(v) {
-    return this instanceof __await ? (this.v = v, this) : new __await(v);
-}
-
-function __asyncGenerator(thisArg, _arguments, generator) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var g = generator.apply(thisArg, _arguments || []), i, q = [];
-    return i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i;
-    function verb(n) { if (g[n]) i[n] = function (v) { return new Promise(function (a, b) { q.push([n, v, a, b]) > 1 || resume(n, v); }); }; }
-    function resume(n, v) { try { step(g[n](v)); } catch (e) { settle(q[0][3], e); } }
-    function step(r) { r.value instanceof __await ? Promise.resolve(r.value.v).then(fulfill, reject) : settle(q[0][2], r); }
-    function fulfill(value) { resume("next", value); }
-    function reject(value) { resume("throw", value); }
-    function settle(f, v) { if (f(v), q.shift(), q.length) resume(q[0][0], q[0][1]); }
-}
-
-function __asyncDelegator(o) {
-    var i, p;
-    return i = {}, verb("next"), verb("throw", function (e) { throw e; }), verb("return"), i[Symbol.iterator] = function () { return this; }, i;
-    function verb(n, f) { i[n] = o[n] ? function (v) { return (p = !p) ? { value: __await(o[n](v)), done: n === "return" } : f ? f(v) : v; } : f; }
-}
-
-function __asyncValues(o) {
-    if (!Symbol.asyncIterator) throw new TypeError("Symbol.asyncIterator is not defined.");
-    var m = o[Symbol.asyncIterator], i;
-    return m ? m.call(o) : (o = typeof __values === "function" ? __values(o) : o[Symbol.iterator](), i = {}, verb("next"), verb("throw"), verb("return"), i[Symbol.asyncIterator] = function () { return this; }, i);
-    function verb(n) { i[n] = o[n] && function (v) { return new Promise(function (resolve, reject) { v = o[n](v), settle(resolve, reject, v.done, v.value); }); }; }
-    function settle(resolve, reject, d, v) { Promise.resolve(v).then(function(v) { resolve({ value: v, done: d }); }, reject); }
-}
-
-function __makeTemplateObject(cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
-
-function __importStar(mod) {
-    if (mod && mod.__esModule) return mod;
-    var result = {};
-    if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
-    result.default = mod;
-    return result;
-}
-
-function __importDefault(mod) {
-    return (mod && mod.__esModule) ? mod : { default: mod };
-}
-
-
-/***/ }),
-/* 2 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-exports.__esModule = true;
-
-var _promise = __webpack_require__(227);
-
-var _promise2 = _interopRequireDefault(_promise);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = function (fn) {
-  return function () {
-    var gen = fn.apply(this, arguments);
-    return new _promise2.default(function (resolve, reject) {
-      function step(key, arg) {
-        try {
-          var info = gen[key](arg);
-          var value = info.value;
-        } catch (error) {
-          reject(error);
-          return;
-        }
-
-        if (info.done) {
-          resolve(value);
-        } else {
-          return _promise2.default.resolve(value).then(function (value) {
-            step("next", value);
-          }, function (err) {
-            step("throw", err);
-          });
-        }
-      }
-
-      return step("next");
-    });
-  };
-};
-
-/***/ }),
-/* 3 */
-/***/ (function(module, exports) {
-
-module.exports = require("util");
-
-/***/ }),
-/* 4 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getFirstSuitableFolder = exports.readFirstAvailableStream = exports.makeTempDir = exports.hardlinksWork = exports.writeFilePreservingEol = exports.getFileSizeOnDisk = exports.walk = exports.symlink = exports.find = exports.readJsonAndFile = exports.readJson = exports.readFileAny = exports.hardlinkBulk = exports.copyBulk = exports.unlink = exports.glob = exports.link = exports.chmod = exports.lstat = exports.exists = exports.mkdirp = exports.stat = exports.access = exports.rename = exports.readdir = exports.realpath = exports.readlink = exports.writeFile = exports.open = exports.readFileBuffer = exports.lockQueue = exports.constants = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let buildActionsForCopy = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, events, possibleExtraneous, reporter) {
-
-    //
-    let build = (() => {
-      var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) {
-        const src = data.src,
-              dest = data.dest,
-              type = data.type;
-
-        const onFresh = data.onFresh || noop;
-        const onDone = data.onDone || noop;
-
-        // TODO https://github.com/yarnpkg/yarn/issues/3751
-        // related to bundled dependencies handling
-        if (files.has(dest.toLowerCase())) {
-          reporter.verbose(`The case-insensitive file ${dest} shouldn't be copied twice in one bulk copy`);
-        } else {
-          files.add(dest.toLowerCase());
-        }
-
-        if (type === 'symlink') {
-          yield mkdirp((_path || _load_path()).default.dirname(dest));
-          onFresh();
-          actions.symlink.push({
-            dest,
-            linkname: src
-          });
-          onDone();
-          return;
-        }
-
-        if (events.ignoreBasenames.indexOf((_path || _load_path()).default.basename(src)) >= 0) {
-          // ignored file
-          return;
-        }
-
-        const srcStat = yield lstat(src);
-        let srcFiles;
-
-        if (srcStat.isDirectory()) {
-          srcFiles = yield readdir(src);
-        }
-
-        let destStat;
-        try {
-          // try accessing the destination
-          destStat = yield lstat(dest);
-        } catch (e) {
-          // proceed if destination doesn't exist, otherwise error
-          if (e.code !== 'ENOENT') {
-            throw e;
-          }
-        }
-
-        // if destination exists
-        if (destStat) {
-          const bothSymlinks = srcStat.isSymbolicLink() && destStat.isSymbolicLink();
-          const bothFolders = srcStat.isDirectory() && destStat.isDirectory();
-          const bothFiles = srcStat.isFile() && destStat.isFile();
-
-          // EINVAL access errors sometimes happen which shouldn't because node shouldn't be giving
-          // us modes that aren't valid. investigate this, it's generally safe to proceed.
-
-          /* if (srcStat.mode !== destStat.mode) {
-            try {
-              await access(dest, srcStat.mode);
-            } catch (err) {}
-          } */
-
-          if (bothFiles && artifactFiles.has(dest)) {
-            // this file gets changed during build, likely by a custom install script. Don't bother checking it.
-            onDone();
-            reporter.verbose(reporter.lang('verboseFileSkipArtifact', src));
-            return;
-          }
-
-          if (bothFiles && srcStat.size === destStat.size && (0, (_fsNormalized || _load_fsNormalized()).fileDatesEqual)(srcStat.mtime, destStat.mtime)) {
-            // we can safely assume this is the same file
-            onDone();
-            reporter.verbose(reporter.lang('verboseFileSkip', src, dest, srcStat.size, +srcStat.mtime));
-            return;
-          }
-
-          if (bothSymlinks) {
-            const srcReallink = yield readlink(src);
-            if (srcReallink === (yield readlink(dest))) {
-              // if both symlinks are the same then we can continue on
-              onDone();
-              reporter.verbose(reporter.lang('verboseFileSkipSymlink', src, dest, srcReallink));
-              return;
-            }
-          }
-
-          if (bothFolders) {
-            // mark files that aren't in this folder as possibly extraneous
-            const destFiles = yield readdir(dest);
-            invariant(srcFiles, 'src files not initialised');
-
-            for (var _iterator4 = destFiles, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-              var _ref6;
-
-              if (_isArray4) {
-                if (_i4 >= _iterator4.length) break;
-                _ref6 = _iterator4[_i4++];
-              } else {
-                _i4 = _iterator4.next();
-                if (_i4.done) break;
-                _ref6 = _i4.value;
-              }
-
-              const file = _ref6;
-
-              if (srcFiles.indexOf(file) < 0) {
-                const loc = (_path || _load_path()).default.join(dest, file);
-                possibleExtraneous.add(loc);
-
-                if ((yield lstat(loc)).isDirectory()) {
-                  for (var _iterator5 = yield readdir(loc), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-                    var _ref7;
-
-                    if (_isArray5) {
-                      if (_i5 >= _iterator5.length) break;
-                      _ref7 = _iterator5[_i5++];
-                    } else {
-                      _i5 = _iterator5.next();
-                      if (_i5.done) break;
-                      _ref7 = _i5.value;
-                    }
-
-                    const file = _ref7;
-
-                    possibleExtraneous.add((_path || _load_path()).default.join(loc, file));
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        if (destStat && destStat.isSymbolicLink()) {
-          yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(dest);
-          destStat = null;
-        }
-
-        if (srcStat.isSymbolicLink()) {
-          onFresh();
-          const linkname = yield readlink(src);
-          actions.symlink.push({
-            dest,
-            linkname
-          });
-          onDone();
-        } else if (srcStat.isDirectory()) {
-          if (!destStat) {
-            reporter.verbose(reporter.lang('verboseFileFolder', dest));
-            yield mkdirp(dest);
-          }
-
-          const destParts = dest.split((_path || _load_path()).default.sep);
-          while (destParts.length) {
-            files.add(destParts.join((_path || _load_path()).default.sep).toLowerCase());
-            destParts.pop();
-          }
-
-          // push all files to queue
-          invariant(srcFiles, 'src files not initialised');
-          let remaining = srcFiles.length;
-          if (!remaining) {
-            onDone();
-          }
-          for (var _iterator6 = srcFiles, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-            var _ref8;
-
-            if (_isArray6) {
-              if (_i6 >= _iterator6.length) break;
-              _ref8 = _iterator6[_i6++];
-            } else {
-              _i6 = _iterator6.next();
-              if (_i6.done) break;
-              _ref8 = _i6.value;
-            }
-
-            const file = _ref8;
-
-            queue.push({
-              dest: (_path || _load_path()).default.join(dest, file),
-              onFresh,
-              onDone: function (_onDone) {
-                function onDone() {
-                  return _onDone.apply(this, arguments);
-                }
-
-                onDone.toString = function () {
-                  return _onDone.toString();
-                };
-
-                return onDone;
-              }(function () {
-                if (--remaining === 0) {
-                  onDone();
-                }
-              }),
-              src: (_path || _load_path()).default.join(src, file)
-            });
-          }
-        } else if (srcStat.isFile()) {
-          onFresh();
-          actions.file.push({
-            src,
-            dest,
-            atime: srcStat.atime,
-            mtime: srcStat.mtime,
-            mode: srcStat.mode
-          });
-          onDone();
-        } else {
-          throw new Error(`unsure how to copy this: ${src}`);
-        }
-      });
-
-      return function build(_x5) {
-        return _ref5.apply(this, arguments);
-      };
-    })();
-
-    const artifactFiles = new Set(events.artifactFiles || []);
-    const files = new Set();
-
-    // initialise events
-    for (var _iterator = queue, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const item = _ref2;
-
-      const onDone = item.onDone;
-      item.onDone = function () {
-        events.onProgress(item.dest);
-        if (onDone) {
-          onDone();
-        }
-      };
-    }
-    events.onStart(queue.length);
-
-    // start building actions
-    const actions = {
-      file: [],
-      symlink: [],
-      link: []
-    };
-
-    // custom concurrency logic as we're always executing stacks of CONCURRENT_QUEUE_ITEMS queue items
-    // at a time due to the requirement to push items onto the queue
-    while (queue.length) {
-      const items = queue.splice(0, CONCURRENT_QUEUE_ITEMS);
-      yield Promise.all(items.map(build));
-    }
-
-    // simulate the existence of some files to prevent considering them extraneous
-    for (var _iterator2 = artifactFiles, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref3;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref3 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref3 = _i2.value;
-      }
-
-      const file = _ref3;
-
-      if (possibleExtraneous.has(file)) {
-        reporter.verbose(reporter.lang('verboseFilePhantomExtraneous', file));
-        possibleExtraneous.delete(file);
-      }
-    }
-
-    for (var _iterator3 = possibleExtraneous, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref4 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref4 = _i3.value;
-      }
-
-      const loc = _ref4;
-
-      if (files.has(loc.toLowerCase())) {
-        possibleExtraneous.delete(loc);
-      }
-    }
-
-    return actions;
-  });
-
-  return function buildActionsForCopy(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let buildActionsForHardlink = (() => {
-  var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, events, possibleExtraneous, reporter) {
-
-    //
-    let build = (() => {
-      var _ref13 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) {
-        const src = data.src,
-              dest = data.dest;
-
-        const onFresh = data.onFresh || noop;
-        const onDone = data.onDone || noop;
-        if (files.has(dest.toLowerCase())) {
-          // Fixes issue https://github.com/yarnpkg/yarn/issues/2734
-          // When bulk hardlinking we have A -> B structure that we want to hardlink to A1 -> B1,
-          // package-linker passes that modules A1 and B1 need to be hardlinked,
-          // the recursive linking algorithm of A1 ends up scheduling files in B1 to be linked twice which will case
-          // an exception.
-          onDone();
-          return;
-        }
-        files.add(dest.toLowerCase());
-
-        if (events.ignoreBasenames.indexOf((_path || _load_path()).default.basename(src)) >= 0) {
-          // ignored file
-          return;
-        }
-
-        const srcStat = yield lstat(src);
-        let srcFiles;
-
-        if (srcStat.isDirectory()) {
-          srcFiles = yield readdir(src);
-        }
-
-        const destExists = yield exists(dest);
-        if (destExists) {
-          const destStat = yield lstat(dest);
-
-          const bothSymlinks = srcStat.isSymbolicLink() && destStat.isSymbolicLink();
-          const bothFolders = srcStat.isDirectory() && destStat.isDirectory();
-          const bothFiles = srcStat.isFile() && destStat.isFile();
-
-          if (srcStat.mode !== destStat.mode) {
-            try {
-              yield access(dest, srcStat.mode);
-            } catch (err) {
-              // EINVAL access errors sometimes happen which shouldn't because node shouldn't be giving
-              // us modes that aren't valid. investigate this, it's generally safe to proceed.
-              reporter.verbose(err);
-            }
-          }
-
-          if (bothFiles && artifactFiles.has(dest)) {
-            // this file gets changed during build, likely by a custom install script. Don't bother checking it.
-            onDone();
-            reporter.verbose(reporter.lang('verboseFileSkipArtifact', src));
-            return;
-          }
-
-          // correct hardlink
-          if (bothFiles && srcStat.ino !== null && srcStat.ino === destStat.ino) {
-            onDone();
-            reporter.verbose(reporter.lang('verboseFileSkip', src, dest, srcStat.ino));
-            return;
-          }
-
-          if (bothSymlinks) {
-            const srcReallink = yield readlink(src);
-            if (srcReallink === (yield readlink(dest))) {
-              // if both symlinks are the same then we can continue on
-              onDone();
-              reporter.verbose(reporter.lang('verboseFileSkipSymlink', src, dest, srcReallink));
-              return;
-            }
-          }
-
-          if (bothFolders) {
-            // mark files that aren't in this folder as possibly extraneous
-            const destFiles = yield readdir(dest);
-            invariant(srcFiles, 'src files not initialised');
-
-            for (var _iterator10 = destFiles, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-              var _ref14;
-
-              if (_isArray10) {
-                if (_i10 >= _iterator10.length) break;
-                _ref14 = _iterator10[_i10++];
-              } else {
-                _i10 = _iterator10.next();
-                if (_i10.done) break;
-                _ref14 = _i10.value;
-              }
-
-              const file = _ref14;
-
-              if (srcFiles.indexOf(file) < 0) {
-                const loc = (_path || _load_path()).default.join(dest, file);
-                possibleExtraneous.add(loc);
-
-                if ((yield lstat(loc)).isDirectory()) {
-                  for (var _iterator11 = yield readdir(loc), _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-                    var _ref15;
-
-                    if (_isArray11) {
-                      if (_i11 >= _iterator11.length) break;
-                      _ref15 = _iterator11[_i11++];
-                    } else {
-                      _i11 = _iterator11.next();
-                      if (_i11.done) break;
-                      _ref15 = _i11.value;
-                    }
-
-                    const file = _ref15;
-
-                    possibleExtraneous.add((_path || _load_path()).default.join(loc, file));
-                  }
-                }
-              }
-            }
-          }
-        }
-
-        if (srcStat.isSymbolicLink()) {
-          onFresh();
-          const linkname = yield readlink(src);
-          actions.symlink.push({
-            dest,
-            linkname
-          });
-          onDone();
-        } else if (srcStat.isDirectory()) {
-          reporter.verbose(reporter.lang('verboseFileFolder', dest));
-          yield mkdirp(dest);
-
-          const destParts = dest.split((_path || _load_path()).default.sep);
-          while (destParts.length) {
-            files.add(destParts.join((_path || _load_path()).default.sep).toLowerCase());
-            destParts.pop();
-          }
-
-          // push all files to queue
-          invariant(srcFiles, 'src files not initialised');
-          let remaining = srcFiles.length;
-          if (!remaining) {
-            onDone();
-          }
-          for (var _iterator12 = srcFiles, _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) {
-            var _ref16;
-
-            if (_isArray12) {
-              if (_i12 >= _iterator12.length) break;
-              _ref16 = _iterator12[_i12++];
-            } else {
-              _i12 = _iterator12.next();
-              if (_i12.done) break;
-              _ref16 = _i12.value;
-            }
-
-            const file = _ref16;
-
-            queue.push({
-              onFresh,
-              src: (_path || _load_path()).default.join(src, file),
-              dest: (_path || _load_path()).default.join(dest, file),
-              onDone: function (_onDone2) {
-                function onDone() {
-                  return _onDone2.apply(this, arguments);
-                }
-
-                onDone.toString = function () {
-                  return _onDone2.toString();
-                };
-
-                return onDone;
-              }(function () {
-                if (--remaining === 0) {
-                  onDone();
-                }
-              })
-            });
-          }
-        } else if (srcStat.isFile()) {
-          onFresh();
-          actions.link.push({
-            src,
-            dest,
-            removeDest: destExists
-          });
-          onDone();
-        } else {
-          throw new Error(`unsure how to copy this: ${src}`);
-        }
-      });
-
-      return function build(_x10) {
-        return _ref13.apply(this, arguments);
-      };
-    })();
-
-    const artifactFiles = new Set(events.artifactFiles || []);
-    const files = new Set();
-
-    // initialise events
-    for (var _iterator7 = queue, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-      var _ref10;
-
-      if (_isArray7) {
-        if (_i7 >= _iterator7.length) break;
-        _ref10 = _iterator7[_i7++];
-      } else {
-        _i7 = _iterator7.next();
-        if (_i7.done) break;
-        _ref10 = _i7.value;
-      }
-
-      const item = _ref10;
-
-      const onDone = item.onDone || noop;
-      item.onDone = function () {
-        events.onProgress(item.dest);
-        onDone();
-      };
-    }
-    events.onStart(queue.length);
-
-    // start building actions
-    const actions = {
-      file: [],
-      symlink: [],
-      link: []
-    };
-
-    // custom concurrency logic as we're always executing stacks of CONCURRENT_QUEUE_ITEMS queue items
-    // at a time due to the requirement to push items onto the queue
-    while (queue.length) {
-      const items = queue.splice(0, CONCURRENT_QUEUE_ITEMS);
-      yield Promise.all(items.map(build));
-    }
-
-    // simulate the existence of some files to prevent considering them extraneous
-    for (var _iterator8 = artifactFiles, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray8) {
-        if (_i8 >= _iterator8.length) break;
-        _ref11 = _iterator8[_i8++];
-      } else {
-        _i8 = _iterator8.next();
-        if (_i8.done) break;
-        _ref11 = _i8.value;
-      }
-
-      const file = _ref11;
-
-      if (possibleExtraneous.has(file)) {
-        reporter.verbose(reporter.lang('verboseFilePhantomExtraneous', file));
-        possibleExtraneous.delete(file);
-      }
-    }
-
-    for (var _iterator9 = possibleExtraneous, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-      var _ref12;
-
-      if (_isArray9) {
-        if (_i9 >= _iterator9.length) break;
-        _ref12 = _iterator9[_i9++];
-      } else {
-        _i9 = _iterator9.next();
-        if (_i9.done) break;
-        _ref12 = _i9.value;
-      }
-
-      const loc = _ref12;
-
-      if (files.has(loc.toLowerCase())) {
-        possibleExtraneous.delete(loc);
-      }
-    }
-
-    return actions;
-  });
-
-  return function buildActionsForHardlink(_x6, _x7, _x8, _x9) {
-    return _ref9.apply(this, arguments);
-  };
-})();
-
-let copyBulk = exports.copyBulk = (() => {
-  var _ref17 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, reporter, _events) {
-    const events = {
-      onStart: _events && _events.onStart || noop,
-      onProgress: _events && _events.onProgress || noop,
-      possibleExtraneous: _events ? _events.possibleExtraneous : new Set(),
-      ignoreBasenames: _events && _events.ignoreBasenames || [],
-      artifactFiles: _events && _events.artifactFiles || []
-    };
-
-    const actions = yield buildActionsForCopy(queue, events, events.possibleExtraneous, reporter);
-    events.onStart(actions.file.length + actions.symlink.length + actions.link.length);
-
-    const fileActions = actions.file;
-
-    const currentlyWriting = new Map();
-
-    yield (_promise || _load_promise()).queue(fileActions, (() => {
-      var _ref18 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) {
-        let writePromise;
-        while (writePromise = currentlyWriting.get(data.dest)) {
-          yield writePromise;
-        }
-
-        reporter.verbose(reporter.lang('verboseFileCopy', data.src, data.dest));
-        const copier = (0, (_fsNormalized || _load_fsNormalized()).copyFile)(data, function () {
-          return currentlyWriting.delete(data.dest);
-        });
-        currentlyWriting.set(data.dest, copier);
-        events.onProgress(data.dest);
-        return copier;
-      });
-
-      return function (_x14) {
-        return _ref18.apply(this, arguments);
-      };
-    })(), CONCURRENT_QUEUE_ITEMS);
-
-    // we need to copy symlinks last as they could reference files we were copying
-    const symlinkActions = actions.symlink;
-    yield (_promise || _load_promise()).queue(symlinkActions, function (data) {
-      const linkname = (_path || _load_path()).default.resolve((_path || _load_path()).default.dirname(data.dest), data.linkname);
-      reporter.verbose(reporter.lang('verboseFileSymlink', data.dest, linkname));
-      return symlink(linkname, data.dest);
-    });
-  });
-
-  return function copyBulk(_x11, _x12, _x13) {
-    return _ref17.apply(this, arguments);
-  };
-})();
-
-let hardlinkBulk = exports.hardlinkBulk = (() => {
-  var _ref19 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (queue, reporter, _events) {
-    const events = {
-      onStart: _events && _events.onStart || noop,
-      onProgress: _events && _events.onProgress || noop,
-      possibleExtraneous: _events ? _events.possibleExtraneous : new Set(),
-      artifactFiles: _events && _events.artifactFiles || [],
-      ignoreBasenames: []
-    };
-
-    const actions = yield buildActionsForHardlink(queue, events, events.possibleExtraneous, reporter);
-    events.onStart(actions.file.length + actions.symlink.length + actions.link.length);
-
-    const fileActions = actions.link;
-
-    yield (_promise || _load_promise()).queue(fileActions, (() => {
-      var _ref20 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data) {
-        reporter.verbose(reporter.lang('verboseFileLink', data.src, data.dest));
-        if (data.removeDest) {
-          yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(data.dest);
-        }
-        yield link(data.src, data.dest);
-      });
-
-      return function (_x18) {
-        return _ref20.apply(this, arguments);
-      };
-    })(), CONCURRENT_QUEUE_ITEMS);
-
-    // we need to copy symlinks last as they could reference files we were copying
-    const symlinkActions = actions.symlink;
-    yield (_promise || _load_promise()).queue(symlinkActions, function (data) {
-      const linkname = (_path || _load_path()).default.resolve((_path || _load_path()).default.dirname(data.dest), data.linkname);
-      reporter.verbose(reporter.lang('verboseFileSymlink', data.dest, linkname));
-      return symlink(linkname, data.dest);
-    });
-  });
-
-  return function hardlinkBulk(_x15, _x16, _x17) {
-    return _ref19.apply(this, arguments);
-  };
-})();
-
-let readFileAny = exports.readFileAny = (() => {
-  var _ref21 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (files) {
-    for (var _iterator13 = files, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) {
-      var _ref22;
-
-      if (_isArray13) {
-        if (_i13 >= _iterator13.length) break;
-        _ref22 = _iterator13[_i13++];
-      } else {
-        _i13 = _iterator13.next();
-        if (_i13.done) break;
-        _ref22 = _i13.value;
-      }
-
-      const file = _ref22;
-
-      if (yield exists(file)) {
-        return readFile(file);
-      }
-    }
-    return null;
-  });
-
-  return function readFileAny(_x19) {
-    return _ref21.apply(this, arguments);
-  };
-})();
-
-let readJson = exports.readJson = (() => {
-  var _ref23 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) {
-    return (yield readJsonAndFile(loc)).object;
-  });
-
-  return function readJson(_x20) {
-    return _ref23.apply(this, arguments);
-  };
-})();
-
-let readJsonAndFile = exports.readJsonAndFile = (() => {
-  var _ref24 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) {
-    const file = yield readFile(loc);
-    try {
-      return {
-        object: (0, (_map || _load_map()).default)(JSON.parse(stripBOM(file))),
-        content: file
-      };
-    } catch (err) {
-      err.message = `${loc}: ${err.message}`;
-      throw err;
-    }
-  });
-
-  return function readJsonAndFile(_x21) {
-    return _ref24.apply(this, arguments);
-  };
-})();
-
-let find = exports.find = (() => {
-  var _ref25 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (filename, dir) {
-    const parts = dir.split((_path || _load_path()).default.sep);
-
-    while (parts.length) {
-      const loc = parts.concat(filename).join((_path || _load_path()).default.sep);
-
-      if (yield exists(loc)) {
-        return loc;
-      } else {
-        parts.pop();
-      }
-    }
-
-    return false;
-  });
-
-  return function find(_x22, _x23) {
-    return _ref25.apply(this, arguments);
-  };
-})();
-
-let symlink = exports.symlink = (() => {
-  var _ref26 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (src, dest) {
-    if (process.platform !== 'win32') {
-      // use relative paths otherwise which will be retained if the directory is moved
-      src = (_path || _load_path()).default.relative((_path || _load_path()).default.dirname(dest), src);
-      // When path.relative returns an empty string for the current directory, we should instead use
-      // '.', which is a valid fs.symlink target.
-      src = src || '.';
-    }
-
-    try {
-      const stats = yield lstat(dest);
-      if (stats.isSymbolicLink()) {
-        const resolved = dest;
-        if (resolved === src) {
-          return;
-        }
-      }
-    } catch (err) {
-      if (err.code !== 'ENOENT') {
-        throw err;
-      }
-    }
-
-    // We use rimraf for unlink which never throws an ENOENT on missing target
-    yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(dest);
-
-    if (process.platform === 'win32') {
-      // use directory junctions if possible on win32, this requires absolute paths
-      yield fsSymlink(src, dest, 'junction');
-    } else {
-      yield fsSymlink(src, dest);
-    }
-  });
-
-  return function symlink(_x24, _x25) {
-    return _ref26.apply(this, arguments);
-  };
-})();
-
-let walk = exports.walk = (() => {
-  var _ref27 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (dir, relativeDir, ignoreBasenames = new Set()) {
-    let files = [];
-
-    let filenames = yield readdir(dir);
-    if (ignoreBasenames.size) {
-      filenames = filenames.filter(function (name) {
-        return !ignoreBasenames.has(name);
-      });
-    }
-
-    for (var _iterator14 = filenames, _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) {
-      var _ref28;
-
-      if (_isArray14) {
-        if (_i14 >= _iterator14.length) break;
-        _ref28 = _iterator14[_i14++];
-      } else {
-        _i14 = _iterator14.next();
-        if (_i14.done) break;
-        _ref28 = _i14.value;
-      }
-
-      const name = _ref28;
-
-      const relative = relativeDir ? (_path || _load_path()).default.join(relativeDir, name) : name;
-      const loc = (_path || _load_path()).default.join(dir, name);
-      const stat = yield lstat(loc);
-
-      files.push({
-        relative,
-        basename: name,
-        absolute: loc,
-        mtime: +stat.mtime
-      });
-
-      if (stat.isDirectory()) {
-        files = files.concat((yield walk(loc, relative, ignoreBasenames)));
-      }
-    }
-
-    return files;
-  });
-
-  return function walk(_x26, _x27) {
-    return _ref27.apply(this, arguments);
-  };
-})();
-
-let getFileSizeOnDisk = exports.getFileSizeOnDisk = (() => {
-  var _ref29 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) {
-    const stat = yield lstat(loc);
-    const size = stat.size,
-          blockSize = stat.blksize;
-
-
-    return Math.ceil(size / blockSize) * blockSize;
-  });
-
-  return function getFileSizeOnDisk(_x28) {
-    return _ref29.apply(this, arguments);
-  };
-})();
-
-let getEolFromFile = (() => {
-  var _ref30 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (path) {
-    if (!(yield exists(path))) {
-      return undefined;
-    }
-
-    const buffer = yield readFileBuffer(path);
-
-    for (let i = 0; i < buffer.length; ++i) {
-      if (buffer[i] === cr) {
-        return '\r\n';
-      }
-      if (buffer[i] === lf) {
-        return '\n';
-      }
-    }
-    return undefined;
-  });
-
-  return function getEolFromFile(_x29) {
-    return _ref30.apply(this, arguments);
-  };
-})();
-
-let writeFilePreservingEol = exports.writeFilePreservingEol = (() => {
-  var _ref31 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (path, data) {
-    const eol = (yield getEolFromFile(path)) || (_os || _load_os()).default.EOL;
-    if (eol !== '\n') {
-      data = data.replace(/\n/g, eol);
-    }
-    yield writeFile(path, data);
-  });
-
-  return function writeFilePreservingEol(_x30, _x31) {
-    return _ref31.apply(this, arguments);
-  };
-})();
-
-let hardlinksWork = exports.hardlinksWork = (() => {
-  var _ref32 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (dir) {
-    const filename = 'test-file' + Math.random();
-    const file = (_path || _load_path()).default.join(dir, filename);
-    const fileLink = (_path || _load_path()).default.join(dir, filename + '-link');
-    try {
-      yield writeFile(file, 'test');
-      yield link(file, fileLink);
-    } catch (err) {
-      return false;
-    } finally {
-      yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(file);
-      yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(fileLink);
-    }
-    return true;
-  });
-
-  return function hardlinksWork(_x32) {
-    return _ref32.apply(this, arguments);
-  };
-})();
-
-// not a strict polyfill for Node's fs.mkdtemp
-
-
-let makeTempDir = exports.makeTempDir = (() => {
-  var _ref33 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (prefix) {
-    const dir = (_path || _load_path()).default.join((_os || _load_os()).default.tmpdir(), `yarn-${prefix || ''}-${Date.now()}-${Math.random()}`);
-    yield (0, (_fsNormalized || _load_fsNormalized()).unlink)(dir);
-    yield mkdirp(dir);
-    return dir;
-  });
-
-  return function makeTempDir(_x33) {
-    return _ref33.apply(this, arguments);
-  };
-})();
-
-let readFirstAvailableStream = exports.readFirstAvailableStream = (() => {
-  var _ref34 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (paths) {
-    for (var _iterator15 = paths, _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) {
-      var _ref35;
-
-      if (_isArray15) {
-        if (_i15 >= _iterator15.length) break;
-        _ref35 = _iterator15[_i15++];
-      } else {
-        _i15 = _iterator15.next();
-        if (_i15.done) break;
-        _ref35 = _i15.value;
-      }
-
-      const path = _ref35;
-
-      try {
-        const fd = yield open(path, 'r');
-        return (_fs || _load_fs()).default.createReadStream(path, { fd });
-      } catch (err) {
-        // Try the next one
-      }
-    }
-    return null;
-  });
-
-  return function readFirstAvailableStream(_x34) {
-    return _ref34.apply(this, arguments);
-  };
-})();
-
-let getFirstSuitableFolder = exports.getFirstSuitableFolder = (() => {
-  var _ref36 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (paths, mode = constants.W_OK | constants.X_OK) {
-    const result = {
-      skipped: [],
-      folder: null
-    };
-
-    for (var _iterator16 = paths, _isArray16 = Array.isArray(_iterator16), _i16 = 0, _iterator16 = _isArray16 ? _iterator16 : _iterator16[Symbol.iterator]();;) {
-      var _ref37;
-
-      if (_isArray16) {
-        if (_i16 >= _iterator16.length) break;
-        _ref37 = _iterator16[_i16++];
-      } else {
-        _i16 = _iterator16.next();
-        if (_i16.done) break;
-        _ref37 = _i16.value;
-      }
-
-      const folder = _ref37;
-
-      try {
-        yield mkdirp(folder);
-        yield access(folder, mode);
-
-        result.folder = folder;
-
-        return result;
-      } catch (error) {
-        result.skipped.push({
-          error,
-          folder
-        });
-      }
-    }
-    return result;
-  });
-
-  return function getFirstSuitableFolder(_x35) {
-    return _ref36.apply(this, arguments);
-  };
-})();
-
-exports.copy = copy;
-exports.readFile = readFile;
-exports.readFileRaw = readFileRaw;
-exports.normalizeOS = normalizeOS;
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireDefault(__webpack_require__(5));
-}
-
-var _glob;
-
-function _load_glob() {
-  return _glob = _interopRequireDefault(__webpack_require__(99));
-}
-
-var _os;
-
-function _load_os() {
-  return _os = _interopRequireDefault(__webpack_require__(46));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _blockingQueue;
-
-function _load_blockingQueue() {
-  return _blockingQueue = _interopRequireDefault(__webpack_require__(110));
-}
-
-var _promise;
-
-function _load_promise() {
-  return _promise = _interopRequireWildcard(__webpack_require__(50));
-}
-
-var _promise2;
-
-function _load_promise2() {
-  return _promise2 = __webpack_require__(50);
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _fsNormalized;
-
-function _load_fsNormalized() {
-  return _fsNormalized = __webpack_require__(218);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const constants = exports.constants = typeof (_fs || _load_fs()).default.constants !== 'undefined' ? (_fs || _load_fs()).default.constants : {
-  R_OK: (_fs || _load_fs()).default.R_OK,
-  W_OK: (_fs || _load_fs()).default.W_OK,
-  X_OK: (_fs || _load_fs()).default.X_OK
-};
-
-const lockQueue = exports.lockQueue = new (_blockingQueue || _load_blockingQueue()).default('fs lock');
-
-const readFileBuffer = exports.readFileBuffer = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.readFile);
-const open = exports.open = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.open);
-const writeFile = exports.writeFile = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.writeFile);
-const readlink = exports.readlink = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.readlink);
-const realpath = exports.realpath = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.realpath);
-const readdir = exports.readdir = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.readdir);
-const rename = exports.rename = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.rename);
-const access = exports.access = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.access);
-const stat = exports.stat = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.stat);
-const mkdirp = exports.mkdirp = (0, (_promise2 || _load_promise2()).promisify)(__webpack_require__(145));
-const exists = exports.exists = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.exists, true);
-const lstat = exports.lstat = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.lstat);
-const chmod = exports.chmod = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.chmod);
-const link = exports.link = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.link);
-const glob = exports.glob = (0, (_promise2 || _load_promise2()).promisify)((_glob || _load_glob()).default);
-exports.unlink = (_fsNormalized || _load_fsNormalized()).unlink;
-
-// fs.copyFile uses the native file copying instructions on the system, performing much better
-// than any JS-based solution and consumes fewer resources. Repeated testing to fine tune the
-// concurrency level revealed 128 as the sweet spot on a quad-core, 16 CPU Intel system with SSD.
-
-const CONCURRENT_QUEUE_ITEMS = (_fs || _load_fs()).default.copyFile ? 128 : 4;
-
-const fsSymlink = (0, (_promise2 || _load_promise2()).promisify)((_fs || _load_fs()).default.symlink);
-const invariant = __webpack_require__(9);
-const stripBOM = __webpack_require__(160);
-
-const noop = () => {};
-
-function copy(src, dest, reporter) {
-  return copyBulk([{ src, dest }], reporter);
-}
-
-function _readFile(loc, encoding) {
-  return new Promise((resolve, reject) => {
-    (_fs || _load_fs()).default.readFile(loc, encoding, function (err, content) {
-      if (err) {
-        reject(err);
-      } else {
-        resolve(content);
-      }
-    });
-  });
-}
-
-function readFile(loc) {
-  return _readFile(loc, 'utf8').then(normalizeOS);
-}
-
-function readFileRaw(loc) {
-  return _readFile(loc, 'binary');
-}
-
-function normalizeOS(body) {
-  return body.replace(/\r\n/g, '\n');
-}
-
-const cr = '\r'.charCodeAt(0);
-const lf = '\n'.charCodeAt(0);
-
-/***/ }),
-/* 5 */
-/***/ (function(module, exports) {
-
-module.exports = require("fs");
-
-/***/ }),
-/* 6 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-class MessageError extends Error {
-  constructor(msg, code) {
-    super(msg);
-    this.code = code;
-  }
-
-}
-
-exports.MessageError = MessageError;
-class ProcessSpawnError extends MessageError {
-  constructor(msg, code, process) {
-    super(msg, code);
-    this.process = process;
-  }
-
-}
-
-exports.ProcessSpawnError = ProcessSpawnError;
-class SecurityError extends MessageError {}
-
-exports.SecurityError = SecurityError;
-class ProcessTermError extends MessageError {}
-
-exports.ProcessTermError = ProcessTermError;
-class ResponseError extends Error {
-  constructor(msg, responseCode) {
-    super(msg);
-    this.responseCode = responseCode;
-  }
-
-}
-
-exports.ResponseError = ResponseError;
-class OneTimePasswordError extends Error {}
-exports.OneTimePasswordError = OneTimePasswordError;
-
-/***/ }),
-/* 7 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Subscriber; });
-/* unused harmony export SafeSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isFunction__ = __webpack_require__(154);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Observer__ = __webpack_require__(420);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__internal_symbol_rxSubscriber__ = __webpack_require__(321);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__config__ = __webpack_require__(185);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__util_hostReportError__ = __webpack_require__(323);
-/** PURE_IMPORTS_START tslib,_util_isFunction,_Observer,_Subscription,_internal_symbol_rxSubscriber,_config,_util_hostReportError PURE_IMPORTS_END */
-
-
-
-
-
-
-
-var Subscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](Subscriber, _super);
-    function Subscriber(destinationOrNext, error, complete) {
-        var _this = _super.call(this) || this;
-        _this.syncErrorValue = null;
-        _this.syncErrorThrown = false;
-        _this.syncErrorThrowable = false;
-        _this.isStopped = false;
-        _this._parentSubscription = null;
-        switch (arguments.length) {
-            case 0:
-                _this.destination = __WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */];
-                break;
-            case 1:
-                if (!destinationOrNext) {
-                    _this.destination = __WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */];
-                    break;
-                }
-                if (typeof destinationOrNext === 'object') {
-                    if (destinationOrNext instanceof Subscriber) {
-                        _this.syncErrorThrowable = destinationOrNext.syncErrorThrowable;
-                        _this.destination = destinationOrNext;
-                        destinationOrNext.add(_this);
-                    }
-                    else {
-                        _this.syncErrorThrowable = true;
-                        _this.destination = new SafeSubscriber(_this, destinationOrNext);
-                    }
-                    break;
-                }
-            default:
-                _this.syncErrorThrowable = true;
-                _this.destination = new SafeSubscriber(_this, destinationOrNext, error, complete);
-                break;
-        }
-        return _this;
-    }
-    Subscriber.prototype[__WEBPACK_IMPORTED_MODULE_4__internal_symbol_rxSubscriber__["a" /* rxSubscriber */]] = function () { return this; };
-    Subscriber.create = function (next, error, complete) {
-        var subscriber = new Subscriber(next, error, complete);
-        subscriber.syncErrorThrowable = false;
-        return subscriber;
-    };
-    Subscriber.prototype.next = function (value) {
-        if (!this.isStopped) {
-            this._next(value);
-        }
-    };
-    Subscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            this.isStopped = true;
-            this._error(err);
-        }
-    };
-    Subscriber.prototype.complete = function () {
-        if (!this.isStopped) {
-            this.isStopped = true;
-            this._complete();
-        }
-    };
-    Subscriber.prototype.unsubscribe = function () {
-        if (this.closed) {
-            return;
-        }
-        this.isStopped = true;
-        _super.prototype.unsubscribe.call(this);
-    };
-    Subscriber.prototype._next = function (value) {
-        this.destination.next(value);
-    };
-    Subscriber.prototype._error = function (err) {
-        this.destination.error(err);
-        this.unsubscribe();
-    };
-    Subscriber.prototype._complete = function () {
-        this.destination.complete();
-        this.unsubscribe();
-    };
-    Subscriber.prototype._unsubscribeAndRecycle = function () {
-        var _a = this, _parent = _a._parent, _parents = _a._parents;
-        this._parent = null;
-        this._parents = null;
-        this.unsubscribe();
-        this.closed = false;
-        this.isStopped = false;
-        this._parent = _parent;
-        this._parents = _parents;
-        this._parentSubscription = null;
-        return this;
-    };
-    return Subscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */]));
-
-var SafeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SafeSubscriber, _super);
-    function SafeSubscriber(_parentSubscriber, observerOrNext, error, complete) {
-        var _this = _super.call(this) || this;
-        _this._parentSubscriber = _parentSubscriber;
-        var next;
-        var context = _this;
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isFunction__["a" /* isFunction */])(observerOrNext)) {
-            next = observerOrNext;
-        }
-        else if (observerOrNext) {
-            next = observerOrNext.next;
-            error = observerOrNext.error;
-            complete = observerOrNext.complete;
-            if (observerOrNext !== __WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */]) {
-                context = Object.create(observerOrNext);
-                if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isFunction__["a" /* isFunction */])(context.unsubscribe)) {
-                    _this.add(context.unsubscribe.bind(context));
-                }
-                context.unsubscribe = _this.unsubscribe.bind(_this);
-            }
-        }
-        _this._context = context;
-        _this._next = next;
-        _this._error = error;
-        _this._complete = complete;
-        return _this;
-    }
-    SafeSubscriber.prototype.next = function (value) {
-        if (!this.isStopped && this._next) {
-            var _parentSubscriber = this._parentSubscriber;
-            if (!__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                this.__tryOrUnsub(this._next, value);
-            }
-            else if (this.__tryOrSetError(_parentSubscriber, this._next, value)) {
-                this.unsubscribe();
-            }
-        }
-    };
-    SafeSubscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            var _parentSubscriber = this._parentSubscriber;
-            var useDeprecatedSynchronousErrorHandling = __WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling;
-            if (this._error) {
-                if (!useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                    this.__tryOrUnsub(this._error, err);
-                    this.unsubscribe();
-                }
-                else {
-                    this.__tryOrSetError(_parentSubscriber, this._error, err);
-                    this.unsubscribe();
-                }
-            }
-            else if (!_parentSubscriber.syncErrorThrowable) {
-                this.unsubscribe();
-                if (useDeprecatedSynchronousErrorHandling) {
-                    throw err;
-                }
-                __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err);
-            }
-            else {
-                if (useDeprecatedSynchronousErrorHandling) {
-                    _parentSubscriber.syncErrorValue = err;
-                    _parentSubscriber.syncErrorThrown = true;
-                }
-                else {
-                    __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err);
-                }
-                this.unsubscribe();
-            }
-        }
-    };
-    SafeSubscriber.prototype.complete = function () {
-        var _this = this;
-        if (!this.isStopped) {
-            var _parentSubscriber = this._parentSubscriber;
-            if (this._complete) {
-                var wrappedComplete = function () { return _this._complete.call(_this._context); };
-                if (!__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling || !_parentSubscriber.syncErrorThrowable) {
-                    this.__tryOrUnsub(wrappedComplete);
-                    this.unsubscribe();
-                }
-                else {
-                    this.__tryOrSetError(_parentSubscriber, wrappedComplete);
-                    this.unsubscribe();
-                }
-            }
-            else {
-                this.unsubscribe();
-            }
-        }
-    };
-    SafeSubscriber.prototype.__tryOrUnsub = function (fn, value) {
-        try {
-            fn.call(this._context, value);
-        }
-        catch (err) {
-            this.unsubscribe();
-            if (__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) {
-                throw err;
-            }
-            else {
-                __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err);
-            }
-        }
-    };
-    SafeSubscriber.prototype.__tryOrSetError = function (parent, fn, value) {
-        if (!__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) {
-            throw new Error('bad call');
-        }
-        try {
-            fn.call(this._context, value);
-        }
-        catch (err) {
-            if (__WEBPACK_IMPORTED_MODULE_5__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) {
-                parent.syncErrorValue = err;
-                parent.syncErrorThrown = true;
-                return true;
-            }
-            else {
-                __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_hostReportError__["a" /* hostReportError */])(err);
-                return true;
-            }
-        }
-        return false;
-    };
-    SafeSubscriber.prototype._unsubscribe = function () {
-        var _parentSubscriber = this._parentSubscriber;
-        this._context = null;
-        this._parentSubscriber = null;
-        _parentSubscriber.unsubscribe();
-    };
-    return SafeSubscriber;
-}(Subscriber));
-
-//# sourceMappingURL=Subscriber.js.map
-
-
-/***/ }),
-/* 8 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPathKey = getPathKey;
-const os = __webpack_require__(46);
-const path = __webpack_require__(0);
-const userHome = __webpack_require__(67).default;
-
-var _require = __webpack_require__(225);
-
-const getCacheDir = _require.getCacheDir,
-      getConfigDir = _require.getConfigDir,
-      getDataDir = _require.getDataDir;
-
-const isWebpackBundle = __webpack_require__(278);
-
-const DEPENDENCY_TYPES = exports.DEPENDENCY_TYPES = ['devDependencies', 'dependencies', 'optionalDependencies', 'peerDependencies'];
-const OWNED_DEPENDENCY_TYPES = exports.OWNED_DEPENDENCY_TYPES = ['devDependencies', 'dependencies', 'optionalDependencies'];
-
-const RESOLUTIONS = exports.RESOLUTIONS = 'resolutions';
-const MANIFEST_FIELDS = exports.MANIFEST_FIELDS = [RESOLUTIONS, ...DEPENDENCY_TYPES];
-
-const SUPPORTED_NODE_VERSIONS = exports.SUPPORTED_NODE_VERSIONS = '^4.8.0 || ^5.7.0 || ^6.2.2 || >=8.0.0';
-
-const YARN_REGISTRY = exports.YARN_REGISTRY = 'https://registry.yarnpkg.com';
-const NPM_REGISTRY_RE = exports.NPM_REGISTRY_RE = /https?:\/\/registry\.npmjs\.org/g;
-
-const YARN_DOCS = exports.YARN_DOCS = 'https://yarnpkg.com/en/docs/cli/';
-const YARN_INSTALLER_SH = exports.YARN_INSTALLER_SH = 'https://yarnpkg.com/install.sh';
-const YARN_INSTALLER_MSI = exports.YARN_INSTALLER_MSI = 'https://yarnpkg.com/latest.msi';
-
-const SELF_UPDATE_VERSION_URL = exports.SELF_UPDATE_VERSION_URL = 'https://yarnpkg.com/latest-version';
-
-// cache version, bump whenever we make backwards incompatible changes
-const CACHE_VERSION = exports.CACHE_VERSION = 6;
-
-// lockfile version, bump whenever we make backwards incompatible changes
-const LOCKFILE_VERSION = exports.LOCKFILE_VERSION = 1;
-
-// max amount of network requests to perform concurrently
-const NETWORK_CONCURRENCY = exports.NETWORK_CONCURRENCY = 8;
-
-// HTTP timeout used when downloading packages
-const NETWORK_TIMEOUT = exports.NETWORK_TIMEOUT = 30 * 1000; // in milliseconds
-
-// max amount of child processes to execute concurrently
-const CHILD_CONCURRENCY = exports.CHILD_CONCURRENCY = 5;
-
-const REQUIRED_PACKAGE_KEYS = exports.REQUIRED_PACKAGE_KEYS = ['name', 'version', '_uid'];
-
-function getPreferredCacheDirectories() {
-  const preferredCacheDirectories = [getCacheDir()];
-
-  if (process.getuid) {
-    // $FlowFixMe: process.getuid exists, dammit
-    preferredCacheDirectories.push(path.join(os.tmpdir(), `.yarn-cache-${process.getuid()}`));
-  }
-
-  preferredCacheDirectories.push(path.join(os.tmpdir(), `.yarn-cache`));
-
-  return preferredCacheDirectories;
-}
-
-const PREFERRED_MODULE_CACHE_DIRECTORIES = exports.PREFERRED_MODULE_CACHE_DIRECTORIES = getPreferredCacheDirectories();
-const CONFIG_DIRECTORY = exports.CONFIG_DIRECTORY = getConfigDir();
-const DATA_DIRECTORY = exports.DATA_DIRECTORY = getDataDir();
-const LINK_REGISTRY_DIRECTORY = exports.LINK_REGISTRY_DIRECTORY = path.join(DATA_DIRECTORY, 'link');
-const GLOBAL_MODULE_DIRECTORY = exports.GLOBAL_MODULE_DIRECTORY = path.join(DATA_DIRECTORY, 'global');
-
-const NODE_BIN_PATH = exports.NODE_BIN_PATH = process.execPath;
-const YARN_BIN_PATH = exports.YARN_BIN_PATH = getYarnBinPath();
-
-// Webpack needs to be configured with node.__dirname/__filename = false
-function getYarnBinPath() {
-  if (isWebpackBundle) {
-    return __filename;
-  } else {
-    return path.join(__dirname, '..', 'bin', 'yarn.js');
-  }
-}
-
-const NODE_MODULES_FOLDER = exports.NODE_MODULES_FOLDER = 'node_modules';
-const NODE_PACKAGE_JSON = exports.NODE_PACKAGE_JSON = 'package.json';
-
-const PNP_FILENAME = exports.PNP_FILENAME = '.pnp.js';
-
-const POSIX_GLOBAL_PREFIX = exports.POSIX_GLOBAL_PREFIX = `${process.env.DESTDIR || ''}/usr/local`;
-const FALLBACK_GLOBAL_PREFIX = exports.FALLBACK_GLOBAL_PREFIX = path.join(userHome, '.yarn');
-
-const META_FOLDER = exports.META_FOLDER = '.yarn-meta';
-const INTEGRITY_FILENAME = exports.INTEGRITY_FILENAME = '.yarn-integrity';
-const LOCKFILE_FILENAME = exports.LOCKFILE_FILENAME = 'yarn.lock';
-const METADATA_FILENAME = exports.METADATA_FILENAME = '.yarn-metadata.json';
-const TARBALL_FILENAME = exports.TARBALL_FILENAME = '.yarn-tarball.tgz';
-const CLEAN_FILENAME = exports.CLEAN_FILENAME = '.yarnclean';
-
-const NPM_LOCK_FILENAME = exports.NPM_LOCK_FILENAME = 'package-lock.json';
-const NPM_SHRINKWRAP_FILENAME = exports.NPM_SHRINKWRAP_FILENAME = 'npm-shrinkwrap.json';
-
-const DEFAULT_INDENT = exports.DEFAULT_INDENT = '  ';
-const SINGLE_INSTANCE_PORT = exports.SINGLE_INSTANCE_PORT = 31997;
-const SINGLE_INSTANCE_FILENAME = exports.SINGLE_INSTANCE_FILENAME = '.yarn-single-instance';
-
-const ENV_PATH_KEY = exports.ENV_PATH_KEY = getPathKey(process.platform, process.env);
-
-function getPathKey(platform, env) {
-  let pathKey = 'PATH';
-
-  // windows calls its path "Path" usually, but this is not guaranteed.
-  if (platform === 'win32') {
-    pathKey = 'Path';
-
-    for (const key in env) {
-      if (key.toLowerCase() === 'path') {
-        pathKey = key;
-      }
-    }
-  }
-
-  return pathKey;
-}
-
-const VERSION_COLOR_SCHEME = exports.VERSION_COLOR_SCHEME = {
-  major: 'red',
-  premajor: 'red',
-  minor: 'yellow',
-  preminor: 'yellow',
-  patch: 'green',
-  prepatch: 'green',
-  prerelease: 'red',
-  unchanged: 'white',
-  unknown: 'red'
-};
-
-/***/ }),
-/* 9 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/**
- * Copyright (c) 2013-present, Facebook, Inc.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-
-
-/**
- * Use invariant() to assert state which your program assumes to be true.
- *
- * Provide sprintf-style format (only %s is supported) and arguments
- * to provide information about what broke and what you were
- * expecting.
- *
- * The invariant message will be stripped in production, but the invariant
- * will remain to ensure logic does not differ in production.
- */
-
-var NODE_ENV = process.env.NODE_ENV;
-
-var invariant = function(condition, format, a, b, c, d, e, f) {
-  if (NODE_ENV !== 'production') {
-    if (format === undefined) {
-      throw new Error('invariant requires an error message argument');
-    }
-  }
-
-  if (!condition) {
-    var error;
-    if (format === undefined) {
-      error = new Error(
-        'Minified exception occurred; use the non-minified dev environment ' +
-        'for the full error message and additional helpful warnings.'
-      );
-    } else {
-      var args = [a, b, c, d, e, f];
-      var argIndex = 0;
-      error = new Error(
-        format.replace(/%s/g, function() { return args[argIndex++]; })
-      );
-      error.name = 'Invariant Violation';
-    }
-
-    error.framesToPop = 1; // we don't care about invariant's own frame
-    throw error;
-  }
-};
-
-module.exports = invariant;
-
-
-/***/ }),
-/* 10 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var YAMLException = __webpack_require__(54);
-
-var TYPE_CONSTRUCTOR_OPTIONS = [
-  'kind',
-  'resolve',
-  'construct',
-  'instanceOf',
-  'predicate',
-  'represent',
-  'defaultStyle',
-  'styleAliases'
-];
-
-var YAML_NODE_KINDS = [
-  'scalar',
-  'sequence',
-  'mapping'
-];
-
-function compileStyleAliases(map) {
-  var result = {};
-
-  if (map !== null) {
-    Object.keys(map).forEach(function (style) {
-      map[style].forEach(function (alias) {
-        result[String(alias)] = style;
-      });
-    });
-  }
-
-  return result;
-}
-
-function Type(tag, options) {
-  options = options || {};
-
-  Object.keys(options).forEach(function (name) {
-    if (TYPE_CONSTRUCTOR_OPTIONS.indexOf(name) === -1) {
-      throw new YAMLException('Unknown option "' + name + '" is met in definition of "' + tag + '" YAML type.');
-    }
-  });
-
-  // TODO: Add tag format check.
-  this.tag          = tag;
-  this.kind         = options['kind']         || null;
-  this.resolve      = options['resolve']      || function () { return true; };
-  this.construct    = options['construct']    || function (data) { return data; };
-  this.instanceOf   = options['instanceOf']   || null;
-  this.predicate    = options['predicate']    || null;
-  this.represent    = options['represent']    || null;
-  this.defaultStyle = options['defaultStyle'] || null;
-  this.styleAliases = compileStyleAliases(options['styleAliases'] || null);
-
-  if (YAML_NODE_KINDS.indexOf(this.kind) === -1) {
-    throw new YAMLException('Unknown kind "' + this.kind + '" is specified for "' + tag + '" YAML type.');
-  }
-}
-
-module.exports = Type;
-
-
-/***/ }),
-/* 11 */
-/***/ (function(module, exports) {
-
-module.exports = require("crypto");
-
-/***/ }),
-/* 12 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Observable; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_canReportError__ = __webpack_require__(322);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_toSubscriber__ = __webpack_require__(932);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__internal_symbol_observable__ = __webpack_require__(117);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_pipe__ = __webpack_require__(324);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__config__ = __webpack_require__(185);
-/** PURE_IMPORTS_START _util_canReportError,_util_toSubscriber,_internal_symbol_observable,_util_pipe,_config PURE_IMPORTS_END */
-
-
-
-
-
-var Observable = /*@__PURE__*/ (function () {
-    function Observable(subscribe) {
-        this._isScalar = false;
-        if (subscribe) {
-            this._subscribe = subscribe;
-        }
-    }
-    Observable.prototype.lift = function (operator) {
-        var observable = new Observable();
-        observable.source = this;
-        observable.operator = operator;
-        return observable;
-    };
-    Observable.prototype.subscribe = function (observerOrNext, error, complete) {
-        var operator = this.operator;
-        var sink = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_toSubscriber__["a" /* toSubscriber */])(observerOrNext, error, complete);
-        if (operator) {
-            operator.call(sink, this.source);
-        }
-        else {
-            sink.add(this.source || (__WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].useDeprecatedSynchronousErrorHandling && !sink.syncErrorThrowable) ?
-                this._subscribe(sink) :
-                this._trySubscribe(sink));
-        }
-        if (__WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) {
-            if (sink.syncErrorThrowable) {
-                sink.syncErrorThrowable = false;
-                if (sink.syncErrorThrown) {
-                    throw sink.syncErrorValue;
-                }
-            }
-        }
-        return sink;
-    };
-    Observable.prototype._trySubscribe = function (sink) {
-        try {
-            return this._subscribe(sink);
-        }
-        catch (err) {
-            if (__WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) {
-                sink.syncErrorThrown = true;
-                sink.syncErrorValue = err;
-            }
-            if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_canReportError__["a" /* canReportError */])(sink)) {
-                sink.error(err);
-            }
-            else {
-                console.warn(err);
-            }
-        }
-    };
-    Observable.prototype.forEach = function (next, promiseCtor) {
-        var _this = this;
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor(function (resolve, reject) {
-            var subscription;
-            subscription = _this.subscribe(function (value) {
-                try {
-                    next(value);
-                }
-                catch (err) {
-                    reject(err);
-                    if (subscription) {
-                        subscription.unsubscribe();
-                    }
-                }
-            }, reject, resolve);
-        });
-    };
-    Observable.prototype._subscribe = function (subscriber) {
-        var source = this.source;
-        return source && source.subscribe(subscriber);
-    };
-    Observable.prototype[__WEBPACK_IMPORTED_MODULE_2__internal_symbol_observable__["a" /* observable */]] = function () {
-        return this;
-    };
-    Observable.prototype.pipe = function () {
-        var operations = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            operations[_i] = arguments[_i];
-        }
-        if (operations.length === 0) {
-            return this;
-        }
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_pipe__["b" /* pipeFromArray */])(operations)(this);
-    };
-    Observable.prototype.toPromise = function (promiseCtor) {
-        var _this = this;
-        promiseCtor = getPromiseCtor(promiseCtor);
-        return new promiseCtor(function (resolve, reject) {
-            var value;
-            _this.subscribe(function (x) { return value = x; }, function (err) { return reject(err); }, function () { return resolve(value); });
-        });
-    };
-    Observable.create = function (subscribe) {
-        return new Observable(subscribe);
-    };
-    return Observable;
-}());
-
-function getPromiseCtor(promiseCtor) {
-    if (!promiseCtor) {
-        promiseCtor = __WEBPACK_IMPORTED_MODULE_4__config__["a" /* config */].Promise || Promise;
-    }
-    if (!promiseCtor) {
-        throw new Error('no Promise impl found');
-    }
-    return promiseCtor;
-}
-//# sourceMappingURL=Observable.js.map
-
-
-/***/ }),
-/* 13 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return OuterSubscriber; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-var OuterSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](OuterSubscriber, _super);
-    function OuterSubscriber() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    OuterSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.destination.next(innerValue);
-    };
-    OuterSubscriber.prototype.notifyError = function (error, innerSub) {
-        this.destination.error(error);
-    };
-    OuterSubscriber.prototype.notifyComplete = function (innerSub) {
-        this.destination.complete();
-    };
-    return OuterSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-
-//# sourceMappingURL=OuterSubscriber.js.map
-
-
-/***/ }),
-/* 14 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = subscribeToResult;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__subscribeTo__ = __webpack_require__(446);
-/** PURE_IMPORTS_START _InnerSubscriber,_subscribeTo PURE_IMPORTS_END */
-
-
-function subscribeToResult(outerSubscriber, result, outerValue, outerIndex, destination) {
-    if (destination === void 0) {
-        destination = new __WEBPACK_IMPORTED_MODULE_0__InnerSubscriber__["a" /* InnerSubscriber */](outerSubscriber, outerValue, outerIndex);
-    }
-    if (destination.closed) {
-        return;
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__subscribeTo__["a" /* subscribeTo */])(result)(destination);
-}
-//# sourceMappingURL=subscribeToResult.js.map
-
-
-/***/ }),
-/* 15 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* eslint-disable node/no-deprecated-api */
-
-
-
-var buffer = __webpack_require__(64)
-var Buffer = buffer.Buffer
-
-var safer = {}
-
-var key
-
-for (key in buffer) {
-  if (!buffer.hasOwnProperty(key)) continue
-  if (key === 'SlowBuffer' || key === 'Buffer') continue
-  safer[key] = buffer[key]
-}
-
-var Safer = safer.Buffer = {}
-for (key in Buffer) {
-  if (!Buffer.hasOwnProperty(key)) continue
-  if (key === 'allocUnsafe' || key === 'allocUnsafeSlow') continue
-  Safer[key] = Buffer[key]
-}
-
-safer.Buffer.prototype = Buffer.prototype
-
-if (!Safer.from || Safer.from === Uint8Array.from) {
-  Safer.from = function (value, encodingOrOffset, length) {
-    if (typeof value === 'number') {
-      throw new TypeError('The "value" argument must not be of type number. Received type ' + typeof value)
-    }
-    if (value && typeof value.length === 'undefined') {
-      throw new TypeError('The first argument must be one of type string, Buffer, ArrayBuffer, Array, or Array-like Object. Received type ' + typeof value)
-    }
-    return Buffer(value, encodingOrOffset, length)
-  }
-}
-
-if (!Safer.alloc) {
-  Safer.alloc = function (size, fill, encoding) {
-    if (typeof size !== 'number') {
-      throw new TypeError('The "size" argument must be of type number. Received type ' + typeof size)
-    }
-    if (size < 0 || size >= 2 * (1 << 30)) {
-      throw new RangeError('The value "' + size + '" is invalid for option "size"')
-    }
-    var buf = Buffer(size)
-    if (!fill || fill.length === 0) {
-      buf.fill(0)
-    } else if (typeof encoding === 'string') {
-      buf.fill(fill, encoding)
-    } else {
-      buf.fill(fill)
-    }
-    return buf
-  }
-}
-
-if (!safer.kStringMaxLength) {
-  try {
-    safer.kStringMaxLength = process.binding('buffer').kStringMaxLength
-  } catch (e) {
-    // we can't determine kStringMaxLength in environments where process.binding
-    // is unsupported, so let's not set it
-  }
-}
-
-if (!safer.constants) {
-  safer.constants = {
-    MAX_LENGTH: safer.kMaxLength
-  }
-  if (safer.kStringMaxLength) {
-    safer.constants.MAX_STRING_LENGTH = safer.kStringMaxLength
-  }
-}
-
-module.exports = safer
-
-
-/***/ }),
-/* 16 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright (c) 2012, Mark Cavage. All rights reserved.
-// Copyright 2015 Joyent, Inc.
-
-var assert = __webpack_require__(28);
-var Stream = __webpack_require__(23).Stream;
-var util = __webpack_require__(3);
-
-
-///--- Globals
-
-/* JSSTYLED */
-var UUID_REGEXP = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
-
-
-///--- Internal
-
-function _capitalize(str) {
-    return (str.charAt(0).toUpperCase() + str.slice(1));
-}
-
-function _toss(name, expected, oper, arg, actual) {
-    throw new assert.AssertionError({
-        message: util.format('%s (%s) is required', name, expected),
-        actual: (actual === undefined) ? typeof (arg) : actual(arg),
-        expected: expected,
-        operator: oper || '===',
-        stackStartFunction: _toss.caller
-    });
-}
-
-function _getClass(arg) {
-    return (Object.prototype.toString.call(arg).slice(8, -1));
-}
-
-function noop() {
-    // Why even bother with asserts?
-}
-
-
-///--- Exports
-
-var types = {
-    bool: {
-        check: function (arg) { return typeof (arg) === 'boolean'; }
-    },
-    func: {
-        check: function (arg) { return typeof (arg) === 'function'; }
-    },
-    string: {
-        check: function (arg) { return typeof (arg) === 'string'; }
-    },
-    object: {
-        check: function (arg) {
-            return typeof (arg) === 'object' && arg !== null;
-        }
-    },
-    number: {
-        check: function (arg) {
-            return typeof (arg) === 'number' && !isNaN(arg);
-        }
-    },
-    finite: {
-        check: function (arg) {
-            return typeof (arg) === 'number' && !isNaN(arg) && isFinite(arg);
-        }
-    },
-    buffer: {
-        check: function (arg) { return Buffer.isBuffer(arg); },
-        operator: 'Buffer.isBuffer'
-    },
-    array: {
-        check: function (arg) { return Array.isArray(arg); },
-        operator: 'Array.isArray'
-    },
-    stream: {
-        check: function (arg) { return arg instanceof Stream; },
-        operator: 'instanceof',
-        actual: _getClass
-    },
-    date: {
-        check: function (arg) { return arg instanceof Date; },
-        operator: 'instanceof',
-        actual: _getClass
-    },
-    regexp: {
-        check: function (arg) { return arg instanceof RegExp; },
-        operator: 'instanceof',
-        actual: _getClass
-    },
-    uuid: {
-        check: function (arg) {
-            return typeof (arg) === 'string' && UUID_REGEXP.test(arg);
-        },
-        operator: 'isUUID'
-    }
-};
-
-function _setExports(ndebug) {
-    var keys = Object.keys(types);
-    var out;
-
-    /* re-export standard assert */
-    if (process.env.NODE_NDEBUG) {
-        out = noop;
-    } else {
-        out = function (arg, msg) {
-            if (!arg) {
-                _toss(msg, 'true', arg);
-            }
-        };
-    }
-
-    /* standard checks */
-    keys.forEach(function (k) {
-        if (ndebug) {
-            out[k] = noop;
-            return;
-        }
-        var type = types[k];
-        out[k] = function (arg, msg) {
-            if (!type.check(arg)) {
-                _toss(msg, k, type.operator, arg, type.actual);
-            }
-        };
-    });
-
-    /* optional checks */
-    keys.forEach(function (k) {
-        var name = 'optional' + _capitalize(k);
-        if (ndebug) {
-            out[name] = noop;
-            return;
-        }
-        var type = types[k];
-        out[name] = function (arg, msg) {
-            if (arg === undefined || arg === null) {
-                return;
-            }
-            if (!type.check(arg)) {
-                _toss(msg, k, type.operator, arg, type.actual);
-            }
-        };
-    });
-
-    /* arrayOf checks */
-    keys.forEach(function (k) {
-        var name = 'arrayOf' + _capitalize(k);
-        if (ndebug) {
-            out[name] = noop;
-            return;
-        }
-        var type = types[k];
-        var expected = '[' + k + ']';
-        out[name] = function (arg, msg) {
-            if (!Array.isArray(arg)) {
-                _toss(msg, expected, type.operator, arg, type.actual);
-            }
-            var i;
-            for (i = 0; i < arg.length; i++) {
-                if (!type.check(arg[i])) {
-                    _toss(msg, expected, type.operator, arg, type.actual);
-                }
-            }
-        };
-    });
-
-    /* optionalArrayOf checks */
-    keys.forEach(function (k) {
-        var name = 'optionalArrayOf' + _capitalize(k);
-        if (ndebug) {
-            out[name] = noop;
-            return;
-        }
-        var type = types[k];
-        var expected = '[' + k + ']';
-        out[name] = function (arg, msg) {
-            if (arg === undefined || arg === null) {
-                return;
-            }
-            if (!Array.isArray(arg)) {
-                _toss(msg, expected, type.operator, arg, type.actual);
-            }
-            var i;
-            for (i = 0; i < arg.length; i++) {
-                if (!type.check(arg[i])) {
-                    _toss(msg, expected, type.operator, arg, type.actual);
-                }
-            }
-        };
-    });
-
-    /* re-export built-in assertions */
-    Object.keys(assert).forEach(function (k) {
-        if (k === 'AssertionError') {
-            out[k] = assert[k];
-            return;
-        }
-        if (ndebug) {
-            out[k] = noop;
-            return;
-        }
-        out[k] = assert[k];
-    });
-
-    /* export ourselves (for unit tests _only_) */
-    out._setExports = _setExports;
-
-    return out;
-}
-
-module.exports = _setExports(process.env.NODE_NDEBUG);
-
-
-/***/ }),
-/* 17 */
-/***/ (function(module, exports) {
-
-// https://github.com/zloirock/core-js/issues/86#issuecomment-115759028
-var global = module.exports = typeof window != 'undefined' && window.Math == Math
-  ? window : typeof self != 'undefined' && self.Math == Math ? self
-  // eslint-disable-next-line no-new-func
-  : Function('return this')();
-if (typeof __g == 'number') __g = global; // eslint-disable-line no-undef
-
-
-/***/ }),
-/* 18 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sortAlpha = sortAlpha;
-exports.sortOptionsByFlags = sortOptionsByFlags;
-exports.entries = entries;
-exports.removePrefix = removePrefix;
-exports.removeSuffix = removeSuffix;
-exports.addSuffix = addSuffix;
-exports.hyphenate = hyphenate;
-exports.camelCase = camelCase;
-exports.compareSortedArrays = compareSortedArrays;
-exports.sleep = sleep;
-const _camelCase = __webpack_require__(230);
-
-function sortAlpha(a, b) {
-  // sort alphabetically in a deterministic way
-  const shortLen = Math.min(a.length, b.length);
-  for (let i = 0; i < shortLen; i++) {
-    const aChar = a.charCodeAt(i);
-    const bChar = b.charCodeAt(i);
-    if (aChar !== bChar) {
-      return aChar - bChar;
-    }
-  }
-  return a.length - b.length;
-}
-
-function sortOptionsByFlags(a, b) {
-  const aOpt = a.flags.replace(/-/g, '');
-  const bOpt = b.flags.replace(/-/g, '');
-  return sortAlpha(aOpt, bOpt);
-}
-
-function entries(obj) {
-  const entries = [];
-  if (obj) {
-    for (const key in obj) {
-      entries.push([key, obj[key]]);
-    }
-  }
-  return entries;
-}
-
-function removePrefix(pattern, prefix) {
-  if (pattern.startsWith(prefix)) {
-    pattern = pattern.slice(prefix.length);
-  }
-
-  return pattern;
-}
-
-function removeSuffix(pattern, suffix) {
-  if (pattern.endsWith(suffix)) {
-    return pattern.slice(0, -suffix.length);
-  }
-
-  return pattern;
-}
-
-function addSuffix(pattern, suffix) {
-  if (!pattern.endsWith(suffix)) {
-    return pattern + suffix;
-  }
-
-  return pattern;
-}
-
-function hyphenate(str) {
-  return str.replace(/[A-Z]/g, match => {
-    return '-' + match.charAt(0).toLowerCase();
-  });
-}
-
-function camelCase(str) {
-  if (/[A-Z]/.test(str)) {
-    return null;
-  } else {
-    return _camelCase(str);
-  }
-}
-
-function compareSortedArrays(array1, array2) {
-  if (array1.length !== array2.length) {
-    return false;
-  }
-  for (let i = 0, len = array1.length; i < len; i++) {
-    if (array1[i] !== array2[i]) {
-      return false;
-    }
-  }
-  return true;
-}
-
-function sleep(ms) {
-  return new Promise(resolve => {
-    setTimeout(resolve, ms);
-  });
-}
-
-/***/ }),
-/* 19 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.stringify = exports.parse = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _parse;
-
-function _load_parse() {
-  return _parse = __webpack_require__(105);
-}
-
-Object.defineProperty(exports, 'parse', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_parse || _load_parse()).default;
-  }
-});
-
-var _stringify;
-
-function _load_stringify() {
-  return _stringify = __webpack_require__(199);
-}
-
-Object.defineProperty(exports, 'stringify', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_stringify || _load_stringify()).default;
-  }
-});
-exports.implodeEntry = implodeEntry;
-exports.explodeEntry = explodeEntry;
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _normalizePattern;
-
-function _load_normalizePattern() {
-  return _normalizePattern = __webpack_require__(37);
-}
-
-var _parse2;
-
-function _load_parse2() {
-  return _parse2 = _interopRequireDefault(__webpack_require__(105));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const path = __webpack_require__(0);
-const ssri = __webpack_require__(65);
-
-function getName(pattern) {
-  return (0, (_normalizePattern || _load_normalizePattern()).normalizePattern)(pattern).name;
-}
-
-function blankObjectUndefined(obj) {
-  return obj && Object.keys(obj).length ? obj : undefined;
-}
-
-function keyForRemote(remote) {
-  return remote.resolved || (remote.reference && remote.hash ? `${remote.reference}#${remote.hash}` : null);
-}
-
-function serializeIntegrity(integrity) {
-  // We need this because `Integrity.toString()` does not use sorting to ensure a stable string output
-  // See https://git.io/vx2Hy
-  return integrity.toString().split(' ').sort().join(' ');
-}
-
-function implodeEntry(pattern, obj) {
-  const inferredName = getName(pattern);
-  const integrity = obj.integrity ? serializeIntegrity(obj.integrity) : '';
-  const imploded = {
-    name: inferredName === obj.name ? undefined : obj.name,
-    version: obj.version,
-    uid: obj.uid === obj.version ? undefined : obj.uid,
-    resolved: obj.resolved,
-    registry: obj.registry === 'npm' ? undefined : obj.registry,
-    dependencies: blankObjectUndefined(obj.dependencies),
-    optionalDependencies: blankObjectUndefined(obj.optionalDependencies),
-    permissions: blankObjectUndefined(obj.permissions),
-    prebuiltVariants: blankObjectUndefined(obj.prebuiltVariants)
-  };
-  if (integrity) {
-    imploded.integrity = integrity;
-  }
-  return imploded;
-}
-
-function explodeEntry(pattern, obj) {
-  obj.optionalDependencies = obj.optionalDependencies || {};
-  obj.dependencies = obj.dependencies || {};
-  obj.uid = obj.uid || obj.version;
-  obj.permissions = obj.permissions || {};
-  obj.registry = obj.registry || 'npm';
-  obj.name = obj.name || getName(pattern);
-  const integrity = obj.integrity;
-  if (integrity && integrity.isIntegrity) {
-    obj.integrity = ssri.parse(integrity);
-  }
-  return obj;
-}
-
-class Lockfile {
-  constructor({ cache, source, parseResultType } = {}) {
-    this.source = source || '';
-    this.cache = cache;
-    this.parseResultType = parseResultType;
-  }
-
-  // source string if the `cache` was parsed
-
-
-  // if true, we're parsing an old yarn file and need to update integrity fields
-  hasEntriesExistWithoutIntegrity() {
-    if (!this.cache) {
-      return false;
-    }
-
-    for (const key in this.cache) {
-      // $FlowFixMe - `this.cache` is clearly defined at this point
-      if (!/^.*@(file:|http)/.test(key) && this.cache[key] && !this.cache[key].integrity) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  static fromDirectory(dir, reporter) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // read the manifest in this directory
-      const lockfileLoc = path.join(dir, (_constants || _load_constants()).LOCKFILE_FILENAME);
-
-      let lockfile;
-      let rawLockfile = '';
-      let parseResult;
-
-      if (yield (_fs || _load_fs()).exists(lockfileLoc)) {
-        rawLockfile = yield (_fs || _load_fs()).readFile(lockfileLoc);
-        parseResult = (0, (_parse2 || _load_parse2()).default)(rawLockfile, lockfileLoc);
-
-        if (reporter) {
-          if (parseResult.type === 'merge') {
-            reporter.info(reporter.lang('lockfileMerged'));
-          } else if (parseResult.type === 'conflict') {
-            reporter.warn(reporter.lang('lockfileConflict'));
-          }
-        }
-
-        lockfile = parseResult.object;
-      } else if (reporter) {
-        reporter.info(reporter.lang('noLockfileFound'));
-      }
-
-      if (lockfile && lockfile.__metadata) {
-        const lockfilev2 = lockfile;
-        lockfile = {};
-      }
-
-      return new Lockfile({ cache: lockfile, source: rawLockfile, parseResultType: parseResult && parseResult.type });
-    })();
-  }
-
-  getLocked(pattern) {
-    const cache = this.cache;
-    if (!cache) {
-      return undefined;
-    }
-
-    const shrunk = pattern in cache && cache[pattern];
-
-    if (typeof shrunk === 'string') {
-      return this.getLocked(shrunk);
-    } else if (shrunk) {
-      explodeEntry(pattern, shrunk);
-      return shrunk;
-    }
-
-    return undefined;
-  }
-
-  removePattern(pattern) {
-    const cache = this.cache;
-    if (!cache) {
-      return;
-    }
-    delete cache[pattern];
-  }
-
-  getLockfile(patterns) {
-    const lockfile = {};
-    const seen = new Map();
-
-    // order by name so that lockfile manifest is assigned to the first dependency with this manifest
-    // the others that have the same remoteKey will just refer to the first
-    // ordering allows for consistency in lockfile when it is serialized
-    const sortedPatternsKeys = Object.keys(patterns).sort((_misc || _load_misc()).sortAlpha);
-
-    for (var _iterator = sortedPatternsKeys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const pattern = _ref;
-
-      const pkg = patterns[pattern];
-      const remote = pkg._remote,
-            ref = pkg._reference;
-
-      invariant(ref, 'Package is missing a reference');
-      invariant(remote, 'Package is missing a remote');
-
-      const remoteKey = keyForRemote(remote);
-      const seenPattern = remoteKey && seen.get(remoteKey);
-      if (seenPattern) {
-        // no point in duplicating it
-        lockfile[pattern] = seenPattern;
-
-        // if we're relying on our name being inferred and two of the patterns have
-        // different inferred names then we need to set it
-        if (!seenPattern.name && getName(pattern) !== pkg.name) {
-          seenPattern.name = pkg.name;
-        }
-        continue;
-      }
-      const obj = implodeEntry(pattern, {
-        name: pkg.name,
-        version: pkg.version,
-        uid: pkg._uid,
-        resolved: remote.resolved,
-        integrity: remote.integrity,
-        registry: remote.registry,
-        dependencies: pkg.dependencies,
-        peerDependencies: pkg.peerDependencies,
-        optionalDependencies: pkg.optionalDependencies,
-        permissions: ref.permissions,
-        prebuiltVariants: pkg.prebuiltVariants
-      });
-
-      lockfile[pattern] = obj;
-
-      if (remoteKey) {
-        seen.set(remoteKey, obj);
-      }
-    }
-
-    return lockfile;
-  }
-}
-exports.default = Lockfile;
-
-/***/ }),
-/* 20 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var store = __webpack_require__(133)('wks');
-var uid = __webpack_require__(137);
-var Symbol = __webpack_require__(17).Symbol;
-var USE_SYMBOL = typeof Symbol == 'function';
-
-var $exports = module.exports = function (name) {
-  return store[name] || (store[name] =
-    USE_SYMBOL && Symbol[name] || (USE_SYMBOL ? Symbol : uid)('Symbol.' + name));
-};
-
-$exports.store = store;
-
-
-/***/ }),
-/* 21 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-exports.__esModule = true;
-
-var _assign = __webpack_require__(591);
-
-var _assign2 = _interopRequireDefault(_assign);
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.default = _assign2.default || function (target) {
-  for (var i = 1; i < arguments.length; i++) {
-    var source = arguments[i];
-
-    for (var key in source) {
-      if (Object.prototype.hasOwnProperty.call(source, key)) {
-        target[key] = source[key];
-      }
-    }
-  }
-
-  return target;
-};
-
-/***/ }),
-/* 22 */
-/***/ (function(module, exports) {
-
-exports = module.exports = SemVer;
-
-// The debug function is excluded entirely from the minified version.
-/* nomin */ var debug;
-/* nomin */ if (typeof process === 'object' &&
-    /* nomin */ process.env &&
-    /* nomin */ process.env.NODE_DEBUG &&
-    /* nomin */ /\bsemver\b/i.test(process.env.NODE_DEBUG))
-  /* nomin */ debug = function() {
-    /* nomin */ var args = Array.prototype.slice.call(arguments, 0);
-    /* nomin */ args.unshift('SEMVER');
-    /* nomin */ console.log.apply(console, args);
-    /* nomin */ };
-/* nomin */ else
-  /* nomin */ debug = function() {};
-
-// Note: this is the semver.org version of the spec that it implements
-// Not necessarily the package version of this code.
-exports.SEMVER_SPEC_VERSION = '2.0.0';
-
-var MAX_LENGTH = 256;
-var MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;
-
-// Max safe segment length for coercion.
-var MAX_SAFE_COMPONENT_LENGTH = 16;
-
-// The actual regexps go on exports.re
-var re = exports.re = [];
-var src = exports.src = [];
-var R = 0;
-
-// The following Regular Expressions can be used for tokenizing,
-// validating, and parsing SemVer version strings.
-
-// ## Numeric Identifier
-// A single `0`, or a non-zero digit followed by zero or more digits.
-
-var NUMERICIDENTIFIER = R++;
-src[NUMERICIDENTIFIER] = '0|[1-9]\\d*';
-var NUMERICIDENTIFIERLOOSE = R++;
-src[NUMERICIDENTIFIERLOOSE] = '[0-9]+';
-
-
-// ## Non-numeric Identifier
-// Zero or more digits, followed by a letter or hyphen, and then zero or
-// more letters, digits, or hyphens.
-
-var NONNUMERICIDENTIFIER = R++;
-src[NONNUMERICIDENTIFIER] = '\\d*[a-zA-Z-][a-zA-Z0-9-]*';
-
-
-// ## Main Version
-// Three dot-separated numeric identifiers.
-
-var MAINVERSION = R++;
-src[MAINVERSION] = '(' + src[NUMERICIDENTIFIER] + ')\\.' +
-                   '(' + src[NUMERICIDENTIFIER] + ')\\.' +
-                   '(' + src[NUMERICIDENTIFIER] + ')';
-
-var MAINVERSIONLOOSE = R++;
-src[MAINVERSIONLOOSE] = '(' + src[NUMERICIDENTIFIERLOOSE] + ')\\.' +
-                        '(' + src[NUMERICIDENTIFIERLOOSE] + ')\\.' +
-                        '(' + src[NUMERICIDENTIFIERLOOSE] + ')';
-
-// ## Pre-release Version Identifier
-// A numeric identifier, or a non-numeric identifier.
-
-var PRERELEASEIDENTIFIER = R++;
-src[PRERELEASEIDENTIFIER] = '(?:' + src[NUMERICIDENTIFIER] +
-                            '|' + src[NONNUMERICIDENTIFIER] + ')';
-
-var PRERELEASEIDENTIFIERLOOSE = R++;
-src[PRERELEASEIDENTIFIERLOOSE] = '(?:' + src[NUMERICIDENTIFIERLOOSE] +
-                                 '|' + src[NONNUMERICIDENTIFIER] + ')';
-
-
-// ## Pre-release Version
-// Hyphen, followed by one or more dot-separated pre-release version
-// identifiers.
-
-var PRERELEASE = R++;
-src[PRERELEASE] = '(?:-(' + src[PRERELEASEIDENTIFIER] +
-                  '(?:\\.' + src[PRERELEASEIDENTIFIER] + ')*))';
-
-var PRERELEASELOOSE = R++;
-src[PRERELEASELOOSE] = '(?:-?(' + src[PRERELEASEIDENTIFIERLOOSE] +
-                       '(?:\\.' + src[PRERELEASEIDENTIFIERLOOSE] + ')*))';
-
-// ## Build Metadata Identifier
-// Any combination of digits, letters, or hyphens.
-
-var BUILDIDENTIFIER = R++;
-src[BUILDIDENTIFIER] = '[0-9A-Za-z-]+';
-
-// ## Build Metadata
-// Plus sign, followed by one or more period-separated build metadata
-// identifiers.
-
-var BUILD = R++;
-src[BUILD] = '(?:\\+(' + src[BUILDIDENTIFIER] +
-             '(?:\\.' + src[BUILDIDENTIFIER] + ')*))';
-
-
-// ## Full Version String
-// A main version, followed optionally by a pre-release version and
-// build metadata.
-
-// Note that the only major, minor, patch, and pre-release sections of
-// the version string are capturing groups.  The build metadata is not a
-// capturing group, because it should not ever be used in version
-// comparison.
-
-var FULL = R++;
-var FULLPLAIN = 'v?' + src[MAINVERSION] +
-                src[PRERELEASE] + '?' +
-                src[BUILD] + '?';
-
-src[FULL] = '^' + FULLPLAIN + '$';
-
-// like full, but allows v1.2.3 and =1.2.3, which people do sometimes.
-// also, 1.0.0alpha1 (prerelease without the hyphen) which is pretty
-// common in the npm registry.
-var LOOSEPLAIN = '[v=\\s]*' + src[MAINVERSIONLOOSE] +
-                 src[PRERELEASELOOSE] + '?' +
-                 src[BUILD] + '?';
-
-var LOOSE = R++;
-src[LOOSE] = '^' + LOOSEPLAIN + '$';
-
-var GTLT = R++;
-src[GTLT] = '((?:<|>)?=?)';
-
-// Something like "2.*" or "1.2.x".
-// Note that "x.x" is a valid xRange identifer, meaning "any version"
-// Only the first item is strictly required.
-var XRANGEIDENTIFIERLOOSE = R++;
-src[XRANGEIDENTIFIERLOOSE] = src[NUMERICIDENTIFIERLOOSE] + '|x|X|\\*';
-var XRANGEIDENTIFIER = R++;
-src[XRANGEIDENTIFIER] = src[NUMERICIDENTIFIER] + '|x|X|\\*';
-
-var XRANGEPLAIN = R++;
-src[XRANGEPLAIN] = '[v=\\s]*(' + src[XRANGEIDENTIFIER] + ')' +
-                   '(?:\\.(' + src[XRANGEIDENTIFIER] + ')' +
-                   '(?:\\.(' + src[XRANGEIDENTIFIER] + ')' +
-                   '(?:' + src[PRERELEASE] + ')?' +
-                   src[BUILD] + '?' +
-                   ')?)?';
-
-var XRANGEPLAINLOOSE = R++;
-src[XRANGEPLAINLOOSE] = '[v=\\s]*(' + src[XRANGEIDENTIFIERLOOSE] + ')' +
-                        '(?:\\.(' + src[XRANGEIDENTIFIERLOOSE] + ')' +
-                        '(?:\\.(' + src[XRANGEIDENTIFIERLOOSE] + ')' +
-                        '(?:' + src[PRERELEASELOOSE] + ')?' +
-                        src[BUILD] + '?' +
-                        ')?)?';
-
-var XRANGE = R++;
-src[XRANGE] = '^' + src[GTLT] + '\\s*' + src[XRANGEPLAIN] + '$';
-var XRANGELOOSE = R++;
-src[XRANGELOOSE] = '^' + src[GTLT] + '\\s*' + src[XRANGEPLAINLOOSE] + '$';
-
-// Coercion.
-// Extract anything that could conceivably be a part of a valid semver
-var COERCE = R++;
-src[COERCE] = '(?:^|[^\\d])' +
-              '(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '})' +
-              '(?:\\.(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '}))?' +
-              '(?:\\.(\\d{1,' + MAX_SAFE_COMPONENT_LENGTH + '}))?' +
-              '(?:$|[^\\d])';
-
-// Tilde ranges.
-// Meaning is "reasonably at or greater than"
-var LONETILDE = R++;
-src[LONETILDE] = '(?:~>?)';
-
-var TILDETRIM = R++;
-src[TILDETRIM] = '(\\s*)' + src[LONETILDE] + '\\s+';
-re[TILDETRIM] = new RegExp(src[TILDETRIM], 'g');
-var tildeTrimReplace = '$1~';
-
-var TILDE = R++;
-src[TILDE] = '^' + src[LONETILDE] + src[XRANGEPLAIN] + '$';
-var TILDELOOSE = R++;
-src[TILDELOOSE] = '^' + src[LONETILDE] + src[XRANGEPLAINLOOSE] + '$';
-
-// Caret ranges.
-// Meaning is "at least and backwards compatible with"
-var LONECARET = R++;
-src[LONECARET] = '(?:\\^)';
-
-var CARETTRIM = R++;
-src[CARETTRIM] = '(\\s*)' + src[LONECARET] + '\\s+';
-re[CARETTRIM] = new RegExp(src[CARETTRIM], 'g');
-var caretTrimReplace = '$1^';
-
-var CARET = R++;
-src[CARET] = '^' + src[LONECARET] + src[XRANGEPLAIN] + '$';
-var CARETLOOSE = R++;
-src[CARETLOOSE] = '^' + src[LONECARET] + src[XRANGEPLAINLOOSE] + '$';
-
-// A simple gt/lt/eq thing, or just "" to indicate "any version"
-var COMPARATORLOOSE = R++;
-src[COMPARATORLOOSE] = '^' + src[GTLT] + '\\s*(' + LOOSEPLAIN + ')$|^$';
-var COMPARATOR = R++;
-src[COMPARATOR] = '^' + src[GTLT] + '\\s*(' + FULLPLAIN + ')$|^$';
-
-
-// An expression to strip any whitespace between the gtlt and the thing
-// it modifies, so that `> 1.2.3` ==> `>1.2.3`
-var COMPARATORTRIM = R++;
-src[COMPARATORTRIM] = '(\\s*)' + src[GTLT] +
-                      '\\s*(' + LOOSEPLAIN + '|' + src[XRANGEPLAIN] + ')';
-
-// this one has to use the /g flag
-re[COMPARATORTRIM] = new RegExp(src[COMPARATORTRIM], 'g');
-var comparatorTrimReplace = '$1$2$3';
-
-
-// Something like `1.2.3 - 1.2.4`
-// Note that these all use the loose form, because they'll be
-// checked against either the strict or loose comparator form
-// later.
-var HYPHENRANGE = R++;
-src[HYPHENRANGE] = '^\\s*(' + src[XRANGEPLAIN] + ')' +
-                   '\\s+-\\s+' +
-                   '(' + src[XRANGEPLAIN] + ')' +
-                   '\\s*$';
-
-var HYPHENRANGELOOSE = R++;
-src[HYPHENRANGELOOSE] = '^\\s*(' + src[XRANGEPLAINLOOSE] + ')' +
-                        '\\s+-\\s+' +
-                        '(' + src[XRANGEPLAINLOOSE] + ')' +
-                        '\\s*$';
-
-// Star ranges basically just allow anything at all.
-var STAR = R++;
-src[STAR] = '(<|>)?=?\\s*\\*';
-
-// Compile to actual regexp objects.
-// All are flag-free, unless they were created above with a flag.
-for (var i = 0; i < R; i++) {
-  debug(i, src[i]);
-  if (!re[i])
-    re[i] = new RegExp(src[i]);
-}
-
-exports.parse = parse;
-function parse(version, loose) {
-  if (version instanceof SemVer)
-    return version;
-
-  if (typeof version !== 'string')
-    return null;
-
-  if (version.length > MAX_LENGTH)
-    return null;
-
-  var r = loose ? re[LOOSE] : re[FULL];
-  if (!r.test(version))
-    return null;
-
-  try {
-    return new SemVer(version, loose);
-  } catch (er) {
-    return null;
-  }
-}
-
-exports.valid = valid;
-function valid(version, loose) {
-  var v = parse(version, loose);
-  return v ? v.version : null;
-}
-
-
-exports.clean = clean;
-function clean(version, loose) {
-  var s = parse(version.trim().replace(/^[=v]+/, ''), loose);
-  return s ? s.version : null;
-}
-
-exports.SemVer = SemVer;
-
-function SemVer(version, loose) {
-  if (version instanceof SemVer) {
-    if (version.loose === loose)
-      return version;
-    else
-      version = version.version;
-  } else if (typeof version !== 'string') {
-    throw new TypeError('Invalid Version: ' + version);
-  }
-
-  if (version.length > MAX_LENGTH)
-    throw new TypeError('version is longer than ' + MAX_LENGTH + ' characters')
-
-  if (!(this instanceof SemVer))
-    return new SemVer(version, loose);
-
-  debug('SemVer', version, loose);
-  this.loose = loose;
-  var m = version.trim().match(loose ? re[LOOSE] : re[FULL]);
-
-  if (!m)
-    throw new TypeError('Invalid Version: ' + version);
-
-  this.raw = version;
-
-  // these are actually numbers
-  this.major = +m[1];
-  this.minor = +m[2];
-  this.patch = +m[3];
-
-  if (this.major > MAX_SAFE_INTEGER || this.major < 0)
-    throw new TypeError('Invalid major version')
-
-  if (this.minor > MAX_SAFE_INTEGER || this.minor < 0)
-    throw new TypeError('Invalid minor version')
-
-  if (this.patch > MAX_SAFE_INTEGER || this.patch < 0)
-    throw new TypeError('Invalid patch version')
-
-  // numberify any prerelease numeric ids
-  if (!m[4])
-    this.prerelease = [];
-  else
-    this.prerelease = m[4].split('.').map(function(id) {
-      if (/^[0-9]+$/.test(id)) {
-        var num = +id;
-        if (num >= 0 && num < MAX_SAFE_INTEGER)
-          return num;
-      }
-      return id;
-    });
-
-  this.build = m[5] ? m[5].split('.') : [];
-  this.format();
-}
-
-SemVer.prototype.format = function() {
-  this.version = this.major + '.' + this.minor + '.' + this.patch;
-  if (this.prerelease.length)
-    this.version += '-' + this.prerelease.join('.');
-  return this.version;
-};
-
-SemVer.prototype.toString = function() {
-  return this.version;
-};
-
-SemVer.prototype.compare = function(other) {
-  debug('SemVer.compare', this.version, this.loose, other);
-  if (!(other instanceof SemVer))
-    other = new SemVer(other, this.loose);
-
-  return this.compareMain(other) || this.comparePre(other);
-};
-
-SemVer.prototype.compareMain = function(other) {
-  if (!(other instanceof SemVer))
-    other = new SemVer(other, this.loose);
-
-  return compareIdentifiers(this.major, other.major) ||
-         compareIdentifiers(this.minor, other.minor) ||
-         compareIdentifiers(this.patch, other.patch);
-};
-
-SemVer.prototype.comparePre = function(other) {
-  if (!(other instanceof SemVer))
-    other = new SemVer(other, this.loose);
-
-  // NOT having a prerelease is > having one
-  if (this.prerelease.length && !other.prerelease.length)
-    return -1;
-  else if (!this.prerelease.length && other.prerelease.length)
-    return 1;
-  else if (!this.prerelease.length && !other.prerelease.length)
-    return 0;
-
-  var i = 0;
-  do {
-    var a = this.prerelease[i];
-    var b = other.prerelease[i];
-    debug('prerelease compare', i, a, b);
-    if (a === undefined && b === undefined)
-      return 0;
-    else if (b === undefined)
-      return 1;
-    else if (a === undefined)
-      return -1;
-    else if (a === b)
-      continue;
-    else
-      return compareIdentifiers(a, b);
-  } while (++i);
-};
-
-// preminor will bump the version up to the next minor release, and immediately
-// down to pre-release. premajor and prepatch work the same way.
-SemVer.prototype.inc = function(release, identifier) {
-  switch (release) {
-    case 'premajor':
-      this.prerelease.length = 0;
-      this.patch = 0;
-      this.minor = 0;
-      this.major++;
-      this.inc('pre', identifier);
-      break;
-    case 'preminor':
-      this.prerelease.length = 0;
-      this.patch = 0;
-      this.minor++;
-      this.inc('pre', identifier);
-      break;
-    case 'prepatch':
-      // If this is already a prerelease, it will bump to the next version
-      // drop any prereleases that might already exist, since they are not
-      // relevant at this point.
-      this.prerelease.length = 0;
-      this.inc('patch', identifier);
-      this.inc('pre', identifier);
-      break;
-    // If the input is a non-prerelease version, this acts the same as
-    // prepatch.
-    case 'prerelease':
-      if (this.prerelease.length === 0)
-        this.inc('patch', identifier);
-      this.inc('pre', identifier);
-      break;
-
-    case 'major':
-      // If this is a pre-major version, bump up to the same major version.
-      // Otherwise increment major.
-      // 1.0.0-5 bumps to 1.0.0
-      // 1.1.0 bumps to 2.0.0
-      if (this.minor !== 0 || this.patch !== 0 || this.prerelease.length === 0)
-        this.major++;
-      this.minor = 0;
-      this.patch = 0;
-      this.prerelease = [];
-      break;
-    case 'minor':
-      // If this is a pre-minor version, bump up to the same minor version.
-      // Otherwise increment minor.
-      // 1.2.0-5 bumps to 1.2.0
-      // 1.2.1 bumps to 1.3.0
-      if (this.patch !== 0 || this.prerelease.length === 0)
-        this.minor++;
-      this.patch = 0;
-      this.prerelease = [];
-      break;
-    case 'patch':
-      // If this is not a pre-release version, it will increment the patch.
-      // If it is a pre-release it will bump up to the same patch version.
-      // 1.2.0-5 patches to 1.2.0
-      // 1.2.0 patches to 1.2.1
-      if (this.prerelease.length === 0)
-        this.patch++;
-      this.prerelease = [];
-      break;
-    // This probably shouldn't be used publicly.
-    // 1.0.0 "pre" would become 1.0.0-0 which is the wrong direction.
-    case 'pre':
-      if (this.prerelease.length === 0)
-        this.prerelease = [0];
-      else {
-        var i = this.prerelease.length;
-        while (--i >= 0) {
-          if (typeof this.prerelease[i] === 'number') {
-            this.prerelease[i]++;
-            i = -2;
-          }
-        }
-        if (i === -1) // didn't increment anything
-          this.prerelease.push(0);
-      }
-      if (identifier) {
-        // 1.2.0-beta.1 bumps to 1.2.0-beta.2,
-        // 1.2.0-beta.fooblz or 1.2.0-beta bumps to 1.2.0-beta.0
-        if (this.prerelease[0] === identifier) {
-          if (isNaN(this.prerelease[1]))
-            this.prerelease = [identifier, 0];
-        } else
-          this.prerelease = [identifier, 0];
-      }
-      break;
-
-    default:
-      throw new Error('invalid increment argument: ' + release);
-  }
-  this.format();
-  this.raw = this.version;
-  return this;
-};
-
-exports.inc = inc;
-function inc(version, release, loose, identifier) {
-  if (typeof(loose) === 'string') {
-    identifier = loose;
-    loose = undefined;
-  }
-
-  try {
-    return new SemVer(version, loose).inc(release, identifier).version;
-  } catch (er) {
-    return null;
-  }
-}
-
-exports.diff = diff;
-function diff(version1, version2) {
-  if (eq(version1, version2)) {
-    return null;
-  } else {
-    var v1 = parse(version1);
-    var v2 = parse(version2);
-    if (v1.prerelease.length || v2.prerelease.length) {
-      for (var key in v1) {
-        if (key === 'major' || key === 'minor' || key === 'patch') {
-          if (v1[key] !== v2[key]) {
-            return 'pre'+key;
-          }
-        }
-      }
-      return 'prerelease';
-    }
-    for (var key in v1) {
-      if (key === 'major' || key === 'minor' || key === 'patch') {
-        if (v1[key] !== v2[key]) {
-          return key;
-        }
-      }
-    }
-  }
-}
-
-exports.compareIdentifiers = compareIdentifiers;
-
-var numeric = /^[0-9]+$/;
-function compareIdentifiers(a, b) {
-  var anum = numeric.test(a);
-  var bnum = numeric.test(b);
-
-  if (anum && bnum) {
-    a = +a;
-    b = +b;
-  }
-
-  return (anum && !bnum) ? -1 :
-         (bnum && !anum) ? 1 :
-         a < b ? -1 :
-         a > b ? 1 :
-         0;
-}
-
-exports.rcompareIdentifiers = rcompareIdentifiers;
-function rcompareIdentifiers(a, b) {
-  return compareIdentifiers(b, a);
-}
-
-exports.major = major;
-function major(a, loose) {
-  return new SemVer(a, loose).major;
-}
-
-exports.minor = minor;
-function minor(a, loose) {
-  return new SemVer(a, loose).minor;
-}
-
-exports.patch = patch;
-function patch(a, loose) {
-  return new SemVer(a, loose).patch;
-}
-
-exports.compare = compare;
-function compare(a, b, loose) {
-  return new SemVer(a, loose).compare(new SemVer(b, loose));
-}
-
-exports.compareLoose = compareLoose;
-function compareLoose(a, b) {
-  return compare(a, b, true);
-}
-
-exports.rcompare = rcompare;
-function rcompare(a, b, loose) {
-  return compare(b, a, loose);
-}
-
-exports.sort = sort;
-function sort(list, loose) {
-  return list.sort(function(a, b) {
-    return exports.compare(a, b, loose);
-  });
-}
-
-exports.rsort = rsort;
-function rsort(list, loose) {
-  return list.sort(function(a, b) {
-    return exports.rcompare(a, b, loose);
-  });
-}
-
-exports.gt = gt;
-function gt(a, b, loose) {
-  return compare(a, b, loose) > 0;
-}
-
-exports.lt = lt;
-function lt(a, b, loose) {
-  return compare(a, b, loose) < 0;
-}
-
-exports.eq = eq;
-function eq(a, b, loose) {
-  return compare(a, b, loose) === 0;
-}
-
-exports.neq = neq;
-function neq(a, b, loose) {
-  return compare(a, b, loose) !== 0;
-}
-
-exports.gte = gte;
-function gte(a, b, loose) {
-  return compare(a, b, loose) >= 0;
-}
-
-exports.lte = lte;
-function lte(a, b, loose) {
-  return compare(a, b, loose) <= 0;
-}
-
-exports.cmp = cmp;
-function cmp(a, op, b, loose) {
-  var ret;
-  switch (op) {
-    case '===':
-      if (typeof a === 'object') a = a.version;
-      if (typeof b === 'object') b = b.version;
-      ret = a === b;
-      break;
-    case '!==':
-      if (typeof a === 'object') a = a.version;
-      if (typeof b === 'object') b = b.version;
-      ret = a !== b;
-      break;
-    case '': case '=': case '==': ret = eq(a, b, loose); break;
-    case '!=': ret = neq(a, b, loose); break;
-    case '>': ret = gt(a, b, loose); break;
-    case '>=': ret = gte(a, b, loose); break;
-    case '<': ret = lt(a, b, loose); break;
-    case '<=': ret = lte(a, b, loose); break;
-    default: throw new TypeError('Invalid operator: ' + op);
-  }
-  return ret;
-}
-
-exports.Comparator = Comparator;
-function Comparator(comp, loose) {
-  if (comp instanceof Comparator) {
-    if (comp.loose === loose)
-      return comp;
-    else
-      comp = comp.value;
-  }
-
-  if (!(this instanceof Comparator))
-    return new Comparator(comp, loose);
-
-  debug('comparator', comp, loose);
-  this.loose = loose;
-  this.parse(comp);
-
-  if (this.semver === ANY)
-    this.value = '';
-  else
-    this.value = this.operator + this.semver.version;
-
-  debug('comp', this);
-}
-
-var ANY = {};
-Comparator.prototype.parse = function(comp) {
-  var r = this.loose ? re[COMPARATORLOOSE] : re[COMPARATOR];
-  var m = comp.match(r);
-
-  if (!m)
-    throw new TypeError('Invalid comparator: ' + comp);
-
-  this.operator = m[1];
-  if (this.operator === '=')
-    this.operator = '';
-
-  // if it literally is just '>' or '' then allow anything.
-  if (!m[2])
-    this.semver = ANY;
-  else
-    this.semver = new SemVer(m[2], this.loose);
-};
-
-Comparator.prototype.toString = function() {
-  return this.value;
-};
-
-Comparator.prototype.test = function(version) {
-  debug('Comparator.test', version, this.loose);
-
-  if (this.semver === ANY)
-    return true;
-
-  if (typeof version === 'string')
-    version = new SemVer(version, this.loose);
-
-  return cmp(version, this.operator, this.semver, this.loose);
-};
-
-Comparator.prototype.intersects = function(comp, loose) {
-  if (!(comp instanceof Comparator)) {
-    throw new TypeError('a Comparator is required');
-  }
-
-  var rangeTmp;
-
-  if (this.operator === '') {
-    rangeTmp = new Range(comp.value, loose);
-    return satisfies(this.value, rangeTmp, loose);
-  } else if (comp.operator === '') {
-    rangeTmp = new Range(this.value, loose);
-    return satisfies(comp.semver, rangeTmp, loose);
-  }
-
-  var sameDirectionIncreasing =
-    (this.operator === '>=' || this.operator === '>') &&
-    (comp.operator === '>=' || comp.operator === '>');
-  var sameDirectionDecreasing =
-    (this.operator === '<=' || this.operator === '<') &&
-    (comp.operator === '<=' || comp.operator === '<');
-  var sameSemVer = this.semver.version === comp.semver.version;
-  var differentDirectionsInclusive =
-    (this.operator === '>=' || this.operator === '<=') &&
-    (comp.operator === '>=' || comp.operator === '<=');
-  var oppositeDirectionsLessThan =
-    cmp(this.semver, '<', comp.semver, loose) &&
-    ((this.operator === '>=' || this.operator === '>') &&
-    (comp.operator === '<=' || comp.operator === '<'));
-  var oppositeDirectionsGreaterThan =
-    cmp(this.semver, '>', comp.semver, loose) &&
-    ((this.operator === '<=' || this.operator === '<') &&
-    (comp.operator === '>=' || comp.operator === '>'));
-
-  return sameDirectionIncreasing || sameDirectionDecreasing ||
-    (sameSemVer && differentDirectionsInclusive) ||
-    oppositeDirectionsLessThan || oppositeDirectionsGreaterThan;
-};
-
-
-exports.Range = Range;
-function Range(range, loose) {
-  if (range instanceof Range) {
-    if (range.loose === loose) {
-      return range;
-    } else {
-      return new Range(range.raw, loose);
-    }
-  }
-
-  if (range instanceof Comparator) {
-    return new Range(range.value, loose);
-  }
-
-  if (!(this instanceof Range))
-    return new Range(range, loose);
-
-  this.loose = loose;
-
-  // First, split based on boolean or ||
-  this.raw = range;
-  this.set = range.split(/\s*\|\|\s*/).map(function(range) {
-    return this.parseRange(range.trim());
-  }, this).filter(function(c) {
-    // throw out any that are not relevant for whatever reason
-    return c.length;
-  });
-
-  if (!this.set.length) {
-    throw new TypeError('Invalid SemVer Range: ' + range);
-  }
-
-  this.format();
-}
-
-Range.prototype.format = function() {
-  this.range = this.set.map(function(comps) {
-    return comps.join(' ').trim();
-  }).join('||').trim();
-  return this.range;
-};
-
-Range.prototype.toString = function() {
-  return this.range;
-};
-
-Range.prototype.parseRange = function(range) {
-  var loose = this.loose;
-  range = range.trim();
-  debug('range', range, loose);
-  // `1.2.3 - 1.2.4` => `>=1.2.3 <=1.2.4`
-  var hr = loose ? re[HYPHENRANGELOOSE] : re[HYPHENRANGE];
-  range = range.replace(hr, hyphenReplace);
-  debug('hyphen replace', range);
-  // `> 1.2.3 < 1.2.5` => `>1.2.3 <1.2.5`
-  range = range.replace(re[COMPARATORTRIM], comparatorTrimReplace);
-  debug('comparator trim', range, re[COMPARATORTRIM]);
-
-  // `~ 1.2.3` => `~1.2.3`
-  range = range.replace(re[TILDETRIM], tildeTrimReplace);
-
-  // `^ 1.2.3` => `^1.2.3`
-  range = range.replace(re[CARETTRIM], caretTrimReplace);
-
-  // normalize spaces
-  range = range.split(/\s+/).join(' ');
-
-  // At this point, the range is completely trimmed and
-  // ready to be split into comparators.
-
-  var compRe = loose ? re[COMPARATORLOOSE] : re[COMPARATOR];
-  var set = range.split(' ').map(function(comp) {
-    return parseComparator(comp, loose);
-  }).join(' ').split(/\s+/);
-  if (this.loose) {
-    // in loose mode, throw out any that are not valid comparators
-    set = set.filter(function(comp) {
-      return !!comp.match(compRe);
-    });
-  }
-  set = set.map(function(comp) {
-    return new Comparator(comp, loose);
-  });
-
-  return set;
-};
-
-Range.prototype.intersects = function(range, loose) {
-  if (!(range instanceof Range)) {
-    throw new TypeError('a Range is required');
-  }
-
-  return this.set.some(function(thisComparators) {
-    return thisComparators.every(function(thisComparator) {
-      return range.set.some(function(rangeComparators) {
-        return rangeComparators.every(function(rangeComparator) {
-          return thisComparator.intersects(rangeComparator, loose);
-        });
-      });
-    });
-  });
-};
-
-// Mostly just for testing and legacy API reasons
-exports.toComparators = toComparators;
-function toComparators(range, loose) {
-  return new Range(range, loose).set.map(function(comp) {
-    return comp.map(function(c) {
-      return c.value;
-    }).join(' ').trim().split(' ');
-  });
-}
-
-// comprised of xranges, tildes, stars, and gtlt's at this point.
-// already replaced the hyphen ranges
-// turn into a set of JUST comparators.
-function parseComparator(comp, loose) {
-  debug('comp', comp);
-  comp = replaceCarets(comp, loose);
-  debug('caret', comp);
-  comp = replaceTildes(comp, loose);
-  debug('tildes', comp);
-  comp = replaceXRanges(comp, loose);
-  debug('xrange', comp);
-  comp = replaceStars(comp, loose);
-  debug('stars', comp);
-  return comp;
-}
-
-function isX(id) {
-  return !id || id.toLowerCase() === 'x' || id === '*';
-}
-
-// ~, ~> --> * (any, kinda silly)
-// ~2, ~2.x, ~2.x.x, ~>2, ~>2.x ~>2.x.x --> >=2.0.0 <3.0.0
-// ~2.0, ~2.0.x, ~>2.0, ~>2.0.x --> >=2.0.0 <2.1.0
-// ~1.2, ~1.2.x, ~>1.2, ~>1.2.x --> >=1.2.0 <1.3.0
-// ~1.2.3, ~>1.2.3 --> >=1.2.3 <1.3.0
-// ~1.2.0, ~>1.2.0 --> >=1.2.0 <1.3.0
-function replaceTildes(comp, loose) {
-  return comp.trim().split(/\s+/).map(function(comp) {
-    return replaceTilde(comp, loose);
-  }).join(' ');
-}
-
-function replaceTilde(comp, loose) {
-  var r = loose ? re[TILDELOOSE] : re[TILDE];
-  return comp.replace(r, function(_, M, m, p, pr) {
-    debug('tilde', comp, _, M, m, p, pr);
-    var ret;
-
-    if (isX(M))
-      ret = '';
-    else if (isX(m))
-      ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0';
-    else if (isX(p))
-      // ~1.2 == >=1.2.0 <1.3.0
-      ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0';
-    else if (pr) {
-      debug('replaceTilde pr', pr);
-      if (pr.charAt(0) !== '-')
-        pr = '-' + pr;
-      ret = '>=' + M + '.' + m + '.' + p + pr +
-            ' <' + M + '.' + (+m + 1) + '.0';
-    } else
-      // ~1.2.3 == >=1.2.3 <1.3.0
-      ret = '>=' + M + '.' + m + '.' + p +
-            ' <' + M + '.' + (+m + 1) + '.0';
-
-    debug('tilde return', ret);
-    return ret;
-  });
-}
-
-// ^ --> * (any, kinda silly)
-// ^2, ^2.x, ^2.x.x --> >=2.0.0 <3.0.0
-// ^2.0, ^2.0.x --> >=2.0.0 <3.0.0
-// ^1.2, ^1.2.x --> >=1.2.0 <2.0.0
-// ^1.2.3 --> >=1.2.3 <2.0.0
-// ^1.2.0 --> >=1.2.0 <2.0.0
-function replaceCarets(comp, loose) {
-  return comp.trim().split(/\s+/).map(function(comp) {
-    return replaceCaret(comp, loose);
-  }).join(' ');
-}
-
-function replaceCaret(comp, loose) {
-  debug('caret', comp, loose);
-  var r = loose ? re[CARETLOOSE] : re[CARET];
-  return comp.replace(r, function(_, M, m, p, pr) {
-    debug('caret', comp, _, M, m, p, pr);
-    var ret;
-
-    if (isX(M))
-      ret = '';
-    else if (isX(m))
-      ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0';
-    else if (isX(p)) {
-      if (M === '0')
-        ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0';
-      else
-        ret = '>=' + M + '.' + m + '.0 <' + (+M + 1) + '.0.0';
-    } else if (pr) {
-      debug('replaceCaret pr', pr);
-      if (pr.charAt(0) !== '-')
-        pr = '-' + pr;
-      if (M === '0') {
-        if (m === '0')
-          ret = '>=' + M + '.' + m + '.' + p + pr +
-                ' <' + M + '.' + m + '.' + (+p + 1);
-        else
-          ret = '>=' + M + '.' + m + '.' + p + pr +
-                ' <' + M + '.' + (+m + 1) + '.0';
-      } else
-        ret = '>=' + M + '.' + m + '.' + p + pr +
-              ' <' + (+M + 1) + '.0.0';
-    } else {
-      debug('no pr');
-      if (M === '0') {
-        if (m === '0')
-          ret = '>=' + M + '.' + m + '.' + p +
-                ' <' + M + '.' + m + '.' + (+p + 1);
-        else
-          ret = '>=' + M + '.' + m + '.' + p +
-                ' <' + M + '.' + (+m + 1) + '.0';
-      } else
-        ret = '>=' + M + '.' + m + '.' + p +
-              ' <' + (+M + 1) + '.0.0';
-    }
-
-    debug('caret return', ret);
-    return ret;
-  });
-}
-
-function replaceXRanges(comp, loose) {
-  debug('replaceXRanges', comp, loose);
-  return comp.split(/\s+/).map(function(comp) {
-    return replaceXRange(comp, loose);
-  }).join(' ');
-}
-
-function replaceXRange(comp, loose) {
-  comp = comp.trim();
-  var r = loose ? re[XRANGELOOSE] : re[XRANGE];
-  return comp.replace(r, function(ret, gtlt, M, m, p, pr) {
-    debug('xRange', comp, ret, gtlt, M, m, p, pr);
-    var xM = isX(M);
-    var xm = xM || isX(m);
-    var xp = xm || isX(p);
-    var anyX = xp;
-
-    if (gtlt === '=' && anyX)
-      gtlt = '';
-
-    if (xM) {
-      if (gtlt === '>' || gtlt === '<') {
-        // nothing is allowed
-        ret = '<0.0.0';
-      } else {
-        // nothing is forbidden
-        ret = '*';
-      }
-    } else if (gtlt && anyX) {
-      // replace X with 0
-      if (xm)
-        m = 0;
-      if (xp)
-        p = 0;
-
-      if (gtlt === '>') {
-        // >1 => >=2.0.0
-        // >1.2 => >=1.3.0
-        // >1.2.3 => >= 1.2.4
-        gtlt = '>=';
-        if (xm) {
-          M = +M + 1;
-          m = 0;
-          p = 0;
-        } else if (xp) {
-          m = +m + 1;
-          p = 0;
-        }
-      } else if (gtlt === '<=') {
-        // <=0.7.x is actually <0.8.0, since any 0.7.x should
-        // pass.  Similarly, <=7.x is actually <8.0.0, etc.
-        gtlt = '<';
-        if (xm)
-          M = +M + 1;
-        else
-          m = +m + 1;
-      }
-
-      ret = gtlt + M + '.' + m + '.' + p;
-    } else if (xm) {
-      ret = '>=' + M + '.0.0 <' + (+M + 1) + '.0.0';
-    } else if (xp) {
-      ret = '>=' + M + '.' + m + '.0 <' + M + '.' + (+m + 1) + '.0';
-    }
-
-    debug('xRange return', ret);
-
-    return ret;
-  });
-}
-
-// Because * is AND-ed with everything else in the comparator,
-// and '' means "any version", just remove the *s entirely.
-function replaceStars(comp, loose) {
-  debug('replaceStars', comp, loose);
-  // Looseness is ignored here.  star is always as loose as it gets!
-  return comp.trim().replace(re[STAR], '');
-}
-
-// This function is passed to string.replace(re[HYPHENRANGE])
-// M, m, patch, prerelease, build
-// 1.2 - 3.4.5 => >=1.2.0 <=3.4.5
-// 1.2.3 - 3.4 => >=1.2.0 <3.5.0 Any 3.4.x will do
-// 1.2 - 3.4 => >=1.2.0 <3.5.0
-function hyphenReplace($0,
-                       from, fM, fm, fp, fpr, fb,
-                       to, tM, tm, tp, tpr, tb) {
-
-  if (isX(fM))
-    from = '';
-  else if (isX(fm))
-    from = '>=' + fM + '.0.0';
-  else if (isX(fp))
-    from = '>=' + fM + '.' + fm + '.0';
-  else
-    from = '>=' + from;
-
-  if (isX(tM))
-    to = '';
-  else if (isX(tm))
-    to = '<' + (+tM + 1) + '.0.0';
-  else if (isX(tp))
-    to = '<' + tM + '.' + (+tm + 1) + '.0';
-  else if (tpr)
-    to = '<=' + tM + '.' + tm + '.' + tp + '-' + tpr;
-  else
-    to = '<=' + to;
-
-  return (from + ' ' + to).trim();
-}
-
-
-// if ANY of the sets match ALL of its comparators, then pass
-Range.prototype.test = function(version) {
-  if (!version)
-    return false;
-
-  if (typeof version === 'string')
-    version = new SemVer(version, this.loose);
-
-  for (var i = 0; i < this.set.length; i++) {
-    if (testSet(this.set[i], version))
-      return true;
-  }
-  return false;
-};
-
-function testSet(set, version) {
-  for (var i = 0; i < set.length; i++) {
-    if (!set[i].test(version))
-      return false;
-  }
-
-  if (version.prerelease.length) {
-    // Find the set of versions that are allowed to have prereleases
-    // For example, ^1.2.3-pr.1 desugars to >=1.2.3-pr.1 <2.0.0
-    // That should allow `1.2.3-pr.2` to pass.
-    // However, `1.2.4-alpha.notready` should NOT be allowed,
-    // even though it's within the range set by the comparators.
-    for (var i = 0; i < set.length; i++) {
-      debug(set[i].semver);
-      if (set[i].semver === ANY)
-        continue;
-
-      if (set[i].semver.prerelease.length > 0) {
-        var allowed = set[i].semver;
-        if (allowed.major === version.major &&
-            allowed.minor === version.minor &&
-            allowed.patch === version.patch)
-          return true;
-      }
-    }
-
-    // Version has a -pre, but it's not one of the ones we like.
-    return false;
-  }
-
-  return true;
-}
-
-exports.satisfies = satisfies;
-function satisfies(version, range, loose) {
-  try {
-    range = new Range(range, loose);
-  } catch (er) {
-    return false;
-  }
-  return range.test(version);
-}
-
-exports.maxSatisfying = maxSatisfying;
-function maxSatisfying(versions, range, loose) {
-  var max = null;
-  var maxSV = null;
-  try {
-    var rangeObj = new Range(range, loose);
-  } catch (er) {
-    return null;
-  }
-  versions.forEach(function (v) {
-    if (rangeObj.test(v)) { // satisfies(v, range, loose)
-      if (!max || maxSV.compare(v) === -1) { // compare(max, v, true)
-        max = v;
-        maxSV = new SemVer(max, loose);
-      }
-    }
-  })
-  return max;
-}
-
-exports.minSatisfying = minSatisfying;
-function minSatisfying(versions, range, loose) {
-  var min = null;
-  var minSV = null;
-  try {
-    var rangeObj = new Range(range, loose);
-  } catch (er) {
-    return null;
-  }
-  versions.forEach(function (v) {
-    if (rangeObj.test(v)) { // satisfies(v, range, loose)
-      if (!min || minSV.compare(v) === 1) { // compare(min, v, true)
-        min = v;
-        minSV = new SemVer(min, loose);
-      }
-    }
-  })
-  return min;
-}
-
-exports.validRange = validRange;
-function validRange(range, loose) {
-  try {
-    // Return '*' instead of '' so that truthiness works.
-    // This will throw if it's invalid anyway
-    return new Range(range, loose).range || '*';
-  } catch (er) {
-    return null;
-  }
-}
-
-// Determine if version is less than all the versions possible in the range
-exports.ltr = ltr;
-function ltr(version, range, loose) {
-  return outside(version, range, '<', loose);
-}
-
-// Determine if version is greater than all the versions possible in the range.
-exports.gtr = gtr;
-function gtr(version, range, loose) {
-  return outside(version, range, '>', loose);
-}
-
-exports.outside = outside;
-function outside(version, range, hilo, loose) {
-  version = new SemVer(version, loose);
-  range = new Range(range, loose);
-
-  var gtfn, ltefn, ltfn, comp, ecomp;
-  switch (hilo) {
-    case '>':
-      gtfn = gt;
-      ltefn = lte;
-      ltfn = lt;
-      comp = '>';
-      ecomp = '>=';
-      break;
-    case '<':
-      gtfn = lt;
-      ltefn = gte;
-      ltfn = gt;
-      comp = '<';
-      ecomp = '<=';
-      break;
-    default:
-      throw new TypeError('Must provide a hilo val of "<" or ">"');
-  }
-
-  // If it satisifes the range it is not outside
-  if (satisfies(version, range, loose)) {
-    return false;
-  }
-
-  // From now on, variable terms are as if we're in "gtr" mode.
-  // but note that everything is flipped for the "ltr" function.
-
-  for (var i = 0; i < range.set.length; ++i) {
-    var comparators = range.set[i];
-
-    var high = null;
-    var low = null;
-
-    comparators.forEach(function(comparator) {
-      if (comparator.semver === ANY) {
-        comparator = new Comparator('>=0.0.0')
-      }
-      high = high || comparator;
-      low = low || comparator;
-      if (gtfn(comparator.semver, high.semver, loose)) {
-        high = comparator;
-      } else if (ltfn(comparator.semver, low.semver, loose)) {
-        low = comparator;
-      }
-    });
-
-    // If the edge version comparator has a operator then our version
-    // isn't outside it
-    if (high.operator === comp || high.operator === ecomp) {
-      return false;
-    }
-
-    // If the lowest version comparator has an operator and our version
-    // is less than it then it isn't higher than the range
-    if ((!low.operator || low.operator === comp) &&
-        ltefn(version, low.semver)) {
-      return false;
-    } else if (low.operator === ecomp && ltfn(version, low.semver)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-exports.prerelease = prerelease;
-function prerelease(version, loose) {
-  var parsed = parse(version, loose);
-  return (parsed && parsed.prerelease.length) ? parsed.prerelease : null;
-}
-
-exports.intersects = intersects;
-function intersects(r1, r2, loose) {
-  r1 = new Range(r1, loose)
-  r2 = new Range(r2, loose)
-  return r1.intersects(r2)
-}
-
-exports.coerce = coerce;
-function coerce(version) {
-  if (version instanceof SemVer)
-    return version;
-
-  if (typeof version !== 'string')
-    return null;
-
-  var match = version.match(re[COERCE]);
-
-  if (match == null)
-    return null;
-
-  return parse((match[1] || '0') + '.' + (match[2] || '0') + '.' + (match[3] || '0')); 
-}
-
-
-/***/ }),
-/* 23 */
-/***/ (function(module, exports) {
-
-module.exports = require("stream");
-
-/***/ }),
-/* 24 */
-/***/ (function(module, exports) {
-
-module.exports = require("url");
-
-/***/ }),
-/* 25 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Subscription; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isObject__ = __webpack_require__(444);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isFunction__ = __webpack_require__(154);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__ = __webpack_require__(441);
-/** PURE_IMPORTS_START _util_isArray,_util_isObject,_util_isFunction,_util_tryCatch,_util_errorObject,_util_UnsubscriptionError PURE_IMPORTS_END */
-
-
-
-
-
-
-var Subscription = /*@__PURE__*/ (function () {
-    function Subscription(unsubscribe) {
-        this.closed = false;
-        this._parent = null;
-        this._parents = null;
-        this._subscriptions = null;
-        if (unsubscribe) {
-            this._unsubscribe = unsubscribe;
-        }
-    }
-    Subscription.prototype.unsubscribe = function () {
-        var hasErrors = false;
-        var errors;
-        if (this.closed) {
-            return;
-        }
-        var _a = this, _parent = _a._parent, _parents = _a._parents, _unsubscribe = _a._unsubscribe, _subscriptions = _a._subscriptions;
-        this.closed = true;
-        this._parent = null;
-        this._parents = null;
-        this._subscriptions = null;
-        var index = -1;
-        var len = _parents ? _parents.length : 0;
-        while (_parent) {
-            _parent.remove(this);
-            _parent = ++index < len && _parents[index] || null;
-        }
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isFunction__["a" /* isFunction */])(_unsubscribe)) {
-            var trial = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_tryCatch__["a" /* tryCatch */])(_unsubscribe).call(this);
-            if (trial === __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */]) {
-                hasErrors = true;
-                errors = errors || (__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e instanceof __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */] ?
-                    flattenUnsubscriptionErrors(__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e.errors) : [__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e]);
-            }
-        }
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_isArray__["a" /* isArray */])(_subscriptions)) {
-            index = -1;
-            len = _subscriptions.length;
-            while (++index < len) {
-                var sub = _subscriptions[index];
-                if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isObject__["a" /* isObject */])(sub)) {
-                    var trial = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_tryCatch__["a" /* tryCatch */])(sub.unsubscribe).call(sub);
-                    if (trial === __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */]) {
-                        hasErrors = true;
-                        errors = errors || [];
-                        var err = __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e;
-                        if (err instanceof __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */]) {
-                            errors = errors.concat(flattenUnsubscriptionErrors(err.errors));
-                        }
-                        else {
-                            errors.push(err);
-                        }
-                    }
-                }
-            }
-        }
-        if (hasErrors) {
-            throw new __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */](errors);
-        }
-    };
-    Subscription.prototype.add = function (teardown) {
-        if (!teardown || (teardown === Subscription.EMPTY)) {
-            return Subscription.EMPTY;
-        }
-        if (teardown === this) {
-            return this;
-        }
-        var subscription = teardown;
-        switch (typeof teardown) {
-            case 'function':
-                subscription = new Subscription(teardown);
-            case 'object':
-                if (subscription.closed || typeof subscription.unsubscribe !== 'function') {
-                    return subscription;
-                }
-                else if (this.closed) {
-                    subscription.unsubscribe();
-                    return subscription;
-                }
-                else if (typeof subscription._addParent !== 'function') {
-                    var tmp = subscription;
-                    subscription = new Subscription();
-                    subscription._subscriptions = [tmp];
-                }
-                break;
-            default:
-                throw new Error('unrecognized teardown ' + teardown + ' added to Subscription.');
-        }
-        var subscriptions = this._subscriptions || (this._subscriptions = []);
-        subscriptions.push(subscription);
-        subscription._addParent(this);
-        return subscription;
-    };
-    Subscription.prototype.remove = function (subscription) {
-        var subscriptions = this._subscriptions;
-        if (subscriptions) {
-            var subscriptionIndex = subscriptions.indexOf(subscription);
-            if (subscriptionIndex !== -1) {
-                subscriptions.splice(subscriptionIndex, 1);
-            }
-        }
-    };
-    Subscription.prototype._addParent = function (parent) {
-        var _a = this, _parent = _a._parent, _parents = _a._parents;
-        if (!_parent || _parent === parent) {
-            this._parent = parent;
-        }
-        else if (!_parents) {
-            this._parents = [parent];
-        }
-        else if (_parents.indexOf(parent) === -1) {
-            _parents.push(parent);
-        }
-    };
-    Subscription.EMPTY = (function (empty) {
-        empty.closed = true;
-        return empty;
-    }(new Subscription()));
-    return Subscription;
-}());
-
-function flattenUnsubscriptionErrors(errors) {
-    return errors.reduce(function (errs, err) { return errs.concat((err instanceof __WEBPACK_IMPORTED_MODULE_5__util_UnsubscriptionError__["a" /* UnsubscriptionError */]) ? err.errors : err); }, []);
-}
-//# sourceMappingURL=Subscription.js.map
-
-
-/***/ }),
-/* 26 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	bufferSplit: bufferSplit,
-	addRSAMissing: addRSAMissing,
-	calculateDSAPublic: calculateDSAPublic,
-	calculateED25519Public: calculateED25519Public,
-	calculateX25519Public: calculateX25519Public,
-	mpNormalize: mpNormalize,
-	mpDenormalize: mpDenormalize,
-	ecNormalize: ecNormalize,
-	countZeros: countZeros,
-	assertCompatible: assertCompatible,
-	isCompatible: isCompatible,
-	opensslKeyDeriv: opensslKeyDeriv,
-	opensshCipherInfo: opensshCipherInfo,
-	publicFromPrivateECDSA: publicFromPrivateECDSA,
-	zeroPadToLength: zeroPadToLength,
-	writeBitString: writeBitString,
-	readBitString: readBitString
-};
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var PrivateKey = __webpack_require__(33);
-var Key = __webpack_require__(27);
-var crypto = __webpack_require__(11);
-var algs = __webpack_require__(32);
-var asn1 = __webpack_require__(66);
-
-var ec, jsbn;
-var nacl;
-
-var MAX_CLASS_DEPTH = 3;
-
-function isCompatible(obj, klass, needVer) {
-	if (obj === null || typeof (obj) !== 'object')
-		return (false);
-	if (needVer === undefined)
-		needVer = klass.prototype._sshpkApiVersion;
-	if (obj instanceof klass &&
-	    klass.prototype._sshpkApiVersion[0] == needVer[0])
-		return (true);
-	var proto = Object.getPrototypeOf(obj);
-	var depth = 0;
-	while (proto.constructor.name !== klass.name) {
-		proto = Object.getPrototypeOf(proto);
-		if (!proto || ++depth > MAX_CLASS_DEPTH)
-			return (false);
-	}
-	if (proto.constructor.name !== klass.name)
-		return (false);
-	var ver = proto._sshpkApiVersion;
-	if (ver === undefined)
-		ver = klass._oldVersionDetect(obj);
-	if (ver[0] != needVer[0] || ver[1] < needVer[1])
-		return (false);
-	return (true);
-}
-
-function assertCompatible(obj, klass, needVer, name) {
-	if (name === undefined)
-		name = 'object';
-	assert.ok(obj, name + ' must not be null');
-	assert.object(obj, name + ' must be an object');
-	if (needVer === undefined)
-		needVer = klass.prototype._sshpkApiVersion;
-	if (obj instanceof klass &&
-	    klass.prototype._sshpkApiVersion[0] == needVer[0])
-		return;
-	var proto = Object.getPrototypeOf(obj);
-	var depth = 0;
-	while (proto.constructor.name !== klass.name) {
-		proto = Object.getPrototypeOf(proto);
-		assert.ok(proto && ++depth <= MAX_CLASS_DEPTH,
-		    name + ' must be a ' + klass.name + ' instance');
-	}
-	assert.strictEqual(proto.constructor.name, klass.name,
-	    name + ' must be a ' + klass.name + ' instance');
-	var ver = proto._sshpkApiVersion;
-	if (ver === undefined)
-		ver = klass._oldVersionDetect(obj);
-	assert.ok(ver[0] == needVer[0] && ver[1] >= needVer[1],
-	    name + ' must be compatible with ' + klass.name + ' klass ' +
-	    'version ' + needVer[0] + '.' + needVer[1]);
-}
-
-var CIPHER_LEN = {
-	'des-ede3-cbc': { key: 7, iv: 8 },
-	'aes-128-cbc': { key: 16, iv: 16 }
-};
-var PKCS5_SALT_LEN = 8;
-
-function opensslKeyDeriv(cipher, salt, passphrase, count) {
-	assert.buffer(salt, 'salt');
-	assert.buffer(passphrase, 'passphrase');
-	assert.number(count, 'iteration count');
-
-	var clen = CIPHER_LEN[cipher];
-	assert.object(clen, 'supported cipher');
-
-	salt = salt.slice(0, PKCS5_SALT_LEN);
-
-	var D, D_prev, bufs;
-	var material = Buffer.alloc(0);
-	while (material.length < clen.key + clen.iv) {
-		bufs = [];
-		if (D_prev)
-			bufs.push(D_prev);
-		bufs.push(passphrase);
-		bufs.push(salt);
-		D = Buffer.concat(bufs);
-		for (var j = 0; j < count; ++j)
-			D = crypto.createHash('md5').update(D).digest();
-		material = Buffer.concat([material, D]);
-		D_prev = D;
-	}
-
-	return ({
-	    key: material.slice(0, clen.key),
-	    iv: material.slice(clen.key, clen.key + clen.iv)
-	});
-}
-
-/* Count leading zero bits on a buffer */
-function countZeros(buf) {
-	var o = 0, obit = 8;
-	while (o < buf.length) {
-		var mask = (1 << obit);
-		if ((buf[o] & mask) === mask)
-			break;
-		obit--;
-		if (obit < 0) {
-			o++;
-			obit = 8;
-		}
-	}
-	return (o*8 + (8 - obit) - 1);
-}
-
-function bufferSplit(buf, chr) {
-	assert.buffer(buf);
-	assert.string(chr);
-
-	var parts = [];
-	var lastPart = 0;
-	var matches = 0;
-	for (var i = 0; i < buf.length; ++i) {
-		if (buf[i] === chr.charCodeAt(matches))
-			++matches;
-		else if (buf[i] === chr.charCodeAt(0))
-			matches = 1;
-		else
-			matches = 0;
-
-		if (matches >= chr.length) {
-			var newPart = i + 1;
-			parts.push(buf.slice(lastPart, newPart - matches));
-			lastPart = newPart;
-			matches = 0;
-		}
-	}
-	if (lastPart <= buf.length)
-		parts.push(buf.slice(lastPart, buf.length));
-
-	return (parts);
-}
-
-function ecNormalize(buf, addZero) {
-	assert.buffer(buf);
-	if (buf[0] === 0x00 && buf[1] === 0x04) {
-		if (addZero)
-			return (buf);
-		return (buf.slice(1));
-	} else if (buf[0] === 0x04) {
-		if (!addZero)
-			return (buf);
-	} else {
-		while (buf[0] === 0x00)
-			buf = buf.slice(1);
-		if (buf[0] === 0x02 || buf[0] === 0x03)
-			throw (new Error('Compressed elliptic curve points ' +
-			    'are not supported'));
-		if (buf[0] !== 0x04)
-			throw (new Error('Not a valid elliptic curve point'));
-		if (!addZero)
-			return (buf);
-	}
-	var b = Buffer.alloc(buf.length + 1);
-	b[0] = 0x0;
-	buf.copy(b, 1);
-	return (b);
-}
-
-function readBitString(der, tag) {
-	if (tag === undefined)
-		tag = asn1.Ber.BitString;
-	var buf = der.readString(tag, true);
-	assert.strictEqual(buf[0], 0x00, 'bit strings with unused bits are ' +
-	    'not supported (0x' + buf[0].toString(16) + ')');
-	return (buf.slice(1));
-}
-
-function writeBitString(der, buf, tag) {
-	if (tag === undefined)
-		tag = asn1.Ber.BitString;
-	var b = Buffer.alloc(buf.length + 1);
-	b[0] = 0x00;
-	buf.copy(b, 1);
-	der.writeBuffer(b, tag);
-}
-
-function mpNormalize(buf) {
-	assert.buffer(buf);
-	while (buf.length > 1 && buf[0] === 0x00 && (buf[1] & 0x80) === 0x00)
-		buf = buf.slice(1);
-	if ((buf[0] & 0x80) === 0x80) {
-		var b = Buffer.alloc(buf.length + 1);
-		b[0] = 0x00;
-		buf.copy(b, 1);
-		buf = b;
-	}
-	return (buf);
-}
-
-function mpDenormalize(buf) {
-	assert.buffer(buf);
-	while (buf.length > 1 && buf[0] === 0x00)
-		buf = buf.slice(1);
-	return (buf);
-}
-
-function zeroPadToLength(buf, len) {
-	assert.buffer(buf);
-	assert.number(len);
-	while (buf.length > len) {
-		assert.equal(buf[0], 0x00);
-		buf = buf.slice(1);
-	}
-	while (buf.length < len) {
-		var b = Buffer.alloc(buf.length + 1);
-		b[0] = 0x00;
-		buf.copy(b, 1);
-		buf = b;
-	}
-	return (buf);
-}
-
-function bigintToMpBuf(bigint) {
-	var buf = Buffer.from(bigint.toByteArray());
-	buf = mpNormalize(buf);
-	return (buf);
-}
-
-function calculateDSAPublic(g, p, x) {
-	assert.buffer(g);
-	assert.buffer(p);
-	assert.buffer(x);
-	try {
-		var bigInt = __webpack_require__(81).BigInteger;
-	} catch (e) {
-		throw (new Error('To load a PKCS#8 format DSA private key, ' +
-		    'the node jsbn library is required.'));
-	}
-	g = new bigInt(g);
-	p = new bigInt(p);
-	x = new bigInt(x);
-	var y = g.modPow(x, p);
-	var ybuf = bigintToMpBuf(y);
-	return (ybuf);
-}
-
-function calculateED25519Public(k) {
-	assert.buffer(k);
-
-	if (nacl === undefined)
-		nacl = __webpack_require__(76);
-
-	var kp = nacl.sign.keyPair.fromSeed(new Uint8Array(k));
-	return (Buffer.from(kp.publicKey));
-}
-
-function calculateX25519Public(k) {
-	assert.buffer(k);
-
-	if (nacl === undefined)
-		nacl = __webpack_require__(76);
-
-	var kp = nacl.box.keyPair.fromSeed(new Uint8Array(k));
-	return (Buffer.from(kp.publicKey));
-}
-
-function addRSAMissing(key) {
-	assert.object(key);
-	assertCompatible(key, PrivateKey, [1, 1]);
-	try {
-		var bigInt = __webpack_require__(81).BigInteger;
-	} catch (e) {
-		throw (new Error('To write a PEM private key from ' +
-		    'this source, the node jsbn lib is required.'));
-	}
-
-	var d = new bigInt(key.part.d.data);
-	var buf;
-
-	if (!key.part.dmodp) {
-		var p = new bigInt(key.part.p.data);
-		var dmodp = d.mod(p.subtract(1));
-
-		buf = bigintToMpBuf(dmodp);
-		key.part.dmodp = {name: 'dmodp', data: buf};
-		key.parts.push(key.part.dmodp);
-	}
-	if (!key.part.dmodq) {
-		var q = new bigInt(key.part.q.data);
-		var dmodq = d.mod(q.subtract(1));
-
-		buf = bigintToMpBuf(dmodq);
-		key.part.dmodq = {name: 'dmodq', data: buf};
-		key.parts.push(key.part.dmodq);
-	}
-}
-
-function publicFromPrivateECDSA(curveName, priv) {
-	assert.string(curveName, 'curveName');
-	assert.buffer(priv);
-	if (ec === undefined)
-		ec = __webpack_require__(139);
-	if (jsbn === undefined)
-		jsbn = __webpack_require__(81).BigInteger;
-	var params = algs.curves[curveName];
-	var p = new jsbn(params.p);
-	var a = new jsbn(params.a);
-	var b = new jsbn(params.b);
-	var curve = new ec.ECCurveFp(p, a, b);
-	var G = curve.decodePointHex(params.G.toString('hex'));
-
-	var d = new jsbn(mpNormalize(priv));
-	var pub = G.multiply(d);
-	pub = Buffer.from(curve.encodePointHex(pub), 'hex');
-
-	var parts = [];
-	parts.push({name: 'curve', data: Buffer.from(curveName)});
-	parts.push({name: 'Q', data: pub});
-
-	var key = new Key({type: 'ecdsa', curve: curve, parts: parts});
-	return (key);
-}
-
-function opensshCipherInfo(cipher) {
-	var inf = {};
-	switch (cipher) {
-	case '3des-cbc':
-		inf.keySize = 24;
-		inf.blockSize = 8;
-		inf.opensslName = 'des-ede3-cbc';
-		break;
-	case 'blowfish-cbc':
-		inf.keySize = 16;
-		inf.blockSize = 8;
-		inf.opensslName = 'bf-cbc';
-		break;
-	case 'aes128-cbc':
-	case 'aes128-ctr':
-	case 'aes128-gcm@openssh.com':
-		inf.keySize = 16;
-		inf.blockSize = 16;
-		inf.opensslName = 'aes-128-' + cipher.slice(7, 10);
-		break;
-	case 'aes192-cbc':
-	case 'aes192-ctr':
-	case 'aes192-gcm@openssh.com':
-		inf.keySize = 24;
-		inf.blockSize = 16;
-		inf.opensslName = 'aes-192-' + cipher.slice(7, 10);
-		break;
-	case 'aes256-cbc':
-	case 'aes256-ctr':
-	case 'aes256-gcm@openssh.com':
-		inf.keySize = 32;
-		inf.blockSize = 16;
-		inf.opensslName = 'aes-256-' + cipher.slice(7, 10);
-		break;
-	default:
-		throw (new Error(
-		    'Unsupported openssl cipher "' + cipher + '"'));
-	}
-	return (inf);
-}
-
-
-/***/ }),
-/* 27 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = Key;
-
-var assert = __webpack_require__(16);
-var algs = __webpack_require__(32);
-var crypto = __webpack_require__(11);
-var Fingerprint = __webpack_require__(156);
-var Signature = __webpack_require__(75);
-var DiffieHellman = __webpack_require__(325).DiffieHellman;
-var errs = __webpack_require__(74);
-var utils = __webpack_require__(26);
-var PrivateKey = __webpack_require__(33);
-var edCompat;
-
-try {
-	edCompat = __webpack_require__(454);
-} catch (e) {
-	/* Just continue through, and bail out if we try to use it. */
-}
-
-var InvalidAlgorithmError = errs.InvalidAlgorithmError;
-var KeyParseError = errs.KeyParseError;
-
-var formats = {};
-formats['auto'] = __webpack_require__(455);
-formats['pem'] = __webpack_require__(86);
-formats['pkcs1'] = __webpack_require__(327);
-formats['pkcs8'] = __webpack_require__(157);
-formats['rfc4253'] = __webpack_require__(103);
-formats['ssh'] = __webpack_require__(456);
-formats['ssh-private'] = __webpack_require__(192);
-formats['openssh'] = formats['ssh-private'];
-formats['dnssec'] = __webpack_require__(326);
-
-function Key(opts) {
-	assert.object(opts, 'options');
-	assert.arrayOfObject(opts.parts, 'options.parts');
-	assert.string(opts.type, 'options.type');
-	assert.optionalString(opts.comment, 'options.comment');
-
-	var algInfo = algs.info[opts.type];
-	if (typeof (algInfo) !== 'object')
-		throw (new InvalidAlgorithmError(opts.type));
-
-	var partLookup = {};
-	for (var i = 0; i < opts.parts.length; ++i) {
-		var part = opts.parts[i];
-		partLookup[part.name] = part;
-	}
-
-	this.type = opts.type;
-	this.parts = opts.parts;
-	this.part = partLookup;
-	this.comment = undefined;
-	this.source = opts.source;
-
-	/* for speeding up hashing/fingerprint operations */
-	this._rfc4253Cache = opts._rfc4253Cache;
-	this._hashCache = {};
-
-	var sz;
-	this.curve = undefined;
-	if (this.type === 'ecdsa') {
-		var curve = this.part.curve.data.toString();
-		this.curve = curve;
-		sz = algs.curves[curve].size;
-	} else if (this.type === 'ed25519' || this.type === 'curve25519') {
-		sz = 256;
-		this.curve = 'curve25519';
-	} else {
-		var szPart = this.part[algInfo.sizePart];
-		sz = szPart.data.length;
-		sz = sz * 8 - utils.countZeros(szPart.data);
-	}
-	this.size = sz;
-}
-
-Key.formats = formats;
-
-Key.prototype.toBuffer = function (format, options) {
-	if (format === undefined)
-		format = 'ssh';
-	assert.string(format, 'format');
-	assert.object(formats[format], 'formats[format]');
-	assert.optionalObject(options, 'options');
-
-	if (format === 'rfc4253') {
-		if (this._rfc4253Cache === undefined)
-			this._rfc4253Cache = formats['rfc4253'].write(this);
-		return (this._rfc4253Cache);
-	}
-
-	return (formats[format].write(this, options));
-};
-
-Key.prototype.toString = function (format, options) {
-	return (this.toBuffer(format, options).toString());
-};
-
-Key.prototype.hash = function (algo) {
-	assert.string(algo, 'algorithm');
-	algo = algo.toLowerCase();
-	if (algs.hashAlgs[algo] === undefined)
-		throw (new InvalidAlgorithmError(algo));
-
-	if (this._hashCache[algo])
-		return (this._hashCache[algo]);
-	var hash = crypto.createHash(algo).
-	    update(this.toBuffer('rfc4253')).digest();
-	this._hashCache[algo] = hash;
-	return (hash);
-};
-
-Key.prototype.fingerprint = function (algo) {
-	if (algo === undefined)
-		algo = 'sha256';
-	assert.string(algo, 'algorithm');
-	var opts = {
-		type: 'key',
-		hash: this.hash(algo),
-		algorithm: algo
-	};
-	return (new Fingerprint(opts));
-};
-
-Key.prototype.defaultHashAlgorithm = function () {
-	var hashAlgo = 'sha1';
-	if (this.type === 'rsa')
-		hashAlgo = 'sha256';
-	if (this.type === 'dsa' && this.size > 1024)
-		hashAlgo = 'sha256';
-	if (this.type === 'ed25519')
-		hashAlgo = 'sha512';
-	if (this.type === 'ecdsa') {
-		if (this.size <= 256)
-			hashAlgo = 'sha256';
-		else if (this.size <= 384)
-			hashAlgo = 'sha384';
-		else
-			hashAlgo = 'sha512';
-	}
-	return (hashAlgo);
-};
-
-Key.prototype.createVerify = function (hashAlgo) {
-	if (hashAlgo === undefined)
-		hashAlgo = this.defaultHashAlgorithm();
-	assert.string(hashAlgo, 'hash algorithm');
-
-	/* ED25519 is not supported by OpenSSL, use a javascript impl. */
-	if (this.type === 'ed25519' && edCompat !== undefined)
-		return (new edCompat.Verifier(this, hashAlgo));
-	if (this.type === 'curve25519')
-		throw (new Error('Curve25519 keys are not suitable for ' +
-		    'signing or verification'));
-
-	var v, nm, err;
-	try {
-		nm = hashAlgo.toUpperCase();
-		v = crypto.createVerify(nm);
-	} catch (e) {
-		err = e;
-	}
-	if (v === undefined || (err instanceof Error &&
-	    err.message.match(/Unknown message digest/))) {
-		nm = 'RSA-';
-		nm += hashAlgo.toUpperCase();
-		v = crypto.createVerify(nm);
-	}
-	assert.ok(v, 'failed to create verifier');
-	var oldVerify = v.verify.bind(v);
-	var key = this.toBuffer('pkcs8');
-	var curve = this.curve;
-	var self = this;
-	v.verify = function (signature, fmt) {
-		if (Signature.isSignature(signature, [2, 0])) {
-			if (signature.type !== self.type)
-				return (false);
-			if (signature.hashAlgorithm &&
-			    signature.hashAlgorithm !== hashAlgo)
-				return (false);
-			if (signature.curve && self.type === 'ecdsa' &&
-			    signature.curve !== curve)
-				return (false);
-			return (oldVerify(key, signature.toBuffer('asn1')));
-
-		} else if (typeof (signature) === 'string' ||
-		    Buffer.isBuffer(signature)) {
-			return (oldVerify(key, signature, fmt));
-
-		/*
-		 * Avoid doing this on valid arguments, walking the prototype
-		 * chain can be quite slow.
-		 */
-		} else if (Signature.isSignature(signature, [1, 0])) {
-			throw (new Error('signature was created by too old ' +
-			    'a version of sshpk and cannot be verified'));
-
-		} else {
-			throw (new TypeError('signature must be a string, ' +
-			    'Buffer, or Signature object'));
-		}
-	};
-	return (v);
-};
-
-Key.prototype.createDiffieHellman = function () {
-	if (this.type === 'rsa')
-		throw (new Error('RSA keys do not support Diffie-Hellman'));
-
-	return (new DiffieHellman(this));
-};
-Key.prototype.createDH = Key.prototype.createDiffieHellman;
-
-Key.parse = function (data, format, options) {
-	if (typeof (data) !== 'string')
-		assert.buffer(data, 'data');
-	if (format === undefined)
-		format = 'auto';
-	assert.string(format, 'format');
-	if (typeof (options) === 'string')
-		options = { filename: options };
-	assert.optionalObject(options, 'options');
-	if (options === undefined)
-		options = {};
-	assert.optionalString(options.filename, 'options.filename');
-	if (options.filename === undefined)
-		options.filename = '(unnamed)';
-
-	assert.object(formats[format], 'formats[format]');
-
-	try {
-		var k = formats[format].read(data, options);
-		if (k instanceof PrivateKey)
-			k = k.toPublic();
-		if (!k.comment)
-			k.comment = options.filename;
-		return (k);
-	} catch (e) {
-		if (e.name === 'KeyEncryptedError')
-			throw (e);
-		throw (new KeyParseError(options.filename, format, e));
-	}
-};
-
-Key.isKey = function (obj, ver) {
-	return (utils.isCompatible(obj, Key, ver));
-};
-
-/*
- * API versions for Key:
- * [1,0] -- initial ver, may take Signature for createVerify or may not
- * [1,1] -- added pkcs1, pkcs8 formats
- * [1,2] -- added auto, ssh-private, openssh formats
- * [1,3] -- added defaultHashAlgorithm
- * [1,4] -- added ed support, createDH
- * [1,5] -- first explicitly tagged version
- * [1,6] -- changed ed25519 part names
- */
-Key.prototype._sshpkApiVersion = [1, 6];
-
-Key._oldVersionDetect = function (obj) {
-	assert.func(obj.toBuffer);
-	assert.func(obj.fingerprint);
-	if (obj.createDH)
-		return ([1, 4]);
-	if (obj.defaultHashAlgorithm)
-		return ([1, 3]);
-	if (obj.formats['auto'])
-		return ([1, 2]);
-	if (obj.formats['pkcs1'])
-		return ([1, 1]);
-	return ([1, 0]);
-};
-
-
-/***/ }),
-/* 28 */
-/***/ (function(module, exports) {
-
-module.exports = require("assert");
-
-/***/ }),
-/* 29 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = nullify;
-function nullify(obj = {}) {
-  if (Array.isArray(obj)) {
-    for (var _iterator = obj, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const item = _ref;
-
-      nullify(item);
-    }
-  } else if (obj !== null && typeof obj === 'object' || typeof obj === 'function') {
-    Object.setPrototypeOf(obj, null);
-
-    // for..in can only be applied to 'object', not 'function'
-    if (typeof obj === 'object') {
-      for (const key in obj) {
-        nullify(obj[key]);
-      }
-    }
-  }
-
-  return obj;
-}
-
-/***/ }),
-/* 30 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const escapeStringRegexp = __webpack_require__(388);
-const ansiStyles = __webpack_require__(506);
-const stdoutColor = __webpack_require__(598).stdout;
-
-const template = __webpack_require__(599);
-
-const isSimpleWindowsTerm = process.platform === 'win32' && !(process.env.TERM || '').toLowerCase().startsWith('xterm');
-
-// `supportsColor.level` → `ansiStyles.color[name]` mapping
-const levelMapping = ['ansi', 'ansi', 'ansi256', 'ansi16m'];
-
-// `color-convert` models to exclude from the Chalk API due to conflicts and such
-const skipModels = new Set(['gray']);
-
-const styles = Object.create(null);
-
-function applyOptions(obj, options) {
-	options = options || {};
-
-	// Detect level if not set manually
-	const scLevel = stdoutColor ? stdoutColor.level : 0;
-	obj.level = options.level === undefined ? scLevel : options.level;
-	obj.enabled = 'enabled' in options ? options.enabled : obj.level > 0;
-}
-
-function Chalk(options) {
-	// We check for this.template here since calling `chalk.constructor()`
-	// by itself will have a `this` of a previously constructed chalk object
-	if (!this || !(this instanceof Chalk) || this.template) {
-		const chalk = {};
-		applyOptions(chalk, options);
-
-		chalk.template = function () {
-			const args = [].slice.call(arguments);
-			return chalkTag.apply(null, [chalk.template].concat(args));
-		};
-
-		Object.setPrototypeOf(chalk, Chalk.prototype);
-		Object.setPrototypeOf(chalk.template, chalk);
-
-		chalk.template.constructor = Chalk;
-
-		return chalk.template;
-	}
-
-	applyOptions(this, options);
-}
-
-// Use bright blue on Windows as the normal blue color is illegible
-if (isSimpleWindowsTerm) {
-	ansiStyles.blue.open = '\u001B[94m';
-}
-
-for (const key of Object.keys(ansiStyles)) {
-	ansiStyles[key].closeRe = new RegExp(escapeStringRegexp(ansiStyles[key].close), 'g');
-
-	styles[key] = {
-		get() {
-			const codes = ansiStyles[key];
-			return build.call(this, this._styles ? this._styles.concat(codes) : [codes], this._empty, key);
-		}
-	};
-}
-
-styles.visible = {
-	get() {
-		return build.call(this, this._styles || [], true, 'visible');
-	}
-};
-
-ansiStyles.color.closeRe = new RegExp(escapeStringRegexp(ansiStyles.color.close), 'g');
-for (const model of Object.keys(ansiStyles.color.ansi)) {
-	if (skipModels.has(model)) {
-		continue;
-	}
-
-	styles[model] = {
-		get() {
-			const level = this.level;
-			return function () {
-				const open = ansiStyles.color[levelMapping[level]][model].apply(null, arguments);
-				const codes = {
-					open,
-					close: ansiStyles.color.close,
-					closeRe: ansiStyles.color.closeRe
-				};
-				return build.call(this, this._styles ? this._styles.concat(codes) : [codes], this._empty, model);
-			};
-		}
-	};
-}
-
-ansiStyles.bgColor.closeRe = new RegExp(escapeStringRegexp(ansiStyles.bgColor.close), 'g');
-for (const model of Object.keys(ansiStyles.bgColor.ansi)) {
-	if (skipModels.has(model)) {
-		continue;
-	}
-
-	const bgModel = 'bg' + model[0].toUpperCase() + model.slice(1);
-	styles[bgModel] = {
-		get() {
-			const level = this.level;
-			return function () {
-				const open = ansiStyles.bgColor[levelMapping[level]][model].apply(null, arguments);
-				const codes = {
-					open,
-					close: ansiStyles.bgColor.close,
-					closeRe: ansiStyles.bgColor.closeRe
-				};
-				return build.call(this, this._styles ? this._styles.concat(codes) : [codes], this._empty, model);
-			};
-		}
-	};
-}
-
-const proto = Object.defineProperties(() => {}, styles);
-
-function build(_styles, _empty, key) {
-	const builder = function () {
-		return applyStyle.apply(builder, arguments);
-	};
-
-	builder._styles = _styles;
-	builder._empty = _empty;
-
-	const self = this;
-
-	Object.defineProperty(builder, 'level', {
-		enumerable: true,
-		get() {
-			return self.level;
-		},
-		set(level) {
-			self.level = level;
-		}
-	});
-
-	Object.defineProperty(builder, 'enabled', {
-		enumerable: true,
-		get() {
-			return self.enabled;
-		},
-		set(enabled) {
-			self.enabled = enabled;
-		}
-	});
-
-	// See below for fix regarding invisible grey/dim combination on Windows
-	builder.hasGrey = this.hasGrey || key === 'gray' || key === 'grey';
-
-	// `__proto__` is used because we must return a function, but there is
-	// no way to create a function with a different prototype
-	builder.__proto__ = proto; // eslint-disable-line no-proto
-
-	return builder;
-}
-
-function applyStyle() {
-	// Support varags, but simply cast to string in case there's only one arg
-	const args = arguments;
-	const argsLen = args.length;
-	let str = String(arguments[0]);
-
-	if (argsLen === 0) {
-		return '';
-	}
-
-	if (argsLen > 1) {
-		// Don't slice `arguments`, it prevents V8 optimizations
-		for (let a = 1; a < argsLen; a++) {
-			str += ' ' + args[a];
-		}
-	}
-
-	if (!this.enabled || this.level <= 0 || !str) {
-		return this._empty ? '' : str;
-	}
-
-	// Turns out that on Windows dimmed gray text becomes invisible in cmd.exe,
-	// see https://github.com/chalk/chalk/issues/58
-	// If we're on Windows and we're dealing with a gray color, temporarily make 'dim' a noop.
-	const originalDim = ansiStyles.dim.open;
-	if (isSimpleWindowsTerm && this.hasGrey) {
-		ansiStyles.dim.open = '';
-	}
-
-	for (const code of this._styles.slice().reverse()) {
-		// Replace any instances already present with a re-opening code
-		// otherwise only the part of the string until said closing code
-		// will be colored, and the rest will simply be 'plain'.
-		str = code.open + str.replace(code.closeRe, code.open) + code.close;
-
-		// Close the styling before a linebreak and reopen
-		// after next line to fix a bleed issue on macOS
-		// https://github.com/chalk/chalk/pull/92
-		str = str.replace(/\r?\n/g, `${code.close}$&${code.open}`);
-	}
-
-	// Reset the original `dim` if we changed it to work around the Windows dimmed gray issue
-	ansiStyles.dim.open = originalDim;
-
-	return str;
-}
-
-function chalkTag(chalk, strings) {
-	if (!Array.isArray(strings)) {
-		// If chalk() was called by itself or with a string,
-		// return the string itself as a string.
-		return [].slice.call(arguments, 1).join(' ');
-	}
-
-	const args = [].slice.call(arguments, 2);
-	const parts = [strings.raw[0]];
-
-	for (let i = 1; i < strings.length; i++) {
-		parts.push(String(args[i - 1]).replace(/[{}\\]/g, '\\$&'));
-		parts.push(String(strings.raw[i]));
-	}
-
-	return template(chalk, parts.join(''));
-}
-
-Object.defineProperties(Chalk.prototype, styles);
-
-module.exports = Chalk(); // eslint-disable-line new-cap
-module.exports.supportsColor = stdoutColor;
-module.exports.default = module.exports; // For TypeScript
-
-
-/***/ }),
-/* 31 */
-/***/ (function(module, exports) {
-
-var core = module.exports = { version: '2.5.7' };
-if (typeof __e == 'number') __e = core; // eslint-disable-line no-undef
-
-
-/***/ }),
-/* 32 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-var Buffer = __webpack_require__(15).Buffer;
-
-var algInfo = {
-	'dsa': {
-		parts: ['p', 'q', 'g', 'y'],
-		sizePart: 'p'
-	},
-	'rsa': {
-		parts: ['e', 'n'],
-		sizePart: 'n'
-	},
-	'ecdsa': {
-		parts: ['curve', 'Q'],
-		sizePart: 'Q'
-	},
-	'ed25519': {
-		parts: ['A'],
-		sizePart: 'A'
-	}
-};
-algInfo['curve25519'] = algInfo['ed25519'];
-
-var algPrivInfo = {
-	'dsa': {
-		parts: ['p', 'q', 'g', 'y', 'x']
-	},
-	'rsa': {
-		parts: ['n', 'e', 'd', 'iqmp', 'p', 'q']
-	},
-	'ecdsa': {
-		parts: ['curve', 'Q', 'd']
-	},
-	'ed25519': {
-		parts: ['A', 'k']
-	}
-};
-algPrivInfo['curve25519'] = algPrivInfo['ed25519'];
-
-var hashAlgs = {
-	'md5': true,
-	'sha1': true,
-	'sha256': true,
-	'sha384': true,
-	'sha512': true
-};
-
-/*
- * Taken from
- * http://csrc.nist.gov/groups/ST/toolkit/documents/dss/NISTReCur.pdf
- */
-var curves = {
-	'nistp256': {
-		size: 256,
-		pkcs8oid: '1.2.840.10045.3.1.7',
-		p: Buffer.from(('00' +
-		    'ffffffff 00000001 00000000 00000000' +
-		    '00000000 ffffffff ffffffff ffffffff').
-		    replace(/ /g, ''), 'hex'),
-		a: Buffer.from(('00' +
-		    'FFFFFFFF 00000001 00000000 00000000' +
-		    '00000000 FFFFFFFF FFFFFFFF FFFFFFFC').
-		    replace(/ /g, ''), 'hex'),
-		b: Buffer.from((
-		    '5ac635d8 aa3a93e7 b3ebbd55 769886bc' +
-		    '651d06b0 cc53b0f6 3bce3c3e 27d2604b').
-		    replace(/ /g, ''), 'hex'),
-		s: Buffer.from(('00' +
-		    'c49d3608 86e70493 6a6678e1 139d26b7' +
-		    '819f7e90').
-		    replace(/ /g, ''), 'hex'),
-		n: Buffer.from(('00' +
-		    'ffffffff 00000000 ffffffff ffffffff' +
-		    'bce6faad a7179e84 f3b9cac2 fc632551').
-		    replace(/ /g, ''), 'hex'),
-		G: Buffer.from(('04' +
-		    '6b17d1f2 e12c4247 f8bce6e5 63a440f2' +
-		    '77037d81 2deb33a0 f4a13945 d898c296' +
-		    '4fe342e2 fe1a7f9b 8ee7eb4a 7c0f9e16' +
-		    '2bce3357 6b315ece cbb64068 37bf51f5').
-		    replace(/ /g, ''), 'hex')
-	},
-	'nistp384': {
-		size: 384,
-		pkcs8oid: '1.3.132.0.34',
-		p: Buffer.from(('00' +
-		    'ffffffff ffffffff ffffffff ffffffff' +
-		    'ffffffff ffffffff ffffffff fffffffe' +
-		    'ffffffff 00000000 00000000 ffffffff').
-		    replace(/ /g, ''), 'hex'),
-		a: Buffer.from(('00' +
-		    'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' +
-		    'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFE' +
-		    'FFFFFFFF 00000000 00000000 FFFFFFFC').
-		    replace(/ /g, ''), 'hex'),
-		b: Buffer.from((
-		    'b3312fa7 e23ee7e4 988e056b e3f82d19' +
-		    '181d9c6e fe814112 0314088f 5013875a' +
-		    'c656398d 8a2ed19d 2a85c8ed d3ec2aef').
-		    replace(/ /g, ''), 'hex'),
-		s: Buffer.from(('00' +
-		    'a335926a a319a27a 1d00896a 6773a482' +
-		    '7acdac73').
-		    replace(/ /g, ''), 'hex'),
-		n: Buffer.from(('00' +
-		    'ffffffff ffffffff ffffffff ffffffff' +
-		    'ffffffff ffffffff c7634d81 f4372ddf' +
-		    '581a0db2 48b0a77a ecec196a ccc52973').
-		    replace(/ /g, ''), 'hex'),
-		G: Buffer.from(('04' +
-		    'aa87ca22 be8b0537 8eb1c71e f320ad74' +
-		    '6e1d3b62 8ba79b98 59f741e0 82542a38' +
-		    '5502f25d bf55296c 3a545e38 72760ab7' +
-		    '3617de4a 96262c6f 5d9e98bf 9292dc29' +
-		    'f8f41dbd 289a147c e9da3113 b5f0b8c0' +
-		    '0a60b1ce 1d7e819d 7a431d7c 90ea0e5f').
-		    replace(/ /g, ''), 'hex')
-	},
-	'nistp521': {
-		size: 521,
-		pkcs8oid: '1.3.132.0.35',
-		p: Buffer.from((
-		    '01ffffff ffffffff ffffffff ffffffff' +
-		    'ffffffff ffffffff ffffffff ffffffff' +
-		    'ffffffff ffffffff ffffffff ffffffff' +
-		    'ffffffff ffffffff ffffffff ffffffff' +
-		    'ffff').replace(/ /g, ''), 'hex'),
-		a: Buffer.from(('01FF' +
-		    'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' +
-		    'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' +
-		    'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFF' +
-		    'FFFFFFFF FFFFFFFF FFFFFFFF FFFFFFFC').
-		    replace(/ /g, ''), 'hex'),
-		b: Buffer.from(('51' +
-		    '953eb961 8e1c9a1f 929a21a0 b68540ee' +
-		    'a2da725b 99b315f3 b8b48991 8ef109e1' +
-		    '56193951 ec7e937b 1652c0bd 3bb1bf07' +
-		    '3573df88 3d2c34f1 ef451fd4 6b503f00').
-		    replace(/ /g, ''), 'hex'),
-		s: Buffer.from(('00' +
-		    'd09e8800 291cb853 96cc6717 393284aa' +
-		    'a0da64ba').replace(/ /g, ''), 'hex'),
-		n: Buffer.from(('01ff' +
-		    'ffffffff ffffffff ffffffff ffffffff' +
-		    'ffffffff ffffffff ffffffff fffffffa' +
-		    '51868783 bf2f966b 7fcc0148 f709a5d0' +
-		    '3bb5c9b8 899c47ae bb6fb71e 91386409').
-		    replace(/ /g, ''), 'hex'),
-		G: Buffer.from(('04' +
-		    '00c6 858e06b7 0404e9cd 9e3ecb66 2395b442' +
-		         '9c648139 053fb521 f828af60 6b4d3dba' +
-		         'a14b5e77 efe75928 fe1dc127 a2ffa8de' +
-		         '3348b3c1 856a429b f97e7e31 c2e5bd66' +
-		    '0118 39296a78 9a3bc004 5c8a5fb4 2c7d1bd9' +
-		         '98f54449 579b4468 17afbd17 273e662c' +
-		         '97ee7299 5ef42640 c550b901 3fad0761' +
-		         '353c7086 a272c240 88be9476 9fd16650').
-		    replace(/ /g, ''), 'hex')
-	}
-};
-
-module.exports = {
-	info: algInfo,
-	privInfo: algPrivInfo,
-	hashAlgs: hashAlgs,
-	curves: curves
-};
-
-
-/***/ }),
-/* 33 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = PrivateKey;
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var crypto = __webpack_require__(11);
-var Fingerprint = __webpack_require__(156);
-var Signature = __webpack_require__(75);
-var errs = __webpack_require__(74);
-var util = __webpack_require__(3);
-var utils = __webpack_require__(26);
-var dhe = __webpack_require__(325);
-var generateECDSA = dhe.generateECDSA;
-var generateED25519 = dhe.generateED25519;
-var edCompat;
-var nacl;
-
-try {
-	edCompat = __webpack_require__(454);
-} catch (e) {
-	/* Just continue through, and bail out if we try to use it. */
-}
-
-var Key = __webpack_require__(27);
-
-var InvalidAlgorithmError = errs.InvalidAlgorithmError;
-var KeyParseError = errs.KeyParseError;
-var KeyEncryptedError = errs.KeyEncryptedError;
-
-var formats = {};
-formats['auto'] = __webpack_require__(455);
-formats['pem'] = __webpack_require__(86);
-formats['pkcs1'] = __webpack_require__(327);
-formats['pkcs8'] = __webpack_require__(157);
-formats['rfc4253'] = __webpack_require__(103);
-formats['ssh-private'] = __webpack_require__(192);
-formats['openssh'] = formats['ssh-private'];
-formats['ssh'] = formats['ssh-private'];
-formats['dnssec'] = __webpack_require__(326);
-
-function PrivateKey(opts) {
-	assert.object(opts, 'options');
-	Key.call(this, opts);
-
-	this._pubCache = undefined;
-}
-util.inherits(PrivateKey, Key);
-
-PrivateKey.formats = formats;
-
-PrivateKey.prototype.toBuffer = function (format, options) {
-	if (format === undefined)
-		format = 'pkcs1';
-	assert.string(format, 'format');
-	assert.object(formats[format], 'formats[format]');
-	assert.optionalObject(options, 'options');
-
-	return (formats[format].write(this, options));
-};
-
-PrivateKey.prototype.hash = function (algo) {
-	return (this.toPublic().hash(algo));
-};
-
-PrivateKey.prototype.toPublic = function () {
-	if (this._pubCache)
-		return (this._pubCache);
-
-	var algInfo = algs.info[this.type];
-	var pubParts = [];
-	for (var i = 0; i < algInfo.parts.length; ++i) {
-		var p = algInfo.parts[i];
-		pubParts.push(this.part[p]);
-	}
-
-	this._pubCache = new Key({
-		type: this.type,
-		source: this,
-		parts: pubParts
-	});
-	if (this.comment)
-		this._pubCache.comment = this.comment;
-	return (this._pubCache);
-};
-
-PrivateKey.prototype.derive = function (newType) {
-	assert.string(newType, 'type');
-	var priv, pub, pair;
-
-	if (this.type === 'ed25519' && newType === 'curve25519') {
-		if (nacl === undefined)
-			nacl = __webpack_require__(76);
-
-		priv = this.part.k.data;
-		if (priv[0] === 0x00)
-			priv = priv.slice(1);
-
-		pair = nacl.box.keyPair.fromSecretKey(new Uint8Array(priv));
-		pub = Buffer.from(pair.publicKey);
-
-		return (new PrivateKey({
-			type: 'curve25519',
-			parts: [
-				{ name: 'A', data: utils.mpNormalize(pub) },
-				{ name: 'k', data: utils.mpNormalize(priv) }
-			]
-		}));
-	} else if (this.type === 'curve25519' && newType === 'ed25519') {
-		if (nacl === undefined)
-			nacl = __webpack_require__(76);
-
-		priv = this.part.k.data;
-		if (priv[0] === 0x00)
-			priv = priv.slice(1);
-
-		pair = nacl.sign.keyPair.fromSeed(new Uint8Array(priv));
-		pub = Buffer.from(pair.publicKey);
-
-		return (new PrivateKey({
-			type: 'ed25519',
-			parts: [
-				{ name: 'A', data: utils.mpNormalize(pub) },
-				{ name: 'k', data: utils.mpNormalize(priv) }
-			]
-		}));
-	}
-	throw (new Error('Key derivation not supported from ' + this.type +
-	    ' to ' + newType));
-};
-
-PrivateKey.prototype.createVerify = function (hashAlgo) {
-	return (this.toPublic().createVerify(hashAlgo));
-};
-
-PrivateKey.prototype.createSign = function (hashAlgo) {
-	if (hashAlgo === undefined)
-		hashAlgo = this.defaultHashAlgorithm();
-	assert.string(hashAlgo, 'hash algorithm');
-
-	/* ED25519 is not supported by OpenSSL, use a javascript impl. */
-	if (this.type === 'ed25519' && edCompat !== undefined)
-		return (new edCompat.Signer(this, hashAlgo));
-	if (this.type === 'curve25519')
-		throw (new Error('Curve25519 keys are not suitable for ' +
-		    'signing or verification'));
-
-	var v, nm, err;
-	try {
-		nm = hashAlgo.toUpperCase();
-		v = crypto.createSign(nm);
-	} catch (e) {
-		err = e;
-	}
-	if (v === undefined || (err instanceof Error &&
-	    err.message.match(/Unknown message digest/))) {
-		nm = 'RSA-';
-		nm += hashAlgo.toUpperCase();
-		v = crypto.createSign(nm);
-	}
-	assert.ok(v, 'failed to create verifier');
-	var oldSign = v.sign.bind(v);
-	var key = this.toBuffer('pkcs1');
-	var type = this.type;
-	var curve = this.curve;
-	v.sign = function () {
-		var sig = oldSign(key);
-		if (typeof (sig) === 'string')
-			sig = Buffer.from(sig, 'binary');
-		sig = Signature.parse(sig, type, 'asn1');
-		sig.hashAlgorithm = hashAlgo;
-		sig.curve = curve;
-		return (sig);
-	};
-	return (v);
-};
-
-PrivateKey.parse = function (data, format, options) {
-	if (typeof (data) !== 'string')
-		assert.buffer(data, 'data');
-	if (format === undefined)
-		format = 'auto';
-	assert.string(format, 'format');
-	if (typeof (options) === 'string')
-		options = { filename: options };
-	assert.optionalObject(options, 'options');
-	if (options === undefined)
-		options = {};
-	assert.optionalString(options.filename, 'options.filename');
-	if (options.filename === undefined)
-		options.filename = '(unnamed)';
-
-	assert.object(formats[format], 'formats[format]');
-
-	try {
-		var k = formats[format].read(data, options);
-		assert.ok(k instanceof PrivateKey, 'key is not a private key');
-		if (!k.comment)
-			k.comment = options.filename;
-		return (k);
-	} catch (e) {
-		if (e.name === 'KeyEncryptedError')
-			throw (e);
-		throw (new KeyParseError(options.filename, format, e));
-	}
-};
-
-PrivateKey.isPrivateKey = function (obj, ver) {
-	return (utils.isCompatible(obj, PrivateKey, ver));
-};
-
-PrivateKey.generate = function (type, options) {
-	if (options === undefined)
-		options = {};
-	assert.object(options, 'options');
-
-	switch (type) {
-	case 'ecdsa':
-		if (options.curve === undefined)
-			options.curve = 'nistp256';
-		assert.string(options.curve, 'options.curve');
-		return (generateECDSA(options.curve));
-	case 'ed25519':
-		return (generateED25519());
-	default:
-		throw (new Error('Key generation not supported with key ' +
-		    'type "' + type + '"'));
-	}
-};
-
-/*
- * API versions for PrivateKey:
- * [1,0] -- initial ver
- * [1,1] -- added auto, pkcs[18], openssh/ssh-private formats
- * [1,2] -- added defaultHashAlgorithm
- * [1,3] -- added derive, ed, createDH
- * [1,4] -- first tagged version
- * [1,5] -- changed ed25519 part names and format
- */
-PrivateKey.prototype._sshpkApiVersion = [1, 5];
-
-PrivateKey._oldVersionDetect = function (obj) {
-	assert.func(obj.toPublic);
-	assert.func(obj.createSign);
-	if (obj.derive)
-		return ([1, 3]);
-	if (obj.defaultHashAlgorithm)
-		return ([1, 2]);
-	if (obj.formats['auto'])
-		return ([1, 1]);
-	return ([1, 0]);
-};
-
-
-/***/ }),
-/* 34 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.wrapLifecycle = exports.run = exports.install = exports.Install = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let install = exports.install = (() => {
-  var _ref29 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, lockfile) {
-    yield wrapLifecycle(config, flags, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const install = new Install(flags, config, reporter, lockfile);
-      yield install.init();
-    }));
-  });
-
-  return function install(_x7, _x8, _x9, _x10) {
-    return _ref29.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref31 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    let lockfile;
-    let error = 'installCommandRenamed';
-    if (flags.lockfile === false) {
-      lockfile = new (_lockfile || _load_lockfile()).default();
-    } else {
-      lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-    }
-
-    if (args.length) {
-      const exampleArgs = args.slice();
-
-      if (flags.saveDev) {
-        exampleArgs.push('--dev');
-      }
-      if (flags.savePeer) {
-        exampleArgs.push('--peer');
-      }
-      if (flags.saveOptional) {
-        exampleArgs.push('--optional');
-      }
-      if (flags.saveExact) {
-        exampleArgs.push('--exact');
-      }
-      if (flags.saveTilde) {
-        exampleArgs.push('--tilde');
-      }
-      let command = 'add';
-      if (flags.global) {
-        error = 'globalFlagRemoved';
-        command = 'global add';
-      }
-      throw new (_errors || _load_errors()).MessageError(reporter.lang(error, `yarn ${command} ${exampleArgs.join(' ')}`));
-    }
-
-    yield install(config, reporter, flags, lockfile);
-  });
-
-  return function run(_x11, _x12, _x13, _x14) {
-    return _ref31.apply(this, arguments);
-  };
-})();
-
-let wrapLifecycle = exports.wrapLifecycle = (() => {
-  var _ref32 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, flags, factory) {
-    yield config.executeLifecycleScript('preinstall');
-
-    yield factory();
-
-    // npm behaviour, seems kinda funky but yay compatibility
-    yield config.executeLifecycleScript('install');
-    yield config.executeLifecycleScript('postinstall');
-
-    if (!config.production) {
-      if (!config.disablePrepublish) {
-        yield config.executeLifecycleScript('prepublish');
-      }
-      yield config.executeLifecycleScript('prepare');
-    }
-  });
-
-  return function wrapLifecycle(_x15, _x16, _x17) {
-    return _ref32.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _objectPath;
-
-function _load_objectPath() {
-  return _objectPath = _interopRequireDefault(__webpack_require__(304));
-}
-
-var _hooks;
-
-function _load_hooks() {
-  return _hooks = __webpack_require__(374);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = _interopRequireDefault(__webpack_require__(220));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _integrityChecker;
-
-function _load_integrityChecker() {
-  return _integrityChecker = _interopRequireDefault(__webpack_require__(208));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _lockfile2;
-
-function _load_lockfile2() {
-  return _lockfile2 = __webpack_require__(19);
-}
-
-var _packageFetcher;
-
-function _load_packageFetcher() {
-  return _packageFetcher = _interopRequireWildcard(__webpack_require__(210));
-}
-
-var _packageInstallScripts;
-
-function _load_packageInstallScripts() {
-  return _packageInstallScripts = _interopRequireDefault(__webpack_require__(557));
-}
-
-var _packageCompatibility;
-
-function _load_packageCompatibility() {
-  return _packageCompatibility = _interopRequireWildcard(__webpack_require__(209));
-}
-
-var _packageResolver;
-
-function _load_packageResolver() {
-  return _packageResolver = _interopRequireDefault(__webpack_require__(366));
-}
-
-var _packageLinker;
-
-function _load_packageLinker() {
-  return _packageLinker = _interopRequireDefault(__webpack_require__(211));
-}
-
-var _index2;
-
-function _load_index2() {
-  return _index2 = __webpack_require__(57);
-}
-
-var _index3;
-
-function _load_index3() {
-  return _index3 = __webpack_require__(78);
-}
-
-var _autoclean;
-
-function _load_autoclean() {
-  return _autoclean = __webpack_require__(354);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _normalizePattern;
-
-function _load_normalizePattern() {
-  return _normalizePattern = __webpack_require__(37);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _yarnVersion;
-
-function _load_yarnVersion() {
-  return _yarnVersion = __webpack_require__(120);
-}
-
-var _generatePnpMap;
-
-function _load_generatePnpMap() {
-  return _generatePnpMap = __webpack_require__(579);
-}
-
-var _workspaceLayout;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout = _interopRequireDefault(__webpack_require__(90));
-}
-
-var _resolutionMap;
-
-function _load_resolutionMap() {
-  return _resolutionMap = _interopRequireDefault(__webpack_require__(214));
-}
-
-var _guessName;
-
-function _load_guessName() {
-  return _guessName = _interopRequireDefault(__webpack_require__(169));
-}
-
-var _audit;
-
-function _load_audit() {
-  return _audit = _interopRequireDefault(__webpack_require__(353));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const deepEqual = __webpack_require__(631);
-
-const emoji = __webpack_require__(302);
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-const semver = __webpack_require__(22);
-const uuid = __webpack_require__(119);
-const ssri = __webpack_require__(65);
-
-const ONE_DAY = 1000 * 60 * 60 * 24;
-
-/**
- * Try and detect the installation method for Yarn and provide a command to update it with.
- */
-
-function getUpdateCommand(installationMethod) {
-  if (installationMethod === 'tar') {
-    return `curl --compressed -o- -L ${(_constants || _load_constants()).YARN_INSTALLER_SH} | bash`;
-  }
-
-  if (installationMethod === 'homebrew') {
-    return 'brew upgrade yarn';
-  }
-
-  if (installationMethod === 'deb') {
-    return 'sudo apt-get update && sudo apt-get install yarn';
-  }
-
-  if (installationMethod === 'rpm') {
-    return 'sudo yum install yarn';
-  }
-
-  if (installationMethod === 'npm') {
-    return 'npm install --global yarn';
-  }
-
-  if (installationMethod === 'chocolatey') {
-    return 'choco upgrade yarn';
-  }
-
-  if (installationMethod === 'apk') {
-    return 'apk update && apk add -u yarn';
-  }
-
-  if (installationMethod === 'portage') {
-    return 'sudo emerge --sync && sudo emerge -au sys-apps/yarn';
-  }
-
-  return null;
-}
-
-function getUpdateInstaller(installationMethod) {
-  // Windows
-  if (installationMethod === 'msi') {
-    return (_constants || _load_constants()).YARN_INSTALLER_MSI;
-  }
-
-  return null;
-}
-
-function normalizeFlags(config, rawFlags) {
-  const flags = {
-    // install
-    har: !!rawFlags.har,
-    ignorePlatform: !!rawFlags.ignorePlatform,
-    ignoreEngines: !!rawFlags.ignoreEngines,
-    ignoreScripts: !!rawFlags.ignoreScripts,
-    ignoreOptional: !!rawFlags.ignoreOptional,
-    force: !!rawFlags.force,
-    flat: !!rawFlags.flat,
-    lockfile: rawFlags.lockfile !== false,
-    pureLockfile: !!rawFlags.pureLockfile,
-    updateChecksums: !!rawFlags.updateChecksums,
-    skipIntegrityCheck: !!rawFlags.skipIntegrityCheck,
-    frozenLockfile: !!rawFlags.frozenLockfile,
-    linkDuplicates: !!rawFlags.linkDuplicates,
-    checkFiles: !!rawFlags.checkFiles,
-    audit: !!rawFlags.audit,
-
-    // add
-    peer: !!rawFlags.peer,
-    dev: !!rawFlags.dev,
-    optional: !!rawFlags.optional,
-    exact: !!rawFlags.exact,
-    tilde: !!rawFlags.tilde,
-    ignoreWorkspaceRootCheck: !!rawFlags.ignoreWorkspaceRootCheck,
-
-    // outdated, update-interactive
-    includeWorkspaceDeps: !!rawFlags.includeWorkspaceDeps,
-
-    // add, remove, update
-    workspaceRootIsCwd: rawFlags.workspaceRootIsCwd !== false
-  };
-
-  if (config.getOption('ignore-scripts')) {
-    flags.ignoreScripts = true;
-  }
-
-  if (config.getOption('ignore-platform')) {
-    flags.ignorePlatform = true;
-  }
-
-  if (config.getOption('ignore-engines')) {
-    flags.ignoreEngines = true;
-  }
-
-  if (config.getOption('ignore-optional')) {
-    flags.ignoreOptional = true;
-  }
-
-  if (config.getOption('force')) {
-    flags.force = true;
-  }
-
-  return flags;
-}
-
-class Install {
-  constructor(flags, config, reporter, lockfile) {
-    this.rootManifestRegistries = [];
-    this.rootPatternsToOrigin = (0, (_map || _load_map()).default)();
-    this.lockfile = lockfile;
-    this.reporter = reporter;
-    this.config = config;
-    this.flags = normalizeFlags(config, flags);
-    this.resolutions = (0, (_map || _load_map()).default)(); // Legacy resolutions field used for flat install mode
-    this.resolutionMap = new (_resolutionMap || _load_resolutionMap()).default(config); // Selective resolutions for nested dependencies
-    this.resolver = new (_packageResolver || _load_packageResolver()).default(config, lockfile, this.resolutionMap);
-    this.integrityChecker = new (_integrityChecker || _load_integrityChecker()).default(config);
-    this.linker = new (_packageLinker || _load_packageLinker()).default(config, this.resolver);
-    this.scripts = new (_packageInstallScripts || _load_packageInstallScripts()).default(config, this.resolver, this.flags.force);
-  }
-
-  /**
-   * Create a list of dependency requests from the current directories manifests.
-   */
-
-  fetchRequestFromCwd(excludePatterns = [], ignoreUnusedPatterns = false) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const patterns = [];
-      const deps = [];
-      let resolutionDeps = [];
-      const manifest = {};
-
-      const ignorePatterns = [];
-      const usedPatterns = [];
-      let workspaceLayout;
-
-      // some commands should always run in the context of the entire workspace
-      const cwd = _this.flags.includeWorkspaceDeps || _this.flags.workspaceRootIsCwd ? _this.config.lockfileFolder : _this.config.cwd;
-
-      // non-workspaces are always root, otherwise check for workspace root
-      const cwdIsRoot = !_this.config.workspaceRootFolder || _this.config.lockfileFolder === cwd;
-
-      // exclude package names that are in install args
-      const excludeNames = [];
-      for (var _iterator = excludePatterns, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const pattern = _ref;
-
-        if ((0, (_index3 || _load_index3()).getExoticResolver)(pattern)) {
-          excludeNames.push((0, (_guessName || _load_guessName()).default)(pattern));
-        } else {
-          // extract the name
-          const parts = (0, (_normalizePattern || _load_normalizePattern()).normalizePattern)(pattern);
-          excludeNames.push(parts.name);
-        }
-      }
-
-      const stripExcluded = function stripExcluded(manifest) {
-        for (var _iterator2 = excludeNames, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-          var _ref2;
-
-          if (_isArray2) {
-            if (_i2 >= _iterator2.length) break;
-            _ref2 = _iterator2[_i2++];
-          } else {
-            _i2 = _iterator2.next();
-            if (_i2.done) break;
-            _ref2 = _i2.value;
-          }
-
-          const exclude = _ref2;
-
-          if (manifest.dependencies && manifest.dependencies[exclude]) {
-            delete manifest.dependencies[exclude];
-          }
-          if (manifest.devDependencies && manifest.devDependencies[exclude]) {
-            delete manifest.devDependencies[exclude];
-          }
-          if (manifest.optionalDependencies && manifest.optionalDependencies[exclude]) {
-            delete manifest.optionalDependencies[exclude];
-          }
-        }
-      };
-
-      for (var _iterator3 = Object.keys((_index2 || _load_index2()).registries), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref3 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref3 = _i3.value;
-        }
-
-        const registry = _ref3;
-
-        const filename = (_index2 || _load_index2()).registries[registry].filename;
-
-        const loc = path.join(cwd, filename);
-        if (!(yield (_fs || _load_fs()).exists(loc))) {
-          continue;
-        }
-
-        _this.rootManifestRegistries.push(registry);
-
-        const projectManifestJson = yield _this.config.readJson(loc);
-        yield (0, (_index || _load_index()).default)(projectManifestJson, cwd, _this.config, cwdIsRoot);
-
-        Object.assign(_this.resolutions, projectManifestJson.resolutions);
-        Object.assign(manifest, projectManifestJson);
-
-        _this.resolutionMap.init(_this.resolutions);
-        for (var _iterator4 = Object.keys(_this.resolutionMap.resolutionsByPackage), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref4;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref4 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref4 = _i4.value;
-          }
-
-          const packageName = _ref4;
-
-          const optional = (_objectPath || _load_objectPath()).default.has(manifest.optionalDependencies, packageName) && _this.flags.ignoreOptional;
-          for (var _iterator8 = _this.resolutionMap.resolutionsByPackage[packageName], _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-            var _ref9;
-
-            if (_isArray8) {
-              if (_i8 >= _iterator8.length) break;
-              _ref9 = _iterator8[_i8++];
-            } else {
-              _i8 = _iterator8.next();
-              if (_i8.done) break;
-              _ref9 = _i8.value;
-            }
-
-            const _ref8 = _ref9;
-            const pattern = _ref8.pattern;
-
-            resolutionDeps = [...resolutionDeps, { registry, pattern, optional, hint: 'resolution' }];
-          }
-        }
-
-        const pushDeps = function pushDeps(depType, manifest, { hint, optional }, isUsed) {
-          if (ignoreUnusedPatterns && !isUsed) {
-            return;
-          }
-          // We only take unused dependencies into consideration to get deterministic hoisting.
-          // Since flat mode doesn't care about hoisting and everything is top level and specified then we can safely
-          // leave these out.
-          if (_this.flags.flat && !isUsed) {
-            return;
-          }
-          const depMap = manifest[depType];
-          for (const name in depMap) {
-            if (excludeNames.indexOf(name) >= 0) {
-              continue;
-            }
-
-            let pattern = name;
-            if (!_this.lockfile.getLocked(pattern)) {
-              // when we use --save we save the dependency to the lockfile with just the name rather than the
-              // version combo
-              pattern += '@' + depMap[name];
-            }
-
-            // normalization made sure packages are mentioned only once
-            if (isUsed) {
-              usedPatterns.push(pattern);
-            } else {
-              ignorePatterns.push(pattern);
-            }
-
-            _this.rootPatternsToOrigin[pattern] = depType;
-            patterns.push(pattern);
-            deps.push({ pattern, registry, hint, optional, workspaceName: manifest.name, workspaceLoc: manifest._loc });
-          }
-        };
-
-        if (cwdIsRoot) {
-          pushDeps('dependencies', projectManifestJson, { hint: null, optional: false }, true);
-          pushDeps('devDependencies', projectManifestJson, { hint: 'dev', optional: false }, !_this.config.production);
-          pushDeps('optionalDependencies', projectManifestJson, { hint: 'optional', optional: true }, true);
-        }
-
-        if (_this.config.workspaceRootFolder) {
-          const workspaceLoc = cwdIsRoot ? loc : path.join(_this.config.lockfileFolder, filename);
-          const workspacesRoot = path.dirname(workspaceLoc);
-
-          let workspaceManifestJson = projectManifestJson;
-          if (!cwdIsRoot) {
-            // the manifest we read before was a child workspace, so get the root
-            workspaceManifestJson = yield _this.config.readJson(workspaceLoc);
-            yield (0, (_index || _load_index()).default)(workspaceManifestJson, workspacesRoot, _this.config, true);
-          }
-
-          const workspaces = yield _this.config.resolveWorkspaces(workspacesRoot, workspaceManifestJson);
-          workspaceLayout = new (_workspaceLayout || _load_workspaceLayout()).default(workspaces, _this.config);
-
-          // add virtual manifest that depends on all workspaces, this way package hoisters and resolvers will work fine
-          const workspaceDependencies = (0, (_extends2 || _load_extends()).default)({}, workspaceManifestJson.dependencies);
-          for (var _iterator5 = Object.keys(workspaces), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-            var _ref5;
-
-            if (_isArray5) {
-              if (_i5 >= _iterator5.length) break;
-              _ref5 = _iterator5[_i5++];
-            } else {
-              _i5 = _iterator5.next();
-              if (_i5.done) break;
-              _ref5 = _i5.value;
-            }
-
-            const workspaceName = _ref5;
-
-            const workspaceManifest = workspaces[workspaceName].manifest;
-            workspaceDependencies[workspaceName] = workspaceManifest.version;
-
-            // include dependencies from all workspaces
-            if (_this.flags.includeWorkspaceDeps) {
-              pushDeps('dependencies', workspaceManifest, { hint: null, optional: false }, true);
-              pushDeps('devDependencies', workspaceManifest, { hint: 'dev', optional: false }, !_this.config.production);
-              pushDeps('optionalDependencies', workspaceManifest, { hint: 'optional', optional: true }, true);
-            }
-          }
-          const virtualDependencyManifest = {
-            _uid: '',
-            name: `workspace-aggregator-${uuid.v4()}`,
-            version: '1.0.0',
-            _registry: 'npm',
-            _loc: workspacesRoot,
-            dependencies: workspaceDependencies,
-            devDependencies: (0, (_extends2 || _load_extends()).default)({}, workspaceManifestJson.devDependencies),
-            optionalDependencies: (0, (_extends2 || _load_extends()).default)({}, workspaceManifestJson.optionalDependencies),
-            private: workspaceManifestJson.private,
-            workspaces: workspaceManifestJson.workspaces
-          };
-          workspaceLayout.virtualManifestName = virtualDependencyManifest.name;
-          const virtualDep = {};
-          virtualDep[virtualDependencyManifest.name] = virtualDependencyManifest.version;
-          workspaces[virtualDependencyManifest.name] = { loc: workspacesRoot, manifest: virtualDependencyManifest };
-
-          // ensure dependencies that should be excluded are stripped from the correct manifest
-          stripExcluded(cwdIsRoot ? virtualDependencyManifest : workspaces[projectManifestJson.name].manifest);
-
-          pushDeps('workspaces', { workspaces: virtualDep }, { hint: 'workspaces', optional: false }, true);
-
-          const implicitWorkspaceDependencies = (0, (_extends2 || _load_extends()).default)({}, workspaceDependencies);
-
-          for (var _iterator6 = (_constants || _load_constants()).OWNED_DEPENDENCY_TYPES, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-            var _ref6;
-
-            if (_isArray6) {
-              if (_i6 >= _iterator6.length) break;
-              _ref6 = _iterator6[_i6++];
-            } else {
-              _i6 = _iterator6.next();
-              if (_i6.done) break;
-              _ref6 = _i6.value;
-            }
-
-            const type = _ref6;
-
-            for (var _iterator7 = Object.keys(projectManifestJson[type] || {}), _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-              var _ref7;
-
-              if (_isArray7) {
-                if (_i7 >= _iterator7.length) break;
-                _ref7 = _iterator7[_i7++];
-              } else {
-                _i7 = _iterator7.next();
-                if (_i7.done) break;
-                _ref7 = _i7.value;
-              }
-
-              const dependencyName = _ref7;
-
-              delete implicitWorkspaceDependencies[dependencyName];
-            }
-          }
-
-          pushDeps('dependencies', { dependencies: implicitWorkspaceDependencies }, { hint: 'workspaces', optional: false }, true);
-        }
-
-        break;
-      }
-
-      // inherit root flat flag
-      if (manifest.flat) {
-        _this.flags.flat = true;
-      }
-
-      return {
-        requests: [...resolutionDeps, ...deps],
-        patterns,
-        manifest,
-        usedPatterns,
-        ignorePatterns,
-        workspaceLayout
-      };
-    })();
-  }
-
-  /**
-   * TODO description
-   */
-
-  prepareRequests(requests) {
-    return requests;
-  }
-
-  preparePatterns(patterns) {
-    return patterns;
-  }
-  preparePatternsForLinking(patterns, cwdManifest, cwdIsRoot) {
-    return patterns;
-  }
-
-  prepareManifests() {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const manifests = yield _this2.config.getRootManifests();
-      return manifests;
-    })();
-  }
-
-  bailout(patterns, workspaceLayout) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // We don't want to skip the audit - it could yield important errors
-      if (_this3.flags.audit) {
-        return false;
-      }
-      // PNP is so fast that the integrity check isn't pertinent
-      if (_this3.config.plugnplayEnabled) {
-        return false;
-      }
-      if (_this3.flags.skipIntegrityCheck || _this3.flags.force) {
-        return false;
-      }
-      const lockfileCache = _this3.lockfile.cache;
-      if (!lockfileCache) {
-        return false;
-      }
-      const lockfileClean = _this3.lockfile.parseResultType === 'success';
-      const match = yield _this3.integrityChecker.check(patterns, lockfileCache, _this3.flags, workspaceLayout);
-      if (_this3.flags.frozenLockfile && (!lockfileClean || match.missingPatterns.length > 0)) {
-        throw new (_errors || _load_errors()).MessageError(_this3.reporter.lang('frozenLockfileError'));
-      }
-
-      const haveLockfile = yield (_fs || _load_fs()).exists(path.join(_this3.config.lockfileFolder, (_constants || _load_constants()).LOCKFILE_FILENAME));
-
-      const lockfileIntegrityPresent = !_this3.lockfile.hasEntriesExistWithoutIntegrity();
-      const integrityBailout = lockfileIntegrityPresent || !_this3.config.autoAddIntegrity;
-
-      if (match.integrityMatches && haveLockfile && lockfileClean && integrityBailout) {
-        _this3.reporter.success(_this3.reporter.lang('upToDate'));
-        return true;
-      }
-
-      if (match.integrityFileMissing && haveLockfile) {
-        // Integrity file missing, force script installations
-        _this3.scripts.setForce(true);
-        return false;
-      }
-
-      if (match.hardRefreshRequired) {
-        // e.g. node version doesn't match, force script installations
-        _this3.scripts.setForce(true);
-        return false;
-      }
-
-      if (!patterns.length && !match.integrityFileMissing) {
-        _this3.reporter.success(_this3.reporter.lang('nothingToInstall'));
-        yield _this3.createEmptyManifestFolders();
-        yield _this3.saveLockfileAndIntegrity(patterns, workspaceLayout);
-        return true;
-      }
-
-      return false;
-    })();
-  }
-
-  /**
-   * Produce empty folders for all used root manifests.
-   */
-
-  createEmptyManifestFolders() {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (_this4.config.modulesFolder) {
-        // already created
-        return;
-      }
-
-      for (var _iterator9 = _this4.rootManifestRegistries, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-        var _ref10;
-
-        if (_isArray9) {
-          if (_i9 >= _iterator9.length) break;
-          _ref10 = _iterator9[_i9++];
-        } else {
-          _i9 = _iterator9.next();
-          if (_i9.done) break;
-          _ref10 = _i9.value;
-        }
-
-        const registryName = _ref10;
-        const folder = _this4.config.registries[registryName].folder;
-
-        yield (_fs || _load_fs()).mkdirp(path.join(_this4.config.lockfileFolder, folder));
-      }
-    })();
-  }
-
-  /**
-   * TODO description
-   */
-
-  markIgnored(patterns) {
-    for (var _iterator10 = patterns, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray10) {
-        if (_i10 >= _iterator10.length) break;
-        _ref11 = _iterator10[_i10++];
-      } else {
-        _i10 = _iterator10.next();
-        if (_i10.done) break;
-        _ref11 = _i10.value;
-      }
-
-      const pattern = _ref11;
-
-      const manifest = this.resolver.getStrictResolvedPattern(pattern);
-      const ref = manifest._reference;
-      invariant(ref, 'expected package reference');
-
-      // just mark the package as ignored. if the package is used by a required package, the hoister
-      // will take care of that.
-      ref.ignore = true;
-    }
-  }
-
-  /**
-   * helper method that gets only recent manifests
-   * used by global.ls command
-   */
-  getFlattenedDeps() {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _ref12 = yield _this5.fetchRequestFromCwd();
-
-      const depRequests = _ref12.requests,
-            rawPatterns = _ref12.patterns;
-
-
-      yield _this5.resolver.init(depRequests, {});
-
-      const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this5.resolver.getManifests(), _this5.config);
-      _this5.resolver.updateManifests(manifests);
-
-      return _this5.flatten(rawPatterns);
-    })();
-  }
-
-  /**
-   * TODO description
-   */
-
-  init() {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this6.checkUpdate();
-
-      // warn if we have a shrinkwrap
-      if (yield (_fs || _load_fs()).exists(path.join(_this6.config.lockfileFolder, (_constants || _load_constants()).NPM_SHRINKWRAP_FILENAME))) {
-        _this6.reporter.warn(_this6.reporter.lang('shrinkwrapWarning'));
-      }
-
-      // warn if we have an npm lockfile
-      if (yield (_fs || _load_fs()).exists(path.join(_this6.config.lockfileFolder, (_constants || _load_constants()).NPM_LOCK_FILENAME))) {
-        _this6.reporter.warn(_this6.reporter.lang('npmLockfileWarning'));
-      }
-
-      if (_this6.config.plugnplayEnabled) {
-        _this6.reporter.info(_this6.reporter.lang('plugnplaySuggestV2L1'));
-        _this6.reporter.info(_this6.reporter.lang('plugnplaySuggestV2L2'));
-      }
-
-      let flattenedTopLevelPatterns = [];
-      const steps = [];
-
-      var _ref13 = yield _this6.fetchRequestFromCwd();
-
-      const depRequests = _ref13.requests,
-            rawPatterns = _ref13.patterns,
-            ignorePatterns = _ref13.ignorePatterns,
-            workspaceLayout = _ref13.workspaceLayout,
-            manifest = _ref13.manifest;
-
-      let topLevelPatterns = [];
-
-      const artifacts = yield _this6.integrityChecker.getArtifacts();
-      if (artifacts) {
-        _this6.linker.setArtifacts(artifacts);
-        _this6.scripts.setArtifacts(artifacts);
-      }
-
-      if ((_packageCompatibility || _load_packageCompatibility()).shouldCheck(manifest, _this6.flags)) {
-        steps.push((() => {
-          var _ref14 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (curr, total) {
-            _this6.reporter.step(curr, total, _this6.reporter.lang('checkingManifest'), emoji.get('mag'));
-            yield _this6.checkCompatibility();
-          });
-
-          return function (_x, _x2) {
-            return _ref14.apply(this, arguments);
-          };
-        })());
-      }
-
-      const audit = new (_audit || _load_audit()).default(_this6.config, _this6.reporter, { groups: (_constants || _load_constants()).OWNED_DEPENDENCY_TYPES });
-      let auditFoundProblems = false;
-
-      steps.push(function (curr, total) {
-        return (0, (_hooks || _load_hooks()).callThroughHook)('resolveStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-          _this6.reporter.step(curr, total, _this6.reporter.lang('resolvingPackages'), emoji.get('mag'));
-          yield _this6.resolver.init(_this6.prepareRequests(depRequests), {
-            isFlat: _this6.flags.flat,
-            isFrozen: _this6.flags.frozenLockfile,
-            workspaceLayout
-          });
-          topLevelPatterns = _this6.preparePatterns(rawPatterns);
-          flattenedTopLevelPatterns = yield _this6.flatten(topLevelPatterns);
-          return { bailout: !_this6.flags.audit && (yield _this6.bailout(topLevelPatterns, workspaceLayout)) };
-        }));
-      });
-
-      if (_this6.flags.audit) {
-        steps.push(function (curr, total) {
-          return (0, (_hooks || _load_hooks()).callThroughHook)('auditStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-            _this6.reporter.step(curr, total, _this6.reporter.lang('auditRunning'), emoji.get('mag'));
-            if (_this6.flags.offline) {
-              _this6.reporter.warn(_this6.reporter.lang('auditOffline'));
-              return { bailout: false };
-            }
-            const preparedManifests = yield _this6.prepareManifests();
-            // $FlowFixMe - Flow considers `m` in the map operation to be "mixed", so does not recognize `m.object`
-            const mergedManifest = Object.assign({}, ...Object.values(preparedManifests).map(function (m) {
-              return m.object;
-            }));
-            const auditVulnerabilityCounts = yield audit.performAudit(mergedManifest, _this6.lockfile, _this6.resolver, _this6.linker, topLevelPatterns);
-            auditFoundProblems = auditVulnerabilityCounts.info || auditVulnerabilityCounts.low || auditVulnerabilityCounts.moderate || auditVulnerabilityCounts.high || auditVulnerabilityCounts.critical;
-            return { bailout: yield _this6.bailout(topLevelPatterns, workspaceLayout) };
-          }));
-        });
-      }
-
-      steps.push(function (curr, total) {
-        return (0, (_hooks || _load_hooks()).callThroughHook)('fetchStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-          _this6.markIgnored(ignorePatterns);
-          _this6.reporter.step(curr, total, _this6.reporter.lang('fetchingPackages'), emoji.get('truck'));
-          const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this6.resolver.getManifests(), _this6.config);
-          _this6.resolver.updateManifests(manifests);
-          yield (_packageCompatibility || _load_packageCompatibility()).check(_this6.resolver.getManifests(), _this6.config, _this6.flags.ignoreEngines);
-        }));
-      });
-
-      steps.push(function (curr, total) {
-        return (0, (_hooks || _load_hooks()).callThroughHook)('linkStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-          // remove integrity hash to make this operation atomic
-          yield _this6.integrityChecker.removeIntegrityFile();
-          _this6.reporter.step(curr, total, _this6.reporter.lang('linkingDependencies'), emoji.get('link'));
-          flattenedTopLevelPatterns = _this6.preparePatternsForLinking(flattenedTopLevelPatterns, manifest, _this6.config.lockfileFolder === _this6.config.cwd);
-          yield _this6.linker.init(flattenedTopLevelPatterns, workspaceLayout, {
-            linkDuplicates: _this6.flags.linkDuplicates,
-            ignoreOptional: _this6.flags.ignoreOptional
-          });
-        }));
-      });
-
-      if (_this6.config.plugnplayEnabled) {
-        steps.push(function (curr, total) {
-          return (0, (_hooks || _load_hooks()).callThroughHook)('pnpStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-            const pnpPath = `${_this6.config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`;
-
-            const code = yield (0, (_generatePnpMap || _load_generatePnpMap()).generatePnpMap)(_this6.config, flattenedTopLevelPatterns, {
-              resolver: _this6.resolver,
-              reporter: _this6.reporter,
-              targetPath: pnpPath,
-              workspaceLayout
-            });
-
-            try {
-              const file = yield (_fs || _load_fs()).readFile(pnpPath);
-              if (file === code) {
-                return;
-              }
-            } catch (error) {}
-
-            yield (_fs || _load_fs()).writeFile(pnpPath, code);
-            yield (_fs || _load_fs()).chmod(pnpPath, 0o755);
-          }));
-        });
-      }
-
-      steps.push(function (curr, total) {
-        return (0, (_hooks || _load_hooks()).callThroughHook)('buildStep', (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-          _this6.reporter.step(curr, total, _this6.flags.force ? _this6.reporter.lang('rebuildingPackages') : _this6.reporter.lang('buildingFreshPackages'), emoji.get('hammer'));
-
-          if (_this6.config.ignoreScripts) {
-            _this6.reporter.warn(_this6.reporter.lang('ignoredScripts'));
-          } else {
-            yield _this6.scripts.init(flattenedTopLevelPatterns);
-          }
-        }));
-      });
-
-      if (_this6.flags.har) {
-        steps.push((() => {
-          var _ref21 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (curr, total) {
-            const formattedDate = new Date().toISOString().replace(/:/g, '-');
-            const filename = `yarn-install_${formattedDate}.har`;
-            _this6.reporter.step(curr, total, _this6.reporter.lang('savingHar', filename), emoji.get('black_circle_for_record'));
-            yield _this6.config.requestManager.saveHar(filename);
-          });
-
-          return function (_x3, _x4) {
-            return _ref21.apply(this, arguments);
-          };
-        })());
-      }
-
-      if (yield _this6.shouldClean()) {
-        steps.push((() => {
-          var _ref22 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (curr, total) {
-            _this6.reporter.step(curr, total, _this6.reporter.lang('cleaningModules'), emoji.get('recycle'));
-            yield (0, (_autoclean || _load_autoclean()).clean)(_this6.config, _this6.reporter);
-          });
-
-          return function (_x5, _x6) {
-            return _ref22.apply(this, arguments);
-          };
-        })());
-      }
-
-      let currentStep = 0;
-      for (var _iterator11 = steps, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-        var _ref23;
-
-        if (_isArray11) {
-          if (_i11 >= _iterator11.length) break;
-          _ref23 = _iterator11[_i11++];
-        } else {
-          _i11 = _iterator11.next();
-          if (_i11.done) break;
-          _ref23 = _i11.value;
-        }
-
-        const step = _ref23;
-
-        const stepResult = yield step(++currentStep, steps.length);
-        if (stepResult && stepResult.bailout) {
-          if (_this6.flags.audit) {
-            audit.summary();
-          }
-          if (auditFoundProblems) {
-            _this6.reporter.warn(_this6.reporter.lang('auditRunAuditForDetails'));
-          }
-          _this6.maybeOutputUpdate();
-          return flattenedTopLevelPatterns;
-        }
-      }
-
-      // fin!
-      if (_this6.flags.audit) {
-        audit.summary();
-      }
-      if (auditFoundProblems) {
-        _this6.reporter.warn(_this6.reporter.lang('auditRunAuditForDetails'));
-      }
-      yield _this6.saveLockfileAndIntegrity(topLevelPatterns, workspaceLayout);
-      yield _this6.persistChanges();
-      _this6.maybeOutputUpdate();
-      _this6.config.requestManager.clearCache();
-      return flattenedTopLevelPatterns;
-    })();
-  }
-
-  checkCompatibility() {
-    var _this7 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _ref24 = yield _this7.fetchRequestFromCwd();
-
-      const manifest = _ref24.manifest;
-
-      yield (_packageCompatibility || _load_packageCompatibility()).checkOne(manifest, _this7.config, _this7.flags.ignoreEngines);
-    })();
-  }
-
-  persistChanges() {
-    var _this8 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // get all the different registry manifests in this folder
-      const manifests = yield _this8.config.getRootManifests();
-
-      if (yield _this8.applyChanges(manifests)) {
-        yield _this8.config.saveRootManifests(manifests);
-      }
-    })();
-  }
-
-  applyChanges(manifests) {
-    let hasChanged = false;
-
-    if (this.config.plugnplayPersist) {
-      const object = manifests.npm.object;
-
-
-      if (typeof object.installConfig !== 'object') {
-        object.installConfig = {};
-      }
-
-      if (this.config.plugnplayEnabled && object.installConfig.pnp !== true) {
-        object.installConfig.pnp = true;
-        hasChanged = true;
-      } else if (!this.config.plugnplayEnabled && typeof object.installConfig.pnp !== 'undefined') {
-        delete object.installConfig.pnp;
-        hasChanged = true;
-      }
-
-      if (Object.keys(object.installConfig).length === 0) {
-        delete object.installConfig;
-      }
-    }
-
-    return Promise.resolve(hasChanged);
-  }
-
-  /**
-   * Check if we should run the cleaning step.
-   */
-
-  shouldClean() {
-    return (_fs || _load_fs()).exists(path.join(this.config.lockfileFolder, (_constants || _load_constants()).CLEAN_FILENAME));
-  }
-
-  /**
-   * TODO
-   */
-
-  flatten(patterns) {
-    var _this9 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (!_this9.flags.flat) {
-        return patterns;
-      }
-
-      const flattenedPatterns = [];
-
-      for (var _iterator12 = _this9.resolver.getAllDependencyNamesByLevelOrder(patterns), _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) {
-        var _ref25;
-
-        if (_isArray12) {
-          if (_i12 >= _iterator12.length) break;
-          _ref25 = _iterator12[_i12++];
-        } else {
-          _i12 = _iterator12.next();
-          if (_i12.done) break;
-          _ref25 = _i12.value;
-        }
-
-        const name = _ref25;
-
-        const infos = _this9.resolver.getAllInfoForPackageName(name).filter(function (manifest) {
-          const ref = manifest._reference;
-          invariant(ref, 'expected package reference');
-          return !ref.ignore;
-        });
-
-        if (infos.length === 0) {
-          continue;
-        }
-
-        if (infos.length === 1) {
-          // single version of this package
-          // take out a single pattern as multiple patterns may have resolved to this package
-          flattenedPatterns.push(_this9.resolver.patternsByPackage[name][0]);
-          continue;
-        }
-
-        const options = infos.map(function (info) {
-          const ref = info._reference;
-          invariant(ref, 'expected reference');
-          return {
-            // TODO `and is required by {PARENT}`,
-            name: _this9.reporter.lang('manualVersionResolutionOption', ref.patterns.join(', '), info.version),
-
-            value: info.version
-          };
-        });
-        const versions = infos.map(function (info) {
-          return info.version;
-        });
-        let version;
-
-        const resolutionVersion = _this9.resolutions[name];
-        if (resolutionVersion && versions.indexOf(resolutionVersion) >= 0) {
-          // use json `resolution` version
-          version = resolutionVersion;
-        } else {
-          version = yield _this9.reporter.select(_this9.reporter.lang('manualVersionResolution', name), _this9.reporter.lang('answer'), options);
-          _this9.resolutions[name] = version;
-        }
-
-        flattenedPatterns.push(_this9.resolver.collapseAllVersionsOfPackage(name, version));
-      }
-
-      // save resolutions to their appropriate root manifest
-      if (Object.keys(_this9.resolutions).length) {
-        const manifests = yield _this9.config.getRootManifests();
-
-        for (const name in _this9.resolutions) {
-          const version = _this9.resolutions[name];
-
-          const patterns = _this9.resolver.patternsByPackage[name];
-          if (!patterns) {
-            continue;
-          }
-
-          let manifest;
-          for (var _iterator13 = patterns, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) {
-            var _ref26;
-
-            if (_isArray13) {
-              if (_i13 >= _iterator13.length) break;
-              _ref26 = _iterator13[_i13++];
-            } else {
-              _i13 = _iterator13.next();
-              if (_i13.done) break;
-              _ref26 = _i13.value;
-            }
-
-            const pattern = _ref26;
-
-            manifest = _this9.resolver.getResolvedPattern(pattern);
-            if (manifest) {
-              break;
-            }
-          }
-          invariant(manifest, 'expected manifest');
-
-          const ref = manifest._reference;
-          invariant(ref, 'expected reference');
-
-          const object = manifests[ref.registry].object;
-          object.resolutions = object.resolutions || {};
-          object.resolutions[name] = version;
-        }
-
-        yield _this9.config.saveRootManifests(manifests);
-      }
-
-      return flattenedPatterns;
-    })();
-  }
-
-  /**
-   * Remove offline tarballs that are no longer required
-   */
-
-  pruneOfflineMirror(lockfile) {
-    var _this10 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const mirror = _this10.config.getOfflineMirrorPath();
-      if (!mirror) {
-        return;
-      }
-
-      const requiredTarballs = new Set();
-      for (const dependency in lockfile) {
-        const resolved = lockfile[dependency].resolved;
-        if (resolved) {
-          const basename = path.basename(resolved.split('#')[0]);
-          if (dependency[0] === '@' && basename[0] !== '@') {
-            requiredTarballs.add(`${dependency.split('/')[0]}-${basename}`);
-          }
-          requiredTarballs.add(basename);
-        }
-      }
-
-      const mirrorFiles = yield (_fs || _load_fs()).walk(mirror);
-      for (var _iterator14 = mirrorFiles, _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) {
-        var _ref27;
-
-        if (_isArray14) {
-          if (_i14 >= _iterator14.length) break;
-          _ref27 = _iterator14[_i14++];
-        } else {
-          _i14 = _iterator14.next();
-          if (_i14.done) break;
-          _ref27 = _i14.value;
-        }
-
-        const file = _ref27;
-
-        const isTarball = path.extname(file.basename) === '.tgz';
-        // if using experimental-pack-script-packages-in-mirror flag, don't unlink prebuilt packages
-        const hasPrebuiltPackage = file.relative.startsWith('prebuilt/');
-        if (isTarball && !hasPrebuiltPackage && !requiredTarballs.has(file.basename)) {
-          yield (_fs || _load_fs()).unlink(file.absolute);
-        }
-      }
-    })();
-  }
-
-  /**
-   * Save updated integrity and lockfiles.
-   */
-
-  saveLockfileAndIntegrity(patterns, workspaceLayout) {
-    var _this11 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const resolvedPatterns = {};
-      Object.keys(_this11.resolver.patterns).forEach(function (pattern) {
-        if (!workspaceLayout || !workspaceLayout.getManifestByPattern(pattern)) {
-          resolvedPatterns[pattern] = _this11.resolver.patterns[pattern];
-        }
-      });
-
-      // TODO this code is duplicated in a few places, need a common way to filter out workspace patterns from lockfile
-      patterns = patterns.filter(function (p) {
-        return !workspaceLayout || !workspaceLayout.getManifestByPattern(p);
-      });
-
-      const lockfileBasedOnResolver = _this11.lockfile.getLockfile(resolvedPatterns);
-
-      if (_this11.config.pruneOfflineMirror) {
-        yield _this11.pruneOfflineMirror(lockfileBasedOnResolver);
-      }
-
-      // write integrity hash
-      if (!_this11.config.plugnplayEnabled) {
-        yield _this11.integrityChecker.save(patterns, lockfileBasedOnResolver, _this11.flags, workspaceLayout, _this11.scripts.getArtifacts());
-      }
-
-      // --no-lockfile or --pure-lockfile or --frozen-lockfile
-      if (_this11.flags.lockfile === false || _this11.flags.pureLockfile || _this11.flags.frozenLockfile) {
-        return;
-      }
-
-      const lockFileHasAllPatterns = patterns.every(function (p) {
-        return _this11.lockfile.getLocked(p);
-      });
-      const lockfilePatternsMatch = Object.keys(_this11.lockfile.cache || {}).every(function (p) {
-        return lockfileBasedOnResolver[p];
-      });
-      const resolverPatternsAreSameAsInLockfile = Object.keys(lockfileBasedOnResolver).every(function (pattern) {
-        const manifest = _this11.lockfile.getLocked(pattern);
-        return manifest && manifest.resolved === lockfileBasedOnResolver[pattern].resolved && deepEqual(manifest.prebuiltVariants, lockfileBasedOnResolver[pattern].prebuiltVariants);
-      });
-      const integrityPatternsAreSameAsInLockfile = Object.keys(lockfileBasedOnResolver).every(function (pattern) {
-        const existingIntegrityInfo = lockfileBasedOnResolver[pattern].integrity;
-        if (!existingIntegrityInfo) {
-          // if this entry does not have an integrity, no need to re-write the lockfile because of it
-          return true;
-        }
-        const manifest = _this11.lockfile.getLocked(pattern);
-        if (manifest && manifest.integrity) {
-          const manifestIntegrity = ssri.stringify(manifest.integrity);
-          return manifestIntegrity === existingIntegrityInfo;
-        }
-        return false;
-      });
-
-      // remove command is followed by install with force, lockfile will be rewritten in any case then
-      if (!_this11.flags.force && _this11.lockfile.parseResultType === 'success' && lockFileHasAllPatterns && lockfilePatternsMatch && resolverPatternsAreSameAsInLockfile && integrityPatternsAreSameAsInLockfile && patterns.length) {
-        return;
-      }
-
-      // build lockfile location
-      const loc = path.join(_this11.config.lockfileFolder, (_constants || _load_constants()).LOCKFILE_FILENAME);
-
-      // write lockfile
-      const lockSource = (0, (_lockfile2 || _load_lockfile2()).stringify)(lockfileBasedOnResolver, false, _this11.config.enableLockfileVersions);
-      yield (_fs || _load_fs()).writeFilePreservingEol(loc, lockSource);
-
-      _this11._logSuccessSaveLockfile();
-    })();
-  }
-
-  _logSuccessSaveLockfile() {
-    this.reporter.success(this.reporter.lang('savedLockfile'));
-  }
-
-  /**
-   * Load the dependency graph of the current install. Only does package resolving and wont write to the cwd.
-   */
-  hydrate(ignoreUnusedPatterns) {
-    var _this12 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const request = yield _this12.fetchRequestFromCwd([], ignoreUnusedPatterns);
-      const depRequests = request.requests,
-            rawPatterns = request.patterns,
-            ignorePatterns = request.ignorePatterns,
-            workspaceLayout = request.workspaceLayout;
-
-
-      yield _this12.resolver.init(depRequests, {
-        isFlat: _this12.flags.flat,
-        isFrozen: _this12.flags.frozenLockfile,
-        workspaceLayout
-      });
-      yield _this12.flatten(rawPatterns);
-      _this12.markIgnored(ignorePatterns);
-
-      // fetch packages, should hit cache most of the time
-      const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this12.resolver.getManifests(), _this12.config);
-      _this12.resolver.updateManifests(manifests);
-      yield (_packageCompatibility || _load_packageCompatibility()).check(_this12.resolver.getManifests(), _this12.config, _this12.flags.ignoreEngines);
-
-      // expand minimal manifests
-      for (var _iterator15 = _this12.resolver.getManifests(), _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) {
-        var _ref28;
-
-        if (_isArray15) {
-          if (_i15 >= _iterator15.length) break;
-          _ref28 = _iterator15[_i15++];
-        } else {
-          _i15 = _iterator15.next();
-          if (_i15.done) break;
-          _ref28 = _i15.value;
-        }
-
-        const manifest = _ref28;
-
-        const ref = manifest._reference;
-        invariant(ref, 'expected reference');
-        const type = ref.remote.type;
-        // link specifier won't ever hit cache
-
-        let loc = '';
-        if (type === 'link') {
-          continue;
-        } else if (type === 'workspace') {
-          if (!ref.remote.reference) {
-            continue;
-          }
-          loc = ref.remote.reference;
-        } else {
-          loc = _this12.config.generateModuleCachePath(ref);
-        }
-        const newPkg = yield _this12.config.readManifest(loc);
-        yield _this12.resolver.updateManifest(ref, newPkg);
-      }
-
-      return request;
-    })();
-  }
-
-  /**
-   * Check for updates every day and output a nag message if there's a newer version.
-   */
-
-  checkUpdate() {
-    if (this.config.nonInteractive) {
-      // don't show upgrade dialog on CI or non-TTY terminals
-      return;
-    }
-
-    // don't check if disabled
-    if (this.config.getOption('disable-self-update-check')) {
-      return;
-    }
-
-    // only check for updates once a day
-    const lastUpdateCheck = Number(this.config.getOption('lastUpdateCheck')) || 0;
-    if (lastUpdateCheck && Date.now() - lastUpdateCheck < ONE_DAY) {
-      return;
-    }
-
-    // don't bug for updates on tagged releases
-    if ((_yarnVersion || _load_yarnVersion()).version.indexOf('-') >= 0) {
-      return;
-    }
-
-    this._checkUpdate().catch(() => {
-      // swallow errors
-    });
-  }
-
-  _checkUpdate() {
-    var _this13 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let latestVersion = yield _this13.config.requestManager.request({
-        url: (_constants || _load_constants()).SELF_UPDATE_VERSION_URL
-      });
-      invariant(typeof latestVersion === 'string', 'expected string');
-      latestVersion = latestVersion.trim();
-      if (!semver.valid(latestVersion)) {
-        return;
-      }
-
-      // ensure we only check for updates periodically
-      _this13.config.registries.yarn.saveHomeConfig({
-        lastUpdateCheck: Date.now()
-      });
-
-      if (semver.gt(latestVersion, (_yarnVersion || _load_yarnVersion()).version)) {
-        const installationMethod = yield (0, (_yarnVersion || _load_yarnVersion()).getInstallationMethod)();
-        _this13.maybeOutputUpdate = function () {
-          _this13.reporter.warn(_this13.reporter.lang('yarnOutdated', latestVersion, (_yarnVersion || _load_yarnVersion()).version));
-
-          const command = getUpdateCommand(installationMethod);
-          if (command) {
-            _this13.reporter.info(_this13.reporter.lang('yarnOutdatedCommand'));
-            _this13.reporter.command(command);
-          } else {
-            const installer = getUpdateInstaller(installationMethod);
-            if (installer) {
-              _this13.reporter.info(_this13.reporter.lang('yarnOutdatedInstaller', installer));
-            }
-          }
-        };
-      }
-    })();
-  }
-
-  /**
-   * Method to override with a possible upgrade message.
-   */
-
-  maybeOutputUpdate() {}
-}
-
-exports.Install = Install;
-function hasWrapper(commander, args) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Yarn install is used to install all dependencies for a project.');
-  commander.usage('install [flags]');
-  commander.option('-A, --audit', 'Run vulnerability audit on installed packages');
-  commander.option('-g, --global', 'DEPRECATED');
-  commander.option('-S, --save', 'DEPRECATED - save package to your `dependencies`');
-  commander.option('-D, --save-dev', 'DEPRECATED - save package to your `devDependencies`');
-  commander.option('-P, --save-peer', 'DEPRECATED - save package to your `peerDependencies`');
-  commander.option('-O, --save-optional', 'DEPRECATED - save package to your `optionalDependencies`');
-  commander.option('-E, --save-exact', 'DEPRECATED');
-  commander.option('-T, --save-tilde', 'DEPRECATED');
-}
-
-/***/ }),
-/* 35 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var isObject = __webpack_require__(52);
-module.exports = function (it) {
-  if (!isObject(it)) throw TypeError(it + ' is not an object!');
-  return it;
-};
-
-
-/***/ }),
-/* 36 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return SubjectSubscriber; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Subject; });
-/* unused harmony export AnonymousSubject */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__ = __webpack_require__(189);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__SubjectSubscription__ = __webpack_require__(422);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__internal_symbol_rxSubscriber__ = __webpack_require__(321);
-/** PURE_IMPORTS_START tslib,_Observable,_Subscriber,_Subscription,_util_ObjectUnsubscribedError,_SubjectSubscription,_internal_symbol_rxSubscriber PURE_IMPORTS_END */
-
-
-
-
-
-
-
-var SubjectSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SubjectSubscriber, _super);
-    function SubjectSubscriber(destination) {
-        var _this = _super.call(this, destination) || this;
-        _this.destination = destination;
-        return _this;
-    }
-    return SubjectSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_2__Subscriber__["a" /* Subscriber */]));
-
-var Subject = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](Subject, _super);
-    function Subject() {
-        var _this = _super.call(this) || this;
-        _this.observers = [];
-        _this.closed = false;
-        _this.isStopped = false;
-        _this.hasError = false;
-        _this.thrownError = null;
-        return _this;
-    }
-    Subject.prototype[__WEBPACK_IMPORTED_MODULE_6__internal_symbol_rxSubscriber__["a" /* rxSubscriber */]] = function () {
-        return new SubjectSubscriber(this);
-    };
-    Subject.prototype.lift = function (operator) {
-        var subject = new AnonymousSubject(this, this);
-        subject.operator = operator;
-        return subject;
-    };
-    Subject.prototype.next = function (value) {
-        if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        if (!this.isStopped) {
-            var observers = this.observers;
-            var len = observers.length;
-            var copy = observers.slice();
-            for (var i = 0; i < len; i++) {
-                copy[i].next(value);
-            }
-        }
-    };
-    Subject.prototype.error = function (err) {
-        if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        this.hasError = true;
-        this.thrownError = err;
-        this.isStopped = true;
-        var observers = this.observers;
-        var len = observers.length;
-        var copy = observers.slice();
-        for (var i = 0; i < len; i++) {
-            copy[i].error(err);
-        }
-        this.observers.length = 0;
-    };
-    Subject.prototype.complete = function () {
-        if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        this.isStopped = true;
-        var observers = this.observers;
-        var len = observers.length;
-        var copy = observers.slice();
-        for (var i = 0; i < len; i++) {
-            copy[i].complete();
-        }
-        this.observers.length = 0;
-    };
-    Subject.prototype.unsubscribe = function () {
-        this.isStopped = true;
-        this.closed = true;
-        this.observers = null;
-    };
-    Subject.prototype._trySubscribe = function (subscriber) {
-        if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        else {
-            return _super.prototype._trySubscribe.call(this, subscriber);
-        }
-    };
-    Subject.prototype._subscribe = function (subscriber) {
-        if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_4__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        else if (this.hasError) {
-            subscriber.error(this.thrownError);
-            return __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY;
-        }
-        else if (this.isStopped) {
-            subscriber.complete();
-            return __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY;
-        }
-        else {
-            this.observers.push(subscriber);
-            return new __WEBPACK_IMPORTED_MODULE_5__SubjectSubscription__["a" /* SubjectSubscription */](this, subscriber);
-        }
-    };
-    Subject.prototype.asObservable = function () {
-        var observable = new __WEBPACK_IMPORTED_MODULE_1__Observable__["a" /* Observable */]();
-        observable.source = this;
-        return observable;
-    };
-    Subject.create = function (destination, source) {
-        return new AnonymousSubject(destination, source);
-    };
-    return Subject;
-}(__WEBPACK_IMPORTED_MODULE_1__Observable__["a" /* Observable */]));
-
-var AnonymousSubject = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AnonymousSubject, _super);
-    function AnonymousSubject(destination, source) {
-        var _this = _super.call(this) || this;
-        _this.destination = destination;
-        _this.source = source;
-        return _this;
-    }
-    AnonymousSubject.prototype.next = function (value) {
-        var destination = this.destination;
-        if (destination && destination.next) {
-            destination.next(value);
-        }
-    };
-    AnonymousSubject.prototype.error = function (err) {
-        var destination = this.destination;
-        if (destination && destination.error) {
-            this.destination.error(err);
-        }
-    };
-    AnonymousSubject.prototype.complete = function () {
-        var destination = this.destination;
-        if (destination && destination.complete) {
-            this.destination.complete();
-        }
-    };
-    AnonymousSubject.prototype._subscribe = function (subscriber) {
-        var source = this.source;
-        if (source) {
-            return this.source.subscribe(subscriber);
-        }
-        else {
-            return __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY;
-        }
-    };
-    return AnonymousSubject;
-}(Subject));
-
-//# sourceMappingURL=Subject.js.map
-
-
-/***/ }),
-/* 37 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.normalizePattern = normalizePattern;
-
-/**
- * Explode and normalize a pattern into its name and range.
- */
-
-function normalizePattern(pattern) {
-  let hasVersion = false;
-  let range = 'latest';
-  let name = pattern;
-
-  // if we're a scope then remove the @ and add it back later
-  let isScoped = false;
-  if (name[0] === '@') {
-    isScoped = true;
-    name = name.slice(1);
-  }
-
-  // take first part as the name
-  const parts = name.split('@');
-  if (parts.length > 1) {
-    name = parts.shift();
-    range = parts.join('@');
-
-    if (range) {
-      hasVersion = true;
-    } else {
-      range = '*';
-    }
-  }
-
-  // add back @ scope suffix
-  if (isScoped) {
-    name = `@${name}`;
-  }
-
-  return { name, range, hasVersion };
-}
-
-/***/ }),
-/* 38 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/* WEBPACK VAR INJECTION */(function(module) {var __WEBPACK_AMD_DEFINE_RESULT__;/**
- * @license
- * Lodash <https://lodash.com/>
- * Copyright JS Foundation and other contributors <https://js.foundation/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-;(function() {
-
-  /** Used as a safe reference for `undefined` in pre-ES5 environments. */
-  var undefined;
-
-  /** Used as the semantic version number. */
-  var VERSION = '4.17.10';
-
-  /** Used as the size to enable large array optimizations. */
-  var LARGE_ARRAY_SIZE = 200;
-
-  /** Error message constants. */
-  var CORE_ERROR_TEXT = 'Unsupported core-js use. Try https://npms.io/search?q=ponyfill.',
-      FUNC_ERROR_TEXT = 'Expected a function';
-
-  /** Used to stand-in for `undefined` hash values. */
-  var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-  /** Used as the maximum memoize cache size. */
-  var MAX_MEMOIZE_SIZE = 500;
-
-  /** Used as the internal argument placeholder. */
-  var PLACEHOLDER = '__lodash_placeholder__';
-
-  /** Used to compose bitmasks for cloning. */
-  var CLONE_DEEP_FLAG = 1,
-      CLONE_FLAT_FLAG = 2,
-      CLONE_SYMBOLS_FLAG = 4;
-
-  /** Used to compose bitmasks for value comparisons. */
-  var COMPARE_PARTIAL_FLAG = 1,
-      COMPARE_UNORDERED_FLAG = 2;
-
-  /** Used to compose bitmasks for function metadata. */
-  var WRAP_BIND_FLAG = 1,
-      WRAP_BIND_KEY_FLAG = 2,
-      WRAP_CURRY_BOUND_FLAG = 4,
-      WRAP_CURRY_FLAG = 8,
-      WRAP_CURRY_RIGHT_FLAG = 16,
-      WRAP_PARTIAL_FLAG = 32,
-      WRAP_PARTIAL_RIGHT_FLAG = 64,
-      WRAP_ARY_FLAG = 128,
-      WRAP_REARG_FLAG = 256,
-      WRAP_FLIP_FLAG = 512;
-
-  /** Used as default options for `_.truncate`. */
-  var DEFAULT_TRUNC_LENGTH = 30,
-      DEFAULT_TRUNC_OMISSION = '...';
-
-  /** Used to detect hot functions by number of calls within a span of milliseconds. */
-  var HOT_COUNT = 800,
-      HOT_SPAN = 16;
-
-  /** Used to indicate the type of lazy iteratees. */
-  var LAZY_FILTER_FLAG = 1,
-      LAZY_MAP_FLAG = 2,
-      LAZY_WHILE_FLAG = 3;
-
-  /** Used as references for various `Number` constants. */
-  var INFINITY = 1 / 0,
-      MAX_SAFE_INTEGER = 9007199254740991,
-      MAX_INTEGER = 1.7976931348623157e+308,
-      NAN = 0 / 0;
-
-  /** Used as references for the maximum length and index of an array. */
-  var MAX_ARRAY_LENGTH = 4294967295,
-      MAX_ARRAY_INDEX = MAX_ARRAY_LENGTH - 1,
-      HALF_MAX_ARRAY_LENGTH = MAX_ARRAY_LENGTH >>> 1;
-
-  /** Used to associate wrap methods with their bit flags. */
-  var wrapFlags = [
-    ['ary', WRAP_ARY_FLAG],
-    ['bind', WRAP_BIND_FLAG],
-    ['bindKey', WRAP_BIND_KEY_FLAG],
-    ['curry', WRAP_CURRY_FLAG],
-    ['curryRight', WRAP_CURRY_RIGHT_FLAG],
-    ['flip', WRAP_FLIP_FLAG],
-    ['partial', WRAP_PARTIAL_FLAG],
-    ['partialRight', WRAP_PARTIAL_RIGHT_FLAG],
-    ['rearg', WRAP_REARG_FLAG]
-  ];
-
-  /** `Object#toString` result references. */
-  var argsTag = '[object Arguments]',
-      arrayTag = '[object Array]',
-      asyncTag = '[object AsyncFunction]',
-      boolTag = '[object Boolean]',
-      dateTag = '[object Date]',
-      domExcTag = '[object DOMException]',
-      errorTag = '[object Error]',
-      funcTag = '[object Function]',
-      genTag = '[object GeneratorFunction]',
-      mapTag = '[object Map]',
-      numberTag = '[object Number]',
-      nullTag = '[object Null]',
-      objectTag = '[object Object]',
-      promiseTag = '[object Promise]',
-      proxyTag = '[object Proxy]',
-      regexpTag = '[object RegExp]',
-      setTag = '[object Set]',
-      stringTag = '[object String]',
-      symbolTag = '[object Symbol]',
-      undefinedTag = '[object Undefined]',
-      weakMapTag = '[object WeakMap]',
-      weakSetTag = '[object WeakSet]';
-
-  var arrayBufferTag = '[object ArrayBuffer]',
-      dataViewTag = '[object DataView]',
-      float32Tag = '[object Float32Array]',
-      float64Tag = '[object Float64Array]',
-      int8Tag = '[object Int8Array]',
-      int16Tag = '[object Int16Array]',
-      int32Tag = '[object Int32Array]',
-      uint8Tag = '[object Uint8Array]',
-      uint8ClampedTag = '[object Uint8ClampedArray]',
-      uint16Tag = '[object Uint16Array]',
-      uint32Tag = '[object Uint32Array]';
-
-  /** Used to match empty string literals in compiled template source. */
-  var reEmptyStringLeading = /\b__p \+= '';/g,
-      reEmptyStringMiddle = /\b(__p \+=) '' \+/g,
-      reEmptyStringTrailing = /(__e\(.*?\)|\b__t\)) \+\n'';/g;
-
-  /** Used to match HTML entities and HTML characters. */
-  var reEscapedHtml = /&(?:amp|lt|gt|quot|#39);/g,
-      reUnescapedHtml = /[&<>"']/g,
-      reHasEscapedHtml = RegExp(reEscapedHtml.source),
-      reHasUnescapedHtml = RegExp(reUnescapedHtml.source);
-
-  /** Used to match template delimiters. */
-  var reEscape = /<%-([\s\S]+?)%>/g,
-      reEvaluate = /<%([\s\S]+?)%>/g,
-      reInterpolate = /<%=([\s\S]+?)%>/g;
-
-  /** Used to match property names within property paths. */
-  var reIsDeepProp = /\.|\[(?:[^[\]]*|(["'])(?:(?!\1)[^\\]|\\.)*?\1)\]/,
-      reIsPlainProp = /^\w*$/,
-      rePropName = /[^.[\]]+|\[(?:(-?\d+(?:\.\d+)?)|(["'])((?:(?!\2)[^\\]|\\.)*?)\2)\]|(?=(?:\.|\[\])(?:\.|\[\]|$))/g;
-
-  /**
-   * Used to match `RegExp`
-   * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
-   */
-  var reRegExpChar = /[\\^$.*+?()[\]{}|]/g,
-      reHasRegExpChar = RegExp(reRegExpChar.source);
-
-  /** Used to match leading and trailing whitespace. */
-  var reTrim = /^\s+|\s+$/g,
-      reTrimStart = /^\s+/,
-      reTrimEnd = /\s+$/;
-
-  /** Used to match wrap detail comments. */
-  var reWrapComment = /\{(?:\n\/\* \[wrapped with .+\] \*\/)?\n?/,
-      reWrapDetails = /\{\n\/\* \[wrapped with (.+)\] \*/,
-      reSplitDetails = /,? & /;
-
-  /** Used to match words composed of alphanumeric characters. */
-  var reAsciiWord = /[^\x00-\x2f\x3a-\x40\x5b-\x60\x7b-\x7f]+/g;
-
-  /** Used to match backslashes in property paths. */
-  var reEscapeChar = /\\(\\)?/g;
-
-  /**
-   * Used to match
-   * [ES template delimiters](http://ecma-international.org/ecma-262/7.0/#sec-template-literal-lexical-components).
-   */
-  var reEsTemplate = /\$\{([^\\}]*(?:\\.[^\\}]*)*)\}/g;
-
-  /** Used to match `RegExp` flags from their coerced string values. */
-  var reFlags = /\w*$/;
-
-  /** Used to detect bad signed hexadecimal string values. */
-  var reIsBadHex = /^[-+]0x[0-9a-f]+$/i;
-
-  /** Used to detect binary string values. */
-  var reIsBinary = /^0b[01]+$/i;
-
-  /** Used to detect host constructors (Safari). */
-  var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-  /** Used to detect octal string values. */
-  var reIsOctal = /^0o[0-7]+$/i;
-
-  /** Used to detect unsigned integer values. */
-  var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-  /** Used to match Latin Unicode letters (excluding mathematical operators). */
-  var reLatin = /[\xc0-\xd6\xd8-\xf6\xf8-\xff\u0100-\u017f]/g;
-
-  /** Used to ensure capturing order of template delimiters. */
-  var reNoMatch = /($^)/;
-
-  /** Used to match unescaped characters in compiled string literals. */
-  var reUnescapedString = /['\n\r\u2028\u2029\\]/g;
-
-  /** Used to compose unicode character classes. */
-  var rsAstralRange = '\\ud800-\\udfff',
-      rsComboMarksRange = '\\u0300-\\u036f',
-      reComboHalfMarksRange = '\\ufe20-\\ufe2f',
-      rsComboSymbolsRange = '\\u20d0-\\u20ff',
-      rsComboRange = rsComboMarksRange + reComboHalfMarksRange + rsComboSymbolsRange,
-      rsDingbatRange = '\\u2700-\\u27bf',
-      rsLowerRange = 'a-z\\xdf-\\xf6\\xf8-\\xff',
-      rsMathOpRange = '\\xac\\xb1\\xd7\\xf7',
-      rsNonCharRange = '\\x00-\\x2f\\x3a-\\x40\\x5b-\\x60\\x7b-\\xbf',
-      rsPunctuationRange = '\\u2000-\\u206f',
-      rsSpaceRange = ' \\t\\x0b\\f\\xa0\\ufeff\\n\\r\\u2028\\u2029\\u1680\\u180e\\u2000\\u2001\\u2002\\u2003\\u2004\\u2005\\u2006\\u2007\\u2008\\u2009\\u200a\\u202f\\u205f\\u3000',
-      rsUpperRange = 'A-Z\\xc0-\\xd6\\xd8-\\xde',
-      rsVarRange = '\\ufe0e\\ufe0f',
-      rsBreakRange = rsMathOpRange + rsNonCharRange + rsPunctuationRange + rsSpaceRange;
-
-  /** Used to compose unicode capture groups. */
-  var rsApos = "['\u2019]",
-      rsAstral = '[' + rsAstralRange + ']',
-      rsBreak = '[' + rsBreakRange + ']',
-      rsCombo = '[' + rsComboRange + ']',
-      rsDigits = '\\d+',
-      rsDingbat = '[' + rsDingbatRange + ']',
-      rsLower = '[' + rsLowerRange + ']',
-      rsMisc = '[^' + rsAstralRange + rsBreakRange + rsDigits + rsDingbatRange + rsLowerRange + rsUpperRange + ']',
-      rsFitz = '\\ud83c[\\udffb-\\udfff]',
-      rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
-      rsNonAstral = '[^' + rsAstralRange + ']',
-      rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
-      rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
-      rsUpper = '[' + rsUpperRange + ']',
-      rsZWJ = '\\u200d';
-
-  /** Used to compose unicode regexes. */
-  var rsMiscLower = '(?:' + rsLower + '|' + rsMisc + ')',
-      rsMiscUpper = '(?:' + rsUpper + '|' + rsMisc + ')',
-      rsOptContrLower = '(?:' + rsApos + '(?:d|ll|m|re|s|t|ve))?',
-      rsOptContrUpper = '(?:' + rsApos + '(?:D|LL|M|RE|S|T|VE))?',
-      reOptMod = rsModifier + '?',
-      rsOptVar = '[' + rsVarRange + ']?',
-      rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
-      rsOrdLower = '\\d*(?:1st|2nd|3rd|(?![123])\\dth)(?=\\b|[A-Z_])',
-      rsOrdUpper = '\\d*(?:1ST|2ND|3RD|(?![123])\\dTH)(?=\\b|[a-z_])',
-      rsSeq = rsOptVar + reOptMod + rsOptJoin,
-      rsEmoji = '(?:' + [rsDingbat, rsRegional, rsSurrPair].join('|') + ')' + rsSeq,
-      rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
-
-  /** Used to match apostrophes. */
-  var reApos = RegExp(rsApos, 'g');
-
-  /**
-   * Used to match [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks) and
-   * [combining diacritical marks for symbols](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks_for_Symbols).
-   */
-  var reComboMark = RegExp(rsCombo, 'g');
-
-  /** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
-  var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
-
-  /** Used to match complex or compound words. */
-  var reUnicodeWord = RegExp([
-    rsUpper + '?' + rsLower + '+' + rsOptContrLower + '(?=' + [rsBreak, rsUpper, '$'].join('|') + ')',
-    rsMiscUpper + '+' + rsOptContrUpper + '(?=' + [rsBreak, rsUpper + rsMiscLower, '$'].join('|') + ')',
-    rsUpper + '?' + rsMiscLower + '+' + rsOptContrLower,
-    rsUpper + '+' + rsOptContrUpper,
-    rsOrdUpper,
-    rsOrdLower,
-    rsDigits,
-    rsEmoji
-  ].join('|'), 'g');
-
-  /** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
-  var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange  + rsComboRange + rsVarRange + ']');
-
-  /** Used to detect strings that need a more robust regexp to match words. */
-  var reHasUnicodeWord = /[a-z][A-Z]|[A-Z]{2,}[a-z]|[0-9][a-zA-Z]|[a-zA-Z][0-9]|[^a-zA-Z0-9 ]/;
-
-  /** Used to assign default `context` object properties. */
-  var contextProps = [
-    'Array', 'Buffer', 'DataView', 'Date', 'Error', 'Float32Array', 'Float64Array',
-    'Function', 'Int8Array', 'Int16Array', 'Int32Array', 'Map', 'Math', 'Object',
-    'Promise', 'RegExp', 'Set', 'String', 'Symbol', 'TypeError', 'Uint8Array',
-    'Uint8ClampedArray', 'Uint16Array', 'Uint32Array', 'WeakMap',
-    '_', 'clearTimeout', 'isFinite', 'parseInt', 'setTimeout'
-  ];
-
-  /** Used to make template sourceURLs easier to identify. */
-  var templateCounter = -1;
-
-  /** Used to identify `toStringTag` values of typed arrays. */
-  var typedArrayTags = {};
-  typedArrayTags[float32Tag] = typedArrayTags[float64Tag] =
-  typedArrayTags[int8Tag] = typedArrayTags[int16Tag] =
-  typedArrayTags[int32Tag] = typedArrayTags[uint8Tag] =
-  typedArrayTags[uint8ClampedTag] = typedArrayTags[uint16Tag] =
-  typedArrayTags[uint32Tag] = true;
-  typedArrayTags[argsTag] = typedArrayTags[arrayTag] =
-  typedArrayTags[arrayBufferTag] = typedArrayTags[boolTag] =
-  typedArrayTags[dataViewTag] = typedArrayTags[dateTag] =
-  typedArrayTags[errorTag] = typedArrayTags[funcTag] =
-  typedArrayTags[mapTag] = typedArrayTags[numberTag] =
-  typedArrayTags[objectTag] = typedArrayTags[regexpTag] =
-  typedArrayTags[setTag] = typedArrayTags[stringTag] =
-  typedArrayTags[weakMapTag] = false;
-
-  /** Used to identify `toStringTag` values supported by `_.clone`. */
-  var cloneableTags = {};
-  cloneableTags[argsTag] = cloneableTags[arrayTag] =
-  cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] =
-  cloneableTags[boolTag] = cloneableTags[dateTag] =
-  cloneableTags[float32Tag] = cloneableTags[float64Tag] =
-  cloneableTags[int8Tag] = cloneableTags[int16Tag] =
-  cloneableTags[int32Tag] = cloneableTags[mapTag] =
-  cloneableTags[numberTag] = cloneableTags[objectTag] =
-  cloneableTags[regexpTag] = cloneableTags[setTag] =
-  cloneableTags[stringTag] = cloneableTags[symbolTag] =
-  cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] =
-  cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
-  cloneableTags[errorTag] = cloneableTags[funcTag] =
-  cloneableTags[weakMapTag] = false;
-
-  /** Used to map Latin Unicode letters to basic Latin letters. */
-  var deburredLetters = {
-    // Latin-1 Supplement block.
-    '\xc0': 'A',  '\xc1': 'A', '\xc2': 'A', '\xc3': 'A', '\xc4': 'A', '\xc5': 'A',
-    '\xe0': 'a',  '\xe1': 'a', '\xe2': 'a', '\xe3': 'a', '\xe4': 'a', '\xe5': 'a',
-    '\xc7': 'C',  '\xe7': 'c',
-    '\xd0': 'D',  '\xf0': 'd',
-    '\xc8': 'E',  '\xc9': 'E', '\xca': 'E', '\xcb': 'E',
-    '\xe8': 'e',  '\xe9': 'e', '\xea': 'e', '\xeb': 'e',
-    '\xcc': 'I',  '\xcd': 'I', '\xce': 'I', '\xcf': 'I',
-    '\xec': 'i',  '\xed': 'i', '\xee': 'i', '\xef': 'i',
-    '\xd1': 'N',  '\xf1': 'n',
-    '\xd2': 'O',  '\xd3': 'O', '\xd4': 'O', '\xd5': 'O', '\xd6': 'O', '\xd8': 'O',
-    '\xf2': 'o',  '\xf3': 'o', '\xf4': 'o', '\xf5': 'o', '\xf6': 'o', '\xf8': 'o',
-    '\xd9': 'U',  '\xda': 'U', '\xdb': 'U', '\xdc': 'U',
-    '\xf9': 'u',  '\xfa': 'u', '\xfb': 'u', '\xfc': 'u',
-    '\xdd': 'Y',  '\xfd': 'y', '\xff': 'y',
-    '\xc6': 'Ae', '\xe6': 'ae',
-    '\xde': 'Th', '\xfe': 'th',
-    '\xdf': 'ss',
-    // Latin Extended-A block.
-    '\u0100': 'A',  '\u0102': 'A', '\u0104': 'A',
-    '\u0101': 'a',  '\u0103': 'a', '\u0105': 'a',
-    '\u0106': 'C',  '\u0108': 'C', '\u010a': 'C', '\u010c': 'C',
-    '\u0107': 'c',  '\u0109': 'c', '\u010b': 'c', '\u010d': 'c',
-    '\u010e': 'D',  '\u0110': 'D', '\u010f': 'd', '\u0111': 'd',
-    '\u0112': 'E',  '\u0114': 'E', '\u0116': 'E', '\u0118': 'E', '\u011a': 'E',
-    '\u0113': 'e',  '\u0115': 'e', '\u0117': 'e', '\u0119': 'e', '\u011b': 'e',
-    '\u011c': 'G',  '\u011e': 'G', '\u0120': 'G', '\u0122': 'G',
-    '\u011d': 'g',  '\u011f': 'g', '\u0121': 'g', '\u0123': 'g',
-    '\u0124': 'H',  '\u0126': 'H', '\u0125': 'h', '\u0127': 'h',
-    '\u0128': 'I',  '\u012a': 'I', '\u012c': 'I', '\u012e': 'I', '\u0130': 'I',
-    '\u0129': 'i',  '\u012b': 'i', '\u012d': 'i', '\u012f': 'i', '\u0131': 'i',
-    '\u0134': 'J',  '\u0135': 'j',
-    '\u0136': 'K',  '\u0137': 'k', '\u0138': 'k',
-    '\u0139': 'L',  '\u013b': 'L', '\u013d': 'L', '\u013f': 'L', '\u0141': 'L',
-    '\u013a': 'l',  '\u013c': 'l', '\u013e': 'l', '\u0140': 'l', '\u0142': 'l',
-    '\u0143': 'N',  '\u0145': 'N', '\u0147': 'N', '\u014a': 'N',
-    '\u0144': 'n',  '\u0146': 'n', '\u0148': 'n', '\u014b': 'n',
-    '\u014c': 'O',  '\u014e': 'O', '\u0150': 'O',
-    '\u014d': 'o',  '\u014f': 'o', '\u0151': 'o',
-    '\u0154': 'R',  '\u0156': 'R', '\u0158': 'R',
-    '\u0155': 'r',  '\u0157': 'r', '\u0159': 'r',
-    '\u015a': 'S',  '\u015c': 'S', '\u015e': 'S', '\u0160': 'S',
-    '\u015b': 's',  '\u015d': 's', '\u015f': 's', '\u0161': 's',
-    '\u0162': 'T',  '\u0164': 'T', '\u0166': 'T',
-    '\u0163': 't',  '\u0165': 't', '\u0167': 't',
-    '\u0168': 'U',  '\u016a': 'U', '\u016c': 'U', '\u016e': 'U', '\u0170': 'U', '\u0172': 'U',
-    '\u0169': 'u',  '\u016b': 'u', '\u016d': 'u', '\u016f': 'u', '\u0171': 'u', '\u0173': 'u',
-    '\u0174': 'W',  '\u0175': 'w',
-    '\u0176': 'Y',  '\u0177': 'y', '\u0178': 'Y',
-    '\u0179': 'Z',  '\u017b': 'Z', '\u017d': 'Z',
-    '\u017a': 'z',  '\u017c': 'z', '\u017e': 'z',
-    '\u0132': 'IJ', '\u0133': 'ij',
-    '\u0152': 'Oe', '\u0153': 'oe',
-    '\u0149': "'n", '\u017f': 's'
-  };
-
-  /** Used to map characters to HTML entities. */
-  var htmlEscapes = {
-    '&': '&amp;',
-    '<': '&lt;',
-    '>': '&gt;',
-    '"': '&quot;',
-    "'": '&#39;'
-  };
-
-  /** Used to map HTML entities to characters. */
-  var htmlUnescapes = {
-    '&amp;': '&',
-    '&lt;': '<',
-    '&gt;': '>',
-    '&quot;': '"',
-    '&#39;': "'"
-  };
-
-  /** Used to escape characters for inclusion in compiled string literals. */
-  var stringEscapes = {
-    '\\': '\\',
-    "'": "'",
-    '\n': 'n',
-    '\r': 'r',
-    '\u2028': 'u2028',
-    '\u2029': 'u2029'
-  };
-
-  /** Built-in method references without a dependency on `root`. */
-  var freeParseFloat = parseFloat,
-      freeParseInt = parseInt;
-
-  /** Detect free variable `global` from Node.js. */
-  var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-  /** Detect free variable `self`. */
-  var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-  /** Used as a reference to the global object. */
-  var root = freeGlobal || freeSelf || Function('return this')();
-
-  /** Detect free variable `exports`. */
-  var freeExports = typeof exports == 'object' && exports && !exports.nodeType && exports;
-
-  /** Detect free variable `module`. */
-  var freeModule = freeExports && typeof module == 'object' && module && !module.nodeType && module;
-
-  /** Detect the popular CommonJS extension `module.exports`. */
-  var moduleExports = freeModule && freeModule.exports === freeExports;
-
-  /** Detect free variable `process` from Node.js. */
-  var freeProcess = moduleExports && freeGlobal.process;
-
-  /** Used to access faster Node.js helpers. */
-  var nodeUtil = (function() {
-    try {
-      // Use `util.types` for Node.js 10+.
-      var types = freeModule && freeModule.require && freeModule.require('util').types;
-
-      if (types) {
-        return types;
-      }
-
-      // Legacy `process.binding('util')` for Node.js < 10.
-      return freeProcess && freeProcess.binding && freeProcess.binding('util');
-    } catch (e) {}
-  }());
-
-  /* Node.js helper references. */
-  var nodeIsArrayBuffer = nodeUtil && nodeUtil.isArrayBuffer,
-      nodeIsDate = nodeUtil && nodeUtil.isDate,
-      nodeIsMap = nodeUtil && nodeUtil.isMap,
-      nodeIsRegExp = nodeUtil && nodeUtil.isRegExp,
-      nodeIsSet = nodeUtil && nodeUtil.isSet,
-      nodeIsTypedArray = nodeUtil && nodeUtil.isTypedArray;
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * A faster alternative to `Function#apply`, this function invokes `func`
-   * with the `this` binding of `thisArg` and the arguments of `args`.
-   *
-   * @private
-   * @param {Function} func The function to invoke.
-   * @param {*} thisArg The `this` binding of `func`.
-   * @param {Array} args The arguments to invoke `func` with.
-   * @returns {*} Returns the result of `func`.
-   */
-  function apply(func, thisArg, args) {
-    switch (args.length) {
-      case 0: return func.call(thisArg);
-      case 1: return func.call(thisArg, args[0]);
-      case 2: return func.call(thisArg, args[0], args[1]);
-      case 3: return func.call(thisArg, args[0], args[1], args[2]);
-    }
-    return func.apply(thisArg, args);
-  }
-
-  /**
-   * A specialized version of `baseAggregator` for arrays.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} setter The function to set `accumulator` values.
-   * @param {Function} iteratee The iteratee to transform keys.
-   * @param {Object} accumulator The initial aggregated object.
-   * @returns {Function} Returns `accumulator`.
-   */
-  function arrayAggregator(array, setter, iteratee, accumulator) {
-    var index = -1,
-        length = array == null ? 0 : array.length;
-
-    while (++index < length) {
-      var value = array[index];
-      setter(accumulator, value, iteratee(value), array);
-    }
-    return accumulator;
-  }
-
-  /**
-   * A specialized version of `_.forEach` for arrays without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @returns {Array} Returns `array`.
-   */
-  function arrayEach(array, iteratee) {
-    var index = -1,
-        length = array == null ? 0 : array.length;
-
-    while (++index < length) {
-      if (iteratee(array[index], index, array) === false) {
-        break;
-      }
-    }
-    return array;
-  }
-
-  /**
-   * A specialized version of `_.forEachRight` for arrays without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @returns {Array} Returns `array`.
-   */
-  function arrayEachRight(array, iteratee) {
-    var length = array == null ? 0 : array.length;
-
-    while (length--) {
-      if (iteratee(array[length], length, array) === false) {
-        break;
-      }
-    }
-    return array;
-  }
-
-  /**
-   * A specialized version of `_.every` for arrays without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} predicate The function invoked per iteration.
-   * @returns {boolean} Returns `true` if all elements pass the predicate check,
-   *  else `false`.
-   */
-  function arrayEvery(array, predicate) {
-    var index = -1,
-        length = array == null ? 0 : array.length;
-
-    while (++index < length) {
-      if (!predicate(array[index], index, array)) {
-        return false;
-      }
-    }
-    return true;
-  }
-
-  /**
-   * A specialized version of `_.filter` for arrays without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} predicate The function invoked per iteration.
-   * @returns {Array} Returns the new filtered array.
-   */
-  function arrayFilter(array, predicate) {
-    var index = -1,
-        length = array == null ? 0 : array.length,
-        resIndex = 0,
-        result = [];
-
-    while (++index < length) {
-      var value = array[index];
-      if (predicate(value, index, array)) {
-        result[resIndex++] = value;
-      }
-    }
-    return result;
-  }
-
-  /**
-   * A specialized version of `_.includes` for arrays without support for
-   * specifying an index to search from.
-   *
-   * @private
-   * @param {Array} [array] The array to inspect.
-   * @param {*} target The value to search for.
-   * @returns {boolean} Returns `true` if `target` is found, else `false`.
-   */
-  function arrayIncludes(array, value) {
-    var length = array == null ? 0 : array.length;
-    return !!length && baseIndexOf(array, value, 0) > -1;
-  }
-
-  /**
-   * This function is like `arrayIncludes` except that it accepts a comparator.
-   *
-   * @private
-   * @param {Array} [array] The array to inspect.
-   * @param {*} target The value to search for.
-   * @param {Function} comparator The comparator invoked per element.
-   * @returns {boolean} Returns `true` if `target` is found, else `false`.
-   */
-  function arrayIncludesWith(array, value, comparator) {
-    var index = -1,
-        length = array == null ? 0 : array.length;
-
-    while (++index < length) {
-      if (comparator(value, array[index])) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  /**
-   * A specialized version of `_.map` for arrays without support for iteratee
-   * shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @returns {Array} Returns the new mapped array.
-   */
-  function arrayMap(array, iteratee) {
-    var index = -1,
-        length = array == null ? 0 : array.length,
-        result = Array(length);
-
-    while (++index < length) {
-      result[index] = iteratee(array[index], index, array);
-    }
-    return result;
-  }
-
-  /**
-   * Appends the elements of `values` to `array`.
-   *
-   * @private
-   * @param {Array} array The array to modify.
-   * @param {Array} values The values to append.
-   * @returns {Array} Returns `array`.
-   */
-  function arrayPush(array, values) {
-    var index = -1,
-        length = values.length,
-        offset = array.length;
-
-    while (++index < length) {
-      array[offset + index] = values[index];
-    }
-    return array;
-  }
-
-  /**
-   * A specialized version of `_.reduce` for arrays without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @param {*} [accumulator] The initial value.
-   * @param {boolean} [initAccum] Specify using the first element of `array` as
-   *  the initial value.
-   * @returns {*} Returns the accumulated value.
-   */
-  function arrayReduce(array, iteratee, accumulator, initAccum) {
-    var index = -1,
-        length = array == null ? 0 : array.length;
-
-    if (initAccum && length) {
-      accumulator = array[++index];
-    }
-    while (++index < length) {
-      accumulator = iteratee(accumulator, array[index], index, array);
-    }
-    return accumulator;
-  }
-
-  /**
-   * A specialized version of `_.reduceRight` for arrays without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @param {*} [accumulator] The initial value.
-   * @param {boolean} [initAccum] Specify using the last element of `array` as
-   *  the initial value.
-   * @returns {*} Returns the accumulated value.
-   */
-  function arrayReduceRight(array, iteratee, accumulator, initAccum) {
-    var length = array == null ? 0 : array.length;
-    if (initAccum && length) {
-      accumulator = array[--length];
-    }
-    while (length--) {
-      accumulator = iteratee(accumulator, array[length], length, array);
-    }
-    return accumulator;
-  }
-
-  /**
-   * A specialized version of `_.some` for arrays without support for iteratee
-   * shorthands.
-   *
-   * @private
-   * @param {Array} [array] The array to iterate over.
-   * @param {Function} predicate The function invoked per iteration.
-   * @returns {boolean} Returns `true` if any element passes the predicate check,
-   *  else `false`.
-   */
-  function arraySome(array, predicate) {
-    var index = -1,
-        length = array == null ? 0 : array.length;
-
-    while (++index < length) {
-      if (predicate(array[index], index, array)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  /**
-   * Gets the size of an ASCII `string`.
-   *
-   * @private
-   * @param {string} string The string inspect.
-   * @returns {number} Returns the string size.
-   */
-  var asciiSize = baseProperty('length');
-
-  /**
-   * Converts an ASCII `string` to an array.
-   *
-   * @private
-   * @param {string} string The string to convert.
-   * @returns {Array} Returns the converted array.
-   */
-  function asciiToArray(string) {
-    return string.split('');
-  }
-
-  /**
-   * Splits an ASCII `string` into an array of its words.
-   *
-   * @private
-   * @param {string} The string to inspect.
-   * @returns {Array} Returns the words of `string`.
-   */
-  function asciiWords(string) {
-    return string.match(reAsciiWord) || [];
-  }
-
-  /**
-   * The base implementation of methods like `_.findKey` and `_.findLastKey`,
-   * without support for iteratee shorthands, which iterates over `collection`
-   * using `eachFunc`.
-   *
-   * @private
-   * @param {Array|Object} collection The collection to inspect.
-   * @param {Function} predicate The function invoked per iteration.
-   * @param {Function} eachFunc The function to iterate over `collection`.
-   * @returns {*} Returns the found element or its key, else `undefined`.
-   */
-  function baseFindKey(collection, predicate, eachFunc) {
-    var result;
-    eachFunc(collection, function(value, key, collection) {
-      if (predicate(value, key, collection)) {
-        result = key;
-        return false;
-      }
-    });
-    return result;
-  }
-
-  /**
-   * The base implementation of `_.findIndex` and `_.findLastIndex` without
-   * support for iteratee shorthands.
-   *
-   * @private
-   * @param {Array} array The array to inspect.
-   * @param {Function} predicate The function invoked per iteration.
-   * @param {number} fromIndex The index to search from.
-   * @param {boolean} [fromRight] Specify iterating from right to left.
-   * @returns {number} Returns the index of the matched value, else `-1`.
-   */
-  function baseFindIndex(array, predicate, fromIndex, fromRight) {
-    var length = array.length,
-        index = fromIndex + (fromRight ? 1 : -1);
-
-    while ((fromRight ? index-- : ++index < length)) {
-      if (predicate(array[index], index, array)) {
-        return index;
-      }
-    }
-    return -1;
-  }
-
-  /**
-   * The base implementation of `_.indexOf` without `fromIndex` bounds checks.
-   *
-   * @private
-   * @param {Array} array The array to inspect.
-   * @param {*} value The value to search for.
-   * @param {number} fromIndex The index to search from.
-   * @returns {number} Returns the index of the matched value, else `-1`.
-   */
-  function baseIndexOf(array, value, fromIndex) {
-    return value === value
-      ? strictIndexOf(array, value, fromIndex)
-      : baseFindIndex(array, baseIsNaN, fromIndex);
-  }
-
-  /**
-   * This function is like `baseIndexOf` except that it accepts a comparator.
-   *
-   * @private
-   * @param {Array} array The array to inspect.
-   * @param {*} value The value to search for.
-   * @param {number} fromIndex The index to search from.
-   * @param {Function} comparator The comparator invoked per element.
-   * @returns {number} Returns the index of the matched value, else `-1`.
-   */
-  function baseIndexOfWith(array, value, fromIndex, comparator) {
-    var index = fromIndex - 1,
-        length = array.length;
-
-    while (++index < length) {
-      if (comparator(array[index], value)) {
-        return index;
-      }
-    }
-    return -1;
-  }
-
-  /**
-   * The base implementation of `_.isNaN` without support for number objects.
-   *
-   * @private
-   * @param {*} value The value to check.
-   * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
-   */
-  function baseIsNaN(value) {
-    return value !== value;
-  }
-
-  /**
-   * The base implementation of `_.mean` and `_.meanBy` without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} array The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @returns {number} Returns the mean.
-   */
-  function baseMean(array, iteratee) {
-    var length = array == null ? 0 : array.length;
-    return length ? (baseSum(array, iteratee) / length) : NAN;
-  }
-
-  /**
-   * The base implementation of `_.property` without support for deep paths.
-   *
-   * @private
-   * @param {string} key The key of the property to get.
-   * @returns {Function} Returns the new accessor function.
-   */
-  function baseProperty(key) {
-    return function(object) {
-      return object == null ? undefined : object[key];
-    };
-  }
-
-  /**
-   * The base implementation of `_.propertyOf` without support for deep paths.
-   *
-   * @private
-   * @param {Object} object The object to query.
-   * @returns {Function} Returns the new accessor function.
-   */
-  function basePropertyOf(object) {
-    return function(key) {
-      return object == null ? undefined : object[key];
-    };
-  }
-
-  /**
-   * The base implementation of `_.reduce` and `_.reduceRight`, without support
-   * for iteratee shorthands, which iterates over `collection` using `eachFunc`.
-   *
-   * @private
-   * @param {Array|Object} collection The collection to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @param {*} accumulator The initial value.
-   * @param {boolean} initAccum Specify using the first or last element of
-   *  `collection` as the initial value.
-   * @param {Function} eachFunc The function to iterate over `collection`.
-   * @returns {*} Returns the accumulated value.
-   */
-  function baseReduce(collection, iteratee, accumulator, initAccum, eachFunc) {
-    eachFunc(collection, function(value, index, collection) {
-      accumulator = initAccum
-        ? (initAccum = false, value)
-        : iteratee(accumulator, value, index, collection);
-    });
-    return accumulator;
-  }
-
-  /**
-   * The base implementation of `_.sortBy` which uses `comparer` to define the
-   * sort order of `array` and replaces criteria objects with their corresponding
-   * values.
-   *
-   * @private
-   * @param {Array} array The array to sort.
-   * @param {Function} comparer The function to define sort order.
-   * @returns {Array} Returns `array`.
-   */
-  function baseSortBy(array, comparer) {
-    var length = array.length;
-
-    array.sort(comparer);
-    while (length--) {
-      array[length] = array[length].value;
-    }
-    return array;
-  }
-
-  /**
-   * The base implementation of `_.sum` and `_.sumBy` without support for
-   * iteratee shorthands.
-   *
-   * @private
-   * @param {Array} array The array to iterate over.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @returns {number} Returns the sum.
-   */
-  function baseSum(array, iteratee) {
-    var result,
-        index = -1,
-        length = array.length;
-
-    while (++index < length) {
-      var current = iteratee(array[index]);
-      if (current !== undefined) {
-        result = result === undefined ? current : (result + current);
-      }
-    }
-    return result;
-  }
-
-  /**
-   * The base implementation of `_.times` without support for iteratee shorthands
-   * or max array length checks.
-   *
-   * @private
-   * @param {number} n The number of times to invoke `iteratee`.
-   * @param {Function} iteratee The function invoked per iteration.
-   * @returns {Array} Returns the array of results.
-   */
-  function baseTimes(n, iteratee) {
-    var index = -1,
-        result = Array(n);
-
-    while (++index < n) {
-      result[index] = iteratee(index);
-    }
-    return result;
-  }
-
-  /**
-   * The base implementation of `_.toPairs` and `_.toPairsIn` which creates an array
-   * of key-value pairs for `object` corresponding to the property names of `props`.
-   *
-   * @private
-   * @param {Object} object The object to query.
-   * @param {Array} props The property names to get values for.
-   * @returns {Object} Returns the key-value pairs.
-   */
-  function baseToPairs(object, props) {
-    return arrayMap(props, function(key) {
-      return [key, object[key]];
-    });
-  }
-
-  /**
-   * The base implementation of `_.unary` without support for storing metadata.
-   *
-   * @private
-   * @param {Function} func The function to cap arguments for.
-   * @returns {Function} Returns the new capped function.
-   */
-  function baseUnary(func) {
-    return function(value) {
-      return func(value);
-    };
-  }
-
-  /**
-   * The base implementation of `_.values` and `_.valuesIn` which creates an
-   * array of `object` property values corresponding to the property names
-   * of `props`.
-   *
-   * @private
-   * @param {Object} object The object to query.
-   * @param {Array} props The property names to get values for.
-   * @returns {Object} Returns the array of property values.
-   */
-  function baseValues(object, props) {
-    return arrayMap(props, function(key) {
-      return object[key];
-    });
-  }
-
-  /**
-   * Checks if a `cache` value for `key` exists.
-   *
-   * @private
-   * @param {Object} cache The cache to query.
-   * @param {string} key The key of the entry to check.
-   * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
-   */
-  function cacheHas(cache, key) {
-    return cache.has(key);
-  }
-
-  /**
-   * Used by `_.trim` and `_.trimStart` to get the index of the first string symbol
-   * that is not found in the character symbols.
-   *
-   * @private
-   * @param {Array} strSymbols The string symbols to inspect.
-   * @param {Array} chrSymbols The character symbols to find.
-   * @returns {number} Returns the index of the first unmatched string symbol.
-   */
-  function charsStartIndex(strSymbols, chrSymbols) {
-    var index = -1,
-        length = strSymbols.length;
-
-    while (++index < length && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}
-    return index;
-  }
-
-  /**
-   * Used by `_.trim` and `_.trimEnd` to get the index of the last string symbol
-   * that is not found in the character symbols.
-   *
-   * @private
-   * @param {Array} strSymbols The string symbols to inspect.
-   * @param {Array} chrSymbols The character symbols to find.
-   * @returns {number} Returns the index of the last unmatched string symbol.
-   */
-  function charsEndIndex(strSymbols, chrSymbols) {
-    var index = strSymbols.length;
-
-    while (index-- && baseIndexOf(chrSymbols, strSymbols[index], 0) > -1) {}
-    return index;
-  }
-
-  /**
-   * Gets the number of `placeholder` occurrences in `array`.
-   *
-   * @private
-   * @param {Array} array The array to inspect.
-   * @param {*} placeholder The placeholder to search for.
-   * @returns {number} Returns the placeholder count.
-   */
-  function countHolders(array, placeholder) {
-    var length = array.length,
-        result = 0;
-
-    while (length--) {
-      if (array[length] === placeholder) {
-        ++result;
-      }
-    }
-    return result;
-  }
-
-  /**
-   * Used by `_.deburr` to convert Latin-1 Supplement and Latin Extended-A
-   * letters to basic Latin letters.
-   *
-   * @private
-   * @param {string} letter The matched letter to deburr.
-   * @returns {string} Returns the deburred letter.
-   */
-  var deburrLetter = basePropertyOf(deburredLetters);
-
-  /**
-   * Used by `_.escape` to convert characters to HTML entities.
-   *
-   * @private
-   * @param {string} chr The matched character to escape.
-   * @returns {string} Returns the escaped character.
-   */
-  var escapeHtmlChar = basePropertyOf(htmlEscapes);
-
-  /**
-   * Used by `_.template` to escape characters for inclusion in compiled string literals.
-   *
-   * @private
-   * @param {string} chr The matched character to escape.
-   * @returns {string} Returns the escaped character.
-   */
-  function escapeStringChar(chr) {
-    return '\\' + stringEscapes[chr];
-  }
-
-  /**
-   * Gets the value at `key` of `object`.
-   *
-   * @private
-   * @param {Object} [object] The object to query.
-   * @param {string} key The key of the property to get.
-   * @returns {*} Returns the property value.
-   */
-  function getValue(object, key) {
-    return object == null ? undefined : object[key];
-  }
-
-  /**
-   * Checks if `string` contains Unicode symbols.
-   *
-   * @private
-   * @param {string} string The string to inspect.
-   * @returns {boolean} Returns `true` if a symbol is found, else `false`.
-   */
-  function hasUnicode(string) {
-    return reHasUnicode.test(string);
-  }
-
-  /**
-   * Checks if `string` contains a word composed of Unicode symbols.
-   *
-   * @private
-   * @param {string} string The string to inspect.
-   * @returns {boolean} Returns `true` if a word is found, else `false`.
-   */
-  function hasUnicodeWord(string) {
-    return reHasUnicodeWord.test(string);
-  }
-
-  /**
-   * Converts `iterator` to an array.
-   *
-   * @private
-   * @param {Object} iterator The iterator to convert.
-   * @returns {Array} Returns the converted array.
-   */
-  function iteratorToArray(iterator) {
-    var data,
-        result = [];
-
-    while (!(data = iterator.next()).done) {
-      result.push(data.value);
-    }
-    return result;
-  }
-
-  /**
-   * Converts `map` to its key-value pairs.
-   *
-   * @private
-   * @param {Object} map The map to convert.
-   * @returns {Array} Returns the key-value pairs.
-   */
-  function mapToArray(map) {
-    var index = -1,
-        result = Array(map.size);
-
-    map.forEach(function(value, key) {
-      result[++index] = [key, value];
-    });
-    return result;
-  }
-
-  /**
-   * Creates a unary function that invokes `func` with its argument transformed.
-   *
-   * @private
-   * @param {Function} func The function to wrap.
-   * @param {Function} transform The argument transform.
-   * @returns {Function} Returns the new function.
-   */
-  function overArg(func, transform) {
-    return function(arg) {
-      return func(transform(arg));
-    };
-  }
-
-  /**
-   * Replaces all `placeholder` elements in `array` with an internal placeholder
-   * and returns an array of their indexes.
-   *
-   * @private
-   * @param {Array} array The array to modify.
-   * @param {*} placeholder The placeholder to replace.
-   * @returns {Array} Returns the new array of placeholder indexes.
-   */
-  function replaceHolders(array, placeholder) {
-    var index = -1,
-        length = array.length,
-        resIndex = 0,
-        result = [];
-
-    while (++index < length) {
-      var value = array[index];
-      if (value === placeholder || value === PLACEHOLDER) {
-        array[index] = PLACEHOLDER;
-        result[resIndex++] = index;
-      }
-    }
-    return result;
-  }
-
-  /**
-   * Gets the value at `key`, unless `key` is "__proto__".
-   *
-   * @private
-   * @param {Object} object The object to query.
-   * @param {string} key The key of the property to get.
-   * @returns {*} Returns the property value.
-   */
-  function safeGet(object, key) {
-    return key == '__proto__'
-      ? undefined
-      : object[key];
-  }
-
-  /**
-   * Converts `set` to an array of its values.
-   *
-   * @private
-   * @param {Object} set The set to convert.
-   * @returns {Array} Returns the values.
-   */
-  function setToArray(set) {
-    var index = -1,
-        result = Array(set.size);
-
-    set.forEach(function(value) {
-      result[++index] = value;
-    });
-    return result;
-  }
-
-  /**
-   * Converts `set` to its value-value pairs.
-   *
-   * @private
-   * @param {Object} set The set to convert.
-   * @returns {Array} Returns the value-value pairs.
-   */
-  function setToPairs(set) {
-    var index = -1,
-        result = Array(set.size);
-
-    set.forEach(function(value) {
-      result[++index] = [value, value];
-    });
-    return result;
-  }
-
-  /**
-   * A specialized version of `_.indexOf` which performs strict equality
-   * comparisons of values, i.e. `===`.
-   *
-   * @private
-   * @param {Array} array The array to inspect.
-   * @param {*} value The value to search for.
-   * @param {number} fromIndex The index to search from.
-   * @returns {number} Returns the index of the matched value, else `-1`.
-   */
-  function strictIndexOf(array, value, fromIndex) {
-    var index = fromIndex - 1,
-        length = array.length;
-
-    while (++index < length) {
-      if (array[index] === value) {
-        return index;
-      }
-    }
-    return -1;
-  }
-
-  /**
-   * A specialized version of `_.lastIndexOf` which performs strict equality
-   * comparisons of values, i.e. `===`.
-   *
-   * @private
-   * @param {Array} array The array to inspect.
-   * @param {*} value The value to search for.
-   * @param {number} fromIndex The index to search from.
-   * @returns {number} Returns the index of the matched value, else `-1`.
-   */
-  function strictLastIndexOf(array, value, fromIndex) {
-    var index = fromIndex + 1;
-    while (index--) {
-      if (array[index] === value) {
-        return index;
-      }
-    }
-    return index;
-  }
-
-  /**
-   * Gets the number of symbols in `string`.
-   *
-   * @private
-   * @param {string} string The string to inspect.
-   * @returns {number} Returns the string size.
-   */
-  function stringSize(string) {
-    return hasUnicode(string)
-      ? unicodeSize(string)
-      : asciiSize(string);
-  }
-
-  /**
-   * Converts `string` to an array.
-   *
-   * @private
-   * @param {string} string The string to convert.
-   * @returns {Array} Returns the converted array.
-   */
-  function stringToArray(string) {
-    return hasUnicode(string)
-      ? unicodeToArray(string)
-      : asciiToArray(string);
-  }
-
-  /**
-   * Used by `_.unescape` to convert HTML entities to characters.
-   *
-   * @private
-   * @param {string} chr The matched character to unescape.
-   * @returns {string} Returns the unescaped character.
-   */
-  var unescapeHtmlChar = basePropertyOf(htmlUnescapes);
-
-  /**
-   * Gets the size of a Unicode `string`.
-   *
-   * @private
-   * @param {string} string The string inspect.
-   * @returns {number} Returns the string size.
-   */
-  function unicodeSize(string) {
-    var result = reUnicode.lastIndex = 0;
-    while (reUnicode.test(string)) {
-      ++result;
-    }
-    return result;
-  }
-
-  /**
-   * Converts a Unicode `string` to an array.
-   *
-   * @private
-   * @param {string} string The string to convert.
-   * @returns {Array} Returns the converted array.
-   */
-  function unicodeToArray(string) {
-    return string.match(reUnicode) || [];
-  }
-
-  /**
-   * Splits a Unicode `string` into an array of its words.
-   *
-   * @private
-   * @param {string} The string to inspect.
-   * @returns {Array} Returns the words of `string`.
-   */
-  function unicodeWords(string) {
-    return string.match(reUnicodeWord) || [];
-  }
-
-  /*--------------------------------------------------------------------------*/
-
-  /**
-   * Create a new pristine `lodash` function using the `context` object.
-   *
-   * @static
-   * @memberOf _
-   * @since 1.1.0
-   * @category Util
-   * @param {Object} [context=root] The context object.
-   * @returns {Function} Returns a new `lodash` function.
-   * @example
-   *
-   * _.mixin({ 'foo': _.constant('foo') });
-   *
-   * var lodash = _.runInContext();
-   * lodash.mixin({ 'bar': lodash.constant('bar') });
-   *
-   * _.isFunction(_.foo);
-   * // => true
-   * _.isFunction(_.bar);
-   * // => false
-   *
-   * lodash.isFunction(lodash.foo);
-   * // => false
-   * lodash.isFunction(lodash.bar);
-   * // => true
-   *
-   * // Create a suped-up `defer` in Node.js.
-   * var defer = _.runInContext({ 'setTimeout': setImmediate }).defer;
-   */
-  var runInContext = (function runInContext(context) {
-    context = context == null ? root : _.defaults(root.Object(), context, _.pick(root, contextProps));
-
-    /** Built-in constructor references. */
-    var Array = context.Array,
-        Date = context.Date,
-        Error = context.Error,
-        Function = context.Function,
-        Math = context.Math,
-        Object = context.Object,
-        RegExp = context.RegExp,
-        String = context.String,
-        TypeError = context.TypeError;
-
-    /** Used for built-in method references. */
-    var arrayProto = Array.prototype,
-        funcProto = Function.prototype,
-        objectProto = Object.prototype;
-
-    /** Used to detect overreaching core-js shims. */
-    var coreJsData = context['__core-js_shared__'];
-
-    /** Used to resolve the decompiled source of functions. */
-    var funcToString = funcProto.toString;
-
-    /** Used to check objects for own properties. */
-    var hasOwnProperty = objectProto.hasOwnProperty;
-
-    /** Used to generate unique IDs. */
-    var idCounter = 0;
-
-    /** Used to detect methods masquerading as native. */
-    var maskSrcKey = (function() {
-      var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
-      return uid ? ('Symbol(src)_1.' + uid) : '';
-    }());
-
-    /**
-     * Used to resolve the
-     * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
-     * of values.
-     */
-    var nativeObjectToString = objectProto.toString;
-
-    /** Used to infer the `Object` constructor. */
-    var objectCtorString = funcToString.call(Object);
-
-    /** Used to restore the original `_` reference in `_.noConflict`. */
-    var oldDash = root._;
-
-    /** Used to detect if a method is native. */
-    var reIsNative = RegExp('^' +
-      funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
-      .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-    );
-
-    /** Built-in value references. */
-    var Buffer = moduleExports ? context.Buffer : undefined,
-        Symbol = context.Symbol,
-        Uint8Array = context.Uint8Array,
-        allocUnsafe = Buffer ? Buffer.allocUnsafe : undefined,
-        getPrototype = overArg(Object.getPrototypeOf, Object),
-        objectCreate = Object.create,
-        propertyIsEnumerable = objectProto.propertyIsEnumerable,
-        splice = arrayProto.splice,
-        spreadableSymbol = Symbol ? Symbol.isConcatSpreadable : undefined,
-        symIterator = Symbol ? Symbol.iterator : undefined,
-        symToStringTag = Symbol ? Symbol.toStringTag : undefined;
-
-    var defineProperty = (function() {
-      try {
-        var func = getNative(Object, 'defineProperty');
-        func({}, '', {});
-        return func;
-      } catch (e) {}
-    }());
-
-    /** Mocked built-ins. */
-    var ctxClearTimeout = context.clearTimeout !== root.clearTimeout && context.clearTimeout,
-        ctxNow = Date && Date.now !== root.Date.now && Date.now,
-        ctxSetTimeout = context.setTimeout !== root.setTimeout && context.setTimeout;
-
-    /* Built-in method references for those with the same name as other `lodash` methods. */
-    var nativeCeil = Math.ceil,
-        nativeFloor = Math.floor,
-        nativeGetSymbols = Object.getOwnPropertySymbols,
-        nativeIsBuffer = Buffer ? Buffer.isBuffer : undefined,
-        nativeIsFinite = context.isFinite,
-        nativeJoin = arrayProto.join,
-        nativeKeys = overArg(Object.keys, Object),
-        nativeMax = Math.max,
-        nativeMin = Math.min,
-        nativeNow = Date.now,
-        nativeParseInt = context.parseInt,
-        nativeRandom = Math.random,
-        nativeReverse = arrayProto.reverse;
-
-    /* Built-in method references that are verified to be native. */
-    var DataView = getNative(context, 'DataView'),
-        Map = getNative(context, 'Map'),
-        Promise = getNative(context, 'Promise'),
-        Set = getNative(context, 'Set'),
-        WeakMap = getNative(context, 'WeakMap'),
-        nativeCreate = getNative(Object, 'create');
-
-    /** Used to store function metadata. */
-    var metaMap = WeakMap && new WeakMap;
-
-    /** Used to lookup unminified function names. */
-    var realNames = {};
-
-    /** Used to detect maps, sets, and weakmaps. */
-    var dataViewCtorString = toSource(DataView),
-        mapCtorString = toSource(Map),
-        promiseCtorString = toSource(Promise),
-        setCtorString = toSource(Set),
-        weakMapCtorString = toSource(WeakMap);
-
-    /** Used to convert symbols to primitives and strings. */
-    var symbolProto = Symbol ? Symbol.prototype : undefined,
-        symbolValueOf = symbolProto ? symbolProto.valueOf : undefined,
-        symbolToString = symbolProto ? symbolProto.toString : undefined;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates a `lodash` object which wraps `value` to enable implicit method
-     * chain sequences. Methods that operate on and return arrays, collections,
-     * and functions can be chained together. Methods that retrieve a single value
-     * or may return a primitive value will automatically end the chain sequence
-     * and return the unwrapped value. Otherwise, the value must be unwrapped
-     * with `_#value`.
-     *
-     * Explicit chain sequences, which must be unwrapped with `_#value`, may be
-     * enabled using `_.chain`.
-     *
-     * The execution of chained methods is lazy, that is, it's deferred until
-     * `_#value` is implicitly or explicitly called.
-     *
-     * Lazy evaluation allows several methods to support shortcut fusion.
-     * Shortcut fusion is an optimization to merge iteratee calls; this avoids
-     * the creation of intermediate arrays and can greatly reduce the number of
-     * iteratee executions. Sections of a chain sequence qualify for shortcut
-     * fusion if the section is applied to an array and iteratees accept only
-     * one argument. The heuristic for whether a section qualifies for shortcut
-     * fusion is subject to change.
-     *
-     * Chaining is supported in custom builds as long as the `_#value` method is
-     * directly or indirectly included in the build.
-     *
-     * In addition to lodash methods, wrappers have `Array` and `String` methods.
-     *
-     * The wrapper `Array` methods are:
-     * `concat`, `join`, `pop`, `push`, `shift`, `sort`, `splice`, and `unshift`
-     *
-     * The wrapper `String` methods are:
-     * `replace` and `split`
-     *
-     * The wrapper methods that support shortcut fusion are:
-     * `at`, `compact`, `drop`, `dropRight`, `dropWhile`, `filter`, `find`,
-     * `findLast`, `head`, `initial`, `last`, `map`, `reject`, `reverse`, `slice`,
-     * `tail`, `take`, `takeRight`, `takeRightWhile`, `takeWhile`, and `toArray`
-     *
-     * The chainable wrapper methods are:
-     * `after`, `ary`, `assign`, `assignIn`, `assignInWith`, `assignWith`, `at`,
-     * `before`, `bind`, `bindAll`, `bindKey`, `castArray`, `chain`, `chunk`,
-     * `commit`, `compact`, `concat`, `conforms`, `constant`, `countBy`, `create`,
-     * `curry`, `debounce`, `defaults`, `defaultsDeep`, `defer`, `delay`,
-     * `difference`, `differenceBy`, `differenceWith`, `drop`, `dropRight`,
-     * `dropRightWhile`, `dropWhile`, `extend`, `extendWith`, `fill`, `filter`,
-     * `flatMap`, `flatMapDeep`, `flatMapDepth`, `flatten`, `flattenDeep`,
-     * `flattenDepth`, `flip`, `flow`, `flowRight`, `fromPairs`, `functions`,
-     * `functionsIn`, `groupBy`, `initial`, `intersection`, `intersectionBy`,
-     * `intersectionWith`, `invert`, `invertBy`, `invokeMap`, `iteratee`, `keyBy`,
-     * `keys`, `keysIn`, `map`, `mapKeys`, `mapValues`, `matches`, `matchesProperty`,
-     * `memoize`, `merge`, `mergeWith`, `method`, `methodOf`, `mixin`, `negate`,
-     * `nthArg`, `omit`, `omitBy`, `once`, `orderBy`, `over`, `overArgs`,
-     * `overEvery`, `overSome`, `partial`, `partialRight`, `partition`, `pick`,
-     * `pickBy`, `plant`, `property`, `propertyOf`, `pull`, `pullAll`, `pullAllBy`,
-     * `pullAllWith`, `pullAt`, `push`, `range`, `rangeRight`, `rearg`, `reject`,
-     * `remove`, `rest`, `reverse`, `sampleSize`, `set`, `setWith`, `shuffle`,
-     * `slice`, `sort`, `sortBy`, `splice`, `spread`, `tail`, `take`, `takeRight`,
-     * `takeRightWhile`, `takeWhile`, `tap`, `throttle`, `thru`, `toArray`,
-     * `toPairs`, `toPairsIn`, `toPath`, `toPlainObject`, `transform`, `unary`,
-     * `union`, `unionBy`, `unionWith`, `uniq`, `uniqBy`, `uniqWith`, `unset`,
-     * `unshift`, `unzip`, `unzipWith`, `update`, `updateWith`, `values`,
-     * `valuesIn`, `without`, `wrap`, `xor`, `xorBy`, `xorWith`, `zip`,
-     * `zipObject`, `zipObjectDeep`, and `zipWith`
-     *
-     * The wrapper methods that are **not** chainable by default are:
-     * `add`, `attempt`, `camelCase`, `capitalize`, `ceil`, `clamp`, `clone`,
-     * `cloneDeep`, `cloneDeepWith`, `cloneWith`, `conformsTo`, `deburr`,
-     * `defaultTo`, `divide`, `each`, `eachRight`, `endsWith`, `eq`, `escape`,
-     * `escapeRegExp`, `every`, `find`, `findIndex`, `findKey`, `findLast`,
-     * `findLastIndex`, `findLastKey`, `first`, `floor`, `forEach`, `forEachRight`,
-     * `forIn`, `forInRight`, `forOwn`, `forOwnRight`, `get`, `gt`, `gte`, `has`,
-     * `hasIn`, `head`, `identity`, `includes`, `indexOf`, `inRange`, `invoke`,
-     * `isArguments`, `isArray`, `isArrayBuffer`, `isArrayLike`, `isArrayLikeObject`,
-     * `isBoolean`, `isBuffer`, `isDate`, `isElement`, `isEmpty`, `isEqual`,
-     * `isEqualWith`, `isError`, `isFinite`, `isFunction`, `isInteger`, `isLength`,
-     * `isMap`, `isMatch`, `isMatchWith`, `isNaN`, `isNative`, `isNil`, `isNull`,
-     * `isNumber`, `isObject`, `isObjectLike`, `isPlainObject`, `isRegExp`,
-     * `isSafeInteger`, `isSet`, `isString`, `isUndefined`, `isTypedArray`,
-     * `isWeakMap`, `isWeakSet`, `join`, `kebabCase`, `last`, `lastIndexOf`,
-     * `lowerCase`, `lowerFirst`, `lt`, `lte`, `max`, `maxBy`, `mean`, `meanBy`,
-     * `min`, `minBy`, `multiply`, `noConflict`, `noop`, `now`, `nth`, `pad`,
-     * `padEnd`, `padStart`, `parseInt`, `pop`, `random`, `reduce`, `reduceRight`,
-     * `repeat`, `result`, `round`, `runInContext`, `sample`, `shift`, `size`,
-     * `snakeCase`, `some`, `sortedIndex`, `sortedIndexBy`, `sortedLastIndex`,
-     * `sortedLastIndexBy`, `startCase`, `startsWith`, `stubArray`, `stubFalse`,
-     * `stubObject`, `stubString`, `stubTrue`, `subtract`, `sum`, `sumBy`,
-     * `template`, `times`, `toFinite`, `toInteger`, `toJSON`, `toLength`,
-     * `toLower`, `toNumber`, `toSafeInteger`, `toString`, `toUpper`, `trim`,
-     * `trimEnd`, `trimStart`, `truncate`, `unescape`, `uniqueId`, `upperCase`,
-     * `upperFirst`, `value`, and `words`
-     *
-     * @name _
-     * @constructor
-     * @category Seq
-     * @param {*} value The value to wrap in a `lodash` instance.
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * function square(n) {
-     *   return n * n;
-     * }
-     *
-     * var wrapped = _([1, 2, 3]);
-     *
-     * // Returns an unwrapped value.
-     * wrapped.reduce(_.add);
-     * // => 6
-     *
-     * // Returns a wrapped value.
-     * var squares = wrapped.map(square);
-     *
-     * _.isArray(squares);
-     * // => false
-     *
-     * _.isArray(squares.value());
-     * // => true
-     */
-    function lodash(value) {
-      if (isObjectLike(value) && !isArray(value) && !(value instanceof LazyWrapper)) {
-        if (value instanceof LodashWrapper) {
-          return value;
-        }
-        if (hasOwnProperty.call(value, '__wrapped__')) {
-          return wrapperClone(value);
-        }
-      }
-      return new LodashWrapper(value);
-    }
-
-    /**
-     * The base implementation of `_.create` without support for assigning
-     * properties to the created object.
-     *
-     * @private
-     * @param {Object} proto The object to inherit from.
-     * @returns {Object} Returns the new object.
-     */
-    var baseCreate = (function() {
-      function object() {}
-      return function(proto) {
-        if (!isObject(proto)) {
-          return {};
-        }
-        if (objectCreate) {
-          return objectCreate(proto);
-        }
-        object.prototype = proto;
-        var result = new object;
-        object.prototype = undefined;
-        return result;
-      };
-    }());
-
-    /**
-     * The function whose prototype chain sequence wrappers inherit from.
-     *
-     * @private
-     */
-    function baseLodash() {
-      // No operation performed.
-    }
-
-    /**
-     * The base constructor for creating `lodash` wrapper objects.
-     *
-     * @private
-     * @param {*} value The value to wrap.
-     * @param {boolean} [chainAll] Enable explicit method chain sequences.
-     */
-    function LodashWrapper(value, chainAll) {
-      this.__wrapped__ = value;
-      this.__actions__ = [];
-      this.__chain__ = !!chainAll;
-      this.__index__ = 0;
-      this.__values__ = undefined;
-    }
-
-    /**
-     * By default, the template delimiters used by lodash are like those in
-     * embedded Ruby (ERB) as well as ES2015 template strings. Change the
-     * following template settings to use alternative delimiters.
-     *
-     * @static
-     * @memberOf _
-     * @type {Object}
-     */
-    lodash.templateSettings = {
-
-      /**
-       * Used to detect `data` property values to be HTML-escaped.
-       *
-       * @memberOf _.templateSettings
-       * @type {RegExp}
-       */
-      'escape': reEscape,
-
-      /**
-       * Used to detect code to be evaluated.
-       *
-       * @memberOf _.templateSettings
-       * @type {RegExp}
-       */
-      'evaluate': reEvaluate,
-
-      /**
-       * Used to detect `data` property values to inject.
-       *
-       * @memberOf _.templateSettings
-       * @type {RegExp}
-       */
-      'interpolate': reInterpolate,
-
-      /**
-       * Used to reference the data object in the template text.
-       *
-       * @memberOf _.templateSettings
-       * @type {string}
-       */
-      'variable': '',
-
-      /**
-       * Used to import variables into the compiled template.
-       *
-       * @memberOf _.templateSettings
-       * @type {Object}
-       */
-      'imports': {
-
-        /**
-         * A reference to the `lodash` function.
-         *
-         * @memberOf _.templateSettings.imports
-         * @type {Function}
-         */
-        '_': lodash
-      }
-    };
-
-    // Ensure wrappers are instances of `baseLodash`.
-    lodash.prototype = baseLodash.prototype;
-    lodash.prototype.constructor = lodash;
-
-    LodashWrapper.prototype = baseCreate(baseLodash.prototype);
-    LodashWrapper.prototype.constructor = LodashWrapper;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates a lazy wrapper object which wraps `value` to enable lazy evaluation.
-     *
-     * @private
-     * @constructor
-     * @param {*} value The value to wrap.
-     */
-    function LazyWrapper(value) {
-      this.__wrapped__ = value;
-      this.__actions__ = [];
-      this.__dir__ = 1;
-      this.__filtered__ = false;
-      this.__iteratees__ = [];
-      this.__takeCount__ = MAX_ARRAY_LENGTH;
-      this.__views__ = [];
-    }
-
-    /**
-     * Creates a clone of the lazy wrapper object.
-     *
-     * @private
-     * @name clone
-     * @memberOf LazyWrapper
-     * @returns {Object} Returns the cloned `LazyWrapper` object.
-     */
-    function lazyClone() {
-      var result = new LazyWrapper(this.__wrapped__);
-      result.__actions__ = copyArray(this.__actions__);
-      result.__dir__ = this.__dir__;
-      result.__filtered__ = this.__filtered__;
-      result.__iteratees__ = copyArray(this.__iteratees__);
-      result.__takeCount__ = this.__takeCount__;
-      result.__views__ = copyArray(this.__views__);
-      return result;
-    }
-
-    /**
-     * Reverses the direction of lazy iteration.
-     *
-     * @private
-     * @name reverse
-     * @memberOf LazyWrapper
-     * @returns {Object} Returns the new reversed `LazyWrapper` object.
-     */
-    function lazyReverse() {
-      if (this.__filtered__) {
-        var result = new LazyWrapper(this);
-        result.__dir__ = -1;
-        result.__filtered__ = true;
-      } else {
-        result = this.clone();
-        result.__dir__ *= -1;
-      }
-      return result;
-    }
-
-    /**
-     * Extracts the unwrapped value from its lazy wrapper.
-     *
-     * @private
-     * @name value
-     * @memberOf LazyWrapper
-     * @returns {*} Returns the unwrapped value.
-     */
-    function lazyValue() {
-      var array = this.__wrapped__.value(),
-          dir = this.__dir__,
-          isArr = isArray(array),
-          isRight = dir < 0,
-          arrLength = isArr ? array.length : 0,
-          view = getView(0, arrLength, this.__views__),
-          start = view.start,
-          end = view.end,
-          length = end - start,
-          index = isRight ? end : (start - 1),
-          iteratees = this.__iteratees__,
-          iterLength = iteratees.length,
-          resIndex = 0,
-          takeCount = nativeMin(length, this.__takeCount__);
-
-      if (!isArr || (!isRight && arrLength == length && takeCount == length)) {
-        return baseWrapperValue(array, this.__actions__);
-      }
-      var result = [];
-
-      outer:
-      while (length-- && resIndex < takeCount) {
-        index += dir;
-
-        var iterIndex = -1,
-            value = array[index];
-
-        while (++iterIndex < iterLength) {
-          var data = iteratees[iterIndex],
-              iteratee = data.iteratee,
-              type = data.type,
-              computed = iteratee(value);
-
-          if (type == LAZY_MAP_FLAG) {
-            value = computed;
-          } else if (!computed) {
-            if (type == LAZY_FILTER_FLAG) {
-              continue outer;
-            } else {
-              break outer;
-            }
-          }
-        }
-        result[resIndex++] = value;
-      }
-      return result;
-    }
-
-    // Ensure `LazyWrapper` is an instance of `baseLodash`.
-    LazyWrapper.prototype = baseCreate(baseLodash.prototype);
-    LazyWrapper.prototype.constructor = LazyWrapper;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates a hash object.
-     *
-     * @private
-     * @constructor
-     * @param {Array} [entries] The key-value pairs to cache.
-     */
-    function Hash(entries) {
-      var index = -1,
-          length = entries == null ? 0 : entries.length;
-
-      this.clear();
-      while (++index < length) {
-        var entry = entries[index];
-        this.set(entry[0], entry[1]);
-      }
-    }
-
-    /**
-     * Removes all key-value entries from the hash.
-     *
-     * @private
-     * @name clear
-     * @memberOf Hash
-     */
-    function hashClear() {
-      this.__data__ = nativeCreate ? nativeCreate(null) : {};
-      this.size = 0;
-    }
-
-    /**
-     * Removes `key` and its value from the hash.
-     *
-     * @private
-     * @name delete
-     * @memberOf Hash
-     * @param {Object} hash The hash to modify.
-     * @param {string} key The key of the value to remove.
-     * @returns {boolean} Returns `true` if the entry was removed, else `false`.
-     */
-    function hashDelete(key) {
-      var result = this.has(key) && delete this.__data__[key];
-      this.size -= result ? 1 : 0;
-      return result;
-    }
-
-    /**
-     * Gets the hash value for `key`.
-     *
-     * @private
-     * @name get
-     * @memberOf Hash
-     * @param {string} key The key of the value to get.
-     * @returns {*} Returns the entry value.
-     */
-    function hashGet(key) {
-      var data = this.__data__;
-      if (nativeCreate) {
-        var result = data[key];
-        return result === HASH_UNDEFINED ? undefined : result;
-      }
-      return hasOwnProperty.call(data, key) ? data[key] : undefined;
-    }
-
-    /**
-     * Checks if a hash value for `key` exists.
-     *
-     * @private
-     * @name has
-     * @memberOf Hash
-     * @param {string} key The key of the entry to check.
-     * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
-     */
-    function hashHas(key) {
-      var data = this.__data__;
-      return nativeCreate ? (data[key] !== undefined) : hasOwnProperty.call(data, key);
-    }
-
-    /**
-     * Sets the hash `key` to `value`.
-     *
-     * @private
-     * @name set
-     * @memberOf Hash
-     * @param {string} key The key of the value to set.
-     * @param {*} value The value to set.
-     * @returns {Object} Returns the hash instance.
-     */
-    function hashSet(key, value) {
-      var data = this.__data__;
-      this.size += this.has(key) ? 0 : 1;
-      data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
-      return this;
-    }
-
-    // Add methods to `Hash`.
-    Hash.prototype.clear = hashClear;
-    Hash.prototype['delete'] = hashDelete;
-    Hash.prototype.get = hashGet;
-    Hash.prototype.has = hashHas;
-    Hash.prototype.set = hashSet;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates an list cache object.
-     *
-     * @private
-     * @constructor
-     * @param {Array} [entries] The key-value pairs to cache.
-     */
-    function ListCache(entries) {
-      var index = -1,
-          length = entries == null ? 0 : entries.length;
-
-      this.clear();
-      while (++index < length) {
-        var entry = entries[index];
-        this.set(entry[0], entry[1]);
-      }
-    }
-
-    /**
-     * Removes all key-value entries from the list cache.
-     *
-     * @private
-     * @name clear
-     * @memberOf ListCache
-     */
-    function listCacheClear() {
-      this.__data__ = [];
-      this.size = 0;
-    }
-
-    /**
-     * Removes `key` and its value from the list cache.
-     *
-     * @private
-     * @name delete
-     * @memberOf ListCache
-     * @param {string} key The key of the value to remove.
-     * @returns {boolean} Returns `true` if the entry was removed, else `false`.
-     */
-    function listCacheDelete(key) {
-      var data = this.__data__,
-          index = assocIndexOf(data, key);
-
-      if (index < 0) {
-        return false;
-      }
-      var lastIndex = data.length - 1;
-      if (index == lastIndex) {
-        data.pop();
-      } else {
-        splice.call(data, index, 1);
-      }
-      --this.size;
-      return true;
-    }
-
-    /**
-     * Gets the list cache value for `key`.
-     *
-     * @private
-     * @name get
-     * @memberOf ListCache
-     * @param {string} key The key of the value to get.
-     * @returns {*} Returns the entry value.
-     */
-    function listCacheGet(key) {
-      var data = this.__data__,
-          index = assocIndexOf(data, key);
-
-      return index < 0 ? undefined : data[index][1];
-    }
-
-    /**
-     * Checks if a list cache value for `key` exists.
-     *
-     * @private
-     * @name has
-     * @memberOf ListCache
-     * @param {string} key The key of the entry to check.
-     * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
-     */
-    function listCacheHas(key) {
-      return assocIndexOf(this.__data__, key) > -1;
-    }
-
-    /**
-     * Sets the list cache `key` to `value`.
-     *
-     * @private
-     * @name set
-     * @memberOf ListCache
-     * @param {string} key The key of the value to set.
-     * @param {*} value The value to set.
-     * @returns {Object} Returns the list cache instance.
-     */
-    function listCacheSet(key, value) {
-      var data = this.__data__,
-          index = assocIndexOf(data, key);
-
-      if (index < 0) {
-        ++this.size;
-        data.push([key, value]);
-      } else {
-        data[index][1] = value;
-      }
-      return this;
-    }
-
-    // Add methods to `ListCache`.
-    ListCache.prototype.clear = listCacheClear;
-    ListCache.prototype['delete'] = listCacheDelete;
-    ListCache.prototype.get = listCacheGet;
-    ListCache.prototype.has = listCacheHas;
-    ListCache.prototype.set = listCacheSet;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates a map cache object to store key-value pairs.
-     *
-     * @private
-     * @constructor
-     * @param {Array} [entries] The key-value pairs to cache.
-     */
-    function MapCache(entries) {
-      var index = -1,
-          length = entries == null ? 0 : entries.length;
-
-      this.clear();
-      while (++index < length) {
-        var entry = entries[index];
-        this.set(entry[0], entry[1]);
-      }
-    }
-
-    /**
-     * Removes all key-value entries from the map.
-     *
-     * @private
-     * @name clear
-     * @memberOf MapCache
-     */
-    function mapCacheClear() {
-      this.size = 0;
-      this.__data__ = {
-        'hash': new Hash,
-        'map': new (Map || ListCache),
-        'string': new Hash
-      };
-    }
-
-    /**
-     * Removes `key` and its value from the map.
-     *
-     * @private
-     * @name delete
-     * @memberOf MapCache
-     * @param {string} key The key of the value to remove.
-     * @returns {boolean} Returns `true` if the entry was removed, else `false`.
-     */
-    function mapCacheDelete(key) {
-      var result = getMapData(this, key)['delete'](key);
-      this.size -= result ? 1 : 0;
-      return result;
-    }
-
-    /**
-     * Gets the map value for `key`.
-     *
-     * @private
-     * @name get
-     * @memberOf MapCache
-     * @param {string} key The key of the value to get.
-     * @returns {*} Returns the entry value.
-     */
-    function mapCacheGet(key) {
-      return getMapData(this, key).get(key);
-    }
-
-    /**
-     * Checks if a map value for `key` exists.
-     *
-     * @private
-     * @name has
-     * @memberOf MapCache
-     * @param {string} key The key of the entry to check.
-     * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
-     */
-    function mapCacheHas(key) {
-      return getMapData(this, key).has(key);
-    }
-
-    /**
-     * Sets the map `key` to `value`.
-     *
-     * @private
-     * @name set
-     * @memberOf MapCache
-     * @param {string} key The key of the value to set.
-     * @param {*} value The value to set.
-     * @returns {Object} Returns the map cache instance.
-     */
-    function mapCacheSet(key, value) {
-      var data = getMapData(this, key),
-          size = data.size;
-
-      data.set(key, value);
-      this.size += data.size == size ? 0 : 1;
-      return this;
-    }
-
-    // Add methods to `MapCache`.
-    MapCache.prototype.clear = mapCacheClear;
-    MapCache.prototype['delete'] = mapCacheDelete;
-    MapCache.prototype.get = mapCacheGet;
-    MapCache.prototype.has = mapCacheHas;
-    MapCache.prototype.set = mapCacheSet;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     *
-     * Creates an array cache object to store unique values.
-     *
-     * @private
-     * @constructor
-     * @param {Array} [values] The values to cache.
-     */
-    function SetCache(values) {
-      var index = -1,
-          length = values == null ? 0 : values.length;
-
-      this.__data__ = new MapCache;
-      while (++index < length) {
-        this.add(values[index]);
-      }
-    }
-
-    /**
-     * Adds `value` to the array cache.
-     *
-     * @private
-     * @name add
-     * @memberOf SetCache
-     * @alias push
-     * @param {*} value The value to cache.
-     * @returns {Object} Returns the cache instance.
-     */
-    function setCacheAdd(value) {
-      this.__data__.set(value, HASH_UNDEFINED);
-      return this;
-    }
-
-    /**
-     * Checks if `value` is in the array cache.
-     *
-     * @private
-     * @name has
-     * @memberOf SetCache
-     * @param {*} value The value to search for.
-     * @returns {number} Returns `true` if `value` is found, else `false`.
-     */
-    function setCacheHas(value) {
-      return this.__data__.has(value);
-    }
-
-    // Add methods to `SetCache`.
-    SetCache.prototype.add = SetCache.prototype.push = setCacheAdd;
-    SetCache.prototype.has = setCacheHas;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates a stack cache object to store key-value pairs.
-     *
-     * @private
-     * @constructor
-     * @param {Array} [entries] The key-value pairs to cache.
-     */
-    function Stack(entries) {
-      var data = this.__data__ = new ListCache(entries);
-      this.size = data.size;
-    }
-
-    /**
-     * Removes all key-value entries from the stack.
-     *
-     * @private
-     * @name clear
-     * @memberOf Stack
-     */
-    function stackClear() {
-      this.__data__ = new ListCache;
-      this.size = 0;
-    }
-
-    /**
-     * Removes `key` and its value from the stack.
-     *
-     * @private
-     * @name delete
-     * @memberOf Stack
-     * @param {string} key The key of the value to remove.
-     * @returns {boolean} Returns `true` if the entry was removed, else `false`.
-     */
-    function stackDelete(key) {
-      var data = this.__data__,
-          result = data['delete'](key);
-
-      this.size = data.size;
-      return result;
-    }
-
-    /**
-     * Gets the stack value for `key`.
-     *
-     * @private
-     * @name get
-     * @memberOf Stack
-     * @param {string} key The key of the value to get.
-     * @returns {*} Returns the entry value.
-     */
-    function stackGet(key) {
-      return this.__data__.get(key);
-    }
-
-    /**
-     * Checks if a stack value for `key` exists.
-     *
-     * @private
-     * @name has
-     * @memberOf Stack
-     * @param {string} key The key of the entry to check.
-     * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
-     */
-    function stackHas(key) {
-      return this.__data__.has(key);
-    }
-
-    /**
-     * Sets the stack `key` to `value`.
-     *
-     * @private
-     * @name set
-     * @memberOf Stack
-     * @param {string} key The key of the value to set.
-     * @param {*} value The value to set.
-     * @returns {Object} Returns the stack cache instance.
-     */
-    function stackSet(key, value) {
-      var data = this.__data__;
-      if (data instanceof ListCache) {
-        var pairs = data.__data__;
-        if (!Map || (pairs.length < LARGE_ARRAY_SIZE - 1)) {
-          pairs.push([key, value]);
-          this.size = ++data.size;
-          return this;
-        }
-        data = this.__data__ = new MapCache(pairs);
-      }
-      data.set(key, value);
-      this.size = data.size;
-      return this;
-    }
-
-    // Add methods to `Stack`.
-    Stack.prototype.clear = stackClear;
-    Stack.prototype['delete'] = stackDelete;
-    Stack.prototype.get = stackGet;
-    Stack.prototype.has = stackHas;
-    Stack.prototype.set = stackSet;
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates an array of the enumerable property names of the array-like `value`.
-     *
-     * @private
-     * @param {*} value The value to query.
-     * @param {boolean} inherited Specify returning inherited property names.
-     * @returns {Array} Returns the array of property names.
-     */
-    function arrayLikeKeys(value, inherited) {
-      var isArr = isArray(value),
-          isArg = !isArr && isArguments(value),
-          isBuff = !isArr && !isArg && isBuffer(value),
-          isType = !isArr && !isArg && !isBuff && isTypedArray(value),
-          skipIndexes = isArr || isArg || isBuff || isType,
-          result = skipIndexes ? baseTimes(value.length, String) : [],
-          length = result.length;
-
-      for (var key in value) {
-        if ((inherited || hasOwnProperty.call(value, key)) &&
-            !(skipIndexes && (
-               // Safari 9 has enumerable `arguments.length` in strict mode.
-               key == 'length' ||
-               // Node.js 0.10 has enumerable non-index properties on buffers.
-               (isBuff && (key == 'offset' || key == 'parent')) ||
-               // PhantomJS 2 has enumerable non-index properties on typed arrays.
-               (isType && (key == 'buffer' || key == 'byteLength' || key == 'byteOffset')) ||
-               // Skip index properties.
-               isIndex(key, length)
-            ))) {
-          result.push(key);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * A specialized version of `_.sample` for arrays.
-     *
-     * @private
-     * @param {Array} array The array to sample.
-     * @returns {*} Returns the random element.
-     */
-    function arraySample(array) {
-      var length = array.length;
-      return length ? array[baseRandom(0, length - 1)] : undefined;
-    }
-
-    /**
-     * A specialized version of `_.sampleSize` for arrays.
-     *
-     * @private
-     * @param {Array} array The array to sample.
-     * @param {number} n The number of elements to sample.
-     * @returns {Array} Returns the random elements.
-     */
-    function arraySampleSize(array, n) {
-      return shuffleSelf(copyArray(array), baseClamp(n, 0, array.length));
-    }
-
-    /**
-     * A specialized version of `_.shuffle` for arrays.
-     *
-     * @private
-     * @param {Array} array The array to shuffle.
-     * @returns {Array} Returns the new shuffled array.
-     */
-    function arrayShuffle(array) {
-      return shuffleSelf(copyArray(array));
-    }
-
-    /**
-     * This function is like `assignValue` except that it doesn't assign
-     * `undefined` values.
-     *
-     * @private
-     * @param {Object} object The object to modify.
-     * @param {string} key The key of the property to assign.
-     * @param {*} value The value to assign.
-     */
-    function assignMergeValue(object, key, value) {
-      if ((value !== undefined && !eq(object[key], value)) ||
-          (value === undefined && !(key in object))) {
-        baseAssignValue(object, key, value);
-      }
-    }
-
-    /**
-     * Assigns `value` to `key` of `object` if the existing value is not equivalent
-     * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons.
-     *
-     * @private
-     * @param {Object} object The object to modify.
-     * @param {string} key The key of the property to assign.
-     * @param {*} value The value to assign.
-     */
-    function assignValue(object, key, value) {
-      var objValue = object[key];
-      if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) ||
-          (value === undefined && !(key in object))) {
-        baseAssignValue(object, key, value);
-      }
-    }
-
-    /**
-     * Gets the index at which the `key` is found in `array` of key-value pairs.
-     *
-     * @private
-     * @param {Array} array The array to inspect.
-     * @param {*} key The key to search for.
-     * @returns {number} Returns the index of the matched value, else `-1`.
-     */
-    function assocIndexOf(array, key) {
-      var length = array.length;
-      while (length--) {
-        if (eq(array[length][0], key)) {
-          return length;
-        }
-      }
-      return -1;
-    }
-
-    /**
-     * Aggregates elements of `collection` on `accumulator` with keys transformed
-     * by `iteratee` and values set by `setter`.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} setter The function to set `accumulator` values.
-     * @param {Function} iteratee The iteratee to transform keys.
-     * @param {Object} accumulator The initial aggregated object.
-     * @returns {Function} Returns `accumulator`.
-     */
-    function baseAggregator(collection, setter, iteratee, accumulator) {
-      baseEach(collection, function(value, key, collection) {
-        setter(accumulator, value, iteratee(value), collection);
-      });
-      return accumulator;
-    }
-
-    /**
-     * The base implementation of `_.assign` without support for multiple sources
-     * or `customizer` functions.
-     *
-     * @private
-     * @param {Object} object The destination object.
-     * @param {Object} source The source object.
-     * @returns {Object} Returns `object`.
-     */
-    function baseAssign(object, source) {
-      return object && copyObject(source, keys(source), object);
-    }
-
-    /**
-     * The base implementation of `_.assignIn` without support for multiple sources
-     * or `customizer` functions.
-     *
-     * @private
-     * @param {Object} object The destination object.
-     * @param {Object} source The source object.
-     * @returns {Object} Returns `object`.
-     */
-    function baseAssignIn(object, source) {
-      return object && copyObject(source, keysIn(source), object);
-    }
-
-    /**
-     * The base implementation of `assignValue` and `assignMergeValue` without
-     * value checks.
-     *
-     * @private
-     * @param {Object} object The object to modify.
-     * @param {string} key The key of the property to assign.
-     * @param {*} value The value to assign.
-     */
-    function baseAssignValue(object, key, value) {
-      if (key == '__proto__' && defineProperty) {
-        defineProperty(object, key, {
-          'configurable': true,
-          'enumerable': true,
-          'value': value,
-          'writable': true
-        });
-      } else {
-        object[key] = value;
-      }
-    }
-
-    /**
-     * The base implementation of `_.at` without support for individual paths.
-     *
-     * @private
-     * @param {Object} object The object to iterate over.
-     * @param {string[]} paths The property paths to pick.
-     * @returns {Array} Returns the picked elements.
-     */
-    function baseAt(object, paths) {
-      var index = -1,
-          length = paths.length,
-          result = Array(length),
-          skip = object == null;
-
-      while (++index < length) {
-        result[index] = skip ? undefined : get(object, paths[index]);
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.clamp` which doesn't coerce arguments.
-     *
-     * @private
-     * @param {number} number The number to clamp.
-     * @param {number} [lower] The lower bound.
-     * @param {number} upper The upper bound.
-     * @returns {number} Returns the clamped number.
-     */
-    function baseClamp(number, lower, upper) {
-      if (number === number) {
-        if (upper !== undefined) {
-          number = number <= upper ? number : upper;
-        }
-        if (lower !== undefined) {
-          number = number >= lower ? number : lower;
-        }
-      }
-      return number;
-    }
-
-    /**
-     * The base implementation of `_.clone` and `_.cloneDeep` which tracks
-     * traversed objects.
-     *
-     * @private
-     * @param {*} value The value to clone.
-     * @param {boolean} bitmask The bitmask flags.
-     *  1 - Deep clone
-     *  2 - Flatten inherited properties
-     *  4 - Clone symbols
-     * @param {Function} [customizer] The function to customize cloning.
-     * @param {string} [key] The key of `value`.
-     * @param {Object} [object] The parent object of `value`.
-     * @param {Object} [stack] Tracks traversed objects and their clone counterparts.
-     * @returns {*} Returns the cloned value.
-     */
-    function baseClone(value, bitmask, customizer, key, object, stack) {
-      var result,
-          isDeep = bitmask & CLONE_DEEP_FLAG,
-          isFlat = bitmask & CLONE_FLAT_FLAG,
-          isFull = bitmask & CLONE_SYMBOLS_FLAG;
-
-      if (customizer) {
-        result = object ? customizer(value, key, object, stack) : customizer(value);
-      }
-      if (result !== undefined) {
-        return result;
-      }
-      if (!isObject(value)) {
-        return value;
-      }
-      var isArr = isArray(value);
-      if (isArr) {
-        result = initCloneArray(value);
-        if (!isDeep) {
-          return copyArray(value, result);
-        }
-      } else {
-        var tag = getTag(value),
-            isFunc = tag == funcTag || tag == genTag;
-
-        if (isBuffer(value)) {
-          return cloneBuffer(value, isDeep);
-        }
-        if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
-          result = (isFlat || isFunc) ? {} : initCloneObject(value);
-          if (!isDeep) {
-            return isFlat
-              ? copySymbolsIn(value, baseAssignIn(result, value))
-              : copySymbols(value, baseAssign(result, value));
-          }
-        } else {
-          if (!cloneableTags[tag]) {
-            return object ? value : {};
-          }
-          result = initCloneByTag(value, tag, isDeep);
-        }
-      }
-      // Check for circular references and return its corresponding clone.
-      stack || (stack = new Stack);
-      var stacked = stack.get(value);
-      if (stacked) {
-        return stacked;
-      }
-      stack.set(value, result);
-
-      if (isSet(value)) {
-        value.forEach(function(subValue) {
-          result.add(baseClone(subValue, bitmask, customizer, subValue, value, stack));
-        });
-
-        return result;
-      }
-
-      if (isMap(value)) {
-        value.forEach(function(subValue, key) {
-          result.set(key, baseClone(subValue, bitmask, customizer, key, value, stack));
-        });
-
-        return result;
-      }
-
-      var keysFunc = isFull
-        ? (isFlat ? getAllKeysIn : getAllKeys)
-        : (isFlat ? keysIn : keys);
-
-      var props = isArr ? undefined : keysFunc(value);
-      arrayEach(props || value, function(subValue, key) {
-        if (props) {
-          key = subValue;
-          subValue = value[key];
-        }
-        // Recursively populate clone (susceptible to call stack limits).
-        assignValue(result, key, baseClone(subValue, bitmask, customizer, key, value, stack));
-      });
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.conforms` which doesn't clone `source`.
-     *
-     * @private
-     * @param {Object} source The object of property predicates to conform to.
-     * @returns {Function} Returns the new spec function.
-     */
-    function baseConforms(source) {
-      var props = keys(source);
-      return function(object) {
-        return baseConformsTo(object, source, props);
-      };
-    }
-
-    /**
-     * The base implementation of `_.conformsTo` which accepts `props` to check.
-     *
-     * @private
-     * @param {Object} object The object to inspect.
-     * @param {Object} source The object of property predicates to conform to.
-     * @returns {boolean} Returns `true` if `object` conforms, else `false`.
-     */
-    function baseConformsTo(object, source, props) {
-      var length = props.length;
-      if (object == null) {
-        return !length;
-      }
-      object = Object(object);
-      while (length--) {
-        var key = props[length],
-            predicate = source[key],
-            value = object[key];
-
-        if ((value === undefined && !(key in object)) || !predicate(value)) {
-          return false;
-        }
-      }
-      return true;
-    }
-
-    /**
-     * The base implementation of `_.delay` and `_.defer` which accepts `args`
-     * to provide to `func`.
-     *
-     * @private
-     * @param {Function} func The function to delay.
-     * @param {number} wait The number of milliseconds to delay invocation.
-     * @param {Array} args The arguments to provide to `func`.
-     * @returns {number|Object} Returns the timer id or timeout object.
-     */
-    function baseDelay(func, wait, args) {
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      return setTimeout(function() { func.apply(undefined, args); }, wait);
-    }
-
-    /**
-     * The base implementation of methods like `_.difference` without support
-     * for excluding multiple arrays or iteratee shorthands.
-     *
-     * @private
-     * @param {Array} array The array to inspect.
-     * @param {Array} values The values to exclude.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of filtered values.
-     */
-    function baseDifference(array, values, iteratee, comparator) {
-      var index = -1,
-          includes = arrayIncludes,
-          isCommon = true,
-          length = array.length,
-          result = [],
-          valuesLength = values.length;
-
-      if (!length) {
-        return result;
-      }
-      if (iteratee) {
-        values = arrayMap(values, baseUnary(iteratee));
-      }
-      if (comparator) {
-        includes = arrayIncludesWith;
-        isCommon = false;
-      }
-      else if (values.length >= LARGE_ARRAY_SIZE) {
-        includes = cacheHas;
-        isCommon = false;
-        values = new SetCache(values);
-      }
-      outer:
-      while (++index < length) {
-        var value = array[index],
-            computed = iteratee == null ? value : iteratee(value);
-
-        value = (comparator || value !== 0) ? value : 0;
-        if (isCommon && computed === computed) {
-          var valuesIndex = valuesLength;
-          while (valuesIndex--) {
-            if (values[valuesIndex] === computed) {
-              continue outer;
-            }
-          }
-          result.push(value);
-        }
-        else if (!includes(values, computed, comparator)) {
-          result.push(value);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.forEach` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @returns {Array|Object} Returns `collection`.
-     */
-    var baseEach = createBaseEach(baseForOwn);
-
-    /**
-     * The base implementation of `_.forEachRight` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @returns {Array|Object} Returns `collection`.
-     */
-    var baseEachRight = createBaseEach(baseForOwnRight, true);
-
-    /**
-     * The base implementation of `_.every` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} predicate The function invoked per iteration.
-     * @returns {boolean} Returns `true` if all elements pass the predicate check,
-     *  else `false`
-     */
-    function baseEvery(collection, predicate) {
-      var result = true;
-      baseEach(collection, function(value, index, collection) {
-        result = !!predicate(value, index, collection);
-        return result;
-      });
-      return result;
-    }
-
-    /**
-     * The base implementation of methods like `_.max` and `_.min` which accepts a
-     * `comparator` to determine the extremum value.
-     *
-     * @private
-     * @param {Array} array The array to iterate over.
-     * @param {Function} iteratee The iteratee invoked per iteration.
-     * @param {Function} comparator The comparator used to compare values.
-     * @returns {*} Returns the extremum value.
-     */
-    function baseExtremum(array, iteratee, comparator) {
-      var index = -1,
-          length = array.length;
-
-      while (++index < length) {
-        var value = array[index],
-            current = iteratee(value);
-
-        if (current != null && (computed === undefined
-              ? (current === current && !isSymbol(current))
-              : comparator(current, computed)
-            )) {
-          var computed = current,
-              result = value;
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.fill` without an iteratee call guard.
-     *
-     * @private
-     * @param {Array} array The array to fill.
-     * @param {*} value The value to fill `array` with.
-     * @param {number} [start=0] The start position.
-     * @param {number} [end=array.length] The end position.
-     * @returns {Array} Returns `array`.
-     */
-    function baseFill(array, value, start, end) {
-      var length = array.length;
-
-      start = toInteger(start);
-      if (start < 0) {
-        start = -start > length ? 0 : (length + start);
-      }
-      end = (end === undefined || end > length) ? length : toInteger(end);
-      if (end < 0) {
-        end += length;
-      }
-      end = start > end ? 0 : toLength(end);
-      while (start < end) {
-        array[start++] = value;
-      }
-      return array;
-    }
-
-    /**
-     * The base implementation of `_.filter` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} predicate The function invoked per iteration.
-     * @returns {Array} Returns the new filtered array.
-     */
-    function baseFilter(collection, predicate) {
-      var result = [];
-      baseEach(collection, function(value, index, collection) {
-        if (predicate(value, index, collection)) {
-          result.push(value);
-        }
-      });
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.flatten` with support for restricting flattening.
-     *
-     * @private
-     * @param {Array} array The array to flatten.
-     * @param {number} depth The maximum recursion depth.
-     * @param {boolean} [predicate=isFlattenable] The function invoked per iteration.
-     * @param {boolean} [isStrict] Restrict to values that pass `predicate` checks.
-     * @param {Array} [result=[]] The initial result value.
-     * @returns {Array} Returns the new flattened array.
-     */
-    function baseFlatten(array, depth, predicate, isStrict, result) {
-      var index = -1,
-          length = array.length;
-
-      predicate || (predicate = isFlattenable);
-      result || (result = []);
-
-      while (++index < length) {
-        var value = array[index];
-        if (depth > 0 && predicate(value)) {
-          if (depth > 1) {
-            // Recursively flatten arrays (susceptible to call stack limits).
-            baseFlatten(value, depth - 1, predicate, isStrict, result);
-          } else {
-            arrayPush(result, value);
-          }
-        } else if (!isStrict) {
-          result[result.length] = value;
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `baseForOwn` which iterates over `object`
-     * properties returned by `keysFunc` and invokes `iteratee` for each property.
-     * Iteratee functions may exit iteration early by explicitly returning `false`.
-     *
-     * @private
-     * @param {Object} object The object to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @param {Function} keysFunc The function to get the keys of `object`.
-     * @returns {Object} Returns `object`.
-     */
-    var baseFor = createBaseFor();
-
-    /**
-     * This function is like `baseFor` except that it iterates over properties
-     * in the opposite order.
-     *
-     * @private
-     * @param {Object} object The object to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @param {Function} keysFunc The function to get the keys of `object`.
-     * @returns {Object} Returns `object`.
-     */
-    var baseForRight = createBaseFor(true);
-
-    /**
-     * The base implementation of `_.forOwn` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Object} object The object to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @returns {Object} Returns `object`.
-     */
-    function baseForOwn(object, iteratee) {
-      return object && baseFor(object, iteratee, keys);
-    }
-
-    /**
-     * The base implementation of `_.forOwnRight` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Object} object The object to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @returns {Object} Returns `object`.
-     */
-    function baseForOwnRight(object, iteratee) {
-      return object && baseForRight(object, iteratee, keys);
-    }
-
-    /**
-     * The base implementation of `_.functions` which creates an array of
-     * `object` function property names filtered from `props`.
-     *
-     * @private
-     * @param {Object} object The object to inspect.
-     * @param {Array} props The property names to filter.
-     * @returns {Array} Returns the function names.
-     */
-    function baseFunctions(object, props) {
-      return arrayFilter(props, function(key) {
-        return isFunction(object[key]);
-      });
-    }
-
-    /**
-     * The base implementation of `_.get` without support for default values.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path of the property to get.
-     * @returns {*} Returns the resolved value.
-     */
-    function baseGet(object, path) {
-      path = castPath(path, object);
-
-      var index = 0,
-          length = path.length;
-
-      while (object != null && index < length) {
-        object = object[toKey(path[index++])];
-      }
-      return (index && index == length) ? object : undefined;
-    }
-
-    /**
-     * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
-     * `keysFunc` and `symbolsFunc` to get the enumerable property names and
-     * symbols of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @param {Function} keysFunc The function to get the keys of `object`.
-     * @param {Function} symbolsFunc The function to get the symbols of `object`.
-     * @returns {Array} Returns the array of property names and symbols.
-     */
-    function baseGetAllKeys(object, keysFunc, symbolsFunc) {
-      var result = keysFunc(object);
-      return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
-    }
-
-    /**
-     * The base implementation of `getTag` without fallbacks for buggy environments.
-     *
-     * @private
-     * @param {*} value The value to query.
-     * @returns {string} Returns the `toStringTag`.
-     */
-    function baseGetTag(value) {
-      if (value == null) {
-        return value === undefined ? undefinedTag : nullTag;
-      }
-      return (symToStringTag && symToStringTag in Object(value))
-        ? getRawTag(value)
-        : objectToString(value);
-    }
-
-    /**
-     * The base implementation of `_.gt` which doesn't coerce arguments.
-     *
-     * @private
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if `value` is greater than `other`,
-     *  else `false`.
-     */
-    function baseGt(value, other) {
-      return value > other;
-    }
-
-    /**
-     * The base implementation of `_.has` without support for deep paths.
-     *
-     * @private
-     * @param {Object} [object] The object to query.
-     * @param {Array|string} key The key to check.
-     * @returns {boolean} Returns `true` if `key` exists, else `false`.
-     */
-    function baseHas(object, key) {
-      return object != null && hasOwnProperty.call(object, key);
-    }
-
-    /**
-     * The base implementation of `_.hasIn` without support for deep paths.
-     *
-     * @private
-     * @param {Object} [object] The object to query.
-     * @param {Array|string} key The key to check.
-     * @returns {boolean} Returns `true` if `key` exists, else `false`.
-     */
-    function baseHasIn(object, key) {
-      return object != null && key in Object(object);
-    }
-
-    /**
-     * The base implementation of `_.inRange` which doesn't coerce arguments.
-     *
-     * @private
-     * @param {number} number The number to check.
-     * @param {number} start The start of the range.
-     * @param {number} end The end of the range.
-     * @returns {boolean} Returns `true` if `number` is in the range, else `false`.
-     */
-    function baseInRange(number, start, end) {
-      return number >= nativeMin(start, end) && number < nativeMax(start, end);
-    }
-
-    /**
-     * The base implementation of methods like `_.intersection`, without support
-     * for iteratee shorthands, that accepts an array of arrays to inspect.
-     *
-     * @private
-     * @param {Array} arrays The arrays to inspect.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of shared values.
-     */
-    function baseIntersection(arrays, iteratee, comparator) {
-      var includes = comparator ? arrayIncludesWith : arrayIncludes,
-          length = arrays[0].length,
-          othLength = arrays.length,
-          othIndex = othLength,
-          caches = Array(othLength),
-          maxLength = Infinity,
-          result = [];
-
-      while (othIndex--) {
-        var array = arrays[othIndex];
-        if (othIndex && iteratee) {
-          array = arrayMap(array, baseUnary(iteratee));
-        }
-        maxLength = nativeMin(array.length, maxLength);
-        caches[othIndex] = !comparator && (iteratee || (length >= 120 && array.length >= 120))
-          ? new SetCache(othIndex && array)
-          : undefined;
-      }
-      array = arrays[0];
-
-      var index = -1,
-          seen = caches[0];
-
-      outer:
-      while (++index < length && result.length < maxLength) {
-        var value = array[index],
-            computed = iteratee ? iteratee(value) : value;
-
-        value = (comparator || value !== 0) ? value : 0;
-        if (!(seen
-              ? cacheHas(seen, computed)
-              : includes(result, computed, comparator)
-            )) {
-          othIndex = othLength;
-          while (--othIndex) {
-            var cache = caches[othIndex];
-            if (!(cache
-                  ? cacheHas(cache, computed)
-                  : includes(arrays[othIndex], computed, comparator))
-                ) {
-              continue outer;
-            }
-          }
-          if (seen) {
-            seen.push(computed);
-          }
-          result.push(value);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.invert` and `_.invertBy` which inverts
-     * `object` with values transformed by `iteratee` and set by `setter`.
-     *
-     * @private
-     * @param {Object} object The object to iterate over.
-     * @param {Function} setter The function to set `accumulator` values.
-     * @param {Function} iteratee The iteratee to transform values.
-     * @param {Object} accumulator The initial inverted object.
-     * @returns {Function} Returns `accumulator`.
-     */
-    function baseInverter(object, setter, iteratee, accumulator) {
-      baseForOwn(object, function(value, key, object) {
-        setter(accumulator, iteratee(value), key, object);
-      });
-      return accumulator;
-    }
-
-    /**
-     * The base implementation of `_.invoke` without support for individual
-     * method arguments.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path of the method to invoke.
-     * @param {Array} args The arguments to invoke the method with.
-     * @returns {*} Returns the result of the invoked method.
-     */
-    function baseInvoke(object, path, args) {
-      path = castPath(path, object);
-      object = parent(object, path);
-      var func = object == null ? object : object[toKey(last(path))];
-      return func == null ? undefined : apply(func, object, args);
-    }
-
-    /**
-     * The base implementation of `_.isArguments`.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an `arguments` object,
-     */
-    function baseIsArguments(value) {
-      return isObjectLike(value) && baseGetTag(value) == argsTag;
-    }
-
-    /**
-     * The base implementation of `_.isArrayBuffer` without Node.js optimizations.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`.
-     */
-    function baseIsArrayBuffer(value) {
-      return isObjectLike(value) && baseGetTag(value) == arrayBufferTag;
-    }
-
-    /**
-     * The base implementation of `_.isDate` without Node.js optimizations.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a date object, else `false`.
-     */
-    function baseIsDate(value) {
-      return isObjectLike(value) && baseGetTag(value) == dateTag;
-    }
-
-    /**
-     * The base implementation of `_.isEqual` which supports partial comparisons
-     * and tracks traversed objects.
-     *
-     * @private
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @param {boolean} bitmask The bitmask flags.
-     *  1 - Unordered comparison
-     *  2 - Partial comparison
-     * @param {Function} [customizer] The function to customize comparisons.
-     * @param {Object} [stack] Tracks traversed `value` and `other` objects.
-     * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
-     */
-    function baseIsEqual(value, other, bitmask, customizer, stack) {
-      if (value === other) {
-        return true;
-      }
-      if (value == null || other == null || (!isObjectLike(value) && !isObjectLike(other))) {
-        return value !== value && other !== other;
-      }
-      return baseIsEqualDeep(value, other, bitmask, customizer, baseIsEqual, stack);
-    }
-
-    /**
-     * A specialized version of `baseIsEqual` for arrays and objects which performs
-     * deep comparisons and tracks traversed objects enabling objects with circular
-     * references to be compared.
-     *
-     * @private
-     * @param {Object} object The object to compare.
-     * @param {Object} other The other object to compare.
-     * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
-     * @param {Function} customizer The function to customize comparisons.
-     * @param {Function} equalFunc The function to determine equivalents of values.
-     * @param {Object} [stack] Tracks traversed `object` and `other` objects.
-     * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
-     */
-    function baseIsEqualDeep(object, other, bitmask, customizer, equalFunc, stack) {
-      var objIsArr = isArray(object),
-          othIsArr = isArray(other),
-          objTag = objIsArr ? arrayTag : getTag(object),
-          othTag = othIsArr ? arrayTag : getTag(other);
-
-      objTag = objTag == argsTag ? objectTag : objTag;
-      othTag = othTag == argsTag ? objectTag : othTag;
-
-      var objIsObj = objTag == objectTag,
-          othIsObj = othTag == objectTag,
-          isSameTag = objTag == othTag;
-
-      if (isSameTag && isBuffer(object)) {
-        if (!isBuffer(other)) {
-          return false;
-        }
-        objIsArr = true;
-        objIsObj = false;
-      }
-      if (isSameTag && !objIsObj) {
-        stack || (stack = new Stack);
-        return (objIsArr || isTypedArray(object))
-          ? equalArrays(object, other, bitmask, customizer, equalFunc, stack)
-          : equalByTag(object, other, objTag, bitmask, customizer, equalFunc, stack);
-      }
-      if (!(bitmask & COMPARE_PARTIAL_FLAG)) {
-        var objIsWrapped = objIsObj && hasOwnProperty.call(object, '__wrapped__'),
-            othIsWrapped = othIsObj && hasOwnProperty.call(other, '__wrapped__');
-
-        if (objIsWrapped || othIsWrapped) {
-          var objUnwrapped = objIsWrapped ? object.value() : object,
-              othUnwrapped = othIsWrapped ? other.value() : other;
-
-          stack || (stack = new Stack);
-          return equalFunc(objUnwrapped, othUnwrapped, bitmask, customizer, stack);
-        }
-      }
-      if (!isSameTag) {
-        return false;
-      }
-      stack || (stack = new Stack);
-      return equalObjects(object, other, bitmask, customizer, equalFunc, stack);
-    }
-
-    /**
-     * The base implementation of `_.isMap` without Node.js optimizations.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a map, else `false`.
-     */
-    function baseIsMap(value) {
-      return isObjectLike(value) && getTag(value) == mapTag;
-    }
-
-    /**
-     * The base implementation of `_.isMatch` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Object} object The object to inspect.
-     * @param {Object} source The object of property values to match.
-     * @param {Array} matchData The property names, values, and compare flags to match.
-     * @param {Function} [customizer] The function to customize comparisons.
-     * @returns {boolean} Returns `true` if `object` is a match, else `false`.
-     */
-    function baseIsMatch(object, source, matchData, customizer) {
-      var index = matchData.length,
-          length = index,
-          noCustomizer = !customizer;
-
-      if (object == null) {
-        return !length;
-      }
-      object = Object(object);
-      while (index--) {
-        var data = matchData[index];
-        if ((noCustomizer && data[2])
-              ? data[1] !== object[data[0]]
-              : !(data[0] in object)
-            ) {
-          return false;
-        }
-      }
-      while (++index < length) {
-        data = matchData[index];
-        var key = data[0],
-            objValue = object[key],
-            srcValue = data[1];
-
-        if (noCustomizer && data[2]) {
-          if (objValue === undefined && !(key in object)) {
-            return false;
-          }
-        } else {
-          var stack = new Stack;
-          if (customizer) {
-            var result = customizer(objValue, srcValue, key, object, source, stack);
-          }
-          if (!(result === undefined
-                ? baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG, customizer, stack)
-                : result
-              )) {
-            return false;
-          }
-        }
-      }
-      return true;
-    }
-
-    /**
-     * The base implementation of `_.isNative` without bad shim checks.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a native function,
-     *  else `false`.
-     */
-    function baseIsNative(value) {
-      if (!isObject(value) || isMasked(value)) {
-        return false;
-      }
-      var pattern = isFunction(value) ? reIsNative : reIsHostCtor;
-      return pattern.test(toSource(value));
-    }
-
-    /**
-     * The base implementation of `_.isRegExp` without Node.js optimizations.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a regexp, else `false`.
-     */
-    function baseIsRegExp(value) {
-      return isObjectLike(value) && baseGetTag(value) == regexpTag;
-    }
-
-    /**
-     * The base implementation of `_.isSet` without Node.js optimizations.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a set, else `false`.
-     */
-    function baseIsSet(value) {
-      return isObjectLike(value) && getTag(value) == setTag;
-    }
-
-    /**
-     * The base implementation of `_.isTypedArray` without Node.js optimizations.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
-     */
-    function baseIsTypedArray(value) {
-      return isObjectLike(value) &&
-        isLength(value.length) && !!typedArrayTags[baseGetTag(value)];
-    }
-
-    /**
-     * The base implementation of `_.iteratee`.
-     *
-     * @private
-     * @param {*} [value=_.identity] The value to convert to an iteratee.
-     * @returns {Function} Returns the iteratee.
-     */
-    function baseIteratee(value) {
-      // Don't store the `typeof` result in a variable to avoid a JIT bug in Safari 9.
-      // See https://bugs.webkit.org/show_bug.cgi?id=156034 for more details.
-      if (typeof value == 'function') {
-        return value;
-      }
-      if (value == null) {
-        return identity;
-      }
-      if (typeof value == 'object') {
-        return isArray(value)
-          ? baseMatchesProperty(value[0], value[1])
-          : baseMatches(value);
-      }
-      return property(value);
-    }
-
-    /**
-     * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names.
-     */
-    function baseKeys(object) {
-      if (!isPrototype(object)) {
-        return nativeKeys(object);
-      }
-      var result = [];
-      for (var key in Object(object)) {
-        if (hasOwnProperty.call(object, key) && key != 'constructor') {
-          result.push(key);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.keysIn` which doesn't treat sparse arrays as dense.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names.
-     */
-    function baseKeysIn(object) {
-      if (!isObject(object)) {
-        return nativeKeysIn(object);
-      }
-      var isProto = isPrototype(object),
-          result = [];
-
-      for (var key in object) {
-        if (!(key == 'constructor' && (isProto || !hasOwnProperty.call(object, key)))) {
-          result.push(key);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.lt` which doesn't coerce arguments.
-     *
-     * @private
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if `value` is less than `other`,
-     *  else `false`.
-     */
-    function baseLt(value, other) {
-      return value < other;
-    }
-
-    /**
-     * The base implementation of `_.map` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} iteratee The function invoked per iteration.
-     * @returns {Array} Returns the new mapped array.
-     */
-    function baseMap(collection, iteratee) {
-      var index = -1,
-          result = isArrayLike(collection) ? Array(collection.length) : [];
-
-      baseEach(collection, function(value, key, collection) {
-        result[++index] = iteratee(value, key, collection);
-      });
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.matches` which doesn't clone `source`.
-     *
-     * @private
-     * @param {Object} source The object of property values to match.
-     * @returns {Function} Returns the new spec function.
-     */
-    function baseMatches(source) {
-      var matchData = getMatchData(source);
-      if (matchData.length == 1 && matchData[0][2]) {
-        return matchesStrictComparable(matchData[0][0], matchData[0][1]);
-      }
-      return function(object) {
-        return object === source || baseIsMatch(object, source, matchData);
-      };
-    }
-
-    /**
-     * The base implementation of `_.matchesProperty` which doesn't clone `srcValue`.
-     *
-     * @private
-     * @param {string} path The path of the property to get.
-     * @param {*} srcValue The value to match.
-     * @returns {Function} Returns the new spec function.
-     */
-    function baseMatchesProperty(path, srcValue) {
-      if (isKey(path) && isStrictComparable(srcValue)) {
-        return matchesStrictComparable(toKey(path), srcValue);
-      }
-      return function(object) {
-        var objValue = get(object, path);
-        return (objValue === undefined && objValue === srcValue)
-          ? hasIn(object, path)
-          : baseIsEqual(srcValue, objValue, COMPARE_PARTIAL_FLAG | COMPARE_UNORDERED_FLAG);
-      };
-    }
-
-    /**
-     * The base implementation of `_.merge` without support for multiple sources.
-     *
-     * @private
-     * @param {Object} object The destination object.
-     * @param {Object} source The source object.
-     * @param {number} srcIndex The index of `source`.
-     * @param {Function} [customizer] The function to customize merged values.
-     * @param {Object} [stack] Tracks traversed source values and their merged
-     *  counterparts.
-     */
-    function baseMerge(object, source, srcIndex, customizer, stack) {
-      if (object === source) {
-        return;
-      }
-      baseFor(source, function(srcValue, key) {
-        if (isObject(srcValue)) {
-          stack || (stack = new Stack);
-          baseMergeDeep(object, source, key, srcIndex, baseMerge, customizer, stack);
-        }
-        else {
-          var newValue = customizer
-            ? customizer(safeGet(object, key), srcValue, (key + ''), object, source, stack)
-            : undefined;
-
-          if (newValue === undefined) {
-            newValue = srcValue;
-          }
-          assignMergeValue(object, key, newValue);
-        }
-      }, keysIn);
-    }
-
-    /**
-     * A specialized version of `baseMerge` for arrays and objects which performs
-     * deep merges and tracks traversed objects enabling objects with circular
-     * references to be merged.
-     *
-     * @private
-     * @param {Object} object The destination object.
-     * @param {Object} source The source object.
-     * @param {string} key The key of the value to merge.
-     * @param {number} srcIndex The index of `source`.
-     * @param {Function} mergeFunc The function to merge values.
-     * @param {Function} [customizer] The function to customize assigned values.
-     * @param {Object} [stack] Tracks traversed source values and their merged
-     *  counterparts.
-     */
-    function baseMergeDeep(object, source, key, srcIndex, mergeFunc, customizer, stack) {
-      var objValue = safeGet(object, key),
-          srcValue = safeGet(source, key),
-          stacked = stack.get(srcValue);
-
-      if (stacked) {
-        assignMergeValue(object, key, stacked);
-        return;
-      }
-      var newValue = customizer
-        ? customizer(objValue, srcValue, (key + ''), object, source, stack)
-        : undefined;
-
-      var isCommon = newValue === undefined;
-
-      if (isCommon) {
-        var isArr = isArray(srcValue),
-            isBuff = !isArr && isBuffer(srcValue),
-            isTyped = !isArr && !isBuff && isTypedArray(srcValue);
-
-        newValue = srcValue;
-        if (isArr || isBuff || isTyped) {
-          if (isArray(objValue)) {
-            newValue = objValue;
-          }
-          else if (isArrayLikeObject(objValue)) {
-            newValue = copyArray(objValue);
-          }
-          else if (isBuff) {
-            isCommon = false;
-            newValue = cloneBuffer(srcValue, true);
-          }
-          else if (isTyped) {
-            isCommon = false;
-            newValue = cloneTypedArray(srcValue, true);
-          }
-          else {
-            newValue = [];
-          }
-        }
-        else if (isPlainObject(srcValue) || isArguments(srcValue)) {
-          newValue = objValue;
-          if (isArguments(objValue)) {
-            newValue = toPlainObject(objValue);
-          }
-          else if (!isObject(objValue) || (srcIndex && isFunction(objValue))) {
-            newValue = initCloneObject(srcValue);
-          }
-        }
-        else {
-          isCommon = false;
-        }
-      }
-      if (isCommon) {
-        // Recursively merge objects and arrays (susceptible to call stack limits).
-        stack.set(srcValue, newValue);
-        mergeFunc(newValue, srcValue, srcIndex, customizer, stack);
-        stack['delete'](srcValue);
-      }
-      assignMergeValue(object, key, newValue);
-    }
-
-    /**
-     * The base implementation of `_.nth` which doesn't coerce arguments.
-     *
-     * @private
-     * @param {Array} array The array to query.
-     * @param {number} n The index of the element to return.
-     * @returns {*} Returns the nth element of `array`.
-     */
-    function baseNth(array, n) {
-      var length = array.length;
-      if (!length) {
-        return;
-      }
-      n += n < 0 ? length : 0;
-      return isIndex(n, length) ? array[n] : undefined;
-    }
-
-    /**
-     * The base implementation of `_.orderBy` without param guards.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function[]|Object[]|string[]} iteratees The iteratees to sort by.
-     * @param {string[]} orders The sort orders of `iteratees`.
-     * @returns {Array} Returns the new sorted array.
-     */
-    function baseOrderBy(collection, iteratees, orders) {
-      var index = -1;
-      iteratees = arrayMap(iteratees.length ? iteratees : [identity], baseUnary(getIteratee()));
-
-      var result = baseMap(collection, function(value, key, collection) {
-        var criteria = arrayMap(iteratees, function(iteratee) {
-          return iteratee(value);
-        });
-        return { 'criteria': criteria, 'index': ++index, 'value': value };
-      });
-
-      return baseSortBy(result, function(object, other) {
-        return compareMultiple(object, other, orders);
-      });
-    }
-
-    /**
-     * The base implementation of `_.pick` without support for individual
-     * property identifiers.
-     *
-     * @private
-     * @param {Object} object The source object.
-     * @param {string[]} paths The property paths to pick.
-     * @returns {Object} Returns the new object.
-     */
-    function basePick(object, paths) {
-      return basePickBy(object, paths, function(value, path) {
-        return hasIn(object, path);
-      });
-    }
-
-    /**
-     * The base implementation of  `_.pickBy` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Object} object The source object.
-     * @param {string[]} paths The property paths to pick.
-     * @param {Function} predicate The function invoked per property.
-     * @returns {Object} Returns the new object.
-     */
-    function basePickBy(object, paths, predicate) {
-      var index = -1,
-          length = paths.length,
-          result = {};
-
-      while (++index < length) {
-        var path = paths[index],
-            value = baseGet(object, path);
-
-        if (predicate(value, path)) {
-          baseSet(result, castPath(path, object), value);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * A specialized version of `baseProperty` which supports deep paths.
-     *
-     * @private
-     * @param {Array|string} path The path of the property to get.
-     * @returns {Function} Returns the new accessor function.
-     */
-    function basePropertyDeep(path) {
-      return function(object) {
-        return baseGet(object, path);
-      };
-    }
-
-    /**
-     * The base implementation of `_.pullAllBy` without support for iteratee
-     * shorthands.
-     *
-     * @private
-     * @param {Array} array The array to modify.
-     * @param {Array} values The values to remove.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns `array`.
-     */
-    function basePullAll(array, values, iteratee, comparator) {
-      var indexOf = comparator ? baseIndexOfWith : baseIndexOf,
-          index = -1,
-          length = values.length,
-          seen = array;
-
-      if (array === values) {
-        values = copyArray(values);
-      }
-      if (iteratee) {
-        seen = arrayMap(array, baseUnary(iteratee));
-      }
-      while (++index < length) {
-        var fromIndex = 0,
-            value = values[index],
-            computed = iteratee ? iteratee(value) : value;
-
-        while ((fromIndex = indexOf(seen, computed, fromIndex, comparator)) > -1) {
-          if (seen !== array) {
-            splice.call(seen, fromIndex, 1);
-          }
-          splice.call(array, fromIndex, 1);
-        }
-      }
-      return array;
-    }
-
-    /**
-     * The base implementation of `_.pullAt` without support for individual
-     * indexes or capturing the removed elements.
-     *
-     * @private
-     * @param {Array} array The array to modify.
-     * @param {number[]} indexes The indexes of elements to remove.
-     * @returns {Array} Returns `array`.
-     */
-    function basePullAt(array, indexes) {
-      var length = array ? indexes.length : 0,
-          lastIndex = length - 1;
-
-      while (length--) {
-        var index = indexes[length];
-        if (length == lastIndex || index !== previous) {
-          var previous = index;
-          if (isIndex(index)) {
-            splice.call(array, index, 1);
-          } else {
-            baseUnset(array, index);
-          }
-        }
-      }
-      return array;
-    }
-
-    /**
-     * The base implementation of `_.random` without support for returning
-     * floating-point numbers.
-     *
-     * @private
-     * @param {number} lower The lower bound.
-     * @param {number} upper The upper bound.
-     * @returns {number} Returns the random number.
-     */
-    function baseRandom(lower, upper) {
-      return lower + nativeFloor(nativeRandom() * (upper - lower + 1));
-    }
-
-    /**
-     * The base implementation of `_.range` and `_.rangeRight` which doesn't
-     * coerce arguments.
-     *
-     * @private
-     * @param {number} start The start of the range.
-     * @param {number} end The end of the range.
-     * @param {number} step The value to increment or decrement by.
-     * @param {boolean} [fromRight] Specify iterating from right to left.
-     * @returns {Array} Returns the range of numbers.
-     */
-    function baseRange(start, end, step, fromRight) {
-      var index = -1,
-          length = nativeMax(nativeCeil((end - start) / (step || 1)), 0),
-          result = Array(length);
-
-      while (length--) {
-        result[fromRight ? length : ++index] = start;
-        start += step;
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.repeat` which doesn't coerce arguments.
-     *
-     * @private
-     * @param {string} string The string to repeat.
-     * @param {number} n The number of times to repeat the string.
-     * @returns {string} Returns the repeated string.
-     */
-    function baseRepeat(string, n) {
-      var result = '';
-      if (!string || n < 1 || n > MAX_SAFE_INTEGER) {
-        return result;
-      }
-      // Leverage the exponentiation by squaring algorithm for a faster repeat.
-      // See https://en.wikipedia.org/wiki/Exponentiation_by_squaring for more details.
-      do {
-        if (n % 2) {
-          result += string;
-        }
-        n = nativeFloor(n / 2);
-        if (n) {
-          string += string;
-        }
-      } while (n);
-
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.rest` which doesn't validate or coerce arguments.
-     *
-     * @private
-     * @param {Function} func The function to apply a rest parameter to.
-     * @param {number} [start=func.length-1] The start position of the rest parameter.
-     * @returns {Function} Returns the new function.
-     */
-    function baseRest(func, start) {
-      return setToString(overRest(func, start, identity), func + '');
-    }
-
-    /**
-     * The base implementation of `_.sample`.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to sample.
-     * @returns {*} Returns the random element.
-     */
-    function baseSample(collection) {
-      return arraySample(values(collection));
-    }
-
-    /**
-     * The base implementation of `_.sampleSize` without param guards.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to sample.
-     * @param {number} n The number of elements to sample.
-     * @returns {Array} Returns the random elements.
-     */
-    function baseSampleSize(collection, n) {
-      var array = values(collection);
-      return shuffleSelf(array, baseClamp(n, 0, array.length));
-    }
-
-    /**
-     * The base implementation of `_.set`.
-     *
-     * @private
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to set.
-     * @param {*} value The value to set.
-     * @param {Function} [customizer] The function to customize path creation.
-     * @returns {Object} Returns `object`.
-     */
-    function baseSet(object, path, value, customizer) {
-      if (!isObject(object)) {
-        return object;
-      }
-      path = castPath(path, object);
-
-      var index = -1,
-          length = path.length,
-          lastIndex = length - 1,
-          nested = object;
-
-      while (nested != null && ++index < length) {
-        var key = toKey(path[index]),
-            newValue = value;
-
-        if (index != lastIndex) {
-          var objValue = nested[key];
-          newValue = customizer ? customizer(objValue, key, nested) : undefined;
-          if (newValue === undefined) {
-            newValue = isObject(objValue)
-              ? objValue
-              : (isIndex(path[index + 1]) ? [] : {});
-          }
-        }
-        assignValue(nested, key, newValue);
-        nested = nested[key];
-      }
-      return object;
-    }
-
-    /**
-     * The base implementation of `setData` without support for hot loop shorting.
-     *
-     * @private
-     * @param {Function} func The function to associate metadata with.
-     * @param {*} data The metadata.
-     * @returns {Function} Returns `func`.
-     */
-    var baseSetData = !metaMap ? identity : function(func, data) {
-      metaMap.set(func, data);
-      return func;
-    };
-
-    /**
-     * The base implementation of `setToString` without support for hot loop shorting.
-     *
-     * @private
-     * @param {Function} func The function to modify.
-     * @param {Function} string The `toString` result.
-     * @returns {Function} Returns `func`.
-     */
-    var baseSetToString = !defineProperty ? identity : function(func, string) {
-      return defineProperty(func, 'toString', {
-        'configurable': true,
-        'enumerable': false,
-        'value': constant(string),
-        'writable': true
-      });
-    };
-
-    /**
-     * The base implementation of `_.shuffle`.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to shuffle.
-     * @returns {Array} Returns the new shuffled array.
-     */
-    function baseShuffle(collection) {
-      return shuffleSelf(values(collection));
-    }
-
-    /**
-     * The base implementation of `_.slice` without an iteratee call guard.
-     *
-     * @private
-     * @param {Array} array The array to slice.
-     * @param {number} [start=0] The start position.
-     * @param {number} [end=array.length] The end position.
-     * @returns {Array} Returns the slice of `array`.
-     */
-    function baseSlice(array, start, end) {
-      var index = -1,
-          length = array.length;
-
-      if (start < 0) {
-        start = -start > length ? 0 : (length + start);
-      }
-      end = end > length ? length : end;
-      if (end < 0) {
-        end += length;
-      }
-      length = start > end ? 0 : ((end - start) >>> 0);
-      start >>>= 0;
-
-      var result = Array(length);
-      while (++index < length) {
-        result[index] = array[index + start];
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.some` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} predicate The function invoked per iteration.
-     * @returns {boolean} Returns `true` if any element passes the predicate check,
-     *  else `false`.
-     */
-    function baseSome(collection, predicate) {
-      var result;
-
-      baseEach(collection, function(value, index, collection) {
-        result = predicate(value, index, collection);
-        return !result;
-      });
-      return !!result;
-    }
-
-    /**
-     * The base implementation of `_.sortedIndex` and `_.sortedLastIndex` which
-     * performs a binary search of `array` to determine the index at which `value`
-     * should be inserted into `array` in order to maintain its sort order.
-     *
-     * @private
-     * @param {Array} array The sorted array to inspect.
-     * @param {*} value The value to evaluate.
-     * @param {boolean} [retHighest] Specify returning the highest qualified index.
-     * @returns {number} Returns the index at which `value` should be inserted
-     *  into `array`.
-     */
-    function baseSortedIndex(array, value, retHighest) {
-      var low = 0,
-          high = array == null ? low : array.length;
-
-      if (typeof value == 'number' && value === value && high <= HALF_MAX_ARRAY_LENGTH) {
-        while (low < high) {
-          var mid = (low + high) >>> 1,
-              computed = array[mid];
-
-          if (computed !== null && !isSymbol(computed) &&
-              (retHighest ? (computed <= value) : (computed < value))) {
-            low = mid + 1;
-          } else {
-            high = mid;
-          }
-        }
-        return high;
-      }
-      return baseSortedIndexBy(array, value, identity, retHighest);
-    }
-
-    /**
-     * The base implementation of `_.sortedIndexBy` and `_.sortedLastIndexBy`
-     * which invokes `iteratee` for `value` and each element of `array` to compute
-     * their sort ranking. The iteratee is invoked with one argument; (value).
-     *
-     * @private
-     * @param {Array} array The sorted array to inspect.
-     * @param {*} value The value to evaluate.
-     * @param {Function} iteratee The iteratee invoked per element.
-     * @param {boolean} [retHighest] Specify returning the highest qualified index.
-     * @returns {number} Returns the index at which `value` should be inserted
-     *  into `array`.
-     */
-    function baseSortedIndexBy(array, value, iteratee, retHighest) {
-      value = iteratee(value);
-
-      var low = 0,
-          high = array == null ? 0 : array.length,
-          valIsNaN = value !== value,
-          valIsNull = value === null,
-          valIsSymbol = isSymbol(value),
-          valIsUndefined = value === undefined;
-
-      while (low < high) {
-        var mid = nativeFloor((low + high) / 2),
-            computed = iteratee(array[mid]),
-            othIsDefined = computed !== undefined,
-            othIsNull = computed === null,
-            othIsReflexive = computed === computed,
-            othIsSymbol = isSymbol(computed);
-
-        if (valIsNaN) {
-          var setLow = retHighest || othIsReflexive;
-        } else if (valIsUndefined) {
-          setLow = othIsReflexive && (retHighest || othIsDefined);
-        } else if (valIsNull) {
-          setLow = othIsReflexive && othIsDefined && (retHighest || !othIsNull);
-        } else if (valIsSymbol) {
-          setLow = othIsReflexive && othIsDefined && !othIsNull && (retHighest || !othIsSymbol);
-        } else if (othIsNull || othIsSymbol) {
-          setLow = false;
-        } else {
-          setLow = retHighest ? (computed <= value) : (computed < value);
-        }
-        if (setLow) {
-          low = mid + 1;
-        } else {
-          high = mid;
-        }
-      }
-      return nativeMin(high, MAX_ARRAY_INDEX);
-    }
-
-    /**
-     * The base implementation of `_.sortedUniq` and `_.sortedUniqBy` without
-     * support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array} array The array to inspect.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @returns {Array} Returns the new duplicate free array.
-     */
-    function baseSortedUniq(array, iteratee) {
-      var index = -1,
-          length = array.length,
-          resIndex = 0,
-          result = [];
-
-      while (++index < length) {
-        var value = array[index],
-            computed = iteratee ? iteratee(value) : value;
-
-        if (!index || !eq(computed, seen)) {
-          var seen = computed;
-          result[resIndex++] = value === 0 ? 0 : value;
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.toNumber` which doesn't ensure correct
-     * conversions of binary, hexadecimal, or octal string values.
-     *
-     * @private
-     * @param {*} value The value to process.
-     * @returns {number} Returns the number.
-     */
-    function baseToNumber(value) {
-      if (typeof value == 'number') {
-        return value;
-      }
-      if (isSymbol(value)) {
-        return NAN;
-      }
-      return +value;
-    }
-
-    /**
-     * The base implementation of `_.toString` which doesn't convert nullish
-     * values to empty strings.
-     *
-     * @private
-     * @param {*} value The value to process.
-     * @returns {string} Returns the string.
-     */
-    function baseToString(value) {
-      // Exit early for strings to avoid a performance hit in some environments.
-      if (typeof value == 'string') {
-        return value;
-      }
-      if (isArray(value)) {
-        // Recursively convert values (susceptible to call stack limits).
-        return arrayMap(value, baseToString) + '';
-      }
-      if (isSymbol(value)) {
-        return symbolToString ? symbolToString.call(value) : '';
-      }
-      var result = (value + '');
-      return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
-    }
-
-    /**
-     * The base implementation of `_.uniqBy` without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array} array The array to inspect.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new duplicate free array.
-     */
-    function baseUniq(array, iteratee, comparator) {
-      var index = -1,
-          includes = arrayIncludes,
-          length = array.length,
-          isCommon = true,
-          result = [],
-          seen = result;
-
-      if (comparator) {
-        isCommon = false;
-        includes = arrayIncludesWith;
-      }
-      else if (length >= LARGE_ARRAY_SIZE) {
-        var set = iteratee ? null : createSet(array);
-        if (set) {
-          return setToArray(set);
-        }
-        isCommon = false;
-        includes = cacheHas;
-        seen = new SetCache;
-      }
-      else {
-        seen = iteratee ? [] : result;
-      }
-      outer:
-      while (++index < length) {
-        var value = array[index],
-            computed = iteratee ? iteratee(value) : value;
-
-        value = (comparator || value !== 0) ? value : 0;
-        if (isCommon && computed === computed) {
-          var seenIndex = seen.length;
-          while (seenIndex--) {
-            if (seen[seenIndex] === computed) {
-              continue outer;
-            }
-          }
-          if (iteratee) {
-            seen.push(computed);
-          }
-          result.push(value);
-        }
-        else if (!includes(seen, computed, comparator)) {
-          if (seen !== result) {
-            seen.push(computed);
-          }
-          result.push(value);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * The base implementation of `_.unset`.
-     *
-     * @private
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The property path to unset.
-     * @returns {boolean} Returns `true` if the property is deleted, else `false`.
-     */
-    function baseUnset(object, path) {
-      path = castPath(path, object);
-      object = parent(object, path);
-      return object == null || delete object[toKey(last(path))];
-    }
-
-    /**
-     * The base implementation of `_.update`.
-     *
-     * @private
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to update.
-     * @param {Function} updater The function to produce the updated value.
-     * @param {Function} [customizer] The function to customize path creation.
-     * @returns {Object} Returns `object`.
-     */
-    function baseUpdate(object, path, updater, customizer) {
-      return baseSet(object, path, updater(baseGet(object, path)), customizer);
-    }
-
-    /**
-     * The base implementation of methods like `_.dropWhile` and `_.takeWhile`
-     * without support for iteratee shorthands.
-     *
-     * @private
-     * @param {Array} array The array to query.
-     * @param {Function} predicate The function invoked per iteration.
-     * @param {boolean} [isDrop] Specify dropping elements instead of taking them.
-     * @param {boolean} [fromRight] Specify iterating from right to left.
-     * @returns {Array} Returns the slice of `array`.
-     */
-    function baseWhile(array, predicate, isDrop, fromRight) {
-      var length = array.length,
-          index = fromRight ? length : -1;
-
-      while ((fromRight ? index-- : ++index < length) &&
-        predicate(array[index], index, array)) {}
-
-      return isDrop
-        ? baseSlice(array, (fromRight ? 0 : index), (fromRight ? index + 1 : length))
-        : baseSlice(array, (fromRight ? index + 1 : 0), (fromRight ? length : index));
-    }
-
-    /**
-     * The base implementation of `wrapperValue` which returns the result of
-     * performing a sequence of actions on the unwrapped `value`, where each
-     * successive action is supplied the return value of the previous.
-     *
-     * @private
-     * @param {*} value The unwrapped value.
-     * @param {Array} actions Actions to perform to resolve the unwrapped value.
-     * @returns {*} Returns the resolved value.
-     */
-    function baseWrapperValue(value, actions) {
-      var result = value;
-      if (result instanceof LazyWrapper) {
-        result = result.value();
-      }
-      return arrayReduce(actions, function(result, action) {
-        return action.func.apply(action.thisArg, arrayPush([result], action.args));
-      }, result);
-    }
-
-    /**
-     * The base implementation of methods like `_.xor`, without support for
-     * iteratee shorthands, that accepts an array of arrays to inspect.
-     *
-     * @private
-     * @param {Array} arrays The arrays to inspect.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of values.
-     */
-    function baseXor(arrays, iteratee, comparator) {
-      var length = arrays.length;
-      if (length < 2) {
-        return length ? baseUniq(arrays[0]) : [];
-      }
-      var index = -1,
-          result = Array(length);
-
-      while (++index < length) {
-        var array = arrays[index],
-            othIndex = -1;
-
-        while (++othIndex < length) {
-          if (othIndex != index) {
-            result[index] = baseDifference(result[index] || array, arrays[othIndex], iteratee, comparator);
-          }
-        }
-      }
-      return baseUniq(baseFlatten(result, 1), iteratee, comparator);
-    }
-
-    /**
-     * This base implementation of `_.zipObject` which assigns values using `assignFunc`.
-     *
-     * @private
-     * @param {Array} props The property identifiers.
-     * @param {Array} values The property values.
-     * @param {Function} assignFunc The function to assign values.
-     * @returns {Object} Returns the new object.
-     */
-    function baseZipObject(props, values, assignFunc) {
-      var index = -1,
-          length = props.length,
-          valsLength = values.length,
-          result = {};
-
-      while (++index < length) {
-        var value = index < valsLength ? values[index] : undefined;
-        assignFunc(result, props[index], value);
-      }
-      return result;
-    }
-
-    /**
-     * Casts `value` to an empty array if it's not an array like object.
-     *
-     * @private
-     * @param {*} value The value to inspect.
-     * @returns {Array|Object} Returns the cast array-like object.
-     */
-    function castArrayLikeObject(value) {
-      return isArrayLikeObject(value) ? value : [];
-    }
-
-    /**
-     * Casts `value` to `identity` if it's not a function.
-     *
-     * @private
-     * @param {*} value The value to inspect.
-     * @returns {Function} Returns cast function.
-     */
-    function castFunction(value) {
-      return typeof value == 'function' ? value : identity;
-    }
-
-    /**
-     * Casts `value` to a path array if it's not one.
-     *
-     * @private
-     * @param {*} value The value to inspect.
-     * @param {Object} [object] The object to query keys on.
-     * @returns {Array} Returns the cast property path array.
-     */
-    function castPath(value, object) {
-      if (isArray(value)) {
-        return value;
-      }
-      return isKey(value, object) ? [value] : stringToPath(toString(value));
-    }
-
-    /**
-     * A `baseRest` alias which can be replaced with `identity` by module
-     * replacement plugins.
-     *
-     * @private
-     * @type {Function}
-     * @param {Function} func The function to apply a rest parameter to.
-     * @returns {Function} Returns the new function.
-     */
-    var castRest = baseRest;
-
-    /**
-     * Casts `array` to a slice if it's needed.
-     *
-     * @private
-     * @param {Array} array The array to inspect.
-     * @param {number} start The start position.
-     * @param {number} [end=array.length] The end position.
-     * @returns {Array} Returns the cast slice.
-     */
-    function castSlice(array, start, end) {
-      var length = array.length;
-      end = end === undefined ? length : end;
-      return (!start && end >= length) ? array : baseSlice(array, start, end);
-    }
-
-    /**
-     * A simple wrapper around the global [`clearTimeout`](https://mdn.io/clearTimeout).
-     *
-     * @private
-     * @param {number|Object} id The timer id or timeout object of the timer to clear.
-     */
-    var clearTimeout = ctxClearTimeout || function(id) {
-      return root.clearTimeout(id);
-    };
-
-    /**
-     * Creates a clone of  `buffer`.
-     *
-     * @private
-     * @param {Buffer} buffer The buffer to clone.
-     * @param {boolean} [isDeep] Specify a deep clone.
-     * @returns {Buffer} Returns the cloned buffer.
-     */
-    function cloneBuffer(buffer, isDeep) {
-      if (isDeep) {
-        return buffer.slice();
-      }
-      var length = buffer.length,
-          result = allocUnsafe ? allocUnsafe(length) : new buffer.constructor(length);
-
-      buffer.copy(result);
-      return result;
-    }
-
-    /**
-     * Creates a clone of `arrayBuffer`.
-     *
-     * @private
-     * @param {ArrayBuffer} arrayBuffer The array buffer to clone.
-     * @returns {ArrayBuffer} Returns the cloned array buffer.
-     */
-    function cloneArrayBuffer(arrayBuffer) {
-      var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
-      new Uint8Array(result).set(new Uint8Array(arrayBuffer));
-      return result;
-    }
-
-    /**
-     * Creates a clone of `dataView`.
-     *
-     * @private
-     * @param {Object} dataView The data view to clone.
-     * @param {boolean} [isDeep] Specify a deep clone.
-     * @returns {Object} Returns the cloned data view.
-     */
-    function cloneDataView(dataView, isDeep) {
-      var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;
-      return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
-    }
-
-    /**
-     * Creates a clone of `regexp`.
-     *
-     * @private
-     * @param {Object} regexp The regexp to clone.
-     * @returns {Object} Returns the cloned regexp.
-     */
-    function cloneRegExp(regexp) {
-      var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
-      result.lastIndex = regexp.lastIndex;
-      return result;
-    }
-
-    /**
-     * Creates a clone of the `symbol` object.
-     *
-     * @private
-     * @param {Object} symbol The symbol object to clone.
-     * @returns {Object} Returns the cloned symbol object.
-     */
-    function cloneSymbol(symbol) {
-      return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};
-    }
-
-    /**
-     * Creates a clone of `typedArray`.
-     *
-     * @private
-     * @param {Object} typedArray The typed array to clone.
-     * @param {boolean} [isDeep] Specify a deep clone.
-     * @returns {Object} Returns the cloned typed array.
-     */
-    function cloneTypedArray(typedArray, isDeep) {
-      var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
-      return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
-    }
-
-    /**
-     * Compares values to sort them in ascending order.
-     *
-     * @private
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {number} Returns the sort order indicator for `value`.
-     */
-    function compareAscending(value, other) {
-      if (value !== other) {
-        var valIsDefined = value !== undefined,
-            valIsNull = value === null,
-            valIsReflexive = value === value,
-            valIsSymbol = isSymbol(value);
-
-        var othIsDefined = other !== undefined,
-            othIsNull = other === null,
-            othIsReflexive = other === other,
-            othIsSymbol = isSymbol(other);
-
-        if ((!othIsNull && !othIsSymbol && !valIsSymbol && value > other) ||
-            (valIsSymbol && othIsDefined && othIsReflexive && !othIsNull && !othIsSymbol) ||
-            (valIsNull && othIsDefined && othIsReflexive) ||
-            (!valIsDefined && othIsReflexive) ||
-            !valIsReflexive) {
-          return 1;
-        }
-        if ((!valIsNull && !valIsSymbol && !othIsSymbol && value < other) ||
-            (othIsSymbol && valIsDefined && valIsReflexive && !valIsNull && !valIsSymbol) ||
-            (othIsNull && valIsDefined && valIsReflexive) ||
-            (!othIsDefined && valIsReflexive) ||
-            !othIsReflexive) {
-          return -1;
-        }
-      }
-      return 0;
-    }
-
-    /**
-     * Used by `_.orderBy` to compare multiple properties of a value to another
-     * and stable sort them.
-     *
-     * If `orders` is unspecified, all values are sorted in ascending order. Otherwise,
-     * specify an order of "desc" for descending or "asc" for ascending sort order
-     * of corresponding values.
-     *
-     * @private
-     * @param {Object} object The object to compare.
-     * @param {Object} other The other object to compare.
-     * @param {boolean[]|string[]} orders The order to sort by for each property.
-     * @returns {number} Returns the sort order indicator for `object`.
-     */
-    function compareMultiple(object, other, orders) {
-      var index = -1,
-          objCriteria = object.criteria,
-          othCriteria = other.criteria,
-          length = objCriteria.length,
-          ordersLength = orders.length;
-
-      while (++index < length) {
-        var result = compareAscending(objCriteria[index], othCriteria[index]);
-        if (result) {
-          if (index >= ordersLength) {
-            return result;
-          }
-          var order = orders[index];
-          return result * (order == 'desc' ? -1 : 1);
-        }
-      }
-      // Fixes an `Array#sort` bug in the JS engine embedded in Adobe applications
-      // that causes it, under certain circumstances, to provide the same value for
-      // `object` and `other`. See https://github.com/jashkenas/underscore/pull/1247
-      // for more details.
-      //
-      // This also ensures a stable sort in V8 and other engines.
-      // See https://bugs.chromium.org/p/v8/issues/detail?id=90 for more details.
-      return object.index - other.index;
-    }
-
-    /**
-     * Creates an array that is the composition of partially applied arguments,
-     * placeholders, and provided arguments into a single array of arguments.
-     *
-     * @private
-     * @param {Array} args The provided arguments.
-     * @param {Array} partials The arguments to prepend to those provided.
-     * @param {Array} holders The `partials` placeholder indexes.
-     * @params {boolean} [isCurried] Specify composing for a curried function.
-     * @returns {Array} Returns the new array of composed arguments.
-     */
-    function composeArgs(args, partials, holders, isCurried) {
-      var argsIndex = -1,
-          argsLength = args.length,
-          holdersLength = holders.length,
-          leftIndex = -1,
-          leftLength = partials.length,
-          rangeLength = nativeMax(argsLength - holdersLength, 0),
-          result = Array(leftLength + rangeLength),
-          isUncurried = !isCurried;
-
-      while (++leftIndex < leftLength) {
-        result[leftIndex] = partials[leftIndex];
-      }
-      while (++argsIndex < holdersLength) {
-        if (isUncurried || argsIndex < argsLength) {
-          result[holders[argsIndex]] = args[argsIndex];
-        }
-      }
-      while (rangeLength--) {
-        result[leftIndex++] = args[argsIndex++];
-      }
-      return result;
-    }
-
-    /**
-     * This function is like `composeArgs` except that the arguments composition
-     * is tailored for `_.partialRight`.
-     *
-     * @private
-     * @param {Array} args The provided arguments.
-     * @param {Array} partials The arguments to append to those provided.
-     * @param {Array} holders The `partials` placeholder indexes.
-     * @params {boolean} [isCurried] Specify composing for a curried function.
-     * @returns {Array} Returns the new array of composed arguments.
-     */
-    function composeArgsRight(args, partials, holders, isCurried) {
-      var argsIndex = -1,
-          argsLength = args.length,
-          holdersIndex = -1,
-          holdersLength = holders.length,
-          rightIndex = -1,
-          rightLength = partials.length,
-          rangeLength = nativeMax(argsLength - holdersLength, 0),
-          result = Array(rangeLength + rightLength),
-          isUncurried = !isCurried;
-
-      while (++argsIndex < rangeLength) {
-        result[argsIndex] = args[argsIndex];
-      }
-      var offset = argsIndex;
-      while (++rightIndex < rightLength) {
-        result[offset + rightIndex] = partials[rightIndex];
-      }
-      while (++holdersIndex < holdersLength) {
-        if (isUncurried || argsIndex < argsLength) {
-          result[offset + holders[holdersIndex]] = args[argsIndex++];
-        }
-      }
-      return result;
-    }
-
-    /**
-     * Copies the values of `source` to `array`.
-     *
-     * @private
-     * @param {Array} source The array to copy values from.
-     * @param {Array} [array=[]] The array to copy values to.
-     * @returns {Array} Returns `array`.
-     */
-    function copyArray(source, array) {
-      var index = -1,
-          length = source.length;
-
-      array || (array = Array(length));
-      while (++index < length) {
-        array[index] = source[index];
-      }
-      return array;
-    }
-
-    /**
-     * Copies properties of `source` to `object`.
-     *
-     * @private
-     * @param {Object} source The object to copy properties from.
-     * @param {Array} props The property identifiers to copy.
-     * @param {Object} [object={}] The object to copy properties to.
-     * @param {Function} [customizer] The function to customize copied values.
-     * @returns {Object} Returns `object`.
-     */
-    function copyObject(source, props, object, customizer) {
-      var isNew = !object;
-      object || (object = {});
-
-      var index = -1,
-          length = props.length;
-
-      while (++index < length) {
-        var key = props[index];
-
-        var newValue = customizer
-          ? customizer(object[key], source[key], key, object, source)
-          : undefined;
-
-        if (newValue === undefined) {
-          newValue = source[key];
-        }
-        if (isNew) {
-          baseAssignValue(object, key, newValue);
-        } else {
-          assignValue(object, key, newValue);
-        }
-      }
-      return object;
-    }
-
-    /**
-     * Copies own symbols of `source` to `object`.
-     *
-     * @private
-     * @param {Object} source The object to copy symbols from.
-     * @param {Object} [object={}] The object to copy symbols to.
-     * @returns {Object} Returns `object`.
-     */
-    function copySymbols(source, object) {
-      return copyObject(source, getSymbols(source), object);
-    }
-
-    /**
-     * Copies own and inherited symbols of `source` to `object`.
-     *
-     * @private
-     * @param {Object} source The object to copy symbols from.
-     * @param {Object} [object={}] The object to copy symbols to.
-     * @returns {Object} Returns `object`.
-     */
-    function copySymbolsIn(source, object) {
-      return copyObject(source, getSymbolsIn(source), object);
-    }
-
-    /**
-     * Creates a function like `_.groupBy`.
-     *
-     * @private
-     * @param {Function} setter The function to set accumulator values.
-     * @param {Function} [initializer] The accumulator object initializer.
-     * @returns {Function} Returns the new aggregator function.
-     */
-    function createAggregator(setter, initializer) {
-      return function(collection, iteratee) {
-        var func = isArray(collection) ? arrayAggregator : baseAggregator,
-            accumulator = initializer ? initializer() : {};
-
-        return func(collection, setter, getIteratee(iteratee, 2), accumulator);
-      };
-    }
-
-    /**
-     * Creates a function like `_.assign`.
-     *
-     * @private
-     * @param {Function} assigner The function to assign values.
-     * @returns {Function} Returns the new assigner function.
-     */
-    function createAssigner(assigner) {
-      return baseRest(function(object, sources) {
-        var index = -1,
-            length = sources.length,
-            customizer = length > 1 ? sources[length - 1] : undefined,
-            guard = length > 2 ? sources[2] : undefined;
-
-        customizer = (assigner.length > 3 && typeof customizer == 'function')
-          ? (length--, customizer)
-          : undefined;
-
-        if (guard && isIterateeCall(sources[0], sources[1], guard)) {
-          customizer = length < 3 ? undefined : customizer;
-          length = 1;
-        }
-        object = Object(object);
-        while (++index < length) {
-          var source = sources[index];
-          if (source) {
-            assigner(object, source, index, customizer);
-          }
-        }
-        return object;
-      });
-    }
-
-    /**
-     * Creates a `baseEach` or `baseEachRight` function.
-     *
-     * @private
-     * @param {Function} eachFunc The function to iterate over a collection.
-     * @param {boolean} [fromRight] Specify iterating from right to left.
-     * @returns {Function} Returns the new base function.
-     */
-    function createBaseEach(eachFunc, fromRight) {
-      return function(collection, iteratee) {
-        if (collection == null) {
-          return collection;
-        }
-        if (!isArrayLike(collection)) {
-          return eachFunc(collection, iteratee);
-        }
-        var length = collection.length,
-            index = fromRight ? length : -1,
-            iterable = Object(collection);
-
-        while ((fromRight ? index-- : ++index < length)) {
-          if (iteratee(iterable[index], index, iterable) === false) {
-            break;
-          }
-        }
-        return collection;
-      };
-    }
-
-    /**
-     * Creates a base function for methods like `_.forIn` and `_.forOwn`.
-     *
-     * @private
-     * @param {boolean} [fromRight] Specify iterating from right to left.
-     * @returns {Function} Returns the new base function.
-     */
-    function createBaseFor(fromRight) {
-      return function(object, iteratee, keysFunc) {
-        var index = -1,
-            iterable = Object(object),
-            props = keysFunc(object),
-            length = props.length;
-
-        while (length--) {
-          var key = props[fromRight ? length : ++index];
-          if (iteratee(iterable[key], key, iterable) === false) {
-            break;
-          }
-        }
-        return object;
-      };
-    }
-
-    /**
-     * Creates a function that wraps `func` to invoke it with the optional `this`
-     * binding of `thisArg`.
-     *
-     * @private
-     * @param {Function} func The function to wrap.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @param {*} [thisArg] The `this` binding of `func`.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createBind(func, bitmask, thisArg) {
-      var isBind = bitmask & WRAP_BIND_FLAG,
-          Ctor = createCtor(func);
-
-      function wrapper() {
-        var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;
-        return fn.apply(isBind ? thisArg : this, arguments);
-      }
-      return wrapper;
-    }
-
-    /**
-     * Creates a function like `_.lowerFirst`.
-     *
-     * @private
-     * @param {string} methodName The name of the `String` case method to use.
-     * @returns {Function} Returns the new case function.
-     */
-    function createCaseFirst(methodName) {
-      return function(string) {
-        string = toString(string);
-
-        var strSymbols = hasUnicode(string)
-          ? stringToArray(string)
-          : undefined;
-
-        var chr = strSymbols
-          ? strSymbols[0]
-          : string.charAt(0);
-
-        var trailing = strSymbols
-          ? castSlice(strSymbols, 1).join('')
-          : string.slice(1);
-
-        return chr[methodName]() + trailing;
-      };
-    }
-
-    /**
-     * Creates a function like `_.camelCase`.
-     *
-     * @private
-     * @param {Function} callback The function to combine each word.
-     * @returns {Function} Returns the new compounder function.
-     */
-    function createCompounder(callback) {
-      return function(string) {
-        return arrayReduce(words(deburr(string).replace(reApos, '')), callback, '');
-      };
-    }
-
-    /**
-     * Creates a function that produces an instance of `Ctor` regardless of
-     * whether it was invoked as part of a `new` expression or by `call` or `apply`.
-     *
-     * @private
-     * @param {Function} Ctor The constructor to wrap.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createCtor(Ctor) {
-      return function() {
-        // Use a `switch` statement to work with class constructors. See
-        // http://ecma-international.org/ecma-262/7.0/#sec-ecmascript-function-objects-call-thisargument-argumentslist
-        // for more details.
-        var args = arguments;
-        switch (args.length) {
-          case 0: return new Ctor;
-          case 1: return new Ctor(args[0]);
-          case 2: return new Ctor(args[0], args[1]);
-          case 3: return new Ctor(args[0], args[1], args[2]);
-          case 4: return new Ctor(args[0], args[1], args[2], args[3]);
-          case 5: return new Ctor(args[0], args[1], args[2], args[3], args[4]);
-          case 6: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5]);
-          case 7: return new Ctor(args[0], args[1], args[2], args[3], args[4], args[5], args[6]);
-        }
-        var thisBinding = baseCreate(Ctor.prototype),
-            result = Ctor.apply(thisBinding, args);
-
-        // Mimic the constructor's `return` behavior.
-        // See https://es5.github.io/#x13.2.2 for more details.
-        return isObject(result) ? result : thisBinding;
-      };
-    }
-
-    /**
-     * Creates a function that wraps `func` to enable currying.
-     *
-     * @private
-     * @param {Function} func The function to wrap.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @param {number} arity The arity of `func`.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createCurry(func, bitmask, arity) {
-      var Ctor = createCtor(func);
-
-      function wrapper() {
-        var length = arguments.length,
-            args = Array(length),
-            index = length,
-            placeholder = getHolder(wrapper);
-
-        while (index--) {
-          args[index] = arguments[index];
-        }
-        var holders = (length < 3 && args[0] !== placeholder && args[length - 1] !== placeholder)
-          ? []
-          : replaceHolders(args, placeholder);
-
-        length -= holders.length;
-        if (length < arity) {
-          return createRecurry(
-            func, bitmask, createHybrid, wrapper.placeholder, undefined,
-            args, holders, undefined, undefined, arity - length);
-        }
-        var fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;
-        return apply(fn, this, args);
-      }
-      return wrapper;
-    }
-
-    /**
-     * Creates a `_.find` or `_.findLast` function.
-     *
-     * @private
-     * @param {Function} findIndexFunc The function to find the collection index.
-     * @returns {Function} Returns the new find function.
-     */
-    function createFind(findIndexFunc) {
-      return function(collection, predicate, fromIndex) {
-        var iterable = Object(collection);
-        if (!isArrayLike(collection)) {
-          var iteratee = getIteratee(predicate, 3);
-          collection = keys(collection);
-          predicate = function(key) { return iteratee(iterable[key], key, iterable); };
-        }
-        var index = findIndexFunc(collection, predicate, fromIndex);
-        return index > -1 ? iterable[iteratee ? collection[index] : index] : undefined;
-      };
-    }
-
-    /**
-     * Creates a `_.flow` or `_.flowRight` function.
-     *
-     * @private
-     * @param {boolean} [fromRight] Specify iterating from right to left.
-     * @returns {Function} Returns the new flow function.
-     */
-    function createFlow(fromRight) {
-      return flatRest(function(funcs) {
-        var length = funcs.length,
-            index = length,
-            prereq = LodashWrapper.prototype.thru;
-
-        if (fromRight) {
-          funcs.reverse();
-        }
-        while (index--) {
-          var func = funcs[index];
-          if (typeof func != 'function') {
-            throw new TypeError(FUNC_ERROR_TEXT);
-          }
-          if (prereq && !wrapper && getFuncName(func) == 'wrapper') {
-            var wrapper = new LodashWrapper([], true);
-          }
-        }
-        index = wrapper ? index : length;
-        while (++index < length) {
-          func = funcs[index];
-
-          var funcName = getFuncName(func),
-              data = funcName == 'wrapper' ? getData(func) : undefined;
-
-          if (data && isLaziable(data[0]) &&
-                data[1] == (WRAP_ARY_FLAG | WRAP_CURRY_FLAG | WRAP_PARTIAL_FLAG | WRAP_REARG_FLAG) &&
-                !data[4].length && data[9] == 1
-              ) {
-            wrapper = wrapper[getFuncName(data[0])].apply(wrapper, data[3]);
-          } else {
-            wrapper = (func.length == 1 && isLaziable(func))
-              ? wrapper[funcName]()
-              : wrapper.thru(func);
-          }
-        }
-        return function() {
-          var args = arguments,
-              value = args[0];
-
-          if (wrapper && args.length == 1 && isArray(value)) {
-            return wrapper.plant(value).value();
-          }
-          var index = 0,
-              result = length ? funcs[index].apply(this, args) : value;
-
-          while (++index < length) {
-            result = funcs[index].call(this, result);
-          }
-          return result;
-        };
-      });
-    }
-
-    /**
-     * Creates a function that wraps `func` to invoke it with optional `this`
-     * binding of `thisArg`, partial application, and currying.
-     *
-     * @private
-     * @param {Function|string} func The function or method name to wrap.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @param {*} [thisArg] The `this` binding of `func`.
-     * @param {Array} [partials] The arguments to prepend to those provided to
-     *  the new function.
-     * @param {Array} [holders] The `partials` placeholder indexes.
-     * @param {Array} [partialsRight] The arguments to append to those provided
-     *  to the new function.
-     * @param {Array} [holdersRight] The `partialsRight` placeholder indexes.
-     * @param {Array} [argPos] The argument positions of the new function.
-     * @param {number} [ary] The arity cap of `func`.
-     * @param {number} [arity] The arity of `func`.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createHybrid(func, bitmask, thisArg, partials, holders, partialsRight, holdersRight, argPos, ary, arity) {
-      var isAry = bitmask & WRAP_ARY_FLAG,
-          isBind = bitmask & WRAP_BIND_FLAG,
-          isBindKey = bitmask & WRAP_BIND_KEY_FLAG,
-          isCurried = bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG),
-          isFlip = bitmask & WRAP_FLIP_FLAG,
-          Ctor = isBindKey ? undefined : createCtor(func);
-
-      function wrapper() {
-        var length = arguments.length,
-            args = Array(length),
-            index = length;
-
-        while (index--) {
-          args[index] = arguments[index];
-        }
-        if (isCurried) {
-          var placeholder = getHolder(wrapper),
-              holdersCount = countHolders(args, placeholder);
-        }
-        if (partials) {
-          args = composeArgs(args, partials, holders, isCurried);
-        }
-        if (partialsRight) {
-          args = composeArgsRight(args, partialsRight, holdersRight, isCurried);
-        }
-        length -= holdersCount;
-        if (isCurried && length < arity) {
-          var newHolders = replaceHolders(args, placeholder);
-          return createRecurry(
-            func, bitmask, createHybrid, wrapper.placeholder, thisArg,
-            args, newHolders, argPos, ary, arity - length
-          );
-        }
-        var thisBinding = isBind ? thisArg : this,
-            fn = isBindKey ? thisBinding[func] : func;
-
-        length = args.length;
-        if (argPos) {
-          args = reorder(args, argPos);
-        } else if (isFlip && length > 1) {
-          args.reverse();
-        }
-        if (isAry && ary < length) {
-          args.length = ary;
-        }
-        if (this && this !== root && this instanceof wrapper) {
-          fn = Ctor || createCtor(fn);
-        }
-        return fn.apply(thisBinding, args);
-      }
-      return wrapper;
-    }
-
-    /**
-     * Creates a function like `_.invertBy`.
-     *
-     * @private
-     * @param {Function} setter The function to set accumulator values.
-     * @param {Function} toIteratee The function to resolve iteratees.
-     * @returns {Function} Returns the new inverter function.
-     */
-    function createInverter(setter, toIteratee) {
-      return function(object, iteratee) {
-        return baseInverter(object, setter, toIteratee(iteratee), {});
-      };
-    }
-
-    /**
-     * Creates a function that performs a mathematical operation on two values.
-     *
-     * @private
-     * @param {Function} operator The function to perform the operation.
-     * @param {number} [defaultValue] The value used for `undefined` arguments.
-     * @returns {Function} Returns the new mathematical operation function.
-     */
-    function createMathOperation(operator, defaultValue) {
-      return function(value, other) {
-        var result;
-        if (value === undefined && other === undefined) {
-          return defaultValue;
-        }
-        if (value !== undefined) {
-          result = value;
-        }
-        if (other !== undefined) {
-          if (result === undefined) {
-            return other;
-          }
-          if (typeof value == 'string' || typeof other == 'string') {
-            value = baseToString(value);
-            other = baseToString(other);
-          } else {
-            value = baseToNumber(value);
-            other = baseToNumber(other);
-          }
-          result = operator(value, other);
-        }
-        return result;
-      };
-    }
-
-    /**
-     * Creates a function like `_.over`.
-     *
-     * @private
-     * @param {Function} arrayFunc The function to iterate over iteratees.
-     * @returns {Function} Returns the new over function.
-     */
-    function createOver(arrayFunc) {
-      return flatRest(function(iteratees) {
-        iteratees = arrayMap(iteratees, baseUnary(getIteratee()));
-        return baseRest(function(args) {
-          var thisArg = this;
-          return arrayFunc(iteratees, function(iteratee) {
-            return apply(iteratee, thisArg, args);
-          });
-        });
-      });
-    }
-
-    /**
-     * Creates the padding for `string` based on `length`. The `chars` string
-     * is truncated if the number of characters exceeds `length`.
-     *
-     * @private
-     * @param {number} length The padding length.
-     * @param {string} [chars=' '] The string used as padding.
-     * @returns {string} Returns the padding for `string`.
-     */
-    function createPadding(length, chars) {
-      chars = chars === undefined ? ' ' : baseToString(chars);
-
-      var charsLength = chars.length;
-      if (charsLength < 2) {
-        return charsLength ? baseRepeat(chars, length) : chars;
-      }
-      var result = baseRepeat(chars, nativeCeil(length / stringSize(chars)));
-      return hasUnicode(chars)
-        ? castSlice(stringToArray(result), 0, length).join('')
-        : result.slice(0, length);
-    }
-
-    /**
-     * Creates a function that wraps `func` to invoke it with the `this` binding
-     * of `thisArg` and `partials` prepended to the arguments it receives.
-     *
-     * @private
-     * @param {Function} func The function to wrap.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @param {*} thisArg The `this` binding of `func`.
-     * @param {Array} partials The arguments to prepend to those provided to
-     *  the new function.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createPartial(func, bitmask, thisArg, partials) {
-      var isBind = bitmask & WRAP_BIND_FLAG,
-          Ctor = createCtor(func);
-
-      function wrapper() {
-        var argsIndex = -1,
-            argsLength = arguments.length,
-            leftIndex = -1,
-            leftLength = partials.length,
-            args = Array(leftLength + argsLength),
-            fn = (this && this !== root && this instanceof wrapper) ? Ctor : func;
-
-        while (++leftIndex < leftLength) {
-          args[leftIndex] = partials[leftIndex];
-        }
-        while (argsLength--) {
-          args[leftIndex++] = arguments[++argsIndex];
-        }
-        return apply(fn, isBind ? thisArg : this, args);
-      }
-      return wrapper;
-    }
-
-    /**
-     * Creates a `_.range` or `_.rangeRight` function.
-     *
-     * @private
-     * @param {boolean} [fromRight] Specify iterating from right to left.
-     * @returns {Function} Returns the new range function.
-     */
-    function createRange(fromRight) {
-      return function(start, end, step) {
-        if (step && typeof step != 'number' && isIterateeCall(start, end, step)) {
-          end = step = undefined;
-        }
-        // Ensure the sign of `-0` is preserved.
-        start = toFinite(start);
-        if (end === undefined) {
-          end = start;
-          start = 0;
-        } else {
-          end = toFinite(end);
-        }
-        step = step === undefined ? (start < end ? 1 : -1) : toFinite(step);
-        return baseRange(start, end, step, fromRight);
-      };
-    }
-
-    /**
-     * Creates a function that performs a relational operation on two values.
-     *
-     * @private
-     * @param {Function} operator The function to perform the operation.
-     * @returns {Function} Returns the new relational operation function.
-     */
-    function createRelationalOperation(operator) {
-      return function(value, other) {
-        if (!(typeof value == 'string' && typeof other == 'string')) {
-          value = toNumber(value);
-          other = toNumber(other);
-        }
-        return operator(value, other);
-      };
-    }
-
-    /**
-     * Creates a function that wraps `func` to continue currying.
-     *
-     * @private
-     * @param {Function} func The function to wrap.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @param {Function} wrapFunc The function to create the `func` wrapper.
-     * @param {*} placeholder The placeholder value.
-     * @param {*} [thisArg] The `this` binding of `func`.
-     * @param {Array} [partials] The arguments to prepend to those provided to
-     *  the new function.
-     * @param {Array} [holders] The `partials` placeholder indexes.
-     * @param {Array} [argPos] The argument positions of the new function.
-     * @param {number} [ary] The arity cap of `func`.
-     * @param {number} [arity] The arity of `func`.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createRecurry(func, bitmask, wrapFunc, placeholder, thisArg, partials, holders, argPos, ary, arity) {
-      var isCurry = bitmask & WRAP_CURRY_FLAG,
-          newHolders = isCurry ? holders : undefined,
-          newHoldersRight = isCurry ? undefined : holders,
-          newPartials = isCurry ? partials : undefined,
-          newPartialsRight = isCurry ? undefined : partials;
-
-      bitmask |= (isCurry ? WRAP_PARTIAL_FLAG : WRAP_PARTIAL_RIGHT_FLAG);
-      bitmask &= ~(isCurry ? WRAP_PARTIAL_RIGHT_FLAG : WRAP_PARTIAL_FLAG);
-
-      if (!(bitmask & WRAP_CURRY_BOUND_FLAG)) {
-        bitmask &= ~(WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG);
-      }
-      var newData = [
-        func, bitmask, thisArg, newPartials, newHolders, newPartialsRight,
-        newHoldersRight, argPos, ary, arity
-      ];
-
-      var result = wrapFunc.apply(undefined, newData);
-      if (isLaziable(func)) {
-        setData(result, newData);
-      }
-      result.placeholder = placeholder;
-      return setWrapToString(result, func, bitmask);
-    }
-
-    /**
-     * Creates a function like `_.round`.
-     *
-     * @private
-     * @param {string} methodName The name of the `Math` method to use when rounding.
-     * @returns {Function} Returns the new round function.
-     */
-    function createRound(methodName) {
-      var func = Math[methodName];
-      return function(number, precision) {
-        number = toNumber(number);
-        precision = precision == null ? 0 : nativeMin(toInteger(precision), 292);
-        if (precision) {
-          // Shift with exponential notation to avoid floating-point issues.
-          // See [MDN](https://mdn.io/round#Examples) for more details.
-          var pair = (toString(number) + 'e').split('e'),
-              value = func(pair[0] + 'e' + (+pair[1] + precision));
-
-          pair = (toString(value) + 'e').split('e');
-          return +(pair[0] + 'e' + (+pair[1] - precision));
-        }
-        return func(number);
-      };
-    }
-
-    /**
-     * Creates a set object of `values`.
-     *
-     * @private
-     * @param {Array} values The values to add to the set.
-     * @returns {Object} Returns the new set.
-     */
-    var createSet = !(Set && (1 / setToArray(new Set([,-0]))[1]) == INFINITY) ? noop : function(values) {
-      return new Set(values);
-    };
-
-    /**
-     * Creates a `_.toPairs` or `_.toPairsIn` function.
-     *
-     * @private
-     * @param {Function} keysFunc The function to get the keys of a given object.
-     * @returns {Function} Returns the new pairs function.
-     */
-    function createToPairs(keysFunc) {
-      return function(object) {
-        var tag = getTag(object);
-        if (tag == mapTag) {
-          return mapToArray(object);
-        }
-        if (tag == setTag) {
-          return setToPairs(object);
-        }
-        return baseToPairs(object, keysFunc(object));
-      };
-    }
-
-    /**
-     * Creates a function that either curries or invokes `func` with optional
-     * `this` binding and partially applied arguments.
-     *
-     * @private
-     * @param {Function|string} func The function or method name to wrap.
-     * @param {number} bitmask The bitmask flags.
-     *    1 - `_.bind`
-     *    2 - `_.bindKey`
-     *    4 - `_.curry` or `_.curryRight` of a bound function
-     *    8 - `_.curry`
-     *   16 - `_.curryRight`
-     *   32 - `_.partial`
-     *   64 - `_.partialRight`
-     *  128 - `_.rearg`
-     *  256 - `_.ary`
-     *  512 - `_.flip`
-     * @param {*} [thisArg] The `this` binding of `func`.
-     * @param {Array} [partials] The arguments to be partially applied.
-     * @param {Array} [holders] The `partials` placeholder indexes.
-     * @param {Array} [argPos] The argument positions of the new function.
-     * @param {number} [ary] The arity cap of `func`.
-     * @param {number} [arity] The arity of `func`.
-     * @returns {Function} Returns the new wrapped function.
-     */
-    function createWrap(func, bitmask, thisArg, partials, holders, argPos, ary, arity) {
-      var isBindKey = bitmask & WRAP_BIND_KEY_FLAG;
-      if (!isBindKey && typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      var length = partials ? partials.length : 0;
-      if (!length) {
-        bitmask &= ~(WRAP_PARTIAL_FLAG | WRAP_PARTIAL_RIGHT_FLAG);
-        partials = holders = undefined;
-      }
-      ary = ary === undefined ? ary : nativeMax(toInteger(ary), 0);
-      arity = arity === undefined ? arity : toInteger(arity);
-      length -= holders ? holders.length : 0;
-
-      if (bitmask & WRAP_PARTIAL_RIGHT_FLAG) {
-        var partialsRight = partials,
-            holdersRight = holders;
-
-        partials = holders = undefined;
-      }
-      var data = isBindKey ? undefined : getData(func);
-
-      var newData = [
-        func, bitmask, thisArg, partials, holders, partialsRight, holdersRight,
-        argPos, ary, arity
-      ];
-
-      if (data) {
-        mergeData(newData, data);
-      }
-      func = newData[0];
-      bitmask = newData[1];
-      thisArg = newData[2];
-      partials = newData[3];
-      holders = newData[4];
-      arity = newData[9] = newData[9] === undefined
-        ? (isBindKey ? 0 : func.length)
-        : nativeMax(newData[9] - length, 0);
-
-      if (!arity && bitmask & (WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG)) {
-        bitmask &= ~(WRAP_CURRY_FLAG | WRAP_CURRY_RIGHT_FLAG);
-      }
-      if (!bitmask || bitmask == WRAP_BIND_FLAG) {
-        var result = createBind(func, bitmask, thisArg);
-      } else if (bitmask == WRAP_CURRY_FLAG || bitmask == WRAP_CURRY_RIGHT_FLAG) {
-        result = createCurry(func, bitmask, arity);
-      } else if ((bitmask == WRAP_PARTIAL_FLAG || bitmask == (WRAP_BIND_FLAG | WRAP_PARTIAL_FLAG)) && !holders.length) {
-        result = createPartial(func, bitmask, thisArg, partials);
-      } else {
-        result = createHybrid.apply(undefined, newData);
-      }
-      var setter = data ? baseSetData : setData;
-      return setWrapToString(setter(result, newData), func, bitmask);
-    }
-
-    /**
-     * Used by `_.defaults` to customize its `_.assignIn` use to assign properties
-     * of source objects to the destination object for all destination properties
-     * that resolve to `undefined`.
-     *
-     * @private
-     * @param {*} objValue The destination value.
-     * @param {*} srcValue The source value.
-     * @param {string} key The key of the property to assign.
-     * @param {Object} object The parent object of `objValue`.
-     * @returns {*} Returns the value to assign.
-     */
-    function customDefaultsAssignIn(objValue, srcValue, key, object) {
-      if (objValue === undefined ||
-          (eq(objValue, objectProto[key]) && !hasOwnProperty.call(object, key))) {
-        return srcValue;
-      }
-      return objValue;
-    }
-
-    /**
-     * Used by `_.defaultsDeep` to customize its `_.merge` use to merge source
-     * objects into destination objects that are passed thru.
-     *
-     * @private
-     * @param {*} objValue The destination value.
-     * @param {*} srcValue The source value.
-     * @param {string} key The key of the property to merge.
-     * @param {Object} object The parent object of `objValue`.
-     * @param {Object} source The parent object of `srcValue`.
-     * @param {Object} [stack] Tracks traversed source values and their merged
-     *  counterparts.
-     * @returns {*} Returns the value to assign.
-     */
-    function customDefaultsMerge(objValue, srcValue, key, object, source, stack) {
-      if (isObject(objValue) && isObject(srcValue)) {
-        // Recursively merge objects and arrays (susceptible to call stack limits).
-        stack.set(srcValue, objValue);
-        baseMerge(objValue, srcValue, undefined, customDefaultsMerge, stack);
-        stack['delete'](srcValue);
-      }
-      return objValue;
-    }
-
-    /**
-     * Used by `_.omit` to customize its `_.cloneDeep` use to only clone plain
-     * objects.
-     *
-     * @private
-     * @param {*} value The value to inspect.
-     * @param {string} key The key of the property to inspect.
-     * @returns {*} Returns the uncloned value or `undefined` to defer cloning to `_.cloneDeep`.
-     */
-    function customOmitClone(value) {
-      return isPlainObject(value) ? undefined : value;
-    }
-
-    /**
-     * A specialized version of `baseIsEqualDeep` for arrays with support for
-     * partial deep comparisons.
-     *
-     * @private
-     * @param {Array} array The array to compare.
-     * @param {Array} other The other array to compare.
-     * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
-     * @param {Function} customizer The function to customize comparisons.
-     * @param {Function} equalFunc The function to determine equivalents of values.
-     * @param {Object} stack Tracks traversed `array` and `other` objects.
-     * @returns {boolean} Returns `true` if the arrays are equivalent, else `false`.
-     */
-    function equalArrays(array, other, bitmask, customizer, equalFunc, stack) {
-      var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
-          arrLength = array.length,
-          othLength = other.length;
-
-      if (arrLength != othLength && !(isPartial && othLength > arrLength)) {
-        return false;
-      }
-      // Assume cyclic values are equal.
-      var stacked = stack.get(array);
-      if (stacked && stack.get(other)) {
-        return stacked == other;
-      }
-      var index = -1,
-          result = true,
-          seen = (bitmask & COMPARE_UNORDERED_FLAG) ? new SetCache : undefined;
-
-      stack.set(array, other);
-      stack.set(other, array);
-
-      // Ignore non-index properties.
-      while (++index < arrLength) {
-        var arrValue = array[index],
-            othValue = other[index];
-
-        if (customizer) {
-          var compared = isPartial
-            ? customizer(othValue, arrValue, index, other, array, stack)
-            : customizer(arrValue, othValue, index, array, other, stack);
-        }
-        if (compared !== undefined) {
-          if (compared) {
-            continue;
-          }
-          result = false;
-          break;
-        }
-        // Recursively compare arrays (susceptible to call stack limits).
-        if (seen) {
-          if (!arraySome(other, function(othValue, othIndex) {
-                if (!cacheHas(seen, othIndex) &&
-                    (arrValue === othValue || equalFunc(arrValue, othValue, bitmask, customizer, stack))) {
-                  return seen.push(othIndex);
-                }
-              })) {
-            result = false;
-            break;
-          }
-        } else if (!(
-              arrValue === othValue ||
-                equalFunc(arrValue, othValue, bitmask, customizer, stack)
-            )) {
-          result = false;
-          break;
-        }
-      }
-      stack['delete'](array);
-      stack['delete'](other);
-      return result;
-    }
-
-    /**
-     * A specialized version of `baseIsEqualDeep` for comparing objects of
-     * the same `toStringTag`.
-     *
-     * **Note:** This function only supports comparing values with tags of
-     * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
-     *
-     * @private
-     * @param {Object} object The object to compare.
-     * @param {Object} other The other object to compare.
-     * @param {string} tag The `toStringTag` of the objects to compare.
-     * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
-     * @param {Function} customizer The function to customize comparisons.
-     * @param {Function} equalFunc The function to determine equivalents of values.
-     * @param {Object} stack Tracks traversed `object` and `other` objects.
-     * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
-     */
-    function equalByTag(object, other, tag, bitmask, customizer, equalFunc, stack) {
-      switch (tag) {
-        case dataViewTag:
-          if ((object.byteLength != other.byteLength) ||
-              (object.byteOffset != other.byteOffset)) {
-            return false;
-          }
-          object = object.buffer;
-          other = other.buffer;
-
-        case arrayBufferTag:
-          if ((object.byteLength != other.byteLength) ||
-              !equalFunc(new Uint8Array(object), new Uint8Array(other))) {
-            return false;
-          }
-          return true;
-
-        case boolTag:
-        case dateTag:
-        case numberTag:
-          // Coerce booleans to `1` or `0` and dates to milliseconds.
-          // Invalid dates are coerced to `NaN`.
-          return eq(+object, +other);
-
-        case errorTag:
-          return object.name == other.name && object.message == other.message;
-
-        case regexpTag:
-        case stringTag:
-          // Coerce regexes to strings and treat strings, primitives and objects,
-          // as equal. See http://www.ecma-international.org/ecma-262/7.0/#sec-regexp.prototype.tostring
-          // for more details.
-          return object == (other + '');
-
-        case mapTag:
-          var convert = mapToArray;
-
-        case setTag:
-          var isPartial = bitmask & COMPARE_PARTIAL_FLAG;
-          convert || (convert = setToArray);
-
-          if (object.size != other.size && !isPartial) {
-            return false;
-          }
-          // Assume cyclic values are equal.
-          var stacked = stack.get(object);
-          if (stacked) {
-            return stacked == other;
-          }
-          bitmask |= COMPARE_UNORDERED_FLAG;
-
-          // Recursively compare objects (susceptible to call stack limits).
-          stack.set(object, other);
-          var result = equalArrays(convert(object), convert(other), bitmask, customizer, equalFunc, stack);
-          stack['delete'](object);
-          return result;
-
-        case symbolTag:
-          if (symbolValueOf) {
-            return symbolValueOf.call(object) == symbolValueOf.call(other);
-          }
-      }
-      return false;
-    }
-
-    /**
-     * A specialized version of `baseIsEqualDeep` for objects with support for
-     * partial deep comparisons.
-     *
-     * @private
-     * @param {Object} object The object to compare.
-     * @param {Object} other The other object to compare.
-     * @param {number} bitmask The bitmask flags. See `baseIsEqual` for more details.
-     * @param {Function} customizer The function to customize comparisons.
-     * @param {Function} equalFunc The function to determine equivalents of values.
-     * @param {Object} stack Tracks traversed `object` and `other` objects.
-     * @returns {boolean} Returns `true` if the objects are equivalent, else `false`.
-     */
-    function equalObjects(object, other, bitmask, customizer, equalFunc, stack) {
-      var isPartial = bitmask & COMPARE_PARTIAL_FLAG,
-          objProps = getAllKeys(object),
-          objLength = objProps.length,
-          othProps = getAllKeys(other),
-          othLength = othProps.length;
-
-      if (objLength != othLength && !isPartial) {
-        return false;
-      }
-      var index = objLength;
-      while (index--) {
-        var key = objProps[index];
-        if (!(isPartial ? key in other : hasOwnProperty.call(other, key))) {
-          return false;
-        }
-      }
-      // Assume cyclic values are equal.
-      var stacked = stack.get(object);
-      if (stacked && stack.get(other)) {
-        return stacked == other;
-      }
-      var result = true;
-      stack.set(object, other);
-      stack.set(other, object);
-
-      var skipCtor = isPartial;
-      while (++index < objLength) {
-        key = objProps[index];
-        var objValue = object[key],
-            othValue = other[key];
-
-        if (customizer) {
-          var compared = isPartial
-            ? customizer(othValue, objValue, key, other, object, stack)
-            : customizer(objValue, othValue, key, object, other, stack);
-        }
-        // Recursively compare objects (susceptible to call stack limits).
-        if (!(compared === undefined
-              ? (objValue === othValue || equalFunc(objValue, othValue, bitmask, customizer, stack))
-              : compared
-            )) {
-          result = false;
-          break;
-        }
-        skipCtor || (skipCtor = key == 'constructor');
-      }
-      if (result && !skipCtor) {
-        var objCtor = object.constructor,
-            othCtor = other.constructor;
-
-        // Non `Object` object instances with different constructors are not equal.
-        if (objCtor != othCtor &&
-            ('constructor' in object && 'constructor' in other) &&
-            !(typeof objCtor == 'function' && objCtor instanceof objCtor &&
-              typeof othCtor == 'function' && othCtor instanceof othCtor)) {
-          result = false;
-        }
-      }
-      stack['delete'](object);
-      stack['delete'](other);
-      return result;
-    }
-
-    /**
-     * A specialized version of `baseRest` which flattens the rest array.
-     *
-     * @private
-     * @param {Function} func The function to apply a rest parameter to.
-     * @returns {Function} Returns the new function.
-     */
-    function flatRest(func) {
-      return setToString(overRest(func, undefined, flatten), func + '');
-    }
-
-    /**
-     * Creates an array of own enumerable property names and symbols of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names and symbols.
-     */
-    function getAllKeys(object) {
-      return baseGetAllKeys(object, keys, getSymbols);
-    }
-
-    /**
-     * Creates an array of own and inherited enumerable property names and
-     * symbols of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names and symbols.
-     */
-    function getAllKeysIn(object) {
-      return baseGetAllKeys(object, keysIn, getSymbolsIn);
-    }
-
-    /**
-     * Gets metadata for `func`.
-     *
-     * @private
-     * @param {Function} func The function to query.
-     * @returns {*} Returns the metadata for `func`.
-     */
-    var getData = !metaMap ? noop : function(func) {
-      return metaMap.get(func);
-    };
-
-    /**
-     * Gets the name of `func`.
-     *
-     * @private
-     * @param {Function} func The function to query.
-     * @returns {string} Returns the function name.
-     */
-    function getFuncName(func) {
-      var result = (func.name + ''),
-          array = realNames[result],
-          length = hasOwnProperty.call(realNames, result) ? array.length : 0;
-
-      while (length--) {
-        var data = array[length],
-            otherFunc = data.func;
-        if (otherFunc == null || otherFunc == func) {
-          return data.name;
-        }
-      }
-      return result;
-    }
-
-    /**
-     * Gets the argument placeholder value for `func`.
-     *
-     * @private
-     * @param {Function} func The function to inspect.
-     * @returns {*} Returns the placeholder value.
-     */
-    function getHolder(func) {
-      var object = hasOwnProperty.call(lodash, 'placeholder') ? lodash : func;
-      return object.placeholder;
-    }
-
-    /**
-     * Gets the appropriate "iteratee" function. If `_.iteratee` is customized,
-     * this function returns the custom method, otherwise it returns `baseIteratee`.
-     * If arguments are provided, the chosen function is invoked with them and
-     * its result is returned.
-     *
-     * @private
-     * @param {*} [value] The value to convert to an iteratee.
-     * @param {number} [arity] The arity of the created iteratee.
-     * @returns {Function} Returns the chosen function or its result.
-     */
-    function getIteratee() {
-      var result = lodash.iteratee || iteratee;
-      result = result === iteratee ? baseIteratee : result;
-      return arguments.length ? result(arguments[0], arguments[1]) : result;
-    }
-
-    /**
-     * Gets the data for `map`.
-     *
-     * @private
-     * @param {Object} map The map to query.
-     * @param {string} key The reference key.
-     * @returns {*} Returns the map data.
-     */
-    function getMapData(map, key) {
-      var data = map.__data__;
-      return isKeyable(key)
-        ? data[typeof key == 'string' ? 'string' : 'hash']
-        : data.map;
-    }
-
-    /**
-     * Gets the property names, values, and compare flags of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the match data of `object`.
-     */
-    function getMatchData(object) {
-      var result = keys(object),
-          length = result.length;
-
-      while (length--) {
-        var key = result[length],
-            value = object[key];
-
-        result[length] = [key, value, isStrictComparable(value)];
-      }
-      return result;
-    }
-
-    /**
-     * Gets the native function at `key` of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @param {string} key The key of the method to get.
-     * @returns {*} Returns the function if it's native, else `undefined`.
-     */
-    function getNative(object, key) {
-      var value = getValue(object, key);
-      return baseIsNative(value) ? value : undefined;
-    }
-
-    /**
-     * A specialized version of `baseGetTag` which ignores `Symbol.toStringTag` values.
-     *
-     * @private
-     * @param {*} value The value to query.
-     * @returns {string} Returns the raw `toStringTag`.
-     */
-    function getRawTag(value) {
-      var isOwn = hasOwnProperty.call(value, symToStringTag),
-          tag = value[symToStringTag];
-
-      try {
-        value[symToStringTag] = undefined;
-        var unmasked = true;
-      } catch (e) {}
-
-      var result = nativeObjectToString.call(value);
-      if (unmasked) {
-        if (isOwn) {
-          value[symToStringTag] = tag;
-        } else {
-          delete value[symToStringTag];
-        }
-      }
-      return result;
-    }
-
-    /**
-     * Creates an array of the own enumerable symbols of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of symbols.
-     */
-    var getSymbols = !nativeGetSymbols ? stubArray : function(object) {
-      if (object == null) {
-        return [];
-      }
-      object = Object(object);
-      return arrayFilter(nativeGetSymbols(object), function(symbol) {
-        return propertyIsEnumerable.call(object, symbol);
-      });
-    };
-
-    /**
-     * Creates an array of the own and inherited enumerable symbols of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of symbols.
-     */
-    var getSymbolsIn = !nativeGetSymbols ? stubArray : function(object) {
-      var result = [];
-      while (object) {
-        arrayPush(result, getSymbols(object));
-        object = getPrototype(object);
-      }
-      return result;
-    };
-
-    /**
-     * Gets the `toStringTag` of `value`.
-     *
-     * @private
-     * @param {*} value The value to query.
-     * @returns {string} Returns the `toStringTag`.
-     */
-    var getTag = baseGetTag;
-
-    // Fallback for data views, maps, sets, and weak maps in IE 11 and promises in Node.js < 6.
-    if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
-        (Map && getTag(new Map) != mapTag) ||
-        (Promise && getTag(Promise.resolve()) != promiseTag) ||
-        (Set && getTag(new Set) != setTag) ||
-        (WeakMap && getTag(new WeakMap) != weakMapTag)) {
-      getTag = function(value) {
-        var result = baseGetTag(value),
-            Ctor = result == objectTag ? value.constructor : undefined,
-            ctorString = Ctor ? toSource(Ctor) : '';
-
-        if (ctorString) {
-          switch (ctorString) {
-            case dataViewCtorString: return dataViewTag;
-            case mapCtorString: return mapTag;
-            case promiseCtorString: return promiseTag;
-            case setCtorString: return setTag;
-            case weakMapCtorString: return weakMapTag;
-          }
-        }
-        return result;
-      };
-    }
-
-    /**
-     * Gets the view, applying any `transforms` to the `start` and `end` positions.
-     *
-     * @private
-     * @param {number} start The start of the view.
-     * @param {number} end The end of the view.
-     * @param {Array} transforms The transformations to apply to the view.
-     * @returns {Object} Returns an object containing the `start` and `end`
-     *  positions of the view.
-     */
-    function getView(start, end, transforms) {
-      var index = -1,
-          length = transforms.length;
-
-      while (++index < length) {
-        var data = transforms[index],
-            size = data.size;
-
-        switch (data.type) {
-          case 'drop':      start += size; break;
-          case 'dropRight': end -= size; break;
-          case 'take':      end = nativeMin(end, start + size); break;
-          case 'takeRight': start = nativeMax(start, end - size); break;
-        }
-      }
-      return { 'start': start, 'end': end };
-    }
-
-    /**
-     * Extracts wrapper details from the `source` body comment.
-     *
-     * @private
-     * @param {string} source The source to inspect.
-     * @returns {Array} Returns the wrapper details.
-     */
-    function getWrapDetails(source) {
-      var match = source.match(reWrapDetails);
-      return match ? match[1].split(reSplitDetails) : [];
-    }
-
-    /**
-     * Checks if `path` exists on `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path to check.
-     * @param {Function} hasFunc The function to check properties.
-     * @returns {boolean} Returns `true` if `path` exists, else `false`.
-     */
-    function hasPath(object, path, hasFunc) {
-      path = castPath(path, object);
-
-      var index = -1,
-          length = path.length,
-          result = false;
-
-      while (++index < length) {
-        var key = toKey(path[index]);
-        if (!(result = object != null && hasFunc(object, key))) {
-          break;
-        }
-        object = object[key];
-      }
-      if (result || ++index != length) {
-        return result;
-      }
-      length = object == null ? 0 : object.length;
-      return !!length && isLength(length) && isIndex(key, length) &&
-        (isArray(object) || isArguments(object));
-    }
-
-    /**
-     * Initializes an array clone.
-     *
-     * @private
-     * @param {Array} array The array to clone.
-     * @returns {Array} Returns the initialized clone.
-     */
-    function initCloneArray(array) {
-      var length = array.length,
-          result = new array.constructor(length);
-
-      // Add properties assigned by `RegExp#exec`.
-      if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) {
-        result.index = array.index;
-        result.input = array.input;
-      }
-      return result;
-    }
-
-    /**
-     * Initializes an object clone.
-     *
-     * @private
-     * @param {Object} object The object to clone.
-     * @returns {Object} Returns the initialized clone.
-     */
-    function initCloneObject(object) {
-      return (typeof object.constructor == 'function' && !isPrototype(object))
-        ? baseCreate(getPrototype(object))
-        : {};
-    }
-
-    /**
-     * Initializes an object clone based on its `toStringTag`.
-     *
-     * **Note:** This function only supports cloning values with tags of
-     * `Boolean`, `Date`, `Error`, `Map`, `Number`, `RegExp`, `Set`, or `String`.
-     *
-     * @private
-     * @param {Object} object The object to clone.
-     * @param {string} tag The `toStringTag` of the object to clone.
-     * @param {boolean} [isDeep] Specify a deep clone.
-     * @returns {Object} Returns the initialized clone.
-     */
-    function initCloneByTag(object, tag, isDeep) {
-      var Ctor = object.constructor;
-      switch (tag) {
-        case arrayBufferTag:
-          return cloneArrayBuffer(object);
-
-        case boolTag:
-        case dateTag:
-          return new Ctor(+object);
-
-        case dataViewTag:
-          return cloneDataView(object, isDeep);
-
-        case float32Tag: case float64Tag:
-        case int8Tag: case int16Tag: case int32Tag:
-        case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag:
-          return cloneTypedArray(object, isDeep);
-
-        case mapTag:
-          return new Ctor;
-
-        case numberTag:
-        case stringTag:
-          return new Ctor(object);
-
-        case regexpTag:
-          return cloneRegExp(object);
-
-        case setTag:
-          return new Ctor;
-
-        case symbolTag:
-          return cloneSymbol(object);
-      }
-    }
-
-    /**
-     * Inserts wrapper `details` in a comment at the top of the `source` body.
-     *
-     * @private
-     * @param {string} source The source to modify.
-     * @returns {Array} details The details to insert.
-     * @returns {string} Returns the modified source.
-     */
-    function insertWrapDetails(source, details) {
-      var length = details.length;
-      if (!length) {
-        return source;
-      }
-      var lastIndex = length - 1;
-      details[lastIndex] = (length > 1 ? '& ' : '') + details[lastIndex];
-      details = details.join(length > 2 ? ', ' : ' ');
-      return source.replace(reWrapComment, '{\n/* [wrapped with ' + details + '] */\n');
-    }
-
-    /**
-     * Checks if `value` is a flattenable `arguments` object or array.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is flattenable, else `false`.
-     */
-    function isFlattenable(value) {
-      return isArray(value) || isArguments(value) ||
-        !!(spreadableSymbol && value && value[spreadableSymbol]);
-    }
-
-    /**
-     * Checks if `value` is a valid array-like index.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
-     * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
-     */
-    function isIndex(value, length) {
-      var type = typeof value;
-      length = length == null ? MAX_SAFE_INTEGER : length;
-
-      return !!length &&
-        (type == 'number' ||
-          (type != 'symbol' && reIsUint.test(value))) &&
-            (value > -1 && value % 1 == 0 && value < length);
-    }
-
-    /**
-     * Checks if the given arguments are from an iteratee call.
-     *
-     * @private
-     * @param {*} value The potential iteratee value argument.
-     * @param {*} index The potential iteratee index or key argument.
-     * @param {*} object The potential iteratee object argument.
-     * @returns {boolean} Returns `true` if the arguments are from an iteratee call,
-     *  else `false`.
-     */
-    function isIterateeCall(value, index, object) {
-      if (!isObject(object)) {
-        return false;
-      }
-      var type = typeof index;
-      if (type == 'number'
-            ? (isArrayLike(object) && isIndex(index, object.length))
-            : (type == 'string' && index in object)
-          ) {
-        return eq(object[index], value);
-      }
-      return false;
-    }
-
-    /**
-     * Checks if `value` is a property name and not a property path.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @param {Object} [object] The object to query keys on.
-     * @returns {boolean} Returns `true` if `value` is a property name, else `false`.
-     */
-    function isKey(value, object) {
-      if (isArray(value)) {
-        return false;
-      }
-      var type = typeof value;
-      if (type == 'number' || type == 'symbol' || type == 'boolean' ||
-          value == null || isSymbol(value)) {
-        return true;
-      }
-      return reIsPlainProp.test(value) || !reIsDeepProp.test(value) ||
-        (object != null && value in Object(object));
-    }
-
-    /**
-     * Checks if `value` is suitable for use as unique object key.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
-     */
-    function isKeyable(value) {
-      var type = typeof value;
-      return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
-        ? (value !== '__proto__')
-        : (value === null);
-    }
-
-    /**
-     * Checks if `func` has a lazy counterpart.
-     *
-     * @private
-     * @param {Function} func The function to check.
-     * @returns {boolean} Returns `true` if `func` has a lazy counterpart,
-     *  else `false`.
-     */
-    function isLaziable(func) {
-      var funcName = getFuncName(func),
-          other = lodash[funcName];
-
-      if (typeof other != 'function' || !(funcName in LazyWrapper.prototype)) {
-        return false;
-      }
-      if (func === other) {
-        return true;
-      }
-      var data = getData(other);
-      return !!data && func === data[0];
-    }
-
-    /**
-     * Checks if `func` has its source masked.
-     *
-     * @private
-     * @param {Function} func The function to check.
-     * @returns {boolean} Returns `true` if `func` is masked, else `false`.
-     */
-    function isMasked(func) {
-      return !!maskSrcKey && (maskSrcKey in func);
-    }
-
-    /**
-     * Checks if `func` is capable of being masked.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `func` is maskable, else `false`.
-     */
-    var isMaskable = coreJsData ? isFunction : stubFalse;
-
-    /**
-     * Checks if `value` is likely a prototype object.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
-     */
-    function isPrototype(value) {
-      var Ctor = value && value.constructor,
-          proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
-
-      return value === proto;
-    }
-
-    /**
-     * Checks if `value` is suitable for strict equality comparisons, i.e. `===`.
-     *
-     * @private
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` if suitable for strict
-     *  equality comparisons, else `false`.
-     */
-    function isStrictComparable(value) {
-      return value === value && !isObject(value);
-    }
-
-    /**
-     * A specialized version of `matchesProperty` for source values suitable
-     * for strict equality comparisons, i.e. `===`.
-     *
-     * @private
-     * @param {string} key The key of the property to get.
-     * @param {*} srcValue The value to match.
-     * @returns {Function} Returns the new spec function.
-     */
-    function matchesStrictComparable(key, srcValue) {
-      return function(object) {
-        if (object == null) {
-          return false;
-        }
-        return object[key] === srcValue &&
-          (srcValue !== undefined || (key in Object(object)));
-      };
-    }
-
-    /**
-     * A specialized version of `_.memoize` which clears the memoized function's
-     * cache when it exceeds `MAX_MEMOIZE_SIZE`.
-     *
-     * @private
-     * @param {Function} func The function to have its output memoized.
-     * @returns {Function} Returns the new memoized function.
-     */
-    function memoizeCapped(func) {
-      var result = memoize(func, function(key) {
-        if (cache.size === MAX_MEMOIZE_SIZE) {
-          cache.clear();
-        }
-        return key;
-      });
-
-      var cache = result.cache;
-      return result;
-    }
-
-    /**
-     * Merges the function metadata of `source` into `data`.
-     *
-     * Merging metadata reduces the number of wrappers used to invoke a function.
-     * This is possible because methods like `_.bind`, `_.curry`, and `_.partial`
-     * may be applied regardless of execution order. Methods like `_.ary` and
-     * `_.rearg` modify function arguments, making the order in which they are
-     * executed important, preventing the merging of metadata. However, we make
-     * an exception for a safe combined case where curried functions have `_.ary`
-     * and or `_.rearg` applied.
-     *
-     * @private
-     * @param {Array} data The destination metadata.
-     * @param {Array} source The source metadata.
-     * @returns {Array} Returns `data`.
-     */
-    function mergeData(data, source) {
-      var bitmask = data[1],
-          srcBitmask = source[1],
-          newBitmask = bitmask | srcBitmask,
-          isCommon = newBitmask < (WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG | WRAP_ARY_FLAG);
-
-      var isCombo =
-        ((srcBitmask == WRAP_ARY_FLAG) && (bitmask == WRAP_CURRY_FLAG)) ||
-        ((srcBitmask == WRAP_ARY_FLAG) && (bitmask == WRAP_REARG_FLAG) && (data[7].length <= source[8])) ||
-        ((srcBitmask == (WRAP_ARY_FLAG | WRAP_REARG_FLAG)) && (source[7].length <= source[8]) && (bitmask == WRAP_CURRY_FLAG));
-
-      // Exit early if metadata can't be merged.
-      if (!(isCommon || isCombo)) {
-        return data;
-      }
-      // Use source `thisArg` if available.
-      if (srcBitmask & WRAP_BIND_FLAG) {
-        data[2] = source[2];
-        // Set when currying a bound function.
-        newBitmask |= bitmask & WRAP_BIND_FLAG ? 0 : WRAP_CURRY_BOUND_FLAG;
-      }
-      // Compose partial arguments.
-      var value = source[3];
-      if (value) {
-        var partials = data[3];
-        data[3] = partials ? composeArgs(partials, value, source[4]) : value;
-        data[4] = partials ? replaceHolders(data[3], PLACEHOLDER) : source[4];
-      }
-      // Compose partial right arguments.
-      value = source[5];
-      if (value) {
-        partials = data[5];
-        data[5] = partials ? composeArgsRight(partials, value, source[6]) : value;
-        data[6] = partials ? replaceHolders(data[5], PLACEHOLDER) : source[6];
-      }
-      // Use source `argPos` if available.
-      value = source[7];
-      if (value) {
-        data[7] = value;
-      }
-      // Use source `ary` if it's smaller.
-      if (srcBitmask & WRAP_ARY_FLAG) {
-        data[8] = data[8] == null ? source[8] : nativeMin(data[8], source[8]);
-      }
-      // Use source `arity` if one is not provided.
-      if (data[9] == null) {
-        data[9] = source[9];
-      }
-      // Use source `func` and merge bitmasks.
-      data[0] = source[0];
-      data[1] = newBitmask;
-
-      return data;
-    }
-
-    /**
-     * This function is like
-     * [`Object.keys`](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
-     * except that it includes inherited enumerable properties.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names.
-     */
-    function nativeKeysIn(object) {
-      var result = [];
-      if (object != null) {
-        for (var key in Object(object)) {
-          result.push(key);
-        }
-      }
-      return result;
-    }
-
-    /**
-     * Converts `value` to a string using `Object.prototype.toString`.
-     *
-     * @private
-     * @param {*} value The value to convert.
-     * @returns {string} Returns the converted string.
-     */
-    function objectToString(value) {
-      return nativeObjectToString.call(value);
-    }
-
-    /**
-     * A specialized version of `baseRest` which transforms the rest array.
-     *
-     * @private
-     * @param {Function} func The function to apply a rest parameter to.
-     * @param {number} [start=func.length-1] The start position of the rest parameter.
-     * @param {Function} transform The rest array transform.
-     * @returns {Function} Returns the new function.
-     */
-    function overRest(func, start, transform) {
-      start = nativeMax(start === undefined ? (func.length - 1) : start, 0);
-      return function() {
-        var args = arguments,
-            index = -1,
-            length = nativeMax(args.length - start, 0),
-            array = Array(length);
-
-        while (++index < length) {
-          array[index] = args[start + index];
-        }
-        index = -1;
-        var otherArgs = Array(start + 1);
-        while (++index < start) {
-          otherArgs[index] = args[index];
-        }
-        otherArgs[start] = transform(array);
-        return apply(func, this, otherArgs);
-      };
-    }
-
-    /**
-     * Gets the parent value at `path` of `object`.
-     *
-     * @private
-     * @param {Object} object The object to query.
-     * @param {Array} path The path to get the parent value of.
-     * @returns {*} Returns the parent value.
-     */
-    function parent(object, path) {
-      return path.length < 2 ? object : baseGet(object, baseSlice(path, 0, -1));
-    }
-
-    /**
-     * Reorder `array` according to the specified indexes where the element at
-     * the first index is assigned as the first element, the element at
-     * the second index is assigned as the second element, and so on.
-     *
-     * @private
-     * @param {Array} array The array to reorder.
-     * @param {Array} indexes The arranged array indexes.
-     * @returns {Array} Returns `array`.
-     */
-    function reorder(array, indexes) {
-      var arrLength = array.length,
-          length = nativeMin(indexes.length, arrLength),
-          oldArray = copyArray(array);
-
-      while (length--) {
-        var index = indexes[length];
-        array[length] = isIndex(index, arrLength) ? oldArray[index] : undefined;
-      }
-      return array;
-    }
-
-    /**
-     * Sets metadata for `func`.
-     *
-     * **Note:** If this function becomes hot, i.e. is invoked a lot in a short
-     * period of time, it will trip its breaker and transition to an identity
-     * function to avoid garbage collection pauses in V8. See
-     * [V8 issue 2070](https://bugs.chromium.org/p/v8/issues/detail?id=2070)
-     * for more details.
-     *
-     * @private
-     * @param {Function} func The function to associate metadata with.
-     * @param {*} data The metadata.
-     * @returns {Function} Returns `func`.
-     */
-    var setData = shortOut(baseSetData);
-
-    /**
-     * A simple wrapper around the global [`setTimeout`](https://mdn.io/setTimeout).
-     *
-     * @private
-     * @param {Function} func The function to delay.
-     * @param {number} wait The number of milliseconds to delay invocation.
-     * @returns {number|Object} Returns the timer id or timeout object.
-     */
-    var setTimeout = ctxSetTimeout || function(func, wait) {
-      return root.setTimeout(func, wait);
-    };
-
-    /**
-     * Sets the `toString` method of `func` to return `string`.
-     *
-     * @private
-     * @param {Function} func The function to modify.
-     * @param {Function} string The `toString` result.
-     * @returns {Function} Returns `func`.
-     */
-    var setToString = shortOut(baseSetToString);
-
-    /**
-     * Sets the `toString` method of `wrapper` to mimic the source of `reference`
-     * with wrapper details in a comment at the top of the source body.
-     *
-     * @private
-     * @param {Function} wrapper The function to modify.
-     * @param {Function} reference The reference function.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @returns {Function} Returns `wrapper`.
-     */
-    function setWrapToString(wrapper, reference, bitmask) {
-      var source = (reference + '');
-      return setToString(wrapper, insertWrapDetails(source, updateWrapDetails(getWrapDetails(source), bitmask)));
-    }
-
-    /**
-     * Creates a function that'll short out and invoke `identity` instead
-     * of `func` when it's called `HOT_COUNT` or more times in `HOT_SPAN`
-     * milliseconds.
-     *
-     * @private
-     * @param {Function} func The function to restrict.
-     * @returns {Function} Returns the new shortable function.
-     */
-    function shortOut(func) {
-      var count = 0,
-          lastCalled = 0;
-
-      return function() {
-        var stamp = nativeNow(),
-            remaining = HOT_SPAN - (stamp - lastCalled);
-
-        lastCalled = stamp;
-        if (remaining > 0) {
-          if (++count >= HOT_COUNT) {
-            return arguments[0];
-          }
-        } else {
-          count = 0;
-        }
-        return func.apply(undefined, arguments);
-      };
-    }
-
-    /**
-     * A specialized version of `_.shuffle` which mutates and sets the size of `array`.
-     *
-     * @private
-     * @param {Array} array The array to shuffle.
-     * @param {number} [size=array.length] The size of `array`.
-     * @returns {Array} Returns `array`.
-     */
-    function shuffleSelf(array, size) {
-      var index = -1,
-          length = array.length,
-          lastIndex = length - 1;
-
-      size = size === undefined ? length : size;
-      while (++index < size) {
-        var rand = baseRandom(index, lastIndex),
-            value = array[rand];
-
-        array[rand] = array[index];
-        array[index] = value;
-      }
-      array.length = size;
-      return array;
-    }
-
-    /**
-     * Converts `string` to a property path array.
-     *
-     * @private
-     * @param {string} string The string to convert.
-     * @returns {Array} Returns the property path array.
-     */
-    var stringToPath = memoizeCapped(function(string) {
-      var result = [];
-      if (string.charCodeAt(0) === 46 /* . */) {
-        result.push('');
-      }
-      string.replace(rePropName, function(match, number, quote, subString) {
-        result.push(quote ? subString.replace(reEscapeChar, '$1') : (number || match));
-      });
-      return result;
-    });
-
-    /**
-     * Converts `value` to a string key if it's not a string or symbol.
-     *
-     * @private
-     * @param {*} value The value to inspect.
-     * @returns {string|symbol} Returns the key.
-     */
-    function toKey(value) {
-      if (typeof value == 'string' || isSymbol(value)) {
-        return value;
-      }
-      var result = (value + '');
-      return (result == '0' && (1 / value) == -INFINITY) ? '-0' : result;
-    }
-
-    /**
-     * Converts `func` to its source code.
-     *
-     * @private
-     * @param {Function} func The function to convert.
-     * @returns {string} Returns the source code.
-     */
-    function toSource(func) {
-      if (func != null) {
-        try {
-          return funcToString.call(func);
-        } catch (e) {}
-        try {
-          return (func + '');
-        } catch (e) {}
-      }
-      return '';
-    }
-
-    /**
-     * Updates wrapper `details` based on `bitmask` flags.
-     *
-     * @private
-     * @returns {Array} details The details to modify.
-     * @param {number} bitmask The bitmask flags. See `createWrap` for more details.
-     * @returns {Array} Returns `details`.
-     */
-    function updateWrapDetails(details, bitmask) {
-      arrayEach(wrapFlags, function(pair) {
-        var value = '_.' + pair[0];
-        if ((bitmask & pair[1]) && !arrayIncludes(details, value)) {
-          details.push(value);
-        }
-      });
-      return details.sort();
-    }
-
-    /**
-     * Creates a clone of `wrapper`.
-     *
-     * @private
-     * @param {Object} wrapper The wrapper to clone.
-     * @returns {Object} Returns the cloned wrapper.
-     */
-    function wrapperClone(wrapper) {
-      if (wrapper instanceof LazyWrapper) {
-        return wrapper.clone();
-      }
-      var result = new LodashWrapper(wrapper.__wrapped__, wrapper.__chain__);
-      result.__actions__ = copyArray(wrapper.__actions__);
-      result.__index__  = wrapper.__index__;
-      result.__values__ = wrapper.__values__;
-      return result;
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates an array of elements split into groups the length of `size`.
-     * If `array` can't be split evenly, the final chunk will be the remaining
-     * elements.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to process.
-     * @param {number} [size=1] The length of each chunk
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the new array of chunks.
-     * @example
-     *
-     * _.chunk(['a', 'b', 'c', 'd'], 2);
-     * // => [['a', 'b'], ['c', 'd']]
-     *
-     * _.chunk(['a', 'b', 'c', 'd'], 3);
-     * // => [['a', 'b', 'c'], ['d']]
-     */
-    function chunk(array, size, guard) {
-      if ((guard ? isIterateeCall(array, size, guard) : size === undefined)) {
-        size = 1;
-      } else {
-        size = nativeMax(toInteger(size), 0);
-      }
-      var length = array == null ? 0 : array.length;
-      if (!length || size < 1) {
-        return [];
-      }
-      var index = 0,
-          resIndex = 0,
-          result = Array(nativeCeil(length / size));
-
-      while (index < length) {
-        result[resIndex++] = baseSlice(array, index, (index += size));
-      }
-      return result;
-    }
-
-    /**
-     * Creates an array with all falsey values removed. The values `false`, `null`,
-     * `0`, `""`, `undefined`, and `NaN` are falsey.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to compact.
-     * @returns {Array} Returns the new array of filtered values.
-     * @example
-     *
-     * _.compact([0, 1, false, 2, '', 3]);
-     * // => [1, 2, 3]
-     */
-    function compact(array) {
-      var index = -1,
-          length = array == null ? 0 : array.length,
-          resIndex = 0,
-          result = [];
-
-      while (++index < length) {
-        var value = array[index];
-        if (value) {
-          result[resIndex++] = value;
-        }
-      }
-      return result;
-    }
-
-    /**
-     * Creates a new array concatenating `array` with any additional arrays
-     * and/or values.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to concatenate.
-     * @param {...*} [values] The values to concatenate.
-     * @returns {Array} Returns the new concatenated array.
-     * @example
-     *
-     * var array = [1];
-     * var other = _.concat(array, 2, [3], [[4]]);
-     *
-     * console.log(other);
-     * // => [1, 2, 3, [4]]
-     *
-     * console.log(array);
-     * // => [1]
-     */
-    function concat() {
-      var length = arguments.length;
-      if (!length) {
-        return [];
-      }
-      var args = Array(length - 1),
-          array = arguments[0],
-          index = length;
-
-      while (index--) {
-        args[index - 1] = arguments[index];
-      }
-      return arrayPush(isArray(array) ? copyArray(array) : [array], baseFlatten(args, 1));
-    }
-
-    /**
-     * Creates an array of `array` values not included in the other given arrays
-     * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons. The order and references of result values are
-     * determined by the first array.
-     *
-     * **Note:** Unlike `_.pullAll`, this method returns a new array.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {...Array} [values] The values to exclude.
-     * @returns {Array} Returns the new array of filtered values.
-     * @see _.without, _.xor
-     * @example
-     *
-     * _.difference([2, 1], [2, 3]);
-     * // => [1]
-     */
-    var difference = baseRest(function(array, values) {
-      return isArrayLikeObject(array)
-        ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true))
-        : [];
-    });
-
-    /**
-     * This method is like `_.difference` except that it accepts `iteratee` which
-     * is invoked for each element of `array` and `values` to generate the criterion
-     * by which they're compared. The order and references of result values are
-     * determined by the first array. The iteratee is invoked with one argument:
-     * (value).
-     *
-     * **Note:** Unlike `_.pullAllBy`, this method returns a new array.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {...Array} [values] The values to exclude.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Array} Returns the new array of filtered values.
-     * @example
-     *
-     * _.differenceBy([2.1, 1.2], [2.3, 3.4], Math.floor);
-     * // => [1.2]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.differenceBy([{ 'x': 2 }, { 'x': 1 }], [{ 'x': 1 }], 'x');
-     * // => [{ 'x': 2 }]
-     */
-    var differenceBy = baseRest(function(array, values) {
-      var iteratee = last(values);
-      if (isArrayLikeObject(iteratee)) {
-        iteratee = undefined;
-      }
-      return isArrayLikeObject(array)
-        ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), getIteratee(iteratee, 2))
-        : [];
-    });
-
-    /**
-     * This method is like `_.difference` except that it accepts `comparator`
-     * which is invoked to compare elements of `array` to `values`. The order and
-     * references of result values are determined by the first array. The comparator
-     * is invoked with two arguments: (arrVal, othVal).
-     *
-     * **Note:** Unlike `_.pullAllWith`, this method returns a new array.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {...Array} [values] The values to exclude.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of filtered values.
-     * @example
-     *
-     * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
-     *
-     * _.differenceWith(objects, [{ 'x': 1, 'y': 2 }], _.isEqual);
-     * // => [{ 'x': 2, 'y': 1 }]
-     */
-    var differenceWith = baseRest(function(array, values) {
-      var comparator = last(values);
-      if (isArrayLikeObject(comparator)) {
-        comparator = undefined;
-      }
-      return isArrayLikeObject(array)
-        ? baseDifference(array, baseFlatten(values, 1, isArrayLikeObject, true), undefined, comparator)
-        : [];
-    });
-
-    /**
-     * Creates a slice of `array` with `n` elements dropped from the beginning.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.5.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {number} [n=1] The number of elements to drop.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * _.drop([1, 2, 3]);
-     * // => [2, 3]
-     *
-     * _.drop([1, 2, 3], 2);
-     * // => [3]
-     *
-     * _.drop([1, 2, 3], 5);
-     * // => []
-     *
-     * _.drop([1, 2, 3], 0);
-     * // => [1, 2, 3]
-     */
-    function drop(array, n, guard) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return [];
-      }
-      n = (guard || n === undefined) ? 1 : toInteger(n);
-      return baseSlice(array, n < 0 ? 0 : n, length);
-    }
-
-    /**
-     * Creates a slice of `array` with `n` elements dropped from the end.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {number} [n=1] The number of elements to drop.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * _.dropRight([1, 2, 3]);
-     * // => [1, 2]
-     *
-     * _.dropRight([1, 2, 3], 2);
-     * // => [1]
-     *
-     * _.dropRight([1, 2, 3], 5);
-     * // => []
-     *
-     * _.dropRight([1, 2, 3], 0);
-     * // => [1, 2, 3]
-     */
-    function dropRight(array, n, guard) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return [];
-      }
-      n = (guard || n === undefined) ? 1 : toInteger(n);
-      n = length - n;
-      return baseSlice(array, 0, n < 0 ? 0 : n);
-    }
-
-    /**
-     * Creates a slice of `array` excluding elements dropped from the end.
-     * Elements are dropped until `predicate` returns falsey. The predicate is
-     * invoked with three arguments: (value, index, array).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'active': true },
-     *   { 'user': 'fred',    'active': false },
-     *   { 'user': 'pebbles', 'active': false }
-     * ];
-     *
-     * _.dropRightWhile(users, function(o) { return !o.active; });
-     * // => objects for ['barney']
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.dropRightWhile(users, { 'user': 'pebbles', 'active': false });
-     * // => objects for ['barney', 'fred']
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.dropRightWhile(users, ['active', false]);
-     * // => objects for ['barney']
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.dropRightWhile(users, 'active');
-     * // => objects for ['barney', 'fred', 'pebbles']
-     */
-    function dropRightWhile(array, predicate) {
-      return (array && array.length)
-        ? baseWhile(array, getIteratee(predicate, 3), true, true)
-        : [];
-    }
-
-    /**
-     * Creates a slice of `array` excluding elements dropped from the beginning.
-     * Elements are dropped until `predicate` returns falsey. The predicate is
-     * invoked with three arguments: (value, index, array).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'active': false },
-     *   { 'user': 'fred',    'active': false },
-     *   { 'user': 'pebbles', 'active': true }
-     * ];
-     *
-     * _.dropWhile(users, function(o) { return !o.active; });
-     * // => objects for ['pebbles']
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.dropWhile(users, { 'user': 'barney', 'active': false });
-     * // => objects for ['fred', 'pebbles']
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.dropWhile(users, ['active', false]);
-     * // => objects for ['pebbles']
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.dropWhile(users, 'active');
-     * // => objects for ['barney', 'fred', 'pebbles']
-     */
-    function dropWhile(array, predicate) {
-      return (array && array.length)
-        ? baseWhile(array, getIteratee(predicate, 3), true)
-        : [];
-    }
-
-    /**
-     * Fills elements of `array` with `value` from `start` up to, but not
-     * including, `end`.
-     *
-     * **Note:** This method mutates `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.2.0
-     * @category Array
-     * @param {Array} array The array to fill.
-     * @param {*} value The value to fill `array` with.
-     * @param {number} [start=0] The start position.
-     * @param {number} [end=array.length] The end position.
-     * @returns {Array} Returns `array`.
-     * @example
-     *
-     * var array = [1, 2, 3];
-     *
-     * _.fill(array, 'a');
-     * console.log(array);
-     * // => ['a', 'a', 'a']
-     *
-     * _.fill(Array(3), 2);
-     * // => [2, 2, 2]
-     *
-     * _.fill([4, 6, 8, 10], '*', 1, 3);
-     * // => [4, '*', '*', 10]
-     */
-    function fill(array, value, start, end) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return [];
-      }
-      if (start && typeof start != 'number' && isIterateeCall(array, value, start)) {
-        start = 0;
-        end = length;
-      }
-      return baseFill(array, value, start, end);
-    }
-
-    /**
-     * This method is like `_.find` except that it returns the index of the first
-     * element `predicate` returns truthy for instead of the element itself.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.1.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @param {number} [fromIndex=0] The index to search from.
-     * @returns {number} Returns the index of the found element, else `-1`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'active': false },
-     *   { 'user': 'fred',    'active': false },
-     *   { 'user': 'pebbles', 'active': true }
-     * ];
-     *
-     * _.findIndex(users, function(o) { return o.user == 'barney'; });
-     * // => 0
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.findIndex(users, { 'user': 'fred', 'active': false });
-     * // => 1
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.findIndex(users, ['active', false]);
-     * // => 0
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.findIndex(users, 'active');
-     * // => 2
-     */
-    function findIndex(array, predicate, fromIndex) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return -1;
-      }
-      var index = fromIndex == null ? 0 : toInteger(fromIndex);
-      if (index < 0) {
-        index = nativeMax(length + index, 0);
-      }
-      return baseFindIndex(array, getIteratee(predicate, 3), index);
-    }
-
-    /**
-     * This method is like `_.findIndex` except that it iterates over elements
-     * of `collection` from right to left.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @param {number} [fromIndex=array.length-1] The index to search from.
-     * @returns {number} Returns the index of the found element, else `-1`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'active': true },
-     *   { 'user': 'fred',    'active': false },
-     *   { 'user': 'pebbles', 'active': false }
-     * ];
-     *
-     * _.findLastIndex(users, function(o) { return o.user == 'pebbles'; });
-     * // => 2
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.findLastIndex(users, { 'user': 'barney', 'active': true });
-     * // => 0
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.findLastIndex(users, ['active', false]);
-     * // => 2
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.findLastIndex(users, 'active');
-     * // => 0
-     */
-    function findLastIndex(array, predicate, fromIndex) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return -1;
-      }
-      var index = length - 1;
-      if (fromIndex !== undefined) {
-        index = toInteger(fromIndex);
-        index = fromIndex < 0
-          ? nativeMax(length + index, 0)
-          : nativeMin(index, length - 1);
-      }
-      return baseFindIndex(array, getIteratee(predicate, 3), index, true);
-    }
-
-    /**
-     * Flattens `array` a single level deep.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to flatten.
-     * @returns {Array} Returns the new flattened array.
-     * @example
-     *
-     * _.flatten([1, [2, [3, [4]], 5]]);
-     * // => [1, 2, [3, [4]], 5]
-     */
-    function flatten(array) {
-      var length = array == null ? 0 : array.length;
-      return length ? baseFlatten(array, 1) : [];
-    }
-
-    /**
-     * Recursively flattens `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to flatten.
-     * @returns {Array} Returns the new flattened array.
-     * @example
-     *
-     * _.flattenDeep([1, [2, [3, [4]], 5]]);
-     * // => [1, 2, 3, 4, 5]
-     */
-    function flattenDeep(array) {
-      var length = array == null ? 0 : array.length;
-      return length ? baseFlatten(array, INFINITY) : [];
-    }
-
-    /**
-     * Recursively flatten `array` up to `depth` times.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.4.0
-     * @category Array
-     * @param {Array} array The array to flatten.
-     * @param {number} [depth=1] The maximum recursion depth.
-     * @returns {Array} Returns the new flattened array.
-     * @example
-     *
-     * var array = [1, [2, [3, [4]], 5]];
-     *
-     * _.flattenDepth(array, 1);
-     * // => [1, 2, [3, [4]], 5]
-     *
-     * _.flattenDepth(array, 2);
-     * // => [1, 2, 3, [4], 5]
-     */
-    function flattenDepth(array, depth) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return [];
-      }
-      depth = depth === undefined ? 1 : toInteger(depth);
-      return baseFlatten(array, depth);
-    }
-
-    /**
-     * The inverse of `_.toPairs`; this method returns an object composed
-     * from key-value `pairs`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} pairs The key-value pairs.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * _.fromPairs([['a', 1], ['b', 2]]);
-     * // => { 'a': 1, 'b': 2 }
-     */
-    function fromPairs(pairs) {
-      var index = -1,
-          length = pairs == null ? 0 : pairs.length,
-          result = {};
-
-      while (++index < length) {
-        var pair = pairs[index];
-        result[pair[0]] = pair[1];
-      }
-      return result;
-    }
-
-    /**
-     * Gets the first element of `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @alias first
-     * @category Array
-     * @param {Array} array The array to query.
-     * @returns {*} Returns the first element of `array`.
-     * @example
-     *
-     * _.head([1, 2, 3]);
-     * // => 1
-     *
-     * _.head([]);
-     * // => undefined
-     */
-    function head(array) {
-      return (array && array.length) ? array[0] : undefined;
-    }
-
-    /**
-     * Gets the index at which the first occurrence of `value` is found in `array`
-     * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons. If `fromIndex` is negative, it's used as the
-     * offset from the end of `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {*} value The value to search for.
-     * @param {number} [fromIndex=0] The index to search from.
-     * @returns {number} Returns the index of the matched value, else `-1`.
-     * @example
-     *
-     * _.indexOf([1, 2, 1, 2], 2);
-     * // => 1
-     *
-     * // Search from the `fromIndex`.
-     * _.indexOf([1, 2, 1, 2], 2, 2);
-     * // => 3
-     */
-    function indexOf(array, value, fromIndex) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return -1;
-      }
-      var index = fromIndex == null ? 0 : toInteger(fromIndex);
-      if (index < 0) {
-        index = nativeMax(length + index, 0);
-      }
-      return baseIndexOf(array, value, index);
-    }
-
-    /**
-     * Gets all but the last element of `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * _.initial([1, 2, 3]);
-     * // => [1, 2]
-     */
-    function initial(array) {
-      var length = array == null ? 0 : array.length;
-      return length ? baseSlice(array, 0, -1) : [];
-    }
-
-    /**
-     * Creates an array of unique values that are included in all given arrays
-     * using [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons. The order and references of result values are
-     * determined by the first array.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @returns {Array} Returns the new array of intersecting values.
-     * @example
-     *
-     * _.intersection([2, 1], [2, 3]);
-     * // => [2]
-     */
-    var intersection = baseRest(function(arrays) {
-      var mapped = arrayMap(arrays, castArrayLikeObject);
-      return (mapped.length && mapped[0] === arrays[0])
-        ? baseIntersection(mapped)
-        : [];
-    });
-
-    /**
-     * This method is like `_.intersection` except that it accepts `iteratee`
-     * which is invoked for each element of each `arrays` to generate the criterion
-     * by which they're compared. The order and references of result values are
-     * determined by the first array. The iteratee is invoked with one argument:
-     * (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Array} Returns the new array of intersecting values.
-     * @example
-     *
-     * _.intersectionBy([2.1, 1.2], [2.3, 3.4], Math.floor);
-     * // => [2.1]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.intersectionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
-     * // => [{ 'x': 1 }]
-     */
-    var intersectionBy = baseRest(function(arrays) {
-      var iteratee = last(arrays),
-          mapped = arrayMap(arrays, castArrayLikeObject);
-
-      if (iteratee === last(mapped)) {
-        iteratee = undefined;
-      } else {
-        mapped.pop();
-      }
-      return (mapped.length && mapped[0] === arrays[0])
-        ? baseIntersection(mapped, getIteratee(iteratee, 2))
-        : [];
-    });
-
-    /**
-     * This method is like `_.intersection` except that it accepts `comparator`
-     * which is invoked to compare elements of `arrays`. The order and references
-     * of result values are determined by the first array. The comparator is
-     * invoked with two arguments: (arrVal, othVal).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of intersecting values.
-     * @example
-     *
-     * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
-     * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
-     *
-     * _.intersectionWith(objects, others, _.isEqual);
-     * // => [{ 'x': 1, 'y': 2 }]
-     */
-    var intersectionWith = baseRest(function(arrays) {
-      var comparator = last(arrays),
-          mapped = arrayMap(arrays, castArrayLikeObject);
-
-      comparator = typeof comparator == 'function' ? comparator : undefined;
-      if (comparator) {
-        mapped.pop();
-      }
-      return (mapped.length && mapped[0] === arrays[0])
-        ? baseIntersection(mapped, undefined, comparator)
-        : [];
-    });
-
-    /**
-     * Converts all elements in `array` into a string separated by `separator`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to convert.
-     * @param {string} [separator=','] The element separator.
-     * @returns {string} Returns the joined string.
-     * @example
-     *
-     * _.join(['a', 'b', 'c'], '~');
-     * // => 'a~b~c'
-     */
-    function join(array, separator) {
-      return array == null ? '' : nativeJoin.call(array, separator);
-    }
-
-    /**
-     * Gets the last element of `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @returns {*} Returns the last element of `array`.
-     * @example
-     *
-     * _.last([1, 2, 3]);
-     * // => 3
-     */
-    function last(array) {
-      var length = array == null ? 0 : array.length;
-      return length ? array[length - 1] : undefined;
-    }
-
-    /**
-     * This method is like `_.indexOf` except that it iterates over elements of
-     * `array` from right to left.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {*} value The value to search for.
-     * @param {number} [fromIndex=array.length-1] The index to search from.
-     * @returns {number} Returns the index of the matched value, else `-1`.
-     * @example
-     *
-     * _.lastIndexOf([1, 2, 1, 2], 2);
-     * // => 3
-     *
-     * // Search from the `fromIndex`.
-     * _.lastIndexOf([1, 2, 1, 2], 2, 2);
-     * // => 1
-     */
-    function lastIndexOf(array, value, fromIndex) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return -1;
-      }
-      var index = length;
-      if (fromIndex !== undefined) {
-        index = toInteger(fromIndex);
-        index = index < 0 ? nativeMax(length + index, 0) : nativeMin(index, length - 1);
-      }
-      return value === value
-        ? strictLastIndexOf(array, value, index)
-        : baseFindIndex(array, baseIsNaN, index, true);
-    }
-
-    /**
-     * Gets the element at index `n` of `array`. If `n` is negative, the nth
-     * element from the end is returned.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.11.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {number} [n=0] The index of the element to return.
-     * @returns {*} Returns the nth element of `array`.
-     * @example
-     *
-     * var array = ['a', 'b', 'c', 'd'];
-     *
-     * _.nth(array, 1);
-     * // => 'b'
-     *
-     * _.nth(array, -2);
-     * // => 'c';
-     */
-    function nth(array, n) {
-      return (array && array.length) ? baseNth(array, toInteger(n)) : undefined;
-    }
-
-    /**
-     * Removes all given values from `array` using
-     * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons.
-     *
-     * **Note:** Unlike `_.without`, this method mutates `array`. Use `_.remove`
-     * to remove elements from an array by predicate.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @param {...*} [values] The values to remove.
-     * @returns {Array} Returns `array`.
-     * @example
-     *
-     * var array = ['a', 'b', 'c', 'a', 'b', 'c'];
-     *
-     * _.pull(array, 'a', 'c');
-     * console.log(array);
-     * // => ['b', 'b']
-     */
-    var pull = baseRest(pullAll);
-
-    /**
-     * This method is like `_.pull` except that it accepts an array of values to remove.
-     *
-     * **Note:** Unlike `_.difference`, this method mutates `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @param {Array} values The values to remove.
-     * @returns {Array} Returns `array`.
-     * @example
-     *
-     * var array = ['a', 'b', 'c', 'a', 'b', 'c'];
-     *
-     * _.pullAll(array, ['a', 'c']);
-     * console.log(array);
-     * // => ['b', 'b']
-     */
-    function pullAll(array, values) {
-      return (array && array.length && values && values.length)
-        ? basePullAll(array, values)
-        : array;
-    }
-
-    /**
-     * This method is like `_.pullAll` except that it accepts `iteratee` which is
-     * invoked for each element of `array` and `values` to generate the criterion
-     * by which they're compared. The iteratee is invoked with one argument: (value).
-     *
-     * **Note:** Unlike `_.differenceBy`, this method mutates `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @param {Array} values The values to remove.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Array} Returns `array`.
-     * @example
-     *
-     * var array = [{ 'x': 1 }, { 'x': 2 }, { 'x': 3 }, { 'x': 1 }];
-     *
-     * _.pullAllBy(array, [{ 'x': 1 }, { 'x': 3 }], 'x');
-     * console.log(array);
-     * // => [{ 'x': 2 }]
-     */
-    function pullAllBy(array, values, iteratee) {
-      return (array && array.length && values && values.length)
-        ? basePullAll(array, values, getIteratee(iteratee, 2))
-        : array;
-    }
-
-    /**
-     * This method is like `_.pullAll` except that it accepts `comparator` which
-     * is invoked to compare elements of `array` to `values`. The comparator is
-     * invoked with two arguments: (arrVal, othVal).
-     *
-     * **Note:** Unlike `_.differenceWith`, this method mutates `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.6.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @param {Array} values The values to remove.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns `array`.
-     * @example
-     *
-     * var array = [{ 'x': 1, 'y': 2 }, { 'x': 3, 'y': 4 }, { 'x': 5, 'y': 6 }];
-     *
-     * _.pullAllWith(array, [{ 'x': 3, 'y': 4 }], _.isEqual);
-     * console.log(array);
-     * // => [{ 'x': 1, 'y': 2 }, { 'x': 5, 'y': 6 }]
-     */
-    function pullAllWith(array, values, comparator) {
-      return (array && array.length && values && values.length)
-        ? basePullAll(array, values, undefined, comparator)
-        : array;
-    }
-
-    /**
-     * Removes elements from `array` corresponding to `indexes` and returns an
-     * array of removed elements.
-     *
-     * **Note:** Unlike `_.at`, this method mutates `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @param {...(number|number[])} [indexes] The indexes of elements to remove.
-     * @returns {Array} Returns the new array of removed elements.
-     * @example
-     *
-     * var array = ['a', 'b', 'c', 'd'];
-     * var pulled = _.pullAt(array, [1, 3]);
-     *
-     * console.log(array);
-     * // => ['a', 'c']
-     *
-     * console.log(pulled);
-     * // => ['b', 'd']
-     */
-    var pullAt = flatRest(function(array, indexes) {
-      var length = array == null ? 0 : array.length,
-          result = baseAt(array, indexes);
-
-      basePullAt(array, arrayMap(indexes, function(index) {
-        return isIndex(index, length) ? +index : index;
-      }).sort(compareAscending));
-
-      return result;
-    });
-
-    /**
-     * Removes all elements from `array` that `predicate` returns truthy for
-     * and returns an array of the removed elements. The predicate is invoked
-     * with three arguments: (value, index, array).
-     *
-     * **Note:** Unlike `_.filter`, this method mutates `array`. Use `_.pull`
-     * to pull elements from an array by value.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the new array of removed elements.
-     * @example
-     *
-     * var array = [1, 2, 3, 4];
-     * var evens = _.remove(array, function(n) {
-     *   return n % 2 == 0;
-     * });
-     *
-     * console.log(array);
-     * // => [1, 3]
-     *
-     * console.log(evens);
-     * // => [2, 4]
-     */
-    function remove(array, predicate) {
-      var result = [];
-      if (!(array && array.length)) {
-        return result;
-      }
-      var index = -1,
-          indexes = [],
-          length = array.length;
-
-      predicate = getIteratee(predicate, 3);
-      while (++index < length) {
-        var value = array[index];
-        if (predicate(value, index, array)) {
-          result.push(value);
-          indexes.push(index);
-        }
-      }
-      basePullAt(array, indexes);
-      return result;
-    }
-
-    /**
-     * Reverses `array` so that the first element becomes the last, the second
-     * element becomes the second to last, and so on.
-     *
-     * **Note:** This method mutates `array` and is based on
-     * [`Array#reverse`](https://mdn.io/Array/reverse).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to modify.
-     * @returns {Array} Returns `array`.
-     * @example
-     *
-     * var array = [1, 2, 3];
-     *
-     * _.reverse(array);
-     * // => [3, 2, 1]
-     *
-     * console.log(array);
-     * // => [3, 2, 1]
-     */
-    function reverse(array) {
-      return array == null ? array : nativeReverse.call(array);
-    }
-
-    /**
-     * Creates a slice of `array` from `start` up to, but not including, `end`.
-     *
-     * **Note:** This method is used instead of
-     * [`Array#slice`](https://mdn.io/Array/slice) to ensure dense arrays are
-     * returned.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to slice.
-     * @param {number} [start=0] The start position.
-     * @param {number} [end=array.length] The end position.
-     * @returns {Array} Returns the slice of `array`.
-     */
-    function slice(array, start, end) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return [];
-      }
-      if (end && typeof end != 'number' && isIterateeCall(array, start, end)) {
-        start = 0;
-        end = length;
-      }
-      else {
-        start = start == null ? 0 : toInteger(start);
-        end = end === undefined ? length : toInteger(end);
-      }
-      return baseSlice(array, start, end);
-    }
-
-    /**
-     * Uses a binary search to determine the lowest index at which `value`
-     * should be inserted into `array` in order to maintain its sort order.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The sorted array to inspect.
-     * @param {*} value The value to evaluate.
-     * @returns {number} Returns the index at which `value` should be inserted
-     *  into `array`.
-     * @example
-     *
-     * _.sortedIndex([30, 50], 40);
-     * // => 1
-     */
-    function sortedIndex(array, value) {
-      return baseSortedIndex(array, value);
-    }
-
-    /**
-     * This method is like `_.sortedIndex` except that it accepts `iteratee`
-     * which is invoked for `value` and each element of `array` to compute their
-     * sort ranking. The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The sorted array to inspect.
-     * @param {*} value The value to evaluate.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {number} Returns the index at which `value` should be inserted
-     *  into `array`.
-     * @example
-     *
-     * var objects = [{ 'x': 4 }, { 'x': 5 }];
-     *
-     * _.sortedIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });
-     * // => 0
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.sortedIndexBy(objects, { 'x': 4 }, 'x');
-     * // => 0
-     */
-    function sortedIndexBy(array, value, iteratee) {
-      return baseSortedIndexBy(array, value, getIteratee(iteratee, 2));
-    }
-
-    /**
-     * This method is like `_.indexOf` except that it performs a binary
-     * search on a sorted `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {*} value The value to search for.
-     * @returns {number} Returns the index of the matched value, else `-1`.
-     * @example
-     *
-     * _.sortedIndexOf([4, 5, 5, 5, 6], 5);
-     * // => 1
-     */
-    function sortedIndexOf(array, value) {
-      var length = array == null ? 0 : array.length;
-      if (length) {
-        var index = baseSortedIndex(array, value);
-        if (index < length && eq(array[index], value)) {
-          return index;
-        }
-      }
-      return -1;
-    }
-
-    /**
-     * This method is like `_.sortedIndex` except that it returns the highest
-     * index at which `value` should be inserted into `array` in order to
-     * maintain its sort order.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The sorted array to inspect.
-     * @param {*} value The value to evaluate.
-     * @returns {number} Returns the index at which `value` should be inserted
-     *  into `array`.
-     * @example
-     *
-     * _.sortedLastIndex([4, 5, 5, 5, 6], 5);
-     * // => 4
-     */
-    function sortedLastIndex(array, value) {
-      return baseSortedIndex(array, value, true);
-    }
-
-    /**
-     * This method is like `_.sortedLastIndex` except that it accepts `iteratee`
-     * which is invoked for `value` and each element of `array` to compute their
-     * sort ranking. The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The sorted array to inspect.
-     * @param {*} value The value to evaluate.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {number} Returns the index at which `value` should be inserted
-     *  into `array`.
-     * @example
-     *
-     * var objects = [{ 'x': 4 }, { 'x': 5 }];
-     *
-     * _.sortedLastIndexBy(objects, { 'x': 4 }, function(o) { return o.x; });
-     * // => 1
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.sortedLastIndexBy(objects, { 'x': 4 }, 'x');
-     * // => 1
-     */
-    function sortedLastIndexBy(array, value, iteratee) {
-      return baseSortedIndexBy(array, value, getIteratee(iteratee, 2), true);
-    }
-
-    /**
-     * This method is like `_.lastIndexOf` except that it performs a binary
-     * search on a sorted `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {*} value The value to search for.
-     * @returns {number} Returns the index of the matched value, else `-1`.
-     * @example
-     *
-     * _.sortedLastIndexOf([4, 5, 5, 5, 6], 5);
-     * // => 3
-     */
-    function sortedLastIndexOf(array, value) {
-      var length = array == null ? 0 : array.length;
-      if (length) {
-        var index = baseSortedIndex(array, value, true) - 1;
-        if (eq(array[index], value)) {
-          return index;
-        }
-      }
-      return -1;
-    }
-
-    /**
-     * This method is like `_.uniq` except that it's designed and optimized
-     * for sorted arrays.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @returns {Array} Returns the new duplicate free array.
-     * @example
-     *
-     * _.sortedUniq([1, 1, 2]);
-     * // => [1, 2]
-     */
-    function sortedUniq(array) {
-      return (array && array.length)
-        ? baseSortedUniq(array)
-        : [];
-    }
-
-    /**
-     * This method is like `_.uniqBy` except that it's designed and optimized
-     * for sorted arrays.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {Function} [iteratee] The iteratee invoked per element.
-     * @returns {Array} Returns the new duplicate free array.
-     * @example
-     *
-     * _.sortedUniqBy([1.1, 1.2, 2.3, 2.4], Math.floor);
-     * // => [1.1, 2.3]
-     */
-    function sortedUniqBy(array, iteratee) {
-      return (array && array.length)
-        ? baseSortedUniq(array, getIteratee(iteratee, 2))
-        : [];
-    }
-
-    /**
-     * Gets all but the first element of `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * _.tail([1, 2, 3]);
-     * // => [2, 3]
-     */
-    function tail(array) {
-      var length = array == null ? 0 : array.length;
-      return length ? baseSlice(array, 1, length) : [];
-    }
-
-    /**
-     * Creates a slice of `array` with `n` elements taken from the beginning.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {number} [n=1] The number of elements to take.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * _.take([1, 2, 3]);
-     * // => [1]
-     *
-     * _.take([1, 2, 3], 2);
-     * // => [1, 2]
-     *
-     * _.take([1, 2, 3], 5);
-     * // => [1, 2, 3]
-     *
-     * _.take([1, 2, 3], 0);
-     * // => []
-     */
-    function take(array, n, guard) {
-      if (!(array && array.length)) {
-        return [];
-      }
-      n = (guard || n === undefined) ? 1 : toInteger(n);
-      return baseSlice(array, 0, n < 0 ? 0 : n);
-    }
-
-    /**
-     * Creates a slice of `array` with `n` elements taken from the end.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {number} [n=1] The number of elements to take.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * _.takeRight([1, 2, 3]);
-     * // => [3]
-     *
-     * _.takeRight([1, 2, 3], 2);
-     * // => [2, 3]
-     *
-     * _.takeRight([1, 2, 3], 5);
-     * // => [1, 2, 3]
-     *
-     * _.takeRight([1, 2, 3], 0);
-     * // => []
-     */
-    function takeRight(array, n, guard) {
-      var length = array == null ? 0 : array.length;
-      if (!length) {
-        return [];
-      }
-      n = (guard || n === undefined) ? 1 : toInteger(n);
-      n = length - n;
-      return baseSlice(array, n < 0 ? 0 : n, length);
-    }
-
-    /**
-     * Creates a slice of `array` with elements taken from the end. Elements are
-     * taken until `predicate` returns falsey. The predicate is invoked with
-     * three arguments: (value, index, array).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'active': true },
-     *   { 'user': 'fred',    'active': false },
-     *   { 'user': 'pebbles', 'active': false }
-     * ];
-     *
-     * _.takeRightWhile(users, function(o) { return !o.active; });
-     * // => objects for ['fred', 'pebbles']
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.takeRightWhile(users, { 'user': 'pebbles', 'active': false });
-     * // => objects for ['pebbles']
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.takeRightWhile(users, ['active', false]);
-     * // => objects for ['fred', 'pebbles']
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.takeRightWhile(users, 'active');
-     * // => []
-     */
-    function takeRightWhile(array, predicate) {
-      return (array && array.length)
-        ? baseWhile(array, getIteratee(predicate, 3), false, true)
-        : [];
-    }
-
-    /**
-     * Creates a slice of `array` with elements taken from the beginning. Elements
-     * are taken until `predicate` returns falsey. The predicate is invoked with
-     * three arguments: (value, index, array).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Array
-     * @param {Array} array The array to query.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the slice of `array`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'active': false },
-     *   { 'user': 'fred',    'active': false },
-     *   { 'user': 'pebbles', 'active': true }
-     * ];
-     *
-     * _.takeWhile(users, function(o) { return !o.active; });
-     * // => objects for ['barney', 'fred']
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.takeWhile(users, { 'user': 'barney', 'active': false });
-     * // => objects for ['barney']
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.takeWhile(users, ['active', false]);
-     * // => objects for ['barney', 'fred']
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.takeWhile(users, 'active');
-     * // => []
-     */
-    function takeWhile(array, predicate) {
-      return (array && array.length)
-        ? baseWhile(array, getIteratee(predicate, 3))
-        : [];
-    }
-
-    /**
-     * Creates an array of unique values, in order, from all given arrays using
-     * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @returns {Array} Returns the new array of combined values.
-     * @example
-     *
-     * _.union([2], [1, 2]);
-     * // => [2, 1]
-     */
-    var union = baseRest(function(arrays) {
-      return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true));
-    });
-
-    /**
-     * This method is like `_.union` except that it accepts `iteratee` which is
-     * invoked for each element of each `arrays` to generate the criterion by
-     * which uniqueness is computed. Result values are chosen from the first
-     * array in which the value occurs. The iteratee is invoked with one argument:
-     * (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Array} Returns the new array of combined values.
-     * @example
-     *
-     * _.unionBy([2.1], [1.2, 2.3], Math.floor);
-     * // => [2.1, 1.2]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.unionBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
-     * // => [{ 'x': 1 }, { 'x': 2 }]
-     */
-    var unionBy = baseRest(function(arrays) {
-      var iteratee = last(arrays);
-      if (isArrayLikeObject(iteratee)) {
-        iteratee = undefined;
-      }
-      return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), getIteratee(iteratee, 2));
-    });
-
-    /**
-     * This method is like `_.union` except that it accepts `comparator` which
-     * is invoked to compare elements of `arrays`. Result values are chosen from
-     * the first array in which the value occurs. The comparator is invoked
-     * with two arguments: (arrVal, othVal).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of combined values.
-     * @example
-     *
-     * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
-     * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
-     *
-     * _.unionWith(objects, others, _.isEqual);
-     * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]
-     */
-    var unionWith = baseRest(function(arrays) {
-      var comparator = last(arrays);
-      comparator = typeof comparator == 'function' ? comparator : undefined;
-      return baseUniq(baseFlatten(arrays, 1, isArrayLikeObject, true), undefined, comparator);
-    });
-
-    /**
-     * Creates a duplicate-free version of an array, using
-     * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons, in which only the first occurrence of each element
-     * is kept. The order of result values is determined by the order they occur
-     * in the array.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @returns {Array} Returns the new duplicate free array.
-     * @example
-     *
-     * _.uniq([2, 1, 2]);
-     * // => [2, 1]
-     */
-    function uniq(array) {
-      return (array && array.length) ? baseUniq(array) : [];
-    }
-
-    /**
-     * This method is like `_.uniq` except that it accepts `iteratee` which is
-     * invoked for each element in `array` to generate the criterion by which
-     * uniqueness is computed. The order of result values is determined by the
-     * order they occur in the array. The iteratee is invoked with one argument:
-     * (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Array} Returns the new duplicate free array.
-     * @example
-     *
-     * _.uniqBy([2.1, 1.2, 2.3], Math.floor);
-     * // => [2.1, 1.2]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.uniqBy([{ 'x': 1 }, { 'x': 2 }, { 'x': 1 }], 'x');
-     * // => [{ 'x': 1 }, { 'x': 2 }]
-     */
-    function uniqBy(array, iteratee) {
-      return (array && array.length) ? baseUniq(array, getIteratee(iteratee, 2)) : [];
-    }
-
-    /**
-     * This method is like `_.uniq` except that it accepts `comparator` which
-     * is invoked to compare elements of `array`. The order of result values is
-     * determined by the order they occur in the array.The comparator is invoked
-     * with two arguments: (arrVal, othVal).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new duplicate free array.
-     * @example
-     *
-     * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }, { 'x': 1, 'y': 2 }];
-     *
-     * _.uniqWith(objects, _.isEqual);
-     * // => [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }]
-     */
-    function uniqWith(array, comparator) {
-      comparator = typeof comparator == 'function' ? comparator : undefined;
-      return (array && array.length) ? baseUniq(array, undefined, comparator) : [];
-    }
-
-    /**
-     * This method is like `_.zip` except that it accepts an array of grouped
-     * elements and creates an array regrouping the elements to their pre-zip
-     * configuration.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.2.0
-     * @category Array
-     * @param {Array} array The array of grouped elements to process.
-     * @returns {Array} Returns the new array of regrouped elements.
-     * @example
-     *
-     * var zipped = _.zip(['a', 'b'], [1, 2], [true, false]);
-     * // => [['a', 1, true], ['b', 2, false]]
-     *
-     * _.unzip(zipped);
-     * // => [['a', 'b'], [1, 2], [true, false]]
-     */
-    function unzip(array) {
-      if (!(array && array.length)) {
-        return [];
-      }
-      var length = 0;
-      array = arrayFilter(array, function(group) {
-        if (isArrayLikeObject(group)) {
-          length = nativeMax(group.length, length);
-          return true;
-        }
-      });
-      return baseTimes(length, function(index) {
-        return arrayMap(array, baseProperty(index));
-      });
-    }
-
-    /**
-     * This method is like `_.unzip` except that it accepts `iteratee` to specify
-     * how regrouped values should be combined. The iteratee is invoked with the
-     * elements of each group: (...group).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.8.0
-     * @category Array
-     * @param {Array} array The array of grouped elements to process.
-     * @param {Function} [iteratee=_.identity] The function to combine
-     *  regrouped values.
-     * @returns {Array} Returns the new array of regrouped elements.
-     * @example
-     *
-     * var zipped = _.zip([1, 2], [10, 20], [100, 200]);
-     * // => [[1, 10, 100], [2, 20, 200]]
-     *
-     * _.unzipWith(zipped, _.add);
-     * // => [3, 30, 300]
-     */
-    function unzipWith(array, iteratee) {
-      if (!(array && array.length)) {
-        return [];
-      }
-      var result = unzip(array);
-      if (iteratee == null) {
-        return result;
-      }
-      return arrayMap(result, function(group) {
-        return apply(iteratee, undefined, group);
-      });
-    }
-
-    /**
-     * Creates an array excluding all given values using
-     * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * for equality comparisons.
-     *
-     * **Note:** Unlike `_.pull`, this method returns a new array.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {Array} array The array to inspect.
-     * @param {...*} [values] The values to exclude.
-     * @returns {Array} Returns the new array of filtered values.
-     * @see _.difference, _.xor
-     * @example
-     *
-     * _.without([2, 1, 2, 3], 1, 2);
-     * // => [3]
-     */
-    var without = baseRest(function(array, values) {
-      return isArrayLikeObject(array)
-        ? baseDifference(array, values)
-        : [];
-    });
-
-    /**
-     * Creates an array of unique values that is the
-     * [symmetric difference](https://en.wikipedia.org/wiki/Symmetric_difference)
-     * of the given arrays. The order of result values is determined by the order
-     * they occur in the arrays.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.4.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @returns {Array} Returns the new array of filtered values.
-     * @see _.difference, _.without
-     * @example
-     *
-     * _.xor([2, 1], [2, 3]);
-     * // => [1, 3]
-     */
-    var xor = baseRest(function(arrays) {
-      return baseXor(arrayFilter(arrays, isArrayLikeObject));
-    });
-
-    /**
-     * This method is like `_.xor` except that it accepts `iteratee` which is
-     * invoked for each element of each `arrays` to generate the criterion by
-     * which by which they're compared. The order of result values is determined
-     * by the order they occur in the arrays. The iteratee is invoked with one
-     * argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Array} Returns the new array of filtered values.
-     * @example
-     *
-     * _.xorBy([2.1, 1.2], [2.3, 3.4], Math.floor);
-     * // => [1.2, 3.4]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.xorBy([{ 'x': 1 }], [{ 'x': 2 }, { 'x': 1 }], 'x');
-     * // => [{ 'x': 2 }]
-     */
-    var xorBy = baseRest(function(arrays) {
-      var iteratee = last(arrays);
-      if (isArrayLikeObject(iteratee)) {
-        iteratee = undefined;
-      }
-      return baseXor(arrayFilter(arrays, isArrayLikeObject), getIteratee(iteratee, 2));
-    });
-
-    /**
-     * This method is like `_.xor` except that it accepts `comparator` which is
-     * invoked to compare elements of `arrays`. The order of result values is
-     * determined by the order they occur in the arrays. The comparator is invoked
-     * with two arguments: (arrVal, othVal).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to inspect.
-     * @param {Function} [comparator] The comparator invoked per element.
-     * @returns {Array} Returns the new array of filtered values.
-     * @example
-     *
-     * var objects = [{ 'x': 1, 'y': 2 }, { 'x': 2, 'y': 1 }];
-     * var others = [{ 'x': 1, 'y': 1 }, { 'x': 1, 'y': 2 }];
-     *
-     * _.xorWith(objects, others, _.isEqual);
-     * // => [{ 'x': 2, 'y': 1 }, { 'x': 1, 'y': 1 }]
-     */
-    var xorWith = baseRest(function(arrays) {
-      var comparator = last(arrays);
-      comparator = typeof comparator == 'function' ? comparator : undefined;
-      return baseXor(arrayFilter(arrays, isArrayLikeObject), undefined, comparator);
-    });
-
-    /**
-     * Creates an array of grouped elements, the first of which contains the
-     * first elements of the given arrays, the second of which contains the
-     * second elements of the given arrays, and so on.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to process.
-     * @returns {Array} Returns the new array of grouped elements.
-     * @example
-     *
-     * _.zip(['a', 'b'], [1, 2], [true, false]);
-     * // => [['a', 1, true], ['b', 2, false]]
-     */
-    var zip = baseRest(unzip);
-
-    /**
-     * This method is like `_.fromPairs` except that it accepts two arrays,
-     * one of property identifiers and one of corresponding values.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.4.0
-     * @category Array
-     * @param {Array} [props=[]] The property identifiers.
-     * @param {Array} [values=[]] The property values.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * _.zipObject(['a', 'b'], [1, 2]);
-     * // => { 'a': 1, 'b': 2 }
-     */
-    function zipObject(props, values) {
-      return baseZipObject(props || [], values || [], assignValue);
-    }
-
-    /**
-     * This method is like `_.zipObject` except that it supports property paths.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.1.0
-     * @category Array
-     * @param {Array} [props=[]] The property identifiers.
-     * @param {Array} [values=[]] The property values.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * _.zipObjectDeep(['a.b[0].c', 'a.b[1].d'], [1, 2]);
-     * // => { 'a': { 'b': [{ 'c': 1 }, { 'd': 2 }] } }
-     */
-    function zipObjectDeep(props, values) {
-      return baseZipObject(props || [], values || [], baseSet);
-    }
-
-    /**
-     * This method is like `_.zip` except that it accepts `iteratee` to specify
-     * how grouped values should be combined. The iteratee is invoked with the
-     * elements of each group: (...group).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.8.0
-     * @category Array
-     * @param {...Array} [arrays] The arrays to process.
-     * @param {Function} [iteratee=_.identity] The function to combine
-     *  grouped values.
-     * @returns {Array} Returns the new array of grouped elements.
-     * @example
-     *
-     * _.zipWith([1, 2], [10, 20], [100, 200], function(a, b, c) {
-     *   return a + b + c;
-     * });
-     * // => [111, 222]
-     */
-    var zipWith = baseRest(function(arrays) {
-      var length = arrays.length,
-          iteratee = length > 1 ? arrays[length - 1] : undefined;
-
-      iteratee = typeof iteratee == 'function' ? (arrays.pop(), iteratee) : undefined;
-      return unzipWith(arrays, iteratee);
-    });
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates a `lodash` wrapper instance that wraps `value` with explicit method
-     * chain sequences enabled. The result of such sequences must be unwrapped
-     * with `_#value`.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.3.0
-     * @category Seq
-     * @param {*} value The value to wrap.
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'age': 36 },
-     *   { 'user': 'fred',    'age': 40 },
-     *   { 'user': 'pebbles', 'age': 1 }
-     * ];
-     *
-     * var youngest = _
-     *   .chain(users)
-     *   .sortBy('age')
-     *   .map(function(o) {
-     *     return o.user + ' is ' + o.age;
-     *   })
-     *   .head()
-     *   .value();
-     * // => 'pebbles is 1'
-     */
-    function chain(value) {
-      var result = lodash(value);
-      result.__chain__ = true;
-      return result;
-    }
-
-    /**
-     * This method invokes `interceptor` and returns `value`. The interceptor
-     * is invoked with one argument; (value). The purpose of this method is to
-     * "tap into" a method chain sequence in order to modify intermediate results.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Seq
-     * @param {*} value The value to provide to `interceptor`.
-     * @param {Function} interceptor The function to invoke.
-     * @returns {*} Returns `value`.
-     * @example
-     *
-     * _([1, 2, 3])
-     *  .tap(function(array) {
-     *    // Mutate input array.
-     *    array.pop();
-     *  })
-     *  .reverse()
-     *  .value();
-     * // => [2, 1]
-     */
-    function tap(value, interceptor) {
-      interceptor(value);
-      return value;
-    }
-
-    /**
-     * This method is like `_.tap` except that it returns the result of `interceptor`.
-     * The purpose of this method is to "pass thru" values replacing intermediate
-     * results in a method chain sequence.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Seq
-     * @param {*} value The value to provide to `interceptor`.
-     * @param {Function} interceptor The function to invoke.
-     * @returns {*} Returns the result of `interceptor`.
-     * @example
-     *
-     * _('  abc  ')
-     *  .chain()
-     *  .trim()
-     *  .thru(function(value) {
-     *    return [value];
-     *  })
-     *  .value();
-     * // => ['abc']
-     */
-    function thru(value, interceptor) {
-      return interceptor(value);
-    }
-
-    /**
-     * This method is the wrapper version of `_.at`.
-     *
-     * @name at
-     * @memberOf _
-     * @since 1.0.0
-     * @category Seq
-     * @param {...(string|string[])} [paths] The property paths to pick.
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };
-     *
-     * _(object).at(['a[0].b.c', 'a[1]']).value();
-     * // => [3, 4]
-     */
-    var wrapperAt = flatRest(function(paths) {
-      var length = paths.length,
-          start = length ? paths[0] : 0,
-          value = this.__wrapped__,
-          interceptor = function(object) { return baseAt(object, paths); };
-
-      if (length > 1 || this.__actions__.length ||
-          !(value instanceof LazyWrapper) || !isIndex(start)) {
-        return this.thru(interceptor);
-      }
-      value = value.slice(start, +start + (length ? 1 : 0));
-      value.__actions__.push({
-        'func': thru,
-        'args': [interceptor],
-        'thisArg': undefined
-      });
-      return new LodashWrapper(value, this.__chain__).thru(function(array) {
-        if (length && !array.length) {
-          array.push(undefined);
-        }
-        return array;
-      });
-    });
-
-    /**
-     * Creates a `lodash` wrapper instance with explicit method chain sequences enabled.
-     *
-     * @name chain
-     * @memberOf _
-     * @since 0.1.0
-     * @category Seq
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney', 'age': 36 },
-     *   { 'user': 'fred',   'age': 40 }
-     * ];
-     *
-     * // A sequence without explicit chaining.
-     * _(users).head();
-     * // => { 'user': 'barney', 'age': 36 }
-     *
-     * // A sequence with explicit chaining.
-     * _(users)
-     *   .chain()
-     *   .head()
-     *   .pick('user')
-     *   .value();
-     * // => { 'user': 'barney' }
-     */
-    function wrapperChain() {
-      return chain(this);
-    }
-
-    /**
-     * Executes the chain sequence and returns the wrapped result.
-     *
-     * @name commit
-     * @memberOf _
-     * @since 3.2.0
-     * @category Seq
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * var array = [1, 2];
-     * var wrapped = _(array).push(3);
-     *
-     * console.log(array);
-     * // => [1, 2]
-     *
-     * wrapped = wrapped.commit();
-     * console.log(array);
-     * // => [1, 2, 3]
-     *
-     * wrapped.last();
-     * // => 3
-     *
-     * console.log(array);
-     * // => [1, 2, 3]
-     */
-    function wrapperCommit() {
-      return new LodashWrapper(this.value(), this.__chain__);
-    }
-
-    /**
-     * Gets the next value on a wrapped object following the
-     * [iterator protocol](https://mdn.io/iteration_protocols#iterator).
-     *
-     * @name next
-     * @memberOf _
-     * @since 4.0.0
-     * @category Seq
-     * @returns {Object} Returns the next iterator value.
-     * @example
-     *
-     * var wrapped = _([1, 2]);
-     *
-     * wrapped.next();
-     * // => { 'done': false, 'value': 1 }
-     *
-     * wrapped.next();
-     * // => { 'done': false, 'value': 2 }
-     *
-     * wrapped.next();
-     * // => { 'done': true, 'value': undefined }
-     */
-    function wrapperNext() {
-      if (this.__values__ === undefined) {
-        this.__values__ = toArray(this.value());
-      }
-      var done = this.__index__ >= this.__values__.length,
-          value = done ? undefined : this.__values__[this.__index__++];
-
-      return { 'done': done, 'value': value };
-    }
-
-    /**
-     * Enables the wrapper to be iterable.
-     *
-     * @name Symbol.iterator
-     * @memberOf _
-     * @since 4.0.0
-     * @category Seq
-     * @returns {Object} Returns the wrapper object.
-     * @example
-     *
-     * var wrapped = _([1, 2]);
-     *
-     * wrapped[Symbol.iterator]() === wrapped;
-     * // => true
-     *
-     * Array.from(wrapped);
-     * // => [1, 2]
-     */
-    function wrapperToIterator() {
-      return this;
-    }
-
-    /**
-     * Creates a clone of the chain sequence planting `value` as the wrapped value.
-     *
-     * @name plant
-     * @memberOf _
-     * @since 3.2.0
-     * @category Seq
-     * @param {*} value The value to plant.
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * function square(n) {
-     *   return n * n;
-     * }
-     *
-     * var wrapped = _([1, 2]).map(square);
-     * var other = wrapped.plant([3, 4]);
-     *
-     * other.value();
-     * // => [9, 16]
-     *
-     * wrapped.value();
-     * // => [1, 4]
-     */
-    function wrapperPlant(value) {
-      var result,
-          parent = this;
-
-      while (parent instanceof baseLodash) {
-        var clone = wrapperClone(parent);
-        clone.__index__ = 0;
-        clone.__values__ = undefined;
-        if (result) {
-          previous.__wrapped__ = clone;
-        } else {
-          result = clone;
-        }
-        var previous = clone;
-        parent = parent.__wrapped__;
-      }
-      previous.__wrapped__ = value;
-      return result;
-    }
-
-    /**
-     * This method is the wrapper version of `_.reverse`.
-     *
-     * **Note:** This method mutates the wrapped array.
-     *
-     * @name reverse
-     * @memberOf _
-     * @since 0.1.0
-     * @category Seq
-     * @returns {Object} Returns the new `lodash` wrapper instance.
-     * @example
-     *
-     * var array = [1, 2, 3];
-     *
-     * _(array).reverse().value()
-     * // => [3, 2, 1]
-     *
-     * console.log(array);
-     * // => [3, 2, 1]
-     */
-    function wrapperReverse() {
-      var value = this.__wrapped__;
-      if (value instanceof LazyWrapper) {
-        var wrapped = value;
-        if (this.__actions__.length) {
-          wrapped = new LazyWrapper(this);
-        }
-        wrapped = wrapped.reverse();
-        wrapped.__actions__.push({
-          'func': thru,
-          'args': [reverse],
-          'thisArg': undefined
-        });
-        return new LodashWrapper(wrapped, this.__chain__);
-      }
-      return this.thru(reverse);
-    }
-
-    /**
-     * Executes the chain sequence to resolve the unwrapped value.
-     *
-     * @name value
-     * @memberOf _
-     * @since 0.1.0
-     * @alias toJSON, valueOf
-     * @category Seq
-     * @returns {*} Returns the resolved unwrapped value.
-     * @example
-     *
-     * _([1, 2, 3]).value();
-     * // => [1, 2, 3]
-     */
-    function wrapperValue() {
-      return baseWrapperValue(this.__wrapped__, this.__actions__);
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Creates an object composed of keys generated from the results of running
-     * each element of `collection` thru `iteratee`. The corresponding value of
-     * each key is the number of times the key was returned by `iteratee`. The
-     * iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.5.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
-     * @returns {Object} Returns the composed aggregate object.
-     * @example
-     *
-     * _.countBy([6.1, 4.2, 6.3], Math.floor);
-     * // => { '4': 1, '6': 2 }
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.countBy(['one', 'two', 'three'], 'length');
-     * // => { '3': 2, '5': 1 }
-     */
-    var countBy = createAggregator(function(result, value, key) {
-      if (hasOwnProperty.call(result, key)) {
-        ++result[key];
-      } else {
-        baseAssignValue(result, key, 1);
-      }
-    });
-
-    /**
-     * Checks if `predicate` returns truthy for **all** elements of `collection`.
-     * Iteration is stopped once `predicate` returns falsey. The predicate is
-     * invoked with three arguments: (value, index|key, collection).
-     *
-     * **Note:** This method returns `true` for
-     * [empty collections](https://en.wikipedia.org/wiki/Empty_set) because
-     * [everything is true](https://en.wikipedia.org/wiki/Vacuous_truth) of
-     * elements of empty collections.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {boolean} Returns `true` if all elements pass the predicate check,
-     *  else `false`.
-     * @example
-     *
-     * _.every([true, 1, null, 'yes'], Boolean);
-     * // => false
-     *
-     * var users = [
-     *   { 'user': 'barney', 'age': 36, 'active': false },
-     *   { 'user': 'fred',   'age': 40, 'active': false }
-     * ];
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.every(users, { 'user': 'barney', 'active': false });
-     * // => false
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.every(users, ['active', false]);
-     * // => true
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.every(users, 'active');
-     * // => false
-     */
-    function every(collection, predicate, guard) {
-      var func = isArray(collection) ? arrayEvery : baseEvery;
-      if (guard && isIterateeCall(collection, predicate, guard)) {
-        predicate = undefined;
-      }
-      return func(collection, getIteratee(predicate, 3));
-    }
-
-    /**
-     * Iterates over elements of `collection`, returning an array of all elements
-     * `predicate` returns truthy for. The predicate is invoked with three
-     * arguments: (value, index|key, collection).
-     *
-     * **Note:** Unlike `_.remove`, this method returns a new array.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the new filtered array.
-     * @see _.reject
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney', 'age': 36, 'active': true },
-     *   { 'user': 'fred',   'age': 40, 'active': false }
-     * ];
-     *
-     * _.filter(users, function(o) { return !o.active; });
-     * // => objects for ['fred']
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.filter(users, { 'age': 36, 'active': true });
-     * // => objects for ['barney']
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.filter(users, ['active', false]);
-     * // => objects for ['fred']
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.filter(users, 'active');
-     * // => objects for ['barney']
-     */
-    function filter(collection, predicate) {
-      var func = isArray(collection) ? arrayFilter : baseFilter;
-      return func(collection, getIteratee(predicate, 3));
-    }
-
-    /**
-     * Iterates over elements of `collection`, returning the first element
-     * `predicate` returns truthy for. The predicate is invoked with three
-     * arguments: (value, index|key, collection).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to inspect.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @param {number} [fromIndex=0] The index to search from.
-     * @returns {*} Returns the matched element, else `undefined`.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'age': 36, 'active': true },
-     *   { 'user': 'fred',    'age': 40, 'active': false },
-     *   { 'user': 'pebbles', 'age': 1,  'active': true }
-     * ];
-     *
-     * _.find(users, function(o) { return o.age < 40; });
-     * // => object for 'barney'
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.find(users, { 'age': 1, 'active': true });
-     * // => object for 'pebbles'
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.find(users, ['active', false]);
-     * // => object for 'fred'
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.find(users, 'active');
-     * // => object for 'barney'
-     */
-    var find = createFind(findIndex);
-
-    /**
-     * This method is like `_.find` except that it iterates over elements of
-     * `collection` from right to left.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to inspect.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @param {number} [fromIndex=collection.length-1] The index to search from.
-     * @returns {*} Returns the matched element, else `undefined`.
-     * @example
-     *
-     * _.findLast([1, 2, 3, 4], function(n) {
-     *   return n % 2 == 1;
-     * });
-     * // => 3
-     */
-    var findLast = createFind(findLastIndex);
-
-    /**
-     * Creates a flattened array of values by running each element in `collection`
-     * thru `iteratee` and flattening the mapped results. The iteratee is invoked
-     * with three arguments: (value, index|key, collection).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the new flattened array.
-     * @example
-     *
-     * function duplicate(n) {
-     *   return [n, n];
-     * }
-     *
-     * _.flatMap([1, 2], duplicate);
-     * // => [1, 1, 2, 2]
-     */
-    function flatMap(collection, iteratee) {
-      return baseFlatten(map(collection, iteratee), 1);
-    }
-
-    /**
-     * This method is like `_.flatMap` except that it recursively flattens the
-     * mapped results.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.7.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the new flattened array.
-     * @example
-     *
-     * function duplicate(n) {
-     *   return [[[n, n]]];
-     * }
-     *
-     * _.flatMapDeep([1, 2], duplicate);
-     * // => [1, 1, 2, 2]
-     */
-    function flatMapDeep(collection, iteratee) {
-      return baseFlatten(map(collection, iteratee), INFINITY);
-    }
-
-    /**
-     * This method is like `_.flatMap` except that it recursively flattens the
-     * mapped results up to `depth` times.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.7.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @param {number} [depth=1] The maximum recursion depth.
-     * @returns {Array} Returns the new flattened array.
-     * @example
-     *
-     * function duplicate(n) {
-     *   return [[[n, n]]];
-     * }
-     *
-     * _.flatMapDepth([1, 2], duplicate, 2);
-     * // => [[1, 1], [2, 2]]
-     */
-    function flatMapDepth(collection, iteratee, depth) {
-      depth = depth === undefined ? 1 : toInteger(depth);
-      return baseFlatten(map(collection, iteratee), depth);
-    }
-
-    /**
-     * Iterates over elements of `collection` and invokes `iteratee` for each element.
-     * The iteratee is invoked with three arguments: (value, index|key, collection).
-     * Iteratee functions may exit iteration early by explicitly returning `false`.
-     *
-     * **Note:** As with other "Collections" methods, objects with a "length"
-     * property are iterated like arrays. To avoid this behavior use `_.forIn`
-     * or `_.forOwn` for object iteration.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @alias each
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Array|Object} Returns `collection`.
-     * @see _.forEachRight
-     * @example
-     *
-     * _.forEach([1, 2], function(value) {
-     *   console.log(value);
-     * });
-     * // => Logs `1` then `2`.
-     *
-     * _.forEach({ 'a': 1, 'b': 2 }, function(value, key) {
-     *   console.log(key);
-     * });
-     * // => Logs 'a' then 'b' (iteration order is not guaranteed).
-     */
-    function forEach(collection, iteratee) {
-      var func = isArray(collection) ? arrayEach : baseEach;
-      return func(collection, getIteratee(iteratee, 3));
-    }
-
-    /**
-     * This method is like `_.forEach` except that it iterates over elements of
-     * `collection` from right to left.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @alias eachRight
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Array|Object} Returns `collection`.
-     * @see _.forEach
-     * @example
-     *
-     * _.forEachRight([1, 2], function(value) {
-     *   console.log(value);
-     * });
-     * // => Logs `2` then `1`.
-     */
-    function forEachRight(collection, iteratee) {
-      var func = isArray(collection) ? arrayEachRight : baseEachRight;
-      return func(collection, getIteratee(iteratee, 3));
-    }
-
-    /**
-     * Creates an object composed of keys generated from the results of running
-     * each element of `collection` thru `iteratee`. The order of grouped values
-     * is determined by the order they occur in `collection`. The corresponding
-     * value of each key is an array of elements responsible for generating the
-     * key. The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
-     * @returns {Object} Returns the composed aggregate object.
-     * @example
-     *
-     * _.groupBy([6.1, 4.2, 6.3], Math.floor);
-     * // => { '4': [4.2], '6': [6.1, 6.3] }
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.groupBy(['one', 'two', 'three'], 'length');
-     * // => { '3': ['one', 'two'], '5': ['three'] }
-     */
-    var groupBy = createAggregator(function(result, value, key) {
-      if (hasOwnProperty.call(result, key)) {
-        result[key].push(value);
-      } else {
-        baseAssignValue(result, key, [value]);
-      }
-    });
-
-    /**
-     * Checks if `value` is in `collection`. If `collection` is a string, it's
-     * checked for a substring of `value`, otherwise
-     * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * is used for equality comparisons. If `fromIndex` is negative, it's used as
-     * the offset from the end of `collection`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object|string} collection The collection to inspect.
-     * @param {*} value The value to search for.
-     * @param {number} [fromIndex=0] The index to search from.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`.
-     * @returns {boolean} Returns `true` if `value` is found, else `false`.
-     * @example
-     *
-     * _.includes([1, 2, 3], 1);
-     * // => true
-     *
-     * _.includes([1, 2, 3], 1, 2);
-     * // => false
-     *
-     * _.includes({ 'a': 1, 'b': 2 }, 1);
-     * // => true
-     *
-     * _.includes('abcd', 'bc');
-     * // => true
-     */
-    function includes(collection, value, fromIndex, guard) {
-      collection = isArrayLike(collection) ? collection : values(collection);
-      fromIndex = (fromIndex && !guard) ? toInteger(fromIndex) : 0;
-
-      var length = collection.length;
-      if (fromIndex < 0) {
-        fromIndex = nativeMax(length + fromIndex, 0);
-      }
-      return isString(collection)
-        ? (fromIndex <= length && collection.indexOf(value, fromIndex) > -1)
-        : (!!length && baseIndexOf(collection, value, fromIndex) > -1);
-    }
-
-    /**
-     * Invokes the method at `path` of each element in `collection`, returning
-     * an array of the results of each invoked method. Any additional arguments
-     * are provided to each invoked method. If `path` is a function, it's invoked
-     * for, and `this` bound to, each element in `collection`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Array|Function|string} path The path of the method to invoke or
-     *  the function invoked per iteration.
-     * @param {...*} [args] The arguments to invoke each method with.
-     * @returns {Array} Returns the array of results.
-     * @example
-     *
-     * _.invokeMap([[5, 1, 7], [3, 2, 1]], 'sort');
-     * // => [[1, 5, 7], [1, 2, 3]]
-     *
-     * _.invokeMap([123, 456], String.prototype.split, '');
-     * // => [['1', '2', '3'], ['4', '5', '6']]
-     */
-    var invokeMap = baseRest(function(collection, path, args) {
-      var index = -1,
-          isFunc = typeof path == 'function',
-          result = isArrayLike(collection) ? Array(collection.length) : [];
-
-      baseEach(collection, function(value) {
-        result[++index] = isFunc ? apply(path, value, args) : baseInvoke(value, path, args);
-      });
-      return result;
-    });
-
-    /**
-     * Creates an object composed of keys generated from the results of running
-     * each element of `collection` thru `iteratee`. The corresponding value of
-     * each key is the last element responsible for generating the key. The
-     * iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee to transform keys.
-     * @returns {Object} Returns the composed aggregate object.
-     * @example
-     *
-     * var array = [
-     *   { 'dir': 'left', 'code': 97 },
-     *   { 'dir': 'right', 'code': 100 }
-     * ];
-     *
-     * _.keyBy(array, function(o) {
-     *   return String.fromCharCode(o.code);
-     * });
-     * // => { 'a': { 'dir': 'left', 'code': 97 }, 'd': { 'dir': 'right', 'code': 100 } }
-     *
-     * _.keyBy(array, 'dir');
-     * // => { 'left': { 'dir': 'left', 'code': 97 }, 'right': { 'dir': 'right', 'code': 100 } }
-     */
-    var keyBy = createAggregator(function(result, value, key) {
-      baseAssignValue(result, key, value);
-    });
-
-    /**
-     * Creates an array of values by running each element in `collection` thru
-     * `iteratee`. The iteratee is invoked with three arguments:
-     * (value, index|key, collection).
-     *
-     * Many lodash methods are guarded to work as iteratees for methods like
-     * `_.every`, `_.filter`, `_.map`, `_.mapValues`, `_.reject`, and `_.some`.
-     *
-     * The guarded methods are:
-     * `ary`, `chunk`, `curry`, `curryRight`, `drop`, `dropRight`, `every`,
-     * `fill`, `invert`, `parseInt`, `random`, `range`, `rangeRight`, `repeat`,
-     * `sampleSize`, `slice`, `some`, `sortBy`, `split`, `take`, `takeRight`,
-     * `template`, `trim`, `trimEnd`, `trimStart`, and `words`
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the new mapped array.
-     * @example
-     *
-     * function square(n) {
-     *   return n * n;
-     * }
-     *
-     * _.map([4, 8], square);
-     * // => [16, 64]
-     *
-     * _.map({ 'a': 4, 'b': 8 }, square);
-     * // => [16, 64] (iteration order is not guaranteed)
-     *
-     * var users = [
-     *   { 'user': 'barney' },
-     *   { 'user': 'fred' }
-     * ];
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.map(users, 'user');
-     * // => ['barney', 'fred']
-     */
-    function map(collection, iteratee) {
-      var func = isArray(collection) ? arrayMap : baseMap;
-      return func(collection, getIteratee(iteratee, 3));
-    }
-
-    /**
-     * This method is like `_.sortBy` except that it allows specifying the sort
-     * orders of the iteratees to sort by. If `orders` is unspecified, all values
-     * are sorted in ascending order. Otherwise, specify an order of "desc" for
-     * descending or "asc" for ascending sort order of corresponding values.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Array[]|Function[]|Object[]|string[]} [iteratees=[_.identity]]
-     *  The iteratees to sort by.
-     * @param {string[]} [orders] The sort orders of `iteratees`.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.reduce`.
-     * @returns {Array} Returns the new sorted array.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'fred',   'age': 48 },
-     *   { 'user': 'barney', 'age': 34 },
-     *   { 'user': 'fred',   'age': 40 },
-     *   { 'user': 'barney', 'age': 36 }
-     * ];
-     *
-     * // Sort by `user` in ascending order and by `age` in descending order.
-     * _.orderBy(users, ['user', 'age'], ['asc', 'desc']);
-     * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
-     */
-    function orderBy(collection, iteratees, orders, guard) {
-      if (collection == null) {
-        return [];
-      }
-      if (!isArray(iteratees)) {
-        iteratees = iteratees == null ? [] : [iteratees];
-      }
-      orders = guard ? undefined : orders;
-      if (!isArray(orders)) {
-        orders = orders == null ? [] : [orders];
-      }
-      return baseOrderBy(collection, iteratees, orders);
-    }
-
-    /**
-     * Creates an array of elements split into two groups, the first of which
-     * contains elements `predicate` returns truthy for, the second of which
-     * contains elements `predicate` returns falsey for. The predicate is
-     * invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the array of grouped elements.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney',  'age': 36, 'active': false },
-     *   { 'user': 'fred',    'age': 40, 'active': true },
-     *   { 'user': 'pebbles', 'age': 1,  'active': false }
-     * ];
-     *
-     * _.partition(users, function(o) { return o.active; });
-     * // => objects for [['fred'], ['barney', 'pebbles']]
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.partition(users, { 'age': 1, 'active': false });
-     * // => objects for [['pebbles'], ['barney', 'fred']]
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.partition(users, ['active', false]);
-     * // => objects for [['barney', 'pebbles'], ['fred']]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.partition(users, 'active');
-     * // => objects for [['fred'], ['barney', 'pebbles']]
-     */
-    var partition = createAggregator(function(result, value, key) {
-      result[key ? 0 : 1].push(value);
-    }, function() { return [[], []]; });
-
-    /**
-     * Reduces `collection` to a value which is the accumulated result of running
-     * each element in `collection` thru `iteratee`, where each successive
-     * invocation is supplied the return value of the previous. If `accumulator`
-     * is not given, the first element of `collection` is used as the initial
-     * value. The iteratee is invoked with four arguments:
-     * (accumulator, value, index|key, collection).
-     *
-     * Many lodash methods are guarded to work as iteratees for methods like
-     * `_.reduce`, `_.reduceRight`, and `_.transform`.
-     *
-     * The guarded methods are:
-     * `assign`, `defaults`, `defaultsDeep`, `includes`, `merge`, `orderBy`,
-     * and `sortBy`
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @param {*} [accumulator] The initial value.
-     * @returns {*} Returns the accumulated value.
-     * @see _.reduceRight
-     * @example
-     *
-     * _.reduce([1, 2], function(sum, n) {
-     *   return sum + n;
-     * }, 0);
-     * // => 3
-     *
-     * _.reduce({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
-     *   (result[value] || (result[value] = [])).push(key);
-     *   return result;
-     * }, {});
-     * // => { '1': ['a', 'c'], '2': ['b'] } (iteration order is not guaranteed)
-     */
-    function reduce(collection, iteratee, accumulator) {
-      var func = isArray(collection) ? arrayReduce : baseReduce,
-          initAccum = arguments.length < 3;
-
-      return func(collection, getIteratee(iteratee, 4), accumulator, initAccum, baseEach);
-    }
-
-    /**
-     * This method is like `_.reduce` except that it iterates over elements of
-     * `collection` from right to left.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @param {*} [accumulator] The initial value.
-     * @returns {*} Returns the accumulated value.
-     * @see _.reduce
-     * @example
-     *
-     * var array = [[0, 1], [2, 3], [4, 5]];
-     *
-     * _.reduceRight(array, function(flattened, other) {
-     *   return flattened.concat(other);
-     * }, []);
-     * // => [4, 5, 2, 3, 0, 1]
-     */
-    function reduceRight(collection, iteratee, accumulator) {
-      var func = isArray(collection) ? arrayReduceRight : baseReduce,
-          initAccum = arguments.length < 3;
-
-      return func(collection, getIteratee(iteratee, 4), accumulator, initAccum, baseEachRight);
-    }
-
-    /**
-     * The opposite of `_.filter`; this method returns the elements of `collection`
-     * that `predicate` does **not** return truthy for.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the new filtered array.
-     * @see _.filter
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney', 'age': 36, 'active': false },
-     *   { 'user': 'fred',   'age': 40, 'active': true }
-     * ];
-     *
-     * _.reject(users, function(o) { return !o.active; });
-     * // => objects for ['fred']
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.reject(users, { 'age': 40, 'active': true });
-     * // => objects for ['barney']
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.reject(users, ['active', false]);
-     * // => objects for ['fred']
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.reject(users, 'active');
-     * // => objects for ['barney']
-     */
-    function reject(collection, predicate) {
-      var func = isArray(collection) ? arrayFilter : baseFilter;
-      return func(collection, negate(getIteratee(predicate, 3)));
-    }
-
-    /**
-     * Gets a random element from `collection`.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to sample.
-     * @returns {*} Returns the random element.
-     * @example
-     *
-     * _.sample([1, 2, 3, 4]);
-     * // => 2
-     */
-    function sample(collection) {
-      var func = isArray(collection) ? arraySample : baseSample;
-      return func(collection);
-    }
-
-    /**
-     * Gets `n` random elements at unique keys from `collection` up to the
-     * size of `collection`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to sample.
-     * @param {number} [n=1] The number of elements to sample.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the random elements.
-     * @example
-     *
-     * _.sampleSize([1, 2, 3], 2);
-     * // => [3, 1]
-     *
-     * _.sampleSize([1, 2, 3], 4);
-     * // => [2, 3, 1]
-     */
-    function sampleSize(collection, n, guard) {
-      if ((guard ? isIterateeCall(collection, n, guard) : n === undefined)) {
-        n = 1;
-      } else {
-        n = toInteger(n);
-      }
-      var func = isArray(collection) ? arraySampleSize : baseSampleSize;
-      return func(collection, n);
-    }
-
-    /**
-     * Creates an array of shuffled values, using a version of the
-     * [Fisher-Yates shuffle](https://en.wikipedia.org/wiki/Fisher-Yates_shuffle).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to shuffle.
-     * @returns {Array} Returns the new shuffled array.
-     * @example
-     *
-     * _.shuffle([1, 2, 3, 4]);
-     * // => [4, 1, 3, 2]
-     */
-    function shuffle(collection) {
-      var func = isArray(collection) ? arrayShuffle : baseShuffle;
-      return func(collection);
-    }
-
-    /**
-     * Gets the size of `collection` by returning its length for array-like
-     * values or the number of own enumerable string keyed properties for objects.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object|string} collection The collection to inspect.
-     * @returns {number} Returns the collection size.
-     * @example
-     *
-     * _.size([1, 2, 3]);
-     * // => 3
-     *
-     * _.size({ 'a': 1, 'b': 2 });
-     * // => 2
-     *
-     * _.size('pebbles');
-     * // => 7
-     */
-    function size(collection) {
-      if (collection == null) {
-        return 0;
-      }
-      if (isArrayLike(collection)) {
-        return isString(collection) ? stringSize(collection) : collection.length;
-      }
-      var tag = getTag(collection);
-      if (tag == mapTag || tag == setTag) {
-        return collection.size;
-      }
-      return baseKeys(collection).length;
-    }
-
-    /**
-     * Checks if `predicate` returns truthy for **any** element of `collection`.
-     * Iteration is stopped once `predicate` returns truthy. The predicate is
-     * invoked with three arguments: (value, index|key, collection).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {boolean} Returns `true` if any element passes the predicate check,
-     *  else `false`.
-     * @example
-     *
-     * _.some([null, 0, 'yes', false], Boolean);
-     * // => true
-     *
-     * var users = [
-     *   { 'user': 'barney', 'active': true },
-     *   { 'user': 'fred',   'active': false }
-     * ];
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.some(users, { 'user': 'barney', 'active': false });
-     * // => false
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.some(users, ['active', false]);
-     * // => true
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.some(users, 'active');
-     * // => true
-     */
-    function some(collection, predicate, guard) {
-      var func = isArray(collection) ? arraySome : baseSome;
-      if (guard && isIterateeCall(collection, predicate, guard)) {
-        predicate = undefined;
-      }
-      return func(collection, getIteratee(predicate, 3));
-    }
-
-    /**
-     * Creates an array of elements, sorted in ascending order by the results of
-     * running each element in a collection thru each iteratee. This method
-     * performs a stable sort, that is, it preserves the original sort order of
-     * equal elements. The iteratees are invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Collection
-     * @param {Array|Object} collection The collection to iterate over.
-     * @param {...(Function|Function[])} [iteratees=[_.identity]]
-     *  The iteratees to sort by.
-     * @returns {Array} Returns the new sorted array.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'fred',   'age': 48 },
-     *   { 'user': 'barney', 'age': 36 },
-     *   { 'user': 'fred',   'age': 40 },
-     *   { 'user': 'barney', 'age': 34 }
-     * ];
-     *
-     * _.sortBy(users, [function(o) { return o.user; }]);
-     * // => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]
-     *
-     * _.sortBy(users, ['user', 'age']);
-     * // => objects for [['barney', 34], ['barney', 36], ['fred', 40], ['fred', 48]]
-     */
-    var sortBy = baseRest(function(collection, iteratees) {
-      if (collection == null) {
-        return [];
-      }
-      var length = iteratees.length;
-      if (length > 1 && isIterateeCall(collection, iteratees[0], iteratees[1])) {
-        iteratees = [];
-      } else if (length > 2 && isIterateeCall(iteratees[0], iteratees[1], iteratees[2])) {
-        iteratees = [iteratees[0]];
-      }
-      return baseOrderBy(collection, baseFlatten(iteratees, 1), []);
-    });
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Gets the timestamp of the number of milliseconds that have elapsed since
-     * the Unix epoch (1 January 1970 00:00:00 UTC).
-     *
-     * @static
-     * @memberOf _
-     * @since 2.4.0
-     * @category Date
-     * @returns {number} Returns the timestamp.
-     * @example
-     *
-     * _.defer(function(stamp) {
-     *   console.log(_.now() - stamp);
-     * }, _.now());
-     * // => Logs the number of milliseconds it took for the deferred invocation.
-     */
-    var now = ctxNow || function() {
-      return root.Date.now();
-    };
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * The opposite of `_.before`; this method creates a function that invokes
-     * `func` once it's called `n` or more times.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {number} n The number of calls before `func` is invoked.
-     * @param {Function} func The function to restrict.
-     * @returns {Function} Returns the new restricted function.
-     * @example
-     *
-     * var saves = ['profile', 'settings'];
-     *
-     * var done = _.after(saves.length, function() {
-     *   console.log('done saving!');
-     * });
-     *
-     * _.forEach(saves, function(type) {
-     *   asyncSave({ 'type': type, 'complete': done });
-     * });
-     * // => Logs 'done saving!' after the two async saves have completed.
-     */
-    function after(n, func) {
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      n = toInteger(n);
-      return function() {
-        if (--n < 1) {
-          return func.apply(this, arguments);
-        }
-      };
-    }
-
-    /**
-     * Creates a function that invokes `func`, with up to `n` arguments,
-     * ignoring any additional arguments.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Function
-     * @param {Function} func The function to cap arguments for.
-     * @param {number} [n=func.length] The arity cap.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Function} Returns the new capped function.
-     * @example
-     *
-     * _.map(['6', '8', '10'], _.ary(parseInt, 1));
-     * // => [6, 8, 10]
-     */
-    function ary(func, n, guard) {
-      n = guard ? undefined : n;
-      n = (func && n == null) ? func.length : n;
-      return createWrap(func, WRAP_ARY_FLAG, undefined, undefined, undefined, undefined, n);
-    }
-
-    /**
-     * Creates a function that invokes `func`, with the `this` binding and arguments
-     * of the created function, while it's called less than `n` times. Subsequent
-     * calls to the created function return the result of the last `func` invocation.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Function
-     * @param {number} n The number of calls at which `func` is no longer invoked.
-     * @param {Function} func The function to restrict.
-     * @returns {Function} Returns the new restricted function.
-     * @example
-     *
-     * jQuery(element).on('click', _.before(5, addContactToList));
-     * // => Allows adding up to 4 contacts to the list.
-     */
-    function before(n, func) {
-      var result;
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      n = toInteger(n);
-      return function() {
-        if (--n > 0) {
-          result = func.apply(this, arguments);
-        }
-        if (n <= 1) {
-          func = undefined;
-        }
-        return result;
-      };
-    }
-
-    /**
-     * Creates a function that invokes `func` with the `this` binding of `thisArg`
-     * and `partials` prepended to the arguments it receives.
-     *
-     * The `_.bind.placeholder` value, which defaults to `_` in monolithic builds,
-     * may be used as a placeholder for partially applied arguments.
-     *
-     * **Note:** Unlike native `Function#bind`, this method doesn't set the "length"
-     * property of bound functions.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to bind.
-     * @param {*} thisArg The `this` binding of `func`.
-     * @param {...*} [partials] The arguments to be partially applied.
-     * @returns {Function} Returns the new bound function.
-     * @example
-     *
-     * function greet(greeting, punctuation) {
-     *   return greeting + ' ' + this.user + punctuation;
-     * }
-     *
-     * var object = { 'user': 'fred' };
-     *
-     * var bound = _.bind(greet, object, 'hi');
-     * bound('!');
-     * // => 'hi fred!'
-     *
-     * // Bound with placeholders.
-     * var bound = _.bind(greet, object, _, '!');
-     * bound('hi');
-     * // => 'hi fred!'
-     */
-    var bind = baseRest(function(func, thisArg, partials) {
-      var bitmask = WRAP_BIND_FLAG;
-      if (partials.length) {
-        var holders = replaceHolders(partials, getHolder(bind));
-        bitmask |= WRAP_PARTIAL_FLAG;
-      }
-      return createWrap(func, bitmask, thisArg, partials, holders);
-    });
-
-    /**
-     * Creates a function that invokes the method at `object[key]` with `partials`
-     * prepended to the arguments it receives.
-     *
-     * This method differs from `_.bind` by allowing bound functions to reference
-     * methods that may be redefined or don't yet exist. See
-     * [Peter Michaux's article](http://peter.michaux.ca/articles/lazy-function-definition-pattern)
-     * for more details.
-     *
-     * The `_.bindKey.placeholder` value, which defaults to `_` in monolithic
-     * builds, may be used as a placeholder for partially applied arguments.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.10.0
-     * @category Function
-     * @param {Object} object The object to invoke the method on.
-     * @param {string} key The key of the method.
-     * @param {...*} [partials] The arguments to be partially applied.
-     * @returns {Function} Returns the new bound function.
-     * @example
-     *
-     * var object = {
-     *   'user': 'fred',
-     *   'greet': function(greeting, punctuation) {
-     *     return greeting + ' ' + this.user + punctuation;
-     *   }
-     * };
-     *
-     * var bound = _.bindKey(object, 'greet', 'hi');
-     * bound('!');
-     * // => 'hi fred!'
-     *
-     * object.greet = function(greeting, punctuation) {
-     *   return greeting + 'ya ' + this.user + punctuation;
-     * };
-     *
-     * bound('!');
-     * // => 'hiya fred!'
-     *
-     * // Bound with placeholders.
-     * var bound = _.bindKey(object, 'greet', _, '!');
-     * bound('hi');
-     * // => 'hiya fred!'
-     */
-    var bindKey = baseRest(function(object, key, partials) {
-      var bitmask = WRAP_BIND_FLAG | WRAP_BIND_KEY_FLAG;
-      if (partials.length) {
-        var holders = replaceHolders(partials, getHolder(bindKey));
-        bitmask |= WRAP_PARTIAL_FLAG;
-      }
-      return createWrap(key, bitmask, object, partials, holders);
-    });
-
-    /**
-     * Creates a function that accepts arguments of `func` and either invokes
-     * `func` returning its result, if at least `arity` number of arguments have
-     * been provided, or returns a function that accepts the remaining `func`
-     * arguments, and so on. The arity of `func` may be specified if `func.length`
-     * is not sufficient.
-     *
-     * The `_.curry.placeholder` value, which defaults to `_` in monolithic builds,
-     * may be used as a placeholder for provided arguments.
-     *
-     * **Note:** This method doesn't set the "length" property of curried functions.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Function
-     * @param {Function} func The function to curry.
-     * @param {number} [arity=func.length] The arity of `func`.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Function} Returns the new curried function.
-     * @example
-     *
-     * var abc = function(a, b, c) {
-     *   return [a, b, c];
-     * };
-     *
-     * var curried = _.curry(abc);
-     *
-     * curried(1)(2)(3);
-     * // => [1, 2, 3]
-     *
-     * curried(1, 2)(3);
-     * // => [1, 2, 3]
-     *
-     * curried(1, 2, 3);
-     * // => [1, 2, 3]
-     *
-     * // Curried with placeholders.
-     * curried(1)(_, 3)(2);
-     * // => [1, 2, 3]
-     */
-    function curry(func, arity, guard) {
-      arity = guard ? undefined : arity;
-      var result = createWrap(func, WRAP_CURRY_FLAG, undefined, undefined, undefined, undefined, undefined, arity);
-      result.placeholder = curry.placeholder;
-      return result;
-    }
-
-    /**
-     * This method is like `_.curry` except that arguments are applied to `func`
-     * in the manner of `_.partialRight` instead of `_.partial`.
-     *
-     * The `_.curryRight.placeholder` value, which defaults to `_` in monolithic
-     * builds, may be used as a placeholder for provided arguments.
-     *
-     * **Note:** This method doesn't set the "length" property of curried functions.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Function
-     * @param {Function} func The function to curry.
-     * @param {number} [arity=func.length] The arity of `func`.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Function} Returns the new curried function.
-     * @example
-     *
-     * var abc = function(a, b, c) {
-     *   return [a, b, c];
-     * };
-     *
-     * var curried = _.curryRight(abc);
-     *
-     * curried(3)(2)(1);
-     * // => [1, 2, 3]
-     *
-     * curried(2, 3)(1);
-     * // => [1, 2, 3]
-     *
-     * curried(1, 2, 3);
-     * // => [1, 2, 3]
-     *
-     * // Curried with placeholders.
-     * curried(3)(1, _)(2);
-     * // => [1, 2, 3]
-     */
-    function curryRight(func, arity, guard) {
-      arity = guard ? undefined : arity;
-      var result = createWrap(func, WRAP_CURRY_RIGHT_FLAG, undefined, undefined, undefined, undefined, undefined, arity);
-      result.placeholder = curryRight.placeholder;
-      return result;
-    }
-
-    /**
-     * Creates a debounced function that delays invoking `func` until after `wait`
-     * milliseconds have elapsed since the last time the debounced function was
-     * invoked. The debounced function comes with a `cancel` method to cancel
-     * delayed `func` invocations and a `flush` method to immediately invoke them.
-     * Provide `options` to indicate whether `func` should be invoked on the
-     * leading and/or trailing edge of the `wait` timeout. The `func` is invoked
-     * with the last arguments provided to the debounced function. Subsequent
-     * calls to the debounced function return the result of the last `func`
-     * invocation.
-     *
-     * **Note:** If `leading` and `trailing` options are `true`, `func` is
-     * invoked on the trailing edge of the timeout only if the debounced function
-     * is invoked more than once during the `wait` timeout.
-     *
-     * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
-     * until to the next tick, similar to `setTimeout` with a timeout of `0`.
-     *
-     * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
-     * for details over the differences between `_.debounce` and `_.throttle`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to debounce.
-     * @param {number} [wait=0] The number of milliseconds to delay.
-     * @param {Object} [options={}] The options object.
-     * @param {boolean} [options.leading=false]
-     *  Specify invoking on the leading edge of the timeout.
-     * @param {number} [options.maxWait]
-     *  The maximum time `func` is allowed to be delayed before it's invoked.
-     * @param {boolean} [options.trailing=true]
-     *  Specify invoking on the trailing edge of the timeout.
-     * @returns {Function} Returns the new debounced function.
-     * @example
-     *
-     * // Avoid costly calculations while the window size is in flux.
-     * jQuery(window).on('resize', _.debounce(calculateLayout, 150));
-     *
-     * // Invoke `sendMail` when clicked, debouncing subsequent calls.
-     * jQuery(element).on('click', _.debounce(sendMail, 300, {
-     *   'leading': true,
-     *   'trailing': false
-     * }));
-     *
-     * // Ensure `batchLog` is invoked once after 1 second of debounced calls.
-     * var debounced = _.debounce(batchLog, 250, { 'maxWait': 1000 });
-     * var source = new EventSource('/stream');
-     * jQuery(source).on('message', debounced);
-     *
-     * // Cancel the trailing debounced invocation.
-     * jQuery(window).on('popstate', debounced.cancel);
-     */
-    function debounce(func, wait, options) {
-      var lastArgs,
-          lastThis,
-          maxWait,
-          result,
-          timerId,
-          lastCallTime,
-          lastInvokeTime = 0,
-          leading = false,
-          maxing = false,
-          trailing = true;
-
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      wait = toNumber(wait) || 0;
-      if (isObject(options)) {
-        leading = !!options.leading;
-        maxing = 'maxWait' in options;
-        maxWait = maxing ? nativeMax(toNumber(options.maxWait) || 0, wait) : maxWait;
-        trailing = 'trailing' in options ? !!options.trailing : trailing;
-      }
-
-      function invokeFunc(time) {
-        var args = lastArgs,
-            thisArg = lastThis;
-
-        lastArgs = lastThis = undefined;
-        lastInvokeTime = time;
-        result = func.apply(thisArg, args);
-        return result;
-      }
-
-      function leadingEdge(time) {
-        // Reset any `maxWait` timer.
-        lastInvokeTime = time;
-        // Start the timer for the trailing edge.
-        timerId = setTimeout(timerExpired, wait);
-        // Invoke the leading edge.
-        return leading ? invokeFunc(time) : result;
-      }
-
-      function remainingWait(time) {
-        var timeSinceLastCall = time - lastCallTime,
-            timeSinceLastInvoke = time - lastInvokeTime,
-            timeWaiting = wait - timeSinceLastCall;
-
-        return maxing
-          ? nativeMin(timeWaiting, maxWait - timeSinceLastInvoke)
-          : timeWaiting;
-      }
-
-      function shouldInvoke(time) {
-        var timeSinceLastCall = time - lastCallTime,
-            timeSinceLastInvoke = time - lastInvokeTime;
-
-        // Either this is the first call, activity has stopped and we're at the
-        // trailing edge, the system time has gone backwards and we're treating
-        // it as the trailing edge, or we've hit the `maxWait` limit.
-        return (lastCallTime === undefined || (timeSinceLastCall >= wait) ||
-          (timeSinceLastCall < 0) || (maxing && timeSinceLastInvoke >= maxWait));
-      }
-
-      function timerExpired() {
-        var time = now();
-        if (shouldInvoke(time)) {
-          return trailingEdge(time);
-        }
-        // Restart the timer.
-        timerId = setTimeout(timerExpired, remainingWait(time));
-      }
-
-      function trailingEdge(time) {
-        timerId = undefined;
-
-        // Only invoke if we have `lastArgs` which means `func` has been
-        // debounced at least once.
-        if (trailing && lastArgs) {
-          return invokeFunc(time);
-        }
-        lastArgs = lastThis = undefined;
-        return result;
-      }
-
-      function cancel() {
-        if (timerId !== undefined) {
-          clearTimeout(timerId);
-        }
-        lastInvokeTime = 0;
-        lastArgs = lastCallTime = lastThis = timerId = undefined;
-      }
-
-      function flush() {
-        return timerId === undefined ? result : trailingEdge(now());
-      }
-
-      function debounced() {
-        var time = now(),
-            isInvoking = shouldInvoke(time);
-
-        lastArgs = arguments;
-        lastThis = this;
-        lastCallTime = time;
-
-        if (isInvoking) {
-          if (timerId === undefined) {
-            return leadingEdge(lastCallTime);
-          }
-          if (maxing) {
-            // Handle invocations in a tight loop.
-            timerId = setTimeout(timerExpired, wait);
-            return invokeFunc(lastCallTime);
-          }
-        }
-        if (timerId === undefined) {
-          timerId = setTimeout(timerExpired, wait);
-        }
-        return result;
-      }
-      debounced.cancel = cancel;
-      debounced.flush = flush;
-      return debounced;
-    }
-
-    /**
-     * Defers invoking the `func` until the current call stack has cleared. Any
-     * additional arguments are provided to `func` when it's invoked.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to defer.
-     * @param {...*} [args] The arguments to invoke `func` with.
-     * @returns {number} Returns the timer id.
-     * @example
-     *
-     * _.defer(function(text) {
-     *   console.log(text);
-     * }, 'deferred');
-     * // => Logs 'deferred' after one millisecond.
-     */
-    var defer = baseRest(function(func, args) {
-      return baseDelay(func, 1, args);
-    });
-
-    /**
-     * Invokes `func` after `wait` milliseconds. Any additional arguments are
-     * provided to `func` when it's invoked.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to delay.
-     * @param {number} wait The number of milliseconds to delay invocation.
-     * @param {...*} [args] The arguments to invoke `func` with.
-     * @returns {number} Returns the timer id.
-     * @example
-     *
-     * _.delay(function(text) {
-     *   console.log(text);
-     * }, 1000, 'later');
-     * // => Logs 'later' after one second.
-     */
-    var delay = baseRest(function(func, wait, args) {
-      return baseDelay(func, toNumber(wait) || 0, args);
-    });
-
-    /**
-     * Creates a function that invokes `func` with arguments reversed.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Function
-     * @param {Function} func The function to flip arguments for.
-     * @returns {Function} Returns the new flipped function.
-     * @example
-     *
-     * var flipped = _.flip(function() {
-     *   return _.toArray(arguments);
-     * });
-     *
-     * flipped('a', 'b', 'c', 'd');
-     * // => ['d', 'c', 'b', 'a']
-     */
-    function flip(func) {
-      return createWrap(func, WRAP_FLIP_FLAG);
-    }
-
-    /**
-     * Creates a function that memoizes the result of `func`. If `resolver` is
-     * provided, it determines the cache key for storing the result based on the
-     * arguments provided to the memoized function. By default, the first argument
-     * provided to the memoized function is used as the map cache key. The `func`
-     * is invoked with the `this` binding of the memoized function.
-     *
-     * **Note:** The cache is exposed as the `cache` property on the memoized
-     * function. Its creation may be customized by replacing the `_.memoize.Cache`
-     * constructor with one whose instances implement the
-     * [`Map`](http://ecma-international.org/ecma-262/7.0/#sec-properties-of-the-map-prototype-object)
-     * method interface of `clear`, `delete`, `get`, `has`, and `set`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to have its output memoized.
-     * @param {Function} [resolver] The function to resolve the cache key.
-     * @returns {Function} Returns the new memoized function.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': 2 };
-     * var other = { 'c': 3, 'd': 4 };
-     *
-     * var values = _.memoize(_.values);
-     * values(object);
-     * // => [1, 2]
-     *
-     * values(other);
-     * // => [3, 4]
-     *
-     * object.a = 2;
-     * values(object);
-     * // => [1, 2]
-     *
-     * // Modify the result cache.
-     * values.cache.set(object, ['a', 'b']);
-     * values(object);
-     * // => ['a', 'b']
-     *
-     * // Replace `_.memoize.Cache`.
-     * _.memoize.Cache = WeakMap;
-     */
-    function memoize(func, resolver) {
-      if (typeof func != 'function' || (resolver != null && typeof resolver != 'function')) {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      var memoized = function() {
-        var args = arguments,
-            key = resolver ? resolver.apply(this, args) : args[0],
-            cache = memoized.cache;
-
-        if (cache.has(key)) {
-          return cache.get(key);
-        }
-        var result = func.apply(this, args);
-        memoized.cache = cache.set(key, result) || cache;
-        return result;
-      };
-      memoized.cache = new (memoize.Cache || MapCache);
-      return memoized;
-    }
-
-    // Expose `MapCache`.
-    memoize.Cache = MapCache;
-
-    /**
-     * Creates a function that negates the result of the predicate `func`. The
-     * `func` predicate is invoked with the `this` binding and arguments of the
-     * created function.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Function
-     * @param {Function} predicate The predicate to negate.
-     * @returns {Function} Returns the new negated function.
-     * @example
-     *
-     * function isEven(n) {
-     *   return n % 2 == 0;
-     * }
-     *
-     * _.filter([1, 2, 3, 4, 5, 6], _.negate(isEven));
-     * // => [1, 3, 5]
-     */
-    function negate(predicate) {
-      if (typeof predicate != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      return function() {
-        var args = arguments;
-        switch (args.length) {
-          case 0: return !predicate.call(this);
-          case 1: return !predicate.call(this, args[0]);
-          case 2: return !predicate.call(this, args[0], args[1]);
-          case 3: return !predicate.call(this, args[0], args[1], args[2]);
-        }
-        return !predicate.apply(this, args);
-      };
-    }
-
-    /**
-     * Creates a function that is restricted to invoking `func` once. Repeat calls
-     * to the function return the value of the first invocation. The `func` is
-     * invoked with the `this` binding and arguments of the created function.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to restrict.
-     * @returns {Function} Returns the new restricted function.
-     * @example
-     *
-     * var initialize = _.once(createApplication);
-     * initialize();
-     * initialize();
-     * // => `createApplication` is invoked once
-     */
-    function once(func) {
-      return before(2, func);
-    }
-
-    /**
-     * Creates a function that invokes `func` with its arguments transformed.
-     *
-     * @static
-     * @since 4.0.0
-     * @memberOf _
-     * @category Function
-     * @param {Function} func The function to wrap.
-     * @param {...(Function|Function[])} [transforms=[_.identity]]
-     *  The argument transforms.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * function doubled(n) {
-     *   return n * 2;
-     * }
-     *
-     * function square(n) {
-     *   return n * n;
-     * }
-     *
-     * var func = _.overArgs(function(x, y) {
-     *   return [x, y];
-     * }, [square, doubled]);
-     *
-     * func(9, 3);
-     * // => [81, 6]
-     *
-     * func(10, 5);
-     * // => [100, 10]
-     */
-    var overArgs = castRest(function(func, transforms) {
-      transforms = (transforms.length == 1 && isArray(transforms[0]))
-        ? arrayMap(transforms[0], baseUnary(getIteratee()))
-        : arrayMap(baseFlatten(transforms, 1), baseUnary(getIteratee()));
-
-      var funcsLength = transforms.length;
-      return baseRest(function(args) {
-        var index = -1,
-            length = nativeMin(args.length, funcsLength);
-
-        while (++index < length) {
-          args[index] = transforms[index].call(this, args[index]);
-        }
-        return apply(func, this, args);
-      });
-    });
-
-    /**
-     * Creates a function that invokes `func` with `partials` prepended to the
-     * arguments it receives. This method is like `_.bind` except it does **not**
-     * alter the `this` binding.
-     *
-     * The `_.partial.placeholder` value, which defaults to `_` in monolithic
-     * builds, may be used as a placeholder for partially applied arguments.
-     *
-     * **Note:** This method doesn't set the "length" property of partially
-     * applied functions.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.2.0
-     * @category Function
-     * @param {Function} func The function to partially apply arguments to.
-     * @param {...*} [partials] The arguments to be partially applied.
-     * @returns {Function} Returns the new partially applied function.
-     * @example
-     *
-     * function greet(greeting, name) {
-     *   return greeting + ' ' + name;
-     * }
-     *
-     * var sayHelloTo = _.partial(greet, 'hello');
-     * sayHelloTo('fred');
-     * // => 'hello fred'
-     *
-     * // Partially applied with placeholders.
-     * var greetFred = _.partial(greet, _, 'fred');
-     * greetFred('hi');
-     * // => 'hi fred'
-     */
-    var partial = baseRest(function(func, partials) {
-      var holders = replaceHolders(partials, getHolder(partial));
-      return createWrap(func, WRAP_PARTIAL_FLAG, undefined, partials, holders);
-    });
-
-    /**
-     * This method is like `_.partial` except that partially applied arguments
-     * are appended to the arguments it receives.
-     *
-     * The `_.partialRight.placeholder` value, which defaults to `_` in monolithic
-     * builds, may be used as a placeholder for partially applied arguments.
-     *
-     * **Note:** This method doesn't set the "length" property of partially
-     * applied functions.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.0.0
-     * @category Function
-     * @param {Function} func The function to partially apply arguments to.
-     * @param {...*} [partials] The arguments to be partially applied.
-     * @returns {Function} Returns the new partially applied function.
-     * @example
-     *
-     * function greet(greeting, name) {
-     *   return greeting + ' ' + name;
-     * }
-     *
-     * var greetFred = _.partialRight(greet, 'fred');
-     * greetFred('hi');
-     * // => 'hi fred'
-     *
-     * // Partially applied with placeholders.
-     * var sayHelloTo = _.partialRight(greet, 'hello', _);
-     * sayHelloTo('fred');
-     * // => 'hello fred'
-     */
-    var partialRight = baseRest(function(func, partials) {
-      var holders = replaceHolders(partials, getHolder(partialRight));
-      return createWrap(func, WRAP_PARTIAL_RIGHT_FLAG, undefined, partials, holders);
-    });
-
-    /**
-     * Creates a function that invokes `func` with arguments arranged according
-     * to the specified `indexes` where the argument value at the first index is
-     * provided as the first argument, the argument value at the second index is
-     * provided as the second argument, and so on.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Function
-     * @param {Function} func The function to rearrange arguments for.
-     * @param {...(number|number[])} indexes The arranged argument indexes.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var rearged = _.rearg(function(a, b, c) {
-     *   return [a, b, c];
-     * }, [2, 0, 1]);
-     *
-     * rearged('b', 'c', 'a')
-     * // => ['a', 'b', 'c']
-     */
-    var rearg = flatRest(function(func, indexes) {
-      return createWrap(func, WRAP_REARG_FLAG, undefined, undefined, undefined, indexes);
-    });
-
-    /**
-     * Creates a function that invokes `func` with the `this` binding of the
-     * created function and arguments from `start` and beyond provided as
-     * an array.
-     *
-     * **Note:** This method is based on the
-     * [rest parameter](https://mdn.io/rest_parameters).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Function
-     * @param {Function} func The function to apply a rest parameter to.
-     * @param {number} [start=func.length-1] The start position of the rest parameter.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var say = _.rest(function(what, names) {
-     *   return what + ' ' + _.initial(names).join(', ') +
-     *     (_.size(names) > 1 ? ', & ' : '') + _.last(names);
-     * });
-     *
-     * say('hello', 'fred', 'barney', 'pebbles');
-     * // => 'hello fred, barney, & pebbles'
-     */
-    function rest(func, start) {
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      start = start === undefined ? start : toInteger(start);
-      return baseRest(func, start);
-    }
-
-    /**
-     * Creates a function that invokes `func` with the `this` binding of the
-     * create function and an array of arguments much like
-     * [`Function#apply`](http://www.ecma-international.org/ecma-262/7.0/#sec-function.prototype.apply).
-     *
-     * **Note:** This method is based on the
-     * [spread operator](https://mdn.io/spread_operator).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.2.0
-     * @category Function
-     * @param {Function} func The function to spread arguments over.
-     * @param {number} [start=0] The start position of the spread.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var say = _.spread(function(who, what) {
-     *   return who + ' says ' + what;
-     * });
-     *
-     * say(['fred', 'hello']);
-     * // => 'fred says hello'
-     *
-     * var numbers = Promise.all([
-     *   Promise.resolve(40),
-     *   Promise.resolve(36)
-     * ]);
-     *
-     * numbers.then(_.spread(function(x, y) {
-     *   return x + y;
-     * }));
-     * // => a Promise of 76
-     */
-    function spread(func, start) {
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      start = start == null ? 0 : nativeMax(toInteger(start), 0);
-      return baseRest(function(args) {
-        var array = args[start],
-            otherArgs = castSlice(args, 0, start);
-
-        if (array) {
-          arrayPush(otherArgs, array);
-        }
-        return apply(func, this, otherArgs);
-      });
-    }
-
-    /**
-     * Creates a throttled function that only invokes `func` at most once per
-     * every `wait` milliseconds. The throttled function comes with a `cancel`
-     * method to cancel delayed `func` invocations and a `flush` method to
-     * immediately invoke them. Provide `options` to indicate whether `func`
-     * should be invoked on the leading and/or trailing edge of the `wait`
-     * timeout. The `func` is invoked with the last arguments provided to the
-     * throttled function. Subsequent calls to the throttled function return the
-     * result of the last `func` invocation.
-     *
-     * **Note:** If `leading` and `trailing` options are `true`, `func` is
-     * invoked on the trailing edge of the timeout only if the throttled function
-     * is invoked more than once during the `wait` timeout.
-     *
-     * If `wait` is `0` and `leading` is `false`, `func` invocation is deferred
-     * until to the next tick, similar to `setTimeout` with a timeout of `0`.
-     *
-     * See [David Corbacho's article](https://css-tricks.com/debouncing-throttling-explained-examples/)
-     * for details over the differences between `_.throttle` and `_.debounce`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {Function} func The function to throttle.
-     * @param {number} [wait=0] The number of milliseconds to throttle invocations to.
-     * @param {Object} [options={}] The options object.
-     * @param {boolean} [options.leading=true]
-     *  Specify invoking on the leading edge of the timeout.
-     * @param {boolean} [options.trailing=true]
-     *  Specify invoking on the trailing edge of the timeout.
-     * @returns {Function} Returns the new throttled function.
-     * @example
-     *
-     * // Avoid excessively updating the position while scrolling.
-     * jQuery(window).on('scroll', _.throttle(updatePosition, 100));
-     *
-     * // Invoke `renewToken` when the click event is fired, but not more than once every 5 minutes.
-     * var throttled = _.throttle(renewToken, 300000, { 'trailing': false });
-     * jQuery(element).on('click', throttled);
-     *
-     * // Cancel the trailing throttled invocation.
-     * jQuery(window).on('popstate', throttled.cancel);
-     */
-    function throttle(func, wait, options) {
-      var leading = true,
-          trailing = true;
-
-      if (typeof func != 'function') {
-        throw new TypeError(FUNC_ERROR_TEXT);
-      }
-      if (isObject(options)) {
-        leading = 'leading' in options ? !!options.leading : leading;
-        trailing = 'trailing' in options ? !!options.trailing : trailing;
-      }
-      return debounce(func, wait, {
-        'leading': leading,
-        'maxWait': wait,
-        'trailing': trailing
-      });
-    }
-
-    /**
-     * Creates a function that accepts up to one argument, ignoring any
-     * additional arguments.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Function
-     * @param {Function} func The function to cap arguments for.
-     * @returns {Function} Returns the new capped function.
-     * @example
-     *
-     * _.map(['6', '8', '10'], _.unary(parseInt));
-     * // => [6, 8, 10]
-     */
-    function unary(func) {
-      return ary(func, 1);
-    }
-
-    /**
-     * Creates a function that provides `value` to `wrapper` as its first
-     * argument. Any additional arguments provided to the function are appended
-     * to those provided to the `wrapper`. The wrapper is invoked with the `this`
-     * binding of the created function.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Function
-     * @param {*} value The value to wrap.
-     * @param {Function} [wrapper=identity] The wrapper function.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var p = _.wrap(_.escape, function(func, text) {
-     *   return '<p>' + func(text) + '</p>';
-     * });
-     *
-     * p('fred, barney, & pebbles');
-     * // => '<p>fred, barney, &amp; pebbles</p>'
-     */
-    function wrap(value, wrapper) {
-      return partial(castFunction(wrapper), value);
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Casts `value` as an array if it's not one.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.4.0
-     * @category Lang
-     * @param {*} value The value to inspect.
-     * @returns {Array} Returns the cast array.
-     * @example
-     *
-     * _.castArray(1);
-     * // => [1]
-     *
-     * _.castArray({ 'a': 1 });
-     * // => [{ 'a': 1 }]
-     *
-     * _.castArray('abc');
-     * // => ['abc']
-     *
-     * _.castArray(null);
-     * // => [null]
-     *
-     * _.castArray(undefined);
-     * // => [undefined]
-     *
-     * _.castArray();
-     * // => []
-     *
-     * var array = [1, 2, 3];
-     * console.log(_.castArray(array) === array);
-     * // => true
-     */
-    function castArray() {
-      if (!arguments.length) {
-        return [];
-      }
-      var value = arguments[0];
-      return isArray(value) ? value : [value];
-    }
-
-    /**
-     * Creates a shallow clone of `value`.
-     *
-     * **Note:** This method is loosely based on the
-     * [structured clone algorithm](https://mdn.io/Structured_clone_algorithm)
-     * and supports cloning arrays, array buffers, booleans, date objects, maps,
-     * numbers, `Object` objects, regexes, sets, strings, symbols, and typed
-     * arrays. The own enumerable properties of `arguments` objects are cloned
-     * as plain objects. An empty object is returned for uncloneable values such
-     * as error objects, functions, DOM nodes, and WeakMaps.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to clone.
-     * @returns {*} Returns the cloned value.
-     * @see _.cloneDeep
-     * @example
-     *
-     * var objects = [{ 'a': 1 }, { 'b': 2 }];
-     *
-     * var shallow = _.clone(objects);
-     * console.log(shallow[0] === objects[0]);
-     * // => true
-     */
-    function clone(value) {
-      return baseClone(value, CLONE_SYMBOLS_FLAG);
-    }
-
-    /**
-     * This method is like `_.clone` except that it accepts `customizer` which
-     * is invoked to produce the cloned value. If `customizer` returns `undefined`,
-     * cloning is handled by the method instead. The `customizer` is invoked with
-     * up to four arguments; (value [, index|key, object, stack]).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to clone.
-     * @param {Function} [customizer] The function to customize cloning.
-     * @returns {*} Returns the cloned value.
-     * @see _.cloneDeepWith
-     * @example
-     *
-     * function customizer(value) {
-     *   if (_.isElement(value)) {
-     *     return value.cloneNode(false);
-     *   }
-     * }
-     *
-     * var el = _.cloneWith(document.body, customizer);
-     *
-     * console.log(el === document.body);
-     * // => false
-     * console.log(el.nodeName);
-     * // => 'BODY'
-     * console.log(el.childNodes.length);
-     * // => 0
-     */
-    function cloneWith(value, customizer) {
-      customizer = typeof customizer == 'function' ? customizer : undefined;
-      return baseClone(value, CLONE_SYMBOLS_FLAG, customizer);
-    }
-
-    /**
-     * This method is like `_.clone` except that it recursively clones `value`.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.0.0
-     * @category Lang
-     * @param {*} value The value to recursively clone.
-     * @returns {*} Returns the deep cloned value.
-     * @see _.clone
-     * @example
-     *
-     * var objects = [{ 'a': 1 }, { 'b': 2 }];
-     *
-     * var deep = _.cloneDeep(objects);
-     * console.log(deep[0] === objects[0]);
-     * // => false
-     */
-    function cloneDeep(value) {
-      return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG);
-    }
-
-    /**
-     * This method is like `_.cloneWith` except that it recursively clones `value`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to recursively clone.
-     * @param {Function} [customizer] The function to customize cloning.
-     * @returns {*} Returns the deep cloned value.
-     * @see _.cloneWith
-     * @example
-     *
-     * function customizer(value) {
-     *   if (_.isElement(value)) {
-     *     return value.cloneNode(true);
-     *   }
-     * }
-     *
-     * var el = _.cloneDeepWith(document.body, customizer);
-     *
-     * console.log(el === document.body);
-     * // => false
-     * console.log(el.nodeName);
-     * // => 'BODY'
-     * console.log(el.childNodes.length);
-     * // => 20
-     */
-    function cloneDeepWith(value, customizer) {
-      customizer = typeof customizer == 'function' ? customizer : undefined;
-      return baseClone(value, CLONE_DEEP_FLAG | CLONE_SYMBOLS_FLAG, customizer);
-    }
-
-    /**
-     * Checks if `object` conforms to `source` by invoking the predicate
-     * properties of `source` with the corresponding property values of `object`.
-     *
-     * **Note:** This method is equivalent to `_.conforms` when `source` is
-     * partially applied.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.14.0
-     * @category Lang
-     * @param {Object} object The object to inspect.
-     * @param {Object} source The object of property predicates to conform to.
-     * @returns {boolean} Returns `true` if `object` conforms, else `false`.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': 2 };
-     *
-     * _.conformsTo(object, { 'b': function(n) { return n > 1; } });
-     * // => true
-     *
-     * _.conformsTo(object, { 'b': function(n) { return n > 2; } });
-     * // => false
-     */
-    function conformsTo(object, source) {
-      return source == null || baseConformsTo(object, source, keys(source));
-    }
-
-    /**
-     * Performs a
-     * [`SameValueZero`](http://ecma-international.org/ecma-262/7.0/#sec-samevaluezero)
-     * comparison between two values to determine if they are equivalent.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
-     * @example
-     *
-     * var object = { 'a': 1 };
-     * var other = { 'a': 1 };
-     *
-     * _.eq(object, object);
-     * // => true
-     *
-     * _.eq(object, other);
-     * // => false
-     *
-     * _.eq('a', 'a');
-     * // => true
-     *
-     * _.eq('a', Object('a'));
-     * // => false
-     *
-     * _.eq(NaN, NaN);
-     * // => true
-     */
-    function eq(value, other) {
-      return value === other || (value !== value && other !== other);
-    }
-
-    /**
-     * Checks if `value` is greater than `other`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.9.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if `value` is greater than `other`,
-     *  else `false`.
-     * @see _.lt
-     * @example
-     *
-     * _.gt(3, 1);
-     * // => true
-     *
-     * _.gt(3, 3);
-     * // => false
-     *
-     * _.gt(1, 3);
-     * // => false
-     */
-    var gt = createRelationalOperation(baseGt);
-
-    /**
-     * Checks if `value` is greater than or equal to `other`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.9.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if `value` is greater than or equal to
-     *  `other`, else `false`.
-     * @see _.lte
-     * @example
-     *
-     * _.gte(3, 1);
-     * // => true
-     *
-     * _.gte(3, 3);
-     * // => true
-     *
-     * _.gte(1, 3);
-     * // => false
-     */
-    var gte = createRelationalOperation(function(value, other) {
-      return value >= other;
-    });
-
-    /**
-     * Checks if `value` is likely an `arguments` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an `arguments` object,
-     *  else `false`.
-     * @example
-     *
-     * _.isArguments(function() { return arguments; }());
-     * // => true
-     *
-     * _.isArguments([1, 2, 3]);
-     * // => false
-     */
-    var isArguments = baseIsArguments(function() { return arguments; }()) ? baseIsArguments : function(value) {
-      return isObjectLike(value) && hasOwnProperty.call(value, 'callee') &&
-        !propertyIsEnumerable.call(value, 'callee');
-    };
-
-    /**
-     * Checks if `value` is classified as an `Array` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an array, else `false`.
-     * @example
-     *
-     * _.isArray([1, 2, 3]);
-     * // => true
-     *
-     * _.isArray(document.body.children);
-     * // => false
-     *
-     * _.isArray('abc');
-     * // => false
-     *
-     * _.isArray(_.noop);
-     * // => false
-     */
-    var isArray = Array.isArray;
-
-    /**
-     * Checks if `value` is classified as an `ArrayBuffer` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.3.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an array buffer, else `false`.
-     * @example
-     *
-     * _.isArrayBuffer(new ArrayBuffer(2));
-     * // => true
-     *
-     * _.isArrayBuffer(new Array(2));
-     * // => false
-     */
-    var isArrayBuffer = nodeIsArrayBuffer ? baseUnary(nodeIsArrayBuffer) : baseIsArrayBuffer;
-
-    /**
-     * Checks if `value` is array-like. A value is considered array-like if it's
-     * not a function and has a `value.length` that's an integer greater than or
-     * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
-     * @example
-     *
-     * _.isArrayLike([1, 2, 3]);
-     * // => true
-     *
-     * _.isArrayLike(document.body.children);
-     * // => true
-     *
-     * _.isArrayLike('abc');
-     * // => true
-     *
-     * _.isArrayLike(_.noop);
-     * // => false
-     */
-    function isArrayLike(value) {
-      return value != null && isLength(value.length) && !isFunction(value);
-    }
-
-    /**
-     * This method is like `_.isArrayLike` except that it also checks if `value`
-     * is an object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an array-like object,
-     *  else `false`.
-     * @example
-     *
-     * _.isArrayLikeObject([1, 2, 3]);
-     * // => true
-     *
-     * _.isArrayLikeObject(document.body.children);
-     * // => true
-     *
-     * _.isArrayLikeObject('abc');
-     * // => false
-     *
-     * _.isArrayLikeObject(_.noop);
-     * // => false
-     */
-    function isArrayLikeObject(value) {
-      return isObjectLike(value) && isArrayLike(value);
-    }
-
-    /**
-     * Checks if `value` is classified as a boolean primitive or object.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a boolean, else `false`.
-     * @example
-     *
-     * _.isBoolean(false);
-     * // => true
-     *
-     * _.isBoolean(null);
-     * // => false
-     */
-    function isBoolean(value) {
-      return value === true || value === false ||
-        (isObjectLike(value) && baseGetTag(value) == boolTag);
-    }
-
-    /**
-     * Checks if `value` is a buffer.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.3.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
-     * @example
-     *
-     * _.isBuffer(new Buffer(2));
-     * // => true
-     *
-     * _.isBuffer(new Uint8Array(2));
-     * // => false
-     */
-    var isBuffer = nativeIsBuffer || stubFalse;
-
-    /**
-     * Checks if `value` is classified as a `Date` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a date object, else `false`.
-     * @example
-     *
-     * _.isDate(new Date);
-     * // => true
-     *
-     * _.isDate('Mon April 23 2012');
-     * // => false
-     */
-    var isDate = nodeIsDate ? baseUnary(nodeIsDate) : baseIsDate;
-
-    /**
-     * Checks if `value` is likely a DOM element.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a DOM element, else `false`.
-     * @example
-     *
-     * _.isElement(document.body);
-     * // => true
-     *
-     * _.isElement('<body>');
-     * // => false
-     */
-    function isElement(value) {
-      return isObjectLike(value) && value.nodeType === 1 && !isPlainObject(value);
-    }
-
-    /**
-     * Checks if `value` is an empty object, collection, map, or set.
-     *
-     * Objects are considered empty if they have no own enumerable string keyed
-     * properties.
-     *
-     * Array-like values such as `arguments` objects, arrays, buffers, strings, or
-     * jQuery-like collections are considered empty if they have a `length` of `0`.
-     * Similarly, maps and sets are considered empty if they have a `size` of `0`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is empty, else `false`.
-     * @example
-     *
-     * _.isEmpty(null);
-     * // => true
-     *
-     * _.isEmpty(true);
-     * // => true
-     *
-     * _.isEmpty(1);
-     * // => true
-     *
-     * _.isEmpty([1, 2, 3]);
-     * // => false
-     *
-     * _.isEmpty({ 'a': 1 });
-     * // => false
-     */
-    function isEmpty(value) {
-      if (value == null) {
-        return true;
-      }
-      if (isArrayLike(value) &&
-          (isArray(value) || typeof value == 'string' || typeof value.splice == 'function' ||
-            isBuffer(value) || isTypedArray(value) || isArguments(value))) {
-        return !value.length;
-      }
-      var tag = getTag(value);
-      if (tag == mapTag || tag == setTag) {
-        return !value.size;
-      }
-      if (isPrototype(value)) {
-        return !baseKeys(value).length;
-      }
-      for (var key in value) {
-        if (hasOwnProperty.call(value, key)) {
-          return false;
-        }
-      }
-      return true;
-    }
-
-    /**
-     * Performs a deep comparison between two values to determine if they are
-     * equivalent.
-     *
-     * **Note:** This method supports comparing arrays, array buffers, booleans,
-     * date objects, error objects, maps, numbers, `Object` objects, regexes,
-     * sets, strings, symbols, and typed arrays. `Object` objects are compared
-     * by their own, not inherited, enumerable properties. Functions and DOM
-     * nodes are compared by strict equality, i.e. `===`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
-     * @example
-     *
-     * var object = { 'a': 1 };
-     * var other = { 'a': 1 };
-     *
-     * _.isEqual(object, other);
-     * // => true
-     *
-     * object === other;
-     * // => false
-     */
-    function isEqual(value, other) {
-      return baseIsEqual(value, other);
-    }
-
-    /**
-     * This method is like `_.isEqual` except that it accepts `customizer` which
-     * is invoked to compare values. If `customizer` returns `undefined`, comparisons
-     * are handled by the method instead. The `customizer` is invoked with up to
-     * six arguments: (objValue, othValue [, index|key, object, other, stack]).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @param {Function} [customizer] The function to customize comparisons.
-     * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
-     * @example
-     *
-     * function isGreeting(value) {
-     *   return /^h(?:i|ello)$/.test(value);
-     * }
-     *
-     * function customizer(objValue, othValue) {
-     *   if (isGreeting(objValue) && isGreeting(othValue)) {
-     *     return true;
-     *   }
-     * }
-     *
-     * var array = ['hello', 'goodbye'];
-     * var other = ['hi', 'goodbye'];
-     *
-     * _.isEqualWith(array, other, customizer);
-     * // => true
-     */
-    function isEqualWith(value, other, customizer) {
-      customizer = typeof customizer == 'function' ? customizer : undefined;
-      var result = customizer ? customizer(value, other) : undefined;
-      return result === undefined ? baseIsEqual(value, other, undefined, customizer) : !!result;
-    }
-
-    /**
-     * Checks if `value` is an `Error`, `EvalError`, `RangeError`, `ReferenceError`,
-     * `SyntaxError`, `TypeError`, or `URIError` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an error object, else `false`.
-     * @example
-     *
-     * _.isError(new Error);
-     * // => true
-     *
-     * _.isError(Error);
-     * // => false
-     */
-    function isError(value) {
-      if (!isObjectLike(value)) {
-        return false;
-      }
-      var tag = baseGetTag(value);
-      return tag == errorTag || tag == domExcTag ||
-        (typeof value.message == 'string' && typeof value.name == 'string' && !isPlainObject(value));
-    }
-
-    /**
-     * Checks if `value` is a finite primitive number.
-     *
-     * **Note:** This method is based on
-     * [`Number.isFinite`](https://mdn.io/Number/isFinite).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a finite number, else `false`.
-     * @example
-     *
-     * _.isFinite(3);
-     * // => true
-     *
-     * _.isFinite(Number.MIN_VALUE);
-     * // => true
-     *
-     * _.isFinite(Infinity);
-     * // => false
-     *
-     * _.isFinite('3');
-     * // => false
-     */
-    function isFinite(value) {
-      return typeof value == 'number' && nativeIsFinite(value);
-    }
-
-    /**
-     * Checks if `value` is classified as a `Function` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a function, else `false`.
-     * @example
-     *
-     * _.isFunction(_);
-     * // => true
-     *
-     * _.isFunction(/abc/);
-     * // => false
-     */
-    function isFunction(value) {
-      if (!isObject(value)) {
-        return false;
-      }
-      // The use of `Object#toString` avoids issues with the `typeof` operator
-      // in Safari 9 which returns 'object' for typed arrays and other constructors.
-      var tag = baseGetTag(value);
-      return tag == funcTag || tag == genTag || tag == asyncTag || tag == proxyTag;
-    }
-
-    /**
-     * Checks if `value` is an integer.
-     *
-     * **Note:** This method is based on
-     * [`Number.isInteger`](https://mdn.io/Number/isInteger).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an integer, else `false`.
-     * @example
-     *
-     * _.isInteger(3);
-     * // => true
-     *
-     * _.isInteger(Number.MIN_VALUE);
-     * // => false
-     *
-     * _.isInteger(Infinity);
-     * // => false
-     *
-     * _.isInteger('3');
-     * // => false
-     */
-    function isInteger(value) {
-      return typeof value == 'number' && value == toInteger(value);
-    }
-
-    /**
-     * Checks if `value` is a valid array-like length.
-     *
-     * **Note:** This method is loosely based on
-     * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
-     * @example
-     *
-     * _.isLength(3);
-     * // => true
-     *
-     * _.isLength(Number.MIN_VALUE);
-     * // => false
-     *
-     * _.isLength(Infinity);
-     * // => false
-     *
-     * _.isLength('3');
-     * // => false
-     */
-    function isLength(value) {
-      return typeof value == 'number' &&
-        value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-    }
-
-    /**
-     * Checks if `value` is the
-     * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
-     * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is an object, else `false`.
-     * @example
-     *
-     * _.isObject({});
-     * // => true
-     *
-     * _.isObject([1, 2, 3]);
-     * // => true
-     *
-     * _.isObject(_.noop);
-     * // => true
-     *
-     * _.isObject(null);
-     * // => false
-     */
-    function isObject(value) {
-      var type = typeof value;
-      return value != null && (type == 'object' || type == 'function');
-    }
-
-    /**
-     * Checks if `value` is object-like. A value is object-like if it's not `null`
-     * and has a `typeof` result of "object".
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
-     * @example
-     *
-     * _.isObjectLike({});
-     * // => true
-     *
-     * _.isObjectLike([1, 2, 3]);
-     * // => true
-     *
-     * _.isObjectLike(_.noop);
-     * // => false
-     *
-     * _.isObjectLike(null);
-     * // => false
-     */
-    function isObjectLike(value) {
-      return value != null && typeof value == 'object';
-    }
-
-    /**
-     * Checks if `value` is classified as a `Map` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.3.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a map, else `false`.
-     * @example
-     *
-     * _.isMap(new Map);
-     * // => true
-     *
-     * _.isMap(new WeakMap);
-     * // => false
-     */
-    var isMap = nodeIsMap ? baseUnary(nodeIsMap) : baseIsMap;
-
-    /**
-     * Performs a partial deep comparison between `object` and `source` to
-     * determine if `object` contains equivalent property values.
-     *
-     * **Note:** This method is equivalent to `_.matches` when `source` is
-     * partially applied.
-     *
-     * Partial comparisons will match empty array and empty object `source`
-     * values against any array or object value, respectively. See `_.isEqual`
-     * for a list of supported value comparisons.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Lang
-     * @param {Object} object The object to inspect.
-     * @param {Object} source The object of property values to match.
-     * @returns {boolean} Returns `true` if `object` is a match, else `false`.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': 2 };
-     *
-     * _.isMatch(object, { 'b': 2 });
-     * // => true
-     *
-     * _.isMatch(object, { 'b': 1 });
-     * // => false
-     */
-    function isMatch(object, source) {
-      return object === source || baseIsMatch(object, source, getMatchData(source));
-    }
-
-    /**
-     * This method is like `_.isMatch` except that it accepts `customizer` which
-     * is invoked to compare values. If `customizer` returns `undefined`, comparisons
-     * are handled by the method instead. The `customizer` is invoked with five
-     * arguments: (objValue, srcValue, index|key, object, source).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {Object} object The object to inspect.
-     * @param {Object} source The object of property values to match.
-     * @param {Function} [customizer] The function to customize comparisons.
-     * @returns {boolean} Returns `true` if `object` is a match, else `false`.
-     * @example
-     *
-     * function isGreeting(value) {
-     *   return /^h(?:i|ello)$/.test(value);
-     * }
-     *
-     * function customizer(objValue, srcValue) {
-     *   if (isGreeting(objValue) && isGreeting(srcValue)) {
-     *     return true;
-     *   }
-     * }
-     *
-     * var object = { 'greeting': 'hello' };
-     * var source = { 'greeting': 'hi' };
-     *
-     * _.isMatchWith(object, source, customizer);
-     * // => true
-     */
-    function isMatchWith(object, source, customizer) {
-      customizer = typeof customizer == 'function' ? customizer : undefined;
-      return baseIsMatch(object, source, getMatchData(source), customizer);
-    }
-
-    /**
-     * Checks if `value` is `NaN`.
-     *
-     * **Note:** This method is based on
-     * [`Number.isNaN`](https://mdn.io/Number/isNaN) and is not the same as
-     * global [`isNaN`](https://mdn.io/isNaN) which returns `true` for
-     * `undefined` and other non-number values.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is `NaN`, else `false`.
-     * @example
-     *
-     * _.isNaN(NaN);
-     * // => true
-     *
-     * _.isNaN(new Number(NaN));
-     * // => true
-     *
-     * isNaN(undefined);
-     * // => true
-     *
-     * _.isNaN(undefined);
-     * // => false
-     */
-    function isNaN(value) {
-      // An `NaN` primitive is the only value that is not equal to itself.
-      // Perform the `toStringTag` check first to avoid errors with some
-      // ActiveX objects in IE.
-      return isNumber(value) && value != +value;
-    }
-
-    /**
-     * Checks if `value` is a pristine native function.
-     *
-     * **Note:** This method can't reliably detect native functions in the presence
-     * of the core-js package because core-js circumvents this kind of detection.
-     * Despite multiple requests, the core-js maintainer has made it clear: any
-     * attempt to fix the detection will be obstructed. As a result, we're left
-     * with little choice but to throw an error. Unfortunately, this also affects
-     * packages, like [babel-polyfill](https://www.npmjs.com/package/babel-polyfill),
-     * which rely on core-js.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a native function,
-     *  else `false`.
-     * @example
-     *
-     * _.isNative(Array.prototype.push);
-     * // => true
-     *
-     * _.isNative(_);
-     * // => false
-     */
-    function isNative(value) {
-      if (isMaskable(value)) {
-        throw new Error(CORE_ERROR_TEXT);
-      }
-      return baseIsNative(value);
-    }
-
-    /**
-     * Checks if `value` is `null`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is `null`, else `false`.
-     * @example
-     *
-     * _.isNull(null);
-     * // => true
-     *
-     * _.isNull(void 0);
-     * // => false
-     */
-    function isNull(value) {
-      return value === null;
-    }
-
-    /**
-     * Checks if `value` is `null` or `undefined`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is nullish, else `false`.
-     * @example
-     *
-     * _.isNil(null);
-     * // => true
-     *
-     * _.isNil(void 0);
-     * // => true
-     *
-     * _.isNil(NaN);
-     * // => false
-     */
-    function isNil(value) {
-      return value == null;
-    }
-
-    /**
-     * Checks if `value` is classified as a `Number` primitive or object.
-     *
-     * **Note:** To exclude `Infinity`, `-Infinity`, and `NaN`, which are
-     * classified as numbers, use the `_.isFinite` method.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a number, else `false`.
-     * @example
-     *
-     * _.isNumber(3);
-     * // => true
-     *
-     * _.isNumber(Number.MIN_VALUE);
-     * // => true
-     *
-     * _.isNumber(Infinity);
-     * // => true
-     *
-     * _.isNumber('3');
-     * // => false
-     */
-    function isNumber(value) {
-      return typeof value == 'number' ||
-        (isObjectLike(value) && baseGetTag(value) == numberTag);
-    }
-
-    /**
-     * Checks if `value` is a plain object, that is, an object created by the
-     * `Object` constructor or one with a `[[Prototype]]` of `null`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.8.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a plain object, else `false`.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     * }
-     *
-     * _.isPlainObject(new Foo);
-     * // => false
-     *
-     * _.isPlainObject([1, 2, 3]);
-     * // => false
-     *
-     * _.isPlainObject({ 'x': 0, 'y': 0 });
-     * // => true
-     *
-     * _.isPlainObject(Object.create(null));
-     * // => true
-     */
-    function isPlainObject(value) {
-      if (!isObjectLike(value) || baseGetTag(value) != objectTag) {
-        return false;
-      }
-      var proto = getPrototype(value);
-      if (proto === null) {
-        return true;
-      }
-      var Ctor = hasOwnProperty.call(proto, 'constructor') && proto.constructor;
-      return typeof Ctor == 'function' && Ctor instanceof Ctor &&
-        funcToString.call(Ctor) == objectCtorString;
-    }
-
-    /**
-     * Checks if `value` is classified as a `RegExp` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.1.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a regexp, else `false`.
-     * @example
-     *
-     * _.isRegExp(/abc/);
-     * // => true
-     *
-     * _.isRegExp('/abc/');
-     * // => false
-     */
-    var isRegExp = nodeIsRegExp ? baseUnary(nodeIsRegExp) : baseIsRegExp;
-
-    /**
-     * Checks if `value` is a safe integer. An integer is safe if it's an IEEE-754
-     * double precision number which isn't the result of a rounded unsafe integer.
-     *
-     * **Note:** This method is based on
-     * [`Number.isSafeInteger`](https://mdn.io/Number/isSafeInteger).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a safe integer, else `false`.
-     * @example
-     *
-     * _.isSafeInteger(3);
-     * // => true
-     *
-     * _.isSafeInteger(Number.MIN_VALUE);
-     * // => false
-     *
-     * _.isSafeInteger(Infinity);
-     * // => false
-     *
-     * _.isSafeInteger('3');
-     * // => false
-     */
-    function isSafeInteger(value) {
-      return isInteger(value) && value >= -MAX_SAFE_INTEGER && value <= MAX_SAFE_INTEGER;
-    }
-
-    /**
-     * Checks if `value` is classified as a `Set` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.3.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a set, else `false`.
-     * @example
-     *
-     * _.isSet(new Set);
-     * // => true
-     *
-     * _.isSet(new WeakSet);
-     * // => false
-     */
-    var isSet = nodeIsSet ? baseUnary(nodeIsSet) : baseIsSet;
-
-    /**
-     * Checks if `value` is classified as a `String` primitive or object.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a string, else `false`.
-     * @example
-     *
-     * _.isString('abc');
-     * // => true
-     *
-     * _.isString(1);
-     * // => false
-     */
-    function isString(value) {
-      return typeof value == 'string' ||
-        (!isArray(value) && isObjectLike(value) && baseGetTag(value) == stringTag);
-    }
-
-    /**
-     * Checks if `value` is classified as a `Symbol` primitive or object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a symbol, else `false`.
-     * @example
-     *
-     * _.isSymbol(Symbol.iterator);
-     * // => true
-     *
-     * _.isSymbol('abc');
-     * // => false
-     */
-    function isSymbol(value) {
-      return typeof value == 'symbol' ||
-        (isObjectLike(value) && baseGetTag(value) == symbolTag);
-    }
-
-    /**
-     * Checks if `value` is classified as a typed array.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a typed array, else `false`.
-     * @example
-     *
-     * _.isTypedArray(new Uint8Array);
-     * // => true
-     *
-     * _.isTypedArray([]);
-     * // => false
-     */
-    var isTypedArray = nodeIsTypedArray ? baseUnary(nodeIsTypedArray) : baseIsTypedArray;
-
-    /**
-     * Checks if `value` is `undefined`.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is `undefined`, else `false`.
-     * @example
-     *
-     * _.isUndefined(void 0);
-     * // => true
-     *
-     * _.isUndefined(null);
-     * // => false
-     */
-    function isUndefined(value) {
-      return value === undefined;
-    }
-
-    /**
-     * Checks if `value` is classified as a `WeakMap` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.3.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a weak map, else `false`.
-     * @example
-     *
-     * _.isWeakMap(new WeakMap);
-     * // => true
-     *
-     * _.isWeakMap(new Map);
-     * // => false
-     */
-    function isWeakMap(value) {
-      return isObjectLike(value) && getTag(value) == weakMapTag;
-    }
-
-    /**
-     * Checks if `value` is classified as a `WeakSet` object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.3.0
-     * @category Lang
-     * @param {*} value The value to check.
-     * @returns {boolean} Returns `true` if `value` is a weak set, else `false`.
-     * @example
-     *
-     * _.isWeakSet(new WeakSet);
-     * // => true
-     *
-     * _.isWeakSet(new Set);
-     * // => false
-     */
-    function isWeakSet(value) {
-      return isObjectLike(value) && baseGetTag(value) == weakSetTag;
-    }
-
-    /**
-     * Checks if `value` is less than `other`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.9.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if `value` is less than `other`,
-     *  else `false`.
-     * @see _.gt
-     * @example
-     *
-     * _.lt(1, 3);
-     * // => true
-     *
-     * _.lt(3, 3);
-     * // => false
-     *
-     * _.lt(3, 1);
-     * // => false
-     */
-    var lt = createRelationalOperation(baseLt);
-
-    /**
-     * Checks if `value` is less than or equal to `other`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.9.0
-     * @category Lang
-     * @param {*} value The value to compare.
-     * @param {*} other The other value to compare.
-     * @returns {boolean} Returns `true` if `value` is less than or equal to
-     *  `other`, else `false`.
-     * @see _.gte
-     * @example
-     *
-     * _.lte(1, 3);
-     * // => true
-     *
-     * _.lte(3, 3);
-     * // => true
-     *
-     * _.lte(3, 1);
-     * // => false
-     */
-    var lte = createRelationalOperation(function(value, other) {
-      return value <= other;
-    });
-
-    /**
-     * Converts `value` to an array.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {Array} Returns the converted array.
-     * @example
-     *
-     * _.toArray({ 'a': 1, 'b': 2 });
-     * // => [1, 2]
-     *
-     * _.toArray('abc');
-     * // => ['a', 'b', 'c']
-     *
-     * _.toArray(1);
-     * // => []
-     *
-     * _.toArray(null);
-     * // => []
-     */
-    function toArray(value) {
-      if (!value) {
-        return [];
-      }
-      if (isArrayLike(value)) {
-        return isString(value) ? stringToArray(value) : copyArray(value);
-      }
-      if (symIterator && value[symIterator]) {
-        return iteratorToArray(value[symIterator]());
-      }
-      var tag = getTag(value),
-          func = tag == mapTag ? mapToArray : (tag == setTag ? setToArray : values);
-
-      return func(value);
-    }
-
-    /**
-     * Converts `value` to a finite number.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.12.0
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {number} Returns the converted number.
-     * @example
-     *
-     * _.toFinite(3.2);
-     * // => 3.2
-     *
-     * _.toFinite(Number.MIN_VALUE);
-     * // => 5e-324
-     *
-     * _.toFinite(Infinity);
-     * // => 1.7976931348623157e+308
-     *
-     * _.toFinite('3.2');
-     * // => 3.2
-     */
-    function toFinite(value) {
-      if (!value) {
-        return value === 0 ? value : 0;
-      }
-      value = toNumber(value);
-      if (value === INFINITY || value === -INFINITY) {
-        var sign = (value < 0 ? -1 : 1);
-        return sign * MAX_INTEGER;
-      }
-      return value === value ? value : 0;
-    }
-
-    /**
-     * Converts `value` to an integer.
-     *
-     * **Note:** This method is loosely based on
-     * [`ToInteger`](http://www.ecma-international.org/ecma-262/7.0/#sec-tointeger).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {number} Returns the converted integer.
-     * @example
-     *
-     * _.toInteger(3.2);
-     * // => 3
-     *
-     * _.toInteger(Number.MIN_VALUE);
-     * // => 0
-     *
-     * _.toInteger(Infinity);
-     * // => 1.7976931348623157e+308
-     *
-     * _.toInteger('3.2');
-     * // => 3
-     */
-    function toInteger(value) {
-      var result = toFinite(value),
-          remainder = result % 1;
-
-      return result === result ? (remainder ? result - remainder : result) : 0;
-    }
-
-    /**
-     * Converts `value` to an integer suitable for use as the length of an
-     * array-like object.
-     *
-     * **Note:** This method is based on
-     * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {number} Returns the converted integer.
-     * @example
-     *
-     * _.toLength(3.2);
-     * // => 3
-     *
-     * _.toLength(Number.MIN_VALUE);
-     * // => 0
-     *
-     * _.toLength(Infinity);
-     * // => 4294967295
-     *
-     * _.toLength('3.2');
-     * // => 3
-     */
-    function toLength(value) {
-      return value ? baseClamp(toInteger(value), 0, MAX_ARRAY_LENGTH) : 0;
-    }
-
-    /**
-     * Converts `value` to a number.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to process.
-     * @returns {number} Returns the number.
-     * @example
-     *
-     * _.toNumber(3.2);
-     * // => 3.2
-     *
-     * _.toNumber(Number.MIN_VALUE);
-     * // => 5e-324
-     *
-     * _.toNumber(Infinity);
-     * // => Infinity
-     *
-     * _.toNumber('3.2');
-     * // => 3.2
-     */
-    function toNumber(value) {
-      if (typeof value == 'number') {
-        return value;
-      }
-      if (isSymbol(value)) {
-        return NAN;
-      }
-      if (isObject(value)) {
-        var other = typeof value.valueOf == 'function' ? value.valueOf() : value;
-        value = isObject(other) ? (other + '') : other;
-      }
-      if (typeof value != 'string') {
-        return value === 0 ? value : +value;
-      }
-      value = value.replace(reTrim, '');
-      var isBinary = reIsBinary.test(value);
-      return (isBinary || reIsOctal.test(value))
-        ? freeParseInt(value.slice(2), isBinary ? 2 : 8)
-        : (reIsBadHex.test(value) ? NAN : +value);
-    }
-
-    /**
-     * Converts `value` to a plain object flattening inherited enumerable string
-     * keyed properties of `value` to own properties of the plain object.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {Object} Returns the converted plain object.
-     * @example
-     *
-     * function Foo() {
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.assign({ 'a': 1 }, new Foo);
-     * // => { 'a': 1, 'b': 2 }
-     *
-     * _.assign({ 'a': 1 }, _.toPlainObject(new Foo));
-     * // => { 'a': 1, 'b': 2, 'c': 3 }
-     */
-    function toPlainObject(value) {
-      return copyObject(value, keysIn(value));
-    }
-
-    /**
-     * Converts `value` to a safe integer. A safe integer can be compared and
-     * represented correctly.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {number} Returns the converted integer.
-     * @example
-     *
-     * _.toSafeInteger(3.2);
-     * // => 3
-     *
-     * _.toSafeInteger(Number.MIN_VALUE);
-     * // => 0
-     *
-     * _.toSafeInteger(Infinity);
-     * // => 9007199254740991
-     *
-     * _.toSafeInteger('3.2');
-     * // => 3
-     */
-    function toSafeInteger(value) {
-      return value
-        ? baseClamp(toInteger(value), -MAX_SAFE_INTEGER, MAX_SAFE_INTEGER)
-        : (value === 0 ? value : 0);
-    }
-
-    /**
-     * Converts `value` to a string. An empty string is returned for `null`
-     * and `undefined` values. The sign of `-0` is preserved.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Lang
-     * @param {*} value The value to convert.
-     * @returns {string} Returns the converted string.
-     * @example
-     *
-     * _.toString(null);
-     * // => ''
-     *
-     * _.toString(-0);
-     * // => '-0'
-     *
-     * _.toString([1, 2, 3]);
-     * // => '1,2,3'
-     */
-    function toString(value) {
-      return value == null ? '' : baseToString(value);
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Assigns own enumerable string keyed properties of source objects to the
-     * destination object. Source objects are applied from left to right.
-     * Subsequent sources overwrite property assignments of previous sources.
-     *
-     * **Note:** This method mutates `object` and is loosely based on
-     * [`Object.assign`](https://mdn.io/Object/assign).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.10.0
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} [sources] The source objects.
-     * @returns {Object} Returns `object`.
-     * @see _.assignIn
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     * }
-     *
-     * function Bar() {
-     *   this.c = 3;
-     * }
-     *
-     * Foo.prototype.b = 2;
-     * Bar.prototype.d = 4;
-     *
-     * _.assign({ 'a': 0 }, new Foo, new Bar);
-     * // => { 'a': 1, 'c': 3 }
-     */
-    var assign = createAssigner(function(object, source) {
-      if (isPrototype(source) || isArrayLike(source)) {
-        copyObject(source, keys(source), object);
-        return;
-      }
-      for (var key in source) {
-        if (hasOwnProperty.call(source, key)) {
-          assignValue(object, key, source[key]);
-        }
-      }
-    });
-
-    /**
-     * This method is like `_.assign` except that it iterates over own and
-     * inherited source properties.
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @alias extend
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} [sources] The source objects.
-     * @returns {Object} Returns `object`.
-     * @see _.assign
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     * }
-     *
-     * function Bar() {
-     *   this.c = 3;
-     * }
-     *
-     * Foo.prototype.b = 2;
-     * Bar.prototype.d = 4;
-     *
-     * _.assignIn({ 'a': 0 }, new Foo, new Bar);
-     * // => { 'a': 1, 'b': 2, 'c': 3, 'd': 4 }
-     */
-    var assignIn = createAssigner(function(object, source) {
-      copyObject(source, keysIn(source), object);
-    });
-
-    /**
-     * This method is like `_.assignIn` except that it accepts `customizer`
-     * which is invoked to produce the assigned values. If `customizer` returns
-     * `undefined`, assignment is handled by the method instead. The `customizer`
-     * is invoked with five arguments: (objValue, srcValue, key, object, source).
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @alias extendWith
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} sources The source objects.
-     * @param {Function} [customizer] The function to customize assigned values.
-     * @returns {Object} Returns `object`.
-     * @see _.assignWith
-     * @example
-     *
-     * function customizer(objValue, srcValue) {
-     *   return _.isUndefined(objValue) ? srcValue : objValue;
-     * }
-     *
-     * var defaults = _.partialRight(_.assignInWith, customizer);
-     *
-     * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });
-     * // => { 'a': 1, 'b': 2 }
-     */
-    var assignInWith = createAssigner(function(object, source, srcIndex, customizer) {
-      copyObject(source, keysIn(source), object, customizer);
-    });
-
-    /**
-     * This method is like `_.assign` except that it accepts `customizer`
-     * which is invoked to produce the assigned values. If `customizer` returns
-     * `undefined`, assignment is handled by the method instead. The `customizer`
-     * is invoked with five arguments: (objValue, srcValue, key, object, source).
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} sources The source objects.
-     * @param {Function} [customizer] The function to customize assigned values.
-     * @returns {Object} Returns `object`.
-     * @see _.assignInWith
-     * @example
-     *
-     * function customizer(objValue, srcValue) {
-     *   return _.isUndefined(objValue) ? srcValue : objValue;
-     * }
-     *
-     * var defaults = _.partialRight(_.assignWith, customizer);
-     *
-     * defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });
-     * // => { 'a': 1, 'b': 2 }
-     */
-    var assignWith = createAssigner(function(object, source, srcIndex, customizer) {
-      copyObject(source, keys(source), object, customizer);
-    });
-
-    /**
-     * Creates an array of values corresponding to `paths` of `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.0.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {...(string|string[])} [paths] The property paths to pick.
-     * @returns {Array} Returns the picked values.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': 3 } }, 4] };
-     *
-     * _.at(object, ['a[0].b.c', 'a[1]']);
-     * // => [3, 4]
-     */
-    var at = flatRest(baseAt);
-
-    /**
-     * Creates an object that inherits from the `prototype` object. If a
-     * `properties` object is given, its own enumerable string keyed properties
-     * are assigned to the created object.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.3.0
-     * @category Object
-     * @param {Object} prototype The object to inherit from.
-     * @param {Object} [properties] The properties to assign to the object.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * function Shape() {
-     *   this.x = 0;
-     *   this.y = 0;
-     * }
-     *
-     * function Circle() {
-     *   Shape.call(this);
-     * }
-     *
-     * Circle.prototype = _.create(Shape.prototype, {
-     *   'constructor': Circle
-     * });
-     *
-     * var circle = new Circle;
-     * circle instanceof Circle;
-     * // => true
-     *
-     * circle instanceof Shape;
-     * // => true
-     */
-    function create(prototype, properties) {
-      var result = baseCreate(prototype);
-      return properties == null ? result : baseAssign(result, properties);
-    }
-
-    /**
-     * Assigns own and inherited enumerable string keyed properties of source
-     * objects to the destination object for all destination properties that
-     * resolve to `undefined`. Source objects are applied from left to right.
-     * Once a property is set, additional values of the same property are ignored.
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} [sources] The source objects.
-     * @returns {Object} Returns `object`.
-     * @see _.defaultsDeep
-     * @example
-     *
-     * _.defaults({ 'a': 1 }, { 'b': 2 }, { 'a': 3 });
-     * // => { 'a': 1, 'b': 2 }
-     */
-    var defaults = baseRest(function(object, sources) {
-      object = Object(object);
-
-      var index = -1;
-      var length = sources.length;
-      var guard = length > 2 ? sources[2] : undefined;
-
-      if (guard && isIterateeCall(sources[0], sources[1], guard)) {
-        length = 1;
-      }
-
-      while (++index < length) {
-        var source = sources[index];
-        var props = keysIn(source);
-        var propsIndex = -1;
-        var propsLength = props.length;
-
-        while (++propsIndex < propsLength) {
-          var key = props[propsIndex];
-          var value = object[key];
-
-          if (value === undefined ||
-              (eq(value, objectProto[key]) && !hasOwnProperty.call(object, key))) {
-            object[key] = source[key];
-          }
-        }
-      }
-
-      return object;
-    });
-
-    /**
-     * This method is like `_.defaults` except that it recursively assigns
-     * default properties.
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.10.0
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} [sources] The source objects.
-     * @returns {Object} Returns `object`.
-     * @see _.defaults
-     * @example
-     *
-     * _.defaultsDeep({ 'a': { 'b': 2 } }, { 'a': { 'b': 1, 'c': 3 } });
-     * // => { 'a': { 'b': 2, 'c': 3 } }
-     */
-    var defaultsDeep = baseRest(function(args) {
-      args.push(undefined, customDefaultsMerge);
-      return apply(mergeWith, undefined, args);
-    });
-
-    /**
-     * This method is like `_.find` except that it returns the key of the first
-     * element `predicate` returns truthy for instead of the element itself.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.1.0
-     * @category Object
-     * @param {Object} object The object to inspect.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {string|undefined} Returns the key of the matched element,
-     *  else `undefined`.
-     * @example
-     *
-     * var users = {
-     *   'barney':  { 'age': 36, 'active': true },
-     *   'fred':    { 'age': 40, 'active': false },
-     *   'pebbles': { 'age': 1,  'active': true }
-     * };
-     *
-     * _.findKey(users, function(o) { return o.age < 40; });
-     * // => 'barney' (iteration order is not guaranteed)
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.findKey(users, { 'age': 1, 'active': true });
-     * // => 'pebbles'
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.findKey(users, ['active', false]);
-     * // => 'fred'
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.findKey(users, 'active');
-     * // => 'barney'
-     */
-    function findKey(object, predicate) {
-      return baseFindKey(object, getIteratee(predicate, 3), baseForOwn);
-    }
-
-    /**
-     * This method is like `_.findKey` except that it iterates over elements of
-     * a collection in the opposite order.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Object
-     * @param {Object} object The object to inspect.
-     * @param {Function} [predicate=_.identity] The function invoked per iteration.
-     * @returns {string|undefined} Returns the key of the matched element,
-     *  else `undefined`.
-     * @example
-     *
-     * var users = {
-     *   'barney':  { 'age': 36, 'active': true },
-     *   'fred':    { 'age': 40, 'active': false },
-     *   'pebbles': { 'age': 1,  'active': true }
-     * };
-     *
-     * _.findLastKey(users, function(o) { return o.age < 40; });
-     * // => returns 'pebbles' assuming `_.findKey` returns 'barney'
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.findLastKey(users, { 'age': 36, 'active': true });
-     * // => 'barney'
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.findLastKey(users, ['active', false]);
-     * // => 'fred'
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.findLastKey(users, 'active');
-     * // => 'pebbles'
-     */
-    function findLastKey(object, predicate) {
-      return baseFindKey(object, getIteratee(predicate, 3), baseForOwnRight);
-    }
-
-    /**
-     * Iterates over own and inherited enumerable string keyed properties of an
-     * object and invokes `iteratee` for each property. The iteratee is invoked
-     * with three arguments: (value, key, object). Iteratee functions may exit
-     * iteration early by explicitly returning `false`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.3.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Object} Returns `object`.
-     * @see _.forInRight
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.forIn(new Foo, function(value, key) {
-     *   console.log(key);
-     * });
-     * // => Logs 'a', 'b', then 'c' (iteration order is not guaranteed).
-     */
-    function forIn(object, iteratee) {
-      return object == null
-        ? object
-        : baseFor(object, getIteratee(iteratee, 3), keysIn);
-    }
-
-    /**
-     * This method is like `_.forIn` except that it iterates over properties of
-     * `object` in the opposite order.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Object} Returns `object`.
-     * @see _.forIn
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.forInRight(new Foo, function(value, key) {
-     *   console.log(key);
-     * });
-     * // => Logs 'c', 'b', then 'a' assuming `_.forIn` logs 'a', 'b', then 'c'.
-     */
-    function forInRight(object, iteratee) {
-      return object == null
-        ? object
-        : baseForRight(object, getIteratee(iteratee, 3), keysIn);
-    }
-
-    /**
-     * Iterates over own enumerable string keyed properties of an object and
-     * invokes `iteratee` for each property. The iteratee is invoked with three
-     * arguments: (value, key, object). Iteratee functions may exit iteration
-     * early by explicitly returning `false`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.3.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Object} Returns `object`.
-     * @see _.forOwnRight
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.forOwn(new Foo, function(value, key) {
-     *   console.log(key);
-     * });
-     * // => Logs 'a' then 'b' (iteration order is not guaranteed).
-     */
-    function forOwn(object, iteratee) {
-      return object && baseForOwn(object, getIteratee(iteratee, 3));
-    }
-
-    /**
-     * This method is like `_.forOwn` except that it iterates over properties of
-     * `object` in the opposite order.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.0.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Object} Returns `object`.
-     * @see _.forOwn
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.forOwnRight(new Foo, function(value, key) {
-     *   console.log(key);
-     * });
-     * // => Logs 'b' then 'a' assuming `_.forOwn` logs 'a' then 'b'.
-     */
-    function forOwnRight(object, iteratee) {
-      return object && baseForOwnRight(object, getIteratee(iteratee, 3));
-    }
-
-    /**
-     * Creates an array of function property names from own enumerable properties
-     * of `object`.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The object to inspect.
-     * @returns {Array} Returns the function names.
-     * @see _.functionsIn
-     * @example
-     *
-     * function Foo() {
-     *   this.a = _.constant('a');
-     *   this.b = _.constant('b');
-     * }
-     *
-     * Foo.prototype.c = _.constant('c');
-     *
-     * _.functions(new Foo);
-     * // => ['a', 'b']
-     */
-    function functions(object) {
-      return object == null ? [] : baseFunctions(object, keys(object));
-    }
-
-    /**
-     * Creates an array of function property names from own and inherited
-     * enumerable properties of `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The object to inspect.
-     * @returns {Array} Returns the function names.
-     * @see _.functions
-     * @example
-     *
-     * function Foo() {
-     *   this.a = _.constant('a');
-     *   this.b = _.constant('b');
-     * }
-     *
-     * Foo.prototype.c = _.constant('c');
-     *
-     * _.functionsIn(new Foo);
-     * // => ['a', 'b', 'c']
-     */
-    function functionsIn(object) {
-      return object == null ? [] : baseFunctions(object, keysIn(object));
-    }
-
-    /**
-     * Gets the value at `path` of `object`. If the resolved value is
-     * `undefined`, the `defaultValue` is returned in its place.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.7.0
-     * @category Object
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path of the property to get.
-     * @param {*} [defaultValue] The value returned for `undefined` resolved values.
-     * @returns {*} Returns the resolved value.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': 3 } }] };
-     *
-     * _.get(object, 'a[0].b.c');
-     * // => 3
-     *
-     * _.get(object, ['a', '0', 'b', 'c']);
-     * // => 3
-     *
-     * _.get(object, 'a.b.c', 'default');
-     * // => 'default'
-     */
-    function get(object, path, defaultValue) {
-      var result = object == null ? undefined : baseGet(object, path);
-      return result === undefined ? defaultValue : result;
-    }
-
-    /**
-     * Checks if `path` is a direct property of `object`.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path to check.
-     * @returns {boolean} Returns `true` if `path` exists, else `false`.
-     * @example
-     *
-     * var object = { 'a': { 'b': 2 } };
-     * var other = _.create({ 'a': _.create({ 'b': 2 }) });
-     *
-     * _.has(object, 'a');
-     * // => true
-     *
-     * _.has(object, 'a.b');
-     * // => true
-     *
-     * _.has(object, ['a', 'b']);
-     * // => true
-     *
-     * _.has(other, 'a');
-     * // => false
-     */
-    function has(object, path) {
-      return object != null && hasPath(object, path, baseHas);
-    }
-
-    /**
-     * Checks if `path` is a direct or inherited property of `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path to check.
-     * @returns {boolean} Returns `true` if `path` exists, else `false`.
-     * @example
-     *
-     * var object = _.create({ 'a': _.create({ 'b': 2 }) });
-     *
-     * _.hasIn(object, 'a');
-     * // => true
-     *
-     * _.hasIn(object, 'a.b');
-     * // => true
-     *
-     * _.hasIn(object, ['a', 'b']);
-     * // => true
-     *
-     * _.hasIn(object, 'b');
-     * // => false
-     */
-    function hasIn(object, path) {
-      return object != null && hasPath(object, path, baseHasIn);
-    }
-
-    /**
-     * Creates an object composed of the inverted keys and values of `object`.
-     * If `object` contains duplicate values, subsequent values overwrite
-     * property assignments of previous values.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.7.0
-     * @category Object
-     * @param {Object} object The object to invert.
-     * @returns {Object} Returns the new inverted object.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': 2, 'c': 1 };
-     *
-     * _.invert(object);
-     * // => { '1': 'c', '2': 'b' }
-     */
-    var invert = createInverter(function(result, value, key) {
-      if (value != null &&
-          typeof value.toString != 'function') {
-        value = nativeObjectToString.call(value);
-      }
-
-      result[value] = key;
-    }, constant(identity));
-
-    /**
-     * This method is like `_.invert` except that the inverted object is generated
-     * from the results of running each element of `object` thru `iteratee`. The
-     * corresponding inverted value of each inverted key is an array of keys
-     * responsible for generating the inverted value. The iteratee is invoked
-     * with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.1.0
-     * @category Object
-     * @param {Object} object The object to invert.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {Object} Returns the new inverted object.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': 2, 'c': 1 };
-     *
-     * _.invertBy(object);
-     * // => { '1': ['a', 'c'], '2': ['b'] }
-     *
-     * _.invertBy(object, function(value) {
-     *   return 'group' + value;
-     * });
-     * // => { 'group1': ['a', 'c'], 'group2': ['b'] }
-     */
-    var invertBy = createInverter(function(result, value, key) {
-      if (value != null &&
-          typeof value.toString != 'function') {
-        value = nativeObjectToString.call(value);
-      }
-
-      if (hasOwnProperty.call(result, value)) {
-        result[value].push(key);
-      } else {
-        result[value] = [key];
-      }
-    }, getIteratee);
-
-    /**
-     * Invokes the method at `path` of `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path of the method to invoke.
-     * @param {...*} [args] The arguments to invoke the method with.
-     * @returns {*} Returns the result of the invoked method.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': [1, 2, 3, 4] } }] };
-     *
-     * _.invoke(object, 'a[0].b.c.slice', 1, 3);
-     * // => [2, 3]
-     */
-    var invoke = baseRest(baseInvoke);
-
-    /**
-     * Creates an array of the own enumerable property names of `object`.
-     *
-     * **Note:** Non-object values are coerced to objects. See the
-     * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
-     * for more details.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.keys(new Foo);
-     * // => ['a', 'b'] (iteration order is not guaranteed)
-     *
-     * _.keys('hi');
-     * // => ['0', '1']
-     */
-    function keys(object) {
-      return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
-    }
-
-    /**
-     * Creates an array of the own and inherited enumerable property names of `object`.
-     *
-     * **Note:** Non-object values are coerced to objects.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Object
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property names.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.keysIn(new Foo);
-     * // => ['a', 'b', 'c'] (iteration order is not guaranteed)
-     */
-    function keysIn(object) {
-      return isArrayLike(object) ? arrayLikeKeys(object, true) : baseKeysIn(object);
-    }
-
-    /**
-     * The opposite of `_.mapValues`; this method creates an object with the
-     * same values as `object` and keys generated by running each own enumerable
-     * string keyed property of `object` thru `iteratee`. The iteratee is invoked
-     * with three arguments: (value, key, object).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.8.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Object} Returns the new mapped object.
-     * @see _.mapValues
-     * @example
-     *
-     * _.mapKeys({ 'a': 1, 'b': 2 }, function(value, key) {
-     *   return key + value;
-     * });
-     * // => { 'a1': 1, 'b2': 2 }
-     */
-    function mapKeys(object, iteratee) {
-      var result = {};
-      iteratee = getIteratee(iteratee, 3);
-
-      baseForOwn(object, function(value, key, object) {
-        baseAssignValue(result, iteratee(value, key, object), value);
-      });
-      return result;
-    }
-
-    /**
-     * Creates an object with the same keys as `object` and values generated
-     * by running each own enumerable string keyed property of `object` thru
-     * `iteratee`. The iteratee is invoked with three arguments:
-     * (value, key, object).
-     *
-     * @static
-     * @memberOf _
-     * @since 2.4.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Object} Returns the new mapped object.
-     * @see _.mapKeys
-     * @example
-     *
-     * var users = {
-     *   'fred':    { 'user': 'fred',    'age': 40 },
-     *   'pebbles': { 'user': 'pebbles', 'age': 1 }
-     * };
-     *
-     * _.mapValues(users, function(o) { return o.age; });
-     * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.mapValues(users, 'age');
-     * // => { 'fred': 40, 'pebbles': 1 } (iteration order is not guaranteed)
-     */
-    function mapValues(object, iteratee) {
-      var result = {};
-      iteratee = getIteratee(iteratee, 3);
-
-      baseForOwn(object, function(value, key, object) {
-        baseAssignValue(result, key, iteratee(value, key, object));
-      });
-      return result;
-    }
-
-    /**
-     * This method is like `_.assign` except that it recursively merges own and
-     * inherited enumerable string keyed properties of source objects into the
-     * destination object. Source properties that resolve to `undefined` are
-     * skipped if a destination value exists. Array and plain object properties
-     * are merged recursively. Other objects and value types are overridden by
-     * assignment. Source objects are applied from left to right. Subsequent
-     * sources overwrite property assignments of previous sources.
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.5.0
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} [sources] The source objects.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * var object = {
-     *   'a': [{ 'b': 2 }, { 'd': 4 }]
-     * };
-     *
-     * var other = {
-     *   'a': [{ 'c': 3 }, { 'e': 5 }]
-     * };
-     *
-     * _.merge(object, other);
-     * // => { 'a': [{ 'b': 2, 'c': 3 }, { 'd': 4, 'e': 5 }] }
-     */
-    var merge = createAssigner(function(object, source, srcIndex) {
-      baseMerge(object, source, srcIndex);
-    });
-
-    /**
-     * This method is like `_.merge` except that it accepts `customizer` which
-     * is invoked to produce the merged values of the destination and source
-     * properties. If `customizer` returns `undefined`, merging is handled by the
-     * method instead. The `customizer` is invoked with six arguments:
-     * (objValue, srcValue, key, object, source, stack).
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The destination object.
-     * @param {...Object} sources The source objects.
-     * @param {Function} customizer The function to customize assigned values.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * function customizer(objValue, srcValue) {
-     *   if (_.isArray(objValue)) {
-     *     return objValue.concat(srcValue);
-     *   }
-     * }
-     *
-     * var object = { 'a': [1], 'b': [2] };
-     * var other = { 'a': [3], 'b': [4] };
-     *
-     * _.mergeWith(object, other, customizer);
-     * // => { 'a': [1, 3], 'b': [2, 4] }
-     */
-    var mergeWith = createAssigner(function(object, source, srcIndex, customizer) {
-      baseMerge(object, source, srcIndex, customizer);
-    });
-
-    /**
-     * The opposite of `_.pick`; this method creates an object composed of the
-     * own and inherited enumerable property paths of `object` that are not omitted.
-     *
-     * **Note:** This method is considerably slower than `_.pick`.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The source object.
-     * @param {...(string|string[])} [paths] The property paths to omit.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': '2', 'c': 3 };
-     *
-     * _.omit(object, ['a', 'c']);
-     * // => { 'b': '2' }
-     */
-    var omit = flatRest(function(object, paths) {
-      var result = {};
-      if (object == null) {
-        return result;
-      }
-      var isDeep = false;
-      paths = arrayMap(paths, function(path) {
-        path = castPath(path, object);
-        isDeep || (isDeep = path.length > 1);
-        return path;
-      });
-      copyObject(object, getAllKeysIn(object), result);
-      if (isDeep) {
-        result = baseClone(result, CLONE_DEEP_FLAG | CLONE_FLAT_FLAG | CLONE_SYMBOLS_FLAG, customOmitClone);
-      }
-      var length = paths.length;
-      while (length--) {
-        baseUnset(result, paths[length]);
-      }
-      return result;
-    });
-
-    /**
-     * The opposite of `_.pickBy`; this method creates an object composed of
-     * the own and inherited enumerable string keyed properties of `object` that
-     * `predicate` doesn't return truthy for. The predicate is invoked with two
-     * arguments: (value, key).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The source object.
-     * @param {Function} [predicate=_.identity] The function invoked per property.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': '2', 'c': 3 };
-     *
-     * _.omitBy(object, _.isNumber);
-     * // => { 'b': '2' }
-     */
-    function omitBy(object, predicate) {
-      return pickBy(object, negate(getIteratee(predicate)));
-    }
-
-    /**
-     * Creates an object composed of the picked `object` properties.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The source object.
-     * @param {...(string|string[])} [paths] The property paths to pick.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': '2', 'c': 3 };
-     *
-     * _.pick(object, ['a', 'c']);
-     * // => { 'a': 1, 'c': 3 }
-     */
-    var pick = flatRest(function(object, paths) {
-      return object == null ? {} : basePick(object, paths);
-    });
-
-    /**
-     * Creates an object composed of the `object` properties `predicate` returns
-     * truthy for. The predicate is invoked with two arguments: (value, key).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The source object.
-     * @param {Function} [predicate=_.identity] The function invoked per property.
-     * @returns {Object} Returns the new object.
-     * @example
-     *
-     * var object = { 'a': 1, 'b': '2', 'c': 3 };
-     *
-     * _.pickBy(object, _.isNumber);
-     * // => { 'a': 1, 'c': 3 }
-     */
-    function pickBy(object, predicate) {
-      if (object == null) {
-        return {};
-      }
-      var props = arrayMap(getAllKeysIn(object), function(prop) {
-        return [prop];
-      });
-      predicate = getIteratee(predicate);
-      return basePickBy(object, props, function(value, path) {
-        return predicate(value, path[0]);
-      });
-    }
-
-    /**
-     * This method is like `_.get` except that if the resolved value is a
-     * function it's invoked with the `this` binding of its parent object and
-     * its result is returned.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The object to query.
-     * @param {Array|string} path The path of the property to resolve.
-     * @param {*} [defaultValue] The value returned for `undefined` resolved values.
-     * @returns {*} Returns the resolved value.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c1': 3, 'c2': _.constant(4) } }] };
-     *
-     * _.result(object, 'a[0].b.c1');
-     * // => 3
-     *
-     * _.result(object, 'a[0].b.c2');
-     * // => 4
-     *
-     * _.result(object, 'a[0].b.c3', 'default');
-     * // => 'default'
-     *
-     * _.result(object, 'a[0].b.c3', _.constant('default'));
-     * // => 'default'
-     */
-    function result(object, path, defaultValue) {
-      path = castPath(path, object);
-
-      var index = -1,
-          length = path.length;
-
-      // Ensure the loop is entered when path is empty.
-      if (!length) {
-        length = 1;
-        object = undefined;
-      }
-      while (++index < length) {
-        var value = object == null ? undefined : object[toKey(path[index])];
-        if (value === undefined) {
-          index = length;
-          value = defaultValue;
-        }
-        object = isFunction(value) ? value.call(object) : value;
-      }
-      return object;
-    }
-
-    /**
-     * Sets the value at `path` of `object`. If a portion of `path` doesn't exist,
-     * it's created. Arrays are created for missing index properties while objects
-     * are created for all other missing properties. Use `_.setWith` to customize
-     * `path` creation.
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.7.0
-     * @category Object
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to set.
-     * @param {*} value The value to set.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': 3 } }] };
-     *
-     * _.set(object, 'a[0].b.c', 4);
-     * console.log(object.a[0].b.c);
-     * // => 4
-     *
-     * _.set(object, ['x', '0', 'y', 'z'], 5);
-     * console.log(object.x[0].y.z);
-     * // => 5
-     */
-    function set(object, path, value) {
-      return object == null ? object : baseSet(object, path, value);
-    }
-
-    /**
-     * This method is like `_.set` except that it accepts `customizer` which is
-     * invoked to produce the objects of `path`.  If `customizer` returns `undefined`
-     * path creation is handled by the method instead. The `customizer` is invoked
-     * with three arguments: (nsValue, key, nsObject).
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to set.
-     * @param {*} value The value to set.
-     * @param {Function} [customizer] The function to customize assigned values.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * var object = {};
-     *
-     * _.setWith(object, '[0][1]', 'a', Object);
-     * // => { '0': { '1': 'a' } }
-     */
-    function setWith(object, path, value, customizer) {
-      customizer = typeof customizer == 'function' ? customizer : undefined;
-      return object == null ? object : baseSet(object, path, value, customizer);
-    }
-
-    /**
-     * Creates an array of own enumerable string keyed-value pairs for `object`
-     * which can be consumed by `_.fromPairs`. If `object` is a map or set, its
-     * entries are returned.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @alias entries
-     * @category Object
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the key-value pairs.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.toPairs(new Foo);
-     * // => [['a', 1], ['b', 2]] (iteration order is not guaranteed)
-     */
-    var toPairs = createToPairs(keys);
-
-    /**
-     * Creates an array of own and inherited enumerable string keyed-value pairs
-     * for `object` which can be consumed by `_.fromPairs`. If `object` is a map
-     * or set, its entries are returned.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @alias entriesIn
-     * @category Object
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the key-value pairs.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.toPairsIn(new Foo);
-     * // => [['a', 1], ['b', 2], ['c', 3]] (iteration order is not guaranteed)
-     */
-    var toPairsIn = createToPairs(keysIn);
-
-    /**
-     * An alternative to `_.reduce`; this method transforms `object` to a new
-     * `accumulator` object which is the result of running each of its own
-     * enumerable string keyed properties thru `iteratee`, with each invocation
-     * potentially mutating the `accumulator` object. If `accumulator` is not
-     * provided, a new object with the same `[[Prototype]]` will be used. The
-     * iteratee is invoked with four arguments: (accumulator, value, key, object).
-     * Iteratee functions may exit iteration early by explicitly returning `false`.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.3.0
-     * @category Object
-     * @param {Object} object The object to iterate over.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @param {*} [accumulator] The custom accumulator value.
-     * @returns {*} Returns the accumulated value.
-     * @example
-     *
-     * _.transform([2, 3, 4], function(result, n) {
-     *   result.push(n *= n);
-     *   return n % 2 == 0;
-     * }, []);
-     * // => [4, 9]
-     *
-     * _.transform({ 'a': 1, 'b': 2, 'c': 1 }, function(result, value, key) {
-     *   (result[value] || (result[value] = [])).push(key);
-     * }, {});
-     * // => { '1': ['a', 'c'], '2': ['b'] }
-     */
-    function transform(object, iteratee, accumulator) {
-      var isArr = isArray(object),
-          isArrLike = isArr || isBuffer(object) || isTypedArray(object);
-
-      iteratee = getIteratee(iteratee, 4);
-      if (accumulator == null) {
-        var Ctor = object && object.constructor;
-        if (isArrLike) {
-          accumulator = isArr ? new Ctor : [];
-        }
-        else if (isObject(object)) {
-          accumulator = isFunction(Ctor) ? baseCreate(getPrototype(object)) : {};
-        }
-        else {
-          accumulator = {};
-        }
-      }
-      (isArrLike ? arrayEach : baseForOwn)(object, function(value, index, object) {
-        return iteratee(accumulator, value, index, object);
-      });
-      return accumulator;
-    }
-
-    /**
-     * Removes the property at `path` of `object`.
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Object
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to unset.
-     * @returns {boolean} Returns `true` if the property is deleted, else `false`.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': 7 } }] };
-     * _.unset(object, 'a[0].b.c');
-     * // => true
-     *
-     * console.log(object);
-     * // => { 'a': [{ 'b': {} }] };
-     *
-     * _.unset(object, ['a', '0', 'b', 'c']);
-     * // => true
-     *
-     * console.log(object);
-     * // => { 'a': [{ 'b': {} }] };
-     */
-    function unset(object, path) {
-      return object == null ? true : baseUnset(object, path);
-    }
-
-    /**
-     * This method is like `_.set` except that accepts `updater` to produce the
-     * value to set. Use `_.updateWith` to customize `path` creation. The `updater`
-     * is invoked with one argument: (value).
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.6.0
-     * @category Object
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to set.
-     * @param {Function} updater The function to produce the updated value.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * var object = { 'a': [{ 'b': { 'c': 3 } }] };
-     *
-     * _.update(object, 'a[0].b.c', function(n) { return n * n; });
-     * console.log(object.a[0].b.c);
-     * // => 9
-     *
-     * _.update(object, 'x[0].y.z', function(n) { return n ? n + 1 : 0; });
-     * console.log(object.x[0].y.z);
-     * // => 0
-     */
-    function update(object, path, updater) {
-      return object == null ? object : baseUpdate(object, path, castFunction(updater));
-    }
-
-    /**
-     * This method is like `_.update` except that it accepts `customizer` which is
-     * invoked to produce the objects of `path`.  If `customizer` returns `undefined`
-     * path creation is handled by the method instead. The `customizer` is invoked
-     * with three arguments: (nsValue, key, nsObject).
-     *
-     * **Note:** This method mutates `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.6.0
-     * @category Object
-     * @param {Object} object The object to modify.
-     * @param {Array|string} path The path of the property to set.
-     * @param {Function} updater The function to produce the updated value.
-     * @param {Function} [customizer] The function to customize assigned values.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * var object = {};
-     *
-     * _.updateWith(object, '[0][1]', _.constant('a'), Object);
-     * // => { '0': { '1': 'a' } }
-     */
-    function updateWith(object, path, updater, customizer) {
-      customizer = typeof customizer == 'function' ? customizer : undefined;
-      return object == null ? object : baseUpdate(object, path, castFunction(updater), customizer);
-    }
-
-    /**
-     * Creates an array of the own enumerable string keyed property values of `object`.
-     *
-     * **Note:** Non-object values are coerced to objects.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Object
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property values.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.values(new Foo);
-     * // => [1, 2] (iteration order is not guaranteed)
-     *
-     * _.values('hi');
-     * // => ['h', 'i']
-     */
-    function values(object) {
-      return object == null ? [] : baseValues(object, keys(object));
-    }
-
-    /**
-     * Creates an array of the own and inherited enumerable string keyed property
-     * values of `object`.
-     *
-     * **Note:** Non-object values are coerced to objects.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Object
-     * @param {Object} object The object to query.
-     * @returns {Array} Returns the array of property values.
-     * @example
-     *
-     * function Foo() {
-     *   this.a = 1;
-     *   this.b = 2;
-     * }
-     *
-     * Foo.prototype.c = 3;
-     *
-     * _.valuesIn(new Foo);
-     * // => [1, 2, 3] (iteration order is not guaranteed)
-     */
-    function valuesIn(object) {
-      return object == null ? [] : baseValues(object, keysIn(object));
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Clamps `number` within the inclusive `lower` and `upper` bounds.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Number
-     * @param {number} number The number to clamp.
-     * @param {number} [lower] The lower bound.
-     * @param {number} upper The upper bound.
-     * @returns {number} Returns the clamped number.
-     * @example
-     *
-     * _.clamp(-10, -5, 5);
-     * // => -5
-     *
-     * _.clamp(10, -5, 5);
-     * // => 5
-     */
-    function clamp(number, lower, upper) {
-      if (upper === undefined) {
-        upper = lower;
-        lower = undefined;
-      }
-      if (upper !== undefined) {
-        upper = toNumber(upper);
-        upper = upper === upper ? upper : 0;
-      }
-      if (lower !== undefined) {
-        lower = toNumber(lower);
-        lower = lower === lower ? lower : 0;
-      }
-      return baseClamp(toNumber(number), lower, upper);
-    }
-
-    /**
-     * Checks if `n` is between `start` and up to, but not including, `end`. If
-     * `end` is not specified, it's set to `start` with `start` then set to `0`.
-     * If `start` is greater than `end` the params are swapped to support
-     * negative ranges.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.3.0
-     * @category Number
-     * @param {number} number The number to check.
-     * @param {number} [start=0] The start of the range.
-     * @param {number} end The end of the range.
-     * @returns {boolean} Returns `true` if `number` is in the range, else `false`.
-     * @see _.range, _.rangeRight
-     * @example
-     *
-     * _.inRange(3, 2, 4);
-     * // => true
-     *
-     * _.inRange(4, 8);
-     * // => true
-     *
-     * _.inRange(4, 2);
-     * // => false
-     *
-     * _.inRange(2, 2);
-     * // => false
-     *
-     * _.inRange(1.2, 2);
-     * // => true
-     *
-     * _.inRange(5.2, 4);
-     * // => false
-     *
-     * _.inRange(-3, -2, -6);
-     * // => true
-     */
-    function inRange(number, start, end) {
-      start = toFinite(start);
-      if (end === undefined) {
-        end = start;
-        start = 0;
-      } else {
-        end = toFinite(end);
-      }
-      number = toNumber(number);
-      return baseInRange(number, start, end);
-    }
-
-    /**
-     * Produces a random number between the inclusive `lower` and `upper` bounds.
-     * If only one argument is provided a number between `0` and the given number
-     * is returned. If `floating` is `true`, or either `lower` or `upper` are
-     * floats, a floating-point number is returned instead of an integer.
-     *
-     * **Note:** JavaScript follows the IEEE-754 standard for resolving
-     * floating-point values which can produce unexpected results.
-     *
-     * @static
-     * @memberOf _
-     * @since 0.7.0
-     * @category Number
-     * @param {number} [lower=0] The lower bound.
-     * @param {number} [upper=1] The upper bound.
-     * @param {boolean} [floating] Specify returning a floating-point number.
-     * @returns {number} Returns the random number.
-     * @example
-     *
-     * _.random(0, 5);
-     * // => an integer between 0 and 5
-     *
-     * _.random(5);
-     * // => also an integer between 0 and 5
-     *
-     * _.random(5, true);
-     * // => a floating-point number between 0 and 5
-     *
-     * _.random(1.2, 5.2);
-     * // => a floating-point number between 1.2 and 5.2
-     */
-    function random(lower, upper, floating) {
-      if (floating && typeof floating != 'boolean' && isIterateeCall(lower, upper, floating)) {
-        upper = floating = undefined;
-      }
-      if (floating === undefined) {
-        if (typeof upper == 'boolean') {
-          floating = upper;
-          upper = undefined;
-        }
-        else if (typeof lower == 'boolean') {
-          floating = lower;
-          lower = undefined;
-        }
-      }
-      if (lower === undefined && upper === undefined) {
-        lower = 0;
-        upper = 1;
-      }
-      else {
-        lower = toFinite(lower);
-        if (upper === undefined) {
-          upper = lower;
-          lower = 0;
-        } else {
-          upper = toFinite(upper);
-        }
-      }
-      if (lower > upper) {
-        var temp = lower;
-        lower = upper;
-        upper = temp;
-      }
-      if (floating || lower % 1 || upper % 1) {
-        var rand = nativeRandom();
-        return nativeMin(lower + (rand * (upper - lower + freeParseFloat('1e-' + ((rand + '').length - 1)))), upper);
-      }
-      return baseRandom(lower, upper);
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Converts `string` to [camel case](https://en.wikipedia.org/wiki/CamelCase).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the camel cased string.
-     * @example
-     *
-     * _.camelCase('Foo Bar');
-     * // => 'fooBar'
-     *
-     * _.camelCase('--foo-bar--');
-     * // => 'fooBar'
-     *
-     * _.camelCase('__FOO_BAR__');
-     * // => 'fooBar'
-     */
-    var camelCase = createCompounder(function(result, word, index) {
-      word = word.toLowerCase();
-      return result + (index ? capitalize(word) : word);
-    });
-
-    /**
-     * Converts the first character of `string` to upper case and the remaining
-     * to lower case.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to capitalize.
-     * @returns {string} Returns the capitalized string.
-     * @example
-     *
-     * _.capitalize('FRED');
-     * // => 'Fred'
-     */
-    function capitalize(string) {
-      return upperFirst(toString(string).toLowerCase());
-    }
-
-    /**
-     * Deburrs `string` by converting
-     * [Latin-1 Supplement](https://en.wikipedia.org/wiki/Latin-1_Supplement_(Unicode_block)#Character_table)
-     * and [Latin Extended-A](https://en.wikipedia.org/wiki/Latin_Extended-A)
-     * letters to basic Latin letters and removing
-     * [combining diacritical marks](https://en.wikipedia.org/wiki/Combining_Diacritical_Marks).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to deburr.
-     * @returns {string} Returns the deburred string.
-     * @example
-     *
-     * _.deburr('déjà vu');
-     * // => 'deja vu'
-     */
-    function deburr(string) {
-      string = toString(string);
-      return string && string.replace(reLatin, deburrLetter).replace(reComboMark, '');
-    }
-
-    /**
-     * Checks if `string` ends with the given target string.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to inspect.
-     * @param {string} [target] The string to search for.
-     * @param {number} [position=string.length] The position to search up to.
-     * @returns {boolean} Returns `true` if `string` ends with `target`,
-     *  else `false`.
-     * @example
-     *
-     * _.endsWith('abc', 'c');
-     * // => true
-     *
-     * _.endsWith('abc', 'b');
-     * // => false
-     *
-     * _.endsWith('abc', 'b', 2);
-     * // => true
-     */
-    function endsWith(string, target, position) {
-      string = toString(string);
-      target = baseToString(target);
-
-      var length = string.length;
-      position = position === undefined
-        ? length
-        : baseClamp(toInteger(position), 0, length);
-
-      var end = position;
-      position -= target.length;
-      return position >= 0 && string.slice(position, end) == target;
-    }
-
-    /**
-     * Converts the characters "&", "<", ">", '"', and "'" in `string` to their
-     * corresponding HTML entities.
-     *
-     * **Note:** No other characters are escaped. To escape additional
-     * characters use a third-party library like [_he_](https://mths.be/he).
-     *
-     * Though the ">" character is escaped for symmetry, characters like
-     * ">" and "/" don't need escaping in HTML and have no special meaning
-     * unless they're part of a tag or unquoted attribute value. See
-     * [Mathias Bynens's article](https://mathiasbynens.be/notes/ambiguous-ampersands)
-     * (under "semi-related fun fact") for more details.
-     *
-     * When working with HTML you should always
-     * [quote attribute values](http://wonko.com/post/html-escaping) to reduce
-     * XSS vectors.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category String
-     * @param {string} [string=''] The string to escape.
-     * @returns {string} Returns the escaped string.
-     * @example
-     *
-     * _.escape('fred, barney, & pebbles');
-     * // => 'fred, barney, &amp; pebbles'
-     */
-    function escape(string) {
-      string = toString(string);
-      return (string && reHasUnescapedHtml.test(string))
-        ? string.replace(reUnescapedHtml, escapeHtmlChar)
-        : string;
-    }
-
-    /**
-     * Escapes the `RegExp` special characters "^", "$", "\", ".", "*", "+",
-     * "?", "(", ")", "[", "]", "{", "}", and "|" in `string`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to escape.
-     * @returns {string} Returns the escaped string.
-     * @example
-     *
-     * _.escapeRegExp('[lodash](https://lodash.com/)');
-     * // => '\[lodash\]\(https://lodash\.com/\)'
-     */
-    function escapeRegExp(string) {
-      string = toString(string);
-      return (string && reHasRegExpChar.test(string))
-        ? string.replace(reRegExpChar, '\\$&')
-        : string;
-    }
-
-    /**
-     * Converts `string` to
-     * [kebab case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the kebab cased string.
-     * @example
-     *
-     * _.kebabCase('Foo Bar');
-     * // => 'foo-bar'
-     *
-     * _.kebabCase('fooBar');
-     * // => 'foo-bar'
-     *
-     * _.kebabCase('__FOO_BAR__');
-     * // => 'foo-bar'
-     */
-    var kebabCase = createCompounder(function(result, word, index) {
-      return result + (index ? '-' : '') + word.toLowerCase();
-    });
-
-    /**
-     * Converts `string`, as space separated words, to lower case.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the lower cased string.
-     * @example
-     *
-     * _.lowerCase('--Foo-Bar--');
-     * // => 'foo bar'
-     *
-     * _.lowerCase('fooBar');
-     * // => 'foo bar'
-     *
-     * _.lowerCase('__FOO_BAR__');
-     * // => 'foo bar'
-     */
-    var lowerCase = createCompounder(function(result, word, index) {
-      return result + (index ? ' ' : '') + word.toLowerCase();
-    });
-
-    /**
-     * Converts the first character of `string` to lower case.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the converted string.
-     * @example
-     *
-     * _.lowerFirst('Fred');
-     * // => 'fred'
-     *
-     * _.lowerFirst('FRED');
-     * // => 'fRED'
-     */
-    var lowerFirst = createCaseFirst('toLowerCase');
-
-    /**
-     * Pads `string` on the left and right sides if it's shorter than `length`.
-     * Padding characters are truncated if they can't be evenly divided by `length`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to pad.
-     * @param {number} [length=0] The padding length.
-     * @param {string} [chars=' '] The string used as padding.
-     * @returns {string} Returns the padded string.
-     * @example
-     *
-     * _.pad('abc', 8);
-     * // => '  abc   '
-     *
-     * _.pad('abc', 8, '_-');
-     * // => '_-abc_-_'
-     *
-     * _.pad('abc', 3);
-     * // => 'abc'
-     */
-    function pad(string, length, chars) {
-      string = toString(string);
-      length = toInteger(length);
-
-      var strLength = length ? stringSize(string) : 0;
-      if (!length || strLength >= length) {
-        return string;
-      }
-      var mid = (length - strLength) / 2;
-      return (
-        createPadding(nativeFloor(mid), chars) +
-        string +
-        createPadding(nativeCeil(mid), chars)
-      );
-    }
-
-    /**
-     * Pads `string` on the right side if it's shorter than `length`. Padding
-     * characters are truncated if they exceed `length`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to pad.
-     * @param {number} [length=0] The padding length.
-     * @param {string} [chars=' '] The string used as padding.
-     * @returns {string} Returns the padded string.
-     * @example
-     *
-     * _.padEnd('abc', 6);
-     * // => 'abc   '
-     *
-     * _.padEnd('abc', 6, '_-');
-     * // => 'abc_-_'
-     *
-     * _.padEnd('abc', 3);
-     * // => 'abc'
-     */
-    function padEnd(string, length, chars) {
-      string = toString(string);
-      length = toInteger(length);
-
-      var strLength = length ? stringSize(string) : 0;
-      return (length && strLength < length)
-        ? (string + createPadding(length - strLength, chars))
-        : string;
-    }
-
-    /**
-     * Pads `string` on the left side if it's shorter than `length`. Padding
-     * characters are truncated if they exceed `length`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to pad.
-     * @param {number} [length=0] The padding length.
-     * @param {string} [chars=' '] The string used as padding.
-     * @returns {string} Returns the padded string.
-     * @example
-     *
-     * _.padStart('abc', 6);
-     * // => '   abc'
-     *
-     * _.padStart('abc', 6, '_-');
-     * // => '_-_abc'
-     *
-     * _.padStart('abc', 3);
-     * // => 'abc'
-     */
-    function padStart(string, length, chars) {
-      string = toString(string);
-      length = toInteger(length);
-
-      var strLength = length ? stringSize(string) : 0;
-      return (length && strLength < length)
-        ? (createPadding(length - strLength, chars) + string)
-        : string;
-    }
-
-    /**
-     * Converts `string` to an integer of the specified radix. If `radix` is
-     * `undefined` or `0`, a `radix` of `10` is used unless `value` is a
-     * hexadecimal, in which case a `radix` of `16` is used.
-     *
-     * **Note:** This method aligns with the
-     * [ES5 implementation](https://es5.github.io/#x15.1.2.2) of `parseInt`.
-     *
-     * @static
-     * @memberOf _
-     * @since 1.1.0
-     * @category String
-     * @param {string} string The string to convert.
-     * @param {number} [radix=10] The radix to interpret `value` by.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {number} Returns the converted integer.
-     * @example
-     *
-     * _.parseInt('08');
-     * // => 8
-     *
-     * _.map(['6', '08', '10'], _.parseInt);
-     * // => [6, 8, 10]
-     */
-    function parseInt(string, radix, guard) {
-      if (guard || radix == null) {
-        radix = 0;
-      } else if (radix) {
-        radix = +radix;
-      }
-      return nativeParseInt(toString(string).replace(reTrimStart, ''), radix || 0);
-    }
-
-    /**
-     * Repeats the given string `n` times.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to repeat.
-     * @param {number} [n=1] The number of times to repeat the string.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {string} Returns the repeated string.
-     * @example
-     *
-     * _.repeat('*', 3);
-     * // => '***'
-     *
-     * _.repeat('abc', 2);
-     * // => 'abcabc'
-     *
-     * _.repeat('abc', 0);
-     * // => ''
-     */
-    function repeat(string, n, guard) {
-      if ((guard ? isIterateeCall(string, n, guard) : n === undefined)) {
-        n = 1;
-      } else {
-        n = toInteger(n);
-      }
-      return baseRepeat(toString(string), n);
-    }
-
-    /**
-     * Replaces matches for `pattern` in `string` with `replacement`.
-     *
-     * **Note:** This method is based on
-     * [`String#replace`](https://mdn.io/String/replace).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to modify.
-     * @param {RegExp|string} pattern The pattern to replace.
-     * @param {Function|string} replacement The match replacement.
-     * @returns {string} Returns the modified string.
-     * @example
-     *
-     * _.replace('Hi Fred', 'Fred', 'Barney');
-     * // => 'Hi Barney'
-     */
-    function replace() {
-      var args = arguments,
-          string = toString(args[0]);
-
-      return args.length < 3 ? string : string.replace(args[1], args[2]);
-    }
-
-    /**
-     * Converts `string` to
-     * [snake case](https://en.wikipedia.org/wiki/Snake_case).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the snake cased string.
-     * @example
-     *
-     * _.snakeCase('Foo Bar');
-     * // => 'foo_bar'
-     *
-     * _.snakeCase('fooBar');
-     * // => 'foo_bar'
-     *
-     * _.snakeCase('--FOO-BAR--');
-     * // => 'foo_bar'
-     */
-    var snakeCase = createCompounder(function(result, word, index) {
-      return result + (index ? '_' : '') + word.toLowerCase();
-    });
-
-    /**
-     * Splits `string` by `separator`.
-     *
-     * **Note:** This method is based on
-     * [`String#split`](https://mdn.io/String/split).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to split.
-     * @param {RegExp|string} separator The separator pattern to split by.
-     * @param {number} [limit] The length to truncate results to.
-     * @returns {Array} Returns the string segments.
-     * @example
-     *
-     * _.split('a-b-c', '-', 2);
-     * // => ['a', 'b']
-     */
-    function split(string, separator, limit) {
-      if (limit && typeof limit != 'number' && isIterateeCall(string, separator, limit)) {
-        separator = limit = undefined;
-      }
-      limit = limit === undefined ? MAX_ARRAY_LENGTH : limit >>> 0;
-      if (!limit) {
-        return [];
-      }
-      string = toString(string);
-      if (string && (
-            typeof separator == 'string' ||
-            (separator != null && !isRegExp(separator))
-          )) {
-        separator = baseToString(separator);
-        if (!separator && hasUnicode(string)) {
-          return castSlice(stringToArray(string), 0, limit);
-        }
-      }
-      return string.split(separator, limit);
-    }
-
-    /**
-     * Converts `string` to
-     * [start case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).
-     *
-     * @static
-     * @memberOf _
-     * @since 3.1.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the start cased string.
-     * @example
-     *
-     * _.startCase('--foo-bar--');
-     * // => 'Foo Bar'
-     *
-     * _.startCase('fooBar');
-     * // => 'Foo Bar'
-     *
-     * _.startCase('__FOO_BAR__');
-     * // => 'FOO BAR'
-     */
-    var startCase = createCompounder(function(result, word, index) {
-      return result + (index ? ' ' : '') + upperFirst(word);
-    });
-
-    /**
-     * Checks if `string` starts with the given target string.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to inspect.
-     * @param {string} [target] The string to search for.
-     * @param {number} [position=0] The position to search from.
-     * @returns {boolean} Returns `true` if `string` starts with `target`,
-     *  else `false`.
-     * @example
-     *
-     * _.startsWith('abc', 'a');
-     * // => true
-     *
-     * _.startsWith('abc', 'b');
-     * // => false
-     *
-     * _.startsWith('abc', 'b', 1);
-     * // => true
-     */
-    function startsWith(string, target, position) {
-      string = toString(string);
-      position = position == null
-        ? 0
-        : baseClamp(toInteger(position), 0, string.length);
-
-      target = baseToString(target);
-      return string.slice(position, position + target.length) == target;
-    }
-
-    /**
-     * Creates a compiled template function that can interpolate data properties
-     * in "interpolate" delimiters, HTML-escape interpolated data properties in
-     * "escape" delimiters, and execute JavaScript in "evaluate" delimiters. Data
-     * properties may be accessed as free variables in the template. If a setting
-     * object is given, it takes precedence over `_.templateSettings` values.
-     *
-     * **Note:** In the development build `_.template` utilizes
-     * [sourceURLs](http://www.html5rocks.com/en/tutorials/developertools/sourcemaps/#toc-sourceurl)
-     * for easier debugging.
-     *
-     * For more information on precompiling templates see
-     * [lodash's custom builds documentation](https://lodash.com/custom-builds).
-     *
-     * For more information on Chrome extension sandboxes see
-     * [Chrome's extensions documentation](https://developer.chrome.com/extensions/sandboxingEval).
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category String
-     * @param {string} [string=''] The template string.
-     * @param {Object} [options={}] The options object.
-     * @param {RegExp} [options.escape=_.templateSettings.escape]
-     *  The HTML "escape" delimiter.
-     * @param {RegExp} [options.evaluate=_.templateSettings.evaluate]
-     *  The "evaluate" delimiter.
-     * @param {Object} [options.imports=_.templateSettings.imports]
-     *  An object to import into the template as free variables.
-     * @param {RegExp} [options.interpolate=_.templateSettings.interpolate]
-     *  The "interpolate" delimiter.
-     * @param {string} [options.sourceURL='lodash.templateSources[n]']
-     *  The sourceURL of the compiled template.
-     * @param {string} [options.variable='obj']
-     *  The data object variable name.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Function} Returns the compiled template function.
-     * @example
-     *
-     * // Use the "interpolate" delimiter to create a compiled template.
-     * var compiled = _.template('hello <%= user %>!');
-     * compiled({ 'user': 'fred' });
-     * // => 'hello fred!'
-     *
-     * // Use the HTML "escape" delimiter to escape data property values.
-     * var compiled = _.template('<b><%- value %></b>');
-     * compiled({ 'value': '<script>' });
-     * // => '<b>&lt;script&gt;</b>'
-     *
-     * // Use the "evaluate" delimiter to execute JavaScript and generate HTML.
-     * var compiled = _.template('<% _.forEach(users, function(user) { %><li><%- user %></li><% }); %>');
-     * compiled({ 'users': ['fred', 'barney'] });
-     * // => '<li>fred</li><li>barney</li>'
-     *
-     * // Use the internal `print` function in "evaluate" delimiters.
-     * var compiled = _.template('<% print("hello " + user); %>!');
-     * compiled({ 'user': 'barney' });
-     * // => 'hello barney!'
-     *
-     * // Use the ES template literal delimiter as an "interpolate" delimiter.
-     * // Disable support by replacing the "interpolate" delimiter.
-     * var compiled = _.template('hello ${ user }!');
-     * compiled({ 'user': 'pebbles' });
-     * // => 'hello pebbles!'
-     *
-     * // Use backslashes to treat delimiters as plain text.
-     * var compiled = _.template('<%= "\\<%- value %\\>" %>');
-     * compiled({ 'value': 'ignored' });
-     * // => '<%- value %>'
-     *
-     * // Use the `imports` option to import `jQuery` as `jq`.
-     * var text = '<% jq.each(users, function(user) { %><li><%- user %></li><% }); %>';
-     * var compiled = _.template(text, { 'imports': { 'jq': jQuery } });
-     * compiled({ 'users': ['fred', 'barney'] });
-     * // => '<li>fred</li><li>barney</li>'
-     *
-     * // Use the `sourceURL` option to specify a custom sourceURL for the template.
-     * var compiled = _.template('hello <%= user %>!', { 'sourceURL': '/basic/greeting.jst' });
-     * compiled(data);
-     * // => Find the source of "greeting.jst" under the Sources tab or Resources panel of the web inspector.
-     *
-     * // Use the `variable` option to ensure a with-statement isn't used in the compiled template.
-     * var compiled = _.template('hi <%= data.user %>!', { 'variable': 'data' });
-     * compiled.source;
-     * // => function(data) {
-     * //   var __t, __p = '';
-     * //   __p += 'hi ' + ((__t = ( data.user )) == null ? '' : __t) + '!';
-     * //   return __p;
-     * // }
-     *
-     * // Use custom template delimiters.
-     * _.templateSettings.interpolate = /{{([\s\S]+?)}}/g;
-     * var compiled = _.template('hello {{ user }}!');
-     * compiled({ 'user': 'mustache' });
-     * // => 'hello mustache!'
-     *
-     * // Use the `source` property to inline compiled templates for meaningful
-     * // line numbers in error messages and stack traces.
-     * fs.writeFileSync(path.join(process.cwd(), 'jst.js'), '\
-     *   var JST = {\
-     *     "main": ' + _.template(mainText).source + '\
-     *   };\
-     * ');
-     */
-    function template(string, options, guard) {
-      // Based on John Resig's `tmpl` implementation
-      // (http://ejohn.org/blog/javascript-micro-templating/)
-      // and Laura Doktorova's doT.js (https://github.com/olado/doT).
-      var settings = lodash.templateSettings;
-
-      if (guard && isIterateeCall(string, options, guard)) {
-        options = undefined;
-      }
-      string = toString(string);
-      options = assignInWith({}, options, settings, customDefaultsAssignIn);
-
-      var imports = assignInWith({}, options.imports, settings.imports, customDefaultsAssignIn),
-          importsKeys = keys(imports),
-          importsValues = baseValues(imports, importsKeys);
-
-      var isEscaping,
-          isEvaluating,
-          index = 0,
-          interpolate = options.interpolate || reNoMatch,
-          source = "__p += '";
-
-      // Compile the regexp to match each delimiter.
-      var reDelimiters = RegExp(
-        (options.escape || reNoMatch).source + '|' +
-        interpolate.source + '|' +
-        (interpolate === reInterpolate ? reEsTemplate : reNoMatch).source + '|' +
-        (options.evaluate || reNoMatch).source + '|$'
-      , 'g');
-
-      // Use a sourceURL for easier debugging.
-      var sourceURL = '//# sourceURL=' +
-        ('sourceURL' in options
-          ? options.sourceURL
-          : ('lodash.templateSources[' + (++templateCounter) + ']')
-        ) + '\n';
-
-      string.replace(reDelimiters, function(match, escapeValue, interpolateValue, esTemplateValue, evaluateValue, offset) {
-        interpolateValue || (interpolateValue = esTemplateValue);
-
-        // Escape characters that can't be included in string literals.
-        source += string.slice(index, offset).replace(reUnescapedString, escapeStringChar);
-
-        // Replace delimiters with snippets.
-        if (escapeValue) {
-          isEscaping = true;
-          source += "' +\n__e(" + escapeValue + ") +\n'";
-        }
-        if (evaluateValue) {
-          isEvaluating = true;
-          source += "';\n" + evaluateValue + ";\n__p += '";
-        }
-        if (interpolateValue) {
-          source += "' +\n((__t = (" + interpolateValue + ")) == null ? '' : __t) +\n'";
-        }
-        index = offset + match.length;
-
-        // The JS engine embedded in Adobe products needs `match` returned in
-        // order to produce the correct `offset` value.
-        return match;
-      });
-
-      source += "';\n";
-
-      // If `variable` is not specified wrap a with-statement around the generated
-      // code to add the data object to the top of the scope chain.
-      var variable = options.variable;
-      if (!variable) {
-        source = 'with (obj) {\n' + source + '\n}\n';
-      }
-      // Cleanup code by stripping empty strings.
-      source = (isEvaluating ? source.replace(reEmptyStringLeading, '') : source)
-        .replace(reEmptyStringMiddle, '$1')
-        .replace(reEmptyStringTrailing, '$1;');
-
-      // Frame code as the function body.
-      source = 'function(' + (variable || 'obj') + ') {\n' +
-        (variable
-          ? ''
-          : 'obj || (obj = {});\n'
-        ) +
-        "var __t, __p = ''" +
-        (isEscaping
-           ? ', __e = _.escape'
-           : ''
-        ) +
-        (isEvaluating
-          ? ', __j = Array.prototype.join;\n' +
-            "function print() { __p += __j.call(arguments, '') }\n"
-          : ';\n'
-        ) +
-        source +
-        'return __p\n}';
-
-      var result = attempt(function() {
-        return Function(importsKeys, sourceURL + 'return ' + source)
-          .apply(undefined, importsValues);
-      });
-
-      // Provide the compiled function's source by its `toString` method or
-      // the `source` property as a convenience for inlining compiled templates.
-      result.source = source;
-      if (isError(result)) {
-        throw result;
-      }
-      return result;
-    }
-
-    /**
-     * Converts `string`, as a whole, to lower case just like
-     * [String#toLowerCase](https://mdn.io/toLowerCase).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the lower cased string.
-     * @example
-     *
-     * _.toLower('--Foo-Bar--');
-     * // => '--foo-bar--'
-     *
-     * _.toLower('fooBar');
-     * // => 'foobar'
-     *
-     * _.toLower('__FOO_BAR__');
-     * // => '__foo_bar__'
-     */
-    function toLower(value) {
-      return toString(value).toLowerCase();
-    }
-
-    /**
-     * Converts `string`, as a whole, to upper case just like
-     * [String#toUpperCase](https://mdn.io/toUpperCase).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the upper cased string.
-     * @example
-     *
-     * _.toUpper('--foo-bar--');
-     * // => '--FOO-BAR--'
-     *
-     * _.toUpper('fooBar');
-     * // => 'FOOBAR'
-     *
-     * _.toUpper('__foo_bar__');
-     * // => '__FOO_BAR__'
-     */
-    function toUpper(value) {
-      return toString(value).toUpperCase();
-    }
-
-    /**
-     * Removes leading and trailing whitespace or specified characters from `string`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to trim.
-     * @param {string} [chars=whitespace] The characters to trim.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {string} Returns the trimmed string.
-     * @example
-     *
-     * _.trim('  abc  ');
-     * // => 'abc'
-     *
-     * _.trim('-_-abc-_-', '_-');
-     * // => 'abc'
-     *
-     * _.map(['  foo  ', '  bar  '], _.trim);
-     * // => ['foo', 'bar']
-     */
-    function trim(string, chars, guard) {
-      string = toString(string);
-      if (string && (guard || chars === undefined)) {
-        return string.replace(reTrim, '');
-      }
-      if (!string || !(chars = baseToString(chars))) {
-        return string;
-      }
-      var strSymbols = stringToArray(string),
-          chrSymbols = stringToArray(chars),
-          start = charsStartIndex(strSymbols, chrSymbols),
-          end = charsEndIndex(strSymbols, chrSymbols) + 1;
-
-      return castSlice(strSymbols, start, end).join('');
-    }
-
-    /**
-     * Removes trailing whitespace or specified characters from `string`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to trim.
-     * @param {string} [chars=whitespace] The characters to trim.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {string} Returns the trimmed string.
-     * @example
-     *
-     * _.trimEnd('  abc  ');
-     * // => '  abc'
-     *
-     * _.trimEnd('-_-abc-_-', '_-');
-     * // => '-_-abc'
-     */
-    function trimEnd(string, chars, guard) {
-      string = toString(string);
-      if (string && (guard || chars === undefined)) {
-        return string.replace(reTrimEnd, '');
-      }
-      if (!string || !(chars = baseToString(chars))) {
-        return string;
-      }
-      var strSymbols = stringToArray(string),
-          end = charsEndIndex(strSymbols, stringToArray(chars)) + 1;
-
-      return castSlice(strSymbols, 0, end).join('');
-    }
-
-    /**
-     * Removes leading whitespace or specified characters from `string`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to trim.
-     * @param {string} [chars=whitespace] The characters to trim.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {string} Returns the trimmed string.
-     * @example
-     *
-     * _.trimStart('  abc  ');
-     * // => 'abc  '
-     *
-     * _.trimStart('-_-abc-_-', '_-');
-     * // => 'abc-_-'
-     */
-    function trimStart(string, chars, guard) {
-      string = toString(string);
-      if (string && (guard || chars === undefined)) {
-        return string.replace(reTrimStart, '');
-      }
-      if (!string || !(chars = baseToString(chars))) {
-        return string;
-      }
-      var strSymbols = stringToArray(string),
-          start = charsStartIndex(strSymbols, stringToArray(chars));
-
-      return castSlice(strSymbols, start).join('');
-    }
-
-    /**
-     * Truncates `string` if it's longer than the given maximum string length.
-     * The last characters of the truncated string are replaced with the omission
-     * string which defaults to "...".
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to truncate.
-     * @param {Object} [options={}] The options object.
-     * @param {number} [options.length=30] The maximum string length.
-     * @param {string} [options.omission='...'] The string to indicate text is omitted.
-     * @param {RegExp|string} [options.separator] The separator pattern to truncate to.
-     * @returns {string} Returns the truncated string.
-     * @example
-     *
-     * _.truncate('hi-diddly-ho there, neighborino');
-     * // => 'hi-diddly-ho there, neighbo...'
-     *
-     * _.truncate('hi-diddly-ho there, neighborino', {
-     *   'length': 24,
-     *   'separator': ' '
-     * });
-     * // => 'hi-diddly-ho there,...'
-     *
-     * _.truncate('hi-diddly-ho there, neighborino', {
-     *   'length': 24,
-     *   'separator': /,? +/
-     * });
-     * // => 'hi-diddly-ho there...'
-     *
-     * _.truncate('hi-diddly-ho there, neighborino', {
-     *   'omission': ' [...]'
-     * });
-     * // => 'hi-diddly-ho there, neig [...]'
-     */
-    function truncate(string, options) {
-      var length = DEFAULT_TRUNC_LENGTH,
-          omission = DEFAULT_TRUNC_OMISSION;
-
-      if (isObject(options)) {
-        var separator = 'separator' in options ? options.separator : separator;
-        length = 'length' in options ? toInteger(options.length) : length;
-        omission = 'omission' in options ? baseToString(options.omission) : omission;
-      }
-      string = toString(string);
-
-      var strLength = string.length;
-      if (hasUnicode(string)) {
-        var strSymbols = stringToArray(string);
-        strLength = strSymbols.length;
-      }
-      if (length >= strLength) {
-        return string;
-      }
-      var end = length - stringSize(omission);
-      if (end < 1) {
-        return omission;
-      }
-      var result = strSymbols
-        ? castSlice(strSymbols, 0, end).join('')
-        : string.slice(0, end);
-
-      if (separator === undefined) {
-        return result + omission;
-      }
-      if (strSymbols) {
-        end += (result.length - end);
-      }
-      if (isRegExp(separator)) {
-        if (string.slice(end).search(separator)) {
-          var match,
-              substring = result;
-
-          if (!separator.global) {
-            separator = RegExp(separator.source, toString(reFlags.exec(separator)) + 'g');
-          }
-          separator.lastIndex = 0;
-          while ((match = separator.exec(substring))) {
-            var newEnd = match.index;
-          }
-          result = result.slice(0, newEnd === undefined ? end : newEnd);
-        }
-      } else if (string.indexOf(baseToString(separator), end) != end) {
-        var index = result.lastIndexOf(separator);
-        if (index > -1) {
-          result = result.slice(0, index);
-        }
-      }
-      return result + omission;
-    }
-
-    /**
-     * The inverse of `_.escape`; this method converts the HTML entities
-     * `&amp;`, `&lt;`, `&gt;`, `&quot;`, and `&#39;` in `string` to
-     * their corresponding characters.
-     *
-     * **Note:** No other HTML entities are unescaped. To unescape additional
-     * HTML entities use a third-party library like [_he_](https://mths.be/he).
-     *
-     * @static
-     * @memberOf _
-     * @since 0.6.0
-     * @category String
-     * @param {string} [string=''] The string to unescape.
-     * @returns {string} Returns the unescaped string.
-     * @example
-     *
-     * _.unescape('fred, barney, &amp; pebbles');
-     * // => 'fred, barney, & pebbles'
-     */
-    function unescape(string) {
-      string = toString(string);
-      return (string && reHasEscapedHtml.test(string))
-        ? string.replace(reEscapedHtml, unescapeHtmlChar)
-        : string;
-    }
-
-    /**
-     * Converts `string`, as space separated words, to upper case.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the upper cased string.
-     * @example
-     *
-     * _.upperCase('--foo-bar');
-     * // => 'FOO BAR'
-     *
-     * _.upperCase('fooBar');
-     * // => 'FOO BAR'
-     *
-     * _.upperCase('__foo_bar__');
-     * // => 'FOO BAR'
-     */
-    var upperCase = createCompounder(function(result, word, index) {
-      return result + (index ? ' ' : '') + word.toUpperCase();
-    });
-
-    /**
-     * Converts the first character of `string` to upper case.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category String
-     * @param {string} [string=''] The string to convert.
-     * @returns {string} Returns the converted string.
-     * @example
-     *
-     * _.upperFirst('fred');
-     * // => 'Fred'
-     *
-     * _.upperFirst('FRED');
-     * // => 'FRED'
-     */
-    var upperFirst = createCaseFirst('toUpperCase');
-
-    /**
-     * Splits `string` into an array of its words.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category String
-     * @param {string} [string=''] The string to inspect.
-     * @param {RegExp|string} [pattern] The pattern to match words.
-     * @param- {Object} [guard] Enables use as an iteratee for methods like `_.map`.
-     * @returns {Array} Returns the words of `string`.
-     * @example
-     *
-     * _.words('fred, barney, & pebbles');
-     * // => ['fred', 'barney', 'pebbles']
-     *
-     * _.words('fred, barney, & pebbles', /[^, ]+/g);
-     * // => ['fred', 'barney', '&', 'pebbles']
-     */
-    function words(string, pattern, guard) {
-      string = toString(string);
-      pattern = guard ? undefined : pattern;
-
-      if (pattern === undefined) {
-        return hasUnicodeWord(string) ? unicodeWords(string) : asciiWords(string);
-      }
-      return string.match(pattern) || [];
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Attempts to invoke `func`, returning either the result or the caught error
-     * object. Any additional arguments are provided to `func` when it's invoked.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Util
-     * @param {Function} func The function to attempt.
-     * @param {...*} [args] The arguments to invoke `func` with.
-     * @returns {*} Returns the `func` result or error object.
-     * @example
-     *
-     * // Avoid throwing errors for invalid selectors.
-     * var elements = _.attempt(function(selector) {
-     *   return document.querySelectorAll(selector);
-     * }, '>_>');
-     *
-     * if (_.isError(elements)) {
-     *   elements = [];
-     * }
-     */
-    var attempt = baseRest(function(func, args) {
-      try {
-        return apply(func, undefined, args);
-      } catch (e) {
-        return isError(e) ? e : new Error(e);
-      }
-    });
-
-    /**
-     * Binds methods of an object to the object itself, overwriting the existing
-     * method.
-     *
-     * **Note:** This method doesn't set the "length" property of bound functions.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @param {Object} object The object to bind and assign the bound methods to.
-     * @param {...(string|string[])} methodNames The object method names to bind.
-     * @returns {Object} Returns `object`.
-     * @example
-     *
-     * var view = {
-     *   'label': 'docs',
-     *   'click': function() {
-     *     console.log('clicked ' + this.label);
-     *   }
-     * };
-     *
-     * _.bindAll(view, ['click']);
-     * jQuery(element).on('click', view.click);
-     * // => Logs 'clicked docs' when clicked.
-     */
-    var bindAll = flatRest(function(object, methodNames) {
-      arrayEach(methodNames, function(key) {
-        key = toKey(key);
-        baseAssignValue(object, key, bind(object[key], object));
-      });
-      return object;
-    });
-
-    /**
-     * Creates a function that iterates over `pairs` and invokes the corresponding
-     * function of the first predicate to return truthy. The predicate-function
-     * pairs are invoked with the `this` binding and arguments of the created
-     * function.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {Array} pairs The predicate-function pairs.
-     * @returns {Function} Returns the new composite function.
-     * @example
-     *
-     * var func = _.cond([
-     *   [_.matches({ 'a': 1 }),           _.constant('matches A')],
-     *   [_.conforms({ 'b': _.isNumber }), _.constant('matches B')],
-     *   [_.stubTrue,                      _.constant('no match')]
-     * ]);
-     *
-     * func({ 'a': 1, 'b': 2 });
-     * // => 'matches A'
-     *
-     * func({ 'a': 0, 'b': 1 });
-     * // => 'matches B'
-     *
-     * func({ 'a': '1', 'b': '2' });
-     * // => 'no match'
-     */
-    function cond(pairs) {
-      var length = pairs == null ? 0 : pairs.length,
-          toIteratee = getIteratee();
-
-      pairs = !length ? [] : arrayMap(pairs, function(pair) {
-        if (typeof pair[1] != 'function') {
-          throw new TypeError(FUNC_ERROR_TEXT);
-        }
-        return [toIteratee(pair[0]), pair[1]];
-      });
-
-      return baseRest(function(args) {
-        var index = -1;
-        while (++index < length) {
-          var pair = pairs[index];
-          if (apply(pair[0], this, args)) {
-            return apply(pair[1], this, args);
-          }
-        }
-      });
-    }
-
-    /**
-     * Creates a function that invokes the predicate properties of `source` with
-     * the corresponding property values of a given object, returning `true` if
-     * all predicates return truthy, else `false`.
-     *
-     * **Note:** The created function is equivalent to `_.conformsTo` with
-     * `source` partially applied.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {Object} source The object of property predicates to conform to.
-     * @returns {Function} Returns the new spec function.
-     * @example
-     *
-     * var objects = [
-     *   { 'a': 2, 'b': 1 },
-     *   { 'a': 1, 'b': 2 }
-     * ];
-     *
-     * _.filter(objects, _.conforms({ 'b': function(n) { return n > 1; } }));
-     * // => [{ 'a': 1, 'b': 2 }]
-     */
-    function conforms(source) {
-      return baseConforms(baseClone(source, CLONE_DEEP_FLAG));
-    }
-
-    /**
-     * Creates a function that returns `value`.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.4.0
-     * @category Util
-     * @param {*} value The value to return from the new function.
-     * @returns {Function} Returns the new constant function.
-     * @example
-     *
-     * var objects = _.times(2, _.constant({ 'a': 1 }));
-     *
-     * console.log(objects);
-     * // => [{ 'a': 1 }, { 'a': 1 }]
-     *
-     * console.log(objects[0] === objects[1]);
-     * // => true
-     */
-    function constant(value) {
-      return function() {
-        return value;
-      };
-    }
-
-    /**
-     * Checks `value` to determine whether a default value should be returned in
-     * its place. The `defaultValue` is returned if `value` is `NaN`, `null`,
-     * or `undefined`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.14.0
-     * @category Util
-     * @param {*} value The value to check.
-     * @param {*} defaultValue The default value.
-     * @returns {*} Returns the resolved value.
-     * @example
-     *
-     * _.defaultTo(1, 10);
-     * // => 1
-     *
-     * _.defaultTo(undefined, 10);
-     * // => 10
-     */
-    function defaultTo(value, defaultValue) {
-      return (value == null || value !== value) ? defaultValue : value;
-    }
-
-    /**
-     * Creates a function that returns the result of invoking the given functions
-     * with the `this` binding of the created function, where each successive
-     * invocation is supplied the return value of the previous.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Util
-     * @param {...(Function|Function[])} [funcs] The functions to invoke.
-     * @returns {Function} Returns the new composite function.
-     * @see _.flowRight
-     * @example
-     *
-     * function square(n) {
-     *   return n * n;
-     * }
-     *
-     * var addSquare = _.flow([_.add, square]);
-     * addSquare(1, 2);
-     * // => 9
-     */
-    var flow = createFlow();
-
-    /**
-     * This method is like `_.flow` except that it creates a function that
-     * invokes the given functions from right to left.
-     *
-     * @static
-     * @since 3.0.0
-     * @memberOf _
-     * @category Util
-     * @param {...(Function|Function[])} [funcs] The functions to invoke.
-     * @returns {Function} Returns the new composite function.
-     * @see _.flow
-     * @example
-     *
-     * function square(n) {
-     *   return n * n;
-     * }
-     *
-     * var addSquare = _.flowRight([square, _.add]);
-     * addSquare(1, 2);
-     * // => 9
-     */
-    var flowRight = createFlow(true);
-
-    /**
-     * This method returns the first argument it receives.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @param {*} value Any value.
-     * @returns {*} Returns `value`.
-     * @example
-     *
-     * var object = { 'a': 1 };
-     *
-     * console.log(_.identity(object) === object);
-     * // => true
-     */
-    function identity(value) {
-      return value;
-    }
-
-    /**
-     * Creates a function that invokes `func` with the arguments of the created
-     * function. If `func` is a property name, the created function returns the
-     * property value for a given element. If `func` is an array or object, the
-     * created function returns `true` for elements that contain the equivalent
-     * source properties, otherwise it returns `false`.
-     *
-     * @static
-     * @since 4.0.0
-     * @memberOf _
-     * @category Util
-     * @param {*} [func=_.identity] The value to convert to a callback.
-     * @returns {Function} Returns the callback.
-     * @example
-     *
-     * var users = [
-     *   { 'user': 'barney', 'age': 36, 'active': true },
-     *   { 'user': 'fred',   'age': 40, 'active': false }
-     * ];
-     *
-     * // The `_.matches` iteratee shorthand.
-     * _.filter(users, _.iteratee({ 'user': 'barney', 'active': true }));
-     * // => [{ 'user': 'barney', 'age': 36, 'active': true }]
-     *
-     * // The `_.matchesProperty` iteratee shorthand.
-     * _.filter(users, _.iteratee(['user', 'fred']));
-     * // => [{ 'user': 'fred', 'age': 40 }]
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.map(users, _.iteratee('user'));
-     * // => ['barney', 'fred']
-     *
-     * // Create custom iteratee shorthands.
-     * _.iteratee = _.wrap(_.iteratee, function(iteratee, func) {
-     *   return !_.isRegExp(func) ? iteratee(func) : function(string) {
-     *     return func.test(string);
-     *   };
-     * });
-     *
-     * _.filter(['abc', 'def'], /ef/);
-     * // => ['def']
-     */
-    function iteratee(func) {
-      return baseIteratee(typeof func == 'function' ? func : baseClone(func, CLONE_DEEP_FLAG));
-    }
-
-    /**
-     * Creates a function that performs a partial deep comparison between a given
-     * object and `source`, returning `true` if the given object has equivalent
-     * property values, else `false`.
-     *
-     * **Note:** The created function is equivalent to `_.isMatch` with `source`
-     * partially applied.
-     *
-     * Partial comparisons will match empty array and empty object `source`
-     * values against any array or object value, respectively. See `_.isEqual`
-     * for a list of supported value comparisons.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Util
-     * @param {Object} source The object of property values to match.
-     * @returns {Function} Returns the new spec function.
-     * @example
-     *
-     * var objects = [
-     *   { 'a': 1, 'b': 2, 'c': 3 },
-     *   { 'a': 4, 'b': 5, 'c': 6 }
-     * ];
-     *
-     * _.filter(objects, _.matches({ 'a': 4, 'c': 6 }));
-     * // => [{ 'a': 4, 'b': 5, 'c': 6 }]
-     */
-    function matches(source) {
-      return baseMatches(baseClone(source, CLONE_DEEP_FLAG));
-    }
-
-    /**
-     * Creates a function that performs a partial deep comparison between the
-     * value at `path` of a given object to `srcValue`, returning `true` if the
-     * object value is equivalent, else `false`.
-     *
-     * **Note:** Partial comparisons will match empty array and empty object
-     * `srcValue` values against any array or object value, respectively. See
-     * `_.isEqual` for a list of supported value comparisons.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.2.0
-     * @category Util
-     * @param {Array|string} path The path of the property to get.
-     * @param {*} srcValue The value to match.
-     * @returns {Function} Returns the new spec function.
-     * @example
-     *
-     * var objects = [
-     *   { 'a': 1, 'b': 2, 'c': 3 },
-     *   { 'a': 4, 'b': 5, 'c': 6 }
-     * ];
-     *
-     * _.find(objects, _.matchesProperty('a', 4));
-     * // => { 'a': 4, 'b': 5, 'c': 6 }
-     */
-    function matchesProperty(path, srcValue) {
-      return baseMatchesProperty(path, baseClone(srcValue, CLONE_DEEP_FLAG));
-    }
-
-    /**
-     * Creates a function that invokes the method at `path` of a given object.
-     * Any additional arguments are provided to the invoked method.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.7.0
-     * @category Util
-     * @param {Array|string} path The path of the method to invoke.
-     * @param {...*} [args] The arguments to invoke the method with.
-     * @returns {Function} Returns the new invoker function.
-     * @example
-     *
-     * var objects = [
-     *   { 'a': { 'b': _.constant(2) } },
-     *   { 'a': { 'b': _.constant(1) } }
-     * ];
-     *
-     * _.map(objects, _.method('a.b'));
-     * // => [2, 1]
-     *
-     * _.map(objects, _.method(['a', 'b']));
-     * // => [2, 1]
-     */
-    var method = baseRest(function(path, args) {
-      return function(object) {
-        return baseInvoke(object, path, args);
-      };
-    });
-
-    /**
-     * The opposite of `_.method`; this method creates a function that invokes
-     * the method at a given path of `object`. Any additional arguments are
-     * provided to the invoked method.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.7.0
-     * @category Util
-     * @param {Object} object The object to query.
-     * @param {...*} [args] The arguments to invoke the method with.
-     * @returns {Function} Returns the new invoker function.
-     * @example
-     *
-     * var array = _.times(3, _.constant),
-     *     object = { 'a': array, 'b': array, 'c': array };
-     *
-     * _.map(['a[2]', 'c[0]'], _.methodOf(object));
-     * // => [2, 0]
-     *
-     * _.map([['a', '2'], ['c', '0']], _.methodOf(object));
-     * // => [2, 0]
-     */
-    var methodOf = baseRest(function(object, args) {
-      return function(path) {
-        return baseInvoke(object, path, args);
-      };
-    });
-
-    /**
-     * Adds all own enumerable string keyed function properties of a source
-     * object to the destination object. If `object` is a function, then methods
-     * are added to its prototype as well.
-     *
-     * **Note:** Use `_.runInContext` to create a pristine `lodash` function to
-     * avoid conflicts caused by modifying the original.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @param {Function|Object} [object=lodash] The destination object.
-     * @param {Object} source The object of functions to add.
-     * @param {Object} [options={}] The options object.
-     * @param {boolean} [options.chain=true] Specify whether mixins are chainable.
-     * @returns {Function|Object} Returns `object`.
-     * @example
-     *
-     * function vowels(string) {
-     *   return _.filter(string, function(v) {
-     *     return /[aeiou]/i.test(v);
-     *   });
-     * }
-     *
-     * _.mixin({ 'vowels': vowels });
-     * _.vowels('fred');
-     * // => ['e']
-     *
-     * _('fred').vowels().value();
-     * // => ['e']
-     *
-     * _.mixin({ 'vowels': vowels }, { 'chain': false });
-     * _('fred').vowels();
-     * // => ['e']
-     */
-    function mixin(object, source, options) {
-      var props = keys(source),
-          methodNames = baseFunctions(source, props);
-
-      if (options == null &&
-          !(isObject(source) && (methodNames.length || !props.length))) {
-        options = source;
-        source = object;
-        object = this;
-        methodNames = baseFunctions(source, keys(source));
-      }
-      var chain = !(isObject(options) && 'chain' in options) || !!options.chain,
-          isFunc = isFunction(object);
-
-      arrayEach(methodNames, function(methodName) {
-        var func = source[methodName];
-        object[methodName] = func;
-        if (isFunc) {
-          object.prototype[methodName] = function() {
-            var chainAll = this.__chain__;
-            if (chain || chainAll) {
-              var result = object(this.__wrapped__),
-                  actions = result.__actions__ = copyArray(this.__actions__);
-
-              actions.push({ 'func': func, 'args': arguments, 'thisArg': object });
-              result.__chain__ = chainAll;
-              return result;
-            }
-            return func.apply(object, arrayPush([this.value()], arguments));
-          };
-        }
-      });
-
-      return object;
-    }
-
-    /**
-     * Reverts the `_` variable to its previous value and returns a reference to
-     * the `lodash` function.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @returns {Function} Returns the `lodash` function.
-     * @example
-     *
-     * var lodash = _.noConflict();
-     */
-    function noConflict() {
-      if (root._ === this) {
-        root._ = oldDash;
-      }
-      return this;
-    }
-
-    /**
-     * This method returns `undefined`.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.3.0
-     * @category Util
-     * @example
-     *
-     * _.times(2, _.noop);
-     * // => [undefined, undefined]
-     */
-    function noop() {
-      // No operation performed.
-    }
-
-    /**
-     * Creates a function that gets the argument at index `n`. If `n` is negative,
-     * the nth argument from the end is returned.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {number} [n=0] The index of the argument to return.
-     * @returns {Function} Returns the new pass-thru function.
-     * @example
-     *
-     * var func = _.nthArg(1);
-     * func('a', 'b', 'c', 'd');
-     * // => 'b'
-     *
-     * var func = _.nthArg(-2);
-     * func('a', 'b', 'c', 'd');
-     * // => 'c'
-     */
-    function nthArg(n) {
-      n = toInteger(n);
-      return baseRest(function(args) {
-        return baseNth(args, n);
-      });
-    }
-
-    /**
-     * Creates a function that invokes `iteratees` with the arguments it receives
-     * and returns their results.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {...(Function|Function[])} [iteratees=[_.identity]]
-     *  The iteratees to invoke.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var func = _.over([Math.max, Math.min]);
-     *
-     * func(1, 2, 3, 4);
-     * // => [4, 1]
-     */
-    var over = createOver(arrayMap);
-
-    /**
-     * Creates a function that checks if **all** of the `predicates` return
-     * truthy when invoked with the arguments it receives.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {...(Function|Function[])} [predicates=[_.identity]]
-     *  The predicates to check.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var func = _.overEvery([Boolean, isFinite]);
-     *
-     * func('1');
-     * // => true
-     *
-     * func(null);
-     * // => false
-     *
-     * func(NaN);
-     * // => false
-     */
-    var overEvery = createOver(arrayEvery);
-
-    /**
-     * Creates a function that checks if **any** of the `predicates` return
-     * truthy when invoked with the arguments it receives.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {...(Function|Function[])} [predicates=[_.identity]]
-     *  The predicates to check.
-     * @returns {Function} Returns the new function.
-     * @example
-     *
-     * var func = _.overSome([Boolean, isFinite]);
-     *
-     * func('1');
-     * // => true
-     *
-     * func(null);
-     * // => true
-     *
-     * func(NaN);
-     * // => false
-     */
-    var overSome = createOver(arraySome);
-
-    /**
-     * Creates a function that returns the value at `path` of a given object.
-     *
-     * @static
-     * @memberOf _
-     * @since 2.4.0
-     * @category Util
-     * @param {Array|string} path The path of the property to get.
-     * @returns {Function} Returns the new accessor function.
-     * @example
-     *
-     * var objects = [
-     *   { 'a': { 'b': 2 } },
-     *   { 'a': { 'b': 1 } }
-     * ];
-     *
-     * _.map(objects, _.property('a.b'));
-     * // => [2, 1]
-     *
-     * _.map(_.sortBy(objects, _.property(['a', 'b'])), 'a.b');
-     * // => [1, 2]
-     */
-    function property(path) {
-      return isKey(path) ? baseProperty(toKey(path)) : basePropertyDeep(path);
-    }
-
-    /**
-     * The opposite of `_.property`; this method creates a function that returns
-     * the value at a given path of `object`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.0.0
-     * @category Util
-     * @param {Object} object The object to query.
-     * @returns {Function} Returns the new accessor function.
-     * @example
-     *
-     * var array = [0, 1, 2],
-     *     object = { 'a': array, 'b': array, 'c': array };
-     *
-     * _.map(['a[2]', 'c[0]'], _.propertyOf(object));
-     * // => [2, 0]
-     *
-     * _.map([['a', '2'], ['c', '0']], _.propertyOf(object));
-     * // => [2, 0]
-     */
-    function propertyOf(object) {
-      return function(path) {
-        return object == null ? undefined : baseGet(object, path);
-      };
-    }
-
-    /**
-     * Creates an array of numbers (positive and/or negative) progressing from
-     * `start` up to, but not including, `end`. A step of `-1` is used if a negative
-     * `start` is specified without an `end` or `step`. If `end` is not specified,
-     * it's set to `start` with `start` then set to `0`.
-     *
-     * **Note:** JavaScript follows the IEEE-754 standard for resolving
-     * floating-point values which can produce unexpected results.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @param {number} [start=0] The start of the range.
-     * @param {number} end The end of the range.
-     * @param {number} [step=1] The value to increment or decrement by.
-     * @returns {Array} Returns the range of numbers.
-     * @see _.inRange, _.rangeRight
-     * @example
-     *
-     * _.range(4);
-     * // => [0, 1, 2, 3]
-     *
-     * _.range(-4);
-     * // => [0, -1, -2, -3]
-     *
-     * _.range(1, 5);
-     * // => [1, 2, 3, 4]
-     *
-     * _.range(0, 20, 5);
-     * // => [0, 5, 10, 15]
-     *
-     * _.range(0, -4, -1);
-     * // => [0, -1, -2, -3]
-     *
-     * _.range(1, 4, 0);
-     * // => [1, 1, 1]
-     *
-     * _.range(0);
-     * // => []
-     */
-    var range = createRange();
-
-    /**
-     * This method is like `_.range` except that it populates values in
-     * descending order.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {number} [start=0] The start of the range.
-     * @param {number} end The end of the range.
-     * @param {number} [step=1] The value to increment or decrement by.
-     * @returns {Array} Returns the range of numbers.
-     * @see _.inRange, _.range
-     * @example
-     *
-     * _.rangeRight(4);
-     * // => [3, 2, 1, 0]
-     *
-     * _.rangeRight(-4);
-     * // => [-3, -2, -1, 0]
-     *
-     * _.rangeRight(1, 5);
-     * // => [4, 3, 2, 1]
-     *
-     * _.rangeRight(0, 20, 5);
-     * // => [15, 10, 5, 0]
-     *
-     * _.rangeRight(0, -4, -1);
-     * // => [-3, -2, -1, 0]
-     *
-     * _.rangeRight(1, 4, 0);
-     * // => [1, 1, 1]
-     *
-     * _.rangeRight(0);
-     * // => []
-     */
-    var rangeRight = createRange(true);
-
-    /**
-     * This method returns a new empty array.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.13.0
-     * @category Util
-     * @returns {Array} Returns the new empty array.
-     * @example
-     *
-     * var arrays = _.times(2, _.stubArray);
-     *
-     * console.log(arrays);
-     * // => [[], []]
-     *
-     * console.log(arrays[0] === arrays[1]);
-     * // => false
-     */
-    function stubArray() {
-      return [];
-    }
-
-    /**
-     * This method returns `false`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.13.0
-     * @category Util
-     * @returns {boolean} Returns `false`.
-     * @example
-     *
-     * _.times(2, _.stubFalse);
-     * // => [false, false]
-     */
-    function stubFalse() {
-      return false;
-    }
-
-    /**
-     * This method returns a new empty object.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.13.0
-     * @category Util
-     * @returns {Object} Returns the new empty object.
-     * @example
-     *
-     * var objects = _.times(2, _.stubObject);
-     *
-     * console.log(objects);
-     * // => [{}, {}]
-     *
-     * console.log(objects[0] === objects[1]);
-     * // => false
-     */
-    function stubObject() {
-      return {};
-    }
-
-    /**
-     * This method returns an empty string.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.13.0
-     * @category Util
-     * @returns {string} Returns the empty string.
-     * @example
-     *
-     * _.times(2, _.stubString);
-     * // => ['', '']
-     */
-    function stubString() {
-      return '';
-    }
-
-    /**
-     * This method returns `true`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.13.0
-     * @category Util
-     * @returns {boolean} Returns `true`.
-     * @example
-     *
-     * _.times(2, _.stubTrue);
-     * // => [true, true]
-     */
-    function stubTrue() {
-      return true;
-    }
-
-    /**
-     * Invokes the iteratee `n` times, returning an array of the results of
-     * each invocation. The iteratee is invoked with one argument; (index).
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @param {number} n The number of times to invoke `iteratee`.
-     * @param {Function} [iteratee=_.identity] The function invoked per iteration.
-     * @returns {Array} Returns the array of results.
-     * @example
-     *
-     * _.times(3, String);
-     * // => ['0', '1', '2']
-     *
-     *  _.times(4, _.constant(0));
-     * // => [0, 0, 0, 0]
-     */
-    function times(n, iteratee) {
-      n = toInteger(n);
-      if (n < 1 || n > MAX_SAFE_INTEGER) {
-        return [];
-      }
-      var index = MAX_ARRAY_LENGTH,
-          length = nativeMin(n, MAX_ARRAY_LENGTH);
-
-      iteratee = getIteratee(iteratee);
-      n -= MAX_ARRAY_LENGTH;
-
-      var result = baseTimes(length, iteratee);
-      while (++index < n) {
-        iteratee(index);
-      }
-      return result;
-    }
-
-    /**
-     * Converts `value` to a property path array.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Util
-     * @param {*} value The value to convert.
-     * @returns {Array} Returns the new property path array.
-     * @example
-     *
-     * _.toPath('a.b.c');
-     * // => ['a', 'b', 'c']
-     *
-     * _.toPath('a[0].b.c');
-     * // => ['a', '0', 'b', 'c']
-     */
-    function toPath(value) {
-      if (isArray(value)) {
-        return arrayMap(value, toKey);
-      }
-      return isSymbol(value) ? [value] : copyArray(stringToPath(toString(value)));
-    }
-
-    /**
-     * Generates a unique ID. If `prefix` is given, the ID is appended to it.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Util
-     * @param {string} [prefix=''] The value to prefix the ID with.
-     * @returns {string} Returns the unique ID.
-     * @example
-     *
-     * _.uniqueId('contact_');
-     * // => 'contact_104'
-     *
-     * _.uniqueId();
-     * // => '105'
-     */
-    function uniqueId(prefix) {
-      var id = ++idCounter;
-      return toString(prefix) + id;
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * Adds two numbers.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.4.0
-     * @category Math
-     * @param {number} augend The first number in an addition.
-     * @param {number} addend The second number in an addition.
-     * @returns {number} Returns the total.
-     * @example
-     *
-     * _.add(6, 4);
-     * // => 10
-     */
-    var add = createMathOperation(function(augend, addend) {
-      return augend + addend;
-    }, 0);
-
-    /**
-     * Computes `number` rounded up to `precision`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.10.0
-     * @category Math
-     * @param {number} number The number to round up.
-     * @param {number} [precision=0] The precision to round up to.
-     * @returns {number} Returns the rounded up number.
-     * @example
-     *
-     * _.ceil(4.006);
-     * // => 5
-     *
-     * _.ceil(6.004, 2);
-     * // => 6.01
-     *
-     * _.ceil(6040, -2);
-     * // => 6100
-     */
-    var ceil = createRound('ceil');
-
-    /**
-     * Divide two numbers.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.7.0
-     * @category Math
-     * @param {number} dividend The first number in a division.
-     * @param {number} divisor The second number in a division.
-     * @returns {number} Returns the quotient.
-     * @example
-     *
-     * _.divide(6, 4);
-     * // => 1.5
-     */
-    var divide = createMathOperation(function(dividend, divisor) {
-      return dividend / divisor;
-    }, 1);
-
-    /**
-     * Computes `number` rounded down to `precision`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.10.0
-     * @category Math
-     * @param {number} number The number to round down.
-     * @param {number} [precision=0] The precision to round down to.
-     * @returns {number} Returns the rounded down number.
-     * @example
-     *
-     * _.floor(4.006);
-     * // => 4
-     *
-     * _.floor(0.046, 2);
-     * // => 0.04
-     *
-     * _.floor(4060, -2);
-     * // => 4000
-     */
-    var floor = createRound('floor');
-
-    /**
-     * Computes the maximum value of `array`. If `array` is empty or falsey,
-     * `undefined` is returned.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @returns {*} Returns the maximum value.
-     * @example
-     *
-     * _.max([4, 2, 8, 6]);
-     * // => 8
-     *
-     * _.max([]);
-     * // => undefined
-     */
-    function max(array) {
-      return (array && array.length)
-        ? baseExtremum(array, identity, baseGt)
-        : undefined;
-    }
-
-    /**
-     * This method is like `_.max` except that it accepts `iteratee` which is
-     * invoked for each element in `array` to generate the criterion by which
-     * the value is ranked. The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {*} Returns the maximum value.
-     * @example
-     *
-     * var objects = [{ 'n': 1 }, { 'n': 2 }];
-     *
-     * _.maxBy(objects, function(o) { return o.n; });
-     * // => { 'n': 2 }
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.maxBy(objects, 'n');
-     * // => { 'n': 2 }
-     */
-    function maxBy(array, iteratee) {
-      return (array && array.length)
-        ? baseExtremum(array, getIteratee(iteratee, 2), baseGt)
-        : undefined;
-    }
-
-    /**
-     * Computes the mean of the values in `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @returns {number} Returns the mean.
-     * @example
-     *
-     * _.mean([4, 2, 8, 6]);
-     * // => 5
-     */
-    function mean(array) {
-      return baseMean(array, identity);
-    }
-
-    /**
-     * This method is like `_.mean` except that it accepts `iteratee` which is
-     * invoked for each element in `array` to generate the value to be averaged.
-     * The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.7.0
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {number} Returns the mean.
-     * @example
-     *
-     * var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];
-     *
-     * _.meanBy(objects, function(o) { return o.n; });
-     * // => 5
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.meanBy(objects, 'n');
-     * // => 5
-     */
-    function meanBy(array, iteratee) {
-      return baseMean(array, getIteratee(iteratee, 2));
-    }
-
-    /**
-     * Computes the minimum value of `array`. If `array` is empty or falsey,
-     * `undefined` is returned.
-     *
-     * @static
-     * @since 0.1.0
-     * @memberOf _
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @returns {*} Returns the minimum value.
-     * @example
-     *
-     * _.min([4, 2, 8, 6]);
-     * // => 2
-     *
-     * _.min([]);
-     * // => undefined
-     */
-    function min(array) {
-      return (array && array.length)
-        ? baseExtremum(array, identity, baseLt)
-        : undefined;
-    }
-
-    /**
-     * This method is like `_.min` except that it accepts `iteratee` which is
-     * invoked for each element in `array` to generate the criterion by which
-     * the value is ranked. The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {*} Returns the minimum value.
-     * @example
-     *
-     * var objects = [{ 'n': 1 }, { 'n': 2 }];
-     *
-     * _.minBy(objects, function(o) { return o.n; });
-     * // => { 'n': 1 }
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.minBy(objects, 'n');
-     * // => { 'n': 1 }
-     */
-    function minBy(array, iteratee) {
-      return (array && array.length)
-        ? baseExtremum(array, getIteratee(iteratee, 2), baseLt)
-        : undefined;
-    }
-
-    /**
-     * Multiply two numbers.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.7.0
-     * @category Math
-     * @param {number} multiplier The first number in a multiplication.
-     * @param {number} multiplicand The second number in a multiplication.
-     * @returns {number} Returns the product.
-     * @example
-     *
-     * _.multiply(6, 4);
-     * // => 24
-     */
-    var multiply = createMathOperation(function(multiplier, multiplicand) {
-      return multiplier * multiplicand;
-    }, 1);
-
-    /**
-     * Computes `number` rounded to `precision`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.10.0
-     * @category Math
-     * @param {number} number The number to round.
-     * @param {number} [precision=0] The precision to round to.
-     * @returns {number} Returns the rounded number.
-     * @example
-     *
-     * _.round(4.006);
-     * // => 4
-     *
-     * _.round(4.006, 2);
-     * // => 4.01
-     *
-     * _.round(4060, -2);
-     * // => 4100
-     */
-    var round = createRound('round');
-
-    /**
-     * Subtract two numbers.
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Math
-     * @param {number} minuend The first number in a subtraction.
-     * @param {number} subtrahend The second number in a subtraction.
-     * @returns {number} Returns the difference.
-     * @example
-     *
-     * _.subtract(6, 4);
-     * // => 2
-     */
-    var subtract = createMathOperation(function(minuend, subtrahend) {
-      return minuend - subtrahend;
-    }, 0);
-
-    /**
-     * Computes the sum of the values in `array`.
-     *
-     * @static
-     * @memberOf _
-     * @since 3.4.0
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @returns {number} Returns the sum.
-     * @example
-     *
-     * _.sum([4, 2, 8, 6]);
-     * // => 20
-     */
-    function sum(array) {
-      return (array && array.length)
-        ? baseSum(array, identity)
-        : 0;
-    }
-
-    /**
-     * This method is like `_.sum` except that it accepts `iteratee` which is
-     * invoked for each element in `array` to generate the value to be summed.
-     * The iteratee is invoked with one argument: (value).
-     *
-     * @static
-     * @memberOf _
-     * @since 4.0.0
-     * @category Math
-     * @param {Array} array The array to iterate over.
-     * @param {Function} [iteratee=_.identity] The iteratee invoked per element.
-     * @returns {number} Returns the sum.
-     * @example
-     *
-     * var objects = [{ 'n': 4 }, { 'n': 2 }, { 'n': 8 }, { 'n': 6 }];
-     *
-     * _.sumBy(objects, function(o) { return o.n; });
-     * // => 20
-     *
-     * // The `_.property` iteratee shorthand.
-     * _.sumBy(objects, 'n');
-     * // => 20
-     */
-    function sumBy(array, iteratee) {
-      return (array && array.length)
-        ? baseSum(array, getIteratee(iteratee, 2))
-        : 0;
-    }
-
-    /*------------------------------------------------------------------------*/
-
-    // Add methods that return wrapped values in chain sequences.
-    lodash.after = after;
-    lodash.ary = ary;
-    lodash.assign = assign;
-    lodash.assignIn = assignIn;
-    lodash.assignInWith = assignInWith;
-    lodash.assignWith = assignWith;
-    lodash.at = at;
-    lodash.before = before;
-    lodash.bind = bind;
-    lodash.bindAll = bindAll;
-    lodash.bindKey = bindKey;
-    lodash.castArray = castArray;
-    lodash.chain = chain;
-    lodash.chunk = chunk;
-    lodash.compact = compact;
-    lodash.concat = concat;
-    lodash.cond = cond;
-    lodash.conforms = conforms;
-    lodash.constant = constant;
-    lodash.countBy = countBy;
-    lodash.create = create;
-    lodash.curry = curry;
-    lodash.curryRight = curryRight;
-    lodash.debounce = debounce;
-    lodash.defaults = defaults;
-    lodash.defaultsDeep = defaultsDeep;
-    lodash.defer = defer;
-    lodash.delay = delay;
-    lodash.difference = difference;
-    lodash.differenceBy = differenceBy;
-    lodash.differenceWith = differenceWith;
-    lodash.drop = drop;
-    lodash.dropRight = dropRight;
-    lodash.dropRightWhile = dropRightWhile;
-    lodash.dropWhile = dropWhile;
-    lodash.fill = fill;
-    lodash.filter = filter;
-    lodash.flatMap = flatMap;
-    lodash.flatMapDeep = flatMapDeep;
-    lodash.flatMapDepth = flatMapDepth;
-    lodash.flatten = flatten;
-    lodash.flattenDeep = flattenDeep;
-    lodash.flattenDepth = flattenDepth;
-    lodash.flip = flip;
-    lodash.flow = flow;
-    lodash.flowRight = flowRight;
-    lodash.fromPairs = fromPairs;
-    lodash.functions = functions;
-    lodash.functionsIn = functionsIn;
-    lodash.groupBy = groupBy;
-    lodash.initial = initial;
-    lodash.intersection = intersection;
-    lodash.intersectionBy = intersectionBy;
-    lodash.intersectionWith = intersectionWith;
-    lodash.invert = invert;
-    lodash.invertBy = invertBy;
-    lodash.invokeMap = invokeMap;
-    lodash.iteratee = iteratee;
-    lodash.keyBy = keyBy;
-    lodash.keys = keys;
-    lodash.keysIn = keysIn;
-    lodash.map = map;
-    lodash.mapKeys = mapKeys;
-    lodash.mapValues = mapValues;
-    lodash.matches = matches;
-    lodash.matchesProperty = matchesProperty;
-    lodash.memoize = memoize;
-    lodash.merge = merge;
-    lodash.mergeWith = mergeWith;
-    lodash.method = method;
-    lodash.methodOf = methodOf;
-    lodash.mixin = mixin;
-    lodash.negate = negate;
-    lodash.nthArg = nthArg;
-    lodash.omit = omit;
-    lodash.omitBy = omitBy;
-    lodash.once = once;
-    lodash.orderBy = orderBy;
-    lodash.over = over;
-    lodash.overArgs = overArgs;
-    lodash.overEvery = overEvery;
-    lodash.overSome = overSome;
-    lodash.partial = partial;
-    lodash.partialRight = partialRight;
-    lodash.partition = partition;
-    lodash.pick = pick;
-    lodash.pickBy = pickBy;
-    lodash.property = property;
-    lodash.propertyOf = propertyOf;
-    lodash.pull = pull;
-    lodash.pullAll = pullAll;
-    lodash.pullAllBy = pullAllBy;
-    lodash.pullAllWith = pullAllWith;
-    lodash.pullAt = pullAt;
-    lodash.range = range;
-    lodash.rangeRight = rangeRight;
-    lodash.rearg = rearg;
-    lodash.reject = reject;
-    lodash.remove = remove;
-    lodash.rest = rest;
-    lodash.reverse = reverse;
-    lodash.sampleSize = sampleSize;
-    lodash.set = set;
-    lodash.setWith = setWith;
-    lodash.shuffle = shuffle;
-    lodash.slice = slice;
-    lodash.sortBy = sortBy;
-    lodash.sortedUniq = sortedUniq;
-    lodash.sortedUniqBy = sortedUniqBy;
-    lodash.split = split;
-    lodash.spread = spread;
-    lodash.tail = tail;
-    lodash.take = take;
-    lodash.takeRight = takeRight;
-    lodash.takeRightWhile = takeRightWhile;
-    lodash.takeWhile = takeWhile;
-    lodash.tap = tap;
-    lodash.throttle = throttle;
-    lodash.thru = thru;
-    lodash.toArray = toArray;
-    lodash.toPairs = toPairs;
-    lodash.toPairsIn = toPairsIn;
-    lodash.toPath = toPath;
-    lodash.toPlainObject = toPlainObject;
-    lodash.transform = transform;
-    lodash.unary = unary;
-    lodash.union = union;
-    lodash.unionBy = unionBy;
-    lodash.unionWith = unionWith;
-    lodash.uniq = uniq;
-    lodash.uniqBy = uniqBy;
-    lodash.uniqWith = uniqWith;
-    lodash.unset = unset;
-    lodash.unzip = unzip;
-    lodash.unzipWith = unzipWith;
-    lodash.update = update;
-    lodash.updateWith = updateWith;
-    lodash.values = values;
-    lodash.valuesIn = valuesIn;
-    lodash.without = without;
-    lodash.words = words;
-    lodash.wrap = wrap;
-    lodash.xor = xor;
-    lodash.xorBy = xorBy;
-    lodash.xorWith = xorWith;
-    lodash.zip = zip;
-    lodash.zipObject = zipObject;
-    lodash.zipObjectDeep = zipObjectDeep;
-    lodash.zipWith = zipWith;
-
-    // Add aliases.
-    lodash.entries = toPairs;
-    lodash.entriesIn = toPairsIn;
-    lodash.extend = assignIn;
-    lodash.extendWith = assignInWith;
-
-    // Add methods to `lodash.prototype`.
-    mixin(lodash, lodash);
-
-    /*------------------------------------------------------------------------*/
-
-    // Add methods that return unwrapped values in chain sequences.
-    lodash.add = add;
-    lodash.attempt = attempt;
-    lodash.camelCase = camelCase;
-    lodash.capitalize = capitalize;
-    lodash.ceil = ceil;
-    lodash.clamp = clamp;
-    lodash.clone = clone;
-    lodash.cloneDeep = cloneDeep;
-    lodash.cloneDeepWith = cloneDeepWith;
-    lodash.cloneWith = cloneWith;
-    lodash.conformsTo = conformsTo;
-    lodash.deburr = deburr;
-    lodash.defaultTo = defaultTo;
-    lodash.divide = divide;
-    lodash.endsWith = endsWith;
-    lodash.eq = eq;
-    lodash.escape = escape;
-    lodash.escapeRegExp = escapeRegExp;
-    lodash.every = every;
-    lodash.find = find;
-    lodash.findIndex = findIndex;
-    lodash.findKey = findKey;
-    lodash.findLast = findLast;
-    lodash.findLastIndex = findLastIndex;
-    lodash.findLastKey = findLastKey;
-    lodash.floor = floor;
-    lodash.forEach = forEach;
-    lodash.forEachRight = forEachRight;
-    lodash.forIn = forIn;
-    lodash.forInRight = forInRight;
-    lodash.forOwn = forOwn;
-    lodash.forOwnRight = forOwnRight;
-    lodash.get = get;
-    lodash.gt = gt;
-    lodash.gte = gte;
-    lodash.has = has;
-    lodash.hasIn = hasIn;
-    lodash.head = head;
-    lodash.identity = identity;
-    lodash.includes = includes;
-    lodash.indexOf = indexOf;
-    lodash.inRange = inRange;
-    lodash.invoke = invoke;
-    lodash.isArguments = isArguments;
-    lodash.isArray = isArray;
-    lodash.isArrayBuffer = isArrayBuffer;
-    lodash.isArrayLike = isArrayLike;
-    lodash.isArrayLikeObject = isArrayLikeObject;
-    lodash.isBoolean = isBoolean;
-    lodash.isBuffer = isBuffer;
-    lodash.isDate = isDate;
-    lodash.isElement = isElement;
-    lodash.isEmpty = isEmpty;
-    lodash.isEqual = isEqual;
-    lodash.isEqualWith = isEqualWith;
-    lodash.isError = isError;
-    lodash.isFinite = isFinite;
-    lodash.isFunction = isFunction;
-    lodash.isInteger = isInteger;
-    lodash.isLength = isLength;
-    lodash.isMap = isMap;
-    lodash.isMatch = isMatch;
-    lodash.isMatchWith = isMatchWith;
-    lodash.isNaN = isNaN;
-    lodash.isNative = isNative;
-    lodash.isNil = isNil;
-    lodash.isNull = isNull;
-    lodash.isNumber = isNumber;
-    lodash.isObject = isObject;
-    lodash.isObjectLike = isObjectLike;
-    lodash.isPlainObject = isPlainObject;
-    lodash.isRegExp = isRegExp;
-    lodash.isSafeInteger = isSafeInteger;
-    lodash.isSet = isSet;
-    lodash.isString = isString;
-    lodash.isSymbol = isSymbol;
-    lodash.isTypedArray = isTypedArray;
-    lodash.isUndefined = isUndefined;
-    lodash.isWeakMap = isWeakMap;
-    lodash.isWeakSet = isWeakSet;
-    lodash.join = join;
-    lodash.kebabCase = kebabCase;
-    lodash.last = last;
-    lodash.lastIndexOf = lastIndexOf;
-    lodash.lowerCase = lowerCase;
-    lodash.lowerFirst = lowerFirst;
-    lodash.lt = lt;
-    lodash.lte = lte;
-    lodash.max = max;
-    lodash.maxBy = maxBy;
-    lodash.mean = mean;
-    lodash.meanBy = meanBy;
-    lodash.min = min;
-    lodash.minBy = minBy;
-    lodash.stubArray = stubArray;
-    lodash.stubFalse = stubFalse;
-    lodash.stubObject = stubObject;
-    lodash.stubString = stubString;
-    lodash.stubTrue = stubTrue;
-    lodash.multiply = multiply;
-    lodash.nth = nth;
-    lodash.noConflict = noConflict;
-    lodash.noop = noop;
-    lodash.now = now;
-    lodash.pad = pad;
-    lodash.padEnd = padEnd;
-    lodash.padStart = padStart;
-    lodash.parseInt = parseInt;
-    lodash.random = random;
-    lodash.reduce = reduce;
-    lodash.reduceRight = reduceRight;
-    lodash.repeat = repeat;
-    lodash.replace = replace;
-    lodash.result = result;
-    lodash.round = round;
-    lodash.runInContext = runInContext;
-    lodash.sample = sample;
-    lodash.size = size;
-    lodash.snakeCase = snakeCase;
-    lodash.some = some;
-    lodash.sortedIndex = sortedIndex;
-    lodash.sortedIndexBy = sortedIndexBy;
-    lodash.sortedIndexOf = sortedIndexOf;
-    lodash.sortedLastIndex = sortedLastIndex;
-    lodash.sortedLastIndexBy = sortedLastIndexBy;
-    lodash.sortedLastIndexOf = sortedLastIndexOf;
-    lodash.startCase = startCase;
-    lodash.startsWith = startsWith;
-    lodash.subtract = subtract;
-    lodash.sum = sum;
-    lodash.sumBy = sumBy;
-    lodash.template = template;
-    lodash.times = times;
-    lodash.toFinite = toFinite;
-    lodash.toInteger = toInteger;
-    lodash.toLength = toLength;
-    lodash.toLower = toLower;
-    lodash.toNumber = toNumber;
-    lodash.toSafeInteger = toSafeInteger;
-    lodash.toString = toString;
-    lodash.toUpper = toUpper;
-    lodash.trim = trim;
-    lodash.trimEnd = trimEnd;
-    lodash.trimStart = trimStart;
-    lodash.truncate = truncate;
-    lodash.unescape = unescape;
-    lodash.uniqueId = uniqueId;
-    lodash.upperCase = upperCase;
-    lodash.upperFirst = upperFirst;
-
-    // Add aliases.
-    lodash.each = forEach;
-    lodash.eachRight = forEachRight;
-    lodash.first = head;
-
-    mixin(lodash, (function() {
-      var source = {};
-      baseForOwn(lodash, function(func, methodName) {
-        if (!hasOwnProperty.call(lodash.prototype, methodName)) {
-          source[methodName] = func;
-        }
-      });
-      return source;
-    }()), { 'chain': false });
-
-    /*------------------------------------------------------------------------*/
-
-    /**
-     * The semantic version number.
-     *
-     * @static
-     * @memberOf _
-     * @type {string}
-     */
-    lodash.VERSION = VERSION;
-
-    // Assign default placeholders.
-    arrayEach(['bind', 'bindKey', 'curry', 'curryRight', 'partial', 'partialRight'], function(methodName) {
-      lodash[methodName].placeholder = lodash;
-    });
-
-    // Add `LazyWrapper` methods for `_.drop` and `_.take` variants.
-    arrayEach(['drop', 'take'], function(methodName, index) {
-      LazyWrapper.prototype[methodName] = function(n) {
-        n = n === undefined ? 1 : nativeMax(toInteger(n), 0);
-
-        var result = (this.__filtered__ && !index)
-          ? new LazyWrapper(this)
-          : this.clone();
-
-        if (result.__filtered__) {
-          result.__takeCount__ = nativeMin(n, result.__takeCount__);
-        } else {
-          result.__views__.push({
-            'size': nativeMin(n, MAX_ARRAY_LENGTH),
-            'type': methodName + (result.__dir__ < 0 ? 'Right' : '')
-          });
-        }
-        return result;
-      };
-
-      LazyWrapper.prototype[methodName + 'Right'] = function(n) {
-        return this.reverse()[methodName](n).reverse();
-      };
-    });
-
-    // Add `LazyWrapper` methods that accept an `iteratee` value.
-    arrayEach(['filter', 'map', 'takeWhile'], function(methodName, index) {
-      var type = index + 1,
-          isFilter = type == LAZY_FILTER_FLAG || type == LAZY_WHILE_FLAG;
-
-      LazyWrapper.prototype[methodName] = function(iteratee) {
-        var result = this.clone();
-        result.__iteratees__.push({
-          'iteratee': getIteratee(iteratee, 3),
-          'type': type
-        });
-        result.__filtered__ = result.__filtered__ || isFilter;
-        return result;
-      };
-    });
-
-    // Add `LazyWrapper` methods for `_.head` and `_.last`.
-    arrayEach(['head', 'last'], function(methodName, index) {
-      var takeName = 'take' + (index ? 'Right' : '');
-
-      LazyWrapper.prototype[methodName] = function() {
-        return this[takeName](1).value()[0];
-      };
-    });
-
-    // Add `LazyWrapper` methods for `_.initial` and `_.tail`.
-    arrayEach(['initial', 'tail'], function(methodName, index) {
-      var dropName = 'drop' + (index ? '' : 'Right');
-
-      LazyWrapper.prototype[methodName] = function() {
-        return this.__filtered__ ? new LazyWrapper(this) : this[dropName](1);
-      };
-    });
-
-    LazyWrapper.prototype.compact = function() {
-      return this.filter(identity);
-    };
-
-    LazyWrapper.prototype.find = function(predicate) {
-      return this.filter(predicate).head();
-    };
-
-    LazyWrapper.prototype.findLast = function(predicate) {
-      return this.reverse().find(predicate);
-    };
-
-    LazyWrapper.prototype.invokeMap = baseRest(function(path, args) {
-      if (typeof path == 'function') {
-        return new LazyWrapper(this);
-      }
-      return this.map(function(value) {
-        return baseInvoke(value, path, args);
-      });
-    });
-
-    LazyWrapper.prototype.reject = function(predicate) {
-      return this.filter(negate(getIteratee(predicate)));
-    };
-
-    LazyWrapper.prototype.slice = function(start, end) {
-      start = toInteger(start);
-
-      var result = this;
-      if (result.__filtered__ && (start > 0 || end < 0)) {
-        return new LazyWrapper(result);
-      }
-      if (start < 0) {
-        result = result.takeRight(-start);
-      } else if (start) {
-        result = result.drop(start);
-      }
-      if (end !== undefined) {
-        end = toInteger(end);
-        result = end < 0 ? result.dropRight(-end) : result.take(end - start);
-      }
-      return result;
-    };
-
-    LazyWrapper.prototype.takeRightWhile = function(predicate) {
-      return this.reverse().takeWhile(predicate).reverse();
-    };
-
-    LazyWrapper.prototype.toArray = function() {
-      return this.take(MAX_ARRAY_LENGTH);
-    };
-
-    // Add `LazyWrapper` methods to `lodash.prototype`.
-    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-      var checkIteratee = /^(?:filter|find|map|reject)|While$/.test(methodName),
-          isTaker = /^(?:head|last)$/.test(methodName),
-          lodashFunc = lodash[isTaker ? ('take' + (methodName == 'last' ? 'Right' : '')) : methodName],
-          retUnwrapped = isTaker || /^find/.test(methodName);
-
-      if (!lodashFunc) {
-        return;
-      }
-      lodash.prototype[methodName] = function() {
-        var value = this.__wrapped__,
-            args = isTaker ? [1] : arguments,
-            isLazy = value instanceof LazyWrapper,
-            iteratee = args[0],
-            useLazy = isLazy || isArray(value);
-
-        var interceptor = function(value) {
-          var result = lodashFunc.apply(lodash, arrayPush([value], args));
-          return (isTaker && chainAll) ? result[0] : result;
-        };
-
-        if (useLazy && checkIteratee && typeof iteratee == 'function' && iteratee.length != 1) {
-          // Avoid lazy use if the iteratee has a "length" value other than `1`.
-          isLazy = useLazy = false;
-        }
-        var chainAll = this.__chain__,
-            isHybrid = !!this.__actions__.length,
-            isUnwrapped = retUnwrapped && !chainAll,
-            onlyLazy = isLazy && !isHybrid;
-
-        if (!retUnwrapped && useLazy) {
-          value = onlyLazy ? value : new LazyWrapper(this);
-          var result = func.apply(value, args);
-          result.__actions__.push({ 'func': thru, 'args': [interceptor], 'thisArg': undefined });
-          return new LodashWrapper(result, chainAll);
-        }
-        if (isUnwrapped && onlyLazy) {
-          return func.apply(this, args);
-        }
-        result = this.thru(interceptor);
-        return isUnwrapped ? (isTaker ? result.value()[0] : result.value()) : result;
-      };
-    });
-
-    // Add `Array` methods to `lodash.prototype`.
-    arrayEach(['pop', 'push', 'shift', 'sort', 'splice', 'unshift'], function(methodName) {
-      var func = arrayProto[methodName],
-          chainName = /^(?:push|sort|unshift)$/.test(methodName) ? 'tap' : 'thru',
-          retUnwrapped = /^(?:pop|shift)$/.test(methodName);
-
-      lodash.prototype[methodName] = function() {
-        var args = arguments;
-        if (retUnwrapped && !this.__chain__) {
-          var value = this.value();
-          return func.apply(isArray(value) ? value : [], args);
-        }
-        return this[chainName](function(value) {
-          return func.apply(isArray(value) ? value : [], args);
-        });
-      };
-    });
-
-    // Map minified method names to their real names.
-    baseForOwn(LazyWrapper.prototype, function(func, methodName) {
-      var lodashFunc = lodash[methodName];
-      if (lodashFunc) {
-        var key = (lodashFunc.name + ''),
-            names = realNames[key] || (realNames[key] = []);
-
-        names.push({ 'name': methodName, 'func': lodashFunc });
-      }
-    });
-
-    realNames[createHybrid(undefined, WRAP_BIND_KEY_FLAG).name] = [{
-      'name': 'wrapper',
-      'func': undefined
-    }];
-
-    // Add methods to `LazyWrapper`.
-    LazyWrapper.prototype.clone = lazyClone;
-    LazyWrapper.prototype.reverse = lazyReverse;
-    LazyWrapper.prototype.value = lazyValue;
-
-    // Add chain sequence methods to the `lodash` wrapper.
-    lodash.prototype.at = wrapperAt;
-    lodash.prototype.chain = wrapperChain;
-    lodash.prototype.commit = wrapperCommit;
-    lodash.prototype.next = wrapperNext;
-    lodash.prototype.plant = wrapperPlant;
-    lodash.prototype.reverse = wrapperReverse;
-    lodash.prototype.toJSON = lodash.prototype.valueOf = lodash.prototype.value = wrapperValue;
-
-    // Add lazy aliases.
-    lodash.prototype.first = lodash.prototype.head;
-
-    if (symIterator) {
-      lodash.prototype[symIterator] = wrapperToIterator;
-    }
-    return lodash;
-  });
-
-  /*--------------------------------------------------------------------------*/
-
-  // Export lodash.
-  var _ = runInContext();
-
-  // Some AMD build optimizers, like r.js, check for condition patterns like:
-  if (true) {
-    // Expose Lodash on the global object to prevent errors when Lodash is
-    // loaded by a script tag in the presence of an AMD loader.
-    // See http://requirejs.org/docs/errors.html#mismatch for more details.
-    // Use `_.noConflict` to remove Lodash from the global object.
-    root._ = _;
-
-    // Define as an anonymous module so, through path mapping, it can be
-    // referenced as the "underscore" module.
-    !(__WEBPACK_AMD_DEFINE_RESULT__ = function() {
-      return _;
-    }.call(exports, __webpack_require__, exports, module),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-  }
-  // Check for `exports` after `define` in case a build optimizer adds it.
-  else if (freeModule) {
-    // Export for Node.js.
-    (freeModule.exports = _)._ = _;
-    // Export for CommonJS support.
-    freeExports._ = _;
-  }
-  else {
-    // Export to the global object.
-    root._ = _;
-  }
-}.call(this));
-
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(163)(module)))
-
-/***/ }),
-/* 39 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return EMPTY; });
-/* harmony export (immutable) */ __webpack_exports__["a"] = empty;
-/* unused harmony export emptyScheduled */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/** PURE_IMPORTS_START _Observable PURE_IMPORTS_END */
-
-var EMPTY = /*@__PURE__*/ new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) { return subscriber.complete(); });
-function empty(scheduler) {
-    return scheduler ? emptyScheduled(scheduler) : EMPTY;
-}
-function emptyScheduled(scheduler) {
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) { return scheduler.schedule(function () { return subscriber.complete(); }); });
-}
-//# sourceMappingURL=empty.js.map
-
-
-/***/ }),
-/* 40 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return async; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__AsyncAction__ = __webpack_require__(149);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__ = __webpack_require__(150);
-/** PURE_IMPORTS_START _AsyncAction,_AsyncScheduler PURE_IMPORTS_END */
-
-
-var async = /*@__PURE__*/ new __WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__["a" /* AsyncScheduler */](__WEBPACK_IMPORTED_MODULE_0__AsyncAction__["a" /* AsyncAction */]);
-//# sourceMappingURL=async.js.map
-
-
-/***/ }),
-/* 41 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return isArray; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var isArray = Array.isArray || (function (x) { return x && typeof x.length === 'number'; });
-//# sourceMappingURL=isArray.js.map
-
-
-/***/ }),
-/* 42 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var dP = __webpack_require__(72);
-var createDesc = __webpack_require__(132);
-module.exports = __webpack_require__(51) ? function (object, key, value) {
-  return dP.f(object, key, createDesc(1, value));
-} : function (object, key, value) {
-  object[key] = value;
-  return object;
-};
-
-
-/***/ }),
-/* 43 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-
-function isNothing(subject) {
-  return (typeof subject === 'undefined') || (subject === null);
-}
-
-
-function isObject(subject) {
-  return (typeof subject === 'object') && (subject !== null);
-}
-
-
-function toArray(sequence) {
-  if (Array.isArray(sequence)) return sequence;
-  else if (isNothing(sequence)) return [];
-
-  return [ sequence ];
-}
-
-
-function extend(target, source) {
-  var index, length, key, sourceKeys;
-
-  if (source) {
-    sourceKeys = Object.keys(source);
-
-    for (index = 0, length = sourceKeys.length; index < length; index += 1) {
-      key = sourceKeys[index];
-      target[key] = source[key];
-    }
-  }
-
-  return target;
-}
-
-
-function repeat(string, count) {
-  var result = '', cycle;
-
-  for (cycle = 0; cycle < count; cycle += 1) {
-    result += string;
-  }
-
-  return result;
-}
-
-
-function isNegativeZero(number) {
-  return (number === 0) && (Number.NEGATIVE_INFINITY === 1 / number);
-}
-
-
-module.exports.isNothing      = isNothing;
-module.exports.isObject       = isObject;
-module.exports.toArray        = toArray;
-module.exports.repeat         = repeat;
-module.exports.isNegativeZero = isNegativeZero;
-module.exports.extend         = extend;
-
-
-/***/ }),
-/* 44 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-/*eslint-disable max-len*/
-
-var common        = __webpack_require__(43);
-var YAMLException = __webpack_require__(54);
-var Type          = __webpack_require__(10);
-
-
-function compileList(schema, name, result) {
-  var exclude = [];
-
-  schema.include.forEach(function (includedSchema) {
-    result = compileList(includedSchema, name, result);
-  });
-
-  schema[name].forEach(function (currentType) {
-    result.forEach(function (previousType, previousIndex) {
-      if (previousType.tag === currentType.tag && previousType.kind === currentType.kind) {
-        exclude.push(previousIndex);
-      }
-    });
-
-    result.push(currentType);
-  });
-
-  return result.filter(function (type, index) {
-    return exclude.indexOf(index) === -1;
-  });
-}
-
-
-function compileMap(/* lists... */) {
-  var result = {
-        scalar: {},
-        sequence: {},
-        mapping: {},
-        fallback: {}
-      }, index, length;
-
-  function collectType(type) {
-    result[type.kind][type.tag] = result['fallback'][type.tag] = type;
-  }
-
-  for (index = 0, length = arguments.length; index < length; index += 1) {
-    arguments[index].forEach(collectType);
-  }
-  return result;
-}
-
-
-function Schema(definition) {
-  this.include  = definition.include  || [];
-  this.implicit = definition.implicit || [];
-  this.explicit = definition.explicit || [];
-
-  this.implicit.forEach(function (type) {
-    if (type.loadKind && type.loadKind !== 'scalar') {
-      throw new YAMLException('There is a non-scalar type in the implicit list of a schema. Implicit resolving of such types is not supported.');
-    }
-  });
-
-  this.compiledImplicit = compileList(this, 'implicit', []);
-  this.compiledExplicit = compileList(this, 'explicit', []);
-  this.compiledTypeMap  = compileMap(this.compiledImplicit, this.compiledExplicit);
-}
-
-
-Schema.DEFAULT = null;
-
-
-Schema.create = function createSchema() {
-  var schemas, types;
-
-  switch (arguments.length) {
-    case 1:
-      schemas = Schema.DEFAULT;
-      types = arguments[0];
-      break;
-
-    case 2:
-      schemas = arguments[0];
-      types = arguments[1];
-      break;
-
-    default:
-      throw new YAMLException('Wrong number of arguments for Schema.create function');
-  }
-
-  schemas = common.toArray(schemas);
-  types = common.toArray(types);
-
-  if (!schemas.every(function (schema) { return schema instanceof Schema; })) {
-    throw new YAMLException('Specified list of super schemas (or a single Schema object) contains a non-Schema object.');
-  }
-
-  if (!types.every(function (type) { return type instanceof Type; })) {
-    throw new YAMLException('Specified list of YAML types (or a single Type object) contains a non-Type object.');
-  }
-
-  return new Schema({
-    include: schemas,
-    explicit: types
-  });
-};
-
-
-module.exports = Schema;
-
-
-/***/ }),
-/* 45 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/* eslint-disable node/no-deprecated-api */
-var buffer = __webpack_require__(64)
-var Buffer = buffer.Buffer
-
-// alternative to using Object.keys for old browsers
-function copyProps (src, dst) {
-  for (var key in src) {
-    dst[key] = src[key]
-  }
-}
-if (Buffer.from && Buffer.alloc && Buffer.allocUnsafe && Buffer.allocUnsafeSlow) {
-  module.exports = buffer
-} else {
-  // Copy properties from require('buffer')
-  copyProps(buffer, exports)
-  exports.Buffer = SafeBuffer
-}
-
-function SafeBuffer (arg, encodingOrOffset, length) {
-  return Buffer(arg, encodingOrOffset, length)
-}
-
-// Copy static methods from Buffer
-copyProps(Buffer, SafeBuffer)
-
-SafeBuffer.from = function (arg, encodingOrOffset, length) {
-  if (typeof arg === 'number') {
-    throw new TypeError('Argument must not be a number')
-  }
-  return Buffer(arg, encodingOrOffset, length)
-}
-
-SafeBuffer.alloc = function (size, fill, encoding) {
-  if (typeof size !== 'number') {
-    throw new TypeError('Argument must be a number')
-  }
-  var buf = Buffer(size)
-  if (fill !== undefined) {
-    if (typeof encoding === 'string') {
-      buf.fill(fill, encoding)
-    } else {
-      buf.fill(fill)
-    }
-  } else {
-    buf.fill(0)
-  }
-  return buf
-}
-
-SafeBuffer.allocUnsafe = function (size) {
-  if (typeof size !== 'number') {
-    throw new TypeError('Argument must be a number')
-  }
-  return Buffer(size)
-}
-
-SafeBuffer.allocUnsafeSlow = function (size) {
-  if (typeof size !== 'number') {
-    throw new TypeError('Argument must be a number')
-  }
-  return buffer.SlowBuffer(size)
-}
-
-
-/***/ }),
-/* 46 */
-/***/ (function(module, exports) {
-
-module.exports = require("os");
-
-/***/ }),
-/* 47 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = map;
-/* unused harmony export MapOperator */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function map(project, thisArg) {
-    return function mapOperation(source) {
-        if (typeof project !== 'function') {
-            throw new TypeError('argument is not a function. Are you looking for `mapTo()`?');
-        }
-        return source.lift(new MapOperator(project, thisArg));
-    };
-}
-var MapOperator = /*@__PURE__*/ (function () {
-    function MapOperator(project, thisArg) {
-        this.project = project;
-        this.thisArg = thisArg;
-    }
-    MapOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new MapSubscriber(subscriber, this.project, this.thisArg));
-    };
-    return MapOperator;
-}());
-
-var MapSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](MapSubscriber, _super);
-    function MapSubscriber(destination, project, thisArg) {
-        var _this = _super.call(this, destination) || this;
-        _this.project = project;
-        _this.count = 0;
-        _this.thisArg = thisArg || _this;
-        return _this;
-    }
-    MapSubscriber.prototype._next = function (value) {
-        var result;
-        try {
-            result = this.project.call(this.thisArg, value, this.count++);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(result);
-    };
-    return MapSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=map.js.map
-
-
-/***/ }),
-/* 48 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return errorObject; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var errorObject = { e: {} };
-//# sourceMappingURL=errorObject.js.map
-
-
-/***/ }),
-/* 49 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isScheduler;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function isScheduler(value) {
-    return value && typeof value.schedule === 'function';
-}
-//# sourceMappingURL=isScheduler.js.map
-
-
-/***/ }),
-/* 50 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.wait = wait;
-exports.promisify = promisify;
-exports.queue = queue;
-function wait(delay) {
-  return new Promise(resolve => {
-    setTimeout(resolve, delay);
-  });
-}
-
-function promisify(fn, firstData) {
-  return function (...args) {
-    return new Promise(function (resolve, reject) {
-      args.push(function (err, ...result) {
-        let res = result;
-
-        if (result.length <= 1) {
-          res = result[0];
-        }
-
-        if (firstData) {
-          res = err;
-          err = null;
-        }
-
-        if (err) {
-          reject(err);
-        } else {
-          resolve(res);
-        }
-      });
-
-      fn.apply(null, args);
-    });
-  };
-}
-
-function queue(arr, promiseProducer, concurrency = Infinity) {
-  concurrency = Math.min(concurrency, arr.length);
-
-  // clone
-  arr = arr.slice();
-
-  const results = [];
-  let total = arr.length;
-  if (!total) {
-    return Promise.resolve(results);
-  }
-
-  return new Promise((resolve, reject) => {
-    for (let i = 0; i < concurrency; i++) {
-      next();
-    }
-
-    function next() {
-      const item = arr.shift();
-      const promise = promiseProducer(item);
-
-      promise.then(function (result) {
-        results.push(result);
-
-        total--;
-        if (total === 0) {
-          resolve(results);
-        } else {
-          if (arr.length) {
-            next();
-          }
-        }
-      }, reject);
-    }
-  });
-}
-
-/***/ }),
-/* 51 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Thank's IE8 for his funny defineProperty
-module.exports = !__webpack_require__(112)(function () {
-  return Object.defineProperty({}, 'a', { get: function () { return 7; } }).a != 7;
-});
-
-
-/***/ }),
-/* 52 */
-/***/ (function(module, exports) {
-
-module.exports = function (it) {
-  return typeof it === 'object' ? it !== null : typeof it === 'function';
-};
-
-
-/***/ }),
-/* 53 */
-/***/ (function(module, exports) {
-
-module.exports = {};
-
-
-/***/ }),
-/* 54 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// YAML error class. http://stackoverflow.com/questions/8458984
-//
-
-
-function YAMLException(reason, mark) {
-  // Super constructor
-  Error.call(this);
-
-  this.name = 'YAMLException';
-  this.reason = reason;
-  this.mark = mark;
-  this.message = (this.reason || '(unknown reason)') + (this.mark ? ' ' + this.mark.toString() : '');
-
-  // Include stack trace in error object
-  if (Error.captureStackTrace) {
-    // Chrome and NodeJS
-    Error.captureStackTrace(this, this.constructor);
-  } else {
-    // FF, IE 10+ and Safari 6+. Fallback for others
-    this.stack = (new Error()).stack || '';
-  }
-}
-
-
-// Inherit from Error
-YAMLException.prototype = Object.create(Error.prototype);
-YAMLException.prototype.constructor = YAMLException;
-
-
-YAMLException.prototype.toString = function toString(compact) {
-  var result = this.name + ': ';
-
-  result += this.reason || '(unknown reason)';
-
-  if (!compact && this.mark) {
-    result += ' ' + this.mark.toString();
-  }
-
-  return result;
-};
-
-
-module.exports = YAMLException;
-
-
-/***/ }),
-/* 55 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// JS-YAML's default schema for `safeLoad` function.
-// It is not described in the YAML specification.
-//
-// This schema is based on standard YAML's Core schema and includes most of
-// extra types described at YAML tag repository. (http://yaml.org/type/)
-
-
-
-
-
-var Schema = __webpack_require__(44);
-
-
-module.exports = new Schema({
-  include: [
-    __webpack_require__(143)
-  ],
-  implicit: [
-    __webpack_require__(299),
-    __webpack_require__(292)
-  ],
-  explicit: [
-    __webpack_require__(284),
-    __webpack_require__(294),
-    __webpack_require__(295),
-    __webpack_require__(297)
-  ]
-});
-
-
-/***/ }),
-/* 56 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = tryCatch;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__errorObject__ = __webpack_require__(48);
-/** PURE_IMPORTS_START _errorObject PURE_IMPORTS_END */
-
-var tryCatchTarget;
-function tryCatcher() {
-    try {
-        return tryCatchTarget.apply(this, arguments);
-    }
-    catch (e) {
-        __WEBPACK_IMPORTED_MODULE_0__errorObject__["a" /* errorObject */].e = e;
-        return __WEBPACK_IMPORTED_MODULE_0__errorObject__["a" /* errorObject */];
-    }
-}
-function tryCatch(fn) {
-    tryCatchTarget = fn;
-    return tryCatcher;
-}
-//# sourceMappingURL=tryCatch.js.map
-
-
-/***/ }),
-/* 57 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.registryNames = exports.registries = undefined;
-
-var _yarnRegistry;
-
-function _load_yarnRegistry() {
-  return _yarnRegistry = _interopRequireDefault(__webpack_require__(559));
-}
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const registries = exports.registries = {
-  npm: (_npmRegistry || _load_npmRegistry()).default,
-  yarn: (_yarnRegistry || _load_yarnRegistry()).default
-};
-
-const registryNames = exports.registryNames = Object.keys(registries);
-
-/***/ }),
-/* 58 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.exec = exports.queue = undefined;
-exports.forkp = forkp;
-exports.spawnp = spawnp;
-exports.forwardSignalToSpawnedProcesses = forwardSignalToSpawnedProcesses;
-exports.spawn = spawn;
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _blockingQueue;
-
-function _load_blockingQueue() {
-  return _blockingQueue = _interopRequireDefault(__webpack_require__(110));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _promise;
-
-function _load_promise() {
-  return _promise = __webpack_require__(50);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-/* global child_process$spawnOpts */
-
-const child = __webpack_require__(331);
-
-const queue = exports.queue = new (_blockingQueue || _load_blockingQueue()).default('child', (_constants || _load_constants()).CHILD_CONCURRENCY);
-
-// TODO: this uid check is kinda whack
-let uid = 0;
-
-const exec = exports.exec = (0, (_promise || _load_promise()).promisify)(child.exec);
-
-function forkp(program, args, opts) {
-  return new Promise((resolve, reject) => {
-    const proc = child.fork(program, args, opts);
-
-    proc.on('error', error => {
-      reject(error);
-    });
-
-    proc.on('close', exitCode => {
-      resolve(exitCode);
-    });
-  });
-}
-
-function spawnp(program, args, opts) {
-  return new Promise((resolve, reject) => {
-    const proc = child.spawn(program, args, opts);
-
-    proc.on('error', error => {
-      reject(error);
-    });
-
-    proc.on('close', exitCode => {
-      resolve(exitCode);
-    });
-  });
-}
-
-const spawnedProcesses = {};
-
-function forwardSignalToSpawnedProcesses(signal) {
-  for (var _iterator = Object.keys(spawnedProcesses), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const key = _ref;
-
-    spawnedProcesses[key].kill(signal);
-  }
-}
-
-function spawn(program, args, opts = {}, onData) {
-  const key = opts.cwd || String(++uid);
-  return queue.push(key, () => new Promise((resolve, reject) => {
-    const proc = child.spawn(program, args, opts);
-    spawnedProcesses[key] = proc;
-
-    let processingDone = false;
-    let processClosed = false;
-    let err = null;
-
-    let stdout = '';
-
-    proc.on('error', err => {
-      if (err.code === 'ENOENT') {
-        reject(new (_errors || _load_errors()).ProcessSpawnError(`Couldn't find the binary ${program}`, err.code, program));
-      } else {
-        reject(err);
-      }
-    });
-
-    function updateStdout(chunk) {
-      stdout += chunk;
-      if (onData) {
-        onData(chunk);
-      }
-    }
-
-    function finish() {
-      delete spawnedProcesses[key];
-      if (err) {
-        reject(err);
-      } else {
-        resolve(stdout.trim());
-      }
-    }
-
-    if (typeof opts.process === 'function') {
-      opts.process(proc, updateStdout, reject, function () {
-        if (processClosed) {
-          finish();
-        } else {
-          processingDone = true;
-        }
-      });
-    } else {
-      if (proc.stderr) {
-        proc.stderr.on('data', updateStdout);
-      }
-
-      if (proc.stdout) {
-        proc.stdout.on('data', updateStdout);
-      }
-
-      processingDone = true;
-    }
-
-    proc.on('close', (code, signal) => {
-      if (signal || code >= 1) {
-        err = new (_errors || _load_errors()).ProcessTermError(['Command failed.', signal ? `Exit signal: ${signal}` : `Exit code: ${code}`, `Command: ${program}`, `Arguments: ${args.join(' ')}`, `Directory: ${opts.cwd || process.cwd()}`, `Output:\n${stdout.trim()}`].join('\n'));
-        err.EXIT_SIGNAL = signal;
-        err.EXIT_CODE = code;
-      }
-
-      if (processingDone || err) {
-        finish();
-      } else {
-        processClosed = true;
-      }
-    });
-  }));
-}
-
-/***/ }),
-/* 59 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-exports.default = function (rootCommandName, subCommands, usage = []) {
-  let run = (() => {
-    var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-      const subName = (0, (_misc || _load_misc()).camelCase)(args.shift() || '');
-      if (subName && subCommands[subName]) {
-        const command = subCommands[subName];
-        const res = yield command(config, reporter, flags, args);
-        if (res !== false) {
-          return Promise.resolve();
-        }
-      }
-
-      if (usage && usage.length) {
-        reporter.error(`${reporter.lang('usage')}:`);
-        for (var _iterator = usage, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-          var _ref2;
-
-          if (_isArray) {
-            if (_i >= _iterator.length) break;
-            _ref2 = _iterator[_i++];
-          } else {
-            _i = _iterator.next();
-            if (_i.done) break;
-            _ref2 = _i.value;
-          }
-
-          const msg = _ref2;
-
-          reporter.error(`yarn ${rootCommandName} ${msg}`);
-        }
-      }
-      return Promise.reject(new (_errors || _load_errors()).MessageError(reporter.lang('invalidCommand', subCommandNames.join(', '))));
-    });
-
-    return function run(_x, _x2, _x3, _x4) {
-      return _ref.apply(this, arguments);
-    };
-  })();
-
-  const subCommandNames = Object.keys(subCommands).map((_misc || _load_misc()).hyphenate);
-
-  function setFlags(commander) {
-    commander.usage(`${rootCommandName} [${subCommandNames.join('|')}] [flags]`);
-  }
-
-  function hasWrapper(commander, args) {
-    return true;
-  }
-
-  const examples = usage.map(cmd => {
-    return `${rootCommandName} ${cmd}`;
-  });
-
-  return { run, setFlags, hasWrapper, examples };
-};
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/***/ }),
-/* 60 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var global = __webpack_require__(17);
-var core = __webpack_require__(31);
-var ctx = __webpack_require__(70);
-var hide = __webpack_require__(42);
-var has = __webpack_require__(71);
-var PROTOTYPE = 'prototype';
-
-var $export = function (type, name, source) {
-  var IS_FORCED = type & $export.F;
-  var IS_GLOBAL = type & $export.G;
-  var IS_STATIC = type & $export.S;
-  var IS_PROTO = type & $export.P;
-  var IS_BIND = type & $export.B;
-  var IS_WRAP = type & $export.W;
-  var exports = IS_GLOBAL ? core : core[name] || (core[name] = {});
-  var expProto = exports[PROTOTYPE];
-  var target = IS_GLOBAL ? global : IS_STATIC ? global[name] : (global[name] || {})[PROTOTYPE];
-  var key, own, out;
-  if (IS_GLOBAL) source = name;
-  for (key in source) {
-    // contains in native
-    own = !IS_FORCED && target && target[key] !== undefined;
-    if (own && has(exports, key)) continue;
-    // export native or passed
-    out = own ? target[key] : source[key];
-    // prevent global pollution for namespaces
-    exports[key] = IS_GLOBAL && typeof target[key] != 'function' ? source[key]
-    // bind timers to global for call from export context
-    : IS_BIND && own ? ctx(out, global)
-    // wrap global constructors for prevent change them in library
-    : IS_WRAP && target[key] == out ? (function (C) {
-      var F = function (a, b, c) {
-        if (this instanceof C) {
-          switch (arguments.length) {
-            case 0: return new C();
-            case 1: return new C(a);
-            case 2: return new C(a, b);
-          } return new C(a, b, c);
-        } return C.apply(this, arguments);
-      };
-      F[PROTOTYPE] = C[PROTOTYPE];
-      return F;
-    // make static versions for prototype methods
-    })(out) : IS_PROTO && typeof out == 'function' ? ctx(Function.call, out) : out;
-    // export proto methods to core.%CONSTRUCTOR%.methods.%NAME%
-    if (IS_PROTO) {
-      (exports.virtual || (exports.virtual = {}))[key] = out;
-      // export proto methods to core.%CONSTRUCTOR%.prototype.%NAME%
-      if (type & $export.R && expProto && !expProto[key]) hide(expProto, key, out);
-    }
-  }
-};
-// type bitmap
-$export.F = 1;   // forced
-$export.G = 2;   // global
-$export.S = 4;   // static
-$export.P = 8;   // proto
-$export.B = 16;  // bind
-$export.W = 32;  // wrap
-$export.U = 64;  // safe
-$export.R = 128; // real proto method for `library`
-module.exports = $export;
-
-
-/***/ }),
-/* 61 */
-/***/ (function(module, exports, __webpack_require__) {
-
-try {
-  var util = __webpack_require__(3);
-  if (typeof util.inherits !== 'function') throw '';
-  module.exports = util.inherits;
-} catch (e) {
-  module.exports = __webpack_require__(275);
-}
-
-
-/***/ }),
-/* 62 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = from;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isPromise__ = __webpack_require__(445);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isArrayLike__ = __webpack_require__(442);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_isInteropObservable__ = __webpack_require__(928);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_isIterable__ = __webpack_require__(929);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__fromArray__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__fromPromise__ = __webpack_require__(830);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__fromIterable__ = __webpack_require__(828);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__fromObservable__ = __webpack_require__(829);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__util_subscribeTo__ = __webpack_require__(446);
-/** PURE_IMPORTS_START _Observable,_util_isPromise,_util_isArrayLike,_util_isInteropObservable,_util_isIterable,_fromArray,_fromPromise,_fromIterable,_fromObservable,_util_subscribeTo PURE_IMPORTS_END */
-
-
-
-
-
-
-
-
-
-
-function from(input, scheduler) {
-    if (!scheduler) {
-        if (input instanceof __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */]) {
-            return input;
-        }
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_9__util_subscribeTo__["a" /* subscribeTo */])(input));
-    }
-    if (input != null) {
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_isInteropObservable__["a" /* isInteropObservable */])(input)) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_8__fromObservable__["a" /* fromObservable */])(input, scheduler);
-        }
-        else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isPromise__["a" /* isPromise */])(input)) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__fromPromise__["a" /* fromPromise */])(input, scheduler);
-        }
-        else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArrayLike__["a" /* isArrayLike */])(input)) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__fromArray__["a" /* fromArray */])(input, scheduler);
-        }
-        else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isIterable__["a" /* isIterable */])(input) || typeof input === 'string') {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_7__fromIterable__["a" /* fromIterable */])(input, scheduler);
-        }
-    }
-    throw new TypeError((input !== null && typeof input || input) + ' is not observable');
-}
-//# sourceMappingURL=from.js.map
-
-
-/***/ }),
-/* 63 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__internal_operators_audit__ = __webpack_require__(428);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "audit", function() { return __WEBPACK_IMPORTED_MODULE_0__internal_operators_audit__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__internal_operators_auditTime__ = __webpack_require__(838);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "auditTime", function() { return __WEBPACK_IMPORTED_MODULE_1__internal_operators_auditTime__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__internal_operators_buffer__ = __webpack_require__(839);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "buffer", function() { return __WEBPACK_IMPORTED_MODULE_2__internal_operators_buffer__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__internal_operators_bufferCount__ = __webpack_require__(840);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "bufferCount", function() { return __WEBPACK_IMPORTED_MODULE_3__internal_operators_bufferCount__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__internal_operators_bufferTime__ = __webpack_require__(841);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "bufferTime", function() { return __WEBPACK_IMPORTED_MODULE_4__internal_operators_bufferTime__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__internal_operators_bufferToggle__ = __webpack_require__(842);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "bufferToggle", function() { return __WEBPACK_IMPORTED_MODULE_5__internal_operators_bufferToggle__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__internal_operators_bufferWhen__ = __webpack_require__(843);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "bufferWhen", function() { return __WEBPACK_IMPORTED_MODULE_6__internal_operators_bufferWhen__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__internal_operators_catchError__ = __webpack_require__(844);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "catchError", function() { return __WEBPACK_IMPORTED_MODULE_7__internal_operators_catchError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__internal_operators_combineAll__ = __webpack_require__(845);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "combineAll", function() { return __WEBPACK_IMPORTED_MODULE_8__internal_operators_combineAll__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__internal_operators_combineLatest__ = __webpack_require__(846);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "combineLatest", function() { return __WEBPACK_IMPORTED_MODULE_9__internal_operators_combineLatest__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__internal_operators_concat__ = __webpack_require__(847);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "concat", function() { return __WEBPACK_IMPORTED_MODULE_10__internal_operators_concat__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__internal_operators_concatAll__ = __webpack_require__(429);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "concatAll", function() { return __WEBPACK_IMPORTED_MODULE_11__internal_operators_concatAll__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__internal_operators_concatMap__ = __webpack_require__(430);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "concatMap", function() { return __WEBPACK_IMPORTED_MODULE_12__internal_operators_concatMap__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__internal_operators_concatMapTo__ = __webpack_require__(848);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "concatMapTo", function() { return __WEBPACK_IMPORTED_MODULE_13__internal_operators_concatMapTo__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__internal_operators_count__ = __webpack_require__(849);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "count", function() { return __WEBPACK_IMPORTED_MODULE_14__internal_operators_count__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__internal_operators_debounce__ = __webpack_require__(850);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "debounce", function() { return __WEBPACK_IMPORTED_MODULE_15__internal_operators_debounce__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__internal_operators_debounceTime__ = __webpack_require__(851);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "debounceTime", function() { return __WEBPACK_IMPORTED_MODULE_16__internal_operators_debounceTime__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__internal_operators_defaultIfEmpty__ = __webpack_require__(146);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "defaultIfEmpty", function() { return __WEBPACK_IMPORTED_MODULE_17__internal_operators_defaultIfEmpty__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__internal_operators_delay__ = __webpack_require__(852);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "delay", function() { return __WEBPACK_IMPORTED_MODULE_18__internal_operators_delay__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__internal_operators_delayWhen__ = __webpack_require__(853);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "delayWhen", function() { return __WEBPACK_IMPORTED_MODULE_19__internal_operators_delayWhen__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__internal_operators_dematerialize__ = __webpack_require__(854);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "dematerialize", function() { return __WEBPACK_IMPORTED_MODULE_20__internal_operators_dematerialize__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__internal_operators_distinct__ = __webpack_require__(855);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "distinct", function() { return __WEBPACK_IMPORTED_MODULE_21__internal_operators_distinct__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__internal_operators_distinctUntilChanged__ = __webpack_require__(431);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "distinctUntilChanged", function() { return __WEBPACK_IMPORTED_MODULE_22__internal_operators_distinctUntilChanged__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__internal_operators_distinctUntilKeyChanged__ = __webpack_require__(856);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "distinctUntilKeyChanged", function() { return __WEBPACK_IMPORTED_MODULE_23__internal_operators_distinctUntilKeyChanged__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_24__internal_operators_elementAt__ = __webpack_require__(857);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "elementAt", function() { return __WEBPACK_IMPORTED_MODULE_24__internal_operators_elementAt__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_25__internal_operators_endWith__ = __webpack_require__(858);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "endWith", function() { return __WEBPACK_IMPORTED_MODULE_25__internal_operators_endWith__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_26__internal_operators_every__ = __webpack_require__(859);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "every", function() { return __WEBPACK_IMPORTED_MODULE_26__internal_operators_every__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__internal_operators_exhaust__ = __webpack_require__(860);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "exhaust", function() { return __WEBPACK_IMPORTED_MODULE_27__internal_operators_exhaust__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_28__internal_operators_exhaustMap__ = __webpack_require__(861);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "exhaustMap", function() { return __WEBPACK_IMPORTED_MODULE_28__internal_operators_exhaustMap__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_29__internal_operators_expand__ = __webpack_require__(862);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "expand", function() { return __WEBPACK_IMPORTED_MODULE_29__internal_operators_expand__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_30__internal_operators_filter__ = __webpack_require__(147);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "filter", function() { return __WEBPACK_IMPORTED_MODULE_30__internal_operators_filter__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_31__internal_operators_finalize__ = __webpack_require__(863);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "finalize", function() { return __WEBPACK_IMPORTED_MODULE_31__internal_operators_finalize__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_32__internal_operators_find__ = __webpack_require__(432);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "find", function() { return __WEBPACK_IMPORTED_MODULE_32__internal_operators_find__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_33__internal_operators_findIndex__ = __webpack_require__(864);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "findIndex", function() { return __WEBPACK_IMPORTED_MODULE_33__internal_operators_findIndex__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_34__internal_operators_first__ = __webpack_require__(865);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "first", function() { return __WEBPACK_IMPORTED_MODULE_34__internal_operators_first__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_35__internal_operators_groupBy__ = __webpack_require__(433);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "groupBy", function() { return __WEBPACK_IMPORTED_MODULE_35__internal_operators_groupBy__["b"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_36__internal_operators_ignoreElements__ = __webpack_require__(866);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ignoreElements", function() { return __WEBPACK_IMPORTED_MODULE_36__internal_operators_ignoreElements__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_37__internal_operators_isEmpty__ = __webpack_require__(867);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isEmpty", function() { return __WEBPACK_IMPORTED_MODULE_37__internal_operators_isEmpty__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_38__internal_operators_last__ = __webpack_require__(868);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "last", function() { return __WEBPACK_IMPORTED_MODULE_38__internal_operators_last__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_39__internal_operators_map__ = __webpack_require__(47);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "map", function() { return __WEBPACK_IMPORTED_MODULE_39__internal_operators_map__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_40__internal_operators_mapTo__ = __webpack_require__(869);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mapTo", function() { return __WEBPACK_IMPORTED_MODULE_40__internal_operators_mapTo__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_41__internal_operators_materialize__ = __webpack_require__(870);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "materialize", function() { return __WEBPACK_IMPORTED_MODULE_41__internal_operators_materialize__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_42__internal_operators_max__ = __webpack_require__(871);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "max", function() { return __WEBPACK_IMPORTED_MODULE_42__internal_operators_max__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_43__internal_operators_merge__ = __webpack_require__(872);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "merge", function() { return __WEBPACK_IMPORTED_MODULE_43__internal_operators_merge__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_44__internal_operators_mergeAll__ = __webpack_require__(315);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mergeAll", function() { return __WEBPACK_IMPORTED_MODULE_44__internal_operators_mergeAll__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_45__internal_operators_mergeMap__ = __webpack_require__(148);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mergeMap", function() { return __WEBPACK_IMPORTED_MODULE_45__internal_operators_mergeMap__["a"]; });
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "flatMap", function() { return __WEBPACK_IMPORTED_MODULE_45__internal_operators_mergeMap__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_46__internal_operators_mergeMapTo__ = __webpack_require__(873);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mergeMapTo", function() { return __WEBPACK_IMPORTED_MODULE_46__internal_operators_mergeMapTo__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_47__internal_operators_mergeScan__ = __webpack_require__(874);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "mergeScan", function() { return __WEBPACK_IMPORTED_MODULE_47__internal_operators_mergeScan__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_48__internal_operators_min__ = __webpack_require__(875);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "min", function() { return __WEBPACK_IMPORTED_MODULE_48__internal_operators_min__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_49__internal_operators_multicast__ = __webpack_require__(116);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "multicast", function() { return __WEBPACK_IMPORTED_MODULE_49__internal_operators_multicast__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_50__internal_operators_observeOn__ = __webpack_require__(434);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "observeOn", function() { return __WEBPACK_IMPORTED_MODULE_50__internal_operators_observeOn__["b"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_51__internal_operators_onErrorResumeNext__ = __webpack_require__(876);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "onErrorResumeNext", function() { return __WEBPACK_IMPORTED_MODULE_51__internal_operators_onErrorResumeNext__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_52__internal_operators_pairwise__ = __webpack_require__(877);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "pairwise", function() { return __WEBPACK_IMPORTED_MODULE_52__internal_operators_pairwise__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_53__internal_operators_partition__ = __webpack_require__(878);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "partition", function() { return __WEBPACK_IMPORTED_MODULE_53__internal_operators_partition__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_54__internal_operators_pluck__ = __webpack_require__(879);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "pluck", function() { return __WEBPACK_IMPORTED_MODULE_54__internal_operators_pluck__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_55__internal_operators_publish__ = __webpack_require__(880);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "publish", function() { return __WEBPACK_IMPORTED_MODULE_55__internal_operators_publish__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_56__internal_operators_publishBehavior__ = __webpack_require__(881);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "publishBehavior", function() { return __WEBPACK_IMPORTED_MODULE_56__internal_operators_publishBehavior__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_57__internal_operators_publishLast__ = __webpack_require__(882);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "publishLast", function() { return __WEBPACK_IMPORTED_MODULE_57__internal_operators_publishLast__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_58__internal_operators_publishReplay__ = __webpack_require__(883);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "publishReplay", function() { return __WEBPACK_IMPORTED_MODULE_58__internal_operators_publishReplay__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_59__internal_operators_race__ = __webpack_require__(884);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "race", function() { return __WEBPACK_IMPORTED_MODULE_59__internal_operators_race__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_60__internal_operators_reduce__ = __webpack_require__(187);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "reduce", function() { return __WEBPACK_IMPORTED_MODULE_60__internal_operators_reduce__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_61__internal_operators_repeat__ = __webpack_require__(885);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "repeat", function() { return __WEBPACK_IMPORTED_MODULE_61__internal_operators_repeat__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_62__internal_operators_repeatWhen__ = __webpack_require__(886);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "repeatWhen", function() { return __WEBPACK_IMPORTED_MODULE_62__internal_operators_repeatWhen__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_63__internal_operators_retry__ = __webpack_require__(887);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "retry", function() { return __WEBPACK_IMPORTED_MODULE_63__internal_operators_retry__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_64__internal_operators_retryWhen__ = __webpack_require__(888);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "retryWhen", function() { return __WEBPACK_IMPORTED_MODULE_64__internal_operators_retryWhen__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_65__internal_operators_refCount__ = __webpack_require__(316);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "refCount", function() { return __WEBPACK_IMPORTED_MODULE_65__internal_operators_refCount__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_66__internal_operators_sample__ = __webpack_require__(889);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "sample", function() { return __WEBPACK_IMPORTED_MODULE_66__internal_operators_sample__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_67__internal_operators_sampleTime__ = __webpack_require__(890);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "sampleTime", function() { return __WEBPACK_IMPORTED_MODULE_67__internal_operators_sampleTime__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_68__internal_operators_scan__ = __webpack_require__(317);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "scan", function() { return __WEBPACK_IMPORTED_MODULE_68__internal_operators_scan__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_69__internal_operators_sequenceEqual__ = __webpack_require__(891);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "sequenceEqual", function() { return __WEBPACK_IMPORTED_MODULE_69__internal_operators_sequenceEqual__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_70__internal_operators_share__ = __webpack_require__(892);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "share", function() { return __WEBPACK_IMPORTED_MODULE_70__internal_operators_share__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_71__internal_operators_shareReplay__ = __webpack_require__(893);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "shareReplay", function() { return __WEBPACK_IMPORTED_MODULE_71__internal_operators_shareReplay__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_72__internal_operators_single__ = __webpack_require__(894);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "single", function() { return __WEBPACK_IMPORTED_MODULE_72__internal_operators_single__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_73__internal_operators_skip__ = __webpack_require__(895);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "skip", function() { return __WEBPACK_IMPORTED_MODULE_73__internal_operators_skip__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_74__internal_operators_skipLast__ = __webpack_require__(896);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "skipLast", function() { return __WEBPACK_IMPORTED_MODULE_74__internal_operators_skipLast__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_75__internal_operators_skipUntil__ = __webpack_require__(897);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "skipUntil", function() { return __WEBPACK_IMPORTED_MODULE_75__internal_operators_skipUntil__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_76__internal_operators_skipWhile__ = __webpack_require__(898);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "skipWhile", function() { return __WEBPACK_IMPORTED_MODULE_76__internal_operators_skipWhile__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_77__internal_operators_startWith__ = __webpack_require__(899);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "startWith", function() { return __WEBPACK_IMPORTED_MODULE_77__internal_operators_startWith__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_78__internal_operators_subscribeOn__ = __webpack_require__(900);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "subscribeOn", function() { return __WEBPACK_IMPORTED_MODULE_78__internal_operators_subscribeOn__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_79__internal_operators_switchAll__ = __webpack_require__(901);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "switchAll", function() { return __WEBPACK_IMPORTED_MODULE_79__internal_operators_switchAll__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_80__internal_operators_switchMap__ = __webpack_require__(318);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "switchMap", function() { return __WEBPACK_IMPORTED_MODULE_80__internal_operators_switchMap__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_81__internal_operators_switchMapTo__ = __webpack_require__(902);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "switchMapTo", function() { return __WEBPACK_IMPORTED_MODULE_81__internal_operators_switchMapTo__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_82__internal_operators_take__ = __webpack_require__(319);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "take", function() { return __WEBPACK_IMPORTED_MODULE_82__internal_operators_take__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_83__internal_operators_takeLast__ = __webpack_require__(320);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "takeLast", function() { return __WEBPACK_IMPORTED_MODULE_83__internal_operators_takeLast__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_84__internal_operators_takeUntil__ = __webpack_require__(903);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "takeUntil", function() { return __WEBPACK_IMPORTED_MODULE_84__internal_operators_takeUntil__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_85__internal_operators_takeWhile__ = __webpack_require__(904);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "takeWhile", function() { return __WEBPACK_IMPORTED_MODULE_85__internal_operators_takeWhile__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_86__internal_operators_tap__ = __webpack_require__(435);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "tap", function() { return __WEBPACK_IMPORTED_MODULE_86__internal_operators_tap__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_87__internal_operators_throttle__ = __webpack_require__(436);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "throttle", function() { return __WEBPACK_IMPORTED_MODULE_87__internal_operators_throttle__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_88__internal_operators_throttleTime__ = __webpack_require__(905);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "throttleTime", function() { return __WEBPACK_IMPORTED_MODULE_88__internal_operators_throttleTime__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_89__internal_operators_throwIfEmpty__ = __webpack_require__(188);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "throwIfEmpty", function() { return __WEBPACK_IMPORTED_MODULE_89__internal_operators_throwIfEmpty__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_90__internal_operators_timeInterval__ = __webpack_require__(906);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "timeInterval", function() { return __WEBPACK_IMPORTED_MODULE_90__internal_operators_timeInterval__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_91__internal_operators_timeout__ = __webpack_require__(907);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "timeout", function() { return __WEBPACK_IMPORTED_MODULE_91__internal_operators_timeout__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_92__internal_operators_timeoutWith__ = __webpack_require__(437);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "timeoutWith", function() { return __WEBPACK_IMPORTED_MODULE_92__internal_operators_timeoutWith__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_93__internal_operators_timestamp__ = __webpack_require__(908);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "timestamp", function() { return __WEBPACK_IMPORTED_MODULE_93__internal_operators_timestamp__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_94__internal_operators_toArray__ = __webpack_require__(909);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "toArray", function() { return __WEBPACK_IMPORTED_MODULE_94__internal_operators_toArray__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_95__internal_operators_window__ = __webpack_require__(910);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "window", function() { return __WEBPACK_IMPORTED_MODULE_95__internal_operators_window__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_96__internal_operators_windowCount__ = __webpack_require__(911);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "windowCount", function() { return __WEBPACK_IMPORTED_MODULE_96__internal_operators_windowCount__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_97__internal_operators_windowTime__ = __webpack_require__(912);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "windowTime", function() { return __WEBPACK_IMPORTED_MODULE_97__internal_operators_windowTime__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_98__internal_operators_windowToggle__ = __webpack_require__(913);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "windowToggle", function() { return __WEBPACK_IMPORTED_MODULE_98__internal_operators_windowToggle__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_99__internal_operators_windowWhen__ = __webpack_require__(914);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "windowWhen", function() { return __WEBPACK_IMPORTED_MODULE_99__internal_operators_windowWhen__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_100__internal_operators_withLatestFrom__ = __webpack_require__(915);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "withLatestFrom", function() { return __WEBPACK_IMPORTED_MODULE_100__internal_operators_withLatestFrom__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_101__internal_operators_zip__ = __webpack_require__(916);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "zip", function() { return __WEBPACK_IMPORTED_MODULE_101__internal_operators_zip__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_102__internal_operators_zipAll__ = __webpack_require__(917);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "zipAll", function() { return __WEBPACK_IMPORTED_MODULE_102__internal_operators_zipAll__["a"]; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-//# sourceMappingURL=index.js.map
-
-
-/***/ }),
-/* 64 */
-/***/ (function(module, exports) {
-
-module.exports = require("buffer");
-
-/***/ }),
-/* 65 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-const Buffer = __webpack_require__(45).Buffer
-
-const crypto = __webpack_require__(11)
-const Transform = __webpack_require__(23).Transform
-
-const SPEC_ALGORITHMS = ['sha256', 'sha384', 'sha512']
-
-const BASE64_REGEX = /^[a-z0-9+/]+(?:=?=?)$/i
-const SRI_REGEX = /^([^-]+)-([^?]+)([?\S*]*)$/
-const STRICT_SRI_REGEX = /^([^-]+)-([A-Za-z0-9+/=]{44,88})(\?[\x21-\x7E]*)*$/
-const VCHAR_REGEX = /^[\x21-\x7E]+$/
-
-class Hash {
-  get isHash () { return true }
-  constructor (hash, opts) {
-    const strict = !!(opts && opts.strict)
-    this.source = hash.trim()
-    // 3.1. Integrity metadata (called "Hash" by ssri)
-    // https://w3c.github.io/webappsec-subresource-integrity/#integrity-metadata-description
-    const match = this.source.match(
-      strict
-      ? STRICT_SRI_REGEX
-      : SRI_REGEX
-    )
-    if (!match) { return }
-    if (strict && !SPEC_ALGORITHMS.some(a => a === match[1])) { return }
-    this.algorithm = match[1]
-    this.digest = match[2]
-
-    const rawOpts = match[3]
-    this.options = rawOpts ? rawOpts.slice(1).split('?') : []
-  }
-  hexDigest () {
-    return this.digest && Buffer.from(this.digest, 'base64').toString('hex')
-  }
-  toJSON () {
-    return this.toString()
-  }
-  toString (opts) {
-    if (opts && opts.strict) {
-      // Strict mode enforces the standard as close to the foot of the
-      // letter as it can.
-      if (!(
-        // The spec has very restricted productions for algorithms.
-        // https://www.w3.org/TR/CSP2/#source-list-syntax
-        SPEC_ALGORITHMS.some(x => x === this.algorithm) &&
-        // Usually, if someone insists on using a "different" base64, we
-        // leave it as-is, since there's multiple standards, and the
-        // specified is not a URL-safe variant.
-        // https://www.w3.org/TR/CSP2/#base64_value
-        this.digest.match(BASE64_REGEX) &&
-        // Option syntax is strictly visual chars.
-        // https://w3c.github.io/webappsec-subresource-integrity/#grammardef-option-expression
-        // https://tools.ietf.org/html/rfc5234#appendix-B.1
-        (this.options || []).every(opt => opt.match(VCHAR_REGEX))
-      )) {
-        return ''
-      }
-    }
-    const options = this.options && this.options.length
-    ? `?${this.options.join('?')}`
-    : ''
-    return `${this.algorithm}-${this.digest}${options}`
-  }
-}
-
-class Integrity {
-  get isIntegrity () { return true }
-  toJSON () {
-    return this.toString()
-  }
-  toString (opts) {
-    opts = opts || {}
-    let sep = opts.sep || ' '
-    if (opts.strict) {
-      // Entries must be separated by whitespace, according to spec.
-      sep = sep.replace(/\S+/g, ' ')
-    }
-    return Object.keys(this).map(k => {
-      return this[k].map(hash => {
-        return Hash.prototype.toString.call(hash, opts)
-      }).filter(x => x.length).join(sep)
-    }).filter(x => x.length).join(sep)
-  }
-  concat (integrity, opts) {
-    const other = typeof integrity === 'string'
-    ? integrity
-    : stringify(integrity, opts)
-    return parse(`${this.toString(opts)} ${other}`, opts)
-  }
-  hexDigest () {
-    return parse(this, {single: true}).hexDigest()
-  }
-  match (integrity, opts) {
-    const other = parse(integrity, opts)
-    const algo = other.pickAlgorithm(opts)
-    return (
-      this[algo] &&
-      other[algo] &&
-      this[algo].find(hash =>
-        other[algo].find(otherhash =>
-          hash.digest === otherhash.digest
-        )
-      )
-    ) || false
-  }
-  pickAlgorithm (opts) {
-    const pickAlgorithm = (opts && opts.pickAlgorithm) || getPrioritizedHash
-    const keys = Object.keys(this)
-    if (!keys.length) {
-      throw new Error(`No algorithms available for ${
-        JSON.stringify(this.toString())
-      }`)
-    }
-    return keys.reduce((acc, algo) => {
-      return pickAlgorithm(acc, algo) || acc
-    })
-  }
-}
-
-module.exports.parse = parse
-function parse (sri, opts) {
-  opts = opts || {}
-  if (typeof sri === 'string') {
-    return _parse(sri, opts)
-  } else if (sri.algorithm && sri.digest) {
-    const fullSri = new Integrity()
-    fullSri[sri.algorithm] = [sri]
-    return _parse(stringify(fullSri, opts), opts)
-  } else {
-    return _parse(stringify(sri, opts), opts)
-  }
-}
-
-function _parse (integrity, opts) {
-  // 3.4.3. Parse metadata
-  // https://w3c.github.io/webappsec-subresource-integrity/#parse-metadata
-  if (opts.single) {
-    return new Hash(integrity, opts)
-  }
-  return integrity.trim().split(/\s+/).reduce((acc, string) => {
-    const hash = new Hash(string, opts)
-    if (hash.algorithm && hash.digest) {
-      const algo = hash.algorithm
-      if (!acc[algo]) { acc[algo] = [] }
-      acc[algo].push(hash)
-    }
-    return acc
-  }, new Integrity())
-}
-
-module.exports.stringify = stringify
-function stringify (obj, opts) {
-  if (obj.algorithm && obj.digest) {
-    return Hash.prototype.toString.call(obj, opts)
-  } else if (typeof obj === 'string') {
-    return stringify(parse(obj, opts), opts)
-  } else {
-    return Integrity.prototype.toString.call(obj, opts)
-  }
-}
-
-module.exports.fromHex = fromHex
-function fromHex (hexDigest, algorithm, opts) {
-  const optString = (opts && opts.options && opts.options.length)
-  ? `?${opts.options.join('?')}`
-  : ''
-  return parse(
-    `${algorithm}-${
-      Buffer.from(hexDigest, 'hex').toString('base64')
-    }${optString}`, opts
-  )
-}
-
-module.exports.fromData = fromData
-function fromData (data, opts) {
-  opts = opts || {}
-  const algorithms = opts.algorithms || ['sha512']
-  const optString = opts.options && opts.options.length
-  ? `?${opts.options.join('?')}`
-  : ''
-  return algorithms.reduce((acc, algo) => {
-    const digest = crypto.createHash(algo).update(data).digest('base64')
-    const hash = new Hash(
-      `${algo}-${digest}${optString}`,
-       opts
-    )
-    if (hash.algorithm && hash.digest) {
-      const algo = hash.algorithm
-      if (!acc[algo]) { acc[algo] = [] }
-      acc[algo].push(hash)
-    }
-    return acc
-  }, new Integrity())
-}
-
-module.exports.fromStream = fromStream
-function fromStream (stream, opts) {
-  opts = opts || {}
-  const P = opts.Promise || Promise
-  const istream = integrityStream(opts)
-  return new P((resolve, reject) => {
-    stream.pipe(istream)
-    stream.on('error', reject)
-    istream.on('error', reject)
-    let sri
-    istream.on('integrity', s => { sri = s })
-    istream.on('end', () => resolve(sri))
-    istream.on('data', () => {})
-  })
-}
-
-module.exports.checkData = checkData
-function checkData (data, sri, opts) {
-  opts = opts || {}
-  sri = parse(sri, opts)
-  if (!Object.keys(sri).length) {
-    if (opts.error) {
-      throw Object.assign(
-        new Error('No valid integrity hashes to check against'), {
-          code: 'EINTEGRITY'
-        }
-      )
-    } else {
-      return false
-    }
-  }
-  const algorithm = sri.pickAlgorithm(opts)
-  const digest = crypto.createHash(algorithm).update(data).digest('base64')
-  const newSri = parse({algorithm, digest})
-  const match = newSri.match(sri, opts)
-  if (match || !opts.error) {
-    return match
-  } else if (typeof opts.size === 'number' && (data.length !== opts.size)) {
-    const err = new Error(`data size mismatch when checking ${sri}.\n  Wanted: ${opts.size}\n  Found: ${data.length}`)
-    err.code = 'EBADSIZE'
-    err.found = data.length
-    err.expected = opts.size
-    err.sri = sri
-    throw err
-  } else {
-    const err = new Error(`Integrity checksum failed when using ${algorithm}: Wanted ${sri}, but got ${newSri}. (${data.length} bytes)`)
-    err.code = 'EINTEGRITY'
-    err.found = newSri
-    err.expected = sri
-    err.algorithm = algorithm
-    err.sri = sri
-    throw err
-  }
-}
-
-module.exports.checkStream = checkStream
-function checkStream (stream, sri, opts) {
-  opts = opts || {}
-  const P = opts.Promise || Promise
-  const checker = integrityStream(Object.assign({}, opts, {
-    integrity: sri
-  }))
-  return new P((resolve, reject) => {
-    stream.pipe(checker)
-    stream.on('error', reject)
-    checker.on('error', reject)
-    let sri
-    checker.on('verified', s => { sri = s })
-    checker.on('end', () => resolve(sri))
-    checker.on('data', () => {})
-  })
-}
-
-module.exports.integrityStream = integrityStream
-function integrityStream (opts) {
-  opts = opts || {}
-  // For verification
-  const sri = opts.integrity && parse(opts.integrity, opts)
-  const goodSri = sri && Object.keys(sri).length
-  const algorithm = goodSri && sri.pickAlgorithm(opts)
-  const digests = goodSri && sri[algorithm]
-  // Calculating stream
-  const algorithms = Array.from(
-    new Set(
-      (opts.algorithms || ['sha512'])
-      .concat(algorithm ? [algorithm] : [])
-    )
-  )
-  const hashes = algorithms.map(crypto.createHash)
-  let streamSize = 0
-  const stream = new Transform({
-    transform (chunk, enc, cb) {
-      streamSize += chunk.length
-      hashes.forEach(h => h.update(chunk, enc))
-      cb(null, chunk, enc)
-    }
-  }).on('end', () => {
-    const optString = (opts.options && opts.options.length)
-    ? `?${opts.options.join('?')}`
-    : ''
-    const newSri = parse(hashes.map((h, i) => {
-      return `${algorithms[i]}-${h.digest('base64')}${optString}`
-    }).join(' '), opts)
-    // Integrity verification mode
-    const match = goodSri && newSri.match(sri, opts)
-    if (typeof opts.size === 'number' && streamSize !== opts.size) {
-      const err = new Error(`stream size mismatch when checking ${sri}.\n  Wanted: ${opts.size}\n  Found: ${streamSize}`)
-      err.code = 'EBADSIZE'
-      err.found = streamSize
-      err.expected = opts.size
-      err.sri = sri
-      stream.emit('error', err)
-    } else if (opts.integrity && !match) {
-      const err = new Error(`${sri} integrity checksum failed when using ${algorithm}: wanted ${digests} but got ${newSri}. (${streamSize} bytes)`)
-      err.code = 'EINTEGRITY'
-      err.found = newSri
-      err.expected = digests
-      err.algorithm = algorithm
-      err.sri = sri
-      stream.emit('error', err)
-    } else {
-      stream.emit('size', streamSize)
-      stream.emit('integrity', newSri)
-      match && stream.emit('verified', match)
-    }
-  })
-  return stream
-}
-
-module.exports.create = createIntegrity
-function createIntegrity (opts) {
-  opts = opts || {}
-  const algorithms = opts.algorithms || ['sha512']
-  const optString = opts.options && opts.options.length
-  ? `?${opts.options.join('?')}`
-  : ''
-
-  const hashes = algorithms.map(crypto.createHash)
-
-  return {
-    update: function (chunk, enc) {
-      hashes.forEach(h => h.update(chunk, enc))
-      return this
-    },
-    digest: function (enc) {
-      const integrity = algorithms.reduce((acc, algo) => {
-        const digest = hashes.shift().digest('base64')
-        const hash = new Hash(
-          `${algo}-${digest}${optString}`,
-          opts
-        )
-        if (hash.algorithm && hash.digest) {
-          const algo = hash.algorithm
-          if (!acc[algo]) { acc[algo] = [] }
-          acc[algo].push(hash)
-        }
-        return acc
-      }, new Integrity())
-
-      return integrity
-    }
-  }
-}
-
-const NODE_HASHES = new Set(crypto.getHashes())
-
-// This is a Best Effort™ at a reasonable priority for hash algos
-const DEFAULT_PRIORITY = [
-  'md5', 'whirlpool', 'sha1', 'sha224', 'sha256', 'sha384', 'sha512',
-  // TODO - it's unclear _which_ of these Node will actually use as its name
-  //        for the algorithm, so we guesswork it based on the OpenSSL names.
-  'sha3',
-  'sha3-256', 'sha3-384', 'sha3-512',
-  'sha3_256', 'sha3_384', 'sha3_512'
-].filter(algo => NODE_HASHES.has(algo))
-
-function getPrioritizedHash (algo1, algo2) {
-  return DEFAULT_PRIORITY.indexOf(algo1.toLowerCase()) >= DEFAULT_PRIORITY.indexOf(algo2.toLowerCase())
-  ? algo1
-  : algo2
-}
-
-
-/***/ }),
-/* 66 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2011 Mark Cavage <mcavage@gmail.com> All rights reserved.
-
-// If you have no idea what ASN.1 or BER is, see this:
-// ftp://ftp.rsa.com/pub/pkcs/ascii/layman.asc
-
-var Ber = __webpack_require__(514);
-
-
-
-// --- Exported API
-
-module.exports = {
-
-  Ber: Ber,
-
-  BerReader: Ber.Reader,
-
-  BerWriter: Ber.Writer
-
-};
-
-
-/***/ }),
-/* 67 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.home = undefined;
-
-var _rootUser;
-
-function _load_rootUser() {
-  return _rootUser = _interopRequireDefault(__webpack_require__(223));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-const home = exports.home = __webpack_require__(46).homedir();
-
-const userHomeDir = (_rootUser || _load_rootUser()).default ? path.resolve('/usr/local/share') : home;
-
-exports.default = userHomeDir;
-
-/***/ }),
-/* 68 */
-/***/ (function(module, exports) {
-
-module.exports = function (it) {
-  if (typeof it != 'function') throw TypeError(it + ' is not a function!');
-  return it;
-};
-
-
-/***/ }),
-/* 69 */
-/***/ (function(module, exports) {
-
-var toString = {}.toString;
-
-module.exports = function (it) {
-  return toString.call(it).slice(8, -1);
-};
-
-
-/***/ }),
-/* 70 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// optional / simple context binding
-var aFunction = __webpack_require__(68);
-module.exports = function (fn, that, length) {
-  aFunction(fn);
-  if (that === undefined) return fn;
-  switch (length) {
-    case 1: return function (a) {
-      return fn.call(that, a);
-    };
-    case 2: return function (a, b) {
-      return fn.call(that, a, b);
-    };
-    case 3: return function (a, b, c) {
-      return fn.call(that, a, b, c);
-    };
-  }
-  return function (/* ...args */) {
-    return fn.apply(that, arguments);
-  };
-};
-
-
-/***/ }),
-/* 71 */
-/***/ (function(module, exports) {
-
-var hasOwnProperty = {}.hasOwnProperty;
-module.exports = function (it, key) {
-  return hasOwnProperty.call(it, key);
-};
-
-
-/***/ }),
-/* 72 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var anObject = __webpack_require__(35);
-var IE8_DOM_DEFINE = __webpack_require__(238);
-var toPrimitive = __webpack_require__(255);
-var dP = Object.defineProperty;
-
-exports.f = __webpack_require__(51) ? Object.defineProperty : function defineProperty(O, P, Attributes) {
-  anObject(O);
-  P = toPrimitive(P, true);
-  anObject(Attributes);
-  if (IE8_DOM_DEFINE) try {
-    return dP(O, P, Attributes);
-  } catch (e) { /* empty */ }
-  if ('get' in Attributes || 'set' in Attributes) throw TypeError('Accessors not supported!');
-  if ('value' in Attributes) O[P] = Attributes.value;
-  return O;
-};
-
-
-/***/ }),
-/* 73 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// JS-YAML's default schema for `load` function.
-// It is not described in the YAML specification.
-//
-// This schema is based on JS-YAML's default safe schema and includes
-// JavaScript-specific types: !!js/undefined, !!js/regexp and !!js/function.
-//
-// Also this schema is used as default base schema at `Schema.create` function.
-
-
-
-
-
-var Schema = __webpack_require__(44);
-
-
-module.exports = Schema.DEFAULT = new Schema({
-  include: [
-    __webpack_require__(55)
-  ],
-  explicit: [
-    __webpack_require__(290),
-    __webpack_require__(289),
-    __webpack_require__(288)
-  ]
-});
-
-
-/***/ }),
-/* 74 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-var assert = __webpack_require__(16);
-var util = __webpack_require__(3);
-
-function FingerprintFormatError(fp, format) {
-	if (Error.captureStackTrace)
-		Error.captureStackTrace(this, FingerprintFormatError);
-	this.name = 'FingerprintFormatError';
-	this.fingerprint = fp;
-	this.format = format;
-	this.message = 'Fingerprint format is not supported, or is invalid: ';
-	if (fp !== undefined)
-		this.message += ' fingerprint = ' + fp;
-	if (format !== undefined)
-		this.message += ' format = ' + format;
-}
-util.inherits(FingerprintFormatError, Error);
-
-function InvalidAlgorithmError(alg) {
-	if (Error.captureStackTrace)
-		Error.captureStackTrace(this, InvalidAlgorithmError);
-	this.name = 'InvalidAlgorithmError';
-	this.algorithm = alg;
-	this.message = 'Algorithm "' + alg + '" is not supported';
-}
-util.inherits(InvalidAlgorithmError, Error);
-
-function KeyParseError(name, format, innerErr) {
-	if (Error.captureStackTrace)
-		Error.captureStackTrace(this, KeyParseError);
-	this.name = 'KeyParseError';
-	this.format = format;
-	this.keyName = name;
-	this.innerErr = innerErr;
-	this.message = 'Failed to parse ' + name + ' as a valid ' + format +
-	    ' format key: ' + innerErr.message;
-}
-util.inherits(KeyParseError, Error);
-
-function SignatureParseError(type, format, innerErr) {
-	if (Error.captureStackTrace)
-		Error.captureStackTrace(this, SignatureParseError);
-	this.name = 'SignatureParseError';
-	this.type = type;
-	this.format = format;
-	this.innerErr = innerErr;
-	this.message = 'Failed to parse the given data as a ' + type +
-	    ' signature in ' + format + ' format: ' + innerErr.message;
-}
-util.inherits(SignatureParseError, Error);
-
-function CertificateParseError(name, format, innerErr) {
-	if (Error.captureStackTrace)
-		Error.captureStackTrace(this, CertificateParseError);
-	this.name = 'CertificateParseError';
-	this.format = format;
-	this.certName = name;
-	this.innerErr = innerErr;
-	this.message = 'Failed to parse ' + name + ' as a valid ' + format +
-	    ' format certificate: ' + innerErr.message;
-}
-util.inherits(CertificateParseError, Error);
-
-function KeyEncryptedError(name, format) {
-	if (Error.captureStackTrace)
-		Error.captureStackTrace(this, KeyEncryptedError);
-	this.name = 'KeyEncryptedError';
-	this.format = format;
-	this.keyName = name;
-	this.message = 'The ' + format + ' format key ' + name + ' is ' +
-	    'encrypted (password-protected), and no passphrase was ' +
-	    'provided in `options`';
-}
-util.inherits(KeyEncryptedError, Error);
-
-module.exports = {
-	FingerprintFormatError: FingerprintFormatError,
-	InvalidAlgorithmError: InvalidAlgorithmError,
-	KeyParseError: KeyParseError,
-	SignatureParseError: SignatureParseError,
-	KeyEncryptedError: KeyEncryptedError,
-	CertificateParseError: CertificateParseError
-};
-
-
-/***/ }),
-/* 75 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = Signature;
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var crypto = __webpack_require__(11);
-var errs = __webpack_require__(74);
-var utils = __webpack_require__(26);
-var asn1 = __webpack_require__(66);
-var SSHBuffer = __webpack_require__(159);
-
-var InvalidAlgorithmError = errs.InvalidAlgorithmError;
-var SignatureParseError = errs.SignatureParseError;
-
-function Signature(opts) {
-	assert.object(opts, 'options');
-	assert.arrayOfObject(opts.parts, 'options.parts');
-	assert.string(opts.type, 'options.type');
-
-	var partLookup = {};
-	for (var i = 0; i < opts.parts.length; ++i) {
-		var part = opts.parts[i];
-		partLookup[part.name] = part;
-	}
-
-	this.type = opts.type;
-	this.hashAlgorithm = opts.hashAlgo;
-	this.curve = opts.curve;
-	this.parts = opts.parts;
-	this.part = partLookup;
-}
-
-Signature.prototype.toBuffer = function (format) {
-	if (format === undefined)
-		format = 'asn1';
-	assert.string(format, 'format');
-
-	var buf;
-	var stype = 'ssh-' + this.type;
-
-	switch (this.type) {
-	case 'rsa':
-		switch (this.hashAlgorithm) {
-		case 'sha256':
-			stype = 'rsa-sha2-256';
-			break;
-		case 'sha512':
-			stype = 'rsa-sha2-512';
-			break;
-		case 'sha1':
-		case undefined:
-			break;
-		default:
-			throw (new Error('SSH signature ' +
-			    'format does not support hash ' +
-			    'algorithm ' + this.hashAlgorithm));
-		}
-		if (format === 'ssh') {
-			buf = new SSHBuffer({});
-			buf.writeString(stype);
-			buf.writePart(this.part.sig);
-			return (buf.toBuffer());
-		} else {
-			return (this.part.sig.data);
-		}
-		break;
-
-	case 'ed25519':
-		if (format === 'ssh') {
-			buf = new SSHBuffer({});
-			buf.writeString(stype);
-			buf.writePart(this.part.sig);
-			return (buf.toBuffer());
-		} else {
-			return (this.part.sig.data);
-		}
-		break;
-
-	case 'dsa':
-	case 'ecdsa':
-		var r, s;
-		if (format === 'asn1') {
-			var der = new asn1.BerWriter();
-			der.startSequence();
-			r = utils.mpNormalize(this.part.r.data);
-			s = utils.mpNormalize(this.part.s.data);
-			der.writeBuffer(r, asn1.Ber.Integer);
-			der.writeBuffer(s, asn1.Ber.Integer);
-			der.endSequence();
-			return (der.buffer);
-		} else if (format === 'ssh' && this.type === 'dsa') {
-			buf = new SSHBuffer({});
-			buf.writeString('ssh-dss');
-			r = this.part.r.data;
-			if (r.length > 20 && r[0] === 0x00)
-				r = r.slice(1);
-			s = this.part.s.data;
-			if (s.length > 20 && s[0] === 0x00)
-				s = s.slice(1);
-			if ((this.hashAlgorithm &&
-			    this.hashAlgorithm !== 'sha1') ||
-			    r.length + s.length !== 40) {
-				throw (new Error('OpenSSH only supports ' +
-				    'DSA signatures with SHA1 hash'));
-			}
-			buf.writeBuffer(Buffer.concat([r, s]));
-			return (buf.toBuffer());
-		} else if (format === 'ssh' && this.type === 'ecdsa') {
-			var inner = new SSHBuffer({});
-			r = this.part.r.data;
-			inner.writeBuffer(r);
-			inner.writePart(this.part.s);
-
-			buf = new SSHBuffer({});
-			/* XXX: find a more proper way to do this? */
-			var curve;
-			if (r[0] === 0x00)
-				r = r.slice(1);
-			var sz = r.length * 8;
-			if (sz === 256)
-				curve = 'nistp256';
-			else if (sz === 384)
-				curve = 'nistp384';
-			else if (sz === 528)
-				curve = 'nistp521';
-			buf.writeString('ecdsa-sha2-' + curve);
-			buf.writeBuffer(inner.toBuffer());
-			return (buf.toBuffer());
-		}
-		throw (new Error('Invalid signature format'));
-	default:
-		throw (new Error('Invalid signature data'));
-	}
-};
-
-Signature.prototype.toString = function (format) {
-	assert.optionalString(format, 'format');
-	return (this.toBuffer(format).toString('base64'));
-};
-
-Signature.parse = function (data, type, format) {
-	if (typeof (data) === 'string')
-		data = Buffer.from(data, 'base64');
-	assert.buffer(data, 'data');
-	assert.string(format, 'format');
-	assert.string(type, 'type');
-
-	var opts = {};
-	opts.type = type.toLowerCase();
-	opts.parts = [];
-
-	try {
-		assert.ok(data.length > 0, 'signature must not be empty');
-		switch (opts.type) {
-		case 'rsa':
-			return (parseOneNum(data, type, format, opts));
-		case 'ed25519':
-			return (parseOneNum(data, type, format, opts));
-
-		case 'dsa':
-		case 'ecdsa':
-			if (format === 'asn1')
-				return (parseDSAasn1(data, type, format, opts));
-			else if (opts.type === 'dsa')
-				return (parseDSA(data, type, format, opts));
-			else
-				return (parseECDSA(data, type, format, opts));
-
-		default:
-			throw (new InvalidAlgorithmError(type));
-		}
-
-	} catch (e) {
-		if (e instanceof InvalidAlgorithmError)
-			throw (e);
-		throw (new SignatureParseError(type, format, e));
-	}
-};
-
-function parseOneNum(data, type, format, opts) {
-	if (format === 'ssh') {
-		try {
-			var buf = new SSHBuffer({buffer: data});
-			var head = buf.readString();
-		} catch (e) {
-			/* fall through */
-		}
-		if (buf !== undefined) {
-			var msg = 'SSH signature does not match expected ' +
-			    'type (expected ' + type + ', got ' + head + ')';
-			switch (head) {
-			case 'ssh-rsa':
-				assert.strictEqual(type, 'rsa', msg);
-				opts.hashAlgo = 'sha1';
-				break;
-			case 'rsa-sha2-256':
-				assert.strictEqual(type, 'rsa', msg);
-				opts.hashAlgo = 'sha256';
-				break;
-			case 'rsa-sha2-512':
-				assert.strictEqual(type, 'rsa', msg);
-				opts.hashAlgo = 'sha512';
-				break;
-			case 'ssh-ed25519':
-				assert.strictEqual(type, 'ed25519', msg);
-				opts.hashAlgo = 'sha512';
-				break;
-			default:
-				throw (new Error('Unknown SSH signature ' +
-				    'type: ' + head));
-			}
-			var sig = buf.readPart();
-			assert.ok(buf.atEnd(), 'extra trailing bytes');
-			sig.name = 'sig';
-			opts.parts.push(sig);
-			return (new Signature(opts));
-		}
-	}
-	opts.parts.push({name: 'sig', data: data});
-	return (new Signature(opts));
-}
-
-function parseDSAasn1(data, type, format, opts) {
-	var der = new asn1.BerReader(data);
-	der.readSequence();
-	var r = der.readString(asn1.Ber.Integer, true);
-	var s = der.readString(asn1.Ber.Integer, true);
-
-	opts.parts.push({name: 'r', data: utils.mpNormalize(r)});
-	opts.parts.push({name: 's', data: utils.mpNormalize(s)});
-
-	return (new Signature(opts));
-}
-
-function parseDSA(data, type, format, opts) {
-	if (data.length != 40) {
-		var buf = new SSHBuffer({buffer: data});
-		var d = buf.readBuffer();
-		if (d.toString('ascii') === 'ssh-dss')
-			d = buf.readBuffer();
-		assert.ok(buf.atEnd(), 'extra trailing bytes');
-		assert.strictEqual(d.length, 40, 'invalid inner length');
-		data = d;
-	}
-	opts.parts.push({name: 'r', data: data.slice(0, 20)});
-	opts.parts.push({name: 's', data: data.slice(20, 40)});
-	return (new Signature(opts));
-}
-
-function parseECDSA(data, type, format, opts) {
-	var buf = new SSHBuffer({buffer: data});
-
-	var r, s;
-	var inner = buf.readBuffer();
-	var stype = inner.toString('ascii');
-	if (stype.slice(0, 6) === 'ecdsa-') {
-		var parts = stype.split('-');
-		assert.strictEqual(parts[0], 'ecdsa');
-		assert.strictEqual(parts[1], 'sha2');
-		opts.curve = parts[2];
-		switch (opts.curve) {
-		case 'nistp256':
-			opts.hashAlgo = 'sha256';
-			break;
-		case 'nistp384':
-			opts.hashAlgo = 'sha384';
-			break;
-		case 'nistp521':
-			opts.hashAlgo = 'sha512';
-			break;
-		default:
-			throw (new Error('Unsupported ECDSA curve: ' +
-			    opts.curve));
-		}
-		inner = buf.readBuffer();
-		assert.ok(buf.atEnd(), 'extra trailing bytes on outer');
-		buf = new SSHBuffer({buffer: inner});
-		r = buf.readPart();
-	} else {
-		r = {data: inner};
-	}
-
-	s = buf.readPart();
-	assert.ok(buf.atEnd(), 'extra trailing bytes');
-
-	r.name = 'r';
-	s.name = 's';
-
-	opts.parts.push(r);
-	opts.parts.push(s);
-	return (new Signature(opts));
-}
-
-Signature.isSignature = function (obj, ver) {
-	return (utils.isCompatible(obj, Signature, ver));
-};
-
-/*
- * API versions for Signature:
- * [1,0] -- initial ver
- * [2,0] -- support for rsa in full ssh format, compat with sshpk-agent
- *          hashAlgorithm property
- * [2,1] -- first tagged version
- */
-Signature.prototype._sshpkApiVersion = [2, 1];
-
-Signature._oldVersionDetect = function (obj) {
-	assert.func(obj.toBuffer);
-	if (obj.hasOwnProperty('hashAlgorithm'))
-		return ([2, 0]);
-	return ([1, 0]);
-};
-
-
-/***/ }),
-/* 76 */
-/***/ (function(module, exports, __webpack_require__) {
-
-(function(nacl) {
-'use strict';
-
-// Ported in 2014 by Dmitry Chestnykh and Devi Mandiri.
-// Public domain.
-//
-// Implementation derived from TweetNaCl version 20140427.
-// See for details: http://tweetnacl.cr.yp.to/
-
-var gf = function(init) {
-  var i, r = new Float64Array(16);
-  if (init) for (i = 0; i < init.length; i++) r[i] = init[i];
-  return r;
-};
-
-//  Pluggable, initialized in high-level API below.
-var randombytes = function(/* x, n */) { throw new Error('no PRNG'); };
-
-var _0 = new Uint8Array(16);
-var _9 = new Uint8Array(32); _9[0] = 9;
-
-var gf0 = gf(),
-    gf1 = gf([1]),
-    _121665 = gf([0xdb41, 1]),
-    D = gf([0x78a3, 0x1359, 0x4dca, 0x75eb, 0xd8ab, 0x4141, 0x0a4d, 0x0070, 0xe898, 0x7779, 0x4079, 0x8cc7, 0xfe73, 0x2b6f, 0x6cee, 0x5203]),
-    D2 = gf([0xf159, 0x26b2, 0x9b94, 0xebd6, 0xb156, 0x8283, 0x149a, 0x00e0, 0xd130, 0xeef3, 0x80f2, 0x198e, 0xfce7, 0x56df, 0xd9dc, 0x2406]),
-    X = gf([0xd51a, 0x8f25, 0x2d60, 0xc956, 0xa7b2, 0x9525, 0xc760, 0x692c, 0xdc5c, 0xfdd6, 0xe231, 0xc0a4, 0x53fe, 0xcd6e, 0x36d3, 0x2169]),
-    Y = gf([0x6658, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666, 0x6666]),
-    I = gf([0xa0b0, 0x4a0e, 0x1b27, 0xc4ee, 0xe478, 0xad2f, 0x1806, 0x2f43, 0xd7a7, 0x3dfb, 0x0099, 0x2b4d, 0xdf0b, 0x4fc1, 0x2480, 0x2b83]);
-
-function ts64(x, i, h, l) {
-  x[i]   = (h >> 24) & 0xff;
-  x[i+1] = (h >> 16) & 0xff;
-  x[i+2] = (h >>  8) & 0xff;
-  x[i+3] = h & 0xff;
-  x[i+4] = (l >> 24)  & 0xff;
-  x[i+5] = (l >> 16)  & 0xff;
-  x[i+6] = (l >>  8)  & 0xff;
-  x[i+7] = l & 0xff;
-}
-
-function vn(x, xi, y, yi, n) {
-  var i,d = 0;
-  for (i = 0; i < n; i++) d |= x[xi+i]^y[yi+i];
-  return (1 & ((d - 1) >>> 8)) - 1;
-}
-
-function crypto_verify_16(x, xi, y, yi) {
-  return vn(x,xi,y,yi,16);
-}
-
-function crypto_verify_32(x, xi, y, yi) {
-  return vn(x,xi,y,yi,32);
-}
-
-function core_salsa20(o, p, k, c) {
-  var j0  = c[ 0] & 0xff | (c[ 1] & 0xff)<<8 | (c[ 2] & 0xff)<<16 | (c[ 3] & 0xff)<<24,
-      j1  = k[ 0] & 0xff | (k[ 1] & 0xff)<<8 | (k[ 2] & 0xff)<<16 | (k[ 3] & 0xff)<<24,
-      j2  = k[ 4] & 0xff | (k[ 5] & 0xff)<<8 | (k[ 6] & 0xff)<<16 | (k[ 7] & 0xff)<<24,
-      j3  = k[ 8] & 0xff | (k[ 9] & 0xff)<<8 | (k[10] & 0xff)<<16 | (k[11] & 0xff)<<24,
-      j4  = k[12] & 0xff | (k[13] & 0xff)<<8 | (k[14] & 0xff)<<16 | (k[15] & 0xff)<<24,
-      j5  = c[ 4] & 0xff | (c[ 5] & 0xff)<<8 | (c[ 6] & 0xff)<<16 | (c[ 7] & 0xff)<<24,
-      j6  = p[ 0] & 0xff | (p[ 1] & 0xff)<<8 | (p[ 2] & 0xff)<<16 | (p[ 3] & 0xff)<<24,
-      j7  = p[ 4] & 0xff | (p[ 5] & 0xff)<<8 | (p[ 6] & 0xff)<<16 | (p[ 7] & 0xff)<<24,
-      j8  = p[ 8] & 0xff | (p[ 9] & 0xff)<<8 | (p[10] & 0xff)<<16 | (p[11] & 0xff)<<24,
-      j9  = p[12] & 0xff | (p[13] & 0xff)<<8 | (p[14] & 0xff)<<16 | (p[15] & 0xff)<<24,
-      j10 = c[ 8] & 0xff | (c[ 9] & 0xff)<<8 | (c[10] & 0xff)<<16 | (c[11] & 0xff)<<24,
-      j11 = k[16] & 0xff | (k[17] & 0xff)<<8 | (k[18] & 0xff)<<16 | (k[19] & 0xff)<<24,
-      j12 = k[20] & 0xff | (k[21] & 0xff)<<8 | (k[22] & 0xff)<<16 | (k[23] & 0xff)<<24,
-      j13 = k[24] & 0xff | (k[25] & 0xff)<<8 | (k[26] & 0xff)<<16 | (k[27] & 0xff)<<24,
-      j14 = k[28] & 0xff | (k[29] & 0xff)<<8 | (k[30] & 0xff)<<16 | (k[31] & 0xff)<<24,
-      j15 = c[12] & 0xff | (c[13] & 0xff)<<8 | (c[14] & 0xff)<<16 | (c[15] & 0xff)<<24;
-
-  var x0 = j0, x1 = j1, x2 = j2, x3 = j3, x4 = j4, x5 = j5, x6 = j6, x7 = j7,
-      x8 = j8, x9 = j9, x10 = j10, x11 = j11, x12 = j12, x13 = j13, x14 = j14,
-      x15 = j15, u;
-
-  for (var i = 0; i < 20; i += 2) {
-    u = x0 + x12 | 0;
-    x4 ^= u<<7 | u>>>(32-7);
-    u = x4 + x0 | 0;
-    x8 ^= u<<9 | u>>>(32-9);
-    u = x8 + x4 | 0;
-    x12 ^= u<<13 | u>>>(32-13);
-    u = x12 + x8 | 0;
-    x0 ^= u<<18 | u>>>(32-18);
-
-    u = x5 + x1 | 0;
-    x9 ^= u<<7 | u>>>(32-7);
-    u = x9 + x5 | 0;
-    x13 ^= u<<9 | u>>>(32-9);
-    u = x13 + x9 | 0;
-    x1 ^= u<<13 | u>>>(32-13);
-    u = x1 + x13 | 0;
-    x5 ^= u<<18 | u>>>(32-18);
-
-    u = x10 + x6 | 0;
-    x14 ^= u<<7 | u>>>(32-7);
-    u = x14 + x10 | 0;
-    x2 ^= u<<9 | u>>>(32-9);
-    u = x2 + x14 | 0;
-    x6 ^= u<<13 | u>>>(32-13);
-    u = x6 + x2 | 0;
-    x10 ^= u<<18 | u>>>(32-18);
-
-    u = x15 + x11 | 0;
-    x3 ^= u<<7 | u>>>(32-7);
-    u = x3 + x15 | 0;
-    x7 ^= u<<9 | u>>>(32-9);
-    u = x7 + x3 | 0;
-    x11 ^= u<<13 | u>>>(32-13);
-    u = x11 + x7 | 0;
-    x15 ^= u<<18 | u>>>(32-18);
-
-    u = x0 + x3 | 0;
-    x1 ^= u<<7 | u>>>(32-7);
-    u = x1 + x0 | 0;
-    x2 ^= u<<9 | u>>>(32-9);
-    u = x2 + x1 | 0;
-    x3 ^= u<<13 | u>>>(32-13);
-    u = x3 + x2 | 0;
-    x0 ^= u<<18 | u>>>(32-18);
-
-    u = x5 + x4 | 0;
-    x6 ^= u<<7 | u>>>(32-7);
-    u = x6 + x5 | 0;
-    x7 ^= u<<9 | u>>>(32-9);
-    u = x7 + x6 | 0;
-    x4 ^= u<<13 | u>>>(32-13);
-    u = x4 + x7 | 0;
-    x5 ^= u<<18 | u>>>(32-18);
-
-    u = x10 + x9 | 0;
-    x11 ^= u<<7 | u>>>(32-7);
-    u = x11 + x10 | 0;
-    x8 ^= u<<9 | u>>>(32-9);
-    u = x8 + x11 | 0;
-    x9 ^= u<<13 | u>>>(32-13);
-    u = x9 + x8 | 0;
-    x10 ^= u<<18 | u>>>(32-18);
-
-    u = x15 + x14 | 0;
-    x12 ^= u<<7 | u>>>(32-7);
-    u = x12 + x15 | 0;
-    x13 ^= u<<9 | u>>>(32-9);
-    u = x13 + x12 | 0;
-    x14 ^= u<<13 | u>>>(32-13);
-    u = x14 + x13 | 0;
-    x15 ^= u<<18 | u>>>(32-18);
-  }
-   x0 =  x0 +  j0 | 0;
-   x1 =  x1 +  j1 | 0;
-   x2 =  x2 +  j2 | 0;
-   x3 =  x3 +  j3 | 0;
-   x4 =  x4 +  j4 | 0;
-   x5 =  x5 +  j5 | 0;
-   x6 =  x6 +  j6 | 0;
-   x7 =  x7 +  j7 | 0;
-   x8 =  x8 +  j8 | 0;
-   x9 =  x9 +  j9 | 0;
-  x10 = x10 + j10 | 0;
-  x11 = x11 + j11 | 0;
-  x12 = x12 + j12 | 0;
-  x13 = x13 + j13 | 0;
-  x14 = x14 + j14 | 0;
-  x15 = x15 + j15 | 0;
-
-  o[ 0] = x0 >>>  0 & 0xff;
-  o[ 1] = x0 >>>  8 & 0xff;
-  o[ 2] = x0 >>> 16 & 0xff;
-  o[ 3] = x0 >>> 24 & 0xff;
-
-  o[ 4] = x1 >>>  0 & 0xff;
-  o[ 5] = x1 >>>  8 & 0xff;
-  o[ 6] = x1 >>> 16 & 0xff;
-  o[ 7] = x1 >>> 24 & 0xff;
-
-  o[ 8] = x2 >>>  0 & 0xff;
-  o[ 9] = x2 >>>  8 & 0xff;
-  o[10] = x2 >>> 16 & 0xff;
-  o[11] = x2 >>> 24 & 0xff;
-
-  o[12] = x3 >>>  0 & 0xff;
-  o[13] = x3 >>>  8 & 0xff;
-  o[14] = x3 >>> 16 & 0xff;
-  o[15] = x3 >>> 24 & 0xff;
-
-  o[16] = x4 >>>  0 & 0xff;
-  o[17] = x4 >>>  8 & 0xff;
-  o[18] = x4 >>> 16 & 0xff;
-  o[19] = x4 >>> 24 & 0xff;
-
-  o[20] = x5 >>>  0 & 0xff;
-  o[21] = x5 >>>  8 & 0xff;
-  o[22] = x5 >>> 16 & 0xff;
-  o[23] = x5 >>> 24 & 0xff;
-
-  o[24] = x6 >>>  0 & 0xff;
-  o[25] = x6 >>>  8 & 0xff;
-  o[26] = x6 >>> 16 & 0xff;
-  o[27] = x6 >>> 24 & 0xff;
-
-  o[28] = x7 >>>  0 & 0xff;
-  o[29] = x7 >>>  8 & 0xff;
-  o[30] = x7 >>> 16 & 0xff;
-  o[31] = x7 >>> 24 & 0xff;
-
-  o[32] = x8 >>>  0 & 0xff;
-  o[33] = x8 >>>  8 & 0xff;
-  o[34] = x8 >>> 16 & 0xff;
-  o[35] = x8 >>> 24 & 0xff;
-
-  o[36] = x9 >>>  0 & 0xff;
-  o[37] = x9 >>>  8 & 0xff;
-  o[38] = x9 >>> 16 & 0xff;
-  o[39] = x9 >>> 24 & 0xff;
-
-  o[40] = x10 >>>  0 & 0xff;
-  o[41] = x10 >>>  8 & 0xff;
-  o[42] = x10 >>> 16 & 0xff;
-  o[43] = x10 >>> 24 & 0xff;
-
-  o[44] = x11 >>>  0 & 0xff;
-  o[45] = x11 >>>  8 & 0xff;
-  o[46] = x11 >>> 16 & 0xff;
-  o[47] = x11 >>> 24 & 0xff;
-
-  o[48] = x12 >>>  0 & 0xff;
-  o[49] = x12 >>>  8 & 0xff;
-  o[50] = x12 >>> 16 & 0xff;
-  o[51] = x12 >>> 24 & 0xff;
-
-  o[52] = x13 >>>  0 & 0xff;
-  o[53] = x13 >>>  8 & 0xff;
-  o[54] = x13 >>> 16 & 0xff;
-  o[55] = x13 >>> 24 & 0xff;
-
-  o[56] = x14 >>>  0 & 0xff;
-  o[57] = x14 >>>  8 & 0xff;
-  o[58] = x14 >>> 16 & 0xff;
-  o[59] = x14 >>> 24 & 0xff;
-
-  o[60] = x15 >>>  0 & 0xff;
-  o[61] = x15 >>>  8 & 0xff;
-  o[62] = x15 >>> 16 & 0xff;
-  o[63] = x15 >>> 24 & 0xff;
-}
-
-function core_hsalsa20(o,p,k,c) {
-  var j0  = c[ 0] & 0xff | (c[ 1] & 0xff)<<8 | (c[ 2] & 0xff)<<16 | (c[ 3] & 0xff)<<24,
-      j1  = k[ 0] & 0xff | (k[ 1] & 0xff)<<8 | (k[ 2] & 0xff)<<16 | (k[ 3] & 0xff)<<24,
-      j2  = k[ 4] & 0xff | (k[ 5] & 0xff)<<8 | (k[ 6] & 0xff)<<16 | (k[ 7] & 0xff)<<24,
-      j3  = k[ 8] & 0xff | (k[ 9] & 0xff)<<8 | (k[10] & 0xff)<<16 | (k[11] & 0xff)<<24,
-      j4  = k[12] & 0xff | (k[13] & 0xff)<<8 | (k[14] & 0xff)<<16 | (k[15] & 0xff)<<24,
-      j5  = c[ 4] & 0xff | (c[ 5] & 0xff)<<8 | (c[ 6] & 0xff)<<16 | (c[ 7] & 0xff)<<24,
-      j6  = p[ 0] & 0xff | (p[ 1] & 0xff)<<8 | (p[ 2] & 0xff)<<16 | (p[ 3] & 0xff)<<24,
-      j7  = p[ 4] & 0xff | (p[ 5] & 0xff)<<8 | (p[ 6] & 0xff)<<16 | (p[ 7] & 0xff)<<24,
-      j8  = p[ 8] & 0xff | (p[ 9] & 0xff)<<8 | (p[10] & 0xff)<<16 | (p[11] & 0xff)<<24,
-      j9  = p[12] & 0xff | (p[13] & 0xff)<<8 | (p[14] & 0xff)<<16 | (p[15] & 0xff)<<24,
-      j10 = c[ 8] & 0xff | (c[ 9] & 0xff)<<8 | (c[10] & 0xff)<<16 | (c[11] & 0xff)<<24,
-      j11 = k[16] & 0xff | (k[17] & 0xff)<<8 | (k[18] & 0xff)<<16 | (k[19] & 0xff)<<24,
-      j12 = k[20] & 0xff | (k[21] & 0xff)<<8 | (k[22] & 0xff)<<16 | (k[23] & 0xff)<<24,
-      j13 = k[24] & 0xff | (k[25] & 0xff)<<8 | (k[26] & 0xff)<<16 | (k[27] & 0xff)<<24,
-      j14 = k[28] & 0xff | (k[29] & 0xff)<<8 | (k[30] & 0xff)<<16 | (k[31] & 0xff)<<24,
-      j15 = c[12] & 0xff | (c[13] & 0xff)<<8 | (c[14] & 0xff)<<16 | (c[15] & 0xff)<<24;
-
-  var x0 = j0, x1 = j1, x2 = j2, x3 = j3, x4 = j4, x5 = j5, x6 = j6, x7 = j7,
-      x8 = j8, x9 = j9, x10 = j10, x11 = j11, x12 = j12, x13 = j13, x14 = j14,
-      x15 = j15, u;
-
-  for (var i = 0; i < 20; i += 2) {
-    u = x0 + x12 | 0;
-    x4 ^= u<<7 | u>>>(32-7);
-    u = x4 + x0 | 0;
-    x8 ^= u<<9 | u>>>(32-9);
-    u = x8 + x4 | 0;
-    x12 ^= u<<13 | u>>>(32-13);
-    u = x12 + x8 | 0;
-    x0 ^= u<<18 | u>>>(32-18);
-
-    u = x5 + x1 | 0;
-    x9 ^= u<<7 | u>>>(32-7);
-    u = x9 + x5 | 0;
-    x13 ^= u<<9 | u>>>(32-9);
-    u = x13 + x9 | 0;
-    x1 ^= u<<13 | u>>>(32-13);
-    u = x1 + x13 | 0;
-    x5 ^= u<<18 | u>>>(32-18);
-
-    u = x10 + x6 | 0;
-    x14 ^= u<<7 | u>>>(32-7);
-    u = x14 + x10 | 0;
-    x2 ^= u<<9 | u>>>(32-9);
-    u = x2 + x14 | 0;
-    x6 ^= u<<13 | u>>>(32-13);
-    u = x6 + x2 | 0;
-    x10 ^= u<<18 | u>>>(32-18);
-
-    u = x15 + x11 | 0;
-    x3 ^= u<<7 | u>>>(32-7);
-    u = x3 + x15 | 0;
-    x7 ^= u<<9 | u>>>(32-9);
-    u = x7 + x3 | 0;
-    x11 ^= u<<13 | u>>>(32-13);
-    u = x11 + x7 | 0;
-    x15 ^= u<<18 | u>>>(32-18);
-
-    u = x0 + x3 | 0;
-    x1 ^= u<<7 | u>>>(32-7);
-    u = x1 + x0 | 0;
-    x2 ^= u<<9 | u>>>(32-9);
-    u = x2 + x1 | 0;
-    x3 ^= u<<13 | u>>>(32-13);
-    u = x3 + x2 | 0;
-    x0 ^= u<<18 | u>>>(32-18);
-
-    u = x5 + x4 | 0;
-    x6 ^= u<<7 | u>>>(32-7);
-    u = x6 + x5 | 0;
-    x7 ^= u<<9 | u>>>(32-9);
-    u = x7 + x6 | 0;
-    x4 ^= u<<13 | u>>>(32-13);
-    u = x4 + x7 | 0;
-    x5 ^= u<<18 | u>>>(32-18);
-
-    u = x10 + x9 | 0;
-    x11 ^= u<<7 | u>>>(32-7);
-    u = x11 + x10 | 0;
-    x8 ^= u<<9 | u>>>(32-9);
-    u = x8 + x11 | 0;
-    x9 ^= u<<13 | u>>>(32-13);
-    u = x9 + x8 | 0;
-    x10 ^= u<<18 | u>>>(32-18);
-
-    u = x15 + x14 | 0;
-    x12 ^= u<<7 | u>>>(32-7);
-    u = x12 + x15 | 0;
-    x13 ^= u<<9 | u>>>(32-9);
-    u = x13 + x12 | 0;
-    x14 ^= u<<13 | u>>>(32-13);
-    u = x14 + x13 | 0;
-    x15 ^= u<<18 | u>>>(32-18);
-  }
-
-  o[ 0] = x0 >>>  0 & 0xff;
-  o[ 1] = x0 >>>  8 & 0xff;
-  o[ 2] = x0 >>> 16 & 0xff;
-  o[ 3] = x0 >>> 24 & 0xff;
-
-  o[ 4] = x5 >>>  0 & 0xff;
-  o[ 5] = x5 >>>  8 & 0xff;
-  o[ 6] = x5 >>> 16 & 0xff;
-  o[ 7] = x5 >>> 24 & 0xff;
-
-  o[ 8] = x10 >>>  0 & 0xff;
-  o[ 9] = x10 >>>  8 & 0xff;
-  o[10] = x10 >>> 16 & 0xff;
-  o[11] = x10 >>> 24 & 0xff;
-
-  o[12] = x15 >>>  0 & 0xff;
-  o[13] = x15 >>>  8 & 0xff;
-  o[14] = x15 >>> 16 & 0xff;
-  o[15] = x15 >>> 24 & 0xff;
-
-  o[16] = x6 >>>  0 & 0xff;
-  o[17] = x6 >>>  8 & 0xff;
-  o[18] = x6 >>> 16 & 0xff;
-  o[19] = x6 >>> 24 & 0xff;
-
-  o[20] = x7 >>>  0 & 0xff;
-  o[21] = x7 >>>  8 & 0xff;
-  o[22] = x7 >>> 16 & 0xff;
-  o[23] = x7 >>> 24 & 0xff;
-
-  o[24] = x8 >>>  0 & 0xff;
-  o[25] = x8 >>>  8 & 0xff;
-  o[26] = x8 >>> 16 & 0xff;
-  o[27] = x8 >>> 24 & 0xff;
-
-  o[28] = x9 >>>  0 & 0xff;
-  o[29] = x9 >>>  8 & 0xff;
-  o[30] = x9 >>> 16 & 0xff;
-  o[31] = x9 >>> 24 & 0xff;
-}
-
-function crypto_core_salsa20(out,inp,k,c) {
-  core_salsa20(out,inp,k,c);
-}
-
-function crypto_core_hsalsa20(out,inp,k,c) {
-  core_hsalsa20(out,inp,k,c);
-}
-
-var sigma = new Uint8Array([101, 120, 112, 97, 110, 100, 32, 51, 50, 45, 98, 121, 116, 101, 32, 107]);
-            // "expand 32-byte k"
-
-function crypto_stream_salsa20_xor(c,cpos,m,mpos,b,n,k) {
-  var z = new Uint8Array(16), x = new Uint8Array(64);
-  var u, i;
-  for (i = 0; i < 16; i++) z[i] = 0;
-  for (i = 0; i < 8; i++) z[i] = n[i];
-  while (b >= 64) {
-    crypto_core_salsa20(x,z,k,sigma);
-    for (i = 0; i < 64; i++) c[cpos+i] = m[mpos+i] ^ x[i];
-    u = 1;
-    for (i = 8; i < 16; i++) {
-      u = u + (z[i] & 0xff) | 0;
-      z[i] = u & 0xff;
-      u >>>= 8;
-    }
-    b -= 64;
-    cpos += 64;
-    mpos += 64;
-  }
-  if (b > 0) {
-    crypto_core_salsa20(x,z,k,sigma);
-    for (i = 0; i < b; i++) c[cpos+i] = m[mpos+i] ^ x[i];
-  }
-  return 0;
-}
-
-function crypto_stream_salsa20(c,cpos,b,n,k) {
-  var z = new Uint8Array(16), x = new Uint8Array(64);
-  var u, i;
-  for (i = 0; i < 16; i++) z[i] = 0;
-  for (i = 0; i < 8; i++) z[i] = n[i];
-  while (b >= 64) {
-    crypto_core_salsa20(x,z,k,sigma);
-    for (i = 0; i < 64; i++) c[cpos+i] = x[i];
-    u = 1;
-    for (i = 8; i < 16; i++) {
-      u = u + (z[i] & 0xff) | 0;
-      z[i] = u & 0xff;
-      u >>>= 8;
-    }
-    b -= 64;
-    cpos += 64;
-  }
-  if (b > 0) {
-    crypto_core_salsa20(x,z,k,sigma);
-    for (i = 0; i < b; i++) c[cpos+i] = x[i];
-  }
-  return 0;
-}
-
-function crypto_stream(c,cpos,d,n,k) {
-  var s = new Uint8Array(32);
-  crypto_core_hsalsa20(s,n,k,sigma);
-  var sn = new Uint8Array(8);
-  for (var i = 0; i < 8; i++) sn[i] = n[i+16];
-  return crypto_stream_salsa20(c,cpos,d,sn,s);
-}
-
-function crypto_stream_xor(c,cpos,m,mpos,d,n,k) {
-  var s = new Uint8Array(32);
-  crypto_core_hsalsa20(s,n,k,sigma);
-  var sn = new Uint8Array(8);
-  for (var i = 0; i < 8; i++) sn[i] = n[i+16];
-  return crypto_stream_salsa20_xor(c,cpos,m,mpos,d,sn,s);
-}
-
-/*
-* Port of Andrew Moon's Poly1305-donna-16. Public domain.
-* https://github.com/floodyberry/poly1305-donna
-*/
-
-var poly1305 = function(key) {
-  this.buffer = new Uint8Array(16);
-  this.r = new Uint16Array(10);
-  this.h = new Uint16Array(10);
-  this.pad = new Uint16Array(8);
-  this.leftover = 0;
-  this.fin = 0;
-
-  var t0, t1, t2, t3, t4, t5, t6, t7;
-
-  t0 = key[ 0] & 0xff | (key[ 1] & 0xff) << 8; this.r[0] = ( t0                     ) & 0x1fff;
-  t1 = key[ 2] & 0xff | (key[ 3] & 0xff) << 8; this.r[1] = ((t0 >>> 13) | (t1 <<  3)) & 0x1fff;
-  t2 = key[ 4] & 0xff | (key[ 5] & 0xff) << 8; this.r[2] = ((t1 >>> 10) | (t2 <<  6)) & 0x1f03;
-  t3 = key[ 6] & 0xff | (key[ 7] & 0xff) << 8; this.r[3] = ((t2 >>>  7) | (t3 <<  9)) & 0x1fff;
-  t4 = key[ 8] & 0xff | (key[ 9] & 0xff) << 8; this.r[4] = ((t3 >>>  4) | (t4 << 12)) & 0x00ff;
-  this.r[5] = ((t4 >>>  1)) & 0x1ffe;
-  t5 = key[10] & 0xff | (key[11] & 0xff) << 8; this.r[6] = ((t4 >>> 14) | (t5 <<  2)) & 0x1fff;
-  t6 = key[12] & 0xff | (key[13] & 0xff) << 8; this.r[7] = ((t5 >>> 11) | (t6 <<  5)) & 0x1f81;
-  t7 = key[14] & 0xff | (key[15] & 0xff) << 8; this.r[8] = ((t6 >>>  8) | (t7 <<  8)) & 0x1fff;
-  this.r[9] = ((t7 >>>  5)) & 0x007f;
-
-  this.pad[0] = key[16] & 0xff | (key[17] & 0xff) << 8;
-  this.pad[1] = key[18] & 0xff | (key[19] & 0xff) << 8;
-  this.pad[2] = key[20] & 0xff | (key[21] & 0xff) << 8;
-  this.pad[3] = key[22] & 0xff | (key[23] & 0xff) << 8;
-  this.pad[4] = key[24] & 0xff | (key[25] & 0xff) << 8;
-  this.pad[5] = key[26] & 0xff | (key[27] & 0xff) << 8;
-  this.pad[6] = key[28] & 0xff | (key[29] & 0xff) << 8;
-  this.pad[7] = key[30] & 0xff | (key[31] & 0xff) << 8;
-};
-
-poly1305.prototype.blocks = function(m, mpos, bytes) {
-  var hibit = this.fin ? 0 : (1 << 11);
-  var t0, t1, t2, t3, t4, t5, t6, t7, c;
-  var d0, d1, d2, d3, d4, d5, d6, d7, d8, d9;
-
-  var h0 = this.h[0],
-      h1 = this.h[1],
-      h2 = this.h[2],
-      h3 = this.h[3],
-      h4 = this.h[4],
-      h5 = this.h[5],
-      h6 = this.h[6],
-      h7 = this.h[7],
-      h8 = this.h[8],
-      h9 = this.h[9];
-
-  var r0 = this.r[0],
-      r1 = this.r[1],
-      r2 = this.r[2],
-      r3 = this.r[3],
-      r4 = this.r[4],
-      r5 = this.r[5],
-      r6 = this.r[6],
-      r7 = this.r[7],
-      r8 = this.r[8],
-      r9 = this.r[9];
-
-  while (bytes >= 16) {
-    t0 = m[mpos+ 0] & 0xff | (m[mpos+ 1] & 0xff) << 8; h0 += ( t0                     ) & 0x1fff;
-    t1 = m[mpos+ 2] & 0xff | (m[mpos+ 3] & 0xff) << 8; h1 += ((t0 >>> 13) | (t1 <<  3)) & 0x1fff;
-    t2 = m[mpos+ 4] & 0xff | (m[mpos+ 5] & 0xff) << 8; h2 += ((t1 >>> 10) | (t2 <<  6)) & 0x1fff;
-    t3 = m[mpos+ 6] & 0xff | (m[mpos+ 7] & 0xff) << 8; h3 += ((t2 >>>  7) | (t3 <<  9)) & 0x1fff;
-    t4 = m[mpos+ 8] & 0xff | (m[mpos+ 9] & 0xff) << 8; h4 += ((t3 >>>  4) | (t4 << 12)) & 0x1fff;
-    h5 += ((t4 >>>  1)) & 0x1fff;
-    t5 = m[mpos+10] & 0xff | (m[mpos+11] & 0xff) << 8; h6 += ((t4 >>> 14) | (t5 <<  2)) & 0x1fff;
-    t6 = m[mpos+12] & 0xff | (m[mpos+13] & 0xff) << 8; h7 += ((t5 >>> 11) | (t6 <<  5)) & 0x1fff;
-    t7 = m[mpos+14] & 0xff | (m[mpos+15] & 0xff) << 8; h8 += ((t6 >>>  8) | (t7 <<  8)) & 0x1fff;
-    h9 += ((t7 >>> 5)) | hibit;
-
-    c = 0;
-
-    d0 = c;
-    d0 += h0 * r0;
-    d0 += h1 * (5 * r9);
-    d0 += h2 * (5 * r8);
-    d0 += h3 * (5 * r7);
-    d0 += h4 * (5 * r6);
-    c = (d0 >>> 13); d0 &= 0x1fff;
-    d0 += h5 * (5 * r5);
-    d0 += h6 * (5 * r4);
-    d0 += h7 * (5 * r3);
-    d0 += h8 * (5 * r2);
-    d0 += h9 * (5 * r1);
-    c += (d0 >>> 13); d0 &= 0x1fff;
-
-    d1 = c;
-    d1 += h0 * r1;
-    d1 += h1 * r0;
-    d1 += h2 * (5 * r9);
-    d1 += h3 * (5 * r8);
-    d1 += h4 * (5 * r7);
-    c = (d1 >>> 13); d1 &= 0x1fff;
-    d1 += h5 * (5 * r6);
-    d1 += h6 * (5 * r5);
-    d1 += h7 * (5 * r4);
-    d1 += h8 * (5 * r3);
-    d1 += h9 * (5 * r2);
-    c += (d1 >>> 13); d1 &= 0x1fff;
-
-    d2 = c;
-    d2 += h0 * r2;
-    d2 += h1 * r1;
-    d2 += h2 * r0;
-    d2 += h3 * (5 * r9);
-    d2 += h4 * (5 * r8);
-    c = (d2 >>> 13); d2 &= 0x1fff;
-    d2 += h5 * (5 * r7);
-    d2 += h6 * (5 * r6);
-    d2 += h7 * (5 * r5);
-    d2 += h8 * (5 * r4);
-    d2 += h9 * (5 * r3);
-    c += (d2 >>> 13); d2 &= 0x1fff;
-
-    d3 = c;
-    d3 += h0 * r3;
-    d3 += h1 * r2;
-    d3 += h2 * r1;
-    d3 += h3 * r0;
-    d3 += h4 * (5 * r9);
-    c = (d3 >>> 13); d3 &= 0x1fff;
-    d3 += h5 * (5 * r8);
-    d3 += h6 * (5 * r7);
-    d3 += h7 * (5 * r6);
-    d3 += h8 * (5 * r5);
-    d3 += h9 * (5 * r4);
-    c += (d3 >>> 13); d3 &= 0x1fff;
-
-    d4 = c;
-    d4 += h0 * r4;
-    d4 += h1 * r3;
-    d4 += h2 * r2;
-    d4 += h3 * r1;
-    d4 += h4 * r0;
-    c = (d4 >>> 13); d4 &= 0x1fff;
-    d4 += h5 * (5 * r9);
-    d4 += h6 * (5 * r8);
-    d4 += h7 * (5 * r7);
-    d4 += h8 * (5 * r6);
-    d4 += h9 * (5 * r5);
-    c += (d4 >>> 13); d4 &= 0x1fff;
-
-    d5 = c;
-    d5 += h0 * r5;
-    d5 += h1 * r4;
-    d5 += h2 * r3;
-    d5 += h3 * r2;
-    d5 += h4 * r1;
-    c = (d5 >>> 13); d5 &= 0x1fff;
-    d5 += h5 * r0;
-    d5 += h6 * (5 * r9);
-    d5 += h7 * (5 * r8);
-    d5 += h8 * (5 * r7);
-    d5 += h9 * (5 * r6);
-    c += (d5 >>> 13); d5 &= 0x1fff;
-
-    d6 = c;
-    d6 += h0 * r6;
-    d6 += h1 * r5;
-    d6 += h2 * r4;
-    d6 += h3 * r3;
-    d6 += h4 * r2;
-    c = (d6 >>> 13); d6 &= 0x1fff;
-    d6 += h5 * r1;
-    d6 += h6 * r0;
-    d6 += h7 * (5 * r9);
-    d6 += h8 * (5 * r8);
-    d6 += h9 * (5 * r7);
-    c += (d6 >>> 13); d6 &= 0x1fff;
-
-    d7 = c;
-    d7 += h0 * r7;
-    d7 += h1 * r6;
-    d7 += h2 * r5;
-    d7 += h3 * r4;
-    d7 += h4 * r3;
-    c = (d7 >>> 13); d7 &= 0x1fff;
-    d7 += h5 * r2;
-    d7 += h6 * r1;
-    d7 += h7 * r0;
-    d7 += h8 * (5 * r9);
-    d7 += h9 * (5 * r8);
-    c += (d7 >>> 13); d7 &= 0x1fff;
-
-    d8 = c;
-    d8 += h0 * r8;
-    d8 += h1 * r7;
-    d8 += h2 * r6;
-    d8 += h3 * r5;
-    d8 += h4 * r4;
-    c = (d8 >>> 13); d8 &= 0x1fff;
-    d8 += h5 * r3;
-    d8 += h6 * r2;
-    d8 += h7 * r1;
-    d8 += h8 * r0;
-    d8 += h9 * (5 * r9);
-    c += (d8 >>> 13); d8 &= 0x1fff;
-
-    d9 = c;
-    d9 += h0 * r9;
-    d9 += h1 * r8;
-    d9 += h2 * r7;
-    d9 += h3 * r6;
-    d9 += h4 * r5;
-    c = (d9 >>> 13); d9 &= 0x1fff;
-    d9 += h5 * r4;
-    d9 += h6 * r3;
-    d9 += h7 * r2;
-    d9 += h8 * r1;
-    d9 += h9 * r0;
-    c += (d9 >>> 13); d9 &= 0x1fff;
-
-    c = (((c << 2) + c)) | 0;
-    c = (c + d0) | 0;
-    d0 = c & 0x1fff;
-    c = (c >>> 13);
-    d1 += c;
-
-    h0 = d0;
-    h1 = d1;
-    h2 = d2;
-    h3 = d3;
-    h4 = d4;
-    h5 = d5;
-    h6 = d6;
-    h7 = d7;
-    h8 = d8;
-    h9 = d9;
-
-    mpos += 16;
-    bytes -= 16;
-  }
-  this.h[0] = h0;
-  this.h[1] = h1;
-  this.h[2] = h2;
-  this.h[3] = h3;
-  this.h[4] = h4;
-  this.h[5] = h5;
-  this.h[6] = h6;
-  this.h[7] = h7;
-  this.h[8] = h8;
-  this.h[9] = h9;
-};
-
-poly1305.prototype.finish = function(mac, macpos) {
-  var g = new Uint16Array(10);
-  var c, mask, f, i;
-
-  if (this.leftover) {
-    i = this.leftover;
-    this.buffer[i++] = 1;
-    for (; i < 16; i++) this.buffer[i] = 0;
-    this.fin = 1;
-    this.blocks(this.buffer, 0, 16);
-  }
-
-  c = this.h[1] >>> 13;
-  this.h[1] &= 0x1fff;
-  for (i = 2; i < 10; i++) {
-    this.h[i] += c;
-    c = this.h[i] >>> 13;
-    this.h[i] &= 0x1fff;
-  }
-  this.h[0] += (c * 5);
-  c = this.h[0] >>> 13;
-  this.h[0] &= 0x1fff;
-  this.h[1] += c;
-  c = this.h[1] >>> 13;
-  this.h[1] &= 0x1fff;
-  this.h[2] += c;
-
-  g[0] = this.h[0] + 5;
-  c = g[0] >>> 13;
-  g[0] &= 0x1fff;
-  for (i = 1; i < 10; i++) {
-    g[i] = this.h[i] + c;
-    c = g[i] >>> 13;
-    g[i] &= 0x1fff;
-  }
-  g[9] -= (1 << 13);
-
-  mask = (c ^ 1) - 1;
-  for (i = 0; i < 10; i++) g[i] &= mask;
-  mask = ~mask;
-  for (i = 0; i < 10; i++) this.h[i] = (this.h[i] & mask) | g[i];
-
-  this.h[0] = ((this.h[0]       ) | (this.h[1] << 13)                    ) & 0xffff;
-  this.h[1] = ((this.h[1] >>>  3) | (this.h[2] << 10)                    ) & 0xffff;
-  this.h[2] = ((this.h[2] >>>  6) | (this.h[3] <<  7)                    ) & 0xffff;
-  this.h[3] = ((this.h[3] >>>  9) | (this.h[4] <<  4)                    ) & 0xffff;
-  this.h[4] = ((this.h[4] >>> 12) | (this.h[5] <<  1) | (this.h[6] << 14)) & 0xffff;
-  this.h[5] = ((this.h[6] >>>  2) | (this.h[7] << 11)                    ) & 0xffff;
-  this.h[6] = ((this.h[7] >>>  5) | (this.h[8] <<  8)                    ) & 0xffff;
-  this.h[7] = ((this.h[8] >>>  8) | (this.h[9] <<  5)                    ) & 0xffff;
-
-  f = this.h[0] + this.pad[0];
-  this.h[0] = f & 0xffff;
-  for (i = 1; i < 8; i++) {
-    f = (((this.h[i] + this.pad[i]) | 0) + (f >>> 16)) | 0;
-    this.h[i] = f & 0xffff;
-  }
-
-  mac[macpos+ 0] = (this.h[0] >>> 0) & 0xff;
-  mac[macpos+ 1] = (this.h[0] >>> 8) & 0xff;
-  mac[macpos+ 2] = (this.h[1] >>> 0) & 0xff;
-  mac[macpos+ 3] = (this.h[1] >>> 8) & 0xff;
-  mac[macpos+ 4] = (this.h[2] >>> 0) & 0xff;
-  mac[macpos+ 5] = (this.h[2] >>> 8) & 0xff;
-  mac[macpos+ 6] = (this.h[3] >>> 0) & 0xff;
-  mac[macpos+ 7] = (this.h[3] >>> 8) & 0xff;
-  mac[macpos+ 8] = (this.h[4] >>> 0) & 0xff;
-  mac[macpos+ 9] = (this.h[4] >>> 8) & 0xff;
-  mac[macpos+10] = (this.h[5] >>> 0) & 0xff;
-  mac[macpos+11] = (this.h[5] >>> 8) & 0xff;
-  mac[macpos+12] = (this.h[6] >>> 0) & 0xff;
-  mac[macpos+13] = (this.h[6] >>> 8) & 0xff;
-  mac[macpos+14] = (this.h[7] >>> 0) & 0xff;
-  mac[macpos+15] = (this.h[7] >>> 8) & 0xff;
-};
-
-poly1305.prototype.update = function(m, mpos, bytes) {
-  var i, want;
-
-  if (this.leftover) {
-    want = (16 - this.leftover);
-    if (want > bytes)
-      want = bytes;
-    for (i = 0; i < want; i++)
-      this.buffer[this.leftover + i] = m[mpos+i];
-    bytes -= want;
-    mpos += want;
-    this.leftover += want;
-    if (this.leftover < 16)
-      return;
-    this.blocks(this.buffer, 0, 16);
-    this.leftover = 0;
-  }
-
-  if (bytes >= 16) {
-    want = bytes - (bytes % 16);
-    this.blocks(m, mpos, want);
-    mpos += want;
-    bytes -= want;
-  }
-
-  if (bytes) {
-    for (i = 0; i < bytes; i++)
-      this.buffer[this.leftover + i] = m[mpos+i];
-    this.leftover += bytes;
-  }
-};
-
-function crypto_onetimeauth(out, outpos, m, mpos, n, k) {
-  var s = new poly1305(k);
-  s.update(m, mpos, n);
-  s.finish(out, outpos);
-  return 0;
-}
-
-function crypto_onetimeauth_verify(h, hpos, m, mpos, n, k) {
-  var x = new Uint8Array(16);
-  crypto_onetimeauth(x,0,m,mpos,n,k);
-  return crypto_verify_16(h,hpos,x,0);
-}
-
-function crypto_secretbox(c,m,d,n,k) {
-  var i;
-  if (d < 32) return -1;
-  crypto_stream_xor(c,0,m,0,d,n,k);
-  crypto_onetimeauth(c, 16, c, 32, d - 32, c);
-  for (i = 0; i < 16; i++) c[i] = 0;
-  return 0;
-}
-
-function crypto_secretbox_open(m,c,d,n,k) {
-  var i;
-  var x = new Uint8Array(32);
-  if (d < 32) return -1;
-  crypto_stream(x,0,32,n,k);
-  if (crypto_onetimeauth_verify(c, 16,c, 32,d - 32,x) !== 0) return -1;
-  crypto_stream_xor(m,0,c,0,d,n,k);
-  for (i = 0; i < 32; i++) m[i] = 0;
-  return 0;
-}
-
-function set25519(r, a) {
-  var i;
-  for (i = 0; i < 16; i++) r[i] = a[i]|0;
-}
-
-function car25519(o) {
-  var i, v, c = 1;
-  for (i = 0; i < 16; i++) {
-    v = o[i] + c + 65535;
-    c = Math.floor(v / 65536);
-    o[i] = v - c * 65536;
-  }
-  o[0] += c-1 + 37 * (c-1);
-}
-
-function sel25519(p, q, b) {
-  var t, c = ~(b-1);
-  for (var i = 0; i < 16; i++) {
-    t = c & (p[i] ^ q[i]);
-    p[i] ^= t;
-    q[i] ^= t;
-  }
-}
-
-function pack25519(o, n) {
-  var i, j, b;
-  var m = gf(), t = gf();
-  for (i = 0; i < 16; i++) t[i] = n[i];
-  car25519(t);
-  car25519(t);
-  car25519(t);
-  for (j = 0; j < 2; j++) {
-    m[0] = t[0] - 0xffed;
-    for (i = 1; i < 15; i++) {
-      m[i] = t[i] - 0xffff - ((m[i-1]>>16) & 1);
-      m[i-1] &= 0xffff;
-    }
-    m[15] = t[15] - 0x7fff - ((m[14]>>16) & 1);
-    b = (m[15]>>16) & 1;
-    m[14] &= 0xffff;
-    sel25519(t, m, 1-b);
-  }
-  for (i = 0; i < 16; i++) {
-    o[2*i] = t[i] & 0xff;
-    o[2*i+1] = t[i]>>8;
-  }
-}
-
-function neq25519(a, b) {
-  var c = new Uint8Array(32), d = new Uint8Array(32);
-  pack25519(c, a);
-  pack25519(d, b);
-  return crypto_verify_32(c, 0, d, 0);
-}
-
-function par25519(a) {
-  var d = new Uint8Array(32);
-  pack25519(d, a);
-  return d[0] & 1;
-}
-
-function unpack25519(o, n) {
-  var i;
-  for (i = 0; i < 16; i++) o[i] = n[2*i] + (n[2*i+1] << 8);
-  o[15] &= 0x7fff;
-}
-
-function A(o, a, b) {
-  for (var i = 0; i < 16; i++) o[i] = a[i] + b[i];
-}
-
-function Z(o, a, b) {
-  for (var i = 0; i < 16; i++) o[i] = a[i] - b[i];
-}
-
-function M(o, a, b) {
-  var v, c,
-     t0 = 0,  t1 = 0,  t2 = 0,  t3 = 0,  t4 = 0,  t5 = 0,  t6 = 0,  t7 = 0,
-     t8 = 0,  t9 = 0, t10 = 0, t11 = 0, t12 = 0, t13 = 0, t14 = 0, t15 = 0,
-    t16 = 0, t17 = 0, t18 = 0, t19 = 0, t20 = 0, t21 = 0, t22 = 0, t23 = 0,
-    t24 = 0, t25 = 0, t26 = 0, t27 = 0, t28 = 0, t29 = 0, t30 = 0,
-    b0 = b[0],
-    b1 = b[1],
-    b2 = b[2],
-    b3 = b[3],
-    b4 = b[4],
-    b5 = b[5],
-    b6 = b[6],
-    b7 = b[7],
-    b8 = b[8],
-    b9 = b[9],
-    b10 = b[10],
-    b11 = b[11],
-    b12 = b[12],
-    b13 = b[13],
-    b14 = b[14],
-    b15 = b[15];
-
-  v = a[0];
-  t0 += v * b0;
-  t1 += v * b1;
-  t2 += v * b2;
-  t3 += v * b3;
-  t4 += v * b4;
-  t5 += v * b5;
-  t6 += v * b6;
-  t7 += v * b7;
-  t8 += v * b8;
-  t9 += v * b9;
-  t10 += v * b10;
-  t11 += v * b11;
-  t12 += v * b12;
-  t13 += v * b13;
-  t14 += v * b14;
-  t15 += v * b15;
-  v = a[1];
-  t1 += v * b0;
-  t2 += v * b1;
-  t3 += v * b2;
-  t4 += v * b3;
-  t5 += v * b4;
-  t6 += v * b5;
-  t7 += v * b6;
-  t8 += v * b7;
-  t9 += v * b8;
-  t10 += v * b9;
-  t11 += v * b10;
-  t12 += v * b11;
-  t13 += v * b12;
-  t14 += v * b13;
-  t15 += v * b14;
-  t16 += v * b15;
-  v = a[2];
-  t2 += v * b0;
-  t3 += v * b1;
-  t4 += v * b2;
-  t5 += v * b3;
-  t6 += v * b4;
-  t7 += v * b5;
-  t8 += v * b6;
-  t9 += v * b7;
-  t10 += v * b8;
-  t11 += v * b9;
-  t12 += v * b10;
-  t13 += v * b11;
-  t14 += v * b12;
-  t15 += v * b13;
-  t16 += v * b14;
-  t17 += v * b15;
-  v = a[3];
-  t3 += v * b0;
-  t4 += v * b1;
-  t5 += v * b2;
-  t6 += v * b3;
-  t7 += v * b4;
-  t8 += v * b5;
-  t9 += v * b6;
-  t10 += v * b7;
-  t11 += v * b8;
-  t12 += v * b9;
-  t13 += v * b10;
-  t14 += v * b11;
-  t15 += v * b12;
-  t16 += v * b13;
-  t17 += v * b14;
-  t18 += v * b15;
-  v = a[4];
-  t4 += v * b0;
-  t5 += v * b1;
-  t6 += v * b2;
-  t7 += v * b3;
-  t8 += v * b4;
-  t9 += v * b5;
-  t10 += v * b6;
-  t11 += v * b7;
-  t12 += v * b8;
-  t13 += v * b9;
-  t14 += v * b10;
-  t15 += v * b11;
-  t16 += v * b12;
-  t17 += v * b13;
-  t18 += v * b14;
-  t19 += v * b15;
-  v = a[5];
-  t5 += v * b0;
-  t6 += v * b1;
-  t7 += v * b2;
-  t8 += v * b3;
-  t9 += v * b4;
-  t10 += v * b5;
-  t11 += v * b6;
-  t12 += v * b7;
-  t13 += v * b8;
-  t14 += v * b9;
-  t15 += v * b10;
-  t16 += v * b11;
-  t17 += v * b12;
-  t18 += v * b13;
-  t19 += v * b14;
-  t20 += v * b15;
-  v = a[6];
-  t6 += v * b0;
-  t7 += v * b1;
-  t8 += v * b2;
-  t9 += v * b3;
-  t10 += v * b4;
-  t11 += v * b5;
-  t12 += v * b6;
-  t13 += v * b7;
-  t14 += v * b8;
-  t15 += v * b9;
-  t16 += v * b10;
-  t17 += v * b11;
-  t18 += v * b12;
-  t19 += v * b13;
-  t20 += v * b14;
-  t21 += v * b15;
-  v = a[7];
-  t7 += v * b0;
-  t8 += v * b1;
-  t9 += v * b2;
-  t10 += v * b3;
-  t11 += v * b4;
-  t12 += v * b5;
-  t13 += v * b6;
-  t14 += v * b7;
-  t15 += v * b8;
-  t16 += v * b9;
-  t17 += v * b10;
-  t18 += v * b11;
-  t19 += v * b12;
-  t20 += v * b13;
-  t21 += v * b14;
-  t22 += v * b15;
-  v = a[8];
-  t8 += v * b0;
-  t9 += v * b1;
-  t10 += v * b2;
-  t11 += v * b3;
-  t12 += v * b4;
-  t13 += v * b5;
-  t14 += v * b6;
-  t15 += v * b7;
-  t16 += v * b8;
-  t17 += v * b9;
-  t18 += v * b10;
-  t19 += v * b11;
-  t20 += v * b12;
-  t21 += v * b13;
-  t22 += v * b14;
-  t23 += v * b15;
-  v = a[9];
-  t9 += v * b0;
-  t10 += v * b1;
-  t11 += v * b2;
-  t12 += v * b3;
-  t13 += v * b4;
-  t14 += v * b5;
-  t15 += v * b6;
-  t16 += v * b7;
-  t17 += v * b8;
-  t18 += v * b9;
-  t19 += v * b10;
-  t20 += v * b11;
-  t21 += v * b12;
-  t22 += v * b13;
-  t23 += v * b14;
-  t24 += v * b15;
-  v = a[10];
-  t10 += v * b0;
-  t11 += v * b1;
-  t12 += v * b2;
-  t13 += v * b3;
-  t14 += v * b4;
-  t15 += v * b5;
-  t16 += v * b6;
-  t17 += v * b7;
-  t18 += v * b8;
-  t19 += v * b9;
-  t20 += v * b10;
-  t21 += v * b11;
-  t22 += v * b12;
-  t23 += v * b13;
-  t24 += v * b14;
-  t25 += v * b15;
-  v = a[11];
-  t11 += v * b0;
-  t12 += v * b1;
-  t13 += v * b2;
-  t14 += v * b3;
-  t15 += v * b4;
-  t16 += v * b5;
-  t17 += v * b6;
-  t18 += v * b7;
-  t19 += v * b8;
-  t20 += v * b9;
-  t21 += v * b10;
-  t22 += v * b11;
-  t23 += v * b12;
-  t24 += v * b13;
-  t25 += v * b14;
-  t26 += v * b15;
-  v = a[12];
-  t12 += v * b0;
-  t13 += v * b1;
-  t14 += v * b2;
-  t15 += v * b3;
-  t16 += v * b4;
-  t17 += v * b5;
-  t18 += v * b6;
-  t19 += v * b7;
-  t20 += v * b8;
-  t21 += v * b9;
-  t22 += v * b10;
-  t23 += v * b11;
-  t24 += v * b12;
-  t25 += v * b13;
-  t26 += v * b14;
-  t27 += v * b15;
-  v = a[13];
-  t13 += v * b0;
-  t14 += v * b1;
-  t15 += v * b2;
-  t16 += v * b3;
-  t17 += v * b4;
-  t18 += v * b5;
-  t19 += v * b6;
-  t20 += v * b7;
-  t21 += v * b8;
-  t22 += v * b9;
-  t23 += v * b10;
-  t24 += v * b11;
-  t25 += v * b12;
-  t26 += v * b13;
-  t27 += v * b14;
-  t28 += v * b15;
-  v = a[14];
-  t14 += v * b0;
-  t15 += v * b1;
-  t16 += v * b2;
-  t17 += v * b3;
-  t18 += v * b4;
-  t19 += v * b5;
-  t20 += v * b6;
-  t21 += v * b7;
-  t22 += v * b8;
-  t23 += v * b9;
-  t24 += v * b10;
-  t25 += v * b11;
-  t26 += v * b12;
-  t27 += v * b13;
-  t28 += v * b14;
-  t29 += v * b15;
-  v = a[15];
-  t15 += v * b0;
-  t16 += v * b1;
-  t17 += v * b2;
-  t18 += v * b3;
-  t19 += v * b4;
-  t20 += v * b5;
-  t21 += v * b6;
-  t22 += v * b7;
-  t23 += v * b8;
-  t24 += v * b9;
-  t25 += v * b10;
-  t26 += v * b11;
-  t27 += v * b12;
-  t28 += v * b13;
-  t29 += v * b14;
-  t30 += v * b15;
-
-  t0  += 38 * t16;
-  t1  += 38 * t17;
-  t2  += 38 * t18;
-  t3  += 38 * t19;
-  t4  += 38 * t20;
-  t5  += 38 * t21;
-  t6  += 38 * t22;
-  t7  += 38 * t23;
-  t8  += 38 * t24;
-  t9  += 38 * t25;
-  t10 += 38 * t26;
-  t11 += 38 * t27;
-  t12 += 38 * t28;
-  t13 += 38 * t29;
-  t14 += 38 * t30;
-  // t15 left as is
-
-  // first car
-  c = 1;
-  v =  t0 + c + 65535; c = Math.floor(v / 65536);  t0 = v - c * 65536;
-  v =  t1 + c + 65535; c = Math.floor(v / 65536);  t1 = v - c * 65536;
-  v =  t2 + c + 65535; c = Math.floor(v / 65536);  t2 = v - c * 65536;
-  v =  t3 + c + 65535; c = Math.floor(v / 65536);  t3 = v - c * 65536;
-  v =  t4 + c + 65535; c = Math.floor(v / 65536);  t4 = v - c * 65536;
-  v =  t5 + c + 65535; c = Math.floor(v / 65536);  t5 = v - c * 65536;
-  v =  t6 + c + 65535; c = Math.floor(v / 65536);  t6 = v - c * 65536;
-  v =  t7 + c + 65535; c = Math.floor(v / 65536);  t7 = v - c * 65536;
-  v =  t8 + c + 65535; c = Math.floor(v / 65536);  t8 = v - c * 65536;
-  v =  t9 + c + 65535; c = Math.floor(v / 65536);  t9 = v - c * 65536;
-  v = t10 + c + 65535; c = Math.floor(v / 65536); t10 = v - c * 65536;
-  v = t11 + c + 65535; c = Math.floor(v / 65536); t11 = v - c * 65536;
-  v = t12 + c + 65535; c = Math.floor(v / 65536); t12 = v - c * 65536;
-  v = t13 + c + 65535; c = Math.floor(v / 65536); t13 = v - c * 65536;
-  v = t14 + c + 65535; c = Math.floor(v / 65536); t14 = v - c * 65536;
-  v = t15 + c + 65535; c = Math.floor(v / 65536); t15 = v - c * 65536;
-  t0 += c-1 + 37 * (c-1);
-
-  // second car
-  c = 1;
-  v =  t0 + c + 65535; c = Math.floor(v / 65536);  t0 = v - c * 65536;
-  v =  t1 + c + 65535; c = Math.floor(v / 65536);  t1 = v - c * 65536;
-  v =  t2 + c + 65535; c = Math.floor(v / 65536);  t2 = v - c * 65536;
-  v =  t3 + c + 65535; c = Math.floor(v / 65536);  t3 = v - c * 65536;
-  v =  t4 + c + 65535; c = Math.floor(v / 65536);  t4 = v - c * 65536;
-  v =  t5 + c + 65535; c = Math.floor(v / 65536);  t5 = v - c * 65536;
-  v =  t6 + c + 65535; c = Math.floor(v / 65536);  t6 = v - c * 65536;
-  v =  t7 + c + 65535; c = Math.floor(v / 65536);  t7 = v - c * 65536;
-  v =  t8 + c + 65535; c = Math.floor(v / 65536);  t8 = v - c * 65536;
-  v =  t9 + c + 65535; c = Math.floor(v / 65536);  t9 = v - c * 65536;
-  v = t10 + c + 65535; c = Math.floor(v / 65536); t10 = v - c * 65536;
-  v = t11 + c + 65535; c = Math.floor(v / 65536); t11 = v - c * 65536;
-  v = t12 + c + 65535; c = Math.floor(v / 65536); t12 = v - c * 65536;
-  v = t13 + c + 65535; c = Math.floor(v / 65536); t13 = v - c * 65536;
-  v = t14 + c + 65535; c = Math.floor(v / 65536); t14 = v - c * 65536;
-  v = t15 + c + 65535; c = Math.floor(v / 65536); t15 = v - c * 65536;
-  t0 += c-1 + 37 * (c-1);
-
-  o[ 0] = t0;
-  o[ 1] = t1;
-  o[ 2] = t2;
-  o[ 3] = t3;
-  o[ 4] = t4;
-  o[ 5] = t5;
-  o[ 6] = t6;
-  o[ 7] = t7;
-  o[ 8] = t8;
-  o[ 9] = t9;
-  o[10] = t10;
-  o[11] = t11;
-  o[12] = t12;
-  o[13] = t13;
-  o[14] = t14;
-  o[15] = t15;
-}
-
-function S(o, a) {
-  M(o, a, a);
-}
-
-function inv25519(o, i) {
-  var c = gf();
-  var a;
-  for (a = 0; a < 16; a++) c[a] = i[a];
-  for (a = 253; a >= 0; a--) {
-    S(c, c);
-    if(a !== 2 && a !== 4) M(c, c, i);
-  }
-  for (a = 0; a < 16; a++) o[a] = c[a];
-}
-
-function pow2523(o, i) {
-  var c = gf();
-  var a;
-  for (a = 0; a < 16; a++) c[a] = i[a];
-  for (a = 250; a >= 0; a--) {
-      S(c, c);
-      if(a !== 1) M(c, c, i);
-  }
-  for (a = 0; a < 16; a++) o[a] = c[a];
-}
-
-function crypto_scalarmult(q, n, p) {
-  var z = new Uint8Array(32);
-  var x = new Float64Array(80), r, i;
-  var a = gf(), b = gf(), c = gf(),
-      d = gf(), e = gf(), f = gf();
-  for (i = 0; i < 31; i++) z[i] = n[i];
-  z[31]=(n[31]&127)|64;
-  z[0]&=248;
-  unpack25519(x,p);
-  for (i = 0; i < 16; i++) {
-    b[i]=x[i];
-    d[i]=a[i]=c[i]=0;
-  }
-  a[0]=d[0]=1;
-  for (i=254; i>=0; --i) {
-    r=(z[i>>>3]>>>(i&7))&1;
-    sel25519(a,b,r);
-    sel25519(c,d,r);
-    A(e,a,c);
-    Z(a,a,c);
-    A(c,b,d);
-    Z(b,b,d);
-    S(d,e);
-    S(f,a);
-    M(a,c,a);
-    M(c,b,e);
-    A(e,a,c);
-    Z(a,a,c);
-    S(b,a);
-    Z(c,d,f);
-    M(a,c,_121665);
-    A(a,a,d);
-    M(c,c,a);
-    M(a,d,f);
-    M(d,b,x);
-    S(b,e);
-    sel25519(a,b,r);
-    sel25519(c,d,r);
-  }
-  for (i = 0; i < 16; i++) {
-    x[i+16]=a[i];
-    x[i+32]=c[i];
-    x[i+48]=b[i];
-    x[i+64]=d[i];
-  }
-  var x32 = x.subarray(32);
-  var x16 = x.subarray(16);
-  inv25519(x32,x32);
-  M(x16,x16,x32);
-  pack25519(q,x16);
-  return 0;
-}
-
-function crypto_scalarmult_base(q, n) {
-  return crypto_scalarmult(q, n, _9);
-}
-
-function crypto_box_keypair(y, x) {
-  randombytes(x, 32);
-  return crypto_scalarmult_base(y, x);
-}
-
-function crypto_box_beforenm(k, y, x) {
-  var s = new Uint8Array(32);
-  crypto_scalarmult(s, x, y);
-  return crypto_core_hsalsa20(k, _0, s, sigma);
-}
-
-var crypto_box_afternm = crypto_secretbox;
-var crypto_box_open_afternm = crypto_secretbox_open;
-
-function crypto_box(c, m, d, n, y, x) {
-  var k = new Uint8Array(32);
-  crypto_box_beforenm(k, y, x);
-  return crypto_box_afternm(c, m, d, n, k);
-}
-
-function crypto_box_open(m, c, d, n, y, x) {
-  var k = new Uint8Array(32);
-  crypto_box_beforenm(k, y, x);
-  return crypto_box_open_afternm(m, c, d, n, k);
-}
-
-var K = [
-  0x428a2f98, 0xd728ae22, 0x71374491, 0x23ef65cd,
-  0xb5c0fbcf, 0xec4d3b2f, 0xe9b5dba5, 0x8189dbbc,
-  0x3956c25b, 0xf348b538, 0x59f111f1, 0xb605d019,
-  0x923f82a4, 0xaf194f9b, 0xab1c5ed5, 0xda6d8118,
-  0xd807aa98, 0xa3030242, 0x12835b01, 0x45706fbe,
-  0x243185be, 0x4ee4b28c, 0x550c7dc3, 0xd5ffb4e2,
-  0x72be5d74, 0xf27b896f, 0x80deb1fe, 0x3b1696b1,
-  0x9bdc06a7, 0x25c71235, 0xc19bf174, 0xcf692694,
-  0xe49b69c1, 0x9ef14ad2, 0xefbe4786, 0x384f25e3,
-  0x0fc19dc6, 0x8b8cd5b5, 0x240ca1cc, 0x77ac9c65,
-  0x2de92c6f, 0x592b0275, 0x4a7484aa, 0x6ea6e483,
-  0x5cb0a9dc, 0xbd41fbd4, 0x76f988da, 0x831153b5,
-  0x983e5152, 0xee66dfab, 0xa831c66d, 0x2db43210,
-  0xb00327c8, 0x98fb213f, 0xbf597fc7, 0xbeef0ee4,
-  0xc6e00bf3, 0x3da88fc2, 0xd5a79147, 0x930aa725,
-  0x06ca6351, 0xe003826f, 0x14292967, 0x0a0e6e70,
-  0x27b70a85, 0x46d22ffc, 0x2e1b2138, 0x5c26c926,
-  0x4d2c6dfc, 0x5ac42aed, 0x53380d13, 0x9d95b3df,
-  0x650a7354, 0x8baf63de, 0x766a0abb, 0x3c77b2a8,
-  0x81c2c92e, 0x47edaee6, 0x92722c85, 0x1482353b,
-  0xa2bfe8a1, 0x4cf10364, 0xa81a664b, 0xbc423001,
-  0xc24b8b70, 0xd0f89791, 0xc76c51a3, 0x0654be30,
-  0xd192e819, 0xd6ef5218, 0xd6990624, 0x5565a910,
-  0xf40e3585, 0x5771202a, 0x106aa070, 0x32bbd1b8,
-  0x19a4c116, 0xb8d2d0c8, 0x1e376c08, 0x5141ab53,
-  0x2748774c, 0xdf8eeb99, 0x34b0bcb5, 0xe19b48a8,
-  0x391c0cb3, 0xc5c95a63, 0x4ed8aa4a, 0xe3418acb,
-  0x5b9cca4f, 0x7763e373, 0x682e6ff3, 0xd6b2b8a3,
-  0x748f82ee, 0x5defb2fc, 0x78a5636f, 0x43172f60,
-  0x84c87814, 0xa1f0ab72, 0x8cc70208, 0x1a6439ec,
-  0x90befffa, 0x23631e28, 0xa4506ceb, 0xde82bde9,
-  0xbef9a3f7, 0xb2c67915, 0xc67178f2, 0xe372532b,
-  0xca273ece, 0xea26619c, 0xd186b8c7, 0x21c0c207,
-  0xeada7dd6, 0xcde0eb1e, 0xf57d4f7f, 0xee6ed178,
-  0x06f067aa, 0x72176fba, 0x0a637dc5, 0xa2c898a6,
-  0x113f9804, 0xbef90dae, 0x1b710b35, 0x131c471b,
-  0x28db77f5, 0x23047d84, 0x32caab7b, 0x40c72493,
-  0x3c9ebe0a, 0x15c9bebc, 0x431d67c4, 0x9c100d4c,
-  0x4cc5d4be, 0xcb3e42b6, 0x597f299c, 0xfc657e2a,
-  0x5fcb6fab, 0x3ad6faec, 0x6c44198c, 0x4a475817
-];
-
-function crypto_hashblocks_hl(hh, hl, m, n) {
-  var wh = new Int32Array(16), wl = new Int32Array(16),
-      bh0, bh1, bh2, bh3, bh4, bh5, bh6, bh7,
-      bl0, bl1, bl2, bl3, bl4, bl5, bl6, bl7,
-      th, tl, i, j, h, l, a, b, c, d;
-
-  var ah0 = hh[0],
-      ah1 = hh[1],
-      ah2 = hh[2],
-      ah3 = hh[3],
-      ah4 = hh[4],
-      ah5 = hh[5],
-      ah6 = hh[6],
-      ah7 = hh[7],
-
-      al0 = hl[0],
-      al1 = hl[1],
-      al2 = hl[2],
-      al3 = hl[3],
-      al4 = hl[4],
-      al5 = hl[5],
-      al6 = hl[6],
-      al7 = hl[7];
-
-  var pos = 0;
-  while (n >= 128) {
-    for (i = 0; i < 16; i++) {
-      j = 8 * i + pos;
-      wh[i] = (m[j+0] << 24) | (m[j+1] << 16) | (m[j+2] << 8) | m[j+3];
-      wl[i] = (m[j+4] << 24) | (m[j+5] << 16) | (m[j+6] << 8) | m[j+7];
-    }
-    for (i = 0; i < 80; i++) {
-      bh0 = ah0;
-      bh1 = ah1;
-      bh2 = ah2;
-      bh3 = ah3;
-      bh4 = ah4;
-      bh5 = ah5;
-      bh6 = ah6;
-      bh7 = ah7;
-
-      bl0 = al0;
-      bl1 = al1;
-      bl2 = al2;
-      bl3 = al3;
-      bl4 = al4;
-      bl5 = al5;
-      bl6 = al6;
-      bl7 = al7;
-
-      // add
-      h = ah7;
-      l = al7;
-
-      a = l & 0xffff; b = l >>> 16;
-      c = h & 0xffff; d = h >>> 16;
-
-      // Sigma1
-      h = ((ah4 >>> 14) | (al4 << (32-14))) ^ ((ah4 >>> 18) | (al4 << (32-18))) ^ ((al4 >>> (41-32)) | (ah4 << (32-(41-32))));
-      l = ((al4 >>> 14) | (ah4 << (32-14))) ^ ((al4 >>> 18) | (ah4 << (32-18))) ^ ((ah4 >>> (41-32)) | (al4 << (32-(41-32))));
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      // Ch
-      h = (ah4 & ah5) ^ (~ah4 & ah6);
-      l = (al4 & al5) ^ (~al4 & al6);
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      // K
-      h = K[i*2];
-      l = K[i*2+1];
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      // w
-      h = wh[i%16];
-      l = wl[i%16];
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      b += a >>> 16;
-      c += b >>> 16;
-      d += c >>> 16;
-
-      th = c & 0xffff | d << 16;
-      tl = a & 0xffff | b << 16;
-
-      // add
-      h = th;
-      l = tl;
-
-      a = l & 0xffff; b = l >>> 16;
-      c = h & 0xffff; d = h >>> 16;
-
-      // Sigma0
-      h = ((ah0 >>> 28) | (al0 << (32-28))) ^ ((al0 >>> (34-32)) | (ah0 << (32-(34-32)))) ^ ((al0 >>> (39-32)) | (ah0 << (32-(39-32))));
-      l = ((al0 >>> 28) | (ah0 << (32-28))) ^ ((ah0 >>> (34-32)) | (al0 << (32-(34-32)))) ^ ((ah0 >>> (39-32)) | (al0 << (32-(39-32))));
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      // Maj
-      h = (ah0 & ah1) ^ (ah0 & ah2) ^ (ah1 & ah2);
-      l = (al0 & al1) ^ (al0 & al2) ^ (al1 & al2);
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      b += a >>> 16;
-      c += b >>> 16;
-      d += c >>> 16;
-
-      bh7 = (c & 0xffff) | (d << 16);
-      bl7 = (a & 0xffff) | (b << 16);
-
-      // add
-      h = bh3;
-      l = bl3;
-
-      a = l & 0xffff; b = l >>> 16;
-      c = h & 0xffff; d = h >>> 16;
-
-      h = th;
-      l = tl;
-
-      a += l & 0xffff; b += l >>> 16;
-      c += h & 0xffff; d += h >>> 16;
-
-      b += a >>> 16;
-      c += b >>> 16;
-      d += c >>> 16;
-
-      bh3 = (c & 0xffff) | (d << 16);
-      bl3 = (a & 0xffff) | (b << 16);
-
-      ah1 = bh0;
-      ah2 = bh1;
-      ah3 = bh2;
-      ah4 = bh3;
-      ah5 = bh4;
-      ah6 = bh5;
-      ah7 = bh6;
-      ah0 = bh7;
-
-      al1 = bl0;
-      al2 = bl1;
-      al3 = bl2;
-      al4 = bl3;
-      al5 = bl4;
-      al6 = bl5;
-      al7 = bl6;
-      al0 = bl7;
-
-      if (i%16 === 15) {
-        for (j = 0; j < 16; j++) {
-          // add
-          h = wh[j];
-          l = wl[j];
-
-          a = l & 0xffff; b = l >>> 16;
-          c = h & 0xffff; d = h >>> 16;
-
-          h = wh[(j+9)%16];
-          l = wl[(j+9)%16];
-
-          a += l & 0xffff; b += l >>> 16;
-          c += h & 0xffff; d += h >>> 16;
-
-          // sigma0
-          th = wh[(j+1)%16];
-          tl = wl[(j+1)%16];
-          h = ((th >>> 1) | (tl << (32-1))) ^ ((th >>> 8) | (tl << (32-8))) ^ (th >>> 7);
-          l = ((tl >>> 1) | (th << (32-1))) ^ ((tl >>> 8) | (th << (32-8))) ^ ((tl >>> 7) | (th << (32-7)));
-
-          a += l & 0xffff; b += l >>> 16;
-          c += h & 0xffff; d += h >>> 16;
-
-          // sigma1
-          th = wh[(j+14)%16];
-          tl = wl[(j+14)%16];
-          h = ((th >>> 19) | (tl << (32-19))) ^ ((tl >>> (61-32)) | (th << (32-(61-32)))) ^ (th >>> 6);
-          l = ((tl >>> 19) | (th << (32-19))) ^ ((th >>> (61-32)) | (tl << (32-(61-32)))) ^ ((tl >>> 6) | (th << (32-6)));
-
-          a += l & 0xffff; b += l >>> 16;
-          c += h & 0xffff; d += h >>> 16;
-
-          b += a >>> 16;
-          c += b >>> 16;
-          d += c >>> 16;
-
-          wh[j] = (c & 0xffff) | (d << 16);
-          wl[j] = (a & 0xffff) | (b << 16);
-        }
-      }
-    }
-
-    // add
-    h = ah0;
-    l = al0;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[0];
-    l = hl[0];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[0] = ah0 = (c & 0xffff) | (d << 16);
-    hl[0] = al0 = (a & 0xffff) | (b << 16);
-
-    h = ah1;
-    l = al1;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[1];
-    l = hl[1];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[1] = ah1 = (c & 0xffff) | (d << 16);
-    hl[1] = al1 = (a & 0xffff) | (b << 16);
-
-    h = ah2;
-    l = al2;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[2];
-    l = hl[2];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[2] = ah2 = (c & 0xffff) | (d << 16);
-    hl[2] = al2 = (a & 0xffff) | (b << 16);
-
-    h = ah3;
-    l = al3;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[3];
-    l = hl[3];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[3] = ah3 = (c & 0xffff) | (d << 16);
-    hl[3] = al3 = (a & 0xffff) | (b << 16);
-
-    h = ah4;
-    l = al4;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[4];
-    l = hl[4];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[4] = ah4 = (c & 0xffff) | (d << 16);
-    hl[4] = al4 = (a & 0xffff) | (b << 16);
-
-    h = ah5;
-    l = al5;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[5];
-    l = hl[5];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[5] = ah5 = (c & 0xffff) | (d << 16);
-    hl[5] = al5 = (a & 0xffff) | (b << 16);
-
-    h = ah6;
-    l = al6;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[6];
-    l = hl[6];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[6] = ah6 = (c & 0xffff) | (d << 16);
-    hl[6] = al6 = (a & 0xffff) | (b << 16);
-
-    h = ah7;
-    l = al7;
-
-    a = l & 0xffff; b = l >>> 16;
-    c = h & 0xffff; d = h >>> 16;
-
-    h = hh[7];
-    l = hl[7];
-
-    a += l & 0xffff; b += l >>> 16;
-    c += h & 0xffff; d += h >>> 16;
-
-    b += a >>> 16;
-    c += b >>> 16;
-    d += c >>> 16;
-
-    hh[7] = ah7 = (c & 0xffff) | (d << 16);
-    hl[7] = al7 = (a & 0xffff) | (b << 16);
-
-    pos += 128;
-    n -= 128;
-  }
-
-  return n;
-}
-
-function crypto_hash(out, m, n) {
-  var hh = new Int32Array(8),
-      hl = new Int32Array(8),
-      x = new Uint8Array(256),
-      i, b = n;
-
-  hh[0] = 0x6a09e667;
-  hh[1] = 0xbb67ae85;
-  hh[2] = 0x3c6ef372;
-  hh[3] = 0xa54ff53a;
-  hh[4] = 0x510e527f;
-  hh[5] = 0x9b05688c;
-  hh[6] = 0x1f83d9ab;
-  hh[7] = 0x5be0cd19;
-
-  hl[0] = 0xf3bcc908;
-  hl[1] = 0x84caa73b;
-  hl[2] = 0xfe94f82b;
-  hl[3] = 0x5f1d36f1;
-  hl[4] = 0xade682d1;
-  hl[5] = 0x2b3e6c1f;
-  hl[6] = 0xfb41bd6b;
-  hl[7] = 0x137e2179;
-
-  crypto_hashblocks_hl(hh, hl, m, n);
-  n %= 128;
-
-  for (i = 0; i < n; i++) x[i] = m[b-n+i];
-  x[n] = 128;
-
-  n = 256-128*(n<112?1:0);
-  x[n-9] = 0;
-  ts64(x, n-8,  (b / 0x20000000) | 0, b << 3);
-  crypto_hashblocks_hl(hh, hl, x, n);
-
-  for (i = 0; i < 8; i++) ts64(out, 8*i, hh[i], hl[i]);
-
-  return 0;
-}
-
-function add(p, q) {
-  var a = gf(), b = gf(), c = gf(),
-      d = gf(), e = gf(), f = gf(),
-      g = gf(), h = gf(), t = gf();
-
-  Z(a, p[1], p[0]);
-  Z(t, q[1], q[0]);
-  M(a, a, t);
-  A(b, p[0], p[1]);
-  A(t, q[0], q[1]);
-  M(b, b, t);
-  M(c, p[3], q[3]);
-  M(c, c, D2);
-  M(d, p[2], q[2]);
-  A(d, d, d);
-  Z(e, b, a);
-  Z(f, d, c);
-  A(g, d, c);
-  A(h, b, a);
-
-  M(p[0], e, f);
-  M(p[1], h, g);
-  M(p[2], g, f);
-  M(p[3], e, h);
-}
-
-function cswap(p, q, b) {
-  var i;
-  for (i = 0; i < 4; i++) {
-    sel25519(p[i], q[i], b);
-  }
-}
-
-function pack(r, p) {
-  var tx = gf(), ty = gf(), zi = gf();
-  inv25519(zi, p[2]);
-  M(tx, p[0], zi);
-  M(ty, p[1], zi);
-  pack25519(r, ty);
-  r[31] ^= par25519(tx) << 7;
-}
-
-function scalarmult(p, q, s) {
-  var b, i;
-  set25519(p[0], gf0);
-  set25519(p[1], gf1);
-  set25519(p[2], gf1);
-  set25519(p[3], gf0);
-  for (i = 255; i >= 0; --i) {
-    b = (s[(i/8)|0] >> (i&7)) & 1;
-    cswap(p, q, b);
-    add(q, p);
-    add(p, p);
-    cswap(p, q, b);
-  }
-}
-
-function scalarbase(p, s) {
-  var q = [gf(), gf(), gf(), gf()];
-  set25519(q[0], X);
-  set25519(q[1], Y);
-  set25519(q[2], gf1);
-  M(q[3], X, Y);
-  scalarmult(p, q, s);
-}
-
-function crypto_sign_keypair(pk, sk, seeded) {
-  var d = new Uint8Array(64);
-  var p = [gf(), gf(), gf(), gf()];
-  var i;
-
-  if (!seeded) randombytes(sk, 32);
-  crypto_hash(d, sk, 32);
-  d[0] &= 248;
-  d[31] &= 127;
-  d[31] |= 64;
-
-  scalarbase(p, d);
-  pack(pk, p);
-
-  for (i = 0; i < 32; i++) sk[i+32] = pk[i];
-  return 0;
-}
-
-var L = new Float64Array([0xed, 0xd3, 0xf5, 0x5c, 0x1a, 0x63, 0x12, 0x58, 0xd6, 0x9c, 0xf7, 0xa2, 0xde, 0xf9, 0xde, 0x14, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0x10]);
-
-function modL(r, x) {
-  var carry, i, j, k;
-  for (i = 63; i >= 32; --i) {
-    carry = 0;
-    for (j = i - 32, k = i - 12; j < k; ++j) {
-      x[j] += carry - 16 * x[i] * L[j - (i - 32)];
-      carry = (x[j] + 128) >> 8;
-      x[j] -= carry * 256;
-    }
-    x[j] += carry;
-    x[i] = 0;
-  }
-  carry = 0;
-  for (j = 0; j < 32; j++) {
-    x[j] += carry - (x[31] >> 4) * L[j];
-    carry = x[j] >> 8;
-    x[j] &= 255;
-  }
-  for (j = 0; j < 32; j++) x[j] -= carry * L[j];
-  for (i = 0; i < 32; i++) {
-    x[i+1] += x[i] >> 8;
-    r[i] = x[i] & 255;
-  }
-}
-
-function reduce(r) {
-  var x = new Float64Array(64), i;
-  for (i = 0; i < 64; i++) x[i] = r[i];
-  for (i = 0; i < 64; i++) r[i] = 0;
-  modL(r, x);
-}
-
-// Note: difference from C - smlen returned, not passed as argument.
-function crypto_sign(sm, m, n, sk) {
-  var d = new Uint8Array(64), h = new Uint8Array(64), r = new Uint8Array(64);
-  var i, j, x = new Float64Array(64);
-  var p = [gf(), gf(), gf(), gf()];
-
-  crypto_hash(d, sk, 32);
-  d[0] &= 248;
-  d[31] &= 127;
-  d[31] |= 64;
-
-  var smlen = n + 64;
-  for (i = 0; i < n; i++) sm[64 + i] = m[i];
-  for (i = 0; i < 32; i++) sm[32 + i] = d[32 + i];
-
-  crypto_hash(r, sm.subarray(32), n+32);
-  reduce(r);
-  scalarbase(p, r);
-  pack(sm, p);
-
-  for (i = 32; i < 64; i++) sm[i] = sk[i];
-  crypto_hash(h, sm, n + 64);
-  reduce(h);
-
-  for (i = 0; i < 64; i++) x[i] = 0;
-  for (i = 0; i < 32; i++) x[i] = r[i];
-  for (i = 0; i < 32; i++) {
-    for (j = 0; j < 32; j++) {
-      x[i+j] += h[i] * d[j];
-    }
-  }
-
-  modL(sm.subarray(32), x);
-  return smlen;
-}
-
-function unpackneg(r, p) {
-  var t = gf(), chk = gf(), num = gf(),
-      den = gf(), den2 = gf(), den4 = gf(),
-      den6 = gf();
-
-  set25519(r[2], gf1);
-  unpack25519(r[1], p);
-  S(num, r[1]);
-  M(den, num, D);
-  Z(num, num, r[2]);
-  A(den, r[2], den);
-
-  S(den2, den);
-  S(den4, den2);
-  M(den6, den4, den2);
-  M(t, den6, num);
-  M(t, t, den);
-
-  pow2523(t, t);
-  M(t, t, num);
-  M(t, t, den);
-  M(t, t, den);
-  M(r[0], t, den);
-
-  S(chk, r[0]);
-  M(chk, chk, den);
-  if (neq25519(chk, num)) M(r[0], r[0], I);
-
-  S(chk, r[0]);
-  M(chk, chk, den);
-  if (neq25519(chk, num)) return -1;
-
-  if (par25519(r[0]) === (p[31]>>7)) Z(r[0], gf0, r[0]);
-
-  M(r[3], r[0], r[1]);
-  return 0;
-}
-
-function crypto_sign_open(m, sm, n, pk) {
-  var i, mlen;
-  var t = new Uint8Array(32), h = new Uint8Array(64);
-  var p = [gf(), gf(), gf(), gf()],
-      q = [gf(), gf(), gf(), gf()];
-
-  mlen = -1;
-  if (n < 64) return -1;
-
-  if (unpackneg(q, pk)) return -1;
-
-  for (i = 0; i < n; i++) m[i] = sm[i];
-  for (i = 0; i < 32; i++) m[i+32] = pk[i];
-  crypto_hash(h, m, n);
-  reduce(h);
-  scalarmult(p, q, h);
-
-  scalarbase(q, sm.subarray(32));
-  add(p, q);
-  pack(t, p);
-
-  n -= 64;
-  if (crypto_verify_32(sm, 0, t, 0)) {
-    for (i = 0; i < n; i++) m[i] = 0;
-    return -1;
-  }
-
-  for (i = 0; i < n; i++) m[i] = sm[i + 64];
-  mlen = n;
-  return mlen;
-}
-
-var crypto_secretbox_KEYBYTES = 32,
-    crypto_secretbox_NONCEBYTES = 24,
-    crypto_secretbox_ZEROBYTES = 32,
-    crypto_secretbox_BOXZEROBYTES = 16,
-    crypto_scalarmult_BYTES = 32,
-    crypto_scalarmult_SCALARBYTES = 32,
-    crypto_box_PUBLICKEYBYTES = 32,
-    crypto_box_SECRETKEYBYTES = 32,
-    crypto_box_BEFORENMBYTES = 32,
-    crypto_box_NONCEBYTES = crypto_secretbox_NONCEBYTES,
-    crypto_box_ZEROBYTES = crypto_secretbox_ZEROBYTES,
-    crypto_box_BOXZEROBYTES = crypto_secretbox_BOXZEROBYTES,
-    crypto_sign_BYTES = 64,
-    crypto_sign_PUBLICKEYBYTES = 32,
-    crypto_sign_SECRETKEYBYTES = 64,
-    crypto_sign_SEEDBYTES = 32,
-    crypto_hash_BYTES = 64;
-
-nacl.lowlevel = {
-  crypto_core_hsalsa20: crypto_core_hsalsa20,
-  crypto_stream_xor: crypto_stream_xor,
-  crypto_stream: crypto_stream,
-  crypto_stream_salsa20_xor: crypto_stream_salsa20_xor,
-  crypto_stream_salsa20: crypto_stream_salsa20,
-  crypto_onetimeauth: crypto_onetimeauth,
-  crypto_onetimeauth_verify: crypto_onetimeauth_verify,
-  crypto_verify_16: crypto_verify_16,
-  crypto_verify_32: crypto_verify_32,
-  crypto_secretbox: crypto_secretbox,
-  crypto_secretbox_open: crypto_secretbox_open,
-  crypto_scalarmult: crypto_scalarmult,
-  crypto_scalarmult_base: crypto_scalarmult_base,
-  crypto_box_beforenm: crypto_box_beforenm,
-  crypto_box_afternm: crypto_box_afternm,
-  crypto_box: crypto_box,
-  crypto_box_open: crypto_box_open,
-  crypto_box_keypair: crypto_box_keypair,
-  crypto_hash: crypto_hash,
-  crypto_sign: crypto_sign,
-  crypto_sign_keypair: crypto_sign_keypair,
-  crypto_sign_open: crypto_sign_open,
-
-  crypto_secretbox_KEYBYTES: crypto_secretbox_KEYBYTES,
-  crypto_secretbox_NONCEBYTES: crypto_secretbox_NONCEBYTES,
-  crypto_secretbox_ZEROBYTES: crypto_secretbox_ZEROBYTES,
-  crypto_secretbox_BOXZEROBYTES: crypto_secretbox_BOXZEROBYTES,
-  crypto_scalarmult_BYTES: crypto_scalarmult_BYTES,
-  crypto_scalarmult_SCALARBYTES: crypto_scalarmult_SCALARBYTES,
-  crypto_box_PUBLICKEYBYTES: crypto_box_PUBLICKEYBYTES,
-  crypto_box_SECRETKEYBYTES: crypto_box_SECRETKEYBYTES,
-  crypto_box_BEFORENMBYTES: crypto_box_BEFORENMBYTES,
-  crypto_box_NONCEBYTES: crypto_box_NONCEBYTES,
-  crypto_box_ZEROBYTES: crypto_box_ZEROBYTES,
-  crypto_box_BOXZEROBYTES: crypto_box_BOXZEROBYTES,
-  crypto_sign_BYTES: crypto_sign_BYTES,
-  crypto_sign_PUBLICKEYBYTES: crypto_sign_PUBLICKEYBYTES,
-  crypto_sign_SECRETKEYBYTES: crypto_sign_SECRETKEYBYTES,
-  crypto_sign_SEEDBYTES: crypto_sign_SEEDBYTES,
-  crypto_hash_BYTES: crypto_hash_BYTES
-};
-
-/* High-level API */
-
-function checkLengths(k, n) {
-  if (k.length !== crypto_secretbox_KEYBYTES) throw new Error('bad key size');
-  if (n.length !== crypto_secretbox_NONCEBYTES) throw new Error('bad nonce size');
-}
-
-function checkBoxLengths(pk, sk) {
-  if (pk.length !== crypto_box_PUBLICKEYBYTES) throw new Error('bad public key size');
-  if (sk.length !== crypto_box_SECRETKEYBYTES) throw new Error('bad secret key size');
-}
-
-function checkArrayTypes() {
-  var t, i;
-  for (i = 0; i < arguments.length; i++) {
-     if ((t = Object.prototype.toString.call(arguments[i])) !== '[object Uint8Array]')
-       throw new TypeError('unexpected type ' + t + ', use Uint8Array');
-  }
-}
-
-function cleanup(arr) {
-  for (var i = 0; i < arr.length; i++) arr[i] = 0;
-}
-
-// TODO: Completely remove this in v0.15.
-if (!nacl.util) {
-  nacl.util = {};
-  nacl.util.decodeUTF8 = nacl.util.encodeUTF8 = nacl.util.encodeBase64 = nacl.util.decodeBase64 = function() {
-    throw new Error('nacl.util moved into separate package: https://github.com/dchest/tweetnacl-util-js');
-  };
-}
-
-nacl.randomBytes = function(n) {
-  var b = new Uint8Array(n);
-  randombytes(b, n);
-  return b;
-};
-
-nacl.secretbox = function(msg, nonce, key) {
-  checkArrayTypes(msg, nonce, key);
-  checkLengths(key, nonce);
-  var m = new Uint8Array(crypto_secretbox_ZEROBYTES + msg.length);
-  var c = new Uint8Array(m.length);
-  for (var i = 0; i < msg.length; i++) m[i+crypto_secretbox_ZEROBYTES] = msg[i];
-  crypto_secretbox(c, m, m.length, nonce, key);
-  return c.subarray(crypto_secretbox_BOXZEROBYTES);
-};
-
-nacl.secretbox.open = function(box, nonce, key) {
-  checkArrayTypes(box, nonce, key);
-  checkLengths(key, nonce);
-  var c = new Uint8Array(crypto_secretbox_BOXZEROBYTES + box.length);
-  var m = new Uint8Array(c.length);
-  for (var i = 0; i < box.length; i++) c[i+crypto_secretbox_BOXZEROBYTES] = box[i];
-  if (c.length < 32) return false;
-  if (crypto_secretbox_open(m, c, c.length, nonce, key) !== 0) return false;
-  return m.subarray(crypto_secretbox_ZEROBYTES);
-};
-
-nacl.secretbox.keyLength = crypto_secretbox_KEYBYTES;
-nacl.secretbox.nonceLength = crypto_secretbox_NONCEBYTES;
-nacl.secretbox.overheadLength = crypto_secretbox_BOXZEROBYTES;
-
-nacl.scalarMult = function(n, p) {
-  checkArrayTypes(n, p);
-  if (n.length !== crypto_scalarmult_SCALARBYTES) throw new Error('bad n size');
-  if (p.length !== crypto_scalarmult_BYTES) throw new Error('bad p size');
-  var q = new Uint8Array(crypto_scalarmult_BYTES);
-  crypto_scalarmult(q, n, p);
-  return q;
-};
-
-nacl.scalarMult.base = function(n) {
-  checkArrayTypes(n);
-  if (n.length !== crypto_scalarmult_SCALARBYTES) throw new Error('bad n size');
-  var q = new Uint8Array(crypto_scalarmult_BYTES);
-  crypto_scalarmult_base(q, n);
-  return q;
-};
-
-nacl.scalarMult.scalarLength = crypto_scalarmult_SCALARBYTES;
-nacl.scalarMult.groupElementLength = crypto_scalarmult_BYTES;
-
-nacl.box = function(msg, nonce, publicKey, secretKey) {
-  var k = nacl.box.before(publicKey, secretKey);
-  return nacl.secretbox(msg, nonce, k);
-};
-
-nacl.box.before = function(publicKey, secretKey) {
-  checkArrayTypes(publicKey, secretKey);
-  checkBoxLengths(publicKey, secretKey);
-  var k = new Uint8Array(crypto_box_BEFORENMBYTES);
-  crypto_box_beforenm(k, publicKey, secretKey);
-  return k;
-};
-
-nacl.box.after = nacl.secretbox;
-
-nacl.box.open = function(msg, nonce, publicKey, secretKey) {
-  var k = nacl.box.before(publicKey, secretKey);
-  return nacl.secretbox.open(msg, nonce, k);
-};
-
-nacl.box.open.after = nacl.secretbox.open;
-
-nacl.box.keyPair = function() {
-  var pk = new Uint8Array(crypto_box_PUBLICKEYBYTES);
-  var sk = new Uint8Array(crypto_box_SECRETKEYBYTES);
-  crypto_box_keypair(pk, sk);
-  return {publicKey: pk, secretKey: sk};
-};
-
-nacl.box.keyPair.fromSecretKey = function(secretKey) {
-  checkArrayTypes(secretKey);
-  if (secretKey.length !== crypto_box_SECRETKEYBYTES)
-    throw new Error('bad secret key size');
-  var pk = new Uint8Array(crypto_box_PUBLICKEYBYTES);
-  crypto_scalarmult_base(pk, secretKey);
-  return {publicKey: pk, secretKey: new Uint8Array(secretKey)};
-};
-
-nacl.box.publicKeyLength = crypto_box_PUBLICKEYBYTES;
-nacl.box.secretKeyLength = crypto_box_SECRETKEYBYTES;
-nacl.box.sharedKeyLength = crypto_box_BEFORENMBYTES;
-nacl.box.nonceLength = crypto_box_NONCEBYTES;
-nacl.box.overheadLength = nacl.secretbox.overheadLength;
-
-nacl.sign = function(msg, secretKey) {
-  checkArrayTypes(msg, secretKey);
-  if (secretKey.length !== crypto_sign_SECRETKEYBYTES)
-    throw new Error('bad secret key size');
-  var signedMsg = new Uint8Array(crypto_sign_BYTES+msg.length);
-  crypto_sign(signedMsg, msg, msg.length, secretKey);
-  return signedMsg;
-};
-
-nacl.sign.open = function(signedMsg, publicKey) {
-  if (arguments.length !== 2)
-    throw new Error('nacl.sign.open accepts 2 arguments; did you mean to use nacl.sign.detached.verify?');
-  checkArrayTypes(signedMsg, publicKey);
-  if (publicKey.length !== crypto_sign_PUBLICKEYBYTES)
-    throw new Error('bad public key size');
-  var tmp = new Uint8Array(signedMsg.length);
-  var mlen = crypto_sign_open(tmp, signedMsg, signedMsg.length, publicKey);
-  if (mlen < 0) return null;
-  var m = new Uint8Array(mlen);
-  for (var i = 0; i < m.length; i++) m[i] = tmp[i];
-  return m;
-};
-
-nacl.sign.detached = function(msg, secretKey) {
-  var signedMsg = nacl.sign(msg, secretKey);
-  var sig = new Uint8Array(crypto_sign_BYTES);
-  for (var i = 0; i < sig.length; i++) sig[i] = signedMsg[i];
-  return sig;
-};
-
-nacl.sign.detached.verify = function(msg, sig, publicKey) {
-  checkArrayTypes(msg, sig, publicKey);
-  if (sig.length !== crypto_sign_BYTES)
-    throw new Error('bad signature size');
-  if (publicKey.length !== crypto_sign_PUBLICKEYBYTES)
-    throw new Error('bad public key size');
-  var sm = new Uint8Array(crypto_sign_BYTES + msg.length);
-  var m = new Uint8Array(crypto_sign_BYTES + msg.length);
-  var i;
-  for (i = 0; i < crypto_sign_BYTES; i++) sm[i] = sig[i];
-  for (i = 0; i < msg.length; i++) sm[i+crypto_sign_BYTES] = msg[i];
-  return (crypto_sign_open(m, sm, sm.length, publicKey) >= 0);
-};
-
-nacl.sign.keyPair = function() {
-  var pk = new Uint8Array(crypto_sign_PUBLICKEYBYTES);
-  var sk = new Uint8Array(crypto_sign_SECRETKEYBYTES);
-  crypto_sign_keypair(pk, sk);
-  return {publicKey: pk, secretKey: sk};
-};
-
-nacl.sign.keyPair.fromSecretKey = function(secretKey) {
-  checkArrayTypes(secretKey);
-  if (secretKey.length !== crypto_sign_SECRETKEYBYTES)
-    throw new Error('bad secret key size');
-  var pk = new Uint8Array(crypto_sign_PUBLICKEYBYTES);
-  for (var i = 0; i < pk.length; i++) pk[i] = secretKey[32+i];
-  return {publicKey: pk, secretKey: new Uint8Array(secretKey)};
-};
-
-nacl.sign.keyPair.fromSeed = function(seed) {
-  checkArrayTypes(seed);
-  if (seed.length !== crypto_sign_SEEDBYTES)
-    throw new Error('bad seed size');
-  var pk = new Uint8Array(crypto_sign_PUBLICKEYBYTES);
-  var sk = new Uint8Array(crypto_sign_SECRETKEYBYTES);
-  for (var i = 0; i < 32; i++) sk[i] = seed[i];
-  crypto_sign_keypair(pk, sk, true);
-  return {publicKey: pk, secretKey: sk};
-};
-
-nacl.sign.publicKeyLength = crypto_sign_PUBLICKEYBYTES;
-nacl.sign.secretKeyLength = crypto_sign_SECRETKEYBYTES;
-nacl.sign.seedLength = crypto_sign_SEEDBYTES;
-nacl.sign.signatureLength = crypto_sign_BYTES;
-
-nacl.hash = function(msg) {
-  checkArrayTypes(msg);
-  var h = new Uint8Array(crypto_hash_BYTES);
-  crypto_hash(h, msg, msg.length);
-  return h;
-};
-
-nacl.hash.hashLength = crypto_hash_BYTES;
-
-nacl.verify = function(x, y) {
-  checkArrayTypes(x, y);
-  // Zero length arguments are considered not equal.
-  if (x.length === 0 || y.length === 0) return false;
-  if (x.length !== y.length) return false;
-  return (vn(x, 0, y, 0, x.length) === 0) ? true : false;
-};
-
-nacl.setPRNG = function(fn) {
-  randombytes = fn;
-};
-
-(function() {
-  // Initialize PRNG if environment provides CSPRNG.
-  // If not, methods calling randombytes will throw.
-  var crypto = typeof self !== 'undefined' ? (self.crypto || self.msCrypto) : null;
-  if (crypto && crypto.getRandomValues) {
-    // Browsers.
-    var QUOTA = 65536;
-    nacl.setPRNG(function(x, n) {
-      var i, v = new Uint8Array(n);
-      for (i = 0; i < n; i += QUOTA) {
-        crypto.getRandomValues(v.subarray(i, i + Math.min(n - i, QUOTA)));
-      }
-      for (i = 0; i < n; i++) x[i] = v[i];
-      cleanup(v);
-    });
-  } else if (true) {
-    // Node.js.
-    crypto = __webpack_require__(11);
-    if (crypto && crypto.randomBytes) {
-      nacl.setPRNG(function(x, n) {
-        var i, v = crypto.randomBytes(n);
-        for (i = 0; i < n; i++) x[i] = v[i];
-        cleanup(v);
-      });
-    }
-  }
-})();
-
-})(typeof module !== 'undefined' && module.exports ? module.exports : (self.nacl = self.nacl || {}));
-
-
-/***/ }),
-/* 77 */
-/***/ (function(module, exports) {
-
-module.exports = require("events");
-
-/***/ }),
-/* 78 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.hostedGit = exports.registries = undefined;
-exports.getExoticResolver = getExoticResolver;
-exports.hostedGitFragmentToGitUrl = hostedGitFragmentToGitUrl;
-
-var _baseResolver;
-
-function _load_baseResolver() {
-  return _baseResolver = _interopRequireDefault(__webpack_require__(123));
-}
-
-var _npmResolver;
-
-function _load_npmResolver() {
-  return _npmResolver = _interopRequireDefault(__webpack_require__(217));
-}
-
-var _yarnResolver;
-
-function _load_yarnResolver() {
-  return _yarnResolver = _interopRequireDefault(__webpack_require__(576));
-}
-
-var _gitResolver;
-
-function _load_gitResolver() {
-  return _gitResolver = _interopRequireDefault(__webpack_require__(124));
-}
-
-var _tarballResolver;
-
-function _load_tarballResolver() {
-  return _tarballResolver = _interopRequireDefault(__webpack_require__(574));
-}
-
-var _githubResolver;
-
-function _load_githubResolver() {
-  return _githubResolver = _interopRequireDefault(__webpack_require__(367));
-}
-
-var _fileResolver;
-
-function _load_fileResolver() {
-  return _fileResolver = _interopRequireDefault(__webpack_require__(215));
-}
-
-var _linkResolver;
-
-function _load_linkResolver() {
-  return _linkResolver = _interopRequireDefault(__webpack_require__(368));
-}
-
-var _gitlabResolver;
-
-function _load_gitlabResolver() {
-  return _gitlabResolver = _interopRequireDefault(__webpack_require__(572));
-}
-
-var _gistResolver;
-
-function _load_gistResolver() {
-  return _gistResolver = _interopRequireDefault(__webpack_require__(216));
-}
-
-var _bitbucketResolver;
-
-function _load_bitbucketResolver() {
-  return _bitbucketResolver = _interopRequireDefault(__webpack_require__(571));
-}
-
-var _hostedGitResolver;
-
-function _load_hostedGitResolver() {
-  return _hostedGitResolver = __webpack_require__(109);
-}
-
-var _registryResolver;
-
-function _load_registryResolver() {
-  return _registryResolver = _interopRequireDefault(__webpack_require__(573));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const registries = exports.registries = {
-  npm: (_npmResolver || _load_npmResolver()).default,
-  yarn: (_yarnResolver || _load_yarnResolver()).default
-};
-
-//
-
-const exotics = new Set([(_gitResolver || _load_gitResolver()).default, (_tarballResolver || _load_tarballResolver()).default, (_githubResolver || _load_githubResolver()).default, (_fileResolver || _load_fileResolver()).default, (_linkResolver || _load_linkResolver()).default, (_gitlabResolver || _load_gitlabResolver()).default, (_gistResolver || _load_gistResolver()).default, (_bitbucketResolver || _load_bitbucketResolver()).default]);
-
-function getExoticResolver(pattern) {
-  for (var _iterator = exotics, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const Resolver = _ref;
-
-    if (Resolver.isVersion(pattern)) {
-      return Resolver;
-    }
-  }
-  return null;
-}
-
-//
-
-const hostedGit = exports.hostedGit = {
-  github: (_githubResolver || _load_githubResolver()).default,
-  gitlab: (_gitlabResolver || _load_gitlabResolver()).default,
-  bitbucket: (_bitbucketResolver || _load_bitbucketResolver()).default
-};
-
-function hostedGitFragmentToGitUrl(fragment, reporter) {
-  for (const key in hostedGit) {
-    const Resolver = hostedGit[key];
-    if (Resolver.isVersion(fragment)) {
-      return Resolver.getGitHTTPUrl((0, (_hostedGitResolver || _load_hostedGitResolver()).explodeHostedGitFragment)(fragment, reporter));
-    }
-  }
-
-  return fragment;
-}
-
-//
-
-for (const key in registries) {
-  var _class, _temp;
-
-  const RegistryResolver = registries[key];
-
-  exotics.add((_temp = _class = class extends (_registryResolver || _load_registryResolver()).default {}, _class.protocol = key, _class.factory = RegistryResolver, _temp));
-}
-
-/***/ }),
-/* 79 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * Base prompt implementation
- * Should be extended by prompt types.
- */
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-var runAsync = __webpack_require__(181);
-var { filter, flatMap, share, take, takeUntil } = __webpack_require__(63);
-var Choices = __webpack_require__(686);
-var ScreenManager = __webpack_require__(697);
-
-class Prompt {
-  constructor(question, rl, answers) {
-    // Setup instance defaults property
-    _.assign(this, {
-      answers: answers,
-      status: 'pending'
-    });
-
-    // Set defaults prompt options
-    this.opt = _.defaults(_.clone(question), {
-      validate: () => true,
-      filter: val => val,
-      when: () => true,
-      suffix: '',
-      prefix: chalk.green('?')
-    });
-
-    // Make sure name is present
-    if (!this.opt.name) {
-      this.throwParamError('name');
-    }
-
-    // Set default message if no message defined
-    if (!this.opt.message) {
-      this.opt.message = this.opt.name + ':';
-    }
-
-    // Normalize choices
-    if (Array.isArray(this.opt.choices)) {
-      this.opt.choices = new Choices(this.opt.choices, answers);
-    }
-
-    this.rl = rl;
-    this.screen = new ScreenManager(this.rl);
-  }
-
-  /**
-   * Start the Inquiry session and manage output value filtering
-   * @return {Promise}
-   */
-
-  run() {
-    return new Promise(resolve => {
-      this._run(value => resolve(value));
-    });
-  }
-
-  // Default noop (this one should be overwritten in prompts)
-  _run(cb) {
-    cb();
-  }
-
-  /**
-   * Throw an error telling a required parameter is missing
-   * @param  {String} name Name of the missing param
-   * @return {Throw Error}
-   */
-
-  throwParamError(name) {
-    throw new Error('You must provide a `' + name + '` parameter');
-  }
-
-  /**
-   * Called when the UI closes. Override to do any specific cleanup necessary
-   */
-  close() {
-    this.screen.releaseCursor();
-  }
-
-  /**
-   * Run the provided validation method each time a submit event occur.
-   * @param  {Rx.Observable} submit - submit event flow
-   * @return {Object}        Object containing two observables: `success` and `error`
-   */
-  handleSubmitEvents(submit) {
-    var self = this;
-    var validate = runAsync(this.opt.validate);
-    var asyncFilter = runAsync(this.opt.filter);
-    var validation = submit.pipe(
-      flatMap(value =>
-        asyncFilter(value, self.answers).then(
-          filteredValue =>
-            validate(filteredValue, self.answers).then(
-              isValid => ({ isValid: isValid, value: filteredValue }),
-              err => ({ isValid: err })
-            ),
-          err => ({ isValid: err })
-        )
-      ),
-      share()
-    );
-
-    var success = validation.pipe(
-      filter(state => state.isValid === true),
-      take(1)
-    );
-    var error = validation.pipe(
-      filter(state => state.isValid !== true),
-      takeUntil(success)
-    );
-
-    return {
-      success: success,
-      error: error
-    };
-  }
-
-  /**
-   * Generate the prompt question string
-   * @return {String} prompt question string
-   */
-
-  getQuestion() {
-    var message =
-      this.opt.prefix +
-      ' ' +
-      chalk.bold(this.opt.message) +
-      this.opt.suffix +
-      chalk.reset(' ');
-
-    // Append the default if available, and if question isn't answered
-    if (this.opt.default != null && this.status !== 'answered') {
-      // If default password is supplied, hide it
-      if (this.opt.type === 'password') {
-        message += chalk.italic.dim('[hidden] ');
-      } else {
-        message += chalk.dim('(' + this.opt.default + ') ');
-      }
-    }
-
-    return message;
-  }
-}
-
-module.exports = Prompt;
-
-
-/***/ }),
-/* 80 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var { fromEvent } = __webpack_require__(182);
-var { filter, map, share } = __webpack_require__(63);
-
-function normalizeKeypressEvents(value, key) {
-  return { value: value, key: key || {} };
-}
-
-module.exports = function(rl) {
-  var keypress = fromEvent(rl.input, 'keypress', normalizeKeypressEvents)
-    // Ignore `enter` key. On the readline, we only care about the `line` event.
-    .pipe(filter(({ key }) => key.name !== 'enter' && key.name !== 'return'));
-
-  return {
-    line: fromEvent(rl, 'line'),
-    keypress: keypress,
-
-    normalizedUpKey: keypress.pipe(
-      filter(
-        ({ key }) =>
-          key.name === 'up' || key.name === 'k' || (key.name === 'p' && key.ctrl)
-      ),
-      share()
-    ),
-
-    normalizedDownKey: keypress.pipe(
-      filter(
-        ({ key }) =>
-          key.name === 'down' || key.name === 'j' || (key.name === 'n' && key.ctrl)
-      ),
-      share()
-    ),
-
-    numberKey: keypress.pipe(
-      filter(e => e.value && '123456789'.indexOf(e.value) >= 0),
-      map(e => Number(e.value)),
-      share()
-    ),
-
-    spaceKey: keypress.pipe(
-      filter(({ key }) => key && key.name === 'space'),
-      share()
-    ),
-    aKey: keypress.pipe(
-      filter(({ key }) => key && key.name === 'a'),
-      share()
-    ),
-    iKey: keypress.pipe(
-      filter(({ key }) => key && key.name === 'i'),
-      share()
-    )
-  };
-};
-
-
-/***/ }),
-/* 81 */
-/***/ (function(module, exports, __webpack_require__) {
-
-(function(){
-
-    // Copyright (c) 2005  Tom Wu
-    // All Rights Reserved.
-    // See "LICENSE" for details.
-
-    // Basic JavaScript BN library - subset useful for RSA encryption.
-
-    // Bits per digit
-    var dbits;
-
-    // JavaScript engine analysis
-    var canary = 0xdeadbeefcafe;
-    var j_lm = ((canary&0xffffff)==0xefcafe);
-
-    // (public) Constructor
-    function BigInteger(a,b,c) {
-      if(a != null)
-        if("number" == typeof a) this.fromNumber(a,b,c);
-        else if(b == null && "string" != typeof a) this.fromString(a,256);
-        else this.fromString(a,b);
-    }
-
-    // return new, unset BigInteger
-    function nbi() { return new BigInteger(null); }
-
-    // am: Compute w_j += (x*this_i), propagate carries,
-    // c is initial carry, returns final carry.
-    // c < 3*dvalue, x < 2*dvalue, this_i < dvalue
-    // We need to select the fastest one that works in this environment.
-
-    // am1: use a single mult and divide to get the high bits,
-    // max digit bits should be 26 because
-    // max internal value = 2*dvalue^2-2*dvalue (< 2^53)
-    function am1(i,x,w,j,c,n) {
-      while(--n >= 0) {
-        var v = x*this[i++]+w[j]+c;
-        c = Math.floor(v/0x4000000);
-        w[j++] = v&0x3ffffff;
-      }
-      return c;
-    }
-    // am2 avoids a big mult-and-extract completely.
-    // Max digit bits should be <= 30 because we do bitwise ops
-    // on values up to 2*hdvalue^2-hdvalue-1 (< 2^31)
-    function am2(i,x,w,j,c,n) {
-      var xl = x&0x7fff, xh = x>>15;
-      while(--n >= 0) {
-        var l = this[i]&0x7fff;
-        var h = this[i++]>>15;
-        var m = xh*l+h*xl;
-        l = xl*l+((m&0x7fff)<<15)+w[j]+(c&0x3fffffff);
-        c = (l>>>30)+(m>>>15)+xh*h+(c>>>30);
-        w[j++] = l&0x3fffffff;
-      }
-      return c;
-    }
-    // Alternately, set max digit bits to 28 since some
-    // browsers slow down when dealing with 32-bit numbers.
-    function am3(i,x,w,j,c,n) {
-      var xl = x&0x3fff, xh = x>>14;
-      while(--n >= 0) {
-        var l = this[i]&0x3fff;
-        var h = this[i++]>>14;
-        var m = xh*l+h*xl;
-        l = xl*l+((m&0x3fff)<<14)+w[j]+c;
-        c = (l>>28)+(m>>14)+xh*h;
-        w[j++] = l&0xfffffff;
-      }
-      return c;
-    }
-    var inBrowser = typeof navigator !== "undefined";
-    if(inBrowser && j_lm && (navigator.appName == "Microsoft Internet Explorer")) {
-      BigInteger.prototype.am = am2;
-      dbits = 30;
-    }
-    else if(inBrowser && j_lm && (navigator.appName != "Netscape")) {
-      BigInteger.prototype.am = am1;
-      dbits = 26;
-    }
-    else { // Mozilla/Netscape seems to prefer am3
-      BigInteger.prototype.am = am3;
-      dbits = 28;
-    }
-
-    BigInteger.prototype.DB = dbits;
-    BigInteger.prototype.DM = ((1<<dbits)-1);
-    BigInteger.prototype.DV = (1<<dbits);
-
-    var BI_FP = 52;
-    BigInteger.prototype.FV = Math.pow(2,BI_FP);
-    BigInteger.prototype.F1 = BI_FP-dbits;
-    BigInteger.prototype.F2 = 2*dbits-BI_FP;
-
-    // Digit conversions
-    var BI_RM = "0123456789abcdefghijklmnopqrstuvwxyz";
-    var BI_RC = new Array();
-    var rr,vv;
-    rr = "0".charCodeAt(0);
-    for(vv = 0; vv <= 9; ++vv) BI_RC[rr++] = vv;
-    rr = "a".charCodeAt(0);
-    for(vv = 10; vv < 36; ++vv) BI_RC[rr++] = vv;
-    rr = "A".charCodeAt(0);
-    for(vv = 10; vv < 36; ++vv) BI_RC[rr++] = vv;
-
-    function int2char(n) { return BI_RM.charAt(n); }
-    function intAt(s,i) {
-      var c = BI_RC[s.charCodeAt(i)];
-      return (c==null)?-1:c;
-    }
-
-    // (protected) copy this to r
-    function bnpCopyTo(r) {
-      for(var i = this.t-1; i >= 0; --i) r[i] = this[i];
-      r.t = this.t;
-      r.s = this.s;
-    }
-
-    // (protected) set from integer value x, -DV <= x < DV
-    function bnpFromInt(x) {
-      this.t = 1;
-      this.s = (x<0)?-1:0;
-      if(x > 0) this[0] = x;
-      else if(x < -1) this[0] = x+this.DV;
-      else this.t = 0;
-    }
-
-    // return bigint initialized to value
-    function nbv(i) { var r = nbi(); r.fromInt(i); return r; }
-
-    // (protected) set from string and radix
-    function bnpFromString(s,b) {
-      var k;
-      if(b == 16) k = 4;
-      else if(b == 8) k = 3;
-      else if(b == 256) k = 8; // byte array
-      else if(b == 2) k = 1;
-      else if(b == 32) k = 5;
-      else if(b == 4) k = 2;
-      else { this.fromRadix(s,b); return; }
-      this.t = 0;
-      this.s = 0;
-      var i = s.length, mi = false, sh = 0;
-      while(--i >= 0) {
-        var x = (k==8)?s[i]&0xff:intAt(s,i);
-        if(x < 0) {
-          if(s.charAt(i) == "-") mi = true;
-          continue;
-        }
-        mi = false;
-        if(sh == 0)
-          this[this.t++] = x;
-        else if(sh+k > this.DB) {
-          this[this.t-1] |= (x&((1<<(this.DB-sh))-1))<<sh;
-          this[this.t++] = (x>>(this.DB-sh));
-        }
-        else
-          this[this.t-1] |= x<<sh;
-        sh += k;
-        if(sh >= this.DB) sh -= this.DB;
-      }
-      if(k == 8 && (s[0]&0x80) != 0) {
-        this.s = -1;
-        if(sh > 0) this[this.t-1] |= ((1<<(this.DB-sh))-1)<<sh;
-      }
-      this.clamp();
-      if(mi) BigInteger.ZERO.subTo(this,this);
-    }
-
-    // (protected) clamp off excess high words
-    function bnpClamp() {
-      var c = this.s&this.DM;
-      while(this.t > 0 && this[this.t-1] == c) --this.t;
-    }
-
-    // (public) return string representation in given radix
-    function bnToString(b) {
-      if(this.s < 0) return "-"+this.negate().toString(b);
-      var k;
-      if(b == 16) k = 4;
-      else if(b == 8) k = 3;
-      else if(b == 2) k = 1;
-      else if(b == 32) k = 5;
-      else if(b == 4) k = 2;
-      else return this.toRadix(b);
-      var km = (1<<k)-1, d, m = false, r = "", i = this.t;
-      var p = this.DB-(i*this.DB)%k;
-      if(i-- > 0) {
-        if(p < this.DB && (d = this[i]>>p) > 0) { m = true; r = int2char(d); }
-        while(i >= 0) {
-          if(p < k) {
-            d = (this[i]&((1<<p)-1))<<(k-p);
-            d |= this[--i]>>(p+=this.DB-k);
-          }
-          else {
-            d = (this[i]>>(p-=k))&km;
-            if(p <= 0) { p += this.DB; --i; }
-          }
-          if(d > 0) m = true;
-          if(m) r += int2char(d);
-        }
-      }
-      return m?r:"0";
-    }
-
-    // (public) -this
-    function bnNegate() { var r = nbi(); BigInteger.ZERO.subTo(this,r); return r; }
-
-    // (public) |this|
-    function bnAbs() { return (this.s<0)?this.negate():this; }
-
-    // (public) return + if this > a, - if this < a, 0 if equal
-    function bnCompareTo(a) {
-      var r = this.s-a.s;
-      if(r != 0) return r;
-      var i = this.t;
-      r = i-a.t;
-      if(r != 0) return (this.s<0)?-r:r;
-      while(--i >= 0) if((r=this[i]-a[i]) != 0) return r;
-      return 0;
-    }
-
-    // returns bit length of the integer x
-    function nbits(x) {
-      var r = 1, t;
-      if((t=x>>>16) != 0) { x = t; r += 16; }
-      if((t=x>>8) != 0) { x = t; r += 8; }
-      if((t=x>>4) != 0) { x = t; r += 4; }
-      if((t=x>>2) != 0) { x = t; r += 2; }
-      if((t=x>>1) != 0) { x = t; r += 1; }
-      return r;
-    }
-
-    // (public) return the number of bits in "this"
-    function bnBitLength() {
-      if(this.t <= 0) return 0;
-      return this.DB*(this.t-1)+nbits(this[this.t-1]^(this.s&this.DM));
-    }
-
-    // (protected) r = this << n*DB
-    function bnpDLShiftTo(n,r) {
-      var i;
-      for(i = this.t-1; i >= 0; --i) r[i+n] = this[i];
-      for(i = n-1; i >= 0; --i) r[i] = 0;
-      r.t = this.t+n;
-      r.s = this.s;
-    }
-
-    // (protected) r = this >> n*DB
-    function bnpDRShiftTo(n,r) {
-      for(var i = n; i < this.t; ++i) r[i-n] = this[i];
-      r.t = Math.max(this.t-n,0);
-      r.s = this.s;
-    }
-
-    // (protected) r = this << n
-    function bnpLShiftTo(n,r) {
-      var bs = n%this.DB;
-      var cbs = this.DB-bs;
-      var bm = (1<<cbs)-1;
-      var ds = Math.floor(n/this.DB), c = (this.s<<bs)&this.DM, i;
-      for(i = this.t-1; i >= 0; --i) {
-        r[i+ds+1] = (this[i]>>cbs)|c;
-        c = (this[i]&bm)<<bs;
-      }
-      for(i = ds-1; i >= 0; --i) r[i] = 0;
-      r[ds] = c;
-      r.t = this.t+ds+1;
-      r.s = this.s;
-      r.clamp();
-    }
-
-    // (protected) r = this >> n
-    function bnpRShiftTo(n,r) {
-      r.s = this.s;
-      var ds = Math.floor(n/this.DB);
-      if(ds >= this.t) { r.t = 0; return; }
-      var bs = n%this.DB;
-      var cbs = this.DB-bs;
-      var bm = (1<<bs)-1;
-      r[0] = this[ds]>>bs;
-      for(var i = ds+1; i < this.t; ++i) {
-        r[i-ds-1] |= (this[i]&bm)<<cbs;
-        r[i-ds] = this[i]>>bs;
-      }
-      if(bs > 0) r[this.t-ds-1] |= (this.s&bm)<<cbs;
-      r.t = this.t-ds;
-      r.clamp();
-    }
-
-    // (protected) r = this - a
-    function bnpSubTo(a,r) {
-      var i = 0, c = 0, m = Math.min(a.t,this.t);
-      while(i < m) {
-        c += this[i]-a[i];
-        r[i++] = c&this.DM;
-        c >>= this.DB;
-      }
-      if(a.t < this.t) {
-        c -= a.s;
-        while(i < this.t) {
-          c += this[i];
-          r[i++] = c&this.DM;
-          c >>= this.DB;
-        }
-        c += this.s;
-      }
-      else {
-        c += this.s;
-        while(i < a.t) {
-          c -= a[i];
-          r[i++] = c&this.DM;
-          c >>= this.DB;
-        }
-        c -= a.s;
-      }
-      r.s = (c<0)?-1:0;
-      if(c < -1) r[i++] = this.DV+c;
-      else if(c > 0) r[i++] = c;
-      r.t = i;
-      r.clamp();
-    }
-
-    // (protected) r = this * a, r != this,a (HAC 14.12)
-    // "this" should be the larger one if appropriate.
-    function bnpMultiplyTo(a,r) {
-      var x = this.abs(), y = a.abs();
-      var i = x.t;
-      r.t = i+y.t;
-      while(--i >= 0) r[i] = 0;
-      for(i = 0; i < y.t; ++i) r[i+x.t] = x.am(0,y[i],r,i,0,x.t);
-      r.s = 0;
-      r.clamp();
-      if(this.s != a.s) BigInteger.ZERO.subTo(r,r);
-    }
-
-    // (protected) r = this^2, r != this (HAC 14.16)
-    function bnpSquareTo(r) {
-      var x = this.abs();
-      var i = r.t = 2*x.t;
-      while(--i >= 0) r[i] = 0;
-      for(i = 0; i < x.t-1; ++i) {
-        var c = x.am(i,x[i],r,2*i,0,1);
-        if((r[i+x.t]+=x.am(i+1,2*x[i],r,2*i+1,c,x.t-i-1)) >= x.DV) {
-          r[i+x.t] -= x.DV;
-          r[i+x.t+1] = 1;
-        }
-      }
-      if(r.t > 0) r[r.t-1] += x.am(i,x[i],r,2*i,0,1);
-      r.s = 0;
-      r.clamp();
-    }
-
-    // (protected) divide this by m, quotient and remainder to q, r (HAC 14.20)
-    // r != q, this != m.  q or r may be null.
-    function bnpDivRemTo(m,q,r) {
-      var pm = m.abs();
-      if(pm.t <= 0) return;
-      var pt = this.abs();
-      if(pt.t < pm.t) {
-        if(q != null) q.fromInt(0);
-        if(r != null) this.copyTo(r);
-        return;
-      }
-      if(r == null) r = nbi();
-      var y = nbi(), ts = this.s, ms = m.s;
-      var nsh = this.DB-nbits(pm[pm.t-1]);   // normalize modulus
-      if(nsh > 0) { pm.lShiftTo(nsh,y); pt.lShiftTo(nsh,r); }
-      else { pm.copyTo(y); pt.copyTo(r); }
-      var ys = y.t;
-      var y0 = y[ys-1];
-      if(y0 == 0) return;
-      var yt = y0*(1<<this.F1)+((ys>1)?y[ys-2]>>this.F2:0);
-      var d1 = this.FV/yt, d2 = (1<<this.F1)/yt, e = 1<<this.F2;
-      var i = r.t, j = i-ys, t = (q==null)?nbi():q;
-      y.dlShiftTo(j,t);
-      if(r.compareTo(t) >= 0) {
-        r[r.t++] = 1;
-        r.subTo(t,r);
-      }
-      BigInteger.ONE.dlShiftTo(ys,t);
-      t.subTo(y,y);  // "negative" y so we can replace sub with am later
-      while(y.t < ys) y[y.t++] = 0;
-      while(--j >= 0) {
-        // Estimate quotient digit
-        var qd = (r[--i]==y0)?this.DM:Math.floor(r[i]*d1+(r[i-1]+e)*d2);
-        if((r[i]+=y.am(0,qd,r,j,0,ys)) < qd) {   // Try it out
-          y.dlShiftTo(j,t);
-          r.subTo(t,r);
-          while(r[i] < --qd) r.subTo(t,r);
-        }
-      }
-      if(q != null) {
-        r.drShiftTo(ys,q);
-        if(ts != ms) BigInteger.ZERO.subTo(q,q);
-      }
-      r.t = ys;
-      r.clamp();
-      if(nsh > 0) r.rShiftTo(nsh,r); // Denormalize remainder
-      if(ts < 0) BigInteger.ZERO.subTo(r,r);
-    }
-
-    // (public) this mod a
-    function bnMod(a) {
-      var r = nbi();
-      this.abs().divRemTo(a,null,r);
-      if(this.s < 0 && r.compareTo(BigInteger.ZERO) > 0) a.subTo(r,r);
-      return r;
-    }
-
-    // Modular reduction using "classic" algorithm
-    function Classic(m) { this.m = m; }
-    function cConvert(x) {
-      if(x.s < 0 || x.compareTo(this.m) >= 0) return x.mod(this.m);
-      else return x;
-    }
-    function cRevert(x) { return x; }
-    function cReduce(x) { x.divRemTo(this.m,null,x); }
-    function cMulTo(x,y,r) { x.multiplyTo(y,r); this.reduce(r); }
-    function cSqrTo(x,r) { x.squareTo(r); this.reduce(r); }
-
-    Classic.prototype.convert = cConvert;
-    Classic.prototype.revert = cRevert;
-    Classic.prototype.reduce = cReduce;
-    Classic.prototype.mulTo = cMulTo;
-    Classic.prototype.sqrTo = cSqrTo;
-
-    // (protected) return "-1/this % 2^DB"; useful for Mont. reduction
-    // justification:
-    //         xy == 1 (mod m)
-    //         xy =  1+km
-    //   xy(2-xy) = (1+km)(1-km)
-    // x[y(2-xy)] = 1-k^2m^2
-    // x[y(2-xy)] == 1 (mod m^2)
-    // if y is 1/x mod m, then y(2-xy) is 1/x mod m^2
-    // should reduce x and y(2-xy) by m^2 at each step to keep size bounded.
-    // JS multiply "overflows" differently from C/C++, so care is needed here.
-    function bnpInvDigit() {
-      if(this.t < 1) return 0;
-      var x = this[0];
-      if((x&1) == 0) return 0;
-      var y = x&3;       // y == 1/x mod 2^2
-      y = (y*(2-(x&0xf)*y))&0xf; // y == 1/x mod 2^4
-      y = (y*(2-(x&0xff)*y))&0xff;   // y == 1/x mod 2^8
-      y = (y*(2-(((x&0xffff)*y)&0xffff)))&0xffff;    // y == 1/x mod 2^16
-      // last step - calculate inverse mod DV directly;
-      // assumes 16 < DB <= 32 and assumes ability to handle 48-bit ints
-      y = (y*(2-x*y%this.DV))%this.DV;       // y == 1/x mod 2^dbits
-      // we really want the negative inverse, and -DV < y < DV
-      return (y>0)?this.DV-y:-y;
-    }
-
-    // Montgomery reduction
-    function Montgomery(m) {
-      this.m = m;
-      this.mp = m.invDigit();
-      this.mpl = this.mp&0x7fff;
-      this.mph = this.mp>>15;
-      this.um = (1<<(m.DB-15))-1;
-      this.mt2 = 2*m.t;
-    }
-
-    // xR mod m
-    function montConvert(x) {
-      var r = nbi();
-      x.abs().dlShiftTo(this.m.t,r);
-      r.divRemTo(this.m,null,r);
-      if(x.s < 0 && r.compareTo(BigInteger.ZERO) > 0) this.m.subTo(r,r);
-      return r;
-    }
-
-    // x/R mod m
-    function montRevert(x) {
-      var r = nbi();
-      x.copyTo(r);
-      this.reduce(r);
-      return r;
-    }
-
-    // x = x/R mod m (HAC 14.32)
-    function montReduce(x) {
-      while(x.t <= this.mt2) // pad x so am has enough room later
-        x[x.t++] = 0;
-      for(var i = 0; i < this.m.t; ++i) {
-        // faster way of calculating u0 = x[i]*mp mod DV
-        var j = x[i]&0x7fff;
-        var u0 = (j*this.mpl+(((j*this.mph+(x[i]>>15)*this.mpl)&this.um)<<15))&x.DM;
-        // use am to combine the multiply-shift-add into one call
-        j = i+this.m.t;
-        x[j] += this.m.am(0,u0,x,i,0,this.m.t);
-        // propagate carry
-        while(x[j] >= x.DV) { x[j] -= x.DV; x[++j]++; }
-      }
-      x.clamp();
-      x.drShiftTo(this.m.t,x);
-      if(x.compareTo(this.m) >= 0) x.subTo(this.m,x);
-    }
-
-    // r = "x^2/R mod m"; x != r
-    function montSqrTo(x,r) { x.squareTo(r); this.reduce(r); }
-
-    // r = "xy/R mod m"; x,y != r
-    function montMulTo(x,y,r) { x.multiplyTo(y,r); this.reduce(r); }
-
-    Montgomery.prototype.convert = montConvert;
-    Montgomery.prototype.revert = montRevert;
-    Montgomery.prototype.reduce = montReduce;
-    Montgomery.prototype.mulTo = montMulTo;
-    Montgomery.prototype.sqrTo = montSqrTo;
-
-    // (protected) true iff this is even
-    function bnpIsEven() { return ((this.t>0)?(this[0]&1):this.s) == 0; }
-
-    // (protected) this^e, e < 2^32, doing sqr and mul with "r" (HAC 14.79)
-    function bnpExp(e,z) {
-      if(e > 0xffffffff || e < 1) return BigInteger.ONE;
-      var r = nbi(), r2 = nbi(), g = z.convert(this), i = nbits(e)-1;
-      g.copyTo(r);
-      while(--i >= 0) {
-        z.sqrTo(r,r2);
-        if((e&(1<<i)) > 0) z.mulTo(r2,g,r);
-        else { var t = r; r = r2; r2 = t; }
-      }
-      return z.revert(r);
-    }
-
-    // (public) this^e % m, 0 <= e < 2^32
-    function bnModPowInt(e,m) {
-      var z;
-      if(e < 256 || m.isEven()) z = new Classic(m); else z = new Montgomery(m);
-      return this.exp(e,z);
-    }
-
-    // protected
-    BigInteger.prototype.copyTo = bnpCopyTo;
-    BigInteger.prototype.fromInt = bnpFromInt;
-    BigInteger.prototype.fromString = bnpFromString;
-    BigInteger.prototype.clamp = bnpClamp;
-    BigInteger.prototype.dlShiftTo = bnpDLShiftTo;
-    BigInteger.prototype.drShiftTo = bnpDRShiftTo;
-    BigInteger.prototype.lShiftTo = bnpLShiftTo;
-    BigInteger.prototype.rShiftTo = bnpRShiftTo;
-    BigInteger.prototype.subTo = bnpSubTo;
-    BigInteger.prototype.multiplyTo = bnpMultiplyTo;
-    BigInteger.prototype.squareTo = bnpSquareTo;
-    BigInteger.prototype.divRemTo = bnpDivRemTo;
-    BigInteger.prototype.invDigit = bnpInvDigit;
-    BigInteger.prototype.isEven = bnpIsEven;
-    BigInteger.prototype.exp = bnpExp;
-
-    // public
-    BigInteger.prototype.toString = bnToString;
-    BigInteger.prototype.negate = bnNegate;
-    BigInteger.prototype.abs = bnAbs;
-    BigInteger.prototype.compareTo = bnCompareTo;
-    BigInteger.prototype.bitLength = bnBitLength;
-    BigInteger.prototype.mod = bnMod;
-    BigInteger.prototype.modPowInt = bnModPowInt;
-
-    // "constants"
-    BigInteger.ZERO = nbv(0);
-    BigInteger.ONE = nbv(1);
-
-    // Copyright (c) 2005-2009  Tom Wu
-    // All Rights Reserved.
-    // See "LICENSE" for details.
-
-    // Extended JavaScript BN functions, required for RSA private ops.
-
-    // Version 1.1: new BigInteger("0", 10) returns "proper" zero
-    // Version 1.2: square() API, isProbablePrime fix
-
-    // (public)
-    function bnClone() { var r = nbi(); this.copyTo(r); return r; }
-
-    // (public) return value as integer
-    function bnIntValue() {
-      if(this.s < 0) {
-        if(this.t == 1) return this[0]-this.DV;
-        else if(this.t == 0) return -1;
-      }
-      else if(this.t == 1) return this[0];
-      else if(this.t == 0) return 0;
-      // assumes 16 < DB < 32
-      return ((this[1]&((1<<(32-this.DB))-1))<<this.DB)|this[0];
-    }
-
-    // (public) return value as byte
-    function bnByteValue() { return (this.t==0)?this.s:(this[0]<<24)>>24; }
-
-    // (public) return value as short (assumes DB>=16)
-    function bnShortValue() { return (this.t==0)?this.s:(this[0]<<16)>>16; }
-
-    // (protected) return x s.t. r^x < DV
-    function bnpChunkSize(r) { return Math.floor(Math.LN2*this.DB/Math.log(r)); }
-
-    // (public) 0 if this == 0, 1 if this > 0
-    function bnSigNum() {
-      if(this.s < 0) return -1;
-      else if(this.t <= 0 || (this.t == 1 && this[0] <= 0)) return 0;
-      else return 1;
-    }
-
-    // (protected) convert to radix string
-    function bnpToRadix(b) {
-      if(b == null) b = 10;
-      if(this.signum() == 0 || b < 2 || b > 36) return "0";
-      var cs = this.chunkSize(b);
-      var a = Math.pow(b,cs);
-      var d = nbv(a), y = nbi(), z = nbi(), r = "";
-      this.divRemTo(d,y,z);
-      while(y.signum() > 0) {
-        r = (a+z.intValue()).toString(b).substr(1) + r;
-        y.divRemTo(d,y,z);
-      }
-      return z.intValue().toString(b) + r;
-    }
-
-    // (protected) convert from radix string
-    function bnpFromRadix(s,b) {
-      this.fromInt(0);
-      if(b == null) b = 10;
-      var cs = this.chunkSize(b);
-      var d = Math.pow(b,cs), mi = false, j = 0, w = 0;
-      for(var i = 0; i < s.length; ++i) {
-        var x = intAt(s,i);
-        if(x < 0) {
-          if(s.charAt(i) == "-" && this.signum() == 0) mi = true;
-          continue;
-        }
-        w = b*w+x;
-        if(++j >= cs) {
-          this.dMultiply(d);
-          this.dAddOffset(w,0);
-          j = 0;
-          w = 0;
-        }
-      }
-      if(j > 0) {
-        this.dMultiply(Math.pow(b,j));
-        this.dAddOffset(w,0);
-      }
-      if(mi) BigInteger.ZERO.subTo(this,this);
-    }
-
-    // (protected) alternate constructor
-    function bnpFromNumber(a,b,c) {
-      if("number" == typeof b) {
-        // new BigInteger(int,int,RNG)
-        if(a < 2) this.fromInt(1);
-        else {
-          this.fromNumber(a,c);
-          if(!this.testBit(a-1))	// force MSB set
-            this.bitwiseTo(BigInteger.ONE.shiftLeft(a-1),op_or,this);
-          if(this.isEven()) this.dAddOffset(1,0); // force odd
-          while(!this.isProbablePrime(b)) {
-            this.dAddOffset(2,0);
-            if(this.bitLength() > a) this.subTo(BigInteger.ONE.shiftLeft(a-1),this);
-          }
-        }
-      }
-      else {
-        // new BigInteger(int,RNG)
-        var x = new Array(), t = a&7;
-        x.length = (a>>3)+1;
-        b.nextBytes(x);
-        if(t > 0) x[0] &= ((1<<t)-1); else x[0] = 0;
-        this.fromString(x,256);
-      }
-    }
-
-    // (public) convert to bigendian byte array
-    function bnToByteArray() {
-      var i = this.t, r = new Array();
-      r[0] = this.s;
-      var p = this.DB-(i*this.DB)%8, d, k = 0;
-      if(i-- > 0) {
-        if(p < this.DB && (d = this[i]>>p) != (this.s&this.DM)>>p)
-          r[k++] = d|(this.s<<(this.DB-p));
-        while(i >= 0) {
-          if(p < 8) {
-            d = (this[i]&((1<<p)-1))<<(8-p);
-            d |= this[--i]>>(p+=this.DB-8);
-          }
-          else {
-            d = (this[i]>>(p-=8))&0xff;
-            if(p <= 0) { p += this.DB; --i; }
-          }
-          if((d&0x80) != 0) d |= -256;
-          if(k == 0 && (this.s&0x80) != (d&0x80)) ++k;
-          if(k > 0 || d != this.s) r[k++] = d;
-        }
-      }
-      return r;
-    }
-
-    function bnEquals(a) { return(this.compareTo(a)==0); }
-    function bnMin(a) { return(this.compareTo(a)<0)?this:a; }
-    function bnMax(a) { return(this.compareTo(a)>0)?this:a; }
-
-    // (protected) r = this op a (bitwise)
-    function bnpBitwiseTo(a,op,r) {
-      var i, f, m = Math.min(a.t,this.t);
-      for(i = 0; i < m; ++i) r[i] = op(this[i],a[i]);
-      if(a.t < this.t) {
-        f = a.s&this.DM;
-        for(i = m; i < this.t; ++i) r[i] = op(this[i],f);
-        r.t = this.t;
-      }
-      else {
-        f = this.s&this.DM;
-        for(i = m; i < a.t; ++i) r[i] = op(f,a[i]);
-        r.t = a.t;
-      }
-      r.s = op(this.s,a.s);
-      r.clamp();
-    }
-
-    // (public) this & a
-    function op_and(x,y) { return x&y; }
-    function bnAnd(a) { var r = nbi(); this.bitwiseTo(a,op_and,r); return r; }
-
-    // (public) this | a
-    function op_or(x,y) { return x|y; }
-    function bnOr(a) { var r = nbi(); this.bitwiseTo(a,op_or,r); return r; }
-
-    // (public) this ^ a
-    function op_xor(x,y) { return x^y; }
-    function bnXor(a) { var r = nbi(); this.bitwiseTo(a,op_xor,r); return r; }
-
-    // (public) this & ~a
-    function op_andnot(x,y) { return x&~y; }
-    function bnAndNot(a) { var r = nbi(); this.bitwiseTo(a,op_andnot,r); return r; }
-
-    // (public) ~this
-    function bnNot() {
-      var r = nbi();
-      for(var i = 0; i < this.t; ++i) r[i] = this.DM&~this[i];
-      r.t = this.t;
-      r.s = ~this.s;
-      return r;
-    }
-
-    // (public) this << n
-    function bnShiftLeft(n) {
-      var r = nbi();
-      if(n < 0) this.rShiftTo(-n,r); else this.lShiftTo(n,r);
-      return r;
-    }
-
-    // (public) this >> n
-    function bnShiftRight(n) {
-      var r = nbi();
-      if(n < 0) this.lShiftTo(-n,r); else this.rShiftTo(n,r);
-      return r;
-    }
-
-    // return index of lowest 1-bit in x, x < 2^31
-    function lbit(x) {
-      if(x == 0) return -1;
-      var r = 0;
-      if((x&0xffff) == 0) { x >>= 16; r += 16; }
-      if((x&0xff) == 0) { x >>= 8; r += 8; }
-      if((x&0xf) == 0) { x >>= 4; r += 4; }
-      if((x&3) == 0) { x >>= 2; r += 2; }
-      if((x&1) == 0) ++r;
-      return r;
-    }
-
-    // (public) returns index of lowest 1-bit (or -1 if none)
-    function bnGetLowestSetBit() {
-      for(var i = 0; i < this.t; ++i)
-        if(this[i] != 0) return i*this.DB+lbit(this[i]);
-      if(this.s < 0) return this.t*this.DB;
-      return -1;
-    }
-
-    // return number of 1 bits in x
-    function cbit(x) {
-      var r = 0;
-      while(x != 0) { x &= x-1; ++r; }
-      return r;
-    }
-
-    // (public) return number of set bits
-    function bnBitCount() {
-      var r = 0, x = this.s&this.DM;
-      for(var i = 0; i < this.t; ++i) r += cbit(this[i]^x);
-      return r;
-    }
-
-    // (public) true iff nth bit is set
-    function bnTestBit(n) {
-      var j = Math.floor(n/this.DB);
-      if(j >= this.t) return(this.s!=0);
-      return((this[j]&(1<<(n%this.DB)))!=0);
-    }
-
-    // (protected) this op (1<<n)
-    function bnpChangeBit(n,op) {
-      var r = BigInteger.ONE.shiftLeft(n);
-      this.bitwiseTo(r,op,r);
-      return r;
-    }
-
-    // (public) this | (1<<n)
-    function bnSetBit(n) { return this.changeBit(n,op_or); }
-
-    // (public) this & ~(1<<n)
-    function bnClearBit(n) { return this.changeBit(n,op_andnot); }
-
-    // (public) this ^ (1<<n)
-    function bnFlipBit(n) { return this.changeBit(n,op_xor); }
-
-    // (protected) r = this + a
-    function bnpAddTo(a,r) {
-      var i = 0, c = 0, m = Math.min(a.t,this.t);
-      while(i < m) {
-        c += this[i]+a[i];
-        r[i++] = c&this.DM;
-        c >>= this.DB;
-      }
-      if(a.t < this.t) {
-        c += a.s;
-        while(i < this.t) {
-          c += this[i];
-          r[i++] = c&this.DM;
-          c >>= this.DB;
-        }
-        c += this.s;
-      }
-      else {
-        c += this.s;
-        while(i < a.t) {
-          c += a[i];
-          r[i++] = c&this.DM;
-          c >>= this.DB;
-        }
-        c += a.s;
-      }
-      r.s = (c<0)?-1:0;
-      if(c > 0) r[i++] = c;
-      else if(c < -1) r[i++] = this.DV+c;
-      r.t = i;
-      r.clamp();
-    }
-
-    // (public) this + a
-    function bnAdd(a) { var r = nbi(); this.addTo(a,r); return r; }
-
-    // (public) this - a
-    function bnSubtract(a) { var r = nbi(); this.subTo(a,r); return r; }
-
-    // (public) this * a
-    function bnMultiply(a) { var r = nbi(); this.multiplyTo(a,r); return r; }
-
-    // (public) this^2
-    function bnSquare() { var r = nbi(); this.squareTo(r); return r; }
-
-    // (public) this / a
-    function bnDivide(a) { var r = nbi(); this.divRemTo(a,r,null); return r; }
-
-    // (public) this % a
-    function bnRemainder(a) { var r = nbi(); this.divRemTo(a,null,r); return r; }
-
-    // (public) [this/a,this%a]
-    function bnDivideAndRemainder(a) {
-      var q = nbi(), r = nbi();
-      this.divRemTo(a,q,r);
-      return new Array(q,r);
-    }
-
-    // (protected) this *= n, this >= 0, 1 < n < DV
-    function bnpDMultiply(n) {
-      this[this.t] = this.am(0,n-1,this,0,0,this.t);
-      ++this.t;
-      this.clamp();
-    }
-
-    // (protected) this += n << w words, this >= 0
-    function bnpDAddOffset(n,w) {
-      if(n == 0) return;
-      while(this.t <= w) this[this.t++] = 0;
-      this[w] += n;
-      while(this[w] >= this.DV) {
-        this[w] -= this.DV;
-        if(++w >= this.t) this[this.t++] = 0;
-        ++this[w];
-      }
-    }
-
-    // A "null" reducer
-    function NullExp() {}
-    function nNop(x) { return x; }
-    function nMulTo(x,y,r) { x.multiplyTo(y,r); }
-    function nSqrTo(x,r) { x.squareTo(r); }
-
-    NullExp.prototype.convert = nNop;
-    NullExp.prototype.revert = nNop;
-    NullExp.prototype.mulTo = nMulTo;
-    NullExp.prototype.sqrTo = nSqrTo;
-
-    // (public) this^e
-    function bnPow(e) { return this.exp(e,new NullExp()); }
-
-    // (protected) r = lower n words of "this * a", a.t <= n
-    // "this" should be the larger one if appropriate.
-    function bnpMultiplyLowerTo(a,n,r) {
-      var i = Math.min(this.t+a.t,n);
-      r.s = 0; // assumes a,this >= 0
-      r.t = i;
-      while(i > 0) r[--i] = 0;
-      var j;
-      for(j = r.t-this.t; i < j; ++i) r[i+this.t] = this.am(0,a[i],r,i,0,this.t);
-      for(j = Math.min(a.t,n); i < j; ++i) this.am(0,a[i],r,i,0,n-i);
-      r.clamp();
-    }
-
-    // (protected) r = "this * a" without lower n words, n > 0
-    // "this" should be the larger one if appropriate.
-    function bnpMultiplyUpperTo(a,n,r) {
-      --n;
-      var i = r.t = this.t+a.t-n;
-      r.s = 0; // assumes a,this >= 0
-      while(--i >= 0) r[i] = 0;
-      for(i = Math.max(n-this.t,0); i < a.t; ++i)
-        r[this.t+i-n] = this.am(n-i,a[i],r,0,0,this.t+i-n);
-      r.clamp();
-      r.drShiftTo(1,r);
-    }
-
-    // Barrett modular reduction
-    function Barrett(m) {
-      // setup Barrett
-      this.r2 = nbi();
-      this.q3 = nbi();
-      BigInteger.ONE.dlShiftTo(2*m.t,this.r2);
-      this.mu = this.r2.divide(m);
-      this.m = m;
-    }
-
-    function barrettConvert(x) {
-      if(x.s < 0 || x.t > 2*this.m.t) return x.mod(this.m);
-      else if(x.compareTo(this.m) < 0) return x;
-      else { var r = nbi(); x.copyTo(r); this.reduce(r); return r; }
-    }
-
-    function barrettRevert(x) { return x; }
-
-    // x = x mod m (HAC 14.42)
-    function barrettReduce(x) {
-      x.drShiftTo(this.m.t-1,this.r2);
-      if(x.t > this.m.t+1) { x.t = this.m.t+1; x.clamp(); }
-      this.mu.multiplyUpperTo(this.r2,this.m.t+1,this.q3);
-      this.m.multiplyLowerTo(this.q3,this.m.t+1,this.r2);
-      while(x.compareTo(this.r2) < 0) x.dAddOffset(1,this.m.t+1);
-      x.subTo(this.r2,x);
-      while(x.compareTo(this.m) >= 0) x.subTo(this.m,x);
-    }
-
-    // r = x^2 mod m; x != r
-    function barrettSqrTo(x,r) { x.squareTo(r); this.reduce(r); }
-
-    // r = x*y mod m; x,y != r
-    function barrettMulTo(x,y,r) { x.multiplyTo(y,r); this.reduce(r); }
-
-    Barrett.prototype.convert = barrettConvert;
-    Barrett.prototype.revert = barrettRevert;
-    Barrett.prototype.reduce = barrettReduce;
-    Barrett.prototype.mulTo = barrettMulTo;
-    Barrett.prototype.sqrTo = barrettSqrTo;
-
-    // (public) this^e % m (HAC 14.85)
-    function bnModPow(e,m) {
-      var i = e.bitLength(), k, r = nbv(1), z;
-      if(i <= 0) return r;
-      else if(i < 18) k = 1;
-      else if(i < 48) k = 3;
-      else if(i < 144) k = 4;
-      else if(i < 768) k = 5;
-      else k = 6;
-      if(i < 8)
-        z = new Classic(m);
-      else if(m.isEven())
-        z = new Barrett(m);
-      else
-        z = new Montgomery(m);
-
-      // precomputation
-      var g = new Array(), n = 3, k1 = k-1, km = (1<<k)-1;
-      g[1] = z.convert(this);
-      if(k > 1) {
-        var g2 = nbi();
-        z.sqrTo(g[1],g2);
-        while(n <= km) {
-          g[n] = nbi();
-          z.mulTo(g2,g[n-2],g[n]);
-          n += 2;
-        }
-      }
-
-      var j = e.t-1, w, is1 = true, r2 = nbi(), t;
-      i = nbits(e[j])-1;
-      while(j >= 0) {
-        if(i >= k1) w = (e[j]>>(i-k1))&km;
-        else {
-          w = (e[j]&((1<<(i+1))-1))<<(k1-i);
-          if(j > 0) w |= e[j-1]>>(this.DB+i-k1);
-        }
-
-        n = k;
-        while((w&1) == 0) { w >>= 1; --n; }
-        if((i -= n) < 0) { i += this.DB; --j; }
-        if(is1) {	// ret == 1, don't bother squaring or multiplying it
-          g[w].copyTo(r);
-          is1 = false;
-        }
-        else {
-          while(n > 1) { z.sqrTo(r,r2); z.sqrTo(r2,r); n -= 2; }
-          if(n > 0) z.sqrTo(r,r2); else { t = r; r = r2; r2 = t; }
-          z.mulTo(r2,g[w],r);
-        }
-
-        while(j >= 0 && (e[j]&(1<<i)) == 0) {
-          z.sqrTo(r,r2); t = r; r = r2; r2 = t;
-          if(--i < 0) { i = this.DB-1; --j; }
-        }
-      }
-      return z.revert(r);
-    }
-
-    // (public) gcd(this,a) (HAC 14.54)
-    function bnGCD(a) {
-      var x = (this.s<0)?this.negate():this.clone();
-      var y = (a.s<0)?a.negate():a.clone();
-      if(x.compareTo(y) < 0) { var t = x; x = y; y = t; }
-      var i = x.getLowestSetBit(), g = y.getLowestSetBit();
-      if(g < 0) return x;
-      if(i < g) g = i;
-      if(g > 0) {
-        x.rShiftTo(g,x);
-        y.rShiftTo(g,y);
-      }
-      while(x.signum() > 0) {
-        if((i = x.getLowestSetBit()) > 0) x.rShiftTo(i,x);
-        if((i = y.getLowestSetBit()) > 0) y.rShiftTo(i,y);
-        if(x.compareTo(y) >= 0) {
-          x.subTo(y,x);
-          x.rShiftTo(1,x);
-        }
-        else {
-          y.subTo(x,y);
-          y.rShiftTo(1,y);
-        }
-      }
-      if(g > 0) y.lShiftTo(g,y);
-      return y;
-    }
-
-    // (protected) this % n, n < 2^26
-    function bnpModInt(n) {
-      if(n <= 0) return 0;
-      var d = this.DV%n, r = (this.s<0)?n-1:0;
-      if(this.t > 0)
-        if(d == 0) r = this[0]%n;
-        else for(var i = this.t-1; i >= 0; --i) r = (d*r+this[i])%n;
-      return r;
-    }
-
-    // (public) 1/this % m (HAC 14.61)
-    function bnModInverse(m) {
-      var ac = m.isEven();
-      if((this.isEven() && ac) || m.signum() == 0) return BigInteger.ZERO;
-      var u = m.clone(), v = this.clone();
-      var a = nbv(1), b = nbv(0), c = nbv(0), d = nbv(1);
-      while(u.signum() != 0) {
-        while(u.isEven()) {
-          u.rShiftTo(1,u);
-          if(ac) {
-            if(!a.isEven() || !b.isEven()) { a.addTo(this,a); b.subTo(m,b); }
-            a.rShiftTo(1,a);
-          }
-          else if(!b.isEven()) b.subTo(m,b);
-          b.rShiftTo(1,b);
-        }
-        while(v.isEven()) {
-          v.rShiftTo(1,v);
-          if(ac) {
-            if(!c.isEven() || !d.isEven()) { c.addTo(this,c); d.subTo(m,d); }
-            c.rShiftTo(1,c);
-          }
-          else if(!d.isEven()) d.subTo(m,d);
-          d.rShiftTo(1,d);
-        }
-        if(u.compareTo(v) >= 0) {
-          u.subTo(v,u);
-          if(ac) a.subTo(c,a);
-          b.subTo(d,b);
-        }
-        else {
-          v.subTo(u,v);
-          if(ac) c.subTo(a,c);
-          d.subTo(b,d);
-        }
-      }
-      if(v.compareTo(BigInteger.ONE) != 0) return BigInteger.ZERO;
-      if(d.compareTo(m) >= 0) return d.subtract(m);
-      if(d.signum() < 0) d.addTo(m,d); else return d;
-      if(d.signum() < 0) return d.add(m); else return d;
-    }
-
-    var lowprimes = [2,3,5,7,11,13,17,19,23,29,31,37,41,43,47,53,59,61,67,71,73,79,83,89,97,101,103,107,109,113,127,131,137,139,149,151,157,163,167,173,179,181,191,193,197,199,211,223,227,229,233,239,241,251,257,263,269,271,277,281,283,293,307,311,313,317,331,337,347,349,353,359,367,373,379,383,389,397,401,409,419,421,431,433,439,443,449,457,461,463,467,479,487,491,499,503,509,521,523,541,547,557,563,569,571,577,587,593,599,601,607,613,617,619,631,641,643,647,653,659,661,673,677,683,691,701,709,719,727,733,739,743,751,757,761,769,773,787,797,809,811,821,823,827,829,839,853,857,859,863,877,881,883,887,907,911,919,929,937,941,947,953,967,971,977,983,991,997];
-    var lplim = (1<<26)/lowprimes[lowprimes.length-1];
-
-    // (public) test primality with certainty >= 1-.5^t
-    function bnIsProbablePrime(t) {
-      var i, x = this.abs();
-      if(x.t == 1 && x[0] <= lowprimes[lowprimes.length-1]) {
-        for(i = 0; i < lowprimes.length; ++i)
-          if(x[0] == lowprimes[i]) return true;
-        return false;
-      }
-      if(x.isEven()) return false;
-      i = 1;
-      while(i < lowprimes.length) {
-        var m = lowprimes[i], j = i+1;
-        while(j < lowprimes.length && m < lplim) m *= lowprimes[j++];
-        m = x.modInt(m);
-        while(i < j) if(m%lowprimes[i++] == 0) return false;
-      }
-      return x.millerRabin(t);
-    }
-
-    // (protected) true if probably prime (HAC 4.24, Miller-Rabin)
-    function bnpMillerRabin(t) {
-      var n1 = this.subtract(BigInteger.ONE);
-      var k = n1.getLowestSetBit();
-      if(k <= 0) return false;
-      var r = n1.shiftRight(k);
-      t = (t+1)>>1;
-      if(t > lowprimes.length) t = lowprimes.length;
-      var a = nbi();
-      for(var i = 0; i < t; ++i) {
-        //Pick bases at random, instead of starting at 2
-        a.fromInt(lowprimes[Math.floor(Math.random()*lowprimes.length)]);
-        var y = a.modPow(r,this);
-        if(y.compareTo(BigInteger.ONE) != 0 && y.compareTo(n1) != 0) {
-          var j = 1;
-          while(j++ < k && y.compareTo(n1) != 0) {
-            y = y.modPowInt(2,this);
-            if(y.compareTo(BigInteger.ONE) == 0) return false;
-          }
-          if(y.compareTo(n1) != 0) return false;
-        }
-      }
-      return true;
-    }
-
-    // protected
-    BigInteger.prototype.chunkSize = bnpChunkSize;
-    BigInteger.prototype.toRadix = bnpToRadix;
-    BigInteger.prototype.fromRadix = bnpFromRadix;
-    BigInteger.prototype.fromNumber = bnpFromNumber;
-    BigInteger.prototype.bitwiseTo = bnpBitwiseTo;
-    BigInteger.prototype.changeBit = bnpChangeBit;
-    BigInteger.prototype.addTo = bnpAddTo;
-    BigInteger.prototype.dMultiply = bnpDMultiply;
-    BigInteger.prototype.dAddOffset = bnpDAddOffset;
-    BigInteger.prototype.multiplyLowerTo = bnpMultiplyLowerTo;
-    BigInteger.prototype.multiplyUpperTo = bnpMultiplyUpperTo;
-    BigInteger.prototype.modInt = bnpModInt;
-    BigInteger.prototype.millerRabin = bnpMillerRabin;
-
-    // public
-    BigInteger.prototype.clone = bnClone;
-    BigInteger.prototype.intValue = bnIntValue;
-    BigInteger.prototype.byteValue = bnByteValue;
-    BigInteger.prototype.shortValue = bnShortValue;
-    BigInteger.prototype.signum = bnSigNum;
-    BigInteger.prototype.toByteArray = bnToByteArray;
-    BigInteger.prototype.equals = bnEquals;
-    BigInteger.prototype.min = bnMin;
-    BigInteger.prototype.max = bnMax;
-    BigInteger.prototype.and = bnAnd;
-    BigInteger.prototype.or = bnOr;
-    BigInteger.prototype.xor = bnXor;
-    BigInteger.prototype.andNot = bnAndNot;
-    BigInteger.prototype.not = bnNot;
-    BigInteger.prototype.shiftLeft = bnShiftLeft;
-    BigInteger.prototype.shiftRight = bnShiftRight;
-    BigInteger.prototype.getLowestSetBit = bnGetLowestSetBit;
-    BigInteger.prototype.bitCount = bnBitCount;
-    BigInteger.prototype.testBit = bnTestBit;
-    BigInteger.prototype.setBit = bnSetBit;
-    BigInteger.prototype.clearBit = bnClearBit;
-    BigInteger.prototype.flipBit = bnFlipBit;
-    BigInteger.prototype.add = bnAdd;
-    BigInteger.prototype.subtract = bnSubtract;
-    BigInteger.prototype.multiply = bnMultiply;
-    BigInteger.prototype.divide = bnDivide;
-    BigInteger.prototype.remainder = bnRemainder;
-    BigInteger.prototype.divideAndRemainder = bnDivideAndRemainder;
-    BigInteger.prototype.modPow = bnModPow;
-    BigInteger.prototype.modInverse = bnModInverse;
-    BigInteger.prototype.pow = bnPow;
-    BigInteger.prototype.gcd = bnGCD;
-    BigInteger.prototype.isProbablePrime = bnIsProbablePrime;
-
-    // JSBN-specific extension
-    BigInteger.prototype.square = bnSquare;
-
-    // Expose the Barrett function
-    BigInteger.prototype.Barrett = Barrett
-
-    // BigInteger interfaces not implemented in jsbn:
-
-    // BigInteger(int signum, byte[] magnitude)
-    // double doubleValue()
-    // float floatValue()
-    // int hashCode()
-    // long longValue()
-    // static BigInteger valueOf(long val)
-
-	// Random number generator - requires a PRNG backend, e.g. prng4.js
-
-	// For best results, put code like
-	// <body onClick='rng_seed_time();' onKeyPress='rng_seed_time();'>
-	// in your main HTML document.
-
-	var rng_state;
-	var rng_pool;
-	var rng_pptr;
-
-	// Mix in a 32-bit integer into the pool
-	function rng_seed_int(x) {
-	  rng_pool[rng_pptr++] ^= x & 255;
-	  rng_pool[rng_pptr++] ^= (x >> 8) & 255;
-	  rng_pool[rng_pptr++] ^= (x >> 16) & 255;
-	  rng_pool[rng_pptr++] ^= (x >> 24) & 255;
-	  if(rng_pptr >= rng_psize) rng_pptr -= rng_psize;
-	}
-
-	// Mix in the current time (w/milliseconds) into the pool
-	function rng_seed_time() {
-	  rng_seed_int(new Date().getTime());
-	}
-
-	// Initialize the pool with junk if needed.
-	if(rng_pool == null) {
-	  rng_pool = new Array();
-	  rng_pptr = 0;
-	  var t;
-	  if(typeof window !== "undefined" && window.crypto) {
-		if (window.crypto.getRandomValues) {
-		  // Use webcrypto if available
-		  var ua = new Uint8Array(32);
-		  window.crypto.getRandomValues(ua);
-		  for(t = 0; t < 32; ++t)
-			rng_pool[rng_pptr++] = ua[t];
-		}
-		else if(navigator.appName == "Netscape" && navigator.appVersion < "5") {
-		  // Extract entropy (256 bits) from NS4 RNG if available
-		  var z = window.crypto.random(32);
-		  for(t = 0; t < z.length; ++t)
-			rng_pool[rng_pptr++] = z.charCodeAt(t) & 255;
-		}
-	  }
-	  while(rng_pptr < rng_psize) {  // extract some randomness from Math.random()
-		t = Math.floor(65536 * Math.random());
-		rng_pool[rng_pptr++] = t >>> 8;
-		rng_pool[rng_pptr++] = t & 255;
-	  }
-	  rng_pptr = 0;
-	  rng_seed_time();
-	  //rng_seed_int(window.screenX);
-	  //rng_seed_int(window.screenY);
-	}
-
-	function rng_get_byte() {
-	  if(rng_state == null) {
-		rng_seed_time();
-		rng_state = prng_newstate();
-		rng_state.init(rng_pool);
-		for(rng_pptr = 0; rng_pptr < rng_pool.length; ++rng_pptr)
-		  rng_pool[rng_pptr] = 0;
-		rng_pptr = 0;
-		//rng_pool = null;
-	  }
-	  // TODO: allow reseeding after first request
-	  return rng_state.next();
-	}
-
-	function rng_get_bytes(ba) {
-	  var i;
-	  for(i = 0; i < ba.length; ++i) ba[i] = rng_get_byte();
-	}
-
-	function SecureRandom() {}
-
-	SecureRandom.prototype.nextBytes = rng_get_bytes;
-
-	// prng4.js - uses Arcfour as a PRNG
-
-	function Arcfour() {
-	  this.i = 0;
-	  this.j = 0;
-	  this.S = new Array();
-	}
-
-	// Initialize arcfour context from key, an array of ints, each from [0..255]
-	function ARC4init(key) {
-	  var i, j, t;
-	  for(i = 0; i < 256; ++i)
-		this.S[i] = i;
-	  j = 0;
-	  for(i = 0; i < 256; ++i) {
-		j = (j + this.S[i] + key[i % key.length]) & 255;
-		t = this.S[i];
-		this.S[i] = this.S[j];
-		this.S[j] = t;
-	  }
-	  this.i = 0;
-	  this.j = 0;
-	}
-
-	function ARC4next() {
-	  var t;
-	  this.i = (this.i + 1) & 255;
-	  this.j = (this.j + this.S[this.i]) & 255;
-	  t = this.S[this.i];
-	  this.S[this.i] = this.S[this.j];
-	  this.S[this.j] = t;
-	  return this.S[(t + this.S[this.i]) & 255];
-	}
-
-	Arcfour.prototype.init = ARC4init;
-	Arcfour.prototype.next = ARC4next;
-
-	// Plug in your RNG constructor here
-	function prng_newstate() {
-	  return new Arcfour();
-	}
-
-	// Pool size must be a multiple of 4 and greater than 32.
-	// An array of bytes the size of the pool will be passed to init()
-	var rng_psize = 256;
-
-  BigInteger.SecureRandom = SecureRandom;
-  BigInteger.BigInteger = BigInteger;
-  if (true) {
-    exports = module.exports = BigInteger;
-  } else {
-    this.BigInteger = BigInteger;
-    this.SecureRandom = SecureRandom;
-  }
-
-}).call(this);
-
-
-/***/ }),
-/* 82 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = minimatch
-minimatch.Minimatch = Minimatch
-
-var path = { sep: '/' }
-try {
-  path = __webpack_require__(0)
-} catch (er) {}
-
-var GLOBSTAR = minimatch.GLOBSTAR = Minimatch.GLOBSTAR = {}
-var expand = __webpack_require__(229)
-
-var plTypes = {
-  '!': { open: '(?:(?!(?:', close: '))[^/]*?)'},
-  '?': { open: '(?:', close: ')?' },
-  '+': { open: '(?:', close: ')+' },
-  '*': { open: '(?:', close: ')*' },
-  '@': { open: '(?:', close: ')' }
-}
-
-// any single thing other than /
-// don't need to escape / when using new RegExp()
-var qmark = '[^/]'
-
-// * => any number of characters
-var star = qmark + '*?'
-
-// ** when dots are allowed.  Anything goes, except .. and .
-// not (^ or / followed by one or two dots followed by $ or /),
-// followed by anything, any number of times.
-var twoStarDot = '(?:(?!(?:\\\/|^)(?:\\.{1,2})($|\\\/)).)*?'
-
-// not a ^ or / followed by a dot,
-// followed by anything, any number of times.
-var twoStarNoDot = '(?:(?!(?:\\\/|^)\\.).)*?'
-
-// characters that need to be escaped in RegExp.
-var reSpecials = charSet('().*{}+?[]^$\\!')
-
-// "abc" -> { a:true, b:true, c:true }
-function charSet (s) {
-  return s.split('').reduce(function (set, c) {
-    set[c] = true
-    return set
-  }, {})
-}
-
-// normalizes slashes.
-var slashSplit = /\/+/
-
-minimatch.filter = filter
-function filter (pattern, options) {
-  options = options || {}
-  return function (p, i, list) {
-    return minimatch(p, pattern, options)
-  }
-}
-
-function ext (a, b) {
-  a = a || {}
-  b = b || {}
-  var t = {}
-  Object.keys(b).forEach(function (k) {
-    t[k] = b[k]
-  })
-  Object.keys(a).forEach(function (k) {
-    t[k] = a[k]
-  })
-  return t
-}
-
-minimatch.defaults = function (def) {
-  if (!def || !Object.keys(def).length) return minimatch
-
-  var orig = minimatch
-
-  var m = function minimatch (p, pattern, options) {
-    return orig.minimatch(p, pattern, ext(def, options))
-  }
-
-  m.Minimatch = function Minimatch (pattern, options) {
-    return new orig.Minimatch(pattern, ext(def, options))
-  }
-
-  return m
-}
-
-Minimatch.defaults = function (def) {
-  if (!def || !Object.keys(def).length) return Minimatch
-  return minimatch.defaults(def).Minimatch
-}
-
-function minimatch (p, pattern, options) {
-  if (typeof pattern !== 'string') {
-    throw new TypeError('glob pattern string required')
-  }
-
-  if (!options) options = {}
-
-  // shortcut: comments match nothing.
-  if (!options.nocomment && pattern.charAt(0) === '#') {
-    return false
-  }
-
-  // "" only matches ""
-  if (pattern.trim() === '') return p === ''
-
-  return new Minimatch(pattern, options).match(p)
-}
-
-function Minimatch (pattern, options) {
-  if (!(this instanceof Minimatch)) {
-    return new Minimatch(pattern, options)
-  }
-
-  if (typeof pattern !== 'string') {
-    throw new TypeError('glob pattern string required')
-  }
-
-  if (!options) options = {}
-  pattern = pattern.trim()
-
-  // windows support: need to use /, not \
-  if (path.sep !== '/') {
-    pattern = pattern.split(path.sep).join('/')
-  }
-
-  this.options = options
-  this.set = []
-  this.pattern = pattern
-  this.regexp = null
-  this.negate = false
-  this.comment = false
-  this.empty = false
-
-  // make the set of regexps etc.
-  this.make()
-}
-
-Minimatch.prototype.debug = function () {}
-
-Minimatch.prototype.make = make
-function make () {
-  // don't do it more than once.
-  if (this._made) return
-
-  var pattern = this.pattern
-  var options = this.options
-
-  // empty patterns and comments match nothing.
-  if (!options.nocomment && pattern.charAt(0) === '#') {
-    this.comment = true
-    return
-  }
-  if (!pattern) {
-    this.empty = true
-    return
-  }
-
-  // step 1: figure out negation, etc.
-  this.parseNegate()
-
-  // step 2: expand braces
-  var set = this.globSet = this.braceExpand()
-
-  if (options.debug) this.debug = console.error
-
-  this.debug(this.pattern, set)
-
-  // step 3: now we have a set, so turn each one into a series of path-portion
-  // matching patterns.
-  // These will be regexps, except in the case of "**", which is
-  // set to the GLOBSTAR object for globstar behavior,
-  // and will not contain any / characters
-  set = this.globParts = set.map(function (s) {
-    return s.split(slashSplit)
-  })
-
-  this.debug(this.pattern, set)
-
-  // glob --> regexps
-  set = set.map(function (s, si, set) {
-    return s.map(this.parse, this)
-  }, this)
-
-  this.debug(this.pattern, set)
-
-  // filter out everything that didn't compile properly.
-  set = set.filter(function (s) {
-    return s.indexOf(false) === -1
-  })
-
-  this.debug(this.pattern, set)
-
-  this.set = set
-}
-
-Minimatch.prototype.parseNegate = parseNegate
-function parseNegate () {
-  var pattern = this.pattern
-  var negate = false
-  var options = this.options
-  var negateOffset = 0
-
-  if (options.nonegate) return
-
-  for (var i = 0, l = pattern.length
-    ; i < l && pattern.charAt(i) === '!'
-    ; i++) {
-    negate = !negate
-    negateOffset++
-  }
-
-  if (negateOffset) this.pattern = pattern.substr(negateOffset)
-  this.negate = negate
-}
-
-// Brace expansion:
-// a{b,c}d -> abd acd
-// a{b,}c -> abc ac
-// a{0..3}d -> a0d a1d a2d a3d
-// a{b,c{d,e}f}g -> abg acdfg acefg
-// a{b,c}d{e,f}g -> abdeg acdeg abdeg abdfg
-//
-// Invalid sets are not expanded.
-// a{2..}b -> a{2..}b
-// a{b}c -> a{b}c
-minimatch.braceExpand = function (pattern, options) {
-  return braceExpand(pattern, options)
-}
-
-Minimatch.prototype.braceExpand = braceExpand
-
-function braceExpand (pattern, options) {
-  if (!options) {
-    if (this instanceof Minimatch) {
-      options = this.options
-    } else {
-      options = {}
-    }
-  }
-
-  pattern = typeof pattern === 'undefined'
-    ? this.pattern : pattern
-
-  if (typeof pattern === 'undefined') {
-    throw new TypeError('undefined pattern')
-  }
-
-  if (options.nobrace ||
-    !pattern.match(/\{.*\}/)) {
-    // shortcut. no need to expand.
-    return [pattern]
-  }
-
-  return expand(pattern)
-}
-
-// parse a component of the expanded set.
-// At this point, no pattern may contain "/" in it
-// so we're going to return a 2d array, where each entry is the full
-// pattern, split on '/', and then turned into a regular expression.
-// A regexp is made at the end which joins each array with an
-// escaped /, and another full one which joins each regexp with |.
-//
-// Following the lead of Bash 4.1, note that "**" only has special meaning
-// when it is the *only* thing in a path portion.  Otherwise, any series
-// of * is equivalent to a single *.  Globstar behavior is enabled by
-// default, and can be disabled by setting options.noglobstar.
-Minimatch.prototype.parse = parse
-var SUBPARSE = {}
-function parse (pattern, isSub) {
-  if (pattern.length > 1024 * 64) {
-    throw new TypeError('pattern is too long')
-  }
-
-  var options = this.options
-
-  // shortcuts
-  if (!options.noglobstar && pattern === '**') return GLOBSTAR
-  if (pattern === '') return ''
-
-  var re = ''
-  var hasMagic = !!options.nocase
-  var escaping = false
-  // ? => one single character
-  var patternListStack = []
-  var negativeLists = []
-  var stateChar
-  var inClass = false
-  var reClassStart = -1
-  var classStart = -1
-  // . and .. never match anything that doesn't start with .,
-  // even when options.dot is set.
-  var patternStart = pattern.charAt(0) === '.' ? '' // anything
-  // not (start or / followed by . or .. followed by / or end)
-  : options.dot ? '(?!(?:^|\\\/)\\.{1,2}(?:$|\\\/))'
-  : '(?!\\.)'
-  var self = this
-
-  function clearStateChar () {
-    if (stateChar) {
-      // we had some state-tracking character
-      // that wasn't consumed by this pass.
-      switch (stateChar) {
-        case '*':
-          re += star
-          hasMagic = true
-        break
-        case '?':
-          re += qmark
-          hasMagic = true
-        break
-        default:
-          re += '\\' + stateChar
-        break
-      }
-      self.debug('clearStateChar %j %j', stateChar, re)
-      stateChar = false
-    }
-  }
-
-  for (var i = 0, len = pattern.length, c
-    ; (i < len) && (c = pattern.charAt(i))
-    ; i++) {
-    this.debug('%s\t%s %s %j', pattern, i, re, c)
-
-    // skip over any that are escaped.
-    if (escaping && reSpecials[c]) {
-      re += '\\' + c
-      escaping = false
-      continue
-    }
-
-    switch (c) {
-      case '/':
-        // completely not allowed, even escaped.
-        // Should already be path-split by now.
-        return false
-
-      case '\\':
-        clearStateChar()
-        escaping = true
-      continue
-
-      // the various stateChar values
-      // for the "extglob" stuff.
-      case '?':
-      case '*':
-      case '+':
-      case '@':
-      case '!':
-        this.debug('%s\t%s %s %j <-- stateChar', pattern, i, re, c)
-
-        // all of those are literals inside a class, except that
-        // the glob [!a] means [^a] in regexp
-        if (inClass) {
-          this.debug('  in class')
-          if (c === '!' && i === classStart + 1) c = '^'
-          re += c
-          continue
-        }
-
-        // if we already have a stateChar, then it means
-        // that there was something like ** or +? in there.
-        // Handle the stateChar, then proceed with this one.
-        self.debug('call clearStateChar %j', stateChar)
-        clearStateChar()
-        stateChar = c
-        // if extglob is disabled, then +(asdf|foo) isn't a thing.
-        // just clear the statechar *now*, rather than even diving into
-        // the patternList stuff.
-        if (options.noext) clearStateChar()
-      continue
-
-      case '(':
-        if (inClass) {
-          re += '('
-          continue
-        }
-
-        if (!stateChar) {
-          re += '\\('
-          continue
-        }
-
-        patternListStack.push({
-          type: stateChar,
-          start: i - 1,
-          reStart: re.length,
-          open: plTypes[stateChar].open,
-          close: plTypes[stateChar].close
-        })
-        // negation is (?:(?!js)[^/]*)
-        re += stateChar === '!' ? '(?:(?!(?:' : '(?:'
-        this.debug('plType %j %j', stateChar, re)
-        stateChar = false
-      continue
-
-      case ')':
-        if (inClass || !patternListStack.length) {
-          re += '\\)'
-          continue
-        }
-
-        clearStateChar()
-        hasMagic = true
-        var pl = patternListStack.pop()
-        // negation is (?:(?!js)[^/]*)
-        // The others are (?:<pattern>)<type>
-        re += pl.close
-        if (pl.type === '!') {
-          negativeLists.push(pl)
-        }
-        pl.reEnd = re.length
-      continue
-
-      case '|':
-        if (inClass || !patternListStack.length || escaping) {
-          re += '\\|'
-          escaping = false
-          continue
-        }
-
-        clearStateChar()
-        re += '|'
-      continue
-
-      // these are mostly the same in regexp and glob
-      case '[':
-        // swallow any state-tracking char before the [
-        clearStateChar()
-
-        if (inClass) {
-          re += '\\' + c
-          continue
-        }
-
-        inClass = true
-        classStart = i
-        reClassStart = re.length
-        re += c
-      continue
-
-      case ']':
-        //  a right bracket shall lose its special
-        //  meaning and represent itself in
-        //  a bracket expression if it occurs
-        //  first in the list.  -- POSIX.2 2.8.3.2
-        if (i === classStart + 1 || !inClass) {
-          re += '\\' + c
-          escaping = false
-          continue
-        }
-
-        // handle the case where we left a class open.
-        // "[z-a]" is valid, equivalent to "\[z-a\]"
-        if (inClass) {
-          // split where the last [ was, make sure we don't have
-          // an invalid re. if so, re-walk the contents of the
-          // would-be class to re-translate any characters that
-          // were passed through as-is
-          // TODO: It would probably be faster to determine this
-          // without a try/catch and a new RegExp, but it's tricky
-          // to do safely.  For now, this is safe and works.
-          var cs = pattern.substring(classStart + 1, i)
-          try {
-            RegExp('[' + cs + ']')
-          } catch (er) {
-            // not a valid class!
-            var sp = this.parse(cs, SUBPARSE)
-            re = re.substr(0, reClassStart) + '\\[' + sp[0] + '\\]'
-            hasMagic = hasMagic || sp[1]
-            inClass = false
-            continue
-          }
-        }
-
-        // finish up the class.
-        hasMagic = true
-        inClass = false
-        re += c
-      continue
-
-      default:
-        // swallow any state char that wasn't consumed
-        clearStateChar()
-
-        if (escaping) {
-          // no need
-          escaping = false
-        } else if (reSpecials[c]
-          && !(c === '^' && inClass)) {
-          re += '\\'
-        }
-
-        re += c
-
-    } // switch
-  } // for
-
-  // handle the case where we left a class open.
-  // "[abc" is valid, equivalent to "\[abc"
-  if (inClass) {
-    // split where the last [ was, and escape it
-    // this is a huge pita.  We now have to re-walk
-    // the contents of the would-be class to re-translate
-    // any characters that were passed through as-is
-    cs = pattern.substr(classStart + 1)
-    sp = this.parse(cs, SUBPARSE)
-    re = re.substr(0, reClassStart) + '\\[' + sp[0]
-    hasMagic = hasMagic || sp[1]
-  }
-
-  // handle the case where we had a +( thing at the *end*
-  // of the pattern.
-  // each pattern list stack adds 3 chars, and we need to go through
-  // and escape any | chars that were passed through as-is for the regexp.
-  // Go through and escape them, taking care not to double-escape any
-  // | chars that were already escaped.
-  for (pl = patternListStack.pop(); pl; pl = patternListStack.pop()) {
-    var tail = re.slice(pl.reStart + pl.open.length)
-    this.debug('setting tail', re, pl)
-    // maybe some even number of \, then maybe 1 \, followed by a |
-    tail = tail.replace(/((?:\\{2}){0,64})(\\?)\|/g, function (_, $1, $2) {
-      if (!$2) {
-        // the | isn't already escaped, so escape it.
-        $2 = '\\'
-      }
-
-      // need to escape all those slashes *again*, without escaping the
-      // one that we need for escaping the | character.  As it works out,
-      // escaping an even number of slashes can be done by simply repeating
-      // it exactly after itself.  That's why this trick works.
-      //
-      // I am sorry that you have to see this.
-      return $1 + $1 + $2 + '|'
-    })
-
-    this.debug('tail=%j\n   %s', tail, tail, pl, re)
-    var t = pl.type === '*' ? star
-      : pl.type === '?' ? qmark
-      : '\\' + pl.type
-
-    hasMagic = true
-    re = re.slice(0, pl.reStart) + t + '\\(' + tail
-  }
-
-  // handle trailing things that only matter at the very end.
-  clearStateChar()
-  if (escaping) {
-    // trailing \\
-    re += '\\\\'
-  }
-
-  // only need to apply the nodot start if the re starts with
-  // something that could conceivably capture a dot
-  var addPatternStart = false
-  switch (re.charAt(0)) {
-    case '.':
-    case '[':
-    case '(': addPatternStart = true
-  }
-
-  // Hack to work around lack of negative lookbehind in JS
-  // A pattern like: *.!(x).!(y|z) needs to ensure that a name
-  // like 'a.xyz.yz' doesn't match.  So, the first negative
-  // lookahead, has to look ALL the way ahead, to the end of
-  // the pattern.
-  for (var n = negativeLists.length - 1; n > -1; n--) {
-    var nl = negativeLists[n]
-
-    var nlBefore = re.slice(0, nl.reStart)
-    var nlFirst = re.slice(nl.reStart, nl.reEnd - 8)
-    var nlLast = re.slice(nl.reEnd - 8, nl.reEnd)
-    var nlAfter = re.slice(nl.reEnd)
-
-    nlLast += nlAfter
-
-    // Handle nested stuff like *(*.js|!(*.json)), where open parens
-    // mean that we should *not* include the ) in the bit that is considered
-    // "after" the negated section.
-    var openParensBefore = nlBefore.split('(').length - 1
-    var cleanAfter = nlAfter
-    for (i = 0; i < openParensBefore; i++) {
-      cleanAfter = cleanAfter.replace(/\)[+*?]?/, '')
-    }
-    nlAfter = cleanAfter
-
-    var dollar = ''
-    if (nlAfter === '' && isSub !== SUBPARSE) {
-      dollar = '$'
-    }
-    var newRe = nlBefore + nlFirst + nlAfter + dollar + nlLast
-    re = newRe
-  }
-
-  // if the re is not "" at this point, then we need to make sure
-  // it doesn't match against an empty path part.
-  // Otherwise a/* will match a/, which it should not.
-  if (re !== '' && hasMagic) {
-    re = '(?=.)' + re
-  }
-
-  if (addPatternStart) {
-    re = patternStart + re
-  }
-
-  // parsing just a piece of a larger pattern.
-  if (isSub === SUBPARSE) {
-    return [re, hasMagic]
-  }
-
-  // skip the regexp for non-magical patterns
-  // unescape anything in it, though, so that it'll be
-  // an exact match against a file etc.
-  if (!hasMagic) {
-    return globUnescape(pattern)
-  }
-
-  var flags = options.nocase ? 'i' : ''
-  try {
-    var regExp = new RegExp('^' + re + '$', flags)
-  } catch (er) {
-    // If it was an invalid regular expression, then it can't match
-    // anything.  This trick looks for a character after the end of
-    // the string, which is of course impossible, except in multi-line
-    // mode, but it's not a /m regex.
-    return new RegExp('$.')
-  }
-
-  regExp._glob = pattern
-  regExp._src = re
-
-  return regExp
-}
-
-minimatch.makeRe = function (pattern, options) {
-  return new Minimatch(pattern, options || {}).makeRe()
-}
-
-Minimatch.prototype.makeRe = makeRe
-function makeRe () {
-  if (this.regexp || this.regexp === false) return this.regexp
-
-  // at this point, this.set is a 2d array of partial
-  // pattern strings, or "**".
-  //
-  // It's better to use .match().  This function shouldn't
-  // be used, really, but it's pretty convenient sometimes,
-  // when you just want to work with a regex.
-  var set = this.set
-
-  if (!set.length) {
-    this.regexp = false
-    return this.regexp
-  }
-  var options = this.options
-
-  var twoStar = options.noglobstar ? star
-    : options.dot ? twoStarDot
-    : twoStarNoDot
-  var flags = options.nocase ? 'i' : ''
-
-  var re = set.map(function (pattern) {
-    return pattern.map(function (p) {
-      return (p === GLOBSTAR) ? twoStar
-      : (typeof p === 'string') ? regExpEscape(p)
-      : p._src
-    }).join('\\\/')
-  }).join('|')
-
-  // must match entire pattern
-  // ending in a * or ** will make it less strict.
-  re = '^(?:' + re + ')$'
-
-  // can match anything, as long as it's not this.
-  if (this.negate) re = '^(?!' + re + ').*$'
-
-  try {
-    this.regexp = new RegExp(re, flags)
-  } catch (ex) {
-    this.regexp = false
-  }
-  return this.regexp
-}
-
-minimatch.match = function (list, pattern, options) {
-  options = options || {}
-  var mm = new Minimatch(pattern, options)
-  list = list.filter(function (f) {
-    return mm.match(f)
-  })
-  if (mm.options.nonull && !list.length) {
-    list.push(pattern)
-  }
-  return list
-}
-
-Minimatch.prototype.match = match
-function match (f, partial) {
-  this.debug('match', f, this.pattern)
-  // short-circuit in the case of busted things.
-  // comments, etc.
-  if (this.comment) return false
-  if (this.empty) return f === ''
-
-  if (f === '/' && partial) return true
-
-  var options = this.options
-
-  // windows: need to use /, not \
-  if (path.sep !== '/') {
-    f = f.split(path.sep).join('/')
-  }
-
-  // treat the test path as a set of pathparts.
-  f = f.split(slashSplit)
-  this.debug(this.pattern, 'split', f)
-
-  // just ONE of the pattern sets in this.set needs to match
-  // in order for it to be valid.  If negating, then just one
-  // match means that we have failed.
-  // Either way, return on the first hit.
-
-  var set = this.set
-  this.debug(this.pattern, 'set', set)
-
-  // Find the basename of the path by looking for the last non-empty segment
-  var filename
-  var i
-  for (i = f.length - 1; i >= 0; i--) {
-    filename = f[i]
-    if (filename) break
-  }
-
-  for (i = 0; i < set.length; i++) {
-    var pattern = set[i]
-    var file = f
-    if (options.matchBase && pattern.length === 1) {
-      file = [filename]
-    }
-    var hit = this.matchOne(file, pattern, partial)
-    if (hit) {
-      if (options.flipNegate) return true
-      return !this.negate
-    }
-  }
-
-  // didn't get any hits.  this is success if it's a negative
-  // pattern, failure otherwise.
-  if (options.flipNegate) return false
-  return this.negate
-}
-
-// set partial to true to test if, for example,
-// "/a/b" matches the start of "/*/b/*/d"
-// Partial means, if you run out of file before you run
-// out of pattern, then that's fine, as long as all
-// the parts match.
-Minimatch.prototype.matchOne = function (file, pattern, partial) {
-  var options = this.options
-
-  this.debug('matchOne',
-    { 'this': this, file: file, pattern: pattern })
-
-  this.debug('matchOne', file.length, pattern.length)
-
-  for (var fi = 0,
-      pi = 0,
-      fl = file.length,
-      pl = pattern.length
-      ; (fi < fl) && (pi < pl)
-      ; fi++, pi++) {
-    this.debug('matchOne loop')
-    var p = pattern[pi]
-    var f = file[fi]
-
-    this.debug(pattern, p, f)
-
-    // should be impossible.
-    // some invalid regexp stuff in the set.
-    if (p === false) return false
-
-    if (p === GLOBSTAR) {
-      this.debug('GLOBSTAR', [pattern, p, f])
-
-      // "**"
-      // a/**/b/**/c would match the following:
-      // a/b/x/y/z/c
-      // a/x/y/z/b/c
-      // a/b/x/b/x/c
-      // a/b/c
-      // To do this, take the rest of the pattern after
-      // the **, and see if it would match the file remainder.
-      // If so, return success.
-      // If not, the ** "swallows" a segment, and try again.
-      // This is recursively awful.
-      //
-      // a/**/b/**/c matching a/b/x/y/z/c
-      // - a matches a
-      // - doublestar
-      //   - matchOne(b/x/y/z/c, b/**/c)
-      //     - b matches b
-      //     - doublestar
-      //       - matchOne(x/y/z/c, c) -> no
-      //       - matchOne(y/z/c, c) -> no
-      //       - matchOne(z/c, c) -> no
-      //       - matchOne(c, c) yes, hit
-      var fr = fi
-      var pr = pi + 1
-      if (pr === pl) {
-        this.debug('** at the end')
-        // a ** at the end will just swallow the rest.
-        // We have found a match.
-        // however, it will not swallow /.x, unless
-        // options.dot is set.
-        // . and .. are *never* matched by **, for explosively
-        // exponential reasons.
-        for (; fi < fl; fi++) {
-          if (file[fi] === '.' || file[fi] === '..' ||
-            (!options.dot && file[fi].charAt(0) === '.')) return false
-        }
-        return true
-      }
-
-      // ok, let's see if we can swallow whatever we can.
-      while (fr < fl) {
-        var swallowee = file[fr]
-
-        this.debug('\nglobstar while', file, fr, pattern, pr, swallowee)
-
-        // XXX remove this slice.  Just pass the start index.
-        if (this.matchOne(file.slice(fr), pattern.slice(pr), partial)) {
-          this.debug('globstar found match!', fr, fl, swallowee)
-          // found a match.
-          return true
-        } else {
-          // can't swallow "." or ".." ever.
-          // can only swallow ".foo" when explicitly asked.
-          if (swallowee === '.' || swallowee === '..' ||
-            (!options.dot && swallowee.charAt(0) === '.')) {
-            this.debug('dot detected!', file, fr, pattern, pr)
-            break
-          }
-
-          // ** swallows a segment, and continue.
-          this.debug('globstar swallow a segment, and continue')
-          fr++
-        }
-      }
-
-      // no match was found.
-      // However, in partial mode, we can't say this is necessarily over.
-      // If there's more *pattern* left, then
-      if (partial) {
-        // ran out of file
-        this.debug('\n>>> no match, partial?', file, fr, pattern, pr)
-        if (fr === fl) return true
-      }
-      return false
-    }
-
-    // something other than **
-    // non-magic patterns just have to match exactly
-    // patterns with magic have been turned into regexps.
-    var hit
-    if (typeof p === 'string') {
-      if (options.nocase) {
-        hit = f.toLowerCase() === p.toLowerCase()
-      } else {
-        hit = f === p
-      }
-      this.debug('string match', p, f, hit)
-    } else {
-      hit = f.match(p)
-      this.debug('pattern match', p, f, hit)
-    }
-
-    if (!hit) return false
-  }
-
-  // Note: ending in / means that we'll get a final ""
-  // at the end of the pattern.  This can only match a
-  // corresponding "" at the end of the file.
-  // If the file ends in /, then it can only match a
-  // a pattern that ends in /, unless the pattern just
-  // doesn't have any more for it. But, a/b/ should *not*
-  // match "a/b/*", even though "" matches against the
-  // [^/]*? pattern, except in partial mode, where it might
-  // simply not be reached yet.
-  // However, a/b/ should still satisfy a/*
-
-  // now either we fell off the end of the pattern, or we're done.
-  if (fi === fl && pi === pl) {
-    // ran out of pattern and filename at the same time.
-    // an exact hit!
-    return true
-  } else if (fi === fl) {
-    // ran out of file, but still had pattern left.
-    // this is ok if we're doing the match as part of
-    // a glob fs traversal.
-    return partial
-  } else if (pi === pl) {
-    // ran out of pattern, still have file left.
-    // this is only acceptable if we're on the very last
-    // empty segment of a file with a trailing slash.
-    // a/* should match a/b/
-    var emptyFileEnd = (fi === fl - 1) && (file[fi] === '')
-    return emptyFileEnd
-  }
-
-  // should be unreachable.
-  throw new Error('wtf?')
-}
-
-// replace stuff like \* with *
-function globUnescape (s) {
-  return s.replace(/\\(.)/g, '$1')
-}
-
-function regExpEscape (s) {
-  return s.replace(/[-[\]{}()*+?.,\\^$|#\s]/g, '\\$&')
-}
-
-
-/***/ }),
-/* 83 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var wrappy = __webpack_require__(161)
-module.exports = wrappy(once)
-module.exports.strict = wrappy(onceStrict)
-
-once.proto = once(function () {
-  Object.defineProperty(Function.prototype, 'once', {
-    value: function () {
-      return once(this)
-    },
-    configurable: true
-  })
-
-  Object.defineProperty(Function.prototype, 'onceStrict', {
-    value: function () {
-      return onceStrict(this)
-    },
-    configurable: true
-  })
-})
-
-function once (fn) {
-  var f = function () {
-    if (f.called) return f.value
-    f.called = true
-    return f.value = fn.apply(this, arguments)
-  }
-  f.called = false
-  return f
-}
-
-function onceStrict (fn) {
-  var f = function () {
-    if (f.called)
-      throw new Error(f.onceError)
-    f.called = true
-    return f.value = fn.apply(this, arguments)
-  }
-  var name = fn.name || 'Function wrapped with `once`'
-  f.onceError = name + " shouldn't be called more than once"
-  f.called = false
-  return f
-}
-
-
-/***/ }),
-/* 84 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return InnerSubscriber; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-var InnerSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](InnerSubscriber, _super);
-    function InnerSubscriber(parent, outerValue, outerIndex) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        _this.outerValue = outerValue;
-        _this.outerIndex = outerIndex;
-        _this.index = 0;
-        return _this;
-    }
-    InnerSubscriber.prototype._next = function (value) {
-        this.parent.notifyNext(this.outerValue, value, this.outerIndex, this.index++, this);
-    };
-    InnerSubscriber.prototype._error = function (error) {
-        this.parent.notifyError(error, this);
-        this.unsubscribe();
-    };
-    InnerSubscriber.prototype._complete = function () {
-        this.parent.notifyComplete(this);
-        this.unsubscribe();
-    };
-    return InnerSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-
-//# sourceMappingURL=InnerSubscriber.js.map
-
-
-/***/ }),
-/* 85 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = fromArray;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToArray__ = __webpack_require__(447);
-/** PURE_IMPORTS_START _Observable,_Subscription,_util_subscribeToArray PURE_IMPORTS_END */
-
-
-
-function fromArray(input, scheduler) {
-    if (!scheduler) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToArray__["a" /* subscribeToArray */])(input));
-    }
-    else {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var sub = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-            var i = 0;
-            sub.add(scheduler.schedule(function () {
-                if (i === input.length) {
-                    subscriber.complete();
-                    return;
-                }
-                subscriber.next(input[i++]);
-                if (!subscriber.closed) {
-                    sub.add(this.schedule());
-                }
-            }));
-            return sub;
-        });
-    }
-}
-//# sourceMappingURL=fromArray.js.map
-
-
-/***/ }),
-/* 86 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var asn1 = __webpack_require__(66);
-var crypto = __webpack_require__(11);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-
-var pkcs1 = __webpack_require__(327);
-var pkcs8 = __webpack_require__(157);
-var sshpriv = __webpack_require__(192);
-var rfc4253 = __webpack_require__(103);
-
-var errors = __webpack_require__(74);
-
-/*
- * For reading we support both PKCS#1 and PKCS#8. If we find a private key,
- * we just take the public component of it and use that.
- */
-function read(buf, options, forceType) {
-	var input = buf;
-	if (typeof (buf) !== 'string') {
-		assert.buffer(buf, 'buf');
-		buf = buf.toString('ascii');
-	}
-
-	var lines = buf.trim().split('\n');
-
-	var m = lines[0].match(/*JSSTYLED*/
-	    /[-]+[ ]*BEGIN ([A-Z0-9][A-Za-z0-9]+ )?(PUBLIC|PRIVATE) KEY[ ]*[-]+/);
-	assert.ok(m, 'invalid PEM header');
-
-	var m2 = lines[lines.length - 1].match(/*JSSTYLED*/
-	    /[-]+[ ]*END ([A-Z0-9][A-Za-z0-9]+ )?(PUBLIC|PRIVATE) KEY[ ]*[-]+/);
-	assert.ok(m2, 'invalid PEM footer');
-
-	/* Begin and end banners must match key type */
-	assert.equal(m[2], m2[2]);
-	var type = m[2].toLowerCase();
-
-	var alg;
-	if (m[1]) {
-		/* They also must match algorithms, if given */
-		assert.equal(m[1], m2[1], 'PEM header and footer mismatch');
-		alg = m[1].trim();
-	}
-
-	var headers = {};
-	while (true) {
-		lines = lines.slice(1);
-		m = lines[0].match(/*JSSTYLED*/
-		    /^([A-Za-z0-9-]+): (.+)$/);
-		if (!m)
-			break;
-		headers[m[1].toLowerCase()] = m[2];
-	}
-
-	var cipher, key, iv;
-	if (headers['proc-type']) {
-		var parts = headers['proc-type'].split(',');
-		if (parts[0] === '4' && parts[1] === 'ENCRYPTED') {
-			if (typeof (options.passphrase) === 'string') {
-				options.passphrase = Buffer.from(
-				    options.passphrase, 'utf-8');
-			}
-			if (!Buffer.isBuffer(options.passphrase)) {
-				throw (new errors.KeyEncryptedError(
-				    options.filename, 'PEM'));
-			} else {
-				parts = headers['dek-info'].split(',');
-				assert.ok(parts.length === 2);
-				cipher = parts[0].toLowerCase();
-				iv = Buffer.from(parts[1], 'hex');
-				key = utils.opensslKeyDeriv(cipher, iv,
-				    options.passphrase, 1).key;
-			}
-		}
-	}
-
-	/* Chop off the first and last lines */
-	lines = lines.slice(0, -1).join('');
-	buf = Buffer.from(lines, 'base64');
-
-	if (cipher && key && iv) {
-		var cipherStream = crypto.createDecipheriv(cipher, key, iv);
-		var chunk, chunks = [];
-		cipherStream.once('error', function (e) {
-			if (e.toString().indexOf('bad decrypt') !== -1) {
-				throw (new Error('Incorrect passphrase ' +
-				    'supplied, could not decrypt key'));
-			}
-			throw (e);
-		});
-		cipherStream.write(buf);
-		cipherStream.end();
-		while ((chunk = cipherStream.read()) !== null)
-			chunks.push(chunk);
-		buf = Buffer.concat(chunks);
-	}
-
-	/* The new OpenSSH internal format abuses PEM headers */
-	if (alg && alg.toLowerCase() === 'openssh')
-		return (sshpriv.readSSHPrivate(type, buf, options));
-	if (alg && alg.toLowerCase() === 'ssh2')
-		return (rfc4253.readType(type, buf, options));
-
-	var der = new asn1.BerReader(buf);
-	der.originalInput = input;
-
-	/*
-	 * All of the PEM file types start with a sequence tag, so chop it
-	 * off here
-	 */
-	der.readSequence();
-
-	/* PKCS#1 type keys name an algorithm in the banner explicitly */
-	if (alg) {
-		if (forceType)
-			assert.strictEqual(forceType, 'pkcs1');
-		return (pkcs1.readPkcs1(alg, type, der));
-	} else {
-		if (forceType)
-			assert.strictEqual(forceType, 'pkcs8');
-		return (pkcs8.readPkcs8(alg, type, der));
-	}
-}
-
-function write(key, options, type) {
-	assert.object(key);
-
-	var alg = {
-	    'ecdsa': 'EC',
-	    'rsa': 'RSA',
-	    'dsa': 'DSA',
-	    'ed25519': 'EdDSA'
-	}[key.type];
-	var header;
-
-	var der = new asn1.BerWriter();
-
-	if (PrivateKey.isPrivateKey(key)) {
-		if (type && type === 'pkcs8') {
-			header = 'PRIVATE KEY';
-			pkcs8.writePkcs8(der, key);
-		} else {
-			if (type)
-				assert.strictEqual(type, 'pkcs1');
-			header = alg + ' PRIVATE KEY';
-			pkcs1.writePkcs1(der, key);
-		}
-
-	} else if (Key.isKey(key)) {
-		if (type && type === 'pkcs1') {
-			header = alg + ' PUBLIC KEY';
-			pkcs1.writePkcs1(der, key);
-		} else {
-			if (type)
-				assert.strictEqual(type, 'pkcs8');
-			header = 'PUBLIC KEY';
-			pkcs8.writePkcs8(der, key);
-		}
-
-	} else {
-		throw (new Error('key is not a Key or PrivateKey'));
-	}
-
-	var tmp = der.buffer.toString('base64');
-	var len = tmp.length + (tmp.length / 64) +
-	    18 + 16 + header.length*2 + 10;
-	var buf = Buffer.alloc(len);
-	var o = 0;
-	o += buf.write('-----BEGIN ' + header + '-----\n', o);
-	for (var i = 0; i < tmp.length; ) {
-		var limit = i + 64;
-		if (limit > tmp.length)
-			limit = tmp.length;
-		o += buf.write(tmp.slice(i, limit), o);
-		buf[o++] = 10;
-		i = limit;
-	}
-	o += buf.write('-----END ' + header + '-----\n', o);
-
-	return (buf.slice(0, o));
-}
-
-
-/***/ }),
-/* 87 */
-/***/ (function(module, exports) {
-
-module.exports = require("http");
-
-/***/ }),
-/* 88 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SCOPE_SEPARATOR = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _npmResolver;
-
-function _load_npmResolver() {
-  return _npmResolver = _interopRequireDefault(__webpack_require__(217));
-}
-
-var _envReplace;
-
-function _load_envReplace() {
-  return _envReplace = _interopRequireDefault(__webpack_require__(577));
-}
-
-var _baseRegistry;
-
-function _load_baseRegistry() {
-  return _baseRegistry = _interopRequireDefault(__webpack_require__(558));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _path;
-
-function _load_path() {
-  return _path = __webpack_require__(377);
-}
-
-var _normalizeUrl;
-
-function _load_normalizeUrl() {
-  return _normalizeUrl = _interopRequireDefault(__webpack_require__(402));
-}
-
-var _userHomeDir;
-
-function _load_userHomeDir() {
-  return _userHomeDir = _interopRequireDefault(__webpack_require__(67));
-}
-
-var _userHomeDir2;
-
-function _load_userHomeDir2() {
-  return _userHomeDir2 = __webpack_require__(67);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _login;
-
-function _load_login() {
-  return _login = __webpack_require__(107);
-}
-
-var _path2;
-
-function _load_path2() {
-  return _path2 = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _url;
-
-function _load_url() {
-  return _url = _interopRequireDefault(__webpack_require__(24));
-}
-
-var _ini;
-
-function _load_ini() {
-  return _ini = _interopRequireDefault(__webpack_require__(684));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const DEFAULT_REGISTRY = 'https://registry.npmjs.org/';
-const REGEX_REGISTRY_ENFORCED_HTTPS = /^https?:\/\/([^\/]+\.)?(yarnpkg\.com|npmjs\.(org|com))(\/|$)/;
-const REGEX_REGISTRY_HTTP_PROTOCOL = /^https?:/i;
-const REGEX_REGISTRY_PREFIX = /^(https?:)?\/\//i;
-const REGEX_REGISTRY_SUFFIX = /registry\/?$/;
-
-const SCOPE_SEPARATOR = exports.SCOPE_SEPARATOR = '%2f';
-// All scoped package names are of the format `@scope%2fpkg` from the use of NpmRegistry.escapeName
-// `(?:^|\/)` Match either the start of the string or a `/` but don't capture
-// `[^\/?]+?` Match any character that is not '/' or '?' and capture, up until the first occurrence of:
-// `(?=%2f|\/)` Match SCOPE_SEPARATOR, the escaped '/', or a raw `/` and don't capture
-// The reason for matching a plain `/` is NPM registry being inconsistent about escaping `/` in
-// scoped package names: when you're fetching a tarball, it is not escaped, when you want info
-// about the package, it is escaped.
-const SCOPED_PKG_REGEXP = /(?:^|\/)(@[^\/?]+?)(?=%2f|\/)/;
-
-// TODO: Use the method from src/cli/commands/global.js for this instead
-function getGlobalPrefix() {
-  if (process.env.PREFIX) {
-    return process.env.PREFIX;
-  } else if (process.platform === 'win32') {
-    // c:\node\node.exe --> prefix=c:\node\
-    return (_path2 || _load_path2()).default.dirname(process.execPath);
-  } else {
-    // /usr/local/bin/node --> prefix=/usr/local
-    let prefix = (_path2 || _load_path2()).default.dirname((_path2 || _load_path2()).default.dirname(process.execPath));
-
-    // destdir only is respected on Unix
-    if (process.env.DESTDIR) {
-      prefix = (_path2 || _load_path2()).default.join(process.env.DESTDIR, prefix);
-    }
-
-    return prefix;
-  }
-}
-
-const PATH_CONFIG_OPTIONS = new Set(['cache', 'cafile', 'prefix', 'userconfig']);
-
-function isPathConfigOption(key) {
-  return PATH_CONFIG_OPTIONS.has(key);
-}
-
-function normalizePath(val) {
-  if (val === undefined) {
-    return undefined;
-  }
-
-  if (typeof val !== 'string') {
-    val = String(val);
-  }
-
-  return (0, (_path || _load_path()).resolveWithHome)(val);
-}
-
-function urlParts(requestUrl) {
-  const normalizedUrl = (0, (_normalizeUrl || _load_normalizeUrl()).default)(requestUrl);
-  const parsed = (_url || _load_url()).default.parse(normalizedUrl);
-  const host = parsed.host || '';
-  const path = parsed.path || '';
-  return { host, path };
-}
-
-class NpmRegistry extends (_baseRegistry || _load_baseRegistry()).default {
-  constructor(cwd, registries, requestManager, reporter, enableDefaultRc, extraneousRcFiles) {
-    super(cwd, registries, requestManager, reporter, enableDefaultRc, extraneousRcFiles);
-    this.folder = 'node_modules';
-  }
-
-  static escapeName(name) {
-    // scoped packages contain slashes and the npm registry expects them to be escaped
-    return name.replace('/', SCOPE_SEPARATOR);
-  }
-
-  isScopedPackage(packageIdent) {
-    return SCOPED_PKG_REGEXP.test(packageIdent);
-  }
-
-  getRequestUrl(registry, pathname) {
-    let resolved = pathname;
-
-    if (!REGEX_REGISTRY_PREFIX.test(pathname)) {
-      resolved = (_url || _load_url()).default.resolve((0, (_misc || _load_misc()).addSuffix)(registry, '/'), pathname);
-    }
-
-    if (REGEX_REGISTRY_ENFORCED_HTTPS.test(resolved)) {
-      resolved = resolved.replace(/^http:\/\//, 'https://');
-    }
-
-    return resolved;
-  }
-
-  isRequestToRegistry(requestUrl, registryUrl) {
-    const request = urlParts(requestUrl);
-    const registry = urlParts(registryUrl);
-    const customHostSuffix = this.getRegistryOrGlobalOption(registryUrl, 'custom-host-suffix');
-
-    const requestToRegistryHost = request.host === registry.host;
-    const requestToYarn = (_constants || _load_constants()).YARN_REGISTRY.includes(request.host) && DEFAULT_REGISTRY.includes(registry.host);
-    const requestToRegistryPath = request.path.startsWith(registry.path);
-    // For some registries, the package path does not prefix with the registry path
-    const customHostSuffixInUse = typeof customHostSuffix === 'string' && request.host.endsWith(customHostSuffix);
-
-    return (requestToRegistryHost || requestToYarn) && (requestToRegistryPath || customHostSuffixInUse);
-  }
-
-  request(pathname, opts = {}, packageName) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // packageName needs to be escaped when if it is passed
-      const packageIdent = packageName && NpmRegistry.escapeName(packageName) || pathname;
-      const registry = opts.registry || _this.getRegistry(packageIdent);
-      const requestUrl = _this.getRequestUrl(registry, pathname);
-
-      const alwaysAuth = _this.getRegistryOrGlobalOption(registry, 'always-auth');
-
-      const headers = (0, (_extends2 || _load_extends()).default)({
-        Accept:
-        // This is to use less bandwidth unless we really need to get the full response.
-        // See https://github.com/npm/npm-registry-client#requests
-        opts.unfiltered ? 'application/json' : 'application/vnd.npm.install-v1+json; q=1.0, application/json; q=0.8, */*'
-      }, opts.headers);
-
-      const isToRegistry = _this.isRequestToRegistry(requestUrl, registry) || _this.requestNeedsAuth(requestUrl);
-
-      // this.token must be checked to account for publish requests on non-scoped packages
-      if (_this.token || isToRegistry && (alwaysAuth || _this.isScopedPackage(packageIdent))) {
-        const authorization = _this.getAuth(packageIdent);
-        if (authorization) {
-          headers.authorization = authorization;
-        }
-      }
-
-      if (_this.otp) {
-        headers['npm-otp'] = _this.otp;
-      }
-
-      try {
-        return yield _this.requestManager.request({
-          url: requestUrl,
-          method: opts.method,
-          body: opts.body,
-          auth: opts.auth,
-          headers,
-          json: !opts.buffer,
-          buffer: opts.buffer,
-          process: opts.process,
-          gzip: true
-        });
-      } catch (error) {
-        if (error instanceof (_errors || _load_errors()).OneTimePasswordError) {
-          if (_this.otp) {
-            throw new (_errors || _load_errors()).MessageError(_this.reporter.lang('incorrectOneTimePassword'));
-          }
-
-          _this.reporter.info(_this.reporter.lang('twoFactorAuthenticationEnabled'));
-          _this.otp = yield (0, (_login || _load_login()).getOneTimePassword)(_this.reporter);
-
-          _this.requestManager.clearCache();
-
-          return _this.request(pathname, opts, packageName);
-        } else {
-          throw error;
-        }
-      }
-    })();
-  }
-
-  requestNeedsAuth(requestUrl) {
-    const config = this.config;
-    const requestParts = urlParts(requestUrl);
-    return !!Object.keys(config).find(option => {
-      const parts = option.split(':');
-      if (parts.length === 2 && parts[1] === '_authToken' || parts[1] === '_password') {
-        const registryParts = urlParts(parts[0]);
-        if (requestParts.host === registryParts.host && requestParts.path.startsWith(registryParts.path)) {
-          return true;
-        }
-      }
-      return false;
-    });
-  }
-
-  checkOutdated(config, name, range) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const escapedName = NpmRegistry.escapeName(name);
-      const req = yield _this2.request(escapedName, { unfiltered: true });
-      if (!req) {
-        throw new Error(`couldn't find ${name}`);
-      }
-
-      // By default use top level 'repository' and 'homepage' values
-      let repository = req.repository,
-          homepage = req.homepage;
-
-      const wantedPkg = yield (_npmResolver || _load_npmResolver()).default.findVersionInRegistryResponse(config, escapedName, range, req);
-
-      // But some local repositories like Verdaccio do not return 'repository' nor 'homepage'
-      // in top level data structure, so we fallback to wanted package manifest
-      if (!repository && !homepage) {
-        repository = wantedPkg.repository;
-        homepage = wantedPkg.homepage;
-      }
-
-      let latest = req['dist-tags'].latest;
-      // In certain cases, registries do not return a 'latest' tag.
-      if (!latest) {
-        latest = wantedPkg.version;
-      }
-
-      const url = homepage || repository && repository.url || '';
-
-      return {
-        latest,
-        wanted: wantedPkg.version,
-        url
-      };
-    })();
-  }
-
-  getPossibleConfigLocations(filename, reporter) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let possibles = [];
-
-      for (var _iterator = _this3.extraneousRcFiles.slice().reverse(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const rcFile = _ref;
-
-        possibles.push([false, (_path2 || _load_path2()).default.resolve(process.cwd(), rcFile)]);
-      }
-
-      if (_this3.enableDefaultRc) {
-        // npmrc --> ./.npmrc, ~/.npmrc, ${prefix}/etc/npmrc
-        const localfile = '.' + filename;
-        possibles = possibles.concat([[false, (_path2 || _load_path2()).default.join(_this3.cwd, localfile)], [true, _this3.config.userconfig || (_path2 || _load_path2()).default.join((_userHomeDir || _load_userHomeDir()).default, localfile)], [false, (_path2 || _load_path2()).default.join(getGlobalPrefix(), 'etc', filename)]]);
-
-        // When home directory for global install is different from where $HOME/npmrc is stored,
-        // E.g. /usr/local/share vs /root on linux machines, check the additional location
-        if ((_userHomeDir2 || _load_userHomeDir2()).home !== (_userHomeDir || _load_userHomeDir()).default) {
-          possibles.push([true, (_path2 || _load_path2()).default.join((_userHomeDir2 || _load_userHomeDir2()).home, localfile)]);
-        }
-
-        // npmrc --> ../.npmrc, ../../.npmrc, etc.
-        const foldersFromRootToCwd = (0, (_path || _load_path()).getPosixPath)(_this3.cwd).split('/');
-        while (foldersFromRootToCwd.length > 1) {
-          possibles.push([false, (_path2 || _load_path2()).default.join(foldersFromRootToCwd.join((_path2 || _load_path2()).default.sep), localfile)]);
-          foldersFromRootToCwd.pop();
-        }
-      }
-
-      const actuals = [];
-      for (var _iterator2 = possibles, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const _ref2 = _ref3;
-        const isHome = _ref2[0];
-        const loc = _ref2[1];
-
-        reporter.verbose(reporter.lang('configPossibleFile', loc));
-        if (yield (_fs || _load_fs()).exists(loc)) {
-          reporter.verbose(reporter.lang('configFileFound', loc));
-          actuals.push([isHome, loc, yield (_fs || _load_fs()).readFile(loc)]);
-        }
-      }
-
-      return actuals;
-    })();
-  }
-
-  static getConfigEnv(env = process.env) {
-    // To match NPM's behavior, HOME is always the user's home directory.
-    const overrideEnv = {
-      HOME: (_userHomeDir2 || _load_userHomeDir2()).home
-    };
-    return Object.assign({}, env, overrideEnv);
-  }
-
-  static normalizeConfig(config) {
-    const env = NpmRegistry.getConfigEnv();
-    config = (_baseRegistry || _load_baseRegistry()).default.normalizeConfig(config);
-
-    for (const key in config) {
-      config[key] = (0, (_envReplace || _load_envReplace()).default)(config[key], env);
-      if (isPathConfigOption(key)) {
-        config[key] = normalizePath(config[key]);
-      }
-    }
-
-    return config;
-  }
-
-  loadConfig() {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // docs: https://docs.npmjs.com/misc/config
-      _this4.mergeEnv('npm_config_');
-
-      for (var _iterator3 = yield _this4.getPossibleConfigLocations('npmrc', _this4.reporter), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref5;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref5 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref5 = _i3.value;
-        }
-
-        const _ref4 = _ref5;
-        const loc = _ref4[1];
-        const file = _ref4[2];
-
-        const config = NpmRegistry.normalizeConfig((_ini || _load_ini()).default.parse(file));
-
-        // normalize offline mirror path relative to the current npmrc
-        const offlineLoc = config['yarn-offline-mirror'];
-        // don't normalize if we already have a mirror path
-        if (!_this4.config['yarn-offline-mirror'] && offlineLoc) {
-          const mirrorLoc = config['yarn-offline-mirror'] = (_path2 || _load_path2()).default.resolve((_path2 || _load_path2()).default.dirname(loc), offlineLoc);
-          yield (_fs || _load_fs()).mkdirp(mirrorLoc);
-        }
-
-        _this4.config = Object.assign({}, config, _this4.config);
-      }
-    })();
-  }
-
-  getScope(packageIdent) {
-    const match = packageIdent.match(SCOPED_PKG_REGEXP);
-    return match && match[1] || '';
-  }
-
-  getRegistry(packageIdent) {
-    // Try extracting registry from the url, then scoped registry, and default registry
-    if (packageIdent.match(REGEX_REGISTRY_PREFIX)) {
-      const availableRegistries = this.getAvailableRegistries();
-      const registry = availableRegistries.find(registry => packageIdent.startsWith(registry));
-      if (registry) {
-        return String(registry);
-      }
-    }
-
-    var _arr = [this.getScope(packageIdent), ''];
-    for (var _i4 = 0; _i4 < _arr.length; _i4++) {
-      const scope = _arr[_i4];
-      const registry = this.getScopedOption(scope, 'registry') || this.registries.yarn.getScopedOption(scope, 'registry');
-      if (registry) {
-        return String(registry);
-      }
-    }
-
-    return DEFAULT_REGISTRY;
-  }
-
-  getAuthByRegistry(registry) {
-    // Check for bearer token.
-    const authToken = this.getRegistryOrGlobalOption(registry, '_authToken');
-    if (authToken) {
-      return `Bearer ${String(authToken)}`;
-    }
-
-    // Check for basic auth token.
-    const auth = this.getRegistryOrGlobalOption(registry, '_auth');
-    if (auth) {
-      return `Basic ${String(auth)}`;
-    }
-
-    // Check for basic username/password auth.
-    const username = this.getRegistryOrGlobalOption(registry, 'username');
-    const password = this.getRegistryOrGlobalOption(registry, '_password');
-    if (username && password) {
-      const pw = Buffer.from(String(password), 'base64').toString();
-      return 'Basic ' + Buffer.from(String(username) + ':' + pw).toString('base64');
-    }
-
-    return '';
-  }
-
-  getAuth(packageIdent) {
-    if (this.token) {
-      return this.token;
-    }
-
-    const baseRegistry = this.getRegistry(packageIdent);
-    const registries = [baseRegistry];
-
-    // If sending a request to the Yarn registry, we must also send it the auth token for the npm registry
-    if (baseRegistry === (_constants || _load_constants()).YARN_REGISTRY) {
-      registries.push(DEFAULT_REGISTRY);
-    }
-
-    for (var _iterator4 = registries, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref6;
-
-      if (_isArray4) {
-        if (_i5 >= _iterator4.length) break;
-        _ref6 = _iterator4[_i5++];
-      } else {
-        _i5 = _iterator4.next();
-        if (_i5.done) break;
-        _ref6 = _i5.value;
-      }
-
-      const registry = _ref6;
-
-      const auth = this.getAuthByRegistry(registry);
-
-      if (auth) {
-        return auth;
-      }
-    }
-
-    return '';
-  }
-
-  getScopedOption(scope, option) {
-    return this.getOption(scope + (scope ? ':' : '') + option);
-  }
-
-  getRegistryOption(registry, option) {
-    const pre = REGEX_REGISTRY_HTTP_PROTOCOL;
-    const suf = REGEX_REGISTRY_SUFFIX;
-
-    // When registry is used config scope, the trailing '/' is required
-    const reg = (0, (_misc || _load_misc()).addSuffix)(registry, '/');
-
-    // 1st attempt, try to get option for the given registry URL
-    // 2nd attempt, remove the 'https?:' prefix of the registry URL
-    // 3nd attempt, remove the 'registry/?' suffix of the registry URL
-    return this.getScopedOption(reg, option) || pre.test(reg) && this.getRegistryOption(reg.replace(pre, ''), option) || suf.test(reg) && this.getRegistryOption(reg.replace(suf, ''), option);
-  }
-
-  getRegistryOrGlobalOption(registry, option) {
-    return this.getRegistryOption(registry, option) || this.getOption(option);
-  }
-}
-exports.default = NpmRegistry;
-NpmRegistry.filename = 'package.json';
-
-/***/ }),
-/* 89 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _baseResolver;
-
-function _load_baseResolver() {
-  return _baseResolver = _interopRequireDefault(__webpack_require__(123));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class ExoticResolver extends (_baseResolver || _load_baseResolver()).default {
-
-  static isVersion(pattern) {
-    const proto = this.protocol;
-    if (proto) {
-      return pattern.startsWith(`${proto}:`);
-    } else {
-      throw new Error('No protocol specified');
-    }
-  }
-}
-exports.default = ExoticResolver;
-
-/***/ }),
-/* 90 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-const semver = __webpack_require__(22);
-
-class WorkspaceLayout {
-  constructor(workspaces, config) {
-    this.workspaces = workspaces;
-    this.config = config;
-  }
-
-  getWorkspaceManifest(key) {
-    return this.workspaces[key];
-  }
-
-  getManifestByPattern(pattern) {
-    var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(pattern);
-
-    const name = _normalizePattern.name,
-          range = _normalizePattern.range;
-
-    const workspace = this.getWorkspaceManifest(name);
-    if (!workspace || !semver.satisfies(workspace.manifest.version, range, this.config.looseSemver)) {
-      return null;
-    }
-    return workspace;
-  }
-}
-exports.default = WorkspaceLayout;
-
-/***/ }),
-/* 91 */
-/***/ (function(module, exports) {
-
-// 7.2.1 RequireObjectCoercible(argument)
-module.exports = function (it) {
-  if (it == undefined) throw TypeError("Can't call method on  " + it);
-  return it;
-};
-
-
-/***/ }),
-/* 92 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var isObject = __webpack_require__(52);
-var document = __webpack_require__(17).document;
-// typeof document.createElement is 'object' in old IE
-var is = isObject(document) && isObject(document.createElement);
-module.exports = function (it) {
-  return is ? document.createElement(it) : {};
-};
-
-
-/***/ }),
-/* 93 */
-/***/ (function(module, exports) {
-
-module.exports = true;
-
-
-/***/ }),
-/* 94 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-// 25.4.1.5 NewPromiseCapability(C)
-var aFunction = __webpack_require__(68);
-
-function PromiseCapability(C) {
-  var resolve, reject;
-  this.promise = new C(function ($$resolve, $$reject) {
-    if (resolve !== undefined || reject !== undefined) throw TypeError('Bad Promise constructor');
-    resolve = $$resolve;
-    reject = $$reject;
-  });
-  this.resolve = aFunction(resolve);
-  this.reject = aFunction(reject);
-}
-
-module.exports.f = function (C) {
-  return new PromiseCapability(C);
-};
-
-
-/***/ }),
-/* 95 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var def = __webpack_require__(72).f;
-var has = __webpack_require__(71);
-var TAG = __webpack_require__(20)('toStringTag');
-
-module.exports = function (it, tag, stat) {
-  if (it && !has(it = stat ? it : it.prototype, TAG)) def(it, TAG, { configurable: true, value: tag });
-};
-
-
-/***/ }),
-/* 96 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var shared = __webpack_require__(133)('keys');
-var uid = __webpack_require__(137);
-module.exports = function (key) {
-  return shared[key] || (shared[key] = uid(key));
-};
-
-
-/***/ }),
-/* 97 */
-/***/ (function(module, exports) {
-
-// 7.1.4 ToInteger
-var ceil = Math.ceil;
-var floor = Math.floor;
-module.exports = function (it) {
-  return isNaN(it = +it) ? 0 : (it > 0 ? floor : ceil)(it);
-};
-
-
-/***/ }),
-/* 98 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// to indexed object, toObject with fallback for non-array-like ES3 strings
-var IObject = __webpack_require__(170);
-var defined = __webpack_require__(91);
-module.exports = function (it) {
-  return IObject(defined(it));
-};
-
-
-/***/ }),
-/* 99 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Approach:
-//
-// 1. Get the minimatch set
-// 2. For each pattern in the set, PROCESS(pattern, false)
-// 3. Store matches per-set, then uniq them
-//
-// PROCESS(pattern, inGlobStar)
-// Get the first [n] items from pattern that are all strings
-// Join these together.  This is PREFIX.
-//   If there is no more remaining, then stat(PREFIX) and
-//   add to matches if it succeeds.  END.
-//
-// If inGlobStar and PREFIX is symlink and points to dir
-//   set ENTRIES = []
-// else readdir(PREFIX) as ENTRIES
-//   If fail, END
-//
-// with ENTRIES
-//   If pattern[n] is GLOBSTAR
-//     // handle the case where the globstar match is empty
-//     // by pruning it out, and testing the resulting pattern
-//     PROCESS(pattern[0..n] + pattern[n+1 .. $], false)
-//     // handle other cases.
-//     for ENTRY in ENTRIES (not dotfiles)
-//       // attach globstar + tail onto the entry
-//       // Mark that this entry is a globstar match
-//       PROCESS(pattern[0..n] + ENTRY + pattern[n .. $], true)
-//
-//   else // not globstar
-//     for ENTRY in ENTRIES (not dotfiles, unless pattern[n] is dot)
-//       Test ENTRY against pattern[n]
-//       If fails, continue
-//       If passes, PROCESS(pattern[0..n] + item + pattern[n+1 .. $])
-//
-// Caveat:
-//   Cache all stats and readdirs results to minimize syscall.  Since all
-//   we ever care about is existence and directory-ness, we can just keep
-//   `true` for files, and [children,...] for directories, or `false` for
-//   things that don't exist.
-
-module.exports = glob
-
-var fs = __webpack_require__(5)
-var rp = __webpack_require__(140)
-var minimatch = __webpack_require__(82)
-var Minimatch = minimatch.Minimatch
-var inherits = __webpack_require__(61)
-var EE = __webpack_require__(77).EventEmitter
-var path = __webpack_require__(0)
-var assert = __webpack_require__(28)
-var isAbsolute = __webpack_require__(101)
-var globSync = __webpack_require__(272)
-var common = __webpack_require__(141)
-var alphasort = common.alphasort
-var alphasorti = common.alphasorti
-var setopts = common.setopts
-var ownProp = common.ownProp
-var inflight = __webpack_require__(274)
-var util = __webpack_require__(3)
-var childrenIgnored = common.childrenIgnored
-var isIgnored = common.isIgnored
-
-var once = __webpack_require__(83)
-
-function glob (pattern, options, cb) {
-  if (typeof options === 'function') cb = options, options = {}
-  if (!options) options = {}
-
-  if (options.sync) {
-    if (cb)
-      throw new TypeError('callback provided to sync glob')
-    return globSync(pattern, options)
-  }
-
-  return new Glob(pattern, options, cb)
-}
-
-glob.sync = globSync
-var GlobSync = glob.GlobSync = globSync.GlobSync
-
-// old api surface
-glob.glob = glob
-
-function extend (origin, add) {
-  if (add === null || typeof add !== 'object') {
-    return origin
-  }
-
-  var keys = Object.keys(add)
-  var i = keys.length
-  while (i--) {
-    origin[keys[i]] = add[keys[i]]
-  }
-  return origin
-}
-
-glob.hasMagic = function (pattern, options_) {
-  var options = extend({}, options_)
-  options.noprocess = true
-
-  var g = new Glob(pattern, options)
-  var set = g.minimatch.set
-
-  if (!pattern)
-    return false
-
-  if (set.length > 1)
-    return true
-
-  for (var j = 0; j < set[0].length; j++) {
-    if (typeof set[0][j] !== 'string')
-      return true
-  }
-
-  return false
-}
-
-glob.Glob = Glob
-inherits(Glob, EE)
-function Glob (pattern, options, cb) {
-  if (typeof options === 'function') {
-    cb = options
-    options = null
-  }
-
-  if (options && options.sync) {
-    if (cb)
-      throw new TypeError('callback provided to sync glob')
-    return new GlobSync(pattern, options)
-  }
-
-  if (!(this instanceof Glob))
-    return new Glob(pattern, options, cb)
-
-  setopts(this, pattern, options)
-  this._didRealPath = false
-
-  // process each pattern in the minimatch set
-  var n = this.minimatch.set.length
-
-  // The matches are stored as {<filename>: true,...} so that
-  // duplicates are automagically pruned.
-  // Later, we do an Object.keys() on these.
-  // Keep them as a list so we can fill in when nonull is set.
-  this.matches = new Array(n)
-
-  if (typeof cb === 'function') {
-    cb = once(cb)
-    this.on('error', cb)
-    this.on('end', function (matches) {
-      cb(null, matches)
-    })
-  }
-
-  var self = this
-  this._processing = 0
-
-  this._emitQueue = []
-  this._processQueue = []
-  this.paused = false
-
-  if (this.noprocess)
-    return this
-
-  if (n === 0)
-    return done()
-
-  var sync = true
-  for (var i = 0; i < n; i ++) {
-    this._process(this.minimatch.set[i], i, false, done)
-  }
-  sync = false
-
-  function done () {
-    --self._processing
-    if (self._processing <= 0) {
-      if (sync) {
-        process.nextTick(function () {
-          self._finish()
-        })
-      } else {
-        self._finish()
-      }
-    }
-  }
-}
-
-Glob.prototype._finish = function () {
-  assert(this instanceof Glob)
-  if (this.aborted)
-    return
-
-  if (this.realpath && !this._didRealpath)
-    return this._realpath()
-
-  common.finish(this)
-  this.emit('end', this.found)
-}
-
-Glob.prototype._realpath = function () {
-  if (this._didRealpath)
-    return
-
-  this._didRealpath = true
-
-  var n = this.matches.length
-  if (n === 0)
-    return this._finish()
-
-  var self = this
-  for (var i = 0; i < this.matches.length; i++)
-    this._realpathSet(i, next)
-
-  function next () {
-    if (--n === 0)
-      self._finish()
-  }
-}
-
-Glob.prototype._realpathSet = function (index, cb) {
-  var matchset = this.matches[index]
-  if (!matchset)
-    return cb()
-
-  var found = Object.keys(matchset)
-  var self = this
-  var n = found.length
-
-  if (n === 0)
-    return cb()
-
-  var set = this.matches[index] = Object.create(null)
-  found.forEach(function (p, i) {
-    // If there's a problem with the stat, then it means that
-    // one or more of the links in the realpath couldn't be
-    // resolved.  just return the abs value in that case.
-    p = self._makeAbs(p)
-    rp.realpath(p, self.realpathCache, function (er, real) {
-      if (!er)
-        set[real] = true
-      else if (er.syscall === 'stat')
-        set[p] = true
-      else
-        self.emit('error', er) // srsly wtf right here
-
-      if (--n === 0) {
-        self.matches[index] = set
-        cb()
-      }
-    })
-  })
-}
-
-Glob.prototype._mark = function (p) {
-  return common.mark(this, p)
-}
-
-Glob.prototype._makeAbs = function (f) {
-  return common.makeAbs(this, f)
-}
-
-Glob.prototype.abort = function () {
-  this.aborted = true
-  this.emit('abort')
-}
-
-Glob.prototype.pause = function () {
-  if (!this.paused) {
-    this.paused = true
-    this.emit('pause')
-  }
-}
-
-Glob.prototype.resume = function () {
-  if (this.paused) {
-    this.emit('resume')
-    this.paused = false
-    if (this._emitQueue.length) {
-      var eq = this._emitQueue.slice(0)
-      this._emitQueue.length = 0
-      for (var i = 0; i < eq.length; i ++) {
-        var e = eq[i]
-        this._emitMatch(e[0], e[1])
-      }
-    }
-    if (this._processQueue.length) {
-      var pq = this._processQueue.slice(0)
-      this._processQueue.length = 0
-      for (var i = 0; i < pq.length; i ++) {
-        var p = pq[i]
-        this._processing--
-        this._process(p[0], p[1], p[2], p[3])
-      }
-    }
-  }
-}
-
-Glob.prototype._process = function (pattern, index, inGlobStar, cb) {
-  assert(this instanceof Glob)
-  assert(typeof cb === 'function')
-
-  if (this.aborted)
-    return
-
-  this._processing++
-  if (this.paused) {
-    this._processQueue.push([pattern, index, inGlobStar, cb])
-    return
-  }
-
-  //console.error('PROCESS %d', this._processing, pattern)
-
-  // Get the first [n] parts of pattern that are all strings.
-  var n = 0
-  while (typeof pattern[n] === 'string') {
-    n ++
-  }
-  // now n is the index of the first one that is *not* a string.
-
-  // see if there's anything else
-  var prefix
-  switch (n) {
-    // if not, then this is rather simple
-    case pattern.length:
-      this._processSimple(pattern.join('/'), index, cb)
-      return
-
-    case 0:
-      // pattern *starts* with some non-trivial item.
-      // going to readdir(cwd), but not include the prefix in matches.
-      prefix = null
-      break
-
-    default:
-      // pattern has some string bits in the front.
-      // whatever it starts with, whether that's 'absolute' like /foo/bar,
-      // or 'relative' like '../baz'
-      prefix = pattern.slice(0, n).join('/')
-      break
-  }
-
-  var remain = pattern.slice(n)
-
-  // get the list of entries.
-  var read
-  if (prefix === null)
-    read = '.'
-  else if (isAbsolute(prefix) || isAbsolute(pattern.join('/'))) {
-    if (!prefix || !isAbsolute(prefix))
-      prefix = '/' + prefix
-    read = prefix
-  } else
-    read = prefix
-
-  var abs = this._makeAbs(read)
-
-  //if ignored, skip _processing
-  if (childrenIgnored(this, read))
-    return cb()
-
-  var isGlobStar = remain[0] === minimatch.GLOBSTAR
-  if (isGlobStar)
-    this._processGlobStar(prefix, read, abs, remain, index, inGlobStar, cb)
-  else
-    this._processReaddir(prefix, read, abs, remain, index, inGlobStar, cb)
-}
-
-Glob.prototype._processReaddir = function (prefix, read, abs, remain, index, inGlobStar, cb) {
-  var self = this
-  this._readdir(abs, inGlobStar, function (er, entries) {
-    return self._processReaddir2(prefix, read, abs, remain, index, inGlobStar, entries, cb)
-  })
-}
-
-Glob.prototype._processReaddir2 = function (prefix, read, abs, remain, index, inGlobStar, entries, cb) {
-
-  // if the abs isn't a dir, then nothing can match!
-  if (!entries)
-    return cb()
-
-  // It will only match dot entries if it starts with a dot, or if
-  // dot is set.  Stuff like @(.foo|.bar) isn't allowed.
-  var pn = remain[0]
-  var negate = !!this.minimatch.negate
-  var rawGlob = pn._glob
-  var dotOk = this.dot || rawGlob.charAt(0) === '.'
-
-  var matchedEntries = []
-  for (var i = 0; i < entries.length; i++) {
-    var e = entries[i]
-    if (e.charAt(0) !== '.' || dotOk) {
-      var m
-      if (negate && !prefix) {
-        m = !e.match(pn)
-      } else {
-        m = e.match(pn)
-      }
-      if (m)
-        matchedEntries.push(e)
-    }
-  }
-
-  //console.error('prd2', prefix, entries, remain[0]._glob, matchedEntries)
-
-  var len = matchedEntries.length
-  // If there are no matched entries, then nothing matches.
-  if (len === 0)
-    return cb()
-
-  // if this is the last remaining pattern bit, then no need for
-  // an additional stat *unless* the user has specified mark or
-  // stat explicitly.  We know they exist, since readdir returned
-  // them.
-
-  if (remain.length === 1 && !this.mark && !this.stat) {
-    if (!this.matches[index])
-      this.matches[index] = Object.create(null)
-
-    for (var i = 0; i < len; i ++) {
-      var e = matchedEntries[i]
-      if (prefix) {
-        if (prefix !== '/')
-          e = prefix + '/' + e
-        else
-          e = prefix + e
-      }
-
-      if (e.charAt(0) === '/' && !this.nomount) {
-        e = path.join(this.root, e)
-      }
-      this._emitMatch(index, e)
-    }
-    // This was the last one, and no stats were needed
-    return cb()
-  }
-
-  // now test all matched entries as stand-ins for that part
-  // of the pattern.
-  remain.shift()
-  for (var i = 0; i < len; i ++) {
-    var e = matchedEntries[i]
-    var newPattern
-    if (prefix) {
-      if (prefix !== '/')
-        e = prefix + '/' + e
-      else
-        e = prefix + e
-    }
-    this._process([e].concat(remain), index, inGlobStar, cb)
-  }
-  cb()
-}
-
-Glob.prototype._emitMatch = function (index, e) {
-  if (this.aborted)
-    return
-
-  if (isIgnored(this, e))
-    return
-
-  if (this.paused) {
-    this._emitQueue.push([index, e])
-    return
-  }
-
-  var abs = isAbsolute(e) ? e : this._makeAbs(e)
-
-  if (this.mark)
-    e = this._mark(e)
-
-  if (this.absolute)
-    e = abs
-
-  if (this.matches[index][e])
-    return
-
-  if (this.nodir) {
-    var c = this.cache[abs]
-    if (c === 'DIR' || Array.isArray(c))
-      return
-  }
-
-  this.matches[index][e] = true
-
-  var st = this.statCache[abs]
-  if (st)
-    this.emit('stat', e, st)
-
-  this.emit('match', e)
-}
-
-Glob.prototype._readdirInGlobStar = function (abs, cb) {
-  if (this.aborted)
-    return
-
-  // follow all symlinked directories forever
-  // just proceed as if this is a non-globstar situation
-  if (this.follow)
-    return this._readdir(abs, false, cb)
-
-  var lstatkey = 'lstat\0' + abs
-  var self = this
-  var lstatcb = inflight(lstatkey, lstatcb_)
-
-  if (lstatcb)
-    fs.lstat(abs, lstatcb)
-
-  function lstatcb_ (er, lstat) {
-    if (er && er.code === 'ENOENT')
-      return cb()
-
-    var isSym = lstat && lstat.isSymbolicLink()
-    self.symlinks[abs] = isSym
-
-    // If it's not a symlink or a dir, then it's definitely a regular file.
-    // don't bother doing a readdir in that case.
-    if (!isSym && lstat && !lstat.isDirectory()) {
-      self.cache[abs] = 'FILE'
-      cb()
-    } else
-      self._readdir(abs, false, cb)
-  }
-}
-
-Glob.prototype._readdir = function (abs, inGlobStar, cb) {
-  if (this.aborted)
-    return
-
-  cb = inflight('readdir\0'+abs+'\0'+inGlobStar, cb)
-  if (!cb)
-    return
-
-  //console.error('RD %j %j', +inGlobStar, abs)
-  if (inGlobStar && !ownProp(this.symlinks, abs))
-    return this._readdirInGlobStar(abs, cb)
-
-  if (ownProp(this.cache, abs)) {
-    var c = this.cache[abs]
-    if (!c || c === 'FILE')
-      return cb()
-
-    if (Array.isArray(c))
-      return cb(null, c)
-  }
-
-  var self = this
-  fs.readdir(abs, readdirCb(this, abs, cb))
-}
-
-function readdirCb (self, abs, cb) {
-  return function (er, entries) {
-    if (er)
-      self._readdirError(abs, er, cb)
-    else
-      self._readdirEntries(abs, entries, cb)
-  }
-}
-
-Glob.prototype._readdirEntries = function (abs, entries, cb) {
-  if (this.aborted)
-    return
-
-  // if we haven't asked to stat everything, then just
-  // assume that everything in there exists, so we can avoid
-  // having to stat it a second time.
-  if (!this.mark && !this.stat) {
-    for (var i = 0; i < entries.length; i ++) {
-      var e = entries[i]
-      if (abs === '/')
-        e = abs + e
-      else
-        e = abs + '/' + e
-      this.cache[e] = true
-    }
-  }
-
-  this.cache[abs] = entries
-  return cb(null, entries)
-}
-
-Glob.prototype._readdirError = function (f, er, cb) {
-  if (this.aborted)
-    return
-
-  // handle errors, and cache the information
-  switch (er.code) {
-    case 'ENOTSUP': // https://github.com/isaacs/node-glob/issues/205
-    case 'ENOTDIR': // totally normal. means it *does* exist.
-      var abs = this._makeAbs(f)
-      this.cache[abs] = 'FILE'
-      if (abs === this.cwdAbs) {
-        var error = new Error(er.code + ' invalid cwd ' + this.cwd)
-        error.path = this.cwd
-        error.code = er.code
-        this.emit('error', error)
-        this.abort()
-      }
-      break
-
-    case 'ENOENT': // not terribly unusual
-    case 'ELOOP':
-    case 'ENAMETOOLONG':
-    case 'UNKNOWN':
-      this.cache[this._makeAbs(f)] = false
-      break
-
-    default: // some unusual error.  Treat as failure.
-      this.cache[this._makeAbs(f)] = false
-      if (this.strict) {
-        this.emit('error', er)
-        // If the error is handled, then we abort
-        // if not, we threw out of here
-        this.abort()
-      }
-      if (!this.silent)
-        console.error('glob error', er)
-      break
-  }
-
-  return cb()
-}
-
-Glob.prototype._processGlobStar = function (prefix, read, abs, remain, index, inGlobStar, cb) {
-  var self = this
-  this._readdir(abs, inGlobStar, function (er, entries) {
-    self._processGlobStar2(prefix, read, abs, remain, index, inGlobStar, entries, cb)
-  })
-}
-
-
-Glob.prototype._processGlobStar2 = function (prefix, read, abs, remain, index, inGlobStar, entries, cb) {
-  //console.error('pgs2', prefix, remain[0], entries)
-
-  // no entries means not a dir, so it can never have matches
-  // foo.txt/** doesn't match foo.txt
-  if (!entries)
-    return cb()
-
-  // test without the globstar, and with every child both below
-  // and replacing the globstar.
-  var remainWithoutGlobStar = remain.slice(1)
-  var gspref = prefix ? [ prefix ] : []
-  var noGlobStar = gspref.concat(remainWithoutGlobStar)
-
-  // the noGlobStar pattern exits the inGlobStar state
-  this._process(noGlobStar, index, false, cb)
-
-  var isSym = this.symlinks[abs]
-  var len = entries.length
-
-  // If it's a symlink, and we're in a globstar, then stop
-  if (isSym && inGlobStar)
-    return cb()
-
-  for (var i = 0; i < len; i++) {
-    var e = entries[i]
-    if (e.charAt(0) === '.' && !this.dot)
-      continue
-
-    // these two cases enter the inGlobStar state
-    var instead = gspref.concat(entries[i], remainWithoutGlobStar)
-    this._process(instead, index, true, cb)
-
-    var below = gspref.concat(entries[i], remain)
-    this._process(below, index, true, cb)
-  }
-
-  cb()
-}
-
-Glob.prototype._processSimple = function (prefix, index, cb) {
-  // XXX review this.  Shouldn't it be doing the mounting etc
-  // before doing stat?  kinda weird?
-  var self = this
-  this._stat(prefix, function (er, exists) {
-    self._processSimple2(prefix, index, er, exists, cb)
-  })
-}
-Glob.prototype._processSimple2 = function (prefix, index, er, exists, cb) {
-
-  //console.error('ps2', prefix, exists)
-
-  if (!this.matches[index])
-    this.matches[index] = Object.create(null)
-
-  // If it doesn't exist, then just mark the lack of results
-  if (!exists)
-    return cb()
-
-  if (prefix && isAbsolute(prefix) && !this.nomount) {
-    var trail = /[\/\\]$/.test(prefix)
-    if (prefix.charAt(0) === '/') {
-      prefix = path.join(this.root, prefix)
-    } else {
-      prefix = path.resolve(this.root, prefix)
-      if (trail)
-        prefix += '/'
-    }
-  }
-
-  if (process.platform === 'win32')
-    prefix = prefix.replace(/\\/g, '/')
-
-  // Mark this as a match
-  this._emitMatch(index, prefix)
-  cb()
-}
-
-// Returns either 'DIR', 'FILE', or false
-Glob.prototype._stat = function (f, cb) {
-  var abs = this._makeAbs(f)
-  var needDir = f.slice(-1) === '/'
-
-  if (f.length > this.maxLength)
-    return cb()
-
-  if (!this.stat && ownProp(this.cache, abs)) {
-    var c = this.cache[abs]
-
-    if (Array.isArray(c))
-      c = 'DIR'
-
-    // It exists, but maybe not how we need it
-    if (!needDir || c === 'DIR')
-      return cb(null, c)
-
-    if (needDir && c === 'FILE')
-      return cb()
-
-    // otherwise we have to stat, because maybe c=true
-    // if we know it exists, but not what it is.
-  }
-
-  var exists
-  var stat = this.statCache[abs]
-  if (stat !== undefined) {
-    if (stat === false)
-      return cb(null, stat)
-    else {
-      var type = stat.isDirectory() ? 'DIR' : 'FILE'
-      if (needDir && type === 'FILE')
-        return cb()
-      else
-        return cb(null, type, stat)
-    }
-  }
-
-  var self = this
-  var statcb = inflight('stat\0' + abs, lstatcb_)
-  if (statcb)
-    fs.lstat(abs, statcb)
-
-  function lstatcb_ (er, lstat) {
-    if (lstat && lstat.isSymbolicLink()) {
-      // If it's a symlink, then treat it as the target, unless
-      // the target does not exist, then treat it as a file.
-      return fs.stat(abs, function (er, stat) {
-        if (er)
-          self._stat2(f, abs, null, lstat, cb)
-        else
-          self._stat2(f, abs, er, stat, cb)
-      })
-    } else {
-      self._stat2(f, abs, er, lstat, cb)
-    }
-  }
-}
-
-Glob.prototype._stat2 = function (f, abs, er, stat, cb) {
-  if (er && (er.code === 'ENOENT' || er.code === 'ENOTDIR')) {
-    this.statCache[abs] = false
-    return cb()
-  }
-
-  var needDir = f.slice(-1) === '/'
-  this.statCache[abs] = stat
-
-  if (abs.slice(-1) === '/' && stat && !stat.isDirectory())
-    return cb(null, false, stat)
-
-  var c = true
-  if (stat)
-    c = stat.isDirectory() ? 'DIR' : 'FILE'
-  this.cache[abs] = this.cache[abs] || c
-
-  if (needDir && c === 'FILE')
-    return cb()
-
-  return cb(null, c, stat)
-}
-
-
-/***/ }),
-/* 100 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Standard YAML's Failsafe schema.
-// http://www.yaml.org/spec/1.2/spec.html#id2802346
-
-
-
-
-
-var Schema = __webpack_require__(44);
-
-
-module.exports = new Schema({
-  explicit: [
-    __webpack_require__(298),
-    __webpack_require__(296),
-    __webpack_require__(291)
-  ]
-});
-
-
-/***/ }),
-/* 101 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-function posix(path) {
-	return path.charAt(0) === '/';
-}
-
-function win32(path) {
-	// https://github.com/nodejs/node/blob/b3fcc245fb25539909ef1d5eaa01dbf92e168633/lib/path.js#L56
-	var splitDeviceRe = /^([a-zA-Z]:|[\\\/]{2}[^\\\/]+[\\\/]+[^\\\/]+)?([\\\/])?([\s\S]*?)$/;
-	var result = splitDeviceRe.exec(path);
-	var device = result[1] || '';
-	var isUnc = Boolean(device && device.charAt(1) !== ':');
-
-	// UNC paths are always absolute
-	return Boolean(result[2] || isUnc);
-}
-
-module.exports = process.platform === 'win32' ? win32 : posix;
-module.exports.posix = posix;
-module.exports.win32 = win32;
-
-
-/***/ }),
-/* 102 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Stream = __webpack_require__(23);
-if (process.env.READABLE_STREAM === 'disable' && Stream) {
-  module.exports = Stream;
-  exports = module.exports = Stream.Readable;
-  exports.Readable = Stream.Readable;
-  exports.Writable = Stream.Writable;
-  exports.Duplex = Stream.Duplex;
-  exports.Transform = Stream.Transform;
-  exports.PassThrough = Stream.PassThrough;
-  exports.Stream = Stream;
-} else {
-  exports = module.exports = __webpack_require__(406);
-  exports.Stream = Stream || exports;
-  exports.Readable = exports;
-  exports.Writable = __webpack_require__(408);
-  exports.Duplex = __webpack_require__(115);
-  exports.Transform = __webpack_require__(407);
-  exports.PassThrough = __webpack_require__(792);
-}
-
-
-/***/ }),
-/* 103 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read.bind(undefined, false, undefined),
-	readType: read.bind(undefined, false),
-	write: write,
-	/* semi-private api, used by sshpk-agent */
-	readPartial: read.bind(undefined, true),
-
-	/* shared with ssh format */
-	readInternal: read,
-	keyTypeToAlg: keyTypeToAlg,
-	algToKeyType: algToKeyType
-};
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var SSHBuffer = __webpack_require__(159);
-
-function algToKeyType(alg) {
-	assert.string(alg);
-	if (alg === 'ssh-dss')
-		return ('dsa');
-	else if (alg === 'ssh-rsa')
-		return ('rsa');
-	else if (alg === 'ssh-ed25519')
-		return ('ed25519');
-	else if (alg === 'ssh-curve25519')
-		return ('curve25519');
-	else if (alg.match(/^ecdsa-sha2-/))
-		return ('ecdsa');
-	else
-		throw (new Error('Unknown algorithm ' + alg));
-}
-
-function keyTypeToAlg(key) {
-	assert.object(key);
-	if (key.type === 'dsa')
-		return ('ssh-dss');
-	else if (key.type === 'rsa')
-		return ('ssh-rsa');
-	else if (key.type === 'ed25519')
-		return ('ssh-ed25519');
-	else if (key.type === 'curve25519')
-		return ('ssh-curve25519');
-	else if (key.type === 'ecdsa')
-		return ('ecdsa-sha2-' + key.part.curve.data.toString());
-	else
-		throw (new Error('Unknown key type ' + key.type));
-}
-
-function read(partial, type, buf, options) {
-	if (typeof (buf) === 'string')
-		buf = Buffer.from(buf);
-	assert.buffer(buf, 'buf');
-
-	var key = {};
-
-	var parts = key.parts = [];
-	var sshbuf = new SSHBuffer({buffer: buf});
-
-	var alg = sshbuf.readString();
-	assert.ok(!sshbuf.atEnd(), 'key must have at least one part');
-
-	key.type = algToKeyType(alg);
-
-	var partCount = algs.info[key.type].parts.length;
-	if (type && type === 'private')
-		partCount = algs.privInfo[key.type].parts.length;
-
-	while (!sshbuf.atEnd() && parts.length < partCount)
-		parts.push(sshbuf.readPart());
-	while (!partial && !sshbuf.atEnd())
-		parts.push(sshbuf.readPart());
-
-	assert.ok(parts.length >= 1,
-	    'key must have at least one part');
-	assert.ok(partial || sshbuf.atEnd(),
-	    'leftover bytes at end of key');
-
-	var Constructor = Key;
-	var algInfo = algs.info[key.type];
-	if (type === 'private' || algInfo.parts.length !== parts.length) {
-		algInfo = algs.privInfo[key.type];
-		Constructor = PrivateKey;
-	}
-	assert.strictEqual(algInfo.parts.length, parts.length);
-
-	if (key.type === 'ecdsa') {
-		var res = /^ecdsa-sha2-(.+)$/.exec(alg);
-		assert.ok(res !== null);
-		assert.strictEqual(res[1], parts[0].data.toString());
-	}
-
-	var normalized = true;
-	for (var i = 0; i < algInfo.parts.length; ++i) {
-		var p = parts[i];
-		p.name = algInfo.parts[i];
-		/*
-		 * OpenSSH stores ed25519 "private" keys as seed + public key
-		 * concat'd together (k followed by A). We want to keep them
-		 * separate for other formats that don't do this.
-		 */
-		if (key.type === 'ed25519' && p.name === 'k')
-			p.data = p.data.slice(0, 32);
-
-		if (p.name !== 'curve' && algInfo.normalize !== false) {
-			var nd;
-			if (key.type === 'ed25519') {
-				nd = utils.zeroPadToLength(p.data, 32);
-			} else {
-				nd = utils.mpNormalize(p.data);
-			}
-			if (nd.toString('binary') !==
-			    p.data.toString('binary')) {
-				p.data = nd;
-				normalized = false;
-			}
-		}
-	}
-
-	if (normalized)
-		key._rfc4253Cache = sshbuf.toBuffer();
-
-	if (partial && typeof (partial) === 'object') {
-		partial.remainder = sshbuf.remainder();
-		partial.consumed = sshbuf._offset;
-	}
-
-	return (new Constructor(key));
-}
-
-function write(key, options) {
-	assert.object(key);
-
-	var alg = keyTypeToAlg(key);
-	var i;
-
-	var algInfo = algs.info[key.type];
-	if (PrivateKey.isPrivateKey(key))
-		algInfo = algs.privInfo[key.type];
-	var parts = algInfo.parts;
-
-	var buf = new SSHBuffer({});
-
-	buf.writeString(alg);
-
-	for (i = 0; i < parts.length; ++i) {
-		var data = key.part[parts[i]].data;
-		if (algInfo.normalize !== false) {
-			if (key.type === 'ed25519')
-				data = utils.zeroPadToLength(data, 32);
-			else
-				data = utils.mpNormalize(data);
-		}
-		if (key.type === 'ed25519' && parts[i] === 'k')
-			data = Buffer.concat([data, key.part.A.data]);
-		buf.writeBuffer(data);
-	}
-
-	return (buf.toBuffer());
-}
-
-
-/***/ }),
-/* 104 */
-/***/ (function(module, exports) {
-
-module.exports = require("tty");
-
-/***/ }),
-/* 105 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (str, fileLoc = 'lockfile') {
-  str = (0, (_stripBom || _load_stripBom()).default)(str);
-  return hasMergeConflicts(str) ? parseWithConflict(str, fileLoc) : { type: 'success', object: parse(str, fileLoc) };
-};
-
-var _util;
-
-function _load_util() {
-  return _util = _interopRequireDefault(__webpack_require__(3));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _stripBom;
-
-function _load_stripBom() {
-  return _stripBom = _interopRequireDefault(__webpack_require__(160));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint quotes: 0 */
-
-var _require = __webpack_require__(279);
-
-const safeLoad = _require.safeLoad,
-      FAILSAFE_SCHEMA = _require.FAILSAFE_SCHEMA;
-
-
-const VERSION_REGEX = /^yarn lockfile v(\d+)$/;
-
-const TOKEN_TYPES = {
-  boolean: 'BOOLEAN',
-  string: 'STRING',
-  identifier: 'IDENTIFIER',
-  eof: 'EOF',
-  colon: 'COLON',
-  newline: 'NEWLINE',
-  comment: 'COMMENT',
-  indent: 'INDENT',
-  invalid: 'INVALID',
-  number: 'NUMBER',
-  comma: 'COMMA'
-};
-
-const VALID_PROP_VALUE_TOKENS = [TOKEN_TYPES.boolean, TOKEN_TYPES.string, TOKEN_TYPES.number];
-
-function isValidPropValueToken(token) {
-  return VALID_PROP_VALUE_TOKENS.indexOf(token.type) >= 0;
-}
-
-function* tokenise(input) {
-  let lastNewline = false;
-  let line = 1;
-  let col = 0;
-
-  function buildToken(type, value) {
-    return { line, col, type, value };
-  }
-
-  while (input.length) {
-    let chop = 0;
-
-    if (input[0] === '\n' || input[0] === '\r') {
-      chop++;
-      // If this is a \r\n line, ignore both chars but only add one new line
-      if (input[1] === '\n') {
-        chop++;
-      }
-      line++;
-      col = 0;
-      yield buildToken(TOKEN_TYPES.newline);
-    } else if (input[0] === '#') {
-      chop++;
-
-      let nextNewline = input.indexOf('\n', chop);
-      if (nextNewline === -1) {
-        nextNewline = input.length;
-      }
-      const val = input.substring(chop, nextNewline);
-      chop = nextNewline;
-      yield buildToken(TOKEN_TYPES.comment, val);
-    } else if (input[0] === ' ') {
-      if (lastNewline) {
-        let indentSize = 1;
-        for (let i = 1; input[i] === ' '; i++) {
-          indentSize++;
-        }
-
-        if (indentSize % 2) {
-          throw new TypeError('Invalid number of spaces');
-        } else {
-          chop = indentSize;
-          yield buildToken(TOKEN_TYPES.indent, indentSize / 2);
-        }
-      } else {
-        chop++;
-      }
-    } else if (input[0] === '"') {
-      let i = 1;
-      for (; i < input.length; i++) {
-        if (input[i] === '"') {
-          const isEscaped = input[i - 1] === '\\' && input[i - 2] !== '\\';
-          if (!isEscaped) {
-            i++;
-            break;
-          }
-        }
-      }
-      const val = input.substring(0, i);
-
-      chop = i;
-
-      try {
-        yield buildToken(TOKEN_TYPES.string, JSON.parse(val));
-      } catch (err) {
-        if (err instanceof SyntaxError) {
-          yield buildToken(TOKEN_TYPES.invalid);
-        } else {
-          throw err;
-        }
-      }
-    } else if (/^[0-9]/.test(input)) {
-      const val = /^[0-9]+/.exec(input)[0];
-      chop = val.length;
-
-      yield buildToken(TOKEN_TYPES.number, +val);
-    } else if (/^true/.test(input)) {
-      yield buildToken(TOKEN_TYPES.boolean, true);
-      chop = 4;
-    } else if (/^false/.test(input)) {
-      yield buildToken(TOKEN_TYPES.boolean, false);
-      chop = 5;
-    } else if (input[0] === ':') {
-      yield buildToken(TOKEN_TYPES.colon);
-      chop++;
-    } else if (input[0] === ',') {
-      yield buildToken(TOKEN_TYPES.comma);
-      chop++;
-    } else if (/^[a-zA-Z\/.-]/g.test(input)) {
-      let i = 0;
-      for (; i < input.length; i++) {
-        const char = input[i];
-        if (char === ':' || char === ' ' || char === '\n' || char === '\r' || char === ',') {
-          break;
-        }
-      }
-      const name = input.substring(0, i);
-      chop = i;
-
-      yield buildToken(TOKEN_TYPES.string, name);
-    } else {
-      yield buildToken(TOKEN_TYPES.invalid);
-    }
-
-    if (!chop) {
-      // will trigger infinite recursion
-      yield buildToken(TOKEN_TYPES.invalid);
-    }
-
-    col += chop;
-    lastNewline = input[0] === '\n' || input[0] === '\r' && input[1] === '\n';
-    input = input.slice(chop);
-  }
-
-  yield buildToken(TOKEN_TYPES.eof);
-}
-
-class Parser {
-  constructor(input, fileLoc = 'lockfile') {
-    this.comments = [];
-    this.tokens = tokenise(input);
-    this.fileLoc = fileLoc;
-  }
-
-  onComment(token) {
-    const value = token.value;
-    (0, (_invariant || _load_invariant()).default)(typeof value === 'string', 'expected token value to be a string');
-
-    const comment = value.trim();
-
-    const versionMatch = comment.match(VERSION_REGEX);
-    if (versionMatch) {
-      const version = +versionMatch[1];
-      if (version > (_constants || _load_constants()).LOCKFILE_VERSION) {
-        throw new (_errors || _load_errors()).MessageError(`Can't install from a lockfile of version ${version} as you're on an old yarn version that only supports ` + `versions up to ${(_constants || _load_constants()).LOCKFILE_VERSION}. Run \`$ yarn self-update\` to upgrade to the latest version.`);
-      }
-    }
-
-    this.comments.push(comment);
-  }
-
-  next() {
-    const item = this.tokens.next();
-    (0, (_invariant || _load_invariant()).default)(item, 'expected a token');
-
-    const done = item.done,
-          value = item.value;
-
-    if (done || !value) {
-      throw new Error('No more tokens');
-    } else if (value.type === TOKEN_TYPES.comment) {
-      this.onComment(value);
-      return this.next();
-    } else {
-      return this.token = value;
-    }
-  }
-
-  unexpected(msg = 'Unexpected token') {
-    throw new SyntaxError(`${msg} ${this.token.line}:${this.token.col} in ${this.fileLoc}`);
-  }
-
-  expect(tokType) {
-    if (this.token.type === tokType) {
-      this.next();
-    } else {
-      this.unexpected();
-    }
-  }
-
-  eat(tokType) {
-    if (this.token.type === tokType) {
-      this.next();
-      return true;
-    } else {
-      return false;
-    }
-  }
-
-  parse(indent = 0) {
-    const obj = (0, (_map || _load_map()).default)();
-
-    while (true) {
-      const propToken = this.token;
-
-      if (propToken.type === TOKEN_TYPES.newline) {
-        const nextToken = this.next();
-        if (!indent) {
-          // if we have 0 indentation then the next token doesn't matter
-          continue;
-        }
-
-        if (nextToken.type !== TOKEN_TYPES.indent) {
-          // if we have no indentation after a newline then we've gone down a level
-          break;
-        }
-
-        if (nextToken.value === indent) {
-          // all is good, the indent is on our level
-          this.next();
-        } else {
-          // the indentation is less than our level
-          break;
-        }
-      } else if (propToken.type === TOKEN_TYPES.indent) {
-        if (propToken.value === indent) {
-          this.next();
-        } else {
-          break;
-        }
-      } else if (propToken.type === TOKEN_TYPES.eof) {
-        break;
-      } else if (propToken.type === TOKEN_TYPES.string) {
-        // property key
-        const key = propToken.value;
-        (0, (_invariant || _load_invariant()).default)(key, 'Expected a key');
-
-        const keys = [key];
-        this.next();
-
-        // support multiple keys
-        while (this.token.type === TOKEN_TYPES.comma) {
-          this.next(); // skip comma
-
-          const keyToken = this.token;
-          if (keyToken.type !== TOKEN_TYPES.string) {
-            this.unexpected('Expected string');
-          }
-
-          const key = keyToken.value;
-          (0, (_invariant || _load_invariant()).default)(key, 'Expected a key');
-          keys.push(key);
-          this.next();
-        }
-
-        const wasColon = this.token.type === TOKEN_TYPES.colon;
-        if (wasColon) {
-          this.next();
-        }
-
-        if (isValidPropValueToken(this.token)) {
-          // plain value
-          for (var _iterator = keys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-            var _ref;
-
-            if (_isArray) {
-              if (_i >= _iterator.length) break;
-              _ref = _iterator[_i++];
-            } else {
-              _i = _iterator.next();
-              if (_i.done) break;
-              _ref = _i.value;
-            }
-
-            const key = _ref;
-
-            obj[key] = this.token.value;
-          }
-
-          this.next();
-        } else if (wasColon) {
-          // parse object
-          const val = this.parse(indent + 1);
-
-          for (var _iterator2 = keys, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-            var _ref2;
-
-            if (_isArray2) {
-              if (_i2 >= _iterator2.length) break;
-              _ref2 = _iterator2[_i2++];
-            } else {
-              _i2 = _iterator2.next();
-              if (_i2.done) break;
-              _ref2 = _i2.value;
-            }
-
-            const key = _ref2;
-
-            obj[key] = val;
-          }
-
-          if (indent && this.token.type !== TOKEN_TYPES.indent) {
-            break;
-          }
-        } else {
-          this.unexpected('Invalid value type');
-        }
-      } else {
-        this.unexpected(`Unknown token: ${(_util || _load_util()).default.inspect(propToken)}`);
-      }
-    }
-
-    return obj;
-  }
-}
-
-const MERGE_CONFLICT_ANCESTOR = '|||||||';
-const MERGE_CONFLICT_END = '>>>>>>>';
-const MERGE_CONFLICT_SEP = '=======';
-const MERGE_CONFLICT_START = '<<<<<<<';
-
-/**
- * Extract the two versions of the lockfile from a merge conflict.
- */
-function extractConflictVariants(str) {
-  const variants = [[], []];
-  const lines = str.split(/\r?\n/g);
-  let skip = false;
-
-  while (lines.length) {
-    const line = lines.shift();
-    if (line.startsWith(MERGE_CONFLICT_START)) {
-      // get the first variant
-      while (lines.length) {
-        const conflictLine = lines.shift();
-        if (conflictLine === MERGE_CONFLICT_SEP) {
-          skip = false;
-          break;
-        } else if (skip || conflictLine.startsWith(MERGE_CONFLICT_ANCESTOR)) {
-          skip = true;
-          continue;
-        } else {
-          variants[0].push(conflictLine);
-        }
-      }
-
-      // get the second variant
-      while (lines.length) {
-        const conflictLine = lines.shift();
-        if (conflictLine.startsWith(MERGE_CONFLICT_END)) {
-          break;
-        } else {
-          variants[1].push(conflictLine);
-        }
-      }
-    } else {
-      variants[0].push(line);
-      variants[1].push(line);
-    }
-  }
-
-  return [variants[0].join('\n'), variants[1].join('\n')];
-}
-
-/**
- * Check if a lockfile has merge conflicts.
- */
-function hasMergeConflicts(str) {
-  return str.includes(MERGE_CONFLICT_START) && str.includes(MERGE_CONFLICT_SEP) && str.includes(MERGE_CONFLICT_END);
-}
-
-/**
- * Parse the lockfile.
- */
-function parse(str, fileLoc) {
-  const parser = new Parser(str, fileLoc);
-  parser.next();
-
-  if (!fileLoc.endsWith(`.yml`)) {
-    try {
-      return parser.parse();
-    } catch (error1) {
-      try {
-        return safeLoad(str, {
-          schema: FAILSAFE_SCHEMA
-        });
-      } catch (error2) {
-        throw error1;
-      }
-    }
-  } else {
-    const result = safeLoad(str, {
-      schema: FAILSAFE_SCHEMA
-    });
-    if (typeof result === 'object') {
-      return result;
-    } else {
-      return {};
-    }
-  }
-}
-
-/**
- * Parse and merge the two variants in a conflicted lockfile.
- */
-function parseWithConflict(str, fileLoc) {
-  const variants = extractConflictVariants(str);
-  try {
-    return { type: 'merge', object: Object.assign({}, parse(variants[0], fileLoc), parse(variants[1], fileLoc)) };
-  } catch (err) {
-    if (err instanceof SyntaxError) {
-      return { type: 'conflict', object: {} };
-    } else {
-      throw err;
-    }
-  }
-}
-
-/***/ }),
-/* 106 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-
-module.exports = {
-  copy: copy,
-  checkDataType: checkDataType,
-  checkDataTypes: checkDataTypes,
-  coerceToTypes: coerceToTypes,
-  toHash: toHash,
-  getProperty: getProperty,
-  escapeQuotes: escapeQuotes,
-  equal: __webpack_require__(204),
-  ucs2length: __webpack_require__(480),
-  varOccurences: varOccurences,
-  varReplace: varReplace,
-  cleanUpCode: cleanUpCode,
-  finalCleanUpCode: finalCleanUpCode,
-  schemaHasRules: schemaHasRules,
-  schemaHasRulesExcept: schemaHasRulesExcept,
-  toQuotedString: toQuotedString,
-  getPathExpr: getPathExpr,
-  getPath: getPath,
-  getData: getData,
-  unescapeFragment: unescapeFragment,
-  unescapeJsonPointer: unescapeJsonPointer,
-  escapeFragment: escapeFragment,
-  escapeJsonPointer: escapeJsonPointer
-};
-
-
-function copy(o, to) {
-  to = to || {};
-  for (var key in o) to[key] = o[key];
-  return to;
-}
-
-
-function checkDataType(dataType, data, negate) {
-  var EQUAL = negate ? ' !== ' : ' === '
-    , AND = negate ? ' || ' : ' && '
-    , OK = negate ? '!' : ''
-    , NOT = negate ? '' : '!';
-  switch (dataType) {
-    case 'null': return data + EQUAL + 'null';
-    case 'array': return OK + 'Array.isArray(' + data + ')';
-    case 'object': return '(' + OK + data + AND +
-                          'typeof ' + data + EQUAL + '"object"' + AND +
-                          NOT + 'Array.isArray(' + data + '))';
-    case 'integer': return '(typeof ' + data + EQUAL + '"number"' + AND +
-                           NOT + '(' + data + ' % 1)' +
-                           AND + data + EQUAL + data + ')';
-    default: return 'typeof ' + data + EQUAL + '"' + dataType + '"';
-  }
-}
-
-
-function checkDataTypes(dataTypes, data) {
-  switch (dataTypes.length) {
-    case 1: return checkDataType(dataTypes[0], data, true);
-    default:
-      var code = '';
-      var types = toHash(dataTypes);
-      if (types.array && types.object) {
-        code = types.null ? '(': '(!' + data + ' || ';
-        code += 'typeof ' + data + ' !== "object")';
-        delete types.null;
-        delete types.array;
-        delete types.object;
-      }
-      if (types.number) delete types.integer;
-      for (var t in types)
-        code += (code ? ' && ' : '' ) + checkDataType(t, data, true);
-
-      return code;
-  }
-}
-
-
-var COERCE_TO_TYPES = toHash([ 'string', 'number', 'integer', 'boolean', 'null' ]);
-function coerceToTypes(optionCoerceTypes, dataTypes) {
-  if (Array.isArray(dataTypes)) {
-    var types = [];
-    for (var i=0; i<dataTypes.length; i++) {
-      var t = dataTypes[i];
-      if (COERCE_TO_TYPES[t]) types[types.length] = t;
-      else if (optionCoerceTypes === 'array' && t === 'array') types[types.length] = t;
-    }
-    if (types.length) return types;
-  } else if (COERCE_TO_TYPES[dataTypes]) {
-    return [dataTypes];
-  } else if (optionCoerceTypes === 'array' && dataTypes === 'array') {
-    return ['array'];
-  }
-}
-
-
-function toHash(arr) {
-  var hash = {};
-  for (var i=0; i<arr.length; i++) hash[arr[i]] = true;
-  return hash;
-}
-
-
-var IDENTIFIER = /^[a-z$_][a-z$_0-9]*$/i;
-var SINGLE_QUOTE = /'|\\/g;
-function getProperty(key) {
-  return typeof key == 'number'
-          ? '[' + key + ']'
-          : IDENTIFIER.test(key)
-            ? '.' + key
-            : "['" + escapeQuotes(key) + "']";
-}
-
-
-function escapeQuotes(str) {
-  return str.replace(SINGLE_QUOTE, '\\$&')
-            .replace(/\n/g, '\\n')
-            .replace(/\r/g, '\\r')
-            .replace(/\f/g, '\\f')
-            .replace(/\t/g, '\\t');
-}
-
-
-function varOccurences(str, dataVar) {
-  dataVar += '[^0-9]';
-  var matches = str.match(new RegExp(dataVar, 'g'));
-  return matches ? matches.length : 0;
-}
-
-
-function varReplace(str, dataVar, expr) {
-  dataVar += '([^0-9])';
-  expr = expr.replace(/\$/g, '$$$$');
-  return str.replace(new RegExp(dataVar, 'g'), expr + '$1');
-}
-
-
-var EMPTY_ELSE = /else\s*{\s*}/g
-  , EMPTY_IF_NO_ELSE = /if\s*\([^)]+\)\s*\{\s*\}(?!\s*else)/g
-  , EMPTY_IF_WITH_ELSE = /if\s*\(([^)]+)\)\s*\{\s*\}\s*else(?!\s*if)/g;
-function cleanUpCode(out) {
-  return out.replace(EMPTY_ELSE, '')
-            .replace(EMPTY_IF_NO_ELSE, '')
-            .replace(EMPTY_IF_WITH_ELSE, 'if (!($1))');
-}
-
-
-var ERRORS_REGEXP = /[^v.]errors/g
-  , REMOVE_ERRORS = /var errors = 0;|var vErrors = null;|validate.errors = vErrors;/g
-  , REMOVE_ERRORS_ASYNC = /var errors = 0;|var vErrors = null;/g
-  , RETURN_VALID = 'return errors === 0;'
-  , RETURN_TRUE = 'validate.errors = null; return true;'
-  , RETURN_ASYNC = /if \(errors === 0\) return data;\s*else throw new ValidationError\(vErrors\);/
-  , RETURN_DATA_ASYNC = 'return data;'
-  , ROOTDATA_REGEXP = /[^A-Za-z_$]rootData[^A-Za-z0-9_$]/g
-  , REMOVE_ROOTDATA = /if \(rootData === undefined\) rootData = data;/;
-
-function finalCleanUpCode(out, async) {
-  var matches = out.match(ERRORS_REGEXP);
-  if (matches && matches.length == 2) {
-    out = async
-          ? out.replace(REMOVE_ERRORS_ASYNC, '')
-               .replace(RETURN_ASYNC, RETURN_DATA_ASYNC)
-          : out.replace(REMOVE_ERRORS, '')
-               .replace(RETURN_VALID, RETURN_TRUE);
-  }
-
-  matches = out.match(ROOTDATA_REGEXP);
-  if (!matches || matches.length !== 3) return out;
-  return out.replace(REMOVE_ROOTDATA, '');
-}
-
-
-function schemaHasRules(schema, rules) {
-  if (typeof schema == 'boolean') return !schema;
-  for (var key in schema) if (rules[key]) return true;
-}
-
-
-function schemaHasRulesExcept(schema, rules, exceptKeyword) {
-  if (typeof schema == 'boolean') return !schema && exceptKeyword != 'not';
-  for (var key in schema) if (key != exceptKeyword && rules[key]) return true;
-}
-
-
-function toQuotedString(str) {
-  return '\'' + escapeQuotes(str) + '\'';
-}
-
-
-function getPathExpr(currentPath, expr, jsonPointers, isNumber) {
-  var path = jsonPointers // false by default
-              ? '\'/\' + ' + expr + (isNumber ? '' : '.replace(/~/g, \'~0\').replace(/\\//g, \'~1\')')
-              : (isNumber ? '\'[\' + ' + expr + ' + \']\'' : '\'[\\\'\' + ' + expr + ' + \'\\\']\'');
-  return joinPaths(currentPath, path);
-}
-
-
-function getPath(currentPath, prop, jsonPointers) {
-  var path = jsonPointers // false by default
-              ? toQuotedString('/' + escapeJsonPointer(prop))
-              : toQuotedString(getProperty(prop));
-  return joinPaths(currentPath, path);
-}
-
-
-var JSON_POINTER = /^\/(?:[^~]|~0|~1)*$/;
-var RELATIVE_JSON_POINTER = /^([0-9]+)(#|\/(?:[^~]|~0|~1)*)?$/;
-function getData($data, lvl, paths) {
-  var up, jsonPointer, data, matches;
-  if ($data === '') return 'rootData';
-  if ($data[0] == '/') {
-    if (!JSON_POINTER.test($data)) throw new Error('Invalid JSON-pointer: ' + $data);
-    jsonPointer = $data;
-    data = 'rootData';
-  } else {
-    matches = $data.match(RELATIVE_JSON_POINTER);
-    if (!matches) throw new Error('Invalid JSON-pointer: ' + $data);
-    up = +matches[1];
-    jsonPointer = matches[2];
-    if (jsonPointer == '#') {
-      if (up >= lvl) throw new Error('Cannot access property/index ' + up + ' levels up, current level is ' + lvl);
-      return paths[lvl - up];
-    }
-
-    if (up > lvl) throw new Error('Cannot access data ' + up + ' levels up, current level is ' + lvl);
-    data = 'data' + ((lvl - up) || '');
-    if (!jsonPointer) return data;
-  }
-
-  var expr = data;
-  var segments = jsonPointer.split('/');
-  for (var i=0; i<segments.length; i++) {
-    var segment = segments[i];
-    if (segment) {
-      data += getProperty(unescapeJsonPointer(segment));
-      expr += ' && ' + data;
-    }
-  }
-  return expr;
-}
-
-
-function joinPaths (a, b) {
-  if (a == '""') return b;
-  return (a + ' + ' + b).replace(/' \+ '/g, '');
-}
-
-
-function unescapeFragment(str) {
-  return unescapeJsonPointer(decodeURIComponent(str));
-}
-
-
-function escapeFragment(str) {
-  return encodeURIComponent(escapeJsonPointer(str));
-}
-
-
-function escapeJsonPointer(str) {
-  return str.replace(/~/g, '~0').replace(/\//g, '~1');
-}
-
-
-function unescapeJsonPointer(str) {
-  return str.replace(/~1/g, '/').replace(/~0/g, '~');
-}
-
-
-/***/ }),
-/* 107 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.getToken = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getCredentials = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter) {
-    var _config$registries$ya = config.registries.yarn.config;
-    let username = _config$registries$ya.username,
-        email = _config$registries$ya.email;
-
-
-    if (username) {
-      reporter.info(`${reporter.lang('npmUsername')}: ${username}`);
-    } else {
-      username = yield reporter.question(reporter.lang('npmUsername'));
-      if (!username) {
-        return null;
-      }
-    }
-
-    if (email) {
-      reporter.info(`${reporter.lang('npmEmail')}: ${email}`);
-    } else {
-      email = yield reporter.question(reporter.lang('npmEmail'));
-      if (!email) {
-        return null;
-      }
-    }
-
-    yield config.registries.yarn.saveHomeConfig({ username, email });
-
-    return { username, email };
-  });
-
-  return function getCredentials(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let getToken = exports.getToken = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, name = '', flags = {}, registry = '') {
-    const auth = registry ? config.registries.npm.getAuthByRegistry(registry) : config.registries.npm.getAuth(name);
-
-    if (config.otp) {
-      config.registries.npm.setOtp(config.otp);
-    }
-
-    if (auth) {
-      config.registries.npm.setToken(auth);
-      return function revoke() {
-        reporter.info(reporter.lang('notRevokingConfigToken'));
-        return Promise.resolve();
-      };
-    }
-
-    const env = process.env.YARN_AUTH_TOKEN || process.env.NPM_AUTH_TOKEN;
-    if (env) {
-      config.registries.npm.setToken(`Bearer ${env}`);
-      return function revoke() {
-        reporter.info(reporter.lang('notRevokingEnvToken'));
-        return Promise.resolve();
-      };
-    }
-
-    // make sure we're not running in non-interactive mode before asking for login
-    if (flags.nonInteractive || config.nonInteractive) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('nonInteractiveNoToken'));
-    }
-
-    //
-    const creds = yield getCredentials(config, reporter);
-    if (!creds) {
-      reporter.warn(reporter.lang('loginAsPublic'));
-      return function revoke() {
-        reporter.info(reporter.lang('noTokenToRevoke'));
-        return Promise.resolve();
-      };
-    }
-
-    const username = creds.username,
-          email = creds.email;
-
-    const password = yield reporter.question(reporter.lang('npmPassword'), {
-      password: true,
-      required: true
-    });
-
-    //
-    const userobj = {
-      _id: `org.couchdb.user:${username}`,
-      name: username,
-      password,
-      email,
-      type: 'user',
-      roles: [],
-      date: new Date().toISOString()
-    };
-
-    //
-    const res = yield config.registries.npm.request(`-/user/org.couchdb.user:${encodeURIComponent(username)}`, {
-      method: 'PUT',
-      registry,
-      body: userobj,
-      auth: { username, password, email }
-    });
-
-    if (res && res.ok) {
-      reporter.success(reporter.lang('loggedIn'));
-
-      const token = res.token;
-      config.registries.npm.setToken(`Bearer ${token}`);
-
-      return (() => {
-        var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-          reporter.success(reporter.lang('revokedToken'));
-          yield config.registries.npm.request(`-/user/token/${token}`, {
-            method: 'DELETE',
-            registry
-          });
-        });
-
-        function revoke() {
-          return _ref3.apply(this, arguments);
-        }
-
-        return revoke;
-      })();
-    } else {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('incorrectCredentials'));
-    }
-  });
-
-  return function getToken(_x3, _x4) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref4 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    yield getCredentials(config, reporter);
-  });
-
-  return function run(_x5, _x6, _x7, _x8) {
-    return _ref4.apply(this, arguments);
-  };
-})();
-
-exports.getOneTimePassword = getOneTimePassword;
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function getOneTimePassword(reporter) {
-  return reporter.question(reporter.lang('npmOneTimePassword'));
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Stores registry username and email.');
-}
-
-/***/ }),
-/* 108 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-exports.stringifyLangArgs = stringifyLangArgs;
-
-var _format;
-
-function _load_format() {
-  return _format = __webpack_require__(566);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = _interopRequireWildcard(__webpack_require__(568));
-}
-
-var _isCi;
-
-function _load_isCi() {
-  return _isCi = _interopRequireDefault(__webpack_require__(397));
-}
-
-var _os;
-
-function _load_os() {
-  return _os = _interopRequireDefault(__webpack_require__(46));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint no-unused-vars: 0 */
-
-const util = __webpack_require__(3);
-const EventEmitter = __webpack_require__(77).EventEmitter;
-
-function stringifyLangArgs(args) {
-  return args.map(function (val) {
-    if (val != null && val.inspect) {
-      return val.inspect();
-    } else {
-      try {
-        const str = JSON.stringify(val) || val + '';
-        // should match all literal line breaks and
-        // "u001b" that follow an odd number of backslashes and convert them to ESC
-        // we do this because the JSON.stringify process has escaped these characters
-        return str.replace(/((?:^|[^\\])(?:\\{2})*)\\u001[bB]/g, '$1\u001b').replace(/[\\]r[\\]n|([\\])?[\\]n/g, (match, precededBacklash) => {
-          // precededBacklash not null when "\n" is preceded by a backlash ("\\n")
-          // match will be "\\n" and we don't replace it with os.EOL
-          return precededBacklash ? match : (_os || _load_os()).default.EOL;
-        });
-      } catch (e) {
-        return util.inspect(val);
-      }
-    }
-  });
-}
-
-class BaseReporter {
-  constructor(opts = {}) {
-    const lang = 'en';
-    this.language = lang;
-
-    this.stdout = opts.stdout || process.stdout;
-    this.stderr = opts.stderr || process.stderr;
-    this.stdin = opts.stdin || this._getStandardInput();
-    this.emoji = !!opts.emoji;
-    this.nonInteractive = !!opts.nonInteractive;
-    this.noProgress = !!opts.noProgress || (_isCi || _load_isCi()).default;
-    this.isVerbose = !!opts.verbose;
-
-    // $FlowFixMe: this is valid!
-    this.isTTY = this.stdout.isTTY;
-
-    this.peakMemory = 0;
-    this.startTime = Date.now();
-    this.format = (_format || _load_format()).defaultFormatter;
-  }
-
-  lang(key, ...args) {
-    const msg = (_index || _load_index())[this.language][key] || (_index || _load_index()).en[key];
-    if (!msg) {
-      throw new ReferenceError(`No message defined for language key ${key}`);
-    }
-
-    // stringify args
-    const stringifiedArgs = stringifyLangArgs(args);
-
-    // replace $0 placeholders with args
-    return msg.replace(/\$(\d+)/g, (str, i) => {
-      return stringifiedArgs[i];
-    });
-  }
-
-  /**
-   * `stringifyLangArgs` run `JSON.stringify` on strings too causing
-   * them to appear quoted. This marks them as "raw" and prevents
-   * the quoting and escaping
-   */
-  rawText(str) {
-    return {
-      inspect() {
-        return str;
-      }
-    };
-  }
-
-  verbose(msg) {
-    if (this.isVerbose) {
-      this._verbose(msg);
-    }
-  }
-
-  verboseInspect(val) {
-    if (this.isVerbose) {
-      this._verboseInspect(val);
-    }
-  }
-
-  _verbose(msg) {}
-  _verboseInspect(val) {}
-
-  _getStandardInput() {
-    let standardInput;
-
-    // Accessing stdin in a win32 headless process (e.g., Visual Studio) may throw an exception.
-    try {
-      standardInput = process.stdin;
-    } catch (e) {
-      console.warn(e.message);
-      delete process.stdin;
-      // $FlowFixMe: this is valid!
-      process.stdin = new EventEmitter();
-      standardInput = process.stdin;
-    }
-
-    return standardInput;
-  }
-
-  initPeakMemoryCounter() {
-    this.checkPeakMemory();
-    this.peakMemoryInterval = setInterval(() => {
-      this.checkPeakMemory();
-    }, 1000);
-    // $FlowFixMe: Node's setInterval returns a Timeout, not a Number
-    this.peakMemoryInterval.unref();
-  }
-
-  checkPeakMemory() {
-    var _process$memoryUsage = process.memoryUsage();
-
-    const heapTotal = _process$memoryUsage.heapTotal;
-
-    if (heapTotal > this.peakMemory) {
-      this.peakMemory = heapTotal;
-    }
-  }
-
-  close() {
-    if (this.peakMemoryInterval) {
-      clearInterval(this.peakMemoryInterval);
-      this.peakMemoryInterval = null;
-    }
-  }
-
-  getTotalTime() {
-    return Date.now() - this.startTime;
-  }
-
-  // TODO
-  list(key, items, hints) {}
-
-  // Outputs basic tree structure to console
-  tree(key, obj, { force = false } = {}) {}
-
-  // called whenever we begin a step in the CLI.
-  step(current, total, message, emoji) {}
-
-  // a error message has been triggered. this however does not always meant an abrupt
-  // program end.
-  error(message) {}
-
-  // an info message has been triggered. this provides things like stats and diagnostics.
-  info(message) {}
-
-  // a warning message has been triggered.
-  warn(message) {}
-
-  // a success message has been triggered.
-  success(message) {}
-
-  // a simple log message
-  // TODO: rethink the {force} parameter. In the meantime, please don't use it (cf comments in #4143).
-  log(message, { force = false } = {}) {}
-
-  // a shell command has been executed
-  command(command) {}
-
-  // inspect and pretty-print any value
-  inspect(value) {}
-
-  // the screen shown at the very start of the CLI
-  header(command, pkg) {}
-
-  // the screen shown at the very end of the CLI
-  footer(showPeakMemory) {}
-
-  // a table structure
-  table(head, body) {}
-
-  // security audit action to resolve advisories
-  auditAction(recommendation) {}
-
-  // security audit requires manual review
-  auditManualReview() {}
-
-  // security audit advisory
-  auditAdvisory(resolution, auditAdvisory) {}
-
-  // summary for security audit report
-  auditSummary(auditMetadata) {}
-
-  // render an activity spinner and return a function that will trigger an update
-  activity() {
-    return {
-      tick(name) {},
-      end() {}
-    };
-  }
-
-  //
-  activitySet(total, workers) {
-    return {
-      spinners: Array(workers).fill({
-        clear() {},
-        setPrefix() {},
-        tick() {},
-        end() {}
-      }),
-      end() {}
-    };
-  }
-
-  //
-  question(question, options = {}) {
-    return Promise.reject(new Error('Not implemented'));
-  }
-
-  //
-  questionAffirm(question) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const condition = true; // trick eslint
-      if (_this.nonInteractive) {
-        return true;
-      }
-
-      while (condition) {
-        let answer = yield _this.question(question);
-        answer = answer.toLowerCase();
-
-        if (answer === 'y' || answer === 'yes') {
-          return true;
-        }
-        if (answer === 'n' || answer === 'no') {
-          return false;
-        }
-
-        _this.error('Invalid answer for question');
-      }
-
-      return false;
-    })();
-  }
-
-  // prompt the user to select an option from an array
-  select(header, question, options) {
-    return Promise.reject(new Error('Not implemented'));
-  }
-
-  // render a progress bar and return a function which when called will trigger an update
-  progress(total) {
-    return function () {};
-  }
-
-  // utility function to disable progress bar
-  disableProgress() {
-    this.noProgress = true;
-  }
-
-  //
-  prompt(message, choices, options = {}) {
-    return Promise.reject(new Error('Not implemented'));
-  }
-}
-exports.default = BaseReporter;
-
-/***/ }),
-/* 109 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-exports.explodeHostedGitFragment = explodeHostedGitFragment;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(57);
-}
-
-var _gitResolver;
-
-function _load_gitResolver() {
-  return _gitResolver = _interopRequireDefault(__webpack_require__(124));
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-var _git;
-
-function _load_git() {
-  return _git = _interopRequireDefault(__webpack_require__(219));
-}
-
-var _guessName;
-
-function _load_guessName() {
-  return _guessName = _interopRequireDefault(__webpack_require__(169));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function parseHash(fragment) {
-  const hashPosition = fragment.indexOf('#');
-  return hashPosition === -1 ? '' : fragment.substr(hashPosition + 1);
-}
-
-function explodeHostedGitFragment(fragment, reporter) {
-  const hash = parseHash(fragment);
-
-  const preParts = fragment.split('@');
-  if (preParts.length > 2) {
-    fragment = preParts[1] + '@' + preParts[2];
-  }
-
-  const parts = fragment.replace(/(.*?)#.*/, '$1') // Strip hash
-  .replace(/.*:(.*)/, '$1') // Strip prefixed protocols
-  .replace(/.git$/, '') // Strip the .git suffix
-  .split('/');
-
-  const user = parts[parts.length - 2];
-  const repo = parts[parts.length - 1];
-
-  if (user === undefined || repo === undefined) {
-    throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidHostedGitFragment', fragment));
-  }
-
-  return {
-    user,
-    repo,
-    hash
-  };
-}
-
-class HostedGitResolver extends (_exoticResolver || _load_exoticResolver()).default {
-  constructor(request, fragment) {
-    super(request, fragment);
-
-    const exploded = this.exploded = explodeHostedGitFragment(fragment, this.reporter);
-    const user = exploded.user,
-          repo = exploded.repo,
-          hash = exploded.hash;
-
-    this.user = user;
-    this.repo = repo;
-    this.hash = hash;
-  }
-
-  static getTarballUrl(exploded, commit) {
-    exploded;
-    commit;
-    throw new Error('Not implemented');
-  }
-
-  static getGitHTTPUrl(exploded) {
-    exploded;
-    throw new Error('Not implemented');
-  }
-
-  static getGitHTTPBaseUrl(exploded) {
-    exploded;
-    throw new Error('Not implemented');
-  }
-
-  static getGitSSHUrl(exploded) {
-    exploded;
-    throw new Error('Not implemented');
-  }
-
-  static getHTTPFileUrl(exploded, filename, commit) {
-    exploded;
-    filename;
-    commit;
-    throw new Error('Not implemented');
-  }
-
-  getRefOverHTTP(url) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const gitUrl = (_git || _load_git()).default.npmUrlToGitUrl(url);
-      const client = new (_git || _load_git()).default(_this.config, gitUrl, _this.hash);
-
-      let out = yield _this.config.requestManager.request({
-        url: `${url}/info/refs?service=git-upload-pack`,
-        queue: _this.resolver.fetchingQueue
-      });
-
-      if (out) {
-        // clean up output
-        let lines = out.trim().split('\n');
-
-        // remove first two lines which contains compatibility info etc
-        lines = lines.slice(2);
-
-        // remove last line which contains the terminator "0000"
-        lines.pop();
-
-        // remove line lengths from start of each line
-        lines = lines.map(function (line) {
-          return line.slice(4);
-        });
-
-        out = lines.join('\n');
-      } else {
-        throw new Error(_this.reporter.lang('hostedGitResolveError'));
-      }
-
-      return client.setRefHosted(out);
-    })();
-  }
-
-  resolveOverHTTP(url) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const commit = yield _this2.getRefOverHTTP(url);
-      const config = _this2.config;
-
-
-      const tarballUrl = _this2.constructor.getTarballUrl(_this2.exploded, commit);
-
-      const tryRegistry = (() => {
-        var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (registry) {
-          const filename = (_index || _load_index()).registries[registry].filename;
-
-          const href = _this2.constructor.getHTTPFileUrl(_this2.exploded, filename, commit);
-          const file = yield config.requestManager.request({
-            url: href,
-            queue: _this2.resolver.fetchingQueue
-          });
-          if (!file) {
-            return null;
-          }
-
-          const json = yield config.readJson(href, function () {
-            return JSON.parse(file);
-          });
-          json._uid = commit;
-          json._remote = {
-            resolved: tarballUrl,
-            type: 'tarball',
-            reference: tarballUrl,
-            registry
-          };
-          return json;
-        });
-
-        return function tryRegistry(_x) {
-          return _ref.apply(this, arguments);
-        };
-      })();
-
-      const file = yield tryRegistry(_this2.registry);
-      if (file) {
-        return file;
-      }
-
-      for (const registry in (_index || _load_index()).registries) {
-        if (registry === _this2.registry) {
-          continue;
-        }
-
-        const file = yield tryRegistry(registry);
-        if (file) {
-          return file;
-        }
-      }
-
-      return {
-        name: (0, (_guessName || _load_guessName()).default)(url),
-        version: '0.0.0',
-        _uid: commit,
-        _remote: {
-          resolved: tarballUrl,
-          type: 'tarball',
-          reference: tarballUrl,
-          registry: 'npm',
-          hash: undefined
-        }
-      };
-    })();
-  }
-
-  hasHTTPCapability(url) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      return (yield _this3.config.requestManager.request({
-        url,
-        method: 'HEAD',
-        queue: _this3.resolver.fetchingQueue,
-        followRedirect: false
-      })) !== false;
-    })();
-  }
-
-  resolve() {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // If we already have the tarball, just return it without having to make any HTTP requests.
-      const shrunk = _this4.request.getLocked('tarball');
-      if (shrunk) {
-        return shrunk;
-      }
-
-      const httpUrl = _this4.constructor.getGitHTTPUrl(_this4.exploded);
-      const httpBaseUrl = _this4.constructor.getGitHTTPBaseUrl(_this4.exploded);
-      const sshUrl = _this4.constructor.getGitSSHUrl(_this4.exploded);
-
-      // If we can access the files over HTTP then we should as it's MUCH faster than git
-      // archive and tarball unarchiving. The HTTP API is only available for public repos
-      // though.
-      if (yield _this4.hasHTTPCapability(httpBaseUrl)) {
-        return _this4.resolveOverHTTP(httpUrl);
-      }
-
-      // If the url is accessible over git archive then we should immediately delegate to
-      // the git resolver.
-      //
-      // NOTE: Here we use a different url than when we delegate to the git resolver later on.
-      // This is because `git archive` requires access over ssh and github only allows that
-      // if you have write permissions
-      const sshGitUrl = (_git || _load_git()).default.npmUrlToGitUrl(sshUrl);
-      if (yield (_git || _load_git()).default.hasArchiveCapability(sshGitUrl)) {
-        const archiveClient = new (_git || _load_git()).default(_this4.config, sshGitUrl, _this4.hash);
-        const commit = yield archiveClient.init();
-        return _this4.fork((_gitResolver || _load_gitResolver()).default, true, `${sshUrl}#${commit}`);
-      }
-
-      // fallback to the plain git resolver
-      return _this4.fork((_gitResolver || _load_gitResolver()).default, true, sshUrl);
-    })();
-  }
-}
-exports.default = HostedGitResolver;
-
-/***/ }),
-/* 110 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const debug = __webpack_require__(266)('yarn');
-
-class BlockingQueue {
-  constructor(alias, maxConcurrency = Infinity) {
-    this.concurrencyQueue = [];
-    this.maxConcurrency = maxConcurrency;
-    this.runningCount = 0;
-    this.warnedStuck = false;
-    this.alias = alias;
-    this.first = true;
-
-    this.running = (0, (_map || _load_map()).default)();
-    this.queue = (0, (_map || _load_map()).default)();
-
-    this.stuckTick = this.stuckTick.bind(this);
-  }
-
-  stillActive() {
-    if (this.stuckTimer) {
-      clearTimeout(this.stuckTimer);
-    }
-
-    this.stuckTimer = setTimeout(this.stuckTick, 5000);
-
-    // We need to check the existence of unref because of https://github.com/facebook/jest/issues/4559
-    // $FlowFixMe: Node's setInterval returns a Timeout, not a Number
-    this.stuckTimer.unref && this.stuckTimer.unref();
-  }
-
-  stuckTick() {
-    if (this.runningCount === 1) {
-      this.warnedStuck = true;
-      debug(`The ${JSON.stringify(this.alias)} blocking queue may be stuck. 5 seconds ` + `without any activity with 1 worker: ${Object.keys(this.running)[0]}`);
-    }
-  }
-
-  push(key, factory) {
-    if (this.first) {
-      this.first = false;
-    } else {
-      this.stillActive();
-    }
-
-    return new Promise((resolve, reject) => {
-      // we're already running so push ourselves to the queue
-      const queue = this.queue[key] = this.queue[key] || [];
-      queue.push({ factory, resolve, reject });
-
-      if (!this.running[key]) {
-        this.shift(key);
-      }
-    });
-  }
-
-  shift(key) {
-    if (this.running[key]) {
-      delete this.running[key];
-      this.runningCount--;
-
-      if (this.stuckTimer) {
-        clearTimeout(this.stuckTimer);
-        this.stuckTimer = null;
-      }
-
-      if (this.warnedStuck) {
-        this.warnedStuck = false;
-        debug(`${JSON.stringify(this.alias)} blocking queue finally resolved. Nothing to worry about.`);
-      }
-    }
-
-    const queue = this.queue[key];
-    if (!queue) {
-      return;
-    }
-
-    var _queue$shift = queue.shift();
-
-    const resolve = _queue$shift.resolve,
-          reject = _queue$shift.reject,
-          factory = _queue$shift.factory;
-
-    if (!queue.length) {
-      delete this.queue[key];
-    }
-
-    const next = () => {
-      this.shift(key);
-      this.shiftConcurrencyQueue();
-    };
-
-    const run = () => {
-      this.running[key] = true;
-      this.runningCount++;
-
-      factory().then(function (val) {
-        resolve(val);
-        next();
-        return null;
-      }).catch(function (err) {
-        reject(err);
-        next();
-      });
-    };
-
-    this.maybePushConcurrencyQueue(run);
-  }
-
-  maybePushConcurrencyQueue(run) {
-    if (this.runningCount < this.maxConcurrency) {
-      run();
-    } else {
-      this.concurrencyQueue.push(run);
-    }
-  }
-
-  shiftConcurrencyQueue() {
-    if (this.runningCount < this.maxConcurrency) {
-      const fn = this.concurrencyQueue.shift();
-      if (fn) {
-        fn();
-      }
-    }
-  }
-}
-exports.default = BlockingQueue;
-
-/***/ }),
-/* 111 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.execCommand = exports.execFromManifest = exports.executeLifecycleScript = exports.makeEnv = exports.getWrappersFolder = exports.IGNORE_MANIFEST_KEYS = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getWrappersFolder = exports.getWrappersFolder = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    if (wrappersFolder) {
-      return wrappersFolder;
-    }
-
-    wrappersFolder = yield (_fs || _load_fs()).makeTempDir();
-
-    yield (0, (_portableScript || _load_portableScript()).makePortableProxyScript)(process.execPath, wrappersFolder, {
-      proxyBasename: 'node'
-    });
-
-    yield (0, (_portableScript || _load_portableScript()).makePortableProxyScript)(process.execPath, wrappersFolder, {
-      proxyBasename: 'yarn',
-      prependArguments: [process.argv[1]]
-    });
-
-    return wrappersFolder;
-  });
-
-  return function getWrappersFolder(_x) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let makeEnv = exports.makeEnv = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (stage, cwd, config) {
-    const env = (0, (_extends2 || _load_extends()).default)({
-      NODE: process.execPath,
-      INIT_CWD: process.cwd()
-    }, process.env);
-
-    // Merge in the `env` object specified in .yarnrc
-    const customEnv = config.getOption('env');
-    if (customEnv && typeof customEnv === 'object') {
-      Object.assign(env, customEnv);
-    }
-
-    env.npm_lifecycle_event = stage;
-    env.npm_node_execpath = env.NODE;
-    env.npm_execpath = env.npm_execpath || process.mainModule && process.mainModule.filename;
-
-    // Set the env to production for npm compat if production mode.
-    // https://github.com/npm/npm/blob/30d75e738b9cb7a6a3f9b50e971adcbe63458ed3/lib/utils/lifecycle.js#L336
-    if (config.production) {
-      env.NODE_ENV = 'production';
-    }
-
-    // Note: npm_config_argv environment variable contains output of nopt - command-line
-    // parser used by npm. Since we use other parser, we just roughly emulate it's output. (See: #684)
-    env.npm_config_argv = JSON.stringify({
-      remain: [],
-      cooked: config.commandName === 'run' ? [config.commandName, stage] : [config.commandName],
-      original: process.argv.slice(2)
-    });
-
-    const manifest = yield config.maybeReadManifest(cwd);
-    if (manifest) {
-      if (manifest.scripts && Object.prototype.hasOwnProperty.call(manifest.scripts, stage)) {
-        env.npm_lifecycle_script = manifest.scripts[stage];
-      }
-
-      // add npm_package_*
-      const queue = [['', manifest]];
-      while (queue.length) {
-        var _queue$pop = queue.pop();
-
-        const key = _queue$pop[0],
-              val = _queue$pop[1];
-
-        if (typeof val === 'object') {
-          for (const subKey in val) {
-            const fullKey = [key, subKey].filter(Boolean).join('_');
-            if (fullKey && fullKey[0] !== '_' && !IGNORE_MANIFEST_KEYS.has(fullKey)) {
-              queue.push([fullKey, val[subKey]]);
-            }
-          }
-        } else {
-          let cleanVal = String(val);
-          if (cleanVal.indexOf('\n') >= 0) {
-            cleanVal = JSON.stringify(cleanVal);
-          }
-
-          //replacing invalid chars with underscore
-          const cleanKey = key.replace(INVALID_CHAR_REGEX, '_');
-
-          env[`npm_package_${cleanKey}`] = cleanVal;
-        }
-      }
-    }
-
-    // add npm_config_* and npm_package_config_* from yarn config
-    const keys = new Set([...Object.keys(config.registries.yarn.config), ...Object.keys(config.registries.npm.config)]);
-    const cleaned = Array.from(keys).filter(function (key) {
-      return !key.match(/:_/) && IGNORE_CONFIG_KEYS.indexOf(key) === -1;
-    }).map(function (key) {
-      let val = config.getOption(key);
-      if (!val) {
-        val = '';
-      } else if (typeof val === 'number') {
-        val = '' + val;
-      } else if (typeof val !== 'string') {
-        val = JSON.stringify(val);
-      }
-
-      if (val.indexOf('\n') >= 0) {
-        val = JSON.stringify(val);
-      }
-      return [key, val];
-    });
-    // add npm_config_*
-    for (var _iterator = cleaned, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref4 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref4 = _i.value;
-      }
-
-      const _ref3 = _ref4;
-      const key = _ref3[0];
-      const val = _ref3[1];
-
-      const cleanKey = key.replace(/^_+/, '');
-      const envKey = `npm_config_${cleanKey}`.replace(INVALID_CHAR_REGEX, '_');
-      env[envKey] = val;
-    }
-    // add npm_package_config_*
-    if (manifest && manifest.name) {
-      const packageConfigPrefix = `${manifest.name}:`;
-      for (var _iterator2 = cleaned, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref6 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref6 = _i2.value;
-        }
-
-        const _ref5 = _ref6;
-        const key = _ref5[0];
-        const val = _ref5[1];
-
-        if (key.indexOf(packageConfigPrefix) !== 0) {
-          continue;
-        }
-        const cleanKey = key.replace(/^_+/, '').replace(packageConfigPrefix, '');
-        const envKey = `npm_package_config_${cleanKey}`.replace(INVALID_CHAR_REGEX, '_');
-        env[envKey] = val;
-      }
-    }
-
-    // split up the path
-    const envPath = env[(_constants || _load_constants()).ENV_PATH_KEY];
-    const pathParts = envPath ? envPath.split(path.delimiter) : [];
-
-    // Include node-gyp version that was bundled with the current Node.js version,
-    // if available.
-    pathParts.unshift(path.join(path.dirname(process.execPath), 'node_modules', 'npm', 'bin', 'node-gyp-bin'));
-    pathParts.unshift(path.join(path.dirname(process.execPath), '..', 'lib', 'node_modules', 'npm', 'bin', 'node-gyp-bin'));
-    // Include node-gyp version from homebrew managed npm, if available.
-    pathParts.unshift(path.join(path.dirname(process.execPath), '..', 'libexec', 'lib', 'node_modules', 'npm', 'bin', 'node-gyp-bin'));
-
-    // Add global bin folder if it is not present already, as some packages depend
-    // on a globally-installed version of node-gyp.
-    const globalBin = yield (0, (_global || _load_global()).getBinFolder)(config, {});
-    if (pathParts.indexOf(globalBin) === -1) {
-      pathParts.unshift(globalBin);
-    }
-
-    // Add node_modules .bin folders to the PATH
-    for (var _iterator3 = config.registryFolders, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref7;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref7 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref7 = _i3.value;
-      }
-
-      const registryFolder = _ref7;
-
-      const binFolder = path.join(registryFolder, '.bin');
-      if (config.workspacesEnabled && config.workspaceRootFolder) {
-        pathParts.unshift(path.join(config.workspaceRootFolder, binFolder));
-      }
-      pathParts.unshift(path.join(config.linkFolder, binFolder));
-      pathParts.unshift(path.join(cwd, binFolder));
-    }
-
-    let pnpFile;
-
-    if (process.versions.pnp) {
-      pnpFile = (_dynamicRequire || _load_dynamicRequire()).dynamicRequire.resolve('pnpapi');
-    } else {
-      const candidate = `${config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`;
-      if (yield (_fs || _load_fs()).exists(candidate)) {
-        pnpFile = candidate;
-      }
-    }
-
-    if (pnpFile) {
-      const pnpApi = (0, (_dynamicRequire || _load_dynamicRequire()).dynamicRequire)(pnpFile);
-
-      const packageLocator = pnpApi.findPackageLocator(`${cwd}/`);
-      const packageInformation = pnpApi.getPackageInformation(packageLocator);
-
-      for (var _iterator4 = packageInformation.packageDependencies.entries(), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref9;
-
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref9 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref9 = _i4.value;
-        }
-
-        const _ref8 = _ref9;
-        const name = _ref8[0];
-        const reference = _ref8[1];
-
-        const dependencyInformation = pnpApi.getPackageInformation({ name, reference });
-
-        if (!dependencyInformation || !dependencyInformation.packageLocation) {
-          continue;
-        }
-
-        const binFolder = `${dependencyInformation.packageLocation}/.bin`;
-        if (yield (_fs || _load_fs()).exists(binFolder)) {
-          pathParts.unshift(binFolder);
-        }
-      }
-
-      // Note that NODE_OPTIONS doesn't support any style of quoting its arguments at the moment
-      // For this reason, it won't work if the user has a space inside its $PATH
-      env.NODE_OPTIONS = env.NODE_OPTIONS || '';
-      env.NODE_OPTIONS = `--require ${pnpFile} ${env.NODE_OPTIONS}`;
-    }
-
-    pathParts.unshift((yield getWrappersFolder(config)));
-
-    // join path back together
-    env[(_constants || _load_constants()).ENV_PATH_KEY] = pathParts.join(path.delimiter);
-
-    return env;
-  });
-
-  return function makeEnv(_x2, _x3, _x4) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let executeLifecycleScript = exports.executeLifecycleScript = (() => {
-  var _ref10 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ({
-    stage,
-    config,
-    cwd,
-    cmd,
-    isInteractive,
-    onProgress,
-    customShell
-  }) {
-    const env = yield makeEnv(stage, cwd, config);
-
-    yield checkForGypIfNeeded(config, cmd, env[(_constants || _load_constants()).ENV_PATH_KEY].split(path.delimiter));
-
-    if (process.platform === 'win32' && (!customShell || customShell === 'cmd')) {
-      // handle windows run scripts starting with a relative path
-      cmd = (0, (_fixCmdWinSlashes || _load_fixCmdWinSlashes()).fixCmdWinSlashes)(cmd);
-    }
-
-    // By default (non-interactive), pipe everything to the terminal and run child process detached
-    // as long as it's not Windows (since windows does not have /dev/tty)
-    let stdio = ['ignore', 'pipe', 'pipe'];
-    let detached = process.platform !== 'win32';
-
-    if (isInteractive) {
-      stdio = 'inherit';
-      detached = false;
-    }
-
-    const shell = customShell || true;
-    const stdout = yield (_child || _load_child()).spawn(cmd, [], { cwd, env, stdio, detached, shell }, onProgress);
-
-    return { cwd, command: cmd, stdout };
-  });
-
-  return function executeLifecycleScript(_x5) {
-    return _ref10.apply(this, arguments);
-  };
-})();
-
-let _checkForGyp = (() => {
-  var _ref11 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, paths) {
-    const reporter = config.reporter;
-
-    // Check every directory in the PATH
-
-    const allChecks = yield Promise.all(paths.map(function (dir) {
-      return (_fs || _load_fs()).exists(path.join(dir, 'node-gyp'));
-    }));
-    if (allChecks.some(Boolean)) {
-      // node-gyp is available somewhere
-      return;
-    }
-
-    reporter.info(reporter.lang('packageRequiresNodeGyp'));
-
-    try {
-      yield (0, (_global || _load_global()).run)(config, reporter, {}, ['add', 'node-gyp']);
-    } catch (e) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('nodeGypAutoInstallFailed', e.message));
-    }
-  });
-
-  return function _checkForGyp(_x6, _x7) {
-    return _ref11.apply(this, arguments);
-  };
-})();
-
-let execFromManifest = exports.execFromManifest = (() => {
-  var _ref12 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, commandName, cwd) {
-    const pkg = yield config.maybeReadManifest(cwd);
-    if (!pkg || !pkg.scripts) {
-      return;
-    }
-
-    const cmd = pkg.scripts[commandName];
-    if (cmd) {
-      yield execCommand({ stage: commandName, config, cmd, cwd, isInteractive: true });
-    }
-  });
-
-  return function execFromManifest(_x8, _x9, _x10) {
-    return _ref12.apply(this, arguments);
-  };
-})();
-
-let execCommand = exports.execCommand = (() => {
-  var _ref13 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ({
-    stage,
-    config,
-    cmd,
-    cwd,
-    isInteractive,
-    customShell
-  }) {
-    const reporter = config.reporter;
-
-    try {
-      reporter.command(cmd);
-      yield executeLifecycleScript({ stage, config, cwd, cmd, isInteractive, customShell });
-      return Promise.resolve();
-    } catch (err) {
-      if (err instanceof (_errors || _load_errors()).ProcessTermError) {
-        const formattedError = new (_errors || _load_errors()).ProcessTermError(err.EXIT_SIGNAL ? reporter.lang('commandFailedWithSignal', err.EXIT_SIGNAL) : reporter.lang('commandFailedWithCode', err.EXIT_CODE));
-        formattedError.EXIT_CODE = err.EXIT_CODE;
-        formattedError.EXIT_SIGNAL = err.EXIT_SIGNAL;
-        throw formattedError;
-      } else {
-        throw err;
-      }
-    }
-  });
-
-  return function execCommand(_x11) {
-    return _ref13.apply(this, arguments);
-  };
-})();
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _dynamicRequire;
-
-function _load_dynamicRequire() {
-  return _dynamicRequire = __webpack_require__(371);
-}
-
-var _portableScript;
-
-function _load_portableScript() {
-  return _portableScript = __webpack_require__(589);
-}
-
-var _fixCmdWinSlashes;
-
-function _load_fixCmdWinSlashes() {
-  return _fixCmdWinSlashes = __webpack_require__(578);
-}
-
-var _global;
-
-function _load_global() {
-  return _global = __webpack_require__(121);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-const IGNORE_MANIFEST_KEYS = exports.IGNORE_MANIFEST_KEYS = new Set(['readme', 'notice', 'licenseText', 'activationEvents', 'contributes']);
-
-// We treat these configs as internal, thus not expose them to process.env.
-// This helps us avoid some gyp issues when building native modules.
-// See https://github.com/yarnpkg/yarn/issues/2286.
-const IGNORE_CONFIG_KEYS = ['lastUpdateCheck'];
-
-let wrappersFolder = null;
-
-const INVALID_CHAR_REGEX = /\W/g;
-
-exports.default = executeLifecycleScript;
-
-
-let checkGypPromise = null;
-/**
- * Special case: Some packages depend on node-gyp, but don't specify this in
- * their package.json dependencies. They assume that node-gyp is available
- * globally. We need to detect this case and show an error message.
- */
-function checkForGypIfNeeded(config, cmd, paths) {
-  if (cmd.substr(0, cmd.indexOf(' ')) !== 'node-gyp') {
-    return Promise.resolve();
-  }
-
-  // Ensure this only runs once, rather than multiple times in parallel.
-  if (!checkGypPromise) {
-    checkGypPromise = _checkForGyp(config, paths);
-  }
-  return checkGypPromise;
-}
-
-/***/ }),
-/* 112 */
-/***/ (function(module, exports) {
-
-module.exports = function (exec) {
-  try {
-    return !!exec();
-  } catch (e) {
-    return true;
-  }
-};
-
-
-/***/ }),
-/* 113 */
-/***/ (function(module, exports) {
-
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-// NOTE: These type checking functions intentionally don't use `instanceof`
-// because it is fragile and can be easily faked with `Object.create()`.
-
-function isArray(arg) {
-  if (Array.isArray) {
-    return Array.isArray(arg);
-  }
-  return objectToString(arg) === '[object Array]';
-}
-exports.isArray = isArray;
-
-function isBoolean(arg) {
-  return typeof arg === 'boolean';
-}
-exports.isBoolean = isBoolean;
-
-function isNull(arg) {
-  return arg === null;
-}
-exports.isNull = isNull;
-
-function isNullOrUndefined(arg) {
-  return arg == null;
-}
-exports.isNullOrUndefined = isNullOrUndefined;
-
-function isNumber(arg) {
-  return typeof arg === 'number';
-}
-exports.isNumber = isNumber;
-
-function isString(arg) {
-  return typeof arg === 'string';
-}
-exports.isString = isString;
-
-function isSymbol(arg) {
-  return typeof arg === 'symbol';
-}
-exports.isSymbol = isSymbol;
-
-function isUndefined(arg) {
-  return arg === void 0;
-}
-exports.isUndefined = isUndefined;
-
-function isRegExp(re) {
-  return objectToString(re) === '[object RegExp]';
-}
-exports.isRegExp = isRegExp;
-
-function isObject(arg) {
-  return typeof arg === 'object' && arg !== null;
-}
-exports.isObject = isObject;
-
-function isDate(d) {
-  return objectToString(d) === '[object Date]';
-}
-exports.isDate = isDate;
-
-function isError(e) {
-  return (objectToString(e) === '[object Error]' || e instanceof Error);
-}
-exports.isError = isError;
-
-function isFunction(arg) {
-  return typeof arg === 'function';
-}
-exports.isFunction = isFunction;
-
-function isPrimitive(arg) {
-  return arg === null ||
-         typeof arg === 'boolean' ||
-         typeof arg === 'number' ||
-         typeof arg === 'string' ||
-         typeof arg === 'symbol' ||  // ES6 symbol
-         typeof arg === 'undefined';
-}
-exports.isPrimitive = isPrimitive;
-
-exports.isBuffer = Buffer.isBuffer;
-
-function objectToString(o) {
-  return Object.prototype.toString.call(o);
-}
-
-
-/***/ }),
-/* 114 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * micromatch <https://github.com/jonschlinkert/micromatch>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var expand = __webpack_require__(753);
-var utils = __webpack_require__(300);
-
-/**
- * The main function. Pass an array of filepaths,
- * and a string or array of glob patterns
- *
- * @param  {Array|String} `files`
- * @param  {Array|String} `patterns`
- * @param  {Object} `opts`
- * @return {Array} Array of matches
- */
-
-function micromatch(files, patterns, opts) {
-  if (!files || !patterns) return [];
-  opts = opts || {};
-
-  if (typeof opts.cache === 'undefined') {
-    opts.cache = true;
-  }
-
-  if (!Array.isArray(patterns)) {
-    return match(files, patterns, opts);
-  }
-
-  var len = patterns.length, i = 0;
-  var omit = [], keep = [];
-
-  while (len--) {
-    var glob = patterns[i++];
-    if (typeof glob === 'string' && glob.charCodeAt(0) === 33 /* ! */) {
-      omit.push.apply(omit, match(files, glob.slice(1), opts));
-    } else {
-      keep.push.apply(keep, match(files, glob, opts));
-    }
-  }
-  return utils.diff(keep, omit);
-}
-
-/**
- * Return an array of files that match the given glob pattern.
- *
- * This function is called by the main `micromatch` function If you only
- * need to pass a single pattern you might get very minor speed improvements
- * using this function.
- *
- * @param  {Array} `files`
- * @param  {String} `pattern`
- * @param  {Object} `options`
- * @return {Array}
- */
-
-function match(files, pattern, opts) {
-  if (utils.typeOf(files) !== 'string' && !Array.isArray(files)) {
-    throw new Error(msg('match', 'files', 'a string or array'));
-  }
-
-  files = utils.arrayify(files);
-  opts = opts || {};
-
-  var negate = opts.negate || false;
-  var orig = pattern;
-
-  if (typeof pattern === 'string') {
-    negate = pattern.charAt(0) === '!';
-    if (negate) {
-      pattern = pattern.slice(1);
-    }
-
-    // we need to remove the character regardless,
-    // so the above logic is still needed
-    if (opts.nonegate === true) {
-      negate = false;
-    }
-  }
-
-  var _isMatch = matcher(pattern, opts);
-  var len = files.length, i = 0;
-  var res = [];
-
-  while (i < len) {
-    var file = files[i++];
-    var fp = utils.unixify(file, opts);
-
-    if (!_isMatch(fp)) { continue; }
-    res.push(fp);
-  }
-
-  if (res.length === 0) {
-    if (opts.failglob === true) {
-      throw new Error('micromatch.match() found no matches for: "' + orig + '".');
-    }
-
-    if (opts.nonull || opts.nullglob) {
-      res.push(utils.unescapeGlob(orig));
-    }
-  }
-
-  // if `negate` was defined, diff negated files
-  if (negate) { res = utils.diff(files, res); }
-
-  // if `ignore` was defined, diff ignored filed
-  if (opts.ignore && opts.ignore.length) {
-    pattern = opts.ignore;
-    opts = utils.omit(opts, ['ignore']);
-    res = utils.diff(res, micromatch(res, pattern, opts));
-  }
-
-  if (opts.nodupes) {
-    return utils.unique(res);
-  }
-  return res;
-}
-
-/**
- * Returns a function that takes a glob pattern or array of glob patterns
- * to be used with `Array#filter()`. (Internally this function generates
- * the matching function using the [matcher] method).
- *
- * ```js
- * var fn = mm.filter('[a-c]');
- * ['a', 'b', 'c', 'd', 'e'].filter(fn);
- * //=> ['a', 'b', 'c']
- * ```
- * @param  {String|Array} `patterns` Can be a glob or array of globs.
- * @param  {Options} `opts` Options to pass to the [matcher] method.
- * @return {Function} Filter function to be passed to `Array#filter()`.
- */
-
-function filter(patterns, opts) {
-  if (!Array.isArray(patterns) && typeof patterns !== 'string') {
-    throw new TypeError(msg('filter', 'patterns', 'a string or array'));
-  }
-
-  patterns = utils.arrayify(patterns);
-  var len = patterns.length, i = 0;
-  var patternMatchers = Array(len);
-  while (i < len) {
-    patternMatchers[i] = matcher(patterns[i++], opts);
-  }
-
-  return function(fp) {
-    if (fp == null) return [];
-    var len = patternMatchers.length, i = 0;
-    var res = true;
-
-    fp = utils.unixify(fp, opts);
-    while (i < len) {
-      var fn = patternMatchers[i++];
-      if (!fn(fp)) {
-        res = false;
-        break;
-      }
-    }
-    return res;
-  };
-}
-
-/**
- * Returns true if the filepath contains the given
- * pattern. Can also return a function for matching.
- *
- * ```js
- * isMatch('foo.md', '*.md', {});
- * //=> true
- *
- * isMatch('*.md', {})('foo.md')
- * //=> true
- * ```
- * @param  {String} `fp`
- * @param  {String} `pattern`
- * @param  {Object} `opts`
- * @return {Boolean}
- */
-
-function isMatch(fp, pattern, opts) {
-  if (typeof fp !== 'string') {
-    throw new TypeError(msg('isMatch', 'filepath', 'a string'));
-  }
-
-  fp = utils.unixify(fp, opts);
-  if (utils.typeOf(pattern) === 'object') {
-    return matcher(fp, pattern);
-  }
-  return matcher(pattern, opts)(fp);
-}
-
-/**
- * Returns true if the filepath matches the
- * given pattern.
- */
-
-function contains(fp, pattern, opts) {
-  if (typeof fp !== 'string') {
-    throw new TypeError(msg('contains', 'pattern', 'a string'));
-  }
-
-  opts = opts || {};
-  opts.contains = (pattern !== '');
-  fp = utils.unixify(fp, opts);
-
-  if (opts.contains && !utils.isGlob(pattern)) {
-    return fp.indexOf(pattern) !== -1;
-  }
-  return matcher(pattern, opts)(fp);
-}
-
-/**
- * Returns true if a file path matches any of the
- * given patterns.
- *
- * @param  {String} `fp` The filepath to test.
- * @param  {String|Array} `patterns` Glob patterns to use.
- * @param  {Object} `opts` Options to pass to the `matcher()` function.
- * @return {String}
- */
-
-function any(fp, patterns, opts) {
-  if (!Array.isArray(patterns) && typeof patterns !== 'string') {
-    throw new TypeError(msg('any', 'patterns', 'a string or array'));
-  }
-
-  patterns = utils.arrayify(patterns);
-  var len = patterns.length;
-
-  fp = utils.unixify(fp, opts);
-  while (len--) {
-    var isMatch = matcher(patterns[len], opts);
-    if (isMatch(fp)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Filter the keys of an object with the given `glob` pattern
- * and `options`
- *
- * @param  {Object} `object`
- * @param  {Pattern} `object`
- * @return {Array}
- */
-
-function matchKeys(obj, glob, options) {
-  if (utils.typeOf(obj) !== 'object') {
-    throw new TypeError(msg('matchKeys', 'first argument', 'an object'));
-  }
-
-  var fn = matcher(glob, options);
-  var res = {};
-
-  for (var key in obj) {
-    if (obj.hasOwnProperty(key) && fn(key)) {
-      res[key] = obj[key];
-    }
-  }
-  return res;
-}
-
-/**
- * Return a function for matching based on the
- * given `pattern` and `options`.
- *
- * @param  {String} `pattern`
- * @param  {Object} `options`
- * @return {Function}
- */
-
-function matcher(pattern, opts) {
-  // pattern is a function
-  if (typeof pattern === 'function') {
-    return pattern;
-  }
-  // pattern is a regex
-  if (pattern instanceof RegExp) {
-    return function(fp) {
-      return pattern.test(fp);
-    };
-  }
-
-  if (typeof pattern !== 'string') {
-    throw new TypeError(msg('matcher', 'pattern', 'a string, regex, or function'));
-  }
-
-  // strings, all the way down...
-  pattern = utils.unixify(pattern, opts);
-
-  // pattern is a non-glob string
-  if (!utils.isGlob(pattern)) {
-    return utils.matchPath(pattern, opts);
-  }
-  // pattern is a glob string
-  var re = makeRe(pattern, opts);
-
-  // `matchBase` is defined
-  if (opts && opts.matchBase) {
-    return utils.hasFilename(re, opts);
-  }
-  // `matchBase` is not defined
-  return function(fp) {
-    fp = utils.unixify(fp, opts);
-    return re.test(fp);
-  };
-}
-
-/**
- * Create and cache a regular expression for matching
- * file paths.
- *
- * If the leading character in the `glob` is `!`, a negation
- * regex is returned.
- *
- * @param  {String} `glob`
- * @param  {Object} `options`
- * @return {RegExp}
- */
-
-function toRegex(glob, options) {
-  // clone options to prevent  mutating the original object
-  var opts = Object.create(options || {});
-  var flags = opts.flags || '';
-  if (opts.nocase && flags.indexOf('i') === -1) {
-    flags += 'i';
-  }
-
-  var parsed = expand(glob, opts);
-
-  // pass in tokens to avoid parsing more than once
-  opts.negated = opts.negated || parsed.negated;
-  opts.negate = opts.negated;
-  glob = wrapGlob(parsed.pattern, opts);
-  var re;
-
-  try {
-    re = new RegExp(glob, flags);
-    return re;
-  } catch (err) {
-    err.reason = 'micromatch invalid regex: (' + re + ')';
-    if (opts.strict) throw new SyntaxError(err);
-  }
-
-  // we're only here if a bad pattern was used and the user
-  // passed `options.silent`, so match nothing
-  return /$^/;
-}
-
-/**
- * Create the regex to do the matching. If the leading
- * character in the `glob` is `!` a negation regex is returned.
- *
- * @param {String} `glob`
- * @param {Boolean} `negate`
- */
-
-function wrapGlob(glob, opts) {
-  var prefix = (opts && !opts.contains) ? '^' : '';
-  var after = (opts && !opts.contains) ? '$' : '';
-  glob = ('(?:' + glob + ')' + after);
-  if (opts && opts.negate) {
-    return prefix + ('(?!^' + glob + ').*$');
-  }
-  return prefix + glob;
-}
-
-/**
- * Create and cache a regular expression for matching file paths.
- * If the leading character in the `glob` is `!`, a negation
- * regex is returned.
- *
- * @param  {String} `glob`
- * @param  {Object} `options`
- * @return {RegExp}
- */
-
-function makeRe(glob, opts) {
-  if (utils.typeOf(glob) !== 'string') {
-    throw new Error(msg('makeRe', 'glob', 'a string'));
-  }
-  return utils.cache(toRegex, glob, opts);
-}
-
-/**
- * Make error messages consistent. Follows this format:
- *
- * ```js
- * msg(methodName, argNumber, nativeType);
- * // example:
- * msg('matchKeys', 'first', 'an object');
- * ```
- *
- * @param  {String} `method`
- * @param  {String} `num`
- * @param  {String} `type`
- * @return {String}
- */
-
-function msg(method, what, type) {
-  return 'micromatch.' + method + '(): ' + what + ' should be ' + type + '.';
-}
-
-/**
- * Public methods
- */
-
-/* eslint no-multi-spaces: 0 */
-micromatch.any       = any;
-micromatch.braces    = micromatch.braceExpand = utils.braces;
-micromatch.contains  = contains;
-micromatch.expand    = expand;
-micromatch.filter    = filter;
-micromatch.isMatch   = isMatch;
-micromatch.makeRe    = makeRe;
-micromatch.match     = match;
-micromatch.matcher   = matcher;
-micromatch.matchKeys = matchKeys;
-
-/**
- * Expose `micromatch`
- */
-
-module.exports = micromatch;
-
-
-/***/ }),
-/* 115 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-// a duplex stream is just a stream that is both readable and writable.
-// Since JS doesn't have multiple prototypal inheritance, this class
-// prototypally inherits from Readable, and then parasitically from
-// Writable.
-
-
-
-/*<replacement>*/
-
-var pna = __webpack_require__(180);
-/*</replacement>*/
-
-/*<replacement>*/
-var objectKeys = Object.keys || function (obj) {
-  var keys = [];
-  for (var key in obj) {
-    keys.push(key);
-  }return keys;
-};
-/*</replacement>*/
-
-module.exports = Duplex;
-
-/*<replacement>*/
-var util = __webpack_require__(113);
-util.inherits = __webpack_require__(61);
-/*</replacement>*/
-
-var Readable = __webpack_require__(406);
-var Writable = __webpack_require__(408);
-
-util.inherits(Duplex, Readable);
-
-{
-  // avoid scope creep, the keys array can then be collected
-  var keys = objectKeys(Writable.prototype);
-  for (var v = 0; v < keys.length; v++) {
-    var method = keys[v];
-    if (!Duplex.prototype[method]) Duplex.prototype[method] = Writable.prototype[method];
-  }
-}
-
-function Duplex(options) {
-  if (!(this instanceof Duplex)) return new Duplex(options);
-
-  Readable.call(this, options);
-  Writable.call(this, options);
-
-  if (options && options.readable === false) this.readable = false;
-
-  if (options && options.writable === false) this.writable = false;
-
-  this.allowHalfOpen = true;
-  if (options && options.allowHalfOpen === false) this.allowHalfOpen = false;
-
-  this.once('end', onend);
-}
-
-Object.defineProperty(Duplex.prototype, 'writableHighWaterMark', {
-  // making it explicit this property is not enumerable
-  // because otherwise some prototype manipulation in
-  // userland will fail
-  enumerable: false,
-  get: function () {
-    return this._writableState.highWaterMark;
-  }
-});
-
-// the no-half-open enforcer
-function onend() {
-  // if we allow half-open state, or if the writable side ended,
-  // then we're ok.
-  if (this.allowHalfOpen || this._writableState.ended) return;
-
-  // no more data can be written.
-  // But allow more writes to happen in this tick.
-  pna.nextTick(onEndNT, this);
-}
-
-function onEndNT(self) {
-  self.end();
-}
-
-Object.defineProperty(Duplex.prototype, 'destroyed', {
-  get: function () {
-    if (this._readableState === undefined || this._writableState === undefined) {
-      return false;
-    }
-    return this._readableState.destroyed && this._writableState.destroyed;
-  },
-  set: function (value) {
-    // we ignore the value if the stream
-    // has not been initialized yet
-    if (this._readableState === undefined || this._writableState === undefined) {
-      return;
-    }
-
-    // backward compatibility, the user is explicitly
-    // managing destroyed
-    this._readableState.destroyed = value;
-    this._writableState.destroyed = value;
-  }
-});
-
-Duplex.prototype._destroy = function (err, cb) {
-  this.push(null);
-  this.end();
-
-  pna.nextTick(cb, err);
-};
-
-/***/ }),
-/* 116 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = multicast;
-/* unused harmony export MulticastOperator */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_ConnectableObservable__ = __webpack_require__(423);
-/** PURE_IMPORTS_START _observable_ConnectableObservable PURE_IMPORTS_END */
-
-function multicast(subjectOrSubjectFactory, selector) {
-    return function multicastOperatorFunction(source) {
-        var subjectFactory;
-        if (typeof subjectOrSubjectFactory === 'function') {
-            subjectFactory = subjectOrSubjectFactory;
-        }
-        else {
-            subjectFactory = function subjectFactory() {
-                return subjectOrSubjectFactory;
-            };
-        }
-        if (typeof selector === 'function') {
-            return source.lift(new MulticastOperator(subjectFactory, selector));
-        }
-        var connectable = Object.create(source, __WEBPACK_IMPORTED_MODULE_0__observable_ConnectableObservable__["b" /* connectableObservableDescriptor */]);
-        connectable.source = source;
-        connectable.subjectFactory = subjectFactory;
-        return connectable;
-    };
-}
-var MulticastOperator = /*@__PURE__*/ (function () {
-    function MulticastOperator(subjectFactory, selector) {
-        this.subjectFactory = subjectFactory;
-        this.selector = selector;
-    }
-    MulticastOperator.prototype.call = function (subscriber, source) {
-        var selector = this.selector;
-        var subject = this.subjectFactory();
-        var subscription = selector(subject).subscribe(subscriber);
-        subscription.add(source.subscribe(subject));
-        return subscription;
-    };
-    return MulticastOperator;
-}());
-
-//# sourceMappingURL=multicast.js.map
-
-
-/***/ }),
-/* 117 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return observable; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var observable = typeof Symbol === 'function' && Symbol.observable || '@@observable';
-//# sourceMappingURL=observable.js.map
-
-
-/***/ }),
-/* 118 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = identity;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function identity(x) {
-    return x;
-}
-//# sourceMappingURL=identity.js.map
-
-
-/***/ }),
-/* 119 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var v1 = __webpack_require__(957);
-var v4 = __webpack_require__(958);
-
-var uuid = v4;
-uuid.v1 = v1;
-uuid.v4 = v4;
-
-module.exports = uuid;
-
-
-/***/ }),
-/* 120 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getInstallationMethod = exports.version = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getInstallationMethod = exports.getInstallationMethod = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-    let installationMethod = originalInstallationMethod;
-
-    // If there's a package.json in the parent directory, it could have an
-    // override for the installation method, so we should prefer that over
-    // whatever was originally in Yarn's package.json. This is the case with
-    // systems such as Homebrew, which take the tarball and modify the
-    // installation method so we're aware of the fact that Yarn was installed via
-    // Homebrew (so things like update notifications can point out the correct
-    // command to upgrade).
-    try {
-      const manifestPath = (_path || _load_path()).default.join(__dirname, '..', 'package.json');
-      if ((_fs2 || _load_fs2()).default.existsSync(manifestPath)) {
-        // non-async version is deprecated
-        const manifest = yield (0, (_fs || _load_fs()).readJson)(manifestPath);
-        if (manifest.installationMethod) {
-          installationMethod = manifest.installationMethod;
-        }
-      }
-    } catch (e) {
-      // Ignore any errors; this is not critical functionality.
-    }
-    return installationMethod;
-  });
-
-  return function getInstallationMethod() {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-var _fs;
-
-function _load_fs() {
-  return _fs = __webpack_require__(4);
-}
-
-var _fs2;
-
-function _load_fs2() {
-  return _fs2 = _interopRequireDefault(__webpack_require__(5));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// This will be bundled directly in the .js file for production builds
-var _require = __webpack_require__(194); /**
-                                               * Determines the current version of Yarn itself.
-                                               * 
-                                               */
-
-const version = _require.version,
-      originalInstallationMethod = _require.installationMethod;
-exports.version = version;
-
-/***/ }),
-/* 121 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.getBinFolder = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let updateCwd = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    yield (_fs || _load_fs()).mkdirp(config.globalFolder);
-
-    yield config.init({
-      cwd: config.globalFolder,
-      offline: config.offline,
-      binLinks: true,
-      globalFolder: config.globalFolder,
-      cacheFolder: config._cacheRootFolder,
-      linkFolder: config.linkFolder,
-      enableDefaultRc: config.enableDefaultRc,
-      extraneousYarnrcFiles: config.extraneousYarnrcFiles
-    });
-  });
-
-  return function updateCwd(_x) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let getBins = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    // build up list of registry folders to search for binaries
-    const dirs = [];
-    for (var _iterator2 = Object.keys((_index || _load_index()).registries), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref4 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref4 = _i2.value;
-      }
-
-      const registryName = _ref4;
-
-      const registry = config.registries[registryName];
-      dirs.push(registry.loc);
-    }
-
-    // build up list of binary files
-    const paths = new Set();
-    for (var _iterator3 = dirs, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref5 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref5 = _i3.value;
-      }
-
-      const dir = _ref5;
-
-      const binDir = path.join(dir, '.bin');
-      if (!(yield (_fs || _load_fs()).exists(binDir))) {
-        continue;
-      }
-
-      for (var _iterator4 = yield (_fs || _load_fs()).readdir(binDir), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref6 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref6 = _i4.value;
-        }
-
-        const name = _ref6;
-
-        paths.add(path.join(binDir, name));
-      }
-    }
-    return paths;
-  });
-
-  return function getBins(_x2) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-let getGlobalPrefix = (() => {
-  var _ref7 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, flags) {
-    if (flags.prefix) {
-      return flags.prefix;
-    } else if (config.getOption('prefix', true)) {
-      return String(config.getOption('prefix', true));
-    } else if (process.env.PREFIX) {
-      return process.env.PREFIX;
-    }
-
-    const potentialPrefixFolders = [(_constants || _load_constants()).FALLBACK_GLOBAL_PREFIX];
-    if (process.platform === 'win32') {
-      // %LOCALAPPDATA%\Yarn --> C:\Users\Alice\AppData\Local\Yarn
-      if (process.env.LOCALAPPDATA) {
-        potentialPrefixFolders.unshift(path.join(process.env.LOCALAPPDATA, 'Yarn'));
-      }
-    } else {
-      potentialPrefixFolders.unshift((_constants || _load_constants()).POSIX_GLOBAL_PREFIX);
-    }
-
-    const binFolders = potentialPrefixFolders.map(function (prefix) {
-      return path.join(prefix, 'bin');
-    });
-    const prefixFolderQueryResult = yield (_fs || _load_fs()).getFirstSuitableFolder(binFolders);
-    const prefix = prefixFolderQueryResult.folder && path.dirname(prefixFolderQueryResult.folder);
-
-    if (!prefix) {
-      config.reporter.warn(config.reporter.lang('noGlobalFolder', prefixFolderQueryResult.skipped.map(function (item) {
-        return path.dirname(item.folder);
-      }).join(', ')));
-
-      return (_constants || _load_constants()).FALLBACK_GLOBAL_PREFIX;
-    }
-
-    return prefix;
-  });
-
-  return function getGlobalPrefix(_x3, _x4) {
-    return _ref7.apply(this, arguments);
-  };
-})();
-
-let getBinFolder = exports.getBinFolder = (() => {
-  var _ref8 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, flags) {
-    const prefix = yield getGlobalPrefix(config, flags);
-    return path.resolve(prefix, 'bin');
-  });
-
-  return function getBinFolder(_x5, _x6) {
-    return _ref8.apply(this, arguments);
-  };
-})();
-
-let initUpdateBins = (() => {
-  var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags) {
-    const beforeBins = yield getBins(config);
-    const binFolder = yield getBinFolder(config, flags);
-
-    function throwPermError(err, dest) {
-      if (err.code === 'EACCES') {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('noPermission', dest));
-      } else {
-        throw err;
-      }
-    }
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      try {
-        yield (_fs || _load_fs()).mkdirp(binFolder);
-      } catch (err) {
-        throwPermError(err, binFolder);
-      }
-
-      const afterBins = yield getBins(config);
-
-      // remove old bins
-      for (var _iterator5 = beforeBins, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref11;
-
-        if (_isArray5) {
-          if (_i5 >= _iterator5.length) break;
-          _ref11 = _iterator5[_i5++];
-        } else {
-          _i5 = _iterator5.next();
-          if (_i5.done) break;
-          _ref11 = _i5.value;
-        }
-
-        const src = _ref11;
-
-        if (afterBins.has(src)) {
-          // not old
-          continue;
-        }
-
-        // remove old bin
-        const dest = path.join(binFolder, path.basename(src));
-        try {
-          yield (_fs || _load_fs()).unlink(dest);
-        } catch (err) {
-          throwPermError(err, dest);
-        }
-      }
-
-      // add new bins
-      for (var _iterator6 = afterBins, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-        var _ref12;
-
-        if (_isArray6) {
-          if (_i6 >= _iterator6.length) break;
-          _ref12 = _iterator6[_i6++];
-        } else {
-          _i6 = _iterator6.next();
-          if (_i6.done) break;
-          _ref12 = _i6.value;
-        }
-
-        const src = _ref12;
-
-        // insert new bin
-        const dest = path.join(binFolder, path.basename(src));
-        try {
-          yield (_fs || _load_fs()).unlink(dest);
-          yield (0, (_packageLinker || _load_packageLinker()).linkBin)(src, dest);
-          if (process.platform === 'win32' && dest.indexOf('.cmd') !== -1) {
-            yield (_fs || _load_fs()).rename(dest + '.cmd', dest);
-          }
-        } catch (err) {
-          throwPermError(err, dest);
-        }
-      }
-    });
-  });
-
-  return function initUpdateBins(_x7, _x8, _x9) {
-    return _ref9.apply(this, arguments);
-  };
-})();
-
-let list = (() => {
-  var _ref13 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    yield updateCwd(config);
-
-    // install so we get hard file paths
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.cwd);
-    const install = new (_install || _load_install()).Install({}, config, new (_baseReporter || _load_baseReporter()).default(), lockfile);
-    const patterns = yield install.getFlattenedDeps();
-
-    // dump global modules
-    for (var _iterator7 = patterns, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-      var _ref14;
-
-      if (_isArray7) {
-        if (_i7 >= _iterator7.length) break;
-        _ref14 = _iterator7[_i7++];
-      } else {
-        _i7 = _iterator7.next();
-        if (_i7.done) break;
-        _ref14 = _i7.value;
-      }
-
-      const pattern = _ref14;
-
-      const manifest = install.resolver.getStrictResolvedPattern(pattern);
-      ls(manifest, reporter, false);
-    }
-  });
-
-  return function list(_x10, _x11, _x12, _x13) {
-    return _ref13.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(57);
-}
-
-var _baseReporter;
-
-function _load_baseReporter() {
-  return _baseReporter = _interopRequireDefault(__webpack_require__(108));
-}
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _add;
-
-function _load_add() {
-  return _add = __webpack_require__(165);
-}
-
-var _remove;
-
-function _load_remove() {
-  return _remove = __webpack_require__(359);
-}
-
-var _upgrade;
-
-function _load_upgrade() {
-  return _upgrade = __webpack_require__(207);
-}
-
-var _upgradeInteractive;
-
-function _load_upgradeInteractive() {
-  return _upgradeInteractive = __webpack_require__(362);
-}
-
-var _packageLinker;
-
-function _load_packageLinker() {
-  return _packageLinker = __webpack_require__(211);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class GlobalAdd extends (_add || _load_add()).Add {
-  constructor(args, flags, config, reporter, lockfile) {
-    super(args, flags, config, reporter, lockfile);
-
-    this.linker.setTopLevelBinLinking(false);
-  }
-
-  maybeOutputSaveTree() {
-    for (var _iterator = this.addedPatterns, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const pattern = _ref;
-
-      const manifest = this.resolver.getStrictResolvedPattern(pattern);
-      ls(manifest, this.reporter, true);
-    }
-    return Promise.resolve();
-  }
-
-  _logSuccessSaveLockfile() {
-    // noop
-  }
-}
-
-const path = __webpack_require__(0);
-
-function hasWrapper(flags, args) {
-  return args[0] !== 'bin' && args[0] !== 'dir';
-}
-
-function ls(manifest, reporter, saved) {
-  const bins = manifest.bin ? Object.keys(manifest.bin) : [];
-  const human = `${manifest.name}@${manifest.version}`;
-  if (bins.length) {
-    if (saved) {
-      reporter.success(reporter.lang('packageInstalledWithBinaries', human));
-    } else {
-      reporter.info(reporter.lang('packageHasBinaries', human));
-    }
-    reporter.list(`bins-${manifest.name}`, bins);
-  } else if (saved) {
-    reporter.warn(reporter.lang('packageHasNoBinaries', human));
-  }
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('global', {
-  add(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield updateCwd(config);
-
-      const updateBins = yield initUpdateBins(config, reporter, flags);
-      if (args.indexOf('yarn') !== -1) {
-        reporter.warn(reporter.lang('packageContainsYarnAsGlobal'));
-      }
-
-      // install module
-      const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.cwd);
-      const install = new GlobalAdd(args, flags, config, reporter, lockfile);
-      yield install.init();
-
-      // link binaries
-      yield updateBins();
-    })();
-  },
-
-  bin(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      reporter.log((yield getBinFolder(config, flags)), { force: true });
-    })();
-  },
-
-  dir(config, reporter, flags, args) {
-    reporter.log(config.globalFolder, { force: true });
-    return Promise.resolve();
-  },
-
-  ls(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      reporter.warn(`\`yarn global ls\` is deprecated. Please use \`yarn global list\`.`);
-      yield list(config, reporter, flags, args);
-    })();
-  },
-
-  list(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield list(config, reporter, flags, args);
-    })();
-  },
-
-  remove(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield updateCwd(config);
-
-      const updateBins = yield initUpdateBins(config, reporter, flags);
-
-      // remove module
-      yield (0, (_remove || _load_remove()).run)(config, reporter, flags, args);
-
-      // remove binaries
-      yield updateBins();
-    })();
-  },
-
-  upgrade(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield updateCwd(config);
-
-      const updateBins = yield initUpdateBins(config, reporter, flags);
-
-      // upgrade module
-      yield (0, (_upgrade || _load_upgrade()).run)(config, reporter, flags, args);
-
-      // update binaries
-      yield updateBins();
-    })();
-  },
-
-  upgradeInteractive(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield updateCwd(config);
-
-      const updateBins = yield initUpdateBins(config, reporter, flags);
-
-      // upgrade module
-      yield (0, (_upgradeInteractive || _load_upgradeInteractive()).run)(config, reporter, flags, args);
-
-      // update binaries
-      yield updateBins();
-    })();
-  }
-});
-
-const run = _buildSubCommands.run,
-      _setFlags = _buildSubCommands.setFlags;
-exports.run = run;
-function setFlags(commander) {
-  _setFlags(commander);
-  commander.description('Installs packages globally on your operating system.');
-  commander.option('--prefix <prefix>', 'bin prefix to use to install binaries');
-  commander.option('--latest', 'upgrade to the latest version of packages');
-}
-
-/***/ }),
-/* 122 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-var _validate;
-
-function _load_validate() {
-  return _validate = __webpack_require__(125);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _packageReference;
-
-function _load_packageReference() {
-  return _packageReference = _interopRequireDefault(__webpack_require__(365));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(78);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _version;
-
-function _load_version() {
-  return _version = _interopRequireWildcard(__webpack_require__(226));
-}
-
-var _workspaceResolver;
-
-function _load_workspaceResolver() {
-  return _workspaceResolver = _interopRequireDefault(__webpack_require__(570));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _normalizePattern4;
-
-function _load_normalizePattern() {
-  return _normalizePattern4 = __webpack_require__(37);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const micromatch = __webpack_require__(114);
-
-class PackageRequest {
-  constructor(req, resolver) {
-    this.parentRequest = req.parentRequest;
-    this.parentNames = req.parentNames || [];
-    this.lockfile = resolver.lockfile;
-    this.registry = req.registry;
-    this.reporter = resolver.reporter;
-    this.resolver = resolver;
-    this.optional = req.optional;
-    this.hint = req.hint;
-    this.pattern = req.pattern;
-    this.config = resolver.config;
-    this.foundInfo = null;
-  }
-
-  init() {
-    this.resolver.usedRegistries.add(this.registry);
-  }
-
-  getLocked(remoteType) {
-    // always prioritise root lockfile
-    const shrunk = this.lockfile.getLocked(this.pattern);
-
-    if (shrunk && shrunk.resolved) {
-      const resolvedParts = (_version || _load_version()).explodeHashedUrl(shrunk.resolved);
-
-      // Detect Git protocols (git://HOST/PATH or git+PROTOCOL://HOST/PATH)
-      const preferredRemoteType = /^git(\+[a-z0-9]+)?:\/\//.test(resolvedParts.url) ? 'git' : remoteType;
-
-      return {
-        name: shrunk.name,
-        version: shrunk.version,
-        _uid: shrunk.uid,
-        _remote: {
-          resolved: shrunk.resolved,
-          type: preferredRemoteType,
-          reference: resolvedParts.url,
-          hash: resolvedParts.hash,
-          integrity: shrunk.integrity,
-          registry: shrunk.registry,
-          packageName: shrunk.name
-        },
-        optionalDependencies: shrunk.optionalDependencies || {},
-        dependencies: shrunk.dependencies || {},
-        prebuiltVariants: shrunk.prebuiltVariants || {}
-      };
-    } else {
-      return null;
-    }
-  }
-
-  /**
-   * If the input pattern matches a registry one then attempt to find it on the registry.
-   * Otherwise fork off to an exotic resolver if one matches.
-   */
-
-  findVersionOnRegistry(pattern) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _ref = yield _this.normalize(pattern);
-
-      const range = _ref.range,
-            name = _ref.name;
-
-
-      const exoticResolver = (0, (_index || _load_index()).getExoticResolver)(range);
-      if (exoticResolver) {
-        let data = yield _this.findExoticVersionInfo(exoticResolver, range);
-
-        // clone data as we're manipulating it in place and this could be resolved multiple
-        // times
-        data = Object.assign({}, data);
-
-        // this is so the returned package response uses the overridden name. ie. if the
-        // package's actual name is `bar`, but it's been specified in the manifest like:
-        //   "foo": "http://foo.com/bar.tar.gz"
-        // then we use the foo name
-        data.name = name;
-        return data;
-      }
-
-      const Resolver = _this.getRegistryResolver();
-      const resolver = new Resolver(_this, name, range);
-      try {
-        return yield resolver.resolve();
-      } catch (err) {
-        // if it is not an error thrown by yarn and it has a parent request,
-        // thow a more readable error
-        if (!(err instanceof (_errors || _load_errors()).MessageError) && _this.parentRequest && _this.parentRequest.pattern) {
-          throw new (_errors || _load_errors()).MessageError(_this.reporter.lang('requiredPackageNotFoundRegistry', pattern, _this.parentRequest.pattern, _this.registry));
-        }
-        throw err;
-      }
-    })();
-  }
-
-  /**
-   * Get the registry resolver associated with this package request.
-   */
-
-  getRegistryResolver() {
-    const Resolver = (_index || _load_index()).registries[this.registry];
-    if (Resolver) {
-      return Resolver;
-    } else {
-      throw new (_errors || _load_errors()).MessageError(this.reporter.lang('unknownRegistryResolver', this.registry));
-    }
-  }
-
-  normalizeRange(pattern) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (pattern.indexOf(':') > -1 || pattern.indexOf('@') > -1 || (0, (_index || _load_index()).getExoticResolver)(pattern)) {
-        return pattern;
-      }
-
-      if (!(_semver || _load_semver()).default.validRange(pattern)) {
-        try {
-          if (yield (_fs || _load_fs()).exists((_path || _load_path()).default.join(_this2.config.cwd, pattern, (_constants || _load_constants()).NODE_PACKAGE_JSON))) {
-            _this2.reporter.warn(_this2.reporter.lang('implicitFileDeprecated', pattern));
-            return `file:${pattern}`;
-          }
-        } catch (err) {
-          // pass
-        }
-      }
-
-      return pattern;
-    })();
-  }
-
-  normalize(pattern) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _normalizePattern = (0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(pattern);
-
-      const name = _normalizePattern.name,
-            range = _normalizePattern.range,
-            hasVersion = _normalizePattern.hasVersion;
-
-      const newRange = yield _this3.normalizeRange(range);
-      return { name, range: newRange, hasVersion };
-    })();
-  }
-
-  /**
-   * Construct an exotic resolver instance with the input `ExoticResolver` and `range`.
-   */
-
-  findExoticVersionInfo(ExoticResolver, range) {
-    const resolver = new ExoticResolver(this, range);
-    return resolver.resolve();
-  }
-
-  /**
-   * If the current pattern matches an exotic resolver then delegate to it or else try
-   * the registry.
-   */
-
-  findVersionInfo() {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const exoticResolver = (0, (_index || _load_index()).getExoticResolver)(_this4.pattern);
-      if (exoticResolver) {
-        return _this4.findExoticVersionInfo(exoticResolver, _this4.pattern);
-      } else if ((_workspaceResolver || _load_workspaceResolver()).default.isWorkspace(_this4.pattern, _this4.resolver.workspaceLayout)) {
-        (0, (_invariant || _load_invariant()).default)(_this4.resolver.workspaceLayout, 'expected workspaceLayout');
-        const resolver = new (_workspaceResolver || _load_workspaceResolver()).default(_this4, _this4.pattern, _this4.resolver.workspaceLayout);
-        let manifest;
-        if (_this4.config.focus && !_this4.pattern.includes(_this4.resolver.workspaceLayout.virtualManifestName) && !_this4.pattern.startsWith(_this4.config.focusedWorkspaceName + '@')) {
-          const localInfo = _this4.resolver.workspaceLayout.getManifestByPattern(_this4.pattern);
-          (0, (_invariant || _load_invariant()).default)(localInfo, 'expected local info for ' + _this4.pattern);
-          const localManifest = localInfo.manifest;
-          const requestPattern = localManifest.name + '@' + localManifest.version;
-          manifest = yield _this4.findVersionOnRegistry(requestPattern);
-        }
-        return resolver.resolve(manifest);
-      } else {
-        return _this4.findVersionOnRegistry(_this4.pattern);
-      }
-    })();
-  }
-
-  reportResolvedRangeMatch(info, resolved) {}
-
-  /**
-   * Do the final resolve of a package that had a match with an existing version.
-   * After all unique versions have been discovered, so the best available version
-   * is found.
-   */
-  resolveToExistingVersion(info) {
-    // get final resolved version
-    var _normalizePattern2 = (0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(this.pattern);
-
-    const range = _normalizePattern2.range,
-          name = _normalizePattern2.name;
-
-    const solvedRange = (_semver || _load_semver()).default.validRange(range) ? info.version : range;
-    const resolved = this.resolver.getHighestRangeVersionMatch(name, solvedRange, info);
-    (0, (_invariant || _load_invariant()).default)(resolved, 'should have a resolved reference');
-
-    this.reportResolvedRangeMatch(info, resolved);
-    const ref = resolved._reference;
-    (0, (_invariant || _load_invariant()).default)(ref, 'Resolved package info has no package reference');
-    ref.addRequest(this);
-    ref.addPattern(this.pattern, resolved);
-    ref.addOptional(this.optional);
-  }
-
-  /**
-   * TODO description
-   */
-  find({ fresh, frozen }) {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // find version info for this package pattern
-      const info = yield _this5.findVersionInfo();
-
-      if (!(_semver || _load_semver()).default.valid(info.version)) {
-        throw new (_errors || _load_errors()).MessageError(_this5.reporter.lang('invalidPackageVersion', info.name, info.version));
-      }
-
-      info.fresh = fresh;
-      (0, (_validate || _load_validate()).cleanDependencies)(info, false, _this5.reporter, function () {
-        // swallow warnings
-      });
-
-      // check if while we were resolving this dep we've already resolved one that satisfies
-      // the same range
-
-      var _normalizePattern3 = (0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(_this5.pattern);
-
-      const range = _normalizePattern3.range,
-            name = _normalizePattern3.name;
-
-      const solvedRange = (_semver || _load_semver()).default.validRange(range) ? info.version : range;
-      const resolved = !info.fresh || frozen ? _this5.resolver.getExactVersionMatch(name, solvedRange, info) : _this5.resolver.getHighestRangeVersionMatch(name, solvedRange, info);
-
-      if (resolved) {
-        _this5.resolver.reportPackageWithExistingVersion(_this5, info);
-        return;
-      }
-
-      if (info.flat && !_this5.resolver.flat) {
-        throw new (_errors || _load_errors()).MessageError(_this5.reporter.lang('flatGlobalError', `${info.name}@${info.version}`));
-      }
-
-      // validate version info
-      PackageRequest.validateVersionInfo(info, _this5.reporter);
-
-      //
-      const remote = info._remote;
-      (0, (_invariant || _load_invariant()).default)(remote, 'Missing remote');
-
-      // set package reference
-      const ref = new (_packageReference || _load_packageReference()).default(_this5, info, remote);
-      ref.addPattern(_this5.pattern, info);
-      ref.addOptional(_this5.optional);
-      ref.setFresh(fresh);
-      info._reference = ref;
-      info._remote = remote;
-      // start installation of dependencies
-      const promises = [];
-      const deps = [];
-      const parentNames = [..._this5.parentNames, name];
-      // normal deps
-      for (const depName in info.dependencies) {
-        const depPattern = depName + '@' + info.dependencies[depName];
-        deps.push(depPattern);
-        promises.push(_this5.resolver.find({
-          pattern: depPattern,
-          registry: remote.registry,
-          // dependencies of optional dependencies should themselves be optional
-          optional: _this5.optional,
-          parentRequest: _this5,
-          parentNames
-        }));
-      }
-
-      // optional deps
-      for (const depName in info.optionalDependencies) {
-        const depPattern = depName + '@' + info.optionalDependencies[depName];
-        deps.push(depPattern);
-        promises.push(_this5.resolver.find({
-          hint: 'optional',
-          pattern: depPattern,
-          registry: remote.registry,
-          optional: true,
-          parentRequest: _this5,
-          parentNames
-        }));
-      }
-      if (remote.type === 'workspace' && !_this5.config.production) {
-        // workspaces support dev dependencies
-        for (const depName in info.devDependencies) {
-          const depPattern = depName + '@' + info.devDependencies[depName];
-          deps.push(depPattern);
-          promises.push(_this5.resolver.find({
-            hint: 'dev',
-            pattern: depPattern,
-            registry: remote.registry,
-            optional: false,
-            parentRequest: _this5,
-            parentNames
-          }));
-        }
-      }
-
-      for (var _iterator = promises, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref2 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref2 = _i.value;
-        }
-
-        const promise = _ref2;
-
-        yield promise;
-      }
-
-      ref.addDependencies(deps);
-
-      // Now that we have all dependencies, it's safe to propagate optional
-      for (var _iterator2 = ref.requests.slice(1), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const otherRequest = _ref3;
-
-        ref.addOptional(otherRequest.optional);
-      }
-    })();
-  }
-
-  /**
-   * TODO description
-   */
-
-  static validateVersionInfo(info, reporter) {
-    // human readable name to use in errors
-    const human = `${info.name}@${info.version}`;
-
-    info.version = PackageRequest.getPackageVersion(info);
-
-    for (var _iterator3 = (_constants || _load_constants()).REQUIRED_PACKAGE_KEYS, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref4 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref4 = _i3.value;
-      }
-
-      const key = _ref4;
-
-      if (!info[key]) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('missingRequiredPackageKey', human, key));
-      }
-    }
-  }
-
-  /**
-   * Returns the package version if present, else defaults to the uid
-   */
-
-  static getPackageVersion(info) {
-    // TODO possibly reconsider this behaviour
-    return info.version === undefined ? info._uid : info.version;
-  }
-
-  /**
-   * Gets all of the outdated packages and sorts them appropriately
-   */
-
-  static getOutdatedPackages(lockfile, install, config, reporter, filterByPatterns, flags) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _ref5 = yield install.fetchRequestFromCwd();
-
-      const reqPatterns = _ref5.requests,
-            workspaceLayout = _ref5.workspaceLayout;
-
-      // Filter out workspace patterns if necessary
-
-      let depReqPatterns = workspaceLayout ? reqPatterns.filter(function (p) {
-        return !workspaceLayout.getManifestByPattern(p.pattern);
-      }) : reqPatterns;
-
-      // filter the list down to just the packages requested.
-      // prevents us from having to query the metadata for all packages.
-      if (filterByPatterns && filterByPatterns.length || flags && flags.pattern) {
-        const filterByNames = filterByPatterns && filterByPatterns.length ? filterByPatterns.map(function (pattern) {
-          return (0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(pattern).name;
-        }) : [];
-        depReqPatterns = depReqPatterns.filter(function (dep) {
-          return filterByNames.indexOf((0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(dep.pattern).name) >= 0 || flags && flags.pattern && micromatch.contains((0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(dep.pattern).name, flags.pattern);
-        });
-      }
-
-      const deps = yield Promise.all(depReqPatterns.map((() => {
-        var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ({ pattern, hint, workspaceName, workspaceLoc }) {
-          const locked = lockfile.getLocked(pattern);
-          if (!locked) {
-            throw new (_errors || _load_errors()).MessageError(reporter.lang('lockfileOutdated'));
-          }
-
-          const name = locked.name,
-                current = locked.version;
-
-          let latest = '';
-          let wanted = '';
-          let url = '';
-
-          const normalized = (0, (_normalizePattern4 || _load_normalizePattern()).normalizePattern)(pattern);
-
-          if ((0, (_index || _load_index()).getExoticResolver)(pattern) || (0, (_index || _load_index()).getExoticResolver)(normalized.range)) {
-            latest = wanted = 'exotic';
-            url = normalized.range;
-          } else {
-            const registry = config.registries[locked.registry];
-
-            var _ref7 = yield registry.checkOutdated(config, name, normalized.range);
-
-            latest = _ref7.latest;
-            wanted = _ref7.wanted;
-            url = _ref7.url;
-          }
-
-          return {
-            name,
-            current,
-            wanted,
-            latest,
-            url,
-            hint,
-            range: normalized.range,
-            upgradeTo: '',
-            workspaceName: workspaceName || '',
-            workspaceLoc: workspaceLoc || ''
-          };
-        });
-
-        return function (_x) {
-          return _ref6.apply(this, arguments);
-        };
-      })()));
-
-      // Make sure to always output `exotic` versions to be compatible with npm
-      const isDepOld = function isDepOld({ current, latest, wanted }) {
-        return latest === 'exotic' || (_semver || _load_semver()).default.lt(current, wanted) || (_semver || _load_semver()).default.lt(current, latest);
-      };
-      const orderByName = function orderByName(depA, depB) {
-        return depA.name.localeCompare(depB.name);
-      };
-      return deps.filter(isDepOld).sort(orderByName);
-    })();
-  }
-}
-exports.default = PackageRequest;
-
-/***/ }),
-/* 123 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-class BaseResolver {
-  constructor(request, fragment) {
-    this.resolver = request.resolver;
-    this.reporter = request.reporter;
-    this.fragment = fragment;
-    this.registry = request.registry;
-    this.request = request;
-    this.pattern = request.pattern;
-    this.config = request.config;
-  }
-
-  fork(Resolver, resolveArg, ...args) {
-    const resolver = new Resolver(this.request, ...args);
-    resolver.registry = this.registry;
-    return resolver.resolve(resolveArg);
-  }
-
-  resolve(resolveArg) {
-    throw new Error('Not implemented');
-  }
-}
-exports.default = BaseResolver;
-
-/***/ }),
-/* 124 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(78);
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = _interopRequireWildcard(__webpack_require__(18));
-}
-
-var _version;
-
-function _load_version() {
-  return _version = _interopRequireWildcard(__webpack_require__(226));
-}
-
-var _guessName;
-
-function _load_guessName() {
-  return _guessName = _interopRequireDefault(__webpack_require__(169));
-}
-
-var _index2;
-
-function _load_index2() {
-  return _index2 = __webpack_require__(57);
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-var _git;
-
-function _load_git() {
-  return _git = _interopRequireDefault(__webpack_require__(219));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const urlParse = __webpack_require__(24).parse;
-
-const GIT_HOSTS = ['github.com', 'gitlab.com', 'bitbucket.com', 'bitbucket.org'];
-
-const GIT_PATTERN_MATCHERS = [/^git:/, /^git\+.+:/, /^ssh:/, /^https?:.+\.git$/, /^https?:.+\.git#.+/];
-
-class GitResolver extends (_exoticResolver || _load_exoticResolver()).default {
-  constructor(request, fragment) {
-    super(request, fragment);
-
-    var _versionUtil$explodeH = (_version || _load_version()).explodeHashedUrl(fragment);
-
-    const url = _versionUtil$explodeH.url,
-          hash = _versionUtil$explodeH.hash;
-
-    this.url = url;
-    this.hash = hash;
-  }
-
-  static isVersion(pattern) {
-    for (var _iterator = GIT_PATTERN_MATCHERS, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const matcher = _ref;
-
-      if (matcher.test(pattern)) {
-        return true;
-      }
-    }
-
-    var _urlParse = urlParse(pattern);
-
-    const hostname = _urlParse.hostname,
-          path = _urlParse.path;
-
-    if (hostname && path && GIT_HOSTS.indexOf(hostname) >= 0) {
-      // only if dependency is pointing to a git repo,
-      // e.g. facebook/flow and not file in a git repo facebook/flow/archive/v1.0.0.tar.gz
-      return path.split('/').filter(p => !!p).length === 2;
-    }
-
-    return false;
-  }
-
-  resolve(forked) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let tryRegistry = (() => {
-        var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (registry) {
-          const filename = (_index2 || _load_index2()).registries[registry].filename;
-
-          const file = yield client.getFile(filename);
-          if (!file) {
-            return null;
-          }
-
-          const json = yield config.readJson(`${url}/${filename}`, function () {
-            return JSON.parse(file);
-          });
-          json._uid = commit;
-          json._remote = {
-            resolved: `${url}#${commit}`,
-            type: 'git',
-            reference: url,
-            hash: commit,
-            registry
-          };
-          return json;
-        });
-
-        return function tryRegistry(_x) {
-          return _ref2.apply(this, arguments);
-        };
-      })();
-
-      const url = _this.url;
-
-      // shortcut for hosted git. we will fallback to a GitResolver if the hosted git
-      // optimisations fail which the `forked` flag indicates so we don't get into an
-      // infinite loop
-
-      const parts = urlParse(url);
-      if (false) {
-        // check if this git url uses any of the hostnames defined in our hosted git resolvers
-        for (const name in (_index || _load_index()).hostedGit) {
-          const Resolver = (_index || _load_index()).hostedGit[name];
-          if (Resolver.hostname !== parts.hostname) {
-            continue;
-          }
-
-          // we have a match! clean up the pathname of url artifacts
-          let pathname = parts.pathname;
-          pathname = (_misc || _load_misc()).removePrefix(pathname, '/'); // remove prefixed slash
-          pathname = (_misc || _load_misc()).removeSuffix(pathname, '.git'); // remove .git suffix if present
-
-          const url = `${pathname}${_this.hash ? '#' + decodeURIComponent(_this.hash) : ''}`;
-          return _this.fork(Resolver, false, url);
-        }
-      }
-
-      // get from lockfile
-      const shrunk = _this.request.getLocked('git');
-      if (shrunk) {
-        return shrunk;
-      }
-
-      const config = _this.config;
-
-
-      const gitUrl = (_git || _load_git()).default.npmUrlToGitUrl(url);
-      const client = new (_git || _load_git()).default(config, gitUrl, _this.hash);
-      const commit = yield client.init();
-
-      const file = yield tryRegistry(_this.registry);
-      if (file) {
-        return file;
-      }
-
-      for (const registry in (_index2 || _load_index2()).registries) {
-        if (registry === _this.registry) {
-          continue;
-        }
-
-        const file = yield tryRegistry(registry);
-        if (file) {
-          return file;
-        }
-      }
-
-      return {
-        // This is just the default, it can be overridden with key of dependencies
-        name: (0, (_guessName || _load_guessName()).default)(url),
-        version: '0.0.0',
-        _uid: commit,
-        _remote: {
-          resolved: `${url}#${commit}`,
-          type: 'git',
-          reference: url,
-          hash: commit,
-          registry: 'npm'
-        }
-      };
-    })();
-  }
-}
-exports.default = GitResolver;
-
-/***/ }),
-/* 125 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isValidPackageName = isValidPackageName;
-
-exports.default = function (info, isRoot, reporter, warn) {
-  if (isRoot) {
-    for (const key in (_typos || _load_typos()).default) {
-      if (key in info) {
-        warn(reporter.lang('manifestPotentialTypo', key, (_typos || _load_typos()).default[key]));
-      }
-    }
-  }
-
-  // validate name
-  const name = info.name;
-
-  if (typeof name === 'string') {
-    if (isRoot && isBuiltinModule(name)) {
-      warn(reporter.lang('manifestBuiltinModule', name));
-    }
-
-    // cannot start with a dot
-    if (name[0] === '.') {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('manifestNameDot'));
-    }
-
-    // cannot contain the following characters
-    if (!isValidPackageName(name)) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('manifestNameIllegalChars'));
-    }
-
-    // cannot equal node_modules or favicon.ico
-    const lower = name.toLowerCase();
-    if (lower === 'node_modules' || lower === 'favicon.ico') {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('manifestNameBlacklisted'));
-    }
-  }
-
-  // validate license
-  if (isRoot && !info.private) {
-    if (typeof info.license === 'string') {
-      const license = info.license.replace(/\*$/g, '');
-      if (!(0, (_util || _load_util()).isValidLicense)(license)) {
-        warn(reporter.lang('manifestLicenseInvalid'));
-      }
-    } else {
-      warn(reporter.lang('manifestLicenseNone'));
-    }
-  }
-
-  // validate strings
-  for (var _iterator = strings, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const key = _ref;
-
-    const val = info[key];
-    if (val && typeof val !== 'string') {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('manifestStringExpected', key));
-    }
-  }
-
-  cleanDependencies(info, isRoot, reporter, warn);
-};
-
-exports.cleanDependencies = cleanDependencies;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _util;
-
-function _load_util() {
-  return _util = __webpack_require__(221);
-}
-
-var _typos;
-
-function _load_typos() {
-  return _typos = _interopRequireDefault(__webpack_require__(587));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const isBuiltinModule = __webpack_require__(730);
-
-const strings = ['name', 'version'];
-
-const dependencyKeys = [
-// npm registry will include optionalDependencies in dependencies and we'll want to dedupe them from the
-// other fields first
-'optionalDependencies',
-
-// it's seemingly common to include a dependency in dependencies and devDependencies of the same name but
-// different ranges, this can cause a lot of issues with our determinism and the behaviour of npm is
-// currently unspecified.
-'dependencies', 'devDependencies'];
-
-function isValidName(name) {
-  return !name.match(/[\/@\s\+%:]/) && encodeURIComponent(name) === name;
-}
-
-function isValidScopedName(name) {
-  if (name[0] !== '@') {
-    return false;
-  }
-
-  const parts = name.slice(1).split('/');
-  return parts.length === 2 && isValidName(parts[0]) && isValidName(parts[1]);
-}
-
-function isValidPackageName(name) {
-  return isValidName(name) || isValidScopedName(name);
-}
-
-function cleanDependencies(info, isRoot, reporter, warn) {
-  // get dependency objects
-  const depTypes = [];
-  for (var _iterator2 = dependencyKeys, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref2 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref2 = _i2.value;
-    }
-
-    const type = _ref2;
-
-    const deps = info[type];
-    if (!deps || typeof deps !== 'object') {
-      continue;
-    }
-    depTypes.push([type, deps]);
-  }
-
-  // aggregate all non-trivial deps (not '' or '*')
-  const nonTrivialDeps = new Map();
-  for (var _iterator3 = depTypes, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-    var _ref4;
-
-    if (_isArray3) {
-      if (_i3 >= _iterator3.length) break;
-      _ref4 = _iterator3[_i3++];
-    } else {
-      _i3 = _iterator3.next();
-      if (_i3.done) break;
-      _ref4 = _i3.value;
-    }
-
-    const _ref3 = _ref4;
-    const type = _ref3[0];
-    const deps = _ref3[1];
-
-    for (var _iterator5 = Object.keys(deps), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-      var _ref7;
-
-      if (_isArray5) {
-        if (_i5 >= _iterator5.length) break;
-        _ref7 = _iterator5[_i5++];
-      } else {
-        _i5 = _iterator5.next();
-        if (_i5.done) break;
-        _ref7 = _i5.value;
-      }
-
-      const name = _ref7;
-
-      const version = deps[name];
-      if (!nonTrivialDeps.has(name) && version && version !== '*') {
-        nonTrivialDeps.set(name, { type, version });
-      }
-    }
-  }
-
-  // overwrite first dep of package with non-trivial version, remove the rest
-  const setDeps = new Set();
-  for (var _iterator4 = depTypes, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-    var _ref6;
-
-    if (_isArray4) {
-      if (_i4 >= _iterator4.length) break;
-      _ref6 = _iterator4[_i4++];
-    } else {
-      _i4 = _iterator4.next();
-      if (_i4.done) break;
-      _ref6 = _i4.value;
-    }
-
-    const _ref5 = _ref6;
-    const type = _ref5[0];
-    const deps = _ref5[1];
-
-    for (var _iterator6 = Object.keys(deps), _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-      var _ref8;
-
-      if (_isArray6) {
-        if (_i6 >= _iterator6.length) break;
-        _ref8 = _iterator6[_i6++];
-      } else {
-        _i6 = _iterator6.next();
-        if (_i6.done) break;
-        _ref8 = _i6.value;
-      }
-
-      const name = _ref8;
-
-      let version = deps[name];
-
-      const dep = nonTrivialDeps.get(name);
-      if (dep) {
-        if (version && version !== '*' && version !== dep.version && isRoot) {
-          // only throw a warning when at the root
-          warn(reporter.lang('manifestDependencyCollision', dep.type, name, dep.version, type, version));
-        }
-        version = dep.version;
-      }
-
-      if (setDeps.has(name)) {
-        delete deps[name];
-      } else {
-        deps[name] = version;
-        setDeps.add(name);
-      }
-    }
-  }
-}
-
-/***/ }),
-/* 126 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// getting tag from 19.1.3.6 Object.prototype.toString()
-var cof = __webpack_require__(69);
-var TAG = __webpack_require__(20)('toStringTag');
-// ES3 wrong here
-var ARG = cof(function () { return arguments; }()) == 'Arguments';
-
-// fallback for IE11 Script Access Denied error
-var tryGet = function (it, key) {
-  try {
-    return it[key];
-  } catch (e) { /* empty */ }
-};
-
-module.exports = function (it) {
-  var O, T, B;
-  return it === undefined ? 'Undefined' : it === null ? 'Null'
-    // @@toStringTag case
-    : typeof (T = tryGet(O = Object(it), TAG)) == 'string' ? T
-    // builtinTag case
-    : ARG ? cof(O)
-    // ES3 arguments fallback
-    : (B = cof(O)) == 'Object' && typeof O.callee == 'function' ? 'Arguments' : B;
-};
-
-
-/***/ }),
-/* 127 */
-/***/ (function(module, exports) {
-
-// IE 8- don't enum bug keys
-module.exports = (
-  'constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf'
-).split(',');
-
-
-/***/ }),
-/* 128 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var document = __webpack_require__(17).document;
-module.exports = document && document.documentElement;
-
-
-/***/ }),
-/* 129 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var LIBRARY = __webpack_require__(93);
-var $export = __webpack_require__(60);
-var redefine = __webpack_require__(251);
-var hide = __webpack_require__(42);
-var Iterators = __webpack_require__(53);
-var $iterCreate = __webpack_require__(242);
-var setToStringTag = __webpack_require__(95);
-var getPrototypeOf = __webpack_require__(248);
-var ITERATOR = __webpack_require__(20)('iterator');
-var BUGGY = !([].keys && 'next' in [].keys()); // Safari has buggy iterators w/o `next`
-var FF_ITERATOR = '@@iterator';
-var KEYS = 'keys';
-var VALUES = 'values';
-
-var returnThis = function () { return this; };
-
-module.exports = function (Base, NAME, Constructor, next, DEFAULT, IS_SET, FORCED) {
-  $iterCreate(Constructor, NAME, next);
-  var getMethod = function (kind) {
-    if (!BUGGY && kind in proto) return proto[kind];
-    switch (kind) {
-      case KEYS: return function keys() { return new Constructor(this, kind); };
-      case VALUES: return function values() { return new Constructor(this, kind); };
-    } return function entries() { return new Constructor(this, kind); };
-  };
-  var TAG = NAME + ' Iterator';
-  var DEF_VALUES = DEFAULT == VALUES;
-  var VALUES_BUG = false;
-  var proto = Base.prototype;
-  var $native = proto[ITERATOR] || proto[FF_ITERATOR] || DEFAULT && proto[DEFAULT];
-  var $default = $native || getMethod(DEFAULT);
-  var $entries = DEFAULT ? !DEF_VALUES ? $default : getMethod('entries') : undefined;
-  var $anyNative = NAME == 'Array' ? proto.entries || $native : $native;
-  var methods, key, IteratorPrototype;
-  // Fix native
-  if ($anyNative) {
-    IteratorPrototype = getPrototypeOf($anyNative.call(new Base()));
-    if (IteratorPrototype !== Object.prototype && IteratorPrototype.next) {
-      // Set @@toStringTag to native iterators
-      setToStringTag(IteratorPrototype, TAG, true);
-      // fix for some old engines
-      if (!LIBRARY && typeof IteratorPrototype[ITERATOR] != 'function') hide(IteratorPrototype, ITERATOR, returnThis);
-    }
-  }
-  // fix Array#{values, @@iterator}.name in V8 / FF
-  if (DEF_VALUES && $native && $native.name !== VALUES) {
-    VALUES_BUG = true;
-    $default = function values() { return $native.call(this); };
-  }
-  // Define iterator
-  if ((!LIBRARY || FORCED) && (BUGGY || VALUES_BUG || !proto[ITERATOR])) {
-    hide(proto, ITERATOR, $default);
-  }
-  // Plug for library
-  Iterators[NAME] = $default;
-  Iterators[TAG] = returnThis;
-  if (DEFAULT) {
-    methods = {
-      values: DEF_VALUES ? $default : getMethod(VALUES),
-      keys: IS_SET ? $default : getMethod(KEYS),
-      entries: $entries
-    };
-    if (FORCED) for (key in methods) {
-      if (!(key in proto)) redefine(proto, key, methods[key]);
-    } else $export($export.P + $export.F * (BUGGY || VALUES_BUG), NAME, methods);
-  }
-  return methods;
-};
-
-
-/***/ }),
-/* 130 */
-/***/ (function(module, exports) {
-
-module.exports = function (exec) {
-  try {
-    return { e: false, v: exec() };
-  } catch (e) {
-    return { e: true, v: e };
-  }
-};
-
-
-/***/ }),
-/* 131 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var anObject = __webpack_require__(35);
-var isObject = __webpack_require__(52);
-var newPromiseCapability = __webpack_require__(94);
-
-module.exports = function (C, x) {
-  anObject(C);
-  if (isObject(x) && x.constructor === C) return x;
-  var promiseCapability = newPromiseCapability.f(C);
-  var resolve = promiseCapability.resolve;
-  resolve(x);
-  return promiseCapability.promise;
-};
-
-
-/***/ }),
-/* 132 */
-/***/ (function(module, exports) {
-
-module.exports = function (bitmap, value) {
-  return {
-    enumerable: !(bitmap & 1),
-    configurable: !(bitmap & 2),
-    writable: !(bitmap & 4),
-    value: value
-  };
-};
-
-
-/***/ }),
-/* 133 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var core = __webpack_require__(31);
-var global = __webpack_require__(17);
-var SHARED = '__core-js_shared__';
-var store = global[SHARED] || (global[SHARED] = {});
-
-(module.exports = function (key, value) {
-  return store[key] || (store[key] = value !== undefined ? value : {});
-})('versions', []).push({
-  version: core.version,
-  mode: __webpack_require__(93) ? 'pure' : 'global',
-  copyright: '© 2018 Denis Pushkarev (zloirock.ru)'
-});
-
-
-/***/ }),
-/* 134 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 7.3.20 SpeciesConstructor(O, defaultConstructor)
-var anObject = __webpack_require__(35);
-var aFunction = __webpack_require__(68);
-var SPECIES = __webpack_require__(20)('species');
-module.exports = function (O, D) {
-  var C = anObject(O).constructor;
-  var S;
-  return C === undefined || (S = anObject(C)[SPECIES]) == undefined ? D : aFunction(S);
-};
-
-
-/***/ }),
-/* 135 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var ctx = __webpack_require__(70);
-var invoke = __webpack_require__(239);
-var html = __webpack_require__(128);
-var cel = __webpack_require__(92);
-var global = __webpack_require__(17);
-var process = global.process;
-var setTask = global.setImmediate;
-var clearTask = global.clearImmediate;
-var MessageChannel = global.MessageChannel;
-var Dispatch = global.Dispatch;
-var counter = 0;
-var queue = {};
-var ONREADYSTATECHANGE = 'onreadystatechange';
-var defer, channel, port;
-var run = function () {
-  var id = +this;
-  // eslint-disable-next-line no-prototype-builtins
-  if (queue.hasOwnProperty(id)) {
-    var fn = queue[id];
-    delete queue[id];
-    fn();
-  }
-};
-var listener = function (event) {
-  run.call(event.data);
-};
-// Node.js 0.9+ & IE10+ has setImmediate, otherwise:
-if (!setTask || !clearTask) {
-  setTask = function setImmediate(fn) {
-    var args = [];
-    var i = 1;
-    while (arguments.length > i) args.push(arguments[i++]);
-    queue[++counter] = function () {
-      // eslint-disable-next-line no-new-func
-      invoke(typeof fn == 'function' ? fn : Function(fn), args);
-    };
-    defer(counter);
-    return counter;
-  };
-  clearTask = function clearImmediate(id) {
-    delete queue[id];
-  };
-  // Node.js 0.8-
-  if (__webpack_require__(69)(process) == 'process') {
-    defer = function (id) {
-      process.nextTick(ctx(run, id, 1));
-    };
-  // Sphere (JS game engine) Dispatch API
-  } else if (Dispatch && Dispatch.now) {
-    defer = function (id) {
-      Dispatch.now(ctx(run, id, 1));
-    };
-  // Browsers with MessageChannel, includes WebWorkers
-  } else if (MessageChannel) {
-    channel = new MessageChannel();
-    port = channel.port2;
-    channel.port1.onmessage = listener;
-    defer = ctx(port.postMessage, port, 1);
-  // Browsers with postMessage, skip WebWorkers
-  // IE8 has postMessage, but it's sync & typeof its postMessage is 'object'
-  } else if (global.addEventListener && typeof postMessage == 'function' && !global.importScripts) {
-    defer = function (id) {
-      global.postMessage(id + '', '*');
-    };
-    global.addEventListener('message', listener, false);
-  // IE8-
-  } else if (ONREADYSTATECHANGE in cel('script')) {
-    defer = function (id) {
-      html.appendChild(cel('script'))[ONREADYSTATECHANGE] = function () {
-        html.removeChild(this);
-        run.call(id);
-      };
-    };
-  // Rest old browsers
-  } else {
-    defer = function (id) {
-      setTimeout(ctx(run, id, 1), 0);
-    };
-  }
-}
-module.exports = {
-  set: setTask,
-  clear: clearTask
-};
-
-
-/***/ }),
-/* 136 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 7.1.15 ToLength
-var toInteger = __webpack_require__(97);
-var min = Math.min;
-module.exports = function (it) {
-  return it > 0 ? min(toInteger(it), 0x1fffffffffffff) : 0; // pow(2, 53) - 1 == 9007199254740991
-};
-
-
-/***/ }),
-/* 137 */
-/***/ (function(module, exports) {
-
-var id = 0;
-var px = Math.random();
-module.exports = function (key) {
-  return 'Symbol('.concat(key === undefined ? '' : key, ')_', (++id + px).toString(36));
-};
-
-
-/***/ }),
-/* 138 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/**
- * This is the common logic for both the Node.js and web browser
- * implementations of `debug()`.
- *
- * Expose `debug()` as the module.
- */
-
-exports = module.exports = createDebug.debug = createDebug['default'] = createDebug;
-exports.coerce = coerce;
-exports.disable = disable;
-exports.enable = enable;
-exports.enabled = enabled;
-exports.humanize = __webpack_require__(301);
-
-/**
- * Active `debug` instances.
- */
-exports.instances = [];
-
-/**
- * The currently active debug mode names, and names to skip.
- */
-
-exports.names = [];
-exports.skips = [];
-
-/**
- * Map of special "%n" handling functions, for the debug "format" argument.
- *
- * Valid key names are a single, lower or upper-case letter, i.e. "n" and "N".
- */
-
-exports.formatters = {};
-
-/**
- * Select a color.
- * @param {String} namespace
- * @return {Number}
- * @api private
- */
-
-function selectColor(namespace) {
-  var hash = 0, i;
-
-  for (i in namespace) {
-    hash  = ((hash << 5) - hash) + namespace.charCodeAt(i);
-    hash |= 0; // Convert to 32bit integer
-  }
-
-  return exports.colors[Math.abs(hash) % exports.colors.length];
-}
-
-/**
- * Create a debugger with the given `namespace`.
- *
- * @param {String} namespace
- * @return {Function}
- * @api public
- */
-
-function createDebug(namespace) {
-
-  var prevTime;
-
-  function debug() {
-    // disabled?
-    if (!debug.enabled) return;
-
-    var self = debug;
-
-    // set `diff` timestamp
-    var curr = +new Date();
-    var ms = curr - (prevTime || curr);
-    self.diff = ms;
-    self.prev = prevTime;
-    self.curr = curr;
-    prevTime = curr;
-
-    // turn the `arguments` into a proper Array
-    var args = new Array(arguments.length);
-    for (var i = 0; i < args.length; i++) {
-      args[i] = arguments[i];
-    }
-
-    args[0] = exports.coerce(args[0]);
-
-    if ('string' !== typeof args[0]) {
-      // anything else let's inspect with %O
-      args.unshift('%O');
-    }
-
-    // apply any `formatters` transformations
-    var index = 0;
-    args[0] = args[0].replace(/%([a-zA-Z%])/g, function(match, format) {
-      // if we encounter an escaped % then don't increase the array index
-      if (match === '%%') return match;
-      index++;
-      var formatter = exports.formatters[format];
-      if ('function' === typeof formatter) {
-        var val = args[index];
-        match = formatter.call(self, val);
-
-        // now we need to remove `args[index]` since it's inlined in the `format`
-        args.splice(index, 1);
-        index--;
-      }
-      return match;
-    });
-
-    // apply env-specific formatting (colors, etc.)
-    exports.formatArgs.call(self, args);
-
-    var logFn = debug.log || exports.log || console.log.bind(console);
-    logFn.apply(self, args);
-  }
-
-  debug.namespace = namespace;
-  debug.enabled = exports.enabled(namespace);
-  debug.useColors = exports.useColors();
-  debug.color = selectColor(namespace);
-  debug.destroy = destroy;
-
-  // env-specific initialization logic for debug instances
-  if ('function' === typeof exports.init) {
-    exports.init(debug);
-  }
-
-  exports.instances.push(debug);
-
-  return debug;
-}
-
-function destroy () {
-  var index = exports.instances.indexOf(this);
-  if (index !== -1) {
-    exports.instances.splice(index, 1);
-    return true;
-  } else {
-    return false;
-  }
-}
-
-/**
- * Enables a debug mode by namespaces. This can include modes
- * separated by a colon and wildcards.
- *
- * @param {String} namespaces
- * @api public
- */
-
-function enable(namespaces) {
-  exports.save(namespaces);
-
-  exports.names = [];
-  exports.skips = [];
-
-  var i;
-  var split = (typeof namespaces === 'string' ? namespaces : '').split(/[\s,]+/);
-  var len = split.length;
-
-  for (i = 0; i < len; i++) {
-    if (!split[i]) continue; // ignore empty strings
-    namespaces = split[i].replace(/\*/g, '.*?');
-    if (namespaces[0] === '-') {
-      exports.skips.push(new RegExp('^' + namespaces.substr(1) + '$'));
-    } else {
-      exports.names.push(new RegExp('^' + namespaces + '$'));
-    }
-  }
-
-  for (i = 0; i < exports.instances.length; i++) {
-    var instance = exports.instances[i];
-    instance.enabled = exports.enabled(instance.namespace);
-  }
-}
-
-/**
- * Disable debug output.
- *
- * @api public
- */
-
-function disable() {
-  exports.enable('');
-}
-
-/**
- * Returns true if the given mode name is enabled, false otherwise.
- *
- * @param {String} name
- * @return {Boolean}
- * @api public
- */
-
-function enabled(name) {
-  if (name[name.length - 1] === '*') {
-    return true;
-  }
-  var i, len;
-  for (i = 0, len = exports.skips.length; i < len; i++) {
-    if (exports.skips[i].test(name)) {
-      return false;
-    }
-  }
-  for (i = 0, len = exports.names.length; i < len; i++) {
-    if (exports.names[i].test(name)) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * Coerce `val`.
- *
- * @param {Mixed} val
- * @return {Mixed}
- * @api private
- */
-
-function coerce(val) {
-  if (val instanceof Error) return val.stack || val.message;
-  return val;
-}
-
-
-/***/ }),
-/* 139 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Basic Javascript Elliptic Curve implementation
-// Ported loosely from BouncyCastle's Java EC code
-// Only Fp curves implemented for now
-
-// Requires jsbn.js and jsbn2.js
-var BigInteger = __webpack_require__(81).BigInteger
-var Barrett = BigInteger.prototype.Barrett
-
-// ----------------
-// ECFieldElementFp
-
-// constructor
-function ECFieldElementFp(q,x) {
-    this.x = x;
-    // TODO if(x.compareTo(q) >= 0) error
-    this.q = q;
-}
-
-function feFpEquals(other) {
-    if(other == this) return true;
-    return (this.q.equals(other.q) && this.x.equals(other.x));
-}
-
-function feFpToBigInteger() {
-    return this.x;
-}
-
-function feFpNegate() {
-    return new ECFieldElementFp(this.q, this.x.negate().mod(this.q));
-}
-
-function feFpAdd(b) {
-    return new ECFieldElementFp(this.q, this.x.add(b.toBigInteger()).mod(this.q));
-}
-
-function feFpSubtract(b) {
-    return new ECFieldElementFp(this.q, this.x.subtract(b.toBigInteger()).mod(this.q));
-}
-
-function feFpMultiply(b) {
-    return new ECFieldElementFp(this.q, this.x.multiply(b.toBigInteger()).mod(this.q));
-}
-
-function feFpSquare() {
-    return new ECFieldElementFp(this.q, this.x.square().mod(this.q));
-}
-
-function feFpDivide(b) {
-    return new ECFieldElementFp(this.q, this.x.multiply(b.toBigInteger().modInverse(this.q)).mod(this.q));
-}
-
-ECFieldElementFp.prototype.equals = feFpEquals;
-ECFieldElementFp.prototype.toBigInteger = feFpToBigInteger;
-ECFieldElementFp.prototype.negate = feFpNegate;
-ECFieldElementFp.prototype.add = feFpAdd;
-ECFieldElementFp.prototype.subtract = feFpSubtract;
-ECFieldElementFp.prototype.multiply = feFpMultiply;
-ECFieldElementFp.prototype.square = feFpSquare;
-ECFieldElementFp.prototype.divide = feFpDivide;
-
-// ----------------
-// ECPointFp
-
-// constructor
-function ECPointFp(curve,x,y,z) {
-    this.curve = curve;
-    this.x = x;
-    this.y = y;
-    // Projective coordinates: either zinv == null or z * zinv == 1
-    // z and zinv are just BigIntegers, not fieldElements
-    if(z == null) {
-      this.z = BigInteger.ONE;
-    }
-    else {
-      this.z = z;
-    }
-    this.zinv = null;
-    //TODO: compression flag
-}
-
-function pointFpGetX() {
-    if(this.zinv == null) {
-      this.zinv = this.z.modInverse(this.curve.q);
-    }
-    var r = this.x.toBigInteger().multiply(this.zinv);
-    this.curve.reduce(r);
-    return this.curve.fromBigInteger(r);
-}
-
-function pointFpGetY() {
-    if(this.zinv == null) {
-      this.zinv = this.z.modInverse(this.curve.q);
-    }
-    var r = this.y.toBigInteger().multiply(this.zinv);
-    this.curve.reduce(r);
-    return this.curve.fromBigInteger(r);
-}
-
-function pointFpEquals(other) {
-    if(other == this) return true;
-    if(this.isInfinity()) return other.isInfinity();
-    if(other.isInfinity()) return this.isInfinity();
-    var u, v;
-    // u = Y2 * Z1 - Y1 * Z2
-    u = other.y.toBigInteger().multiply(this.z).subtract(this.y.toBigInteger().multiply(other.z)).mod(this.curve.q);
-    if(!u.equals(BigInteger.ZERO)) return false;
-    // v = X2 * Z1 - X1 * Z2
-    v = other.x.toBigInteger().multiply(this.z).subtract(this.x.toBigInteger().multiply(other.z)).mod(this.curve.q);
-    return v.equals(BigInteger.ZERO);
-}
-
-function pointFpIsInfinity() {
-    if((this.x == null) && (this.y == null)) return true;
-    return this.z.equals(BigInteger.ZERO) && !this.y.toBigInteger().equals(BigInteger.ZERO);
-}
-
-function pointFpNegate() {
-    return new ECPointFp(this.curve, this.x, this.y.negate(), this.z);
-}
-
-function pointFpAdd(b) {
-    if(this.isInfinity()) return b;
-    if(b.isInfinity()) return this;
-
-    // u = Y2 * Z1 - Y1 * Z2
-    var u = b.y.toBigInteger().multiply(this.z).subtract(this.y.toBigInteger().multiply(b.z)).mod(this.curve.q);
-    // v = X2 * Z1 - X1 * Z2
-    var v = b.x.toBigInteger().multiply(this.z).subtract(this.x.toBigInteger().multiply(b.z)).mod(this.curve.q);
-
-    if(BigInteger.ZERO.equals(v)) {
-        if(BigInteger.ZERO.equals(u)) {
-            return this.twice(); // this == b, so double
-        }
-	return this.curve.getInfinity(); // this = -b, so infinity
-    }
-
-    var THREE = new BigInteger("3");
-    var x1 = this.x.toBigInteger();
-    var y1 = this.y.toBigInteger();
-    var x2 = b.x.toBigInteger();
-    var y2 = b.y.toBigInteger();
-
-    var v2 = v.square();
-    var v3 = v2.multiply(v);
-    var x1v2 = x1.multiply(v2);
-    var zu2 = u.square().multiply(this.z);
-
-    // x3 = v * (z2 * (z1 * u^2 - 2 * x1 * v^2) - v^3)
-    var x3 = zu2.subtract(x1v2.shiftLeft(1)).multiply(b.z).subtract(v3).multiply(v).mod(this.curve.q);
-    // y3 = z2 * (3 * x1 * u * v^2 - y1 * v^3 - z1 * u^3) + u * v^3
-    var y3 = x1v2.multiply(THREE).multiply(u).subtract(y1.multiply(v3)).subtract(zu2.multiply(u)).multiply(b.z).add(u.multiply(v3)).mod(this.curve.q);
-    // z3 = v^3 * z1 * z2
-    var z3 = v3.multiply(this.z).multiply(b.z).mod(this.curve.q);
-
-    return new ECPointFp(this.curve, this.curve.fromBigInteger(x3), this.curve.fromBigInteger(y3), z3);
-}
-
-function pointFpTwice() {
-    if(this.isInfinity()) return this;
-    if(this.y.toBigInteger().signum() == 0) return this.curve.getInfinity();
-
-    // TODO: optimized handling of constants
-    var THREE = new BigInteger("3");
-    var x1 = this.x.toBigInteger();
-    var y1 = this.y.toBigInteger();
-
-    var y1z1 = y1.multiply(this.z);
-    var y1sqz1 = y1z1.multiply(y1).mod(this.curve.q);
-    var a = this.curve.a.toBigInteger();
-
-    // w = 3 * x1^2 + a * z1^2
-    var w = x1.square().multiply(THREE);
-    if(!BigInteger.ZERO.equals(a)) {
-      w = w.add(this.z.square().multiply(a));
-    }
-    w = w.mod(this.curve.q);
-    //this.curve.reduce(w);
-    // x3 = 2 * y1 * z1 * (w^2 - 8 * x1 * y1^2 * z1)
-    var x3 = w.square().subtract(x1.shiftLeft(3).multiply(y1sqz1)).shiftLeft(1).multiply(y1z1).mod(this.curve.q);
-    // y3 = 4 * y1^2 * z1 * (3 * w * x1 - 2 * y1^2 * z1) - w^3
-    var y3 = w.multiply(THREE).multiply(x1).subtract(y1sqz1.shiftLeft(1)).shiftLeft(2).multiply(y1sqz1).subtract(w.square().multiply(w)).mod(this.curve.q);
-    // z3 = 8 * (y1 * z1)^3
-    var z3 = y1z1.square().multiply(y1z1).shiftLeft(3).mod(this.curve.q);
-
-    return new ECPointFp(this.curve, this.curve.fromBigInteger(x3), this.curve.fromBigInteger(y3), z3);
-}
-
-// Simple NAF (Non-Adjacent Form) multiplication algorithm
-// TODO: modularize the multiplication algorithm
-function pointFpMultiply(k) {
-    if(this.isInfinity()) return this;
-    if(k.signum() == 0) return this.curve.getInfinity();
-
-    var e = k;
-    var h = e.multiply(new BigInteger("3"));
-
-    var neg = this.negate();
-    var R = this;
-
-    var i;
-    for(i = h.bitLength() - 2; i > 0; --i) {
-	R = R.twice();
-
-	var hBit = h.testBit(i);
-	var eBit = e.testBit(i);
-
-	if (hBit != eBit) {
-	    R = R.add(hBit ? this : neg);
-	}
-    }
-
-    return R;
-}
-
-// Compute this*j + x*k (simultaneous multiplication)
-function pointFpMultiplyTwo(j,x,k) {
-  var i;
-  if(j.bitLength() > k.bitLength())
-    i = j.bitLength() - 1;
-  else
-    i = k.bitLength() - 1;
-
-  var R = this.curve.getInfinity();
-  var both = this.add(x);
-  while(i >= 0) {
-    R = R.twice();
-    if(j.testBit(i)) {
-      if(k.testBit(i)) {
-        R = R.add(both);
-      }
-      else {
-        R = R.add(this);
-      }
-    }
-    else {
-      if(k.testBit(i)) {
-        R = R.add(x);
-      }
-    }
-    --i;
-  }
-
-  return R;
-}
-
-ECPointFp.prototype.getX = pointFpGetX;
-ECPointFp.prototype.getY = pointFpGetY;
-ECPointFp.prototype.equals = pointFpEquals;
-ECPointFp.prototype.isInfinity = pointFpIsInfinity;
-ECPointFp.prototype.negate = pointFpNegate;
-ECPointFp.prototype.add = pointFpAdd;
-ECPointFp.prototype.twice = pointFpTwice;
-ECPointFp.prototype.multiply = pointFpMultiply;
-ECPointFp.prototype.multiplyTwo = pointFpMultiplyTwo;
-
-// ----------------
-// ECCurveFp
-
-// constructor
-function ECCurveFp(q,a,b) {
-    this.q = q;
-    this.a = this.fromBigInteger(a);
-    this.b = this.fromBigInteger(b);
-    this.infinity = new ECPointFp(this, null, null);
-    this.reducer = new Barrett(this.q);
-}
-
-function curveFpGetQ() {
-    return this.q;
-}
-
-function curveFpGetA() {
-    return this.a;
-}
-
-function curveFpGetB() {
-    return this.b;
-}
-
-function curveFpEquals(other) {
-    if(other == this) return true;
-    return(this.q.equals(other.q) && this.a.equals(other.a) && this.b.equals(other.b));
-}
-
-function curveFpGetInfinity() {
-    return this.infinity;
-}
-
-function curveFpFromBigInteger(x) {
-    return new ECFieldElementFp(this.q, x);
-}
-
-function curveReduce(x) {
-    this.reducer.reduce(x);
-}
-
-// for now, work with hex strings because they're easier in JS
-function curveFpDecodePointHex(s) {
-    switch(parseInt(s.substr(0,2), 16)) { // first byte
-    case 0:
-	return this.infinity;
-    case 2:
-    case 3:
-	// point compression not supported yet
-	return null;
-    case 4:
-    case 6:
-    case 7:
-	var len = (s.length - 2) / 2;
-	var xHex = s.substr(2, len);
-	var yHex = s.substr(len+2, len);
-
-	return new ECPointFp(this,
-			     this.fromBigInteger(new BigInteger(xHex, 16)),
-			     this.fromBigInteger(new BigInteger(yHex, 16)));
-
-    default: // unsupported
-	return null;
-    }
-}
-
-function curveFpEncodePointHex(p) {
-	if (p.isInfinity()) return "00";
-	var xHex = p.getX().toBigInteger().toString(16);
-	var yHex = p.getY().toBigInteger().toString(16);
-	var oLen = this.getQ().toString(16).length;
-	if ((oLen % 2) != 0) oLen++;
-	while (xHex.length < oLen) {
-		xHex = "0" + xHex;
-	}
-	while (yHex.length < oLen) {
-		yHex = "0" + yHex;
-	}
-	return "04" + xHex + yHex;
-}
-
-ECCurveFp.prototype.getQ = curveFpGetQ;
-ECCurveFp.prototype.getA = curveFpGetA;
-ECCurveFp.prototype.getB = curveFpGetB;
-ECCurveFp.prototype.equals = curveFpEquals;
-ECCurveFp.prototype.getInfinity = curveFpGetInfinity;
-ECCurveFp.prototype.fromBigInteger = curveFpFromBigInteger;
-ECCurveFp.prototype.reduce = curveReduce;
-//ECCurveFp.prototype.decodePointHex = curveFpDecodePointHex;
-ECCurveFp.prototype.encodePointHex = curveFpEncodePointHex;
-
-// from: https://github.com/kaielvin/jsbn-ec-point-compression
-ECCurveFp.prototype.decodePointHex = function(s)
-{
-	var yIsEven;
-    switch(parseInt(s.substr(0,2), 16)) { // first byte
-    case 0:
-	return this.infinity;
-    case 2:
-	yIsEven = false;
-    case 3:
-	if(yIsEven == undefined) yIsEven = true;
-	var len = s.length - 2;
-	var xHex = s.substr(2, len);
-	var x = this.fromBigInteger(new BigInteger(xHex,16));
-	var alpha = x.multiply(x.square().add(this.getA())).add(this.getB());
-	var beta = alpha.sqrt();
-
-    if (beta == null) throw "Invalid point compression";
-
-    var betaValue = beta.toBigInteger();
-    if (betaValue.testBit(0) != yIsEven)
-    {
-        // Use the other root
-        beta = this.fromBigInteger(this.getQ().subtract(betaValue));
-    }
-    return new ECPointFp(this,x,beta);
-    case 4:
-    case 6:
-    case 7:
-	var len = (s.length - 2) / 2;
-	var xHex = s.substr(2, len);
-	var yHex = s.substr(len+2, len);
-
-	return new ECPointFp(this,
-			     this.fromBigInteger(new BigInteger(xHex, 16)),
-			     this.fromBigInteger(new BigInteger(yHex, 16)));
-
-    default: // unsupported
-	return null;
-    }
-}
-ECCurveFp.prototype.encodeCompressedPointHex = function(p)
-{
-	if (p.isInfinity()) return "00";
-	var xHex = p.getX().toBigInteger().toString(16);
-	var oLen = this.getQ().toString(16).length;
-	if ((oLen % 2) != 0) oLen++;
-	while (xHex.length < oLen)
-		xHex = "0" + xHex;
-	var yPrefix;
-	if(p.getY().toBigInteger().isEven()) yPrefix = "02";
-	else                                 yPrefix = "03";
-
-	return yPrefix + xHex;
-}
-
-
-ECFieldElementFp.prototype.getR = function()
-{
-	if(this.r != undefined) return this.r;
-
-    this.r = null;
-    var bitLength = this.q.bitLength();
-    if (bitLength > 128)
-    {
-        var firstWord = this.q.shiftRight(bitLength - 64);
-        if (firstWord.intValue() == -1)
-        {
-            this.r = BigInteger.ONE.shiftLeft(bitLength).subtract(this.q);
-        }
-    }
-    return this.r;
-}
-ECFieldElementFp.prototype.modMult = function(x1,x2)
-{
-    return this.modReduce(x1.multiply(x2));
-}
-ECFieldElementFp.prototype.modReduce = function(x)
-{
-    if (this.getR() != null)
-    {
-        var qLen = q.bitLength();
-        while (x.bitLength() > (qLen + 1))
-        {
-            var u = x.shiftRight(qLen);
-            var v = x.subtract(u.shiftLeft(qLen));
-            if (!this.getR().equals(BigInteger.ONE))
-            {
-                u = u.multiply(this.getR());
-            }
-            x = u.add(v); 
-        }
-        while (x.compareTo(q) >= 0)
-        {
-            x = x.subtract(q);
-        }
-    }
-    else
-    {
-        x = x.mod(q);
-    }
-    return x;
-}
-ECFieldElementFp.prototype.sqrt = function()
-{
-    if (!this.q.testBit(0)) throw "unsupported";
-
-    // p mod 4 == 3
-    if (this.q.testBit(1))
-    {
-    	var z = new ECFieldElementFp(this.q,this.x.modPow(this.q.shiftRight(2).add(BigInteger.ONE),this.q));
-    	return z.square().equals(this) ? z : null;
-    }
-
-    // p mod 4 == 1
-    var qMinusOne = this.q.subtract(BigInteger.ONE);
-
-    var legendreExponent = qMinusOne.shiftRight(1);
-    if (!(this.x.modPow(legendreExponent, this.q).equals(BigInteger.ONE)))
-    {
-        return null;
-    }
-
-    var u = qMinusOne.shiftRight(2);
-    var k = u.shiftLeft(1).add(BigInteger.ONE);
-
-    var Q = this.x;
-    var fourQ = modDouble(modDouble(Q));
-
-    var U, V;
-    do
-    {
-        var P;
-        do
-        {
-            P = new BigInteger(this.q.bitLength(), new SecureRandom());
-        }
-        while (P.compareTo(this.q) >= 0
-            || !(P.multiply(P).subtract(fourQ).modPow(legendreExponent, this.q).equals(qMinusOne)));
-
-        var result = this.lucasSequence(P, Q, k);
-        U = result[0];
-        V = result[1];
-
-        if (this.modMult(V, V).equals(fourQ))
-        {
-            // Integer division by 2, mod q
-            if (V.testBit(0))
-            {
-                V = V.add(q);
-            }
-
-            V = V.shiftRight(1);
-
-            return new ECFieldElementFp(q,V);
-        }
-    }
-    while (U.equals(BigInteger.ONE) || U.equals(qMinusOne));
-
-    return null;
-}
-ECFieldElementFp.prototype.lucasSequence = function(P,Q,k)
-{
-    var n = k.bitLength();
-    var s = k.getLowestSetBit();
-
-    var Uh = BigInteger.ONE;
-    var Vl = BigInteger.TWO;
-    var Vh = P;
-    var Ql = BigInteger.ONE;
-    var Qh = BigInteger.ONE;
-
-    for (var j = n - 1; j >= s + 1; --j)
-    {
-        Ql = this.modMult(Ql, Qh);
-
-        if (k.testBit(j))
-        {
-            Qh = this.modMult(Ql, Q);
-            Uh = this.modMult(Uh, Vh);
-            Vl = this.modReduce(Vh.multiply(Vl).subtract(P.multiply(Ql)));
-            Vh = this.modReduce(Vh.multiply(Vh).subtract(Qh.shiftLeft(1)));
-        }
-        else
-        {
-            Qh = Ql;
-            Uh = this.modReduce(Uh.multiply(Vl).subtract(Ql));
-            Vh = this.modReduce(Vh.multiply(Vl).subtract(P.multiply(Ql)));
-            Vl = this.modReduce(Vl.multiply(Vl).subtract(Ql.shiftLeft(1)));
-        }
-    }
-
-    Ql = this.modMult(Ql, Qh);
-    Qh = this.modMult(Ql, Q);
-    Uh = this.modReduce(Uh.multiply(Vl).subtract(Ql));
-    Vl = this.modReduce(Vh.multiply(Vl).subtract(P.multiply(Ql)));
-    Ql = this.modMult(Ql, Qh);
-
-    for (var j = 1; j <= s; ++j)
-    {
-        Uh = this.modMult(Uh, Vl);
-        Vl = this.modReduce(Vl.multiply(Vl).subtract(Ql.shiftLeft(1)));
-        Ql = this.modMult(Ql, Ql);
-    }
-
-    return [ Uh, Vl ];
-}
-
-var exports = {
-  ECCurveFp: ECCurveFp,
-  ECPointFp: ECPointFp,
-  ECFieldElementFp: ECFieldElementFp
-}
-
-module.exports = exports
-
-
-/***/ }),
-/* 140 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = realpath
-realpath.realpath = realpath
-realpath.sync = realpathSync
-realpath.realpathSync = realpathSync
-realpath.monkeypatch = monkeypatch
-realpath.unmonkeypatch = unmonkeypatch
-
-var fs = __webpack_require__(5)
-var origRealpath = fs.realpath
-var origRealpathSync = fs.realpathSync
-
-var version = process.version
-var ok = /^v[0-5]\./.test(version)
-var old = __webpack_require__(271)
-
-function newError (er) {
-  return er && er.syscall === 'realpath' && (
-    er.code === 'ELOOP' ||
-    er.code === 'ENOMEM' ||
-    er.code === 'ENAMETOOLONG'
-  )
-}
-
-function realpath (p, cache, cb) {
-  if (ok) {
-    return origRealpath(p, cache, cb)
-  }
-
-  if (typeof cache === 'function') {
-    cb = cache
-    cache = null
-  }
-  origRealpath(p, cache, function (er, result) {
-    if (newError(er)) {
-      old.realpath(p, cache, cb)
-    } else {
-      cb(er, result)
-    }
-  })
-}
-
-function realpathSync (p, cache) {
-  if (ok) {
-    return origRealpathSync(p, cache)
-  }
-
-  try {
-    return origRealpathSync(p, cache)
-  } catch (er) {
-    if (newError(er)) {
-      return old.realpathSync(p, cache)
-    } else {
-      throw er
-    }
-  }
-}
-
-function monkeypatch () {
-  fs.realpath = realpath
-  fs.realpathSync = realpathSync
-}
-
-function unmonkeypatch () {
-  fs.realpath = origRealpath
-  fs.realpathSync = origRealpathSync
-}
-
-
-/***/ }),
-/* 141 */
-/***/ (function(module, exports, __webpack_require__) {
-
-exports.alphasort = alphasort
-exports.alphasorti = alphasorti
-exports.setopts = setopts
-exports.ownProp = ownProp
-exports.makeAbs = makeAbs
-exports.finish = finish
-exports.mark = mark
-exports.isIgnored = isIgnored
-exports.childrenIgnored = childrenIgnored
-
-function ownProp (obj, field) {
-  return Object.prototype.hasOwnProperty.call(obj, field)
-}
-
-var path = __webpack_require__(0)
-var minimatch = __webpack_require__(82)
-var isAbsolute = __webpack_require__(101)
-var Minimatch = minimatch.Minimatch
-
-function alphasorti (a, b) {
-  return a.toLowerCase().localeCompare(b.toLowerCase())
-}
-
-function alphasort (a, b) {
-  return a.localeCompare(b)
-}
-
-function setupIgnores (self, options) {
-  self.ignore = options.ignore || []
-
-  if (!Array.isArray(self.ignore))
-    self.ignore = [self.ignore]
-
-  if (self.ignore.length) {
-    self.ignore = self.ignore.map(ignoreMap)
-  }
-}
-
-// ignore patterns are always in dot:true mode.
-function ignoreMap (pattern) {
-  var gmatcher = null
-  if (pattern.slice(-3) === '/**') {
-    var gpattern = pattern.replace(/(\/\*\*)+$/, '')
-    gmatcher = new Minimatch(gpattern, { dot: true })
-  }
-
-  return {
-    matcher: new Minimatch(pattern, { dot: true }),
-    gmatcher: gmatcher
-  }
-}
-
-function setopts (self, pattern, options) {
-  if (!options)
-    options = {}
-
-  // base-matching: just use globstar for that.
-  if (options.matchBase && -1 === pattern.indexOf("/")) {
-    if (options.noglobstar) {
-      throw new Error("base matching requires globstar")
-    }
-    pattern = "**/" + pattern
-  }
-
-  self.silent = !!options.silent
-  self.pattern = pattern
-  self.strict = options.strict !== false
-  self.realpath = !!options.realpath
-  self.realpathCache = options.realpathCache || Object.create(null)
-  self.follow = !!options.follow
-  self.dot = !!options.dot
-  self.mark = !!options.mark
-  self.nodir = !!options.nodir
-  if (self.nodir)
-    self.mark = true
-  self.sync = !!options.sync
-  self.nounique = !!options.nounique
-  self.nonull = !!options.nonull
-  self.nosort = !!options.nosort
-  self.nocase = !!options.nocase
-  self.stat = !!options.stat
-  self.noprocess = !!options.noprocess
-  self.absolute = !!options.absolute
-
-  self.maxLength = options.maxLength || Infinity
-  self.cache = options.cache || Object.create(null)
-  self.statCache = options.statCache || Object.create(null)
-  self.symlinks = options.symlinks || Object.create(null)
-
-  setupIgnores(self, options)
-
-  self.changedCwd = false
-  var cwd = process.cwd()
-  if (!ownProp(options, "cwd"))
-    self.cwd = cwd
-  else {
-    self.cwd = path.resolve(options.cwd)
-    self.changedCwd = self.cwd !== cwd
-  }
-
-  self.root = options.root || path.resolve(self.cwd, "/")
-  self.root = path.resolve(self.root)
-  if (process.platform === "win32")
-    self.root = self.root.replace(/\\/g, "/")
-
-  // TODO: is an absolute `cwd` supposed to be resolved against `root`?
-  // e.g. { cwd: '/test', root: __dirname } === path.join(__dirname, '/test')
-  self.cwdAbs = isAbsolute(self.cwd) ? self.cwd : makeAbs(self, self.cwd)
-  if (process.platform === "win32")
-    self.cwdAbs = self.cwdAbs.replace(/\\/g, "/")
-  self.nomount = !!options.nomount
-
-  // disable comments and negation in Minimatch.
-  // Note that they are not supported in Glob itself anyway.
-  options.nonegate = true
-  options.nocomment = true
-
-  self.minimatch = new Minimatch(pattern, options)
-  self.options = self.minimatch.options
-}
-
-function finish (self) {
-  var nou = self.nounique
-  var all = nou ? [] : Object.create(null)
-
-  for (var i = 0, l = self.matches.length; i < l; i ++) {
-    var matches = self.matches[i]
-    if (!matches || Object.keys(matches).length === 0) {
-      if (self.nonull) {
-        // do like the shell, and spit out the literal glob
-        var literal = self.minimatch.globSet[i]
-        if (nou)
-          all.push(literal)
-        else
-          all[literal] = true
-      }
-    } else {
-      // had matches
-      var m = Object.keys(matches)
-      if (nou)
-        all.push.apply(all, m)
-      else
-        m.forEach(function (m) {
-          all[m] = true
-        })
-    }
-  }
-
-  if (!nou)
-    all = Object.keys(all)
-
-  if (!self.nosort)
-    all = all.sort(self.nocase ? alphasorti : alphasort)
-
-  // at *some* point we statted all of these
-  if (self.mark) {
-    for (var i = 0; i < all.length; i++) {
-      all[i] = self._mark(all[i])
-    }
-    if (self.nodir) {
-      all = all.filter(function (e) {
-        var notDir = !(/\/$/.test(e))
-        var c = self.cache[e] || self.cache[makeAbs(self, e)]
-        if (notDir && c)
-          notDir = c !== 'DIR' && !Array.isArray(c)
-        return notDir
-      })
-    }
-  }
-
-  if (self.ignore.length)
-    all = all.filter(function(m) {
-      return !isIgnored(self, m)
-    })
-
-  self.found = all
-}
-
-function mark (self, p) {
-  var abs = makeAbs(self, p)
-  var c = self.cache[abs]
-  var m = p
-  if (c) {
-    var isDir = c === 'DIR' || Array.isArray(c)
-    var slash = p.slice(-1) === '/'
-
-    if (isDir && !slash)
-      m += '/'
-    else if (!isDir && slash)
-      m = m.slice(0, -1)
-
-    if (m !== p) {
-      var mabs = makeAbs(self, m)
-      self.statCache[mabs] = self.statCache[abs]
-      self.cache[mabs] = self.cache[abs]
-    }
-  }
-
-  return m
-}
-
-// lotta situps...
-function makeAbs (self, f) {
-  var abs = f
-  if (f.charAt(0) === '/') {
-    abs = path.join(self.root, f)
-  } else if (isAbsolute(f) || f === '') {
-    abs = f
-  } else if (self.changedCwd) {
-    abs = path.resolve(self.cwd, f)
-  } else {
-    abs = path.resolve(f)
-  }
-
-  if (process.platform === 'win32')
-    abs = abs.replace(/\\/g, '/')
-
-  return abs
-}
-
-
-// Return true, if pattern ends with globstar '**', for the accompanying parent directory.
-// Ex:- If node_modules/** is the pattern, add 'node_modules' to ignore list along with it's contents
-function isIgnored (self, path) {
-  if (!self.ignore.length)
-    return false
-
-  return self.ignore.some(function(item) {
-    return item.matcher.match(path) || !!(item.gmatcher && item.gmatcher.match(path))
-  })
-}
-
-function childrenIgnored (self, path) {
-  if (!self.ignore.length)
-    return false
-
-  return self.ignore.some(function(item) {
-    return !!(item.gmatcher && item.gmatcher.match(path))
-  })
-}
-
-
-/***/ }),
-/* 142 */
-/***/ (function(module, exports) {
-
-
-module.exports = function(det, rec, confidence, name, lang) {
-  this.confidence = confidence;
-  this.name = name || rec.name(det);
-  this.lang = lang;
-};
-
-
-/***/ }),
-/* 143 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Standard YAML's Core schema.
-// http://www.yaml.org/spec/1.2/spec.html#id2804923
-//
-// NOTE: JS-YAML does not support schema-specific tag resolution restrictions.
-// So, Core schema has no distinctions from JSON schema is JS-YAML.
-
-
-
-
-
-var Schema = __webpack_require__(44);
-
-
-module.exports = new Schema({
-  include: [
-    __webpack_require__(144)
-  ]
-});
-
-
-/***/ }),
-/* 144 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Standard YAML's JSON schema.
-// http://www.yaml.org/spec/1.2/spec.html#id2803231
-//
-// NOTE: JS-YAML does not support schema-specific tag resolution restrictions.
-// So, this schema is not such strict as defined in the YAML specification.
-// It allows numbers in binary notaion, use `Null` and `NULL` as `null`, etc.
-
-
-
-
-
-var Schema = __webpack_require__(44);
-
-
-module.exports = new Schema({
-  include: [
-    __webpack_require__(100)
-  ],
-  implicit: [
-    __webpack_require__(293),
-    __webpack_require__(285),
-    __webpack_require__(287),
-    __webpack_require__(286)
-  ]
-});
-
-
-/***/ }),
-/* 145 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var path = __webpack_require__(0);
-var fs = __webpack_require__(5);
-var _0777 = parseInt('0777', 8);
-
-module.exports = mkdirP.mkdirp = mkdirP.mkdirP = mkdirP;
-
-function mkdirP (p, opts, f, made) {
-    if (typeof opts === 'function') {
-        f = opts;
-        opts = {};
-    }
-    else if (!opts || typeof opts !== 'object') {
-        opts = { mode: opts };
-    }
-    
-    var mode = opts.mode;
-    var xfs = opts.fs || fs;
-    
-    if (mode === undefined) {
-        mode = _0777 & (~process.umask());
-    }
-    if (!made) made = null;
-    
-    var cb = f || function () {};
-    p = path.resolve(p);
-    
-    xfs.mkdir(p, mode, function (er) {
-        if (!er) {
-            made = made || p;
-            return cb(null, made);
-        }
-        switch (er.code) {
-            case 'ENOENT':
-                mkdirP(path.dirname(p), opts, function (er, made) {
-                    if (er) cb(er, made);
-                    else mkdirP(p, opts, cb, made);
-                });
-                break;
-
-            // In the case of any other error, just see if there's a dir
-            // there already.  If so, then hooray!  If not, then something
-            // is borked.
-            default:
-                xfs.stat(p, function (er2, stat) {
-                    // if the stat fails, then that's super weird.
-                    // let the original error be the failure reason.
-                    if (er2 || !stat.isDirectory()) cb(er, made)
-                    else cb(null, made);
-                });
-                break;
-        }
-    });
-}
-
-mkdirP.sync = function sync (p, opts, made) {
-    if (!opts || typeof opts !== 'object') {
-        opts = { mode: opts };
-    }
-    
-    var mode = opts.mode;
-    var xfs = opts.fs || fs;
-    
-    if (mode === undefined) {
-        mode = _0777 & (~process.umask());
-    }
-    if (!made) made = null;
-
-    p = path.resolve(p);
-
-    try {
-        xfs.mkdirSync(p, mode);
-        made = made || p;
-    }
-    catch (err0) {
-        switch (err0.code) {
-            case 'ENOENT' :
-                made = sync(path.dirname(p), opts, made);
-                sync(p, opts, made);
-                break;
-
-            // In the case of any other error, just see if there's a dir
-            // there already.  If so, then hooray!  If not, then something
-            // is borked.
-            default:
-                var stat;
-                try {
-                    stat = xfs.statSync(p);
-                }
-                catch (err1) {
-                    throw err0;
-                }
-                if (!stat.isDirectory()) throw err0;
-                break;
-        }
-    }
-
-    return made;
-};
-
-
-/***/ }),
-/* 146 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = defaultIfEmpty;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function defaultIfEmpty(defaultValue) {
-    if (defaultValue === void 0) {
-        defaultValue = null;
-    }
-    return function (source) { return source.lift(new DefaultIfEmptyOperator(defaultValue)); };
-}
-var DefaultIfEmptyOperator = /*@__PURE__*/ (function () {
-    function DefaultIfEmptyOperator(defaultValue) {
-        this.defaultValue = defaultValue;
-    }
-    DefaultIfEmptyOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DefaultIfEmptySubscriber(subscriber, this.defaultValue));
-    };
-    return DefaultIfEmptyOperator;
-}());
-var DefaultIfEmptySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DefaultIfEmptySubscriber, _super);
-    function DefaultIfEmptySubscriber(destination, defaultValue) {
-        var _this = _super.call(this, destination) || this;
-        _this.defaultValue = defaultValue;
-        _this.isEmpty = true;
-        return _this;
-    }
-    DefaultIfEmptySubscriber.prototype._next = function (value) {
-        this.isEmpty = false;
-        this.destination.next(value);
-    };
-    DefaultIfEmptySubscriber.prototype._complete = function () {
-        if (this.isEmpty) {
-            this.destination.next(this.defaultValue);
-        }
-        this.destination.complete();
-    };
-    return DefaultIfEmptySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=defaultIfEmpty.js.map
-
-
-/***/ }),
-/* 147 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = filter;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function filter(predicate, thisArg) {
-    return function filterOperatorFunction(source) {
-        return source.lift(new FilterOperator(predicate, thisArg));
-    };
-}
-var FilterOperator = /*@__PURE__*/ (function () {
-    function FilterOperator(predicate, thisArg) {
-        this.predicate = predicate;
-        this.thisArg = thisArg;
-    }
-    FilterOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new FilterSubscriber(subscriber, this.predicate, this.thisArg));
-    };
-    return FilterOperator;
-}());
-var FilterSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](FilterSubscriber, _super);
-    function FilterSubscriber(destination, predicate, thisArg) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.thisArg = thisArg;
-        _this.count = 0;
-        return _this;
-    }
-    FilterSubscriber.prototype._next = function (value) {
-        var result;
-        try {
-            result = this.predicate.call(this.thisArg, value, this.count++);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        if (result) {
-            this.destination.next(value);
-        }
-    };
-    return FilterSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=filter.js.map
-
-
-/***/ }),
-/* 148 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = mergeMap;
-/* unused harmony export MergeMapOperator */
-/* unused harmony export MergeMapSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__map__ = __webpack_require__(47);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__observable_from__ = __webpack_require__(62);
-/** PURE_IMPORTS_START tslib,_util_subscribeToResult,_OuterSubscriber,_InnerSubscriber,_map,_observable_from PURE_IMPORTS_END */
-
-
-
-
-
-
-function mergeMap(project, resultSelector, concurrent) {
-    if (concurrent === void 0) {
-        concurrent = Number.POSITIVE_INFINITY;
-    }
-    if (typeof resultSelector === 'function') {
-        return function (source) { return source.pipe(mergeMap(function (a, i) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__observable_from__["a" /* from */])(project(a, i)).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__map__["a" /* map */])(function (b, ii) { return resultSelector(a, b, i, ii); })); }, concurrent)); };
-    }
-    else if (typeof resultSelector === 'number') {
-        concurrent = resultSelector;
-    }
-    return function (source) { return source.lift(new MergeMapOperator(project, concurrent)); };
-}
-var MergeMapOperator = /*@__PURE__*/ (function () {
-    function MergeMapOperator(project, concurrent) {
-        if (concurrent === void 0) {
-            concurrent = Number.POSITIVE_INFINITY;
-        }
-        this.project = project;
-        this.concurrent = concurrent;
-    }
-    MergeMapOperator.prototype.call = function (observer, source) {
-        return source.subscribe(new MergeMapSubscriber(observer, this.project, this.concurrent));
-    };
-    return MergeMapOperator;
-}());
-
-var MergeMapSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](MergeMapSubscriber, _super);
-    function MergeMapSubscriber(destination, project, concurrent) {
-        if (concurrent === void 0) {
-            concurrent = Number.POSITIVE_INFINITY;
-        }
-        var _this = _super.call(this, destination) || this;
-        _this.project = project;
-        _this.concurrent = concurrent;
-        _this.hasCompleted = false;
-        _this.buffer = [];
-        _this.active = 0;
-        _this.index = 0;
-        return _this;
-    }
-    MergeMapSubscriber.prototype._next = function (value) {
-        if (this.active < this.concurrent) {
-            this._tryNext(value);
-        }
-        else {
-            this.buffer.push(value);
-        }
-    };
-    MergeMapSubscriber.prototype._tryNext = function (value) {
-        var result;
-        var index = this.index++;
-        try {
-            result = this.project(value, index);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.active++;
-        this._innerSub(result, value, index);
-    };
-    MergeMapSubscriber.prototype._innerSub = function (ish, value, index) {
-        var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_3__InnerSubscriber__["a" /* InnerSubscriber */](this, undefined, undefined);
-        var destination = this.destination;
-        destination.add(innerSubscriber);
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_subscribeToResult__["a" /* subscribeToResult */])(this, ish, value, index, innerSubscriber);
-    };
-    MergeMapSubscriber.prototype._complete = function () {
-        this.hasCompleted = true;
-        if (this.active === 0 && this.buffer.length === 0) {
-            this.destination.complete();
-        }
-        this.unsubscribe();
-    };
-    MergeMapSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.destination.next(innerValue);
-    };
-    MergeMapSubscriber.prototype.notifyComplete = function (innerSub) {
-        var buffer = this.buffer;
-        this.remove(innerSub);
-        this.active--;
-        if (buffer.length > 0) {
-            this._next(buffer.shift());
-        }
-        else if (this.active === 0 && this.hasCompleted) {
-            this.destination.complete();
-        }
-    };
-    return MergeMapSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_2__OuterSubscriber__["a" /* OuterSubscriber */]));
-
-//# sourceMappingURL=mergeMap.js.map
-
-
-/***/ }),
-/* 149 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AsyncAction; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Action__ = __webpack_require__(918);
-/** PURE_IMPORTS_START tslib,_Action PURE_IMPORTS_END */
-
-
-var AsyncAction = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AsyncAction, _super);
-    function AsyncAction(scheduler, work) {
-        var _this = _super.call(this, scheduler, work) || this;
-        _this.scheduler = scheduler;
-        _this.work = work;
-        _this.pending = false;
-        return _this;
-    }
-    AsyncAction.prototype.schedule = function (state, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (this.closed) {
-            return this;
-        }
-        this.state = state;
-        var id = this.id;
-        var scheduler = this.scheduler;
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, delay);
-        }
-        this.pending = true;
-        this.delay = delay;
-        this.id = this.id || this.requestAsyncId(scheduler, this.id, delay);
-        return this;
-    };
-    AsyncAction.prototype.requestAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        return setInterval(scheduler.flush.bind(scheduler, this), delay);
-    };
-    AsyncAction.prototype.recycleAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (delay !== null && this.delay === delay && this.pending === false) {
-            return id;
-        }
-        clearInterval(id);
-    };
-    AsyncAction.prototype.execute = function (state, delay) {
-        if (this.closed) {
-            return new Error('executing a cancelled action');
-        }
-        this.pending = false;
-        var error = this._execute(state, delay);
-        if (error) {
-            return error;
-        }
-        else if (this.pending === false && this.id != null) {
-            this.id = this.recycleAsyncId(this.scheduler, this.id, null);
-        }
-    };
-    AsyncAction.prototype._execute = function (state, delay) {
-        var errored = false;
-        var errorValue = undefined;
-        try {
-            this.work(state);
-        }
-        catch (e) {
-            errored = true;
-            errorValue = !!e && e || new Error(e);
-        }
-        if (errored) {
-            this.unsubscribe();
-            return errorValue;
-        }
-    };
-    AsyncAction.prototype._unsubscribe = function () {
-        var id = this.id;
-        var scheduler = this.scheduler;
-        var actions = scheduler.actions;
-        var index = actions.indexOf(this);
-        this.work = null;
-        this.state = null;
-        this.pending = false;
-        this.scheduler = null;
-        if (index !== -1) {
-            actions.splice(index, 1);
-        }
-        if (id != null) {
-            this.id = this.recycleAsyncId(scheduler, id, null);
-        }
-        this.delay = null;
-    };
-    return AsyncAction;
-}(__WEBPACK_IMPORTED_MODULE_1__Action__["a" /* Action */]));
-
-//# sourceMappingURL=AsyncAction.js.map
-
-
-/***/ }),
-/* 150 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AsyncScheduler; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Scheduler__ = __webpack_require__(421);
-/** PURE_IMPORTS_START tslib,_Scheduler PURE_IMPORTS_END */
-
-
-var AsyncScheduler = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AsyncScheduler, _super);
-    function AsyncScheduler(SchedulerAction, now) {
-        if (now === void 0) {
-            now = __WEBPACK_IMPORTED_MODULE_1__Scheduler__["a" /* Scheduler */].now;
-        }
-        var _this = _super.call(this, SchedulerAction, function () {
-            if (AsyncScheduler.delegate && AsyncScheduler.delegate !== _this) {
-                return AsyncScheduler.delegate.now();
-            }
-            else {
-                return now();
-            }
-        }) || this;
-        _this.actions = [];
-        _this.active = false;
-        _this.scheduled = undefined;
-        return _this;
-    }
-    AsyncScheduler.prototype.schedule = function (work, delay, state) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (AsyncScheduler.delegate && AsyncScheduler.delegate !== this) {
-            return AsyncScheduler.delegate.schedule(work, delay, state);
-        }
-        else {
-            return _super.prototype.schedule.call(this, work, delay, state);
-        }
-    };
-    AsyncScheduler.prototype.flush = function (action) {
-        var actions = this.actions;
-        if (this.active) {
-            actions.push(action);
-            return;
-        }
-        var error;
-        this.active = true;
-        do {
-            if (error = action.execute(action.state, action.delay)) {
-                break;
-            }
-        } while (action = actions.shift());
-        this.active = false;
-        if (error) {
-            while (action = actions.shift()) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    };
-    return AsyncScheduler;
-}(__WEBPACK_IMPORTED_MODULE_1__Scheduler__["a" /* Scheduler */]));
-
-//# sourceMappingURL=AsyncScheduler.js.map
-
-
-/***/ }),
-/* 151 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* unused harmony export getSymbolIterator */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return iterator; });
-/* unused harmony export $$iterator */
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function getSymbolIterator() {
-    if (typeof Symbol !== 'function' || !Symbol.iterator) {
-        return '@@iterator';
-    }
-    return Symbol.iterator;
-}
-var iterator = /*@__PURE__*/ getSymbolIterator();
-var $$iterator = iterator;
-//# sourceMappingURL=iterator.js.map
-
-
-/***/ }),
-/* 152 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ArgumentOutOfRangeError; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function ArgumentOutOfRangeErrorImpl() {
-    Error.call(this);
-    this.message = 'argument out of range';
-    this.name = 'ArgumentOutOfRangeError';
-    return this;
-}
-ArgumentOutOfRangeErrorImpl.prototype = /*@__PURE__*/ Object.create(Error.prototype);
-var ArgumentOutOfRangeError = ArgumentOutOfRangeErrorImpl;
-//# sourceMappingURL=ArgumentOutOfRangeError.js.map
-
-
-/***/ }),
-/* 153 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return EmptyError; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function EmptyErrorImpl() {
-    Error.call(this);
-    this.message = 'no elements in sequence';
-    this.name = 'EmptyError';
-    return this;
-}
-EmptyErrorImpl.prototype = /*@__PURE__*/ Object.create(Error.prototype);
-var EmptyError = EmptyErrorImpl;
-//# sourceMappingURL=EmptyError.js.map
-
-
-/***/ }),
-/* 154 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isFunction;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function isFunction(x) {
-    return typeof x === 'function';
-}
-//# sourceMappingURL=isFunction.js.map
-
-
-/***/ }),
-/* 155 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2016 Joyent, Inc.
-
-module.exports = Certificate;
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var crypto = __webpack_require__(11);
-var Fingerprint = __webpack_require__(156);
-var Signature = __webpack_require__(75);
-var errs = __webpack_require__(74);
-var util = __webpack_require__(3);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var Identity = __webpack_require__(158);
-
-var formats = {};
-formats['openssh'] = __webpack_require__(940);
-formats['x509'] = __webpack_require__(457);
-formats['pem'] = __webpack_require__(941);
-
-var CertificateParseError = errs.CertificateParseError;
-var InvalidAlgorithmError = errs.InvalidAlgorithmError;
-
-function Certificate(opts) {
-	assert.object(opts, 'options');
-	assert.arrayOfObject(opts.subjects, 'options.subjects');
-	utils.assertCompatible(opts.subjects[0], Identity, [1, 0],
-	    'options.subjects');
-	utils.assertCompatible(opts.subjectKey, Key, [1, 0],
-	    'options.subjectKey');
-	utils.assertCompatible(opts.issuer, Identity, [1, 0], 'options.issuer');
-	if (opts.issuerKey !== undefined) {
-		utils.assertCompatible(opts.issuerKey, Key, [1, 0],
-		    'options.issuerKey');
-	}
-	assert.object(opts.signatures, 'options.signatures');
-	assert.buffer(opts.serial, 'options.serial');
-	assert.date(opts.validFrom, 'options.validFrom');
-	assert.date(opts.validUntil, 'optons.validUntil');
-
-	assert.optionalArrayOfString(opts.purposes, 'options.purposes');
-
-	this._hashCache = {};
-
-	this.subjects = opts.subjects;
-	this.issuer = opts.issuer;
-	this.subjectKey = opts.subjectKey;
-	this.issuerKey = opts.issuerKey;
-	this.signatures = opts.signatures;
-	this.serial = opts.serial;
-	this.validFrom = opts.validFrom;
-	this.validUntil = opts.validUntil;
-	this.purposes = opts.purposes;
-}
-
-Certificate.formats = formats;
-
-Certificate.prototype.toBuffer = function (format, options) {
-	if (format === undefined)
-		format = 'x509';
-	assert.string(format, 'format');
-	assert.object(formats[format], 'formats[format]');
-	assert.optionalObject(options, 'options');
-
-	return (formats[format].write(this, options));
-};
-
-Certificate.prototype.toString = function (format, options) {
-	if (format === undefined)
-		format = 'pem';
-	return (this.toBuffer(format, options).toString());
-};
-
-Certificate.prototype.fingerprint = function (algo) {
-	if (algo === undefined)
-		algo = 'sha256';
-	assert.string(algo, 'algorithm');
-	var opts = {
-		type: 'certificate',
-		hash: this.hash(algo),
-		algorithm: algo
-	};
-	return (new Fingerprint(opts));
-};
-
-Certificate.prototype.hash = function (algo) {
-	assert.string(algo, 'algorithm');
-	algo = algo.toLowerCase();
-	if (algs.hashAlgs[algo] === undefined)
-		throw (new InvalidAlgorithmError(algo));
-
-	if (this._hashCache[algo])
-		return (this._hashCache[algo]);
-
-	var hash = crypto.createHash(algo).
-	    update(this.toBuffer('x509')).digest();
-	this._hashCache[algo] = hash;
-	return (hash);
-};
-
-Certificate.prototype.isExpired = function (when) {
-	if (when === undefined)
-		when = new Date();
-	return (!((when.getTime() >= this.validFrom.getTime()) &&
-		(when.getTime() < this.validUntil.getTime())));
-};
-
-Certificate.prototype.isSignedBy = function (issuerCert) {
-	utils.assertCompatible(issuerCert, Certificate, [1, 0], 'issuer');
-
-	if (!this.issuer.equals(issuerCert.subjects[0]))
-		return (false);
-	if (this.issuer.purposes && this.issuer.purposes.length > 0 &&
-	    this.issuer.purposes.indexOf('ca') === -1) {
-		return (false);
-	}
-
-	return (this.isSignedByKey(issuerCert.subjectKey));
-};
-
-Certificate.prototype.isSignedByKey = function (issuerKey) {
-	utils.assertCompatible(issuerKey, Key, [1, 2], 'issuerKey');
-
-	if (this.issuerKey !== undefined) {
-		return (this.issuerKey.
-		    fingerprint('sha512').matches(issuerKey));
-	}
-
-	var fmt = Object.keys(this.signatures)[0];
-	var valid = formats[fmt].verify(this, issuerKey);
-	if (valid)
-		this.issuerKey = issuerKey;
-	return (valid);
-};
-
-Certificate.prototype.signWith = function (key) {
-	utils.assertCompatible(key, PrivateKey, [1, 2], 'key');
-	var fmts = Object.keys(formats);
-	var didOne = false;
-	for (var i = 0; i < fmts.length; ++i) {
-		if (fmts[i] !== 'pem') {
-			var ret = formats[fmts[i]].sign(this, key);
-			if (ret === true)
-				didOne = true;
-		}
-	}
-	if (!didOne) {
-		throw (new Error('Failed to sign the certificate for any ' +
-		    'available certificate formats'));
-	}
-};
-
-Certificate.createSelfSigned = function (subjectOrSubjects, key, options) {
-	var subjects;
-	if (Array.isArray(subjectOrSubjects))
-		subjects = subjectOrSubjects;
-	else
-		subjects = [subjectOrSubjects];
-
-	assert.arrayOfObject(subjects);
-	subjects.forEach(function (subject) {
-		utils.assertCompatible(subject, Identity, [1, 0], 'subject');
-	});
-
-	utils.assertCompatible(key, PrivateKey, [1, 2], 'private key');
-
-	assert.optionalObject(options, 'options');
-	if (options === undefined)
-		options = {};
-	assert.optionalObject(options.validFrom, 'options.validFrom');
-	assert.optionalObject(options.validUntil, 'options.validUntil');
-	var validFrom = options.validFrom;
-	var validUntil = options.validUntil;
-	if (validFrom === undefined)
-		validFrom = new Date();
-	if (validUntil === undefined) {
-		assert.optionalNumber(options.lifetime, 'options.lifetime');
-		var lifetime = options.lifetime;
-		if (lifetime === undefined)
-			lifetime = 10*365*24*3600;
-		validUntil = new Date();
-		validUntil.setTime(validUntil.getTime() + lifetime*1000);
-	}
-	assert.optionalBuffer(options.serial, 'options.serial');
-	var serial = options.serial;
-	if (serial === undefined)
-		serial = Buffer.from('0000000000000001', 'hex');
-
-	var purposes = options.purposes;
-	if (purposes === undefined)
-		purposes = [];
-
-	if (purposes.indexOf('signature') === -1)
-		purposes.push('signature');
-
-	/* Self-signed certs are always CAs. */
-	if (purposes.indexOf('ca') === -1)
-		purposes.push('ca');
-	if (purposes.indexOf('crl') === -1)
-		purposes.push('crl');
-
-	/*
-	 * If we weren't explicitly given any other purposes, do the sensible
-	 * thing and add some basic ones depending on the subject type.
-	 */
-	if (purposes.length <= 3) {
-		var hostSubjects = subjects.filter(function (subject) {
-			return (subject.type === 'host');
-		});
-		var userSubjects = subjects.filter(function (subject) {
-			return (subject.type === 'user');
-		});
-		if (hostSubjects.length > 0) {
-			if (purposes.indexOf('serverAuth') === -1)
-				purposes.push('serverAuth');
-		}
-		if (userSubjects.length > 0) {
-			if (purposes.indexOf('clientAuth') === -1)
-				purposes.push('clientAuth');
-		}
-		if (userSubjects.length > 0 || hostSubjects.length > 0) {
-			if (purposes.indexOf('keyAgreement') === -1)
-				purposes.push('keyAgreement');
-			if (key.type === 'rsa' &&
-			    purposes.indexOf('encryption') === -1)
-				purposes.push('encryption');
-		}
-	}
-
-	var cert = new Certificate({
-		subjects: subjects,
-		issuer: subjects[0],
-		subjectKey: key.toPublic(),
-		issuerKey: key.toPublic(),
-		signatures: {},
-		serial: serial,
-		validFrom: validFrom,
-		validUntil: validUntil,
-		purposes: purposes
-	});
-	cert.signWith(key);
-
-	return (cert);
-};
-
-Certificate.create =
-    function (subjectOrSubjects, key, issuer, issuerKey, options) {
-	var subjects;
-	if (Array.isArray(subjectOrSubjects))
-		subjects = subjectOrSubjects;
-	else
-		subjects = [subjectOrSubjects];
-
-	assert.arrayOfObject(subjects);
-	subjects.forEach(function (subject) {
-		utils.assertCompatible(subject, Identity, [1, 0], 'subject');
-	});
-
-	utils.assertCompatible(key, Key, [1, 0], 'key');
-	if (PrivateKey.isPrivateKey(key))
-		key = key.toPublic();
-	utils.assertCompatible(issuer, Identity, [1, 0], 'issuer');
-	utils.assertCompatible(issuerKey, PrivateKey, [1, 2], 'issuer key');
-
-	assert.optionalObject(options, 'options');
-	if (options === undefined)
-		options = {};
-	assert.optionalObject(options.validFrom, 'options.validFrom');
-	assert.optionalObject(options.validUntil, 'options.validUntil');
-	var validFrom = options.validFrom;
-	var validUntil = options.validUntil;
-	if (validFrom === undefined)
-		validFrom = new Date();
-	if (validUntil === undefined) {
-		assert.optionalNumber(options.lifetime, 'options.lifetime');
-		var lifetime = options.lifetime;
-		if (lifetime === undefined)
-			lifetime = 10*365*24*3600;
-		validUntil = new Date();
-		validUntil.setTime(validUntil.getTime() + lifetime*1000);
-	}
-	assert.optionalBuffer(options.serial, 'options.serial');
-	var serial = options.serial;
-	if (serial === undefined)
-		serial = Buffer.from('0000000000000001', 'hex');
-
-	var purposes = options.purposes;
-	if (purposes === undefined)
-		purposes = [];
-
-	if (purposes.indexOf('signature') === -1)
-		purposes.push('signature');
-
-	if (options.ca === true) {
-		if (purposes.indexOf('ca') === -1)
-			purposes.push('ca');
-		if (purposes.indexOf('crl') === -1)
-			purposes.push('crl');
-	}
-
-	var hostSubjects = subjects.filter(function (subject) {
-		return (subject.type === 'host');
-	});
-	var userSubjects = subjects.filter(function (subject) {
-		return (subject.type === 'user');
-	});
-	if (hostSubjects.length > 0) {
-		if (purposes.indexOf('serverAuth') === -1)
-			purposes.push('serverAuth');
-	}
-	if (userSubjects.length > 0) {
-		if (purposes.indexOf('clientAuth') === -1)
-			purposes.push('clientAuth');
-	}
-	if (userSubjects.length > 0 || hostSubjects.length > 0) {
-		if (purposes.indexOf('keyAgreement') === -1)
-			purposes.push('keyAgreement');
-		if (key.type === 'rsa' &&
-		    purposes.indexOf('encryption') === -1)
-			purposes.push('encryption');
-	}
-
-	var cert = new Certificate({
-		subjects: subjects,
-		issuer: issuer,
-		subjectKey: key,
-		issuerKey: issuerKey.toPublic(),
-		signatures: {},
-		serial: serial,
-		validFrom: validFrom,
-		validUntil: validUntil,
-		purposes: purposes
-	});
-	cert.signWith(issuerKey);
-
-	return (cert);
-};
-
-Certificate.parse = function (data, format, options) {
-	if (typeof (data) !== 'string')
-		assert.buffer(data, 'data');
-	if (format === undefined)
-		format = 'auto';
-	assert.string(format, 'format');
-	if (typeof (options) === 'string')
-		options = { filename: options };
-	assert.optionalObject(options, 'options');
-	if (options === undefined)
-		options = {};
-	assert.optionalString(options.filename, 'options.filename');
-	if (options.filename === undefined)
-		options.filename = '(unnamed)';
-
-	assert.object(formats[format], 'formats[format]');
-
-	try {
-		var k = formats[format].read(data, options);
-		return (k);
-	} catch (e) {
-		throw (new CertificateParseError(options.filename, format, e));
-	}
-};
-
-Certificate.isCertificate = function (obj, ver) {
-	return (utils.isCompatible(obj, Certificate, ver));
-};
-
-/*
- * API versions for Certificate:
- * [1,0] -- initial ver
- */
-Certificate.prototype._sshpkApiVersion = [1, 0];
-
-Certificate._oldVersionDetect = function (obj) {
-	return ([1, 0]);
-};
-
-
-/***/ }),
-/* 156 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = Fingerprint;
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var crypto = __webpack_require__(11);
-var errs = __webpack_require__(74);
-var Key = __webpack_require__(27);
-var Certificate = __webpack_require__(155);
-var utils = __webpack_require__(26);
-
-var FingerprintFormatError = errs.FingerprintFormatError;
-var InvalidAlgorithmError = errs.InvalidAlgorithmError;
-
-function Fingerprint(opts) {
-	assert.object(opts, 'options');
-	assert.string(opts.type, 'options.type');
-	assert.buffer(opts.hash, 'options.hash');
-	assert.string(opts.algorithm, 'options.algorithm');
-
-	this.algorithm = opts.algorithm.toLowerCase();
-	if (algs.hashAlgs[this.algorithm] !== true)
-		throw (new InvalidAlgorithmError(this.algorithm));
-
-	this.hash = opts.hash;
-	this.type = opts.type;
-}
-
-Fingerprint.prototype.toString = function (format) {
-	if (format === undefined) {
-		if (this.algorithm === 'md5')
-			format = 'hex';
-		else
-			format = 'base64';
-	}
-	assert.string(format);
-
-	switch (format) {
-	case 'hex':
-		return (addColons(this.hash.toString('hex')));
-	case 'base64':
-		return (sshBase64Format(this.algorithm,
-		    this.hash.toString('base64')));
-	default:
-		throw (new FingerprintFormatError(undefined, format));
-	}
-};
-
-Fingerprint.prototype.matches = function (other) {
-	assert.object(other, 'key or certificate');
-	if (this.type === 'key') {
-		utils.assertCompatible(other, Key, [1, 0], 'key');
-	} else {
-		utils.assertCompatible(other, Certificate, [1, 0],
-		    'certificate');
-	}
-
-	var theirHash = other.hash(this.algorithm);
-	var theirHash2 = crypto.createHash(this.algorithm).
-	    update(theirHash).digest('base64');
-
-	if (this.hash2 === undefined)
-		this.hash2 = crypto.createHash(this.algorithm).
-		    update(this.hash).digest('base64');
-
-	return (this.hash2 === theirHash2);
-};
-
-Fingerprint.parse = function (fp, options) {
-	assert.string(fp, 'fingerprint');
-
-	var alg, hash, enAlgs;
-	if (Array.isArray(options)) {
-		enAlgs = options;
-		options = {};
-	}
-	assert.optionalObject(options, 'options');
-	if (options === undefined)
-		options = {};
-	if (options.enAlgs !== undefined)
-		enAlgs = options.enAlgs;
-	assert.optionalArrayOfString(enAlgs, 'algorithms');
-
-	var parts = fp.split(':');
-	if (parts.length == 2) {
-		alg = parts[0].toLowerCase();
-		/*JSSTYLED*/
-		var base64RE = /^[A-Za-z0-9+\/=]+$/;
-		if (!base64RE.test(parts[1]))
-			throw (new FingerprintFormatError(fp));
-		try {
-			hash = Buffer.from(parts[1], 'base64');
-		} catch (e) {
-			throw (new FingerprintFormatError(fp));
-		}
-	} else if (parts.length > 2) {
-		alg = 'md5';
-		if (parts[0].toLowerCase() === 'md5')
-			parts = parts.slice(1);
-		parts = parts.join('');
-		/*JSSTYLED*/
-		var md5RE = /^[a-fA-F0-9]+$/;
-		if (!md5RE.test(parts))
-			throw (new FingerprintFormatError(fp));
-		try {
-			hash = Buffer.from(parts, 'hex');
-		} catch (e) {
-			throw (new FingerprintFormatError(fp));
-		}
-	}
-
-	if (alg === undefined)
-		throw (new FingerprintFormatError(fp));
-
-	if (algs.hashAlgs[alg] === undefined)
-		throw (new InvalidAlgorithmError(alg));
-
-	if (enAlgs !== undefined) {
-		enAlgs = enAlgs.map(function (a) { return a.toLowerCase(); });
-		if (enAlgs.indexOf(alg) === -1)
-			throw (new InvalidAlgorithmError(alg));
-	}
-
-	return (new Fingerprint({
-		algorithm: alg,
-		hash: hash,
-		type: options.type || 'key'
-	}));
-};
-
-function addColons(s) {
-	/*JSSTYLED*/
-	return (s.replace(/(.{2})(?=.)/g, '$1:'));
-}
-
-function base64Strip(s) {
-	/*JSSTYLED*/
-	return (s.replace(/=*$/, ''));
-}
-
-function sshBase64Format(alg, h) {
-	return (alg.toUpperCase() + ':' + base64Strip(h));
-}
-
-Fingerprint.isFingerprint = function (obj, ver) {
-	return (utils.isCompatible(obj, Fingerprint, ver));
-};
-
-/*
- * API versions for Fingerprint:
- * [1,0] -- initial ver
- * [1,1] -- first tagged ver
- */
-Fingerprint.prototype._sshpkApiVersion = [1, 1];
-
-Fingerprint._oldVersionDetect = function (obj) {
-	assert.func(obj.toString);
-	assert.func(obj.matches);
-	return ([1, 0]);
-};
-
-
-/***/ }),
-/* 157 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	readPkcs8: readPkcs8,
-	write: write,
-	writePkcs8: writePkcs8,
-
-	readECDSACurve: readECDSACurve,
-	writeECDSACurve: writeECDSACurve
-};
-
-var assert = __webpack_require__(16);
-var asn1 = __webpack_require__(66);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var pem = __webpack_require__(86);
-
-function read(buf, options) {
-	return (pem.read(buf, options, 'pkcs8'));
-}
-
-function write(key, options) {
-	return (pem.write(key, options, 'pkcs8'));
-}
-
-/* Helper to read in a single mpint */
-function readMPInt(der, nm) {
-	assert.strictEqual(der.peek(), asn1.Ber.Integer,
-	    nm + ' is not an Integer');
-	return (utils.mpNormalize(der.readString(asn1.Ber.Integer, true)));
-}
-
-function readPkcs8(alg, type, der) {
-	/* Private keys in pkcs#8 format have a weird extra int */
-	if (der.peek() === asn1.Ber.Integer) {
-		assert.strictEqual(type, 'private',
-		    'unexpected Integer at start of public key');
-		der.readString(asn1.Ber.Integer, true);
-	}
-
-	der.readSequence();
-	var next = der.offset + der.length;
-
-	var oid = der.readOID();
-	switch (oid) {
-	case '1.2.840.113549.1.1.1':
-		der._offset = next;
-		if (type === 'public')
-			return (readPkcs8RSAPublic(der));
-		else
-			return (readPkcs8RSAPrivate(der));
-	case '1.2.840.10040.4.1':
-		if (type === 'public')
-			return (readPkcs8DSAPublic(der));
-		else
-			return (readPkcs8DSAPrivate(der));
-	case '1.2.840.10045.2.1':
-		if (type === 'public')
-			return (readPkcs8ECDSAPublic(der));
-		else
-			return (readPkcs8ECDSAPrivate(der));
-	case '1.3.101.112':
-		if (type === 'public') {
-			return (readPkcs8EdDSAPublic(der));
-		} else {
-			return (readPkcs8EdDSAPrivate(der));
-		}
-	case '1.3.101.110':
-		if (type === 'public') {
-			return (readPkcs8X25519Public(der));
-		} else {
-			return (readPkcs8X25519Private(der));
-		}
-	default:
-		throw (new Error('Unknown key type OID ' + oid));
-	}
-}
-
-function readPkcs8RSAPublic(der) {
-	// bit string sequence
-	der.readSequence(asn1.Ber.BitString);
-	der.readByte();
-	der.readSequence();
-
-	// modulus
-	var n = readMPInt(der, 'modulus');
-	var e = readMPInt(der, 'exponent');
-
-	// now, make the key
-	var key = {
-		type: 'rsa',
-		source: der.originalInput,
-		parts: [
-			{ name: 'e', data: e },
-			{ name: 'n', data: n }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs8RSAPrivate(der) {
-	der.readSequence(asn1.Ber.OctetString);
-	der.readSequence();
-
-	var ver = readMPInt(der, 'version');
-	assert.equal(ver[0], 0x0, 'unknown RSA private key version');
-
-	// modulus then public exponent
-	var n = readMPInt(der, 'modulus');
-	var e = readMPInt(der, 'public exponent');
-	var d = readMPInt(der, 'private exponent');
-	var p = readMPInt(der, 'prime1');
-	var q = readMPInt(der, 'prime2');
-	var dmodp = readMPInt(der, 'exponent1');
-	var dmodq = readMPInt(der, 'exponent2');
-	var iqmp = readMPInt(der, 'iqmp');
-
-	// now, make the key
-	var key = {
-		type: 'rsa',
-		parts: [
-			{ name: 'n', data: n },
-			{ name: 'e', data: e },
-			{ name: 'd', data: d },
-			{ name: 'iqmp', data: iqmp },
-			{ name: 'p', data: p },
-			{ name: 'q', data: q },
-			{ name: 'dmodp', data: dmodp },
-			{ name: 'dmodq', data: dmodq }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readPkcs8DSAPublic(der) {
-	der.readSequence();
-
-	var p = readMPInt(der, 'p');
-	var q = readMPInt(der, 'q');
-	var g = readMPInt(der, 'g');
-
-	// bit string sequence
-	der.readSequence(asn1.Ber.BitString);
-	der.readByte();
-
-	var y = readMPInt(der, 'y');
-
-	// now, make the key
-	var key = {
-		type: 'dsa',
-		parts: [
-			{ name: 'p', data: p },
-			{ name: 'q', data: q },
-			{ name: 'g', data: g },
-			{ name: 'y', data: y }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs8DSAPrivate(der) {
-	der.readSequence();
-
-	var p = readMPInt(der, 'p');
-	var q = readMPInt(der, 'q');
-	var g = readMPInt(der, 'g');
-
-	der.readSequence(asn1.Ber.OctetString);
-	var x = readMPInt(der, 'x');
-
-	/* The pkcs#8 format does not include the public key */
-	var y = utils.calculateDSAPublic(g, p, x);
-
-	var key = {
-		type: 'dsa',
-		parts: [
-			{ name: 'p', data: p },
-			{ name: 'q', data: q },
-			{ name: 'g', data: g },
-			{ name: 'y', data: y },
-			{ name: 'x', data: x }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readECDSACurve(der) {
-	var curveName, curveNames;
-	var j, c, cd;
-
-	if (der.peek() === asn1.Ber.OID) {
-		var oid = der.readOID();
-
-		curveNames = Object.keys(algs.curves);
-		for (j = 0; j < curveNames.length; ++j) {
-			c = curveNames[j];
-			cd = algs.curves[c];
-			if (cd.pkcs8oid === oid) {
-				curveName = c;
-				break;
-			}
-		}
-
-	} else {
-		// ECParameters sequence
-		der.readSequence();
-		var version = der.readString(asn1.Ber.Integer, true);
-		assert.strictEqual(version[0], 1, 'ECDSA key not version 1');
-
-		var curve = {};
-
-		// FieldID sequence
-		der.readSequence();
-		var fieldTypeOid = der.readOID();
-		assert.strictEqual(fieldTypeOid, '1.2.840.10045.1.1',
-		    'ECDSA key is not from a prime-field');
-		var p = curve.p = utils.mpNormalize(
-		    der.readString(asn1.Ber.Integer, true));
-		/*
-		 * p always starts with a 1 bit, so count the zeros to get its
-		 * real size.
-		 */
-		curve.size = p.length * 8 - utils.countZeros(p);
-
-		// Curve sequence
-		der.readSequence();
-		curve.a = utils.mpNormalize(
-		    der.readString(asn1.Ber.OctetString, true));
-		curve.b = utils.mpNormalize(
-		    der.readString(asn1.Ber.OctetString, true));
-		if (der.peek() === asn1.Ber.BitString)
-			curve.s = der.readString(asn1.Ber.BitString, true);
-
-		// Combined Gx and Gy
-		curve.G = der.readString(asn1.Ber.OctetString, true);
-		assert.strictEqual(curve.G[0], 0x4,
-		    'uncompressed G is required');
-
-		curve.n = utils.mpNormalize(
-		    der.readString(asn1.Ber.Integer, true));
-		curve.h = utils.mpNormalize(
-		    der.readString(asn1.Ber.Integer, true));
-		assert.strictEqual(curve.h[0], 0x1, 'a cofactor=1 curve is ' +
-		    'required');
-
-		curveNames = Object.keys(algs.curves);
-		var ks = Object.keys(curve);
-		for (j = 0; j < curveNames.length; ++j) {
-			c = curveNames[j];
-			cd = algs.curves[c];
-			var equal = true;
-			for (var i = 0; i < ks.length; ++i) {
-				var k = ks[i];
-				if (cd[k] === undefined)
-					continue;
-				if (typeof (cd[k]) === 'object' &&
-				    cd[k].equals !== undefined) {
-					if (!cd[k].equals(curve[k])) {
-						equal = false;
-						break;
-					}
-				} else if (Buffer.isBuffer(cd[k])) {
-					if (cd[k].toString('binary')
-					    !== curve[k].toString('binary')) {
-						equal = false;
-						break;
-					}
-				} else {
-					if (cd[k] !== curve[k]) {
-						equal = false;
-						break;
-					}
-				}
-			}
-			if (equal) {
-				curveName = c;
-				break;
-			}
-		}
-	}
-	return (curveName);
-}
-
-function readPkcs8ECDSAPrivate(der) {
-	var curveName = readECDSACurve(der);
-	assert.string(curveName, 'a known elliptic curve');
-
-	der.readSequence(asn1.Ber.OctetString);
-	der.readSequence();
-
-	var version = readMPInt(der, 'version');
-	assert.equal(version[0], 1, 'unknown version of ECDSA key');
-
-	var d = der.readString(asn1.Ber.OctetString, true);
-	der.readSequence(0xa1);
-
-	var Q = der.readString(asn1.Ber.BitString, true);
-	Q = utils.ecNormalize(Q);
-
-	var key = {
-		type: 'ecdsa',
-		parts: [
-			{ name: 'curve', data: Buffer.from(curveName) },
-			{ name: 'Q', data: Q },
-			{ name: 'd', data: d }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readPkcs8ECDSAPublic(der) {
-	var curveName = readECDSACurve(der);
-	assert.string(curveName, 'a known elliptic curve');
-
-	var Q = der.readString(asn1.Ber.BitString, true);
-	Q = utils.ecNormalize(Q);
-
-	var key = {
-		type: 'ecdsa',
-		parts: [
-			{ name: 'curve', data: Buffer.from(curveName) },
-			{ name: 'Q', data: Q }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs8EdDSAPublic(der) {
-	if (der.peek() === 0x00)
-		der.readByte();
-
-	var A = utils.readBitString(der);
-
-	var key = {
-		type: 'ed25519',
-		parts: [
-			{ name: 'A', data: utils.zeroPadToLength(A, 32) }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs8X25519Public(der) {
-	var A = utils.readBitString(der);
-
-	var key = {
-		type: 'curve25519',
-		parts: [
-			{ name: 'A', data: utils.zeroPadToLength(A, 32) }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs8EdDSAPrivate(der) {
-	if (der.peek() === 0x00)
-		der.readByte();
-
-	der.readSequence(asn1.Ber.OctetString);
-	var k = der.readString(asn1.Ber.OctetString, true);
-	k = utils.zeroPadToLength(k, 32);
-
-	var A;
-	if (der.peek() === asn1.Ber.BitString) {
-		A = utils.readBitString(der);
-		A = utils.zeroPadToLength(A, 32);
-	} else {
-		A = utils.calculateED25519Public(k);
-	}
-
-	var key = {
-		type: 'ed25519',
-		parts: [
-			{ name: 'A', data: utils.zeroPadToLength(A, 32) },
-			{ name: 'k', data: utils.zeroPadToLength(k, 32) }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readPkcs8X25519Private(der) {
-	if (der.peek() === 0x00)
-		der.readByte();
-
-	der.readSequence(asn1.Ber.OctetString);
-	var k = der.readString(asn1.Ber.OctetString, true);
-	k = utils.zeroPadToLength(k, 32);
-
-	var A = utils.calculateX25519Public(k);
-
-	var key = {
-		type: 'curve25519',
-		parts: [
-			{ name: 'A', data: utils.zeroPadToLength(A, 32) },
-			{ name: 'k', data: utils.zeroPadToLength(k, 32) }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function writePkcs8(der, key) {
-	der.startSequence();
-
-	if (PrivateKey.isPrivateKey(key)) {
-		var sillyInt = Buffer.from([0]);
-		der.writeBuffer(sillyInt, asn1.Ber.Integer);
-	}
-
-	der.startSequence();
-	switch (key.type) {
-	case 'rsa':
-		der.writeOID('1.2.840.113549.1.1.1');
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs8RSAPrivate(key, der);
-		else
-			writePkcs8RSAPublic(key, der);
-		break;
-	case 'dsa':
-		der.writeOID('1.2.840.10040.4.1');
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs8DSAPrivate(key, der);
-		else
-			writePkcs8DSAPublic(key, der);
-		break;
-	case 'ecdsa':
-		der.writeOID('1.2.840.10045.2.1');
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs8ECDSAPrivate(key, der);
-		else
-			writePkcs8ECDSAPublic(key, der);
-		break;
-	case 'ed25519':
-		der.writeOID('1.3.101.112');
-		if (PrivateKey.isPrivateKey(key))
-			throw (new Error('Ed25519 private keys in pkcs8 ' +
-			    'format are not supported'));
-		writePkcs8EdDSAPublic(key, der);
-		break;
-	default:
-		throw (new Error('Unsupported key type: ' + key.type));
-	}
-
-	der.endSequence();
-}
-
-function writePkcs8RSAPrivate(key, der) {
-	der.writeNull();
-	der.endSequence();
-
-	der.startSequence(asn1.Ber.OctetString);
-	der.startSequence();
-
-	var version = Buffer.from([0]);
-	der.writeBuffer(version, asn1.Ber.Integer);
-
-	der.writeBuffer(key.part.n.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.e.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.d.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.p.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.q.data, asn1.Ber.Integer);
-	if (!key.part.dmodp || !key.part.dmodq)
-		utils.addRSAMissing(key);
-	der.writeBuffer(key.part.dmodp.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.dmodq.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.iqmp.data, asn1.Ber.Integer);
-
-	der.endSequence();
-	der.endSequence();
-}
-
-function writePkcs8RSAPublic(key, der) {
-	der.writeNull();
-	der.endSequence();
-
-	der.startSequence(asn1.Ber.BitString);
-	der.writeByte(0x00);
-
-	der.startSequence();
-	der.writeBuffer(key.part.n.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.e.data, asn1.Ber.Integer);
-	der.endSequence();
-
-	der.endSequence();
-}
-
-function writePkcs8DSAPrivate(key, der) {
-	der.startSequence();
-	der.writeBuffer(key.part.p.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.q.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.g.data, asn1.Ber.Integer);
-	der.endSequence();
-
-	der.endSequence();
-
-	der.startSequence(asn1.Ber.OctetString);
-	der.writeBuffer(key.part.x.data, asn1.Ber.Integer);
-	der.endSequence();
-}
-
-function writePkcs8DSAPublic(key, der) {
-	der.startSequence();
-	der.writeBuffer(key.part.p.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.q.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.g.data, asn1.Ber.Integer);
-	der.endSequence();
-	der.endSequence();
-
-	der.startSequence(asn1.Ber.BitString);
-	der.writeByte(0x00);
-	der.writeBuffer(key.part.y.data, asn1.Ber.Integer);
-	der.endSequence();
-}
-
-function writeECDSACurve(key, der) {
-	var curve = algs.curves[key.curve];
-	if (curve.pkcs8oid) {
-		/* This one has a name in pkcs#8, so just write the oid */
-		der.writeOID(curve.pkcs8oid);
-
-	} else {
-		// ECParameters sequence
-		der.startSequence();
-
-		var version = Buffer.from([1]);
-		der.writeBuffer(version, asn1.Ber.Integer);
-
-		// FieldID sequence
-		der.startSequence();
-		der.writeOID('1.2.840.10045.1.1'); // prime-field
-		der.writeBuffer(curve.p, asn1.Ber.Integer);
-		der.endSequence();
-
-		// Curve sequence
-		der.startSequence();
-		var a = curve.p;
-		if (a[0] === 0x0)
-			a = a.slice(1);
-		der.writeBuffer(a, asn1.Ber.OctetString);
-		der.writeBuffer(curve.b, asn1.Ber.OctetString);
-		der.writeBuffer(curve.s, asn1.Ber.BitString);
-		der.endSequence();
-
-		der.writeBuffer(curve.G, asn1.Ber.OctetString);
-		der.writeBuffer(curve.n, asn1.Ber.Integer);
-		var h = curve.h;
-		if (!h) {
-			h = Buffer.from([1]);
-		}
-		der.writeBuffer(h, asn1.Ber.Integer);
-
-		// ECParameters
-		der.endSequence();
-	}
-}
-
-function writePkcs8ECDSAPublic(key, der) {
-	writeECDSACurve(key, der);
-	der.endSequence();
-
-	var Q = utils.ecNormalize(key.part.Q.data, true);
-	der.writeBuffer(Q, asn1.Ber.BitString);
-}
-
-function writePkcs8ECDSAPrivate(key, der) {
-	writeECDSACurve(key, der);
-	der.endSequence();
-
-	der.startSequence(asn1.Ber.OctetString);
-	der.startSequence();
-
-	var version = Buffer.from([1]);
-	der.writeBuffer(version, asn1.Ber.Integer);
-
-	der.writeBuffer(key.part.d.data, asn1.Ber.OctetString);
-
-	der.startSequence(0xa1);
-	var Q = utils.ecNormalize(key.part.Q.data, true);
-	der.writeBuffer(Q, asn1.Ber.BitString);
-	der.endSequence();
-
-	der.endSequence();
-	der.endSequence();
-}
-
-function writePkcs8EdDSAPublic(key, der) {
-	der.endSequence();
-
-	utils.writeBitString(der, key.part.A.data);
-}
-
-function writePkcs8EdDSAPrivate(key, der) {
-	der.endSequence();
-
-	var k = utils.mpNormalize(key.part.k.data, true);
-	der.startSequence(asn1.Ber.OctetString);
-	der.writeBuffer(k, asn1.Ber.OctetString);
-	der.endSequence();
-}
-
-
-/***/ }),
-/* 158 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = Identity;
-
-var assert = __webpack_require__(16);
-var algs = __webpack_require__(32);
-var crypto = __webpack_require__(11);
-var Fingerprint = __webpack_require__(156);
-var Signature = __webpack_require__(75);
-var errs = __webpack_require__(74);
-var util = __webpack_require__(3);
-var utils = __webpack_require__(26);
-var asn1 = __webpack_require__(66);
-var Buffer = __webpack_require__(15).Buffer;
-
-/*JSSTYLED*/
-var DNS_NAME_RE = /^([*]|[a-z0-9][a-z0-9\-]{0,62})(?:\.([*]|[a-z0-9][a-z0-9\-]{0,62}))*$/i;
-
-var oids = {};
-oids.cn = '2.5.4.3';
-oids.o = '2.5.4.10';
-oids.ou = '2.5.4.11';
-oids.l = '2.5.4.7';
-oids.s = '2.5.4.8';
-oids.c = '2.5.4.6';
-oids.sn = '2.5.4.4';
-oids.dc = '0.9.2342.19200300.100.1.25';
-oids.uid = '0.9.2342.19200300.100.1.1';
-oids.mail = '0.9.2342.19200300.100.1.3';
-
-var unoids = {};
-Object.keys(oids).forEach(function (k) {
-	unoids[oids[k]] = k;
-});
-
-function Identity(opts) {
-	var self = this;
-	assert.object(opts, 'options');
-	assert.arrayOfObject(opts.components, 'options.components');
-	this.components = opts.components;
-	this.componentLookup = {};
-	this.components.forEach(function (c) {
-		if (c.name && !c.oid)
-			c.oid = oids[c.name];
-		if (c.oid && !c.name)
-			c.name = unoids[c.oid];
-		if (self.componentLookup[c.name] === undefined)
-			self.componentLookup[c.name] = [];
-		self.componentLookup[c.name].push(c);
-	});
-	if (this.componentLookup.cn && this.componentLookup.cn.length > 0) {
-		this.cn = this.componentLookup.cn[0].value;
-	}
-	assert.optionalString(opts.type, 'options.type');
-	if (opts.type === undefined) {
-		if (this.components.length === 1 &&
-		    this.componentLookup.cn &&
-		    this.componentLookup.cn.length === 1 &&
-		    this.componentLookup.cn[0].value.match(DNS_NAME_RE)) {
-			this.type = 'host';
-			this.hostname = this.componentLookup.cn[0].value;
-
-		} else if (this.componentLookup.dc &&
-		    this.components.length === this.componentLookup.dc.length) {
-			this.type = 'host';
-			this.hostname = this.componentLookup.dc.map(
-			    function (c) {
-				return (c.value);
-			}).join('.');
-
-		} else if (this.componentLookup.uid &&
-		    this.components.length ===
-		    this.componentLookup.uid.length) {
-			this.type = 'user';
-			this.uid = this.componentLookup.uid[0].value;
-
-		} else if (this.componentLookup.cn &&
-		    this.componentLookup.cn.length === 1 &&
-		    this.componentLookup.cn[0].value.match(DNS_NAME_RE)) {
-			this.type = 'host';
-			this.hostname = this.componentLookup.cn[0].value;
-
-		} else if (this.componentLookup.uid &&
-		    this.componentLookup.uid.length === 1) {
-			this.type = 'user';
-			this.uid = this.componentLookup.uid[0].value;
-
-		} else if (this.componentLookup.mail &&
-		    this.componentLookup.mail.length === 1) {
-			this.type = 'email';
-			this.email = this.componentLookup.mail[0].value;
-
-		} else if (this.componentLookup.cn &&
-		    this.componentLookup.cn.length === 1) {
-			this.type = 'user';
-			this.uid = this.componentLookup.cn[0].value;
-
-		} else {
-			this.type = 'unknown';
-		}
-	} else {
-		this.type = opts.type;
-		if (this.type === 'host')
-			this.hostname = opts.hostname;
-		else if (this.type === 'user')
-			this.uid = opts.uid;
-		else if (this.type === 'email')
-			this.email = opts.email;
-		else
-			throw (new Error('Unknown type ' + this.type));
-	}
-}
-
-Identity.prototype.toString = function () {
-	return (this.components.map(function (c) {
-		return (c.name.toUpperCase() + '=' + c.value);
-	}).join(', '));
-};
-
-/*
- * These are from X.680 -- PrintableString allowed chars are in section 37.4
- * table 8. Spec for IA5Strings is "1,6 + SPACE + DEL" where 1 refers to
- * ISO IR #001 (standard ASCII control characters) and 6 refers to ISO IR #006
- * (the basic ASCII character set).
- */
-/* JSSTYLED */
-var NOT_PRINTABLE = /[^a-zA-Z0-9 '(),+.\/:=?-]/;
-/* JSSTYLED */
-var NOT_IA5 = /[^\x00-\x7f]/;
-
-Identity.prototype.toAsn1 = function (der, tag) {
-	der.startSequence(tag);
-	this.components.forEach(function (c) {
-		der.startSequence(asn1.Ber.Constructor | asn1.Ber.Set);
-		der.startSequence();
-		der.writeOID(c.oid);
-		/*
-		 * If we fit in a PrintableString, use that. Otherwise use an
-		 * IA5String or UTF8String.
-		 *
-		 * If this identity was parsed from a DN, use the ASN.1 types
-		 * from the original representation (otherwise this might not
-		 * be a full match for the original in some validators).
-		 */
-		if (c.asn1type === asn1.Ber.Utf8String ||
-		    c.value.match(NOT_IA5)) {
-			var v = Buffer.from(c.value, 'utf8');
-			der.writeBuffer(v, asn1.Ber.Utf8String);
-
-		} else if (c.asn1type === asn1.Ber.IA5String ||
-		    c.value.match(NOT_PRINTABLE)) {
-			der.writeString(c.value, asn1.Ber.IA5String);
-
-		} else {
-			var type = asn1.Ber.PrintableString;
-			if (c.asn1type !== undefined)
-				type = c.asn1type;
-			der.writeString(c.value, type);
-		}
-		der.endSequence();
-		der.endSequence();
-	});
-	der.endSequence();
-};
-
-function globMatch(a, b) {
-	if (a === '**' || b === '**')
-		return (true);
-	var aParts = a.split('.');
-	var bParts = b.split('.');
-	if (aParts.length !== bParts.length)
-		return (false);
-	for (var i = 0; i < aParts.length; ++i) {
-		if (aParts[i] === '*' || bParts[i] === '*')
-			continue;
-		if (aParts[i] !== bParts[i])
-			return (false);
-	}
-	return (true);
-}
-
-Identity.prototype.equals = function (other) {
-	if (!Identity.isIdentity(other, [1, 0]))
-		return (false);
-	if (other.components.length !== this.components.length)
-		return (false);
-	for (var i = 0; i < this.components.length; ++i) {
-		if (this.components[i].oid !== other.components[i].oid)
-			return (false);
-		if (!globMatch(this.components[i].value,
-		    other.components[i].value)) {
-			return (false);
-		}
-	}
-	return (true);
-};
-
-Identity.forHost = function (hostname) {
-	assert.string(hostname, 'hostname');
-	return (new Identity({
-		type: 'host',
-		hostname: hostname,
-		components: [ { name: 'cn', value: hostname } ]
-	}));
-};
-
-Identity.forUser = function (uid) {
-	assert.string(uid, 'uid');
-	return (new Identity({
-		type: 'user',
-		uid: uid,
-		components: [ { name: 'uid', value: uid } ]
-	}));
-};
-
-Identity.forEmail = function (email) {
-	assert.string(email, 'email');
-	return (new Identity({
-		type: 'email',
-		email: email,
-		components: [ { name: 'mail', value: email } ]
-	}));
-};
-
-Identity.parseDN = function (dn) {
-	assert.string(dn, 'dn');
-	var parts = dn.split(',');
-	var cmps = parts.map(function (c) {
-		c = c.trim();
-		var eqPos = c.indexOf('=');
-		var name = c.slice(0, eqPos).toLowerCase();
-		var value = c.slice(eqPos + 1);
-		return ({ name: name, value: value });
-	});
-	return (new Identity({ components: cmps }));
-};
-
-Identity.parseAsn1 = function (der, top) {
-	var components = [];
-	der.readSequence(top);
-	var end = der.offset + der.length;
-	while (der.offset < end) {
-		der.readSequence(asn1.Ber.Constructor | asn1.Ber.Set);
-		var after = der.offset + der.length;
-		der.readSequence();
-		var oid = der.readOID();
-		var type = der.peek();
-		var value;
-		switch (type) {
-		case asn1.Ber.PrintableString:
-		case asn1.Ber.IA5String:
-		case asn1.Ber.OctetString:
-		case asn1.Ber.T61String:
-			value = der.readString(type);
-			break;
-		case asn1.Ber.Utf8String:
-			value = der.readString(type, true);
-			value = value.toString('utf8');
-			break;
-		case asn1.Ber.CharacterString:
-		case asn1.Ber.BMPString:
-			value = der.readString(type, true);
-			value = value.toString('utf16le');
-			break;
-		default:
-			throw (new Error('Unknown asn1 type ' + type));
-		}
-		components.push({ oid: oid, asn1type: type, value: value });
-		der._offset = after;
-	}
-	der._offset = end;
-	return (new Identity({
-		components: components
-	}));
-};
-
-Identity.isIdentity = function (obj, ver) {
-	return (utils.isCompatible(obj, Identity, ver));
-};
-
-/*
- * API versions for Identity:
- * [1,0] -- initial ver
- */
-Identity.prototype._sshpkApiVersion = [1, 0];
-
-Identity._oldVersionDetect = function (obj) {
-	return ([1, 0]);
-};
-
-
-/***/ }),
-/* 159 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = SSHBuffer;
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-
-function SSHBuffer(opts) {
-	assert.object(opts, 'options');
-	if (opts.buffer !== undefined)
-		assert.buffer(opts.buffer, 'options.buffer');
-
-	this._size = opts.buffer ? opts.buffer.length : 1024;
-	this._buffer = opts.buffer || Buffer.alloc(this._size);
-	this._offset = 0;
-}
-
-SSHBuffer.prototype.toBuffer = function () {
-	return (this._buffer.slice(0, this._offset));
-};
-
-SSHBuffer.prototype.atEnd = function () {
-	return (this._offset >= this._buffer.length);
-};
-
-SSHBuffer.prototype.remainder = function () {
-	return (this._buffer.slice(this._offset));
-};
-
-SSHBuffer.prototype.skip = function (n) {
-	this._offset += n;
-};
-
-SSHBuffer.prototype.expand = function () {
-	this._size *= 2;
-	var buf = Buffer.alloc(this._size);
-	this._buffer.copy(buf, 0);
-	this._buffer = buf;
-};
-
-SSHBuffer.prototype.readPart = function () {
-	return ({data: this.readBuffer()});
-};
-
-SSHBuffer.prototype.readBuffer = function () {
-	var len = this._buffer.readUInt32BE(this._offset);
-	this._offset += 4;
-	assert.ok(this._offset + len <= this._buffer.length,
-	    'length out of bounds at +0x' + this._offset.toString(16) +
-	    ' (data truncated?)');
-	var buf = this._buffer.slice(this._offset, this._offset + len);
-	this._offset += len;
-	return (buf);
-};
-
-SSHBuffer.prototype.readString = function () {
-	return (this.readBuffer().toString());
-};
-
-SSHBuffer.prototype.readCString = function () {
-	var offset = this._offset;
-	while (offset < this._buffer.length &&
-	    this._buffer[offset] !== 0x00)
-		offset++;
-	assert.ok(offset < this._buffer.length, 'c string does not terminate');
-	var str = this._buffer.slice(this._offset, offset).toString();
-	this._offset = offset + 1;
-	return (str);
-};
-
-SSHBuffer.prototype.readInt = function () {
-	var v = this._buffer.readUInt32BE(this._offset);
-	this._offset += 4;
-	return (v);
-};
-
-SSHBuffer.prototype.readInt64 = function () {
-	assert.ok(this._offset + 8 < this._buffer.length,
-	    'buffer not long enough to read Int64');
-	var v = this._buffer.slice(this._offset, this._offset + 8);
-	this._offset += 8;
-	return (v);
-};
-
-SSHBuffer.prototype.readChar = function () {
-	var v = this._buffer[this._offset++];
-	return (v);
-};
-
-SSHBuffer.prototype.writeBuffer = function (buf) {
-	while (this._offset + 4 + buf.length > this._size)
-		this.expand();
-	this._buffer.writeUInt32BE(buf.length, this._offset);
-	this._offset += 4;
-	buf.copy(this._buffer, this._offset);
-	this._offset += buf.length;
-};
-
-SSHBuffer.prototype.writeString = function (str) {
-	this.writeBuffer(Buffer.from(str, 'utf8'));
-};
-
-SSHBuffer.prototype.writeCString = function (str) {
-	while (this._offset + 1 + str.length > this._size)
-		this.expand();
-	this._buffer.write(str, this._offset);
-	this._offset += str.length;
-	this._buffer[this._offset++] = 0;
-};
-
-SSHBuffer.prototype.writeInt = function (v) {
-	while (this._offset + 4 > this._size)
-		this.expand();
-	this._buffer.writeUInt32BE(v, this._offset);
-	this._offset += 4;
-};
-
-SSHBuffer.prototype.writeInt64 = function (v) {
-	assert.buffer(v, 'value');
-	if (v.length > 8) {
-		var lead = v.slice(0, v.length - 8);
-		for (var i = 0; i < lead.length; ++i) {
-			assert.strictEqual(lead[i], 0,
-			    'must fit in 64 bits of precision');
-		}
-		v = v.slice(v.length - 8, v.length);
-	}
-	while (this._offset + 8 > this._size)
-		this.expand();
-	v.copy(this._buffer, this._offset);
-	this._offset += 8;
-};
-
-SSHBuffer.prototype.writeChar = function (v) {
-	while (this._offset + 1 > this._size)
-		this.expand();
-	this._buffer[this._offset++] = v;
-};
-
-SSHBuffer.prototype.writePart = function (p) {
-	this.writeBuffer(p.data);
-};
-
-SSHBuffer.prototype.write = function (buf) {
-	while (this._offset + buf.length > this._size)
-		this.expand();
-	buf.copy(this._buffer, this._offset);
-	this._offset += buf.length;
-};
-
-
-/***/ }),
-/* 160 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = x => {
-	if (typeof x !== 'string') {
-		throw new TypeError('Expected a string, got ' + typeof x);
-	}
-
-	// Catches EFBBBF (UTF-8 BOM) because the buffer-to-string
-	// conversion translates it to FEFF (UTF-16 BOM)
-	if (x.charCodeAt(0) === 0xFEFF) {
-		return x.slice(1);
-	}
-
-	return x;
-};
-
-
-/***/ }),
-/* 161 */
-/***/ (function(module, exports) {
-
-// Returns a wrapper function that returns a wrapped callback
-// The wrapper function should do some stuff, and return a
-// presumably different callback function.
-// This makes sure that own properties are retained, so that
-// decorations and such are not lost along the way.
-module.exports = wrappy
-function wrappy (fn, cb) {
-  if (fn && cb) return wrappy(fn)(cb)
-
-  if (typeof fn !== 'function')
-    throw new TypeError('need wrapper function')
-
-  Object.keys(fn).forEach(function (k) {
-    wrapper[k] = fn[k]
-  })
-
-  return wrapper
-
-  function wrapper() {
-    var args = new Array(arguments.length)
-    for (var i = 0; i < args.length; i++) {
-      args[i] = arguments[i]
-    }
-    var ret = fn.apply(this, args)
-    var cb = args[args.length-1]
-    if (typeof ret === 'function' && ret !== cb) {
-      Object.keys(cb).forEach(function (k) {
-        ret[k] = cb[k]
-      })
-    }
-    return ret
-  }
-}
-
-
-/***/ }),
-/* 162 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-exports.extractWorkspaces = extractWorkspaces;
-
-var _executeLifecycleScript;
-
-function _load_executeLifecycleScript() {
-  return _executeLifecycleScript = __webpack_require__(111);
-}
-
-var _path;
-
-function _load_path() {
-  return _path = __webpack_require__(377);
-}
-
-var _conversion;
-
-function _load_conversion() {
-  return _conversion = __webpack_require__(336);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = _interopRequireDefault(__webpack_require__(220));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _packageConstraintResolver;
-
-function _load_packageConstraintResolver() {
-  return _packageConstraintResolver = _interopRequireDefault(__webpack_require__(555));
-}
-
-var _requestManager;
-
-function _load_requestManager() {
-  return _requestManager = _interopRequireDefault(__webpack_require__(378));
-}
-
-var _index2;
-
-function _load_index2() {
-  return _index2 = __webpack_require__(57);
-}
-
-var _index3;
-
-function _load_index3() {
-  return _index3 = __webpack_require__(200);
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const crypto = __webpack_require__(11);
-const detectIndent = __webpack_require__(635);
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-const micromatch = __webpack_require__(114);
-const isCi = __webpack_require__(397);
-
-function sortObject(object) {
-  const sortedObject = {};
-  Object.keys(object).sort().forEach(item => {
-    sortedObject[item] = object[item];
-  });
-  return sortedObject;
-}
-
-class Config {
-  constructor(reporter) {
-    this.constraintResolver = new (_packageConstraintResolver || _load_packageConstraintResolver()).default(this, reporter);
-    this.requestManager = new (_requestManager || _load_requestManager()).default(reporter);
-    this.reporter = reporter;
-    this._init({});
-  }
-
-  //
-
-
-  //
-
-
-  // cache packages in offline mirror folder as new .tgz files
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  // Whether we should ignore executing lifecycle scripts
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  /**
-   * Execute a promise produced by factory if it doesn't exist in our cache with
-   * the associated key.
-   */
-
-  getCache(key, factory) {
-    const cached = this.cache[key];
-    if (cached) {
-      return cached;
-    }
-
-    return this.cache[key] = factory().catch(err => {
-      this.cache[key] = null;
-      throw err;
-    });
-  }
-
-  /**
-   * Get a config option from our yarn config.
-   */
-
-  getOption(key, resolve = false) {
-    const value = this.registries.yarn.getOption(key);
-
-    if (resolve && typeof value === 'string' && value.length) {
-      return (0, (_path || _load_path()).resolveWithHome)(value);
-    }
-
-    return value;
-  }
-
-  /**
-   * Reduce a list of versions to a single one based on an input range.
-   */
-
-  resolveConstraints(versions, range) {
-    return this.constraintResolver.reduce(versions, range);
-  }
-
-  /**
-   * Initialise config. Fetch registry options, find package roots.
-   */
-
-  init(opts = {}) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this._init(opts);
-
-      _this.workspaceRootFolder = yield _this.findWorkspaceRoot(_this.cwd);
-      _this.lockfileFolder = _this.workspaceRootFolder || _this.cwd;
-
-      // using focus in a workspace root is not allowed
-      if (_this.focus && (!_this.workspaceRootFolder || _this.cwd === _this.workspaceRootFolder)) {
-        throw new (_errors || _load_errors()).MessageError(_this.reporter.lang('workspacesFocusRootCheck'));
-      }
-
-      if (_this.focus) {
-        const focusedWorkspaceManifest = yield _this.readRootManifest();
-        _this.focusedWorkspaceName = focusedWorkspaceManifest.name;
-      }
-
-      _this.linkedModules = [];
-
-      let linkedModules;
-      try {
-        linkedModules = yield (_fs || _load_fs()).readdir(_this.linkFolder);
-      } catch (err) {
-        if (err.code === 'ENOENT') {
-          linkedModules = [];
-        } else {
-          throw err;
-        }
-      }
-
-      for (var _iterator = linkedModules, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const dir = _ref;
-
-        const linkedPath = path.join(_this.linkFolder, dir);
-
-        if (dir[0] === '@') {
-          // it's a scope, not a package
-          const scopedLinked = yield (_fs || _load_fs()).readdir(linkedPath);
-          _this.linkedModules.push(...scopedLinked.map(function (scopedDir) {
-            return path.join(dir, scopedDir);
-          }));
-        } else {
-          _this.linkedModules.push(dir);
-        }
-      }
-
-      for (var _iterator2 = Object.keys((_index2 || _load_index2()).registries), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref2 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref2 = _i2.value;
-        }
-
-        const key = _ref2;
-
-        const Registry = (_index2 || _load_index2()).registries[key];
-
-        const extraneousRcFiles = Registry === (_index2 || _load_index2()).registries.yarn ? _this.extraneousYarnrcFiles : [];
-
-        // instantiate registry
-        const registry = new Registry(_this.cwd, _this.registries, _this.requestManager, _this.reporter, _this.enableDefaultRc, extraneousRcFiles);
-        yield registry.init({
-          registry: opts.registry
-        });
-
-        _this.registries[key] = registry;
-        if (_this.registryFolders.indexOf(registry.folder) === -1) {
-          _this.registryFolders.push(registry.folder);
-        }
-      }
-
-      if (_this.modulesFolder) {
-        _this.registryFolders = [_this.modulesFolder];
-      }
-
-      _this.networkConcurrency = opts.networkConcurrency || Number(_this.getOption('network-concurrency')) || (_constants || _load_constants()).NETWORK_CONCURRENCY;
-
-      _this.childConcurrency = opts.childConcurrency || Number(_this.getOption('child-concurrency')) || Number(process.env.CHILD_CONCURRENCY) || (_constants || _load_constants()).CHILD_CONCURRENCY;
-
-      _this.networkTimeout = opts.networkTimeout || Number(_this.getOption('network-timeout')) || (_constants || _load_constants()).NETWORK_TIMEOUT;
-
-      const httpProxy = opts.httpProxy || _this.getOption('proxy');
-      const httpsProxy = opts.httpsProxy || _this.getOption('https-proxy');
-      _this.requestManager.setOptions({
-        userAgent: String(_this.getOption('user-agent')),
-        httpProxy: httpProxy === false ? false : String(httpProxy || ''),
-        httpsProxy: httpsProxy === false ? false : String(httpsProxy || ''),
-        strictSSL: Boolean(_this.getOption('strict-ssl')),
-        ca: Array.prototype.concat(opts.ca || _this.getOption('ca') || []).map(String),
-        cafile: String(opts.cafile || _this.getOption('cafile', true) || ''),
-        cert: String(opts.cert || _this.getOption('cert') || ''),
-        key: String(opts.key || _this.getOption('key') || ''),
-        networkConcurrency: _this.networkConcurrency,
-        networkTimeout: _this.networkTimeout
-      });
-
-      _this.globalFolder = opts.globalFolder || String(_this.getOption('global-folder', true));
-      if (_this.globalFolder === 'undefined') {
-        _this.globalFolder = (_constants || _load_constants()).GLOBAL_MODULE_DIRECTORY;
-      }
-
-      let cacheRootFolder = opts.cacheFolder || _this.getOption('cache-folder', true);
-
-      if (!cacheRootFolder) {
-        let preferredCacheFolders = (_constants || _load_constants()).PREFERRED_MODULE_CACHE_DIRECTORIES;
-        const preferredCacheFolder = opts.preferredCacheFolder || _this.getOption('preferred-cache-folder', true);
-
-        if (preferredCacheFolder) {
-          preferredCacheFolders = [String(preferredCacheFolder)].concat(preferredCacheFolders);
-        }
-
-        const cacheFolderQuery = yield (_fs || _load_fs()).getFirstSuitableFolder(preferredCacheFolders, (_fs || _load_fs()).constants.W_OK | (_fs || _load_fs()).constants.X_OK | (_fs || _load_fs()).constants.R_OK // eslint-disable-line no-bitwise
-        );
-        for (var _iterator3 = cacheFolderQuery.skipped, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-          var _ref3;
-
-          if (_isArray3) {
-            if (_i3 >= _iterator3.length) break;
-            _ref3 = _iterator3[_i3++];
-          } else {
-            _i3 = _iterator3.next();
-            if (_i3.done) break;
-            _ref3 = _i3.value;
-          }
-
-          const skippedEntry = _ref3;
-
-          _this.reporter.warn(_this.reporter.lang('cacheFolderSkipped', skippedEntry.folder));
-        }
-
-        cacheRootFolder = cacheFolderQuery.folder;
-        if (cacheRootFolder && cacheFolderQuery.skipped.length > 0) {
-          _this.reporter.warn(_this.reporter.lang('cacheFolderSelected', cacheRootFolder));
-        }
-      }
-
-      if (!cacheRootFolder) {
-        throw new (_errors || _load_errors()).MessageError(_this.reporter.lang('cacheFolderMissing'));
-      } else {
-        _this._cacheRootFolder = String(cacheRootFolder);
-      }
-
-      const manifest = yield _this.maybeReadManifest(_this.lockfileFolder);
-
-      const plugnplayByEnv = _this.getOption('plugnplay-override');
-      if (plugnplayByEnv != null) {
-        _this.plugnplayEnabled = plugnplayByEnv !== 'false' && plugnplayByEnv !== '0';
-        _this.plugnplayPersist = false;
-      } else if (opts.enablePnp || opts.disablePnp) {
-        _this.plugnplayEnabled = !!opts.enablePnp;
-        _this.plugnplayPersist = true;
-      } else if (manifest && manifest.installConfig && manifest.installConfig.pnp) {
-        _this.plugnplayEnabled = !!manifest.installConfig.pnp;
-        _this.plugnplayPersist = false;
-      } else {
-        _this.plugnplayEnabled = false;
-        _this.plugnplayPersist = false;
-      }
-
-      if (process.platform === 'win32') {
-        const cacheRootFolderDrive = path.parse(_this._cacheRootFolder).root.toLowerCase();
-        const lockfileFolderDrive = path.parse(_this.lockfileFolder).root.toLowerCase();
-
-        if (cacheRootFolderDrive !== lockfileFolderDrive) {
-          if (_this.plugnplayEnabled) {
-            _this.reporter.warn(_this.reporter.lang('plugnplayWindowsSupport'));
-          }
-          _this.plugnplayEnabled = false;
-          _this.plugnplayPersist = false;
-        }
-      }
-
-      _this.plugnplayShebang = String(_this.getOption('plugnplay-shebang') || '') || '/usr/bin/env node';
-      _this.plugnplayBlacklist = String(_this.getOption('plugnplay-blacklist') || '') || null;
-
-      _this.ignoreScripts = opts.ignoreScripts || Boolean(_this.getOption('ignore-scripts', false));
-
-      _this.workspacesEnabled = _this.getOption('workspaces-experimental') !== false;
-      _this.workspacesNohoistEnabled = _this.getOption('workspaces-nohoist-experimental') !== false;
-
-      _this.offlineCacheFolder = String(_this.getOption('offline-cache-folder') || '') || null;
-
-      _this.pruneOfflineMirror = Boolean(_this.getOption('yarn-offline-mirror-pruning'));
-      _this.enableMetaFolder = Boolean(_this.getOption('enable-meta-folder'));
-      _this.enableLockfileVersions = Boolean(_this.getOption('yarn-enable-lockfile-versions'));
-      _this.linkFileDependencies = Boolean(_this.getOption('yarn-link-file-dependencies'));
-      _this.packBuiltPackages = Boolean(_this.getOption('experimental-pack-script-packages-in-mirror'));
-
-      _this.autoAddIntegrity = !(0, (_conversion || _load_conversion()).boolifyWithDefault)(String(_this.getOption('unsafe-disable-integrity-migration')), true);
-
-      //init & create cacheFolder, tempFolder
-      _this.cacheFolder = path.join(_this._cacheRootFolder, 'v' + String((_constants || _load_constants()).CACHE_VERSION));
-      _this.tempFolder = opts.tempFolder || path.join(_this.cacheFolder, '.tmp');
-      yield (_fs || _load_fs()).mkdirp(_this.cacheFolder);
-      yield (_fs || _load_fs()).mkdirp(_this.tempFolder);
-
-      if (opts.production !== undefined) {
-        _this.production = Boolean(opts.production);
-      } else {
-        _this.production = Boolean(_this.getOption('production')) || process.env.NODE_ENV === 'production' && process.env.NPM_CONFIG_PRODUCTION !== 'false' && process.env.YARN_PRODUCTION !== 'false';
-      }
-
-      if (_this.workspaceRootFolder && !_this.workspacesEnabled) {
-        throw new (_errors || _load_errors()).MessageError(_this.reporter.lang('workspacesDisabled'));
-      }
-    })();
-  }
-
-  _init(opts) {
-    this.registryFolders = [];
-    this.linkedModules = [];
-
-    this.registries = (0, (_map || _load_map()).default)();
-    this.cache = (0, (_map || _load_map()).default)();
-
-    // Ensure the cwd is always an absolute path.
-    this.cwd = path.resolve(opts.cwd || this.cwd || process.cwd());
-
-    this.looseSemver = opts.looseSemver == undefined ? true : opts.looseSemver;
-
-    this.commandName = opts.commandName || '';
-
-    this.enableDefaultRc = opts.enableDefaultRc !== false;
-    this.extraneousYarnrcFiles = opts.extraneousYarnrcFiles || [];
-
-    this.preferOffline = !!opts.preferOffline;
-    this.modulesFolder = opts.modulesFolder;
-    this.linkFolder = opts.linkFolder || (_constants || _load_constants()).LINK_REGISTRY_DIRECTORY;
-    this.offline = !!opts.offline;
-    this.binLinks = !!opts.binLinks;
-    this.updateChecksums = !!opts.updateChecksums;
-    this.plugnplayUnplugged = [];
-    this.plugnplayPurgeUnpluggedPackages = false;
-
-    this.ignorePlatform = !!opts.ignorePlatform;
-    this.ignoreScripts = !!opts.ignoreScripts;
-
-    this.disablePrepublish = !!opts.disablePrepublish;
-
-    // $FlowFixMe$
-    this.nonInteractive = !!opts.nonInteractive || isCi || !process.stdout.isTTY;
-
-    this.requestManager.setOptions({
-      offline: !!opts.offline && !opts.preferOffline,
-      captureHar: !!opts.captureHar
-    });
-
-    this.focus = !!opts.focus;
-    this.focusedWorkspaceName = '';
-
-    this.otp = opts.otp || '';
-  }
-
-  /**
-   * Generate a name suitable as unique filesystem identifier for the specified package.
-   */
-
-  generateUniquePackageSlug(pkg) {
-    let slug = pkg.name;
-
-    slug = slug.replace(/[^@a-z0-9]+/g, '-');
-    slug = slug.replace(/^-+|-+$/g, '');
-
-    if (pkg.registry) {
-      slug = `${pkg.registry}-${slug}`;
-    } else {
-      slug = `unknown-${slug}`;
-    }
-
-    const hash = pkg.remote.hash;
-
-
-    if (pkg.version) {
-      slug += `-${pkg.version}`;
-    }
-
-    if (pkg.uid && pkg.version !== pkg.uid) {
-      slug += `-${pkg.uid}`;
-    } else if (hash) {
-      slug += `-${hash}`;
-    }
-
-    if (pkg.remote.integrity) {
-      slug += `-integrity`;
-    }
-
-    return slug;
-  }
-
-  /**
-   * Generate an absolute module path.
-   */
-
-  generateModuleCachePath(pkg) {
-    invariant(this.cacheFolder, 'No package root');
-    invariant(pkg, 'Undefined package');
-
-    const slug = this.generateUniquePackageSlug(pkg);
-    return path.join(this.cacheFolder, slug, 'node_modules', pkg.name);
-  }
-
-  /**
-   */
-
-  getUnpluggedPath() {
-    return path.join(this.lockfileFolder, '.pnp', 'unplugged');
-  }
-
-  /**
-    */
-
-  generatePackageUnpluggedPath(pkg) {
-    const slug = this.generateUniquePackageSlug(pkg);
-    return path.join(this.getUnpluggedPath(), slug, 'node_modules', pkg.name);
-  }
-
-  /**
-   */
-
-  listUnpluggedPackageFolders() {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const unpluggedPackages = new Map();
-      const unpluggedPath = _this2.getUnpluggedPath();
-
-      if (!(yield (_fs || _load_fs()).exists(unpluggedPath))) {
-        return unpluggedPackages;
-      }
-
-      for (var _iterator4 = yield (_fs || _load_fs()).readdir(unpluggedPath), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref4 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref4 = _i4.value;
-        }
-
-        const unpluggedName = _ref4;
-
-        const nmListing = yield (_fs || _load_fs()).readdir(path.join(unpluggedPath, unpluggedName, 'node_modules'));
-        invariant(nmListing.length === 1, 'A single folder should be in the unplugged directory');
-
-        const target = path.join(unpluggedPath, unpluggedName, `node_modules`, nmListing[0]);
-        unpluggedPackages.set(unpluggedName, target);
-      }
-
-      return unpluggedPackages;
-    })();
-  }
-
-  /**
-   * Execute lifecycle scripts in the specified directory. Ignoring when the --ignore-scripts flag has been
-   * passed.
-   */
-
-  executeLifecycleScript(commandName, cwd) {
-    if (this.ignoreScripts) {
-      return Promise.resolve();
-    } else {
-      return (0, (_executeLifecycleScript || _load_executeLifecycleScript()).execFromManifest)(this, commandName, cwd || this.cwd);
-    }
-  }
-
-  /**
-   * Generate an absolute temporary filename location based on the input filename.
-   */
-
-  getTemp(filename) {
-    invariant(this.tempFolder, 'No temp folder');
-    return path.join(this.tempFolder, filename);
-  }
-
-  /**
-   * Remote packages may be cached in a file system to be available for offline installation.
-   * Second time the same package needs to be installed it will be loaded from there.
-   * Given a package's filename, return a path in the offline mirror location.
-   */
-
-  getOfflineMirrorPath(packageFilename) {
-    let mirrorPath;
-
-    var _arr = ['npm', 'yarn'];
-    for (var _i5 = 0; _i5 < _arr.length; _i5++) {
-      const key = _arr[_i5];
-      const registry = this.registries[key];
-
-      if (registry == null) {
-        continue;
-      }
-
-      const registryMirrorPath = registry.config['yarn-offline-mirror'];
-
-      if (registryMirrorPath === false) {
-        return null;
-      }
-
-      if (registryMirrorPath == null) {
-        continue;
-      }
-
-      mirrorPath = registryMirrorPath;
-    }
-
-    if (mirrorPath == null) {
-      return null;
-    }
-
-    if (packageFilename == null) {
-      return mirrorPath;
-    }
-
-    return path.join(mirrorPath, path.basename(packageFilename));
-  }
-
-  /**
-   * Checker whether the folder input is a valid module folder. We output a yarn metadata
-   * file when we've successfully setup a folder so use this as a marker.
-   */
-
-  isValidModuleDest(dest) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (!(yield (_fs || _load_fs()).exists(dest))) {
-        return false;
-      }
-
-      if (!(yield (_fs || _load_fs()).exists(path.join(dest, (_constants || _load_constants()).METADATA_FILENAME)))) {
-        return false;
-      }
-
-      return true;
-    })();
-  }
-
-  /**
-   * Read package metadata and normalized package info.
-   */
-
-  readPackageMetadata(dir) {
-    var _this3 = this;
-
-    return this.getCache(`metadata-${dir}`, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const metadata = yield _this3.readJson(path.join(dir, (_constants || _load_constants()).METADATA_FILENAME));
-      const pkg = yield _this3.readManifest(dir, metadata.registry);
-
-      return {
-        package: pkg,
-        artifacts: metadata.artifacts || [],
-        hash: metadata.hash,
-        remote: metadata.remote,
-        registry: metadata.registry
-      };
-    }));
-  }
-
-  /**
-   * Read normalized package info according yarn-metadata.json
-   * throw an error if package.json was not found
-   */
-
-  readManifest(dir, priorityRegistry, isRoot = false) {
-    var _this4 = this;
-
-    return this.getCache(`manifest-${dir}`, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const manifest = yield _this4.maybeReadManifest(dir, priorityRegistry, isRoot);
-
-      if (manifest) {
-        return manifest;
-      } else {
-        throw new (_errors || _load_errors()).MessageError(_this4.reporter.lang('couldntFindPackagejson', dir), 'ENOENT');
-      }
-    }));
-  }
-
-  /**
-   * try get the manifest file by looking
-   * 1. manifest file in cache
-   * 2. manifest file in registry
-   */
-  maybeReadManifest(dir, priorityRegistry, isRoot = false) {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const metadataLoc = path.join(dir, (_constants || _load_constants()).METADATA_FILENAME);
-
-      if (yield (_fs || _load_fs()).exists(metadataLoc)) {
-        const metadata = yield _this5.readJson(metadataLoc);
-
-        if (!priorityRegistry) {
-          priorityRegistry = metadata.priorityRegistry;
-        }
-
-        if (typeof metadata.manifest !== 'undefined') {
-          return metadata.manifest;
-        }
-      }
-
-      if (priorityRegistry) {
-        const file = yield _this5.tryManifest(dir, priorityRegistry, isRoot);
-        if (file) {
-          return file;
-        }
-      }
-
-      for (var _iterator5 = Object.keys((_index2 || _load_index2()).registries), _isArray5 = Array.isArray(_iterator5), _i6 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray5) {
-          if (_i6 >= _iterator5.length) break;
-          _ref7 = _iterator5[_i6++];
-        } else {
-          _i6 = _iterator5.next();
-          if (_i6.done) break;
-          _ref7 = _i6.value;
-        }
-
-        const registry = _ref7;
-
-        if (priorityRegistry === registry) {
-          continue;
-        }
-
-        const file = yield _this5.tryManifest(dir, registry, isRoot);
-        if (file) {
-          return file;
-        }
-      }
-
-      return null;
-    })();
-  }
-
-  /**
-   * Read the root manifest.
-   */
-
-  readRootManifest() {
-    return this.readManifest(this.cwd, 'npm', true);
-  }
-
-  /**
-   * Try and find package info with the input directory and registry.
-   */
-
-  tryManifest(dir, registry, isRoot) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const filename = (_index2 || _load_index2()).registries[registry].filename;
-
-      const loc = path.join(dir, filename);
-      if (yield (_fs || _load_fs()).exists(loc)) {
-        const data = yield _this6.readJson(loc);
-        data._registry = registry;
-        data._loc = loc;
-        return (0, (_index || _load_index()).default)(data, dir, _this6, isRoot);
-      } else {
-        return null;
-      }
-    })();
-  }
-
-  findManifest(dir, isRoot) {
-    var _this7 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      for (var _iterator6 = (_index2 || _load_index2()).registryNames, _isArray6 = Array.isArray(_iterator6), _i7 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-        var _ref8;
-
-        if (_isArray6) {
-          if (_i7 >= _iterator6.length) break;
-          _ref8 = _iterator6[_i7++];
-        } else {
-          _i7 = _iterator6.next();
-          if (_i7.done) break;
-          _ref8 = _i7.value;
-        }
-
-        const registry = _ref8;
-
-        const manifest = yield _this7.tryManifest(dir, registry, isRoot);
-
-        if (manifest) {
-          return manifest;
-        }
-      }
-
-      return null;
-    })();
-  }
-
-  findWorkspaceRoot(initial) {
-    var _this8 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let previous = null;
-      let current = path.normalize(initial);
-      if (!(yield (_fs || _load_fs()).exists(current))) {
-        throw new (_errors || _load_errors()).MessageError(_this8.reporter.lang('folderMissing', current));
-      }
-
-      do {
-        const manifest = yield _this8.findManifest(current, true);
-        const ws = extractWorkspaces(manifest);
-        if (ws && ws.packages) {
-          const relativePath = path.relative(current, initial);
-          if (relativePath === '' || micromatch([relativePath], ws.packages).length > 0) {
-            return current;
-          } else {
-            return null;
-          }
-        }
-
-        previous = current;
-        current = path.dirname(current);
-      } while (current !== previous);
-
-      return null;
-    })();
-  }
-
-  resolveWorkspaces(root, rootManifest) {
-    var _this9 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const workspaces = {};
-      if (!_this9.workspacesEnabled) {
-        return workspaces;
-      }
-
-      const ws = _this9.getWorkspaces(rootManifest, true);
-      const patterns = ws && ws.packages ? ws.packages : [];
-
-      if (!Array.isArray(patterns)) {
-        throw new (_errors || _load_errors()).MessageError(_this9.reporter.lang('workspacesSettingMustBeArray'));
-      }
-
-      const registryFilenames = (_index2 || _load_index2()).registryNames.map(function (registryName) {
-        return _this9.registries[registryName].constructor.filename;
-      }).join('|');
-      const trailingPattern = `/+(${registryFilenames})`;
-      // anything under folder (node_modules) should be ignored, thus use the '**' instead of shallow match "*"
-      const ignorePatterns = _this9.registryFolders.map(function (folder) {
-        return `/${folder}/**/+(${registryFilenames})`;
-      });
-
-      const files = yield Promise.all(patterns.map(function (pattern) {
-        return (_fs || _load_fs()).glob(pattern.replace(/\/?$/, trailingPattern), {
-          cwd: root,
-          ignore: ignorePatterns.map(function (ignorePattern) {
-            return pattern.replace(/\/?$/, ignorePattern);
-          })
-        });
-      }));
-
-      for (var _iterator7 = new Set([].concat(...files)), _isArray7 = Array.isArray(_iterator7), _i8 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-        var _ref9;
-
-        if (_isArray7) {
-          if (_i8 >= _iterator7.length) break;
-          _ref9 = _iterator7[_i8++];
-        } else {
-          _i8 = _iterator7.next();
-          if (_i8.done) break;
-          _ref9 = _i8.value;
-        }
-
-        const file = _ref9;
-
-        const loc = path.join(root, path.dirname(file));
-        const manifest = yield _this9.findManifest(loc, false);
-
-        if (!manifest) {
-          continue;
-        }
-
-        if (!manifest.name) {
-          _this9.reporter.warn(_this9.reporter.lang('workspaceNameMandatory', loc));
-          continue;
-        }
-        if (!manifest.version) {
-          _this9.reporter.warn(_this9.reporter.lang('workspaceVersionMandatory', loc));
-          continue;
-        }
-
-        if (Object.prototype.hasOwnProperty.call(workspaces, manifest.name)) {
-          throw new (_errors || _load_errors()).MessageError(_this9.reporter.lang('workspaceNameDuplicate', manifest.name));
-        }
-
-        workspaces[manifest.name] = { loc, manifest };
-      }
-
-      return workspaces;
-    })();
-  }
-
-  // workspaces functions
-  getWorkspaces(manifest, shouldThrow = false) {
-    if (!manifest || !this.workspacesEnabled) {
-      return undefined;
-    }
-
-    const ws = extractWorkspaces(manifest);
-
-    if (!ws) {
-      return ws;
-    }
-
-    // validate eligibility
-    let wsCopy = (0, (_extends2 || _load_extends()).default)({}, ws);
-    const warnings = [];
-    const errors = [];
-
-    // packages
-    if (wsCopy.packages && wsCopy.packages.length > 0 && !manifest.private) {
-      errors.push(this.reporter.lang('workspacesRequirePrivateProjects'));
-      wsCopy = undefined;
-    }
-    // nohoist
-    if (wsCopy && wsCopy.nohoist && wsCopy.nohoist.length > 0) {
-      if (!this.workspacesNohoistEnabled) {
-        warnings.push(this.reporter.lang('workspacesNohoistDisabled', manifest.name));
-        wsCopy.nohoist = undefined;
-      } else if (!manifest.private) {
-        errors.push(this.reporter.lang('workspacesNohoistRequirePrivatePackages', manifest.name));
-        wsCopy.nohoist = undefined;
-      }
-    }
-
-    if (errors.length > 0 && shouldThrow) {
-      throw new (_errors || _load_errors()).MessageError(errors.join('\n'));
-    }
-
-    const msg = errors.concat(warnings).join('\n');
-    if (msg.length > 0) {
-      this.reporter.warn(msg);
-    }
-
-    return wsCopy;
-  }
-
-  /**
-   * Description
-   */
-
-  getFolder(pkg) {
-    let registryName = pkg._registry;
-    if (!registryName) {
-      const ref = pkg._reference;
-      invariant(ref, 'expected reference');
-      registryName = ref.registry;
-    }
-    return this.registries[registryName].folder;
-  }
-
-  /**
-   * Get root manifests.
-   */
-
-  getRootManifests() {
-    var _this10 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const manifests = {};
-      for (var _iterator8 = (_index2 || _load_index2()).registryNames, _isArray8 = Array.isArray(_iterator8), _i9 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-        var _ref10;
-
-        if (_isArray8) {
-          if (_i9 >= _iterator8.length) break;
-          _ref10 = _iterator8[_i9++];
-        } else {
-          _i9 = _iterator8.next();
-          if (_i9.done) break;
-          _ref10 = _i9.value;
-        }
-
-        const registryName = _ref10;
-
-        const registry = (_index2 || _load_index2()).registries[registryName];
-        const jsonLoc = path.join(_this10.cwd, registry.filename);
-
-        let object = {};
-        let exists = false;
-        let indent;
-        if (yield (_fs || _load_fs()).exists(jsonLoc)) {
-          exists = true;
-
-          const info = yield _this10.readJson(jsonLoc, (_fs || _load_fs()).readJsonAndFile);
-          object = info.object;
-          indent = detectIndent(info.content).indent || undefined;
-        }
-        manifests[registryName] = { loc: jsonLoc, object, exists, indent };
-      }
-      return manifests;
-    })();
-  }
-
-  /**
-   * Save root manifests.
-   */
-
-  saveRootManifests(manifests) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      for (var _iterator9 = (_index2 || _load_index2()).registryNames, _isArray9 = Array.isArray(_iterator9), _i10 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-        var _ref11;
-
-        if (_isArray9) {
-          if (_i10 >= _iterator9.length) break;
-          _ref11 = _iterator9[_i10++];
-        } else {
-          _i10 = _iterator9.next();
-          if (_i10.done) break;
-          _ref11 = _i10.value;
-        }
-
-        const registryName = _ref11;
-        var _manifests$registryNa = manifests[registryName];
-        const loc = _manifests$registryNa.loc,
-              object = _manifests$registryNa.object,
-              exists = _manifests$registryNa.exists,
-              indent = _manifests$registryNa.indent;
-
-        if (!exists && !Object.keys(object).length) {
-          continue;
-        }
-
-        for (var _iterator10 = (_constants || _load_constants()).DEPENDENCY_TYPES, _isArray10 = Array.isArray(_iterator10), _i11 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-          var _ref12;
-
-          if (_isArray10) {
-            if (_i11 >= _iterator10.length) break;
-            _ref12 = _iterator10[_i11++];
-          } else {
-            _i11 = _iterator10.next();
-            if (_i11.done) break;
-            _ref12 = _i11.value;
-          }
-
-          const field = _ref12;
-
-          if (object[field]) {
-            object[field] = sortObject(object[field]);
-          }
-        }
-
-        yield (_fs || _load_fs()).writeFilePreservingEol(loc, JSON.stringify(object, null, indent || (_constants || _load_constants()).DEFAULT_INDENT) + '\n');
-      }
-    })();
-  }
-
-  /**
-   * Call the passed factory (defaults to fs.readJson) and rethrow a pretty error message if it was the result
-   * of a syntax error.
-   */
-
-  readJson(loc, factory = (_fs || _load_fs()).readJson) {
-    try {
-      return factory(loc);
-    } catch (err) {
-      if (err instanceof SyntaxError) {
-        throw new (_errors || _load_errors()).MessageError(this.reporter.lang('jsonError', loc, err.message));
-      } else {
-        throw err;
-      }
-    }
-  }
-
-  static create(opts = {}, reporter = new (_index3 || _load_index3()).NoopReporter()) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const config = new Config(reporter);
-      yield config.init(opts);
-      return config;
-    })();
-  }
-}
-
-exports.default = Config;
-function extractWorkspaces(manifest) {
-  if (!manifest || !manifest.workspaces) {
-    return undefined;
-  }
-
-  if (Array.isArray(manifest.workspaces)) {
-    return { packages: manifest.workspaces };
-  }
-
-  if (manifest.workspaces.packages && Array.isArray(manifest.workspaces.packages) || manifest.workspaces.nohoist && Array.isArray(manifest.workspaces.nohoist)) {
-    return manifest.workspaces;
-  }
-
-  return undefined;
-}
-
-/***/ }),
-/* 163 */
-/***/ (function(module, exports) {
-
-module.exports = function(module) {
-	if(!module.webpackPolyfill) {
-		module.deprecate = function() {};
-		module.paths = [];
-		// module.parent = undefined by default
-		if(!module.children) module.children = [];
-		Object.defineProperty(module, "loaded", {
-			enumerable: true,
-			get: function() {
-				return module.l;
-			}
-		});
-		Object.defineProperty(module, "id", {
-			enumerable: true,
-			get: function() {
-				return module.i;
-			}
-		});
-		module.webpackPolyfill = 1;
-	}
-	return module;
-};
-
-
-/***/ }),
-/* 164 */
-/***/ (function(module, exports) {
-
-module.exports = require("net");
-
-/***/ }),
-/* 165 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.Add = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-let run = exports.run = (() => {
-  var _ref7 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (!args.length) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('missingAddDependencies'));
-    }
-
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-
-    yield (0, (_install || _load_install()).wrapLifecycle)(config, flags, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const install = new Add(args, flags, config, reporter, lockfile);
-      yield install.init();
-    }));
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref7.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-var _workspaceLayout;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout = _interopRequireDefault(__webpack_require__(90));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(78);
-}
-
-var _list;
-
-function _load_list() {
-  return _list = __webpack_require__(358);
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const SILENCE_DEPENDENCY_TYPE_WARNINGS = ['upgrade', 'upgrade-interactive'];
-
-class Add extends (_install || _load_install()).Install {
-  constructor(args, flags, config, reporter, lockfile) {
-    const workspaceRootIsCwd = config.cwd === config.lockfileFolder;
-    const _flags = flags ? (0, (_extends2 || _load_extends()).default)({}, flags, { workspaceRootIsCwd }) : { workspaceRootIsCwd };
-    super(_flags, config, reporter, lockfile);
-    this.args = args;
-    // only one flag is supported, so we can figure out which one was passed to `yarn add`
-    this.flagToOrigin = [flags.dev && 'devDependencies', flags.optional && 'optionalDependencies', flags.peer && 'peerDependencies', 'dependencies'].filter(Boolean).shift();
-  }
-
-  /**
-   * TODO
-   */
-
-  prepareRequests(requests) {
-    const requestsWithArgs = requests.slice();
-
-    for (var _iterator = this.args, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const pattern = _ref;
-
-      requestsWithArgs.push({
-        pattern,
-        registry: 'npm',
-        optional: false
-      });
-    }
-    return requestsWithArgs;
-  }
-
-  /**
-   * returns version for a pattern based on Manifest
-   */
-  getPatternVersion(pattern, pkg) {
-    const tilde = this.flags.tilde;
-    const configPrefix = String(this.config.getOption('save-prefix'));
-    const exact = this.flags.exact || Boolean(this.config.getOption('save-exact')) || configPrefix === '';
-
-    var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(pattern);
-
-    const hasVersion = _normalizePattern.hasVersion,
-          range = _normalizePattern.range;
-
-    let version;
-
-    if ((0, (_index || _load_index()).getExoticResolver)(pattern)) {
-      // wasn't a name/range tuple so this is just a raw exotic pattern
-      version = pattern;
-    } else if (hasVersion && range && ((_semver || _load_semver()).default.satisfies(pkg.version, range) || (0, (_index || _load_index()).getExoticResolver)(range))) {
-      // if the user specified a range then use it verbatim
-      version = range;
-    }
-
-    if (!version || (_semver || _load_semver()).default.valid(version)) {
-      let prefix = configPrefix || '^';
-
-      if (tilde) {
-        prefix = '~';
-      } else if (version || exact) {
-        prefix = '';
-      }
-      version = `${prefix}${pkg.version}`;
-    }
-
-    return version;
-  }
-
-  preparePatterns(patterns) {
-    const preparedPatterns = patterns.slice();
-    for (var _iterator2 = this.resolver.dedupePatterns(this.args), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref2 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref2 = _i2.value;
-      }
-
-      const pattern = _ref2;
-
-      const pkg = this.resolver.getResolvedPattern(pattern);
-      (0, (_invariant || _load_invariant()).default)(pkg, `missing package ${pattern}`);
-      const version = this.getPatternVersion(pattern, pkg);
-      const newPattern = `${pkg.name}@${version}`;
-      preparedPatterns.push(newPattern);
-      this.addedPatterns.push(newPattern);
-      if (newPattern === pattern) {
-        continue;
-      }
-      this.resolver.replacePattern(pattern, newPattern);
-    }
-    return preparedPatterns;
-  }
-
-  preparePatternsForLinking(patterns, cwdManifest, cwdIsRoot) {
-    // remove the newly added patterns if cwd != root and update the in-memory package dependency instead
-    if (cwdIsRoot) {
-      return patterns;
-    }
-
-    let manifest;
-    const cwdPackage = `${cwdManifest.name}@${cwdManifest.version}`;
-    try {
-      manifest = this.resolver.getStrictResolvedPattern(cwdPackage);
-    } catch (e) {
-      this.reporter.warn(this.reporter.lang('unknownPackage', cwdPackage));
-      return patterns;
-    }
-
-    let newPatterns = patterns;
-    this._iterateAddedPackages((pattern, registry, dependencyType, pkgName, version) => {
-      // remove added package from patterns list
-      const filtered = newPatterns.filter(p => p !== pattern);
-      (0, (_invariant || _load_invariant()).default)(newPatterns.length - filtered.length > 0, `expect added pattern '${pattern}' in the list: ${patterns.toString()}`);
-      newPatterns = filtered;
-
-      // add new package into in-memory manifest so they can be linked properly
-      manifest[dependencyType] = manifest[dependencyType] || {};
-      if (manifest[dependencyType][pkgName] === version) {
-        // package already existed
-        return;
-      }
-
-      // update dependencies in the manifest
-      (0, (_invariant || _load_invariant()).default)(manifest._reference, 'manifest._reference should not be null');
-      const ref = manifest._reference;
-
-      ref['dependencies'] = ref['dependencies'] || [];
-      ref['dependencies'].push(pattern);
-    });
-
-    return newPatterns;
-  }
-
-  bailout(patterns, workspaceLayout) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const lockfileCache = _this.lockfile.cache;
-      if (!lockfileCache) {
-        return false;
-      }
-      const match = yield _this.integrityChecker.check(patterns, lockfileCache, _this.flags, workspaceLayout);
-      const haveLockfile = yield (_fs || _load_fs()).exists((_path || _load_path()).default.join(_this.config.lockfileFolder, (_constants || _load_constants()).LOCKFILE_FILENAME));
-      if (match.integrityFileMissing && haveLockfile) {
-        // Integrity file missing, force script installations
-        _this.scripts.setForce(true);
-      }
-      return false;
-    })();
-  }
-
-  /**
-   * Description
-   */
-
-  init() {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const isWorkspaceRoot = _this2.config.workspaceRootFolder && _this2.config.cwd === _this2.config.workspaceRootFolder;
-
-      // running "yarn add something" in a workspace root is often a mistake
-      if (isWorkspaceRoot && !_this2.flags.ignoreWorkspaceRootCheck) {
-        throw new (_errors || _load_errors()).MessageError(_this2.reporter.lang('workspacesAddRootCheck'));
-      }
-
-      _this2.addedPatterns = [];
-      const patterns = yield (_install || _load_install()).Install.prototype.init.call(_this2);
-      yield _this2.maybeOutputSaveTree(patterns);
-      return patterns;
-    })();
-  }
-
-  applyChanges(manifests) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield (_install || _load_install()).Install.prototype.applyChanges.call(_this3, manifests);
-
-      // fill rootPatternsToOrigin without `excludePatterns`
-      yield (_install || _load_install()).Install.prototype.fetchRequestFromCwd.call(_this3);
-
-      _this3._iterateAddedPackages(function (pattern, registry, dependencyType, pkgName, version) {
-        // add it to manifest
-        const object = manifests[registry].object;
-
-
-        object[dependencyType] = object[dependencyType] || {};
-        object[dependencyType][pkgName] = version;
-        if (SILENCE_DEPENDENCY_TYPE_WARNINGS.indexOf(_this3.config.commandName) === -1 && dependencyType !== _this3.flagToOrigin) {
-          _this3.reporter.warn(_this3.reporter.lang('moduleAlreadyInManifest', pkgName, dependencyType, _this3.flagToOrigin));
-        }
-      });
-
-      return true;
-    })();
-  }
-
-  /**
-   * Description
-   */
-
-  fetchRequestFromCwd() {
-    return (_install || _load_install()).Install.prototype.fetchRequestFromCwd.call(this, this.args);
-  }
-
-  /**
-   * Output a tree of any newly added dependencies.
-   */
-
-  maybeOutputSaveTree(patterns) {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // don't limit the shown tree depth
-      const opts = {
-        reqDepth: 0
-      };
-
-      // restore the original patterns
-      const merged = [...patterns, ..._this4.addedPatterns];
-
-      var _ref3 = yield (0, (_list || _load_list()).buildTree)(_this4.resolver, _this4.linker, merged, opts, true, true);
-
-      const trees = _ref3.trees,
-            count = _ref3.count;
-
-
-      if (count === 1) {
-        _this4.reporter.success(_this4.reporter.lang('savedNewDependency'));
-      } else {
-        _this4.reporter.success(_this4.reporter.lang('savedNewDependencies', count));
-      }
-
-      if (!count) {
-        return;
-      }
-
-      const resolverPatterns = new Set();
-      for (var _iterator3 = patterns, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref4 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref4 = _i3.value;
-        }
-
-        const pattern = _ref4;
-
-        var _ref5 = _this4.resolver.getResolvedPattern(pattern) || {};
-
-        const version = _ref5.version,
-              name = _ref5.name;
-
-        resolverPatterns.add(`${name}@${version}`);
-      }
-      const directRequireDependencies = trees.filter(function ({ name }) {
-        return resolverPatterns.has(name);
-      });
-
-      _this4.reporter.info(_this4.reporter.lang('directDependencies'));
-      _this4.reporter.tree('newDirectDependencies', directRequireDependencies);
-      _this4.reporter.info(_this4.reporter.lang('allDependencies'));
-      _this4.reporter.tree('newAllDependencies', trees);
-    })();
-  }
-
-  /**
-   * Save added packages to manifest if any of the --save flags were used.
-   */
-
-  savePackages() {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {})();
-  }
-
-  _iterateAddedPackages(f) {
-    const patternOrigins = Object.keys(this.rootPatternsToOrigin);
-
-    // add new patterns to their appropriate registry manifest
-    for (var _iterator4 = this.addedPatterns, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref6;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref6 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref6 = _i4.value;
-      }
-
-      const pattern = _ref6;
-
-      const pkg = this.resolver.getResolvedPattern(pattern);
-      (0, (_invariant || _load_invariant()).default)(pkg, `missing package ${pattern}`);
-      const version = this.getPatternVersion(pattern, pkg);
-      const ref = pkg._reference;
-      (0, (_invariant || _load_invariant()).default)(ref, 'expected package reference');
-      // lookup the package to determine dependency type; used during `yarn upgrade`
-      const depType = patternOrigins.reduce((acc, prev) => {
-        if (prev.indexOf(`${pkg.name}@`) === 0) {
-          return this.rootPatternsToOrigin[prev];
-        }
-        return acc;
-      }, null);
-
-      // depType is calculated when `yarn upgrade` command is used
-      const target = depType || this.flagToOrigin;
-
-      f(pattern, ref.registry, target, pkg.name, version);
-    }
-  }
-}
-
-exports.Add = Add;
-function hasWrapper(commander) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Installs a package and any packages that it depends on.');
-  commander.usage('add [packages ...] [flags]');
-  commander.option('-W, --ignore-workspace-root-check', 'required to run yarn add inside a workspace root');
-  commander.option('-D, --dev', 'save package to your `devDependencies`');
-  commander.option('-P, --peer', 'save package to your `peerDependencies`');
-  commander.option('-O, --optional', 'save package to your `optionalDependencies`');
-  commander.option('-E, --exact', 'install exact version');
-  commander.option('-T, --tilde', 'install most recent release with the same minor version');
-  commander.option('-A, --audit', 'Run vulnerability audit on installed packages');
-}
-
-/***/ }),
-/* 166 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.pack = exports.packTarball = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let packTarball = exports.packTarball = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, { mapHeader } = {}) {
-    const pkg = yield config.readRootManifest();
-    const bundleDependencies = pkg.bundleDependencies,
-          main = pkg.main,
-          onlyFiles = pkg.files;
-
-    // include required files
-
-    let filters = NEVER_IGNORE.slice();
-    // include default filters unless `files` is used
-    if (!onlyFiles) {
-      filters = filters.concat(DEFAULT_IGNORE);
-    }
-    if (main) {
-      filters = filters.concat((0, (_filter || _load_filter()).ignoreLinesToRegex)(['!/' + main]));
-    }
-
-    // include bundleDependencies
-    let bundleDependenciesFiles = [];
-    if (bundleDependencies) {
-      for (var _iterator = bundleDependencies, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref2 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref2 = _i.value;
-        }
-
-        const dependency = _ref2;
-
-        const dependencyList = depsFor(dependency, config.cwd);
-
-        for (var _iterator2 = dependencyList, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-          var _ref3;
-
-          if (_isArray2) {
-            if (_i2 >= _iterator2.length) break;
-            _ref3 = _iterator2[_i2++];
-          } else {
-            _i2 = _iterator2.next();
-            if (_i2.done) break;
-            _ref3 = _i2.value;
-          }
-
-          const dep = _ref3;
-
-          const filesForBundledDep = yield (_fs || _load_fs()).walk(dep.baseDir, null, new Set(FOLDERS_IGNORE));
-          bundleDependenciesFiles = bundleDependenciesFiles.concat(filesForBundledDep);
-        }
-      }
-    }
-
-    // `files` field
-    if (onlyFiles) {
-      let lines = ['*'];
-      lines = lines.concat(onlyFiles.map(function (filename) {
-        return `!${filename}`;
-      }), onlyFiles.map(function (filename) {
-        return `!${path.join(filename, '**')}`;
-      }));
-      const regexes = (0, (_filter || _load_filter()).ignoreLinesToRegex)(lines, './');
-      filters = filters.concat(regexes);
-    }
-
-    const files = yield (_fs || _load_fs()).walk(config.cwd, null, new Set(FOLDERS_IGNORE));
-    const dotIgnoreFiles = (0, (_filter || _load_filter()).filterOverridenGitignores)(files);
-
-    // create ignores
-    for (var _iterator3 = dotIgnoreFiles, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref4 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref4 = _i3.value;
-      }
-
-      const file = _ref4;
-
-      const raw = yield (_fs || _load_fs()).readFile(file.absolute);
-      const lines = raw.split('\n');
-
-      const regexes = (0, (_filter || _load_filter()).ignoreLinesToRegex)(lines, path.dirname(file.relative));
-      filters = filters.concat(regexes);
-    }
-
-    // files to definitely keep, takes precedence over ignore filter
-    const keepFiles = new Set();
-
-    // files to definitely ignore
-    const ignoredFiles = new Set();
-
-    // list of files that didn't match any of our patterns, if a directory in the chain above was matched
-    // then we should inherit it
-    const possibleKeepFiles = new Set();
-
-    // apply filters
-    (0, (_filter || _load_filter()).sortFilter)(files, filters, keepFiles, possibleKeepFiles, ignoredFiles);
-
-    // add the files for the bundled dependencies to the set of files to keep
-    for (var _iterator4 = bundleDependenciesFiles, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref5 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref5 = _i4.value;
-      }
-
-      const file = _ref5;
-
-      const realPath = yield (_fs || _load_fs()).realpath(config.cwd);
-      keepFiles.add(path.relative(realPath, file.absolute));
-    }
-
-    return packWithIgnoreAndHeaders(config.cwd, function (name) {
-      const relative = path.relative(config.cwd, name);
-      // Don't ignore directories, since we need to recurse inside them to check for unignored files.
-      if (fs2.lstatSync(name).isDirectory()) {
-        const isParentOfKeptFile = Array.from(keepFiles).some(function (name) {
-          return !path.relative(relative, name).startsWith('..');
-        });
-        return !isParentOfKeptFile;
-      }
-      // Otherwise, ignore a file if we're not supposed to keep it.
-      return !keepFiles.has(relative);
-    }, { mapHeader });
-  });
-
-  return function packTarball(_x) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let pack = exports.pack = (() => {
-  var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    const packer = yield packTarball(config);
-    const compressor = packer.pipe(new zlib.Gzip());
-
-    return compressor;
-  });
-
-  return function pack(_x2) {
-    return _ref6.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref7 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const pkg = yield config.readRootManifest();
-    if (!pkg.name) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('noName'));
-    }
-    if (!pkg.version) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('noVersion'));
-    }
-
-    const normaliseScope = function normaliseScope(name) {
-      return name[0] === '@' ? name.substr(1).replace('/', '-') : name;
-    };
-    const filename = flags.filename || path.join(config.cwd, `${normaliseScope(pkg.name)}-v${pkg.version}.tgz`);
-
-    yield config.executeLifecycleScript('prepack');
-
-    const stream = yield pack(config);
-
-    yield new Promise(function (resolve, reject) {
-      stream.pipe(fs2.createWriteStream(filename));
-      stream.on('error', reject);
-      stream.on('close', resolve);
-    });
-
-    yield config.executeLifecycleScript('postpack');
-
-    reporter.success(reporter.lang('packWroteTarball', filename));
-  });
-
-  return function run(_x3, _x4, _x5, _x6) {
-    return _ref7.apply(this, arguments);
-  };
-})();
-
-exports.packWithIgnoreAndHeaders = packWithIgnoreAndHeaders;
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _filter;
-
-function _load_filter() {
-  return _filter = __webpack_require__(372);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const zlib = __webpack_require__(198);
-const path = __webpack_require__(0);
-const tar = __webpack_require__(193);
-const fs2 = __webpack_require__(5);
-const depsFor = __webpack_require__(678);
-
-const FOLDERS_IGNORE = [
-// never allow version control folders
-'.git', 'CVS', '.svn', '.hg', 'node_modules'];
-
-const DEFAULT_IGNORE = (0, (_filter || _load_filter()).ignoreLinesToRegex)([...FOLDERS_IGNORE,
-
-// ignore cruft
-'yarn.lock', '.lock-wscript', '.wafpickle-{0..9}', '*.swp', '._*', 'npm-debug.log', 'yarn-error.log', '.npmrc', '.yarnrc', '.yarnrc.yml', '.npmignore', '.gitignore', '.DS_Store']);
-
-const NEVER_IGNORE = (0, (_filter || _load_filter()).ignoreLinesToRegex)([
-// never ignore these files
-'!/package.json', '!/readme*', '!/+(license|licence)*', '!/+(changes|changelog|history)*']);
-
-function packWithIgnoreAndHeaders(cwd, ignoreFunction, { mapHeader } = {}) {
-  return tar.pack(cwd, {
-    ignore: ignoreFunction,
-    sort: true,
-    map: header => {
-      const suffix = header.name === '.' ? '' : `/${header.name}`;
-      header.name = `package${suffix}`;
-      delete header.uid;
-      delete header.gid;
-      return mapHeader ? mapHeader(header) : header;
-    }
-  });
-}
-
-function setFlags(commander) {
-  commander.description('Creates a compressed gzip archive of package dependencies.');
-  commander.option('-f, --filename <filename>', 'filename');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 167 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = _interopRequireDefault(__webpack_require__(220));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _mutex;
-
-function _load_mutex() {
-  return _mutex = _interopRequireDefault(__webpack_require__(375));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint no-unused-vars: 0 */
-
-const cmdShim = __webpack_require__(201);
-const path = __webpack_require__(0);
-
-class BaseFetcher {
-  constructor(dest, remote, config) {
-    this.reporter = config.reporter;
-    this.packageName = remote.packageName;
-    this.reference = remote.reference;
-    this.registry = remote.registry;
-    this.hash = remote.hash;
-    this.remote = remote;
-    this.config = config;
-    this.dest = dest;
-  }
-
-  setupMirrorFromCache() {
-    // fetcher subclasses may use this to perform actions such as copying over a cached tarball to the offline
-    // mirror etc
-    return Promise.resolve();
-  }
-
-  _fetch() {
-    return Promise.reject(new Error('Not implemented'));
-  }
-
-  fetch(defaultManifest) {
-    var _this = this;
-
-    return (_fs || _load_fs()).lockQueue.push(this.dest, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield (_fs || _load_fs()).mkdirp(_this.dest);
-
-      // fetch package and get the hash
-
-      var _ref2 = yield _this._fetch();
-
-      const hash = _ref2.hash;
-
-
-      const pkg = yield (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-        // load the new normalized manifest
-        try {
-          return yield _this.config.readManifest(_this.dest, _this.registry);
-        } catch (e) {
-          if (e.code === 'ENOENT' && defaultManifest) {
-            return (0, (_index || _load_index()).default)(defaultManifest, _this.dest, _this.config, false);
-          } else {
-            throw e;
-          }
-        }
-      })();
-
-      if (pkg.bin) {
-        for (var _iterator = Object.keys(pkg.bin), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-          var _ref4;
-
-          if (_isArray) {
-            if (_i >= _iterator.length) break;
-            _ref4 = _iterator[_i++];
-          } else {
-            _i = _iterator.next();
-            if (_i.done) break;
-            _ref4 = _i.value;
-          }
-
-          const binName = _ref4;
-
-          const binDest = `${_this.dest}/.bin`;
-
-          // Using any sort of absolute path here would prevent makePortableProxyScript from preserving symlinks when
-          // calling the binary
-          const src = path.resolve(_this.dest, pkg.bin[binName]);
-
-          if (yield (_fs || _load_fs()).exists(src)) {
-            // We ensure that the target is executable
-            yield (_fs || _load_fs()).chmod(src, 0o755);
-          }
-
-          yield (_fs || _load_fs()).mkdirp(binDest);
-          if (process.platform === 'win32') {
-            const unlockMutex = yield (0, (_mutex || _load_mutex()).default)(src);
-            try {
-              yield cmdShim.ifExists(src, `${binDest}/${binName}`, { createPwshFile: false });
-            } finally {
-              unlockMutex();
-            }
-          } else {
-            yield (_fs || _load_fs()).symlink(src, `${binDest}/${binName}`);
-          }
-        }
-      }
-
-      yield (_fs || _load_fs()).writeFile(path.join(_this.dest, (_constants || _load_constants()).METADATA_FILENAME), JSON.stringify({
-        manifest: pkg,
-        artifacts: [],
-        remote: _this.remote,
-        registry: _this.registry,
-        hash
-      }, null, '  '));
-
-      return {
-        hash,
-        dest: _this.dest,
-        package: pkg,
-        cached: false
-      };
-    }));
-  }
-}
-exports.default = BaseFetcher;
-
-/***/ }),
-/* 168 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.hash = hash;
-const crypto = __webpack_require__(11);
-const stream = __webpack_require__(23);
-
-function hash(content, type = 'md5') {
-  return crypto.createHash(type).update(content).digest('hex');
-}
-
-class HashStream extends stream.Transform {
-  constructor(options) {
-    super(options);
-    this._hash = crypto.createHash('sha1');
-    this._updated = false;
-  }
-
-  _transform(chunk, encoding, callback) {
-    this._updated = true;
-    this._hash.update(chunk);
-    callback(null, chunk);
-  }
-
-  getHash() {
-    return this._hash.digest('hex');
-  }
-
-  test(sum) {
-    return this._updated && sum === this.getHash();
-  }
-}
-exports.HashStream = HashStream;
-
-/***/ }),
-/* 169 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = guessName;
-
-var _url;
-
-function _load_url() {
-  return _url = _interopRequireDefault(__webpack_require__(24));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function cleanup(name) {
-  name = name.replace(/-\d+\.\d+\.\d+/, '');
-  return name.replace(/\.git$|\.zip$|\.tar\.gz$|\.tar\.bz2$/, '');
-}
-
-function guessNameFallback(source) {
-  // If cannot parse as url, just return cleaned up last part
-  const parts = source.split('/');
-  return cleanup(parts[parts.length - 1]);
-}
-
-function guessName(source) {
-  try {
-    const parsed = (_url || _load_url()).default.parse(source);
-
-    if (!parsed.pathname) {
-      return guessNameFallback(source);
-    }
-
-    const parts = parsed.pathname.split('/');
-
-    // Priority goes to part that ends with .git
-    for (var _iterator = parts, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const part = _ref;
-
-      if (part.match(/\.git$/)) {
-        return cleanup(part);
-      }
-    }
-
-    // Most likely a directory
-    if (parsed.host == null) {
-      return cleanup(parts[parts.length - 1]);
-    }
-
-    // A site like github or gitlab
-    if (parts.length > 2) {
-      return cleanup(parts[2]);
-    }
-
-    // Privately hosted package?
-    if (parts.length > 1) {
-      return cleanup(parts[1]);
-    }
-
-    return guessNameFallback(source);
-  } catch (e) {
-    return guessNameFallback(source);
-  }
-}
-
-/***/ }),
-/* 170 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// fallback for non-array-like ES3 and non-enumerable old V8 strings
-var cof = __webpack_require__(69);
-// eslint-disable-next-line no-prototype-builtins
-module.exports = Object('z').propertyIsEnumerable(0) ? Object : function (it) {
-  return cof(it) == 'String' ? it.split('') : Object(it);
-};
-
-
-/***/ }),
-/* 171 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 19.1.2.14 / 15.2.3.14 Object.keys(O)
-var $keys = __webpack_require__(249);
-var enumBugKeys = __webpack_require__(127);
-
-module.exports = Object.keys || function keys(O) {
-  return $keys(O, enumBugKeys);
-};
-
-
-/***/ }),
-/* 172 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 7.1.13 ToObject(argument)
-var defined = __webpack_require__(91);
-module.exports = function (it) {
-  return Object(defined(it));
-};
-
-
-/***/ }),
-/* 173 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var once = __webpack_require__(83);
-
-var noop = function() {};
-
-var isRequest = function(stream) {
-	return stream.setHeader && typeof stream.abort === 'function';
-};
-
-var isChildProcess = function(stream) {
-	return stream.stdio && Array.isArray(stream.stdio) && stream.stdio.length === 3
-};
-
-var eos = function(stream, opts, callback) {
-	if (typeof opts === 'function') return eos(stream, null, opts);
-	if (!opts) opts = {};
-
-	callback = once(callback || noop);
-
-	var ws = stream._writableState;
-	var rs = stream._readableState;
-	var readable = opts.readable || (opts.readable !== false && stream.readable);
-	var writable = opts.writable || (opts.writable !== false && stream.writable);
-
-	var onlegacyfinish = function() {
-		if (!stream.writable) onfinish();
-	};
-
-	var onfinish = function() {
-		writable = false;
-		if (!readable) callback.call(stream);
-	};
-
-	var onend = function() {
-		readable = false;
-		if (!writable) callback.call(stream);
-	};
-
-	var onexit = function(exitCode) {
-		callback.call(stream, exitCode ? new Error('exited with error code: ' + exitCode) : null);
-	};
-
-	var onerror = function(err) {
-		callback.call(stream, err);
-	};
-
-	var onclose = function() {
-		if (readable && !(rs && rs.ended)) return callback.call(stream, new Error('premature close'));
-		if (writable && !(ws && ws.ended)) return callback.call(stream, new Error('premature close'));
-	};
-
-	var onrequest = function() {
-		stream.req.on('finish', onfinish);
-	};
-
-	if (isRequest(stream)) {
-		stream.on('complete', onfinish);
-		stream.on('abort', onclose);
-		if (stream.req) onrequest();
-		else stream.on('request', onrequest);
-	} else if (writable && !ws) { // legacy streams
-		stream.on('end', onlegacyfinish);
-		stream.on('close', onlegacyfinish);
-	}
-
-	if (isChildProcess(stream)) stream.on('exit', onexit);
-
-	stream.on('end', onend);
-	stream.on('finish', onfinish);
-	if (opts.error !== false) stream.on('error', onerror);
-	stream.on('close', onclose);
-
-	return function() {
-		stream.removeListener('complete', onfinish);
-		stream.removeListener('abort', onclose);
-		stream.removeListener('request', onrequest);
-		if (stream.req) stream.req.removeListener('finish', onfinish);
-		stream.removeListener('end', onlegacyfinish);
-		stream.removeListener('close', onlegacyfinish);
-		stream.removeListener('finish', onfinish);
-		stream.removeListener('exit', onexit);
-		stream.removeListener('end', onend);
-		stream.removeListener('error', onerror);
-		stream.removeListener('close', onclose);
-	};
-};
-
-module.exports = eos;
-
-
-/***/ }),
-/* 174 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2012 Joyent, Inc.  All rights reserved.
-
-var assert = __webpack_require__(16);
-var sshpk = __webpack_require__(328);
-var util = __webpack_require__(3);
-
-var HASH_ALGOS = {
-  'sha1': true,
-  'sha256': true,
-  'sha512': true
-};
-
-var PK_ALGOS = {
-  'rsa': true,
-  'dsa': true,
-  'ecdsa': true
-};
-
-function HttpSignatureError(message, caller) {
-  if (Error.captureStackTrace)
-    Error.captureStackTrace(this, caller || HttpSignatureError);
-
-  this.message = message;
-  this.name = caller.name;
-}
-util.inherits(HttpSignatureError, Error);
-
-function InvalidAlgorithmError(message) {
-  HttpSignatureError.call(this, message, InvalidAlgorithmError);
-}
-util.inherits(InvalidAlgorithmError, HttpSignatureError);
-
-function validateAlgorithm(algorithm) {
-  var alg = algorithm.toLowerCase().split('-');
-
-  if (alg.length !== 2) {
-    throw (new InvalidAlgorithmError(alg[0].toUpperCase() + ' is not a ' +
-      'valid algorithm'));
-  }
-
-  if (alg[0] !== 'hmac' && !PK_ALGOS[alg[0]]) {
-    throw (new InvalidAlgorithmError(alg[0].toUpperCase() + ' type keys ' +
-      'are not supported'));
-  }
-
-  if (!HASH_ALGOS[alg[1]]) {
-    throw (new InvalidAlgorithmError(alg[1].toUpperCase() + ' is not a ' +
-      'supported hash algorithm'));
-  }
-
-  return (alg);
-}
-
-///--- API
-
-module.exports = {
-
-  HASH_ALGOS: HASH_ALGOS,
-  PK_ALGOS: PK_ALGOS,
-
-  HttpSignatureError: HttpSignatureError,
-  InvalidAlgorithmError: InvalidAlgorithmError,
-
-  validateAlgorithm: validateAlgorithm,
-
-  /**
-   * Converts an OpenSSH public key (rsa only) to a PKCS#8 PEM file.
-   *
-   * The intent of this module is to interoperate with OpenSSL only,
-   * specifically the node crypto module's `verify` method.
-   *
-   * @param {String} key an OpenSSH public key.
-   * @return {String} PEM encoded form of the RSA public key.
-   * @throws {TypeError} on bad input.
-   * @throws {Error} on invalid ssh key formatted data.
-   */
-  sshKeyToPEM: function sshKeyToPEM(key) {
-    assert.string(key, 'ssh_key');
-
-    var k = sshpk.parseKey(key, 'ssh');
-    return (k.toString('pem'));
-  },
-
-
-  /**
-   * Generates an OpenSSH fingerprint from an ssh public key.
-   *
-   * @param {String} key an OpenSSH public key.
-   * @return {String} key fingerprint.
-   * @throws {TypeError} on bad input.
-   * @throws {Error} if what you passed doesn't look like an ssh public key.
-   */
-  fingerprint: function fingerprint(key) {
-    assert.string(key, 'ssh_key');
-
-    var k = sshpk.parseKey(key, 'ssh');
-    return (k.fingerprint('md5').toString('hex'));
-  },
-
-  /**
-   * Converts a PKGCS#8 PEM file to an OpenSSH public key (rsa)
-   *
-   * The reverse of the above function.
-   */
-  pemToRsaSSHKey: function pemToRsaSSHKey(pem, comment) {
-    assert.equal('string', typeof (pem), 'typeof pem');
-
-    var k = sshpk.parseKey(pem, 'pem');
-    k.comment = comment;
-    return (k.toString('ssh'));
-  }
-};
-
-
-/***/ }),
-/* 175 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var chalk = __webpack_require__(30);
-var figures = __webpack_require__(270);
-
-/**
- * Separator object
- * Used to space/separate choices group
- * @constructor
- * @param {String} line   Separation line content (facultative)
- */
-
-class Separator {
-  constructor(line) {
-    this.type = 'separator';
-    this.line = chalk.dim(line || new Array(15).join(figures.line));
-  }
-
-  /**
-   * Stringify separator
-   * @return {String} the separator display string
-   */
-  toString() {
-    return this.line;
-  }
-}
-
-/**
- * Helper function returning false if object is a separator
- * @param  {Object} obj object to test against
- * @return {Boolean}    `false` if object is a separator
- */
-
-Separator.exclude = function(obj) {
-  return obj.type !== 'separator';
-};
-
-module.exports = Separator;
-
-
-/***/ }),
-/* 176 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-
-/**
- * The paginator keeps track of a pointer index in a list and returns
- * a subset of the choices if the list is too long.
- */
-
-class Paginator {
-  constructor(screen) {
-    this.pointer = 0;
-    this.lastIndex = 0;
-    this.screen = screen;
-  }
-
-  paginate(output, active, pageSize) {
-    pageSize = pageSize || 7;
-    var middleOfList = Math.floor(pageSize / 2);
-    var lines = output.split('\n');
-
-    if (this.screen) {
-      lines = this.screen.breakLines(lines);
-      active = _.sum(lines.map(lineParts => lineParts.length).splice(0, active));
-      lines = _.flatten(lines);
-    }
-
-    // Make sure there's enough lines to paginate
-    if (lines.length <= pageSize) {
-      return output;
-    }
-
-    // Move the pointer only when the user go down and limit it to the middle of the list
-    if (
-      this.pointer < middleOfList &&
-      this.lastIndex < active &&
-      active - this.lastIndex < pageSize
-    ) {
-      this.pointer = Math.min(middleOfList, this.pointer + active - this.lastIndex);
-    }
-    this.lastIndex = active;
-
-    // Duplicate the lines so it give an infinite list look
-    var infinite = _.flatten([lines, lines, lines]);
-    var topIndex = Math.max(0, active + lines.length - this.pointer);
-
-    var section = infinite.splice(topIndex, pageSize).join('\n');
-    return section + '\n' + chalk.dim('(Move up and down to reveal more choices)');
-  }
-}
-
-module.exports = Paginator;
-
-
-/***/ }),
-/* 177 */
-/***/ (function(module, exports) {
-
-/*!
- * is-extglob <https://github.com/jonschlinkert/is-extglob>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-module.exports = function isExtglob(str) {
-  return typeof str === 'string'
-    && /[@?!+*]\(/.test(str);
-};
-
-
-/***/ }),
-/* 178 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*!
- * is-glob <https://github.com/jonschlinkert/is-glob>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-var isExtglob = __webpack_require__(177);
-
-module.exports = function isGlob(str) {
-  return typeof str === 'string'
-    && (/[*!?{}(|)[\]]/.test(str)
-     || isExtglob(str));
-};
-
-/***/ }),
-/* 179 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var isBuffer = __webpack_require__(729);
-var toString = Object.prototype.toString;
-
-/**
- * Get the native `typeof` a value.
- *
- * @param  {*} `val`
- * @return {*} Native javascript type
- */
-
-module.exports = function kindOf(val) {
-  // primitivies
-  if (typeof val === 'undefined') {
-    return 'undefined';
-  }
-  if (val === null) {
-    return 'null';
-  }
-  if (val === true || val === false || val instanceof Boolean) {
-    return 'boolean';
-  }
-  if (typeof val === 'string' || val instanceof String) {
-    return 'string';
-  }
-  if (typeof val === 'number' || val instanceof Number) {
-    return 'number';
-  }
-
-  // functions
-  if (typeof val === 'function' || val instanceof Function) {
-    return 'function';
-  }
-
-  // array
-  if (typeof Array.isArray !== 'undefined' && Array.isArray(val)) {
-    return 'array';
-  }
-
-  // check for instances of RegExp and Date before calling `toString`
-  if (val instanceof RegExp) {
-    return 'regexp';
-  }
-  if (val instanceof Date) {
-    return 'date';
-  }
-
-  // other objects
-  var type = toString.call(val);
-
-  if (type === '[object RegExp]') {
-    return 'regexp';
-  }
-  if (type === '[object Date]') {
-    return 'date';
-  }
-  if (type === '[object Arguments]') {
-    return 'arguments';
-  }
-  if (type === '[object Error]') {
-    return 'error';
-  }
-
-  // buffer
-  if (isBuffer(val)) {
-    return 'buffer';
-  }
-
-  // es6: Map, WeakMap, Set, WeakSet
-  if (type === '[object Set]') {
-    return 'set';
-  }
-  if (type === '[object WeakSet]') {
-    return 'weakset';
-  }
-  if (type === '[object Map]') {
-    return 'map';
-  }
-  if (type === '[object WeakMap]') {
-    return 'weakmap';
-  }
-  if (type === '[object Symbol]') {
-    return 'symbol';
-  }
-
-  // typed arrays
-  if (type === '[object Int8Array]') {
-    return 'int8array';
-  }
-  if (type === '[object Uint8Array]') {
-    return 'uint8array';
-  }
-  if (type === '[object Uint8ClampedArray]') {
-    return 'uint8clampedarray';
-  }
-  if (type === '[object Int16Array]') {
-    return 'int16array';
-  }
-  if (type === '[object Uint16Array]') {
-    return 'uint16array';
-  }
-  if (type === '[object Int32Array]') {
-    return 'int32array';
-  }
-  if (type === '[object Uint32Array]') {
-    return 'uint32array';
-  }
-  if (type === '[object Float32Array]') {
-    return 'float32array';
-  }
-  if (type === '[object Float64Array]') {
-    return 'float64array';
-  }
-
-  // must be a plain object
-  return 'object';
-};
-
-
-/***/ }),
-/* 180 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-if (!process.version ||
-    process.version.indexOf('v0.') === 0 ||
-    process.version.indexOf('v1.') === 0 && process.version.indexOf('v1.8.') !== 0) {
-  module.exports = { nextTick: nextTick };
-} else {
-  module.exports = process
-}
-
-function nextTick(fn, arg1, arg2, arg3) {
-  if (typeof fn !== 'function') {
-    throw new TypeError('"callback" argument must be a function');
-  }
-  var len = arguments.length;
-  var args, i;
-  switch (len) {
-  case 0:
-  case 1:
-    return process.nextTick(fn);
-  case 2:
-    return process.nextTick(function afterTickOne() {
-      fn.call(null, arg1);
-    });
-  case 3:
-    return process.nextTick(function afterTickTwo() {
-      fn.call(null, arg1, arg2);
-    });
-  case 4:
-    return process.nextTick(function afterTickThree() {
-      fn.call(null, arg1, arg2, arg3);
-    });
-  default:
-    args = new Array(len - 1);
-    i = 0;
-    while (i < args.length) {
-      args[i++] = arguments[i];
-    }
-    return process.nextTick(function afterTick() {
-      fn.apply(null, args);
-    });
-  }
-}
-
-
-
-/***/ }),
-/* 181 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var isPromise = __webpack_require__(741);
-
-/**
- * Return a function that will run a function asynchronously or synchronously
- *
- * example:
- * runAsync(wrappedFunction, callback)(...args);
- *
- * @param   {Function} func  Function to run
- * @param   {Function} cb    Callback function passed the `func` returned value
- * @return  {Function(arguments)} Arguments to pass to `func`. This function will in turn
- *                                return a Promise (Node >= 0.12) or call the callbacks.
- */
-
-var runAsync = module.exports = function (func, cb) {
-  cb = cb || function () {};
-
-  return function () {
-    var async = false;
-    var args = arguments;
-
-    var promise = new Promise(function (resolve, reject) {
-      var answer = func.apply({
-        async: function () {
-          async = true;
-          return function (err, value) {
-            if (err) {
-              reject(err);
-            } else {
-              resolve(value);
-            }
-          };
-        }
-      }, Array.prototype.slice.call(args));
-
-      if (!async) {
-        if (isPromise(answer)) {
-          answer.then(resolve, reject);
-        } else {
-          resolve(answer);
-        }
-      }
-    });
-
-    promise.then(cb.bind(null, null), cb);
-
-    return promise;
-  }
-};
-
-runAsync.cb = function (func, cb) {
-  return runAsync(function () {
-    var args = Array.prototype.slice.call(arguments);
-    if (args.length === func.length - 1) {
-      args.push(this.async());
-    }
-    return func.apply(this, args);
-  }, cb);
-};
-
-
-/***/ }),
-/* 182 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-Object.defineProperty(__webpack_exports__, "__esModule", { value: true });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__internal_Observable__ = __webpack_require__(12);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Observable", function() { return __WEBPACK_IMPORTED_MODULE_0__internal_Observable__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__internal_observable_ConnectableObservable__ = __webpack_require__(423);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ConnectableObservable", function() { return __WEBPACK_IMPORTED_MODULE_1__internal_observable_ConnectableObservable__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__internal_operators_groupBy__ = __webpack_require__(433);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "GroupedObservable", function() { return __WEBPACK_IMPORTED_MODULE_2__internal_operators_groupBy__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__internal_symbol_observable__ = __webpack_require__(117);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "observable", function() { return __WEBPACK_IMPORTED_MODULE_3__internal_symbol_observable__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__internal_Subject__ = __webpack_require__(36);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Subject", function() { return __WEBPACK_IMPORTED_MODULE_4__internal_Subject__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__internal_BehaviorSubject__ = __webpack_require__(419);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "BehaviorSubject", function() { return __WEBPACK_IMPORTED_MODULE_5__internal_BehaviorSubject__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__internal_ReplaySubject__ = __webpack_require__(308);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ReplaySubject", function() { return __WEBPACK_IMPORTED_MODULE_6__internal_ReplaySubject__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__internal_AsyncSubject__ = __webpack_require__(183);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "AsyncSubject", function() { return __WEBPACK_IMPORTED_MODULE_7__internal_AsyncSubject__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__internal_scheduler_asap__ = __webpack_require__(438);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "asapScheduler", function() { return __WEBPACK_IMPORTED_MODULE_8__internal_scheduler_asap__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__internal_scheduler_async__ = __webpack_require__(40);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "asyncScheduler", function() { return __WEBPACK_IMPORTED_MODULE_9__internal_scheduler_async__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_10__internal_scheduler_queue__ = __webpack_require__(439);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "queueScheduler", function() { return __WEBPACK_IMPORTED_MODULE_10__internal_scheduler_queue__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_11__internal_scheduler_animationFrame__ = __webpack_require__(926);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "animationFrameScheduler", function() { return __WEBPACK_IMPORTED_MODULE_11__internal_scheduler_animationFrame__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_12__internal_scheduler_VirtualTimeScheduler__ = __webpack_require__(925);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualTimeScheduler", function() { return __WEBPACK_IMPORTED_MODULE_12__internal_scheduler_VirtualTimeScheduler__["a"]; });
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "VirtualAction", function() { return __WEBPACK_IMPORTED_MODULE_12__internal_scheduler_VirtualTimeScheduler__["b"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_13__internal_Scheduler__ = __webpack_require__(421);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Scheduler", function() { return __WEBPACK_IMPORTED_MODULE_13__internal_Scheduler__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_14__internal_Subscription__ = __webpack_require__(25);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Subscription", function() { return __WEBPACK_IMPORTED_MODULE_14__internal_Subscription__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_15__internal_Subscriber__ = __webpack_require__(7);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Subscriber", function() { return __WEBPACK_IMPORTED_MODULE_15__internal_Subscriber__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_16__internal_Notification__ = __webpack_require__(184);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "Notification", function() { return __WEBPACK_IMPORTED_MODULE_16__internal_Notification__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_17__internal_util_pipe__ = __webpack_require__(324);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "pipe", function() { return __WEBPACK_IMPORTED_MODULE_17__internal_util_pipe__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_18__internal_util_noop__ = __webpack_require__(191);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "noop", function() { return __WEBPACK_IMPORTED_MODULE_18__internal_util_noop__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_19__internal_util_identity__ = __webpack_require__(118);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "identity", function() { return __WEBPACK_IMPORTED_MODULE_19__internal_util_identity__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_20__internal_util_isObservable__ = __webpack_require__(930);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "isObservable", function() { return __WEBPACK_IMPORTED_MODULE_20__internal_util_isObservable__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_21__internal_util_ArgumentOutOfRangeError__ = __webpack_require__(152);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ArgumentOutOfRangeError", function() { return __WEBPACK_IMPORTED_MODULE_21__internal_util_ArgumentOutOfRangeError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_22__internal_util_EmptyError__ = __webpack_require__(153);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "EmptyError", function() { return __WEBPACK_IMPORTED_MODULE_22__internal_util_EmptyError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_23__internal_util_ObjectUnsubscribedError__ = __webpack_require__(189);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "ObjectUnsubscribedError", function() { return __WEBPACK_IMPORTED_MODULE_23__internal_util_ObjectUnsubscribedError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_24__internal_util_UnsubscriptionError__ = __webpack_require__(441);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "UnsubscriptionError", function() { return __WEBPACK_IMPORTED_MODULE_24__internal_util_UnsubscriptionError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_25__internal_util_TimeoutError__ = __webpack_require__(440);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "TimeoutError", function() { return __WEBPACK_IMPORTED_MODULE_25__internal_util_TimeoutError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_26__internal_observable_bindCallback__ = __webpack_require__(823);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "bindCallback", function() { return __WEBPACK_IMPORTED_MODULE_26__internal_observable_bindCallback__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_27__internal_observable_bindNodeCallback__ = __webpack_require__(824);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "bindNodeCallback", function() { return __WEBPACK_IMPORTED_MODULE_27__internal_observable_bindNodeCallback__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_28__internal_observable_combineLatest__ = __webpack_require__(309);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "combineLatest", function() { return __WEBPACK_IMPORTED_MODULE_28__internal_observable_combineLatest__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_29__internal_observable_concat__ = __webpack_require__(186);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "concat", function() { return __WEBPACK_IMPORTED_MODULE_29__internal_observable_concat__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_30__internal_observable_defer__ = __webpack_require__(310);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "defer", function() { return __WEBPACK_IMPORTED_MODULE_30__internal_observable_defer__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_31__internal_observable_empty__ = __webpack_require__(39);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "empty", function() { return __WEBPACK_IMPORTED_MODULE_31__internal_observable_empty__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_32__internal_observable_forkJoin__ = __webpack_require__(825);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "forkJoin", function() { return __WEBPACK_IMPORTED_MODULE_32__internal_observable_forkJoin__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_33__internal_observable_from__ = __webpack_require__(62);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "from", function() { return __WEBPACK_IMPORTED_MODULE_33__internal_observable_from__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_34__internal_observable_fromEvent__ = __webpack_require__(826);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "fromEvent", function() { return __WEBPACK_IMPORTED_MODULE_34__internal_observable_fromEvent__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_35__internal_observable_fromEventPattern__ = __webpack_require__(827);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "fromEventPattern", function() { return __WEBPACK_IMPORTED_MODULE_35__internal_observable_fromEventPattern__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_36__internal_observable_generate__ = __webpack_require__(831);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "generate", function() { return __WEBPACK_IMPORTED_MODULE_36__internal_observable_generate__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_37__internal_observable_iif__ = __webpack_require__(832);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "iif", function() { return __WEBPACK_IMPORTED_MODULE_37__internal_observable_iif__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_38__internal_observable_interval__ = __webpack_require__(833);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "interval", function() { return __WEBPACK_IMPORTED_MODULE_38__internal_observable_interval__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_39__internal_observable_merge__ = __webpack_require__(424);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "merge", function() { return __WEBPACK_IMPORTED_MODULE_39__internal_observable_merge__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_40__internal_observable_never__ = __webpack_require__(425);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "never", function() { return __WEBPACK_IMPORTED_MODULE_40__internal_observable_never__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_41__internal_observable_of__ = __webpack_require__(311);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "of", function() { return __WEBPACK_IMPORTED_MODULE_41__internal_observable_of__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_42__internal_observable_onErrorResumeNext__ = __webpack_require__(834);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "onErrorResumeNext", function() { return __WEBPACK_IMPORTED_MODULE_42__internal_observable_onErrorResumeNext__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_43__internal_observable_pairs__ = __webpack_require__(835);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "pairs", function() { return __WEBPACK_IMPORTED_MODULE_43__internal_observable_pairs__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_44__internal_observable_race__ = __webpack_require__(426);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "race", function() { return __WEBPACK_IMPORTED_MODULE_44__internal_observable_race__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_45__internal_observable_range__ = __webpack_require__(836);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "range", function() { return __WEBPACK_IMPORTED_MODULE_45__internal_observable_range__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_46__internal_observable_throwError__ = __webpack_require__(313);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "throwError", function() { return __WEBPACK_IMPORTED_MODULE_46__internal_observable_throwError__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_47__internal_observable_timer__ = __webpack_require__(427);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "timer", function() { return __WEBPACK_IMPORTED_MODULE_47__internal_observable_timer__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_48__internal_observable_using__ = __webpack_require__(837);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "using", function() { return __WEBPACK_IMPORTED_MODULE_48__internal_observable_using__["a"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_49__internal_observable_zip__ = __webpack_require__(314);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "zip", function() { return __WEBPACK_IMPORTED_MODULE_49__internal_observable_zip__["a"]; });
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "EMPTY", function() { return __WEBPACK_IMPORTED_MODULE_31__internal_observable_empty__["b"]; });
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "NEVER", function() { return __WEBPACK_IMPORTED_MODULE_40__internal_observable_never__["b"]; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_50__internal_config__ = __webpack_require__(185);
-/* harmony reexport (binding) */ __webpack_require__.d(__webpack_exports__, "config", function() { return __WEBPACK_IMPORTED_MODULE_50__internal_config__["a"]; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-//# sourceMappingURL=index.js.map
-
-
-/***/ }),
-/* 183 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AsyncSubject; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscription__ = __webpack_require__(25);
-/** PURE_IMPORTS_START tslib,_Subject,_Subscription PURE_IMPORTS_END */
-
-
-
-var AsyncSubject = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AsyncSubject, _super);
-    function AsyncSubject() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.value = null;
-        _this.hasNext = false;
-        _this.hasCompleted = false;
-        return _this;
-    }
-    AsyncSubject.prototype._subscribe = function (subscriber) {
-        if (this.hasError) {
-            subscriber.error(this.thrownError);
-            return __WEBPACK_IMPORTED_MODULE_2__Subscription__["a" /* Subscription */].EMPTY;
-        }
-        else if (this.hasCompleted && this.hasNext) {
-            subscriber.next(this.value);
-            subscriber.complete();
-            return __WEBPACK_IMPORTED_MODULE_2__Subscription__["a" /* Subscription */].EMPTY;
-        }
-        return _super.prototype._subscribe.call(this, subscriber);
-    };
-    AsyncSubject.prototype.next = function (value) {
-        if (!this.hasCompleted) {
-            this.value = value;
-            this.hasNext = true;
-        }
-    };
-    AsyncSubject.prototype.error = function (error) {
-        if (!this.hasCompleted) {
-            _super.prototype.error.call(this, error);
-        }
-    };
-    AsyncSubject.prototype.complete = function () {
-        this.hasCompleted = true;
-        if (this.hasNext) {
-            _super.prototype.next.call(this, this.value);
-        }
-        _super.prototype.complete.call(this);
-    };
-    return AsyncSubject;
-}(__WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]));
-
-//# sourceMappingURL=AsyncSubject.js.map
-
-
-/***/ }),
-/* 184 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Notification; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_empty__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__observable_of__ = __webpack_require__(311);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_throwError__ = __webpack_require__(313);
-/** PURE_IMPORTS_START _observable_empty,_observable_of,_observable_throwError PURE_IMPORTS_END */
-
-
-
-var Notification = /*@__PURE__*/ (function () {
-    function Notification(kind, value, error) {
-        this.kind = kind;
-        this.value = value;
-        this.error = error;
-        this.hasValue = kind === 'N';
-    }
-    Notification.prototype.observe = function (observer) {
-        switch (this.kind) {
-            case 'N':
-                return observer.next && observer.next(this.value);
-            case 'E':
-                return observer.error && observer.error(this.error);
-            case 'C':
-                return observer.complete && observer.complete();
-        }
-    };
-    Notification.prototype.do = function (next, error, complete) {
-        var kind = this.kind;
-        switch (kind) {
-            case 'N':
-                return next && next(this.value);
-            case 'E':
-                return error && error(this.error);
-            case 'C':
-                return complete && complete();
-        }
-    };
-    Notification.prototype.accept = function (nextOrObserver, error, complete) {
-        if (nextOrObserver && typeof nextOrObserver.next === 'function') {
-            return this.observe(nextOrObserver);
-        }
-        else {
-            return this.do(nextOrObserver, error, complete);
-        }
-    };
-    Notification.prototype.toObservable = function () {
-        var kind = this.kind;
-        switch (kind) {
-            case 'N':
-                return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__observable_of__["a" /* of */])(this.value);
-            case 'E':
-                return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_throwError__["a" /* throwError */])(this.error);
-            case 'C':
-                return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__observable_empty__["a" /* empty */])();
-        }
-        throw new Error('unexpected notification kind value');
-    };
-    Notification.createNext = function (value) {
-        if (typeof value !== 'undefined') {
-            return new Notification('N', value);
-        }
-        return Notification.undefinedValueNotification;
-    };
-    Notification.createError = function (err) {
-        return new Notification('E', undefined, err);
-    };
-    Notification.createComplete = function () {
-        return Notification.completeNotification;
-    };
-    Notification.completeNotification = new Notification('C');
-    Notification.undefinedValueNotification = new Notification('N', undefined);
-    return Notification;
-}());
-
-//# sourceMappingURL=Notification.js.map
-
-
-/***/ }),
-/* 185 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return config; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var _enable_super_gross_mode_that_will_cause_bad_things = false;
-var config = {
-    Promise: undefined,
-    set useDeprecatedSynchronousErrorHandling(value) {
-        if (value) {
-            var error = /*@__PURE__*/ new Error();
-            /*@__PURE__*/ console.warn('DEPRECATED! RxJS was set to use deprecated synchronous error handling behavior by code at: \n' + error.stack);
-        }
-        else if (_enable_super_gross_mode_that_will_cause_bad_things) {
-            /*@__PURE__*/ console.log('RxJS: Back to a better error behavior. Thank you. <3');
-        }
-        _enable_super_gross_mode_that_will_cause_bad_things = value;
-    },
-    get useDeprecatedSynchronousErrorHandling() {
-        return _enable_super_gross_mode_that_will_cause_bad_things;
-    },
-};
-//# sourceMappingURL=config.js.map
-
-
-/***/ }),
-/* 186 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = concat;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_isScheduler__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__of__ = __webpack_require__(311);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__from__ = __webpack_require__(62);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__operators_concatAll__ = __webpack_require__(429);
-/** PURE_IMPORTS_START _util_isScheduler,_of,_from,_operators_concatAll PURE_IMPORTS_END */
-
-
-
-
-function concat() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    if (observables.length === 1 || (observables.length === 2 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_isScheduler__["a" /* isScheduler */])(observables[1]))) {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__from__["a" /* from */])(observables[0]);
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__operators_concatAll__["a" /* concatAll */])()(__WEBPACK_IMPORTED_MODULE_1__of__["a" /* of */].apply(void 0, observables));
-}
-//# sourceMappingURL=concat.js.map
-
-
-/***/ }),
-/* 187 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = reduce;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__scan__ = __webpack_require__(317);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__takeLast__ = __webpack_require__(320);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__defaultIfEmpty__ = __webpack_require__(146);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_pipe__ = __webpack_require__(324);
-/** PURE_IMPORTS_START _scan,_takeLast,_defaultIfEmpty,_util_pipe PURE_IMPORTS_END */
-
-
-
-
-function reduce(accumulator, seed) {
-    if (arguments.length >= 2) {
-        return function reduceOperatorFunctionWithSeed(source) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_pipe__["a" /* pipe */])(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__scan__["a" /* scan */])(accumulator, seed), __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__takeLast__["a" /* takeLast */])(1), __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__defaultIfEmpty__["a" /* defaultIfEmpty */])(seed))(source);
-        };
-    }
-    return function reduceOperatorFunction(source) {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_pipe__["a" /* pipe */])(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__scan__["a" /* scan */])(function (acc, value, index) { return accumulator(acc, value, index + 1); }), __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__takeLast__["a" /* takeLast */])(1))(source);
-    };
-}
-//# sourceMappingURL=reduce.js.map
-
-
-/***/ }),
-/* 188 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return throwIfEmpty; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__tap__ = __webpack_require__(435);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_EmptyError__ = __webpack_require__(153);
-/** PURE_IMPORTS_START _tap,_util_EmptyError PURE_IMPORTS_END */
-
-
-var throwIfEmpty = function (errorFactory) {
-    if (errorFactory === void 0) {
-        errorFactory = defaultErrorFactory;
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__tap__["a" /* tap */])({
-        hasValue: false,
-        next: function () { this.hasValue = true; },
-        complete: function () {
-            if (!this.hasValue) {
-                throw errorFactory();
-            }
-        }
-    });
-};
-function defaultErrorFactory() {
-    return new __WEBPACK_IMPORTED_MODULE_1__util_EmptyError__["a" /* EmptyError */]();
-}
-//# sourceMappingURL=throwIfEmpty.js.map
-
-
-/***/ }),
-/* 189 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ObjectUnsubscribedError; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function ObjectUnsubscribedErrorImpl() {
-    Error.call(this);
-    this.message = 'object unsubscribed';
-    this.name = 'ObjectUnsubscribedError';
-    return this;
-}
-ObjectUnsubscribedErrorImpl.prototype = /*@__PURE__*/ Object.create(Error.prototype);
-var ObjectUnsubscribedError = ObjectUnsubscribedErrorImpl;
-//# sourceMappingURL=ObjectUnsubscribedError.js.map
-
-
-/***/ }),
-/* 190 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isNumeric;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__isArray__ = __webpack_require__(41);
-/** PURE_IMPORTS_START _isArray PURE_IMPORTS_END */
-
-function isNumeric(val) {
-    return !__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__isArray__["a" /* isArray */])(val) && (val - parseFloat(val) + 1) >= 0;
-}
-//# sourceMappingURL=isNumeric.js.map
-
-
-/***/ }),
-/* 191 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = noop;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function noop() { }
-//# sourceMappingURL=noop.js.map
-
-
-/***/ }),
-/* 192 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	readSSHPrivate: readSSHPrivate,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var asn1 = __webpack_require__(66);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var crypto = __webpack_require__(11);
-
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var pem = __webpack_require__(86);
-var rfc4253 = __webpack_require__(103);
-var SSHBuffer = __webpack_require__(159);
-var errors = __webpack_require__(74);
-
-var bcrypt;
-
-function read(buf, options) {
-	return (pem.read(buf, options));
-}
-
-var MAGIC = 'openssh-key-v1';
-
-function readSSHPrivate(type, buf, options) {
-	buf = new SSHBuffer({buffer: buf});
-
-	var magic = buf.readCString();
-	assert.strictEqual(magic, MAGIC, 'bad magic string');
-
-	var cipher = buf.readString();
-	var kdf = buf.readString();
-	var kdfOpts = buf.readBuffer();
-
-	var nkeys = buf.readInt();
-	if (nkeys !== 1) {
-		throw (new Error('OpenSSH-format key file contains ' +
-		    'multiple keys: this is unsupported.'));
-	}
-
-	var pubKey = buf.readBuffer();
-
-	if (type === 'public') {
-		assert.ok(buf.atEnd(), 'excess bytes left after key');
-		return (rfc4253.read(pubKey));
-	}
-
-	var privKeyBlob = buf.readBuffer();
-	assert.ok(buf.atEnd(), 'excess bytes left after key');
-
-	var kdfOptsBuf = new SSHBuffer({ buffer: kdfOpts });
-	switch (kdf) {
-	case 'none':
-		if (cipher !== 'none') {
-			throw (new Error('OpenSSH-format key uses KDF "none" ' +
-			     'but specifies a cipher other than "none"'));
-		}
-		break;
-	case 'bcrypt':
-		var salt = kdfOptsBuf.readBuffer();
-		var rounds = kdfOptsBuf.readInt();
-		var cinf = utils.opensshCipherInfo(cipher);
-		if (bcrypt === undefined) {
-			bcrypt = __webpack_require__(379);
-		}
-
-		if (typeof (options.passphrase) === 'string') {
-			options.passphrase = Buffer.from(options.passphrase,
-			    'utf-8');
-		}
-		if (!Buffer.isBuffer(options.passphrase)) {
-			throw (new errors.KeyEncryptedError(
-			    options.filename, 'OpenSSH'));
-		}
-
-		var pass = new Uint8Array(options.passphrase);
-		var salti = new Uint8Array(salt);
-		/* Use the pbkdf to derive both the key and the IV. */
-		var out = new Uint8Array(cinf.keySize + cinf.blockSize);
-		var res = bcrypt.pbkdf(pass, pass.length, salti, salti.length,
-		    out, out.length, rounds);
-		if (res !== 0) {
-			throw (new Error('bcrypt_pbkdf function returned ' +
-			    'failure, parameters invalid'));
-		}
-		out = Buffer.from(out);
-		var ckey = out.slice(0, cinf.keySize);
-		var iv = out.slice(cinf.keySize, cinf.keySize + cinf.blockSize);
-		var cipherStream = crypto.createDecipheriv(cinf.opensslName,
-		    ckey, iv);
-		cipherStream.setAutoPadding(false);
-		var chunk, chunks = [];
-		cipherStream.once('error', function (e) {
-			if (e.toString().indexOf('bad decrypt') !== -1) {
-				throw (new Error('Incorrect passphrase ' +
-				    'supplied, could not decrypt key'));
-			}
-			throw (e);
-		});
-		cipherStream.write(privKeyBlob);
-		cipherStream.end();
-		while ((chunk = cipherStream.read()) !== null)
-			chunks.push(chunk);
-		privKeyBlob = Buffer.concat(chunks);
-		break;
-	default:
-		throw (new Error(
-		    'OpenSSH-format key uses unknown KDF "' + kdf + '"'));
-	}
-
-	buf = new SSHBuffer({buffer: privKeyBlob});
-
-	var checkInt1 = buf.readInt();
-	var checkInt2 = buf.readInt();
-	if (checkInt1 !== checkInt2) {
-		throw (new Error('Incorrect passphrase supplied, could not ' +
-		    'decrypt key'));
-	}
-
-	var ret = {};
-	var key = rfc4253.readInternal(ret, 'private', buf.remainder());
-
-	buf.skip(ret.consumed);
-
-	var comment = buf.readString();
-	key.comment = comment;
-
-	return (key);
-}
-
-function write(key, options) {
-	var pubKey;
-	if (PrivateKey.isPrivateKey(key))
-		pubKey = key.toPublic();
-	else
-		pubKey = key;
-
-	var cipher = 'none';
-	var kdf = 'none';
-	var kdfopts = Buffer.alloc(0);
-	var cinf = { blockSize: 8 };
-	var passphrase;
-	if (options !== undefined) {
-		passphrase = options.passphrase;
-		if (typeof (passphrase) === 'string')
-			passphrase = Buffer.from(passphrase, 'utf-8');
-		if (passphrase !== undefined) {
-			assert.buffer(passphrase, 'options.passphrase');
-			assert.optionalString(options.cipher, 'options.cipher');
-			cipher = options.cipher;
-			if (cipher === undefined)
-				cipher = 'aes128-ctr';
-			cinf = utils.opensshCipherInfo(cipher);
-			kdf = 'bcrypt';
-		}
-	}
-
-	var privBuf;
-	if (PrivateKey.isPrivateKey(key)) {
-		privBuf = new SSHBuffer({});
-		var checkInt = crypto.randomBytes(4).readUInt32BE(0);
-		privBuf.writeInt(checkInt);
-		privBuf.writeInt(checkInt);
-		privBuf.write(key.toBuffer('rfc4253'));
-		privBuf.writeString(key.comment || '');
-
-		var n = 1;
-		while (privBuf._offset % cinf.blockSize !== 0)
-			privBuf.writeChar(n++);
-		privBuf = privBuf.toBuffer();
-	}
-
-	switch (kdf) {
-	case 'none':
-		break;
-	case 'bcrypt':
-		var salt = crypto.randomBytes(16);
-		var rounds = 16;
-		var kdfssh = new SSHBuffer({});
-		kdfssh.writeBuffer(salt);
-		kdfssh.writeInt(rounds);
-		kdfopts = kdfssh.toBuffer();
-
-		if (bcrypt === undefined) {
-			bcrypt = __webpack_require__(379);
-		}
-		var pass = new Uint8Array(passphrase);
-		var salti = new Uint8Array(salt);
-		/* Use the pbkdf to derive both the key and the IV. */
-		var out = new Uint8Array(cinf.keySize + cinf.blockSize);
-		var res = bcrypt.pbkdf(pass, pass.length, salti, salti.length,
-		    out, out.length, rounds);
-		if (res !== 0) {
-			throw (new Error('bcrypt_pbkdf function returned ' +
-			    'failure, parameters invalid'));
-		}
-		out = Buffer.from(out);
-		var ckey = out.slice(0, cinf.keySize);
-		var iv = out.slice(cinf.keySize, cinf.keySize + cinf.blockSize);
-
-		var cipherStream = crypto.createCipheriv(cinf.opensslName,
-		    ckey, iv);
-		cipherStream.setAutoPadding(false);
-		var chunk, chunks = [];
-		cipherStream.once('error', function (e) {
-			throw (e);
-		});
-		cipherStream.write(privBuf);
-		cipherStream.end();
-		while ((chunk = cipherStream.read()) !== null)
-			chunks.push(chunk);
-		privBuf = Buffer.concat(chunks);
-		break;
-	default:
-		throw (new Error('Unsupported kdf ' + kdf));
-	}
-
-	var buf = new SSHBuffer({});
-
-	buf.writeCString(MAGIC);
-	buf.writeString(cipher);	/* cipher */
-	buf.writeString(kdf);		/* kdf */
-	buf.writeBuffer(kdfopts);	/* kdfoptions */
-
-	buf.writeInt(1);		/* nkeys */
-	buf.writeBuffer(pubKey.toBuffer('rfc4253'));
-
-	if (privBuf)
-		buf.writeBuffer(privBuf);
-
-	buf = buf.toBuffer();
-
-	var header;
-	if (PrivateKey.isPrivateKey(key))
-		header = 'OPENSSH PRIVATE KEY';
-	else
-		header = 'OPENSSH PUBLIC KEY';
-
-	var tmp = buf.toString('base64');
-	var len = tmp.length + (tmp.length / 70) +
-	    18 + 16 + header.length*2 + 10;
-	buf = Buffer.alloc(len);
-	var o = 0;
-	o += buf.write('-----BEGIN ' + header + '-----\n', o);
-	for (var i = 0; i < tmp.length; ) {
-		var limit = i + 70;
-		if (limit > tmp.length)
-			limit = tmp.length;
-		o += buf.write(tmp.slice(i, limit), o);
-		buf[o++] = 10;
-		i = limit;
-	}
-	o += buf.write('-----END ' + header + '-----\n', o);
-
-	return (buf.slice(0, o));
-}
-
-
-/***/ }),
-/* 193 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var chownr = __webpack_require__(600)
-var tar = __webpack_require__(460)
-var pump = __webpack_require__(781)
-var mkdirp = __webpack_require__(145)
-var fs = __webpack_require__(5)
-var path = __webpack_require__(0)
-var os = __webpack_require__(46)
-
-var win32 = os.platform() === 'win32'
-
-var noop = function () {}
-
-var echo = function (name) {
-  return name
-}
-
-var normalize = !win32 ? echo : function (name) {
-  return name.replace(/\\/g, '/').replace(/[:?<>|]/g, '_')
-}
-
-var statAll = function (fs, stat, cwd, ignore, entries, sort) {
-  var queue = entries || ['.']
-
-  return function loop (callback) {
-    if (!queue.length) return callback()
-    var next = queue.shift()
-    var nextAbs = path.join(cwd, next)
-
-    stat(nextAbs, function (err, stat) {
-      if (err) return callback(err)
-
-      if (!stat.isDirectory()) return callback(null, next, stat)
-
-      fs.readdir(nextAbs, function (err, files) {
-        if (err) return callback(err)
-
-        if (sort) files.sort()
-        for (var i = 0; i < files.length; i++) {
-          if (!ignore(path.join(cwd, next, files[i]))) queue.push(path.join(next, files[i]))
-        }
-
-        callback(null, next, stat)
-      })
-    })
-  }
-}
-
-var strip = function (map, level) {
-  return function (header) {
-    header.name = header.name.split('/').slice(level).join('/')
-
-    var linkname = header.linkname
-    if (linkname && (header.type === 'link' || path.isAbsolute(linkname))) {
-      header.linkname = linkname.split('/').slice(level).join('/')
-    }
-
-    return map(header)
-  }
-}
-
-exports.pack = function (cwd, opts) {
-  if (!cwd) cwd = '.'
-  if (!opts) opts = {}
-
-  var xfs = opts.fs || fs
-  var ignore = opts.ignore || opts.filter || noop
-  var map = opts.map || noop
-  var mapStream = opts.mapStream || echo
-  var statNext = statAll(xfs, opts.dereference ? xfs.stat : xfs.lstat, cwd, ignore, opts.entries, opts.sort)
-  var strict = opts.strict !== false
-  var umask = typeof opts.umask === 'number' ? ~opts.umask : ~processUmask()
-  var dmode = typeof opts.dmode === 'number' ? opts.dmode : 0
-  var fmode = typeof opts.fmode === 'number' ? opts.fmode : 0
-  var pack = opts.pack || tar.pack()
-  var finish = opts.finish || noop
-
-  if (opts.strip) map = strip(map, opts.strip)
-
-  if (opts.readable) {
-    dmode |= parseInt(555, 8)
-    fmode |= parseInt(444, 8)
-  }
-  if (opts.writable) {
-    dmode |= parseInt(333, 8)
-    fmode |= parseInt(222, 8)
-  }
-
-  var onsymlink = function (filename, header) {
-    xfs.readlink(path.join(cwd, filename), function (err, linkname) {
-      if (err) return pack.destroy(err)
-      header.linkname = normalize(linkname)
-      pack.entry(header, onnextentry)
-    })
-  }
-
-  var onstat = function (err, filename, stat) {
-    if (err) return pack.destroy(err)
-    if (!filename) {
-      if (opts.finalize !== false) pack.finalize()
-      return finish(pack)
-    }
-
-    if (stat.isSocket()) return onnextentry() // tar does not support sockets...
-
-    var header = {
-      name: normalize(filename),
-      mode: (stat.mode | (stat.isDirectory() ? dmode : fmode)) & umask,
-      mtime: stat.mtime,
-      size: stat.size,
-      type: 'file',
-      uid: stat.uid,
-      gid: stat.gid
-    }
-
-    if (stat.isDirectory()) {
-      header.size = 0
-      header.type = 'directory'
-      header = map(header) || header
-      return pack.entry(header, onnextentry)
-    }
-
-    if (stat.isSymbolicLink()) {
-      header.size = 0
-      header.type = 'symlink'
-      header = map(header) || header
-      return onsymlink(filename, header)
-    }
-
-    // TODO: add fifo etc...
-
-    header = map(header) || header
-
-    if (!stat.isFile()) {
-      if (strict) return pack.destroy(new Error('unsupported type for ' + filename))
-      return onnextentry()
-    }
-
-    var entry = pack.entry(header, onnextentry)
-    if (!entry) return
-
-    var rs = mapStream(xfs.createReadStream(path.join(cwd, filename)), header)
-
-    rs.on('error', function (err) { // always forward errors on destroy
-      entry.destroy(err)
-    })
-
-    pump(rs, entry)
-  }
-
-  var onnextentry = function (err) {
-    if (err) return pack.destroy(err)
-    statNext(onstat)
-  }
-
-  onnextentry()
-
-  return pack
-}
-
-var head = function (list) {
-  return list.length ? list[list.length - 1] : null
-}
-
-var processGetuid = function () {
-  return process.getuid ? process.getuid() : -1
-}
-
-var processUmask = function () {
-  return process.umask ? process.umask() : 0
-}
-
-exports.extract = function (cwd, opts) {
-  if (!cwd) cwd = '.'
-  if (!opts) opts = {}
-
-  var xfs = opts.fs || fs
-  var ignore = opts.ignore || opts.filter || noop
-  var map = opts.map || noop
-  var mapStream = opts.mapStream || echo
-  var own = opts.chown !== false && !win32 && processGetuid() === 0
-  var extract = opts.extract || tar.extract()
-  var stack = []
-  var now = new Date()
-  var umask = typeof opts.umask === 'number' ? ~opts.umask : ~processUmask()
-  var dmode = typeof opts.dmode === 'number' ? opts.dmode : 0
-  var fmode = typeof opts.fmode === 'number' ? opts.fmode : 0
-  var strict = opts.strict !== false
-
-  if (opts.strip) map = strip(map, opts.strip)
-
-  if (opts.readable) {
-    dmode |= parseInt(555, 8)
-    fmode |= parseInt(444, 8)
-  }
-  if (opts.writable) {
-    dmode |= parseInt(333, 8)
-    fmode |= parseInt(222, 8)
-  }
-
-  var utimesParent = function (name, cb) { // we just set the mtime on the parent dir again everytime we write an entry
-    var top
-    while ((top = head(stack)) && name.slice(0, top[0].length) !== top[0]) stack.pop()
-    if (!top) return cb()
-    xfs.utimes(top[0], now, top[1], cb)
-  }
-
-  var utimes = function (name, header, cb) {
-    if (opts.utimes === false) return cb()
-
-    if (header.type === 'directory') return xfs.utimes(name, now, header.mtime, cb)
-    if (header.type === 'symlink') return utimesParent(name, cb) // TODO: how to set mtime on link?
-
-    xfs.utimes(name, now, header.mtime, function (err) {
-      if (err) return cb(err)
-      utimesParent(name, cb)
-    })
-  }
-
-  var chperm = function (name, header, cb) {
-    var link = header.type === 'symlink'
-    var chmod = link ? xfs.lchmod : xfs.chmod
-    var chown = link ? xfs.lchown : xfs.chown
-
-    if (!chmod) return cb()
-
-    var mode = (header.mode | (header.type === 'directory' ? dmode : fmode)) & umask
-    chmod(name, mode, function (err) {
-      if (err) return cb(err)
-      if (!own) return cb()
-      if (!chown) return cb()
-      chown(name, header.uid, header.gid, cb)
-    })
-  }
-
-  extract.on('entry', function (header, stream, next) {
-    header = map(header) || header
-    header.name = normalize(header.name)
-    var name = path.join(cwd, path.join('/', header.name))
-
-    if (ignore(name, header)) {
-      stream.resume()
-      return next()
-    }
-
-    var stat = function (err) {
-      if (err) return next(err)
-      utimes(name, header, function (err) {
-        if (err) return next(err)
-        if (win32) return next()
-        chperm(name, header, next)
-      })
-    }
-
-    var onsymlink = function () {
-      if (win32) return next() // skip symlinks on win for now before it can be tested
-      xfs.unlink(name, function () {
-        xfs.symlink(header.linkname, name, stat)
-      })
-    }
-
-    var onlink = function () {
-      if (win32) return next() // skip links on win for now before it can be tested
-      xfs.unlink(name, function () {
-        var srcpath = path.join(cwd, path.join('/', header.linkname))
-
-        xfs.link(srcpath, name, function (err) {
-          if (err && err.code === 'EPERM' && opts.hardlinkAsFilesFallback) {
-            stream = xfs.createReadStream(srcpath)
-            return onfile()
-          }
-
-          stat(err)
-        })
-      })
-    }
-
-    var onfile = function () {
-      var ws = xfs.createWriteStream(name)
-      var rs = mapStream(stream, header)
-
-      ws.on('error', function (err) { // always forward errors on destroy
-        rs.destroy(err)
-      })
-
-      pump(rs, ws, function (err) {
-        if (err) return next(err)
-        ws.on('close', stat)
-      })
-    }
-
-    if (header.type === 'directory') {
-      stack.push([name, header.mtime])
-      return mkdirfix(name, {
-        fs: xfs, own: own, uid: header.uid, gid: header.gid
-      }, stat)
-    }
-
-    var dir = path.dirname(name)
-
-    validate(xfs, dir, path.join(cwd, '.'), function (err, valid) {
-      if (err) return next(err)
-      if (!valid) return next(new Error(dir + ' is not a valid path'))
-
-      mkdirfix(dir, {
-        fs: xfs, own: own, uid: header.uid, gid: header.gid
-      }, function (err) {
-        if (err) return next(err)
-
-        switch (header.type) {
-          case 'file': return onfile()
-          case 'link': return onlink()
-          case 'symlink': return onsymlink()
-        }
-
-        if (strict) return next(new Error('unsupported type for ' + name + ' (' + header.type + ')'))
-
-        stream.resume()
-        next()
-      })
-    })
-  })
-
-  if (opts.finish) extract.on('finish', opts.finish)
-
-  return extract
-}
-
-function validate (fs, name, root, cb) {
-  if (name === root) return cb(null, true)
-  fs.lstat(name, function (err, st) {
-    if (err && err.code !== 'ENOENT') return cb(err)
-    if (err || st.isDirectory()) return validate(fs, path.join(name, '..'), root, cb)
-    cb(null, false)
-  })
-}
-
-function mkdirfix (name, opts, cb) {
-  mkdirp(name, {fs: opts.fs}, function (err, made) {
-    if (!err && made && opts.own) {
-      chownr(made, opts.uid, opts.gid, cb)
-    } else {
-      cb(err)
-    }
-  })
-}
-
-
-/***/ }),
-/* 194 */
-/***/ (function(module, exports) {
-
-module.exports = {"name":"yarn","installationMethod":"unknown","version":"1.22.10","license":"BSD-2-Clause","preferGlobal":true,"description":"📦🐈 Fast, reliable, and secure dependency management.","dependencies":{"@zkochan/cmd-shim":"^3.1.0","babel-runtime":"^6.26.0","bytes":"^3.0.0","camelcase":"^4.0.0","chalk":"^2.1.0","cli-table3":"^0.4.0","commander":"^2.9.0","death":"^1.0.0","debug":"^3.0.0","deep-equal":"^1.0.1","detect-indent":"^5.0.0","dnscache":"^1.0.1","glob":"^7.1.1","gunzip-maybe":"^1.4.0","hash-for-dep":"^1.2.3","imports-loader":"^0.8.0","ini":"^1.3.4","inquirer":"^6.2.0","invariant":"^2.2.0","is-builtin-module":"^2.0.0","is-ci":"^1.0.10","is-webpack-bundle":"^1.0.0","js-yaml":"^3.13.1","leven":"^2.0.0","loud-rejection":"^1.2.0","micromatch":"^2.3.11","mkdirp":"^0.5.1","node-emoji":"^1.6.1","normalize-url":"^2.0.0","npm-logical-tree":"^1.2.1","object-path":"^0.11.2","proper-lockfile":"^2.0.0","puka":"^1.0.0","read":"^1.0.7","request":"^2.87.0","request-capture-har":"^1.2.2","rimraf":"^2.5.0","semver":"^5.1.0","ssri":"^5.3.0","strip-ansi":"^4.0.0","strip-bom":"^3.0.0","tar-fs":"^1.16.0","tar-stream":"^1.6.1","uuid":"^3.0.1","v8-compile-cache":"^2.0.0","validate-npm-package-license":"^3.0.4","yn":"^2.0.0"},"devDependencies":{"babel-core":"^6.26.0","babel-eslint":"^7.2.3","babel-loader":"^6.2.5","babel-plugin-array-includes":"^2.0.3","babel-plugin-inline-import":"^3.0.0","babel-plugin-transform-builtin-extend":"^1.1.2","babel-plugin-transform-inline-imports-commonjs":"^1.0.0","babel-plugin-transform-runtime":"^6.4.3","babel-preset-env":"^1.6.0","babel-preset-flow":"^6.23.0","babel-preset-stage-0":"^6.0.0","babylon":"^6.5.0","commitizen":"^2.9.6","cz-conventional-changelog":"^2.0.0","eslint":"^4.3.0","eslint-config-fb-strict":"^22.0.0","eslint-plugin-babel":"^5.0.0","eslint-plugin-flowtype":"^2.35.0","eslint-plugin-jasmine":"^2.6.2","eslint-plugin-jest":"^21.0.0","eslint-plugin-jsx-a11y":"^6.0.2","eslint-plugin-prefer-object-spread":"^1.2.1","eslint-plugin-prettier":"^2.1.2","eslint-plugin-react":"^7.1.0","eslint-plugin-relay":"^0.0.28","eslint-plugin-yarn-internal":"file:scripts/eslint-rules","execa":"^0.11.0","fancy-log":"^1.3.2","flow-bin":"^0.66.0","git-release-notes":"^3.0.0","gulp":"^4.0.0","gulp-babel":"^7.0.0","gulp-if":"^2.0.1","gulp-newer":"^1.0.0","gulp-plumber":"^1.0.1","gulp-sourcemaps":"^2.2.0","jest":"^22.4.4","jsinspect":"^0.12.6","minimatch":"^3.0.4","mock-stdin":"^0.3.0","prettier":"^1.5.2","string-replace-loader":"^2.1.1","temp":"^0.8.3","webpack":"^2.1.0-beta.25","yargs":"^6.3.0"},"resolutions":{"sshpk":"^1.14.2"},"engines":{"node":">=4.0.0"},"repository":"yarnpkg/yarn","bin":{"yarn":"./bin/yarn.js","yarnpkg":"./bin/yarn.js"},"scripts":{"build":"gulp build","build-bundle":"node ./scripts/build-webpack.js","build-chocolatey":"powershell ./scripts/build-chocolatey.ps1","build-deb":"./scripts/build-deb.sh","build-dist":"bash ./scripts/build-dist.sh","build-win-installer":"scripts\\build-windows-installer.bat","changelog":"git-release-notes $(git describe --tags --abbrev=0 $(git describe --tags --abbrev=0)^)..$(git describe --tags --abbrev=0) scripts/changelog.md","dupe-check":"yarn jsinspect ./src","lint":"eslint . && flow check","pkg-tests":"yarn --cwd packages/pkg-tests jest yarn.test.js","prettier":"eslint src __tests__ --fix","release-branch":"./scripts/release-branch.sh","test":"yarn lint && yarn test-only","test-only":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --verbose","test-only-debug":"node --inspect-brk --max_old_space_size=4096 node_modules/jest/bin/jest.js --runInBand --verbose","test-coverage":"node --max_old_space_size=4096 node_modules/jest/bin/jest.js --coverage --verbose","watch":"gulp watch","commit":"git-cz"},"jest":{"collectCoverageFrom":["src/**/*.js"],"testEnvironment":"node","modulePathIgnorePatterns":["__tests__/fixtures/","packages/pkg-tests/pkg-tests-fixtures","dist/"],"testPathIgnorePatterns":["__tests__/(fixtures|__mocks__)/","updates/","_(temp|mock|install|init|helpers).js$","packages/pkg-tests"]},"config":{"commitizen":{"path":"./node_modules/cz-conventional-changelog"}}}
-
-/***/ }),
-/* 195 */
-/***/ (function(module, exports) {
-
-module.exports = require("https");
-
-/***/ }),
-/* 196 */
-/***/ (function(module, exports) {
-
-module.exports = require("querystring");
-
-/***/ }),
-/* 197 */
-/***/ (function(module, exports) {
-
-module.exports = require("readline");
-
-/***/ }),
-/* 198 */
-/***/ (function(module, exports) {
-
-module.exports = require("zlib");
-
-/***/ }),
-/* 199 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = stringify;
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _package;
-
-function _load_package() {
-  return _package = __webpack_require__(194);
-}
-
-const NODE_VERSION = process.version;
-
-function shouldWrapKey(str) {
-  return str.indexOf('true') === 0 || str.indexOf('false') === 0 || /[:\s\n\\",\[\]]/g.test(str) || /^[0-9]/g.test(str) || !/^[a-zA-Z]/g.test(str);
-}
-
-function maybeWrap(str) {
-  if (typeof str === 'boolean' || typeof str === 'number' || shouldWrapKey(str)) {
-    return JSON.stringify(str);
-  } else {
-    return str;
-  }
-}
-
-const priorities = {
-  name: 1,
-  version: 2,
-  uid: 3,
-  resolved: 4,
-  integrity: 5,
-  registry: 6,
-  dependencies: 7
-};
-
-function priorityThenAlphaSort(a, b) {
-  if (priorities[a] || priorities[b]) {
-    return (priorities[a] || 100) > (priorities[b] || 100) ? 1 : -1;
-  } else {
-    return (0, (_misc || _load_misc()).sortAlpha)(a, b);
-  }
-}
-
-function _stringify(obj, options) {
-  if (typeof obj !== 'object') {
-    throw new TypeError();
-  }
-
-  const indent = options.indent;
-  const lines = [];
-
-  // Sorting order needs to be consistent between runs, we run native sort by name because there are no
-  // problems with it being unstable because there are no to keys the same
-  // However priorities can be duplicated and native sort can shuffle things from run to run
-  const keys = Object.keys(obj).sort(priorityThenAlphaSort);
-
-  let addedKeys = [];
-
-  for (let i = 0; i < keys.length; i++) {
-    const key = keys[i];
-    const val = obj[key];
-    if (val == null || addedKeys.indexOf(key) >= 0) {
-      continue;
-    }
-
-    const valKeys = [key];
-
-    // get all keys that have the same value equality, we only want this for objects
-    if (typeof val === 'object') {
-      for (let j = i + 1; j < keys.length; j++) {
-        const key = keys[j];
-        if (val === obj[key]) {
-          valKeys.push(key);
-        }
-      }
-    }
-
-    const keyLine = valKeys.sort((_misc || _load_misc()).sortAlpha).map(maybeWrap).join(', ');
-
-    if (typeof val === 'string' || typeof val === 'boolean' || typeof val === 'number') {
-      lines.push(`${keyLine} ${maybeWrap(val)}`);
-    } else if (typeof val === 'object') {
-      lines.push(`${keyLine}:\n${_stringify(val, { indent: indent + '  ' })}` + (options.topLevel ? '\n' : ''));
-    } else {
-      throw new TypeError();
-    }
-
-    addedKeys = addedKeys.concat(valKeys);
-  }
-
-  return indent + lines.join(`\n${indent}`);
-}
-
-function stringify(obj, noHeader, enableVersions) {
-  const val = _stringify(obj, {
-    indent: '',
-    topLevel: true
-  });
-  if (noHeader) {
-    return val;
-  }
-
-  const lines = [];
-  lines.push('# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.');
-  lines.push(`# yarn lockfile v${(_constants || _load_constants()).LOCKFILE_VERSION}`);
-  if (enableVersions) {
-    lines.push(`# yarn v${(_package || _load_package()).version}`);
-    lines.push(`# node ${NODE_VERSION}`);
-  }
-  lines.push('\n');
-  lines.push(val);
-
-  return lines.join('\n');
-}
-
-/***/ }),
-/* 200 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _consoleReporter;
-
-function _load_consoleReporter() {
-  return _consoleReporter = __webpack_require__(561);
-}
-
-Object.defineProperty(exports, 'ConsoleReporter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_consoleReporter || _load_consoleReporter()).default;
-  }
-});
-
-var _bufferReporter;
-
-function _load_bufferReporter() {
-  return _bufferReporter = __webpack_require__(560);
-}
-
-Object.defineProperty(exports, 'BufferReporter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_bufferReporter || _load_bufferReporter()).default;
-  }
-});
-
-var _eventReporter;
-
-function _load_eventReporter() {
-  return _eventReporter = __webpack_require__(565);
-}
-
-Object.defineProperty(exports, 'EventReporter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_eventReporter || _load_eventReporter()).default;
-  }
-});
-
-var _jsonReporter;
-
-function _load_jsonReporter() {
-  return _jsonReporter = __webpack_require__(213);
-}
-
-Object.defineProperty(exports, 'JSONReporter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_jsonReporter || _load_jsonReporter()).default;
-  }
-});
-
-var _noopReporter;
-
-function _load_noopReporter() {
-  return _noopReporter = __webpack_require__(569);
-}
-
-Object.defineProperty(exports, 'NoopReporter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_noopReporter || _load_noopReporter()).default;
-  }
-});
-
-var _baseReporter;
-
-function _load_baseReporter() {
-  return _baseReporter = __webpack_require__(108);
-}
-
-Object.defineProperty(exports, 'Reporter', {
-  enumerable: true,
-  get: function get() {
-    return _interopRequireDefault(_baseReporter || _load_baseReporter()).default;
-  }
-});
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/***/ }),
-/* 201 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-// On windows, create a .cmd file.
-// Read the #! in the file to see what it uses.  The vast majority
-// of the time, this will be either:
-// "#!/usr/bin/env <prog> <args...>"
-// or:
-// "#!<prog> <args...>"
-//
-// Write a binroot/pkg.bin + ".cmd" file that has this line in it:
-// @<prog> <args...> %~dp0<target> %*
-
-module.exports = cmdShim
-cmdShim.ifExists = cmdShimIfExists
-
-const fs = __webpack_require__(762)
-
-const mkdir = __webpack_require__(761)
-const path = __webpack_require__(0)
-const isWindows = __webpack_require__(743)
-const shebangExpr = /^#!\s*(?:\/usr\/bin\/env)?\s*([^ \t]+)(.*)$/
-const DEFAULT_OPTIONS = {
-  // Create PowerShell file by default if the option hasn't been specified
-  createPwshFile: true,
-  createCmdFile: isWindows()
-}
-
-function cmdShimIfExists (src, to, opts) {
-  opts = Object.assign({}, DEFAULT_OPTIONS, opts)
-  return fs.stat(src)
-    .then(() => cmdShim(src, to, opts))
-    .catch(() => {})
-}
-
-// Try to unlink, but ignore errors.
-// Any problems will surface later.
-function rm (path) {
-  return fs.unlink(path).catch(() => {})
-}
-
-function cmdShim (src, to, opts) {
-  opts = Object.assign({}, DEFAULT_OPTIONS, opts)
-  return fs.stat(src)
-    .then(() => cmdShim_(src, to, opts))
-}
-
-function cmdShim_ (src, to, opts) {
-  return Promise.all([
-    rm(to),
-    rm(`${to}.ps1`),
-    opts.createCmdFile && rm(`${to}.cmd`)
-  ])
-    .then(() => writeShim(src, to, opts))
-}
-
-function writeShim (src, to, opts) {
-  opts = Object.assign({}, DEFAULT_OPTIONS, opts)
-  const defaultArgs = opts.preserveSymlinks ? '--preserve-symlinks' : ''
-  // make a cmd file and a sh script
-  // First, check if the bin is a #! of some sort.
-  // If not, then assume it's something that'll be compiled, or some other
-  // sort of script, and just call it directly.
-  return mkdir(path.dirname(to))
-    .then(() => {
-      return fs.readFile(src, 'utf8')
-        .then(data => {
-          const firstLine = data.trim().split(/\r*\n/)[0]
-          const shebang = firstLine.match(shebangExpr)
-          if (!shebang) return writeShim_(src, to, Object.assign({}, opts, {args: defaultArgs}))
-          const prog = shebang[1]
-          const args = (shebang[2] && ((defaultArgs && (shebang[2] + ' ' + defaultArgs)) || shebang[2])) || defaultArgs
-          return writeShim_(src, to, Object.assign({}, opts, {prog, args}))
-        })
-        .catch(() => writeShim_(src, to, Object.assign({}, opts, {args: defaultArgs})))
-    })
-}
-
-function writeShim_ (src, to, opts) {
-  opts = Object.assign({}, DEFAULT_OPTIONS, opts)
-  let shTarget = path.relative(path.dirname(to), src)
-  let target = shTarget.split('/').join('\\')
-  let longProg
-  let prog = opts.prog
-  let shProg = prog && prog.split('\\').join('/')
-  let shLongProg
-  let pwshProg = shProg && `"${shProg}$exe"`
-  let pwshLongProg
-  shTarget = shTarget.split('\\').join('/')
-  let args = opts.args || ''
-  let {
-    win32: nodePath,
-    posix: shNodePath
-  } = normalizePathEnvVar(opts.nodePath)
-  if (!prog) {
-    prog = `"%~dp0\\${target}"`
-    shProg = `"$basedir/${shTarget}"`
-    pwshProg = shProg
-    args = ''
-    target = ''
-    shTarget = ''
-  } else {
-    longProg = `"%~dp0\\${prog}.exe"`
-    shLongProg = '"$basedir/' + prog + '"'
-    pwshLongProg = `"$basedir/${prog}$exe"`
-    target = `"%~dp0\\${target}"`
-    shTarget = `"$basedir/${shTarget}"`
-  }
-
-  let cmd
-  if (opts.createCmdFile) {
-    // @IF EXIST "%~dp0\node.exe" (
-    //   "%~dp0\node.exe" "%~dp0\.\node_modules\npm\bin\npm-cli.js" %*
-    // ) ELSE (
-    //   SETLOCAL
-    //   SET PATHEXT=%PATHEXT:;.JS;=;%
-    //   node "%~dp0\.\node_modules\npm\bin\npm-cli.js" %*
-    // )
-    cmd = nodePath ? `@SET NODE_PATH=${nodePath}\r\n` : ''
-    if (longProg) {
-      cmd += '@IF EXIST ' + longProg + ' (\r\n' +
-        '  ' + longProg + ' ' + args + ' ' + target + ' %*\r\n' +
-        ') ELSE (\r\n' +
-        '  @SETLOCAL\r\n' +
-        '  @SET PATHEXT=%PATHEXT:;.JS;=;%\r\n' +
-        '  ' + prog + ' ' + args + ' ' + target + ' %*\r\n' +
-        ')'
-    } else {
-      cmd += `@${prog} ${args} ${target} %*\r\n`
-    }
-  }
-
-  // #!/bin/sh
-  // basedir=`dirname "$0"`
-  //
-  // case `uname` in
-  //     *CYGWIN*) basedir=`cygpath -w "$basedir"`;;
-  // esac
-  //
-  // if [ -x "$basedir/node.exe" ]; then
-  //   "$basedir/node.exe" "$basedir/node_modules/npm/bin/npm-cli.js" "$@"
-  //   ret=$?
-  // else
-  //   node "$basedir/node_modules/npm/bin/npm-cli.js" "$@"
-  //   ret=$?
-  // fi
-  // exit $ret
-
-  let sh = '#!/bin/sh\n'
-  sh = sh +
-    "basedir=$(dirname \"$(echo \"$0\" | sed -e 's,\\\\,/,g')\")\n" +
-    '\n' +
-    'case `uname` in\n' +
-    '    *CYGWIN*) basedir=`cygpath -w "$basedir"`;;\n' +
-    'esac\n' +
-    '\n'
-  const env = opts.nodePath ? `NODE_PATH="${shNodePath}" ` : ''
-
-  if (shLongProg) {
-    sh = sh +
-      'if [ -x ' + shLongProg + ' ]; then\n' +
-      '  ' + env + shLongProg + ' ' + args + ' ' + shTarget + ' "$@"\n' +
-      '  ret=$?\n' +
-      'else \n' +
-      '  ' + env + shProg + ' ' + args + ' ' + shTarget + ' "$@"\n' +
-      '  ret=$?\n' +
-      'fi\n' +
-      'exit $ret\n'
-  } else {
-    sh = sh + env + shProg + ' ' + args + ' ' + shTarget + ' "$@"\n' +
-      'exit $?\n'
-  }
-
-  // #!/usr/bin/env pwsh
-  // $basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent
-  //
-  // $ret=0
-  // $exe = ""
-  // if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {
-  //   # Fix case when both the Windows and Linux builds of Node
-  //   # are installed in the same directory
-  //   $exe = ".exe"
-  // }
-  // if (Test-Path "$basedir/node") {
-  //   & "$basedir/node$exe" "$basedir/node_modules/npm/bin/npm-cli.js" $args
-  //   $ret=$LASTEXITCODE
-  // } else {
-  //   & "node$exe" "$basedir/node_modules/npm/bin/npm-cli.js" $args
-  //   $ret=$LASTEXITCODE
-  // }
-  // exit $ret
-  let pwsh = '#!/usr/bin/env pwsh\n' +
-    '$basedir=Split-Path $MyInvocation.MyCommand.Definition -Parent\n' +
-    '\n' +
-    '$exe=""\n' +
-    (opts.nodePath ? '$env_node_path=$env:NODE_PATH\n' +
-      `$env:NODE_PATH="${nodePath}"\n` : '') +
-    'if ($PSVersionTable.PSVersion -lt "6.0" -or $IsWindows) {\n' +
-    '  # Fix case when both the Windows and Linux builds of Node\n' +
-    '  # are installed in the same directory\n' +
-    '  $exe=".exe"\n' +
-    '}'
-  if (opts.nodePath) {
-    pwsh = pwsh +
-      ' else {\n' +
-      `  $env:NODE_PATH="${shNodePath}"\n` +
-      '}'
-  }
-  pwsh += '\n'
-  if (shLongProg) {
-    pwsh = pwsh +
-      '$ret=0\n' +
-      `if (Test-Path ${pwshLongProg}) {\n` +
-      `  & ${pwshLongProg} ${args} ${shTarget} $args\n` +
-      '  $ret=$LASTEXITCODE\n' +
-      '} else {\n' +
-      `  & ${pwshProg} ${args} ${shTarget} $args\n` +
-      '  $ret=$LASTEXITCODE\n' +
-      '}\n' +
-      (opts.nodePath ? '$env:NODE_PATH=$env_node_path\n' : '') +
-      'exit $ret\n'
-  } else {
-    pwsh = pwsh +
-      `& ${pwshProg} ${args} ${shTarget} $args\n` +
-      (opts.nodePath ? '$env:NODE_PATH=$env_node_path\n' : '') +
-      'exit $LASTEXITCODE\n'
-  }
-
-  return Promise.all([
-    opts.createCmdFile && fs.writeFile(to + '.cmd', cmd, 'utf8'),
-    opts.createPwshFile && fs.writeFile(`${to}.ps1`, pwsh, 'utf8'),
-    fs.writeFile(to, sh, 'utf8')
-  ])
-    .then(() => chmodShim(to, opts))
-}
-
-function chmodShim (to, {createCmdFile, createPwshFile}) {
-  return Promise.all([
-    fs.chmod(to, 0o755),
-    createPwshFile && fs.chmod(`${to}.ps1`, 0o755),
-    createCmdFile && fs.chmod(`${to}.cmd`, 0o755)
-  ])
-}
-
-/**
- * @param {string|string[]} nodePath
- * @returns {{win32:string,posix:string}}
- */
-function normalizePathEnvVar (nodePath) {
-  if (!nodePath) {
-    return {
-      win32: nodePath,
-      posix: nodePath
-    }
-  }
-  let split = (typeof nodePath === 'string' ? nodePath.split(path.delimiter) : Array.from(nodePath))
-  let result = {}
-  for (let i = 0; i < split.length; i++) {
-    const win32 = split[i].split('/').join('\\')
-    const posix = isWindows() ? split[i].split('\\').join('/').replace(/^([^:\\/]*):/, (_, $1) => `/mnt/${$1.toLowerCase()}`) : split[i]
-
-    result.win32 = result.win32 ? `${result.win32};${win32}` : win32
-    result.posix = result.posix ? `${result.posix}:${posix}` : posix
-
-    result[i] = {win32, posix}
-  }
-  return result
-}
-
-
-/***/ }),
-/* 202 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var resolve = __webpack_require__(203);
-
-module.exports = {
-  Validation: errorSubclass(ValidationError),
-  MissingRef: errorSubclass(MissingRefError)
-};
-
-
-function ValidationError(errors) {
-  this.message = 'validation failed';
-  this.errors = errors;
-  this.ajv = this.validation = true;
-}
-
-
-MissingRefError.message = function (baseId, ref) {
-  return 'can\'t resolve reference ' + ref + ' from id ' + baseId;
-};
-
-
-function MissingRefError(baseId, ref, message) {
-  this.message = message || MissingRefError.message(baseId, ref);
-  this.missingRef = resolve.url(baseId, ref);
-  this.missingSchema = resolve.normalizeId(resolve.fullPath(this.missingRef));
-}
-
-
-function errorSubclass(Subclass) {
-  Subclass.prototype = Object.create(Error.prototype);
-  Subclass.prototype.constructor = Subclass;
-  return Subclass;
-}
-
-
-/***/ }),
-/* 203 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var url = __webpack_require__(24)
-  , equal = __webpack_require__(204)
-  , util = __webpack_require__(106)
-  , SchemaObject = __webpack_require__(339)
-  , traverse = __webpack_require__(503);
-
-module.exports = resolve;
-
-resolve.normalizeId = normalizeId;
-resolve.fullPath = getFullPath;
-resolve.url = resolveUrl;
-resolve.ids = resolveIds;
-resolve.inlineRef = inlineRef;
-resolve.schema = resolveSchema;
-
-/**
- * [resolve and compile the references ($ref)]
- * @this   Ajv
- * @param  {Function} compile reference to schema compilation funciton (localCompile)
- * @param  {Object} root object with information about the root schema for the current schema
- * @param  {String} ref reference to resolve
- * @return {Object|Function} schema object (if the schema can be inlined) or validation function
- */
-function resolve(compile, root, ref) {
-  /* jshint validthis: true */
-  var refVal = this._refs[ref];
-  if (typeof refVal == 'string') {
-    if (this._refs[refVal]) refVal = this._refs[refVal];
-    else return resolve.call(this, compile, root, refVal);
-  }
-
-  refVal = refVal || this._schemas[ref];
-  if (refVal instanceof SchemaObject) {
-    return inlineRef(refVal.schema, this._opts.inlineRefs)
-            ? refVal.schema
-            : refVal.validate || this._compile(refVal);
-  }
-
-  var res = resolveSchema.call(this, root, ref);
-  var schema, v, baseId;
-  if (res) {
-    schema = res.schema;
-    root = res.root;
-    baseId = res.baseId;
-  }
-
-  if (schema instanceof SchemaObject) {
-    v = schema.validate || compile.call(this, schema.schema, root, undefined, baseId);
-  } else if (schema !== undefined) {
-    v = inlineRef(schema, this._opts.inlineRefs)
-        ? schema
-        : compile.call(this, schema, root, undefined, baseId);
-  }
-
-  return v;
-}
-
-
-/**
- * Resolve schema, its root and baseId
- * @this Ajv
- * @param  {Object} root root object with properties schema, refVal, refs
- * @param  {String} ref  reference to resolve
- * @return {Object} object with properties schema, root, baseId
- */
-function resolveSchema(root, ref) {
-  /* jshint validthis: true */
-  var p = url.parse(ref, false, true)
-    , refPath = _getFullPath(p)
-    , baseId = getFullPath(this._getId(root.schema));
-  if (refPath !== baseId) {
-    var id = normalizeId(refPath);
-    var refVal = this._refs[id];
-    if (typeof refVal == 'string') {
-      return resolveRecursive.call(this, root, refVal, p);
-    } else if (refVal instanceof SchemaObject) {
-      if (!refVal.validate) this._compile(refVal);
-      root = refVal;
-    } else {
-      refVal = this._schemas[id];
-      if (refVal instanceof SchemaObject) {
-        if (!refVal.validate) this._compile(refVal);
-        if (id == normalizeId(ref))
-          return { schema: refVal, root: root, baseId: baseId };
-        root = refVal;
-      } else {
-        return;
-      }
-    }
-    if (!root.schema) return;
-    baseId = getFullPath(this._getId(root.schema));
-  }
-  return getJsonPointer.call(this, p, baseId, root.schema, root);
-}
-
-
-/* @this Ajv */
-function resolveRecursive(root, ref, parsedRef) {
-  /* jshint validthis: true */
-  var res = resolveSchema.call(this, root, ref);
-  if (res) {
-    var schema = res.schema;
-    var baseId = res.baseId;
-    root = res.root;
-    var id = this._getId(schema);
-    if (id) baseId = resolveUrl(baseId, id);
-    return getJsonPointer.call(this, parsedRef, baseId, schema, root);
-  }
-}
-
-
-var PREVENT_SCOPE_CHANGE = util.toHash(['properties', 'patternProperties', 'enum', 'dependencies', 'definitions']);
-/* @this Ajv */
-function getJsonPointer(parsedRef, baseId, schema, root) {
-  /* jshint validthis: true */
-  parsedRef.hash = parsedRef.hash || '';
-  if (parsedRef.hash.slice(0,2) != '#/') return;
-  var parts = parsedRef.hash.split('/');
-
-  for (var i = 1; i < parts.length; i++) {
-    var part = parts[i];
-    if (part) {
-      part = util.unescapeFragment(part);
-      schema = schema[part];
-      if (schema === undefined) break;
-      var id;
-      if (!PREVENT_SCOPE_CHANGE[part]) {
-        id = this._getId(schema);
-        if (id) baseId = resolveUrl(baseId, id);
-        if (schema.$ref) {
-          var $ref = resolveUrl(baseId, schema.$ref);
-          var res = resolveSchema.call(this, root, $ref);
-          if (res) {
-            schema = res.schema;
-            root = res.root;
-            baseId = res.baseId;
-          }
-        }
-      }
-    }
-  }
-  if (schema !== undefined && schema !== root.schema)
-    return { schema: schema, root: root, baseId: baseId };
-}
-
-
-var SIMPLE_INLINED = util.toHash([
-  'type', 'format', 'pattern',
-  'maxLength', 'minLength',
-  'maxProperties', 'minProperties',
-  'maxItems', 'minItems',
-  'maximum', 'minimum',
-  'uniqueItems', 'multipleOf',
-  'required', 'enum'
-]);
-function inlineRef(schema, limit) {
-  if (limit === false) return false;
-  if (limit === undefined || limit === true) return checkNoRef(schema);
-  else if (limit) return countKeys(schema) <= limit;
-}
-
-
-function checkNoRef(schema) {
-  var item;
-  if (Array.isArray(schema)) {
-    for (var i=0; i<schema.length; i++) {
-      item = schema[i];
-      if (typeof item == 'object' && !checkNoRef(item)) return false;
-    }
-  } else {
-    for (var key in schema) {
-      if (key == '$ref') return false;
-      item = schema[key];
-      if (typeof item == 'object' && !checkNoRef(item)) return false;
-    }
-  }
-  return true;
-}
-
-
-function countKeys(schema) {
-  var count = 0, item;
-  if (Array.isArray(schema)) {
-    for (var i=0; i<schema.length; i++) {
-      item = schema[i];
-      if (typeof item == 'object') count += countKeys(item);
-      if (count == Infinity) return Infinity;
-    }
-  } else {
-    for (var key in schema) {
-      if (key == '$ref') return Infinity;
-      if (SIMPLE_INLINED[key]) {
-        count++;
-      } else {
-        item = schema[key];
-        if (typeof item == 'object') count += countKeys(item) + 1;
-        if (count == Infinity) return Infinity;
-      }
-    }
-  }
-  return count;
-}
-
-
-function getFullPath(id, normalize) {
-  if (normalize !== false) id = normalizeId(id);
-  var p = url.parse(id, false, true);
-  return _getFullPath(p);
-}
-
-
-function _getFullPath(p) {
-  var protocolSeparator = p.protocol || p.href.slice(0,2) == '//' ? '//' : '';
-  return (p.protocol||'') + protocolSeparator + (p.host||'') + (p.path||'')  + '#';
-}
-
-
-var TRAILING_SLASH_HASH = /#\/?$/;
-function normalizeId(id) {
-  return id ? id.replace(TRAILING_SLASH_HASH, '') : '';
-}
-
-
-function resolveUrl(baseId, id) {
-  id = normalizeId(id);
-  return url.resolve(baseId, id);
-}
-
-
-/* @this Ajv */
-function resolveIds(schema) {
-  var schemaId = normalizeId(this._getId(schema));
-  var baseIds = {'': schemaId};
-  var fullPaths = {'': getFullPath(schemaId, false)};
-  var localRefs = {};
-  var self = this;
-
-  traverse(schema, {allKeys: true}, function(sch, jsonPtr, rootSchema, parentJsonPtr, parentKeyword, parentSchema, keyIndex) {
-    if (jsonPtr === '') return;
-    var id = self._getId(sch);
-    var baseId = baseIds[parentJsonPtr];
-    var fullPath = fullPaths[parentJsonPtr] + '/' + parentKeyword;
-    if (keyIndex !== undefined)
-      fullPath += '/' + (typeof keyIndex == 'number' ? keyIndex : util.escapeFragment(keyIndex));
-
-    if (typeof id == 'string') {
-      id = baseId = normalizeId(baseId ? url.resolve(baseId, id) : id);
-
-      var refVal = self._refs[id];
-      if (typeof refVal == 'string') refVal = self._refs[refVal];
-      if (refVal && refVal.schema) {
-        if (!equal(sch, refVal.schema))
-          throw new Error('id "' + id + '" resolves to more than one schema');
-      } else if (id != normalizeId(fullPath)) {
-        if (id[0] == '#') {
-          if (localRefs[id] && !equal(sch, localRefs[id]))
-            throw new Error('id "' + id + '" resolves to more than one schema');
-          localRefs[id] = sch;
-        } else {
-          self._refs[id] = fullPath;
-        }
-      }
-    }
-    baseIds[jsonPtr] = baseId;
-    fullPaths[jsonPtr] = fullPath;
-  });
-
-  return localRefs;
-}
-
-
-/***/ }),
-/* 204 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var isArray = Array.isArray;
-var keyList = Object.keys;
-var hasProp = Object.prototype.hasOwnProperty;
-
-module.exports = function equal(a, b) {
-  if (a === b) return true;
-
-  var arrA = isArray(a)
-    , arrB = isArray(b)
-    , i
-    , length
-    , key;
-
-  if (arrA && arrB) {
-    length = a.length;
-    if (length != b.length) return false;
-    for (i = 0; i < length; i++)
-      if (!equal(a[i], b[i])) return false;
-    return true;
-  }
-
-  if (arrA != arrB) return false;
-
-  var dateA = a instanceof Date
-    , dateB = b instanceof Date;
-  if (dateA != dateB) return false;
-  if (dateA && dateB) return a.getTime() == b.getTime();
-
-  var regexpA = a instanceof RegExp
-    , regexpB = b instanceof RegExp;
-  if (regexpA != regexpB) return false;
-  if (regexpA && regexpB) return a.toString() == b.toString();
-
-  if (a instanceof Object && b instanceof Object) {
-    var keys = keyList(a);
-    length = keys.length;
-
-    if (length !== keyList(b).length)
-      return false;
-
-    for (i = 0; i < length; i++)
-      if (!hasProp.call(b, keys[i])) return false;
-
-    for (i = 0; i < length; i++) {
-      key = keys[i];
-      if (!equal(a[key], b[key])) return false;
-    }
-
-    return true;
-  }
-
-  return false;
-};
-
-
-/***/ }),
-/* 205 */
-/***/ (function(module, exports) {
-
-// Copyright 2011 Mark Cavage <mcavage@gmail.com> All rights reserved.
-
-
-module.exports = {
-
-  newInvalidAsn1Error: function (msg) {
-    var e = new Error();
-    e.name = 'InvalidAsn1Error';
-    e.message = msg || '';
-    return e;
-  }
-
-};
-
-
-/***/ }),
-/* 206 */
-/***/ (function(module, exports) {
-
-// Copyright 2011 Mark Cavage <mcavage@gmail.com> All rights reserved.
-
-
-module.exports = {
-  EOC: 0,
-  Boolean: 1,
-  Integer: 2,
-  BitString: 3,
-  OctetString: 4,
-  Null: 5,
-  OID: 6,
-  ObjectDescriptor: 7,
-  External: 8,
-  Real: 9, // float
-  Enumeration: 10,
-  PDV: 11,
-  Utf8String: 12,
-  RelativeOID: 13,
-  Sequence: 16,
-  Set: 17,
-  NumericString: 18,
-  PrintableString: 19,
-  T61String: 20,
-  VideotexString: 21,
-  IA5String: 22,
-  UTCTime: 23,
-  GeneralizedTime: 24,
-  GraphicString: 25,
-  VisibleString: 26,
-  GeneralString: 28,
-  UniversalString: 29,
-  CharacterString: 30,
-  BMPString: 31,
-  Constructor: 32,
-  Context: 128
-};
-
-
-/***/ }),
-/* 207 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getOutdated = exports.run = exports.requireLockfile = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    let addArgs = [];
-    const upgradeAll = args.length === 0 && typeof flags.scope === 'undefined' && typeof flags.pattern === 'undefined';
-    const addFlags = Object.assign({}, flags, {
-      force: true,
-      ignoreWorkspaceRootCheck: true,
-      workspaceRootIsCwd: config.cwd === config.lockfileFolder
-    });
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-    const deps = yield getOutdated(config, reporter, flags, lockfile, args);
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-
-    var _ref2 = yield install.fetchRequestFromCwd();
-
-    const packagePatterns = _ref2.requests;
-
-
-    setUserRequestedPackageVersions(deps, args, flags.latest, packagePatterns, reporter);
-    cleanLockfile(lockfile, deps, packagePatterns, reporter);
-    addArgs = deps.map(function (dep) {
-      return dep.upgradeTo;
-    });
-
-    if (flags.scope && validScopeRegex.test(flags.scope)) {
-      addArgs = addArgs.filter(function (depName) {
-        return depName.startsWith(flags.scope);
-      });
-    }
-
-    const add = new (_add || _load_add()).Add(addArgs, addFlags, config, reporter, upgradeAll ? new (_lockfile || _load_lockfile()).default() : lockfile);
-    yield add.init();
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let getOutdated = exports.getOutdated = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, lockfile, patterns) {
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-    const outdatedFieldName = flags.latest ? 'latest' : 'wanted';
-
-    // ensure scope is of the form `@scope/`
-    const normalizeScope = function normalizeScope() {
-      if (flags.scope) {
-        if (!flags.scope.startsWith('@')) {
-          flags.scope = '@' + flags.scope;
-        }
-
-        if (!flags.scope.endsWith('/')) {
-          flags.scope += '/';
-        }
-      }
-    };
-
-    const versionFilter = function versionFilter(dep) {
-      return dep.current !== dep[outdatedFieldName];
-    };
-
-    if (!flags.latest) {
-      // these flags only have an affect when --latest is used
-      flags.tilde = false;
-      flags.exact = false;
-      flags.caret = false;
-    }
-
-    normalizeScope();
-
-    const deps = (yield (_packageRequest || _load_packageRequest()).default.getOutdatedPackages(lockfile, install, config, reporter, patterns, flags)).filter(versionFilter).filter(scopeFilter.bind(this, flags));
-    deps.forEach(function (dep) {
-      dep.upgradeTo = buildPatternToUpgradeTo(dep, flags);
-      reporter.verbose(reporter.lang('verboseUpgradeBecauseOutdated', dep.name, dep.upgradeTo));
-    });
-
-    return deps;
-  });
-
-  return function getOutdated(_x5, _x6, _x7, _x8, _x9) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-exports.cleanLockfile = cleanLockfile;
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _add;
-
-function _load_add() {
-  return _add = __webpack_require__(165);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _packageRequest;
-
-function _load_packageRequest() {
-  return _packageRequest = _interopRequireDefault(__webpack_require__(122));
-}
-
-var _normalizePattern;
-
-function _load_normalizePattern() {
-  return _normalizePattern = __webpack_require__(37);
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// used to detect whether a semver range is simple enough to preserve when doing a --latest upgrade.
-// when not matched, the upgraded version range will default to `^` the same as the `add` command would.
-const basicSemverOperatorRegex = new RegExp('^(\\^|~|>=|<=)?[^ |&,]+$');
-
-// used to detect if a passed parameter is a scope or a package name.
-
-
-const validScopeRegex = /^@[a-zA-Z0-9-][a-zA-Z0-9_.-]*\/$/;
-
-// If specific versions were requested for packages, override what getOutdated reported as the latest to install
-// Also add ones that are missing, since the requested packages may not have been outdated at all.
-function setUserRequestedPackageVersions(deps, args, latest, packagePatterns, reporter) {
-  args.forEach(requestedPattern => {
-    let found = false;
-    let normalized = (0, (_normalizePattern || _load_normalizePattern()).normalizePattern)(requestedPattern);
-
-    // if the user specified a package name without a version range, then that implies "latest"
-    // but if the latest flag is not passed then we need to use the version range from package.json
-    if (!normalized.hasVersion && !latest) {
-      packagePatterns.forEach(packagePattern => {
-        const packageNormalized = (0, (_normalizePattern || _load_normalizePattern()).normalizePattern)(packagePattern.pattern);
-        if (packageNormalized.name === normalized.name) {
-          normalized = packageNormalized;
-        }
-      });
-    }
-
-    const newPattern = `${normalized.name}@${normalized.range}`;
-
-    // if this dependency is already in the outdated list,
-    // just update the upgradeTo to whatever version the user requested.
-    deps.forEach(dep => {
-      if (normalized.hasVersion && dep.name === normalized.name) {
-        found = true;
-        dep.upgradeTo = newPattern;
-        reporter.verbose(reporter.lang('verboseUpgradeBecauseRequested', requestedPattern, newPattern));
-      }
-    });
-
-    // if this dependency was not in the outdated list,
-    // then add a new entry
-    if (normalized.hasVersion && !found) {
-      deps.push({
-        name: normalized.name,
-        wanted: '',
-        latest: '',
-        url: '',
-        hint: '',
-        range: '',
-        current: '',
-        upgradeTo: newPattern,
-        workspaceName: '',
-        workspaceLoc: ''
-      });
-      reporter.verbose(reporter.lang('verboseUpgradeBecauseRequested', requestedPattern, newPattern));
-    }
-  });
-}
-
-// this function attempts to determine the range operator on the semver range.
-// this will only handle the simple cases of a semver starting with '^', '~', '>=', '<=', or an exact version.
-// "exotic" semver ranges will not be handled.
-function getRangeOperator(version) {
-  const result = basicSemverOperatorRegex.exec(version);
-  return result ? result[1] || '' : '^';
-}
-
-// Attempt to preserve the range operator from the package.json specified semver range.
-// If an explicit operator was specified using --exact, --tilde, --caret, then that will take precedence.
-function buildPatternToUpgradeTo(dep, flags) {
-  if (dep.latest === 'exotic') {
-    return `${dep.name}@${dep.url}`;
-  }
-
-  const toLatest = flags.latest;
-  const toVersion = toLatest ? dep.latest : dep.range;
-  let rangeOperator = '';
-
-  if (toLatest) {
-    if (flags.caret) {
-      rangeOperator = '^';
-    } else if (flags.tilde) {
-      rangeOperator = '~';
-    } else if (flags.exact) {
-      rangeOperator = '';
-    } else {
-      rangeOperator = getRangeOperator(dep.range);
-    }
-  }
-
-  return `${dep.name}@${rangeOperator}${toVersion}`;
-}
-
-function scopeFilter(flags, dep) {
-  if (validScopeRegex.test(flags.scope)) {
-    return dep.name.startsWith(flags.scope);
-  }
-  return true;
-}
-
-// Remove deps being upgraded from the lockfile, or else Add will use the already-installed version
-// instead of the latest for the range.
-// We do this recursively so that when Yarn installs the potentially updated transitive deps,
-// it may upgrade them too instead of just using the "locked" version from the lockfile.
-// Transitive dependencies that are also a direct dependency are skipped.
-function cleanLockfile(lockfile, deps, packagePatterns, reporter) {
-  function cleanDepFromLockfile(pattern, depth) {
-    const lockManifest = lockfile.getLocked(pattern);
-    if (!lockManifest || depth > 1 && packagePatterns.some(packagePattern => packagePattern.pattern === pattern)) {
-      reporter.verbose(reporter.lang('verboseUpgradeNotUnlocking', pattern));
-      return;
-    }
-
-    const dependencies = Object.assign({}, lockManifest.dependencies || {}, lockManifest.optionalDependencies || {});
-    const depPatterns = Object.keys(dependencies).map(key => `${key}@${dependencies[key]}`);
-    reporter.verbose(reporter.lang('verboseUpgradeUnlocking', pattern));
-    lockfile.removePattern(pattern);
-    depPatterns.forEach(pattern => cleanDepFromLockfile(pattern, depth + 1));
-  }
-
-  const patterns = deps.map(dep => dep.upgradeTo);
-  patterns.forEach(pattern => cleanDepFromLockfile(pattern, 1));
-}
-
-function setFlags(commander) {
-  commander.description('Upgrades packages to their latest version based on the specified range.');
-  commander.usage('upgrade [flags]');
-  commander.option('-S, --scope <scope>', 'upgrade packages under the specified scope');
-  commander.option('-L, --latest', 'list the latest version of packages, ignoring version ranges in package.json');
-  commander.option('-E, --exact', 'install exact version. Only used when --latest is specified.');
-  commander.option('-P, --pattern [pattern]', 'upgrade packages that match pattern');
-  commander.option('-T, --tilde', 'install most recent release with the same minor version. Only used when --latest is specified.');
-  commander.option('-C, --caret', 'install most recent release with the same major version. Only used when --latest is specified.');
-  commander.option('-A, --audit', 'Run vulnerability audit on installed packages');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-const requireLockfile = exports.requireLockfile = true;
-
-/***/ }),
-/* 208 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.integrityErrors = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _packageNameUtils;
-
-function _load_packageNameUtils() {
-  return _packageNameUtils = __webpack_require__(222);
-}
-
-var _workspaceLayout;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout = _interopRequireDefault(__webpack_require__(90));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const path = __webpack_require__(0);
-
-const integrityErrors = exports.integrityErrors = {
-  EXPECTED_IS_NOT_A_JSON: 'integrityFailedExpectedIsNotAJSON',
-  FILES_MISSING: 'integrityFailedFilesMissing',
-  LOCKFILE_DONT_MATCH: 'integrityLockfilesDontMatch',
-  FLAGS_DONT_MATCH: 'integrityFlagsDontMatch',
-  LINKED_MODULES_DONT_MATCH: 'integrityCheckLinkedModulesDontMatch',
-  PATTERNS_DONT_MATCH: 'integrityPatternsDontMatch',
-  MODULES_FOLDERS_MISSING: 'integrityModulesFoldersMissing',
-  SYSTEM_PARAMS_DONT_MATCH: 'integritySystemParamsDontMatch'
-};
-
-const INTEGRITY_FILE_DEFAULTS = () => ({
-  systemParams: (0, (_packageNameUtils || _load_packageNameUtils()).getSystemParams)(),
-  modulesFolders: [],
-  flags: [],
-  linkedModules: [],
-  topLevelPatterns: [],
-  lockfileEntries: {},
-  files: []
-});
-
-/**
- *
- */
-class InstallationIntegrityChecker {
-  constructor(config) {
-    this.config = config;
-  }
-
-  /**
-   * Get the common ancestor of every node_modules - it may be a node_modules directory itself, but isn't required to.
-   */
-
-  _getModulesRootFolder() {
-    if (this.config.modulesFolder) {
-      return this.config.modulesFolder;
-    } else if (this.config.workspaceRootFolder) {
-      return this.config.workspaceRootFolder;
-    } else {
-      return path.join(this.config.lockfileFolder, (_constants || _load_constants()).NODE_MODULES_FOLDER);
-    }
-  }
-
-  /**
-   * Get the directory in which the yarn-integrity file should be written.
-   */
-
-  _getIntegrityFileFolder() {
-    if (this.config.modulesFolder) {
-      return this.config.modulesFolder;
-    } else if (this.config.enableMetaFolder) {
-      return path.join(this.config.lockfileFolder, (_constants || _load_constants()).META_FOLDER);
-    } else {
-      return path.join(this.config.lockfileFolder, (_constants || _load_constants()).NODE_MODULES_FOLDER);
-    }
-  }
-
-  /**
-   * Get the full path of the yarn-integrity file.
-   */
-
-  _getIntegrityFileLocation() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const locationFolder = _this._getIntegrityFileFolder();
-      const locationPath = path.join(locationFolder, (_constants || _load_constants()).INTEGRITY_FILENAME);
-
-      const exists = yield (_fs || _load_fs()).exists(locationPath);
-
-      return {
-        locationFolder,
-        locationPath,
-        exists
-      };
-    })();
-  }
-
-  /**
-   * Get the list of the directories that contain our modules (there might be multiple such folders b/c of workspaces).
-   */
-
-  _getModulesFolders({ workspaceLayout } = {}) {
-    const locations = [];
-
-    if (this.config.modulesFolder) {
-      locations.push(this.config.modulesFolder);
-    } else {
-      locations.push(path.join(this.config.lockfileFolder, (_constants || _load_constants()).NODE_MODULES_FOLDER));
-    }
-
-    if (workspaceLayout) {
-      for (var _iterator = Object.keys(workspaceLayout.workspaces), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const workspaceName = _ref;
-
-        const loc = workspaceLayout.workspaces[workspaceName].loc;
-
-        if (loc) {
-          locations.push(path.join(loc, (_constants || _load_constants()).NODE_MODULES_FOLDER));
-        }
-      }
-    }
-
-    return locations.sort((_misc || _load_misc()).sortAlpha);
-  }
-
-  /**
-   * Get a list of the files that are located inside our module folders.
-   */
-  _getIntegrityListing({ workspaceLayout } = {}) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const files = [];
-
-      const recurse = (() => {
-        var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (dir) {
-          for (var _iterator2 = yield (_fs || _load_fs()).readdir(dir), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-            var _ref3;
-
-            if (_isArray2) {
-              if (_i2 >= _iterator2.length) break;
-              _ref3 = _iterator2[_i2++];
-            } else {
-              _i2 = _iterator2.next();
-              if (_i2.done) break;
-              _ref3 = _i2.value;
-            }
-
-            const file = _ref3;
-
-            const entry = path.join(dir, file);
-            const stat = yield (_fs || _load_fs()).lstat(entry);
-
-            if (stat.isDirectory()) {
-              yield recurse(entry);
-            } else {
-              files.push(entry);
-            }
-          }
-        });
-
-        return function recurse(_x) {
-          return _ref2.apply(this, arguments);
-        };
-      })();
-
-      for (var _iterator3 = _this2._getModulesFolders({ workspaceLayout }), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref4 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref4 = _i3.value;
-        }
-
-        const modulesFolder = _ref4;
-
-        if (yield (_fs || _load_fs()).exists(modulesFolder)) {
-          yield recurse(modulesFolder);
-        }
-      }
-
-      return files;
-    })();
-  }
-
-  /**
-   * Generate integrity hash of input lockfile.
-   */
-
-  _generateIntegrityFile(lockfile, patterns, flags, workspaceLayout, artifacts) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const result = (0, (_extends2 || _load_extends()).default)({}, INTEGRITY_FILE_DEFAULTS(), {
-        artifacts
-      });
-
-      result.topLevelPatterns = patterns;
-
-      // If using workspaces, we also need to add the workspaces patterns to the top-level, so that we'll know if a
-      // dependency is added or removed into one of them. We must take care not to read the aggregator (if !loc).
-      //
-      // Also note that we can't use of workspaceLayout.workspaces[].manifest._reference.patterns, because when
-      // doing a "yarn check", the _reference property hasn't yet been properly initialized.
-
-      if (workspaceLayout) {
-        result.topLevelPatterns = result.topLevelPatterns.filter(function (p) {
-          // $FlowFixMe
-          return !workspaceLayout.getManifestByPattern(p);
-        });
-
-        for (var _iterator4 = Object.keys(workspaceLayout.workspaces), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref5;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref5 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref5 = _i4.value;
-          }
-
-          const name = _ref5;
-
-          if (!workspaceLayout.workspaces[name].loc) {
-            continue;
-          }
-
-          const manifest = workspaceLayout.workspaces[name].manifest;
-
-          if (manifest) {
-            for (var _iterator5 = (_constants || _load_constants()).DEPENDENCY_TYPES, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-              var _ref6;
-
-              if (_isArray5) {
-                if (_i5 >= _iterator5.length) break;
-                _ref6 = _iterator5[_i5++];
-              } else {
-                _i5 = _iterator5.next();
-                if (_i5.done) break;
-                _ref6 = _i5.value;
-              }
-
-              const dependencyType = _ref6;
-
-              const dependencies = manifest[dependencyType];
-
-              if (!dependencies) {
-                continue;
-              }
-
-              for (var _iterator6 = Object.keys(dependencies), _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-                var _ref7;
-
-                if (_isArray6) {
-                  if (_i6 >= _iterator6.length) break;
-                  _ref7 = _iterator6[_i6++];
-                } else {
-                  _i6 = _iterator6.next();
-                  if (_i6.done) break;
-                  _ref7 = _i6.value;
-                }
-
-                const dep = _ref7;
-
-                result.topLevelPatterns.push(`${dep}@${dependencies[dep]}`);
-              }
-            }
-          }
-        }
-      }
-
-      result.topLevelPatterns.sort((_misc || _load_misc()).sortAlpha);
-
-      if (flags.checkFiles) {
-        result.flags.push('checkFiles');
-      }
-
-      if (flags.flat) {
-        result.flags.push('flat');
-      }
-
-      if (_this3.config.ignoreScripts) {
-        result.flags.push('ignoreScripts');
-      }
-      if (_this3.config.focus) {
-        result.flags.push('focus: ' + _this3.config.focusedWorkspaceName);
-      }
-
-      if (_this3.config.production) {
-        result.flags.push('production');
-      }
-
-      if (_this3.config.plugnplayEnabled) {
-        result.flags.push('plugnplay');
-      }
-
-      const linkedModules = _this3.config.linkedModules;
-
-      if (linkedModules.length) {
-        result.linkedModules = linkedModules.sort((_misc || _load_misc()).sortAlpha);
-      }
-
-      for (var _iterator7 = Object.keys(lockfile), _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-        var _ref8;
-
-        if (_isArray7) {
-          if (_i7 >= _iterator7.length) break;
-          _ref8 = _iterator7[_i7++];
-        } else {
-          _i7 = _iterator7.next();
-          if (_i7.done) break;
-          _ref8 = _i7.value;
-        }
-
-        const key = _ref8;
-
-        result.lockfileEntries[key] = lockfile[key].resolved || '';
-      }
-
-      for (var _iterator8 = _this3._getModulesFolders({ workspaceLayout }), _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-        var _ref9;
-
-        if (_isArray8) {
-          if (_i8 >= _iterator8.length) break;
-          _ref9 = _iterator8[_i8++];
-        } else {
-          _i8 = _iterator8.next();
-          if (_i8.done) break;
-          _ref9 = _i8.value;
-        }
-
-        const modulesFolder = _ref9;
-
-        if (yield (_fs || _load_fs()).exists(modulesFolder)) {
-          result.modulesFolders.push(path.relative(_this3.config.lockfileFolder, modulesFolder));
-        }
-      }
-
-      if (flags.checkFiles) {
-        const modulesRoot = _this3._getModulesRootFolder();
-
-        result.files = (yield _this3._getIntegrityListing({ workspaceLayout })).map(function (entry) {
-          return path.relative(modulesRoot, entry);
-        }).sort((_misc || _load_misc()).sortAlpha);
-      }
-
-      return result;
-    })();
-  }
-
-  _getIntegrityFile(locationPath) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const expectedRaw = yield (_fs || _load_fs()).readFile(locationPath);
-      try {
-        return (0, (_extends2 || _load_extends()).default)({}, INTEGRITY_FILE_DEFAULTS(), JSON.parse(expectedRaw));
-      } catch (e) {
-        // ignore JSON parsing for legacy text integrity files compatibility
-      }
-      return null;
-    })();
-  }
-
-  _compareIntegrityFiles(actual, expected, checkFiles, workspaceLayout) {
-    if (!expected) {
-      return 'EXPECTED_IS_NOT_A_JSON';
-    }
-
-    if (!(0, (_misc || _load_misc()).compareSortedArrays)(actual.linkedModules, expected.linkedModules)) {
-      return 'LINKED_MODULES_DONT_MATCH';
-    }
-
-    if (actual.systemParams !== expected.systemParams) {
-      return 'SYSTEM_PARAMS_DONT_MATCH';
-    }
-
-    let relevantExpectedFlags = expected.flags.slice();
-
-    // If we run "yarn" after "yarn --check-files", we shouldn't fail the less strict validation
-    if (actual.flags.indexOf('checkFiles') === -1) {
-      relevantExpectedFlags = relevantExpectedFlags.filter(flag => flag !== 'checkFiles');
-    }
-
-    if (!(0, (_misc || _load_misc()).compareSortedArrays)(actual.flags, relevantExpectedFlags)) {
-      return 'FLAGS_DONT_MATCH';
-    }
-
-    if (!(0, (_misc || _load_misc()).compareSortedArrays)(actual.topLevelPatterns, expected.topLevelPatterns || [])) {
-      return 'PATTERNS_DONT_MATCH';
-    }
-
-    for (var _iterator9 = Object.keys(actual.lockfileEntries), _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-      var _ref10;
-
-      if (_isArray9) {
-        if (_i9 >= _iterator9.length) break;
-        _ref10 = _iterator9[_i9++];
-      } else {
-        _i9 = _iterator9.next();
-        if (_i9.done) break;
-        _ref10 = _i9.value;
-      }
-
-      const key = _ref10;
-
-      if (actual.lockfileEntries[key] !== expected.lockfileEntries[key]) {
-        return 'LOCKFILE_DONT_MATCH';
-      }
-    }
-
-    for (var _iterator10 = Object.keys(expected.lockfileEntries), _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray10) {
-        if (_i10 >= _iterator10.length) break;
-        _ref11 = _iterator10[_i10++];
-      } else {
-        _i10 = _iterator10.next();
-        if (_i10.done) break;
-        _ref11 = _i10.value;
-      }
-
-      const key = _ref11;
-
-      if (actual.lockfileEntries[key] !== expected.lockfileEntries[key]) {
-        return 'LOCKFILE_DONT_MATCH';
-      }
-    }
-
-    if (checkFiles) {
-      // Early bailout if we expect more files than what we have
-      if (expected.files.length > actual.files.length) {
-        return 'FILES_MISSING';
-      }
-
-      // Since we know the "files" array is sorted (alphabetically), we can optimize the thing
-      // Instead of storing the files in a Set, we can just iterate both arrays at once. O(n)!
-      for (let u = 0, v = 0; u < expected.files.length; ++u) {
-        // Index that, if reached, means that we won't have enough food to match the remaining expected entries anyway
-        const max = v + (actual.files.length - v) - (expected.files.length - u) + 1;
-
-        // Skip over files that have been added (ie not present in 'expected')
-        while (v < max && actual.files[v] !== expected.files[u]) {
-          v += 1;
-        }
-
-        // If we've reached the index defined above, the file is either missing or we can early exit
-        if (v === max) {
-          return 'FILES_MISSING';
-        }
-      }
-    }
-    return 'OK';
-  }
-
-  check(patterns, lockfile, flags, workspaceLayout) {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // check if patterns exist in lockfile
-      const missingPatterns = patterns.filter(function (p) {
-        return !lockfile[p] && (!workspaceLayout || !workspaceLayout.getManifestByPattern(p));
-      });
-
-      const loc = yield _this4._getIntegrityFileLocation();
-      if (missingPatterns.length || !loc.exists) {
-        return {
-          integrityFileMissing: !loc.exists,
-          missingPatterns
-        };
-      }
-
-      const actual = yield _this4._generateIntegrityFile(lockfile, patterns, flags, workspaceLayout);
-
-      const expected = yield _this4._getIntegrityFile(loc.locationPath);
-      let integrityMatches = _this4._compareIntegrityFiles(actual, expected, flags.checkFiles, workspaceLayout);
-
-      if (integrityMatches === 'OK') {
-        invariant(expected, "The integrity shouldn't pass without integrity file");
-        for (var _iterator11 = expected.modulesFolders, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-          var _ref12;
-
-          if (_isArray11) {
-            if (_i11 >= _iterator11.length) break;
-            _ref12 = _iterator11[_i11++];
-          } else {
-            _i11 = _iterator11.next();
-            if (_i11.done) break;
-            _ref12 = _i11.value;
-          }
-
-          const modulesFolder = _ref12;
-
-          if (!(yield (_fs || _load_fs()).exists(path.join(_this4.config.lockfileFolder, modulesFolder)))) {
-            integrityMatches = 'MODULES_FOLDERS_MISSING';
-          }
-        }
-      }
-
-      return {
-        integrityFileMissing: false,
-        integrityMatches: integrityMatches === 'OK',
-        integrityError: integrityMatches === 'OK' ? undefined : integrityMatches,
-        missingPatterns,
-        hardRefreshRequired: integrityMatches === 'SYSTEM_PARAMS_DONT_MATCH'
-      };
-    })();
-  }
-
-  /**
-   * Get artifacts from integrity file if it exists.
-   */
-  getArtifacts() {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const loc = yield _this5._getIntegrityFileLocation();
-      if (!loc.exists) {
-        return null;
-      }
-
-      const expectedRaw = yield (_fs || _load_fs()).readFile(loc.locationPath);
-      let expected;
-      try {
-        expected = JSON.parse(expectedRaw);
-      } catch (e) {
-        // ignore JSON parsing for legacy text integrity files compatibility
-      }
-
-      return expected ? expected.artifacts : null;
-    })();
-  }
-
-  /**
-   * Write the integrity hash of the current install to disk.
-   */
-  save(patterns, lockfile, flags, workspaceLayout, artifacts) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const integrityFile = yield _this6._generateIntegrityFile(lockfile, patterns, flags, workspaceLayout, artifacts);
-
-      const loc = yield _this6._getIntegrityFileLocation();
-      invariant(loc.locationPath, 'expected integrity hash location');
-
-      yield (_fs || _load_fs()).mkdirp(path.dirname(loc.locationPath));
-      yield (_fs || _load_fs()).writeFile(loc.locationPath, JSON.stringify(integrityFile, null, 2));
-    })();
-  }
-
-  removeIntegrityFile() {
-    var _this7 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const loc = yield _this7._getIntegrityFileLocation();
-      if (loc.exists) {
-        yield (_fs || _load_fs()).unlink(loc.locationPath);
-      }
-    })();
-  }
-}
-exports.default = InstallationIntegrityChecker;
-
-/***/ }),
-/* 209 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.testEngine = testEngine;
-exports.checkOne = checkOne;
-exports.check = check;
-exports.shouldCheck = shouldCheck;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _yarnVersion;
-
-function _load_yarnVersion() {
-  return _yarnVersion = __webpack_require__(120);
-}
-
-var _semver;
-
-function _load_semver() {
-  return _semver = __webpack_require__(224);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const semver = __webpack_require__(22);
-
-const VERSIONS = Object.assign({}, process.versions, {
-  yarn: (_yarnVersion || _load_yarnVersion()).version
-});
-
-function isValid(items, actual) {
-  let isNotWhitelist = true;
-  let isBlacklist = false;
-
-  for (var _iterator = items, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const item = _ref;
-
-    // blacklist
-    if (item[0] === '!') {
-      isBlacklist = true;
-
-      if (actual === item.slice(1)) {
-        return false;
-      }
-      // whitelist
-    } else {
-      isNotWhitelist = false;
-
-      if (item === actual) {
-        return true;
-      }
-    }
-  }
-
-  // npm allows blacklists and whitelists to be mixed. Blacklists with
-  // whitelisted items should be treated as whitelists.
-  return isBlacklist && isNotWhitelist;
-}
-
-const aliases = (0, (_map || _load_map()).default)({
-  iojs: 'node' // we should probably prompt these libraries to fix this
-});
-
-const ignore = ['npm', // we'll never satisfy this for obvious reasons
-'teleport', // a module bundler used by some modules
-'rhino', // once a target for older modules
-'cordovaDependencies', // http://bit.ly/2tkUePg
-'parcel'];
-
-function testEngine(name, range, versions, looseSemver) {
-  const actual = versions[name];
-  if (!actual) {
-    return false;
-  }
-
-  if (!semver.valid(actual, looseSemver)) {
-    return false;
-  }
-
-  if (semver.satisfies(actual, range, looseSemver)) {
-    return true;
-  }
-
-  if (name === 'yarn' && (0, (_semver || _load_semver()).satisfiesWithPrereleases)(actual, range, looseSemver)) {
-    return true;
-  }
-
-  if (name === 'node' && semver.gt(actual, '1.0.0', looseSemver)) {
-    // WARNING: this is a massive hack and is super gross but necessary for compatibility
-    // some modules have the `engines.node` field set to a caret version below semver major v1
-    // eg. ^0.12.0. this is problematic as we enforce engines checks and node is now on version >=1
-    // to allow this pattern we transform the node version to fake ones in the minor range 10-13
-    const major = semver.major(actual, looseSemver);
-    const fakes = [`0.10.${major}`, `0.11.${major}`, `0.12.${major}`, `0.13.${major}`];
-    for (var _iterator2 = fakes, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref2 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref2 = _i2.value;
-      }
-
-      const actualFake = _ref2;
-
-      if (semver.satisfies(actualFake, range, looseSemver)) {
-        return true;
-      }
-    }
-  }
-
-  // incompatible version
-  return false;
-}
-
-function isValidArch(archs) {
-  return isValid(archs, process.arch);
-}
-
-function isValidPlatform(platforms) {
-  return isValid(platforms, process.platform);
-}
-
-function checkOne(info, config, ignoreEngines) {
-  let didIgnore = false;
-  let didError = false;
-  const reporter = config.reporter;
-  const human = `${info.name}@${info.version}`;
-
-  const pushError = msg => {
-    const ref = info._reference;
-
-    if (ref && ref.optional) {
-      ref.ignore = true;
-      ref.incompatible = true;
-
-      reporter.info(`${human}: ${msg}`);
-      if (!didIgnore) {
-        reporter.info(reporter.lang('optionalCompatibilityExcluded', human));
-        didIgnore = true;
-      }
-    } else {
-      reporter.error(`${human}: ${msg}`);
-      didError = true;
-    }
-  };
-
-  const os = info.os,
-        cpu = info.cpu,
-        engines = info.engines;
-
-
-  if (shouldCheckPlatform(os, config.ignorePlatform) && !isValidPlatform(os)) {
-    pushError(reporter.lang('incompatibleOS', process.platform));
-  }
-
-  if (shouldCheckCpu(cpu, config.ignorePlatform) && !isValidArch(cpu)) {
-    pushError(reporter.lang('incompatibleCPU', process.arch));
-  }
-
-  if (shouldCheckEngines(engines, ignoreEngines)) {
-    for (var _iterator3 = (0, (_misc || _load_misc()).entries)(info.engines), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref3;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref3 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref3 = _i3.value;
-      }
-
-      const entry = _ref3;
-
-      let name = entry[0];
-      const range = entry[1];
-
-      if (aliases[name]) {
-        name = aliases[name];
-      }
-
-      if (VERSIONS[name]) {
-        if (!testEngine(name, range, VERSIONS, config.looseSemver)) {
-          pushError(reporter.lang('incompatibleEngine', name, range, VERSIONS[name]));
-        }
-      } else if (ignore.indexOf(name) < 0) {
-        reporter.warn(`${human}: ${reporter.lang('invalidEngine', name)}`);
-      }
-    }
-  }
-
-  if (didError) {
-    throw new (_errors || _load_errors()).MessageError(reporter.lang('foundIncompatible'));
-  }
-}
-
-function check(infos, config, ignoreEngines) {
-  for (var _iterator4 = infos, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-    var _ref4;
-
-    if (_isArray4) {
-      if (_i4 >= _iterator4.length) break;
-      _ref4 = _iterator4[_i4++];
-    } else {
-      _i4 = _iterator4.next();
-      if (_i4.done) break;
-      _ref4 = _i4.value;
-    }
-
-    const info = _ref4;
-
-    checkOne(info, config, ignoreEngines);
-  }
-}
-
-function shouldCheckCpu(cpu, ignorePlatform) {
-  return !ignorePlatform && Array.isArray(cpu) && cpu.length > 0;
-}
-
-function shouldCheckPlatform(os, ignorePlatform) {
-  return !ignorePlatform && Array.isArray(os) && os.length > 0;
-}
-
-function shouldCheckEngines(engines, ignoreEngines) {
-  return !ignoreEngines && typeof engines === 'object';
-}
-
-function shouldCheck(manifest, options) {
-  return shouldCheckCpu(manifest.cpu, options.ignorePlatform) || shouldCheckPlatform(manifest.os, options.ignorePlatform) || shouldCheckEngines(manifest.engines, options.ignoreEngines);
-}
-
-/***/ }),
-/* 210 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fetchOneRemote = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let fetchCache = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (dest, fetcher, config, remote) {
-    // $FlowFixMe: This error doesn't make sense
-    var _ref2 = yield config.readPackageMetadata(dest);
-
-    const hash = _ref2.hash,
-          pkg = _ref2.package,
-          cacheRemote = _ref2.remote;
-
-
-    const cacheIntegrity = cacheRemote.cacheIntegrity || cacheRemote.integrity;
-    const cacheHash = cacheRemote.hash;
-
-    if (remote.integrity) {
-      if (!cacheIntegrity || !ssri.parse(cacheIntegrity).match(remote.integrity)) {
-        throw new (_errors || _load_errors()).SecurityError(config.reporter.lang('fetchBadIntegrityCache', pkg.name, cacheIntegrity, remote.integrity));
-      }
-    }
-
-    if (remote.hash) {
-      if (!cacheHash || cacheHash !== remote.hash) {
-        throw new (_errors || _load_errors()).SecurityError(config.reporter.lang('fetchBadHashCache', pkg.name, cacheHash, remote.hash));
-      }
-    }
-
-    yield fetcher.setupMirrorFromCache();
-    return {
-      package: pkg,
-      hash,
-      dest,
-      cached: true
-    };
-  });
-
-  return function fetchCache(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let fetchOneRemote = exports.fetchOneRemote = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (remote, name, version, dest, config) {
-    // Mock metadata for symlinked dependencies
-    if (remote.type === 'link') {
-      const mockPkg = { _uid: '', name: '', version: '0.0.0' };
-      return Promise.resolve({ resolved: null, hash: '', dest, package: mockPkg, cached: false });
-    }
-
-    const Fetcher = (_index || _load_index())[remote.type];
-    if (!Fetcher) {
-      throw new (_errors || _load_errors()).MessageError(config.reporter.lang('unknownFetcherFor', remote.type));
-    }
-
-    const fetcher = new Fetcher(dest, remote, config);
-    if (yield config.isValidModuleDest(dest)) {
-      return fetchCache(dest, fetcher, config, remote);
-    }
-
-    // remove as the module may be invalid
-    yield (_fs || _load_fs()).unlink(dest);
-
-    try {
-      return yield fetcher.fetch({
-        name,
-        version
-      });
-    } catch (err) {
-      try {
-        yield (_fs || _load_fs()).unlink(dest);
-      } catch (err2) {
-        // what do?
-      }
-      throw err;
-    }
-  });
-
-  return function fetchOneRemote(_x5, _x6, _x7, _x8, _x9) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-let maybeFetchOne = (() => {
-  var _ref4 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (ref, config) {
-    try {
-      return yield fetchOne(ref, config);
-    } catch (err) {
-      if (ref.optional) {
-        config.reporter.error(err.message);
-        return null;
-      } else {
-        throw err;
-      }
-    }
-  });
-
-  return function maybeFetchOne(_x10, _x11) {
-    return _ref4.apply(this, arguments);
-  };
-})();
-
-exports.fetch = fetch;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = _interopRequireWildcard(__webpack_require__(552));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _promise;
-
-function _load_promise() {
-  return _promise = _interopRequireWildcard(__webpack_require__(50));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const ssri = __webpack_require__(65);
-
-function fetchOne(ref, config) {
-  const dest = config.generateModuleCachePath(ref);
-
-  return fetchOneRemote(ref.remote, ref.name, ref.version, dest, config);
-}
-
-function fetch(pkgs, config) {
-  const pkgsPerDest = new Map();
-  pkgs = pkgs.filter(pkg => {
-    const ref = pkg._reference;
-    if (!ref) {
-      return false;
-    }
-    const dest = config.generateModuleCachePath(ref);
-    const otherPkg = pkgsPerDest.get(dest);
-    if (otherPkg) {
-      config.reporter.warn(config.reporter.lang('multiplePackagesCantUnpackInSameDestination', ref.patterns, dest, otherPkg.patterns));
-      return false;
-    }
-    pkgsPerDest.set(dest, ref);
-    return true;
-  });
-  const tick = config.reporter.progress(pkgs.length);
-
-  return (_promise || _load_promise()).queue(pkgs, (() => {
-    var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (pkg) {
-      const ref = pkg._reference;
-      if (!ref) {
-        return pkg;
-      }
-
-      const res = yield maybeFetchOne(ref, config);
-      let newPkg;
-
-      if (res) {
-        newPkg = res.package;
-
-        // update with new remote
-        // but only if there was a hash previously as the tarball fetcher does not provide a hash.
-        if (ref.remote.hash) {
-          // if the checksum was updated, also update resolved and cache
-          if (ref.remote.hash !== res.hash && config.updateChecksums) {
-            const oldHash = ref.remote.hash;
-            if (ref.remote.resolved) {
-              ref.remote.resolved = ref.remote.resolved.replace(oldHash, res.hash);
-            }
-            ref.config.cache = Object.keys(ref.config.cache).reduce(function (cache, entry) {
-              const entryWithNewHash = entry.replace(oldHash, res.hash);
-              cache[entryWithNewHash] = ref.config.cache[entry];
-              return cache;
-            }, {});
-          }
-          ref.remote.hash = res.hash || ref.remote.hash;
-        }
-      }
-
-      if (tick) {
-        tick();
-      }
-
-      if (newPkg) {
-        newPkg._reference = ref;
-        newPkg._remote = ref.remote;
-        newPkg.name = pkg.name;
-        newPkg.fresh = pkg.fresh;
-        return newPkg;
-      }
-
-      return pkg;
-    });
-
-    return function (_x12) {
-      return _ref5.apply(this, arguments);
-    };
-  })(), config.networkConcurrency);
-}
-
-/***/ }),
-/* 211 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.linkBin = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let linkBin = exports.linkBin = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (src, dest) {
-    if (process.platform === 'win32') {
-      const unlockMutex = yield (0, (_mutex || _load_mutex()).default)(src);
-      try {
-        yield cmdShim(src, dest, { createPwshFile: false });
-      } finally {
-        unlockMutex();
-      }
-    } else {
-      yield (_fs || _load_fs()).mkdirp(path.dirname(dest));
-      yield (_fs || _load_fs()).symlink(src, dest);
-      yield (_fs || _load_fs()).chmod(dest, '755');
-    }
-  });
-
-  return function linkBin(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-var _packageHoister;
-
-function _load_packageHoister() {
-  return _packageHoister = _interopRequireDefault(__webpack_require__(556));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _promise;
-
-function _load_promise() {
-  return _promise = _interopRequireWildcard(__webpack_require__(50));
-}
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _mutex;
-
-function _load_mutex() {
-  return _mutex = _interopRequireDefault(__webpack_require__(375));
-}
-
-var _semver;
-
-function _load_semver() {
-  return _semver = __webpack_require__(224);
-}
-
-var _workspaceLayout;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout = _interopRequireDefault(__webpack_require__(90));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const cmdShim = __webpack_require__(201);
-const path = __webpack_require__(0);
-const semver = __webpack_require__(22);
-// Concurrency for creating bin links disabled because of the issue #1961
-const linkBinConcurrency = 1;
-
-class PackageLinker {
-  constructor(config, resolver) {
-    this.resolver = resolver;
-    this.reporter = config.reporter;
-    this.config = config;
-    this.artifacts = {};
-    this.topLevelBinLinking = true;
-    this.unplugged = [];
-  }
-
-  setArtifacts(artifacts) {
-    this.artifacts = artifacts;
-  }
-
-  setTopLevelBinLinking(topLevelBinLinking) {
-    this.topLevelBinLinking = topLevelBinLinking;
-  }
-
-  linkSelfDependencies(pkg, pkgLoc, targetBinLoc, override = false) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      targetBinLoc = path.join(targetBinLoc, '.bin');
-      yield (_fs || _load_fs()).mkdirp(targetBinLoc);
-      targetBinLoc = yield (_fs || _load_fs()).realpath(targetBinLoc);
-      pkgLoc = yield (_fs || _load_fs()).realpath(pkgLoc);
-      for (var _iterator = (0, (_misc || _load_misc()).entries)(pkg.bin), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref3 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref3 = _i.value;
-        }
-
-        const _ref2 = _ref3;
-        const scriptName = _ref2[0];
-        const scriptCmd = _ref2[1];
-
-        const dest = path.join(targetBinLoc, scriptName);
-        const src = path.join(pkgLoc, scriptCmd);
-        if (!(yield (_fs || _load_fs()).exists(src))) {
-          if (!override) {
-            // TODO maybe throw an error
-            continue;
-          }
-        }
-        yield linkBin(src, dest);
-      }
-    })();
-  }
-
-  linkBinDependencies(pkg, dir) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const deps = [];
-
-      const ref = pkg._reference;
-      invariant(ref, 'Package reference is missing');
-
-      const remote = pkg._remote;
-      invariant(remote, 'Package remote is missing');
-
-      // link up `bin scripts` in `dependencies`
-      for (var _iterator2 = ref.dependencies, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref4 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref4 = _i2.value;
-        }
-
-        const pattern = _ref4;
-
-        const dep = _this.resolver.getStrictResolvedPattern(pattern);
-        if (
-        // Missing locations means not installed inside node_modules
-        dep._reference && dep._reference.locations.length && dep.bin && Object.keys(dep.bin).length) {
-          const loc = yield _this.findNearestInstalledVersionOfPackage(dep, dir);
-          deps.push({ dep, loc });
-        }
-      }
-
-      // link up the `bin` scripts in bundled dependencies
-      if (pkg.bundleDependencies) {
-        for (var _iterator3 = pkg.bundleDependencies, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-          var _ref5;
-
-          if (_isArray3) {
-            if (_i3 >= _iterator3.length) break;
-            _ref5 = _iterator3[_i3++];
-          } else {
-            _i3 = _iterator3.next();
-            if (_i3.done) break;
-            _ref5 = _i3.value;
-          }
-
-          const depName = _ref5;
-
-          const locs = ref.locations.map(function (loc) {
-            return path.join(loc, _this.config.getFolder(pkg), depName);
-          });
-          try {
-            const dep = yield _this.config.readManifest(locs[0], remote.registry); //all of them should be the same
-
-            if (dep.bin && Object.keys(dep.bin).length) {
-              deps.push(...locs.map(function (loc) {
-                return { dep, loc };
-              }));
-            }
-          } catch (ex) {
-            if (ex.code !== 'ENOENT') {
-              throw ex;
-            }
-            // intentionally ignoring ENOENT error.
-            // bundledDependency either does not exist or does not contain a package.json
-          }
-        }
-      }
-
-      // no deps to link
-      if (!deps.length) {
-        return;
-      }
-
-      // write the executables
-      for (var _iterator4 = deps, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref7 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref7 = _i4.value;
-        }
-
-        const _ref6 = _ref7;
-        const dep = _ref6.dep,
-              loc = _ref6.loc;
-
-        if (dep._reference && dep._reference.locations.length) {
-          invariant(!dep._reference.isPlugnplay, "Plug'n'play packages should not be referenced here");
-          yield _this.linkSelfDependencies(dep, loc, dir);
-        }
-      }
-    })();
-  }
-
-  //find the installation location of ref that would be used in binLoc based on node module resolution
-  findNearestInstalledVersionOfPackage(pkg, binLoc) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const ref = pkg._reference;
-      invariant(ref, 'expected pkg reference for ' + pkg.name);
-      const moduleFolder = _this2.config.getFolder(pkg);
-      yield (_fs || _load_fs()).mkdirp(binLoc);
-      const realBinLoc = yield (_fs || _load_fs()).realpath(binLoc);
-
-      const allLocations = [...ref.locations];
-      const realLocations = yield Promise.all(ref.locations.map(function (loc) {
-        return (_fs || _load_fs()).realpath(loc);
-      }));
-      realLocations.forEach(function (loc) {
-        return allLocations.indexOf(loc) !== -1 || allLocations.push(loc);
-      });
-
-      const locationBinLocPairs = allLocations.map(function (loc) {
-        return [loc, binLoc];
-      });
-      if (binLoc !== realBinLoc) {
-        locationBinLocPairs.push(...allLocations.map(function (loc) {
-          return [loc, realBinLoc];
-        }));
-      }
-
-      const distancePairs = locationBinLocPairs.map(function ([loc, curBinLoc]) {
-        let distance = 0;
-        let curLoc = curBinLoc;
-        let notFound = false;
-
-        while (path.join(curLoc, ref.name) !== loc && path.join(curLoc, moduleFolder, ref.name) !== loc) {
-          const next = path.dirname(curLoc);
-          if (curLoc === next) {
-            notFound = true;
-            break;
-          }
-
-          distance++;
-          curLoc = next;
-        }
-        return notFound ? null : [loc, distance];
-      });
-
-      //remove items where path was not found
-      const filteredDistancePairs = distancePairs.filter(function (d) {
-        return d;
-      });
-      filteredDistancePairs;
-
-      invariant(filteredDistancePairs.length > 0, `could not find a copy of ${pkg.name} to link in ${binLoc}`);
-
-      //get smallest distance from package location
-      const minItem = filteredDistancePairs.reduce(function (min, cur) {
-        return cur[1] < min[1] ? cur : min;
-      });
-
-      invariant(minItem[1] >= 0, 'could not find a target for bin dir of ' + minItem.toString());
-      return minItem[0];
-    })();
-  }
-
-  getFlatHoistedTree(patterns, workspaceLayout, { ignoreOptional } = {}) {
-    const hoister = new (_packageHoister || _load_packageHoister()).default(this.config, this.resolver, { ignoreOptional, workspaceLayout });
-    hoister.seed(patterns);
-    if (this.config.focus) {
-      hoister.markShallowWorkspaceEntries();
-    }
-    return hoister.init();
-  }
-
-  copyModules(patterns, workspaceLayout, { linkDuplicates, ignoreOptional } = {}) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let flatTree = _this3.getFlatHoistedTree(patterns, workspaceLayout, { ignoreOptional });
-      // sorted tree makes file creation and copying not to interfere with each other
-      flatTree = flatTree.sort(function (dep1, dep2) {
-        return dep1[0].localeCompare(dep2[0]);
-      });
-
-      // list of artifacts in modules to remove from extraneous removal
-      const artifactFiles = [];
-
-      const copyQueue = new Map();
-      const hardlinkQueue = new Map();
-      const hardlinksEnabled = linkDuplicates && (yield (_fs || _load_fs()).hardlinksWork(_this3.config.cwd));
-
-      const copiedSrcs = new Map();
-      const symlinkPaths = new Map();
-      for (var _iterator5 = flatTree, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref9;
-
-        if (_isArray5) {
-          if (_i5 >= _iterator5.length) break;
-          _ref9 = _iterator5[_i5++];
-        } else {
-          _i5 = _iterator5.next();
-          if (_i5.done) break;
-          _ref9 = _i5.value;
-        }
-
-        const _ref8 = _ref9;
-        const folder = _ref8[0];
-        var _ref8$ = _ref8[1];
-        const pkg = _ref8$.pkg;
-        const loc = _ref8$.loc;
-        const isShallow = _ref8$.isShallow;
-
-        const remote = pkg._remote || { type: '' };
-        const ref = pkg._reference;
-        let dest = folder;
-        invariant(ref, 'expected package reference');
-
-        let src = loc;
-        let type = '';
-        if (remote.type === 'link') {
-          // replace package source from incorrect cache location (workspaces and link: are not cached)
-          // with a symlink source
-          src = remote.reference;
-          type = 'symlink';
-        } else if (workspaceLayout && remote.type === 'workspace' && !isShallow) {
-          src = remote.reference;
-          type = 'symlink';
-          // to get real path for non hoisted dependencies
-          symlinkPaths.set(dest, src);
-        } else {
-          // backwards compatibility: get build artifacts from metadata
-          // does not apply to symlinked dependencies
-          const metadata = yield _this3.config.readPackageMetadata(src);
-          for (var _iterator15 = metadata.artifacts, _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) {
-            var _ref23;
-
-            if (_isArray15) {
-              if (_i15 >= _iterator15.length) break;
-              _ref23 = _iterator15[_i15++];
-            } else {
-              _i15 = _iterator15.next();
-              if (_i15.done) break;
-              _ref23 = _i15.value;
-            }
-
-            const file = _ref23;
-
-            artifactFiles.push(path.join(dest, file));
-          }
-        }
-
-        for (var _iterator16 = symlinkPaths.entries(), _isArray16 = Array.isArray(_iterator16), _i16 = 0, _iterator16 = _isArray16 ? _iterator16 : _iterator16[Symbol.iterator]();;) {
-          var _ref25;
-
-          if (_isArray16) {
-            if (_i16 >= _iterator16.length) break;
-            _ref25 = _iterator16[_i16++];
-          } else {
-            _i16 = _iterator16.next();
-            if (_i16.done) break;
-            _ref25 = _i16.value;
-          }
-
-          const _ref24 = _ref25;
-          const symlink = _ref24[0];
-          const realpath = _ref24[1];
-
-          if (dest.indexOf(symlink + path.sep) === 0) {
-            // after hoisting we end up with this structure
-            // root/node_modules/workspace-package(symlink)/node_modules/package-a
-            // fs.copy operations can't copy files through a symlink, so all the paths under workspace-package
-            // need to be replaced with a real path, except for the symlink root/node_modules/workspace-package
-            dest = dest.replace(symlink, realpath);
-          }
-        }
-
-        if (_this3.config.plugnplayEnabled) {
-          ref.isPlugnplay = true;
-          if (yield _this3._isUnplugged(pkg, ref)) {
-            dest = _this3.config.generatePackageUnpluggedPath(ref);
-
-            // We don't skip the copy if the unplugged package isn't materialized yet
-            if (yield (_fs || _load_fs()).exists(dest)) {
-              ref.addLocation(dest);
-              continue;
-            }
-          } else {
-            ref.addLocation(src);
-            continue;
-          }
-        }
-
-        ref.addLocation(dest);
-
-        const integrityArtifacts = _this3.artifacts[`${pkg.name}@${pkg.version}`];
-        if (integrityArtifacts) {
-          for (var _iterator17 = integrityArtifacts, _isArray17 = Array.isArray(_iterator17), _i17 = 0, _iterator17 = _isArray17 ? _iterator17 : _iterator17[Symbol.iterator]();;) {
-            var _ref26;
-
-            if (_isArray17) {
-              if (_i17 >= _iterator17.length) break;
-              _ref26 = _iterator17[_i17++];
-            } else {
-              _i17 = _iterator17.next();
-              if (_i17.done) break;
-              _ref26 = _i17.value;
-            }
-
-            const file = _ref26;
-
-            artifactFiles.push(path.join(dest, file));
-          }
-        }
-
-        const copiedDest = copiedSrcs.get(src);
-        if (!copiedDest) {
-          // no point to hardlink to a symlink
-          if (hardlinksEnabled && type !== 'symlink') {
-            copiedSrcs.set(src, dest);
-          }
-          copyQueue.set(dest, {
-            src,
-            dest,
-            type,
-            onFresh() {
-              if (ref) {
-                ref.setFresh(true);
-              }
-            }
-          });
-        } else {
-          hardlinkQueue.set(dest, {
-            src: copiedDest,
-            dest,
-            onFresh() {
-              if (ref) {
-                ref.setFresh(true);
-              }
-            }
-          });
-        }
-      }
-
-      const possibleExtraneous = new Set();
-      const scopedPaths = new Set();
-
-      const findExtraneousFiles = (() => {
-        var _ref10 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (basePath) {
-          for (var _iterator6 = _this3.config.registryFolders, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-            var _ref11;
-
-            if (_isArray6) {
-              if (_i6 >= _iterator6.length) break;
-              _ref11 = _iterator6[_i6++];
-            } else {
-              _i6 = _iterator6.next();
-              if (_i6.done) break;
-              _ref11 = _i6.value;
-            }
-
-            const folder = _ref11;
-
-            const loc = path.resolve(basePath, folder);
-
-            if (yield (_fs || _load_fs()).exists(loc)) {
-              const files = yield (_fs || _load_fs()).readdir(loc);
-
-              for (var _iterator7 = files, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-                var _ref12;
-
-                if (_isArray7) {
-                  if (_i7 >= _iterator7.length) break;
-                  _ref12 = _iterator7[_i7++];
-                } else {
-                  _i7 = _iterator7.next();
-                  if (_i7.done) break;
-                  _ref12 = _i7.value;
-                }
-
-                const file = _ref12;
-
-                const filepath = path.join(loc, file);
-
-                // it's a scope, not a package
-                if (file[0] === '@') {
-                  scopedPaths.add(filepath);
-
-                  for (var _iterator8 = yield (_fs || _load_fs()).readdir(filepath), _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-                    var _ref13;
-
-                    if (_isArray8) {
-                      if (_i8 >= _iterator8.length) break;
-                      _ref13 = _iterator8[_i8++];
-                    } else {
-                      _i8 = _iterator8.next();
-                      if (_i8.done) break;
-                      _ref13 = _i8.value;
-                    }
-
-                    const subfile = _ref13;
-
-                    possibleExtraneous.add(path.join(filepath, subfile));
-                  }
-                } else if (file[0] === '.' && file !== '.bin') {
-                  if (!(yield (_fs || _load_fs()).lstat(filepath)).isDirectory()) {
-                    possibleExtraneous.add(filepath);
-                  }
-                } else {
-                  possibleExtraneous.add(filepath);
-                }
-              }
-            }
-          }
-        });
-
-        return function findExtraneousFiles(_x3) {
-          return _ref10.apply(this, arguments);
-        };
-      })();
-
-      yield findExtraneousFiles(_this3.config.lockfileFolder);
-      if (workspaceLayout) {
-        for (var _iterator9 = Object.keys(workspaceLayout.workspaces), _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-          var _ref14;
-
-          if (_isArray9) {
-            if (_i9 >= _iterator9.length) break;
-            _ref14 = _iterator9[_i9++];
-          } else {
-            _i9 = _iterator9.next();
-            if (_i9.done) break;
-            _ref14 = _i9.value;
-          }
-
-          const workspaceName = _ref14;
-
-          yield findExtraneousFiles(workspaceLayout.workspaces[workspaceName].loc);
-        }
-      }
-
-      // If an Extraneous is an entry created via "yarn link", we prevent it from being overwritten.
-      // Unfortunately, the only way we can know if they have been created this way is to check if they
-      // are symlinks - problem is that it then conflicts with the newly introduced "link:" protocol,
-      // which also creates symlinks :( a somewhat weak fix is to check if the symlink target is registered
-      // inside the linkFolder, in which case we assume it has been created via "yarn link". Otherwise, we
-      // assume it's a link:-managed dependency, and overwrite it as usual.
-      const linkTargets = new Map();
-
-      let linkedModules;
-      try {
-        linkedModules = yield (_fs || _load_fs()).readdir(_this3.config.linkFolder);
-      } catch (err) {
-        if (err.code === 'ENOENT') {
-          linkedModules = [];
-        } else {
-          throw err;
-        }
-      }
-
-      // TODO: Consolidate this logic with `this.config.linkedModules` logic
-      for (var _iterator10 = linkedModules, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-        var _ref15;
-
-        if (_isArray10) {
-          if (_i10 >= _iterator10.length) break;
-          _ref15 = _iterator10[_i10++];
-        } else {
-          _i10 = _iterator10.next();
-          if (_i10.done) break;
-          _ref15 = _i10.value;
-        }
-
-        const entry = _ref15;
-
-        const entryPath = path.join(_this3.config.linkFolder, entry);
-        const stat = yield (_fs || _load_fs()).lstat(entryPath);
-
-        if (stat.isSymbolicLink()) {
-          try {
-            const entryTarget = yield (_fs || _load_fs()).realpath(entryPath);
-            linkTargets.set(entry, entryTarget);
-          } catch (err) {
-            _this3.reporter.warn(_this3.reporter.lang('linkTargetMissing', entry));
-            yield (_fs || _load_fs()).unlink(entryPath);
-          }
-        } else if (stat.isDirectory() && entry[0] === '@') {
-          // if the entry is directory beginning with '@', then we're dealing with a package scope, which
-          // means we must iterate inside to retrieve the package names it contains
-          const scopeName = entry;
-
-          for (var _iterator18 = yield (_fs || _load_fs()).readdir(entryPath), _isArray18 = Array.isArray(_iterator18), _i18 = 0, _iterator18 = _isArray18 ? _iterator18 : _iterator18[Symbol.iterator]();;) {
-            var _ref27;
-
-            if (_isArray18) {
-              if (_i18 >= _iterator18.length) break;
-              _ref27 = _iterator18[_i18++];
-            } else {
-              _i18 = _iterator18.next();
-              if (_i18.done) break;
-              _ref27 = _i18.value;
-            }
-
-            const entry2 = _ref27;
-
-            const entryPath2 = path.join(entryPath, entry2);
-            const stat2 = yield (_fs || _load_fs()).lstat(entryPath2);
-
-            if (stat2.isSymbolicLink()) {
-              const packageName = `${scopeName}/${entry2}`;
-              try {
-                const entryTarget = yield (_fs || _load_fs()).realpath(entryPath2);
-                linkTargets.set(packageName, entryTarget);
-              } catch (err) {
-                _this3.reporter.warn(_this3.reporter.lang('linkTargetMissing', packageName));
-                yield (_fs || _load_fs()).unlink(entryPath2);
-              }
-            }
-          }
-        }
-      }
-
-      for (var _iterator11 = possibleExtraneous, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-        var _ref16;
-
-        if (_isArray11) {
-          if (_i11 >= _iterator11.length) break;
-          _ref16 = _iterator11[_i11++];
-        } else {
-          _i11 = _iterator11.next();
-          if (_i11.done) break;
-          _ref16 = _i11.value;
-        }
-
-        const loc = _ref16;
-
-        let packageName = path.basename(loc);
-        const scopeName = path.basename(path.dirname(loc));
-
-        if (scopeName[0] === `@`) {
-          packageName = `${scopeName}/${packageName}`;
-        }
-
-        if ((yield (_fs || _load_fs()).lstat(loc)).isSymbolicLink() && linkTargets.has(packageName) && linkTargets.get(packageName) === (yield (_fs || _load_fs()).realpath(loc))) {
-          possibleExtraneous.delete(loc);
-          copyQueue.delete(loc);
-        }
-      }
-
-      //
-      let tick;
-      yield (_fs || _load_fs()).copyBulk(Array.from(copyQueue.values()), _this3.reporter, {
-        possibleExtraneous,
-        artifactFiles,
-
-        ignoreBasenames: [(_constants || _load_constants()).METADATA_FILENAME, (_constants || _load_constants()).TARBALL_FILENAME, '.bin'],
-
-        onStart: function onStart(num) {
-          tick = _this3.reporter.progress(num);
-        },
-
-        onProgress(src) {
-          if (tick) {
-            tick();
-          }
-        }
-      });
-
-      yield (_fs || _load_fs()).hardlinkBulk(Array.from(hardlinkQueue.values()), _this3.reporter, {
-        possibleExtraneous,
-        artifactFiles,
-
-        onStart: function onStart(num) {
-          tick = _this3.reporter.progress(num);
-        },
-
-        onProgress(src) {
-          if (tick) {
-            tick();
-          }
-        }
-      });
-
-      // remove all extraneous files that weren't in the tree
-      for (var _iterator12 = possibleExtraneous, _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) {
-        var _ref17;
-
-        if (_isArray12) {
-          if (_i12 >= _iterator12.length) break;
-          _ref17 = _iterator12[_i12++];
-        } else {
-          _i12 = _iterator12.next();
-          if (_i12.done) break;
-          _ref17 = _i12.value;
-        }
-
-        const loc = _ref17;
-
-        _this3.reporter.verbose(_this3.reporter.lang('verboseFileRemoveExtraneous', loc));
-        yield (_fs || _load_fs()).unlink(loc);
-      }
-
-      // remove any empty scoped directories
-      for (var _iterator13 = scopedPaths, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) {
-        var _ref18;
-
-        if (_isArray13) {
-          if (_i13 >= _iterator13.length) break;
-          _ref18 = _iterator13[_i13++];
-        } else {
-          _i13 = _iterator13.next();
-          if (_i13.done) break;
-          _ref18 = _i13.value;
-        }
-
-        const scopedPath = _ref18;
-
-        const files = yield (_fs || _load_fs()).readdir(scopedPath);
-        if (files.length === 0) {
-          yield (_fs || _load_fs()).unlink(scopedPath);
-        }
-      }
-
-      // create binary links
-      if (_this3.config.getOption('bin-links') && _this3.config.binLinks !== false) {
-        const topLevelDependencies = _this3.determineTopLevelBinLinkOrder(flatTree);
-        const tickBin = _this3.reporter.progress(flatTree.length + topLevelDependencies.length);
-
-        // create links in transient dependencies
-        yield (_promise || _load_promise()).queue(flatTree, (() => {
-          var _ref19 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ([dest, { pkg, isNohoist, parts }]) {
-            if (pkg._reference && pkg._reference.locations.length && !pkg._reference.isPlugnplay) {
-              const binLoc = path.join(dest, _this3.config.getFolder(pkg));
-              yield _this3.linkBinDependencies(pkg, binLoc);
-              if (isNohoist) {
-                // if nohoist, we need to override the binLink to point to the local destination
-                const parentBinLoc = _this3.getParentBinLoc(parts, flatTree);
-                yield _this3.linkSelfDependencies(pkg, dest, parentBinLoc, true);
-              }
-              tickBin();
-            }
-            tickBin();
-          });
-
-          return function (_x4) {
-            return _ref19.apply(this, arguments);
-          };
-        })(), linkBinConcurrency);
-
-        // create links at top level for all dependencies.
-        yield (_promise || _load_promise()).queue(topLevelDependencies, (() => {
-          var _ref20 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ([dest, { pkg }]) {
-            if (pkg._reference && pkg._reference.locations.length && !pkg._reference.isPlugnplay && pkg.bin && Object.keys(pkg.bin).length) {
-              let binLoc;
-              if (_this3.config.modulesFolder) {
-                binLoc = path.join(_this3.config.modulesFolder);
-              } else {
-                binLoc = path.join(_this3.config.lockfileFolder, _this3.config.getFolder(pkg));
-              }
-              yield _this3.linkSelfDependencies(pkg, dest, binLoc);
-            }
-            tickBin();
-          });
-
-          return function (_x5) {
-            return _ref20.apply(this, arguments);
-          };
-        })(), linkBinConcurrency);
-      }
-
-      for (var _iterator14 = flatTree, _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) {
-        var _ref22;
-
-        if (_isArray14) {
-          if (_i14 >= _iterator14.length) break;
-          _ref22 = _iterator14[_i14++];
-        } else {
-          _i14 = _iterator14.next();
-          if (_i14.done) break;
-          _ref22 = _i14.value;
-        }
-
-        const _ref21 = _ref22;
-        const pkg = _ref21[1].pkg;
-
-        yield _this3._warnForMissingBundledDependencies(pkg);
-      }
-    })();
-  }
-
-  _buildTreeHash(flatTree) {
-    const hash = new Map();
-    for (var _iterator19 = flatTree, _isArray19 = Array.isArray(_iterator19), _i19 = 0, _iterator19 = _isArray19 ? _iterator19 : _iterator19[Symbol.iterator]();;) {
-      var _ref29;
-
-      if (_isArray19) {
-        if (_i19 >= _iterator19.length) break;
-        _ref29 = _iterator19[_i19++];
-      } else {
-        _i19 = _iterator19.next();
-        if (_i19.done) break;
-        _ref29 = _i19.value;
-      }
-
-      const _ref28 = _ref29;
-      const dest = _ref28[0];
-      const hoistManifest = _ref28[1];
-
-      const key = hoistManifest.parts.join('#');
-      hash.set(key, [dest, hoistManifest]);
-    }
-    this._treeHash = hash;
-    return hash;
-  }
-
-  getParentBinLoc(parts, flatTree) {
-    const hash = this._treeHash || this._buildTreeHash(flatTree);
-    const parent = parts.slice(0, -1).join('#');
-    const tuple = hash.get(parent);
-    if (!tuple) {
-      throw new Error(`failed to get parent '${parent}' binLoc`);
-    }
-    const dest = tuple[0],
-          hoistManifest = tuple[1];
-
-    const parentBinLoc = path.join(dest, this.config.getFolder(hoistManifest.pkg));
-
-    return parentBinLoc;
-  }
-
-  determineTopLevelBinLinkOrder(flatTree) {
-    const linksToCreate = new Map();
-    for (var _iterator20 = flatTree, _isArray20 = Array.isArray(_iterator20), _i20 = 0, _iterator20 = _isArray20 ? _iterator20 : _iterator20[Symbol.iterator]();;) {
-      var _ref31;
-
-      if (_isArray20) {
-        if (_i20 >= _iterator20.length) break;
-        _ref31 = _iterator20[_i20++];
-      } else {
-        _i20 = _iterator20.next();
-        if (_i20.done) break;
-        _ref31 = _i20.value;
-      }
-
-      const _ref30 = _ref31;
-      const dest = _ref30[0];
-      const hoistManifest = _ref30[1];
-      const pkg = hoistManifest.pkg,
-            isDirectRequire = hoistManifest.isDirectRequire,
-            isNohoist = hoistManifest.isNohoist,
-            isShallow = hoistManifest.isShallow;
-      const name = pkg.name;
-
-      // nohoist and shallow packages should not be linked at topLevel bin
-
-      if (!isNohoist && !isShallow && (isDirectRequire || this.topLevelBinLinking && !linksToCreate.has(name))) {
-        linksToCreate.set(name, [dest, hoistManifest]);
-      }
-    }
-
-    // Sort the array so that direct dependencies will be linked last.
-    // Bin links are overwritten if they already exist, so this will cause direct deps to take precedence.
-    // If someone finds this to be incorrect later, you could also consider sorting descending by
-    //   `linkToCreate.level` which is the dependency tree depth. Direct deps will have level 0 and transitive
-    //   deps will have level > 0.
-    const transientBins = [];
-    const topLevelBins = [];
-    for (var _iterator21 = Array.from(linksToCreate.values()), _isArray21 = Array.isArray(_iterator21), _i21 = 0, _iterator21 = _isArray21 ? _iterator21 : _iterator21[Symbol.iterator]();;) {
-      var _ref32;
-
-      if (_isArray21) {
-        if (_i21 >= _iterator21.length) break;
-        _ref32 = _iterator21[_i21++];
-      } else {
-        _i21 = _iterator21.next();
-        if (_i21.done) break;
-        _ref32 = _i21.value;
-      }
-
-      const linkToCreate = _ref32;
-
-      if (linkToCreate[1].isDirectRequire) {
-        topLevelBins.push(linkToCreate);
-      } else {
-        transientBins.push(linkToCreate);
-      }
-    }
-    return [...transientBins, ...topLevelBins];
-  }
-
-  resolvePeerModules() {
-    for (var _iterator22 = this.resolver.getManifests(), _isArray22 = Array.isArray(_iterator22), _i22 = 0, _iterator22 = _isArray22 ? _iterator22 : _iterator22[Symbol.iterator]();;) {
-      var _ref33;
-
-      if (_isArray22) {
-        if (_i22 >= _iterator22.length) break;
-        _ref33 = _iterator22[_i22++];
-      } else {
-        _i22 = _iterator22.next();
-        if (_i22.done) break;
-        _ref33 = _i22.value;
-      }
-
-      const pkg = _ref33;
-
-      const peerDeps = pkg.peerDependencies;
-      const peerDepsMeta = pkg.peerDependenciesMeta;
-
-      if (!peerDeps) {
-        continue;
-      }
-
-      const ref = pkg._reference;
-      invariant(ref, 'Package reference is missing');
-
-      // TODO: We are taking the "shortest" ref tree but there may be multiple ref trees with the same length
-      const refTree = ref.requests.map(req => req.parentNames).sort((arr1, arr2) => arr1.length - arr2.length)[0];
-
-      const getLevelDistance = pkgRef => {
-        let minDistance = Infinity;
-        for (var _iterator23 = pkgRef.requests, _isArray23 = Array.isArray(_iterator23), _i23 = 0, _iterator23 = _isArray23 ? _iterator23 : _iterator23[Symbol.iterator]();;) {
-          var _ref34;
-
-          if (_isArray23) {
-            if (_i23 >= _iterator23.length) break;
-            _ref34 = _iterator23[_i23++];
-          } else {
-            _i23 = _iterator23.next();
-            if (_i23.done) break;
-            _ref34 = _i23.value;
-          }
-
-          const req = _ref34;
-
-          const distance = refTree.length - req.parentNames.length;
-
-          if (distance >= 0 && distance < minDistance && req.parentNames.every((name, idx) => name === refTree[idx])) {
-            minDistance = distance;
-          }
-        }
-
-        return minDistance;
-      };
-
-      for (const peerDepName in peerDeps) {
-        const range = peerDeps[peerDepName];
-        const meta = peerDepsMeta && peerDepsMeta[peerDepName];
-
-        const isOptional = !!(meta && meta.optional);
-
-        const peerPkgs = this.resolver.getAllInfoForPackageName(peerDepName);
-
-        let peerError = 'unmetPeer';
-        let resolvedLevelDistance = Infinity;
-        let resolvedPeerPkg;
-        for (var _iterator24 = peerPkgs, _isArray24 = Array.isArray(_iterator24), _i24 = 0, _iterator24 = _isArray24 ? _iterator24 : _iterator24[Symbol.iterator]();;) {
-          var _ref35;
-
-          if (_isArray24) {
-            if (_i24 >= _iterator24.length) break;
-            _ref35 = _iterator24[_i24++];
-          } else {
-            _i24 = _iterator24.next();
-            if (_i24.done) break;
-            _ref35 = _i24.value;
-          }
-
-          const peerPkg = _ref35;
-
-          const peerPkgRef = peerPkg._reference;
-          if (!(peerPkgRef && peerPkgRef.patterns)) {
-            continue;
-          }
-          const levelDistance = getLevelDistance(peerPkgRef);
-          if (isFinite(levelDistance) && levelDistance < resolvedLevelDistance) {
-            if (this._satisfiesPeerDependency(range, peerPkgRef.version)) {
-              resolvedLevelDistance = levelDistance;
-              resolvedPeerPkg = peerPkgRef;
-            } else {
-              peerError = 'incorrectPeer';
-            }
-          }
-        }
-
-        if (resolvedPeerPkg) {
-          ref.addDependencies(resolvedPeerPkg.patterns);
-          this.reporter.verbose(this.reporter.lang('selectedPeer', `${pkg.name}@${pkg.version}`, `${peerDepName}@${resolvedPeerPkg.version}`, resolvedPeerPkg.level));
-        } else if (!isOptional) {
-          this.reporter.warn(this.reporter.lang(peerError, `${refTree.join(' > ')} > ${pkg.name}@${pkg.version}`, `${peerDepName}@${range}`));
-        }
-      }
-    }
-  }
-
-  _satisfiesPeerDependency(range, version) {
-    return range === '*' || (0, (_semver || _load_semver()).satisfiesWithPrereleases)(version, range, this.config.looseSemver);
-  }
-
-  _warnForMissingBundledDependencies(pkg) {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const ref = pkg._reference;
-      invariant(ref, 'missing package ref ' + pkg.name);
-
-      if (pkg.bundleDependencies) {
-        for (var _iterator25 = pkg.bundleDependencies, _isArray25 = Array.isArray(_iterator25), _i25 = 0, _iterator25 = _isArray25 ? _iterator25 : _iterator25[Symbol.iterator]();;) {
-          var _ref36;
-
-          if (_isArray25) {
-            if (_i25 >= _iterator25.length) break;
-            _ref36 = _iterator25[_i25++];
-          } else {
-            _i25 = _iterator25.next();
-            if (_i25.done) break;
-            _ref36 = _i25.value;
-          }
-
-          const depName = _ref36;
-
-          const locs = ref.locations.map(function (loc) {
-            return path.join(loc, _this4.config.getFolder(pkg), depName);
-          });
-          const locsExist = yield Promise.all(locs.map(function (loc) {
-            return (_fs || _load_fs()).exists(loc);
-          }));
-          if (locsExist.some(function (e) {
-            return !e;
-          })) {
-            //if any of the locs do not exist
-            const pkgHuman = `${pkg.name}@${pkg.version}`;
-            _this4.reporter.warn(_this4.reporter.lang('missingBundledDependency', pkgHuman, depName));
-          }
-        }
-      }
-    })();
-  }
-
-  _isUnplugged(pkg, ref) {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // If an unplugged folder exists for the specified package, we simply use it
-      if (yield (_fs || _load_fs()).exists(_this5.config.generatePackageUnpluggedPath(ref))) {
-        return true;
-      }
-
-      // If the package has a postinstall script, we also unplug it (otherwise they would run into the cache)
-      if (!_this5.config.ignoreScripts && pkg.scripts && (pkg.scripts.preinstall || pkg.scripts.install || pkg.scripts.postinstall)) {
-        return true;
-      }
-
-      // Check whether the user explicitly requested for the package to be unplugged
-      return _this5.unplugged.some(function (patternToUnplug) {
-        var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(patternToUnplug);
-
-        const name = _normalizePattern.name,
-              range = _normalizePattern.range,
-              hasVersion = _normalizePattern.hasVersion;
-
-        const satisfiesSemver = hasVersion ? semver.satisfies(ref.version, range) : true;
-        return name === ref.name && satisfiesSemver;
-      });
-    })();
-  }
-
-  init(patterns, workspaceLayout, { linkDuplicates, ignoreOptional } = {}) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this6.resolvePeerModules();
-      yield _this6.copyModules(patterns, workspaceLayout, { linkDuplicates, ignoreOptional });
-
-      if (!_this6.config.plugnplayEnabled) {
-        yield (_fs || _load_fs()).unlink(`${_this6.config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`);
-      }
-    })();
-  }
-}
-exports.default = PackageLinker;
-
-/***/ }),
-/* 212 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.clearLine = clearLine;
-exports.toStartOfLine = toStartOfLine;
-exports.writeOnNthLine = writeOnNthLine;
-exports.clearNthLine = clearNthLine;
-
-var _tty;
-
-function _load_tty() {
-  return _tty = _interopRequireDefault(__webpack_require__(104));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const readline = __webpack_require__(197);
-
-var _require = __webpack_require__(30);
-
-const supportsColor = _require.supportsColor;
-
-
-const CLEAR_WHOLE_LINE = 0;
-const CLEAR_RIGHT_OF_CURSOR = 1;
-
-function clearLine(stdout) {
-  if (!supportsColor) {
-    if (stdout instanceof (_tty || _load_tty()).default.WriteStream) {
-      if (stdout.columns > 0) {
-        stdout.write(`\r${' '.repeat(stdout.columns - 1)}`);
-      }
-      stdout.write(`\r`);
-    }
-    return;
-  }
-
-  readline.clearLine(stdout, CLEAR_WHOLE_LINE);
-  readline.cursorTo(stdout, 0);
-}
-
-function toStartOfLine(stdout) {
-  if (!supportsColor) {
-    stdout.write('\r');
-    return;
-  }
-
-  readline.cursorTo(stdout, 0);
-}
-
-function writeOnNthLine(stdout, n, msg) {
-  if (!supportsColor) {
-    return;
-  }
-
-  if (n == 0) {
-    readline.cursorTo(stdout, 0);
-    stdout.write(msg);
-    readline.clearLine(stdout, CLEAR_RIGHT_OF_CURSOR);
-    return;
-  }
-  readline.cursorTo(stdout, 0);
-  readline.moveCursor(stdout, 0, -n);
-  stdout.write(msg);
-  readline.clearLine(stdout, CLEAR_RIGHT_OF_CURSOR);
-  readline.cursorTo(stdout, 0);
-  readline.moveCursor(stdout, 0, n);
-}
-
-function clearNthLine(stdout, n) {
-  if (!supportsColor) {
-    return;
-  }
-
-  if (n == 0) {
-    clearLine(stdout);
-    return;
-  }
-  readline.cursorTo(stdout, 0);
-  readline.moveCursor(stdout, 0, -n);
-  readline.clearLine(stdout, CLEAR_WHOLE_LINE);
-  readline.moveCursor(stdout, 0, n);
-}
-
-/***/ }),
-/* 213 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _baseReporter;
-
-function _load_baseReporter() {
-  return _baseReporter = _interopRequireDefault(__webpack_require__(108));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class JSONReporter extends (_baseReporter || _load_baseReporter()).default {
-  constructor(opts) {
-    super(opts);
-
-    this._activityId = 0;
-    this._progressId = 0;
-  }
-
-  _dump(type, data, error) {
-    let stdout = this.stdout;
-    if (error) {
-      stdout = this.stderr;
-    }
-    stdout.write(`${JSON.stringify({ type, data })}\n`);
-  }
-
-  _verbose(msg) {
-    this._dump('verbose', msg);
-  }
-
-  list(type, items, hints) {
-    this._dump('list', { type, items, hints });
-  }
-
-  tree(type, trees) {
-    this._dump('tree', { type, trees });
-  }
-
-  step(current, total, message) {
-    this._dump('step', { message, current, total });
-  }
-
-  inspect(value) {
-    this._dump('inspect', value);
-  }
-
-  footer(showPeakMemory) {
-    this._dump('finished', this.getTotalTime());
-  }
-
-  log(msg) {
-    this._dump('log', msg);
-  }
-
-  command(msg) {
-    this._dump('command', msg);
-  }
-
-  table(head, body) {
-    this._dump('table', { head, body });
-  }
-
-  success(msg) {
-    this._dump('success', msg);
-  }
-
-  error(msg) {
-    this._dump('error', msg, true);
-  }
-
-  warn(msg) {
-    this._dump('warning', msg, true);
-  }
-
-  info(msg) {
-    this._dump('info', msg);
-  }
-
-  activitySet(total, workers) {
-    if (!this.isTTY || this.noProgress) {
-      return super.activitySet(total, workers);
-    }
-
-    const id = this._activityId++;
-    this._dump('activitySetStart', { id, total, workers });
-
-    const spinners = [];
-    for (let i = 0; i < workers; i++) {
-      let current = 0;
-      let header = '';
-
-      spinners.push({
-        clear() {},
-        setPrefix(_current, _header) {
-          current = _current;
-          header = _header;
-        },
-        tick: msg => {
-          this._dump('activitySetTick', {
-            id,
-            header,
-            current,
-            worker: i,
-            message: msg
-          });
-        },
-        end() {}
-      });
-    }
-
-    return {
-      spinners,
-      end: () => {
-        this._dump('activitySetEnd', { id });
-      }
-    };
-  }
-
-  activity() {
-    return this._activity({});
-  }
-
-  _activity(data) {
-    if (!this.isTTY || this.noProgress) {
-      return {
-        tick() {},
-        end() {}
-      };
-    }
-
-    const id = this._activityId++;
-    this._dump('activityStart', (0, (_extends2 || _load_extends()).default)({ id }, data));
-
-    return {
-      tick: name => {
-        this._dump('activityTick', { id, name });
-      },
-
-      end: () => {
-        this._dump('activityEnd', { id });
-      }
-    };
-  }
-
-  progress(total) {
-    if (this.noProgress) {
-      return function () {
-        // noop
-      };
-    }
-
-    const id = this._progressId++;
-    let current = 0;
-    this._dump('progressStart', { id, total });
-
-    return () => {
-      current++;
-      this._dump('progressTick', { id, current });
-
-      if (current === total) {
-        this._dump('progressFinish', { id });
-      }
-    };
-  }
-
-  auditAction(recommendation) {
-    this._dump('auditAction', recommendation);
-  }
-
-  auditAdvisory(resolution, auditAdvisory) {
-    this._dump('auditAdvisory', { resolution, advisory: auditAdvisory });
-  }
-
-  auditSummary(auditMetadata) {
-    this._dump('auditSummary', auditMetadata);
-  }
-}
-exports.default = JSONReporter;
-
-/***/ }),
-/* 214 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.shouldUpdateLockfile = undefined;
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-var _minimatch;
-
-function _load_minimatch() {
-  return _minimatch = _interopRequireDefault(__webpack_require__(82));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-var _parsePackagePath;
-
-function _load_parsePackagePath() {
-  return _parsePackagePath = _interopRequireDefault(__webpack_require__(376));
-}
-
-var _parsePackagePath2;
-
-function _load_parsePackagePath2() {
-  return _parsePackagePath2 = __webpack_require__(376);
-}
-
-var _resolvers;
-
-function _load_resolvers() {
-  return _resolvers = __webpack_require__(78);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const DIRECTORY_SEPARATOR = '/';
-const GLOBAL_NESTED_DEP_PATTERN = '**/';
-
-class ResolutionMap {
-  constructor(config) {
-    this.resolutionsByPackage = (0, (_map || _load_map()).default)();
-    this.config = config;
-    this.reporter = config.reporter;
-    this.delayQueue = new Set();
-  }
-
-  init(resolutions = {}) {
-    for (const globPattern in resolutions) {
-      const info = this.parsePatternInfo(globPattern, resolutions[globPattern]);
-
-      if (info) {
-        const resolution = this.resolutionsByPackage[info.name] || [];
-        this.resolutionsByPackage[info.name] = [...resolution, info];
-      }
-    }
-  }
-
-  addToDelayQueue(req) {
-    this.delayQueue.add(req);
-  }
-
-  parsePatternInfo(globPattern, range) {
-    if (!(0, (_parsePackagePath2 || _load_parsePackagePath2()).isValidPackagePath)(globPattern)) {
-      this.reporter.warn(this.reporter.lang('invalidResolutionName', globPattern));
-      return null;
-    }
-
-    const directories = (0, (_parsePackagePath || _load_parsePackagePath()).default)(globPattern);
-    const name = directories.pop();
-
-    if (!(_semver || _load_semver()).default.validRange(range) && !(0, (_resolvers || _load_resolvers()).getExoticResolver)(range)) {
-      this.reporter.warn(this.reporter.lang('invalidResolutionVersion', range));
-      return null;
-    }
-
-    // For legacy support of resolutions, replace `name` with `**/name`
-    if (name === globPattern) {
-      globPattern = `${GLOBAL_NESTED_DEP_PATTERN}${name}`;
-    }
-
-    return {
-      name,
-      range,
-      globPattern,
-      pattern: `${name}@${range}`
-    };
-  }
-
-  find(reqPattern, parentNames) {
-    var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(reqPattern);
-
-    const name = _normalizePattern.name,
-          reqRange = _normalizePattern.range;
-
-    const resolutions = this.resolutionsByPackage[name];
-
-    if (!resolutions) {
-      return '';
-    }
-
-    const modulePath = [...parentNames, name].join(DIRECTORY_SEPARATOR);
-
-    var _ref = resolutions.find(({ globPattern }) => (0, (_minimatch || _load_minimatch()).default)(modulePath, globPattern)) || {};
-
-    const pattern = _ref.pattern,
-          range = _ref.range;
-
-
-    if (pattern) {
-      if ((_semver || _load_semver()).default.validRange(reqRange) && (_semver || _load_semver()).default.valid(range) && !(_semver || _load_semver()).default.satisfies(range, reqRange)) {
-        this.reporter.warn(this.reporter.lang('incompatibleResolutionVersion', pattern, reqPattern));
-      }
-    }
-
-    return pattern;
-  }
-}
-
-exports.default = ResolutionMap;
-const shouldUpdateLockfile = exports.shouldUpdateLockfile = (lockfileEntry, resolutionEntry) => {
-  if (!lockfileEntry || !resolutionEntry) {
-    return false;
-  }
-
-  return lockfileEntry.resolved !== resolutionEntry.remote.resolved;
-};
-
-/***/ }),
-/* 215 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.FILE_PROTOCOL_PREFIX = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _uuid;
-
-function _load_uuid() {
-  return _uuid = _interopRequireDefault(__webpack_require__(119));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = _interopRequireWildcard(__webpack_require__(18));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const FILE_PROTOCOL_PREFIX = exports.FILE_PROTOCOL_PREFIX = 'file:';
-
-class FileResolver extends (_exoticResolver || _load_exoticResolver()).default {
-  constructor(request, fragment) {
-    super(request, fragment);
-    this.loc = (_misc || _load_misc()).removePrefix(fragment, FILE_PROTOCOL_PREFIX);
-  }
-
-  static isVersion(pattern) {
-    return super.isVersion.call(this, pattern) || this.prefixMatcher.test(pattern) || (_path || _load_path()).default.isAbsolute(pattern);
-  }
-
-  resolve() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let loc = _this.loc;
-      if (!(_path || _load_path()).default.isAbsolute(loc)) {
-        loc = (_path || _load_path()).default.resolve(_this.config.lockfileFolder, loc);
-      }
-
-      if (_this.config.linkFileDependencies) {
-        const registry = 'npm';
-        const manifest = { _uid: '', name: '', version: '0.0.0', _registry: registry };
-        manifest._remote = {
-          type: 'link',
-          registry,
-          hash: null,
-          reference: loc
-        };
-        manifest._uid = manifest.version;
-        return manifest;
-      }
-      if (!(yield (_fs || _load_fs()).exists(loc))) {
-        throw new (_errors || _load_errors()).MessageError(_this.reporter.lang('doesntExist', loc, _this.pattern.split('@')[0]));
-      }
-
-      const manifest = yield (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-        try {
-          return yield _this.config.readManifest(loc, _this.registry);
-        } catch (e) {
-          if (e.code === 'ENOENT') {
-            return {
-              // This is just the default, it can be overridden with key of dependencies
-              name: (_path || _load_path()).default.dirname(loc),
-              version: '0.0.0',
-              _uid: '0.0.0',
-              _registry: 'npm'
-            };
-          }
-
-          throw e;
-        }
-      })();
-      const registry = manifest._registry;
-      (0, (_invariant || _load_invariant()).default)(registry, 'expected registry');
-
-      manifest._remote = {
-        type: 'copy',
-        registry,
-        hash: `${(_uuid || _load_uuid()).default.v4()}-${new Date().getTime()}`,
-        reference: loc
-      };
-
-      manifest._uid = manifest.version;
-
-      return manifest;
-    })();
-  }
-}
-exports.default = FileResolver;
-FileResolver.protocol = 'file';
-FileResolver.prefixMatcher = /^\.{1,2}\//;
-
-/***/ }),
-/* 216 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.explodeGistFragment = explodeGistFragment;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _gitResolver;
-
-function _load_gitResolver() {
-  return _gitResolver = _interopRequireDefault(__webpack_require__(124));
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = _interopRequireWildcard(__webpack_require__(18));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function explodeGistFragment(fragment, reporter) {
-  fragment = (_misc || _load_misc()).removePrefix(fragment, 'gist:');
-
-  const parts = fragment.split('#');
-
-  if (parts.length <= 2) {
-    return {
-      id: parts[0],
-      hash: parts[1] || ''
-    };
-  } else {
-    throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidGistFragment', fragment));
-  }
-}
-
-class GistResolver extends (_exoticResolver || _load_exoticResolver()).default {
-
-  constructor(request, fragment) {
-    super(request, fragment);
-
-    var _explodeGistFragment = explodeGistFragment(fragment, this.reporter);
-
-    const id = _explodeGistFragment.id,
-          hash = _explodeGistFragment.hash;
-
-    this.id = id;
-    this.hash = hash;
-  }
-
-  resolve() {
-    return this.fork((_gitResolver || _load_gitResolver()).default, false, `https://gist.github.com/${this.id}.git#${this.hash}`);
-  }
-}
-exports.default = GistResolver;
-GistResolver.protocol = 'gist';
-
-/***/ }),
-/* 217 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _cache;
-
-function _load_cache() {
-  return _cache = __webpack_require__(355);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _registryResolver;
-
-function _load_registryResolver() {
-  return _registryResolver = _interopRequireDefault(__webpack_require__(575));
-}
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _packageNameUtils;
-
-function _load_packageNameUtils() {
-  return _packageNameUtils = __webpack_require__(222);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const inquirer = __webpack_require__(276);
-const tty = __webpack_require__(104);
-const path = __webpack_require__(0);
-const semver = __webpack_require__(22);
-const ssri = __webpack_require__(65);
-
-const NPM_REGISTRY_ID = 'npm';
-
-class NpmResolver extends (_registryResolver || _load_registryResolver()).default {
-
-  static findVersionInRegistryResponse(config, name, range, body, request) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (body.versions && Object.keys(body.versions).length === 0) {
-        throw new (_errors || _load_errors()).MessageError(config.reporter.lang('registryNoVersions', body.name));
-      }
-
-      if (!body['dist-tags'] || !body.versions) {
-        throw new (_errors || _load_errors()).MessageError(config.reporter.lang('malformedRegistryResponse', name));
-      }
-
-      if (range in body['dist-tags']) {
-        range = body['dist-tags'][range];
-      }
-
-      // If the latest tag in the registry satisfies the requested range, then use that.
-      // Otherwise we will fall back to semver maxSatisfying.
-      // This mimics logic in NPM. See issue #3560
-      const latestVersion = body['dist-tags'] ? body['dist-tags'].latest : undefined;
-      if (latestVersion && semver.satisfies(latestVersion, range)) {
-        return body.versions[latestVersion];
-      }
-
-      const satisfied = yield config.resolveConstraints(Object.keys(body.versions), range);
-      if (satisfied) {
-        return body.versions[satisfied];
-      } else if (request && !config.nonInteractive) {
-        if (request.resolver && request.resolver.activity) {
-          request.resolver.activity.end();
-        }
-        config.reporter.log(config.reporter.lang('couldntFindVersionThatMatchesRange', body.name, range));
-        let pageSize;
-        if (process.stdout instanceof tty.WriteStream) {
-          pageSize = process.stdout.rows - 2;
-        }
-        const response = yield inquirer.prompt([{
-          name: 'package',
-          type: 'list',
-          message: config.reporter.lang('chooseVersionFromList', body.name),
-          choices: semver.rsort(Object.keys(body.versions)),
-          pageSize
-        }]);
-        if (response && response.package) {
-          return body.versions[response.package];
-        }
-      }
-      throw new (_errors || _load_errors()).MessageError(config.reporter.lang('couldntFindVersionThatMatchesRange', body.name, range));
-    })();
-  }
-
-  resolveRequest(desiredVersion) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (_this.config.offline) {
-        const res = yield _this.resolveRequestOffline();
-        if (res != null) {
-          return res;
-        }
-      }
-
-      const escapedName = (_npmRegistry || _load_npmRegistry()).default.escapeName(_this.name);
-      const desiredRange = desiredVersion || _this.range;
-      const body = yield _this.config.registries.npm.request(escapedName);
-
-      if (body) {
-        return NpmResolver.findVersionInRegistryResponse(_this.config, escapedName, desiredRange, body, _this.request);
-      } else {
-        return null;
-      }
-    })();
-  }
-
-  resolveRequestOffline() {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const packageDirs = yield _this2.config.getCache('cachedPackages', function () {
-        return (0, (_cache || _load_cache()).getCachedPackagesDirs)(_this2.config, _this2.config.cacheFolder);
-      });
-
-      const versions = (0, (_map || _load_map()).default)();
-
-      for (var _iterator = packageDirs, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const dir = _ref;
-
-        // check if folder contains the registry prefix
-        if (dir.indexOf(`${NPM_REGISTRY_ID}-`) === -1) {
-          continue;
-        }
-
-        // read manifest and validate correct name
-        const pkg = yield _this2.config.readManifest(dir, NPM_REGISTRY_ID);
-        if (pkg.name !== _this2.name) {
-          continue;
-        }
-
-        // read package metadata
-        const metadata = yield _this2.config.readPackageMetadata(dir);
-        if (!metadata.remote) {
-          continue; // old yarn metadata
-        }
-
-        versions[pkg.version] = Object.assign({}, pkg, {
-          _remote: metadata.remote
-        });
-      }
-
-      const satisfied = yield _this2.config.resolveConstraints(Object.keys(versions), _this2.range);
-      if (satisfied) {
-        return versions[satisfied];
-      } else if (!_this2.config.preferOffline) {
-        throw new (_errors || _load_errors()).MessageError(_this2.reporter.lang('couldntFindPackageInCache', _this2.name, _this2.range, Object.keys(versions).join(', ')));
-      } else {
-        return null;
-      }
-    })();
-  }
-
-  cleanRegistry(url) {
-    if (this.config.getOption('registry') === (_constants || _load_constants()).YARN_REGISTRY) {
-      return url.replace((_constants || _load_constants()).NPM_REGISTRY_RE, (_constants || _load_constants()).YARN_REGISTRY);
-    } else {
-      return url;
-    }
-  }
-
-  resolve() {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // lockfile
-      const shrunk = _this3.request.getLocked('tarball');
-      if (shrunk) {
-        if (_this3.config.packBuiltPackages && shrunk.prebuiltVariants && shrunk._remote) {
-          const prebuiltVariants = shrunk.prebuiltVariants;
-          const prebuiltName = (0, (_packageNameUtils || _load_packageNameUtils()).getPlatformSpecificPackageFilename)(shrunk);
-          const offlineMirrorPath = _this3.config.getOfflineMirrorPath();
-          if (prebuiltVariants[prebuiltName] && offlineMirrorPath) {
-            const filename = path.join(offlineMirrorPath, 'prebuilt', prebuiltName + '.tgz');
-            const _remote = shrunk._remote;
-
-            if (_remote && (yield (_fs || _load_fs()).exists(filename))) {
-              _remote.reference = `file:${filename}`;
-              _remote.hash = prebuiltVariants[prebuiltName];
-              _remote.integrity = ssri.fromHex(_remote.hash, 'sha1').toString();
-            }
-          }
-        }
-      }
-      if (shrunk && shrunk._remote && (shrunk._remote.integrity || _this3.config.offline || !_this3.config.autoAddIntegrity)) {
-        // if the integrity field does not exist, we're not network-restricted, and the
-        // migration hasn't been disabled, it needs to be created
-        return shrunk;
-      }
-
-      const desiredVersion = shrunk && shrunk.version ? shrunk.version : null;
-      const info = yield _this3.resolveRequest(desiredVersion);
-      if (info == null) {
-        throw new (_errors || _load_errors()).MessageError(_this3.reporter.lang('packageNotFoundRegistry', _this3.name, NPM_REGISTRY_ID));
-      }
-
-      const deprecated = info.deprecated,
-            dist = info.dist;
-
-      if (shrunk && shrunk._remote) {
-        shrunk._remote.integrity = dist && dist.integrity ? ssri.parse(dist.integrity) : ssri.fromHex(dist && dist.shasum ? dist.shasum : '', 'sha1');
-        return shrunk;
-      }
-
-      if (typeof deprecated === 'string') {
-        let human = `${info.name}@${info.version}`;
-        const parentNames = _this3.request.parentNames;
-        if (parentNames.length) {
-          human = parentNames.concat(human).join(' > ');
-        }
-        _this3.reporter.warn(`${human}: ${deprecated}`);
-      }
-
-      if (dist != null && dist.tarball) {
-        info._remote = {
-          resolved: `${_this3.cleanRegistry(dist.tarball)}#${dist.shasum}`,
-          type: 'tarball',
-          reference: _this3.cleanRegistry(dist.tarball),
-          hash: dist.shasum,
-          integrity: dist.integrity ? ssri.parse(dist.integrity) : ssri.fromHex(dist.shasum, 'sha1'),
-          registry: NPM_REGISTRY_ID,
-          packageName: info.name
-        };
-      }
-
-      info._uid = info.version;
-
-      return info;
-    })();
-  }
-}
-exports.default = NpmResolver;
-NpmResolver.registry = NPM_REGISTRY_ID;
-
-/***/ }),
-/* 218 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fileDatesEqual = exports.copyFile = exports.unlink = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-// We want to preserve file timestamps when copying a file, since yarn uses them to decide if a file has
-// changed compared to the cache.
-// There are some OS specific cases here:
-// * On linux, fs.copyFile does not preserve timestamps, but does on OSX and Win.
-// * On windows, you must open a file with write permissions to call `fs.futimes`.
-// * On OSX you can open with read permissions and still call `fs.futimes`.
-let fixTimes = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (fd, dest, data) {
-    const doOpen = fd === undefined;
-    let openfd = fd ? fd : -1;
-
-    if (disableTimestampCorrection === undefined) {
-      // if timestamps match already, no correction is needed.
-      // the need to correct timestamps varies based on OS and node versions.
-      const destStat = yield lstat(dest);
-      disableTimestampCorrection = fileDatesEqual(destStat.mtime, data.mtime);
-    }
-
-    if (disableTimestampCorrection) {
-      return;
-    }
-
-    if (doOpen) {
-      try {
-        openfd = yield open(dest, 'a', data.mode);
-      } catch (er) {
-        // file is likely read-only
-        try {
-          openfd = yield open(dest, 'r', data.mode);
-        } catch (err) {
-          // We can't even open this file for reading.
-          return;
-        }
-      }
-    }
-
-    try {
-      if (openfd) {
-        yield futimes(openfd, data.atime, data.mtime);
-      }
-    } catch (er) {
-      // If `futimes` throws an exception, we probably have a case of a read-only file on Windows.
-      // In this case we can just return. The incorrect timestamp will just cause that file to be recopied
-      // on subsequent installs, which will effect yarn performance but not break anything.
-    } finally {
-      if (doOpen && openfd) {
-        yield close(openfd);
-      }
-    }
-  });
-
-  return function fixTimes(_x7, _x8, _x9) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-// Compare file timestamps.
-// Some versions of Node on windows zero the milliseconds when utime is used.
-
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireDefault(__webpack_require__(5));
-}
-
-var _promise;
-
-function _load_promise() {
-  return _promise = __webpack_require__(50);
-}
-
-var _fs2;
-
-function _load_fs2() {
-  return _fs2 = __webpack_require__(4);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-let disableTimestampCorrection = undefined; // OS dependent. will be detected on first file copy.
-
-// This module serves as a wrapper for file operations that are inconsistant across node and OS versions.
-
-const readFileBuffer = (0, (_promise || _load_promise()).promisify)((_fs || _load_fs()).default.readFile);
-const close = (0, (_promise || _load_promise()).promisify)((_fs || _load_fs()).default.close);
-const lstat = (0, (_promise || _load_promise()).promisify)((_fs || _load_fs()).default.lstat);
-const open = (0, (_promise || _load_promise()).promisify)((_fs || _load_fs()).default.open);
-const futimes = (0, (_promise || _load_promise()).promisify)((_fs || _load_fs()).default.futimes);
-
-const write = (0, (_promise || _load_promise()).promisify)((_fs || _load_fs()).default.write);
-
-const unlink = exports.unlink = (0, (_promise || _load_promise()).promisify)(__webpack_require__(307));
-
-/**
- * Unlinks the destination to force a recreation. This is needed on case-insensitive file systems
- * to force the correct naming when the filename has changed only in character-casing. (Jest -> jest).
- */
-const copyFile = exports.copyFile = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (data, cleanup) {
-    // $FlowFixMe: Flow doesn't currently support COPYFILE_FICLONE
-    const ficloneFlag = (_fs2 || _load_fs2()).constants.COPYFILE_FICLONE || 0;
-    try {
-      yield unlink(data.dest);
-      yield copyFilePoly(data.src, data.dest, ficloneFlag, data);
-    } finally {
-      if (cleanup) {
-        cleanup();
-      }
-    }
-  });
-
-  return function copyFile(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-// Node 8.5.0 introduced `fs.copyFile` which is much faster, so use that when available.
-// Otherwise we fall back to reading and writing files as buffers.
-const copyFilePoly = (src, dest, flags, data) => {
-  if ((_fs || _load_fs()).default.copyFile) {
-    return new Promise((resolve, reject) => (_fs || _load_fs()).default.copyFile(src, dest, flags, err => {
-      if (err) {
-        reject(err);
-      } else {
-        fixTimes(undefined, dest, data).then(() => resolve()).catch(ex => reject(ex));
-      }
-    }));
-  } else {
-    return copyWithBuffer(src, dest, flags, data);
-  }
-};
-
-const copyWithBuffer = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (src, dest, flags, data) {
-    // Use open -> write -> futimes -> close sequence to avoid opening the file twice:
-    // one with writeFile and one with utimes
-    const fd = yield open(dest, 'w', data.mode);
-    try {
-      const buffer = yield readFileBuffer(src);
-      yield write(fd, buffer, 0, buffer.length);
-      yield fixTimes(fd, dest, data);
-    } finally {
-      yield close(fd);
-    }
-  });
-
-  return function copyWithBuffer(_x3, _x4, _x5, _x6) {
-    return _ref2.apply(this, arguments);
-  };
-})();const fileDatesEqual = exports.fileDatesEqual = (a, b) => {
-  const aTime = a.getTime();
-  const bTime = b.getTime();
-
-  if (process.platform !== 'win32') {
-    return aTime === bTime;
-  }
-
-  // See https://github.com/nodejs/node/pull/12607
-  // Submillisecond times from stat and utimes are truncated on Windows,
-  // causing a file with mtime 8.0079998 and 8.0081144 to become 8.007 and 8.008
-  // and making it impossible to update these files to their correct timestamps.
-  if (Math.abs(aTime - bTime) <= 1) {
-    return true;
-  }
-
-  const aTimeSec = Math.floor(aTime / 1000);
-  const bTimeSec = Math.floor(bTime / 1000);
-
-  // See https://github.com/nodejs/node/issues/2069
-  // Some versions of Node on windows zero the milliseconds when utime is used
-  // So if any of the time has a milliseconds part of zero we suspect that the
-  // bug is present and compare only seconds.
-  if (aTime - aTimeSec * 1000 === 0 || bTime - bTimeSec * 1000 === 0) {
-    return aTimeSec === bTimeSec;
-  }
-
-  return aTime === bTime;
-};
-
-/***/ }),
-/* 219 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _string_decoder;
-
-function _load_string_decoder() {
-  return _string_decoder = __webpack_require__(333);
-}
-
-var _tarFs;
-
-function _load_tarFs() {
-  return _tarFs = _interopRequireDefault(__webpack_require__(193));
-}
-
-var _tarStream;
-
-function _load_tarStream() {
-  return _tarStream = _interopRequireDefault(__webpack_require__(460));
-}
-
-var _url;
-
-function _load_url() {
-  return _url = _interopRequireDefault(__webpack_require__(24));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = __webpack_require__(5);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _gitSpawn;
-
-function _load_gitSpawn() {
-  return _gitSpawn = __webpack_require__(373);
-}
-
-var _gitRefResolver;
-
-function _load_gitRefResolver() {
-  return _gitRefResolver = __webpack_require__(581);
-}
-
-var _crypto;
-
-function _load_crypto() {
-  return _crypto = _interopRequireWildcard(__webpack_require__(168));
-}
-
-var _fs2;
-
-function _load_fs2() {
-  return _fs2 = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const GIT_PROTOCOL_PREFIX = 'git+';
-
-const SSH_PROTOCOL = 'ssh:';
-const SCP_PATH_PREFIX = '/:';
-const FILE_PROTOCOL = 'file:';
-const GIT_VALID_REF_LINE_REGEXP = /^([a-fA-F0-9]+|ref)/;
-
-const validRef = line => {
-  return GIT_VALID_REF_LINE_REGEXP.exec(line);
-};
-
-const supportsArchiveCache = (0, (_map || _load_map()).default)({
-  'github.com': false // not support, doubt they will ever support it
-});
-
-const handleSpawnError = err => {
-  if (err instanceof (_errors || _load_errors()).ProcessSpawnError) {
-    throw err;
-  }
-};
-
-const SHORTHAND_SERVICES = (0, (_map || _load_map()).default)({
-  'github:': parsedUrl => (0, (_extends2 || _load_extends()).default)({}, parsedUrl, {
-    slashes: true,
-    auth: 'git',
-    protocol: SSH_PROTOCOL,
-    host: 'github.com',
-    hostname: 'github.com',
-    pathname: `/${parsedUrl.hostname}${parsedUrl.pathname}`
-  }),
-  'bitbucket:': parsedUrl => (0, (_extends2 || _load_extends()).default)({}, parsedUrl, {
-    slashes: true,
-    auth: 'git',
-    protocol: SSH_PROTOCOL,
-    host: 'bitbucket.com',
-    hostname: 'bitbucket.com',
-    pathname: `/${parsedUrl.hostname}${parsedUrl.pathname}`
-  })
-});
-
-class Git {
-  constructor(config, gitUrl, hash) {
-    this.supportsArchive = false;
-    this.fetched = false;
-    this.config = config;
-    this.reporter = config.reporter;
-    this.hash = hash;
-    this.ref = hash;
-    this.gitUrl = gitUrl;
-    this.cwd = this.config.getTemp((_crypto || _load_crypto()).hash(this.gitUrl.repository));
-  }
-
-  /**
-   * npm URLs contain a 'git+' scheme prefix, which is not understood by git.
-   * git "URLs" also allow an alternative scp-like syntax, so they're not standard URLs.
-   */
-  static npmUrlToGitUrl(npmUrl) {
-    npmUrl = (0, (_misc || _load_misc()).removePrefix)(npmUrl, GIT_PROTOCOL_PREFIX);
-
-    let parsed = (_url || _load_url()).default.parse(npmUrl);
-    const expander = parsed.protocol && SHORTHAND_SERVICES[parsed.protocol];
-
-    if (expander) {
-      parsed = expander(parsed);
-    }
-
-    // Special case in npm, where ssh:// prefix is stripped to pass scp-like syntax
-    // which in git works as remote path only if there are no slashes before ':'.
-    // See #3146.
-    if (parsed.protocol === SSH_PROTOCOL && parsed.hostname && parsed.path && parsed.path.startsWith(SCP_PATH_PREFIX) && parsed.port === null) {
-      const auth = parsed.auth ? parsed.auth + '@' : '';
-      const pathname = parsed.path.slice(SCP_PATH_PREFIX.length);
-      return {
-        hostname: parsed.hostname,
-        protocol: parsed.protocol,
-        repository: `${auth}${parsed.hostname}:${pathname}`
-      };
-    }
-
-    // git local repos are specified as `git+file:` and a filesystem path, not a url.
-    let repository;
-    if (parsed.protocol === FILE_PROTOCOL) {
-      repository = parsed.path;
-    } else {
-      repository = (_url || _load_url()).default.format((0, (_extends2 || _load_extends()).default)({}, parsed, { hash: '' }));
-    }
-
-    return {
-      hostname: parsed.hostname || null,
-      protocol: parsed.protocol || FILE_PROTOCOL,
-      repository: repository || ''
-    };
-  }
-
-  /**
-   * Check if the host specified in the input `gitUrl` has archive capability.
-   */
-
-  static hasArchiveCapability(ref) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const hostname = ref.hostname;
-      if (ref.protocol !== 'ssh:' || hostname == null) {
-        return false;
-      }
-
-      if (hostname in supportsArchiveCache) {
-        return supportsArchiveCache[hostname];
-      }
-
-      try {
-        yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['archive', `--remote=${ref.repository}`, 'HEAD', Date.now() + '']);
-        throw new Error();
-      } catch (err) {
-        handleSpawnError(err);
-        const supports = err.message.indexOf('did not match any files') >= 0;
-        return supportsArchiveCache[hostname] = supports;
-      }
-    })();
-  }
-
-  /**
-   * Check if the input `target` is a 5-40 character hex commit hash.
-   */
-
-  static repoExists(ref) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const isLocal = ref.protocol === FILE_PROTOCOL;
-
-      try {
-        if (isLocal) {
-          yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['show-ref', '-t'], { cwd: ref.repository });
-        } else {
-          yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['ls-remote', '-t', ref.repository]);
-        }
-        return true;
-      } catch (err) {
-        handleSpawnError(err);
-        return false;
-      }
-    })();
-  }
-
-  static replaceProtocol(ref, protocol) {
-    return {
-      hostname: ref.hostname,
-      protocol,
-      repository: ref.repository.replace(/^(?:git|http):/, protocol)
-    };
-  }
-
-  /**
-   * Attempt to upgrade insecure protocols to secure protocol
-   */
-  static secureGitUrl(ref, hash, reporter) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if ((0, (_gitRefResolver || _load_gitRefResolver()).isCommitSha)(hash)) {
-        // this is cryptographically secure
-        return ref;
-      }
-
-      if (ref.protocol === 'git:') {
-        const secureUrl = Git.replaceProtocol(ref, 'https:');
-        if (yield Git.repoExists(secureUrl)) {
-          return secureUrl;
-        } else {
-          reporter.warn(reporter.lang('downloadGitWithoutCommit', ref.repository));
-          return ref;
-        }
-      }
-
-      if (ref.protocol === 'http:') {
-        const secureRef = Git.replaceProtocol(ref, 'https:');
-        if (yield Git.repoExists(secureRef)) {
-          return secureRef;
-        } else {
-          reporter.warn(reporter.lang('downloadHTTPWithoutCommit', ref.repository));
-          return ref;
-        }
-      }
-
-      return ref;
-    })();
-  }
-
-  /**
-   * Archive a repo to destination
-   */
-
-  archive(dest) {
-    if (this.supportsArchive) {
-      return this._archiveViaRemoteArchive(dest);
-    } else {
-      return this._archiveViaLocalFetched(dest);
-    }
-  }
-
-  _archiveViaRemoteArchive(dest) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const hashStream = new (_crypto || _load_crypto()).HashStream();
-      yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['archive', `--remote=${_this.gitUrl.repository}`, _this.ref], {
-        process(proc, resolve, reject, done) {
-          const writeStream = (0, (_fs || _load_fs()).createWriteStream)(dest);
-          proc.on('error', reject);
-          writeStream.on('error', reject);
-          writeStream.on('end', done);
-          writeStream.on('open', function () {
-            proc.stdout.pipe(hashStream).pipe(writeStream);
-          });
-          writeStream.once('finish', done);
-        }
-      });
-      return hashStream.getHash();
-    })();
-  }
-
-  _archiveViaLocalFetched(dest) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const hashStream = new (_crypto || _load_crypto()).HashStream();
-      yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['archive', _this2.hash], {
-        cwd: _this2.cwd,
-        process(proc, resolve, reject, done) {
-          const writeStream = (0, (_fs || _load_fs()).createWriteStream)(dest);
-          proc.on('error', reject);
-          writeStream.on('error', reject);
-          writeStream.on('open', function () {
-            proc.stdout.pipe(hashStream).pipe(writeStream);
-          });
-          writeStream.once('finish', done);
-        }
-      });
-      return hashStream.getHash();
-    })();
-  }
-
-  /**
-   * Clone a repo to the input `dest`. Use `git archive` if it's available, otherwise fall
-   * back to `git clone`.
-   */
-
-  clone(dest) {
-    if (this.supportsArchive) {
-      return this._cloneViaRemoteArchive(dest);
-    } else {
-      return this._cloneViaLocalFetched(dest);
-    }
-  }
-
-  _cloneViaRemoteArchive(dest) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['archive', `--remote=${_this3.gitUrl.repository}`, _this3.ref], {
-        process(proc, update, reject, done) {
-          const extractor = (_tarFs || _load_tarFs()).default.extract(dest, {
-            dmode: 0o555, // all dirs should be readable
-            fmode: 0o444 // all files should be readable
-          });
-          extractor.on('error', reject);
-          extractor.on('finish', done);
-
-          proc.stdout.pipe(extractor);
-          proc.on('error', reject);
-        }
-      });
-    })();
-  }
-
-  _cloneViaLocalFetched(dest) {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['archive', _this4.hash], {
-        cwd: _this4.cwd,
-        process(proc, resolve, reject, done) {
-          const extractor = (_tarFs || _load_tarFs()).default.extract(dest, {
-            dmode: 0o555, // all dirs should be readable
-            fmode: 0o444 // all files should be readable
-          });
-
-          extractor.on('error', reject);
-          extractor.on('finish', done);
-
-          proc.stdout.pipe(extractor);
-        }
-      });
-    })();
-  }
-
-  /**
-   * Clone this repo.
-   */
-
-  fetch() {
-    var _this5 = this;
-
-    const gitUrl = this.gitUrl,
-          cwd = this.cwd;
-
-
-    return (_fs2 || _load_fs2()).lockQueue.push(gitUrl.repository, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (yield (_fs2 || _load_fs2()).exists(cwd)) {
-        yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['fetch', '--tags'], { cwd });
-        yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['pull'], { cwd });
-      } else {
-        yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['clone', gitUrl.repository, cwd]);
-      }
-
-      _this5.fetched = true;
-    }));
-  }
-
-  /**
-   * Fetch the file by cloning the repo and reading it.
-   */
-
-  getFile(filename) {
-    if (this.supportsArchive) {
-      return this._getFileFromArchive(filename);
-    } else {
-      return this._getFileFromClone(filename);
-    }
-  }
-
-  _getFileFromArchive(filename) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      try {
-        return yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['archive', `--remote=${_this6.gitUrl.repository}`, _this6.ref, filename], {
-          process(proc, update, reject, done) {
-            const parser = (_tarStream || _load_tarStream()).default.extract();
-
-            parser.on('error', reject);
-            parser.on('finish', done);
-
-            parser.on('entry', (header, stream, next) => {
-              const decoder = new (_string_decoder || _load_string_decoder()).StringDecoder('utf8');
-              let fileContent = '';
-
-              stream.on('data', buffer => {
-                fileContent += decoder.write(buffer);
-              });
-              stream.on('end', () => {
-                const remaining = decoder.end();
-                update(fileContent + remaining);
-                next();
-              });
-              stream.resume();
-            });
-
-            proc.stdout.pipe(parser);
-          }
-        });
-      } catch (err) {
-        if (err.message.indexOf('did not match any files') >= 0) {
-          return false;
-        } else {
-          throw err;
-        }
-      }
-    })();
-  }
-
-  _getFileFromClone(filename) {
-    var _this7 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      (0, (_invariant || _load_invariant()).default)(_this7.fetched, 'Repo not fetched');
-
-      try {
-        return yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['show', `${_this7.hash}:${filename}`], {
-          cwd: _this7.cwd
-        });
-      } catch (err) {
-        handleSpawnError(err);
-        // file doesn't exist
-        return false;
-      }
-    })();
-  }
-
-  /**
-   * Initialize the repo, find a secure url to use and
-   * set the ref to match an input `target`.
-   */
-  init() {
-    var _this8 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this8.gitUrl = yield Git.secureGitUrl(_this8.gitUrl, _this8.hash, _this8.reporter);
-
-      yield _this8.setRefRemote();
-
-      // check capabilities
-      if (_this8.ref !== '' && (yield Git.hasArchiveCapability(_this8.gitUrl))) {
-        _this8.supportsArchive = true;
-      } else {
-        yield _this8.fetch();
-      }
-
-      return _this8.hash;
-    })();
-  }
-
-  setRefRemote() {
-    var _this9 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const isLocal = _this9.gitUrl.protocol === FILE_PROTOCOL;
-      let stdout;
-
-      if (isLocal) {
-        stdout = yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['show-ref', '--tags', '--heads'], { cwd: _this9.gitUrl.repository });
-      } else {
-        stdout = yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['ls-remote', '--tags', '--heads', _this9.gitUrl.repository]);
-      }
-
-      const refs = (0, (_gitRefResolver || _load_gitRefResolver()).parseRefs)(stdout);
-      return _this9.setRef(refs);
-    })();
-  }
-
-  setRefHosted(hostedRefsList) {
-    const refs = (0, (_gitRefResolver || _load_gitRefResolver()).parseRefs)(hostedRefsList);
-    return this.setRef(refs);
-  }
-
-  /**
-   * Resolves the default branch of a remote repository (not always "master")
-   */
-
-  resolveDefaultBranch() {
-    var _this10 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const isLocal = _this10.gitUrl.protocol === FILE_PROTOCOL;
-
-      try {
-        let stdout;
-        if (isLocal) {
-          stdout = yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['show-ref', 'HEAD'], { cwd: _this10.gitUrl.repository });
-          const refs = (0, (_gitRefResolver || _load_gitRefResolver()).parseRefs)(stdout);
-          const sha = refs.values().next().value;
-          if (sha) {
-            return { sha, ref: undefined };
-          } else {
-            throw new Error('Unable to find SHA for git HEAD');
-          }
-        } else {
-          stdout = yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['ls-remote', '--symref', _this10.gitUrl.repository, 'HEAD']);
-          const lines = stdout.split('\n').filter(validRef);
-
-          var _lines$0$split = lines[0].split(/\s+/);
-
-          const ref = _lines$0$split[1];
-
-          var _lines$1$split = lines[1].split(/\s+/);
-
-          const sha = _lines$1$split[0];
-
-          return { sha, ref };
-        }
-      } catch (err) {
-        handleSpawnError(err);
-        // older versions of git don't support "--symref"
-        const stdout = yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['ls-remote', _this10.gitUrl.repository, 'HEAD']);
-        const lines = stdout.split('\n').filter(validRef);
-
-        var _lines$0$split2 = lines[0].split(/\s+/);
-
-        const sha = _lines$0$split2[0];
-
-        return { sha, ref: undefined };
-      }
-    })();
-  }
-
-  /**
-   * Resolve a git commit to it's 40-chars format and ensure it exists in the repository
-   * We need to use the 40-chars format to avoid multiple folders in the cache
-   */
-
-  resolveCommit(shaToResolve) {
-    var _this11 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      try {
-        yield _this11.fetch();
-        const revListArgs = ['rev-list', '-n', '1', '--no-abbrev-commit', '--format=oneline', shaToResolve];
-        const stdout = yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(revListArgs, { cwd: _this11.cwd });
-
-        var _stdout$split = stdout.split(/\s+/);
-
-        const sha = _stdout$split[0];
-
-        return { sha, ref: undefined };
-      } catch (err) {
-        handleSpawnError(err);
-        // assuming commit not found, let's try something else
-        return null;
-      }
-    })();
-  }
-
-  /**
-   * Resolves the input hash / ref / semver range to a valid commit sha
-   * If possible also resolves the sha to a valid ref in order to use "git archive"
-   */
-
-  setRef(refs) {
-    var _this12 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // get commit ref
-      const version = _this12.hash;
-
-
-      const resolvedResult = yield (0, (_gitRefResolver || _load_gitRefResolver()).resolveVersion)({
-        config: _this12.config,
-        git: _this12,
-        version,
-        refs
-      });
-      if (!resolvedResult) {
-        throw new (_errors || _load_errors()).MessageError(_this12.reporter.lang('couldntFindMatch', version, Array.from(refs.keys()).join(','), _this12.gitUrl.repository));
-      }
-
-      _this12.hash = resolvedResult.sha;
-      _this12.ref = resolvedResult.ref || '';
-      return _this12.hash;
-    })();
-  }
-}
-exports.default = Git;
-
-/***/ }),
-/* 220 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _resolveRelative;
-
-function _load_resolveRelative() {
-  return _resolveRelative = _interopRequireDefault(__webpack_require__(586));
-}
-
-var _validate;
-
-function _load_validate() {
-  return _validate = _interopRequireDefault(__webpack_require__(125));
-}
-
-var _fix;
-
-function _load_fix() {
-  return _fix = _interopRequireDefault(__webpack_require__(583));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-exports.default = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (info, moduleLoc, config, isRoot) {
-    // create human readable name
-    const name = info.name,
-          version = info.version;
-
-    let human;
-    if (typeof name === 'string') {
-      human = name;
-    }
-    if (human && typeof version === 'string' && version) {
-      human += `@${version}`;
-    }
-    if (isRoot && info._loc) {
-      human = path.relative(config.cwd, info._loc);
-    }
-
-    function warn(msg) {
-      if (human) {
-        msg = `${human}: ${msg}`;
-      }
-      config.reporter.warn(msg);
-    }
-
-    yield (0, (_fix || _load_fix()).default)(info, moduleLoc, config.reporter, warn, config.looseSemver);
-    (0, (_resolveRelative || _load_resolveRelative()).default)(info, moduleLoc, config.lockfileFolder);
-
-    if (config.cwd === config.globalFolder) {
-      return info;
-    }
-
-    try {
-      (0, (_validate || _load_validate()).default)(info, isRoot, config.reporter, warn);
-    } catch (err) {
-      if (human) {
-        err.message = `${human}: ${err.message}`;
-      }
-      throw err;
-    }
-
-    return info;
-  });
-
-  return function (_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-/***/ }),
-/* 221 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isValidLicense = isValidLicense;
-exports.isValidBin = isValidBin;
-exports.stringifyPerson = stringifyPerson;
-exports.parsePerson = parsePerson;
-exports.normalizePerson = normalizePerson;
-exports.extractDescription = extractDescription;
-exports.extractRepositoryUrl = extractRepositoryUrl;
-
-
-const path = __webpack_require__(0);
-
-const validateLicense = __webpack_require__(959);
-
-const PARENT_PATH = /^\.\.([\\\/]|$)/;
-
-function isValidLicense(license) {
-  return !!license && validateLicense(license).validForNewPackages;
-}
-
-function isValidBin(bin) {
-  return !path.isAbsolute(bin) && !PARENT_PATH.test(path.normalize(bin));
-}
-
-function stringifyPerson(person) {
-  if (!person || typeof person !== 'object') {
-    return person;
-  }
-
-  const parts = [];
-  if (person.name) {
-    parts.push(person.name);
-  }
-
-  const email = person.email || person.mail;
-  if (typeof email === 'string') {
-    parts.push(`<${email}>`);
-  }
-
-  const url = person.url || person.web;
-  if (typeof url === 'string') {
-    parts.push(`(${url})`);
-  }
-
-  return parts.join(' ');
-}
-
-function parsePerson(person) {
-  if (typeof person !== 'string') {
-    return person;
-  }
-
-  // format: name (url) <email>
-  const obj = {};
-
-  let name = person.match(/^([^\(<]+)/);
-  if (name) {
-    name = name[0].trim();
-    if (name) {
-      obj.name = name;
-    }
-  }
-
-  const email = person.match(/<([^>]+)>/);
-  if (email) {
-    obj.email = email[1];
-  }
-
-  const url = person.match(/\(([^\)]+)\)/);
-  if (url) {
-    obj.url = url[1];
-  }
-
-  return obj;
-}
-
-function normalizePerson(person) {
-  return parsePerson(stringifyPerson(person));
-}
-
-function extractDescription(readme) {
-  if (typeof readme !== 'string' || readme === '') {
-    return undefined;
-  }
-
-  // split into lines
-  const lines = readme.trim().split('\n').map(line => line.trim());
-
-  // find the start of the first paragraph, ignore headings
-  let start = 0;
-  for (; start < lines.length; start++) {
-    const line = lines[start];
-    if (line && line.match(/^(#|$)/)) {
-      // line isn't empty and isn't a heading so this is the start of a paragraph
-      start++;
-      break;
-    }
-  }
-
-  // skip newlines from the header to the first line
-  while (start < lines.length && !lines[start]) {
-    start++;
-  }
-
-  // continue to the first non empty line
-  let end = start;
-  while (end < lines.length && lines[end]) {
-    end++;
-  }
-
-  return lines.slice(start, end).join(' ');
-}
-
-function extractRepositoryUrl(repository) {
-  if (!repository || typeof repository !== 'object') {
-    return repository;
-  }
-  return repository.url;
-}
-
-/***/ }),
-/* 222 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPlatformSpecificPackageFilename = getPlatformSpecificPackageFilename;
-exports.getSystemParams = getSystemParams;
-function getPlatformSpecificPackageFilename(pkg) {
-  // TODO support hash for all subdependencies that have installs scripts
-  const normalizeScope = name => name[0] === '@' ? name.substr(1).replace('/', '-') : name;
-  const suffix = getSystemParams();
-  return `${normalizeScope(pkg.name)}-v${pkg.version}-${suffix}`;
-}
-
-function getSystemParams() {
-  // TODO support platform variant for linux
-  return `${process.platform}-${process.arch}-${process.versions.modules || ''}`;
-}
-
-/***/ }),
-/* 223 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isFakeRoot = isFakeRoot;
-exports.isRootUser = isRootUser;
-function getUid() {
-  if (process.platform !== 'win32' && process.getuid) {
-    return process.getuid();
-  }
-  return null;
-}
-
-exports.default = isRootUser(getUid()) && !isFakeRoot();
-function isFakeRoot() {
-  return Boolean(process.env.FAKEROOTKEY);
-}
-
-function isRootUser(uid) {
-  return uid === 0;
-}
-
-/***/ }),
-/* 224 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.satisfiesWithPrereleases = satisfiesWithPrereleases;
-exports.diffWithUnstable = diffWithUnstable;
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/**
- * Returns whether the given semver version satisfies the given range. Notably this supports
- * prerelease versions so that "2.0.0-rc.0" satisfies the range ">=1.0.0", for example.
- */
-
-function satisfiesWithPrereleases(version, range, loose = false) {
-  let semverRange;
-  try {
-    // $FlowFixMe: Add a definition for the Range class
-    semverRange = new (_semver || _load_semver()).default.Range(range, loose);
-  } catch (err) {
-    return false;
-  }
-
-  if (!version) {
-    return false;
-  }
-  let semverVersion;
-  try {
-    semverVersion = new (_semver || _load_semver()).default.SemVer(version, semverRange.loose);
-  } catch (err) {
-    return false;
-  }
-
-  // A range has multiple sets of comparators. A version must satisfy all comparators in a set
-  // and at least one set to satisfy the range.
-  return semverRange.set.some(comparatorSet => {
-    // node-semver converts ~ and ^ ranges into pairs of >= and < ranges but the upper bounds don't
-    // properly exclude prerelease versions. For example, "^1.0.0" is converted to ">=1.0.0 <2.0.0",
-    // which includes "2.0.0-pre" since prerelease versions are lower than their non-prerelease
-    // counterparts. As a practical workaround we make upper-bound ranges exclude prereleases and
-    // convert "<2.0.0" to "<2.0.0-0", for example.
-    comparatorSet = comparatorSet.map(comparator => {
-      if (comparator.operator !== '<' || !comparator.value || comparator.semver.prerelease.length) {
-        return comparator;
-      }
-
-      // "0" is the lowest prerelease version
-      comparator.semver.inc('pre', 0);
-
-      const comparatorString = comparator.operator + comparator.semver.version;
-      // $FlowFixMe: Add a definition for the Comparator class
-      return new (_semver || _load_semver()).default.Comparator(comparatorString, comparator.loose);
-    });
-
-    return !comparatorSet.some(comparator => !comparator.test(semverVersion));
-  });
-}
-
-const PRE_RELEASES = {
-  major: 'premajor',
-  minor: 'preminor',
-  patch: 'prepatch'
-};
-
-/**
- * Returns the difference between two versions as a semantic string representation.
- * Similar to the `diff` method in node-semver, but it also accounts for unstable versions,
- * like 0.x.x or 0.0.x.
- */
-
-function diffWithUnstable(version1, version2) {
-  if ((_semver || _load_semver()).default.eq(version1, version2) === false) {
-    const v1 = (_semver || _load_semver()).default.parse(version1);
-    const v2 = (_semver || _load_semver()).default.parse(version2);
-
-    if (v1 != null && v2 != null) {
-      const isPreRelease = v1.prerelease.length > 0 || v2.prerelease.length > 0;
-      const preMajor = v1.major === 0 || v2.major === 0;
-      const preMinor = preMajor && (v1.minor === 0 || v2.minor === 0);
-
-      let diff = null;
-
-      if (v1.major !== v2.major) {
-        diff = 'major';
-      } else if (v1.minor !== v2.minor) {
-        if (preMajor) {
-          // If the major version number is zero (0.x.x), treat a change
-          // of the minor version number as a major change.
-          diff = 'major';
-        } else {
-          diff = 'minor';
-        }
-      } else if (v1.patch !== v2.patch) {
-        if (preMinor) {
-          // If the major & minor version numbers are zero (0.0.x), treat a change
-          // of the patch version number as a major change.
-          diff = 'major';
-        } else if (preMajor) {
-          // If the major version number is zero (0.x.x), treat a change
-          // of the patch version number as a minor change.
-          diff = 'minor';
-        } else {
-          diff = 'patch';
-        }
-      }
-
-      if (isPreRelease) {
-        if (diff != null) {
-          diff = PRE_RELEASES[diff];
-        } else {
-          diff = 'prerelease';
-        }
-      }
-
-      return diff;
-    }
-  }
-
-  return null;
-}
-
-/***/ }),
-/* 225 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getDataDir = getDataDir;
-exports.getCacheDir = getCacheDir;
-exports.getConfigDir = getConfigDir;
-const path = __webpack_require__(0);
-const userHome = __webpack_require__(67).default;
-
-const FALLBACK_CONFIG_DIR = path.join(userHome, '.config', 'yarn');
-const FALLBACK_CACHE_DIR = path.join(userHome, '.cache', 'yarn');
-
-function getDataDir() {
-  if (process.platform === 'win32') {
-    const WIN32_APPDATA_DIR = getLocalAppDataDir();
-    return WIN32_APPDATA_DIR == null ? FALLBACK_CONFIG_DIR : path.join(WIN32_APPDATA_DIR, 'Data');
-  } else if (process.env.XDG_DATA_HOME) {
-    return path.join(process.env.XDG_DATA_HOME, 'yarn');
-  } else {
-    // This could arguably be ~/Library/Application Support/Yarn on Macs,
-    // but that feels unintuitive for a cli tool
-
-    // Instead, use our prior fallback. Some day this could be
-    // path.join(userHome, '.local', 'share', 'yarn')
-    // or return path.join(WIN32_APPDATA_DIR, 'Data') on win32
-    return FALLBACK_CONFIG_DIR;
-  }
-}
-
-function getCacheDir() {
-  if (process.platform === 'win32') {
-    // process.env.TEMP also exists, but most apps put caches here
-    return path.join(getLocalAppDataDir() || path.join(userHome, 'AppData', 'Local', 'Yarn'), 'Cache');
-  } else if (process.env.XDG_CACHE_HOME) {
-    return path.join(process.env.XDG_CACHE_HOME, 'yarn');
-  } else if (process.platform === 'darwin') {
-    return path.join(userHome, 'Library', 'Caches', 'Yarn');
-  } else {
-    return FALLBACK_CACHE_DIR;
-  }
-}
-
-function getConfigDir() {
-  if (process.platform === 'win32') {
-    // Use our prior fallback. Some day this could be
-    // return path.join(WIN32_APPDATA_DIR, 'Config')
-    const WIN32_APPDATA_DIR = getLocalAppDataDir();
-    return WIN32_APPDATA_DIR == null ? FALLBACK_CONFIG_DIR : path.join(WIN32_APPDATA_DIR, 'Config');
-  } else if (process.env.XDG_CONFIG_HOME) {
-    return path.join(process.env.XDG_CONFIG_HOME, 'yarn');
-  } else {
-    return FALLBACK_CONFIG_DIR;
-  }
-}
-
-function getLocalAppDataDir() {
-  return process.env.LOCALAPPDATA ? path.join(process.env.LOCALAPPDATA, 'Yarn') : null;
-}
-
-/***/ }),
-/* 226 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.explodeHashedUrl = explodeHashedUrl;
-function explodeHashedUrl(url) {
-  const parts = url.split('#');
-
-  return {
-    hash: parts[1] || '',
-    url: parts[0]
-  };
-}
-
-/***/ }),
-/* 227 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = { "default": __webpack_require__(233), __esModule: true };
-
-/***/ }),
-/* 228 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = balanced;
-function balanced(a, b, str) {
-  if (a instanceof RegExp) a = maybeMatch(a, str);
-  if (b instanceof RegExp) b = maybeMatch(b, str);
-
-  var r = range(a, b, str);
-
-  return r && {
-    start: r[0],
-    end: r[1],
-    pre: str.slice(0, r[0]),
-    body: str.slice(r[0] + a.length, r[1]),
-    post: str.slice(r[1] + b.length)
-  };
-}
-
-function maybeMatch(reg, str) {
-  var m = str.match(reg);
-  return m ? m[0] : null;
-}
-
-balanced.range = range;
-function range(a, b, str) {
-  var begs, beg, left, right, result;
-  var ai = str.indexOf(a);
-  var bi = str.indexOf(b, ai + 1);
-  var i = ai;
-
-  if (ai >= 0 && bi > 0) {
-    begs = [];
-    left = str.length;
-
-    while (i >= 0 && !result) {
-      if (i == ai) {
-        begs.push(i);
-        ai = str.indexOf(a, i + 1);
-      } else if (begs.length == 1) {
-        result = [ begs.pop(), bi ];
-      } else {
-        beg = begs.pop();
-        if (beg < left) {
-          left = beg;
-          right = bi;
-        }
-
-        bi = str.indexOf(b, i + 1);
-      }
-
-      i = ai < bi && ai >= 0 ? ai : bi;
-    }
-
-    if (begs.length) {
-      result = [ left, right ];
-    }
-  }
-
-  return result;
-}
-
-
-/***/ }),
-/* 229 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var concatMap = __webpack_require__(232);
-var balanced = __webpack_require__(228);
-
-module.exports = expandTop;
-
-var escSlash = '\0SLASH'+Math.random()+'\0';
-var escOpen = '\0OPEN'+Math.random()+'\0';
-var escClose = '\0CLOSE'+Math.random()+'\0';
-var escComma = '\0COMMA'+Math.random()+'\0';
-var escPeriod = '\0PERIOD'+Math.random()+'\0';
-
-function numeric(str) {
-  return parseInt(str, 10) == str
-    ? parseInt(str, 10)
-    : str.charCodeAt(0);
-}
-
-function escapeBraces(str) {
-  return str.split('\\\\').join(escSlash)
-            .split('\\{').join(escOpen)
-            .split('\\}').join(escClose)
-            .split('\\,').join(escComma)
-            .split('\\.').join(escPeriod);
-}
-
-function unescapeBraces(str) {
-  return str.split(escSlash).join('\\')
-            .split(escOpen).join('{')
-            .split(escClose).join('}')
-            .split(escComma).join(',')
-            .split(escPeriod).join('.');
-}
-
-
-// Basically just str.split(","), but handling cases
-// where we have nested braced sections, which should be
-// treated as individual members, like {a,{b,c},d}
-function parseCommaParts(str) {
-  if (!str)
-    return [''];
-
-  var parts = [];
-  var m = balanced('{', '}', str);
-
-  if (!m)
-    return str.split(',');
-
-  var pre = m.pre;
-  var body = m.body;
-  var post = m.post;
-  var p = pre.split(',');
-
-  p[p.length-1] += '{' + body + '}';
-  var postParts = parseCommaParts(post);
-  if (post.length) {
-    p[p.length-1] += postParts.shift();
-    p.push.apply(p, postParts);
-  }
-
-  parts.push.apply(parts, p);
-
-  return parts;
-}
-
-function expandTop(str) {
-  if (!str)
-    return [];
-
-  // I don't know why Bash 4.3 does this, but it does.
-  // Anything starting with {} will have the first two bytes preserved
-  // but *only* at the top level, so {},a}b will not expand to anything,
-  // but a{},b}c will be expanded to [a}c,abc].
-  // One could argue that this is a bug in Bash, but since the goal of
-  // this module is to match Bash's rules, we escape a leading {}
-  if (str.substr(0, 2) === '{}') {
-    str = '\\{\\}' + str.substr(2);
-  }
-
-  return expand(escapeBraces(str), true).map(unescapeBraces);
-}
-
-function identity(e) {
-  return e;
-}
-
-function embrace(str) {
-  return '{' + str + '}';
-}
-function isPadded(el) {
-  return /^-?0\d/.test(el);
-}
-
-function lte(i, y) {
-  return i <= y;
-}
-function gte(i, y) {
-  return i >= y;
-}
-
-function expand(str, isTop) {
-  var expansions = [];
-
-  var m = balanced('{', '}', str);
-  if (!m || /\$$/.test(m.pre)) return [str];
-
-  var isNumericSequence = /^-?\d+\.\.-?\d+(?:\.\.-?\d+)?$/.test(m.body);
-  var isAlphaSequence = /^[a-zA-Z]\.\.[a-zA-Z](?:\.\.-?\d+)?$/.test(m.body);
-  var isSequence = isNumericSequence || isAlphaSequence;
-  var isOptions = m.body.indexOf(',') >= 0;
-  if (!isSequence && !isOptions) {
-    // {a},b}
-    if (m.post.match(/,.*\}/)) {
-      str = m.pre + '{' + m.body + escClose + m.post;
-      return expand(str);
-    }
-    return [str];
-  }
-
-  var n;
-  if (isSequence) {
-    n = m.body.split(/\.\./);
-  } else {
-    n = parseCommaParts(m.body);
-    if (n.length === 1) {
-      // x{{a,b}}y ==> x{a}y x{b}y
-      n = expand(n[0], false).map(embrace);
-      if (n.length === 1) {
-        var post = m.post.length
-          ? expand(m.post, false)
-          : [''];
-        return post.map(function(p) {
-          return m.pre + n[0] + p;
-        });
-      }
-    }
-  }
-
-  // at this point, n is the parts, and we know it's not a comma set
-  // with a single entry.
-
-  // no need to expand pre, since it is guaranteed to be free of brace-sets
-  var pre = m.pre;
-  var post = m.post.length
-    ? expand(m.post, false)
-    : [''];
-
-  var N;
-
-  if (isSequence) {
-    var x = numeric(n[0]);
-    var y = numeric(n[1]);
-    var width = Math.max(n[0].length, n[1].length)
-    var incr = n.length == 3
-      ? Math.abs(numeric(n[2]))
-      : 1;
-    var test = lte;
-    var reverse = y < x;
-    if (reverse) {
-      incr *= -1;
-      test = gte;
-    }
-    var pad = n.some(isPadded);
-
-    N = [];
-
-    for (var i = x; test(i, y); i += incr) {
-      var c;
-      if (isAlphaSequence) {
-        c = String.fromCharCode(i);
-        if (c === '\\')
-          c = '';
-      } else {
-        c = String(i);
-        if (pad) {
-          var need = width - c.length;
-          if (need > 0) {
-            var z = new Array(need + 1).join('0');
-            if (i < 0)
-              c = '-' + z + c.slice(1);
-            else
-              c = z + c;
-          }
-        }
-      }
-      N.push(c);
-    }
-  } else {
-    N = concatMap(n, function(el) { return expand(el, false) });
-  }
-
-  for (var j = 0; j < N.length; j++) {
-    for (var k = 0; k < post.length; k++) {
-      var expansion = pre + N[j] + post[k];
-      if (!isTop || isSequence || expansion)
-        expansions.push(expansion);
-    }
-  }
-
-  return expansions;
-}
-
-
-
-/***/ }),
-/* 230 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-function preserveCamelCase(str) {
-	let isLastCharLower = false;
-	let isLastCharUpper = false;
-	let isLastLastCharUpper = false;
-
-	for (let i = 0; i < str.length; i++) {
-		const c = str[i];
-
-		if (isLastCharLower && /[a-zA-Z]/.test(c) && c.toUpperCase() === c) {
-			str = str.substr(0, i) + '-' + str.substr(i);
-			isLastCharLower = false;
-			isLastLastCharUpper = isLastCharUpper;
-			isLastCharUpper = true;
-			i++;
-		} else if (isLastCharUpper && isLastLastCharUpper && /[a-zA-Z]/.test(c) && c.toLowerCase() === c) {
-			str = str.substr(0, i - 1) + '-' + str.substr(i - 1);
-			isLastLastCharUpper = isLastCharUpper;
-			isLastCharUpper = false;
-			isLastCharLower = true;
-		} else {
-			isLastCharLower = c.toLowerCase() === c;
-			isLastLastCharUpper = isLastCharUpper;
-			isLastCharUpper = c.toUpperCase() === c;
-		}
-	}
-
-	return str;
-}
-
-module.exports = function (str) {
-	if (arguments.length > 1) {
-		str = Array.from(arguments)
-			.map(x => x.trim())
-			.filter(x => x.length)
-			.join('-');
-	} else {
-		str = str.trim();
-	}
-
-	if (str.length === 0) {
-		return '';
-	}
-
-	if (str.length === 1) {
-		return str.toLowerCase();
-	}
-
-	if (/^[a-z0-9]+$/.test(str)) {
-		return str;
-	}
-
-	const hasUpperCase = str !== str.toLowerCase();
-
-	if (hasUpperCase) {
-		str = preserveCamelCase(str);
-	}
-
-	return str
-		.replace(/^[_.\- ]+/, '')
-		.toLowerCase()
-		.replace(/[_.\- ]+(\w|$)/g, (m, p1) => p1.toUpperCase());
-};
-
-
-/***/ }),
-/* 231 */
-/***/ (function(module, exports) {
-
-function Caseless (dict) {
-  this.dict = dict || {}
-}
-Caseless.prototype.set = function (name, value, clobber) {
-  if (typeof name === 'object') {
-    for (var i in name) {
-      this.set(i, name[i], value)
-    }
-  } else {
-    if (typeof clobber === 'undefined') clobber = true
-    var has = this.has(name)
-
-    if (!clobber && has) this.dict[has] = this.dict[has] + ',' + value
-    else this.dict[has || name] = value
-    return has
-  }
-}
-Caseless.prototype.has = function (name) {
-  var keys = Object.keys(this.dict)
-    , name = name.toLowerCase()
-    ;
-  for (var i=0;i<keys.length;i++) {
-    if (keys[i].toLowerCase() === name) return keys[i]
-  }
-  return false
-}
-Caseless.prototype.get = function (name) {
-  name = name.toLowerCase()
-  var result, _key
-  var headers = this.dict
-  Object.keys(headers).forEach(function (key) {
-    _key = key.toLowerCase()
-    if (name === _key) result = headers[key]
-  })
-  return result
-}
-Caseless.prototype.swap = function (name) {
-  var has = this.has(name)
-  if (has === name) return
-  if (!has) throw new Error('There is no header than matches "'+name+'"')
-  this.dict[name] = this.dict[has]
-  delete this.dict[has]
-}
-Caseless.prototype.del = function (name) {
-  var has = this.has(name)
-  return delete this.dict[has || name]
-}
-
-module.exports = function (dict) {return new Caseless(dict)}
-module.exports.httpify = function (resp, headers) {
-  var c = new Caseless(headers)
-  resp.setHeader = function (key, value, clobber) {
-    if (typeof value === 'undefined') return
-    return c.set(key, value, clobber)
-  }
-  resp.hasHeader = function (key) {
-    return c.has(key)
-  }
-  resp.getHeader = function (key) {
-    return c.get(key)
-  }
-  resp.removeHeader = function (key) {
-    return c.del(key)
-  }
-  resp.headers = c.dict
-  return c
-}
-
-
-/***/ }),
-/* 232 */
-/***/ (function(module, exports) {
-
-module.exports = function (xs, fn) {
-    var res = [];
-    for (var i = 0; i < xs.length; i++) {
-        var x = fn(xs[i], i);
-        if (isArray(x)) res.push.apply(res, x);
-        else res.push(x);
-    }
-    return res;
-};
-
-var isArray = Array.isArray || function (xs) {
-    return Object.prototype.toString.call(xs) === '[object Array]';
-};
-
-
-/***/ }),
-/* 233 */
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__(259);
-__webpack_require__(261);
-__webpack_require__(264);
-__webpack_require__(260);
-__webpack_require__(262);
-__webpack_require__(263);
-module.exports = __webpack_require__(31).Promise;
-
-
-/***/ }),
-/* 234 */
-/***/ (function(module, exports) {
-
-module.exports = function () { /* empty */ };
-
-
-/***/ }),
-/* 235 */
-/***/ (function(module, exports) {
-
-module.exports = function (it, Constructor, name, forbiddenField) {
-  if (!(it instanceof Constructor) || (forbiddenField !== undefined && forbiddenField in it)) {
-    throw TypeError(name + ': incorrect invocation!');
-  } return it;
-};
-
-
-/***/ }),
-/* 236 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// false -> Array#indexOf
-// true  -> Array#includes
-var toIObject = __webpack_require__(98);
-var toLength = __webpack_require__(136);
-var toAbsoluteIndex = __webpack_require__(254);
-module.exports = function (IS_INCLUDES) {
-  return function ($this, el, fromIndex) {
-    var O = toIObject($this);
-    var length = toLength(O.length);
-    var index = toAbsoluteIndex(fromIndex, length);
-    var value;
-    // Array#includes uses SameValueZero equality algorithm
-    // eslint-disable-next-line no-self-compare
-    if (IS_INCLUDES && el != el) while (length > index) {
-      value = O[index++];
-      // eslint-disable-next-line no-self-compare
-      if (value != value) return true;
-    // Array#indexOf ignores holes, Array#includes - not
-    } else for (;length > index; index++) if (IS_INCLUDES || index in O) {
-      if (O[index] === el) return IS_INCLUDES || index || 0;
-    } return !IS_INCLUDES && -1;
-  };
-};
-
-
-/***/ }),
-/* 237 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var ctx = __webpack_require__(70);
-var call = __webpack_require__(241);
-var isArrayIter = __webpack_require__(240);
-var anObject = __webpack_require__(35);
-var toLength = __webpack_require__(136);
-var getIterFn = __webpack_require__(257);
-var BREAK = {};
-var RETURN = {};
-var exports = module.exports = function (iterable, entries, fn, that, ITERATOR) {
-  var iterFn = ITERATOR ? function () { return iterable; } : getIterFn(iterable);
-  var f = ctx(fn, that, entries ? 2 : 1);
-  var index = 0;
-  var length, step, iterator, result;
-  if (typeof iterFn != 'function') throw TypeError(iterable + ' is not iterable!');
-  // fast case for arrays with default iterator
-  if (isArrayIter(iterFn)) for (length = toLength(iterable.length); length > index; index++) {
-    result = entries ? f(anObject(step = iterable[index])[0], step[1]) : f(iterable[index]);
-    if (result === BREAK || result === RETURN) return result;
-  } else for (iterator = iterFn.call(iterable); !(step = iterator.next()).done;) {
-    result = call(iterator, f, step.value, entries);
-    if (result === BREAK || result === RETURN) return result;
-  }
-};
-exports.BREAK = BREAK;
-exports.RETURN = RETURN;
-
-
-/***/ }),
-/* 238 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = !__webpack_require__(51) && !__webpack_require__(112)(function () {
-  return Object.defineProperty(__webpack_require__(92)('div'), 'a', { get: function () { return 7; } }).a != 7;
-});
-
-
-/***/ }),
-/* 239 */
-/***/ (function(module, exports) {
-
-// fast apply, http://jsperf.lnkit.com/fast-apply/5
-module.exports = function (fn, args, that) {
-  var un = that === undefined;
-  switch (args.length) {
-    case 0: return un ? fn()
-                      : fn.call(that);
-    case 1: return un ? fn(args[0])
-                      : fn.call(that, args[0]);
-    case 2: return un ? fn(args[0], args[1])
-                      : fn.call(that, args[0], args[1]);
-    case 3: return un ? fn(args[0], args[1], args[2])
-                      : fn.call(that, args[0], args[1], args[2]);
-    case 4: return un ? fn(args[0], args[1], args[2], args[3])
-                      : fn.call(that, args[0], args[1], args[2], args[3]);
-  } return fn.apply(that, args);
-};
-
-
-/***/ }),
-/* 240 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// check on default Array iterator
-var Iterators = __webpack_require__(53);
-var ITERATOR = __webpack_require__(20)('iterator');
-var ArrayProto = Array.prototype;
-
-module.exports = function (it) {
-  return it !== undefined && (Iterators.Array === it || ArrayProto[ITERATOR] === it);
-};
-
-
-/***/ }),
-/* 241 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// call something on iterator step with safe closing on error
-var anObject = __webpack_require__(35);
-module.exports = function (iterator, fn, value, entries) {
-  try {
-    return entries ? fn(anObject(value)[0], value[1]) : fn(value);
-  // 7.4.6 IteratorClose(iterator, completion)
-  } catch (e) {
-    var ret = iterator['return'];
-    if (ret !== undefined) anObject(ret.call(iterator));
-    throw e;
-  }
-};
-
-
-/***/ }),
-/* 242 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var create = __webpack_require__(246);
-var descriptor = __webpack_require__(132);
-var setToStringTag = __webpack_require__(95);
-var IteratorPrototype = {};
-
-// 25.1.2.1.1 %IteratorPrototype%[@@iterator]()
-__webpack_require__(42)(IteratorPrototype, __webpack_require__(20)('iterator'), function () { return this; });
-
-module.exports = function (Constructor, NAME, next) {
-  Constructor.prototype = create(IteratorPrototype, { next: descriptor(1, next) });
-  setToStringTag(Constructor, NAME + ' Iterator');
-};
-
-
-/***/ }),
-/* 243 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var ITERATOR = __webpack_require__(20)('iterator');
-var SAFE_CLOSING = false;
-
-try {
-  var riter = [7][ITERATOR]();
-  riter['return'] = function () { SAFE_CLOSING = true; };
-  // eslint-disable-next-line no-throw-literal
-  Array.from(riter, function () { throw 2; });
-} catch (e) { /* empty */ }
-
-module.exports = function (exec, skipClosing) {
-  if (!skipClosing && !SAFE_CLOSING) return false;
-  var safe = false;
-  try {
-    var arr = [7];
-    var iter = arr[ITERATOR]();
-    iter.next = function () { return { done: safe = true }; };
-    arr[ITERATOR] = function () { return iter; };
-    exec(arr);
-  } catch (e) { /* empty */ }
-  return safe;
-};
-
-
-/***/ }),
-/* 244 */
-/***/ (function(module, exports) {
-
-module.exports = function (done, value) {
-  return { value: value, done: !!done };
-};
-
-
-/***/ }),
-/* 245 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var global = __webpack_require__(17);
-var macrotask = __webpack_require__(135).set;
-var Observer = global.MutationObserver || global.WebKitMutationObserver;
-var process = global.process;
-var Promise = global.Promise;
-var isNode = __webpack_require__(69)(process) == 'process';
-
-module.exports = function () {
-  var head, last, notify;
-
-  var flush = function () {
-    var parent, fn;
-    if (isNode && (parent = process.domain)) parent.exit();
-    while (head) {
-      fn = head.fn;
-      head = head.next;
-      try {
-        fn();
-      } catch (e) {
-        if (head) notify();
-        else last = undefined;
-        throw e;
-      }
-    } last = undefined;
-    if (parent) parent.enter();
-  };
-
-  // Node.js
-  if (isNode) {
-    notify = function () {
-      process.nextTick(flush);
-    };
-  // browsers with MutationObserver, except iOS Safari - https://github.com/zloirock/core-js/issues/339
-  } else if (Observer && !(global.navigator && global.navigator.standalone)) {
-    var toggle = true;
-    var node = document.createTextNode('');
-    new Observer(flush).observe(node, { characterData: true }); // eslint-disable-line no-new
-    notify = function () {
-      node.data = toggle = !toggle;
-    };
-  // environments with maybe non-completely correct, but existent Promise
-  } else if (Promise && Promise.resolve) {
-    // Promise.resolve without an argument throws an error in LG WebOS 2
-    var promise = Promise.resolve(undefined);
-    notify = function () {
-      promise.then(flush);
-    };
-  // for other environments - macrotask based on:
-  // - setImmediate
-  // - MessageChannel
-  // - window.postMessag
-  // - onreadystatechange
-  // - setTimeout
-  } else {
-    notify = function () {
-      // strange IE + webpack dev server bug - use .call(global)
-      macrotask.call(global, flush);
-    };
-  }
-
-  return function (fn) {
-    var task = { fn: fn, next: undefined };
-    if (last) last.next = task;
-    if (!head) {
-      head = task;
-      notify();
-    } last = task;
-  };
-};
-
-
-/***/ }),
-/* 246 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 19.1.2.2 / 15.2.3.5 Object.create(O [, Properties])
-var anObject = __webpack_require__(35);
-var dPs = __webpack_require__(247);
-var enumBugKeys = __webpack_require__(127);
-var IE_PROTO = __webpack_require__(96)('IE_PROTO');
-var Empty = function () { /* empty */ };
-var PROTOTYPE = 'prototype';
-
-// Create object with fake `null` prototype: use iframe Object with cleared prototype
-var createDict = function () {
-  // Thrash, waste and sodomy: IE GC bug
-  var iframe = __webpack_require__(92)('iframe');
-  var i = enumBugKeys.length;
-  var lt = '<';
-  var gt = '>';
-  var iframeDocument;
-  iframe.style.display = 'none';
-  __webpack_require__(128).appendChild(iframe);
-  iframe.src = 'javascript:'; // eslint-disable-line no-script-url
-  // createDict = iframe.contentWindow.Object;
-  // html.removeChild(iframe);
-  iframeDocument = iframe.contentWindow.document;
-  iframeDocument.open();
-  iframeDocument.write(lt + 'script' + gt + 'document.F=Object' + lt + '/script' + gt);
-  iframeDocument.close();
-  createDict = iframeDocument.F;
-  while (i--) delete createDict[PROTOTYPE][enumBugKeys[i]];
-  return createDict();
-};
-
-module.exports = Object.create || function create(O, Properties) {
-  var result;
-  if (O !== null) {
-    Empty[PROTOTYPE] = anObject(O);
-    result = new Empty();
-    Empty[PROTOTYPE] = null;
-    // add "__proto__" for Object.getPrototypeOf polyfill
-    result[IE_PROTO] = O;
-  } else result = createDict();
-  return Properties === undefined ? result : dPs(result, Properties);
-};
-
-
-/***/ }),
-/* 247 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var dP = __webpack_require__(72);
-var anObject = __webpack_require__(35);
-var getKeys = __webpack_require__(171);
-
-module.exports = __webpack_require__(51) ? Object.defineProperties : function defineProperties(O, Properties) {
-  anObject(O);
-  var keys = getKeys(Properties);
-  var length = keys.length;
-  var i = 0;
-  var P;
-  while (length > i) dP.f(O, P = keys[i++], Properties[P]);
-  return O;
-};
-
-
-/***/ }),
-/* 248 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 19.1.2.9 / 15.2.3.2 Object.getPrototypeOf(O)
-var has = __webpack_require__(71);
-var toObject = __webpack_require__(172);
-var IE_PROTO = __webpack_require__(96)('IE_PROTO');
-var ObjectProto = Object.prototype;
-
-module.exports = Object.getPrototypeOf || function (O) {
-  O = toObject(O);
-  if (has(O, IE_PROTO)) return O[IE_PROTO];
-  if (typeof O.constructor == 'function' && O instanceof O.constructor) {
-    return O.constructor.prototype;
-  } return O instanceof Object ? ObjectProto : null;
-};
-
-
-/***/ }),
-/* 249 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var has = __webpack_require__(71);
-var toIObject = __webpack_require__(98);
-var arrayIndexOf = __webpack_require__(236)(false);
-var IE_PROTO = __webpack_require__(96)('IE_PROTO');
-
-module.exports = function (object, names) {
-  var O = toIObject(object);
-  var i = 0;
-  var result = [];
-  var key;
-  for (key in O) if (key != IE_PROTO) has(O, key) && result.push(key);
-  // Don't enum bug & hidden keys
-  while (names.length > i) if (has(O, key = names[i++])) {
-    ~arrayIndexOf(result, key) || result.push(key);
-  }
-  return result;
-};
-
-
-/***/ }),
-/* 250 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var hide = __webpack_require__(42);
-module.exports = function (target, src, safe) {
-  for (var key in src) {
-    if (safe && target[key]) target[key] = src[key];
-    else hide(target, key, src[key]);
-  } return target;
-};
-
-
-/***/ }),
-/* 251 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(42);
-
-
-/***/ }),
-/* 252 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var global = __webpack_require__(17);
-var core = __webpack_require__(31);
-var dP = __webpack_require__(72);
-var DESCRIPTORS = __webpack_require__(51);
-var SPECIES = __webpack_require__(20)('species');
-
-module.exports = function (KEY) {
-  var C = typeof core[KEY] == 'function' ? core[KEY] : global[KEY];
-  if (DESCRIPTORS && C && !C[SPECIES]) dP.f(C, SPECIES, {
-    configurable: true,
-    get: function () { return this; }
-  });
-};
-
-
-/***/ }),
-/* 253 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var toInteger = __webpack_require__(97);
-var defined = __webpack_require__(91);
-// true  -> String#at
-// false -> String#codePointAt
-module.exports = function (TO_STRING) {
-  return function (that, pos) {
-    var s = String(defined(that));
-    var i = toInteger(pos);
-    var l = s.length;
-    var a, b;
-    if (i < 0 || i >= l) return TO_STRING ? '' : undefined;
-    a = s.charCodeAt(i);
-    return a < 0xd800 || a > 0xdbff || i + 1 === l || (b = s.charCodeAt(i + 1)) < 0xdc00 || b > 0xdfff
-      ? TO_STRING ? s.charAt(i) : a
-      : TO_STRING ? s.slice(i, i + 2) : (a - 0xd800 << 10) + (b - 0xdc00) + 0x10000;
-  };
-};
-
-
-/***/ }),
-/* 254 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var toInteger = __webpack_require__(97);
-var max = Math.max;
-var min = Math.min;
-module.exports = function (index, length) {
-  index = toInteger(index);
-  return index < 0 ? max(index + length, 0) : min(index, length);
-};
-
-
-/***/ }),
-/* 255 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 7.1.1 ToPrimitive(input [, PreferredType])
-var isObject = __webpack_require__(52);
-// instead of the ES6 spec version, we didn't implement @@toPrimitive case
-// and the second argument - flag - preferred type is a string
-module.exports = function (it, S) {
-  if (!isObject(it)) return it;
-  var fn, val;
-  if (S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
-  if (typeof (fn = it.valueOf) == 'function' && !isObject(val = fn.call(it))) return val;
-  if (!S && typeof (fn = it.toString) == 'function' && !isObject(val = fn.call(it))) return val;
-  throw TypeError("Can't convert object to primitive value");
-};
-
-
-/***/ }),
-/* 256 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var global = __webpack_require__(17);
-var navigator = global.navigator;
-
-module.exports = navigator && navigator.userAgent || '';
-
-
-/***/ }),
-/* 257 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var classof = __webpack_require__(126);
-var ITERATOR = __webpack_require__(20)('iterator');
-var Iterators = __webpack_require__(53);
-module.exports = __webpack_require__(31).getIteratorMethod = function (it) {
-  if (it != undefined) return it[ITERATOR]
-    || it['@@iterator']
-    || Iterators[classof(it)];
-};
-
-
-/***/ }),
-/* 258 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var addToUnscopables = __webpack_require__(234);
-var step = __webpack_require__(244);
-var Iterators = __webpack_require__(53);
-var toIObject = __webpack_require__(98);
-
-// 22.1.3.4 Array.prototype.entries()
-// 22.1.3.13 Array.prototype.keys()
-// 22.1.3.29 Array.prototype.values()
-// 22.1.3.30 Array.prototype[@@iterator]()
-module.exports = __webpack_require__(129)(Array, 'Array', function (iterated, kind) {
-  this._t = toIObject(iterated); // target
-  this._i = 0;                   // next index
-  this._k = kind;                // kind
-// 22.1.5.2.1 %ArrayIteratorPrototype%.next()
-}, function () {
-  var O = this._t;
-  var kind = this._k;
-  var index = this._i++;
-  if (!O || index >= O.length) {
-    this._t = undefined;
-    return step(1);
-  }
-  if (kind == 'keys') return step(0, index);
-  if (kind == 'values') return step(0, O[index]);
-  return step(0, [index, O[index]]);
-}, 'values');
-
-// argumentsList[@@iterator] is %ArrayProto_values% (9.4.4.6, 9.4.4.7)
-Iterators.Arguments = Iterators.Array;
-
-addToUnscopables('keys');
-addToUnscopables('values');
-addToUnscopables('entries');
-
-
-/***/ }),
-/* 259 */
-/***/ (function(module, exports) {
-
-
-
-/***/ }),
-/* 260 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var LIBRARY = __webpack_require__(93);
-var global = __webpack_require__(17);
-var ctx = __webpack_require__(70);
-var classof = __webpack_require__(126);
-var $export = __webpack_require__(60);
-var isObject = __webpack_require__(52);
-var aFunction = __webpack_require__(68);
-var anInstance = __webpack_require__(235);
-var forOf = __webpack_require__(237);
-var speciesConstructor = __webpack_require__(134);
-var task = __webpack_require__(135).set;
-var microtask = __webpack_require__(245)();
-var newPromiseCapabilityModule = __webpack_require__(94);
-var perform = __webpack_require__(130);
-var userAgent = __webpack_require__(256);
-var promiseResolve = __webpack_require__(131);
-var PROMISE = 'Promise';
-var TypeError = global.TypeError;
-var process = global.process;
-var versions = process && process.versions;
-var v8 = versions && versions.v8 || '';
-var $Promise = global[PROMISE];
-var isNode = classof(process) == 'process';
-var empty = function () { /* empty */ };
-var Internal, newGenericPromiseCapability, OwnPromiseCapability, Wrapper;
-var newPromiseCapability = newGenericPromiseCapability = newPromiseCapabilityModule.f;
-
-var USE_NATIVE = !!function () {
-  try {
-    // correct subclassing with @@species support
-    var promise = $Promise.resolve(1);
-    var FakePromise = (promise.constructor = {})[__webpack_require__(20)('species')] = function (exec) {
-      exec(empty, empty);
-    };
-    // unhandled rejections tracking support, NodeJS Promise without it fails @@species test
-    return (isNode || typeof PromiseRejectionEvent == 'function')
-      && promise.then(empty) instanceof FakePromise
-      // v8 6.6 (Node 10 and Chrome 66) have a bug with resolving custom thenables
-      // https://bugs.chromium.org/p/chromium/issues/detail?id=830565
-      // we can't detect it synchronously, so just check versions
-      && v8.indexOf('6.6') !== 0
-      && userAgent.indexOf('Chrome/66') === -1;
-  } catch (e) { /* empty */ }
-}();
-
-// helpers
-var isThenable = function (it) {
-  var then;
-  return isObject(it) && typeof (then = it.then) == 'function' ? then : false;
-};
-var notify = function (promise, isReject) {
-  if (promise._n) return;
-  promise._n = true;
-  var chain = promise._c;
-  microtask(function () {
-    var value = promise._v;
-    var ok = promise._s == 1;
-    var i = 0;
-    var run = function (reaction) {
-      var handler = ok ? reaction.ok : reaction.fail;
-      var resolve = reaction.resolve;
-      var reject = reaction.reject;
-      var domain = reaction.domain;
-      var result, then, exited;
-      try {
-        if (handler) {
-          if (!ok) {
-            if (promise._h == 2) onHandleUnhandled(promise);
-            promise._h = 1;
-          }
-          if (handler === true) result = value;
-          else {
-            if (domain) domain.enter();
-            result = handler(value); // may throw
-            if (domain) {
-              domain.exit();
-              exited = true;
-            }
-          }
-          if (result === reaction.promise) {
-            reject(TypeError('Promise-chain cycle'));
-          } else if (then = isThenable(result)) {
-            then.call(result, resolve, reject);
-          } else resolve(result);
-        } else reject(value);
-      } catch (e) {
-        if (domain && !exited) domain.exit();
-        reject(e);
-      }
-    };
-    while (chain.length > i) run(chain[i++]); // variable length - can't use forEach
-    promise._c = [];
-    promise._n = false;
-    if (isReject && !promise._h) onUnhandled(promise);
-  });
-};
-var onUnhandled = function (promise) {
-  task.call(global, function () {
-    var value = promise._v;
-    var unhandled = isUnhandled(promise);
-    var result, handler, console;
-    if (unhandled) {
-      result = perform(function () {
-        if (isNode) {
-          process.emit('unhandledRejection', value, promise);
-        } else if (handler = global.onunhandledrejection) {
-          handler({ promise: promise, reason: value });
-        } else if ((console = global.console) && console.error) {
-          console.error('Unhandled promise rejection', value);
-        }
-      });
-      // Browsers should not trigger `rejectionHandled` event if it was handled here, NodeJS - should
-      promise._h = isNode || isUnhandled(promise) ? 2 : 1;
-    } promise._a = undefined;
-    if (unhandled && result.e) throw result.v;
-  });
-};
-var isUnhandled = function (promise) {
-  return promise._h !== 1 && (promise._a || promise._c).length === 0;
-};
-var onHandleUnhandled = function (promise) {
-  task.call(global, function () {
-    var handler;
-    if (isNode) {
-      process.emit('rejectionHandled', promise);
-    } else if (handler = global.onrejectionhandled) {
-      handler({ promise: promise, reason: promise._v });
-    }
-  });
-};
-var $reject = function (value) {
-  var promise = this;
-  if (promise._d) return;
-  promise._d = true;
-  promise = promise._w || promise; // unwrap
-  promise._v = value;
-  promise._s = 2;
-  if (!promise._a) promise._a = promise._c.slice();
-  notify(promise, true);
-};
-var $resolve = function (value) {
-  var promise = this;
-  var then;
-  if (promise._d) return;
-  promise._d = true;
-  promise = promise._w || promise; // unwrap
-  try {
-    if (promise === value) throw TypeError("Promise can't be resolved itself");
-    if (then = isThenable(value)) {
-      microtask(function () {
-        var wrapper = { _w: promise, _d: false }; // wrap
-        try {
-          then.call(value, ctx($resolve, wrapper, 1), ctx($reject, wrapper, 1));
-        } catch (e) {
-          $reject.call(wrapper, e);
-        }
-      });
-    } else {
-      promise._v = value;
-      promise._s = 1;
-      notify(promise, false);
-    }
-  } catch (e) {
-    $reject.call({ _w: promise, _d: false }, e); // wrap
-  }
-};
-
-// constructor polyfill
-if (!USE_NATIVE) {
-  // 25.4.3.1 Promise(executor)
-  $Promise = function Promise(executor) {
-    anInstance(this, $Promise, PROMISE, '_h');
-    aFunction(executor);
-    Internal.call(this);
-    try {
-      executor(ctx($resolve, this, 1), ctx($reject, this, 1));
-    } catch (err) {
-      $reject.call(this, err);
-    }
-  };
-  // eslint-disable-next-line no-unused-vars
-  Internal = function Promise(executor) {
-    this._c = [];             // <- awaiting reactions
-    this._a = undefined;      // <- checked in isUnhandled reactions
-    this._s = 0;              // <- state
-    this._d = false;          // <- done
-    this._v = undefined;      // <- value
-    this._h = 0;              // <- rejection state, 0 - default, 1 - handled, 2 - unhandled
-    this._n = false;          // <- notify
-  };
-  Internal.prototype = __webpack_require__(250)($Promise.prototype, {
-    // 25.4.5.3 Promise.prototype.then(onFulfilled, onRejected)
-    then: function then(onFulfilled, onRejected) {
-      var reaction = newPromiseCapability(speciesConstructor(this, $Promise));
-      reaction.ok = typeof onFulfilled == 'function' ? onFulfilled : true;
-      reaction.fail = typeof onRejected == 'function' && onRejected;
-      reaction.domain = isNode ? process.domain : undefined;
-      this._c.push(reaction);
-      if (this._a) this._a.push(reaction);
-      if (this._s) notify(this, false);
-      return reaction.promise;
-    },
-    // 25.4.5.1 Promise.prototype.catch(onRejected)
-    'catch': function (onRejected) {
-      return this.then(undefined, onRejected);
-    }
-  });
-  OwnPromiseCapability = function () {
-    var promise = new Internal();
-    this.promise = promise;
-    this.resolve = ctx($resolve, promise, 1);
-    this.reject = ctx($reject, promise, 1);
-  };
-  newPromiseCapabilityModule.f = newPromiseCapability = function (C) {
-    return C === $Promise || C === Wrapper
-      ? new OwnPromiseCapability(C)
-      : newGenericPromiseCapability(C);
-  };
-}
-
-$export($export.G + $export.W + $export.F * !USE_NATIVE, { Promise: $Promise });
-__webpack_require__(95)($Promise, PROMISE);
-__webpack_require__(252)(PROMISE);
-Wrapper = __webpack_require__(31)[PROMISE];
-
-// statics
-$export($export.S + $export.F * !USE_NATIVE, PROMISE, {
-  // 25.4.4.5 Promise.reject(r)
-  reject: function reject(r) {
-    var capability = newPromiseCapability(this);
-    var $$reject = capability.reject;
-    $$reject(r);
-    return capability.promise;
-  }
-});
-$export($export.S + $export.F * (LIBRARY || !USE_NATIVE), PROMISE, {
-  // 25.4.4.6 Promise.resolve(x)
-  resolve: function resolve(x) {
-    return promiseResolve(LIBRARY && this === Wrapper ? $Promise : this, x);
-  }
-});
-$export($export.S + $export.F * !(USE_NATIVE && __webpack_require__(243)(function (iter) {
-  $Promise.all(iter)['catch'](empty);
-})), PROMISE, {
-  // 25.4.4.1 Promise.all(iterable)
-  all: function all(iterable) {
-    var C = this;
-    var capability = newPromiseCapability(C);
-    var resolve = capability.resolve;
-    var reject = capability.reject;
-    var result = perform(function () {
-      var values = [];
-      var index = 0;
-      var remaining = 1;
-      forOf(iterable, false, function (promise) {
-        var $index = index++;
-        var alreadyCalled = false;
-        values.push(undefined);
-        remaining++;
-        C.resolve(promise).then(function (value) {
-          if (alreadyCalled) return;
-          alreadyCalled = true;
-          values[$index] = value;
-          --remaining || resolve(values);
-        }, reject);
-      });
-      --remaining || resolve(values);
-    });
-    if (result.e) reject(result.v);
-    return capability.promise;
-  },
-  // 25.4.4.4 Promise.race(iterable)
-  race: function race(iterable) {
-    var C = this;
-    var capability = newPromiseCapability(C);
-    var reject = capability.reject;
-    var result = perform(function () {
-      forOf(iterable, false, function (promise) {
-        C.resolve(promise).then(capability.resolve, reject);
-      });
-    });
-    if (result.e) reject(result.v);
-    return capability.promise;
-  }
-});
-
-
-/***/ }),
-/* 261 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var $at = __webpack_require__(253)(true);
-
-// 21.1.3.27 String.prototype[@@iterator]()
-__webpack_require__(129)(String, 'String', function (iterated) {
-  this._t = String(iterated); // target
-  this._i = 0;                // next index
-// 21.1.5.2.1 %StringIteratorPrototype%.next()
-}, function () {
-  var O = this._t;
-  var index = this._i;
-  var point;
-  if (index >= O.length) return { value: undefined, done: true };
-  point = $at(O, index);
-  this._i += point.length;
-  return { value: point, done: false };
-});
-
-
-/***/ }),
-/* 262 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// https://github.com/tc39/proposal-promise-finally
-
-var $export = __webpack_require__(60);
-var core = __webpack_require__(31);
-var global = __webpack_require__(17);
-var speciesConstructor = __webpack_require__(134);
-var promiseResolve = __webpack_require__(131);
-
-$export($export.P + $export.R, 'Promise', { 'finally': function (onFinally) {
-  var C = speciesConstructor(this, core.Promise || global.Promise);
-  var isFunction = typeof onFinally == 'function';
-  return this.then(
-    isFunction ? function (x) {
-      return promiseResolve(C, onFinally()).then(function () { return x; });
-    } : onFinally,
-    isFunction ? function (e) {
-      return promiseResolve(C, onFinally()).then(function () { throw e; });
-    } : onFinally
-  );
-} });
-
-
-/***/ }),
-/* 263 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-// https://github.com/tc39/proposal-promise-try
-var $export = __webpack_require__(60);
-var newPromiseCapability = __webpack_require__(94);
-var perform = __webpack_require__(130);
-
-$export($export.S, 'Promise', { 'try': function (callbackfn) {
-  var promiseCapability = newPromiseCapability.f(this);
-  var result = perform(callbackfn);
-  (result.e ? promiseCapability.reject : promiseCapability.resolve)(result.v);
-  return promiseCapability.promise;
-} });
-
-
-/***/ }),
-/* 264 */
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__(258);
-var global = __webpack_require__(17);
-var hide = __webpack_require__(42);
-var Iterators = __webpack_require__(53);
-var TO_STRING_TAG = __webpack_require__(20)('toStringTag');
-
-var DOMIterables = ('CSSRuleList,CSSStyleDeclaration,CSSValueList,ClientRectList,DOMRectList,DOMStringList,' +
-  'DOMTokenList,DataTransferItemList,FileList,HTMLAllCollection,HTMLCollection,HTMLFormElement,HTMLSelectElement,' +
-  'MediaList,MimeTypeArray,NamedNodeMap,NodeList,PaintRequestList,Plugin,PluginArray,SVGLengthList,SVGNumberList,' +
-  'SVGPathSegList,SVGPointList,SVGStringList,SVGTransformList,SourceBufferList,StyleSheetList,TextTrackCueList,' +
-  'TextTrackList,TouchList').split(',');
-
-for (var i = 0; i < DOMIterables.length; i++) {
-  var NAME = DOMIterables[i];
-  var Collection = global[NAME];
-  var proto = Collection && Collection.prototype;
-  if (proto && !proto[TO_STRING_TAG]) hide(proto, TO_STRING_TAG, NAME);
-  Iterators[NAME] = Iterators.Array;
-}
-
-
-/***/ }),
-/* 265 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/**
- * This is the web browser implementation of `debug()`.
- *
- * Expose `debug()` as the module.
- */
-
-exports = module.exports = __webpack_require__(138);
-exports.log = log;
-exports.formatArgs = formatArgs;
-exports.save = save;
-exports.load = load;
-exports.useColors = useColors;
-exports.storage = 'undefined' != typeof chrome
-               && 'undefined' != typeof chrome.storage
-                  ? chrome.storage.local
-                  : localstorage();
-
-/**
- * Colors.
- */
-
-exports.colors = [
-  '#0000CC', '#0000FF', '#0033CC', '#0033FF', '#0066CC', '#0066FF', '#0099CC',
-  '#0099FF', '#00CC00', '#00CC33', '#00CC66', '#00CC99', '#00CCCC', '#00CCFF',
-  '#3300CC', '#3300FF', '#3333CC', '#3333FF', '#3366CC', '#3366FF', '#3399CC',
-  '#3399FF', '#33CC00', '#33CC33', '#33CC66', '#33CC99', '#33CCCC', '#33CCFF',
-  '#6600CC', '#6600FF', '#6633CC', '#6633FF', '#66CC00', '#66CC33', '#9900CC',
-  '#9900FF', '#9933CC', '#9933FF', '#99CC00', '#99CC33', '#CC0000', '#CC0033',
-  '#CC0066', '#CC0099', '#CC00CC', '#CC00FF', '#CC3300', '#CC3333', '#CC3366',
-  '#CC3399', '#CC33CC', '#CC33FF', '#CC6600', '#CC6633', '#CC9900', '#CC9933',
-  '#CCCC00', '#CCCC33', '#FF0000', '#FF0033', '#FF0066', '#FF0099', '#FF00CC',
-  '#FF00FF', '#FF3300', '#FF3333', '#FF3366', '#FF3399', '#FF33CC', '#FF33FF',
-  '#FF6600', '#FF6633', '#FF9900', '#FF9933', '#FFCC00', '#FFCC33'
-];
-
-/**
- * Currently only WebKit-based Web Inspectors, Firefox >= v31,
- * and the Firebug extension (any Firefox version) are known
- * to support "%c" CSS customizations.
- *
- * TODO: add a `localStorage` variable to explicitly enable/disable colors
- */
-
-function useColors() {
-  // NB: In an Electron preload script, document will be defined but not fully
-  // initialized. Since we know we're in Chrome, we'll just detect this case
-  // explicitly
-  if (typeof window !== 'undefined' && window.process && window.process.type === 'renderer') {
-    return true;
-  }
-
-  // Internet Explorer and Edge do not support colors.
-  if (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/(edge|trident)\/(\d+)/)) {
-    return false;
-  }
-
-  // is webkit? http://stackoverflow.com/a/16459606/376773
-  // document is undefined in react-native: https://github.com/facebook/react-native/pull/1632
-  return (typeof document !== 'undefined' && document.documentElement && document.documentElement.style && document.documentElement.style.WebkitAppearance) ||
-    // is firebug? http://stackoverflow.com/a/398120/376773
-    (typeof window !== 'undefined' && window.console && (window.console.firebug || (window.console.exception && window.console.table))) ||
-    // is firefox >= v31?
-    // https://developer.mozilla.org/en-US/docs/Tools/Web_Console#Styling_messages
-    (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/firefox\/(\d+)/) && parseInt(RegExp.$1, 10) >= 31) ||
-    // double check webkit in userAgent just in case we are in a worker
-    (typeof navigator !== 'undefined' && navigator.userAgent && navigator.userAgent.toLowerCase().match(/applewebkit\/(\d+)/));
-}
-
-/**
- * Map %j to `JSON.stringify()`, since no Web Inspectors do that by default.
- */
-
-exports.formatters.j = function(v) {
-  try {
-    return JSON.stringify(v);
-  } catch (err) {
-    return '[UnexpectedJSONParseError]: ' + err.message;
-  }
-};
-
-
-/**
- * Colorize log arguments if enabled.
- *
- * @api public
- */
-
-function formatArgs(args) {
-  var useColors = this.useColors;
-
-  args[0] = (useColors ? '%c' : '')
-    + this.namespace
-    + (useColors ? ' %c' : ' ')
-    + args[0]
-    + (useColors ? '%c ' : ' ')
-    + '+' + exports.humanize(this.diff);
-
-  if (!useColors) return;
-
-  var c = 'color: ' + this.color;
-  args.splice(1, 0, c, 'color: inherit')
-
-  // the final "%c" is somewhat tricky, because there could be other
-  // arguments passed either before or after the %c, so we need to
-  // figure out the correct index to insert the CSS into
-  var index = 0;
-  var lastC = 0;
-  args[0].replace(/%[a-zA-Z%]/g, function(match) {
-    if ('%%' === match) return;
-    index++;
-    if ('%c' === match) {
-      // we only are interested in the *last* %c
-      // (the user may have provided their own)
-      lastC = index;
-    }
-  });
-
-  args.splice(lastC, 0, c);
-}
-
-/**
- * Invokes `console.log()` when available.
- * No-op when `console.log` is not a "function".
- *
- * @api public
- */
-
-function log() {
-  // this hackery is required for IE8/9, where
-  // the `console.log` function doesn't have 'apply'
-  return 'object' === typeof console
-    && console.log
-    && Function.prototype.apply.call(console.log, console, arguments);
-}
-
-/**
- * Save `namespaces`.
- *
- * @param {String} namespaces
- * @api private
- */
-
-function save(namespaces) {
-  try {
-    if (null == namespaces) {
-      exports.storage.removeItem('debug');
-    } else {
-      exports.storage.debug = namespaces;
-    }
-  } catch(e) {}
-}
-
-/**
- * Load `namespaces`.
- *
- * @return {String} returns the previously persisted debug modes
- * @api private
- */
-
-function load() {
-  var r;
-  try {
-    r = exports.storage.debug;
-  } catch(e) {}
-
-  // If debug isn't set in LS, and we're in Electron, try to load $DEBUG
-  if (!r && typeof process !== 'undefined' && 'env' in process) {
-    r = process.env.DEBUG;
-  }
-
-  return r;
-}
-
-/**
- * Enable namespaces listed in `localStorage.debug` initially.
- */
-
-exports.enable(load());
-
-/**
- * Localstorage attempts to return the localstorage.
- *
- * This is necessary because safari throws
- * when a user disables cookies/localstorage
- * and you attempt to access it.
- *
- * @return {LocalStorage}
- * @api private
- */
-
-function localstorage() {
-  try {
-    return window.localStorage;
-  } catch (e) {}
-}
-
-
-/***/ }),
-/* 266 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/**
- * Detect Electron renderer process, which is node, but we should
- * treat as a browser.
- */
-
-if (typeof process === 'undefined' || process.type === 'renderer') {
-  module.exports = __webpack_require__(265);
-} else {
-  module.exports = __webpack_require__(267);
-}
-
-
-/***/ }),
-/* 267 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/**
- * Module dependencies.
- */
-
-var tty = __webpack_require__(104);
-var util = __webpack_require__(3);
-
-/**
- * This is the Node.js implementation of `debug()`.
- *
- * Expose `debug()` as the module.
- */
-
-exports = module.exports = __webpack_require__(138);
-exports.init = init;
-exports.log = log;
-exports.formatArgs = formatArgs;
-exports.save = save;
-exports.load = load;
-exports.useColors = useColors;
-
-/**
- * Colors.
- */
-
-exports.colors = [ 6, 2, 3, 4, 5, 1 ];
-
-try {
-  var supportsColor = __webpack_require__(330);
-  if (supportsColor && supportsColor.level >= 2) {
-    exports.colors = [
-      20, 21, 26, 27, 32, 33, 38, 39, 40, 41, 42, 43, 44, 45, 56, 57, 62, 63, 68,
-      69, 74, 75, 76, 77, 78, 79, 80, 81, 92, 93, 98, 99, 112, 113, 128, 129, 134,
-      135, 148, 149, 160, 161, 162, 163, 164, 165, 166, 167, 168, 169, 170, 171,
-      172, 173, 178, 179, 184, 185, 196, 197, 198, 199, 200, 201, 202, 203, 204,
-      205, 206, 207, 208, 209, 214, 215, 220, 221
-    ];
-  }
-} catch (err) {
-  // swallow - we only care if `supports-color` is available; it doesn't have to be.
-}
-
-/**
- * Build up the default `inspectOpts` object from the environment variables.
- *
- *   $ DEBUG_COLORS=no DEBUG_DEPTH=10 DEBUG_SHOW_HIDDEN=enabled node script.js
- */
-
-exports.inspectOpts = Object.keys(process.env).filter(function (key) {
-  return /^debug_/i.test(key);
-}).reduce(function (obj, key) {
-  // camel-case
-  var prop = key
-    .substring(6)
-    .toLowerCase()
-    .replace(/_([a-z])/g, function (_, k) { return k.toUpperCase() });
-
-  // coerce string value into JS value
-  var val = process.env[key];
-  if (/^(yes|on|true|enabled)$/i.test(val)) val = true;
-  else if (/^(no|off|false|disabled)$/i.test(val)) val = false;
-  else if (val === 'null') val = null;
-  else val = Number(val);
-
-  obj[prop] = val;
-  return obj;
-}, {});
-
-/**
- * Is stdout a TTY? Colored output is enabled when `true`.
- */
-
-function useColors() {
-  return 'colors' in exports.inspectOpts
-    ? Boolean(exports.inspectOpts.colors)
-    : tty.isatty(process.stderr.fd);
-}
-
-/**
- * Map %o to `util.inspect()`, all on a single line.
- */
-
-exports.formatters.o = function(v) {
-  this.inspectOpts.colors = this.useColors;
-  return util.inspect(v, this.inspectOpts)
-    .split('\n').map(function(str) {
-      return str.trim()
-    }).join(' ');
-};
-
-/**
- * Map %o to `util.inspect()`, allowing multiple lines if needed.
- */
-
-exports.formatters.O = function(v) {
-  this.inspectOpts.colors = this.useColors;
-  return util.inspect(v, this.inspectOpts);
-};
-
-/**
- * Adds ANSI color escape codes if enabled.
- *
- * @api public
- */
-
-function formatArgs(args) {
-  var name = this.namespace;
-  var useColors = this.useColors;
-
-  if (useColors) {
-    var c = this.color;
-    var colorCode = '\u001b[3' + (c < 8 ? c : '8;5;' + c);
-    var prefix = '  ' + colorCode + ';1m' + name + ' ' + '\u001b[0m';
-
-    args[0] = prefix + args[0].split('\n').join('\n' + prefix);
-    args.push(colorCode + 'm+' + exports.humanize(this.diff) + '\u001b[0m');
-  } else {
-    args[0] = getDate() + name + ' ' + args[0];
-  }
-}
-
-function getDate() {
-  if (exports.inspectOpts.hideDate) {
-    return '';
-  } else {
-    return new Date().toISOString() + ' ';
-  }
-}
-
-/**
- * Invokes `util.format()` with the specified arguments and writes to stderr.
- */
-
-function log() {
-  return process.stderr.write(util.format.apply(util, arguments) + '\n');
-}
-
-/**
- * Save `namespaces`.
- *
- * @param {String} namespaces
- * @api private
- */
-
-function save(namespaces) {
-  if (null == namespaces) {
-    // If you set a process.env field to null or undefined, it gets cast to the
-    // string 'null' or 'undefined'. Just delete instead.
-    delete process.env.DEBUG;
-  } else {
-    process.env.DEBUG = namespaces;
-  }
-}
-
-/**
- * Load `namespaces`.
- *
- * @return {String} returns the previously persisted debug modes
- * @api private
- */
-
-function load() {
-  return process.env.DEBUG;
-}
-
-/**
- * Init logic for `debug` instances.
- *
- * Create a new `inspectOpts` object in case `useColors` is set
- * differently for a particular `debug` instance.
- */
-
-function init (debug) {
-  debug.inspectOpts = {};
-
-  var keys = Object.keys(exports.inspectOpts);
-  for (var i = 0; i < keys.length; i++) {
-    debug.inspectOpts[keys[i]] = exports.inspectOpts[keys[i]];
-  }
-}
-
-/**
- * Enable namespaces listed in `process.env.DEBUG` initially.
- */
-
-exports.enable(load());
-
-
-/***/ }),
-/* 268 */
-/***/ (function(module, exports, __webpack_require__) {
-
-(function webpackUniversalModuleDefinition(root, factory) {
-/* istanbul ignore next */
-	if(true)
-		module.exports = factory();
-	else if(typeof define === 'function' && define.amd)
-		define([], factory);
-/* istanbul ignore next */
-	else if(typeof exports === 'object')
-		exports["esprima"] = factory();
-	else
-		root["esprima"] = factory();
-})(this, function() {
-return /******/ (function(modules) { // webpackBootstrap
-/******/ 	// The module cache
-/******/ 	var installedModules = {};
-
-/******/ 	// The require function
-/******/ 	function __webpack_require__(moduleId) {
-
-/******/ 		// Check if module is in cache
-/* istanbul ignore if */
-/******/ 		if(installedModules[moduleId])
-/******/ 			return installedModules[moduleId].exports;
-
-/******/ 		// Create a new module (and put it into the cache)
-/******/ 		var module = installedModules[moduleId] = {
-/******/ 			exports: {},
-/******/ 			id: moduleId,
-/******/ 			loaded: false
-/******/ 		};
-
-/******/ 		// Execute the module function
-/******/ 		modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
-
-/******/ 		// Flag the module as loaded
-/******/ 		module.loaded = true;
-
-/******/ 		// Return the exports of the module
-/******/ 		return module.exports;
-/******/ 	}
-
-
-/******/ 	// expose the modules object (__webpack_modules__)
-/******/ 	__webpack_require__.m = modules;
-
-/******/ 	// expose the module cache
-/******/ 	__webpack_require__.c = installedModules;
-
-/******/ 	// __webpack_public_path__
-/******/ 	__webpack_require__.p = "";
-
-/******/ 	// Load entry module and return exports
-/******/ 	return __webpack_require__(0);
-/******/ })
-/************************************************************************/
-/******/ ([
-/* 0 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	/*
-	  Copyright JS Foundation and other contributors, https://js.foundation/
-
-	  Redistribution and use in source and binary forms, with or without
-	  modification, are permitted provided that the following conditions are met:
-
-	    * Redistributions of source code must retain the above copyright
-	      notice, this list of conditions and the following disclaimer.
-	    * Redistributions in binary form must reproduce the above copyright
-	      notice, this list of conditions and the following disclaimer in the
-	      documentation and/or other materials provided with the distribution.
-
-	  THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-	  AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-	  IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-	  ARE DISCLAIMED. IN NO EVENT SHALL <COPYRIGHT HOLDER> BE LIABLE FOR ANY
-	  DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES
-	  (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES;
-	  LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND
-	  ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
-	  (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
-	  THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
-	*/
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var comment_handler_1 = __webpack_require__(1);
-	var jsx_parser_1 = __webpack_require__(3);
-	var parser_1 = __webpack_require__(8);
-	var tokenizer_1 = __webpack_require__(15);
-	function parse(code, options, delegate) {
-	    var commentHandler = null;
-	    var proxyDelegate = function (node, metadata) {
-	        if (delegate) {
-	            delegate(node, metadata);
-	        }
-	        if (commentHandler) {
-	            commentHandler.visit(node, metadata);
-	        }
-	    };
-	    var parserDelegate = (typeof delegate === 'function') ? proxyDelegate : null;
-	    var collectComment = false;
-	    if (options) {
-	        collectComment = (typeof options.comment === 'boolean' && options.comment);
-	        var attachComment = (typeof options.attachComment === 'boolean' && options.attachComment);
-	        if (collectComment || attachComment) {
-	            commentHandler = new comment_handler_1.CommentHandler();
-	            commentHandler.attach = attachComment;
-	            options.comment = true;
-	            parserDelegate = proxyDelegate;
-	        }
-	    }
-	    var isModule = false;
-	    if (options && typeof options.sourceType === 'string') {
-	        isModule = (options.sourceType === 'module');
-	    }
-	    var parser;
-	    if (options && typeof options.jsx === 'boolean' && options.jsx) {
-	        parser = new jsx_parser_1.JSXParser(code, options, parserDelegate);
-	    }
-	    else {
-	        parser = new parser_1.Parser(code, options, parserDelegate);
-	    }
-	    var program = isModule ? parser.parseModule() : parser.parseScript();
-	    var ast = program;
-	    if (collectComment && commentHandler) {
-	        ast.comments = commentHandler.comments;
-	    }
-	    if (parser.config.tokens) {
-	        ast.tokens = parser.tokens;
-	    }
-	    if (parser.config.tolerant) {
-	        ast.errors = parser.errorHandler.errors;
-	    }
-	    return ast;
-	}
-	exports.parse = parse;
-	function parseModule(code, options, delegate) {
-	    var parsingOptions = options || {};
-	    parsingOptions.sourceType = 'module';
-	    return parse(code, parsingOptions, delegate);
-	}
-	exports.parseModule = parseModule;
-	function parseScript(code, options, delegate) {
-	    var parsingOptions = options || {};
-	    parsingOptions.sourceType = 'script';
-	    return parse(code, parsingOptions, delegate);
-	}
-	exports.parseScript = parseScript;
-	function tokenize(code, options, delegate) {
-	    var tokenizer = new tokenizer_1.Tokenizer(code, options);
-	    var tokens;
-	    tokens = [];
-	    try {
-	        while (true) {
-	            var token = tokenizer.getNextToken();
-	            if (!token) {
-	                break;
-	            }
-	            if (delegate) {
-	                token = delegate(token);
-	            }
-	            tokens.push(token);
-	        }
-	    }
-	    catch (e) {
-	        tokenizer.errorHandler.tolerate(e);
-	    }
-	    if (tokenizer.errorHandler.tolerant) {
-	        tokens.errors = tokenizer.errors();
-	    }
-	    return tokens;
-	}
-	exports.tokenize = tokenize;
-	var syntax_1 = __webpack_require__(2);
-	exports.Syntax = syntax_1.Syntax;
-	// Sync with *.json manifests.
-	exports.version = '4.0.1';
-
-
-/***/ },
-/* 1 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var syntax_1 = __webpack_require__(2);
-	var CommentHandler = (function () {
-	    function CommentHandler() {
-	        this.attach = false;
-	        this.comments = [];
-	        this.stack = [];
-	        this.leading = [];
-	        this.trailing = [];
-	    }
-	    CommentHandler.prototype.insertInnerComments = function (node, metadata) {
-	        //  innnerComments for properties empty block
-	        //  `function a() {/** comments **\/}`
-	        if (node.type === syntax_1.Syntax.BlockStatement && node.body.length === 0) {
-	            var innerComments = [];
-	            for (var i = this.leading.length - 1; i >= 0; --i) {
-	                var entry = this.leading[i];
-	                if (metadata.end.offset >= entry.start) {
-	                    innerComments.unshift(entry.comment);
-	                    this.leading.splice(i, 1);
-	                    this.trailing.splice(i, 1);
-	                }
-	            }
-	            if (innerComments.length) {
-	                node.innerComments = innerComments;
-	            }
-	        }
-	    };
-	    CommentHandler.prototype.findTrailingComments = function (metadata) {
-	        var trailingComments = [];
-	        if (this.trailing.length > 0) {
-	            for (var i = this.trailing.length - 1; i >= 0; --i) {
-	                var entry_1 = this.trailing[i];
-	                if (entry_1.start >= metadata.end.offset) {
-	                    trailingComments.unshift(entry_1.comment);
-	                }
-	            }
-	            this.trailing.length = 0;
-	            return trailingComments;
-	        }
-	        var entry = this.stack[this.stack.length - 1];
-	        if (entry && entry.node.trailingComments) {
-	            var firstComment = entry.node.trailingComments[0];
-	            if (firstComment && firstComment.range[0] >= metadata.end.offset) {
-	                trailingComments = entry.node.trailingComments;
-	                delete entry.node.trailingComments;
-	            }
-	        }
-	        return trailingComments;
-	    };
-	    CommentHandler.prototype.findLeadingComments = function (metadata) {
-	        var leadingComments = [];
-	        var target;
-	        while (this.stack.length > 0) {
-	            var entry = this.stack[this.stack.length - 1];
-	            if (entry && entry.start >= metadata.start.offset) {
-	                target = entry.node;
-	                this.stack.pop();
-	            }
-	            else {
-	                break;
-	            }
-	        }
-	        if (target) {
-	            var count = target.leadingComments ? target.leadingComments.length : 0;
-	            for (var i = count - 1; i >= 0; --i) {
-	                var comment = target.leadingComments[i];
-	                if (comment.range[1] <= metadata.start.offset) {
-	                    leadingComments.unshift(comment);
-	                    target.leadingComments.splice(i, 1);
-	                }
-	            }
-	            if (target.leadingComments && target.leadingComments.length === 0) {
-	                delete target.leadingComments;
-	            }
-	            return leadingComments;
-	        }
-	        for (var i = this.leading.length - 1; i >= 0; --i) {
-	            var entry = this.leading[i];
-	            if (entry.start <= metadata.start.offset) {
-	                leadingComments.unshift(entry.comment);
-	                this.leading.splice(i, 1);
-	            }
-	        }
-	        return leadingComments;
-	    };
-	    CommentHandler.prototype.visitNode = function (node, metadata) {
-	        if (node.type === syntax_1.Syntax.Program && node.body.length > 0) {
-	            return;
-	        }
-	        this.insertInnerComments(node, metadata);
-	        var trailingComments = this.findTrailingComments(metadata);
-	        var leadingComments = this.findLeadingComments(metadata);
-	        if (leadingComments.length > 0) {
-	            node.leadingComments = leadingComments;
-	        }
-	        if (trailingComments.length > 0) {
-	            node.trailingComments = trailingComments;
-	        }
-	        this.stack.push({
-	            node: node,
-	            start: metadata.start.offset
-	        });
-	    };
-	    CommentHandler.prototype.visitComment = function (node, metadata) {
-	        var type = (node.type[0] === 'L') ? 'Line' : 'Block';
-	        var comment = {
-	            type: type,
-	            value: node.value
-	        };
-	        if (node.range) {
-	            comment.range = node.range;
-	        }
-	        if (node.loc) {
-	            comment.loc = node.loc;
-	        }
-	        this.comments.push(comment);
-	        if (this.attach) {
-	            var entry = {
-	                comment: {
-	                    type: type,
-	                    value: node.value,
-	                    range: [metadata.start.offset, metadata.end.offset]
-	                },
-	                start: metadata.start.offset
-	            };
-	            if (node.loc) {
-	                entry.comment.loc = node.loc;
-	            }
-	            node.type = type;
-	            this.leading.push(entry);
-	            this.trailing.push(entry);
-	        }
-	    };
-	    CommentHandler.prototype.visit = function (node, metadata) {
-	        if (node.type === 'LineComment') {
-	            this.visitComment(node, metadata);
-	        }
-	        else if (node.type === 'BlockComment') {
-	            this.visitComment(node, metadata);
-	        }
-	        else if (this.attach) {
-	            this.visitNode(node, metadata);
-	        }
-	    };
-	    return CommentHandler;
-	}());
-	exports.CommentHandler = CommentHandler;
-
-
-/***/ },
-/* 2 */
-/***/ function(module, exports) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.Syntax = {
-	    AssignmentExpression: 'AssignmentExpression',
-	    AssignmentPattern: 'AssignmentPattern',
-	    ArrayExpression: 'ArrayExpression',
-	    ArrayPattern: 'ArrayPattern',
-	    ArrowFunctionExpression: 'ArrowFunctionExpression',
-	    AwaitExpression: 'AwaitExpression',
-	    BlockStatement: 'BlockStatement',
-	    BinaryExpression: 'BinaryExpression',
-	    BreakStatement: 'BreakStatement',
-	    CallExpression: 'CallExpression',
-	    CatchClause: 'CatchClause',
-	    ClassBody: 'ClassBody',
-	    ClassDeclaration: 'ClassDeclaration',
-	    ClassExpression: 'ClassExpression',
-	    ConditionalExpression: 'ConditionalExpression',
-	    ContinueStatement: 'ContinueStatement',
-	    DoWhileStatement: 'DoWhileStatement',
-	    DebuggerStatement: 'DebuggerStatement',
-	    EmptyStatement: 'EmptyStatement',
-	    ExportAllDeclaration: 'ExportAllDeclaration',
-	    ExportDefaultDeclaration: 'ExportDefaultDeclaration',
-	    ExportNamedDeclaration: 'ExportNamedDeclaration',
-	    ExportSpecifier: 'ExportSpecifier',
-	    ExpressionStatement: 'ExpressionStatement',
-	    ForStatement: 'ForStatement',
-	    ForOfStatement: 'ForOfStatement',
-	    ForInStatement: 'ForInStatement',
-	    FunctionDeclaration: 'FunctionDeclaration',
-	    FunctionExpression: 'FunctionExpression',
-	    Identifier: 'Identifier',
-	    IfStatement: 'IfStatement',
-	    ImportDeclaration: 'ImportDeclaration',
-	    ImportDefaultSpecifier: 'ImportDefaultSpecifier',
-	    ImportNamespaceSpecifier: 'ImportNamespaceSpecifier',
-	    ImportSpecifier: 'ImportSpecifier',
-	    Literal: 'Literal',
-	    LabeledStatement: 'LabeledStatement',
-	    LogicalExpression: 'LogicalExpression',
-	    MemberExpression: 'MemberExpression',
-	    MetaProperty: 'MetaProperty',
-	    MethodDefinition: 'MethodDefinition',
-	    NewExpression: 'NewExpression',
-	    ObjectExpression: 'ObjectExpression',
-	    ObjectPattern: 'ObjectPattern',
-	    Program: 'Program',
-	    Property: 'Property',
-	    RestElement: 'RestElement',
-	    ReturnStatement: 'ReturnStatement',
-	    SequenceExpression: 'SequenceExpression',
-	    SpreadElement: 'SpreadElement',
-	    Super: 'Super',
-	    SwitchCase: 'SwitchCase',
-	    SwitchStatement: 'SwitchStatement',
-	    TaggedTemplateExpression: 'TaggedTemplateExpression',
-	    TemplateElement: 'TemplateElement',
-	    TemplateLiteral: 'TemplateLiteral',
-	    ThisExpression: 'ThisExpression',
-	    ThrowStatement: 'ThrowStatement',
-	    TryStatement: 'TryStatement',
-	    UnaryExpression: 'UnaryExpression',
-	    UpdateExpression: 'UpdateExpression',
-	    VariableDeclaration: 'VariableDeclaration',
-	    VariableDeclarator: 'VariableDeclarator',
-	    WhileStatement: 'WhileStatement',
-	    WithStatement: 'WithStatement',
-	    YieldExpression: 'YieldExpression'
-	};
-
-
-/***/ },
-/* 3 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-/* istanbul ignore next */
-	var __extends = (this && this.__extends) || (function () {
-	    var extendStatics = Object.setPrototypeOf ||
-	        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-	        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-	    return function (d, b) {
-	        extendStatics(d, b);
-	        function __() { this.constructor = d; }
-	        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-	    };
-	})();
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var character_1 = __webpack_require__(4);
-	var JSXNode = __webpack_require__(5);
-	var jsx_syntax_1 = __webpack_require__(6);
-	var Node = __webpack_require__(7);
-	var parser_1 = __webpack_require__(8);
-	var token_1 = __webpack_require__(13);
-	var xhtml_entities_1 = __webpack_require__(14);
-	token_1.TokenName[100 /* Identifier */] = 'JSXIdentifier';
-	token_1.TokenName[101 /* Text */] = 'JSXText';
-	// Fully qualified element name, e.g. <svg:path> returns "svg:path"
-	function getQualifiedElementName(elementName) {
-	    var qualifiedName;
-	    switch (elementName.type) {
-	        case jsx_syntax_1.JSXSyntax.JSXIdentifier:
-	            var id = elementName;
-	            qualifiedName = id.name;
-	            break;
-	        case jsx_syntax_1.JSXSyntax.JSXNamespacedName:
-	            var ns = elementName;
-	            qualifiedName = getQualifiedElementName(ns.namespace) + ':' +
-	                getQualifiedElementName(ns.name);
-	            break;
-	        case jsx_syntax_1.JSXSyntax.JSXMemberExpression:
-	            var expr = elementName;
-	            qualifiedName = getQualifiedElementName(expr.object) + '.' +
-	                getQualifiedElementName(expr.property);
-	            break;
-	        /* istanbul ignore next */
-	        default:
-	            break;
-	    }
-	    return qualifiedName;
-	}
-	var JSXParser = (function (_super) {
-	    __extends(JSXParser, _super);
-	    function JSXParser(code, options, delegate) {
-	        return _super.call(this, code, options, delegate) || this;
-	    }
-	    JSXParser.prototype.parsePrimaryExpression = function () {
-	        return this.match('<') ? this.parseJSXRoot() : _super.prototype.parsePrimaryExpression.call(this);
-	    };
-	    JSXParser.prototype.startJSX = function () {
-	        // Unwind the scanner before the lookahead token.
-	        this.scanner.index = this.startMarker.index;
-	        this.scanner.lineNumber = this.startMarker.line;
-	        this.scanner.lineStart = this.startMarker.index - this.startMarker.column;
-	    };
-	    JSXParser.prototype.finishJSX = function () {
-	        // Prime the next lookahead.
-	        this.nextToken();
-	    };
-	    JSXParser.prototype.reenterJSX = function () {
-	        this.startJSX();
-	        this.expectJSX('}');
-	        // Pop the closing '}' added from the lookahead.
-	        if (this.config.tokens) {
-	            this.tokens.pop();
-	        }
-	    };
-	    JSXParser.prototype.createJSXNode = function () {
-	        this.collectComments();
-	        return {
-	            index: this.scanner.index,
-	            line: this.scanner.lineNumber,
-	            column: this.scanner.index - this.scanner.lineStart
-	        };
-	    };
-	    JSXParser.prototype.createJSXChildNode = function () {
-	        return {
-	            index: this.scanner.index,
-	            line: this.scanner.lineNumber,
-	            column: this.scanner.index - this.scanner.lineStart
-	        };
-	    };
-	    JSXParser.prototype.scanXHTMLEntity = function (quote) {
-	        var result = '&';
-	        var valid = true;
-	        var terminated = false;
-	        var numeric = false;
-	        var hex = false;
-	        while (!this.scanner.eof() && valid && !terminated) {
-	            var ch = this.scanner.source[this.scanner.index];
-	            if (ch === quote) {
-	                break;
-	            }
-	            terminated = (ch === ';');
-	            result += ch;
-	            ++this.scanner.index;
-	            if (!terminated) {
-	                switch (result.length) {
-	                    case 2:
-	                        // e.g. '&#123;'
-	                        numeric = (ch === '#');
-	                        break;
-	                    case 3:
-	                        if (numeric) {
-	                            // e.g. '&#x41;'
-	                            hex = (ch === 'x');
-	                            valid = hex || character_1.Character.isDecimalDigit(ch.charCodeAt(0));
-	                            numeric = numeric && !hex;
-	                        }
-	                        break;
-	                    default:
-	                        valid = valid && !(numeric && !character_1.Character.isDecimalDigit(ch.charCodeAt(0)));
-	                        valid = valid && !(hex && !character_1.Character.isHexDigit(ch.charCodeAt(0)));
-	                        break;
-	                }
-	            }
-	        }
-	        if (valid && terminated && result.length > 2) {
-	            // e.g. '&#x41;' becomes just '#x41'
-	            var str = result.substr(1, result.length - 2);
-	            if (numeric && str.length > 1) {
-	                result = String.fromCharCode(parseInt(str.substr(1), 10));
-	            }
-	            else if (hex && str.length > 2) {
-	                result = String.fromCharCode(parseInt('0' + str.substr(1), 16));
-	            }
-	            else if (!numeric && !hex && xhtml_entities_1.XHTMLEntities[str]) {
-	                result = xhtml_entities_1.XHTMLEntities[str];
-	            }
-	        }
-	        return result;
-	    };
-	    // Scan the next JSX token. This replaces Scanner#lex when in JSX mode.
-	    JSXParser.prototype.lexJSX = function () {
-	        var cp = this.scanner.source.charCodeAt(this.scanner.index);
-	        // < > / : = { }
-	        if (cp === 60 || cp === 62 || cp === 47 || cp === 58 || cp === 61 || cp === 123 || cp === 125) {
-	            var value = this.scanner.source[this.scanner.index++];
-	            return {
-	                type: 7 /* Punctuator */,
-	                value: value,
-	                lineNumber: this.scanner.lineNumber,
-	                lineStart: this.scanner.lineStart,
-	                start: this.scanner.index - 1,
-	                end: this.scanner.index
-	            };
-	        }
-	        // " '
-	        if (cp === 34 || cp === 39) {
-	            var start = this.scanner.index;
-	            var quote = this.scanner.source[this.scanner.index++];
-	            var str = '';
-	            while (!this.scanner.eof()) {
-	                var ch = this.scanner.source[this.scanner.index++];
-	                if (ch === quote) {
-	                    break;
-	                }
-	                else if (ch === '&') {
-	                    str += this.scanXHTMLEntity(quote);
-	                }
-	                else {
-	                    str += ch;
-	                }
-	            }
-	            return {
-	                type: 8 /* StringLiteral */,
-	                value: str,
-	                lineNumber: this.scanner.lineNumber,
-	                lineStart: this.scanner.lineStart,
-	                start: start,
-	                end: this.scanner.index
-	            };
-	        }
-	        // ... or .
-	        if (cp === 46) {
-	            var n1 = this.scanner.source.charCodeAt(this.scanner.index + 1);
-	            var n2 = this.scanner.source.charCodeAt(this.scanner.index + 2);
-	            var value = (n1 === 46 && n2 === 46) ? '...' : '.';
-	            var start = this.scanner.index;
-	            this.scanner.index += value.length;
-	            return {
-	                type: 7 /* Punctuator */,
-	                value: value,
-	                lineNumber: this.scanner.lineNumber,
-	                lineStart: this.scanner.lineStart,
-	                start: start,
-	                end: this.scanner.index
-	            };
-	        }
-	        // `
-	        if (cp === 96) {
-	            // Only placeholder, since it will be rescanned as a real assignment expression.
-	            return {
-	                type: 10 /* Template */,
-	                value: '',
-	                lineNumber: this.scanner.lineNumber,
-	                lineStart: this.scanner.lineStart,
-	                start: this.scanner.index,
-	                end: this.scanner.index
-	            };
-	        }
-	        // Identifer can not contain backslash (char code 92).
-	        if (character_1.Character.isIdentifierStart(cp) && (cp !== 92)) {
-	            var start = this.scanner.index;
-	            ++this.scanner.index;
-	            while (!this.scanner.eof()) {
-	                var ch = this.scanner.source.charCodeAt(this.scanner.index);
-	                if (character_1.Character.isIdentifierPart(ch) && (ch !== 92)) {
-	                    ++this.scanner.index;
-	                }
-	                else if (ch === 45) {
-	                    // Hyphen (char code 45) can be part of an identifier.
-	                    ++this.scanner.index;
-	                }
-	                else {
-	                    break;
-	                }
-	            }
-	            var id = this.scanner.source.slice(start, this.scanner.index);
-	            return {
-	                type: 100 /* Identifier */,
-	                value: id,
-	                lineNumber: this.scanner.lineNumber,
-	                lineStart: this.scanner.lineStart,
-	                start: start,
-	                end: this.scanner.index
-	            };
-	        }
-	        return this.scanner.lex();
-	    };
-	    JSXParser.prototype.nextJSXToken = function () {
-	        this.collectComments();
-	        this.startMarker.index = this.scanner.index;
-	        this.startMarker.line = this.scanner.lineNumber;
-	        this.startMarker.column = this.scanner.index - this.scanner.lineStart;
-	        var token = this.lexJSX();
-	        this.lastMarker.index = this.scanner.index;
-	        this.lastMarker.line = this.scanner.lineNumber;
-	        this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
-	        if (this.config.tokens) {
-	            this.tokens.push(this.convertToken(token));
-	        }
-	        return token;
-	    };
-	    JSXParser.prototype.nextJSXText = function () {
-	        this.startMarker.index = this.scanner.index;
-	        this.startMarker.line = this.scanner.lineNumber;
-	        this.startMarker.column = this.scanner.index - this.scanner.lineStart;
-	        var start = this.scanner.index;
-	        var text = '';
-	        while (!this.scanner.eof()) {
-	            var ch = this.scanner.source[this.scanner.index];
-	            if (ch === '{' || ch === '<') {
-	                break;
-	            }
-	            ++this.scanner.index;
-	            text += ch;
-	            if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                ++this.scanner.lineNumber;
-	                if (ch === '\r' && this.scanner.source[this.scanner.index] === '\n') {
-	                    ++this.scanner.index;
-	                }
-	                this.scanner.lineStart = this.scanner.index;
-	            }
-	        }
-	        this.lastMarker.index = this.scanner.index;
-	        this.lastMarker.line = this.scanner.lineNumber;
-	        this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
-	        var token = {
-	            type: 101 /* Text */,
-	            value: text,
-	            lineNumber: this.scanner.lineNumber,
-	            lineStart: this.scanner.lineStart,
-	            start: start,
-	            end: this.scanner.index
-	        };
-	        if ((text.length > 0) && this.config.tokens) {
-	            this.tokens.push(this.convertToken(token));
-	        }
-	        return token;
-	    };
-	    JSXParser.prototype.peekJSXToken = function () {
-	        var state = this.scanner.saveState();
-	        this.scanner.scanComments();
-	        var next = this.lexJSX();
-	        this.scanner.restoreState(state);
-	        return next;
-	    };
-	    // Expect the next JSX token to match the specified punctuator.
-	    // If not, an exception will be thrown.
-	    JSXParser.prototype.expectJSX = function (value) {
-	        var token = this.nextJSXToken();
-	        if (token.type !== 7 /* Punctuator */ || token.value !== value) {
-	            this.throwUnexpectedToken(token);
-	        }
-	    };
-	    // Return true if the next JSX token matches the specified punctuator.
-	    JSXParser.prototype.matchJSX = function (value) {
-	        var next = this.peekJSXToken();
-	        return next.type === 7 /* Punctuator */ && next.value === value;
-	    };
-	    JSXParser.prototype.parseJSXIdentifier = function () {
-	        var node = this.createJSXNode();
-	        var token = this.nextJSXToken();
-	        if (token.type !== 100 /* Identifier */) {
-	            this.throwUnexpectedToken(token);
-	        }
-	        return this.finalize(node, new JSXNode.JSXIdentifier(token.value));
-	    };
-	    JSXParser.prototype.parseJSXElementName = function () {
-	        var node = this.createJSXNode();
-	        var elementName = this.parseJSXIdentifier();
-	        if (this.matchJSX(':')) {
-	            var namespace = elementName;
-	            this.expectJSX(':');
-	            var name_1 = this.parseJSXIdentifier();
-	            elementName = this.finalize(node, new JSXNode.JSXNamespacedName(namespace, name_1));
-	        }
-	        else if (this.matchJSX('.')) {
-	            while (this.matchJSX('.')) {
-	                var object = elementName;
-	                this.expectJSX('.');
-	                var property = this.parseJSXIdentifier();
-	                elementName = this.finalize(node, new JSXNode.JSXMemberExpression(object, property));
-	            }
-	        }
-	        return elementName;
-	    };
-	    JSXParser.prototype.parseJSXAttributeName = function () {
-	        var node = this.createJSXNode();
-	        var attributeName;
-	        var identifier = this.parseJSXIdentifier();
-	        if (this.matchJSX(':')) {
-	            var namespace = identifier;
-	            this.expectJSX(':');
-	            var name_2 = this.parseJSXIdentifier();
-	            attributeName = this.finalize(node, new JSXNode.JSXNamespacedName(namespace, name_2));
-	        }
-	        else {
-	            attributeName = identifier;
-	        }
-	        return attributeName;
-	    };
-	    JSXParser.prototype.parseJSXStringLiteralAttribute = function () {
-	        var node = this.createJSXNode();
-	        var token = this.nextJSXToken();
-	        if (token.type !== 8 /* StringLiteral */) {
-	            this.throwUnexpectedToken(token);
-	        }
-	        var raw = this.getTokenRaw(token);
-	        return this.finalize(node, new Node.Literal(token.value, raw));
-	    };
-	    JSXParser.prototype.parseJSXExpressionAttribute = function () {
-	        var node = this.createJSXNode();
-	        this.expectJSX('{');
-	        this.finishJSX();
-	        if (this.match('}')) {
-	            this.tolerateError('JSX attributes must only be assigned a non-empty expression');
-	        }
-	        var expression = this.parseAssignmentExpression();
-	        this.reenterJSX();
-	        return this.finalize(node, new JSXNode.JSXExpressionContainer(expression));
-	    };
-	    JSXParser.prototype.parseJSXAttributeValue = function () {
-	        return this.matchJSX('{') ? this.parseJSXExpressionAttribute() :
-	            this.matchJSX('<') ? this.parseJSXElement() : this.parseJSXStringLiteralAttribute();
-	    };
-	    JSXParser.prototype.parseJSXNameValueAttribute = function () {
-	        var node = this.createJSXNode();
-	        var name = this.parseJSXAttributeName();
-	        var value = null;
-	        if (this.matchJSX('=')) {
-	            this.expectJSX('=');
-	            value = this.parseJSXAttributeValue();
-	        }
-	        return this.finalize(node, new JSXNode.JSXAttribute(name, value));
-	    };
-	    JSXParser.prototype.parseJSXSpreadAttribute = function () {
-	        var node = this.createJSXNode();
-	        this.expectJSX('{');
-	        this.expectJSX('...');
-	        this.finishJSX();
-	        var argument = this.parseAssignmentExpression();
-	        this.reenterJSX();
-	        return this.finalize(node, new JSXNode.JSXSpreadAttribute(argument));
-	    };
-	    JSXParser.prototype.parseJSXAttributes = function () {
-	        var attributes = [];
-	        while (!this.matchJSX('/') && !this.matchJSX('>')) {
-	            var attribute = this.matchJSX('{') ? this.parseJSXSpreadAttribute() :
-	                this.parseJSXNameValueAttribute();
-	            attributes.push(attribute);
-	        }
-	        return attributes;
-	    };
-	    JSXParser.prototype.parseJSXOpeningElement = function () {
-	        var node = this.createJSXNode();
-	        this.expectJSX('<');
-	        var name = this.parseJSXElementName();
-	        var attributes = this.parseJSXAttributes();
-	        var selfClosing = this.matchJSX('/');
-	        if (selfClosing) {
-	            this.expectJSX('/');
-	        }
-	        this.expectJSX('>');
-	        return this.finalize(node, new JSXNode.JSXOpeningElement(name, selfClosing, attributes));
-	    };
-	    JSXParser.prototype.parseJSXBoundaryElement = function () {
-	        var node = this.createJSXNode();
-	        this.expectJSX('<');
-	        if (this.matchJSX('/')) {
-	            this.expectJSX('/');
-	            var name_3 = this.parseJSXElementName();
-	            this.expectJSX('>');
-	            return this.finalize(node, new JSXNode.JSXClosingElement(name_3));
-	        }
-	        var name = this.parseJSXElementName();
-	        var attributes = this.parseJSXAttributes();
-	        var selfClosing = this.matchJSX('/');
-	        if (selfClosing) {
-	            this.expectJSX('/');
-	        }
-	        this.expectJSX('>');
-	        return this.finalize(node, new JSXNode.JSXOpeningElement(name, selfClosing, attributes));
-	    };
-	    JSXParser.prototype.parseJSXEmptyExpression = function () {
-	        var node = this.createJSXChildNode();
-	        this.collectComments();
-	        this.lastMarker.index = this.scanner.index;
-	        this.lastMarker.line = this.scanner.lineNumber;
-	        this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
-	        return this.finalize(node, new JSXNode.JSXEmptyExpression());
-	    };
-	    JSXParser.prototype.parseJSXExpressionContainer = function () {
-	        var node = this.createJSXNode();
-	        this.expectJSX('{');
-	        var expression;
-	        if (this.matchJSX('}')) {
-	            expression = this.parseJSXEmptyExpression();
-	            this.expectJSX('}');
-	        }
-	        else {
-	            this.finishJSX();
-	            expression = this.parseAssignmentExpression();
-	            this.reenterJSX();
-	        }
-	        return this.finalize(node, new JSXNode.JSXExpressionContainer(expression));
-	    };
-	    JSXParser.prototype.parseJSXChildren = function () {
-	        var children = [];
-	        while (!this.scanner.eof()) {
-	            var node = this.createJSXChildNode();
-	            var token = this.nextJSXText();
-	            if (token.start < token.end) {
-	                var raw = this.getTokenRaw(token);
-	                var child = this.finalize(node, new JSXNode.JSXText(token.value, raw));
-	                children.push(child);
-	            }
-	            if (this.scanner.source[this.scanner.index] === '{') {
-	                var container = this.parseJSXExpressionContainer();
-	                children.push(container);
-	            }
-	            else {
-	                break;
-	            }
-	        }
-	        return children;
-	    };
-	    JSXParser.prototype.parseComplexJSXElement = function (el) {
-	        var stack = [];
-	        while (!this.scanner.eof()) {
-	            el.children = el.children.concat(this.parseJSXChildren());
-	            var node = this.createJSXChildNode();
-	            var element = this.parseJSXBoundaryElement();
-	            if (element.type === jsx_syntax_1.JSXSyntax.JSXOpeningElement) {
-	                var opening = element;
-	                if (opening.selfClosing) {
-	                    var child = this.finalize(node, new JSXNode.JSXElement(opening, [], null));
-	                    el.children.push(child);
-	                }
-	                else {
-	                    stack.push(el);
-	                    el = { node: node, opening: opening, closing: null, children: [] };
-	                }
-	            }
-	            if (element.type === jsx_syntax_1.JSXSyntax.JSXClosingElement) {
-	                el.closing = element;
-	                var open_1 = getQualifiedElementName(el.opening.name);
-	                var close_1 = getQualifiedElementName(el.closing.name);
-	                if (open_1 !== close_1) {
-	                    this.tolerateError('Expected corresponding JSX closing tag for %0', open_1);
-	                }
-	                if (stack.length > 0) {
-	                    var child = this.finalize(el.node, new JSXNode.JSXElement(el.opening, el.children, el.closing));
-	                    el = stack[stack.length - 1];
-	                    el.children.push(child);
-	                    stack.pop();
-	                }
-	                else {
-	                    break;
-	                }
-	            }
-	        }
-	        return el;
-	    };
-	    JSXParser.prototype.parseJSXElement = function () {
-	        var node = this.createJSXNode();
-	        var opening = this.parseJSXOpeningElement();
-	        var children = [];
-	        var closing = null;
-	        if (!opening.selfClosing) {
-	            var el = this.parseComplexJSXElement({ node: node, opening: opening, closing: closing, children: children });
-	            children = el.children;
-	            closing = el.closing;
-	        }
-	        return this.finalize(node, new JSXNode.JSXElement(opening, children, closing));
-	    };
-	    JSXParser.prototype.parseJSXRoot = function () {
-	        // Pop the opening '<' added from the lookahead.
-	        if (this.config.tokens) {
-	            this.tokens.pop();
-	        }
-	        this.startJSX();
-	        var element = this.parseJSXElement();
-	        this.finishJSX();
-	        return element;
-	    };
-	    JSXParser.prototype.isStartOfExpression = function () {
-	        return _super.prototype.isStartOfExpression.call(this) || this.match('<');
-	    };
-	    return JSXParser;
-	}(parser_1.Parser));
-	exports.JSXParser = JSXParser;
-
-
-/***/ },
-/* 4 */
-/***/ function(module, exports) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	// See also tools/generate-unicode-regex.js.
-	var Regex = {
-	    // Unicode v8.0.0 NonAsciiIdentifierStart:
-	    NonAsciiIdentifierStart: /[\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B4\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0AF9\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58-\u0C5A\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D5F-\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u3005-\u3007\u3021-\u3029\u3031-\u3035\u3038-\u303C\u3041-\u3096\u309B-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6EF\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA8FD\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDE80-\uDE9C\uDEA0-\uDED0\uDF00-\uDF1F\uDF30-\uDF4A\uDF50-\uDF75\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00\uDE10-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE4\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC03-\uDC37\uDC83-\uDCAF\uDCD0-\uDCE8\uDD03-\uDD26\uDD50-\uDD72\uDD76\uDD83-\uDDB2\uDDC1-\uDDC4\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE2B\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEDE\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3D\uDF50\uDF5D-\uDF61]|\uD805[\uDC80-\uDCAF\uDCC4\uDCC5\uDCC7\uDD80-\uDDAE\uDDD8-\uDDDB\uDE00-\uDE2F\uDE44\uDE80-\uDEAA\uDF00-\uDF19]|\uD806[\uDCA0-\uDCDF\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDED0-\uDEED\uDF00-\uDF2F\uDF40-\uDF43\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50\uDF93-\uDF9F]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB]|\uD83A[\uDC00-\uDCC4]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1]|\uD87E[\uDC00-\uDE1D]/,
-	    // Unicode v8.0.0 NonAsciiIdentifierPart:
-	    NonAsciiIdentifierPart: /[\xAA\xB5\xB7\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0300-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u0483-\u0487\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u0591-\u05BD\u05BF\u05C1\u05C2\u05C4\u05C5\u05C7\u05D0-\u05EA\u05F0-\u05F2\u0610-\u061A\u0620-\u0669\u066E-\u06D3\u06D5-\u06DC\u06DF-\u06E8\u06EA-\u06FC\u06FF\u0710-\u074A\u074D-\u07B1\u07C0-\u07F5\u07FA\u0800-\u082D\u0840-\u085B\u08A0-\u08B4\u08E3-\u0963\u0966-\u096F\u0971-\u0983\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BC-\u09C4\u09C7\u09C8\u09CB-\u09CE\u09D7\u09DC\u09DD\u09DF-\u09E3\u09E6-\u09F1\u0A01-\u0A03\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A3C\u0A3E-\u0A42\u0A47\u0A48\u0A4B-\u0A4D\u0A51\u0A59-\u0A5C\u0A5E\u0A66-\u0A75\u0A81-\u0A83\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABC-\u0AC5\u0AC7-\u0AC9\u0ACB-\u0ACD\u0AD0\u0AE0-\u0AE3\u0AE6-\u0AEF\u0AF9\u0B01-\u0B03\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3C-\u0B44\u0B47\u0B48\u0B4B-\u0B4D\u0B56\u0B57\u0B5C\u0B5D\u0B5F-\u0B63\u0B66-\u0B6F\u0B71\u0B82\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BBE-\u0BC2\u0BC6-\u0BC8\u0BCA-\u0BCD\u0BD0\u0BD7\u0BE6-\u0BEF\u0C00-\u0C03\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D-\u0C44\u0C46-\u0C48\u0C4A-\u0C4D\u0C55\u0C56\u0C58-\u0C5A\u0C60-\u0C63\u0C66-\u0C6F\u0C81-\u0C83\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBC-\u0CC4\u0CC6-\u0CC8\u0CCA-\u0CCD\u0CD5\u0CD6\u0CDE\u0CE0-\u0CE3\u0CE6-\u0CEF\u0CF1\u0CF2\u0D01-\u0D03\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D-\u0D44\u0D46-\u0D48\u0D4A-\u0D4E\u0D57\u0D5F-\u0D63\u0D66-\u0D6F\u0D7A-\u0D7F\u0D82\u0D83\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0DCA\u0DCF-\u0DD4\u0DD6\u0DD8-\u0DDF\u0DE6-\u0DEF\u0DF2\u0DF3\u0E01-\u0E3A\u0E40-\u0E4E\u0E50-\u0E59\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB9\u0EBB-\u0EBD\u0EC0-\u0EC4\u0EC6\u0EC8-\u0ECD\u0ED0-\u0ED9\u0EDC-\u0EDF\u0F00\u0F18\u0F19\u0F20-\u0F29\u0F35\u0F37\u0F39\u0F3E-\u0F47\u0F49-\u0F6C\u0F71-\u0F84\u0F86-\u0F97\u0F99-\u0FBC\u0FC6\u1000-\u1049\u1050-\u109D\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u135D-\u135F\u1369-\u1371\u1380-\u138F\u13A0-\u13F5\u13F8-\u13FD\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16EE-\u16F8\u1700-\u170C\u170E-\u1714\u1720-\u1734\u1740-\u1753\u1760-\u176C\u176E-\u1770\u1772\u1773\u1780-\u17D3\u17D7\u17DC\u17DD\u17E0-\u17E9\u180B-\u180D\u1810-\u1819\u1820-\u1877\u1880-\u18AA\u18B0-\u18F5\u1900-\u191E\u1920-\u192B\u1930-\u193B\u1946-\u196D\u1970-\u1974\u1980-\u19AB\u19B0-\u19C9\u19D0-\u19DA\u1A00-\u1A1B\u1A20-\u1A5E\u1A60-\u1A7C\u1A7F-\u1A89\u1A90-\u1A99\u1AA7\u1AB0-\u1ABD\u1B00-\u1B4B\u1B50-\u1B59\u1B6B-\u1B73\u1B80-\u1BF3\u1C00-\u1C37\u1C40-\u1C49\u1C4D-\u1C7D\u1CD0-\u1CD2\u1CD4-\u1CF6\u1CF8\u1CF9\u1D00-\u1DF5\u1DFC-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u200C\u200D\u203F\u2040\u2054\u2071\u207F\u2090-\u209C\u20D0-\u20DC\u20E1\u20E5-\u20F0\u2102\u2107\u210A-\u2113\u2115\u2118-\u211D\u2124\u2126\u2128\u212A-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2160-\u2188\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D7F-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2DE0-\u2DFF\u3005-\u3007\u3021-\u302F\u3031-\u3035\u3038-\u303C\u3041-\u3096\u3099-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FD5\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA62B\uA640-\uA66F\uA674-\uA67D\uA67F-\uA6F1\uA717-\uA71F\uA722-\uA788\uA78B-\uA7AD\uA7B0-\uA7B7\uA7F7-\uA827\uA840-\uA873\uA880-\uA8C4\uA8D0-\uA8D9\uA8E0-\uA8F7\uA8FB\uA8FD\uA900-\uA92D\uA930-\uA953\uA960-\uA97C\uA980-\uA9C0\uA9CF-\uA9D9\uA9E0-\uA9FE\uAA00-\uAA36\uAA40-\uAA4D\uAA50-\uAA59\uAA60-\uAA76\uAA7A-\uAAC2\uAADB-\uAADD\uAAE0-\uAAEF\uAAF2-\uAAF6\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB65\uAB70-\uABEA\uABEC\uABED\uABF0-\uABF9\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE00-\uFE0F\uFE20-\uFE2F\uFE33\uFE34\uFE4D-\uFE4F\uFE70-\uFE74\uFE76-\uFEFC\uFF10-\uFF19\uFF21-\uFF3A\uFF3F\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]|\uD800[\uDC00-\uDC0B\uDC0D-\uDC26\uDC28-\uDC3A\uDC3C\uDC3D\uDC3F-\uDC4D\uDC50-\uDC5D\uDC80-\uDCFA\uDD40-\uDD74\uDDFD\uDE80-\uDE9C\uDEA0-\uDED0\uDEE0\uDF00-\uDF1F\uDF30-\uDF4A\uDF50-\uDF7A\uDF80-\uDF9D\uDFA0-\uDFC3\uDFC8-\uDFCF\uDFD1-\uDFD5]|\uD801[\uDC00-\uDC9D\uDCA0-\uDCA9\uDD00-\uDD27\uDD30-\uDD63\uDE00-\uDF36\uDF40-\uDF55\uDF60-\uDF67]|\uD802[\uDC00-\uDC05\uDC08\uDC0A-\uDC35\uDC37\uDC38\uDC3C\uDC3F-\uDC55\uDC60-\uDC76\uDC80-\uDC9E\uDCE0-\uDCF2\uDCF4\uDCF5\uDD00-\uDD15\uDD20-\uDD39\uDD80-\uDDB7\uDDBE\uDDBF\uDE00-\uDE03\uDE05\uDE06\uDE0C-\uDE13\uDE15-\uDE17\uDE19-\uDE33\uDE38-\uDE3A\uDE3F\uDE60-\uDE7C\uDE80-\uDE9C\uDEC0-\uDEC7\uDEC9-\uDEE6\uDF00-\uDF35\uDF40-\uDF55\uDF60-\uDF72\uDF80-\uDF91]|\uD803[\uDC00-\uDC48\uDC80-\uDCB2\uDCC0-\uDCF2]|\uD804[\uDC00-\uDC46\uDC66-\uDC6F\uDC7F-\uDCBA\uDCD0-\uDCE8\uDCF0-\uDCF9\uDD00-\uDD34\uDD36-\uDD3F\uDD50-\uDD73\uDD76\uDD80-\uDDC4\uDDCA-\uDDCC\uDDD0-\uDDDA\uDDDC\uDE00-\uDE11\uDE13-\uDE37\uDE80-\uDE86\uDE88\uDE8A-\uDE8D\uDE8F-\uDE9D\uDE9F-\uDEA8\uDEB0-\uDEEA\uDEF0-\uDEF9\uDF00-\uDF03\uDF05-\uDF0C\uDF0F\uDF10\uDF13-\uDF28\uDF2A-\uDF30\uDF32\uDF33\uDF35-\uDF39\uDF3C-\uDF44\uDF47\uDF48\uDF4B-\uDF4D\uDF50\uDF57\uDF5D-\uDF63\uDF66-\uDF6C\uDF70-\uDF74]|\uD805[\uDC80-\uDCC5\uDCC7\uDCD0-\uDCD9\uDD80-\uDDB5\uDDB8-\uDDC0\uDDD8-\uDDDD\uDE00-\uDE40\uDE44\uDE50-\uDE59\uDE80-\uDEB7\uDEC0-\uDEC9\uDF00-\uDF19\uDF1D-\uDF2B\uDF30-\uDF39]|\uD806[\uDCA0-\uDCE9\uDCFF\uDEC0-\uDEF8]|\uD808[\uDC00-\uDF99]|\uD809[\uDC00-\uDC6E\uDC80-\uDD43]|[\uD80C\uD840-\uD868\uD86A-\uD86C\uD86F-\uD872][\uDC00-\uDFFF]|\uD80D[\uDC00-\uDC2E]|\uD811[\uDC00-\uDE46]|\uD81A[\uDC00-\uDE38\uDE40-\uDE5E\uDE60-\uDE69\uDED0-\uDEED\uDEF0-\uDEF4\uDF00-\uDF36\uDF40-\uDF43\uDF50-\uDF59\uDF63-\uDF77\uDF7D-\uDF8F]|\uD81B[\uDF00-\uDF44\uDF50-\uDF7E\uDF8F-\uDF9F]|\uD82C[\uDC00\uDC01]|\uD82F[\uDC00-\uDC6A\uDC70-\uDC7C\uDC80-\uDC88\uDC90-\uDC99\uDC9D\uDC9E]|\uD834[\uDD65-\uDD69\uDD6D-\uDD72\uDD7B-\uDD82\uDD85-\uDD8B\uDDAA-\uDDAD\uDE42-\uDE44]|\uD835[\uDC00-\uDC54\uDC56-\uDC9C\uDC9E\uDC9F\uDCA2\uDCA5\uDCA6\uDCA9-\uDCAC\uDCAE-\uDCB9\uDCBB\uDCBD-\uDCC3\uDCC5-\uDD05\uDD07-\uDD0A\uDD0D-\uDD14\uDD16-\uDD1C\uDD1E-\uDD39\uDD3B-\uDD3E\uDD40-\uDD44\uDD46\uDD4A-\uDD50\uDD52-\uDEA5\uDEA8-\uDEC0\uDEC2-\uDEDA\uDEDC-\uDEFA\uDEFC-\uDF14\uDF16-\uDF34\uDF36-\uDF4E\uDF50-\uDF6E\uDF70-\uDF88\uDF8A-\uDFA8\uDFAA-\uDFC2\uDFC4-\uDFCB\uDFCE-\uDFFF]|\uD836[\uDE00-\uDE36\uDE3B-\uDE6C\uDE75\uDE84\uDE9B-\uDE9F\uDEA1-\uDEAF]|\uD83A[\uDC00-\uDCC4\uDCD0-\uDCD6]|\uD83B[\uDE00-\uDE03\uDE05-\uDE1F\uDE21\uDE22\uDE24\uDE27\uDE29-\uDE32\uDE34-\uDE37\uDE39\uDE3B\uDE42\uDE47\uDE49\uDE4B\uDE4D-\uDE4F\uDE51\uDE52\uDE54\uDE57\uDE59\uDE5B\uDE5D\uDE5F\uDE61\uDE62\uDE64\uDE67-\uDE6A\uDE6C-\uDE72\uDE74-\uDE77\uDE79-\uDE7C\uDE7E\uDE80-\uDE89\uDE8B-\uDE9B\uDEA1-\uDEA3\uDEA5-\uDEA9\uDEAB-\uDEBB]|\uD869[\uDC00-\uDED6\uDF00-\uDFFF]|\uD86D[\uDC00-\uDF34\uDF40-\uDFFF]|\uD86E[\uDC00-\uDC1D\uDC20-\uDFFF]|\uD873[\uDC00-\uDEA1]|\uD87E[\uDC00-\uDE1D]|\uDB40[\uDD00-\uDDEF]/
-	};
-	exports.Character = {
-	    /* tslint:disable:no-bitwise */
-	    fromCodePoint: function (cp) {
-	        return (cp < 0x10000) ? String.fromCharCode(cp) :
-	            String.fromCharCode(0xD800 + ((cp - 0x10000) >> 10)) +
-	                String.fromCharCode(0xDC00 + ((cp - 0x10000) & 1023));
-	    },
-	    // https://tc39.github.io/ecma262/#sec-white-space
-	    isWhiteSpace: function (cp) {
-	        return (cp === 0x20) || (cp === 0x09) || (cp === 0x0B) || (cp === 0x0C) || (cp === 0xA0) ||
-	            (cp >= 0x1680 && [0x1680, 0x2000, 0x2001, 0x2002, 0x2003, 0x2004, 0x2005, 0x2006, 0x2007, 0x2008, 0x2009, 0x200A, 0x202F, 0x205F, 0x3000, 0xFEFF].indexOf(cp) >= 0);
-	    },
-	    // https://tc39.github.io/ecma262/#sec-line-terminators
-	    isLineTerminator: function (cp) {
-	        return (cp === 0x0A) || (cp === 0x0D) || (cp === 0x2028) || (cp === 0x2029);
-	    },
-	    // https://tc39.github.io/ecma262/#sec-names-and-keywords
-	    isIdentifierStart: function (cp) {
-	        return (cp === 0x24) || (cp === 0x5F) ||
-	            (cp >= 0x41 && cp <= 0x5A) ||
-	            (cp >= 0x61 && cp <= 0x7A) ||
-	            (cp === 0x5C) ||
-	            ((cp >= 0x80) && Regex.NonAsciiIdentifierStart.test(exports.Character.fromCodePoint(cp)));
-	    },
-	    isIdentifierPart: function (cp) {
-	        return (cp === 0x24) || (cp === 0x5F) ||
-	            (cp >= 0x41 && cp <= 0x5A) ||
-	            (cp >= 0x61 && cp <= 0x7A) ||
-	            (cp >= 0x30 && cp <= 0x39) ||
-	            (cp === 0x5C) ||
-	            ((cp >= 0x80) && Regex.NonAsciiIdentifierPart.test(exports.Character.fromCodePoint(cp)));
-	    },
-	    // https://tc39.github.io/ecma262/#sec-literals-numeric-literals
-	    isDecimalDigit: function (cp) {
-	        return (cp >= 0x30 && cp <= 0x39); // 0..9
-	    },
-	    isHexDigit: function (cp) {
-	        return (cp >= 0x30 && cp <= 0x39) ||
-	            (cp >= 0x41 && cp <= 0x46) ||
-	            (cp >= 0x61 && cp <= 0x66); // a..f
-	    },
-	    isOctalDigit: function (cp) {
-	        return (cp >= 0x30 && cp <= 0x37); // 0..7
-	    }
-	};
-
-
-/***/ },
-/* 5 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var jsx_syntax_1 = __webpack_require__(6);
-	/* tslint:disable:max-classes-per-file */
-	var JSXClosingElement = (function () {
-	    function JSXClosingElement(name) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXClosingElement;
-	        this.name = name;
-	    }
-	    return JSXClosingElement;
-	}());
-	exports.JSXClosingElement = JSXClosingElement;
-	var JSXElement = (function () {
-	    function JSXElement(openingElement, children, closingElement) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXElement;
-	        this.openingElement = openingElement;
-	        this.children = children;
-	        this.closingElement = closingElement;
-	    }
-	    return JSXElement;
-	}());
-	exports.JSXElement = JSXElement;
-	var JSXEmptyExpression = (function () {
-	    function JSXEmptyExpression() {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXEmptyExpression;
-	    }
-	    return JSXEmptyExpression;
-	}());
-	exports.JSXEmptyExpression = JSXEmptyExpression;
-	var JSXExpressionContainer = (function () {
-	    function JSXExpressionContainer(expression) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXExpressionContainer;
-	        this.expression = expression;
-	    }
-	    return JSXExpressionContainer;
-	}());
-	exports.JSXExpressionContainer = JSXExpressionContainer;
-	var JSXIdentifier = (function () {
-	    function JSXIdentifier(name) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXIdentifier;
-	        this.name = name;
-	    }
-	    return JSXIdentifier;
-	}());
-	exports.JSXIdentifier = JSXIdentifier;
-	var JSXMemberExpression = (function () {
-	    function JSXMemberExpression(object, property) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXMemberExpression;
-	        this.object = object;
-	        this.property = property;
-	    }
-	    return JSXMemberExpression;
-	}());
-	exports.JSXMemberExpression = JSXMemberExpression;
-	var JSXAttribute = (function () {
-	    function JSXAttribute(name, value) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXAttribute;
-	        this.name = name;
-	        this.value = value;
-	    }
-	    return JSXAttribute;
-	}());
-	exports.JSXAttribute = JSXAttribute;
-	var JSXNamespacedName = (function () {
-	    function JSXNamespacedName(namespace, name) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXNamespacedName;
-	        this.namespace = namespace;
-	        this.name = name;
-	    }
-	    return JSXNamespacedName;
-	}());
-	exports.JSXNamespacedName = JSXNamespacedName;
-	var JSXOpeningElement = (function () {
-	    function JSXOpeningElement(name, selfClosing, attributes) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXOpeningElement;
-	        this.name = name;
-	        this.selfClosing = selfClosing;
-	        this.attributes = attributes;
-	    }
-	    return JSXOpeningElement;
-	}());
-	exports.JSXOpeningElement = JSXOpeningElement;
-	var JSXSpreadAttribute = (function () {
-	    function JSXSpreadAttribute(argument) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXSpreadAttribute;
-	        this.argument = argument;
-	    }
-	    return JSXSpreadAttribute;
-	}());
-	exports.JSXSpreadAttribute = JSXSpreadAttribute;
-	var JSXText = (function () {
-	    function JSXText(value, raw) {
-	        this.type = jsx_syntax_1.JSXSyntax.JSXText;
-	        this.value = value;
-	        this.raw = raw;
-	    }
-	    return JSXText;
-	}());
-	exports.JSXText = JSXText;
-
-
-/***/ },
-/* 6 */
-/***/ function(module, exports) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.JSXSyntax = {
-	    JSXAttribute: 'JSXAttribute',
-	    JSXClosingElement: 'JSXClosingElement',
-	    JSXElement: 'JSXElement',
-	    JSXEmptyExpression: 'JSXEmptyExpression',
-	    JSXExpressionContainer: 'JSXExpressionContainer',
-	    JSXIdentifier: 'JSXIdentifier',
-	    JSXMemberExpression: 'JSXMemberExpression',
-	    JSXNamespacedName: 'JSXNamespacedName',
-	    JSXOpeningElement: 'JSXOpeningElement',
-	    JSXSpreadAttribute: 'JSXSpreadAttribute',
-	    JSXText: 'JSXText'
-	};
-
-
-/***/ },
-/* 7 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var syntax_1 = __webpack_require__(2);
-	/* tslint:disable:max-classes-per-file */
-	var ArrayExpression = (function () {
-	    function ArrayExpression(elements) {
-	        this.type = syntax_1.Syntax.ArrayExpression;
-	        this.elements = elements;
-	    }
-	    return ArrayExpression;
-	}());
-	exports.ArrayExpression = ArrayExpression;
-	var ArrayPattern = (function () {
-	    function ArrayPattern(elements) {
-	        this.type = syntax_1.Syntax.ArrayPattern;
-	        this.elements = elements;
-	    }
-	    return ArrayPattern;
-	}());
-	exports.ArrayPattern = ArrayPattern;
-	var ArrowFunctionExpression = (function () {
-	    function ArrowFunctionExpression(params, body, expression) {
-	        this.type = syntax_1.Syntax.ArrowFunctionExpression;
-	        this.id = null;
-	        this.params = params;
-	        this.body = body;
-	        this.generator = false;
-	        this.expression = expression;
-	        this.async = false;
-	    }
-	    return ArrowFunctionExpression;
-	}());
-	exports.ArrowFunctionExpression = ArrowFunctionExpression;
-	var AssignmentExpression = (function () {
-	    function AssignmentExpression(operator, left, right) {
-	        this.type = syntax_1.Syntax.AssignmentExpression;
-	        this.operator = operator;
-	        this.left = left;
-	        this.right = right;
-	    }
-	    return AssignmentExpression;
-	}());
-	exports.AssignmentExpression = AssignmentExpression;
-	var AssignmentPattern = (function () {
-	    function AssignmentPattern(left, right) {
-	        this.type = syntax_1.Syntax.AssignmentPattern;
-	        this.left = left;
-	        this.right = right;
-	    }
-	    return AssignmentPattern;
-	}());
-	exports.AssignmentPattern = AssignmentPattern;
-	var AsyncArrowFunctionExpression = (function () {
-	    function AsyncArrowFunctionExpression(params, body, expression) {
-	        this.type = syntax_1.Syntax.ArrowFunctionExpression;
-	        this.id = null;
-	        this.params = params;
-	        this.body = body;
-	        this.generator = false;
-	        this.expression = expression;
-	        this.async = true;
-	    }
-	    return AsyncArrowFunctionExpression;
-	}());
-	exports.AsyncArrowFunctionExpression = AsyncArrowFunctionExpression;
-	var AsyncFunctionDeclaration = (function () {
-	    function AsyncFunctionDeclaration(id, params, body) {
-	        this.type = syntax_1.Syntax.FunctionDeclaration;
-	        this.id = id;
-	        this.params = params;
-	        this.body = body;
-	        this.generator = false;
-	        this.expression = false;
-	        this.async = true;
-	    }
-	    return AsyncFunctionDeclaration;
-	}());
-	exports.AsyncFunctionDeclaration = AsyncFunctionDeclaration;
-	var AsyncFunctionExpression = (function () {
-	    function AsyncFunctionExpression(id, params, body) {
-	        this.type = syntax_1.Syntax.FunctionExpression;
-	        this.id = id;
-	        this.params = params;
-	        this.body = body;
-	        this.generator = false;
-	        this.expression = false;
-	        this.async = true;
-	    }
-	    return AsyncFunctionExpression;
-	}());
-	exports.AsyncFunctionExpression = AsyncFunctionExpression;
-	var AwaitExpression = (function () {
-	    function AwaitExpression(argument) {
-	        this.type = syntax_1.Syntax.AwaitExpression;
-	        this.argument = argument;
-	    }
-	    return AwaitExpression;
-	}());
-	exports.AwaitExpression = AwaitExpression;
-	var BinaryExpression = (function () {
-	    function BinaryExpression(operator, left, right) {
-	        var logical = (operator === '||' || operator === '&&');
-	        this.type = logical ? syntax_1.Syntax.LogicalExpression : syntax_1.Syntax.BinaryExpression;
-	        this.operator = operator;
-	        this.left = left;
-	        this.right = right;
-	    }
-	    return BinaryExpression;
-	}());
-	exports.BinaryExpression = BinaryExpression;
-	var BlockStatement = (function () {
-	    function BlockStatement(body) {
-	        this.type = syntax_1.Syntax.BlockStatement;
-	        this.body = body;
-	    }
-	    return BlockStatement;
-	}());
-	exports.BlockStatement = BlockStatement;
-	var BreakStatement = (function () {
-	    function BreakStatement(label) {
-	        this.type = syntax_1.Syntax.BreakStatement;
-	        this.label = label;
-	    }
-	    return BreakStatement;
-	}());
-	exports.BreakStatement = BreakStatement;
-	var CallExpression = (function () {
-	    function CallExpression(callee, args) {
-	        this.type = syntax_1.Syntax.CallExpression;
-	        this.callee = callee;
-	        this.arguments = args;
-	    }
-	    return CallExpression;
-	}());
-	exports.CallExpression = CallExpression;
-	var CatchClause = (function () {
-	    function CatchClause(param, body) {
-	        this.type = syntax_1.Syntax.CatchClause;
-	        this.param = param;
-	        this.body = body;
-	    }
-	    return CatchClause;
-	}());
-	exports.CatchClause = CatchClause;
-	var ClassBody = (function () {
-	    function ClassBody(body) {
-	        this.type = syntax_1.Syntax.ClassBody;
-	        this.body = body;
-	    }
-	    return ClassBody;
-	}());
-	exports.ClassBody = ClassBody;
-	var ClassDeclaration = (function () {
-	    function ClassDeclaration(id, superClass, body) {
-	        this.type = syntax_1.Syntax.ClassDeclaration;
-	        this.id = id;
-	        this.superClass = superClass;
-	        this.body = body;
-	    }
-	    return ClassDeclaration;
-	}());
-	exports.ClassDeclaration = ClassDeclaration;
-	var ClassExpression = (function () {
-	    function ClassExpression(id, superClass, body) {
-	        this.type = syntax_1.Syntax.ClassExpression;
-	        this.id = id;
-	        this.superClass = superClass;
-	        this.body = body;
-	    }
-	    return ClassExpression;
-	}());
-	exports.ClassExpression = ClassExpression;
-	var ComputedMemberExpression = (function () {
-	    function ComputedMemberExpression(object, property) {
-	        this.type = syntax_1.Syntax.MemberExpression;
-	        this.computed = true;
-	        this.object = object;
-	        this.property = property;
-	    }
-	    return ComputedMemberExpression;
-	}());
-	exports.ComputedMemberExpression = ComputedMemberExpression;
-	var ConditionalExpression = (function () {
-	    function ConditionalExpression(test, consequent, alternate) {
-	        this.type = syntax_1.Syntax.ConditionalExpression;
-	        this.test = test;
-	        this.consequent = consequent;
-	        this.alternate = alternate;
-	    }
-	    return ConditionalExpression;
-	}());
-	exports.ConditionalExpression = ConditionalExpression;
-	var ContinueStatement = (function () {
-	    function ContinueStatement(label) {
-	        this.type = syntax_1.Syntax.ContinueStatement;
-	        this.label = label;
-	    }
-	    return ContinueStatement;
-	}());
-	exports.ContinueStatement = ContinueStatement;
-	var DebuggerStatement = (function () {
-	    function DebuggerStatement() {
-	        this.type = syntax_1.Syntax.DebuggerStatement;
-	    }
-	    return DebuggerStatement;
-	}());
-	exports.DebuggerStatement = DebuggerStatement;
-	var Directive = (function () {
-	    function Directive(expression, directive) {
-	        this.type = syntax_1.Syntax.ExpressionStatement;
-	        this.expression = expression;
-	        this.directive = directive;
-	    }
-	    return Directive;
-	}());
-	exports.Directive = Directive;
-	var DoWhileStatement = (function () {
-	    function DoWhileStatement(body, test) {
-	        this.type = syntax_1.Syntax.DoWhileStatement;
-	        this.body = body;
-	        this.test = test;
-	    }
-	    return DoWhileStatement;
-	}());
-	exports.DoWhileStatement = DoWhileStatement;
-	var EmptyStatement = (function () {
-	    function EmptyStatement() {
-	        this.type = syntax_1.Syntax.EmptyStatement;
-	    }
-	    return EmptyStatement;
-	}());
-	exports.EmptyStatement = EmptyStatement;
-	var ExportAllDeclaration = (function () {
-	    function ExportAllDeclaration(source) {
-	        this.type = syntax_1.Syntax.ExportAllDeclaration;
-	        this.source = source;
-	    }
-	    return ExportAllDeclaration;
-	}());
-	exports.ExportAllDeclaration = ExportAllDeclaration;
-	var ExportDefaultDeclaration = (function () {
-	    function ExportDefaultDeclaration(declaration) {
-	        this.type = syntax_1.Syntax.ExportDefaultDeclaration;
-	        this.declaration = declaration;
-	    }
-	    return ExportDefaultDeclaration;
-	}());
-	exports.ExportDefaultDeclaration = ExportDefaultDeclaration;
-	var ExportNamedDeclaration = (function () {
-	    function ExportNamedDeclaration(declaration, specifiers, source) {
-	        this.type = syntax_1.Syntax.ExportNamedDeclaration;
-	        this.declaration = declaration;
-	        this.specifiers = specifiers;
-	        this.source = source;
-	    }
-	    return ExportNamedDeclaration;
-	}());
-	exports.ExportNamedDeclaration = ExportNamedDeclaration;
-	var ExportSpecifier = (function () {
-	    function ExportSpecifier(local, exported) {
-	        this.type = syntax_1.Syntax.ExportSpecifier;
-	        this.exported = exported;
-	        this.local = local;
-	    }
-	    return ExportSpecifier;
-	}());
-	exports.ExportSpecifier = ExportSpecifier;
-	var ExpressionStatement = (function () {
-	    function ExpressionStatement(expression) {
-	        this.type = syntax_1.Syntax.ExpressionStatement;
-	        this.expression = expression;
-	    }
-	    return ExpressionStatement;
-	}());
-	exports.ExpressionStatement = ExpressionStatement;
-	var ForInStatement = (function () {
-	    function ForInStatement(left, right, body) {
-	        this.type = syntax_1.Syntax.ForInStatement;
-	        this.left = left;
-	        this.right = right;
-	        this.body = body;
-	        this.each = false;
-	    }
-	    return ForInStatement;
-	}());
-	exports.ForInStatement = ForInStatement;
-	var ForOfStatement = (function () {
-	    function ForOfStatement(left, right, body) {
-	        this.type = syntax_1.Syntax.ForOfStatement;
-	        this.left = left;
-	        this.right = right;
-	        this.body = body;
-	    }
-	    return ForOfStatement;
-	}());
-	exports.ForOfStatement = ForOfStatement;
-	var ForStatement = (function () {
-	    function ForStatement(init, test, update, body) {
-	        this.type = syntax_1.Syntax.ForStatement;
-	        this.init = init;
-	        this.test = test;
-	        this.update = update;
-	        this.body = body;
-	    }
-	    return ForStatement;
-	}());
-	exports.ForStatement = ForStatement;
-	var FunctionDeclaration = (function () {
-	    function FunctionDeclaration(id, params, body, generator) {
-	        this.type = syntax_1.Syntax.FunctionDeclaration;
-	        this.id = id;
-	        this.params = params;
-	        this.body = body;
-	        this.generator = generator;
-	        this.expression = false;
-	        this.async = false;
-	    }
-	    return FunctionDeclaration;
-	}());
-	exports.FunctionDeclaration = FunctionDeclaration;
-	var FunctionExpression = (function () {
-	    function FunctionExpression(id, params, body, generator) {
-	        this.type = syntax_1.Syntax.FunctionExpression;
-	        this.id = id;
-	        this.params = params;
-	        this.body = body;
-	        this.generator = generator;
-	        this.expression = false;
-	        this.async = false;
-	    }
-	    return FunctionExpression;
-	}());
-	exports.FunctionExpression = FunctionExpression;
-	var Identifier = (function () {
-	    function Identifier(name) {
-	        this.type = syntax_1.Syntax.Identifier;
-	        this.name = name;
-	    }
-	    return Identifier;
-	}());
-	exports.Identifier = Identifier;
-	var IfStatement = (function () {
-	    function IfStatement(test, consequent, alternate) {
-	        this.type = syntax_1.Syntax.IfStatement;
-	        this.test = test;
-	        this.consequent = consequent;
-	        this.alternate = alternate;
-	    }
-	    return IfStatement;
-	}());
-	exports.IfStatement = IfStatement;
-	var ImportDeclaration = (function () {
-	    function ImportDeclaration(specifiers, source) {
-	        this.type = syntax_1.Syntax.ImportDeclaration;
-	        this.specifiers = specifiers;
-	        this.source = source;
-	    }
-	    return ImportDeclaration;
-	}());
-	exports.ImportDeclaration = ImportDeclaration;
-	var ImportDefaultSpecifier = (function () {
-	    function ImportDefaultSpecifier(local) {
-	        this.type = syntax_1.Syntax.ImportDefaultSpecifier;
-	        this.local = local;
-	    }
-	    return ImportDefaultSpecifier;
-	}());
-	exports.ImportDefaultSpecifier = ImportDefaultSpecifier;
-	var ImportNamespaceSpecifier = (function () {
-	    function ImportNamespaceSpecifier(local) {
-	        this.type = syntax_1.Syntax.ImportNamespaceSpecifier;
-	        this.local = local;
-	    }
-	    return ImportNamespaceSpecifier;
-	}());
-	exports.ImportNamespaceSpecifier = ImportNamespaceSpecifier;
-	var ImportSpecifier = (function () {
-	    function ImportSpecifier(local, imported) {
-	        this.type = syntax_1.Syntax.ImportSpecifier;
-	        this.local = local;
-	        this.imported = imported;
-	    }
-	    return ImportSpecifier;
-	}());
-	exports.ImportSpecifier = ImportSpecifier;
-	var LabeledStatement = (function () {
-	    function LabeledStatement(label, body) {
-	        this.type = syntax_1.Syntax.LabeledStatement;
-	        this.label = label;
-	        this.body = body;
-	    }
-	    return LabeledStatement;
-	}());
-	exports.LabeledStatement = LabeledStatement;
-	var Literal = (function () {
-	    function Literal(value, raw) {
-	        this.type = syntax_1.Syntax.Literal;
-	        this.value = value;
-	        this.raw = raw;
-	    }
-	    return Literal;
-	}());
-	exports.Literal = Literal;
-	var MetaProperty = (function () {
-	    function MetaProperty(meta, property) {
-	        this.type = syntax_1.Syntax.MetaProperty;
-	        this.meta = meta;
-	        this.property = property;
-	    }
-	    return MetaProperty;
-	}());
-	exports.MetaProperty = MetaProperty;
-	var MethodDefinition = (function () {
-	    function MethodDefinition(key, computed, value, kind, isStatic) {
-	        this.type = syntax_1.Syntax.MethodDefinition;
-	        this.key = key;
-	        this.computed = computed;
-	        this.value = value;
-	        this.kind = kind;
-	        this.static = isStatic;
-	    }
-	    return MethodDefinition;
-	}());
-	exports.MethodDefinition = MethodDefinition;
-	var Module = (function () {
-	    function Module(body) {
-	        this.type = syntax_1.Syntax.Program;
-	        this.body = body;
-	        this.sourceType = 'module';
-	    }
-	    return Module;
-	}());
-	exports.Module = Module;
-	var NewExpression = (function () {
-	    function NewExpression(callee, args) {
-	        this.type = syntax_1.Syntax.NewExpression;
-	        this.callee = callee;
-	        this.arguments = args;
-	    }
-	    return NewExpression;
-	}());
-	exports.NewExpression = NewExpression;
-	var ObjectExpression = (function () {
-	    function ObjectExpression(properties) {
-	        this.type = syntax_1.Syntax.ObjectExpression;
-	        this.properties = properties;
-	    }
-	    return ObjectExpression;
-	}());
-	exports.ObjectExpression = ObjectExpression;
-	var ObjectPattern = (function () {
-	    function ObjectPattern(properties) {
-	        this.type = syntax_1.Syntax.ObjectPattern;
-	        this.properties = properties;
-	    }
-	    return ObjectPattern;
-	}());
-	exports.ObjectPattern = ObjectPattern;
-	var Property = (function () {
-	    function Property(kind, key, computed, value, method, shorthand) {
-	        this.type = syntax_1.Syntax.Property;
-	        this.key = key;
-	        this.computed = computed;
-	        this.value = value;
-	        this.kind = kind;
-	        this.method = method;
-	        this.shorthand = shorthand;
-	    }
-	    return Property;
-	}());
-	exports.Property = Property;
-	var RegexLiteral = (function () {
-	    function RegexLiteral(value, raw, pattern, flags) {
-	        this.type = syntax_1.Syntax.Literal;
-	        this.value = value;
-	        this.raw = raw;
-	        this.regex = { pattern: pattern, flags: flags };
-	    }
-	    return RegexLiteral;
-	}());
-	exports.RegexLiteral = RegexLiteral;
-	var RestElement = (function () {
-	    function RestElement(argument) {
-	        this.type = syntax_1.Syntax.RestElement;
-	        this.argument = argument;
-	    }
-	    return RestElement;
-	}());
-	exports.RestElement = RestElement;
-	var ReturnStatement = (function () {
-	    function ReturnStatement(argument) {
-	        this.type = syntax_1.Syntax.ReturnStatement;
-	        this.argument = argument;
-	    }
-	    return ReturnStatement;
-	}());
-	exports.ReturnStatement = ReturnStatement;
-	var Script = (function () {
-	    function Script(body) {
-	        this.type = syntax_1.Syntax.Program;
-	        this.body = body;
-	        this.sourceType = 'script';
-	    }
-	    return Script;
-	}());
-	exports.Script = Script;
-	var SequenceExpression = (function () {
-	    function SequenceExpression(expressions) {
-	        this.type = syntax_1.Syntax.SequenceExpression;
-	        this.expressions = expressions;
-	    }
-	    return SequenceExpression;
-	}());
-	exports.SequenceExpression = SequenceExpression;
-	var SpreadElement = (function () {
-	    function SpreadElement(argument) {
-	        this.type = syntax_1.Syntax.SpreadElement;
-	        this.argument = argument;
-	    }
-	    return SpreadElement;
-	}());
-	exports.SpreadElement = SpreadElement;
-	var StaticMemberExpression = (function () {
-	    function StaticMemberExpression(object, property) {
-	        this.type = syntax_1.Syntax.MemberExpression;
-	        this.computed = false;
-	        this.object = object;
-	        this.property = property;
-	    }
-	    return StaticMemberExpression;
-	}());
-	exports.StaticMemberExpression = StaticMemberExpression;
-	var Super = (function () {
-	    function Super() {
-	        this.type = syntax_1.Syntax.Super;
-	    }
-	    return Super;
-	}());
-	exports.Super = Super;
-	var SwitchCase = (function () {
-	    function SwitchCase(test, consequent) {
-	        this.type = syntax_1.Syntax.SwitchCase;
-	        this.test = test;
-	        this.consequent = consequent;
-	    }
-	    return SwitchCase;
-	}());
-	exports.SwitchCase = SwitchCase;
-	var SwitchStatement = (function () {
-	    function SwitchStatement(discriminant, cases) {
-	        this.type = syntax_1.Syntax.SwitchStatement;
-	        this.discriminant = discriminant;
-	        this.cases = cases;
-	    }
-	    return SwitchStatement;
-	}());
-	exports.SwitchStatement = SwitchStatement;
-	var TaggedTemplateExpression = (function () {
-	    function TaggedTemplateExpression(tag, quasi) {
-	        this.type = syntax_1.Syntax.TaggedTemplateExpression;
-	        this.tag = tag;
-	        this.quasi = quasi;
-	    }
-	    return TaggedTemplateExpression;
-	}());
-	exports.TaggedTemplateExpression = TaggedTemplateExpression;
-	var TemplateElement = (function () {
-	    function TemplateElement(value, tail) {
-	        this.type = syntax_1.Syntax.TemplateElement;
-	        this.value = value;
-	        this.tail = tail;
-	    }
-	    return TemplateElement;
-	}());
-	exports.TemplateElement = TemplateElement;
-	var TemplateLiteral = (function () {
-	    function TemplateLiteral(quasis, expressions) {
-	        this.type = syntax_1.Syntax.TemplateLiteral;
-	        this.quasis = quasis;
-	        this.expressions = expressions;
-	    }
-	    return TemplateLiteral;
-	}());
-	exports.TemplateLiteral = TemplateLiteral;
-	var ThisExpression = (function () {
-	    function ThisExpression() {
-	        this.type = syntax_1.Syntax.ThisExpression;
-	    }
-	    return ThisExpression;
-	}());
-	exports.ThisExpression = ThisExpression;
-	var ThrowStatement = (function () {
-	    function ThrowStatement(argument) {
-	        this.type = syntax_1.Syntax.ThrowStatement;
-	        this.argument = argument;
-	    }
-	    return ThrowStatement;
-	}());
-	exports.ThrowStatement = ThrowStatement;
-	var TryStatement = (function () {
-	    function TryStatement(block, handler, finalizer) {
-	        this.type = syntax_1.Syntax.TryStatement;
-	        this.block = block;
-	        this.handler = handler;
-	        this.finalizer = finalizer;
-	    }
-	    return TryStatement;
-	}());
-	exports.TryStatement = TryStatement;
-	var UnaryExpression = (function () {
-	    function UnaryExpression(operator, argument) {
-	        this.type = syntax_1.Syntax.UnaryExpression;
-	        this.operator = operator;
-	        this.argument = argument;
-	        this.prefix = true;
-	    }
-	    return UnaryExpression;
-	}());
-	exports.UnaryExpression = UnaryExpression;
-	var UpdateExpression = (function () {
-	    function UpdateExpression(operator, argument, prefix) {
-	        this.type = syntax_1.Syntax.UpdateExpression;
-	        this.operator = operator;
-	        this.argument = argument;
-	        this.prefix = prefix;
-	    }
-	    return UpdateExpression;
-	}());
-	exports.UpdateExpression = UpdateExpression;
-	var VariableDeclaration = (function () {
-	    function VariableDeclaration(declarations, kind) {
-	        this.type = syntax_1.Syntax.VariableDeclaration;
-	        this.declarations = declarations;
-	        this.kind = kind;
-	    }
-	    return VariableDeclaration;
-	}());
-	exports.VariableDeclaration = VariableDeclaration;
-	var VariableDeclarator = (function () {
-	    function VariableDeclarator(id, init) {
-	        this.type = syntax_1.Syntax.VariableDeclarator;
-	        this.id = id;
-	        this.init = init;
-	    }
-	    return VariableDeclarator;
-	}());
-	exports.VariableDeclarator = VariableDeclarator;
-	var WhileStatement = (function () {
-	    function WhileStatement(test, body) {
-	        this.type = syntax_1.Syntax.WhileStatement;
-	        this.test = test;
-	        this.body = body;
-	    }
-	    return WhileStatement;
-	}());
-	exports.WhileStatement = WhileStatement;
-	var WithStatement = (function () {
-	    function WithStatement(object, body) {
-	        this.type = syntax_1.Syntax.WithStatement;
-	        this.object = object;
-	        this.body = body;
-	    }
-	    return WithStatement;
-	}());
-	exports.WithStatement = WithStatement;
-	var YieldExpression = (function () {
-	    function YieldExpression(argument, delegate) {
-	        this.type = syntax_1.Syntax.YieldExpression;
-	        this.argument = argument;
-	        this.delegate = delegate;
-	    }
-	    return YieldExpression;
-	}());
-	exports.YieldExpression = YieldExpression;
-
-
-/***/ },
-/* 8 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var assert_1 = __webpack_require__(9);
-	var error_handler_1 = __webpack_require__(10);
-	var messages_1 = __webpack_require__(11);
-	var Node = __webpack_require__(7);
-	var scanner_1 = __webpack_require__(12);
-	var syntax_1 = __webpack_require__(2);
-	var token_1 = __webpack_require__(13);
-	var ArrowParameterPlaceHolder = 'ArrowParameterPlaceHolder';
-	var Parser = (function () {
-	    function Parser(code, options, delegate) {
-	        if (options === void 0) { options = {}; }
-	        this.config = {
-	            range: (typeof options.range === 'boolean') && options.range,
-	            loc: (typeof options.loc === 'boolean') && options.loc,
-	            source: null,
-	            tokens: (typeof options.tokens === 'boolean') && options.tokens,
-	            comment: (typeof options.comment === 'boolean') && options.comment,
-	            tolerant: (typeof options.tolerant === 'boolean') && options.tolerant
-	        };
-	        if (this.config.loc && options.source && options.source !== null) {
-	            this.config.source = String(options.source);
-	        }
-	        this.delegate = delegate;
-	        this.errorHandler = new error_handler_1.ErrorHandler();
-	        this.errorHandler.tolerant = this.config.tolerant;
-	        this.scanner = new scanner_1.Scanner(code, this.errorHandler);
-	        this.scanner.trackComment = this.config.comment;
-	        this.operatorPrecedence = {
-	            ')': 0,
-	            ';': 0,
-	            ',': 0,
-	            '=': 0,
-	            ']': 0,
-	            '||': 1,
-	            '&&': 2,
-	            '|': 3,
-	            '^': 4,
-	            '&': 5,
-	            '==': 6,
-	            '!=': 6,
-	            '===': 6,
-	            '!==': 6,
-	            '<': 7,
-	            '>': 7,
-	            '<=': 7,
-	            '>=': 7,
-	            '<<': 8,
-	            '>>': 8,
-	            '>>>': 8,
-	            '+': 9,
-	            '-': 9,
-	            '*': 11,
-	            '/': 11,
-	            '%': 11
-	        };
-	        this.lookahead = {
-	            type: 2 /* EOF */,
-	            value: '',
-	            lineNumber: this.scanner.lineNumber,
-	            lineStart: 0,
-	            start: 0,
-	            end: 0
-	        };
-	        this.hasLineTerminator = false;
-	        this.context = {
-	            isModule: false,
-	            await: false,
-	            allowIn: true,
-	            allowStrictDirective: true,
-	            allowYield: true,
-	            firstCoverInitializedNameError: null,
-	            isAssignmentTarget: false,
-	            isBindingElement: false,
-	            inFunctionBody: false,
-	            inIteration: false,
-	            inSwitch: false,
-	            labelSet: {},
-	            strict: false
-	        };
-	        this.tokens = [];
-	        this.startMarker = {
-	            index: 0,
-	            line: this.scanner.lineNumber,
-	            column: 0
-	        };
-	        this.lastMarker = {
-	            index: 0,
-	            line: this.scanner.lineNumber,
-	            column: 0
-	        };
-	        this.nextToken();
-	        this.lastMarker = {
-	            index: this.scanner.index,
-	            line: this.scanner.lineNumber,
-	            column: this.scanner.index - this.scanner.lineStart
-	        };
-	    }
-	    Parser.prototype.throwError = function (messageFormat) {
-	        var values = [];
-	        for (var _i = 1; _i < arguments.length; _i++) {
-	            values[_i - 1] = arguments[_i];
-	        }
-	        var args = Array.prototype.slice.call(arguments, 1);
-	        var msg = messageFormat.replace(/%(\d)/g, function (whole, idx) {
-	            assert_1.assert(idx < args.length, 'Message reference must be in range');
-	            return args[idx];
-	        });
-	        var index = this.lastMarker.index;
-	        var line = this.lastMarker.line;
-	        var column = this.lastMarker.column + 1;
-	        throw this.errorHandler.createError(index, line, column, msg);
-	    };
-	    Parser.prototype.tolerateError = function (messageFormat) {
-	        var values = [];
-	        for (var _i = 1; _i < arguments.length; _i++) {
-	            values[_i - 1] = arguments[_i];
-	        }
-	        var args = Array.prototype.slice.call(arguments, 1);
-	        var msg = messageFormat.replace(/%(\d)/g, function (whole, idx) {
-	            assert_1.assert(idx < args.length, 'Message reference must be in range');
-	            return args[idx];
-	        });
-	        var index = this.lastMarker.index;
-	        var line = this.scanner.lineNumber;
-	        var column = this.lastMarker.column + 1;
-	        this.errorHandler.tolerateError(index, line, column, msg);
-	    };
-	    // Throw an exception because of the token.
-	    Parser.prototype.unexpectedTokenError = function (token, message) {
-	        var msg = message || messages_1.Messages.UnexpectedToken;
-	        var value;
-	        if (token) {
-	            if (!message) {
-	                msg = (token.type === 2 /* EOF */) ? messages_1.Messages.UnexpectedEOS :
-	                    (token.type === 3 /* Identifier */) ? messages_1.Messages.UnexpectedIdentifier :
-	                        (token.type === 6 /* NumericLiteral */) ? messages_1.Messages.UnexpectedNumber :
-	                            (token.type === 8 /* StringLiteral */) ? messages_1.Messages.UnexpectedString :
-	                                (token.type === 10 /* Template */) ? messages_1.Messages.UnexpectedTemplate :
-	                                    messages_1.Messages.UnexpectedToken;
-	                if (token.type === 4 /* Keyword */) {
-	                    if (this.scanner.isFutureReservedWord(token.value)) {
-	                        msg = messages_1.Messages.UnexpectedReserved;
-	                    }
-	                    else if (this.context.strict && this.scanner.isStrictModeReservedWord(token.value)) {
-	                        msg = messages_1.Messages.StrictReservedWord;
-	                    }
-	                }
-	            }
-	            value = token.value;
-	        }
-	        else {
-	            value = 'ILLEGAL';
-	        }
-	        msg = msg.replace('%0', value);
-	        if (token && typeof token.lineNumber === 'number') {
-	            var index = token.start;
-	            var line = token.lineNumber;
-	            var lastMarkerLineStart = this.lastMarker.index - this.lastMarker.column;
-	            var column = token.start - lastMarkerLineStart + 1;
-	            return this.errorHandler.createError(index, line, column, msg);
-	        }
-	        else {
-	            var index = this.lastMarker.index;
-	            var line = this.lastMarker.line;
-	            var column = this.lastMarker.column + 1;
-	            return this.errorHandler.createError(index, line, column, msg);
-	        }
-	    };
-	    Parser.prototype.throwUnexpectedToken = function (token, message) {
-	        throw this.unexpectedTokenError(token, message);
-	    };
-	    Parser.prototype.tolerateUnexpectedToken = function (token, message) {
-	        this.errorHandler.tolerate(this.unexpectedTokenError(token, message));
-	    };
-	    Parser.prototype.collectComments = function () {
-	        if (!this.config.comment) {
-	            this.scanner.scanComments();
-	        }
-	        else {
-	            var comments = this.scanner.scanComments();
-	            if (comments.length > 0 && this.delegate) {
-	                for (var i = 0; i < comments.length; ++i) {
-	                    var e = comments[i];
-	                    var node = void 0;
-	                    node = {
-	                        type: e.multiLine ? 'BlockComment' : 'LineComment',
-	                        value: this.scanner.source.slice(e.slice[0], e.slice[1])
-	                    };
-	                    if (this.config.range) {
-	                        node.range = e.range;
-	                    }
-	                    if (this.config.loc) {
-	                        node.loc = e.loc;
-	                    }
-	                    var metadata = {
-	                        start: {
-	                            line: e.loc.start.line,
-	                            column: e.loc.start.column,
-	                            offset: e.range[0]
-	                        },
-	                        end: {
-	                            line: e.loc.end.line,
-	                            column: e.loc.end.column,
-	                            offset: e.range[1]
-	                        }
-	                    };
-	                    this.delegate(node, metadata);
-	                }
-	            }
-	        }
-	    };
-	    // From internal representation to an external structure
-	    Parser.prototype.getTokenRaw = function (token) {
-	        return this.scanner.source.slice(token.start, token.end);
-	    };
-	    Parser.prototype.convertToken = function (token) {
-	        var t = {
-	            type: token_1.TokenName[token.type],
-	            value: this.getTokenRaw(token)
-	        };
-	        if (this.config.range) {
-	            t.range = [token.start, token.end];
-	        }
-	        if (this.config.loc) {
-	            t.loc = {
-	                start: {
-	                    line: this.startMarker.line,
-	                    column: this.startMarker.column
-	                },
-	                end: {
-	                    line: this.scanner.lineNumber,
-	                    column: this.scanner.index - this.scanner.lineStart
-	                }
-	            };
-	        }
-	        if (token.type === 9 /* RegularExpression */) {
-	            var pattern = token.pattern;
-	            var flags = token.flags;
-	            t.regex = { pattern: pattern, flags: flags };
-	        }
-	        return t;
-	    };
-	    Parser.prototype.nextToken = function () {
-	        var token = this.lookahead;
-	        this.lastMarker.index = this.scanner.index;
-	        this.lastMarker.line = this.scanner.lineNumber;
-	        this.lastMarker.column = this.scanner.index - this.scanner.lineStart;
-	        this.collectComments();
-	        if (this.scanner.index !== this.startMarker.index) {
-	            this.startMarker.index = this.scanner.index;
-	            this.startMarker.line = this.scanner.lineNumber;
-	            this.startMarker.column = this.scanner.index - this.scanner.lineStart;
-	        }
-	        var next = this.scanner.lex();
-	        this.hasLineTerminator = (token.lineNumber !== next.lineNumber);
-	        if (next && this.context.strict && next.type === 3 /* Identifier */) {
-	            if (this.scanner.isStrictModeReservedWord(next.value)) {
-	                next.type = 4 /* Keyword */;
-	            }
-	        }
-	        this.lookahead = next;
-	        if (this.config.tokens && next.type !== 2 /* EOF */) {
-	            this.tokens.push(this.convertToken(next));
-	        }
-	        return token;
-	    };
-	    Parser.prototype.nextRegexToken = function () {
-	        this.collectComments();
-	        var token = this.scanner.scanRegExp();
-	        if (this.config.tokens) {
-	            // Pop the previous token, '/' or '/='
-	            // This is added from the lookahead token.
-	            this.tokens.pop();
-	            this.tokens.push(this.convertToken(token));
-	        }
-	        // Prime the next lookahead.
-	        this.lookahead = token;
-	        this.nextToken();
-	        return token;
-	    };
-	    Parser.prototype.createNode = function () {
-	        return {
-	            index: this.startMarker.index,
-	            line: this.startMarker.line,
-	            column: this.startMarker.column
-	        };
-	    };
-	    Parser.prototype.startNode = function (token, lastLineStart) {
-	        if (lastLineStart === void 0) { lastLineStart = 0; }
-	        var column = token.start - token.lineStart;
-	        var line = token.lineNumber;
-	        if (column < 0) {
-	            column += lastLineStart;
-	            line--;
-	        }
-	        return {
-	            index: token.start,
-	            line: line,
-	            column: column
-	        };
-	    };
-	    Parser.prototype.finalize = function (marker, node) {
-	        if (this.config.range) {
-	            node.range = [marker.index, this.lastMarker.index];
-	        }
-	        if (this.config.loc) {
-	            node.loc = {
-	                start: {
-	                    line: marker.line,
-	                    column: marker.column,
-	                },
-	                end: {
-	                    line: this.lastMarker.line,
-	                    column: this.lastMarker.column
-	                }
-	            };
-	            if (this.config.source) {
-	                node.loc.source = this.config.source;
-	            }
-	        }
-	        if (this.delegate) {
-	            var metadata = {
-	                start: {
-	                    line: marker.line,
-	                    column: marker.column,
-	                    offset: marker.index
-	                },
-	                end: {
-	                    line: this.lastMarker.line,
-	                    column: this.lastMarker.column,
-	                    offset: this.lastMarker.index
-	                }
-	            };
-	            this.delegate(node, metadata);
-	        }
-	        return node;
-	    };
-	    // Expect the next token to match the specified punctuator.
-	    // If not, an exception will be thrown.
-	    Parser.prototype.expect = function (value) {
-	        var token = this.nextToken();
-	        if (token.type !== 7 /* Punctuator */ || token.value !== value) {
-	            this.throwUnexpectedToken(token);
-	        }
-	    };
-	    // Quietly expect a comma when in tolerant mode, otherwise delegates to expect().
-	    Parser.prototype.expectCommaSeparator = function () {
-	        if (this.config.tolerant) {
-	            var token = this.lookahead;
-	            if (token.type === 7 /* Punctuator */ && token.value === ',') {
-	                this.nextToken();
-	            }
-	            else if (token.type === 7 /* Punctuator */ && token.value === ';') {
-	                this.nextToken();
-	                this.tolerateUnexpectedToken(token);
-	            }
-	            else {
-	                this.tolerateUnexpectedToken(token, messages_1.Messages.UnexpectedToken);
-	            }
-	        }
-	        else {
-	            this.expect(',');
-	        }
-	    };
-	    // Expect the next token to match the specified keyword.
-	    // If not, an exception will be thrown.
-	    Parser.prototype.expectKeyword = function (keyword) {
-	        var token = this.nextToken();
-	        if (token.type !== 4 /* Keyword */ || token.value !== keyword) {
-	            this.throwUnexpectedToken(token);
-	        }
-	    };
-	    // Return true if the next token matches the specified punctuator.
-	    Parser.prototype.match = function (value) {
-	        return this.lookahead.type === 7 /* Punctuator */ && this.lookahead.value === value;
-	    };
-	    // Return true if the next token matches the specified keyword
-	    Parser.prototype.matchKeyword = function (keyword) {
-	        return this.lookahead.type === 4 /* Keyword */ && this.lookahead.value === keyword;
-	    };
-	    // Return true if the next token matches the specified contextual keyword
-	    // (where an identifier is sometimes a keyword depending on the context)
-	    Parser.prototype.matchContextualKeyword = function (keyword) {
-	        return this.lookahead.type === 3 /* Identifier */ && this.lookahead.value === keyword;
-	    };
-	    // Return true if the next token is an assignment operator
-	    Parser.prototype.matchAssign = function () {
-	        if (this.lookahead.type !== 7 /* Punctuator */) {
-	            return false;
-	        }
-	        var op = this.lookahead.value;
-	        return op === '=' ||
-	            op === '*=' ||
-	            op === '**=' ||
-	            op === '/=' ||
-	            op === '%=' ||
-	            op === '+=' ||
-	            op === '-=' ||
-	            op === '<<=' ||
-	            op === '>>=' ||
-	            op === '>>>=' ||
-	            op === '&=' ||
-	            op === '^=' ||
-	            op === '|=';
-	    };
-	    // Cover grammar support.
-	    //
-	    // When an assignment expression position starts with an left parenthesis, the determination of the type
-	    // of the syntax is to be deferred arbitrarily long until the end of the parentheses pair (plus a lookahead)
-	    // or the first comma. This situation also defers the determination of all the expressions nested in the pair.
-	    //
-	    // There are three productions that can be parsed in a parentheses pair that needs to be determined
-	    // after the outermost pair is closed. They are:
-	    //
-	    //   1. AssignmentExpression
-	    //   2. BindingElements
-	    //   3. AssignmentTargets
-	    //
-	    // In order to avoid exponential backtracking, we use two flags to denote if the production can be
-	    // binding element or assignment target.
-	    //
-	    // The three productions have the relationship:
-	    //
-	    //   BindingElements ⊆ AssignmentTargets ⊆ AssignmentExpression
-	    //
-	    // with a single exception that CoverInitializedName when used directly in an Expression, generates
-	    // an early error. Therefore, we need the third state, firstCoverInitializedNameError, to track the
-	    // first usage of CoverInitializedName and report it when we reached the end of the parentheses pair.
-	    //
-	    // isolateCoverGrammar function runs the given parser function with a new cover grammar context, and it does not
-	    // effect the current flags. This means the production the parser parses is only used as an expression. Therefore
-	    // the CoverInitializedName check is conducted.
-	    //
-	    // inheritCoverGrammar function runs the given parse function with a new cover grammar context, and it propagates
-	    // the flags outside of the parser. This means the production the parser parses is used as a part of a potential
-	    // pattern. The CoverInitializedName check is deferred.
-	    Parser.prototype.isolateCoverGrammar = function (parseFunction) {
-	        var previousIsBindingElement = this.context.isBindingElement;
-	        var previousIsAssignmentTarget = this.context.isAssignmentTarget;
-	        var previousFirstCoverInitializedNameError = this.context.firstCoverInitializedNameError;
-	        this.context.isBindingElement = true;
-	        this.context.isAssignmentTarget = true;
-	        this.context.firstCoverInitializedNameError = null;
-	        var result = parseFunction.call(this);
-	        if (this.context.firstCoverInitializedNameError !== null) {
-	            this.throwUnexpectedToken(this.context.firstCoverInitializedNameError);
-	        }
-	        this.context.isBindingElement = previousIsBindingElement;
-	        this.context.isAssignmentTarget = previousIsAssignmentTarget;
-	        this.context.firstCoverInitializedNameError = previousFirstCoverInitializedNameError;
-	        return result;
-	    };
-	    Parser.prototype.inheritCoverGrammar = function (parseFunction) {
-	        var previousIsBindingElement = this.context.isBindingElement;
-	        var previousIsAssignmentTarget = this.context.isAssignmentTarget;
-	        var previousFirstCoverInitializedNameError = this.context.firstCoverInitializedNameError;
-	        this.context.isBindingElement = true;
-	        this.context.isAssignmentTarget = true;
-	        this.context.firstCoverInitializedNameError = null;
-	        var result = parseFunction.call(this);
-	        this.context.isBindingElement = this.context.isBindingElement && previousIsBindingElement;
-	        this.context.isAssignmentTarget = this.context.isAssignmentTarget && previousIsAssignmentTarget;
-	        this.context.firstCoverInitializedNameError = previousFirstCoverInitializedNameError || this.context.firstCoverInitializedNameError;
-	        return result;
-	    };
-	    Parser.prototype.consumeSemicolon = function () {
-	        if (this.match(';')) {
-	            this.nextToken();
-	        }
-	        else if (!this.hasLineTerminator) {
-	            if (this.lookahead.type !== 2 /* EOF */ && !this.match('}')) {
-	                this.throwUnexpectedToken(this.lookahead);
-	            }
-	            this.lastMarker.index = this.startMarker.index;
-	            this.lastMarker.line = this.startMarker.line;
-	            this.lastMarker.column = this.startMarker.column;
-	        }
-	    };
-	    // https://tc39.github.io/ecma262/#sec-primary-expression
-	    Parser.prototype.parsePrimaryExpression = function () {
-	        var node = this.createNode();
-	        var expr;
-	        var token, raw;
-	        switch (this.lookahead.type) {
-	            case 3 /* Identifier */:
-	                if ((this.context.isModule || this.context.await) && this.lookahead.value === 'await') {
-	                    this.tolerateUnexpectedToken(this.lookahead);
-	                }
-	                expr = this.matchAsyncFunction() ? this.parseFunctionExpression() : this.finalize(node, new Node.Identifier(this.nextToken().value));
-	                break;
-	            case 6 /* NumericLiteral */:
-	            case 8 /* StringLiteral */:
-	                if (this.context.strict && this.lookahead.octal) {
-	                    this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.StrictOctalLiteral);
-	                }
-	                this.context.isAssignmentTarget = false;
-	                this.context.isBindingElement = false;
-	                token = this.nextToken();
-	                raw = this.getTokenRaw(token);
-	                expr = this.finalize(node, new Node.Literal(token.value, raw));
-	                break;
-	            case 1 /* BooleanLiteral */:
-	                this.context.isAssignmentTarget = false;
-	                this.context.isBindingElement = false;
-	                token = this.nextToken();
-	                raw = this.getTokenRaw(token);
-	                expr = this.finalize(node, new Node.Literal(token.value === 'true', raw));
-	                break;
-	            case 5 /* NullLiteral */:
-	                this.context.isAssignmentTarget = false;
-	                this.context.isBindingElement = false;
-	                token = this.nextToken();
-	                raw = this.getTokenRaw(token);
-	                expr = this.finalize(node, new Node.Literal(null, raw));
-	                break;
-	            case 10 /* Template */:
-	                expr = this.parseTemplateLiteral();
-	                break;
-	            case 7 /* Punctuator */:
-	                switch (this.lookahead.value) {
-	                    case '(':
-	                        this.context.isBindingElement = false;
-	                        expr = this.inheritCoverGrammar(this.parseGroupExpression);
-	                        break;
-	                    case '[':
-	                        expr = this.inheritCoverGrammar(this.parseArrayInitializer);
-	                        break;
-	                    case '{':
-	                        expr = this.inheritCoverGrammar(this.parseObjectInitializer);
-	                        break;
-	                    case '/':
-	                    case '/=':
-	                        this.context.isAssignmentTarget = false;
-	                        this.context.isBindingElement = false;
-	                        this.scanner.index = this.startMarker.index;
-	                        token = this.nextRegexToken();
-	                        raw = this.getTokenRaw(token);
-	                        expr = this.finalize(node, new Node.RegexLiteral(token.regex, raw, token.pattern, token.flags));
-	                        break;
-	                    default:
-	                        expr = this.throwUnexpectedToken(this.nextToken());
-	                }
-	                break;
-	            case 4 /* Keyword */:
-	                if (!this.context.strict && this.context.allowYield && this.matchKeyword('yield')) {
-	                    expr = this.parseIdentifierName();
-	                }
-	                else if (!this.context.strict && this.matchKeyword('let')) {
-	                    expr = this.finalize(node, new Node.Identifier(this.nextToken().value));
-	                }
-	                else {
-	                    this.context.isAssignmentTarget = false;
-	                    this.context.isBindingElement = false;
-	                    if (this.matchKeyword('function')) {
-	                        expr = this.parseFunctionExpression();
-	                    }
-	                    else if (this.matchKeyword('this')) {
-	                        this.nextToken();
-	                        expr = this.finalize(node, new Node.ThisExpression());
-	                    }
-	                    else if (this.matchKeyword('class')) {
-	                        expr = this.parseClassExpression();
-	                    }
-	                    else {
-	                        expr = this.throwUnexpectedToken(this.nextToken());
-	                    }
-	                }
-	                break;
-	            default:
-	                expr = this.throwUnexpectedToken(this.nextToken());
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-array-initializer
-	    Parser.prototype.parseSpreadElement = function () {
-	        var node = this.createNode();
-	        this.expect('...');
-	        var arg = this.inheritCoverGrammar(this.parseAssignmentExpression);
-	        return this.finalize(node, new Node.SpreadElement(arg));
-	    };
-	    Parser.prototype.parseArrayInitializer = function () {
-	        var node = this.createNode();
-	        var elements = [];
-	        this.expect('[');
-	        while (!this.match(']')) {
-	            if (this.match(',')) {
-	                this.nextToken();
-	                elements.push(null);
-	            }
-	            else if (this.match('...')) {
-	                var element = this.parseSpreadElement();
-	                if (!this.match(']')) {
-	                    this.context.isAssignmentTarget = false;
-	                    this.context.isBindingElement = false;
-	                    this.expect(',');
-	                }
-	                elements.push(element);
-	            }
-	            else {
-	                elements.push(this.inheritCoverGrammar(this.parseAssignmentExpression));
-	                if (!this.match(']')) {
-	                    this.expect(',');
-	                }
-	            }
-	        }
-	        this.expect(']');
-	        return this.finalize(node, new Node.ArrayExpression(elements));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-object-initializer
-	    Parser.prototype.parsePropertyMethod = function (params) {
-	        this.context.isAssignmentTarget = false;
-	        this.context.isBindingElement = false;
-	        var previousStrict = this.context.strict;
-	        var previousAllowStrictDirective = this.context.allowStrictDirective;
-	        this.context.allowStrictDirective = params.simple;
-	        var body = this.isolateCoverGrammar(this.parseFunctionSourceElements);
-	        if (this.context.strict && params.firstRestricted) {
-	            this.tolerateUnexpectedToken(params.firstRestricted, params.message);
-	        }
-	        if (this.context.strict && params.stricted) {
-	            this.tolerateUnexpectedToken(params.stricted, params.message);
-	        }
-	        this.context.strict = previousStrict;
-	        this.context.allowStrictDirective = previousAllowStrictDirective;
-	        return body;
-	    };
-	    Parser.prototype.parsePropertyMethodFunction = function () {
-	        var isGenerator = false;
-	        var node = this.createNode();
-	        var previousAllowYield = this.context.allowYield;
-	        this.context.allowYield = true;
-	        var params = this.parseFormalParameters();
-	        var method = this.parsePropertyMethod(params);
-	        this.context.allowYield = previousAllowYield;
-	        return this.finalize(node, new Node.FunctionExpression(null, params.params, method, isGenerator));
-	    };
-	    Parser.prototype.parsePropertyMethodAsyncFunction = function () {
-	        var node = this.createNode();
-	        var previousAllowYield = this.context.allowYield;
-	        var previousAwait = this.context.await;
-	        this.context.allowYield = false;
-	        this.context.await = true;
-	        var params = this.parseFormalParameters();
-	        var method = this.parsePropertyMethod(params);
-	        this.context.allowYield = previousAllowYield;
-	        this.context.await = previousAwait;
-	        return this.finalize(node, new Node.AsyncFunctionExpression(null, params.params, method));
-	    };
-	    Parser.prototype.parseObjectPropertyKey = function () {
-	        var node = this.createNode();
-	        var token = this.nextToken();
-	        var key;
-	        switch (token.type) {
-	            case 8 /* StringLiteral */:
-	            case 6 /* NumericLiteral */:
-	                if (this.context.strict && token.octal) {
-	                    this.tolerateUnexpectedToken(token, messages_1.Messages.StrictOctalLiteral);
-	                }
-	                var raw = this.getTokenRaw(token);
-	                key = this.finalize(node, new Node.Literal(token.value, raw));
-	                break;
-	            case 3 /* Identifier */:
-	            case 1 /* BooleanLiteral */:
-	            case 5 /* NullLiteral */:
-	            case 4 /* Keyword */:
-	                key = this.finalize(node, new Node.Identifier(token.value));
-	                break;
-	            case 7 /* Punctuator */:
-	                if (token.value === '[') {
-	                    key = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	                    this.expect(']');
-	                }
-	                else {
-	                    key = this.throwUnexpectedToken(token);
-	                }
-	                break;
-	            default:
-	                key = this.throwUnexpectedToken(token);
-	        }
-	        return key;
-	    };
-	    Parser.prototype.isPropertyKey = function (key, value) {
-	        return (key.type === syntax_1.Syntax.Identifier && key.name === value) ||
-	            (key.type === syntax_1.Syntax.Literal && key.value === value);
-	    };
-	    Parser.prototype.parseObjectProperty = function (hasProto) {
-	        var node = this.createNode();
-	        var token = this.lookahead;
-	        var kind;
-	        var key = null;
-	        var value = null;
-	        var computed = false;
-	        var method = false;
-	        var shorthand = false;
-	        var isAsync = false;
-	        if (token.type === 3 /* Identifier */) {
-	            var id = token.value;
-	            this.nextToken();
-	            computed = this.match('[');
-	            isAsync = !this.hasLineTerminator && (id === 'async') &&
-	                !this.match(':') && !this.match('(') && !this.match('*') && !this.match(',');
-	            key = isAsync ? this.parseObjectPropertyKey() : this.finalize(node, new Node.Identifier(id));
-	        }
-	        else if (this.match('*')) {
-	            this.nextToken();
-	        }
-	        else {
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	        }
-	        var lookaheadPropertyKey = this.qualifiedPropertyName(this.lookahead);
-	        if (token.type === 3 /* Identifier */ && !isAsync && token.value === 'get' && lookaheadPropertyKey) {
-	            kind = 'get';
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	            this.context.allowYield = false;
-	            value = this.parseGetterMethod();
-	        }
-	        else if (token.type === 3 /* Identifier */ && !isAsync && token.value === 'set' && lookaheadPropertyKey) {
-	            kind = 'set';
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	            value = this.parseSetterMethod();
-	        }
-	        else if (token.type === 7 /* Punctuator */ && token.value === '*' && lookaheadPropertyKey) {
-	            kind = 'init';
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	            value = this.parseGeneratorMethod();
-	            method = true;
-	        }
-	        else {
-	            if (!key) {
-	                this.throwUnexpectedToken(this.lookahead);
-	            }
-	            kind = 'init';
-	            if (this.match(':') && !isAsync) {
-	                if (!computed && this.isPropertyKey(key, '__proto__')) {
-	                    if (hasProto.value) {
-	                        this.tolerateError(messages_1.Messages.DuplicateProtoProperty);
-	                    }
-	                    hasProto.value = true;
-	                }
-	                this.nextToken();
-	                value = this.inheritCoverGrammar(this.parseAssignmentExpression);
-	            }
-	            else if (this.match('(')) {
-	                value = isAsync ? this.parsePropertyMethodAsyncFunction() : this.parsePropertyMethodFunction();
-	                method = true;
-	            }
-	            else if (token.type === 3 /* Identifier */) {
-	                var id = this.finalize(node, new Node.Identifier(token.value));
-	                if (this.match('=')) {
-	                    this.context.firstCoverInitializedNameError = this.lookahead;
-	                    this.nextToken();
-	                    shorthand = true;
-	                    var init = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	                    value = this.finalize(node, new Node.AssignmentPattern(id, init));
-	                }
-	                else {
-	                    shorthand = true;
-	                    value = id;
-	                }
-	            }
-	            else {
-	                this.throwUnexpectedToken(this.nextToken());
-	            }
-	        }
-	        return this.finalize(node, new Node.Property(kind, key, computed, value, method, shorthand));
-	    };
-	    Parser.prototype.parseObjectInitializer = function () {
-	        var node = this.createNode();
-	        this.expect('{');
-	        var properties = [];
-	        var hasProto = { value: false };
-	        while (!this.match('}')) {
-	            properties.push(this.parseObjectProperty(hasProto));
-	            if (!this.match('}')) {
-	                this.expectCommaSeparator();
-	            }
-	        }
-	        this.expect('}');
-	        return this.finalize(node, new Node.ObjectExpression(properties));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-template-literals
-	    Parser.prototype.parseTemplateHead = function () {
-	        assert_1.assert(this.lookahead.head, 'Template literal must start with a template head');
-	        var node = this.createNode();
-	        var token = this.nextToken();
-	        var raw = token.value;
-	        var cooked = token.cooked;
-	        return this.finalize(node, new Node.TemplateElement({ raw: raw, cooked: cooked }, token.tail));
-	    };
-	    Parser.prototype.parseTemplateElement = function () {
-	        if (this.lookahead.type !== 10 /* Template */) {
-	            this.throwUnexpectedToken();
-	        }
-	        var node = this.createNode();
-	        var token = this.nextToken();
-	        var raw = token.value;
-	        var cooked = token.cooked;
-	        return this.finalize(node, new Node.TemplateElement({ raw: raw, cooked: cooked }, token.tail));
-	    };
-	    Parser.prototype.parseTemplateLiteral = function () {
-	        var node = this.createNode();
-	        var expressions = [];
-	        var quasis = [];
-	        var quasi = this.parseTemplateHead();
-	        quasis.push(quasi);
-	        while (!quasi.tail) {
-	            expressions.push(this.parseExpression());
-	            quasi = this.parseTemplateElement();
-	            quasis.push(quasi);
-	        }
-	        return this.finalize(node, new Node.TemplateLiteral(quasis, expressions));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-grouping-operator
-	    Parser.prototype.reinterpretExpressionAsPattern = function (expr) {
-	        switch (expr.type) {
-	            case syntax_1.Syntax.Identifier:
-	            case syntax_1.Syntax.MemberExpression:
-	            case syntax_1.Syntax.RestElement:
-	            case syntax_1.Syntax.AssignmentPattern:
-	                break;
-	            case syntax_1.Syntax.SpreadElement:
-	                expr.type = syntax_1.Syntax.RestElement;
-	                this.reinterpretExpressionAsPattern(expr.argument);
-	                break;
-	            case syntax_1.Syntax.ArrayExpression:
-	                expr.type = syntax_1.Syntax.ArrayPattern;
-	                for (var i = 0; i < expr.elements.length; i++) {
-	                    if (expr.elements[i] !== null) {
-	                        this.reinterpretExpressionAsPattern(expr.elements[i]);
-	                    }
-	                }
-	                break;
-	            case syntax_1.Syntax.ObjectExpression:
-	                expr.type = syntax_1.Syntax.ObjectPattern;
-	                for (var i = 0; i < expr.properties.length; i++) {
-	                    this.reinterpretExpressionAsPattern(expr.properties[i].value);
-	                }
-	                break;
-	            case syntax_1.Syntax.AssignmentExpression:
-	                expr.type = syntax_1.Syntax.AssignmentPattern;
-	                delete expr.operator;
-	                this.reinterpretExpressionAsPattern(expr.left);
-	                break;
-	            default:
-	                // Allow other node type for tolerant parsing.
-	                break;
-	        }
-	    };
-	    Parser.prototype.parseGroupExpression = function () {
-	        var expr;
-	        this.expect('(');
-	        if (this.match(')')) {
-	            this.nextToken();
-	            if (!this.match('=>')) {
-	                this.expect('=>');
-	            }
-	            expr = {
-	                type: ArrowParameterPlaceHolder,
-	                params: [],
-	                async: false
-	            };
-	        }
-	        else {
-	            var startToken = this.lookahead;
-	            var params = [];
-	            if (this.match('...')) {
-	                expr = this.parseRestElement(params);
-	                this.expect(')');
-	                if (!this.match('=>')) {
-	                    this.expect('=>');
-	                }
-	                expr = {
-	                    type: ArrowParameterPlaceHolder,
-	                    params: [expr],
-	                    async: false
-	                };
-	            }
-	            else {
-	                var arrow = false;
-	                this.context.isBindingElement = true;
-	                expr = this.inheritCoverGrammar(this.parseAssignmentExpression);
-	                if (this.match(',')) {
-	                    var expressions = [];
-	                    this.context.isAssignmentTarget = false;
-	                    expressions.push(expr);
-	                    while (this.lookahead.type !== 2 /* EOF */) {
-	                        if (!this.match(',')) {
-	                            break;
-	                        }
-	                        this.nextToken();
-	                        if (this.match(')')) {
-	                            this.nextToken();
-	                            for (var i = 0; i < expressions.length; i++) {
-	                                this.reinterpretExpressionAsPattern(expressions[i]);
-	                            }
-	                            arrow = true;
-	                            expr = {
-	                                type: ArrowParameterPlaceHolder,
-	                                params: expressions,
-	                                async: false
-	                            };
-	                        }
-	                        else if (this.match('...')) {
-	                            if (!this.context.isBindingElement) {
-	                                this.throwUnexpectedToken(this.lookahead);
-	                            }
-	                            expressions.push(this.parseRestElement(params));
-	                            this.expect(')');
-	                            if (!this.match('=>')) {
-	                                this.expect('=>');
-	                            }
-	                            this.context.isBindingElement = false;
-	                            for (var i = 0; i < expressions.length; i++) {
-	                                this.reinterpretExpressionAsPattern(expressions[i]);
-	                            }
-	                            arrow = true;
-	                            expr = {
-	                                type: ArrowParameterPlaceHolder,
-	                                params: expressions,
-	                                async: false
-	                            };
-	                        }
-	                        else {
-	                            expressions.push(this.inheritCoverGrammar(this.parseAssignmentExpression));
-	                        }
-	                        if (arrow) {
-	                            break;
-	                        }
-	                    }
-	                    if (!arrow) {
-	                        expr = this.finalize(this.startNode(startToken), new Node.SequenceExpression(expressions));
-	                    }
-	                }
-	                if (!arrow) {
-	                    this.expect(')');
-	                    if (this.match('=>')) {
-	                        if (expr.type === syntax_1.Syntax.Identifier && expr.name === 'yield') {
-	                            arrow = true;
-	                            expr = {
-	                                type: ArrowParameterPlaceHolder,
-	                                params: [expr],
-	                                async: false
-	                            };
-	                        }
-	                        if (!arrow) {
-	                            if (!this.context.isBindingElement) {
-	                                this.throwUnexpectedToken(this.lookahead);
-	                            }
-	                            if (expr.type === syntax_1.Syntax.SequenceExpression) {
-	                                for (var i = 0; i < expr.expressions.length; i++) {
-	                                    this.reinterpretExpressionAsPattern(expr.expressions[i]);
-	                                }
-	                            }
-	                            else {
-	                                this.reinterpretExpressionAsPattern(expr);
-	                            }
-	                            var parameters = (expr.type === syntax_1.Syntax.SequenceExpression ? expr.expressions : [expr]);
-	                            expr = {
-	                                type: ArrowParameterPlaceHolder,
-	                                params: parameters,
-	                                async: false
-	                            };
-	                        }
-	                    }
-	                    this.context.isBindingElement = false;
-	                }
-	            }
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-left-hand-side-expressions
-	    Parser.prototype.parseArguments = function () {
-	        this.expect('(');
-	        var args = [];
-	        if (!this.match(')')) {
-	            while (true) {
-	                var expr = this.match('...') ? this.parseSpreadElement() :
-	                    this.isolateCoverGrammar(this.parseAssignmentExpression);
-	                args.push(expr);
-	                if (this.match(')')) {
-	                    break;
-	                }
-	                this.expectCommaSeparator();
-	                if (this.match(')')) {
-	                    break;
-	                }
-	            }
-	        }
-	        this.expect(')');
-	        return args;
-	    };
-	    Parser.prototype.isIdentifierName = function (token) {
-	        return token.type === 3 /* Identifier */ ||
-	            token.type === 4 /* Keyword */ ||
-	            token.type === 1 /* BooleanLiteral */ ||
-	            token.type === 5 /* NullLiteral */;
-	    };
-	    Parser.prototype.parseIdentifierName = function () {
-	        var node = this.createNode();
-	        var token = this.nextToken();
-	        if (!this.isIdentifierName(token)) {
-	            this.throwUnexpectedToken(token);
-	        }
-	        return this.finalize(node, new Node.Identifier(token.value));
-	    };
-	    Parser.prototype.parseNewExpression = function () {
-	        var node = this.createNode();
-	        var id = this.parseIdentifierName();
-	        assert_1.assert(id.name === 'new', 'New expression must start with `new`');
-	        var expr;
-	        if (this.match('.')) {
-	            this.nextToken();
-	            if (this.lookahead.type === 3 /* Identifier */ && this.context.inFunctionBody && this.lookahead.value === 'target') {
-	                var property = this.parseIdentifierName();
-	                expr = new Node.MetaProperty(id, property);
-	            }
-	            else {
-	                this.throwUnexpectedToken(this.lookahead);
-	            }
-	        }
-	        else {
-	            var callee = this.isolateCoverGrammar(this.parseLeftHandSideExpression);
-	            var args = this.match('(') ? this.parseArguments() : [];
-	            expr = new Node.NewExpression(callee, args);
-	            this.context.isAssignmentTarget = false;
-	            this.context.isBindingElement = false;
-	        }
-	        return this.finalize(node, expr);
-	    };
-	    Parser.prototype.parseAsyncArgument = function () {
-	        var arg = this.parseAssignmentExpression();
-	        this.context.firstCoverInitializedNameError = null;
-	        return arg;
-	    };
-	    Parser.prototype.parseAsyncArguments = function () {
-	        this.expect('(');
-	        var args = [];
-	        if (!this.match(')')) {
-	            while (true) {
-	                var expr = this.match('...') ? this.parseSpreadElement() :
-	                    this.isolateCoverGrammar(this.parseAsyncArgument);
-	                args.push(expr);
-	                if (this.match(')')) {
-	                    break;
-	                }
-	                this.expectCommaSeparator();
-	                if (this.match(')')) {
-	                    break;
-	                }
-	            }
-	        }
-	        this.expect(')');
-	        return args;
-	    };
-	    Parser.prototype.parseLeftHandSideExpressionAllowCall = function () {
-	        var startToken = this.lookahead;
-	        var maybeAsync = this.matchContextualKeyword('async');
-	        var previousAllowIn = this.context.allowIn;
-	        this.context.allowIn = true;
-	        var expr;
-	        if (this.matchKeyword('super') && this.context.inFunctionBody) {
-	            expr = this.createNode();
-	            this.nextToken();
-	            expr = this.finalize(expr, new Node.Super());
-	            if (!this.match('(') && !this.match('.') && !this.match('[')) {
-	                this.throwUnexpectedToken(this.lookahead);
-	            }
-	        }
-	        else {
-	            expr = this.inheritCoverGrammar(this.matchKeyword('new') ? this.parseNewExpression : this.parsePrimaryExpression);
-	        }
-	        while (true) {
-	            if (this.match('.')) {
-	                this.context.isBindingElement = false;
-	                this.context.isAssignmentTarget = true;
-	                this.expect('.');
-	                var property = this.parseIdentifierName();
-	                expr = this.finalize(this.startNode(startToken), new Node.StaticMemberExpression(expr, property));
-	            }
-	            else if (this.match('(')) {
-	                var asyncArrow = maybeAsync && (startToken.lineNumber === this.lookahead.lineNumber);
-	                this.context.isBindingElement = false;
-	                this.context.isAssignmentTarget = false;
-	                var args = asyncArrow ? this.parseAsyncArguments() : this.parseArguments();
-	                expr = this.finalize(this.startNode(startToken), new Node.CallExpression(expr, args));
-	                if (asyncArrow && this.match('=>')) {
-	                    for (var i = 0; i < args.length; ++i) {
-	                        this.reinterpretExpressionAsPattern(args[i]);
-	                    }
-	                    expr = {
-	                        type: ArrowParameterPlaceHolder,
-	                        params: args,
-	                        async: true
-	                    };
-	                }
-	            }
-	            else if (this.match('[')) {
-	                this.context.isBindingElement = false;
-	                this.context.isAssignmentTarget = true;
-	                this.expect('[');
-	                var property = this.isolateCoverGrammar(this.parseExpression);
-	                this.expect(']');
-	                expr = this.finalize(this.startNode(startToken), new Node.ComputedMemberExpression(expr, property));
-	            }
-	            else if (this.lookahead.type === 10 /* Template */ && this.lookahead.head) {
-	                var quasi = this.parseTemplateLiteral();
-	                expr = this.finalize(this.startNode(startToken), new Node.TaggedTemplateExpression(expr, quasi));
-	            }
-	            else {
-	                break;
-	            }
-	        }
-	        this.context.allowIn = previousAllowIn;
-	        return expr;
-	    };
-	    Parser.prototype.parseSuper = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('super');
-	        if (!this.match('[') && !this.match('.')) {
-	            this.throwUnexpectedToken(this.lookahead);
-	        }
-	        return this.finalize(node, new Node.Super());
-	    };
-	    Parser.prototype.parseLeftHandSideExpression = function () {
-	        assert_1.assert(this.context.allowIn, 'callee of new expression always allow in keyword.');
-	        var node = this.startNode(this.lookahead);
-	        var expr = (this.matchKeyword('super') && this.context.inFunctionBody) ? this.parseSuper() :
-	            this.inheritCoverGrammar(this.matchKeyword('new') ? this.parseNewExpression : this.parsePrimaryExpression);
-	        while (true) {
-	            if (this.match('[')) {
-	                this.context.isBindingElement = false;
-	                this.context.isAssignmentTarget = true;
-	                this.expect('[');
-	                var property = this.isolateCoverGrammar(this.parseExpression);
-	                this.expect(']');
-	                expr = this.finalize(node, new Node.ComputedMemberExpression(expr, property));
-	            }
-	            else if (this.match('.')) {
-	                this.context.isBindingElement = false;
-	                this.context.isAssignmentTarget = true;
-	                this.expect('.');
-	                var property = this.parseIdentifierName();
-	                expr = this.finalize(node, new Node.StaticMemberExpression(expr, property));
-	            }
-	            else if (this.lookahead.type === 10 /* Template */ && this.lookahead.head) {
-	                var quasi = this.parseTemplateLiteral();
-	                expr = this.finalize(node, new Node.TaggedTemplateExpression(expr, quasi));
-	            }
-	            else {
-	                break;
-	            }
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-update-expressions
-	    Parser.prototype.parseUpdateExpression = function () {
-	        var expr;
-	        var startToken = this.lookahead;
-	        if (this.match('++') || this.match('--')) {
-	            var node = this.startNode(startToken);
-	            var token = this.nextToken();
-	            expr = this.inheritCoverGrammar(this.parseUnaryExpression);
-	            if (this.context.strict && expr.type === syntax_1.Syntax.Identifier && this.scanner.isRestrictedWord(expr.name)) {
-	                this.tolerateError(messages_1.Messages.StrictLHSPrefix);
-	            }
-	            if (!this.context.isAssignmentTarget) {
-	                this.tolerateError(messages_1.Messages.InvalidLHSInAssignment);
-	            }
-	            var prefix = true;
-	            expr = this.finalize(node, new Node.UpdateExpression(token.value, expr, prefix));
-	            this.context.isAssignmentTarget = false;
-	            this.context.isBindingElement = false;
-	        }
-	        else {
-	            expr = this.inheritCoverGrammar(this.parseLeftHandSideExpressionAllowCall);
-	            if (!this.hasLineTerminator && this.lookahead.type === 7 /* Punctuator */) {
-	                if (this.match('++') || this.match('--')) {
-	                    if (this.context.strict && expr.type === syntax_1.Syntax.Identifier && this.scanner.isRestrictedWord(expr.name)) {
-	                        this.tolerateError(messages_1.Messages.StrictLHSPostfix);
-	                    }
-	                    if (!this.context.isAssignmentTarget) {
-	                        this.tolerateError(messages_1.Messages.InvalidLHSInAssignment);
-	                    }
-	                    this.context.isAssignmentTarget = false;
-	                    this.context.isBindingElement = false;
-	                    var operator = this.nextToken().value;
-	                    var prefix = false;
-	                    expr = this.finalize(this.startNode(startToken), new Node.UpdateExpression(operator, expr, prefix));
-	                }
-	            }
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-unary-operators
-	    Parser.prototype.parseAwaitExpression = function () {
-	        var node = this.createNode();
-	        this.nextToken();
-	        var argument = this.parseUnaryExpression();
-	        return this.finalize(node, new Node.AwaitExpression(argument));
-	    };
-	    Parser.prototype.parseUnaryExpression = function () {
-	        var expr;
-	        if (this.match('+') || this.match('-') || this.match('~') || this.match('!') ||
-	            this.matchKeyword('delete') || this.matchKeyword('void') || this.matchKeyword('typeof')) {
-	            var node = this.startNode(this.lookahead);
-	            var token = this.nextToken();
-	            expr = this.inheritCoverGrammar(this.parseUnaryExpression);
-	            expr = this.finalize(node, new Node.UnaryExpression(token.value, expr));
-	            if (this.context.strict && expr.operator === 'delete' && expr.argument.type === syntax_1.Syntax.Identifier) {
-	                this.tolerateError(messages_1.Messages.StrictDelete);
-	            }
-	            this.context.isAssignmentTarget = false;
-	            this.context.isBindingElement = false;
-	        }
-	        else if (this.context.await && this.matchContextualKeyword('await')) {
-	            expr = this.parseAwaitExpression();
-	        }
-	        else {
-	            expr = this.parseUpdateExpression();
-	        }
-	        return expr;
-	    };
-	    Parser.prototype.parseExponentiationExpression = function () {
-	        var startToken = this.lookahead;
-	        var expr = this.inheritCoverGrammar(this.parseUnaryExpression);
-	        if (expr.type !== syntax_1.Syntax.UnaryExpression && this.match('**')) {
-	            this.nextToken();
-	            this.context.isAssignmentTarget = false;
-	            this.context.isBindingElement = false;
-	            var left = expr;
-	            var right = this.isolateCoverGrammar(this.parseExponentiationExpression);
-	            expr = this.finalize(this.startNode(startToken), new Node.BinaryExpression('**', left, right));
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-exp-operator
-	    // https://tc39.github.io/ecma262/#sec-multiplicative-operators
-	    // https://tc39.github.io/ecma262/#sec-additive-operators
-	    // https://tc39.github.io/ecma262/#sec-bitwise-shift-operators
-	    // https://tc39.github.io/ecma262/#sec-relational-operators
-	    // https://tc39.github.io/ecma262/#sec-equality-operators
-	    // https://tc39.github.io/ecma262/#sec-binary-bitwise-operators
-	    // https://tc39.github.io/ecma262/#sec-binary-logical-operators
-	    Parser.prototype.binaryPrecedence = function (token) {
-	        var op = token.value;
-	        var precedence;
-	        if (token.type === 7 /* Punctuator */) {
-	            precedence = this.operatorPrecedence[op] || 0;
-	        }
-	        else if (token.type === 4 /* Keyword */) {
-	            precedence = (op === 'instanceof' || (this.context.allowIn && op === 'in')) ? 7 : 0;
-	        }
-	        else {
-	            precedence = 0;
-	        }
-	        return precedence;
-	    };
-	    Parser.prototype.parseBinaryExpression = function () {
-	        var startToken = this.lookahead;
-	        var expr = this.inheritCoverGrammar(this.parseExponentiationExpression);
-	        var token = this.lookahead;
-	        var prec = this.binaryPrecedence(token);
-	        if (prec > 0) {
-	            this.nextToken();
-	            this.context.isAssignmentTarget = false;
-	            this.context.isBindingElement = false;
-	            var markers = [startToken, this.lookahead];
-	            var left = expr;
-	            var right = this.isolateCoverGrammar(this.parseExponentiationExpression);
-	            var stack = [left, token.value, right];
-	            var precedences = [prec];
-	            while (true) {
-	                prec = this.binaryPrecedence(this.lookahead);
-	                if (prec <= 0) {
-	                    break;
-	                }
-	                // Reduce: make a binary expression from the three topmost entries.
-	                while ((stack.length > 2) && (prec <= precedences[precedences.length - 1])) {
-	                    right = stack.pop();
-	                    var operator = stack.pop();
-	                    precedences.pop();
-	                    left = stack.pop();
-	                    markers.pop();
-	                    var node = this.startNode(markers[markers.length - 1]);
-	                    stack.push(this.finalize(node, new Node.BinaryExpression(operator, left, right)));
-	                }
-	                // Shift.
-	                stack.push(this.nextToken().value);
-	                precedences.push(prec);
-	                markers.push(this.lookahead);
-	                stack.push(this.isolateCoverGrammar(this.parseExponentiationExpression));
-	            }
-	            // Final reduce to clean-up the stack.
-	            var i = stack.length - 1;
-	            expr = stack[i];
-	            var lastMarker = markers.pop();
-	            while (i > 1) {
-	                var marker = markers.pop();
-	                var lastLineStart = lastMarker && lastMarker.lineStart;
-	                var node = this.startNode(marker, lastLineStart);
-	                var operator = stack[i - 1];
-	                expr = this.finalize(node, new Node.BinaryExpression(operator, stack[i - 2], expr));
-	                i -= 2;
-	                lastMarker = marker;
-	            }
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-conditional-operator
-	    Parser.prototype.parseConditionalExpression = function () {
-	        var startToken = this.lookahead;
-	        var expr = this.inheritCoverGrammar(this.parseBinaryExpression);
-	        if (this.match('?')) {
-	            this.nextToken();
-	            var previousAllowIn = this.context.allowIn;
-	            this.context.allowIn = true;
-	            var consequent = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	            this.context.allowIn = previousAllowIn;
-	            this.expect(':');
-	            var alternate = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	            expr = this.finalize(this.startNode(startToken), new Node.ConditionalExpression(expr, consequent, alternate));
-	            this.context.isAssignmentTarget = false;
-	            this.context.isBindingElement = false;
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-assignment-operators
-	    Parser.prototype.checkPatternParam = function (options, param) {
-	        switch (param.type) {
-	            case syntax_1.Syntax.Identifier:
-	                this.validateParam(options, param, param.name);
-	                break;
-	            case syntax_1.Syntax.RestElement:
-	                this.checkPatternParam(options, param.argument);
-	                break;
-	            case syntax_1.Syntax.AssignmentPattern:
-	                this.checkPatternParam(options, param.left);
-	                break;
-	            case syntax_1.Syntax.ArrayPattern:
-	                for (var i = 0; i < param.elements.length; i++) {
-	                    if (param.elements[i] !== null) {
-	                        this.checkPatternParam(options, param.elements[i]);
-	                    }
-	                }
-	                break;
-	            case syntax_1.Syntax.ObjectPattern:
-	                for (var i = 0; i < param.properties.length; i++) {
-	                    this.checkPatternParam(options, param.properties[i].value);
-	                }
-	                break;
-	            default:
-	                break;
-	        }
-	        options.simple = options.simple && (param instanceof Node.Identifier);
-	    };
-	    Parser.prototype.reinterpretAsCoverFormalsList = function (expr) {
-	        var params = [expr];
-	        var options;
-	        var asyncArrow = false;
-	        switch (expr.type) {
-	            case syntax_1.Syntax.Identifier:
-	                break;
-	            case ArrowParameterPlaceHolder:
-	                params = expr.params;
-	                asyncArrow = expr.async;
-	                break;
-	            default:
-	                return null;
-	        }
-	        options = {
-	            simple: true,
-	            paramSet: {}
-	        };
-	        for (var i = 0; i < params.length; ++i) {
-	            var param = params[i];
-	            if (param.type === syntax_1.Syntax.AssignmentPattern) {
-	                if (param.right.type === syntax_1.Syntax.YieldExpression) {
-	                    if (param.right.argument) {
-	                        this.throwUnexpectedToken(this.lookahead);
-	                    }
-	                    param.right.type = syntax_1.Syntax.Identifier;
-	                    param.right.name = 'yield';
-	                    delete param.right.argument;
-	                    delete param.right.delegate;
-	                }
-	            }
-	            else if (asyncArrow && param.type === syntax_1.Syntax.Identifier && param.name === 'await') {
-	                this.throwUnexpectedToken(this.lookahead);
-	            }
-	            this.checkPatternParam(options, param);
-	            params[i] = param;
-	        }
-	        if (this.context.strict || !this.context.allowYield) {
-	            for (var i = 0; i < params.length; ++i) {
-	                var param = params[i];
-	                if (param.type === syntax_1.Syntax.YieldExpression) {
-	                    this.throwUnexpectedToken(this.lookahead);
-	                }
-	            }
-	        }
-	        if (options.message === messages_1.Messages.StrictParamDupe) {
-	            var token = this.context.strict ? options.stricted : options.firstRestricted;
-	            this.throwUnexpectedToken(token, options.message);
-	        }
-	        return {
-	            simple: options.simple,
-	            params: params,
-	            stricted: options.stricted,
-	            firstRestricted: options.firstRestricted,
-	            message: options.message
-	        };
-	    };
-	    Parser.prototype.parseAssignmentExpression = function () {
-	        var expr;
-	        if (!this.context.allowYield && this.matchKeyword('yield')) {
-	            expr = this.parseYieldExpression();
-	        }
-	        else {
-	            var startToken = this.lookahead;
-	            var token = startToken;
-	            expr = this.parseConditionalExpression();
-	            if (token.type === 3 /* Identifier */ && (token.lineNumber === this.lookahead.lineNumber) && token.value === 'async') {
-	                if (this.lookahead.type === 3 /* Identifier */ || this.matchKeyword('yield')) {
-	                    var arg = this.parsePrimaryExpression();
-	                    this.reinterpretExpressionAsPattern(arg);
-	                    expr = {
-	                        type: ArrowParameterPlaceHolder,
-	                        params: [arg],
-	                        async: true
-	                    };
-	                }
-	            }
-	            if (expr.type === ArrowParameterPlaceHolder || this.match('=>')) {
-	                // https://tc39.github.io/ecma262/#sec-arrow-function-definitions
-	                this.context.isAssignmentTarget = false;
-	                this.context.isBindingElement = false;
-	                var isAsync = expr.async;
-	                var list = this.reinterpretAsCoverFormalsList(expr);
-	                if (list) {
-	                    if (this.hasLineTerminator) {
-	                        this.tolerateUnexpectedToken(this.lookahead);
-	                    }
-	                    this.context.firstCoverInitializedNameError = null;
-	                    var previousStrict = this.context.strict;
-	                    var previousAllowStrictDirective = this.context.allowStrictDirective;
-	                    this.context.allowStrictDirective = list.simple;
-	                    var previousAllowYield = this.context.allowYield;
-	                    var previousAwait = this.context.await;
-	                    this.context.allowYield = true;
-	                    this.context.await = isAsync;
-	                    var node = this.startNode(startToken);
-	                    this.expect('=>');
-	                    var body = void 0;
-	                    if (this.match('{')) {
-	                        var previousAllowIn = this.context.allowIn;
-	                        this.context.allowIn = true;
-	                        body = this.parseFunctionSourceElements();
-	                        this.context.allowIn = previousAllowIn;
-	                    }
-	                    else {
-	                        body = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	                    }
-	                    var expression = body.type !== syntax_1.Syntax.BlockStatement;
-	                    if (this.context.strict && list.firstRestricted) {
-	                        this.throwUnexpectedToken(list.firstRestricted, list.message);
-	                    }
-	                    if (this.context.strict && list.stricted) {
-	                        this.tolerateUnexpectedToken(list.stricted, list.message);
-	                    }
-	                    expr = isAsync ? this.finalize(node, new Node.AsyncArrowFunctionExpression(list.params, body, expression)) :
-	                        this.finalize(node, new Node.ArrowFunctionExpression(list.params, body, expression));
-	                    this.context.strict = previousStrict;
-	                    this.context.allowStrictDirective = previousAllowStrictDirective;
-	                    this.context.allowYield = previousAllowYield;
-	                    this.context.await = previousAwait;
-	                }
-	            }
-	            else {
-	                if (this.matchAssign()) {
-	                    if (!this.context.isAssignmentTarget) {
-	                        this.tolerateError(messages_1.Messages.InvalidLHSInAssignment);
-	                    }
-	                    if (this.context.strict && expr.type === syntax_1.Syntax.Identifier) {
-	                        var id = expr;
-	                        if (this.scanner.isRestrictedWord(id.name)) {
-	                            this.tolerateUnexpectedToken(token, messages_1.Messages.StrictLHSAssignment);
-	                        }
-	                        if (this.scanner.isStrictModeReservedWord(id.name)) {
-	                            this.tolerateUnexpectedToken(token, messages_1.Messages.StrictReservedWord);
-	                        }
-	                    }
-	                    if (!this.match('=')) {
-	                        this.context.isAssignmentTarget = false;
-	                        this.context.isBindingElement = false;
-	                    }
-	                    else {
-	                        this.reinterpretExpressionAsPattern(expr);
-	                    }
-	                    token = this.nextToken();
-	                    var operator = token.value;
-	                    var right = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	                    expr = this.finalize(this.startNode(startToken), new Node.AssignmentExpression(operator, expr, right));
-	                    this.context.firstCoverInitializedNameError = null;
-	                }
-	            }
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-comma-operator
-	    Parser.prototype.parseExpression = function () {
-	        var startToken = this.lookahead;
-	        var expr = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	        if (this.match(',')) {
-	            var expressions = [];
-	            expressions.push(expr);
-	            while (this.lookahead.type !== 2 /* EOF */) {
-	                if (!this.match(',')) {
-	                    break;
-	                }
-	                this.nextToken();
-	                expressions.push(this.isolateCoverGrammar(this.parseAssignmentExpression));
-	            }
-	            expr = this.finalize(this.startNode(startToken), new Node.SequenceExpression(expressions));
-	        }
-	        return expr;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-block
-	    Parser.prototype.parseStatementListItem = function () {
-	        var statement;
-	        this.context.isAssignmentTarget = true;
-	        this.context.isBindingElement = true;
-	        if (this.lookahead.type === 4 /* Keyword */) {
-	            switch (this.lookahead.value) {
-	                case 'export':
-	                    if (!this.context.isModule) {
-	                        this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.IllegalExportDeclaration);
-	                    }
-	                    statement = this.parseExportDeclaration();
-	                    break;
-	                case 'import':
-	                    if (!this.context.isModule) {
-	                        this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.IllegalImportDeclaration);
-	                    }
-	                    statement = this.parseImportDeclaration();
-	                    break;
-	                case 'const':
-	                    statement = this.parseLexicalDeclaration({ inFor: false });
-	                    break;
-	                case 'function':
-	                    statement = this.parseFunctionDeclaration();
-	                    break;
-	                case 'class':
-	                    statement = this.parseClassDeclaration();
-	                    break;
-	                case 'let':
-	                    statement = this.isLexicalDeclaration() ? this.parseLexicalDeclaration({ inFor: false }) : this.parseStatement();
-	                    break;
-	                default:
-	                    statement = this.parseStatement();
-	                    break;
-	            }
-	        }
-	        else {
-	            statement = this.parseStatement();
-	        }
-	        return statement;
-	    };
-	    Parser.prototype.parseBlock = function () {
-	        var node = this.createNode();
-	        this.expect('{');
-	        var block = [];
-	        while (true) {
-	            if (this.match('}')) {
-	                break;
-	            }
-	            block.push(this.parseStatementListItem());
-	        }
-	        this.expect('}');
-	        return this.finalize(node, new Node.BlockStatement(block));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-let-and-const-declarations
-	    Parser.prototype.parseLexicalBinding = function (kind, options) {
-	        var node = this.createNode();
-	        var params = [];
-	        var id = this.parsePattern(params, kind);
-	        if (this.context.strict && id.type === syntax_1.Syntax.Identifier) {
-	            if (this.scanner.isRestrictedWord(id.name)) {
-	                this.tolerateError(messages_1.Messages.StrictVarName);
-	            }
-	        }
-	        var init = null;
-	        if (kind === 'const') {
-	            if (!this.matchKeyword('in') && !this.matchContextualKeyword('of')) {
-	                if (this.match('=')) {
-	                    this.nextToken();
-	                    init = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	                }
-	                else {
-	                    this.throwError(messages_1.Messages.DeclarationMissingInitializer, 'const');
-	                }
-	            }
-	        }
-	        else if ((!options.inFor && id.type !== syntax_1.Syntax.Identifier) || this.match('=')) {
-	            this.expect('=');
-	            init = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	        }
-	        return this.finalize(node, new Node.VariableDeclarator(id, init));
-	    };
-	    Parser.prototype.parseBindingList = function (kind, options) {
-	        var list = [this.parseLexicalBinding(kind, options)];
-	        while (this.match(',')) {
-	            this.nextToken();
-	            list.push(this.parseLexicalBinding(kind, options));
-	        }
-	        return list;
-	    };
-	    Parser.prototype.isLexicalDeclaration = function () {
-	        var state = this.scanner.saveState();
-	        this.scanner.scanComments();
-	        var next = this.scanner.lex();
-	        this.scanner.restoreState(state);
-	        return (next.type === 3 /* Identifier */) ||
-	            (next.type === 7 /* Punctuator */ && next.value === '[') ||
-	            (next.type === 7 /* Punctuator */ && next.value === '{') ||
-	            (next.type === 4 /* Keyword */ && next.value === 'let') ||
-	            (next.type === 4 /* Keyword */ && next.value === 'yield');
-	    };
-	    Parser.prototype.parseLexicalDeclaration = function (options) {
-	        var node = this.createNode();
-	        var kind = this.nextToken().value;
-	        assert_1.assert(kind === 'let' || kind === 'const', 'Lexical declaration must be either let or const');
-	        var declarations = this.parseBindingList(kind, options);
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.VariableDeclaration(declarations, kind));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-destructuring-binding-patterns
-	    Parser.prototype.parseBindingRestElement = function (params, kind) {
-	        var node = this.createNode();
-	        this.expect('...');
-	        var arg = this.parsePattern(params, kind);
-	        return this.finalize(node, new Node.RestElement(arg));
-	    };
-	    Parser.prototype.parseArrayPattern = function (params, kind) {
-	        var node = this.createNode();
-	        this.expect('[');
-	        var elements = [];
-	        while (!this.match(']')) {
-	            if (this.match(',')) {
-	                this.nextToken();
-	                elements.push(null);
-	            }
-	            else {
-	                if (this.match('...')) {
-	                    elements.push(this.parseBindingRestElement(params, kind));
-	                    break;
-	                }
-	                else {
-	                    elements.push(this.parsePatternWithDefault(params, kind));
-	                }
-	                if (!this.match(']')) {
-	                    this.expect(',');
-	                }
-	            }
-	        }
-	        this.expect(']');
-	        return this.finalize(node, new Node.ArrayPattern(elements));
-	    };
-	    Parser.prototype.parsePropertyPattern = function (params, kind) {
-	        var node = this.createNode();
-	        var computed = false;
-	        var shorthand = false;
-	        var method = false;
-	        var key;
-	        var value;
-	        if (this.lookahead.type === 3 /* Identifier */) {
-	            var keyToken = this.lookahead;
-	            key = this.parseVariableIdentifier();
-	            var init = this.finalize(node, new Node.Identifier(keyToken.value));
-	            if (this.match('=')) {
-	                params.push(keyToken);
-	                shorthand = true;
-	                this.nextToken();
-	                var expr = this.parseAssignmentExpression();
-	                value = this.finalize(this.startNode(keyToken), new Node.AssignmentPattern(init, expr));
-	            }
-	            else if (!this.match(':')) {
-	                params.push(keyToken);
-	                shorthand = true;
-	                value = init;
-	            }
-	            else {
-	                this.expect(':');
-	                value = this.parsePatternWithDefault(params, kind);
-	            }
-	        }
-	        else {
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	            this.expect(':');
-	            value = this.parsePatternWithDefault(params, kind);
-	        }
-	        return this.finalize(node, new Node.Property('init', key, computed, value, method, shorthand));
-	    };
-	    Parser.prototype.parseObjectPattern = function (params, kind) {
-	        var node = this.createNode();
-	        var properties = [];
-	        this.expect('{');
-	        while (!this.match('}')) {
-	            properties.push(this.parsePropertyPattern(params, kind));
-	            if (!this.match('}')) {
-	                this.expect(',');
-	            }
-	        }
-	        this.expect('}');
-	        return this.finalize(node, new Node.ObjectPattern(properties));
-	    };
-	    Parser.prototype.parsePattern = function (params, kind) {
-	        var pattern;
-	        if (this.match('[')) {
-	            pattern = this.parseArrayPattern(params, kind);
-	        }
-	        else if (this.match('{')) {
-	            pattern = this.parseObjectPattern(params, kind);
-	        }
-	        else {
-	            if (this.matchKeyword('let') && (kind === 'const' || kind === 'let')) {
-	                this.tolerateUnexpectedToken(this.lookahead, messages_1.Messages.LetInLexicalBinding);
-	            }
-	            params.push(this.lookahead);
-	            pattern = this.parseVariableIdentifier(kind);
-	        }
-	        return pattern;
-	    };
-	    Parser.prototype.parsePatternWithDefault = function (params, kind) {
-	        var startToken = this.lookahead;
-	        var pattern = this.parsePattern(params, kind);
-	        if (this.match('=')) {
-	            this.nextToken();
-	            var previousAllowYield = this.context.allowYield;
-	            this.context.allowYield = true;
-	            var right = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	            this.context.allowYield = previousAllowYield;
-	            pattern = this.finalize(this.startNode(startToken), new Node.AssignmentPattern(pattern, right));
-	        }
-	        return pattern;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-variable-statement
-	    Parser.prototype.parseVariableIdentifier = function (kind) {
-	        var node = this.createNode();
-	        var token = this.nextToken();
-	        if (token.type === 4 /* Keyword */ && token.value === 'yield') {
-	            if (this.context.strict) {
-	                this.tolerateUnexpectedToken(token, messages_1.Messages.StrictReservedWord);
-	            }
-	            else if (!this.context.allowYield) {
-	                this.throwUnexpectedToken(token);
-	            }
-	        }
-	        else if (token.type !== 3 /* Identifier */) {
-	            if (this.context.strict && token.type === 4 /* Keyword */ && this.scanner.isStrictModeReservedWord(token.value)) {
-	                this.tolerateUnexpectedToken(token, messages_1.Messages.StrictReservedWord);
-	            }
-	            else {
-	                if (this.context.strict || token.value !== 'let' || kind !== 'var') {
-	                    this.throwUnexpectedToken(token);
-	                }
-	            }
-	        }
-	        else if ((this.context.isModule || this.context.await) && token.type === 3 /* Identifier */ && token.value === 'await') {
-	            this.tolerateUnexpectedToken(token);
-	        }
-	        return this.finalize(node, new Node.Identifier(token.value));
-	    };
-	    Parser.prototype.parseVariableDeclaration = function (options) {
-	        var node = this.createNode();
-	        var params = [];
-	        var id = this.parsePattern(params, 'var');
-	        if (this.context.strict && id.type === syntax_1.Syntax.Identifier) {
-	            if (this.scanner.isRestrictedWord(id.name)) {
-	                this.tolerateError(messages_1.Messages.StrictVarName);
-	            }
-	        }
-	        var init = null;
-	        if (this.match('=')) {
-	            this.nextToken();
-	            init = this.isolateCoverGrammar(this.parseAssignmentExpression);
-	        }
-	        else if (id.type !== syntax_1.Syntax.Identifier && !options.inFor) {
-	            this.expect('=');
-	        }
-	        return this.finalize(node, new Node.VariableDeclarator(id, init));
-	    };
-	    Parser.prototype.parseVariableDeclarationList = function (options) {
-	        var opt = { inFor: options.inFor };
-	        var list = [];
-	        list.push(this.parseVariableDeclaration(opt));
-	        while (this.match(',')) {
-	            this.nextToken();
-	            list.push(this.parseVariableDeclaration(opt));
-	        }
-	        return list;
-	    };
-	    Parser.prototype.parseVariableStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('var');
-	        var declarations = this.parseVariableDeclarationList({ inFor: false });
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.VariableDeclaration(declarations, 'var'));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-empty-statement
-	    Parser.prototype.parseEmptyStatement = function () {
-	        var node = this.createNode();
-	        this.expect(';');
-	        return this.finalize(node, new Node.EmptyStatement());
-	    };
-	    // https://tc39.github.io/ecma262/#sec-expression-statement
-	    Parser.prototype.parseExpressionStatement = function () {
-	        var node = this.createNode();
-	        var expr = this.parseExpression();
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.ExpressionStatement(expr));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-if-statement
-	    Parser.prototype.parseIfClause = function () {
-	        if (this.context.strict && this.matchKeyword('function')) {
-	            this.tolerateError(messages_1.Messages.StrictFunction);
-	        }
-	        return this.parseStatement();
-	    };
-	    Parser.prototype.parseIfStatement = function () {
-	        var node = this.createNode();
-	        var consequent;
-	        var alternate = null;
-	        this.expectKeyword('if');
-	        this.expect('(');
-	        var test = this.parseExpression();
-	        if (!this.match(')') && this.config.tolerant) {
-	            this.tolerateUnexpectedToken(this.nextToken());
-	            consequent = this.finalize(this.createNode(), new Node.EmptyStatement());
-	        }
-	        else {
-	            this.expect(')');
-	            consequent = this.parseIfClause();
-	            if (this.matchKeyword('else')) {
-	                this.nextToken();
-	                alternate = this.parseIfClause();
-	            }
-	        }
-	        return this.finalize(node, new Node.IfStatement(test, consequent, alternate));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-do-while-statement
-	    Parser.prototype.parseDoWhileStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('do');
-	        var previousInIteration = this.context.inIteration;
-	        this.context.inIteration = true;
-	        var body = this.parseStatement();
-	        this.context.inIteration = previousInIteration;
-	        this.expectKeyword('while');
-	        this.expect('(');
-	        var test = this.parseExpression();
-	        if (!this.match(')') && this.config.tolerant) {
-	            this.tolerateUnexpectedToken(this.nextToken());
-	        }
-	        else {
-	            this.expect(')');
-	            if (this.match(';')) {
-	                this.nextToken();
-	            }
-	        }
-	        return this.finalize(node, new Node.DoWhileStatement(body, test));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-while-statement
-	    Parser.prototype.parseWhileStatement = function () {
-	        var node = this.createNode();
-	        var body;
-	        this.expectKeyword('while');
-	        this.expect('(');
-	        var test = this.parseExpression();
-	        if (!this.match(')') && this.config.tolerant) {
-	            this.tolerateUnexpectedToken(this.nextToken());
-	            body = this.finalize(this.createNode(), new Node.EmptyStatement());
-	        }
-	        else {
-	            this.expect(')');
-	            var previousInIteration = this.context.inIteration;
-	            this.context.inIteration = true;
-	            body = this.parseStatement();
-	            this.context.inIteration = previousInIteration;
-	        }
-	        return this.finalize(node, new Node.WhileStatement(test, body));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-for-statement
-	    // https://tc39.github.io/ecma262/#sec-for-in-and-for-of-statements
-	    Parser.prototype.parseForStatement = function () {
-	        var init = null;
-	        var test = null;
-	        var update = null;
-	        var forIn = true;
-	        var left, right;
-	        var node = this.createNode();
-	        this.expectKeyword('for');
-	        this.expect('(');
-	        if (this.match(';')) {
-	            this.nextToken();
-	        }
-	        else {
-	            if (this.matchKeyword('var')) {
-	                init = this.createNode();
-	                this.nextToken();
-	                var previousAllowIn = this.context.allowIn;
-	                this.context.allowIn = false;
-	                var declarations = this.parseVariableDeclarationList({ inFor: true });
-	                this.context.allowIn = previousAllowIn;
-	                if (declarations.length === 1 && this.matchKeyword('in')) {
-	                    var decl = declarations[0];
-	                    if (decl.init && (decl.id.type === syntax_1.Syntax.ArrayPattern || decl.id.type === syntax_1.Syntax.ObjectPattern || this.context.strict)) {
-	                        this.tolerateError(messages_1.Messages.ForInOfLoopInitializer, 'for-in');
-	                    }
-	                    init = this.finalize(init, new Node.VariableDeclaration(declarations, 'var'));
-	                    this.nextToken();
-	                    left = init;
-	                    right = this.parseExpression();
-	                    init = null;
-	                }
-	                else if (declarations.length === 1 && declarations[0].init === null && this.matchContextualKeyword('of')) {
-	                    init = this.finalize(init, new Node.VariableDeclaration(declarations, 'var'));
-	                    this.nextToken();
-	                    left = init;
-	                    right = this.parseAssignmentExpression();
-	                    init = null;
-	                    forIn = false;
-	                }
-	                else {
-	                    init = this.finalize(init, new Node.VariableDeclaration(declarations, 'var'));
-	                    this.expect(';');
-	                }
-	            }
-	            else if (this.matchKeyword('const') || this.matchKeyword('let')) {
-	                init = this.createNode();
-	                var kind = this.nextToken().value;
-	                if (!this.context.strict && this.lookahead.value === 'in') {
-	                    init = this.finalize(init, new Node.Identifier(kind));
-	                    this.nextToken();
-	                    left = init;
-	                    right = this.parseExpression();
-	                    init = null;
-	                }
-	                else {
-	                    var previousAllowIn = this.context.allowIn;
-	                    this.context.allowIn = false;
-	                    var declarations = this.parseBindingList(kind, { inFor: true });
-	                    this.context.allowIn = previousAllowIn;
-	                    if (declarations.length === 1 && declarations[0].init === null && this.matchKeyword('in')) {
-	                        init = this.finalize(init, new Node.VariableDeclaration(declarations, kind));
-	                        this.nextToken();
-	                        left = init;
-	                        right = this.parseExpression();
-	                        init = null;
-	                    }
-	                    else if (declarations.length === 1 && declarations[0].init === null && this.matchContextualKeyword('of')) {
-	                        init = this.finalize(init, new Node.VariableDeclaration(declarations, kind));
-	                        this.nextToken();
-	                        left = init;
-	                        right = this.parseAssignmentExpression();
-	                        init = null;
-	                        forIn = false;
-	                    }
-	                    else {
-	                        this.consumeSemicolon();
-	                        init = this.finalize(init, new Node.VariableDeclaration(declarations, kind));
-	                    }
-	                }
-	            }
-	            else {
-	                var initStartToken = this.lookahead;
-	                var previousAllowIn = this.context.allowIn;
-	                this.context.allowIn = false;
-	                init = this.inheritCoverGrammar(this.parseAssignmentExpression);
-	                this.context.allowIn = previousAllowIn;
-	                if (this.matchKeyword('in')) {
-	                    if (!this.context.isAssignmentTarget || init.type === syntax_1.Syntax.AssignmentExpression) {
-	                        this.tolerateError(messages_1.Messages.InvalidLHSInForIn);
-	                    }
-	                    this.nextToken();
-	                    this.reinterpretExpressionAsPattern(init);
-	                    left = init;
-	                    right = this.parseExpression();
-	                    init = null;
-	                }
-	                else if (this.matchContextualKeyword('of')) {
-	                    if (!this.context.isAssignmentTarget || init.type === syntax_1.Syntax.AssignmentExpression) {
-	                        this.tolerateError(messages_1.Messages.InvalidLHSInForLoop);
-	                    }
-	                    this.nextToken();
-	                    this.reinterpretExpressionAsPattern(init);
-	                    left = init;
-	                    right = this.parseAssignmentExpression();
-	                    init = null;
-	                    forIn = false;
-	                }
-	                else {
-	                    if (this.match(',')) {
-	                        var initSeq = [init];
-	                        while (this.match(',')) {
-	                            this.nextToken();
-	                            initSeq.push(this.isolateCoverGrammar(this.parseAssignmentExpression));
-	                        }
-	                        init = this.finalize(this.startNode(initStartToken), new Node.SequenceExpression(initSeq));
-	                    }
-	                    this.expect(';');
-	                }
-	            }
-	        }
-	        if (typeof left === 'undefined') {
-	            if (!this.match(';')) {
-	                test = this.parseExpression();
-	            }
-	            this.expect(';');
-	            if (!this.match(')')) {
-	                update = this.parseExpression();
-	            }
-	        }
-	        var body;
-	        if (!this.match(')') && this.config.tolerant) {
-	            this.tolerateUnexpectedToken(this.nextToken());
-	            body = this.finalize(this.createNode(), new Node.EmptyStatement());
-	        }
-	        else {
-	            this.expect(')');
-	            var previousInIteration = this.context.inIteration;
-	            this.context.inIteration = true;
-	            body = this.isolateCoverGrammar(this.parseStatement);
-	            this.context.inIteration = previousInIteration;
-	        }
-	        return (typeof left === 'undefined') ?
-	            this.finalize(node, new Node.ForStatement(init, test, update, body)) :
-	            forIn ? this.finalize(node, new Node.ForInStatement(left, right, body)) :
-	                this.finalize(node, new Node.ForOfStatement(left, right, body));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-continue-statement
-	    Parser.prototype.parseContinueStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('continue');
-	        var label = null;
-	        if (this.lookahead.type === 3 /* Identifier */ && !this.hasLineTerminator) {
-	            var id = this.parseVariableIdentifier();
-	            label = id;
-	            var key = '$' + id.name;
-	            if (!Object.prototype.hasOwnProperty.call(this.context.labelSet, key)) {
-	                this.throwError(messages_1.Messages.UnknownLabel, id.name);
-	            }
-	        }
-	        this.consumeSemicolon();
-	        if (label === null && !this.context.inIteration) {
-	            this.throwError(messages_1.Messages.IllegalContinue);
-	        }
-	        return this.finalize(node, new Node.ContinueStatement(label));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-break-statement
-	    Parser.prototype.parseBreakStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('break');
-	        var label = null;
-	        if (this.lookahead.type === 3 /* Identifier */ && !this.hasLineTerminator) {
-	            var id = this.parseVariableIdentifier();
-	            var key = '$' + id.name;
-	            if (!Object.prototype.hasOwnProperty.call(this.context.labelSet, key)) {
-	                this.throwError(messages_1.Messages.UnknownLabel, id.name);
-	            }
-	            label = id;
-	        }
-	        this.consumeSemicolon();
-	        if (label === null && !this.context.inIteration && !this.context.inSwitch) {
-	            this.throwError(messages_1.Messages.IllegalBreak);
-	        }
-	        return this.finalize(node, new Node.BreakStatement(label));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-return-statement
-	    Parser.prototype.parseReturnStatement = function () {
-	        if (!this.context.inFunctionBody) {
-	            this.tolerateError(messages_1.Messages.IllegalReturn);
-	        }
-	        var node = this.createNode();
-	        this.expectKeyword('return');
-	        var hasArgument = (!this.match(';') && !this.match('}') &&
-	            !this.hasLineTerminator && this.lookahead.type !== 2 /* EOF */) ||
-	            this.lookahead.type === 8 /* StringLiteral */ ||
-	            this.lookahead.type === 10 /* Template */;
-	        var argument = hasArgument ? this.parseExpression() : null;
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.ReturnStatement(argument));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-with-statement
-	    Parser.prototype.parseWithStatement = function () {
-	        if (this.context.strict) {
-	            this.tolerateError(messages_1.Messages.StrictModeWith);
-	        }
-	        var node = this.createNode();
-	        var body;
-	        this.expectKeyword('with');
-	        this.expect('(');
-	        var object = this.parseExpression();
-	        if (!this.match(')') && this.config.tolerant) {
-	            this.tolerateUnexpectedToken(this.nextToken());
-	            body = this.finalize(this.createNode(), new Node.EmptyStatement());
-	        }
-	        else {
-	            this.expect(')');
-	            body = this.parseStatement();
-	        }
-	        return this.finalize(node, new Node.WithStatement(object, body));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-switch-statement
-	    Parser.prototype.parseSwitchCase = function () {
-	        var node = this.createNode();
-	        var test;
-	        if (this.matchKeyword('default')) {
-	            this.nextToken();
-	            test = null;
-	        }
-	        else {
-	            this.expectKeyword('case');
-	            test = this.parseExpression();
-	        }
-	        this.expect(':');
-	        var consequent = [];
-	        while (true) {
-	            if (this.match('}') || this.matchKeyword('default') || this.matchKeyword('case')) {
-	                break;
-	            }
-	            consequent.push(this.parseStatementListItem());
-	        }
-	        return this.finalize(node, new Node.SwitchCase(test, consequent));
-	    };
-	    Parser.prototype.parseSwitchStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('switch');
-	        this.expect('(');
-	        var discriminant = this.parseExpression();
-	        this.expect(')');
-	        var previousInSwitch = this.context.inSwitch;
-	        this.context.inSwitch = true;
-	        var cases = [];
-	        var defaultFound = false;
-	        this.expect('{');
-	        while (true) {
-	            if (this.match('}')) {
-	                break;
-	            }
-	            var clause = this.parseSwitchCase();
-	            if (clause.test === null) {
-	                if (defaultFound) {
-	                    this.throwError(messages_1.Messages.MultipleDefaultsInSwitch);
-	                }
-	                defaultFound = true;
-	            }
-	            cases.push(clause);
-	        }
-	        this.expect('}');
-	        this.context.inSwitch = previousInSwitch;
-	        return this.finalize(node, new Node.SwitchStatement(discriminant, cases));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-labelled-statements
-	    Parser.prototype.parseLabelledStatement = function () {
-	        var node = this.createNode();
-	        var expr = this.parseExpression();
-	        var statement;
-	        if ((expr.type === syntax_1.Syntax.Identifier) && this.match(':')) {
-	            this.nextToken();
-	            var id = expr;
-	            var key = '$' + id.name;
-	            if (Object.prototype.hasOwnProperty.call(this.context.labelSet, key)) {
-	                this.throwError(messages_1.Messages.Redeclaration, 'Label', id.name);
-	            }
-	            this.context.labelSet[key] = true;
-	            var body = void 0;
-	            if (this.matchKeyword('class')) {
-	                this.tolerateUnexpectedToken(this.lookahead);
-	                body = this.parseClassDeclaration();
-	            }
-	            else if (this.matchKeyword('function')) {
-	                var token = this.lookahead;
-	                var declaration = this.parseFunctionDeclaration();
-	                if (this.context.strict) {
-	                    this.tolerateUnexpectedToken(token, messages_1.Messages.StrictFunction);
-	                }
-	                else if (declaration.generator) {
-	                    this.tolerateUnexpectedToken(token, messages_1.Messages.GeneratorInLegacyContext);
-	                }
-	                body = declaration;
-	            }
-	            else {
-	                body = this.parseStatement();
-	            }
-	            delete this.context.labelSet[key];
-	            statement = new Node.LabeledStatement(id, body);
-	        }
-	        else {
-	            this.consumeSemicolon();
-	            statement = new Node.ExpressionStatement(expr);
-	        }
-	        return this.finalize(node, statement);
-	    };
-	    // https://tc39.github.io/ecma262/#sec-throw-statement
-	    Parser.prototype.parseThrowStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('throw');
-	        if (this.hasLineTerminator) {
-	            this.throwError(messages_1.Messages.NewlineAfterThrow);
-	        }
-	        var argument = this.parseExpression();
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.ThrowStatement(argument));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-try-statement
-	    Parser.prototype.parseCatchClause = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('catch');
-	        this.expect('(');
-	        if (this.match(')')) {
-	            this.throwUnexpectedToken(this.lookahead);
-	        }
-	        var params = [];
-	        var param = this.parsePattern(params);
-	        var paramMap = {};
-	        for (var i = 0; i < params.length; i++) {
-	            var key = '$' + params[i].value;
-	            if (Object.prototype.hasOwnProperty.call(paramMap, key)) {
-	                this.tolerateError(messages_1.Messages.DuplicateBinding, params[i].value);
-	            }
-	            paramMap[key] = true;
-	        }
-	        if (this.context.strict && param.type === syntax_1.Syntax.Identifier) {
-	            if (this.scanner.isRestrictedWord(param.name)) {
-	                this.tolerateError(messages_1.Messages.StrictCatchVariable);
-	            }
-	        }
-	        this.expect(')');
-	        var body = this.parseBlock();
-	        return this.finalize(node, new Node.CatchClause(param, body));
-	    };
-	    Parser.prototype.parseFinallyClause = function () {
-	        this.expectKeyword('finally');
-	        return this.parseBlock();
-	    };
-	    Parser.prototype.parseTryStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('try');
-	        var block = this.parseBlock();
-	        var handler = this.matchKeyword('catch') ? this.parseCatchClause() : null;
-	        var finalizer = this.matchKeyword('finally') ? this.parseFinallyClause() : null;
-	        if (!handler && !finalizer) {
-	            this.throwError(messages_1.Messages.NoCatchOrFinally);
-	        }
-	        return this.finalize(node, new Node.TryStatement(block, handler, finalizer));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-debugger-statement
-	    Parser.prototype.parseDebuggerStatement = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('debugger');
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.DebuggerStatement());
-	    };
-	    // https://tc39.github.io/ecma262/#sec-ecmascript-language-statements-and-declarations
-	    Parser.prototype.parseStatement = function () {
-	        var statement;
-	        switch (this.lookahead.type) {
-	            case 1 /* BooleanLiteral */:
-	            case 5 /* NullLiteral */:
-	            case 6 /* NumericLiteral */:
-	            case 8 /* StringLiteral */:
-	            case 10 /* Template */:
-	            case 9 /* RegularExpression */:
-	                statement = this.parseExpressionStatement();
-	                break;
-	            case 7 /* Punctuator */:
-	                var value = this.lookahead.value;
-	                if (value === '{') {
-	                    statement = this.parseBlock();
-	                }
-	                else if (value === '(') {
-	                    statement = this.parseExpressionStatement();
-	                }
-	                else if (value === ';') {
-	                    statement = this.parseEmptyStatement();
-	                }
-	                else {
-	                    statement = this.parseExpressionStatement();
-	                }
-	                break;
-	            case 3 /* Identifier */:
-	                statement = this.matchAsyncFunction() ? this.parseFunctionDeclaration() : this.parseLabelledStatement();
-	                break;
-	            case 4 /* Keyword */:
-	                switch (this.lookahead.value) {
-	                    case 'break':
-	                        statement = this.parseBreakStatement();
-	                        break;
-	                    case 'continue':
-	                        statement = this.parseContinueStatement();
-	                        break;
-	                    case 'debugger':
-	                        statement = this.parseDebuggerStatement();
-	                        break;
-	                    case 'do':
-	                        statement = this.parseDoWhileStatement();
-	                        break;
-	                    case 'for':
-	                        statement = this.parseForStatement();
-	                        break;
-	                    case 'function':
-	                        statement = this.parseFunctionDeclaration();
-	                        break;
-	                    case 'if':
-	                        statement = this.parseIfStatement();
-	                        break;
-	                    case 'return':
-	                        statement = this.parseReturnStatement();
-	                        break;
-	                    case 'switch':
-	                        statement = this.parseSwitchStatement();
-	                        break;
-	                    case 'throw':
-	                        statement = this.parseThrowStatement();
-	                        break;
-	                    case 'try':
-	                        statement = this.parseTryStatement();
-	                        break;
-	                    case 'var':
-	                        statement = this.parseVariableStatement();
-	                        break;
-	                    case 'while':
-	                        statement = this.parseWhileStatement();
-	                        break;
-	                    case 'with':
-	                        statement = this.parseWithStatement();
-	                        break;
-	                    default:
-	                        statement = this.parseExpressionStatement();
-	                        break;
-	                }
-	                break;
-	            default:
-	                statement = this.throwUnexpectedToken(this.lookahead);
-	        }
-	        return statement;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-function-definitions
-	    Parser.prototype.parseFunctionSourceElements = function () {
-	        var node = this.createNode();
-	        this.expect('{');
-	        var body = this.parseDirectivePrologues();
-	        var previousLabelSet = this.context.labelSet;
-	        var previousInIteration = this.context.inIteration;
-	        var previousInSwitch = this.context.inSwitch;
-	        var previousInFunctionBody = this.context.inFunctionBody;
-	        this.context.labelSet = {};
-	        this.context.inIteration = false;
-	        this.context.inSwitch = false;
-	        this.context.inFunctionBody = true;
-	        while (this.lookahead.type !== 2 /* EOF */) {
-	            if (this.match('}')) {
-	                break;
-	            }
-	            body.push(this.parseStatementListItem());
-	        }
-	        this.expect('}');
-	        this.context.labelSet = previousLabelSet;
-	        this.context.inIteration = previousInIteration;
-	        this.context.inSwitch = previousInSwitch;
-	        this.context.inFunctionBody = previousInFunctionBody;
-	        return this.finalize(node, new Node.BlockStatement(body));
-	    };
-	    Parser.prototype.validateParam = function (options, param, name) {
-	        var key = '$' + name;
-	        if (this.context.strict) {
-	            if (this.scanner.isRestrictedWord(name)) {
-	                options.stricted = param;
-	                options.message = messages_1.Messages.StrictParamName;
-	            }
-	            if (Object.prototype.hasOwnProperty.call(options.paramSet, key)) {
-	                options.stricted = param;
-	                options.message = messages_1.Messages.StrictParamDupe;
-	            }
-	        }
-	        else if (!options.firstRestricted) {
-	            if (this.scanner.isRestrictedWord(name)) {
-	                options.firstRestricted = param;
-	                options.message = messages_1.Messages.StrictParamName;
-	            }
-	            else if (this.scanner.isStrictModeReservedWord(name)) {
-	                options.firstRestricted = param;
-	                options.message = messages_1.Messages.StrictReservedWord;
-	            }
-	            else if (Object.prototype.hasOwnProperty.call(options.paramSet, key)) {
-	                options.stricted = param;
-	                options.message = messages_1.Messages.StrictParamDupe;
-	            }
-	        }
-	        /* istanbul ignore next */
-	        if (typeof Object.defineProperty === 'function') {
-	            Object.defineProperty(options.paramSet, key, { value: true, enumerable: true, writable: true, configurable: true });
-	        }
-	        else {
-	            options.paramSet[key] = true;
-	        }
-	    };
-	    Parser.prototype.parseRestElement = function (params) {
-	        var node = this.createNode();
-	        this.expect('...');
-	        var arg = this.parsePattern(params);
-	        if (this.match('=')) {
-	            this.throwError(messages_1.Messages.DefaultRestParameter);
-	        }
-	        if (!this.match(')')) {
-	            this.throwError(messages_1.Messages.ParameterAfterRestParameter);
-	        }
-	        return this.finalize(node, new Node.RestElement(arg));
-	    };
-	    Parser.prototype.parseFormalParameter = function (options) {
-	        var params = [];
-	        var param = this.match('...') ? this.parseRestElement(params) : this.parsePatternWithDefault(params);
-	        for (var i = 0; i < params.length; i++) {
-	            this.validateParam(options, params[i], params[i].value);
-	        }
-	        options.simple = options.simple && (param instanceof Node.Identifier);
-	        options.params.push(param);
-	    };
-	    Parser.prototype.parseFormalParameters = function (firstRestricted) {
-	        var options;
-	        options = {
-	            simple: true,
-	            params: [],
-	            firstRestricted: firstRestricted
-	        };
-	        this.expect('(');
-	        if (!this.match(')')) {
-	            options.paramSet = {};
-	            while (this.lookahead.type !== 2 /* EOF */) {
-	                this.parseFormalParameter(options);
-	                if (this.match(')')) {
-	                    break;
-	                }
-	                this.expect(',');
-	                if (this.match(')')) {
-	                    break;
-	                }
-	            }
-	        }
-	        this.expect(')');
-	        return {
-	            simple: options.simple,
-	            params: options.params,
-	            stricted: options.stricted,
-	            firstRestricted: options.firstRestricted,
-	            message: options.message
-	        };
-	    };
-	    Parser.prototype.matchAsyncFunction = function () {
-	        var match = this.matchContextualKeyword('async');
-	        if (match) {
-	            var state = this.scanner.saveState();
-	            this.scanner.scanComments();
-	            var next = this.scanner.lex();
-	            this.scanner.restoreState(state);
-	            match = (state.lineNumber === next.lineNumber) && (next.type === 4 /* Keyword */) && (next.value === 'function');
-	        }
-	        return match;
-	    };
-	    Parser.prototype.parseFunctionDeclaration = function (identifierIsOptional) {
-	        var node = this.createNode();
-	        var isAsync = this.matchContextualKeyword('async');
-	        if (isAsync) {
-	            this.nextToken();
-	        }
-	        this.expectKeyword('function');
-	        var isGenerator = isAsync ? false : this.match('*');
-	        if (isGenerator) {
-	            this.nextToken();
-	        }
-	        var message;
-	        var id = null;
-	        var firstRestricted = null;
-	        if (!identifierIsOptional || !this.match('(')) {
-	            var token = this.lookahead;
-	            id = this.parseVariableIdentifier();
-	            if (this.context.strict) {
-	                if (this.scanner.isRestrictedWord(token.value)) {
-	                    this.tolerateUnexpectedToken(token, messages_1.Messages.StrictFunctionName);
-	                }
-	            }
-	            else {
-	                if (this.scanner.isRestrictedWord(token.value)) {
-	                    firstRestricted = token;
-	                    message = messages_1.Messages.StrictFunctionName;
-	                }
-	                else if (this.scanner.isStrictModeReservedWord(token.value)) {
-	                    firstRestricted = token;
-	                    message = messages_1.Messages.StrictReservedWord;
-	                }
-	            }
-	        }
-	        var previousAllowAwait = this.context.await;
-	        var previousAllowYield = this.context.allowYield;
-	        this.context.await = isAsync;
-	        this.context.allowYield = !isGenerator;
-	        var formalParameters = this.parseFormalParameters(firstRestricted);
-	        var params = formalParameters.params;
-	        var stricted = formalParameters.stricted;
-	        firstRestricted = formalParameters.firstRestricted;
-	        if (formalParameters.message) {
-	            message = formalParameters.message;
-	        }
-	        var previousStrict = this.context.strict;
-	        var previousAllowStrictDirective = this.context.allowStrictDirective;
-	        this.context.allowStrictDirective = formalParameters.simple;
-	        var body = this.parseFunctionSourceElements();
-	        if (this.context.strict && firstRestricted) {
-	            this.throwUnexpectedToken(firstRestricted, message);
-	        }
-	        if (this.context.strict && stricted) {
-	            this.tolerateUnexpectedToken(stricted, message);
-	        }
-	        this.context.strict = previousStrict;
-	        this.context.allowStrictDirective = previousAllowStrictDirective;
-	        this.context.await = previousAllowAwait;
-	        this.context.allowYield = previousAllowYield;
-	        return isAsync ? this.finalize(node, new Node.AsyncFunctionDeclaration(id, params, body)) :
-	            this.finalize(node, new Node.FunctionDeclaration(id, params, body, isGenerator));
-	    };
-	    Parser.prototype.parseFunctionExpression = function () {
-	        var node = this.createNode();
-	        var isAsync = this.matchContextualKeyword('async');
-	        if (isAsync) {
-	            this.nextToken();
-	        }
-	        this.expectKeyword('function');
-	        var isGenerator = isAsync ? false : this.match('*');
-	        if (isGenerator) {
-	            this.nextToken();
-	        }
-	        var message;
-	        var id = null;
-	        var firstRestricted;
-	        var previousAllowAwait = this.context.await;
-	        var previousAllowYield = this.context.allowYield;
-	        this.context.await = isAsync;
-	        this.context.allowYield = !isGenerator;
-	        if (!this.match('(')) {
-	            var token = this.lookahead;
-	            id = (!this.context.strict && !isGenerator && this.matchKeyword('yield')) ? this.parseIdentifierName() : this.parseVariableIdentifier();
-	            if (this.context.strict) {
-	                if (this.scanner.isRestrictedWord(token.value)) {
-	                    this.tolerateUnexpectedToken(token, messages_1.Messages.StrictFunctionName);
-	                }
-	            }
-	            else {
-	                if (this.scanner.isRestrictedWord(token.value)) {
-	                    firstRestricted = token;
-	                    message = messages_1.Messages.StrictFunctionName;
-	                }
-	                else if (this.scanner.isStrictModeReservedWord(token.value)) {
-	                    firstRestricted = token;
-	                    message = messages_1.Messages.StrictReservedWord;
-	                }
-	            }
-	        }
-	        var formalParameters = this.parseFormalParameters(firstRestricted);
-	        var params = formalParameters.params;
-	        var stricted = formalParameters.stricted;
-	        firstRestricted = formalParameters.firstRestricted;
-	        if (formalParameters.message) {
-	            message = formalParameters.message;
-	        }
-	        var previousStrict = this.context.strict;
-	        var previousAllowStrictDirective = this.context.allowStrictDirective;
-	        this.context.allowStrictDirective = formalParameters.simple;
-	        var body = this.parseFunctionSourceElements();
-	        if (this.context.strict && firstRestricted) {
-	            this.throwUnexpectedToken(firstRestricted, message);
-	        }
-	        if (this.context.strict && stricted) {
-	            this.tolerateUnexpectedToken(stricted, message);
-	        }
-	        this.context.strict = previousStrict;
-	        this.context.allowStrictDirective = previousAllowStrictDirective;
-	        this.context.await = previousAllowAwait;
-	        this.context.allowYield = previousAllowYield;
-	        return isAsync ? this.finalize(node, new Node.AsyncFunctionExpression(id, params, body)) :
-	            this.finalize(node, new Node.FunctionExpression(id, params, body, isGenerator));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-directive-prologues-and-the-use-strict-directive
-	    Parser.prototype.parseDirective = function () {
-	        var token = this.lookahead;
-	        var node = this.createNode();
-	        var expr = this.parseExpression();
-	        var directive = (expr.type === syntax_1.Syntax.Literal) ? this.getTokenRaw(token).slice(1, -1) : null;
-	        this.consumeSemicolon();
-	        return this.finalize(node, directive ? new Node.Directive(expr, directive) : new Node.ExpressionStatement(expr));
-	    };
-	    Parser.prototype.parseDirectivePrologues = function () {
-	        var firstRestricted = null;
-	        var body = [];
-	        while (true) {
-	            var token = this.lookahead;
-	            if (token.type !== 8 /* StringLiteral */) {
-	                break;
-	            }
-	            var statement = this.parseDirective();
-	            body.push(statement);
-	            var directive = statement.directive;
-	            if (typeof directive !== 'string') {
-	                break;
-	            }
-	            if (directive === 'use strict') {
-	                this.context.strict = true;
-	                if (firstRestricted) {
-	                    this.tolerateUnexpectedToken(firstRestricted, messages_1.Messages.StrictOctalLiteral);
-	                }
-	                if (!this.context.allowStrictDirective) {
-	                    this.tolerateUnexpectedToken(token, messages_1.Messages.IllegalLanguageModeDirective);
-	                }
-	            }
-	            else {
-	                if (!firstRestricted && token.octal) {
-	                    firstRestricted = token;
-	                }
-	            }
-	        }
-	        return body;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-method-definitions
-	    Parser.prototype.qualifiedPropertyName = function (token) {
-	        switch (token.type) {
-	            case 3 /* Identifier */:
-	            case 8 /* StringLiteral */:
-	            case 1 /* BooleanLiteral */:
-	            case 5 /* NullLiteral */:
-	            case 6 /* NumericLiteral */:
-	            case 4 /* Keyword */:
-	                return true;
-	            case 7 /* Punctuator */:
-	                return token.value === '[';
-	            default:
-	                break;
-	        }
-	        return false;
-	    };
-	    Parser.prototype.parseGetterMethod = function () {
-	        var node = this.createNode();
-	        var isGenerator = false;
-	        var previousAllowYield = this.context.allowYield;
-	        this.context.allowYield = !isGenerator;
-	        var formalParameters = this.parseFormalParameters();
-	        if (formalParameters.params.length > 0) {
-	            this.tolerateError(messages_1.Messages.BadGetterArity);
-	        }
-	        var method = this.parsePropertyMethod(formalParameters);
-	        this.context.allowYield = previousAllowYield;
-	        return this.finalize(node, new Node.FunctionExpression(null, formalParameters.params, method, isGenerator));
-	    };
-	    Parser.prototype.parseSetterMethod = function () {
-	        var node = this.createNode();
-	        var isGenerator = false;
-	        var previousAllowYield = this.context.allowYield;
-	        this.context.allowYield = !isGenerator;
-	        var formalParameters = this.parseFormalParameters();
-	        if (formalParameters.params.length !== 1) {
-	            this.tolerateError(messages_1.Messages.BadSetterArity);
-	        }
-	        else if (formalParameters.params[0] instanceof Node.RestElement) {
-	            this.tolerateError(messages_1.Messages.BadSetterRestParameter);
-	        }
-	        var method = this.parsePropertyMethod(formalParameters);
-	        this.context.allowYield = previousAllowYield;
-	        return this.finalize(node, new Node.FunctionExpression(null, formalParameters.params, method, isGenerator));
-	    };
-	    Parser.prototype.parseGeneratorMethod = function () {
-	        var node = this.createNode();
-	        var isGenerator = true;
-	        var previousAllowYield = this.context.allowYield;
-	        this.context.allowYield = true;
-	        var params = this.parseFormalParameters();
-	        this.context.allowYield = false;
-	        var method = this.parsePropertyMethod(params);
-	        this.context.allowYield = previousAllowYield;
-	        return this.finalize(node, new Node.FunctionExpression(null, params.params, method, isGenerator));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-generator-function-definitions
-	    Parser.prototype.isStartOfExpression = function () {
-	        var start = true;
-	        var value = this.lookahead.value;
-	        switch (this.lookahead.type) {
-	            case 7 /* Punctuator */:
-	                start = (value === '[') || (value === '(') || (value === '{') ||
-	                    (value === '+') || (value === '-') ||
-	                    (value === '!') || (value === '~') ||
-	                    (value === '++') || (value === '--') ||
-	                    (value === '/') || (value === '/='); // regular expression literal
-	                break;
-	            case 4 /* Keyword */:
-	                start = (value === 'class') || (value === 'delete') ||
-	                    (value === 'function') || (value === 'let') || (value === 'new') ||
-	                    (value === 'super') || (value === 'this') || (value === 'typeof') ||
-	                    (value === 'void') || (value === 'yield');
-	                break;
-	            default:
-	                break;
-	        }
-	        return start;
-	    };
-	    Parser.prototype.parseYieldExpression = function () {
-	        var node = this.createNode();
-	        this.expectKeyword('yield');
-	        var argument = null;
-	        var delegate = false;
-	        if (!this.hasLineTerminator) {
-	            var previousAllowYield = this.context.allowYield;
-	            this.context.allowYield = false;
-	            delegate = this.match('*');
-	            if (delegate) {
-	                this.nextToken();
-	                argument = this.parseAssignmentExpression();
-	            }
-	            else if (this.isStartOfExpression()) {
-	                argument = this.parseAssignmentExpression();
-	            }
-	            this.context.allowYield = previousAllowYield;
-	        }
-	        return this.finalize(node, new Node.YieldExpression(argument, delegate));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-class-definitions
-	    Parser.prototype.parseClassElement = function (hasConstructor) {
-	        var token = this.lookahead;
-	        var node = this.createNode();
-	        var kind = '';
-	        var key = null;
-	        var value = null;
-	        var computed = false;
-	        var method = false;
-	        var isStatic = false;
-	        var isAsync = false;
-	        if (this.match('*')) {
-	            this.nextToken();
-	        }
-	        else {
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	            var id = key;
-	            if (id.name === 'static' && (this.qualifiedPropertyName(this.lookahead) || this.match('*'))) {
-	                token = this.lookahead;
-	                isStatic = true;
-	                computed = this.match('[');
-	                if (this.match('*')) {
-	                    this.nextToken();
-	                }
-	                else {
-	                    key = this.parseObjectPropertyKey();
-	                }
-	            }
-	            if ((token.type === 3 /* Identifier */) && !this.hasLineTerminator && (token.value === 'async')) {
-	                var punctuator = this.lookahead.value;
-	                if (punctuator !== ':' && punctuator !== '(' && punctuator !== '*') {
-	                    isAsync = true;
-	                    token = this.lookahead;
-	                    key = this.parseObjectPropertyKey();
-	                    if (token.type === 3 /* Identifier */ && token.value === 'constructor') {
-	                        this.tolerateUnexpectedToken(token, messages_1.Messages.ConstructorIsAsync);
-	                    }
-	                }
-	            }
-	        }
-	        var lookaheadPropertyKey = this.qualifiedPropertyName(this.lookahead);
-	        if (token.type === 3 /* Identifier */) {
-	            if (token.value === 'get' && lookaheadPropertyKey) {
-	                kind = 'get';
-	                computed = this.match('[');
-	                key = this.parseObjectPropertyKey();
-	                this.context.allowYield = false;
-	                value = this.parseGetterMethod();
-	            }
-	            else if (token.value === 'set' && lookaheadPropertyKey) {
-	                kind = 'set';
-	                computed = this.match('[');
-	                key = this.parseObjectPropertyKey();
-	                value = this.parseSetterMethod();
-	            }
-	        }
-	        else if (token.type === 7 /* Punctuator */ && token.value === '*' && lookaheadPropertyKey) {
-	            kind = 'init';
-	            computed = this.match('[');
-	            key = this.parseObjectPropertyKey();
-	            value = this.parseGeneratorMethod();
-	            method = true;
-	        }
-	        if (!kind && key && this.match('(')) {
-	            kind = 'init';
-	            value = isAsync ? this.parsePropertyMethodAsyncFunction() : this.parsePropertyMethodFunction();
-	            method = true;
-	        }
-	        if (!kind) {
-	            this.throwUnexpectedToken(this.lookahead);
-	        }
-	        if (kind === 'init') {
-	            kind = 'method';
-	        }
-	        if (!computed) {
-	            if (isStatic && this.isPropertyKey(key, 'prototype')) {
-	                this.throwUnexpectedToken(token, messages_1.Messages.StaticPrototype);
-	            }
-	            if (!isStatic && this.isPropertyKey(key, 'constructor')) {
-	                if (kind !== 'method' || !method || (value && value.generator)) {
-	                    this.throwUnexpectedToken(token, messages_1.Messages.ConstructorSpecialMethod);
-	                }
-	                if (hasConstructor.value) {
-	                    this.throwUnexpectedToken(token, messages_1.Messages.DuplicateConstructor);
-	                }
-	                else {
-	                    hasConstructor.value = true;
-	                }
-	                kind = 'constructor';
-	            }
-	        }
-	        return this.finalize(node, new Node.MethodDefinition(key, computed, value, kind, isStatic));
-	    };
-	    Parser.prototype.parseClassElementList = function () {
-	        var body = [];
-	        var hasConstructor = { value: false };
-	        this.expect('{');
-	        while (!this.match('}')) {
-	            if (this.match(';')) {
-	                this.nextToken();
-	            }
-	            else {
-	                body.push(this.parseClassElement(hasConstructor));
-	            }
-	        }
-	        this.expect('}');
-	        return body;
-	    };
-	    Parser.prototype.parseClassBody = function () {
-	        var node = this.createNode();
-	        var elementList = this.parseClassElementList();
-	        return this.finalize(node, new Node.ClassBody(elementList));
-	    };
-	    Parser.prototype.parseClassDeclaration = function (identifierIsOptional) {
-	        var node = this.createNode();
-	        var previousStrict = this.context.strict;
-	        this.context.strict = true;
-	        this.expectKeyword('class');
-	        var id = (identifierIsOptional && (this.lookahead.type !== 3 /* Identifier */)) ? null : this.parseVariableIdentifier();
-	        var superClass = null;
-	        if (this.matchKeyword('extends')) {
-	            this.nextToken();
-	            superClass = this.isolateCoverGrammar(this.parseLeftHandSideExpressionAllowCall);
-	        }
-	        var classBody = this.parseClassBody();
-	        this.context.strict = previousStrict;
-	        return this.finalize(node, new Node.ClassDeclaration(id, superClass, classBody));
-	    };
-	    Parser.prototype.parseClassExpression = function () {
-	        var node = this.createNode();
-	        var previousStrict = this.context.strict;
-	        this.context.strict = true;
-	        this.expectKeyword('class');
-	        var id = (this.lookahead.type === 3 /* Identifier */) ? this.parseVariableIdentifier() : null;
-	        var superClass = null;
-	        if (this.matchKeyword('extends')) {
-	            this.nextToken();
-	            superClass = this.isolateCoverGrammar(this.parseLeftHandSideExpressionAllowCall);
-	        }
-	        var classBody = this.parseClassBody();
-	        this.context.strict = previousStrict;
-	        return this.finalize(node, new Node.ClassExpression(id, superClass, classBody));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-scripts
-	    // https://tc39.github.io/ecma262/#sec-modules
-	    Parser.prototype.parseModule = function () {
-	        this.context.strict = true;
-	        this.context.isModule = true;
-	        this.scanner.isModule = true;
-	        var node = this.createNode();
-	        var body = this.parseDirectivePrologues();
-	        while (this.lookahead.type !== 2 /* EOF */) {
-	            body.push(this.parseStatementListItem());
-	        }
-	        return this.finalize(node, new Node.Module(body));
-	    };
-	    Parser.prototype.parseScript = function () {
-	        var node = this.createNode();
-	        var body = this.parseDirectivePrologues();
-	        while (this.lookahead.type !== 2 /* EOF */) {
-	            body.push(this.parseStatementListItem());
-	        }
-	        return this.finalize(node, new Node.Script(body));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-imports
-	    Parser.prototype.parseModuleSpecifier = function () {
-	        var node = this.createNode();
-	        if (this.lookahead.type !== 8 /* StringLiteral */) {
-	            this.throwError(messages_1.Messages.InvalidModuleSpecifier);
-	        }
-	        var token = this.nextToken();
-	        var raw = this.getTokenRaw(token);
-	        return this.finalize(node, new Node.Literal(token.value, raw));
-	    };
-	    // import {<foo as bar>} ...;
-	    Parser.prototype.parseImportSpecifier = function () {
-	        var node = this.createNode();
-	        var imported;
-	        var local;
-	        if (this.lookahead.type === 3 /* Identifier */) {
-	            imported = this.parseVariableIdentifier();
-	            local = imported;
-	            if (this.matchContextualKeyword('as')) {
-	                this.nextToken();
-	                local = this.parseVariableIdentifier();
-	            }
-	        }
-	        else {
-	            imported = this.parseIdentifierName();
-	            local = imported;
-	            if (this.matchContextualKeyword('as')) {
-	                this.nextToken();
-	                local = this.parseVariableIdentifier();
-	            }
-	            else {
-	                this.throwUnexpectedToken(this.nextToken());
-	            }
-	        }
-	        return this.finalize(node, new Node.ImportSpecifier(local, imported));
-	    };
-	    // {foo, bar as bas}
-	    Parser.prototype.parseNamedImports = function () {
-	        this.expect('{');
-	        var specifiers = [];
-	        while (!this.match('}')) {
-	            specifiers.push(this.parseImportSpecifier());
-	            if (!this.match('}')) {
-	                this.expect(',');
-	            }
-	        }
-	        this.expect('}');
-	        return specifiers;
-	    };
-	    // import <foo> ...;
-	    Parser.prototype.parseImportDefaultSpecifier = function () {
-	        var node = this.createNode();
-	        var local = this.parseIdentifierName();
-	        return this.finalize(node, new Node.ImportDefaultSpecifier(local));
-	    };
-	    // import <* as foo> ...;
-	    Parser.prototype.parseImportNamespaceSpecifier = function () {
-	        var node = this.createNode();
-	        this.expect('*');
-	        if (!this.matchContextualKeyword('as')) {
-	            this.throwError(messages_1.Messages.NoAsAfterImportNamespace);
-	        }
-	        this.nextToken();
-	        var local = this.parseIdentifierName();
-	        return this.finalize(node, new Node.ImportNamespaceSpecifier(local));
-	    };
-	    Parser.prototype.parseImportDeclaration = function () {
-	        if (this.context.inFunctionBody) {
-	            this.throwError(messages_1.Messages.IllegalImportDeclaration);
-	        }
-	        var node = this.createNode();
-	        this.expectKeyword('import');
-	        var src;
-	        var specifiers = [];
-	        if (this.lookahead.type === 8 /* StringLiteral */) {
-	            // import 'foo';
-	            src = this.parseModuleSpecifier();
-	        }
-	        else {
-	            if (this.match('{')) {
-	                // import {bar}
-	                specifiers = specifiers.concat(this.parseNamedImports());
-	            }
-	            else if (this.match('*')) {
-	                // import * as foo
-	                specifiers.push(this.parseImportNamespaceSpecifier());
-	            }
-	            else if (this.isIdentifierName(this.lookahead) && !this.matchKeyword('default')) {
-	                // import foo
-	                specifiers.push(this.parseImportDefaultSpecifier());
-	                if (this.match(',')) {
-	                    this.nextToken();
-	                    if (this.match('*')) {
-	                        // import foo, * as foo
-	                        specifiers.push(this.parseImportNamespaceSpecifier());
-	                    }
-	                    else if (this.match('{')) {
-	                        // import foo, {bar}
-	                        specifiers = specifiers.concat(this.parseNamedImports());
-	                    }
-	                    else {
-	                        this.throwUnexpectedToken(this.lookahead);
-	                    }
-	                }
-	            }
-	            else {
-	                this.throwUnexpectedToken(this.nextToken());
-	            }
-	            if (!this.matchContextualKeyword('from')) {
-	                var message = this.lookahead.value ? messages_1.Messages.UnexpectedToken : messages_1.Messages.MissingFromClause;
-	                this.throwError(message, this.lookahead.value);
-	            }
-	            this.nextToken();
-	            src = this.parseModuleSpecifier();
-	        }
-	        this.consumeSemicolon();
-	        return this.finalize(node, new Node.ImportDeclaration(specifiers, src));
-	    };
-	    // https://tc39.github.io/ecma262/#sec-exports
-	    Parser.prototype.parseExportSpecifier = function () {
-	        var node = this.createNode();
-	        var local = this.parseIdentifierName();
-	        var exported = local;
-	        if (this.matchContextualKeyword('as')) {
-	            this.nextToken();
-	            exported = this.parseIdentifierName();
-	        }
-	        return this.finalize(node, new Node.ExportSpecifier(local, exported));
-	    };
-	    Parser.prototype.parseExportDeclaration = function () {
-	        if (this.context.inFunctionBody) {
-	            this.throwError(messages_1.Messages.IllegalExportDeclaration);
-	        }
-	        var node = this.createNode();
-	        this.expectKeyword('export');
-	        var exportDeclaration;
-	        if (this.matchKeyword('default')) {
-	            // export default ...
-	            this.nextToken();
-	            if (this.matchKeyword('function')) {
-	                // export default function foo () {}
-	                // export default function () {}
-	                var declaration = this.parseFunctionDeclaration(true);
-	                exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
-	            }
-	            else if (this.matchKeyword('class')) {
-	                // export default class foo {}
-	                var declaration = this.parseClassDeclaration(true);
-	                exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
-	            }
-	            else if (this.matchContextualKeyword('async')) {
-	                // export default async function f () {}
-	                // export default async function () {}
-	                // export default async x => x
-	                var declaration = this.matchAsyncFunction() ? this.parseFunctionDeclaration(true) : this.parseAssignmentExpression();
-	                exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
-	            }
-	            else {
-	                if (this.matchContextualKeyword('from')) {
-	                    this.throwError(messages_1.Messages.UnexpectedToken, this.lookahead.value);
-	                }
-	                // export default {};
-	                // export default [];
-	                // export default (1 + 2);
-	                var declaration = this.match('{') ? this.parseObjectInitializer() :
-	                    this.match('[') ? this.parseArrayInitializer() : this.parseAssignmentExpression();
-	                this.consumeSemicolon();
-	                exportDeclaration = this.finalize(node, new Node.ExportDefaultDeclaration(declaration));
-	            }
-	        }
-	        else if (this.match('*')) {
-	            // export * from 'foo';
-	            this.nextToken();
-	            if (!this.matchContextualKeyword('from')) {
-	                var message = this.lookahead.value ? messages_1.Messages.UnexpectedToken : messages_1.Messages.MissingFromClause;
-	                this.throwError(message, this.lookahead.value);
-	            }
-	            this.nextToken();
-	            var src = this.parseModuleSpecifier();
-	            this.consumeSemicolon();
-	            exportDeclaration = this.finalize(node, new Node.ExportAllDeclaration(src));
-	        }
-	        else if (this.lookahead.type === 4 /* Keyword */) {
-	            // export var f = 1;
-	            var declaration = void 0;
-	            switch (this.lookahead.value) {
-	                case 'let':
-	                case 'const':
-	                    declaration = this.parseLexicalDeclaration({ inFor: false });
-	                    break;
-	                case 'var':
-	                case 'class':
-	                case 'function':
-	                    declaration = this.parseStatementListItem();
-	                    break;
-	                default:
-	                    this.throwUnexpectedToken(this.lookahead);
-	            }
-	            exportDeclaration = this.finalize(node, new Node.ExportNamedDeclaration(declaration, [], null));
-	        }
-	        else if (this.matchAsyncFunction()) {
-	            var declaration = this.parseFunctionDeclaration();
-	            exportDeclaration = this.finalize(node, new Node.ExportNamedDeclaration(declaration, [], null));
-	        }
-	        else {
-	            var specifiers = [];
-	            var source = null;
-	            var isExportFromIdentifier = false;
-	            this.expect('{');
-	            while (!this.match('}')) {
-	                isExportFromIdentifier = isExportFromIdentifier || this.matchKeyword('default');
-	                specifiers.push(this.parseExportSpecifier());
-	                if (!this.match('}')) {
-	                    this.expect(',');
-	                }
-	            }
-	            this.expect('}');
-	            if (this.matchContextualKeyword('from')) {
-	                // export {default} from 'foo';
-	                // export {foo} from 'foo';
-	                this.nextToken();
-	                source = this.parseModuleSpecifier();
-	                this.consumeSemicolon();
-	            }
-	            else if (isExportFromIdentifier) {
-	                // export {default}; // missing fromClause
-	                var message = this.lookahead.value ? messages_1.Messages.UnexpectedToken : messages_1.Messages.MissingFromClause;
-	                this.throwError(message, this.lookahead.value);
-	            }
-	            else {
-	                // export {foo};
-	                this.consumeSemicolon();
-	            }
-	            exportDeclaration = this.finalize(node, new Node.ExportNamedDeclaration(null, specifiers, source));
-	        }
-	        return exportDeclaration;
-	    };
-	    return Parser;
-	}());
-	exports.Parser = Parser;
-
-
-/***/ },
-/* 9 */
-/***/ function(module, exports) {
-
-	"use strict";
-	// Ensure the condition is true, otherwise throw an error.
-	// This is only to have a better contract semantic, i.e. another safety net
-	// to catch a logic error. The condition shall be fulfilled in normal case.
-	// Do NOT use this to enforce a certain condition on any user input.
-	Object.defineProperty(exports, "__esModule", { value: true });
-	function assert(condition, message) {
-	    /* istanbul ignore if */
-	    if (!condition) {
-	        throw new Error('ASSERT: ' + message);
-	    }
-	}
-	exports.assert = assert;
-
-
-/***/ },
-/* 10 */
-/***/ function(module, exports) {
-
-	"use strict";
-	/* tslint:disable:max-classes-per-file */
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var ErrorHandler = (function () {
-	    function ErrorHandler() {
-	        this.errors = [];
-	        this.tolerant = false;
-	    }
-	    ErrorHandler.prototype.recordError = function (error) {
-	        this.errors.push(error);
-	    };
-	    ErrorHandler.prototype.tolerate = function (error) {
-	        if (this.tolerant) {
-	            this.recordError(error);
-	        }
-	        else {
-	            throw error;
-	        }
-	    };
-	    ErrorHandler.prototype.constructError = function (msg, column) {
-	        var error = new Error(msg);
-	        try {
-	            throw error;
-	        }
-	        catch (base) {
-	            /* istanbul ignore else */
-	            if (Object.create && Object.defineProperty) {
-	                error = Object.create(base);
-	                Object.defineProperty(error, 'column', { value: column });
-	            }
-	        }
-	        /* istanbul ignore next */
-	        return error;
-	    };
-	    ErrorHandler.prototype.createError = function (index, line, col, description) {
-	        var msg = 'Line ' + line + ': ' + description;
-	        var error = this.constructError(msg, col);
-	        error.index = index;
-	        error.lineNumber = line;
-	        error.description = description;
-	        return error;
-	    };
-	    ErrorHandler.prototype.throwError = function (index, line, col, description) {
-	        throw this.createError(index, line, col, description);
-	    };
-	    ErrorHandler.prototype.tolerateError = function (index, line, col, description) {
-	        var error = this.createError(index, line, col, description);
-	        if (this.tolerant) {
-	            this.recordError(error);
-	        }
-	        else {
-	            throw error;
-	        }
-	    };
-	    return ErrorHandler;
-	}());
-	exports.ErrorHandler = ErrorHandler;
-
-
-/***/ },
-/* 11 */
-/***/ function(module, exports) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	// Error messages should be identical to V8.
-	exports.Messages = {
-	    BadGetterArity: 'Getter must not have any formal parameters',
-	    BadSetterArity: 'Setter must have exactly one formal parameter',
-	    BadSetterRestParameter: 'Setter function argument must not be a rest parameter',
-	    ConstructorIsAsync: 'Class constructor may not be an async method',
-	    ConstructorSpecialMethod: 'Class constructor may not be an accessor',
-	    DeclarationMissingInitializer: 'Missing initializer in %0 declaration',
-	    DefaultRestParameter: 'Unexpected token =',
-	    DuplicateBinding: 'Duplicate binding %0',
-	    DuplicateConstructor: 'A class may only have one constructor',
-	    DuplicateProtoProperty: 'Duplicate __proto__ fields are not allowed in object literals',
-	    ForInOfLoopInitializer: '%0 loop variable declaration may not have an initializer',
-	    GeneratorInLegacyContext: 'Generator declarations are not allowed in legacy contexts',
-	    IllegalBreak: 'Illegal break statement',
-	    IllegalContinue: 'Illegal continue statement',
-	    IllegalExportDeclaration: 'Unexpected token',
-	    IllegalImportDeclaration: 'Unexpected token',
-	    IllegalLanguageModeDirective: 'Illegal \'use strict\' directive in function with non-simple parameter list',
-	    IllegalReturn: 'Illegal return statement',
-	    InvalidEscapedReservedWord: 'Keyword must not contain escaped characters',
-	    InvalidHexEscapeSequence: 'Invalid hexadecimal escape sequence',
-	    InvalidLHSInAssignment: 'Invalid left-hand side in assignment',
-	    InvalidLHSInForIn: 'Invalid left-hand side in for-in',
-	    InvalidLHSInForLoop: 'Invalid left-hand side in for-loop',
-	    InvalidModuleSpecifier: 'Unexpected token',
-	    InvalidRegExp: 'Invalid regular expression',
-	    LetInLexicalBinding: 'let is disallowed as a lexically bound name',
-	    MissingFromClause: 'Unexpected token',
-	    MultipleDefaultsInSwitch: 'More than one default clause in switch statement',
-	    NewlineAfterThrow: 'Illegal newline after throw',
-	    NoAsAfterImportNamespace: 'Unexpected token',
-	    NoCatchOrFinally: 'Missing catch or finally after try',
-	    ParameterAfterRestParameter: 'Rest parameter must be last formal parameter',
-	    Redeclaration: '%0 \'%1\' has already been declared',
-	    StaticPrototype: 'Classes may not have static property named prototype',
-	    StrictCatchVariable: 'Catch variable may not be eval or arguments in strict mode',
-	    StrictDelete: 'Delete of an unqualified identifier in strict mode.',
-	    StrictFunction: 'In strict mode code, functions can only be declared at top level or inside a block',
-	    StrictFunctionName: 'Function name may not be eval or arguments in strict mode',
-	    StrictLHSAssignment: 'Assignment to eval or arguments is not allowed in strict mode',
-	    StrictLHSPostfix: 'Postfix increment/decrement may not have eval or arguments operand in strict mode',
-	    StrictLHSPrefix: 'Prefix increment/decrement may not have eval or arguments operand in strict mode',
-	    StrictModeWith: 'Strict mode code may not include a with statement',
-	    StrictOctalLiteral: 'Octal literals are not allowed in strict mode.',
-	    StrictParamDupe: 'Strict mode function may not have duplicate parameter names',
-	    StrictParamName: 'Parameter name eval or arguments is not allowed in strict mode',
-	    StrictReservedWord: 'Use of future reserved word in strict mode',
-	    StrictVarName: 'Variable name may not be eval or arguments in strict mode',
-	    TemplateOctalLiteral: 'Octal literals are not allowed in template strings.',
-	    UnexpectedEOS: 'Unexpected end of input',
-	    UnexpectedIdentifier: 'Unexpected identifier',
-	    UnexpectedNumber: 'Unexpected number',
-	    UnexpectedReserved: 'Unexpected reserved word',
-	    UnexpectedString: 'Unexpected string',
-	    UnexpectedTemplate: 'Unexpected quasi %0',
-	    UnexpectedToken: 'Unexpected token %0',
-	    UnexpectedTokenIllegal: 'Unexpected token ILLEGAL',
-	    UnknownLabel: 'Undefined label \'%0\'',
-	    UnterminatedRegExp: 'Invalid regular expression: missing /'
-	};
-
-
-/***/ },
-/* 12 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var assert_1 = __webpack_require__(9);
-	var character_1 = __webpack_require__(4);
-	var messages_1 = __webpack_require__(11);
-	function hexValue(ch) {
-	    return '0123456789abcdef'.indexOf(ch.toLowerCase());
-	}
-	function octalValue(ch) {
-	    return '01234567'.indexOf(ch);
-	}
-	var Scanner = (function () {
-	    function Scanner(code, handler) {
-	        this.source = code;
-	        this.errorHandler = handler;
-	        this.trackComment = false;
-	        this.isModule = false;
-	        this.length = code.length;
-	        this.index = 0;
-	        this.lineNumber = (code.length > 0) ? 1 : 0;
-	        this.lineStart = 0;
-	        this.curlyStack = [];
-	    }
-	    Scanner.prototype.saveState = function () {
-	        return {
-	            index: this.index,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart
-	        };
-	    };
-	    Scanner.prototype.restoreState = function (state) {
-	        this.index = state.index;
-	        this.lineNumber = state.lineNumber;
-	        this.lineStart = state.lineStart;
-	    };
-	    Scanner.prototype.eof = function () {
-	        return this.index >= this.length;
-	    };
-	    Scanner.prototype.throwUnexpectedToken = function (message) {
-	        if (message === void 0) { message = messages_1.Messages.UnexpectedTokenIllegal; }
-	        return this.errorHandler.throwError(this.index, this.lineNumber, this.index - this.lineStart + 1, message);
-	    };
-	    Scanner.prototype.tolerateUnexpectedToken = function (message) {
-	        if (message === void 0) { message = messages_1.Messages.UnexpectedTokenIllegal; }
-	        this.errorHandler.tolerateError(this.index, this.lineNumber, this.index - this.lineStart + 1, message);
-	    };
-	    // https://tc39.github.io/ecma262/#sec-comments
-	    Scanner.prototype.skipSingleLineComment = function (offset) {
-	        var comments = [];
-	        var start, loc;
-	        if (this.trackComment) {
-	            comments = [];
-	            start = this.index - offset;
-	            loc = {
-	                start: {
-	                    line: this.lineNumber,
-	                    column: this.index - this.lineStart - offset
-	                },
-	                end: {}
-	            };
-	        }
-	        while (!this.eof()) {
-	            var ch = this.source.charCodeAt(this.index);
-	            ++this.index;
-	            if (character_1.Character.isLineTerminator(ch)) {
-	                if (this.trackComment) {
-	                    loc.end = {
-	                        line: this.lineNumber,
-	                        column: this.index - this.lineStart - 1
-	                    };
-	                    var entry = {
-	                        multiLine: false,
-	                        slice: [start + offset, this.index - 1],
-	                        range: [start, this.index - 1],
-	                        loc: loc
-	                    };
-	                    comments.push(entry);
-	                }
-	                if (ch === 13 && this.source.charCodeAt(this.index) === 10) {
-	                    ++this.index;
-	                }
-	                ++this.lineNumber;
-	                this.lineStart = this.index;
-	                return comments;
-	            }
-	        }
-	        if (this.trackComment) {
-	            loc.end = {
-	                line: this.lineNumber,
-	                column: this.index - this.lineStart
-	            };
-	            var entry = {
-	                multiLine: false,
-	                slice: [start + offset, this.index],
-	                range: [start, this.index],
-	                loc: loc
-	            };
-	            comments.push(entry);
-	        }
-	        return comments;
-	    };
-	    Scanner.prototype.skipMultiLineComment = function () {
-	        var comments = [];
-	        var start, loc;
-	        if (this.trackComment) {
-	            comments = [];
-	            start = this.index - 2;
-	            loc = {
-	                start: {
-	                    line: this.lineNumber,
-	                    column: this.index - this.lineStart - 2
-	                },
-	                end: {}
-	            };
-	        }
-	        while (!this.eof()) {
-	            var ch = this.source.charCodeAt(this.index);
-	            if (character_1.Character.isLineTerminator(ch)) {
-	                if (ch === 0x0D && this.source.charCodeAt(this.index + 1) === 0x0A) {
-	                    ++this.index;
-	                }
-	                ++this.lineNumber;
-	                ++this.index;
-	                this.lineStart = this.index;
-	            }
-	            else if (ch === 0x2A) {
-	                // Block comment ends with '*/'.
-	                if (this.source.charCodeAt(this.index + 1) === 0x2F) {
-	                    this.index += 2;
-	                    if (this.trackComment) {
-	                        loc.end = {
-	                            line: this.lineNumber,
-	                            column: this.index - this.lineStart
-	                        };
-	                        var entry = {
-	                            multiLine: true,
-	                            slice: [start + 2, this.index - 2],
-	                            range: [start, this.index],
-	                            loc: loc
-	                        };
-	                        comments.push(entry);
-	                    }
-	                    return comments;
-	                }
-	                ++this.index;
-	            }
-	            else {
-	                ++this.index;
-	            }
-	        }
-	        // Ran off the end of the file - the whole thing is a comment
-	        if (this.trackComment) {
-	            loc.end = {
-	                line: this.lineNumber,
-	                column: this.index - this.lineStart
-	            };
-	            var entry = {
-	                multiLine: true,
-	                slice: [start + 2, this.index],
-	                range: [start, this.index],
-	                loc: loc
-	            };
-	            comments.push(entry);
-	        }
-	        this.tolerateUnexpectedToken();
-	        return comments;
-	    };
-	    Scanner.prototype.scanComments = function () {
-	        var comments;
-	        if (this.trackComment) {
-	            comments = [];
-	        }
-	        var start = (this.index === 0);
-	        while (!this.eof()) {
-	            var ch = this.source.charCodeAt(this.index);
-	            if (character_1.Character.isWhiteSpace(ch)) {
-	                ++this.index;
-	            }
-	            else if (character_1.Character.isLineTerminator(ch)) {
-	                ++this.index;
-	                if (ch === 0x0D && this.source.charCodeAt(this.index) === 0x0A) {
-	                    ++this.index;
-	                }
-	                ++this.lineNumber;
-	                this.lineStart = this.index;
-	                start = true;
-	            }
-	            else if (ch === 0x2F) {
-	                ch = this.source.charCodeAt(this.index + 1);
-	                if (ch === 0x2F) {
-	                    this.index += 2;
-	                    var comment = this.skipSingleLineComment(2);
-	                    if (this.trackComment) {
-	                        comments = comments.concat(comment);
-	                    }
-	                    start = true;
-	                }
-	                else if (ch === 0x2A) {
-	                    this.index += 2;
-	                    var comment = this.skipMultiLineComment();
-	                    if (this.trackComment) {
-	                        comments = comments.concat(comment);
-	                    }
-	                }
-	                else {
-	                    break;
-	                }
-	            }
-	            else if (start && ch === 0x2D) {
-	                // U+003E is '>'
-	                if ((this.source.charCodeAt(this.index + 1) === 0x2D) && (this.source.charCodeAt(this.index + 2) === 0x3E)) {
-	                    // '-->' is a single-line comment
-	                    this.index += 3;
-	                    var comment = this.skipSingleLineComment(3);
-	                    if (this.trackComment) {
-	                        comments = comments.concat(comment);
-	                    }
-	                }
-	                else {
-	                    break;
-	                }
-	            }
-	            else if (ch === 0x3C && !this.isModule) {
-	                if (this.source.slice(this.index + 1, this.index + 4) === '!--') {
-	                    this.index += 4; // `<!--`
-	                    var comment = this.skipSingleLineComment(4);
-	                    if (this.trackComment) {
-	                        comments = comments.concat(comment);
-	                    }
-	                }
-	                else {
-	                    break;
-	                }
-	            }
-	            else {
-	                break;
-	            }
-	        }
-	        return comments;
-	    };
-	    // https://tc39.github.io/ecma262/#sec-future-reserved-words
-	    Scanner.prototype.isFutureReservedWord = function (id) {
-	        switch (id) {
-	            case 'enum':
-	            case 'export':
-	            case 'import':
-	            case 'super':
-	                return true;
-	            default:
-	                return false;
-	        }
-	    };
-	    Scanner.prototype.isStrictModeReservedWord = function (id) {
-	        switch (id) {
-	            case 'implements':
-	            case 'interface':
-	            case 'package':
-	            case 'private':
-	            case 'protected':
-	            case 'public':
-	            case 'static':
-	            case 'yield':
-	            case 'let':
-	                return true;
-	            default:
-	                return false;
-	        }
-	    };
-	    Scanner.prototype.isRestrictedWord = function (id) {
-	        return id === 'eval' || id === 'arguments';
-	    };
-	    // https://tc39.github.io/ecma262/#sec-keywords
-	    Scanner.prototype.isKeyword = function (id) {
-	        switch (id.length) {
-	            case 2:
-	                return (id === 'if') || (id === 'in') || (id === 'do');
-	            case 3:
-	                return (id === 'var') || (id === 'for') || (id === 'new') ||
-	                    (id === 'try') || (id === 'let');
-	            case 4:
-	                return (id === 'this') || (id === 'else') || (id === 'case') ||
-	                    (id === 'void') || (id === 'with') || (id === 'enum');
-	            case 5:
-	                return (id === 'while') || (id === 'break') || (id === 'catch') ||
-	                    (id === 'throw') || (id === 'const') || (id === 'yield') ||
-	                    (id === 'class') || (id === 'super');
-	            case 6:
-	                return (id === 'return') || (id === 'typeof') || (id === 'delete') ||
-	                    (id === 'switch') || (id === 'export') || (id === 'import');
-	            case 7:
-	                return (id === 'default') || (id === 'finally') || (id === 'extends');
-	            case 8:
-	                return (id === 'function') || (id === 'continue') || (id === 'debugger');
-	            case 10:
-	                return (id === 'instanceof');
-	            default:
-	                return false;
-	        }
-	    };
-	    Scanner.prototype.codePointAt = function (i) {
-	        var cp = this.source.charCodeAt(i);
-	        if (cp >= 0xD800 && cp <= 0xDBFF) {
-	            var second = this.source.charCodeAt(i + 1);
-	            if (second >= 0xDC00 && second <= 0xDFFF) {
-	                var first = cp;
-	                cp = (first - 0xD800) * 0x400 + second - 0xDC00 + 0x10000;
-	            }
-	        }
-	        return cp;
-	    };
-	    Scanner.prototype.scanHexEscape = function (prefix) {
-	        var len = (prefix === 'u') ? 4 : 2;
-	        var code = 0;
-	        for (var i = 0; i < len; ++i) {
-	            if (!this.eof() && character_1.Character.isHexDigit(this.source.charCodeAt(this.index))) {
-	                code = code * 16 + hexValue(this.source[this.index++]);
-	            }
-	            else {
-	                return null;
-	            }
-	        }
-	        return String.fromCharCode(code);
-	    };
-	    Scanner.prototype.scanUnicodeCodePointEscape = function () {
-	        var ch = this.source[this.index];
-	        var code = 0;
-	        // At least, one hex digit is required.
-	        if (ch === '}') {
-	            this.throwUnexpectedToken();
-	        }
-	        while (!this.eof()) {
-	            ch = this.source[this.index++];
-	            if (!character_1.Character.isHexDigit(ch.charCodeAt(0))) {
-	                break;
-	            }
-	            code = code * 16 + hexValue(ch);
-	        }
-	        if (code > 0x10FFFF || ch !== '}') {
-	            this.throwUnexpectedToken();
-	        }
-	        return character_1.Character.fromCodePoint(code);
-	    };
-	    Scanner.prototype.getIdentifier = function () {
-	        var start = this.index++;
-	        while (!this.eof()) {
-	            var ch = this.source.charCodeAt(this.index);
-	            if (ch === 0x5C) {
-	                // Blackslash (U+005C) marks Unicode escape sequence.
-	                this.index = start;
-	                return this.getComplexIdentifier();
-	            }
-	            else if (ch >= 0xD800 && ch < 0xDFFF) {
-	                // Need to handle surrogate pairs.
-	                this.index = start;
-	                return this.getComplexIdentifier();
-	            }
-	            if (character_1.Character.isIdentifierPart(ch)) {
-	                ++this.index;
-	            }
-	            else {
-	                break;
-	            }
-	        }
-	        return this.source.slice(start, this.index);
-	    };
-	    Scanner.prototype.getComplexIdentifier = function () {
-	        var cp = this.codePointAt(this.index);
-	        var id = character_1.Character.fromCodePoint(cp);
-	        this.index += id.length;
-	        // '\u' (U+005C, U+0075) denotes an escaped character.
-	        var ch;
-	        if (cp === 0x5C) {
-	            if (this.source.charCodeAt(this.index) !== 0x75) {
-	                this.throwUnexpectedToken();
-	            }
-	            ++this.index;
-	            if (this.source[this.index] === '{') {
-	                ++this.index;
-	                ch = this.scanUnicodeCodePointEscape();
-	            }
-	            else {
-	                ch = this.scanHexEscape('u');
-	                if (ch === null || ch === '\\' || !character_1.Character.isIdentifierStart(ch.charCodeAt(0))) {
-	                    this.throwUnexpectedToken();
-	                }
-	            }
-	            id = ch;
-	        }
-	        while (!this.eof()) {
-	            cp = this.codePointAt(this.index);
-	            if (!character_1.Character.isIdentifierPart(cp)) {
-	                break;
-	            }
-	            ch = character_1.Character.fromCodePoint(cp);
-	            id += ch;
-	            this.index += ch.length;
-	            // '\u' (U+005C, U+0075) denotes an escaped character.
-	            if (cp === 0x5C) {
-	                id = id.substr(0, id.length - 1);
-	                if (this.source.charCodeAt(this.index) !== 0x75) {
-	                    this.throwUnexpectedToken();
-	                }
-	                ++this.index;
-	                if (this.source[this.index] === '{') {
-	                    ++this.index;
-	                    ch = this.scanUnicodeCodePointEscape();
-	                }
-	                else {
-	                    ch = this.scanHexEscape('u');
-	                    if (ch === null || ch === '\\' || !character_1.Character.isIdentifierPart(ch.charCodeAt(0))) {
-	                        this.throwUnexpectedToken();
-	                    }
-	                }
-	                id += ch;
-	            }
-	        }
-	        return id;
-	    };
-	    Scanner.prototype.octalToDecimal = function (ch) {
-	        // \0 is not octal escape sequence
-	        var octal = (ch !== '0');
-	        var code = octalValue(ch);
-	        if (!this.eof() && character_1.Character.isOctalDigit(this.source.charCodeAt(this.index))) {
-	            octal = true;
-	            code = code * 8 + octalValue(this.source[this.index++]);
-	            // 3 digits are only allowed when string starts
-	            // with 0, 1, 2, 3
-	            if ('0123'.indexOf(ch) >= 0 && !this.eof() && character_1.Character.isOctalDigit(this.source.charCodeAt(this.index))) {
-	                code = code * 8 + octalValue(this.source[this.index++]);
-	            }
-	        }
-	        return {
-	            code: code,
-	            octal: octal
-	        };
-	    };
-	    // https://tc39.github.io/ecma262/#sec-names-and-keywords
-	    Scanner.prototype.scanIdentifier = function () {
-	        var type;
-	        var start = this.index;
-	        // Backslash (U+005C) starts an escaped character.
-	        var id = (this.source.charCodeAt(start) === 0x5C) ? this.getComplexIdentifier() : this.getIdentifier();
-	        // There is no keyword or literal with only one character.
-	        // Thus, it must be an identifier.
-	        if (id.length === 1) {
-	            type = 3 /* Identifier */;
-	        }
-	        else if (this.isKeyword(id)) {
-	            type = 4 /* Keyword */;
-	        }
-	        else if (id === 'null') {
-	            type = 5 /* NullLiteral */;
-	        }
-	        else if (id === 'true' || id === 'false') {
-	            type = 1 /* BooleanLiteral */;
-	        }
-	        else {
-	            type = 3 /* Identifier */;
-	        }
-	        if (type !== 3 /* Identifier */ && (start + id.length !== this.index)) {
-	            var restore = this.index;
-	            this.index = start;
-	            this.tolerateUnexpectedToken(messages_1.Messages.InvalidEscapedReservedWord);
-	            this.index = restore;
-	        }
-	        return {
-	            type: type,
-	            value: id,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    // https://tc39.github.io/ecma262/#sec-punctuators
-	    Scanner.prototype.scanPunctuator = function () {
-	        var start = this.index;
-	        // Check for most common single-character punctuators.
-	        var str = this.source[this.index];
-	        switch (str) {
-	            case '(':
-	            case '{':
-	                if (str === '{') {
-	                    this.curlyStack.push('{');
-	                }
-	                ++this.index;
-	                break;
-	            case '.':
-	                ++this.index;
-	                if (this.source[this.index] === '.' && this.source[this.index + 1] === '.') {
-	                    // Spread operator: ...
-	                    this.index += 2;
-	                    str = '...';
-	                }
-	                break;
-	            case '}':
-	                ++this.index;
-	                this.curlyStack.pop();
-	                break;
-	            case ')':
-	            case ';':
-	            case ',':
-	            case '[':
-	            case ']':
-	            case ':':
-	            case '?':
-	            case '~':
-	                ++this.index;
-	                break;
-	            default:
-	                // 4-character punctuator.
-	                str = this.source.substr(this.index, 4);
-	                if (str === '>>>=') {
-	                    this.index += 4;
-	                }
-	                else {
-	                    // 3-character punctuators.
-	                    str = str.substr(0, 3);
-	                    if (str === '===' || str === '!==' || str === '>>>' ||
-	                        str === '<<=' || str === '>>=' || str === '**=') {
-	                        this.index += 3;
-	                    }
-	                    else {
-	                        // 2-character punctuators.
-	                        str = str.substr(0, 2);
-	                        if (str === '&&' || str === '||' || str === '==' || str === '!=' ||
-	                            str === '+=' || str === '-=' || str === '*=' || str === '/=' ||
-	                            str === '++' || str === '--' || str === '<<' || str === '>>' ||
-	                            str === '&=' || str === '|=' || str === '^=' || str === '%=' ||
-	                            str === '<=' || str === '>=' || str === '=>' || str === '**') {
-	                            this.index += 2;
-	                        }
-	                        else {
-	                            // 1-character punctuators.
-	                            str = this.source[this.index];
-	                            if ('<>=!+-*%&|^/'.indexOf(str) >= 0) {
-	                                ++this.index;
-	                            }
-	                        }
-	                    }
-	                }
-	        }
-	        if (this.index === start) {
-	            this.throwUnexpectedToken();
-	        }
-	        return {
-	            type: 7 /* Punctuator */,
-	            value: str,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    // https://tc39.github.io/ecma262/#sec-literals-numeric-literals
-	    Scanner.prototype.scanHexLiteral = function (start) {
-	        var num = '';
-	        while (!this.eof()) {
-	            if (!character_1.Character.isHexDigit(this.source.charCodeAt(this.index))) {
-	                break;
-	            }
-	            num += this.source[this.index++];
-	        }
-	        if (num.length === 0) {
-	            this.throwUnexpectedToken();
-	        }
-	        if (character_1.Character.isIdentifierStart(this.source.charCodeAt(this.index))) {
-	            this.throwUnexpectedToken();
-	        }
-	        return {
-	            type: 6 /* NumericLiteral */,
-	            value: parseInt('0x' + num, 16),
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    Scanner.prototype.scanBinaryLiteral = function (start) {
-	        var num = '';
-	        var ch;
-	        while (!this.eof()) {
-	            ch = this.source[this.index];
-	            if (ch !== '0' && ch !== '1') {
-	                break;
-	            }
-	            num += this.source[this.index++];
-	        }
-	        if (num.length === 0) {
-	            // only 0b or 0B
-	            this.throwUnexpectedToken();
-	        }
-	        if (!this.eof()) {
-	            ch = this.source.charCodeAt(this.index);
-	            /* istanbul ignore else */
-	            if (character_1.Character.isIdentifierStart(ch) || character_1.Character.isDecimalDigit(ch)) {
-	                this.throwUnexpectedToken();
-	            }
-	        }
-	        return {
-	            type: 6 /* NumericLiteral */,
-	            value: parseInt(num, 2),
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    Scanner.prototype.scanOctalLiteral = function (prefix, start) {
-	        var num = '';
-	        var octal = false;
-	        if (character_1.Character.isOctalDigit(prefix.charCodeAt(0))) {
-	            octal = true;
-	            num = '0' + this.source[this.index++];
-	        }
-	        else {
-	            ++this.index;
-	        }
-	        while (!this.eof()) {
-	            if (!character_1.Character.isOctalDigit(this.source.charCodeAt(this.index))) {
-	                break;
-	            }
-	            num += this.source[this.index++];
-	        }
-	        if (!octal && num.length === 0) {
-	            // only 0o or 0O
-	            this.throwUnexpectedToken();
-	        }
-	        if (character_1.Character.isIdentifierStart(this.source.charCodeAt(this.index)) || character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
-	            this.throwUnexpectedToken();
-	        }
-	        return {
-	            type: 6 /* NumericLiteral */,
-	            value: parseInt(num, 8),
-	            octal: octal,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    Scanner.prototype.isImplicitOctalLiteral = function () {
-	        // Implicit octal, unless there is a non-octal digit.
-	        // (Annex B.1.1 on Numeric Literals)
-	        for (var i = this.index + 1; i < this.length; ++i) {
-	            var ch = this.source[i];
-	            if (ch === '8' || ch === '9') {
-	                return false;
-	            }
-	            if (!character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
-	                return true;
-	            }
-	        }
-	        return true;
-	    };
-	    Scanner.prototype.scanNumericLiteral = function () {
-	        var start = this.index;
-	        var ch = this.source[start];
-	        assert_1.assert(character_1.Character.isDecimalDigit(ch.charCodeAt(0)) || (ch === '.'), 'Numeric literal must start with a decimal digit or a decimal point');
-	        var num = '';
-	        if (ch !== '.') {
-	            num = this.source[this.index++];
-	            ch = this.source[this.index];
-	            // Hex number starts with '0x'.
-	            // Octal number starts with '0'.
-	            // Octal number in ES6 starts with '0o'.
-	            // Binary number in ES6 starts with '0b'.
-	            if (num === '0') {
-	                if (ch === 'x' || ch === 'X') {
-	                    ++this.index;
-	                    return this.scanHexLiteral(start);
-	                }
-	                if (ch === 'b' || ch === 'B') {
-	                    ++this.index;
-	                    return this.scanBinaryLiteral(start);
-	                }
-	                if (ch === 'o' || ch === 'O') {
-	                    return this.scanOctalLiteral(ch, start);
-	                }
-	                if (ch && character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
-	                    if (this.isImplicitOctalLiteral()) {
-	                        return this.scanOctalLiteral(ch, start);
-	                    }
-	                }
-	            }
-	            while (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
-	                num += this.source[this.index++];
-	            }
-	            ch = this.source[this.index];
-	        }
-	        if (ch === '.') {
-	            num += this.source[this.index++];
-	            while (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
-	                num += this.source[this.index++];
-	            }
-	            ch = this.source[this.index];
-	        }
-	        if (ch === 'e' || ch === 'E') {
-	            num += this.source[this.index++];
-	            ch = this.source[this.index];
-	            if (ch === '+' || ch === '-') {
-	                num += this.source[this.index++];
-	            }
-	            if (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
-	                while (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
-	                    num += this.source[this.index++];
-	                }
-	            }
-	            else {
-	                this.throwUnexpectedToken();
-	            }
-	        }
-	        if (character_1.Character.isIdentifierStart(this.source.charCodeAt(this.index))) {
-	            this.throwUnexpectedToken();
-	        }
-	        return {
-	            type: 6 /* NumericLiteral */,
-	            value: parseFloat(num),
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    // https://tc39.github.io/ecma262/#sec-literals-string-literals
-	    Scanner.prototype.scanStringLiteral = function () {
-	        var start = this.index;
-	        var quote = this.source[start];
-	        assert_1.assert((quote === '\'' || quote === '"'), 'String literal must starts with a quote');
-	        ++this.index;
-	        var octal = false;
-	        var str = '';
-	        while (!this.eof()) {
-	            var ch = this.source[this.index++];
-	            if (ch === quote) {
-	                quote = '';
-	                break;
-	            }
-	            else if (ch === '\\') {
-	                ch = this.source[this.index++];
-	                if (!ch || !character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                    switch (ch) {
-	                        case 'u':
-	                            if (this.source[this.index] === '{') {
-	                                ++this.index;
-	                                str += this.scanUnicodeCodePointEscape();
-	                            }
-	                            else {
-	                                var unescaped_1 = this.scanHexEscape(ch);
-	                                if (unescaped_1 === null) {
-	                                    this.throwUnexpectedToken();
-	                                }
-	                                str += unescaped_1;
-	                            }
-	                            break;
-	                        case 'x':
-	                            var unescaped = this.scanHexEscape(ch);
-	                            if (unescaped === null) {
-	                                this.throwUnexpectedToken(messages_1.Messages.InvalidHexEscapeSequence);
-	                            }
-	                            str += unescaped;
-	                            break;
-	                        case 'n':
-	                            str += '\n';
-	                            break;
-	                        case 'r':
-	                            str += '\r';
-	                            break;
-	                        case 't':
-	                            str += '\t';
-	                            break;
-	                        case 'b':
-	                            str += '\b';
-	                            break;
-	                        case 'f':
-	                            str += '\f';
-	                            break;
-	                        case 'v':
-	                            str += '\x0B';
-	                            break;
-	                        case '8':
-	                        case '9':
-	                            str += ch;
-	                            this.tolerateUnexpectedToken();
-	                            break;
-	                        default:
-	                            if (ch && character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
-	                                var octToDec = this.octalToDecimal(ch);
-	                                octal = octToDec.octal || octal;
-	                                str += String.fromCharCode(octToDec.code);
-	                            }
-	                            else {
-	                                str += ch;
-	                            }
-	                            break;
-	                    }
-	                }
-	                else {
-	                    ++this.lineNumber;
-	                    if (ch === '\r' && this.source[this.index] === '\n') {
-	                        ++this.index;
-	                    }
-	                    this.lineStart = this.index;
-	                }
-	            }
-	            else if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                break;
-	            }
-	            else {
-	                str += ch;
-	            }
-	        }
-	        if (quote !== '') {
-	            this.index = start;
-	            this.throwUnexpectedToken();
-	        }
-	        return {
-	            type: 8 /* StringLiteral */,
-	            value: str,
-	            octal: octal,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    // https://tc39.github.io/ecma262/#sec-template-literal-lexical-components
-	    Scanner.prototype.scanTemplate = function () {
-	        var cooked = '';
-	        var terminated = false;
-	        var start = this.index;
-	        var head = (this.source[start] === '`');
-	        var tail = false;
-	        var rawOffset = 2;
-	        ++this.index;
-	        while (!this.eof()) {
-	            var ch = this.source[this.index++];
-	            if (ch === '`') {
-	                rawOffset = 1;
-	                tail = true;
-	                terminated = true;
-	                break;
-	            }
-	            else if (ch === '$') {
-	                if (this.source[this.index] === '{') {
-	                    this.curlyStack.push('${');
-	                    ++this.index;
-	                    terminated = true;
-	                    break;
-	                }
-	                cooked += ch;
-	            }
-	            else if (ch === '\\') {
-	                ch = this.source[this.index++];
-	                if (!character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                    switch (ch) {
-	                        case 'n':
-	                            cooked += '\n';
-	                            break;
-	                        case 'r':
-	                            cooked += '\r';
-	                            break;
-	                        case 't':
-	                            cooked += '\t';
-	                            break;
-	                        case 'u':
-	                            if (this.source[this.index] === '{') {
-	                                ++this.index;
-	                                cooked += this.scanUnicodeCodePointEscape();
-	                            }
-	                            else {
-	                                var restore = this.index;
-	                                var unescaped_2 = this.scanHexEscape(ch);
-	                                if (unescaped_2 !== null) {
-	                                    cooked += unescaped_2;
-	                                }
-	                                else {
-	                                    this.index = restore;
-	                                    cooked += ch;
-	                                }
-	                            }
-	                            break;
-	                        case 'x':
-	                            var unescaped = this.scanHexEscape(ch);
-	                            if (unescaped === null) {
-	                                this.throwUnexpectedToken(messages_1.Messages.InvalidHexEscapeSequence);
-	                            }
-	                            cooked += unescaped;
-	                            break;
-	                        case 'b':
-	                            cooked += '\b';
-	                            break;
-	                        case 'f':
-	                            cooked += '\f';
-	                            break;
-	                        case 'v':
-	                            cooked += '\v';
-	                            break;
-	                        default:
-	                            if (ch === '0') {
-	                                if (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index))) {
-	                                    // Illegal: \01 \02 and so on
-	                                    this.throwUnexpectedToken(messages_1.Messages.TemplateOctalLiteral);
-	                                }
-	                                cooked += '\0';
-	                            }
-	                            else if (character_1.Character.isOctalDigit(ch.charCodeAt(0))) {
-	                                // Illegal: \1 \2
-	                                this.throwUnexpectedToken(messages_1.Messages.TemplateOctalLiteral);
-	                            }
-	                            else {
-	                                cooked += ch;
-	                            }
-	                            break;
-	                    }
-	                }
-	                else {
-	                    ++this.lineNumber;
-	                    if (ch === '\r' && this.source[this.index] === '\n') {
-	                        ++this.index;
-	                    }
-	                    this.lineStart = this.index;
-	                }
-	            }
-	            else if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                ++this.lineNumber;
-	                if (ch === '\r' && this.source[this.index] === '\n') {
-	                    ++this.index;
-	                }
-	                this.lineStart = this.index;
-	                cooked += '\n';
-	            }
-	            else {
-	                cooked += ch;
-	            }
-	        }
-	        if (!terminated) {
-	            this.throwUnexpectedToken();
-	        }
-	        if (!head) {
-	            this.curlyStack.pop();
-	        }
-	        return {
-	            type: 10 /* Template */,
-	            value: this.source.slice(start + 1, this.index - rawOffset),
-	            cooked: cooked,
-	            head: head,
-	            tail: tail,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    // https://tc39.github.io/ecma262/#sec-literals-regular-expression-literals
-	    Scanner.prototype.testRegExp = function (pattern, flags) {
-	        // The BMP character to use as a replacement for astral symbols when
-	        // translating an ES6 "u"-flagged pattern to an ES5-compatible
-	        // approximation.
-	        // Note: replacing with '\uFFFF' enables false positives in unlikely
-	        // scenarios. For example, `[\u{1044f}-\u{10440}]` is an invalid
-	        // pattern that would not be detected by this substitution.
-	        var astralSubstitute = '\uFFFF';
-	        var tmp = pattern;
-	        var self = this;
-	        if (flags.indexOf('u') >= 0) {
-	            tmp = tmp
-	                .replace(/\\u\{([0-9a-fA-F]+)\}|\\u([a-fA-F0-9]{4})/g, function ($0, $1, $2) {
-	                var codePoint = parseInt($1 || $2, 16);
-	                if (codePoint > 0x10FFFF) {
-	                    self.throwUnexpectedToken(messages_1.Messages.InvalidRegExp);
-	                }
-	                if (codePoint <= 0xFFFF) {
-	                    return String.fromCharCode(codePoint);
-	                }
-	                return astralSubstitute;
-	            })
-	                .replace(/[\uD800-\uDBFF][\uDC00-\uDFFF]/g, astralSubstitute);
-	        }
-	        // First, detect invalid regular expressions.
-	        try {
-	            RegExp(tmp);
-	        }
-	        catch (e) {
-	            this.throwUnexpectedToken(messages_1.Messages.InvalidRegExp);
-	        }
-	        // Return a regular expression object for this pattern-flag pair, or
-	        // `null` in case the current environment doesn't support the flags it
-	        // uses.
-	        try {
-	            return new RegExp(pattern, flags);
-	        }
-	        catch (exception) {
-	            /* istanbul ignore next */
-	            return null;
-	        }
-	    };
-	    Scanner.prototype.scanRegExpBody = function () {
-	        var ch = this.source[this.index];
-	        assert_1.assert(ch === '/', 'Regular expression literal must start with a slash');
-	        var str = this.source[this.index++];
-	        var classMarker = false;
-	        var terminated = false;
-	        while (!this.eof()) {
-	            ch = this.source[this.index++];
-	            str += ch;
-	            if (ch === '\\') {
-	                ch = this.source[this.index++];
-	                // https://tc39.github.io/ecma262/#sec-literals-regular-expression-literals
-	                if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                    this.throwUnexpectedToken(messages_1.Messages.UnterminatedRegExp);
-	                }
-	                str += ch;
-	            }
-	            else if (character_1.Character.isLineTerminator(ch.charCodeAt(0))) {
-	                this.throwUnexpectedToken(messages_1.Messages.UnterminatedRegExp);
-	            }
-	            else if (classMarker) {
-	                if (ch === ']') {
-	                    classMarker = false;
-	                }
-	            }
-	            else {
-	                if (ch === '/') {
-	                    terminated = true;
-	                    break;
-	                }
-	                else if (ch === '[') {
-	                    classMarker = true;
-	                }
-	            }
-	        }
-	        if (!terminated) {
-	            this.throwUnexpectedToken(messages_1.Messages.UnterminatedRegExp);
-	        }
-	        // Exclude leading and trailing slash.
-	        return str.substr(1, str.length - 2);
-	    };
-	    Scanner.prototype.scanRegExpFlags = function () {
-	        var str = '';
-	        var flags = '';
-	        while (!this.eof()) {
-	            var ch = this.source[this.index];
-	            if (!character_1.Character.isIdentifierPart(ch.charCodeAt(0))) {
-	                break;
-	            }
-	            ++this.index;
-	            if (ch === '\\' && !this.eof()) {
-	                ch = this.source[this.index];
-	                if (ch === 'u') {
-	                    ++this.index;
-	                    var restore = this.index;
-	                    var char = this.scanHexEscape('u');
-	                    if (char !== null) {
-	                        flags += char;
-	                        for (str += '\\u'; restore < this.index; ++restore) {
-	                            str += this.source[restore];
-	                        }
-	                    }
-	                    else {
-	                        this.index = restore;
-	                        flags += 'u';
-	                        str += '\\u';
-	                    }
-	                    this.tolerateUnexpectedToken();
-	                }
-	                else {
-	                    str += '\\';
-	                    this.tolerateUnexpectedToken();
-	                }
-	            }
-	            else {
-	                flags += ch;
-	                str += ch;
-	            }
-	        }
-	        return flags;
-	    };
-	    Scanner.prototype.scanRegExp = function () {
-	        var start = this.index;
-	        var pattern = this.scanRegExpBody();
-	        var flags = this.scanRegExpFlags();
-	        var value = this.testRegExp(pattern, flags);
-	        return {
-	            type: 9 /* RegularExpression */,
-	            value: '',
-	            pattern: pattern,
-	            flags: flags,
-	            regex: value,
-	            lineNumber: this.lineNumber,
-	            lineStart: this.lineStart,
-	            start: start,
-	            end: this.index
-	        };
-	    };
-	    Scanner.prototype.lex = function () {
-	        if (this.eof()) {
-	            return {
-	                type: 2 /* EOF */,
-	                value: '',
-	                lineNumber: this.lineNumber,
-	                lineStart: this.lineStart,
-	                start: this.index,
-	                end: this.index
-	            };
-	        }
-	        var cp = this.source.charCodeAt(this.index);
-	        if (character_1.Character.isIdentifierStart(cp)) {
-	            return this.scanIdentifier();
-	        }
-	        // Very common: ( and ) and ;
-	        if (cp === 0x28 || cp === 0x29 || cp === 0x3B) {
-	            return this.scanPunctuator();
-	        }
-	        // String literal starts with single quote (U+0027) or double quote (U+0022).
-	        if (cp === 0x27 || cp === 0x22) {
-	            return this.scanStringLiteral();
-	        }
-	        // Dot (.) U+002E can also start a floating-point number, hence the need
-	        // to check the next character.
-	        if (cp === 0x2E) {
-	            if (character_1.Character.isDecimalDigit(this.source.charCodeAt(this.index + 1))) {
-	                return this.scanNumericLiteral();
-	            }
-	            return this.scanPunctuator();
-	        }
-	        if (character_1.Character.isDecimalDigit(cp)) {
-	            return this.scanNumericLiteral();
-	        }
-	        // Template literals start with ` (U+0060) for template head
-	        // or } (U+007D) for template middle or template tail.
-	        if (cp === 0x60 || (cp === 0x7D && this.curlyStack[this.curlyStack.length - 1] === '${')) {
-	            return this.scanTemplate();
-	        }
-	        // Possible identifier start in a surrogate pair.
-	        if (cp >= 0xD800 && cp < 0xDFFF) {
-	            if (character_1.Character.isIdentifierStart(this.codePointAt(this.index))) {
-	                return this.scanIdentifier();
-	            }
-	        }
-	        return this.scanPunctuator();
-	    };
-	    return Scanner;
-	}());
-	exports.Scanner = Scanner;
-
-
-/***/ },
-/* 13 */
-/***/ function(module, exports) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.TokenName = {};
-	exports.TokenName[1 /* BooleanLiteral */] = 'Boolean';
-	exports.TokenName[2 /* EOF */] = '<end>';
-	exports.TokenName[3 /* Identifier */] = 'Identifier';
-	exports.TokenName[4 /* Keyword */] = 'Keyword';
-	exports.TokenName[5 /* NullLiteral */] = 'Null';
-	exports.TokenName[6 /* NumericLiteral */] = 'Numeric';
-	exports.TokenName[7 /* Punctuator */] = 'Punctuator';
-	exports.TokenName[8 /* StringLiteral */] = 'String';
-	exports.TokenName[9 /* RegularExpression */] = 'RegularExpression';
-	exports.TokenName[10 /* Template */] = 'Template';
-
-
-/***/ },
-/* 14 */
-/***/ function(module, exports) {
-
-	"use strict";
-	// Generated by generate-xhtml-entities.js. DO NOT MODIFY!
-	Object.defineProperty(exports, "__esModule", { value: true });
-	exports.XHTMLEntities = {
-	    quot: '\u0022',
-	    amp: '\u0026',
-	    apos: '\u0027',
-	    gt: '\u003E',
-	    nbsp: '\u00A0',
-	    iexcl: '\u00A1',
-	    cent: '\u00A2',
-	    pound: '\u00A3',
-	    curren: '\u00A4',
-	    yen: '\u00A5',
-	    brvbar: '\u00A6',
-	    sect: '\u00A7',
-	    uml: '\u00A8',
-	    copy: '\u00A9',
-	    ordf: '\u00AA',
-	    laquo: '\u00AB',
-	    not: '\u00AC',
-	    shy: '\u00AD',
-	    reg: '\u00AE',
-	    macr: '\u00AF',
-	    deg: '\u00B0',
-	    plusmn: '\u00B1',
-	    sup2: '\u00B2',
-	    sup3: '\u00B3',
-	    acute: '\u00B4',
-	    micro: '\u00B5',
-	    para: '\u00B6',
-	    middot: '\u00B7',
-	    cedil: '\u00B8',
-	    sup1: '\u00B9',
-	    ordm: '\u00BA',
-	    raquo: '\u00BB',
-	    frac14: '\u00BC',
-	    frac12: '\u00BD',
-	    frac34: '\u00BE',
-	    iquest: '\u00BF',
-	    Agrave: '\u00C0',
-	    Aacute: '\u00C1',
-	    Acirc: '\u00C2',
-	    Atilde: '\u00C3',
-	    Auml: '\u00C4',
-	    Aring: '\u00C5',
-	    AElig: '\u00C6',
-	    Ccedil: '\u00C7',
-	    Egrave: '\u00C8',
-	    Eacute: '\u00C9',
-	    Ecirc: '\u00CA',
-	    Euml: '\u00CB',
-	    Igrave: '\u00CC',
-	    Iacute: '\u00CD',
-	    Icirc: '\u00CE',
-	    Iuml: '\u00CF',
-	    ETH: '\u00D0',
-	    Ntilde: '\u00D1',
-	    Ograve: '\u00D2',
-	    Oacute: '\u00D3',
-	    Ocirc: '\u00D4',
-	    Otilde: '\u00D5',
-	    Ouml: '\u00D6',
-	    times: '\u00D7',
-	    Oslash: '\u00D8',
-	    Ugrave: '\u00D9',
-	    Uacute: '\u00DA',
-	    Ucirc: '\u00DB',
-	    Uuml: '\u00DC',
-	    Yacute: '\u00DD',
-	    THORN: '\u00DE',
-	    szlig: '\u00DF',
-	    agrave: '\u00E0',
-	    aacute: '\u00E1',
-	    acirc: '\u00E2',
-	    atilde: '\u00E3',
-	    auml: '\u00E4',
-	    aring: '\u00E5',
-	    aelig: '\u00E6',
-	    ccedil: '\u00E7',
-	    egrave: '\u00E8',
-	    eacute: '\u00E9',
-	    ecirc: '\u00EA',
-	    euml: '\u00EB',
-	    igrave: '\u00EC',
-	    iacute: '\u00ED',
-	    icirc: '\u00EE',
-	    iuml: '\u00EF',
-	    eth: '\u00F0',
-	    ntilde: '\u00F1',
-	    ograve: '\u00F2',
-	    oacute: '\u00F3',
-	    ocirc: '\u00F4',
-	    otilde: '\u00F5',
-	    ouml: '\u00F6',
-	    divide: '\u00F7',
-	    oslash: '\u00F8',
-	    ugrave: '\u00F9',
-	    uacute: '\u00FA',
-	    ucirc: '\u00FB',
-	    uuml: '\u00FC',
-	    yacute: '\u00FD',
-	    thorn: '\u00FE',
-	    yuml: '\u00FF',
-	    OElig: '\u0152',
-	    oelig: '\u0153',
-	    Scaron: '\u0160',
-	    scaron: '\u0161',
-	    Yuml: '\u0178',
-	    fnof: '\u0192',
-	    circ: '\u02C6',
-	    tilde: '\u02DC',
-	    Alpha: '\u0391',
-	    Beta: '\u0392',
-	    Gamma: '\u0393',
-	    Delta: '\u0394',
-	    Epsilon: '\u0395',
-	    Zeta: '\u0396',
-	    Eta: '\u0397',
-	    Theta: '\u0398',
-	    Iota: '\u0399',
-	    Kappa: '\u039A',
-	    Lambda: '\u039B',
-	    Mu: '\u039C',
-	    Nu: '\u039D',
-	    Xi: '\u039E',
-	    Omicron: '\u039F',
-	    Pi: '\u03A0',
-	    Rho: '\u03A1',
-	    Sigma: '\u03A3',
-	    Tau: '\u03A4',
-	    Upsilon: '\u03A5',
-	    Phi: '\u03A6',
-	    Chi: '\u03A7',
-	    Psi: '\u03A8',
-	    Omega: '\u03A9',
-	    alpha: '\u03B1',
-	    beta: '\u03B2',
-	    gamma: '\u03B3',
-	    delta: '\u03B4',
-	    epsilon: '\u03B5',
-	    zeta: '\u03B6',
-	    eta: '\u03B7',
-	    theta: '\u03B8',
-	    iota: '\u03B9',
-	    kappa: '\u03BA',
-	    lambda: '\u03BB',
-	    mu: '\u03BC',
-	    nu: '\u03BD',
-	    xi: '\u03BE',
-	    omicron: '\u03BF',
-	    pi: '\u03C0',
-	    rho: '\u03C1',
-	    sigmaf: '\u03C2',
-	    sigma: '\u03C3',
-	    tau: '\u03C4',
-	    upsilon: '\u03C5',
-	    phi: '\u03C6',
-	    chi: '\u03C7',
-	    psi: '\u03C8',
-	    omega: '\u03C9',
-	    thetasym: '\u03D1',
-	    upsih: '\u03D2',
-	    piv: '\u03D6',
-	    ensp: '\u2002',
-	    emsp: '\u2003',
-	    thinsp: '\u2009',
-	    zwnj: '\u200C',
-	    zwj: '\u200D',
-	    lrm: '\u200E',
-	    rlm: '\u200F',
-	    ndash: '\u2013',
-	    mdash: '\u2014',
-	    lsquo: '\u2018',
-	    rsquo: '\u2019',
-	    sbquo: '\u201A',
-	    ldquo: '\u201C',
-	    rdquo: '\u201D',
-	    bdquo: '\u201E',
-	    dagger: '\u2020',
-	    Dagger: '\u2021',
-	    bull: '\u2022',
-	    hellip: '\u2026',
-	    permil: '\u2030',
-	    prime: '\u2032',
-	    Prime: '\u2033',
-	    lsaquo: '\u2039',
-	    rsaquo: '\u203A',
-	    oline: '\u203E',
-	    frasl: '\u2044',
-	    euro: '\u20AC',
-	    image: '\u2111',
-	    weierp: '\u2118',
-	    real: '\u211C',
-	    trade: '\u2122',
-	    alefsym: '\u2135',
-	    larr: '\u2190',
-	    uarr: '\u2191',
-	    rarr: '\u2192',
-	    darr: '\u2193',
-	    harr: '\u2194',
-	    crarr: '\u21B5',
-	    lArr: '\u21D0',
-	    uArr: '\u21D1',
-	    rArr: '\u21D2',
-	    dArr: '\u21D3',
-	    hArr: '\u21D4',
-	    forall: '\u2200',
-	    part: '\u2202',
-	    exist: '\u2203',
-	    empty: '\u2205',
-	    nabla: '\u2207',
-	    isin: '\u2208',
-	    notin: '\u2209',
-	    ni: '\u220B',
-	    prod: '\u220F',
-	    sum: '\u2211',
-	    minus: '\u2212',
-	    lowast: '\u2217',
-	    radic: '\u221A',
-	    prop: '\u221D',
-	    infin: '\u221E',
-	    ang: '\u2220',
-	    and: '\u2227',
-	    or: '\u2228',
-	    cap: '\u2229',
-	    cup: '\u222A',
-	    int: '\u222B',
-	    there4: '\u2234',
-	    sim: '\u223C',
-	    cong: '\u2245',
-	    asymp: '\u2248',
-	    ne: '\u2260',
-	    equiv: '\u2261',
-	    le: '\u2264',
-	    ge: '\u2265',
-	    sub: '\u2282',
-	    sup: '\u2283',
-	    nsub: '\u2284',
-	    sube: '\u2286',
-	    supe: '\u2287',
-	    oplus: '\u2295',
-	    otimes: '\u2297',
-	    perp: '\u22A5',
-	    sdot: '\u22C5',
-	    lceil: '\u2308',
-	    rceil: '\u2309',
-	    lfloor: '\u230A',
-	    rfloor: '\u230B',
-	    loz: '\u25CA',
-	    spades: '\u2660',
-	    clubs: '\u2663',
-	    hearts: '\u2665',
-	    diams: '\u2666',
-	    lang: '\u27E8',
-	    rang: '\u27E9'
-	};
-
-
-/***/ },
-/* 15 */
-/***/ function(module, exports, __webpack_require__) {
-
-	"use strict";
-	Object.defineProperty(exports, "__esModule", { value: true });
-	var error_handler_1 = __webpack_require__(10);
-	var scanner_1 = __webpack_require__(12);
-	var token_1 = __webpack_require__(13);
-	var Reader = (function () {
-	    function Reader() {
-	        this.values = [];
-	        this.curly = this.paren = -1;
-	    }
-	    // A function following one of those tokens is an expression.
-	    Reader.prototype.beforeFunctionExpression = function (t) {
-	        return ['(', '{', '[', 'in', 'typeof', 'instanceof', 'new',
-	            'return', 'case', 'delete', 'throw', 'void',
-	            // assignment operators
-	            '=', '+=', '-=', '*=', '**=', '/=', '%=', '<<=', '>>=', '>>>=',
-	            '&=', '|=', '^=', ',',
-	            // binary/unary operators
-	            '+', '-', '*', '**', '/', '%', '++', '--', '<<', '>>', '>>>', '&',
-	            '|', '^', '!', '~', '&&', '||', '?', ':', '===', '==', '>=',
-	            '<=', '<', '>', '!=', '!=='].indexOf(t) >= 0;
-	    };
-	    // Determine if forward slash (/) is an operator or part of a regular expression
-	    // https://github.com/mozilla/sweet.js/wiki/design
-	    Reader.prototype.isRegexStart = function () {
-	        var previous = this.values[this.values.length - 1];
-	        var regex = (previous !== null);
-	        switch (previous) {
-	            case 'this':
-	            case ']':
-	                regex = false;
-	                break;
-	            case ')':
-	                var keyword = this.values[this.paren - 1];
-	                regex = (keyword === 'if' || keyword === 'while' || keyword === 'for' || keyword === 'with');
-	                break;
-	            case '}':
-	                // Dividing a function by anything makes little sense,
-	                // but we have to check for that.
-	                regex = false;
-	                if (this.values[this.curly - 3] === 'function') {
-	                    // Anonymous function, e.g. function(){} /42
-	                    var check = this.values[this.curly - 4];
-	                    regex = check ? !this.beforeFunctionExpression(check) : false;
-	                }
-	                else if (this.values[this.curly - 4] === 'function') {
-	                    // Named function, e.g. function f(){} /42/
-	                    var check = this.values[this.curly - 5];
-	                    regex = check ? !this.beforeFunctionExpression(check) : true;
-	                }
-	                break;
-	            default:
-	                break;
-	        }
-	        return regex;
-	    };
-	    Reader.prototype.push = function (token) {
-	        if (token.type === 7 /* Punctuator */ || token.type === 4 /* Keyword */) {
-	            if (token.value === '{') {
-	                this.curly = this.values.length;
-	            }
-	            else if (token.value === '(') {
-	                this.paren = this.values.length;
-	            }
-	            this.values.push(token.value);
-	        }
-	        else {
-	            this.values.push(null);
-	        }
-	    };
-	    return Reader;
-	}());
-	var Tokenizer = (function () {
-	    function Tokenizer(code, config) {
-	        this.errorHandler = new error_handler_1.ErrorHandler();
-	        this.errorHandler.tolerant = config ? (typeof config.tolerant === 'boolean' && config.tolerant) : false;
-	        this.scanner = new scanner_1.Scanner(code, this.errorHandler);
-	        this.scanner.trackComment = config ? (typeof config.comment === 'boolean' && config.comment) : false;
-	        this.trackRange = config ? (typeof config.range === 'boolean' && config.range) : false;
-	        this.trackLoc = config ? (typeof config.loc === 'boolean' && config.loc) : false;
-	        this.buffer = [];
-	        this.reader = new Reader();
-	    }
-	    Tokenizer.prototype.errors = function () {
-	        return this.errorHandler.errors;
-	    };
-	    Tokenizer.prototype.getNextToken = function () {
-	        if (this.buffer.length === 0) {
-	            var comments = this.scanner.scanComments();
-	            if (this.scanner.trackComment) {
-	                for (var i = 0; i < comments.length; ++i) {
-	                    var e = comments[i];
-	                    var value = this.scanner.source.slice(e.slice[0], e.slice[1]);
-	                    var comment = {
-	                        type: e.multiLine ? 'BlockComment' : 'LineComment',
-	                        value: value
-	                    };
-	                    if (this.trackRange) {
-	                        comment.range = e.range;
-	                    }
-	                    if (this.trackLoc) {
-	                        comment.loc = e.loc;
-	                    }
-	                    this.buffer.push(comment);
-	                }
-	            }
-	            if (!this.scanner.eof()) {
-	                var loc = void 0;
-	                if (this.trackLoc) {
-	                    loc = {
-	                        start: {
-	                            line: this.scanner.lineNumber,
-	                            column: this.scanner.index - this.scanner.lineStart
-	                        },
-	                        end: {}
-	                    };
-	                }
-	                var startRegex = (this.scanner.source[this.scanner.index] === '/') && this.reader.isRegexStart();
-	                var token = startRegex ? this.scanner.scanRegExp() : this.scanner.lex();
-	                this.reader.push(token);
-	                var entry = {
-	                    type: token_1.TokenName[token.type],
-	                    value: this.scanner.source.slice(token.start, token.end)
-	                };
-	                if (this.trackRange) {
-	                    entry.range = [token.start, token.end];
-	                }
-	                if (this.trackLoc) {
-	                    loc.end = {
-	                        line: this.scanner.lineNumber,
-	                        column: this.scanner.index - this.scanner.lineStart
-	                    };
-	                    entry.loc = loc;
-	                }
-	                if (token.type === 9 /* RegularExpression */) {
-	                    var pattern = token.pattern;
-	                    var flags = token.flags;
-	                    entry.regex = { pattern: pattern, flags: flags };
-	                }
-	                this.buffer.push(entry);
-	            }
-	        }
-	        return this.buffer.shift();
-	    };
-	    return Tokenizer;
-	}());
-	exports.Tokenizer = Tokenizer;
-
-
-/***/ }
-/******/ ])
-});
-;
-
-/***/ }),
-/* 269 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var hasOwn = Object.prototype.hasOwnProperty;
-var toStr = Object.prototype.toString;
-var defineProperty = Object.defineProperty;
-var gOPD = Object.getOwnPropertyDescriptor;
-
-var isArray = function isArray(arr) {
-	if (typeof Array.isArray === 'function') {
-		return Array.isArray(arr);
-	}
-
-	return toStr.call(arr) === '[object Array]';
-};
-
-var isPlainObject = function isPlainObject(obj) {
-	if (!obj || toStr.call(obj) !== '[object Object]') {
-		return false;
-	}
-
-	var hasOwnConstructor = hasOwn.call(obj, 'constructor');
-	var hasIsPrototypeOf = obj.constructor && obj.constructor.prototype && hasOwn.call(obj.constructor.prototype, 'isPrototypeOf');
-	// Not own constructor property must be Object
-	if (obj.constructor && !hasOwnConstructor && !hasIsPrototypeOf) {
-		return false;
-	}
-
-	// Own properties are enumerated firstly, so to speed up,
-	// if last one is own, then all properties are own.
-	var key;
-	for (key in obj) { /**/ }
-
-	return typeof key === 'undefined' || hasOwn.call(obj, key);
-};
-
-// If name is '__proto__', and Object.defineProperty is available, define __proto__ as an own property on target
-var setProperty = function setProperty(target, options) {
-	if (defineProperty && options.name === '__proto__') {
-		defineProperty(target, options.name, {
-			enumerable: true,
-			configurable: true,
-			value: options.newValue,
-			writable: true
-		});
-	} else {
-		target[options.name] = options.newValue;
-	}
-};
-
-// Return undefined instead of __proto__ if '__proto__' is not an own property
-var getProperty = function getProperty(obj, name) {
-	if (name === '__proto__') {
-		if (!hasOwn.call(obj, name)) {
-			return void 0;
-		} else if (gOPD) {
-			// In early versions of node, obj['__proto__'] is buggy when obj has
-			// __proto__ as an own property. Object.getOwnPropertyDescriptor() works.
-			return gOPD(obj, name).value;
-		}
-	}
-
-	return obj[name];
-};
-
-module.exports = function extend() {
-	var options, name, src, copy, copyIsArray, clone;
-	var target = arguments[0];
-	var i = 1;
-	var length = arguments.length;
-	var deep = false;
-
-	// Handle a deep copy situation
-	if (typeof target === 'boolean') {
-		deep = target;
-		target = arguments[1] || {};
-		// skip the boolean and the target
-		i = 2;
-	}
-	if (target == null || (typeof target !== 'object' && typeof target !== 'function')) {
-		target = {};
-	}
-
-	for (; i < length; ++i) {
-		options = arguments[i];
-		// Only deal with non-null/undefined values
-		if (options != null) {
-			// Extend the base object
-			for (name in options) {
-				src = getProperty(target, name);
-				copy = getProperty(options, name);
-
-				// Prevent never-ending loop
-				if (target !== copy) {
-					// Recurse if we're merging plain objects or arrays
-					if (deep && copy && (isPlainObject(copy) || (copyIsArray = isArray(copy)))) {
-						if (copyIsArray) {
-							copyIsArray = false;
-							clone = src && isArray(src) ? src : [];
-						} else {
-							clone = src && isPlainObject(src) ? src : {};
-						}
-
-						// Never move original objects, clone them
-						setProperty(target, { name: name, newValue: extend(deep, clone, copy) });
-
-					// Don't bring in undefined values
-					} else if (typeof copy !== 'undefined') {
-						setProperty(target, { name: name, newValue: copy });
-					}
-				}
-			}
-		}
-	}
-
-	// Return the modified object
-	return target;
-};
-
-
-/***/ }),
-/* 270 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const escapeStringRegexp = __webpack_require__(388);
-
-const platform = process.platform;
-
-const main = {
-	tick: '✔',
-	cross: '✖',
-	star: '★',
-	square: '▇',
-	squareSmall: '◻',
-	squareSmallFilled: '◼',
-	play: '▶',
-	circle: '◯',
-	circleFilled: '◉',
-	circleDotted: '◌',
-	circleDouble: '◎',
-	circleCircle: 'ⓞ',
-	circleCross: 'ⓧ',
-	circlePipe: 'Ⓘ',
-	circleQuestionMark: '?⃝',
-	bullet: '●',
-	dot: '․',
-	line: '─',
-	ellipsis: '…',
-	pointer: '❯',
-	pointerSmall: '›',
-	info: 'ℹ',
-	warning: '⚠',
-	hamburger: '☰',
-	smiley: '㋡',
-	mustache: '෴',
-	heart: '♥',
-	arrowUp: '↑',
-	arrowDown: '↓',
-	arrowLeft: '←',
-	arrowRight: '→',
-	radioOn: '◉',
-	radioOff: '◯',
-	checkboxOn: '☒',
-	checkboxOff: '☐',
-	checkboxCircleOn: 'ⓧ',
-	checkboxCircleOff: 'Ⓘ',
-	questionMarkPrefix: '?⃝',
-	oneHalf: '½',
-	oneThird: '⅓',
-	oneQuarter: '¼',
-	oneFifth: '⅕',
-	oneSixth: '⅙',
-	oneSeventh: '⅐',
-	oneEighth: '⅛',
-	oneNinth: '⅑',
-	oneTenth: '⅒',
-	twoThirds: '⅔',
-	twoFifths: '⅖',
-	threeQuarters: '¾',
-	threeFifths: '⅗',
-	threeEighths: '⅜',
-	fourFifths: '⅘',
-	fiveSixths: '⅚',
-	fiveEighths: '⅝',
-	sevenEighths: '⅞'
-};
-
-const win = {
-	tick: '√',
-	cross: '×',
-	star: '*',
-	square: '█',
-	squareSmall: '[ ]',
-	squareSmallFilled: '[█]',
-	play: '►',
-	circle: '( )',
-	circleFilled: '(*)',
-	circleDotted: '( )',
-	circleDouble: '( )',
-	circleCircle: '(○)',
-	circleCross: '(×)',
-	circlePipe: '(│)',
-	circleQuestionMark: '(?)',
-	bullet: '*',
-	dot: '.',
-	line: '─',
-	ellipsis: '...',
-	pointer: '>',
-	pointerSmall: '»',
-	info: 'i',
-	warning: '‼',
-	hamburger: '≡',
-	smiley: '☺',
-	mustache: '┌─┐',
-	heart: main.heart,
-	arrowUp: main.arrowUp,
-	arrowDown: main.arrowDown,
-	arrowLeft: main.arrowLeft,
-	arrowRight: main.arrowRight,
-	radioOn: '(*)',
-	radioOff: '( )',
-	checkboxOn: '[×]',
-	checkboxOff: '[ ]',
-	checkboxCircleOn: '(×)',
-	checkboxCircleOff: '( )',
-	questionMarkPrefix: '？',
-	oneHalf: '1/2',
-	oneThird: '1/3',
-	oneQuarter: '1/4',
-	oneFifth: '1/5',
-	oneSixth: '1/6',
-	oneSeventh: '1/7',
-	oneEighth: '1/8',
-	oneNinth: '1/9',
-	oneTenth: '1/10',
-	twoThirds: '2/3',
-	twoFifths: '2/5',
-	threeQuarters: '3/4',
-	threeFifths: '3/5',
-	threeEighths: '3/8',
-	fourFifths: '4/5',
-	fiveSixths: '5/6',
-	fiveEighths: '5/8',
-	sevenEighths: '7/8'
-};
-
-if (platform === 'linux') {
-	// the main one doesn't look that good on Ubuntu
-	main.questionMarkPrefix = '?';
-}
-
-const figures = platform === 'win32' ? win : main;
-
-const fn = str => {
-	if (figures === main) {
-		return str;
-	}
-
-	Object.keys(main).forEach(key => {
-		if (main[key] === figures[key]) {
-			return;
-		}
-
-		str = str.replace(new RegExp(escapeStringRegexp(main[key]), 'g'), figures[key]);
-	});
-
-	return str;
-};
-
-module.exports = Object.assign(fn, figures);
-
-
-/***/ }),
-/* 271 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-var pathModule = __webpack_require__(0);
-var isWindows = process.platform === 'win32';
-var fs = __webpack_require__(5);
-
-// JavaScript implementation of realpath, ported from node pre-v6
-
-var DEBUG = process.env.NODE_DEBUG && /fs/.test(process.env.NODE_DEBUG);
-
-function rethrow() {
-  // Only enable in debug mode. A backtrace uses ~1000 bytes of heap space and
-  // is fairly slow to generate.
-  var callback;
-  if (DEBUG) {
-    var backtrace = new Error;
-    callback = debugCallback;
-  } else
-    callback = missingCallback;
-
-  return callback;
-
-  function debugCallback(err) {
-    if (err) {
-      backtrace.message = err.message;
-      err = backtrace;
-      missingCallback(err);
-    }
-  }
-
-  function missingCallback(err) {
-    if (err) {
-      if (process.throwDeprecation)
-        throw err;  // Forgot a callback but don't know where? Use NODE_DEBUG=fs
-      else if (!process.noDeprecation) {
-        var msg = 'fs: missing callback ' + (err.stack || err.message);
-        if (process.traceDeprecation)
-          console.trace(msg);
-        else
-          console.error(msg);
-      }
-    }
-  }
-}
-
-function maybeCallback(cb) {
-  return typeof cb === 'function' ? cb : rethrow();
-}
-
-var normalize = pathModule.normalize;
-
-// Regexp that finds the next partion of a (partial) path
-// result is [base_with_slash, base], e.g. ['somedir/', 'somedir']
-if (isWindows) {
-  var nextPartRe = /(.*?)(?:[\/\\]+|$)/g;
-} else {
-  var nextPartRe = /(.*?)(?:[\/]+|$)/g;
-}
-
-// Regex to find the device root, including trailing slash. E.g. 'c:\\'.
-if (isWindows) {
-  var splitRootRe = /^(?:[a-zA-Z]:|[\\\/]{2}[^\\\/]+[\\\/][^\\\/]+)?[\\\/]*/;
-} else {
-  var splitRootRe = /^[\/]*/;
-}
-
-exports.realpathSync = function realpathSync(p, cache) {
-  // make p is absolute
-  p = pathModule.resolve(p);
-
-  if (cache && Object.prototype.hasOwnProperty.call(cache, p)) {
-    return cache[p];
-  }
-
-  var original = p,
-      seenLinks = {},
-      knownHard = {};
-
-  // current character position in p
-  var pos;
-  // the partial path so far, including a trailing slash if any
-  var current;
-  // the partial path without a trailing slash (except when pointing at a root)
-  var base;
-  // the partial path scanned in the previous round, with slash
-  var previous;
-
-  start();
-
-  function start() {
-    // Skip over roots
-    var m = splitRootRe.exec(p);
-    pos = m[0].length;
-    current = m[0];
-    base = m[0];
-    previous = '';
-
-    // On windows, check that the root exists. On unix there is no need.
-    if (isWindows && !knownHard[base]) {
-      fs.lstatSync(base);
-      knownHard[base] = true;
-    }
-  }
-
-  // walk down the path, swapping out linked pathparts for their real
-  // values
-  // NB: p.length changes.
-  while (pos < p.length) {
-    // find the next part
-    nextPartRe.lastIndex = pos;
-    var result = nextPartRe.exec(p);
-    previous = current;
-    current += result[0];
-    base = previous + result[1];
-    pos = nextPartRe.lastIndex;
-
-    // continue if not a symlink
-    if (knownHard[base] || (cache && cache[base] === base)) {
-      continue;
-    }
-
-    var resolvedLink;
-    if (cache && Object.prototype.hasOwnProperty.call(cache, base)) {
-      // some known symbolic link.  no need to stat again.
-      resolvedLink = cache[base];
-    } else {
-      var stat = fs.lstatSync(base);
-      if (!stat.isSymbolicLink()) {
-        knownHard[base] = true;
-        if (cache) cache[base] = base;
-        continue;
-      }
-
-      // read the link if it wasn't read before
-      // dev/ino always return 0 on windows, so skip the check.
-      var linkTarget = null;
-      if (!isWindows) {
-        var id = stat.dev.toString(32) + ':' + stat.ino.toString(32);
-        if (seenLinks.hasOwnProperty(id)) {
-          linkTarget = seenLinks[id];
-        }
-      }
-      if (linkTarget === null) {
-        fs.statSync(base);
-        linkTarget = fs.readlinkSync(base);
-      }
-      resolvedLink = pathModule.resolve(previous, linkTarget);
-      // track this, if given a cache.
-      if (cache) cache[base] = resolvedLink;
-      if (!isWindows) seenLinks[id] = linkTarget;
-    }
-
-    // resolve the link, then start over
-    p = pathModule.resolve(resolvedLink, p.slice(pos));
-    start();
-  }
-
-  if (cache) cache[original] = p;
-
-  return p;
-};
-
-
-exports.realpath = function realpath(p, cache, cb) {
-  if (typeof cb !== 'function') {
-    cb = maybeCallback(cache);
-    cache = null;
-  }
-
-  // make p is absolute
-  p = pathModule.resolve(p);
-
-  if (cache && Object.prototype.hasOwnProperty.call(cache, p)) {
-    return process.nextTick(cb.bind(null, null, cache[p]));
-  }
-
-  var original = p,
-      seenLinks = {},
-      knownHard = {};
-
-  // current character position in p
-  var pos;
-  // the partial path so far, including a trailing slash if any
-  var current;
-  // the partial path without a trailing slash (except when pointing at a root)
-  var base;
-  // the partial path scanned in the previous round, with slash
-  var previous;
-
-  start();
-
-  function start() {
-    // Skip over roots
-    var m = splitRootRe.exec(p);
-    pos = m[0].length;
-    current = m[0];
-    base = m[0];
-    previous = '';
-
-    // On windows, check that the root exists. On unix there is no need.
-    if (isWindows && !knownHard[base]) {
-      fs.lstat(base, function(err) {
-        if (err) return cb(err);
-        knownHard[base] = true;
-        LOOP();
-      });
-    } else {
-      process.nextTick(LOOP);
-    }
-  }
-
-  // walk down the path, swapping out linked pathparts for their real
-  // values
-  function LOOP() {
-    // stop if scanned past end of path
-    if (pos >= p.length) {
-      if (cache) cache[original] = p;
-      return cb(null, p);
-    }
-
-    // find the next part
-    nextPartRe.lastIndex = pos;
-    var result = nextPartRe.exec(p);
-    previous = current;
-    current += result[0];
-    base = previous + result[1];
-    pos = nextPartRe.lastIndex;
-
-    // continue if not a symlink
-    if (knownHard[base] || (cache && cache[base] === base)) {
-      return process.nextTick(LOOP);
-    }
-
-    if (cache && Object.prototype.hasOwnProperty.call(cache, base)) {
-      // known symbolic link.  no need to stat again.
-      return gotResolvedLink(cache[base]);
-    }
-
-    return fs.lstat(base, gotStat);
-  }
-
-  function gotStat(err, stat) {
-    if (err) return cb(err);
-
-    // if not a symlink, skip to the next path part
-    if (!stat.isSymbolicLink()) {
-      knownHard[base] = true;
-      if (cache) cache[base] = base;
-      return process.nextTick(LOOP);
-    }
-
-    // stat & read the link if not read before
-    // call gotTarget as soon as the link target is known
-    // dev/ino always return 0 on windows, so skip the check.
-    if (!isWindows) {
-      var id = stat.dev.toString(32) + ':' + stat.ino.toString(32);
-      if (seenLinks.hasOwnProperty(id)) {
-        return gotTarget(null, seenLinks[id], base);
-      }
-    }
-    fs.stat(base, function(err) {
-      if (err) return cb(err);
-
-      fs.readlink(base, function(err, target) {
-        if (!isWindows) seenLinks[id] = target;
-        gotTarget(err, target);
-      });
-    });
-  }
-
-  function gotTarget(err, target, base) {
-    if (err) return cb(err);
-
-    var resolvedLink = pathModule.resolve(previous, target);
-    if (cache) cache[base] = resolvedLink;
-    gotResolvedLink(resolvedLink);
-  }
-
-  function gotResolvedLink(resolvedLink) {
-    // resolve the link, then start over
-    p = pathModule.resolve(resolvedLink, p.slice(pos));
-    start();
-  }
-};
-
-
-/***/ }),
-/* 272 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = globSync
-globSync.GlobSync = GlobSync
-
-var fs = __webpack_require__(5)
-var rp = __webpack_require__(140)
-var minimatch = __webpack_require__(82)
-var Minimatch = minimatch.Minimatch
-var Glob = __webpack_require__(99).Glob
-var util = __webpack_require__(3)
-var path = __webpack_require__(0)
-var assert = __webpack_require__(28)
-var isAbsolute = __webpack_require__(101)
-var common = __webpack_require__(141)
-var alphasort = common.alphasort
-var alphasorti = common.alphasorti
-var setopts = common.setopts
-var ownProp = common.ownProp
-var childrenIgnored = common.childrenIgnored
-var isIgnored = common.isIgnored
-
-function globSync (pattern, options) {
-  if (typeof options === 'function' || arguments.length === 3)
-    throw new TypeError('callback provided to sync glob\n'+
-                        'See: https://github.com/isaacs/node-glob/issues/167')
-
-  return new GlobSync(pattern, options).found
-}
-
-function GlobSync (pattern, options) {
-  if (!pattern)
-    throw new Error('must provide pattern')
-
-  if (typeof options === 'function' || arguments.length === 3)
-    throw new TypeError('callback provided to sync glob\n'+
-                        'See: https://github.com/isaacs/node-glob/issues/167')
-
-  if (!(this instanceof GlobSync))
-    return new GlobSync(pattern, options)
-
-  setopts(this, pattern, options)
-
-  if (this.noprocess)
-    return this
-
-  var n = this.minimatch.set.length
-  this.matches = new Array(n)
-  for (var i = 0; i < n; i ++) {
-    this._process(this.minimatch.set[i], i, false)
-  }
-  this._finish()
-}
-
-GlobSync.prototype._finish = function () {
-  assert(this instanceof GlobSync)
-  if (this.realpath) {
-    var self = this
-    this.matches.forEach(function (matchset, index) {
-      var set = self.matches[index] = Object.create(null)
-      for (var p in matchset) {
-        try {
-          p = self._makeAbs(p)
-          var real = rp.realpathSync(p, self.realpathCache)
-          set[real] = true
-        } catch (er) {
-          if (er.syscall === 'stat')
-            set[self._makeAbs(p)] = true
-          else
-            throw er
-        }
-      }
-    })
-  }
-  common.finish(this)
-}
-
-
-GlobSync.prototype._process = function (pattern, index, inGlobStar) {
-  assert(this instanceof GlobSync)
-
-  // Get the first [n] parts of pattern that are all strings.
-  var n = 0
-  while (typeof pattern[n] === 'string') {
-    n ++
-  }
-  // now n is the index of the first one that is *not* a string.
-
-  // See if there's anything else
-  var prefix
-  switch (n) {
-    // if not, then this is rather simple
-    case pattern.length:
-      this._processSimple(pattern.join('/'), index)
-      return
-
-    case 0:
-      // pattern *starts* with some non-trivial item.
-      // going to readdir(cwd), but not include the prefix in matches.
-      prefix = null
-      break
-
-    default:
-      // pattern has some string bits in the front.
-      // whatever it starts with, whether that's 'absolute' like /foo/bar,
-      // or 'relative' like '../baz'
-      prefix = pattern.slice(0, n).join('/')
-      break
-  }
-
-  var remain = pattern.slice(n)
-
-  // get the list of entries.
-  var read
-  if (prefix === null)
-    read = '.'
-  else if (isAbsolute(prefix) || isAbsolute(pattern.join('/'))) {
-    if (!prefix || !isAbsolute(prefix))
-      prefix = '/' + prefix
-    read = prefix
-  } else
-    read = prefix
-
-  var abs = this._makeAbs(read)
-
-  //if ignored, skip processing
-  if (childrenIgnored(this, read))
-    return
-
-  var isGlobStar = remain[0] === minimatch.GLOBSTAR
-  if (isGlobStar)
-    this._processGlobStar(prefix, read, abs, remain, index, inGlobStar)
-  else
-    this._processReaddir(prefix, read, abs, remain, index, inGlobStar)
-}
-
-
-GlobSync.prototype._processReaddir = function (prefix, read, abs, remain, index, inGlobStar) {
-  var entries = this._readdir(abs, inGlobStar)
-
-  // if the abs isn't a dir, then nothing can match!
-  if (!entries)
-    return
-
-  // It will only match dot entries if it starts with a dot, or if
-  // dot is set.  Stuff like @(.foo|.bar) isn't allowed.
-  var pn = remain[0]
-  var negate = !!this.minimatch.negate
-  var rawGlob = pn._glob
-  var dotOk = this.dot || rawGlob.charAt(0) === '.'
-
-  var matchedEntries = []
-  for (var i = 0; i < entries.length; i++) {
-    var e = entries[i]
-    if (e.charAt(0) !== '.' || dotOk) {
-      var m
-      if (negate && !prefix) {
-        m = !e.match(pn)
-      } else {
-        m = e.match(pn)
-      }
-      if (m)
-        matchedEntries.push(e)
-    }
-  }
-
-  var len = matchedEntries.length
-  // If there are no matched entries, then nothing matches.
-  if (len === 0)
-    return
-
-  // if this is the last remaining pattern bit, then no need for
-  // an additional stat *unless* the user has specified mark or
-  // stat explicitly.  We know they exist, since readdir returned
-  // them.
-
-  if (remain.length === 1 && !this.mark && !this.stat) {
-    if (!this.matches[index])
-      this.matches[index] = Object.create(null)
-
-    for (var i = 0; i < len; i ++) {
-      var e = matchedEntries[i]
-      if (prefix) {
-        if (prefix.slice(-1) !== '/')
-          e = prefix + '/' + e
-        else
-          e = prefix + e
-      }
-
-      if (e.charAt(0) === '/' && !this.nomount) {
-        e = path.join(this.root, e)
-      }
-      this._emitMatch(index, e)
-    }
-    // This was the last one, and no stats were needed
-    return
-  }
-
-  // now test all matched entries as stand-ins for that part
-  // of the pattern.
-  remain.shift()
-  for (var i = 0; i < len; i ++) {
-    var e = matchedEntries[i]
-    var newPattern
-    if (prefix)
-      newPattern = [prefix, e]
-    else
-      newPattern = [e]
-    this._process(newPattern.concat(remain), index, inGlobStar)
-  }
-}
-
-
-GlobSync.prototype._emitMatch = function (index, e) {
-  if (isIgnored(this, e))
-    return
-
-  var abs = this._makeAbs(e)
-
-  if (this.mark)
-    e = this._mark(e)
-
-  if (this.absolute) {
-    e = abs
-  }
-
-  if (this.matches[index][e])
-    return
-
-  if (this.nodir) {
-    var c = this.cache[abs]
-    if (c === 'DIR' || Array.isArray(c))
-      return
-  }
-
-  this.matches[index][e] = true
-
-  if (this.stat)
-    this._stat(e)
-}
-
-
-GlobSync.prototype._readdirInGlobStar = function (abs) {
-  // follow all symlinked directories forever
-  // just proceed as if this is a non-globstar situation
-  if (this.follow)
-    return this._readdir(abs, false)
-
-  var entries
-  var lstat
-  var stat
-  try {
-    lstat = fs.lstatSync(abs)
-  } catch (er) {
-    if (er.code === 'ENOENT') {
-      // lstat failed, doesn't exist
-      return null
-    }
-  }
-
-  var isSym = lstat && lstat.isSymbolicLink()
-  this.symlinks[abs] = isSym
-
-  // If it's not a symlink or a dir, then it's definitely a regular file.
-  // don't bother doing a readdir in that case.
-  if (!isSym && lstat && !lstat.isDirectory())
-    this.cache[abs] = 'FILE'
-  else
-    entries = this._readdir(abs, false)
-
-  return entries
-}
-
-GlobSync.prototype._readdir = function (abs, inGlobStar) {
-  var entries
-
-  if (inGlobStar && !ownProp(this.symlinks, abs))
-    return this._readdirInGlobStar(abs)
-
-  if (ownProp(this.cache, abs)) {
-    var c = this.cache[abs]
-    if (!c || c === 'FILE')
-      return null
-
-    if (Array.isArray(c))
-      return c
-  }
-
-  try {
-    return this._readdirEntries(abs, fs.readdirSync(abs))
-  } catch (er) {
-    this._readdirError(abs, er)
-    return null
-  }
-}
-
-GlobSync.prototype._readdirEntries = function (abs, entries) {
-  // if we haven't asked to stat everything, then just
-  // assume that everything in there exists, so we can avoid
-  // having to stat it a second time.
-  if (!this.mark && !this.stat) {
-    for (var i = 0; i < entries.length; i ++) {
-      var e = entries[i]
-      if (abs === '/')
-        e = abs + e
-      else
-        e = abs + '/' + e
-      this.cache[e] = true
-    }
-  }
-
-  this.cache[abs] = entries
-
-  // mark and cache dir-ness
-  return entries
-}
-
-GlobSync.prototype._readdirError = function (f, er) {
-  // handle errors, and cache the information
-  switch (er.code) {
-    case 'ENOTSUP': // https://github.com/isaacs/node-glob/issues/205
-    case 'ENOTDIR': // totally normal. means it *does* exist.
-      var abs = this._makeAbs(f)
-      this.cache[abs] = 'FILE'
-      if (abs === this.cwdAbs) {
-        var error = new Error(er.code + ' invalid cwd ' + this.cwd)
-        error.path = this.cwd
-        error.code = er.code
-        throw error
-      }
-      break
-
-    case 'ENOENT': // not terribly unusual
-    case 'ELOOP':
-    case 'ENAMETOOLONG':
-    case 'UNKNOWN':
-      this.cache[this._makeAbs(f)] = false
-      break
-
-    default: // some unusual error.  Treat as failure.
-      this.cache[this._makeAbs(f)] = false
-      if (this.strict)
-        throw er
-      if (!this.silent)
-        console.error('glob error', er)
-      break
-  }
-}
-
-GlobSync.prototype._processGlobStar = function (prefix, read, abs, remain, index, inGlobStar) {
-
-  var entries = this._readdir(abs, inGlobStar)
-
-  // no entries means not a dir, so it can never have matches
-  // foo.txt/** doesn't match foo.txt
-  if (!entries)
-    return
-
-  // test without the globstar, and with every child both below
-  // and replacing the globstar.
-  var remainWithoutGlobStar = remain.slice(1)
-  var gspref = prefix ? [ prefix ] : []
-  var noGlobStar = gspref.concat(remainWithoutGlobStar)
-
-  // the noGlobStar pattern exits the inGlobStar state
-  this._process(noGlobStar, index, false)
-
-  var len = entries.length
-  var isSym = this.symlinks[abs]
-
-  // If it's a symlink, and we're in a globstar, then stop
-  if (isSym && inGlobStar)
-    return
-
-  for (var i = 0; i < len; i++) {
-    var e = entries[i]
-    if (e.charAt(0) === '.' && !this.dot)
-      continue
-
-    // these two cases enter the inGlobStar state
-    var instead = gspref.concat(entries[i], remainWithoutGlobStar)
-    this._process(instead, index, true)
-
-    var below = gspref.concat(entries[i], remain)
-    this._process(below, index, true)
-  }
-}
-
-GlobSync.prototype._processSimple = function (prefix, index) {
-  // XXX review this.  Shouldn't it be doing the mounting etc
-  // before doing stat?  kinda weird?
-  var exists = this._stat(prefix)
-
-  if (!this.matches[index])
-    this.matches[index] = Object.create(null)
-
-  // If it doesn't exist, then just mark the lack of results
-  if (!exists)
-    return
-
-  if (prefix && isAbsolute(prefix) && !this.nomount) {
-    var trail = /[\/\\]$/.test(prefix)
-    if (prefix.charAt(0) === '/') {
-      prefix = path.join(this.root, prefix)
-    } else {
-      prefix = path.resolve(this.root, prefix)
-      if (trail)
-        prefix += '/'
-    }
-  }
-
-  if (process.platform === 'win32')
-    prefix = prefix.replace(/\\/g, '/')
-
-  // Mark this as a match
-  this._emitMatch(index, prefix)
-}
-
-// Returns either 'DIR', 'FILE', or false
-GlobSync.prototype._stat = function (f) {
-  var abs = this._makeAbs(f)
-  var needDir = f.slice(-1) === '/'
-
-  if (f.length > this.maxLength)
-    return false
-
-  if (!this.stat && ownProp(this.cache, abs)) {
-    var c = this.cache[abs]
-
-    if (Array.isArray(c))
-      c = 'DIR'
-
-    // It exists, but maybe not how we need it
-    if (!needDir || c === 'DIR')
-      return c
-
-    if (needDir && c === 'FILE')
-      return false
-
-    // otherwise we have to stat, because maybe c=true
-    // if we know it exists, but not what it is.
-  }
-
-  var exists
-  var stat = this.statCache[abs]
-  if (!stat) {
-    var lstat
-    try {
-      lstat = fs.lstatSync(abs)
-    } catch (er) {
-      if (er && (er.code === 'ENOENT' || er.code === 'ENOTDIR')) {
-        this.statCache[abs] = false
-        return false
-      }
-    }
-
-    if (lstat && lstat.isSymbolicLink()) {
-      try {
-        stat = fs.statSync(abs)
-      } catch (er) {
-        stat = lstat
-      }
-    } else {
-      stat = lstat
-    }
-  }
-
-  this.statCache[abs] = stat
-
-  var c = true
-  if (stat)
-    c = stat.isDirectory() ? 'DIR' : 'FILE'
-
-  this.cache[abs] = this.cache[abs] || c
-
-  if (needDir && c === 'FILE')
-    return false
-
-  return c
-}
-
-GlobSync.prototype._mark = function (p) {
-  return common.mark(this, p)
-}
-
-GlobSync.prototype._makeAbs = function (f) {
-  return common.makeAbs(this, f)
-}
-
-
-/***/ }),
-/* 273 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function (flag, argv) {
-	argv = argv || process.argv;
-
-	var terminatorPos = argv.indexOf('--');
-	var prefix = /^--/.test(flag) ? '' : '--';
-	var pos = argv.indexOf(prefix + flag);
-
-	return pos !== -1 && (terminatorPos !== -1 ? pos < terminatorPos : true);
-};
-
-
-/***/ }),
-/* 274 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var wrappy = __webpack_require__(161)
-var reqs = Object.create(null)
-var once = __webpack_require__(83)
-
-module.exports = wrappy(inflight)
-
-function inflight (key, cb) {
-  if (reqs[key]) {
-    reqs[key].push(cb)
-    return null
-  } else {
-    reqs[key] = [cb]
-    return makeres(key)
-  }
-}
-
-function makeres (key) {
-  return once(function RES () {
-    var cbs = reqs[key]
-    var len = cbs.length
-    var args = slice(arguments)
-
-    // XXX It's somewhat ambiguous whether a new callback added in this
-    // pass should be queued for later execution if something in the
-    // list of callbacks throws, or if it should just be discarded.
-    // However, it's such an edge case that it hardly matters, and either
-    // choice is likely as surprising as the other.
-    // As it happens, we do go ahead and schedule it for later execution.
-    try {
-      for (var i = 0; i < len; i++) {
-        cbs[i].apply(null, args)
-      }
-    } finally {
-      if (cbs.length > len) {
-        // added more in the interim.
-        // de-zalgo, just in case, but don't call again.
-        cbs.splice(0, len)
-        process.nextTick(function () {
-          RES.apply(null, args)
-        })
-      } else {
-        delete reqs[key]
-      }
-    }
-  })
-}
-
-function slice (args) {
-  var length = args.length
-  var array = []
-
-  for (var i = 0; i < length; i++) array[i] = args[i]
-  return array
-}
-
-
-/***/ }),
-/* 275 */
-/***/ (function(module, exports) {
-
-if (typeof Object.create === 'function') {
-  // implementation from standard node.js 'util' module
-  module.exports = function inherits(ctor, superCtor) {
-    ctor.super_ = superCtor
-    ctor.prototype = Object.create(superCtor.prototype, {
-      constructor: {
-        value: ctor,
-        enumerable: false,
-        writable: true,
-        configurable: true
-      }
-    });
-  };
-} else {
-  // old school shim for old browsers
-  module.exports = function inherits(ctor, superCtor) {
-    ctor.super_ = superCtor
-    var TempCtor = function () {}
-    TempCtor.prototype = superCtor.prototype
-    ctor.prototype = new TempCtor()
-    ctor.prototype.constructor = ctor
-  }
-}
-
-
-/***/ }),
-/* 276 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * Inquirer.js
- * A collection of common interactive command line user interfaces.
- */
-
-var inquirer = module.exports;
-
-/**
- * Client interfaces
- */
-
-inquirer.prompts = {};
-
-inquirer.Separator = __webpack_require__(175);
-
-inquirer.ui = {
-  BottomBar: __webpack_require__(695),
-  Prompt: __webpack_require__(696)
-};
-
-/**
- * Create a new self-contained prompt module.
- */
-inquirer.createPromptModule = function(opt) {
-  var promptModule = function(questions) {
-    var ui = new inquirer.ui.Prompt(promptModule.prompts, opt);
-    var promise = ui.run(questions);
-
-    // Monkey patch the UI on the promise object so
-    // that it remains publicly accessible.
-    promise.ui = ui;
-
-    return promise;
-  };
-  promptModule.prompts = {};
-
-  /**
-   * Register a prompt type
-   * @param {String} name     Prompt type name
-   * @param {Function} prompt Prompt constructor
-   * @return {inquirer}
-   */
-
-  promptModule.registerPrompt = function(name, prompt) {
-    promptModule.prompts[name] = prompt;
-    return this;
-  };
-
-  /**
-   * Register the defaults provider prompts
-   */
-
-  promptModule.restoreDefaultPrompts = function() {
-    this.registerPrompt('list', __webpack_require__(691));
-    this.registerPrompt('input', __webpack_require__(392));
-    this.registerPrompt('number', __webpack_require__(692));
-    this.registerPrompt('confirm', __webpack_require__(688));
-    this.registerPrompt('rawlist', __webpack_require__(694));
-    this.registerPrompt('expand', __webpack_require__(690));
-    this.registerPrompt('checkbox', __webpack_require__(687));
-    this.registerPrompt('password', __webpack_require__(693));
-    this.registerPrompt('editor', __webpack_require__(689));
-  };
-
-  promptModule.restoreDefaultPrompts();
-
-  return promptModule;
-};
-
-/**
- * Public CLI helper interface
- * @param  {Array|Object|Rx.Observable} questions - Questions settings array
- * @param  {Function} cb - Callback being passed the user answers
- * @return {inquirer.ui.Prompt}
- */
-
-inquirer.prompt = inquirer.createPromptModule();
-
-// Expose helper functions on the top level for easiest usage by common users
-inquirer.registerPrompt = function(name, prompt) {
-  inquirer.prompt.registerPrompt(name, prompt);
-};
-inquirer.restoreDefaultPrompts = function() {
-  inquirer.prompt.restoreDefaultPrompts();
-};
-
-
-/***/ }),
-/* 277 */
-/***/ (function(module, exports) {
-
-module.exports = [["0","\u0000",127,"€"],["8140","丂丄丅丆丏丒丗丟丠両丣並丩丮丯丱丳丵丷丼乀乁乂乄乆乊乑乕乗乚乛乢乣乤乥乧乨乪",5,"乲乴",9,"乿",6,"亇亊"],["8180","亐亖亗亙亜亝亞亣亪亯亰亱亴亶亷亸亹亼亽亾仈仌仏仐仒仚仛仜仠仢仦仧仩仭仮仯仱仴仸仹仺仼仾伀伂",6,"伋伌伒",4,"伜伝伡伣伨伩伬伭伮伱伳伵伷伹伻伾",4,"佄佅佇",5,"佒佔佖佡佢佦佨佪佫佭佮佱佲併佷佸佹佺佽侀侁侂侅來侇侊侌侎侐侒侓侕侖侘侙侚侜侞侟価侢"],["8240","侤侫侭侰",4,"侶",8,"俀俁係俆俇俈俉俋俌俍俒",4,"俙俛俠俢俤俥俧俫俬俰俲俴俵俶俷俹俻俼俽俿",11],["8280","個倎倐們倓倕倖倗倛倝倞倠倢倣値倧倫倯",10,"倻倽倿偀偁偂偄偅偆偉偊偋偍偐",4,"偖偗偘偙偛偝",7,"偦",5,"偭",8,"偸偹偺偼偽傁傂傃傄傆傇傉傊傋傌傎",20,"傤傦傪傫傭",4,"傳",6,"傼"],["8340","傽",17,"僐",5,"僗僘僙僛",10,"僨僩僪僫僯僰僱僲僴僶",4,"僼",9,"儈"],["8380","儉儊儌",5,"儓",13,"儢",28,"兂兇兊兌兎兏児兒兓兗兘兙兛兝",4,"兣兤兦內兩兪兯兲兺兾兿冃冄円冇冊冋冎冏冐冑冓冔冘冚冝冞冟冡冣冦",4,"冭冮冴冸冹冺冾冿凁凂凃凅凈凊凍凎凐凒",5],["8440","凘凙凚凜凞凟凢凣凥",5,"凬凮凱凲凴凷凾刄刅刉刋刌刏刐刓刔刕刜刞刟刡刢刣別刦刧刪刬刯刱刲刴刵刼刾剄",5,"剋剎剏剒剓剕剗剘"],["8480","剙剚剛剝剟剠剢剣剤剦剨剫剬剭剮剰剱剳",9,"剾劀劃",4,"劉",6,"劑劒劔",6,"劜劤劥劦劧劮劯劰労",9,"勀勁勂勄勅勆勈勊勌勍勎勏勑勓勔動勗務",5,"勠勡勢勣勥",10,"勱",7,"勻勼勽匁匂匃匄匇匉匊匋匌匎"],["8540","匑匒匓匔匘匛匜匞匟匢匤匥匧匨匩匫匬匭匯",9,"匼匽區卂卄卆卋卌卍卐協単卙卛卝卥卨卪卬卭卲卶卹卻卼卽卾厀厁厃厇厈厊厎厏"],["8580","厐",4,"厖厗厙厛厜厞厠厡厤厧厪厫厬厭厯",6,"厷厸厹厺厼厽厾叀參",4,"収叏叐叒叓叕叚叜叝叞叡叢叧叴叺叾叿吀吂吅吇吋吔吘吙吚吜吢吤吥吪吰吳吶吷吺吽吿呁呂呄呅呇呉呌呍呎呏呑呚呝",4,"呣呥呧呩",7,"呴呹呺呾呿咁咃咅咇咈咉咊咍咑咓咗咘咜咞咟咠咡"],["8640","咢咥咮咰咲咵咶咷咹咺咼咾哃哅哊哋哖哘哛哠",4,"哫哬哯哰哱哴",5,"哻哾唀唂唃唄唅唈唊",4,"唒唓唕",5,"唜唝唞唟唡唥唦"],["8680","唨唩唫唭唲唴唵唶唸唹唺唻唽啀啂啅啇啈啋",4,"啑啒啓啔啗",4,"啝啞啟啠啢啣啨啩啫啯",5,"啹啺啽啿喅喆喌喍喎喐喒喓喕喖喗喚喛喞喠",6,"喨",8,"喲喴営喸喺喼喿",4,"嗆嗇嗈嗊嗋嗎嗏嗐嗕嗗",4,"嗞嗠嗢嗧嗩嗭嗮嗰嗱嗴嗶嗸",4,"嗿嘂嘃嘄嘅"],["8740","嘆嘇嘊嘋嘍嘐",7,"嘙嘚嘜嘝嘠嘡嘢嘥嘦嘨嘩嘪嘫嘮嘯嘰嘳嘵嘷嘸嘺嘼嘽嘾噀",11,"噏",4,"噕噖噚噛噝",4],["8780","噣噥噦噧噭噮噯噰噲噳噴噵噷噸噹噺噽",7,"嚇",6,"嚐嚑嚒嚔",14,"嚤",10,"嚰",6,"嚸嚹嚺嚻嚽",12,"囋",8,"囕囖囘囙囜団囥",5,"囬囮囯囲図囶囷囸囻囼圀圁圂圅圇國",6],["8840","園",9,"圝圞圠圡圢圤圥圦圧圫圱圲圴",4,"圼圽圿坁坃坄坅坆坈坉坋坒",4,"坘坙坢坣坥坧坬坮坰坱坲坴坵坸坹坺坽坾坿垀"],["8880","垁垇垈垉垊垍",4,"垔",6,"垜垝垞垟垥垨垪垬垯垰垱垳垵垶垷垹",8,"埄",6,"埌埍埐埑埓埖埗埛埜埞埡埢埣埥",7,"埮埰埱埲埳埵埶執埻埼埾埿堁堃堄堅堈堉堊堌堎堏堐堒堓堔堖堗堘堚堛堜堝堟堢堣堥",4,"堫",4,"報堲堳場堶",7],["8940","堾",5,"塅",6,"塎塏塐塒塓塕塖塗塙",4,"塟",5,"塦",4,"塭",16,"塿墂墄墆墇墈墊墋墌"],["8980","墍",4,"墔",4,"墛墜墝墠",7,"墪",17,"墽墾墿壀壂壃壄壆",10,"壒壓壔壖",13,"壥",5,"壭壯壱売壴壵壷壸壺",7,"夃夅夆夈",4,"夎夐夑夒夓夗夘夛夝夞夠夡夢夣夦夨夬夰夲夳夵夶夻"],["8a40","夽夾夿奀奃奅奆奊奌奍奐奒奓奙奛",4,"奡奣奤奦",12,"奵奷奺奻奼奾奿妀妅妉妋妌妎妏妐妑妔妕妘妚妛妜妝妟妠妡妢妦"],["8a80","妧妬妭妰妱妳",5,"妺妼妽妿",6,"姇姈姉姌姍姎姏姕姖姙姛姞",4,"姤姦姧姩姪姫姭",11,"姺姼姽姾娀娂娊娋娍娎娏娐娒娔娕娖娗娙娚娛娝娞娡娢娤娦娧娨娪",6,"娳娵娷",4,"娽娾娿婁",4,"婇婈婋",9,"婖婗婘婙婛",5],["8b40","婡婣婤婥婦婨婩婫",8,"婸婹婻婼婽婾媀",17,"媓",6,"媜",13,"媫媬"],["8b80","媭",4,"媴媶媷媹",4,"媿嫀嫃",5,"嫊嫋嫍",4,"嫓嫕嫗嫙嫚嫛嫝嫞嫟嫢嫤嫥嫧嫨嫪嫬",4,"嫲",22,"嬊",11,"嬘",25,"嬳嬵嬶嬸",7,"孁",6],["8c40","孈",7,"孒孖孞孠孡孧孨孫孭孮孯孲孴孶孷學孹孻孼孾孿宂宆宊宍宎宐宑宒宔宖実宧宨宩宬宭宮宯宱宲宷宺宻宼寀寁寃寈寉寊寋寍寎寏"],["8c80","寑寔",8,"寠寢寣實寧審",4,"寯寱",6,"寽対尀専尃尅將專尋尌對導尐尒尓尗尙尛尞尟尠尡尣尦尨尩尪尫尭尮尯尰尲尳尵尶尷屃屄屆屇屌屍屒屓屔屖屗屘屚屛屜屝屟屢層屧",6,"屰屲",6,"屻屼屽屾岀岃",4,"岉岊岋岎岏岒岓岕岝",4,"岤",4],["8d40","岪岮岯岰岲岴岶岹岺岻岼岾峀峂峃峅",5,"峌",5,"峓",5,"峚",6,"峢峣峧峩峫峬峮峯峱",9,"峼",4],["8d80","崁崄崅崈",5,"崏",4,"崕崗崘崙崚崜崝崟",4,"崥崨崪崫崬崯",4,"崵",7,"崿",7,"嵈嵉嵍",10,"嵙嵚嵜嵞",10,"嵪嵭嵮嵰嵱嵲嵳嵵",12,"嶃",21,"嶚嶛嶜嶞嶟嶠"],["8e40","嶡",21,"嶸",12,"巆",6,"巎",12,"巜巟巠巣巤巪巬巭"],["8e80","巰巵巶巸",4,"巿帀帄帇帉帊帋帍帎帒帓帗帞",7,"帨",4,"帯帰帲",4,"帹帺帾帿幀幁幃幆",5,"幍",6,"幖",4,"幜幝幟幠幣",14,"幵幷幹幾庁庂広庅庈庉庌庍庎庒庘庛庝庡庢庣庤庨",4,"庮",4,"庴庺庻庼庽庿",6],["8f40","廆廇廈廋",5,"廔廕廗廘廙廚廜",11,"廩廫",8,"廵廸廹廻廼廽弅弆弇弉弌弍弎弐弒弔弖弙弚弜弝弞弡弢弣弤"],["8f80","弨弫弬弮弰弲",6,"弻弽弾弿彁",14,"彑彔彙彚彛彜彞彟彠彣彥彧彨彫彮彯彲彴彵彶彸彺彽彾彿徃徆徍徎徏徑従徔徖徚徛徝從徟徠徢",5,"復徫徬徯",5,"徶徸徹徺徻徾",4,"忇忈忊忋忎忓忔忕忚忛応忞忟忢忣忥忦忨忩忬忯忰忲忳忴忶忷忹忺忼怇"],["9040","怈怉怋怌怐怑怓怗怘怚怞怟怢怣怤怬怭怮怰",4,"怶",4,"怽怾恀恄",6,"恌恎恏恑恓恔恖恗恘恛恜恞恟恠恡恥恦恮恱恲恴恵恷恾悀"],["9080","悁悂悅悆悇悈悊悋悎悏悐悑悓悕悗悘悙悜悞悡悢悤悥悧悩悪悮悰悳悵悶悷悹悺悽",7,"惇惈惉惌",4,"惒惓惔惖惗惙惛惞惡",4,"惪惱惲惵惷惸惻",4,"愂愃愄愅愇愊愋愌愐",4,"愖愗愘愙愛愜愝愞愡愢愥愨愩愪愬",18,"慀",6],["9140","慇慉態慍慏慐慒慓慔慖",6,"慞慟慠慡慣慤慥慦慩",6,"慱慲慳慴慶慸",18,"憌憍憏",4,"憕"],["9180","憖",6,"憞",8,"憪憫憭",9,"憸",5,"憿懀懁懃",4,"應懌",4,"懓懕",16,"懧",13,"懶",8,"戀",5,"戇戉戓戔戙戜戝戞戠戣戦戧戨戩戫戭戯戰戱戲戵戶戸",4,"扂扄扅扆扊"],["9240","扏扐払扖扗扙扚扜",6,"扤扥扨扱扲扴扵扷扸扺扻扽抁抂抃抅抆抇抈抋",5,"抔抙抜抝択抣抦抧抩抪抭抮抯抰抲抳抴抶抷抸抺抾拀拁"],["9280","拃拋拏拑拕拝拞拠拡拤拪拫拰拲拵拸拹拺拻挀挃挄挅挆挊挋挌挍挏挐挒挓挔挕挗挘挙挜挦挧挩挬挭挮挰挱挳",5,"挻挼挾挿捀捁捄捇捈捊捑捒捓捔捖",7,"捠捤捥捦捨捪捫捬捯捰捲捳捴捵捸捹捼捽捾捿掁掃掄掅掆掋掍掑掓掔掕掗掙",6,"採掤掦掫掯掱掲掵掶掹掻掽掿揀"],["9340","揁揂揃揅揇揈揊揋揌揑揓揔揕揗",6,"揟揢揤",4,"揫揬揮揯揰揱揳揵揷揹揺揻揼揾搃搄搆",4,"損搎搑搒搕",5,"搝搟搢搣搤"],["9380","搥搧搨搩搫搮",5,"搵",4,"搻搼搾摀摂摃摉摋",6,"摓摕摖摗摙",4,"摟",7,"摨摪摫摬摮",9,"摻",6,"撃撆撈",8,"撓撔撗撘撚撛撜撝撟",4,"撥撦撧撨撪撫撯撱撲撳撴撶撹撻撽撾撿擁擃擄擆",6,"擏擑擓擔擕擖擙據"],["9440","擛擜擝擟擠擡擣擥擧",24,"攁",7,"攊",7,"攓",4,"攙",8],["9480","攢攣攤攦",4,"攬攭攰攱攲攳攷攺攼攽敀",4,"敆敇敊敋敍敎敐敒敓敔敗敘敚敜敟敠敡敤敥敧敨敩敪敭敮敯敱敳敵敶數",14,"斈斉斊斍斎斏斒斔斕斖斘斚斝斞斠斢斣斦斨斪斬斮斱",7,"斺斻斾斿旀旂旇旈旉旊旍旐旑旓旔旕旘",7,"旡旣旤旪旫"],["9540","旲旳旴旵旸旹旻",4,"昁昄昅昇昈昉昋昍昐昑昒昖昗昘昚昛昜昞昡昢昣昤昦昩昪昫昬昮昰昲昳昷",4,"昽昿晀時晄",6,"晍晎晐晑晘"],["9580","晙晛晜晝晞晠晢晣晥晧晩",4,"晱晲晳晵晸晹晻晼晽晿暀暁暃暅暆暈暉暊暋暍暎暏暐暒暓暔暕暘",4,"暞",8,"暩",4,"暯",4,"暵暶暷暸暺暻暼暽暿",25,"曚曞",7,"曧曨曪",5,"曱曵曶書曺曻曽朁朂會"],["9640","朄朅朆朇朌朎朏朑朒朓朖朘朙朚朜朞朠",5,"朧朩朮朰朲朳朶朷朸朹朻朼朾朿杁杄杅杇杊杋杍杒杔杕杗",4,"杝杢杣杤杦杧杫杬杮東杴杶"],["9680","杸杹杺杻杽枀枂枃枅枆枈枊枌枍枎枏枑枒枓枔枖枙枛枟枠枡枤枦枩枬枮枱枲枴枹",7,"柂柅",9,"柕柖柗柛柟柡柣柤柦柧柨柪柫柭柮柲柵",7,"柾栁栂栃栄栆栍栐栒栔栕栘",4,"栞栟栠栢",6,"栫",6,"栴栵栶栺栻栿桇桋桍桏桒桖",5],["9740","桜桝桞桟桪桬",7,"桵桸",8,"梂梄梇",7,"梐梑梒梔梕梖梘",9,"梣梤梥梩梪梫梬梮梱梲梴梶梷梸"],["9780","梹",6,"棁棃",5,"棊棌棎棏棐棑棓棔棖棗棙棛",4,"棡棢棤",9,"棯棲棳棴棶棷棸棻棽棾棿椀椂椃椄椆",4,"椌椏椑椓",11,"椡椢椣椥",7,"椮椯椱椲椳椵椶椷椸椺椻椼椾楀楁楃",16,"楕楖楘楙楛楜楟"],["9840","楡楢楤楥楧楨楩楪楬業楯楰楲",4,"楺楻楽楾楿榁榃榅榊榋榌榎",5,"榖榗榙榚榝",9,"榩榪榬榮榯榰榲榳榵榶榸榹榺榼榽"],["9880","榾榿槀槂",7,"構槍槏槑槒槓槕",5,"槜槝槞槡",11,"槮槯槰槱槳",9,"槾樀",9,"樋",11,"標",5,"樠樢",5,"権樫樬樭樮樰樲樳樴樶",6,"樿",4,"橅橆橈",7,"橑",6,"橚"],["9940","橜",4,"橢橣橤橦",10,"橲",6,"橺橻橽橾橿檁檂檃檅",8,"檏檒",4,"檘",7,"檡",5],["9980","檧檨檪檭",114,"欥欦欨",6],["9a40","欯欰欱欳欴欵欶欸欻欼欽欿歀歁歂歄歅歈歊歋歍",11,"歚",7,"歨歩歫",13,"歺歽歾歿殀殅殈"],["9a80","殌殎殏殐殑殔殕殗殘殙殜",4,"殢",7,"殫",7,"殶殸",6,"毀毃毄毆",4,"毌毎毐毑毘毚毜",4,"毢",7,"毬毭毮毰毱毲毴毶毷毸毺毻毼毾",6,"氈",4,"氎氒気氜氝氞氠氣氥氫氬氭氱氳氶氷氹氺氻氼氾氿汃汄汅汈汋",4,"汑汒汓汖汘"],["9b40","汙汚汢汣汥汦汧汫",4,"汱汳汵汷汸決汻汼汿沀沄沇沊沋沍沎沑沒沕沖沗沘沚沜沝沞沠沢沨沬沯沰沴沵沶沷沺泀況泂泃泆泇泈泋泍泎泏泑泒泘"],["9b80","泙泚泜泝泟泤泦泧泩泬泭泲泴泹泿洀洂洃洅洆洈洉洊洍洏洐洑洓洔洕洖洘洜洝洟",5,"洦洨洩洬洭洯洰洴洶洷洸洺洿浀浂浄浉浌浐浕浖浗浘浛浝浟浡浢浤浥浧浨浫浬浭浰浱浲浳浵浶浹浺浻浽",4,"涃涄涆涇涊涋涍涏涐涒涖",4,"涜涢涥涬涭涰涱涳涴涶涷涹",5,"淁淂淃淈淉淊"],["9c40","淍淎淏淐淒淓淔淕淗淚淛淜淟淢淣淥淧淨淩淪淭淯淰淲淴淵淶淸淺淽",7,"渆渇済渉渋渏渒渓渕渘渙減渜渞渟渢渦渧渨渪測渮渰渱渳渵"],["9c80","渶渷渹渻",7,"湅",7,"湏湐湑湒湕湗湙湚湜湝湞湠",10,"湬湭湯",14,"満溁溂溄溇溈溊",4,"溑",6,"溙溚溛溝溞溠溡溣溤溦溨溩溫溬溭溮溰溳溵溸溹溼溾溿滀滃滄滅滆滈滉滊滌滍滎滐滒滖滘滙滛滜滝滣滧滪",5],["9d40","滰滱滲滳滵滶滷滸滺",7,"漃漄漅漇漈漊",4,"漐漑漒漖",9,"漡漢漣漥漦漧漨漬漮漰漲漴漵漷",6,"漿潀潁潂"],["9d80","潃潄潅潈潉潊潌潎",9,"潙潚潛潝潟潠潡潣潤潥潧",5,"潯潰潱潳潵潶潷潹潻潽",6,"澅澆澇澊澋澏",12,"澝澞澟澠澢",4,"澨",10,"澴澵澷澸澺",5,"濁濃",5,"濊",6,"濓",10,"濟濢濣濤濥"],["9e40","濦",7,"濰",32,"瀒",7,"瀜",6,"瀤",6],["9e80","瀫",9,"瀶瀷瀸瀺",17,"灍灎灐",13,"灟",11,"灮灱灲灳灴灷灹灺灻災炁炂炃炄炆炇炈炋炌炍炏炐炑炓炗炘炚炛炞",12,"炰炲炴炵炶為炾炿烄烅烆烇烉烋",12,"烚"],["9f40","烜烝烞烠烡烢烣烥烪烮烰",6,"烸烺烻烼烾",10,"焋",4,"焑焒焔焗焛",10,"焧",7,"焲焳焴"],["9f80","焵焷",13,"煆煇煈煉煋煍煏",12,"煝煟",4,"煥煩",4,"煯煰煱煴煵煶煷煹煻煼煾",5,"熅",4,"熋熌熍熎熐熑熒熓熕熖熗熚",4,"熡",6,"熩熪熫熭",5,"熴熶熷熸熺",8,"燄",9,"燏",4],["a040","燖",9,"燡燢燣燤燦燨",5,"燯",9,"燺",11,"爇",19],["a080","爛爜爞",9,"爩爫爭爮爯爲爳爴爺爼爾牀",6,"牉牊牋牎牏牐牑牓牔牕牗牘牚牜牞牠牣牤牥牨牪牫牬牭牰牱牳牴牶牷牸牻牼牽犂犃犅",4,"犌犎犐犑犓",11,"犠",11,"犮犱犲犳犵犺",6,"狅狆狇狉狊狋狌狏狑狓狔狕狖狘狚狛"],["a1a1","　、。·ˉˇ¨〃々—～‖…‘’“”〔〕〈",7,"〖〗【】±×÷∶∧∨∑∏∪∩∈∷√⊥∥∠⌒⊙∫∮≡≌≈∽∝≠≮≯≤≥∞∵∴♂♀°′″℃＄¤￠￡‰§№☆★○●◎◇◆□■△▲※→←↑↓〓"],["a2a1","ⅰ",9],["a2b1","⒈",19,"⑴",19,"①",9],["a2e5","㈠",9],["a2f1","Ⅰ",11],["a3a1","！＂＃￥％",88,"￣"],["a4a1","ぁ",82],["a5a1","ァ",85],["a6a1","Α",16,"Σ",6],["a6c1","α",16,"σ",6],["a6e0","︵︶︹︺︿﹀︽︾﹁﹂﹃﹄"],["a6ee","︻︼︷︸︱"],["a6f4","︳︴"],["a7a1","А",5,"ЁЖ",25],["a7d1","а",5,"ёж",25],["a840","ˊˋ˙–―‥‵℅℉↖↗↘↙∕∟∣≒≦≧⊿═",35,"▁",6],["a880","█",7,"▓▔▕▼▽◢◣◤◥☉⊕〒〝〞"],["a8a1","āáǎàēéěèīíǐìōóǒòūúǔùǖǘǚǜüêɑ"],["a8bd","ńň"],["a8c0","ɡ"],["a8c5","ㄅ",36],["a940","〡",8,"㊣㎎㎏㎜㎝㎞㎡㏄㏎㏑㏒㏕︰￢￤"],["a959","℡㈱"],["a95c","‐"],["a960","ー゛゜ヽヾ〆ゝゞ﹉",9,"﹔﹕﹖﹗﹙",8],["a980","﹢",4,"﹨﹩﹪﹫"],["a996","〇"],["a9a4","─",75],["aa40","狜狝狟狢",5,"狪狫狵狶狹狽狾狿猀猂猄",5,"猋猌猍猏猐猑猒猔猘猙猚猟猠猣猤猦猧猨猭猯猰猲猳猵猶猺猻猼猽獀",8],["aa80","獉獊獋獌獎獏獑獓獔獕獖獘",7,"獡",10,"獮獰獱"],["ab40","獲",11,"獿",4,"玅玆玈玊玌玍玏玐玒玓玔玕玗玘玙玚玜玝玞玠玡玣",5,"玪玬玭玱玴玵玶玸玹玼玽玾玿珁珃",4],["ab80","珋珌珎珒",6,"珚珛珜珝珟珡珢珣珤珦珨珪珫珬珮珯珰珱珳",4],["ac40","珸",10,"琄琇琈琋琌琍琎琑",8,"琜",5,"琣琤琧琩琫琭琯琱琲琷",4,"琽琾琿瑀瑂",11],["ac80","瑎",6,"瑖瑘瑝瑠",12,"瑮瑯瑱",4,"瑸瑹瑺"],["ad40","瑻瑼瑽瑿璂璄璅璆璈璉璊璌璍璏璑",10,"璝璟",7,"璪",15,"璻",12],["ad80","瓈",9,"瓓",8,"瓝瓟瓡瓥瓧",6,"瓰瓱瓲"],["ae40","瓳瓵瓸",6,"甀甁甂甃甅",7,"甎甐甒甔甕甖甗甛甝甞甠",4,"甦甧甪甮甴甶甹甼甽甿畁畂畃畄畆畇畉畊畍畐畑畒畓畕畖畗畘"],["ae80","畝",7,"畧畨畩畫",6,"畳畵當畷畺",4,"疀疁疂疄疅疇"],["af40","疈疉疊疌疍疎疐疓疕疘疛疜疞疢疦",4,"疭疶疷疺疻疿痀痁痆痋痌痎痏痐痑痓痗痙痚痜痝痟痠痡痥痩痬痭痮痯痲痳痵痶痷痸痺痻痽痾瘂瘄瘆瘇"],["af80","瘈瘉瘋瘍瘎瘏瘑瘒瘓瘔瘖瘚瘜瘝瘞瘡瘣瘧瘨瘬瘮瘯瘱瘲瘶瘷瘹瘺瘻瘽癁療癄"],["b040","癅",6,"癎",5,"癕癗",4,"癝癟癠癡癢癤",6,"癬癭癮癰",7,"癹発發癿皀皁皃皅皉皊皌皍皏皐皒皔皕皗皘皚皛"],["b080","皜",7,"皥",8,"皯皰皳皵",9,"盀盁盃啊阿埃挨哎唉哀皑癌蔼矮艾碍爱隘鞍氨安俺按暗岸胺案肮昂盎凹敖熬翱袄傲奥懊澳芭捌扒叭吧笆八疤巴拔跋靶把耙坝霸罢爸白柏百摆佰败拜稗斑班搬扳般颁板版扮拌伴瓣半办绊邦帮梆榜膀绑棒磅蚌镑傍谤苞胞包褒剥"],["b140","盄盇盉盋盌盓盕盙盚盜盝盞盠",4,"盦",7,"盰盳盵盶盷盺盻盽盿眀眂眃眅眆眊県眎",10,"眛眜眝眞眡眣眤眥眧眪眫"],["b180","眬眮眰",4,"眹眻眽眾眿睂睄睅睆睈",7,"睒",7,"睜薄雹保堡饱宝抱报暴豹鲍爆杯碑悲卑北辈背贝钡倍狈备惫焙被奔苯本笨崩绷甭泵蹦迸逼鼻比鄙笔彼碧蓖蔽毕毙毖币庇痹闭敝弊必辟壁臂避陛鞭边编贬扁便变卞辨辩辫遍标彪膘表鳖憋别瘪彬斌濒滨宾摈兵冰柄丙秉饼炳"],["b240","睝睞睟睠睤睧睩睪睭",11,"睺睻睼瞁瞂瞃瞆",5,"瞏瞐瞓",11,"瞡瞣瞤瞦瞨瞫瞭瞮瞯瞱瞲瞴瞶",4],["b280","瞼瞾矀",12,"矎",8,"矘矙矚矝",4,"矤病并玻菠播拨钵波博勃搏铂箔伯帛舶脖膊渤泊驳捕卜哺补埠不布步簿部怖擦猜裁材才财睬踩采彩菜蔡餐参蚕残惭惨灿苍舱仓沧藏操糙槽曹草厕策侧册测层蹭插叉茬茶查碴搽察岔差诧拆柴豺搀掺蝉馋谗缠铲产阐颤昌猖"],["b340","矦矨矪矯矰矱矲矴矵矷矹矺矻矼砃",5,"砊砋砎砏砐砓砕砙砛砞砠砡砢砤砨砪砫砮砯砱砲砳砵砶砽砿硁硂硃硄硆硈硉硊硋硍硏硑硓硔硘硙硚"],["b380","硛硜硞",11,"硯",7,"硸硹硺硻硽",6,"场尝常长偿肠厂敞畅唱倡超抄钞朝嘲潮巢吵炒车扯撤掣彻澈郴臣辰尘晨忱沉陈趁衬撑称城橙成呈乘程惩澄诚承逞骋秤吃痴持匙池迟弛驰耻齿侈尺赤翅斥炽充冲虫崇宠抽酬畴踌稠愁筹仇绸瞅丑臭初出橱厨躇锄雏滁除楚"],["b440","碄碅碆碈碊碋碏碐碒碔碕碖碙碝碞碠碢碤碦碨",7,"碵碶碷碸確碻碼碽碿磀磂磃磄磆磇磈磌磍磎磏磑磒磓磖磗磘磚",9],["b480","磤磥磦磧磩磪磫磭",4,"磳磵磶磸磹磻",5,"礂礃礄礆",6,"础储矗搐触处揣川穿椽传船喘串疮窗幢床闯创吹炊捶锤垂春椿醇唇淳纯蠢戳绰疵茨磁雌辞慈瓷词此刺赐次聪葱囱匆从丛凑粗醋簇促蹿篡窜摧崔催脆瘁粹淬翠村存寸磋撮搓措挫错搭达答瘩打大呆歹傣戴带殆代贷袋待逮"],["b540","礍",5,"礔",9,"礟",4,"礥",14,"礵",4,"礽礿祂祃祄祅祇祊",8,"祔祕祘祙祡祣"],["b580","祤祦祩祪祫祬祮祰",6,"祹祻",4,"禂禃禆禇禈禉禋禌禍禎禐禑禒怠耽担丹单郸掸胆旦氮但惮淡诞弹蛋当挡党荡档刀捣蹈倒岛祷导到稻悼道盗德得的蹬灯登等瞪凳邓堤低滴迪敌笛狄涤翟嫡抵底地蒂第帝弟递缔颠掂滇碘点典靛垫电佃甸店惦奠淀殿碉叼雕凋刁掉吊钓调跌爹碟蝶迭谍叠"],["b640","禓",6,"禛",11,"禨",10,"禴",4,"禼禿秂秄秅秇秈秊秌秎秏秐秓秔秖秗秙",5,"秠秡秢秥秨秪"],["b680","秬秮秱",6,"秹秺秼秾秿稁稄稅稇稈稉稊稌稏",4,"稕稖稘稙稛稜丁盯叮钉顶鼎锭定订丢东冬董懂动栋侗恫冻洞兜抖斗陡豆逗痘都督毒犊独读堵睹赌杜镀肚度渡妒端短锻段断缎堆兑队对墩吨蹲敦顿囤钝盾遁掇哆多夺垛躲朵跺舵剁惰堕蛾峨鹅俄额讹娥恶厄扼遏鄂饿恩而儿耳尔饵洱二"],["b740","稝稟稡稢稤",14,"稴稵稶稸稺稾穀",5,"穇",9,"穒",4,"穘",16],["b780","穩",6,"穱穲穳穵穻穼穽穾窂窅窇窉窊窋窌窎窏窐窓窔窙窚窛窞窡窢贰发罚筏伐乏阀法珐藩帆番翻樊矾钒繁凡烦反返范贩犯饭泛坊芳方肪房防妨仿访纺放菲非啡飞肥匪诽吠肺废沸费芬酚吩氛分纷坟焚汾粉奋份忿愤粪丰封枫蜂峰锋风疯烽逢冯缝讽奉凤佛否夫敷肤孵扶拂辐幅氟符伏俘服"],["b840","窣窤窧窩窪窫窮",4,"窴",10,"竀",10,"竌",9,"竗竘竚竛竜竝竡竢竤竧",5,"竮竰竱竲竳"],["b880","竴",4,"竻竼竾笀笁笂笅笇笉笌笍笎笐笒笓笖笗笘笚笜笝笟笡笢笣笧笩笭浮涪福袱弗甫抚辅俯釜斧脯腑府腐赴副覆赋复傅付阜父腹负富讣附妇缚咐噶嘎该改概钙盖溉干甘杆柑竿肝赶感秆敢赣冈刚钢缸肛纲岗港杠篙皋高膏羔糕搞镐稿告哥歌搁戈鸽胳疙割革葛格蛤阁隔铬个各给根跟耕更庚羹"],["b940","笯笰笲笴笵笶笷笹笻笽笿",5,"筆筈筊筍筎筓筕筗筙筜筞筟筡筣",10,"筯筰筳筴筶筸筺筼筽筿箁箂箃箄箆",6,"箎箏"],["b980","箑箒箓箖箘箙箚箛箞箟箠箣箤箥箮箯箰箲箳箵箶箷箹",7,"篂篃範埂耿梗工攻功恭龚供躬公宫弓巩汞拱贡共钩勾沟苟狗垢构购够辜菇咕箍估沽孤姑鼓古蛊骨谷股故顾固雇刮瓜剐寡挂褂乖拐怪棺关官冠观管馆罐惯灌贯光广逛瑰规圭硅归龟闺轨鬼诡癸桂柜跪贵刽辊滚棍锅郭国果裹过哈"],["ba40","篅篈築篊篋篍篎篏篐篒篔",4,"篛篜篞篟篠篢篣篤篧篨篩篫篬篭篯篰篲",4,"篸篹篺篻篽篿",7,"簈簉簊簍簎簐",5,"簗簘簙"],["ba80","簚",4,"簠",5,"簨簩簫",12,"簹",5,"籂骸孩海氦亥害骇酣憨邯韩含涵寒函喊罕翰撼捍旱憾悍焊汗汉夯杭航壕嚎豪毫郝好耗号浩呵喝荷菏核禾和何合盒貉阂河涸赫褐鹤贺嘿黑痕很狠恨哼亨横衡恒轰哄烘虹鸿洪宏弘红喉侯猴吼厚候后呼乎忽瑚壶葫胡蝴狐糊湖"],["bb40","籃",9,"籎",36,"籵",5,"籾",9],["bb80","粈粊",6,"粓粔粖粙粚粛粠粡粣粦粧粨粩粫粬粭粯粰粴",4,"粺粻弧虎唬护互沪户花哗华猾滑画划化话槐徊怀淮坏欢环桓还缓换患唤痪豢焕涣宦幻荒慌黄磺蝗簧皇凰惶煌晃幌恍谎灰挥辉徽恢蛔回毁悔慧卉惠晦贿秽会烩汇讳诲绘荤昏婚魂浑混豁活伙火获或惑霍货祸击圾基机畸稽积箕"],["bc40","粿糀糂糃糄糆糉糋糎",6,"糘糚糛糝糞糡",6,"糩",5,"糰",7,"糹糺糼",13,"紋",5],["bc80","紑",14,"紡紣紤紥紦紨紩紪紬紭紮細",6,"肌饥迹激讥鸡姬绩缉吉极棘辑籍集及急疾汲即嫉级挤几脊己蓟技冀季伎祭剂悸济寄寂计记既忌际妓继纪嘉枷夹佳家加荚颊贾甲钾假稼价架驾嫁歼监坚尖笺间煎兼肩艰奸缄茧检柬碱硷拣捡简俭剪减荐槛鉴践贱见键箭件"],["bd40","紷",54,"絯",7],["bd80","絸",32,"健舰剑饯渐溅涧建僵姜将浆江疆蒋桨奖讲匠酱降蕉椒礁焦胶交郊浇骄娇嚼搅铰矫侥脚狡角饺缴绞剿教酵轿较叫窖揭接皆秸街阶截劫节桔杰捷睫竭洁结解姐戒藉芥界借介疥诫届巾筋斤金今津襟紧锦仅谨进靳晋禁近烬浸"],["be40","継",12,"綧",6,"綯",42],["be80","線",32,"尽劲荆兢茎睛晶鲸京惊精粳经井警景颈静境敬镜径痉靖竟竞净炯窘揪究纠玖韭久灸九酒厩救旧臼舅咎就疚鞠拘狙疽居驹菊局咀矩举沮聚拒据巨具距踞锯俱句惧炬剧捐鹃娟倦眷卷绢撅攫抉掘倔爵觉决诀绝均菌钧军君峻"],["bf40","緻",62],["bf80","縺縼",4,"繂",4,"繈",21,"俊竣浚郡骏喀咖卡咯开揩楷凯慨刊堪勘坎砍看康慷糠扛抗亢炕考拷烤靠坷苛柯棵磕颗科壳咳可渴克刻客课肯啃垦恳坑吭空恐孔控抠口扣寇枯哭窟苦酷库裤夸垮挎跨胯块筷侩快宽款匡筐狂框矿眶旷况亏盔岿窥葵奎魁傀"],["c040","繞",35,"纃",23,"纜纝纞"],["c080","纮纴纻纼绖绤绬绹缊缐缞缷缹缻",6,"罃罆",9,"罒罓馈愧溃坤昆捆困括扩廓阔垃拉喇蜡腊辣啦莱来赖蓝婪栏拦篮阑兰澜谰揽览懒缆烂滥琅榔狼廊郎朗浪捞劳牢老佬姥酪烙涝勒乐雷镭蕾磊累儡垒擂肋类泪棱楞冷厘梨犁黎篱狸离漓理李里鲤礼莉荔吏栗丽厉励砾历利傈例俐"],["c140","罖罙罛罜罝罞罠罣",4,"罫罬罭罯罰罳罵罶罷罸罺罻罼罽罿羀羂",7,"羋羍羏",4,"羕",4,"羛羜羠羢羣羥羦羨",6,"羱"],["c180","羳",4,"羺羻羾翀翂翃翄翆翇翈翉翋翍翏",4,"翖翗翙",5,"翢翣痢立粒沥隶力璃哩俩联莲连镰廉怜涟帘敛脸链恋炼练粮凉梁粱良两辆量晾亮谅撩聊僚疗燎寥辽潦了撂镣廖料列裂烈劣猎琳林磷霖临邻鳞淋凛赁吝拎玲菱零龄铃伶羚凌灵陵岭领另令溜琉榴硫馏留刘瘤流柳六龙聋咙笼窿"],["c240","翤翧翨翪翫翬翭翯翲翴",6,"翽翾翿耂耇耈耉耊耎耏耑耓耚耛耝耞耟耡耣耤耫",5,"耲耴耹耺耼耾聀聁聄聅聇聈聉聎聏聐聑聓聕聖聗"],["c280","聙聛",13,"聫",5,"聲",11,"隆垄拢陇楼娄搂篓漏陋芦卢颅庐炉掳卤虏鲁麓碌露路赂鹿潞禄录陆戮驴吕铝侣旅履屡缕虑氯律率滤绿峦挛孪滦卵乱掠略抡轮伦仑沦纶论萝螺罗逻锣箩骡裸落洛骆络妈麻玛码蚂马骂嘛吗埋买麦卖迈脉瞒馒蛮满蔓曼慢漫"],["c340","聾肁肂肅肈肊肍",5,"肔肕肗肙肞肣肦肧肨肬肰肳肵肶肸肹肻胅胇",4,"胏",6,"胘胟胠胢胣胦胮胵胷胹胻胾胿脀脁脃脄脅脇脈脋"],["c380","脌脕脗脙脛脜脝脟",12,"脭脮脰脳脴脵脷脹",4,"脿谩芒茫盲氓忙莽猫茅锚毛矛铆卯茂冒帽貌贸么玫枚梅酶霉煤没眉媒镁每美昧寐妹媚门闷们萌蒙檬盟锰猛梦孟眯醚靡糜迷谜弥米秘觅泌蜜密幂棉眠绵冕免勉娩缅面苗描瞄藐秒渺庙妙蔑灭民抿皿敏悯闽明螟鸣铭名命谬摸"],["c440","腀",5,"腇腉腍腎腏腒腖腗腘腛",4,"腡腢腣腤腦腨腪腫腬腯腲腳腵腶腷腸膁膃",4,"膉膋膌膍膎膐膒",5,"膙膚膞",4,"膤膥"],["c480","膧膩膫",7,"膴",5,"膼膽膾膿臄臅臇臈臉臋臍",6,"摹蘑模膜磨摩魔抹末莫墨默沫漠寞陌谋牟某拇牡亩姆母墓暮幕募慕木目睦牧穆拿哪呐钠那娜纳氖乃奶耐奈南男难囊挠脑恼闹淖呢馁内嫩能妮霓倪泥尼拟你匿腻逆溺蔫拈年碾撵捻念娘酿鸟尿捏聂孽啮镊镍涅您柠狞凝宁"],["c540","臔",14,"臤臥臦臨臩臫臮",4,"臵",5,"臽臿舃與",4,"舎舏舑舓舕",5,"舝舠舤舥舦舧舩舮舲舺舼舽舿"],["c580","艀艁艂艃艅艆艈艊艌艍艎艐",7,"艙艛艜艝艞艠",7,"艩拧泞牛扭钮纽脓浓农弄奴努怒女暖虐疟挪懦糯诺哦欧鸥殴藕呕偶沤啪趴爬帕怕琶拍排牌徘湃派攀潘盘磐盼畔判叛乓庞旁耪胖抛咆刨炮袍跑泡呸胚培裴赔陪配佩沛喷盆砰抨烹澎彭蓬棚硼篷膨朋鹏捧碰坯砒霹批披劈琵毗"],["c640","艪艫艬艭艱艵艶艷艸艻艼芀芁芃芅芆芇芉芌芐芓芔芕芖芚芛芞芠芢芣芧芲芵芶芺芻芼芿苀苂苃苅苆苉苐苖苙苚苝苢苧苨苩苪苬苭苮苰苲苳苵苶苸"],["c680","苺苼",4,"茊茋茍茐茒茓茖茘茙茝",9,"茩茪茮茰茲茷茻茽啤脾疲皮匹痞僻屁譬篇偏片骗飘漂瓢票撇瞥拼频贫品聘乒坪苹萍平凭瓶评屏坡泼颇婆破魄迫粕剖扑铺仆莆葡菩蒲埔朴圃普浦谱曝瀑期欺栖戚妻七凄漆柒沏其棋奇歧畦崎脐齐旗祈祁骑起岂乞企启契砌器气迄弃汽泣讫掐"],["c740","茾茿荁荂荄荅荈荊",4,"荓荕",4,"荝荢荰",6,"荹荺荾",6,"莇莈莊莋莌莍莏莐莑莔莕莖莗莙莚莝莟莡",6,"莬莭莮"],["c780","莯莵莻莾莿菂菃菄菆菈菉菋菍菎菐菑菒菓菕菗菙菚菛菞菢菣菤菦菧菨菫菬菭恰洽牵扦钎铅千迁签仟谦乾黔钱钳前潜遣浅谴堑嵌欠歉枪呛腔羌墙蔷强抢橇锹敲悄桥瞧乔侨巧鞘撬翘峭俏窍切茄且怯窃钦侵亲秦琴勤芹擒禽寝沁青轻氢倾卿清擎晴氰情顷请庆琼穷秋丘邱球求囚酋泅趋区蛆曲躯屈驱渠"],["c840","菮華菳",4,"菺菻菼菾菿萀萂萅萇萈萉萊萐萒",5,"萙萚萛萞",5,"萩",7,"萲",5,"萹萺萻萾",7,"葇葈葉"],["c880","葊",6,"葒",4,"葘葝葞葟葠葢葤",4,"葪葮葯葰葲葴葷葹葻葼取娶龋趣去圈颧权醛泉全痊拳犬券劝缺炔瘸却鹊榷确雀裙群然燃冉染瓤壤攘嚷让饶扰绕惹热壬仁人忍韧任认刃妊纫扔仍日戎茸蓉荣融熔溶容绒冗揉柔肉茹蠕儒孺如辱乳汝入褥软阮蕊瑞锐闰润若弱撒洒萨腮鳃塞赛三叁"],["c940","葽",4,"蒃蒄蒅蒆蒊蒍蒏",7,"蒘蒚蒛蒝蒞蒟蒠蒢",12,"蒰蒱蒳蒵蒶蒷蒻蒼蒾蓀蓂蓃蓅蓆蓇蓈蓋蓌蓎蓏蓒蓔蓕蓗"],["c980","蓘",4,"蓞蓡蓢蓤蓧",4,"蓭蓮蓯蓱",10,"蓽蓾蔀蔁蔂伞散桑嗓丧搔骚扫嫂瑟色涩森僧莎砂杀刹沙纱傻啥煞筛晒珊苫杉山删煽衫闪陕擅赡膳善汕扇缮墒伤商赏晌上尚裳梢捎稍烧芍勺韶少哨邵绍奢赊蛇舌舍赦摄射慑涉社设砷申呻伸身深娠绅神沈审婶甚肾慎渗声生甥牲升绳"],["ca40","蔃",8,"蔍蔎蔏蔐蔒蔔蔕蔖蔘蔙蔛蔜蔝蔞蔠蔢",8,"蔭",9,"蔾",4,"蕄蕅蕆蕇蕋",10],["ca80","蕗蕘蕚蕛蕜蕝蕟",4,"蕥蕦蕧蕩",8,"蕳蕵蕶蕷蕸蕼蕽蕿薀薁省盛剩胜圣师失狮施湿诗尸虱十石拾时什食蚀实识史矢使屎驶始式示士世柿事拭誓逝势是嗜噬适仕侍释饰氏市恃室视试收手首守寿授售受瘦兽蔬枢梳殊抒输叔舒淑疏书赎孰熟薯暑曙署蜀黍鼠属术述树束戍竖墅庶数漱"],["cb40","薂薃薆薈",6,"薐",10,"薝",6,"薥薦薧薩薫薬薭薱",5,"薸薺",6,"藂",6,"藊",4,"藑藒"],["cb80","藔藖",5,"藝",6,"藥藦藧藨藪",14,"恕刷耍摔衰甩帅栓拴霜双爽谁水睡税吮瞬顺舜说硕朔烁斯撕嘶思私司丝死肆寺嗣四伺似饲巳松耸怂颂送宋讼诵搜艘擞嗽苏酥俗素速粟僳塑溯宿诉肃酸蒜算虽隋随绥髓碎岁穗遂隧祟孙损笋蓑梭唆缩琐索锁所塌他它她塔"],["cc40","藹藺藼藽藾蘀",4,"蘆",10,"蘒蘓蘔蘕蘗",15,"蘨蘪",13,"蘹蘺蘻蘽蘾蘿虀"],["cc80","虁",11,"虒虓處",4,"虛虜虝號虠虡虣",7,"獭挞蹋踏胎苔抬台泰酞太态汰坍摊贪瘫滩坛檀痰潭谭谈坦毯袒碳探叹炭汤塘搪堂棠膛唐糖倘躺淌趟烫掏涛滔绦萄桃逃淘陶讨套特藤腾疼誊梯剔踢锑提题蹄啼体替嚏惕涕剃屉天添填田甜恬舔腆挑条迢眺跳贴铁帖厅听烃"],["cd40","虭虯虰虲",6,"蚃",6,"蚎",4,"蚔蚖",5,"蚞",4,"蚥蚦蚫蚭蚮蚲蚳蚷蚸蚹蚻",4,"蛁蛂蛃蛅蛈蛌蛍蛒蛓蛕蛖蛗蛚蛜"],["cd80","蛝蛠蛡蛢蛣蛥蛦蛧蛨蛪蛫蛬蛯蛵蛶蛷蛺蛻蛼蛽蛿蜁蜄蜅蜆蜋蜌蜎蜏蜐蜑蜔蜖汀廷停亭庭挺艇通桐酮瞳同铜彤童桶捅筒统痛偷投头透凸秃突图徒途涂屠土吐兔湍团推颓腿蜕褪退吞屯臀拖托脱鸵陀驮驼椭妥拓唾挖哇蛙洼娃瓦袜歪外豌弯湾玩顽丸烷完碗挽晚皖惋宛婉万腕汪王亡枉网往旺望忘妄威"],["ce40","蜙蜛蜝蜟蜠蜤蜦蜧蜨蜪蜫蜬蜭蜯蜰蜲蜳蜵蜶蜸蜹蜺蜼蜽蝀",6,"蝊蝋蝍蝏蝐蝑蝒蝔蝕蝖蝘蝚",5,"蝡蝢蝦",7,"蝯蝱蝲蝳蝵"],["ce80","蝷蝸蝹蝺蝿螀螁螄螆螇螉螊螌螎",4,"螔螕螖螘",6,"螠",4,"巍微危韦违桅围唯惟为潍维苇萎委伟伪尾纬未蔚味畏胃喂魏位渭谓尉慰卫瘟温蚊文闻纹吻稳紊问嗡翁瓮挝蜗涡窝我斡卧握沃巫呜钨乌污诬屋无芜梧吾吴毋武五捂午舞伍侮坞戊雾晤物勿务悟误昔熙析西硒矽晰嘻吸锡牺"],["cf40","螥螦螧螩螪螮螰螱螲螴螶螷螸螹螻螼螾螿蟁",4,"蟇蟈蟉蟌",4,"蟔",6,"蟜蟝蟞蟟蟡蟢蟣蟤蟦蟧蟨蟩蟫蟬蟭蟯",9],["cf80","蟺蟻蟼蟽蟿蠀蠁蠂蠄",5,"蠋",7,"蠔蠗蠘蠙蠚蠜",4,"蠣稀息希悉膝夕惜熄烯溪汐犀檄袭席习媳喜铣洗系隙戏细瞎虾匣霞辖暇峡侠狭下厦夏吓掀锨先仙鲜纤咸贤衔舷闲涎弦嫌显险现献县腺馅羡宪陷限线相厢镶香箱襄湘乡翔祥详想响享项巷橡像向象萧硝霄削哮嚣销消宵淆晓"],["d040","蠤",13,"蠳",5,"蠺蠻蠽蠾蠿衁衂衃衆",5,"衎",5,"衕衖衘衚",6,"衦衧衪衭衯衱衳衴衵衶衸衹衺"],["d080","衻衼袀袃袆袇袉袊袌袎袏袐袑袓袔袕袗",4,"袝",4,"袣袥",5,"小孝校肖啸笑效楔些歇蝎鞋协挟携邪斜胁谐写械卸蟹懈泄泻谢屑薪芯锌欣辛新忻心信衅星腥猩惺兴刑型形邢行醒幸杏性姓兄凶胸匈汹雄熊休修羞朽嗅锈秀袖绣墟戌需虚嘘须徐许蓄酗叙旭序畜恤絮婿绪续轩喧宣悬旋玄"],["d140","袬袮袯袰袲",4,"袸袹袺袻袽袾袿裀裃裄裇裈裊裋裌裍裏裐裑裓裖裗裚",4,"裠裡裦裧裩",6,"裲裵裶裷裺裻製裿褀褁褃",5],["d180","褉褋",4,"褑褔",4,"褜",4,"褢褣褤褦褧褨褩褬褭褮褯褱褲褳褵褷选癣眩绚靴薛学穴雪血勋熏循旬询寻驯巡殉汛训讯逊迅压押鸦鸭呀丫芽牙蚜崖衙涯雅哑亚讶焉咽阉烟淹盐严研蜒岩延言颜阎炎沿奄掩眼衍演艳堰燕厌砚雁唁彦焰宴谚验殃央鸯秧杨扬佯疡羊洋阳氧仰痒养样漾邀腰妖瑶"],["d240","褸",8,"襂襃襅",24,"襠",5,"襧",19,"襼"],["d280","襽襾覀覂覄覅覇",26,"摇尧遥窑谣姚咬舀药要耀椰噎耶爷野冶也页掖业叶曳腋夜液一壹医揖铱依伊衣颐夷遗移仪胰疑沂宜姨彝椅蚁倚已乙矣以艺抑易邑屹亿役臆逸肄疫亦裔意毅忆义益溢诣议谊译异翼翌绎茵荫因殷音阴姻吟银淫寅饮尹引隐"],["d340","覢",30,"觃觍觓觔觕觗觘觙觛觝觟觠觡觢觤觧觨觩觪觬觭觮觰觱觲觴",6],["d380","觻",4,"訁",5,"計",21,"印英樱婴鹰应缨莹萤营荧蝇迎赢盈影颖硬映哟拥佣臃痈庸雍踊蛹咏泳涌永恿勇用幽优悠忧尤由邮铀犹油游酉有友右佑釉诱又幼迂淤于盂榆虞愚舆余俞逾鱼愉渝渔隅予娱雨与屿禹宇语羽玉域芋郁吁遇喻峪御愈欲狱育誉"],["d440","訞",31,"訿",8,"詉",21],["d480","詟",25,"詺",6,"浴寓裕预豫驭鸳渊冤元垣袁原援辕园员圆猿源缘远苑愿怨院曰约越跃钥岳粤月悦阅耘云郧匀陨允运蕴酝晕韵孕匝砸杂栽哉灾宰载再在咱攒暂赞赃脏葬遭糟凿藻枣早澡蚤躁噪造皂灶燥责择则泽贼怎增憎曾赠扎喳渣札轧"],["d540","誁",7,"誋",7,"誔",46],["d580","諃",32,"铡闸眨栅榨咋乍炸诈摘斋宅窄债寨瞻毡詹粘沾盏斩辗崭展蘸栈占战站湛绽樟章彰漳张掌涨杖丈帐账仗胀瘴障招昭找沼赵照罩兆肇召遮折哲蛰辙者锗蔗这浙珍斟真甄砧臻贞针侦枕疹诊震振镇阵蒸挣睁征狰争怔整拯正政"],["d640","諤",34,"謈",27],["d680","謤謥謧",30,"帧症郑证芝枝支吱蜘知肢脂汁之织职直植殖执值侄址指止趾只旨纸志挚掷至致置帜峙制智秩稚质炙痔滞治窒中盅忠钟衷终种肿重仲众舟周州洲诌粥轴肘帚咒皱宙昼骤珠株蛛朱猪诸诛逐竹烛煮拄瞩嘱主著柱助蛀贮铸筑"],["d740","譆",31,"譧",4,"譭",25],["d780","讇",24,"讬讱讻诇诐诪谉谞住注祝驻抓爪拽专砖转撰赚篆桩庄装妆撞壮状椎锥追赘坠缀谆准捉拙卓桌琢茁酌啄着灼浊兹咨资姿滋淄孜紫仔籽滓子自渍字鬃棕踪宗综总纵邹走奏揍租足卒族祖诅阻组钻纂嘴醉最罪尊遵昨左佐柞做作坐座"],["d840","谸",8,"豂豃豄豅豈豊豋豍",7,"豖豗豘豙豛",5,"豣",6,"豬",6,"豴豵豶豷豻",6,"貃貄貆貇"],["d880","貈貋貍",6,"貕貖貗貙",20,"亍丌兀丐廿卅丕亘丞鬲孬噩丨禺丿匕乇夭爻卮氐囟胤馗毓睾鼗丶亟鼐乜乩亓芈孛啬嘏仄厍厝厣厥厮靥赝匚叵匦匮匾赜卦卣刂刈刎刭刳刿剀剌剞剡剜蒯剽劂劁劐劓冂罔亻仃仉仂仨仡仫仞伛仳伢佤仵伥伧伉伫佞佧攸佚佝"],["d940","貮",62],["d980","賭",32,"佟佗伲伽佶佴侑侉侃侏佾佻侪佼侬侔俦俨俪俅俚俣俜俑俟俸倩偌俳倬倏倮倭俾倜倌倥倨偾偃偕偈偎偬偻傥傧傩傺僖儆僭僬僦僮儇儋仝氽佘佥俎龠汆籴兮巽黉馘冁夔勹匍訇匐凫夙兕亠兖亳衮袤亵脔裒禀嬴蠃羸冫冱冽冼"],["da40","贎",14,"贠赑赒赗赟赥赨赩赪赬赮赯赱赲赸",8,"趂趃趆趇趈趉趌",4,"趒趓趕",9,"趠趡"],["da80","趢趤",12,"趲趶趷趹趻趽跀跁跂跅跇跈跉跊跍跐跒跓跔凇冖冢冥讠讦讧讪讴讵讷诂诃诋诏诎诒诓诔诖诘诙诜诟诠诤诨诩诮诰诳诶诹诼诿谀谂谄谇谌谏谑谒谔谕谖谙谛谘谝谟谠谡谥谧谪谫谮谯谲谳谵谶卩卺阝阢阡阱阪阽阼陂陉陔陟陧陬陲陴隈隍隗隰邗邛邝邙邬邡邴邳邶邺"],["db40","跕跘跙跜跠跡跢跥跦跧跩跭跮跰跱跲跴跶跼跾",6,"踆踇踈踋踍踎踐踑踒踓踕",7,"踠踡踤",4,"踫踭踰踲踳踴踶踷踸踻踼踾"],["db80","踿蹃蹅蹆蹌",4,"蹓",5,"蹚",11,"蹧蹨蹪蹫蹮蹱邸邰郏郅邾郐郄郇郓郦郢郜郗郛郫郯郾鄄鄢鄞鄣鄱鄯鄹酃酆刍奂劢劬劭劾哿勐勖勰叟燮矍廴凵凼鬯厶弁畚巯坌垩垡塾墼壅壑圩圬圪圳圹圮圯坜圻坂坩垅坫垆坼坻坨坭坶坳垭垤垌垲埏垧垴垓垠埕埘埚埙埒垸埴埯埸埤埝"],["dc40","蹳蹵蹷",4,"蹽蹾躀躂躃躄躆躈",6,"躑躒躓躕",6,"躝躟",11,"躭躮躰躱躳",6,"躻",7],["dc80","軃",10,"軏",21,"堋堍埽埭堀堞堙塄堠塥塬墁墉墚墀馨鼙懿艹艽艿芏芊芨芄芎芑芗芙芫芸芾芰苈苊苣芘芷芮苋苌苁芩芴芡芪芟苄苎芤苡茉苷苤茏茇苜苴苒苘茌苻苓茑茚茆茔茕苠苕茜荑荛荜茈莒茼茴茱莛荞茯荏荇荃荟荀茗荠茭茺茳荦荥"],["dd40","軥",62],["dd80","輤",32,"荨茛荩荬荪荭荮莰荸莳莴莠莪莓莜莅荼莶莩荽莸荻莘莞莨莺莼菁萁菥菘堇萘萋菝菽菖萜萸萑萆菔菟萏萃菸菹菪菅菀萦菰菡葜葑葚葙葳蒇蒈葺蒉葸萼葆葩葶蒌蒎萱葭蓁蓍蓐蓦蒽蓓蓊蒿蒺蓠蒡蒹蒴蒗蓥蓣蔌甍蔸蓰蔹蔟蔺"],["de40","轅",32,"轪辀辌辒辝辠辡辢辤辥辦辧辪辬辭辮辯農辳辴辵辷辸辺辻込辿迀迃迆"],["de80","迉",4,"迏迒迖迗迚迠迡迣迧迬迯迱迲迴迵迶迺迻迼迾迿逇逈逌逎逓逕逘蕖蔻蓿蓼蕙蕈蕨蕤蕞蕺瞢蕃蕲蕻薤薨薇薏蕹薮薜薅薹薷薰藓藁藜藿蘧蘅蘩蘖蘼廾弈夼奁耷奕奚奘匏尢尥尬尴扌扪抟抻拊拚拗拮挢拶挹捋捃掭揶捱捺掎掴捭掬掊捩掮掼揲揸揠揿揄揞揎摒揆掾摅摁搋搛搠搌搦搡摞撄摭撖"],["df40","這逜連逤逥逧",5,"逰",4,"逷逹逺逽逿遀遃遅遆遈",4,"過達違遖遙遚遜",5,"遤遦遧適遪遫遬遯",4,"遶",6,"遾邁"],["df80","還邅邆邇邉邊邌",4,"邒邔邖邘邚邜邞邟邠邤邥邧邨邩邫邭邲邷邼邽邿郀摺撷撸撙撺擀擐擗擤擢攉攥攮弋忒甙弑卟叱叽叩叨叻吒吖吆呋呒呓呔呖呃吡呗呙吣吲咂咔呷呱呤咚咛咄呶呦咝哐咭哂咴哒咧咦哓哔呲咣哕咻咿哌哙哚哜咩咪咤哝哏哞唛哧唠哽唔哳唢唣唏唑唧唪啧喏喵啉啭啁啕唿啐唼"],["e040","郂郃郆郈郉郋郌郍郒郔郕郖郘郙郚郞郟郠郣郤郥郩郪郬郮郰郱郲郳郵郶郷郹郺郻郼郿鄀鄁鄃鄅",19,"鄚鄛鄜"],["e080","鄝鄟鄠鄡鄤",10,"鄰鄲",6,"鄺",8,"酄唷啖啵啶啷唳唰啜喋嗒喃喱喹喈喁喟啾嗖喑啻嗟喽喾喔喙嗪嗷嗉嘟嗑嗫嗬嗔嗦嗝嗄嗯嗥嗲嗳嗌嗍嗨嗵嗤辔嘞嘈嘌嘁嘤嘣嗾嘀嘧嘭噘嘹噗嘬噍噢噙噜噌噔嚆噤噱噫噻噼嚅嚓嚯囔囗囝囡囵囫囹囿圄圊圉圜帏帙帔帑帱帻帼"],["e140","酅酇酈酑酓酔酕酖酘酙酛酜酟酠酦酧酨酫酭酳酺酻酼醀",4,"醆醈醊醎醏醓",6,"醜",5,"醤",5,"醫醬醰醱醲醳醶醷醸醹醻"],["e180","醼",10,"釈釋釐釒",9,"針",8,"帷幄幔幛幞幡岌屺岍岐岖岈岘岙岑岚岜岵岢岽岬岫岱岣峁岷峄峒峤峋峥崂崃崧崦崮崤崞崆崛嵘崾崴崽嵬嵛嵯嵝嵫嵋嵊嵩嵴嶂嶙嶝豳嶷巅彳彷徂徇徉後徕徙徜徨徭徵徼衢彡犭犰犴犷犸狃狁狎狍狒狨狯狩狲狴狷猁狳猃狺"],["e240","釦",62],["e280","鈥",32,"狻猗猓猡猊猞猝猕猢猹猥猬猸猱獐獍獗獠獬獯獾舛夥飧夤夂饣饧",5,"饴饷饽馀馄馇馊馍馐馑馓馔馕庀庑庋庖庥庠庹庵庾庳赓廒廑廛廨廪膺忄忉忖忏怃忮怄忡忤忾怅怆忪忭忸怙怵怦怛怏怍怩怫怊怿怡恸恹恻恺恂"],["e340","鉆",45,"鉵",16],["e380","銆",7,"銏",24,"恪恽悖悚悭悝悃悒悌悛惬悻悱惝惘惆惚悴愠愦愕愣惴愀愎愫慊慵憬憔憧憷懔懵忝隳闩闫闱闳闵闶闼闾阃阄阆阈阊阋阌阍阏阒阕阖阗阙阚丬爿戕氵汔汜汊沣沅沐沔沌汨汩汴汶沆沩泐泔沭泷泸泱泗沲泠泖泺泫泮沱泓泯泾"],["e440","銨",5,"銯",24,"鋉",31],["e480","鋩",32,"洹洧洌浃浈洇洄洙洎洫浍洮洵洚浏浒浔洳涑浯涞涠浞涓涔浜浠浼浣渚淇淅淞渎涿淠渑淦淝淙渖涫渌涮渫湮湎湫溲湟溆湓湔渲渥湄滟溱溘滠漭滢溥溧溽溻溷滗溴滏溏滂溟潢潆潇漤漕滹漯漶潋潴漪漉漩澉澍澌潸潲潼潺濑"],["e540","錊",51,"錿",10],["e580","鍊",31,"鍫濉澧澹澶濂濡濮濞濠濯瀚瀣瀛瀹瀵灏灞宀宄宕宓宥宸甯骞搴寤寮褰寰蹇謇辶迓迕迥迮迤迩迦迳迨逅逄逋逦逑逍逖逡逵逶逭逯遄遑遒遐遨遘遢遛暹遴遽邂邈邃邋彐彗彖彘尻咫屐屙孱屣屦羼弪弩弭艴弼鬻屮妁妃妍妩妪妣"],["e640","鍬",34,"鎐",27],["e680","鎬",29,"鏋鏌鏍妗姊妫妞妤姒妲妯姗妾娅娆姝娈姣姘姹娌娉娲娴娑娣娓婀婧婊婕娼婢婵胬媪媛婷婺媾嫫媲嫒嫔媸嫠嫣嫱嫖嫦嫘嫜嬉嬗嬖嬲嬷孀尕尜孚孥孳孑孓孢驵驷驸驺驿驽骀骁骅骈骊骐骒骓骖骘骛骜骝骟骠骢骣骥骧纟纡纣纥纨纩"],["e740","鏎",7,"鏗",54],["e780","鐎",32,"纭纰纾绀绁绂绉绋绌绐绔绗绛绠绡绨绫绮绯绱绲缍绶绺绻绾缁缂缃缇缈缋缌缏缑缒缗缙缜缛缟缡",6,"缪缫缬缭缯",4,"缵幺畿巛甾邕玎玑玮玢玟珏珂珑玷玳珀珉珈珥珙顼琊珩珧珞玺珲琏琪瑛琦琥琨琰琮琬"],["e840","鐯",14,"鐿",43,"鑬鑭鑮鑯"],["e880","鑰",20,"钑钖钘铇铏铓铔铚铦铻锜锠琛琚瑁瑜瑗瑕瑙瑷瑭瑾璜璎璀璁璇璋璞璨璩璐璧瓒璺韪韫韬杌杓杞杈杩枥枇杪杳枘枧杵枨枞枭枋杷杼柰栉柘栊柩枰栌柙枵柚枳柝栀柃枸柢栎柁柽栲栳桠桡桎桢桄桤梃栝桕桦桁桧桀栾桊桉栩梵梏桴桷梓桫棂楮棼椟椠棹"],["e940","锧锳锽镃镈镋镕镚镠镮镴镵長",7,"門",42],["e980","閫",32,"椤棰椋椁楗棣椐楱椹楠楂楝榄楫榀榘楸椴槌榇榈槎榉楦楣楹榛榧榻榫榭槔榱槁槊槟榕槠榍槿樯槭樗樘橥槲橄樾檠橐橛樵檎橹樽樨橘橼檑檐檩檗檫猷獒殁殂殇殄殒殓殍殚殛殡殪轫轭轱轲轳轵轶轸轷轹轺轼轾辁辂辄辇辋"],["ea40","闌",27,"闬闿阇阓阘阛阞阠阣",6,"阫阬阭阯阰阷阸阹阺阾陁陃陊陎陏陑陒陓陖陗"],["ea80","陘陙陚陜陝陞陠陣陥陦陫陭",4,"陳陸",12,"隇隉隊辍辎辏辘辚軎戋戗戛戟戢戡戥戤戬臧瓯瓴瓿甏甑甓攴旮旯旰昊昙杲昃昕昀炅曷昝昴昱昶昵耆晟晔晁晏晖晡晗晷暄暌暧暝暾曛曜曦曩贲贳贶贻贽赀赅赆赈赉赇赍赕赙觇觊觋觌觎觏觐觑牮犟牝牦牯牾牿犄犋犍犏犒挈挲掰"],["eb40","隌階隑隒隓隕隖隚際隝",9,"隨",7,"隱隲隴隵隷隸隺隻隿雂雃雈雊雋雐雑雓雔雖",9,"雡",6,"雫"],["eb80","雬雭雮雰雱雲雴雵雸雺電雼雽雿霂霃霅霊霋霌霐霑霒霔霕霗",4,"霝霟霠搿擘耄毪毳毽毵毹氅氇氆氍氕氘氙氚氡氩氤氪氲攵敕敫牍牒牖爰虢刖肟肜肓肼朊肽肱肫肭肴肷胧胨胩胪胛胂胄胙胍胗朐胝胫胱胴胭脍脎胲胼朕脒豚脶脞脬脘脲腈腌腓腴腙腚腱腠腩腼腽腭腧塍媵膈膂膑滕膣膪臌朦臊膻"],["ec40","霡",8,"霫霬霮霯霱霳",4,"霺霻霼霽霿",18,"靔靕靗靘靚靜靝靟靣靤靦靧靨靪",7],["ec80","靲靵靷",4,"靽",7,"鞆",4,"鞌鞎鞏鞐鞓鞕鞖鞗鞙",4,"臁膦欤欷欹歃歆歙飑飒飓飕飙飚殳彀毂觳斐齑斓於旆旄旃旌旎旒旖炀炜炖炝炻烀炷炫炱烨烊焐焓焖焯焱煳煜煨煅煲煊煸煺熘熳熵熨熠燠燔燧燹爝爨灬焘煦熹戾戽扃扈扉礻祀祆祉祛祜祓祚祢祗祠祯祧祺禅禊禚禧禳忑忐"],["ed40","鞞鞟鞡鞢鞤",6,"鞬鞮鞰鞱鞳鞵",46],["ed80","韤韥韨韮",4,"韴韷",23,"怼恝恚恧恁恙恣悫愆愍慝憩憝懋懑戆肀聿沓泶淼矶矸砀砉砗砘砑斫砭砜砝砹砺砻砟砼砥砬砣砩硎硭硖硗砦硐硇硌硪碛碓碚碇碜碡碣碲碹碥磔磙磉磬磲礅磴礓礤礞礴龛黹黻黼盱眄眍盹眇眈眚眢眙眭眦眵眸睐睑睇睃睚睨"],["ee40","頏",62],["ee80","顎",32,"睢睥睿瞍睽瞀瞌瞑瞟瞠瞰瞵瞽町畀畎畋畈畛畲畹疃罘罡罟詈罨罴罱罹羁罾盍盥蠲钅钆钇钋钊钌钍钏钐钔钗钕钚钛钜钣钤钫钪钭钬钯钰钲钴钶",4,"钼钽钿铄铈",6,"铐铑铒铕铖铗铙铘铛铞铟铠铢铤铥铧铨铪"],["ef40","顯",5,"颋颎颒颕颙颣風",37,"飏飐飔飖飗飛飜飝飠",4],["ef80","飥飦飩",30,"铩铫铮铯铳铴铵铷铹铼铽铿锃锂锆锇锉锊锍锎锏锒",4,"锘锛锝锞锟锢锪锫锩锬锱锲锴锶锷锸锼锾锿镂锵镄镅镆镉镌镎镏镒镓镔镖镗镘镙镛镞镟镝镡镢镤",8,"镯镱镲镳锺矧矬雉秕秭秣秫稆嵇稃稂稞稔"],["f040","餈",4,"餎餏餑",28,"餯",26],["f080","饊",9,"饖",12,"饤饦饳饸饹饻饾馂馃馉稹稷穑黏馥穰皈皎皓皙皤瓞瓠甬鸠鸢鸨",4,"鸲鸱鸶鸸鸷鸹鸺鸾鹁鹂鹄鹆鹇鹈鹉鹋鹌鹎鹑鹕鹗鹚鹛鹜鹞鹣鹦",6,"鹱鹭鹳疒疔疖疠疝疬疣疳疴疸痄疱疰痃痂痖痍痣痨痦痤痫痧瘃痱痼痿瘐瘀瘅瘌瘗瘊瘥瘘瘕瘙"],["f140","馌馎馚",10,"馦馧馩",47],["f180","駙",32,"瘛瘼瘢瘠癀瘭瘰瘿瘵癃瘾瘳癍癞癔癜癖癫癯翊竦穸穹窀窆窈窕窦窠窬窨窭窳衤衩衲衽衿袂袢裆袷袼裉裢裎裣裥裱褚裼裨裾裰褡褙褓褛褊褴褫褶襁襦襻疋胥皲皴矜耒耔耖耜耠耢耥耦耧耩耨耱耋耵聃聆聍聒聩聱覃顸颀颃"],["f240","駺",62],["f280","騹",32,"颉颌颍颏颔颚颛颞颟颡颢颥颦虍虔虬虮虿虺虼虻蚨蚍蚋蚬蚝蚧蚣蚪蚓蚩蚶蛄蚵蛎蚰蚺蚱蚯蛉蛏蚴蛩蛱蛲蛭蛳蛐蜓蛞蛴蛟蛘蛑蜃蜇蛸蜈蜊蜍蜉蜣蜻蜞蜥蜮蜚蜾蝈蜴蜱蜩蜷蜿螂蜢蝽蝾蝻蝠蝰蝌蝮螋蝓蝣蝼蝤蝙蝥螓螯螨蟒"],["f340","驚",17,"驲骃骉骍骎骔骕骙骦骩",6,"骲骳骴骵骹骻骽骾骿髃髄髆",4,"髍髎髏髐髒體髕髖髗髙髚髛髜"],["f380","髝髞髠髢髣髤髥髧髨髩髪髬髮髰",8,"髺髼",6,"鬄鬅鬆蟆螈螅螭螗螃螫蟥螬螵螳蟋蟓螽蟑蟀蟊蟛蟪蟠蟮蠖蠓蟾蠊蠛蠡蠹蠼缶罂罄罅舐竺竽笈笃笄笕笊笫笏筇笸笪笙笮笱笠笥笤笳笾笞筘筚筅筵筌筝筠筮筻筢筲筱箐箦箧箸箬箝箨箅箪箜箢箫箴篑篁篌篝篚篥篦篪簌篾篼簏簖簋"],["f440","鬇鬉",5,"鬐鬑鬒鬔",10,"鬠鬡鬢鬤",10,"鬰鬱鬳",7,"鬽鬾鬿魀魆魊魋魌魎魐魒魓魕",5],["f480","魛",32,"簟簪簦簸籁籀臾舁舂舄臬衄舡舢舣舭舯舨舫舸舻舳舴舾艄艉艋艏艚艟艨衾袅袈裘裟襞羝羟羧羯羰羲籼敉粑粝粜粞粢粲粼粽糁糇糌糍糈糅糗糨艮暨羿翎翕翥翡翦翩翮翳糸絷綦綮繇纛麸麴赳趄趔趑趱赧赭豇豉酊酐酎酏酤"],["f540","魼",62],["f580","鮻",32,"酢酡酰酩酯酽酾酲酴酹醌醅醐醍醑醢醣醪醭醮醯醵醴醺豕鹾趸跫踅蹙蹩趵趿趼趺跄跖跗跚跞跎跏跛跆跬跷跸跣跹跻跤踉跽踔踝踟踬踮踣踯踺蹀踹踵踽踱蹉蹁蹂蹑蹒蹊蹰蹶蹼蹯蹴躅躏躔躐躜躞豸貂貊貅貘貔斛觖觞觚觜"],["f640","鯜",62],["f680","鰛",32,"觥觫觯訾謦靓雩雳雯霆霁霈霏霎霪霭霰霾龀龃龅",5,"龌黾鼋鼍隹隼隽雎雒瞿雠銎銮鋈錾鍪鏊鎏鐾鑫鱿鲂鲅鲆鲇鲈稣鲋鲎鲐鲑鲒鲔鲕鲚鲛鲞",5,"鲥",4,"鲫鲭鲮鲰",7,"鲺鲻鲼鲽鳄鳅鳆鳇鳊鳋"],["f740","鰼",62],["f780","鱻鱽鱾鲀鲃鲄鲉鲊鲌鲏鲓鲖鲗鲘鲙鲝鲪鲬鲯鲹鲾",4,"鳈鳉鳑鳒鳚鳛鳠鳡鳌",4,"鳓鳔鳕鳗鳘鳙鳜鳝鳟鳢靼鞅鞑鞒鞔鞯鞫鞣鞲鞴骱骰骷鹘骶骺骼髁髀髅髂髋髌髑魅魃魇魉魈魍魑飨餍餮饕饔髟髡髦髯髫髻髭髹鬈鬏鬓鬟鬣麽麾縻麂麇麈麋麒鏖麝麟黛黜黝黠黟黢黩黧黥黪黯鼢鼬鼯鼹鼷鼽鼾齄"],["f840","鳣",62],["f880","鴢",32],["f940","鵃",62],["f980","鶂",32],["fa40","鶣",62],["fa80","鷢",32],["fb40","鸃",27,"鸤鸧鸮鸰鸴鸻鸼鹀鹍鹐鹒鹓鹔鹖鹙鹝鹟鹠鹡鹢鹥鹮鹯鹲鹴",9,"麀"],["fb80","麁麃麄麅麆麉麊麌",5,"麔",8,"麞麠",5,"麧麨麩麪"],["fc40","麫",8,"麵麶麷麹麺麼麿",4,"黅黆黇黈黊黋黌黐黒黓黕黖黗黙黚點黡黣黤黦黨黫黬黭黮黰",8,"黺黽黿",6],["fc80","鼆",4,"鼌鼏鼑鼒鼔鼕鼖鼘鼚",5,"鼡鼣",8,"鼭鼮鼰鼱"],["fd40","鼲",4,"鼸鼺鼼鼿",4,"齅",10,"齒",38],["fd80","齹",5,"龁龂龍",11,"龜龝龞龡",4,"郎凉秊裏隣"],["fe40","兀嗀﨎﨏﨑﨓﨔礼﨟蘒﨡﨣﨤﨧﨨﨩"]]
-
-/***/ }),
-/* 278 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// @flow
-
-/*::
-declare var __webpack_require__: mixed;
-*/
-
-module.exports = typeof __webpack_require__ !== "undefined";
-
-
-/***/ }),
-/* 279 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-
-var yaml = __webpack_require__(280);
-
-
-module.exports = yaml;
-
-
-/***/ }),
-/* 280 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-
-var loader = __webpack_require__(282);
-var dumper = __webpack_require__(281);
-
-
-function deprecated(name) {
-  return function () {
-    throw new Error('Function ' + name + ' is deprecated and cannot be used.');
-  };
-}
-
-
-module.exports.Type                = __webpack_require__(10);
-module.exports.Schema              = __webpack_require__(44);
-module.exports.FAILSAFE_SCHEMA     = __webpack_require__(100);
-module.exports.JSON_SCHEMA         = __webpack_require__(144);
-module.exports.CORE_SCHEMA         = __webpack_require__(143);
-module.exports.DEFAULT_SAFE_SCHEMA = __webpack_require__(55);
-module.exports.DEFAULT_FULL_SCHEMA = __webpack_require__(73);
-module.exports.load                = loader.load;
-module.exports.loadAll             = loader.loadAll;
-module.exports.safeLoad            = loader.safeLoad;
-module.exports.safeLoadAll         = loader.safeLoadAll;
-module.exports.dump                = dumper.dump;
-module.exports.safeDump            = dumper.safeDump;
-module.exports.YAMLException       = __webpack_require__(54);
-
-// Deprecated schema names from JS-YAML 2.0.x
-module.exports.MINIMAL_SCHEMA = __webpack_require__(100);
-module.exports.SAFE_SCHEMA    = __webpack_require__(55);
-module.exports.DEFAULT_SCHEMA = __webpack_require__(73);
-
-// Deprecated functions from JS-YAML 1.x.x
-module.exports.scan           = deprecated('scan');
-module.exports.parse          = deprecated('parse');
-module.exports.compose        = deprecated('compose');
-module.exports.addConstructor = deprecated('addConstructor');
-
-
-/***/ }),
-/* 281 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-/*eslint-disable no-use-before-define*/
-
-var common              = __webpack_require__(43);
-var YAMLException       = __webpack_require__(54);
-var DEFAULT_FULL_SCHEMA = __webpack_require__(73);
-var DEFAULT_SAFE_SCHEMA = __webpack_require__(55);
-
-var _toString       = Object.prototype.toString;
-var _hasOwnProperty = Object.prototype.hasOwnProperty;
-
-var CHAR_TAB                  = 0x09; /* Tab */
-var CHAR_LINE_FEED            = 0x0A; /* LF */
-var CHAR_SPACE                = 0x20; /* Space */
-var CHAR_EXCLAMATION          = 0x21; /* ! */
-var CHAR_DOUBLE_QUOTE         = 0x22; /* " */
-var CHAR_SHARP                = 0x23; /* # */
-var CHAR_PERCENT              = 0x25; /* % */
-var CHAR_AMPERSAND            = 0x26; /* & */
-var CHAR_SINGLE_QUOTE         = 0x27; /* ' */
-var CHAR_ASTERISK             = 0x2A; /* * */
-var CHAR_COMMA                = 0x2C; /* , */
-var CHAR_MINUS                = 0x2D; /* - */
-var CHAR_COLON                = 0x3A; /* : */
-var CHAR_GREATER_THAN         = 0x3E; /* > */
-var CHAR_QUESTION             = 0x3F; /* ? */
-var CHAR_COMMERCIAL_AT        = 0x40; /* @ */
-var CHAR_LEFT_SQUARE_BRACKET  = 0x5B; /* [ */
-var CHAR_RIGHT_SQUARE_BRACKET = 0x5D; /* ] */
-var CHAR_GRAVE_ACCENT         = 0x60; /* ` */
-var CHAR_LEFT_CURLY_BRACKET   = 0x7B; /* { */
-var CHAR_VERTICAL_LINE        = 0x7C; /* | */
-var CHAR_RIGHT_CURLY_BRACKET  = 0x7D; /* } */
-
-var ESCAPE_SEQUENCES = {};
-
-ESCAPE_SEQUENCES[0x00]   = '\\0';
-ESCAPE_SEQUENCES[0x07]   = '\\a';
-ESCAPE_SEQUENCES[0x08]   = '\\b';
-ESCAPE_SEQUENCES[0x09]   = '\\t';
-ESCAPE_SEQUENCES[0x0A]   = '\\n';
-ESCAPE_SEQUENCES[0x0B]   = '\\v';
-ESCAPE_SEQUENCES[0x0C]   = '\\f';
-ESCAPE_SEQUENCES[0x0D]   = '\\r';
-ESCAPE_SEQUENCES[0x1B]   = '\\e';
-ESCAPE_SEQUENCES[0x22]   = '\\"';
-ESCAPE_SEQUENCES[0x5C]   = '\\\\';
-ESCAPE_SEQUENCES[0x85]   = '\\N';
-ESCAPE_SEQUENCES[0xA0]   = '\\_';
-ESCAPE_SEQUENCES[0x2028] = '\\L';
-ESCAPE_SEQUENCES[0x2029] = '\\P';
-
-var DEPRECATED_BOOLEANS_SYNTAX = [
-  'y', 'Y', 'yes', 'Yes', 'YES', 'on', 'On', 'ON',
-  'n', 'N', 'no', 'No', 'NO', 'off', 'Off', 'OFF'
-];
-
-function compileStyleMap(schema, map) {
-  var result, keys, index, length, tag, style, type;
-
-  if (map === null) return {};
-
-  result = {};
-  keys = Object.keys(map);
-
-  for (index = 0, length = keys.length; index < length; index += 1) {
-    tag = keys[index];
-    style = String(map[tag]);
-
-    if (tag.slice(0, 2) === '!!') {
-      tag = 'tag:yaml.org,2002:' + tag.slice(2);
-    }
-    type = schema.compiledTypeMap['fallback'][tag];
-
-    if (type && _hasOwnProperty.call(type.styleAliases, style)) {
-      style = type.styleAliases[style];
-    }
-
-    result[tag] = style;
-  }
-
-  return result;
-}
-
-function encodeHex(character) {
-  var string, handle, length;
-
-  string = character.toString(16).toUpperCase();
-
-  if (character <= 0xFF) {
-    handle = 'x';
-    length = 2;
-  } else if (character <= 0xFFFF) {
-    handle = 'u';
-    length = 4;
-  } else if (character <= 0xFFFFFFFF) {
-    handle = 'U';
-    length = 8;
-  } else {
-    throw new YAMLException('code point within a string may not be greater than 0xFFFFFFFF');
-  }
-
-  return '\\' + handle + common.repeat('0', length - string.length) + string;
-}
-
-function State(options) {
-  this.schema        = options['schema'] || DEFAULT_FULL_SCHEMA;
-  this.indent        = Math.max(1, (options['indent'] || 2));
-  this.noArrayIndent = options['noArrayIndent'] || false;
-  this.skipInvalid   = options['skipInvalid'] || false;
-  this.flowLevel     = (common.isNothing(options['flowLevel']) ? -1 : options['flowLevel']);
-  this.styleMap      = compileStyleMap(this.schema, options['styles'] || null);
-  this.sortKeys      = options['sortKeys'] || false;
-  this.lineWidth     = options['lineWidth'] || 80;
-  this.noRefs        = options['noRefs'] || false;
-  this.noCompatMode  = options['noCompatMode'] || false;
-  this.condenseFlow  = options['condenseFlow'] || false;
-
-  this.implicitTypes = this.schema.compiledImplicit;
-  this.explicitTypes = this.schema.compiledExplicit;
-
-  this.tag = null;
-  this.result = '';
-
-  this.duplicates = [];
-  this.usedDuplicates = null;
-}
-
-// Indents every line in a string. Empty lines (\n only) are not indented.
-function indentString(string, spaces) {
-  var ind = common.repeat(' ', spaces),
-      position = 0,
-      next = -1,
-      result = '',
-      line,
-      length = string.length;
-
-  while (position < length) {
-    next = string.indexOf('\n', position);
-    if (next === -1) {
-      line = string.slice(position);
-      position = length;
-    } else {
-      line = string.slice(position, next + 1);
-      position = next + 1;
-    }
-
-    if (line.length && line !== '\n') result += ind;
-
-    result += line;
-  }
-
-  return result;
-}
-
-function generateNextLine(state, level) {
-  return '\n' + common.repeat(' ', state.indent * level);
-}
-
-function testImplicitResolving(state, str) {
-  var index, length, type;
-
-  for (index = 0, length = state.implicitTypes.length; index < length; index += 1) {
-    type = state.implicitTypes[index];
-
-    if (type.resolve(str)) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-// [33] s-white ::= s-space | s-tab
-function isWhitespace(c) {
-  return c === CHAR_SPACE || c === CHAR_TAB;
-}
-
-// Returns true if the character can be printed without escaping.
-// From YAML 1.2: "any allowed characters known to be non-printable
-// should also be escaped. [However,] This isn’t mandatory"
-// Derived from nb-char - \t - #x85 - #xA0 - #x2028 - #x2029.
-function isPrintable(c) {
-  return  (0x00020 <= c && c <= 0x00007E)
-      || ((0x000A1 <= c && c <= 0x00D7FF) && c !== 0x2028 && c !== 0x2029)
-      || ((0x0E000 <= c && c <= 0x00FFFD) && c !== 0xFEFF /* BOM */)
-      ||  (0x10000 <= c && c <= 0x10FFFF);
-}
-
-// Simplified test for values allowed after the first character in plain style.
-function isPlainSafe(c) {
-  // Uses a subset of nb-char - c-flow-indicator - ":" - "#"
-  // where nb-char ::= c-printable - b-char - c-byte-order-mark.
-  return isPrintable(c) && c !== 0xFEFF
-    // - c-flow-indicator
-    && c !== CHAR_COMMA
-    && c !== CHAR_LEFT_SQUARE_BRACKET
-    && c !== CHAR_RIGHT_SQUARE_BRACKET
-    && c !== CHAR_LEFT_CURLY_BRACKET
-    && c !== CHAR_RIGHT_CURLY_BRACKET
-    // - ":" - "#"
-    && c !== CHAR_COLON
-    && c !== CHAR_SHARP;
-}
-
-// Simplified test for values allowed as the first character in plain style.
-function isPlainSafeFirst(c) {
-  // Uses a subset of ns-char - c-indicator
-  // where ns-char = nb-char - s-white.
-  return isPrintable(c) && c !== 0xFEFF
-    && !isWhitespace(c) // - s-white
-    // - (c-indicator ::=
-    // “-” | “?” | “:” | “,” | “[” | “]” | “{” | “}”
-    && c !== CHAR_MINUS
-    && c !== CHAR_QUESTION
-    && c !== CHAR_COLON
-    && c !== CHAR_COMMA
-    && c !== CHAR_LEFT_SQUARE_BRACKET
-    && c !== CHAR_RIGHT_SQUARE_BRACKET
-    && c !== CHAR_LEFT_CURLY_BRACKET
-    && c !== CHAR_RIGHT_CURLY_BRACKET
-    // | “#” | “&” | “*” | “!” | “|” | “>” | “'” | “"”
-    && c !== CHAR_SHARP
-    && c !== CHAR_AMPERSAND
-    && c !== CHAR_ASTERISK
-    && c !== CHAR_EXCLAMATION
-    && c !== CHAR_VERTICAL_LINE
-    && c !== CHAR_GREATER_THAN
-    && c !== CHAR_SINGLE_QUOTE
-    && c !== CHAR_DOUBLE_QUOTE
-    // | “%” | “@” | “`”)
-    && c !== CHAR_PERCENT
-    && c !== CHAR_COMMERCIAL_AT
-    && c !== CHAR_GRAVE_ACCENT;
-}
-
-// Determines whether block indentation indicator is required.
-function needIndentIndicator(string) {
-  var leadingSpaceRe = /^\n* /;
-  return leadingSpaceRe.test(string);
-}
-
-var STYLE_PLAIN   = 1,
-    STYLE_SINGLE  = 2,
-    STYLE_LITERAL = 3,
-    STYLE_FOLDED  = 4,
-    STYLE_DOUBLE  = 5;
-
-// Determines which scalar styles are possible and returns the preferred style.
-// lineWidth = -1 => no limit.
-// Pre-conditions: str.length > 0.
-// Post-conditions:
-//    STYLE_PLAIN or STYLE_SINGLE => no \n are in the string.
-//    STYLE_LITERAL => no lines are suitable for folding (or lineWidth is -1).
-//    STYLE_FOLDED => a line > lineWidth and can be folded (and lineWidth != -1).
-function chooseScalarStyle(string, singleLineOnly, indentPerLevel, lineWidth, testAmbiguousType) {
-  var i;
-  var char;
-  var hasLineBreak = false;
-  var hasFoldableLine = false; // only checked if shouldTrackWidth
-  var shouldTrackWidth = lineWidth !== -1;
-  var previousLineBreak = -1; // count the first line correctly
-  var plain = isPlainSafeFirst(string.charCodeAt(0))
-          && !isWhitespace(string.charCodeAt(string.length - 1));
-
-  if (singleLineOnly) {
-    // Case: no block styles.
-    // Check for disallowed characters to rule out plain and single.
-    for (i = 0; i < string.length; i++) {
-      char = string.charCodeAt(i);
-      if (!isPrintable(char)) {
-        return STYLE_DOUBLE;
-      }
-      plain = plain && isPlainSafe(char);
-    }
-  } else {
-    // Case: block styles permitted.
-    for (i = 0; i < string.length; i++) {
-      char = string.charCodeAt(i);
-      if (char === CHAR_LINE_FEED) {
-        hasLineBreak = true;
-        // Check if any line can be folded.
-        if (shouldTrackWidth) {
-          hasFoldableLine = hasFoldableLine ||
-            // Foldable line = too long, and not more-indented.
-            (i - previousLineBreak - 1 > lineWidth &&
-             string[previousLineBreak + 1] !== ' ');
-          previousLineBreak = i;
-        }
-      } else if (!isPrintable(char)) {
-        return STYLE_DOUBLE;
-      }
-      plain = plain && isPlainSafe(char);
-    }
-    // in case the end is missing a \n
-    hasFoldableLine = hasFoldableLine || (shouldTrackWidth &&
-      (i - previousLineBreak - 1 > lineWidth &&
-       string[previousLineBreak + 1] !== ' '));
-  }
-  // Although every style can represent \n without escaping, prefer block styles
-  // for multiline, since they're more readable and they don't add empty lines.
-  // Also prefer folding a super-long line.
-  if (!hasLineBreak && !hasFoldableLine) {
-    // Strings interpretable as another type have to be quoted;
-    // e.g. the string 'true' vs. the boolean true.
-    return plain && !testAmbiguousType(string)
-      ? STYLE_PLAIN : STYLE_SINGLE;
-  }
-  // Edge case: block indentation indicator can only have one digit.
-  if (indentPerLevel > 9 && needIndentIndicator(string)) {
-    return STYLE_DOUBLE;
-  }
-  // At this point we know block styles are valid.
-  // Prefer literal style unless we want to fold.
-  return hasFoldableLine ? STYLE_FOLDED : STYLE_LITERAL;
-}
-
-// Note: line breaking/folding is implemented for only the folded style.
-// NB. We drop the last trailing newline (if any) of a returned block scalar
-//  since the dumper adds its own newline. This always works:
-//    • No ending newline => unaffected; already using strip "-" chomping.
-//    • Ending newline    => removed then restored.
-//  Importantly, this keeps the "+" chomp indicator from gaining an extra line.
-function writeScalar(state, string, level, iskey) {
-  state.dump = (function () {
-    if (string.length === 0) {
-      return "''";
-    }
-    if (!state.noCompatMode &&
-        DEPRECATED_BOOLEANS_SYNTAX.indexOf(string) !== -1) {
-      return "'" + string + "'";
-    }
-
-    var indent = state.indent * Math.max(1, level); // no 0-indent scalars
-    // As indentation gets deeper, let the width decrease monotonically
-    // to the lower bound min(state.lineWidth, 40).
-    // Note that this implies
-    //  state.lineWidth ≤ 40 + state.indent: width is fixed at the lower bound.
-    //  state.lineWidth > 40 + state.indent: width decreases until the lower bound.
-    // This behaves better than a constant minimum width which disallows narrower options,
-    // or an indent threshold which causes the width to suddenly increase.
-    var lineWidth = state.lineWidth === -1
-      ? -1 : Math.max(Math.min(state.lineWidth, 40), state.lineWidth - indent);
-
-    // Without knowing if keys are implicit/explicit, assume implicit for safety.
-    var singleLineOnly = iskey
-      // No block styles in flow mode.
-      || (state.flowLevel > -1 && level >= state.flowLevel);
-    function testAmbiguity(string) {
-      return testImplicitResolving(state, string);
-    }
-
-    switch (chooseScalarStyle(string, singleLineOnly, state.indent, lineWidth, testAmbiguity)) {
-      case STYLE_PLAIN:
-        return string;
-      case STYLE_SINGLE:
-        return "'" + string.replace(/'/g, "''") + "'";
-      case STYLE_LITERAL:
-        return '|' + blockHeader(string, state.indent)
-          + dropEndingNewline(indentString(string, indent));
-      case STYLE_FOLDED:
-        return '>' + blockHeader(string, state.indent)
-          + dropEndingNewline(indentString(foldString(string, lineWidth), indent));
-      case STYLE_DOUBLE:
-        return '"' + escapeString(string, lineWidth) + '"';
-      default:
-        throw new YAMLException('impossible error: invalid scalar style');
-    }
-  }());
-}
-
-// Pre-conditions: string is valid for a block scalar, 1 <= indentPerLevel <= 9.
-function blockHeader(string, indentPerLevel) {
-  var indentIndicator = needIndentIndicator(string) ? String(indentPerLevel) : '';
-
-  // note the special case: the string '\n' counts as a "trailing" empty line.
-  var clip =          string[string.length - 1] === '\n';
-  var keep = clip && (string[string.length - 2] === '\n' || string === '\n');
-  var chomp = keep ? '+' : (clip ? '' : '-');
-
-  return indentIndicator + chomp + '\n';
-}
-
-// (See the note for writeScalar.)
-function dropEndingNewline(string) {
-  return string[string.length - 1] === '\n' ? string.slice(0, -1) : string;
-}
-
-// Note: a long line without a suitable break point will exceed the width limit.
-// Pre-conditions: every char in str isPrintable, str.length > 0, width > 0.
-function foldString(string, width) {
-  // In folded style, $k$ consecutive newlines output as $k+1$ newlines—
-  // unless they're before or after a more-indented line, or at the very
-  // beginning or end, in which case $k$ maps to $k$.
-  // Therefore, parse each chunk as newline(s) followed by a content line.
-  var lineRe = /(\n+)([^\n]*)/g;
-
-  // first line (possibly an empty line)
-  var result = (function () {
-    var nextLF = string.indexOf('\n');
-    nextLF = nextLF !== -1 ? nextLF : string.length;
-    lineRe.lastIndex = nextLF;
-    return foldLine(string.slice(0, nextLF), width);
-  }());
-  // If we haven't reached the first content line yet, don't add an extra \n.
-  var prevMoreIndented = string[0] === '\n' || string[0] === ' ';
-  var moreIndented;
-
-  // rest of the lines
-  var match;
-  while ((match = lineRe.exec(string))) {
-    var prefix = match[1], line = match[2];
-    moreIndented = (line[0] === ' ');
-    result += prefix
-      + (!prevMoreIndented && !moreIndented && line !== ''
-        ? '\n' : '')
-      + foldLine(line, width);
-    prevMoreIndented = moreIndented;
-  }
-
-  return result;
-}
-
-// Greedy line breaking.
-// Picks the longest line under the limit each time,
-// otherwise settles for the shortest line over the limit.
-// NB. More-indented lines *cannot* be folded, as that would add an extra \n.
-function foldLine(line, width) {
-  if (line === '' || line[0] === ' ') return line;
-
-  // Since a more-indented line adds a \n, breaks can't be followed by a space.
-  var breakRe = / [^ ]/g; // note: the match index will always be <= length-2.
-  var match;
-  // start is an inclusive index. end, curr, and next are exclusive.
-  var start = 0, end, curr = 0, next = 0;
-  var result = '';
-
-  // Invariants: 0 <= start <= length-1.
-  //   0 <= curr <= next <= max(0, length-2). curr - start <= width.
-  // Inside the loop:
-  //   A match implies length >= 2, so curr and next are <= length-2.
-  while ((match = breakRe.exec(line))) {
-    next = match.index;
-    // maintain invariant: curr - start <= width
-    if (next - start > width) {
-      end = (curr > start) ? curr : next; // derive end <= length-2
-      result += '\n' + line.slice(start, end);
-      // skip the space that was output as \n
-      start = end + 1;                    // derive start <= length-1
-    }
-    curr = next;
-  }
-
-  // By the invariants, start <= length-1, so there is something left over.
-  // It is either the whole string or a part starting from non-whitespace.
-  result += '\n';
-  // Insert a break if the remainder is too long and there is a break available.
-  if (line.length - start > width && curr > start) {
-    result += line.slice(start, curr) + '\n' + line.slice(curr + 1);
-  } else {
-    result += line.slice(start);
-  }
-
-  return result.slice(1); // drop extra \n joiner
-}
-
-// Escapes a double-quoted string.
-function escapeString(string) {
-  var result = '';
-  var char, nextChar;
-  var escapeSeq;
-
-  for (var i = 0; i < string.length; i++) {
-    char = string.charCodeAt(i);
-    // Check for surrogate pairs (reference Unicode 3.0 section "3.7 Surrogates").
-    if (char >= 0xD800 && char <= 0xDBFF/* high surrogate */) {
-      nextChar = string.charCodeAt(i + 1);
-      if (nextChar >= 0xDC00 && nextChar <= 0xDFFF/* low surrogate */) {
-        // Combine the surrogate pair and store it escaped.
-        result += encodeHex((char - 0xD800) * 0x400 + nextChar - 0xDC00 + 0x10000);
-        // Advance index one extra since we already used that char here.
-        i++; continue;
-      }
-    }
-    escapeSeq = ESCAPE_SEQUENCES[char];
-    result += !escapeSeq && isPrintable(char)
-      ? string[i]
-      : escapeSeq || encodeHex(char);
-  }
-
-  return result;
-}
-
-function writeFlowSequence(state, level, object) {
-  var _result = '',
-      _tag    = state.tag,
-      index,
-      length;
-
-  for (index = 0, length = object.length; index < length; index += 1) {
-    // Write only valid elements.
-    if (writeNode(state, level, object[index], false, false)) {
-      if (index !== 0) _result += ',' + (!state.condenseFlow ? ' ' : '');
-      _result += state.dump;
-    }
-  }
-
-  state.tag = _tag;
-  state.dump = '[' + _result + ']';
-}
-
-function writeBlockSequence(state, level, object, compact) {
-  var _result = '',
-      _tag    = state.tag,
-      index,
-      length;
-
-  for (index = 0, length = object.length; index < length; index += 1) {
-    // Write only valid elements.
-    if (writeNode(state, level + 1, object[index], true, true)) {
-      if (!compact || index !== 0) {
-        _result += generateNextLine(state, level);
-      }
-
-      if (state.dump && CHAR_LINE_FEED === state.dump.charCodeAt(0)) {
-        _result += '-';
-      } else {
-        _result += '- ';
-      }
-
-      _result += state.dump;
-    }
-  }
-
-  state.tag = _tag;
-  state.dump = _result || '[]'; // Empty sequence if no valid values.
-}
-
-function writeFlowMapping(state, level, object) {
-  var _result       = '',
-      _tag          = state.tag,
-      objectKeyList = Object.keys(object),
-      index,
-      length,
-      objectKey,
-      objectValue,
-      pairBuffer;
-
-  for (index = 0, length = objectKeyList.length; index < length; index += 1) {
-    pairBuffer = state.condenseFlow ? '"' : '';
-
-    if (index !== 0) pairBuffer += ', ';
-
-    objectKey = objectKeyList[index];
-    objectValue = object[objectKey];
-
-    if (!writeNode(state, level, objectKey, false, false)) {
-      continue; // Skip this pair because of invalid key;
-    }
-
-    if (state.dump.length > 1024) pairBuffer += '? ';
-
-    pairBuffer += state.dump + (state.condenseFlow ? '"' : '') + ':' + (state.condenseFlow ? '' : ' ');
-
-    if (!writeNode(state, level, objectValue, false, false)) {
-      continue; // Skip this pair because of invalid value.
-    }
-
-    pairBuffer += state.dump;
-
-    // Both key and value are valid.
-    _result += pairBuffer;
-  }
-
-  state.tag = _tag;
-  state.dump = '{' + _result + '}';
-}
-
-function writeBlockMapping(state, level, object, compact) {
-  var _result       = '',
-      _tag          = state.tag,
-      objectKeyList = Object.keys(object),
-      index,
-      length,
-      objectKey,
-      objectValue,
-      explicitPair,
-      pairBuffer;
-
-  // Allow sorting keys so that the output file is deterministic
-  if (state.sortKeys === true) {
-    // Default sorting
-    objectKeyList.sort();
-  } else if (typeof state.sortKeys === 'function') {
-    // Custom sort function
-    objectKeyList.sort(state.sortKeys);
-  } else if (state.sortKeys) {
-    // Something is wrong
-    throw new YAMLException('sortKeys must be a boolean or a function');
-  }
-
-  for (index = 0, length = objectKeyList.length; index < length; index += 1) {
-    pairBuffer = '';
-
-    if (!compact || index !== 0) {
-      pairBuffer += generateNextLine(state, level);
-    }
-
-    objectKey = objectKeyList[index];
-    objectValue = object[objectKey];
-
-    if (!writeNode(state, level + 1, objectKey, true, true, true)) {
-      continue; // Skip this pair because of invalid key.
-    }
-
-    explicitPair = (state.tag !== null && state.tag !== '?') ||
-                   (state.dump && state.dump.length > 1024);
-
-    if (explicitPair) {
-      if (state.dump && CHAR_LINE_FEED === state.dump.charCodeAt(0)) {
-        pairBuffer += '?';
-      } else {
-        pairBuffer += '? ';
-      }
-    }
-
-    pairBuffer += state.dump;
-
-    if (explicitPair) {
-      pairBuffer += generateNextLine(state, level);
-    }
-
-    if (!writeNode(state, level + 1, objectValue, true, explicitPair)) {
-      continue; // Skip this pair because of invalid value.
-    }
-
-    if (state.dump && CHAR_LINE_FEED === state.dump.charCodeAt(0)) {
-      pairBuffer += ':';
-    } else {
-      pairBuffer += ': ';
-    }
-
-    pairBuffer += state.dump;
-
-    // Both key and value are valid.
-    _result += pairBuffer;
-  }
-
-  state.tag = _tag;
-  state.dump = _result || '{}'; // Empty mapping if no valid pairs.
-}
-
-function detectType(state, object, explicit) {
-  var _result, typeList, index, length, type, style;
-
-  typeList = explicit ? state.explicitTypes : state.implicitTypes;
-
-  for (index = 0, length = typeList.length; index < length; index += 1) {
-    type = typeList[index];
-
-    if ((type.instanceOf  || type.predicate) &&
-        (!type.instanceOf || ((typeof object === 'object') && (object instanceof type.instanceOf))) &&
-        (!type.predicate  || type.predicate(object))) {
-
-      state.tag = explicit ? type.tag : '?';
-
-      if (type.represent) {
-        style = state.styleMap[type.tag] || type.defaultStyle;
-
-        if (_toString.call(type.represent) === '[object Function]') {
-          _result = type.represent(object, style);
-        } else if (_hasOwnProperty.call(type.represent, style)) {
-          _result = type.represent[style](object, style);
-        } else {
-          throw new YAMLException('!<' + type.tag + '> tag resolver accepts not "' + style + '" style');
-        }
-
-        state.dump = _result;
-      }
-
-      return true;
-    }
-  }
-
-  return false;
-}
-
-// Serializes `object` and writes it to global `result`.
-// Returns true on success, or false on invalid object.
-//
-function writeNode(state, level, object, block, compact, iskey) {
-  state.tag = null;
-  state.dump = object;
-
-  if (!detectType(state, object, false)) {
-    detectType(state, object, true);
-  }
-
-  var type = _toString.call(state.dump);
-
-  if (block) {
-    block = (state.flowLevel < 0 || state.flowLevel > level);
-  }
-
-  var objectOrArray = type === '[object Object]' || type === '[object Array]',
-      duplicateIndex,
-      duplicate;
-
-  if (objectOrArray) {
-    duplicateIndex = state.duplicates.indexOf(object);
-    duplicate = duplicateIndex !== -1;
-  }
-
-  if ((state.tag !== null && state.tag !== '?') || duplicate || (state.indent !== 2 && level > 0)) {
-    compact = false;
-  }
-
-  if (duplicate && state.usedDuplicates[duplicateIndex]) {
-    state.dump = '*ref_' + duplicateIndex;
-  } else {
-    if (objectOrArray && duplicate && !state.usedDuplicates[duplicateIndex]) {
-      state.usedDuplicates[duplicateIndex] = true;
-    }
-    if (type === '[object Object]') {
-      if (block && (Object.keys(state.dump).length !== 0)) {
-        writeBlockMapping(state, level, state.dump, compact);
-        if (duplicate) {
-          state.dump = '&ref_' + duplicateIndex + state.dump;
-        }
-      } else {
-        writeFlowMapping(state, level, state.dump);
-        if (duplicate) {
-          state.dump = '&ref_' + duplicateIndex + ' ' + state.dump;
-        }
-      }
-    } else if (type === '[object Array]') {
-      var arrayLevel = (state.noArrayIndent && (level > 0)) ? level - 1 : level;
-      if (block && (state.dump.length !== 0)) {
-        writeBlockSequence(state, arrayLevel, state.dump, compact);
-        if (duplicate) {
-          state.dump = '&ref_' + duplicateIndex + state.dump;
-        }
-      } else {
-        writeFlowSequence(state, arrayLevel, state.dump);
-        if (duplicate) {
-          state.dump = '&ref_' + duplicateIndex + ' ' + state.dump;
-        }
-      }
-    } else if (type === '[object String]') {
-      if (state.tag !== '?') {
-        writeScalar(state, state.dump, level, iskey);
-      }
-    } else {
-      if (state.skipInvalid) return false;
-      throw new YAMLException('unacceptable kind of an object to dump ' + type);
-    }
-
-    if (state.tag !== null && state.tag !== '?') {
-      state.dump = '!<' + state.tag + '> ' + state.dump;
-    }
-  }
-
-  return true;
-}
-
-function getDuplicateReferences(object, state) {
-  var objects = [],
-      duplicatesIndexes = [],
-      index,
-      length;
-
-  inspectNode(object, objects, duplicatesIndexes);
-
-  for (index = 0, length = duplicatesIndexes.length; index < length; index += 1) {
-    state.duplicates.push(objects[duplicatesIndexes[index]]);
-  }
-  state.usedDuplicates = new Array(length);
-}
-
-function inspectNode(object, objects, duplicatesIndexes) {
-  var objectKeyList,
-      index,
-      length;
-
-  if (object !== null && typeof object === 'object') {
-    index = objects.indexOf(object);
-    if (index !== -1) {
-      if (duplicatesIndexes.indexOf(index) === -1) {
-        duplicatesIndexes.push(index);
-      }
-    } else {
-      objects.push(object);
-
-      if (Array.isArray(object)) {
-        for (index = 0, length = object.length; index < length; index += 1) {
-          inspectNode(object[index], objects, duplicatesIndexes);
-        }
-      } else {
-        objectKeyList = Object.keys(object);
-
-        for (index = 0, length = objectKeyList.length; index < length; index += 1) {
-          inspectNode(object[objectKeyList[index]], objects, duplicatesIndexes);
-        }
-      }
-    }
-  }
-}
-
-function dump(input, options) {
-  options = options || {};
-
-  var state = new State(options);
-
-  if (!state.noRefs) getDuplicateReferences(input, state);
-
-  if (writeNode(state, 0, input, true, true)) return state.dump + '\n';
-
-  return '';
-}
-
-function safeDump(input, options) {
-  return dump(input, common.extend({ schema: DEFAULT_SAFE_SCHEMA }, options));
-}
-
-module.exports.dump     = dump;
-module.exports.safeDump = safeDump;
-
-
-/***/ }),
-/* 282 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-/*eslint-disable max-len,no-use-before-define*/
-
-var common              = __webpack_require__(43);
-var YAMLException       = __webpack_require__(54);
-var Mark                = __webpack_require__(283);
-var DEFAULT_SAFE_SCHEMA = __webpack_require__(55);
-var DEFAULT_FULL_SCHEMA = __webpack_require__(73);
-
-
-var _hasOwnProperty = Object.prototype.hasOwnProperty;
-
-
-var CONTEXT_FLOW_IN   = 1;
-var CONTEXT_FLOW_OUT  = 2;
-var CONTEXT_BLOCK_IN  = 3;
-var CONTEXT_BLOCK_OUT = 4;
-
-
-var CHOMPING_CLIP  = 1;
-var CHOMPING_STRIP = 2;
-var CHOMPING_KEEP  = 3;
-
-
-var PATTERN_NON_PRINTABLE         = /[\x00-\x08\x0B\x0C\x0E-\x1F\x7F-\x84\x86-\x9F\uFFFE\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]/;
-var PATTERN_NON_ASCII_LINE_BREAKS = /[\x85\u2028\u2029]/;
-var PATTERN_FLOW_INDICATORS       = /[,\[\]\{\}]/;
-var PATTERN_TAG_HANDLE            = /^(?:!|!!|![a-z\-]+!)$/i;
-var PATTERN_TAG_URI               = /^(?:!|[^,\[\]\{\}])(?:%[0-9a-f]{2}|[0-9a-z\-#;\/\?:@&=\+\$,_\.!~\*'\(\)\[\]])*$/i;
-
-
-function _class(obj) { return Object.prototype.toString.call(obj); }
-
-function is_EOL(c) {
-  return (c === 0x0A/* LF */) || (c === 0x0D/* CR */);
-}
-
-function is_WHITE_SPACE(c) {
-  return (c === 0x09/* Tab */) || (c === 0x20/* Space */);
-}
-
-function is_WS_OR_EOL(c) {
-  return (c === 0x09/* Tab */) ||
-         (c === 0x20/* Space */) ||
-         (c === 0x0A/* LF */) ||
-         (c === 0x0D/* CR */);
-}
-
-function is_FLOW_INDICATOR(c) {
-  return c === 0x2C/* , */ ||
-         c === 0x5B/* [ */ ||
-         c === 0x5D/* ] */ ||
-         c === 0x7B/* { */ ||
-         c === 0x7D/* } */;
-}
-
-function fromHexCode(c) {
-  var lc;
-
-  if ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */)) {
-    return c - 0x30;
-  }
-
-  /*eslint-disable no-bitwise*/
-  lc = c | 0x20;
-
-  if ((0x61/* a */ <= lc) && (lc <= 0x66/* f */)) {
-    return lc - 0x61 + 10;
-  }
-
-  return -1;
-}
-
-function escapedHexLen(c) {
-  if (c === 0x78/* x */) { return 2; }
-  if (c === 0x75/* u */) { return 4; }
-  if (c === 0x55/* U */) { return 8; }
-  return 0;
-}
-
-function fromDecimalCode(c) {
-  if ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */)) {
-    return c - 0x30;
-  }
-
-  return -1;
-}
-
-function simpleEscapeSequence(c) {
-  /* eslint-disable indent */
-  return (c === 0x30/* 0 */) ? '\x00' :
-        (c === 0x61/* a */) ? '\x07' :
-        (c === 0x62/* b */) ? '\x08' :
-        (c === 0x74/* t */) ? '\x09' :
-        (c === 0x09/* Tab */) ? '\x09' :
-        (c === 0x6E/* n */) ? '\x0A' :
-        (c === 0x76/* v */) ? '\x0B' :
-        (c === 0x66/* f */) ? '\x0C' :
-        (c === 0x72/* r */) ? '\x0D' :
-        (c === 0x65/* e */) ? '\x1B' :
-        (c === 0x20/* Space */) ? ' ' :
-        (c === 0x22/* " */) ? '\x22' :
-        (c === 0x2F/* / */) ? '/' :
-        (c === 0x5C/* \ */) ? '\x5C' :
-        (c === 0x4E/* N */) ? '\x85' :
-        (c === 0x5F/* _ */) ? '\xA0' :
-        (c === 0x4C/* L */) ? '\u2028' :
-        (c === 0x50/* P */) ? '\u2029' : '';
-}
-
-function charFromCodepoint(c) {
-  if (c <= 0xFFFF) {
-    return String.fromCharCode(c);
-  }
-  // Encode UTF-16 surrogate pair
-  // https://en.wikipedia.org/wiki/UTF-16#Code_points_U.2B010000_to_U.2B10FFFF
-  return String.fromCharCode(
-    ((c - 0x010000) >> 10) + 0xD800,
-    ((c - 0x010000) & 0x03FF) + 0xDC00
-  );
-}
-
-var simpleEscapeCheck = new Array(256); // integer, for fast access
-var simpleEscapeMap = new Array(256);
-for (var i = 0; i < 256; i++) {
-  simpleEscapeCheck[i] = simpleEscapeSequence(i) ? 1 : 0;
-  simpleEscapeMap[i] = simpleEscapeSequence(i);
-}
-
-
-function State(input, options) {
-  this.input = input;
-
-  this.filename  = options['filename']  || null;
-  this.schema    = options['schema']    || DEFAULT_FULL_SCHEMA;
-  this.onWarning = options['onWarning'] || null;
-  this.legacy    = options['legacy']    || false;
-  this.json      = options['json']      || false;
-  this.listener  = options['listener']  || null;
-
-  this.implicitTypes = this.schema.compiledImplicit;
-  this.typeMap       = this.schema.compiledTypeMap;
-
-  this.length     = input.length;
-  this.position   = 0;
-  this.line       = 0;
-  this.lineStart  = 0;
-  this.lineIndent = 0;
-
-  this.documents = [];
-
-  /*
-  this.version;
-  this.checkLineBreaks;
-  this.tagMap;
-  this.anchorMap;
-  this.tag;
-  this.anchor;
-  this.kind;
-  this.result;*/
-
-}
-
-
-function generateError(state, message) {
-  return new YAMLException(
-    message,
-    new Mark(state.filename, state.input, state.position, state.line, (state.position - state.lineStart)));
-}
-
-function throwError(state, message) {
-  throw generateError(state, message);
-}
-
-function throwWarning(state, message) {
-  if (state.onWarning) {
-    state.onWarning.call(null, generateError(state, message));
-  }
-}
-
-
-var directiveHandlers = {
-
-  YAML: function handleYamlDirective(state, name, args) {
-
-    var match, major, minor;
-
-    if (state.version !== null) {
-      throwError(state, 'duplication of %YAML directive');
-    }
-
-    if (args.length !== 1) {
-      throwError(state, 'YAML directive accepts exactly one argument');
-    }
-
-    match = /^([0-9]+)\.([0-9]+)$/.exec(args[0]);
-
-    if (match === null) {
-      throwError(state, 'ill-formed argument of the YAML directive');
-    }
-
-    major = parseInt(match[1], 10);
-    minor = parseInt(match[2], 10);
-
-    if (major !== 1) {
-      throwError(state, 'unacceptable YAML version of the document');
-    }
-
-    state.version = args[0];
-    state.checkLineBreaks = (minor < 2);
-
-    if (minor !== 1 && minor !== 2) {
-      throwWarning(state, 'unsupported YAML version of the document');
-    }
-  },
-
-  TAG: function handleTagDirective(state, name, args) {
-
-    var handle, prefix;
-
-    if (args.length !== 2) {
-      throwError(state, 'TAG directive accepts exactly two arguments');
-    }
-
-    handle = args[0];
-    prefix = args[1];
-
-    if (!PATTERN_TAG_HANDLE.test(handle)) {
-      throwError(state, 'ill-formed tag handle (first argument) of the TAG directive');
-    }
-
-    if (_hasOwnProperty.call(state.tagMap, handle)) {
-      throwError(state, 'there is a previously declared suffix for "' + handle + '" tag handle');
-    }
-
-    if (!PATTERN_TAG_URI.test(prefix)) {
-      throwError(state, 'ill-formed tag prefix (second argument) of the TAG directive');
-    }
-
-    state.tagMap[handle] = prefix;
-  }
-};
-
-
-function captureSegment(state, start, end, checkJson) {
-  var _position, _length, _character, _result;
-
-  if (start < end) {
-    _result = state.input.slice(start, end);
-
-    if (checkJson) {
-      for (_position = 0, _length = _result.length; _position < _length; _position += 1) {
-        _character = _result.charCodeAt(_position);
-        if (!(_character === 0x09 ||
-              (0x20 <= _character && _character <= 0x10FFFF))) {
-          throwError(state, 'expected valid JSON character');
-        }
-      }
-    } else if (PATTERN_NON_PRINTABLE.test(_result)) {
-      throwError(state, 'the stream contains non-printable characters');
-    }
-
-    state.result += _result;
-  }
-}
-
-function mergeMappings(state, destination, source, overridableKeys) {
-  var sourceKeys, key, index, quantity;
-
-  if (!common.isObject(source)) {
-    throwError(state, 'cannot merge mappings; the provided source object is unacceptable');
-  }
-
-  sourceKeys = Object.keys(source);
-
-  for (index = 0, quantity = sourceKeys.length; index < quantity; index += 1) {
-    key = sourceKeys[index];
-
-    if (!_hasOwnProperty.call(destination, key)) {
-      destination[key] = source[key];
-      overridableKeys[key] = true;
-    }
-  }
-}
-
-function storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, valueNode, startLine, startPos) {
-  var index, quantity;
-
-  // The output is a plain object here, so keys can only be strings.
-  // We need to convert keyNode to a string, but doing so can hang the process
-  // (deeply nested arrays that explode exponentially using aliases).
-  if (Array.isArray(keyNode)) {
-    keyNode = Array.prototype.slice.call(keyNode);
-
-    for (index = 0, quantity = keyNode.length; index < quantity; index += 1) {
-      if (Array.isArray(keyNode[index])) {
-        throwError(state, 'nested arrays are not supported inside keys');
-      }
-
-      if (typeof keyNode === 'object' && _class(keyNode[index]) === '[object Object]') {
-        keyNode[index] = '[object Object]';
-      }
-    }
-  }
-
-  // Avoid code execution in load() via toString property
-  // (still use its own toString for arrays, timestamps,
-  // and whatever user schema extensions happen to have @@toStringTag)
-  if (typeof keyNode === 'object' && _class(keyNode) === '[object Object]') {
-    keyNode = '[object Object]';
-  }
-
-
-  keyNode = String(keyNode);
-
-  if (_result === null) {
-    _result = {};
-  }
-
-  if (keyTag === 'tag:yaml.org,2002:merge') {
-    if (Array.isArray(valueNode)) {
-      for (index = 0, quantity = valueNode.length; index < quantity; index += 1) {
-        mergeMappings(state, _result, valueNode[index], overridableKeys);
-      }
-    } else {
-      mergeMappings(state, _result, valueNode, overridableKeys);
-    }
-  } else {
-    if (!state.json &&
-        !_hasOwnProperty.call(overridableKeys, keyNode) &&
-        _hasOwnProperty.call(_result, keyNode)) {
-      state.line = startLine || state.line;
-      state.position = startPos || state.position;
-      throwError(state, 'duplicated mapping key');
-    }
-    _result[keyNode] = valueNode;
-    delete overridableKeys[keyNode];
-  }
-
-  return _result;
-}
-
-function readLineBreak(state) {
-  var ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch === 0x0A/* LF */) {
-    state.position++;
-  } else if (ch === 0x0D/* CR */) {
-    state.position++;
-    if (state.input.charCodeAt(state.position) === 0x0A/* LF */) {
-      state.position++;
-    }
-  } else {
-    throwError(state, 'a line break is expected');
-  }
-
-  state.line += 1;
-  state.lineStart = state.position;
-}
-
-function skipSeparationSpace(state, allowComments, checkIndent) {
-  var lineBreaks = 0,
-      ch = state.input.charCodeAt(state.position);
-
-  while (ch !== 0) {
-    while (is_WHITE_SPACE(ch)) {
-      ch = state.input.charCodeAt(++state.position);
-    }
-
-    if (allowComments && ch === 0x23/* # */) {
-      do {
-        ch = state.input.charCodeAt(++state.position);
-      } while (ch !== 0x0A/* LF */ && ch !== 0x0D/* CR */ && ch !== 0);
-    }
-
-    if (is_EOL(ch)) {
-      readLineBreak(state);
-
-      ch = state.input.charCodeAt(state.position);
-      lineBreaks++;
-      state.lineIndent = 0;
-
-      while (ch === 0x20/* Space */) {
-        state.lineIndent++;
-        ch = state.input.charCodeAt(++state.position);
-      }
-    } else {
-      break;
-    }
-  }
-
-  if (checkIndent !== -1 && lineBreaks !== 0 && state.lineIndent < checkIndent) {
-    throwWarning(state, 'deficient indentation');
-  }
-
-  return lineBreaks;
-}
-
-function testDocumentSeparator(state) {
-  var _position = state.position,
-      ch;
-
-  ch = state.input.charCodeAt(_position);
-
-  // Condition state.position === state.lineStart is tested
-  // in parent on each call, for efficiency. No needs to test here again.
-  if ((ch === 0x2D/* - */ || ch === 0x2E/* . */) &&
-      ch === state.input.charCodeAt(_position + 1) &&
-      ch === state.input.charCodeAt(_position + 2)) {
-
-    _position += 3;
-
-    ch = state.input.charCodeAt(_position);
-
-    if (ch === 0 || is_WS_OR_EOL(ch)) {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-function writeFoldedLines(state, count) {
-  if (count === 1) {
-    state.result += ' ';
-  } else if (count > 1) {
-    state.result += common.repeat('\n', count - 1);
-  }
-}
-
-
-function readPlainScalar(state, nodeIndent, withinFlowCollection) {
-  var preceding,
-      following,
-      captureStart,
-      captureEnd,
-      hasPendingContent,
-      _line,
-      _lineStart,
-      _lineIndent,
-      _kind = state.kind,
-      _result = state.result,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (is_WS_OR_EOL(ch)      ||
-      is_FLOW_INDICATOR(ch) ||
-      ch === 0x23/* # */    ||
-      ch === 0x26/* & */    ||
-      ch === 0x2A/* * */    ||
-      ch === 0x21/* ! */    ||
-      ch === 0x7C/* | */    ||
-      ch === 0x3E/* > */    ||
-      ch === 0x27/* ' */    ||
-      ch === 0x22/* " */    ||
-      ch === 0x25/* % */    ||
-      ch === 0x40/* @ */    ||
-      ch === 0x60/* ` */) {
-    return false;
-  }
-
-  if (ch === 0x3F/* ? */ || ch === 0x2D/* - */) {
-    following = state.input.charCodeAt(state.position + 1);
-
-    if (is_WS_OR_EOL(following) ||
-        withinFlowCollection && is_FLOW_INDICATOR(following)) {
-      return false;
-    }
-  }
-
-  state.kind = 'scalar';
-  state.result = '';
-  captureStart = captureEnd = state.position;
-  hasPendingContent = false;
-
-  while (ch !== 0) {
-    if (ch === 0x3A/* : */) {
-      following = state.input.charCodeAt(state.position + 1);
-
-      if (is_WS_OR_EOL(following) ||
-          withinFlowCollection && is_FLOW_INDICATOR(following)) {
-        break;
-      }
-
-    } else if (ch === 0x23/* # */) {
-      preceding = state.input.charCodeAt(state.position - 1);
-
-      if (is_WS_OR_EOL(preceding)) {
-        break;
-      }
-
-    } else if ((state.position === state.lineStart && testDocumentSeparator(state)) ||
-               withinFlowCollection && is_FLOW_INDICATOR(ch)) {
-      break;
-
-    } else if (is_EOL(ch)) {
-      _line = state.line;
-      _lineStart = state.lineStart;
-      _lineIndent = state.lineIndent;
-      skipSeparationSpace(state, false, -1);
-
-      if (state.lineIndent >= nodeIndent) {
-        hasPendingContent = true;
-        ch = state.input.charCodeAt(state.position);
-        continue;
-      } else {
-        state.position = captureEnd;
-        state.line = _line;
-        state.lineStart = _lineStart;
-        state.lineIndent = _lineIndent;
-        break;
-      }
-    }
-
-    if (hasPendingContent) {
-      captureSegment(state, captureStart, captureEnd, false);
-      writeFoldedLines(state, state.line - _line);
-      captureStart = captureEnd = state.position;
-      hasPendingContent = false;
-    }
-
-    if (!is_WHITE_SPACE(ch)) {
-      captureEnd = state.position + 1;
-    }
-
-    ch = state.input.charCodeAt(++state.position);
-  }
-
-  captureSegment(state, captureStart, captureEnd, false);
-
-  if (state.result) {
-    return true;
-  }
-
-  state.kind = _kind;
-  state.result = _result;
-  return false;
-}
-
-function readSingleQuotedScalar(state, nodeIndent) {
-  var ch,
-      captureStart, captureEnd;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch !== 0x27/* ' */) {
-    return false;
-  }
-
-  state.kind = 'scalar';
-  state.result = '';
-  state.position++;
-  captureStart = captureEnd = state.position;
-
-  while ((ch = state.input.charCodeAt(state.position)) !== 0) {
-    if (ch === 0x27/* ' */) {
-      captureSegment(state, captureStart, state.position, true);
-      ch = state.input.charCodeAt(++state.position);
-
-      if (ch === 0x27/* ' */) {
-        captureStart = state.position;
-        state.position++;
-        captureEnd = state.position;
-      } else {
-        return true;
-      }
-
-    } else if (is_EOL(ch)) {
-      captureSegment(state, captureStart, captureEnd, true);
-      writeFoldedLines(state, skipSeparationSpace(state, false, nodeIndent));
-      captureStart = captureEnd = state.position;
-
-    } else if (state.position === state.lineStart && testDocumentSeparator(state)) {
-      throwError(state, 'unexpected end of the document within a single quoted scalar');
-
-    } else {
-      state.position++;
-      captureEnd = state.position;
-    }
-  }
-
-  throwError(state, 'unexpected end of the stream within a single quoted scalar');
-}
-
-function readDoubleQuotedScalar(state, nodeIndent) {
-  var captureStart,
-      captureEnd,
-      hexLength,
-      hexResult,
-      tmp,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch !== 0x22/* " */) {
-    return false;
-  }
-
-  state.kind = 'scalar';
-  state.result = '';
-  state.position++;
-  captureStart = captureEnd = state.position;
-
-  while ((ch = state.input.charCodeAt(state.position)) !== 0) {
-    if (ch === 0x22/* " */) {
-      captureSegment(state, captureStart, state.position, true);
-      state.position++;
-      return true;
-
-    } else if (ch === 0x5C/* \ */) {
-      captureSegment(state, captureStart, state.position, true);
-      ch = state.input.charCodeAt(++state.position);
-
-      if (is_EOL(ch)) {
-        skipSeparationSpace(state, false, nodeIndent);
-
-        // TODO: rework to inline fn with no type cast?
-      } else if (ch < 256 && simpleEscapeCheck[ch]) {
-        state.result += simpleEscapeMap[ch];
-        state.position++;
-
-      } else if ((tmp = escapedHexLen(ch)) > 0) {
-        hexLength = tmp;
-        hexResult = 0;
-
-        for (; hexLength > 0; hexLength--) {
-          ch = state.input.charCodeAt(++state.position);
-
-          if ((tmp = fromHexCode(ch)) >= 0) {
-            hexResult = (hexResult << 4) + tmp;
-
-          } else {
-            throwError(state, 'expected hexadecimal character');
-          }
-        }
-
-        state.result += charFromCodepoint(hexResult);
-
-        state.position++;
-
-      } else {
-        throwError(state, 'unknown escape sequence');
-      }
-
-      captureStart = captureEnd = state.position;
-
-    } else if (is_EOL(ch)) {
-      captureSegment(state, captureStart, captureEnd, true);
-      writeFoldedLines(state, skipSeparationSpace(state, false, nodeIndent));
-      captureStart = captureEnd = state.position;
-
-    } else if (state.position === state.lineStart && testDocumentSeparator(state)) {
-      throwError(state, 'unexpected end of the document within a double quoted scalar');
-
-    } else {
-      state.position++;
-      captureEnd = state.position;
-    }
-  }
-
-  throwError(state, 'unexpected end of the stream within a double quoted scalar');
-}
-
-function readFlowCollection(state, nodeIndent) {
-  var readNext = true,
-      _line,
-      _tag     = state.tag,
-      _result,
-      _anchor  = state.anchor,
-      following,
-      terminator,
-      isPair,
-      isExplicitPair,
-      isMapping,
-      overridableKeys = {},
-      keyNode,
-      keyTag,
-      valueNode,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch === 0x5B/* [ */) {
-    terminator = 0x5D;/* ] */
-    isMapping = false;
-    _result = [];
-  } else if (ch === 0x7B/* { */) {
-    terminator = 0x7D;/* } */
-    isMapping = true;
-    _result = {};
-  } else {
-    return false;
-  }
-
-  if (state.anchor !== null) {
-    state.anchorMap[state.anchor] = _result;
-  }
-
-  ch = state.input.charCodeAt(++state.position);
-
-  while (ch !== 0) {
-    skipSeparationSpace(state, true, nodeIndent);
-
-    ch = state.input.charCodeAt(state.position);
-
-    if (ch === terminator) {
-      state.position++;
-      state.tag = _tag;
-      state.anchor = _anchor;
-      state.kind = isMapping ? 'mapping' : 'sequence';
-      state.result = _result;
-      return true;
-    } else if (!readNext) {
-      throwError(state, 'missed comma between flow collection entries');
-    }
-
-    keyTag = keyNode = valueNode = null;
-    isPair = isExplicitPair = false;
-
-    if (ch === 0x3F/* ? */) {
-      following = state.input.charCodeAt(state.position + 1);
-
-      if (is_WS_OR_EOL(following)) {
-        isPair = isExplicitPair = true;
-        state.position++;
-        skipSeparationSpace(state, true, nodeIndent);
-      }
-    }
-
-    _line = state.line;
-    composeNode(state, nodeIndent, CONTEXT_FLOW_IN, false, true);
-    keyTag = state.tag;
-    keyNode = state.result;
-    skipSeparationSpace(state, true, nodeIndent);
-
-    ch = state.input.charCodeAt(state.position);
-
-    if ((isExplicitPair || state.line === _line) && ch === 0x3A/* : */) {
-      isPair = true;
-      ch = state.input.charCodeAt(++state.position);
-      skipSeparationSpace(state, true, nodeIndent);
-      composeNode(state, nodeIndent, CONTEXT_FLOW_IN, false, true);
-      valueNode = state.result;
-    }
-
-    if (isMapping) {
-      storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, valueNode);
-    } else if (isPair) {
-      _result.push(storeMappingPair(state, null, overridableKeys, keyTag, keyNode, valueNode));
-    } else {
-      _result.push(keyNode);
-    }
-
-    skipSeparationSpace(state, true, nodeIndent);
-
-    ch = state.input.charCodeAt(state.position);
-
-    if (ch === 0x2C/* , */) {
-      readNext = true;
-      ch = state.input.charCodeAt(++state.position);
-    } else {
-      readNext = false;
-    }
-  }
-
-  throwError(state, 'unexpected end of the stream within a flow collection');
-}
-
-function readBlockScalar(state, nodeIndent) {
-  var captureStart,
-      folding,
-      chomping       = CHOMPING_CLIP,
-      didReadContent = false,
-      detectedIndent = false,
-      textIndent     = nodeIndent,
-      emptyLines     = 0,
-      atMoreIndented = false,
-      tmp,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch === 0x7C/* | */) {
-    folding = false;
-  } else if (ch === 0x3E/* > */) {
-    folding = true;
-  } else {
-    return false;
-  }
-
-  state.kind = 'scalar';
-  state.result = '';
-
-  while (ch !== 0) {
-    ch = state.input.charCodeAt(++state.position);
-
-    if (ch === 0x2B/* + */ || ch === 0x2D/* - */) {
-      if (CHOMPING_CLIP === chomping) {
-        chomping = (ch === 0x2B/* + */) ? CHOMPING_KEEP : CHOMPING_STRIP;
-      } else {
-        throwError(state, 'repeat of a chomping mode identifier');
-      }
-
-    } else if ((tmp = fromDecimalCode(ch)) >= 0) {
-      if (tmp === 0) {
-        throwError(state, 'bad explicit indentation width of a block scalar; it cannot be less than one');
-      } else if (!detectedIndent) {
-        textIndent = nodeIndent + tmp - 1;
-        detectedIndent = true;
-      } else {
-        throwError(state, 'repeat of an indentation width identifier');
-      }
-
-    } else {
-      break;
-    }
-  }
-
-  if (is_WHITE_SPACE(ch)) {
-    do { ch = state.input.charCodeAt(++state.position); }
-    while (is_WHITE_SPACE(ch));
-
-    if (ch === 0x23/* # */) {
-      do { ch = state.input.charCodeAt(++state.position); }
-      while (!is_EOL(ch) && (ch !== 0));
-    }
-  }
-
-  while (ch !== 0) {
-    readLineBreak(state);
-    state.lineIndent = 0;
-
-    ch = state.input.charCodeAt(state.position);
-
-    while ((!detectedIndent || state.lineIndent < textIndent) &&
-           (ch === 0x20/* Space */)) {
-      state.lineIndent++;
-      ch = state.input.charCodeAt(++state.position);
-    }
-
-    if (!detectedIndent && state.lineIndent > textIndent) {
-      textIndent = state.lineIndent;
-    }
-
-    if (is_EOL(ch)) {
-      emptyLines++;
-      continue;
-    }
-
-    // End of the scalar.
-    if (state.lineIndent < textIndent) {
-
-      // Perform the chomping.
-      if (chomping === CHOMPING_KEEP) {
-        state.result += common.repeat('\n', didReadContent ? 1 + emptyLines : emptyLines);
-      } else if (chomping === CHOMPING_CLIP) {
-        if (didReadContent) { // i.e. only if the scalar is not empty.
-          state.result += '\n';
-        }
-      }
-
-      // Break this `while` cycle and go to the funciton's epilogue.
-      break;
-    }
-
-    // Folded style: use fancy rules to handle line breaks.
-    if (folding) {
-
-      // Lines starting with white space characters (more-indented lines) are not folded.
-      if (is_WHITE_SPACE(ch)) {
-        atMoreIndented = true;
-        // except for the first content line (cf. Example 8.1)
-        state.result += common.repeat('\n', didReadContent ? 1 + emptyLines : emptyLines);
-
-      // End of more-indented block.
-      } else if (atMoreIndented) {
-        atMoreIndented = false;
-        state.result += common.repeat('\n', emptyLines + 1);
-
-      // Just one line break - perceive as the same line.
-      } else if (emptyLines === 0) {
-        if (didReadContent) { // i.e. only if we have already read some scalar content.
-          state.result += ' ';
-        }
-
-      // Several line breaks - perceive as different lines.
-      } else {
-        state.result += common.repeat('\n', emptyLines);
-      }
-
-    // Literal style: just add exact number of line breaks between content lines.
-    } else {
-      // Keep all line breaks except the header line break.
-      state.result += common.repeat('\n', didReadContent ? 1 + emptyLines : emptyLines);
-    }
-
-    didReadContent = true;
-    detectedIndent = true;
-    emptyLines = 0;
-    captureStart = state.position;
-
-    while (!is_EOL(ch) && (ch !== 0)) {
-      ch = state.input.charCodeAt(++state.position);
-    }
-
-    captureSegment(state, captureStart, state.position, false);
-  }
-
-  return true;
-}
-
-function readBlockSequence(state, nodeIndent) {
-  var _line,
-      _tag      = state.tag,
-      _anchor   = state.anchor,
-      _result   = [],
-      following,
-      detected  = false,
-      ch;
-
-  if (state.anchor !== null) {
-    state.anchorMap[state.anchor] = _result;
-  }
-
-  ch = state.input.charCodeAt(state.position);
-
-  while (ch !== 0) {
-
-    if (ch !== 0x2D/* - */) {
-      break;
-    }
-
-    following = state.input.charCodeAt(state.position + 1);
-
-    if (!is_WS_OR_EOL(following)) {
-      break;
-    }
-
-    detected = true;
-    state.position++;
-
-    if (skipSeparationSpace(state, true, -1)) {
-      if (state.lineIndent <= nodeIndent) {
-        _result.push(null);
-        ch = state.input.charCodeAt(state.position);
-        continue;
-      }
-    }
-
-    _line = state.line;
-    composeNode(state, nodeIndent, CONTEXT_BLOCK_IN, false, true);
-    _result.push(state.result);
-    skipSeparationSpace(state, true, -1);
-
-    ch = state.input.charCodeAt(state.position);
-
-    if ((state.line === _line || state.lineIndent > nodeIndent) && (ch !== 0)) {
-      throwError(state, 'bad indentation of a sequence entry');
-    } else if (state.lineIndent < nodeIndent) {
-      break;
-    }
-  }
-
-  if (detected) {
-    state.tag = _tag;
-    state.anchor = _anchor;
-    state.kind = 'sequence';
-    state.result = _result;
-    return true;
-  }
-  return false;
-}
-
-function readBlockMapping(state, nodeIndent, flowIndent) {
-  var following,
-      allowCompact,
-      _line,
-      _pos,
-      _tag          = state.tag,
-      _anchor       = state.anchor,
-      _result       = {},
-      overridableKeys = {},
-      keyTag        = null,
-      keyNode       = null,
-      valueNode     = null,
-      atExplicitKey = false,
-      detected      = false,
-      ch;
-
-  if (state.anchor !== null) {
-    state.anchorMap[state.anchor] = _result;
-  }
-
-  ch = state.input.charCodeAt(state.position);
-
-  while (ch !== 0) {
-    following = state.input.charCodeAt(state.position + 1);
-    _line = state.line; // Save the current line.
-    _pos = state.position;
-
-    //
-    // Explicit notation case. There are two separate blocks:
-    // first for the key (denoted by "?") and second for the value (denoted by ":")
-    //
-    if ((ch === 0x3F/* ? */ || ch === 0x3A/* : */) && is_WS_OR_EOL(following)) {
-
-      if (ch === 0x3F/* ? */) {
-        if (atExplicitKey) {
-          storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, null);
-          keyTag = keyNode = valueNode = null;
-        }
-
-        detected = true;
-        atExplicitKey = true;
-        allowCompact = true;
-
-      } else if (atExplicitKey) {
-        // i.e. 0x3A/* : */ === character after the explicit key.
-        atExplicitKey = false;
-        allowCompact = true;
-
-      } else {
-        throwError(state, 'incomplete explicit mapping pair; a key node is missed; or followed by a non-tabulated empty line');
-      }
-
-      state.position += 1;
-      ch = following;
-
-    //
-    // Implicit notation case. Flow-style node as the key first, then ":", and the value.
-    //
-    } else if (composeNode(state, flowIndent, CONTEXT_FLOW_OUT, false, true)) {
-
-      if (state.line === _line) {
-        ch = state.input.charCodeAt(state.position);
-
-        while (is_WHITE_SPACE(ch)) {
-          ch = state.input.charCodeAt(++state.position);
-        }
-
-        if (ch === 0x3A/* : */) {
-          ch = state.input.charCodeAt(++state.position);
-
-          if (!is_WS_OR_EOL(ch)) {
-            throwError(state, 'a whitespace character is expected after the key-value separator within a block mapping');
-          }
-
-          if (atExplicitKey) {
-            storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, null);
-            keyTag = keyNode = valueNode = null;
-          }
-
-          detected = true;
-          atExplicitKey = false;
-          allowCompact = false;
-          keyTag = state.tag;
-          keyNode = state.result;
-
-        } else if (detected) {
-          throwError(state, 'can not read an implicit mapping pair; a colon is missed');
-
-        } else {
-          state.tag = _tag;
-          state.anchor = _anchor;
-          return true; // Keep the result of `composeNode`.
-        }
-
-      } else if (detected) {
-        throwError(state, 'can not read a block mapping entry; a multiline key may not be an implicit key');
-
-      } else {
-        state.tag = _tag;
-        state.anchor = _anchor;
-        return true; // Keep the result of `composeNode`.
-      }
-
-    } else {
-      break; // Reading is done. Go to the epilogue.
-    }
-
-    //
-    // Common reading code for both explicit and implicit notations.
-    //
-    if (state.line === _line || state.lineIndent > nodeIndent) {
-      if (composeNode(state, nodeIndent, CONTEXT_BLOCK_OUT, true, allowCompact)) {
-        if (atExplicitKey) {
-          keyNode = state.result;
-        } else {
-          valueNode = state.result;
-        }
-      }
-
-      if (!atExplicitKey) {
-        storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, valueNode, _line, _pos);
-        keyTag = keyNode = valueNode = null;
-      }
-
-      skipSeparationSpace(state, true, -1);
-      ch = state.input.charCodeAt(state.position);
-    }
-
-    if (state.lineIndent > nodeIndent && (ch !== 0)) {
-      throwError(state, 'bad indentation of a mapping entry');
-    } else if (state.lineIndent < nodeIndent) {
-      break;
-    }
-  }
-
-  //
-  // Epilogue.
-  //
-
-  // Special case: last mapping's node contains only the key in explicit notation.
-  if (atExplicitKey) {
-    storeMappingPair(state, _result, overridableKeys, keyTag, keyNode, null);
-  }
-
-  // Expose the resulting mapping.
-  if (detected) {
-    state.tag = _tag;
-    state.anchor = _anchor;
-    state.kind = 'mapping';
-    state.result = _result;
-  }
-
-  return detected;
-}
-
-function readTagProperty(state) {
-  var _position,
-      isVerbatim = false,
-      isNamed    = false,
-      tagHandle,
-      tagName,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch !== 0x21/* ! */) return false;
-
-  if (state.tag !== null) {
-    throwError(state, 'duplication of a tag property');
-  }
-
-  ch = state.input.charCodeAt(++state.position);
-
-  if (ch === 0x3C/* < */) {
-    isVerbatim = true;
-    ch = state.input.charCodeAt(++state.position);
-
-  } else if (ch === 0x21/* ! */) {
-    isNamed = true;
-    tagHandle = '!!';
-    ch = state.input.charCodeAt(++state.position);
-
-  } else {
-    tagHandle = '!';
-  }
-
-  _position = state.position;
-
-  if (isVerbatim) {
-    do { ch = state.input.charCodeAt(++state.position); }
-    while (ch !== 0 && ch !== 0x3E/* > */);
-
-    if (state.position < state.length) {
-      tagName = state.input.slice(_position, state.position);
-      ch = state.input.charCodeAt(++state.position);
-    } else {
-      throwError(state, 'unexpected end of the stream within a verbatim tag');
-    }
-  } else {
-    while (ch !== 0 && !is_WS_OR_EOL(ch)) {
-
-      if (ch === 0x21/* ! */) {
-        if (!isNamed) {
-          tagHandle = state.input.slice(_position - 1, state.position + 1);
-
-          if (!PATTERN_TAG_HANDLE.test(tagHandle)) {
-            throwError(state, 'named tag handle cannot contain such characters');
-          }
-
-          isNamed = true;
-          _position = state.position + 1;
-        } else {
-          throwError(state, 'tag suffix cannot contain exclamation marks');
-        }
-      }
-
-      ch = state.input.charCodeAt(++state.position);
-    }
-
-    tagName = state.input.slice(_position, state.position);
-
-    if (PATTERN_FLOW_INDICATORS.test(tagName)) {
-      throwError(state, 'tag suffix cannot contain flow indicator characters');
-    }
-  }
-
-  if (tagName && !PATTERN_TAG_URI.test(tagName)) {
-    throwError(state, 'tag name cannot contain such characters: ' + tagName);
-  }
-
-  if (isVerbatim) {
-    state.tag = tagName;
-
-  } else if (_hasOwnProperty.call(state.tagMap, tagHandle)) {
-    state.tag = state.tagMap[tagHandle] + tagName;
-
-  } else if (tagHandle === '!') {
-    state.tag = '!' + tagName;
-
-  } else if (tagHandle === '!!') {
-    state.tag = 'tag:yaml.org,2002:' + tagName;
-
-  } else {
-    throwError(state, 'undeclared tag handle "' + tagHandle + '"');
-  }
-
-  return true;
-}
-
-function readAnchorProperty(state) {
-  var _position,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch !== 0x26/* & */) return false;
-
-  if (state.anchor !== null) {
-    throwError(state, 'duplication of an anchor property');
-  }
-
-  ch = state.input.charCodeAt(++state.position);
-  _position = state.position;
-
-  while (ch !== 0 && !is_WS_OR_EOL(ch) && !is_FLOW_INDICATOR(ch)) {
-    ch = state.input.charCodeAt(++state.position);
-  }
-
-  if (state.position === _position) {
-    throwError(state, 'name of an anchor node must contain at least one character');
-  }
-
-  state.anchor = state.input.slice(_position, state.position);
-  return true;
-}
-
-function readAlias(state) {
-  var _position, alias,
-      ch;
-
-  ch = state.input.charCodeAt(state.position);
-
-  if (ch !== 0x2A/* * */) return false;
-
-  ch = state.input.charCodeAt(++state.position);
-  _position = state.position;
-
-  while (ch !== 0 && !is_WS_OR_EOL(ch) && !is_FLOW_INDICATOR(ch)) {
-    ch = state.input.charCodeAt(++state.position);
-  }
-
-  if (state.position === _position) {
-    throwError(state, 'name of an alias node must contain at least one character');
-  }
-
-  alias = state.input.slice(_position, state.position);
-
-  if (!state.anchorMap.hasOwnProperty(alias)) {
-    throwError(state, 'unidentified alias "' + alias + '"');
-  }
-
-  state.result = state.anchorMap[alias];
-  skipSeparationSpace(state, true, -1);
-  return true;
-}
-
-function composeNode(state, parentIndent, nodeContext, allowToSeek, allowCompact) {
-  var allowBlockStyles,
-      allowBlockScalars,
-      allowBlockCollections,
-      indentStatus = 1, // 1: this>parent, 0: this=parent, -1: this<parent
-      atNewLine  = false,
-      hasContent = false,
-      typeIndex,
-      typeQuantity,
-      type,
-      flowIndent,
-      blockIndent;
-
-  if (state.listener !== null) {
-    state.listener('open', state);
-  }
-
-  state.tag    = null;
-  state.anchor = null;
-  state.kind   = null;
-  state.result = null;
-
-  allowBlockStyles = allowBlockScalars = allowBlockCollections =
-    CONTEXT_BLOCK_OUT === nodeContext ||
-    CONTEXT_BLOCK_IN  === nodeContext;
-
-  if (allowToSeek) {
-    if (skipSeparationSpace(state, true, -1)) {
-      atNewLine = true;
-
-      if (state.lineIndent > parentIndent) {
-        indentStatus = 1;
-      } else if (state.lineIndent === parentIndent) {
-        indentStatus = 0;
-      } else if (state.lineIndent < parentIndent) {
-        indentStatus = -1;
-      }
-    }
-  }
-
-  if (indentStatus === 1) {
-    while (readTagProperty(state) || readAnchorProperty(state)) {
-      if (skipSeparationSpace(state, true, -1)) {
-        atNewLine = true;
-        allowBlockCollections = allowBlockStyles;
-
-        if (state.lineIndent > parentIndent) {
-          indentStatus = 1;
-        } else if (state.lineIndent === parentIndent) {
-          indentStatus = 0;
-        } else if (state.lineIndent < parentIndent) {
-          indentStatus = -1;
-        }
-      } else {
-        allowBlockCollections = false;
-      }
-    }
-  }
-
-  if (allowBlockCollections) {
-    allowBlockCollections = atNewLine || allowCompact;
-  }
-
-  if (indentStatus === 1 || CONTEXT_BLOCK_OUT === nodeContext) {
-    if (CONTEXT_FLOW_IN === nodeContext || CONTEXT_FLOW_OUT === nodeContext) {
-      flowIndent = parentIndent;
-    } else {
-      flowIndent = parentIndent + 1;
-    }
-
-    blockIndent = state.position - state.lineStart;
-
-    if (indentStatus === 1) {
-      if (allowBlockCollections &&
-          (readBlockSequence(state, blockIndent) ||
-           readBlockMapping(state, blockIndent, flowIndent)) ||
-          readFlowCollection(state, flowIndent)) {
-        hasContent = true;
-      } else {
-        if ((allowBlockScalars && readBlockScalar(state, flowIndent)) ||
-            readSingleQuotedScalar(state, flowIndent) ||
-            readDoubleQuotedScalar(state, flowIndent)) {
-          hasContent = true;
-
-        } else if (readAlias(state)) {
-          hasContent = true;
-
-          if (state.tag !== null || state.anchor !== null) {
-            throwError(state, 'alias node should not have any properties');
-          }
-
-        } else if (readPlainScalar(state, flowIndent, CONTEXT_FLOW_IN === nodeContext)) {
-          hasContent = true;
-
-          if (state.tag === null) {
-            state.tag = '?';
-          }
-        }
-
-        if (state.anchor !== null) {
-          state.anchorMap[state.anchor] = state.result;
-        }
-      }
-    } else if (indentStatus === 0) {
-      // Special case: block sequences are allowed to have same indentation level as the parent.
-      // http://www.yaml.org/spec/1.2/spec.html#id2799784
-      hasContent = allowBlockCollections && readBlockSequence(state, blockIndent);
-    }
-  }
-
-  if (state.tag !== null && state.tag !== '!') {
-    if (state.tag === '?') {
-      for (typeIndex = 0, typeQuantity = state.implicitTypes.length; typeIndex < typeQuantity; typeIndex += 1) {
-        type = state.implicitTypes[typeIndex];
-
-        // Implicit resolving is not allowed for non-scalar types, and '?'
-        // non-specific tag is only assigned to plain scalars. So, it isn't
-        // needed to check for 'kind' conformity.
-
-        if (type.resolve(state.result)) { // `state.result` updated in resolver if matched
-          state.result = type.construct(state.result);
-          state.tag = type.tag;
-          if (state.anchor !== null) {
-            state.anchorMap[state.anchor] = state.result;
-          }
-          break;
-        }
-      }
-    } else if (_hasOwnProperty.call(state.typeMap[state.kind || 'fallback'], state.tag)) {
-      type = state.typeMap[state.kind || 'fallback'][state.tag];
-
-      if (state.result !== null && type.kind !== state.kind) {
-        throwError(state, 'unacceptable node kind for !<' + state.tag + '> tag; it should be "' + type.kind + '", not "' + state.kind + '"');
-      }
-
-      if (!type.resolve(state.result)) { // `state.result` updated in resolver if matched
-        throwError(state, 'cannot resolve a node with !<' + state.tag + '> explicit tag');
-      } else {
-        state.result = type.construct(state.result);
-        if (state.anchor !== null) {
-          state.anchorMap[state.anchor] = state.result;
-        }
-      }
-    } else {
-      throwError(state, 'unknown tag !<' + state.tag + '>');
-    }
-  }
-
-  if (state.listener !== null) {
-    state.listener('close', state);
-  }
-  return state.tag !== null ||  state.anchor !== null || hasContent;
-}
-
-function readDocument(state) {
-  var documentStart = state.position,
-      _position,
-      directiveName,
-      directiveArgs,
-      hasDirectives = false,
-      ch;
-
-  state.version = null;
-  state.checkLineBreaks = state.legacy;
-  state.tagMap = {};
-  state.anchorMap = {};
-
-  while ((ch = state.input.charCodeAt(state.position)) !== 0) {
-    skipSeparationSpace(state, true, -1);
-
-    ch = state.input.charCodeAt(state.position);
-
-    if (state.lineIndent > 0 || ch !== 0x25/* % */) {
-      break;
-    }
-
-    hasDirectives = true;
-    ch = state.input.charCodeAt(++state.position);
-    _position = state.position;
-
-    while (ch !== 0 && !is_WS_OR_EOL(ch)) {
-      ch = state.input.charCodeAt(++state.position);
-    }
-
-    directiveName = state.input.slice(_position, state.position);
-    directiveArgs = [];
-
-    if (directiveName.length < 1) {
-      throwError(state, 'directive name must not be less than one character in length');
-    }
-
-    while (ch !== 0) {
-      while (is_WHITE_SPACE(ch)) {
-        ch = state.input.charCodeAt(++state.position);
-      }
-
-      if (ch === 0x23/* # */) {
-        do { ch = state.input.charCodeAt(++state.position); }
-        while (ch !== 0 && !is_EOL(ch));
-        break;
-      }
-
-      if (is_EOL(ch)) break;
-
-      _position = state.position;
-
-      while (ch !== 0 && !is_WS_OR_EOL(ch)) {
-        ch = state.input.charCodeAt(++state.position);
-      }
-
-      directiveArgs.push(state.input.slice(_position, state.position));
-    }
-
-    if (ch !== 0) readLineBreak(state);
-
-    if (_hasOwnProperty.call(directiveHandlers, directiveName)) {
-      directiveHandlers[directiveName](state, directiveName, directiveArgs);
-    } else {
-      throwWarning(state, 'unknown document directive "' + directiveName + '"');
-    }
-  }
-
-  skipSeparationSpace(state, true, -1);
-
-  if (state.lineIndent === 0 &&
-      state.input.charCodeAt(state.position)     === 0x2D/* - */ &&
-      state.input.charCodeAt(state.position + 1) === 0x2D/* - */ &&
-      state.input.charCodeAt(state.position + 2) === 0x2D/* - */) {
-    state.position += 3;
-    skipSeparationSpace(state, true, -1);
-
-  } else if (hasDirectives) {
-    throwError(state, 'directives end mark is expected');
-  }
-
-  composeNode(state, state.lineIndent - 1, CONTEXT_BLOCK_OUT, false, true);
-  skipSeparationSpace(state, true, -1);
-
-  if (state.checkLineBreaks &&
-      PATTERN_NON_ASCII_LINE_BREAKS.test(state.input.slice(documentStart, state.position))) {
-    throwWarning(state, 'non-ASCII line breaks are interpreted as content');
-  }
-
-  state.documents.push(state.result);
-
-  if (state.position === state.lineStart && testDocumentSeparator(state)) {
-
-    if (state.input.charCodeAt(state.position) === 0x2E/* . */) {
-      state.position += 3;
-      skipSeparationSpace(state, true, -1);
-    }
-    return;
-  }
-
-  if (state.position < (state.length - 1)) {
-    throwError(state, 'end of the stream or a document separator is expected');
-  } else {
-    return;
-  }
-}
-
-
-function loadDocuments(input, options) {
-  input = String(input);
-  options = options || {};
-
-  if (input.length !== 0) {
-
-    // Add tailing `\n` if not exists
-    if (input.charCodeAt(input.length - 1) !== 0x0A/* LF */ &&
-        input.charCodeAt(input.length - 1) !== 0x0D/* CR */) {
-      input += '\n';
-    }
-
-    // Strip BOM
-    if (input.charCodeAt(0) === 0xFEFF) {
-      input = input.slice(1);
-    }
-  }
-
-  var state = new State(input, options);
-
-  // Use 0 as string terminator. That significantly simplifies bounds check.
-  state.input += '\0';
-
-  while (state.input.charCodeAt(state.position) === 0x20/* Space */) {
-    state.lineIndent += 1;
-    state.position += 1;
-  }
-
-  while (state.position < (state.length - 1)) {
-    readDocument(state);
-  }
-
-  return state.documents;
-}
-
-
-function loadAll(input, iterator, options) {
-  var documents = loadDocuments(input, options), index, length;
-
-  if (typeof iterator !== 'function') {
-    return documents;
-  }
-
-  for (index = 0, length = documents.length; index < length; index += 1) {
-    iterator(documents[index]);
-  }
-}
-
-
-function load(input, options) {
-  var documents = loadDocuments(input, options);
-
-  if (documents.length === 0) {
-    /*eslint-disable no-undefined*/
-    return undefined;
-  } else if (documents.length === 1) {
-    return documents[0];
-  }
-  throw new YAMLException('expected a single document in the stream, but found more');
-}
-
-
-function safeLoadAll(input, output, options) {
-  if (typeof output === 'function') {
-    loadAll(input, output, common.extend({ schema: DEFAULT_SAFE_SCHEMA }, options));
-  } else {
-    return loadAll(input, common.extend({ schema: DEFAULT_SAFE_SCHEMA }, options));
-  }
-}
-
-
-function safeLoad(input, options) {
-  return load(input, common.extend({ schema: DEFAULT_SAFE_SCHEMA }, options));
-}
-
-
-module.exports.loadAll     = loadAll;
-module.exports.load        = load;
-module.exports.safeLoadAll = safeLoadAll;
-module.exports.safeLoad    = safeLoad;
-
-
-/***/ }),
-/* 283 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-
-var common = __webpack_require__(43);
-
-
-function Mark(name, buffer, position, line, column) {
-  this.name     = name;
-  this.buffer   = buffer;
-  this.position = position;
-  this.line     = line;
-  this.column   = column;
-}
-
-
-Mark.prototype.getSnippet = function getSnippet(indent, maxLength) {
-  var head, start, tail, end, snippet;
-
-  if (!this.buffer) return null;
-
-  indent = indent || 4;
-  maxLength = maxLength || 75;
-
-  head = '';
-  start = this.position;
-
-  while (start > 0 && '\x00\r\n\x85\u2028\u2029'.indexOf(this.buffer.charAt(start - 1)) === -1) {
-    start -= 1;
-    if (this.position - start > (maxLength / 2 - 1)) {
-      head = ' ... ';
-      start += 5;
-      break;
-    }
-  }
-
-  tail = '';
-  end = this.position;
-
-  while (end < this.buffer.length && '\x00\r\n\x85\u2028\u2029'.indexOf(this.buffer.charAt(end)) === -1) {
-    end += 1;
-    if (end - this.position > (maxLength / 2 - 1)) {
-      tail = ' ... ';
-      end -= 5;
-      break;
-    }
-  }
-
-  snippet = this.buffer.slice(start, end);
-
-  return common.repeat(' ', indent) + head + snippet + tail + '\n' +
-         common.repeat(' ', indent + this.position - start + head.length) + '^';
-};
-
-
-Mark.prototype.toString = function toString(compact) {
-  var snippet, where = '';
-
-  if (this.name) {
-    where += 'in "' + this.name + '" ';
-  }
-
-  where += 'at line ' + (this.line + 1) + ', column ' + (this.column + 1);
-
-  if (!compact) {
-    snippet = this.getSnippet();
-
-    if (snippet) {
-      where += ':\n' + snippet;
-    }
-  }
-
-  return where;
-};
-
-
-module.exports = Mark;
-
-
-/***/ }),
-/* 284 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-var require;
-
-/*eslint-disable no-bitwise*/
-
-var NodeBuffer;
-
-try {
-  // A trick for browserified version, to not include `Buffer` shim
-  var _require = require;
-  NodeBuffer = __webpack_require__(64).Buffer;
-} catch (__) {}
-
-var Type       = __webpack_require__(10);
-
-
-// [ 64, 65, 66 ] -> [ padding, CR, LF ]
-var BASE64_MAP = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=\n\r';
-
-
-function resolveYamlBinary(data) {
-  if (data === null) return false;
-
-  var code, idx, bitlen = 0, max = data.length, map = BASE64_MAP;
-
-  // Convert one by one.
-  for (idx = 0; idx < max; idx++) {
-    code = map.indexOf(data.charAt(idx));
-
-    // Skip CR/LF
-    if (code > 64) continue;
-
-    // Fail on illegal characters
-    if (code < 0) return false;
-
-    bitlen += 6;
-  }
-
-  // If there are any bits left, source was corrupted
-  return (bitlen % 8) === 0;
-}
-
-function constructYamlBinary(data) {
-  var idx, tailbits,
-      input = data.replace(/[\r\n=]/g, ''), // remove CR/LF & padding to simplify scan
-      max = input.length,
-      map = BASE64_MAP,
-      bits = 0,
-      result = [];
-
-  // Collect by 6*4 bits (3 bytes)
-
-  for (idx = 0; idx < max; idx++) {
-    if ((idx % 4 === 0) && idx) {
-      result.push((bits >> 16) & 0xFF);
-      result.push((bits >> 8) & 0xFF);
-      result.push(bits & 0xFF);
-    }
-
-    bits = (bits << 6) | map.indexOf(input.charAt(idx));
-  }
-
-  // Dump tail
-
-  tailbits = (max % 4) * 6;
-
-  if (tailbits === 0) {
-    result.push((bits >> 16) & 0xFF);
-    result.push((bits >> 8) & 0xFF);
-    result.push(bits & 0xFF);
-  } else if (tailbits === 18) {
-    result.push((bits >> 10) & 0xFF);
-    result.push((bits >> 2) & 0xFF);
-  } else if (tailbits === 12) {
-    result.push((bits >> 4) & 0xFF);
-  }
-
-  // Wrap into Buffer for NodeJS and leave Array for browser
-  if (NodeBuffer) {
-    // Support node 6.+ Buffer API when available
-    return NodeBuffer.from ? NodeBuffer.from(result) : new NodeBuffer(result);
-  }
-
-  return result;
-}
-
-function representYamlBinary(object /*, style*/) {
-  var result = '', bits = 0, idx, tail,
-      max = object.length,
-      map = BASE64_MAP;
-
-  // Convert every three bytes to 4 ASCII characters.
-
-  for (idx = 0; idx < max; idx++) {
-    if ((idx % 3 === 0) && idx) {
-      result += map[(bits >> 18) & 0x3F];
-      result += map[(bits >> 12) & 0x3F];
-      result += map[(bits >> 6) & 0x3F];
-      result += map[bits & 0x3F];
-    }
-
-    bits = (bits << 8) + object[idx];
-  }
-
-  // Dump tail
-
-  tail = max % 3;
-
-  if (tail === 0) {
-    result += map[(bits >> 18) & 0x3F];
-    result += map[(bits >> 12) & 0x3F];
-    result += map[(bits >> 6) & 0x3F];
-    result += map[bits & 0x3F];
-  } else if (tail === 2) {
-    result += map[(bits >> 10) & 0x3F];
-    result += map[(bits >> 4) & 0x3F];
-    result += map[(bits << 2) & 0x3F];
-    result += map[64];
-  } else if (tail === 1) {
-    result += map[(bits >> 2) & 0x3F];
-    result += map[(bits << 4) & 0x3F];
-    result += map[64];
-    result += map[64];
-  }
-
-  return result;
-}
-
-function isBinary(object) {
-  return NodeBuffer && NodeBuffer.isBuffer(object);
-}
-
-module.exports = new Type('tag:yaml.org,2002:binary', {
-  kind: 'scalar',
-  resolve: resolveYamlBinary,
-  construct: constructYamlBinary,
-  predicate: isBinary,
-  represent: representYamlBinary
-});
-
-
-/***/ }),
-/* 285 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-function resolveYamlBoolean(data) {
-  if (data === null) return false;
-
-  var max = data.length;
-
-  return (max === 4 && (data === 'true' || data === 'True' || data === 'TRUE')) ||
-         (max === 5 && (data === 'false' || data === 'False' || data === 'FALSE'));
-}
-
-function constructYamlBoolean(data) {
-  return data === 'true' ||
-         data === 'True' ||
-         data === 'TRUE';
-}
-
-function isBoolean(object) {
-  return Object.prototype.toString.call(object) === '[object Boolean]';
-}
-
-module.exports = new Type('tag:yaml.org,2002:bool', {
-  kind: 'scalar',
-  resolve: resolveYamlBoolean,
-  construct: constructYamlBoolean,
-  predicate: isBoolean,
-  represent: {
-    lowercase: function (object) { return object ? 'true' : 'false'; },
-    uppercase: function (object) { return object ? 'TRUE' : 'FALSE'; },
-    camelcase: function (object) { return object ? 'True' : 'False'; }
-  },
-  defaultStyle: 'lowercase'
-});
-
-
-/***/ }),
-/* 286 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var common = __webpack_require__(43);
-var Type   = __webpack_require__(10);
-
-var YAML_FLOAT_PATTERN = new RegExp(
-  // 2.5e4, 2.5 and integers
-  '^(?:[-+]?(?:0|[1-9][0-9_]*)(?:\\.[0-9_]*)?(?:[eE][-+]?[0-9]+)?' +
-  // .2e4, .2
-  // special case, seems not from spec
-  '|\\.[0-9_]+(?:[eE][-+]?[0-9]+)?' +
-  // 20:59
-  '|[-+]?[0-9][0-9_]*(?::[0-5]?[0-9])+\\.[0-9_]*' +
-  // .inf
-  '|[-+]?\\.(?:inf|Inf|INF)' +
-  // .nan
-  '|\\.(?:nan|NaN|NAN))$');
-
-function resolveYamlFloat(data) {
-  if (data === null) return false;
-
-  if (!YAML_FLOAT_PATTERN.test(data) ||
-      // Quick hack to not allow integers end with `_`
-      // Probably should update regexp & check speed
-      data[data.length - 1] === '_') {
-    return false;
-  }
-
-  return true;
-}
-
-function constructYamlFloat(data) {
-  var value, sign, base, digits;
-
-  value  = data.replace(/_/g, '').toLowerCase();
-  sign   = value[0] === '-' ? -1 : 1;
-  digits = [];
-
-  if ('+-'.indexOf(value[0]) >= 0) {
-    value = value.slice(1);
-  }
-
-  if (value === '.inf') {
-    return (sign === 1) ? Number.POSITIVE_INFINITY : Number.NEGATIVE_INFINITY;
-
-  } else if (value === '.nan') {
-    return NaN;
-
-  } else if (value.indexOf(':') >= 0) {
-    value.split(':').forEach(function (v) {
-      digits.unshift(parseFloat(v, 10));
-    });
-
-    value = 0.0;
-    base = 1;
-
-    digits.forEach(function (d) {
-      value += d * base;
-      base *= 60;
-    });
-
-    return sign * value;
-
-  }
-  return sign * parseFloat(value, 10);
-}
-
-
-var SCIENTIFIC_WITHOUT_DOT = /^[-+]?[0-9]+e/;
-
-function representYamlFloat(object, style) {
-  var res;
-
-  if (isNaN(object)) {
-    switch (style) {
-      case 'lowercase': return '.nan';
-      case 'uppercase': return '.NAN';
-      case 'camelcase': return '.NaN';
-    }
-  } else if (Number.POSITIVE_INFINITY === object) {
-    switch (style) {
-      case 'lowercase': return '.inf';
-      case 'uppercase': return '.INF';
-      case 'camelcase': return '.Inf';
-    }
-  } else if (Number.NEGATIVE_INFINITY === object) {
-    switch (style) {
-      case 'lowercase': return '-.inf';
-      case 'uppercase': return '-.INF';
-      case 'camelcase': return '-.Inf';
-    }
-  } else if (common.isNegativeZero(object)) {
-    return '-0.0';
-  }
-
-  res = object.toString(10);
-
-  // JS stringifier can build scientific format without dots: 5e-100,
-  // while YAML requres dot: 5.e-100. Fix it with simple hack
-
-  return SCIENTIFIC_WITHOUT_DOT.test(res) ? res.replace('e', '.e') : res;
-}
-
-function isFloat(object) {
-  return (Object.prototype.toString.call(object) === '[object Number]') &&
-         (object % 1 !== 0 || common.isNegativeZero(object));
-}
-
-module.exports = new Type('tag:yaml.org,2002:float', {
-  kind: 'scalar',
-  resolve: resolveYamlFloat,
-  construct: constructYamlFloat,
-  predicate: isFloat,
-  represent: representYamlFloat,
-  defaultStyle: 'lowercase'
-});
-
-
-/***/ }),
-/* 287 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var common = __webpack_require__(43);
-var Type   = __webpack_require__(10);
-
-function isHexCode(c) {
-  return ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */)) ||
-         ((0x41/* A */ <= c) && (c <= 0x46/* F */)) ||
-         ((0x61/* a */ <= c) && (c <= 0x66/* f */));
-}
-
-function isOctCode(c) {
-  return ((0x30/* 0 */ <= c) && (c <= 0x37/* 7 */));
-}
-
-function isDecCode(c) {
-  return ((0x30/* 0 */ <= c) && (c <= 0x39/* 9 */));
-}
-
-function resolveYamlInteger(data) {
-  if (data === null) return false;
-
-  var max = data.length,
-      index = 0,
-      hasDigits = false,
-      ch;
-
-  if (!max) return false;
-
-  ch = data[index];
-
-  // sign
-  if (ch === '-' || ch === '+') {
-    ch = data[++index];
-  }
-
-  if (ch === '0') {
-    // 0
-    if (index + 1 === max) return true;
-    ch = data[++index];
-
-    // base 2, base 8, base 16
-
-    if (ch === 'b') {
-      // base 2
-      index++;
-
-      for (; index < max; index++) {
-        ch = data[index];
-        if (ch === '_') continue;
-        if (ch !== '0' && ch !== '1') return false;
-        hasDigits = true;
-      }
-      return hasDigits && ch !== '_';
-    }
-
-
-    if (ch === 'x') {
-      // base 16
-      index++;
-
-      for (; index < max; index++) {
-        ch = data[index];
-        if (ch === '_') continue;
-        if (!isHexCode(data.charCodeAt(index))) return false;
-        hasDigits = true;
-      }
-      return hasDigits && ch !== '_';
-    }
-
-    // base 8
-    for (; index < max; index++) {
-      ch = data[index];
-      if (ch === '_') continue;
-      if (!isOctCode(data.charCodeAt(index))) return false;
-      hasDigits = true;
-    }
-    return hasDigits && ch !== '_';
-  }
-
-  // base 10 (except 0) or base 60
-
-  // value should not start with `_`;
-  if (ch === '_') return false;
-
-  for (; index < max; index++) {
-    ch = data[index];
-    if (ch === '_') continue;
-    if (ch === ':') break;
-    if (!isDecCode(data.charCodeAt(index))) {
-      return false;
-    }
-    hasDigits = true;
-  }
-
-  // Should have digits and should not end with `_`
-  if (!hasDigits || ch === '_') return false;
-
-  // if !base60 - done;
-  if (ch !== ':') return true;
-
-  // base60 almost not used, no needs to optimize
-  return /^(:[0-5]?[0-9])+$/.test(data.slice(index));
-}
-
-function constructYamlInteger(data) {
-  var value = data, sign = 1, ch, base, digits = [];
-
-  if (value.indexOf('_') !== -1) {
-    value = value.replace(/_/g, '');
-  }
-
-  ch = value[0];
-
-  if (ch === '-' || ch === '+') {
-    if (ch === '-') sign = -1;
-    value = value.slice(1);
-    ch = value[0];
-  }
-
-  if (value === '0') return 0;
-
-  if (ch === '0') {
-    if (value[1] === 'b') return sign * parseInt(value.slice(2), 2);
-    if (value[1] === 'x') return sign * parseInt(value, 16);
-    return sign * parseInt(value, 8);
-  }
-
-  if (value.indexOf(':') !== -1) {
-    value.split(':').forEach(function (v) {
-      digits.unshift(parseInt(v, 10));
-    });
-
-    value = 0;
-    base = 1;
-
-    digits.forEach(function (d) {
-      value += (d * base);
-      base *= 60;
-    });
-
-    return sign * value;
-
-  }
-
-  return sign * parseInt(value, 10);
-}
-
-function isInteger(object) {
-  return (Object.prototype.toString.call(object)) === '[object Number]' &&
-         (object % 1 === 0 && !common.isNegativeZero(object));
-}
-
-module.exports = new Type('tag:yaml.org,2002:int', {
-  kind: 'scalar',
-  resolve: resolveYamlInteger,
-  construct: constructYamlInteger,
-  predicate: isInteger,
-  represent: {
-    binary:      function (obj) { return obj >= 0 ? '0b' + obj.toString(2) : '-0b' + obj.toString(2).slice(1); },
-    octal:       function (obj) { return obj >= 0 ? '0'  + obj.toString(8) : '-0'  + obj.toString(8).slice(1); },
-    decimal:     function (obj) { return obj.toString(10); },
-    /* eslint-disable max-len */
-    hexadecimal: function (obj) { return obj >= 0 ? '0x' + obj.toString(16).toUpperCase() :  '-0x' + obj.toString(16).toUpperCase().slice(1); }
-  },
-  defaultStyle: 'decimal',
-  styleAliases: {
-    binary:      [ 2,  'bin' ],
-    octal:       [ 8,  'oct' ],
-    decimal:     [ 10, 'dec' ],
-    hexadecimal: [ 16, 'hex' ]
-  }
-});
-
-
-/***/ }),
-/* 288 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-var require;
-
-var esprima;
-
-// Browserified version does not have esprima
-//
-// 1. For node.js just require module as deps
-// 2. For browser try to require mudule via external AMD system.
-//    If not found - try to fallback to window.esprima. If not
-//    found too - then fail to parse.
-//
-try {
-  // workaround to exclude package from browserify list.
-  var _require = require;
-  esprima = __webpack_require__(268);
-} catch (_) {
-  /*global window */
-  if (typeof window !== 'undefined') esprima = window.esprima;
-}
-
-var Type = __webpack_require__(10);
-
-function resolveJavascriptFunction(data) {
-  if (data === null) return false;
-
-  try {
-    var source = '(' + data + ')',
-        ast    = esprima.parse(source, { range: true });
-
-    if (ast.type                    !== 'Program'             ||
-        ast.body.length             !== 1                     ||
-        ast.body[0].type            !== 'ExpressionStatement' ||
-        (ast.body[0].expression.type !== 'ArrowFunctionExpression' &&
-          ast.body[0].expression.type !== 'FunctionExpression')) {
-      return false;
-    }
-
-    return true;
-  } catch (err) {
-    return false;
-  }
-}
-
-function constructJavascriptFunction(data) {
-  /*jslint evil:true*/
-
-  var source = '(' + data + ')',
-      ast    = esprima.parse(source, { range: true }),
-      params = [],
-      body;
-
-  if (ast.type                    !== 'Program'             ||
-      ast.body.length             !== 1                     ||
-      ast.body[0].type            !== 'ExpressionStatement' ||
-      (ast.body[0].expression.type !== 'ArrowFunctionExpression' &&
-        ast.body[0].expression.type !== 'FunctionExpression')) {
-    throw new Error('Failed to resolve function');
-  }
-
-  ast.body[0].expression.params.forEach(function (param) {
-    params.push(param.name);
-  });
-
-  body = ast.body[0].expression.body.range;
-
-  // Esprima's ranges include the first '{' and the last '}' characters on
-  // function expressions. So cut them out.
-  if (ast.body[0].expression.body.type === 'BlockStatement') {
-    /*eslint-disable no-new-func*/
-    return new Function(params, source.slice(body[0] + 1, body[1] - 1));
-  }
-  // ES6 arrow functions can omit the BlockStatement. In that case, just return
-  // the body.
-  /*eslint-disable no-new-func*/
-  return new Function(params, 'return ' + source.slice(body[0], body[1]));
-}
-
-function representJavascriptFunction(object /*, style*/) {
-  return object.toString();
-}
-
-function isFunction(object) {
-  return Object.prototype.toString.call(object) === '[object Function]';
-}
-
-module.exports = new Type('tag:yaml.org,2002:js/function', {
-  kind: 'scalar',
-  resolve: resolveJavascriptFunction,
-  construct: constructJavascriptFunction,
-  predicate: isFunction,
-  represent: representJavascriptFunction
-});
-
-
-/***/ }),
-/* 289 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-function resolveJavascriptRegExp(data) {
-  if (data === null) return false;
-  if (data.length === 0) return false;
-
-  var regexp = data,
-      tail   = /\/([gim]*)$/.exec(data),
-      modifiers = '';
-
-  // if regexp starts with '/' it can have modifiers and must be properly closed
-  // `/foo/gim` - modifiers tail can be maximum 3 chars
-  if (regexp[0] === '/') {
-    if (tail) modifiers = tail[1];
-
-    if (modifiers.length > 3) return false;
-    // if expression starts with /, is should be properly terminated
-    if (regexp[regexp.length - modifiers.length - 1] !== '/') return false;
-  }
-
-  return true;
-}
-
-function constructJavascriptRegExp(data) {
-  var regexp = data,
-      tail   = /\/([gim]*)$/.exec(data),
-      modifiers = '';
-
-  // `/foo/gim` - tail can be maximum 4 chars
-  if (regexp[0] === '/') {
-    if (tail) modifiers = tail[1];
-    regexp = regexp.slice(1, regexp.length - modifiers.length - 1);
-  }
-
-  return new RegExp(regexp, modifiers);
-}
-
-function representJavascriptRegExp(object /*, style*/) {
-  var result = '/' + object.source + '/';
-
-  if (object.global) result += 'g';
-  if (object.multiline) result += 'm';
-  if (object.ignoreCase) result += 'i';
-
-  return result;
-}
-
-function isRegExp(object) {
-  return Object.prototype.toString.call(object) === '[object RegExp]';
-}
-
-module.exports = new Type('tag:yaml.org,2002:js/regexp', {
-  kind: 'scalar',
-  resolve: resolveJavascriptRegExp,
-  construct: constructJavascriptRegExp,
-  predicate: isRegExp,
-  represent: representJavascriptRegExp
-});
-
-
-/***/ }),
-/* 290 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-function resolveJavascriptUndefined() {
-  return true;
-}
-
-function constructJavascriptUndefined() {
-  /*eslint-disable no-undefined*/
-  return undefined;
-}
-
-function representJavascriptUndefined() {
-  return '';
-}
-
-function isUndefined(object) {
-  return typeof object === 'undefined';
-}
-
-module.exports = new Type('tag:yaml.org,2002:js/undefined', {
-  kind: 'scalar',
-  resolve: resolveJavascriptUndefined,
-  construct: constructJavascriptUndefined,
-  predicate: isUndefined,
-  represent: representJavascriptUndefined
-});
-
-
-/***/ }),
-/* 291 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-module.exports = new Type('tag:yaml.org,2002:map', {
-  kind: 'mapping',
-  construct: function (data) { return data !== null ? data : {}; }
-});
-
-
-/***/ }),
-/* 292 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-function resolveYamlMerge(data) {
-  return data === '<<' || data === null;
-}
-
-module.exports = new Type('tag:yaml.org,2002:merge', {
-  kind: 'scalar',
-  resolve: resolveYamlMerge
-});
-
-
-/***/ }),
-/* 293 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-function resolveYamlNull(data) {
-  if (data === null) return true;
-
-  var max = data.length;
-
-  return (max === 1 && data === '~') ||
-         (max === 4 && (data === 'null' || data === 'Null' || data === 'NULL'));
-}
-
-function constructYamlNull() {
-  return null;
-}
-
-function isNull(object) {
-  return object === null;
-}
-
-module.exports = new Type('tag:yaml.org,2002:null', {
-  kind: 'scalar',
-  resolve: resolveYamlNull,
-  construct: constructYamlNull,
-  predicate: isNull,
-  represent: {
-    canonical: function () { return '~';    },
-    lowercase: function () { return 'null'; },
-    uppercase: function () { return 'NULL'; },
-    camelcase: function () { return 'Null'; }
-  },
-  defaultStyle: 'lowercase'
-});
-
-
-/***/ }),
-/* 294 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-var _hasOwnProperty = Object.prototype.hasOwnProperty;
-var _toString       = Object.prototype.toString;
-
-function resolveYamlOmap(data) {
-  if (data === null) return true;
-
-  var objectKeys = [], index, length, pair, pairKey, pairHasKey,
-      object = data;
-
-  for (index = 0, length = object.length; index < length; index += 1) {
-    pair = object[index];
-    pairHasKey = false;
-
-    if (_toString.call(pair) !== '[object Object]') return false;
-
-    for (pairKey in pair) {
-      if (_hasOwnProperty.call(pair, pairKey)) {
-        if (!pairHasKey) pairHasKey = true;
-        else return false;
-      }
-    }
-
-    if (!pairHasKey) return false;
-
-    if (objectKeys.indexOf(pairKey) === -1) objectKeys.push(pairKey);
-    else return false;
-  }
-
-  return true;
-}
-
-function constructYamlOmap(data) {
-  return data !== null ? data : [];
-}
-
-module.exports = new Type('tag:yaml.org,2002:omap', {
-  kind: 'sequence',
-  resolve: resolveYamlOmap,
-  construct: constructYamlOmap
-});
-
-
-/***/ }),
-/* 295 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-var _toString = Object.prototype.toString;
-
-function resolveYamlPairs(data) {
-  if (data === null) return true;
-
-  var index, length, pair, keys, result,
-      object = data;
-
-  result = new Array(object.length);
-
-  for (index = 0, length = object.length; index < length; index += 1) {
-    pair = object[index];
-
-    if (_toString.call(pair) !== '[object Object]') return false;
-
-    keys = Object.keys(pair);
-
-    if (keys.length !== 1) return false;
-
-    result[index] = [ keys[0], pair[keys[0]] ];
-  }
-
-  return true;
-}
-
-function constructYamlPairs(data) {
-  if (data === null) return [];
-
-  var index, length, pair, keys, result,
-      object = data;
-
-  result = new Array(object.length);
-
-  for (index = 0, length = object.length; index < length; index += 1) {
-    pair = object[index];
-
-    keys = Object.keys(pair);
-
-    result[index] = [ keys[0], pair[keys[0]] ];
-  }
-
-  return result;
-}
-
-module.exports = new Type('tag:yaml.org,2002:pairs', {
-  kind: 'sequence',
-  resolve: resolveYamlPairs,
-  construct: constructYamlPairs
-});
-
-
-/***/ }),
-/* 296 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-module.exports = new Type('tag:yaml.org,2002:seq', {
-  kind: 'sequence',
-  construct: function (data) { return data !== null ? data : []; }
-});
-
-
-/***/ }),
-/* 297 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-var _hasOwnProperty = Object.prototype.hasOwnProperty;
-
-function resolveYamlSet(data) {
-  if (data === null) return true;
-
-  var key, object = data;
-
-  for (key in object) {
-    if (_hasOwnProperty.call(object, key)) {
-      if (object[key] !== null) return false;
-    }
-  }
-
-  return true;
-}
-
-function constructYamlSet(data) {
-  return data !== null ? data : {};
-}
-
-module.exports = new Type('tag:yaml.org,2002:set', {
-  kind: 'mapping',
-  resolve: resolveYamlSet,
-  construct: constructYamlSet
-});
-
-
-/***/ }),
-/* 298 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-module.exports = new Type('tag:yaml.org,2002:str', {
-  kind: 'scalar',
-  construct: function (data) { return data !== null ? data : ''; }
-});
-
-
-/***/ }),
-/* 299 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Type = __webpack_require__(10);
-
-var YAML_DATE_REGEXP = new RegExp(
-  '^([0-9][0-9][0-9][0-9])'          + // [1] year
-  '-([0-9][0-9])'                    + // [2] month
-  '-([0-9][0-9])$');                   // [3] day
-
-var YAML_TIMESTAMP_REGEXP = new RegExp(
-  '^([0-9][0-9][0-9][0-9])'          + // [1] year
-  '-([0-9][0-9]?)'                   + // [2] month
-  '-([0-9][0-9]?)'                   + // [3] day
-  '(?:[Tt]|[ \\t]+)'                 + // ...
-  '([0-9][0-9]?)'                    + // [4] hour
-  ':([0-9][0-9])'                    + // [5] minute
-  ':([0-9][0-9])'                    + // [6] second
-  '(?:\\.([0-9]*))?'                 + // [7] fraction
-  '(?:[ \\t]*(Z|([-+])([0-9][0-9]?)' + // [8] tz [9] tz_sign [10] tz_hour
-  '(?::([0-9][0-9]))?))?$');           // [11] tz_minute
-
-function resolveYamlTimestamp(data) {
-  if (data === null) return false;
-  if (YAML_DATE_REGEXP.exec(data) !== null) return true;
-  if (YAML_TIMESTAMP_REGEXP.exec(data) !== null) return true;
-  return false;
-}
-
-function constructYamlTimestamp(data) {
-  var match, year, month, day, hour, minute, second, fraction = 0,
-      delta = null, tz_hour, tz_minute, date;
-
-  match = YAML_DATE_REGEXP.exec(data);
-  if (match === null) match = YAML_TIMESTAMP_REGEXP.exec(data);
-
-  if (match === null) throw new Error('Date resolve error');
-
-  // match: [1] year [2] month [3] day
-
-  year = +(match[1]);
-  month = +(match[2]) - 1; // JS month starts with 0
-  day = +(match[3]);
-
-  if (!match[4]) { // no hour
-    return new Date(Date.UTC(year, month, day));
-  }
-
-  // match: [4] hour [5] minute [6] second [7] fraction
-
-  hour = +(match[4]);
-  minute = +(match[5]);
-  second = +(match[6]);
-
-  if (match[7]) {
-    fraction = match[7].slice(0, 3);
-    while (fraction.length < 3) { // milli-seconds
-      fraction += '0';
-    }
-    fraction = +fraction;
-  }
-
-  // match: [8] tz [9] tz_sign [10] tz_hour [11] tz_minute
-
-  if (match[9]) {
-    tz_hour = +(match[10]);
-    tz_minute = +(match[11] || 0);
-    delta = (tz_hour * 60 + tz_minute) * 60000; // delta in mili-seconds
-    if (match[9] === '-') delta = -delta;
-  }
-
-  date = new Date(Date.UTC(year, month, day, hour, minute, second, fraction));
-
-  if (delta) date.setTime(date.getTime() - delta);
-
-  return date;
-}
-
-function representYamlTimestamp(object /*, style*/) {
-  return object.toISOString();
-}
-
-module.exports = new Type('tag:yaml.org,2002:timestamp', {
-  kind: 'scalar',
-  resolve: resolveYamlTimestamp,
-  construct: constructYamlTimestamp,
-  instanceOf: Date,
-  represent: representYamlTimestamp
-});
-
-
-/***/ }),
-/* 300 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var win32 = process && process.platform === 'win32';
-var path = __webpack_require__(0);
-var fileRe = __webpack_require__(646);
-var utils = module.exports;
-
-/**
- * Module dependencies
- */
-
-utils.diff = __webpack_require__(755);
-utils.unique = __webpack_require__(756);
-utils.braces = __webpack_require__(757);
-utils.brackets = __webpack_require__(639);
-utils.extglob = __webpack_require__(644);
-utils.isExtglob = __webpack_require__(177);
-utils.isGlob = __webpack_require__(178);
-utils.typeOf = __webpack_require__(179);
-utils.normalize = __webpack_require__(765);
-utils.omit = __webpack_require__(769);
-utils.parseGlob = __webpack_require__(773);
-utils.cache = __webpack_require__(795);
-
-/**
- * Get the filename of a filepath
- *
- * @param {String} `string`
- * @return {String}
- */
-
-utils.filename = function filename(fp) {
-  var seg = fp.match(fileRe());
-  return seg && seg[0];
-};
-
-/**
- * Returns a function that returns true if the given
- * pattern is the same as a given `filepath`
- *
- * @param {String} `pattern`
- * @return {Function}
- */
-
-utils.isPath = function isPath(pattern, opts) {
-  opts = opts || {};
-  return function(fp) {
-    var unixified = utils.unixify(fp, opts);
-    if(opts.nocase){
-      return pattern.toLowerCase() === unixified.toLowerCase();
-    }
-    return pattern === unixified;
-  };
-};
-
-/**
- * Returns a function that returns true if the given
- * pattern contains a `filepath`
- *
- * @param {String} `pattern`
- * @return {Function}
- */
-
-utils.hasPath = function hasPath(pattern, opts) {
-  return function(fp) {
-    return utils.unixify(pattern, opts).indexOf(fp) !== -1;
-  };
-};
-
-/**
- * Returns a function that returns true if the given
- * pattern matches or contains a `filepath`
- *
- * @param {String} `pattern`
- * @return {Function}
- */
-
-utils.matchPath = function matchPath(pattern, opts) {
-  var fn = (opts && opts.contains)
-    ? utils.hasPath(pattern, opts)
-    : utils.isPath(pattern, opts);
-  return fn;
-};
-
-/**
- * Returns a function that returns true if the given
- * regex matches the `filename` of a file path.
- *
- * @param {RegExp} `re`
- * @return {Boolean}
- */
-
-utils.hasFilename = function hasFilename(re) {
-  return function(fp) {
-    var name = utils.filename(fp);
-    return name && re.test(name);
-  };
-};
-
-/**
- * Coerce `val` to an array
- *
- * @param  {*} val
- * @return {Array}
- */
-
-utils.arrayify = function arrayify(val) {
-  return !Array.isArray(val)
-    ? [val]
-    : val;
-};
-
-/**
- * Normalize all slashes in a file path or glob pattern to
- * forward slashes.
- */
-
-utils.unixify = function unixify(fp, opts) {
-  if (opts && opts.unixify === false) return fp;
-  if (opts && opts.unixify === true || win32 || path.sep === '\\') {
-    return utils.normalize(fp, false);
-  }
-  if (opts && opts.unescape === true) {
-    return fp ? fp.toString().replace(/\\(\w)/g, '$1') : '';
-  }
-  return fp;
-};
-
-/**
- * Escape/unescape utils
- */
-
-utils.escapePath = function escapePath(fp) {
-  return fp.replace(/[\\.]/g, '\\$&');
-};
-
-utils.unescapeGlob = function unescapeGlob(fp) {
-  return fp.replace(/[\\"']/g, '');
-};
-
-utils.escapeRe = function escapeRe(str) {
-  return str.replace(/[-[\\$*+?.#^\s{}(|)\]]/g, '\\$&');
-};
-
-/**
- * Expose `utils`
- */
-
-module.exports = utils;
-
-
-/***/ }),
-/* 301 */
-/***/ (function(module, exports) {
-
-/**
- * Helpers.
- */
-
-var s = 1000;
-var m = s * 60;
-var h = m * 60;
-var d = h * 24;
-var y = d * 365.25;
-
-/**
- * Parse or format the given `val`.
- *
- * Options:
- *
- *  - `long` verbose formatting [false]
- *
- * @param {String|Number} val
- * @param {Object} [options]
- * @throws {Error} throw an error if val is not a non-empty string or a number
- * @return {String|Number}
- * @api public
- */
-
-module.exports = function(val, options) {
-  options = options || {};
-  var type = typeof val;
-  if (type === 'string' && val.length > 0) {
-    return parse(val);
-  } else if (type === 'number' && isNaN(val) === false) {
-    return options.long ? fmtLong(val) : fmtShort(val);
-  }
-  throw new Error(
-    'val is not a non-empty string or a valid number. val=' +
-      JSON.stringify(val)
-  );
-};
-
-/**
- * Parse the given `str` and return milliseconds.
- *
- * @param {String} str
- * @return {Number}
- * @api private
- */
-
-function parse(str) {
-  str = String(str);
-  if (str.length > 100) {
-    return;
-  }
-  var match = /^((?:\d+)?\.?\d+) *(milliseconds?|msecs?|ms|seconds?|secs?|s|minutes?|mins?|m|hours?|hrs?|h|days?|d|years?|yrs?|y)?$/i.exec(
-    str
-  );
-  if (!match) {
-    return;
-  }
-  var n = parseFloat(match[1]);
-  var type = (match[2] || 'ms').toLowerCase();
-  switch (type) {
-    case 'years':
-    case 'year':
-    case 'yrs':
-    case 'yr':
-    case 'y':
-      return n * y;
-    case 'days':
-    case 'day':
-    case 'd':
-      return n * d;
-    case 'hours':
-    case 'hour':
-    case 'hrs':
-    case 'hr':
-    case 'h':
-      return n * h;
-    case 'minutes':
-    case 'minute':
-    case 'mins':
-    case 'min':
-    case 'm':
-      return n * m;
-    case 'seconds':
-    case 'second':
-    case 'secs':
-    case 'sec':
-    case 's':
-      return n * s;
-    case 'milliseconds':
-    case 'millisecond':
-    case 'msecs':
-    case 'msec':
-    case 'ms':
-      return n;
-    default:
-      return undefined;
-  }
-}
-
-/**
- * Short format for `ms`.
- *
- * @param {Number} ms
- * @return {String}
- * @api private
- */
-
-function fmtShort(ms) {
-  if (ms >= d) {
-    return Math.round(ms / d) + 'd';
-  }
-  if (ms >= h) {
-    return Math.round(ms / h) + 'h';
-  }
-  if (ms >= m) {
-    return Math.round(ms / m) + 'm';
-  }
-  if (ms >= s) {
-    return Math.round(ms / s) + 's';
-  }
-  return ms + 'ms';
-}
-
-/**
- * Long format for `ms`.
- *
- * @param {Number} ms
- * @return {String}
- * @api private
- */
-
-function fmtLong(ms) {
-  return plural(ms, d, 'day') ||
-    plural(ms, h, 'hour') ||
-    plural(ms, m, 'minute') ||
-    plural(ms, s, 'second') ||
-    ms + ' ms';
-}
-
-/**
- * Pluralization helper.
- */
-
-function plural(ms, n, name) {
-  if (ms < n) {
-    return;
-  }
-  if (ms < n * 1.5) {
-    return Math.floor(ms / n) + ' ' + name;
-  }
-  return Math.ceil(ms / n) + ' ' + name + 's';
-}
-
-
-/***/ }),
-/* 302 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(763);
-
-/***/ }),
-/* 303 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*
-object-assign
-(c) Sindre Sorhus
-@license MIT
-*/
-
-
-/* eslint-disable no-unused-vars */
-var getOwnPropertySymbols = Object.getOwnPropertySymbols;
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-var propIsEnumerable = Object.prototype.propertyIsEnumerable;
-
-function toObject(val) {
-	if (val === null || val === undefined) {
-		throw new TypeError('Object.assign cannot be called with null or undefined');
-	}
-
-	return Object(val);
-}
-
-function shouldUseNative() {
-	try {
-		if (!Object.assign) {
-			return false;
-		}
-
-		// Detect buggy property enumeration order in older V8 versions.
-
-		// https://bugs.chromium.org/p/v8/issues/detail?id=4118
-		var test1 = new String('abc');  // eslint-disable-line no-new-wrappers
-		test1[5] = 'de';
-		if (Object.getOwnPropertyNames(test1)[0] === '5') {
-			return false;
-		}
-
-		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
-		var test2 = {};
-		for (var i = 0; i < 10; i++) {
-			test2['_' + String.fromCharCode(i)] = i;
-		}
-		var order2 = Object.getOwnPropertyNames(test2).map(function (n) {
-			return test2[n];
-		});
-		if (order2.join('') !== '0123456789') {
-			return false;
-		}
-
-		// https://bugs.chromium.org/p/v8/issues/detail?id=3056
-		var test3 = {};
-		'abcdefghijklmnopqrst'.split('').forEach(function (letter) {
-			test3[letter] = letter;
-		});
-		if (Object.keys(Object.assign({}, test3)).join('') !==
-				'abcdefghijklmnopqrst') {
-			return false;
-		}
-
-		return true;
-	} catch (err) {
-		// We don't expect any of the above to throw, but better to be safe.
-		return false;
-	}
-}
-
-module.exports = shouldUseNative() ? Object.assign : function (target, source) {
-	var from;
-	var to = toObject(target);
-	var symbols;
-
-	for (var s = 1; s < arguments.length; s++) {
-		from = Object(arguments[s]);
-
-		for (var key in from) {
-			if (hasOwnProperty.call(from, key)) {
-				to[key] = from[key];
-			}
-		}
-
-		if (getOwnPropertySymbols) {
-			symbols = getOwnPropertySymbols(from);
-			for (var i = 0; i < symbols.length; i++) {
-				if (propIsEnumerable.call(from, symbols[i])) {
-					to[symbols[i]] = from[symbols[i]];
-				}
-			}
-		}
-	}
-
-	return to;
-};
-
-
-/***/ }),
-/* 304 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;(function (root, factory){
-  'use strict';
-
-  /*istanbul ignore next:cant test*/
-  if (typeof module === 'object' && typeof module.exports === 'object') {
-    module.exports = factory();
-  } else if (true) {
-    // AMD. Register as an anonymous module.
-    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
-				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
-				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-  } else {
-    // Browser globals
-    root.objectPath = factory();
-  }
-})(this, function(){
-  'use strict';
-
-  var toStr = Object.prototype.toString;
-  function hasOwnProperty(obj, prop) {
-    if(obj == null) {
-      return false
-    }
-    //to handle objects with null prototypes (too edge case?)
-    return Object.prototype.hasOwnProperty.call(obj, prop)
-  }
-
-  function isEmpty(value){
-    if (!value) {
-      return true;
-    }
-    if (isArray(value) && value.length === 0) {
-        return true;
-    } else if (typeof value !== 'string') {
-        for (var i in value) {
-            if (hasOwnProperty(value, i)) {
-                return false;
-            }
-        }
-        return true;
-    }
-    return false;
-  }
-
-  function toString(type){
-    return toStr.call(type);
-  }
-
-  function isObject(obj){
-    return typeof obj === 'object' && toString(obj) === "[object Object]";
-  }
-
-  var isArray = Array.isArray || function(obj){
-    /*istanbul ignore next:cant test*/
-    return toStr.call(obj) === '[object Array]';
-  }
-
-  function isBoolean(obj){
-    return typeof obj === 'boolean' || toString(obj) === '[object Boolean]';
-  }
-
-  function getKey(key){
-    var intKey = parseInt(key);
-    if (intKey.toString() === key) {
-      return intKey;
-    }
-    return key;
-  }
-
-  function factory(options) {
-    options = options || {}
-
-    var objectPath = function(obj) {
-      return Object.keys(objectPath).reduce(function(proxy, prop) {
-        if(prop === 'create') {
-          return proxy;
-        }
-
-        /*istanbul ignore else*/
-        if (typeof objectPath[prop] === 'function') {
-          proxy[prop] = objectPath[prop].bind(objectPath, obj);
-        }
-
-        return proxy;
-      }, {});
-    };
-
-    function hasShallowProperty(obj, prop) {
-      return (options.includeInheritedProps || (typeof prop === 'number' && Array.isArray(obj)) || hasOwnProperty(obj, prop))
-    }
-
-    function getShallowProperty(obj, prop) {
-      if (hasShallowProperty(obj, prop)) {
-        return obj[prop];
-      }
-    }
-
-    function set(obj, path, value, doNotReplace){
-      if (typeof path === 'number') {
-        path = [path];
-      }
-      if (!path || path.length === 0) {
-        return obj;
-      }
-      if (typeof path === 'string') {
-        return set(obj, path.split('.').map(getKey), value, doNotReplace);
-      }
-      var currentPath = path[0];
-      var currentValue = getShallowProperty(obj, currentPath);
-      if (path.length === 1) {
-        if (currentValue === void 0 || !doNotReplace) {
-          obj[currentPath] = value;
-        }
-        return currentValue;
-      }
-
-      if (currentValue === void 0) {
-        //check if we assume an array
-        if(typeof path[1] === 'number') {
-          obj[currentPath] = [];
-        } else {
-          obj[currentPath] = {};
-        }
-      }
-
-      return set(obj[currentPath], path.slice(1), value, doNotReplace);
-    }
-
-    objectPath.has = function (obj, path) {
-      if (typeof path === 'number') {
-        path = [path];
-      } else if (typeof path === 'string') {
-        path = path.split('.');
-      }
-
-      if (!path || path.length === 0) {
-        return !!obj;
-      }
-
-      for (var i = 0; i < path.length; i++) {
-        var j = getKey(path[i]);
-
-        if((typeof j === 'number' && isArray(obj) && j < obj.length) ||
-          (options.includeInheritedProps ? (j in Object(obj)) : hasOwnProperty(obj, j))) {
-          obj = obj[j];
-        } else {
-          return false;
-        }
-      }
-
-      return true;
-    };
-
-    objectPath.ensureExists = function (obj, path, value){
-      return set(obj, path, value, true);
-    };
-
-    objectPath.set = function (obj, path, value, doNotReplace){
-      return set(obj, path, value, doNotReplace);
-    };
-
-    objectPath.insert = function (obj, path, value, at){
-      var arr = objectPath.get(obj, path);
-      at = ~~at;
-      if (!isArray(arr)) {
-        arr = [];
-        objectPath.set(obj, path, arr);
-      }
-      arr.splice(at, 0, value);
-    };
-
-    objectPath.empty = function(obj, path) {
-      if (isEmpty(path)) {
-        return void 0;
-      }
-      if (obj == null) {
-        return void 0;
-      }
-
-      var value, i;
-      if (!(value = objectPath.get(obj, path))) {
-        return void 0;
-      }
-
-      if (typeof value === 'string') {
-        return objectPath.set(obj, path, '');
-      } else if (isBoolean(value)) {
-        return objectPath.set(obj, path, false);
-      } else if (typeof value === 'number') {
-        return objectPath.set(obj, path, 0);
-      } else if (isArray(value)) {
-        value.length = 0;
-      } else if (isObject(value)) {
-        for (i in value) {
-          if (hasShallowProperty(value, i)) {
-            delete value[i];
-          }
-        }
-      } else {
-        return objectPath.set(obj, path, null);
-      }
-    };
-
-    objectPath.push = function (obj, path /*, values */){
-      var arr = objectPath.get(obj, path);
-      if (!isArray(arr)) {
-        arr = [];
-        objectPath.set(obj, path, arr);
-      }
-
-      arr.push.apply(arr, Array.prototype.slice.call(arguments, 2));
-    };
-
-    objectPath.coalesce = function (obj, paths, defaultValue) {
-      var value;
-
-      for (var i = 0, len = paths.length; i < len; i++) {
-        if ((value = objectPath.get(obj, paths[i])) !== void 0) {
-          return value;
-        }
-      }
-
-      return defaultValue;
-    };
-
-    objectPath.get = function (obj, path, defaultValue){
-      if (typeof path === 'number') {
-        path = [path];
-      }
-      if (!path || path.length === 0) {
-        return obj;
-      }
-      if (obj == null) {
-        return defaultValue;
-      }
-      if (typeof path === 'string') {
-        return objectPath.get(obj, path.split('.'), defaultValue);
-      }
-
-      var currentPath = getKey(path[0]);
-      var nextObj = getShallowProperty(obj, currentPath)
-      if (nextObj === void 0) {
-        return defaultValue;
-      }
-
-      if (path.length === 1) {
-        return nextObj;
-      }
-
-      return objectPath.get(obj[currentPath], path.slice(1), defaultValue);
-    };
-
-    objectPath.del = function del(obj, path) {
-      if (typeof path === 'number') {
-        path = [path];
-      }
-
-      if (obj == null) {
-        return obj;
-      }
-
-      if (isEmpty(path)) {
-        return obj;
-      }
-      if(typeof path === 'string') {
-        return objectPath.del(obj, path.split('.'));
-      }
-
-      var currentPath = getKey(path[0]);
-      if (!hasShallowProperty(obj, currentPath)) {
-        return obj;
-      }
-
-      if(path.length === 1) {
-        if (isArray(obj)) {
-          obj.splice(currentPath, 1);
-        } else {
-          delete obj[currentPath];
-        }
-      } else {
-        return objectPath.del(obj[currentPath], path.slice(1));
-      }
-
-      return obj;
-    }
-
-    return objectPath;
-  }
-
-  var mod = factory();
-  mod.create = factory;
-  mod.withInheritedProps = factory({includeInheritedProps: true})
-  return mod;
-});
-
-
-/***/ }),
-/* 305 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var jsonSafeStringify = __webpack_require__(745)
-var crypto = __webpack_require__(11)
-var Buffer = __webpack_require__(45).Buffer
-
-var defer = typeof setImmediate === 'undefined'
-  ? process.nextTick
-  : setImmediate
-
-function paramsHaveRequestBody (params) {
-  return (
-    params.body ||
-    params.requestBodyStream ||
-    (params.json && typeof params.json !== 'boolean') ||
-    params.multipart
-  )
-}
-
-function safeStringify (obj, replacer) {
-  var ret
-  try {
-    ret = JSON.stringify(obj, replacer)
-  } catch (e) {
-    ret = jsonSafeStringify(obj, replacer)
-  }
-  return ret
-}
-
-function md5 (str) {
-  return crypto.createHash('md5').update(str).digest('hex')
-}
-
-function isReadStream (rs) {
-  return rs.readable && rs.path && rs.mode
-}
-
-function toBase64 (str) {
-  return Buffer.from(str || '', 'utf8').toString('base64')
-}
-
-function copy (obj) {
-  var o = {}
-  Object.keys(obj).forEach(function (i) {
-    o[i] = obj[i]
-  })
-  return o
-}
-
-function version () {
-  var numbers = process.version.replace('v', '').split('.')
-  return {
-    major: parseInt(numbers[0], 10),
-    minor: parseInt(numbers[1], 10),
-    patch: parseInt(numbers[2], 10)
-  }
-}
-
-exports.paramsHaveRequestBody = paramsHaveRequestBody
-exports.safeStringify = safeStringify
-exports.md5 = md5
-exports.isReadStream = isReadStream
-exports.toBase64 = toBase64
-exports.copy = copy
-exports.version = version
-exports.defer = defer
-
-
-/***/ }),
-/* 306 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var current = (process.versions && process.versions.node && process.versions.node.split('.')) || [];
-
-function specifierIncluded(specifier) {
-    var parts = specifier.split(' ');
-    var op = parts.length > 1 ? parts[0] : '=';
-    var versionParts = (parts.length > 1 ? parts[1] : parts[0]).split('.');
-
-    for (var i = 0; i < 3; ++i) {
-        var cur = Number(current[i] || 0);
-        var ver = Number(versionParts[i] || 0);
-        if (cur === ver) {
-            continue; // eslint-disable-line no-restricted-syntax, no-continue
-        }
-        if (op === '<') {
-            return cur < ver;
-        } else if (op === '>=') {
-            return cur >= ver;
-        } else {
-            return false;
-        }
-    }
-    return op === '>=';
-}
-
-function matchesRange(range) {
-    var specifiers = range.split(/ ?&& ?/);
-    if (specifiers.length === 0) { return false; }
-    for (var i = 0; i < specifiers.length; ++i) {
-        if (!specifierIncluded(specifiers[i])) { return false; }
-    }
-    return true;
-}
-
-function versionIncluded(specifierValue) {
-    if (typeof specifierValue === 'boolean') { return specifierValue; }
-    if (specifierValue && typeof specifierValue === 'object') {
-        for (var i = 0; i < specifierValue.length; ++i) {
-            if (matchesRange(specifierValue[i])) { return true; }
-        }
-        return false;
-    }
-    return matchesRange(specifierValue);
-}
-
-var data = __webpack_require__(816);
-
-var core = {};
-for (var mod in data) { // eslint-disable-line no-restricted-syntax
-    if (Object.prototype.hasOwnProperty.call(data, mod)) {
-        core[mod] = versionIncluded(data[mod]);
-    }
-}
-module.exports = core;
-
-
-/***/ }),
-/* 307 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = rimraf
-rimraf.sync = rimrafSync
-
-var assert = __webpack_require__(28)
-var path = __webpack_require__(0)
-var fs = __webpack_require__(5)
-var glob = __webpack_require__(99)
-var _0666 = parseInt('666', 8)
-
-var defaultGlobOpts = {
-  nosort: true,
-  silent: true
-}
-
-// for EMFILE handling
-var timeout = 0
-
-var isWindows = (process.platform === "win32")
-
-function defaults (options) {
-  var methods = [
-    'unlink',
-    'chmod',
-    'stat',
-    'lstat',
-    'rmdir',
-    'readdir'
-  ]
-  methods.forEach(function(m) {
-    options[m] = options[m] || fs[m]
-    m = m + 'Sync'
-    options[m] = options[m] || fs[m]
-  })
-
-  options.maxBusyTries = options.maxBusyTries || 3
-  options.emfileWait = options.emfileWait || 1000
-  if (options.glob === false) {
-    options.disableGlob = true
-  }
-  options.disableGlob = options.disableGlob || false
-  options.glob = options.glob || defaultGlobOpts
-}
-
-function rimraf (p, options, cb) {
-  if (typeof options === 'function') {
-    cb = options
-    options = {}
-  }
-
-  assert(p, 'rimraf: missing path')
-  assert.equal(typeof p, 'string', 'rimraf: path should be a string')
-  assert.equal(typeof cb, 'function', 'rimraf: callback function required')
-  assert(options, 'rimraf: invalid options argument provided')
-  assert.equal(typeof options, 'object', 'rimraf: options should be object')
-
-  defaults(options)
-
-  var busyTries = 0
-  var errState = null
-  var n = 0
-
-  if (options.disableGlob || !glob.hasMagic(p))
-    return afterGlob(null, [p])
-
-  options.lstat(p, function (er, stat) {
-    if (!er)
-      return afterGlob(null, [p])
-
-    glob(p, options.glob, afterGlob)
-  })
-
-  function next (er) {
-    errState = errState || er
-    if (--n === 0)
-      cb(errState)
-  }
-
-  function afterGlob (er, results) {
-    if (er)
-      return cb(er)
-
-    n = results.length
-    if (n === 0)
-      return cb()
-
-    results.forEach(function (p) {
-      rimraf_(p, options, function CB (er) {
-        if (er) {
-          if ((er.code === "EBUSY" || er.code === "ENOTEMPTY" || er.code === "EPERM") &&
-              busyTries < options.maxBusyTries) {
-            busyTries ++
-            var time = busyTries * 100
-            // try again, with the same exact callback as this one.
-            return setTimeout(function () {
-              rimraf_(p, options, CB)
-            }, time)
-          }
-
-          // this one won't happen if graceful-fs is used.
-          if (er.code === "EMFILE" && timeout < options.emfileWait) {
-            return setTimeout(function () {
-              rimraf_(p, options, CB)
-            }, timeout ++)
-          }
-
-          // already gone
-          if (er.code === "ENOENT") er = null
-        }
-
-        timeout = 0
-        next(er)
-      })
-    })
-  }
-}
-
-// Two possible strategies.
-// 1. Assume it's a file.  unlink it, then do the dir stuff on EPERM or EISDIR
-// 2. Assume it's a directory.  readdir, then do the file stuff on ENOTDIR
-//
-// Both result in an extra syscall when you guess wrong.  However, there
-// are likely far more normal files in the world than directories.  This
-// is based on the assumption that a the average number of files per
-// directory is >= 1.
-//
-// If anyone ever complains about this, then I guess the strategy could
-// be made configurable somehow.  But until then, YAGNI.
-function rimraf_ (p, options, cb) {
-  assert(p)
-  assert(options)
-  assert(typeof cb === 'function')
-
-  // sunos lets the root user unlink directories, which is... weird.
-  // so we have to lstat here and make sure it's not a dir.
-  options.lstat(p, function (er, st) {
-    if (er && er.code === "ENOENT")
-      return cb(null)
-
-    // Windows can EPERM on stat.  Life is suffering.
-    if (er && er.code === "EPERM" && isWindows)
-      fixWinEPERM(p, options, er, cb)
-
-    if (st && st.isDirectory())
-      return rmdir(p, options, er, cb)
-
-    options.unlink(p, function (er) {
-      if (er) {
-        if (er.code === "ENOENT")
-          return cb(null)
-        if (er.code === "EPERM")
-          return (isWindows)
-            ? fixWinEPERM(p, options, er, cb)
-            : rmdir(p, options, er, cb)
-        if (er.code === "EISDIR")
-          return rmdir(p, options, er, cb)
-      }
-      return cb(er)
-    })
-  })
-}
-
-function fixWinEPERM (p, options, er, cb) {
-  assert(p)
-  assert(options)
-  assert(typeof cb === 'function')
-  if (er)
-    assert(er instanceof Error)
-
-  options.chmod(p, _0666, function (er2) {
-    if (er2)
-      cb(er2.code === "ENOENT" ? null : er)
-    else
-      options.stat(p, function(er3, stats) {
-        if (er3)
-          cb(er3.code === "ENOENT" ? null : er)
-        else if (stats.isDirectory())
-          rmdir(p, options, er, cb)
-        else
-          options.unlink(p, cb)
-      })
-  })
-}
-
-function fixWinEPERMSync (p, options, er) {
-  assert(p)
-  assert(options)
-  if (er)
-    assert(er instanceof Error)
-
-  try {
-    options.chmodSync(p, _0666)
-  } catch (er2) {
-    if (er2.code === "ENOENT")
-      return
-    else
-      throw er
-  }
-
-  try {
-    var stats = options.statSync(p)
-  } catch (er3) {
-    if (er3.code === "ENOENT")
-      return
-    else
-      throw er
-  }
-
-  if (stats.isDirectory())
-    rmdirSync(p, options, er)
-  else
-    options.unlinkSync(p)
-}
-
-function rmdir (p, options, originalEr, cb) {
-  assert(p)
-  assert(options)
-  if (originalEr)
-    assert(originalEr instanceof Error)
-  assert(typeof cb === 'function')
-
-  // try to rmdir first, and only readdir on ENOTEMPTY or EEXIST (SunOS)
-  // if we guessed wrong, and it's not a directory, then
-  // raise the original error.
-  options.rmdir(p, function (er) {
-    if (er && (er.code === "ENOTEMPTY" || er.code === "EEXIST" || er.code === "EPERM"))
-      rmkids(p, options, cb)
-    else if (er && er.code === "ENOTDIR")
-      cb(originalEr)
-    else
-      cb(er)
-  })
-}
-
-function rmkids(p, options, cb) {
-  assert(p)
-  assert(options)
-  assert(typeof cb === 'function')
-
-  options.readdir(p, function (er, files) {
-    if (er)
-      return cb(er)
-    var n = files.length
-    if (n === 0)
-      return options.rmdir(p, cb)
-    var errState
-    files.forEach(function (f) {
-      rimraf(path.join(p, f), options, function (er) {
-        if (errState)
-          return
-        if (er)
-          return cb(errState = er)
-        if (--n === 0)
-          options.rmdir(p, cb)
-      })
-    })
-  })
-}
-
-// this looks simpler, and is strictly *faster*, but will
-// tie up the JavaScript thread and fail on excessively
-// deep directory trees.
-function rimrafSync (p, options) {
-  options = options || {}
-  defaults(options)
-
-  assert(p, 'rimraf: missing path')
-  assert.equal(typeof p, 'string', 'rimraf: path should be a string')
-  assert(options, 'rimraf: missing options')
-  assert.equal(typeof options, 'object', 'rimraf: options should be object')
-
-  var results
-
-  if (options.disableGlob || !glob.hasMagic(p)) {
-    results = [p]
-  } else {
-    try {
-      options.lstatSync(p)
-      results = [p]
-    } catch (er) {
-      results = glob.sync(p, options.glob)
-    }
-  }
-
-  if (!results.length)
-    return
-
-  for (var i = 0; i < results.length; i++) {
-    var p = results[i]
-
-    try {
-      var st = options.lstatSync(p)
-    } catch (er) {
-      if (er.code === "ENOENT")
-        return
-
-      // Windows can EPERM on stat.  Life is suffering.
-      if (er.code === "EPERM" && isWindows)
-        fixWinEPERMSync(p, options, er)
-    }
-
-    try {
-      // sunos lets the root user unlink directories, which is... weird.
-      if (st && st.isDirectory())
-        rmdirSync(p, options, null)
-      else
-        options.unlinkSync(p)
-    } catch (er) {
-      if (er.code === "ENOENT")
-        return
-      if (er.code === "EPERM")
-        return isWindows ? fixWinEPERMSync(p, options, er) : rmdirSync(p, options, er)
-      if (er.code !== "EISDIR")
-        throw er
-
-      rmdirSync(p, options, er)
-    }
-  }
-}
-
-function rmdirSync (p, options, originalEr) {
-  assert(p)
-  assert(options)
-  if (originalEr)
-    assert(originalEr instanceof Error)
-
-  try {
-    options.rmdirSync(p)
-  } catch (er) {
-    if (er.code === "ENOENT")
-      return
-    if (er.code === "ENOTDIR")
-      throw originalEr
-    if (er.code === "ENOTEMPTY" || er.code === "EEXIST" || er.code === "EPERM")
-      rmkidsSync(p, options)
-  }
-}
-
-function rmkidsSync (p, options) {
-  assert(p)
-  assert(options)
-  options.readdirSync(p).forEach(function (f) {
-    rimrafSync(path.join(p, f), options)
-  })
-
-  // We only end up here once we got ENOTEMPTY at least once, and
-  // at this point, we are guaranteed to have removed all the kids.
-  // So, we know that it won't be ENOENT or ENOTDIR or anything else.
-  // try really hard to delete stuff on windows, because it has a
-  // PROFOUNDLY annoying habit of not closing handles promptly when
-  // files are deleted, resulting in spurious ENOTEMPTY errors.
-  var retries = isWindows ? 100 : 1
-  var i = 0
-  do {
-    var threw = true
-    try {
-      var ret = options.rmdirSync(p, options)
-      threw = false
-      return ret
-    } finally {
-      if (++i < retries && threw)
-        continue
-    }
-  } while (true)
-}
-
-
-/***/ }),
-/* 308 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ReplaySubject; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__scheduler_queue__ = __webpack_require__(439);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__operators_observeOn__ = __webpack_require__(434);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_ObjectUnsubscribedError__ = __webpack_require__(189);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__SubjectSubscription__ = __webpack_require__(422);
-/** PURE_IMPORTS_START tslib,_Subject,_scheduler_queue,_Subscription,_operators_observeOn,_util_ObjectUnsubscribedError,_SubjectSubscription PURE_IMPORTS_END */
-
-
-
-
-
-
-
-var ReplaySubject = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ReplaySubject, _super);
-    function ReplaySubject(bufferSize, windowTime, scheduler) {
-        if (bufferSize === void 0) {
-            bufferSize = Number.POSITIVE_INFINITY;
-        }
-        if (windowTime === void 0) {
-            windowTime = Number.POSITIVE_INFINITY;
-        }
-        var _this = _super.call(this) || this;
-        _this.scheduler = scheduler;
-        _this._events = [];
-        _this._infiniteTimeWindow = false;
-        _this._bufferSize = bufferSize < 1 ? 1 : bufferSize;
-        _this._windowTime = windowTime < 1 ? 1 : windowTime;
-        if (windowTime === Number.POSITIVE_INFINITY) {
-            _this._infiniteTimeWindow = true;
-            _this.next = _this.nextInfiniteTimeWindow;
-        }
-        else {
-            _this.next = _this.nextTimeWindow;
-        }
-        return _this;
-    }
-    ReplaySubject.prototype.nextInfiniteTimeWindow = function (value) {
-        var _events = this._events;
-        _events.push(value);
-        if (_events.length > this._bufferSize) {
-            _events.shift();
-        }
-        _super.prototype.next.call(this, value);
-    };
-    ReplaySubject.prototype.nextTimeWindow = function (value) {
-        this._events.push(new ReplayEvent(this._getNow(), value));
-        this._trimBufferThenGetEvents();
-        _super.prototype.next.call(this, value);
-    };
-    ReplaySubject.prototype._subscribe = function (subscriber) {
-        var _infiniteTimeWindow = this._infiniteTimeWindow;
-        var _events = _infiniteTimeWindow ? this._events : this._trimBufferThenGetEvents();
-        var scheduler = this.scheduler;
-        var len = _events.length;
-        var subscription;
-        if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_5__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        else if (this.isStopped || this.hasError) {
-            subscription = __WEBPACK_IMPORTED_MODULE_3__Subscription__["a" /* Subscription */].EMPTY;
-        }
-        else {
-            this.observers.push(subscriber);
-            subscription = new __WEBPACK_IMPORTED_MODULE_6__SubjectSubscription__["a" /* SubjectSubscription */](this, subscriber);
-        }
-        if (scheduler) {
-            subscriber.add(subscriber = new __WEBPACK_IMPORTED_MODULE_4__operators_observeOn__["a" /* ObserveOnSubscriber */](subscriber, scheduler));
-        }
-        if (_infiniteTimeWindow) {
-            for (var i = 0; i < len && !subscriber.closed; i++) {
-                subscriber.next(_events[i]);
-            }
-        }
-        else {
-            for (var i = 0; i < len && !subscriber.closed; i++) {
-                subscriber.next(_events[i].value);
-            }
-        }
-        if (this.hasError) {
-            subscriber.error(this.thrownError);
-        }
-        else if (this.isStopped) {
-            subscriber.complete();
-        }
-        return subscription;
-    };
-    ReplaySubject.prototype._getNow = function () {
-        return (this.scheduler || __WEBPACK_IMPORTED_MODULE_2__scheduler_queue__["a" /* queue */]).now();
-    };
-    ReplaySubject.prototype._trimBufferThenGetEvents = function () {
-        var now = this._getNow();
-        var _bufferSize = this._bufferSize;
-        var _windowTime = this._windowTime;
-        var _events = this._events;
-        var eventsCount = _events.length;
-        var spliceCount = 0;
-        while (spliceCount < eventsCount) {
-            if ((now - _events[spliceCount].time) < _windowTime) {
-                break;
-            }
-            spliceCount++;
-        }
-        if (eventsCount > _bufferSize) {
-            spliceCount = Math.max(spliceCount, eventsCount - _bufferSize);
-        }
-        if (spliceCount > 0) {
-            _events.splice(0, spliceCount);
-        }
-        return _events;
-    };
-    return ReplaySubject;
-}(__WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]));
-
-var ReplayEvent = /*@__PURE__*/ (function () {
-    function ReplayEvent(time, value) {
-        this.time = time;
-        this.value = value;
-    }
-    return ReplayEvent;
-}());
-//# sourceMappingURL=ReplaySubject.js.map
-
-
-/***/ }),
-/* 309 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = combineLatest;
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return CombineLatestOperator; });
-/* unused harmony export CombineLatestSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isScheduler__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__fromArray__ = __webpack_require__(85);
-/** PURE_IMPORTS_START tslib,_util_isScheduler,_util_isArray,_OuterSubscriber,_util_subscribeToResult,_fromArray PURE_IMPORTS_END */
-
-
-
-
-
-
-var NONE = {};
-function combineLatest() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    var resultSelector = null;
-    var scheduler = null;
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isScheduler__["a" /* isScheduler */])(observables[observables.length - 1])) {
-        scheduler = observables.pop();
-    }
-    if (typeof observables[observables.length - 1] === 'function') {
-        resultSelector = observables.pop();
-    }
-    if (observables.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArray__["a" /* isArray */])(observables[0])) {
-        observables = observables[0];
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__fromArray__["a" /* fromArray */])(observables, scheduler).lift(new CombineLatestOperator(resultSelector));
-}
-var CombineLatestOperator = /*@__PURE__*/ (function () {
-    function CombineLatestOperator(resultSelector) {
-        this.resultSelector = resultSelector;
-    }
-    CombineLatestOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new CombineLatestSubscriber(subscriber, this.resultSelector));
-    };
-    return CombineLatestOperator;
-}());
-
-var CombineLatestSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](CombineLatestSubscriber, _super);
-    function CombineLatestSubscriber(destination, resultSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.resultSelector = resultSelector;
-        _this.active = 0;
-        _this.values = [];
-        _this.observables = [];
-        return _this;
-    }
-    CombineLatestSubscriber.prototype._next = function (observable) {
-        this.values.push(NONE);
-        this.observables.push(observable);
-    };
-    CombineLatestSubscriber.prototype._complete = function () {
-        var observables = this.observables;
-        var len = observables.length;
-        if (len === 0) {
-            this.destination.complete();
-        }
-        else {
-            this.active = len;
-            this.toRespond = len;
-            for (var i = 0; i < len; i++) {
-                var observable = observables[i];
-                this.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(this, observable, observable, i));
-            }
-        }
-    };
-    CombineLatestSubscriber.prototype.notifyComplete = function (unused) {
-        if ((this.active -= 1) === 0) {
-            this.destination.complete();
-        }
-    };
-    CombineLatestSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        var values = this.values;
-        var oldVal = values[outerIndex];
-        var toRespond = !this.toRespond
-            ? 0
-            : oldVal === NONE ? --this.toRespond : this.toRespond;
-        values[outerIndex] = innerValue;
-        if (toRespond === 0) {
-            if (this.resultSelector) {
-                this._tryResultSelector(values);
-            }
-            else {
-                this.destination.next(values.slice());
-            }
-        }
-    };
-    CombineLatestSubscriber.prototype._tryResultSelector = function (values) {
-        var result;
-        try {
-            result = this.resultSelector.apply(this, values);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(result);
-    };
-    return CombineLatestSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-
-//# sourceMappingURL=combineLatest.js.map
-
-
-/***/ }),
-/* 310 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = defer;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__from__ = __webpack_require__(62);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START _Observable,_from,_empty PURE_IMPORTS_END */
-
-
-
-function defer(observableFactory) {
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var input;
-        try {
-            input = observableFactory();
-        }
-        catch (err) {
-            subscriber.error(err);
-            return undefined;
-        }
-        var source = input ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__from__["a" /* from */])(input) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__empty__["a" /* empty */])();
-        return source.subscribe(subscriber);
-    });
-}
-//# sourceMappingURL=defer.js.map
-
-
-/***/ }),
-/* 311 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = of;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_isScheduler__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__fromArray__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__empty__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__scalar__ = __webpack_require__(312);
-/** PURE_IMPORTS_START _util_isScheduler,_fromArray,_empty,_scalar PURE_IMPORTS_END */
-
-
-
-
-function of() {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    var scheduler = args[args.length - 1];
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_isScheduler__["a" /* isScheduler */])(scheduler)) {
-        args.pop();
-    }
-    else {
-        scheduler = undefined;
-    }
-    switch (args.length) {
-        case 0:
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__empty__["a" /* empty */])(scheduler);
-        case 1:
-            return scheduler ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__fromArray__["a" /* fromArray */])(args, scheduler) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__scalar__["a" /* scalar */])(args[0]);
-        default:
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__fromArray__["a" /* fromArray */])(args, scheduler);
-    }
-}
-//# sourceMappingURL=of.js.map
-
-
-/***/ }),
-/* 312 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = scalar;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/** PURE_IMPORTS_START _Observable PURE_IMPORTS_END */
-
-function scalar(value) {
-    var result = new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        subscriber.next(value);
-        subscriber.complete();
-    });
-    result._isScalar = true;
-    result.value = value;
-    return result;
-}
-//# sourceMappingURL=scalar.js.map
-
-
-/***/ }),
-/* 313 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = throwError;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/** PURE_IMPORTS_START _Observable PURE_IMPORTS_END */
-
-function throwError(error, scheduler) {
-    if (!scheduler) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) { return subscriber.error(error); });
-    }
-    else {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) { return scheduler.schedule(dispatch, 0, { error: error, subscriber: subscriber }); });
-    }
-}
-function dispatch(_a) {
-    var error = _a.error, subscriber = _a.subscriber;
-    subscriber.error(error);
-}
-//# sourceMappingURL=throwError.js.map
-
-
-/***/ }),
-/* 314 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = zip;
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return ZipOperator; });
-/* unused harmony export ZipSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__fromArray__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__internal_symbol_iterator__ = __webpack_require__(151);
-/** PURE_IMPORTS_START tslib,_fromArray,_util_isArray,_Subscriber,_OuterSubscriber,_util_subscribeToResult,_.._internal_symbol_iterator PURE_IMPORTS_END */
-
-
-
-
-
-
-
-function zip() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    var resultSelector = observables[observables.length - 1];
-    if (typeof resultSelector === 'function') {
-        observables.pop();
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__fromArray__["a" /* fromArray */])(observables, undefined).lift(new ZipOperator(resultSelector));
-}
-var ZipOperator = /*@__PURE__*/ (function () {
-    function ZipOperator(resultSelector) {
-        this.resultSelector = resultSelector;
-    }
-    ZipOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ZipSubscriber(subscriber, this.resultSelector));
-    };
-    return ZipOperator;
-}());
-
-var ZipSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ZipSubscriber, _super);
-    function ZipSubscriber(destination, resultSelector, values) {
-        if (values === void 0) {
-            values = Object.create(null);
-        }
-        var _this = _super.call(this, destination) || this;
-        _this.iterators = [];
-        _this.active = 0;
-        _this.resultSelector = (typeof resultSelector === 'function') ? resultSelector : null;
-        _this.values = values;
-        return _this;
-    }
-    ZipSubscriber.prototype._next = function (value) {
-        var iterators = this.iterators;
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArray__["a" /* isArray */])(value)) {
-            iterators.push(new StaticArrayIterator(value));
-        }
-        else if (typeof value[__WEBPACK_IMPORTED_MODULE_6__internal_symbol_iterator__["a" /* iterator */]] === 'function') {
-            iterators.push(new StaticIterator(value[__WEBPACK_IMPORTED_MODULE_6__internal_symbol_iterator__["a" /* iterator */]]()));
-        }
-        else {
-            iterators.push(new ZipBufferIterator(this.destination, this, value));
-        }
-    };
-    ZipSubscriber.prototype._complete = function () {
-        var iterators = this.iterators;
-        var len = iterators.length;
-        this.unsubscribe();
-        if (len === 0) {
-            this.destination.complete();
-            return;
-        }
-        this.active = len;
-        for (var i = 0; i < len; i++) {
-            var iterator = iterators[i];
-            if (iterator.stillUnsubscribed) {
-                var destination = this.destination;
-                destination.add(iterator.subscribe(iterator, i));
-            }
-            else {
-                this.active--;
-            }
-        }
-    };
-    ZipSubscriber.prototype.notifyInactive = function () {
-        this.active--;
-        if (this.active === 0) {
-            this.destination.complete();
-        }
-    };
-    ZipSubscriber.prototype.checkIterators = function () {
-        var iterators = this.iterators;
-        var len = iterators.length;
-        var destination = this.destination;
-        for (var i = 0; i < len; i++) {
-            var iterator = iterators[i];
-            if (typeof iterator.hasValue === 'function' && !iterator.hasValue()) {
-                return;
-            }
-        }
-        var shouldComplete = false;
-        var args = [];
-        for (var i = 0; i < len; i++) {
-            var iterator = iterators[i];
-            var result = iterator.next();
-            if (iterator.hasCompleted()) {
-                shouldComplete = true;
-            }
-            if (result.done) {
-                destination.complete();
-                return;
-            }
-            args.push(result.value);
-        }
-        if (this.resultSelector) {
-            this._tryresultSelector(args);
-        }
-        else {
-            destination.next(args);
-        }
-        if (shouldComplete) {
-            destination.complete();
-        }
-    };
-    ZipSubscriber.prototype._tryresultSelector = function (args) {
-        var result;
-        try {
-            result = this.resultSelector.apply(this, args);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(result);
-    };
-    return ZipSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__Subscriber__["a" /* Subscriber */]));
-
-var StaticIterator = /*@__PURE__*/ (function () {
-    function StaticIterator(iterator) {
-        this.iterator = iterator;
-        this.nextResult = iterator.next();
-    }
-    StaticIterator.prototype.hasValue = function () {
-        return true;
-    };
-    StaticIterator.prototype.next = function () {
-        var result = this.nextResult;
-        this.nextResult = this.iterator.next();
-        return result;
-    };
-    StaticIterator.prototype.hasCompleted = function () {
-        var nextResult = this.nextResult;
-        return nextResult && nextResult.done;
-    };
-    return StaticIterator;
-}());
-var StaticArrayIterator = /*@__PURE__*/ (function () {
-    function StaticArrayIterator(array) {
-        this.array = array;
-        this.index = 0;
-        this.length = 0;
-        this.length = array.length;
-    }
-    StaticArrayIterator.prototype[__WEBPACK_IMPORTED_MODULE_6__internal_symbol_iterator__["a" /* iterator */]] = function () {
-        return this;
-    };
-    StaticArrayIterator.prototype.next = function (value) {
-        var i = this.index++;
-        var array = this.array;
-        return i < this.length ? { value: array[i], done: false } : { value: null, done: true };
-    };
-    StaticArrayIterator.prototype.hasValue = function () {
-        return this.array.length > this.index;
-    };
-    StaticArrayIterator.prototype.hasCompleted = function () {
-        return this.array.length === this.index;
-    };
-    return StaticArrayIterator;
-}());
-var ZipBufferIterator = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ZipBufferIterator, _super);
-    function ZipBufferIterator(destination, parent, observable) {
-        var _this = _super.call(this, destination) || this;
-        _this.parent = parent;
-        _this.observable = observable;
-        _this.stillUnsubscribed = true;
-        _this.buffer = [];
-        _this.isComplete = false;
-        return _this;
-    }
-    ZipBufferIterator.prototype[__WEBPACK_IMPORTED_MODULE_6__internal_symbol_iterator__["a" /* iterator */]] = function () {
-        return this;
-    };
-    ZipBufferIterator.prototype.next = function () {
-        var buffer = this.buffer;
-        if (buffer.length === 0 && this.isComplete) {
-            return { value: null, done: true };
-        }
-        else {
-            return { value: buffer.shift(), done: false };
-        }
-    };
-    ZipBufferIterator.prototype.hasValue = function () {
-        return this.buffer.length > 0;
-    };
-    ZipBufferIterator.prototype.hasCompleted = function () {
-        return this.buffer.length === 0 && this.isComplete;
-    };
-    ZipBufferIterator.prototype.notifyComplete = function () {
-        if (this.buffer.length > 0) {
-            this.isComplete = true;
-            this.parent.notifyInactive();
-        }
-        else {
-            this.destination.complete();
-        }
-    };
-    ZipBufferIterator.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.buffer.push(innerValue);
-        this.parent.checkIterators();
-    };
-    ZipBufferIterator.prototype.subscribe = function (value, index) {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__["a" /* subscribeToResult */])(this, this.observable, this, index);
-    };
-    return ZipBufferIterator;
-}(__WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=zip.js.map
-
-
-/***/ }),
-/* 315 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = mergeAll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__mergeMap__ = __webpack_require__(148);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_identity__ = __webpack_require__(118);
-/** PURE_IMPORTS_START _mergeMap,_util_identity PURE_IMPORTS_END */
-
-
-function mergeAll(concurrent) {
-    if (concurrent === void 0) {
-        concurrent = Number.POSITIVE_INFINITY;
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__mergeMap__["a" /* mergeMap */])(__WEBPACK_IMPORTED_MODULE_1__util_identity__["a" /* identity */], concurrent);
-}
-//# sourceMappingURL=mergeAll.js.map
-
-
-/***/ }),
-/* 316 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = refCount;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function refCount() {
-    return function refCountOperatorFunction(source) {
-        return source.lift(new RefCountOperator(source));
-    };
-}
-var RefCountOperator = /*@__PURE__*/ (function () {
-    function RefCountOperator(connectable) {
-        this.connectable = connectable;
-    }
-    RefCountOperator.prototype.call = function (subscriber, source) {
-        var connectable = this.connectable;
-        connectable._refCount++;
-        var refCounter = new RefCountSubscriber(subscriber, connectable);
-        var subscription = source.subscribe(refCounter);
-        if (!refCounter.closed) {
-            refCounter.connection = connectable.connect();
-        }
-        return subscription;
-    };
-    return RefCountOperator;
-}());
-var RefCountSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RefCountSubscriber, _super);
-    function RefCountSubscriber(destination, connectable) {
-        var _this = _super.call(this, destination) || this;
-        _this.connectable = connectable;
-        return _this;
-    }
-    RefCountSubscriber.prototype._unsubscribe = function () {
-        var connectable = this.connectable;
-        if (!connectable) {
-            this.connection = null;
-            return;
-        }
-        this.connectable = null;
-        var refCount = connectable._refCount;
-        if (refCount <= 0) {
-            this.connection = null;
-            return;
-        }
-        connectable._refCount = refCount - 1;
-        if (refCount > 1) {
-            this.connection = null;
-            return;
-        }
-        var connection = this.connection;
-        var sharedConnection = connectable._connection;
-        this.connection = null;
-        if (sharedConnection && (!connection || sharedConnection === connection)) {
-            sharedConnection.unsubscribe();
-        }
-    };
-    return RefCountSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=refCount.js.map
-
-
-/***/ }),
-/* 317 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = scan;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function scan(accumulator, seed) {
-    var hasSeed = false;
-    if (arguments.length >= 2) {
-        hasSeed = true;
-    }
-    return function scanOperatorFunction(source) {
-        return source.lift(new ScanOperator(accumulator, seed, hasSeed));
-    };
-}
-var ScanOperator = /*@__PURE__*/ (function () {
-    function ScanOperator(accumulator, seed, hasSeed) {
-        if (hasSeed === void 0) {
-            hasSeed = false;
-        }
-        this.accumulator = accumulator;
-        this.seed = seed;
-        this.hasSeed = hasSeed;
-    }
-    ScanOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ScanSubscriber(subscriber, this.accumulator, this.seed, this.hasSeed));
-    };
-    return ScanOperator;
-}());
-var ScanSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ScanSubscriber, _super);
-    function ScanSubscriber(destination, accumulator, _seed, hasSeed) {
-        var _this = _super.call(this, destination) || this;
-        _this.accumulator = accumulator;
-        _this._seed = _seed;
-        _this.hasSeed = hasSeed;
-        _this.index = 0;
-        return _this;
-    }
-    Object.defineProperty(ScanSubscriber.prototype, "seed", {
-        get: function () {
-            return this._seed;
-        },
-        set: function (value) {
-            this.hasSeed = true;
-            this._seed = value;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ScanSubscriber.prototype._next = function (value) {
-        if (!this.hasSeed) {
-            this.seed = value;
-            this.destination.next(value);
-        }
-        else {
-            return this._tryNext(value);
-        }
-    };
-    ScanSubscriber.prototype._tryNext = function (value) {
-        var index = this.index++;
-        var result;
-        try {
-            result = this.accumulator(this.seed, value, index);
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-        this.seed = result;
-        this.destination.next(result);
-    };
-    return ScanSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=scan.js.map
-
-
-/***/ }),
-/* 318 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = switchMap;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__map__ = __webpack_require__(47);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__observable_from__ = __webpack_require__(62);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_InnerSubscriber,_util_subscribeToResult,_map,_observable_from PURE_IMPORTS_END */
-
-
-
-
-
-
-function switchMap(project, resultSelector) {
-    if (typeof resultSelector === 'function') {
-        return function (source) { return source.pipe(switchMap(function (a, i) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__observable_from__["a" /* from */])(project(a, i)).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__map__["a" /* map */])(function (b, ii) { return resultSelector(a, b, i, ii); })); })); };
-    }
-    return function (source) { return source.lift(new SwitchMapOperator(project)); };
-}
-var SwitchMapOperator = /*@__PURE__*/ (function () {
-    function SwitchMapOperator(project) {
-        this.project = project;
-    }
-    SwitchMapOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SwitchMapSubscriber(subscriber, this.project));
-    };
-    return SwitchMapOperator;
-}());
-var SwitchMapSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SwitchMapSubscriber, _super);
-    function SwitchMapSubscriber(destination, project) {
-        var _this = _super.call(this, destination) || this;
-        _this.project = project;
-        _this.index = 0;
-        return _this;
-    }
-    SwitchMapSubscriber.prototype._next = function (value) {
-        var result;
-        var index = this.index++;
-        try {
-            result = this.project(value, index);
-        }
-        catch (error) {
-            this.destination.error(error);
-            return;
-        }
-        this._innerSub(result, value, index);
-    };
-    SwitchMapSubscriber.prototype._innerSub = function (result, value, index) {
-        var innerSubscription = this.innerSubscription;
-        if (innerSubscription) {
-            innerSubscription.unsubscribe();
-        }
-        var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__["a" /* InnerSubscriber */](this, undefined, undefined);
-        var destination = this.destination;
-        destination.add(innerSubscriber);
-        this.innerSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__["a" /* subscribeToResult */])(this, result, value, index, innerSubscriber);
-    };
-    SwitchMapSubscriber.prototype._complete = function () {
-        var innerSubscription = this.innerSubscription;
-        if (!innerSubscription || innerSubscription.closed) {
-            _super.prototype._complete.call(this);
-        }
-        this.unsubscribe();
-    };
-    SwitchMapSubscriber.prototype._unsubscribe = function () {
-        this.innerSubscription = null;
-    };
-    SwitchMapSubscriber.prototype.notifyComplete = function (innerSub) {
-        var destination = this.destination;
-        destination.remove(innerSub);
-        this.innerSubscription = null;
-        if (this.isStopped) {
-            _super.prototype._complete.call(this);
-        }
-    };
-    SwitchMapSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.destination.next(innerValue);
-    };
-    return SwitchMapSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=switchMap.js.map
-
-
-/***/ }),
-/* 319 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = take;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_ArgumentOutOfRangeError__ = __webpack_require__(152);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__observable_empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_ArgumentOutOfRangeError,_observable_empty PURE_IMPORTS_END */
-
-
-
-
-function take(count) {
-    return function (source) {
-        if (count === 0) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_empty__["a" /* empty */])();
-        }
-        else {
-            return source.lift(new TakeOperator(count));
-        }
-    };
-}
-var TakeOperator = /*@__PURE__*/ (function () {
-    function TakeOperator(total) {
-        this.total = total;
-        if (this.total < 0) {
-            throw new __WEBPACK_IMPORTED_MODULE_2__util_ArgumentOutOfRangeError__["a" /* ArgumentOutOfRangeError */];
-        }
-    }
-    TakeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new TakeSubscriber(subscriber, this.total));
-    };
-    return TakeOperator;
-}());
-var TakeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](TakeSubscriber, _super);
-    function TakeSubscriber(destination, total) {
-        var _this = _super.call(this, destination) || this;
-        _this.total = total;
-        _this.count = 0;
-        return _this;
-    }
-    TakeSubscriber.prototype._next = function (value) {
-        var total = this.total;
-        var count = ++this.count;
-        if (count <= total) {
-            this.destination.next(value);
-            if (count === total) {
-                this.destination.complete();
-                this.unsubscribe();
-            }
-        }
-    };
-    return TakeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=take.js.map
-
-
-/***/ }),
-/* 320 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = takeLast;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_ArgumentOutOfRangeError__ = __webpack_require__(152);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__observable_empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_ArgumentOutOfRangeError,_observable_empty PURE_IMPORTS_END */
-
-
-
-
-function takeLast(count) {
-    return function takeLastOperatorFunction(source) {
-        if (count === 0) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_empty__["a" /* empty */])();
-        }
-        else {
-            return source.lift(new TakeLastOperator(count));
-        }
-    };
-}
-var TakeLastOperator = /*@__PURE__*/ (function () {
-    function TakeLastOperator(total) {
-        this.total = total;
-        if (this.total < 0) {
-            throw new __WEBPACK_IMPORTED_MODULE_2__util_ArgumentOutOfRangeError__["a" /* ArgumentOutOfRangeError */];
-        }
-    }
-    TakeLastOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new TakeLastSubscriber(subscriber, this.total));
-    };
-    return TakeLastOperator;
-}());
-var TakeLastSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](TakeLastSubscriber, _super);
-    function TakeLastSubscriber(destination, total) {
-        var _this = _super.call(this, destination) || this;
-        _this.total = total;
-        _this.ring = new Array();
-        _this.count = 0;
-        return _this;
-    }
-    TakeLastSubscriber.prototype._next = function (value) {
-        var ring = this.ring;
-        var total = this.total;
-        var count = this.count++;
-        if (ring.length < total) {
-            ring.push(value);
-        }
-        else {
-            var index = count % total;
-            ring[index] = value;
-        }
-    };
-    TakeLastSubscriber.prototype._complete = function () {
-        var destination = this.destination;
-        var count = this.count;
-        if (count > 0) {
-            var total = this.count >= this.total ? this.total : this.count;
-            var ring = this.ring;
-            for (var i = 0; i < total; i++) {
-                var idx = (count++) % total;
-                destination.next(ring[idx]);
-            }
-        }
-        destination.complete();
-    };
-    return TakeLastSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=takeLast.js.map
-
-
-/***/ }),
-/* 321 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return rxSubscriber; });
-/* unused harmony export $$rxSubscriber */
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var rxSubscriber = typeof Symbol === 'function'
-    ? /*@__PURE__*/ Symbol('rxSubscriber')
-    : '@@rxSubscriber_' + /*@__PURE__*/ Math.random();
-var $$rxSubscriber = rxSubscriber;
-//# sourceMappingURL=rxSubscriber.js.map
-
-
-/***/ }),
-/* 322 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = canReportError;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START _Subscriber PURE_IMPORTS_END */
-
-function canReportError(observer) {
-    while (observer) {
-        var _a = observer, closed_1 = _a.closed, destination = _a.destination, isStopped = _a.isStopped;
-        if (closed_1 || isStopped) {
-            return false;
-        }
-        else if (destination && destination instanceof __WEBPACK_IMPORTED_MODULE_0__Subscriber__["a" /* Subscriber */]) {
-            observer = destination;
-        }
-        else {
-            observer = null;
-        }
-    }
-    return true;
-}
-//# sourceMappingURL=canReportError.js.map
-
-
-/***/ }),
-/* 323 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = hostReportError;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function hostReportError(err) {
-    setTimeout(function () { throw err; });
-}
-//# sourceMappingURL=hostReportError.js.map
-
-
-/***/ }),
-/* 324 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = pipe;
-/* harmony export (immutable) */ __webpack_exports__["b"] = pipeFromArray;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__noop__ = __webpack_require__(191);
-/** PURE_IMPORTS_START _noop PURE_IMPORTS_END */
-
-function pipe() {
-    var fns = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        fns[_i] = arguments[_i];
-    }
-    return pipeFromArray(fns);
-}
-function pipeFromArray(fns) {
-    if (!fns) {
-        return __WEBPACK_IMPORTED_MODULE_0__noop__["a" /* noop */];
-    }
-    if (fns.length === 1) {
-        return fns[0];
-    }
-    return function piped(input) {
-        return fns.reduce(function (prev, fn) { return fn(prev); }, input);
-    };
-}
-//# sourceMappingURL=pipe.js.map
-
-
-/***/ }),
-/* 325 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = {
-	DiffieHellman: DiffieHellman,
-	generateECDSA: generateECDSA,
-	generateED25519: generateED25519
-};
-
-var assert = __webpack_require__(16);
-var crypto = __webpack_require__(11);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var nacl;
-
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-
-var CRYPTO_HAVE_ECDH = (crypto.createECDH !== undefined);
-
-var ecdh, ec, jsbn;
-
-function DiffieHellman(key) {
-	utils.assertCompatible(key, Key, [1, 4], 'key');
-	this._isPriv = PrivateKey.isPrivateKey(key, [1, 3]);
-	this._algo = key.type;
-	this._curve = key.curve;
-	this._key = key;
-	if (key.type === 'dsa') {
-		if (!CRYPTO_HAVE_ECDH) {
-			throw (new Error('Due to bugs in the node 0.10 ' +
-			    'crypto API, node 0.12.x or later is required ' +
-			    'to use DH'));
-		}
-		this._dh = crypto.createDiffieHellman(
-		    key.part.p.data, undefined,
-		    key.part.g.data, undefined);
-		this._p = key.part.p;
-		this._g = key.part.g;
-		if (this._isPriv)
-			this._dh.setPrivateKey(key.part.x.data);
-		this._dh.setPublicKey(key.part.y.data);
-
-	} else if (key.type === 'ecdsa') {
-		if (!CRYPTO_HAVE_ECDH) {
-			if (ecdh === undefined)
-				ecdh = __webpack_require__(387);
-			if (ec === undefined)
-				ec = __webpack_require__(139);
-			if (jsbn === undefined)
-				jsbn = __webpack_require__(81).BigInteger;
-
-			this._ecParams = new X9ECParameters(this._curve);
-
-			if (this._isPriv) {
-				this._priv = new ECPrivate(
-				    this._ecParams, key.part.d.data);
-			}
-			return;
-		}
-
-		var curve = {
-			'nistp256': 'prime256v1',
-			'nistp384': 'secp384r1',
-			'nistp521': 'secp521r1'
-		}[key.curve];
-		this._dh = crypto.createECDH(curve);
-		if (typeof (this._dh) !== 'object' ||
-		    typeof (this._dh.setPrivateKey) !== 'function') {
-			CRYPTO_HAVE_ECDH = false;
-			DiffieHellman.call(this, key);
-			return;
-		}
-		if (this._isPriv)
-			this._dh.setPrivateKey(key.part.d.data);
-		this._dh.setPublicKey(key.part.Q.data);
-
-	} else if (key.type === 'curve25519') {
-		if (nacl === undefined)
-			nacl = __webpack_require__(76);
-
-		if (this._isPriv) {
-			utils.assertCompatible(key, PrivateKey, [1, 5], 'key');
-			this._priv = key.part.k.data;
-		}
-
-	} else {
-		throw (new Error('DH not supported for ' + key.type + ' keys'));
-	}
-}
-
-DiffieHellman.prototype.getPublicKey = function () {
-	if (this._isPriv)
-		return (this._key.toPublic());
-	return (this._key);
-};
-
-DiffieHellman.prototype.getPrivateKey = function () {
-	if (this._isPriv)
-		return (this._key);
-	else
-		return (undefined);
-};
-DiffieHellman.prototype.getKey = DiffieHellman.prototype.getPrivateKey;
-
-DiffieHellman.prototype._keyCheck = function (pk, isPub) {
-	assert.object(pk, 'key');
-	if (!isPub)
-		utils.assertCompatible(pk, PrivateKey, [1, 3], 'key');
-	utils.assertCompatible(pk, Key, [1, 4], 'key');
-
-	if (pk.type !== this._algo) {
-		throw (new Error('A ' + pk.type + ' key cannot be used in ' +
-		    this._algo + ' Diffie-Hellman'));
-	}
-
-	if (pk.curve !== this._curve) {
-		throw (new Error('A key from the ' + pk.curve + ' curve ' +
-		    'cannot be used with a ' + this._curve +
-		    ' Diffie-Hellman'));
-	}
-
-	if (pk.type === 'dsa') {
-		assert.deepEqual(pk.part.p, this._p,
-		    'DSA key prime does not match');
-		assert.deepEqual(pk.part.g, this._g,
-		    'DSA key generator does not match');
-	}
-};
-
-DiffieHellman.prototype.setKey = function (pk) {
-	this._keyCheck(pk);
-
-	if (pk.type === 'dsa') {
-		this._dh.setPrivateKey(pk.part.x.data);
-		this._dh.setPublicKey(pk.part.y.data);
-
-	} else if (pk.type === 'ecdsa') {
-		if (CRYPTO_HAVE_ECDH) {
-			this._dh.setPrivateKey(pk.part.d.data);
-			this._dh.setPublicKey(pk.part.Q.data);
-		} else {
-			this._priv = new ECPrivate(
-			    this._ecParams, pk.part.d.data);
-		}
-
-	} else if (pk.type === 'curve25519') {
-		var k = pk.part.k;
-		if (!pk.part.k)
-			k = pk.part.r;
-		this._priv = k.data;
-		if (this._priv[0] === 0x00)
-			this._priv = this._priv.slice(1);
-		this._priv = this._priv.slice(0, 32);
-	}
-	this._key = pk;
-	this._isPriv = true;
-};
-DiffieHellman.prototype.setPrivateKey = DiffieHellman.prototype.setKey;
-
-DiffieHellman.prototype.computeSecret = function (otherpk) {
-	this._keyCheck(otherpk, true);
-	if (!this._isPriv)
-		throw (new Error('DH exchange has not been initialized with ' +
-		    'a private key yet'));
-
-	var pub;
-	if (this._algo === 'dsa') {
-		return (this._dh.computeSecret(
-		    otherpk.part.y.data));
-
-	} else if (this._algo === 'ecdsa') {
-		if (CRYPTO_HAVE_ECDH) {
-			return (this._dh.computeSecret(
-			    otherpk.part.Q.data));
-		} else {
-			pub = new ECPublic(
-			    this._ecParams, otherpk.part.Q.data);
-			return (this._priv.deriveSharedSecret(pub));
-		}
-
-	} else if (this._algo === 'curve25519') {
-		pub = otherpk.part.A.data;
-		while (pub[0] === 0x00 && pub.length > 32)
-			pub = pub.slice(1);
-		var priv = this._priv;
-		assert.strictEqual(pub.length, 32);
-		assert.strictEqual(priv.length, 32);
-
-		var secret = nacl.box.before(new Uint8Array(pub),
-		    new Uint8Array(priv));
-
-		return (Buffer.from(secret));
-	}
-
-	throw (new Error('Invalid algorithm: ' + this._algo));
-};
-
-DiffieHellman.prototype.generateKey = function () {
-	var parts = [];
-	var priv, pub;
-	if (this._algo === 'dsa') {
-		this._dh.generateKeys();
-
-		parts.push({name: 'p', data: this._p.data});
-		parts.push({name: 'q', data: this._key.part.q.data});
-		parts.push({name: 'g', data: this._g.data});
-		parts.push({name: 'y', data: this._dh.getPublicKey()});
-		parts.push({name: 'x', data: this._dh.getPrivateKey()});
-		this._key = new PrivateKey({
-			type: 'dsa',
-			parts: parts
-		});
-		this._isPriv = true;
-		return (this._key);
-
-	} else if (this._algo === 'ecdsa') {
-		if (CRYPTO_HAVE_ECDH) {
-			this._dh.generateKeys();
-
-			parts.push({name: 'curve',
-			    data: Buffer.from(this._curve)});
-			parts.push({name: 'Q', data: this._dh.getPublicKey()});
-			parts.push({name: 'd', data: this._dh.getPrivateKey()});
-			this._key = new PrivateKey({
-				type: 'ecdsa',
-				curve: this._curve,
-				parts: parts
-			});
-			this._isPriv = true;
-			return (this._key);
-
-		} else {
-			var n = this._ecParams.getN();
-			var r = new jsbn(crypto.randomBytes(n.bitLength()));
-			var n1 = n.subtract(jsbn.ONE);
-			priv = r.mod(n1).add(jsbn.ONE);
-			pub = this._ecParams.getG().multiply(priv);
-
-			priv = Buffer.from(priv.toByteArray());
-			pub = Buffer.from(this._ecParams.getCurve().
-			    encodePointHex(pub), 'hex');
-
-			this._priv = new ECPrivate(this._ecParams, priv);
-
-			parts.push({name: 'curve',
-			    data: Buffer.from(this._curve)});
-			parts.push({name: 'Q', data: pub});
-			parts.push({name: 'd', data: priv});
-
-			this._key = new PrivateKey({
-				type: 'ecdsa',
-				curve: this._curve,
-				parts: parts
-			});
-			this._isPriv = true;
-			return (this._key);
-		}
-
-	} else if (this._algo === 'curve25519') {
-		var pair = nacl.box.keyPair();
-		priv = Buffer.from(pair.secretKey);
-		pub = Buffer.from(pair.publicKey);
-		priv = Buffer.concat([priv, pub]);
-		assert.strictEqual(priv.length, 64);
-		assert.strictEqual(pub.length, 32);
-
-		parts.push({name: 'A', data: pub});
-		parts.push({name: 'k', data: priv});
-		this._key = new PrivateKey({
-			type: 'curve25519',
-			parts: parts
-		});
-		this._isPriv = true;
-		return (this._key);
-	}
-
-	throw (new Error('Invalid algorithm: ' + this._algo));
-};
-DiffieHellman.prototype.generateKeys = DiffieHellman.prototype.generateKey;
-
-/* These are helpers for using ecc-jsbn (for node 0.10 compatibility). */
-
-function X9ECParameters(name) {
-	var params = algs.curves[name];
-	assert.object(params);
-
-	var p = new jsbn(params.p);
-	var a = new jsbn(params.a);
-	var b = new jsbn(params.b);
-	var n = new jsbn(params.n);
-	var h = jsbn.ONE;
-	var curve = new ec.ECCurveFp(p, a, b);
-	var G = curve.decodePointHex(params.G.toString('hex'));
-
-	this.curve = curve;
-	this.g = G;
-	this.n = n;
-	this.h = h;
-}
-X9ECParameters.prototype.getCurve = function () { return (this.curve); };
-X9ECParameters.prototype.getG = function () { return (this.g); };
-X9ECParameters.prototype.getN = function () { return (this.n); };
-X9ECParameters.prototype.getH = function () { return (this.h); };
-
-function ECPublic(params, buffer) {
-	this._params = params;
-	if (buffer[0] === 0x00)
-		buffer = buffer.slice(1);
-	this._pub = params.getCurve().decodePointHex(buffer.toString('hex'));
-}
-
-function ECPrivate(params, buffer) {
-	this._params = params;
-	this._priv = new jsbn(utils.mpNormalize(buffer));
-}
-ECPrivate.prototype.deriveSharedSecret = function (pubKey) {
-	assert.ok(pubKey instanceof ECPublic);
-	var S = pubKey._pub.multiply(this._priv);
-	return (Buffer.from(S.getX().toBigInteger().toByteArray()));
-};
-
-function generateED25519() {
-	if (nacl === undefined)
-		nacl = __webpack_require__(76);
-
-	var pair = nacl.sign.keyPair();
-	var priv = Buffer.from(pair.secretKey);
-	var pub = Buffer.from(pair.publicKey);
-	assert.strictEqual(priv.length, 64);
-	assert.strictEqual(pub.length, 32);
-
-	var parts = [];
-	parts.push({name: 'A', data: pub});
-	parts.push({name: 'k', data: priv.slice(0, 32)});
-	var key = new PrivateKey({
-		type: 'ed25519',
-		parts: parts
-	});
-	return (key);
-}
-
-/* Generates a new ECDSA private key on a given curve. */
-function generateECDSA(curve) {
-	var parts = [];
-	var key;
-
-	if (CRYPTO_HAVE_ECDH) {
-		/*
-		 * Node crypto doesn't expose key generation directly, but the
-		 * ECDH instances can generate keys. It turns out this just
-		 * calls into the OpenSSL generic key generator, and we can
-		 * read its output happily without doing an actual DH. So we
-		 * use that here.
-		 */
-		var osCurve = {
-			'nistp256': 'prime256v1',
-			'nistp384': 'secp384r1',
-			'nistp521': 'secp521r1'
-		}[curve];
-
-		var dh = crypto.createECDH(osCurve);
-		dh.generateKeys();
-
-		parts.push({name: 'curve',
-		    data: Buffer.from(curve)});
-		parts.push({name: 'Q', data: dh.getPublicKey()});
-		parts.push({name: 'd', data: dh.getPrivateKey()});
-
-		key = new PrivateKey({
-			type: 'ecdsa',
-			curve: curve,
-			parts: parts
-		});
-		return (key);
-	} else {
-		if (ecdh === undefined)
-			ecdh = __webpack_require__(387);
-		if (ec === undefined)
-			ec = __webpack_require__(139);
-		if (jsbn === undefined)
-			jsbn = __webpack_require__(81).BigInteger;
-
-		var ecParams = new X9ECParameters(curve);
-
-		/* This algorithm taken from FIPS PUB 186-4 (section B.4.1) */
-		var n = ecParams.getN();
-		/*
-		 * The crypto.randomBytes() function can only give us whole
-		 * bytes, so taking a nod from X9.62, we round up.
-		 */
-		var cByteLen = Math.ceil((n.bitLength() + 64) / 8);
-		var c = new jsbn(crypto.randomBytes(cByteLen));
-
-		var n1 = n.subtract(jsbn.ONE);
-		var priv = c.mod(n1).add(jsbn.ONE);
-		var pub = ecParams.getG().multiply(priv);
-
-		priv = Buffer.from(priv.toByteArray());
-		pub = Buffer.from(ecParams.getCurve().
-		    encodePointHex(pub), 'hex');
-
-		parts.push({name: 'curve', data: Buffer.from(curve)});
-		parts.push({name: 'Q', data: pub});
-		parts.push({name: 'd', data: priv});
-
-		key = new PrivateKey({
-			type: 'ecdsa',
-			curve: curve,
-			parts: parts
-		});
-		return (key);
-	}
-}
-
-
-/***/ }),
-/* 326 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var utils = __webpack_require__(26);
-var SSHBuffer = __webpack_require__(159);
-var Dhe = __webpack_require__(325);
-
-var supportedAlgos = {
-	'rsa-sha1' : 5,
-	'rsa-sha256' : 8,
-	'rsa-sha512' : 10,
-	'ecdsa-p256-sha256' : 13,
-	'ecdsa-p384-sha384' : 14
-	/*
-	 * ed25519 is hypothetically supported with id 15
-	 * but the common tools available don't appear to be
-	 * capable of generating/using ed25519 keys
-	 */
-};
-
-var supportedAlgosById = {};
-Object.keys(supportedAlgos).forEach(function (k) {
-	supportedAlgosById[supportedAlgos[k]] = k.toUpperCase();
-});
-
-function read(buf, options) {
-	if (typeof (buf) !== 'string') {
-		assert.buffer(buf, 'buf');
-		buf = buf.toString('ascii');
-	}
-	var lines = buf.split('\n');
-	if (lines[0].match(/^Private-key-format\: v1/)) {
-		var algElems = lines[1].split(' ');
-		var algoNum = parseInt(algElems[1], 10);
-		var algoName = algElems[2];
-		if (!supportedAlgosById[algoNum])
-			throw (new Error('Unsupported algorithm: ' + algoName));
-		return (readDNSSECPrivateKey(algoNum, lines.slice(2)));
-	}
-
-	// skip any comment-lines
-	var line = 0;
-	/* JSSTYLED */
-	while (lines[line].match(/^\;/))
-		line++;
-	// we should now have *one single* line left with our KEY on it.
-	if ((lines[line].match(/\. IN KEY /) ||
-	    lines[line].match(/\. IN DNSKEY /)) && lines[line+1].length === 0) {
-		return (readRFC3110(lines[line]));
-	}
-	throw (new Error('Cannot parse dnssec key'));
-}
-
-function readRFC3110(keyString) {
-	var elems = keyString.split(' ');
-	//unused var flags = parseInt(elems[3], 10);
-	//unused var protocol = parseInt(elems[4], 10);
-	var algorithm = parseInt(elems[5], 10);
-	if (!supportedAlgosById[algorithm])
-		throw (new Error('Unsupported algorithm: ' + algorithm));
-	var base64key = elems.slice(6, elems.length).join();
-	var keyBuffer = Buffer.from(base64key, 'base64');
-	if (supportedAlgosById[algorithm].match(/^RSA-/)) {
-		// join the rest of the body into a single base64-blob
-		var publicExponentLen = keyBuffer.readUInt8(0);
-		if (publicExponentLen != 3 && publicExponentLen != 1)
-			throw (new Error('Cannot parse dnssec key: ' +
-			    'unsupported exponent length'));
-
-		var publicExponent = keyBuffer.slice(1, publicExponentLen+1);
-		publicExponent = utils.mpNormalize(publicExponent);
-		var modulus = keyBuffer.slice(1+publicExponentLen);
-		modulus = utils.mpNormalize(modulus);
-		// now, make the key
-		var rsaKey = {
-			type: 'rsa',
-			parts: []
-		};
-		rsaKey.parts.push({ name: 'e', data: publicExponent});
-		rsaKey.parts.push({ name: 'n', data: modulus});
-		return (new Key(rsaKey));
-	}
-	if (supportedAlgosById[algorithm] === 'ECDSA-P384-SHA384' ||
-	    supportedAlgosById[algorithm] === 'ECDSA-P256-SHA256') {
-		var curve = 'nistp384';
-		var size = 384;
-		if (supportedAlgosById[algorithm].match(/^ECDSA-P256-SHA256/)) {
-			curve = 'nistp256';
-			size = 256;
-		}
-
-		var ecdsaKey = {
-			type: 'ecdsa',
-			curve: curve,
-			size: size,
-			parts: [
-				{name: 'curve', data: Buffer.from(curve) },
-				{name: 'Q', data: utils.ecNormalize(keyBuffer) }
-			]
-		};
-		return (new Key(ecdsaKey));
-	}
-	throw (new Error('Unsupported algorithm: ' +
-	    supportedAlgosById[algorithm]));
-}
-
-function elementToBuf(e) {
-	return (Buffer.from(e.split(' ')[1], 'base64'));
-}
-
-function readDNSSECRSAPrivateKey(elements) {
-	var rsaParams = {};
-	elements.forEach(function (element) {
-		if (element.split(' ')[0] === 'Modulus:')
-			rsaParams['n'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'PublicExponent:')
-			rsaParams['e'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'PrivateExponent:')
-			rsaParams['d'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'Prime1:')
-			rsaParams['p'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'Prime2:')
-			rsaParams['q'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'Exponent1:')
-			rsaParams['dmodp'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'Exponent2:')
-			rsaParams['dmodq'] = elementToBuf(element);
-		else if (element.split(' ')[0] === 'Coefficient:')
-			rsaParams['iqmp'] = elementToBuf(element);
-	});
-	// now, make the key
-	var key = {
-		type: 'rsa',
-		parts: [
-			{ name: 'e', data: utils.mpNormalize(rsaParams['e'])},
-			{ name: 'n', data: utils.mpNormalize(rsaParams['n'])},
-			{ name: 'd', data: utils.mpNormalize(rsaParams['d'])},
-			{ name: 'p', data: utils.mpNormalize(rsaParams['p'])},
-			{ name: 'q', data: utils.mpNormalize(rsaParams['q'])},
-			{ name: 'dmodp',
-			    data: utils.mpNormalize(rsaParams['dmodp'])},
-			{ name: 'dmodq',
-			    data: utils.mpNormalize(rsaParams['dmodq'])},
-			{ name: 'iqmp',
-			    data: utils.mpNormalize(rsaParams['iqmp'])}
-		]
-	};
-	return (new PrivateKey(key));
-}
-
-function readDNSSECPrivateKey(alg, elements) {
-	if (supportedAlgosById[alg].match(/^RSA-/)) {
-		return (readDNSSECRSAPrivateKey(elements));
-	}
-	if (supportedAlgosById[alg] === 'ECDSA-P384-SHA384' ||
-	    supportedAlgosById[alg] === 'ECDSA-P256-SHA256') {
-		var d = Buffer.from(elements[0].split(' ')[1], 'base64');
-		var curve = 'nistp384';
-		var size = 384;
-		if (supportedAlgosById[alg] === 'ECDSA-P256-SHA256') {
-			curve = 'nistp256';
-			size = 256;
-		}
-		// DNSSEC generates the public-key on the fly (go calculate it)
-		var publicKey = utils.publicFromPrivateECDSA(curve, d);
-		var Q = publicKey.part['Q'].data;
-		var ecdsaKey = {
-			type: 'ecdsa',
-			curve: curve,
-			size: size,
-			parts: [
-				{name: 'curve', data: Buffer.from(curve) },
-				{name: 'd', data: d },
-				{name: 'Q', data: Q }
-			]
-		};
-		return (new PrivateKey(ecdsaKey));
-	}
-	throw (new Error('Unsupported algorithm: ' + supportedAlgosById[alg]));
-}
-
-function dnssecTimestamp(date) {
-	var year = date.getFullYear() + ''; //stringify
-	var month = (date.getMonth() + 1);
-	var timestampStr = year + month + date.getUTCDate();
-	timestampStr += '' + date.getUTCHours() + date.getUTCMinutes();
-	timestampStr += date.getUTCSeconds();
-	return (timestampStr);
-}
-
-function rsaAlgFromOptions(opts) {
-	if (!opts || !opts.hashAlgo || opts.hashAlgo === 'sha1')
-		return ('5 (RSASHA1)');
-	else if (opts.hashAlgo === 'sha256')
-		return ('8 (RSASHA256)');
-	else if (opts.hashAlgo === 'sha512')
-		return ('10 (RSASHA512)');
-	else
-		throw (new Error('Unknown or unsupported hash: ' +
-		    opts.hashAlgo));
-}
-
-function writeRSA(key, options) {
-	// if we're missing parts, add them.
-	if (!key.part.dmodp || !key.part.dmodq) {
-		utils.addRSAMissing(key);
-	}
-
-	var out = '';
-	out += 'Private-key-format: v1.3\n';
-	out += 'Algorithm: ' + rsaAlgFromOptions(options) + '\n';
-	var n = utils.mpDenormalize(key.part['n'].data);
-	out += 'Modulus: ' + n.toString('base64') + '\n';
-	var e = utils.mpDenormalize(key.part['e'].data);
-	out += 'PublicExponent: ' + e.toString('base64') + '\n';
-	var d = utils.mpDenormalize(key.part['d'].data);
-	out += 'PrivateExponent: ' + d.toString('base64') + '\n';
-	var p = utils.mpDenormalize(key.part['p'].data);
-	out += 'Prime1: ' + p.toString('base64') + '\n';
-	var q = utils.mpDenormalize(key.part['q'].data);
-	out += 'Prime2: ' + q.toString('base64') + '\n';
-	var dmodp = utils.mpDenormalize(key.part['dmodp'].data);
-	out += 'Exponent1: ' + dmodp.toString('base64') + '\n';
-	var dmodq = utils.mpDenormalize(key.part['dmodq'].data);
-	out += 'Exponent2: ' + dmodq.toString('base64') + '\n';
-	var iqmp = utils.mpDenormalize(key.part['iqmp'].data);
-	out += 'Coefficient: ' + iqmp.toString('base64') + '\n';
-	// Assume that we're valid as-of now
-	var timestamp = new Date();
-	out += 'Created: ' + dnssecTimestamp(timestamp) + '\n';
-	out += 'Publish: ' + dnssecTimestamp(timestamp) + '\n';
-	out += 'Activate: ' + dnssecTimestamp(timestamp) + '\n';
-	return (Buffer.from(out, 'ascii'));
-}
-
-function writeECDSA(key, options) {
-	var out = '';
-	out += 'Private-key-format: v1.3\n';
-
-	if (key.curve === 'nistp256') {
-		out += 'Algorithm: 13 (ECDSAP256SHA256)\n';
-	} else if (key.curve === 'nistp384') {
-		out += 'Algorithm: 14 (ECDSAP384SHA384)\n';
-	} else {
-		throw (new Error('Unsupported curve'));
-	}
-	var base64Key = key.part['d'].data.toString('base64');
-	out += 'PrivateKey: ' + base64Key + '\n';
-
-	// Assume that we're valid as-of now
-	var timestamp = new Date();
-	out += 'Created: ' + dnssecTimestamp(timestamp) + '\n';
-	out += 'Publish: ' + dnssecTimestamp(timestamp) + '\n';
-	out += 'Activate: ' + dnssecTimestamp(timestamp) + '\n';
-
-	return (Buffer.from(out, 'ascii'));
-}
-
-function write(key, options) {
-	if (PrivateKey.isPrivateKey(key)) {
-		if (key.type === 'rsa') {
-			return (writeRSA(key, options));
-		} else if (key.type === 'ecdsa') {
-			return (writeECDSA(key, options));
-		} else {
-			throw (new Error('Unsupported algorithm: ' + key.type));
-		}
-	} else if (Key.isKey(key)) {
-		/*
-		 * RFC3110 requires a keyname, and a keytype, which we
-		 * don't really have a mechanism for specifying such
-		 * additional metadata.
-		 */
-		throw (new Error('Format "dnssec" only supports ' +
-		    'writing private keys'));
-	} else {
-		throw (new Error('key is not a Key or PrivateKey'));
-	}
-}
-
-
-/***/ }),
-/* 327 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	readPkcs1: readPkcs1,
-	write: write,
-	writePkcs1: writePkcs1
-};
-
-var assert = __webpack_require__(16);
-var asn1 = __webpack_require__(66);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var pem = __webpack_require__(86);
-
-var pkcs8 = __webpack_require__(157);
-var readECDSACurve = pkcs8.readECDSACurve;
-
-function read(buf, options) {
-	return (pem.read(buf, options, 'pkcs1'));
-}
-
-function write(key, options) {
-	return (pem.write(key, options, 'pkcs1'));
-}
-
-/* Helper to read in a single mpint */
-function readMPInt(der, nm) {
-	assert.strictEqual(der.peek(), asn1.Ber.Integer,
-	    nm + ' is not an Integer');
-	return (utils.mpNormalize(der.readString(asn1.Ber.Integer, true)));
-}
-
-function readPkcs1(alg, type, der) {
-	switch (alg) {
-	case 'RSA':
-		if (type === 'public')
-			return (readPkcs1RSAPublic(der));
-		else if (type === 'private')
-			return (readPkcs1RSAPrivate(der));
-		throw (new Error('Unknown key type: ' + type));
-	case 'DSA':
-		if (type === 'public')
-			return (readPkcs1DSAPublic(der));
-		else if (type === 'private')
-			return (readPkcs1DSAPrivate(der));
-		throw (new Error('Unknown key type: ' + type));
-	case 'EC':
-	case 'ECDSA':
-		if (type === 'private')
-			return (readPkcs1ECDSAPrivate(der));
-		else if (type === 'public')
-			return (readPkcs1ECDSAPublic(der));
-		throw (new Error('Unknown key type: ' + type));
-	case 'EDDSA':
-	case 'EdDSA':
-		if (type === 'private')
-			return (readPkcs1EdDSAPrivate(der));
-		throw (new Error(type + ' keys not supported with EdDSA'));
-	default:
-		throw (new Error('Unknown key algo: ' + alg));
-	}
-}
-
-function readPkcs1RSAPublic(der) {
-	// modulus and exponent
-	var n = readMPInt(der, 'modulus');
-	var e = readMPInt(der, 'exponent');
-
-	// now, make the key
-	var key = {
-		type: 'rsa',
-		parts: [
-			{ name: 'e', data: e },
-			{ name: 'n', data: n }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs1RSAPrivate(der) {
-	var version = readMPInt(der, 'version');
-	assert.strictEqual(version[0], 0);
-
-	// modulus then public exponent
-	var n = readMPInt(der, 'modulus');
-	var e = readMPInt(der, 'public exponent');
-	var d = readMPInt(der, 'private exponent');
-	var p = readMPInt(der, 'prime1');
-	var q = readMPInt(der, 'prime2');
-	var dmodp = readMPInt(der, 'exponent1');
-	var dmodq = readMPInt(der, 'exponent2');
-	var iqmp = readMPInt(der, 'iqmp');
-
-	// now, make the key
-	var key = {
-		type: 'rsa',
-		parts: [
-			{ name: 'n', data: n },
-			{ name: 'e', data: e },
-			{ name: 'd', data: d },
-			{ name: 'iqmp', data: iqmp },
-			{ name: 'p', data: p },
-			{ name: 'q', data: q },
-			{ name: 'dmodp', data: dmodp },
-			{ name: 'dmodq', data: dmodq }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readPkcs1DSAPrivate(der) {
-	var version = readMPInt(der, 'version');
-	assert.strictEqual(version.readUInt8(0), 0);
-
-	var p = readMPInt(der, 'p');
-	var q = readMPInt(der, 'q');
-	var g = readMPInt(der, 'g');
-	var y = readMPInt(der, 'y');
-	var x = readMPInt(der, 'x');
-
-	// now, make the key
-	var key = {
-		type: 'dsa',
-		parts: [
-			{ name: 'p', data: p },
-			{ name: 'q', data: q },
-			{ name: 'g', data: g },
-			{ name: 'y', data: y },
-			{ name: 'x', data: x }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readPkcs1EdDSAPrivate(der) {
-	var version = readMPInt(der, 'version');
-	assert.strictEqual(version.readUInt8(0), 1);
-
-	// private key
-	var k = der.readString(asn1.Ber.OctetString, true);
-
-	der.readSequence(0xa0);
-	var oid = der.readOID();
-	assert.strictEqual(oid, '1.3.101.112', 'the ed25519 curve identifier');
-
-	der.readSequence(0xa1);
-	var A = utils.readBitString(der);
-
-	var key = {
-		type: 'ed25519',
-		parts: [
-			{ name: 'A', data: utils.zeroPadToLength(A, 32) },
-			{ name: 'k', data: k }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function readPkcs1DSAPublic(der) {
-	var y = readMPInt(der, 'y');
-	var p = readMPInt(der, 'p');
-	var q = readMPInt(der, 'q');
-	var g = readMPInt(der, 'g');
-
-	var key = {
-		type: 'dsa',
-		parts: [
-			{ name: 'y', data: y },
-			{ name: 'p', data: p },
-			{ name: 'q', data: q },
-			{ name: 'g', data: g }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs1ECDSAPublic(der) {
-	der.readSequence();
-
-	var oid = der.readOID();
-	assert.strictEqual(oid, '1.2.840.10045.2.1', 'must be ecPublicKey');
-
-	var curveOid = der.readOID();
-
-	var curve;
-	var curves = Object.keys(algs.curves);
-	for (var j = 0; j < curves.length; ++j) {
-		var c = curves[j];
-		var cd = algs.curves[c];
-		if (cd.pkcs8oid === curveOid) {
-			curve = c;
-			break;
-		}
-	}
-	assert.string(curve, 'a known ECDSA named curve');
-
-	var Q = der.readString(asn1.Ber.BitString, true);
-	Q = utils.ecNormalize(Q);
-
-	var key = {
-		type: 'ecdsa',
-		parts: [
-			{ name: 'curve', data: Buffer.from(curve) },
-			{ name: 'Q', data: Q }
-		]
-	};
-
-	return (new Key(key));
-}
-
-function readPkcs1ECDSAPrivate(der) {
-	var version = readMPInt(der, 'version');
-	assert.strictEqual(version.readUInt8(0), 1);
-
-	// private key
-	var d = der.readString(asn1.Ber.OctetString, true);
-
-	der.readSequence(0xa0);
-	var curve = readECDSACurve(der);
-	assert.string(curve, 'a known elliptic curve');
-
-	der.readSequence(0xa1);
-	var Q = der.readString(asn1.Ber.BitString, true);
-	Q = utils.ecNormalize(Q);
-
-	var key = {
-		type: 'ecdsa',
-		parts: [
-			{ name: 'curve', data: Buffer.from(curve) },
-			{ name: 'Q', data: Q },
-			{ name: 'd', data: d }
-		]
-	};
-
-	return (new PrivateKey(key));
-}
-
-function writePkcs1(der, key) {
-	der.startSequence();
-
-	switch (key.type) {
-	case 'rsa':
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs1RSAPrivate(der, key);
-		else
-			writePkcs1RSAPublic(der, key);
-		break;
-	case 'dsa':
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs1DSAPrivate(der, key);
-		else
-			writePkcs1DSAPublic(der, key);
-		break;
-	case 'ecdsa':
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs1ECDSAPrivate(der, key);
-		else
-			writePkcs1ECDSAPublic(der, key);
-		break;
-	case 'ed25519':
-		if (PrivateKey.isPrivateKey(key))
-			writePkcs1EdDSAPrivate(der, key);
-		else
-			writePkcs1EdDSAPublic(der, key);
-		break;
-	default:
-		throw (new Error('Unknown key algo: ' + key.type));
-	}
-
-	der.endSequence();
-}
-
-function writePkcs1RSAPublic(der, key) {
-	der.writeBuffer(key.part.n.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.e.data, asn1.Ber.Integer);
-}
-
-function writePkcs1RSAPrivate(der, key) {
-	var ver = Buffer.from([0]);
-	der.writeBuffer(ver, asn1.Ber.Integer);
-
-	der.writeBuffer(key.part.n.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.e.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.d.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.p.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.q.data, asn1.Ber.Integer);
-	if (!key.part.dmodp || !key.part.dmodq)
-		utils.addRSAMissing(key);
-	der.writeBuffer(key.part.dmodp.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.dmodq.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.iqmp.data, asn1.Ber.Integer);
-}
-
-function writePkcs1DSAPrivate(der, key) {
-	var ver = Buffer.from([0]);
-	der.writeBuffer(ver, asn1.Ber.Integer);
-
-	der.writeBuffer(key.part.p.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.q.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.g.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.y.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.x.data, asn1.Ber.Integer);
-}
-
-function writePkcs1DSAPublic(der, key) {
-	der.writeBuffer(key.part.y.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.p.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.q.data, asn1.Ber.Integer);
-	der.writeBuffer(key.part.g.data, asn1.Ber.Integer);
-}
-
-function writePkcs1ECDSAPublic(der, key) {
-	der.startSequence();
-
-	der.writeOID('1.2.840.10045.2.1'); /* ecPublicKey */
-	var curve = key.part.curve.data.toString();
-	var curveOid = algs.curves[curve].pkcs8oid;
-	assert.string(curveOid, 'a known ECDSA named curve');
-	der.writeOID(curveOid);
-
-	der.endSequence();
-
-	var Q = utils.ecNormalize(key.part.Q.data, true);
-	der.writeBuffer(Q, asn1.Ber.BitString);
-}
-
-function writePkcs1ECDSAPrivate(der, key) {
-	var ver = Buffer.from([1]);
-	der.writeBuffer(ver, asn1.Ber.Integer);
-
-	der.writeBuffer(key.part.d.data, asn1.Ber.OctetString);
-
-	der.startSequence(0xa0);
-	var curve = key.part.curve.data.toString();
-	var curveOid = algs.curves[curve].pkcs8oid;
-	assert.string(curveOid, 'a known ECDSA named curve');
-	der.writeOID(curveOid);
-	der.endSequence();
-
-	der.startSequence(0xa1);
-	var Q = utils.ecNormalize(key.part.Q.data, true);
-	der.writeBuffer(Q, asn1.Ber.BitString);
-	der.endSequence();
-}
-
-function writePkcs1EdDSAPrivate(der, key) {
-	var ver = Buffer.from([1]);
-	der.writeBuffer(ver, asn1.Ber.Integer);
-
-	der.writeBuffer(key.part.k.data, asn1.Ber.OctetString);
-
-	der.startSequence(0xa0);
-	der.writeOID('1.3.101.112');
-	der.endSequence();
-
-	der.startSequence(0xa1);
-	utils.writeBitString(der, key.part.A.data);
-	der.endSequence();
-}
-
-function writePkcs1EdDSAPublic(der, key) {
-	throw (new Error('Public keys are not supported for EdDSA PKCS#1'));
-}
-
-
-/***/ }),
-/* 328 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-var Key = __webpack_require__(27);
-var Fingerprint = __webpack_require__(156);
-var Signature = __webpack_require__(75);
-var PrivateKey = __webpack_require__(33);
-var Certificate = __webpack_require__(155);
-var Identity = __webpack_require__(158);
-var errs = __webpack_require__(74);
-
-module.exports = {
-	/* top-level classes */
-	Key: Key,
-	parseKey: Key.parse,
-	Fingerprint: Fingerprint,
-	parseFingerprint: Fingerprint.parse,
-	Signature: Signature,
-	parseSignature: Signature.parse,
-	PrivateKey: PrivateKey,
-	parsePrivateKey: PrivateKey.parse,
-	generatePrivateKey: PrivateKey.generate,
-	Certificate: Certificate,
-	parseCertificate: Certificate.parse,
-	createSelfSignedCertificate: Certificate.createSelfSigned,
-	createCertificate: Certificate.create,
-	Identity: Identity,
-	identityFromDN: Identity.parseDN,
-	identityForHost: Identity.forHost,
-	identityForUser: Identity.forUser,
-	identityForEmail: Identity.forEmail,
-
-	/* errors */
-	FingerprintFormatError: errs.FingerprintFormatError,
-	InvalidAlgorithmError: errs.InvalidAlgorithmError,
-	KeyParseError: errs.KeyParseError,
-	SignatureParseError: errs.SignatureParseError,
-	KeyEncryptedError: errs.KeyEncryptedError,
-	CertificateParseError: errs.CertificateParseError
-};
-
-
-/***/ }),
-/* 329 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const ansiRegex = __webpack_require__(948);
-
-module.exports = input => typeof input === 'string' ? input.replace(ansiRegex(), '') : input;
-
-
-/***/ }),
-/* 330 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var hasFlag = __webpack_require__(273);
-
-var support = function (level) {
-	if (level === 0) {
-		return false;
-	}
-
-	return {
-		level: level,
-		hasBasic: true,
-		has256: level >= 2,
-		has16m: level >= 3
-	};
-};
-
-var supportLevel = (function () {
-	if (hasFlag('no-color') ||
-		hasFlag('no-colors') ||
-		hasFlag('color=false')) {
-		return 0;
-	}
-
-	if (hasFlag('color=16m') ||
-		hasFlag('color=full') ||
-		hasFlag('color=truecolor')) {
-		return 3;
-	}
-
-	if (hasFlag('color=256')) {
-		return 2;
-	}
-
-	if (hasFlag('color') ||
-		hasFlag('colors') ||
-		hasFlag('color=true') ||
-		hasFlag('color=always')) {
-		return 1;
-	}
-
-	if (process.stdout && !process.stdout.isTTY) {
-		return 0;
-	}
-
-	if (process.platform === 'win32') {
-		return 1;
-	}
-
-	if ('CI' in process.env) {
-		if ('TRAVIS' in process.env || process.env.CI === 'Travis') {
-			return 1;
-		}
-
-		return 0;
-	}
-
-	if ('TEAMCITY_VERSION' in process.env) {
-		return process.env.TEAMCITY_VERSION.match(/^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/) === null ? 0 : 1;
-	}
-
-	if (/^(screen|xterm)-256(?:color)?/.test(process.env.TERM)) {
-		return 2;
-	}
-
-	if (/^screen|^xterm|^vt100|color|ansi|cygwin|linux/i.test(process.env.TERM)) {
-		return 1;
-	}
-
-	if ('COLORTERM' in process.env) {
-		return 1;
-	}
-
-	if (process.env.TERM === 'dumb') {
-		return 0;
-	}
-
-	return 0;
-})();
-
-if (supportLevel === 0 && 'FORCE_COLOR' in process.env) {
-	supportLevel = 1;
-}
-
-module.exports = process && support(supportLevel);
-
-
-/***/ }),
-/* 331 */
-/***/ (function(module, exports) {
-
-module.exports = require("child_process");
-
-/***/ }),
-/* 332 */
-/***/ (function(module, exports) {
-
-module.exports = require("punycode");
-
-/***/ }),
-/* 333 */
-/***/ (function(module, exports) {
-
-module.exports = require("string_decoder");
-
-/***/ }),
-/* 334 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _access;
-
-function _load_access() {
-  return _access = _interopRequireWildcard(__webpack_require__(525));
-}
-
-var _add;
-
-function _load_add() {
-  return _add = _interopRequireWildcard(__webpack_require__(165));
-}
-
-var _audit;
-
-function _load_audit() {
-  return _audit = _interopRequireWildcard(__webpack_require__(353));
-}
-
-var _autoclean;
-
-function _load_autoclean() {
-  return _autoclean = _interopRequireWildcard(__webpack_require__(354));
-}
-
-var _bin;
-
-function _load_bin() {
-  return _bin = _interopRequireWildcard(__webpack_require__(526));
-}
-
-var _cache;
-
-function _load_cache() {
-  return _cache = _interopRequireWildcard(__webpack_require__(355));
-}
-
-var _check;
-
-function _load_check() {
-  return _check = _interopRequireWildcard(__webpack_require__(356));
-}
-
-var _config;
-
-function _load_config() {
-  return _config = _interopRequireWildcard(__webpack_require__(527));
-}
-
-var _create;
-
-function _load_create() {
-  return _create = _interopRequireWildcard(__webpack_require__(528));
-}
-
-var _exec;
-
-function _load_exec() {
-  return _exec = _interopRequireWildcard(__webpack_require__(529));
-}
-
-var _generateLockEntry;
-
-function _load_generateLockEntry() {
-  return _generateLockEntry = _interopRequireWildcard(__webpack_require__(530));
-}
-
-var _global;
-
-function _load_global() {
-  return _global = _interopRequireWildcard(__webpack_require__(121));
-}
-
-var _help;
-
-function _load_help() {
-  return _help = _interopRequireWildcard(__webpack_require__(531));
-}
-
-var _import;
-
-function _load_import() {
-  return _import = _interopRequireWildcard(__webpack_require__(532));
-}
-
-var _info;
-
-function _load_info() {
-  return _info = _interopRequireWildcard(__webpack_require__(533));
-}
-
-var _init;
-
-function _load_init() {
-  return _init = _interopRequireWildcard(__webpack_require__(534));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = _interopRequireWildcard(__webpack_require__(34));
-}
-
-var _licenses;
-
-function _load_licenses() {
-  return _licenses = _interopRequireWildcard(__webpack_require__(535));
-}
-
-var _link;
-
-function _load_link() {
-  return _link = _interopRequireWildcard(__webpack_require__(357));
-}
-
-var _login;
-
-function _load_login() {
-  return _login = _interopRequireWildcard(__webpack_require__(107));
-}
-
-var _logout;
-
-function _load_logout() {
-  return _logout = _interopRequireWildcard(__webpack_require__(536));
-}
-
-var _list;
-
-function _load_list() {
-  return _list = _interopRequireWildcard(__webpack_require__(358));
-}
-
-var _node;
-
-function _load_node() {
-  return _node = _interopRequireWildcard(__webpack_require__(537));
-}
-
-var _outdated;
-
-function _load_outdated() {
-  return _outdated = _interopRequireWildcard(__webpack_require__(538));
-}
-
-var _owner;
-
-function _load_owner() {
-  return _owner = _interopRequireWildcard(__webpack_require__(539));
-}
-
-var _pack;
-
-function _load_pack() {
-  return _pack = _interopRequireWildcard(__webpack_require__(166));
-}
-
-var _policies;
-
-function _load_policies() {
-  return _policies = _interopRequireWildcard(__webpack_require__(540));
-}
-
-var _publish;
-
-function _load_publish() {
-  return _publish = _interopRequireWildcard(__webpack_require__(541));
-}
-
-var _remove;
-
-function _load_remove() {
-  return _remove = _interopRequireWildcard(__webpack_require__(359));
-}
-
-var _run;
-
-function _load_run() {
-  return _run = _interopRequireWildcard(__webpack_require__(360));
-}
-
-var _tag;
-
-function _load_tag() {
-  return _tag = _interopRequireWildcard(__webpack_require__(361));
-}
-
-var _team;
-
-function _load_team() {
-  return _team = _interopRequireWildcard(__webpack_require__(542));
-}
-
-var _unplug;
-
-function _load_unplug() {
-  return _unplug = _interopRequireWildcard(__webpack_require__(544));
-}
-
-var _unlink;
-
-function _load_unlink() {
-  return _unlink = _interopRequireWildcard(__webpack_require__(543));
-}
-
-var _upgrade;
-
-function _load_upgrade() {
-  return _upgrade = _interopRequireWildcard(__webpack_require__(207));
-}
-
-var _version;
-
-function _load_version() {
-  return _version = _interopRequireWildcard(__webpack_require__(363));
-}
-
-var _versions;
-
-function _load_versions() {
-  return _versions = _interopRequireWildcard(__webpack_require__(545));
-}
-
-var _why;
-
-function _load_why() {
-  return _why = _interopRequireWildcard(__webpack_require__(546));
-}
-
-var _workspaces;
-
-function _load_workspaces() {
-  return _workspaces = _interopRequireWildcard(__webpack_require__(548));
-}
-
-var _workspace;
-
-function _load_workspace() {
-  return _workspace = _interopRequireWildcard(__webpack_require__(547));
-}
-
-var _upgradeInteractive;
-
-function _load_upgradeInteractive() {
-  return _upgradeInteractive = _interopRequireWildcard(__webpack_require__(362));
-}
-
-var _useless;
-
-function _load_useless() {
-  return _useless = _interopRequireDefault(__webpack_require__(524));
-}
-
-var _aliases;
-
-function _load_aliases() {
-  return _aliases = _interopRequireDefault(__webpack_require__(352));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-const chalk = __webpack_require__(30);
-
-
-const getDocsLink = name => `${(_constants || _load_constants()).YARN_DOCS}${name || ''}`;
-const getDocsInfo = name => 'Visit ' + chalk.bold(getDocsLink(name)) + ' for documentation about this command.';
-
-const commands = {
-  access: _access || _load_access(),
-  add: _add || _load_add(),
-  audit: _audit || _load_audit(),
-  autoclean: _autoclean || _load_autoclean(),
-  bin: _bin || _load_bin(),
-  cache: _cache || _load_cache(),
-  check: _check || _load_check(),
-  config: _config || _load_config(),
-  create: _create || _load_create(),
-  dedupe: (0, (_useless || _load_useless()).default)("The dedupe command isn't necessary. `yarn install` will already dedupe."),
-  exec: _exec || _load_exec(),
-  generateLockEntry: _generateLockEntry || _load_generateLockEntry(),
-  global: _global || _load_global(),
-  help: _help || _load_help(),
-  import: _import || _load_import(),
-  info: _info || _load_info(),
-  init: _init || _load_init(),
-  install: _install || _load_install(),
-  licenses: _licenses || _load_licenses(),
-  link: _link || _load_link(),
-  lockfile: (0, (_useless || _load_useless()).default)("The lockfile command isn't necessary. `yarn install` will produce a lockfile."),
-  login: _login || _load_login(),
-  logout: _logout || _load_logout(),
-  list: _list || _load_list(),
-  node: _node || _load_node(),
-  outdated: _outdated || _load_outdated(),
-  owner: _owner || _load_owner(),
-  pack: _pack || _load_pack(),
-  policies: _policies || _load_policies(),
-  prune: (0, (_useless || _load_useless()).default)("The prune command isn't necessary. `yarn install` will prune extraneous packages."),
-  publish: _publish || _load_publish(),
-  remove: _remove || _load_remove(),
-  run: _run || _load_run(),
-  tag: _tag || _load_tag(),
-  team: _team || _load_team(),
-  unplug: _unplug || _load_unplug(),
-  unlink: _unlink || _load_unlink(),
-  upgrade: _upgrade || _load_upgrade(),
-  version: _version || _load_version(),
-  versions: _versions || _load_versions(),
-  why: _why || _load_why(),
-  workspaces: _workspaces || _load_workspaces(),
-  workspace: _workspace || _load_workspace(),
-  upgradeInteractive: _upgradeInteractive || _load_upgradeInteractive()
-};
-
-for (const key in commands) {
-  commands[key].getDocsInfo = getDocsInfo(key);
-}
-
-for (const key in (_aliases || _load_aliases()).default) {
-  commands[key] = commands[(_aliases || _load_aliases()).default[key]];
-  commands[key].getDocsInfo = getDocsInfo(key);
-}
-
-exports.default = commands;
-
-/***/ }),
-/* 335 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getRcConfigForCwd = getRcConfigForCwd;
-exports.getRcConfigForFolder = getRcConfigForFolder;
-exports.getRcArgs = getRcArgs;
-
-var _fs;
-
-function _load_fs() {
-  return _fs = __webpack_require__(5);
-}
-
-var _path;
-
-function _load_path() {
-  return _path = __webpack_require__(0);
-}
-
-var _commander;
-
-function _load_commander() {
-  return _commander = _interopRequireDefault(__webpack_require__(338));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = __webpack_require__(19);
-}
-
-var _rc;
-
-function _load_rc() {
-  return _rc = _interopRequireWildcard(__webpack_require__(590));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Keys that will get resolved relative to the path of the rc file they belong to
-const PATH_KEYS = new Set(['yarn-path', 'cache-folder', 'global-folder', 'modules-folder', 'cwd', 'offline-cache-folder']);
-
-// given a cwd, load all .yarnrc files relative to it
-
-
-function getRcConfigForCwd(cwd, args) {
-  const config = {};
-
-  if (args.indexOf('--no-default-rc') === -1) {
-    Object.assign(config, (_rc || _load_rc()).findRc('yarn', cwd, (fileText, filePath) => {
-      return loadRcFile(fileText, filePath);
-    }));
-  }
-
-  for (let index = args.indexOf('--use-yarnrc'); index !== -1; index = args.indexOf('--use-yarnrc', index + 1)) {
-    const value = args[index + 1];
-
-    if (value && value.charAt(0) !== '-') {
-      Object.assign(config, loadRcFile((0, (_fs || _load_fs()).readFileSync)(value, 'utf8'), value));
-    }
-  }
-
-  return config;
-}
-
-function getRcConfigForFolder(cwd) {
-  const filePath = (0, (_path || _load_path()).resolve)(cwd, '.yarnrc');
-  if (!(0, (_fs || _load_fs()).existsSync)(filePath)) {
-    return {};
-  }
-
-  const fileText = (0, (_fs || _load_fs()).readFileSync)(filePath, 'utf8');
-  return loadRcFile(fileText, filePath);
-}
-
-function loadRcFile(fileText, filePath) {
-  var _parse = (0, (_lockfile || _load_lockfile()).parse)(fileText, filePath);
-
-  let values = _parse.object;
-
-
-  if (filePath.match(/\.yml$/) && typeof values.yarnPath === 'string') {
-    values = { 'yarn-path': values.yarnPath };
-  }
-
-  // some keys reference directories so keep their relativity
-  for (const key in values) {
-    if (PATH_KEYS.has(key.replace(/^(--)?([^.]+\.)*/, ''))) {
-      values[key] = (0, (_path || _load_path()).resolve)((0, (_path || _load_path()).dirname)(filePath), values[key]);
-    }
-  }
-
-  return values;
-}
-
-// get the built of arguments of a .yarnrc chain of the passed cwd
-function buildRcArgs(cwd, args) {
-  const config = getRcConfigForCwd(cwd, args);
-
-  const argsForCommands = new Map();
-
-  for (const key in config) {
-    // args can be prefixed with the command name they're meant for, eg.
-    // `--install.check-files true`
-    const keyMatch = key.match(/^--(?:([^.]+)\.)?(.*)$/);
-    if (!keyMatch) {
-      continue;
-    }
-
-    const commandName = keyMatch[1] || '*';
-    const arg = keyMatch[2];
-    const value = config[key];
-
-    // create args for this command name if we didn't previously have them
-    const args = argsForCommands.get(commandName) || [];
-    argsForCommands.set(commandName, args);
-
-    // turn config value into appropriate cli flag
-    const option = (_commander || _load_commander()).default.optionFor(`--${arg}`);
-
-    // If commander doesn't recognize the option or it takes a value after it
-    if (!option || option.optional || option.required) {
-      args.push(`--${arg}`, value);
-    } else if (value === true) {
-      // we can't force remove an arg from cli
-      args.push(`--${arg}`);
-    }
-  }
-
-  return argsForCommands;
-}
-
-// extract the value of a --cwd arg if present
-function extractCwdArg(args) {
-  for (let i = 0, I = args.length; i < I; ++i) {
-    const arg = args[i];
-    if (arg === '--') {
-      return null;
-    } else if (arg === '--cwd') {
-      return args[i + 1];
-    }
-  }
-  return null;
-}
-
-// get a list of arguments from .yarnrc that apply to this commandName
-function getRcArgs(commandName, args, previousCwds = []) {
-  // for the cwd, use the --cwd arg if it was passed or else use process.cwd()
-  const origCwd = extractCwdArg(args) || process.cwd();
-
-  // get a map of command names and their arguments
-  const argMap = buildRcArgs(origCwd, args);
-
-  // concat wildcard arguments and arguments meant for this specific command
-  const newArgs = [...(argMap.get('*') || []), ...(argMap.get(commandName) || [])];
-
-  // check if the .yarnrc args specified a cwd
-  const newCwd = extractCwdArg(newArgs);
-  if (newCwd && newCwd !== origCwd) {
-    // ensure that we don't enter into a loop
-    if (previousCwds.indexOf(newCwd) !== -1) {
-      throw new Error(`Recursive .yarnrc files specifying --cwd flags. Bailing out.`);
-    }
-
-    //  if we have a new cwd then let's refetch the .yarnrc args relative to it
-    return getRcArgs(commandName, newArgs, previousCwds.concat(origCwd));
-  }
-
-  return newArgs;
-}
-
-/***/ }),
-/* 336 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.boolify = boolify;
-exports.boolifyWithDefault = boolifyWithDefault;
-const FALSY_STRINGS = new Set(['0', 'false']);
-
-function boolify(val) {
-  return !FALSY_STRINGS.has(val.toString().toLowerCase());
-}
-
-function boolifyWithDefault(val, defaultResult) {
-  return val === '' || val === null || val === undefined ? defaultResult : boolify(val);
-}
-
-/***/ }),
-/* 337 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.isOffline = isOffline;
-const os = __webpack_require__(46);
-
-const IGNORE_INTERFACES = ['lo0', 'awdl0', 'bridge0'];
-const LOCAL_IPS = ['127.0.0.1', '::1'];
-
-function isOffline() {
-  let interfaces;
-
-  try {
-    interfaces = os.networkInterfaces();
-  } catch (e) {
-    // As of October 2016, Windows Subsystem for Linux (WSL) does not support
-    // the os.networkInterfaces() call and throws instead. For this platform,
-    // assume we are online.
-    if (e.syscall === 'uv_interface_addresses') {
-      return false;
-    } else {
-      throw e;
-    }
-  }
-
-  for (const name in interfaces) {
-    if (IGNORE_INTERFACES.indexOf(name) >= 0) {
-      continue;
-    }
-
-    const addrs = interfaces[name];
-    for (var _iterator = addrs, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const addr = _ref;
-
-      if (LOCAL_IPS.indexOf(addr.address) < 0) {
-        // found a possible remote ip
-        return false;
-      }
-    }
-  }
-
-  return true;
-}
-
-/***/ }),
-/* 338 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/**
- * Module dependencies.
- */
-
-var EventEmitter = __webpack_require__(77).EventEmitter;
-var spawn = __webpack_require__(331).spawn;
-var path = __webpack_require__(0);
-var dirname = path.dirname;
-var basename = path.basename;
-var fs = __webpack_require__(5);
-
-/**
- * Inherit `Command` from `EventEmitter.prototype`.
- */
-
-__webpack_require__(3).inherits(Command, EventEmitter);
-
-/**
- * Expose the root command.
- */
-
-exports = module.exports = new Command();
-
-/**
- * Expose `Command`.
- */
-
-exports.Command = Command;
-
-/**
- * Expose `Option`.
- */
-
-exports.Option = Option;
-
-/**
- * Initialize a new `Option` with the given `flags` and `description`.
- *
- * @param {String} flags
- * @param {String} description
- * @api public
- */
-
-function Option(flags, description) {
-  this.flags = flags;
-  this.required = flags.indexOf('<') >= 0;
-  this.optional = flags.indexOf('[') >= 0;
-  this.bool = flags.indexOf('-no-') === -1;
-  flags = flags.split(/[ ,|]+/);
-  if (flags.length > 1 && !/^[[<]/.test(flags[1])) this.short = flags.shift();
-  this.long = flags.shift();
-  this.description = description || '';
-}
-
-/**
- * Return option name.
- *
- * @return {String}
- * @api private
- */
-
-Option.prototype.name = function() {
-  return this.long
-    .replace('--', '')
-    .replace('no-', '');
-};
-
-/**
- * Return option name, in a camelcase format that can be used
- * as a object attribute key.
- *
- * @return {String}
- * @api private
- */
-
-Option.prototype.attributeName = function() {
-  return camelcase(this.name());
-};
-
-/**
- * Check if `arg` matches the short or long flag.
- *
- * @param {String} arg
- * @return {Boolean}
- * @api private
- */
-
-Option.prototype.is = function(arg) {
-  return this.short === arg || this.long === arg;
-};
-
-/**
- * Initialize a new `Command`.
- *
- * @param {String} name
- * @api public
- */
-
-function Command(name) {
-  this.commands = [];
-  this.options = [];
-  this._execs = {};
-  this._allowUnknownOption = false;
-  this._args = [];
-  this._name = name || '';
-}
-
-/**
- * Add command `name`.
- *
- * The `.action()` callback is invoked when the
- * command `name` is specified via __ARGV__,
- * and the remaining arguments are applied to the
- * function for access.
- *
- * When the `name` is "*" an un-matched command
- * will be passed as the first arg, followed by
- * the rest of __ARGV__ remaining.
- *
- * Examples:
- *
- *      program
- *        .version('0.0.1')
- *        .option('-C, --chdir <path>', 'change the working directory')
- *        .option('-c, --config <path>', 'set config path. defaults to ./deploy.conf')
- *        .option('-T, --no-tests', 'ignore test hook')
- *
- *      program
- *        .command('setup')
- *        .description('run remote setup commands')
- *        .action(function() {
- *          console.log('setup');
- *        });
- *
- *      program
- *        .command('exec <cmd>')
- *        .description('run the given remote command')
- *        .action(function(cmd) {
- *          console.log('exec "%s"', cmd);
- *        });
- *
- *      program
- *        .command('teardown <dir> [otherDirs...]')
- *        .description('run teardown commands')
- *        .action(function(dir, otherDirs) {
- *          console.log('dir "%s"', dir);
- *          if (otherDirs) {
- *            otherDirs.forEach(function (oDir) {
- *              console.log('dir "%s"', oDir);
- *            });
- *          }
- *        });
- *
- *      program
- *        .command('*')
- *        .description('deploy the given env')
- *        .action(function(env) {
- *          console.log('deploying "%s"', env);
- *        });
- *
- *      program.parse(process.argv);
-  *
- * @param {String} name
- * @param {String} [desc] for git-style sub-commands
- * @return {Command} the new command
- * @api public
- */
-
-Command.prototype.command = function(name, desc, opts) {
-  if (typeof desc === 'object' && desc !== null) {
-    opts = desc;
-    desc = null;
-  }
-  opts = opts || {};
-  var args = name.split(/ +/);
-  var cmd = new Command(args.shift());
-
-  if (desc) {
-    cmd.description(desc);
-    this.executables = true;
-    this._execs[cmd._name] = true;
-    if (opts.isDefault) this.defaultExecutable = cmd._name;
-  }
-  cmd._noHelp = !!opts.noHelp;
-  this.commands.push(cmd);
-  cmd.parseExpectedArgs(args);
-  cmd.parent = this;
-
-  if (desc) return this;
-  return cmd;
-};
-
-/**
- * Define argument syntax for the top-level command.
- *
- * @api public
- */
-
-Command.prototype.arguments = function(desc) {
-  return this.parseExpectedArgs(desc.split(/ +/));
-};
-
-/**
- * Add an implicit `help [cmd]` subcommand
- * which invokes `--help` for the given command.
- *
- * @api private
- */
-
-Command.prototype.addImplicitHelpCommand = function() {
-  this.command('help [cmd]', 'display help for [cmd]');
-};
-
-/**
- * Parse expected `args`.
- *
- * For example `["[type]"]` becomes `[{ required: false, name: 'type' }]`.
- *
- * @param {Array} args
- * @return {Command} for chaining
- * @api public
- */
-
-Command.prototype.parseExpectedArgs = function(args) {
-  if (!args.length) return;
-  var self = this;
-  args.forEach(function(arg) {
-    var argDetails = {
-      required: false,
-      name: '',
-      variadic: false
-    };
-
-    switch (arg[0]) {
-      case '<':
-        argDetails.required = true;
-        argDetails.name = arg.slice(1, -1);
-        break;
-      case '[':
-        argDetails.name = arg.slice(1, -1);
-        break;
-    }
-
-    if (argDetails.name.length > 3 && argDetails.name.slice(-3) === '...') {
-      argDetails.variadic = true;
-      argDetails.name = argDetails.name.slice(0, -3);
-    }
-    if (argDetails.name) {
-      self._args.push(argDetails);
-    }
-  });
-  return this;
-};
-
-/**
- * Register callback `fn` for the command.
- *
- * Examples:
- *
- *      program
- *        .command('help')
- *        .description('display verbose help')
- *        .action(function() {
- *           // output help here
- *        });
- *
- * @param {Function} fn
- * @return {Command} for chaining
- * @api public
- */
-
-Command.prototype.action = function(fn) {
-  var self = this;
-  var listener = function(args, unknown) {
-    // Parse any so-far unknown options
-    args = args || [];
-    unknown = unknown || [];
-
-    var parsed = self.parseOptions(unknown);
-
-    // Output help if necessary
-    outputHelpIfNecessary(self, parsed.unknown);
-
-    // If there are still any unknown options, then we simply
-    // die, unless someone asked for help, in which case we give it
-    // to them, and then we die.
-    if (parsed.unknown.length > 0) {
-      self.unknownOption(parsed.unknown[0]);
-    }
-
-    // Leftover arguments need to be pushed back. Fixes issue #56
-    if (parsed.args.length) args = parsed.args.concat(args);
-
-    self._args.forEach(function(arg, i) {
-      if (arg.required && args[i] == null) {
-        self.missingArgument(arg.name);
-      } else if (arg.variadic) {
-        if (i !== self._args.length - 1) {
-          self.variadicArgNotLast(arg.name);
-        }
-
-        args[i] = args.splice(i);
-      }
-    });
-
-    // Always append ourselves to the end of the arguments,
-    // to make sure we match the number of arguments the user
-    // expects
-    if (self._args.length) {
-      args[self._args.length] = self;
-    } else {
-      args.push(self);
-    }
-
-    fn.apply(self, args);
-  };
-  var parent = this.parent || this;
-  var name = parent === this ? '*' : this._name;
-  parent.on('command:' + name, listener);
-  if (this._alias) parent.on('command:' + this._alias, listener);
-  return this;
-};
-
-/**
- * Define option with `flags`, `description` and optional
- * coercion `fn`.
- *
- * The `flags` string should contain both the short and long flags,
- * separated by comma, a pipe or space. The following are all valid
- * all will output this way when `--help` is used.
- *
- *    "-p, --pepper"
- *    "-p|--pepper"
- *    "-p --pepper"
- *
- * Examples:
- *
- *     // simple boolean defaulting to false
- *     program.option('-p, --pepper', 'add pepper');
- *
- *     --pepper
- *     program.pepper
- *     // => Boolean
- *
- *     // simple boolean defaulting to true
- *     program.option('-C, --no-cheese', 'remove cheese');
- *
- *     program.cheese
- *     // => true
- *
- *     --no-cheese
- *     program.cheese
- *     // => false
- *
- *     // required argument
- *     program.option('-C, --chdir <path>', 'change the working directory');
- *
- *     --chdir /tmp
- *     program.chdir
- *     // => "/tmp"
- *
- *     // optional argument
- *     program.option('-c, --cheese [type]', 'add cheese [marble]');
- *
- * @param {String} flags
- * @param {String} description
- * @param {Function|*} [fn] or default
- * @param {*} [defaultValue]
- * @return {Command} for chaining
- * @api public
- */
-
-Command.prototype.option = function(flags, description, fn, defaultValue) {
-  var self = this,
-    option = new Option(flags, description),
-    oname = option.name(),
-    name = option.attributeName();
-
-  // default as 3rd arg
-  if (typeof fn !== 'function') {
-    if (fn instanceof RegExp) {
-      var regex = fn;
-      fn = function(val, def) {
-        var m = regex.exec(val);
-        return m ? m[0] : def;
-      };
-    } else {
-      defaultValue = fn;
-      fn = null;
-    }
-  }
-
-  // preassign default value only for --no-*, [optional], or <required>
-  if (!option.bool || option.optional || option.required) {
-    // when --no-* we make sure default is true
-    if (!option.bool) defaultValue = true;
-    // preassign only if we have a default
-    if (defaultValue !== undefined) {
-      self[name] = defaultValue;
-      option.defaultValue = defaultValue;
-    }
-  }
-
-  // register the option
-  this.options.push(option);
-
-  // when it's passed assign the value
-  // and conditionally invoke the callback
-  this.on('option:' + oname, function(val) {
-    // coercion
-    if (val !== null && fn) {
-      val = fn(val, self[name] === undefined ? defaultValue : self[name]);
-    }
-
-    // unassigned or bool
-    if (typeof self[name] === 'boolean' || typeof self[name] === 'undefined') {
-      // if no value, bool true, and we have a default, then use it!
-      if (val == null) {
-        self[name] = option.bool
-          ? defaultValue || true
-          : false;
-      } else {
-        self[name] = val;
-      }
-    } else if (val !== null) {
-      // reassign
-      self[name] = val;
-    }
-  });
-
-  return this;
-};
-
-/**
- * Allow unknown options on the command line.
- *
- * @param {Boolean} arg if `true` or omitted, no error will be thrown
- * for unknown options.
- * @api public
- */
-Command.prototype.allowUnknownOption = function(arg) {
-  this._allowUnknownOption = arguments.length === 0 || arg;
-  return this;
-};
-
-/**
- * Parse `argv`, settings options and invoking commands when defined.
- *
- * @param {Array} argv
- * @return {Command} for chaining
- * @api public
- */
-
-Command.prototype.parse = function(argv) {
-  // implicit help
-  if (this.executables) this.addImplicitHelpCommand();
-
-  // store raw args
-  this.rawArgs = argv;
-
-  // guess name
-  this._name = this._name || basename(argv[1], '.js');
-
-  // github-style sub-commands with no sub-command
-  if (this.executables && argv.length < 3 && !this.defaultExecutable) {
-    // this user needs help
-    argv.push('--help');
-  }
-
-  // process argv
-  var parsed = this.parseOptions(this.normalize(argv.slice(2)));
-  var args = this.args = parsed.args;
-
-  var result = this.parseArgs(this.args, parsed.unknown);
-
-  // executable sub-commands
-  var name = result.args[0];
-
-  var aliasCommand = null;
-  // check alias of sub commands
-  if (name) {
-    aliasCommand = this.commands.filter(function(command) {
-      return command.alias() === name;
-    })[0];
-  }
-
-  if (this._execs[name] && typeof this._execs[name] !== 'function') {
-    return this.executeSubCommand(argv, args, parsed.unknown);
-  } else if (aliasCommand) {
-    // is alias of a subCommand
-    args[0] = aliasCommand._name;
-    return this.executeSubCommand(argv, args, parsed.unknown);
-  } else if (this.defaultExecutable) {
-    // use the default subcommand
-    args.unshift(this.defaultExecutable);
-    return this.executeSubCommand(argv, args, parsed.unknown);
-  }
-
-  return result;
-};
-
-/**
- * Execute a sub-command executable.
- *
- * @param {Array} argv
- * @param {Array} args
- * @param {Array} unknown
- * @api private
- */
-
-Command.prototype.executeSubCommand = function(argv, args, unknown) {
-  args = args.concat(unknown);
-
-  if (!args.length) this.help();
-  if (args[0] === 'help' && args.length === 1) this.help();
-
-  // <cmd> --help
-  if (args[0] === 'help') {
-    args[0] = args[1];
-    args[1] = '--help';
-  }
-
-  // executable
-  var f = argv[1];
-  // name of the subcommand, link `pm-install`
-  var bin = basename(f, '.js') + '-' + args[0];
-
-  // In case of globally installed, get the base dir where executable
-  //  subcommand file should be located at
-  var baseDir,
-    link = fs.lstatSync(f).isSymbolicLink() ? fs.readlinkSync(f) : f;
-
-  // when symbolink is relative path
-  if (link !== f && link.charAt(0) !== '/') {
-    link = path.join(dirname(f), link);
-  }
-  baseDir = dirname(link);
-
-  // prefer local `./<bin>` to bin in the $PATH
-  var localBin = path.join(baseDir, bin);
-
-  // whether bin file is a js script with explicit `.js` extension
-  var isExplicitJS = false;
-  if (exists(localBin + '.js')) {
-    bin = localBin + '.js';
-    isExplicitJS = true;
-  } else if (exists(localBin)) {
-    bin = localBin;
-  }
-
-  args = args.slice(1);
-
-  var proc;
-  if (process.platform !== 'win32') {
-    if (isExplicitJS) {
-      args.unshift(bin);
-      // add executable arguments to spawn
-      args = (process.execArgv || []).concat(args);
-
-      proc = spawn(process.argv[0], args, { stdio: 'inherit', customFds: [0, 1, 2] });
-    } else {
-      proc = spawn(bin, args, { stdio: 'inherit', customFds: [0, 1, 2] });
-    }
-  } else {
-    args.unshift(bin);
-    proc = spawn(process.execPath, args, { stdio: 'inherit' });
-  }
-
-  var signals = ['SIGUSR1', 'SIGUSR2', 'SIGTERM', 'SIGINT', 'SIGHUP'];
-  signals.forEach(function(signal) {
-    process.on(signal, function() {
-      if (proc.killed === false && proc.exitCode === null) {
-        proc.kill(signal);
-      }
-    });
-  });
-  proc.on('close', process.exit.bind(process));
-  proc.on('error', function(err) {
-    if (err.code === 'ENOENT') {
-      console.error('\n  %s(1) does not exist, try --help\n', bin);
-    } else if (err.code === 'EACCES') {
-      console.error('\n  %s(1) not executable. try chmod or run with root\n', bin);
-    }
-    process.exit(1);
-  });
-
-  // Store the reference to the child process
-  this.runningCommand = proc;
-};
-
-/**
- * Normalize `args`, splitting joined short flags. For example
- * the arg "-abc" is equivalent to "-a -b -c".
- * This also normalizes equal sign and splits "--abc=def" into "--abc def".
- *
- * @param {Array} args
- * @return {Array}
- * @api private
- */
-
-Command.prototype.normalize = function(args) {
-  var ret = [],
-    arg,
-    lastOpt,
-    index;
-
-  for (var i = 0, len = args.length; i < len; ++i) {
-    arg = args[i];
-    if (i > 0) {
-      lastOpt = this.optionFor(args[i - 1]);
-    }
-
-    if (arg === '--') {
-      // Honor option terminator
-      ret = ret.concat(args.slice(i));
-      break;
-    } else if (lastOpt && lastOpt.required) {
-      ret.push(arg);
-    } else if (arg.length > 1 && arg[0] === '-' && arg[1] !== '-') {
-      arg.slice(1).split('').forEach(function(c) {
-        ret.push('-' + c);
-      });
-    } else if (/^--/.test(arg) && ~(index = arg.indexOf('='))) {
-      ret.push(arg.slice(0, index), arg.slice(index + 1));
-    } else {
-      ret.push(arg);
-    }
-  }
-
-  return ret;
-};
-
-/**
- * Parse command `args`.
- *
- * When listener(s) are available those
- * callbacks are invoked, otherwise the "*"
- * event is emitted and those actions are invoked.
- *
- * @param {Array} args
- * @return {Command} for chaining
- * @api private
- */
-
-Command.prototype.parseArgs = function(args, unknown) {
-  var name;
-
-  if (args.length) {
-    name = args[0];
-    if (this.listeners('command:' + name).length) {
-      this.emit('command:' + args.shift(), args, unknown);
-    } else {
-      this.emit('command:*', args);
-    }
-  } else {
-    outputHelpIfNecessary(this, unknown);
-
-    // If there were no args and we have unknown options,
-    // then they are extraneous and we need to error.
-    if (unknown.length > 0) {
-      this.unknownOption(unknown[0]);
-    }
-  }
-
-  return this;
-};
-
-/**
- * Return an option matching `arg` if any.
- *
- * @param {String} arg
- * @return {Option}
- * @api private
- */
-
-Command.prototype.optionFor = function(arg) {
-  for (var i = 0, len = this.options.length; i < len; ++i) {
-    if (this.options[i].is(arg)) {
-      return this.options[i];
-    }
-  }
-};
-
-/**
- * Parse options from `argv` returning `argv`
- * void of these options.
- *
- * @param {Array} argv
- * @return {Array}
- * @api public
- */
-
-Command.prototype.parseOptions = function(argv) {
-  var args = [],
-    len = argv.length,
-    literal,
-    option,
-    arg;
-
-  var unknownOptions = [];
-
-  // parse options
-  for (var i = 0; i < len; ++i) {
-    arg = argv[i];
-
-    // literal args after --
-    if (literal) {
-      args.push(arg);
-      continue;
-    }
-
-    if (arg === '--') {
-      literal = true;
-      continue;
-    }
-
-    // find matching Option
-    option = this.optionFor(arg);
-
-    // option is defined
-    if (option) {
-      // requires arg
-      if (option.required) {
-        arg = argv[++i];
-        if (arg == null) return this.optionMissingArgument(option);
-        this.emit('option:' + option.name(), arg);
-      // optional arg
-      } else if (option.optional) {
-        arg = argv[i + 1];
-        if (arg == null || (arg[0] === '-' && arg !== '-')) {
-          arg = null;
-        } else {
-          ++i;
-        }
-        this.emit('option:' + option.name(), arg);
-      // bool
-      } else {
-        this.emit('option:' + option.name());
-      }
-      continue;
-    }
-
-    // looks like an option
-    if (arg.length > 1 && arg[0] === '-') {
-      unknownOptions.push(arg);
-
-      // If the next argument looks like it might be
-      // an argument for this option, we pass it on.
-      // If it isn't, then it'll simply be ignored
-      if ((i + 1) < argv.length && argv[i + 1][0] !== '-') {
-        unknownOptions.push(argv[++i]);
-      }
-      continue;
-    }
-
-    // arg
-    args.push(arg);
-  }
-
-  return { args: args, unknown: unknownOptions };
-};
-
-/**
- * Return an object containing options as key-value pairs
- *
- * @return {Object}
- * @api public
- */
-Command.prototype.opts = function() {
-  var result = {},
-    len = this.options.length;
-
-  for (var i = 0; i < len; i++) {
-    var key = this.options[i].attributeName();
-    result[key] = key === this._versionOptionName ? this._version : this[key];
-  }
-  return result;
-};
-
-/**
- * Argument `name` is missing.
- *
- * @param {String} name
- * @api private
- */
-
-Command.prototype.missingArgument = function(name) {
-  console.error();
-  console.error("  error: missing required argument `%s'", name);
-  console.error();
-  process.exit(1);
-};
-
-/**
- * `Option` is missing an argument, but received `flag` or nothing.
- *
- * @param {String} option
- * @param {String} flag
- * @api private
- */
-
-Command.prototype.optionMissingArgument = function(option, flag) {
-  console.error();
-  if (flag) {
-    console.error("  error: option `%s' argument missing, got `%s'", option.flags, flag);
-  } else {
-    console.error("  error: option `%s' argument missing", option.flags);
-  }
-  console.error();
-  process.exit(1);
-};
-
-/**
- * Unknown option `flag`.
- *
- * @param {String} flag
- * @api private
- */
-
-Command.prototype.unknownOption = function(flag) {
-  if (this._allowUnknownOption) return;
-  console.error();
-  console.error("  error: unknown option `%s'", flag);
-  console.error();
-  process.exit(1);
-};
-
-/**
- * Variadic argument with `name` is not the last argument as required.
- *
- * @param {String} name
- * @api private
- */
-
-Command.prototype.variadicArgNotLast = function(name) {
-  console.error();
-  console.error("  error: variadic arguments must be last `%s'", name);
-  console.error();
-  process.exit(1);
-};
-
-/**
- * Set the program version to `str`.
- *
- * This method auto-registers the "-V, --version" flag
- * which will print the version number when passed.
- *
- * @param {String} str
- * @param {String} [flags]
- * @return {Command} for chaining
- * @api public
- */
-
-Command.prototype.version = function(str, flags) {
-  if (arguments.length === 0) return this._version;
-  this._version = str;
-  flags = flags || '-V, --version';
-  var versionOption = new Option(flags, 'output the version number');
-  this._versionOptionName = versionOption.long.substr(2) || 'version';
-  this.options.push(versionOption);
-  this.on('option:' + this._versionOptionName, function() {
-    process.stdout.write(str + '\n');
-    process.exit(0);
-  });
-  return this;
-};
-
-/**
- * Set the description to `str`.
- *
- * @param {String} str
- * @param {Object} argsDescription
- * @return {String|Command}
- * @api public
- */
-
-Command.prototype.description = function(str, argsDescription) {
-  if (arguments.length === 0) return this._description;
-  this._description = str;
-  this._argsDescription = argsDescription;
-  return this;
-};
-
-/**
- * Set an alias for the command
- *
- * @param {String} alias
- * @return {String|Command}
- * @api public
- */
-
-Command.prototype.alias = function(alias) {
-  var command = this;
-  if (this.commands.length !== 0) {
-    command = this.commands[this.commands.length - 1];
-  }
-
-  if (arguments.length === 0) return command._alias;
-
-  if (alias === command._name) throw new Error('Command alias can\'t be the same as its name');
-
-  command._alias = alias;
-  return this;
-};
-
-/**
- * Set / get the command usage `str`.
- *
- * @param {String} str
- * @return {String|Command}
- * @api public
- */
-
-Command.prototype.usage = function(str) {
-  var args = this._args.map(function(arg) {
-    return humanReadableArgName(arg);
-  });
-
-  var usage = '[options]' +
-    (this.commands.length ? ' [command]' : '') +
-    (this._args.length ? ' ' + args.join(' ') : '');
-
-  if (arguments.length === 0) return this._usage || usage;
-  this._usage = str;
-
-  return this;
-};
-
-/**
- * Get or set the name of the command
- *
- * @param {String} str
- * @return {String|Command}
- * @api public
- */
-
-Command.prototype.name = function(str) {
-  if (arguments.length === 0) return this._name;
-  this._name = str;
-  return this;
-};
-
-/**
- * Return prepared commands.
- *
- * @return {Array}
- * @api private
- */
-
-Command.prototype.prepareCommands = function() {
-  return this.commands.filter(function(cmd) {
-    return !cmd._noHelp;
-  }).map(function(cmd) {
-    var args = cmd._args.map(function(arg) {
-      return humanReadableArgName(arg);
-    }).join(' ');
-
-    return [
-      cmd._name +
-        (cmd._alias ? '|' + cmd._alias : '') +
-        (cmd.options.length ? ' [options]' : '') +
-        (args ? ' ' + args : ''),
-      cmd._description
-    ];
-  });
-};
-
-/**
- * Return the largest command length.
- *
- * @return {Number}
- * @api private
- */
-
-Command.prototype.largestCommandLength = function() {
-  var commands = this.prepareCommands();
-  return commands.reduce(function(max, command) {
-    return Math.max(max, command[0].length);
-  }, 0);
-};
-
-/**
- * Return the largest option length.
- *
- * @return {Number}
- * @api private
- */
-
-Command.prototype.largestOptionLength = function() {
-  var options = [].slice.call(this.options);
-  options.push({
-    flags: '-h, --help'
-  });
-  return options.reduce(function(max, option) {
-    return Math.max(max, option.flags.length);
-  }, 0);
-};
-
-/**
- * Return the largest arg length.
- *
- * @return {Number}
- * @api private
- */
-
-Command.prototype.largestArgLength = function() {
-  return this._args.reduce(function(max, arg) {
-    return Math.max(max, arg.name.length);
-  }, 0);
-};
-
-/**
- * Return the pad width.
- *
- * @return {Number}
- * @api private
- */
-
-Command.prototype.padWidth = function() {
-  var width = this.largestOptionLength();
-  if (this._argsDescription && this._args.length) {
-    if (this.largestArgLength() > width) {
-      width = this.largestArgLength();
-    }
-  }
-
-  if (this.commands && this.commands.length) {
-    if (this.largestCommandLength() > width) {
-      width = this.largestCommandLength();
-    }
-  }
-
-  return width;
-};
-
-/**
- * Return help for options.
- *
- * @return {String}
- * @api private
- */
-
-Command.prototype.optionHelp = function() {
-  var width = this.padWidth();
-
-  // Append the help information
-  return this.options.map(function(option) {
-    return pad(option.flags, width) + '  ' + option.description +
-      ((option.bool && option.defaultValue !== undefined) ? ' (default: ' + option.defaultValue + ')' : '');
-  }).concat([pad('-h, --help', width) + '  ' + 'output usage information'])
-    .join('\n');
-};
-
-/**
- * Return command help documentation.
- *
- * @return {String}
- * @api private
- */
-
-Command.prototype.commandHelp = function() {
-  if (!this.commands.length) return '';
-
-  var commands = this.prepareCommands();
-  var width = this.padWidth();
-
-  return [
-    '  Commands:',
-    '',
-    commands.map(function(cmd) {
-      var desc = cmd[1] ? '  ' + cmd[1] : '';
-      return (desc ? pad(cmd[0], width) : cmd[0]) + desc;
-    }).join('\n').replace(/^/gm, '    '),
-    ''
-  ].join('\n');
-};
-
-/**
- * Return program help documentation.
- *
- * @return {String}
- * @api private
- */
-
-Command.prototype.helpInformation = function() {
-  var desc = [];
-  if (this._description) {
-    desc = [
-      '  ' + this._description,
-      ''
-    ];
-
-    var argsDescription = this._argsDescription;
-    if (argsDescription && this._args.length) {
-      var width = this.padWidth();
-      desc.push('  Arguments:');
-      desc.push('');
-      this._args.forEach(function(arg) {
-        desc.push('    ' + pad(arg.name, width) + '  ' + argsDescription[arg.name]);
-      });
-      desc.push('');
-    }
-  }
-
-  var cmdName = this._name;
-  if (this._alias) {
-    cmdName = cmdName + '|' + this._alias;
-  }
-  var usage = [
-    '',
-    '  Usage: ' + cmdName + ' ' + this.usage(),
-    ''
-  ];
-
-  var cmds = [];
-  var commandHelp = this.commandHelp();
-  if (commandHelp) cmds = [commandHelp];
-
-  var options = [
-    '  Options:',
-    '',
-    '' + this.optionHelp().replace(/^/gm, '    '),
-    ''
-  ];
-
-  return usage
-    .concat(desc)
-    .concat(options)
-    .concat(cmds)
-    .join('\n');
-};
-
-/**
- * Output help information for this command
- *
- * @api public
- */
-
-Command.prototype.outputHelp = function(cb) {
-  if (!cb) {
-    cb = function(passthru) {
-      return passthru;
-    };
-  }
-  process.stdout.write(cb(this.helpInformation()));
-  this.emit('--help');
-};
-
-/**
- * Output help information and exit.
- *
- * @api public
- */
-
-Command.prototype.help = function(cb) {
-  this.outputHelp(cb);
-  process.exit();
-};
-
-/**
- * Camel-case the given `flag`
- *
- * @param {String} flag
- * @return {String}
- * @api private
- */
-
-function camelcase(flag) {
-  return flag.split('-').reduce(function(str, word) {
-    return str + word[0].toUpperCase() + word.slice(1);
-  });
-}
-
-/**
- * Pad `str` to `width`.
- *
- * @param {String} str
- * @param {Number} width
- * @return {String}
- * @api private
- */
-
-function pad(str, width) {
-  var len = Math.max(0, width - str.length);
-  return str + Array(len + 1).join(' ');
-}
-
-/**
- * Output help information if necessary
- *
- * @param {Command} command to output help for
- * @param {Array} array of options to search for -h or --help
- * @api private
- */
-
-function outputHelpIfNecessary(cmd, options) {
-  options = options || [];
-  for (var i = 0; i < options.length; i++) {
-    if (options[i] === '--help' || options[i] === '-h') {
-      cmd.outputHelp();
-      process.exit(0);
-    }
-  }
-}
-
-/**
- * Takes an argument an returns its human readable equivalent for help usage.
- *
- * @param {Object} arg
- * @return {String}
- * @api private
- */
-
-function humanReadableArgName(arg) {
-  var nameOutput = arg.name + (arg.variadic === true ? '...' : '');
-
-  return arg.required
-    ? '<' + nameOutput + '>'
-    : '[' + nameOutput + ']';
-}
-
-// for versions before node v0.8 when there weren't `fs.existsSync`
-function exists(file) {
-  try {
-    if (fs.statSync(file).isFile()) {
-      return true;
-    }
-  } catch (e) {
-    return false;
-  }
-}
-
-
-/***/ }),
-/* 339 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var util = __webpack_require__(106);
-
-module.exports = SchemaObject;
-
-function SchemaObject(obj) {
-  util.copy(obj, this);
-}
-
-
-/***/ }),
-/* 340 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate__limit(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $errorKeyword;
-  var $data = 'data' + ($dataLvl || '');
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $isMax = $keyword == 'maximum',
-    $exclusiveKeyword = $isMax ? 'exclusiveMaximum' : 'exclusiveMinimum',
-    $schemaExcl = it.schema[$exclusiveKeyword],
-    $isDataExcl = it.opts.$data && $schemaExcl && $schemaExcl.$data,
-    $op = $isMax ? '<' : '>',
-    $notOp = $isMax ? '>' : '<',
-    $errorKeyword = undefined;
-  if ($isDataExcl) {
-    var $schemaValueExcl = it.util.getData($schemaExcl.$data, $dataLvl, it.dataPathArr),
-      $exclusive = 'exclusive' + $lvl,
-      $exclType = 'exclType' + $lvl,
-      $exclIsNumber = 'exclIsNumber' + $lvl,
-      $opExpr = 'op' + $lvl,
-      $opStr = '\' + ' + $opExpr + ' + \'';
-    out += ' var schemaExcl' + ($lvl) + ' = ' + ($schemaValueExcl) + '; ';
-    $schemaValueExcl = 'schemaExcl' + $lvl;
-    out += ' var ' + ($exclusive) + '; var ' + ($exclType) + ' = typeof ' + ($schemaValueExcl) + '; if (' + ($exclType) + ' != \'boolean\' && ' + ($exclType) + ' != \'undefined\' && ' + ($exclType) + ' != \'number\') { ';
-    var $errorKeyword = $exclusiveKeyword;
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = ''; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ($errorKeyword || '_exclusiveLimit') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'' + ($exclusiveKeyword) + ' should be boolean\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    var __err = out;
-    out = $$outStack.pop();
-    if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-      if (it.async) {
-        out += ' throw new ValidationError([' + (__err) + ']); ';
-      } else {
-        out += ' validate.errors = [' + (__err) + ']; return false; ';
-      }
-    } else {
-      out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    }
-    out += ' } else if ( ';
-    if ($isData) {
-      out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'number\') || ';
-    }
-    out += ' ' + ($exclType) + ' == \'number\' ? ( (' + ($exclusive) + ' = ' + ($schemaValue) + ' === undefined || ' + ($schemaValueExcl) + ' ' + ($op) + '= ' + ($schemaValue) + ') ? ' + ($data) + ' ' + ($notOp) + '= ' + ($schemaValueExcl) + ' : ' + ($data) + ' ' + ($notOp) + ' ' + ($schemaValue) + ' ) : ( (' + ($exclusive) + ' = ' + ($schemaValueExcl) + ' === true) ? ' + ($data) + ' ' + ($notOp) + '= ' + ($schemaValue) + ' : ' + ($data) + ' ' + ($notOp) + ' ' + ($schemaValue) + ' ) || ' + ($data) + ' !== ' + ($data) + ') { var op' + ($lvl) + ' = ' + ($exclusive) + ' ? \'' + ($op) + '\' : \'' + ($op) + '=\';';
-  } else {
-    var $exclIsNumber = typeof $schemaExcl == 'number',
-      $opStr = $op;
-    if ($exclIsNumber && $isData) {
-      var $opExpr = '\'' + $opStr + '\'';
-      out += ' if ( ';
-      if ($isData) {
-        out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'number\') || ';
-      }
-      out += ' ( ' + ($schemaValue) + ' === undefined || ' + ($schemaExcl) + ' ' + ($op) + '= ' + ($schemaValue) + ' ? ' + ($data) + ' ' + ($notOp) + '= ' + ($schemaExcl) + ' : ' + ($data) + ' ' + ($notOp) + ' ' + ($schemaValue) + ' ) || ' + ($data) + ' !== ' + ($data) + ') { ';
-    } else {
-      if ($exclIsNumber && $schema === undefined) {
-        $exclusive = true;
-        $errorKeyword = $exclusiveKeyword;
-        $errSchemaPath = it.errSchemaPath + '/' + $exclusiveKeyword;
-        $schemaValue = $schemaExcl;
-        $notOp += '=';
-      } else {
-        if ($exclIsNumber) $schemaValue = Math[$isMax ? 'min' : 'max']($schemaExcl, $schema);
-        if ($schemaExcl === ($exclIsNumber ? $schemaValue : true)) {
-          $exclusive = true;
-          $errorKeyword = $exclusiveKeyword;
-          $errSchemaPath = it.errSchemaPath + '/' + $exclusiveKeyword;
-          $notOp += '=';
-        } else {
-          $exclusive = false;
-          $opStr += '=';
-        }
-      }
-      var $opExpr = '\'' + $opStr + '\'';
-      out += ' if ( ';
-      if ($isData) {
-        out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'number\') || ';
-      }
-      out += ' ' + ($data) + ' ' + ($notOp) + ' ' + ($schemaValue) + ' || ' + ($data) + ' !== ' + ($data) + ') { ';
-    }
-  }
-  $errorKeyword = $errorKeyword || $keyword;
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ($errorKeyword || '_limit') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { comparison: ' + ($opExpr) + ', limit: ' + ($schemaValue) + ', exclusive: ' + ($exclusive) + ' } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should be ' + ($opStr) + ' ';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue);
-      } else {
-        out += '' + ($schemaValue) + '\'';
-      }
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + ($schema);
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += ' } ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 341 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate__limitItems(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $errorKeyword;
-  var $data = 'data' + ($dataLvl || '');
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $op = $keyword == 'maxItems' ? '>' : '<';
-  out += 'if ( ';
-  if ($isData) {
-    out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'number\') || ';
-  }
-  out += ' ' + ($data) + '.length ' + ($op) + ' ' + ($schemaValue) + ') { ';
-  var $errorKeyword = $keyword;
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ($errorKeyword || '_limitItems') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { limit: ' + ($schemaValue) + ' } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should NOT have ';
-      if ($keyword == 'maxItems') {
-        out += 'more';
-      } else {
-        out += 'less';
-      }
-      out += ' than ';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue) + ' + \'';
-      } else {
-        out += '' + ($schema);
-      }
-      out += ' items\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + ($schema);
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += '} ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 342 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate__limitLength(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $errorKeyword;
-  var $data = 'data' + ($dataLvl || '');
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $op = $keyword == 'maxLength' ? '>' : '<';
-  out += 'if ( ';
-  if ($isData) {
-    out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'number\') || ';
-  }
-  if (it.opts.unicode === false) {
-    out += ' ' + ($data) + '.length ';
-  } else {
-    out += ' ucs2length(' + ($data) + ') ';
-  }
-  out += ' ' + ($op) + ' ' + ($schemaValue) + ') { ';
-  var $errorKeyword = $keyword;
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ($errorKeyword || '_limitLength') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { limit: ' + ($schemaValue) + ' } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should NOT be ';
-      if ($keyword == 'maxLength') {
-        out += 'longer';
-      } else {
-        out += 'shorter';
-      }
-      out += ' than ';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue) + ' + \'';
-      } else {
-        out += '' + ($schema);
-      }
-      out += ' characters\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + ($schema);
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += '} ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 343 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate__limitProperties(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $errorKeyword;
-  var $data = 'data' + ($dataLvl || '');
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $op = $keyword == 'maxProperties' ? '>' : '<';
-  out += 'if ( ';
-  if ($isData) {
-    out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'number\') || ';
-  }
-  out += ' Object.keys(' + ($data) + ').length ' + ($op) + ' ' + ($schemaValue) + ') { ';
-  var $errorKeyword = $keyword;
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ($errorKeyword || '_limitProperties') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { limit: ' + ($schemaValue) + ' } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should NOT have ';
-      if ($keyword == 'maxProperties') {
-        out += 'more';
-      } else {
-        out += 'less';
-      }
-      out += ' than ';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue) + ' + \'';
-      } else {
-        out += '' + ($schema);
-      }
-      out += ' properties\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + ($schema);
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += '} ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 344 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_validate(it, $keyword, $ruleType) {
-  var out = '';
-  var $async = it.schema.$async === true,
-    $refKeywords = it.util.schemaHasRulesExcept(it.schema, it.RULES.all, '$ref'),
-    $id = it.self._getId(it.schema);
-  if (it.isTop) {
-    if ($async) {
-      it.async = true;
-      var $es7 = it.opts.async == 'es7';
-      it.yieldAwait = $es7 ? 'await' : 'yield';
-    }
-    out += ' var validate = ';
-    if ($async) {
-      if ($es7) {
-        out += ' (async function ';
-      } else {
-        if (it.opts.async != '*') {
-          out += 'co.wrap';
-        }
-        out += '(function* ';
-      }
-    } else {
-      out += ' (function ';
-    }
-    out += ' (data, dataPath, parentData, parentDataProperty, rootData) { \'use strict\'; ';
-    if ($id && (it.opts.sourceCode || it.opts.processCode)) {
-      out += ' ' + ('/\*# sourceURL=' + $id + ' */') + ' ';
-    }
-  }
-  if (typeof it.schema == 'boolean' || !($refKeywords || it.schema.$ref)) {
-    var $keyword = 'false schema';
-    var $lvl = it.level;
-    var $dataLvl = it.dataLevel;
-    var $schema = it.schema[$keyword];
-    var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-    var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-    var $breakOnError = !it.opts.allErrors;
-    var $errorKeyword;
-    var $data = 'data' + ($dataLvl || '');
-    var $valid = 'valid' + $lvl;
-    if (it.schema === false) {
-      if (it.isTop) {
-        $breakOnError = true;
-      } else {
-        out += ' var ' + ($valid) + ' = false; ';
-      }
-      var $$outStack = $$outStack || [];
-      $$outStack.push(out);
-      out = ''; /* istanbul ignore else */
-      if (it.createErrors !== false) {
-        out += ' { keyword: \'' + ($errorKeyword || 'false schema') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-        if (it.opts.messages !== false) {
-          out += ' , message: \'boolean schema is false\' ';
-        }
-        if (it.opts.verbose) {
-          out += ' , schema: false , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-        }
-        out += ' } ';
-      } else {
-        out += ' {} ';
-      }
-      var __err = out;
-      out = $$outStack.pop();
-      if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-        if (it.async) {
-          out += ' throw new ValidationError([' + (__err) + ']); ';
-        } else {
-          out += ' validate.errors = [' + (__err) + ']; return false; ';
-        }
-      } else {
-        out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-      }
-    } else {
-      if (it.isTop) {
-        if ($async) {
-          out += ' return data; ';
-        } else {
-          out += ' validate.errors = null; return true; ';
-        }
-      } else {
-        out += ' var ' + ($valid) + ' = true; ';
-      }
-    }
-    if (it.isTop) {
-      out += ' }); return validate; ';
-    }
-    return out;
-  }
-  if (it.isTop) {
-    var $top = it.isTop,
-      $lvl = it.level = 0,
-      $dataLvl = it.dataLevel = 0,
-      $data = 'data';
-    it.rootId = it.resolve.fullPath(it.self._getId(it.root.schema));
-    it.baseId = it.baseId || it.rootId;
-    delete it.isTop;
-    it.dataPathArr = [undefined];
-    out += ' var vErrors = null; ';
-    out += ' var errors = 0;     ';
-    out += ' if (rootData === undefined) rootData = data; ';
-  } else {
-    var $lvl = it.level,
-      $dataLvl = it.dataLevel,
-      $data = 'data' + ($dataLvl || '');
-    if ($id) it.baseId = it.resolve.url(it.baseId, $id);
-    if ($async && !it.async) throw new Error('async schema in sync schema');
-    out += ' var errs_' + ($lvl) + ' = errors;';
-  }
-  var $valid = 'valid' + $lvl,
-    $breakOnError = !it.opts.allErrors,
-    $closingBraces1 = '',
-    $closingBraces2 = '';
-  var $errorKeyword;
-  var $typeSchema = it.schema.type,
-    $typeIsArray = Array.isArray($typeSchema);
-  if ($typeIsArray && $typeSchema.length == 1) {
-    $typeSchema = $typeSchema[0];
-    $typeIsArray = false;
-  }
-  if (it.schema.$ref && $refKeywords) {
-    if (it.opts.extendRefs == 'fail') {
-      throw new Error('$ref: validation keywords used in schema at path "' + it.errSchemaPath + '" (see option extendRefs)');
-    } else if (it.opts.extendRefs !== true) {
-      $refKeywords = false;
-      it.logger.warn('$ref: keywords ignored in schema at path "' + it.errSchemaPath + '"');
-    }
-  }
-  if ($typeSchema) {
-    if (it.opts.coerceTypes) {
-      var $coerceToTypes = it.util.coerceToTypes(it.opts.coerceTypes, $typeSchema);
-    }
-    var $rulesGroup = it.RULES.types[$typeSchema];
-    if ($coerceToTypes || $typeIsArray || $rulesGroup === true || ($rulesGroup && !$shouldUseGroup($rulesGroup))) {
-      var $schemaPath = it.schemaPath + '.type',
-        $errSchemaPath = it.errSchemaPath + '/type';
-      var $schemaPath = it.schemaPath + '.type',
-        $errSchemaPath = it.errSchemaPath + '/type',
-        $method = $typeIsArray ? 'checkDataTypes' : 'checkDataType';
-      out += ' if (' + (it.util[$method]($typeSchema, $data, true)) + ') { ';
-      if ($coerceToTypes) {
-        var $dataType = 'dataType' + $lvl,
-          $coerced = 'coerced' + $lvl;
-        out += ' var ' + ($dataType) + ' = typeof ' + ($data) + '; ';
-        if (it.opts.coerceTypes == 'array') {
-          out += ' if (' + ($dataType) + ' == \'object\' && Array.isArray(' + ($data) + ')) ' + ($dataType) + ' = \'array\'; ';
-        }
-        out += ' var ' + ($coerced) + ' = undefined; ';
-        var $bracesCoercion = '';
-        var arr1 = $coerceToTypes;
-        if (arr1) {
-          var $type, $i = -1,
-            l1 = arr1.length - 1;
-          while ($i < l1) {
-            $type = arr1[$i += 1];
-            if ($i) {
-              out += ' if (' + ($coerced) + ' === undefined) { ';
-              $bracesCoercion += '}';
-            }
-            if (it.opts.coerceTypes == 'array' && $type != 'array') {
-              out += ' if (' + ($dataType) + ' == \'array\' && ' + ($data) + '.length == 1) { ' + ($coerced) + ' = ' + ($data) + ' = ' + ($data) + '[0]; ' + ($dataType) + ' = typeof ' + ($data) + ';  } ';
-            }
-            if ($type == 'string') {
-              out += ' if (' + ($dataType) + ' == \'number\' || ' + ($dataType) + ' == \'boolean\') ' + ($coerced) + ' = \'\' + ' + ($data) + '; else if (' + ($data) + ' === null) ' + ($coerced) + ' = \'\'; ';
-            } else if ($type == 'number' || $type == 'integer') {
-              out += ' if (' + ($dataType) + ' == \'boolean\' || ' + ($data) + ' === null || (' + ($dataType) + ' == \'string\' && ' + ($data) + ' && ' + ($data) + ' == +' + ($data) + ' ';
-              if ($type == 'integer') {
-                out += ' && !(' + ($data) + ' % 1)';
-              }
-              out += ')) ' + ($coerced) + ' = +' + ($data) + '; ';
-            } else if ($type == 'boolean') {
-              out += ' if (' + ($data) + ' === \'false\' || ' + ($data) + ' === 0 || ' + ($data) + ' === null) ' + ($coerced) + ' = false; else if (' + ($data) + ' === \'true\' || ' + ($data) + ' === 1) ' + ($coerced) + ' = true; ';
-            } else if ($type == 'null') {
-              out += ' if (' + ($data) + ' === \'\' || ' + ($data) + ' === 0 || ' + ($data) + ' === false) ' + ($coerced) + ' = null; ';
-            } else if (it.opts.coerceTypes == 'array' && $type == 'array') {
-              out += ' if (' + ($dataType) + ' == \'string\' || ' + ($dataType) + ' == \'number\' || ' + ($dataType) + ' == \'boolean\' || ' + ($data) + ' == null) ' + ($coerced) + ' = [' + ($data) + ']; ';
-            }
-          }
-        }
-        out += ' ' + ($bracesCoercion) + ' if (' + ($coerced) + ' === undefined) {   ';
-        var $$outStack = $$outStack || [];
-        $$outStack.push(out);
-        out = ''; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ($errorKeyword || 'type') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { type: \'';
-          if ($typeIsArray) {
-            out += '' + ($typeSchema.join(","));
-          } else {
-            out += '' + ($typeSchema);
-          }
-          out += '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'should be ';
-            if ($typeIsArray) {
-              out += '' + ($typeSchema.join(","));
-            } else {
-              out += '' + ($typeSchema);
-            }
-            out += '\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        var __err = out;
-        out = $$outStack.pop();
-        if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-          if (it.async) {
-            out += ' throw new ValidationError([' + (__err) + ']); ';
-          } else {
-            out += ' validate.errors = [' + (__err) + ']; return false; ';
-          }
-        } else {
-          out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-        }
-        out += ' } else {  ';
-        var $parentData = $dataLvl ? 'data' + (($dataLvl - 1) || '') : 'parentData',
-          $parentDataProperty = $dataLvl ? it.dataPathArr[$dataLvl] : 'parentDataProperty';
-        out += ' ' + ($data) + ' = ' + ($coerced) + '; ';
-        if (!$dataLvl) {
-          out += 'if (' + ($parentData) + ' !== undefined)';
-        }
-        out += ' ' + ($parentData) + '[' + ($parentDataProperty) + '] = ' + ($coerced) + '; } ';
-      } else {
-        var $$outStack = $$outStack || [];
-        $$outStack.push(out);
-        out = ''; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ($errorKeyword || 'type') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { type: \'';
-          if ($typeIsArray) {
-            out += '' + ($typeSchema.join(","));
-          } else {
-            out += '' + ($typeSchema);
-          }
-          out += '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'should be ';
-            if ($typeIsArray) {
-              out += '' + ($typeSchema.join(","));
-            } else {
-              out += '' + ($typeSchema);
-            }
-            out += '\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        var __err = out;
-        out = $$outStack.pop();
-        if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-          if (it.async) {
-            out += ' throw new ValidationError([' + (__err) + ']); ';
-          } else {
-            out += ' validate.errors = [' + (__err) + ']; return false; ';
-          }
-        } else {
-          out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-        }
-      }
-      out += ' } ';
-    }
-  }
-  if (it.schema.$ref && !$refKeywords) {
-    out += ' ' + (it.RULES.all.$ref.code(it, '$ref')) + ' ';
-    if ($breakOnError) {
-      out += ' } if (errors === ';
-      if ($top) {
-        out += '0';
-      } else {
-        out += 'errs_' + ($lvl);
-      }
-      out += ') { ';
-      $closingBraces2 += '}';
-    }
-  } else {
-    if (it.opts.v5 && it.schema.patternGroups) {
-      it.logger.warn('keyword "patternGroups" is deprecated and disabled. Use option patternGroups: true to enable.');
-    }
-    var arr2 = it.RULES;
-    if (arr2) {
-      var $rulesGroup, i2 = -1,
-        l2 = arr2.length - 1;
-      while (i2 < l2) {
-        $rulesGroup = arr2[i2 += 1];
-        if ($shouldUseGroup($rulesGroup)) {
-          if ($rulesGroup.type) {
-            out += ' if (' + (it.util.checkDataType($rulesGroup.type, $data)) + ') { ';
-          }
-          if (it.opts.useDefaults && !it.compositeRule) {
-            if ($rulesGroup.type == 'object' && it.schema.properties) {
-              var $schema = it.schema.properties,
-                $schemaKeys = Object.keys($schema);
-              var arr3 = $schemaKeys;
-              if (arr3) {
-                var $propertyKey, i3 = -1,
-                  l3 = arr3.length - 1;
-                while (i3 < l3) {
-                  $propertyKey = arr3[i3 += 1];
-                  var $sch = $schema[$propertyKey];
-                  if ($sch.default !== undefined) {
-                    var $passData = $data + it.util.getProperty($propertyKey);
-                    out += '  if (' + ($passData) + ' === undefined) ' + ($passData) + ' = ';
-                    if (it.opts.useDefaults == 'shared') {
-                      out += ' ' + (it.useDefault($sch.default)) + ' ';
-                    } else {
-                      out += ' ' + (JSON.stringify($sch.default)) + ' ';
-                    }
-                    out += '; ';
-                  }
-                }
-              }
-            } else if ($rulesGroup.type == 'array' && Array.isArray(it.schema.items)) {
-              var arr4 = it.schema.items;
-              if (arr4) {
-                var $sch, $i = -1,
-                  l4 = arr4.length - 1;
-                while ($i < l4) {
-                  $sch = arr4[$i += 1];
-                  if ($sch.default !== undefined) {
-                    var $passData = $data + '[' + $i + ']';
-                    out += '  if (' + ($passData) + ' === undefined) ' + ($passData) + ' = ';
-                    if (it.opts.useDefaults == 'shared') {
-                      out += ' ' + (it.useDefault($sch.default)) + ' ';
-                    } else {
-                      out += ' ' + (JSON.stringify($sch.default)) + ' ';
-                    }
-                    out += '; ';
-                  }
-                }
-              }
-            }
-          }
-          var arr5 = $rulesGroup.rules;
-          if (arr5) {
-            var $rule, i5 = -1,
-              l5 = arr5.length - 1;
-            while (i5 < l5) {
-              $rule = arr5[i5 += 1];
-              if ($shouldUseRule($rule)) {
-                var $code = $rule.code(it, $rule.keyword, $rulesGroup.type);
-                if ($code) {
-                  out += ' ' + ($code) + ' ';
-                  if ($breakOnError) {
-                    $closingBraces1 += '}';
-                  }
-                }
-              }
-            }
-          }
-          if ($breakOnError) {
-            out += ' ' + ($closingBraces1) + ' ';
-            $closingBraces1 = '';
-          }
-          if ($rulesGroup.type) {
-            out += ' } ';
-            if ($typeSchema && $typeSchema === $rulesGroup.type && !$coerceToTypes) {
-              out += ' else { ';
-              var $schemaPath = it.schemaPath + '.type',
-                $errSchemaPath = it.errSchemaPath + '/type';
-              var $$outStack = $$outStack || [];
-              $$outStack.push(out);
-              out = ''; /* istanbul ignore else */
-              if (it.createErrors !== false) {
-                out += ' { keyword: \'' + ($errorKeyword || 'type') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { type: \'';
-                if ($typeIsArray) {
-                  out += '' + ($typeSchema.join(","));
-                } else {
-                  out += '' + ($typeSchema);
-                }
-                out += '\' } ';
-                if (it.opts.messages !== false) {
-                  out += ' , message: \'should be ';
-                  if ($typeIsArray) {
-                    out += '' + ($typeSchema.join(","));
-                  } else {
-                    out += '' + ($typeSchema);
-                  }
-                  out += '\' ';
-                }
-                if (it.opts.verbose) {
-                  out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-                }
-                out += ' } ';
-              } else {
-                out += ' {} ';
-              }
-              var __err = out;
-              out = $$outStack.pop();
-              if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-                if (it.async) {
-                  out += ' throw new ValidationError([' + (__err) + ']); ';
-                } else {
-                  out += ' validate.errors = [' + (__err) + ']; return false; ';
-                }
-              } else {
-                out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-              }
-              out += ' } ';
-            }
-          }
-          if ($breakOnError) {
-            out += ' if (errors === ';
-            if ($top) {
-              out += '0';
-            } else {
-              out += 'errs_' + ($lvl);
-            }
-            out += ') { ';
-            $closingBraces2 += '}';
-          }
-        }
-      }
-    }
-  }
-  if ($breakOnError) {
-    out += ' ' + ($closingBraces2) + ' ';
-  }
-  if ($top) {
-    if ($async) {
-      out += ' if (errors === 0) return data;           ';
-      out += ' else throw new ValidationError(vErrors); ';
-    } else {
-      out += ' validate.errors = vErrors; ';
-      out += ' return errors === 0;       ';
-    }
-    out += ' }); return validate;';
-  } else {
-    out += ' var ' + ($valid) + ' = errors === errs_' + ($lvl) + ';';
-  }
-  out = it.util.cleanUpCode(out);
-  if ($top) {
-    out = it.util.finalCleanUpCode(out, $async);
-  }
-
-  function $shouldUseGroup($rulesGroup) {
-    var rules = $rulesGroup.rules;
-    for (var i = 0; i < rules.length; i++)
-      if ($shouldUseRule(rules[i])) return true;
-  }
-
-  function $shouldUseRule($rule) {
-    return it.schema[$rule.keyword] !== undefined || ($rule.implements && $ruleImplementsSomeKeyword($rule));
-  }
-
-  function $ruleImplementsSomeKeyword($rule) {
-    var impl = $rule.implements;
-    for (var i = 0; i < impl.length; i++)
-      if (it.schema[impl[i]] !== undefined) return true;
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 345 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(509)().Promise
-
-
-/***/ }),
-/* 346 */
-/***/ (function(module, exports) {
-
-// API
-module.exports = abort;
-
-/**
- * Aborts leftover active jobs
- *
- * @param {object} state - current state object
- */
-function abort(state)
-{
-  Object.keys(state.jobs).forEach(clean.bind(state));
-
-  // reset leftover jobs
-  state.jobs = {};
-}
-
-/**
- * Cleans up leftover job by invoking abort function for the provided job id
- *
- * @this  state
- * @param {string|number} key - job id to abort
- */
-function clean(key)
-{
-  if (typeof this.jobs[key] == 'function')
-  {
-    this.jobs[key]();
-  }
-}
-
-
-/***/ }),
-/* 347 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var defer = __webpack_require__(518);
-
-// API
-module.exports = async;
-
-/**
- * Runs provided callback asynchronously
- * even if callback itself is not
- *
- * @param   {function} callback - callback to invoke
- * @returns {function} - augmented callback
- */
-function async(callback)
-{
-  var isAsync = false;
-
-  // check if async happened
-  defer(function() { isAsync = true; });
-
-  return function async_callback(err, result)
-  {
-    if (isAsync)
-    {
-      callback(err, result);
-    }
-    else
-    {
-      defer(function nextTick_callback()
-      {
-        callback(err, result);
-      });
-    }
-  };
-}
-
-
-/***/ }),
-/* 348 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var async = __webpack_require__(347)
-  , abort = __webpack_require__(346)
-  ;
-
-// API
-module.exports = iterate;
-
-/**
- * Iterates over each job object
- *
- * @param {array|object} list - array or object (named list) to iterate over
- * @param {function} iterator - iterator to run
- * @param {object} state - current job status
- * @param {function} callback - invoked when all elements processed
- */
-function iterate(list, iterator, state, callback)
-{
-  // store current index
-  var key = state['keyedList'] ? state['keyedList'][state.index] : state.index;
-
-  state.jobs[key] = runJob(iterator, key, list[key], function(error, output)
-  {
-    // don't repeat yourself
-    // skip secondary callbacks
-    if (!(key in state.jobs))
-    {
-      return;
-    }
-
-    // clean up jobs
-    delete state.jobs[key];
-
-    if (error)
-    {
-      // don't process rest of the results
-      // stop still active jobs
-      // and reset the list
-      abort(state);
-    }
-    else
-    {
-      state.results[key] = output;
-    }
-
-    // return salvaged results
-    callback(error, state.results);
-  });
-}
-
-/**
- * Runs iterator over provided job element
- *
- * @param   {function} iterator - iterator to invoke
- * @param   {string|number} key - key/index of the element in the list of jobs
- * @param   {mixed} item - job description
- * @param   {function} callback - invoked after iterator is done with the job
- * @returns {function|mixed} - job abort function or something else
- */
-function runJob(iterator, key, item, callback)
-{
-  var aborter;
-
-  // allow shortcut if iterator expects only two arguments
-  if (iterator.length == 2)
-  {
-    aborter = iterator(item, async(callback));
-  }
-  // otherwise go with full three arguments
-  else
-  {
-    aborter = iterator(item, key, async(callback));
-  }
-
-  return aborter;
-}
-
-
-/***/ }),
-/* 349 */
-/***/ (function(module, exports) {
-
-// API
-module.exports = state;
-
-/**
- * Creates initial state object
- * for iteration over list
- *
- * @param   {array|object} list - list to iterate over
- * @param   {function|null} sortMethod - function to use for keys sort,
- *                                     or `null` to keep them as is
- * @returns {object} - initial state object
- */
-function state(list, sortMethod)
-{
-  var isNamedList = !Array.isArray(list)
-    , initState =
-    {
-      index    : 0,
-      keyedList: isNamedList || sortMethod ? Object.keys(list) : null,
-      jobs     : {},
-      results  : isNamedList ? {} : [],
-      size     : isNamedList ? Object.keys(list).length : list.length
-    }
-    ;
-
-  if (sortMethod)
-  {
-    // sort array keys based on it's values
-    // sort object's keys just on own merit
-    initState.keyedList.sort(isNamedList ? sortMethod : function(a, b)
-    {
-      return sortMethod(list[a], list[b]);
-    });
-  }
-
-  return initState;
-}
-
-
-/***/ }),
-/* 350 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var abort = __webpack_require__(346)
-  , async = __webpack_require__(347)
-  ;
-
-// API
-module.exports = terminator;
-
-/**
- * Terminates jobs in the attached state context
- *
- * @this  AsyncKitState#
- * @param {function} callback - final callback to invoke after termination
- */
-function terminator(callback)
-{
-  if (!Object.keys(this.jobs).length)
-  {
-    return;
-  }
-
-  // fast forward iteration index
-  this.index = this.size;
-
-  // abort jobs
-  abort(this);
-
-  // send back results we have so far
-  async(callback)(null, this.results);
-}
-
-
-/***/ }),
-/* 351 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var iterate    = __webpack_require__(348)
-  , initState  = __webpack_require__(349)
-  , terminator = __webpack_require__(350)
-  ;
-
-// Public API
-module.exports = serialOrdered;
-// sorting helpers
-module.exports.ascending  = ascending;
-module.exports.descending = descending;
-
-/**
- * Runs iterator over provided sorted array elements in series
- *
- * @param   {array|object} list - array or object (named list) to iterate over
- * @param   {function} iterator - iterator to run
- * @param   {function} sortMethod - custom sort function
- * @param   {function} callback - invoked when all elements processed
- * @returns {function} - jobs terminator
- */
-function serialOrdered(list, iterator, sortMethod, callback)
-{
-  var state = initState(list, sortMethod);
-
-  iterate(list, iterator, state, function iteratorHandler(error, result)
-  {
-    if (error)
-    {
-      callback(error, result);
-      return;
-    }
-
-    state.index++;
-
-    // are we there yet?
-    if (state.index < (state['keyedList'] || list).length)
-    {
-      iterate(list, iterator, state, iteratorHandler);
-      return;
-    }
-
-    // done here
-    callback(null, state.results);
-  });
-
-  return terminator.bind(state, callback);
-}
-
-/*
- * -- Sort methods
- */
-
-/**
- * sort helper to sort array elements in ascending order
- *
- * @param   {mixed} a - an item to compare
- * @param   {mixed} b - an item to compare
- * @returns {number} - comparison result
- */
-function ascending(a, b)
-{
-  return a < b ? -1 : a > b ? 1 : 0;
-}
-
-/**
- * sort helper to sort array elements in descending order
- *
- * @param   {mixed} a - an item to compare
- * @param   {mixed} b - an item to compare
- * @returns {number} - comparison result
- */
-function descending(a, b)
-{
-  return -1 * ascending(a, b);
-}
-
-
-/***/ }),
-/* 352 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = {
-  'upgrade-interactive': 'upgradeInteractive',
-  'generate-lock-entry': 'generateLockEntry'
-};
-
-/***/ }),
-/* 353 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const DEFAULT_LOG_LEVEL = 'info';
-    const audit = new Audit(config, reporter, {
-      groups: flags.groups || (_constants || _load_constants()).OWNED_DEPENDENCY_TYPES,
-      level: flags.level || DEFAULT_LOG_LEVEL
-    });
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-    const install = new (_install || _load_install()).Install({}, config, reporter, lockfile);
-
-    var _ref2 = yield install.fetchRequestFromCwd();
-
-    const manifest = _ref2.manifest,
-          requests = _ref2.requests,
-          patterns = _ref2.patterns,
-          workspaceLayout = _ref2.workspaceLayout;
-
-    yield install.resolver.init(requests, {
-      workspaceLayout
-    });
-
-    const vulnerabilities = yield audit.performAudit(manifest, lockfile, install.resolver, install.linker, patterns);
-
-    const EXIT_INFO = 1;
-    const EXIT_LOW = 2;
-    const EXIT_MODERATE = 4;
-    const EXIT_HIGH = 8;
-    const EXIT_CRITICAL = 16;
-
-    const exitCode = (vulnerabilities.info ? EXIT_INFO : 0) + (vulnerabilities.low ? EXIT_LOW : 0) + (vulnerabilities.moderate ? EXIT_MODERATE : 0) + (vulnerabilities.high ? EXIT_HIGH : 0) + (vulnerabilities.critical ? EXIT_CRITICAL : 0);
-
-    if (flags.summary) {
-      audit.summary();
-    } else {
-      audit.report();
-    }
-
-    return exitCode;
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _promise;
-
-function _load_promise() {
-  return _promise = __webpack_require__(50);
-}
-
-var _hoistedTreeBuilder;
-
-function _load_hoistedTreeBuilder() {
-  return _hoistedTreeBuilder = __webpack_require__(554);
-}
-
-var _getTransitiveDevDependencies;
-
-function _load_getTransitiveDevDependencies() {
-  return _getTransitiveDevDependencies = __webpack_require__(580);
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const zlib = __webpack_require__(198);
-
-const gzip = (0, (_promise || _load_promise()).promisify)(zlib.gzip);
-
-function setFlags(commander) {
-  commander.description('Checks for known security issues with the installed packages.');
-  commander.option('--summary', 'Only print the summary.');
-  commander.option('--groups <group_name> [<group_name> ...]', `Only audit dependencies from listed groups. Default: ${(_constants || _load_constants()).OWNED_DEPENDENCY_TYPES.join(', ')}`, groups => groups.split(' '), (_constants || _load_constants()).OWNED_DEPENDENCY_TYPES);
-  commander.option('--level <severity>', `Only print advisories with severity greater than or equal to one of the following: \
-    info|low|moderate|high|critical. Default: info`, 'info');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-class Audit {
-
-  constructor(config, reporter, options) {
-    this.severityLevels = ['info', 'low', 'moderate', 'high', 'critical'];
-
-    this.config = config;
-    this.reporter = reporter;
-    this.options = options;
-  }
-
-  _mapHoistedNodes(auditNode, hoistedNodes, transitiveDevDeps) {
-    for (var _iterator = hoistedNodes, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref3;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref3 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref3 = _i.value;
-      }
-
-      const node = _ref3;
-
-      const pkg = node.manifest.pkg;
-      const requires = Object.assign({}, pkg.dependencies || {}, pkg.optionalDependencies || {});
-      for (var _iterator2 = Object.keys(requires), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref4 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref4 = _i2.value;
-        }
-
-        const name = _ref4;
-
-        if (!requires[name]) {
-          requires[name] = '*';
-        }
-      }
-      auditNode.dependencies[node.name] = {
-        version: node.version,
-        integrity: pkg._remote ? pkg._remote.integrity || '' : '',
-        requires,
-        dependencies: {},
-        dev: transitiveDevDeps.has(`${node.name}@${node.version}`)
-      };
-      if (node.children) {
-        this._mapHoistedNodes(auditNode.dependencies[node.name], node.children, transitiveDevDeps);
-      }
-    }
-  }
-
-  _mapHoistedTreesToAuditTree(manifest, hoistedTrees, transitiveDevDeps) {
-    const requiresGroups = this.options.groups.map(function (group) {
-      return manifest[group] || {};
-    });
-
-    const auditTree = {
-      name: manifest.name || undefined,
-      version: manifest.version || undefined,
-      install: [],
-      remove: [],
-      metadata: {
-        //TODO: What do we send here? npm sends npm version, node version, etc.
-      },
-      requires: Object.assign({}, ...requiresGroups),
-      integrity: undefined,
-      dependencies: {},
-      dev: false
-    };
-
-    this._mapHoistedNodes(auditTree, hoistedTrees, transitiveDevDeps);
-    return auditTree;
-  }
-
-  _fetchAudit(auditTree) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let responseJson;
-      const registry = (_constants || _load_constants()).YARN_REGISTRY;
-      _this.reporter.verbose(`Audit Request: ${JSON.stringify(auditTree, null, 2)}`);
-      const requestBody = yield gzip(JSON.stringify(auditTree));
-      const response = yield _this.config.requestManager.request({
-        url: `${registry}/-/npm/v1/security/audits`,
-        method: 'POST',
-        body: requestBody,
-        headers: {
-          'Content-Encoding': 'gzip',
-          'Content-Type': 'application/json',
-          Accept: 'application/json'
-        }
-      });
-
-      try {
-        responseJson = JSON.parse(response);
-      } catch (ex) {
-        throw new Error(`Unexpected audit response (Invalid JSON): ${response}`);
-      }
-      if (!responseJson.metadata) {
-        throw new Error(`Unexpected audit response (Missing Metadata): ${JSON.stringify(responseJson, null, 2)}`);
-      }
-      _this.reporter.verbose(`Audit Response: ${JSON.stringify(responseJson, null, 2)}`);
-      return responseJson;
-    })();
-  }
-
-  _insertWorkspacePackagesIntoManifest(manifest, resolver) {
-    if (resolver.workspaceLayout) {
-      const workspaceAggregatorName = resolver.workspaceLayout.virtualManifestName;
-      const workspaceManifest = resolver.workspaceLayout.workspaces[workspaceAggregatorName].manifest;
-
-      manifest.dependencies = Object.assign(manifest.dependencies || {}, workspaceManifest.dependencies);
-      manifest.devDependencies = Object.assign(manifest.devDependencies || {}, workspaceManifest.devDependencies);
-      manifest.optionalDependencies = Object.assign(manifest.optionalDependencies || {}, workspaceManifest.optionalDependencies);
-    }
-  }
-
-  performAudit(manifest, lockfile, resolver, linker, patterns) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this2._insertWorkspacePackagesIntoManifest(manifest, resolver);
-      const transitiveDevDeps = (0, (_getTransitiveDevDependencies || _load_getTransitiveDevDependencies()).getTransitiveDevDependencies)(manifest, resolver.workspaceLayout, lockfile);
-      const hoistedTrees = yield (0, (_hoistedTreeBuilder || _load_hoistedTreeBuilder()).buildTree)(resolver, linker, patterns);
-      const auditTree = _this2._mapHoistedTreesToAuditTree(manifest, hoistedTrees, transitiveDevDeps);
-      _this2.auditData = yield _this2._fetchAudit(auditTree);
-      return _this2.auditData.metadata.vulnerabilities;
-    })();
-  }
-
-  summary() {
-    if (!this.auditData) {
-      return;
-    }
-    this.reporter.auditSummary(this.auditData.metadata);
-  }
-
-  report() {
-    if (!this.auditData) {
-      return;
-    }
-
-    const startLoggingAt = Math.max(0, this.severityLevels.indexOf(this.options.level));
-
-    const reportAdvisory = resolution => {
-      const advisory = this.auditData.advisories[resolution.id.toString()];
-
-      if (this.severityLevels.indexOf(advisory.severity) >= startLoggingAt) {
-        this.reporter.auditAdvisory(resolution, advisory);
-      }
-    };
-
-    if (Object.keys(this.auditData.advisories).length !== 0) {
-      // let printedManualReviewHeader = false;
-
-      this.auditData.actions.forEach(action => {
-        action.resolves.forEach(reportAdvisory);
-
-        /* The following block has been temporarily removed
-         * because the actions returned by npm are not valid for yarn.
-         * Removing this action reporting until we can come up with a way
-         * to correctly resolve issues.
-         */
-        // if (action.action === 'update' || action.action === 'install') {
-        //   // these advisories can be resolved automatically by running a yarn command
-        //   const recommendation: AuditActionRecommendation = {
-        //     cmd: `yarn upgrade ${action.module}@${action.target}`,
-        //     isBreaking: action.isMajor,
-        //     action,
-        //   };
-        //   this.reporter.auditAction(recommendation);
-        //   action.resolves.forEach(reportAdvisory);
-        // }
-
-        // if (action.action === 'review') {
-        //   // these advisories cannot be resolved automatically and require manual review
-        //   if (!printedManualReviewHeader) {
-        //     this.reporter.auditManualReview();
-        //   }
-        //   printedManualReviewHeader = true;
-        //   action.resolves.forEach(reportAdvisory);
-        // }
-      });
-    }
-
-    this.summary();
-  }
-}
-exports.default = Audit;
-
-/***/ }),
-/* 354 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.clean = exports.noArguments = exports.requireLockfile = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let clean = exports.clean = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter) {
-    const loc = path.join(config.lockfileFolder, (_constants || _load_constants()).CLEAN_FILENAME);
-    const file = yield (_fs || _load_fs()).readFile(loc);
-    const lines = file.split('\n');
-    const filters = (0, (_filter || _load_filter()).ignoreLinesToRegex)(lines);
-
-    let removedFiles = 0;
-    let removedSize = 0;
-
-    // build list of possible module folders
-    const locs = new Set();
-    for (var _iterator = config.registryFolders, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const registryFolder = _ref2;
-
-      locs.add(path.resolve(config.lockfileFolder, registryFolder));
-    }
-
-    const workspaceRootFolder = config.workspaceRootFolder;
-    if (workspaceRootFolder) {
-      const manifest = yield config.findManifest(workspaceRootFolder, false);
-      invariant(manifest && manifest.workspaces, 'We must find a manifest with a "workspaces" property');
-
-      const workspaces = yield config.resolveWorkspaces(workspaceRootFolder, manifest);
-
-      for (var _iterator2 = Object.keys(workspaces), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const workspaceName = _ref3;
-
-        for (var _iterator3 = (_index || _load_index()).registryNames, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-          var _ref4;
-
-          if (_isArray3) {
-            if (_i3 >= _iterator3.length) break;
-            _ref4 = _iterator3[_i3++];
-          } else {
-            _i3 = _iterator3.next();
-            if (_i3.done) break;
-            _ref4 = _i3.value;
-          }
-
-          const name = _ref4;
-
-          const registry = config.registries[name];
-          locs.add(path.join(workspaces[workspaceName].loc, registry.folder));
-        }
-      }
-    }
-
-    for (var _iterator4 = locs, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref5 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref5 = _i4.value;
-      }
-
-      const folder = _ref5;
-
-      if (!(yield (_fs || _load_fs()).exists(folder))) {
-        continue;
-      }
-
-      const spinner = reporter.activity();
-      const files = yield (_fs || _load_fs()).walk(folder);
-
-      var _sortFilter = (0, (_filter || _load_filter()).sortFilter)(files, filters);
-
-      const ignoreFiles = _sortFilter.ignoreFiles;
-
-      spinner.end();
-
-      const tick = reporter.progress(ignoreFiles.size);
-      // TODO make sure `main` field of all modules isn't ignored
-
-      for (var _iterator5 = ignoreFiles, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray5) {
-          if (_i5 >= _iterator5.length) break;
-          _ref6 = _iterator5[_i5++];
-        } else {
-          _i5 = _iterator5.next();
-          if (_i5.done) break;
-          _ref6 = _i5.value;
-        }
-
-        const file = _ref6;
-
-        const loc = path.join(folder, file);
-        const stat = yield (_fs || _load_fs()).lstat(loc);
-        removedSize += stat.size;
-        removedFiles++;
-      }
-
-      for (var _iterator6 = ignoreFiles, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray6) {
-          if (_i6 >= _iterator6.length) break;
-          _ref7 = _iterator6[_i6++];
-        } else {
-          _i6 = _iterator6.next();
-          if (_i6.done) break;
-          _ref7 = _i6.value;
-        }
-
-        const file = _ref7;
-
-        const loc = path.join(folder, file);
-        yield (_fs || _load_fs()).unlink(loc);
-        tick();
-      }
-    }
-
-    return { removedFiles, removedSize };
-  });
-
-  return function clean(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let runInit = (() => {
-  var _ref8 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (cwd, reporter) {
-    reporter.step(1, 1, reporter.lang('cleanCreatingFile', (_constants || _load_constants()).CLEAN_FILENAME));
-    const cleanLoc = path.join(cwd, (_constants || _load_constants()).CLEAN_FILENAME);
-    yield (_fs || _load_fs()).writeFile(cleanLoc, `${DEFAULT_FILTER}\n`, { flag: 'wx' });
-    reporter.info(reporter.lang('cleanCreatedFile', (_constants || _load_constants()).CLEAN_FILENAME));
-  });
-
-  return function runInit(_x3, _x4) {
-    return _ref8.apply(this, arguments);
-  };
-})();
-
-let runAutoClean = (() => {
-  var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter) {
-    reporter.step(1, 1, reporter.lang('cleaning'));
-
-    var _ref10 = yield clean(config, reporter);
-
-    const removedFiles = _ref10.removedFiles,
-          removedSize = _ref10.removedSize;
-
-    reporter.info(reporter.lang('cleanRemovedFiles', removedFiles));
-    reporter.info(reporter.lang('cleanSavedSize', Number((removedSize / 1024 / 1024).toFixed(2))));
-  });
-
-  return function runAutoClean(_x5, _x6) {
-    return _ref9.apply(this, arguments);
-  };
-})();
-
-let checkForCleanFile = (() => {
-  var _ref11 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (cwd) {
-    const cleanLoc = path.join(cwd, (_constants || _load_constants()).CLEAN_FILENAME);
-    const exists = yield (_fs || _load_fs()).exists(cleanLoc);
-    return exists;
-  });
-
-  return function checkForCleanFile(_x7) {
-    return _ref11.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref12 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const cleanFileExists = yield checkForCleanFile(config.cwd);
-
-    if (flags.init && cleanFileExists) {
-      reporter.info(reporter.lang('cleanAlreadyExists', (_constants || _load_constants()).CLEAN_FILENAME));
-    } else if (flags.init) {
-      yield runInit(config.cwd, reporter);
-    } else if (flags.force && cleanFileExists) {
-      yield runAutoClean(config, reporter);
-    } else if (cleanFileExists) {
-      reporter.info(reporter.lang('cleanRequiresForce', (_constants || _load_constants()).CLEAN_FILENAME));
-    } else {
-      reporter.info(reporter.lang('cleanDoesNotExist', (_constants || _load_constants()).CLEAN_FILENAME));
-    }
-  });
-
-  return function run(_x8, _x9, _x10, _x11) {
-    return _ref12.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(57);
-}
-
-var _filter;
-
-function _load_filter() {
-  return _filter = __webpack_require__(372);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-
-const requireLockfile = exports.requireLockfile = true;
-const noArguments = exports.noArguments = true;
-
-const DEFAULT_FILTER = `
-# test directories
-__tests__
-test
-tests
-powered-test
-
-# asset directories
-docs
-doc
-website
-images
-assets
-
-# examples
-example
-examples
-
-# code coverage directories
-coverage
-.nyc_output
-
-# build scripts
-Makefile
-Gulpfile.js
-Gruntfile.js
-
-# configs
-appveyor.yml
-circle.yml
-codeship-services.yml
-codeship-steps.yml
-wercker.yml
-.tern-project
-.gitattributes
-.editorconfig
-.*ignore
-.eslintrc
-.jshintrc
-.flowconfig
-.documentup.json
-.yarn-metadata.json
-.travis.yml
-
-# misc
-*.md
-`.trim();
-
-function setFlags(commander) {
-  commander.description('Cleans and removes unnecessary files from package dependencies.');
-  commander.usage('autoclean [flags]');
-  commander.option('-I, --init', `Create "${(_constants || _load_constants()).CLEAN_FILENAME}" file with the default entries.`);
-  commander.option('-F, --force', `Run autoclean using the existing "${(_constants || _load_constants()).CLEAN_FILENAME}" file.`);
-}
-
-function hasWrapper(commander) {
-  return true;
-}
-
-/***/ }),
-/* 355 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.run = exports.getCachedPackagesDirs = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getCachedPackagesDirs = exports.getCachedPackagesDirs = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, currentPath) {
-    const results = [];
-    const stat = yield (_fs || _load_fs()).lstat(currentPath);
-
-    if (!stat.isDirectory()) {
-      return results;
-    }
-
-    const folders = yield (_fs || _load_fs()).readdir(currentPath);
-    for (var _iterator = folders, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const folder = _ref2;
-
-      if (folder[0] === '.') {
-        continue;
-      }
-      const packageParentPath = path.join(currentPath, folder, 'node_modules');
-
-      const candidates = yield (_fs || _load_fs()).readdir(packageParentPath);
-      invariant(candidates.length === 1, `There should only be one folder in a package cache (got ${candidates.join(',')} in ${packageParentPath})`);
-
-      for (var _iterator2 = candidates, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const candidate = _ref3;
-
-        const candidatePath = path.join(packageParentPath, candidate);
-        if (candidate.charAt(0) === '@') {
-          const subCandidates = yield (_fs || _load_fs()).readdir(candidatePath);
-          invariant(subCandidates.length === 1, `There should only be one folder in a package cache (got ${subCandidates.join(',')} in ${candidatePath})`);
-
-          for (var _iterator3 = subCandidates, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-            var _ref4;
-
-            if (_isArray3) {
-              if (_i3 >= _iterator3.length) break;
-              _ref4 = _iterator3[_i3++];
-            } else {
-              _i3 = _iterator3.next();
-              if (_i3.done) break;
-              _ref4 = _i3.value;
-            }
-
-            const subCandidate = _ref4;
-
-            const subCandidatePath = path.join(candidatePath, subCandidate);
-            results.push(subCandidatePath);
-          }
-        } else {
-          results.push(candidatePath);
-        }
-      }
-    }
-
-    return results;
-  });
-
-  return function getCachedPackagesDirs(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let getCachedPackages = (() => {
-  var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    const paths = yield getCachedPackagesDirs(config, config.cacheFolder);
-    return _getMetadataWithPath(config.readPackageMetadata.bind(config), paths).then(function (packages) {
-      return packages.filter(function (p) {
-        return !!p;
-      });
-    });
-  });
-
-  return function getCachedPackages(_x3) {
-    return _ref5.apply(this, arguments);
-  };
-})();
-
-let list = (() => {
-  var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const filterOut = function filterOut({ registry, package: manifest, remote } = {}) {
-      if (flags.pattern && !micromatch.contains(manifest.name, flags.pattern)) {
-        return false;
-      }
-      return true;
-    };
-
-    const forReport = function forReport({ registry, package: manifest, remote } = {}) {
-      return [manifest.name, manifest.version, registry, remote && remote.resolved || ''];
-    };
-
-    const packages = yield getCachedPackages(config);
-    const body = packages.filter(filterOut).map(forReport);
-    reporter.table(['Name', 'Version', 'Registry', 'Resolved'], body);
-  });
-
-  return function list(_x4, _x5, _x6, _x7) {
-    return _ref6.apply(this, arguments);
-  };
-})();
-
-let clean = (() => {
-  var _ref7 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (config.cacheFolder) {
-      const activity = reporter.activity();
-
-      if (args.length > 0) {
-        // Clear named packages from cache
-        const packages = yield getCachedPackages(config);
-        const shouldDelete = function shouldDelete({ registry, package: manifest, remote } = {}) {
-          return args.indexOf(manifest.name) !== -1;
-        };
-        const packagesToDelete = packages.filter(shouldDelete);
-
-        for (var _iterator4 = packagesToDelete, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref8;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref8 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref8 = _i4.value;
-          }
-
-          const manifest = _ref8;
-
-          let relativePath = path.relative(config.cacheFolder, manifest._path);
-          while (relativePath && relativePath !== '.') {
-            yield (_fs || _load_fs()).unlink(path.resolve(config.cacheFolder, relativePath));
-            relativePath = path.dirname(relativePath);
-          }
-        }
-
-        activity.end();
-        reporter.success(reporter.lang('clearedPackageFromCache', args[0]));
-      } else {
-        // Clear all cache
-        yield (_fs || _load_fs()).unlink(config._cacheRootFolder);
-        yield (_fs || _load_fs()).mkdirp(config.cacheFolder);
-        activity.end();
-        reporter.success(reporter.lang('clearedCache'));
-      }
-    }
-  });
-
-  return function clean(_x8, _x9, _x10, _x11) {
-    return _ref7.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-const micromatch = __webpack_require__(114);
-
-function hasWrapper(flags, args) {
-  return args[0] !== 'dir';
-}
-
-function _getMetadataWithPath(getMetadataFn, paths) {
-  return Promise.all(paths.map(path => getMetadataFn(path).then(r => {
-    r._path = path;
-    return r;
-  }).catch(error => undefined)));
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('cache', {
-  ls(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      reporter.warn(`\`yarn cache ls\` is deprecated. Please use \`yarn cache list\`.`);
-      yield list(config, reporter, flags, args);
-    })();
-  },
-  list,
-  clean,
-  dir(config, reporter) {
-    reporter.log(config.cacheFolder, { force: true });
-  }
-});
-
-const run = _buildSubCommands.run,
-      _setFlags = _buildSubCommands.setFlags,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.examples = examples;
-function setFlags(commander) {
-  _setFlags(commander);
-  commander.description('Yarn cache list will print out every cached package.');
-  commander.option('--pattern [pattern]', 'filter cached packages by pattern');
-}
-
-/***/ }),
-/* 356 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.verifyTreeCheck = exports.noArguments = exports.requireLockfile = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let verifyTreeCheck = exports.verifyTreeCheck = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    let errCount = 0;
-    function reportError(msg, ...vars) {
-      reporter.error(reporter.lang(msg, ...vars));
-      errCount++;
-    }
-    // check all dependencies recursively without relying on internal resolver
-    const registryName = 'yarn';
-    const registryFolder = config.registryFolders[0];
-    const cwd = config.workspaceRootFolder ? config.lockfileFolder : config.cwd;
-    const rootManifest = yield config.readManifest(cwd, registryName);
-
-    const dependenciesToCheckVersion = [];
-    if (rootManifest.dependencies) {
-      for (const name in rootManifest.dependencies) {
-        const version = rootManifest.dependencies[name];
-        // skip linked dependencies
-        const isLinkedDependency = /^link:/i.test(version) || /^file:/i.test(version) && config.linkFileDependencies;
-        if (isLinkedDependency) {
-          continue;
-        }
-        dependenciesToCheckVersion.push({
-          name,
-          originalKey: name,
-          parentCwd: cwd,
-          version
-        });
-      }
-    }
-    if (rootManifest.devDependencies && !config.production) {
-      for (const name in rootManifest.devDependencies) {
-        const version = rootManifest.devDependencies[name];
-        // skip linked dependencies
-        const isLinkedDependency = /^link:/i.test(version) || /^file:/i.test(version) && config.linkFileDependencies;
-        if (isLinkedDependency) {
-          continue;
-        }
-        dependenciesToCheckVersion.push({
-          name,
-          originalKey: name,
-          parentCwd: cwd,
-          version
-        });
-      }
-    }
-
-    const locationsVisited = new Set();
-    while (dependenciesToCheckVersion.length) {
-      const dep = dependenciesToCheckVersion.shift();
-      const manifestLoc = path.resolve(dep.parentCwd, registryFolder, dep.name);
-      if (locationsVisited.has(manifestLoc + `@${dep.version}`)) {
-        continue;
-      }
-      locationsVisited.add(manifestLoc + `@${dep.version}`);
-      // When plugnplay is enabled, packages aren't copied to the node_modules folder, so this check doesn't make sense
-      // TODO: We ideally should check that the packages are located inside the cache instead
-      if (config.plugnplayEnabled) {
-        continue;
-      }
-      if (!(yield (_fs || _load_fs()).exists(manifestLoc))) {
-        reportError('packageNotInstalled', `${dep.originalKey}`);
-        continue;
-      }
-      if (!(yield (_fs || _load_fs()).exists(path.join(manifestLoc, 'package.json')))) {
-        continue;
-      }
-      const pkg = yield config.readManifest(manifestLoc, registryName);
-      if (semver.validRange(dep.version, config.looseSemver) && !semver.satisfies(pkg.version, dep.version, config.looseSemver)) {
-        reportError('packageWrongVersion', dep.originalKey, dep.version, pkg.version);
-        continue;
-      }
-      const dependencies = pkg.dependencies;
-      if (dependencies) {
-        for (const subdep in dependencies) {
-          const subDepPath = path.resolve(manifestLoc, registryFolder, subdep);
-          let found = false;
-          const relative = path.relative(cwd, subDepPath);
-          const locations = path.normalize(relative).split(registryFolder + path.sep).filter(function (dir) {
-            return !!dir;
-          });
-          locations.pop();
-          while (locations.length >= 0) {
-            let possiblePath;
-            if (locations.length > 0) {
-              possiblePath = path.join(cwd, registryFolder, locations.join(path.sep + registryFolder + path.sep));
-            } else {
-              possiblePath = cwd;
-            }
-            if (yield (_fs || _load_fs()).exists(path.resolve(possiblePath, registryFolder, subdep))) {
-              dependenciesToCheckVersion.push({
-                name: subdep,
-                originalKey: `${dep.originalKey}#${subdep}`,
-                parentCwd: possiblePath,
-                version: dependencies[subdep]
-              });
-              found = true;
-              break;
-            }
-            if (!locations.length) {
-              break;
-            }
-            locations.pop();
-          }
-          if (!found) {
-            reportError('packageNotInstalled', `${dep.originalKey}#${subdep}`);
-          }
-        }
-      }
-    }
-
-    if (errCount > 0) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('foundErrors', errCount));
-    } else {
-      reporter.success(reporter.lang('folderInSync'));
-    }
-  });
-
-  return function verifyTreeCheck(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let integrityHashCheck = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    let errCount = 0;
-    function reportError(msg, ...vars) {
-      reporter.error(reporter.lang(msg, ...vars));
-      errCount++;
-    }
-    const integrityChecker = new (_integrityChecker || _load_integrityChecker()).default(config);
-
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.cwd);
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-
-    // get patterns that are installed when running `yarn install`
-
-    var _ref3 = yield install.fetchRequestFromCwd();
-
-    const patterns = _ref3.patterns,
-          workspaceLayout = _ref3.workspaceLayout;
-
-
-    const match = yield integrityChecker.check(patterns, lockfile.cache, flags, workspaceLayout);
-    for (var _iterator = match.missingPatterns, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref4 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref4 = _i.value;
-      }
-
-      const pattern = _ref4;
-
-      reportError('lockfileNotContainPattern', pattern);
-    }
-    if (match.integrityFileMissing) {
-      reportError('noIntegrityFile');
-    }
-    if (match.integrityMatches === false) {
-      reporter.warn(reporter.lang((_integrityChecker2 || _load_integrityChecker2()).integrityErrors[match.integrityError]));
-      reportError('integrityCheckFailed');
-    }
-
-    if (errCount > 0) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('foundErrors', errCount));
-    } else {
-      reporter.success(reporter.lang('folderInSync'));
-    }
-  });
-
-  return function integrityHashCheck(_x5, _x6, _x7, _x8) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (flags.verifyTree) {
-      yield verifyTreeCheck(config, reporter, flags, args);
-      return;
-    } else if (flags.integrity) {
-      yield integrityHashCheck(config, reporter, flags, args);
-      return;
-    }
-
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.cwd);
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-
-    function humaniseLocation(loc) {
-      const relative = path.relative(path.join(config.cwd, 'node_modules'), loc);
-      const normalized = path.normalize(relative).split(path.sep);
-      return normalized.filter(p => p !== 'node_modules').reduce((result, part) => {
-        const length = result.length;
-        if (length && result[length - 1].startsWith('@') && result[length - 1].indexOf(path.sep) === -1) {
-          result[length - 1] += path.sep + part;
-        } else {
-          result.push(part);
-        }
-        return result;
-      }, []);
-    }
-
-    let warningCount = 0;
-    let errCount = 0;
-    function reportError(msg, ...vars) {
-      reporter.error(reporter.lang(msg, ...vars));
-      errCount++;
-    }
-
-    // get patterns that are installed when running `yarn install`
-
-    var _ref6 = yield install.hydrate();
-
-    const rawPatterns = _ref6.patterns,
-          workspaceLayout = _ref6.workspaceLayout;
-
-    const patterns = yield install.flatten(rawPatterns);
-
-    // check if patterns exist in lockfile
-    for (var _iterator2 = patterns, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref7;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref7 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref7 = _i2.value;
-      }
-
-      const pattern = _ref7;
-
-      if (!lockfile.getLocked(pattern) && (!workspaceLayout || !workspaceLayout.getManifestByPattern(pattern))) {
-        reportError('lockfileNotContainPattern', pattern);
-      }
-    }
-
-    const bundledDeps = {};
-    // check if any of the node_modules are out of sync
-    const res = yield install.linker.getFlatHoistedTree(patterns, workspaceLayout);
-    for (var _iterator3 = res, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref9;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref9 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref9 = _i3.value;
-      }
-
-      const _ref8 = _ref9;
-      const loc = _ref8[0];
-      var _ref8$ = _ref8[1];
-      const originalKey = _ref8$.originalKey;
-      const pkg = _ref8$.pkg;
-      const ignore = _ref8$.ignore;
-
-      if (ignore) {
-        continue;
-      }
-
-      const parts = humaniseLocation(loc);
-
-      // grey out hoisted portions of key
-      let human = originalKey;
-      const hoistedParts = parts.slice();
-      const hoistedKey = parts.join('#');
-      if (human !== hoistedKey) {
-        const humanParts = human.split('#');
-
-        for (let i = 0; i < humanParts.length; i++) {
-          const humanPart = humanParts[i];
-
-          if (hoistedParts[0] === humanPart) {
-            hoistedParts.shift();
-
-            if (i < humanParts.length - 1) {
-              humanParts[i] += '#';
-            }
-          } else {
-            humanParts[i] = reporter.format.dim(`${humanPart}#`);
-          }
-        }
-
-        human = humanParts.join('');
-      }
-
-      // skip unnecessary checks for linked dependencies
-      const remoteType = pkg._reference.remote.type;
-      const isLinkedDependency = remoteType === 'link' || remoteType === 'workspace' || remoteType === 'file' && config.linkFileDependencies;
-      const isResolution = pkg._reference.hint === 'resolution';
-      if (isLinkedDependency || isResolution) {
-        continue;
-      }
-
-      if (!(yield (_fs || _load_fs()).exists(loc))) {
-        if (pkg._reference.optional) {
-          reporter.warn(reporter.lang('optionalDepNotInstalled', human));
-        } else {
-          reportError('packageNotInstalled', human);
-        }
-        continue;
-      }
-
-      const pkgLoc = path.join(loc, 'package.json');
-
-      if (yield (_fs || _load_fs()).exists(pkgLoc)) {
-        const packageJson = yield config.readJson(pkgLoc);
-        packageJson.version = semver.clean(packageJson.version);
-
-        if (pkg.version !== packageJson.version) {
-          // node_modules contains wrong version
-          reportError('packageWrongVersion', human, pkg.version, packageJson.version);
-        }
-
-        const deps = Object.assign({}, packageJson.dependencies, packageJson.peerDependencies);
-        bundledDeps[packageJson.name] = packageJson.bundledDependencies || [];
-
-        for (const name in deps) {
-          const range = deps[name];
-          if (!semver.validRange(range, config.looseSemver)) {
-            continue; // exotic
-          }
-
-          const subHuman = `${human}#${name}@${range}`;
-
-          // find the package that this will resolve to, factoring in hoisting
-          const possibles = [];
-          let depLoc;
-          for (let i = parts.length; i >= 0; i--) {
-            const myParts = parts.slice(0, i).concat(name);
-
-            // build package.json location for this position
-            const myDepPkgLoc = path.join(config.cwd, 'node_modules', myParts.join(`${path.sep}node_modules${path.sep}`));
-
-            possibles.push(myDepPkgLoc);
-          }
-          while (possibles.length) {
-            const myDepPkgLoc = possibles.shift();
-            if (yield (_fs || _load_fs()).exists(myDepPkgLoc)) {
-              depLoc = myDepPkgLoc;
-              break;
-            }
-          }
-          if (!depLoc) {
-            // we'll hit the module not install error above when this module is hit
-            continue;
-          }
-
-          const depPkgLoc = path.join(depLoc, 'package.json');
-
-          if (yield (_fs || _load_fs()).exists(depPkgLoc)) {
-            const depPkg = yield config.readJson(depPkgLoc);
-            const foundHuman = `${humaniseLocation(path.dirname(depPkgLoc)).join('#')}@${depPkg.version}`;
-            if (!semver.satisfies(depPkg.version, range, config.looseSemver)) {
-              // module isn't correct semver
-              const resPattern = install.resolutionMap.find(name, originalKey.split('#'));
-              if (resPattern) {
-                const resHuman = `${human}#${resPattern}`;
-
-                var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(resPattern);
-
-                const resRange = _normalizePattern.range;
-
-
-                if (semver.satisfies(depPkg.version, resRange, config.looseSemver)) {
-                  reporter.warn(reporter.lang('incompatibleResolutionVersion', foundHuman, subHuman));
-                  warningCount++;
-                } else {
-                  reportError('packageDontSatisfy', resHuman, foundHuman);
-                }
-              } else {
-                reportError('packageDontSatisfy', subHuman, foundHuman);
-              }
-
-              continue;
-            }
-
-            // check for modules above us that this could be deduped to
-            for (var _iterator4 = possibles, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-              var _ref10;
-
-              if (_isArray4) {
-                if (_i4 >= _iterator4.length) break;
-                _ref10 = _iterator4[_i4++];
-              } else {
-                _i4 = _iterator4.next();
-                if (_i4.done) break;
-                _ref10 = _i4.value;
-              }
-
-              const loc = _ref10;
-
-              const locPkg = path.join(loc, 'package.json');
-
-              if (!(yield (_fs || _load_fs()).exists(locPkg))) {
-                continue;
-              }
-
-              const packageJson = yield config.readJson(locPkg);
-              const packagePath = originalKey.split('#');
-              const rootDep = packagePath[0];
-              const packageName = packagePath[1] || packageJson.name;
-
-              const bundledDep = bundledDeps[rootDep] && bundledDeps[rootDep].indexOf(packageName) !== -1;
-              if (!bundledDep && (packageJson.version === depPkg.version || semver.satisfies(packageJson.version, range, config.looseSemver) && semver.gt(packageJson.version, depPkg.version, config.looseSemver))) {
-                reporter.warn(reporter.lang('couldBeDeduped', subHuman, packageJson.version, `${humaniseLocation(path.dirname(locPkg)).join('#')}@${packageJson.version}`));
-                warningCount++;
-              }
-              break;
-            }
-          }
-        }
-      }
-    }
-
-    if (warningCount > 1) {
-      reporter.info(reporter.lang('foundWarnings', warningCount));
-    }
-
-    if (errCount > 0) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('foundErrors', errCount));
-    } else {
-      reporter.success(reporter.lang('folderInSync'));
-    }
-  });
-
-  return function run(_x9, _x10, _x11, _x12) {
-    return _ref5.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _integrityChecker;
-
-function _load_integrityChecker() {
-  return _integrityChecker = _interopRequireDefault(__webpack_require__(208));
-}
-
-var _integrityChecker2;
-
-function _load_integrityChecker2() {
-  return _integrityChecker2 = __webpack_require__(208);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const semver = __webpack_require__(22);
-const path = __webpack_require__(0);
-
-const requireLockfile = exports.requireLockfile = false;
-const noArguments = exports.noArguments = true;
-
-function hasWrapper(commander) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Verifies if versions in the current project’s package.json match that of yarn’s lock file.');
-  commander.option('--integrity');
-  commander.option('--verify-tree');
-}
-
-/***/ }),
-/* 357 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.getRegistryFolder = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getRegistryFolder = exports.getRegistryFolder = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, name) {
-    if (config.modulesFolder) {
-      return config.modulesFolder;
-    }
-
-    const src = path.join(config.linkFolder, name);
-
-    var _ref2 = yield config.readManifest(src);
-
-    const _registry = _ref2._registry;
-
-    invariant(_registry, 'expected registry');
-
-    const registryFolder = config.registries[_registry].folder;
-    return path.join(config.cwd, registryFolder);
-  });
-
-  return function getRegistryFolder(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (args.length) {
-      for (var _iterator = args, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref4 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref4 = _i.value;
-        }
-
-        const name = _ref4;
-
-        const src = path.join(config.linkFolder, name);
-
-        if (yield (_fs || _load_fs()).exists(src)) {
-          const folder = yield getRegistryFolder(config, name);
-          const dest = path.join(folder, name);
-
-          yield (_fs || _load_fs()).unlink(dest);
-          yield (_fs || _load_fs()).mkdirp(path.dirname(dest));
-          yield (_fs || _load_fs()).symlink(src, dest);
-          reporter.success(reporter.lang('linkUsing', name));
-        } else {
-          throw new (_errors || _load_errors()).MessageError(reporter.lang('linkMissing', name));
-        }
-      }
-    } else {
-      // add cwd module to the global registry
-      const manifest = yield config.readRootManifest();
-      const name = manifest.name;
-      if (!name) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('unknownPackageName'));
-      }
-
-      const linkLoc = path.join(config.linkFolder, name);
-      if (yield (_fs || _load_fs()).exists(linkLoc)) {
-        reporter.warn(reporter.lang('linkCollision', name));
-      } else {
-        yield (_fs || _load_fs()).mkdirp(path.dirname(linkLoc));
-        yield (_fs || _load_fs()).symlink(config.cwd, linkLoc);
-
-        // If there is a `bin` defined in the package.json,
-        // link each bin to the global bin
-        if (manifest.bin) {
-          const globalBinFolder = yield (0, (_global || _load_global()).getBinFolder)(config, flags);
-          for (const binName in manifest.bin) {
-            const binSrc = manifest.bin[binName];
-            const binSrcLoc = path.join(linkLoc, binSrc);
-            const binDestLoc = path.join(globalBinFolder, binName);
-            if (yield (_fs || _load_fs()).exists(binDestLoc)) {
-              reporter.warn(reporter.lang('binLinkCollision', binName));
-            } else {
-              if (process.platform === 'win32') {
-                yield cmdShim(binSrcLoc, binDestLoc, { createPwshFile: false });
-              } else {
-                yield (_fs || _load_fs()).symlink(binSrcLoc, binDestLoc);
-              }
-            }
-          }
-        }
-
-        reporter.success(reporter.lang('linkRegistered', name));
-        reporter.info(reporter.lang('linkRegisteredMessage', name));
-      }
-    }
-  });
-
-  return function run(_x3, _x4, _x5, _x6) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _global;
-
-function _load_global() {
-  return _global = __webpack_require__(121);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const cmdShim = __webpack_require__(201);
-const path = __webpack_require__(0);
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Symlink a package folder during development.');
-}
-
-/***/ }),
-/* 358 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.buildTree = exports.requireLockfile = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let buildTree = exports.buildTree = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (resolver, linker, patterns, opts, onlyFresh, ignoreHoisted) {
-    const treesByKey = {};
-    const trees = [];
-    const flatTree = yield linker.getFlatHoistedTree(patterns);
-
-    // If using workspaces, filter out the virtual manifest
-    const workspaceLayout = resolver.workspaceLayout;
-
-    const hoisted = workspaceLayout && workspaceLayout.virtualManifestName ? flatTree.filter(function ([key]) {
-      return key.indexOf(workspaceLayout.virtualManifestName) === -1;
-    }) : flatTree;
-
-    const hoistedByKey = {};
-    for (var _iterator2 = hoisted, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref4 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref4 = _i2.value;
-      }
-
-      const _ref3 = _ref4;
-      const key = _ref3[0];
-      const info = _ref3[1];
-
-      hoistedByKey[key] = info;
-    }
-
-    // build initial trees
-    for (var _iterator3 = hoisted, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref6;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref6 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref6 = _i3.value;
-      }
-
-      const _ref5 = _ref6;
-      const info = _ref5[1];
-
-      const ref = info.pkg._reference;
-      const hint = null;
-      const parent = getParent(info.key, treesByKey);
-      const children = [];
-      let depth = 0;
-      let color = 'bold';
-      invariant(ref, 'expected reference');
-
-      if (onlyFresh) {
-        let isFresh = false;
-        for (var _iterator5 = ref.patterns, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-          var _ref9;
-
-          if (_isArray5) {
-            if (_i5 >= _iterator5.length) break;
-            _ref9 = _iterator5[_i5++];
-          } else {
-            _i5 = _iterator5.next();
-            if (_i5.done) break;
-            _ref9 = _i5.value;
-          }
-
-          const pattern = _ref9;
-
-          if (resolver.isNewPattern(pattern)) {
-            isFresh = true;
-            break;
-          }
-        }
-        if (!isFresh) {
-          continue;
-        }
-      }
-
-      if (info.originalKey !== info.key || opts.reqDepth === 0) {
-        // was hoisted
-        color = null;
-      }
-      // check parent to obtain next depth
-      if (parent && parent.depth > 0) {
-        depth = parent.depth + 1;
-      } else {
-        depth = 0;
-      }
-
-      const topLevel = opts.reqDepth === 0 && !parent;
-      const showAll = opts.reqDepth === -1;
-      const nextDepthIsValid = depth + 1 <= Number(opts.reqDepth);
-
-      if (topLevel || nextDepthIsValid || showAll) {
-        treesByKey[info.key] = {
-          name: `${info.pkg.name}@${info.pkg.version}`,
-          children,
-          hint,
-          color,
-          depth
-        };
-      }
-
-      // add in dummy children for hoisted dependencies
-      const nextChildDepthIsValid = depth + 1 < Number(opts.reqDepth);
-      invariant(ref, 'expected reference');
-      if (!ignoreHoisted && nextDepthIsValid || showAll) {
-        for (var _iterator6 = resolver.dedupePatterns(ref.dependencies), _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-          var _ref10;
-
-          if (_isArray6) {
-            if (_i6 >= _iterator6.length) break;
-            _ref10 = _iterator6[_i6++];
-          } else {
-            _i6 = _iterator6.next();
-            if (_i6.done) break;
-            _ref10 = _i6.value;
-          }
-
-          const pattern = _ref10;
-
-          const pkg = resolver.getStrictResolvedPattern(pattern);
-
-          if (!hoistedByKey[`${info.key}#${pkg.name}`] && (nextChildDepthIsValid || showAll)) {
-            children.push({
-              name: pattern,
-              color: 'dim',
-              shadow: true
-            });
-          }
-        }
-      }
-    }
-
-    // add children
-    for (var _iterator4 = hoisted, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref8;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref8 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref8 = _i4.value;
-      }
-
-      const _ref7 = _ref8;
-      const info = _ref7[1];
-
-      const tree = treesByKey[info.key];
-      const parent = getParent(info.key, treesByKey);
-      if (!tree) {
-        continue;
-      }
-
-      if (info.key.split('#').length === 1) {
-        trees.push(tree);
-        continue;
-      }
-
-      if (parent) {
-        parent.children.push(tree);
-      }
-    }
-
-    return { trees, count: buildCount(trees) };
-  });
-
-  return function buildTree(_x, _x2, _x3, _x4, _x5, _x6) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref11 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-
-    var _ref12 = yield install.fetchRequestFromCwd();
-
-    const depRequests = _ref12.requests,
-          patterns = _ref12.patterns,
-          manifest = _ref12.manifest,
-          workspaceLayout = _ref12.workspaceLayout;
-
-    yield install.resolver.init(depRequests, {
-      isFlat: install.flags.flat,
-      isFrozen: install.flags.frozenLockfile,
-      workspaceLayout
-    });
-
-    let activePatterns = [];
-    if (config.production) {
-      const devDeps = getDevDeps(manifest);
-      activePatterns = patterns.filter(function (pattern) {
-        return !devDeps.has(pattern);
-      });
-    } else {
-      activePatterns = patterns;
-    }
-
-    const opts = {
-      reqDepth: getReqDepth(flags.depth)
-    };
-
-    var _ref13 = yield buildTree(install.resolver, install.linker, activePatterns, opts);
-
-    let trees = _ref13.trees;
-
-
-    if (args.length) {
-      reporter.warn(reporter.lang('deprecatedListArgs'));
-    }
-    if (args.length || flags.pattern) {
-      trees = trees.filter(function (tree) {
-        return filterTree(tree, args, flags.pattern);
-      });
-    }
-
-    reporter.tree('list', trees, { force: true });
-  });
-
-  return function run(_x7, _x8, _x9, _x10) {
-    return _ref11.apply(this, arguments);
-  };
-})();
-
-exports.getParent = getParent;
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-exports.getReqDepth = getReqDepth;
-exports.filterTree = filterTree;
-exports.getDevDeps = getDevDeps;
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const micromatch = __webpack_require__(114);
-
-const requireLockfile = exports.requireLockfile = true;
-
-function buildCount(trees) {
-  if (!trees || !trees.length) {
-    return 0;
-  }
-
-  let count = 0;
-
-  for (var _iterator = trees, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const tree = _ref;
-
-    if (tree.shadow) {
-      continue;
-    }
-
-    count++;
-    count += buildCount(tree.children);
-  }
-
-  return count;
-}
-
-function getParent(key, treesByKey) {
-  const parentKey = key.slice(0, key.lastIndexOf('#'));
-  return treesByKey[parentKey];
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Lists installed packages.');
-  commander.option('--depth [depth]', 'Limit the depth of the shown dependencies');
-  commander.option('--pattern [pattern]', 'Filter dependencies by pattern');
-}
-
-function getReqDepth(inputDepth) {
-  return inputDepth && /^\d+$/.test(inputDepth) ? Number(inputDepth) : -1;
-}
-
-function filterTree(tree, filters, pattern = '') {
-  if (tree.children) {
-    tree.children = tree.children.filter(child => filterTree(child, filters, pattern));
-  }
-
-  const notDim = tree.color !== 'dim';
-  const hasChildren = tree.children == null ? false : tree.children.length > 0;
-  const name = tree.name.slice(0, tree.name.lastIndexOf('@'));
-  const found = micromatch.any(name, filters) || micromatch.contains(name, pattern);
-
-  return notDim && (found || hasChildren);
-}
-
-function getDevDeps(manifest) {
-  if (manifest.devDependencies) {
-    return new Set(Object.keys(manifest.devDependencies).map(key => `${key}@${manifest.devDependencies[key]}`));
-  } else {
-    return new Set();
-  }
-}
-
-/***/ }),
-/* 359 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.requireLockfile = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const isWorkspaceRoot = config.workspaceRootFolder && config.cwd === config.workspaceRootFolder;
-
-    if (!args.length) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('tooFewArguments', 1));
-    }
-
-    // running "yarn remove something" in a workspace root is often a mistake
-    if (isWorkspaceRoot && !flags.ignoreWorkspaceRootCheck) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspacesRemoveRootCheck'));
-    }
-
-    const totalSteps = args.length + 1;
-    let step = 0;
-
-    // load manifests
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder);
-    const rootManifests = yield config.getRootManifests();
-    const manifests = [];
-
-    for (var _iterator = args, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const name = _ref2;
-
-      reporter.step(++step, totalSteps, `Removing module ${name}`, emoji.get('wastebasket'));
-
-      let found = false;
-
-      for (var _iterator2 = Object.keys((_index || _load_index()).registries), _isArray2 = Array.isArray(_iterator2), _i3 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i3 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i3++];
-        } else {
-          _i3 = _iterator2.next();
-          if (_i3.done) break;
-          _ref3 = _i3.value;
-        }
-
-        const registryName = _ref3;
-
-        const registry = config.registries[registryName];
-        const object = rootManifests[registryName].object;
-
-        for (var _iterator3 = (_constants || _load_constants()).DEPENDENCY_TYPES, _isArray3 = Array.isArray(_iterator3), _i4 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-          var _ref4;
-
-          if (_isArray3) {
-            if (_i4 >= _iterator3.length) break;
-            _ref4 = _iterator3[_i4++];
-          } else {
-            _i4 = _iterator3.next();
-            if (_i4.done) break;
-            _ref4 = _i4.value;
-          }
-
-          const type = _ref4;
-
-          const deps = object[type];
-          if (deps && deps[name]) {
-            found = true;
-            delete deps[name];
-          }
-        }
-
-        const possibleManifestLoc = path.join(config.cwd, registry.folder, name);
-        if (yield (_fs || _load_fs()).exists(possibleManifestLoc)) {
-          const manifest = yield config.maybeReadManifest(possibleManifestLoc, registryName);
-          if (manifest) {
-            manifests.push([possibleManifestLoc, manifest]);
-          }
-        }
-      }
-
-      if (!found) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('moduleNotInManifest'));
-      }
-    }
-
-    // save manifests
-    yield config.saveRootManifests(rootManifests);
-
-    // run hooks - npm runs these one after another
-    var _arr = ['preuninstall', 'uninstall', 'postuninstall'];
-    for (var _i2 = 0; _i2 < _arr.length; _i2++) {
-      const action = _arr[_i2];
-      for (var _iterator4 = manifests, _isArray4 = Array.isArray(_iterator4), _i5 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray4) {
-          if (_i5 >= _iterator4.length) break;
-          _ref6 = _iterator4[_i5++];
-        } else {
-          _i5 = _iterator4.next();
-          if (_i5.done) break;
-          _ref6 = _i5.value;
-        }
-
-        const _ref5 = _ref6;
-        const loc = _ref5[0];
-
-        yield config.executeLifecycleScript(action, loc);
-      }
-    }
-
-    // reinstall so we can get the updated lockfile
-    reporter.step(++step, totalSteps, reporter.lang('uninstallRegenerate'), emoji.get('hammer'));
-    const installFlags = (0, (_extends2 || _load_extends()).default)({ force: true, workspaceRootIsCwd: true }, flags);
-    const reinstall = new (_install || _load_install()).Install(installFlags, config, new (_index2 || _load_index2()).NoopReporter(), lockfile);
-    yield reinstall.init();
-
-    //
-    reporter.success(reporter.lang('uninstalledPackages'));
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(57);
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _index2;
-
-function _load_index2() {
-  return _index2 = __webpack_require__(200);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-const emoji = __webpack_require__(302);
-
-const requireLockfile = exports.requireLockfile = true;
-
-function setFlags(commander) {
-  commander.description('Removes a package from your direct dependencies updating your package.json and yarn.lock.');
-  commander.usage('remove [packages ...] [flags]');
-  commander.option('-W, --ignore-workspace-root-check', 'required to run yarn remove inside a workspace root');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 360 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.getBinEntries = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getBinEntries = exports.getBinEntries = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    const binFolders = new Set();
-    const binEntries = new Map();
-
-    // Setup the node_modules/.bin folders for analysis
-    for (var _iterator2 = config.registryFolders, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref4 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref4 = _i2.value;
-      }
-
-      const registryFolder = _ref4;
-
-      binFolders.add(path.resolve(config.cwd, registryFolder, '.bin'));
-      binFolders.add(path.resolve(config.lockfileFolder, registryFolder, '.bin'));
-    }
-
-    // Same thing, but for the pnp dependencies, located inside the cache
-    if (yield (_fs || _load_fs()).exists(`${config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`)) {
-      const pnpApi = (0, (_dynamicRequire || _load_dynamicRequire()).dynamicRequire)(`${config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`);
-
-      const packageLocator = pnpApi.findPackageLocator(`${config.cwd}/`);
-      const packageInformation = pnpApi.getPackageInformation(packageLocator);
-
-      for (var _iterator3 = packageInformation.packageDependencies.entries(), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref6 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref6 = _i3.value;
-        }
-
-        const _ref5 = _ref6;
-        const name = _ref5[0];
-        const reference = _ref5[1];
-
-        const dependencyInformation = pnpApi.getPackageInformation({ name, reference });
-
-        if (dependencyInformation.packageLocation) {
-          binFolders.add(`${dependencyInformation.packageLocation}/.bin`);
-        }
-      }
-    }
-
-    // Build up a list of possible scripts by exploring the folders marked for analysis
-    for (var _iterator4 = binFolders, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref7;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref7 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref7 = _i4.value;
-      }
-
-      const binFolder = _ref7;
-
-      if (yield (_fs || _load_fs()).exists(binFolder)) {
-        for (var _iterator5 = yield (_fs || _load_fs()).readdir(binFolder), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-          var _ref8;
-
-          if (_isArray5) {
-            if (_i5 >= _iterator5.length) break;
-            _ref8 = _iterator5[_i5++];
-          } else {
-            _i5 = _iterator5.next();
-            if (_i5.done) break;
-            _ref8 = _i5.value;
-          }
-
-          const name = _ref8;
-
-          binEntries.set(name, path.join(binFolder, name));
-        }
-      }
-    }
-
-    return binEntries;
-  });
-
-  return function getBinEntries(_x) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    let realRunCommand = (() => {
-      var _ref13 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (action, args) {
-        // build up list of commands
-        const cmds = [];
-
-        if (pkgScripts && action in pkgScripts) {
-          const preAction = `pre${action}`;
-          if (preAction in pkgScripts) {
-            cmds.push([preAction, pkgScripts[preAction]]);
-          }
-
-          const script = scripts.get(action);
-          invariant(script, 'Script must exist');
-          cmds.push([action, script]);
-
-          const postAction = `post${action}`;
-          if (postAction in pkgScripts) {
-            cmds.push([postAction, pkgScripts[postAction]]);
-          }
-        } else if (scripts.has(action)) {
-          const script = scripts.get(action);
-          invariant(script, 'Script must exist');
-          cmds.push([action, script]);
-        }
-
-        if (cmds.length) {
-          const ignoreEngines = !!(flags.ignoreEngines || config.getOption('ignore-engines'));
-          try {
-            yield (0, (_packageCompatibility || _load_packageCompatibility()).checkOne)(pkg, config, ignoreEngines);
-          } catch (err) {
-            throw err instanceof (_errors || _load_errors()).MessageError ? new (_errors || _load_errors()).MessageError(reporter.lang('cannotRunWithIncompatibleEnv')) : err;
-          }
-
-          // Disable wrapper in executed commands
-          process.env.YARN_WRAP_OUTPUT = 'false';
-          for (var _iterator8 = cmds, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-            var _ref15;
-
-            if (_isArray8) {
-              if (_i8 >= _iterator8.length) break;
-              _ref15 = _iterator8[_i8++];
-            } else {
-              _i8 = _iterator8.next();
-              if (_i8.done) break;
-              _ref15 = _i8.value;
-            }
-
-            const _ref14 = _ref15;
-            const stage = _ref14[0];
-            const cmd = _ref14[1];
-
-            // only tack on trailing arguments for default script, ignore for pre and post - #1595
-            const cmdWithArgs = stage === action ? sh`${unquoted(cmd)} ${args}` : cmd;
-            const customShell = config.getOption('script-shell');
-            yield (0, (_executeLifecycleScript || _load_executeLifecycleScript()).execCommand)({
-              stage,
-              config,
-              cmd: cmdWithArgs,
-              cwd: flags.into || config.cwd,
-              isInteractive: true,
-              customShell: customShell ? String(customShell) : undefined
-            });
-          }
-        } else if (action === 'env') {
-          reporter.log(JSON.stringify((yield (0, (_executeLifecycleScript || _load_executeLifecycleScript()).makeEnv)('env', config.cwd, config)), null, 2), { force: true });
-        } else {
-          let suggestion;
-
-          for (var _iterator9 = scripts.keys(), _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-            var _ref16;
-
-            if (_isArray9) {
-              if (_i9 >= _iterator9.length) break;
-              _ref16 = _iterator9[_i9++];
-            } else {
-              _i9 = _iterator9.next();
-              if (_i9.done) break;
-              _ref16 = _i9.value;
-            }
-
-            const commandName = _ref16;
-
-            const steps = leven(commandName, action);
-            if (steps < 2) {
-              suggestion = commandName;
-            }
-          }
-
-          let msg = `Command ${JSON.stringify(action)} not found.`;
-          if (suggestion) {
-            msg += ` Did you mean ${JSON.stringify(suggestion)}?`;
-          }
-          throw new (_errors || _load_errors()).MessageError(msg);
-        }
-      });
-
-      return function realRunCommand(_x6, _x7) {
-        return _ref13.apply(this, arguments);
-      };
-    })();
-
-    // list possible scripts if none specified
-
-
-    const pkg = yield config.readManifest(config.cwd);
-
-    const binCommands = new Set();
-    const pkgCommands = new Set();
-
-    const scripts = new Map();
-
-    for (var _iterator6 = yield getBinEntries(config), _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray6) {
-        if (_i6 >= _iterator6.length) break;
-        _ref11 = _iterator6[_i6++];
-      } else {
-        _i6 = _iterator6.next();
-        if (_i6.done) break;
-        _ref11 = _i6.value;
-      }
-
-      const _ref10 = _ref11;
-      const name = _ref10[0];
-      const loc = _ref10[1];
-
-      scripts.set(name, quoteForShell(loc));
-      binCommands.add(name);
-    }
-
-    const pkgScripts = pkg.scripts;
-
-    if (pkgScripts) {
-      for (var _iterator7 = Object.keys(pkgScripts).sort(), _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-        var _ref12;
-
-        if (_isArray7) {
-          if (_i7 >= _iterator7.length) break;
-          _ref12 = _iterator7[_i7++];
-        } else {
-          _i7 = _iterator7.next();
-          if (_i7.done) break;
-          _ref12 = _i7.value;
-        }
-
-        const name = _ref12;
-
-        scripts.set(name, pkgScripts[name] || '');
-        pkgCommands.add(name);
-      }
-    }
-
-    function runCommand([action, ...args]) {
-      return (0, (_hooks || _load_hooks()).callThroughHook)('runScript', () => realRunCommand(action, args), { action, args });
-    }
-
-    if (args.length === 0) {
-      if (binCommands.size > 0) {
-        reporter.info(`${reporter.lang('binCommands') + Array.from(binCommands).join(', ')}`);
-      } else {
-        reporter.error(reporter.lang('noBinAvailable'));
-      }
-
-      const printedCommands = new Map();
-
-      for (var _iterator10 = pkgCommands, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-        var _ref17;
-
-        if (_isArray10) {
-          if (_i10 >= _iterator10.length) break;
-          _ref17 = _iterator10[_i10++];
-        } else {
-          _i10 = _iterator10.next();
-          if (_i10.done) break;
-          _ref17 = _i10.value;
-        }
-
-        const pkgCommand = _ref17;
-
-        const action = scripts.get(pkgCommand);
-        invariant(action, 'Action must exists');
-        printedCommands.set(pkgCommand, action);
-      }
-
-      if (pkgCommands.size > 0) {
-        reporter.info(`${reporter.lang('possibleCommands')}`);
-        reporter.list('possibleCommands', Array.from(pkgCommands), toObject(printedCommands));
-        if (!flags.nonInteractive) {
-          yield reporter.question(reporter.lang('commandQuestion')).then(function (answer) {
-            return runCommand(answer.trim().split(' '));
-          }, function () {
-            return reporter.error(reporter.lang('commandNotSpecified'));
-          });
-        }
-      } else {
-        reporter.error(reporter.lang('noScriptsAvailable'));
-      }
-      return Promise.resolve();
-    } else {
-      return runCommand(args);
-    }
-  });
-
-  return function run(_x2, _x3, _x4, _x5) {
-    return _ref9.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _executeLifecycleScript;
-
-function _load_executeLifecycleScript() {
-  return _executeLifecycleScript = __webpack_require__(111);
-}
-
-var _dynamicRequire;
-
-function _load_dynamicRequire() {
-  return _dynamicRequire = __webpack_require__(371);
-}
-
-var _hooks;
-
-function _load_hooks() {
-  return _hooks = __webpack_require__(374);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _packageCompatibility;
-
-function _load_packageCompatibility() {
-  return _packageCompatibility = __webpack_require__(209);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const leven = __webpack_require__(747);
-const path = __webpack_require__(0);
-
-var _require = __webpack_require__(780);
-
-const quoteForShell = _require.quoteForShell,
-      sh = _require.sh,
-      unquoted = _require.unquoted;
-
-
-function toObject(input) {
-  const output = Object.create(null);
-
-  for (var _iterator = input.entries(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref2 = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref2 = _i.value;
-    }
-
-    const _ref = _ref2;
-    const key = _ref[0];
-    const val = _ref[1];
-
-    output[key] = val;
-  }
-
-  return output;
-}
-
-function setFlags(commander) {
-  commander.description('Runs a defined package script.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 361 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.hasWrapper = exports.run = exports.getName = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getName = exports.getName = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (args, config) {
-    let name = args.shift();
-
-    if (!name) {
-      const pkg = yield config.readRootManifest();
-      name = pkg.name;
-    }
-
-    if (name) {
-      if (!(0, (_validate || _load_validate()).isValidPackageName)(name)) {
-        throw new (_errors || _load_errors()).MessageError(config.reporter.lang('invalidPackageName'));
-      }
-
-      return (_npmRegistry || _load_npmRegistry()).default.escapeName(name);
-    } else {
-      throw new (_errors || _load_errors()).MessageError(config.reporter.lang('unknownPackageName'));
-    }
-  });
-
-  return function getName(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let list = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const name = yield getName(args, config);
-
-    reporter.step(1, 1, reporter.lang('gettingTags'));
-    const tags = yield config.registries.npm.request(`-/package/${name}/dist-tags`);
-
-    if (tags) {
-      reporter.info(`Package ${name}`);
-      for (const name in tags) {
-        reporter.info(`${name}: ${tags[name]}`);
-      }
-    }
-
-    if (!tags) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('packageNotFoundRegistry', name, 'npm'));
-    }
-  });
-
-  return function list(_x3, _x4, _x5, _x6) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let remove = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (args.length !== 2) {
-      return false;
-    }
-
-    const name = yield getName(args, config);
-    const tag = args.shift();
-
-    reporter.step(1, 3, reporter.lang('loggingIn'));
-    const revoke = yield (0, (_login || _load_login()).getToken)(config, reporter, name);
-
-    reporter.step(2, 3, reporter.lang('deletingTags'));
-    const result = yield config.registries.npm.request(`-/package/${name}/dist-tags/${encodeURI(tag)}`, {
-      method: 'DELETE'
-    });
-
-    if (result === false) {
-      reporter.error(reporter.lang('deletedTagFail'));
-    } else {
-      reporter.success(reporter.lang('deletedTag'));
-    }
-
-    reporter.step(3, 3, reporter.lang('revokingToken'));
-    yield revoke();
-
-    if (result === false) {
-      throw new Error();
-    } else {
-      return true;
-    }
-  });
-
-  return function remove(_x7, _x8, _x9, _x10) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _login;
-
-function _load_login() {
-  return _login = __webpack_require__(107);
-}
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-var _validate;
-
-function _load_validate() {
-  return _validate = __webpack_require__(125);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function setFlags(commander) {
-  commander.description('Add, remove, or list tags on a package.');
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('tag', {
-  add(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (args.length !== 2) {
-        return false;
-      }
-
-      var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(args.shift());
-
-      const name = _normalizePattern.name,
-            range = _normalizePattern.range,
-            hasVersion = _normalizePattern.hasVersion;
-
-      if (!hasVersion) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('requiredVersionInRange'));
-      }
-      if (!(0, (_validate || _load_validate()).isValidPackageName)(name)) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidPackageName'));
-      }
-
-      const tag = args.shift();
-
-      reporter.step(1, 3, reporter.lang('loggingIn'));
-      const revoke = yield (0, (_login || _load_login()).getToken)(config, reporter, name);
-
-      reporter.step(2, 3, reporter.lang('creatingTag', tag, range));
-      const result = yield config.registries.npm.request(`-/package/${(_npmRegistry || _load_npmRegistry()).default.escapeName(name)}/dist-tags/${encodeURI(tag)}`, {
-        method: 'PUT',
-        body: range
-      });
-
-      if (result != null && result.ok) {
-        reporter.success(reporter.lang('createdTag'));
-      } else {
-        reporter.error(reporter.lang('createdTagFail'));
-      }
-
-      reporter.step(3, 3, reporter.lang('revokingToken'));
-      yield revoke();
-
-      if (result != null && result.ok) {
-        return true;
-      } else {
-        throw new Error();
-      }
-    })();
-  },
-
-  rm(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      reporter.warn(`\`yarn tag rm\` is deprecated. Please use \`yarn tag remove\`.`);
-      yield remove(config, reporter, flags, args);
-    })();
-  },
-
-  remove(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield remove(config, reporter, flags, args);
-    })();
-  },
-
-  ls(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      reporter.warn(`\`yarn tag ls\` is deprecated. Please use \`yarn tag list\`.`);
-      yield list(config, reporter, flags, args);
-    })();
-  },
-
-  list(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield list(config, reporter, flags, args);
-    })();
-  }
-}, ['add <pkg>@<version> [<tag>]', 'remove <pkg> <tag>', 'list [<pkg>]']);
-
-const run = _buildSubCommands.run,
-      hasWrapper = _buildSubCommands.hasWrapper,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.hasWrapper = hasWrapper;
-exports.examples = examples;
-
-/***/ }),
-/* 362 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.requireLockfile = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const outdatedFieldName = flags.latest ? 'latest' : 'wanted';
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder);
-
-    const deps = yield (0, (_upgrade || _load_upgrade()).getOutdated)(config, reporter, (0, (_extends2 || _load_extends()).default)({}, flags, { includeWorkspaceDeps: true }), lockfile, args);
-
-    if (deps.length === 0) {
-      reporter.success(reporter.lang('allDependenciesUpToDate'));
-      return;
-    }
-
-    // Fail early with runtime compatibility checks so that it doesn't fail after you've made your selections
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-    yield install.checkCompatibility();
-
-    const usesWorkspaces = !!config.workspaceRootFolder;
-
-    const maxLengthArr = {
-      name: 'name'.length,
-      current: 'from'.length,
-      range: 'latest'.length,
-      [outdatedFieldName]: 'to'.length,
-      workspaceName: 'workspace'.length
-    };
-
-    const keysWithDynamicLength = ['name', 'current', outdatedFieldName];
-
-    if (!flags.latest) {
-      maxLengthArr.range = 'range'.length;
-      keysWithDynamicLength.push('range');
-    }
-
-    if (usesWorkspaces) {
-      keysWithDynamicLength.push('workspaceName');
-    }
-
-    deps.forEach(function (dep) {
-      return keysWithDynamicLength.forEach(function (key) {
-        maxLengthArr[key] = Math.max(maxLengthArr[key], dep[key].length);
-      });
-    });
-
-    // Depends on maxLengthArr
-    const addPadding = function addPadding(dep) {
-      return function (key) {
-        return `${dep[key]}${' '.repeat(maxLengthArr[key] - dep[key].length)}`;
-      };
-    };
-    const headerPadding = function headerPadding(header, key) {
-      return `${reporter.format.bold.underline(header)}${' '.repeat(maxLengthArr[key] - header.length)}`;
-    };
-
-    const colorizeName = function colorizeName(from, to) {
-      return reporter.format[(0, (_colorForVersions || _load_colorForVersions()).default)(from, to)];
-    };
-
-    const getNameFromHint = function getNameFromHint(hint) {
-      return hint ? `${hint}Dependencies` : 'dependencies';
-    };
-
-    const makeRow = function makeRow(dep) {
-      const padding = addPadding(dep);
-      const name = colorizeName(dep.current, dep[outdatedFieldName])(padding('name'));
-      const current = reporter.format.blue(padding('current'));
-      const latest = (0, (_colorizeDiff || _load_colorizeDiff()).default)(dep.current, padding(outdatedFieldName), reporter);
-      const url = reporter.format.cyan(dep.url);
-      const range = reporter.format.blue(flags.latest ? 'latest' : padding('range'));
-      if (usesWorkspaces) {
-        const workspace = padding('workspaceName');
-        return `${name}  ${range}  ${current}  ❯  ${latest}  ${workspace}  ${url}`;
-      } else {
-        return `${name}  ${range}  ${current}  ❯  ${latest}  ${url}`;
-      }
-    };
-
-    const makeHeaderRow = function makeHeaderRow() {
-      const name = headerPadding('name', 'name');
-      const range = headerPadding('range', 'range');
-      const from = headerPadding('from', 'current');
-      const to = headerPadding('to', outdatedFieldName);
-      const url = reporter.format.bold.underline('url');
-      if (usesWorkspaces) {
-        const workspace = headerPadding('workspace', 'workspaceName');
-        return `  ${name}  ${range}  ${from}     ${to}  ${workspace}  ${url}`;
-      } else {
-        return `  ${name}  ${range}  ${from}     ${to}  ${url}`;
-      }
-    };
-
-    const groupedDeps = deps.reduce(function (acc, dep) {
-      const hint = dep.hint,
-            name = dep.name,
-            upgradeTo = dep.upgradeTo;
-
-      const version = dep[outdatedFieldName];
-      const key = getNameFromHint(hint);
-      const xs = acc[key] || [];
-      acc[key] = xs.concat({
-        name: makeRow(dep),
-        value: dep,
-        short: `${name}@${version}`,
-        upgradeTo
-      });
-      return acc;
-    }, {});
-
-    const flatten = function flatten(xs) {
-      return xs.reduce(function (ys, y) {
-        return ys.concat(Array.isArray(y) ? flatten(y) : y);
-      }, []);
-    };
-
-    const choices = flatten(Object.keys(groupedDeps).map(function (key) {
-      return [new (_inquirer || _load_inquirer()).default.Separator(reporter.format.bold.underline.green(key)), new (_inquirer || _load_inquirer()).default.Separator(makeHeaderRow()), groupedDeps[key], new (_inquirer || _load_inquirer()).default.Separator(' ')];
-    }));
-
-    try {
-      const red = reporter.format.red('<red>');
-      const yellow = reporter.format.yellow('<yellow>');
-      const green = reporter.format.green('<green>');
-      reporter.info(reporter.lang('legendColorsForVersionUpdates', red, yellow, green));
-
-      const answers = yield reporter.prompt('Choose which packages to update.', choices, {
-        name: 'packages',
-        type: 'checkbox',
-        validate: function validate(answer) {
-          return !!answer.length || 'You must choose at least one package.';
-        }
-      });
-
-      const getPattern = function getPattern({ upgradeTo }) {
-        return upgradeTo;
-      };
-      const isHint = function isHint(x) {
-        return function ({ hint }) {
-          return hint === x;
-        };
-      };
-
-      var _arr = [null, 'dev', 'optional', 'peer'];
-      for (var _i = 0; _i < _arr.length; _i++) {
-        const hint = _arr[_i];
-        // Reset dependency flags
-        flags.dev = hint === 'dev';
-        flags.peer = hint === 'peer';
-        flags.optional = hint === 'optional';
-        flags.ignoreWorkspaceRootCheck = true;
-        flags.includeWorkspaceDeps = false;
-        flags.workspaceRootIsCwd = false;
-        const deps = answers.filter(isHint(hint));
-        if (deps.length) {
-          const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-
-          var _ref2 = yield install.fetchRequestFromCwd();
-
-          const packagePatterns = _ref2.requests;
-
-          const depsByWorkspace = deps.reduce(function (acc, dep) {
-            const workspaceLoc = dep.workspaceLoc;
-
-            const xs = acc[workspaceLoc] || [];
-            acc[workspaceLoc] = xs.concat(dep);
-            return acc;
-          }, {});
-          const cwd = config.cwd;
-          for (var _iterator = Object.keys(depsByWorkspace), _isArray = Array.isArray(_iterator), _i2 = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-            var _ref3;
-
-            if (_isArray) {
-              if (_i2 >= _iterator.length) break;
-              _ref3 = _iterator[_i2++];
-            } else {
-              _i2 = _iterator.next();
-              if (_i2.done) break;
-              _ref3 = _i2.value;
-            }
-
-            const loc = _ref3;
-
-            const patterns = depsByWorkspace[loc].map(getPattern);
-            (0, (_upgrade || _load_upgrade()).cleanLockfile)(lockfile, deps, packagePatterns, reporter);
-            reporter.info(reporter.lang('updateInstalling', getNameFromHint(hint)));
-            if (loc !== '') {
-              config.cwd = path.resolve(path.dirname(loc));
-            }
-            const add = new (_add || _load_add()).Add(patterns, flags, config, reporter, lockfile);
-            yield add.init();
-            config.cwd = cwd;
-          }
-        }
-      }
-    } catch (e) {
-      Promise.reject(e);
-    }
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _inquirer;
-
-function _load_inquirer() {
-  return _inquirer = _interopRequireDefault(__webpack_require__(276));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _add;
-
-function _load_add() {
-  return _add = __webpack_require__(165);
-}
-
-var _upgrade;
-
-function _load_upgrade() {
-  return _upgrade = __webpack_require__(207);
-}
-
-var _colorForVersions;
-
-function _load_colorForVersions() {
-  return _colorForVersions = _interopRequireDefault(__webpack_require__(369));
-}
-
-var _colorizeDiff;
-
-function _load_colorizeDiff() {
-  return _colorizeDiff = _interopRequireDefault(__webpack_require__(370));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-const requireLockfile = exports.requireLockfile = true;
-
-function setFlags(commander) {
-  commander.description('Provides an easy way to update outdated packages.');
-  commander.usage('upgrade-interactive [flags]');
-  commander.option('-S, --scope <scope>', 'upgrade packages under the specified scope');
-  commander.option('--latest', 'list the latest version of packages, ignoring version ranges in package.json');
-  commander.option('-E, --exact', 'install exact version. Only used when --latest is specified.');
-  commander.option('-T, --tilde', 'install most recent release with the same minor version. Only used when --latest is specified.');
-  commander.option('-C, --caret', 'install most recent release with the same major version. Only used when --latest is specified.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 363 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.setVersion = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let setVersion = exports.setVersion = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args, required) {
-    const pkg = yield config.readRootManifest();
-    const pkgLoc = pkg._loc;
-    const scripts = (0, (_map || _load_map()).default)();
-    let newVersion = flags.newVersion;
-    let identifier = undefined;
-    if (flags.preid) {
-      identifier = flags.preid;
-    }
-    invariant(pkgLoc, 'expected package location');
-
-    if (args.length && !newVersion) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidVersionArgument', NEW_VERSION_FLAG));
-    }
-
-    function runLifecycle(lifecycle) {
-      if (scripts[lifecycle]) {
-        return (0, (_executeLifecycleScript || _load_executeLifecycleScript()).execCommand)({ stage: lifecycle, config, cmd: scripts[lifecycle], cwd: config.cwd, isInteractive: true });
-      }
-
-      return Promise.resolve();
-    }
-
-    function isCommitHooksDisabled() {
-      return flags.commitHooks === false || config.getOption('version-commit-hooks') === false;
-    }
-
-    if (pkg.scripts) {
-      // inherit `scripts` from manifest
-      Object.assign(scripts, pkg.scripts);
-    }
-
-    // get old version
-    let oldVersion = pkg.version;
-    if (oldVersion) {
-      reporter.info(`${reporter.lang('currentVersion')}: ${oldVersion}`);
-    } else {
-      oldVersion = '0.0.0';
-    }
-
-    // get new version
-    if (newVersion && !isValidNewVersion(oldVersion, newVersion, config.looseSemver, identifier)) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidVersion'));
-    }
-
-    // get new version by bumping old version, if requested
-    if (!newVersion) {
-      if (flags.major) {
-        newVersion = semver.inc(oldVersion, 'major');
-      } else if (flags.minor) {
-        newVersion = semver.inc(oldVersion, 'minor');
-      } else if (flags.patch) {
-        newVersion = semver.inc(oldVersion, 'patch');
-      } else if (flags.premajor) {
-        newVersion = semver.inc(oldVersion, 'premajor', identifier);
-      } else if (flags.preminor) {
-        newVersion = semver.inc(oldVersion, 'preminor', identifier);
-      } else if (flags.prepatch) {
-        newVersion = semver.inc(oldVersion, 'prepatch', identifier);
-      } else if (flags.prerelease) {
-        newVersion = semver.inc(oldVersion, 'prerelease', identifier);
-      }
-    }
-
-    // wasn't passed a version arg so ask interactively
-    while (!newVersion) {
-      // make sure we're not running in non-interactive mode before asking for new version
-      if (flags.nonInteractive || config.nonInteractive) {
-        // if no version is specified, use current version in package.json
-        newVersion = oldVersion;
-        break;
-      }
-
-      // Make sure we dont exit with an error message when pressing Ctrl-C or enter to abort
-      try {
-        newVersion = yield reporter.question(reporter.lang('newVersion'));
-        if (!newVersion) {
-          newVersion = oldVersion;
-        }
-      } catch (err) {
-        newVersion = oldVersion;
-      }
-
-      if (!required && !newVersion) {
-        reporter.info(`${reporter.lang('noVersionOnPublish')}: ${oldVersion}`);
-        return function () {
-          return Promise.resolve();
-        };
-      }
-
-      if (isValidNewVersion(oldVersion, newVersion, config.looseSemver, identifier)) {
-        break;
-      } else {
-        newVersion = null;
-        reporter.error(reporter.lang('invalidSemver'));
-      }
-    }
-    if (newVersion) {
-      newVersion = semver.inc(oldVersion, newVersion, config.looseSemver, identifier) || newVersion;
-    }
-    invariant(newVersion, 'expected new version');
-
-    if (newVersion === pkg.version) {
-      return function () {
-        return Promise.resolve();
-      };
-    }
-
-    yield runLifecycle('preversion');
-
-    // update version
-    reporter.info(`${reporter.lang('newVersion')}: ${newVersion}`);
-    pkg.version = newVersion;
-
-    // update versions in manifests
-    const manifests = yield config.getRootManifests();
-    for (var _iterator = (_index || _load_index()).registryNames, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const registryName = _ref2;
-
-      const manifest = manifests[registryName];
-      if (manifest.exists) {
-        manifest.object.version = newVersion;
-      }
-    }
-    yield config.saveRootManifests(manifests);
-
-    yield runLifecycle('version');
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      invariant(newVersion, 'expected version');
-
-      // check if a new git tag should be created
-      if (flags.gitTagVersion && config.getOption('version-git-tag')) {
-        // add git commit and tag
-        let isGit = false;
-        const parts = config.cwd.split(path.sep);
-        while (parts.length) {
-          isGit = yield (_fs || _load_fs()).exists(path.join(parts.join(path.sep), '.git'));
-          if (isGit) {
-            break;
-          } else {
-            parts.pop();
-          }
-        }
-
-        if (isGit) {
-          const message = (flags.message || String(config.getOption('version-git-message'))).replace(/%s/g, newVersion);
-          const sign = Boolean(config.getOption('version-sign-git-tag'));
-          const flag = sign ? '-sm' : '-am';
-          const prefix = String(config.getOption('version-tag-prefix'));
-          const args = ['commit', '-m', message, ...(isCommitHooksDisabled() ? ['-n'] : [])];
-
-          const gitRoot = (yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['rev-parse', '--show-toplevel'], { cwd: config.cwd })).trim();
-
-          // add manifest
-          yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['add', path.relative(gitRoot, pkgLoc)], { cwd: gitRoot });
-
-          // create git commit
-          yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(args, { cwd: gitRoot });
-
-          // create git tag
-          yield (0, (_gitSpawn || _load_gitSpawn()).spawn)(['tag', `${prefix}${newVersion}`, flag, message], { cwd: gitRoot });
-        }
-      }
-
-      yield runLifecycle('postversion');
-    });
-  });
-
-  return function setVersion(_x, _x2, _x3, _x4, _x5) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref4 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const commit = yield setVersion(config, reporter, flags, args, true);
-    yield commit();
-  });
-
-  return function run(_x6, _x7, _x8, _x9) {
-    return _ref4.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(57);
-}
-
-var _executeLifecycleScript;
-
-function _load_executeLifecycleScript() {
-  return _executeLifecycleScript = __webpack_require__(111);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _gitSpawn;
-
-function _load_gitSpawn() {
-  return _gitSpawn = __webpack_require__(373);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-const semver = __webpack_require__(22);
-const path = __webpack_require__(0);
-
-const NEW_VERSION_FLAG = '--new-version [version]';
-function isValidNewVersion(oldVersion, newVersion, looseSemver, identifier) {
-  return !!(semver.valid(newVersion, looseSemver) || semver.inc(oldVersion, newVersion, looseSemver, identifier));
-}
-
-function setFlags(commander) {
-  commander.description('Update the version of your package via the command line.');
-  commander.option(NEW_VERSION_FLAG, 'new version');
-  commander.option('--major', 'auto-increment major version number');
-  commander.option('--minor', 'auto-increment minor version number');
-  commander.option('--patch', 'auto-increment patch version number');
-  commander.option('--premajor', 'auto-increment premajor version number');
-  commander.option('--preminor', 'auto-increment preminor version number');
-  commander.option('--prepatch', 'auto-increment prepatch version number');
-  commander.option('--prerelease', 'auto-increment prerelease version number');
-  commander.option('--preid [preid]', 'add a custom identifier to the prerelease');
-  commander.option('--message [message]', 'message');
-  commander.option('--no-git-tag-version', 'no git tag version');
-  commander.option('--no-commit-hooks', 'bypass git hooks when committing new version');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 364 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LocalTarballFetcher = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _baseFetcher;
-
-function _load_baseFetcher() {
-  return _baseFetcher = _interopRequireDefault(__webpack_require__(167));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _normalizeUrl;
-
-function _load_normalizeUrl() {
-  return _normalizeUrl = _interopRequireDefault(__webpack_require__(402));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const crypto = __webpack_require__(11);
-const path = __webpack_require__(0);
-const tarFs = __webpack_require__(193);
-const url = __webpack_require__(24);
-const fs = __webpack_require__(5);
-const stream = __webpack_require__(23);
-const gunzip = __webpack_require__(656);
-const invariant = __webpack_require__(9);
-const ssri = __webpack_require__(65);
-
-const RE_URL_NAME_MATCH = /\/(?:(@[^/]+)(?:\/|%2f))?[^/]+\/(?:-|_attachments)\/(?:@[^/]+\/)?([^/]+)$/;
-
-const isHashAlgorithmSupported = name => {
-  const cachedResult = isHashAlgorithmSupported.__cache[name];
-  if (cachedResult != null) {
-    return cachedResult;
-  }
-  let supported = true;
-  try {
-    crypto.createHash(name);
-  } catch (error) {
-    if (error.message !== 'Digest method not supported') {
-      throw error;
-    }
-    supported = false;
-  }
-
-  isHashAlgorithmSupported.__cache[name] = supported;
-  return supported;
-};
-isHashAlgorithmSupported.__cache = {};
-
-class TarballFetcher extends (_baseFetcher || _load_baseFetcher()).default {
-  constructor(...args) {
-    var _temp;
-
-    return _temp = super(...args), this.validateError = null, this.validateIntegrity = null, _temp;
-  }
-
-  setupMirrorFromCache() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const tarballMirrorPath = _this.getTarballMirrorPath();
-      const tarballCachePath = _this.getTarballCachePath();
-
-      if (tarballMirrorPath == null) {
-        return;
-      }
-
-      if (!(yield (_fs || _load_fs()).exists(tarballMirrorPath)) && (yield (_fs || _load_fs()).exists(tarballCachePath))) {
-        // The tarball doesn't exists in the offline cache but does in the cache; we import it to the mirror
-        yield (_fs || _load_fs()).mkdirp(path.dirname(tarballMirrorPath));
-        yield (_fs || _load_fs()).copy(tarballCachePath, tarballMirrorPath, _this.reporter);
-      }
-    })();
-  }
-
-  getTarballCachePath() {
-    return path.join(this.dest, (_constants || _load_constants()).TARBALL_FILENAME);
-  }
-
-  getTarballMirrorPath() {
-    var _url$parse = url.parse(this.reference);
-
-    const pathname = _url$parse.pathname;
-
-
-    if (pathname == null) {
-      return null;
-    }
-
-    const match = pathname.match(RE_URL_NAME_MATCH);
-
-    let packageFilename;
-    if (match) {
-      const scope = match[1],
-            tarballBasename = match[2];
-
-      packageFilename = scope ? `${scope}-${tarballBasename}` : tarballBasename;
-    } else {
-      // fallback to base name
-      packageFilename = path.basename(pathname);
-    }
-
-    return this.config.getOfflineMirrorPath(packageFilename);
-  }
-
-  createExtractor(resolve, reject, tarballPath) {
-    const hashInfo = this._supportedIntegrity({ hashOnly: true });
-    const integrityInfo = this._supportedIntegrity({ hashOnly: false });
-
-    const now = new Date();
-
-    const fs = __webpack_require__(5);
-    const patchedFs = Object.assign({}, fs, {
-      utimes: (path, atime, mtime, cb) => {
-        fs.stat(path, (err, stat) => {
-          if (err) {
-            cb(err);
-            return;
-          }
-          if (stat.isDirectory()) {
-            fs.utimes(path, atime, mtime, cb);
-            return;
-          }
-          fs.open(path, 'a', (err, fd) => {
-            if (err) {
-              cb(err);
-              return;
-            }
-            fs.futimes(fd, atime, mtime, err => {
-              if (err) {
-                fs.close(fd, () => cb(err));
-              } else {
-                fs.close(fd, err => cb(err));
-              }
-            });
-          });
-        });
-      }
-    });
-
-    const hashValidateStream = new ssri.integrityStream(hashInfo);
-    const integrityValidateStream = new ssri.integrityStream(integrityInfo);
-
-    const untarStream = tarFs.extract(this.dest, {
-      strip: 1,
-      dmode: 0o755, // all dirs should be readable
-      fmode: 0o644, // all files should be readable
-      chown: false, // don't chown. just leave as it is
-      map: header => {
-        header.mtime = now;
-        if (header.linkname) {
-          const basePath = path.posix.dirname(path.join('/', header.name));
-          const jailPath = path.posix.join(basePath, header.linkname);
-          header.linkname = path.posix.relative('/', jailPath);
-        }
-        return header;
-      },
-      fs: patchedFs
-    });
-    const extractorStream = gunzip();
-
-    hashValidateStream.once('error', err => {
-      this.validateError = err;
-    });
-    integrityValidateStream.once('error', err => {
-      this.validateError = err;
-    });
-    integrityValidateStream.once('integrity', sri => {
-      this.validateIntegrity = sri;
-    });
-
-    untarStream.on('error', err => {
-      reject(new (_errors || _load_errors()).MessageError(this.config.reporter.lang('errorExtractingTarball', err.message, tarballPath)));
-    });
-
-    extractorStream.pipe(untarStream).on('finish', () => {
-      const error = this.validateError;
-      const hexDigest = this.validateIntegrity ? this.validateIntegrity.hexDigest() : '';
-      if (this.config.updateChecksums && this.remote.integrity && this.validateIntegrity && this.remote.integrity !== this.validateIntegrity.toString()) {
-        this.remote.integrity = this.validateIntegrity.toString();
-      } else if (this.validateIntegrity) {
-        this.remote.cacheIntegrity = this.validateIntegrity.toString();
-      }
-
-      if (integrityInfo.integrity && Object.keys(integrityInfo.integrity).length === 0) {
-        return reject(new (_errors || _load_errors()).SecurityError(this.config.reporter.lang('fetchBadIntegrityAlgorithm', this.packageName, this.remote.reference)));
-      }
-
-      if (error) {
-        if (this.config.updateChecksums) {
-          this.remote.integrity = error.found.toString();
-        } else {
-          return reject(new (_errors || _load_errors()).SecurityError(this.config.reporter.lang('fetchBadHashWithPath', this.packageName, this.remote.reference, error.found.toString(), error.expected.toString())));
-        }
-      }
-
-      return resolve({
-        hash: this.hash || hexDigest
-      });
-    });
-
-    return { hashValidateStream, integrityValidateStream, extractorStream };
-  }
-
-  getLocalPaths(override) {
-    const paths = [override ? path.resolve(this.config.cwd, override) : null, this.getTarballMirrorPath(), this.getTarballCachePath()];
-    // $FlowFixMe: https://github.com/facebook/flow/issues/1414
-    return paths.filter(path => path != null);
-  }
-
-  fetchFromLocal(override) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const tarPaths = _this2.getLocalPaths(override);
-      const stream = yield (_fs || _load_fs()).readFirstAvailableStream(tarPaths);
-
-      return new Promise(function (resolve, reject) {
-        if (!stream) {
-          reject(new (_errors || _load_errors()).MessageError(_this2.reporter.lang('tarballNotInNetworkOrCache', _this2.reference, tarPaths)));
-          return;
-        }
-        invariant(stream, 'stream should be available at this point');
-        // $FlowFixMe - This is available https://nodejs.org/api/fs.html#fs_readstream_path
-        const tarballPath = stream.path;
-
-        var _createExtractor = _this2.createExtractor(resolve, reject, tarballPath);
-
-        const hashValidateStream = _createExtractor.hashValidateStream,
-              integrityValidateStream = _createExtractor.integrityValidateStream,
-              extractorStream = _createExtractor.extractorStream;
-
-
-        stream.pipe(hashValidateStream);
-        hashValidateStream.pipe(integrityValidateStream);
-
-        integrityValidateStream.pipe(extractorStream).on('error', function (err) {
-          reject(new (_errors || _load_errors()).MessageError(_this2.config.reporter.lang('fetchErrorCorrupt', err.message, tarballPath)));
-        });
-      });
-    })();
-  }
-
-  fetchFromExternal() {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const registry = _this3.config.registries[_this3.registry];
-
-      try {
-        const headers = _this3.requestHeaders();
-        return yield registry.request(_this3.reference, {
-          headers: (0, (_extends2 || _load_extends()).default)({
-            'Accept-Encoding': 'gzip'
-          }, headers),
-          buffer: true,
-          process: function process(req, resolve, reject) {
-            // should we save this to the offline cache?
-            const tarballMirrorPath = _this3.getTarballMirrorPath();
-            const tarballCachePath = _this3.getTarballCachePath();
-
-            var _createExtractor2 = _this3.createExtractor(resolve, reject);
-
-            const hashValidateStream = _createExtractor2.hashValidateStream,
-                  integrityValidateStream = _createExtractor2.integrityValidateStream,
-                  extractorStream = _createExtractor2.extractorStream;
-
-
-            req.pipe(hashValidateStream);
-            hashValidateStream.pipe(integrityValidateStream);
-
-            if (tarballMirrorPath) {
-              integrityValidateStream.pipe(fs.createWriteStream(tarballMirrorPath)).on('error', reject);
-            }
-
-            if (tarballCachePath) {
-              integrityValidateStream.pipe(fs.createWriteStream(tarballCachePath)).on('error', reject);
-            }
-
-            integrityValidateStream.pipe(extractorStream).on('error', reject);
-          }
-        }, _this3.packageName);
-      } catch (err) {
-        const tarballMirrorPath = _this3.getTarballMirrorPath();
-        const tarballCachePath = _this3.getTarballCachePath();
-
-        if (tarballMirrorPath && (yield (_fs || _load_fs()).exists(tarballMirrorPath))) {
-          yield (_fs || _load_fs()).unlink(tarballMirrorPath);
-        }
-
-        if (tarballCachePath && (yield (_fs || _load_fs()).exists(tarballCachePath))) {
-          yield (_fs || _load_fs()).unlink(tarballCachePath);
-        }
-
-        throw err;
-      }
-    })();
-  }
-
-  requestHeaders() {
-    const registry = this.config.registries.yarn;
-    const config = registry.config;
-    const requestParts = urlParts(this.reference);
-    return Object.keys(config).reduce((headers, option) => {
-      const parts = option.split(':');
-      if (parts.length === 3 && parts[1] === '_header') {
-        const registryParts = urlParts(parts[0]);
-        if (requestParts.host === registryParts.host && requestParts.path.startsWith(registryParts.path)) {
-          const headerName = parts[2];
-          const headerValue = config[option];
-          headers[headerName] = headerValue;
-        }
-      }
-      return headers;
-    }, {});
-  }
-
-  _fetch() {
-    const isFilePath = this.reference.startsWith('file:');
-    this.reference = (0, (_misc || _load_misc()).removePrefix)(this.reference, 'file:');
-    const urlParse = url.parse(this.reference);
-
-    // legacy support for local paths in yarn.lock entries
-    const isRelativePath = urlParse.protocol ? urlParse.protocol.match(/^[a-z]:$/i) : urlParse.pathname ? urlParse.pathname.match(/^(?:\.{1,2})?[\\\/]/) : false;
-
-    if (isFilePath || isRelativePath) {
-      return this.fetchFromLocal(this.reference);
-    }
-
-    return this.fetchFromLocal().catch(err => this.fetchFromExternal());
-  }
-
-  _findIntegrity({ hashOnly }) {
-    if (this.remote.integrity && !hashOnly) {
-      return ssri.parse(this.remote.integrity);
-    }
-    if (this.hash) {
-      return ssri.fromHex(this.hash, 'sha1');
-    }
-    return null;
-  }
-
-  _supportedIntegrity({ hashOnly }) {
-    const expectedIntegrity = this._findIntegrity({ hashOnly }) || {};
-    const expectedIntegrityAlgorithms = Object.keys(expectedIntegrity);
-    const shouldValidateIntegrity = (this.hash || this.remote.integrity) && !this.config.updateChecksums;
-
-    if (expectedIntegrityAlgorithms.length === 0 && (!shouldValidateIntegrity || hashOnly)) {
-      const algorithms = this.config.updateChecksums ? ['sha512'] : ['sha1'];
-      // for consistency, return sha1 for packages without a remote integrity (eg. github)
-      return { integrity: null, algorithms };
-    }
-
-    const algorithms = new Set(['sha512', 'sha1']);
-    const integrity = {};
-    for (var _iterator = expectedIntegrityAlgorithms, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const algorithm = _ref;
-
-      if (isHashAlgorithmSupported(algorithm)) {
-        algorithms.add(algorithm);
-        integrity[algorithm] = expectedIntegrity[algorithm];
-      }
-    }
-
-    return { integrity, algorithms: Array.from(algorithms) };
-  }
-}
-
-exports.default = TarballFetcher;
-class LocalTarballFetcher extends TarballFetcher {
-  _fetch() {
-    return this.fetchFromLocal(this.reference);
-  }
-}
-
-exports.LocalTarballFetcher = LocalTarballFetcher;
-
-
-function urlParts(requestUrl) {
-  const normalizedUrl = (0, (_normalizeUrl || _load_normalizeUrl()).default)(requestUrl);
-  const parsed = url.parse(normalizedUrl);
-  const host = parsed.host || '';
-  const path = parsed.path || '';
-  return { host, path };
-}
-
-/***/ }),
-/* 365 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-class PackageReference {
-  constructor(request, info, remote) {
-    this.resolver = request.resolver;
-    this.lockfile = request.lockfile;
-    this.requests = [];
-    this.config = request.config;
-    this.hint = request.hint;
-
-    this.isPlugnplay = false;
-
-    this.registry = remote.registry;
-    this.version = info.version;
-    this.name = info.name;
-    this.uid = info._uid;
-
-    this.remote = remote;
-
-    this.dependencies = [];
-
-    this.permissions = {};
-    this.patterns = [];
-    this.optional = null;
-    this.level = Infinity;
-    this.ignore = false;
-    this.incompatible = false;
-    this.fresh = false;
-    this.locations = [];
-    this.addRequest(request);
-  }
-
-  setFresh(fresh) {
-    this.fresh = fresh;
-  }
-
-  addLocation(loc) {
-    if (this.locations.indexOf(loc) === -1) {
-      this.locations.push(loc);
-    }
-  }
-
-  addRequest(request) {
-    this.requests.push(request);
-
-    this.level = Math.min(this.level, request.parentNames.length);
-  }
-
-  prune() {
-    for (var _iterator = this.patterns, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const selfPattern = _ref;
-
-      // remove ourselves from the resolver
-      this.resolver.removePattern(selfPattern);
-    }
-  }
-
-  addDependencies(deps) {
-    this.dependencies = this.dependencies.concat(deps);
-  }
-
-  setPermission(key, val) {
-    this.permissions[key] = val;
-  }
-
-  hasPermission(key) {
-    if (key in this.permissions) {
-      return this.permissions[key];
-    } else {
-      return false;
-    }
-  }
-
-  addPattern(pattern, manifest) {
-    this.resolver.addPattern(pattern, manifest);
-
-    this.patterns.push(pattern);
-
-    const shrunk = this.lockfile.getLocked(pattern);
-    if (shrunk && shrunk.permissions) {
-      for (var _iterator2 = (0, (_misc || _load_misc()).entries)(shrunk.permissions), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const _ref2 = _ref3;
-        const key = _ref2[0];
-        const perm = _ref2[1];
-
-        this.setPermission(key, perm);
-      }
-    }
-  }
-
-  addOptional(optional) {
-    if (this.optional == null) {
-      // optional is uninitialised
-      this.optional = optional;
-    } else if (!optional) {
-      // otherwise, ignore all subsequent optional assignments and only accept ones making
-      // this not optional
-      this.optional = false;
-    }
-  }
-}
-exports.default = PackageReference;
-
-/***/ }),
-/* 366 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(78);
-}
-
-var _packageRequest;
-
-function _load_packageRequest() {
-  return _packageRequest = _interopRequireDefault(__webpack_require__(122));
-}
-
-var _normalizePattern2;
-
-function _load_normalizePattern() {
-  return _normalizePattern2 = __webpack_require__(37);
-}
-
-var _requestManager;
-
-function _load_requestManager() {
-  return _requestManager = _interopRequireDefault(__webpack_require__(378));
-}
-
-var _blockingQueue;
-
-function _load_blockingQueue() {
-  return _blockingQueue = _interopRequireDefault(__webpack_require__(110));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-var _workspaceLayout;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout = _interopRequireDefault(__webpack_require__(90));
-}
-
-var _resolutionMap;
-
-function _load_resolutionMap() {
-  return _resolutionMap = _interopRequireDefault(__webpack_require__(214));
-}
-
-var _resolutionMap2;
-
-function _load_resolutionMap2() {
-  return _resolutionMap2 = __webpack_require__(214);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const semver = __webpack_require__(22);
-
-class PackageResolver {
-  constructor(config, lockfile, resolutionMap = new (_resolutionMap || _load_resolutionMap()).default(config)) {
-    this.patternsByPackage = (0, (_map || _load_map()).default)();
-    this.fetchingPatterns = new Set();
-    this.fetchingQueue = new (_blockingQueue || _load_blockingQueue()).default('resolver fetching');
-    this.patterns = (0, (_map || _load_map()).default)();
-    this.resolutionMap = resolutionMap;
-    this.usedRegistries = new Set();
-    this.flat = false;
-
-    this.reporter = config.reporter;
-    this.lockfile = lockfile;
-    this.config = config;
-    this.delayedResolveQueue = [];
-  }
-
-  // whether the dependency graph will be flattened
-
-
-  // list of registries that have been used in this resolution
-
-
-  // activity monitor
-
-
-  // patterns we've already resolved or are in the process of resolving
-
-
-  // TODO
-
-
-  // manages and throttles json api http requests
-
-
-  // list of patterns associated with a package
-
-
-  // lockfile instance which we can use to retrieve version info
-
-
-  // a map of dependency patterns to packages
-
-
-  // reporter instance, abstracts out display logic
-
-
-  // environment specific config methods and options
-
-
-  // list of packages need to be resolved later (they found a matching version in the
-  // resolver, but better matches can still arrive later in the resolve process)
-
-
-  /**
-   * TODO description
-   */
-
-  isNewPattern(pattern) {
-    return !!this.patterns[pattern].fresh;
-  }
-
-  updateManifest(ref, newPkg) {
-    // inherit fields
-    const oldPkg = this.patterns[ref.patterns[0]];
-    newPkg._reference = ref;
-    newPkg._remote = ref.remote;
-    newPkg.name = oldPkg.name;
-    newPkg.fresh = oldPkg.fresh;
-    newPkg.prebuiltVariants = oldPkg.prebuiltVariants;
-
-    // update patterns
-    for (var _iterator = ref.patterns, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const pattern = _ref;
-
-      this.patterns[pattern] = newPkg;
-    }
-
-    return Promise.resolve();
-  }
-
-  updateManifests(newPkgs) {
-    for (var _iterator2 = newPkgs, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref2 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref2 = _i2.value;
-      }
-
-      const newPkg = _ref2;
-
-      if (newPkg._reference) {
-        for (var _iterator3 = newPkg._reference.patterns, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-          var _ref3;
-
-          if (_isArray3) {
-            if (_i3 >= _iterator3.length) break;
-            _ref3 = _iterator3[_i3++];
-          } else {
-            _i3 = _iterator3.next();
-            if (_i3.done) break;
-            _ref3 = _i3.value;
-          }
-
-          const pattern = _ref3;
-
-          const oldPkg = this.patterns[pattern];
-          newPkg.prebuiltVariants = oldPkg.prebuiltVariants;
-
-          this.patterns[pattern] = newPkg;
-        }
-      }
-    }
-
-    return Promise.resolve();
-  }
-
-  /**
-   * Given a list of patterns, dedupe them to a list of unique patterns.
-   */
-
-  dedupePatterns(patterns) {
-    const deduped = [];
-    const seen = new Set();
-
-    for (var _iterator4 = patterns, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref4 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref4 = _i4.value;
-      }
-
-      const pattern = _ref4;
-
-      const info = this.getResolvedPattern(pattern);
-      if (seen.has(info)) {
-        continue;
-      }
-
-      seen.add(info);
-      deduped.push(pattern);
-    }
-
-    return deduped;
-  }
-
-  /**
-   * Get a list of all manifests by topological order.
-   */
-
-  getTopologicalManifests(seedPatterns) {
-    const pkgs = new Set();
-    const skip = new Set();
-
-    const add = seedPatterns => {
-      for (var _iterator5 = seedPatterns, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref5;
-
-        if (_isArray5) {
-          if (_i5 >= _iterator5.length) break;
-          _ref5 = _iterator5[_i5++];
-        } else {
-          _i5 = _iterator5.next();
-          if (_i5.done) break;
-          _ref5 = _i5.value;
-        }
-
-        const pattern = _ref5;
-
-        const pkg = this.getStrictResolvedPattern(pattern);
-        if (skip.has(pkg)) {
-          continue;
-        }
-
-        const ref = pkg._reference;
-        invariant(ref, 'expected reference');
-        skip.add(pkg);
-        add(ref.dependencies);
-        pkgs.add(pkg);
-      }
-    };
-
-    add(seedPatterns);
-
-    return pkgs;
-  }
-
-  /**
-   * Get a list of all manifests by level sort order.
-   */
-
-  getLevelOrderManifests(seedPatterns) {
-    const pkgs = new Set();
-    const skip = new Set();
-
-    const add = seedPatterns => {
-      const refs = [];
-
-      for (var _iterator6 = seedPatterns, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray6) {
-          if (_i6 >= _iterator6.length) break;
-          _ref6 = _iterator6[_i6++];
-        } else {
-          _i6 = _iterator6.next();
-          if (_i6.done) break;
-          _ref6 = _i6.value;
-        }
-
-        const pattern = _ref6;
-
-        const pkg = this.getStrictResolvedPattern(pattern);
-        if (skip.has(pkg)) {
-          continue;
-        }
-
-        const ref = pkg._reference;
-        invariant(ref, 'expected reference');
-
-        refs.push(ref);
-        skip.add(pkg);
-        pkgs.add(pkg);
-      }
-
-      for (var _iterator7 = refs, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray7) {
-          if (_i7 >= _iterator7.length) break;
-          _ref7 = _iterator7[_i7++];
-        } else {
-          _i7 = _iterator7.next();
-          if (_i7.done) break;
-          _ref7 = _i7.value;
-        }
-
-        const ref = _ref7;
-
-        add(ref.dependencies);
-      }
-    };
-
-    add(seedPatterns);
-
-    return pkgs;
-  }
-
-  /**
-   * Get a list of all package names in the dependency graph.
-   */
-
-  getAllDependencyNamesByLevelOrder(seedPatterns) {
-    const names = new Set();
-    for (var _iterator8 = this.getLevelOrderManifests(seedPatterns), _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-      var _ref9;
-
-      if (_isArray8) {
-        if (_i8 >= _iterator8.length) break;
-        _ref9 = _iterator8[_i8++];
-      } else {
-        _i8 = _iterator8.next();
-        if (_i8.done) break;
-        _ref9 = _i8.value;
-      }
-
-      const _ref8 = _ref9;
-      const name = _ref8.name;
-
-      names.add(name);
-    }
-    return names;
-  }
-
-  /**
-   * Retrieve all the package info stored for this package name.
-   */
-
-  getAllInfoForPackageName(name) {
-    const patterns = this.patternsByPackage[name] || [];
-    return this.getAllInfoForPatterns(patterns);
-  }
-
-  /**
-   * Retrieve all the package info stored for a list of patterns.
-   */
-
-  getAllInfoForPatterns(patterns) {
-    const infos = [];
-    const seen = new Set();
-
-    for (var _iterator9 = patterns, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-      var _ref10;
-
-      if (_isArray9) {
-        if (_i9 >= _iterator9.length) break;
-        _ref10 = _iterator9[_i9++];
-      } else {
-        _i9 = _iterator9.next();
-        if (_i9.done) break;
-        _ref10 = _i9.value;
-      }
-
-      const pattern = _ref10;
-
-      const info = this.patterns[pattern];
-      if (seen.has(info)) {
-        continue;
-      }
-
-      seen.add(info);
-      infos.push(info);
-    }
-
-    return infos;
-  }
-
-  /**
-   * Get a flat list of all package info.
-   */
-
-  getManifests() {
-    const infos = [];
-    const seen = new Set();
-
-    for (const pattern in this.patterns) {
-      const info = this.patterns[pattern];
-      if (seen.has(info)) {
-        continue;
-      }
-
-      infos.push(info);
-      seen.add(info);
-    }
-
-    return infos;
-  }
-
-  /**
-   * replace pattern in resolver, e.g. `name` is replaced with `name@^1.0.1`
-   */
-  replacePattern(pattern, newPattern) {
-    const pkg = this.getResolvedPattern(pattern);
-    invariant(pkg, `missing package ${pattern}`);
-    const ref = pkg._reference;
-    invariant(ref, 'expected package reference');
-    ref.patterns = [newPattern];
-    this.addPattern(newPattern, pkg);
-    this.removePattern(pattern);
-  }
-
-  /**
-   * Make all versions of this package resolve to it.
-   */
-
-  collapseAllVersionsOfPackage(name, version) {
-    const patterns = this.dedupePatterns(this.patternsByPackage[name]);
-    return this.collapsePackageVersions(name, version, patterns);
-  }
-
-  /**
-   * Make all given patterns resolve to version.
-   */
-  collapsePackageVersions(name, version, patterns) {
-    const human = `${name}@${version}`;
-
-    // get manifest that matches the version we're collapsing too
-    let collapseToReference;
-    let collapseToManifest;
-    let collapseToPattern;
-    for (var _iterator10 = patterns, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray10) {
-        if (_i10 >= _iterator10.length) break;
-        _ref11 = _iterator10[_i10++];
-      } else {
-        _i10 = _iterator10.next();
-        if (_i10.done) break;
-        _ref11 = _i10.value;
-      }
-
-      const pattern = _ref11;
-
-      const _manifest = this.patterns[pattern];
-      if (_manifest.version === version) {
-        collapseToReference = _manifest._reference;
-        collapseToManifest = _manifest;
-        collapseToPattern = pattern;
-        break;
-      }
-    }
-
-    invariant(collapseToReference && collapseToManifest && collapseToPattern, `Couldn't find package manifest for ${human}`);
-
-    for (var _iterator11 = patterns, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-      var _ref12;
-
-      if (_isArray11) {
-        if (_i11 >= _iterator11.length) break;
-        _ref12 = _iterator11[_i11++];
-      } else {
-        _i11 = _iterator11.next();
-        if (_i11.done) break;
-        _ref12 = _i11.value;
-      }
-
-      const pattern = _ref12;
-
-      // don't touch the pattern we're collapsing to
-      if (pattern === collapseToPattern) {
-        continue;
-      }
-
-      // remove this pattern
-      const ref = this.getStrictResolvedPattern(pattern)._reference;
-      invariant(ref, 'expected package reference');
-      const refPatterns = ref.patterns.slice();
-      ref.prune();
-
-      // add pattern to the manifest we're collapsing to
-      for (var _iterator12 = refPatterns, _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) {
-        var _ref13;
-
-        if (_isArray12) {
-          if (_i12 >= _iterator12.length) break;
-          _ref13 = _iterator12[_i12++];
-        } else {
-          _i12 = _iterator12.next();
-          if (_i12.done) break;
-          _ref13 = _i12.value;
-        }
-
-        const pattern = _ref13;
-
-        collapseToReference.addPattern(pattern, collapseToManifest);
-      }
-    }
-
-    return collapseToPattern;
-  }
-
-  /**
-   * TODO description
-   */
-
-  addPattern(pattern, info) {
-    this.patterns[pattern] = info;
-
-    const byName = this.patternsByPackage[info.name] = this.patternsByPackage[info.name] || [];
-    if (byName.indexOf(pattern) === -1) {
-      byName.push(pattern);
-    }
-  }
-
-  /**
-   * TODO description
-   */
-
-  removePattern(pattern) {
-    const pkg = this.patterns[pattern];
-    if (!pkg) {
-      return;
-    }
-
-    const byName = this.patternsByPackage[pkg.name];
-    if (!byName) {
-      return;
-    }
-
-    byName.splice(byName.indexOf(pattern), 1);
-    delete this.patterns[pattern];
-  }
-
-  /**
-   * TODO description
-   */
-
-  getResolvedPattern(pattern) {
-    return this.patterns[pattern];
-  }
-
-  /**
-   * TODO description
-   */
-
-  getStrictResolvedPattern(pattern) {
-    const manifest = this.getResolvedPattern(pattern);
-    invariant(manifest, 'expected manifest');
-    return manifest;
-  }
-
-  /**
-   * TODO description
-   */
-
-  getExactVersionMatch(name, version, manifest) {
-    const patterns = this.patternsByPackage[name];
-    if (!patterns) {
-      return null;
-    }
-
-    for (var _iterator13 = patterns, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) {
-      var _ref14;
-
-      if (_isArray13) {
-        if (_i13 >= _iterator13.length) break;
-        _ref14 = _iterator13[_i13++];
-      } else {
-        _i13 = _iterator13.next();
-        if (_i13.done) break;
-        _ref14 = _i13.value;
-      }
-
-      const pattern = _ref14;
-
-      const info = this.getStrictResolvedPattern(pattern);
-      if (info.version === version) {
-        return info;
-      }
-    }
-
-    if (manifest && (0, (_index || _load_index()).getExoticResolver)(version)) {
-      return this.exoticRangeMatch(patterns.map(this.getStrictResolvedPattern.bind(this)), manifest);
-    }
-
-    return null;
-  }
-
-  /**
-   * Get the manifest of the highest known version that satisfies a package range
-   */
-
-  getHighestRangeVersionMatch(name, range, manifest) {
-    const patterns = this.patternsByPackage[name];
-
-    if (!patterns) {
-      return null;
-    }
-
-    const versionNumbers = [];
-    const resolvedPatterns = patterns.map(pattern => {
-      const info = this.getStrictResolvedPattern(pattern);
-      versionNumbers.push(info.version);
-
-      return info;
-    });
-
-    const maxValidRange = semver.maxSatisfying(versionNumbers, range);
-
-    if (!maxValidRange) {
-      return manifest && (0, (_index || _load_index()).getExoticResolver)(range) ? this.exoticRangeMatch(resolvedPatterns, manifest) : null;
-    }
-
-    const indexOfmaxValidRange = versionNumbers.indexOf(maxValidRange);
-    const maxValidRangeManifest = resolvedPatterns[indexOfmaxValidRange];
-
-    return maxValidRangeManifest;
-  }
-
-  /**
-   * Get the manifest of the package that matches an exotic range
-   */
-
-  exoticRangeMatch(resolvedPkgs, manifest) {
-    const remote = manifest._remote;
-    if (!(remote && remote.reference && remote.type === 'copy')) {
-      return null;
-    }
-
-    const matchedPkg = resolvedPkgs.find(({ _remote: pkgRemote }) => pkgRemote && pkgRemote.reference === remote.reference && pkgRemote.type === 'copy');
-
-    if (matchedPkg) {
-      manifest._remote = matchedPkg._remote;
-    }
-
-    return matchedPkg;
-  }
-
-  /**
-   * Determine if LockfileEntry is incorrect, remove it from lockfile cache and consider the pattern as new
-   */
-  isLockfileEntryOutdated(version, range, hasVersion) {
-    return !!(semver.validRange(range) && semver.valid(version) && !(0, (_index || _load_index()).getExoticResolver)(range) && hasVersion && !semver.satisfies(version, range));
-  }
-
-  /**
-   * TODO description
-   */
-
-  find(initialReq) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const req = _this.resolveToResolution(initialReq);
-
-      // we've already resolved it with a resolution
-      if (!req) {
-        return;
-      }
-
-      const request = new (_packageRequest || _load_packageRequest()).default(req, _this);
-      const fetchKey = `${req.registry}:${req.pattern}:${String(req.optional)}`;
-      const initialFetch = !_this.fetchingPatterns.has(fetchKey);
-      let fresh = false;
-
-      if (_this.activity) {
-        _this.activity.tick(req.pattern);
-      }
-
-      if (initialFetch) {
-        _this.fetchingPatterns.add(fetchKey);
-
-        const lockfileEntry = _this.lockfile.getLocked(req.pattern);
-
-        if (lockfileEntry) {
-          var _normalizePattern = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(req.pattern);
-
-          const range = _normalizePattern.range,
-                hasVersion = _normalizePattern.hasVersion;
-
-
-          if (_this.isLockfileEntryOutdated(lockfileEntry.version, range, hasVersion)) {
-            _this.reporter.warn(_this.reporter.lang('incorrectLockfileEntry', req.pattern));
-            _this.removePattern(req.pattern);
-            _this.lockfile.removePattern(req.pattern);
-            fresh = true;
-          }
-        } else {
-          fresh = true;
-        }
-
-        request.init();
-      }
-
-      yield request.find({ fresh, frozen: _this.frozen });
-    })();
-  }
-
-  /**
-   * TODO description
-   */
-
-  init(deps, { isFlat, isFrozen, workspaceLayout } = {
-    isFlat: false,
-    isFrozen: false,
-    workspaceLayout: undefined
-  }) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this2.flat = Boolean(isFlat);
-      _this2.frozen = Boolean(isFrozen);
-      _this2.workspaceLayout = workspaceLayout;
-      const activity = _this2.activity = _this2.reporter.activity();
-
-      for (var _iterator14 = deps, _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) {
-        var _ref15;
-
-        if (_isArray14) {
-          if (_i14 >= _iterator14.length) break;
-          _ref15 = _iterator14[_i14++];
-        } else {
-          _i14 = _iterator14.next();
-          if (_i14.done) break;
-          _ref15 = _i14.value;
-        }
-
-        const req = _ref15;
-
-        yield _this2.find(req);
-      }
-
-      // all required package versions have been discovered, so now packages that
-      // resolved to existing versions can be resolved to their best available version
-      _this2.resolvePackagesWithExistingVersions();
-
-      for (var _iterator15 = _this2.resolutionMap.delayQueue, _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) {
-        var _ref16;
-
-        if (_isArray15) {
-          if (_i15 >= _iterator15.length) break;
-          _ref16 = _iterator15[_i15++];
-        } else {
-          _i15 = _iterator15.next();
-          if (_i15.done) break;
-          _ref16 = _i15.value;
-        }
-
-        const req = _ref16;
-
-        _this2.resolveToResolution(req);
-      }
-
-      if (isFlat) {
-        for (var _iterator16 = deps, _isArray16 = Array.isArray(_iterator16), _i16 = 0, _iterator16 = _isArray16 ? _iterator16 : _iterator16[Symbol.iterator]();;) {
-          var _ref17;
-
-          if (_isArray16) {
-            if (_i16 >= _iterator16.length) break;
-            _ref17 = _iterator16[_i16++];
-          } else {
-            _i16 = _iterator16.next();
-            if (_i16.done) break;
-            _ref17 = _i16.value;
-          }
-
-          const dep = _ref17;
-
-          const name = (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(dep.pattern).name;
-          _this2.optimizeResolutions(name);
-        }
-      }
-
-      activity.end();
-      _this2.activity = null;
-    })();
-  }
-
-  // for a given package, see if a single manifest can satisfy all ranges
-  optimizeResolutions(name) {
-    const patterns = this.dedupePatterns(this.patternsByPackage[name] || []);
-
-    // don't optimize things that already have a lockfile entry:
-    // https://github.com/yarnpkg/yarn/issues/79
-    const collapsablePatterns = patterns.filter(pattern => {
-      const remote = this.patterns[pattern]._remote;
-      return !this.lockfile.getLocked(pattern) && (!remote || remote.type !== 'workspace');
-    });
-    if (collapsablePatterns.length < 2) {
-      return;
-    }
-
-    // reverse sort, so we'll find the maximum satisfying version first
-    const availableVersions = this.getAllInfoForPatterns(collapsablePatterns).map(manifest => manifest.version);
-    availableVersions.sort(semver.rcompare);
-
-    const ranges = collapsablePatterns.map(pattern => (0, (_normalizePattern2 || _load_normalizePattern()).normalizePattern)(pattern).range);
-
-    // find the most recent version that satisfies all patterns (if one exists), and
-    // collapse to that version.
-    for (var _iterator17 = availableVersions, _isArray17 = Array.isArray(_iterator17), _i17 = 0, _iterator17 = _isArray17 ? _iterator17 : _iterator17[Symbol.iterator]();;) {
-      var _ref18;
-
-      if (_isArray17) {
-        if (_i17 >= _iterator17.length) break;
-        _ref18 = _iterator17[_i17++];
-      } else {
-        _i17 = _iterator17.next();
-        if (_i17.done) break;
-        _ref18 = _i17.value;
-      }
-
-      const version = _ref18;
-
-      if (ranges.every(range => semver.satisfies(version, range))) {
-        this.collapsePackageVersions(name, version, collapsablePatterns);
-        return;
-      }
-    }
-  }
-
-  /**
-    * Called by the package requester for packages that this resolver already had
-    * a matching version for. Delay the resolve, because better matches can still be
-    * discovered.
-    */
-
-  reportPackageWithExistingVersion(req, info) {
-    this.delayedResolveQueue.push({ req, info });
-  }
-
-  /**
-    * Executes the resolve to existing versions for packages after the find process,
-    * when all versions that are going to be used have been discovered.
-    */
-
-  resolvePackagesWithExistingVersions() {
-    for (var _iterator18 = this.delayedResolveQueue, _isArray18 = Array.isArray(_iterator18), _i18 = 0, _iterator18 = _isArray18 ? _iterator18 : _iterator18[Symbol.iterator]();;) {
-      var _ref20;
-
-      if (_isArray18) {
-        if (_i18 >= _iterator18.length) break;
-        _ref20 = _iterator18[_i18++];
-      } else {
-        _i18 = _iterator18.next();
-        if (_i18.done) break;
-        _ref20 = _i18.value;
-      }
-
-      const _ref19 = _ref20;
-      const req = _ref19.req,
-            info = _ref19.info;
-
-      req.resolveToExistingVersion(info);
-    }
-  }
-
-  resolveToResolution(req) {
-    const parentNames = req.parentNames,
-          pattern = req.pattern;
-
-
-    if (!parentNames || this.flat) {
-      return req;
-    }
-
-    const resolution = this.resolutionMap.find(pattern, parentNames);
-
-    if (resolution) {
-      const resolutionManifest = this.getResolvedPattern(resolution);
-
-      if (resolutionManifest) {
-        invariant(resolutionManifest._reference, 'resolutions should have a resolved reference');
-        resolutionManifest._reference.patterns.push(pattern);
-        this.addPattern(pattern, resolutionManifest);
-        const lockManifest = this.lockfile.getLocked(pattern);
-        if ((0, (_resolutionMap2 || _load_resolutionMap2()).shouldUpdateLockfile)(lockManifest, resolutionManifest._reference)) {
-          this.lockfile.removePattern(pattern);
-        }
-      } else {
-        this.resolutionMap.addToDelayQueue(req);
-      }
-      return null;
-    }
-
-    return req;
-  }
-}
-exports.default = PackageResolver;
-
-/***/ }),
-/* 367 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _hostedGitResolver;
-
-function _load_hostedGitResolver() {
-  return _hostedGitResolver = _interopRequireDefault(__webpack_require__(109));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class GitHubResolver extends (_hostedGitResolver || _load_hostedGitResolver()).default {
-
-  static isVersion(pattern) {
-    // github proto
-    if (pattern.startsWith('github:')) {
-      return true;
-    }
-
-    // github shorthand
-    if (/^[^:@%/\s.-][^:@%/\s]*[/][^:@\s/%]+(?:#.*)?$/.test(pattern)) {
-      return true;
-    }
-
-    return false;
-  }
-
-  static getTarballUrl(parts, hash) {
-    return `https://codeload.${this.hostname}/${parts.user}/${parts.repo}/tar.gz/${hash}`;
-  }
-
-  static getGitSSHUrl(parts) {
-    return `git+ssh://git@${this.hostname}/${parts.user}/${parts.repo}.git` + `${parts.hash ? '#' + decodeURIComponent(parts.hash) : ''}`;
-  }
-
-  static getGitHTTPBaseUrl(parts) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}`;
-  }
-
-  static getGitHTTPUrl(parts) {
-    return `${GitHubResolver.getGitHTTPBaseUrl(parts)}.git`;
-  }
-
-  static getHTTPFileUrl(parts, filename, commit) {
-    return `https://raw.githubusercontent.com/${parts.user}/${parts.repo}/${commit}/${filename}`;
-  }
-}
-exports.default = GitHubResolver;
-GitHubResolver.protocol = 'github';
-GitHubResolver.hostname = 'github.com';
-
-/***/ }),
-/* 368 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LINK_PROTOCOL_PREFIX = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = _interopRequireWildcard(__webpack_require__(18));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-const LINK_PROTOCOL_PREFIX = exports.LINK_PROTOCOL_PREFIX = 'link:';
-
-class LinkResolver extends (_exoticResolver || _load_exoticResolver()).default {
-  constructor(request, fragment) {
-    super(request, fragment);
-    this.loc = (_misc || _load_misc()).removePrefix(fragment, LINK_PROTOCOL_PREFIX);
-  }
-
-  resolve() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let loc = _this.loc;
-      if (!path.isAbsolute(loc)) {
-        loc = path.resolve(_this.config.lockfileFolder, loc);
-      }
-
-      const name = path.basename(loc);
-      const registry = 'npm';
-
-      const manifest = !(yield (_fs || _load_fs()).exists(`${loc}/package.json`)) || loc === _this.config.lockfileFolder ? { _uid: '', name, version: '0.0.0', _registry: registry } : yield _this.config.readManifest(loc, _this.registry);
-
-      manifest._remote = {
-        type: 'link',
-        registry,
-        hash: null,
-        reference: loc
-      };
-
-      manifest._uid = manifest.version;
-
-      return manifest;
-    })();
-  }
-}
-exports.default = LinkResolver;
-LinkResolver.protocol = 'link';
-
-/***/ }),
-/* 369 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (from, to) {
-  const validFrom = (_semver || _load_semver()).default.valid(from);
-  const validTo = (_semver || _load_semver()).default.valid(to);
-  let versionBump = 'unknown';
-  if (validFrom && validTo) {
-    versionBump = (0, (_semver2 || _load_semver2()).diffWithUnstable)(validFrom, validTo) || 'unchanged';
-  }
-  return (_constants || _load_constants()).VERSION_COLOR_SCHEME[versionBump];
-};
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-var _semver2;
-
-function _load_semver2() {
-  return _semver2 = __webpack_require__(224);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/***/ }),
-/* 370 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (from, to, reporter) {
-  const parts = to.split('.');
-  const fromParts = from.split('.');
-
-  const splitIndex = parts.findIndex((part, i) => part !== fromParts[i]);
-  if (splitIndex === -1) {
-    return from;
-  }
-
-  const colorized = reporter.format.green(parts.slice(splitIndex).join('.'));
-  return parts.slice(0, splitIndex).concat(colorized).join('.');
-};
-
-/***/ }),
-/* 371 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// $FlowFixMe We want this require to be dynamic
-exports.dynamicRequire =  true ? require : require; // eslint-disable-line
-
-/***/ }),
-/* 372 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sortFilter = sortFilter;
-exports.matchesFilter = matchesFilter;
-exports.ignoreLinesToRegex = ignoreLinesToRegex;
-exports.filterOverridenGitignores = filterOverridenGitignores;
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-const mm = __webpack_require__(114);
-const path = __webpack_require__(0);
-
-const WHITESPACE_RE = /^\s+$/;
-
-function sortFilter(files, filters, keepFiles = new Set(), possibleKeepFiles = new Set(), ignoreFiles = new Set()) {
-  for (var _iterator = files, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const file = _ref;
-
-    let keep = false;
-
-    // always keep a file if a ! pattern matches it
-    for (var _iterator5 = filters, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray5) {
-        if (_i5 >= _iterator5.length) break;
-        _ref5 = _iterator5[_i5++];
-      } else {
-        _i5 = _iterator5.next();
-        if (_i5.done) break;
-        _ref5 = _i5.value;
-      }
-
-      const filter = _ref5;
-
-      if (filter.isNegation && matchesFilter(filter, file.basename, file.relative)) {
-        keep = true;
-        break;
-      }
-    }
-
-    //
-    if (keep) {
-      keepFiles.add(file.relative);
-      continue;
-    }
-
-    // otherwise don't keep it if a pattern matches it
-    keep = true;
-    for (var _iterator6 = filters, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-      var _ref6;
-
-      if (_isArray6) {
-        if (_i6 >= _iterator6.length) break;
-        _ref6 = _iterator6[_i6++];
-      } else {
-        _i6 = _iterator6.next();
-        if (_i6.done) break;
-        _ref6 = _i6.value;
-      }
-
-      const filter = _ref6;
-
-      if (!filter.isNegation && matchesFilter(filter, file.basename, file.relative)) {
-        keep = false;
-        break;
-      }
-    }
-
-    if (keep) {
-      possibleKeepFiles.add(file.relative);
-    } else {
-      ignoreFiles.add(file.relative);
-    }
-  }
-
-  // exclude file
-  for (var _iterator2 = possibleKeepFiles, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref2 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref2 = _i2.value;
-    }
-
-    const file = _ref2;
-
-    const parts = path.dirname(file).split(path.sep);
-
-    while (parts.length) {
-      const folder = parts.join(path.sep);
-      if (ignoreFiles.has(folder)) {
-        ignoreFiles.add(file);
-        break;
-      }
-      parts.pop();
-    }
-  }
-
-  //
-  for (var _iterator3 = possibleKeepFiles, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-    var _ref3;
-
-    if (_isArray3) {
-      if (_i3 >= _iterator3.length) break;
-      _ref3 = _iterator3[_i3++];
-    } else {
-      _i3 = _iterator3.next();
-      if (_i3.done) break;
-      _ref3 = _i3.value;
-    }
-
-    const file = _ref3;
-
-    if (!ignoreFiles.has(file)) {
-      keepFiles.add(file);
-    }
-  }
-
-  //
-  for (var _iterator4 = keepFiles, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-    var _ref4;
-
-    if (_isArray4) {
-      if (_i4 >= _iterator4.length) break;
-      _ref4 = _iterator4[_i4++];
-    } else {
-      _i4 = _iterator4.next();
-      if (_i4.done) break;
-      _ref4 = _i4.value;
-    }
-
-    const file = _ref4;
-
-    const parts = path.dirname(file).split(path.sep);
-
-    while (parts.length) {
-      // deregister this folder from being ignored, any files inside
-      // will still be marked as ignored
-      ignoreFiles.delete(parts.join(path.sep));
-      parts.pop();
-    }
-  }
-
-  return { ignoreFiles, keepFiles };
-}
-
-function matchesFilter(filter, basename, loc) {
-  let filterByBasename = true;
-  if (filter.base && filter.base !== '.') {
-    loc = path.relative(filter.base, loc);
-    filterByBasename = false;
-  }
-  // the micromatch regex expects unix path separators
-  loc = loc.replace(/\\/g, '/');
-
-  return filter.regex.test(loc) || filter.regex.test(`/${loc}`) || filterByBasename && filter.regex.test(basename) || mm.isMatch(loc, filter.pattern);
-}
-
-function ignoreLinesToRegex(lines, base = '.') {
-  return lines
-  // create regex
-  .map(line => {
-    // remove empty lines, comments, etc
-    if (line === '' || line === '!' || line[0] === '#' || WHITESPACE_RE.test(line)) {
-      return null;
-    }
-
-    let pattern = line;
-    let isNegation = false;
-
-    // hide the fact that it's a negation from minimatch since we'll handle this specifically
-    // ourselves
-    if (pattern[0] === '!') {
-      isNegation = true;
-      pattern = pattern.slice(1);
-    }
-
-    // remove trailing slash
-    pattern = (0, (_misc || _load_misc()).removeSuffix)(pattern, '/');
-
-    const regex = mm.makeRe(pattern.trim(), { dot: true, nocase: true });
-
-    if (regex) {
-      return {
-        base,
-        isNegation,
-        pattern,
-        regex
-      };
-    } else {
-      return null;
-    }
-  }).filter(Boolean);
-}
-
-function filterOverridenGitignores(files) {
-  const IGNORE_FILENAMES = ['.yarnignore', '.npmignore', '.gitignore'];
-  const GITIGNORE_NAME = IGNORE_FILENAMES[2];
-  return files.filter(file => IGNORE_FILENAMES.indexOf(file.basename) > -1).reduce((acc, file) => {
-    if (file.basename !== GITIGNORE_NAME) {
-      return [...acc, file];
-    } else {
-      //don't include .gitignore if .npmignore or .yarnignore are present
-      const dir = path.dirname(file.absolute);
-      const higherPriorityIgnoreFilePaths = [path.join(dir, IGNORE_FILENAMES[0]), path.join(dir, IGNORE_FILENAMES[1])];
-      const hasHigherPriorityFiles = files.find(file => higherPriorityIgnoreFilePaths.indexOf(path.normalize(file.absolute)) > -1);
-      if (!hasHigherPriorityFiles) {
-        return [...acc, file];
-      }
-    }
-    return acc;
-  }, []);
-}
-
-/***/ }),
-/* 373 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.spawn = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const BATCH_MODE_ARGS = new Map([['ssh', '-oBatchMode=yes'], ['plink', '-batch']]);
-
-// Suppress any password prompts since we run these in the background
-const env = (0, (_extends2 || _load_extends()).default)({
-  GIT_ASKPASS: '',
-  GIT_TERMINAL_PROMPT: 0
-}, process.env);
-
-const sshCommand = env.GIT_SSH || 'ssh';
-const sshExecutable = (_path || _load_path()).default.basename(sshCommand.toLowerCase(), '.exe');
-const sshBatchArgs = BATCH_MODE_ARGS.get(sshExecutable);
-
-if (!env.GIT_SSH_COMMAND && sshBatchArgs) {
-  // We have to manually specify `GIT_SSH_VARIANT`,
-  // because it's not automatically set when using `GIT_SSH_COMMAND` instead of `GIT_SSH`
-  // See: https://github.com/yarnpkg/yarn/issues/4729
-  env.GIT_SSH_VARIANT = sshExecutable;
-  env.GIT_SSH_COMMAND = `"${sshCommand}" ${sshBatchArgs}`;
-}
-
-const spawn = exports.spawn = (args, opts = {}) => {
-  return (_child || _load_child()).spawn('git', args, (0, (_extends2 || _load_extends()).default)({}, opts, { env }));
-};
-
-/***/ }),
-/* 374 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.callThroughHook = callThroughHook;
-
-
-const YARN_HOOKS_KEY = 'experimentalYarnHooks';
-
-function callThroughHook(type, fn, context) {
-  if (typeof global === 'undefined') {
-    return fn();
-  }
-
-  if (typeof global[YARN_HOOKS_KEY] !== 'object' || !global[YARN_HOOKS_KEY]) {
-    return fn();
-  }
-
-  const hook = global[YARN_HOOKS_KEY][type];
-
-  if (!hook) {
-    return fn();
-  }
-
-  return hook(fn, context);
-}
-
-/***/ }),
-/* 375 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-const lockPromises = new Map();
-
-/**
- * Acquires a mutex lock over the given key. If the lock can't be acquired, it waits until it's available.
- * @param key Key to get the lock for.
- * @return {Promise.<Function>} A Promise that resolves when the lock is acquired, with the function that
- * must be called to release the lock.
- */
-
-exports.default = key => {
-  let unlockNext;
-  const willLock = new Promise(resolve => unlockNext = resolve);
-  const lockPromise = lockPromises.get(key) || Promise.resolve();
-  const willUnlock = lockPromise.then(() => unlockNext);
-  lockPromises.set(key, lockPromise.then(() => willLock));
-  return willUnlock;
-};
-
-/***/ }),
-/* 376 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = parsePackagePath;
-exports.isValidPackagePath = isValidPackagePath;
-
-
-/**
- * Parse input strings like `package-1/package-2` to an array of packages
- */
-function parsePackagePath(input) {
-  return input.match(/(@[^\/]+\/)?([^/]+)/g) || [];
-}
-
-const WRONG_PATTERNS = /\/$|\/{2,}|\*+$/;
-
-function isValidPackagePath(input) {
-  return !WRONG_PATTERNS.test(input);
-}
-
-/***/ }),
-/* 377 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getPosixPath = getPosixPath;
-exports.resolveWithHome = resolveWithHome;
-
-var _path;
-
-function _load_path() {
-  return _path = __webpack_require__(0);
-}
-
-const userHome = __webpack_require__(67).default;
-
-function getPosixPath(path) {
-  return path.replace(/\\/g, '/');
-}
-
-function resolveWithHome(path) {
-  const homePattern = process.platform === 'win32' ? /^~(\/|\\)/ : /^~\//;
-  if (homePattern.test(path)) {
-    return (0, (_path || _load_path()).resolve)(userHome, path.substr(2));
-  }
-
-  return (0, (_path || _load_path()).resolve)(path);
-}
-
-/***/ }),
-/* 378 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireDefault(__webpack_require__(5));
-}
-
-var _http;
-
-function _load_http() {
-  return _http = _interopRequireDefault(__webpack_require__(87));
-}
-
-var _url;
-
-function _load_url() {
-  return _url = _interopRequireDefault(__webpack_require__(24));
-}
-
-var _dnscache;
-
-function _load_dnscache() {
-  return _dnscache = _interopRequireDefault(__webpack_require__(637));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _requestCaptureHar;
-
-function _load_requestCaptureHar() {
-  return _requestCaptureHar = _interopRequireDefault(__webpack_require__(799));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _blockingQueue;
-
-function _load_blockingQueue() {
-  return _blockingQueue = _interopRequireDefault(__webpack_require__(110));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _network;
-
-function _load_network() {
-  return _network = _interopRequireWildcard(__webpack_require__(337));
-}
-
-var _map;
-
-function _load_map() {
-  return _map = _interopRequireDefault(__webpack_require__(29));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-// Initialize DNS cache so we don't look up the same
-// domains like registry.yarnpkg.com over and over again
-// for each request.
-(0, (_dnscache || _load_dnscache()).default)({
-  enable: true,
-  ttl: 300,
-  cachesize: 10
-});
-
-const successHosts = (0, (_map || _load_map()).default)();
-const controlOffline = (_network || _load_network()).isOffline();
-
-class RequestManager {
-  constructor(reporter) {
-    this.offlineNoRequests = false;
-    this._requestCaptureHar = null;
-    this._requestModule = null;
-    this.offlineQueue = [];
-    this.captureHar = false;
-    this.httpsProxy = '';
-    this.ca = null;
-    this.httpProxy = '';
-    this.strictSSL = true;
-    this.userAgent = '';
-    this.reporter = reporter;
-    this.running = 0;
-    this.queue = [];
-    this.cache = {};
-    this.max = (_constants || _load_constants()).NETWORK_CONCURRENCY;
-    this.maxRetryAttempts = 5;
-  }
-
-  setOptions(opts) {
-    if (opts.userAgent != null) {
-      this.userAgent = opts.userAgent;
-    }
-
-    if (opts.offline != null) {
-      this.offlineNoRequests = opts.offline;
-    }
-
-    if (opts.captureHar != null) {
-      this.captureHar = opts.captureHar;
-    }
-
-    if (opts.httpProxy != null) {
-      this.httpProxy = opts.httpProxy || '';
-    }
-
-    if (opts.httpsProxy === '') {
-      this.httpsProxy = opts.httpProxy || '';
-    } else if (opts.httpsProxy === false) {
-      this.httpsProxy = false;
-    } else {
-      this.httpsProxy = opts.httpsProxy || '';
-    }
-
-    if (opts.strictSSL !== null && typeof opts.strictSSL !== 'undefined') {
-      this.strictSSL = opts.strictSSL;
-    }
-
-    if (opts.ca != null && opts.ca.length > 0) {
-      this.ca = opts.ca;
-    }
-
-    if (opts.networkConcurrency != null) {
-      this.max = opts.networkConcurrency;
-    }
-
-    if (opts.networkTimeout != null) {
-      this.timeout = opts.networkTimeout;
-    }
-
-    if (opts.maxRetryAttempts != null) {
-      this.maxRetryAttempts = opts.maxRetryAttempts;
-    }
-
-    if (opts.cafile != null && opts.cafile != '') {
-      // The CA bundle file can contain one or more certificates with comments/text between each PEM block.
-      // tls.connect wants an array of certificates without any comments/text, so we need to split the string
-      // and strip out any text in between the certificates
-      try {
-        const bundle = (_fs || _load_fs()).default.readFileSync(opts.cafile).toString();
-        const hasPemPrefix = block => block.startsWith('-----BEGIN ');
-        // opts.cafile overrides opts.ca, this matches with npm behavior
-        this.ca = bundle.split(/(-----BEGIN .*\r?\n[^-]+\r?\n--.*)/).filter(hasPemPrefix);
-      } catch (err) {
-        this.reporter.error(`Could not open cafile: ${err.message}`);
-      }
-    }
-
-    if (opts.cert != null) {
-      this.cert = opts.cert;
-    }
-
-    if (opts.key != null) {
-      this.key = opts.key;
-    }
-  }
-
-  /**
-   * Lazy load `request` since it is exceptionally expensive to load and is
-   * often not needed at all.
-   */
-
-  _getRequestModule() {
-    if (!this._requestModule) {
-      const request = __webpack_require__(800);
-      if (this.captureHar) {
-        this._requestCaptureHar = new (_requestCaptureHar || _load_requestCaptureHar()).default(request);
-        this._requestModule = this._requestCaptureHar.request.bind(this._requestCaptureHar);
-      } else {
-        this._requestModule = request;
-      }
-    }
-    return this._requestModule;
-  }
-
-  /**
-   * Queue up a request.
-   */
-
-  request(params) {
-    if (this.offlineNoRequests) {
-      return Promise.reject(new (_errors || _load_errors()).MessageError(this.reporter.lang('cantRequestOffline', params.url)));
-    }
-
-    const cached = this.cache[params.url];
-    if (cached) {
-      return cached;
-    }
-
-    params.method = params.method || 'GET';
-    params.forever = true;
-    params.retryAttempts = 0;
-    params.strictSSL = this.strictSSL;
-    params.headers = Object.assign({
-      'User-Agent': this.userAgent
-    }, params.headers);
-
-    const promise = new Promise((resolve, reject) => {
-      this.queue.push({ params, reject, resolve });
-      this.shiftQueue();
-    });
-
-    // we can't cache a request with a processor
-    if (!params.process) {
-      this.cache[params.url] = promise;
-    }
-
-    return promise;
-  }
-
-  /**
-   * Clear the request cache. This is important as we cache all HTTP requests so you'll
-   * want to do this as soon as you can.
-   */
-
-  clearCache() {
-    this.cache = {};
-    if (this._requestCaptureHar != null) {
-      this._requestCaptureHar.clear();
-    }
-  }
-
-  /**
-   * Check if an error is possibly due to lost or poor network connectivity.
-   */
-
-  isPossibleOfflineError(err) {
-    const code = err.code,
-          hostname = err.hostname;
-
-    if (!code) {
-      return false;
-    }
-
-    // network was previously online but now we're offline
-    const possibleOfflineChange = !controlOffline && !(_network || _load_network()).isOffline();
-    if (code === 'ENOTFOUND' && possibleOfflineChange) {
-      // can't resolve a domain
-      return true;
-    }
-
-    // used to be able to resolve this domain! something is wrong
-    if (code === 'ENOTFOUND' && hostname && successHosts[hostname]) {
-      // can't resolve this domain but we've successfully resolved it before
-      return true;
-    }
-
-    // network was previously offline and we can't resolve the domain
-    if (code === 'ENOTFOUND' && controlOffline) {
-      return true;
-    }
-
-    // connection was reset or dropped
-    if (code === 'ECONNRESET') {
-      return true;
-    }
-
-    // TCP timeout
-    if (code === 'ESOCKETTIMEDOUT' || code === 'ETIMEDOUT') {
-      return true;
-    }
-
-    return false;
-  }
-
-  /**
-   * Queue up request arguments to be retried. Start a network connectivity timer if there
-   * isn't already one.
-   */
-
-  queueForRetry(opts) {
-    if (opts.retryReason) {
-      let containsReason = false;
-
-      for (var _iterator = this.offlineQueue, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const queuedOpts = _ref;
-
-        if (queuedOpts.retryReason === opts.retryReason) {
-          containsReason = true;
-          break;
-        }
-      }
-
-      if (!containsReason) {
-        this.reporter.info(opts.retryReason);
-      }
-    }
-
-    if (!this.offlineQueue.length) {
-      this.initOfflineRetry();
-    }
-
-    this.offlineQueue.push(opts);
-  }
-
-  /**
-   * Begin timers to retry failed requests when we possibly establish network connectivity
-   * again.
-   */
-
-  initOfflineRetry() {
-    setTimeout(() => {
-      const queue = this.offlineQueue;
-      this.offlineQueue = [];
-      for (var _iterator2 = queue, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref2 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref2 = _i2.value;
-        }
-
-        const opts = _ref2;
-
-        this.execute(opts);
-      }
-    }, 3000);
-  }
-
-  /**
-   * Execute a request.
-   */
-
-  execute(opts) {
-    const params = opts.params;
-    const reporter = this.reporter;
-
-
-    const buildNext = fn => data => {
-      fn(data);
-      this.running--;
-      this.shiftQueue();
-    };
-
-    const resolve = buildNext(opts.resolve);
-
-    const rejectNext = buildNext(opts.reject);
-    const reject = function reject(err) {
-      err.message = `${params.url}: ${err.message}`;
-      rejectNext(err);
-    };
-
-    const rejectWithoutUrl = function rejectWithoutUrl(err) {
-      err.message = err.message;
-      rejectNext(err);
-    };
-
-    const queueForRetry = reason => {
-      const attempts = params.retryAttempts || 0;
-      if (attempts >= this.maxRetryAttempts - 1) {
-        return false;
-      }
-      if (opts.params.method && opts.params.method.toUpperCase() !== 'GET') {
-        return false;
-      }
-      params.retryAttempts = attempts + 1;
-      if (typeof params.cleanup === 'function') {
-        params.cleanup();
-      }
-      opts.retryReason = reason;
-      this.queueForRetry(opts);
-      return true;
-    };
-
-    let calledOnError = false;
-    const onError = err => {
-      if (calledOnError) {
-        return;
-      }
-      calledOnError = true;
-
-      if (this.isPossibleOfflineError(err)) {
-        if (!queueForRetry(this.reporter.lang('offlineRetrying'))) {
-          reject(err);
-        }
-      } else {
-        reject(err);
-      }
-    };
-
-    if (!params.process) {
-      const parts = (_url || _load_url()).default.parse(params.url);
-
-      params.callback = (err, res, body) => {
-        if (err) {
-          onError(err);
-          return;
-        }
-
-        successHosts[parts.hostname] = true;
-
-        this.reporter.verbose(this.reporter.lang('verboseRequestFinish', params.url, res.statusCode));
-
-        if (res.statusCode === 408 || res.statusCode >= 500) {
-          const description = `${res.statusCode} ${(_http || _load_http()).default.STATUS_CODES[res.statusCode]}`;
-          if (!queueForRetry(this.reporter.lang('internalServerErrorRetrying', description))) {
-            throw new (_errors || _load_errors()).ResponseError(this.reporter.lang('requestFailed', description), res.statusCode);
-          } else {
-            return;
-          }
-        }
-
-        if (res.statusCode === 401 && res.caseless && res.caseless.get('server') === 'GitHub.com') {
-          const message = `${res.body.message}. If using GITHUB_TOKEN in your env, check that it is valid.`;
-          rejectWithoutUrl(new Error(this.reporter.lang('unauthorizedResponse', res.caseless.get('server'), message)));
-        }
-
-        if (res.statusCode === 401 && res.headers['www-authenticate']) {
-          const authMethods = res.headers['www-authenticate'].split(/,\s*/).map(s => s.toLowerCase());
-
-          if (authMethods.indexOf('otp') !== -1) {
-            reject(new (_errors || _load_errors()).OneTimePasswordError());
-            return;
-          }
-        }
-
-        if (body && typeof body.error === 'string') {
-          reject(new Error(body.error));
-          return;
-        }
-
-        if ([400, 401, 404].concat(params.rejectStatusCode || []).indexOf(res.statusCode) !== -1) {
-          // So this is actually a rejection ... the hosted git resolver uses this to know whether http is supported
-          resolve(false);
-        } else if (res.statusCode >= 400) {
-          const errMsg = body && body.message || reporter.lang('requestError', params.url, res.statusCode);
-          reject(new Error(errMsg));
-        } else {
-          resolve(body);
-        }
-      };
-    }
-
-    if (params.buffer) {
-      params.encoding = null;
-    }
-
-    let proxy = this.httpProxy;
-    if (params.url.startsWith('https:')) {
-      proxy = this.httpsProxy;
-    }
-
-    if (proxy) {
-      // if no proxy is set, do not pass a proxy down to request.
-      // the request library will internally check the HTTP_PROXY and HTTPS_PROXY env vars.
-      params.proxy = String(proxy);
-    } else if (proxy === false) {
-      // passing empty string prevents the underlying library from falling back to the env vars.
-      // an explicit false in the yarn config should override the env var. See #4546.
-      params.proxy = '';
-    }
-
-    if (this.ca != null) {
-      params.ca = this.ca;
-    }
-
-    if (this.cert != null) {
-      params.cert = this.cert;
-    }
-
-    if (this.key != null) {
-      params.key = this.key;
-    }
-
-    if (this.timeout != null) {
-      params.timeout = this.timeout;
-    }
-
-    const request = this._getRequestModule();
-    const req = request(params);
-    this.reporter.verbose(this.reporter.lang('verboseRequestStart', params.method, params.url));
-
-    req.on('error', onError);
-
-    const queue = params.queue;
-    if (queue) {
-      req.on('data', queue.stillActive.bind(queue));
-    }
-
-    const process = params.process;
-    if (process) {
-      req.on('response', res => {
-        if (res.statusCode >= 200 && res.statusCode < 300) {
-          return;
-        }
-
-        const description = `${res.statusCode} ${(_http || _load_http()).default.STATUS_CODES[res.statusCode]}`;
-        reject(new (_errors || _load_errors()).ResponseError(this.reporter.lang('requestFailed', description), res.statusCode));
-
-        req.abort();
-      });
-      process(req, resolve, reject);
-    }
-  }
-
-  /**
-   * Remove an item from the queue. Create it's request options and execute it.
-   */
-
-  shiftQueue() {
-    if (this.running >= this.max || !this.queue.length) {
-      return;
-    }
-
-    const opts = this.queue.shift();
-
-    this.running++;
-    this.execute(opts);
-  }
-
-  saveHar(filename) {
-    if (!this.captureHar) {
-      throw new Error(this.reporter.lang('requestManagerNotSetupHAR'));
-    }
-    // No request may have occurred at all.
-    this._getRequestModule();
-    (0, (_invariant || _load_invariant()).default)(this._requestCaptureHar != null, 'request-capture-har not setup');
-    this._requestCaptureHar.saveHar(filename);
-  }
-}
-exports.default = RequestManager;
-
-/***/ }),
-/* 379 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var crypto_hash_sha512 = __webpack_require__(76).lowlevel.crypto_hash;
-
-/*
- * This file is a 1:1 port from the OpenBSD blowfish.c and bcrypt_pbkdf.c. As a
- * result, it retains the original copyright and license. The two files are
- * under slightly different (but compatible) licenses, and are here combined in
- * one file.
- *
- * Credit for the actual porting work goes to:
- *  Devi Mandiri <me@devi.web.id>
- */
-
-/*
- * The Blowfish portions are under the following license:
- *
- * Blowfish block cipher for OpenBSD
- * Copyright 1997 Niels Provos <provos@physnet.uni-hamburg.de>
- * All rights reserved.
- *
- * Implementation advice by David Mazieres <dm@lcs.mit.edu>.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions
- * are met:
- * 1. Redistributions of source code must retain the above copyright
- *    notice, this list of conditions and the following disclaimer.
- * 2. Redistributions in binary form must reproduce the above copyright
- *    notice, this list of conditions and the following disclaimer in the
- *    documentation and/or other materials provided with the distribution.
- * 3. The name of the author may not be used to endorse or promote products
- *    derived from this software without specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE AUTHOR ``AS IS'' AND ANY EXPRESS OR
- * IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES
- * OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED.
- * IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY DIRECT, INDIRECT,
- * INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT
- * NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,
- * DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY
- * THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
- * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF
- * THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
- */
-
-/*
- * The bcrypt_pbkdf portions are under the following license:
- *
- * Copyright (c) 2013 Ted Unangst <tedu@openbsd.org>
- *
- * Permission to use, copy, modify, and distribute this software for any
- * purpose with or without fee is hereby granted, provided that the above
- * copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
- * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
- * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
- * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
- * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
- * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
- * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
- */
-
-/*
- * Performance improvements (Javascript-specific):
- *
- * Copyright 2016, Joyent Inc
- * Author: Alex Wilson <alex.wilson@joyent.com>
- *
- * Permission to use, copy, modify, and distribute this software for any
- * purpose with or without fee is hereby granted, provided that the above
- * copyright notice and this permission notice appear in all copies.
- *
- * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
- * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
- * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
- * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
- * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
- * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
- * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
- */
-
-// Ported from OpenBSD bcrypt_pbkdf.c v1.9
-
-var BLF_J = 0;
-
-var Blowfish = function() {
-  this.S = [
-    new Uint32Array([
-      0xd1310ba6, 0x98dfb5ac, 0x2ffd72db, 0xd01adfb7,
-      0xb8e1afed, 0x6a267e96, 0xba7c9045, 0xf12c7f99,
-      0x24a19947, 0xb3916cf7, 0x0801f2e2, 0x858efc16,
-      0x636920d8, 0x71574e69, 0xa458fea3, 0xf4933d7e,
-      0x0d95748f, 0x728eb658, 0x718bcd58, 0x82154aee,
-      0x7b54a41d, 0xc25a59b5, 0x9c30d539, 0x2af26013,
-      0xc5d1b023, 0x286085f0, 0xca417918, 0xb8db38ef,
-      0x8e79dcb0, 0x603a180e, 0x6c9e0e8b, 0xb01e8a3e,
-      0xd71577c1, 0xbd314b27, 0x78af2fda, 0x55605c60,
-      0xe65525f3, 0xaa55ab94, 0x57489862, 0x63e81440,
-      0x55ca396a, 0x2aab10b6, 0xb4cc5c34, 0x1141e8ce,
-      0xa15486af, 0x7c72e993, 0xb3ee1411, 0x636fbc2a,
-      0x2ba9c55d, 0x741831f6, 0xce5c3e16, 0x9b87931e,
-      0xafd6ba33, 0x6c24cf5c, 0x7a325381, 0x28958677,
-      0x3b8f4898, 0x6b4bb9af, 0xc4bfe81b, 0x66282193,
-      0x61d809cc, 0xfb21a991, 0x487cac60, 0x5dec8032,
-      0xef845d5d, 0xe98575b1, 0xdc262302, 0xeb651b88,
-      0x23893e81, 0xd396acc5, 0x0f6d6ff3, 0x83f44239,
-      0x2e0b4482, 0xa4842004, 0x69c8f04a, 0x9e1f9b5e,
-      0x21c66842, 0xf6e96c9a, 0x670c9c61, 0xabd388f0,
-      0x6a51a0d2, 0xd8542f68, 0x960fa728, 0xab5133a3,
-      0x6eef0b6c, 0x137a3be4, 0xba3bf050, 0x7efb2a98,
-      0xa1f1651d, 0x39af0176, 0x66ca593e, 0x82430e88,
-      0x8cee8619, 0x456f9fb4, 0x7d84a5c3, 0x3b8b5ebe,
-      0xe06f75d8, 0x85c12073, 0x401a449f, 0x56c16aa6,
-      0x4ed3aa62, 0x363f7706, 0x1bfedf72, 0x429b023d,
-      0x37d0d724, 0xd00a1248, 0xdb0fead3, 0x49f1c09b,
-      0x075372c9, 0x80991b7b, 0x25d479d8, 0xf6e8def7,
-      0xe3fe501a, 0xb6794c3b, 0x976ce0bd, 0x04c006ba,
-      0xc1a94fb6, 0x409f60c4, 0x5e5c9ec2, 0x196a2463,
-      0x68fb6faf, 0x3e6c53b5, 0x1339b2eb, 0x3b52ec6f,
-      0x6dfc511f, 0x9b30952c, 0xcc814544, 0xaf5ebd09,
-      0xbee3d004, 0xde334afd, 0x660f2807, 0x192e4bb3,
-      0xc0cba857, 0x45c8740f, 0xd20b5f39, 0xb9d3fbdb,
-      0x5579c0bd, 0x1a60320a, 0xd6a100c6, 0x402c7279,
-      0x679f25fe, 0xfb1fa3cc, 0x8ea5e9f8, 0xdb3222f8,
-      0x3c7516df, 0xfd616b15, 0x2f501ec8, 0xad0552ab,
-      0x323db5fa, 0xfd238760, 0x53317b48, 0x3e00df82,
-      0x9e5c57bb, 0xca6f8ca0, 0x1a87562e, 0xdf1769db,
-      0xd542a8f6, 0x287effc3, 0xac6732c6, 0x8c4f5573,
-      0x695b27b0, 0xbbca58c8, 0xe1ffa35d, 0xb8f011a0,
-      0x10fa3d98, 0xfd2183b8, 0x4afcb56c, 0x2dd1d35b,
-      0x9a53e479, 0xb6f84565, 0xd28e49bc, 0x4bfb9790,
-      0xe1ddf2da, 0xa4cb7e33, 0x62fb1341, 0xcee4c6e8,
-      0xef20cada, 0x36774c01, 0xd07e9efe, 0x2bf11fb4,
-      0x95dbda4d, 0xae909198, 0xeaad8e71, 0x6b93d5a0,
-      0xd08ed1d0, 0xafc725e0, 0x8e3c5b2f, 0x8e7594b7,
-      0x8ff6e2fb, 0xf2122b64, 0x8888b812, 0x900df01c,
-      0x4fad5ea0, 0x688fc31c, 0xd1cff191, 0xb3a8c1ad,
-      0x2f2f2218, 0xbe0e1777, 0xea752dfe, 0x8b021fa1,
-      0xe5a0cc0f, 0xb56f74e8, 0x18acf3d6, 0xce89e299,
-      0xb4a84fe0, 0xfd13e0b7, 0x7cc43b81, 0xd2ada8d9,
-      0x165fa266, 0x80957705, 0x93cc7314, 0x211a1477,
-      0xe6ad2065, 0x77b5fa86, 0xc75442f5, 0xfb9d35cf,
-      0xebcdaf0c, 0x7b3e89a0, 0xd6411bd3, 0xae1e7e49,
-      0x00250e2d, 0x2071b35e, 0x226800bb, 0x57b8e0af,
-      0x2464369b, 0xf009b91e, 0x5563911d, 0x59dfa6aa,
-      0x78c14389, 0xd95a537f, 0x207d5ba2, 0x02e5b9c5,
-      0x83260376, 0x6295cfa9, 0x11c81968, 0x4e734a41,
-      0xb3472dca, 0x7b14a94a, 0x1b510052, 0x9a532915,
-      0xd60f573f, 0xbc9bc6e4, 0x2b60a476, 0x81e67400,
-      0x08ba6fb5, 0x571be91f, 0xf296ec6b, 0x2a0dd915,
-      0xb6636521, 0xe7b9f9b6, 0xff34052e, 0xc5855664,
-      0x53b02d5d, 0xa99f8fa1, 0x08ba4799, 0x6e85076a]),
-    new Uint32Array([
-      0x4b7a70e9, 0xb5b32944, 0xdb75092e, 0xc4192623,
-      0xad6ea6b0, 0x49a7df7d, 0x9cee60b8, 0x8fedb266,
-      0xecaa8c71, 0x699a17ff, 0x5664526c, 0xc2b19ee1,
-      0x193602a5, 0x75094c29, 0xa0591340, 0xe4183a3e,
-      0x3f54989a, 0x5b429d65, 0x6b8fe4d6, 0x99f73fd6,
-      0xa1d29c07, 0xefe830f5, 0x4d2d38e6, 0xf0255dc1,
-      0x4cdd2086, 0x8470eb26, 0x6382e9c6, 0x021ecc5e,
-      0x09686b3f, 0x3ebaefc9, 0x3c971814, 0x6b6a70a1,
-      0x687f3584, 0x52a0e286, 0xb79c5305, 0xaa500737,
-      0x3e07841c, 0x7fdeae5c, 0x8e7d44ec, 0x5716f2b8,
-      0xb03ada37, 0xf0500c0d, 0xf01c1f04, 0x0200b3ff,
-      0xae0cf51a, 0x3cb574b2, 0x25837a58, 0xdc0921bd,
-      0xd19113f9, 0x7ca92ff6, 0x94324773, 0x22f54701,
-      0x3ae5e581, 0x37c2dadc, 0xc8b57634, 0x9af3dda7,
-      0xa9446146, 0x0fd0030e, 0xecc8c73e, 0xa4751e41,
-      0xe238cd99, 0x3bea0e2f, 0x3280bba1, 0x183eb331,
-      0x4e548b38, 0x4f6db908, 0x6f420d03, 0xf60a04bf,
-      0x2cb81290, 0x24977c79, 0x5679b072, 0xbcaf89af,
-      0xde9a771f, 0xd9930810, 0xb38bae12, 0xdccf3f2e,
-      0x5512721f, 0x2e6b7124, 0x501adde6, 0x9f84cd87,
-      0x7a584718, 0x7408da17, 0xbc9f9abc, 0xe94b7d8c,
-      0xec7aec3a, 0xdb851dfa, 0x63094366, 0xc464c3d2,
-      0xef1c1847, 0x3215d908, 0xdd433b37, 0x24c2ba16,
-      0x12a14d43, 0x2a65c451, 0x50940002, 0x133ae4dd,
-      0x71dff89e, 0x10314e55, 0x81ac77d6, 0x5f11199b,
-      0x043556f1, 0xd7a3c76b, 0x3c11183b, 0x5924a509,
-      0xf28fe6ed, 0x97f1fbfa, 0x9ebabf2c, 0x1e153c6e,
-      0x86e34570, 0xeae96fb1, 0x860e5e0a, 0x5a3e2ab3,
-      0x771fe71c, 0x4e3d06fa, 0x2965dcb9, 0x99e71d0f,
-      0x803e89d6, 0x5266c825, 0x2e4cc978, 0x9c10b36a,
-      0xc6150eba, 0x94e2ea78, 0xa5fc3c53, 0x1e0a2df4,
-      0xf2f74ea7, 0x361d2b3d, 0x1939260f, 0x19c27960,
-      0x5223a708, 0xf71312b6, 0xebadfe6e, 0xeac31f66,
-      0xe3bc4595, 0xa67bc883, 0xb17f37d1, 0x018cff28,
-      0xc332ddef, 0xbe6c5aa5, 0x65582185, 0x68ab9802,
-      0xeecea50f, 0xdb2f953b, 0x2aef7dad, 0x5b6e2f84,
-      0x1521b628, 0x29076170, 0xecdd4775, 0x619f1510,
-      0x13cca830, 0xeb61bd96, 0x0334fe1e, 0xaa0363cf,
-      0xb5735c90, 0x4c70a239, 0xd59e9e0b, 0xcbaade14,
-      0xeecc86bc, 0x60622ca7, 0x9cab5cab, 0xb2f3846e,
-      0x648b1eaf, 0x19bdf0ca, 0xa02369b9, 0x655abb50,
-      0x40685a32, 0x3c2ab4b3, 0x319ee9d5, 0xc021b8f7,
-      0x9b540b19, 0x875fa099, 0x95f7997e, 0x623d7da8,
-      0xf837889a, 0x97e32d77, 0x11ed935f, 0x16681281,
-      0x0e358829, 0xc7e61fd6, 0x96dedfa1, 0x7858ba99,
-      0x57f584a5, 0x1b227263, 0x9b83c3ff, 0x1ac24696,
-      0xcdb30aeb, 0x532e3054, 0x8fd948e4, 0x6dbc3128,
-      0x58ebf2ef, 0x34c6ffea, 0xfe28ed61, 0xee7c3c73,
-      0x5d4a14d9, 0xe864b7e3, 0x42105d14, 0x203e13e0,
-      0x45eee2b6, 0xa3aaabea, 0xdb6c4f15, 0xfacb4fd0,
-      0xc742f442, 0xef6abbb5, 0x654f3b1d, 0x41cd2105,
-      0xd81e799e, 0x86854dc7, 0xe44b476a, 0x3d816250,
-      0xcf62a1f2, 0x5b8d2646, 0xfc8883a0, 0xc1c7b6a3,
-      0x7f1524c3, 0x69cb7492, 0x47848a0b, 0x5692b285,
-      0x095bbf00, 0xad19489d, 0x1462b174, 0x23820e00,
-      0x58428d2a, 0x0c55f5ea, 0x1dadf43e, 0x233f7061,
-      0x3372f092, 0x8d937e41, 0xd65fecf1, 0x6c223bdb,
-      0x7cde3759, 0xcbee7460, 0x4085f2a7, 0xce77326e,
-      0xa6078084, 0x19f8509e, 0xe8efd855, 0x61d99735,
-      0xa969a7aa, 0xc50c06c2, 0x5a04abfc, 0x800bcadc,
-      0x9e447a2e, 0xc3453484, 0xfdd56705, 0x0e1e9ec9,
-      0xdb73dbd3, 0x105588cd, 0x675fda79, 0xe3674340,
-      0xc5c43465, 0x713e38d8, 0x3d28f89e, 0xf16dff20,
-      0x153e21e7, 0x8fb03d4a, 0xe6e39f2b, 0xdb83adf7]),
-    new Uint32Array([
-      0xe93d5a68, 0x948140f7, 0xf64c261c, 0x94692934,
-      0x411520f7, 0x7602d4f7, 0xbcf46b2e, 0xd4a20068,
-      0xd4082471, 0x3320f46a, 0x43b7d4b7, 0x500061af,
-      0x1e39f62e, 0x97244546, 0x14214f74, 0xbf8b8840,
-      0x4d95fc1d, 0x96b591af, 0x70f4ddd3, 0x66a02f45,
-      0xbfbc09ec, 0x03bd9785, 0x7fac6dd0, 0x31cb8504,
-      0x96eb27b3, 0x55fd3941, 0xda2547e6, 0xabca0a9a,
-      0x28507825, 0x530429f4, 0x0a2c86da, 0xe9b66dfb,
-      0x68dc1462, 0xd7486900, 0x680ec0a4, 0x27a18dee,
-      0x4f3ffea2, 0xe887ad8c, 0xb58ce006, 0x7af4d6b6,
-      0xaace1e7c, 0xd3375fec, 0xce78a399, 0x406b2a42,
-      0x20fe9e35, 0xd9f385b9, 0xee39d7ab, 0x3b124e8b,
-      0x1dc9faf7, 0x4b6d1856, 0x26a36631, 0xeae397b2,
-      0x3a6efa74, 0xdd5b4332, 0x6841e7f7, 0xca7820fb,
-      0xfb0af54e, 0xd8feb397, 0x454056ac, 0xba489527,
-      0x55533a3a, 0x20838d87, 0xfe6ba9b7, 0xd096954b,
-      0x55a867bc, 0xa1159a58, 0xcca92963, 0x99e1db33,
-      0xa62a4a56, 0x3f3125f9, 0x5ef47e1c, 0x9029317c,
-      0xfdf8e802, 0x04272f70, 0x80bb155c, 0x05282ce3,
-      0x95c11548, 0xe4c66d22, 0x48c1133f, 0xc70f86dc,
-      0x07f9c9ee, 0x41041f0f, 0x404779a4, 0x5d886e17,
-      0x325f51eb, 0xd59bc0d1, 0xf2bcc18f, 0x41113564,
-      0x257b7834, 0x602a9c60, 0xdff8e8a3, 0x1f636c1b,
-      0x0e12b4c2, 0x02e1329e, 0xaf664fd1, 0xcad18115,
-      0x6b2395e0, 0x333e92e1, 0x3b240b62, 0xeebeb922,
-      0x85b2a20e, 0xe6ba0d99, 0xde720c8c, 0x2da2f728,
-      0xd0127845, 0x95b794fd, 0x647d0862, 0xe7ccf5f0,
-      0x5449a36f, 0x877d48fa, 0xc39dfd27, 0xf33e8d1e,
-      0x0a476341, 0x992eff74, 0x3a6f6eab, 0xf4f8fd37,
-      0xa812dc60, 0xa1ebddf8, 0x991be14c, 0xdb6e6b0d,
-      0xc67b5510, 0x6d672c37, 0x2765d43b, 0xdcd0e804,
-      0xf1290dc7, 0xcc00ffa3, 0xb5390f92, 0x690fed0b,
-      0x667b9ffb, 0xcedb7d9c, 0xa091cf0b, 0xd9155ea3,
-      0xbb132f88, 0x515bad24, 0x7b9479bf, 0x763bd6eb,
-      0x37392eb3, 0xcc115979, 0x8026e297, 0xf42e312d,
-      0x6842ada7, 0xc66a2b3b, 0x12754ccc, 0x782ef11c,
-      0x6a124237, 0xb79251e7, 0x06a1bbe6, 0x4bfb6350,
-      0x1a6b1018, 0x11caedfa, 0x3d25bdd8, 0xe2e1c3c9,
-      0x44421659, 0x0a121386, 0xd90cec6e, 0xd5abea2a,
-      0x64af674e, 0xda86a85f, 0xbebfe988, 0x64e4c3fe,
-      0x9dbc8057, 0xf0f7c086, 0x60787bf8, 0x6003604d,
-      0xd1fd8346, 0xf6381fb0, 0x7745ae04, 0xd736fccc,
-      0x83426b33, 0xf01eab71, 0xb0804187, 0x3c005e5f,
-      0x77a057be, 0xbde8ae24, 0x55464299, 0xbf582e61,
-      0x4e58f48f, 0xf2ddfda2, 0xf474ef38, 0x8789bdc2,
-      0x5366f9c3, 0xc8b38e74, 0xb475f255, 0x46fcd9b9,
-      0x7aeb2661, 0x8b1ddf84, 0x846a0e79, 0x915f95e2,
-      0x466e598e, 0x20b45770, 0x8cd55591, 0xc902de4c,
-      0xb90bace1, 0xbb8205d0, 0x11a86248, 0x7574a99e,
-      0xb77f19b6, 0xe0a9dc09, 0x662d09a1, 0xc4324633,
-      0xe85a1f02, 0x09f0be8c, 0x4a99a025, 0x1d6efe10,
-      0x1ab93d1d, 0x0ba5a4df, 0xa186f20f, 0x2868f169,
-      0xdcb7da83, 0x573906fe, 0xa1e2ce9b, 0x4fcd7f52,
-      0x50115e01, 0xa70683fa, 0xa002b5c4, 0x0de6d027,
-      0x9af88c27, 0x773f8641, 0xc3604c06, 0x61a806b5,
-      0xf0177a28, 0xc0f586e0, 0x006058aa, 0x30dc7d62,
-      0x11e69ed7, 0x2338ea63, 0x53c2dd94, 0xc2c21634,
-      0xbbcbee56, 0x90bcb6de, 0xebfc7da1, 0xce591d76,
-      0x6f05e409, 0x4b7c0188, 0x39720a3d, 0x7c927c24,
-      0x86e3725f, 0x724d9db9, 0x1ac15bb4, 0xd39eb8fc,
-      0xed545578, 0x08fca5b5, 0xd83d7cd3, 0x4dad0fc4,
-      0x1e50ef5e, 0xb161e6f8, 0xa28514d9, 0x6c51133c,
-      0x6fd5c7e7, 0x56e14ec4, 0x362abfce, 0xddc6c837,
-      0xd79a3234, 0x92638212, 0x670efa8e, 0x406000e0]),
-    new Uint32Array([
-      0x3a39ce37, 0xd3faf5cf, 0xabc27737, 0x5ac52d1b,
-      0x5cb0679e, 0x4fa33742, 0xd3822740, 0x99bc9bbe,
-      0xd5118e9d, 0xbf0f7315, 0xd62d1c7e, 0xc700c47b,
-      0xb78c1b6b, 0x21a19045, 0xb26eb1be, 0x6a366eb4,
-      0x5748ab2f, 0xbc946e79, 0xc6a376d2, 0x6549c2c8,
-      0x530ff8ee, 0x468dde7d, 0xd5730a1d, 0x4cd04dc6,
-      0x2939bbdb, 0xa9ba4650, 0xac9526e8, 0xbe5ee304,
-      0xa1fad5f0, 0x6a2d519a, 0x63ef8ce2, 0x9a86ee22,
-      0xc089c2b8, 0x43242ef6, 0xa51e03aa, 0x9cf2d0a4,
-      0x83c061ba, 0x9be96a4d, 0x8fe51550, 0xba645bd6,
-      0x2826a2f9, 0xa73a3ae1, 0x4ba99586, 0xef5562e9,
-      0xc72fefd3, 0xf752f7da, 0x3f046f69, 0x77fa0a59,
-      0x80e4a915, 0x87b08601, 0x9b09e6ad, 0x3b3ee593,
-      0xe990fd5a, 0x9e34d797, 0x2cf0b7d9, 0x022b8b51,
-      0x96d5ac3a, 0x017da67d, 0xd1cf3ed6, 0x7c7d2d28,
-      0x1f9f25cf, 0xadf2b89b, 0x5ad6b472, 0x5a88f54c,
-      0xe029ac71, 0xe019a5e6, 0x47b0acfd, 0xed93fa9b,
-      0xe8d3c48d, 0x283b57cc, 0xf8d56629, 0x79132e28,
-      0x785f0191, 0xed756055, 0xf7960e44, 0xe3d35e8c,
-      0x15056dd4, 0x88f46dba, 0x03a16125, 0x0564f0bd,
-      0xc3eb9e15, 0x3c9057a2, 0x97271aec, 0xa93a072a,
-      0x1b3f6d9b, 0x1e6321f5, 0xf59c66fb, 0x26dcf319,
-      0x7533d928, 0xb155fdf5, 0x03563482, 0x8aba3cbb,
-      0x28517711, 0xc20ad9f8, 0xabcc5167, 0xccad925f,
-      0x4de81751, 0x3830dc8e, 0x379d5862, 0x9320f991,
-      0xea7a90c2, 0xfb3e7bce, 0x5121ce64, 0x774fbe32,
-      0xa8b6e37e, 0xc3293d46, 0x48de5369, 0x6413e680,
-      0xa2ae0810, 0xdd6db224, 0x69852dfd, 0x09072166,
-      0xb39a460a, 0x6445c0dd, 0x586cdecf, 0x1c20c8ae,
-      0x5bbef7dd, 0x1b588d40, 0xccd2017f, 0x6bb4e3bb,
-      0xdda26a7e, 0x3a59ff45, 0x3e350a44, 0xbcb4cdd5,
-      0x72eacea8, 0xfa6484bb, 0x8d6612ae, 0xbf3c6f47,
-      0xd29be463, 0x542f5d9e, 0xaec2771b, 0xf64e6370,
-      0x740e0d8d, 0xe75b1357, 0xf8721671, 0xaf537d5d,
-      0x4040cb08, 0x4eb4e2cc, 0x34d2466a, 0x0115af84,
-      0xe1b00428, 0x95983a1d, 0x06b89fb4, 0xce6ea048,
-      0x6f3f3b82, 0x3520ab82, 0x011a1d4b, 0x277227f8,
-      0x611560b1, 0xe7933fdc, 0xbb3a792b, 0x344525bd,
-      0xa08839e1, 0x51ce794b, 0x2f32c9b7, 0xa01fbac9,
-      0xe01cc87e, 0xbcc7d1f6, 0xcf0111c3, 0xa1e8aac7,
-      0x1a908749, 0xd44fbd9a, 0xd0dadecb, 0xd50ada38,
-      0x0339c32a, 0xc6913667, 0x8df9317c, 0xe0b12b4f,
-      0xf79e59b7, 0x43f5bb3a, 0xf2d519ff, 0x27d9459c,
-      0xbf97222c, 0x15e6fc2a, 0x0f91fc71, 0x9b941525,
-      0xfae59361, 0xceb69ceb, 0xc2a86459, 0x12baa8d1,
-      0xb6c1075e, 0xe3056a0c, 0x10d25065, 0xcb03a442,
-      0xe0ec6e0e, 0x1698db3b, 0x4c98a0be, 0x3278e964,
-      0x9f1f9532, 0xe0d392df, 0xd3a0342b, 0x8971f21e,
-      0x1b0a7441, 0x4ba3348c, 0xc5be7120, 0xc37632d8,
-      0xdf359f8d, 0x9b992f2e, 0xe60b6f47, 0x0fe3f11d,
-      0xe54cda54, 0x1edad891, 0xce6279cf, 0xcd3e7e6f,
-      0x1618b166, 0xfd2c1d05, 0x848fd2c5, 0xf6fb2299,
-      0xf523f357, 0xa6327623, 0x93a83531, 0x56cccd02,
-      0xacf08162, 0x5a75ebb5, 0x6e163697, 0x88d273cc,
-      0xde966292, 0x81b949d0, 0x4c50901b, 0x71c65614,
-      0xe6c6c7bd, 0x327a140a, 0x45e1d006, 0xc3f27b9a,
-      0xc9aa53fd, 0x62a80f00, 0xbb25bfe2, 0x35bdd2f6,
-      0x71126905, 0xb2040222, 0xb6cbcf7c, 0xcd769c2b,
-      0x53113ec0, 0x1640e3d3, 0x38abbd60, 0x2547adf0,
-      0xba38209c, 0xf746ce76, 0x77afa1c5, 0x20756060,
-      0x85cbfe4e, 0x8ae88dd8, 0x7aaaf9b0, 0x4cf9aa7e,
-      0x1948c25c, 0x02fb8a8c, 0x01c36ae4, 0xd6ebe1f9,
-      0x90d4f869, 0xa65cdea0, 0x3f09252d, 0xc208e69f,
-      0xb74e6132, 0xce77e25b, 0x578fdfe3, 0x3ac372e6])
-    ];
-  this.P = new Uint32Array([
-    0x243f6a88, 0x85a308d3, 0x13198a2e, 0x03707344,
-    0xa4093822, 0x299f31d0, 0x082efa98, 0xec4e6c89,
-    0x452821e6, 0x38d01377, 0xbe5466cf, 0x34e90c6c,
-    0xc0ac29b7, 0xc97c50dd, 0x3f84d5b5, 0xb5470917,
-    0x9216d5d9, 0x8979fb1b]);
-};
-
-function F(S, x8, i) {
-  return (((S[0][x8[i+3]] +
-            S[1][x8[i+2]]) ^
-            S[2][x8[i+1]]) +
-            S[3][x8[i]]);
-};
-
-Blowfish.prototype.encipher = function(x, x8) {
-  if (x8 === undefined) {
-    x8 = new Uint8Array(x.buffer);
-    if (x.byteOffset !== 0)
-      x8 = x8.subarray(x.byteOffset);
-  }
-  x[0] ^= this.P[0];
-  for (var i = 1; i < 16; i += 2) {
-    x[1] ^= F(this.S, x8, 0) ^ this.P[i];
-    x[0] ^= F(this.S, x8, 4) ^ this.P[i+1];
-  }
-  var t = x[0];
-  x[0] = x[1] ^ this.P[17];
-  x[1] = t;
-};
-
-Blowfish.prototype.decipher = function(x) {
-  var x8 = new Uint8Array(x.buffer);
-  if (x.byteOffset !== 0)
-    x8 = x8.subarray(x.byteOffset);
-  x[0] ^= this.P[17];
-  for (var i = 16; i > 0; i -= 2) {
-    x[1] ^= F(this.S, x8, 0) ^ this.P[i];
-    x[0] ^= F(this.S, x8, 4) ^ this.P[i-1];
-  }
-  var t = x[0];
-  x[0] = x[1] ^ this.P[0];
-  x[1] = t;
-};
-
-function stream2word(data, databytes){
-  var i, temp = 0;
-  for (i = 0; i < 4; i++, BLF_J++) {
-    if (BLF_J >= databytes) BLF_J = 0;
-    temp = (temp << 8) | data[BLF_J];
-  }
-  return temp;
-};
-
-Blowfish.prototype.expand0state = function(key, keybytes) {
-  var d = new Uint32Array(2), i, k;
-  var d8 = new Uint8Array(d.buffer);
-
-  for (i = 0, BLF_J = 0; i < 18; i++) {
-    this.P[i] ^= stream2word(key, keybytes);
-  }
-  BLF_J = 0;
-
-  for (i = 0; i < 18; i += 2) {
-    this.encipher(d, d8);
-    this.P[i]   = d[0];
-    this.P[i+1] = d[1];
-  }
-
-  for (i = 0; i < 4; i++) {
-    for (k = 0; k < 256; k += 2) {
-      this.encipher(d, d8);
-      this.S[i][k]   = d[0];
-      this.S[i][k+1] = d[1];
-    }
-  }
-};
-
-Blowfish.prototype.expandstate = function(data, databytes, key, keybytes) {
-  var d = new Uint32Array(2), i, k;
-
-  for (i = 0, BLF_J = 0; i < 18; i++) {
-    this.P[i] ^= stream2word(key, keybytes);
-  }
-
-  for (i = 0, BLF_J = 0; i < 18; i += 2) {
-    d[0] ^= stream2word(data, databytes);
-    d[1] ^= stream2word(data, databytes);
-    this.encipher(d);
-    this.P[i]   = d[0];
-    this.P[i+1] = d[1];
-  }
-
-  for (i = 0; i < 4; i++) {
-    for (k = 0; k < 256; k += 2) {
-      d[0] ^= stream2word(data, databytes);
-      d[1] ^= stream2word(data, databytes);
-      this.encipher(d);
-      this.S[i][k]   = d[0];
-      this.S[i][k+1] = d[1];
-    }
-  }
-  BLF_J = 0;
-};
-
-Blowfish.prototype.enc = function(data, blocks) {
-  for (var i = 0; i < blocks; i++) {
-    this.encipher(data.subarray(i*2));
-  }
-};
-
-Blowfish.prototype.dec = function(data, blocks) {
-  for (var i = 0; i < blocks; i++) {
-    this.decipher(data.subarray(i*2));
-  }
-};
-
-var BCRYPT_BLOCKS = 8,
-    BCRYPT_HASHSIZE = 32;
-
-function bcrypt_hash(sha2pass, sha2salt, out) {
-  var state = new Blowfish(),
-      cdata = new Uint32Array(BCRYPT_BLOCKS), i,
-      ciphertext = new Uint8Array([79,120,121,99,104,114,111,109,97,116,105,
-            99,66,108,111,119,102,105,115,104,83,119,97,116,68,121,110,97,109,
-            105,116,101]); //"OxychromaticBlowfishSwatDynamite"
-
-  state.expandstate(sha2salt, 64, sha2pass, 64);
-  for (i = 0; i < 64; i++) {
-    state.expand0state(sha2salt, 64);
-    state.expand0state(sha2pass, 64);
-  }
-
-  for (i = 0; i < BCRYPT_BLOCKS; i++)
-    cdata[i] = stream2word(ciphertext, ciphertext.byteLength);
-  for (i = 0; i < 64; i++)
-    state.enc(cdata, cdata.byteLength / 8);
-
-  for (i = 0; i < BCRYPT_BLOCKS; i++) {
-    out[4*i+3] = cdata[i] >>> 24;
-    out[4*i+2] = cdata[i] >>> 16;
-    out[4*i+1] = cdata[i] >>> 8;
-    out[4*i+0] = cdata[i];
-  }
-};
-
-function bcrypt_pbkdf(pass, passlen, salt, saltlen, key, keylen, rounds) {
-  var sha2pass = new Uint8Array(64),
-      sha2salt = new Uint8Array(64),
-      out = new Uint8Array(BCRYPT_HASHSIZE),
-      tmpout = new Uint8Array(BCRYPT_HASHSIZE),
-      countsalt = new Uint8Array(saltlen+4),
-      i, j, amt, stride, dest, count,
-      origkeylen = keylen;
-
-  if (rounds < 1)
-    return -1;
-  if (passlen === 0 || saltlen === 0 || keylen === 0 ||
-      keylen > (out.byteLength * out.byteLength) || saltlen > (1<<20))
-    return -1;
-
-  stride = Math.floor((keylen + out.byteLength - 1) / out.byteLength);
-  amt = Math.floor((keylen + stride - 1) / stride);
-
-  for (i = 0; i < saltlen; i++)
-    countsalt[i] = salt[i];
-
-  crypto_hash_sha512(sha2pass, pass, passlen);
-
-  for (count = 1; keylen > 0; count++) {
-    countsalt[saltlen+0] = count >>> 24;
-    countsalt[saltlen+1] = count >>> 16;
-    countsalt[saltlen+2] = count >>>  8;
-    countsalt[saltlen+3] = count;
-
-    crypto_hash_sha512(sha2salt, countsalt, saltlen + 4);
-    bcrypt_hash(sha2pass, sha2salt, tmpout);
-    for (i = out.byteLength; i--;)
-      out[i] = tmpout[i];
-
-    for (i = 1; i < rounds; i++) {
-      crypto_hash_sha512(sha2salt, tmpout, tmpout.byteLength);
-      bcrypt_hash(sha2pass, sha2salt, tmpout);
-      for (j = 0; j < out.byteLength; j++)
-        out[j] ^= tmpout[j];
-    }
-
-    amt = Math.min(amt, keylen);
-    for (i = 0; i < amt; i++) {
-      dest = i * stride + (count - 1);
-      if (dest >= origkeylen)
-        break;
-      key[dest] = out[i];
-    }
-    keylen -= i;
-  }
-
-  return 0;
-};
-
-module.exports = {
-      BLOCKS: BCRYPT_BLOCKS,
-      HASHSIZE: BCRYPT_HASHSIZE,
-      hash: bcrypt_hash,
-      pbkdf: bcrypt_pbkdf
-};
-
-
-/***/ }),
-/* 380 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var bufferFill = __webpack_require__(594)
-var allocUnsafe = __webpack_require__(593)
-
-module.exports = function alloc (size, fill, encoding) {
-  if (typeof size !== 'number') {
-    throw new TypeError('"size" argument must be a number')
-  }
-
-  if (size < 0) {
-    throw new RangeError('"size" argument must not be negative')
-  }
-
-  if (Buffer.alloc) {
-    return Buffer.alloc(size, fill, encoding)
-  }
-
-  var buffer = allocUnsafe(size)
-
-  if (size === 0) {
-    return buffer
-  }
-
-  if (fill === undefined) {
-    return bufferFill(buffer, 0)
-  }
-
-  if (typeof encoding !== 'string') {
-    encoding = undefined
-  }
-
-  return bufferFill(buffer, fill, encoding)
-}
-
-
-/***/ }),
-/* 381 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const restoreCursor = __webpack_require__(818);
-
-let hidden = false;
-
-exports.show = stream => {
-	const s = stream || process.stderr;
-
-	if (!s.isTTY) {
-		return;
-	}
-
-	hidden = false;
-	s.write('\u001b[?25h');
-};
-
-exports.hide = stream => {
-	const s = stream || process.stderr;
-
-	if (!s.isTTY) {
-		return;
-	}
-
-	restoreCursor();
-	hidden = true;
-	s.write('\u001b[?25l');
-};
-
-exports.toggle = (force, stream) => {
-	if (force !== undefined) {
-		hidden = force;
-	}
-
-	if (hidden) {
-		exports.show(stream);
-	} else {
-		exports.hide(stream);
-	}
-};
-
-
-/***/ }),
-/* 382 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var objectAssign = __webpack_require__(303);
-var stringWidth = __webpack_require__(945);
-
-function codeRegex(capture){
-  return capture ? /\u001b\[((?:\d*;){0,5}\d*)m/g : /\u001b\[(?:\d*;){0,5}\d*m/g
-}
-
-function strlen(str){
-  var code = codeRegex();
-  var stripped = ("" + str).replace(code,'');
-  var split = stripped.split("\n");
-  return split.reduce(function (memo, s) { return (stringWidth(s) > memo) ? stringWidth(s) : memo }, 0);
-}
-
-function repeat(str,times){
-  return Array(times + 1).join(str);
-}
-
-function pad(str, len, pad, dir) {
-  var length = strlen(str);
-  if (len + 1 >= length) {
-    var padlen = len - length;
-    switch (dir) {
-      case 'right':
-        str = repeat(pad, padlen) + str;
-        break;
-
-      case 'center':
-        var right = Math.ceil((padlen) / 2);
-        var left = padlen - right;
-        str = repeat(pad, left) + str + repeat(pad, right);
-        break;
-
-      default :
-        str = str + repeat(pad,padlen);
-        break;
-    }
-  }
-  return str;
-}
-
-var codeCache = {};
-
-function addToCodeCache(name,on,off){
-  on = '\u001b[' + on + 'm';
-  off = '\u001b[' + off + 'm';
-  codeCache[on] = {set:name,to:true};
-  codeCache[off] = {set:name,to:false};
-  codeCache[name] = {on:on,off:off};
-}
-
-//https://github.com/Marak/colors.js/blob/master/lib/styles.js
-addToCodeCache('bold', 1, 22);
-addToCodeCache('italics', 3, 23);
-addToCodeCache('underline', 4, 24);
-addToCodeCache('inverse', 7, 27);
-addToCodeCache('strikethrough', 9, 29);
-
-
-function updateState(state, controlChars){
-  var controlCode = controlChars[1] ? parseInt(controlChars[1].split(';')[0]) : 0;
-  if ( (controlCode >= 30 && controlCode <= 39)
-     || (controlCode >= 90 && controlCode <= 97)
-  ) {
-    state.lastForegroundAdded = controlChars[0];
-    return;
-  }
-  if ( (controlCode >= 40 && controlCode <= 49)
-     || (controlCode >= 100 && controlCode <= 107)
-  ) {
-    state.lastBackgroundAdded = controlChars[0];
-    return;
-  }
-  if (controlCode === 0) {
-    for (var i in state) {
-      /* istanbul ignore else */
-      if (state.hasOwnProperty(i)) {
-        delete state[i];
-      }
-    }
-    return;
-  }
-  var info = codeCache[controlChars[0]];
-  if (info) {
-    state[info.set] = info.to;
-  }
-}
-
-function readState(line){
-  var code = codeRegex(true);
-  var controlChars = code.exec(line);
-  var state = {};
-  while(controlChars !== null){
-    updateState(state, controlChars);
-    controlChars = code.exec(line);
-  }
-  return state;
-}
-
-function unwindState(state,ret){
-  var lastBackgroundAdded = state.lastBackgroundAdded;
-  var lastForegroundAdded = state.lastForegroundAdded;
-
-  delete state.lastBackgroundAdded;
-  delete state.lastForegroundAdded;
-
-  Object.keys(state).forEach(function(key){
-    if(state[key]){
-      ret += codeCache[key].off;
-    }
-  });
-
-  if(lastBackgroundAdded && (lastBackgroundAdded != '\u001b[49m')){
-    ret += '\u001b[49m';
-  }
-  if(lastForegroundAdded && (lastForegroundAdded != '\u001b[39m')){
-    ret += '\u001b[39m';
-  }
-
-  return ret;
-}
-
-function rewindState(state,ret){
-  var lastBackgroundAdded = state.lastBackgroundAdded;
-  var lastForegroundAdded = state.lastForegroundAdded;
-
-  delete state.lastBackgroundAdded;
-  delete state.lastForegroundAdded;
-
-  Object.keys(state).forEach(function(key){
-    if(state[key]){
-      ret = codeCache[key].on + ret;
-    }
-  });
-
-  if(lastBackgroundAdded && (lastBackgroundAdded != '\u001b[49m')){
-    ret = lastBackgroundAdded + ret;
-  }
-  if(lastForegroundAdded && (lastForegroundAdded != '\u001b[39m')){
-    ret = lastForegroundAdded + ret;
-  }
-
-  return ret;
-}
-
-function truncateWidth(str, desiredLength){
-  if (str.length === strlen(str)) {
-    return str.substr(0, desiredLength);
-  }
-
-  while (strlen(str) > desiredLength){
-    str = str.slice(0, -1);
-  }
-
-  return str;
-}
-
-function truncateWidthWithAnsi(str, desiredLength){
-  var code = codeRegex(true);
-  var split = str.split(codeRegex());
-  var splitIndex = 0;
-  var retLen = 0;
-  var ret = '';
-  var myArray;
-  var state = {};
-
-  while(retLen < desiredLength){
-    myArray = code.exec(str);
-    var toAdd = split[splitIndex];
-    splitIndex++;
-    if (retLen + strlen(toAdd) > desiredLength){
-      toAdd = truncateWidth(toAdd, desiredLength - retLen);
-    }
-    ret += toAdd;
-    retLen += strlen(toAdd);
-
-    if(retLen < desiredLength){
-      if (!myArray) { break; }  // full-width chars may cause a whitespace which cannot be filled
-      ret += myArray[0];
-      updateState(state,myArray);
-    }
-  }
-
-  return unwindState(state,ret);
-}
-
-function truncate(str, desiredLength, truncateChar){
-  truncateChar = truncateChar || '…';
-  var lengthOfStr = strlen(str);
-  if(lengthOfStr <= desiredLength){
-    return str;
-  }
-  desiredLength -= strlen(truncateChar);
-
-  var ret = truncateWidthWithAnsi(str, desiredLength);
-
-  return ret + truncateChar;
-}
-
-
-function defaultOptions(){
-  return{
-    chars: {
-      'top': '─'
-      , 'top-mid': '┬'
-      , 'top-left': '┌'
-      , 'top-right': '┐'
-      , 'bottom': '─'
-      , 'bottom-mid': '┴'
-      , 'bottom-left': '└'
-      , 'bottom-right': '┘'
-      , 'left': '│'
-      , 'left-mid': '├'
-      , 'mid': '─'
-      , 'mid-mid': '┼'
-      , 'right': '│'
-      , 'right-mid': '┤'
-      , 'middle': '│'
-    }
-    , truncate: '…'
-    , colWidths: []
-    , rowHeights: []
-    , colAligns: []
-    , rowAligns: []
-    , style: {
-      'padding-left': 1
-      , 'padding-right': 1
-      , head: ['red']
-      , border: ['grey']
-      , compact : false
-    }
-    , head: []
-  };
-}
-
-function mergeOptions(options,defaults){
-  options = options || {};
-  defaults = defaults || defaultOptions();
-  var ret = objectAssign({}, defaults, options);
-  ret.chars = objectAssign({}, defaults.chars, options.chars);
-  ret.style = objectAssign({}, defaults.style, options.style);
-  return ret;
-}
-
-function wordWrap(maxLength,input){
-  var lines = [];
-  var split = input.split(/(\s+)/g);
-  var line = [];
-  var lineLength = 0;
-  var whitespace;
-  for (var i = 0; i < split.length; i += 2) {
-    var word = split[i];
-    var newLength = lineLength + strlen(word);
-    if (lineLength > 0 && whitespace) {
-      newLength += whitespace.length;
-    }
-    if(newLength > maxLength){
-      if(lineLength !== 0){
-        lines.push(line.join(''));
-      }
-      line = [word];
-      lineLength = strlen(word);
-    } else {
-      line.push(whitespace || '', word);
-      lineLength = newLength;
-    }
-    whitespace = split[i+1];
-  }
-  if(lineLength){
-    lines.push(line.join(''));
-  }
-  return lines;
-}
-
-function multiLineWordWrap(maxLength, input){
-  var output = [];
-  input = input.split('\n');
-  for(var i = 0; i < input.length; i++){
-    output.push.apply(output,wordWrap(maxLength,input[i]));
-  }
-  return output;
-}
-
-function colorizeLines(input){
-  var state = {};
-  var output = [];
-  for(var i = 0; i < input.length; i++){
-    var line = rewindState(state,input[i]) ;
-    state = readState(line);
-    var temp = objectAssign({},state);
-    output.push(unwindState(temp,line));
-  }
-  return output;
-}
-
-module.exports = {
-  strlen:strlen,
-  repeat:repeat,
-  pad:pad,
-  truncate:truncate,
-  mergeOptions:mergeOptions,
-  wordWrap:multiLineWordWrap,
-  colorizeLines:colorizeLines
-};
-
-
-/***/ }),
-/* 383 */
-/***/ (function(module, exports) {
-
-
-/**
- * slice() reference.
- */
-
-var slice = Array.prototype.slice;
-
-/**
- * Expose `co`.
- */
-
-module.exports = co['default'] = co.co = co;
-
-/**
- * Wrap the given generator `fn` into a
- * function that returns a promise.
- * This is a separate function so that
- * every `co()` call doesn't create a new,
- * unnecessary closure.
- *
- * @param {GeneratorFunction} fn
- * @return {Function}
- * @api public
- */
-
-co.wrap = function (fn) {
-  createPromise.__generatorFunction__ = fn;
-  return createPromise;
-  function createPromise() {
-    return co.call(this, fn.apply(this, arguments));
-  }
-};
-
-/**
- * Execute the generator function or a generator
- * and return a promise.
- *
- * @param {Function} fn
- * @return {Promise}
- * @api public
- */
-
-function co(gen) {
-  var ctx = this;
-  var args = slice.call(arguments, 1)
-
-  // we wrap everything in a promise to avoid promise chaining,
-  // which leads to memory leak errors.
-  // see https://github.com/tj/co/issues/180
-  return new Promise(function(resolve, reject) {
-    if (typeof gen === 'function') gen = gen.apply(ctx, args);
-    if (!gen || typeof gen.next !== 'function') return resolve(gen);
-
-    onFulfilled();
-
-    /**
-     * @param {Mixed} res
-     * @return {Promise}
-     * @api private
-     */
-
-    function onFulfilled(res) {
-      var ret;
-      try {
-        ret = gen.next(res);
-      } catch (e) {
-        return reject(e);
-      }
-      next(ret);
-    }
-
-    /**
-     * @param {Error} err
-     * @return {Promise}
-     * @api private
-     */
-
-    function onRejected(err) {
-      var ret;
-      try {
-        ret = gen.throw(err);
-      } catch (e) {
-        return reject(e);
-      }
-      next(ret);
-    }
-
-    /**
-     * Get the next value in the generator,
-     * return a promise.
-     *
-     * @param {Object} ret
-     * @return {Promise}
-     * @api private
-     */
-
-    function next(ret) {
-      if (ret.done) return resolve(ret.value);
-      var value = toPromise.call(ctx, ret.value);
-      if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
-      return onRejected(new TypeError('You may only yield a function, promise, generator, array, or object, '
-        + 'but the following object was passed: "' + String(ret.value) + '"'));
-    }
-  });
-}
-
-/**
- * Convert a `yield`ed value into a promise.
- *
- * @param {Mixed} obj
- * @return {Promise}
- * @api private
- */
-
-function toPromise(obj) {
-  if (!obj) return obj;
-  if (isPromise(obj)) return obj;
-  if (isGeneratorFunction(obj) || isGenerator(obj)) return co.call(this, obj);
-  if ('function' == typeof obj) return thunkToPromise.call(this, obj);
-  if (Array.isArray(obj)) return arrayToPromise.call(this, obj);
-  if (isObject(obj)) return objectToPromise.call(this, obj);
-  return obj;
-}
-
-/**
- * Convert a thunk to a promise.
- *
- * @param {Function}
- * @return {Promise}
- * @api private
- */
-
-function thunkToPromise(fn) {
-  var ctx = this;
-  return new Promise(function (resolve, reject) {
-    fn.call(ctx, function (err, res) {
-      if (err) return reject(err);
-      if (arguments.length > 2) res = slice.call(arguments, 1);
-      resolve(res);
-    });
-  });
-}
-
-/**
- * Convert an array of "yieldables" to a promise.
- * Uses `Promise.all()` internally.
- *
- * @param {Array} obj
- * @return {Promise}
- * @api private
- */
-
-function arrayToPromise(obj) {
-  return Promise.all(obj.map(toPromise, this));
-}
-
-/**
- * Convert an object of "yieldables" to a promise.
- * Uses `Promise.all()` internally.
- *
- * @param {Object} obj
- * @return {Promise}
- * @api private
- */
-
-function objectToPromise(obj){
-  var results = new obj.constructor();
-  var keys = Object.keys(obj);
-  var promises = [];
-  for (var i = 0; i < keys.length; i++) {
-    var key = keys[i];
-    var promise = toPromise.call(this, obj[key]);
-    if (promise && isPromise(promise)) defer(promise, key);
-    else results[key] = obj[key];
-  }
-  return Promise.all(promises).then(function () {
-    return results;
-  });
-
-  function defer(promise, key) {
-    // predefine the key in the result
-    results[key] = undefined;
-    promises.push(promise.then(function (res) {
-      results[key] = res;
-    }));
-  }
-}
-
-/**
- * Check if `obj` is a promise.
- *
- * @param {Object} obj
- * @return {Boolean}
- * @api private
- */
-
-function isPromise(obj) {
-  return 'function' == typeof obj.then;
-}
-
-/**
- * Check if `obj` is a generator.
- *
- * @param {Mixed} obj
- * @return {Boolean}
- * @api private
- */
-
-function isGenerator(obj) {
-  return 'function' == typeof obj.next && 'function' == typeof obj.throw;
-}
-
-/**
- * Check if `obj` is a generator function.
- *
- * @param {Mixed} obj
- * @return {Boolean}
- * @api private
- */
-function isGeneratorFunction(obj) {
-  var constructor = obj.constructor;
-  if (!constructor) return false;
-  if ('GeneratorFunction' === constructor.name || 'GeneratorFunction' === constructor.displayName) return true;
-  return isGenerator(constructor.prototype);
-}
-
-/**
- * Check for plain object.
- *
- * @param {Mixed} val
- * @return {Boolean}
- * @api private
- */
-
-function isObject(val) {
-  return Object == val.constructor;
-}
-
-
-/***/ }),
-/* 384 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/* MIT license */
-var cssKeywords = __webpack_require__(610);
-
-// NOTE: conversions should only return primitive values (i.e. arrays, or
-//       values that give correct `typeof` results).
-//       do not use box values types (i.e. Number(), String(), etc.)
-
-var reverseKeywords = {};
-for (var key in cssKeywords) {
-	if (cssKeywords.hasOwnProperty(key)) {
-		reverseKeywords[cssKeywords[key]] = key;
-	}
-}
-
-var convert = module.exports = {
-	rgb: {channels: 3, labels: 'rgb'},
-	hsl: {channels: 3, labels: 'hsl'},
-	hsv: {channels: 3, labels: 'hsv'},
-	hwb: {channels: 3, labels: 'hwb'},
-	cmyk: {channels: 4, labels: 'cmyk'},
-	xyz: {channels: 3, labels: 'xyz'},
-	lab: {channels: 3, labels: 'lab'},
-	lch: {channels: 3, labels: 'lch'},
-	hex: {channels: 1, labels: ['hex']},
-	keyword: {channels: 1, labels: ['keyword']},
-	ansi16: {channels: 1, labels: ['ansi16']},
-	ansi256: {channels: 1, labels: ['ansi256']},
-	hcg: {channels: 3, labels: ['h', 'c', 'g']},
-	apple: {channels: 3, labels: ['r16', 'g16', 'b16']},
-	gray: {channels: 1, labels: ['gray']}
-};
-
-// hide .channels and .labels properties
-for (var model in convert) {
-	if (convert.hasOwnProperty(model)) {
-		if (!('channels' in convert[model])) {
-			throw new Error('missing channels property: ' + model);
-		}
-
-		if (!('labels' in convert[model])) {
-			throw new Error('missing channel labels property: ' + model);
-		}
-
-		if (convert[model].labels.length !== convert[model].channels) {
-			throw new Error('channel and label counts mismatch: ' + model);
-		}
-
-		var channels = convert[model].channels;
-		var labels = convert[model].labels;
-		delete convert[model].channels;
-		delete convert[model].labels;
-		Object.defineProperty(convert[model], 'channels', {value: channels});
-		Object.defineProperty(convert[model], 'labels', {value: labels});
-	}
-}
-
-convert.rgb.hsl = function (rgb) {
-	var r = rgb[0] / 255;
-	var g = rgb[1] / 255;
-	var b = rgb[2] / 255;
-	var min = Math.min(r, g, b);
-	var max = Math.max(r, g, b);
-	var delta = max - min;
-	var h;
-	var s;
-	var l;
-
-	if (max === min) {
-		h = 0;
-	} else if (r === max) {
-		h = (g - b) / delta;
-	} else if (g === max) {
-		h = 2 + (b - r) / delta;
-	} else if (b === max) {
-		h = 4 + (r - g) / delta;
-	}
-
-	h = Math.min(h * 60, 360);
-
-	if (h < 0) {
-		h += 360;
-	}
-
-	l = (min + max) / 2;
-
-	if (max === min) {
-		s = 0;
-	} else if (l <= 0.5) {
-		s = delta / (max + min);
-	} else {
-		s = delta / (2 - max - min);
-	}
-
-	return [h, s * 100, l * 100];
-};
-
-convert.rgb.hsv = function (rgb) {
-	var rdif;
-	var gdif;
-	var bdif;
-	var h;
-	var s;
-
-	var r = rgb[0] / 255;
-	var g = rgb[1] / 255;
-	var b = rgb[2] / 255;
-	var v = Math.max(r, g, b);
-	var diff = v - Math.min(r, g, b);
-	var diffc = function (c) {
-		return (v - c) / 6 / diff + 1 / 2;
-	};
-
-	if (diff === 0) {
-		h = s = 0;
-	} else {
-		s = diff / v;
-		rdif = diffc(r);
-		gdif = diffc(g);
-		bdif = diffc(b);
-
-		if (r === v) {
-			h = bdif - gdif;
-		} else if (g === v) {
-			h = (1 / 3) + rdif - bdif;
-		} else if (b === v) {
-			h = (2 / 3) + gdif - rdif;
-		}
-		if (h < 0) {
-			h += 1;
-		} else if (h > 1) {
-			h -= 1;
-		}
-	}
-
-	return [
-		h * 360,
-		s * 100,
-		v * 100
-	];
-};
-
-convert.rgb.hwb = function (rgb) {
-	var r = rgb[0];
-	var g = rgb[1];
-	var b = rgb[2];
-	var h = convert.rgb.hsl(rgb)[0];
-	var w = 1 / 255 * Math.min(r, Math.min(g, b));
-
-	b = 1 - 1 / 255 * Math.max(r, Math.max(g, b));
-
-	return [h, w * 100, b * 100];
-};
-
-convert.rgb.cmyk = function (rgb) {
-	var r = rgb[0] / 255;
-	var g = rgb[1] / 255;
-	var b = rgb[2] / 255;
-	var c;
-	var m;
-	var y;
-	var k;
-
-	k = Math.min(1 - r, 1 - g, 1 - b);
-	c = (1 - r - k) / (1 - k) || 0;
-	m = (1 - g - k) / (1 - k) || 0;
-	y = (1 - b - k) / (1 - k) || 0;
-
-	return [c * 100, m * 100, y * 100, k * 100];
-};
-
-/**
- * See https://en.m.wikipedia.org/wiki/Euclidean_distance#Squared_Euclidean_distance
- * */
-function comparativeDistance(x, y) {
-	return (
-		Math.pow(x[0] - y[0], 2) +
-		Math.pow(x[1] - y[1], 2) +
-		Math.pow(x[2] - y[2], 2)
-	);
-}
-
-convert.rgb.keyword = function (rgb) {
-	var reversed = reverseKeywords[rgb];
-	if (reversed) {
-		return reversed;
-	}
-
-	var currentClosestDistance = Infinity;
-	var currentClosestKeyword;
-
-	for (var keyword in cssKeywords) {
-		if (cssKeywords.hasOwnProperty(keyword)) {
-			var value = cssKeywords[keyword];
-
-			// Compute comparative distance
-			var distance = comparativeDistance(rgb, value);
-
-			// Check if its less, if so set as closest
-			if (distance < currentClosestDistance) {
-				currentClosestDistance = distance;
-				currentClosestKeyword = keyword;
-			}
-		}
-	}
-
-	return currentClosestKeyword;
-};
-
-convert.keyword.rgb = function (keyword) {
-	return cssKeywords[keyword];
-};
-
-convert.rgb.xyz = function (rgb) {
-	var r = rgb[0] / 255;
-	var g = rgb[1] / 255;
-	var b = rgb[2] / 255;
-
-	// assume sRGB
-	r = r > 0.04045 ? Math.pow(((r + 0.055) / 1.055), 2.4) : (r / 12.92);
-	g = g > 0.04045 ? Math.pow(((g + 0.055) / 1.055), 2.4) : (g / 12.92);
-	b = b > 0.04045 ? Math.pow(((b + 0.055) / 1.055), 2.4) : (b / 12.92);
-
-	var x = (r * 0.4124) + (g * 0.3576) + (b * 0.1805);
-	var y = (r * 0.2126) + (g * 0.7152) + (b * 0.0722);
-	var z = (r * 0.0193) + (g * 0.1192) + (b * 0.9505);
-
-	return [x * 100, y * 100, z * 100];
-};
-
-convert.rgb.lab = function (rgb) {
-	var xyz = convert.rgb.xyz(rgb);
-	var x = xyz[0];
-	var y = xyz[1];
-	var z = xyz[2];
-	var l;
-	var a;
-	var b;
-
-	x /= 95.047;
-	y /= 100;
-	z /= 108.883;
-
-	x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116);
-	y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116);
-	z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116);
-
-	l = (116 * y) - 16;
-	a = 500 * (x - y);
-	b = 200 * (y - z);
-
-	return [l, a, b];
-};
-
-convert.hsl.rgb = function (hsl) {
-	var h = hsl[0] / 360;
-	var s = hsl[1] / 100;
-	var l = hsl[2] / 100;
-	var t1;
-	var t2;
-	var t3;
-	var rgb;
-	var val;
-
-	if (s === 0) {
-		val = l * 255;
-		return [val, val, val];
-	}
-
-	if (l < 0.5) {
-		t2 = l * (1 + s);
-	} else {
-		t2 = l + s - l * s;
-	}
-
-	t1 = 2 * l - t2;
-
-	rgb = [0, 0, 0];
-	for (var i = 0; i < 3; i++) {
-		t3 = h + 1 / 3 * -(i - 1);
-		if (t3 < 0) {
-			t3++;
-		}
-		if (t3 > 1) {
-			t3--;
-		}
-
-		if (6 * t3 < 1) {
-			val = t1 + (t2 - t1) * 6 * t3;
-		} else if (2 * t3 < 1) {
-			val = t2;
-		} else if (3 * t3 < 2) {
-			val = t1 + (t2 - t1) * (2 / 3 - t3) * 6;
-		} else {
-			val = t1;
-		}
-
-		rgb[i] = val * 255;
-	}
-
-	return rgb;
-};
-
-convert.hsl.hsv = function (hsl) {
-	var h = hsl[0];
-	var s = hsl[1] / 100;
-	var l = hsl[2] / 100;
-	var smin = s;
-	var lmin = Math.max(l, 0.01);
-	var sv;
-	var v;
-
-	l *= 2;
-	s *= (l <= 1) ? l : 2 - l;
-	smin *= lmin <= 1 ? lmin : 2 - lmin;
-	v = (l + s) / 2;
-	sv = l === 0 ? (2 * smin) / (lmin + smin) : (2 * s) / (l + s);
-
-	return [h, sv * 100, v * 100];
-};
-
-convert.hsv.rgb = function (hsv) {
-	var h = hsv[0] / 60;
-	var s = hsv[1] / 100;
-	var v = hsv[2] / 100;
-	var hi = Math.floor(h) % 6;
-
-	var f = h - Math.floor(h);
-	var p = 255 * v * (1 - s);
-	var q = 255 * v * (1 - (s * f));
-	var t = 255 * v * (1 - (s * (1 - f)));
-	v *= 255;
-
-	switch (hi) {
-		case 0:
-			return [v, t, p];
-		case 1:
-			return [q, v, p];
-		case 2:
-			return [p, v, t];
-		case 3:
-			return [p, q, v];
-		case 4:
-			return [t, p, v];
-		case 5:
-			return [v, p, q];
-	}
-};
-
-convert.hsv.hsl = function (hsv) {
-	var h = hsv[0];
-	var s = hsv[1] / 100;
-	var v = hsv[2] / 100;
-	var vmin = Math.max(v, 0.01);
-	var lmin;
-	var sl;
-	var l;
-
-	l = (2 - s) * v;
-	lmin = (2 - s) * vmin;
-	sl = s * vmin;
-	sl /= (lmin <= 1) ? lmin : 2 - lmin;
-	sl = sl || 0;
-	l /= 2;
-
-	return [h, sl * 100, l * 100];
-};
-
-// http://dev.w3.org/csswg/css-color/#hwb-to-rgb
-convert.hwb.rgb = function (hwb) {
-	var h = hwb[0] / 360;
-	var wh = hwb[1] / 100;
-	var bl = hwb[2] / 100;
-	var ratio = wh + bl;
-	var i;
-	var v;
-	var f;
-	var n;
-
-	// wh + bl cant be > 1
-	if (ratio > 1) {
-		wh /= ratio;
-		bl /= ratio;
-	}
-
-	i = Math.floor(6 * h);
-	v = 1 - bl;
-	f = 6 * h - i;
-
-	if ((i & 0x01) !== 0) {
-		f = 1 - f;
-	}
-
-	n = wh + f * (v - wh); // linear interpolation
-
-	var r;
-	var g;
-	var b;
-	switch (i) {
-		default:
-		case 6:
-		case 0: r = v; g = n; b = wh; break;
-		case 1: r = n; g = v; b = wh; break;
-		case 2: r = wh; g = v; b = n; break;
-		case 3: r = wh; g = n; b = v; break;
-		case 4: r = n; g = wh; b = v; break;
-		case 5: r = v; g = wh; b = n; break;
-	}
-
-	return [r * 255, g * 255, b * 255];
-};
-
-convert.cmyk.rgb = function (cmyk) {
-	var c = cmyk[0] / 100;
-	var m = cmyk[1] / 100;
-	var y = cmyk[2] / 100;
-	var k = cmyk[3] / 100;
-	var r;
-	var g;
-	var b;
-
-	r = 1 - Math.min(1, c * (1 - k) + k);
-	g = 1 - Math.min(1, m * (1 - k) + k);
-	b = 1 - Math.min(1, y * (1 - k) + k);
-
-	return [r * 255, g * 255, b * 255];
-};
-
-convert.xyz.rgb = function (xyz) {
-	var x = xyz[0] / 100;
-	var y = xyz[1] / 100;
-	var z = xyz[2] / 100;
-	var r;
-	var g;
-	var b;
-
-	r = (x * 3.2406) + (y * -1.5372) + (z * -0.4986);
-	g = (x * -0.9689) + (y * 1.8758) + (z * 0.0415);
-	b = (x * 0.0557) + (y * -0.2040) + (z * 1.0570);
-
-	// assume sRGB
-	r = r > 0.0031308
-		? ((1.055 * Math.pow(r, 1.0 / 2.4)) - 0.055)
-		: r * 12.92;
-
-	g = g > 0.0031308
-		? ((1.055 * Math.pow(g, 1.0 / 2.4)) - 0.055)
-		: g * 12.92;
-
-	b = b > 0.0031308
-		? ((1.055 * Math.pow(b, 1.0 / 2.4)) - 0.055)
-		: b * 12.92;
-
-	r = Math.min(Math.max(0, r), 1);
-	g = Math.min(Math.max(0, g), 1);
-	b = Math.min(Math.max(0, b), 1);
-
-	return [r * 255, g * 255, b * 255];
-};
-
-convert.xyz.lab = function (xyz) {
-	var x = xyz[0];
-	var y = xyz[1];
-	var z = xyz[2];
-	var l;
-	var a;
-	var b;
-
-	x /= 95.047;
-	y /= 100;
-	z /= 108.883;
-
-	x = x > 0.008856 ? Math.pow(x, 1 / 3) : (7.787 * x) + (16 / 116);
-	y = y > 0.008856 ? Math.pow(y, 1 / 3) : (7.787 * y) + (16 / 116);
-	z = z > 0.008856 ? Math.pow(z, 1 / 3) : (7.787 * z) + (16 / 116);
-
-	l = (116 * y) - 16;
-	a = 500 * (x - y);
-	b = 200 * (y - z);
-
-	return [l, a, b];
-};
-
-convert.lab.xyz = function (lab) {
-	var l = lab[0];
-	var a = lab[1];
-	var b = lab[2];
-	var x;
-	var y;
-	var z;
-
-	y = (l + 16) / 116;
-	x = a / 500 + y;
-	z = y - b / 200;
-
-	var y2 = Math.pow(y, 3);
-	var x2 = Math.pow(x, 3);
-	var z2 = Math.pow(z, 3);
-	y = y2 > 0.008856 ? y2 : (y - 16 / 116) / 7.787;
-	x = x2 > 0.008856 ? x2 : (x - 16 / 116) / 7.787;
-	z = z2 > 0.008856 ? z2 : (z - 16 / 116) / 7.787;
-
-	x *= 95.047;
-	y *= 100;
-	z *= 108.883;
-
-	return [x, y, z];
-};
-
-convert.lab.lch = function (lab) {
-	var l = lab[0];
-	var a = lab[1];
-	var b = lab[2];
-	var hr;
-	var h;
-	var c;
-
-	hr = Math.atan2(b, a);
-	h = hr * 360 / 2 / Math.PI;
-
-	if (h < 0) {
-		h += 360;
-	}
-
-	c = Math.sqrt(a * a + b * b);
-
-	return [l, c, h];
-};
-
-convert.lch.lab = function (lch) {
-	var l = lch[0];
-	var c = lch[1];
-	var h = lch[2];
-	var a;
-	var b;
-	var hr;
-
-	hr = h / 360 * 2 * Math.PI;
-	a = c * Math.cos(hr);
-	b = c * Math.sin(hr);
-
-	return [l, a, b];
-};
-
-convert.rgb.ansi16 = function (args) {
-	var r = args[0];
-	var g = args[1];
-	var b = args[2];
-	var value = 1 in arguments ? arguments[1] : convert.rgb.hsv(args)[2]; // hsv -> ansi16 optimization
-
-	value = Math.round(value / 50);
-
-	if (value === 0) {
-		return 30;
-	}
-
-	var ansi = 30
-		+ ((Math.round(b / 255) << 2)
-		| (Math.round(g / 255) << 1)
-		| Math.round(r / 255));
-
-	if (value === 2) {
-		ansi += 60;
-	}
-
-	return ansi;
-};
-
-convert.hsv.ansi16 = function (args) {
-	// optimization here; we already know the value and don't need to get
-	// it converted for us.
-	return convert.rgb.ansi16(convert.hsv.rgb(args), args[2]);
-};
-
-convert.rgb.ansi256 = function (args) {
-	var r = args[0];
-	var g = args[1];
-	var b = args[2];
-
-	// we use the extended greyscale palette here, with the exception of
-	// black and white. normal palette only has 4 greyscale shades.
-	if (r === g && g === b) {
-		if (r < 8) {
-			return 16;
-		}
-
-		if (r > 248) {
-			return 231;
-		}
-
-		return Math.round(((r - 8) / 247) * 24) + 232;
-	}
-
-	var ansi = 16
-		+ (36 * Math.round(r / 255 * 5))
-		+ (6 * Math.round(g / 255 * 5))
-		+ Math.round(b / 255 * 5);
-
-	return ansi;
-};
-
-convert.ansi16.rgb = function (args) {
-	var color = args % 10;
-
-	// handle greyscale
-	if (color === 0 || color === 7) {
-		if (args > 50) {
-			color += 3.5;
-		}
-
-		color = color / 10.5 * 255;
-
-		return [color, color, color];
-	}
-
-	var mult = (~~(args > 50) + 1) * 0.5;
-	var r = ((color & 1) * mult) * 255;
-	var g = (((color >> 1) & 1) * mult) * 255;
-	var b = (((color >> 2) & 1) * mult) * 255;
-
-	return [r, g, b];
-};
-
-convert.ansi256.rgb = function (args) {
-	// handle greyscale
-	if (args >= 232) {
-		var c = (args - 232) * 10 + 8;
-		return [c, c, c];
-	}
-
-	args -= 16;
-
-	var rem;
-	var r = Math.floor(args / 36) / 5 * 255;
-	var g = Math.floor((rem = args % 36) / 6) / 5 * 255;
-	var b = (rem % 6) / 5 * 255;
-
-	return [r, g, b];
-};
-
-convert.rgb.hex = function (args) {
-	var integer = ((Math.round(args[0]) & 0xFF) << 16)
-		+ ((Math.round(args[1]) & 0xFF) << 8)
-		+ (Math.round(args[2]) & 0xFF);
-
-	var string = integer.toString(16).toUpperCase();
-	return '000000'.substring(string.length) + string;
-};
-
-convert.hex.rgb = function (args) {
-	var match = args.toString(16).match(/[a-f0-9]{6}|[a-f0-9]{3}/i);
-	if (!match) {
-		return [0, 0, 0];
-	}
-
-	var colorString = match[0];
-
-	if (match[0].length === 3) {
-		colorString = colorString.split('').map(function (char) {
-			return char + char;
-		}).join('');
-	}
-
-	var integer = parseInt(colorString, 16);
-	var r = (integer >> 16) & 0xFF;
-	var g = (integer >> 8) & 0xFF;
-	var b = integer & 0xFF;
-
-	return [r, g, b];
-};
-
-convert.rgb.hcg = function (rgb) {
-	var r = rgb[0] / 255;
-	var g = rgb[1] / 255;
-	var b = rgb[2] / 255;
-	var max = Math.max(Math.max(r, g), b);
-	var min = Math.min(Math.min(r, g), b);
-	var chroma = (max - min);
-	var grayscale;
-	var hue;
-
-	if (chroma < 1) {
-		grayscale = min / (1 - chroma);
-	} else {
-		grayscale = 0;
-	}
-
-	if (chroma <= 0) {
-		hue = 0;
-	} else
-	if (max === r) {
-		hue = ((g - b) / chroma) % 6;
-	} else
-	if (max === g) {
-		hue = 2 + (b - r) / chroma;
-	} else {
-		hue = 4 + (r - g) / chroma + 4;
-	}
-
-	hue /= 6;
-	hue %= 1;
-
-	return [hue * 360, chroma * 100, grayscale * 100];
-};
-
-convert.hsl.hcg = function (hsl) {
-	var s = hsl[1] / 100;
-	var l = hsl[2] / 100;
-	var c = 1;
-	var f = 0;
-
-	if (l < 0.5) {
-		c = 2.0 * s * l;
-	} else {
-		c = 2.0 * s * (1.0 - l);
-	}
-
-	if (c < 1.0) {
-		f = (l - 0.5 * c) / (1.0 - c);
-	}
-
-	return [hsl[0], c * 100, f * 100];
-};
-
-convert.hsv.hcg = function (hsv) {
-	var s = hsv[1] / 100;
-	var v = hsv[2] / 100;
-
-	var c = s * v;
-	var f = 0;
-
-	if (c < 1.0) {
-		f = (v - c) / (1 - c);
-	}
-
-	return [hsv[0], c * 100, f * 100];
-};
-
-convert.hcg.rgb = function (hcg) {
-	var h = hcg[0] / 360;
-	var c = hcg[1] / 100;
-	var g = hcg[2] / 100;
-
-	if (c === 0.0) {
-		return [g * 255, g * 255, g * 255];
-	}
-
-	var pure = [0, 0, 0];
-	var hi = (h % 1) * 6;
-	var v = hi % 1;
-	var w = 1 - v;
-	var mg = 0;
-
-	switch (Math.floor(hi)) {
-		case 0:
-			pure[0] = 1; pure[1] = v; pure[2] = 0; break;
-		case 1:
-			pure[0] = w; pure[1] = 1; pure[2] = 0; break;
-		case 2:
-			pure[0] = 0; pure[1] = 1; pure[2] = v; break;
-		case 3:
-			pure[0] = 0; pure[1] = w; pure[2] = 1; break;
-		case 4:
-			pure[0] = v; pure[1] = 0; pure[2] = 1; break;
-		default:
-			pure[0] = 1; pure[1] = 0; pure[2] = w;
-	}
-
-	mg = (1.0 - c) * g;
-
-	return [
-		(c * pure[0] + mg) * 255,
-		(c * pure[1] + mg) * 255,
-		(c * pure[2] + mg) * 255
-	];
-};
-
-convert.hcg.hsv = function (hcg) {
-	var c = hcg[1] / 100;
-	var g = hcg[2] / 100;
-
-	var v = c + g * (1.0 - c);
-	var f = 0;
-
-	if (v > 0.0) {
-		f = c / v;
-	}
-
-	return [hcg[0], f * 100, v * 100];
-};
-
-convert.hcg.hsl = function (hcg) {
-	var c = hcg[1] / 100;
-	var g = hcg[2] / 100;
-
-	var l = g * (1.0 - c) + 0.5 * c;
-	var s = 0;
-
-	if (l > 0.0 && l < 0.5) {
-		s = c / (2 * l);
-	} else
-	if (l >= 0.5 && l < 1.0) {
-		s = c / (2 * (1 - l));
-	}
-
-	return [hcg[0], s * 100, l * 100];
-};
-
-convert.hcg.hwb = function (hcg) {
-	var c = hcg[1] / 100;
-	var g = hcg[2] / 100;
-	var v = c + g * (1.0 - c);
-	return [hcg[0], (v - c) * 100, (1 - v) * 100];
-};
-
-convert.hwb.hcg = function (hwb) {
-	var w = hwb[1] / 100;
-	var b = hwb[2] / 100;
-	var v = 1 - b;
-	var c = v - w;
-	var g = 0;
-
-	if (c < 1) {
-		g = (v - c) / (1 - c);
-	}
-
-	return [hwb[0], c * 100, g * 100];
-};
-
-convert.apple.rgb = function (apple) {
-	return [(apple[0] / 65535) * 255, (apple[1] / 65535) * 255, (apple[2] / 65535) * 255];
-};
-
-convert.rgb.apple = function (rgb) {
-	return [(rgb[0] / 255) * 65535, (rgb[1] / 255) * 65535, (rgb[2] / 255) * 65535];
-};
-
-convert.gray.rgb = function (args) {
-	return [args[0] / 100 * 255, args[0] / 100 * 255, args[0] / 100 * 255];
-};
-
-convert.gray.hsl = convert.gray.hsv = function (args) {
-	return [0, 0, args[0]];
-};
-
-convert.gray.hwb = function (gray) {
-	return [0, 100, gray[0]];
-};
-
-convert.gray.cmyk = function (gray) {
-	return [0, 0, 0, gray[0]];
-};
-
-convert.gray.lab = function (gray) {
-	return [gray[0], 0, 0];
-};
-
-convert.gray.hex = function (gray) {
-	var val = Math.round(gray[0] / 100 * 255) & 0xFF;
-	var integer = (val << 16) + (val << 8) + val;
-
-	var string = integer.toString(16).toUpperCase();
-	return '000000'.substring(string.length) + string;
-};
-
-convert.rgb.gray = function (rgb) {
-	var val = (rgb[0] + rgb[1] + rgb[2]) / 3;
-	return [val / 255 * 100];
-};
-
-
-/***/ }),
-/* 385 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var util = __webpack_require__(3);
-var Stream = __webpack_require__(23).Stream;
-var DelayedStream = __webpack_require__(634);
-var defer = __webpack_require__(622);
-
-module.exports = CombinedStream;
-function CombinedStream() {
-  this.writable = false;
-  this.readable = true;
-  this.dataSize = 0;
-  this.maxDataSize = 2 * 1024 * 1024;
-  this.pauseStreams = true;
-
-  this._released = false;
-  this._streams = [];
-  this._currentStream = null;
-}
-util.inherits(CombinedStream, Stream);
-
-CombinedStream.create = function(options) {
-  var combinedStream = new this();
-
-  options = options || {};
-  for (var option in options) {
-    combinedStream[option] = options[option];
-  }
-
-  return combinedStream;
-};
-
-CombinedStream.isStreamLike = function(stream) {
-  return (typeof stream !== 'function')
-    && (typeof stream !== 'string')
-    && (typeof stream !== 'boolean')
-    && (typeof stream !== 'number')
-    && (!Buffer.isBuffer(stream));
-};
-
-CombinedStream.prototype.append = function(stream) {
-  var isStreamLike = CombinedStream.isStreamLike(stream);
-
-  if (isStreamLike) {
-    if (!(stream instanceof DelayedStream)) {
-      var newStream = DelayedStream.create(stream, {
-        maxDataSize: Infinity,
-        pauseStream: this.pauseStreams,
-      });
-      stream.on('data', this._checkDataSize.bind(this));
-      stream = newStream;
-    }
-
-    this._handleErrors(stream);
-
-    if (this.pauseStreams) {
-      stream.pause();
-    }
-  }
-
-  this._streams.push(stream);
-  return this;
-};
-
-CombinedStream.prototype.pipe = function(dest, options) {
-  Stream.prototype.pipe.call(this, dest, options);
-  this.resume();
-  return dest;
-};
-
-CombinedStream.prototype._getNext = function() {
-  this._currentStream = null;
-  var stream = this._streams.shift();
-
-
-  if (typeof stream == 'undefined') {
-    this.end();
-    return;
-  }
-
-  if (typeof stream !== 'function') {
-    this._pipeNext(stream);
-    return;
-  }
-
-  var getStream = stream;
-  getStream(function(stream) {
-    var isStreamLike = CombinedStream.isStreamLike(stream);
-    if (isStreamLike) {
-      stream.on('data', this._checkDataSize.bind(this));
-      this._handleErrors(stream);
-    }
-
-    defer(this._pipeNext.bind(this, stream));
-  }.bind(this));
-};
-
-CombinedStream.prototype._pipeNext = function(stream) {
-  this._currentStream = stream;
-
-  var isStreamLike = CombinedStream.isStreamLike(stream);
-  if (isStreamLike) {
-    stream.on('end', this._getNext.bind(this));
-    stream.pipe(this, {end: false});
-    return;
-  }
-
-  var value = stream;
-  this.write(value);
-  this._getNext();
-};
-
-CombinedStream.prototype._handleErrors = function(stream) {
-  var self = this;
-  stream.on('error', function(err) {
-    self._emitError(err);
-  });
-};
-
-CombinedStream.prototype.write = function(data) {
-  this.emit('data', data);
-};
-
-CombinedStream.prototype.pause = function() {
-  if (!this.pauseStreams) {
-    return;
-  }
-
-  if(this.pauseStreams && this._currentStream && typeof(this._currentStream.pause) == 'function') this._currentStream.pause();
-  this.emit('pause');
-};
-
-CombinedStream.prototype.resume = function() {
-  if (!this._released) {
-    this._released = true;
-    this.writable = true;
-    this._getNext();
-  }
-
-  if(this.pauseStreams && this._currentStream && typeof(this._currentStream.resume) == 'function') this._currentStream.resume();
-  this.emit('resume');
-};
-
-CombinedStream.prototype.end = function() {
-  this._reset();
-  this.emit('end');
-};
-
-CombinedStream.prototype.destroy = function() {
-  this._reset();
-  this.emit('close');
-};
-
-CombinedStream.prototype._reset = function() {
-  this.writable = false;
-  this._streams = [];
-  this._currentStream = null;
-};
-
-CombinedStream.prototype._checkDataSize = function() {
-  this._updateDataSize();
-  if (this.dataSize <= this.maxDataSize) {
-    return;
-  }
-
-  var message =
-    'DelayedStream#maxDataSize of ' + this.maxDataSize + ' bytes exceeded.';
-  this._emitError(new Error(message));
-};
-
-CombinedStream.prototype._updateDataSize = function() {
-  this.dataSize = 0;
-
-  var self = this;
-  this._streams.forEach(function(stream) {
-    if (!stream.dataSize) {
-      return;
-    }
-
-    self.dataSize += stream.dataSize;
-  });
-
-  if (this._currentStream && this._currentStream.dataSize) {
-    this.dataSize += this._currentStream.dataSize;
-  }
-};
-
-CombinedStream.prototype._emitError = function(err) {
-  this._reset();
-  this.emit('error', err);
-};
-
-
-/***/ }),
-/* 386 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var stream = __webpack_require__(102)
-var eos = __webpack_require__(173)
-var inherits = __webpack_require__(61)
-var shift = __webpack_require__(942)
-
-var SIGNAL_FLUSH = (Buffer.from && Buffer.from !== Uint8Array.from)
-  ? Buffer.from([0])
-  : new Buffer([0])
-
-var onuncork = function(self, fn) {
-  if (self._corked) self.once('uncork', fn)
-  else fn()
-}
-
-var autoDestroy = function (self, err) {
-  if (self._autoDestroy) self.destroy(err)
-}
-
-var destroyer = function(self, end) {
-  return function(err) {
-    if (err) autoDestroy(self, err.message === 'premature close' ? null : err)
-    else if (end && !self._ended) self.end()
-  }
-}
-
-var end = function(ws, fn) {
-  if (!ws) return fn()
-  if (ws._writableState && ws._writableState.finished) return fn()
-  if (ws._writableState) return ws.end(fn)
-  ws.end()
-  fn()
-}
-
-var toStreams2 = function(rs) {
-  return new (stream.Readable)({objectMode:true, highWaterMark:16}).wrap(rs)
-}
-
-var Duplexify = function(writable, readable, opts) {
-  if (!(this instanceof Duplexify)) return new Duplexify(writable, readable, opts)
-  stream.Duplex.call(this, opts)
-
-  this._writable = null
-  this._readable = null
-  this._readable2 = null
-
-  this._autoDestroy = !opts || opts.autoDestroy !== false
-  this._forwardDestroy = !opts || opts.destroy !== false
-  this._forwardEnd = !opts || opts.end !== false
-  this._corked = 1 // start corked
-  this._ondrain = null
-  this._drained = false
-  this._forwarding = false
-  this._unwrite = null
-  this._unread = null
-  this._ended = false
-
-  this.destroyed = false
-
-  if (writable) this.setWritable(writable)
-  if (readable) this.setReadable(readable)
-}
-
-inherits(Duplexify, stream.Duplex)
-
-Duplexify.obj = function(writable, readable, opts) {
-  if (!opts) opts = {}
-  opts.objectMode = true
-  opts.highWaterMark = 16
-  return new Duplexify(writable, readable, opts)
-}
-
-Duplexify.prototype.cork = function() {
-  if (++this._corked === 1) this.emit('cork')
-}
-
-Duplexify.prototype.uncork = function() {
-  if (this._corked && --this._corked === 0) this.emit('uncork')
-}
-
-Duplexify.prototype.setWritable = function(writable) {
-  if (this._unwrite) this._unwrite()
-
-  if (this.destroyed) {
-    if (writable && writable.destroy) writable.destroy()
-    return
-  }
-
-  if (writable === null || writable === false) {
-    this.end()
-    return
-  }
-
-  var self = this
-  var unend = eos(writable, {writable:true, readable:false}, destroyer(this, this._forwardEnd))
-
-  var ondrain = function() {
-    var ondrain = self._ondrain
-    self._ondrain = null
-    if (ondrain) ondrain()
-  }
-
-  var clear = function() {
-    self._writable.removeListener('drain', ondrain)
-    unend()
-  }
-
-  if (this._unwrite) process.nextTick(ondrain) // force a drain on stream reset to avoid livelocks
-
-  this._writable = writable
-  this._writable.on('drain', ondrain)
-  this._unwrite = clear
-
-  this.uncork() // always uncork setWritable
-}
-
-Duplexify.prototype.setReadable = function(readable) {
-  if (this._unread) this._unread()
-
-  if (this.destroyed) {
-    if (readable && readable.destroy) readable.destroy()
-    return
-  }
-
-  if (readable === null || readable === false) {
-    this.push(null)
-    this.resume()
-    return
-  }
-
-  var self = this
-  var unend = eos(readable, {writable:false, readable:true}, destroyer(this))
-
-  var onreadable = function() {
-    self._forward()
-  }
-
-  var onend = function() {
-    self.push(null)
-  }
-
-  var clear = function() {
-    self._readable2.removeListener('readable', onreadable)
-    self._readable2.removeListener('end', onend)
-    unend()
-  }
-
-  this._drained = true
-  this._readable = readable
-  this._readable2 = readable._readableState ? readable : toStreams2(readable)
-  this._readable2.on('readable', onreadable)
-  this._readable2.on('end', onend)
-  this._unread = clear
-
-  this._forward()
-}
-
-Duplexify.prototype._read = function() {
-  this._drained = true
-  this._forward()
-}
-
-Duplexify.prototype._forward = function() {
-  if (this._forwarding || !this._readable2 || !this._drained) return
-  this._forwarding = true
-
-  var data
-
-  while (this._drained && (data = shift(this._readable2)) !== null) {
-    if (this.destroyed) continue
-    this._drained = this.push(data)
-  }
-
-  this._forwarding = false
-}
-
-Duplexify.prototype.destroy = function(err) {
-  if (this.destroyed) return
-  this.destroyed = true
-
-  var self = this
-  process.nextTick(function() {
-    self._destroy(err)
-  })
-}
-
-Duplexify.prototype._destroy = function(err) {
-  if (err) {
-    var ondrain = this._ondrain
-    this._ondrain = null
-    if (ondrain) ondrain(err)
-    else this.emit('error', err)
-  }
-
-  if (this._forwardDestroy) {
-    if (this._readable && this._readable.destroy) this._readable.destroy()
-    if (this._writable && this._writable.destroy) this._writable.destroy()
-  }
-
-  this.emit('close')
-}
-
-Duplexify.prototype._write = function(data, enc, cb) {
-  if (this.destroyed) return cb()
-  if (this._corked) return onuncork(this, this._write.bind(this, data, enc, cb))
-  if (data === SIGNAL_FLUSH) return this._finish(cb)
-  if (!this._writable) return cb()
-
-  if (this._writable.write(data) === false) this._ondrain = cb
-  else cb()
-}
-
-
-Duplexify.prototype._finish = function(cb) {
-  var self = this
-  this.emit('preend')
-  onuncork(this, function() {
-    end(self._forwardEnd && self._writable, function() {
-      // haxx to not emit prefinish twice
-      if (self._writableState.prefinished === false) self._writableState.prefinished = true
-      self.emit('prefinish')
-      onuncork(self, cb)
-    })
-  })
-}
-
-Duplexify.prototype.end = function(data, enc, cb) {
-  if (typeof data === 'function') return this.end(null, null, data)
-  if (typeof enc === 'function') return this.end(data, null, enc)
-  this._ended = true
-  if (data) this.write(data)
-  if (!this._writableState.ending) this.write(SIGNAL_FLUSH)
-  return stream.Writable.prototype.end.call(this, cb)
-}
-
-module.exports = Duplexify
-
-
-/***/ }),
-/* 387 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var crypto = __webpack_require__(11);
-var BigInteger = __webpack_require__(81).BigInteger;
-var ECPointFp = __webpack_require__(139).ECPointFp;
-var Buffer = __webpack_require__(15).Buffer;
-exports.ECCurves = __webpack_require__(638);
-
-// zero prepad
-function unstupid(hex,len)
-{
-	return (hex.length >= len) ? hex : unstupid("0"+hex,len);
-}
-
-exports.ECKey = function(curve, key, isPublic)
-{
-  var priv;
-	var c = curve();
-	var n = c.getN();
-  var bytes = Math.floor(n.bitLength()/8);
-
-  if(key)
-  {
-    if(isPublic)
-    {
-      var curve = c.getCurve();
-//      var x = key.slice(1,bytes+1); // skip the 04 for uncompressed format
-//      var y = key.slice(bytes+1);
-//      this.P = new ECPointFp(curve,
-//        curve.fromBigInteger(new BigInteger(x.toString("hex"), 16)),
-//        curve.fromBigInteger(new BigInteger(y.toString("hex"), 16)));      
-      this.P = curve.decodePointHex(key.toString("hex"));
-    }else{
-      if(key.length != bytes) return false;
-      priv = new BigInteger(key.toString("hex"), 16);      
-    }
-  }else{
-    var n1 = n.subtract(BigInteger.ONE);
-    var r = new BigInteger(crypto.randomBytes(n.bitLength()));
-    priv = r.mod(n1).add(BigInteger.ONE);
-    this.P = c.getG().multiply(priv);
-  }
-  if(this.P)
-  {
-//  var pubhex = unstupid(this.P.getX().toBigInteger().toString(16),bytes*2)+unstupid(this.P.getY().toBigInteger().toString(16),bytes*2);
-//  this.PublicKey = Buffer.from("04"+pubhex,"hex");
-    this.PublicKey = Buffer.from(c.getCurve().encodeCompressedPointHex(this.P),"hex");
-  }
-  if(priv)
-  {
-    this.PrivateKey = Buffer.from(unstupid(priv.toString(16),bytes*2),"hex");
-    this.deriveSharedSecret = function(key)
-    {
-      if(!key || !key.P) return false;
-      var S = key.P.multiply(priv);
-      return Buffer.from(unstupid(S.getX().toBigInteger().toString(16),bytes*2),"hex");
-   }     
-  }
-}
-
-
-
-/***/ }),
-/* 388 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
-
-module.exports = function (str) {
-	if (typeof str !== 'string') {
-		throw new TypeError('Expected a string');
-	}
-
-	return str.replace(matchOperatorsRe, '\\$&');
-};
-
-
-/***/ }),
-/* 389 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-module.exports = function (data, opts) {
-    if (!opts) opts = {};
-    if (typeof opts === 'function') opts = { cmp: opts };
-    var cycles = (typeof opts.cycles === 'boolean') ? opts.cycles : false;
-
-    var cmp = opts.cmp && (function (f) {
-        return function (node) {
-            return function (a, b) {
-                var aobj = { key: a, value: node[a] };
-                var bobj = { key: b, value: node[b] };
-                return f(aobj, bobj);
-            };
-        };
-    })(opts.cmp);
-
-    var seen = [];
-    return (function stringify (node) {
-        if (node && node.toJSON && typeof node.toJSON === 'function') {
-            node = node.toJSON();
-        }
-
-        if (node === undefined) return;
-        if (typeof node == 'number') return isFinite(node) ? '' + node : 'null';
-        if (typeof node !== 'object') return JSON.stringify(node);
-
-        var i, out;
-        if (Array.isArray(node)) {
-            out = '[';
-            for (i = 0; i < node.length; i++) {
-                if (i) out += ',';
-                out += stringify(node[i]) || 'null';
-            }
-            return out + ']';
-        }
-
-        if (node === null) return 'null';
-
-        if (seen.indexOf(node) !== -1) {
-            if (cycles) return JSON.stringify('__cycle__');
-            throw new TypeError('Converting circular structure to JSON');
-        }
-
-        var seenIndex = seen.push(node) - 1;
-        var keys = Object.keys(node).sort(cmp && cmp(node));
-        out = '';
-        for (i = 0; i < keys.length; i++) {
-            var key = keys[i];
-            var value = stringify(node[key]);
-
-            if (!value) continue;
-            if (out) out += ',';
-            out += JSON.stringify(key) + ':' + value;
-        }
-        seen.splice(seenIndex, 1);
-        return '{' + out + '}';
-    })(data);
-};
-
-
-/***/ }),
-/* 390 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var fs = __webpack_require__(5)
-
-module.exports = clone(fs)
-
-function clone (obj) {
-  if (obj === null || typeof obj !== 'object')
-    return obj
-
-  if (obj instanceof Object)
-    var copy = { __proto__: obj.__proto__ }
-  else
-    var copy = Object.create(null)
-
-  Object.getOwnPropertyNames(obj).forEach(function (key) {
-    Object.defineProperty(copy, key, Object.getOwnPropertyDescriptor(obj, key))
-  })
-
-  return copy
-}
-
-
-/***/ }),
-/* 391 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var fs = __webpack_require__(5)
-var polyfills = __webpack_require__(655)
-var legacy = __webpack_require__(654)
-var queue = []
-
-var util = __webpack_require__(3)
-
-function noop () {}
-
-var debug = noop
-if (util.debuglog)
-  debug = util.debuglog('gfs4')
-else if (/\bgfs4\b/i.test(process.env.NODE_DEBUG || ''))
-  debug = function() {
-    var m = util.format.apply(util, arguments)
-    m = 'GFS4: ' + m.split(/\n/).join('\nGFS4: ')
-    console.error(m)
-  }
-
-if (/\bgfs4\b/i.test(process.env.NODE_DEBUG || '')) {
-  process.on('exit', function() {
-    debug(queue)
-    __webpack_require__(28).equal(queue.length, 0)
-  })
-}
-
-module.exports = patch(__webpack_require__(390))
-if (process.env.TEST_GRACEFUL_FS_GLOBAL_PATCH) {
-  module.exports = patch(fs)
-}
-
-// Always patch fs.close/closeSync, because we want to
-// retry() whenever a close happens *anywhere* in the program.
-// This is essential when multiple graceful-fs instances are
-// in play at the same time.
-module.exports.close =
-fs.close = (function (fs$close) { return function (fd, cb) {
-  return fs$close.call(fs, fd, function (err) {
-    if (!err)
-      retry()
-
-    if (typeof cb === 'function')
-      cb.apply(this, arguments)
-  })
-}})(fs.close)
-
-module.exports.closeSync =
-fs.closeSync = (function (fs$closeSync) { return function (fd) {
-  // Note that graceful-fs also retries when fs.closeSync() fails.
-  // Looks like a bug to me, although it's probably a harmless one.
-  var rval = fs$closeSync.apply(fs, arguments)
-  retry()
-  return rval
-}})(fs.closeSync)
-
-function patch (fs) {
-  // Everything that references the open() function needs to be in here
-  polyfills(fs)
-  fs.gracefulify = patch
-  fs.FileReadStream = ReadStream;  // Legacy name.
-  fs.FileWriteStream = WriteStream;  // Legacy name.
-  fs.createReadStream = createReadStream
-  fs.createWriteStream = createWriteStream
-  var fs$readFile = fs.readFile
-  fs.readFile = readFile
-  function readFile (path, options, cb) {
-    if (typeof options === 'function')
-      cb = options, options = null
-
-    return go$readFile(path, options, cb)
-
-    function go$readFile (path, options, cb) {
-      return fs$readFile(path, options, function (err) {
-        if (err && (err.code === 'EMFILE' || err.code === 'ENFILE'))
-          enqueue([go$readFile, [path, options, cb]])
-        else {
-          if (typeof cb === 'function')
-            cb.apply(this, arguments)
-          retry()
-        }
-      })
-    }
-  }
-
-  var fs$writeFile = fs.writeFile
-  fs.writeFile = writeFile
-  function writeFile (path, data, options, cb) {
-    if (typeof options === 'function')
-      cb = options, options = null
-
-    return go$writeFile(path, data, options, cb)
-
-    function go$writeFile (path, data, options, cb) {
-      return fs$writeFile(path, data, options, function (err) {
-        if (err && (err.code === 'EMFILE' || err.code === 'ENFILE'))
-          enqueue([go$writeFile, [path, data, options, cb]])
-        else {
-          if (typeof cb === 'function')
-            cb.apply(this, arguments)
-          retry()
-        }
-      })
-    }
-  }
-
-  var fs$appendFile = fs.appendFile
-  if (fs$appendFile)
-    fs.appendFile = appendFile
-  function appendFile (path, data, options, cb) {
-    if (typeof options === 'function')
-      cb = options, options = null
-
-    return go$appendFile(path, data, options, cb)
-
-    function go$appendFile (path, data, options, cb) {
-      return fs$appendFile(path, data, options, function (err) {
-        if (err && (err.code === 'EMFILE' || err.code === 'ENFILE'))
-          enqueue([go$appendFile, [path, data, options, cb]])
-        else {
-          if (typeof cb === 'function')
-            cb.apply(this, arguments)
-          retry()
-        }
-      })
-    }
-  }
-
-  var fs$readdir = fs.readdir
-  fs.readdir = readdir
-  function readdir (path, options, cb) {
-    var args = [path]
-    if (typeof options !== 'function') {
-      args.push(options)
-    } else {
-      cb = options
-    }
-    args.push(go$readdir$cb)
-
-    return go$readdir(args)
-
-    function go$readdir$cb (err, files) {
-      if (files && files.sort)
-        files.sort()
-
-      if (err && (err.code === 'EMFILE' || err.code === 'ENFILE'))
-        enqueue([go$readdir, [args]])
-      else {
-        if (typeof cb === 'function')
-          cb.apply(this, arguments)
-        retry()
-      }
-    }
-  }
-
-  function go$readdir (args) {
-    return fs$readdir.apply(fs, args)
-  }
-
-  if (process.version.substr(0, 4) === 'v0.8') {
-    var legStreams = legacy(fs)
-    ReadStream = legStreams.ReadStream
-    WriteStream = legStreams.WriteStream
-  }
-
-  var fs$ReadStream = fs.ReadStream
-  ReadStream.prototype = Object.create(fs$ReadStream.prototype)
-  ReadStream.prototype.open = ReadStream$open
-
-  var fs$WriteStream = fs.WriteStream
-  WriteStream.prototype = Object.create(fs$WriteStream.prototype)
-  WriteStream.prototype.open = WriteStream$open
-
-  fs.ReadStream = ReadStream
-  fs.WriteStream = WriteStream
-
-  function ReadStream (path, options) {
-    if (this instanceof ReadStream)
-      return fs$ReadStream.apply(this, arguments), this
-    else
-      return ReadStream.apply(Object.create(ReadStream.prototype), arguments)
-  }
-
-  function ReadStream$open () {
-    var that = this
-    open(that.path, that.flags, that.mode, function (err, fd) {
-      if (err) {
-        if (that.autoClose)
-          that.destroy()
-
-        that.emit('error', err)
-      } else {
-        that.fd = fd
-        that.emit('open', fd)
-        that.read()
-      }
-    })
-  }
-
-  function WriteStream (path, options) {
-    if (this instanceof WriteStream)
-      return fs$WriteStream.apply(this, arguments), this
-    else
-      return WriteStream.apply(Object.create(WriteStream.prototype), arguments)
-  }
-
-  function WriteStream$open () {
-    var that = this
-    open(that.path, that.flags, that.mode, function (err, fd) {
-      if (err) {
-        that.destroy()
-        that.emit('error', err)
-      } else {
-        that.fd = fd
-        that.emit('open', fd)
-      }
-    })
-  }
-
-  function createReadStream (path, options) {
-    return new ReadStream(path, options)
-  }
-
-  function createWriteStream (path, options) {
-    return new WriteStream(path, options)
-  }
-
-  var fs$open = fs.open
-  fs.open = open
-  function open (path, flags, mode, cb) {
-    if (typeof mode === 'function')
-      cb = mode, mode = null
-
-    return go$open(path, flags, mode, cb)
-
-    function go$open (path, flags, mode, cb) {
-      return fs$open(path, flags, mode, function (err, fd) {
-        if (err && (err.code === 'EMFILE' || err.code === 'ENFILE'))
-          enqueue([go$open, [path, flags, mode, cb]])
-        else {
-          if (typeof cb === 'function')
-            cb.apply(this, arguments)
-          retry()
-        }
-      })
-    }
-  }
-
-  return fs
-}
-
-function enqueue (elem) {
-  debug('ENQUEUE', elem[0].name, elem[1])
-  queue.push(elem)
-}
-
-function retry () {
-  var elem = queue.shift()
-  if (elem) {
-    debug('RETRY', elem[0].name, elem[1])
-    elem[0].apply(null, elem[1])
-  }
-}
-
-
-/***/ }),
-/* 392 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `input` type prompt
- */
-
-var chalk = __webpack_require__(30);
-var { map, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var observe = __webpack_require__(80);
-
-class InputPrompt extends Base {
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    // Once user confirm (enter key)
-    var events = observe(this.rl);
-    var submit = events.line.pipe(map(this.filterInput.bind(this)));
-
-    var validation = this.handleSubmitEvents(submit);
-    validation.success.forEach(this.onEnd.bind(this));
-    validation.error.forEach(this.onError.bind(this));
-
-    events.keypress
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onKeypress.bind(this));
-
-    // Init
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {InputPrompt} self
-   */
-
-  render(error) {
-    var bottomContent = '';
-    var appendContent = '';
-    var message = this.getQuestion();
-    var transformer = this.opt.transformer;
-    var isFinal = this.status === 'answered';
-
-    if (isFinal) {
-      appendContent = this.answer;
-    } else {
-      appendContent = this.rl.line;
-    }
-
-    if (transformer) {
-      message += transformer(appendContent, this.answers, { isFinal });
-    } else {
-      message += isFinal ? chalk.cyan(appendContent) : appendContent;
-    }
-
-    if (error) {
-      bottomContent = chalk.red('>> ') + error;
-    }
-
-    this.screen.render(message, bottomContent);
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  filterInput(input) {
-    if (!input) {
-      return this.opt.default == null ? '' : this.opt.default;
-    }
-    return input;
-  }
-
-  onEnd(state) {
-    this.answer = state.value;
-    this.status = 'answered';
-
-    // Re-render prompt
-    this.render();
-
-    this.screen.done();
-    this.done(state.value);
-  }
-
-  onError(state) {
-    this.render(state.isValid);
-  }
-
-  /**
-   * When user press a key
-   */
-
-  onKeypress() {
-    // If user press a key, just clear the default value
-    if (this.opt.default) {
-      this.opt.default = undefined;
-    }
-
-    this.render();
-  }
-}
-
-module.exports = InputPrompt;
-
-
-/***/ }),
-/* 393 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var _ = __webpack_require__(38);
-var MuteStream = __webpack_require__(401);
-var readline = __webpack_require__(197);
-
-/**
- * Base interface class other can inherits from
- */
-
-class UI {
-  constructor(opt) {
-    // Instantiate the Readline interface
-    // @Note: Don't reassign if already present (allow test to override the Stream)
-    if (!this.rl) {
-      this.rl = readline.createInterface(setupReadlineOptions(opt));
-    }
-    this.rl.resume();
-
-    this.onForceClose = this.onForceClose.bind(this);
-
-    // Make sure new prompt start on a newline when closing
-    process.on('exit', this.onForceClose);
-
-    // Terminate process on SIGINT (which will call process.on('exit') in return)
-    this.rl.on('SIGINT', this.onForceClose);
-  }
-
-  /**
-   * Handle the ^C exit
-   * @return {null}
-   */
-
-  onForceClose() {
-    this.close();
-    process.kill(process.pid, 'SIGINT');
-    console.log('');
-  }
-
-  /**
-   * Close the interface and cleanup listeners
-   */
-
-  close() {
-    // Remove events listeners
-    this.rl.removeListener('SIGINT', this.onForceClose);
-    process.removeListener('exit', this.onForceClose);
-
-    this.rl.output.unmute();
-
-    if (this.activePrompt && typeof this.activePrompt.close === 'function') {
-      this.activePrompt.close();
-    }
-
-    // Close the readline
-    this.rl.output.end();
-    this.rl.pause();
-    this.rl.close();
-  }
-}
-
-function setupReadlineOptions(opt) {
-  opt = opt || {};
-
-  // Default `input` to stdin
-  var input = opt.input || process.stdin;
-
-  // Add mute capabilities to the output
-  var ms = new MuteStream();
-  ms.pipe(opt.output || process.stdout);
-  var output = ms;
-
-  return _.extend(
-    {
-      terminal: true,
-      input: input,
-      output: output
-    },
-    _.omit(opt, ['input', 'output'])
-  );
-}
-
-module.exports = UI;
-
-
-/***/ }),
-/* 394 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var ansiEscapes = __webpack_require__(504);
-
-/**
- * Move cursor left by `x`
- * @param  {Readline} rl - Readline instance
- * @param  {Number}   x  - How far to go left (default to 1)
- */
-
-exports.left = function(rl, x) {
-  rl.output.write(ansiEscapes.cursorBackward(x));
-};
-
-/**
- * Move cursor right by `x`
- * @param  {Readline} rl - Readline instance
- * @param  {Number}   x  - How far to go left (default to 1)
- */
-
-exports.right = function(rl, x) {
-  rl.output.write(ansiEscapes.cursorForward(x));
-};
-
-/**
- * Move cursor up by `x`
- * @param  {Readline} rl - Readline instance
- * @param  {Number}   x  - How far to go up (default to 1)
- */
-
-exports.up = function(rl, x) {
-  rl.output.write(ansiEscapes.cursorUp(x));
-};
-
-/**
- * Move cursor down by `x`
- * @param  {Readline} rl - Readline instance
- * @param  {Number}   x  - How far to go down (default to 1)
- */
-
-exports.down = function(rl, x) {
-  rl.output.write(ansiEscapes.cursorDown(x));
-};
-
-/**
- * Clear current line
- * @param  {Readline} rl  - Readline instance
- * @param  {Number}   len - number of line to delete
- */
-exports.clearLine = function(rl, len) {
-  rl.output.write(ansiEscapes.eraseLines(len));
-};
-
-
-/***/ }),
-/* 395 */
-/***/ (function(module, exports) {
-
-module.exports = [["0","\u0000",127],["a140","　，、。．‧；：？！︰…‥﹐﹑﹒·﹔﹕﹖﹗｜–︱—︳╴︴﹏（）︵︶｛｝︷︸〔〕︹︺【】︻︼《》︽︾〈〉︿﹀「」﹁﹂『』﹃﹄﹙﹚"],["a1a1","﹛﹜﹝﹞‘’“”〝〞‵′＃＆＊※§〃○●△▲◎☆★◇◆□■▽▼㊣℅¯￣＿ˍ﹉﹊﹍﹎﹋﹌﹟﹠﹡＋－×÷±√＜＞＝≦≧≠∞≒≡﹢",4,"～∩∪⊥∠∟⊿㏒㏑∫∮∵∴♀♂⊕⊙↑↓←→↖↗↙↘∥∣／"],["a240","＼∕﹨＄￥〒￠￡％＠℃℉﹩﹪﹫㏕㎜㎝㎞㏎㎡㎎㎏㏄°兙兛兞兝兡兣嗧瓩糎▁",7,"▏▎▍▌▋▊▉┼┴┬┤├▔─│▕┌┐└┘╭"],["a2a1","╮╰╯═╞╪╡◢◣◥◤╱╲╳０",9,"Ⅰ",9,"〡",8,"十卄卅Ａ",25,"ａ",21],["a340","ｗｘｙｚΑ",16,"Σ",6,"α",16,"σ",6,"ㄅ",10],["a3a1","ㄐ",25,"˙ˉˊˇˋ"],["a3e1","€"],["a440","一乙丁七乃九了二人儿入八几刀刁力匕十卜又三下丈上丫丸凡久么也乞于亡兀刃勺千叉口土士夕大女子孑孓寸小尢尸山川工己已巳巾干廾弋弓才"],["a4a1","丑丐不中丰丹之尹予云井互五亢仁什仃仆仇仍今介仄元允內六兮公冗凶分切刈勻勾勿化匹午升卅卞厄友及反壬天夫太夭孔少尤尺屯巴幻廿弔引心戈戶手扎支文斗斤方日曰月木欠止歹毋比毛氏水火爪父爻片牙牛犬王丙"],["a540","世丕且丘主乍乏乎以付仔仕他仗代令仙仞充兄冉冊冬凹出凸刊加功包匆北匝仟半卉卡占卯卮去可古右召叮叩叨叼司叵叫另只史叱台句叭叻四囚外"],["a5a1","央失奴奶孕它尼巨巧左市布平幼弁弘弗必戊打扔扒扑斥旦朮本未末札正母民氐永汁汀氾犯玄玉瓜瓦甘生用甩田由甲申疋白皮皿目矛矢石示禾穴立丞丟乒乓乩亙交亦亥仿伉伙伊伕伍伐休伏仲件任仰仳份企伋光兇兆先全"],["a640","共再冰列刑划刎刖劣匈匡匠印危吉吏同吊吐吁吋各向名合吃后吆吒因回囝圳地在圭圬圯圩夙多夷夸妄奸妃好她如妁字存宇守宅安寺尖屹州帆并年"],["a6a1","式弛忙忖戎戌戍成扣扛托收早旨旬旭曲曳有朽朴朱朵次此死氖汝汗汙江池汐汕污汛汍汎灰牟牝百竹米糸缶羊羽老考而耒耳聿肉肋肌臣自至臼舌舛舟艮色艾虫血行衣西阡串亨位住佇佗佞伴佛何估佐佑伽伺伸佃佔似但佣"],["a740","作你伯低伶余佝佈佚兌克免兵冶冷別判利刪刨劫助努劬匣即卵吝吭吞吾否呎吧呆呃吳呈呂君吩告吹吻吸吮吵吶吠吼呀吱含吟听囪困囤囫坊坑址坍"],["a7a1","均坎圾坐坏圻壯夾妝妒妨妞妣妙妖妍妤妓妊妥孝孜孚孛完宋宏尬局屁尿尾岐岑岔岌巫希序庇床廷弄弟彤形彷役忘忌志忍忱快忸忪戒我抄抗抖技扶抉扭把扼找批扳抒扯折扮投抓抑抆改攻攸旱更束李杏材村杜杖杞杉杆杠"],["a840","杓杗步每求汞沙沁沈沉沅沛汪決沐汰沌汨沖沒汽沃汲汾汴沆汶沍沔沘沂灶灼災灸牢牡牠狄狂玖甬甫男甸皂盯矣私秀禿究系罕肖肓肝肘肛肚育良芒"],["a8a1","芋芍見角言谷豆豕貝赤走足身車辛辰迂迆迅迄巡邑邢邪邦那酉釆里防阮阱阪阬並乖乳事些亞享京佯依侍佳使佬供例來侃佰併侈佩佻侖佾侏侑佺兔兒兕兩具其典冽函刻券刷刺到刮制剁劾劻卒協卓卑卦卷卸卹取叔受味呵"],["a940","咖呸咕咀呻呷咄咒咆呼咐呱呶和咚呢周咋命咎固垃坷坪坩坡坦坤坼夜奉奇奈奄奔妾妻委妹妮姑姆姐姍始姓姊妯妳姒姅孟孤季宗定官宜宙宛尚屈居"],["a9a1","屆岷岡岸岩岫岱岳帘帚帖帕帛帑幸庚店府底庖延弦弧弩往征彿彼忝忠忽念忿怏怔怯怵怖怪怕怡性怩怫怛或戕房戾所承拉拌拄抿拂抹拒招披拓拔拋拈抨抽押拐拙拇拍抵拚抱拘拖拗拆抬拎放斧於旺昔易昌昆昂明昀昏昕昊"],["aa40","昇服朋杭枋枕東果杳杷枇枝林杯杰板枉松析杵枚枓杼杪杲欣武歧歿氓氛泣注泳沱泌泥河沽沾沼波沫法泓沸泄油況沮泗泅泱沿治泡泛泊沬泯泜泖泠"],["aaa1","炕炎炒炊炙爬爭爸版牧物狀狎狙狗狐玩玨玟玫玥甽疝疙疚的盂盲直知矽社祀祁秉秈空穹竺糾罔羌羋者肺肥肢肱股肫肩肴肪肯臥臾舍芳芝芙芭芽芟芹花芬芥芯芸芣芰芾芷虎虱初表軋迎返近邵邸邱邶采金長門阜陀阿阻附"],["ab40","陂隹雨青非亟亭亮信侵侯便俠俑俏保促侶俘俟俊俗侮俐俄係俚俎俞侷兗冒冑冠剎剃削前剌剋則勇勉勃勁匍南卻厚叛咬哀咨哎哉咸咦咳哇哂咽咪品"],["aba1","哄哈咯咫咱咻咩咧咿囿垂型垠垣垢城垮垓奕契奏奎奐姜姘姿姣姨娃姥姪姚姦威姻孩宣宦室客宥封屎屏屍屋峙峒巷帝帥帟幽庠度建弈弭彥很待徊律徇後徉怒思怠急怎怨恍恰恨恢恆恃恬恫恪恤扁拜挖按拼拭持拮拽指拱拷"],["ac40","拯括拾拴挑挂政故斫施既春昭映昧是星昨昱昤曷柿染柱柔某柬架枯柵柩柯柄柑枴柚查枸柏柞柳枰柙柢柝柒歪殃殆段毒毗氟泉洋洲洪流津洌洱洞洗"],["aca1","活洽派洶洛泵洹洧洸洩洮洵洎洫炫為炳炬炯炭炸炮炤爰牲牯牴狩狠狡玷珊玻玲珍珀玳甚甭畏界畎畋疫疤疥疢疣癸皆皇皈盈盆盃盅省盹相眉看盾盼眇矜砂研砌砍祆祉祈祇禹禺科秒秋穿突竿竽籽紂紅紀紉紇約紆缸美羿耄"],["ad40","耐耍耑耶胖胥胚胃胄背胡胛胎胞胤胝致舢苧范茅苣苛苦茄若茂茉苒苗英茁苜苔苑苞苓苟苯茆虐虹虻虺衍衫要觔計訂訃貞負赴赳趴軍軌述迦迢迪迥"],["ada1","迭迫迤迨郊郎郁郃酋酊重閂限陋陌降面革韋韭音頁風飛食首香乘亳倌倍倣俯倦倥俸倩倖倆值借倚倒們俺倀倔倨俱倡個候倘俳修倭倪俾倫倉兼冤冥冢凍凌准凋剖剜剔剛剝匪卿原厝叟哨唐唁唷哼哥哲唆哺唔哩哭員唉哮哪"],["ae40","哦唧唇哽唏圃圄埂埔埋埃堉夏套奘奚娑娘娜娟娛娓姬娠娣娩娥娌娉孫屘宰害家宴宮宵容宸射屑展屐峭峽峻峪峨峰島崁峴差席師庫庭座弱徒徑徐恙"],["aea1","恣恥恐恕恭恩息悄悟悚悍悔悌悅悖扇拳挈拿捎挾振捕捂捆捏捉挺捐挽挪挫挨捍捌效敉料旁旅時晉晏晃晒晌晅晁書朔朕朗校核案框桓根桂桔栩梳栗桌桑栽柴桐桀格桃株桅栓栘桁殊殉殷氣氧氨氦氤泰浪涕消涇浦浸海浙涓"],["af40","浬涉浮浚浴浩涌涊浹涅浥涔烊烘烤烙烈烏爹特狼狹狽狸狷玆班琉珮珠珪珞畔畝畜畚留疾病症疲疳疽疼疹痂疸皋皰益盍盎眩真眠眨矩砰砧砸砝破砷"],["afa1","砥砭砠砟砲祕祐祠祟祖神祝祗祚秤秣秧租秦秩秘窄窈站笆笑粉紡紗紋紊素索純紐紕級紜納紙紛缺罟羔翅翁耆耘耕耙耗耽耿胱脂胰脅胭胴脆胸胳脈能脊胼胯臭臬舀舐航舫舨般芻茫荒荔荊茸荐草茵茴荏茲茹茶茗荀茱茨荃"],["b040","虔蚊蚪蚓蚤蚩蚌蚣蚜衰衷袁袂衽衹記訐討訌訕訊託訓訖訏訑豈豺豹財貢起躬軒軔軏辱送逆迷退迺迴逃追逅迸邕郡郝郢酒配酌釘針釗釜釙閃院陣陡"],["b0a1","陛陝除陘陞隻飢馬骨高鬥鬲鬼乾偺偽停假偃偌做偉健偶偎偕偵側偷偏倏偯偭兜冕凰剪副勒務勘動匐匏匙匿區匾參曼商啪啦啄啞啡啃啊唱啖問啕唯啤唸售啜唬啣唳啁啗圈國圉域堅堊堆埠埤基堂堵執培夠奢娶婁婉婦婪婀"],["b140","娼婢婚婆婊孰寇寅寄寂宿密尉專將屠屜屝崇崆崎崛崖崢崑崩崔崙崤崧崗巢常帶帳帷康庸庶庵庾張強彗彬彩彫得徙從徘御徠徜恿患悉悠您惋悴惦悽"],["b1a1","情悻悵惜悼惘惕惆惟悸惚惇戚戛扈掠控捲掖探接捷捧掘措捱掩掉掃掛捫推掄授掙採掬排掏掀捻捩捨捺敝敖救教敗啟敏敘敕敔斜斛斬族旋旌旎晝晚晤晨晦晞曹勗望梁梯梢梓梵桿桶梱梧梗械梃棄梭梆梅梔條梨梟梡梂欲殺"],["b240","毫毬氫涎涼淳淙液淡淌淤添淺清淇淋涯淑涮淞淹涸混淵淅淒渚涵淚淫淘淪深淮淨淆淄涪淬涿淦烹焉焊烽烯爽牽犁猜猛猖猓猙率琅琊球理現琍瓠瓶"],["b2a1","瓷甜產略畦畢異疏痔痕疵痊痍皎盔盒盛眷眾眼眶眸眺硫硃硎祥票祭移窒窕笠笨笛第符笙笞笮粒粗粕絆絃統紮紹紼絀細紳組累終紲紱缽羞羚翌翎習耜聊聆脯脖脣脫脩脰脤舂舵舷舶船莎莞莘荸莢莖莽莫莒莊莓莉莠荷荻荼"],["b340","莆莧處彪蛇蛀蚶蛄蚵蛆蛋蚱蚯蛉術袞袈被袒袖袍袋覓規訪訝訣訥許設訟訛訢豉豚販責貫貨貪貧赧赦趾趺軛軟這逍通逗連速逝逐逕逞造透逢逖逛途"],["b3a1","部郭都酗野釵釦釣釧釭釩閉陪陵陳陸陰陴陶陷陬雀雪雩章竟頂頃魚鳥鹵鹿麥麻傢傍傅備傑傀傖傘傚最凱割剴創剩勞勝勛博厥啻喀喧啼喊喝喘喂喜喪喔喇喋喃喳單喟唾喲喚喻喬喱啾喉喫喙圍堯堪場堤堰報堡堝堠壹壺奠"],["b440","婷媚婿媒媛媧孳孱寒富寓寐尊尋就嵌嵐崴嵇巽幅帽幀幃幾廊廁廂廄弼彭復循徨惑惡悲悶惠愜愣惺愕惰惻惴慨惱愎惶愉愀愒戟扉掣掌描揀揩揉揆揍"],["b4a1","插揣提握揖揭揮捶援揪換摒揚揹敞敦敢散斑斐斯普晰晴晶景暑智晾晷曾替期朝棺棕棠棘棗椅棟棵森棧棹棒棲棣棋棍植椒椎棉棚楮棻款欺欽殘殖殼毯氮氯氬港游湔渡渲湧湊渠渥渣減湛湘渤湖湮渭渦湯渴湍渺測湃渝渾滋"],["b540","溉渙湎湣湄湲湩湟焙焚焦焰無然煮焜牌犄犀猶猥猴猩琺琪琳琢琥琵琶琴琯琛琦琨甥甦畫番痢痛痣痙痘痞痠登發皖皓皴盜睏短硝硬硯稍稈程稅稀窘"],["b5a1","窗窖童竣等策筆筐筒答筍筋筏筑粟粥絞結絨絕紫絮絲絡給絢絰絳善翔翕耋聒肅腕腔腋腑腎脹腆脾腌腓腴舒舜菩萃菸萍菠菅萋菁華菱菴著萊菰萌菌菽菲菊萸萎萄菜萇菔菟虛蛟蛙蛭蛔蛛蛤蛐蛞街裁裂袱覃視註詠評詞証詁"],["b640","詔詛詐詆訴診訶詖象貂貯貼貳貽賁費賀貴買貶貿貸越超趁跎距跋跚跑跌跛跆軻軸軼辜逮逵週逸進逶鄂郵鄉郾酣酥量鈔鈕鈣鈉鈞鈍鈐鈇鈑閔閏開閑"],["b6a1","間閒閎隊階隋陽隅隆隍陲隄雁雅雄集雇雯雲韌項順須飧飪飯飩飲飭馮馭黃黍黑亂傭債傲傳僅傾催傷傻傯僇剿剷剽募勦勤勢勣匯嗟嗨嗓嗦嗎嗜嗇嗑嗣嗤嗯嗚嗡嗅嗆嗥嗉園圓塞塑塘塗塚塔填塌塭塊塢塒塋奧嫁嫉嫌媾媽媼"],["b740","媳嫂媲嵩嵯幌幹廉廈弒彙徬微愚意慈感想愛惹愁愈慎慌慄慍愾愴愧愍愆愷戡戢搓搾搞搪搭搽搬搏搜搔損搶搖搗搆敬斟新暗暉暇暈暖暄暘暍會榔業"],["b7a1","楚楷楠楔極椰概楊楨楫楞楓楹榆楝楣楛歇歲毀殿毓毽溢溯滓溶滂源溝滇滅溥溘溼溺溫滑準溜滄滔溪溧溴煎煙煩煤煉照煜煬煦煌煥煞煆煨煖爺牒猷獅猿猾瑯瑚瑕瑟瑞瑁琿瑙瑛瑜當畸瘀痰瘁痲痱痺痿痴痳盞盟睛睫睦睞督"],["b840","睹睪睬睜睥睨睢矮碎碰碗碘碌碉硼碑碓硿祺祿禁萬禽稜稚稠稔稟稞窟窠筷節筠筮筧粱粳粵經絹綑綁綏絛置罩罪署義羨群聖聘肆肄腱腰腸腥腮腳腫"],["b8a1","腹腺腦舅艇蒂葷落萱葵葦葫葉葬葛萼萵葡董葩葭葆虞虜號蛹蜓蜈蜇蜀蛾蛻蜂蜃蜆蜊衙裟裔裙補裘裝裡裊裕裒覜解詫該詳試詩詰誇詼詣誠話誅詭詢詮詬詹詻訾詨豢貊貉賊資賈賄貲賃賂賅跡跟跨路跳跺跪跤跦躲較載軾輊"],["b940","辟農運遊道遂達逼違遐遇遏過遍遑逾遁鄒鄗酬酪酩釉鈷鉗鈸鈽鉀鈾鉛鉋鉤鉑鈴鉉鉍鉅鈹鈿鉚閘隘隔隕雍雋雉雊雷電雹零靖靴靶預頑頓頊頒頌飼飴"],["b9a1","飽飾馳馱馴髡鳩麂鼎鼓鼠僧僮僥僖僭僚僕像僑僱僎僩兢凳劃劂匱厭嗾嘀嘛嘗嗽嘔嘆嘉嘍嘎嗷嘖嘟嘈嘐嗶團圖塵塾境墓墊塹墅塽壽夥夢夤奪奩嫡嫦嫩嫗嫖嫘嫣孵寞寧寡寥實寨寢寤察對屢嶄嶇幛幣幕幗幔廓廖弊彆彰徹慇"],["ba40","愿態慷慢慣慟慚慘慵截撇摘摔撤摸摟摺摑摧搴摭摻敲斡旗旖暢暨暝榜榨榕槁榮槓構榛榷榻榫榴槐槍榭槌榦槃榣歉歌氳漳演滾漓滴漩漾漠漬漏漂漢"],["baa1","滿滯漆漱漸漲漣漕漫漯澈漪滬漁滲滌滷熔熙煽熊熄熒爾犒犖獄獐瑤瑣瑪瑰瑭甄疑瘧瘍瘋瘉瘓盡監瞄睽睿睡磁碟碧碳碩碣禎福禍種稱窪窩竭端管箕箋筵算箝箔箏箸箇箄粹粽精綻綰綜綽綾綠緊綴網綱綺綢綿綵綸維緒緇綬"],["bb40","罰翠翡翟聞聚肇腐膀膏膈膊腿膂臧臺與舔舞艋蓉蒿蓆蓄蒙蒞蒲蒜蓋蒸蓀蓓蒐蒼蓑蓊蜿蜜蜻蜢蜥蜴蜘蝕蜷蜩裳褂裴裹裸製裨褚裯誦誌語誣認誡誓誤"],["bba1","說誥誨誘誑誚誧豪貍貌賓賑賒赫趙趕跼輔輒輕輓辣遠遘遜遣遙遞遢遝遛鄙鄘鄞酵酸酷酴鉸銀銅銘銖鉻銓銜銨鉼銑閡閨閩閣閥閤隙障際雌雒需靼鞅韶頗領颯颱餃餅餌餉駁骯骰髦魁魂鳴鳶鳳麼鼻齊億儀僻僵價儂儈儉儅凜"],["bc40","劇劈劉劍劊勰厲嘮嘻嘹嘲嘿嘴嘩噓噎噗噴嘶嘯嘰墀墟增墳墜墮墩墦奭嬉嫻嬋嫵嬌嬈寮寬審寫層履嶝嶔幢幟幡廢廚廟廝廣廠彈影德徵慶慧慮慝慕憂"],["bca1","慼慰慫慾憧憐憫憎憬憚憤憔憮戮摩摯摹撞撲撈撐撰撥撓撕撩撒撮播撫撚撬撙撢撳敵敷數暮暫暴暱樣樟槨樁樞標槽模樓樊槳樂樅槭樑歐歎殤毅毆漿潼澄潑潦潔澆潭潛潸潮澎潺潰潤澗潘滕潯潠潟熟熬熱熨牖犛獎獗瑩璋璃"],["bd40","瑾璀畿瘠瘩瘟瘤瘦瘡瘢皚皺盤瞎瞇瞌瞑瞋磋磅確磊碾磕碼磐稿稼穀稽稷稻窯窮箭箱範箴篆篇篁箠篌糊締練緯緻緘緬緝編緣線緞緩綞緙緲緹罵罷羯"],["bda1","翩耦膛膜膝膠膚膘蔗蔽蔚蓮蔬蔭蔓蔑蔣蔡蔔蓬蔥蓿蔆螂蝴蝶蝠蝦蝸蝨蝙蝗蝌蝓衛衝褐複褒褓褕褊誼諒談諄誕請諸課諉諂調誰論諍誶誹諛豌豎豬賠賞賦賤賬賭賢賣賜質賡赭趟趣踫踐踝踢踏踩踟踡踞躺輝輛輟輩輦輪輜輞"],["be40","輥適遮遨遭遷鄰鄭鄧鄱醇醉醋醃鋅銻銷鋪銬鋤鋁銳銼鋒鋇鋰銲閭閱霄霆震霉靠鞍鞋鞏頡頫頜颳養餓餒餘駝駐駟駛駑駕駒駙骷髮髯鬧魅魄魷魯鴆鴉"],["bea1","鴃麩麾黎墨齒儒儘儔儐儕冀冪凝劑劓勳噙噫噹噩噤噸噪器噥噱噯噬噢噶壁墾壇壅奮嬝嬴學寰導彊憲憑憩憊懍憶憾懊懈戰擅擁擋撻撼據擄擇擂操撿擒擔撾整曆曉暹曄曇暸樽樸樺橙橫橘樹橄橢橡橋橇樵機橈歙歷氅濂澱澡"],["bf40","濃澤濁澧澳激澹澶澦澠澴熾燉燐燒燈燕熹燎燙燜燃燄獨璜璣璘璟璞瓢甌甍瘴瘸瘺盧盥瞠瞞瞟瞥磨磚磬磧禦積穎穆穌穋窺篙簑築篤篛篡篩篦糕糖縊"],["bfa1","縑縈縛縣縞縝縉縐罹羲翰翱翮耨膳膩膨臻興艘艙蕊蕙蕈蕨蕩蕃蕉蕭蕪蕞螃螟螞螢融衡褪褲褥褫褡親覦諦諺諫諱謀諜諧諮諾謁謂諷諭諳諶諼豫豭貓賴蹄踱踴蹂踹踵輻輯輸輳辨辦遵遴選遲遼遺鄴醒錠錶鋸錳錯錢鋼錫錄錚"],["c040","錐錦錡錕錮錙閻隧隨險雕霎霑霖霍霓霏靛靜靦鞘頰頸頻頷頭頹頤餐館餞餛餡餚駭駢駱骸骼髻髭鬨鮑鴕鴣鴦鴨鴒鴛默黔龍龜優償儡儲勵嚎嚀嚐嚅嚇"],["c0a1","嚏壕壓壑壎嬰嬪嬤孺尷屨嶼嶺嶽嶸幫彌徽應懂懇懦懋戲戴擎擊擘擠擰擦擬擱擢擭斂斃曙曖檀檔檄檢檜櫛檣橾檗檐檠歜殮毚氈濘濱濟濠濛濤濫濯澀濬濡濩濕濮濰燧營燮燦燥燭燬燴燠爵牆獰獲璩環璦璨癆療癌盪瞳瞪瞰瞬"],["c140","瞧瞭矯磷磺磴磯礁禧禪穗窿簇簍篾篷簌篠糠糜糞糢糟糙糝縮績繆縷縲繃縫總縱繅繁縴縹繈縵縿縯罄翳翼聱聲聰聯聳臆臃膺臂臀膿膽臉膾臨舉艱薪"],["c1a1","薄蕾薜薑薔薯薛薇薨薊虧蟀蟑螳蟒蟆螫螻螺蟈蟋褻褶襄褸褽覬謎謗謙講謊謠謝謄謐豁谿豳賺賽購賸賻趨蹉蹋蹈蹊轄輾轂轅輿避遽還邁邂邀鄹醣醞醜鍍鎂錨鍵鍊鍥鍋錘鍾鍬鍛鍰鍚鍔闊闋闌闈闆隱隸雖霜霞鞠韓顆颶餵騁"],["c240","駿鮮鮫鮪鮭鴻鴿麋黏點黜黝黛鼾齋叢嚕嚮壙壘嬸彝懣戳擴擲擾攆擺擻擷斷曜朦檳檬櫃檻檸櫂檮檯歟歸殯瀉瀋濾瀆濺瀑瀏燻燼燾燸獷獵璧璿甕癖癘"],["c2a1","癒瞽瞿瞻瞼礎禮穡穢穠竄竅簫簧簪簞簣簡糧織繕繞繚繡繒繙罈翹翻職聶臍臏舊藏薩藍藐藉薰薺薹薦蟯蟬蟲蟠覆覲觴謨謹謬謫豐贅蹙蹣蹦蹤蹟蹕軀轉轍邇邃邈醫醬釐鎔鎊鎖鎢鎳鎮鎬鎰鎘鎚鎗闔闖闐闕離雜雙雛雞霤鞣鞦"],["c340","鞭韹額顏題顎顓颺餾餿餽餮馥騎髁鬃鬆魏魎魍鯊鯉鯽鯈鯀鵑鵝鵠黠鼕鼬儳嚥壞壟壢寵龐廬懲懷懶懵攀攏曠曝櫥櫝櫚櫓瀛瀟瀨瀚瀝瀕瀘爆爍牘犢獸"],["c3a1","獺璽瓊瓣疇疆癟癡矇礙禱穫穩簾簿簸簽簷籀繫繭繹繩繪羅繳羶羹羸臘藩藝藪藕藤藥藷蟻蠅蠍蟹蟾襠襟襖襞譁譜識證譚譎譏譆譙贈贊蹼蹲躇蹶蹬蹺蹴轔轎辭邊邋醱醮鏡鏑鏟鏃鏈鏜鏝鏖鏢鏍鏘鏤鏗鏨關隴難霪霧靡韜韻類"],["c440","願顛颼饅饉騖騙鬍鯨鯧鯖鯛鶉鵡鵲鵪鵬麒麗麓麴勸嚨嚷嚶嚴嚼壤孀孃孽寶巉懸懺攘攔攙曦朧櫬瀾瀰瀲爐獻瓏癢癥礦礪礬礫竇競籌籃籍糯糰辮繽繼"],["c4a1","纂罌耀臚艦藻藹蘑藺蘆蘋蘇蘊蠔蠕襤覺觸議譬警譯譟譫贏贍躉躁躅躂醴釋鐘鐃鏽闡霰飄饒饑馨騫騰騷騵鰓鰍鹹麵黨鼯齟齣齡儷儸囁囀囂夔屬巍懼懾攝攜斕曩櫻欄櫺殲灌爛犧瓖瓔癩矓籐纏續羼蘗蘭蘚蠣蠢蠡蠟襪襬覽譴"],["c540","護譽贓躊躍躋轟辯醺鐮鐳鐵鐺鐸鐲鐫闢霸霹露響顧顥饗驅驃驀騾髏魔魑鰭鰥鶯鶴鷂鶸麝黯鼙齜齦齧儼儻囈囊囉孿巔巒彎懿攤權歡灑灘玀瓤疊癮癬"],["c5a1","禳籠籟聾聽臟襲襯觼讀贖贗躑躓轡酈鑄鑑鑒霽霾韃韁顫饕驕驍髒鬚鱉鰱鰾鰻鷓鷗鼴齬齪龔囌巖戀攣攫攪曬欐瓚竊籤籣籥纓纖纔臢蘸蘿蠱變邐邏鑣鑠鑤靨顯饜驚驛驗髓體髑鱔鱗鱖鷥麟黴囑壩攬灞癱癲矗罐羈蠶蠹衢讓讒"],["c640","讖艷贛釀鑪靂靈靄韆顰驟鬢魘鱟鷹鷺鹼鹽鼇齷齲廳欖灣籬籮蠻觀躡釁鑲鑰顱饞髖鬣黌灤矚讚鑷韉驢驥纜讜躪釅鑽鑾鑼鱷鱸黷豔鑿鸚爨驪鬱鸛鸞籲"],["c940","乂乜凵匚厂万丌乇亍囗兀屮彳丏冇与丮亓仂仉仈冘勼卬厹圠夃夬尐巿旡殳毌气爿丱丼仨仜仩仡仝仚刌匜卌圢圣夗夯宁宄尒尻屴屳帄庀庂忉戉扐氕"],["c9a1","氶汃氿氻犮犰玊禸肊阞伎优伬仵伔仱伀价伈伝伂伅伢伓伄仴伒冱刓刉刐劦匢匟卍厊吇囡囟圮圪圴夼妀奼妅奻奾奷奿孖尕尥屼屺屻屾巟幵庄异弚彴忕忔忏扜扞扤扡扦扢扙扠扚扥旯旮朾朹朸朻机朿朼朳氘汆汒汜汏汊汔汋"],["ca40","汌灱牞犴犵玎甪癿穵网艸艼芀艽艿虍襾邙邗邘邛邔阢阤阠阣佖伻佢佉体佤伾佧佒佟佁佘伭伳伿佡冏冹刜刞刡劭劮匉卣卲厎厏吰吷吪呔呅吙吜吥吘"],["caa1","吽呏呁吨吤呇囮囧囥坁坅坌坉坋坒夆奀妦妘妠妗妎妢妐妏妧妡宎宒尨尪岍岏岈岋岉岒岊岆岓岕巠帊帎庋庉庌庈庍弅弝彸彶忒忑忐忭忨忮忳忡忤忣忺忯忷忻怀忴戺抃抌抎抏抔抇扱扻扺扰抁抈扷扽扲扴攷旰旴旳旲旵杅杇"],["cb40","杙杕杌杈杝杍杚杋毐氙氚汸汧汫沄沋沏汱汯汩沚汭沇沕沜汦汳汥汻沎灴灺牣犿犽狃狆狁犺狅玕玗玓玔玒町甹疔疕皁礽耴肕肙肐肒肜芐芏芅芎芑芓"],["cba1","芊芃芄豸迉辿邟邡邥邞邧邠阰阨阯阭丳侘佼侅佽侀侇佶佴侉侄佷佌侗佪侚佹侁佸侐侜侔侞侒侂侕佫佮冞冼冾刵刲刳剆刱劼匊匋匼厒厔咇呿咁咑咂咈呫呺呾呥呬呴呦咍呯呡呠咘呣呧呤囷囹坯坲坭坫坱坰坶垀坵坻坳坴坢"],["cc40","坨坽夌奅妵妺姏姎妲姌姁妶妼姃姖妱妽姀姈妴姇孢孥宓宕屄屇岮岤岠岵岯岨岬岟岣岭岢岪岧岝岥岶岰岦帗帔帙弨弢弣弤彔徂彾彽忞忥怭怦怙怲怋"],["cca1","怴怊怗怳怚怞怬怢怍怐怮怓怑怌怉怜戔戽抭抴拑抾抪抶拊抮抳抯抻抩抰抸攽斨斻昉旼昄昒昈旻昃昋昍昅旽昑昐曶朊枅杬枎枒杶杻枘枆构杴枍枌杺枟枑枙枃杽极杸杹枔欥殀歾毞氝沓泬泫泮泙沶泔沭泧沷泐泂沺泃泆泭泲"],["cd40","泒泝沴沊沝沀泞泀洰泍泇沰泹泏泩泑炔炘炅炓炆炄炑炖炂炚炃牪狖狋狘狉狜狒狔狚狌狑玤玡玭玦玢玠玬玝瓝瓨甿畀甾疌疘皯盳盱盰盵矸矼矹矻矺"],["cda1","矷祂礿秅穸穻竻籵糽耵肏肮肣肸肵肭舠芠苀芫芚芘芛芵芧芮芼芞芺芴芨芡芩苂芤苃芶芢虰虯虭虮豖迒迋迓迍迖迕迗邲邴邯邳邰阹阽阼阺陃俍俅俓侲俉俋俁俔俜俙侻侳俛俇俖侺俀侹俬剄剉勀勂匽卼厗厖厙厘咺咡咭咥哏"],["ce40","哃茍咷咮哖咶哅哆咠呰咼咢咾呲哞咰垵垞垟垤垌垗垝垛垔垘垏垙垥垚垕壴复奓姡姞姮娀姱姝姺姽姼姶姤姲姷姛姩姳姵姠姾姴姭宨屌峐峘峌峗峋峛"],["cea1","峞峚峉峇峊峖峓峔峏峈峆峎峟峸巹帡帢帣帠帤庰庤庢庛庣庥弇弮彖徆怷怹恔恲恞恅恓恇恉恛恌恀恂恟怤恄恘恦恮扂扃拏挍挋拵挎挃拫拹挏挌拸拶挀挓挔拺挕拻拰敁敃斪斿昶昡昲昵昜昦昢昳昫昺昝昴昹昮朏朐柁柲柈枺"],["cf40","柜枻柸柘柀枷柅柫柤柟枵柍枳柷柶柮柣柂枹柎柧柰枲柼柆柭柌枮柦柛柺柉柊柃柪柋欨殂殄殶毖毘毠氠氡洨洴洭洟洼洿洒洊泚洳洄洙洺洚洑洀洝浂"],["cfa1","洁洘洷洃洏浀洇洠洬洈洢洉洐炷炟炾炱炰炡炴炵炩牁牉牊牬牰牳牮狊狤狨狫狟狪狦狣玅珌珂珈珅玹玶玵玴珫玿珇玾珃珆玸珋瓬瓮甮畇畈疧疪癹盄眈眃眄眅眊盷盻盺矧矨砆砑砒砅砐砏砎砉砃砓祊祌祋祅祄秕种秏秖秎窀"],["d040","穾竑笀笁籺籸籹籿粀粁紃紈紁罘羑羍羾耇耎耏耔耷胘胇胠胑胈胂胐胅胣胙胜胊胕胉胏胗胦胍臿舡芔苙苾苹茇苨茀苕茺苫苖苴苬苡苲苵茌苻苶苰苪"],["d0a1","苤苠苺苳苭虷虴虼虳衁衎衧衪衩觓訄訇赲迣迡迮迠郱邽邿郕郅邾郇郋郈釔釓陔陏陑陓陊陎倞倅倇倓倢倰倛俵俴倳倷倬俶俷倗倜倠倧倵倯倱倎党冔冓凊凄凅凈凎剡剚剒剞剟剕剢勍匎厞唦哢唗唒哧哳哤唚哿唄唈哫唑唅哱"],["d140","唊哻哷哸哠唎唃唋圁圂埌堲埕埒垺埆垽垼垸垶垿埇埐垹埁夎奊娙娖娭娮娕娏娗娊娞娳孬宧宭宬尃屖屔峬峿峮峱峷崀峹帩帨庨庮庪庬弳弰彧恝恚恧"],["d1a1","恁悢悈悀悒悁悝悃悕悛悗悇悜悎戙扆拲挐捖挬捄捅挶捃揤挹捋捊挼挩捁挴捘捔捙挭捇挳捚捑挸捗捀捈敊敆旆旃旄旂晊晟晇晑朒朓栟栚桉栲栳栻桋桏栖栱栜栵栫栭栯桎桄栴栝栒栔栦栨栮桍栺栥栠欬欯欭欱欴歭肂殈毦毤"],["d240","毨毣毢毧氥浺浣浤浶洍浡涒浘浢浭浯涑涍淯浿涆浞浧浠涗浰浼浟涂涘洯浨涋浾涀涄洖涃浻浽浵涐烜烓烑烝烋缹烢烗烒烞烠烔烍烅烆烇烚烎烡牂牸"],["d2a1","牷牶猀狺狴狾狶狳狻猁珓珙珥珖玼珧珣珩珜珒珛珔珝珚珗珘珨瓞瓟瓴瓵甡畛畟疰痁疻痄痀疿疶疺皊盉眝眛眐眓眒眣眑眕眙眚眢眧砣砬砢砵砯砨砮砫砡砩砳砪砱祔祛祏祜祓祒祑秫秬秠秮秭秪秜秞秝窆窉窅窋窌窊窇竘笐"],["d340","笄笓笅笏笈笊笎笉笒粄粑粊粌粈粍粅紞紝紑紎紘紖紓紟紒紏紌罜罡罞罠罝罛羖羒翃翂翀耖耾耹胺胲胹胵脁胻脀舁舯舥茳茭荄茙荑茥荖茿荁茦茜茢"],["d3a1","荂荎茛茪茈茼荍茖茤茠茷茯茩荇荅荌荓茞茬荋茧荈虓虒蚢蚨蚖蚍蚑蚞蚇蚗蚆蚋蚚蚅蚥蚙蚡蚧蚕蚘蚎蚝蚐蚔衃衄衭衵衶衲袀衱衿衯袃衾衴衼訒豇豗豻貤貣赶赸趵趷趶軑軓迾迵适迿迻逄迼迶郖郠郙郚郣郟郥郘郛郗郜郤酐"],["d440","酎酏釕釢釚陜陟隼飣髟鬯乿偰偪偡偞偠偓偋偝偲偈偍偁偛偊偢倕偅偟偩偫偣偤偆偀偮偳偗偑凐剫剭剬剮勖勓匭厜啵啶唼啍啐唴唪啑啢唶唵唰啒啅"],["d4a1","唌唲啥啎唹啈唭唻啀啋圊圇埻堔埢埶埜埴堀埭埽堈埸堋埳埏堇埮埣埲埥埬埡堎埼堐埧堁堌埱埩埰堍堄奜婠婘婕婧婞娸娵婭婐婟婥婬婓婤婗婃婝婒婄婛婈媎娾婍娹婌婰婩婇婑婖婂婜孲孮寁寀屙崞崋崝崚崠崌崨崍崦崥崏"],["d540","崰崒崣崟崮帾帴庱庴庹庲庳弶弸徛徖徟悊悐悆悾悰悺惓惔惏惤惙惝惈悱惛悷惊悿惃惍惀挲捥掊掂捽掽掞掭掝掗掫掎捯掇掐据掯捵掜捭掮捼掤挻掟"],["d5a1","捸掅掁掑掍捰敓旍晥晡晛晙晜晢朘桹梇梐梜桭桮梮梫楖桯梣梬梩桵桴梲梏桷梒桼桫桲梪梀桱桾梛梖梋梠梉梤桸桻梑梌梊桽欶欳欷欸殑殏殍殎殌氪淀涫涴涳湴涬淩淢涷淶淔渀淈淠淟淖涾淥淜淝淛淴淊涽淭淰涺淕淂淏淉"],["d640","淐淲淓淽淗淍淣涻烺焍烷焗烴焌烰焄烳焐烼烿焆焓焀烸烶焋焂焎牾牻牼牿猝猗猇猑猘猊猈狿猏猞玈珶珸珵琄琁珽琇琀珺珼珿琌琋珴琈畤畣痎痒痏"],["d6a1","痋痌痑痐皏皉盓眹眯眭眱眲眴眳眽眥眻眵硈硒硉硍硊硌砦硅硐祤祧祩祪祣祫祡离秺秸秶秷窏窔窐笵筇笴笥笰笢笤笳笘笪笝笱笫笭笯笲笸笚笣粔粘粖粣紵紽紸紶紺絅紬紩絁絇紾紿絊紻紨罣羕羜羝羛翊翋翍翐翑翇翏翉耟"],["d740","耞耛聇聃聈脘脥脙脛脭脟脬脞脡脕脧脝脢舑舸舳舺舴舲艴莐莣莨莍荺荳莤荴莏莁莕莙荵莔莩荽莃莌莝莛莪莋荾莥莯莈莗莰荿莦莇莮荶莚虙虖蚿蚷"],["d7a1","蛂蛁蛅蚺蚰蛈蚹蚳蚸蛌蚴蚻蚼蛃蚽蚾衒袉袕袨袢袪袚袑袡袟袘袧袙袛袗袤袬袌袓袎覂觖觙觕訰訧訬訞谹谻豜豝豽貥赽赻赹趼跂趹趿跁軘軞軝軜軗軠軡逤逋逑逜逌逡郯郪郰郴郲郳郔郫郬郩酖酘酚酓酕釬釴釱釳釸釤釹釪"],["d840","釫釷釨釮镺閆閈陼陭陫陱陯隿靪頄飥馗傛傕傔傞傋傣傃傌傎傝偨傜傒傂傇兟凔匒匑厤厧喑喨喥喭啷噅喢喓喈喏喵喁喣喒喤啽喌喦啿喕喡喎圌堩堷"],["d8a1","堙堞堧堣堨埵塈堥堜堛堳堿堶堮堹堸堭堬堻奡媯媔媟婺媢媞婸媦婼媥媬媕媮娷媄媊媗媃媋媩婻婽媌媜媏媓媝寪寍寋寔寑寊寎尌尰崷嵃嵫嵁嵋崿崵嵑嵎嵕崳崺嵒崽崱嵙嵂崹嵉崸崼崲崶嵀嵅幄幁彘徦徥徫惉悹惌惢惎惄愔"],["d940","惲愊愖愅惵愓惸惼惾惁愃愘愝愐惿愄愋扊掔掱掰揎揥揨揯揃撝揳揊揠揶揕揲揵摡揟掾揝揜揄揘揓揂揇揌揋揈揰揗揙攲敧敪敤敜敨敥斌斝斞斮旐旒"],["d9a1","晼晬晻暀晱晹晪晲朁椌棓椄棜椪棬棪棱椏棖棷棫棤棶椓椐棳棡椇棌椈楰梴椑棯棆椔棸棐棽棼棨椋椊椗棎棈棝棞棦棴棑椆棔棩椕椥棇欹欻欿欼殔殗殙殕殽毰毲毳氰淼湆湇渟湉溈渼渽湅湢渫渿湁湝湳渜渳湋湀湑渻渃渮湞"],["da40","湨湜湡渱渨湠湱湫渹渢渰湓湥渧湸湤湷湕湹湒湦渵渶湚焠焞焯烻焮焱焣焥焢焲焟焨焺焛牋牚犈犉犆犅犋猒猋猰猢猱猳猧猲猭猦猣猵猌琮琬琰琫琖"],["daa1","琚琡琭琱琤琣琝琩琠琲瓻甯畯畬痧痚痡痦痝痟痤痗皕皒盚睆睇睄睍睅睊睎睋睌矞矬硠硤硥硜硭硱硪确硰硩硨硞硢祴祳祲祰稂稊稃稌稄窙竦竤筊笻筄筈筌筎筀筘筅粢粞粨粡絘絯絣絓絖絧絪絏絭絜絫絒絔絩絑絟絎缾缿罥"],["db40","罦羢羠羡翗聑聏聐胾胔腃腊腒腏腇脽腍脺臦臮臷臸臹舄舼舽舿艵茻菏菹萣菀菨萒菧菤菼菶萐菆菈菫菣莿萁菝菥菘菿菡菋菎菖菵菉萉萏菞萑萆菂菳"],["dba1","菕菺菇菑菪萓菃菬菮菄菻菗菢萛菛菾蛘蛢蛦蛓蛣蛚蛪蛝蛫蛜蛬蛩蛗蛨蛑衈衖衕袺裗袹袸裀袾袶袼袷袽袲褁裉覕覘覗觝觚觛詎詍訹詙詀詗詘詄詅詒詈詑詊詌詏豟貁貀貺貾貰貹貵趄趀趉跘跓跍跇跖跜跏跕跙跈跗跅軯軷軺"],["dc40","軹軦軮軥軵軧軨軶軫軱軬軴軩逭逴逯鄆鄬鄄郿郼鄈郹郻鄁鄀鄇鄅鄃酡酤酟酢酠鈁鈊鈥鈃鈚鈦鈏鈌鈀鈒釿釽鈆鈄鈧鈂鈜鈤鈙鈗鈅鈖镻閍閌閐隇陾隈"],["dca1","隉隃隀雂雈雃雱雰靬靰靮頇颩飫鳦黹亃亄亶傽傿僆傮僄僊傴僈僂傰僁傺傱僋僉傶傸凗剺剸剻剼嗃嗛嗌嗐嗋嗊嗝嗀嗔嗄嗩喿嗒喍嗏嗕嗢嗖嗈嗲嗍嗙嗂圔塓塨塤塏塍塉塯塕塎塝塙塥塛堽塣塱壼嫇嫄嫋媺媸媱媵媰媿嫈媻嫆"],["dd40","媷嫀嫊媴媶嫍媹媐寖寘寙尟尳嵱嵣嵊嵥嵲嵬嵞嵨嵧嵢巰幏幎幊幍幋廅廌廆廋廇彀徯徭惷慉慊愫慅愶愲愮慆愯慏愩慀戠酨戣戥戤揅揱揫搐搒搉搠搤"],["dda1","搳摃搟搕搘搹搷搢搣搌搦搰搨摁搵搯搊搚摀搥搧搋揧搛搮搡搎敯斒旓暆暌暕暐暋暊暙暔晸朠楦楟椸楎楢楱椿楅楪椹楂楗楙楺楈楉椵楬椳椽楥棰楸椴楩楀楯楄楶楘楁楴楌椻楋椷楜楏楑椲楒椯楻椼歆歅歃歂歈歁殛嗀毻毼"],["de40","毹毷毸溛滖滈溏滀溟溓溔溠溱溹滆滒溽滁溞滉溷溰滍溦滏溲溾滃滜滘溙溒溎溍溤溡溿溳滐滊溗溮溣煇煔煒煣煠煁煝煢煲煸煪煡煂煘煃煋煰煟煐煓"],["dea1","煄煍煚牏犍犌犑犐犎猼獂猻猺獀獊獉瑄瑊瑋瑒瑑瑗瑀瑏瑐瑎瑂瑆瑍瑔瓡瓿瓾瓽甝畹畷榃痯瘏瘃痷痾痼痹痸瘐痻痶痭痵痽皙皵盝睕睟睠睒睖睚睩睧睔睙睭矠碇碚碔碏碄碕碅碆碡碃硹碙碀碖硻祼禂祽祹稑稘稙稒稗稕稢稓"],["df40","稛稐窣窢窞竫筦筤筭筴筩筲筥筳筱筰筡筸筶筣粲粴粯綈綆綀綍絿綅絺綎絻綃絼綌綔綄絽綒罭罫罧罨罬羦羥羧翛翜耡腤腠腷腜腩腛腢腲朡腞腶腧腯"],["dfa1","腄腡舝艉艄艀艂艅蓱萿葖葶葹蒏蒍葥葑葀蒆葧萰葍葽葚葙葴葳葝蔇葞萷萺萴葺葃葸萲葅萩菙葋萯葂萭葟葰萹葎葌葒葯蓅蒎萻葇萶萳葨葾葄萫葠葔葮葐蜋蜄蛷蜌蛺蛖蛵蝍蛸蜎蜉蜁蛶蜍蜅裖裋裍裎裞裛裚裌裐覅覛觟觥觤"],["e040","觡觠觢觜触詶誆詿詡訿詷誂誄詵誃誁詴詺谼豋豊豥豤豦貆貄貅賌赨赩趑趌趎趏趍趓趔趐趒跰跠跬跱跮跐跩跣跢跧跲跫跴輆軿輁輀輅輇輈輂輋遒逿"],["e0a1","遄遉逽鄐鄍鄏鄑鄖鄔鄋鄎酮酯鉈鉒鈰鈺鉦鈳鉥鉞銃鈮鉊鉆鉭鉬鉏鉠鉧鉯鈶鉡鉰鈱鉔鉣鉐鉲鉎鉓鉌鉖鈲閟閜閞閛隒隓隑隗雎雺雽雸雵靳靷靸靲頏頍頎颬飶飹馯馲馰馵骭骫魛鳪鳭鳧麀黽僦僔僗僨僳僛僪僝僤僓僬僰僯僣僠"],["e140","凘劀劁勩勫匰厬嘧嘕嘌嘒嗼嘏嘜嘁嘓嘂嗺嘝嘄嗿嗹墉塼墐墘墆墁塿塴墋塺墇墑墎塶墂墈塻墔墏壾奫嫜嫮嫥嫕嫪嫚嫭嫫嫳嫢嫠嫛嫬嫞嫝嫙嫨嫟孷寠"],["e1a1","寣屣嶂嶀嵽嶆嵺嶁嵷嶊嶉嶈嵾嵼嶍嵹嵿幘幙幓廘廑廗廎廜廕廙廒廔彄彃彯徶愬愨慁慞慱慳慒慓慲慬憀慴慔慺慛慥愻慪慡慖戩戧戫搫摍摛摝摴摶摲摳摽摵摦撦摎撂摞摜摋摓摠摐摿搿摬摫摙摥摷敳斠暡暠暟朅朄朢榱榶槉"],["e240","榠槎榖榰榬榼榑榙榎榧榍榩榾榯榿槄榽榤槔榹槊榚槏榳榓榪榡榞槙榗榐槂榵榥槆歊歍歋殞殟殠毃毄毾滎滵滱漃漥滸漷滻漮漉潎漙漚漧漘漻漒滭漊"],["e2a1","漶潳滹滮漭潀漰漼漵滫漇漎潃漅滽滶漹漜滼漺漟漍漞漈漡熇熐熉熀熅熂熏煻熆熁熗牄牓犗犕犓獃獍獑獌瑢瑳瑱瑵瑲瑧瑮甀甂甃畽疐瘖瘈瘌瘕瘑瘊瘔皸瞁睼瞅瞂睮瞀睯睾瞃碲碪碴碭碨硾碫碞碥碠碬碢碤禘禊禋禖禕禔禓"],["e340","禗禈禒禐稫穊稰稯稨稦窨窫窬竮箈箜箊箑箐箖箍箌箛箎箅箘劄箙箤箂粻粿粼粺綧綷緂綣綪緁緀緅綝緎緄緆緋緌綯綹綖綼綟綦綮綩綡緉罳翢翣翥翞"],["e3a1","耤聝聜膉膆膃膇膍膌膋舕蒗蒤蒡蒟蒺蓎蓂蒬蒮蒫蒹蒴蓁蓍蒪蒚蒱蓐蒝蒧蒻蒢蒔蓇蓌蒛蒩蒯蒨蓖蒘蒶蓏蒠蓗蓔蓒蓛蒰蒑虡蜳蜣蜨蝫蝀蜮蜞蜡蜙蜛蝃蜬蝁蜾蝆蜠蜲蜪蜭蜼蜒蜺蜱蜵蝂蜦蜧蜸蜤蜚蜰蜑裷裧裱裲裺裾裮裼裶裻"],["e440","裰裬裫覝覡覟覞觩觫觨誫誙誋誒誏誖谽豨豩賕賏賗趖踉踂跿踍跽踊踃踇踆踅跾踀踄輐輑輎輍鄣鄜鄠鄢鄟鄝鄚鄤鄡鄛酺酲酹酳銥銤鉶銛鉺銠銔銪銍"],["e4a1","銦銚銫鉹銗鉿銣鋮銎銂銕銢鉽銈銡銊銆銌銙銧鉾銇銩銝銋鈭隞隡雿靘靽靺靾鞃鞀鞂靻鞄鞁靿韎韍頖颭颮餂餀餇馝馜駃馹馻馺駂馽駇骱髣髧鬾鬿魠魡魟鳱鳲鳵麧僿儃儰僸儆儇僶僾儋儌僽儊劋劌勱勯噈噂噌嘵噁噊噉噆噘"],["e540","噚噀嘳嘽嘬嘾嘸嘪嘺圚墫墝墱墠墣墯墬墥墡壿嫿嫴嫽嫷嫶嬃嫸嬂嫹嬁嬇嬅嬏屧嶙嶗嶟嶒嶢嶓嶕嶠嶜嶡嶚嶞幩幝幠幜緳廛廞廡彉徲憋憃慹憱憰憢憉"],["e5a1","憛憓憯憭憟憒憪憡憍慦憳戭摮摰撖撠撅撗撜撏撋撊撌撣撟摨撱撘敶敺敹敻斲斳暵暰暩暲暷暪暯樀樆樗槥槸樕槱槤樠槿槬槢樛樝槾樧槲槮樔槷槧橀樈槦槻樍槼槫樉樄樘樥樏槶樦樇槴樖歑殥殣殢殦氁氀毿氂潁漦潾澇濆澒"],["e640","澍澉澌潢潏澅潚澖潶潬澂潕潲潒潐潗澔澓潝漀潡潫潽潧澐潓澋潩潿澕潣潷潪潻熲熯熛熰熠熚熩熵熝熥熞熤熡熪熜熧熳犘犚獘獒獞獟獠獝獛獡獚獙"],["e6a1","獢璇璉璊璆璁瑽璅璈瑼瑹甈甇畾瘥瘞瘙瘝瘜瘣瘚瘨瘛皜皝皞皛瞍瞏瞉瞈磍碻磏磌磑磎磔磈磃磄磉禚禡禠禜禢禛歶稹窲窴窳箷篋箾箬篎箯箹篊箵糅糈糌糋緷緛緪緧緗緡縃緺緦緶緱緰緮緟罶羬羰羭翭翫翪翬翦翨聤聧膣膟"],["e740","膞膕膢膙膗舖艏艓艒艐艎艑蔤蔻蔏蔀蔩蔎蔉蔍蔟蔊蔧蔜蓻蔫蓺蔈蔌蓴蔪蓲蔕蓷蓫蓳蓼蔒蓪蓩蔖蓾蔨蔝蔮蔂蓽蔞蓶蔱蔦蓧蓨蓰蓯蓹蔘蔠蔰蔋蔙蔯虢"],["e7a1","蝖蝣蝤蝷蟡蝳蝘蝔蝛蝒蝡蝚蝑蝞蝭蝪蝐蝎蝟蝝蝯蝬蝺蝮蝜蝥蝏蝻蝵蝢蝧蝩衚褅褌褔褋褗褘褙褆褖褑褎褉覢覤覣觭觰觬諏諆誸諓諑諔諕誻諗誾諀諅諘諃誺誽諙谾豍貏賥賟賙賨賚賝賧趠趜趡趛踠踣踥踤踮踕踛踖踑踙踦踧"],["e840","踔踒踘踓踜踗踚輬輤輘輚輠輣輖輗遳遰遯遧遫鄯鄫鄩鄪鄲鄦鄮醅醆醊醁醂醄醀鋐鋃鋄鋀鋙銶鋏鋱鋟鋘鋩鋗鋝鋌鋯鋂鋨鋊鋈鋎鋦鋍鋕鋉鋠鋞鋧鋑鋓"],["e8a1","銵鋡鋆銴镼閬閫閮閰隤隢雓霅霈霂靚鞊鞎鞈韐韏頞頝頦頩頨頠頛頧颲餈飺餑餔餖餗餕駜駍駏駓駔駎駉駖駘駋駗駌骳髬髫髳髲髱魆魃魧魴魱魦魶魵魰魨魤魬鳼鳺鳽鳿鳷鴇鴀鳹鳻鴈鴅鴄麃黓鼏鼐儜儓儗儚儑凞匴叡噰噠噮"],["e940","噳噦噣噭噲噞噷圜圛壈墽壉墿墺壂墼壆嬗嬙嬛嬡嬔嬓嬐嬖嬨嬚嬠嬞寯嶬嶱嶩嶧嶵嶰嶮嶪嶨嶲嶭嶯嶴幧幨幦幯廩廧廦廨廥彋徼憝憨憖懅憴懆懁懌憺"],["e9a1","憿憸憌擗擖擐擏擉撽撉擃擛擳擙攳敿敼斢曈暾曀曊曋曏暽暻暺曌朣樴橦橉橧樲橨樾橝橭橶橛橑樨橚樻樿橁橪橤橐橏橔橯橩橠樼橞橖橕橍橎橆歕歔歖殧殪殫毈毇氄氃氆澭濋澣濇澼濎濈潞濄澽澞濊澨瀄澥澮澺澬澪濏澿澸"],["ea40","澢濉澫濍澯澲澰燅燂熿熸燖燀燁燋燔燊燇燏熽燘熼燆燚燛犝犞獩獦獧獬獥獫獪瑿璚璠璔璒璕璡甋疀瘯瘭瘱瘽瘳瘼瘵瘲瘰皻盦瞚瞝瞡瞜瞛瞢瞣瞕瞙"],["eaa1","瞗磝磩磥磪磞磣磛磡磢磭磟磠禤穄穈穇窶窸窵窱窷篞篣篧篝篕篥篚篨篹篔篪篢篜篫篘篟糒糔糗糐糑縒縡縗縌縟縠縓縎縜縕縚縢縋縏縖縍縔縥縤罃罻罼罺羱翯耪耩聬膱膦膮膹膵膫膰膬膴膲膷膧臲艕艖艗蕖蕅蕫蕍蕓蕡蕘"],["eb40","蕀蕆蕤蕁蕢蕄蕑蕇蕣蔾蕛蕱蕎蕮蕵蕕蕧蕠薌蕦蕝蕔蕥蕬虣虥虤螛螏螗螓螒螈螁螖螘蝹螇螣螅螐螑螝螄螔螜螚螉褞褦褰褭褮褧褱褢褩褣褯褬褟觱諠"],["eba1","諢諲諴諵諝謔諤諟諰諈諞諡諨諿諯諻貑貒貐賵賮賱賰賳赬赮趥趧踳踾踸蹀蹅踶踼踽蹁踰踿躽輶輮輵輲輹輷輴遶遹遻邆郺鄳鄵鄶醓醐醑醍醏錧錞錈錟錆錏鍺錸錼錛錣錒錁鍆錭錎錍鋋錝鋺錥錓鋹鋷錴錂錤鋿錩錹錵錪錔錌"],["ec40","錋鋾錉錀鋻錖閼闍閾閹閺閶閿閵閽隩雔霋霒霐鞙鞗鞔韰韸頵頯頲餤餟餧餩馞駮駬駥駤駰駣駪駩駧骹骿骴骻髶髺髹髷鬳鮀鮅鮇魼魾魻鮂鮓鮒鮐魺鮕"],["eca1","魽鮈鴥鴗鴠鴞鴔鴩鴝鴘鴢鴐鴙鴟麈麆麇麮麭黕黖黺鼒鼽儦儥儢儤儠儩勴嚓嚌嚍嚆嚄嚃噾嚂噿嚁壖壔壏壒嬭嬥嬲嬣嬬嬧嬦嬯嬮孻寱寲嶷幬幪徾徻懃憵憼懧懠懥懤懨懞擯擩擣擫擤擨斁斀斶旚曒檍檖檁檥檉檟檛檡檞檇檓檎"],["ed40","檕檃檨檤檑橿檦檚檅檌檒歛殭氉濌澩濴濔濣濜濭濧濦濞濲濝濢濨燡燱燨燲燤燰燢獳獮獯璗璲璫璐璪璭璱璥璯甐甑甒甏疄癃癈癉癇皤盩瞵瞫瞲瞷瞶"],["eda1","瞴瞱瞨矰磳磽礂磻磼磲礅磹磾礄禫禨穜穛穖穘穔穚窾竀竁簅簏篲簀篿篻簎篴簋篳簂簉簃簁篸篽簆篰篱簐簊糨縭縼繂縳顈縸縪繉繀繇縩繌縰縻縶繄縺罅罿罾罽翴翲耬膻臄臌臊臅臇膼臩艛艚艜薃薀薏薧薕薠薋薣蕻薤薚薞"],["ee40","蕷蕼薉薡蕺蕸蕗薎薖薆薍薙薝薁薢薂薈薅蕹蕶薘薐薟虨螾螪螭蟅螰螬螹螵螼螮蟉蟃蟂蟌螷螯蟄蟊螴螶螿螸螽蟞螲褵褳褼褾襁襒褷襂覭覯覮觲觳謞"],["eea1","謘謖謑謅謋謢謏謒謕謇謍謈謆謜謓謚豏豰豲豱豯貕貔賹赯蹎蹍蹓蹐蹌蹇轃轀邅遾鄸醚醢醛醙醟醡醝醠鎡鎃鎯鍤鍖鍇鍼鍘鍜鍶鍉鍐鍑鍠鍭鎏鍌鍪鍹鍗鍕鍒鍏鍱鍷鍻鍡鍞鍣鍧鎀鍎鍙闇闀闉闃闅閷隮隰隬霠霟霘霝霙鞚鞡鞜"],["ef40","鞞鞝韕韔韱顁顄顊顉顅顃餥餫餬餪餳餲餯餭餱餰馘馣馡騂駺駴駷駹駸駶駻駽駾駼騃骾髾髽鬁髼魈鮚鮨鮞鮛鮦鮡鮥鮤鮆鮢鮠鮯鴳鵁鵧鴶鴮鴯鴱鴸鴰"],["efa1","鵅鵂鵃鴾鴷鵀鴽翵鴭麊麉麍麰黈黚黻黿鼤鼣鼢齔龠儱儭儮嚘嚜嚗嚚嚝嚙奰嬼屩屪巀幭幮懘懟懭懮懱懪懰懫懖懩擿攄擽擸攁攃擼斔旛曚曛曘櫅檹檽櫡櫆檺檶檷櫇檴檭歞毉氋瀇瀌瀍瀁瀅瀔瀎濿瀀濻瀦濼濷瀊爁燿燹爃燽獶"],["f040","璸瓀璵瓁璾璶璻瓂甔甓癜癤癙癐癓癗癚皦皽盬矂瞺磿礌礓礔礉礐礒礑禭禬穟簜簩簙簠簟簭簝簦簨簢簥簰繜繐繖繣繘繢繟繑繠繗繓羵羳翷翸聵臑臒"],["f0a1","臐艟艞薴藆藀藃藂薳薵薽藇藄薿藋藎藈藅薱薶藒蘤薸薷薾虩蟧蟦蟢蟛蟫蟪蟥蟟蟳蟤蟔蟜蟓蟭蟘蟣螤蟗蟙蠁蟴蟨蟝襓襋襏襌襆襐襑襉謪謧謣謳謰謵譇謯謼謾謱謥謷謦謶謮謤謻謽謺豂豵貙貘貗賾贄贂贀蹜蹢蹠蹗蹖蹞蹥蹧"],["f140","蹛蹚蹡蹝蹩蹔轆轇轈轋鄨鄺鄻鄾醨醥醧醯醪鎵鎌鎒鎷鎛鎝鎉鎧鎎鎪鎞鎦鎕鎈鎙鎟鎍鎱鎑鎲鎤鎨鎴鎣鎥闒闓闑隳雗雚巂雟雘雝霣霢霥鞬鞮鞨鞫鞤鞪"],["f1a1","鞢鞥韗韙韖韘韺顐顑顒颸饁餼餺騏騋騉騍騄騑騊騅騇騆髀髜鬈鬄鬅鬩鬵魊魌魋鯇鯆鯃鮿鯁鮵鮸鯓鮶鯄鮹鮽鵜鵓鵏鵊鵛鵋鵙鵖鵌鵗鵒鵔鵟鵘鵚麎麌黟鼁鼀鼖鼥鼫鼪鼩鼨齌齕儴儵劖勷厴嚫嚭嚦嚧嚪嚬壚壝壛夒嬽嬾嬿巃幰"],["f240","徿懻攇攐攍攉攌攎斄旞旝曞櫧櫠櫌櫑櫙櫋櫟櫜櫐櫫櫏櫍櫞歠殰氌瀙瀧瀠瀖瀫瀡瀢瀣瀩瀗瀤瀜瀪爌爊爇爂爅犥犦犤犣犡瓋瓅璷瓃甖癠矉矊矄矱礝礛"],["f2a1","礡礜礗礞禰穧穨簳簼簹簬簻糬糪繶繵繸繰繷繯繺繲繴繨罋罊羃羆羷翽翾聸臗臕艤艡艣藫藱藭藙藡藨藚藗藬藲藸藘藟藣藜藑藰藦藯藞藢蠀蟺蠃蟶蟷蠉蠌蠋蠆蟼蠈蟿蠊蠂襢襚襛襗襡襜襘襝襙覈覷覶觶譐譈譊譀譓譖譔譋譕"],["f340","譑譂譒譗豃豷豶貚贆贇贉趬趪趭趫蹭蹸蹳蹪蹯蹻軂轒轑轏轐轓辴酀鄿醰醭鏞鏇鏏鏂鏚鏐鏹鏬鏌鏙鎩鏦鏊鏔鏮鏣鏕鏄鏎鏀鏒鏧镽闚闛雡霩霫霬霨霦"],["f3a1","鞳鞷鞶韝韞韟顜顙顝顗颿颽颻颾饈饇饃馦馧騚騕騥騝騤騛騢騠騧騣騞騜騔髂鬋鬊鬎鬌鬷鯪鯫鯠鯞鯤鯦鯢鯰鯔鯗鯬鯜鯙鯥鯕鯡鯚鵷鶁鶊鶄鶈鵱鶀鵸鶆鶋鶌鵽鵫鵴鵵鵰鵩鶅鵳鵻鶂鵯鵹鵿鶇鵨麔麑黀黼鼭齀齁齍齖齗齘匷嚲"],["f440","嚵嚳壣孅巆巇廮廯忀忁懹攗攖攕攓旟曨曣曤櫳櫰櫪櫨櫹櫱櫮櫯瀼瀵瀯瀷瀴瀱灂瀸瀿瀺瀹灀瀻瀳灁爓爔犨獽獼璺皫皪皾盭矌矎矏矍矲礥礣礧礨礤礩"],["f4a1","禲穮穬穭竷籉籈籊籇籅糮繻繾纁纀羺翿聹臛臙舋艨艩蘢藿蘁藾蘛蘀藶蘄蘉蘅蘌藽蠙蠐蠑蠗蠓蠖襣襦覹觷譠譪譝譨譣譥譧譭趮躆躈躄轙轖轗轕轘轚邍酃酁醷醵醲醳鐋鐓鏻鐠鐏鐔鏾鐕鐐鐨鐙鐍鏵鐀鏷鐇鐎鐖鐒鏺鐉鏸鐊鏿"],["f540","鏼鐌鏶鐑鐆闞闠闟霮霯鞹鞻韽韾顠顢顣顟飁飂饐饎饙饌饋饓騲騴騱騬騪騶騩騮騸騭髇髊髆鬐鬒鬑鰋鰈鯷鰅鰒鯸鱀鰇鰎鰆鰗鰔鰉鶟鶙鶤鶝鶒鶘鶐鶛"],["f5a1","鶠鶔鶜鶪鶗鶡鶚鶢鶨鶞鶣鶿鶩鶖鶦鶧麙麛麚黥黤黧黦鼰鼮齛齠齞齝齙龑儺儹劘劗囃嚽嚾孈孇巋巏廱懽攛欂櫼欃櫸欀灃灄灊灈灉灅灆爝爚爙獾甗癪矐礭礱礯籔籓糲纊纇纈纋纆纍罍羻耰臝蘘蘪蘦蘟蘣蘜蘙蘧蘮蘡蘠蘩蘞蘥"],["f640","蠩蠝蠛蠠蠤蠜蠫衊襭襩襮襫觺譹譸譅譺譻贐贔趯躎躌轞轛轝酆酄酅醹鐿鐻鐶鐩鐽鐼鐰鐹鐪鐷鐬鑀鐱闥闤闣霵霺鞿韡顤飉飆飀饘饖騹騽驆驄驂驁騺"],["f6a1","騿髍鬕鬗鬘鬖鬺魒鰫鰝鰜鰬鰣鰨鰩鰤鰡鶷鶶鶼鷁鷇鷊鷏鶾鷅鷃鶻鶵鷎鶹鶺鶬鷈鶱鶭鷌鶳鷍鶲鹺麜黫黮黭鼛鼘鼚鼱齎齥齤龒亹囆囅囋奱孋孌巕巑廲攡攠攦攢欋欈欉氍灕灖灗灒爞爟犩獿瓘瓕瓙瓗癭皭礵禴穰穱籗籜籙籛籚"],["f740","糴糱纑罏羇臞艫蘴蘵蘳蘬蘲蘶蠬蠨蠦蠪蠥襱覿覾觻譾讄讂讆讅譿贕躕躔躚躒躐躖躗轠轢酇鑌鑐鑊鑋鑏鑇鑅鑈鑉鑆霿韣顪顩飋饔饛驎驓驔驌驏驈驊"],["f7a1","驉驒驐髐鬙鬫鬻魖魕鱆鱈鰿鱄鰹鰳鱁鰼鰷鰴鰲鰽鰶鷛鷒鷞鷚鷋鷐鷜鷑鷟鷩鷙鷘鷖鷵鷕鷝麶黰鼵鼳鼲齂齫龕龢儽劙壨壧奲孍巘蠯彏戁戃戄攩攥斖曫欑欒欏毊灛灚爢玂玁玃癰矔籧籦纕艬蘺虀蘹蘼蘱蘻蘾蠰蠲蠮蠳襶襴襳觾"],["f840","讌讎讋讈豅贙躘轤轣醼鑢鑕鑝鑗鑞韄韅頀驖驙鬞鬟鬠鱒鱘鱐鱊鱍鱋鱕鱙鱌鱎鷻鷷鷯鷣鷫鷸鷤鷶鷡鷮鷦鷲鷰鷢鷬鷴鷳鷨鷭黂黐黲黳鼆鼜鼸鼷鼶齃齏"],["f8a1","齱齰齮齯囓囍孎屭攭曭曮欓灟灡灝灠爣瓛瓥矕礸禷禶籪纗羉艭虃蠸蠷蠵衋讔讕躞躟躠躝醾醽釂鑫鑨鑩雥靆靃靇韇韥驞髕魙鱣鱧鱦鱢鱞鱠鸂鷾鸇鸃鸆鸅鸀鸁鸉鷿鷽鸄麠鼞齆齴齵齶囔攮斸欘欙欗欚灢爦犪矘矙礹籩籫糶纚"],["f940","纘纛纙臠臡虆虇虈襹襺襼襻觿讘讙躥躤躣鑮鑭鑯鑱鑳靉顲饟鱨鱮鱭鸋鸍鸐鸏鸒鸑麡黵鼉齇齸齻齺齹圞灦籯蠼趲躦釃鑴鑸鑶鑵驠鱴鱳鱱鱵鸔鸓黶鼊"],["f9a1","龤灨灥糷虪蠾蠽蠿讞貜躩軉靋顳顴飌饡馫驤驦驧鬤鸕鸗齈戇欞爧虌躨钂钀钁驩驨鬮鸙爩虋讟钃鱹麷癵驫鱺鸝灩灪麤齾齉龘碁銹裏墻恒粧嫺╔╦╗╠╬╣╚╩╝╒╤╕╞╪╡╘╧╛╓╥╖╟╫╢╙╨╜║═╭╮╰╯▓"]]
-
-/***/ }),
-/* 396 */
-/***/ (function(module, exports) {
-
-module.exports = [["a140","",62],["a180","",32],["a240","",62],["a280","",32],["a2ab","",5],["a2e3","€"],["a2ef",""],["a2fd",""],["a340","",62],["a380","",31,"　"],["a440","",62],["a480","",32],["a4f4","",10],["a540","",62],["a580","",32],["a5f7","",7],["a640","",62],["a680","",32],["a6b9","",7],["a6d9","",6],["a6ec",""],["a6f3",""],["a6f6","",8],["a740","",62],["a780","",32],["a7c2","",14],["a7f2","",12],["a896","",10],["a8bc",""],["a8bf","ǹ"],["a8c1",""],["a8ea","",20],["a958",""],["a95b",""],["a95d",""],["a989","〾⿰",11],["a997","",12],["a9f0","",14],["aaa1","",93],["aba1","",93],["aca1","",93],["ada1","",93],["aea1","",93],["afa1","",93],["d7fa","",4],["f8a1","",93],["f9a1","",93],["faa1","",93],["fba1","",93],["fca1","",93],["fda1","",93],["fe50","⺁⺄㑳㑇⺈⺋㖞㘚㘎⺌⺗㥮㤘㧏㧟㩳㧐㭎㱮㳠⺧⺪䁖䅟⺮䌷⺳⺶⺷䎱䎬⺻䏝䓖䙡䙌"],["fe80","䜣䜩䝼䞍⻊䥇䥺䥽䦂䦃䦅䦆䦟䦛䦷䦶䲣䲟䲠䲡䱷䲢䴓",6,"䶮",93]]
-
-/***/ }),
-/* 397 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-module.exports = __webpack_require__(601).isCI
-
-
-/***/ }),
-/* 398 */
-/***/ (function(module, exports) {
-
-var toString = {}.toString;
-
-module.exports = Array.isArray || function (arr) {
-  return toString.call(arr) == '[object Array]';
-};
-
-
-/***/ }),
-/* 399 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var stream = __webpack_require__(23)
-
-
-function isStream (obj) {
-  return obj instanceof stream.Stream
-}
-
-
-function isReadable (obj) {
-  return isStream(obj) && typeof obj._read == 'function' && typeof obj._readableState == 'object'
-}
-
-
-function isWritable (obj) {
-  return isStream(obj) && typeof obj._write == 'function' && typeof obj._writableState == 'object'
-}
-
-
-function isDuplex (obj) {
-  return isReadable(obj) && isWritable(obj)
-}
-
-
-module.exports            = isStream
-module.exports.isReadable = isReadable
-module.exports.isWritable = isWritable
-module.exports.isDuplex   = isDuplex
-
-
-/***/ }),
-/* 400 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * mime-types
- * Copyright(c) 2014 Jonathan Ong
- * Copyright(c) 2015 Douglas Christopher Wilson
- * MIT Licensed
- */
-
-
-
-/**
- * Module dependencies.
- * @private
- */
-
-var db = __webpack_require__(759)
-var extname = __webpack_require__(0).extname
-
-/**
- * Module variables.
- * @private
- */
-
-var EXTRACT_TYPE_REGEXP = /^\s*([^;\s]*)(?:;|\s|$)/
-var TEXT_TYPE_REGEXP = /^text\//i
-
-/**
- * Module exports.
- * @public
- */
-
-exports.charset = charset
-exports.charsets = { lookup: charset }
-exports.contentType = contentType
-exports.extension = extension
-exports.extensions = Object.create(null)
-exports.lookup = lookup
-exports.types = Object.create(null)
-
-// Populate the extensions/types maps
-populateMaps(exports.extensions, exports.types)
-
-/**
- * Get the default charset for a MIME type.
- *
- * @param {string} type
- * @return {boolean|string}
- */
-
-function charset (type) {
-  if (!type || typeof type !== 'string') {
-    return false
-  }
-
-  // TODO: use media-typer
-  var match = EXTRACT_TYPE_REGEXP.exec(type)
-  var mime = match && db[match[1].toLowerCase()]
-
-  if (mime && mime.charset) {
-    return mime.charset
-  }
-
-  // default text/* to utf-8
-  if (match && TEXT_TYPE_REGEXP.test(match[1])) {
-    return 'UTF-8'
-  }
-
-  return false
-}
-
-/**
- * Create a full Content-Type header given a MIME type or extension.
- *
- * @param {string} str
- * @return {boolean|string}
- */
-
-function contentType (str) {
-  // TODO: should this even be in this module?
-  if (!str || typeof str !== 'string') {
-    return false
-  }
-
-  var mime = str.indexOf('/') === -1
-    ? exports.lookup(str)
-    : str
-
-  if (!mime) {
-    return false
-  }
-
-  // TODO: use content-type or other module
-  if (mime.indexOf('charset') === -1) {
-    var charset = exports.charset(mime)
-    if (charset) mime += '; charset=' + charset.toLowerCase()
-  }
-
-  return mime
-}
-
-/**
- * Get the default extension for a MIME type.
- *
- * @param {string} type
- * @return {boolean|string}
- */
-
-function extension (type) {
-  if (!type || typeof type !== 'string') {
-    return false
-  }
-
-  // TODO: use media-typer
-  var match = EXTRACT_TYPE_REGEXP.exec(type)
-
-  // get extensions
-  var exts = match && exports.extensions[match[1].toLowerCase()]
-
-  if (!exts || !exts.length) {
-    return false
-  }
-
-  return exts[0]
-}
-
-/**
- * Lookup the MIME type for a file path/extension.
- *
- * @param {string} path
- * @return {boolean|string}
- */
-
-function lookup (path) {
-  if (!path || typeof path !== 'string') {
-    return false
-  }
-
-  // get the extension ("ext" or ".ext" or full path)
-  var extension = extname('x.' + path)
-    .toLowerCase()
-    .substr(1)
-
-  if (!extension) {
-    return false
-  }
-
-  return exports.types[extension] || false
-}
-
-/**
- * Populate the extensions and types maps.
- * @private
- */
-
-function populateMaps (extensions, types) {
-  // source preference (least -> most)
-  var preference = ['nginx', 'apache', undefined, 'iana']
-
-  Object.keys(db).forEach(function forEachMimeType (type) {
-    var mime = db[type]
-    var exts = mime.extensions
-
-    if (!exts || !exts.length) {
-      return
-    }
-
-    // mime -> extensions
-    extensions[type] = exts
-
-    // extension -> mime
-    for (var i = 0; i < exts.length; i++) {
-      var extension = exts[i]
-
-      if (types[extension]) {
-        var from = preference.indexOf(db[types[extension]].source)
-        var to = preference.indexOf(mime.source)
-
-        if (types[extension] !== 'application/octet-stream' &&
-          (from > to || (from === to && types[extension].substr(0, 12) === 'application/'))) {
-          // skip the remapping
-          continue
-        }
-      }
-
-      // set the extension -> mime
-      types[extension] = type
-    }
-  })
-}
-
-
-/***/ }),
-/* 401 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Stream = __webpack_require__(23)
-
-module.exports = MuteStream
-
-// var out = new MuteStream(process.stdout)
-// argument auto-pipes
-function MuteStream (opts) {
-  Stream.apply(this)
-  opts = opts || {}
-  this.writable = this.readable = true
-  this.muted = false
-  this.on('pipe', this._onpipe)
-  this.replace = opts.replace
-
-  // For readline-type situations
-  // This much at the start of a line being redrawn after a ctrl char
-  // is seen (such as backspace) won't be redrawn as the replacement
-  this._prompt = opts.prompt || null
-  this._hadControl = false
-}
-
-MuteStream.prototype = Object.create(Stream.prototype)
-
-Object.defineProperty(MuteStream.prototype, 'constructor', {
-  value: MuteStream,
-  enumerable: false
-})
-
-MuteStream.prototype.mute = function () {
-  this.muted = true
-}
-
-MuteStream.prototype.unmute = function () {
-  this.muted = false
-}
-
-Object.defineProperty(MuteStream.prototype, '_onpipe', {
-  value: onPipe,
-  enumerable: false,
-  writable: true,
-  configurable: true
-})
-
-function onPipe (src) {
-  this._src = src
-}
-
-Object.defineProperty(MuteStream.prototype, 'isTTY', {
-  get: getIsTTY,
-  set: setIsTTY,
-  enumerable: true,
-  configurable: true
-})
-
-function getIsTTY () {
-  return( (this._dest) ? this._dest.isTTY
-        : (this._src) ? this._src.isTTY
-        : false
-        )
-}
-
-// basically just get replace the getter/setter with a regular value
-function setIsTTY (isTTY) {
-  Object.defineProperty(this, 'isTTY', {
-    value: isTTY,
-    enumerable: true,
-    writable: true,
-    configurable: true
-  })
-}
-
-Object.defineProperty(MuteStream.prototype, 'rows', {
-  get: function () {
-    return( this._dest ? this._dest.rows
-          : this._src ? this._src.rows
-          : undefined )
-  }, enumerable: true, configurable: true })
-
-Object.defineProperty(MuteStream.prototype, 'columns', {
-  get: function () {
-    return( this._dest ? this._dest.columns
-          : this._src ? this._src.columns
-          : undefined )
-  }, enumerable: true, configurable: true })
-
-
-MuteStream.prototype.pipe = function (dest, options) {
-  this._dest = dest
-  return Stream.prototype.pipe.call(this, dest, options)
-}
-
-MuteStream.prototype.pause = function () {
-  if (this._src) return this._src.pause()
-}
-
-MuteStream.prototype.resume = function () {
-  if (this._src) return this._src.resume()
-}
-
-MuteStream.prototype.write = function (c) {
-  if (this.muted) {
-    if (!this.replace) return true
-    if (c.match(/^\u001b/)) {
-      if(c.indexOf(this._prompt) === 0) {
-        c = c.substr(this._prompt.length);
-        c = c.replace(/./g, this.replace);
-        c = this._prompt + c;
-      }
-      this._hadControl = true
-      return this.emit('data', c)
-    } else {
-      if (this._prompt && this._hadControl &&
-          c.indexOf(this._prompt) === 0) {
-        this._hadControl = false
-        this.emit('data', this._prompt)
-        c = c.substr(this._prompt.length)
-      }
-      c = c.toString().replace(/./g, this.replace)
-    }
-  }
-  this.emit('data', c)
-}
-
-MuteStream.prototype.end = function (c) {
-  if (this.muted) {
-    if (c && this.replace) {
-      c = c.toString().replace(/./g, this.replace)
-    } else {
-      c = null
-    }
-  }
-  if (c) this.emit('data', c)
-  this.emit('end')
-}
-
-function proxy (fn) { return function () {
-  var d = this._dest
-  var s = this._src
-  if (d && d[fn]) d[fn].apply(d, arguments)
-  if (s && s[fn]) s[fn].apply(s, arguments)
-}}
-
-MuteStream.prototype.destroy = proxy('destroy')
-MuteStream.prototype.destroySoon = proxy('destroySoon')
-MuteStream.prototype.close = proxy('close')
-
-
-/***/ }),
-/* 402 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const url = __webpack_require__(24);
-const punycode = __webpack_require__(332);
-const queryString = __webpack_require__(786);
-const prependHttp = __webpack_require__(777);
-const sortKeys = __webpack_require__(934);
-
-const DEFAULT_PORTS = {
-	'http:': 80,
-	'https:': 443,
-	'ftp:': 21
-};
-
-// Protocols that always contain a `//`` bit
-const slashedProtocol = {
-	http: true,
-	https: true,
-	ftp: true,
-	gopher: true,
-	file: true,
-	'http:': true,
-	'https:': true,
-	'ftp:': true,
-	'gopher:': true,
-	'file:': true
-};
-
-function testParameter(name, filters) {
-	return filters.some(filter => filter instanceof RegExp ? filter.test(name) : filter === name);
-}
-
-module.exports = (str, opts) => {
-	opts = Object.assign({
-		normalizeProtocol: true,
-		normalizeHttps: false,
-		stripFragment: true,
-		stripWWW: true,
-		removeQueryParameters: [/^utm_\w+/i],
-		removeTrailingSlash: true,
-		removeDirectoryIndex: false,
-		sortQueryParameters: true
-	}, opts);
-
-	if (typeof str !== 'string') {
-		throw new TypeError('Expected a string');
-	}
-
-	const hasRelativeProtocol = str.startsWith('//');
-
-	// Prepend protocol
-	str = prependHttp(str.trim()).replace(/^\/\//, 'http://');
-
-	const urlObj = url.parse(str);
-
-	if (opts.normalizeHttps && urlObj.protocol === 'https:') {
-		urlObj.protocol = 'http:';
-	}
-
-	if (!urlObj.hostname && !urlObj.pathname) {
-		throw new Error('Invalid URL');
-	}
-
-	// Prevent these from being used by `url.format`
-	delete urlObj.host;
-	delete urlObj.query;
-
-	// Remove fragment
-	if (opts.stripFragment) {
-		delete urlObj.hash;
-	}
-
-	// Remove default port
-	const port = DEFAULT_PORTS[urlObj.protocol];
-	if (Number(urlObj.port) === port) {
-		delete urlObj.port;
-	}
-
-	// Remove duplicate slashes
-	if (urlObj.pathname) {
-		urlObj.pathname = urlObj.pathname.replace(/\/{2,}/g, '/');
-	}
-
-	// Decode URI octets
-	if (urlObj.pathname) {
-		urlObj.pathname = decodeURI(urlObj.pathname);
-	}
-
-	// Remove directory index
-	if (opts.removeDirectoryIndex === true) {
-		opts.removeDirectoryIndex = [/^index\.[a-z]+$/];
-	}
-
-	if (Array.isArray(opts.removeDirectoryIndex) && opts.removeDirectoryIndex.length > 0) {
-		let pathComponents = urlObj.pathname.split('/');
-		const lastComponent = pathComponents[pathComponents.length - 1];
-
-		if (testParameter(lastComponent, opts.removeDirectoryIndex)) {
-			pathComponents = pathComponents.slice(0, pathComponents.length - 1);
-			urlObj.pathname = pathComponents.slice(1).join('/') + '/';
-		}
-	}
-
-	// Resolve relative paths, but only for slashed protocols
-	if (slashedProtocol[urlObj.protocol]) {
-		const domain = urlObj.protocol + '//' + urlObj.hostname;
-		const relative = url.resolve(domain, urlObj.pathname);
-		urlObj.pathname = relative.replace(domain, '');
-	}
-
-	if (urlObj.hostname) {
-		// IDN to Unicode
-		urlObj.hostname = punycode.toUnicode(urlObj.hostname).toLowerCase();
-
-		// Remove trailing dot
-		urlObj.hostname = urlObj.hostname.replace(/\.$/, '');
-
-		// Remove `www.`
-		if (opts.stripWWW) {
-			urlObj.hostname = urlObj.hostname.replace(/^www\./, '');
-		}
-	}
-
-	// Remove URL with empty query string
-	if (urlObj.search === '?') {
-		delete urlObj.search;
-	}
-
-	const queryParameters = queryString.parse(urlObj.search);
-
-	// Remove query unwanted parameters
-	if (Array.isArray(opts.removeQueryParameters)) {
-		for (const key in queryParameters) {
-			if (testParameter(key, opts.removeQueryParameters)) {
-				delete queryParameters[key];
-			}
-		}
-	}
-
-	// Sort query parameters
-	if (opts.sortQueryParameters) {
-		urlObj.search = queryString.stringify(sortKeys(queryParameters));
-	}
-
-	// Decode query parameters
-	if (urlObj.search !== null) {
-		urlObj.search = decodeURIComponent(urlObj.search);
-	}
-
-	// Take advantage of many of the Node `url` normalizations
-	str = url.format(urlObj);
-
-	// Remove ending `/`
-	if (opts.removeTrailingSlash || urlObj.pathname === '/') {
-		str = str.replace(/\/$/, '');
-	}
-
-	// Restore relative protocol, if applicable
-	if (hasRelativeProtocol && !opts.normalizeProtocol) {
-		str = str.replace(/^http:\/\//, '//');
-	}
-
-	return str;
-};
-
-
-/***/ }),
-/* 403 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var replace = String.prototype.replace;
-var percentTwenties = /%20/g;
-
-module.exports = {
-    'default': 'RFC3986',
-    formatters: {
-        RFC1738: function (value) {
-            return replace.call(value, percentTwenties, '+');
-        },
-        RFC3986: function (value) {
-            return value;
-        }
-    },
-    RFC1738: 'RFC1738',
-    RFC3986: 'RFC3986'
-};
-
-
-/***/ }),
-/* 404 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var stringify = __webpack_require__(785);
-var parse = __webpack_require__(784);
-var formats = __webpack_require__(403);
-
-module.exports = {
-    formats: formats,
-    parse: parse,
-    stringify: stringify
-};
-
-
-/***/ }),
-/* 405 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var has = Object.prototype.hasOwnProperty;
-
-var hexTable = (function () {
-    var array = [];
-    for (var i = 0; i < 256; ++i) {
-        array.push('%' + ((i < 16 ? '0' : '') + i.toString(16)).toUpperCase());
-    }
-
-    return array;
-}());
-
-var compactQueue = function compactQueue(queue) {
-    var obj;
-
-    while (queue.length) {
-        var item = queue.pop();
-        obj = item.obj[item.prop];
-
-        if (Array.isArray(obj)) {
-            var compacted = [];
-
-            for (var j = 0; j < obj.length; ++j) {
-                if (typeof obj[j] !== 'undefined') {
-                    compacted.push(obj[j]);
-                }
-            }
-
-            item.obj[item.prop] = compacted;
-        }
-    }
-
-    return obj;
-};
-
-var arrayToObject = function arrayToObject(source, options) {
-    var obj = options && options.plainObjects ? Object.create(null) : {};
-    for (var i = 0; i < source.length; ++i) {
-        if (typeof source[i] !== 'undefined') {
-            obj[i] = source[i];
-        }
-    }
-
-    return obj;
-};
-
-var merge = function merge(target, source, options) {
-    if (!source) {
-        return target;
-    }
-
-    if (typeof source !== 'object') {
-        if (Array.isArray(target)) {
-            target.push(source);
-        } else if (typeof target === 'object') {
-            if (options.plainObjects || options.allowPrototypes || !has.call(Object.prototype, source)) {
-                target[source] = true;
-            }
-        } else {
-            return [target, source];
-        }
-
-        return target;
-    }
-
-    if (typeof target !== 'object') {
-        return [target].concat(source);
-    }
-
-    var mergeTarget = target;
-    if (Array.isArray(target) && !Array.isArray(source)) {
-        mergeTarget = arrayToObject(target, options);
-    }
-
-    if (Array.isArray(target) && Array.isArray(source)) {
-        source.forEach(function (item, i) {
-            if (has.call(target, i)) {
-                if (target[i] && typeof target[i] === 'object') {
-                    target[i] = merge(target[i], item, options);
-                } else {
-                    target.push(item);
-                }
-            } else {
-                target[i] = item;
-            }
-        });
-        return target;
-    }
-
-    return Object.keys(source).reduce(function (acc, key) {
-        var value = source[key];
-
-        if (has.call(acc, key)) {
-            acc[key] = merge(acc[key], value, options);
-        } else {
-            acc[key] = value;
-        }
-        return acc;
-    }, mergeTarget);
-};
-
-var assign = function assignSingleSource(target, source) {
-    return Object.keys(source).reduce(function (acc, key) {
-        acc[key] = source[key];
-        return acc;
-    }, target);
-};
-
-var decode = function (str) {
-    try {
-        return decodeURIComponent(str.replace(/\+/g, ' '));
-    } catch (e) {
-        return str;
-    }
-};
-
-var encode = function encode(str) {
-    // This code was originally written by Brian White (mscdex) for the io.js core querystring library.
-    // It has been adapted here for stricter adherence to RFC 3986
-    if (str.length === 0) {
-        return str;
-    }
-
-    var string = typeof str === 'string' ? str : String(str);
-
-    var out = '';
-    for (var i = 0; i < string.length; ++i) {
-        var c = string.charCodeAt(i);
-
-        if (
-            c === 0x2D // -
-            || c === 0x2E // .
-            || c === 0x5F // _
-            || c === 0x7E // ~
-            || (c >= 0x30 && c <= 0x39) // 0-9
-            || (c >= 0x41 && c <= 0x5A) // a-z
-            || (c >= 0x61 && c <= 0x7A) // A-Z
-        ) {
-            out += string.charAt(i);
-            continue;
-        }
-
-        if (c < 0x80) {
-            out = out + hexTable[c];
-            continue;
-        }
-
-        if (c < 0x800) {
-            out = out + (hexTable[0xC0 | (c >> 6)] + hexTable[0x80 | (c & 0x3F)]);
-            continue;
-        }
-
-        if (c < 0xD800 || c >= 0xE000) {
-            out = out + (hexTable[0xE0 | (c >> 12)] + hexTable[0x80 | ((c >> 6) & 0x3F)] + hexTable[0x80 | (c & 0x3F)]);
-            continue;
-        }
-
-        i += 1;
-        c = 0x10000 + (((c & 0x3FF) << 10) | (string.charCodeAt(i) & 0x3FF));
-        out += hexTable[0xF0 | (c >> 18)]
-            + hexTable[0x80 | ((c >> 12) & 0x3F)]
-            + hexTable[0x80 | ((c >> 6) & 0x3F)]
-            + hexTable[0x80 | (c & 0x3F)];
-    }
-
-    return out;
-};
-
-var compact = function compact(value) {
-    var queue = [{ obj: { o: value }, prop: 'o' }];
-    var refs = [];
-
-    for (var i = 0; i < queue.length; ++i) {
-        var item = queue[i];
-        var obj = item.obj[item.prop];
-
-        var keys = Object.keys(obj);
-        for (var j = 0; j < keys.length; ++j) {
-            var key = keys[j];
-            var val = obj[key];
-            if (typeof val === 'object' && val !== null && refs.indexOf(val) === -1) {
-                queue.push({ obj: obj, prop: key });
-                refs.push(val);
-            }
-        }
-    }
-
-    return compactQueue(queue);
-};
-
-var isRegExp = function isRegExp(obj) {
-    return Object.prototype.toString.call(obj) === '[object RegExp]';
-};
-
-var isBuffer = function isBuffer(obj) {
-    if (obj === null || typeof obj === 'undefined') {
-        return false;
-    }
-
-    return !!(obj.constructor && obj.constructor.isBuffer && obj.constructor.isBuffer(obj));
-};
-
-module.exports = {
-    arrayToObject: arrayToObject,
-    assign: assign,
-    compact: compact,
-    decode: decode,
-    encode: encode,
-    isBuffer: isBuffer,
-    isRegExp: isRegExp,
-    merge: merge
-};
-
-
-/***/ }),
-/* 406 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-
-
-/*<replacement>*/
-
-var pna = __webpack_require__(180);
-/*</replacement>*/
-
-module.exports = Readable;
-
-/*<replacement>*/
-var isArray = __webpack_require__(398);
-/*</replacement>*/
-
-/*<replacement>*/
-var Duplex;
-/*</replacement>*/
-
-Readable.ReadableState = ReadableState;
-
-/*<replacement>*/
-var EE = __webpack_require__(77).EventEmitter;
-
-var EElistenerCount = function (emitter, type) {
-  return emitter.listeners(type).length;
-};
-/*</replacement>*/
-
-/*<replacement>*/
-var Stream = __webpack_require__(410);
-/*</replacement>*/
-
-/*<replacement>*/
-
-var Buffer = __webpack_require__(45).Buffer;
-var OurUint8Array = global.Uint8Array || function () {};
-function _uint8ArrayToBuffer(chunk) {
-  return Buffer.from(chunk);
-}
-function _isUint8Array(obj) {
-  return Buffer.isBuffer(obj) || obj instanceof OurUint8Array;
-}
-
-/*</replacement>*/
-
-/*<replacement>*/
-var util = __webpack_require__(113);
-util.inherits = __webpack_require__(61);
-/*</replacement>*/
-
-/*<replacement>*/
-var debugUtil = __webpack_require__(3);
-var debug = void 0;
-if (debugUtil && debugUtil.debuglog) {
-  debug = debugUtil.debuglog('stream');
-} else {
-  debug = function () {};
-}
-/*</replacement>*/
-
-var BufferList = __webpack_require__(793);
-var destroyImpl = __webpack_require__(409);
-var StringDecoder;
-
-util.inherits(Readable, Stream);
-
-var kProxyEvents = ['error', 'close', 'destroy', 'pause', 'resume'];
-
-function prependListener(emitter, event, fn) {
-  // Sadly this is not cacheable as some libraries bundle their own
-  // event emitter implementation with them.
-  if (typeof emitter.prependListener === 'function') return emitter.prependListener(event, fn);
-
-  // This is a hack to make sure that our error handler is attached before any
-  // userland ones.  NEVER DO THIS. This is here only because this code needs
-  // to continue to work with older versions of Node.js that do not include
-  // the prependListener() method. The goal is to eventually remove this hack.
-  if (!emitter._events || !emitter._events[event]) emitter.on(event, fn);else if (isArray(emitter._events[event])) emitter._events[event].unshift(fn);else emitter._events[event] = [fn, emitter._events[event]];
-}
-
-function ReadableState(options, stream) {
-  Duplex = Duplex || __webpack_require__(115);
-
-  options = options || {};
-
-  // Duplex streams are both readable and writable, but share
-  // the same options object.
-  // However, some cases require setting options to different
-  // values for the readable and the writable sides of the duplex stream.
-  // These options can be provided separately as readableXXX and writableXXX.
-  var isDuplex = stream instanceof Duplex;
-
-  // object stream flag. Used to make read(n) ignore n and to
-  // make all the buffer merging and length checks go away
-  this.objectMode = !!options.objectMode;
-
-  if (isDuplex) this.objectMode = this.objectMode || !!options.readableObjectMode;
-
-  // the point at which it stops calling _read() to fill the buffer
-  // Note: 0 is a valid value, means "don't call _read preemptively ever"
-  var hwm = options.highWaterMark;
-  var readableHwm = options.readableHighWaterMark;
-  var defaultHwm = this.objectMode ? 16 : 16 * 1024;
-
-  if (hwm || hwm === 0) this.highWaterMark = hwm;else if (isDuplex && (readableHwm || readableHwm === 0)) this.highWaterMark = readableHwm;else this.highWaterMark = defaultHwm;
-
-  // cast to ints.
-  this.highWaterMark = Math.floor(this.highWaterMark);
-
-  // A linked list is used to store data chunks instead of an array because the
-  // linked list can remove elements from the beginning faster than
-  // array.shift()
-  this.buffer = new BufferList();
-  this.length = 0;
-  this.pipes = null;
-  this.pipesCount = 0;
-  this.flowing = null;
-  this.ended = false;
-  this.endEmitted = false;
-  this.reading = false;
-
-  // a flag to be able to tell if the event 'readable'/'data' is emitted
-  // immediately, or on a later tick.  We set this to true at first, because
-  // any actions that shouldn't happen until "later" should generally also
-  // not happen before the first read call.
-  this.sync = true;
-
-  // whenever we return null, then we set a flag to say
-  // that we're awaiting a 'readable' event emission.
-  this.needReadable = false;
-  this.emittedReadable = false;
-  this.readableListening = false;
-  this.resumeScheduled = false;
-
-  // has it been destroyed
-  this.destroyed = false;
-
-  // Crypto is kind of old and crusty.  Historically, its default string
-  // encoding is 'binary' so we have to make this configurable.
-  // Everything else in the universe uses 'utf8', though.
-  this.defaultEncoding = options.defaultEncoding || 'utf8';
-
-  // the number of writers that are awaiting a drain event in .pipe()s
-  this.awaitDrain = 0;
-
-  // if true, a maybeReadMore has been scheduled
-  this.readingMore = false;
-
-  this.decoder = null;
-  this.encoding = null;
-  if (options.encoding) {
-    if (!StringDecoder) StringDecoder = __webpack_require__(458).StringDecoder;
-    this.decoder = new StringDecoder(options.encoding);
-    this.encoding = options.encoding;
-  }
-}
-
-function Readable(options) {
-  Duplex = Duplex || __webpack_require__(115);
-
-  if (!(this instanceof Readable)) return new Readable(options);
-
-  this._readableState = new ReadableState(options, this);
-
-  // legacy
-  this.readable = true;
-
-  if (options) {
-    if (typeof options.read === 'function') this._read = options.read;
-
-    if (typeof options.destroy === 'function') this._destroy = options.destroy;
-  }
-
-  Stream.call(this);
-}
-
-Object.defineProperty(Readable.prototype, 'destroyed', {
-  get: function () {
-    if (this._readableState === undefined) {
-      return false;
-    }
-    return this._readableState.destroyed;
-  },
-  set: function (value) {
-    // we ignore the value if the stream
-    // has not been initialized yet
-    if (!this._readableState) {
-      return;
-    }
-
-    // backward compatibility, the user is explicitly
-    // managing destroyed
-    this._readableState.destroyed = value;
-  }
-});
-
-Readable.prototype.destroy = destroyImpl.destroy;
-Readable.prototype._undestroy = destroyImpl.undestroy;
-Readable.prototype._destroy = function (err, cb) {
-  this.push(null);
-  cb(err);
-};
-
-// Manually shove something into the read() buffer.
-// This returns true if the highWaterMark has not been hit yet,
-// similar to how Writable.write() returns true if you should
-// write() some more.
-Readable.prototype.push = function (chunk, encoding) {
-  var state = this._readableState;
-  var skipChunkCheck;
-
-  if (!state.objectMode) {
-    if (typeof chunk === 'string') {
-      encoding = encoding || state.defaultEncoding;
-      if (encoding !== state.encoding) {
-        chunk = Buffer.from(chunk, encoding);
-        encoding = '';
-      }
-      skipChunkCheck = true;
-    }
-  } else {
-    skipChunkCheck = true;
-  }
-
-  return readableAddChunk(this, chunk, encoding, false, skipChunkCheck);
-};
-
-// Unshift should *always* be something directly out of read()
-Readable.prototype.unshift = function (chunk) {
-  return readableAddChunk(this, chunk, null, true, false);
-};
-
-function readableAddChunk(stream, chunk, encoding, addToFront, skipChunkCheck) {
-  var state = stream._readableState;
-  if (chunk === null) {
-    state.reading = false;
-    onEofChunk(stream, state);
-  } else {
-    var er;
-    if (!skipChunkCheck) er = chunkInvalid(state, chunk);
-    if (er) {
-      stream.emit('error', er);
-    } else if (state.objectMode || chunk && chunk.length > 0) {
-      if (typeof chunk !== 'string' && !state.objectMode && Object.getPrototypeOf(chunk) !== Buffer.prototype) {
-        chunk = _uint8ArrayToBuffer(chunk);
-      }
-
-      if (addToFront) {
-        if (state.endEmitted) stream.emit('error', new Error('stream.unshift() after end event'));else addChunk(stream, state, chunk, true);
-      } else if (state.ended) {
-        stream.emit('error', new Error('stream.push() after EOF'));
-      } else {
-        state.reading = false;
-        if (state.decoder && !encoding) {
-          chunk = state.decoder.write(chunk);
-          if (state.objectMode || chunk.length !== 0) addChunk(stream, state, chunk, false);else maybeReadMore(stream, state);
-        } else {
-          addChunk(stream, state, chunk, false);
-        }
-      }
-    } else if (!addToFront) {
-      state.reading = false;
-    }
-  }
-
-  return needMoreData(state);
-}
-
-function addChunk(stream, state, chunk, addToFront) {
-  if (state.flowing && state.length === 0 && !state.sync) {
-    stream.emit('data', chunk);
-    stream.read(0);
-  } else {
-    // update the buffer info.
-    state.length += state.objectMode ? 1 : chunk.length;
-    if (addToFront) state.buffer.unshift(chunk);else state.buffer.push(chunk);
-
-    if (state.needReadable) emitReadable(stream);
-  }
-  maybeReadMore(stream, state);
-}
-
-function chunkInvalid(state, chunk) {
-  var er;
-  if (!_isUint8Array(chunk) && typeof chunk !== 'string' && chunk !== undefined && !state.objectMode) {
-    er = new TypeError('Invalid non-string/buffer chunk');
-  }
-  return er;
-}
-
-// if it's past the high water mark, we can push in some more.
-// Also, if we have no data yet, we can stand some
-// more bytes.  This is to work around cases where hwm=0,
-// such as the repl.  Also, if the push() triggered a
-// readable event, and the user called read(largeNumber) such that
-// needReadable was set, then we ought to push more, so that another
-// 'readable' event will be triggered.
-function needMoreData(state) {
-  return !state.ended && (state.needReadable || state.length < state.highWaterMark || state.length === 0);
-}
-
-Readable.prototype.isPaused = function () {
-  return this._readableState.flowing === false;
-};
-
-// backwards compatibility.
-Readable.prototype.setEncoding = function (enc) {
-  if (!StringDecoder) StringDecoder = __webpack_require__(458).StringDecoder;
-  this._readableState.decoder = new StringDecoder(enc);
-  this._readableState.encoding = enc;
-  return this;
-};
-
-// Don't raise the hwm > 8MB
-var MAX_HWM = 0x800000;
-function computeNewHighWaterMark(n) {
-  if (n >= MAX_HWM) {
-    n = MAX_HWM;
-  } else {
-    // Get the next highest power of 2 to prevent increasing hwm excessively in
-    // tiny amounts
-    n--;
-    n |= n >>> 1;
-    n |= n >>> 2;
-    n |= n >>> 4;
-    n |= n >>> 8;
-    n |= n >>> 16;
-    n++;
-  }
-  return n;
-}
-
-// This function is designed to be inlinable, so please take care when making
-// changes to the function body.
-function howMuchToRead(n, state) {
-  if (n <= 0 || state.length === 0 && state.ended) return 0;
-  if (state.objectMode) return 1;
-  if (n !== n) {
-    // Only flow one buffer at a time
-    if (state.flowing && state.length) return state.buffer.head.data.length;else return state.length;
-  }
-  // If we're asking for more than the current hwm, then raise the hwm.
-  if (n > state.highWaterMark) state.highWaterMark = computeNewHighWaterMark(n);
-  if (n <= state.length) return n;
-  // Don't have enough
-  if (!state.ended) {
-    state.needReadable = true;
-    return 0;
-  }
-  return state.length;
-}
-
-// you can override either this method, or the async _read(n) below.
-Readable.prototype.read = function (n) {
-  debug('read', n);
-  n = parseInt(n, 10);
-  var state = this._readableState;
-  var nOrig = n;
-
-  if (n !== 0) state.emittedReadable = false;
-
-  // if we're doing read(0) to trigger a readable event, but we
-  // already have a bunch of data in the buffer, then just trigger
-  // the 'readable' event and move on.
-  if (n === 0 && state.needReadable && (state.length >= state.highWaterMark || state.ended)) {
-    debug('read: emitReadable', state.length, state.ended);
-    if (state.length === 0 && state.ended) endReadable(this);else emitReadable(this);
-    return null;
-  }
-
-  n = howMuchToRead(n, state);
-
-  // if we've ended, and we're now clear, then finish it up.
-  if (n === 0 && state.ended) {
-    if (state.length === 0) endReadable(this);
-    return null;
-  }
-
-  // All the actual chunk generation logic needs to be
-  // *below* the call to _read.  The reason is that in certain
-  // synthetic stream cases, such as passthrough streams, _read
-  // may be a completely synchronous operation which may change
-  // the state of the read buffer, providing enough data when
-  // before there was *not* enough.
-  //
-  // So, the steps are:
-  // 1. Figure out what the state of things will be after we do
-  // a read from the buffer.
-  //
-  // 2. If that resulting state will trigger a _read, then call _read.
-  // Note that this may be asynchronous, or synchronous.  Yes, it is
-  // deeply ugly to write APIs this way, but that still doesn't mean
-  // that the Readable class should behave improperly, as streams are
-  // designed to be sync/async agnostic.
-  // Take note if the _read call is sync or async (ie, if the read call
-  // has returned yet), so that we know whether or not it's safe to emit
-  // 'readable' etc.
-  //
-  // 3. Actually pull the requested chunks out of the buffer and return.
-
-  // if we need a readable event, then we need to do some reading.
-  var doRead = state.needReadable;
-  debug('need readable', doRead);
-
-  // if we currently have less than the highWaterMark, then also read some
-  if (state.length === 0 || state.length - n < state.highWaterMark) {
-    doRead = true;
-    debug('length less than watermark', doRead);
-  }
-
-  // however, if we've ended, then there's no point, and if we're already
-  // reading, then it's unnecessary.
-  if (state.ended || state.reading) {
-    doRead = false;
-    debug('reading or ended', doRead);
-  } else if (doRead) {
-    debug('do read');
-    state.reading = true;
-    state.sync = true;
-    // if the length is currently zero, then we *need* a readable event.
-    if (state.length === 0) state.needReadable = true;
-    // call internal read method
-    this._read(state.highWaterMark);
-    state.sync = false;
-    // If _read pushed data synchronously, then `reading` will be false,
-    // and we need to re-evaluate how much data we can return to the user.
-    if (!state.reading) n = howMuchToRead(nOrig, state);
-  }
-
-  var ret;
-  if (n > 0) ret = fromList(n, state);else ret = null;
-
-  if (ret === null) {
-    state.needReadable = true;
-    n = 0;
-  } else {
-    state.length -= n;
-  }
-
-  if (state.length === 0) {
-    // If we have nothing in the buffer, then we want to know
-    // as soon as we *do* get something into the buffer.
-    if (!state.ended) state.needReadable = true;
-
-    // If we tried to read() past the EOF, then emit end on the next tick.
-    if (nOrig !== n && state.ended) endReadable(this);
-  }
-
-  if (ret !== null) this.emit('data', ret);
-
-  return ret;
-};
-
-function onEofChunk(stream, state) {
-  if (state.ended) return;
-  if (state.decoder) {
-    var chunk = state.decoder.end();
-    if (chunk && chunk.length) {
-      state.buffer.push(chunk);
-      state.length += state.objectMode ? 1 : chunk.length;
-    }
-  }
-  state.ended = true;
-
-  // emit 'readable' now to make sure it gets picked up.
-  emitReadable(stream);
-}
-
-// Don't emit readable right away in sync mode, because this can trigger
-// another read() call => stack overflow.  This way, it might trigger
-// a nextTick recursion warning, but that's not so bad.
-function emitReadable(stream) {
-  var state = stream._readableState;
-  state.needReadable = false;
-  if (!state.emittedReadable) {
-    debug('emitReadable', state.flowing);
-    state.emittedReadable = true;
-    if (state.sync) pna.nextTick(emitReadable_, stream);else emitReadable_(stream);
-  }
-}
-
-function emitReadable_(stream) {
-  debug('emit readable');
-  stream.emit('readable');
-  flow(stream);
-}
-
-// at this point, the user has presumably seen the 'readable' event,
-// and called read() to consume some data.  that may have triggered
-// in turn another _read(n) call, in which case reading = true if
-// it's in progress.
-// However, if we're not ended, or reading, and the length < hwm,
-// then go ahead and try to read some more preemptively.
-function maybeReadMore(stream, state) {
-  if (!state.readingMore) {
-    state.readingMore = true;
-    pna.nextTick(maybeReadMore_, stream, state);
-  }
-}
-
-function maybeReadMore_(stream, state) {
-  var len = state.length;
-  while (!state.reading && !state.flowing && !state.ended && state.length < state.highWaterMark) {
-    debug('maybeReadMore read 0');
-    stream.read(0);
-    if (len === state.length)
-      // didn't get any data, stop spinning.
-      break;else len = state.length;
-  }
-  state.readingMore = false;
-}
-
-// abstract method.  to be overridden in specific implementation classes.
-// call cb(er, data) where data is <= n in length.
-// for virtual (non-string, non-buffer) streams, "length" is somewhat
-// arbitrary, and perhaps not very meaningful.
-Readable.prototype._read = function (n) {
-  this.emit('error', new Error('_read() is not implemented'));
-};
-
-Readable.prototype.pipe = function (dest, pipeOpts) {
-  var src = this;
-  var state = this._readableState;
-
-  switch (state.pipesCount) {
-    case 0:
-      state.pipes = dest;
-      break;
-    case 1:
-      state.pipes = [state.pipes, dest];
-      break;
-    default:
-      state.pipes.push(dest);
-      break;
-  }
-  state.pipesCount += 1;
-  debug('pipe count=%d opts=%j', state.pipesCount, pipeOpts);
-
-  var doEnd = (!pipeOpts || pipeOpts.end !== false) && dest !== process.stdout && dest !== process.stderr;
-
-  var endFn = doEnd ? onend : unpipe;
-  if (state.endEmitted) pna.nextTick(endFn);else src.once('end', endFn);
-
-  dest.on('unpipe', onunpipe);
-  function onunpipe(readable, unpipeInfo) {
-    debug('onunpipe');
-    if (readable === src) {
-      if (unpipeInfo && unpipeInfo.hasUnpiped === false) {
-        unpipeInfo.hasUnpiped = true;
-        cleanup();
-      }
-    }
-  }
-
-  function onend() {
-    debug('onend');
-    dest.end();
-  }
-
-  // when the dest drains, it reduces the awaitDrain counter
-  // on the source.  This would be more elegant with a .once()
-  // handler in flow(), but adding and removing repeatedly is
-  // too slow.
-  var ondrain = pipeOnDrain(src);
-  dest.on('drain', ondrain);
-
-  var cleanedUp = false;
-  function cleanup() {
-    debug('cleanup');
-    // cleanup event handlers once the pipe is broken
-    dest.removeListener('close', onclose);
-    dest.removeListener('finish', onfinish);
-    dest.removeListener('drain', ondrain);
-    dest.removeListener('error', onerror);
-    dest.removeListener('unpipe', onunpipe);
-    src.removeListener('end', onend);
-    src.removeListener('end', unpipe);
-    src.removeListener('data', ondata);
-
-    cleanedUp = true;
-
-    // if the reader is waiting for a drain event from this
-    // specific writer, then it would cause it to never start
-    // flowing again.
-    // So, if this is awaiting a drain, then we just call it now.
-    // If we don't know, then assume that we are waiting for one.
-    if (state.awaitDrain && (!dest._writableState || dest._writableState.needDrain)) ondrain();
-  }
-
-  // If the user pushes more data while we're writing to dest then we'll end up
-  // in ondata again. However, we only want to increase awaitDrain once because
-  // dest will only emit one 'drain' event for the multiple writes.
-  // => Introduce a guard on increasing awaitDrain.
-  var increasedAwaitDrain = false;
-  src.on('data', ondata);
-  function ondata(chunk) {
-    debug('ondata');
-    increasedAwaitDrain = false;
-    var ret = dest.write(chunk);
-    if (false === ret && !increasedAwaitDrain) {
-      // If the user unpiped during `dest.write()`, it is possible
-      // to get stuck in a permanently paused state if that write
-      // also returned false.
-      // => Check whether `dest` is still a piping destination.
-      if ((state.pipesCount === 1 && state.pipes === dest || state.pipesCount > 1 && indexOf(state.pipes, dest) !== -1) && !cleanedUp) {
-        debug('false write response, pause', src._readableState.awaitDrain);
-        src._readableState.awaitDrain++;
-        increasedAwaitDrain = true;
-      }
-      src.pause();
-    }
-  }
-
-  // if the dest has an error, then stop piping into it.
-  // however, don't suppress the throwing behavior for this.
-  function onerror(er) {
-    debug('onerror', er);
-    unpipe();
-    dest.removeListener('error', onerror);
-    if (EElistenerCount(dest, 'error') === 0) dest.emit('error', er);
-  }
-
-  // Make sure our error handler is attached before userland ones.
-  prependListener(dest, 'error', onerror);
-
-  // Both close and finish should trigger unpipe, but only once.
-  function onclose() {
-    dest.removeListener('finish', onfinish);
-    unpipe();
-  }
-  dest.once('close', onclose);
-  function onfinish() {
-    debug('onfinish');
-    dest.removeListener('close', onclose);
-    unpipe();
-  }
-  dest.once('finish', onfinish);
-
-  function unpipe() {
-    debug('unpipe');
-    src.unpipe(dest);
-  }
-
-  // tell the dest that it's being piped to
-  dest.emit('pipe', src);
-
-  // start the flow if it hasn't been started already.
-  if (!state.flowing) {
-    debug('pipe resume');
-    src.resume();
-  }
-
-  return dest;
-};
-
-function pipeOnDrain(src) {
-  return function () {
-    var state = src._readableState;
-    debug('pipeOnDrain', state.awaitDrain);
-    if (state.awaitDrain) state.awaitDrain--;
-    if (state.awaitDrain === 0 && EElistenerCount(src, 'data')) {
-      state.flowing = true;
-      flow(src);
-    }
-  };
-}
-
-Readable.prototype.unpipe = function (dest) {
-  var state = this._readableState;
-  var unpipeInfo = { hasUnpiped: false };
-
-  // if we're not piping anywhere, then do nothing.
-  if (state.pipesCount === 0) return this;
-
-  // just one destination.  most common case.
-  if (state.pipesCount === 1) {
-    // passed in one, but it's not the right one.
-    if (dest && dest !== state.pipes) return this;
-
-    if (!dest) dest = state.pipes;
-
-    // got a match.
-    state.pipes = null;
-    state.pipesCount = 0;
-    state.flowing = false;
-    if (dest) dest.emit('unpipe', this, unpipeInfo);
-    return this;
-  }
-
-  // slow case. multiple pipe destinations.
-
-  if (!dest) {
-    // remove all.
-    var dests = state.pipes;
-    var len = state.pipesCount;
-    state.pipes = null;
-    state.pipesCount = 0;
-    state.flowing = false;
-
-    for (var i = 0; i < len; i++) {
-      dests[i].emit('unpipe', this, unpipeInfo);
-    }return this;
-  }
-
-  // try to find the right one.
-  var index = indexOf(state.pipes, dest);
-  if (index === -1) return this;
-
-  state.pipes.splice(index, 1);
-  state.pipesCount -= 1;
-  if (state.pipesCount === 1) state.pipes = state.pipes[0];
-
-  dest.emit('unpipe', this, unpipeInfo);
-
-  return this;
-};
-
-// set up data events if they are asked for
-// Ensure readable listeners eventually get something
-Readable.prototype.on = function (ev, fn) {
-  var res = Stream.prototype.on.call(this, ev, fn);
-
-  if (ev === 'data') {
-    // Start flowing on next tick if stream isn't explicitly paused
-    if (this._readableState.flowing !== false) this.resume();
-  } else if (ev === 'readable') {
-    var state = this._readableState;
-    if (!state.endEmitted && !state.readableListening) {
-      state.readableListening = state.needReadable = true;
-      state.emittedReadable = false;
-      if (!state.reading) {
-        pna.nextTick(nReadingNextTick, this);
-      } else if (state.length) {
-        emitReadable(this);
-      }
-    }
-  }
-
-  return res;
-};
-Readable.prototype.addListener = Readable.prototype.on;
-
-function nReadingNextTick(self) {
-  debug('readable nexttick read 0');
-  self.read(0);
-}
-
-// pause() and resume() are remnants of the legacy readable stream API
-// If the user uses them, then switch into old mode.
-Readable.prototype.resume = function () {
-  var state = this._readableState;
-  if (!state.flowing) {
-    debug('resume');
-    state.flowing = true;
-    resume(this, state);
-  }
-  return this;
-};
-
-function resume(stream, state) {
-  if (!state.resumeScheduled) {
-    state.resumeScheduled = true;
-    pna.nextTick(resume_, stream, state);
-  }
-}
-
-function resume_(stream, state) {
-  if (!state.reading) {
-    debug('resume read 0');
-    stream.read(0);
-  }
-
-  state.resumeScheduled = false;
-  state.awaitDrain = 0;
-  stream.emit('resume');
-  flow(stream);
-  if (state.flowing && !state.reading) stream.read(0);
-}
-
-Readable.prototype.pause = function () {
-  debug('call pause flowing=%j', this._readableState.flowing);
-  if (false !== this._readableState.flowing) {
-    debug('pause');
-    this._readableState.flowing = false;
-    this.emit('pause');
-  }
-  return this;
-};
-
-function flow(stream) {
-  var state = stream._readableState;
-  debug('flow', state.flowing);
-  while (state.flowing && stream.read() !== null) {}
-}
-
-// wrap an old-style stream as the async data source.
-// This is *not* part of the readable stream interface.
-// It is an ugly unfortunate mess of history.
-Readable.prototype.wrap = function (stream) {
-  var _this = this;
-
-  var state = this._readableState;
-  var paused = false;
-
-  stream.on('end', function () {
-    debug('wrapped end');
-    if (state.decoder && !state.ended) {
-      var chunk = state.decoder.end();
-      if (chunk && chunk.length) _this.push(chunk);
-    }
-
-    _this.push(null);
-  });
-
-  stream.on('data', function (chunk) {
-    debug('wrapped data');
-    if (state.decoder) chunk = state.decoder.write(chunk);
-
-    // don't skip over falsy values in objectMode
-    if (state.objectMode && (chunk === null || chunk === undefined)) return;else if (!state.objectMode && (!chunk || !chunk.length)) return;
-
-    var ret = _this.push(chunk);
-    if (!ret) {
-      paused = true;
-      stream.pause();
-    }
-  });
-
-  // proxy all the other methods.
-  // important when wrapping filters and duplexes.
-  for (var i in stream) {
-    if (this[i] === undefined && typeof stream[i] === 'function') {
-      this[i] = function (method) {
-        return function () {
-          return stream[method].apply(stream, arguments);
-        };
-      }(i);
-    }
-  }
-
-  // proxy certain important events.
-  for (var n = 0; n < kProxyEvents.length; n++) {
-    stream.on(kProxyEvents[n], this.emit.bind(this, kProxyEvents[n]));
-  }
-
-  // when we try to consume some more bytes, simply unpause the
-  // underlying stream.
-  this._read = function (n) {
-    debug('wrapped _read', n);
-    if (paused) {
-      paused = false;
-      stream.resume();
-    }
-  };
-
-  return this;
-};
-
-Object.defineProperty(Readable.prototype, 'readableHighWaterMark', {
-  // making it explicit this property is not enumerable
-  // because otherwise some prototype manipulation in
-  // userland will fail
-  enumerable: false,
-  get: function () {
-    return this._readableState.highWaterMark;
-  }
-});
-
-// exposed for testing purposes only.
-Readable._fromList = fromList;
-
-// Pluck off n bytes from an array of buffers.
-// Length is the combined lengths of all the buffers in the list.
-// This function is designed to be inlinable, so please take care when making
-// changes to the function body.
-function fromList(n, state) {
-  // nothing buffered
-  if (state.length === 0) return null;
-
-  var ret;
-  if (state.objectMode) ret = state.buffer.shift();else if (!n || n >= state.length) {
-    // read it all, truncate the list
-    if (state.decoder) ret = state.buffer.join('');else if (state.buffer.length === 1) ret = state.buffer.head.data;else ret = state.buffer.concat(state.length);
-    state.buffer.clear();
-  } else {
-    // read part of list
-    ret = fromListPartial(n, state.buffer, state.decoder);
-  }
-
-  return ret;
-}
-
-// Extracts only enough buffered data to satisfy the amount requested.
-// This function is designed to be inlinable, so please take care when making
-// changes to the function body.
-function fromListPartial(n, list, hasStrings) {
-  var ret;
-  if (n < list.head.data.length) {
-    // slice is the same for buffers and strings
-    ret = list.head.data.slice(0, n);
-    list.head.data = list.head.data.slice(n);
-  } else if (n === list.head.data.length) {
-    // first chunk is a perfect match
-    ret = list.shift();
-  } else {
-    // result spans more than one buffer
-    ret = hasStrings ? copyFromBufferString(n, list) : copyFromBuffer(n, list);
-  }
-  return ret;
-}
-
-// Copies a specified amount of characters from the list of buffered data
-// chunks.
-// This function is designed to be inlinable, so please take care when making
-// changes to the function body.
-function copyFromBufferString(n, list) {
-  var p = list.head;
-  var c = 1;
-  var ret = p.data;
-  n -= ret.length;
-  while (p = p.next) {
-    var str = p.data;
-    var nb = n > str.length ? str.length : n;
-    if (nb === str.length) ret += str;else ret += str.slice(0, n);
-    n -= nb;
-    if (n === 0) {
-      if (nb === str.length) {
-        ++c;
-        if (p.next) list.head = p.next;else list.head = list.tail = null;
-      } else {
-        list.head = p;
-        p.data = str.slice(nb);
-      }
-      break;
-    }
-    ++c;
-  }
-  list.length -= c;
-  return ret;
-}
-
-// Copies a specified amount of bytes from the list of buffered data chunks.
-// This function is designed to be inlinable, so please take care when making
-// changes to the function body.
-function copyFromBuffer(n, list) {
-  var ret = Buffer.allocUnsafe(n);
-  var p = list.head;
-  var c = 1;
-  p.data.copy(ret);
-  n -= p.data.length;
-  while (p = p.next) {
-    var buf = p.data;
-    var nb = n > buf.length ? buf.length : n;
-    buf.copy(ret, ret.length - n, 0, nb);
-    n -= nb;
-    if (n === 0) {
-      if (nb === buf.length) {
-        ++c;
-        if (p.next) list.head = p.next;else list.head = list.tail = null;
-      } else {
-        list.head = p;
-        p.data = buf.slice(nb);
-      }
-      break;
-    }
-    ++c;
-  }
-  list.length -= c;
-  return ret;
-}
-
-function endReadable(stream) {
-  var state = stream._readableState;
-
-  // If we get here before consuming all the bytes, then that is a
-  // bug in node.  Should never happen.
-  if (state.length > 0) throw new Error('"endReadable()" called on non-empty stream');
-
-  if (!state.endEmitted) {
-    state.ended = true;
-    pna.nextTick(endReadableNT, state, stream);
-  }
-}
-
-function endReadableNT(state, stream) {
-  // Check that we didn't get one last unshift.
-  if (!state.endEmitted && state.length === 0) {
-    state.endEmitted = true;
-    stream.readable = false;
-    stream.emit('end');
-  }
-}
-
-function indexOf(xs, x) {
-  for (var i = 0, l = xs.length; i < l; i++) {
-    if (xs[i] === x) return i;
-  }
-  return -1;
-}
-
-/***/ }),
-/* 407 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-// a transform stream is a readable/writable stream where you do
-// something with the data.  Sometimes it's called a "filter",
-// but that's not a great name for it, since that implies a thing where
-// some bits pass through, and others are simply ignored.  (That would
-// be a valid example of a transform, of course.)
-//
-// While the output is causally related to the input, it's not a
-// necessarily symmetric or synchronous transformation.  For example,
-// a zlib stream might take multiple plain-text writes(), and then
-// emit a single compressed chunk some time in the future.
-//
-// Here's how this works:
-//
-// The Transform stream has all the aspects of the readable and writable
-// stream classes.  When you write(chunk), that calls _write(chunk,cb)
-// internally, and returns false if there's a lot of pending writes
-// buffered up.  When you call read(), that calls _read(n) until
-// there's enough pending readable data buffered up.
-//
-// In a transform stream, the written data is placed in a buffer.  When
-// _read(n) is called, it transforms the queued up data, calling the
-// buffered _write cb's as it consumes chunks.  If consuming a single
-// written chunk would result in multiple output chunks, then the first
-// outputted bit calls the readcb, and subsequent chunks just go into
-// the read buffer, and will cause it to emit 'readable' if necessary.
-//
-// This way, back-pressure is actually determined by the reading side,
-// since _read has to be called to start processing a new chunk.  However,
-// a pathological inflate type of transform can cause excessive buffering
-// here.  For example, imagine a stream where every byte of input is
-// interpreted as an integer from 0-255, and then results in that many
-// bytes of output.  Writing the 4 bytes {ff,ff,ff,ff} would result in
-// 1kb of data being output.  In this case, you could write a very small
-// amount of input, and end up with a very large amount of output.  In
-// such a pathological inflating mechanism, there'd be no way to tell
-// the system to stop doing the transform.  A single 4MB write could
-// cause the system to run out of memory.
-//
-// However, even in such a pathological case, only a single written chunk
-// would be consumed, and then the rest would wait (un-transformed) until
-// the results of the previous transformed chunk were consumed.
-
-
-
-module.exports = Transform;
-
-var Duplex = __webpack_require__(115);
-
-/*<replacement>*/
-var util = __webpack_require__(113);
-util.inherits = __webpack_require__(61);
-/*</replacement>*/
-
-util.inherits(Transform, Duplex);
-
-function afterTransform(er, data) {
-  var ts = this._transformState;
-  ts.transforming = false;
-
-  var cb = ts.writecb;
-
-  if (!cb) {
-    return this.emit('error', new Error('write callback called multiple times'));
-  }
-
-  ts.writechunk = null;
-  ts.writecb = null;
-
-  if (data != null) // single equals check for both `null` and `undefined`
-    this.push(data);
-
-  cb(er);
-
-  var rs = this._readableState;
-  rs.reading = false;
-  if (rs.needReadable || rs.length < rs.highWaterMark) {
-    this._read(rs.highWaterMark);
-  }
-}
-
-function Transform(options) {
-  if (!(this instanceof Transform)) return new Transform(options);
-
-  Duplex.call(this, options);
-
-  this._transformState = {
-    afterTransform: afterTransform.bind(this),
-    needTransform: false,
-    transforming: false,
-    writecb: null,
-    writechunk: null,
-    writeencoding: null
-  };
-
-  // start out asking for a readable event once data is transformed.
-  this._readableState.needReadable = true;
-
-  // we have implemented the _read method, and done the other things
-  // that Readable wants before the first _read call, so unset the
-  // sync guard flag.
-  this._readableState.sync = false;
-
-  if (options) {
-    if (typeof options.transform === 'function') this._transform = options.transform;
-
-    if (typeof options.flush === 'function') this._flush = options.flush;
-  }
-
-  // When the writable side finishes, then flush out anything remaining.
-  this.on('prefinish', prefinish);
-}
-
-function prefinish() {
-  var _this = this;
-
-  if (typeof this._flush === 'function') {
-    this._flush(function (er, data) {
-      done(_this, er, data);
-    });
-  } else {
-    done(this, null, null);
-  }
-}
-
-Transform.prototype.push = function (chunk, encoding) {
-  this._transformState.needTransform = false;
-  return Duplex.prototype.push.call(this, chunk, encoding);
-};
-
-// This is the part where you do stuff!
-// override this function in implementation classes.
-// 'chunk' is an input chunk.
-//
-// Call `push(newChunk)` to pass along transformed output
-// to the readable side.  You may call 'push' zero or more times.
-//
-// Call `cb(err)` when you are done with this chunk.  If you pass
-// an error, then that'll put the hurt on the whole operation.  If you
-// never call cb(), then you'll never get another chunk.
-Transform.prototype._transform = function (chunk, encoding, cb) {
-  throw new Error('_transform() is not implemented');
-};
-
-Transform.prototype._write = function (chunk, encoding, cb) {
-  var ts = this._transformState;
-  ts.writecb = cb;
-  ts.writechunk = chunk;
-  ts.writeencoding = encoding;
-  if (!ts.transforming) {
-    var rs = this._readableState;
-    if (ts.needTransform || rs.needReadable || rs.length < rs.highWaterMark) this._read(rs.highWaterMark);
-  }
-};
-
-// Doesn't matter what the args are here.
-// _transform does all the work.
-// That we got here means that the readable side wants more data.
-Transform.prototype._read = function (n) {
-  var ts = this._transformState;
-
-  if (ts.writechunk !== null && ts.writecb && !ts.transforming) {
-    ts.transforming = true;
-    this._transform(ts.writechunk, ts.writeencoding, ts.afterTransform);
-  } else {
-    // mark that we need a transform, so that any data that comes in
-    // will get processed, now that we've asked for it.
-    ts.needTransform = true;
-  }
-};
-
-Transform.prototype._destroy = function (err, cb) {
-  var _this2 = this;
-
-  Duplex.prototype._destroy.call(this, err, function (err2) {
-    cb(err2);
-    _this2.emit('close');
-  });
-};
-
-function done(stream, er, data) {
-  if (er) return stream.emit('error', er);
-
-  if (data != null) // single equals check for both `null` and `undefined`
-    stream.push(data);
-
-  // if there's nothing in the write buffer, then that means
-  // that nothing more will ever be provided
-  if (stream._writableState.length) throw new Error('Calling transform done when ws.length != 0');
-
-  if (stream._transformState.transforming) throw new Error('Calling transform done when still transforming');
-
-  return stream.push(null);
-}
-
-/***/ }),
-/* 408 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-// A bit simpler than readable streams.
-// Implement an async ._write(chunk, encoding, cb), and it'll handle all
-// the drain event emission and buffering.
-
-
-
-/*<replacement>*/
-
-var pna = __webpack_require__(180);
-/*</replacement>*/
-
-module.exports = Writable;
-
-/* <replacement> */
-function WriteReq(chunk, encoding, cb) {
-  this.chunk = chunk;
-  this.encoding = encoding;
-  this.callback = cb;
-  this.next = null;
-}
-
-// It seems a linked list but it is not
-// there will be only 2 of these for each stream
-function CorkedRequest(state) {
-  var _this = this;
-
-  this.next = null;
-  this.entry = null;
-  this.finish = function () {
-    onCorkedFinish(_this, state);
-  };
-}
-/* </replacement> */
-
-/*<replacement>*/
-var asyncWrite = !process.browser && ['v0.10', 'v0.9.'].indexOf(process.version.slice(0, 5)) > -1 ? setImmediate : pna.nextTick;
-/*</replacement>*/
-
-/*<replacement>*/
-var Duplex;
-/*</replacement>*/
-
-Writable.WritableState = WritableState;
-
-/*<replacement>*/
-var util = __webpack_require__(113);
-util.inherits = __webpack_require__(61);
-/*</replacement>*/
-
-/*<replacement>*/
-var internalUtil = {
-  deprecate: __webpack_require__(956)
-};
-/*</replacement>*/
-
-/*<replacement>*/
-var Stream = __webpack_require__(410);
-/*</replacement>*/
-
-/*<replacement>*/
-
-var Buffer = __webpack_require__(45).Buffer;
-var OurUint8Array = global.Uint8Array || function () {};
-function _uint8ArrayToBuffer(chunk) {
-  return Buffer.from(chunk);
-}
-function _isUint8Array(obj) {
-  return Buffer.isBuffer(obj) || obj instanceof OurUint8Array;
-}
-
-/*</replacement>*/
-
-var destroyImpl = __webpack_require__(409);
-
-util.inherits(Writable, Stream);
-
-function nop() {}
-
-function WritableState(options, stream) {
-  Duplex = Duplex || __webpack_require__(115);
-
-  options = options || {};
-
-  // Duplex streams are both readable and writable, but share
-  // the same options object.
-  // However, some cases require setting options to different
-  // values for the readable and the writable sides of the duplex stream.
-  // These options can be provided separately as readableXXX and writableXXX.
-  var isDuplex = stream instanceof Duplex;
-
-  // object stream flag to indicate whether or not this stream
-  // contains buffers or objects.
-  this.objectMode = !!options.objectMode;
-
-  if (isDuplex) this.objectMode = this.objectMode || !!options.writableObjectMode;
-
-  // the point at which write() starts returning false
-  // Note: 0 is a valid value, means that we always return false if
-  // the entire buffer is not flushed immediately on write()
-  var hwm = options.highWaterMark;
-  var writableHwm = options.writableHighWaterMark;
-  var defaultHwm = this.objectMode ? 16 : 16 * 1024;
-
-  if (hwm || hwm === 0) this.highWaterMark = hwm;else if (isDuplex && (writableHwm || writableHwm === 0)) this.highWaterMark = writableHwm;else this.highWaterMark = defaultHwm;
-
-  // cast to ints.
-  this.highWaterMark = Math.floor(this.highWaterMark);
-
-  // if _final has been called
-  this.finalCalled = false;
-
-  // drain event flag.
-  this.needDrain = false;
-  // at the start of calling end()
-  this.ending = false;
-  // when end() has been called, and returned
-  this.ended = false;
-  // when 'finish' is emitted
-  this.finished = false;
-
-  // has it been destroyed
-  this.destroyed = false;
-
-  // should we decode strings into buffers before passing to _write?
-  // this is here so that some node-core streams can optimize string
-  // handling at a lower level.
-  var noDecode = options.decodeStrings === false;
-  this.decodeStrings = !noDecode;
-
-  // Crypto is kind of old and crusty.  Historically, its default string
-  // encoding is 'binary' so we have to make this configurable.
-  // Everything else in the universe uses 'utf8', though.
-  this.defaultEncoding = options.defaultEncoding || 'utf8';
-
-  // not an actual buffer we keep track of, but a measurement
-  // of how much we're waiting to get pushed to some underlying
-  // socket or file.
-  this.length = 0;
-
-  // a flag to see when we're in the middle of a write.
-  this.writing = false;
-
-  // when true all writes will be buffered until .uncork() call
-  this.corked = 0;
-
-  // a flag to be able to tell if the onwrite cb is called immediately,
-  // or on a later tick.  We set this to true at first, because any
-  // actions that shouldn't happen until "later" should generally also
-  // not happen before the first write call.
-  this.sync = true;
-
-  // a flag to know if we're processing previously buffered items, which
-  // may call the _write() callback in the same tick, so that we don't
-  // end up in an overlapped onwrite situation.
-  this.bufferProcessing = false;
-
-  // the callback that's passed to _write(chunk,cb)
-  this.onwrite = function (er) {
-    onwrite(stream, er);
-  };
-
-  // the callback that the user supplies to write(chunk,encoding,cb)
-  this.writecb = null;
-
-  // the amount that is being written when _write is called.
-  this.writelen = 0;
-
-  this.bufferedRequest = null;
-  this.lastBufferedRequest = null;
-
-  // number of pending user-supplied write callbacks
-  // this must be 0 before 'finish' can be emitted
-  this.pendingcb = 0;
-
-  // emit prefinish if the only thing we're waiting for is _write cbs
-  // This is relevant for synchronous Transform streams
-  this.prefinished = false;
-
-  // True if the error was already emitted and should not be thrown again
-  this.errorEmitted = false;
-
-  // count buffered requests
-  this.bufferedRequestCount = 0;
-
-  // allocate the first CorkedRequest, there is always
-  // one allocated and free to use, and we maintain at most two
-  this.corkedRequestsFree = new CorkedRequest(this);
-}
-
-WritableState.prototype.getBuffer = function getBuffer() {
-  var current = this.bufferedRequest;
-  var out = [];
-  while (current) {
-    out.push(current);
-    current = current.next;
-  }
-  return out;
-};
-
-(function () {
-  try {
-    Object.defineProperty(WritableState.prototype, 'buffer', {
-      get: internalUtil.deprecate(function () {
-        return this.getBuffer();
-      }, '_writableState.buffer is deprecated. Use _writableState.getBuffer ' + 'instead.', 'DEP0003')
-    });
-  } catch (_) {}
-})();
-
-// Test _writableState for inheritance to account for Duplex streams,
-// whose prototype chain only points to Readable.
-var realHasInstance;
-if (typeof Symbol === 'function' && Symbol.hasInstance && typeof Function.prototype[Symbol.hasInstance] === 'function') {
-  realHasInstance = Function.prototype[Symbol.hasInstance];
-  Object.defineProperty(Writable, Symbol.hasInstance, {
-    value: function (object) {
-      if (realHasInstance.call(this, object)) return true;
-      if (this !== Writable) return false;
-
-      return object && object._writableState instanceof WritableState;
-    }
-  });
-} else {
-  realHasInstance = function (object) {
-    return object instanceof this;
-  };
-}
-
-function Writable(options) {
-  Duplex = Duplex || __webpack_require__(115);
-
-  // Writable ctor is applied to Duplexes, too.
-  // `realHasInstance` is necessary because using plain `instanceof`
-  // would return false, as no `_writableState` property is attached.
-
-  // Trying to use the custom `instanceof` for Writable here will also break the
-  // Node.js LazyTransform implementation, which has a non-trivial getter for
-  // `_writableState` that would lead to infinite recursion.
-  if (!realHasInstance.call(Writable, this) && !(this instanceof Duplex)) {
-    return new Writable(options);
-  }
-
-  this._writableState = new WritableState(options, this);
-
-  // legacy.
-  this.writable = true;
-
-  if (options) {
-    if (typeof options.write === 'function') this._write = options.write;
-
-    if (typeof options.writev === 'function') this._writev = options.writev;
-
-    if (typeof options.destroy === 'function') this._destroy = options.destroy;
-
-    if (typeof options.final === 'function') this._final = options.final;
-  }
-
-  Stream.call(this);
-}
-
-// Otherwise people can pipe Writable streams, which is just wrong.
-Writable.prototype.pipe = function () {
-  this.emit('error', new Error('Cannot pipe, not readable'));
-};
-
-function writeAfterEnd(stream, cb) {
-  var er = new Error('write after end');
-  // TODO: defer error events consistently everywhere, not just the cb
-  stream.emit('error', er);
-  pna.nextTick(cb, er);
-}
-
-// Checks that a user-supplied chunk is valid, especially for the particular
-// mode the stream is in. Currently this means that `null` is never accepted
-// and undefined/non-string values are only allowed in object mode.
-function validChunk(stream, state, chunk, cb) {
-  var valid = true;
-  var er = false;
-
-  if (chunk === null) {
-    er = new TypeError('May not write null values to stream');
-  } else if (typeof chunk !== 'string' && chunk !== undefined && !state.objectMode) {
-    er = new TypeError('Invalid non-string/buffer chunk');
-  }
-  if (er) {
-    stream.emit('error', er);
-    pna.nextTick(cb, er);
-    valid = false;
-  }
-  return valid;
-}
-
-Writable.prototype.write = function (chunk, encoding, cb) {
-  var state = this._writableState;
-  var ret = false;
-  var isBuf = !state.objectMode && _isUint8Array(chunk);
-
-  if (isBuf && !Buffer.isBuffer(chunk)) {
-    chunk = _uint8ArrayToBuffer(chunk);
-  }
-
-  if (typeof encoding === 'function') {
-    cb = encoding;
-    encoding = null;
-  }
-
-  if (isBuf) encoding = 'buffer';else if (!encoding) encoding = state.defaultEncoding;
-
-  if (typeof cb !== 'function') cb = nop;
-
-  if (state.ended) writeAfterEnd(this, cb);else if (isBuf || validChunk(this, state, chunk, cb)) {
-    state.pendingcb++;
-    ret = writeOrBuffer(this, state, isBuf, chunk, encoding, cb);
-  }
-
-  return ret;
-};
-
-Writable.prototype.cork = function () {
-  var state = this._writableState;
-
-  state.corked++;
-};
-
-Writable.prototype.uncork = function () {
-  var state = this._writableState;
-
-  if (state.corked) {
-    state.corked--;
-
-    if (!state.writing && !state.corked && !state.finished && !state.bufferProcessing && state.bufferedRequest) clearBuffer(this, state);
-  }
-};
-
-Writable.prototype.setDefaultEncoding = function setDefaultEncoding(encoding) {
-  // node::ParseEncoding() requires lower case.
-  if (typeof encoding === 'string') encoding = encoding.toLowerCase();
-  if (!(['hex', 'utf8', 'utf-8', 'ascii', 'binary', 'base64', 'ucs2', 'ucs-2', 'utf16le', 'utf-16le', 'raw'].indexOf((encoding + '').toLowerCase()) > -1)) throw new TypeError('Unknown encoding: ' + encoding);
-  this._writableState.defaultEncoding = encoding;
-  return this;
-};
-
-function decodeChunk(state, chunk, encoding) {
-  if (!state.objectMode && state.decodeStrings !== false && typeof chunk === 'string') {
-    chunk = Buffer.from(chunk, encoding);
-  }
-  return chunk;
-}
-
-Object.defineProperty(Writable.prototype, 'writableHighWaterMark', {
-  // making it explicit this property is not enumerable
-  // because otherwise some prototype manipulation in
-  // userland will fail
-  enumerable: false,
-  get: function () {
-    return this._writableState.highWaterMark;
-  }
-});
-
-// if we're already writing something, then just put this
-// in the queue, and wait our turn.  Otherwise, call _write
-// If we return false, then we need a drain event, so set that flag.
-function writeOrBuffer(stream, state, isBuf, chunk, encoding, cb) {
-  if (!isBuf) {
-    var newChunk = decodeChunk(state, chunk, encoding);
-    if (chunk !== newChunk) {
-      isBuf = true;
-      encoding = 'buffer';
-      chunk = newChunk;
-    }
-  }
-  var len = state.objectMode ? 1 : chunk.length;
-
-  state.length += len;
-
-  var ret = state.length < state.highWaterMark;
-  // we must ensure that previous needDrain will not be reset to false.
-  if (!ret) state.needDrain = true;
-
-  if (state.writing || state.corked) {
-    var last = state.lastBufferedRequest;
-    state.lastBufferedRequest = {
-      chunk: chunk,
-      encoding: encoding,
-      isBuf: isBuf,
-      callback: cb,
-      next: null
-    };
-    if (last) {
-      last.next = state.lastBufferedRequest;
-    } else {
-      state.bufferedRequest = state.lastBufferedRequest;
-    }
-    state.bufferedRequestCount += 1;
-  } else {
-    doWrite(stream, state, false, len, chunk, encoding, cb);
-  }
-
-  return ret;
-}
-
-function doWrite(stream, state, writev, len, chunk, encoding, cb) {
-  state.writelen = len;
-  state.writecb = cb;
-  state.writing = true;
-  state.sync = true;
-  if (writev) stream._writev(chunk, state.onwrite);else stream._write(chunk, encoding, state.onwrite);
-  state.sync = false;
-}
-
-function onwriteError(stream, state, sync, er, cb) {
-  --state.pendingcb;
-
-  if (sync) {
-    // defer the callback if we are being called synchronously
-    // to avoid piling up things on the stack
-    pna.nextTick(cb, er);
-    // this can emit finish, and it will always happen
-    // after error
-    pna.nextTick(finishMaybe, stream, state);
-    stream._writableState.errorEmitted = true;
-    stream.emit('error', er);
-  } else {
-    // the caller expect this to happen before if
-    // it is async
-    cb(er);
-    stream._writableState.errorEmitted = true;
-    stream.emit('error', er);
-    // this can emit finish, but finish must
-    // always follow error
-    finishMaybe(stream, state);
-  }
-}
-
-function onwriteStateUpdate(state) {
-  state.writing = false;
-  state.writecb = null;
-  state.length -= state.writelen;
-  state.writelen = 0;
-}
-
-function onwrite(stream, er) {
-  var state = stream._writableState;
-  var sync = state.sync;
-  var cb = state.writecb;
-
-  onwriteStateUpdate(state);
-
-  if (er) onwriteError(stream, state, sync, er, cb);else {
-    // Check if we're actually ready to finish, but don't emit yet
-    var finished = needFinish(state);
-
-    if (!finished && !state.corked && !state.bufferProcessing && state.bufferedRequest) {
-      clearBuffer(stream, state);
-    }
-
-    if (sync) {
-      /*<replacement>*/
-      asyncWrite(afterWrite, stream, state, finished, cb);
-      /*</replacement>*/
-    } else {
-      afterWrite(stream, state, finished, cb);
-    }
-  }
-}
-
-function afterWrite(stream, state, finished, cb) {
-  if (!finished) onwriteDrain(stream, state);
-  state.pendingcb--;
-  cb();
-  finishMaybe(stream, state);
-}
-
-// Must force callback to be called on nextTick, so that we don't
-// emit 'drain' before the write() consumer gets the 'false' return
-// value, and has a chance to attach a 'drain' listener.
-function onwriteDrain(stream, state) {
-  if (state.length === 0 && state.needDrain) {
-    state.needDrain = false;
-    stream.emit('drain');
-  }
-}
-
-// if there's something in the buffer waiting, then process it
-function clearBuffer(stream, state) {
-  state.bufferProcessing = true;
-  var entry = state.bufferedRequest;
-
-  if (stream._writev && entry && entry.next) {
-    // Fast case, write everything using _writev()
-    var l = state.bufferedRequestCount;
-    var buffer = new Array(l);
-    var holder = state.corkedRequestsFree;
-    holder.entry = entry;
-
-    var count = 0;
-    var allBuffers = true;
-    while (entry) {
-      buffer[count] = entry;
-      if (!entry.isBuf) allBuffers = false;
-      entry = entry.next;
-      count += 1;
-    }
-    buffer.allBuffers = allBuffers;
-
-    doWrite(stream, state, true, state.length, buffer, '', holder.finish);
-
-    // doWrite is almost always async, defer these to save a bit of time
-    // as the hot path ends with doWrite
-    state.pendingcb++;
-    state.lastBufferedRequest = null;
-    if (holder.next) {
-      state.corkedRequestsFree = holder.next;
-      holder.next = null;
-    } else {
-      state.corkedRequestsFree = new CorkedRequest(state);
-    }
-    state.bufferedRequestCount = 0;
-  } else {
-    // Slow case, write chunks one-by-one
-    while (entry) {
-      var chunk = entry.chunk;
-      var encoding = entry.encoding;
-      var cb = entry.callback;
-      var len = state.objectMode ? 1 : chunk.length;
-
-      doWrite(stream, state, false, len, chunk, encoding, cb);
-      entry = entry.next;
-      state.bufferedRequestCount--;
-      // if we didn't call the onwrite immediately, then
-      // it means that we need to wait until it does.
-      // also, that means that the chunk and cb are currently
-      // being processed, so move the buffer counter past them.
-      if (state.writing) {
-        break;
-      }
-    }
-
-    if (entry === null) state.lastBufferedRequest = null;
-  }
-
-  state.bufferedRequest = entry;
-  state.bufferProcessing = false;
-}
-
-Writable.prototype._write = function (chunk, encoding, cb) {
-  cb(new Error('_write() is not implemented'));
-};
-
-Writable.prototype._writev = null;
-
-Writable.prototype.end = function (chunk, encoding, cb) {
-  var state = this._writableState;
-
-  if (typeof chunk === 'function') {
-    cb = chunk;
-    chunk = null;
-    encoding = null;
-  } else if (typeof encoding === 'function') {
-    cb = encoding;
-    encoding = null;
-  }
-
-  if (chunk !== null && chunk !== undefined) this.write(chunk, encoding);
-
-  // .end() fully uncorks
-  if (state.corked) {
-    state.corked = 1;
-    this.uncork();
-  }
-
-  // ignore unnecessary end() calls.
-  if (!state.ending && !state.finished) endWritable(this, state, cb);
-};
-
-function needFinish(state) {
-  return state.ending && state.length === 0 && state.bufferedRequest === null && !state.finished && !state.writing;
-}
-function callFinal(stream, state) {
-  stream._final(function (err) {
-    state.pendingcb--;
-    if (err) {
-      stream.emit('error', err);
-    }
-    state.prefinished = true;
-    stream.emit('prefinish');
-    finishMaybe(stream, state);
-  });
-}
-function prefinish(stream, state) {
-  if (!state.prefinished && !state.finalCalled) {
-    if (typeof stream._final === 'function') {
-      state.pendingcb++;
-      state.finalCalled = true;
-      pna.nextTick(callFinal, stream, state);
-    } else {
-      state.prefinished = true;
-      stream.emit('prefinish');
-    }
-  }
-}
-
-function finishMaybe(stream, state) {
-  var need = needFinish(state);
-  if (need) {
-    prefinish(stream, state);
-    if (state.pendingcb === 0) {
-      state.finished = true;
-      stream.emit('finish');
-    }
-  }
-  return need;
-}
-
-function endWritable(stream, state, cb) {
-  state.ending = true;
-  finishMaybe(stream, state);
-  if (cb) {
-    if (state.finished) pna.nextTick(cb);else stream.once('finish', cb);
-  }
-  state.ended = true;
-  stream.writable = false;
-}
-
-function onCorkedFinish(corkReq, state, err) {
-  var entry = corkReq.entry;
-  corkReq.entry = null;
-  while (entry) {
-    var cb = entry.callback;
-    state.pendingcb--;
-    cb(err);
-    entry = entry.next;
-  }
-  if (state.corkedRequestsFree) {
-    state.corkedRequestsFree.next = corkReq;
-  } else {
-    state.corkedRequestsFree = corkReq;
-  }
-}
-
-Object.defineProperty(Writable.prototype, 'destroyed', {
-  get: function () {
-    if (this._writableState === undefined) {
-      return false;
-    }
-    return this._writableState.destroyed;
-  },
-  set: function (value) {
-    // we ignore the value if the stream
-    // has not been initialized yet
-    if (!this._writableState) {
-      return;
-    }
-
-    // backward compatibility, the user is explicitly
-    // managing destroyed
-    this._writableState.destroyed = value;
-  }
-});
-
-Writable.prototype.destroy = destroyImpl.destroy;
-Writable.prototype._undestroy = destroyImpl.undestroy;
-Writable.prototype._destroy = function (err, cb) {
-  this.end();
-  cb(err);
-};
-
-/***/ }),
-/* 409 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-/*<replacement>*/
-
-var pna = __webpack_require__(180);
-/*</replacement>*/
-
-// undocumented cb() API, needed for core, not for public API
-function destroy(err, cb) {
-  var _this = this;
-
-  var readableDestroyed = this._readableState && this._readableState.destroyed;
-  var writableDestroyed = this._writableState && this._writableState.destroyed;
-
-  if (readableDestroyed || writableDestroyed) {
-    if (cb) {
-      cb(err);
-    } else if (err && (!this._writableState || !this._writableState.errorEmitted)) {
-      pna.nextTick(emitErrorNT, this, err);
-    }
-    return this;
-  }
-
-  // we set destroyed to true before firing error callbacks in order
-  // to make it re-entrance safe in case destroy() is called within callbacks
-
-  if (this._readableState) {
-    this._readableState.destroyed = true;
-  }
-
-  // if this is a duplex stream mark the writable part as destroyed as well
-  if (this._writableState) {
-    this._writableState.destroyed = true;
-  }
-
-  this._destroy(err || null, function (err) {
-    if (!cb && err) {
-      pna.nextTick(emitErrorNT, _this, err);
-      if (_this._writableState) {
-        _this._writableState.errorEmitted = true;
-      }
-    } else if (cb) {
-      cb(err);
-    }
-  });
-
-  return this;
-}
-
-function undestroy() {
-  if (this._readableState) {
-    this._readableState.destroyed = false;
-    this._readableState.reading = false;
-    this._readableState.ended = false;
-    this._readableState.endEmitted = false;
-  }
-
-  if (this._writableState) {
-    this._writableState.destroyed = false;
-    this._writableState.ended = false;
-    this._writableState.ending = false;
-    this._writableState.finished = false;
-    this._writableState.errorEmitted = false;
-  }
-}
-
-function emitErrorNT(self, err) {
-  self.emit('error', err);
-}
-
-module.exports = {
-  destroy: destroy,
-  undestroy: undestroy
-};
-
-/***/ }),
-/* 410 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(23);
-
-
-/***/ }),
-/* 411 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * repeat-element <https://github.com/jonschlinkert/repeat-element>
- *
- * Copyright (c) 2015 Jon Schlinkert.
- * Licensed under the MIT license.
- */
-
-
-
-module.exports = function repeat(ele, num) {
-  var arr = new Array(num);
-
-  for (var i = 0; i < num; i++) {
-    arr[i] = ele;
-  }
-
-  return arr;
-};
-
-
-/***/ }),
-/* 412 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var tough = __webpack_require__(810)
-
-var Cookie = tough.Cookie
-var CookieJar = tough.CookieJar
-
-exports.parse = function (str) {
-  if (str && str.uri) {
-    str = str.uri
-  }
-  if (typeof str !== 'string') {
-    throw new Error('The cookie function only accepts STRING as param')
-  }
-  return Cookie.parse(str, {loose: true})
-}
-
-// Adapt the sometimes-Async api of tough.CookieJar to our requirements
-function RequestJar (store) {
-  var self = this
-  self._jar = new CookieJar(store, {looseMode: true})
-}
-RequestJar.prototype.setCookie = function (cookieOrStr, uri, options) {
-  var self = this
-  return self._jar.setCookieSync(cookieOrStr, uri, options || {})
-}
-RequestJar.prototype.getCookieString = function (uri) {
-  var self = this
-  return self._jar.getCookieStringSync(uri)
-}
-RequestJar.prototype.getCookies = function (uri) {
-  var self = this
-  return self._jar.getCookiesSync(uri)
-}
-
-exports.jar = function (store) {
-  return new RequestJar(store)
-}
-
-
-/***/ }),
-/* 413 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * Copyright (c) 2015, Salesforce.com, Inc.
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- *
- * 3. Neither the name of Salesforce.com nor the names of its contributors may
- * be used to endorse or promote products derived from this software without
- * specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
-
-/*
- * "A request-path path-matches a given cookie-path if at least one of the
- * following conditions holds:"
- */
-function pathMatch (reqPath, cookiePath) {
-  // "o  The cookie-path and the request-path are identical."
-  if (cookiePath === reqPath) {
-    return true;
-  }
-
-  var idx = reqPath.indexOf(cookiePath);
-  if (idx === 0) {
-    // "o  The cookie-path is a prefix of the request-path, and the last
-    // character of the cookie-path is %x2F ("/")."
-    if (cookiePath.substr(-1) === "/") {
-      return true;
-    }
-
-    // " o  The cookie-path is a prefix of the request-path, and the first
-    // character of the request-path that is not included in the cookie- path
-    // is a %x2F ("/") character."
-    if (reqPath.substr(cookiePath.length, 1) === "/") {
-      return true;
-    }
-  }
-
-  return false;
-}
-
-exports.pathMatch = pathMatch;
-
-
-/***/ }),
-/* 414 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * Copyright (c) 2015, Salesforce.com, Inc.
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- *
- * 3. Neither the name of Salesforce.com nor the names of its contributors may
- * be used to endorse or promote products derived from this software without
- * specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
-
-var pubsuffix = __webpack_require__(415);
-
-// Gives the permutation of all possible domainMatch()es of a given domain. The
-// array is in shortest-to-longest order.  Handy for indexing.
-function permuteDomain (domain) {
-  var pubSuf = pubsuffix.getPublicSuffix(domain);
-  if (!pubSuf) {
-    return null;
-  }
-  if (pubSuf == domain) {
-    return [domain];
-  }
-
-  var prefix = domain.slice(0, -(pubSuf.length + 1)); // ".example.com"
-  var parts = prefix.split('.').reverse();
-  var cur = pubSuf;
-  var permutations = [cur];
-  while (parts.length) {
-    cur = parts.shift() + '.' + cur;
-    permutations.push(cur);
-  }
-  return permutations;
-}
-
-exports.permuteDomain = permuteDomain;
-
-
-/***/ }),
-/* 415 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/****************************************************
- * AUTOMATICALLY GENERATED by generate-pubsuffix.js *
- *                  DO NOT EDIT!                    *
- ****************************************************/
-
-
-
-var punycode = __webpack_require__(332);
-
-module.exports.getPublicSuffix = function getPublicSuffix(domain) {
-  /*!
-   * Copyright (c) 2015, Salesforce.com, Inc.
-   * All rights reserved.
-   *
-   * Redistribution and use in source and binary forms, with or without
-   * modification, are permitted provided that the following conditions are met:
-   *
-   * 1. Redistributions of source code must retain the above copyright notice,
-   * this list of conditions and the following disclaimer.
-   *
-   * 2. Redistributions in binary form must reproduce the above copyright notice,
-   * this list of conditions and the following disclaimer in the documentation
-   * and/or other materials provided with the distribution.
-   *
-   * 3. Neither the name of Salesforce.com nor the names of its contributors may
-   * be used to endorse or promote products derived from this software without
-   * specific prior written permission.
-   *
-   * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
-   * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
-   * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
-   * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
-   * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
-   * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
-   * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
-   * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
-   * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
-   * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
-   * POSSIBILITY OF SUCH DAMAGE.
-   */
-  if (!domain) {
-    return null;
-  }
-  if (domain.match(/^\./)) {
-    return null;
-  }
-  var asciiDomain = punycode.toASCII(domain);
-  var converted = false;
-  if (asciiDomain !== domain) {
-    domain = asciiDomain;
-    converted = true;
-  }
-  if (index[domain]) {
-    return null;
-  }
-
-  domain = domain.toLowerCase();
-  var parts = domain.split('.').reverse();
-
-  var suffix = '';
-  var suffixLen = 0;
-  for (var i=0; i<parts.length; i++) {
-    var part = parts[i];
-    var starstr = '*'+suffix;
-    var partstr = part+suffix;
-
-    if (index[starstr]) { // star rule matches
-      suffixLen = i+1;
-      if (index[partstr] === false) { // exception rule matches (NB: false, not undefined)
-        suffixLen--;
-      }
-    } else if (index[partstr]) { // exact match, not exception
-      suffixLen = i+1;
-    }
-
-    suffix = '.'+partstr;
-  }
-
-  if (index['*'+suffix]) { // *.domain exists (e.g. *.kyoto.jp for domain='kyoto.jp');
-    return null;
-  }
-
-  suffixLen = suffixLen || 1;
-  if (parts.length > suffixLen) {
-    var publicSuffix = parts.slice(0,suffixLen+1).reverse().join('.');
-    return converted ? punycode.toUnicode(publicSuffix) : publicSuffix;
-  }
-
-  return null;
-};
-
-// The following generated structure is used under the MPL version 2.0
-// See public-suffix.txt for more information
-
-var index = module.exports.index = Object.freeze(
-{"ac":true,"com.ac":true,"edu.ac":true,"gov.ac":true,"net.ac":true,"mil.ac":true,"org.ac":true,"ad":true,"nom.ad":true,"ae":true,"co.ae":true,"net.ae":true,"org.ae":true,"sch.ae":true,"ac.ae":true,"gov.ae":true,"mil.ae":true,"aero":true,"accident-investigation.aero":true,"accident-prevention.aero":true,"aerobatic.aero":true,"aeroclub.aero":true,"aerodrome.aero":true,"agents.aero":true,"aircraft.aero":true,"airline.aero":true,"airport.aero":true,"air-surveillance.aero":true,"airtraffic.aero":true,"air-traffic-control.aero":true,"ambulance.aero":true,"amusement.aero":true,"association.aero":true,"author.aero":true,"ballooning.aero":true,"broker.aero":true,"caa.aero":true,"cargo.aero":true,"catering.aero":true,"certification.aero":true,"championship.aero":true,"charter.aero":true,"civilaviation.aero":true,"club.aero":true,"conference.aero":true,"consultant.aero":true,"consulting.aero":true,"control.aero":true,"council.aero":true,"crew.aero":true,"design.aero":true,"dgca.aero":true,"educator.aero":true,"emergency.aero":true,"engine.aero":true,"engineer.aero":true,"entertainment.aero":true,"equipment.aero":true,"exchange.aero":true,"express.aero":true,"federation.aero":true,"flight.aero":true,"freight.aero":true,"fuel.aero":true,"gliding.aero":true,"government.aero":true,"groundhandling.aero":true,"group.aero":true,"hanggliding.aero":true,"homebuilt.aero":true,"insurance.aero":true,"journal.aero":true,"journalist.aero":true,"leasing.aero":true,"logistics.aero":true,"magazine.aero":true,"maintenance.aero":true,"media.aero":true,"microlight.aero":true,"modelling.aero":true,"navigation.aero":true,"parachuting.aero":true,"paragliding.aero":true,"passenger-association.aero":true,"pilot.aero":true,"press.aero":true,"production.aero":true,"recreation.aero":true,"repbody.aero":true,"res.aero":true,"research.aero":true,"rotorcraft.aero":true,"safety.aero":true,"scientist.aero":true,"services.aero":true,"show.aero":true,"skydiving.aero":true,"software.aero":true,"student.aero":true,"trader.aero":true,"trading.aero":true,"trainer.aero":true,"union.aero":true,"workinggroup.aero":true,"works.aero":true,"af":true,"gov.af":true,"com.af":true,"org.af":true,"net.af":true,"edu.af":true,"ag":true,"com.ag":true,"org.ag":true,"net.ag":true,"co.ag":true,"nom.ag":true,"ai":true,"off.ai":true,"com.ai":true,"net.ai":true,"org.ai":true,"al":true,"com.al":true,"edu.al":true,"gov.al":true,"mil.al":true,"net.al":true,"org.al":true,"am":true,"ao":true,"ed.ao":true,"gv.ao":true,"og.ao":true,"co.ao":true,"pb.ao":true,"it.ao":true,"aq":true,"ar":true,"com.ar":true,"edu.ar":true,"gob.ar":true,"gov.ar":true,"int.ar":true,"mil.ar":true,"musica.ar":true,"net.ar":true,"org.ar":true,"tur.ar":true,"arpa":true,"e164.arpa":true,"in-addr.arpa":true,"ip6.arpa":true,"iris.arpa":true,"uri.arpa":true,"urn.arpa":true,"as":true,"gov.as":true,"asia":true,"at":true,"ac.at":true,"co.at":true,"gv.at":true,"or.at":true,"au":true,"com.au":true,"net.au":true,"org.au":true,"edu.au":true,"gov.au":true,"asn.au":true,"id.au":true,"info.au":true,"conf.au":true,"oz.au":true,"act.au":true,"nsw.au":true,"nt.au":true,"qld.au":true,"sa.au":true,"tas.au":true,"vic.au":true,"wa.au":true,"act.edu.au":true,"nsw.edu.au":true,"nt.edu.au":true,"qld.edu.au":true,"sa.edu.au":true,"tas.edu.au":true,"vic.edu.au":true,"wa.edu.au":true,"qld.gov.au":true,"sa.gov.au":true,"tas.gov.au":true,"vic.gov.au":true,"wa.gov.au":true,"aw":true,"com.aw":true,"ax":true,"az":true,"com.az":true,"net.az":true,"int.az":true,"gov.az":true,"org.az":true,"edu.az":true,"info.az":true,"pp.az":true,"mil.az":true,"name.az":true,"pro.az":true,"biz.az":true,"ba":true,"com.ba":true,"edu.ba":true,"gov.ba":true,"mil.ba":true,"net.ba":true,"org.ba":true,"bb":true,"biz.bb":true,"co.bb":true,"com.bb":true,"edu.bb":true,"gov.bb":true,"info.bb":true,"net.bb":true,"org.bb":true,"store.bb":true,"tv.bb":true,"*.bd":true,"be":true,"ac.be":true,"bf":true,"gov.bf":true,"bg":true,"a.bg":true,"b.bg":true,"c.bg":true,"d.bg":true,"e.bg":true,"f.bg":true,"g.bg":true,"h.bg":true,"i.bg":true,"j.bg":true,"k.bg":true,"l.bg":true,"m.bg":true,"n.bg":true,"o.bg":true,"p.bg":true,"q.bg":true,"r.bg":true,"s.bg":true,"t.bg":true,"u.bg":true,"v.bg":true,"w.bg":true,"x.bg":true,"y.bg":true,"z.bg":true,"0.bg":true,"1.bg":true,"2.bg":true,"3.bg":true,"4.bg":true,"5.bg":true,"6.bg":true,"7.bg":true,"8.bg":true,"9.bg":true,"bh":true,"com.bh":true,"edu.bh":true,"net.bh":true,"org.bh":true,"gov.bh":true,"bi":true,"co.bi":true,"com.bi":true,"edu.bi":true,"or.bi":true,"org.bi":true,"biz":true,"bj":true,"asso.bj":true,"barreau.bj":true,"gouv.bj":true,"bm":true,"com.bm":true,"edu.bm":true,"gov.bm":true,"net.bm":true,"org.bm":true,"*.bn":true,"bo":true,"com.bo":true,"edu.bo":true,"gob.bo":true,"int.bo":true,"org.bo":true,"net.bo":true,"mil.bo":true,"tv.bo":true,"web.bo":true,"academia.bo":true,"agro.bo":true,"arte.bo":true,"blog.bo":true,"bolivia.bo":true,"ciencia.bo":true,"cooperativa.bo":true,"democracia.bo":true,"deporte.bo":true,"ecologia.bo":true,"economia.bo":true,"empresa.bo":true,"indigena.bo":true,"industria.bo":true,"info.bo":true,"medicina.bo":true,"movimiento.bo":true,"musica.bo":true,"natural.bo":true,"nombre.bo":true,"noticias.bo":true,"patria.bo":true,"politica.bo":true,"profesional.bo":true,"plurinacional.bo":true,"pueblo.bo":true,"revista.bo":true,"salud.bo":true,"tecnologia.bo":true,"tksat.bo":true,"transporte.bo":true,"wiki.bo":true,"br":true,"9guacu.br":true,"abc.br":true,"adm.br":true,"adv.br":true,"agr.br":true,"aju.br":true,"am.br":true,"anani.br":true,"aparecida.br":true,"arq.br":true,"art.br":true,"ato.br":true,"b.br":true,"belem.br":true,"bhz.br":true,"bio.br":true,"blog.br":true,"bmd.br":true,"boavista.br":true,"bsb.br":true,"campinagrande.br":true,"campinas.br":true,"caxias.br":true,"cim.br":true,"cng.br":true,"cnt.br":true,"com.br":true,"contagem.br":true,"coop.br":true,"cri.br":true,"cuiaba.br":true,"curitiba.br":true,"def.br":true,"ecn.br":true,"eco.br":true,"edu.br":true,"emp.br":true,"eng.br":true,"esp.br":true,"etc.br":true,"eti.br":true,"far.br":true,"feira.br":true,"flog.br":true,"floripa.br":true,"fm.br":true,"fnd.br":true,"fortal.br":true,"fot.br":true,"foz.br":true,"fst.br":true,"g12.br":true,"ggf.br":true,"goiania.br":true,"gov.br":true,"ac.gov.br":true,"al.gov.br":true,"am.gov.br":true,"ap.gov.br":true,"ba.gov.br":true,"ce.gov.br":true,"df.gov.br":true,"es.gov.br":true,"go.gov.br":true,"ma.gov.br":true,"mg.gov.br":true,"ms.gov.br":true,"mt.gov.br":true,"pa.gov.br":true,"pb.gov.br":true,"pe.gov.br":true,"pi.gov.br":true,"pr.gov.br":true,"rj.gov.br":true,"rn.gov.br":true,"ro.gov.br":true,"rr.gov.br":true,"rs.gov.br":true,"sc.gov.br":true,"se.gov.br":true,"sp.gov.br":true,"to.gov.br":true,"gru.br":true,"imb.br":true,"ind.br":true,"inf.br":true,"jab.br":true,"jampa.br":true,"jdf.br":true,"joinville.br":true,"jor.br":true,"jus.br":true,"leg.br":true,"lel.br":true,"londrina.br":true,"macapa.br":true,"maceio.br":true,"manaus.br":true,"maringa.br":true,"mat.br":true,"med.br":true,"mil.br":true,"morena.br":true,"mp.br":true,"mus.br":true,"natal.br":true,"net.br":true,"niteroi.br":true,"*.nom.br":true,"not.br":true,"ntr.br":true,"odo.br":true,"org.br":true,"osasco.br":true,"palmas.br":true,"poa.br":true,"ppg.br":true,"pro.br":true,"psc.br":true,"psi.br":true,"pvh.br":true,"qsl.br":true,"radio.br":true,"rec.br":true,"recife.br":true,"ribeirao.br":true,"rio.br":true,"riobranco.br":true,"riopreto.br":true,"salvador.br":true,"sampa.br":true,"santamaria.br":true,"santoandre.br":true,"saobernardo.br":true,"saogonca.br":true,"sjc.br":true,"slg.br":true,"slz.br":true,"sorocaba.br":true,"srv.br":true,"taxi.br":true,"teo.br":true,"the.br":true,"tmp.br":true,"trd.br":true,"tur.br":true,"tv.br":true,"udi.br":true,"vet.br":true,"vix.br":true,"vlog.br":true,"wiki.br":true,"zlg.br":true,"bs":true,"com.bs":true,"net.bs":true,"org.bs":true,"edu.bs":true,"gov.bs":true,"bt":true,"com.bt":true,"edu.bt":true,"gov.bt":true,"net.bt":true,"org.bt":true,"bv":true,"bw":true,"co.bw":true,"org.bw":true,"by":true,"gov.by":true,"mil.by":true,"com.by":true,"of.by":true,"bz":true,"com.bz":true,"net.bz":true,"org.bz":true,"edu.bz":true,"gov.bz":true,"ca":true,"ab.ca":true,"bc.ca":true,"mb.ca":true,"nb.ca":true,"nf.ca":true,"nl.ca":true,"ns.ca":true,"nt.ca":true,"nu.ca":true,"on.ca":true,"pe.ca":true,"qc.ca":true,"sk.ca":true,"yk.ca":true,"gc.ca":true,"cat":true,"cc":true,"cd":true,"gov.cd":true,"cf":true,"cg":true,"ch":true,"ci":true,"org.ci":true,"or.ci":true,"com.ci":true,"co.ci":true,"edu.ci":true,"ed.ci":true,"ac.ci":true,"net.ci":true,"go.ci":true,"asso.ci":true,"xn--aroport-bya.ci":true,"int.ci":true,"presse.ci":true,"md.ci":true,"gouv.ci":true,"*.ck":true,"www.ck":false,"cl":true,"gov.cl":true,"gob.cl":true,"co.cl":true,"mil.cl":true,"cm":true,"co.cm":true,"com.cm":true,"gov.cm":true,"net.cm":true,"cn":true,"ac.cn":true,"com.cn":true,"edu.cn":true,"gov.cn":true,"net.cn":true,"org.cn":true,"mil.cn":true,"xn--55qx5d.cn":true,"xn--io0a7i.cn":true,"xn--od0alg.cn":true,"ah.cn":true,"bj.cn":true,"cq.cn":true,"fj.cn":true,"gd.cn":true,"gs.cn":true,"gz.cn":true,"gx.cn":true,"ha.cn":true,"hb.cn":true,"he.cn":true,"hi.cn":true,"hl.cn":true,"hn.cn":true,"jl.cn":true,"js.cn":true,"jx.cn":true,"ln.cn":true,"nm.cn":true,"nx.cn":true,"qh.cn":true,"sc.cn":true,"sd.cn":true,"sh.cn":true,"sn.cn":true,"sx.cn":true,"tj.cn":true,"xj.cn":true,"xz.cn":true,"yn.cn":true,"zj.cn":true,"hk.cn":true,"mo.cn":true,"tw.cn":true,"co":true,"arts.co":true,"com.co":true,"edu.co":true,"firm.co":true,"gov.co":true,"info.co":true,"int.co":true,"mil.co":true,"net.co":true,"nom.co":true,"org.co":true,"rec.co":true,"web.co":true,"com":true,"coop":true,"cr":true,"ac.cr":true,"co.cr":true,"ed.cr":true,"fi.cr":true,"go.cr":true,"or.cr":true,"sa.cr":true,"cu":true,"com.cu":true,"edu.cu":true,"org.cu":true,"net.cu":true,"gov.cu":true,"inf.cu":true,"cv":true,"cw":true,"com.cw":true,"edu.cw":true,"net.cw":true,"org.cw":true,"cx":true,"gov.cx":true,"cy":true,"ac.cy":true,"biz.cy":true,"com.cy":true,"ekloges.cy":true,"gov.cy":true,"ltd.cy":true,"name.cy":true,"net.cy":true,"org.cy":true,"parliament.cy":true,"press.cy":true,"pro.cy":true,"tm.cy":true,"cz":true,"de":true,"dj":true,"dk":true,"dm":true,"com.dm":true,"net.dm":true,"org.dm":true,"edu.dm":true,"gov.dm":true,"do":true,"art.do":true,"com.do":true,"edu.do":true,"gob.do":true,"gov.do":true,"mil.do":true,"net.do":true,"org.do":true,"sld.do":true,"web.do":true,"dz":true,"com.dz":true,"org.dz":true,"net.dz":true,"gov.dz":true,"edu.dz":true,"asso.dz":true,"pol.dz":true,"art.dz":true,"ec":true,"com.ec":true,"info.ec":true,"net.ec":true,"fin.ec":true,"k12.ec":true,"med.ec":true,"pro.ec":true,"org.ec":true,"edu.ec":true,"gov.ec":true,"gob.ec":true,"mil.ec":true,"edu":true,"ee":true,"edu.ee":true,"gov.ee":true,"riik.ee":true,"lib.ee":true,"med.ee":true,"com.ee":true,"pri.ee":true,"aip.ee":true,"org.ee":true,"fie.ee":true,"eg":true,"com.eg":true,"edu.eg":true,"eun.eg":true,"gov.eg":true,"mil.eg":true,"name.eg":true,"net.eg":true,"org.eg":true,"sci.eg":true,"*.er":true,"es":true,"com.es":true,"nom.es":true,"org.es":true,"gob.es":true,"edu.es":true,"et":true,"com.et":true,"gov.et":true,"org.et":true,"edu.et":true,"biz.et":true,"name.et":true,"info.et":true,"net.et":true,"eu":true,"fi":true,"aland.fi":true,"*.fj":true,"*.fk":true,"fm":true,"fo":true,"fr":true,"com.fr":true,"asso.fr":true,"nom.fr":true,"prd.fr":true,"presse.fr":true,"tm.fr":true,"aeroport.fr":true,"assedic.fr":true,"avocat.fr":true,"avoues.fr":true,"cci.fr":true,"chambagri.fr":true,"chirurgiens-dentistes.fr":true,"experts-comptables.fr":true,"geometre-expert.fr":true,"gouv.fr":true,"greta.fr":true,"huissier-justice.fr":true,"medecin.fr":true,"notaires.fr":true,"pharmacien.fr":true,"port.fr":true,"veterinaire.fr":true,"ga":true,"gb":true,"gd":true,"ge":true,"com.ge":true,"edu.ge":true,"gov.ge":true,"org.ge":true,"mil.ge":true,"net.ge":true,"pvt.ge":true,"gf":true,"gg":true,"co.gg":true,"net.gg":true,"org.gg":true,"gh":true,"com.gh":true,"edu.gh":true,"gov.gh":true,"org.gh":true,"mil.gh":true,"gi":true,"com.gi":true,"ltd.gi":true,"gov.gi":true,"mod.gi":true,"edu.gi":true,"org.gi":true,"gl":true,"co.gl":true,"com.gl":true,"edu.gl":true,"net.gl":true,"org.gl":true,"gm":true,"gn":true,"ac.gn":true,"com.gn":true,"edu.gn":true,"gov.gn":true,"org.gn":true,"net.gn":true,"gov":true,"gp":true,"com.gp":true,"net.gp":true,"mobi.gp":true,"edu.gp":true,"org.gp":true,"asso.gp":true,"gq":true,"gr":true,"com.gr":true,"edu.gr":true,"net.gr":true,"org.gr":true,"gov.gr":true,"gs":true,"gt":true,"com.gt":true,"edu.gt":true,"gob.gt":true,"ind.gt":true,"mil.gt":true,"net.gt":true,"org.gt":true,"*.gu":true,"gw":true,"gy":true,"co.gy":true,"com.gy":true,"edu.gy":true,"gov.gy":true,"net.gy":true,"org.gy":true,"hk":true,"com.hk":true,"edu.hk":true,"gov.hk":true,"idv.hk":true,"net.hk":true,"org.hk":true,"xn--55qx5d.hk":true,"xn--wcvs22d.hk":true,"xn--lcvr32d.hk":true,"xn--mxtq1m.hk":true,"xn--gmqw5a.hk":true,"xn--ciqpn.hk":true,"xn--gmq050i.hk":true,"xn--zf0avx.hk":true,"xn--io0a7i.hk":true,"xn--mk0axi.hk":true,"xn--od0alg.hk":true,"xn--od0aq3b.hk":true,"xn--tn0ag.hk":true,"xn--uc0atv.hk":true,"xn--uc0ay4a.hk":true,"hm":true,"hn":true,"com.hn":true,"edu.hn":true,"org.hn":true,"net.hn":true,"mil.hn":true,"gob.hn":true,"hr":true,"iz.hr":true,"from.hr":true,"name.hr":true,"com.hr":true,"ht":true,"com.ht":true,"shop.ht":true,"firm.ht":true,"info.ht":true,"adult.ht":true,"net.ht":true,"pro.ht":true,"org.ht":true,"med.ht":true,"art.ht":true,"coop.ht":true,"pol.ht":true,"asso.ht":true,"edu.ht":true,"rel.ht":true,"gouv.ht":true,"perso.ht":true,"hu":true,"co.hu":true,"info.hu":true,"org.hu":true,"priv.hu":true,"sport.hu":true,"tm.hu":true,"2000.hu":true,"agrar.hu":true,"bolt.hu":true,"casino.hu":true,"city.hu":true,"erotica.hu":true,"erotika.hu":true,"film.hu":true,"forum.hu":true,"games.hu":true,"hotel.hu":true,"ingatlan.hu":true,"jogasz.hu":true,"konyvelo.hu":true,"lakas.hu":true,"media.hu":true,"news.hu":true,"reklam.hu":true,"sex.hu":true,"shop.hu":true,"suli.hu":true,"szex.hu":true,"tozsde.hu":true,"utazas.hu":true,"video.hu":true,"id":true,"ac.id":true,"biz.id":true,"co.id":true,"desa.id":true,"go.id":true,"mil.id":true,"my.id":true,"net.id":true,"or.id":true,"sch.id":true,"web.id":true,"ie":true,"gov.ie":true,"il":true,"ac.il":true,"co.il":true,"gov.il":true,"idf.il":true,"k12.il":true,"muni.il":true,"net.il":true,"org.il":true,"im":true,"ac.im":true,"co.im":true,"com.im":true,"ltd.co.im":true,"net.im":true,"org.im":true,"plc.co.im":true,"tt.im":true,"tv.im":true,"in":true,"co.in":true,"firm.in":true,"net.in":true,"org.in":true,"gen.in":true,"ind.in":true,"nic.in":true,"ac.in":true,"edu.in":true,"res.in":true,"gov.in":true,"mil.in":true,"info":true,"int":true,"eu.int":true,"io":true,"com.io":true,"iq":true,"gov.iq":true,"edu.iq":true,"mil.iq":true,"com.iq":true,"org.iq":true,"net.iq":true,"ir":true,"ac.ir":true,"co.ir":true,"gov.ir":true,"id.ir":true,"net.ir":true,"org.ir":true,"sch.ir":true,"xn--mgba3a4f16a.ir":true,"xn--mgba3a4fra.ir":true,"is":true,"net.is":true,"com.is":true,"edu.is":true,"gov.is":true,"org.is":true,"int.is":true,"it":true,"gov.it":true,"edu.it":true,"abr.it":true,"abruzzo.it":true,"aosta-valley.it":true,"aostavalley.it":true,"bas.it":true,"basilicata.it":true,"cal.it":true,"calabria.it":true,"cam.it":true,"campania.it":true,"emilia-romagna.it":true,"emiliaromagna.it":true,"emr.it":true,"friuli-v-giulia.it":true,"friuli-ve-giulia.it":true,"friuli-vegiulia.it":true,"friuli-venezia-giulia.it":true,"friuli-veneziagiulia.it":true,"friuli-vgiulia.it":true,"friuliv-giulia.it":true,"friulive-giulia.it":true,"friulivegiulia.it":true,"friulivenezia-giulia.it":true,"friuliveneziagiulia.it":true,"friulivgiulia.it":true,"fvg.it":true,"laz.it":true,"lazio.it":true,"lig.it":true,"liguria.it":true,"lom.it":true,"lombardia.it":true,"lombardy.it":true,"lucania.it":true,"mar.it":true,"marche.it":true,"mol.it":true,"molise.it":true,"piedmont.it":true,"piemonte.it":true,"pmn.it":true,"pug.it":true,"puglia.it":true,"sar.it":true,"sardegna.it":true,"sardinia.it":true,"sic.it":true,"sicilia.it":true,"sicily.it":true,"taa.it":true,"tos.it":true,"toscana.it":true,"trentino-a-adige.it":true,"trentino-aadige.it":true,"trentino-alto-adige.it":true,"trentino-altoadige.it":true,"trentino-s-tirol.it":true,"trentino-stirol.it":true,"trentino-sud-tirol.it":true,"trentino-sudtirol.it":true,"trentino-sued-tirol.it":true,"trentino-suedtirol.it":true,"trentinoa-adige.it":true,"trentinoaadige.it":true,"trentinoalto-adige.it":true,"trentinoaltoadige.it":true,"trentinos-tirol.it":true,"trentinostirol.it":true,"trentinosud-tirol.it":true,"trentinosudtirol.it":true,"trentinosued-tirol.it":true,"trentinosuedtirol.it":true,"tuscany.it":true,"umb.it":true,"umbria.it":true,"val-d-aosta.it":true,"val-daosta.it":true,"vald-aosta.it":true,"valdaosta.it":true,"valle-aosta.it":true,"valle-d-aosta.it":true,"valle-daosta.it":true,"valleaosta.it":true,"valled-aosta.it":true,"valledaosta.it":true,"vallee-aoste.it":true,"valleeaoste.it":true,"vao.it":true,"vda.it":true,"ven.it":true,"veneto.it":true,"ag.it":true,"agrigento.it":true,"al.it":true,"alessandria.it":true,"alto-adige.it":true,"altoadige.it":true,"an.it":true,"ancona.it":true,"andria-barletta-trani.it":true,"andria-trani-barletta.it":true,"andriabarlettatrani.it":true,"andriatranibarletta.it":true,"ao.it":true,"aosta.it":true,"aoste.it":true,"ap.it":true,"aq.it":true,"aquila.it":true,"ar.it":true,"arezzo.it":true,"ascoli-piceno.it":true,"ascolipiceno.it":true,"asti.it":true,"at.it":true,"av.it":true,"avellino.it":true,"ba.it":true,"balsan.it":true,"bari.it":true,"barletta-trani-andria.it":true,"barlettatraniandria.it":true,"belluno.it":true,"benevento.it":true,"bergamo.it":true,"bg.it":true,"bi.it":true,"biella.it":true,"bl.it":true,"bn.it":true,"bo.it":true,"bologna.it":true,"bolzano.it":true,"bozen.it":true,"br.it":true,"brescia.it":true,"brindisi.it":true,"bs.it":true,"bt.it":true,"bz.it":true,"ca.it":true,"cagliari.it":true,"caltanissetta.it":true,"campidano-medio.it":true,"campidanomedio.it":true,"campobasso.it":true,"carbonia-iglesias.it":true,"carboniaiglesias.it":true,"carrara-massa.it":true,"carraramassa.it":true,"caserta.it":true,"catania.it":true,"catanzaro.it":true,"cb.it":true,"ce.it":true,"cesena-forli.it":true,"cesenaforli.it":true,"ch.it":true,"chieti.it":true,"ci.it":true,"cl.it":true,"cn.it":true,"co.it":true,"como.it":true,"cosenza.it":true,"cr.it":true,"cremona.it":true,"crotone.it":true,"cs.it":true,"ct.it":true,"cuneo.it":true,"cz.it":true,"dell-ogliastra.it":true,"dellogliastra.it":true,"en.it":true,"enna.it":true,"fc.it":true,"fe.it":true,"fermo.it":true,"ferrara.it":true,"fg.it":true,"fi.it":true,"firenze.it":true,"florence.it":true,"fm.it":true,"foggia.it":true,"forli-cesena.it":true,"forlicesena.it":true,"fr.it":true,"frosinone.it":true,"ge.it":true,"genoa.it":true,"genova.it":true,"go.it":true,"gorizia.it":true,"gr.it":true,"grosseto.it":true,"iglesias-carbonia.it":true,"iglesiascarbonia.it":true,"im.it":true,"imperia.it":true,"is.it":true,"isernia.it":true,"kr.it":true,"la-spezia.it":true,"laquila.it":true,"laspezia.it":true,"latina.it":true,"lc.it":true,"le.it":true,"lecce.it":true,"lecco.it":true,"li.it":true,"livorno.it":true,"lo.it":true,"lodi.it":true,"lt.it":true,"lu.it":true,"lucca.it":true,"macerata.it":true,"mantova.it":true,"massa-carrara.it":true,"massacarrara.it":true,"matera.it":true,"mb.it":true,"mc.it":true,"me.it":true,"medio-campidano.it":true,"mediocampidano.it":true,"messina.it":true,"mi.it":true,"milan.it":true,"milano.it":true,"mn.it":true,"mo.it":true,"modena.it":true,"monza-brianza.it":true,"monza-e-della-brianza.it":true,"monza.it":true,"monzabrianza.it":true,"monzaebrianza.it":true,"monzaedellabrianza.it":true,"ms.it":true,"mt.it":true,"na.it":true,"naples.it":true,"napoli.it":true,"no.it":true,"novara.it":true,"nu.it":true,"nuoro.it":true,"og.it":true,"ogliastra.it":true,"olbia-tempio.it":true,"olbiatempio.it":true,"or.it":true,"oristano.it":true,"ot.it":true,"pa.it":true,"padova.it":true,"padua.it":true,"palermo.it":true,"parma.it":true,"pavia.it":true,"pc.it":true,"pd.it":true,"pe.it":true,"perugia.it":true,"pesaro-urbino.it":true,"pesarourbino.it":true,"pescara.it":true,"pg.it":true,"pi.it":true,"piacenza.it":true,"pisa.it":true,"pistoia.it":true,"pn.it":true,"po.it":true,"pordenone.it":true,"potenza.it":true,"pr.it":true,"prato.it":true,"pt.it":true,"pu.it":true,"pv.it":true,"pz.it":true,"ra.it":true,"ragusa.it":true,"ravenna.it":true,"rc.it":true,"re.it":true,"reggio-calabria.it":true,"reggio-emilia.it":true,"reggiocalabria.it":true,"reggioemilia.it":true,"rg.it":true,"ri.it":true,"rieti.it":true,"rimini.it":true,"rm.it":true,"rn.it":true,"ro.it":true,"roma.it":true,"rome.it":true,"rovigo.it":true,"sa.it":true,"salerno.it":true,"sassari.it":true,"savona.it":true,"si.it":true,"siena.it":true,"siracusa.it":true,"so.it":true,"sondrio.it":true,"sp.it":true,"sr.it":true,"ss.it":true,"suedtirol.it":true,"sv.it":true,"ta.it":true,"taranto.it":true,"te.it":true,"tempio-olbia.it":true,"tempioolbia.it":true,"teramo.it":true,"terni.it":true,"tn.it":true,"to.it":true,"torino.it":true,"tp.it":true,"tr.it":true,"trani-andria-barletta.it":true,"trani-barletta-andria.it":true,"traniandriabarletta.it":true,"tranibarlettaandria.it":true,"trapani.it":true,"trentino.it":true,"trento.it":true,"treviso.it":true,"trieste.it":true,"ts.it":true,"turin.it":true,"tv.it":true,"ud.it":true,"udine.it":true,"urbino-pesaro.it":true,"urbinopesaro.it":true,"va.it":true,"varese.it":true,"vb.it":true,"vc.it":true,"ve.it":true,"venezia.it":true,"venice.it":true,"verbania.it":true,"vercelli.it":true,"verona.it":true,"vi.it":true,"vibo-valentia.it":true,"vibovalentia.it":true,"vicenza.it":true,"viterbo.it":true,"vr.it":true,"vs.it":true,"vt.it":true,"vv.it":true,"je":true,"co.je":true,"net.je":true,"org.je":true,"*.jm":true,"jo":true,"com.jo":true,"org.jo":true,"net.jo":true,"edu.jo":true,"sch.jo":true,"gov.jo":true,"mil.jo":true,"name.jo":true,"jobs":true,"jp":true,"ac.jp":true,"ad.jp":true,"co.jp":true,"ed.jp":true,"go.jp":true,"gr.jp":true,"lg.jp":true,"ne.jp":true,"or.jp":true,"aichi.jp":true,"akita.jp":true,"aomori.jp":true,"chiba.jp":true,"ehime.jp":true,"fukui.jp":true,"fukuoka.jp":true,"fukushima.jp":true,"gifu.jp":true,"gunma.jp":true,"hiroshima.jp":true,"hokkaido.jp":true,"hyogo.jp":true,"ibaraki.jp":true,"ishikawa.jp":true,"iwate.jp":true,"kagawa.jp":true,"kagoshima.jp":true,"kanagawa.jp":true,"kochi.jp":true,"kumamoto.jp":true,"kyoto.jp":true,"mie.jp":true,"miyagi.jp":true,"miyazaki.jp":true,"nagano.jp":true,"nagasaki.jp":true,"nara.jp":true,"niigata.jp":true,"oita.jp":true,"okayama.jp":true,"okinawa.jp":true,"osaka.jp":true,"saga.jp":true,"saitama.jp":true,"shiga.jp":true,"shimane.jp":true,"shizuoka.jp":true,"tochigi.jp":true,"tokushima.jp":true,"tokyo.jp":true,"tottori.jp":true,"toyama.jp":true,"wakayama.jp":true,"yamagata.jp":true,"yamaguchi.jp":true,"yamanashi.jp":true,"xn--4pvxs.jp":true,"xn--vgu402c.jp":true,"xn--c3s14m.jp":true,"xn--f6qx53a.jp":true,"xn--8pvr4u.jp":true,"xn--uist22h.jp":true,"xn--djrs72d6uy.jp":true,"xn--mkru45i.jp":true,"xn--0trq7p7nn.jp":true,"xn--8ltr62k.jp":true,"xn--2m4a15e.jp":true,"xn--efvn9s.jp":true,"xn--32vp30h.jp":true,"xn--4it797k.jp":true,"xn--1lqs71d.jp":true,"xn--5rtp49c.jp":true,"xn--5js045d.jp":true,"xn--ehqz56n.jp":true,"xn--1lqs03n.jp":true,"xn--qqqt11m.jp":true,"xn--kbrq7o.jp":true,"xn--pssu33l.jp":true,"xn--ntsq17g.jp":true,"xn--uisz3g.jp":true,"xn--6btw5a.jp":true,"xn--1ctwo.jp":true,"xn--6orx2r.jp":true,"xn--rht61e.jp":true,"xn--rht27z.jp":true,"xn--djty4k.jp":true,"xn--nit225k.jp":true,"xn--rht3d.jp":true,"xn--klty5x.jp":true,"xn--kltx9a.jp":true,"xn--kltp7d.jp":true,"xn--uuwu58a.jp":true,"xn--zbx025d.jp":true,"xn--ntso0iqx3a.jp":true,"xn--elqq16h.jp":true,"xn--4it168d.jp":true,"xn--klt787d.jp":true,"xn--rny31h.jp":true,"xn--7t0a264c.jp":true,"xn--5rtq34k.jp":true,"xn--k7yn95e.jp":true,"xn--tor131o.jp":true,"xn--d5qv7z876c.jp":true,"*.kawasaki.jp":true,"*.kitakyushu.jp":true,"*.kobe.jp":true,"*.nagoya.jp":true,"*.sapporo.jp":true,"*.sendai.jp":true,"*.yokohama.jp":true,"city.kawasaki.jp":false,"city.kitakyushu.jp":false,"city.kobe.jp":false,"city.nagoya.jp":false,"city.sapporo.jp":false,"city.sendai.jp":false,"city.yokohama.jp":false,"aisai.aichi.jp":true,"ama.aichi.jp":true,"anjo.aichi.jp":true,"asuke.aichi.jp":true,"chiryu.aichi.jp":true,"chita.aichi.jp":true,"fuso.aichi.jp":true,"gamagori.aichi.jp":true,"handa.aichi.jp":true,"hazu.aichi.jp":true,"hekinan.aichi.jp":true,"higashiura.aichi.jp":true,"ichinomiya.aichi.jp":true,"inazawa.aichi.jp":true,"inuyama.aichi.jp":true,"isshiki.aichi.jp":true,"iwakura.aichi.jp":true,"kanie.aichi.jp":true,"kariya.aichi.jp":true,"kasugai.aichi.jp":true,"kira.aichi.jp":true,"kiyosu.aichi.jp":true,"komaki.aichi.jp":true,"konan.aichi.jp":true,"kota.aichi.jp":true,"mihama.aichi.jp":true,"miyoshi.aichi.jp":true,"nishio.aichi.jp":true,"nisshin.aichi.jp":true,"obu.aichi.jp":true,"oguchi.aichi.jp":true,"oharu.aichi.jp":true,"okazaki.aichi.jp":true,"owariasahi.aichi.jp":true,"seto.aichi.jp":true,"shikatsu.aichi.jp":true,"shinshiro.aichi.jp":true,"shitara.aichi.jp":true,"tahara.aichi.jp":true,"takahama.aichi.jp":true,"tobishima.aichi.jp":true,"toei.aichi.jp":true,"togo.aichi.jp":true,"tokai.aichi.jp":true,"tokoname.aichi.jp":true,"toyoake.aichi.jp":true,"toyohashi.aichi.jp":true,"toyokawa.aichi.jp":true,"toyone.aichi.jp":true,"toyota.aichi.jp":true,"tsushima.aichi.jp":true,"yatomi.aichi.jp":true,"akita.akita.jp":true,"daisen.akita.jp":true,"fujisato.akita.jp":true,"gojome.akita.jp":true,"hachirogata.akita.jp":true,"happou.akita.jp":true,"higashinaruse.akita.jp":true,"honjo.akita.jp":true,"honjyo.akita.jp":true,"ikawa.akita.jp":true,"kamikoani.akita.jp":true,"kamioka.akita.jp":true,"katagami.akita.jp":true,"kazuno.akita.jp":true,"kitaakita.akita.jp":true,"kosaka.akita.jp":true,"kyowa.akita.jp":true,"misato.akita.jp":true,"mitane.akita.jp":true,"moriyoshi.akita.jp":true,"nikaho.akita.jp":true,"noshiro.akita.jp":true,"odate.akita.jp":true,"oga.akita.jp":true,"ogata.akita.jp":true,"semboku.akita.jp":true,"yokote.akita.jp":true,"yurihonjo.akita.jp":true,"aomori.aomori.jp":true,"gonohe.aomori.jp":true,"hachinohe.aomori.jp":true,"hashikami.aomori.jp":true,"hiranai.aomori.jp":true,"hirosaki.aomori.jp":true,"itayanagi.aomori.jp":true,"kuroishi.aomori.jp":true,"misawa.aomori.jp":true,"mutsu.aomori.jp":true,"nakadomari.aomori.jp":true,"noheji.aomori.jp":true,"oirase.aomori.jp":true,"owani.aomori.jp":true,"rokunohe.aomori.jp":true,"sannohe.aomori.jp":true,"shichinohe.aomori.jp":true,"shingo.aomori.jp":true,"takko.aomori.jp":true,"towada.aomori.jp":true,"tsugaru.aomori.jp":true,"tsuruta.aomori.jp":true,"abiko.chiba.jp":true,"asahi.chiba.jp":true,"chonan.chiba.jp":true,"chosei.chiba.jp":true,"choshi.chiba.jp":true,"chuo.chiba.jp":true,"funabashi.chiba.jp":true,"futtsu.chiba.jp":true,"hanamigawa.chiba.jp":true,"ichihara.chiba.jp":true,"ichikawa.chiba.jp":true,"ichinomiya.chiba.jp":true,"inzai.chiba.jp":true,"isumi.chiba.jp":true,"kamagaya.chiba.jp":true,"kamogawa.chiba.jp":true,"kashiwa.chiba.jp":true,"katori.chiba.jp":true,"katsuura.chiba.jp":true,"kimitsu.chiba.jp":true,"kisarazu.chiba.jp":true,"kozaki.chiba.jp":true,"kujukuri.chiba.jp":true,"kyonan.chiba.jp":true,"matsudo.chiba.jp":true,"midori.chiba.jp":true,"mihama.chiba.jp":true,"minamiboso.chiba.jp":true,"mobara.chiba.jp":true,"mutsuzawa.chiba.jp":true,"nagara.chiba.jp":true,"nagareyama.chiba.jp":true,"narashino.chiba.jp":true,"narita.chiba.jp":true,"noda.chiba.jp":true,"oamishirasato.chiba.jp":true,"omigawa.chiba.jp":true,"onjuku.chiba.jp":true,"otaki.chiba.jp":true,"sakae.chiba.jp":true,"sakura.chiba.jp":true,"shimofusa.chiba.jp":true,"shirako.chiba.jp":true,"shiroi.chiba.jp":true,"shisui.chiba.jp":true,"sodegaura.chiba.jp":true,"sosa.chiba.jp":true,"tako.chiba.jp":true,"tateyama.chiba.jp":true,"togane.chiba.jp":true,"tohnosho.chiba.jp":true,"tomisato.chiba.jp":true,"urayasu.chiba.jp":true,"yachimata.chiba.jp":true,"yachiyo.chiba.jp":true,"yokaichiba.chiba.jp":true,"yokoshibahikari.chiba.jp":true,"yotsukaido.chiba.jp":true,"ainan.ehime.jp":true,"honai.ehime.jp":true,"ikata.ehime.jp":true,"imabari.ehime.jp":true,"iyo.ehime.jp":true,"kamijima.ehime.jp":true,"kihoku.ehime.jp":true,"kumakogen.ehime.jp":true,"masaki.ehime.jp":true,"matsuno.ehime.jp":true,"matsuyama.ehime.jp":true,"namikata.ehime.jp":true,"niihama.ehime.jp":true,"ozu.ehime.jp":true,"saijo.ehime.jp":true,"seiyo.ehime.jp":true,"shikokuchuo.ehime.jp":true,"tobe.ehime.jp":true,"toon.ehime.jp":true,"uchiko.ehime.jp":true,"uwajima.ehime.jp":true,"yawatahama.ehime.jp":true,"echizen.fukui.jp":true,"eiheiji.fukui.jp":true,"fukui.fukui.jp":true,"ikeda.fukui.jp":true,"katsuyama.fukui.jp":true,"mihama.fukui.jp":true,"minamiechizen.fukui.jp":true,"obama.fukui.jp":true,"ohi.fukui.jp":true,"ono.fukui.jp":true,"sabae.fukui.jp":true,"sakai.fukui.jp":true,"takahama.fukui.jp":true,"tsuruga.fukui.jp":true,"wakasa.fukui.jp":true,"ashiya.fukuoka.jp":true,"buzen.fukuoka.jp":true,"chikugo.fukuoka.jp":true,"chikuho.fukuoka.jp":true,"chikujo.fukuoka.jp":true,"chikushino.fukuoka.jp":true,"chikuzen.fukuoka.jp":true,"chuo.fukuoka.jp":true,"dazaifu.fukuoka.jp":true,"fukuchi.fukuoka.jp":true,"hakata.fukuoka.jp":true,"higashi.fukuoka.jp":true,"hirokawa.fukuoka.jp":true,"hisayama.fukuoka.jp":true,"iizuka.fukuoka.jp":true,"inatsuki.fukuoka.jp":true,"kaho.fukuoka.jp":true,"kasuga.fukuoka.jp":true,"kasuya.fukuoka.jp":true,"kawara.fukuoka.jp":true,"keisen.fukuoka.jp":true,"koga.fukuoka.jp":true,"kurate.fukuoka.jp":true,"kurogi.fukuoka.jp":true,"kurume.fukuoka.jp":true,"minami.fukuoka.jp":true,"miyako.fukuoka.jp":true,"miyama.fukuoka.jp":true,"miyawaka.fukuoka.jp":true,"mizumaki.fukuoka.jp":true,"munakata.fukuoka.jp":true,"nakagawa.fukuoka.jp":true,"nakama.fukuoka.jp":true,"nishi.fukuoka.jp":true,"nogata.fukuoka.jp":true,"ogori.fukuoka.jp":true,"okagaki.fukuoka.jp":true,"okawa.fukuoka.jp":true,"oki.fukuoka.jp":true,"omuta.fukuoka.jp":true,"onga.fukuoka.jp":true,"onojo.fukuoka.jp":true,"oto.fukuoka.jp":true,"saigawa.fukuoka.jp":true,"sasaguri.fukuoka.jp":true,"shingu.fukuoka.jp":true,"shinyoshitomi.fukuoka.jp":true,"shonai.fukuoka.jp":true,"soeda.fukuoka.jp":true,"sue.fukuoka.jp":true,"tachiarai.fukuoka.jp":true,"tagawa.fukuoka.jp":true,"takata.fukuoka.jp":true,"toho.fukuoka.jp":true,"toyotsu.fukuoka.jp":true,"tsuiki.fukuoka.jp":true,"ukiha.fukuoka.jp":true,"umi.fukuoka.jp":true,"usui.fukuoka.jp":true,"yamada.fukuoka.jp":true,"yame.fukuoka.jp":true,"yanagawa.fukuoka.jp":true,"yukuhashi.fukuoka.jp":true,"aizubange.fukushima.jp":true,"aizumisato.fukushima.jp":true,"aizuwakamatsu.fukushima.jp":true,"asakawa.fukushima.jp":true,"bandai.fukushima.jp":true,"date.fukushima.jp":true,"fukushima.fukushima.jp":true,"furudono.fukushima.jp":true,"futaba.fukushima.jp":true,"hanawa.fukushima.jp":true,"higashi.fukushima.jp":true,"hirata.fukushima.jp":true,"hirono.fukushima.jp":true,"iitate.fukushima.jp":true,"inawashiro.fukushima.jp":true,"ishikawa.fukushima.jp":true,"iwaki.fukushima.jp":true,"izumizaki.fukushima.jp":true,"kagamiishi.fukushima.jp":true,"kaneyama.fukushima.jp":true,"kawamata.fukushima.jp":true,"kitakata.fukushima.jp":true,"kitashiobara.fukushima.jp":true,"koori.fukushima.jp":true,"koriyama.fukushima.jp":true,"kunimi.fukushima.jp":true,"miharu.fukushima.jp":true,"mishima.fukushima.jp":true,"namie.fukushima.jp":true,"nango.fukushima.jp":true,"nishiaizu.fukushima.jp":true,"nishigo.fukushima.jp":true,"okuma.fukushima.jp":true,"omotego.fukushima.jp":true,"ono.fukushima.jp":true,"otama.fukushima.jp":true,"samegawa.fukushima.jp":true,"shimogo.fukushima.jp":true,"shirakawa.fukushima.jp":true,"showa.fukushima.jp":true,"soma.fukushima.jp":true,"sukagawa.fukushima.jp":true,"taishin.fukushima.jp":true,"tamakawa.fukushima.jp":true,"tanagura.fukushima.jp":true,"tenei.fukushima.jp":true,"yabuki.fukushima.jp":true,"yamato.fukushima.jp":true,"yamatsuri.fukushima.jp":true,"yanaizu.fukushima.jp":true,"yugawa.fukushima.jp":true,"anpachi.gifu.jp":true,"ena.gifu.jp":true,"gifu.gifu.jp":true,"ginan.gifu.jp":true,"godo.gifu.jp":true,"gujo.gifu.jp":true,"hashima.gifu.jp":true,"hichiso.gifu.jp":true,"hida.gifu.jp":true,"higashishirakawa.gifu.jp":true,"ibigawa.gifu.jp":true,"ikeda.gifu.jp":true,"kakamigahara.gifu.jp":true,"kani.gifu.jp":true,"kasahara.gifu.jp":true,"kasamatsu.gifu.jp":true,"kawaue.gifu.jp":true,"kitagata.gifu.jp":true,"mino.gifu.jp":true,"minokamo.gifu.jp":true,"mitake.gifu.jp":true,"mizunami.gifu.jp":true,"motosu.gifu.jp":true,"nakatsugawa.gifu.jp":true,"ogaki.gifu.jp":true,"sakahogi.gifu.jp":true,"seki.gifu.jp":true,"sekigahara.gifu.jp":true,"shirakawa.gifu.jp":true,"tajimi.gifu.jp":true,"takayama.gifu.jp":true,"tarui.gifu.jp":true,"toki.gifu.jp":true,"tomika.gifu.jp":true,"wanouchi.gifu.jp":true,"yamagata.gifu.jp":true,"yaotsu.gifu.jp":true,"yoro.gifu.jp":true,"annaka.gunma.jp":true,"chiyoda.gunma.jp":true,"fujioka.gunma.jp":true,"higashiagatsuma.gunma.jp":true,"isesaki.gunma.jp":true,"itakura.gunma.jp":true,"kanna.gunma.jp":true,"kanra.gunma.jp":true,"katashina.gunma.jp":true,"kawaba.gunma.jp":true,"kiryu.gunma.jp":true,"kusatsu.gunma.jp":true,"maebashi.gunma.jp":true,"meiwa.gunma.jp":true,"midori.gunma.jp":true,"minakami.gunma.jp":true,"naganohara.gunma.jp":true,"nakanojo.gunma.jp":true,"nanmoku.gunma.jp":true,"numata.gunma.jp":true,"oizumi.gunma.jp":true,"ora.gunma.jp":true,"ota.gunma.jp":true,"shibukawa.gunma.jp":true,"shimonita.gunma.jp":true,"shinto.gunma.jp":true,"showa.gunma.jp":true,"takasaki.gunma.jp":true,"takayama.gunma.jp":true,"tamamura.gunma.jp":true,"tatebayashi.gunma.jp":true,"tomioka.gunma.jp":true,"tsukiyono.gunma.jp":true,"tsumagoi.gunma.jp":true,"ueno.gunma.jp":true,"yoshioka.gunma.jp":true,"asaminami.hiroshima.jp":true,"daiwa.hiroshima.jp":true,"etajima.hiroshima.jp":true,"fuchu.hiroshima.jp":true,"fukuyama.hiroshima.jp":true,"hatsukaichi.hiroshima.jp":true,"higashihiroshima.hiroshima.jp":true,"hongo.hiroshima.jp":true,"jinsekikogen.hiroshima.jp":true,"kaita.hiroshima.jp":true,"kui.hiroshima.jp":true,"kumano.hiroshima.jp":true,"kure.hiroshima.jp":true,"mihara.hiroshima.jp":true,"miyoshi.hiroshima.jp":true,"naka.hiroshima.jp":true,"onomichi.hiroshima.jp":true,"osakikamijima.hiroshima.jp":true,"otake.hiroshima.jp":true,"saka.hiroshima.jp":true,"sera.hiroshima.jp":true,"seranishi.hiroshima.jp":true,"shinichi.hiroshima.jp":true,"shobara.hiroshima.jp":true,"takehara.hiroshima.jp":true,"abashiri.hokkaido.jp":true,"abira.hokkaido.jp":true,"aibetsu.hokkaido.jp":true,"akabira.hokkaido.jp":true,"akkeshi.hokkaido.jp":true,"asahikawa.hokkaido.jp":true,"ashibetsu.hokkaido.jp":true,"ashoro.hokkaido.jp":true,"assabu.hokkaido.jp":true,"atsuma.hokkaido.jp":true,"bibai.hokkaido.jp":true,"biei.hokkaido.jp":true,"bifuka.hokkaido.jp":true,"bihoro.hokkaido.jp":true,"biratori.hokkaido.jp":true,"chippubetsu.hokkaido.jp":true,"chitose.hokkaido.jp":true,"date.hokkaido.jp":true,"ebetsu.hokkaido.jp":true,"embetsu.hokkaido.jp":true,"eniwa.hokkaido.jp":true,"erimo.hokkaido.jp":true,"esan.hokkaido.jp":true,"esashi.hokkaido.jp":true,"fukagawa.hokkaido.jp":true,"fukushima.hokkaido.jp":true,"furano.hokkaido.jp":true,"furubira.hokkaido.jp":true,"haboro.hokkaido.jp":true,"hakodate.hokkaido.jp":true,"hamatonbetsu.hokkaido.jp":true,"hidaka.hokkaido.jp":true,"higashikagura.hokkaido.jp":true,"higashikawa.hokkaido.jp":true,"hiroo.hokkaido.jp":true,"hokuryu.hokkaido.jp":true,"hokuto.hokkaido.jp":true,"honbetsu.hokkaido.jp":true,"horokanai.hokkaido.jp":true,"horonobe.hokkaido.jp":true,"ikeda.hokkaido.jp":true,"imakane.hokkaido.jp":true,"ishikari.hokkaido.jp":true,"iwamizawa.hokkaido.jp":true,"iwanai.hokkaido.jp":true,"kamifurano.hokkaido.jp":true,"kamikawa.hokkaido.jp":true,"kamishihoro.hokkaido.jp":true,"kamisunagawa.hokkaido.jp":true,"kamoenai.hokkaido.jp":true,"kayabe.hokkaido.jp":true,"kembuchi.hokkaido.jp":true,"kikonai.hokkaido.jp":true,"kimobetsu.hokkaido.jp":true,"kitahiroshima.hokkaido.jp":true,"kitami.hokkaido.jp":true,"kiyosato.hokkaido.jp":true,"koshimizu.hokkaido.jp":true,"kunneppu.hokkaido.jp":true,"kuriyama.hokkaido.jp":true,"kuromatsunai.hokkaido.jp":true,"kushiro.hokkaido.jp":true,"kutchan.hokkaido.jp":true,"kyowa.hokkaido.jp":true,"mashike.hokkaido.jp":true,"matsumae.hokkaido.jp":true,"mikasa.hokkaido.jp":true,"minamifurano.hokkaido.jp":true,"mombetsu.hokkaido.jp":true,"moseushi.hokkaido.jp":true,"mukawa.hokkaido.jp":true,"muroran.hokkaido.jp":true,"naie.hokkaido.jp":true,"nakagawa.hokkaido.jp":true,"nakasatsunai.hokkaido.jp":true,"nakatombetsu.hokkaido.jp":true,"nanae.hokkaido.jp":true,"nanporo.hokkaido.jp":true,"nayoro.hokkaido.jp":true,"nemuro.hokkaido.jp":true,"niikappu.hokkaido.jp":true,"niki.hokkaido.jp":true,"nishiokoppe.hokkaido.jp":true,"noboribetsu.hokkaido.jp":true,"numata.hokkaido.jp":true,"obihiro.hokkaido.jp":true,"obira.hokkaido.jp":true,"oketo.hokkaido.jp":true,"okoppe.hokkaido.jp":true,"otaru.hokkaido.jp":true,"otobe.hokkaido.jp":true,"otofuke.hokkaido.jp":true,"otoineppu.hokkaido.jp":true,"oumu.hokkaido.jp":true,"ozora.hokkaido.jp":true,"pippu.hokkaido.jp":true,"rankoshi.hokkaido.jp":true,"rebun.hokkaido.jp":true,"rikubetsu.hokkaido.jp":true,"rishiri.hokkaido.jp":true,"rishirifuji.hokkaido.jp":true,"saroma.hokkaido.jp":true,"sarufutsu.hokkaido.jp":true,"shakotan.hokkaido.jp":true,"shari.hokkaido.jp":true,"shibecha.hokkaido.jp":true,"shibetsu.hokkaido.jp":true,"shikabe.hokkaido.jp":true,"shikaoi.hokkaido.jp":true,"shimamaki.hokkaido.jp":true,"shimizu.hokkaido.jp":true,"shimokawa.hokkaido.jp":true,"shinshinotsu.hokkaido.jp":true,"shintoku.hokkaido.jp":true,"shiranuka.hokkaido.jp":true,"shiraoi.hokkaido.jp":true,"shiriuchi.hokkaido.jp":true,"sobetsu.hokkaido.jp":true,"sunagawa.hokkaido.jp":true,"taiki.hokkaido.jp":true,"takasu.hokkaido.jp":true,"takikawa.hokkaido.jp":true,"takinoue.hokkaido.jp":true,"teshikaga.hokkaido.jp":true,"tobetsu.hokkaido.jp":true,"tohma.hokkaido.jp":true,"tomakomai.hokkaido.jp":true,"tomari.hokkaido.jp":true,"toya.hokkaido.jp":true,"toyako.hokkaido.jp":true,"toyotomi.hokkaido.jp":true,"toyoura.hokkaido.jp":true,"tsubetsu.hokkaido.jp":true,"tsukigata.hokkaido.jp":true,"urakawa.hokkaido.jp":true,"urausu.hokkaido.jp":true,"uryu.hokkaido.jp":true,"utashinai.hokkaido.jp":true,"wakkanai.hokkaido.jp":true,"wassamu.hokkaido.jp":true,"yakumo.hokkaido.jp":true,"yoichi.hokkaido.jp":true,"aioi.hyogo.jp":true,"akashi.hyogo.jp":true,"ako.hyogo.jp":true,"amagasaki.hyogo.jp":true,"aogaki.hyogo.jp":true,"asago.hyogo.jp":true,"ashiya.hyogo.jp":true,"awaji.hyogo.jp":true,"fukusaki.hyogo.jp":true,"goshiki.hyogo.jp":true,"harima.hyogo.jp":true,"himeji.hyogo.jp":true,"ichikawa.hyogo.jp":true,"inagawa.hyogo.jp":true,"itami.hyogo.jp":true,"kakogawa.hyogo.jp":true,"kamigori.hyogo.jp":true,"kamikawa.hyogo.jp":true,"kasai.hyogo.jp":true,"kasuga.hyogo.jp":true,"kawanishi.hyogo.jp":true,"miki.hyogo.jp":true,"minamiawaji.hyogo.jp":true,"nishinomiya.hyogo.jp":true,"nishiwaki.hyogo.jp":true,"ono.hyogo.jp":true,"sanda.hyogo.jp":true,"sannan.hyogo.jp":true,"sasayama.hyogo.jp":true,"sayo.hyogo.jp":true,"shingu.hyogo.jp":true,"shinonsen.hyogo.jp":true,"shiso.hyogo.jp":true,"sumoto.hyogo.jp":true,"taishi.hyogo.jp":true,"taka.hyogo.jp":true,"takarazuka.hyogo.jp":true,"takasago.hyogo.jp":true,"takino.hyogo.jp":true,"tamba.hyogo.jp":true,"tatsuno.hyogo.jp":true,"toyooka.hyogo.jp":true,"yabu.hyogo.jp":true,"yashiro.hyogo.jp":true,"yoka.hyogo.jp":true,"yokawa.hyogo.jp":true,"ami.ibaraki.jp":true,"asahi.ibaraki.jp":true,"bando.ibaraki.jp":true,"chikusei.ibaraki.jp":true,"daigo.ibaraki.jp":true,"fujishiro.ibaraki.jp":true,"hitachi.ibaraki.jp":true,"hitachinaka.ibaraki.jp":true,"hitachiomiya.ibaraki.jp":true,"hitachiota.ibaraki.jp":true,"ibaraki.ibaraki.jp":true,"ina.ibaraki.jp":true,"inashiki.ibaraki.jp":true,"itako.ibaraki.jp":true,"iwama.ibaraki.jp":true,"joso.ibaraki.jp":true,"kamisu.ibaraki.jp":true,"kasama.ibaraki.jp":true,"kashima.ibaraki.jp":true,"kasumigaura.ibaraki.jp":true,"koga.ibaraki.jp":true,"miho.ibaraki.jp":true,"mito.ibaraki.jp":true,"moriya.ibaraki.jp":true,"naka.ibaraki.jp":true,"namegata.ibaraki.jp":true,"oarai.ibaraki.jp":true,"ogawa.ibaraki.jp":true,"omitama.ibaraki.jp":true,"ryugasaki.ibaraki.jp":true,"sakai.ibaraki.jp":true,"sakuragawa.ibaraki.jp":true,"shimodate.ibaraki.jp":true,"shimotsuma.ibaraki.jp":true,"shirosato.ibaraki.jp":true,"sowa.ibaraki.jp":true,"suifu.ibaraki.jp":true,"takahagi.ibaraki.jp":true,"tamatsukuri.ibaraki.jp":true,"tokai.ibaraki.jp":true,"tomobe.ibaraki.jp":true,"tone.ibaraki.jp":true,"toride.ibaraki.jp":true,"tsuchiura.ibaraki.jp":true,"tsukuba.ibaraki.jp":true,"uchihara.ibaraki.jp":true,"ushiku.ibaraki.jp":true,"yachiyo.ibaraki.jp":true,"yamagata.ibaraki.jp":true,"yawara.ibaraki.jp":true,"yuki.ibaraki.jp":true,"anamizu.ishikawa.jp":true,"hakui.ishikawa.jp":true,"hakusan.ishikawa.jp":true,"kaga.ishikawa.jp":true,"kahoku.ishikawa.jp":true,"kanazawa.ishikawa.jp":true,"kawakita.ishikawa.jp":true,"komatsu.ishikawa.jp":true,"nakanoto.ishikawa.jp":true,"nanao.ishikawa.jp":true,"nomi.ishikawa.jp":true,"nonoichi.ishikawa.jp":true,"noto.ishikawa.jp":true,"shika.ishikawa.jp":true,"suzu.ishikawa.jp":true,"tsubata.ishikawa.jp":true,"tsurugi.ishikawa.jp":true,"uchinada.ishikawa.jp":true,"wajima.ishikawa.jp":true,"fudai.iwate.jp":true,"fujisawa.iwate.jp":true,"hanamaki.iwate.jp":true,"hiraizumi.iwate.jp":true,"hirono.iwate.jp":true,"ichinohe.iwate.jp":true,"ichinoseki.iwate.jp":true,"iwaizumi.iwate.jp":true,"iwate.iwate.jp":true,"joboji.iwate.jp":true,"kamaishi.iwate.jp":true,"kanegasaki.iwate.jp":true,"karumai.iwate.jp":true,"kawai.iwate.jp":true,"kitakami.iwate.jp":true,"kuji.iwate.jp":true,"kunohe.iwate.jp":true,"kuzumaki.iwate.jp":true,"miyako.iwate.jp":true,"mizusawa.iwate.jp":true,"morioka.iwate.jp":true,"ninohe.iwate.jp":true,"noda.iwate.jp":true,"ofunato.iwate.jp":true,"oshu.iwate.jp":true,"otsuchi.iwate.jp":true,"rikuzentakata.iwate.jp":true,"shiwa.iwate.jp":true,"shizukuishi.iwate.jp":true,"sumita.iwate.jp":true,"tanohata.iwate.jp":true,"tono.iwate.jp":true,"yahaba.iwate.jp":true,"yamada.iwate.jp":true,"ayagawa.kagawa.jp":true,"higashikagawa.kagawa.jp":true,"kanonji.kagawa.jp":true,"kotohira.kagawa.jp":true,"manno.kagawa.jp":true,"marugame.kagawa.jp":true,"mitoyo.kagawa.jp":true,"naoshima.kagawa.jp":true,"sanuki.kagawa.jp":true,"tadotsu.kagawa.jp":true,"takamatsu.kagawa.jp":true,"tonosho.kagawa.jp":true,"uchinomi.kagawa.jp":true,"utazu.kagawa.jp":true,"zentsuji.kagawa.jp":true,"akune.kagoshima.jp":true,"amami.kagoshima.jp":true,"hioki.kagoshima.jp":true,"isa.kagoshima.jp":true,"isen.kagoshima.jp":true,"izumi.kagoshima.jp":true,"kagoshima.kagoshima.jp":true,"kanoya.kagoshima.jp":true,"kawanabe.kagoshima.jp":true,"kinko.kagoshima.jp":true,"kouyama.kagoshima.jp":true,"makurazaki.kagoshima.jp":true,"matsumoto.kagoshima.jp":true,"minamitane.kagoshima.jp":true,"nakatane.kagoshima.jp":true,"nishinoomote.kagoshima.jp":true,"satsumasendai.kagoshima.jp":true,"soo.kagoshima.jp":true,"tarumizu.kagoshima.jp":true,"yusui.kagoshima.jp":true,"aikawa.kanagawa.jp":true,"atsugi.kanagawa.jp":true,"ayase.kanagawa.jp":true,"chigasaki.kanagawa.jp":true,"ebina.kanagawa.jp":true,"fujisawa.kanagawa.jp":true,"hadano.kanagawa.jp":true,"hakone.kanagawa.jp":true,"hiratsuka.kanagawa.jp":true,"isehara.kanagawa.jp":true,"kaisei.kanagawa.jp":true,"kamakura.kanagawa.jp":true,"kiyokawa.kanagawa.jp":true,"matsuda.kanagawa.jp":true,"minamiashigara.kanagawa.jp":true,"miura.kanagawa.jp":true,"nakai.kanagawa.jp":true,"ninomiya.kanagawa.jp":true,"odawara.kanagawa.jp":true,"oi.kanagawa.jp":true,"oiso.kanagawa.jp":true,"sagamihara.kanagawa.jp":true,"samukawa.kanagawa.jp":true,"tsukui.kanagawa.jp":true,"yamakita.kanagawa.jp":true,"yamato.kanagawa.jp":true,"yokosuka.kanagawa.jp":true,"yugawara.kanagawa.jp":true,"zama.kanagawa.jp":true,"zushi.kanagawa.jp":true,"aki.kochi.jp":true,"geisei.kochi.jp":true,"hidaka.kochi.jp":true,"higashitsuno.kochi.jp":true,"ino.kochi.jp":true,"kagami.kochi.jp":true,"kami.kochi.jp":true,"kitagawa.kochi.jp":true,"kochi.kochi.jp":true,"mihara.kochi.jp":true,"motoyama.kochi.jp":true,"muroto.kochi.jp":true,"nahari.kochi.jp":true,"nakamura.kochi.jp":true,"nankoku.kochi.jp":true,"nishitosa.kochi.jp":true,"niyodogawa.kochi.jp":true,"ochi.kochi.jp":true,"okawa.kochi.jp":true,"otoyo.kochi.jp":true,"otsuki.kochi.jp":true,"sakawa.kochi.jp":true,"sukumo.kochi.jp":true,"susaki.kochi.jp":true,"tosa.kochi.jp":true,"tosashimizu.kochi.jp":true,"toyo.kochi.jp":true,"tsuno.kochi.jp":true,"umaji.kochi.jp":true,"yasuda.kochi.jp":true,"yusuhara.kochi.jp":true,"amakusa.kumamoto.jp":true,"arao.kumamoto.jp":true,"aso.kumamoto.jp":true,"choyo.kumamoto.jp":true,"gyokuto.kumamoto.jp":true,"kamiamakusa.kumamoto.jp":true,"kikuchi.kumamoto.jp":true,"kumamoto.kumamoto.jp":true,"mashiki.kumamoto.jp":true,"mifune.kumamoto.jp":true,"minamata.kumamoto.jp":true,"minamioguni.kumamoto.jp":true,"nagasu.kumamoto.jp":true,"nishihara.kumamoto.jp":true,"oguni.kumamoto.jp":true,"ozu.kumamoto.jp":true,"sumoto.kumamoto.jp":true,"takamori.kumamoto.jp":true,"uki.kumamoto.jp":true,"uto.kumamoto.jp":true,"yamaga.kumamoto.jp":true,"yamato.kumamoto.jp":true,"yatsushiro.kumamoto.jp":true,"ayabe.kyoto.jp":true,"fukuchiyama.kyoto.jp":true,"higashiyama.kyoto.jp":true,"ide.kyoto.jp":true,"ine.kyoto.jp":true,"joyo.kyoto.jp":true,"kameoka.kyoto.jp":true,"kamo.kyoto.jp":true,"kita.kyoto.jp":true,"kizu.kyoto.jp":true,"kumiyama.kyoto.jp":true,"kyotamba.kyoto.jp":true,"kyotanabe.kyoto.jp":true,"kyotango.kyoto.jp":true,"maizuru.kyoto.jp":true,"minami.kyoto.jp":true,"minamiyamashiro.kyoto.jp":true,"miyazu.kyoto.jp":true,"muko.kyoto.jp":true,"nagaokakyo.kyoto.jp":true,"nakagyo.kyoto.jp":true,"nantan.kyoto.jp":true,"oyamazaki.kyoto.jp":true,"sakyo.kyoto.jp":true,"seika.kyoto.jp":true,"tanabe.kyoto.jp":true,"uji.kyoto.jp":true,"ujitawara.kyoto.jp":true,"wazuka.kyoto.jp":true,"yamashina.kyoto.jp":true,"yawata.kyoto.jp":true,"asahi.mie.jp":true,"inabe.mie.jp":true,"ise.mie.jp":true,"kameyama.mie.jp":true,"kawagoe.mie.jp":true,"kiho.mie.jp":true,"kisosaki.mie.jp":true,"kiwa.mie.jp":true,"komono.mie.jp":true,"kumano.mie.jp":true,"kuwana.mie.jp":true,"matsusaka.mie.jp":true,"meiwa.mie.jp":true,"mihama.mie.jp":true,"minamiise.mie.jp":true,"misugi.mie.jp":true,"miyama.mie.jp":true,"nabari.mie.jp":true,"shima.mie.jp":true,"suzuka.mie.jp":true,"tado.mie.jp":true,"taiki.mie.jp":true,"taki.mie.jp":true,"tamaki.mie.jp":true,"toba.mie.jp":true,"tsu.mie.jp":true,"udono.mie.jp":true,"ureshino.mie.jp":true,"watarai.mie.jp":true,"yokkaichi.mie.jp":true,"furukawa.miyagi.jp":true,"higashimatsushima.miyagi.jp":true,"ishinomaki.miyagi.jp":true,"iwanuma.miyagi.jp":true,"kakuda.miyagi.jp":true,"kami.miyagi.jp":true,"kawasaki.miyagi.jp":true,"marumori.miyagi.jp":true,"matsushima.miyagi.jp":true,"minamisanriku.miyagi.jp":true,"misato.miyagi.jp":true,"murata.miyagi.jp":true,"natori.miyagi.jp":true,"ogawara.miyagi.jp":true,"ohira.miyagi.jp":true,"onagawa.miyagi.jp":true,"osaki.miyagi.jp":true,"rifu.miyagi.jp":true,"semine.miyagi.jp":true,"shibata.miyagi.jp":true,"shichikashuku.miyagi.jp":true,"shikama.miyagi.jp":true,"shiogama.miyagi.jp":true,"shiroishi.miyagi.jp":true,"tagajo.miyagi.jp":true,"taiwa.miyagi.jp":true,"tome.miyagi.jp":true,"tomiya.miyagi.jp":true,"wakuya.miyagi.jp":true,"watari.miyagi.jp":true,"yamamoto.miyagi.jp":true,"zao.miyagi.jp":true,"aya.miyazaki.jp":true,"ebino.miyazaki.jp":true,"gokase.miyazaki.jp":true,"hyuga.miyazaki.jp":true,"kadogawa.miyazaki.jp":true,"kawaminami.miyazaki.jp":true,"kijo.miyazaki.jp":true,"kitagawa.miyazaki.jp":true,"kitakata.miyazaki.jp":true,"kitaura.miyazaki.jp":true,"kobayashi.miyazaki.jp":true,"kunitomi.miyazaki.jp":true,"kushima.miyazaki.jp":true,"mimata.miyazaki.jp":true,"miyakonojo.miyazaki.jp":true,"miyazaki.miyazaki.jp":true,"morotsuka.miyazaki.jp":true,"nichinan.miyazaki.jp":true,"nishimera.miyazaki.jp":true,"nobeoka.miyazaki.jp":true,"saito.miyazaki.jp":true,"shiiba.miyazaki.jp":true,"shintomi.miyazaki.jp":true,"takaharu.miyazaki.jp":true,"takanabe.miyazaki.jp":true,"takazaki.miyazaki.jp":true,"tsuno.miyazaki.jp":true,"achi.nagano.jp":true,"agematsu.nagano.jp":true,"anan.nagano.jp":true,"aoki.nagano.jp":true,"asahi.nagano.jp":true,"azumino.nagano.jp":true,"chikuhoku.nagano.jp":true,"chikuma.nagano.jp":true,"chino.nagano.jp":true,"fujimi.nagano.jp":true,"hakuba.nagano.jp":true,"hara.nagano.jp":true,"hiraya.nagano.jp":true,"iida.nagano.jp":true,"iijima.nagano.jp":true,"iiyama.nagano.jp":true,"iizuna.nagano.jp":true,"ikeda.nagano.jp":true,"ikusaka.nagano.jp":true,"ina.nagano.jp":true,"karuizawa.nagano.jp":true,"kawakami.nagano.jp":true,"kiso.nagano.jp":true,"kisofukushima.nagano.jp":true,"kitaaiki.nagano.jp":true,"komagane.nagano.jp":true,"komoro.nagano.jp":true,"matsukawa.nagano.jp":true,"matsumoto.nagano.jp":true,"miasa.nagano.jp":true,"minamiaiki.nagano.jp":true,"minamimaki.nagano.jp":true,"minamiminowa.nagano.jp":true,"minowa.nagano.jp":true,"miyada.nagano.jp":true,"miyota.nagano.jp":true,"mochizuki.nagano.jp":true,"nagano.nagano.jp":true,"nagawa.nagano.jp":true,"nagiso.nagano.jp":true,"nakagawa.nagano.jp":true,"nakano.nagano.jp":true,"nozawaonsen.nagano.jp":true,"obuse.nagano.jp":true,"ogawa.nagano.jp":true,"okaya.nagano.jp":true,"omachi.nagano.jp":true,"omi.nagano.jp":true,"ookuwa.nagano.jp":true,"ooshika.nagano.jp":true,"otaki.nagano.jp":true,"otari.nagano.jp":true,"sakae.nagano.jp":true,"sakaki.nagano.jp":true,"saku.nagano.jp":true,"sakuho.nagano.jp":true,"shimosuwa.nagano.jp":true,"shinanomachi.nagano.jp":true,"shiojiri.nagano.jp":true,"suwa.nagano.jp":true,"suzaka.nagano.jp":true,"takagi.nagano.jp":true,"takamori.nagano.jp":true,"takayama.nagano.jp":true,"tateshina.nagano.jp":true,"tatsuno.nagano.jp":true,"togakushi.nagano.jp":true,"togura.nagano.jp":true,"tomi.nagano.jp":true,"ueda.nagano.jp":true,"wada.nagano.jp":true,"yamagata.nagano.jp":true,"yamanouchi.nagano.jp":true,"yasaka.nagano.jp":true,"yasuoka.nagano.jp":true,"chijiwa.nagasaki.jp":true,"futsu.nagasaki.jp":true,"goto.nagasaki.jp":true,"hasami.nagasaki.jp":true,"hirado.nagasaki.jp":true,"iki.nagasaki.jp":true,"isahaya.nagasaki.jp":true,"kawatana.nagasaki.jp":true,"kuchinotsu.nagasaki.jp":true,"matsuura.nagasaki.jp":true,"nagasaki.nagasaki.jp":true,"obama.nagasaki.jp":true,"omura.nagasaki.jp":true,"oseto.nagasaki.jp":true,"saikai.nagasaki.jp":true,"sasebo.nagasaki.jp":true,"seihi.nagasaki.jp":true,"shimabara.nagasaki.jp":true,"shinkamigoto.nagasaki.jp":true,"togitsu.nagasaki.jp":true,"tsushima.nagasaki.jp":true,"unzen.nagasaki.jp":true,"ando.nara.jp":true,"gose.nara.jp":true,"heguri.nara.jp":true,"higashiyoshino.nara.jp":true,"ikaruga.nara.jp":true,"ikoma.nara.jp":true,"kamikitayama.nara.jp":true,"kanmaki.nara.jp":true,"kashiba.nara.jp":true,"kashihara.nara.jp":true,"katsuragi.nara.jp":true,"kawai.nara.jp":true,"kawakami.nara.jp":true,"kawanishi.nara.jp":true,"koryo.nara.jp":true,"kurotaki.nara.jp":true,"mitsue.nara.jp":true,"miyake.nara.jp":true,"nara.nara.jp":true,"nosegawa.nara.jp":true,"oji.nara.jp":true,"ouda.nara.jp":true,"oyodo.nara.jp":true,"sakurai.nara.jp":true,"sango.nara.jp":true,"shimoichi.nara.jp":true,"shimokitayama.nara.jp":true,"shinjo.nara.jp":true,"soni.nara.jp":true,"takatori.nara.jp":true,"tawaramoto.nara.jp":true,"tenkawa.nara.jp":true,"tenri.nara.jp":true,"uda.nara.jp":true,"yamatokoriyama.nara.jp":true,"yamatotakada.nara.jp":true,"yamazoe.nara.jp":true,"yoshino.nara.jp":true,"aga.niigata.jp":true,"agano.niigata.jp":true,"gosen.niigata.jp":true,"itoigawa.niigata.jp":true,"izumozaki.niigata.jp":true,"joetsu.niigata.jp":true,"kamo.niigata.jp":true,"kariwa.niigata.jp":true,"kashiwazaki.niigata.jp":true,"minamiuonuma.niigata.jp":true,"mitsuke.niigata.jp":true,"muika.niigata.jp":true,"murakami.niigata.jp":true,"myoko.niigata.jp":true,"nagaoka.niigata.jp":true,"niigata.niigata.jp":true,"ojiya.niigata.jp":true,"omi.niigata.jp":true,"sado.niigata.jp":true,"sanjo.niigata.jp":true,"seiro.niigata.jp":true,"seirou.niigata.jp":true,"sekikawa.niigata.jp":true,"shibata.niigata.jp":true,"tagami.niigata.jp":true,"tainai.niigata.jp":true,"tochio.niigata.jp":true,"tokamachi.niigata.jp":true,"tsubame.niigata.jp":true,"tsunan.niigata.jp":true,"uonuma.niigata.jp":true,"yahiko.niigata.jp":true,"yoita.niigata.jp":true,"yuzawa.niigata.jp":true,"beppu.oita.jp":true,"bungoono.oita.jp":true,"bungotakada.oita.jp":true,"hasama.oita.jp":true,"hiji.oita.jp":true,"himeshima.oita.jp":true,"hita.oita.jp":true,"kamitsue.oita.jp":true,"kokonoe.oita.jp":true,"kuju.oita.jp":true,"kunisaki.oita.jp":true,"kusu.oita.jp":true,"oita.oita.jp":true,"saiki.oita.jp":true,"taketa.oita.jp":true,"tsukumi.oita.jp":true,"usa.oita.jp":true,"usuki.oita.jp":true,"yufu.oita.jp":true,"akaiwa.okayama.jp":true,"asakuchi.okayama.jp":true,"bizen.okayama.jp":true,"hayashima.okayama.jp":true,"ibara.okayama.jp":true,"kagamino.okayama.jp":true,"kasaoka.okayama.jp":true,"kibichuo.okayama.jp":true,"kumenan.okayama.jp":true,"kurashiki.okayama.jp":true,"maniwa.okayama.jp":true,"misaki.okayama.jp":true,"nagi.okayama.jp":true,"niimi.okayama.jp":true,"nishiawakura.okayama.jp":true,"okayama.okayama.jp":true,"satosho.okayama.jp":true,"setouchi.okayama.jp":true,"shinjo.okayama.jp":true,"shoo.okayama.jp":true,"soja.okayama.jp":true,"takahashi.okayama.jp":true,"tamano.okayama.jp":true,"tsuyama.okayama.jp":true,"wake.okayama.jp":true,"yakage.okayama.jp":true,"aguni.okinawa.jp":true,"ginowan.okinawa.jp":true,"ginoza.okinawa.jp":true,"gushikami.okinawa.jp":true,"haebaru.okinawa.jp":true,"higashi.okinawa.jp":true,"hirara.okinawa.jp":true,"iheya.okinawa.jp":true,"ishigaki.okinawa.jp":true,"ishikawa.okinawa.jp":true,"itoman.okinawa.jp":true,"izena.okinawa.jp":true,"kadena.okinawa.jp":true,"kin.okinawa.jp":true,"kitadaito.okinawa.jp":true,"kitanakagusuku.okinawa.jp":true,"kumejima.okinawa.jp":true,"kunigami.okinawa.jp":true,"minamidaito.okinawa.jp":true,"motobu.okinawa.jp":true,"nago.okinawa.jp":true,"naha.okinawa.jp":true,"nakagusuku.okinawa.jp":true,"nakijin.okinawa.jp":true,"nanjo.okinawa.jp":true,"nishihara.okinawa.jp":true,"ogimi.okinawa.jp":true,"okinawa.okinawa.jp":true,"onna.okinawa.jp":true,"shimoji.okinawa.jp":true,"taketomi.okinawa.jp":true,"tarama.okinawa.jp":true,"tokashiki.okinawa.jp":true,"tomigusuku.okinawa.jp":true,"tonaki.okinawa.jp":true,"urasoe.okinawa.jp":true,"uruma.okinawa.jp":true,"yaese.okinawa.jp":true,"yomitan.okinawa.jp":true,"yonabaru.okinawa.jp":true,"yonaguni.okinawa.jp":true,"zamami.okinawa.jp":true,"abeno.osaka.jp":true,"chihayaakasaka.osaka.jp":true,"chuo.osaka.jp":true,"daito.osaka.jp":true,"fujiidera.osaka.jp":true,"habikino.osaka.jp":true,"hannan.osaka.jp":true,"higashiosaka.osaka.jp":true,"higashisumiyoshi.osaka.jp":true,"higashiyodogawa.osaka.jp":true,"hirakata.osaka.jp":true,"ibaraki.osaka.jp":true,"ikeda.osaka.jp":true,"izumi.osaka.jp":true,"izumiotsu.osaka.jp":true,"izumisano.osaka.jp":true,"kadoma.osaka.jp":true,"kaizuka.osaka.jp":true,"kanan.osaka.jp":true,"kashiwara.osaka.jp":true,"katano.osaka.jp":true,"kawachinagano.osaka.jp":true,"kishiwada.osaka.jp":true,"kita.osaka.jp":true,"kumatori.osaka.jp":true,"matsubara.osaka.jp":true,"minato.osaka.jp":true,"minoh.osaka.jp":true,"misaki.osaka.jp":true,"moriguchi.osaka.jp":true,"neyagawa.osaka.jp":true,"nishi.osaka.jp":true,"nose.osaka.jp":true,"osakasayama.osaka.jp":true,"sakai.osaka.jp":true,"sayama.osaka.jp":true,"sennan.osaka.jp":true,"settsu.osaka.jp":true,"shijonawate.osaka.jp":true,"shimamoto.osaka.jp":true,"suita.osaka.jp":true,"tadaoka.osaka.jp":true,"taishi.osaka.jp":true,"tajiri.osaka.jp":true,"takaishi.osaka.jp":true,"takatsuki.osaka.jp":true,"tondabayashi.osaka.jp":true,"toyonaka.osaka.jp":true,"toyono.osaka.jp":true,"yao.osaka.jp":true,"ariake.saga.jp":true,"arita.saga.jp":true,"fukudomi.saga.jp":true,"genkai.saga.jp":true,"hamatama.saga.jp":true,"hizen.saga.jp":true,"imari.saga.jp":true,"kamimine.saga.jp":true,"kanzaki.saga.jp":true,"karatsu.saga.jp":true,"kashima.saga.jp":true,"kitagata.saga.jp":true,"kitahata.saga.jp":true,"kiyama.saga.jp":true,"kouhoku.saga.jp":true,"kyuragi.saga.jp":true,"nishiarita.saga.jp":true,"ogi.saga.jp":true,"omachi.saga.jp":true,"ouchi.saga.jp":true,"saga.saga.jp":true,"shiroishi.saga.jp":true,"taku.saga.jp":true,"tara.saga.jp":true,"tosu.saga.jp":true,"yoshinogari.saga.jp":true,"arakawa.saitama.jp":true,"asaka.saitama.jp":true,"chichibu.saitama.jp":true,"fujimi.saitama.jp":true,"fujimino.saitama.jp":true,"fukaya.saitama.jp":true,"hanno.saitama.jp":true,"hanyu.saitama.jp":true,"hasuda.saitama.jp":true,"hatogaya.saitama.jp":true,"hatoyama.saitama.jp":true,"hidaka.saitama.jp":true,"higashichichibu.saitama.jp":true,"higashimatsuyama.saitama.jp":true,"honjo.saitama.jp":true,"ina.saitama.jp":true,"iruma.saitama.jp":true,"iwatsuki.saitama.jp":true,"kamiizumi.saitama.jp":true,"kamikawa.saitama.jp":true,"kamisato.saitama.jp":true,"kasukabe.saitama.jp":true,"kawagoe.saitama.jp":true,"kawaguchi.saitama.jp":true,"kawajima.saitama.jp":true,"kazo.saitama.jp":true,"kitamoto.saitama.jp":true,"koshigaya.saitama.jp":true,"kounosu.saitama.jp":true,"kuki.saitama.jp":true,"kumagaya.saitama.jp":true,"matsubushi.saitama.jp":true,"minano.saitama.jp":true,"misato.saitama.jp":true,"miyashiro.saitama.jp":true,"miyoshi.saitama.jp":true,"moroyama.saitama.jp":true,"nagatoro.saitama.jp":true,"namegawa.saitama.jp":true,"niiza.saitama.jp":true,"ogano.saitama.jp":true,"ogawa.saitama.jp":true,"ogose.saitama.jp":true,"okegawa.saitama.jp":true,"omiya.saitama.jp":true,"otaki.saitama.jp":true,"ranzan.saitama.jp":true,"ryokami.saitama.jp":true,"saitama.saitama.jp":true,"sakado.saitama.jp":true,"satte.saitama.jp":true,"sayama.saitama.jp":true,"shiki.saitama.jp":true,"shiraoka.saitama.jp":true,"soka.saitama.jp":true,"sugito.saitama.jp":true,"toda.saitama.jp":true,"tokigawa.saitama.jp":true,"tokorozawa.saitama.jp":true,"tsurugashima.saitama.jp":true,"urawa.saitama.jp":true,"warabi.saitama.jp":true,"yashio.saitama.jp":true,"yokoze.saitama.jp":true,"yono.saitama.jp":true,"yorii.saitama.jp":true,"yoshida.saitama.jp":true,"yoshikawa.saitama.jp":true,"yoshimi.saitama.jp":true,"aisho.shiga.jp":true,"gamo.shiga.jp":true,"higashiomi.shiga.jp":true,"hikone.shiga.jp":true,"koka.shiga.jp":true,"konan.shiga.jp":true,"kosei.shiga.jp":true,"koto.shiga.jp":true,"kusatsu.shiga.jp":true,"maibara.shiga.jp":true,"moriyama.shiga.jp":true,"nagahama.shiga.jp":true,"nishiazai.shiga.jp":true,"notogawa.shiga.jp":true,"omihachiman.shiga.jp":true,"otsu.shiga.jp":true,"ritto.shiga.jp":true,"ryuoh.shiga.jp":true,"takashima.shiga.jp":true,"takatsuki.shiga.jp":true,"torahime.shiga.jp":true,"toyosato.shiga.jp":true,"yasu.shiga.jp":true,"akagi.shimane.jp":true,"ama.shimane.jp":true,"gotsu.shimane.jp":true,"hamada.shimane.jp":true,"higashiizumo.shimane.jp":true,"hikawa.shimane.jp":true,"hikimi.shimane.jp":true,"izumo.shimane.jp":true,"kakinoki.shimane.jp":true,"masuda.shimane.jp":true,"matsue.shimane.jp":true,"misato.shimane.jp":true,"nishinoshima.shimane.jp":true,"ohda.shimane.jp":true,"okinoshima.shimane.jp":true,"okuizumo.shimane.jp":true,"shimane.shimane.jp":true,"tamayu.shimane.jp":true,"tsuwano.shimane.jp":true,"unnan.shimane.jp":true,"yakumo.shimane.jp":true,"yasugi.shimane.jp":true,"yatsuka.shimane.jp":true,"arai.shizuoka.jp":true,"atami.shizuoka.jp":true,"fuji.shizuoka.jp":true,"fujieda.shizuoka.jp":true,"fujikawa.shizuoka.jp":true,"fujinomiya.shizuoka.jp":true,"fukuroi.shizuoka.jp":true,"gotemba.shizuoka.jp":true,"haibara.shizuoka.jp":true,"hamamatsu.shizuoka.jp":true,"higashiizu.shizuoka.jp":true,"ito.shizuoka.jp":true,"iwata.shizuoka.jp":true,"izu.shizuoka.jp":true,"izunokuni.shizuoka.jp":true,"kakegawa.shizuoka.jp":true,"kannami.shizuoka.jp":true,"kawanehon.shizuoka.jp":true,"kawazu.shizuoka.jp":true,"kikugawa.shizuoka.jp":true,"kosai.shizuoka.jp":true,"makinohara.shizuoka.jp":true,"matsuzaki.shizuoka.jp":true,"minamiizu.shizuoka.jp":true,"mishima.shizuoka.jp":true,"morimachi.shizuoka.jp":true,"nishiizu.shizuoka.jp":true,"numazu.shizuoka.jp":true,"omaezaki.shizuoka.jp":true,"shimada.shizuoka.jp":true,"shimizu.shizuoka.jp":true,"shimoda.shizuoka.jp":true,"shizuoka.shizuoka.jp":true,"susono.shizuoka.jp":true,"yaizu.shizuoka.jp":true,"yoshida.shizuoka.jp":true,"ashikaga.tochigi.jp":true,"bato.tochigi.jp":true,"haga.tochigi.jp":true,"ichikai.tochigi.jp":true,"iwafune.tochigi.jp":true,"kaminokawa.tochigi.jp":true,"kanuma.tochigi.jp":true,"karasuyama.tochigi.jp":true,"kuroiso.tochigi.jp":true,"mashiko.tochigi.jp":true,"mibu.tochigi.jp":true,"moka.tochigi.jp":true,"motegi.tochigi.jp":true,"nasu.tochigi.jp":true,"nasushiobara.tochigi.jp":true,"nikko.tochigi.jp":true,"nishikata.tochigi.jp":true,"nogi.tochigi.jp":true,"ohira.tochigi.jp":true,"ohtawara.tochigi.jp":true,"oyama.tochigi.jp":true,"sakura.tochigi.jp":true,"sano.tochigi.jp":true,"shimotsuke.tochigi.jp":true,"shioya.tochigi.jp":true,"takanezawa.tochigi.jp":true,"tochigi.tochigi.jp":true,"tsuga.tochigi.jp":true,"ujiie.tochigi.jp":true,"utsunomiya.tochigi.jp":true,"yaita.tochigi.jp":true,"aizumi.tokushima.jp":true,"anan.tokushima.jp":true,"ichiba.tokushima.jp":true,"itano.tokushima.jp":true,"kainan.tokushima.jp":true,"komatsushima.tokushima.jp":true,"matsushige.tokushima.jp":true,"mima.tokushima.jp":true,"minami.tokushima.jp":true,"miyoshi.tokushima.jp":true,"mugi.tokushima.jp":true,"nakagawa.tokushima.jp":true,"naruto.tokushima.jp":true,"sanagochi.tokushima.jp":true,"shishikui.tokushima.jp":true,"tokushima.tokushima.jp":true,"wajiki.tokushima.jp":true,"adachi.tokyo.jp":true,"akiruno.tokyo.jp":true,"akishima.tokyo.jp":true,"aogashima.tokyo.jp":true,"arakawa.tokyo.jp":true,"bunkyo.tokyo.jp":true,"chiyoda.tokyo.jp":true,"chofu.tokyo.jp":true,"chuo.tokyo.jp":true,"edogawa.tokyo.jp":true,"fuchu.tokyo.jp":true,"fussa.tokyo.jp":true,"hachijo.tokyo.jp":true,"hachioji.tokyo.jp":true,"hamura.tokyo.jp":true,"higashikurume.tokyo.jp":true,"higashimurayama.tokyo.jp":true,"higashiyamato.tokyo.jp":true,"hino.tokyo.jp":true,"hinode.tokyo.jp":true,"hinohara.tokyo.jp":true,"inagi.tokyo.jp":true,"itabashi.tokyo.jp":true,"katsushika.tokyo.jp":true,"kita.tokyo.jp":true,"kiyose.tokyo.jp":true,"kodaira.tokyo.jp":true,"koganei.tokyo.jp":true,"kokubunji.tokyo.jp":true,"komae.tokyo.jp":true,"koto.tokyo.jp":true,"kouzushima.tokyo.jp":true,"kunitachi.tokyo.jp":true,"machida.tokyo.jp":true,"meguro.tokyo.jp":true,"minato.tokyo.jp":true,"mitaka.tokyo.jp":true,"mizuho.tokyo.jp":true,"musashimurayama.tokyo.jp":true,"musashino.tokyo.jp":true,"nakano.tokyo.jp":true,"nerima.tokyo.jp":true,"ogasawara.tokyo.jp":true,"okutama.tokyo.jp":true,"ome.tokyo.jp":true,"oshima.tokyo.jp":true,"ota.tokyo.jp":true,"setagaya.tokyo.jp":true,"shibuya.tokyo.jp":true,"shinagawa.tokyo.jp":true,"shinjuku.tokyo.jp":true,"suginami.tokyo.jp":true,"sumida.tokyo.jp":true,"tachikawa.tokyo.jp":true,"taito.tokyo.jp":true,"tama.tokyo.jp":true,"toshima.tokyo.jp":true,"chizu.tottori.jp":true,"hino.tottori.jp":true,"kawahara.tottori.jp":true,"koge.tottori.jp":true,"kotoura.tottori.jp":true,"misasa.tottori.jp":true,"nanbu.tottori.jp":true,"nichinan.tottori.jp":true,"sakaiminato.tottori.jp":true,"tottori.tottori.jp":true,"wakasa.tottori.jp":true,"yazu.tottori.jp":true,"yonago.tottori.jp":true,"asahi.toyama.jp":true,"fuchu.toyama.jp":true,"fukumitsu.toyama.jp":true,"funahashi.toyama.jp":true,"himi.toyama.jp":true,"imizu.toyama.jp":true,"inami.toyama.jp":true,"johana.toyama.jp":true,"kamiichi.toyama.jp":true,"kurobe.toyama.jp":true,"nakaniikawa.toyama.jp":true,"namerikawa.toyama.jp":true,"nanto.toyama.jp":true,"nyuzen.toyama.jp":true,"oyabe.toyama.jp":true,"taira.toyama.jp":true,"takaoka.toyama.jp":true,"tateyama.toyama.jp":true,"toga.toyama.jp":true,"tonami.toyama.jp":true,"toyama.toyama.jp":true,"unazuki.toyama.jp":true,"uozu.toyama.jp":true,"yamada.toyama.jp":true,"arida.wakayama.jp":true,"aridagawa.wakayama.jp":true,"gobo.wakayama.jp":true,"hashimoto.wakayama.jp":true,"hidaka.wakayama.jp":true,"hirogawa.wakayama.jp":true,"inami.wakayama.jp":true,"iwade.wakayama.jp":true,"kainan.wakayama.jp":true,"kamitonda.wakayama.jp":true,"katsuragi.wakayama.jp":true,"kimino.wakayama.jp":true,"kinokawa.wakayama.jp":true,"kitayama.wakayama.jp":true,"koya.wakayama.jp":true,"koza.wakayama.jp":true,"kozagawa.wakayama.jp":true,"kudoyama.wakayama.jp":true,"kushimoto.wakayama.jp":true,"mihama.wakayama.jp":true,"misato.wakayama.jp":true,"nachikatsuura.wakayama.jp":true,"shingu.wakayama.jp":true,"shirahama.wakayama.jp":true,"taiji.wakayama.jp":true,"tanabe.wakayama.jp":true,"wakayama.wakayama.jp":true,"yuasa.wakayama.jp":true,"yura.wakayama.jp":true,"asahi.yamagata.jp":true,"funagata.yamagata.jp":true,"higashine.yamagata.jp":true,"iide.yamagata.jp":true,"kahoku.yamagata.jp":true,"kaminoyama.yamagata.jp":true,"kaneyama.yamagata.jp":true,"kawanishi.yamagata.jp":true,"mamurogawa.yamagata.jp":true,"mikawa.yamagata.jp":true,"murayama.yamagata.jp":true,"nagai.yamagata.jp":true,"nakayama.yamagata.jp":true,"nanyo.yamagata.jp":true,"nishikawa.yamagata.jp":true,"obanazawa.yamagata.jp":true,"oe.yamagata.jp":true,"oguni.yamagata.jp":true,"ohkura.yamagata.jp":true,"oishida.yamagata.jp":true,"sagae.yamagata.jp":true,"sakata.yamagata.jp":true,"sakegawa.yamagata.jp":true,"shinjo.yamagata.jp":true,"shirataka.yamagata.jp":true,"shonai.yamagata.jp":true,"takahata.yamagata.jp":true,"tendo.yamagata.jp":true,"tozawa.yamagata.jp":true,"tsuruoka.yamagata.jp":true,"yamagata.yamagata.jp":true,"yamanobe.yamagata.jp":true,"yonezawa.yamagata.jp":true,"yuza.yamagata.jp":true,"abu.yamaguchi.jp":true,"hagi.yamaguchi.jp":true,"hikari.yamaguchi.jp":true,"hofu.yamaguchi.jp":true,"iwakuni.yamaguchi.jp":true,"kudamatsu.yamaguchi.jp":true,"mitou.yamaguchi.jp":true,"nagato.yamaguchi.jp":true,"oshima.yamaguchi.jp":true,"shimonoseki.yamaguchi.jp":true,"shunan.yamaguchi.jp":true,"tabuse.yamaguchi.jp":true,"tokuyama.yamaguchi.jp":true,"toyota.yamaguchi.jp":true,"ube.yamaguchi.jp":true,"yuu.yamaguchi.jp":true,"chuo.yamanashi.jp":true,"doshi.yamanashi.jp":true,"fuefuki.yamanashi.jp":true,"fujikawa.yamanashi.jp":true,"fujikawaguchiko.yamanashi.jp":true,"fujiyoshida.yamanashi.jp":true,"hayakawa.yamanashi.jp":true,"hokuto.yamanashi.jp":true,"ichikawamisato.yamanashi.jp":true,"kai.yamanashi.jp":true,"kofu.yamanashi.jp":true,"koshu.yamanashi.jp":true,"kosuge.yamanashi.jp":true,"minami-alps.yamanashi.jp":true,"minobu.yamanashi.jp":true,"nakamichi.yamanashi.jp":true,"nanbu.yamanashi.jp":true,"narusawa.yamanashi.jp":true,"nirasaki.yamanashi.jp":true,"nishikatsura.yamanashi.jp":true,"oshino.yamanashi.jp":true,"otsuki.yamanashi.jp":true,"showa.yamanashi.jp":true,"tabayama.yamanashi.jp":true,"tsuru.yamanashi.jp":true,"uenohara.yamanashi.jp":true,"yamanakako.yamanashi.jp":true,"yamanashi.yamanashi.jp":true,"ke":true,"ac.ke":true,"co.ke":true,"go.ke":true,"info.ke":true,"me.ke":true,"mobi.ke":true,"ne.ke":true,"or.ke":true,"sc.ke":true,"kg":true,"org.kg":true,"net.kg":true,"com.kg":true,"edu.kg":true,"gov.kg":true,"mil.kg":true,"*.kh":true,"ki":true,"edu.ki":true,"biz.ki":true,"net.ki":true,"org.ki":true,"gov.ki":true,"info.ki":true,"com.ki":true,"km":true,"org.km":true,"nom.km":true,"gov.km":true,"prd.km":true,"tm.km":true,"edu.km":true,"mil.km":true,"ass.km":true,"com.km":true,"coop.km":true,"asso.km":true,"presse.km":true,"medecin.km":true,"notaires.km":true,"pharmaciens.km":true,"veterinaire.km":true,"gouv.km":true,"kn":true,"net.kn":true,"org.kn":true,"edu.kn":true,"gov.kn":true,"kp":true,"com.kp":true,"edu.kp":true,"gov.kp":true,"org.kp":true,"rep.kp":true,"tra.kp":true,"kr":true,"ac.kr":true,"co.kr":true,"es.kr":true,"go.kr":true,"hs.kr":true,"kg.kr":true,"mil.kr":true,"ms.kr":true,"ne.kr":true,"or.kr":true,"pe.kr":true,"re.kr":true,"sc.kr":true,"busan.kr":true,"chungbuk.kr":true,"chungnam.kr":true,"daegu.kr":true,"daejeon.kr":true,"gangwon.kr":true,"gwangju.kr":true,"gyeongbuk.kr":true,"gyeonggi.kr":true,"gyeongnam.kr":true,"incheon.kr":true,"jeju.kr":true,"jeonbuk.kr":true,"jeonnam.kr":true,"seoul.kr":true,"ulsan.kr":true,"*.kw":true,"ky":true,"edu.ky":true,"gov.ky":true,"com.ky":true,"org.ky":true,"net.ky":true,"kz":true,"org.kz":true,"edu.kz":true,"net.kz":true,"gov.kz":true,"mil.kz":true,"com.kz":true,"la":true,"int.la":true,"net.la":true,"info.la":true,"edu.la":true,"gov.la":true,"per.la":true,"com.la":true,"org.la":true,"lb":true,"com.lb":true,"edu.lb":true,"gov.lb":true,"net.lb":true,"org.lb":true,"lc":true,"com.lc":true,"net.lc":true,"co.lc":true,"org.lc":true,"edu.lc":true,"gov.lc":true,"li":true,"lk":true,"gov.lk":true,"sch.lk":true,"net.lk":true,"int.lk":true,"com.lk":true,"org.lk":true,"edu.lk":true,"ngo.lk":true,"soc.lk":true,"web.lk":true,"ltd.lk":true,"assn.lk":true,"grp.lk":true,"hotel.lk":true,"ac.lk":true,"lr":true,"com.lr":true,"edu.lr":true,"gov.lr":true,"org.lr":true,"net.lr":true,"ls":true,"co.ls":true,"org.ls":true,"lt":true,"gov.lt":true,"lu":true,"lv":true,"com.lv":true,"edu.lv":true,"gov.lv":true,"org.lv":true,"mil.lv":true,"id.lv":true,"net.lv":true,"asn.lv":true,"conf.lv":true,"ly":true,"com.ly":true,"net.ly":true,"gov.ly":true,"plc.ly":true,"edu.ly":true,"sch.ly":true,"med.ly":true,"org.ly":true,"id.ly":true,"ma":true,"co.ma":true,"net.ma":true,"gov.ma":true,"org.ma":true,"ac.ma":true,"press.ma":true,"mc":true,"tm.mc":true,"asso.mc":true,"md":true,"me":true,"co.me":true,"net.me":true,"org.me":true,"edu.me":true,"ac.me":true,"gov.me":true,"its.me":true,"priv.me":true,"mg":true,"org.mg":true,"nom.mg":true,"gov.mg":true,"prd.mg":true,"tm.mg":true,"edu.mg":true,"mil.mg":true,"com.mg":true,"co.mg":true,"mh":true,"mil":true,"mk":true,"com.mk":true,"org.mk":true,"net.mk":true,"edu.mk":true,"gov.mk":true,"inf.mk":true,"name.mk":true,"ml":true,"com.ml":true,"edu.ml":true,"gouv.ml":true,"gov.ml":true,"net.ml":true,"org.ml":true,"presse.ml":true,"*.mm":true,"mn":true,"gov.mn":true,"edu.mn":true,"org.mn":true,"mo":true,"com.mo":true,"net.mo":true,"org.mo":true,"edu.mo":true,"gov.mo":true,"mobi":true,"mp":true,"mq":true,"mr":true,"gov.mr":true,"ms":true,"com.ms":true,"edu.ms":true,"gov.ms":true,"net.ms":true,"org.ms":true,"mt":true,"com.mt":true,"edu.mt":true,"net.mt":true,"org.mt":true,"mu":true,"com.mu":true,"net.mu":true,"org.mu":true,"gov.mu":true,"ac.mu":true,"co.mu":true,"or.mu":true,"museum":true,"academy.museum":true,"agriculture.museum":true,"air.museum":true,"airguard.museum":true,"alabama.museum":true,"alaska.museum":true,"amber.museum":true,"ambulance.museum":true,"american.museum":true,"americana.museum":true,"americanantiques.museum":true,"americanart.museum":true,"amsterdam.museum":true,"and.museum":true,"annefrank.museum":true,"anthro.museum":true,"anthropology.museum":true,"antiques.museum":true,"aquarium.museum":true,"arboretum.museum":true,"archaeological.museum":true,"archaeology.museum":true,"architecture.museum":true,"art.museum":true,"artanddesign.museum":true,"artcenter.museum":true,"artdeco.museum":true,"arteducation.museum":true,"artgallery.museum":true,"arts.museum":true,"artsandcrafts.museum":true,"asmatart.museum":true,"assassination.museum":true,"assisi.museum":true,"association.museum":true,"astronomy.museum":true,"atlanta.museum":true,"austin.museum":true,"australia.museum":true,"automotive.museum":true,"aviation.museum":true,"axis.museum":true,"badajoz.museum":true,"baghdad.museum":true,"bahn.museum":true,"bale.museum":true,"baltimore.museum":true,"barcelona.museum":true,"baseball.museum":true,"basel.museum":true,"baths.museum":true,"bauern.museum":true,"beauxarts.museum":true,"beeldengeluid.museum":true,"bellevue.museum":true,"bergbau.museum":true,"berkeley.museum":true,"berlin.museum":true,"bern.museum":true,"bible.museum":true,"bilbao.museum":true,"bill.museum":true,"birdart.museum":true,"birthplace.museum":true,"bonn.museum":true,"boston.museum":true,"botanical.museum":true,"botanicalgarden.museum":true,"botanicgarden.museum":true,"botany.museum":true,"brandywinevalley.museum":true,"brasil.museum":true,"bristol.museum":true,"british.museum":true,"britishcolumbia.museum":true,"broadcast.museum":true,"brunel.museum":true,"brussel.museum":true,"brussels.museum":true,"bruxelles.museum":true,"building.museum":true,"burghof.museum":true,"bus.museum":true,"bushey.museum":true,"cadaques.museum":true,"california.museum":true,"cambridge.museum":true,"can.museum":true,"canada.museum":true,"capebreton.museum":true,"carrier.museum":true,"cartoonart.museum":true,"casadelamoneda.museum":true,"castle.museum":true,"castres.museum":true,"celtic.museum":true,"center.museum":true,"chattanooga.museum":true,"cheltenham.museum":true,"chesapeakebay.museum":true,"chicago.museum":true,"children.museum":true,"childrens.museum":true,"childrensgarden.museum":true,"chiropractic.museum":true,"chocolate.museum":true,"christiansburg.museum":true,"cincinnati.museum":true,"cinema.museum":true,"circus.museum":true,"civilisation.museum":true,"civilization.museum":true,"civilwar.museum":true,"clinton.museum":true,"clock.museum":true,"coal.museum":true,"coastaldefence.museum":true,"cody.museum":true,"coldwar.museum":true,"collection.museum":true,"colonialwilliamsburg.museum":true,"coloradoplateau.museum":true,"columbia.museum":true,"columbus.museum":true,"communication.museum":true,"communications.museum":true,"community.museum":true,"computer.museum":true,"computerhistory.museum":true,"xn--comunicaes-v6a2o.museum":true,"contemporary.museum":true,"contemporaryart.museum":true,"convent.museum":true,"copenhagen.museum":true,"corporation.museum":true,"xn--correios-e-telecomunicaes-ghc29a.museum":true,"corvette.museum":true,"costume.museum":true,"countryestate.museum":true,"county.museum":true,"crafts.museum":true,"cranbrook.museum":true,"creation.museum":true,"cultural.museum":true,"culturalcenter.museum":true,"culture.museum":true,"cyber.museum":true,"cymru.museum":true,"dali.museum":true,"dallas.museum":true,"database.museum":true,"ddr.museum":true,"decorativearts.museum":true,"delaware.museum":true,"delmenhorst.museum":true,"denmark.museum":true,"depot.museum":true,"design.museum":true,"detroit.museum":true,"dinosaur.museum":true,"discovery.museum":true,"dolls.museum":true,"donostia.museum":true,"durham.museum":true,"eastafrica.museum":true,"eastcoast.museum":true,"education.museum":true,"educational.museum":true,"egyptian.museum":true,"eisenbahn.museum":true,"elburg.museum":true,"elvendrell.museum":true,"embroidery.museum":true,"encyclopedic.museum":true,"england.museum":true,"entomology.museum":true,"environment.museum":true,"environmentalconservation.museum":true,"epilepsy.museum":true,"essex.museum":true,"estate.museum":true,"ethnology.museum":true,"exeter.museum":true,"exhibition.museum":true,"family.museum":true,"farm.museum":true,"farmequipment.museum":true,"farmers.museum":true,"farmstead.museum":true,"field.museum":true,"figueres.museum":true,"filatelia.museum":true,"film.museum":true,"fineart.museum":true,"finearts.museum":true,"finland.museum":true,"flanders.museum":true,"florida.museum":true,"force.museum":true,"fortmissoula.museum":true,"fortworth.museum":true,"foundation.museum":true,"francaise.museum":true,"frankfurt.museum":true,"franziskaner.museum":true,"freemasonry.museum":true,"freiburg.museum":true,"fribourg.museum":true,"frog.museum":true,"fundacio.museum":true,"furniture.museum":true,"gallery.museum":true,"garden.museum":true,"gateway.museum":true,"geelvinck.museum":true,"gemological.museum":true,"geology.museum":true,"georgia.museum":true,"giessen.museum":true,"glas.museum":true,"glass.museum":true,"gorge.museum":true,"grandrapids.museum":true,"graz.museum":true,"guernsey.museum":true,"halloffame.museum":true,"hamburg.museum":true,"handson.museum":true,"harvestcelebration.museum":true,"hawaii.museum":true,"health.museum":true,"heimatunduhren.museum":true,"hellas.museum":true,"helsinki.museum":true,"hembygdsforbund.museum":true,"heritage.museum":true,"histoire.museum":true,"historical.museum":true,"historicalsociety.museum":true,"historichouses.museum":true,"historisch.museum":true,"historisches.museum":true,"history.museum":true,"historyofscience.museum":true,"horology.museum":true,"house.museum":true,"humanities.museum":true,"illustration.museum":true,"imageandsound.museum":true,"indian.museum":true,"indiana.museum":true,"indianapolis.museum":true,"indianmarket.museum":true,"intelligence.museum":true,"interactive.museum":true,"iraq.museum":true,"iron.museum":true,"isleofman.museum":true,"jamison.museum":true,"jefferson.museum":true,"jerusalem.museum":true,"jewelry.museum":true,"jewish.museum":true,"jewishart.museum":true,"jfk.museum":true,"journalism.museum":true,"judaica.museum":true,"judygarland.museum":true,"juedisches.museum":true,"juif.museum":true,"karate.museum":true,"karikatur.museum":true,"kids.museum":true,"koebenhavn.museum":true,"koeln.museum":true,"kunst.museum":true,"kunstsammlung.museum":true,"kunstunddesign.museum":true,"labor.museum":true,"labour.museum":true,"lajolla.museum":true,"lancashire.museum":true,"landes.museum":true,"lans.museum":true,"xn--lns-qla.museum":true,"larsson.museum":true,"lewismiller.museum":true,"lincoln.museum":true,"linz.museum":true,"living.museum":true,"livinghistory.museum":true,"localhistory.museum":true,"london.museum":true,"losangeles.museum":true,"louvre.museum":true,"loyalist.museum":true,"lucerne.museum":true,"luxembourg.museum":true,"luzern.museum":true,"mad.museum":true,"madrid.museum":true,"mallorca.museum":true,"manchester.museum":true,"mansion.museum":true,"mansions.museum":true,"manx.museum":true,"marburg.museum":true,"maritime.museum":true,"maritimo.museum":true,"maryland.museum":true,"marylhurst.museum":true,"media.museum":true,"medical.museum":true,"medizinhistorisches.museum":true,"meeres.museum":true,"memorial.museum":true,"mesaverde.museum":true,"michigan.museum":true,"midatlantic.museum":true,"military.museum":true,"mill.museum":true,"miners.museum":true,"mining.museum":true,"minnesota.museum":true,"missile.museum":true,"missoula.museum":true,"modern.museum":true,"moma.museum":true,"money.museum":true,"monmouth.museum":true,"monticello.museum":true,"montreal.museum":true,"moscow.museum":true,"motorcycle.museum":true,"muenchen.museum":true,"muenster.museum":true,"mulhouse.museum":true,"muncie.museum":true,"museet.museum":true,"museumcenter.museum":true,"museumvereniging.museum":true,"music.museum":true,"national.museum":true,"nationalfirearms.museum":true,"nationalheritage.museum":true,"nativeamerican.museum":true,"naturalhistory.museum":true,"naturalhistorymuseum.museum":true,"naturalsciences.museum":true,"nature.museum":true,"naturhistorisches.museum":true,"natuurwetenschappen.museum":true,"naumburg.museum":true,"naval.museum":true,"nebraska.museum":true,"neues.museum":true,"newhampshire.museum":true,"newjersey.museum":true,"newmexico.museum":true,"newport.museum":true,"newspaper.museum":true,"newyork.museum":true,"niepce.museum":true,"norfolk.museum":true,"north.museum":true,"nrw.museum":true,"nuernberg.museum":true,"nuremberg.museum":true,"nyc.museum":true,"nyny.museum":true,"oceanographic.museum":true,"oceanographique.museum":true,"omaha.museum":true,"online.museum":true,"ontario.museum":true,"openair.museum":true,"oregon.museum":true,"oregontrail.museum":true,"otago.museum":true,"oxford.museum":true,"pacific.museum":true,"paderborn.museum":true,"palace.museum":true,"paleo.museum":true,"palmsprings.museum":true,"panama.museum":true,"paris.museum":true,"pasadena.museum":true,"pharmacy.museum":true,"philadelphia.museum":true,"philadelphiaarea.museum":true,"philately.museum":true,"phoenix.museum":true,"photography.museum":true,"pilots.museum":true,"pittsburgh.museum":true,"planetarium.museum":true,"plantation.museum":true,"plants.museum":true,"plaza.museum":true,"portal.museum":true,"portland.museum":true,"portlligat.museum":true,"posts-and-telecommunications.museum":true,"preservation.museum":true,"presidio.museum":true,"press.museum":true,"project.museum":true,"public.museum":true,"pubol.museum":true,"quebec.museum":true,"railroad.museum":true,"railway.museum":true,"research.museum":true,"resistance.museum":true,"riodejaneiro.museum":true,"rochester.museum":true,"rockart.museum":true,"roma.museum":true,"russia.museum":true,"saintlouis.museum":true,"salem.museum":true,"salvadordali.museum":true,"salzburg.museum":true,"sandiego.museum":true,"sanfrancisco.museum":true,"santabarbara.museum":true,"santacruz.museum":true,"santafe.museum":true,"saskatchewan.museum":true,"satx.museum":true,"savannahga.museum":true,"schlesisches.museum":true,"schoenbrunn.museum":true,"schokoladen.museum":true,"school.museum":true,"schweiz.museum":true,"science.museum":true,"scienceandhistory.museum":true,"scienceandindustry.museum":true,"sciencecenter.museum":true,"sciencecenters.museum":true,"science-fiction.museum":true,"sciencehistory.museum":true,"sciences.museum":true,"sciencesnaturelles.museum":true,"scotland.museum":true,"seaport.museum":true,"settlement.museum":true,"settlers.museum":true,"shell.museum":true,"sherbrooke.museum":true,"sibenik.museum":true,"silk.museum":true,"ski.museum":true,"skole.museum":true,"society.museum":true,"sologne.museum":true,"soundandvision.museum":true,"southcarolina.museum":true,"southwest.museum":true,"space.museum":true,"spy.museum":true,"square.museum":true,"stadt.museum":true,"stalbans.museum":true,"starnberg.museum":true,"state.museum":true,"stateofdelaware.museum":true,"station.museum":true,"steam.museum":true,"steiermark.museum":true,"stjohn.museum":true,"stockholm.museum":true,"stpetersburg.museum":true,"stuttgart.museum":true,"suisse.museum":true,"surgeonshall.museum":true,"surrey.museum":true,"svizzera.museum":true,"sweden.museum":true,"sydney.museum":true,"tank.museum":true,"tcm.museum":true,"technology.museum":true,"telekommunikation.museum":true,"television.museum":true,"texas.museum":true,"textile.museum":true,"theater.museum":true,"time.museum":true,"timekeeping.museum":true,"topology.museum":true,"torino.museum":true,"touch.museum":true,"town.museum":true,"transport.museum":true,"tree.museum":true,"trolley.museum":true,"trust.museum":true,"trustee.museum":true,"uhren.museum":true,"ulm.museum":true,"undersea.museum":true,"university.museum":true,"usa.museum":true,"usantiques.museum":true,"usarts.museum":true,"uscountryestate.museum":true,"usculture.museum":true,"usdecorativearts.museum":true,"usgarden.museum":true,"ushistory.museum":true,"ushuaia.museum":true,"uslivinghistory.museum":true,"utah.museum":true,"uvic.museum":true,"valley.museum":true,"vantaa.museum":true,"versailles.museum":true,"viking.museum":true,"village.museum":true,"virginia.museum":true,"virtual.museum":true,"virtuel.museum":true,"vlaanderen.museum":true,"volkenkunde.museum":true,"wales.museum":true,"wallonie.museum":true,"war.museum":true,"washingtondc.museum":true,"watchandclock.museum":true,"watch-and-clock.museum":true,"western.museum":true,"westfalen.museum":true,"whaling.museum":true,"wildlife.museum":true,"williamsburg.museum":true,"windmill.museum":true,"workshop.museum":true,"york.museum":true,"yorkshire.museum":true,"yosemite.museum":true,"youth.museum":true,"zoological.museum":true,"zoology.museum":true,"xn--9dbhblg6di.museum":true,"xn--h1aegh.museum":true,"mv":true,"aero.mv":true,"biz.mv":true,"com.mv":true,"coop.mv":true,"edu.mv":true,"gov.mv":true,"info.mv":true,"int.mv":true,"mil.mv":true,"museum.mv":true,"name.mv":true,"net.mv":true,"org.mv":true,"pro.mv":true,"mw":true,"ac.mw":true,"biz.mw":true,"co.mw":true,"com.mw":true,"coop.mw":true,"edu.mw":true,"gov.mw":true,"int.mw":true,"museum.mw":true,"net.mw":true,"org.mw":true,"mx":true,"com.mx":true,"org.mx":true,"gob.mx":true,"edu.mx":true,"net.mx":true,"my":true,"com.my":true,"net.my":true,"org.my":true,"gov.my":true,"edu.my":true,"mil.my":true,"name.my":true,"mz":true,"ac.mz":true,"adv.mz":true,"co.mz":true,"edu.mz":true,"gov.mz":true,"mil.mz":true,"net.mz":true,"org.mz":true,"na":true,"info.na":true,"pro.na":true,"name.na":true,"school.na":true,"or.na":true,"dr.na":true,"us.na":true,"mx.na":true,"ca.na":true,"in.na":true,"cc.na":true,"tv.na":true,"ws.na":true,"mobi.na":true,"co.na":true,"com.na":true,"org.na":true,"name":true,"nc":true,"asso.nc":true,"nom.nc":true,"ne":true,"net":true,"nf":true,"com.nf":true,"net.nf":true,"per.nf":true,"rec.nf":true,"web.nf":true,"arts.nf":true,"firm.nf":true,"info.nf":true,"other.nf":true,"store.nf":true,"ng":true,"com.ng":true,"edu.ng":true,"gov.ng":true,"i.ng":true,"mil.ng":true,"mobi.ng":true,"name.ng":true,"net.ng":true,"org.ng":true,"sch.ng":true,"ni":true,"ac.ni":true,"biz.ni":true,"co.ni":true,"com.ni":true,"edu.ni":true,"gob.ni":true,"in.ni":true,"info.ni":true,"int.ni":true,"mil.ni":true,"net.ni":true,"nom.ni":true,"org.ni":true,"web.ni":true,"nl":true,"bv.nl":true,"no":true,"fhs.no":true,"vgs.no":true,"fylkesbibl.no":true,"folkebibl.no":true,"museum.no":true,"idrett.no":true,"priv.no":true,"mil.no":true,"stat.no":true,"dep.no":true,"kommune.no":true,"herad.no":true,"aa.no":true,"ah.no":true,"bu.no":true,"fm.no":true,"hl.no":true,"hm.no":true,"jan-mayen.no":true,"mr.no":true,"nl.no":true,"nt.no":true,"of.no":true,"ol.no":true,"oslo.no":true,"rl.no":true,"sf.no":true,"st.no":true,"svalbard.no":true,"tm.no":true,"tr.no":true,"va.no":true,"vf.no":true,"gs.aa.no":true,"gs.ah.no":true,"gs.bu.no":true,"gs.fm.no":true,"gs.hl.no":true,"gs.hm.no":true,"gs.jan-mayen.no":true,"gs.mr.no":true,"gs.nl.no":true,"gs.nt.no":true,"gs.of.no":true,"gs.ol.no":true,"gs.oslo.no":true,"gs.rl.no":true,"gs.sf.no":true,"gs.st.no":true,"gs.svalbard.no":true,"gs.tm.no":true,"gs.tr.no":true,"gs.va.no":true,"gs.vf.no":true,"akrehamn.no":true,"xn--krehamn-dxa.no":true,"algard.no":true,"xn--lgrd-poac.no":true,"arna.no":true,"brumunddal.no":true,"bryne.no":true,"bronnoysund.no":true,"xn--brnnysund-m8ac.no":true,"drobak.no":true,"xn--drbak-wua.no":true,"egersund.no":true,"fetsund.no":true,"floro.no":true,"xn--flor-jra.no":true,"fredrikstad.no":true,"hokksund.no":true,"honefoss.no":true,"xn--hnefoss-q1a.no":true,"jessheim.no":true,"jorpeland.no":true,"xn--jrpeland-54a.no":true,"kirkenes.no":true,"kopervik.no":true,"krokstadelva.no":true,"langevag.no":true,"xn--langevg-jxa.no":true,"leirvik.no":true,"mjondalen.no":true,"xn--mjndalen-64a.no":true,"mo-i-rana.no":true,"mosjoen.no":true,"xn--mosjen-eya.no":true,"nesoddtangen.no":true,"orkanger.no":true,"osoyro.no":true,"xn--osyro-wua.no":true,"raholt.no":true,"xn--rholt-mra.no":true,"sandnessjoen.no":true,"xn--sandnessjen-ogb.no":true,"skedsmokorset.no":true,"slattum.no":true,"spjelkavik.no":true,"stathelle.no":true,"stavern.no":true,"stjordalshalsen.no":true,"xn--stjrdalshalsen-sqb.no":true,"tananger.no":true,"tranby.no":true,"vossevangen.no":true,"afjord.no":true,"xn--fjord-lra.no":true,"agdenes.no":true,"al.no":true,"xn--l-1fa.no":true,"alesund.no":true,"xn--lesund-hua.no":true,"alstahaug.no":true,"alta.no":true,"xn--lt-liac.no":true,"alaheadju.no":true,"xn--laheadju-7ya.no":true,"alvdal.no":true,"amli.no":true,"xn--mli-tla.no":true,"amot.no":true,"xn--mot-tla.no":true,"andebu.no":true,"andoy.no":true,"xn--andy-ira.no":true,"andasuolo.no":true,"ardal.no":true,"xn--rdal-poa.no":true,"aremark.no":true,"arendal.no":true,"xn--s-1fa.no":true,"aseral.no":true,"xn--seral-lra.no":true,"asker.no":true,"askim.no":true,"askvoll.no":true,"askoy.no":true,"xn--asky-ira.no":true,"asnes.no":true,"xn--snes-poa.no":true,"audnedaln.no":true,"aukra.no":true,"aure.no":true,"aurland.no":true,"aurskog-holand.no":true,"xn--aurskog-hland-jnb.no":true,"austevoll.no":true,"austrheim.no":true,"averoy.no":true,"xn--avery-yua.no":true,"balestrand.no":true,"ballangen.no":true,"balat.no":true,"xn--blt-elab.no":true,"balsfjord.no":true,"bahccavuotna.no":true,"xn--bhccavuotna-k7a.no":true,"bamble.no":true,"bardu.no":true,"beardu.no":true,"beiarn.no":true,"bajddar.no":true,"xn--bjddar-pta.no":true,"baidar.no":true,"xn--bidr-5nac.no":true,"berg.no":true,"bergen.no":true,"berlevag.no":true,"xn--berlevg-jxa.no":true,"bearalvahki.no":true,"xn--bearalvhki-y4a.no":true,"bindal.no":true,"birkenes.no":true,"bjarkoy.no":true,"xn--bjarky-fya.no":true,"bjerkreim.no":true,"bjugn.no":true,"bodo.no":true,"xn--bod-2na.no":true,"badaddja.no":true,"xn--bdddj-mrabd.no":true,"budejju.no":true,"bokn.no":true,"bremanger.no":true,"bronnoy.no":true,"xn--brnny-wuac.no":true,"bygland.no":true,"bykle.no":true,"barum.no":true,"xn--brum-voa.no":true,"bo.telemark.no":true,"xn--b-5ga.telemark.no":true,"bo.nordland.no":true,"xn--b-5ga.nordland.no":true,"bievat.no":true,"xn--bievt-0qa.no":true,"bomlo.no":true,"xn--bmlo-gra.no":true,"batsfjord.no":true,"xn--btsfjord-9za.no":true,"bahcavuotna.no":true,"xn--bhcavuotna-s4a.no":true,"dovre.no":true,"drammen.no":true,"drangedal.no":true,"dyroy.no":true,"xn--dyry-ira.no":true,"donna.no":true,"xn--dnna-gra.no":true,"eid.no":true,"eidfjord.no":true,"eidsberg.no":true,"eidskog.no":true,"eidsvoll.no":true,"eigersund.no":true,"elverum.no":true,"enebakk.no":true,"engerdal.no":true,"etne.no":true,"etnedal.no":true,"evenes.no":true,"evenassi.no":true,"xn--eveni-0qa01ga.no":true,"evje-og-hornnes.no":true,"farsund.no":true,"fauske.no":true,"fuossko.no":true,"fuoisku.no":true,"fedje.no":true,"fet.no":true,"finnoy.no":true,"xn--finny-yua.no":true,"fitjar.no":true,"fjaler.no":true,"fjell.no":true,"flakstad.no":true,"flatanger.no":true,"flekkefjord.no":true,"flesberg.no":true,"flora.no":true,"fla.no":true,"xn--fl-zia.no":true,"folldal.no":true,"forsand.no":true,"fosnes.no":true,"frei.no":true,"frogn.no":true,"froland.no":true,"frosta.no":true,"frana.no":true,"xn--frna-woa.no":true,"froya.no":true,"xn--frya-hra.no":true,"fusa.no":true,"fyresdal.no":true,"forde.no":true,"xn--frde-gra.no":true,"gamvik.no":true,"gangaviika.no":true,"xn--ggaviika-8ya47h.no":true,"gaular.no":true,"gausdal.no":true,"gildeskal.no":true,"xn--gildeskl-g0a.no":true,"giske.no":true,"gjemnes.no":true,"gjerdrum.no":true,"gjerstad.no":true,"gjesdal.no":true,"gjovik.no":true,"xn--gjvik-wua.no":true,"gloppen.no":true,"gol.no":true,"gran.no":true,"grane.no":true,"granvin.no":true,"gratangen.no":true,"grimstad.no":true,"grong.no":true,"kraanghke.no":true,"xn--kranghke-b0a.no":true,"grue.no":true,"gulen.no":true,"hadsel.no":true,"halden.no":true,"halsa.no":true,"hamar.no":true,"hamaroy.no":true,"habmer.no":true,"xn--hbmer-xqa.no":true,"hapmir.no":true,"xn--hpmir-xqa.no":true,"hammerfest.no":true,"hammarfeasta.no":true,"xn--hmmrfeasta-s4ac.no":true,"haram.no":true,"hareid.no":true,"harstad.no":true,"hasvik.no":true,"aknoluokta.no":true,"xn--koluokta-7ya57h.no":true,"hattfjelldal.no":true,"aarborte.no":true,"haugesund.no":true,"hemne.no":true,"hemnes.no":true,"hemsedal.no":true,"heroy.more-og-romsdal.no":true,"xn--hery-ira.xn--mre-og-romsdal-qqb.no":true,"heroy.nordland.no":true,"xn--hery-ira.nordland.no":true,"hitra.no":true,"hjartdal.no":true,"hjelmeland.no":true,"hobol.no":true,"xn--hobl-ira.no":true,"hof.no":true,"hol.no":true,"hole.no":true,"holmestrand.no":true,"holtalen.no":true,"xn--holtlen-hxa.no":true,"hornindal.no":true,"horten.no":true,"hurdal.no":true,"hurum.no":true,"hvaler.no":true,"hyllestad.no":true,"hagebostad.no":true,"xn--hgebostad-g3a.no":true,"hoyanger.no":true,"xn--hyanger-q1a.no":true,"hoylandet.no":true,"xn--hylandet-54a.no":true,"ha.no":true,"xn--h-2fa.no":true,"ibestad.no":true,"inderoy.no":true,"xn--indery-fya.no":true,"iveland.no":true,"jevnaker.no":true,"jondal.no":true,"jolster.no":true,"xn--jlster-bya.no":true,"karasjok.no":true,"karasjohka.no":true,"xn--krjohka-hwab49j.no":true,"karlsoy.no":true,"galsa.no":true,"xn--gls-elac.no":true,"karmoy.no":true,"xn--karmy-yua.no":true,"kautokeino.no":true,"guovdageaidnu.no":true,"klepp.no":true,"klabu.no":true,"xn--klbu-woa.no":true,"kongsberg.no":true,"kongsvinger.no":true,"kragero.no":true,"xn--krager-gya.no":true,"kristiansand.no":true,"kristiansund.no":true,"krodsherad.no":true,"xn--krdsherad-m8a.no":true,"kvalsund.no":true,"rahkkeravju.no":true,"xn--rhkkervju-01af.no":true,"kvam.no":true,"kvinesdal.no":true,"kvinnherad.no":true,"kviteseid.no":true,"kvitsoy.no":true,"xn--kvitsy-fya.no":true,"kvafjord.no":true,"xn--kvfjord-nxa.no":true,"giehtavuoatna.no":true,"kvanangen.no":true,"xn--kvnangen-k0a.no":true,"navuotna.no":true,"xn--nvuotna-hwa.no":true,"kafjord.no":true,"xn--kfjord-iua.no":true,"gaivuotna.no":true,"xn--givuotna-8ya.no":true,"larvik.no":true,"lavangen.no":true,"lavagis.no":true,"loabat.no":true,"xn--loabt-0qa.no":true,"lebesby.no":true,"davvesiida.no":true,"leikanger.no":true,"leirfjord.no":true,"leka.no":true,"leksvik.no":true,"lenvik.no":true,"leangaviika.no":true,"xn--leagaviika-52b.no":true,"lesja.no":true,"levanger.no":true,"lier.no":true,"lierne.no":true,"lillehammer.no":true,"lillesand.no":true,"lindesnes.no":true,"lindas.no":true,"xn--linds-pra.no":true,"lom.no":true,"loppa.no":true,"lahppi.no":true,"xn--lhppi-xqa.no":true,"lund.no":true,"lunner.no":true,"luroy.no":true,"xn--lury-ira.no":true,"luster.no":true,"lyngdal.no":true,"lyngen.no":true,"ivgu.no":true,"lardal.no":true,"lerdal.no":true,"xn--lrdal-sra.no":true,"lodingen.no":true,"xn--ldingen-q1a.no":true,"lorenskog.no":true,"xn--lrenskog-54a.no":true,"loten.no":true,"xn--lten-gra.no":true,"malvik.no":true,"masoy.no":true,"xn--msy-ula0h.no":true,"muosat.no":true,"xn--muost-0qa.no":true,"mandal.no":true,"marker.no":true,"marnardal.no":true,"masfjorden.no":true,"meland.no":true,"meldal.no":true,"melhus.no":true,"meloy.no":true,"xn--mely-ira.no":true,"meraker.no":true,"xn--merker-kua.no":true,"moareke.no":true,"xn--moreke-jua.no":true,"midsund.no":true,"midtre-gauldal.no":true,"modalen.no":true,"modum.no":true,"molde.no":true,"moskenes.no":true,"moss.no":true,"mosvik.no":true,"malselv.no":true,"xn--mlselv-iua.no":true,"malatvuopmi.no":true,"xn--mlatvuopmi-s4a.no":true,"namdalseid.no":true,"aejrie.no":true,"namsos.no":true,"namsskogan.no":true,"naamesjevuemie.no":true,"xn--nmesjevuemie-tcba.no":true,"laakesvuemie.no":true,"nannestad.no":true,"narvik.no":true,"narviika.no":true,"naustdal.no":true,"nedre-eiker.no":true,"nes.akershus.no":true,"nes.buskerud.no":true,"nesna.no":true,"nesodden.no":true,"nesseby.no":true,"unjarga.no":true,"xn--unjrga-rta.no":true,"nesset.no":true,"nissedal.no":true,"nittedal.no":true,"nord-aurdal.no":true,"nord-fron.no":true,"nord-odal.no":true,"norddal.no":true,"nordkapp.no":true,"davvenjarga.no":true,"xn--davvenjrga-y4a.no":true,"nordre-land.no":true,"nordreisa.no":true,"raisa.no":true,"xn--risa-5na.no":true,"nore-og-uvdal.no":true,"notodden.no":true,"naroy.no":true,"xn--nry-yla5g.no":true,"notteroy.no":true,"xn--nttery-byae.no":true,"odda.no":true,"oksnes.no":true,"xn--ksnes-uua.no":true,"oppdal.no":true,"oppegard.no":true,"xn--oppegrd-ixa.no":true,"orkdal.no":true,"orland.no":true,"xn--rland-uua.no":true,"orskog.no":true,"xn--rskog-uua.no":true,"orsta.no":true,"xn--rsta-fra.no":true,"os.hedmark.no":true,"os.hordaland.no":true,"osen.no":true,"osteroy.no":true,"xn--ostery-fya.no":true,"ostre-toten.no":true,"xn--stre-toten-zcb.no":true,"overhalla.no":true,"ovre-eiker.no":true,"xn--vre-eiker-k8a.no":true,"oyer.no":true,"xn--yer-zna.no":true,"oygarden.no":true,"xn--ygarden-p1a.no":true,"oystre-slidre.no":true,"xn--ystre-slidre-ujb.no":true,"porsanger.no":true,"porsangu.no":true,"xn--porsgu-sta26f.no":true,"porsgrunn.no":true,"radoy.no":true,"xn--rady-ira.no":true,"rakkestad.no":true,"rana.no":true,"ruovat.no":true,"randaberg.no":true,"rauma.no":true,"rendalen.no":true,"rennebu.no":true,"rennesoy.no":true,"xn--rennesy-v1a.no":true,"rindal.no":true,"ringebu.no":true,"ringerike.no":true,"ringsaker.no":true,"rissa.no":true,"risor.no":true,"xn--risr-ira.no":true,"roan.no":true,"rollag.no":true,"rygge.no":true,"ralingen.no":true,"xn--rlingen-mxa.no":true,"rodoy.no":true,"xn--rdy-0nab.no":true,"romskog.no":true,"xn--rmskog-bya.no":true,"roros.no":true,"xn--rros-gra.no":true,"rost.no":true,"xn--rst-0na.no":true,"royken.no":true,"xn--ryken-vua.no":true,"royrvik.no":true,"xn--ryrvik-bya.no":true,"rade.no":true,"xn--rde-ula.no":true,"salangen.no":true,"siellak.no":true,"saltdal.no":true,"salat.no":true,"xn--slt-elab.no":true,"xn--slat-5na.no":true,"samnanger.no":true,"sande.more-og-romsdal.no":true,"sande.xn--mre-og-romsdal-qqb.no":true,"sande.vestfold.no":true,"sandefjord.no":true,"sandnes.no":true,"sandoy.no":true,"xn--sandy-yua.no":true,"sarpsborg.no":true,"sauda.no":true,"sauherad.no":true,"sel.no":true,"selbu.no":true,"selje.no":true,"seljord.no":true,"sigdal.no":true,"siljan.no":true,"sirdal.no":true,"skaun.no":true,"skedsmo.no":true,"ski.no":true,"skien.no":true,"skiptvet.no":true,"skjervoy.no":true,"xn--skjervy-v1a.no":true,"skierva.no":true,"xn--skierv-uta.no":true,"skjak.no":true,"xn--skjk-soa.no":true,"skodje.no":true,"skanland.no":true,"xn--sknland-fxa.no":true,"skanit.no":true,"xn--sknit-yqa.no":true,"smola.no":true,"xn--smla-hra.no":true,"snillfjord.no":true,"snasa.no":true,"xn--snsa-roa.no":true,"snoasa.no":true,"snaase.no":true,"xn--snase-nra.no":true,"sogndal.no":true,"sokndal.no":true,"sola.no":true,"solund.no":true,"songdalen.no":true,"sortland.no":true,"spydeberg.no":true,"stange.no":true,"stavanger.no":true,"steigen.no":true,"steinkjer.no":true,"stjordal.no":true,"xn--stjrdal-s1a.no":true,"stokke.no":true,"stor-elvdal.no":true,"stord.no":true,"stordal.no":true,"storfjord.no":true,"omasvuotna.no":true,"strand.no":true,"stranda.no":true,"stryn.no":true,"sula.no":true,"suldal.no":true,"sund.no":true,"sunndal.no":true,"surnadal.no":true,"sveio.no":true,"svelvik.no":true,"sykkylven.no":true,"sogne.no":true,"xn--sgne-gra.no":true,"somna.no":true,"xn--smna-gra.no":true,"sondre-land.no":true,"xn--sndre-land-0cb.no":true,"sor-aurdal.no":true,"xn--sr-aurdal-l8a.no":true,"sor-fron.no":true,"xn--sr-fron-q1a.no":true,"sor-odal.no":true,"xn--sr-odal-q1a.no":true,"sor-varanger.no":true,"xn--sr-varanger-ggb.no":true,"matta-varjjat.no":true,"xn--mtta-vrjjat-k7af.no":true,"sorfold.no":true,"xn--srfold-bya.no":true,"sorreisa.no":true,"xn--srreisa-q1a.no":true,"sorum.no":true,"xn--srum-gra.no":true,"tana.no":true,"deatnu.no":true,"time.no":true,"tingvoll.no":true,"tinn.no":true,"tjeldsund.no":true,"dielddanuorri.no":true,"tjome.no":true,"xn--tjme-hra.no":true,"tokke.no":true,"tolga.no":true,"torsken.no":true,"tranoy.no":true,"xn--trany-yua.no":true,"tromso.no":true,"xn--troms-zua.no":true,"tromsa.no":true,"romsa.no":true,"trondheim.no":true,"troandin.no":true,"trysil.no":true,"trana.no":true,"xn--trna-woa.no":true,"trogstad.no":true,"xn--trgstad-r1a.no":true,"tvedestrand.no":true,"tydal.no":true,"tynset.no":true,"tysfjord.no":true,"divtasvuodna.no":true,"divttasvuotna.no":true,"tysnes.no":true,"tysvar.no":true,"xn--tysvr-vra.no":true,"tonsberg.no":true,"xn--tnsberg-q1a.no":true,"ullensaker.no":true,"ullensvang.no":true,"ulvik.no":true,"utsira.no":true,"vadso.no":true,"xn--vads-jra.no":true,"cahcesuolo.no":true,"xn--hcesuolo-7ya35b.no":true,"vaksdal.no":true,"valle.no":true,"vang.no":true,"vanylven.no":true,"vardo.no":true,"xn--vard-jra.no":true,"varggat.no":true,"xn--vrggt-xqad.no":true,"vefsn.no":true,"vaapste.no":true,"vega.no":true,"vegarshei.no":true,"xn--vegrshei-c0a.no":true,"vennesla.no":true,"verdal.no":true,"verran.no":true,"vestby.no":true,"vestnes.no":true,"vestre-slidre.no":true,"vestre-toten.no":true,"vestvagoy.no":true,"xn--vestvgy-ixa6o.no":true,"vevelstad.no":true,"vik.no":true,"vikna.no":true,"vindafjord.no":true,"volda.no":true,"voss.no":true,"varoy.no":true,"xn--vry-yla5g.no":true,"vagan.no":true,"xn--vgan-qoa.no":true,"voagat.no":true,"vagsoy.no":true,"xn--vgsy-qoa0j.no":true,"vaga.no":true,"xn--vg-yiab.no":true,"valer.ostfold.no":true,"xn--vler-qoa.xn--stfold-9xa.no":true,"valer.hedmark.no":true,"xn--vler-qoa.hedmark.no":true,"*.np":true,"nr":true,"biz.nr":true,"info.nr":true,"gov.nr":true,"edu.nr":true,"org.nr":true,"net.nr":true,"com.nr":true,"nu":true,"nz":true,"ac.nz":true,"co.nz":true,"cri.nz":true,"geek.nz":true,"gen.nz":true,"govt.nz":true,"health.nz":true,"iwi.nz":true,"kiwi.nz":true,"maori.nz":true,"mil.nz":true,"xn--mori-qsa.nz":true,"net.nz":true,"org.nz":true,"parliament.nz":true,"school.nz":true,"om":true,"co.om":true,"com.om":true,"edu.om":true,"gov.om":true,"med.om":true,"museum.om":true,"net.om":true,"org.om":true,"pro.om":true,"onion":true,"org":true,"pa":true,"ac.pa":true,"gob.pa":true,"com.pa":true,"org.pa":true,"sld.pa":true,"edu.pa":true,"net.pa":true,"ing.pa":true,"abo.pa":true,"med.pa":true,"nom.pa":true,"pe":true,"edu.pe":true,"gob.pe":true,"nom.pe":true,"mil.pe":true,"org.pe":true,"com.pe":true,"net.pe":true,"pf":true,"com.pf":true,"org.pf":true,"edu.pf":true,"*.pg":true,"ph":true,"com.ph":true,"net.ph":true,"org.ph":true,"gov.ph":true,"edu.ph":true,"ngo.ph":true,"mil.ph":true,"i.ph":true,"pk":true,"com.pk":true,"net.pk":true,"edu.pk":true,"org.pk":true,"fam.pk":true,"biz.pk":true,"web.pk":true,"gov.pk":true,"gob.pk":true,"gok.pk":true,"gon.pk":true,"gop.pk":true,"gos.pk":true,"info.pk":true,"pl":true,"com.pl":true,"net.pl":true,"org.pl":true,"aid.pl":true,"agro.pl":true,"atm.pl":true,"auto.pl":true,"biz.pl":true,"edu.pl":true,"gmina.pl":true,"gsm.pl":true,"info.pl":true,"mail.pl":true,"miasta.pl":true,"media.pl":true,"mil.pl":true,"nieruchomosci.pl":true,"nom.pl":true,"pc.pl":true,"powiat.pl":true,"priv.pl":true,"realestate.pl":true,"rel.pl":true,"sex.pl":true,"shop.pl":true,"sklep.pl":true,"sos.pl":true,"szkola.pl":true,"targi.pl":true,"tm.pl":true,"tourism.pl":true,"travel.pl":true,"turystyka.pl":true,"gov.pl":true,"ap.gov.pl":true,"ic.gov.pl":true,"is.gov.pl":true,"us.gov.pl":true,"kmpsp.gov.pl":true,"kppsp.gov.pl":true,"kwpsp.gov.pl":true,"psp.gov.pl":true,"wskr.gov.pl":true,"kwp.gov.pl":true,"mw.gov.pl":true,"ug.gov.pl":true,"um.gov.pl":true,"umig.gov.pl":true,"ugim.gov.pl":true,"upow.gov.pl":true,"uw.gov.pl":true,"starostwo.gov.pl":true,"pa.gov.pl":true,"po.gov.pl":true,"psse.gov.pl":true,"pup.gov.pl":true,"rzgw.gov.pl":true,"sa.gov.pl":true,"so.gov.pl":true,"sr.gov.pl":true,"wsa.gov.pl":true,"sko.gov.pl":true,"uzs.gov.pl":true,"wiih.gov.pl":true,"winb.gov.pl":true,"pinb.gov.pl":true,"wios.gov.pl":true,"witd.gov.pl":true,"wzmiuw.gov.pl":true,"piw.gov.pl":true,"wiw.gov.pl":true,"griw.gov.pl":true,"wif.gov.pl":true,"oum.gov.pl":true,"sdn.gov.pl":true,"zp.gov.pl":true,"uppo.gov.pl":true,"mup.gov.pl":true,"wuoz.gov.pl":true,"konsulat.gov.pl":true,"oirm.gov.pl":true,"augustow.pl":true,"babia-gora.pl":true,"bedzin.pl":true,"beskidy.pl":true,"bialowieza.pl":true,"bialystok.pl":true,"bielawa.pl":true,"bieszczady.pl":true,"boleslawiec.pl":true,"bydgoszcz.pl":true,"bytom.pl":true,"cieszyn.pl":true,"czeladz.pl":true,"czest.pl":true,"dlugoleka.pl":true,"elblag.pl":true,"elk.pl":true,"glogow.pl":true,"gniezno.pl":true,"gorlice.pl":true,"grajewo.pl":true,"ilawa.pl":true,"jaworzno.pl":true,"jelenia-gora.pl":true,"jgora.pl":true,"kalisz.pl":true,"kazimierz-dolny.pl":true,"karpacz.pl":true,"kartuzy.pl":true,"kaszuby.pl":true,"katowice.pl":true,"kepno.pl":true,"ketrzyn.pl":true,"klodzko.pl":true,"kobierzyce.pl":true,"kolobrzeg.pl":true,"konin.pl":true,"konskowola.pl":true,"kutno.pl":true,"lapy.pl":true,"lebork.pl":true,"legnica.pl":true,"lezajsk.pl":true,"limanowa.pl":true,"lomza.pl":true,"lowicz.pl":true,"lubin.pl":true,"lukow.pl":true,"malbork.pl":true,"malopolska.pl":true,"mazowsze.pl":true,"mazury.pl":true,"mielec.pl":true,"mielno.pl":true,"mragowo.pl":true,"naklo.pl":true,"nowaruda.pl":true,"nysa.pl":true,"olawa.pl":true,"olecko.pl":true,"olkusz.pl":true,"olsztyn.pl":true,"opoczno.pl":true,"opole.pl":true,"ostroda.pl":true,"ostroleka.pl":true,"ostrowiec.pl":true,"ostrowwlkp.pl":true,"pila.pl":true,"pisz.pl":true,"podhale.pl":true,"podlasie.pl":true,"polkowice.pl":true,"pomorze.pl":true,"pomorskie.pl":true,"prochowice.pl":true,"pruszkow.pl":true,"przeworsk.pl":true,"pulawy.pl":true,"radom.pl":true,"rawa-maz.pl":true,"rybnik.pl":true,"rzeszow.pl":true,"sanok.pl":true,"sejny.pl":true,"slask.pl":true,"slupsk.pl":true,"sosnowiec.pl":true,"stalowa-wola.pl":true,"skoczow.pl":true,"starachowice.pl":true,"stargard.pl":true,"suwalki.pl":true,"swidnica.pl":true,"swiebodzin.pl":true,"swinoujscie.pl":true,"szczecin.pl":true,"szczytno.pl":true,"tarnobrzeg.pl":true,"tgory.pl":true,"turek.pl":true,"tychy.pl":true,"ustka.pl":true,"walbrzych.pl":true,"warmia.pl":true,"warszawa.pl":true,"waw.pl":true,"wegrow.pl":true,"wielun.pl":true,"wlocl.pl":true,"wloclawek.pl":true,"wodzislaw.pl":true,"wolomin.pl":true,"wroclaw.pl":true,"zachpomor.pl":true,"zagan.pl":true,"zarow.pl":true,"zgora.pl":true,"zgorzelec.pl":true,"pm":true,"pn":true,"gov.pn":true,"co.pn":true,"org.pn":true,"edu.pn":true,"net.pn":true,"post":true,"pr":true,"com.pr":true,"net.pr":true,"org.pr":true,"gov.pr":true,"edu.pr":true,"isla.pr":true,"pro.pr":true,"biz.pr":true,"info.pr":true,"name.pr":true,"est.pr":true,"prof.pr":true,"ac.pr":true,"pro":true,"aaa.pro":true,"aca.pro":true,"acct.pro":true,"avocat.pro":true,"bar.pro":true,"cpa.pro":true,"eng.pro":true,"jur.pro":true,"law.pro":true,"med.pro":true,"recht.pro":true,"ps":true,"edu.ps":true,"gov.ps":true,"sec.ps":true,"plo.ps":true,"com.ps":true,"org.ps":true,"net.ps":true,"pt":true,"net.pt":true,"gov.pt":true,"org.pt":true,"edu.pt":true,"int.pt":true,"publ.pt":true,"com.pt":true,"nome.pt":true,"pw":true,"co.pw":true,"ne.pw":true,"or.pw":true,"ed.pw":true,"go.pw":true,"belau.pw":true,"py":true,"com.py":true,"coop.py":true,"edu.py":true,"gov.py":true,"mil.py":true,"net.py":true,"org.py":true,"qa":true,"com.qa":true,"edu.qa":true,"gov.qa":true,"mil.qa":true,"name.qa":true,"net.qa":true,"org.qa":true,"sch.qa":true,"re":true,"asso.re":true,"com.re":true,"nom.re":true,"ro":true,"arts.ro":true,"com.ro":true,"firm.ro":true,"info.ro":true,"nom.ro":true,"nt.ro":true,"org.ro":true,"rec.ro":true,"store.ro":true,"tm.ro":true,"www.ro":true,"rs":true,"ac.rs":true,"co.rs":true,"edu.rs":true,"gov.rs":true,"in.rs":true,"org.rs":true,"ru":true,"ac.ru":true,"edu.ru":true,"gov.ru":true,"int.ru":true,"mil.ru":true,"test.ru":true,"rw":true,"gov.rw":true,"net.rw":true,"edu.rw":true,"ac.rw":true,"com.rw":true,"co.rw":true,"int.rw":true,"mil.rw":true,"gouv.rw":true,"sa":true,"com.sa":true,"net.sa":true,"org.sa":true,"gov.sa":true,"med.sa":true,"pub.sa":true,"edu.sa":true,"sch.sa":true,"sb":true,"com.sb":true,"edu.sb":true,"gov.sb":true,"net.sb":true,"org.sb":true,"sc":true,"com.sc":true,"gov.sc":true,"net.sc":true,"org.sc":true,"edu.sc":true,"sd":true,"com.sd":true,"net.sd":true,"org.sd":true,"edu.sd":true,"med.sd":true,"tv.sd":true,"gov.sd":true,"info.sd":true,"se":true,"a.se":true,"ac.se":true,"b.se":true,"bd.se":true,"brand.se":true,"c.se":true,"d.se":true,"e.se":true,"f.se":true,"fh.se":true,"fhsk.se":true,"fhv.se":true,"g.se":true,"h.se":true,"i.se":true,"k.se":true,"komforb.se":true,"kommunalforbund.se":true,"komvux.se":true,"l.se":true,"lanbib.se":true,"m.se":true,"n.se":true,"naturbruksgymn.se":true,"o.se":true,"org.se":true,"p.se":true,"parti.se":true,"pp.se":true,"press.se":true,"r.se":true,"s.se":true,"t.se":true,"tm.se":true,"u.se":true,"w.se":true,"x.se":true,"y.se":true,"z.se":true,"sg":true,"com.sg":true,"net.sg":true,"org.sg":true,"gov.sg":true,"edu.sg":true,"per.sg":true,"sh":true,"com.sh":true,"net.sh":true,"gov.sh":true,"org.sh":true,"mil.sh":true,"si":true,"sj":true,"sk":true,"sl":true,"com.sl":true,"net.sl":true,"edu.sl":true,"gov.sl":true,"org.sl":true,"sm":true,"sn":true,"art.sn":true,"com.sn":true,"edu.sn":true,"gouv.sn":true,"org.sn":true,"perso.sn":true,"univ.sn":true,"so":true,"com.so":true,"net.so":true,"org.so":true,"sr":true,"st":true,"co.st":true,"com.st":true,"consulado.st":true,"edu.st":true,"embaixada.st":true,"gov.st":true,"mil.st":true,"net.st":true,"org.st":true,"principe.st":true,"saotome.st":true,"store.st":true,"su":true,"sv":true,"com.sv":true,"edu.sv":true,"gob.sv":true,"org.sv":true,"red.sv":true,"sx":true,"gov.sx":true,"sy":true,"edu.sy":true,"gov.sy":true,"net.sy":true,"mil.sy":true,"com.sy":true,"org.sy":true,"sz":true,"co.sz":true,"ac.sz":true,"org.sz":true,"tc":true,"td":true,"tel":true,"tf":true,"tg":true,"th":true,"ac.th":true,"co.th":true,"go.th":true,"in.th":true,"mi.th":true,"net.th":true,"or.th":true,"tj":true,"ac.tj":true,"biz.tj":true,"co.tj":true,"com.tj":true,"edu.tj":true,"go.tj":true,"gov.tj":true,"int.tj":true,"mil.tj":true,"name.tj":true,"net.tj":true,"nic.tj":true,"org.tj":true,"test.tj":true,"web.tj":true,"tk":true,"tl":true,"gov.tl":true,"tm":true,"com.tm":true,"co.tm":true,"org.tm":true,"net.tm":true,"nom.tm":true,"gov.tm":true,"mil.tm":true,"edu.tm":true,"tn":true,"com.tn":true,"ens.tn":true,"fin.tn":true,"gov.tn":true,"ind.tn":true,"intl.tn":true,"nat.tn":true,"net.tn":true,"org.tn":true,"info.tn":true,"perso.tn":true,"tourism.tn":true,"edunet.tn":true,"rnrt.tn":true,"rns.tn":true,"rnu.tn":true,"mincom.tn":true,"agrinet.tn":true,"defense.tn":true,"turen.tn":true,"to":true,"com.to":true,"gov.to":true,"net.to":true,"org.to":true,"edu.to":true,"mil.to":true,"tr":true,"com.tr":true,"info.tr":true,"biz.tr":true,"net.tr":true,"org.tr":true,"web.tr":true,"gen.tr":true,"tv.tr":true,"av.tr":true,"dr.tr":true,"bbs.tr":true,"name.tr":true,"tel.tr":true,"gov.tr":true,"bel.tr":true,"pol.tr":true,"mil.tr":true,"k12.tr":true,"edu.tr":true,"kep.tr":true,"nc.tr":true,"gov.nc.tr":true,"travel":true,"tt":true,"co.tt":true,"com.tt":true,"org.tt":true,"net.tt":true,"biz.tt":true,"info.tt":true,"pro.tt":true,"int.tt":true,"coop.tt":true,"jobs.tt":true,"mobi.tt":true,"travel.tt":true,"museum.tt":true,"aero.tt":true,"name.tt":true,"gov.tt":true,"edu.tt":true,"tv":true,"tw":true,"edu.tw":true,"gov.tw":true,"mil.tw":true,"com.tw":true,"net.tw":true,"org.tw":true,"idv.tw":true,"game.tw":true,"ebiz.tw":true,"club.tw":true,"xn--zf0ao64a.tw":true,"xn--uc0atv.tw":true,"xn--czrw28b.tw":true,"tz":true,"ac.tz":true,"co.tz":true,"go.tz":true,"hotel.tz":true,"info.tz":true,"me.tz":true,"mil.tz":true,"mobi.tz":true,"ne.tz":true,"or.tz":true,"sc.tz":true,"tv.tz":true,"ua":true,"com.ua":true,"edu.ua":true,"gov.ua":true,"in.ua":true,"net.ua":true,"org.ua":true,"cherkassy.ua":true,"cherkasy.ua":true,"chernigov.ua":true,"chernihiv.ua":true,"chernivtsi.ua":true,"chernovtsy.ua":true,"ck.ua":true,"cn.ua":true,"cr.ua":true,"crimea.ua":true,"cv.ua":true,"dn.ua":true,"dnepropetrovsk.ua":true,"dnipropetrovsk.ua":true,"dominic.ua":true,"donetsk.ua":true,"dp.ua":true,"if.ua":true,"ivano-frankivsk.ua":true,"kh.ua":true,"kharkiv.ua":true,"kharkov.ua":true,"kherson.ua":true,"khmelnitskiy.ua":true,"khmelnytskyi.ua":true,"kiev.ua":true,"kirovograd.ua":true,"km.ua":true,"kr.ua":true,"krym.ua":true,"ks.ua":true,"kv.ua":true,"kyiv.ua":true,"lg.ua":true,"lt.ua":true,"lugansk.ua":true,"lutsk.ua":true,"lv.ua":true,"lviv.ua":true,"mk.ua":true,"mykolaiv.ua":true,"nikolaev.ua":true,"od.ua":true,"odesa.ua":true,"odessa.ua":true,"pl.ua":true,"poltava.ua":true,"rivne.ua":true,"rovno.ua":true,"rv.ua":true,"sb.ua":true,"sebastopol.ua":true,"sevastopol.ua":true,"sm.ua":true,"sumy.ua":true,"te.ua":true,"ternopil.ua":true,"uz.ua":true,"uzhgorod.ua":true,"vinnica.ua":true,"vinnytsia.ua":true,"vn.ua":true,"volyn.ua":true,"yalta.ua":true,"zaporizhzhe.ua":true,"zaporizhzhia.ua":true,"zhitomir.ua":true,"zhytomyr.ua":true,"zp.ua":true,"zt.ua":true,"ug":true,"co.ug":true,"or.ug":true,"ac.ug":true,"sc.ug":true,"go.ug":true,"ne.ug":true,"com.ug":true,"org.ug":true,"uk":true,"ac.uk":true,"co.uk":true,"gov.uk":true,"ltd.uk":true,"me.uk":true,"net.uk":true,"nhs.uk":true,"org.uk":true,"plc.uk":true,"police.uk":true,"*.sch.uk":true,"us":true,"dni.us":true,"fed.us":true,"isa.us":true,"kids.us":true,"nsn.us":true,"ak.us":true,"al.us":true,"ar.us":true,"as.us":true,"az.us":true,"ca.us":true,"co.us":true,"ct.us":true,"dc.us":true,"de.us":true,"fl.us":true,"ga.us":true,"gu.us":true,"hi.us":true,"ia.us":true,"id.us":true,"il.us":true,"in.us":true,"ks.us":true,"ky.us":true,"la.us":true,"ma.us":true,"md.us":true,"me.us":true,"mi.us":true,"mn.us":true,"mo.us":true,"ms.us":true,"mt.us":true,"nc.us":true,"nd.us":true,"ne.us":true,"nh.us":true,"nj.us":true,"nm.us":true,"nv.us":true,"ny.us":true,"oh.us":true,"ok.us":true,"or.us":true,"pa.us":true,"pr.us":true,"ri.us":true,"sc.us":true,"sd.us":true,"tn.us":true,"tx.us":true,"ut.us":true,"vi.us":true,"vt.us":true,"va.us":true,"wa.us":true,"wi.us":true,"wv.us":true,"wy.us":true,"k12.ak.us":true,"k12.al.us":true,"k12.ar.us":true,"k12.as.us":true,"k12.az.us":true,"k12.ca.us":true,"k12.co.us":true,"k12.ct.us":true,"k12.dc.us":true,"k12.de.us":true,"k12.fl.us":true,"k12.ga.us":true,"k12.gu.us":true,"k12.ia.us":true,"k12.id.us":true,"k12.il.us":true,"k12.in.us":true,"k12.ks.us":true,"k12.ky.us":true,"k12.la.us":true,"k12.ma.us":true,"k12.md.us":true,"k12.me.us":true,"k12.mi.us":true,"k12.mn.us":true,"k12.mo.us":true,"k12.ms.us":true,"k12.mt.us":true,"k12.nc.us":true,"k12.ne.us":true,"k12.nh.us":true,"k12.nj.us":true,"k12.nm.us":true,"k12.nv.us":true,"k12.ny.us":true,"k12.oh.us":true,"k12.ok.us":true,"k12.or.us":true,"k12.pa.us":true,"k12.pr.us":true,"k12.ri.us":true,"k12.sc.us":true,"k12.tn.us":true,"k12.tx.us":true,"k12.ut.us":true,"k12.vi.us":true,"k12.vt.us":true,"k12.va.us":true,"k12.wa.us":true,"k12.wi.us":true,"k12.wy.us":true,"cc.ak.us":true,"cc.al.us":true,"cc.ar.us":true,"cc.as.us":true,"cc.az.us":true,"cc.ca.us":true,"cc.co.us":true,"cc.ct.us":true,"cc.dc.us":true,"cc.de.us":true,"cc.fl.us":true,"cc.ga.us":true,"cc.gu.us":true,"cc.hi.us":true,"cc.ia.us":true,"cc.id.us":true,"cc.il.us":true,"cc.in.us":true,"cc.ks.us":true,"cc.ky.us":true,"cc.la.us":true,"cc.ma.us":true,"cc.md.us":true,"cc.me.us":true,"cc.mi.us":true,"cc.mn.us":true,"cc.mo.us":true,"cc.ms.us":true,"cc.mt.us":true,"cc.nc.us":true,"cc.nd.us":true,"cc.ne.us":true,"cc.nh.us":true,"cc.nj.us":true,"cc.nm.us":true,"cc.nv.us":true,"cc.ny.us":true,"cc.oh.us":true,"cc.ok.us":true,"cc.or.us":true,"cc.pa.us":true,"cc.pr.us":true,"cc.ri.us":true,"cc.sc.us":true,"cc.sd.us":true,"cc.tn.us":true,"cc.tx.us":true,"cc.ut.us":true,"cc.vi.us":true,"cc.vt.us":true,"cc.va.us":true,"cc.wa.us":true,"cc.wi.us":true,"cc.wv.us":true,"cc.wy.us":true,"lib.ak.us":true,"lib.al.us":true,"lib.ar.us":true,"lib.as.us":true,"lib.az.us":true,"lib.ca.us":true,"lib.co.us":true,"lib.ct.us":true,"lib.dc.us":true,"lib.fl.us":true,"lib.ga.us":true,"lib.gu.us":true,"lib.hi.us":true,"lib.ia.us":true,"lib.id.us":true,"lib.il.us":true,"lib.in.us":true,"lib.ks.us":true,"lib.ky.us":true,"lib.la.us":true,"lib.ma.us":true,"lib.md.us":true,"lib.me.us":true,"lib.mi.us":true,"lib.mn.us":true,"lib.mo.us":true,"lib.ms.us":true,"lib.mt.us":true,"lib.nc.us":true,"lib.nd.us":true,"lib.ne.us":true,"lib.nh.us":true,"lib.nj.us":true,"lib.nm.us":true,"lib.nv.us":true,"lib.ny.us":true,"lib.oh.us":true,"lib.ok.us":true,"lib.or.us":true,"lib.pa.us":true,"lib.pr.us":true,"lib.ri.us":true,"lib.sc.us":true,"lib.sd.us":true,"lib.tn.us":true,"lib.tx.us":true,"lib.ut.us":true,"lib.vi.us":true,"lib.vt.us":true,"lib.va.us":true,"lib.wa.us":true,"lib.wi.us":true,"lib.wy.us":true,"pvt.k12.ma.us":true,"chtr.k12.ma.us":true,"paroch.k12.ma.us":true,"ann-arbor.mi.us":true,"cog.mi.us":true,"dst.mi.us":true,"eaton.mi.us":true,"gen.mi.us":true,"mus.mi.us":true,"tec.mi.us":true,"washtenaw.mi.us":true,"uy":true,"com.uy":true,"edu.uy":true,"gub.uy":true,"mil.uy":true,"net.uy":true,"org.uy":true,"uz":true,"co.uz":true,"com.uz":true,"net.uz":true,"org.uz":true,"va":true,"vc":true,"com.vc":true,"net.vc":true,"org.vc":true,"gov.vc":true,"mil.vc":true,"edu.vc":true,"ve":true,"arts.ve":true,"co.ve":true,"com.ve":true,"e12.ve":true,"edu.ve":true,"firm.ve":true,"gob.ve":true,"gov.ve":true,"info.ve":true,"int.ve":true,"mil.ve":true,"net.ve":true,"org.ve":true,"rec.ve":true,"store.ve":true,"tec.ve":true,"web.ve":true,"vg":true,"vi":true,"co.vi":true,"com.vi":true,"k12.vi":true,"net.vi":true,"org.vi":true,"vn":true,"com.vn":true,"net.vn":true,"org.vn":true,"edu.vn":true,"gov.vn":true,"int.vn":true,"ac.vn":true,"biz.vn":true,"info.vn":true,"name.vn":true,"pro.vn":true,"health.vn":true,"vu":true,"com.vu":true,"edu.vu":true,"net.vu":true,"org.vu":true,"wf":true,"ws":true,"com.ws":true,"net.ws":true,"org.ws":true,"gov.ws":true,"edu.ws":true,"yt":true,"xn--mgbaam7a8h":true,"xn--y9a3aq":true,"xn--54b7fta0cc":true,"xn--90ae":true,"xn--90ais":true,"xn--fiqs8s":true,"xn--fiqz9s":true,"xn--lgbbat1ad8j":true,"xn--wgbh1c":true,"xn--e1a4c":true,"xn--node":true,"xn--qxam":true,"xn--j6w193g":true,"xn--2scrj9c":true,"xn--3hcrj9c":true,"xn--45br5cyl":true,"xn--h2breg3eve":true,"xn--h2brj9c8c":true,"xn--mgbgu82a":true,"xn--rvc1e0am3e":true,"xn--h2brj9c":true,"xn--mgbbh1a71e":true,"xn--fpcrj9c3d":true,"xn--gecrj9c":true,"xn--s9brj9c":true,"xn--45brj9c":true,"xn--xkc2dl3a5ee0h":true,"xn--mgba3a4f16a":true,"xn--mgba3a4fra":true,"xn--mgbtx2b":true,"xn--mgbayh7gpa":true,"xn--3e0b707e":true,"xn--80ao21a":true,"xn--fzc2c9e2c":true,"xn--xkc2al3hye2a":true,"xn--mgbc0a9azcg":true,"xn--d1alf":true,"xn--l1acc":true,"xn--mix891f":true,"xn--mix082f":true,"xn--mgbx4cd0ab":true,"xn--mgb9awbf":true,"xn--mgbai9azgqp6j":true,"xn--mgbai9a5eva00b":true,"xn--ygbi2ammx":true,"xn--90a3ac":true,"xn--o1ac.xn--90a3ac":true,"xn--c1avg.xn--90a3ac":true,"xn--90azh.xn--90a3ac":true,"xn--d1at.xn--90a3ac":true,"xn--o1ach.xn--90a3ac":true,"xn--80au.xn--90a3ac":true,"xn--p1ai":true,"xn--wgbl6a":true,"xn--mgberp4a5d4ar":true,"xn--mgberp4a5d4a87g":true,"xn--mgbqly7c0a67fbc":true,"xn--mgbqly7cvafr":true,"xn--mgbpl2fh":true,"xn--yfro4i67o":true,"xn--clchc0ea0b2g2a9gcd":true,"xn--ogbpf8fl":true,"xn--mgbtf8fl":true,"xn--o3cw4h":true,"xn--12c1fe0br.xn--o3cw4h":true,"xn--12co0c3b4eva.xn--o3cw4h":true,"xn--h3cuzk1di.xn--o3cw4h":true,"xn--o3cyx2a.xn--o3cw4h":true,"xn--m3ch0j3a.xn--o3cw4h":true,"xn--12cfi8ixb8l.xn--o3cw4h":true,"xn--pgbs0dh":true,"xn--kpry57d":true,"xn--kprw13d":true,"xn--nnx388a":true,"xn--j1amh":true,"xn--mgb2ddes":true,"xxx":true,"*.ye":true,"ac.za":true,"agric.za":true,"alt.za":true,"co.za":true,"edu.za":true,"gov.za":true,"grondar.za":true,"law.za":true,"mil.za":true,"net.za":true,"ngo.za":true,"nis.za":true,"nom.za":true,"org.za":true,"school.za":true,"tm.za":true,"web.za":true,"zm":true,"ac.zm":true,"biz.zm":true,"co.zm":true,"com.zm":true,"edu.zm":true,"gov.zm":true,"info.zm":true,"mil.zm":true,"net.zm":true,"org.zm":true,"sch.zm":true,"zw":true,"ac.zw":true,"co.zw":true,"gov.zw":true,"mil.zw":true,"org.zw":true,"aaa":true,"aarp":true,"abarth":true,"abb":true,"abbott":true,"abbvie":true,"abc":true,"able":true,"abogado":true,"abudhabi":true,"academy":true,"accenture":true,"accountant":true,"accountants":true,"aco":true,"active":true,"actor":true,"adac":true,"ads":true,"adult":true,"aeg":true,"aetna":true,"afamilycompany":true,"afl":true,"africa":true,"agakhan":true,"agency":true,"aig":true,"aigo":true,"airbus":true,"airforce":true,"airtel":true,"akdn":true,"alfaromeo":true,"alibaba":true,"alipay":true,"allfinanz":true,"allstate":true,"ally":true,"alsace":true,"alstom":true,"americanexpress":true,"americanfamily":true,"amex":true,"amfam":true,"amica":true,"amsterdam":true,"analytics":true,"android":true,"anquan":true,"anz":true,"aol":true,"apartments":true,"app":true,"apple":true,"aquarelle":true,"arab":true,"aramco":true,"archi":true,"army":true,"art":true,"arte":true,"asda":true,"associates":true,"athleta":true,"attorney":true,"auction":true,"audi":true,"audible":true,"audio":true,"auspost":true,"author":true,"auto":true,"autos":true,"avianca":true,"aws":true,"axa":true,"azure":true,"baby":true,"baidu":true,"banamex":true,"bananarepublic":true,"band":true,"bank":true,"bar":true,"barcelona":true,"barclaycard":true,"barclays":true,"barefoot":true,"bargains":true,"baseball":true,"basketball":true,"bauhaus":true,"bayern":true,"bbc":true,"bbt":true,"bbva":true,"bcg":true,"bcn":true,"beats":true,"beauty":true,"beer":true,"bentley":true,"berlin":true,"best":true,"bestbuy":true,"bet":true,"bharti":true,"bible":true,"bid":true,"bike":true,"bing":true,"bingo":true,"bio":true,"black":true,"blackfriday":true,"blanco":true,"blockbuster":true,"blog":true,"bloomberg":true,"blue":true,"bms":true,"bmw":true,"bnl":true,"bnpparibas":true,"boats":true,"boehringer":true,"bofa":true,"bom":true,"bond":true,"boo":true,"book":true,"booking":true,"boots":true,"bosch":true,"bostik":true,"boston":true,"bot":true,"boutique":true,"box":true,"bradesco":true,"bridgestone":true,"broadway":true,"broker":true,"brother":true,"brussels":true,"budapest":true,"bugatti":true,"build":true,"builders":true,"business":true,"buy":true,"buzz":true,"bzh":true,"cab":true,"cafe":true,"cal":true,"call":true,"calvinklein":true,"cam":true,"camera":true,"camp":true,"cancerresearch":true,"canon":true,"capetown":true,"capital":true,"capitalone":true,"car":true,"caravan":true,"cards":true,"care":true,"career":true,"careers":true,"cars":true,"cartier":true,"casa":true,"case":true,"caseih":true,"cash":true,"casino":true,"catering":true,"catholic":true,"cba":true,"cbn":true,"cbre":true,"cbs":true,"ceb":true,"center":true,"ceo":true,"cern":true,"cfa":true,"cfd":true,"chanel":true,"channel":true,"chase":true,"chat":true,"cheap":true,"chintai":true,"christmas":true,"chrome":true,"chrysler":true,"church":true,"cipriani":true,"circle":true,"cisco":true,"citadel":true,"citi":true,"citic":true,"city":true,"cityeats":true,"claims":true,"cleaning":true,"click":true,"clinic":true,"clinique":true,"clothing":true,"cloud":true,"club":true,"clubmed":true,"coach":true,"codes":true,"coffee":true,"college":true,"cologne":true,"comcast":true,"commbank":true,"community":true,"company":true,"compare":true,"computer":true,"comsec":true,"condos":true,"construction":true,"consulting":true,"contact":true,"contractors":true,"cooking":true,"cookingchannel":true,"cool":true,"corsica":true,"country":true,"coupon":true,"coupons":true,"courses":true,"credit":true,"creditcard":true,"creditunion":true,"cricket":true,"crown":true,"crs":true,"cruise":true,"cruises":true,"csc":true,"cuisinella":true,"cymru":true,"cyou":true,"dabur":true,"dad":true,"dance":true,"data":true,"date":true,"dating":true,"datsun":true,"day":true,"dclk":true,"dds":true,"deal":true,"dealer":true,"deals":true,"degree":true,"delivery":true,"dell":true,"deloitte":true,"delta":true,"democrat":true,"dental":true,"dentist":true,"desi":true,"design":true,"dev":true,"dhl":true,"diamonds":true,"diet":true,"digital":true,"direct":true,"directory":true,"discount":true,"discover":true,"dish":true,"diy":true,"dnp":true,"docs":true,"doctor":true,"dodge":true,"dog":true,"doha":true,"domains":true,"dot":true,"download":true,"drive":true,"dtv":true,"dubai":true,"duck":true,"dunlop":true,"duns":true,"dupont":true,"durban":true,"dvag":true,"dvr":true,"earth":true,"eat":true,"eco":true,"edeka":true,"education":true,"email":true,"emerck":true,"energy":true,"engineer":true,"engineering":true,"enterprises":true,"epost":true,"epson":true,"equipment":true,"ericsson":true,"erni":true,"esq":true,"estate":true,"esurance":true,"etisalat":true,"eurovision":true,"eus":true,"events":true,"everbank":true,"exchange":true,"expert":true,"exposed":true,"express":true,"extraspace":true,"fage":true,"fail":true,"fairwinds":true,"faith":true,"family":true,"fan":true,"fans":true,"farm":true,"farmers":true,"fashion":true,"fast":true,"fedex":true,"feedback":true,"ferrari":true,"ferrero":true,"fiat":true,"fidelity":true,"fido":true,"film":true,"final":true,"finance":true,"financial":true,"fire":true,"firestone":true,"firmdale":true,"fish":true,"fishing":true,"fit":true,"fitness":true,"flickr":true,"flights":true,"flir":true,"florist":true,"flowers":true,"fly":true,"foo":true,"food":true,"foodnetwork":true,"football":true,"ford":true,"forex":true,"forsale":true,"forum":true,"foundation":true,"fox":true,"free":true,"fresenius":true,"frl":true,"frogans":true,"frontdoor":true,"frontier":true,"ftr":true,"fujitsu":true,"fujixerox":true,"fun":true,"fund":true,"furniture":true,"futbol":true,"fyi":true,"gal":true,"gallery":true,"gallo":true,"gallup":true,"game":true,"games":true,"gap":true,"garden":true,"gbiz":true,"gdn":true,"gea":true,"gent":true,"genting":true,"george":true,"ggee":true,"gift":true,"gifts":true,"gives":true,"giving":true,"glade":true,"glass":true,"gle":true,"global":true,"globo":true,"gmail":true,"gmbh":true,"gmo":true,"gmx":true,"godaddy":true,"gold":true,"goldpoint":true,"golf":true,"goo":true,"goodhands":true,"goodyear":true,"goog":true,"google":true,"gop":true,"got":true,"grainger":true,"graphics":true,"gratis":true,"green":true,"gripe":true,"grocery":true,"group":true,"guardian":true,"gucci":true,"guge":true,"guide":true,"guitars":true,"guru":true,"hair":true,"hamburg":true,"hangout":true,"haus":true,"hbo":true,"hdfc":true,"hdfcbank":true,"health":true,"healthcare":true,"help":true,"helsinki":true,"here":true,"hermes":true,"hgtv":true,"hiphop":true,"hisamitsu":true,"hitachi":true,"hiv":true,"hkt":true,"hockey":true,"holdings":true,"holiday":true,"homedepot":true,"homegoods":true,"homes":true,"homesense":true,"honda":true,"honeywell":true,"horse":true,"hospital":true,"host":true,"hosting":true,"hot":true,"hoteles":true,"hotels":true,"hotmail":true,"house":true,"how":true,"hsbc":true,"hughes":true,"hyatt":true,"hyundai":true,"ibm":true,"icbc":true,"ice":true,"icu":true,"ieee":true,"ifm":true,"ikano":true,"imamat":true,"imdb":true,"immo":true,"immobilien":true,"industries":true,"infiniti":true,"ing":true,"ink":true,"institute":true,"insurance":true,"insure":true,"intel":true,"international":true,"intuit":true,"investments":true,"ipiranga":true,"irish":true,"iselect":true,"ismaili":true,"ist":true,"istanbul":true,"itau":true,"itv":true,"iveco":true,"iwc":true,"jaguar":true,"java":true,"jcb":true,"jcp":true,"jeep":true,"jetzt":true,"jewelry":true,"jio":true,"jlc":true,"jll":true,"jmp":true,"jnj":true,"joburg":true,"jot":true,"joy":true,"jpmorgan":true,"jprs":true,"juegos":true,"juniper":true,"kaufen":true,"kddi":true,"kerryhotels":true,"kerrylogistics":true,"kerryproperties":true,"kfh":true,"kia":true,"kim":true,"kinder":true,"kindle":true,"kitchen":true,"kiwi":true,"koeln":true,"komatsu":true,"kosher":true,"kpmg":true,"kpn":true,"krd":true,"kred":true,"kuokgroup":true,"kyoto":true,"lacaixa":true,"ladbrokes":true,"lamborghini":true,"lamer":true,"lancaster":true,"lancia":true,"lancome":true,"land":true,"landrover":true,"lanxess":true,"lasalle":true,"lat":true,"latino":true,"latrobe":true,"law":true,"lawyer":true,"lds":true,"lease":true,"leclerc":true,"lefrak":true,"legal":true,"lego":true,"lexus":true,"lgbt":true,"liaison":true,"lidl":true,"life":true,"lifeinsurance":true,"lifestyle":true,"lighting":true,"like":true,"lilly":true,"limited":true,"limo":true,"lincoln":true,"linde":true,"link":true,"lipsy":true,"live":true,"living":true,"lixil":true,"loan":true,"loans":true,"locker":true,"locus":true,"loft":true,"lol":true,"london":true,"lotte":true,"lotto":true,"love":true,"lpl":true,"lplfinancial":true,"ltd":true,"ltda":true,"lundbeck":true,"lupin":true,"luxe":true,"luxury":true,"macys":true,"madrid":true,"maif":true,"maison":true,"makeup":true,"man":true,"management":true,"mango":true,"map":true,"market":true,"marketing":true,"markets":true,"marriott":true,"marshalls":true,"maserati":true,"mattel":true,"mba":true,"mckinsey":true,"med":true,"media":true,"meet":true,"melbourne":true,"meme":true,"memorial":true,"men":true,"menu":true,"meo":true,"merckmsd":true,"metlife":true,"miami":true,"microsoft":true,"mini":true,"mint":true,"mit":true,"mitsubishi":true,"mlb":true,"mls":true,"mma":true,"mobile":true,"mobily":true,"moda":true,"moe":true,"moi":true,"mom":true,"monash":true,"money":true,"monster":true,"mopar":true,"mormon":true,"mortgage":true,"moscow":true,"moto":true,"motorcycles":true,"mov":true,"movie":true,"movistar":true,"msd":true,"mtn":true,"mtpc":true,"mtr":true,"mutual":true,"nab":true,"nadex":true,"nagoya":true,"nationwide":true,"natura":true,"navy":true,"nba":true,"nec":true,"netbank":true,"netflix":true,"network":true,"neustar":true,"new":true,"newholland":true,"news":true,"next":true,"nextdirect":true,"nexus":true,"nfl":true,"ngo":true,"nhk":true,"nico":true,"nike":true,"nikon":true,"ninja":true,"nissan":true,"nissay":true,"nokia":true,"northwesternmutual":true,"norton":true,"now":true,"nowruz":true,"nowtv":true,"nra":true,"nrw":true,"ntt":true,"nyc":true,"obi":true,"observer":true,"off":true,"office":true,"okinawa":true,"olayan":true,"olayangroup":true,"oldnavy":true,"ollo":true,"omega":true,"one":true,"ong":true,"onl":true,"online":true,"onyourside":true,"ooo":true,"open":true,"oracle":true,"orange":true,"organic":true,"origins":true,"osaka":true,"otsuka":true,"ott":true,"ovh":true,"page":true,"panasonic":true,"panerai":true,"paris":true,"pars":true,"partners":true,"parts":true,"party":true,"passagens":true,"pay":true,"pccw":true,"pet":true,"pfizer":true,"pharmacy":true,"phd":true,"philips":true,"phone":true,"photo":true,"photography":true,"photos":true,"physio":true,"piaget":true,"pics":true,"pictet":true,"pictures":true,"pid":true,"pin":true,"ping":true,"pink":true,"pioneer":true,"pizza":true,"place":true,"play":true,"playstation":true,"plumbing":true,"plus":true,"pnc":true,"pohl":true,"poker":true,"politie":true,"porn":true,"pramerica":true,"praxi":true,"press":true,"prime":true,"prod":true,"productions":true,"prof":true,"progressive":true,"promo":true,"properties":true,"property":true,"protection":true,"pru":true,"prudential":true,"pub":true,"pwc":true,"qpon":true,"quebec":true,"quest":true,"qvc":true,"racing":true,"radio":true,"raid":true,"read":true,"realestate":true,"realtor":true,"realty":true,"recipes":true,"red":true,"redstone":true,"redumbrella":true,"rehab":true,"reise":true,"reisen":true,"reit":true,"reliance":true,"ren":true,"rent":true,"rentals":true,"repair":true,"report":true,"republican":true,"rest":true,"restaurant":true,"review":true,"reviews":true,"rexroth":true,"rich":true,"richardli":true,"ricoh":true,"rightathome":true,"ril":true,"rio":true,"rip":true,"rmit":true,"rocher":true,"rocks":true,"rodeo":true,"rogers":true,"room":true,"rsvp":true,"rugby":true,"ruhr":true,"run":true,"rwe":true,"ryukyu":true,"saarland":true,"safe":true,"safety":true,"sakura":true,"sale":true,"salon":true,"samsclub":true,"samsung":true,"sandvik":true,"sandvikcoromant":true,"sanofi":true,"sap":true,"sapo":true,"sarl":true,"sas":true,"save":true,"saxo":true,"sbi":true,"sbs":true,"sca":true,"scb":true,"schaeffler":true,"schmidt":true,"scholarships":true,"school":true,"schule":true,"schwarz":true,"science":true,"scjohnson":true,"scor":true,"scot":true,"search":true,"seat":true,"secure":true,"security":true,"seek":true,"select":true,"sener":true,"services":true,"ses":true,"seven":true,"sew":true,"sex":true,"sexy":true,"sfr":true,"shangrila":true,"sharp":true,"shaw":true,"shell":true,"shia":true,"shiksha":true,"shoes":true,"shop":true,"shopping":true,"shouji":true,"show":true,"showtime":true,"shriram":true,"silk":true,"sina":true,"singles":true,"site":true,"ski":true,"skin":true,"sky":true,"skype":true,"sling":true,"smart":true,"smile":true,"sncf":true,"soccer":true,"social":true,"softbank":true,"software":true,"sohu":true,"solar":true,"solutions":true,"song":true,"sony":true,"soy":true,"space":true,"spiegel":true,"spot":true,"spreadbetting":true,"srl":true,"srt":true,"stada":true,"staples":true,"star":true,"starhub":true,"statebank":true,"statefarm":true,"statoil":true,"stc":true,"stcgroup":true,"stockholm":true,"storage":true,"store":true,"stream":true,"studio":true,"study":true,"style":true,"sucks":true,"supplies":true,"supply":true,"support":true,"surf":true,"surgery":true,"suzuki":true,"swatch":true,"swiftcover":true,"swiss":true,"sydney":true,"symantec":true,"systems":true,"tab":true,"taipei":true,"talk":true,"taobao":true,"target":true,"tatamotors":true,"tatar":true,"tattoo":true,"tax":true,"taxi":true,"tci":true,"tdk":true,"team":true,"tech":true,"technology":true,"telecity":true,"telefonica":true,"temasek":true,"tennis":true,"teva":true,"thd":true,"theater":true,"theatre":true,"tiaa":true,"tickets":true,"tienda":true,"tiffany":true,"tips":true,"tires":true,"tirol":true,"tjmaxx":true,"tjx":true,"tkmaxx":true,"tmall":true,"today":true,"tokyo":true,"tools":true,"top":true,"toray":true,"toshiba":true,"total":true,"tours":true,"town":true,"toyota":true,"toys":true,"trade":true,"trading":true,"training":true,"travelchannel":true,"travelers":true,"travelersinsurance":true,"trust":true,"trv":true,"tube":true,"tui":true,"tunes":true,"tushu":true,"tvs":true,"ubank":true,"ubs":true,"uconnect":true,"unicom":true,"university":true,"uno":true,"uol":true,"ups":true,"vacations":true,"vana":true,"vanguard":true,"vegas":true,"ventures":true,"verisign":true,"versicherung":true,"vet":true,"viajes":true,"video":true,"vig":true,"viking":true,"villas":true,"vin":true,"vip":true,"virgin":true,"visa":true,"vision":true,"vista":true,"vistaprint":true,"viva":true,"vivo":true,"vlaanderen":true,"vodka":true,"volkswagen":true,"volvo":true,"vote":true,"voting":true,"voto":true,"voyage":true,"vuelos":true,"wales":true,"walmart":true,"walter":true,"wang":true,"wanggou":true,"warman":true,"watch":true,"watches":true,"weather":true,"weatherchannel":true,"webcam":true,"weber":true,"website":true,"wed":true,"wedding":true,"weibo":true,"weir":true,"whoswho":true,"wien":true,"wiki":true,"williamhill":true,"win":true,"windows":true,"wine":true,"winners":true,"wme":true,"wolterskluwer":true,"woodside":true,"work":true,"works":true,"world":true,"wow":true,"wtc":true,"wtf":true,"xbox":true,"xerox":true,"xfinity":true,"xihuan":true,"xin":true,"xn--11b4c3d":true,"xn--1ck2e1b":true,"xn--1qqw23a":true,"xn--30rr7y":true,"xn--3bst00m":true,"xn--3ds443g":true,"xn--3oq18vl8pn36a":true,"xn--3pxu8k":true,"xn--42c2d9a":true,"xn--45q11c":true,"xn--4gbrim":true,"xn--55qw42g":true,"xn--55qx5d":true,"xn--5su34j936bgsg":true,"xn--5tzm5g":true,"xn--6frz82g":true,"xn--6qq986b3xl":true,"xn--80adxhks":true,"xn--80aqecdr1a":true,"xn--80asehdb":true,"xn--80aswg":true,"xn--8y0a063a":true,"xn--9dbq2a":true,"xn--9et52u":true,"xn--9krt00a":true,"xn--b4w605ferd":true,"xn--bck1b9a5dre4c":true,"xn--c1avg":true,"xn--c2br7g":true,"xn--cck2b3b":true,"xn--cg4bki":true,"xn--czr694b":true,"xn--czrs0t":true,"xn--czru2d":true,"xn--d1acj3b":true,"xn--eckvdtc9d":true,"xn--efvy88h":true,"xn--estv75g":true,"xn--fct429k":true,"xn--fhbei":true,"xn--fiq228c5hs":true,"xn--fiq64b":true,"xn--fjq720a":true,"xn--flw351e":true,"xn--fzys8d69uvgm":true,"xn--g2xx48c":true,"xn--gckr3f0f":true,"xn--gk3at1e":true,"xn--hxt814e":true,"xn--i1b6b1a6a2e":true,"xn--imr513n":true,"xn--io0a7i":true,"xn--j1aef":true,"xn--jlq61u9w7b":true,"xn--jvr189m":true,"xn--kcrx77d1x4a":true,"xn--kpu716f":true,"xn--kput3i":true,"xn--mgba3a3ejt":true,"xn--mgba7c0bbn0a":true,"xn--mgbaakc7dvf":true,"xn--mgbab2bd":true,"xn--mgbb9fbpob":true,"xn--mgbca7dzdo":true,"xn--mgbi4ecexp":true,"xn--mgbt3dhd":true,"xn--mk1bu44c":true,"xn--mxtq1m":true,"xn--ngbc5azd":true,"xn--ngbe9e0a":true,"xn--ngbrx":true,"xn--nqv7f":true,"xn--nqv7fs00ema":true,"xn--nyqy26a":true,"xn--p1acf":true,"xn--pbt977c":true,"xn--pssy2u":true,"xn--q9jyb4c":true,"xn--qcka1pmc":true,"xn--rhqv96g":true,"xn--rovu88b":true,"xn--ses554g":true,"xn--t60b56a":true,"xn--tckwe":true,"xn--tiq49xqyj":true,"xn--unup4y":true,"xn--vermgensberater-ctb":true,"xn--vermgensberatung-pwb":true,"xn--vhquv":true,"xn--vuq861b":true,"xn--w4r85el8fhu5dnra":true,"xn--w4rs40l":true,"xn--xhq521b":true,"xn--zfr164b":true,"xperia":true,"xyz":true,"yachts":true,"yahoo":true,"yamaxun":true,"yandex":true,"yodobashi":true,"yoga":true,"yokohama":true,"you":true,"youtube":true,"yun":true,"zappos":true,"zara":true,"zero":true,"zip":true,"zippo":true,"zone":true,"zuerich":true,"cc.ua":true,"inf.ua":true,"ltd.ua":true,"1password.ca":true,"1password.com":true,"1password.eu":true,"beep.pl":true,"*.compute.estate":true,"*.alces.network":true,"alwaysdata.net":true,"cloudfront.net":true,"*.compute.amazonaws.com":true,"*.compute-1.amazonaws.com":true,"*.compute.amazonaws.com.cn":true,"us-east-1.amazonaws.com":true,"cn-north-1.eb.amazonaws.com.cn":true,"elasticbeanstalk.com":true,"ap-northeast-1.elasticbeanstalk.com":true,"ap-northeast-2.elasticbeanstalk.com":true,"ap-south-1.elasticbeanstalk.com":true,"ap-southeast-1.elasticbeanstalk.com":true,"ap-southeast-2.elasticbeanstalk.com":true,"ca-central-1.elasticbeanstalk.com":true,"eu-central-1.elasticbeanstalk.com":true,"eu-west-1.elasticbeanstalk.com":true,"eu-west-2.elasticbeanstalk.com":true,"eu-west-3.elasticbeanstalk.com":true,"sa-east-1.elasticbeanstalk.com":true,"us-east-1.elasticbeanstalk.com":true,"us-east-2.elasticbeanstalk.com":true,"us-gov-west-1.elasticbeanstalk.com":true,"us-west-1.elasticbeanstalk.com":true,"us-west-2.elasticbeanstalk.com":true,"*.elb.amazonaws.com":true,"*.elb.amazonaws.com.cn":true,"s3.amazonaws.com":true,"s3-ap-northeast-1.amazonaws.com":true,"s3-ap-northeast-2.amazonaws.com":true,"s3-ap-south-1.amazonaws.com":true,"s3-ap-southeast-1.amazonaws.com":true,"s3-ap-southeast-2.amazonaws.com":true,"s3-ca-central-1.amazonaws.com":true,"s3-eu-central-1.amazonaws.com":true,"s3-eu-west-1.amazonaws.com":true,"s3-eu-west-2.amazonaws.com":true,"s3-eu-west-3.amazonaws.com":true,"s3-external-1.amazonaws.com":true,"s3-fips-us-gov-west-1.amazonaws.com":true,"s3-sa-east-1.amazonaws.com":true,"s3-us-gov-west-1.amazonaws.com":true,"s3-us-east-2.amazonaws.com":true,"s3-us-west-1.amazonaws.com":true,"s3-us-west-2.amazonaws.com":true,"s3.ap-northeast-2.amazonaws.com":true,"s3.ap-south-1.amazonaws.com":true,"s3.cn-north-1.amazonaws.com.cn":true,"s3.ca-central-1.amazonaws.com":true,"s3.eu-central-1.amazonaws.com":true,"s3.eu-west-2.amazonaws.com":true,"s3.eu-west-3.amazonaws.com":true,"s3.us-east-2.amazonaws.com":true,"s3.dualstack.ap-northeast-1.amazonaws.com":true,"s3.dualstack.ap-northeast-2.amazonaws.com":true,"s3.dualstack.ap-south-1.amazonaws.com":true,"s3.dualstack.ap-southeast-1.amazonaws.com":true,"s3.dualstack.ap-southeast-2.amazonaws.com":true,"s3.dualstack.ca-central-1.amazonaws.com":true,"s3.dualstack.eu-central-1.amazonaws.com":true,"s3.dualstack.eu-west-1.amazonaws.com":true,"s3.dualstack.eu-west-2.amazonaws.com":true,"s3.dualstack.eu-west-3.amazonaws.com":true,"s3.dualstack.sa-east-1.amazonaws.com":true,"s3.dualstack.us-east-1.amazonaws.com":true,"s3.dualstack.us-east-2.amazonaws.com":true,"s3-website-us-east-1.amazonaws.com":true,"s3-website-us-west-1.amazonaws.com":true,"s3-website-us-west-2.amazonaws.com":true,"s3-website-ap-northeast-1.amazonaws.com":true,"s3-website-ap-southeast-1.amazonaws.com":true,"s3-website-ap-southeast-2.amazonaws.com":true,"s3-website-eu-west-1.amazonaws.com":true,"s3-website-sa-east-1.amazonaws.com":true,"s3-website.ap-northeast-2.amazonaws.com":true,"s3-website.ap-south-1.amazonaws.com":true,"s3-website.ca-central-1.amazonaws.com":true,"s3-website.eu-central-1.amazonaws.com":true,"s3-website.eu-west-2.amazonaws.com":true,"s3-website.eu-west-3.amazonaws.com":true,"s3-website.us-east-2.amazonaws.com":true,"t3l3p0rt.net":true,"tele.amune.org":true,"on-aptible.com":true,"user.party.eus":true,"pimienta.org":true,"poivron.org":true,"potager.org":true,"sweetpepper.org":true,"myasustor.com":true,"myfritz.net":true,"*.awdev.ca":true,"*.advisor.ws":true,"backplaneapp.io":true,"betainabox.com":true,"bnr.la":true,"boomla.net":true,"boxfuse.io":true,"square7.ch":true,"bplaced.com":true,"bplaced.de":true,"square7.de":true,"bplaced.net":true,"square7.net":true,"browsersafetymark.io":true,"mycd.eu":true,"ae.org":true,"ar.com":true,"br.com":true,"cn.com":true,"com.de":true,"com.se":true,"de.com":true,"eu.com":true,"gb.com":true,"gb.net":true,"hu.com":true,"hu.net":true,"jp.net":true,"jpn.com":true,"kr.com":true,"mex.com":true,"no.com":true,"qc.com":true,"ru.com":true,"sa.com":true,"se.com":true,"se.net":true,"uk.com":true,"uk.net":true,"us.com":true,"uy.com":true,"za.bz":true,"za.com":true,"africa.com":true,"gr.com":true,"in.net":true,"us.org":true,"co.com":true,"c.la":true,"certmgr.org":true,"xenapponazure.com":true,"virtueeldomein.nl":true,"c66.me":true,"cloud66.ws":true,"jdevcloud.com":true,"wpdevcloud.com":true,"cloudaccess.host":true,"freesite.host":true,"cloudaccess.net":true,"cloudcontrolled.com":true,"cloudcontrolapp.com":true,"co.ca":true,"co.cz":true,"c.cdn77.org":true,"cdn77-ssl.net":true,"r.cdn77.net":true,"rsc.cdn77.org":true,"ssl.origin.cdn77-secure.org":true,"cloudns.asia":true,"cloudns.biz":true,"cloudns.club":true,"cloudns.cc":true,"cloudns.eu":true,"cloudns.in":true,"cloudns.info":true,"cloudns.org":true,"cloudns.pro":true,"cloudns.pw":true,"cloudns.us":true,"co.nl":true,"co.no":true,"webhosting.be":true,"hosting-cluster.nl":true,"dyn.cosidns.de":true,"dynamisches-dns.de":true,"dnsupdater.de":true,"internet-dns.de":true,"l-o-g-i-n.de":true,"dynamic-dns.info":true,"feste-ip.net":true,"knx-server.net":true,"static-access.net":true,"realm.cz":true,"*.cryptonomic.net":true,"cupcake.is":true,"cyon.link":true,"cyon.site":true,"daplie.me":true,"localhost.daplie.me":true,"biz.dk":true,"co.dk":true,"firm.dk":true,"reg.dk":true,"store.dk":true,"debian.net":true,"dedyn.io":true,"dnshome.de":true,"drayddns.com":true,"dreamhosters.com":true,"mydrobo.com":true,"drud.io":true,"drud.us":true,"duckdns.org":true,"dy.fi":true,"tunk.org":true,"dyndns-at-home.com":true,"dyndns-at-work.com":true,"dyndns-blog.com":true,"dyndns-free.com":true,"dyndns-home.com":true,"dyndns-ip.com":true,"dyndns-mail.com":true,"dyndns-office.com":true,"dyndns-pics.com":true,"dyndns-remote.com":true,"dyndns-server.com":true,"dyndns-web.com":true,"dyndns-wiki.com":true,"dyndns-work.com":true,"dyndns.biz":true,"dyndns.info":true,"dyndns.org":true,"dyndns.tv":true,"at-band-camp.net":true,"ath.cx":true,"barrel-of-knowledge.info":true,"barrell-of-knowledge.info":true,"better-than.tv":true,"blogdns.com":true,"blogdns.net":true,"blogdns.org":true,"blogsite.org":true,"boldlygoingnowhere.org":true,"broke-it.net":true,"buyshouses.net":true,"cechire.com":true,"dnsalias.com":true,"dnsalias.net":true,"dnsalias.org":true,"dnsdojo.com":true,"dnsdojo.net":true,"dnsdojo.org":true,"does-it.net":true,"doesntexist.com":true,"doesntexist.org":true,"dontexist.com":true,"dontexist.net":true,"dontexist.org":true,"doomdns.com":true,"doomdns.org":true,"dvrdns.org":true,"dyn-o-saur.com":true,"dynalias.com":true,"dynalias.net":true,"dynalias.org":true,"dynathome.net":true,"dyndns.ws":true,"endofinternet.net":true,"endofinternet.org":true,"endoftheinternet.org":true,"est-a-la-maison.com":true,"est-a-la-masion.com":true,"est-le-patron.com":true,"est-mon-blogueur.com":true,"for-better.biz":true,"for-more.biz":true,"for-our.info":true,"for-some.biz":true,"for-the.biz":true,"forgot.her.name":true,"forgot.his.name":true,"from-ak.com":true,"from-al.com":true,"from-ar.com":true,"from-az.net":true,"from-ca.com":true,"from-co.net":true,"from-ct.com":true,"from-dc.com":true,"from-de.com":true,"from-fl.com":true,"from-ga.com":true,"from-hi.com":true,"from-ia.com":true,"from-id.com":true,"from-il.com":true,"from-in.com":true,"from-ks.com":true,"from-ky.com":true,"from-la.net":true,"from-ma.com":true,"from-md.com":true,"from-me.org":true,"from-mi.com":true,"from-mn.com":true,"from-mo.com":true,"from-ms.com":true,"from-mt.com":true,"from-nc.com":true,"from-nd.com":true,"from-ne.com":true,"from-nh.com":true,"from-nj.com":true,"from-nm.com":true,"from-nv.com":true,"from-ny.net":true,"from-oh.com":true,"from-ok.com":true,"from-or.com":true,"from-pa.com":true,"from-pr.com":true,"from-ri.com":true,"from-sc.com":true,"from-sd.com":true,"from-tn.com":true,"from-tx.com":true,"from-ut.com":true,"from-va.com":true,"from-vt.com":true,"from-wa.com":true,"from-wi.com":true,"from-wv.com":true,"from-wy.com":true,"ftpaccess.cc":true,"fuettertdasnetz.de":true,"game-host.org":true,"game-server.cc":true,"getmyip.com":true,"gets-it.net":true,"go.dyndns.org":true,"gotdns.com":true,"gotdns.org":true,"groks-the.info":true,"groks-this.info":true,"ham-radio-op.net":true,"here-for-more.info":true,"hobby-site.com":true,"hobby-site.org":true,"home.dyndns.org":true,"homedns.org":true,"homeftp.net":true,"homeftp.org":true,"homeip.net":true,"homelinux.com":true,"homelinux.net":true,"homelinux.org":true,"homeunix.com":true,"homeunix.net":true,"homeunix.org":true,"iamallama.com":true,"in-the-band.net":true,"is-a-anarchist.com":true,"is-a-blogger.com":true,"is-a-bookkeeper.com":true,"is-a-bruinsfan.org":true,"is-a-bulls-fan.com":true,"is-a-candidate.org":true,"is-a-caterer.com":true,"is-a-celticsfan.org":true,"is-a-chef.com":true,"is-a-chef.net":true,"is-a-chef.org":true,"is-a-conservative.com":true,"is-a-cpa.com":true,"is-a-cubicle-slave.com":true,"is-a-democrat.com":true,"is-a-designer.com":true,"is-a-doctor.com":true,"is-a-financialadvisor.com":true,"is-a-geek.com":true,"is-a-geek.net":true,"is-a-geek.org":true,"is-a-green.com":true,"is-a-guru.com":true,"is-a-hard-worker.com":true,"is-a-hunter.com":true,"is-a-knight.org":true,"is-a-landscaper.com":true,"is-a-lawyer.com":true,"is-a-liberal.com":true,"is-a-libertarian.com":true,"is-a-linux-user.org":true,"is-a-llama.com":true,"is-a-musician.com":true,"is-a-nascarfan.com":true,"is-a-nurse.com":true,"is-a-painter.com":true,"is-a-patsfan.org":true,"is-a-personaltrainer.com":true,"is-a-photographer.com":true,"is-a-player.com":true,"is-a-republican.com":true,"is-a-rockstar.com":true,"is-a-socialist.com":true,"is-a-soxfan.org":true,"is-a-student.com":true,"is-a-teacher.com":true,"is-a-techie.com":true,"is-a-therapist.com":true,"is-an-accountant.com":true,"is-an-actor.com":true,"is-an-actress.com":true,"is-an-anarchist.com":true,"is-an-artist.com":true,"is-an-engineer.com":true,"is-an-entertainer.com":true,"is-by.us":true,"is-certified.com":true,"is-found.org":true,"is-gone.com":true,"is-into-anime.com":true,"is-into-cars.com":true,"is-into-cartoons.com":true,"is-into-games.com":true,"is-leet.com":true,"is-lost.org":true,"is-not-certified.com":true,"is-saved.org":true,"is-slick.com":true,"is-uberleet.com":true,"is-very-bad.org":true,"is-very-evil.org":true,"is-very-good.org":true,"is-very-nice.org":true,"is-very-sweet.org":true,"is-with-theband.com":true,"isa-geek.com":true,"isa-geek.net":true,"isa-geek.org":true,"isa-hockeynut.com":true,"issmarterthanyou.com":true,"isteingeek.de":true,"istmein.de":true,"kicks-ass.net":true,"kicks-ass.org":true,"knowsitall.info":true,"land-4-sale.us":true,"lebtimnetz.de":true,"leitungsen.de":true,"likes-pie.com":true,"likescandy.com":true,"merseine.nu":true,"mine.nu":true,"misconfused.org":true,"mypets.ws":true,"myphotos.cc":true,"neat-url.com":true,"office-on-the.net":true,"on-the-web.tv":true,"podzone.net":true,"podzone.org":true,"readmyblog.org":true,"saves-the-whales.com":true,"scrapper-site.net":true,"scrapping.cc":true,"selfip.biz":true,"selfip.com":true,"selfip.info":true,"selfip.net":true,"selfip.org":true,"sells-for-less.com":true,"sells-for-u.com":true,"sells-it.net":true,"sellsyourhome.org":true,"servebbs.com":true,"servebbs.net":true,"servebbs.org":true,"serveftp.net":true,"serveftp.org":true,"servegame.org":true,"shacknet.nu":true,"simple-url.com":true,"space-to-rent.com":true,"stuff-4-sale.org":true,"stuff-4-sale.us":true,"teaches-yoga.com":true,"thruhere.net":true,"traeumtgerade.de":true,"webhop.biz":true,"webhop.info":true,"webhop.net":true,"webhop.org":true,"worse-than.tv":true,"writesthisblog.com":true,"ddnss.de":true,"dyn.ddnss.de":true,"dyndns.ddnss.de":true,"dyndns1.de":true,"dyn-ip24.de":true,"home-webserver.de":true,"dyn.home-webserver.de":true,"myhome-server.de":true,"ddnss.org":true,"definima.net":true,"definima.io":true,"ddnsfree.com":true,"ddnsgeek.com":true,"giize.com":true,"gleeze.com":true,"kozow.com":true,"loseyourip.com":true,"ooguy.com":true,"theworkpc.com":true,"casacam.net":true,"dynu.net":true,"accesscam.org":true,"camdvr.org":true,"freeddns.org":true,"mywire.org":true,"webredirect.org":true,"myddns.rocks":true,"blogsite.xyz":true,"dynv6.net":true,"e4.cz":true,"mytuleap.com":true,"enonic.io":true,"customer.enonic.io":true,"eu.org":true,"al.eu.org":true,"asso.eu.org":true,"at.eu.org":true,"au.eu.org":true,"be.eu.org":true,"bg.eu.org":true,"ca.eu.org":true,"cd.eu.org":true,"ch.eu.org":true,"cn.eu.org":true,"cy.eu.org":true,"cz.eu.org":true,"de.eu.org":true,"dk.eu.org":true,"edu.eu.org":true,"ee.eu.org":true,"es.eu.org":true,"fi.eu.org":true,"fr.eu.org":true,"gr.eu.org":true,"hr.eu.org":true,"hu.eu.org":true,"ie.eu.org":true,"il.eu.org":true,"in.eu.org":true,"int.eu.org":true,"is.eu.org":true,"it.eu.org":true,"jp.eu.org":true,"kr.eu.org":true,"lt.eu.org":true,"lu.eu.org":true,"lv.eu.org":true,"mc.eu.org":true,"me.eu.org":true,"mk.eu.org":true,"mt.eu.org":true,"my.eu.org":true,"net.eu.org":true,"ng.eu.org":true,"nl.eu.org":true,"no.eu.org":true,"nz.eu.org":true,"paris.eu.org":true,"pl.eu.org":true,"pt.eu.org":true,"q-a.eu.org":true,"ro.eu.org":true,"ru.eu.org":true,"se.eu.org":true,"si.eu.org":true,"sk.eu.org":true,"tr.eu.org":true,"uk.eu.org":true,"us.eu.org":true,"eu-1.evennode.com":true,"eu-2.evennode.com":true,"eu-3.evennode.com":true,"eu-4.evennode.com":true,"us-1.evennode.com":true,"us-2.evennode.com":true,"us-3.evennode.com":true,"us-4.evennode.com":true,"twmail.cc":true,"twmail.net":true,"twmail.org":true,"mymailer.com.tw":true,"url.tw":true,"apps.fbsbx.com":true,"ru.net":true,"adygeya.ru":true,"bashkiria.ru":true,"bir.ru":true,"cbg.ru":true,"com.ru":true,"dagestan.ru":true,"grozny.ru":true,"kalmykia.ru":true,"kustanai.ru":true,"marine.ru":true,"mordovia.ru":true,"msk.ru":true,"mytis.ru":true,"nalchik.ru":true,"nov.ru":true,"pyatigorsk.ru":true,"spb.ru":true,"vladikavkaz.ru":true,"vladimir.ru":true,"abkhazia.su":true,"adygeya.su":true,"aktyubinsk.su":true,"arkhangelsk.su":true,"armenia.su":true,"ashgabad.su":true,"azerbaijan.su":true,"balashov.su":true,"bashkiria.su":true,"bryansk.su":true,"bukhara.su":true,"chimkent.su":true,"dagestan.su":true,"east-kazakhstan.su":true,"exnet.su":true,"georgia.su":true,"grozny.su":true,"ivanovo.su":true,"jambyl.su":true,"kalmykia.su":true,"kaluga.su":true,"karacol.su":true,"karaganda.su":true,"karelia.su":true,"khakassia.su":true,"krasnodar.su":true,"kurgan.su":true,"kustanai.su":true,"lenug.su":true,"mangyshlak.su":true,"mordovia.su":true,"msk.su":true,"murmansk.su":true,"nalchik.su":true,"navoi.su":true,"north-kazakhstan.su":true,"nov.su":true,"obninsk.su":true,"penza.su":true,"pokrovsk.su":true,"sochi.su":true,"spb.su":true,"tashkent.su":true,"termez.su":true,"togliatti.su":true,"troitsk.su":true,"tselinograd.su":true,"tula.su":true,"tuva.su":true,"vladikavkaz.su":true,"vladimir.su":true,"vologda.su":true,"channelsdvr.net":true,"fastlylb.net":true,"map.fastlylb.net":true,"freetls.fastly.net":true,"map.fastly.net":true,"a.prod.fastly.net":true,"global.prod.fastly.net":true,"a.ssl.fastly.net":true,"b.ssl.fastly.net":true,"global.ssl.fastly.net":true,"fhapp.xyz":true,"fedorainfracloud.org":true,"fedorapeople.org":true,"cloud.fedoraproject.org":true,"app.os.fedoraproject.org":true,"app.os.stg.fedoraproject.org":true,"filegear.me":true,"firebaseapp.com":true,"flynnhub.com":true,"flynnhosting.net":true,"freebox-os.com":true,"freeboxos.com":true,"fbx-os.fr":true,"fbxos.fr":true,"freebox-os.fr":true,"freeboxos.fr":true,"*.futurecms.at":true,"futurehosting.at":true,"futuremailing.at":true,"*.ex.ortsinfo.at":true,"*.kunden.ortsinfo.at":true,"*.statics.cloud":true,"service.gov.uk":true,"github.io":true,"githubusercontent.com":true,"gitlab.io":true,"homeoffice.gov.uk":true,"ro.im":true,"shop.ro":true,"goip.de":true,"*.0emm.com":true,"appspot.com":true,"blogspot.ae":true,"blogspot.al":true,"blogspot.am":true,"blogspot.ba":true,"blogspot.be":true,"blogspot.bg":true,"blogspot.bj":true,"blogspot.ca":true,"blogspot.cf":true,"blogspot.ch":true,"blogspot.cl":true,"blogspot.co.at":true,"blogspot.co.id":true,"blogspot.co.il":true,"blogspot.co.ke":true,"blogspot.co.nz":true,"blogspot.co.uk":true,"blogspot.co.za":true,"blogspot.com":true,"blogspot.com.ar":true,"blogspot.com.au":true,"blogspot.com.br":true,"blogspot.com.by":true,"blogspot.com.co":true,"blogspot.com.cy":true,"blogspot.com.ee":true,"blogspot.com.eg":true,"blogspot.com.es":true,"blogspot.com.mt":true,"blogspot.com.ng":true,"blogspot.com.tr":true,"blogspot.com.uy":true,"blogspot.cv":true,"blogspot.cz":true,"blogspot.de":true,"blogspot.dk":true,"blogspot.fi":true,"blogspot.fr":true,"blogspot.gr":true,"blogspot.hk":true,"blogspot.hr":true,"blogspot.hu":true,"blogspot.ie":true,"blogspot.in":true,"blogspot.is":true,"blogspot.it":true,"blogspot.jp":true,"blogspot.kr":true,"blogspot.li":true,"blogspot.lt":true,"blogspot.lu":true,"blogspot.md":true,"blogspot.mk":true,"blogspot.mr":true,"blogspot.mx":true,"blogspot.my":true,"blogspot.nl":true,"blogspot.no":true,"blogspot.pe":true,"blogspot.pt":true,"blogspot.qa":true,"blogspot.re":true,"blogspot.ro":true,"blogspot.rs":true,"blogspot.ru":true,"blogspot.se":true,"blogspot.sg":true,"blogspot.si":true,"blogspot.sk":true,"blogspot.sn":true,"blogspot.td":true,"blogspot.tw":true,"blogspot.ug":true,"blogspot.vn":true,"cloudfunctions.net":true,"cloud.goog":true,"codespot.com":true,"googleapis.com":true,"googlecode.com":true,"pagespeedmobilizer.com":true,"publishproxy.com":true,"withgoogle.com":true,"withyoutube.com":true,"hashbang.sh":true,"hasura-app.io":true,"hepforge.org":true,"herokuapp.com":true,"herokussl.com":true,"moonscale.net":true,"iki.fi":true,"biz.at":true,"info.at":true,"info.cx":true,"ac.leg.br":true,"al.leg.br":true,"am.leg.br":true,"ap.leg.br":true,"ba.leg.br":true,"ce.leg.br":true,"df.leg.br":true,"es.leg.br":true,"go.leg.br":true,"ma.leg.br":true,"mg.leg.br":true,"ms.leg.br":true,"mt.leg.br":true,"pa.leg.br":true,"pb.leg.br":true,"pe.leg.br":true,"pi.leg.br":true,"pr.leg.br":true,"rj.leg.br":true,"rn.leg.br":true,"ro.leg.br":true,"rr.leg.br":true,"rs.leg.br":true,"sc.leg.br":true,"se.leg.br":true,"sp.leg.br":true,"to.leg.br":true,"pixolino.com":true,"ipifony.net":true,"*.triton.zone":true,"*.cns.joyent.com":true,"js.org":true,"keymachine.de":true,"knightpoint.systems":true,"co.krd":true,"edu.krd":true,"git-repos.de":true,"lcube-server.de":true,"svn-repos.de":true,"linkyard.cloud":true,"linkyard-cloud.ch":true,"we.bs":true,"barsy.bg":true,"barsyonline.com":true,"barsy.de":true,"barsy.eu":true,"barsy.in":true,"barsy.net":true,"barsy.online":true,"barsy.support":true,"*.magentosite.cloud":true,"hb.cldmail.ru":true,"cloud.metacentrum.cz":true,"custom.metacentrum.cz":true,"meteorapp.com":true,"eu.meteorapp.com":true,"co.pl":true,"azurewebsites.net":true,"azure-mobile.net":true,"cloudapp.net":true,"mozilla-iot.org":true,"bmoattachments.org":true,"net.ru":true,"org.ru":true,"pp.ru":true,"bitballoon.com":true,"netlify.com":true,"4u.com":true,"ngrok.io":true,"nh-serv.co.uk":true,"nfshost.com":true,"nsupdate.info":true,"nerdpol.ovh":true,"blogsyte.com":true,"brasilia.me":true,"cable-modem.org":true,"ciscofreak.com":true,"collegefan.org":true,"couchpotatofries.org":true,"damnserver.com":true,"ddns.me":true,"ditchyourip.com":true,"dnsfor.me":true,"dnsiskinky.com":true,"dvrcam.info":true,"dynns.com":true,"eating-organic.net":true,"fantasyleague.cc":true,"geekgalaxy.com":true,"golffan.us":true,"health-carereform.com":true,"homesecuritymac.com":true,"homesecuritypc.com":true,"hopto.me":true,"ilovecollege.info":true,"loginto.me":true,"mlbfan.org":true,"mmafan.biz":true,"myactivedirectory.com":true,"mydissent.net":true,"myeffect.net":true,"mymediapc.net":true,"mypsx.net":true,"mysecuritycamera.com":true,"mysecuritycamera.net":true,"mysecuritycamera.org":true,"net-freaks.com":true,"nflfan.org":true,"nhlfan.net":true,"no-ip.ca":true,"no-ip.co.uk":true,"no-ip.net":true,"noip.us":true,"onthewifi.com":true,"pgafan.net":true,"point2this.com":true,"pointto.us":true,"privatizehealthinsurance.net":true,"quicksytes.com":true,"read-books.org":true,"securitytactics.com":true,"serveexchange.com":true,"servehumour.com":true,"servep2p.com":true,"servesarcasm.com":true,"stufftoread.com":true,"ufcfan.org":true,"unusualperson.com":true,"workisboring.com":true,"3utilities.com":true,"bounceme.net":true,"ddns.net":true,"ddnsking.com":true,"gotdns.ch":true,"hopto.org":true,"myftp.biz":true,"myftp.org":true,"myvnc.com":true,"no-ip.biz":true,"no-ip.info":true,"no-ip.org":true,"noip.me":true,"redirectme.net":true,"servebeer.com":true,"serveblog.net":true,"servecounterstrike.com":true,"serveftp.com":true,"servegame.com":true,"servehalflife.com":true,"servehttp.com":true,"serveirc.com":true,"serveminecraft.net":true,"servemp3.com":true,"servepics.com":true,"servequake.com":true,"sytes.net":true,"webhop.me":true,"zapto.org":true,"stage.nodeart.io":true,"nodum.co":true,"nodum.io":true,"nyc.mn":true,"nom.ae":true,"nom.ai":true,"nom.al":true,"nym.by":true,"nym.bz":true,"nom.cl":true,"nom.gd":true,"nom.gl":true,"nym.gr":true,"nom.gt":true,"nom.hn":true,"nom.im":true,"nym.kz":true,"nym.la":true,"nom.li":true,"nym.li":true,"nym.lt":true,"nym.lu":true,"nym.me":true,"nom.mk":true,"nym.mx":true,"nom.nu":true,"nym.nz":true,"nym.pe":true,"nym.pt":true,"nom.pw":true,"nom.qa":true,"nom.rs":true,"nom.si":true,"nym.sk":true,"nym.su":true,"nym.sx":true,"nym.tw":true,"nom.ug":true,"nom.uy":true,"nom.vc":true,"nom.vg":true,"cya.gg":true,"nid.io":true,"opencraft.hosting":true,"operaunite.com":true,"outsystemscloud.com":true,"ownprovider.com":true,"oy.lc":true,"pgfog.com":true,"pagefrontapp.com":true,"art.pl":true,"gliwice.pl":true,"krakow.pl":true,"poznan.pl":true,"wroc.pl":true,"zakopane.pl":true,"pantheonsite.io":true,"gotpantheon.com":true,"mypep.link":true,"on-web.fr":true,"*.platform.sh":true,"*.platformsh.site":true,"xen.prgmr.com":true,"priv.at":true,"protonet.io":true,"chirurgiens-dentistes-en-france.fr":true,"byen.site":true,"qa2.com":true,"dev-myqnapcloud.com":true,"alpha-myqnapcloud.com":true,"myqnapcloud.com":true,"*.quipelements.com":true,"vapor.cloud":true,"vaporcloud.io":true,"rackmaze.com":true,"rackmaze.net":true,"rhcloud.com":true,"resindevice.io":true,"devices.resinstaging.io":true,"hzc.io":true,"wellbeingzone.eu":true,"ptplus.fit":true,"wellbeingzone.co.uk":true,"sandcats.io":true,"logoip.de":true,"logoip.com":true,"schokokeks.net":true,"scrysec.com":true,"firewall-gateway.com":true,"firewall-gateway.de":true,"my-gateway.de":true,"my-router.de":true,"spdns.de":true,"spdns.eu":true,"firewall-gateway.net":true,"my-firewall.org":true,"myfirewall.org":true,"spdns.org":true,"*.s5y.io":true,"*.sensiosite.cloud":true,"biz.ua":true,"co.ua":true,"pp.ua":true,"shiftedit.io":true,"myshopblocks.com":true,"1kapp.com":true,"appchizi.com":true,"applinzi.com":true,"sinaapp.com":true,"vipsinaapp.com":true,"bounty-full.com":true,"alpha.bounty-full.com":true,"beta.bounty-full.com":true,"static.land":true,"dev.static.land":true,"sites.static.land":true,"apps.lair.io":true,"*.stolos.io":true,"spacekit.io":true,"stackspace.space":true,"storj.farm":true,"temp-dns.com":true,"diskstation.me":true,"dscloud.biz":true,"dscloud.me":true,"dscloud.mobi":true,"dsmynas.com":true,"dsmynas.net":true,"dsmynas.org":true,"familyds.com":true,"familyds.net":true,"familyds.org":true,"i234.me":true,"myds.me":true,"synology.me":true,"vpnplus.to":true,"taifun-dns.de":true,"gda.pl":true,"gdansk.pl":true,"gdynia.pl":true,"med.pl":true,"sopot.pl":true,"cust.dev.thingdust.io":true,"cust.disrec.thingdust.io":true,"cust.prod.thingdust.io":true,"cust.testing.thingdust.io":true,"bloxcms.com":true,"townnews-staging.com":true,"12hp.at":true,"2ix.at":true,"4lima.at":true,"lima-city.at":true,"12hp.ch":true,"2ix.ch":true,"4lima.ch":true,"lima-city.ch":true,"trafficplex.cloud":true,"de.cool":true,"12hp.de":true,"2ix.de":true,"4lima.de":true,"lima-city.de":true,"1337.pictures":true,"clan.rip":true,"lima-city.rocks":true,"webspace.rocks":true,"lima.zone":true,"*.transurl.be":true,"*.transurl.eu":true,"*.transurl.nl":true,"tuxfamily.org":true,"dd-dns.de":true,"diskstation.eu":true,"diskstation.org":true,"dray-dns.de":true,"draydns.de":true,"dyn-vpn.de":true,"dynvpn.de":true,"mein-vigor.de":true,"my-vigor.de":true,"my-wan.de":true,"syno-ds.de":true,"synology-diskstation.de":true,"synology-ds.de":true,"uber.space":true,"hk.com":true,"hk.org":true,"ltd.hk":true,"inc.hk":true,"lib.de.us":true,"2038.io":true,"router.management":true,"v-info.info":true,"wedeploy.io":true,"wedeploy.me":true,"wedeploy.sh":true,"remotewd.com":true,"wmflabs.org":true,"cistron.nl":true,"demon.nl":true,"xs4all.space":true,"official.academy":true,"yolasite.com":true,"ybo.faith":true,"yombo.me":true,"homelink.one":true,"ybo.party":true,"ybo.review":true,"ybo.science":true,"ybo.trade":true,"za.net":true,"za.org":true,"now.sh":true});
-
-// END of automatically generated file
-
-
-/***/ }),
-/* 416 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * Copyright (c) 2015, Salesforce.com, Inc.
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- *
- * 3. Neither the name of Salesforce.com nor the names of its contributors may
- * be used to endorse or promote products derived from this software without
- * specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
-
-/*jshint unused:false */
-
-function Store() {
-}
-exports.Store = Store;
-
-// Stores may be synchronous, but are still required to use a
-// Continuation-Passing Style API.  The CookieJar itself will expose a "*Sync"
-// API that converts from synchronous-callbacks to imperative style.
-Store.prototype.synchronous = false;
-
-Store.prototype.findCookie = function(domain, path, key, cb) {
-  throw new Error('findCookie is not implemented');
-};
-
-Store.prototype.findCookies = function(domain, path, cb) {
-  throw new Error('findCookies is not implemented');
-};
-
-Store.prototype.putCookie = function(cookie, cb) {
-  throw new Error('putCookie is not implemented');
-};
-
-Store.prototype.updateCookie = function(oldCookie, newCookie, cb) {
-  // recommended default implementation:
-  // return this.putCookie(newCookie, cb);
-  throw new Error('updateCookie is not implemented');
-};
-
-Store.prototype.removeCookie = function(domain, path, key, cb) {
-  throw new Error('removeCookie is not implemented');
-};
-
-Store.prototype.removeCookies = function(domain, path, cb) {
-  throw new Error('removeCookies is not implemented');
-};
-
-Store.prototype.getAllCookies = function(cb) {
-  throw new Error('getAllCookies is not implemented (therefore jar cannot be serialized)');
-};
-
-
-/***/ }),
-/* 417 */
-/***/ (function(module, exports) {
-
-module.exports = function () {
-    // see https://code.google.com/p/v8/wiki/JavaScriptStackTraceApi
-    var origPrepareStackTrace = Error.prepareStackTrace;
-    Error.prepareStackTrace = function (_, stack) { return stack; };
-    var stack = (new Error()).stack;
-    Error.prepareStackTrace = origPrepareStackTrace;
-    return stack[2].getFileName();
-};
-
-
-/***/ }),
-/* 418 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var path = __webpack_require__(0);
-var fs = __webpack_require__(5);
-var parse = path.parse || __webpack_require__(774);
-
-module.exports = function nodeModulesPaths(start, opts) {
-    var modules = opts && opts.moduleDirectory
-        ? [].concat(opts.moduleDirectory)
-        : ['node_modules'];
-
-    // ensure that `start` is an absolute path at this point,
-    // resolving against the process' current working directory
-    var absoluteStart = path.resolve(start);
-
-    if (opts && opts.preserveSymlinks === false) {
-        try {
-            absoluteStart = fs.realpathSync(absoluteStart);
-        } catch (err) {
-            if (err.code !== 'ENOENT') {
-                throw err;
-            }
-        }
-    }
-
-    var prefix = '/';
-    if (/^([A-Za-z]:)/.test(absoluteStart)) {
-        prefix = '';
-    } else if (/^\\\\/.test(absoluteStart)) {
-        prefix = '\\\\';
-    }
-
-    var paths = [absoluteStart];
-    var parsed = parse(absoluteStart);
-    while (parsed.dir !== paths[paths.length - 1]) {
-        paths.push(parsed.dir);
-        parsed = parse(parsed.dir);
-    }
-
-    var dirs = paths.reduce(function (dirs, aPath) {
-        return dirs.concat(modules.map(function (moduleDir) {
-            return path.join(prefix, aPath, moduleDir);
-        }));
-    }, []);
-
-    return opts && opts.paths ? dirs.concat(opts.paths) : dirs;
-};
-
-
-/***/ }),
-/* 419 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return BehaviorSubject; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_ObjectUnsubscribedError__ = __webpack_require__(189);
-/** PURE_IMPORTS_START tslib,_Subject,_util_ObjectUnsubscribedError PURE_IMPORTS_END */
-
-
-
-var BehaviorSubject = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BehaviorSubject, _super);
-    function BehaviorSubject(_value) {
-        var _this = _super.call(this) || this;
-        _this._value = _value;
-        return _this;
-    }
-    Object.defineProperty(BehaviorSubject.prototype, "value", {
-        get: function () {
-            return this.getValue();
-        },
-        enumerable: true,
-        configurable: true
-    });
-    BehaviorSubject.prototype._subscribe = function (subscriber) {
-        var subscription = _super.prototype._subscribe.call(this, subscriber);
-        if (subscription && !subscription.closed) {
-            subscriber.next(this._value);
-        }
-        return subscription;
-    };
-    BehaviorSubject.prototype.getValue = function () {
-        if (this.hasError) {
-            throw this.thrownError;
-        }
-        else if (this.closed) {
-            throw new __WEBPACK_IMPORTED_MODULE_2__util_ObjectUnsubscribedError__["a" /* ObjectUnsubscribedError */]();
-        }
-        else {
-            return this._value;
-        }
-    };
-    BehaviorSubject.prototype.next = function (value) {
-        _super.prototype.next.call(this, this._value = value);
-    };
-    return BehaviorSubject;
-}(__WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]));
-
-//# sourceMappingURL=BehaviorSubject.js.map
-
-
-/***/ }),
-/* 420 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return empty; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__config__ = __webpack_require__(185);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_hostReportError__ = __webpack_require__(323);
-/** PURE_IMPORTS_START _config,_util_hostReportError PURE_IMPORTS_END */
-
-
-var empty = {
-    closed: true,
-    next: function (value) { },
-    error: function (err) {
-        if (__WEBPACK_IMPORTED_MODULE_0__config__["a" /* config */].useDeprecatedSynchronousErrorHandling) {
-            throw err;
-        }
-        else {
-            __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_hostReportError__["a" /* hostReportError */])(err);
-        }
-    },
-    complete: function () { }
-};
-//# sourceMappingURL=Observer.js.map
-
-
-/***/ }),
-/* 421 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Scheduler; });
-var Scheduler = /*@__PURE__*/ (function () {
-    function Scheduler(SchedulerAction, now) {
-        if (now === void 0) {
-            now = Scheduler.now;
-        }
-        this.SchedulerAction = SchedulerAction;
-        this.now = now;
-    }
-    Scheduler.prototype.schedule = function (work, delay, state) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        return new this.SchedulerAction(this, work).schedule(state, delay);
-    };
-    Scheduler.now = function () { return Date.now(); };
-    return Scheduler;
-}());
-
-//# sourceMappingURL=Scheduler.js.map
-
-
-/***/ }),
-/* 422 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SubjectSubscription; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/** PURE_IMPORTS_START tslib,_Subscription PURE_IMPORTS_END */
-
-
-var SubjectSubscription = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SubjectSubscription, _super);
-    function SubjectSubscription(subject, subscriber) {
-        var _this = _super.call(this) || this;
-        _this.subject = subject;
-        _this.subscriber = subscriber;
-        _this.closed = false;
-        return _this;
-    }
-    SubjectSubscription.prototype.unsubscribe = function () {
-        if (this.closed) {
-            return;
-        }
-        this.closed = true;
-        var subject = this.subject;
-        var observers = subject.observers;
-        this.subject = null;
-        if (!observers || observers.length === 0 || subject.isStopped || subject.closed) {
-            return;
-        }
-        var subscriberIndex = observers.indexOf(this.subscriber);
-        if (subscriberIndex !== -1) {
-            observers.splice(subscriberIndex, 1);
-        }
-    };
-    return SubjectSubscription;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]));
-
-//# sourceMappingURL=SubjectSubscription.js.map
-
-
-/***/ }),
-/* 423 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ConnectableObservable; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return connectableObservableDescriptor; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__operators_refCount__ = __webpack_require__(316);
-/** PURE_IMPORTS_START tslib,_Subject,_Observable,_Subscriber,_Subscription,_operators_refCount PURE_IMPORTS_END */
-
-
-
-
-
-
-var ConnectableObservable = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ConnectableObservable, _super);
-    function ConnectableObservable(source, subjectFactory) {
-        var _this = _super.call(this) || this;
-        _this.source = source;
-        _this.subjectFactory = subjectFactory;
-        _this._refCount = 0;
-        _this._isComplete = false;
-        return _this;
-    }
-    ConnectableObservable.prototype._subscribe = function (subscriber) {
-        return this.getSubject().subscribe(subscriber);
-    };
-    ConnectableObservable.prototype.getSubject = function () {
-        var subject = this._subject;
-        if (!subject || subject.isStopped) {
-            this._subject = this.subjectFactory();
-        }
-        return this._subject;
-    };
-    ConnectableObservable.prototype.connect = function () {
-        var connection = this._connection;
-        if (!connection) {
-            this._isComplete = false;
-            connection = this._connection = new __WEBPACK_IMPORTED_MODULE_4__Subscription__["a" /* Subscription */]();
-            connection.add(this.source
-                .subscribe(new ConnectableSubscriber(this.getSubject(), this)));
-            if (connection.closed) {
-                this._connection = null;
-                connection = __WEBPACK_IMPORTED_MODULE_4__Subscription__["a" /* Subscription */].EMPTY;
-            }
-            else {
-                this._connection = connection;
-            }
-        }
-        return connection;
-    };
-    ConnectableObservable.prototype.refCount = function () {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__operators_refCount__["a" /* refCount */])()(this);
-    };
-    return ConnectableObservable;
-}(__WEBPACK_IMPORTED_MODULE_2__Observable__["a" /* Observable */]));
-
-var connectableProto = ConnectableObservable.prototype;
-var connectableObservableDescriptor = {
-    operator: { value: null },
-    _refCount: { value: 0, writable: true },
-    _subject: { value: null, writable: true },
-    _connection: { value: null, writable: true },
-    _subscribe: { value: connectableProto._subscribe },
-    _isComplete: { value: connectableProto._isComplete, writable: true },
-    getSubject: { value: connectableProto.getSubject },
-    connect: { value: connectableProto.connect },
-    refCount: { value: connectableProto.refCount }
-};
-var ConnectableSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ConnectableSubscriber, _super);
-    function ConnectableSubscriber(destination, connectable) {
-        var _this = _super.call(this, destination) || this;
-        _this.connectable = connectable;
-        return _this;
-    }
-    ConnectableSubscriber.prototype._error = function (err) {
-        this._unsubscribe();
-        _super.prototype._error.call(this, err);
-    };
-    ConnectableSubscriber.prototype._complete = function () {
-        this.connectable._isComplete = true;
-        this._unsubscribe();
-        _super.prototype._complete.call(this);
-    };
-    ConnectableSubscriber.prototype._unsubscribe = function () {
-        var connectable = this.connectable;
-        if (connectable) {
-            this.connectable = null;
-            var connection = connectable._connection;
-            connectable._refCount = 0;
-            connectable._subject = null;
-            connectable._connection = null;
-            if (connection) {
-                connection.unsubscribe();
-            }
-        }
-    };
-    return ConnectableSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subject__["b" /* SubjectSubscriber */]));
-var RefCountOperator = /*@__PURE__*/ (function () {
-    function RefCountOperator(connectable) {
-        this.connectable = connectable;
-    }
-    RefCountOperator.prototype.call = function (subscriber, source) {
-        var connectable = this.connectable;
-        connectable._refCount++;
-        var refCounter = new RefCountSubscriber(subscriber, connectable);
-        var subscription = source.subscribe(refCounter);
-        if (!refCounter.closed) {
-            refCounter.connection = connectable.connect();
-        }
-        return subscription;
-    };
-    return RefCountOperator;
-}());
-var RefCountSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RefCountSubscriber, _super);
-    function RefCountSubscriber(destination, connectable) {
-        var _this = _super.call(this, destination) || this;
-        _this.connectable = connectable;
-        return _this;
-    }
-    RefCountSubscriber.prototype._unsubscribe = function () {
-        var connectable = this.connectable;
-        if (!connectable) {
-            this.connection = null;
-            return;
-        }
-        this.connectable = null;
-        var refCount = connectable._refCount;
-        if (refCount <= 0) {
-            this.connection = null;
-            return;
-        }
-        connectable._refCount = refCount - 1;
-        if (refCount > 1) {
-            this.connection = null;
-            return;
-        }
-        var connection = this.connection;
-        var sharedConnection = connectable._connection;
-        this.connection = null;
-        if (sharedConnection && (!connection || sharedConnection === connection)) {
-            sharedConnection.unsubscribe();
-        }
-    };
-    return RefCountSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=ConnectableObservable.js.map
-
-
-/***/ }),
-/* 424 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = merge;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isScheduler__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__operators_mergeAll__ = __webpack_require__(315);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__fromArray__ = __webpack_require__(85);
-/** PURE_IMPORTS_START _Observable,_util_isScheduler,_operators_mergeAll,_fromArray PURE_IMPORTS_END */
-
-
-
-
-function merge() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    var concurrent = Number.POSITIVE_INFINITY;
-    var scheduler = null;
-    var last = observables[observables.length - 1];
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isScheduler__["a" /* isScheduler */])(last)) {
-        scheduler = observables.pop();
-        if (observables.length > 1 && typeof observables[observables.length - 1] === 'number') {
-            concurrent = observables.pop();
-        }
-    }
-    else if (typeof last === 'number') {
-        concurrent = observables.pop();
-    }
-    if (scheduler === null && observables.length === 1 && observables[0] instanceof __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */]) {
-        return observables[0];
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__operators_mergeAll__["a" /* mergeAll */])(concurrent)(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__fromArray__["a" /* fromArray */])(observables, scheduler));
-}
-//# sourceMappingURL=merge.js.map
-
-
-/***/ }),
-/* 425 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return NEVER; });
-/* harmony export (immutable) */ __webpack_exports__["a"] = never;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_noop__ = __webpack_require__(191);
-/** PURE_IMPORTS_START _Observable,_util_noop PURE_IMPORTS_END */
-
-
-var NEVER = /*@__PURE__*/ new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](__WEBPACK_IMPORTED_MODULE_1__util_noop__["a" /* noop */]);
-function never() {
-    return NEVER;
-}
-//# sourceMappingURL=never.js.map
-
-
-/***/ }),
-/* 426 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = race;
-/* unused harmony export RaceOperator */
-/* unused harmony export RaceSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__fromArray__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_util_isArray,_fromArray,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-function race() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    if (observables.length === 1) {
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isArray__["a" /* isArray */])(observables[0])) {
-            observables = observables[0];
-        }
-        else {
-            return observables[0];
-        }
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__fromArray__["a" /* fromArray */])(observables, undefined).lift(new RaceOperator());
-}
-var RaceOperator = /*@__PURE__*/ (function () {
-    function RaceOperator() {
-    }
-    RaceOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new RaceSubscriber(subscriber));
-    };
-    return RaceOperator;
-}());
-
-var RaceSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RaceSubscriber, _super);
-    function RaceSubscriber(destination) {
-        var _this = _super.call(this, destination) || this;
-        _this.hasFirst = false;
-        _this.observables = [];
-        _this.subscriptions = [];
-        return _this;
-    }
-    RaceSubscriber.prototype._next = function (observable) {
-        this.observables.push(observable);
-    };
-    RaceSubscriber.prototype._complete = function () {
-        var observables = this.observables;
-        var len = observables.length;
-        if (len === 0) {
-            this.destination.complete();
-        }
-        else {
-            for (var i = 0; i < len && !this.hasFirst; i++) {
-                var observable = observables[i];
-                var subscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(this, observable, observable, i);
-                if (this.subscriptions) {
-                    this.subscriptions.push(subscription);
-                }
-                this.add(subscription);
-            }
-            this.observables = null;
-        }
-    };
-    RaceSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        if (!this.hasFirst) {
-            this.hasFirst = true;
-            for (var i = 0; i < this.subscriptions.length; i++) {
-                if (i !== outerIndex) {
-                    var subscription = this.subscriptions[i];
-                    subscription.unsubscribe();
-                    this.remove(subscription);
-                }
-            }
-            this.subscriptions = null;
-        }
-        this.destination.next(innerValue);
-    };
-    return RaceSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-
-//# sourceMappingURL=race.js.map
-
-
-/***/ }),
-/* 427 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = timer;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isNumeric__ = __webpack_require__(190);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START _Observable,_scheduler_async,_util_isNumeric,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-
-function timer(dueTime, periodOrScheduler, scheduler) {
-    if (dueTime === void 0) {
-        dueTime = 0;
-    }
-    var period = -1;
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isNumeric__["a" /* isNumeric */])(periodOrScheduler)) {
-        period = Number(periodOrScheduler) < 1 && 1 || Number(periodOrScheduler);
-    }
-    else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_isScheduler__["a" /* isScheduler */])(periodOrScheduler)) {
-        scheduler = periodOrScheduler;
-    }
-    if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_isScheduler__["a" /* isScheduler */])(scheduler)) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_1__scheduler_async__["a" /* async */];
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var due = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isNumeric__["a" /* isNumeric */])(dueTime)
-            ? dueTime
-            : (+dueTime - scheduler.now());
-        return scheduler.schedule(dispatch, due, {
-            index: 0, period: period, subscriber: subscriber
-        });
-    });
-}
-function dispatch(state) {
-    var index = state.index, period = state.period, subscriber = state.subscriber;
-    subscriber.next(index);
-    if (subscriber.closed) {
-        return;
-    }
-    else if (period === -1) {
-        return subscriber.complete();
-    }
-    state.index = index + 1;
-    this.schedule(state, period);
-}
-//# sourceMappingURL=timer.js.map
-
-
-/***/ }),
-/* 428 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = audit;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-function audit(durationSelector) {
-    return function auditOperatorFunction(source) {
-        return source.lift(new AuditOperator(durationSelector));
-    };
-}
-var AuditOperator = /*@__PURE__*/ (function () {
-    function AuditOperator(durationSelector) {
-        this.durationSelector = durationSelector;
-    }
-    AuditOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new AuditSubscriber(subscriber, this.durationSelector));
-    };
-    return AuditOperator;
-}());
-var AuditSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AuditSubscriber, _super);
-    function AuditSubscriber(destination, durationSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.durationSelector = durationSelector;
-        _this.hasValue = false;
-        return _this;
-    }
-    AuditSubscriber.prototype._next = function (value) {
-        this.value = value;
-        this.hasValue = true;
-        if (!this.throttled) {
-            var duration = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_tryCatch__["a" /* tryCatch */])(this.durationSelector)(value);
-            if (duration === __WEBPACK_IMPORTED_MODULE_2__util_errorObject__["a" /* errorObject */]) {
-                this.destination.error(__WEBPACK_IMPORTED_MODULE_2__util_errorObject__["a" /* errorObject */].e);
-            }
-            else {
-                var innerSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(this, duration);
-                if (!innerSubscription || innerSubscription.closed) {
-                    this.clearThrottle();
-                }
-                else {
-                    this.add(this.throttled = innerSubscription);
-                }
-            }
-        }
-    };
-    AuditSubscriber.prototype.clearThrottle = function () {
-        var _a = this, value = _a.value, hasValue = _a.hasValue, throttled = _a.throttled;
-        if (throttled) {
-            this.remove(throttled);
-            this.throttled = null;
-            throttled.unsubscribe();
-        }
-        if (hasValue) {
-            this.value = null;
-            this.hasValue = false;
-            this.destination.next(value);
-        }
-    };
-    AuditSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex) {
-        this.clearThrottle();
-    };
-    AuditSubscriber.prototype.notifyComplete = function () {
-        this.clearThrottle();
-    };
-    return AuditSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=audit.js.map
-
-
-/***/ }),
-/* 429 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = concatAll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__mergeAll__ = __webpack_require__(315);
-/** PURE_IMPORTS_START _mergeAll PURE_IMPORTS_END */
-
-function concatAll() {
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__mergeAll__["a" /* mergeAll */])(1);
-}
-//# sourceMappingURL=concatAll.js.map
-
-
-/***/ }),
-/* 430 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = concatMap;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__mergeMap__ = __webpack_require__(148);
-/** PURE_IMPORTS_START _mergeMap PURE_IMPORTS_END */
-
-function concatMap(project, resultSelector) {
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__mergeMap__["a" /* mergeMap */])(project, resultSelector, 1);
-}
-//# sourceMappingURL=concatMap.js.map
-
-
-/***/ }),
-/* 431 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = distinctUntilChanged;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_errorObject__ = __webpack_require__(48);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_tryCatch,_util_errorObject PURE_IMPORTS_END */
-
-
-
-
-function distinctUntilChanged(compare, keySelector) {
-    return function (source) { return source.lift(new DistinctUntilChangedOperator(compare, keySelector)); };
-}
-var DistinctUntilChangedOperator = /*@__PURE__*/ (function () {
-    function DistinctUntilChangedOperator(compare, keySelector) {
-        this.compare = compare;
-        this.keySelector = keySelector;
-    }
-    DistinctUntilChangedOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DistinctUntilChangedSubscriber(subscriber, this.compare, this.keySelector));
-    };
-    return DistinctUntilChangedOperator;
-}());
-var DistinctUntilChangedSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DistinctUntilChangedSubscriber, _super);
-    function DistinctUntilChangedSubscriber(destination, compare, keySelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.keySelector = keySelector;
-        _this.hasKey = false;
-        if (typeof compare === 'function') {
-            _this.compare = compare;
-        }
-        return _this;
-    }
-    DistinctUntilChangedSubscriber.prototype.compare = function (x, y) {
-        return x === y;
-    };
-    DistinctUntilChangedSubscriber.prototype._next = function (value) {
-        var keySelector = this.keySelector;
-        var key = value;
-        if (keySelector) {
-            key = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(this.keySelector)(value);
-            if (key === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-                return this.destination.error(__WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */].e);
-            }
-        }
-        var result = false;
-        if (this.hasKey) {
-            result = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(this.compare)(this.key, key);
-            if (result === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-                return this.destination.error(__WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */].e);
-            }
-        }
-        else {
-            this.hasKey = true;
-        }
-        if (Boolean(result) === false) {
-            this.key = key;
-            this.destination.next(value);
-        }
-    };
-    return DistinctUntilChangedSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=distinctUntilChanged.js.map
-
-
-/***/ }),
-/* 432 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = find;
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return FindValueOperator; });
-/* unused harmony export FindValueSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function find(predicate, thisArg) {
-    if (typeof predicate !== 'function') {
-        throw new TypeError('predicate is not a function');
-    }
-    return function (source) { return source.lift(new FindValueOperator(predicate, source, false, thisArg)); };
-}
-var FindValueOperator = /*@__PURE__*/ (function () {
-    function FindValueOperator(predicate, source, yieldIndex, thisArg) {
-        this.predicate = predicate;
-        this.source = source;
-        this.yieldIndex = yieldIndex;
-        this.thisArg = thisArg;
-    }
-    FindValueOperator.prototype.call = function (observer, source) {
-        return source.subscribe(new FindValueSubscriber(observer, this.predicate, this.source, this.yieldIndex, this.thisArg));
-    };
-    return FindValueOperator;
-}());
-
-var FindValueSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](FindValueSubscriber, _super);
-    function FindValueSubscriber(destination, predicate, source, yieldIndex, thisArg) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.source = source;
-        _this.yieldIndex = yieldIndex;
-        _this.thisArg = thisArg;
-        _this.index = 0;
-        return _this;
-    }
-    FindValueSubscriber.prototype.notifyComplete = function (value) {
-        var destination = this.destination;
-        destination.next(value);
-        destination.complete();
-        this.unsubscribe();
-    };
-    FindValueSubscriber.prototype._next = function (value) {
-        var _a = this, predicate = _a.predicate, thisArg = _a.thisArg;
-        var index = this.index++;
-        try {
-            var result = predicate.call(thisArg || this, value, index, this.source);
-            if (result) {
-                this.notifyComplete(this.yieldIndex ? index : value);
-            }
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    };
-    FindValueSubscriber.prototype._complete = function () {
-        this.notifyComplete(this.yieldIndex ? -1 : undefined);
-    };
-    return FindValueSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-
-//# sourceMappingURL=find.js.map
-
-
-/***/ }),
-/* 433 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["b"] = groupBy;
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return GroupedObservable; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__Subject__ = __webpack_require__(36);
-/** PURE_IMPORTS_START tslib,_Subscriber,_Subscription,_Observable,_Subject PURE_IMPORTS_END */
-
-
-
-
-
-function groupBy(keySelector, elementSelector, durationSelector, subjectSelector) {
-    return function (source) {
-        return source.lift(new GroupByOperator(keySelector, elementSelector, durationSelector, subjectSelector));
-    };
-}
-var GroupByOperator = /*@__PURE__*/ (function () {
-    function GroupByOperator(keySelector, elementSelector, durationSelector, subjectSelector) {
-        this.keySelector = keySelector;
-        this.elementSelector = elementSelector;
-        this.durationSelector = durationSelector;
-        this.subjectSelector = subjectSelector;
-    }
-    GroupByOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new GroupBySubscriber(subscriber, this.keySelector, this.elementSelector, this.durationSelector, this.subjectSelector));
-    };
-    return GroupByOperator;
-}());
-var GroupBySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](GroupBySubscriber, _super);
-    function GroupBySubscriber(destination, keySelector, elementSelector, durationSelector, subjectSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.keySelector = keySelector;
-        _this.elementSelector = elementSelector;
-        _this.durationSelector = durationSelector;
-        _this.subjectSelector = subjectSelector;
-        _this.groups = null;
-        _this.attemptedToUnsubscribe = false;
-        _this.count = 0;
-        return _this;
-    }
-    GroupBySubscriber.prototype._next = function (value) {
-        var key;
-        try {
-            key = this.keySelector(value);
-        }
-        catch (err) {
-            this.error(err);
-            return;
-        }
-        this._group(value, key);
-    };
-    GroupBySubscriber.prototype._group = function (value, key) {
-        var groups = this.groups;
-        if (!groups) {
-            groups = this.groups = new Map();
-        }
-        var group = groups.get(key);
-        var element;
-        if (this.elementSelector) {
-            try {
-                element = this.elementSelector(value);
-            }
-            catch (err) {
-                this.error(err);
-            }
-        }
-        else {
-            element = value;
-        }
-        if (!group) {
-            group = (this.subjectSelector ? this.subjectSelector() : new __WEBPACK_IMPORTED_MODULE_4__Subject__["a" /* Subject */]());
-            groups.set(key, group);
-            var groupedObservable = new GroupedObservable(key, group, this);
-            this.destination.next(groupedObservable);
-            if (this.durationSelector) {
-                var duration = void 0;
-                try {
-                    duration = this.durationSelector(new GroupedObservable(key, group));
-                }
-                catch (err) {
-                    this.error(err);
-                    return;
-                }
-                this.add(duration.subscribe(new GroupDurationSubscriber(key, group, this)));
-            }
-        }
-        if (!group.closed) {
-            group.next(element);
-        }
-    };
-    GroupBySubscriber.prototype._error = function (err) {
-        var groups = this.groups;
-        if (groups) {
-            groups.forEach(function (group, key) {
-                group.error(err);
-            });
-            groups.clear();
-        }
-        this.destination.error(err);
-    };
-    GroupBySubscriber.prototype._complete = function () {
-        var groups = this.groups;
-        if (groups) {
-            groups.forEach(function (group, key) {
-                group.complete();
-            });
-            groups.clear();
-        }
-        this.destination.complete();
-    };
-    GroupBySubscriber.prototype.removeGroup = function (key) {
-        this.groups.delete(key);
-    };
-    GroupBySubscriber.prototype.unsubscribe = function () {
-        if (!this.closed) {
-            this.attemptedToUnsubscribe = true;
-            if (this.count === 0) {
-                _super.prototype.unsubscribe.call(this);
-            }
-        }
-    };
-    return GroupBySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-var GroupDurationSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](GroupDurationSubscriber, _super);
-    function GroupDurationSubscriber(key, group, parent) {
-        var _this = _super.call(this, group) || this;
-        _this.key = key;
-        _this.group = group;
-        _this.parent = parent;
-        return _this;
-    }
-    GroupDurationSubscriber.prototype._next = function (value) {
-        this.complete();
-    };
-    GroupDurationSubscriber.prototype._unsubscribe = function () {
-        var _a = this, parent = _a.parent, key = _a.key;
-        this.key = this.parent = null;
-        if (parent) {
-            parent.removeGroup(key);
-        }
-    };
-    return GroupDurationSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-var GroupedObservable = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](GroupedObservable, _super);
-    function GroupedObservable(key, groupSubject, refCountSubscription) {
-        var _this = _super.call(this) || this;
-        _this.key = key;
-        _this.groupSubject = groupSubject;
-        _this.refCountSubscription = refCountSubscription;
-        return _this;
-    }
-    GroupedObservable.prototype._subscribe = function (subscriber) {
-        var subscription = new __WEBPACK_IMPORTED_MODULE_2__Subscription__["a" /* Subscription */]();
-        var _a = this, refCountSubscription = _a.refCountSubscription, groupSubject = _a.groupSubject;
-        if (refCountSubscription && !refCountSubscription.closed) {
-            subscription.add(new InnerRefCountSubscription(refCountSubscription));
-        }
-        subscription.add(groupSubject.subscribe(subscriber));
-        return subscription;
-    };
-    return GroupedObservable;
-}(__WEBPACK_IMPORTED_MODULE_3__Observable__["a" /* Observable */]));
-
-var InnerRefCountSubscription = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](InnerRefCountSubscription, _super);
-    function InnerRefCountSubscription(parent) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        parent.count++;
-        return _this;
-    }
-    InnerRefCountSubscription.prototype.unsubscribe = function () {
-        var parent = this.parent;
-        if (!parent.closed && !this.closed) {
-            _super.prototype.unsubscribe.call(this);
-            parent.count -= 1;
-            if (parent.count === 0 && parent.attemptedToUnsubscribe) {
-                parent.unsubscribe();
-            }
-        }
-    };
-    return InnerRefCountSubscription;
-}(__WEBPACK_IMPORTED_MODULE_2__Subscription__["a" /* Subscription */]));
-//# sourceMappingURL=groupBy.js.map
-
-
-/***/ }),
-/* 434 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["b"] = observeOn;
-/* unused harmony export ObserveOnOperator */
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return ObserveOnSubscriber; });
-/* unused harmony export ObserveOnMessage */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Notification__ = __webpack_require__(184);
-/** PURE_IMPORTS_START tslib,_Subscriber,_Notification PURE_IMPORTS_END */
-
-
-
-function observeOn(scheduler, delay) {
-    if (delay === void 0) {
-        delay = 0;
-    }
-    return function observeOnOperatorFunction(source) {
-        return source.lift(new ObserveOnOperator(scheduler, delay));
-    };
-}
-var ObserveOnOperator = /*@__PURE__*/ (function () {
-    function ObserveOnOperator(scheduler, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        this.scheduler = scheduler;
-        this.delay = delay;
-    }
-    ObserveOnOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ObserveOnSubscriber(subscriber, this.scheduler, this.delay));
-    };
-    return ObserveOnOperator;
-}());
-
-var ObserveOnSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ObserveOnSubscriber, _super);
-    function ObserveOnSubscriber(destination, scheduler, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        var _this = _super.call(this, destination) || this;
-        _this.scheduler = scheduler;
-        _this.delay = delay;
-        return _this;
-    }
-    ObserveOnSubscriber.dispatch = function (arg) {
-        var notification = arg.notification, destination = arg.destination;
-        notification.observe(destination);
-        this.unsubscribe();
-    };
-    ObserveOnSubscriber.prototype.scheduleMessage = function (notification) {
-        var destination = this.destination;
-        destination.add(this.scheduler.schedule(ObserveOnSubscriber.dispatch, this.delay, new ObserveOnMessage(notification, this.destination)));
-    };
-    ObserveOnSubscriber.prototype._next = function (value) {
-        this.scheduleMessage(__WEBPACK_IMPORTED_MODULE_2__Notification__["a" /* Notification */].createNext(value));
-    };
-    ObserveOnSubscriber.prototype._error = function (err) {
-        this.scheduleMessage(__WEBPACK_IMPORTED_MODULE_2__Notification__["a" /* Notification */].createError(err));
-        this.unsubscribe();
-    };
-    ObserveOnSubscriber.prototype._complete = function () {
-        this.scheduleMessage(__WEBPACK_IMPORTED_MODULE_2__Notification__["a" /* Notification */].createComplete());
-        this.unsubscribe();
-    };
-    return ObserveOnSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-
-var ObserveOnMessage = /*@__PURE__*/ (function () {
-    function ObserveOnMessage(notification, destination) {
-        this.notification = notification;
-        this.destination = destination;
-    }
-    return ObserveOnMessage;
-}());
-
-//# sourceMappingURL=observeOn.js.map
-
-
-/***/ }),
-/* 435 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = tap;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_noop__ = __webpack_require__(191);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_isFunction__ = __webpack_require__(154);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_noop,_util_isFunction PURE_IMPORTS_END */
-
-
-
-
-function tap(nextOrObserver, error, complete) {
-    return function tapOperatorFunction(source) {
-        return source.lift(new DoOperator(nextOrObserver, error, complete));
-    };
-}
-var DoOperator = /*@__PURE__*/ (function () {
-    function DoOperator(nextOrObserver, error, complete) {
-        this.nextOrObserver = nextOrObserver;
-        this.error = error;
-        this.complete = complete;
-    }
-    DoOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new TapSubscriber(subscriber, this.nextOrObserver, this.error, this.complete));
-    };
-    return DoOperator;
-}());
-var TapSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](TapSubscriber, _super);
-    function TapSubscriber(destination, observerOrNext, error, complete) {
-        var _this = _super.call(this, destination) || this;
-        _this._tapNext = __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-        _this._tapError = __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-        _this._tapComplete = __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-        _this._tapError = error || __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-        _this._tapComplete = complete || __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_isFunction__["a" /* isFunction */])(observerOrNext)) {
-            _this._context = _this;
-            _this._tapNext = observerOrNext;
-        }
-        else if (observerOrNext) {
-            _this._context = observerOrNext;
-            _this._tapNext = observerOrNext.next || __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-            _this._tapError = observerOrNext.error || __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-            _this._tapComplete = observerOrNext.complete || __WEBPACK_IMPORTED_MODULE_2__util_noop__["a" /* noop */];
-        }
-        return _this;
-    }
-    TapSubscriber.prototype._next = function (value) {
-        try {
-            this._tapNext.call(this._context, value);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(value);
-    };
-    TapSubscriber.prototype._error = function (err) {
-        try {
-            this._tapError.call(this._context, err);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.error(err);
-    };
-    TapSubscriber.prototype._complete = function () {
-        try {
-            this._tapComplete.call(this._context);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        return this.destination.complete();
-    };
-    return TapSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=tap.js.map
-
-
-/***/ }),
-/* 436 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return defaultThrottleConfig; });
-/* harmony export (immutable) */ __webpack_exports__["a"] = throttle;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-var defaultThrottleConfig = {
-    leading: true,
-    trailing: false
-};
-function throttle(durationSelector, config) {
-    if (config === void 0) {
-        config = defaultThrottleConfig;
-    }
-    return function (source) { return source.lift(new ThrottleOperator(durationSelector, config.leading, config.trailing)); };
-}
-var ThrottleOperator = /*@__PURE__*/ (function () {
-    function ThrottleOperator(durationSelector, leading, trailing) {
-        this.durationSelector = durationSelector;
-        this.leading = leading;
-        this.trailing = trailing;
-    }
-    ThrottleOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ThrottleSubscriber(subscriber, this.durationSelector, this.leading, this.trailing));
-    };
-    return ThrottleOperator;
-}());
-var ThrottleSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ThrottleSubscriber, _super);
-    function ThrottleSubscriber(destination, durationSelector, _leading, _trailing) {
-        var _this = _super.call(this, destination) || this;
-        _this.destination = destination;
-        _this.durationSelector = durationSelector;
-        _this._leading = _leading;
-        _this._trailing = _trailing;
-        _this._hasValue = false;
-        return _this;
-    }
-    ThrottleSubscriber.prototype._next = function (value) {
-        this._hasValue = true;
-        this._sendValue = value;
-        if (!this._throttled) {
-            if (this._leading) {
-                this.send();
-            }
-            else {
-                this.throttle(value);
-            }
-        }
-    };
-    ThrottleSubscriber.prototype.send = function () {
-        var _a = this, _hasValue = _a._hasValue, _sendValue = _a._sendValue;
-        if (_hasValue) {
-            this.destination.next(_sendValue);
-            this.throttle(_sendValue);
-        }
-        this._hasValue = false;
-        this._sendValue = null;
-    };
-    ThrottleSubscriber.prototype.throttle = function (value) {
-        var duration = this.tryDurationSelector(value);
-        if (duration) {
-            this.add(this._throttled = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(this, duration));
-        }
-    };
-    ThrottleSubscriber.prototype.tryDurationSelector = function (value) {
-        try {
-            return this.durationSelector(value);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return null;
-        }
-    };
-    ThrottleSubscriber.prototype.throttlingDone = function () {
-        var _a = this, _throttled = _a._throttled, _trailing = _a._trailing;
-        if (_throttled) {
-            _throttled.unsubscribe();
-        }
-        this._throttled = null;
-        if (_trailing) {
-            this.send();
-        }
-    };
-    ThrottleSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.throttlingDone();
-    };
-    ThrottleSubscriber.prototype.notifyComplete = function () {
-        this.throttlingDone();
-    };
-    return ThrottleSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=throttle.js.map
-
-
-/***/ }),
-/* 437 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = timeoutWith;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isDate__ = __webpack_require__(443);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_scheduler_async,_util_isDate,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-function timeoutWith(due, withObservable, scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_1__scheduler_async__["a" /* async */];
-    }
-    return function (source) {
-        var absoluteTimeout = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isDate__["a" /* isDate */])(due);
-        var waitFor = absoluteTimeout ? (+due - scheduler.now()) : Math.abs(due);
-        return source.lift(new TimeoutWithOperator(waitFor, absoluteTimeout, withObservable, scheduler));
-    };
-}
-var TimeoutWithOperator = /*@__PURE__*/ (function () {
-    function TimeoutWithOperator(waitFor, absoluteTimeout, withObservable, scheduler) {
-        this.waitFor = waitFor;
-        this.absoluteTimeout = absoluteTimeout;
-        this.withObservable = withObservable;
-        this.scheduler = scheduler;
-    }
-    TimeoutWithOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new TimeoutWithSubscriber(subscriber, this.absoluteTimeout, this.waitFor, this.withObservable, this.scheduler));
-    };
-    return TimeoutWithOperator;
-}());
-var TimeoutWithSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](TimeoutWithSubscriber, _super);
-    function TimeoutWithSubscriber(destination, absoluteTimeout, waitFor, withObservable, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.absoluteTimeout = absoluteTimeout;
-        _this.waitFor = waitFor;
-        _this.withObservable = withObservable;
-        _this.scheduler = scheduler;
-        _this.action = null;
-        _this.scheduleTimeout();
-        return _this;
-    }
-    TimeoutWithSubscriber.dispatchTimeout = function (subscriber) {
-        var withObservable = subscriber.withObservable;
-        subscriber._unsubscribeAndRecycle();
-        subscriber.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(subscriber, withObservable));
-    };
-    TimeoutWithSubscriber.prototype.scheduleTimeout = function () {
-        var action = this.action;
-        if (action) {
-            this.action = action.schedule(this, this.waitFor);
-        }
-        else {
-            this.add(this.action = this.scheduler.schedule(TimeoutWithSubscriber.dispatchTimeout, this.waitFor, this));
-        }
-    };
-    TimeoutWithSubscriber.prototype._next = function (value) {
-        if (!this.absoluteTimeout) {
-            this.scheduleTimeout();
-        }
-        _super.prototype._next.call(this, value);
-    };
-    TimeoutWithSubscriber.prototype._unsubscribe = function () {
-        this.action = null;
-        this.scheduler = null;
-        this.withObservable = null;
-    };
-    return TimeoutWithSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=timeoutWith.js.map
-
-
-/***/ }),
-/* 438 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return asap; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__AsapAction__ = __webpack_require__(921);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsapScheduler__ = __webpack_require__(922);
-/** PURE_IMPORTS_START _AsapAction,_AsapScheduler PURE_IMPORTS_END */
-
-
-var asap = /*@__PURE__*/ new __WEBPACK_IMPORTED_MODULE_1__AsapScheduler__["a" /* AsapScheduler */](__WEBPACK_IMPORTED_MODULE_0__AsapAction__["a" /* AsapAction */]);
-//# sourceMappingURL=asap.js.map
-
-
-/***/ }),
-/* 439 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return queue; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__QueueAction__ = __webpack_require__(923);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__QueueScheduler__ = __webpack_require__(924);
-/** PURE_IMPORTS_START _QueueAction,_QueueScheduler PURE_IMPORTS_END */
-
-
-var queue = /*@__PURE__*/ new __WEBPACK_IMPORTED_MODULE_1__QueueScheduler__["a" /* QueueScheduler */](__WEBPACK_IMPORTED_MODULE_0__QueueAction__["a" /* QueueAction */]);
-//# sourceMappingURL=queue.js.map
-
-
-/***/ }),
-/* 440 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return TimeoutError; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function TimeoutErrorImpl() {
-    Error.call(this);
-    this.message = 'Timeout has occurred';
-    this.name = 'TimeoutError';
-    return this;
-}
-TimeoutErrorImpl.prototype = /*@__PURE__*/ Object.create(Error.prototype);
-var TimeoutError = TimeoutErrorImpl;
-//# sourceMappingURL=TimeoutError.js.map
-
-
-/***/ }),
-/* 441 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return UnsubscriptionError; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function UnsubscriptionErrorImpl(errors) {
-    Error.call(this);
-    this.message = errors ?
-        errors.length + " errors occurred during unsubscription:\n" + errors.map(function (err, i) { return i + 1 + ") " + err.toString(); }).join('\n  ') : '';
-    this.name = 'UnsubscriptionError';
-    this.errors = errors;
-    return this;
-}
-UnsubscriptionErrorImpl.prototype = /*@__PURE__*/ Object.create(Error.prototype);
-var UnsubscriptionError = UnsubscriptionErrorImpl;
-//# sourceMappingURL=UnsubscriptionError.js.map
-
-
-/***/ }),
-/* 442 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return isArrayLike; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var isArrayLike = (function (x) { return x && typeof x.length === 'number' && typeof x !== 'function'; });
-//# sourceMappingURL=isArrayLike.js.map
-
-
-/***/ }),
-/* 443 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isDate;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function isDate(value) {
-    return value instanceof Date && !isNaN(+value);
-}
-//# sourceMappingURL=isDate.js.map
-
-
-/***/ }),
-/* 444 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isObject;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function isObject(x) {
-    return x != null && typeof x === 'object';
-}
-//# sourceMappingURL=isObject.js.map
-
-
-/***/ }),
-/* 445 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isPromise;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function isPromise(value) {
-    return value && typeof value.subscribe !== 'function' && typeof value.then === 'function';
-}
-//# sourceMappingURL=isPromise.js.map
-
-
-/***/ }),
-/* 446 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return subscribeTo; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__subscribeToArray__ = __webpack_require__(447);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__subscribeToPromise__ = __webpack_require__(450);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__subscribeToIterable__ = __webpack_require__(448);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__subscribeToObservable__ = __webpack_require__(449);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__isArrayLike__ = __webpack_require__(442);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__isPromise__ = __webpack_require__(445);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_7__isObject__ = __webpack_require__(444);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_8__symbol_iterator__ = __webpack_require__(151);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_9__symbol_observable__ = __webpack_require__(117);
-/** PURE_IMPORTS_START _Observable,_subscribeToArray,_subscribeToPromise,_subscribeToIterable,_subscribeToObservable,_isArrayLike,_isPromise,_isObject,_symbol_iterator,_symbol_observable PURE_IMPORTS_END */
-
-
-
-
-
-
-
-
-
-
-var subscribeTo = function (result) {
-    if (result instanceof __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */]) {
-        return function (subscriber) {
-            if (result._isScalar) {
-                subscriber.next(result.value);
-                subscriber.complete();
-                return undefined;
-            }
-            else {
-                return result.subscribe(subscriber);
-            }
-        };
-    }
-    else if (result && typeof result[__WEBPACK_IMPORTED_MODULE_9__symbol_observable__["a" /* observable */]] === 'function') {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__subscribeToObservable__["a" /* subscribeToObservable */])(result);
-    }
-    else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__isArrayLike__["a" /* isArrayLike */])(result)) {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__subscribeToArray__["a" /* subscribeToArray */])(result);
-    }
-    else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__isPromise__["a" /* isPromise */])(result)) {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__subscribeToPromise__["a" /* subscribeToPromise */])(result);
-    }
-    else if (result && typeof result[__WEBPACK_IMPORTED_MODULE_8__symbol_iterator__["a" /* iterator */]] === 'function') {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__subscribeToIterable__["a" /* subscribeToIterable */])(result);
-    }
-    else {
-        var value = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_7__isObject__["a" /* isObject */])(result) ? 'an invalid object' : "'" + result + "'";
-        var msg = "You provided " + value + " where a stream was expected."
-            + ' You can provide an Observable, Promise, Array, or Iterable.';
-        throw new TypeError(msg);
-    }
-};
-//# sourceMappingURL=subscribeTo.js.map
-
-
-/***/ }),
-/* 447 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return subscribeToArray; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var subscribeToArray = function (array) {
-    return function (subscriber) {
-        for (var i = 0, len = array.length; i < len && !subscriber.closed; i++) {
-            subscriber.next(array[i]);
-        }
-        if (!subscriber.closed) {
-            subscriber.complete();
-        }
-    };
-};
-//# sourceMappingURL=subscribeToArray.js.map
-
-
-/***/ }),
-/* 448 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return subscribeToIterable; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__symbol_iterator__ = __webpack_require__(151);
-/** PURE_IMPORTS_START _symbol_iterator PURE_IMPORTS_END */
-
-var subscribeToIterable = function (iterable) {
-    return function (subscriber) {
-        var iterator = iterable[__WEBPACK_IMPORTED_MODULE_0__symbol_iterator__["a" /* iterator */]]();
-        do {
-            var item = iterator.next();
-            if (item.done) {
-                subscriber.complete();
-                break;
-            }
-            subscriber.next(item.value);
-            if (subscriber.closed) {
-                break;
-            }
-        } while (true);
-        if (typeof iterator.return === 'function') {
-            subscriber.add(function () {
-                if (iterator.return) {
-                    iterator.return();
-                }
-            });
-        }
-        return subscriber;
-    };
-};
-//# sourceMappingURL=subscribeToIterable.js.map
-
-
-/***/ }),
-/* 449 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return subscribeToObservable; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__symbol_observable__ = __webpack_require__(117);
-/** PURE_IMPORTS_START _symbol_observable PURE_IMPORTS_END */
-
-var subscribeToObservable = function (obj) {
-    return function (subscriber) {
-        var obs = obj[__WEBPACK_IMPORTED_MODULE_0__symbol_observable__["a" /* observable */]]();
-        if (typeof obs.subscribe !== 'function') {
-            throw new TypeError('Provided object does not correctly implement Symbol.observable');
-        }
-        else {
-            return obs.subscribe(subscriber);
-        }
-    };
-};
-//# sourceMappingURL=subscribeToObservable.js.map
-
-
-/***/ }),
-/* 450 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return subscribeToPromise; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__hostReportError__ = __webpack_require__(323);
-/** PURE_IMPORTS_START _hostReportError PURE_IMPORTS_END */
-
-var subscribeToPromise = function (promise) {
-    return function (subscriber) {
-        promise.then(function (value) {
-            if (!subscriber.closed) {
-                subscriber.next(value);
-                subscriber.complete();
-            }
-        }, function (err) { return subscriber.error(err); })
-            .then(null, __WEBPACK_IMPORTED_MODULE_0__hostReportError__["a" /* hostReportError */]);
-        return subscriber;
-    };
-};
-//# sourceMappingURL=subscribeToPromise.js.map
-
-
-/***/ }),
-/* 451 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Note: since nyc uses this module to output coverage, any lines
-// that are in the direct sync flow of nyc's outputCoverage are
-// ignored, since we can never get coverage for them.
-var assert = __webpack_require__(28)
-var signals = __webpack_require__(933)
-
-var EE = __webpack_require__(77)
-/* istanbul ignore if */
-if (typeof EE !== 'function') {
-  EE = EE.EventEmitter
-}
-
-var emitter
-if (process.__signal_exit_emitter__) {
-  emitter = process.__signal_exit_emitter__
-} else {
-  emitter = process.__signal_exit_emitter__ = new EE()
-  emitter.count = 0
-  emitter.emitted = {}
-}
-
-// Because this emitter is a global, we have to check to see if a
-// previous version of this library failed to enable infinite listeners.
-// I know what you're about to say.  But literally everything about
-// signal-exit is a compromise with evil.  Get used to it.
-if (!emitter.infinite) {
-  emitter.setMaxListeners(Infinity)
-  emitter.infinite = true
-}
-
-module.exports = function (cb, opts) {
-  assert.equal(typeof cb, 'function', 'a callback must be provided for exit handler')
-
-  if (loaded === false) {
-    load()
-  }
-
-  var ev = 'exit'
-  if (opts && opts.alwaysLast) {
-    ev = 'afterexit'
-  }
-
-  var remove = function () {
-    emitter.removeListener(ev, cb)
-    if (emitter.listeners('exit').length === 0 &&
-        emitter.listeners('afterexit').length === 0) {
-      unload()
-    }
-  }
-  emitter.on(ev, cb)
-
-  return remove
-}
-
-module.exports.unload = unload
-function unload () {
-  if (!loaded) {
-    return
-  }
-  loaded = false
-
-  signals.forEach(function (sig) {
-    try {
-      process.removeListener(sig, sigListeners[sig])
-    } catch (er) {}
-  })
-  process.emit = originalProcessEmit
-  process.reallyExit = originalProcessReallyExit
-  emitter.count -= 1
-}
-
-function emit (event, code, signal) {
-  if (emitter.emitted[event]) {
-    return
-  }
-  emitter.emitted[event] = true
-  emitter.emit(event, code, signal)
-}
-
-// { <signal>: <listener fn>, ... }
-var sigListeners = {}
-signals.forEach(function (sig) {
-  sigListeners[sig] = function listener () {
-    // If there are no other listeners, an exit is coming!
-    // Simplest way: remove us and then re-send the signal.
-    // We know that this will kill the process, so we can
-    // safely emit now.
-    var listeners = process.listeners(sig)
-    if (listeners.length === emitter.count) {
-      unload()
-      emit('exit', null, sig)
-      /* istanbul ignore next */
-      emit('afterexit', null, sig)
-      /* istanbul ignore next */
-      process.kill(process.pid, sig)
-    }
-  }
-})
-
-module.exports.signals = function () {
-  return signals
-}
-
-module.exports.load = load
-
-var loaded = false
-
-function load () {
-  if (loaded) {
-    return
-  }
-  loaded = true
-
-  // This is the number of onSignalExit's that are in play.
-  // It's important so that we can count the correct number of
-  // listeners on signals, and don't wait for the other one to
-  // handle it instead of us.
-  emitter.count += 1
-
-  signals = signals.filter(function (sig) {
-    try {
-      process.on(sig, sigListeners[sig])
-      return true
-    } catch (er) {
-      return false
-    }
-  })
-
-  process.emit = processEmit
-  process.reallyExit = processReallyExit
-}
-
-var originalProcessReallyExit = process.reallyExit
-function processReallyExit (code) {
-  process.exitCode = code || 0
-  emit('exit', process.exitCode, null)
-  /* istanbul ignore next */
-  emit('afterexit', process.exitCode, null)
-  /* istanbul ignore next */
-  originalProcessReallyExit.call(process, process.exitCode)
-}
-
-var originalProcessEmit = process.emit
-function processEmit (ev, arg) {
-  if (ev === 'exit') {
-    if (arg !== undefined) {
-      process.exitCode = arg
-    }
-    var ret = originalProcessEmit.apply(this, arguments)
-    emit('exit', process.exitCode, null)
-    /* istanbul ignore next */
-    emit('afterexit', process.exitCode, null)
-    return ret
-  } else {
-    return originalProcessEmit.apply(this, arguments)
-  }
-}
-
-
-/***/ }),
-/* 452 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var scan = __webpack_require__(938)
-var parse = __webpack_require__(937)
-
-module.exports = function (source) {
-  return parse(scan(source))
-}
-
-
-/***/ }),
-/* 453 */
-/***/ (function(module, exports) {
-
-module.exports = ["0BSD","AAL","Abstyles","Adobe-2006","Adobe-Glyph","ADSL","AFL-1.1","AFL-1.2","AFL-2.0","AFL-2.1","AFL-3.0","Afmparse","AGPL-1.0","AGPL-3.0-only","AGPL-3.0-or-later","Aladdin","AMDPLPA","AML","AMPAS","ANTLR-PD","Apache-1.0","Apache-1.1","Apache-2.0","APAFML","APL-1.0","APSL-1.0","APSL-1.1","APSL-1.2","APSL-2.0","Artistic-1.0-cl8","Artistic-1.0-Perl","Artistic-1.0","Artistic-2.0","Bahyph","Barr","Beerware","BitTorrent-1.0","BitTorrent-1.1","Borceux","BSD-1-Clause","BSD-2-Clause-FreeBSD","BSD-2-Clause-NetBSD","BSD-2-Clause-Patent","BSD-2-Clause","BSD-3-Clause-Attribution","BSD-3-Clause-Clear","BSD-3-Clause-LBNL","BSD-3-Clause-No-Nuclear-License-2014","BSD-3-Clause-No-Nuclear-License","BSD-3-Clause-No-Nuclear-Warranty","BSD-3-Clause","BSD-4-Clause-UC","BSD-4-Clause","BSD-Protection","BSD-Source-Code","BSL-1.0","bzip2-1.0.5","bzip2-1.0.6","Caldera","CATOSL-1.1","CC-BY-1.0","CC-BY-2.0","CC-BY-2.5","CC-BY-3.0","CC-BY-4.0","CC-BY-NC-1.0","CC-BY-NC-2.0","CC-BY-NC-2.5","CC-BY-NC-3.0","CC-BY-NC-4.0","CC-BY-NC-ND-1.0","CC-BY-NC-ND-2.0","CC-BY-NC-ND-2.5","CC-BY-NC-ND-3.0","CC-BY-NC-ND-4.0","CC-BY-NC-SA-1.0","CC-BY-NC-SA-2.0","CC-BY-NC-SA-2.5","CC-BY-NC-SA-3.0","CC-BY-NC-SA-4.0","CC-BY-ND-1.0","CC-BY-ND-2.0","CC-BY-ND-2.5","CC-BY-ND-3.0","CC-BY-ND-4.0","CC-BY-SA-1.0","CC-BY-SA-2.0","CC-BY-SA-2.5","CC-BY-SA-3.0","CC-BY-SA-4.0","CC0-1.0","CDDL-1.0","CDDL-1.1","CDLA-Permissive-1.0","CDLA-Sharing-1.0","CECILL-1.0","CECILL-1.1","CECILL-2.0","CECILL-2.1","CECILL-B","CECILL-C","ClArtistic","CNRI-Jython","CNRI-Python-GPL-Compatible","CNRI-Python","Condor-1.1","CPAL-1.0","CPL-1.0","CPOL-1.02","Crossword","CrystalStacker","CUA-OPL-1.0","Cube","curl","D-FSL-1.0","diffmark","DOC","Dotseqn","DSDP","dvipdfm","ECL-1.0","ECL-2.0","EFL-1.0","EFL-2.0","eGenix","Entessa","EPL-1.0","EPL-2.0","ErlPL-1.1","EUDatagrid","EUPL-1.0","EUPL-1.1","EUPL-1.2","Eurosym","Fair","Frameworx-1.0","FreeImage","FSFAP","FSFUL","FSFULLR","FTL","GFDL-1.1-only","GFDL-1.1-or-later","GFDL-1.2-only","GFDL-1.2-or-later","GFDL-1.3-only","GFDL-1.3-or-later","Giftware","GL2PS","Glide","Glulxe","gnuplot","GPL-1.0-only","GPL-1.0-or-later","GPL-2.0-only","GPL-2.0-or-later","GPL-3.0-only","GPL-3.0-or-later","gSOAP-1.3b","HaskellReport","HPND","IBM-pibs","ICU","IJG","ImageMagick","iMatix","Imlib2","Info-ZIP","Intel-ACPI","Intel","Interbase-1.0","IPA","IPL-1.0","ISC","JasPer-2.0","JSON","LAL-1.2","LAL-1.3","Latex2e","Leptonica","LGPL-2.0-only","LGPL-2.0-or-later","LGPL-2.1-only","LGPL-2.1-or-later","LGPL-3.0-only","LGPL-3.0-or-later","LGPLLR","Libpng","libtiff","LiLiQ-P-1.1","LiLiQ-R-1.1","LiLiQ-Rplus-1.1","LPL-1.0","LPL-1.02","LPPL-1.0","LPPL-1.1","LPPL-1.2","LPPL-1.3a","LPPL-1.3c","MakeIndex","MirOS","MIT-advertising","MIT-CMU","MIT-enna","MIT-feh","MIT","MITNFA","Motosoto","mpich2","MPL-1.0","MPL-1.1","MPL-2.0-no-copyleft-exception","MPL-2.0","MS-PL","MS-RL","MTLL","Multics","Mup","NASA-1.3","Naumen","NBPL-1.0","NCSA","Net-SNMP","NetCDF","Newsletr","NGPL","NLOD-1.0","NLPL","Nokia","NOSL","Noweb","NPL-1.0","NPL-1.1","NPOSL-3.0","NRL","NTP","OCCT-PL","OCLC-2.0","ODbL-1.0","OFL-1.0","OFL-1.1","OGTSL","OLDAP-1.1","OLDAP-1.2","OLDAP-1.3","OLDAP-1.4","OLDAP-2.0.1","OLDAP-2.0","OLDAP-2.1","OLDAP-2.2.1","OLDAP-2.2.2","OLDAP-2.2","OLDAP-2.3","OLDAP-2.4","OLDAP-2.5","OLDAP-2.6","OLDAP-2.7","OLDAP-2.8","OML","OpenSSL","OPL-1.0","OSET-PL-2.1","OSL-1.0","OSL-1.1","OSL-2.0","OSL-2.1","OSL-3.0","PDDL-1.0","PHP-3.0","PHP-3.01","Plexus","PostgreSQL","psfrag","psutils","Python-2.0","Qhull","QPL-1.0","Rdisc","RHeCos-1.1","RPL-1.1","RPL-1.5","RPSL-1.0","RSA-MD","RSCPL","Ruby","SAX-PD","Saxpath","SCEA","Sendmail","SGI-B-1.0","SGI-B-1.1","SGI-B-2.0","SimPL-2.0","SISSL-1.2","SISSL","Sleepycat","SMLNJ","SMPPL","SNIA","Spencer-86","Spencer-94","Spencer-99","SPL-1.0","SugarCRM-1.1.3","SWL","TCL","TCP-wrappers","TMate","TORQUE-1.1","TOSL","Unicode-DFS-2015","Unicode-DFS-2016","Unicode-TOU","Unlicense","UPL-1.0","Vim","VOSTROM","VSL-1.0","W3C-19980720","W3C-20150513","W3C","Watcom-1.0","Wsuipa","WTFPL","X11","Xerox","XFree86-1.1","xinetd","Xnet","xpp","XSkat","YPL-1.0","YPL-1.1","Zed","Zend-2.0","Zimbra-1.3","Zimbra-1.4","zlib-acknowledgement","Zlib","ZPL-1.1","ZPL-2.0","ZPL-2.1"]
-
-/***/ }),
-/* 454 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	Verifier: Verifier,
-	Signer: Signer
-};
-
-var nacl;
-var stream = __webpack_require__(23);
-var util = __webpack_require__(3);
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var Signature = __webpack_require__(75);
-
-function Verifier(key, hashAlgo) {
-	if (nacl === undefined)
-		nacl = __webpack_require__(76);
-
-	if (hashAlgo.toLowerCase() !== 'sha512')
-		throw (new Error('ED25519 only supports the use of ' +
-		    'SHA-512 hashes'));
-
-	this.key = key;
-	this.chunks = [];
-
-	stream.Writable.call(this, {});
-}
-util.inherits(Verifier, stream.Writable);
-
-Verifier.prototype._write = function (chunk, enc, cb) {
-	this.chunks.push(chunk);
-	cb();
-};
-
-Verifier.prototype.update = function (chunk) {
-	if (typeof (chunk) === 'string')
-		chunk = Buffer.from(chunk, 'binary');
-	this.chunks.push(chunk);
-};
-
-Verifier.prototype.verify = function (signature, fmt) {
-	var sig;
-	if (Signature.isSignature(signature, [2, 0])) {
-		if (signature.type !== 'ed25519')
-			return (false);
-		sig = signature.toBuffer('raw');
-
-	} else if (typeof (signature) === 'string') {
-		sig = Buffer.from(signature, 'base64');
-
-	} else if (Signature.isSignature(signature, [1, 0])) {
-		throw (new Error('signature was created by too old ' +
-		    'a version of sshpk and cannot be verified'));
-	}
-
-	assert.buffer(sig);
-	return (nacl.sign.detached.verify(
-	    new Uint8Array(Buffer.concat(this.chunks)),
-	    new Uint8Array(sig),
-	    new Uint8Array(this.key.part.A.data)));
-};
-
-function Signer(key, hashAlgo) {
-	if (nacl === undefined)
-		nacl = __webpack_require__(76);
-
-	if (hashAlgo.toLowerCase() !== 'sha512')
-		throw (new Error('ED25519 only supports the use of ' +
-		    'SHA-512 hashes'));
-
-	this.key = key;
-	this.chunks = [];
-
-	stream.Writable.call(this, {});
-}
-util.inherits(Signer, stream.Writable);
-
-Signer.prototype._write = function (chunk, enc, cb) {
-	this.chunks.push(chunk);
-	cb();
-};
-
-Signer.prototype.update = function (chunk) {
-	if (typeof (chunk) === 'string')
-		chunk = Buffer.from(chunk, 'binary');
-	this.chunks.push(chunk);
-};
-
-Signer.prototype.sign = function () {
-	var sig = nacl.sign.detached(
-	    new Uint8Array(Buffer.concat(this.chunks)),
-	    new Uint8Array(Buffer.concat([
-		this.key.part.k.data, this.key.part.A.data])));
-	var sigBuf = Buffer.from(sig);
-	var sigObj = Signature.parse(sigBuf, 'ed25519', 'raw');
-	sigObj.hashAlgorithm = 'sha512';
-	return (sigObj);
-};
-
-
-/***/ }),
-/* 455 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-
-var pem = __webpack_require__(86);
-var ssh = __webpack_require__(456);
-var rfc4253 = __webpack_require__(103);
-var dnssec = __webpack_require__(326);
-
-var DNSSEC_PRIVKEY_HEADER_PREFIX = 'Private-key-format: v1';
-
-function read(buf, options) {
-	if (typeof (buf) === 'string') {
-		if (buf.trim().match(/^[-]+[ ]*BEGIN/))
-			return (pem.read(buf, options));
-		if (buf.match(/^\s*ssh-[a-z]/))
-			return (ssh.read(buf, options));
-		if (buf.match(/^\s*ecdsa-/))
-			return (ssh.read(buf, options));
-		if (findDNSSECHeader(buf))
-			return (dnssec.read(buf, options));
-		buf = Buffer.from(buf, 'binary');
-	} else {
-		assert.buffer(buf);
-		if (findPEMHeader(buf))
-			return (pem.read(buf, options));
-		if (findSSHHeader(buf))
-			return (ssh.read(buf, options));
-		if (findDNSSECHeader(buf))
-			return (dnssec.read(buf, options));
-	}
-	if (buf.readUInt32BE(0) < buf.length)
-		return (rfc4253.read(buf, options));
-	throw (new Error('Failed to auto-detect format of key'));
-}
-
-function findSSHHeader(buf) {
-	var offset = 0;
-	while (offset < buf.length &&
-	    (buf[offset] === 32 || buf[offset] === 10 || buf[offset] === 9))
-		++offset;
-	if (offset + 4 <= buf.length &&
-	    buf.slice(offset, offset + 4).toString('ascii') === 'ssh-')
-		return (true);
-	if (offset + 6 <= buf.length &&
-	    buf.slice(offset, offset + 6).toString('ascii') === 'ecdsa-')
-		return (true);
-	return (false);
-}
-
-function findPEMHeader(buf) {
-	var offset = 0;
-	while (offset < buf.length &&
-	    (buf[offset] === 32 || buf[offset] === 10))
-		++offset;
-	if (buf[offset] !== 45)
-		return (false);
-	while (offset < buf.length &&
-	    (buf[offset] === 45))
-		++offset;
-	while (offset < buf.length &&
-	    (buf[offset] === 32))
-		++offset;
-	if (offset + 5 > buf.length ||
-	    buf.slice(offset, offset + 5).toString('ascii') !== 'BEGIN')
-		return (false);
-	return (true);
-}
-
-function findDNSSECHeader(buf) {
-	// private case first
-	if (buf.length <= DNSSEC_PRIVKEY_HEADER_PREFIX.length)
-		return (false);
-	var headerCheck = buf.slice(0, DNSSEC_PRIVKEY_HEADER_PREFIX.length);
-	if (headerCheck.toString('ascii') === DNSSEC_PRIVKEY_HEADER_PREFIX)
-		return (true);
-
-	// public-key RFC3110 ?
-	// 'domain.com. IN KEY ...' or 'domain.com. IN DNSKEY ...'
-	// skip any comment-lines
-	if (typeof (buf) !== 'string') {
-		buf = buf.toString('ascii');
-	}
-	var lines = buf.split('\n');
-	var line = 0;
-	/* JSSTYLED */
-	while (lines[line].match(/^\;/))
-		line++;
-	if (lines[line].toString('ascii').match(/\. IN KEY /))
-		return (true);
-	if (lines[line].toString('ascii').match(/\. IN DNSKEY /))
-		return (true);
-	return (false);
-}
-
-function write(key, options) {
-	throw (new Error('"auto" format cannot be used for writing'));
-}
-
-
-/***/ }),
-/* 456 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var Buffer = __webpack_require__(15).Buffer;
-var rfc4253 = __webpack_require__(103);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-
-var sshpriv = __webpack_require__(192);
-
-/*JSSTYLED*/
-var SSHKEY_RE = /^([a-z0-9-]+)[ \t]+([a-zA-Z0-9+\/]+[=]*)([ \t]+([^ \t][^\n]*[\n]*)?)?$/;
-/*JSSTYLED*/
-var SSHKEY_RE2 = /^([a-z0-9-]+)[ \t\n]+([a-zA-Z0-9+\/][a-zA-Z0-9+\/ \t\n=]*)([^a-zA-Z0-9+\/ \t\n=].*)?$/;
-
-function read(buf, options) {
-	if (typeof (buf) !== 'string') {
-		assert.buffer(buf, 'buf');
-		buf = buf.toString('ascii');
-	}
-
-	var trimmed = buf.trim().replace(/[\\\r]/g, '');
-	var m = trimmed.match(SSHKEY_RE);
-	if (!m)
-		m = trimmed.match(SSHKEY_RE2);
-	assert.ok(m, 'key must match regex');
-
-	var type = rfc4253.algToKeyType(m[1]);
-	var kbuf = Buffer.from(m[2], 'base64');
-
-	/*
-	 * This is a bit tricky. If we managed to parse the key and locate the
-	 * key comment with the regex, then do a non-partial read and assert
-	 * that we have consumed all bytes. If we couldn't locate the key
-	 * comment, though, there may be whitespace shenanigans going on that
-	 * have conjoined the comment to the rest of the key. We do a partial
-	 * read in this case to try to make the best out of a sorry situation.
-	 */
-	var key;
-	var ret = {};
-	if (m[4]) {
-		try {
-			key = rfc4253.read(kbuf);
-
-		} catch (e) {
-			m = trimmed.match(SSHKEY_RE2);
-			assert.ok(m, 'key must match regex');
-			kbuf = Buffer.from(m[2], 'base64');
-			key = rfc4253.readInternal(ret, 'public', kbuf);
-		}
-	} else {
-		key = rfc4253.readInternal(ret, 'public', kbuf);
-	}
-
-	assert.strictEqual(type, key.type);
-
-	if (m[4] && m[4].length > 0) {
-		key.comment = m[4];
-
-	} else if (ret.consumed) {
-		/*
-		 * Now the magic: trying to recover the key comment when it's
-		 * gotten conjoined to the key or otherwise shenanigan'd.
-		 *
-		 * Work out how much base64 we used, then drop all non-base64
-		 * chars from the beginning up to this point in the the string.
-		 * Then offset in this and try to make up for missing = chars.
-		 */
-		var data = m[2] + (m[3] ? m[3] : '');
-		var realOffset = Math.ceil(ret.consumed / 3) * 4;
-		data = data.slice(0, realOffset - 2). /*JSSTYLED*/
-		    replace(/[^a-zA-Z0-9+\/=]/g, '') +
-		    data.slice(realOffset - 2);
-
-		var padding = ret.consumed % 3;
-		if (padding > 0 &&
-		    data.slice(realOffset - 1, realOffset) !== '=')
-			realOffset--;
-		while (data.slice(realOffset, realOffset + 1) === '=')
-			realOffset++;
-
-		/* Finally, grab what we think is the comment & clean it up. */
-		var trailer = data.slice(realOffset);
-		trailer = trailer.replace(/[\r\n]/g, ' ').
-		    replace(/^\s+/, '');
-		if (trailer.match(/^[a-zA-Z0-9]/))
-			key.comment = trailer;
-	}
-
-	return (key);
-}
-
-function write(key, options) {
-	assert.object(key);
-	if (!Key.isKey(key))
-		throw (new Error('Must be a public key'));
-
-	var parts = [];
-	var alg = rfc4253.keyTypeToAlg(key);
-	parts.push(alg);
-
-	var buf = rfc4253.write(key);
-	parts.push(buf.toString('base64'));
-
-	if (key.comment)
-		parts.push(key.comment);
-
-	return (Buffer.from(parts.join(' ')));
-}
-
-
-/***/ }),
-/* 457 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	verify: verify,
-	sign: sign,
-	signAsync: signAsync,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var asn1 = __webpack_require__(66);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var pem = __webpack_require__(86);
-var Identity = __webpack_require__(158);
-var Signature = __webpack_require__(75);
-var Certificate = __webpack_require__(155);
-var pkcs8 = __webpack_require__(157);
-
-/*
- * This file is based on RFC5280 (X.509).
- */
-
-/* Helper to read in a single mpint */
-function readMPInt(der, nm) {
-	assert.strictEqual(der.peek(), asn1.Ber.Integer,
-	    nm + ' is not an Integer');
-	return (utils.mpNormalize(der.readString(asn1.Ber.Integer, true)));
-}
-
-function verify(cert, key) {
-	var sig = cert.signatures.x509;
-	assert.object(sig, 'x509 signature');
-
-	var algParts = sig.algo.split('-');
-	if (algParts[0] !== key.type)
-		return (false);
-
-	var blob = sig.cache;
-	if (blob === undefined) {
-		var der = new asn1.BerWriter();
-		writeTBSCert(cert, der);
-		blob = der.buffer;
-	}
-
-	var verifier = key.createVerify(algParts[1]);
-	verifier.write(blob);
-	return (verifier.verify(sig.signature));
-}
-
-function Local(i) {
-	return (asn1.Ber.Context | asn1.Ber.Constructor | i);
-}
-
-function Context(i) {
-	return (asn1.Ber.Context | i);
-}
-
-var SIGN_ALGS = {
-	'rsa-md5': '1.2.840.113549.1.1.4',
-	'rsa-sha1': '1.2.840.113549.1.1.5',
-	'rsa-sha256': '1.2.840.113549.1.1.11',
-	'rsa-sha384': '1.2.840.113549.1.1.12',
-	'rsa-sha512': '1.2.840.113549.1.1.13',
-	'dsa-sha1': '1.2.840.10040.4.3',
-	'dsa-sha256': '2.16.840.1.101.3.4.3.2',
-	'ecdsa-sha1': '1.2.840.10045.4.1',
-	'ecdsa-sha256': '1.2.840.10045.4.3.2',
-	'ecdsa-sha384': '1.2.840.10045.4.3.3',
-	'ecdsa-sha512': '1.2.840.10045.4.3.4',
-	'ed25519-sha512': '1.3.101.112'
-};
-Object.keys(SIGN_ALGS).forEach(function (k) {
-	SIGN_ALGS[SIGN_ALGS[k]] = k;
-});
-SIGN_ALGS['1.3.14.3.2.3'] = 'rsa-md5';
-SIGN_ALGS['1.3.14.3.2.29'] = 'rsa-sha1';
-
-var EXTS = {
-	'issuerKeyId': '2.5.29.35',
-	'altName': '2.5.29.17',
-	'basicConstraints': '2.5.29.19',
-	'keyUsage': '2.5.29.15',
-	'extKeyUsage': '2.5.29.37'
-};
-
-function read(buf, options) {
-	if (typeof (buf) === 'string') {
-		buf = Buffer.from(buf, 'binary');
-	}
-	assert.buffer(buf, 'buf');
-
-	var der = new asn1.BerReader(buf);
-
-	der.readSequence();
-	if (Math.abs(der.length - der.remain) > 1) {
-		throw (new Error('DER sequence does not contain whole byte ' +
-		    'stream'));
-	}
-
-	var tbsStart = der.offset;
-	der.readSequence();
-	var sigOffset = der.offset + der.length;
-	var tbsEnd = sigOffset;
-
-	if (der.peek() === Local(0)) {
-		der.readSequence(Local(0));
-		var version = der.readInt();
-		assert.ok(version <= 3,
-		    'only x.509 versions up to v3 supported');
-	}
-
-	var cert = {};
-	cert.signatures = {};
-	var sig = (cert.signatures.x509 = {});
-	sig.extras = {};
-
-	cert.serial = readMPInt(der, 'serial');
-
-	der.readSequence();
-	var after = der.offset + der.length;
-	var certAlgOid = der.readOID();
-	var certAlg = SIGN_ALGS[certAlgOid];
-	if (certAlg === undefined)
-		throw (new Error('unknown signature algorithm ' + certAlgOid));
-
-	der._offset = after;
-	cert.issuer = Identity.parseAsn1(der);
-
-	der.readSequence();
-	cert.validFrom = readDate(der);
-	cert.validUntil = readDate(der);
-
-	cert.subjects = [Identity.parseAsn1(der)];
-
-	der.readSequence();
-	after = der.offset + der.length;
-	cert.subjectKey = pkcs8.readPkcs8(undefined, 'public', der);
-	der._offset = after;
-
-	/* issuerUniqueID */
-	if (der.peek() === Local(1)) {
-		der.readSequence(Local(1));
-		sig.extras.issuerUniqueID =
-		    buf.slice(der.offset, der.offset + der.length);
-		der._offset += der.length;
-	}
-
-	/* subjectUniqueID */
-	if (der.peek() === Local(2)) {
-		der.readSequence(Local(2));
-		sig.extras.subjectUniqueID =
-		    buf.slice(der.offset, der.offset + der.length);
-		der._offset += der.length;
-	}
-
-	/* extensions */
-	if (der.peek() === Local(3)) {
-		der.readSequence(Local(3));
-		var extEnd = der.offset + der.length;
-		der.readSequence();
-
-		while (der.offset < extEnd)
-			readExtension(cert, buf, der);
-
-		assert.strictEqual(der.offset, extEnd);
-	}
-
-	assert.strictEqual(der.offset, sigOffset);
-
-	der.readSequence();
-	after = der.offset + der.length;
-	var sigAlgOid = der.readOID();
-	var sigAlg = SIGN_ALGS[sigAlgOid];
-	if (sigAlg === undefined)
-		throw (new Error('unknown signature algorithm ' + sigAlgOid));
-	der._offset = after;
-
-	var sigData = der.readString(asn1.Ber.BitString, true);
-	if (sigData[0] === 0)
-		sigData = sigData.slice(1);
-	var algParts = sigAlg.split('-');
-
-	sig.signature = Signature.parse(sigData, algParts[0], 'asn1');
-	sig.signature.hashAlgorithm = algParts[1];
-	sig.algo = sigAlg;
-	sig.cache = buf.slice(tbsStart, tbsEnd);
-
-	return (new Certificate(cert));
-}
-
-function readDate(der) {
-	if (der.peek() === asn1.Ber.UTCTime) {
-		return (utcTimeToDate(der.readString(asn1.Ber.UTCTime)));
-	} else if (der.peek() === asn1.Ber.GeneralizedTime) {
-		return (gTimeToDate(der.readString(asn1.Ber.GeneralizedTime)));
-	} else {
-		throw (new Error('Unsupported date format'));
-	}
-}
-
-/* RFC5280, section 4.2.1.6 (GeneralName type) */
-var ALTNAME = {
-	OtherName: Local(0),
-	RFC822Name: Context(1),
-	DNSName: Context(2),
-	X400Address: Local(3),
-	DirectoryName: Local(4),
-	EDIPartyName: Local(5),
-	URI: Context(6),
-	IPAddress: Context(7),
-	OID: Context(8)
-};
-
-/* RFC5280, section 4.2.1.12 (KeyPurposeId) */
-var EXTPURPOSE = {
-	'serverAuth': '1.3.6.1.5.5.7.3.1',
-	'clientAuth': '1.3.6.1.5.5.7.3.2',
-	'codeSigning': '1.3.6.1.5.5.7.3.3',
-
-	/* See https://github.com/joyent/oid-docs/blob/master/root.md */
-	'joyentDocker': '1.3.6.1.4.1.38678.1.4.1',
-	'joyentCmon': '1.3.6.1.4.1.38678.1.4.2'
-};
-var EXTPURPOSE_REV = {};
-Object.keys(EXTPURPOSE).forEach(function (k) {
-	EXTPURPOSE_REV[EXTPURPOSE[k]] = k;
-});
-
-var KEYUSEBITS = [
-	'signature', 'identity', 'keyEncryption',
-	'encryption', 'keyAgreement', 'ca', 'crl'
-];
-
-function readExtension(cert, buf, der) {
-	der.readSequence();
-	var after = der.offset + der.length;
-	var extId = der.readOID();
-	var id;
-	var sig = cert.signatures.x509;
-	sig.extras.exts = [];
-
-	var critical;
-	if (der.peek() === asn1.Ber.Boolean)
-		critical = der.readBoolean();
-
-	switch (extId) {
-	case (EXTS.basicConstraints):
-		der.readSequence(asn1.Ber.OctetString);
-		der.readSequence();
-		var bcEnd = der.offset + der.length;
-		var ca = false;
-		if (der.peek() === asn1.Ber.Boolean)
-			ca = der.readBoolean();
-		if (cert.purposes === undefined)
-			cert.purposes = [];
-		if (ca === true)
-			cert.purposes.push('ca');
-		var bc = { oid: extId, critical: critical };
-		if (der.offset < bcEnd && der.peek() === asn1.Ber.Integer)
-			bc.pathLen = der.readInt();
-		sig.extras.exts.push(bc);
-		break;
-	case (EXTS.extKeyUsage):
-		der.readSequence(asn1.Ber.OctetString);
-		der.readSequence();
-		if (cert.purposes === undefined)
-			cert.purposes = [];
-		var ekEnd = der.offset + der.length;
-		while (der.offset < ekEnd) {
-			var oid = der.readOID();
-			cert.purposes.push(EXTPURPOSE_REV[oid] || oid);
-		}
-		/*
-		 * This is a bit of a hack: in the case where we have a cert
-		 * that's only allowed to do serverAuth or clientAuth (and not
-		 * the other), we want to make sure all our Subjects are of
-		 * the right type. But we already parsed our Subjects and
-		 * decided if they were hosts or users earlier (since it appears
-		 * first in the cert).
-		 *
-		 * So we go through and mutate them into the right kind here if
-		 * it doesn't match. This might not be hugely beneficial, as it
-		 * seems that single-purpose certs are not often seen in the
-		 * wild.
-		 */
-		if (cert.purposes.indexOf('serverAuth') !== -1 &&
-		    cert.purposes.indexOf('clientAuth') === -1) {
-			cert.subjects.forEach(function (ide) {
-				if (ide.type !== 'host') {
-					ide.type = 'host';
-					ide.hostname = ide.uid ||
-					    ide.email ||
-					    ide.components[0].value;
-				}
-			});
-		} else if (cert.purposes.indexOf('clientAuth') !== -1 &&
-		    cert.purposes.indexOf('serverAuth') === -1) {
-			cert.subjects.forEach(function (ide) {
-				if (ide.type !== 'user') {
-					ide.type = 'user';
-					ide.uid = ide.hostname ||
-					    ide.email ||
-					    ide.components[0].value;
-				}
-			});
-		}
-		sig.extras.exts.push({ oid: extId, critical: critical });
-		break;
-	case (EXTS.keyUsage):
-		der.readSequence(asn1.Ber.OctetString);
-		var bits = der.readString(asn1.Ber.BitString, true);
-		var setBits = readBitField(bits, KEYUSEBITS);
-		setBits.forEach(function (bit) {
-			if (cert.purposes === undefined)
-				cert.purposes = [];
-			if (cert.purposes.indexOf(bit) === -1)
-				cert.purposes.push(bit);
-		});
-		sig.extras.exts.push({ oid: extId, critical: critical,
-		    bits: bits });
-		break;
-	case (EXTS.altName):
-		der.readSequence(asn1.Ber.OctetString);
-		der.readSequence();
-		var aeEnd = der.offset + der.length;
-		while (der.offset < aeEnd) {
-			switch (der.peek()) {
-			case ALTNAME.OtherName:
-			case ALTNAME.EDIPartyName:
-				der.readSequence();
-				der._offset += der.length;
-				break;
-			case ALTNAME.OID:
-				der.readOID(ALTNAME.OID);
-				break;
-			case ALTNAME.RFC822Name:
-				/* RFC822 specifies email addresses */
-				var email = der.readString(ALTNAME.RFC822Name);
-				id = Identity.forEmail(email);
-				if (!cert.subjects[0].equals(id))
-					cert.subjects.push(id);
-				break;
-			case ALTNAME.DirectoryName:
-				der.readSequence(ALTNAME.DirectoryName);
-				id = Identity.parseAsn1(der);
-				if (!cert.subjects[0].equals(id))
-					cert.subjects.push(id);
-				break;
-			case ALTNAME.DNSName:
-				var host = der.readString(
-				    ALTNAME.DNSName);
-				id = Identity.forHost(host);
-				if (!cert.subjects[0].equals(id))
-					cert.subjects.push(id);
-				break;
-			default:
-				der.readString(der.peek());
-				break;
-			}
-		}
-		sig.extras.exts.push({ oid: extId, critical: critical });
-		break;
-	default:
-		sig.extras.exts.push({
-			oid: extId,
-			critical: critical,
-			data: der.readString(asn1.Ber.OctetString, true)
-		});
-		break;
-	}
-
-	der._offset = after;
-}
-
-var UTCTIME_RE =
-    /^([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})?Z$/;
-function utcTimeToDate(t) {
-	var m = t.match(UTCTIME_RE);
-	assert.ok(m, 'timestamps must be in UTC');
-	var d = new Date();
-
-	var thisYear = d.getUTCFullYear();
-	var century = Math.floor(thisYear / 100) * 100;
-
-	var year = parseInt(m[1], 10);
-	if (thisYear % 100 < 50 && year >= 60)
-		year += (century - 1);
-	else
-		year += century;
-	d.setUTCFullYear(year, parseInt(m[2], 10) - 1, parseInt(m[3], 10));
-	d.setUTCHours(parseInt(m[4], 10), parseInt(m[5], 10));
-	if (m[6] && m[6].length > 0)
-		d.setUTCSeconds(parseInt(m[6], 10));
-	return (d);
-}
-
-var GTIME_RE =
-    /^([0-9]{4})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})([0-9]{2})?Z$/;
-function gTimeToDate(t) {
-	var m = t.match(GTIME_RE);
-	assert.ok(m);
-	var d = new Date();
-
-	d.setUTCFullYear(parseInt(m[1], 10), parseInt(m[2], 10) - 1,
-	    parseInt(m[3], 10));
-	d.setUTCHours(parseInt(m[4], 10), parseInt(m[5], 10));
-	if (m[6] && m[6].length > 0)
-		d.setUTCSeconds(parseInt(m[6], 10));
-	return (d);
-}
-
-function zeroPad(n) {
-	var s = '' + n;
-	while (s.length < 2)
-		s = '0' + s;
-	return (s);
-}
-
-function dateToUTCTime(d) {
-	var s = '';
-	s += zeroPad(d.getUTCFullYear() % 100);
-	s += zeroPad(d.getUTCMonth() + 1);
-	s += zeroPad(d.getUTCDate());
-	s += zeroPad(d.getUTCHours());
-	s += zeroPad(d.getUTCMinutes());
-	s += zeroPad(d.getUTCSeconds());
-	s += 'Z';
-	return (s);
-}
-
-function sign(cert, key) {
-	if (cert.signatures.x509 === undefined)
-		cert.signatures.x509 = {};
-	var sig = cert.signatures.x509;
-
-	sig.algo = key.type + '-' + key.defaultHashAlgorithm();
-	if (SIGN_ALGS[sig.algo] === undefined)
-		return (false);
-
-	var der = new asn1.BerWriter();
-	writeTBSCert(cert, der);
-	var blob = der.buffer;
-	sig.cache = blob;
-
-	var signer = key.createSign();
-	signer.write(blob);
-	cert.signatures.x509.signature = signer.sign();
-
-	return (true);
-}
-
-function signAsync(cert, signer, done) {
-	if (cert.signatures.x509 === undefined)
-		cert.signatures.x509 = {};
-	var sig = cert.signatures.x509;
-
-	var der = new asn1.BerWriter();
-	writeTBSCert(cert, der);
-	var blob = der.buffer;
-	sig.cache = blob;
-
-	signer(blob, function (err, signature) {
-		if (err) {
-			done(err);
-			return;
-		}
-		sig.algo = signature.type + '-' + signature.hashAlgorithm;
-		if (SIGN_ALGS[sig.algo] === undefined) {
-			done(new Error('Invalid signing algorithm "' +
-			    sig.algo + '"'));
-			return;
-		}
-		sig.signature = signature;
-		done();
-	});
-}
-
-function write(cert, options) {
-	var sig = cert.signatures.x509;
-	assert.object(sig, 'x509 signature');
-
-	var der = new asn1.BerWriter();
-	der.startSequence();
-	if (sig.cache) {
-		der._ensure(sig.cache.length);
-		sig.cache.copy(der._buf, der._offset);
-		der._offset += sig.cache.length;
-	} else {
-		writeTBSCert(cert, der);
-	}
-
-	der.startSequence();
-	der.writeOID(SIGN_ALGS[sig.algo]);
-	if (sig.algo.match(/^rsa-/))
-		der.writeNull();
-	der.endSequence();
-
-	var sigData = sig.signature.toBuffer('asn1');
-	var data = Buffer.alloc(sigData.length + 1);
-	data[0] = 0;
-	sigData.copy(data, 1);
-	der.writeBuffer(data, asn1.Ber.BitString);
-	der.endSequence();
-
-	return (der.buffer);
-}
-
-function writeTBSCert(cert, der) {
-	var sig = cert.signatures.x509;
-	assert.object(sig, 'x509 signature');
-
-	der.startSequence();
-
-	der.startSequence(Local(0));
-	der.writeInt(2);
-	der.endSequence();
-
-	der.writeBuffer(utils.mpNormalize(cert.serial), asn1.Ber.Integer);
-
-	der.startSequence();
-	der.writeOID(SIGN_ALGS[sig.algo]);
-	if (sig.algo.match(/^rsa-/))
-		der.writeNull();
-	der.endSequence();
-
-	cert.issuer.toAsn1(der);
-
-	der.startSequence();
-	der.writeString(dateToUTCTime(cert.validFrom), asn1.Ber.UTCTime);
-	der.writeString(dateToUTCTime(cert.validUntil), asn1.Ber.UTCTime);
-	der.endSequence();
-
-	var subject = cert.subjects[0];
-	var altNames = cert.subjects.slice(1);
-	subject.toAsn1(der);
-
-	pkcs8.writePkcs8(der, cert.subjectKey);
-
-	if (sig.extras && sig.extras.issuerUniqueID) {
-		der.writeBuffer(sig.extras.issuerUniqueID, Local(1));
-	}
-
-	if (sig.extras && sig.extras.subjectUniqueID) {
-		der.writeBuffer(sig.extras.subjectUniqueID, Local(2));
-	}
-
-	if (altNames.length > 0 || subject.type === 'host' ||
-	    (cert.purposes !== undefined && cert.purposes.length > 0) ||
-	    (sig.extras && sig.extras.exts)) {
-		der.startSequence(Local(3));
-		der.startSequence();
-
-		var exts = [];
-		if (cert.purposes !== undefined && cert.purposes.length > 0) {
-			exts.push({
-				oid: EXTS.basicConstraints,
-				critical: true
-			});
-			exts.push({
-				oid: EXTS.keyUsage,
-				critical: true
-			});
-			exts.push({
-				oid: EXTS.extKeyUsage,
-				critical: true
-			});
-		}
-		exts.push({ oid: EXTS.altName });
-		if (sig.extras && sig.extras.exts)
-			exts = sig.extras.exts;
-
-		for (var i = 0; i < exts.length; ++i) {
-			der.startSequence();
-			der.writeOID(exts[i].oid);
-
-			if (exts[i].critical !== undefined)
-				der.writeBoolean(exts[i].critical);
-
-			if (exts[i].oid === EXTS.altName) {
-				der.startSequence(asn1.Ber.OctetString);
-				der.startSequence();
-				if (subject.type === 'host') {
-					der.writeString(subject.hostname,
-					    Context(2));
-				}
-				for (var j = 0; j < altNames.length; ++j) {
-					if (altNames[j].type === 'host') {
-						der.writeString(
-						    altNames[j].hostname,
-						    ALTNAME.DNSName);
-					} else if (altNames[j].type ===
-					    'email') {
-						der.writeString(
-						    altNames[j].email,
-						    ALTNAME.RFC822Name);
-					} else {
-						/*
-						 * Encode anything else as a
-						 * DN style name for now.
-						 */
-						der.startSequence(
-						    ALTNAME.DirectoryName);
-						altNames[j].toAsn1(der);
-						der.endSequence();
-					}
-				}
-				der.endSequence();
-				der.endSequence();
-			} else if (exts[i].oid === EXTS.basicConstraints) {
-				der.startSequence(asn1.Ber.OctetString);
-				der.startSequence();
-				var ca = (cert.purposes.indexOf('ca') !== -1);
-				var pathLen = exts[i].pathLen;
-				der.writeBoolean(ca);
-				if (pathLen !== undefined)
-					der.writeInt(pathLen);
-				der.endSequence();
-				der.endSequence();
-			} else if (exts[i].oid === EXTS.extKeyUsage) {
-				der.startSequence(asn1.Ber.OctetString);
-				der.startSequence();
-				cert.purposes.forEach(function (purpose) {
-					if (purpose === 'ca')
-						return;
-					if (KEYUSEBITS.indexOf(purpose) !== -1)
-						return;
-					var oid = purpose;
-					if (EXTPURPOSE[purpose] !== undefined)
-						oid = EXTPURPOSE[purpose];
-					der.writeOID(oid);
-				});
-				der.endSequence();
-				der.endSequence();
-			} else if (exts[i].oid === EXTS.keyUsage) {
-				der.startSequence(asn1.Ber.OctetString);
-				/*
-				 * If we parsed this certificate from a byte
-				 * stream (i.e. we didn't generate it in sshpk)
-				 * then we'll have a ".bits" property on the
-				 * ext with the original raw byte contents.
-				 *
-				 * If we have this, use it here instead of
-				 * regenerating it. This guarantees we output
-				 * the same data we parsed, so signatures still
-				 * validate.
-				 */
-				if (exts[i].bits !== undefined) {
-					der.writeBuffer(exts[i].bits,
-					    asn1.Ber.BitString);
-				} else {
-					var bits = writeBitField(cert.purposes,
-					    KEYUSEBITS);
-					der.writeBuffer(bits,
-					    asn1.Ber.BitString);
-				}
-				der.endSequence();
-			} else {
-				der.writeBuffer(exts[i].data,
-				    asn1.Ber.OctetString);
-			}
-
-			der.endSequence();
-		}
-
-		der.endSequence();
-		der.endSequence();
-	}
-
-	der.endSequence();
-}
-
-/*
- * Reads an ASN.1 BER bitfield out of the Buffer produced by doing
- * `BerReader#readString(asn1.Ber.BitString)`. That function gives us the raw
- * contents of the BitString tag, which is a count of unused bits followed by
- * the bits as a right-padded byte string.
- *
- * `bits` is the Buffer, `bitIndex` should contain an array of string names
- * for the bits in the string, ordered starting with bit #0 in the ASN.1 spec.
- *
- * Returns an array of Strings, the names of the bits that were set to 1.
- */
-function readBitField(bits, bitIndex) {
-	var bitLen = 8 * (bits.length - 1) - bits[0];
-	var setBits = {};
-	for (var i = 0; i < bitLen; ++i) {
-		var byteN = 1 + Math.floor(i / 8);
-		var bit = 7 - (i % 8);
-		var mask = 1 << bit;
-		var bitVal = ((bits[byteN] & mask) !== 0);
-		var name = bitIndex[i];
-		if (bitVal && typeof (name) === 'string') {
-			setBits[name] = true;
-		}
-	}
-	return (Object.keys(setBits));
-}
-
-/*
- * `setBits` is an array of strings, containing the names for each bit that
- * sould be set to 1. `bitIndex` is same as in `readBitField()`.
- *
- * Returns a Buffer, ready to be written out with `BerWriter#writeString()`.
- */
-function writeBitField(setBits, bitIndex) {
-	var bitLen = bitIndex.length;
-	var blen = Math.ceil(bitLen / 8);
-	var unused = blen * 8 - bitLen;
-	var bits = Buffer.alloc(1 + blen); // zero-filled
-	bits[0] = unused;
-	for (var i = 0; i < bitLen; ++i) {
-		var byteN = 1 + Math.floor(i / 8);
-		var bit = 7 - (i % 8);
-		var mask = 1 << bit;
-		var name = bitIndex[i];
-		if (name === undefined)
-			continue;
-		var bitVal = (setBits.indexOf(name) !== -1);
-		if (bitVal) {
-			bits[byteN] |= mask;
-		}
-	}
-	return (bits);
-}
-
-
-/***/ }),
-/* 458 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-
-
-/*<replacement>*/
-
-var Buffer = __webpack_require__(45).Buffer;
-/*</replacement>*/
-
-var isEncoding = Buffer.isEncoding || function (encoding) {
-  encoding = '' + encoding;
-  switch (encoding && encoding.toLowerCase()) {
-    case 'hex':case 'utf8':case 'utf-8':case 'ascii':case 'binary':case 'base64':case 'ucs2':case 'ucs-2':case 'utf16le':case 'utf-16le':case 'raw':
-      return true;
-    default:
-      return false;
-  }
-};
-
-function _normalizeEncoding(enc) {
-  if (!enc) return 'utf8';
-  var retried;
-  while (true) {
-    switch (enc) {
-      case 'utf8':
-      case 'utf-8':
-        return 'utf8';
-      case 'ucs2':
-      case 'ucs-2':
-      case 'utf16le':
-      case 'utf-16le':
-        return 'utf16le';
-      case 'latin1':
-      case 'binary':
-        return 'latin1';
-      case 'base64':
-      case 'ascii':
-      case 'hex':
-        return enc;
-      default:
-        if (retried) return; // undefined
-        enc = ('' + enc).toLowerCase();
-        retried = true;
-    }
-  }
-};
-
-// Do not cache `Buffer.isEncoding` when checking encoding names as some
-// modules monkey-patch it to support additional encodings
-function normalizeEncoding(enc) {
-  var nenc = _normalizeEncoding(enc);
-  if (typeof nenc !== 'string' && (Buffer.isEncoding === isEncoding || !isEncoding(enc))) throw new Error('Unknown encoding: ' + enc);
-  return nenc || enc;
-}
-
-// StringDecoder provides an interface for efficiently splitting a series of
-// buffers into a series of JS strings without breaking apart multi-byte
-// characters.
-exports.StringDecoder = StringDecoder;
-function StringDecoder(encoding) {
-  this.encoding = normalizeEncoding(encoding);
-  var nb;
-  switch (this.encoding) {
-    case 'utf16le':
-      this.text = utf16Text;
-      this.end = utf16End;
-      nb = 4;
-      break;
-    case 'utf8':
-      this.fillLast = utf8FillLast;
-      nb = 4;
-      break;
-    case 'base64':
-      this.text = base64Text;
-      this.end = base64End;
-      nb = 3;
-      break;
-    default:
-      this.write = simpleWrite;
-      this.end = simpleEnd;
-      return;
-  }
-  this.lastNeed = 0;
-  this.lastTotal = 0;
-  this.lastChar = Buffer.allocUnsafe(nb);
-}
-
-StringDecoder.prototype.write = function (buf) {
-  if (buf.length === 0) return '';
-  var r;
-  var i;
-  if (this.lastNeed) {
-    r = this.fillLast(buf);
-    if (r === undefined) return '';
-    i = this.lastNeed;
-    this.lastNeed = 0;
-  } else {
-    i = 0;
-  }
-  if (i < buf.length) return r ? r + this.text(buf, i) : this.text(buf, i);
-  return r || '';
-};
-
-StringDecoder.prototype.end = utf8End;
-
-// Returns only complete characters in a Buffer
-StringDecoder.prototype.text = utf8Text;
-
-// Attempts to complete a partial non-UTF-8 character using bytes from a Buffer
-StringDecoder.prototype.fillLast = function (buf) {
-  if (this.lastNeed <= buf.length) {
-    buf.copy(this.lastChar, this.lastTotal - this.lastNeed, 0, this.lastNeed);
-    return this.lastChar.toString(this.encoding, 0, this.lastTotal);
-  }
-  buf.copy(this.lastChar, this.lastTotal - this.lastNeed, 0, buf.length);
-  this.lastNeed -= buf.length;
-};
-
-// Checks the type of a UTF-8 byte, whether it's ASCII, a leading byte, or a
-// continuation byte. If an invalid byte is detected, -2 is returned.
-function utf8CheckByte(byte) {
-  if (byte <= 0x7F) return 0;else if (byte >> 5 === 0x06) return 2;else if (byte >> 4 === 0x0E) return 3;else if (byte >> 3 === 0x1E) return 4;
-  return byte >> 6 === 0x02 ? -1 : -2;
-}
-
-// Checks at most 3 bytes at the end of a Buffer in order to detect an
-// incomplete multi-byte UTF-8 character. The total number of bytes (2, 3, or 4)
-// needed to complete the UTF-8 character (if applicable) are returned.
-function utf8CheckIncomplete(self, buf, i) {
-  var j = buf.length - 1;
-  if (j < i) return 0;
-  var nb = utf8CheckByte(buf[j]);
-  if (nb >= 0) {
-    if (nb > 0) self.lastNeed = nb - 1;
-    return nb;
-  }
-  if (--j < i || nb === -2) return 0;
-  nb = utf8CheckByte(buf[j]);
-  if (nb >= 0) {
-    if (nb > 0) self.lastNeed = nb - 2;
-    return nb;
-  }
-  if (--j < i || nb === -2) return 0;
-  nb = utf8CheckByte(buf[j]);
-  if (nb >= 0) {
-    if (nb > 0) {
-      if (nb === 2) nb = 0;else self.lastNeed = nb - 3;
-    }
-    return nb;
-  }
-  return 0;
-}
-
-// Validates as many continuation bytes for a multi-byte UTF-8 character as
-// needed or are available. If we see a non-continuation byte where we expect
-// one, we "replace" the validated continuation bytes we've seen so far with
-// a single UTF-8 replacement character ('\ufffd'), to match v8's UTF-8 decoding
-// behavior. The continuation byte check is included three times in the case
-// where all of the continuation bytes for a character exist in the same buffer.
-// It is also done this way as a slight performance increase instead of using a
-// loop.
-function utf8CheckExtraBytes(self, buf, p) {
-  if ((buf[0] & 0xC0) !== 0x80) {
-    self.lastNeed = 0;
-    return '\ufffd';
-  }
-  if (self.lastNeed > 1 && buf.length > 1) {
-    if ((buf[1] & 0xC0) !== 0x80) {
-      self.lastNeed = 1;
-      return '\ufffd';
-    }
-    if (self.lastNeed > 2 && buf.length > 2) {
-      if ((buf[2] & 0xC0) !== 0x80) {
-        self.lastNeed = 2;
-        return '\ufffd';
-      }
-    }
-  }
-}
-
-// Attempts to complete a multi-byte UTF-8 character using bytes from a Buffer.
-function utf8FillLast(buf) {
-  var p = this.lastTotal - this.lastNeed;
-  var r = utf8CheckExtraBytes(this, buf, p);
-  if (r !== undefined) return r;
-  if (this.lastNeed <= buf.length) {
-    buf.copy(this.lastChar, p, 0, this.lastNeed);
-    return this.lastChar.toString(this.encoding, 0, this.lastTotal);
-  }
-  buf.copy(this.lastChar, p, 0, buf.length);
-  this.lastNeed -= buf.length;
-}
-
-// Returns all complete UTF-8 characters in a Buffer. If the Buffer ended on a
-// partial character, the character's bytes are buffered until the required
-// number of bytes are available.
-function utf8Text(buf, i) {
-  var total = utf8CheckIncomplete(this, buf, i);
-  if (!this.lastNeed) return buf.toString('utf8', i);
-  this.lastTotal = total;
-  var end = buf.length - (total - this.lastNeed);
-  buf.copy(this.lastChar, 0, end);
-  return buf.toString('utf8', i, end);
-}
-
-// For UTF-8, a replacement character is added when ending on a partial
-// character.
-function utf8End(buf) {
-  var r = buf && buf.length ? this.write(buf) : '';
-  if (this.lastNeed) return r + '\ufffd';
-  return r;
-}
-
-// UTF-16LE typically needs two bytes per character, but even if we have an even
-// number of bytes available, we need to check if we end on a leading/high
-// surrogate. In that case, we need to wait for the next two bytes in order to
-// decode the last character properly.
-function utf16Text(buf, i) {
-  if ((buf.length - i) % 2 === 0) {
-    var r = buf.toString('utf16le', i);
-    if (r) {
-      var c = r.charCodeAt(r.length - 1);
-      if (c >= 0xD800 && c <= 0xDBFF) {
-        this.lastNeed = 2;
-        this.lastTotal = 4;
-        this.lastChar[0] = buf[buf.length - 2];
-        this.lastChar[1] = buf[buf.length - 1];
-        return r.slice(0, -1);
-      }
-    }
-    return r;
-  }
-  this.lastNeed = 1;
-  this.lastTotal = 2;
-  this.lastChar[0] = buf[buf.length - 1];
-  return buf.toString('utf16le', i, buf.length - 1);
-}
-
-// For UTF-16LE we do not explicitly append special replacement characters if we
-// end on a partial character, we simply let v8 handle that.
-function utf16End(buf) {
-  var r = buf && buf.length ? this.write(buf) : '';
-  if (this.lastNeed) {
-    var end = this.lastTotal - this.lastNeed;
-    return r + this.lastChar.toString('utf16le', 0, end);
-  }
-  return r;
-}
-
-function base64Text(buf, i) {
-  var n = (buf.length - i) % 3;
-  if (n === 0) return buf.toString('base64', i);
-  this.lastNeed = 3 - n;
-  this.lastTotal = 3;
-  if (n === 1) {
-    this.lastChar[0] = buf[buf.length - 1];
-  } else {
-    this.lastChar[0] = buf[buf.length - 2];
-    this.lastChar[1] = buf[buf.length - 1];
-  }
-  return buf.toString('base64', i, buf.length - n);
-}
-
-function base64End(buf) {
-  var r = buf && buf.length ? this.write(buf) : '';
-  if (this.lastNeed) return r + this.lastChar.toString('base64', 0, 3 - this.lastNeed);
-  return r;
-}
-
-// Pass bytes on through for single-byte encodings (e.g. ascii, latin1, hex)
-function simpleWrite(buf) {
-  return buf.toString(this.encoding);
-}
-
-function simpleEnd(buf) {
-  return buf && buf.length ? this.write(buf) : '';
-}
-
-/***/ }),
-/* 459 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var toBuffer = __webpack_require__(462)
-var alloc = __webpack_require__(380)
-
-var ZEROS = '0000000000000000000'
-var SEVENS = '7777777777777777777'
-var ZERO_OFFSET = '0'.charCodeAt(0)
-var USTAR = 'ustar\x0000'
-var MASK = parseInt('7777', 8)
-
-var clamp = function (index, len, defaultValue) {
-  if (typeof index !== 'number') return defaultValue
-  index = ~~index // Coerce to integer.
-  if (index >= len) return len
-  if (index >= 0) return index
-  index += len
-  if (index >= 0) return index
-  return 0
-}
-
-var toType = function (flag) {
-  switch (flag) {
-    case 0:
-      return 'file'
-    case 1:
-      return 'link'
-    case 2:
-      return 'symlink'
-    case 3:
-      return 'character-device'
-    case 4:
-      return 'block-device'
-    case 5:
-      return 'directory'
-    case 6:
-      return 'fifo'
-    case 7:
-      return 'contiguous-file'
-    case 72:
-      return 'pax-header'
-    case 55:
-      return 'pax-global-header'
-    case 27:
-      return 'gnu-long-link-path'
-    case 28:
-    case 30:
-      return 'gnu-long-path'
-  }
-
-  return null
-}
-
-var toTypeflag = function (flag) {
-  switch (flag) {
-    case 'file':
-      return 0
-    case 'link':
-      return 1
-    case 'symlink':
-      return 2
-    case 'character-device':
-      return 3
-    case 'block-device':
-      return 4
-    case 'directory':
-      return 5
-    case 'fifo':
-      return 6
-    case 'contiguous-file':
-      return 7
-    case 'pax-header':
-      return 72
-  }
-
-  return 0
-}
-
-var indexOf = function (block, num, offset, end) {
-  for (; offset < end; offset++) {
-    if (block[offset] === num) return offset
-  }
-  return end
-}
-
-var cksum = function (block) {
-  var sum = 8 * 32
-  for (var i = 0; i < 148; i++) sum += block[i]
-  for (var j = 156; j < 512; j++) sum += block[j]
-  return sum
-}
-
-var encodeOct = function (val, n) {
-  val = val.toString(8)
-  if (val.length > n) return SEVENS.slice(0, n) + ' '
-  else return ZEROS.slice(0, n - val.length) + val + ' '
-}
-
-/* Copied from the node-tar repo and modified to meet
- * tar-stream coding standard.
- *
- * Source: https://github.com/npm/node-tar/blob/51b6627a1f357d2eb433e7378e5f05e83b7aa6cd/lib/header.js#L349
- */
-function parse256 (buf) {
-  // first byte MUST be either 80 or FF
-  // 80 for positive, FF for 2's comp
-  var positive
-  if (buf[0] === 0x80) positive = true
-  else if (buf[0] === 0xFF) positive = false
-  else return null
-
-  // build up a base-256 tuple from the least sig to the highest
-  var zero = false
-  var tuple = []
-  for (var i = buf.length - 1; i > 0; i--) {
-    var byte = buf[i]
-    if (positive) tuple.push(byte)
-    else if (zero && byte === 0) tuple.push(0)
-    else if (zero) {
-      zero = false
-      tuple.push(0x100 - byte)
-    } else tuple.push(0xFF - byte)
-  }
-
-  var sum = 0
-  var l = tuple.length
-  for (i = 0; i < l; i++) {
-    sum += tuple[i] * Math.pow(256, i)
-  }
-
-  return positive ? sum : -1 * sum
-}
-
-var decodeOct = function (val, offset, length) {
-  val = val.slice(offset, offset + length)
-  offset = 0
-
-  // If prefixed with 0x80 then parse as a base-256 integer
-  if (val[offset] & 0x80) {
-    return parse256(val)
-  } else {
-    // Older versions of tar can prefix with spaces
-    while (offset < val.length && val[offset] === 32) offset++
-    var end = clamp(indexOf(val, 32, offset, val.length), val.length, val.length)
-    while (offset < end && val[offset] === 0) offset++
-    if (end === offset) return 0
-    return parseInt(val.slice(offset, end).toString(), 8)
-  }
-}
-
-var decodeStr = function (val, offset, length, encoding) {
-  return val.slice(offset, indexOf(val, 0, offset, offset + length)).toString(encoding)
-}
-
-var addLength = function (str) {
-  var len = Buffer.byteLength(str)
-  var digits = Math.floor(Math.log(len) / Math.log(10)) + 1
-  if (len + digits >= Math.pow(10, digits)) digits++
-
-  return (len + digits) + str
-}
-
-exports.decodeLongPath = function (buf, encoding) {
-  return decodeStr(buf, 0, buf.length, encoding)
-}
-
-exports.encodePax = function (opts) { // TODO: encode more stuff in pax
-  var result = ''
-  if (opts.name) result += addLength(' path=' + opts.name + '\n')
-  if (opts.linkname) result += addLength(' linkpath=' + opts.linkname + '\n')
-  var pax = opts.pax
-  if (pax) {
-    for (var key in pax) {
-      result += addLength(' ' + key + '=' + pax[key] + '\n')
-    }
-  }
-  return toBuffer(result)
-}
-
-exports.decodePax = function (buf) {
-  var result = {}
-
-  while (buf.length) {
-    var i = 0
-    while (i < buf.length && buf[i] !== 32) i++
-    var len = parseInt(buf.slice(0, i).toString(), 10)
-    if (!len) return result
-
-    var b = buf.slice(i + 1, len - 1).toString()
-    var keyIndex = b.indexOf('=')
-    if (keyIndex === -1) return result
-    result[b.slice(0, keyIndex)] = b.slice(keyIndex + 1)
-
-    buf = buf.slice(len)
-  }
-
-  return result
-}
-
-exports.encode = function (opts) {
-  var buf = alloc(512)
-  var name = opts.name
-  var prefix = ''
-
-  if (opts.typeflag === 5 && name[name.length - 1] !== '/') name += '/'
-  if (Buffer.byteLength(name) !== name.length) return null // utf-8
-
-  while (Buffer.byteLength(name) > 100) {
-    var i = name.indexOf('/')
-    if (i === -1) return null
-    prefix += prefix ? '/' + name.slice(0, i) : name.slice(0, i)
-    name = name.slice(i + 1)
-  }
-
-  if (Buffer.byteLength(name) > 100 || Buffer.byteLength(prefix) > 155) return null
-  if (opts.linkname && Buffer.byteLength(opts.linkname) > 100) return null
-
-  buf.write(name)
-  buf.write(encodeOct(opts.mode & MASK, 6), 100)
-  buf.write(encodeOct(opts.uid, 6), 108)
-  buf.write(encodeOct(opts.gid, 6), 116)
-  buf.write(encodeOct(opts.size, 11), 124)
-  buf.write(encodeOct((opts.mtime.getTime() / 1000) | 0, 11), 136)
-
-  buf[156] = ZERO_OFFSET + toTypeflag(opts.type)
-
-  if (opts.linkname) buf.write(opts.linkname, 157)
-
-  buf.write(USTAR, 257)
-  if (opts.uname) buf.write(opts.uname, 265)
-  if (opts.gname) buf.write(opts.gname, 297)
-  buf.write(encodeOct(opts.devmajor || 0, 6), 329)
-  buf.write(encodeOct(opts.devminor || 0, 6), 337)
-
-  if (prefix) buf.write(prefix, 345)
-
-  buf.write(encodeOct(cksum(buf), 6), 148)
-
-  return buf
-}
-
-exports.decode = function (buf, filenameEncoding) {
-  var typeflag = buf[156] === 0 ? 0 : buf[156] - ZERO_OFFSET
-
-  var name = decodeStr(buf, 0, 100, filenameEncoding)
-  var mode = decodeOct(buf, 100, 8)
-  var uid = decodeOct(buf, 108, 8)
-  var gid = decodeOct(buf, 116, 8)
-  var size = decodeOct(buf, 124, 12)
-  var mtime = decodeOct(buf, 136, 12)
-  var type = toType(typeflag)
-  var linkname = buf[157] === 0 ? null : decodeStr(buf, 157, 100, filenameEncoding)
-  var uname = decodeStr(buf, 265, 32)
-  var gname = decodeStr(buf, 297, 32)
-  var devmajor = decodeOct(buf, 329, 8)
-  var devminor = decodeOct(buf, 337, 8)
-
-  if (buf[345]) name = decodeStr(buf, 345, 155, filenameEncoding) + '/' + name
-
-  // to support old tar versions that use trailing / to indicate dirs
-  if (typeflag === 0 && name && name[name.length - 1] === '/') typeflag = 5
-
-  var c = cksum(buf)
-
-  // checksum is still initial value if header was null.
-  if (c === 8 * 32) return null
-
-  // valid checksum
-  if (c !== decodeOct(buf, 148, 8)) throw new Error('Invalid tar header. Maybe the tar is corrupted or it needs to be gunzipped?')
-
-  return {
-    name: name,
-    mode: mode,
-    uid: uid,
-    gid: gid,
-    size: size,
-    mtime: new Date(1000 * mtime),
-    type: type,
-    linkname: linkname,
-    uname: uname,
-    gname: gname,
-    devmajor: devmajor,
-    devminor: devminor
-  }
-}
-
-
-/***/ }),
-/* 460 */
-/***/ (function(module, exports, __webpack_require__) {
-
-exports.extract = __webpack_require__(949)
-exports.pack = __webpack_require__(950)
-
-
-/***/ }),
-/* 461 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Transform = __webpack_require__(794)
-  , inherits  = __webpack_require__(3).inherits
-  , xtend     = __webpack_require__(465)
-
-function DestroyableTransform(opts) {
-  Transform.call(this, opts)
-  this._destroyed = false
-}
-
-inherits(DestroyableTransform, Transform)
-
-DestroyableTransform.prototype.destroy = function(err) {
-  if (this._destroyed) return
-  this._destroyed = true
-  
-  var self = this
-  process.nextTick(function() {
-    if (err)
-      self.emit('error', err)
-    self.emit('close')
-  })
-}
-
-// a noop _transform function
-function noop (chunk, enc, callback) {
-  callback(null, chunk)
-}
-
-
-// create a new export function, used by both the main export and
-// the .ctor export, contains common logic for dealing with arguments
-function through2 (construct) {
-  return function (options, transform, flush) {
-    if (typeof options == 'function') {
-      flush     = transform
-      transform = options
-      options   = {}
-    }
-
-    if (typeof transform != 'function')
-      transform = noop
-
-    if (typeof flush != 'function')
-      flush = null
-
-    return construct(options, transform, flush)
-  }
-}
-
-
-// main export, just make me a transform stream!
-module.exports = through2(function (options, transform, flush) {
-  var t2 = new DestroyableTransform(options)
-
-  t2._transform = transform
-
-  if (flush)
-    t2._flush = flush
-
-  return t2
-})
-
-
-// make me a reusable prototype that I can `new`, or implicitly `new`
-// with a constructor call
-module.exports.ctor = through2(function (options, transform, flush) {
-  function Through2 (override) {
-    if (!(this instanceof Through2))
-      return new Through2(override)
-
-    this.options = xtend(options, override)
-
-    DestroyableTransform.call(this, this.options)
-  }
-
-  inherits(Through2, DestroyableTransform)
-
-  Through2.prototype._transform = transform
-
-  if (flush)
-    Through2.prototype._flush = flush
-
-  return Through2
-})
-
-
-module.exports.obj = through2(function (options, transform, flush) {
-  var t2 = new DestroyableTransform(xtend({ objectMode: true, highWaterMark: 16 }, options))
-
-  t2._transform = transform
-
-  if (flush)
-    t2._flush = flush
-
-  return t2
-})
-
-
-/***/ }),
-/* 462 */
-/***/ (function(module, exports) {
-
-module.exports = toBuffer
-
-var makeBuffer = Buffer.from && Buffer.from !== Uint8Array.from ? Buffer.from : bufferFrom
-
-function bufferFrom (buf, enc) {
-  return new Buffer(buf, enc)
-}
-
-function toBuffer (buf, enc) {
-  if (Buffer.isBuffer(buf)) return buf
-  if (typeof buf === 'string') return makeBuffer(buf, enc)
-  if (Array.isArray(buf)) return makeBuffer(buf)
-  throw new Error('Input should be a buffer or a string')
-}
-
-
-/***/ }),
-/* 463 */
-/***/ (function(module, exports) {
-
-/**
- * Convert array of 16 byte values to UUID string format of the form:
- * XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX
- */
-var byteToHex = [];
-for (var i = 0; i < 256; ++i) {
-  byteToHex[i] = (i + 0x100).toString(16).substr(1);
-}
-
-function bytesToUuid(buf, offset) {
-  var i = offset || 0;
-  var bth = byteToHex;
-  // join used to fix memory issue caused by concatenation: https://bugs.chromium.org/p/v8/issues/detail?id=3175#c4
-  return ([bth[buf[i++]], bth[buf[i++]], 
-	bth[buf[i++]], bth[buf[i++]], '-',
-	bth[buf[i++]], bth[buf[i++]], '-',
-	bth[buf[i++]], bth[buf[i++]], '-',
-	bth[buf[i++]], bth[buf[i++]], '-',
-	bth[buf[i++]], bth[buf[i++]],
-	bth[buf[i++]], bth[buf[i++]],
-	bth[buf[i++]], bth[buf[i++]]]).join('');
-}
-
-module.exports = bytesToUuid;
-
-
-/***/ }),
-/* 464 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Unique ID creation requires a high quality random # generator.  In node.js
-// this is pretty straight-forward - we use the crypto API.
-
-var crypto = __webpack_require__(11);
-
-module.exports = function nodeRNG() {
-  return crypto.randomBytes(16);
-};
-
-
-/***/ }),
-/* 465 */
-/***/ (function(module, exports) {
-
-module.exports = extend
-
-var hasOwnProperty = Object.prototype.hasOwnProperty;
-
-function extend() {
-    var target = {}
-
-    for (var i = 0; i < arguments.length; i++) {
-        var source = arguments[i]
-
-        for (var key in source) {
-            if (hasOwnProperty.call(source, key)) {
-                target[key] = source[key]
-            }
-        }
-    }
-
-    return target
-}
-
-
-/***/ }),
-/* 466 */
-/***/ (function(module, exports) {
-
-module.exports = require("constants");
-
-/***/ }),
-/* 467 */
-/***/ (function(module, exports) {
-
-module.exports = require("tls");
-
-/***/ }),
-/* 468 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = handleSignals;
-
-var _child;
-
-function _load_child() {
-  return _child = __webpack_require__(58);
-}
-
-function forwardSignalAndExit(signal) {
-  (0, (_child || _load_child()).forwardSignalToSpawnedProcesses)(signal);
-  // We want to exit immediately here since `SIGTERM` means that
-  // If we lose stdout messages due to abrupt exit, shoot the messenger?
-  process.exit(1); // eslint-disable-line no-process-exit
-}
-function handleSignals() {
-  process.on('SIGTERM', () => {
-    forwardSignalAndExit('SIGTERM');
-  });
-}
-
-/***/ }),
-/* 469 */
-/***/ (function(module, exports) {
-
-
-var defaultConfig = {
-  uncaughtException: false,
-  SIGINT: true,
-  SIGTERM: true,
-  SIGQUIT: true
-}
-
-var DEBUG = false
-
-function ON_DEATH (callback) {
-  var handlers = [];
-  Object.keys(defaultConfig).forEach(function(key) {
-    var val = defaultConfig[key]
-    var handler = null;
-    if (val) {
-      if (DEBUG) {
-        handler = function() {
-          var args = Array.prototype.slice.call(arguments, 0)
-          args.unshift(key)
-          console.log('Trapped ' + key)
-          callback.apply(null, args)
-        };
-        process.on(key, handler)
-      } else {
-        handler = function() {
-          var args = Array.prototype.slice.call(arguments, 0)
-          args.unshift(key)
-          callback.apply(null, args)
-        }
-        process.on(key, handler)
-      }
-      handlers.push([key, handler])
-    }
-  })
-  return function OFF_DEATH() {
-    handlers.forEach(function (args) {
-      var key = args[0];
-      var handler = args[1];
-      process.removeListener(key, handler);
-    })
-  }
-}
-
-module.exports = function (arg) {
-  if (typeof arg === 'object') {
-    if (arg['debug'])
-      DEBUG = arg.debug
-    if (arg['DEBUG'])
-      DEBUG = arg.DEBUG
-    delete arg.debug; delete arg.DEBUG;
-
-    Object.keys(arg).forEach(function(key) {
-      defaultConfig[key] = arg[key]
-    })
-
-    if (DEBUG)
-      console.log('ON_DEATH: debug mode enabled for pid [%d]', process.pid)
-
-    return ON_DEATH
-   } else if (typeof arg === 'function') {
-    return ON_DEATH(arg)
-  }
-}
-
-
-
-/***/ }),
-/* 470 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var util = __webpack_require__(3);
-var onExit = __webpack_require__(451);
-var currentlyUnhandled = __webpack_require__(629);
-
-var installed = false;
-
-module.exports = function (log) {
-	if (installed) {
-		return;
-	}
-
-	installed = true;
-
-	log = log || console.error;
-
-	var listUnhandled = currentlyUnhandled();
-
-	onExit(function () {
-		var unhandledRejections = listUnhandled();
-
-		if (unhandledRejections.length > 0) {
-			unhandledRejections.forEach(function (x) {
-				var err = x.reason;
-
-				if (!(err instanceof Error)) {
-					err = new Error('Promise rejected with value: ' + util.inspect(err));
-				}
-
-				log(err.stack);
-			});
-
-			process.exitCode = 1;
-		}
-	});
-};
-
-
-/***/ }),
-/* 471 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-const fs = __webpack_require__(391);
-const path = __webpack_require__(0);
-const retry = __webpack_require__(819);
-const syncFs = __webpack_require__(779);
-
-const locks = {};
-
-function getLockFile(file) {
-    return `${file}.lock`;
-}
-
-function canonicalPath(file, options, callback) {
-    if (!options.realpath) {
-        return callback(null, path.resolve(file));
-    }
-
-    // Use realpath to resolve symlinks
-    // It also resolves relative paths
-    options.fs.realpath(file, callback);
-}
-
-function acquireLock(file, options, callback) {
-    // Use mkdir to create the lockfile (atomic operation)
-    options.fs.mkdir(getLockFile(file), (err) => {
-        // If successful, we are done
-        if (!err) {
-            return callback();
-        }
-
-        // If error is not EEXIST then some other error occurred while locking
-        if (err.code !== 'EEXIST') {
-            return callback(err);
-        }
-
-        // Otherwise, check if lock is stale by analyzing the file mtime
-        if (options.stale <= 0) {
-            return callback(Object.assign(new Error('Lock file is already being hold'), { code: 'ELOCKED', file }));
-        }
-
-        options.fs.stat(getLockFile(file), (err, stat) => {
-            if (err) {
-                // Retry if the lockfile has been removed (meanwhile)
-                // Skip stale check to avoid recursiveness
-                if (err.code === 'ENOENT') {
-                    return acquireLock(file, Object.assign({}, options, { stale: 0 }), callback);
-                }
-
-                return callback(err);
-            }
-
-            if (!isLockStale(stat, options)) {
-                return callback(Object.assign(new Error('Lock file is already being hold'), { code: 'ELOCKED', file }));
-            }
-
-            // If it's stale, remove it and try again!
-            // Skip stale check to avoid recursiveness
-            removeLock(file, options, (err) => {
-                if (err) {
-                    return callback(err);
-                }
-
-                acquireLock(file, Object.assign({}, options, { stale: 0 }), callback);
-            });
-        });
-    });
-}
-
-function isLockStale(stat, options) {
-    return stat.mtime.getTime() < Date.now() - options.stale;
-}
-
-function removeLock(file, options, callback) {
-    // Remove lockfile, ignoring ENOENT errors
-    options.fs.rmdir(getLockFile(file), (err) => {
-        if (err && err.code !== 'ENOENT') {
-            return callback(err);
-        }
-
-        callback();
-    });
-}
-
-function updateLock(file, options) {
-    const lock = locks[file];
-
-    /* istanbul ignore next */
-    if (lock.updateTimeout) {
-        return;
-    }
-
-    lock.updateDelay = lock.updateDelay || options.update;
-    lock.updateTimeout = setTimeout(() => {
-        const mtime = Date.now() / 1000;
-
-        lock.updateTimeout = null;
-
-        options.fs.utimes(getLockFile(file), mtime, mtime, (err) => {
-            // Ignore if the lock was released
-            if (lock.released) {
-                return;
-            }
-
-            // Verify if we are within the stale threshold
-            if (lock.lastUpdate <= Date.now() - options.stale &&
-                lock.lastUpdate > Date.now() - options.stale * 2) {
-                return compromisedLock(file, lock, Object.assign(new Error(lock.updateError || 'Unable to update lock within the stale \
-threshold'), { code: 'ECOMPROMISED' }));
-            }
-
-            // If the file is older than (stale * 2), we assume the clock is moved manually,
-            // which we consider a valid case
-
-            // If it failed to update the lockfile, keep trying unless
-            // the lockfile was deleted!
-            if (err) {
-                if (err.code === 'ENOENT') {
-                    return compromisedLock(file, lock, Object.assign(err, { code: 'ECOMPROMISED' }));
-                }
-
-                lock.updateError = err;
-                lock.updateDelay = 1000;
-                return updateLock(file, options);
-            }
-
-            // All ok, keep updating..
-            lock.lastUpdate = Date.now();
-            lock.updateError = null;
-            lock.updateDelay = null;
-            updateLock(file, options);
-        });
-    }, lock.updateDelay);
-
-    // Unref the timer so that the nodejs process can exit freely
-    // This is safe because all acquired locks will be automatically released
-    // on process exit
-
-    // We first check that `lock.updateTimeout.unref` exists because some users
-    // may be using this module outside of NodeJS (e.g., in an electron app), 
-    // and in those cases `setTimeout` return an integer.
-    if (lock.updateTimeout.unref) {
-        lock.updateTimeout.unref();
-    }
-}
-
-function compromisedLock(file, lock, err) {
-    lock.released = true;                                    // Signal the lock has been released
-    /* istanbul ignore next */
-    lock.updateTimeout && clearTimeout(lock.updateTimeout);  // Cancel lock mtime update
-
-    if (locks[file] === lock) {
-        delete locks[file];
-    }
-
-    lock.compromised(err);
-}
-
-// -----------------------------------------
-
-function lock(file, options, compromised, callback) {
-    if (typeof options === 'function') {
-        callback = compromised;
-        compromised = options;
-        options = null;
-    }
-
-    if (!callback) {
-        callback = compromised;
-        compromised = null;
-    }
-
-    options = Object.assign({
-        stale: 10000,
-        update: null,
-        realpath: true,
-        retries: 0,
-        fs,
-    }, options);
-
-    options.retries = options.retries || 0;
-    options.retries = typeof options.retries === 'number' ? { retries: options.retries } : options.retries;
-    options.stale = Math.max(options.stale || 0, 2000);
-    options.update = options.update == null ? options.stale / 2 : options.update || 0;
-    options.update = Math.max(Math.min(options.update, options.stale / 2), 1000);
-    compromised = compromised || function (err) { throw err; };
-
-    // Resolve to a canonical file path
-    canonicalPath(file, options, (err, file) => {
-        if (err) {
-            return callback(err);
-        }
-
-        // Attempt to acquire the lock
-        const operation = retry.operation(options.retries);
-
-        operation.attempt(() => {
-            acquireLock(file, options, (err) => {
-                if (operation.retry(err)) {
-                    return;
-                }
-
-                if (err) {
-                    return callback(operation.mainError());
-                }
-
-                // We now own the lock
-                const lock = locks[file] = {
-                    options,
-                    compromised,
-                    lastUpdate: Date.now(),
-                };
-
-                // We must keep the lock fresh to avoid staleness
-                updateLock(file, options);
-
-                callback(null, (releasedCallback) => {
-                    if (lock.released) {
-                        return releasedCallback &&
-                            releasedCallback(Object.assign(new Error('Lock is already released'), { code: 'ERELEASED' }));
-                    }
-
-                    // Not necessary to use realpath twice when unlocking
-                    unlock(file, Object.assign({}, options, { realpath: false }), releasedCallback);
-                });
-            });
-        });
-    });
-}
-
-function unlock(file, options, callback) {
-    if (typeof options === 'function') {
-        callback = options;
-        options = null;
-    }
-
-    options = Object.assign({
-        fs,
-        realpath: true,
-    }, options);
-
-    callback = callback || function () {};
-
-    // Resolve to a canonical file path
-    canonicalPath(file, options, (err, file) => {
-        if (err) {
-            return callback(err);
-        }
-
-        // Skip if the lock is not acquired
-        const lock = locks[file];
-
-        if (!lock) {
-            return callback(Object.assign(new Error('Lock is not acquired/owned by you'), { code: 'ENOTACQUIRED' }));
-        }
-
-        lock.updateTimeout && clearTimeout(lock.updateTimeout);  // Cancel lock mtime update
-        lock.released = true;                                    // Signal the lock has been released
-        delete locks[file];                                      // Delete from locks
-
-        removeLock(file, options, callback);
-    });
-}
-
-function lockSync(file, options, compromised) {
-    if (typeof options === 'function') {
-        compromised = options;
-        options = null;
-    }
-
-    options = options || {};
-    options.fs = syncFs(options.fs || fs);
-    options.retries = options.retries || 0;
-    options.retries = typeof options.retries === 'number' ? { retries: options.retries } : options.retries;
-
-    // Retries are not allowed because it requires the flow to be sync
-    if (options.retries.retries) {
-        throw Object.assign(new Error('Cannot use retries with the sync api'), { code: 'ESYNC' });
-    }
-
-    let err;
-    let release;
-
-    lock(file, options, compromised, (_err, _release) => {
-        err = _err;
-        release = _release;
-    });
-
-    if (err) {
-        throw err;
-    }
-
-    return release;
-}
-
-function unlockSync(file, options) {
-    options = options || {};
-    options.fs = syncFs(options.fs || fs);
-
-    let err;
-
-    unlock(file, options, (_err) => {
-        err = _err;
-    });
-
-    if (err) {
-        throw err;
-    }
-}
-
-function check(file, options, callback) {
-    if (typeof options === 'function') {
-        callback = options;
-        options = null;
-    }
-
-    options = Object.assign({
-        stale: 10000,
-        realpath: true,
-        fs,
-    }, options);
-
-    options.stale = Math.max(options.stale || 0, 2000);
-
-    // Resolve to a canonical file path
-    canonicalPath(file, options, (err, file) => {
-        if (err) {
-            return callback(err);
-        }
-
-        // Check if lockfile exists
-        options.fs.stat(getLockFile(file), (err, stat) => {
-            if (err) {
-                // if does not exist, file is not locked. Otherwise, callback with error
-                return (err.code === 'ENOENT') ? callback(null, false) : callback(err);
-            }
-
-            if (options.stale <= 0) { return callback(null, true); }
-
-            // Otherwise, check if lock is stale by analyzing the file mtime
-            return callback(null, !isLockStale(stat, options));
-        });
-    });
-}
-
-function checkSync(file, options) {
-    options = options || {};
-    options.fs = syncFs(options.fs || fs);
-
-    let err;
-    let locked;
-
-    check(file, options, (_err, _locked) => {
-        err = _err;
-        locked = _locked;
-    });
-
-    if (err) {
-        throw err;
-    }
-
-    return locked;
-}
-
-
-// Remove acquired locks on exit
-/* istanbul ignore next */
-process.on('exit', () => {
-    Object.keys(locks).forEach((file) => {
-        try { locks[file].options.fs.rmdirSync(getLockFile(file)); } catch (e) { /* empty */ }
-    });
-});
-
-module.exports = lock;
-module.exports.lock = lock;
-module.exports.unlock = unlock;
-module.exports.lockSync = lockSync;
-module.exports.unlockSync = unlockSync;
-module.exports.check = check;
-module.exports.checkSync = checkSync;
-
-
-/***/ }),
-/* 472 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var KEYWORDS = [
-  'multipleOf',
-  'maximum',
-  'exclusiveMaximum',
-  'minimum',
-  'exclusiveMinimum',
-  'maxLength',
-  'minLength',
-  'pattern',
-  'additionalItems',
-  'maxItems',
-  'minItems',
-  'uniqueItems',
-  'maxProperties',
-  'minProperties',
-  'required',
-  'additionalProperties',
-  'enum',
-  'format',
-  'const'
-];
-
-module.exports = function (metaSchema, keywordsJsonPointers) {
-  for (var i=0; i<keywordsJsonPointers.length; i++) {
-    metaSchema = JSON.parse(JSON.stringify(metaSchema));
-    var segments = keywordsJsonPointers[i].split('/');
-    var keywords = metaSchema;
-    var j;
-    for (j=1; j<segments.length; j++)
-      keywords = keywords[segments[j]];
-
-    for (j=0; j<KEYWORDS.length; j++) {
-      var key = KEYWORDS[j];
-      var schema = keywords[key];
-      if (schema) {
-        keywords[key] = {
-          anyOf: [
-            schema,
-            { $ref: 'https://raw.githubusercontent.com/epoberezkin/ajv/master/lib/refs/$data.json#' }
-          ]
-        };
-      }
-    }
-  }
-
-  return metaSchema;
-};
-
-
-/***/ }),
-/* 473 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var compileSchema = __webpack_require__(478)
-  , resolve = __webpack_require__(203)
-  , Cache = __webpack_require__(474)
-  , SchemaObject = __webpack_require__(339)
-  , stableStringify = __webpack_require__(389)
-  , formats = __webpack_require__(477)
-  , rules = __webpack_require__(479)
-  , $dataMetaSchema = __webpack_require__(472)
-  , patternGroups = __webpack_require__(500)
-  , util = __webpack_require__(106)
-  , co = __webpack_require__(383);
-
-module.exports = Ajv;
-
-Ajv.prototype.validate = validate;
-Ajv.prototype.compile = compile;
-Ajv.prototype.addSchema = addSchema;
-Ajv.prototype.addMetaSchema = addMetaSchema;
-Ajv.prototype.validateSchema = validateSchema;
-Ajv.prototype.getSchema = getSchema;
-Ajv.prototype.removeSchema = removeSchema;
-Ajv.prototype.addFormat = addFormat;
-Ajv.prototype.errorsText = errorsText;
-
-Ajv.prototype._addSchema = _addSchema;
-Ajv.prototype._compile = _compile;
-
-Ajv.prototype.compileAsync = __webpack_require__(476);
-var customKeyword = __webpack_require__(499);
-Ajv.prototype.addKeyword = customKeyword.add;
-Ajv.prototype.getKeyword = customKeyword.get;
-Ajv.prototype.removeKeyword = customKeyword.remove;
-
-var errorClasses = __webpack_require__(202);
-Ajv.ValidationError = errorClasses.Validation;
-Ajv.MissingRefError = errorClasses.MissingRef;
-Ajv.$dataMetaSchema = $dataMetaSchema;
-
-var META_SCHEMA_ID = 'http://json-schema.org/draft-06/schema';
-
-var META_IGNORE_OPTIONS = [ 'removeAdditional', 'useDefaults', 'coerceTypes' ];
-var META_SUPPORT_DATA = ['/properties'];
-
-/**
- * Creates validator instance.
- * Usage: `Ajv(opts)`
- * @param {Object} opts optional options
- * @return {Object} ajv instance
- */
-function Ajv(opts) {
-  if (!(this instanceof Ajv)) return new Ajv(opts);
-  opts = this._opts = util.copy(opts) || {};
-  setLogger(this);
-  this._schemas = {};
-  this._refs = {};
-  this._fragments = {};
-  this._formats = formats(opts.format);
-  var schemaUriFormat = this._schemaUriFormat = this._formats['uri-reference'];
-  this._schemaUriFormatFunc = function (str) { return schemaUriFormat.test(str); };
-
-  this._cache = opts.cache || new Cache;
-  this._loadingSchemas = {};
-  this._compilations = [];
-  this.RULES = rules();
-  this._getId = chooseGetId(opts);
-
-  opts.loopRequired = opts.loopRequired || Infinity;
-  if (opts.errorDataPath == 'property') opts._errorDataPathProperty = true;
-  if (opts.serialize === undefined) opts.serialize = stableStringify;
-  this._metaOpts = getMetaSchemaOptions(this);
-
-  if (opts.formats) addInitialFormats(this);
-  addDraft6MetaSchema(this);
-  if (typeof opts.meta == 'object') this.addMetaSchema(opts.meta);
-  addInitialSchemas(this);
-  if (opts.patternGroups) patternGroups(this);
-}
-
-
-
-/**
- * Validate data using schema
- * Schema will be compiled and cached (using serialized JSON as key. [fast-json-stable-stringify](https://github.com/epoberezkin/fast-json-stable-stringify) is used to serialize.
- * @this   Ajv
- * @param  {String|Object} schemaKeyRef key, ref or schema object
- * @param  {Any} data to be validated
- * @return {Boolean} validation result. Errors from the last validation will be available in `ajv.errors` (and also in compiled schema: `schema.errors`).
- */
-function validate(schemaKeyRef, data) {
-  var v;
-  if (typeof schemaKeyRef == 'string') {
-    v = this.getSchema(schemaKeyRef);
-    if (!v) throw new Error('no schema with key or ref "' + schemaKeyRef + '"');
-  } else {
-    var schemaObj = this._addSchema(schemaKeyRef);
-    v = schemaObj.validate || this._compile(schemaObj);
-  }
-
-  var valid = v(data);
-  if (v.$async === true)
-    return this._opts.async == '*' ? co(valid) : valid;
-  this.errors = v.errors;
-  return valid;
-}
-
-
-/**
- * Create validating function for passed schema.
- * @this   Ajv
- * @param  {Object} schema schema object
- * @param  {Boolean} _meta true if schema is a meta-schema. Used internally to compile meta schemas of custom keywords.
- * @return {Function} validating function
- */
-function compile(schema, _meta) {
-  var schemaObj = this._addSchema(schema, undefined, _meta);
-  return schemaObj.validate || this._compile(schemaObj);
-}
-
-
-/**
- * Adds schema to the instance.
- * @this   Ajv
- * @param {Object|Array} schema schema or array of schemas. If array is passed, `key` and other parameters will be ignored.
- * @param {String} key Optional schema key. Can be passed to `validate` method instead of schema object or id/ref. One schema per instance can have empty `id` and `key`.
- * @param {Boolean} _skipValidation true to skip schema validation. Used internally, option validateSchema should be used instead.
- * @param {Boolean} _meta true if schema is a meta-schema. Used internally, addMetaSchema should be used instead.
- * @return {Ajv} this for method chaining
- */
-function addSchema(schema, key, _skipValidation, _meta) {
-  if (Array.isArray(schema)){
-    for (var i=0; i<schema.length; i++) this.addSchema(schema[i], undefined, _skipValidation, _meta);
-    return this;
-  }
-  var id = this._getId(schema);
-  if (id !== undefined && typeof id != 'string')
-    throw new Error('schema id must be string');
-  key = resolve.normalizeId(key || id);
-  checkUnique(this, key);
-  this._schemas[key] = this._addSchema(schema, _skipValidation, _meta, true);
-  return this;
-}
-
-
-/**
- * Add schema that will be used to validate other schemas
- * options in META_IGNORE_OPTIONS are alway set to false
- * @this   Ajv
- * @param {Object} schema schema object
- * @param {String} key optional schema key
- * @param {Boolean} skipValidation true to skip schema validation, can be used to override validateSchema option for meta-schema
- * @return {Ajv} this for method chaining
- */
-function addMetaSchema(schema, key, skipValidation) {
-  this.addSchema(schema, key, skipValidation, true);
-  return this;
-}
-
-
-/**
- * Validate schema
- * @this   Ajv
- * @param {Object} schema schema to validate
- * @param {Boolean} throwOrLogError pass true to throw (or log) an error if invalid
- * @return {Boolean} true if schema is valid
- */
-function validateSchema(schema, throwOrLogError) {
-  var $schema = schema.$schema;
-  if ($schema !== undefined && typeof $schema != 'string')
-    throw new Error('$schema must be a string');
-  $schema = $schema || this._opts.defaultMeta || defaultMeta(this);
-  if (!$schema) {
-    this.logger.warn('meta-schema not available');
-    this.errors = null;
-    return true;
-  }
-  var currentUriFormat = this._formats.uri;
-  this._formats.uri = typeof currentUriFormat == 'function'
-                      ? this._schemaUriFormatFunc
-                      : this._schemaUriFormat;
-  var valid;
-  try { valid = this.validate($schema, schema); }
-  finally { this._formats.uri = currentUriFormat; }
-  if (!valid && throwOrLogError) {
-    var message = 'schema is invalid: ' + this.errorsText();
-    if (this._opts.validateSchema == 'log') this.logger.error(message);
-    else throw new Error(message);
-  }
-  return valid;
-}
-
-
-function defaultMeta(self) {
-  var meta = self._opts.meta;
-  self._opts.defaultMeta = typeof meta == 'object'
-                            ? self._getId(meta) || meta
-                            : self.getSchema(META_SCHEMA_ID)
-                              ? META_SCHEMA_ID
-                              : undefined;
-  return self._opts.defaultMeta;
-}
-
-
-/**
- * Get compiled schema from the instance by `key` or `ref`.
- * @this   Ajv
- * @param  {String} keyRef `key` that was passed to `addSchema` or full schema reference (`schema.id` or resolved id).
- * @return {Function} schema validating function (with property `schema`).
- */
-function getSchema(keyRef) {
-  var schemaObj = _getSchemaObj(this, keyRef);
-  switch (typeof schemaObj) {
-    case 'object': return schemaObj.validate || this._compile(schemaObj);
-    case 'string': return this.getSchema(schemaObj);
-    case 'undefined': return _getSchemaFragment(this, keyRef);
-  }
-}
-
-
-function _getSchemaFragment(self, ref) {
-  var res = resolve.schema.call(self, { schema: {} }, ref);
-  if (res) {
-    var schema = res.schema
-      , root = res.root
-      , baseId = res.baseId;
-    var v = compileSchema.call(self, schema, root, undefined, baseId);
-    self._fragments[ref] = new SchemaObject({
-      ref: ref,
-      fragment: true,
-      schema: schema,
-      root: root,
-      baseId: baseId,
-      validate: v
-    });
-    return v;
-  }
-}
-
-
-function _getSchemaObj(self, keyRef) {
-  keyRef = resolve.normalizeId(keyRef);
-  return self._schemas[keyRef] || self._refs[keyRef] || self._fragments[keyRef];
-}
-
-
-/**
- * Remove cached schema(s).
- * If no parameter is passed all schemas but meta-schemas are removed.
- * If RegExp is passed all schemas with key/id matching pattern but meta-schemas are removed.
- * Even if schema is referenced by other schemas it still can be removed as other schemas have local references.
- * @this   Ajv
- * @param  {String|Object|RegExp} schemaKeyRef key, ref, pattern to match key/ref or schema object
- * @return {Ajv} this for method chaining
- */
-function removeSchema(schemaKeyRef) {
-  if (schemaKeyRef instanceof RegExp) {
-    _removeAllSchemas(this, this._schemas, schemaKeyRef);
-    _removeAllSchemas(this, this._refs, schemaKeyRef);
-    return this;
-  }
-  switch (typeof schemaKeyRef) {
-    case 'undefined':
-      _removeAllSchemas(this, this._schemas);
-      _removeAllSchemas(this, this._refs);
-      this._cache.clear();
-      return this;
-    case 'string':
-      var schemaObj = _getSchemaObj(this, schemaKeyRef);
-      if (schemaObj) this._cache.del(schemaObj.cacheKey);
-      delete this._schemas[schemaKeyRef];
-      delete this._refs[schemaKeyRef];
-      return this;
-    case 'object':
-      var serialize = this._opts.serialize;
-      var cacheKey = serialize ? serialize(schemaKeyRef) : schemaKeyRef;
-      this._cache.del(cacheKey);
-      var id = this._getId(schemaKeyRef);
-      if (id) {
-        id = resolve.normalizeId(id);
-        delete this._schemas[id];
-        delete this._refs[id];
-      }
-  }
-  return this;
-}
-
-
-function _removeAllSchemas(self, schemas, regex) {
-  for (var keyRef in schemas) {
-    var schemaObj = schemas[keyRef];
-    if (!schemaObj.meta && (!regex || regex.test(keyRef))) {
-      self._cache.del(schemaObj.cacheKey);
-      delete schemas[keyRef];
-    }
-  }
-}
-
-
-/* @this   Ajv */
-function _addSchema(schema, skipValidation, meta, shouldAddSchema) {
-  if (typeof schema != 'object' && typeof schema != 'boolean')
-    throw new Error('schema should be object or boolean');
-  var serialize = this._opts.serialize;
-  var cacheKey = serialize ? serialize(schema) : schema;
-  var cached = this._cache.get(cacheKey);
-  if (cached) return cached;
-
-  shouldAddSchema = shouldAddSchema || this._opts.addUsedSchema !== false;
-
-  var id = resolve.normalizeId(this._getId(schema));
-  if (id && shouldAddSchema) checkUnique(this, id);
-
-  var willValidate = this._opts.validateSchema !== false && !skipValidation;
-  var recursiveMeta;
-  if (willValidate && !(recursiveMeta = id && id == resolve.normalizeId(schema.$schema)))
-    this.validateSchema(schema, true);
-
-  var localRefs = resolve.ids.call(this, schema);
-
-  var schemaObj = new SchemaObject({
-    id: id,
-    schema: schema,
-    localRefs: localRefs,
-    cacheKey: cacheKey,
-    meta: meta
-  });
-
-  if (id[0] != '#' && shouldAddSchema) this._refs[id] = schemaObj;
-  this._cache.put(cacheKey, schemaObj);
-
-  if (willValidate && recursiveMeta) this.validateSchema(schema, true);
-
-  return schemaObj;
-}
-
-
-/* @this   Ajv */
-function _compile(schemaObj, root) {
-  if (schemaObj.compiling) {
-    schemaObj.validate = callValidate;
-    callValidate.schema = schemaObj.schema;
-    callValidate.errors = null;
-    callValidate.root = root ? root : callValidate;
-    if (schemaObj.schema.$async === true)
-      callValidate.$async = true;
-    return callValidate;
-  }
-  schemaObj.compiling = true;
-
-  var currentOpts;
-  if (schemaObj.meta) {
-    currentOpts = this._opts;
-    this._opts = this._metaOpts;
-  }
-
-  var v;
-  try { v = compileSchema.call(this, schemaObj.schema, root, schemaObj.localRefs); }
-  finally {
-    schemaObj.compiling = false;
-    if (schemaObj.meta) this._opts = currentOpts;
-  }
-
-  schemaObj.validate = v;
-  schemaObj.refs = v.refs;
-  schemaObj.refVal = v.refVal;
-  schemaObj.root = v.root;
-  return v;
-
-
-  function callValidate() {
-    var _validate = schemaObj.validate;
-    var result = _validate.apply(null, arguments);
-    callValidate.errors = _validate.errors;
-    return result;
-  }
-}
-
-
-function chooseGetId(opts) {
-  switch (opts.schemaId) {
-    case '$id': return _get$Id;
-    case 'id': return _getId;
-    default: return _get$IdOrId;
-  }
-}
-
-/* @this   Ajv */
-function _getId(schema) {
-  if (schema.$id) this.logger.warn('schema $id ignored', schema.$id);
-  return schema.id;
-}
-
-/* @this   Ajv */
-function _get$Id(schema) {
-  if (schema.id) this.logger.warn('schema id ignored', schema.id);
-  return schema.$id;
-}
-
-
-function _get$IdOrId(schema) {
-  if (schema.$id && schema.id && schema.$id != schema.id)
-    throw new Error('schema $id is different from id');
-  return schema.$id || schema.id;
-}
-
-
-/**
- * Convert array of error message objects to string
- * @this   Ajv
- * @param  {Array<Object>} errors optional array of validation errors, if not passed errors from the instance are used.
- * @param  {Object} options optional options with properties `separator` and `dataVar`.
- * @return {String} human readable string with all errors descriptions
- */
-function errorsText(errors, options) {
-  errors = errors || this.errors;
-  if (!errors) return 'No errors';
-  options = options || {};
-  var separator = options.separator === undefined ? ', ' : options.separator;
-  var dataVar = options.dataVar === undefined ? 'data' : options.dataVar;
-
-  var text = '';
-  for (var i=0; i<errors.length; i++) {
-    var e = errors[i];
-    if (e) text += dataVar + e.dataPath + ' ' + e.message + separator;
-  }
-  return text.slice(0, -separator.length);
-}
-
-
-/**
- * Add custom format
- * @this   Ajv
- * @param {String} name format name
- * @param {String|RegExp|Function} format string is converted to RegExp; function should return boolean (true when valid)
- * @return {Ajv} this for method chaining
- */
-function addFormat(name, format) {
-  if (typeof format == 'string') format = new RegExp(format);
-  this._formats[name] = format;
-  return this;
-}
-
-
-function addDraft6MetaSchema(self) {
-  var $dataSchema;
-  if (self._opts.$data) {
-    $dataSchema = __webpack_require__(501);
-    self.addMetaSchema($dataSchema, $dataSchema.$id, true);
-  }
-  if (self._opts.meta === false) return;
-  var metaSchema = __webpack_require__(502);
-  if (self._opts.$data) metaSchema = $dataMetaSchema(metaSchema, META_SUPPORT_DATA);
-  self.addMetaSchema(metaSchema, META_SCHEMA_ID, true);
-  self._refs['http://json-schema.org/schema'] = META_SCHEMA_ID;
-}
-
-
-function addInitialSchemas(self) {
-  var optsSchemas = self._opts.schemas;
-  if (!optsSchemas) return;
-  if (Array.isArray(optsSchemas)) self.addSchema(optsSchemas);
-  else for (var key in optsSchemas) self.addSchema(optsSchemas[key], key);
-}
-
-
-function addInitialFormats(self) {
-  for (var name in self._opts.formats) {
-    var format = self._opts.formats[name];
-    self.addFormat(name, format);
-  }
-}
-
-
-function checkUnique(self, id) {
-  if (self._schemas[id] || self._refs[id])
-    throw new Error('schema with key or id "' + id + '" already exists');
-}
-
-
-function getMetaSchemaOptions(self) {
-  var metaOpts = util.copy(self._opts);
-  for (var i=0; i<META_IGNORE_OPTIONS.length; i++)
-    delete metaOpts[META_IGNORE_OPTIONS[i]];
-  return metaOpts;
-}
-
-
-function setLogger(self) {
-  var logger = self._opts.logger;
-  if (logger === false) {
-    self.logger = {log: noop, warn: noop, error: noop};
-  } else {
-    if (logger === undefined) logger = console;
-    if (!(typeof logger == 'object' && logger.log && logger.warn && logger.error))
-      throw new Error('logger must implement log, warn and error methods');
-    self.logger = logger;
-  }
-}
-
-
-function noop() {}
-
-
-/***/ }),
-/* 474 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-
-var Cache = module.exports = function Cache() {
-  this._cache = {};
-};
-
-
-Cache.prototype.put = function Cache_put(key, value) {
-  this._cache[key] = value;
-};
-
-
-Cache.prototype.get = function Cache_get(key) {
-  return this._cache[key];
-};
-
-
-Cache.prototype.del = function Cache_del(key) {
-  delete this._cache[key];
-};
-
-
-Cache.prototype.clear = function Cache_clear() {
-  this._cache = {};
-};
-
-
-/***/ }),
-/* 475 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-//all requires must be explicit because browserify won't work with dynamic requires
-module.exports = {
-  '$ref': __webpack_require__(496),
-  allOf: __webpack_require__(481),
-  anyOf: __webpack_require__(482),
-  const: __webpack_require__(483),
-  contains: __webpack_require__(484),
-  dependencies: __webpack_require__(486),
-  'enum': __webpack_require__(487),
-  format: __webpack_require__(488),
-  items: __webpack_require__(489),
-  maximum: __webpack_require__(340),
-  minimum: __webpack_require__(340),
-  maxItems: __webpack_require__(341),
-  minItems: __webpack_require__(341),
-  maxLength: __webpack_require__(342),
-  minLength: __webpack_require__(342),
-  maxProperties: __webpack_require__(343),
-  minProperties: __webpack_require__(343),
-  multipleOf: __webpack_require__(490),
-  not: __webpack_require__(491),
-  oneOf: __webpack_require__(492),
-  pattern: __webpack_require__(493),
-  properties: __webpack_require__(494),
-  propertyNames: __webpack_require__(495),
-  required: __webpack_require__(497),
-  uniqueItems: __webpack_require__(498),
-  validate: __webpack_require__(344)
-};
-
-
-/***/ }),
-/* 476 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var MissingRefError = __webpack_require__(202).MissingRef;
-
-module.exports = compileAsync;
-
-
-/**
- * Creates validating function for passed schema with asynchronous loading of missing schemas.
- * `loadSchema` option should be a function that accepts schema uri and returns promise that resolves with the schema.
- * @this  Ajv
- * @param {Object}   schema schema object
- * @param {Boolean}  meta optional true to compile meta-schema; this parameter can be skipped
- * @param {Function} callback an optional node-style callback, it is called with 2 parameters: error (or null) and validating function.
- * @return {Promise} promise that resolves with a validating function.
- */
-function compileAsync(schema, meta, callback) {
-  /* eslint no-shadow: 0 */
-  /* global Promise */
-  /* jshint validthis: true */
-  var self = this;
-  if (typeof this._opts.loadSchema != 'function')
-    throw new Error('options.loadSchema should be a function');
-
-  if (typeof meta == 'function') {
-    callback = meta;
-    meta = undefined;
-  }
-
-  var p = loadMetaSchemaOf(schema).then(function () {
-    var schemaObj = self._addSchema(schema, undefined, meta);
-    return schemaObj.validate || _compileAsync(schemaObj);
-  });
-
-  if (callback) {
-    p.then(
-      function(v) { callback(null, v); },
-      callback
-    );
-  }
-
-  return p;
-
-
-  function loadMetaSchemaOf(sch) {
-    var $schema = sch.$schema;
-    return $schema && !self.getSchema($schema)
-            ? compileAsync.call(self, { $ref: $schema }, true)
-            : Promise.resolve();
-  }
-
-
-  function _compileAsync(schemaObj) {
-    try { return self._compile(schemaObj); }
-    catch(e) {
-      if (e instanceof MissingRefError) return loadMissingSchema(e);
-      throw e;
-    }
-
-
-    function loadMissingSchema(e) {
-      var ref = e.missingSchema;
-      if (added(ref)) throw new Error('Schema ' + ref + ' is loaded but ' + e.missingRef + ' cannot be resolved');
-
-      var schemaPromise = self._loadingSchemas[ref];
-      if (!schemaPromise) {
-        schemaPromise = self._loadingSchemas[ref] = self._opts.loadSchema(ref);
-        schemaPromise.then(removePromise, removePromise);
-      }
-
-      return schemaPromise.then(function (sch) {
-        if (!added(ref)) {
-          return loadMetaSchemaOf(sch).then(function () {
-            if (!added(ref)) self.addSchema(sch, ref, undefined, meta);
-          });
-        }
-      }).then(function() {
-        return _compileAsync(schemaObj);
-      });
-
-      function removePromise() {
-        delete self._loadingSchemas[ref];
-      }
-
-      function added(ref) {
-        return self._refs[ref] || self._schemas[ref];
-      }
-    }
-  }
-}
-
-
-/***/ }),
-/* 477 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var util = __webpack_require__(106);
-
-var DATE = /^\d\d\d\d-(\d\d)-(\d\d)$/;
-var DAYS = [0,31,29,31,30,31,30,31,31,30,31,30,31];
-var TIME = /^(\d\d):(\d\d):(\d\d)(\.\d+)?(z|[+-]\d\d:\d\d)?$/i;
-var HOSTNAME = /^[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[-0-9a-z]{0,61}[0-9a-z])?)*$/i;
-var URI = /^(?:[a-z][a-z0-9+\-.]*:)(?:\/?\/(?:(?:[a-z0-9\-._~!$&'()*+,;=:]|%[0-9a-f]{2})*@)?(?:\[(?:(?:(?:(?:[0-9a-f]{1,4}:){6}|::(?:[0-9a-f]{1,4}:){5}|(?:[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){4}|(?:(?:[0-9a-f]{1,4}:){0,1}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){3}|(?:(?:[0-9a-f]{1,4}:){0,2}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){2}|(?:(?:[0-9a-f]{1,4}:){0,3}[0-9a-f]{1,4})?::[0-9a-f]{1,4}:|(?:(?:[0-9a-f]{1,4}:){0,4}[0-9a-f]{1,4})?::)(?:[0-9a-f]{1,4}:[0-9a-f]{1,4}|(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?))|(?:(?:[0-9a-f]{1,4}:){0,5}[0-9a-f]{1,4})?::[0-9a-f]{1,4}|(?:(?:[0-9a-f]{1,4}:){0,6}[0-9a-f]{1,4})?::)|[Vv][0-9a-f]+\.[a-z0-9\-._~!$&'()*+,;=:]+)\]|(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)|(?:[a-z0-9\-._~!$&'()*+,;=]|%[0-9a-f]{2})*)(?::\d*)?(?:\/(?:[a-z0-9\-._~!$&'()*+,;=:@]|%[0-9a-f]{2})*)*|\/(?:(?:[a-z0-9\-._~!$&'()*+,;=:@]|%[0-9a-f]{2})+(?:\/(?:[a-z0-9\-._~!$&'()*+,;=:@]|%[0-9a-f]{2})*)*)?|(?:[a-z0-9\-._~!$&'()*+,;=:@]|%[0-9a-f]{2})+(?:\/(?:[a-z0-9\-._~!$&'()*+,;=:@]|%[0-9a-f]{2})*)*)(?:\?(?:[a-z0-9\-._~!$&'()*+,;=:@/?]|%[0-9a-f]{2})*)?(?:#(?:[a-z0-9\-._~!$&'()*+,;=:@/?]|%[0-9a-f]{2})*)?$/i;
-var URIREF = /^(?:[a-z][a-z0-9+\-.]*:)?(?:\/?\/(?:(?:[a-z0-9\-._~!$&'()*+,;=:]|%[0-9a-f]{2})*@)?(?:\[(?:(?:(?:(?:[0-9a-f]{1,4}:){6}|::(?:[0-9a-f]{1,4}:){5}|(?:[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){4}|(?:(?:[0-9a-f]{1,4}:){0,1}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){3}|(?:(?:[0-9a-f]{1,4}:){0,2}[0-9a-f]{1,4})?::(?:[0-9a-f]{1,4}:){2}|(?:(?:[0-9a-f]{1,4}:){0,3}[0-9a-f]{1,4})?::[0-9a-f]{1,4}:|(?:(?:[0-9a-f]{1,4}:){0,4}[0-9a-f]{1,4})?::)(?:[0-9a-f]{1,4}:[0-9a-f]{1,4}|(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?))|(?:(?:[0-9a-f]{1,4}:){0,5}[0-9a-f]{1,4})?::[0-9a-f]{1,4}|(?:(?:[0-9a-f]{1,4}:){0,6}[0-9a-f]{1,4})?::)|[Vv][0-9a-f]+\.[a-z0-9\-._~!$&'()*+,;=:]+)\]|(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)|(?:[a-z0-9\-._~!$&'"()*+,;=]|%[0-9a-f]{2})*)(?::\d*)?(?:\/(?:[a-z0-9\-._~!$&'"()*+,;=:@]|%[0-9a-f]{2})*)*|\/(?:(?:[a-z0-9\-._~!$&'"()*+,;=:@]|%[0-9a-f]{2})+(?:\/(?:[a-z0-9\-._~!$&'"()*+,;=:@]|%[0-9a-f]{2})*)*)?|(?:[a-z0-9\-._~!$&'"()*+,;=:@]|%[0-9a-f]{2})+(?:\/(?:[a-z0-9\-._~!$&'"()*+,;=:@]|%[0-9a-f]{2})*)*)?(?:\?(?:[a-z0-9\-._~!$&'"()*+,;=:@/?]|%[0-9a-f]{2})*)?(?:#(?:[a-z0-9\-._~!$&'"()*+,;=:@/?]|%[0-9a-f]{2})*)?$/i;
-// uri-template: https://tools.ietf.org/html/rfc6570
-var URITEMPLATE = /^(?:(?:[^\x00-\x20"'<>%\\^`{|}]|%[0-9a-f]{2})|\{[+#./;?&=,!@|]?(?:[a-z0-9_]|%[0-9a-f]{2})+(?::[1-9][0-9]{0,3}|\*)?(?:,(?:[a-z0-9_]|%[0-9a-f]{2})+(?::[1-9][0-9]{0,3}|\*)?)*\})*$/i;
-// For the source: https://gist.github.com/dperini/729294
-// For test cases: https://mathiasbynens.be/demo/url-regex
-// @todo Delete current URL in favour of the commented out URL rule when this issue is fixed https://github.com/eslint/eslint/issues/7983.
-// var URL = /^(?:(?:https?|ftp):\/\/)(?:\S+(?::\S*)?@)?(?:(?!10(?:\.\d{1,3}){3})(?!127(?:\.\d{1,3}){3})(?!169\.254(?:\.\d{1,3}){2})(?!192\.168(?:\.\d{1,3}){2})(?!172\.(?:1[6-9]|2\d|3[0-1])(?:\.\d{1,3}){2})(?:[1-9]\d?|1\d\d|2[01]\d|22[0-3])(?:\.(?:1?\d{1,2}|2[0-4]\d|25[0-5])){2}(?:\.(?:[1-9]\d?|1\d\d|2[0-4]\d|25[0-4]))|(?:(?:[a-z\u{00a1}-\u{ffff}0-9]+-?)*[a-z\u{00a1}-\u{ffff}0-9]+)(?:\.(?:[a-z\u{00a1}-\u{ffff}0-9]+-?)*[a-z\u{00a1}-\u{ffff}0-9]+)*(?:\.(?:[a-z\u{00a1}-\u{ffff}]{2,})))(?::\d{2,5})?(?:\/[^\s]*)?$/iu;
-var URL = /^(?:(?:http[s\u017F]?|ftp):\/\/)(?:(?:[\0-\x08\x0E-\x1F!-\x9F\xA1-\u167F\u1681-\u1FFF\u200B-\u2027\u202A-\u202E\u2030-\u205E\u2060-\u2FFF\u3001-\uD7FF\uE000-\uFEFE\uFF00-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+(?::(?:[\0-\x08\x0E-\x1F!-\x9F\xA1-\u167F\u1681-\u1FFF\u200B-\u2027\u202A-\u202E\u2030-\u205E\u2060-\u2FFF\u3001-\uD7FF\uE000-\uFEFE\uFF00-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*)?@)?(?:(?!10(?:\.[0-9]{1,3}){3})(?!127(?:\.[0-9]{1,3}){3})(?!169\.254(?:\.[0-9]{1,3}){2})(?!192\.168(?:\.[0-9]{1,3}){2})(?!172\.(?:1[6-9]|2[0-9]|3[01])(?:\.[0-9]{1,3}){2})(?:[1-9][0-9]?|1[0-9][0-9]|2[01][0-9]|22[0-3])(?:\.(?:1?[0-9]{1,2}|2[0-4][0-9]|25[0-5])){2}(?:\.(?:[1-9][0-9]?|1[0-9][0-9]|2[0-4][0-9]|25[0-4]))|(?:(?:(?:[0-9KSa-z\xA1-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+-?)*(?:[0-9KSa-z\xA1-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+)(?:\.(?:(?:[0-9KSa-z\xA1-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+-?)*(?:[0-9KSa-z\xA1-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])+)*(?:\.(?:(?:[KSa-z\xA1-\uD7FF\uE000-\uFFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF]){2,})))(?::[0-9]{2,5})?(?:\/(?:[\0-\x08\x0E-\x1F!-\x9F\xA1-\u167F\u1681-\u1FFF\u200B-\u2027\u202A-\u202E\u2030-\u205E\u2060-\u2FFF\u3001-\uD7FF\uE000-\uFEFE\uFF00-\uFFFF]|[\uD800-\uDBFF][\uDC00-\uDFFF]|[\uD800-\uDBFF](?![\uDC00-\uDFFF])|(?:[^\uD800-\uDBFF]|^)[\uDC00-\uDFFF])*)?$/i;
-var UUID = /^(?:urn:uuid:)?[0-9a-f]{8}-(?:[0-9a-f]{4}-){3}[0-9a-f]{12}$/i;
-var JSON_POINTER = /^(?:\/(?:[^~/]|~0|~1)*)*$|^#(?:\/(?:[a-z0-9_\-.!$&'()*+,;:=@]|%[0-9a-f]{2}|~0|~1)*)*$/i;
-var RELATIVE_JSON_POINTER = /^(?:0|[1-9][0-9]*)(?:#|(?:\/(?:[^~/]|~0|~1)*)*)$/;
-
-
-module.exports = formats;
-
-function formats(mode) {
-  mode = mode == 'full' ? 'full' : 'fast';
-  return util.copy(formats[mode]);
-}
-
-
-formats.fast = {
-  // date: http://tools.ietf.org/html/rfc3339#section-5.6
-  date: /^\d\d\d\d-[0-1]\d-[0-3]\d$/,
-  // date-time: http://tools.ietf.org/html/rfc3339#section-5.6
-  time: /^[0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?(?:z|[+-]\d\d:\d\d)?$/i,
-  'date-time': /^\d\d\d\d-[0-1]\d-[0-3]\d[t\s][0-2]\d:[0-5]\d:[0-5]\d(?:\.\d+)?(?:z|[+-]\d\d:\d\d)$/i,
-  // uri: https://github.com/mafintosh/is-my-json-valid/blob/master/formats.js
-  uri: /^(?:[a-z][a-z0-9+-.]*)(?::|\/)\/?[^\s]*$/i,
-  'uri-reference': /^(?:(?:[a-z][a-z0-9+-.]*:)?\/\/)?[^\s]*$/i,
-  'uri-template': URITEMPLATE,
-  url: URL,
-  // email (sources from jsen validator):
-  // http://stackoverflow.com/questions/201323/using-a-regular-expression-to-validate-an-email-address#answer-8829363
-  // http://www.w3.org/TR/html5/forms.html#valid-e-mail-address (search for 'willful violation')
-  email: /^[a-z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?(?:\.[a-z0-9](?:[a-z0-9-]{0,61}[a-z0-9])?)*$/i,
-  hostname: HOSTNAME,
-  // optimized https://www.safaribooksonline.com/library/view/regular-expressions-cookbook/9780596802837/ch07s16.html
-  ipv4: /^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/,
-  // optimized http://stackoverflow.com/questions/53497/regular-expression-that-matches-valid-ipv6-addresses
-  ipv6: /^\s*(?:(?:(?:[0-9a-f]{1,4}:){7}(?:[0-9a-f]{1,4}|:))|(?:(?:[0-9a-f]{1,4}:){6}(?::[0-9a-f]{1,4}|(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(?:(?:[0-9a-f]{1,4}:){5}(?:(?:(?::[0-9a-f]{1,4}){1,2})|:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(?:(?:[0-9a-f]{1,4}:){4}(?:(?:(?::[0-9a-f]{1,4}){1,3})|(?:(?::[0-9a-f]{1,4})?:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?:(?:[0-9a-f]{1,4}:){3}(?:(?:(?::[0-9a-f]{1,4}){1,4})|(?:(?::[0-9a-f]{1,4}){0,2}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?:(?:[0-9a-f]{1,4}:){2}(?:(?:(?::[0-9a-f]{1,4}){1,5})|(?:(?::[0-9a-f]{1,4}){0,3}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?:(?:[0-9a-f]{1,4}:){1}(?:(?:(?::[0-9a-f]{1,4}){1,6})|(?:(?::[0-9a-f]{1,4}){0,4}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?::(?:(?:(?::[0-9a-f]{1,4}){1,7})|(?:(?::[0-9a-f]{1,4}){0,5}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(?:%.+)?\s*$/i,
-  regex: regex,
-  // uuid: http://tools.ietf.org/html/rfc4122
-  uuid: UUID,
-  // JSON-pointer: https://tools.ietf.org/html/rfc6901
-  // uri fragment: https://tools.ietf.org/html/rfc3986#appendix-A
-  'json-pointer': JSON_POINTER,
-  // relative JSON-pointer: http://tools.ietf.org/html/draft-luff-relative-json-pointer-00
-  'relative-json-pointer': RELATIVE_JSON_POINTER
-};
-
-
-formats.full = {
-  date: date,
-  time: time,
-  'date-time': date_time,
-  uri: uri,
-  'uri-reference': URIREF,
-  'uri-template': URITEMPLATE,
-  url: URL,
-  email: /^[a-z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-z0-9!#$%&''*+/=?^_`{|}~-]+)*@(?:[a-z0-9](?:[a-z0-9-]*[a-z0-9])?\.)+[a-z0-9](?:[a-z0-9-]*[a-z0-9])?$/i,
-  hostname: hostname,
-  ipv4: /^(?:(?:25[0-5]|2[0-4]\d|[01]?\d\d?)\.){3}(?:25[0-5]|2[0-4]\d|[01]?\d\d?)$/,
-  ipv6: /^\s*(?:(?:(?:[0-9a-f]{1,4}:){7}(?:[0-9a-f]{1,4}|:))|(?:(?:[0-9a-f]{1,4}:){6}(?::[0-9a-f]{1,4}|(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(?:(?:[0-9a-f]{1,4}:){5}(?:(?:(?::[0-9a-f]{1,4}){1,2})|:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(?:(?:[0-9a-f]{1,4}:){4}(?:(?:(?::[0-9a-f]{1,4}){1,3})|(?:(?::[0-9a-f]{1,4})?:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?:(?:[0-9a-f]{1,4}:){3}(?:(?:(?::[0-9a-f]{1,4}){1,4})|(?:(?::[0-9a-f]{1,4}){0,2}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?:(?:[0-9a-f]{1,4}:){2}(?:(?:(?::[0-9a-f]{1,4}){1,5})|(?:(?::[0-9a-f]{1,4}){0,3}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?:(?:[0-9a-f]{1,4}:){1}(?:(?:(?::[0-9a-f]{1,4}){1,6})|(?:(?::[0-9a-f]{1,4}){0,4}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(?::(?:(?:(?::[0-9a-f]{1,4}){1,7})|(?:(?::[0-9a-f]{1,4}){0,5}:(?:(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(?:\.(?:25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(?:%.+)?\s*$/i,
-  regex: regex,
-  uuid: UUID,
-  'json-pointer': JSON_POINTER,
-  'relative-json-pointer': RELATIVE_JSON_POINTER
-};
-
-
-function date(str) {
-  // full-date from http://tools.ietf.org/html/rfc3339#section-5.6
-  var matches = str.match(DATE);
-  if (!matches) return false;
-
-  var month = +matches[1];
-  var day = +matches[2];
-  return month >= 1 && month <= 12 && day >= 1 && day <= DAYS[month];
-}
-
-
-function time(str, full) {
-  var matches = str.match(TIME);
-  if (!matches) return false;
-
-  var hour = matches[1];
-  var minute = matches[2];
-  var second = matches[3];
-  var timeZone = matches[5];
-  return hour <= 23 && minute <= 59 && second <= 59 && (!full || timeZone);
-}
-
-
-var DATE_TIME_SEPARATOR = /t|\s/i;
-function date_time(str) {
-  // http://tools.ietf.org/html/rfc3339#section-5.6
-  var dateTime = str.split(DATE_TIME_SEPARATOR);
-  return dateTime.length == 2 && date(dateTime[0]) && time(dateTime[1], true);
-}
-
-
-function hostname(str) {
-  // https://tools.ietf.org/html/rfc1034#section-3.5
-  // https://tools.ietf.org/html/rfc1123#section-2
-  return str.length <= 255 && HOSTNAME.test(str);
-}
-
-
-var NOT_URI_FRAGMENT = /\/|:/;
-function uri(str) {
-  // http://jmrware.com/articles/2009/uri_regexp/URI_regex.html + optional protocol + required "."
-  return NOT_URI_FRAGMENT.test(str) && URI.test(str);
-}
-
-
-var Z_ANCHOR = /[^\\]\\Z/;
-function regex(str) {
-  if (Z_ANCHOR.test(str)) return false;
-  try {
-    new RegExp(str);
-    return true;
-  } catch(e) {
-    return false;
-  }
-}
-
-
-/***/ }),
-/* 478 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var resolve = __webpack_require__(203)
-  , util = __webpack_require__(106)
-  , errorClasses = __webpack_require__(202)
-  , stableStringify = __webpack_require__(389);
-
-var validateGenerator = __webpack_require__(344);
-
-/**
- * Functions below are used inside compiled validations function
- */
-
-var co = __webpack_require__(383);
-var ucs2length = util.ucs2length;
-var equal = __webpack_require__(204);
-
-// this error is thrown by async schemas to return validation errors via exception
-var ValidationError = errorClasses.Validation;
-
-module.exports = compile;
-
-
-/**
- * Compiles schema to validation function
- * @this   Ajv
- * @param  {Object} schema schema object
- * @param  {Object} root object with information about the root schema for this schema
- * @param  {Object} localRefs the hash of local references inside the schema (created by resolve.id), used for inline resolution
- * @param  {String} baseId base ID for IDs in the schema
- * @return {Function} validation function
- */
-function compile(schema, root, localRefs, baseId) {
-  /* jshint validthis: true, evil: true */
-  /* eslint no-shadow: 0 */
-  var self = this
-    , opts = this._opts
-    , refVal = [ undefined ]
-    , refs = {}
-    , patterns = []
-    , patternsHash = {}
-    , defaults = []
-    , defaultsHash = {}
-    , customRules = [];
-
-  root = root || { schema: schema, refVal: refVal, refs: refs };
-
-  var c = checkCompiling.call(this, schema, root, baseId);
-  var compilation = this._compilations[c.index];
-  if (c.compiling) return (compilation.callValidate = callValidate);
-
-  var formats = this._formats;
-  var RULES = this.RULES;
-
-  try {
-    var v = localCompile(schema, root, localRefs, baseId);
-    compilation.validate = v;
-    var cv = compilation.callValidate;
-    if (cv) {
-      cv.schema = v.schema;
-      cv.errors = null;
-      cv.refs = v.refs;
-      cv.refVal = v.refVal;
-      cv.root = v.root;
-      cv.$async = v.$async;
-      if (opts.sourceCode) cv.source = v.source;
-    }
-    return v;
-  } finally {
-    endCompiling.call(this, schema, root, baseId);
-  }
-
-  function callValidate() {
-    var validate = compilation.validate;
-    var result = validate.apply(null, arguments);
-    callValidate.errors = validate.errors;
-    return result;
-  }
-
-  function localCompile(_schema, _root, localRefs, baseId) {
-    var isRoot = !_root || (_root && _root.schema == _schema);
-    if (_root.schema != root.schema)
-      return compile.call(self, _schema, _root, localRefs, baseId);
-
-    var $async = _schema.$async === true;
-
-    var sourceCode = validateGenerator({
-      isTop: true,
-      schema: _schema,
-      isRoot: isRoot,
-      baseId: baseId,
-      root: _root,
-      schemaPath: '',
-      errSchemaPath: '#',
-      errorPath: '""',
-      MissingRefError: errorClasses.MissingRef,
-      RULES: RULES,
-      validate: validateGenerator,
-      util: util,
-      resolve: resolve,
-      resolveRef: resolveRef,
-      usePattern: usePattern,
-      useDefault: useDefault,
-      useCustomRule: useCustomRule,
-      opts: opts,
-      formats: formats,
-      logger: self.logger,
-      self: self
-    });
-
-    sourceCode = vars(refVal, refValCode) + vars(patterns, patternCode)
-                   + vars(defaults, defaultCode) + vars(customRules, customRuleCode)
-                   + sourceCode;
-
-    if (opts.processCode) sourceCode = opts.processCode(sourceCode);
-    // console.log('\n\n\n *** \n', JSON.stringify(sourceCode));
-    var validate;
-    try {
-      var makeValidate = new Function(
-        'self',
-        'RULES',
-        'formats',
-        'root',
-        'refVal',
-        'defaults',
-        'customRules',
-        'co',
-        'equal',
-        'ucs2length',
-        'ValidationError',
-        sourceCode
-      );
-
-      validate = makeValidate(
-        self,
-        RULES,
-        formats,
-        root,
-        refVal,
-        defaults,
-        customRules,
-        co,
-        equal,
-        ucs2length,
-        ValidationError
-      );
-
-      refVal[0] = validate;
-    } catch(e) {
-      self.logger.error('Error compiling schema, function code:', sourceCode);
-      throw e;
-    }
-
-    validate.schema = _schema;
-    validate.errors = null;
-    validate.refs = refs;
-    validate.refVal = refVal;
-    validate.root = isRoot ? validate : _root;
-    if ($async) validate.$async = true;
-    if (opts.sourceCode === true) {
-      validate.source = {
-        code: sourceCode,
-        patterns: patterns,
-        defaults: defaults
-      };
-    }
-
-    return validate;
-  }
-
-  function resolveRef(baseId, ref, isRoot) {
-    ref = resolve.url(baseId, ref);
-    var refIndex = refs[ref];
-    var _refVal, refCode;
-    if (refIndex !== undefined) {
-      _refVal = refVal[refIndex];
-      refCode = 'refVal[' + refIndex + ']';
-      return resolvedRef(_refVal, refCode);
-    }
-    if (!isRoot && root.refs) {
-      var rootRefId = root.refs[ref];
-      if (rootRefId !== undefined) {
-        _refVal = root.refVal[rootRefId];
-        refCode = addLocalRef(ref, _refVal);
-        return resolvedRef(_refVal, refCode);
-      }
-    }
-
-    refCode = addLocalRef(ref);
-    var v = resolve.call(self, localCompile, root, ref);
-    if (v === undefined) {
-      var localSchema = localRefs && localRefs[ref];
-      if (localSchema) {
-        v = resolve.inlineRef(localSchema, opts.inlineRefs)
-            ? localSchema
-            : compile.call(self, localSchema, root, localRefs, baseId);
-      }
-    }
-
-    if (v === undefined) {
-      removeLocalRef(ref);
-    } else {
-      replaceLocalRef(ref, v);
-      return resolvedRef(v, refCode);
-    }
-  }
-
-  function addLocalRef(ref, v) {
-    var refId = refVal.length;
-    refVal[refId] = v;
-    refs[ref] = refId;
-    return 'refVal' + refId;
-  }
-
-  function removeLocalRef(ref) {
-    delete refs[ref];
-  }
-
-  function replaceLocalRef(ref, v) {
-    var refId = refs[ref];
-    refVal[refId] = v;
-  }
-
-  function resolvedRef(refVal, code) {
-    return typeof refVal == 'object' || typeof refVal == 'boolean'
-            ? { code: code, schema: refVal, inline: true }
-            : { code: code, $async: refVal && refVal.$async };
-  }
-
-  function usePattern(regexStr) {
-    var index = patternsHash[regexStr];
-    if (index === undefined) {
-      index = patternsHash[regexStr] = patterns.length;
-      patterns[index] = regexStr;
-    }
-    return 'pattern' + index;
-  }
-
-  function useDefault(value) {
-    switch (typeof value) {
-      case 'boolean':
-      case 'number':
-        return '' + value;
-      case 'string':
-        return util.toQuotedString(value);
-      case 'object':
-        if (value === null) return 'null';
-        var valueStr = stableStringify(value);
-        var index = defaultsHash[valueStr];
-        if (index === undefined) {
-          index = defaultsHash[valueStr] = defaults.length;
-          defaults[index] = value;
-        }
-        return 'default' + index;
-    }
-  }
-
-  function useCustomRule(rule, schema, parentSchema, it) {
-    var validateSchema = rule.definition.validateSchema;
-    if (validateSchema && self._opts.validateSchema !== false) {
-      var valid = validateSchema(schema);
-      if (!valid) {
-        var message = 'keyword schema is invalid: ' + self.errorsText(validateSchema.errors);
-        if (self._opts.validateSchema == 'log') self.logger.error(message);
-        else throw new Error(message);
-      }
-    }
-
-    var compile = rule.definition.compile
-      , inline = rule.definition.inline
-      , macro = rule.definition.macro;
-
-    var validate;
-    if (compile) {
-      validate = compile.call(self, schema, parentSchema, it);
-    } else if (macro) {
-      validate = macro.call(self, schema, parentSchema, it);
-      if (opts.validateSchema !== false) self.validateSchema(validate, true);
-    } else if (inline) {
-      validate = inline.call(self, it, rule.keyword, schema, parentSchema);
-    } else {
-      validate = rule.definition.validate;
-      if (!validate) return;
-    }
-
-    if (validate === undefined)
-      throw new Error('custom keyword "' + rule.keyword + '"failed to compile');
-
-    var index = customRules.length;
-    customRules[index] = validate;
-
-    return {
-      code: 'customRule' + index,
-      validate: validate
-    };
-  }
-}
-
-
-/**
- * Checks if the schema is currently compiled
- * @this   Ajv
- * @param  {Object} schema schema to compile
- * @param  {Object} root root object
- * @param  {String} baseId base schema ID
- * @return {Object} object with properties "index" (compilation index) and "compiling" (boolean)
- */
-function checkCompiling(schema, root, baseId) {
-  /* jshint validthis: true */
-  var index = compIndex.call(this, schema, root, baseId);
-  if (index >= 0) return { index: index, compiling: true };
-  index = this._compilations.length;
-  this._compilations[index] = {
-    schema: schema,
-    root: root,
-    baseId: baseId
-  };
-  return { index: index, compiling: false };
-}
-
-
-/**
- * Removes the schema from the currently compiled list
- * @this   Ajv
- * @param  {Object} schema schema to compile
- * @param  {Object} root root object
- * @param  {String} baseId base schema ID
- */
-function endCompiling(schema, root, baseId) {
-  /* jshint validthis: true */
-  var i = compIndex.call(this, schema, root, baseId);
-  if (i >= 0) this._compilations.splice(i, 1);
-}
-
-
-/**
- * Index of schema compilation in the currently compiled list
- * @this   Ajv
- * @param  {Object} schema schema to compile
- * @param  {Object} root root object
- * @param  {String} baseId base schema ID
- * @return {Integer} compilation index
- */
-function compIndex(schema, root, baseId) {
-  /* jshint validthis: true */
-  for (var i=0; i<this._compilations.length; i++) {
-    var c = this._compilations[i];
-    if (c.schema == schema && c.root == root && c.baseId == baseId) return i;
-  }
-  return -1;
-}
-
-
-function patternCode(i, patterns) {
-  return 'var pattern' + i + ' = new RegExp(' + util.toQuotedString(patterns[i]) + ');';
-}
-
-
-function defaultCode(i) {
-  return 'var default' + i + ' = defaults[' + i + '];';
-}
-
-
-function refValCode(i, refVal) {
-  return refVal[i] === undefined ? '' : 'var refVal' + i + ' = refVal[' + i + '];';
-}
-
-
-function customRuleCode(i) {
-  return 'var customRule' + i + ' = customRules[' + i + '];';
-}
-
-
-function vars(arr, statement) {
-  if (!arr.length) return '';
-  var code = '';
-  for (var i=0; i<arr.length; i++)
-    code += statement(i, arr);
-  return code;
-}
-
-
-/***/ }),
-/* 479 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var ruleModules = __webpack_require__(475)
-  , toHash = __webpack_require__(106).toHash;
-
-module.exports = function rules() {
-  var RULES = [
-    { type: 'number',
-      rules: [ { 'maximum': ['exclusiveMaximum'] },
-               { 'minimum': ['exclusiveMinimum'] }, 'multipleOf', 'format'] },
-    { type: 'string',
-      rules: [ 'maxLength', 'minLength', 'pattern', 'format' ] },
-    { type: 'array',
-      rules: [ 'maxItems', 'minItems', 'uniqueItems', 'contains', 'items' ] },
-    { type: 'object',
-      rules: [ 'maxProperties', 'minProperties', 'required', 'dependencies', 'propertyNames',
-               { 'properties': ['additionalProperties', 'patternProperties'] } ] },
-    { rules: [ '$ref', 'const', 'enum', 'not', 'anyOf', 'oneOf', 'allOf' ] }
-  ];
-
-  var ALL = [ 'type' ];
-  var KEYWORDS = [
-    'additionalItems', '$schema', '$id', 'id', 'title',
-    'description', 'default', 'definitions'
-  ];
-  var TYPES = [ 'number', 'integer', 'string', 'array', 'object', 'boolean', 'null' ];
-  RULES.all = toHash(ALL);
-  RULES.types = toHash(TYPES);
-
-  RULES.forEach(function (group) {
-    group.rules = group.rules.map(function (keyword) {
-      var implKeywords;
-      if (typeof keyword == 'object') {
-        var key = Object.keys(keyword)[0];
-        implKeywords = keyword[key];
-        keyword = key;
-        implKeywords.forEach(function (k) {
-          ALL.push(k);
-          RULES.all[k] = true;
-        });
-      }
-      ALL.push(keyword);
-      var rule = RULES.all[keyword] = {
-        keyword: keyword,
-        code: ruleModules[keyword],
-        implements: implKeywords
-      };
-      return rule;
-    });
-
-    if (group.type) RULES.types[group.type] = group;
-  });
-
-  RULES.keywords = toHash(ALL.concat(KEYWORDS));
-  RULES.custom = {};
-
-  return RULES;
-};
-
-
-/***/ }),
-/* 480 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// https://mathiasbynens.be/notes/javascript-encoding
-// https://github.com/bestiejs/punycode.js - punycode.ucs2.decode
-module.exports = function ucs2length(str) {
-  var length = 0
-    , len = str.length
-    , pos = 0
-    , value;
-  while (pos < len) {
-    length++;
-    value = str.charCodeAt(pos++);
-    if (value >= 0xD800 && value <= 0xDBFF && pos < len) {
-      // high surrogate, and there is a next character
-      value = str.charCodeAt(pos);
-      if ((value & 0xFC00) == 0xDC00) pos++; // low surrogate
-    }
-  }
-  return length;
-};
-
-
-/***/ }),
-/* 481 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_allOf(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  var $currentBaseId = $it.baseId,
-    $allSchemasEmpty = true;
-  var arr1 = $schema;
-  if (arr1) {
-    var $sch, $i = -1,
-      l1 = arr1.length - 1;
-    while ($i < l1) {
-      $sch = arr1[$i += 1];
-      if (it.util.schemaHasRules($sch, it.RULES.all)) {
-        $allSchemasEmpty = false;
-        $it.schema = $sch;
-        $it.schemaPath = $schemaPath + '[' + $i + ']';
-        $it.errSchemaPath = $errSchemaPath + '/' + $i;
-        out += '  ' + (it.validate($it)) + ' ';
-        $it.baseId = $currentBaseId;
-        if ($breakOnError) {
-          out += ' if (' + ($nextValid) + ') { ';
-          $closingBraces += '}';
-        }
-      }
-    }
-  }
-  if ($breakOnError) {
-    if ($allSchemasEmpty) {
-      out += ' if (true) { ';
-    } else {
-      out += ' ' + ($closingBraces.slice(0, -1)) + ' ';
-    }
-  }
-  out = it.util.cleanUpCode(out);
-  return out;
-}
-
-
-/***/ }),
-/* 482 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_anyOf(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  var $noEmptySchema = $schema.every(function($sch) {
-    return it.util.schemaHasRules($sch, it.RULES.all);
-  });
-  if ($noEmptySchema) {
-    var $currentBaseId = $it.baseId;
-    out += ' var ' + ($errs) + ' = errors; var ' + ($valid) + ' = false;  ';
-    var $wasComposite = it.compositeRule;
-    it.compositeRule = $it.compositeRule = true;
-    var arr1 = $schema;
-    if (arr1) {
-      var $sch, $i = -1,
-        l1 = arr1.length - 1;
-      while ($i < l1) {
-        $sch = arr1[$i += 1];
-        $it.schema = $sch;
-        $it.schemaPath = $schemaPath + '[' + $i + ']';
-        $it.errSchemaPath = $errSchemaPath + '/' + $i;
-        out += '  ' + (it.validate($it)) + ' ';
-        $it.baseId = $currentBaseId;
-        out += ' ' + ($valid) + ' = ' + ($valid) + ' || ' + ($nextValid) + '; if (!' + ($valid) + ') { ';
-        $closingBraces += '}';
-      }
-    }
-    it.compositeRule = $it.compositeRule = $wasComposite;
-    out += ' ' + ($closingBraces) + ' if (!' + ($valid) + ') {   var err =   '; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ('anyOf') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'should match some schema in anyOf\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-      if (it.async) {
-        out += ' throw new ValidationError(vErrors); ';
-      } else {
-        out += ' validate.errors = vErrors; return false; ';
-      }
-    }
-    out += ' } else {  errors = ' + ($errs) + '; if (vErrors !== null) { if (' + ($errs) + ') vErrors.length = ' + ($errs) + '; else vErrors = null; } ';
-    if (it.opts.allErrors) {
-      out += ' } ';
-    }
-    out = it.util.cleanUpCode(out);
-  } else {
-    if ($breakOnError) {
-      out += ' if (true) { ';
-    }
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 483 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_const(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  if (!$isData) {
-    out += ' var schema' + ($lvl) + ' = validate.schema' + ($schemaPath) + ';';
-  }
-  out += 'var ' + ($valid) + ' = equal(' + ($data) + ', schema' + ($lvl) + '); if (!' + ($valid) + ') {   ';
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('const') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should be equal to constant\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += ' }';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 484 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_contains(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  var $idx = 'i' + $lvl,
-    $dataNxt = $it.dataLevel = it.dataLevel + 1,
-    $nextData = 'data' + $dataNxt,
-    $currentBaseId = it.baseId,
-    $nonEmptySchema = it.util.schemaHasRules($schema, it.RULES.all);
-  out += 'var ' + ($errs) + ' = errors;var ' + ($valid) + ';';
-  if ($nonEmptySchema) {
-    var $wasComposite = it.compositeRule;
-    it.compositeRule = $it.compositeRule = true;
-    $it.schema = $schema;
-    $it.schemaPath = $schemaPath;
-    $it.errSchemaPath = $errSchemaPath;
-    out += ' var ' + ($nextValid) + ' = false; for (var ' + ($idx) + ' = 0; ' + ($idx) + ' < ' + ($data) + '.length; ' + ($idx) + '++) { ';
-    $it.errorPath = it.util.getPathExpr(it.errorPath, $idx, it.opts.jsonPointers, true);
-    var $passData = $data + '[' + $idx + ']';
-    $it.dataPathArr[$dataNxt] = $idx;
-    var $code = it.validate($it);
-    $it.baseId = $currentBaseId;
-    if (it.util.varOccurences($code, $nextData) < 2) {
-      out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-    } else {
-      out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-    }
-    out += ' if (' + ($nextValid) + ') break; }  ';
-    it.compositeRule = $it.compositeRule = $wasComposite;
-    out += ' ' + ($closingBraces) + ' if (!' + ($nextValid) + ') {';
-  } else {
-    out += ' if (' + ($data) + '.length == 0) {';
-  }
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('contains') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should contain a valid item\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += ' } else { ';
-  if ($nonEmptySchema) {
-    out += '  errors = ' + ($errs) + '; if (vErrors !== null) { if (' + ($errs) + ') vErrors.length = ' + ($errs) + '; else vErrors = null; } ';
-  }
-  if (it.opts.allErrors) {
-    out += ' } ';
-  }
-  out = it.util.cleanUpCode(out);
-  return out;
-}
-
-
-/***/ }),
-/* 485 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_custom(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $errorKeyword;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $errs = 'errs__' + $lvl;
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $rule = this,
-    $definition = 'definition' + $lvl,
-    $rDef = $rule.definition,
-    $closingBraces = '';
-  var $compile, $inline, $macro, $ruleValidate, $validateCode;
-  if ($isData && $rDef.$data) {
-    $validateCode = 'keywordValidate' + $lvl;
-    var $validateSchema = $rDef.validateSchema;
-    out += ' var ' + ($definition) + ' = RULES.custom[\'' + ($keyword) + '\'].definition; var ' + ($validateCode) + ' = ' + ($definition) + '.validate;';
-  } else {
-    $ruleValidate = it.useCustomRule($rule, $schema, it.schema, it);
-    if (!$ruleValidate) return;
-    $schemaValue = 'validate.schema' + $schemaPath;
-    $validateCode = $ruleValidate.code;
-    $compile = $rDef.compile;
-    $inline = $rDef.inline;
-    $macro = $rDef.macro;
-  }
-  var $ruleErrs = $validateCode + '.errors',
-    $i = 'i' + $lvl,
-    $ruleErr = 'ruleErr' + $lvl,
-    $asyncKeyword = $rDef.async;
-  if ($asyncKeyword && !it.async) throw new Error('async keyword in sync schema');
-  if (!($inline || $macro)) {
-    out += '' + ($ruleErrs) + ' = null;';
-  }
-  out += 'var ' + ($errs) + ' = errors;var ' + ($valid) + ';';
-  if ($isData && $rDef.$data) {
-    $closingBraces += '}';
-    out += ' if (' + ($schemaValue) + ' === undefined) { ' + ($valid) + ' = true; } else { ';
-    if ($validateSchema) {
-      $closingBraces += '}';
-      out += ' ' + ($valid) + ' = ' + ($definition) + '.validateSchema(' + ($schemaValue) + '); if (' + ($valid) + ') { ';
-    }
-  }
-  if ($inline) {
-    if ($rDef.statements) {
-      out += ' ' + ($ruleValidate.validate) + ' ';
-    } else {
-      out += ' ' + ($valid) + ' = ' + ($ruleValidate.validate) + '; ';
-    }
-  } else if ($macro) {
-    var $it = it.util.copy(it);
-    var $closingBraces = '';
-    $it.level++;
-    var $nextValid = 'valid' + $it.level;
-    $it.schema = $ruleValidate.validate;
-    $it.schemaPath = '';
-    var $wasComposite = it.compositeRule;
-    it.compositeRule = $it.compositeRule = true;
-    var $code = it.validate($it).replace(/validate\.schema/g, $validateCode);
-    it.compositeRule = $it.compositeRule = $wasComposite;
-    out += ' ' + ($code);
-  } else {
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = '';
-    out += '  ' + ($validateCode) + '.call( ';
-    if (it.opts.passContext) {
-      out += 'this';
-    } else {
-      out += 'self';
-    }
-    if ($compile || $rDef.schema === false) {
-      out += ' , ' + ($data) + ' ';
-    } else {
-      out += ' , ' + ($schemaValue) + ' , ' + ($data) + ' , validate.schema' + (it.schemaPath) + ' ';
-    }
-    out += ' , (dataPath || \'\')';
-    if (it.errorPath != '""') {
-      out += ' + ' + (it.errorPath);
-    }
-    var $parentData = $dataLvl ? 'data' + (($dataLvl - 1) || '') : 'parentData',
-      $parentDataProperty = $dataLvl ? it.dataPathArr[$dataLvl] : 'parentDataProperty';
-    out += ' , ' + ($parentData) + ' , ' + ($parentDataProperty) + ' , rootData )  ';
-    var def_callRuleValidate = out;
-    out = $$outStack.pop();
-    if ($rDef.errors === false) {
-      out += ' ' + ($valid) + ' = ';
-      if ($asyncKeyword) {
-        out += '' + (it.yieldAwait);
-      }
-      out += '' + (def_callRuleValidate) + '; ';
-    } else {
-      if ($asyncKeyword) {
-        $ruleErrs = 'customErrors' + $lvl;
-        out += ' var ' + ($ruleErrs) + ' = null; try { ' + ($valid) + ' = ' + (it.yieldAwait) + (def_callRuleValidate) + '; } catch (e) { ' + ($valid) + ' = false; if (e instanceof ValidationError) ' + ($ruleErrs) + ' = e.errors; else throw e; } ';
-      } else {
-        out += ' ' + ($ruleErrs) + ' = null; ' + ($valid) + ' = ' + (def_callRuleValidate) + '; ';
-      }
-    }
-  }
-  if ($rDef.modifying) {
-    out += ' if (' + ($parentData) + ') ' + ($data) + ' = ' + ($parentData) + '[' + ($parentDataProperty) + '];';
-  }
-  out += '' + ($closingBraces);
-  if ($rDef.valid) {
-    if ($breakOnError) {
-      out += ' if (true) { ';
-    }
-  } else {
-    out += ' if ( ';
-    if ($rDef.valid === undefined) {
-      out += ' !';
-      if ($macro) {
-        out += '' + ($nextValid);
-      } else {
-        out += '' + ($valid);
-      }
-    } else {
-      out += ' ' + (!$rDef.valid) + ' ';
-    }
-    out += ') { ';
-    $errorKeyword = $rule.keyword;
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = '';
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = ''; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ($errorKeyword || 'custom') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { keyword: \'' + ($rule.keyword) + '\' } ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'should pass "' + ($rule.keyword) + '" keyword validation\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    var __err = out;
-    out = $$outStack.pop();
-    if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-      if (it.async) {
-        out += ' throw new ValidationError([' + (__err) + ']); ';
-      } else {
-        out += ' validate.errors = [' + (__err) + ']; return false; ';
-      }
-    } else {
-      out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    }
-    var def_customError = out;
-    out = $$outStack.pop();
-    if ($inline) {
-      if ($rDef.errors) {
-        if ($rDef.errors != 'full') {
-          out += '  for (var ' + ($i) + '=' + ($errs) + '; ' + ($i) + '<errors; ' + ($i) + '++) { var ' + ($ruleErr) + ' = vErrors[' + ($i) + ']; if (' + ($ruleErr) + '.dataPath === undefined) ' + ($ruleErr) + '.dataPath = (dataPath || \'\') + ' + (it.errorPath) + '; if (' + ($ruleErr) + '.schemaPath === undefined) { ' + ($ruleErr) + '.schemaPath = "' + ($errSchemaPath) + '"; } ';
-          if (it.opts.verbose) {
-            out += ' ' + ($ruleErr) + '.schema = ' + ($schemaValue) + '; ' + ($ruleErr) + '.data = ' + ($data) + '; ';
-          }
-          out += ' } ';
-        }
-      } else {
-        if ($rDef.errors === false) {
-          out += ' ' + (def_customError) + ' ';
-        } else {
-          out += ' if (' + ($errs) + ' == errors) { ' + (def_customError) + ' } else {  for (var ' + ($i) + '=' + ($errs) + '; ' + ($i) + '<errors; ' + ($i) + '++) { var ' + ($ruleErr) + ' = vErrors[' + ($i) + ']; if (' + ($ruleErr) + '.dataPath === undefined) ' + ($ruleErr) + '.dataPath = (dataPath || \'\') + ' + (it.errorPath) + '; if (' + ($ruleErr) + '.schemaPath === undefined) { ' + ($ruleErr) + '.schemaPath = "' + ($errSchemaPath) + '"; } ';
-          if (it.opts.verbose) {
-            out += ' ' + ($ruleErr) + '.schema = ' + ($schemaValue) + '; ' + ($ruleErr) + '.data = ' + ($data) + '; ';
-          }
-          out += ' } } ';
-        }
-      }
-    } else if ($macro) {
-      out += '   var err =   '; /* istanbul ignore else */
-      if (it.createErrors !== false) {
-        out += ' { keyword: \'' + ($errorKeyword || 'custom') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { keyword: \'' + ($rule.keyword) + '\' } ';
-        if (it.opts.messages !== false) {
-          out += ' , message: \'should pass "' + ($rule.keyword) + '" keyword validation\' ';
-        }
-        if (it.opts.verbose) {
-          out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-        }
-        out += ' } ';
-      } else {
-        out += ' {} ';
-      }
-      out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-      if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-        if (it.async) {
-          out += ' throw new ValidationError(vErrors); ';
-        } else {
-          out += ' validate.errors = vErrors; return false; ';
-        }
-      }
-    } else {
-      if ($rDef.errors === false) {
-        out += ' ' + (def_customError) + ' ';
-      } else {
-        out += ' if (Array.isArray(' + ($ruleErrs) + ')) { if (vErrors === null) vErrors = ' + ($ruleErrs) + '; else vErrors = vErrors.concat(' + ($ruleErrs) + '); errors = vErrors.length;  for (var ' + ($i) + '=' + ($errs) + '; ' + ($i) + '<errors; ' + ($i) + '++) { var ' + ($ruleErr) + ' = vErrors[' + ($i) + ']; if (' + ($ruleErr) + '.dataPath === undefined) ' + ($ruleErr) + '.dataPath = (dataPath || \'\') + ' + (it.errorPath) + ';  ' + ($ruleErr) + '.schemaPath = "' + ($errSchemaPath) + '";  ';
-        if (it.opts.verbose) {
-          out += ' ' + ($ruleErr) + '.schema = ' + ($schemaValue) + '; ' + ($ruleErr) + '.data = ' + ($data) + '; ';
-        }
-        out += ' } } else { ' + (def_customError) + ' } ';
-      }
-    }
-    out += ' } ';
-    if ($breakOnError) {
-      out += ' else { ';
-    }
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 486 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_dependencies(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  var $schemaDeps = {},
-    $propertyDeps = {},
-    $ownProperties = it.opts.ownProperties;
-  for ($property in $schema) {
-    var $sch = $schema[$property];
-    var $deps = Array.isArray($sch) ? $propertyDeps : $schemaDeps;
-    $deps[$property] = $sch;
-  }
-  out += 'var ' + ($errs) + ' = errors;';
-  var $currentErrorPath = it.errorPath;
-  out += 'var missing' + ($lvl) + ';';
-  for (var $property in $propertyDeps) {
-    $deps = $propertyDeps[$property];
-    if ($deps.length) {
-      out += ' if ( ' + ($data) + (it.util.getProperty($property)) + ' !== undefined ';
-      if ($ownProperties) {
-        out += ' && Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($property)) + '\') ';
-      }
-      if ($breakOnError) {
-        out += ' && ( ';
-        var arr1 = $deps;
-        if (arr1) {
-          var $propertyKey, $i = -1,
-            l1 = arr1.length - 1;
-          while ($i < l1) {
-            $propertyKey = arr1[$i += 1];
-            if ($i) {
-              out += ' || ';
-            }
-            var $prop = it.util.getProperty($propertyKey),
-              $useData = $data + $prop;
-            out += ' ( ( ' + ($useData) + ' === undefined ';
-            if ($ownProperties) {
-              out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-            }
-            out += ') && (missing' + ($lvl) + ' = ' + (it.util.toQuotedString(it.opts.jsonPointers ? $propertyKey : $prop)) + ') ) ';
-          }
-        }
-        out += ')) {  ';
-        var $propertyPath = 'missing' + $lvl,
-          $missingProperty = '\' + ' + $propertyPath + ' + \'';
-        if (it.opts._errorDataPathProperty) {
-          it.errorPath = it.opts.jsonPointers ? it.util.getPathExpr($currentErrorPath, $propertyPath, true) : $currentErrorPath + ' + ' + $propertyPath;
-        }
-        var $$outStack = $$outStack || [];
-        $$outStack.push(out);
-        out = ''; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ('dependencies') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { property: \'' + (it.util.escapeQuotes($property)) + '\', missingProperty: \'' + ($missingProperty) + '\', depsCount: ' + ($deps.length) + ', deps: \'' + (it.util.escapeQuotes($deps.length == 1 ? $deps[0] : $deps.join(", "))) + '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'should have ';
-            if ($deps.length == 1) {
-              out += 'property ' + (it.util.escapeQuotes($deps[0]));
-            } else {
-              out += 'properties ' + (it.util.escapeQuotes($deps.join(", ")));
-            }
-            out += ' when property ' + (it.util.escapeQuotes($property)) + ' is present\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        var __err = out;
-        out = $$outStack.pop();
-        if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-          if (it.async) {
-            out += ' throw new ValidationError([' + (__err) + ']); ';
-          } else {
-            out += ' validate.errors = [' + (__err) + ']; return false; ';
-          }
-        } else {
-          out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-        }
-      } else {
-        out += ' ) { ';
-        var arr2 = $deps;
-        if (arr2) {
-          var $propertyKey, i2 = -1,
-            l2 = arr2.length - 1;
-          while (i2 < l2) {
-            $propertyKey = arr2[i2 += 1];
-            var $prop = it.util.getProperty($propertyKey),
-              $missingProperty = it.util.escapeQuotes($propertyKey),
-              $useData = $data + $prop;
-            if (it.opts._errorDataPathProperty) {
-              it.errorPath = it.util.getPath($currentErrorPath, $propertyKey, it.opts.jsonPointers);
-            }
-            out += ' if ( ' + ($useData) + ' === undefined ';
-            if ($ownProperties) {
-              out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-            }
-            out += ') {  var err =   '; /* istanbul ignore else */
-            if (it.createErrors !== false) {
-              out += ' { keyword: \'' + ('dependencies') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { property: \'' + (it.util.escapeQuotes($property)) + '\', missingProperty: \'' + ($missingProperty) + '\', depsCount: ' + ($deps.length) + ', deps: \'' + (it.util.escapeQuotes($deps.length == 1 ? $deps[0] : $deps.join(", "))) + '\' } ';
-              if (it.opts.messages !== false) {
-                out += ' , message: \'should have ';
-                if ($deps.length == 1) {
-                  out += 'property ' + (it.util.escapeQuotes($deps[0]));
-                } else {
-                  out += 'properties ' + (it.util.escapeQuotes($deps.join(", ")));
-                }
-                out += ' when property ' + (it.util.escapeQuotes($property)) + ' is present\' ';
-              }
-              if (it.opts.verbose) {
-                out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-              }
-              out += ' } ';
-            } else {
-              out += ' {} ';
-            }
-            out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; } ';
-          }
-        }
-      }
-      out += ' }   ';
-      if ($breakOnError) {
-        $closingBraces += '}';
-        out += ' else { ';
-      }
-    }
-  }
-  it.errorPath = $currentErrorPath;
-  var $currentBaseId = $it.baseId;
-  for (var $property in $schemaDeps) {
-    var $sch = $schemaDeps[$property];
-    if (it.util.schemaHasRules($sch, it.RULES.all)) {
-      out += ' ' + ($nextValid) + ' = true; if ( ' + ($data) + (it.util.getProperty($property)) + ' !== undefined ';
-      if ($ownProperties) {
-        out += ' && Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($property)) + '\') ';
-      }
-      out += ') { ';
-      $it.schema = $sch;
-      $it.schemaPath = $schemaPath + it.util.getProperty($property);
-      $it.errSchemaPath = $errSchemaPath + '/' + it.util.escapeFragment($property);
-      out += '  ' + (it.validate($it)) + ' ';
-      $it.baseId = $currentBaseId;
-      out += ' }  ';
-      if ($breakOnError) {
-        out += ' if (' + ($nextValid) + ') { ';
-        $closingBraces += '}';
-      }
-    }
-  }
-  if ($breakOnError) {
-    out += '   ' + ($closingBraces) + ' if (' + ($errs) + ' == errors) {';
-  }
-  out = it.util.cleanUpCode(out);
-  return out;
-}
-
-
-/***/ }),
-/* 487 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_enum(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $i = 'i' + $lvl,
-    $vSchema = 'schema' + $lvl;
-  if (!$isData) {
-    out += ' var ' + ($vSchema) + ' = validate.schema' + ($schemaPath) + ';';
-  }
-  out += 'var ' + ($valid) + ';';
-  if ($isData) {
-    out += ' if (schema' + ($lvl) + ' === undefined) ' + ($valid) + ' = true; else if (!Array.isArray(schema' + ($lvl) + ')) ' + ($valid) + ' = false; else {';
-  }
-  out += '' + ($valid) + ' = false;for (var ' + ($i) + '=0; ' + ($i) + '<' + ($vSchema) + '.length; ' + ($i) + '++) if (equal(' + ($data) + ', ' + ($vSchema) + '[' + ($i) + '])) { ' + ($valid) + ' = true; break; }';
-  if ($isData) {
-    out += '  }  ';
-  }
-  out += ' if (!' + ($valid) + ') {   ';
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('enum') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { allowedValues: schema' + ($lvl) + ' } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should be equal to one of the allowed values\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += ' }';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 488 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_format(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  if (it.opts.format === false) {
-    if ($breakOnError) {
-      out += ' if (true) { ';
-    }
-    return out;
-  }
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $unknownFormats = it.opts.unknownFormats,
-    $allowUnknown = Array.isArray($unknownFormats);
-  if ($isData) {
-    var $format = 'format' + $lvl,
-      $isObject = 'isObject' + $lvl,
-      $formatType = 'formatType' + $lvl;
-    out += ' var ' + ($format) + ' = formats[' + ($schemaValue) + ']; var ' + ($isObject) + ' = typeof ' + ($format) + ' == \'object\' && !(' + ($format) + ' instanceof RegExp) && ' + ($format) + '.validate; var ' + ($formatType) + ' = ' + ($isObject) + ' && ' + ($format) + '.type || \'string\'; if (' + ($isObject) + ') { ';
-    if (it.async) {
-      out += ' var async' + ($lvl) + ' = ' + ($format) + '.async; ';
-    }
-    out += ' ' + ($format) + ' = ' + ($format) + '.validate; } if (  ';
-    if ($isData) {
-      out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'string\') || ';
-    }
-    out += ' (';
-    if ($unknownFormats != 'ignore') {
-      out += ' (' + ($schemaValue) + ' && !' + ($format) + ' ';
-      if ($allowUnknown) {
-        out += ' && self._opts.unknownFormats.indexOf(' + ($schemaValue) + ') == -1 ';
-      }
-      out += ') || ';
-    }
-    out += ' (' + ($format) + ' && ' + ($formatType) + ' == \'' + ($ruleType) + '\' && !(typeof ' + ($format) + ' == \'function\' ? ';
-    if (it.async) {
-      out += ' (async' + ($lvl) + ' ? ' + (it.yieldAwait) + ' ' + ($format) + '(' + ($data) + ') : ' + ($format) + '(' + ($data) + ')) ';
-    } else {
-      out += ' ' + ($format) + '(' + ($data) + ') ';
-    }
-    out += ' : ' + ($format) + '.test(' + ($data) + '))))) {';
-  } else {
-    var $format = it.formats[$schema];
-    if (!$format) {
-      if ($unknownFormats == 'ignore') {
-        it.logger.warn('unknown format "' + $schema + '" ignored in schema at path "' + it.errSchemaPath + '"');
-        if ($breakOnError) {
-          out += ' if (true) { ';
-        }
-        return out;
-      } else if ($allowUnknown && $unknownFormats.indexOf($schema) >= 0) {
-        if ($breakOnError) {
-          out += ' if (true) { ';
-        }
-        return out;
-      } else {
-        throw new Error('unknown format "' + $schema + '" is used in schema at path "' + it.errSchemaPath + '"');
-      }
-    }
-    var $isObject = typeof $format == 'object' && !($format instanceof RegExp) && $format.validate;
-    var $formatType = $isObject && $format.type || 'string';
-    if ($isObject) {
-      var $async = $format.async === true;
-      $format = $format.validate;
-    }
-    if ($formatType != $ruleType) {
-      if ($breakOnError) {
-        out += ' if (true) { ';
-      }
-      return out;
-    }
-    if ($async) {
-      if (!it.async) throw new Error('async format in sync schema');
-      var $formatRef = 'formats' + it.util.getProperty($schema) + '.validate';
-      out += ' if (!(' + (it.yieldAwait) + ' ' + ($formatRef) + '(' + ($data) + '))) { ';
-    } else {
-      out += ' if (! ';
-      var $formatRef = 'formats' + it.util.getProperty($schema);
-      if ($isObject) $formatRef += '.validate';
-      if (typeof $format == 'function') {
-        out += ' ' + ($formatRef) + '(' + ($data) + ') ';
-      } else {
-        out += ' ' + ($formatRef) + '.test(' + ($data) + ') ';
-      }
-      out += ') { ';
-    }
-  }
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('format') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { format:  ';
-    if ($isData) {
-      out += '' + ($schemaValue);
-    } else {
-      out += '' + (it.util.toQuotedString($schema));
-    }
-    out += '  } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should match format "';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue) + ' + \'';
-      } else {
-        out += '' + (it.util.escapeQuotes($schema));
-      }
-      out += '"\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + (it.util.toQuotedString($schema));
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += ' } ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 489 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_items(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  var $idx = 'i' + $lvl,
-    $dataNxt = $it.dataLevel = it.dataLevel + 1,
-    $nextData = 'data' + $dataNxt,
-    $currentBaseId = it.baseId;
-  out += 'var ' + ($errs) + ' = errors;var ' + ($valid) + ';';
-  if (Array.isArray($schema)) {
-    var $additionalItems = it.schema.additionalItems;
-    if ($additionalItems === false) {
-      out += ' ' + ($valid) + ' = ' + ($data) + '.length <= ' + ($schema.length) + '; ';
-      var $currErrSchemaPath = $errSchemaPath;
-      $errSchemaPath = it.errSchemaPath + '/additionalItems';
-      out += '  if (!' + ($valid) + ') {   ';
-      var $$outStack = $$outStack || [];
-      $$outStack.push(out);
-      out = ''; /* istanbul ignore else */
-      if (it.createErrors !== false) {
-        out += ' { keyword: \'' + ('additionalItems') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { limit: ' + ($schema.length) + ' } ';
-        if (it.opts.messages !== false) {
-          out += ' , message: \'should NOT have more than ' + ($schema.length) + ' items\' ';
-        }
-        if (it.opts.verbose) {
-          out += ' , schema: false , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-        }
-        out += ' } ';
-      } else {
-        out += ' {} ';
-      }
-      var __err = out;
-      out = $$outStack.pop();
-      if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-        if (it.async) {
-          out += ' throw new ValidationError([' + (__err) + ']); ';
-        } else {
-          out += ' validate.errors = [' + (__err) + ']; return false; ';
-        }
-      } else {
-        out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-      }
-      out += ' } ';
-      $errSchemaPath = $currErrSchemaPath;
-      if ($breakOnError) {
-        $closingBraces += '}';
-        out += ' else { ';
-      }
-    }
-    var arr1 = $schema;
-    if (arr1) {
-      var $sch, $i = -1,
-        l1 = arr1.length - 1;
-      while ($i < l1) {
-        $sch = arr1[$i += 1];
-        if (it.util.schemaHasRules($sch, it.RULES.all)) {
-          out += ' ' + ($nextValid) + ' = true; if (' + ($data) + '.length > ' + ($i) + ') { ';
-          var $passData = $data + '[' + $i + ']';
-          $it.schema = $sch;
-          $it.schemaPath = $schemaPath + '[' + $i + ']';
-          $it.errSchemaPath = $errSchemaPath + '/' + $i;
-          $it.errorPath = it.util.getPathExpr(it.errorPath, $i, it.opts.jsonPointers, true);
-          $it.dataPathArr[$dataNxt] = $i;
-          var $code = it.validate($it);
-          $it.baseId = $currentBaseId;
-          if (it.util.varOccurences($code, $nextData) < 2) {
-            out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-          } else {
-            out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-          }
-          out += ' }  ';
-          if ($breakOnError) {
-            out += ' if (' + ($nextValid) + ') { ';
-            $closingBraces += '}';
-          }
-        }
-      }
-    }
-    if (typeof $additionalItems == 'object' && it.util.schemaHasRules($additionalItems, it.RULES.all)) {
-      $it.schema = $additionalItems;
-      $it.schemaPath = it.schemaPath + '.additionalItems';
-      $it.errSchemaPath = it.errSchemaPath + '/additionalItems';
-      out += ' ' + ($nextValid) + ' = true; if (' + ($data) + '.length > ' + ($schema.length) + ') {  for (var ' + ($idx) + ' = ' + ($schema.length) + '; ' + ($idx) + ' < ' + ($data) + '.length; ' + ($idx) + '++) { ';
-      $it.errorPath = it.util.getPathExpr(it.errorPath, $idx, it.opts.jsonPointers, true);
-      var $passData = $data + '[' + $idx + ']';
-      $it.dataPathArr[$dataNxt] = $idx;
-      var $code = it.validate($it);
-      $it.baseId = $currentBaseId;
-      if (it.util.varOccurences($code, $nextData) < 2) {
-        out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-      } else {
-        out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-      }
-      if ($breakOnError) {
-        out += ' if (!' + ($nextValid) + ') break; ';
-      }
-      out += ' } }  ';
-      if ($breakOnError) {
-        out += ' if (' + ($nextValid) + ') { ';
-        $closingBraces += '}';
-      }
-    }
-  } else if (it.util.schemaHasRules($schema, it.RULES.all)) {
-    $it.schema = $schema;
-    $it.schemaPath = $schemaPath;
-    $it.errSchemaPath = $errSchemaPath;
-    out += '  for (var ' + ($idx) + ' = ' + (0) + '; ' + ($idx) + ' < ' + ($data) + '.length; ' + ($idx) + '++) { ';
-    $it.errorPath = it.util.getPathExpr(it.errorPath, $idx, it.opts.jsonPointers, true);
-    var $passData = $data + '[' + $idx + ']';
-    $it.dataPathArr[$dataNxt] = $idx;
-    var $code = it.validate($it);
-    $it.baseId = $currentBaseId;
-    if (it.util.varOccurences($code, $nextData) < 2) {
-      out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-    } else {
-      out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-    }
-    if ($breakOnError) {
-      out += ' if (!' + ($nextValid) + ') break; ';
-    }
-    out += ' }';
-  }
-  if ($breakOnError) {
-    out += ' ' + ($closingBraces) + ' if (' + ($errs) + ' == errors) {';
-  }
-  out = it.util.cleanUpCode(out);
-  return out;
-}
-
-
-/***/ }),
-/* 490 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_multipleOf(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  out += 'var division' + ($lvl) + ';if (';
-  if ($isData) {
-    out += ' ' + ($schemaValue) + ' !== undefined && ( typeof ' + ($schemaValue) + ' != \'number\' || ';
-  }
-  out += ' (division' + ($lvl) + ' = ' + ($data) + ' / ' + ($schemaValue) + ', ';
-  if (it.opts.multipleOfPrecision) {
-    out += ' Math.abs(Math.round(division' + ($lvl) + ') - division' + ($lvl) + ') > 1e-' + (it.opts.multipleOfPrecision) + ' ';
-  } else {
-    out += ' division' + ($lvl) + ' !== parseInt(division' + ($lvl) + ') ';
-  }
-  out += ' ) ';
-  if ($isData) {
-    out += '  )  ';
-  }
-  out += ' ) {   ';
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('multipleOf') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { multipleOf: ' + ($schemaValue) + ' } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should be multiple of ';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue);
-      } else {
-        out += '' + ($schemaValue) + '\'';
-      }
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + ($schema);
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += '} ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 491 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_not(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  if (it.util.schemaHasRules($schema, it.RULES.all)) {
-    $it.schema = $schema;
-    $it.schemaPath = $schemaPath;
-    $it.errSchemaPath = $errSchemaPath;
-    out += ' var ' + ($errs) + ' = errors;  ';
-    var $wasComposite = it.compositeRule;
-    it.compositeRule = $it.compositeRule = true;
-    $it.createErrors = false;
-    var $allErrorsOption;
-    if ($it.opts.allErrors) {
-      $allErrorsOption = $it.opts.allErrors;
-      $it.opts.allErrors = false;
-    }
-    out += ' ' + (it.validate($it)) + ' ';
-    $it.createErrors = true;
-    if ($allErrorsOption) $it.opts.allErrors = $allErrorsOption;
-    it.compositeRule = $it.compositeRule = $wasComposite;
-    out += ' if (' + ($nextValid) + ') {   ';
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = ''; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ('not') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'should NOT be valid\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    var __err = out;
-    out = $$outStack.pop();
-    if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-      if (it.async) {
-        out += ' throw new ValidationError([' + (__err) + ']); ';
-      } else {
-        out += ' validate.errors = [' + (__err) + ']; return false; ';
-      }
-    } else {
-      out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    }
-    out += ' } else {  errors = ' + ($errs) + '; if (vErrors !== null) { if (' + ($errs) + ') vErrors.length = ' + ($errs) + '; else vErrors = null; } ';
-    if (it.opts.allErrors) {
-      out += ' } ';
-    }
-  } else {
-    out += '  var err =   '; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ('not') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'should NOT be valid\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    if ($breakOnError) {
-      out += ' if (false) { ';
-    }
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 492 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_oneOf(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  out += 'var ' + ($errs) + ' = errors;var prevValid' + ($lvl) + ' = false;var ' + ($valid) + ' = false;';
-  var $currentBaseId = $it.baseId;
-  var $wasComposite = it.compositeRule;
-  it.compositeRule = $it.compositeRule = true;
-  var arr1 = $schema;
-  if (arr1) {
-    var $sch, $i = -1,
-      l1 = arr1.length - 1;
-    while ($i < l1) {
-      $sch = arr1[$i += 1];
-      if (it.util.schemaHasRules($sch, it.RULES.all)) {
-        $it.schema = $sch;
-        $it.schemaPath = $schemaPath + '[' + $i + ']';
-        $it.errSchemaPath = $errSchemaPath + '/' + $i;
-        out += '  ' + (it.validate($it)) + ' ';
-        $it.baseId = $currentBaseId;
-      } else {
-        out += ' var ' + ($nextValid) + ' = true; ';
-      }
-      if ($i) {
-        out += ' if (' + ($nextValid) + ' && prevValid' + ($lvl) + ') ' + ($valid) + ' = false; else { ';
-        $closingBraces += '}';
-      }
-      out += ' if (' + ($nextValid) + ') ' + ($valid) + ' = prevValid' + ($lvl) + ' = true;';
-    }
-  }
-  it.compositeRule = $it.compositeRule = $wasComposite;
-  out += '' + ($closingBraces) + 'if (!' + ($valid) + ') {   var err =   '; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('oneOf') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: {} ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should match exactly one schema in oneOf\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError(vErrors); ';
-    } else {
-      out += ' validate.errors = vErrors; return false; ';
-    }
-  }
-  out += '} else {  errors = ' + ($errs) + '; if (vErrors !== null) { if (' + ($errs) + ') vErrors.length = ' + ($errs) + '; else vErrors = null; }';
-  if (it.opts.allErrors) {
-    out += ' } ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 493 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_pattern(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $regexp = $isData ? '(new RegExp(' + $schemaValue + '))' : it.usePattern($schema);
-  out += 'if ( ';
-  if ($isData) {
-    out += ' (' + ($schemaValue) + ' !== undefined && typeof ' + ($schemaValue) + ' != \'string\') || ';
-  }
-  out += ' !' + ($regexp) + '.test(' + ($data) + ') ) {   ';
-  var $$outStack = $$outStack || [];
-  $$outStack.push(out);
-  out = ''; /* istanbul ignore else */
-  if (it.createErrors !== false) {
-    out += ' { keyword: \'' + ('pattern') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { pattern:  ';
-    if ($isData) {
-      out += '' + ($schemaValue);
-    } else {
-      out += '' + (it.util.toQuotedString($schema));
-    }
-    out += '  } ';
-    if (it.opts.messages !== false) {
-      out += ' , message: \'should match pattern "';
-      if ($isData) {
-        out += '\' + ' + ($schemaValue) + ' + \'';
-      } else {
-        out += '' + (it.util.escapeQuotes($schema));
-      }
-      out += '"\' ';
-    }
-    if (it.opts.verbose) {
-      out += ' , schema:  ';
-      if ($isData) {
-        out += 'validate.schema' + ($schemaPath);
-      } else {
-        out += '' + (it.util.toQuotedString($schema));
-      }
-      out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-    }
-    out += ' } ';
-  } else {
-    out += ' {} ';
-  }
-  var __err = out;
-  out = $$outStack.pop();
-  if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-    if (it.async) {
-      out += ' throw new ValidationError([' + (__err) + ']); ';
-    } else {
-      out += ' validate.errors = [' + (__err) + ']; return false; ';
-    }
-  } else {
-    out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-  }
-  out += '} ';
-  if ($breakOnError) {
-    out += ' else { ';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 494 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_properties(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  var $key = 'key' + $lvl,
-    $idx = 'idx' + $lvl,
-    $dataNxt = $it.dataLevel = it.dataLevel + 1,
-    $nextData = 'data' + $dataNxt,
-    $dataProperties = 'dataProperties' + $lvl;
-  var $schemaKeys = Object.keys($schema || {}),
-    $pProperties = it.schema.patternProperties || {},
-    $pPropertyKeys = Object.keys($pProperties),
-    $aProperties = it.schema.additionalProperties,
-    $someProperties = $schemaKeys.length || $pPropertyKeys.length,
-    $noAdditional = $aProperties === false,
-    $additionalIsSchema = typeof $aProperties == 'object' && Object.keys($aProperties).length,
-    $removeAdditional = it.opts.removeAdditional,
-    $checkAdditional = $noAdditional || $additionalIsSchema || $removeAdditional,
-    $ownProperties = it.opts.ownProperties,
-    $currentBaseId = it.baseId;
-  var $required = it.schema.required;
-  if ($required && !(it.opts.v5 && $required.$data) && $required.length < it.opts.loopRequired) var $requiredHash = it.util.toHash($required);
-  if (it.opts.patternGroups) {
-    var $pgProperties = it.schema.patternGroups || {},
-      $pgPropertyKeys = Object.keys($pgProperties);
-  }
-  out += 'var ' + ($errs) + ' = errors;var ' + ($nextValid) + ' = true;';
-  if ($ownProperties) {
-    out += ' var ' + ($dataProperties) + ' = undefined;';
-  }
-  if ($checkAdditional) {
-    if ($ownProperties) {
-      out += ' ' + ($dataProperties) + ' = ' + ($dataProperties) + ' || Object.keys(' + ($data) + '); for (var ' + ($idx) + '=0; ' + ($idx) + '<' + ($dataProperties) + '.length; ' + ($idx) + '++) { var ' + ($key) + ' = ' + ($dataProperties) + '[' + ($idx) + ']; ';
-    } else {
-      out += ' for (var ' + ($key) + ' in ' + ($data) + ') { ';
-    }
-    if ($someProperties) {
-      out += ' var isAdditional' + ($lvl) + ' = !(false ';
-      if ($schemaKeys.length) {
-        if ($schemaKeys.length > 5) {
-          out += ' || validate.schema' + ($schemaPath) + '[' + ($key) + '] ';
-        } else {
-          var arr1 = $schemaKeys;
-          if (arr1) {
-            var $propertyKey, i1 = -1,
-              l1 = arr1.length - 1;
-            while (i1 < l1) {
-              $propertyKey = arr1[i1 += 1];
-              out += ' || ' + ($key) + ' == ' + (it.util.toQuotedString($propertyKey)) + ' ';
-            }
-          }
-        }
-      }
-      if ($pPropertyKeys.length) {
-        var arr2 = $pPropertyKeys;
-        if (arr2) {
-          var $pProperty, $i = -1,
-            l2 = arr2.length - 1;
-          while ($i < l2) {
-            $pProperty = arr2[$i += 1];
-            out += ' || ' + (it.usePattern($pProperty)) + '.test(' + ($key) + ') ';
-          }
-        }
-      }
-      if (it.opts.patternGroups && $pgPropertyKeys.length) {
-        var arr3 = $pgPropertyKeys;
-        if (arr3) {
-          var $pgProperty, $i = -1,
-            l3 = arr3.length - 1;
-          while ($i < l3) {
-            $pgProperty = arr3[$i += 1];
-            out += ' || ' + (it.usePattern($pgProperty)) + '.test(' + ($key) + ') ';
-          }
-        }
-      }
-      out += ' ); if (isAdditional' + ($lvl) + ') { ';
-    }
-    if ($removeAdditional == 'all') {
-      out += ' delete ' + ($data) + '[' + ($key) + ']; ';
-    } else {
-      var $currentErrorPath = it.errorPath;
-      var $additionalProperty = '\' + ' + $key + ' + \'';
-      if (it.opts._errorDataPathProperty) {
-        it.errorPath = it.util.getPathExpr(it.errorPath, $key, it.opts.jsonPointers);
-      }
-      if ($noAdditional) {
-        if ($removeAdditional) {
-          out += ' delete ' + ($data) + '[' + ($key) + ']; ';
-        } else {
-          out += ' ' + ($nextValid) + ' = false; ';
-          var $currErrSchemaPath = $errSchemaPath;
-          $errSchemaPath = it.errSchemaPath + '/additionalProperties';
-          var $$outStack = $$outStack || [];
-          $$outStack.push(out);
-          out = ''; /* istanbul ignore else */
-          if (it.createErrors !== false) {
-            out += ' { keyword: \'' + ('additionalProperties') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { additionalProperty: \'' + ($additionalProperty) + '\' } ';
-            if (it.opts.messages !== false) {
-              out += ' , message: \'should NOT have additional properties\' ';
-            }
-            if (it.opts.verbose) {
-              out += ' , schema: false , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-            }
-            out += ' } ';
-          } else {
-            out += ' {} ';
-          }
-          var __err = out;
-          out = $$outStack.pop();
-          if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-            if (it.async) {
-              out += ' throw new ValidationError([' + (__err) + ']); ';
-            } else {
-              out += ' validate.errors = [' + (__err) + ']; return false; ';
-            }
-          } else {
-            out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-          }
-          $errSchemaPath = $currErrSchemaPath;
-          if ($breakOnError) {
-            out += ' break; ';
-          }
-        }
-      } else if ($additionalIsSchema) {
-        if ($removeAdditional == 'failing') {
-          out += ' var ' + ($errs) + ' = errors;  ';
-          var $wasComposite = it.compositeRule;
-          it.compositeRule = $it.compositeRule = true;
-          $it.schema = $aProperties;
-          $it.schemaPath = it.schemaPath + '.additionalProperties';
-          $it.errSchemaPath = it.errSchemaPath + '/additionalProperties';
-          $it.errorPath = it.opts._errorDataPathProperty ? it.errorPath : it.util.getPathExpr(it.errorPath, $key, it.opts.jsonPointers);
-          var $passData = $data + '[' + $key + ']';
-          $it.dataPathArr[$dataNxt] = $key;
-          var $code = it.validate($it);
-          $it.baseId = $currentBaseId;
-          if (it.util.varOccurences($code, $nextData) < 2) {
-            out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-          } else {
-            out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-          }
-          out += ' if (!' + ($nextValid) + ') { errors = ' + ($errs) + '; if (validate.errors !== null) { if (errors) validate.errors.length = errors; else validate.errors = null; } delete ' + ($data) + '[' + ($key) + ']; }  ';
-          it.compositeRule = $it.compositeRule = $wasComposite;
-        } else {
-          $it.schema = $aProperties;
-          $it.schemaPath = it.schemaPath + '.additionalProperties';
-          $it.errSchemaPath = it.errSchemaPath + '/additionalProperties';
-          $it.errorPath = it.opts._errorDataPathProperty ? it.errorPath : it.util.getPathExpr(it.errorPath, $key, it.opts.jsonPointers);
-          var $passData = $data + '[' + $key + ']';
-          $it.dataPathArr[$dataNxt] = $key;
-          var $code = it.validate($it);
-          $it.baseId = $currentBaseId;
-          if (it.util.varOccurences($code, $nextData) < 2) {
-            out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-          } else {
-            out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-          }
-          if ($breakOnError) {
-            out += ' if (!' + ($nextValid) + ') break; ';
-          }
-        }
-      }
-      it.errorPath = $currentErrorPath;
-    }
-    if ($someProperties) {
-      out += ' } ';
-    }
-    out += ' }  ';
-    if ($breakOnError) {
-      out += ' if (' + ($nextValid) + ') { ';
-      $closingBraces += '}';
-    }
-  }
-  var $useDefaults = it.opts.useDefaults && !it.compositeRule;
-  if ($schemaKeys.length) {
-    var arr4 = $schemaKeys;
-    if (arr4) {
-      var $propertyKey, i4 = -1,
-        l4 = arr4.length - 1;
-      while (i4 < l4) {
-        $propertyKey = arr4[i4 += 1];
-        var $sch = $schema[$propertyKey];
-        if (it.util.schemaHasRules($sch, it.RULES.all)) {
-          var $prop = it.util.getProperty($propertyKey),
-            $passData = $data + $prop,
-            $hasDefault = $useDefaults && $sch.default !== undefined;
-          $it.schema = $sch;
-          $it.schemaPath = $schemaPath + $prop;
-          $it.errSchemaPath = $errSchemaPath + '/' + it.util.escapeFragment($propertyKey);
-          $it.errorPath = it.util.getPath(it.errorPath, $propertyKey, it.opts.jsonPointers);
-          $it.dataPathArr[$dataNxt] = it.util.toQuotedString($propertyKey);
-          var $code = it.validate($it);
-          $it.baseId = $currentBaseId;
-          if (it.util.varOccurences($code, $nextData) < 2) {
-            $code = it.util.varReplace($code, $nextData, $passData);
-            var $useData = $passData;
-          } else {
-            var $useData = $nextData;
-            out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ';
-          }
-          if ($hasDefault) {
-            out += ' ' + ($code) + ' ';
-          } else {
-            if ($requiredHash && $requiredHash[$propertyKey]) {
-              out += ' if ( ' + ($useData) + ' === undefined ';
-              if ($ownProperties) {
-                out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-              }
-              out += ') { ' + ($nextValid) + ' = false; ';
-              var $currentErrorPath = it.errorPath,
-                $currErrSchemaPath = $errSchemaPath,
-                $missingProperty = it.util.escapeQuotes($propertyKey);
-              if (it.opts._errorDataPathProperty) {
-                it.errorPath = it.util.getPath($currentErrorPath, $propertyKey, it.opts.jsonPointers);
-              }
-              $errSchemaPath = it.errSchemaPath + '/required';
-              var $$outStack = $$outStack || [];
-              $$outStack.push(out);
-              out = ''; /* istanbul ignore else */
-              if (it.createErrors !== false) {
-                out += ' { keyword: \'' + ('required') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { missingProperty: \'' + ($missingProperty) + '\' } ';
-                if (it.opts.messages !== false) {
-                  out += ' , message: \'';
-                  if (it.opts._errorDataPathProperty) {
-                    out += 'is a required property';
-                  } else {
-                    out += 'should have required property \\\'' + ($missingProperty) + '\\\'';
-                  }
-                  out += '\' ';
-                }
-                if (it.opts.verbose) {
-                  out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-                }
-                out += ' } ';
-              } else {
-                out += ' {} ';
-              }
-              var __err = out;
-              out = $$outStack.pop();
-              if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-                if (it.async) {
-                  out += ' throw new ValidationError([' + (__err) + ']); ';
-                } else {
-                  out += ' validate.errors = [' + (__err) + ']; return false; ';
-                }
-              } else {
-                out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-              }
-              $errSchemaPath = $currErrSchemaPath;
-              it.errorPath = $currentErrorPath;
-              out += ' } else { ';
-            } else {
-              if ($breakOnError) {
-                out += ' if ( ' + ($useData) + ' === undefined ';
-                if ($ownProperties) {
-                  out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-                }
-                out += ') { ' + ($nextValid) + ' = true; } else { ';
-              } else {
-                out += ' if (' + ($useData) + ' !== undefined ';
-                if ($ownProperties) {
-                  out += ' &&   Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-                }
-                out += ' ) { ';
-              }
-            }
-            out += ' ' + ($code) + ' } ';
-          }
-        }
-        if ($breakOnError) {
-          out += ' if (' + ($nextValid) + ') { ';
-          $closingBraces += '}';
-        }
-      }
-    }
-  }
-  if ($pPropertyKeys.length) {
-    var arr5 = $pPropertyKeys;
-    if (arr5) {
-      var $pProperty, i5 = -1,
-        l5 = arr5.length - 1;
-      while (i5 < l5) {
-        $pProperty = arr5[i5 += 1];
-        var $sch = $pProperties[$pProperty];
-        if (it.util.schemaHasRules($sch, it.RULES.all)) {
-          $it.schema = $sch;
-          $it.schemaPath = it.schemaPath + '.patternProperties' + it.util.getProperty($pProperty);
-          $it.errSchemaPath = it.errSchemaPath + '/patternProperties/' + it.util.escapeFragment($pProperty);
-          if ($ownProperties) {
-            out += ' ' + ($dataProperties) + ' = ' + ($dataProperties) + ' || Object.keys(' + ($data) + '); for (var ' + ($idx) + '=0; ' + ($idx) + '<' + ($dataProperties) + '.length; ' + ($idx) + '++) { var ' + ($key) + ' = ' + ($dataProperties) + '[' + ($idx) + ']; ';
-          } else {
-            out += ' for (var ' + ($key) + ' in ' + ($data) + ') { ';
-          }
-          out += ' if (' + (it.usePattern($pProperty)) + '.test(' + ($key) + ')) { ';
-          $it.errorPath = it.util.getPathExpr(it.errorPath, $key, it.opts.jsonPointers);
-          var $passData = $data + '[' + $key + ']';
-          $it.dataPathArr[$dataNxt] = $key;
-          var $code = it.validate($it);
-          $it.baseId = $currentBaseId;
-          if (it.util.varOccurences($code, $nextData) < 2) {
-            out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-          } else {
-            out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-          }
-          if ($breakOnError) {
-            out += ' if (!' + ($nextValid) + ') break; ';
-          }
-          out += ' } ';
-          if ($breakOnError) {
-            out += ' else ' + ($nextValid) + ' = true; ';
-          }
-          out += ' }  ';
-          if ($breakOnError) {
-            out += ' if (' + ($nextValid) + ') { ';
-            $closingBraces += '}';
-          }
-        }
-      }
-    }
-  }
-  if (it.opts.patternGroups && $pgPropertyKeys.length) {
-    var arr6 = $pgPropertyKeys;
-    if (arr6) {
-      var $pgProperty, i6 = -1,
-        l6 = arr6.length - 1;
-      while (i6 < l6) {
-        $pgProperty = arr6[i6 += 1];
-        var $pgSchema = $pgProperties[$pgProperty],
-          $sch = $pgSchema.schema;
-        if (it.util.schemaHasRules($sch, it.RULES.all)) {
-          $it.schema = $sch;
-          $it.schemaPath = it.schemaPath + '.patternGroups' + it.util.getProperty($pgProperty) + '.schema';
-          $it.errSchemaPath = it.errSchemaPath + '/patternGroups/' + it.util.escapeFragment($pgProperty) + '/schema';
-          out += ' var pgPropCount' + ($lvl) + ' = 0;  ';
-          if ($ownProperties) {
-            out += ' ' + ($dataProperties) + ' = ' + ($dataProperties) + ' || Object.keys(' + ($data) + '); for (var ' + ($idx) + '=0; ' + ($idx) + '<' + ($dataProperties) + '.length; ' + ($idx) + '++) { var ' + ($key) + ' = ' + ($dataProperties) + '[' + ($idx) + ']; ';
-          } else {
-            out += ' for (var ' + ($key) + ' in ' + ($data) + ') { ';
-          }
-          out += ' if (' + (it.usePattern($pgProperty)) + '.test(' + ($key) + ')) { pgPropCount' + ($lvl) + '++; ';
-          $it.errorPath = it.util.getPathExpr(it.errorPath, $key, it.opts.jsonPointers);
-          var $passData = $data + '[' + $key + ']';
-          $it.dataPathArr[$dataNxt] = $key;
-          var $code = it.validate($it);
-          $it.baseId = $currentBaseId;
-          if (it.util.varOccurences($code, $nextData) < 2) {
-            out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-          } else {
-            out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-          }
-          if ($breakOnError) {
-            out += ' if (!' + ($nextValid) + ') break; ';
-          }
-          out += ' } ';
-          if ($breakOnError) {
-            out += ' else ' + ($nextValid) + ' = true; ';
-          }
-          out += ' }  ';
-          if ($breakOnError) {
-            out += ' if (' + ($nextValid) + ') { ';
-            $closingBraces += '}';
-          }
-          var $pgMin = $pgSchema.minimum,
-            $pgMax = $pgSchema.maximum;
-          if ($pgMin !== undefined || $pgMax !== undefined) {
-            out += ' var ' + ($valid) + ' = true; ';
-            var $currErrSchemaPath = $errSchemaPath;
-            if ($pgMin !== undefined) {
-              var $limit = $pgMin,
-                $reason = 'minimum',
-                $moreOrLess = 'less';
-              out += ' ' + ($valid) + ' = pgPropCount' + ($lvl) + ' >= ' + ($pgMin) + '; ';
-              $errSchemaPath = it.errSchemaPath + '/patternGroups/minimum';
-              out += '  if (!' + ($valid) + ') {   ';
-              var $$outStack = $$outStack || [];
-              $$outStack.push(out);
-              out = ''; /* istanbul ignore else */
-              if (it.createErrors !== false) {
-                out += ' { keyword: \'' + ('patternGroups') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { reason: \'' + ($reason) + '\', limit: ' + ($limit) + ', pattern: \'' + (it.util.escapeQuotes($pgProperty)) + '\' } ';
-                if (it.opts.messages !== false) {
-                  out += ' , message: \'should NOT have ' + ($moreOrLess) + ' than ' + ($limit) + ' properties matching pattern "' + (it.util.escapeQuotes($pgProperty)) + '"\' ';
-                }
-                if (it.opts.verbose) {
-                  out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-                }
-                out += ' } ';
-              } else {
-                out += ' {} ';
-              }
-              var __err = out;
-              out = $$outStack.pop();
-              if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-                if (it.async) {
-                  out += ' throw new ValidationError([' + (__err) + ']); ';
-                } else {
-                  out += ' validate.errors = [' + (__err) + ']; return false; ';
-                }
-              } else {
-                out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-              }
-              out += ' } ';
-              if ($pgMax !== undefined) {
-                out += ' else ';
-              }
-            }
-            if ($pgMax !== undefined) {
-              var $limit = $pgMax,
-                $reason = 'maximum',
-                $moreOrLess = 'more';
-              out += ' ' + ($valid) + ' = pgPropCount' + ($lvl) + ' <= ' + ($pgMax) + '; ';
-              $errSchemaPath = it.errSchemaPath + '/patternGroups/maximum';
-              out += '  if (!' + ($valid) + ') {   ';
-              var $$outStack = $$outStack || [];
-              $$outStack.push(out);
-              out = ''; /* istanbul ignore else */
-              if (it.createErrors !== false) {
-                out += ' { keyword: \'' + ('patternGroups') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { reason: \'' + ($reason) + '\', limit: ' + ($limit) + ', pattern: \'' + (it.util.escapeQuotes($pgProperty)) + '\' } ';
-                if (it.opts.messages !== false) {
-                  out += ' , message: \'should NOT have ' + ($moreOrLess) + ' than ' + ($limit) + ' properties matching pattern "' + (it.util.escapeQuotes($pgProperty)) + '"\' ';
-                }
-                if (it.opts.verbose) {
-                  out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-                }
-                out += ' } ';
-              } else {
-                out += ' {} ';
-              }
-              var __err = out;
-              out = $$outStack.pop();
-              if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-                if (it.async) {
-                  out += ' throw new ValidationError([' + (__err) + ']); ';
-                } else {
-                  out += ' validate.errors = [' + (__err) + ']; return false; ';
-                }
-              } else {
-                out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-              }
-              out += ' } ';
-            }
-            $errSchemaPath = $currErrSchemaPath;
-            if ($breakOnError) {
-              out += ' if (' + ($valid) + ') { ';
-              $closingBraces += '}';
-            }
-          }
-        }
-      }
-    }
-  }
-  if ($breakOnError) {
-    out += ' ' + ($closingBraces) + ' if (' + ($errs) + ' == errors) {';
-  }
-  out = it.util.cleanUpCode(out);
-  return out;
-}
-
-
-/***/ }),
-/* 495 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_propertyNames(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $errs = 'errs__' + $lvl;
-  var $it = it.util.copy(it);
-  var $closingBraces = '';
-  $it.level++;
-  var $nextValid = 'valid' + $it.level;
-  if (it.util.schemaHasRules($schema, it.RULES.all)) {
-    $it.schema = $schema;
-    $it.schemaPath = $schemaPath;
-    $it.errSchemaPath = $errSchemaPath;
-    var $key = 'key' + $lvl,
-      $idx = 'idx' + $lvl,
-      $i = 'i' + $lvl,
-      $invalidName = '\' + ' + $key + ' + \'',
-      $dataNxt = $it.dataLevel = it.dataLevel + 1,
-      $nextData = 'data' + $dataNxt,
-      $dataProperties = 'dataProperties' + $lvl,
-      $ownProperties = it.opts.ownProperties,
-      $currentBaseId = it.baseId;
-    out += ' var ' + ($errs) + ' = errors; ';
-    if ($ownProperties) {
-      out += ' var ' + ($dataProperties) + ' = undefined; ';
-    }
-    if ($ownProperties) {
-      out += ' ' + ($dataProperties) + ' = ' + ($dataProperties) + ' || Object.keys(' + ($data) + '); for (var ' + ($idx) + '=0; ' + ($idx) + '<' + ($dataProperties) + '.length; ' + ($idx) + '++) { var ' + ($key) + ' = ' + ($dataProperties) + '[' + ($idx) + ']; ';
-    } else {
-      out += ' for (var ' + ($key) + ' in ' + ($data) + ') { ';
-    }
-    out += ' var startErrs' + ($lvl) + ' = errors; ';
-    var $passData = $key;
-    var $wasComposite = it.compositeRule;
-    it.compositeRule = $it.compositeRule = true;
-    var $code = it.validate($it);
-    $it.baseId = $currentBaseId;
-    if (it.util.varOccurences($code, $nextData) < 2) {
-      out += ' ' + (it.util.varReplace($code, $nextData, $passData)) + ' ';
-    } else {
-      out += ' var ' + ($nextData) + ' = ' + ($passData) + '; ' + ($code) + ' ';
-    }
-    it.compositeRule = $it.compositeRule = $wasComposite;
-    out += ' if (!' + ($nextValid) + ') { for (var ' + ($i) + '=startErrs' + ($lvl) + '; ' + ($i) + '<errors; ' + ($i) + '++) { vErrors[' + ($i) + '].propertyName = ' + ($key) + '; }   var err =   '; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ('propertyNames') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { propertyName: \'' + ($invalidName) + '\' } ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'property name \\\'' + ($invalidName) + '\\\' is invalid\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-      if (it.async) {
-        out += ' throw new ValidationError(vErrors); ';
-      } else {
-        out += ' validate.errors = vErrors; return false; ';
-      }
-    }
-    if ($breakOnError) {
-      out += ' break; ';
-    }
-    out += ' } }';
-  }
-  if ($breakOnError) {
-    out += ' ' + ($closingBraces) + ' if (' + ($errs) + ' == errors) {';
-  }
-  out = it.util.cleanUpCode(out);
-  return out;
-}
-
-
-/***/ }),
-/* 496 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_ref(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $async, $refCode;
-  if ($schema == '#' || $schema == '#/') {
-    if (it.isRoot) {
-      $async = it.async;
-      $refCode = 'validate';
-    } else {
-      $async = it.root.schema.$async === true;
-      $refCode = 'root.refVal[0]';
-    }
-  } else {
-    var $refVal = it.resolveRef(it.baseId, $schema, it.isRoot);
-    if ($refVal === undefined) {
-      var $message = it.MissingRefError.message(it.baseId, $schema);
-      if (it.opts.missingRefs == 'fail') {
-        it.logger.error($message);
-        var $$outStack = $$outStack || [];
-        $$outStack.push(out);
-        out = ''; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ('$ref') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { ref: \'' + (it.util.escapeQuotes($schema)) + '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'can\\\'t resolve reference ' + (it.util.escapeQuotes($schema)) + '\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: ' + (it.util.toQuotedString($schema)) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        var __err = out;
-        out = $$outStack.pop();
-        if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-          if (it.async) {
-            out += ' throw new ValidationError([' + (__err) + ']); ';
-          } else {
-            out += ' validate.errors = [' + (__err) + ']; return false; ';
-          }
-        } else {
-          out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-        }
-        if ($breakOnError) {
-          out += ' if (false) { ';
-        }
-      } else if (it.opts.missingRefs == 'ignore') {
-        it.logger.warn($message);
-        if ($breakOnError) {
-          out += ' if (true) { ';
-        }
-      } else {
-        throw new it.MissingRefError(it.baseId, $schema, $message);
-      }
-    } else if ($refVal.inline) {
-      var $it = it.util.copy(it);
-      $it.level++;
-      var $nextValid = 'valid' + $it.level;
-      $it.schema = $refVal.schema;
-      $it.schemaPath = '';
-      $it.errSchemaPath = $schema;
-      var $code = it.validate($it).replace(/validate\.schema/g, $refVal.code);
-      out += ' ' + ($code) + ' ';
-      if ($breakOnError) {
-        out += ' if (' + ($nextValid) + ') { ';
-      }
-    } else {
-      $async = $refVal.$async === true;
-      $refCode = $refVal.code;
-    }
-  }
-  if ($refCode) {
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = '';
-    if (it.opts.passContext) {
-      out += ' ' + ($refCode) + '.call(this, ';
-    } else {
-      out += ' ' + ($refCode) + '( ';
-    }
-    out += ' ' + ($data) + ', (dataPath || \'\')';
-    if (it.errorPath != '""') {
-      out += ' + ' + (it.errorPath);
-    }
-    var $parentData = $dataLvl ? 'data' + (($dataLvl - 1) || '') : 'parentData',
-      $parentDataProperty = $dataLvl ? it.dataPathArr[$dataLvl] : 'parentDataProperty';
-    out += ' , ' + ($parentData) + ' , ' + ($parentDataProperty) + ', rootData)  ';
-    var __callValidate = out;
-    out = $$outStack.pop();
-    if ($async) {
-      if (!it.async) throw new Error('async schema referenced by sync schema');
-      if ($breakOnError) {
-        out += ' var ' + ($valid) + '; ';
-      }
-      out += ' try { ' + (it.yieldAwait) + ' ' + (__callValidate) + '; ';
-      if ($breakOnError) {
-        out += ' ' + ($valid) + ' = true; ';
-      }
-      out += ' } catch (e) { if (!(e instanceof ValidationError)) throw e; if (vErrors === null) vErrors = e.errors; else vErrors = vErrors.concat(e.errors); errors = vErrors.length; ';
-      if ($breakOnError) {
-        out += ' ' + ($valid) + ' = false; ';
-      }
-      out += ' } ';
-      if ($breakOnError) {
-        out += ' if (' + ($valid) + ') { ';
-      }
-    } else {
-      out += ' if (!' + (__callValidate) + ') { if (vErrors === null) vErrors = ' + ($refCode) + '.errors; else vErrors = vErrors.concat(' + ($refCode) + '.errors); errors = vErrors.length; } ';
-      if ($breakOnError) {
-        out += ' else { ';
-      }
-    }
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 497 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_required(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  var $vSchema = 'schema' + $lvl;
-  if (!$isData) {
-    if ($schema.length < it.opts.loopRequired && it.schema.properties && Object.keys(it.schema.properties).length) {
-      var $required = [];
-      var arr1 = $schema;
-      if (arr1) {
-        var $property, i1 = -1,
-          l1 = arr1.length - 1;
-        while (i1 < l1) {
-          $property = arr1[i1 += 1];
-          var $propertySch = it.schema.properties[$property];
-          if (!($propertySch && it.util.schemaHasRules($propertySch, it.RULES.all))) {
-            $required[$required.length] = $property;
-          }
-        }
-      }
-    } else {
-      var $required = $schema;
-    }
-  }
-  if ($isData || $required.length) {
-    var $currentErrorPath = it.errorPath,
-      $loopRequired = $isData || $required.length >= it.opts.loopRequired,
-      $ownProperties = it.opts.ownProperties;
-    if ($breakOnError) {
-      out += ' var missing' + ($lvl) + '; ';
-      if ($loopRequired) {
-        if (!$isData) {
-          out += ' var ' + ($vSchema) + ' = validate.schema' + ($schemaPath) + '; ';
-        }
-        var $i = 'i' + $lvl,
-          $propertyPath = 'schema' + $lvl + '[' + $i + ']',
-          $missingProperty = '\' + ' + $propertyPath + ' + \'';
-        if (it.opts._errorDataPathProperty) {
-          it.errorPath = it.util.getPathExpr($currentErrorPath, $propertyPath, it.opts.jsonPointers);
-        }
-        out += ' var ' + ($valid) + ' = true; ';
-        if ($isData) {
-          out += ' if (schema' + ($lvl) + ' === undefined) ' + ($valid) + ' = true; else if (!Array.isArray(schema' + ($lvl) + ')) ' + ($valid) + ' = false; else {';
-        }
-        out += ' for (var ' + ($i) + ' = 0; ' + ($i) + ' < ' + ($vSchema) + '.length; ' + ($i) + '++) { ' + ($valid) + ' = ' + ($data) + '[' + ($vSchema) + '[' + ($i) + ']] !== undefined ';
-        if ($ownProperties) {
-          out += ' &&   Object.prototype.hasOwnProperty.call(' + ($data) + ', ' + ($vSchema) + '[' + ($i) + ']) ';
-        }
-        out += '; if (!' + ($valid) + ') break; } ';
-        if ($isData) {
-          out += '  }  ';
-        }
-        out += '  if (!' + ($valid) + ') {   ';
-        var $$outStack = $$outStack || [];
-        $$outStack.push(out);
-        out = ''; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ('required') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { missingProperty: \'' + ($missingProperty) + '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'';
-            if (it.opts._errorDataPathProperty) {
-              out += 'is a required property';
-            } else {
-              out += 'should have required property \\\'' + ($missingProperty) + '\\\'';
-            }
-            out += '\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        var __err = out;
-        out = $$outStack.pop();
-        if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-          if (it.async) {
-            out += ' throw new ValidationError([' + (__err) + ']); ';
-          } else {
-            out += ' validate.errors = [' + (__err) + ']; return false; ';
-          }
-        } else {
-          out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-        }
-        out += ' } else { ';
-      } else {
-        out += ' if ( ';
-        var arr2 = $required;
-        if (arr2) {
-          var $propertyKey, $i = -1,
-            l2 = arr2.length - 1;
-          while ($i < l2) {
-            $propertyKey = arr2[$i += 1];
-            if ($i) {
-              out += ' || ';
-            }
-            var $prop = it.util.getProperty($propertyKey),
-              $useData = $data + $prop;
-            out += ' ( ( ' + ($useData) + ' === undefined ';
-            if ($ownProperties) {
-              out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-            }
-            out += ') && (missing' + ($lvl) + ' = ' + (it.util.toQuotedString(it.opts.jsonPointers ? $propertyKey : $prop)) + ') ) ';
-          }
-        }
-        out += ') {  ';
-        var $propertyPath = 'missing' + $lvl,
-          $missingProperty = '\' + ' + $propertyPath + ' + \'';
-        if (it.opts._errorDataPathProperty) {
-          it.errorPath = it.opts.jsonPointers ? it.util.getPathExpr($currentErrorPath, $propertyPath, true) : $currentErrorPath + ' + ' + $propertyPath;
-        }
-        var $$outStack = $$outStack || [];
-        $$outStack.push(out);
-        out = ''; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ('required') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { missingProperty: \'' + ($missingProperty) + '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'';
-            if (it.opts._errorDataPathProperty) {
-              out += 'is a required property';
-            } else {
-              out += 'should have required property \\\'' + ($missingProperty) + '\\\'';
-            }
-            out += '\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        var __err = out;
-        out = $$outStack.pop();
-        if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-          if (it.async) {
-            out += ' throw new ValidationError([' + (__err) + ']); ';
-          } else {
-            out += ' validate.errors = [' + (__err) + ']; return false; ';
-          }
-        } else {
-          out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-        }
-        out += ' } else { ';
-      }
-    } else {
-      if ($loopRequired) {
-        if (!$isData) {
-          out += ' var ' + ($vSchema) + ' = validate.schema' + ($schemaPath) + '; ';
-        }
-        var $i = 'i' + $lvl,
-          $propertyPath = 'schema' + $lvl + '[' + $i + ']',
-          $missingProperty = '\' + ' + $propertyPath + ' + \'';
-        if (it.opts._errorDataPathProperty) {
-          it.errorPath = it.util.getPathExpr($currentErrorPath, $propertyPath, it.opts.jsonPointers);
-        }
-        if ($isData) {
-          out += ' if (' + ($vSchema) + ' && !Array.isArray(' + ($vSchema) + ')) {  var err =   '; /* istanbul ignore else */
-          if (it.createErrors !== false) {
-            out += ' { keyword: \'' + ('required') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { missingProperty: \'' + ($missingProperty) + '\' } ';
-            if (it.opts.messages !== false) {
-              out += ' , message: \'';
-              if (it.opts._errorDataPathProperty) {
-                out += 'is a required property';
-              } else {
-                out += 'should have required property \\\'' + ($missingProperty) + '\\\'';
-              }
-              out += '\' ';
-            }
-            if (it.opts.verbose) {
-              out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-            }
-            out += ' } ';
-          } else {
-            out += ' {} ';
-          }
-          out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; } else if (' + ($vSchema) + ' !== undefined) { ';
-        }
-        out += ' for (var ' + ($i) + ' = 0; ' + ($i) + ' < ' + ($vSchema) + '.length; ' + ($i) + '++) { if (' + ($data) + '[' + ($vSchema) + '[' + ($i) + ']] === undefined ';
-        if ($ownProperties) {
-          out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', ' + ($vSchema) + '[' + ($i) + ']) ';
-        }
-        out += ') {  var err =   '; /* istanbul ignore else */
-        if (it.createErrors !== false) {
-          out += ' { keyword: \'' + ('required') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { missingProperty: \'' + ($missingProperty) + '\' } ';
-          if (it.opts.messages !== false) {
-            out += ' , message: \'';
-            if (it.opts._errorDataPathProperty) {
-              out += 'is a required property';
-            } else {
-              out += 'should have required property \\\'' + ($missingProperty) + '\\\'';
-            }
-            out += '\' ';
-          }
-          if (it.opts.verbose) {
-            out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-          }
-          out += ' } ';
-        } else {
-          out += ' {} ';
-        }
-        out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; } } ';
-        if ($isData) {
-          out += '  }  ';
-        }
-      } else {
-        var arr3 = $required;
-        if (arr3) {
-          var $propertyKey, i3 = -1,
-            l3 = arr3.length - 1;
-          while (i3 < l3) {
-            $propertyKey = arr3[i3 += 1];
-            var $prop = it.util.getProperty($propertyKey),
-              $missingProperty = it.util.escapeQuotes($propertyKey),
-              $useData = $data + $prop;
-            if (it.opts._errorDataPathProperty) {
-              it.errorPath = it.util.getPath($currentErrorPath, $propertyKey, it.opts.jsonPointers);
-            }
-            out += ' if ( ' + ($useData) + ' === undefined ';
-            if ($ownProperties) {
-              out += ' || ! Object.prototype.hasOwnProperty.call(' + ($data) + ', \'' + (it.util.escapeQuotes($propertyKey)) + '\') ';
-            }
-            out += ') {  var err =   '; /* istanbul ignore else */
-            if (it.createErrors !== false) {
-              out += ' { keyword: \'' + ('required') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { missingProperty: \'' + ($missingProperty) + '\' } ';
-              if (it.opts.messages !== false) {
-                out += ' , message: \'';
-                if (it.opts._errorDataPathProperty) {
-                  out += 'is a required property';
-                } else {
-                  out += 'should have required property \\\'' + ($missingProperty) + '\\\'';
-                }
-                out += '\' ';
-              }
-              if (it.opts.verbose) {
-                out += ' , schema: validate.schema' + ($schemaPath) + ' , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-              }
-              out += ' } ';
-            } else {
-              out += ' {} ';
-            }
-            out += ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; } ';
-          }
-        }
-      }
-    }
-    it.errorPath = $currentErrorPath;
-  } else if ($breakOnError) {
-    out += ' if (true) {';
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 498 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function generate_uniqueItems(it, $keyword, $ruleType) {
-  var out = ' ';
-  var $lvl = it.level;
-  var $dataLvl = it.dataLevel;
-  var $schema = it.schema[$keyword];
-  var $schemaPath = it.schemaPath + it.util.getProperty($keyword);
-  var $errSchemaPath = it.errSchemaPath + '/' + $keyword;
-  var $breakOnError = !it.opts.allErrors;
-  var $data = 'data' + ($dataLvl || '');
-  var $valid = 'valid' + $lvl;
-  var $isData = it.opts.$data && $schema && $schema.$data,
-    $schemaValue;
-  if ($isData) {
-    out += ' var schema' + ($lvl) + ' = ' + (it.util.getData($schema.$data, $dataLvl, it.dataPathArr)) + '; ';
-    $schemaValue = 'schema' + $lvl;
-  } else {
-    $schemaValue = $schema;
-  }
-  if (($schema || $isData) && it.opts.uniqueItems !== false) {
-    if ($isData) {
-      out += ' var ' + ($valid) + '; if (' + ($schemaValue) + ' === false || ' + ($schemaValue) + ' === undefined) ' + ($valid) + ' = true; else if (typeof ' + ($schemaValue) + ' != \'boolean\') ' + ($valid) + ' = false; else { ';
-    }
-    out += ' var ' + ($valid) + ' = true; if (' + ($data) + '.length > 1) { var i = ' + ($data) + '.length, j; outer: for (;i--;) { for (j = i; j--;) { if (equal(' + ($data) + '[i], ' + ($data) + '[j])) { ' + ($valid) + ' = false; break outer; } } } } ';
-    if ($isData) {
-      out += '  }  ';
-    }
-    out += ' if (!' + ($valid) + ') {   ';
-    var $$outStack = $$outStack || [];
-    $$outStack.push(out);
-    out = ''; /* istanbul ignore else */
-    if (it.createErrors !== false) {
-      out += ' { keyword: \'' + ('uniqueItems') + '\' , dataPath: (dataPath || \'\') + ' + (it.errorPath) + ' , schemaPath: ' + (it.util.toQuotedString($errSchemaPath)) + ' , params: { i: i, j: j } ';
-      if (it.opts.messages !== false) {
-        out += ' , message: \'should NOT have duplicate items (items ## \' + j + \' and \' + i + \' are identical)\' ';
-      }
-      if (it.opts.verbose) {
-        out += ' , schema:  ';
-        if ($isData) {
-          out += 'validate.schema' + ($schemaPath);
-        } else {
-          out += '' + ($schema);
-        }
-        out += '         , parentSchema: validate.schema' + (it.schemaPath) + ' , data: ' + ($data) + ' ';
-      }
-      out += ' } ';
-    } else {
-      out += ' {} ';
-    }
-    var __err = out;
-    out = $$outStack.pop();
-    if (!it.compositeRule && $breakOnError) { /* istanbul ignore if */
-      if (it.async) {
-        out += ' throw new ValidationError([' + (__err) + ']); ';
-      } else {
-        out += ' validate.errors = [' + (__err) + ']; return false; ';
-      }
-    } else {
-      out += ' var err = ' + (__err) + ';  if (vErrors === null) vErrors = [err]; else vErrors.push(err); errors++; ';
-    }
-    out += ' } ';
-    if ($breakOnError) {
-      out += ' else { ';
-    }
-  } else {
-    if ($breakOnError) {
-      out += ' if (true) { ';
-    }
-  }
-  return out;
-}
-
-
-/***/ }),
-/* 499 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var IDENTIFIER = /^[a-z_$][a-z0-9_$-]*$/i;
-var customRuleCode = __webpack_require__(485);
-
-module.exports = {
-  add: addKeyword,
-  get: getKeyword,
-  remove: removeKeyword
-};
-
-/**
- * Define custom keyword
- * @this  Ajv
- * @param {String} keyword custom keyword, should be unique (including different from all standard, custom and macro keywords).
- * @param {Object} definition keyword definition object with properties `type` (type(s) which the keyword applies to), `validate` or `compile`.
- * @return {Ajv} this for method chaining
- */
-function addKeyword(keyword, definition) {
-  /* jshint validthis: true */
-  /* eslint no-shadow: 0 */
-  var RULES = this.RULES;
-
-  if (RULES.keywords[keyword])
-    throw new Error('Keyword ' + keyword + ' is already defined');
-
-  if (!IDENTIFIER.test(keyword))
-    throw new Error('Keyword ' + keyword + ' is not a valid identifier');
-
-  if (definition) {
-    if (definition.macro && definition.valid !== undefined)
-      throw new Error('"valid" option cannot be used with macro keywords');
-
-    var dataType = definition.type;
-    if (Array.isArray(dataType)) {
-      var i, len = dataType.length;
-      for (i=0; i<len; i++) checkDataType(dataType[i]);
-      for (i=0; i<len; i++) _addRule(keyword, dataType[i], definition);
-    } else {
-      if (dataType) checkDataType(dataType);
-      _addRule(keyword, dataType, definition);
-    }
-
-    var $data = definition.$data === true && this._opts.$data;
-    if ($data && !definition.validate)
-      throw new Error('$data support: "validate" function is not defined');
-
-    var metaSchema = definition.metaSchema;
-    if (metaSchema) {
-      if ($data) {
-        metaSchema = {
-          anyOf: [
-            metaSchema,
-            { '$ref': 'https://raw.githubusercontent.com/epoberezkin/ajv/master/lib/refs/$data.json#' }
-          ]
-        };
-      }
-      definition.validateSchema = this.compile(metaSchema, true);
-    }
-  }
-
-  RULES.keywords[keyword] = RULES.all[keyword] = true;
-
-
-  function _addRule(keyword, dataType, definition) {
-    var ruleGroup;
-    for (var i=0; i<RULES.length; i++) {
-      var rg = RULES[i];
-      if (rg.type == dataType) {
-        ruleGroup = rg;
-        break;
-      }
-    }
-
-    if (!ruleGroup) {
-      ruleGroup = { type: dataType, rules: [] };
-      RULES.push(ruleGroup);
-    }
-
-    var rule = {
-      keyword: keyword,
-      definition: definition,
-      custom: true,
-      code: customRuleCode,
-      implements: definition.implements
-    };
-    ruleGroup.rules.push(rule);
-    RULES.custom[keyword] = rule;
-  }
-
-
-  function checkDataType(dataType) {
-    if (!RULES.types[dataType]) throw new Error('Unknown type ' + dataType);
-  }
-
-  return this;
-}
-
-
-/**
- * Get keyword
- * @this  Ajv
- * @param {String} keyword pre-defined or custom keyword.
- * @return {Object|Boolean} custom keyword definition, `true` if it is a predefined keyword, `false` otherwise.
- */
-function getKeyword(keyword) {
-  /* jshint validthis: true */
-  var rule = this.RULES.custom[keyword];
-  return rule ? rule.definition : this.RULES.keywords[keyword] || false;
-}
-
-
-/**
- * Remove keyword
- * @this  Ajv
- * @param {String} keyword pre-defined or custom keyword.
- * @return {Ajv} this for method chaining
- */
-function removeKeyword(keyword) {
-  /* jshint validthis: true */
-  var RULES = this.RULES;
-  delete RULES.keywords[keyword];
-  delete RULES.all[keyword];
-  delete RULES.custom[keyword];
-  for (var i=0; i<RULES.length; i++) {
-    var rules = RULES[i].rules;
-    for (var j=0; j<rules.length; j++) {
-      if (rules[j].keyword == keyword) {
-        rules.splice(j, 1);
-        break;
-      }
-    }
-  }
-  return this;
-}
-
-
-/***/ }),
-/* 500 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var META_SCHEMA_ID = 'http://json-schema.org/draft-06/schema';
-
-module.exports = function (ajv) {
-  var defaultMeta = ajv._opts.defaultMeta;
-  var metaSchemaRef = typeof defaultMeta == 'string'
-                      ? { $ref: defaultMeta }
-                      : ajv.getSchema(META_SCHEMA_ID)
-                        ? { $ref: META_SCHEMA_ID }
-                        : {};
-
-  ajv.addKeyword('patternGroups', {
-    // implemented in properties.jst
-    metaSchema: {
-      type: 'object',
-      additionalProperties: {
-        type: 'object',
-        required: [ 'schema' ],
-        properties: {
-          maximum: {
-            type: 'integer',
-            minimum: 0
-          },
-          minimum: {
-            type: 'integer',
-            minimum: 0
-          },
-          schema: metaSchemaRef
-        },
-        additionalProperties: false
-      }
-    }
-  });
-  ajv.RULES.all.properties.implements.push('patternGroups');
-};
-
-
-/***/ }),
-/* 501 */
-/***/ (function(module, exports) {
-
-module.exports = {"$schema":"http://json-schema.org/draft-06/schema#","$id":"https://raw.githubusercontent.com/epoberezkin/ajv/master/lib/refs/$data.json#","description":"Meta-schema for $data reference (JSON-schema extension proposal)","type":"object","required":["$data"],"properties":{"$data":{"type":"string","anyOf":[{"format":"relative-json-pointer"},{"format":"json-pointer"}]}},"additionalProperties":false}
-
-/***/ }),
-/* 502 */
-/***/ (function(module, exports) {
-
-module.exports = {"$schema":"http://json-schema.org/draft-06/schema#","$id":"http://json-schema.org/draft-06/schema#","title":"Core schema meta-schema","definitions":{"schemaArray":{"type":"array","minItems":1,"items":{"$ref":"#"}},"nonNegativeInteger":{"type":"integer","minimum":0},"nonNegativeIntegerDefault0":{"allOf":[{"$ref":"#/definitions/nonNegativeInteger"},{"default":0}]},"simpleTypes":{"enum":["array","boolean","integer","null","number","object","string"]},"stringArray":{"type":"array","items":{"type":"string"},"uniqueItems":true,"default":[]}},"type":["object","boolean"],"properties":{"$id":{"type":"string","format":"uri-reference"},"$schema":{"type":"string","format":"uri"},"$ref":{"type":"string","format":"uri-reference"},"title":{"type":"string"},"description":{"type":"string"},"default":{},"examples":{"type":"array","items":{}},"multipleOf":{"type":"number","exclusiveMinimum":0},"maximum":{"type":"number"},"exclusiveMaximum":{"type":"number"},"minimum":{"type":"number"},"exclusiveMinimum":{"type":"number"},"maxLength":{"$ref":"#/definitions/nonNegativeInteger"},"minLength":{"$ref":"#/definitions/nonNegativeIntegerDefault0"},"pattern":{"type":"string","format":"regex"},"additionalItems":{"$ref":"#"},"items":{"anyOf":[{"$ref":"#"},{"$ref":"#/definitions/schemaArray"}],"default":{}},"maxItems":{"$ref":"#/definitions/nonNegativeInteger"},"minItems":{"$ref":"#/definitions/nonNegativeIntegerDefault0"},"uniqueItems":{"type":"boolean","default":false},"contains":{"$ref":"#"},"maxProperties":{"$ref":"#/definitions/nonNegativeInteger"},"minProperties":{"$ref":"#/definitions/nonNegativeIntegerDefault0"},"required":{"$ref":"#/definitions/stringArray"},"additionalProperties":{"$ref":"#"},"definitions":{"type":"object","additionalProperties":{"$ref":"#"},"default":{}},"properties":{"type":"object","additionalProperties":{"$ref":"#"},"default":{}},"patternProperties":{"type":"object","additionalProperties":{"$ref":"#"},"default":{}},"dependencies":{"type":"object","additionalProperties":{"anyOf":[{"$ref":"#"},{"$ref":"#/definitions/stringArray"}]}},"propertyNames":{"$ref":"#"},"const":{},"enum":{"type":"array","minItems":1,"uniqueItems":true},"type":{"anyOf":[{"$ref":"#/definitions/simpleTypes"},{"type":"array","items":{"$ref":"#/definitions/simpleTypes"},"minItems":1,"uniqueItems":true}]},"format":{"type":"string"},"allOf":{"$ref":"#/definitions/schemaArray"},"anyOf":{"$ref":"#/definitions/schemaArray"},"oneOf":{"$ref":"#/definitions/schemaArray"},"not":{"$ref":"#"}},"default":{}}
-
-/***/ }),
-/* 503 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var traverse = module.exports = function (schema, opts, cb) {
-  if (typeof opts == 'function') {
-    cb = opts;
-    opts = {};
-  }
-  _traverse(opts, cb, schema, '', schema);
-};
-
-
-traverse.keywords = {
-  additionalItems: true,
-  items: true,
-  contains: true,
-  additionalProperties: true,
-  propertyNames: true,
-  not: true
-};
-
-traverse.arrayKeywords = {
-  items: true,
-  allOf: true,
-  anyOf: true,
-  oneOf: true
-};
-
-traverse.propsKeywords = {
-  definitions: true,
-  properties: true,
-  patternProperties: true,
-  dependencies: true
-};
-
-traverse.skipKeywords = {
-  enum: true,
-  const: true,
-  required: true,
-  maximum: true,
-  minimum: true,
-  exclusiveMaximum: true,
-  exclusiveMinimum: true,
-  multipleOf: true,
-  maxLength: true,
-  minLength: true,
-  pattern: true,
-  format: true,
-  maxItems: true,
-  minItems: true,
-  uniqueItems: true,
-  maxProperties: true,
-  minProperties: true
-};
-
-
-function _traverse(opts, cb, schema, jsonPtr, rootSchema, parentJsonPtr, parentKeyword, parentSchema, keyIndex) {
-  if (schema && typeof schema == 'object' && !Array.isArray(schema)) {
-    cb(schema, jsonPtr, rootSchema, parentJsonPtr, parentKeyword, parentSchema, keyIndex);
-    for (var key in schema) {
-      var sch = schema[key];
-      if (Array.isArray(sch)) {
-        if (key in traverse.arrayKeywords) {
-          for (var i=0; i<sch.length; i++)
-            _traverse(opts, cb, sch[i], jsonPtr + '/' + key + '/' + i, rootSchema, jsonPtr, key, schema, i);
-        }
-      } else if (key in traverse.propsKeywords) {
-        if (sch && typeof sch == 'object') {
-          for (var prop in sch)
-            _traverse(opts, cb, sch[prop], jsonPtr + '/' + key + '/' + escapeJsonPtr(prop), rootSchema, jsonPtr, key, schema, prop);
-        }
-      } else if (key in traverse.keywords || (opts.allKeys && !(key in traverse.skipKeywords))) {
-        _traverse(opts, cb, sch, jsonPtr + '/' + key, rootSchema, jsonPtr, key, schema);
-      }
-    }
-  }
-}
-
-
-function escapeJsonPtr(str) {
-  return str.replace(/~/g, '~0').replace(/\//g, '~1');
-}
-
-
-/***/ }),
-/* 504 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const x = module.exports;
-const ESC = '\u001B[';
-const OSC = '\u001B]';
-const BEL = '\u0007';
-const SEP = ';';
-const isTerminalApp = process.env.TERM_PROGRAM === 'Apple_Terminal';
-
-x.cursorTo = (x, y) => {
-	if (typeof x !== 'number') {
-		throw new TypeError('The `x` argument is required');
-	}
-
-	if (typeof y !== 'number') {
-		return ESC + (x + 1) + 'G';
-	}
-
-	return ESC + (y + 1) + ';' + (x + 1) + 'H';
-};
-
-x.cursorMove = (x, y) => {
-	if (typeof x !== 'number') {
-		throw new TypeError('The `x` argument is required');
-	}
-
-	let ret = '';
-
-	if (x < 0) {
-		ret += ESC + (-x) + 'D';
-	} else if (x > 0) {
-		ret += ESC + x + 'C';
-	}
-
-	if (y < 0) {
-		ret += ESC + (-y) + 'A';
-	} else if (y > 0) {
-		ret += ESC + y + 'B';
-	}
-
-	return ret;
-};
-
-x.cursorUp = count => ESC + (typeof count === 'number' ? count : 1) + 'A';
-x.cursorDown = count => ESC + (typeof count === 'number' ? count : 1) + 'B';
-x.cursorForward = count => ESC + (typeof count === 'number' ? count : 1) + 'C';
-x.cursorBackward = count => ESC + (typeof count === 'number' ? count : 1) + 'D';
-
-x.cursorLeft = ESC + 'G';
-x.cursorSavePosition = ESC + (isTerminalApp ? '7' : 's');
-x.cursorRestorePosition = ESC + (isTerminalApp ? '8' : 'u');
-x.cursorGetPosition = ESC + '6n';
-x.cursorNextLine = ESC + 'E';
-x.cursorPrevLine = ESC + 'F';
-x.cursorHide = ESC + '?25l';
-x.cursorShow = ESC + '?25h';
-
-x.eraseLines = count => {
-	let clear = '';
-
-	for (let i = 0; i < count; i++) {
-		clear += x.eraseLine + (i < count - 1 ? x.cursorUp() : '');
-	}
-
-	if (count) {
-		clear += x.cursorLeft;
-	}
-
-	return clear;
-};
-
-x.eraseEndLine = ESC + 'K';
-x.eraseStartLine = ESC + '1K';
-x.eraseLine = ESC + '2K';
-x.eraseDown = ESC + 'J';
-x.eraseUp = ESC + '1J';
-x.eraseScreen = ESC + '2J';
-x.scrollUp = ESC + 'S';
-x.scrollDown = ESC + 'T';
-
-x.clearScreen = '\u001Bc';
-x.beep = BEL;
-
-x.link = (text, url) => {
-	return [
-		OSC,
-		'8',
-		SEP,
-		SEP,
-		url,
-		BEL,
-		text,
-		OSC,
-		'8',
-		SEP,
-		SEP,
-		BEL
-	].join('');
-};
-
-x.image = (buf, opts) => {
-	opts = opts || {};
-
-	let ret = OSC + '1337;File=inline=1';
-
-	if (opts.width) {
-		ret += `;width=${opts.width}`;
-	}
-
-	if (opts.height) {
-		ret += `;height=${opts.height}`;
-	}
-
-	if (opts.preserveAspectRatio === false) {
-		ret += ';preserveAspectRatio=0';
-	}
-
-	return ret + ':' + buf.toString('base64') + BEL;
-};
-
-x.iTerm = {};
-
-x.iTerm.setCwd = cwd => OSC + '50;CurrentDir=' + (cwd || process.cwd()) + BEL;
-
-
-/***/ }),
-/* 505 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function () {
-	return /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9A-PRZcf-nqry=><]/g;
-};
-
-
-/***/ }),
-/* 506 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* WEBPACK VAR INJECTION */(function(module) {
-const colorConvert = __webpack_require__(608);
-
-const wrapAnsi16 = (fn, offset) => function () {
-	const code = fn.apply(colorConvert, arguments);
-	return `\u001B[${code + offset}m`;
-};
-
-const wrapAnsi256 = (fn, offset) => function () {
-	const code = fn.apply(colorConvert, arguments);
-	return `\u001B[${38 + offset};5;${code}m`;
-};
-
-const wrapAnsi16m = (fn, offset) => function () {
-	const rgb = fn.apply(colorConvert, arguments);
-	return `\u001B[${38 + offset};2;${rgb[0]};${rgb[1]};${rgb[2]}m`;
-};
-
-function assembleStyles() {
-	const codes = new Map();
-	const styles = {
-		modifier: {
-			reset: [0, 0],
-			// 21 isn't widely supported and 22 does the same thing
-			bold: [1, 22],
-			dim: [2, 22],
-			italic: [3, 23],
-			underline: [4, 24],
-			inverse: [7, 27],
-			hidden: [8, 28],
-			strikethrough: [9, 29]
-		},
-		color: {
-			black: [30, 39],
-			red: [31, 39],
-			green: [32, 39],
-			yellow: [33, 39],
-			blue: [34, 39],
-			magenta: [35, 39],
-			cyan: [36, 39],
-			white: [37, 39],
-			gray: [90, 39],
-
-			// Bright color
-			redBright: [91, 39],
-			greenBright: [92, 39],
-			yellowBright: [93, 39],
-			blueBright: [94, 39],
-			magentaBright: [95, 39],
-			cyanBright: [96, 39],
-			whiteBright: [97, 39]
-		},
-		bgColor: {
-			bgBlack: [40, 49],
-			bgRed: [41, 49],
-			bgGreen: [42, 49],
-			bgYellow: [43, 49],
-			bgBlue: [44, 49],
-			bgMagenta: [45, 49],
-			bgCyan: [46, 49],
-			bgWhite: [47, 49],
-
-			// Bright color
-			bgBlackBright: [100, 49],
-			bgRedBright: [101, 49],
-			bgGreenBright: [102, 49],
-			bgYellowBright: [103, 49],
-			bgBlueBright: [104, 49],
-			bgMagentaBright: [105, 49],
-			bgCyanBright: [106, 49],
-			bgWhiteBright: [107, 49]
-		}
-	};
-
-	// Fix humans
-	styles.color.grey = styles.color.gray;
-
-	for (const groupName of Object.keys(styles)) {
-		const group = styles[groupName];
-
-		for (const styleName of Object.keys(group)) {
-			const style = group[styleName];
-
-			styles[styleName] = {
-				open: `\u001B[${style[0]}m`,
-				close: `\u001B[${style[1]}m`
-			};
-
-			group[styleName] = styles[styleName];
-
-			codes.set(style[0], style[1]);
-		}
-
-		Object.defineProperty(styles, groupName, {
-			value: group,
-			enumerable: false
-		});
-
-		Object.defineProperty(styles, 'codes', {
-			value: codes,
-			enumerable: false
-		});
-	}
-
-	const ansi2ansi = n => n;
-	const rgb2rgb = (r, g, b) => [r, g, b];
-
-	styles.color.close = '\u001B[39m';
-	styles.bgColor.close = '\u001B[49m';
-
-	styles.color.ansi = {
-		ansi: wrapAnsi16(ansi2ansi, 0)
-	};
-	styles.color.ansi256 = {
-		ansi256: wrapAnsi256(ansi2ansi, 0)
-	};
-	styles.color.ansi16m = {
-		rgb: wrapAnsi16m(rgb2rgb, 0)
-	};
-
-	styles.bgColor.ansi = {
-		ansi: wrapAnsi16(ansi2ansi, 10)
-	};
-	styles.bgColor.ansi256 = {
-		ansi256: wrapAnsi256(ansi2ansi, 10)
-	};
-	styles.bgColor.ansi16m = {
-		rgb: wrapAnsi16m(rgb2rgb, 10)
-	};
-
-	for (let key of Object.keys(colorConvert)) {
-		if (typeof colorConvert[key] !== 'object') {
-			continue;
-		}
-
-		const suite = colorConvert[key];
-
-		if (key === 'ansi16') {
-			key = 'ansi';
-		}
-
-		if ('ansi16' in suite) {
-			styles.color.ansi[key] = wrapAnsi16(suite.ansi16, 0);
-			styles.bgColor.ansi[key] = wrapAnsi16(suite.ansi16, 10);
-		}
-
-		if ('ansi256' in suite) {
-			styles.color.ansi256[key] = wrapAnsi256(suite.ansi256, 0);
-			styles.bgColor.ansi256[key] = wrapAnsi256(suite.ansi256, 10);
-		}
-
-		if ('rgb' in suite) {
-			styles.color.ansi16m[key] = wrapAnsi16m(suite.rgb, 0);
-			styles.bgColor.ansi16m[key] = wrapAnsi16m(suite.rgb, 10);
-		}
-	}
-
-	return styles;
-}
-
-// Make the export immutable
-Object.defineProperty(module, 'exports', {
-	enumerable: true,
-	get: assembleStyles
-});
-
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(163)(module)))
-
-/***/ }),
-/* 507 */
-/***/ (function(module, exports) {
-
-function webpackEmptyContext(req) {
-	throw new Error("Cannot find module '" + req + "'.");
-}
-webpackEmptyContext.keys = function() { return []; };
-webpackEmptyContext.resolve = webpackEmptyContext;
-module.exports = webpackEmptyContext;
-webpackEmptyContext.id = 507;
-
-/***/ }),
-/* 508 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-    // global key for user preferred registration
-var REGISTRATION_KEY = '@@any-promise/REGISTRATION',
-    // Prior registration (preferred or detected)
-    registered = null
-
-/**
- * Registers the given implementation.  An implementation must
- * be registered prior to any call to `require("any-promise")`,
- * typically on application load.
- *
- * If called with no arguments, will return registration in
- * following priority:
- *
- * For Node.js:
- *
- * 1. Previous registration
- * 2. global.Promise if node.js version >= 0.12
- * 3. Auto detected promise based on first sucessful require of
- *    known promise libraries. Note this is a last resort, as the
- *    loaded library is non-deterministic. node.js >= 0.12 will
- *    always use global.Promise over this priority list.
- * 4. Throws error.
- *
- * For Browser:
- *
- * 1. Previous registration
- * 2. window.Promise
- * 3. Throws error.
- *
- * Options:
- *
- * Promise: Desired Promise constructor
- * global: Boolean - Should the registration be cached in a global variable to
- * allow cross dependency/bundle registration?  (default true)
- */
-module.exports = function(root, loadImplementation){
-  return function register(implementation, opts){
-    implementation = implementation || null
-    opts = opts || {}
-    // global registration unless explicitly  {global: false} in options (default true)
-    var registerGlobal = opts.global !== false;
-
-    // load any previous global registration
-    if(registered === null && registerGlobal){
-      registered = root[REGISTRATION_KEY] || null
-    }
-
-    if(registered !== null
-        && implementation !== null
-        && registered.implementation !== implementation){
-      // Throw error if attempting to redefine implementation
-      throw new Error('any-promise already defined as "'+registered.implementation+
-        '".  You can only register an implementation before the first '+
-        ' call to require("any-promise") and an implementation cannot be changed')
-    }
-
-    if(registered === null){
-      // use provided implementation
-      if(implementation !== null && typeof opts.Promise !== 'undefined'){
-        registered = {
-          Promise: opts.Promise,
-          implementation: implementation
-        }
-      } else {
-        // require implementation if implementation is specified but not provided
-        registered = loadImplementation(implementation)
-      }
-
-      if(registerGlobal){
-        // register preference globally in case multiple installations
-        root[REGISTRATION_KEY] = registered
-      }
-    }
-
-    return registered
-  }
-}
-
-
-/***/ }),
-/* 509 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = __webpack_require__(508)(global, loadImplementation);
-
-/**
- * Node.js version of loadImplementation.
- *
- * Requires the given implementation and returns the registration
- * containing {Promise, implementation}
- *
- * If implementation is undefined or global.Promise, loads it
- * Otherwise uses require
- */
-function loadImplementation(implementation){
-  var impl = null
-
-  if(shouldPreferGlobalPromise(implementation)){
-    // if no implementation or env specified use global.Promise
-    impl = {
-      Promise: global.Promise,
-      implementation: 'global.Promise'
-    }
-  } else if(implementation){
-    // if implementation specified, require it
-    var lib = !(function webpackMissingModule() { var e = new Error("Cannot find module \".\""); e.code = 'MODULE_NOT_FOUND'; throw e; }())
-    impl = {
-      Promise: lib.Promise || lib,
-      implementation: implementation
-    }
-  } else {
-    // try to auto detect implementation. This is non-deterministic
-    // and should prefer other branches, but this is our last chance
-    // to load something without throwing error
-    impl = tryAutoDetect()
-  }
-
-  if(impl === null){
-    throw new Error('Cannot find any-promise implementation nor'+
-      ' global.Promise. You must install polyfill or call'+
-      ' require("any-promise/register") with your preferred'+
-      ' implementation, e.g. require("any-promise/register/bluebird")'+
-      ' on application load prior to any require("any-promise").')
-  }
-
-  return impl
-}
-
-/**
- * Determines if the global.Promise should be preferred if an implementation
- * has not been registered.
- */
-function shouldPreferGlobalPromise(implementation){
-  if(implementation){
-    return implementation === 'global.Promise'
-  } else if(typeof global.Promise !== 'undefined'){
-    // Load global promise if implementation not specified
-    // Versions < 0.11 did not have global Promise
-    // Do not use for version < 0.12 as version 0.11 contained buggy versions
-    var version = (/v(\d+)\.(\d+)\.(\d+)/).exec(process.version)
-    return !(version && +version[1] == 0 && +version[2] < 12)
-  }
-
-  // do not have global.Promise or another implementation was specified
-  return false
-}
-
-/**
- * Look for common libs as last resort there is no guarantee that
- * this will return a desired implementation or even be deterministic.
- * The priority is also nearly arbitrary. We are only doing this
- * for older versions of Node.js <0.12 that do not have a reasonable
- * global.Promise implementation and we the user has not registered
- * the preference. This preserves the behavior of any-promise <= 0.1
- * and may be deprecated or removed in the future
- */
-function tryAutoDetect(){
-  var libs = [
-      "es6-promise",
-      "promise",
-      "native-promise-only",
-      "bluebird",
-      "rsvp",
-      "when",
-      "q",
-      "pinkie",
-      "lie",
-      "vow"]
-  var i = 0, len = libs.length
-  for(; i < len; i++){
-    try {
-      return loadImplementation(libs[i])
-    } catch(e){}
-  }
-  return null
-}
-
-
-/***/ }),
-/* 510 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * arr-flatten <https://github.com/jonschlinkert/arr-flatten>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-module.exports = function (arr) {
-  return flat(arr, []);
-};
-
-function flat(arr, res) {
-  var i = 0, cur;
-  var len = arr.length;
-  for (; i < len; i++) {
-    cur = arr[i];
-    Array.isArray(cur) ? flat(cur, res) : res.push(cur);
-  }
-  return res;
-}
-
-
-/***/ }),
-/* 511 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function (arr, predicate, ctx) {
-	if (typeof Array.prototype.findIndex === 'function') {
-		return arr.findIndex(predicate, ctx);
-	}
-
-	if (typeof predicate !== 'function') {
-		throw new TypeError('predicate must be a function');
-	}
-
-	var list = Object(arr);
-	var len = list.length;
-
-	if (len === 0) {
-		return -1;
-	}
-
-	for (var i = 0; i < len; i++) {
-		if (predicate.call(ctx, list[i], i, list)) {
-			return i;
-		}
-	}
-
-	return -1;
-};
-
-
-/***/ }),
-/* 512 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var rawAsap = __webpack_require__(513);
-var freeTasks = [];
-
-/**
- * Calls a task as soon as possible after returning, in its own event, with
- * priority over IO events. An exception thrown in a task can be handled by
- * `process.on("uncaughtException") or `domain.on("error")`, but will otherwise
- * crash the process. If the error is handled, all subsequent tasks will
- * resume.
- *
- * @param {{call}} task A callable object, typically a function that takes no
- * arguments.
- */
-module.exports = asap;
-function asap(task) {
-    var rawTask;
-    if (freeTasks.length) {
-        rawTask = freeTasks.pop();
-    } else {
-        rawTask = new RawTask();
-    }
-    rawTask.task = task;
-    rawTask.domain = process.domain;
-    rawAsap(rawTask);
-}
-
-function RawTask() {
-    this.task = null;
-    this.domain = null;
-}
-
-RawTask.prototype.call = function () {
-    if (this.domain) {
-        this.domain.enter();
-    }
-    var threw = true;
-    try {
-        this.task.call();
-        threw = false;
-        // If the task throws an exception (presumably) Node.js restores the
-        // domain stack for the next event.
-        if (this.domain) {
-            this.domain.exit();
-        }
-    } finally {
-        // We use try/finally and a threw flag to avoid messing up stack traces
-        // when we catch and release errors.
-        if (threw) {
-            // In Node.js, uncaught exceptions are considered fatal errors.
-            // Re-throw them to interrupt flushing!
-            // Ensure that flushing continues if an uncaught exception is
-            // suppressed listening process.on("uncaughtException") or
-            // domain.on("error").
-            rawAsap.requestFlush();
-        }
-        // If the task threw an error, we do not want to exit the domain here.
-        // Exiting the domain would prevent the domain from catching the error.
-        this.task = null;
-        this.domain = null;
-        freeTasks.push(this);
-    }
-};
-
-
-
-/***/ }),
-/* 513 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var domain; // The domain module is executed on demand
-var hasSetImmediate = typeof setImmediate === "function";
-
-// Use the fastest means possible to execute a task in its own turn, with
-// priority over other events including network IO events in Node.js.
-//
-// An exception thrown by a task will permanently interrupt the processing of
-// subsequent tasks. The higher level `asap` function ensures that if an
-// exception is thrown by a task, that the task queue will continue flushing as
-// soon as possible, but if you use `rawAsap` directly, you are responsible to
-// either ensure that no exceptions are thrown from your task, or to manually
-// call `rawAsap.requestFlush` if an exception is thrown.
-module.exports = rawAsap;
-function rawAsap(task) {
-    if (!queue.length) {
-        requestFlush();
-        flushing = true;
-    }
-    // Avoids a function call
-    queue[queue.length] = task;
-}
-
-var queue = [];
-// Once a flush has been requested, no further calls to `requestFlush` are
-// necessary until the next `flush` completes.
-var flushing = false;
-// The position of the next task to execute in the task queue. This is
-// preserved between calls to `flush` so that it can be resumed if
-// a task throws an exception.
-var index = 0;
-// If a task schedules additional tasks recursively, the task queue can grow
-// unbounded. To prevent memory excaustion, the task queue will periodically
-// truncate already-completed tasks.
-var capacity = 1024;
-
-// The flush function processes all tasks that have been scheduled with
-// `rawAsap` unless and until one of those tasks throws an exception.
-// If a task throws an exception, `flush` ensures that its state will remain
-// consistent and will resume where it left off when called again.
-// However, `flush` does not make any arrangements to be called again if an
-// exception is thrown.
-function flush() {
-    while (index < queue.length) {
-        var currentIndex = index;
-        // Advance the index before calling the task. This ensures that we will
-        // begin flushing on the next task the task throws an error.
-        index = index + 1;
-        queue[currentIndex].call();
-        // Prevent leaking memory for long chains of recursive calls to `asap`.
-        // If we call `asap` within tasks scheduled by `asap`, the queue will
-        // grow, but to avoid an O(n) walk for every task we execute, we don't
-        // shift tasks off the queue after they have been executed.
-        // Instead, we periodically shift 1024 tasks off the queue.
-        if (index > capacity) {
-            // Manually shift all values starting at the index back to the
-            // beginning of the queue.
-            for (var scan = 0, newLength = queue.length - index; scan < newLength; scan++) {
-                queue[scan] = queue[scan + index];
-            }
-            queue.length -= index;
-            index = 0;
-        }
-    }
-    queue.length = 0;
-    index = 0;
-    flushing = false;
-}
-
-rawAsap.requestFlush = requestFlush;
-function requestFlush() {
-    // Ensure flushing is not bound to any domain.
-    // It is not sufficient to exit the domain, because domains exist on a stack.
-    // To execute code outside of any domain, the following dance is necessary.
-    var parentDomain = process.domain;
-    if (parentDomain) {
-        if (!domain) {
-            // Lazy execute the domain module.
-            // Only employed if the user elects to use domains.
-            domain = __webpack_require__(965);
-        }
-        domain.active = process.domain = null;
-    }
-
-    // `setImmediate` is slower that `process.nextTick`, but `process.nextTick`
-    // cannot handle recursion.
-    // `requestFlush` will only be called recursively from `asap.js`, to resume
-    // flushing after an error is thrown into a domain.
-    // Conveniently, `setImmediate` was introduced in the same version
-    // `process.nextTick` started throwing recursion errors.
-    if (flushing && hasSetImmediate) {
-        setImmediate(flush);
-    } else {
-        process.nextTick(flush);
-    }
-
-    if (parentDomain) {
-        domain.active = process.domain = parentDomain;
-    }
-}
-
-
-/***/ }),
-/* 514 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2011 Mark Cavage <mcavage@gmail.com> All rights reserved.
-
-var errors = __webpack_require__(205);
-var types = __webpack_require__(206);
-
-var Reader = __webpack_require__(515);
-var Writer = __webpack_require__(516);
-
-
-// --- Exports
-
-module.exports = {
-
-  Reader: Reader,
-
-  Writer: Writer
-
-};
-
-for (var t in types) {
-  if (types.hasOwnProperty(t))
-    module.exports[t] = types[t];
-}
-for (var e in errors) {
-  if (errors.hasOwnProperty(e))
-    module.exports[e] = errors[e];
-}
-
-
-/***/ }),
-/* 515 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2011 Mark Cavage <mcavage@gmail.com> All rights reserved.
-
-var assert = __webpack_require__(28);
-var Buffer = __webpack_require__(15).Buffer;
-
-var ASN1 = __webpack_require__(206);
-var errors = __webpack_require__(205);
-
-
-// --- Globals
-
-var newInvalidAsn1Error = errors.newInvalidAsn1Error;
-
-
-
-// --- API
-
-function Reader(data) {
-  if (!data || !Buffer.isBuffer(data))
-    throw new TypeError('data must be a node Buffer');
-
-  this._buf = data;
-  this._size = data.length;
-
-  // These hold the "current" state
-  this._len = 0;
-  this._offset = 0;
-}
-
-Object.defineProperty(Reader.prototype, 'length', {
-  enumerable: true,
-  get: function () { return (this._len); }
-});
-
-Object.defineProperty(Reader.prototype, 'offset', {
-  enumerable: true,
-  get: function () { return (this._offset); }
-});
-
-Object.defineProperty(Reader.prototype, 'remain', {
-  get: function () { return (this._size - this._offset); }
-});
-
-Object.defineProperty(Reader.prototype, 'buffer', {
-  get: function () { return (this._buf.slice(this._offset)); }
-});
-
-
-/**
- * Reads a single byte and advances offset; you can pass in `true` to make this
- * a "peek" operation (i.e., get the byte, but don't advance the offset).
- *
- * @param {Boolean} peek true means don't move offset.
- * @return {Number} the next byte, null if not enough data.
- */
-Reader.prototype.readByte = function (peek) {
-  if (this._size - this._offset < 1)
-    return null;
-
-  var b = this._buf[this._offset] & 0xff;
-
-  if (!peek)
-    this._offset += 1;
-
-  return b;
-};
-
-
-Reader.prototype.peek = function () {
-  return this.readByte(true);
-};
-
-
-/**
- * Reads a (potentially) variable length off the BER buffer.  This call is
- * not really meant to be called directly, as callers have to manipulate
- * the internal buffer afterwards.
- *
- * As a result of this call, you can call `Reader.length`, until the
- * next thing called that does a readLength.
- *
- * @return {Number} the amount of offset to advance the buffer.
- * @throws {InvalidAsn1Error} on bad ASN.1
- */
-Reader.prototype.readLength = function (offset) {
-  if (offset === undefined)
-    offset = this._offset;
-
-  if (offset >= this._size)
-    return null;
-
-  var lenB = this._buf[offset++] & 0xff;
-  if (lenB === null)
-    return null;
-
-  if ((lenB & 0x80) === 0x80) {
-    lenB &= 0x7f;
-
-    if (lenB === 0)
-      throw newInvalidAsn1Error('Indefinite length not supported');
-
-    if (lenB > 4)
-      throw newInvalidAsn1Error('encoding too long');
-
-    if (this._size - offset < lenB)
-      return null;
-
-    this._len = 0;
-    for (var i = 0; i < lenB; i++)
-      this._len = (this._len << 8) + (this._buf[offset++] & 0xff);
-
-  } else {
-    // Wasn't a variable length
-    this._len = lenB;
-  }
-
-  return offset;
-};
-
-
-/**
- * Parses the next sequence in this BER buffer.
- *
- * To get the length of the sequence, call `Reader.length`.
- *
- * @return {Number} the sequence's tag.
- */
-Reader.prototype.readSequence = function (tag) {
-  var seq = this.peek();
-  if (seq === null)
-    return null;
-  if (tag !== undefined && tag !== seq)
-    throw newInvalidAsn1Error('Expected 0x' + tag.toString(16) +
-                              ': got 0x' + seq.toString(16));
-
-  var o = this.readLength(this._offset + 1); // stored in `length`
-  if (o === null)
-    return null;
-
-  this._offset = o;
-  return seq;
-};
-
-
-Reader.prototype.readInt = function () {
-  return this._readTag(ASN1.Integer);
-};
-
-
-Reader.prototype.readBoolean = function () {
-  return (this._readTag(ASN1.Boolean) === 0 ? false : true);
-};
-
-
-Reader.prototype.readEnumeration = function () {
-  return this._readTag(ASN1.Enumeration);
-};
-
-
-Reader.prototype.readString = function (tag, retbuf) {
-  if (!tag)
-    tag = ASN1.OctetString;
-
-  var b = this.peek();
-  if (b === null)
-    return null;
-
-  if (b !== tag)
-    throw newInvalidAsn1Error('Expected 0x' + tag.toString(16) +
-                              ': got 0x' + b.toString(16));
-
-  var o = this.readLength(this._offset + 1); // stored in `length`
-
-  if (o === null)
-    return null;
-
-  if (this.length > this._size - o)
-    return null;
-
-  this._offset = o;
-
-  if (this.length === 0)
-    return retbuf ? Buffer.alloc(0) : '';
-
-  var str = this._buf.slice(this._offset, this._offset + this.length);
-  this._offset += this.length;
-
-  return retbuf ? str : str.toString('utf8');
-};
-
-Reader.prototype.readOID = function (tag) {
-  if (!tag)
-    tag = ASN1.OID;
-
-  var b = this.readString(tag, true);
-  if (b === null)
-    return null;
-
-  var values = [];
-  var value = 0;
-
-  for (var i = 0; i < b.length; i++) {
-    var byte = b[i] & 0xff;
-
-    value <<= 7;
-    value += byte & 0x7f;
-    if ((byte & 0x80) === 0) {
-      values.push(value);
-      value = 0;
-    }
-  }
-
-  value = values.shift();
-  values.unshift(value % 40);
-  values.unshift((value / 40) >> 0);
-
-  return values.join('.');
-};
-
-
-Reader.prototype._readTag = function (tag) {
-  assert.ok(tag !== undefined);
-
-  var b = this.peek();
-
-  if (b === null)
-    return null;
-
-  if (b !== tag)
-    throw newInvalidAsn1Error('Expected 0x' + tag.toString(16) +
-                              ': got 0x' + b.toString(16));
-
-  var o = this.readLength(this._offset + 1); // stored in `length`
-  if (o === null)
-    return null;
-
-  if (this.length > 4)
-    throw newInvalidAsn1Error('Integer too long: ' + this.length);
-
-  if (this.length > this._size - o)
-    return null;
-  this._offset = o;
-
-  var fb = this._buf[this._offset];
-  var value = 0;
-
-  for (var i = 0; i < this.length; i++) {
-    value <<= 8;
-    value |= (this._buf[this._offset++] & 0xff);
-  }
-
-  if ((fb & 0x80) === 0x80 && i !== 4)
-    value -= (1 << (i * 8));
-
-  return value >> 0;
-};
-
-
-
-// --- Exported API
-
-module.exports = Reader;
-
-
-/***/ }),
-/* 516 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2011 Mark Cavage <mcavage@gmail.com> All rights reserved.
-
-var assert = __webpack_require__(28);
-var Buffer = __webpack_require__(15).Buffer;
-var ASN1 = __webpack_require__(206);
-var errors = __webpack_require__(205);
-
-
-// --- Globals
-
-var newInvalidAsn1Error = errors.newInvalidAsn1Error;
-
-var DEFAULT_OPTS = {
-  size: 1024,
-  growthFactor: 8
-};
-
-
-// --- Helpers
-
-function merge(from, to) {
-  assert.ok(from);
-  assert.equal(typeof (from), 'object');
-  assert.ok(to);
-  assert.equal(typeof (to), 'object');
-
-  var keys = Object.getOwnPropertyNames(from);
-  keys.forEach(function (key) {
-    if (to[key])
-      return;
-
-    var value = Object.getOwnPropertyDescriptor(from, key);
-    Object.defineProperty(to, key, value);
-  });
-
-  return to;
-}
-
-
-
-// --- API
-
-function Writer(options) {
-  options = merge(DEFAULT_OPTS, options || {});
-
-  this._buf = Buffer.alloc(options.size || 1024);
-  this._size = this._buf.length;
-  this._offset = 0;
-  this._options = options;
-
-  // A list of offsets in the buffer where we need to insert
-  // sequence tag/len pairs.
-  this._seq = [];
-}
-
-Object.defineProperty(Writer.prototype, 'buffer', {
-  get: function () {
-    if (this._seq.length)
-      throw newInvalidAsn1Error(this._seq.length + ' unended sequence(s)');
-
-    return (this._buf.slice(0, this._offset));
-  }
-});
-
-Writer.prototype.writeByte = function (b) {
-  if (typeof (b) !== 'number')
-    throw new TypeError('argument must be a Number');
-
-  this._ensure(1);
-  this._buf[this._offset++] = b;
-};
-
-
-Writer.prototype.writeInt = function (i, tag) {
-  if (typeof (i) !== 'number')
-    throw new TypeError('argument must be a Number');
-  if (typeof (tag) !== 'number')
-    tag = ASN1.Integer;
-
-  var sz = 4;
-
-  while ((((i & 0xff800000) === 0) || ((i & 0xff800000) === 0xff800000 >> 0)) &&
-        (sz > 1)) {
-    sz--;
-    i <<= 8;
-  }
-
-  if (sz > 4)
-    throw newInvalidAsn1Error('BER ints cannot be > 0xffffffff');
-
-  this._ensure(2 + sz);
-  this._buf[this._offset++] = tag;
-  this._buf[this._offset++] = sz;
-
-  while (sz-- > 0) {
-    this._buf[this._offset++] = ((i & 0xff000000) >>> 24);
-    i <<= 8;
-  }
-
-};
-
-
-Writer.prototype.writeNull = function () {
-  this.writeByte(ASN1.Null);
-  this.writeByte(0x00);
-};
-
-
-Writer.prototype.writeEnumeration = function (i, tag) {
-  if (typeof (i) !== 'number')
-    throw new TypeError('argument must be a Number');
-  if (typeof (tag) !== 'number')
-    tag = ASN1.Enumeration;
-
-  return this.writeInt(i, tag);
-};
-
-
-Writer.prototype.writeBoolean = function (b, tag) {
-  if (typeof (b) !== 'boolean')
-    throw new TypeError('argument must be a Boolean');
-  if (typeof (tag) !== 'number')
-    tag = ASN1.Boolean;
-
-  this._ensure(3);
-  this._buf[this._offset++] = tag;
-  this._buf[this._offset++] = 0x01;
-  this._buf[this._offset++] = b ? 0xff : 0x00;
-};
-
-
-Writer.prototype.writeString = function (s, tag) {
-  if (typeof (s) !== 'string')
-    throw new TypeError('argument must be a string (was: ' + typeof (s) + ')');
-  if (typeof (tag) !== 'number')
-    tag = ASN1.OctetString;
-
-  var len = Buffer.byteLength(s);
-  this.writeByte(tag);
-  this.writeLength(len);
-  if (len) {
-    this._ensure(len);
-    this._buf.write(s, this._offset);
-    this._offset += len;
-  }
-};
-
-
-Writer.prototype.writeBuffer = function (buf, tag) {
-  if (typeof (tag) !== 'number')
-    throw new TypeError('tag must be a number');
-  if (!Buffer.isBuffer(buf))
-    throw new TypeError('argument must be a buffer');
-
-  this.writeByte(tag);
-  this.writeLength(buf.length);
-  this._ensure(buf.length);
-  buf.copy(this._buf, this._offset, 0, buf.length);
-  this._offset += buf.length;
-};
-
-
-Writer.prototype.writeStringArray = function (strings) {
-  if ((!strings instanceof Array))
-    throw new TypeError('argument must be an Array[String]');
-
-  var self = this;
-  strings.forEach(function (s) {
-    self.writeString(s);
-  });
-};
-
-// This is really to solve DER cases, but whatever for now
-Writer.prototype.writeOID = function (s, tag) {
-  if (typeof (s) !== 'string')
-    throw new TypeError('argument must be a string');
-  if (typeof (tag) !== 'number')
-    tag = ASN1.OID;
-
-  if (!/^([0-9]+\.){3,}[0-9]+$/.test(s))
-    throw new Error('argument is not a valid OID string');
-
-  function encodeOctet(bytes, octet) {
-    if (octet < 128) {
-        bytes.push(octet);
-    } else if (octet < 16384) {
-        bytes.push((octet >>> 7) | 0x80);
-        bytes.push(octet & 0x7F);
-    } else if (octet < 2097152) {
-      bytes.push((octet >>> 14) | 0x80);
-      bytes.push(((octet >>> 7) | 0x80) & 0xFF);
-      bytes.push(octet & 0x7F);
-    } else if (octet < 268435456) {
-      bytes.push((octet >>> 21) | 0x80);
-      bytes.push(((octet >>> 14) | 0x80) & 0xFF);
-      bytes.push(((octet >>> 7) | 0x80) & 0xFF);
-      bytes.push(octet & 0x7F);
-    } else {
-      bytes.push(((octet >>> 28) | 0x80) & 0xFF);
-      bytes.push(((octet >>> 21) | 0x80) & 0xFF);
-      bytes.push(((octet >>> 14) | 0x80) & 0xFF);
-      bytes.push(((octet >>> 7) | 0x80) & 0xFF);
-      bytes.push(octet & 0x7F);
-    }
-  }
-
-  var tmp = s.split('.');
-  var bytes = [];
-  bytes.push(parseInt(tmp[0], 10) * 40 + parseInt(tmp[1], 10));
-  tmp.slice(2).forEach(function (b) {
-    encodeOctet(bytes, parseInt(b, 10));
-  });
-
-  var self = this;
-  this._ensure(2 + bytes.length);
-  this.writeByte(tag);
-  this.writeLength(bytes.length);
-  bytes.forEach(function (b) {
-    self.writeByte(b);
-  });
-};
-
-
-Writer.prototype.writeLength = function (len) {
-  if (typeof (len) !== 'number')
-    throw new TypeError('argument must be a Number');
-
-  this._ensure(4);
-
-  if (len <= 0x7f) {
-    this._buf[this._offset++] = len;
-  } else if (len <= 0xff) {
-    this._buf[this._offset++] = 0x81;
-    this._buf[this._offset++] = len;
-  } else if (len <= 0xffff) {
-    this._buf[this._offset++] = 0x82;
-    this._buf[this._offset++] = len >> 8;
-    this._buf[this._offset++] = len;
-  } else if (len <= 0xffffff) {
-    this._buf[this._offset++] = 0x83;
-    this._buf[this._offset++] = len >> 16;
-    this._buf[this._offset++] = len >> 8;
-    this._buf[this._offset++] = len;
-  } else {
-    throw newInvalidAsn1Error('Length too long (> 4 bytes)');
-  }
-};
-
-Writer.prototype.startSequence = function (tag) {
-  if (typeof (tag) !== 'number')
-    tag = ASN1.Sequence | ASN1.Constructor;
-
-  this.writeByte(tag);
-  this._seq.push(this._offset);
-  this._ensure(3);
-  this._offset += 3;
-};
-
-
-Writer.prototype.endSequence = function () {
-  var seq = this._seq.pop();
-  var start = seq + 3;
-  var len = this._offset - start;
-
-  if (len <= 0x7f) {
-    this._shift(start, len, -2);
-    this._buf[seq] = len;
-  } else if (len <= 0xff) {
-    this._shift(start, len, -1);
-    this._buf[seq] = 0x81;
-    this._buf[seq + 1] = len;
-  } else if (len <= 0xffff) {
-    this._buf[seq] = 0x82;
-    this._buf[seq + 1] = len >> 8;
-    this._buf[seq + 2] = len;
-  } else if (len <= 0xffffff) {
-    this._shift(start, len, 1);
-    this._buf[seq] = 0x83;
-    this._buf[seq + 1] = len >> 16;
-    this._buf[seq + 2] = len >> 8;
-    this._buf[seq + 3] = len;
-  } else {
-    throw newInvalidAsn1Error('Sequence too long');
-  }
-};
-
-
-Writer.prototype._shift = function (start, len, shift) {
-  assert.ok(start !== undefined);
-  assert.ok(len !== undefined);
-  assert.ok(shift);
-
-  this._buf.copy(this._buf, start + shift, start, start + len);
-  this._offset += shift;
-};
-
-Writer.prototype._ensure = function (len) {
-  assert.ok(len);
-
-  if (this._size - this._offset < len) {
-    var sz = this._size * this._options.growthFactor;
-    if (sz - this._offset < len)
-      sz += len;
-
-    var buf = Buffer.alloc(sz);
-
-    this._buf.copy(buf, 0, 0, this._offset);
-    this._buf = buf;
-    this._size = sz;
-  }
-};
-
-
-
-// --- Exported API
-
-module.exports = Writer;
-
-
-/***/ }),
-/* 517 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports =
-{
-  parallel      : __webpack_require__(519),
-  serial        : __webpack_require__(520),
-  serialOrdered : __webpack_require__(351)
-};
-
-
-/***/ }),
-/* 518 */
-/***/ (function(module, exports) {
-
-module.exports = defer;
-
-/**
- * Runs provided function on next iteration of the event loop
- *
- * @param {function} fn - function to run
- */
-function defer(fn)
-{
-  var nextTick = typeof setImmediate == 'function'
-    ? setImmediate
-    : (
-      typeof process == 'object' && typeof process.nextTick == 'function'
-      ? process.nextTick
-      : null
-    );
-
-  if (nextTick)
-  {
-    nextTick(fn);
-  }
-  else
-  {
-    setTimeout(fn, 0);
-  }
-}
-
-
-/***/ }),
-/* 519 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var iterate    = __webpack_require__(348)
-  , initState  = __webpack_require__(349)
-  , terminator = __webpack_require__(350)
-  ;
-
-// Public API
-module.exports = parallel;
-
-/**
- * Runs iterator over provided array elements in parallel
- *
- * @param   {array|object} list - array or object (named list) to iterate over
- * @param   {function} iterator - iterator to run
- * @param   {function} callback - invoked when all elements processed
- * @returns {function} - jobs terminator
- */
-function parallel(list, iterator, callback)
-{
-  var state = initState(list);
-
-  while (state.index < (state['keyedList'] || list).length)
-  {
-    iterate(list, iterator, state, function(error, result)
-    {
-      if (error)
-      {
-        callback(error, result);
-        return;
-      }
-
-      // looks like it's the last one
-      if (Object.keys(state.jobs).length === 0)
-      {
-        callback(null, state.results);
-        return;
-      }
-    });
-
-    state.index++;
-  }
-
-  return terminator.bind(state, callback);
-}
-
-
-/***/ }),
-/* 520 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var serialOrdered = __webpack_require__(351);
-
-// Public API
-module.exports = serial;
-
-/**
- * Runs iterator over provided array elements in series
- *
- * @param   {array|object} list - array or object (named list) to iterate over
- * @param   {function} iterator - iterator to run
- * @param   {function} callback - invoked when all elements processed
- * @returns {function} - jobs terminator
- */
-function serial(list, iterator, callback)
-{
-  return serialOrdered(list, iterator, null, callback);
-}
-
-
-/***/ }),
-/* 521 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/*!
- *  Copyright 2010 LearnBoost <dev@learnboost.com>
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-/**
- * Module dependencies.
- */
-
-var crypto = __webpack_require__(11)
-  , parse = __webpack_require__(24).parse
-  ;
-
-/**
- * Valid keys.
- */
-
-var keys = 
-  [ 'acl'
-  , 'location'
-  , 'logging'
-  , 'notification'
-  , 'partNumber'
-  , 'policy'
-  , 'requestPayment'
-  , 'torrent'
-  , 'uploadId'
-  , 'uploads'
-  , 'versionId'
-  , 'versioning'
-  , 'versions'
-  , 'website'
-  ]
-
-/**
- * Return an "Authorization" header value with the given `options`
- * in the form of "AWS <key>:<signature>"
- *
- * @param {Object} options
- * @return {String}
- * @api private
- */
-
-function authorization (options) {
-  return 'AWS ' + options.key + ':' + sign(options)
-}
-
-module.exports = authorization
-module.exports.authorization = authorization
-
-/**
- * Simple HMAC-SHA1 Wrapper
- *
- * @param {Object} options
- * @return {String}
- * @api private
- */ 
-
-function hmacSha1 (options) {
-  return crypto.createHmac('sha1', options.secret).update(options.message).digest('base64')
-}
-
-module.exports.hmacSha1 = hmacSha1
-
-/**
- * Create a base64 sha1 HMAC for `options`. 
- * 
- * @param {Object} options
- * @return {String}
- * @api private
- */
-
-function sign (options) {
-  options.message = stringToSign(options)
-  return hmacSha1(options)
-}
-module.exports.sign = sign
-
-/**
- * Create a base64 sha1 HMAC for `options`. 
- *
- * Specifically to be used with S3 presigned URLs
- * 
- * @param {Object} options
- * @return {String}
- * @api private
- */
-
-function signQuery (options) {
-  options.message = queryStringToSign(options)
-  return hmacSha1(options)
-}
-module.exports.signQuery= signQuery
-
-/**
- * Return a string for sign() with the given `options`.
- *
- * Spec:
- * 
- *    <verb>\n
- *    <md5>\n
- *    <content-type>\n
- *    <date>\n
- *    [headers\n]
- *    <resource>
- *
- * @param {Object} options
- * @return {String}
- * @api private
- */
-
-function stringToSign (options) {
-  var headers = options.amazonHeaders || ''
-  if (headers) headers += '\n'
-  var r = 
-    [ options.verb
-    , options.md5
-    , options.contentType
-    , options.date ? options.date.toUTCString() : ''
-    , headers + options.resource
-    ]
-  return r.join('\n')
-}
-module.exports.stringToSign = stringToSign
-
-/**
- * Return a string for sign() with the given `options`, but is meant exclusively
- * for S3 presigned URLs
- *
- * Spec:
- * 
- *    <date>\n
- *    <resource>
- *
- * @param {Object} options
- * @return {String}
- * @api private
- */
-
-function queryStringToSign (options){
-  return 'GET\n\n\n' + options.date + '\n' + options.resource
-}
-module.exports.queryStringToSign = queryStringToSign
-
-/**
- * Perform the following:
- *
- *  - ignore non-amazon headers
- *  - lowercase fields
- *  - sort lexicographically
- *  - trim whitespace between ":"
- *  - join with newline
- *
- * @param {Object} headers
- * @return {String}
- * @api private
- */
-
-function canonicalizeHeaders (headers) {
-  var buf = []
-    , fields = Object.keys(headers)
-    ;
-  for (var i = 0, len = fields.length; i < len; ++i) {
-    var field = fields[i]
-      , val = headers[field]
-      , field = field.toLowerCase()
-      ;
-    if (0 !== field.indexOf('x-amz')) continue
-    buf.push(field + ':' + val)
-  }
-  return buf.sort().join('\n')
-}
-module.exports.canonicalizeHeaders = canonicalizeHeaders
-
-/**
- * Perform the following:
- *
- *  - ignore non sub-resources
- *  - sort lexicographically
- *
- * @param {String} resource
- * @return {String}
- * @api private
- */
-
-function canonicalizeResource (resource) {
-  var url = parse(resource, true)
-    , path = url.pathname
-    , buf = []
-    ;
-
-  Object.keys(url.query).forEach(function(key){
-    if (!~keys.indexOf(key)) return
-    var val = '' == url.query[key] ? '' : '=' + encodeURIComponent(url.query[key])
-    buf.push(key + val)
-  })
-
-  return path + (buf.length ? '?' + buf.sort().join('&') : '')
-}
-module.exports.canonicalizeResource = canonicalizeResource
-
-
-/***/ }),
-/* 522 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var aws4 = exports,
-    url = __webpack_require__(24),
-    querystring = __webpack_require__(196),
-    crypto = __webpack_require__(11),
-    lru = __webpack_require__(523),
-    credentialsCache = lru(1000)
-
-// http://docs.amazonwebservices.com/general/latest/gr/signature-version-4.html
-
-function hmac(key, string, encoding) {
-  return crypto.createHmac('sha256', key).update(string, 'utf8').digest(encoding)
-}
-
-function hash(string, encoding) {
-  return crypto.createHash('sha256').update(string, 'utf8').digest(encoding)
-}
-
-// This function assumes the string has already been percent encoded
-function encodeRfc3986(urlEncodedString) {
-  return urlEncodedString.replace(/[!'()*]/g, function(c) {
-    return '%' + c.charCodeAt(0).toString(16).toUpperCase()
-  })
-}
-
-// request: { path | body, [host], [method], [headers], [service], [region] }
-// credentials: { accessKeyId, secretAccessKey, [sessionToken] }
-function RequestSigner(request, credentials) {
-
-  if (typeof request === 'string') request = url.parse(request)
-
-  var headers = request.headers = (request.headers || {}),
-      hostParts = this.matchHost(request.hostname || request.host || headers.Host || headers.host)
-
-  this.request = request
-  this.credentials = credentials || this.defaultCredentials()
-
-  this.service = request.service || hostParts[0] || ''
-  this.region = request.region || hostParts[1] || 'us-east-1'
-
-  // SES uses a different domain from the service name
-  if (this.service === 'email') this.service = 'ses'
-
-  if (!request.method && request.body)
-    request.method = 'POST'
-
-  if (!headers.Host && !headers.host) {
-    headers.Host = request.hostname || request.host || this.createHost()
-
-    // If a port is specified explicitly, use it as is
-    if (request.port)
-      headers.Host += ':' + request.port
-  }
-  if (!request.hostname && !request.host)
-    request.hostname = headers.Host || headers.host
-
-  this.isCodeCommitGit = this.service === 'codecommit' && request.method === 'GIT'
-}
-
-RequestSigner.prototype.matchHost = function(host) {
-  var match = (host || '').match(/([^\.]+)\.(?:([^\.]*)\.)?amazonaws\.com$/)
-  var hostParts = (match || []).slice(1, 3)
-
-  // ES's hostParts are sometimes the other way round, if the value that is expected
-  // to be region equals ‘es’ switch them back
-  // e.g. search-cluster-name-aaaa00aaaa0aaa0aaaaaaa0aaa.us-east-1.es.amazonaws.com
-  if (hostParts[1] === 'es')
-    hostParts = hostParts.reverse()
-
-  return hostParts
-}
-
-// http://docs.aws.amazon.com/general/latest/gr/rande.html
-RequestSigner.prototype.isSingleRegion = function() {
-  // Special case for S3 and SimpleDB in us-east-1
-  if (['s3', 'sdb'].indexOf(this.service) >= 0 && this.region === 'us-east-1') return true
-
-  return ['cloudfront', 'ls', 'route53', 'iam', 'importexport', 'sts']
-    .indexOf(this.service) >= 0
-}
-
-RequestSigner.prototype.createHost = function() {
-  var region = this.isSingleRegion() ? '' :
-        (this.service === 's3' && this.region !== 'us-east-1' ? '-' : '.') + this.region,
-      service = this.service === 'ses' ? 'email' : this.service
-  return service + region + '.amazonaws.com'
-}
-
-RequestSigner.prototype.prepareRequest = function() {
-  this.parsePath()
-
-  var request = this.request, headers = request.headers, query
-
-  if (request.signQuery) {
-
-    this.parsedPath.query = query = this.parsedPath.query || {}
-
-    if (this.credentials.sessionToken)
-      query['X-Amz-Security-Token'] = this.credentials.sessionToken
-
-    if (this.service === 's3' && !query['X-Amz-Expires'])
-      query['X-Amz-Expires'] = 86400
-
-    if (query['X-Amz-Date'])
-      this.datetime = query['X-Amz-Date']
-    else
-      query['X-Amz-Date'] = this.getDateTime()
-
-    query['X-Amz-Algorithm'] = 'AWS4-HMAC-SHA256'
-    query['X-Amz-Credential'] = this.credentials.accessKeyId + '/' + this.credentialString()
-    query['X-Amz-SignedHeaders'] = this.signedHeaders()
-
-  } else {
-
-    if (!request.doNotModifyHeaders && !this.isCodeCommitGit) {
-      if (request.body && !headers['Content-Type'] && !headers['content-type'])
-        headers['Content-Type'] = 'application/x-www-form-urlencoded; charset=utf-8'
-
-      if (request.body && !headers['Content-Length'] && !headers['content-length'])
-        headers['Content-Length'] = Buffer.byteLength(request.body)
-
-      if (this.credentials.sessionToken && !headers['X-Amz-Security-Token'] && !headers['x-amz-security-token'])
-        headers['X-Amz-Security-Token'] = this.credentials.sessionToken
-
-      if (this.service === 's3' && !headers['X-Amz-Content-Sha256'] && !headers['x-amz-content-sha256'])
-        headers['X-Amz-Content-Sha256'] = hash(this.request.body || '', 'hex')
-
-      if (headers['X-Amz-Date'] || headers['x-amz-date'])
-        this.datetime = headers['X-Amz-Date'] || headers['x-amz-date']
-      else
-        headers['X-Amz-Date'] = this.getDateTime()
-    }
-
-    delete headers.Authorization
-    delete headers.authorization
-  }
-}
-
-RequestSigner.prototype.sign = function() {
-  if (!this.parsedPath) this.prepareRequest()
-
-  if (this.request.signQuery) {
-    this.parsedPath.query['X-Amz-Signature'] = this.signature()
-  } else {
-    this.request.headers.Authorization = this.authHeader()
-  }
-
-  this.request.path = this.formatPath()
-
-  return this.request
-}
-
-RequestSigner.prototype.getDateTime = function() {
-  if (!this.datetime) {
-    var headers = this.request.headers,
-      date = new Date(headers.Date || headers.date || new Date)
-
-    this.datetime = date.toISOString().replace(/[:\-]|\.\d{3}/g, '')
-
-    // Remove the trailing 'Z' on the timestamp string for CodeCommit git access
-    if (this.isCodeCommitGit) this.datetime = this.datetime.slice(0, -1)
-  }
-  return this.datetime
-}
-
-RequestSigner.prototype.getDate = function() {
-  return this.getDateTime().substr(0, 8)
-}
-
-RequestSigner.prototype.authHeader = function() {
-  return [
-    'AWS4-HMAC-SHA256 Credential=' + this.credentials.accessKeyId + '/' + this.credentialString(),
-    'SignedHeaders=' + this.signedHeaders(),
-    'Signature=' + this.signature(),
-  ].join(', ')
-}
-
-RequestSigner.prototype.signature = function() {
-  var date = this.getDate(),
-      cacheKey = [this.credentials.secretAccessKey, date, this.region, this.service].join(),
-      kDate, kRegion, kService, kCredentials = credentialsCache.get(cacheKey)
-  if (!kCredentials) {
-    kDate = hmac('AWS4' + this.credentials.secretAccessKey, date)
-    kRegion = hmac(kDate, this.region)
-    kService = hmac(kRegion, this.service)
-    kCredentials = hmac(kService, 'aws4_request')
-    credentialsCache.set(cacheKey, kCredentials)
-  }
-  return hmac(kCredentials, this.stringToSign(), 'hex')
-}
-
-RequestSigner.prototype.stringToSign = function() {
-  return [
-    'AWS4-HMAC-SHA256',
-    this.getDateTime(),
-    this.credentialString(),
-    hash(this.canonicalString(), 'hex'),
-  ].join('\n')
-}
-
-RequestSigner.prototype.canonicalString = function() {
-  if (!this.parsedPath) this.prepareRequest()
-
-  var pathStr = this.parsedPath.path,
-      query = this.parsedPath.query,
-      headers = this.request.headers,
-      queryStr = '',
-      normalizePath = this.service !== 's3',
-      decodePath = this.service === 's3' || this.request.doNotEncodePath,
-      decodeSlashesInPath = this.service === 's3',
-      firstValOnly = this.service === 's3',
-      bodyHash
-
-  if (this.service === 's3' && this.request.signQuery) {
-    bodyHash = 'UNSIGNED-PAYLOAD'
-  } else if (this.isCodeCommitGit) {
-    bodyHash = ''
-  } else {
-    bodyHash = headers['X-Amz-Content-Sha256'] || headers['x-amz-content-sha256'] ||
-      hash(this.request.body || '', 'hex')
-  }
-
-  if (query) {
-    queryStr = encodeRfc3986(querystring.stringify(Object.keys(query).sort().reduce(function(obj, key) {
-      if (!key) return obj
-      obj[key] = !Array.isArray(query[key]) ? query[key] :
-        (firstValOnly ? query[key][0] : query[key].slice().sort())
-      return obj
-    }, {})))
-  }
-  if (pathStr !== '/') {
-    if (normalizePath) pathStr = pathStr.replace(/\/{2,}/g, '/')
-    pathStr = pathStr.split('/').reduce(function(path, piece) {
-      if (normalizePath && piece === '..') {
-        path.pop()
-      } else if (!normalizePath || piece !== '.') {
-        if (decodePath) piece = decodeURIComponent(piece)
-        path.push(encodeRfc3986(encodeURIComponent(piece)))
-      }
-      return path
-    }, []).join('/')
-    if (pathStr[0] !== '/') pathStr = '/' + pathStr
-    if (decodeSlashesInPath) pathStr = pathStr.replace(/%2F/g, '/')
-  }
-
-  return [
-    this.request.method || 'GET',
-    pathStr,
-    queryStr,
-    this.canonicalHeaders() + '\n',
-    this.signedHeaders(),
-    bodyHash,
-  ].join('\n')
-}
-
-RequestSigner.prototype.canonicalHeaders = function() {
-  var headers = this.request.headers
-  function trimAll(header) {
-    return header.toString().trim().replace(/\s+/g, ' ')
-  }
-  return Object.keys(headers)
-    .sort(function(a, b) { return a.toLowerCase() < b.toLowerCase() ? -1 : 1 })
-    .map(function(key) { return key.toLowerCase() + ':' + trimAll(headers[key]) })
-    .join('\n')
-}
-
-RequestSigner.prototype.signedHeaders = function() {
-  return Object.keys(this.request.headers)
-    .map(function(key) { return key.toLowerCase() })
-    .sort()
-    .join(';')
-}
-
-RequestSigner.prototype.credentialString = function() {
-  return [
-    this.getDate(),
-    this.region,
-    this.service,
-    'aws4_request',
-  ].join('/')
-}
-
-RequestSigner.prototype.defaultCredentials = function() {
-  var env = process.env
-  return {
-    accessKeyId: env.AWS_ACCESS_KEY_ID || env.AWS_ACCESS_KEY,
-    secretAccessKey: env.AWS_SECRET_ACCESS_KEY || env.AWS_SECRET_KEY,
-    sessionToken: env.AWS_SESSION_TOKEN,
-  }
-}
-
-RequestSigner.prototype.parsePath = function() {
-  var path = this.request.path || '/',
-      queryIx = path.indexOf('?'),
-      query = null
-
-  if (queryIx >= 0) {
-    query = querystring.parse(path.slice(queryIx + 1))
-    path = path.slice(0, queryIx)
-  }
-
-  // S3 doesn't always encode characters > 127 correctly and
-  // all services don't encode characters > 255 correctly
-  // So if there are non-reserved chars (and it's not already all % encoded), just encode them all
-  if (/[^0-9A-Za-z!'()*\-._~%/]/.test(path)) {
-    path = path.split('/').map(function(piece) {
-      return encodeURIComponent(decodeURIComponent(piece))
-    }).join('/')
-  }
-
-  this.parsedPath = {
-    path: path,
-    query: query,
-  }
-}
-
-RequestSigner.prototype.formatPath = function() {
-  var path = this.parsedPath.path,
-      query = this.parsedPath.query
-
-  if (!query) return path
-
-  // Services don't support empty query string keys
-  if (query[''] != null) delete query['']
-
-  return path + '?' + encodeRfc3986(querystring.stringify(query))
-}
-
-aws4.RequestSigner = RequestSigner
-
-aws4.sign = function(request, credentials) {
-  return new RequestSigner(request, credentials).sign()
-}
-
-
-/***/ }),
-/* 523 */
-/***/ (function(module, exports) {
-
-module.exports = function(size) {
-  return new LruCache(size)
-}
-
-function LruCache(size) {
-  this.capacity = size | 0
-  this.map = Object.create(null)
-  this.list = new DoublyLinkedList()
-}
-
-LruCache.prototype.get = function(key) {
-  var node = this.map[key]
-  if (node == null) return undefined
-  this.used(node)
-  return node.val
-}
-
-LruCache.prototype.set = function(key, val) {
-  var node = this.map[key]
-  if (node != null) {
-    node.val = val
-  } else {
-    if (!this.capacity) this.prune()
-    if (!this.capacity) return false
-    node = new DoublyLinkedNode(key, val)
-    this.map[key] = node
-    this.capacity--
-  }
-  this.used(node)
-  return true
-}
-
-LruCache.prototype.used = function(node) {
-  this.list.moveToFront(node)
-}
-
-LruCache.prototype.prune = function() {
-  var node = this.list.pop()
-  if (node != null) {
-    delete this.map[node.key]
-    this.capacity++
-  }
-}
-
-
-function DoublyLinkedList() {
-  this.firstNode = null
-  this.lastNode = null
-}
-
-DoublyLinkedList.prototype.moveToFront = function(node) {
-  if (this.firstNode == node) return
-
-  this.remove(node)
-
-  if (this.firstNode == null) {
-    this.firstNode = node
-    this.lastNode = node
-    node.prev = null
-    node.next = null
-  } else {
-    node.prev = null
-    node.next = this.firstNode
-    node.next.prev = node
-    this.firstNode = node
-  }
-}
-
-DoublyLinkedList.prototype.pop = function() {
-  var lastNode = this.lastNode
-  if (lastNode != null) {
-    this.remove(lastNode)
-  }
-  return lastNode
-}
-
-DoublyLinkedList.prototype.remove = function(node) {
-  if (this.firstNode == node) {
-    this.firstNode = node.next
-  } else if (node.prev != null) {
-    node.prev.next = node.next
-  }
-  if (this.lastNode == node) {
-    this.lastNode = node.prev
-  } else if (node.next != null) {
-    node.next.prev = node.prev
-  }
-}
-
-
-function DoublyLinkedNode(key, val) {
-  this.key = key
-  this.val = val
-  this.prev = null
-  this.next = null
-}
-
-
-/***/ }),
-/* 524 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (message) {
-  return {
-    useless: true,
-    run() {
-      throw new (_errors || _load_errors()).MessageError(message);
-    },
-    setFlags: () => {},
-    hasWrapper: () => true
-  };
-};
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-/***/ }),
-/* 525 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.hasWrapper = exports.run = undefined;
-exports.setFlags = setFlags;
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const notYetImplemented = () => Promise.reject(new Error('This command is not implemented yet.'));
-
-function setFlags(commander) {
-  commander.description('Has not been implemented yet');
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('access', {
-  public: notYetImplemented,
-  restricted: notYetImplemented,
-  grant: notYetImplemented,
-  revoke: notYetImplemented,
-  lsPackages: notYetImplemented,
-  lsCollaborators: notYetImplemented,
-  edit: notYetImplemented
-}, ['WARNING: This command yet to be implemented.', 'public [<package>]', 'restricted [<package>]', 'grant <read-only|read-write> <scope:team> [<package>]', 'revoke <scope:team> [<package>]', 'ls-packages [<user>|<scope>|<scope:team>]', 'ls-collaborators [<package> [<user>]]', 'edit [<package>]']);
-
-const run = _buildSubCommands.run,
-      hasWrapper = _buildSubCommands.hasWrapper,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.hasWrapper = hasWrapper;
-exports.examples = examples;
-
-/***/ }),
-/* 526 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const binFolder = path.join(config.cwd, config.registryFolders[0], '.bin');
-    if (args.length === 0) {
-      reporter.log(binFolder, { force: true });
-    } else {
-      const binEntries = yield (0, (_run || _load_run()).getBinEntries)(config);
-
-      const binName = args[0];
-      const binPath = binEntries.get(binName);
-
-      if (binPath) {
-        reporter.log(binPath, { force: true });
-      } else {
-        reporter.error(reporter.lang('packageBinaryNotFound', binName));
-      }
-    }
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _run;
-
-function _load_run() {
-  return _run = __webpack_require__(360);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-function hasWrapper(commander) {
-  return false;
-}
-
-function setFlags(commander) {
-  commander.description('Displays the location of the yarn bin folder.');
-}
-
-/***/ }),
-/* 527 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const CONFIG_KEYS = [
-// 'reporter',
-'registryFolders', 'linkedModules',
-// 'registries',
-'cache', 'cwd', 'looseSemver', 'commandName', 'preferOffline', 'modulesFolder', 'globalFolder', 'linkFolder', 'offline', 'binLinks', 'ignorePlatform', 'ignoreScripts', 'disablePrepublish', 'nonInteractive', 'workspaceRootFolder', 'lockfileFolder', 'networkConcurrency', 'childConcurrency', 'networkTimeout', 'workspacesEnabled', 'workspacesNohoistEnabled', 'pruneOfflineMirror', 'enableMetaFolder', 'enableLockfileVersions', 'linkFileDependencies', 'cacheFolder', 'tempFolder', 'production'];
-/* eslint object-shorthand: 0 */
-
-function hasWrapper(flags, args) {
-  return args[0] !== 'get';
-}
-
-function setFlags(commander) {
-  commander.description('Manages the yarn configuration files.');
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('config', {
-  set(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (args.length === 0 || args.length > 2) {
-        return false;
-      }
-      const key = args[0];
-      var _args$ = args[1];
-      const val = _args$ === undefined ? true : _args$;
-
-      const yarnConfig = config.registries.yarn;
-      yield yarnConfig.saveHomeConfig({ [key]: val });
-      reporter.success(reporter.lang('configSet', key, val));
-      return true;
-    })();
-  },
-
-  get(config, reporter, flags, args) {
-    if (args.length !== 1) {
-      return false;
-    }
-
-    reporter.log(String(config.getOption(args[0])), { force: true });
-    return true;
-  },
-
-  delete: (() => {
-    var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-      if (args.length !== 1) {
-        return false;
-      }
-
-      const key = args[0];
-      const yarnConfig = config.registries.yarn;
-      yield yarnConfig.saveHomeConfig({ [key]: undefined });
-      reporter.success(reporter.lang('configDelete', key));
-      return true;
-    });
-
-    function _delete(_x, _x2, _x3, _x4) {
-      return _ref.apply(this, arguments);
-    }
-
-    return _delete;
-  })(),
-
-  list(config, reporter, flags, args) {
-    if (args.length) {
-      return false;
-    }
-
-    reporter.info(reporter.lang('configYarn'));
-    reporter.inspect(config.registries.yarn.config);
-
-    reporter.info(reporter.lang('configNpm'));
-    reporter.inspect(config.registries.npm.config);
-
-    return true;
-  },
-
-  current(config, reporter, flags, args) {
-    if (args.length) {
-      return false;
-    }
-
-    reporter.log(JSON.stringify(config, CONFIG_KEYS, 2), { force: true });
-
-    return true;
-  }
-});
-
-const run = _buildSubCommands.run,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.examples = examples;
-
-/***/ }),
-/* 528 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const builderName = args[0],
-          rest = args.slice(1);
-
-
-    if (!builderName) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidPackageName'));
-    }
-
-    var _coerceCreatePackageN = coerceCreatePackageName(builderName);
-
-    const packageName = _coerceCreatePackageN.fullName,
-          commandName = _coerceCreatePackageN.name;
-
-
-    const linkLoc = path.join(config.linkFolder, commandName);
-    if (yield (_fs || _load_fs()).exists(linkLoc)) {
-      reporter.info(reporter.lang('linkUsing', packageName));
-    } else {
-      yield (0, (_global || _load_global()).run)(config, reporter, {}, ['add', packageName]);
-    }
-
-    const binFolder = yield (0, (_global || _load_global()).getBinFolder)(config, {});
-    const command = path.resolve(binFolder, commandName);
-    const env = yield (0, (_executeLifecycleScript || _load_executeLifecycleScript()).makeEnv)('create', config.cwd, config);
-
-    yield (_child || _load_child()).spawn(command, rest, { stdio: `inherit`, shell: true, env });
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-exports.parsePackageName = parsePackageName;
-exports.coerceCreatePackageName = coerceCreatePackageName;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _executeLifecycleScript;
-
-function _load_executeLifecycleScript() {
-  return _executeLifecycleScript = __webpack_require__(111);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _global;
-
-function _load_global() {
-  return _global = __webpack_require__(121);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-function setFlags(commander) {
-  commander.description('Creates new projects from any create-* starter kits.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-function parsePackageName(str) {
-  if (str.charAt(0) === '/') {
-    throw new Error(`Name should not start with "/", got "${str}"`);
-  }
-  if (str.charAt(0) === '.') {
-    throw new Error(`Name should not start with ".", got "${str}"`);
-  }
-  const parts = str.split('/');
-  const isScoped = str.charAt(0) === '@';
-  if (isScoped && parts[0] === '@') {
-    throw new Error(`Scope should not be empty, got "${str}"`);
-  }
-  const scope = isScoped ? parts[0] : '';
-  const name = parts[isScoped ? 1 : 0] || '';
-  const path = parts.slice(isScoped ? 2 : 1).join('/');
-  const fullName = [scope, name].filter(Boolean).join('/');
-  const full = [scope, name, path].filter(Boolean).join('/');
-
-  return { fullName, name, scope, path, full };
-}
-
-function coerceCreatePackageName(str) {
-  const pkgNameObj = parsePackageName(str);
-  const coercedName = pkgNameObj.name !== '' ? `create-${pkgNameObj.name}` : `create`;
-  const coercedPkgNameObj = (0, (_extends2 || _load_extends()).default)({}, pkgNameObj, {
-    name: coercedName,
-    fullName: [pkgNameObj.scope, coercedName].filter(Boolean).join('/'),
-    full: [pkgNameObj.scope, coercedName, pkgNameObj.path].filter(Boolean).join('/')
-  });
-  return coercedPkgNameObj;
-}
-
-/***/ }),
-/* 529 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const env = yield (0, (_executeLifecycleScript || _load_executeLifecycleScript()).makeEnv)(`exec`, config.cwd, config);
-
-    if (args.length < 1) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('execMissingCommand'));
-    }
-
-    const execName = args[0],
-          rest = args.slice(1);
-
-    yield (_child || _load_child()).spawn(execName, rest, { stdio: 'inherit', env });
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _executeLifecycleScript;
-
-function _load_executeLifecycleScript() {
-  return _executeLifecycleScript = __webpack_require__(111);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function setFlags(commander) {}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 530 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    let manifest;
-    if (flags.useManifest) {
-      manifest = yield config.readJson(flags.useManifest);
-    } else {
-      manifest = yield config.readRootManifest();
-    }
-    if (!manifest.name) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('noName'));
-    }
-    if (!manifest.version) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('noVersion'));
-    }
-
-    const entry = {
-      name: manifest.name,
-      version: manifest.version,
-      resolved: flags.resolved,
-      registry: flags.registry || manifest._registry,
-      optionalDependencies: manifest.optionalDependencies,
-      dependencies: manifest.dependencies
-    };
-    const pattern = flags.pattern || `${entry.name}@${entry.version}`;
-    reporter.log((0, (_lockfile || _load_lockfile()).stringify)({
-      [pattern]: (0, (_lockfile || _load_lockfile()).implodeEntry)(pattern, entry)
-    }));
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = __webpack_require__(19);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function hasWrapper(commander, args) {
-  return false;
-}
-
-function setFlags(commander) {
-  commander.description('Generates a lock file entry.');
-  commander.option('--use-manifest <location>', 'description');
-  commander.option('--resolved <resolved>', 'description');
-  commander.option('--registry <registry>', 'description');
-}
-
-const examples = exports.examples = ['generate-lock-entry', 'generate-lock-entry --use-manifest ./package.json', 'generate-lock-entry --resolved local-file.tgz#hash'];
-
-/***/ }),
-/* 531 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-exports.run = run;
-
-var _index;
-
-function _load_index() {
-  return _index = _interopRequireDefault(__webpack_require__(334));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _aliases;
-
-function _load_aliases() {
-  return _aliases = _interopRequireDefault(__webpack_require__(352));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const chalk = __webpack_require__(30);
-
-function hasWrapper(flags, args) {
-  return false;
-}
-
-function setFlags(commander) {
-  commander.description('Displays help information.');
-}
-
-function run(config, reporter, commander, args) {
-  if (args.length) {
-    const commandName = args.shift();
-    if (Object.prototype.hasOwnProperty.call((_index || _load_index()).default, commandName)) {
-      const command = (_index || _load_index()).default[commandName];
-      if (command) {
-        command.setFlags(commander);
-        const examples = (command.examples || []).map(example => `    $ yarn ${example}`);
-        if (examples.length) {
-          commander.on('--help', () => {
-            reporter.log(reporter.lang('helpExamples', reporter.rawText(examples.join('\n'))));
-          });
-        }
-        // eslint-disable-next-line yarn-internal/warn-language
-        commander.on('--help', () => reporter.log('  ' + command.getDocsInfo + '\n'));
-        commander.help();
-        return Promise.resolve();
-      }
-    }
-  }
-
-  commander.on('--help', () => {
-    const commandsText = [];
-    for (var _iterator = Object.keys((_index || _load_index()).default).sort((_misc || _load_misc()).sortAlpha), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const name = _ref;
-
-      if ((_index || _load_index()).default[name].useless || Object.keys((_aliases || _load_aliases()).default).map(key => (_aliases || _load_aliases()).default[key]).indexOf(name) > -1) {
-        continue;
-      }
-      if ((_aliases || _load_aliases()).default[name]) {
-        commandsText.push(`    - ${(0, (_misc || _load_misc()).hyphenate)(name)} / ${(_aliases || _load_aliases()).default[name]}`);
-      } else {
-        commandsText.push(`    - ${(0, (_misc || _load_misc()).hyphenate)(name)}`);
-      }
-    }
-    reporter.log(reporter.lang('helpCommands', reporter.rawText(commandsText.join('\n'))));
-    reporter.log(reporter.lang('helpCommandsMore', reporter.rawText(chalk.bold('yarn help COMMAND'))));
-    reporter.log(reporter.lang('helpLearnMore', reporter.rawText(chalk.bold((_constants || _load_constants()).YARN_DOCS))));
-  });
-
-  commander.options.sort((_misc || _load_misc()).sortOptionsByFlags);
-
-  commander.help();
-  return Promise.resolve();
-}
-
-/***/ }),
-/* 532 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.Import = exports.noArguments = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const imp = new Import(flags, config, reporter, new (_lockfile || _load_lockfile()).default({ cache: {} }));
-    yield imp.init();
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref5.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _check;
-
-function _load_check() {
-  return _check = __webpack_require__(356);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(78);
-}
-
-var _baseResolver;
-
-function _load_baseResolver() {
-  return _baseResolver = _interopRequireDefault(__webpack_require__(123));
-}
-
-var _hostedGitResolver;
-
-function _load_hostedGitResolver() {
-  return _hostedGitResolver = _interopRequireDefault(__webpack_require__(109));
-}
-
-var _hostedGitResolver2;
-
-function _load_hostedGitResolver2() {
-  return _hostedGitResolver2 = __webpack_require__(109);
-}
-
-var _gistResolver;
-
-function _load_gistResolver() {
-  return _gistResolver = _interopRequireDefault(__webpack_require__(216));
-}
-
-var _gistResolver2;
-
-function _load_gistResolver2() {
-  return _gistResolver2 = __webpack_require__(216);
-}
-
-var _gitResolver;
-
-function _load_gitResolver() {
-  return _gitResolver = _interopRequireDefault(__webpack_require__(124));
-}
-
-var _fileResolver;
-
-function _load_fileResolver() {
-  return _fileResolver = _interopRequireDefault(__webpack_require__(215));
-}
-
-var _packageResolver;
-
-function _load_packageResolver() {
-  return _packageResolver = _interopRequireDefault(__webpack_require__(366));
-}
-
-var _packageRequest;
-
-function _load_packageRequest() {
-  return _packageRequest = _interopRequireDefault(__webpack_require__(122));
-}
-
-var _packageReference;
-
-function _load_packageReference() {
-  return _packageReference = _interopRequireDefault(__webpack_require__(365));
-}
-
-var _packageFetcher;
-
-function _load_packageFetcher() {
-  return _packageFetcher = _interopRequireWildcard(__webpack_require__(210));
-}
-
-var _packageLinker;
-
-function _load_packageLinker() {
-  return _packageLinker = _interopRequireDefault(__webpack_require__(211));
-}
-
-var _packageCompatibility;
-
-function _load_packageCompatibility() {
-  return _packageCompatibility = _interopRequireWildcard(__webpack_require__(209));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _normalizePattern9;
-
-function _load_normalizePattern() {
-  return _normalizePattern9 = __webpack_require__(37);
-}
-
-var _logicalDependencyTree;
-
-function _load_logicalDependencyTree() {
-  return _logicalDependencyTree = __webpack_require__(582);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = _interopRequireWildcard(__webpack_require__(18));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-const uuid = __webpack_require__(119);
-const ssri = __webpack_require__(65);
-const nodeVersion = process.versions.node.split('-')[0];
-
-const noArguments = exports.noArguments = true;
-
-class ImportResolver extends (_baseResolver || _load_baseResolver()).default {
-  getCwd() {
-    if (this.request.parentRequest) {
-      const parent = this.resolver.getStrictResolvedPattern(this.request.parentRequest.pattern);
-      invariant(parent._loc, 'expected package location');
-      return path.dirname(parent._loc);
-    }
-    return this.config.cwd;
-  }
-
-  resolveHostedGit(info, Resolver) {
-    var _normalizePattern = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(this.pattern);
-
-    const range = _normalizePattern.range;
-
-    const exploded = (0, (_hostedGitResolver2 || _load_hostedGitResolver2()).explodeHostedGitFragment)(range, this.reporter);
-    const hash = info.gitHead;
-    invariant(hash, 'expected package gitHead');
-    const url = Resolver.getTarballUrl(exploded, hash);
-    info._uid = hash;
-    info._remote = {
-      resolved: url,
-      type: 'tarball',
-      registry: this.registry,
-      reference: url,
-      hash: null
-    };
-    return info;
-  }
-
-  resolveGist(info, Resolver) {
-    var _normalizePattern2 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(this.pattern);
-
-    const range = _normalizePattern2.range;
-
-    var _explodeGistFragment = (0, (_gistResolver2 || _load_gistResolver2()).explodeGistFragment)(range, this.reporter);
-
-    const id = _explodeGistFragment.id;
-
-    const hash = info.gitHead;
-    invariant(hash, 'expected package gitHead');
-    const url = `https://gist.github.com/${id}.git`;
-    info._uid = hash;
-    info._remote = {
-      resolved: `${url}#${hash}`,
-      type: 'git',
-      registry: this.registry,
-      reference: url,
-      hash
-    };
-    return info;
-  }
-
-  resolveGit(info, Resolver) {
-    const url = info._resolved;
-    const hash = info.gitHead;
-    invariant(url, 'expected package _resolved');
-    invariant(hash, 'expected package gitHead');
-    info._uid = hash;
-    info._remote = {
-      resolved: `${url}#${hash}`,
-      type: 'git',
-      registry: this.registry,
-      reference: url,
-      hash
-    };
-    return info;
-  }
-
-  resolveFile(info, Resolver) {
-    var _normalizePattern3 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(this.pattern);
-
-    const range = _normalizePattern3.range;
-
-    let loc = (_misc || _load_misc()).removePrefix(range, 'file:');
-    if (!path.isAbsolute(loc)) {
-      loc = path.join(this.config.cwd, loc);
-    }
-    info._uid = info.version;
-    info._remote = {
-      type: 'copy',
-      registry: this.registry,
-      hash: `${uuid.v4()}-${new Date().getTime()}`,
-      reference: loc
-    };
-    return info;
-  }
-
-  resolveRegistry(info) {
-    let url = info._resolved;
-    const hash = info._shasum;
-    invariant(url, 'expected package _resolved');
-    invariant(hash, 'expected package _shasum');
-    if (this.config.getOption('registry') === (_constants || _load_constants()).YARN_REGISTRY) {
-      url = url.replace((_constants || _load_constants()).NPM_REGISTRY_RE, (_constants || _load_constants()).YARN_REGISTRY);
-    }
-    info._uid = info.version;
-    info._remote = {
-      resolved: `${url}#${hash}`,
-      type: 'tarball',
-      registry: this.registry,
-      reference: url,
-      integrity: info._integrity ? ssri.parse(info._integrity) : ssri.fromHex(hash, 'sha1'),
-      hash
-    };
-    return info;
-  }
-
-  resolveImport(info) {
-    var _normalizePattern4 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(this.pattern);
-
-    const range = _normalizePattern4.range;
-
-    const Resolver = (0, (_index || _load_index()).getExoticResolver)(range);
-    if (Resolver && Resolver.prototype instanceof (_hostedGitResolver || _load_hostedGitResolver()).default) {
-      return this.resolveHostedGit(info, Resolver);
-    } else if (Resolver && Resolver === (_gistResolver || _load_gistResolver()).default) {
-      return this.resolveGist(info, Resolver);
-    } else if (Resolver && Resolver === (_gitResolver || _load_gitResolver()).default) {
-      return this.resolveGit(info, Resolver);
-    } else if (Resolver && Resolver === (_fileResolver || _load_fileResolver()).default) {
-      return this.resolveFile(info, Resolver);
-    }
-    return this.resolveRegistry(info);
-  }
-
-  resolveLocation(loc) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const info = yield _this.config.tryManifest(loc, 'npm', false);
-      if (!info) {
-        return null;
-      }
-      return _this.resolveImport(info);
-    })();
-  }
-
-  resolveFixedVersion(fixedVersionPattern) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _normalizePattern5 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(fixedVersionPattern);
-
-      const range = _normalizePattern5.range;
-
-      const exoticResolver = (0, (_index || _load_index()).getExoticResolver)(range);
-      const manifest = exoticResolver ? yield _this2.request.findExoticVersionInfo(exoticResolver, range) : yield _this2.request.findVersionOnRegistry(fixedVersionPattern);
-      return manifest;
-    })();
-  }
-
-  _resolveFromFixedVersions() {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      invariant(_this3.request instanceof ImportPackageRequest, 'request must be ImportPackageRequest');
-
-      var _normalizePattern6 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(_this3.pattern);
-
-      const name = _normalizePattern6.name;
-
-      invariant(_this3.request.dependencyTree instanceof (_logicalDependencyTree || _load_logicalDependencyTree()).LogicalDependencyTree, 'dependencyTree on request must be LogicalDependencyTree');
-      const fixedVersionPattern = _this3.request.dependencyTree.getFixedVersionPattern(name, _this3.request.parentNames);
-      const info = yield _this3.config.getCache(`import-resolver-${fixedVersionPattern}`, function () {
-        return _this3.resolveFixedVersion(fixedVersionPattern);
-      });
-      if (info) {
-        return info;
-      }
-      throw new (_errors || _load_errors()).MessageError(_this3.reporter.lang('importResolveFailed', name, _this3.getCwd()));
-    })();
-  }
-
-  _resolveFromNodeModules() {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      var _normalizePattern7 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(_this4.pattern);
-
-      const name = _normalizePattern7.name;
-
-      let cwd = _this4.getCwd();
-      while (!path.relative(_this4.config.cwd, cwd).startsWith('..')) {
-        const loc = path.join(cwd, 'node_modules', name);
-        const info = yield _this4.config.getCache(`import-resolver-${loc}`, function () {
-          return _this4.resolveLocation(loc);
-        });
-        if (info) {
-          return info;
-        }
-        cwd = path.resolve(cwd, '../..');
-      }
-      throw new (_errors || _load_errors()).MessageError(_this4.reporter.lang('importResolveFailed', name, _this4.getCwd()));
-    })();
-  }
-
-  resolve() {
-    if (this.request instanceof ImportPackageRequest && this.request.dependencyTree) {
-      return this._resolveFromFixedVersions();
-    } else {
-      return this._resolveFromNodeModules();
-    }
-  }
-}
-
-class ImportPackageRequest extends (_packageRequest || _load_packageRequest()).default {
-  constructor(req, dependencyTree, resolver) {
-    super(req, resolver);
-    this.import = this.parentRequest instanceof ImportPackageRequest ? this.parentRequest.import : true;
-    this.dependencyTree = dependencyTree;
-  }
-
-  getRootName() {
-    return this.resolver instanceof ImportPackageResolver && this.resolver.rootName || 'root';
-  }
-
-  getParentHumanName() {
-    return [this.getRootName()].concat(this.parentNames).join(' > ');
-  }
-
-  reportResolvedRangeMatch(info, resolved) {
-    if (info.version === resolved.version) {
-      return;
-    }
-    this.reporter.warn(this.reporter.lang('importResolvedRangeMatch', resolved.version, resolved.name, info.version, this.getParentHumanName()));
-  }
-
-  _findResolvedManifest(info) {
-    var _normalizePattern8 = (0, (_normalizePattern9 || _load_normalizePattern()).normalizePattern)(this.pattern);
-
-    const range = _normalizePattern8.range,
-          name = _normalizePattern8.name;
-
-    const solvedRange = (_semver || _load_semver()).default.validRange(range) ? info.version : range;
-    const resolved = this.resolver.getExactVersionMatch(name, solvedRange, info);
-    if (resolved) {
-      return resolved;
-    }
-    invariant(info._remote, 'expected package remote');
-    const ref = new (_packageReference || _load_packageReference()).default(this, info, info._remote);
-    info._reference = ref;
-    return info;
-  }
-
-  resolveToExistingVersion(info) {
-    const resolved = this._findResolvedManifest(info);
-    invariant(resolved, 'should have found a resolved reference');
-    const ref = resolved._reference;
-    invariant(ref, 'should have a package reference');
-    ref.addRequest(this);
-    ref.addPattern(this.pattern, resolved);
-    ref.addOptional(this.optional);
-  }
-
-  findVersionInfo() {
-    if (!this.import) {
-      this.reporter.verbose(this.reporter.lang('skippingImport', this.pattern, this.getParentHumanName()));
-      return super.findVersionInfo();
-    }
-    const resolver = new ImportResolver(this, this.pattern);
-    return resolver.resolve().catch(() => {
-      this.import = false;
-      this.reporter.warn(this.reporter.lang('importFailed', this.pattern, this.getParentHumanName()));
-      return super.findVersionInfo();
-    });
-  }
-}
-
-class ImportPackageResolver extends (_packageResolver || _load_packageResolver()).default {
-  constructor(config, lockfile) {
-    super(config, lockfile);
-    this.next = [];
-    this.rootName = 'root';
-  }
-
-  find(req) {
-    this.next.push(req);
-    return Promise.resolve();
-  }
-
-  findOne(req) {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (_this5.activity) {
-        _this5.activity.tick(req.pattern);
-      }
-      const request = new ImportPackageRequest(req, _this5.dependencyTree, _this5);
-      yield request.find({ fresh: false });
-    })();
-  }
-
-  findAll(deps) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield Promise.all(deps.map(function (dep) {
-        return _this6.findOne(dep);
-      }));
-      deps = _this6.next;
-      _this6.next = [];
-      if (!deps.length) {
-        // all required package versions have been discovered, so now packages that
-        // resolved to existing versions can be resolved to their best available version
-        _this6.resolvePackagesWithExistingVersions();
-        return;
-      }
-      yield _this6.findAll(deps);
-    })();
-  }
-
-  resetOptional() {
-    for (const pattern in this.patterns) {
-      const ref = this.patterns[pattern]._reference;
-      invariant(ref, 'expected reference');
-      ref.optional = null;
-      for (var _iterator = ref.requests, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const req = _ref;
-
-        ref.addOptional(req.optional);
-      }
-    }
-  }
-
-  init(deps, { isFlat, isFrozen, workspaceLayout } = { isFlat: false, isFrozen: false, workspaceLayout: undefined }) {
-    var _this7 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this7.flat = Boolean(isFlat);
-      const activity = _this7.activity = _this7.reporter.activity();
-      yield _this7.findAll(deps);
-      _this7.resetOptional();
-      activity.end();
-      _this7.activity = null;
-    })();
-  }
-}
-
-class Import extends (_install || _load_install()).Install {
-  constructor(flags, config, reporter, lockfile) {
-    super(flags, config, reporter, lockfile);
-    this.resolver = new ImportPackageResolver(this.config, this.lockfile);
-    this.linker = new (_packageLinker || _load_packageLinker()).default(config, this.resolver);
-  }
-  createLogicalDependencyTree(packageJson, packageLock) {
-    invariant(packageJson, 'package.json should exist');
-    invariant(packageLock, 'package-lock.json should exist');
-    invariant(this.resolver instanceof ImportPackageResolver, 'resolver should be an ImportPackageResolver');
-    try {
-      this.resolver.dependencyTree = new (_logicalDependencyTree || _load_logicalDependencyTree()).LogicalDependencyTree(packageJson, packageLock);
-    } catch (e) {
-      throw new (_errors || _load_errors()).MessageError(this.reporter.lang('importSourceFilesCorrupted'));
-    }
-  }
-  getExternalLockfileContents() {
-    var _this8 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      try {
-        var _ref2 = yield Promise.all([(_fs || _load_fs()).readFile(path.join(_this8.config.cwd, (_constants || _load_constants()).NODE_PACKAGE_JSON)), (_fs || _load_fs()).readFile(path.join(_this8.config.cwd, (_constants || _load_constants()).NPM_LOCK_FILENAME))]);
-
-        const packageJson = _ref2[0],
-              packageLock = _ref2[1];
-
-        return { packageJson, packageLock };
-      } catch (e) {
-        return { packageJson: null, packageLock: null };
-      }
-    })();
-  }
-  init() {
-    var _this9 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (yield (_fs || _load_fs()).exists(path.join(_this9.config.cwd, (_constants || _load_constants()).LOCKFILE_FILENAME))) {
-        throw new (_errors || _load_errors()).MessageError(_this9.reporter.lang('lockfileExists'));
-      }
-
-      var _ref3 = yield _this9.getExternalLockfileContents();
-
-      const packageJson = _ref3.packageJson,
-            packageLock = _ref3.packageLock;
-
-      const importSource = packageJson && packageLock && (_semver || _load_semver()).default.satisfies(nodeVersion, '>=5.0.0') ? 'package-lock.json' : 'node_modules';
-      if (importSource === 'package-lock.json') {
-        _this9.reporter.info(_this9.reporter.lang('importPackageLock'));
-        _this9.createLogicalDependencyTree(packageJson, packageLock);
-      }
-      if (importSource === 'node_modules') {
-        _this9.reporter.info(_this9.reporter.lang('importNodeModules'));
-        yield (0, (_check || _load_check()).verifyTreeCheck)(_this9.config, _this9.reporter, {}, []);
-      }
-
-      var _ref4 = yield _this9.fetchRequestFromCwd();
-
-      const requests = _ref4.requests,
-            patterns = _ref4.patterns,
-            manifest = _ref4.manifest;
-
-      if (manifest.name && _this9.resolver instanceof ImportPackageResolver) {
-        _this9.resolver.rootName = manifest.name;
-      }
-      yield _this9.resolver.init(requests, { isFlat: _this9.flags.flat, isFrozen: _this9.flags.frozenLockfile });
-      const manifests = yield (_packageFetcher || _load_packageFetcher()).fetch(_this9.resolver.getManifests(), _this9.config);
-      _this9.resolver.updateManifests(manifests);
-      yield (_packageCompatibility || _load_packageCompatibility()).check(_this9.resolver.getManifests(), _this9.config, _this9.flags.ignoreEngines);
-      yield _this9.linker.resolvePeerModules();
-      yield _this9.saveLockfileAndIntegrity(patterns);
-      return patterns;
-    })();
-  }
-}
-
-exports.Import = Import;
-function setFlags(commander) {
-  commander.description('Generates yarn.lock from an npm package-lock.json file or an existing npm-installed node_modules folder.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 533 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (args.length > 2) {
-      reporter.error(reporter.lang('tooManyArguments', 2));
-      return;
-    }
-
-    let packageName = args.shift() || '.';
-
-    // Handle the case when we are referencing a local package.
-    if (packageName === '.') {
-      packageName = (yield config.readRootManifest()).name;
-    }
-
-    const packageInput = (_npmRegistry || _load_npmRegistry()).default.escapeName(packageName);
-
-    var _parsePackageName = (0, (_parsePackageName2 || _load_parsePackageName()).default)(packageInput);
-
-    const name = _parsePackageName.name,
-          version = _parsePackageName.version;
-
-
-    let result;
-    try {
-      result = yield config.registries.npm.request(name, { unfiltered: true });
-    } catch (e) {
-      reporter.error(reporter.lang('infoFail'));
-      return;
-    }
-    if (!result) {
-      reporter.error(reporter.lang('infoFail'));
-      return;
-    }
-
-    result = clean(result);
-
-    const versions = result.versions;
-    // $FlowFixMe
-    result.versions = Object.keys(versions).sort(semver.compareLoose);
-    result.version = version || result['dist-tags'].latest;
-    result = Object.assign(result, versions[result.version]);
-
-    const fieldPath = args.shift();
-    const fields = fieldPath ? fieldPath.split('.') : [];
-
-    // Readmes can be long so exclude them unless explicitly asked for.
-    if (fields[0] !== 'readme') {
-      delete result.readme;
-    }
-
-    result = fields.reduce(function (prev, cur) {
-      return prev && prev[cur];
-    }, result);
-    reporter.inspect(result);
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-var _parsePackageName2;
-
-function _load_parsePackageName() {
-  return _parsePackageName2 = _interopRequireDefault(__webpack_require__(588));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const semver = __webpack_require__(22);
-
-function clean(object) {
-  if (Array.isArray(object)) {
-    const result = [];
-    object.forEach(item => {
-      item = clean(item);
-      if (item) {
-        result.push(item);
-      }
-    });
-    return result;
-  } else if (typeof object === 'object') {
-    const result = {};
-    for (const key in object) {
-      if (key.startsWith('_')) {
-        continue;
-      }
-
-      const item = clean(object[key]);
-      if (item) {
-        result[key] = item;
-      }
-    }
-    return result;
-  } else if (object) {
-    return object;
-  } else {
-    return null;
-  }
-}
-
-function setFlags(commander) {
-  commander.description('Shows information about a package.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 534 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getGitConfigInfo = exports.run = exports.shouldRunInCurrentCwd = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const installVersion = flags[`2`] ? `berry` : flags.install;
-
-    if (installVersion) {
-      const lockfilePath = path.resolve(config.cwd, 'yarn.lock');
-      if (!(yield (_fs || _load_fs()).exists(lockfilePath))) {
-        yield (_fs || _load_fs()).writeFile(lockfilePath, '');
-      }
-      yield (_child || _load_child()).spawn((_constants || _load_constants()).NODE_BIN_PATH, [process.argv[1], 'policies', 'set-version', installVersion, '--silent'], {
-        stdio: 'inherit',
-        cwd: config.cwd
-      });
-      yield (_child || _load_child()).spawn((_constants || _load_constants()).NODE_BIN_PATH, [process.argv[1], 'init', ...(flags.yes ? ['-y'] : []), ...(flags.private ? ['-p'] : [])], {
-        stdio: 'inherit',
-        cwd: config.cwd
-      });
-      return;
-    }
-
-    const manifests = yield config.getRootManifests();
-
-    let repository = {};
-    const author = {
-      name: config.getOption('init-author-name'),
-      email: config.getOption('init-author-email'),
-      url: config.getOption('init-author-url')
-    };
-    if (yield (_fs || _load_fs()).exists(path.join(config.cwd, '.git'))) {
-      // get git origin of the cwd
-      try {
-        repository = {
-          type: 'git',
-          url: yield (_child || _load_child()).spawn('git', ['config', 'remote.origin.url'], {
-            cwd: config.cwd
-          })
-        };
-      } catch (ex) {
-        // Ignore - Git repo may not have an origin URL yet (eg. if it only exists locally)
-      }
-
-      if (author.name === undefined) {
-        author.name = yield getGitConfigInfo('user.name');
-      }
-
-      if (author.email === undefined) {
-        author.email = yield getGitConfigInfo('user.email');
-      }
-    }
-
-    const keys = [{
-      key: 'name',
-      question: 'name',
-      default: path.basename(config.cwd),
-      validation: (_validate || _load_validate()).isValidPackageName,
-      validationError: 'invalidPackageName'
-    }, {
-      key: 'version',
-      question: 'version',
-      default: String(config.getOption('init-version'))
-    }, {
-      key: 'description',
-      question: 'description',
-      default: ''
-    }, {
-      key: 'main',
-      question: 'entry point',
-      default: 'index.js'
-    }, {
-      key: 'repository',
-      question: 'repository url',
-      default: (0, (_util || _load_util()).extractRepositoryUrl)(repository)
-    }, {
-      key: 'author',
-      question: 'author',
-      default: (0, (_util || _load_util()).stringifyPerson)(author)
-    }, {
-      key: 'license',
-      question: 'license',
-      default: String(config.getOption('init-license'))
-    }, {
-      key: 'private',
-      question: 'private',
-      default: config.getOption('init-private') || '',
-      inputFormatter: yn
-    }];
-
-    // get answers
-    const pkg = {};
-    for (var _iterator = keys, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const entry = _ref2;
-      const yes = flags.yes,
-            privateFlag = flags.private;
-      const manifestKey = entry.key;
-      let question = entry.question,
-          def = entry.default;
-
-
-      for (var _iterator4 = (_index || _load_index()).registryNames, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref5;
-
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref5 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref5 = _i4.value;
-        }
-
-        const registryName = _ref5;
-        const object = manifests[registryName].object;
-
-        let val = objectPath.get(object, manifestKey);
-        if (!val) {
-          break;
-        }
-        if (typeof val === 'object') {
-          if (manifestKey === 'author') {
-            val = (0, (_util || _load_util()).stringifyPerson)(val);
-          } else if (manifestKey === 'repository') {
-            val = (0, (_util || _load_util()).extractRepositoryUrl)(val);
-          }
-        }
-        def = val;
-      }
-
-      if (manifestKey === 'private' && privateFlag) {
-        def = true;
-      }
-
-      if (def) {
-        question += ` (${String(def)})`;
-      }
-
-      let answer;
-      let validAnswer = false;
-
-      if (yes) {
-        answer = def;
-      } else {
-        // loop until a valid answer is provided, if validation is on entry
-        if (entry.validation) {
-          while (!validAnswer) {
-            answer = (yield reporter.question(question)) || def;
-            // validate answer
-            if (entry.validation(String(answer))) {
-              validAnswer = true;
-            } else {
-              reporter.error(reporter.lang('invalidPackageName'));
-            }
-          }
-        } else {
-          answer = (yield reporter.question(question)) || def;
-        }
-      }
-
-      if (answer) {
-        if (entry.inputFormatter) {
-          answer = entry.inputFormatter(answer);
-        }
-        objectPath.set(pkg, manifestKey, answer);
-      }
-    }
-
-    if (pkg.repository && (_githubResolver || _load_githubResolver()).default.isVersion(pkg.repository)) {
-      pkg.repository = `https://github.com/${pkg.repository}`;
-    }
-
-    // save answers
-    const targetManifests = [];
-    for (var _iterator2 = (_index || _load_index()).registryNames, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref3;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref3 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref3 = _i2.value;
-      }
-
-      const registryName = _ref3;
-
-      const info = manifests[registryName];
-      if (info.exists) {
-        targetManifests.push(info);
-      }
-    }
-    if (!targetManifests.length) {
-      targetManifests.push(manifests.npm);
-    }
-    for (var _iterator3 = targetManifests, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref4 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref4 = _i3.value;
-      }
-
-      const targetManifest = _ref4;
-
-      Object.assign(targetManifest.object, pkg);
-      reporter.success(`Saved ${path.basename(targetManifest.loc)}`);
-    }
-
-    yield config.saveRootManifests(manifests);
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let getGitConfigInfo = exports.getGitConfigInfo = (() => {
-  var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (credential, spawn = (_child || _load_child()).spawn) {
-    try {
-      // try to get author default based on git config
-      return yield spawn('git', ['config', credential]);
-    } catch (e) {
-      return '';
-    }
-  });
-
-  return function getGitConfigInfo(_x5) {
-    return _ref6.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _util;
-
-function _load_util() {
-  return _util = __webpack_require__(221);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(57);
-}
-
-var _githubResolver;
-
-function _load_githubResolver() {
-  return _githubResolver = _interopRequireDefault(__webpack_require__(367));
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _validate;
-
-function _load_validate() {
-  return _validate = _interopRequireWildcard(__webpack_require__(125));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const objectPath = __webpack_require__(304);
-
-const path = __webpack_require__(0);
-const yn = __webpack_require__(962);
-
-function setFlags(commander) {
-  commander.description('Interactively creates or updates a package.json file.');
-  commander.option('-y, --yes', 'use default options');
-  commander.option('-p, --private', 'use default options and private true');
-  commander.option('-i, --install <value>', 'install a specific Yarn release');
-  commander.option('-2', 'generates the project using Yarn 2');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-const shouldRunInCurrentCwd = exports.shouldRunInCurrentCwd = true;
-
-/***/ }),
-/* 535 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.run = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getManifests = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, flags) {
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.cwd);
-    const install = new (_install || _load_install()).Install((0, (_extends2 || _load_extends()).default)({ skipIntegrityCheck: true }, flags), config, new (_baseReporter || _load_baseReporter()).default(), lockfile);
-    yield install.hydrate(true);
-
-    let manifests = install.resolver.getManifests();
-
-    // sort by name
-    manifests = manifests.sort(function (a, b) {
-      if (!a.name && !b.name) {
-        return 0;
-      }
-
-      if (!a.name) {
-        return 1;
-      }
-
-      if (!b.name) {
-        return -1;
-      }
-
-      return a.name.localeCompare(b.name);
-    });
-
-    // filter ignored manifests
-    manifests = manifests.filter(function (manifest) {
-      const ref = manifest._reference;
-      return !!ref && !ref.ignore;
-    });
-
-    return manifests;
-  });
-
-  return function getManifests(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let list = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const manifests = yield getManifests(config, flags);
-    const manifestsByLicense = new Map();
-
-    for (var _iterator = manifests, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref4 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref4 = _i.value;
-      }
-
-      const _ref3 = _ref4;
-      const name = _ref3.name,
-            version = _ref3.version,
-            license = _ref3.license,
-            repository = _ref3.repository,
-            homepage = _ref3.homepage,
-            author = _ref3.author;
-
-      const licenseKey = license || 'UNKNOWN';
-      const url = repository ? repository.url : homepage;
-      const vendorUrl = homepage || author && author.url;
-      const vendorName = author && author.name;
-
-      if (!manifestsByLicense.has(licenseKey)) {
-        manifestsByLicense.set(licenseKey, new Map());
-      }
-
-      const byLicense = manifestsByLicense.get(licenseKey);
-      invariant(byLicense, 'expected value');
-      byLicense.set(`${name}@${version}`, {
-        name,
-        version,
-        url,
-        vendorUrl,
-        vendorName
-      });
-    }
-
-    if (flags.json) {
-      const body = [];
-
-      manifestsByLicense.forEach(function (license, licenseKey) {
-        license.forEach(function ({ name, version, url, vendorUrl, vendorName }) {
-          body.push([name, version, licenseKey, url || 'Unknown', vendorUrl || 'Unknown', vendorName || 'Unknown']);
-        });
-      });
-
-      reporter.table(['Name', 'Version', 'License', 'URL', 'VendorUrl', 'VendorName'], body);
-    } else {
-      const trees = [];
-
-      manifestsByLicense.forEach(function (license, licenseKey) {
-        const licenseTree = [];
-
-        license.forEach(function ({ name, version, url, vendorUrl, vendorName }) {
-          const children = [];
-
-          if (url) {
-            children.push({ name: `${reporter.format.bold('URL:')} ${url}` });
-          }
-
-          if (vendorUrl) {
-            children.push({ name: `${reporter.format.bold('VendorUrl:')} ${vendorUrl}` });
-          }
-
-          if (vendorName) {
-            children.push({ name: `${reporter.format.bold('VendorName:')} ${vendorName}` });
-          }
-
-          licenseTree.push({
-            name: `${name}@${version}`,
-            children
-          });
-        });
-
-        trees.push({
-          name: licenseKey,
-          children: licenseTree
-        });
-      });
-
-      reporter.tree('licenses', trees, { force: true });
-    }
-  });
-
-  return function list(_x3, _x4, _x5, _x6) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _baseReporter;
-
-function _load_baseReporter() {
-  return _baseReporter = _interopRequireDefault(__webpack_require__(108));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-function hasWrapper(flags, args) {
-  return args[0] != 'generate-disclaimer';
-}
-
-function setFlags(commander) {
-  commander.description('Lists licenses for installed packages.');
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('licenses', {
-  ls(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      reporter.warn(`\`yarn licenses ls\` is deprecated. Please use \`yarn licenses list\`.`);
-      yield list(config, reporter, flags, args);
-    })();
-  },
-
-  list(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield list(config, reporter, flags, args);
-    })();
-  },
-
-  generateDisclaimer(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      /* eslint-disable no-console */
-
-      // `reporter.log` dumps a bunch of ANSI escapes to clear the current line and
-      // is for abstracting the console output so it can be consumed by other tools
-      // (JSON output being the primary one). This command is only for text consumption
-      // and you should just be dumping it to a TXT file. Using a reporter here has the
-      // potential to mess up the output since it might print ansi escapes.
-      const manifests = yield getManifests(config, flags);
-      const manifest = yield config.readRootManifest();
-
-      // Create a map of license text to manifest so that packages with exactly
-      // the same license text are grouped together.
-      const manifestsByLicense = new Map();
-      for (var _iterator2 = manifests, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref5;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref5 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref5 = _i2.value;
-        }
-
-        const manifest = _ref5;
-        const licenseText = manifest.licenseText,
-              noticeText = manifest.noticeText;
-
-        let licenseKey;
-        if (!licenseText) {
-          continue;
-        }
-
-        if (!noticeText) {
-          licenseKey = licenseText;
-        } else {
-          licenseKey = `${licenseText}\n\nNOTICE\n\n${noticeText}`;
-        }
-
-        if (!manifestsByLicense.has(licenseKey)) {
-          manifestsByLicense.set(licenseKey, new Map());
-        }
-
-        const byLicense = manifestsByLicense.get(licenseKey);
-        invariant(byLicense, 'expected value');
-        byLicense.set(manifest.name, manifest);
-      }
-
-      console.log('THE FOLLOWING SETS FORTH ATTRIBUTION NOTICES FOR THIRD PARTY SOFTWARE THAT MAY BE CONTAINED ' + `IN PORTIONS OF THE ${String(manifest.name).toUpperCase().replace(/-/g, ' ')} PRODUCT.`);
-      console.log();
-
-      for (var _iterator3 = manifestsByLicense, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref7 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref7 = _i3.value;
-        }
-
-        const _ref6 = _ref7;
-        const licenseKey = _ref6[0];
-        const manifests = _ref6[1];
-
-        console.log('-----');
-        console.log();
-
-        const names = [];
-        const urls = [];
-        for (var _iterator4 = manifests, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref9;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref9 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref9 = _i4.value;
-          }
-
-          const _ref8 = _ref9;
-          const name = _ref8[0];
-          const repository = _ref8[1].repository;
-
-          names.push(name);
-          if (repository && repository.url) {
-            urls.push(manifests.size === 1 ? repository.url : `${repository.url} (${name})`);
-          }
-        }
-
-        const heading = [];
-        heading.push(`The following software may be included in this product: ${names.join(', ')}.`);
-        if (urls.length > 0) {
-          heading.push(`A copy of the source code may be downloaded from ${urls.join(', ')}.`);
-        }
-        heading.push('This software contains the following license and notice below:');
-
-        console.log(heading.join(' '));
-        console.log();
-
-        if (licenseKey) {
-          console.log(licenseKey.trim());
-        } else {
-          // what do we do here? base it on `license`?
-        }
-
-        console.log();
-      }
-    })();
-  }
-});
-
-const run = _buildSubCommands.run,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.examples = examples;
-
-/***/ }),
-/* 536 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    yield config.registries.yarn.saveHomeConfig({
-      username: undefined,
-      email: undefined
-    });
-
-    reporter.success(reporter.lang('clearedCredentials'));
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function setFlags(commander) {
-  commander.description('Clears registry username and email.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 537 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const pnpPath = `${config.lockfileFolder}/${(_constants || _load_constants()).PNP_FILENAME}`;
-
-    let nodeOptions = process.env.NODE_OPTIONS || '';
-    if (yield (_fs || _load_fs()).exists(pnpPath)) {
-      nodeOptions = `--require ${pnpPath} ${nodeOptions}`;
-    }
-
-    try {
-      yield (_child || _load_child()).spawn((_constants || _load_constants()).NODE_BIN_PATH, args, {
-        stdio: 'inherit',
-        cwd: flags.into || config.cwd,
-        env: (0, (_extends2 || _load_extends()).default)({}, process.env, { NODE_OPTIONS: nodeOptions })
-      });
-    } catch (err) {
-      throw err;
-    }
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function setFlags(commander) {
-  commander.description('Runs Node with the same version that the one used by Yarn itself, and by default from the project root');
-  commander.usage('node [--into PATH] [... args]');
-  commander.option('--into <path>', 'Sets the cwd to the specified location');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 538 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.requireLockfile = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder);
-    const install = new (_install || _load_install()).Install((0, (_extends2 || _load_extends()).default)({}, flags, { includeWorkspaceDeps: true }), config, reporter, lockfile);
-    let deps = yield (_packageRequest || _load_packageRequest()).default.getOutdatedPackages(lockfile, install, config, reporter);
-
-    if (args.length) {
-      const requested = new Set(args);
-
-      deps = deps.filter(function ({ name }) {
-        return requested.has(name);
-      });
-    }
-
-    const getNameFromHint = function getNameFromHint(hint) {
-      return hint ? `${hint}Dependencies` : 'dependencies';
-    };
-    const colorizeName = function colorizeName({ current, latest, name }) {
-      return reporter.format[(0, (_colorForVersions || _load_colorForVersions()).default)(current, latest)](name);
-    };
-
-    if (deps.length) {
-      const usesWorkspaces = !!config.workspaceRootFolder;
-      const body = deps.map(function (info) {
-        const row = [colorizeName(info), info.current, (0, (_colorizeDiff || _load_colorizeDiff()).default)(info.current, info.wanted, reporter), reporter.format.cyan(info.latest), info.workspaceName || '', getNameFromHint(info.hint), reporter.format.cyan(info.url)];
-        if (!usesWorkspaces) {
-          row.splice(4, 1);
-        }
-        return row;
-      });
-
-      const red = reporter.format.red('<red>');
-      const yellow = reporter.format.yellow('<yellow>');
-      const green = reporter.format.green('<green>');
-      reporter.info(reporter.lang('legendColorsForVersionUpdates', red, yellow, green));
-
-      const header = ['Package', 'Current', 'Wanted', 'Latest', 'Workspace', 'Package Type', 'URL'];
-      if (!usesWorkspaces) {
-        header.splice(4, 1);
-      }
-      reporter.table(header, body);
-
-      return 1;
-    }
-    return 0;
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _packageRequest;
-
-function _load_packageRequest() {
-  return _packageRequest = _interopRequireDefault(__webpack_require__(122));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _colorForVersions;
-
-function _load_colorForVersions() {
-  return _colorForVersions = _interopRequireDefault(__webpack_require__(369));
-}
-
-var _colorizeDiff;
-
-function _load_colorizeDiff() {
-  return _colorizeDiff = _interopRequireDefault(__webpack_require__(370));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const requireLockfile = exports.requireLockfile = true;
-
-function setFlags(commander) {
-  commander.description('Checks for outdated package dependencies.');
-  commander.usage('outdated [packages ...]');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 539 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.hasWrapper = exports.run = exports.mutate = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let mutate = exports.mutate = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (args, config, reporter, buildMessages, mutator) {
-    if (args.length !== 2 && args.length !== 1) {
-      return false;
-    }
-
-    const username = args.shift();
-    const name = yield (0, (_tag || _load_tag()).getName)(args, config);
-    if (!(0, (_validate || _load_validate()).isValidPackageName)(name)) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('invalidPackageName'));
-    }
-
-    const msgs = buildMessages(username, name);
-    reporter.step(1, 3, reporter.lang('loggingIn'));
-    const revoke = yield (0, (_login || _load_login()).getToken)(config, reporter, name);
-
-    reporter.step(2, 3, msgs.info);
-    const user = yield config.registries.npm.request(`-/user/org.couchdb.user:${username}`);
-    let error = false;
-    if (user) {
-      // get package
-      const pkg = yield config.registries.npm.request((_npmRegistry || _load_npmRegistry()).default.escapeName(name));
-      if (pkg) {
-        pkg.maintainers = pkg.maintainers || [];
-        error = mutator({ name: user.name, email: user.email }, pkg);
-      } else {
-        error = true;
-        reporter.error(reporter.lang('unknownPackage', name));
-      }
-
-      // update package
-      if (pkg && !error) {
-        const res = yield config.registries.npm.request(`${(_npmRegistry || _load_npmRegistry()).default.escapeName(name)}/-rev/${pkg._rev}`, {
-          method: 'PUT',
-          body: {
-            _id: pkg._id,
-            _rev: pkg._rev,
-            maintainers: pkg.maintainers
-          }
-        });
-
-        if (res != null && res.success) {
-          reporter.success(msgs.success);
-        } else {
-          error = true;
-          reporter.error(msgs.error);
-        }
-      }
-    } else {
-      error = true;
-      reporter.error(reporter.lang('unknownUser', username));
-    }
-
-    reporter.step(3, 3, reporter.lang('revokingToken'));
-    yield revoke();
-
-    if (error) {
-      throw new Error();
-    } else {
-      return true;
-    }
-  });
-
-  return function mutate(_x, _x2, _x3, _x4, _x5) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let list = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (args.length > 1) {
-      return false;
-    }
-    const name = yield (0, (_tag || _load_tag()).getName)(args, config);
-    reporter.step(1, 1, reporter.lang('ownerGetting', name));
-    const pkg = yield config.registries.npm.request(name, { unfiltered: true });
-    if (pkg) {
-      const owners = pkg.maintainers;
-      if (!owners || !owners.length) {
-        reporter.warn(reporter.lang('ownerNone'));
-      } else {
-        for (var _iterator = owners, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-          var _ref3;
-
-          if (_isArray) {
-            if (_i >= _iterator.length) break;
-            _ref3 = _iterator[_i++];
-          } else {
-            _i = _iterator.next();
-            if (_i.done) break;
-            _ref3 = _i.value;
-          }
-
-          const owner = _ref3;
-
-          reporter.info(`${owner.name} <${owner.email}>`);
-        }
-      }
-    } else {
-      reporter.error(reporter.lang('ownerGettingFailed'));
-    }
-
-    if (pkg) {
-      return true;
-    } else {
-      throw new Error();
-    }
-  });
-
-  return function list(_x6, _x7, _x8, _x9) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _validate;
-
-function _load_validate() {
-  return _validate = __webpack_require__(125);
-}
-
-var _tag;
-
-function _load_tag() {
-  return _tag = __webpack_require__(361);
-}
-
-var _login;
-
-function _load_login() {
-  return _login = __webpack_require__(107);
-}
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function remove(config, reporter, flags, args) {
-  return mutate(args, config, reporter, (username, name) => ({
-    info: reporter.lang('ownerRemoving', username, name),
-    success: reporter.lang('ownerRemoved'),
-    error: reporter.lang('ownerRemoveError')
-  }), (user, pkg) => {
-    let found = false;
-
-    pkg.maintainers = pkg.maintainers.filter(o => {
-      const match = o.name === user.name;
-      found = found || match;
-      return !match;
-    });
-
-    if (!found) {
-      reporter.error(reporter.lang('userNotAnOwner', user.name));
-    }
-
-    return found;
-  });
-}
-
-function setFlags(commander) {
-  commander.description('Manages package owners.');
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('owner', {
-  add(config, reporter, flags, args) {
-    return mutate(args, config, reporter, (username, name) => ({
-      info: reporter.lang('ownerAdding', username, name),
-      success: reporter.lang('ownerAdded'),
-      error: reporter.lang('ownerAddingFailed')
-    }), (user, pkg) => {
-      for (var _iterator2 = pkg.maintainers, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref4 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref4 = _i2.value;
-        }
-
-        const owner = _ref4;
-
-        if (owner.name === user) {
-          reporter.error(reporter.lang('ownerAlready'));
-          return true;
-        }
-      }
-
-      pkg.maintainers.push(user);
-
-      return false;
-    });
-  },
-
-  rm(config, reporter, flags, args) {
-    reporter.warn(`\`yarn owner rm\` is deprecated. Please use \`yarn owner remove\`.`);
-    return remove(config, reporter, flags, args);
-  },
-
-  remove(config, reporter, flags, args) {
-    return remove(config, reporter, flags, args);
-  },
-
-  ls(config, reporter, flags, args) {
-    reporter.warn(`\`yarn owner ls\` is deprecated. Please use \`yarn owner list\`.`);
-    return list(config, reporter, flags, args);
-  },
-
-  list(config, reporter, flags, args) {
-    return list(config, reporter, flags, args);
-  }
-}, ['add <user> [[<@scope>/]<pkg>]', 'remove <user> [[<@scope>/]<pkg>]', 'list [<@scope>/]<pkg>']);
-
-const run = _buildSubCommands.run,
-      hasWrapper = _buildSubCommands.hasWrapper,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.hasWrapper = hasWrapper;
-exports.examples = examples;
-
-/***/ }),
-/* 540 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.setFlags = exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let fetchReleases = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, { includePrereleases = false } = {}) {
-    const token = process.env.GITHUB_TOKEN;
-    const tokenUrlParameter = token ? `?access_token=${token}` : '';
-    const request = yield config.requestManager.request({
-      url: `https://api.github.com/repos/yarnpkg/yarn/releases${tokenUrlParameter}`,
-      json: true
-    });
-
-    const releases = request.filter(function (release) {
-      if (release.draft) {
-        return false;
-      }
-
-      if (release.prerelease && !includePrereleases) {
-        return false;
-      }
-
-      // $FlowFixMe
-      release.version = semver.coerce(release.tag_name);
-
-      if (!release.version) {
-        return false;
-      }
-
-      if (!getBundleAsset(release)) {
-        return false;
-      }
-
-      return true;
-    });
-
-    releases.sort(function (a, b) {
-      // $FlowFixMe
-      return -semver.compare(a.version, b.version);
-    });
-
-    return releases;
-  });
-
-  return function fetchReleases(_x) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _rc;
-
-function _load_rc() {
-  return _rc = __webpack_require__(335);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = __webpack_require__(19);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const chalk = __webpack_require__(30);
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-const semver = __webpack_require__(22);
-
-function getBundleAsset(release) {
-  return release.assets.find(asset => {
-    return asset.name.match(/^yarn-[0-9]+\.[0-9]+\.[0-9]+\.js$/);
-  });
-}
-
-function fetchBundle(config, url) {
-  return config.requestManager.request({
-    url,
-    buffer: true
-  });
-}
-
-function hasWrapper(flags, args) {
-  return false;
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('policies', {
-  setVersion(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      let range = args[0] || 'latest';
-      let allowRc = flags.rc;
-
-      reporter.log(`Resolving ${chalk.yellow(range)} to a url...`);
-
-      if (range === 'rc') {
-        range = 'latest';
-        allowRc = true;
-      }
-
-      if (range === 'latest') {
-        range = '*';
-      }
-
-      let bundleUrl;
-      let bundleVersion;
-      let isV2 = false;
-
-      if (range === 'nightly' || range === 'nightlies') {
-        bundleUrl = 'https://nightly.yarnpkg.com/latest.js';
-        bundleVersion = 'nightly';
-      } else if (range === 'berry' || range === 'v2' || range === '2') {
-        bundleUrl = 'https://github.com/yarnpkg/berry/raw/master/packages/berry-cli/bin/berry.js';
-        bundleVersion = 'berry';
-        isV2 = true;
-      } else {
-        let releases = [];
-
-        try {
-          releases = yield fetchReleases(config, {
-            includePrereleases: allowRc
-          });
-        } catch (e) {
-          reporter.error(e.message);
-          return;
-        }
-
-        const release = releases.find(function (release) {
-          // $FlowFixMe
-          return semver.satisfies(release.version, range);
-        });
-
-        if (!release) {
-          throw new Error(`Release not found: ${range}`);
-        }
-
-        const asset = getBundleAsset(release);
-        invariant(asset, 'The bundle asset should exist');
-
-        bundleUrl = asset.browser_download_url;
-        bundleVersion = release.version.version;
-      }
-
-      reporter.log(`Downloading ${chalk.green(bundleUrl)}...`);
-
-      const bundle = yield fetchBundle(config, bundleUrl);
-
-      const yarnPath = path.resolve(config.lockfileFolder, `.yarn/releases/yarn-${bundleVersion}.cjs`);
-      reporter.log(`Saving it into ${chalk.magenta(yarnPath)}...`);
-      yield (_fs || _load_fs()).mkdirp(path.dirname(yarnPath));
-      yield (_fs || _load_fs()).writeFile(yarnPath, bundle);
-      yield (_fs || _load_fs()).chmod(yarnPath, 0o755);
-
-      const targetPath = path.relative(config.lockfileFolder, yarnPath).replace(/\\/g, '/');
-
-      if (isV2) {
-        const rcPath = `${config.lockfileFolder}/.yarnrc.yml`;
-        reporter.log(`Updating ${chalk.magenta(rcPath)}...`);
-
-        yield (_fs || _load_fs()).writeFilePreservingEol(rcPath, `yarnPath: ${JSON.stringify(targetPath)}\n`);
-      } else {
-        const rcPath = `${config.lockfileFolder}/.yarnrc`;
-        reporter.log(`Updating ${chalk.magenta(rcPath)}...`);
-
-        const rc = (0, (_rc || _load_rc()).getRcConfigForFolder)(config.lockfileFolder);
-        rc['yarn-path'] = targetPath;
-
-        yield (_fs || _load_fs()).writeFilePreservingEol(rcPath, `${(0, (_lockfile || _load_lockfile()).stringify)(rc)}\n`);
-      }
-
-      reporter.log(`Done!`);
-    })();
-  }
-});
-
-const run = _buildSubCommands.run,
-      setFlags = _buildSubCommands.setFlags,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.setFlags = setFlags;
-exports.examples = examples;
-
-/***/ }),
-/* 541 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let publish = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, pkg, flags, dir) {
-    let access = flags.access;
-
-    // if no access level is provided, check package.json for `publishConfig.access`
-    // see: https://docs.npmjs.com/files/package.json#publishconfig
-    if (!access && pkg && pkg.publishConfig && pkg.publishConfig.access) {
-      access = pkg.publishConfig.access;
-    }
-
-    // validate access argument
-    if (access && access !== 'public' && access !== 'restricted') {
-      throw new (_errors || _load_errors()).MessageError(config.reporter.lang('invalidAccess'));
-    }
-
-    // TODO this might modify package.json, do we need to reload it?
-    yield config.executeLifecycleScript('prepublish');
-    yield config.executeLifecycleScript('prepare');
-    yield config.executeLifecycleScript('prepublishOnly');
-    yield config.executeLifecycleScript('prepack');
-
-    // get tarball stream
-    const stat = yield (_fs || _load_fs()).lstat(dir);
-    let stream;
-    if (stat.isDirectory()) {
-      stream = yield (0, (_pack || _load_pack()).pack)(config);
-    } else if (stat.isFile()) {
-      stream = fs2.createReadStream(dir);
-    } else {
-      throw new Error("Don't know how to handle this file type");
-    }
-    const buffer = yield new Promise(function (resolve, reject) {
-      const data = [];
-      invariant(stream, 'expected stream');
-      stream.on('data', data.push.bind(data)).on('end', function () {
-        return resolve(Buffer.concat(data));
-      }).on('error', reject);
-    });
-
-    yield config.executeLifecycleScript('postpack');
-
-    // copy normalized package and remove internal keys as they may be sensitive or yarn specific
-    pkg = Object.assign({}, pkg);
-    for (const key in pkg) {
-      if (key[0] === '_') {
-        delete pkg[key];
-      }
-    }
-
-    const tag = flags.tag || 'latest';
-    const tbName = `${pkg.name}-${pkg.version}.tgz`;
-    const tbURI = `${pkg.name}/-/${tbName}`;
-
-    // create body
-    const root = {
-      _id: pkg.name,
-      access,
-      name: pkg.name,
-      description: pkg.description,
-      'dist-tags': {
-        [tag]: pkg.version
-      },
-      versions: {
-        [pkg.version]: pkg
-      },
-      readme: pkg.readme || '',
-      _attachments: {
-        [tbName]: {
-          content_type: 'application/octet-stream',
-          data: buffer.toString('base64'),
-          length: buffer.length
-        }
-      }
-    };
-
-    pkg._id = `${pkg.name}@${pkg.version}`;
-    pkg.dist = pkg.dist || {};
-    pkg.dist.shasum = crypto.createHash('sha1').update(buffer).digest('hex');
-    pkg.dist.integrity = ssri.fromData(buffer).toString();
-
-    const registry = String(config.getOption('registry'));
-    pkg.dist.tarball = url.resolve(registry, tbURI).replace(/^https:\/\//, 'http://');
-
-    // publish package
-    try {
-      yield config.registries.npm.request((_npmRegistry || _load_npmRegistry()).default.escapeName(pkg.name), {
-        registry: pkg && pkg.publishConfig && pkg.publishConfig.registry,
-        method: 'PUT',
-        body: root
-      });
-    } catch (error) {
-      throw new (_errors || _load_errors()).MessageError(config.reporter.lang('publishFail', error.message));
-    }
-
-    yield config.executeLifecycleScript('publish');
-    yield config.executeLifecycleScript('postpublish');
-  });
-
-  return function publish(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    // validate arguments
-    const dir = args[0] ? (_path || _load_path()).default.resolve(config.cwd, args[0]) : config.cwd;
-    if (args.length > 1) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('tooManyArguments', 1));
-    }
-    if (!(yield (_fs || _load_fs()).exists(dir))) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('unknownFolderOrTarball'));
-    }
-
-    const stat = yield (_fs || _load_fs()).lstat(dir);
-    let publishPath = dir;
-    if (stat.isDirectory()) {
-      config.cwd = (_path || _load_path()).default.resolve(dir);
-      publishPath = config.cwd;
-    }
-
-    // validate package fields that are required for publishing
-    // $FlowFixMe
-    const pkg = yield config.readRootManifest();
-    if (pkg.private) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('publishPrivate'));
-    }
-    if (!pkg.name) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('noName'));
-    }
-
-    let registry = '';
-
-    if (pkg && pkg.publishConfig && pkg.publishConfig.registry) {
-      registry = pkg.publishConfig.registry;
-    }
-
-    reporter.step(1, 4, reporter.lang('bumpingVersion'));
-    const commitVersion = yield (0, (_version || _load_version()).setVersion)(config, reporter, flags, [], false);
-
-    //
-    reporter.step(2, 4, reporter.lang('loggingIn'));
-    const revoke = yield (0, (_login || _load_login()).getToken)(config, reporter, pkg.name, flags, registry);
-
-    //
-    reporter.step(3, 4, reporter.lang('publishing'));
-    yield publish(config, pkg, flags, publishPath);
-    yield commitVersion();
-    reporter.success(reporter.lang('published'));
-
-    //
-    reporter.step(4, 4, reporter.lang('revokingToken'));
-    yield revoke();
-  });
-
-  return function run(_x5, _x6, _x7, _x8) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _version;
-
-function _load_version() {
-  return _version = __webpack_require__(363);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _pack;
-
-function _load_pack() {
-  return _pack = __webpack_require__(166);
-}
-
-var _login;
-
-function _load_login() {
-  return _login = __webpack_require__(107);
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const crypto = __webpack_require__(11);
-const url = __webpack_require__(24);
-const fs2 = __webpack_require__(5);
-const ssri = __webpack_require__(65);
-
-function setFlags(commander) {
-  (0, (_version || _load_version()).setFlags)(commander);
-  commander.description('Publishes a package to the npm registry.');
-  commander.usage('publish [<tarball>|<folder>] [--tag <tag>] [--access <public|restricted>]');
-  commander.option('--access [access]', 'access');
-  commander.option('--tag [tag]', 'tag');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 542 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.hasWrapper = exports.run = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let removeTeamUser = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (parts, config, reporter) {
-    reporter.step(2, 3, reporter.lang('teamRemovingUser'));
-    reporter.inspect((yield config.registries.npm.request(`team/${parts.scope}/${parts.team}/user`, {
-      method: 'DELETE',
-      body: {
-        user: parts.user
-      }
-    })));
-    return true;
-  });
-
-  return function removeTeamUser(_x5, _x6, _x7) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let list = (() => {
-  var _ref3 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (parts, config, reporter) {
-    reporter.step(2, 3, reporter.lang('teamListing'));
-    const uriParams = '?format=cli';
-    if (parts.team) {
-      reporter.inspect((yield config.registries.npm.request(`team/${parts.scope}/${parts.team}/user${uriParams}`)));
-    } else {
-      reporter.inspect((yield config.registries.npm.request(`org/${parts.scope}/team${uriParams}`)));
-    }
-    return true;
-  });
-
-  return function list(_x8, _x9, _x10) {
-    return _ref3.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _login;
-
-function _load_login() {
-  return _login = __webpack_require__(107);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function explodeScopeTeam(arg, requireTeam, reporter) {
-  var _arg$split = arg.split(':');
-
-  const scope = _arg$split[0],
-        team = _arg$split[1],
-        parts = _arg$split.slice(2);
-
-  if (parts.length) {
-    return false;
-  }
-
-  if (requireTeam && !team) {
-    return false;
-  }
-
-  return {
-    scope: scope || '',
-    team: team || '',
-    user: ''
-  };
-}
-
-function warnDeprecation(reporter, deprecationWarning) {
-  const command = 'yarn team';
-  reporter.warn(reporter.lang('deprecatedCommand', `${command} ${deprecationWarning.deprecatedCommand}`, `${command} ${deprecationWarning.currentCommand}`));
-}
-
-function wrapRequired(callback, requireTeam, deprecationInfo) {
-  return (() => {
-    var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-      if (deprecationInfo) {
-        warnDeprecation(reporter, deprecationInfo);
-      }
-
-      if (!args.length) {
-        return false;
-      }
-
-      const parts = explodeScopeTeam(args[0], requireTeam, reporter);
-      if (!parts) {
-        return false;
-      }
-
-      reporter.step(1, 3, reporter.lang('loggingIn'));
-      const revoke = yield (0, (_login || _load_login()).getToken)(config, reporter);
-
-      const res = yield callback(parts, config, reporter, flags, args);
-      if (!res) {
-        return res;
-      }
-
-      reporter.step(3, 3, reporter.lang('revokingToken'));
-      yield revoke();
-      return true;
-    });
-
-    return function (_x, _x2, _x3, _x4) {
-      return _ref.apply(this, arguments);
-    };
-  })();
-}
-
-function wrapRequiredTeam(callback, requireTeam = true, subCommandDeprecated) {
-  return wrapRequired(function (parts, config, reporter, flags, args) {
-    if (args.length === 1) {
-      return callback(parts, config, reporter, flags, args);
-    } else {
-      return false;
-    }
-  }, requireTeam, subCommandDeprecated);
-}
-
-function wrapRequiredUser(callback, subCommandDeprecated) {
-  return wrapRequired(function (parts, config, reporter, flags, args) {
-    if (args.length === 2) {
-      return callback((0, (_extends2 || _load_extends()).default)({
-        user: args[1]
-      }, parts), config, reporter, flags, args);
-    } else {
-      return false;
-    }
-  }, true, subCommandDeprecated);
-}
-
-function setFlags(commander) {
-  commander.description('Maintain team memberships');
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('team', {
-  create: wrapRequiredTeam((() => {
-    var _ref4 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (parts, config, reporter, flags, args) {
-      reporter.step(2, 3, reporter.lang('teamCreating'));
-      reporter.inspect((yield config.registries.npm.request(`team/${parts.scope}`, {
-        method: 'PUT',
-        body: {
-          team: parts.team
-        }
-      })));
-      return true;
-    });
-
-    return function (_x11, _x12, _x13, _x14, _x15) {
-      return _ref4.apply(this, arguments);
-    };
-  })()),
-
-  destroy: wrapRequiredTeam((() => {
-    var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (parts, config, reporter, flags, args) {
-      reporter.step(2, 3, reporter.lang('teamRemoving'));
-      reporter.inspect((yield config.registries.npm.request(`team/${parts.scope}/${parts.team}`, {
-        method: 'DELETE'
-      })));
-      return true;
-    });
-
-    return function (_x16, _x17, _x18, _x19, _x20) {
-      return _ref5.apply(this, arguments);
-    };
-  })()),
-
-  add: wrapRequiredUser((() => {
-    var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (parts, config, reporter, flags, args) {
-      reporter.step(2, 3, reporter.lang('teamAddingUser'));
-      reporter.inspect((yield config.registries.npm.request(`team/${parts.scope}/${parts.team}/user`, {
-        method: 'PUT',
-        body: {
-          user: parts.user
-        }
-      })));
-      return true;
-    });
-
-    return function (_x21, _x22, _x23, _x24, _x25) {
-      return _ref6.apply(this, arguments);
-    };
-  })()),
-
-  rm: wrapRequiredUser(function (parts, config, reporter, flags, args) {
-    removeTeamUser(parts, config, reporter);
-  }, {
-    deprecatedCommand: 'rm',
-    currentCommand: 'remove'
-  }),
-
-  remove: wrapRequiredUser(function (parts, config, reporter, flags, args) {
-    removeTeamUser(parts, config, reporter);
-  }),
-
-  ls: wrapRequiredTeam(function (parts, config, reporter, flags, args) {
-    list(parts, config, reporter);
-  }, false, {
-    deprecatedCommand: 'ls',
-    currentCommand: 'list'
-  }),
-
-  list: wrapRequiredTeam(function (parts, config, reporter, flags, args) {
-    list(parts, config, reporter);
-  }, false)
-}, ['create <scope:team>', 'destroy <scope:team>', 'add <scope:team> <user>', 'remove <scope:team> <user>', 'list <scope>|<scope:team>']);
-
-const run = _buildSubCommands.run,
-      hasWrapper = _buildSubCommands.hasWrapper,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.hasWrapper = hasWrapper;
-exports.examples = examples;
-
-/***/ }),
-/* 543 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (args.length) {
-      for (var _iterator = args, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref2 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref2 = _i.value;
-        }
-
-        const name = _ref2;
-
-        const linkLoc = path.join(config.linkFolder, name);
-        if (yield (_fs || _load_fs()).exists(linkLoc)) {
-          yield (_fs || _load_fs()).unlink(path.join((yield (0, (_link || _load_link()).getRegistryFolder)(config, name)), name));
-          reporter.success(reporter.lang('linkDisusing', name));
-          reporter.info(reporter.lang('linkDisusingMessage', name));
-        } else {
-          throw new (_errors || _load_errors()).MessageError(reporter.lang('linkMissing', name));
-        }
-      }
-    } else {
-      // remove from registry
-      const manifest = yield config.readRootManifest();
-      const name = manifest.name;
-      if (!name) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('unknownPackageName'));
-      }
-
-      const linkLoc = path.join(config.linkFolder, name);
-      if (yield (_fs || _load_fs()).exists(linkLoc)) {
-        // If there is a `bin` defined in the package.json,
-        // link each bin to the global bin
-        if (manifest.bin) {
-          const globalBinFolder = yield (0, (_global || _load_global()).getBinFolder)(config, flags);
-          for (const binName in manifest.bin) {
-            const binDestLoc = path.join(globalBinFolder, binName);
-            if (yield (_fs || _load_fs()).exists(binDestLoc)) {
-              yield (_fs || _load_fs()).unlink(binDestLoc);
-              if (process.platform === 'win32') {
-                yield (_fs || _load_fs()).unlink(binDestLoc + '.cmd');
-              }
-            }
-          }
-        }
-
-        yield (_fs || _load_fs()).unlink(linkLoc);
-
-        reporter.success(reporter.lang('linkUnregistered', name));
-        reporter.info(reporter.lang('linkUnregisteredMessage', name));
-      } else {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('linkMissing', name));
-      }
-    }
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _link;
-
-function _load_link() {
-  return _link = __webpack_require__(357);
-}
-
-var _global;
-
-function _load_global() {
-  return _global = __webpack_require__(121);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-function setFlags(commander) {
-  commander.description('Unlink a previously created symlink for a package.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 544 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.clearAll = exports.clearSome = exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (!config.plugnplayEnabled) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('unplugDisabled'));
-    }
-    if (!args.length && flags.clear) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('tooFewArguments', 1));
-    }
-    if (args.length && flags.clearAll) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('noArguments'));
-    }
-
-    if (flags.clearAll) {
-      yield clearAll(config);
-    } else if (flags.clear) {
-      yield clearSome(config, new Set(args));
-    } else if (args.length > 0) {
-      const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-      yield (0, (_install || _load_install()).wrapLifecycle)(config, flags, (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-        const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-        install.linker.unplugged = args;
-        yield install.init();
-      }));
-    }
-
-    const unpluggedPackageFolders = yield config.listUnpluggedPackageFolders();
-
-    for (var _iterator = unpluggedPackageFolders.values(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref3;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref3 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref3 = _i.value;
-      }
-
-      const target = _ref3;
-
-      reporter.log(target, { force: true });
-    }
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let clearSome = exports.clearSome = (() => {
-  var _ref4 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, filters) {
-    const unpluggedPackageFolders = yield config.listUnpluggedPackageFolders();
-    const removeList = [];
-
-    for (var _iterator2 = unpluggedPackageFolders.entries(), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref6;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref6 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref6 = _i2.value;
-      }
-
-      const _ref5 = _ref6;
-      const unpluggedName = _ref5[0];
-      const target = _ref5[1];
-
-      var _ref8 = yield (_fs || _load_fs()).readJson(path.join(target, 'package.json'));
-
-      const name = _ref8.name;
-
-      const toBeRemoved = filters.has(name);
-
-      if (toBeRemoved) {
-        removeList.push(path.join(config.getUnpluggedPath(), unpluggedName));
-      }
-    }
-
-    if (removeList.length === unpluggedPackageFolders.size) {
-      yield (_fs || _load_fs()).unlink(config.getUnpluggedPath());
-    } else {
-      for (var _iterator3 = removeList, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref7 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref7 = _i3.value;
-        }
-
-        const unpluggedPackagePath = _ref7;
-
-        yield (_fs || _load_fs()).unlink(unpluggedPackagePath);
-      }
-    }
-  });
-
-  return function clearSome(_x5, _x6) {
-    return _ref4.apply(this, arguments);
-  };
-})();
-
-let clearAll = exports.clearAll = (() => {
-  var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config) {
-    yield (_fs || _load_fs()).unlink(config.getUnpluggedPath());
-  });
-
-  return function clearAll(_x7) {
-    return _ref9.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-exports.setFlags = setFlags;
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-function hasWrapper(commander) {
-  return true;
-}
-
-function setFlags(commander) {
-  commander.description('Temporarily copies a package (with an optional @range suffix) outside of the global cache for debugging purposes');
-  commander.usage('unplug [packages ...] [flags]');
-  commander.option('--clear', 'Delete the selected packages');
-  commander.option('--clear-all', 'Delete all unplugged packages');
-}
-
-/***/ }),
-/* 545 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const versions = { yarn: (_yarnVersion || _load_yarnVersion()).version };
-
-    const pkg = yield config.maybeReadManifest(config.cwd);
-    if (pkg && pkg.name && pkg.version) {
-      versions[pkg.name] = pkg.version;
-    }
-
-    Object.assign(versions, process.versions);
-
-    reporter.inspect(versions);
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _yarnVersion;
-
-function _load_yarnVersion() {
-  return _yarnVersion = __webpack_require__(120);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function setFlags(commander) {
-  commander.description('Displays version information of currently installed Yarn, Node.js, and its dependencies.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 546 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = exports.requireLockfile = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let cleanQuery = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, query) {
-    // if a location was passed then turn it into a hash query
-    if (path.isAbsolute(query) && (yield (_fs || _load_fs()).exists(query))) {
-      // absolute path
-      query = path.relative(config.cwd, query);
-    }
-
-    // remove references to node_modules with hashes
-    query = query.replace(/([\\/]|^)node_modules[\\/]/g, '#');
-
-    // remove trailing hashes
-    query = query.replace(/^#+/g, '');
-
-    // remove trailing paths from each part of the query, skip second part of path for scoped packages
-    let queryParts = query.split('#');
-    queryParts = queryParts.map(function (part) {
-      let parts = part.split(/[\\/]/g);
-
-      if (part[0] === '@') {
-        parts = parts.slice(0, 2);
-      } else {
-        parts = parts.slice(0, 1);
-      }
-
-      return parts.join('/');
-    });
-    query = queryParts.join('#');
-
-    return query;
-  });
-
-  return function cleanQuery(_x, _x2) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let getPackageSize = (() => {
-  var _ref2 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (tuple) {
-    const loc = tuple[0];
-
-
-    const files = yield (_fs || _load_fs()).walk(loc, null, new Set([(_constants || _load_constants()).METADATA_FILENAME, (_constants || _load_constants()).TARBALL_FILENAME]));
-
-    const sizes = yield Promise.all(files.map(function (walkFile) {
-      return (_fs || _load_fs()).getFileSizeOnDisk(walkFile.absolute);
-    }));
-
-    return sum(sizes);
-  });
-
-  return function getPackageSize(_x3) {
-    return _ref2.apply(this, arguments);
-  };
-})();
-
-let run = exports.run = (() => {
-  var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    if (!args.length) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('missingWhyDependency'));
-    }
-    if (args.length > 1) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('tooManyArguments', 1));
-    }
-
-    const query = yield cleanQuery(config, args[0]);
-
-    reporter.step(1, 4, reporter.lang('whyStart', args[0]), emoji.get('thinking_face'));
-
-    // init
-    reporter.step(2, 4, reporter.lang('whyInitGraph'), emoji.get('truck'));
-    const lockfile = yield (_lockfile || _load_lockfile()).default.fromDirectory(config.lockfileFolder, reporter);
-    const install = new (_install || _load_install()).Install(flags, config, reporter, lockfile);
-
-    var _ref7 = yield install.fetchRequestFromCwd();
-
-    const depRequests = _ref7.requests,
-          patterns = _ref7.patterns,
-          workspaceLayout = _ref7.workspaceLayout;
-
-    yield install.resolver.init(depRequests, {
-      isFlat: install.flags.flat,
-      isFrozen: install.flags.frozenLockfile,
-      workspaceLayout
-    });
-    const hoisted = yield install.linker.getFlatHoistedTree(patterns);
-
-    // finding
-    reporter.step(3, 4, reporter.lang('whyFinding'), emoji.get('mag'));
-
-    const matches = queryWhy(query, hoisted);
-
-    if (matches.length <= 0) {
-      reporter.error(reporter.lang('whyUnknownMatch'));
-      return;
-    }
-
-    const processMatch = (() => {
-      var _ref8 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (match) {
-        const matchInfo = match[1];
-
-        const matchRef = matchInfo.pkg._reference;
-        invariant(matchRef, 'expected reference');
-
-        const distinctMatchPatterns = new Set(matchRef.patterns);
-        const reasons = [];
-
-        // reason: dependency of these modules
-        if (matchInfo.originalParentPath.length > 0) {
-          reasons.push({
-            type: 'whyDependedOn',
-            typeSimple: 'whyDependedOnSimple',
-            value: toStandardPathString(matchInfo.originalParentPath)
-          });
-        }
-
-        // reason: exists in manifest
-        let rootType;
-        for (var _iterator3 = distinctMatchPatterns, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-          var _ref9;
-
-          if (_isArray3) {
-            if (_i3 >= _iterator3.length) break;
-            _ref9 = _iterator3[_i3++];
-          } else {
-            _i3 = _iterator3.next();
-            if (_i3.done) break;
-            _ref9 = _i3.value;
-          }
-
-          const pattern = _ref9;
-
-          rootType = install.rootPatternsToOrigin[pattern];
-          if (rootType) {
-            reasons.push({
-              type: 'whySpecified',
-              typeSimple: 'whySpecifiedSimple',
-              value: rootType
-            });
-          }
-        }
-
-        // reason: this is hoisted from these modules
-        for (var _iterator4 = matchInfo.previousPaths, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref10;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref10 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref10 = _i4.value;
-          }
-
-          const path = _ref10;
-
-          reasons.push({
-            type: 'whyHoistedFrom',
-            typeSimple: 'whyHoistedFromSimple',
-            value: toStandardPathString(path)
-          });
-        }
-
-        // package sizes
-        let packageSize = 0;
-        let directSizes = [];
-        let transitiveSizes = [];
-        try {
-          packageSize = yield getPackageSize(match);
-        } catch (e) {}
-
-        const dependencies = Array.from(collect(hoisted, new Set(), match));
-        const transitiveDependencies = Array.from(collect(hoisted, new Set(), match, { recursive: true }));
-
-        try {
-          directSizes = yield Promise.all(dependencies.map(getPackageSize));
-          transitiveSizes = yield Promise.all(transitiveDependencies.map(getPackageSize));
-        } catch (e) {}
-
-        const transitiveKeys = new Set(transitiveDependencies.map(function ([, info]) {
-          return info.key;
-        }));
-        const sharedDependencies = getSharedDependencies(hoisted, transitiveKeys);
-
-        // prepare output: populate reporter
-        reporter.info(reporter.lang('whyMatch', `${matchInfo.key}@${matchInfo.pkg.version}`));
-        //
-        // reason: hoisted/nohoist
-        if (matchInfo.isNohoist) {
-          reasons.push({
-            type: 'whyNotHoisted',
-            typeSimple: 'whyNotHoistedSimple',
-            value: matchInfo.nohoistList
-          });
-        } else if (query === matchInfo.originalKey) {
-          reporter.info(reporter.lang('whyHoistedTo', matchInfo.key));
-        }
-
-        if (reasons.length === 1) {
-          reporter.info(reporter.lang(reasons[0].typeSimple, reasons[0].value));
-        } else if (reasons.length > 1) {
-          reporter.info(reporter.lang('whyReasons'));
-          reporter.list('reasons', reasons.map(function (reason) {
-            return reporter.lang(reason.type, reason.value);
-          }));
-        } else {
-          reporter.error(reporter.lang('whyWhoKnows'));
-        }
-
-        if (packageSize) {
-          // stats: file size of this dependency without any dependencies
-          reporter.info(reporter.lang('whyDiskSizeWithout', bytes(packageSize)));
-
-          // stats: file size of this dependency including dependencies that aren't shared
-          reporter.info(reporter.lang('whyDiskSizeUnique', bytes(packageSize + sum(directSizes))));
-
-          // stats: file size of this dependency including dependencies
-          reporter.info(reporter.lang('whyDiskSizeTransitive', bytes(packageSize + sum(transitiveSizes))));
-
-          // stats: shared transitive dependencies
-          reporter.info(reporter.lang('whySharedDependencies', sharedDependencies.size));
-        }
-      });
-
-      return function processMatch(_x8) {
-        return _ref8.apply(this, arguments);
-      };
-    })();
-
-    reporter.step(4, 4, reporter.lang('whyCalculating'), emoji.get('aerial_tramway'));
-    for (var _iterator5 = matches, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray5) {
-        if (_i5 >= _iterator5.length) break;
-        _ref11 = _iterator5[_i5++];
-      } else {
-        _i5 = _iterator5.next();
-        if (_i5.done) break;
-        _ref11 = _i5.value;
-      }
-
-      const match = _ref11;
-
-      yield processMatch(match);
-    }
-  });
-
-  return function run(_x4, _x5, _x6, _x7) {
-    return _ref6.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-exports.queryWhy = queryWhy;
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const requireLockfile = exports.requireLockfile = true;
-
-const invariant = __webpack_require__(9);
-const bytes = __webpack_require__(596);
-const emoji = __webpack_require__(302);
-const path = __webpack_require__(0);
-
-function sum(array) {
-  return array.length ? array.reduce((a, b) => a + b, 0) : 0;
-}
-
-function collect(hoistManifests, allDependencies, dependency, { recursive } = { recursive: false }) {
-  const depInfo = dependency[1];
-
-  const deps = depInfo.pkg.dependencies;
-
-  if (!deps) {
-    return allDependencies;
-  }
-
-  const dependencyKeys = new Set(Object.keys(deps));
-  const directDependencies = [];
-
-  for (var _iterator = hoistManifests, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref3;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref3 = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref3 = _i.value;
-    }
-
-    const dep = _ref3;
-    const info = dep[1];
-
-
-    if (!allDependencies.has(dep) && dependencyKeys.has(info.key)) {
-      allDependencies.add(dep);
-      directDependencies.push(dep);
-    }
-  }
-
-  if (recursive) {
-    directDependencies.forEach(dependency => collect(hoistManifests, allDependencies, dependency, { recursive: true }));
-  }
-
-  return allDependencies;
-}
-
-function getSharedDependencies(hoistManifests, transitiveKeys) {
-  const sharedDependencies = new Set();
-  for (var _iterator2 = hoistManifests, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref5;
-
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref5 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref5 = _i2.value;
-    }
-
-    const _ref4 = _ref5;
-    const info = _ref4[1];
-
-    if (!transitiveKeys.has(info.key) && info.pkg.dependencies) {
-      Object.keys(info.pkg.dependencies).forEach(dependency => {
-        if (transitiveKeys.has(dependency) && !sharedDependencies.has(dependency)) {
-          sharedDependencies.add(dependency);
-        }
-      });
-    }
-  }
-  return sharedDependencies;
-}
-
-function setFlags(commander) {
-  commander.description('Identifies why a package has been installed, detailing which other packages depend on it.');
-}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-// to conform to the current standard '#' as package tree separator
-function toStandardPathString(pathString) {
-  const str = pathString.replace(/\//g, '#');
-  if (str[0] === '#') {
-    return str.slice(1);
-  }
-  return str;
-}
-
-function queryWhy(pattern, hoisted) {
-  const nohoistPattern = `#${pattern}`;
-  const found = [];
-  for (var _iterator6 = hoisted, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-    var _ref13;
-
-    if (_isArray6) {
-      if (_i6 >= _iterator6.length) break;
-      _ref13 = _iterator6[_i6++];
-    } else {
-      _i6 = _iterator6.next();
-      if (_i6.done) break;
-      _ref13 = _i6.value;
-    }
-
-    const _ref12 = _ref13;
-    const loc = _ref12[0];
-    const info = _ref12[1];
-
-    if (info.key === pattern || info.previousPaths.indexOf(pattern) >= 0 || info.key.endsWith(nohoistPattern)) {
-      found.push([loc, info]);
-    }
-  }
-  return found;
-}
-
-/***/ }),
-/* 547 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.run = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let run = exports.run = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const workspaceRootFolder = config.workspaceRootFolder;
-
-
-    if (!workspaceRootFolder) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceRootNotFound', config.cwd));
-    }
-
-    if (args.length < 1) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceMissingWorkspace'));
-    }
-
-    if (args.length < 2) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceMissingCommand'));
-    }
-
-    const manifest = yield config.findManifest(workspaceRootFolder, false);
-    invariant(manifest && manifest.workspaces, 'We must find a manifest with a "workspaces" property');
-
-    const workspaces = yield config.resolveWorkspaces(workspaceRootFolder, manifest);
-
-    var _ref2 = args || [];
-
-    const workspaceName = _ref2[0],
-          rest = _ref2.slice(1);
-
-    if (!Object.prototype.hasOwnProperty.call(workspaces, workspaceName)) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceUnknownWorkspace', workspaceName));
-    }
-
-    const workspace = workspaces[workspaceName];
-
-    try {
-      yield (_child || _load_child()).spawn((_constants || _load_constants()).NODE_BIN_PATH, [(_constants || _load_constants()).YARN_BIN_PATH, ...rest], {
-        stdio: 'inherit',
-        cwd: workspace.loc
-      });
-    } catch (err) {
-      throw err;
-    }
-  });
-
-  return function run(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.setFlags = setFlags;
-exports.hasWrapper = hasWrapper;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-function setFlags(commander) {}
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-/***/ }),
-/* 548 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.examples = exports.setFlags = exports.run = exports.runScript = exports.info = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let info = exports.info = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const workspaceRootFolder = config.workspaceRootFolder;
-
-
-    if (!workspaceRootFolder) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceRootNotFound', config.cwd));
-    }
-
-    const manifest = yield config.findManifest(workspaceRootFolder, false);
-    invariant(manifest && manifest.workspaces, 'We must find a manifest with a "workspaces" property');
-
-    const workspaces = yield config.resolveWorkspaces(workspaceRootFolder, manifest);
-
-    const publicData = {};
-
-    for (var _iterator = Object.keys(workspaces), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref2 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref2 = _i.value;
-      }
-
-      const workspaceName = _ref2;
-      var _workspaces$workspace = workspaces[workspaceName];
-      const loc = _workspaces$workspace.loc,
-            manifest = _workspaces$workspace.manifest;
-
-
-      const workspaceDependencies = new Set();
-      const mismatchedWorkspaceDependencies = new Set();
-
-      for (var _iterator2 = (_constants || _load_constants()).DEPENDENCY_TYPES, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const dependencyType = _ref3;
-
-        if (dependencyType !== 'peerDependencies') {
-          for (var _iterator3 = Object.keys(manifest[dependencyType] || {}), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-            var _ref4;
-
-            if (_isArray3) {
-              if (_i3 >= _iterator3.length) break;
-              _ref4 = _iterator3[_i3++];
-            } else {
-              _i3 = _iterator3.next();
-              if (_i3.done) break;
-              _ref4 = _i3.value;
-            }
-
-            const dependencyName = _ref4;
-
-            if (Object.prototype.hasOwnProperty.call(workspaces, dependencyName)) {
-              invariant(manifest && manifest[dependencyType], 'The request should exist');
-              const requestedRange = manifest[dependencyType][dependencyName];
-              if (semver.satisfies(workspaces[dependencyName].manifest.version, requestedRange)) {
-                workspaceDependencies.add(dependencyName);
-              } else {
-                mismatchedWorkspaceDependencies.add(dependencyName);
-              }
-            }
-          }
-        }
-      }
-
-      publicData[workspaceName] = {
-        location: path.relative(config.lockfileFolder, loc).replace(/\\/g, '/'),
-        workspaceDependencies: Array.from(workspaceDependencies),
-        mismatchedWorkspaceDependencies: Array.from(mismatchedWorkspaceDependencies)
-      };
-    }
-
-    reporter.log(JSON.stringify(publicData, null, 2), { force: true });
-  });
-
-  return function info(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let runScript = exports.runScript = (() => {
-  var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, reporter, flags, args) {
-    const workspaceRootFolder = config.workspaceRootFolder;
-
-
-    if (!workspaceRootFolder) {
-      throw new (_errors || _load_errors()).MessageError(reporter.lang('workspaceRootNotFound', config.cwd));
-    }
-
-    const manifest = yield config.findManifest(workspaceRootFolder, false);
-    invariant(manifest && manifest.workspaces, 'We must find a manifest with a "workspaces" property');
-
-    const workspaces = yield config.resolveWorkspaces(workspaceRootFolder, manifest);
-
-    try {
-      for (var _iterator4 = Object.keys(workspaces), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray4) {
-          if (_i4 >= _iterator4.length) break;
-          _ref6 = _iterator4[_i4++];
-        } else {
-          _i4 = _iterator4.next();
-          if (_i4.done) break;
-          _ref6 = _i4.value;
-        }
-
-        const workspaceName = _ref6;
-        const loc = workspaces[workspaceName].loc;
-
-        reporter.log(`${os.EOL}> ${workspaceName}`);
-        yield (_child || _load_child()).spawn((_constants2 || _load_constants2()).NODE_BIN_PATH, [(_constants2 || _load_constants2()).YARN_BIN_PATH, 'run', ...args], {
-          stdio: 'inherit',
-          cwd: loc
-        });
-      }
-    } catch (err) {
-      throw err;
-    }
-  });
-
-  return function runScript(_x5, _x6, _x7, _x8) {
-    return _ref5.apply(this, arguments);
-  };
-})();
-
-exports.hasWrapper = hasWrapper;
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _buildSubCommands2;
-
-function _load_buildSubCommands() {
-  return _buildSubCommands2 = _interopRequireDefault(__webpack_require__(59));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _child;
-
-function _load_child() {
-  return _child = _interopRequireWildcard(__webpack_require__(58));
-}
-
-var _constants2;
-
-function _load_constants2() {
-  return _constants2 = __webpack_require__(8);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-const os = __webpack_require__(46);
-const semver = __webpack_require__(22);
-
-function hasWrapper(commander, args) {
-  return true;
-}
-
-var _buildSubCommands = (0, (_buildSubCommands2 || _load_buildSubCommands()).default)('workspaces', {
-  info(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield info(config, reporter, flags, args);
-    })();
-  },
-  run(config, reporter, flags, args) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield runScript(config, reporter, flags, args);
-    })();
-  }
-});
-
-const run = _buildSubCommands.run,
-      setFlags = _buildSubCommands.setFlags,
-      examples = _buildSubCommands.examples;
-exports.run = run;
-exports.setFlags = setFlags;
-exports.examples = examples;
-
-/***/ }),
-/* 549 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* WEBPACK VAR INJECTION */(function(module) {
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.autoRun = exports.main = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let main = exports.main = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ({
-    startArgs,
-    args,
-    endArgs
-  }) {
-    const collect = function collect(val, acc) {
-      acc.push(val);
-      return acc;
-    };
-
-    (0, (_loudRejection || _load_loudRejection()).default)();
-    (0, (_signalHandler || _load_signalHandler()).default)();
-
-    // set global options
-    (_commander || _load_commander()).default.version((_yarnVersion || _load_yarnVersion()).version, '-v, --version');
-    (_commander || _load_commander()).default.usage('[command] [flags]');
-    (_commander || _load_commander()).default.option('--no-default-rc', 'prevent Yarn from automatically detecting yarnrc and npmrc files');
-    (_commander || _load_commander()).default.option('--use-yarnrc <path>', 'specifies a yarnrc file that Yarn should use (.yarnrc only, not .npmrc)', collect, []);
-    (_commander || _load_commander()).default.option('--verbose', 'output verbose messages on internal operations');
-    (_commander || _load_commander()).default.option('--offline', 'trigger an error if any required dependencies are not available in local cache');
-    (_commander || _load_commander()).default.option('--prefer-offline', 'use network only if dependencies are not available in local cache');
-    (_commander || _load_commander()).default.option('--enable-pnp, --pnp', "enable the Plug'n'Play installation");
-    (_commander || _load_commander()).default.option('--disable-pnp', "disable the Plug'n'Play installation");
-    (_commander || _load_commander()).default.option('--strict-semver');
-    (_commander || _load_commander()).default.option('--json', 'format Yarn log messages as lines of JSON (see jsonlines.org)');
-    (_commander || _load_commander()).default.option('--ignore-scripts', "don't run lifecycle scripts");
-    (_commander || _load_commander()).default.option('--har', 'save HAR output of network traffic');
-    (_commander || _load_commander()).default.option('--ignore-platform', 'ignore platform checks');
-    (_commander || _load_commander()).default.option('--ignore-engines', 'ignore engines check');
-    (_commander || _load_commander()).default.option('--ignore-optional', 'ignore optional dependencies');
-    (_commander || _load_commander()).default.option('--force', 'install and build packages even if they were built before, overwrite lockfile');
-    (_commander || _load_commander()).default.option('--skip-integrity-check', 'run install without checking if node_modules is installed');
-    (_commander || _load_commander()).default.option('--check-files', 'install will verify file tree of packages for consistency');
-    (_commander || _load_commander()).default.option('--no-bin-links', "don't generate bin links when setting up packages");
-    (_commander || _load_commander()).default.option('--flat', 'only allow one version of a package');
-    (_commander || _load_commander()).default.option('--prod, --production [prod]', '', (_conversion || _load_conversion()).boolify);
-    (_commander || _load_commander()).default.option('--no-lockfile', "don't read or generate a lockfile");
-    (_commander || _load_commander()).default.option('--pure-lockfile', "don't generate a lockfile");
-    (_commander || _load_commander()).default.option('--frozen-lockfile', "don't generate a lockfile and fail if an update is needed");
-    (_commander || _load_commander()).default.option('--update-checksums', 'update package checksums from current repository');
-    (_commander || _load_commander()).default.option('--link-duplicates', 'create hardlinks to the repeated modules in node_modules');
-    (_commander || _load_commander()).default.option('--link-folder <path>', 'specify a custom folder to store global links');
-    (_commander || _load_commander()).default.option('--global-folder <path>', 'specify a custom folder to store global packages');
-    (_commander || _load_commander()).default.option('--modules-folder <path>', 'rather than installing modules into the node_modules folder relative to the cwd, output them here');
-    (_commander || _load_commander()).default.option('--preferred-cache-folder <path>', 'specify a custom folder to store the yarn cache if possible');
-    (_commander || _load_commander()).default.option('--cache-folder <path>', 'specify a custom folder that must be used to store the yarn cache');
-    (_commander || _load_commander()).default.option('--mutex <type>[:specifier]', 'use a mutex to ensure only one yarn instance is executing');
-    (_commander || _load_commander()).default.option('--emoji [bool]', 'enable emoji in output', (_conversion || _load_conversion()).boolify, process.platform === 'darwin' || process.env.TERM_PROGRAM === 'Hyper' || process.env.TERM_PROGRAM === 'HyperTerm' || process.env.TERM_PROGRAM === 'Terminus');
-    (_commander || _load_commander()).default.option('-s, --silent', 'skip Yarn console logs, other types of logs (script output) will be printed');
-    (_commander || _load_commander()).default.option('--cwd <cwd>', 'working directory to use', process.cwd());
-    (_commander || _load_commander()).default.option('--proxy <host>', '');
-    (_commander || _load_commander()).default.option('--https-proxy <host>', '');
-    (_commander || _load_commander()).default.option('--registry <url>', 'override configuration registry');
-    (_commander || _load_commander()).default.option('--no-progress', 'disable progress bar');
-    (_commander || _load_commander()).default.option('--network-concurrency <number>', 'maximum number of concurrent network requests', parseInt);
-    (_commander || _load_commander()).default.option('--network-timeout <milliseconds>', 'TCP timeout for network requests', parseInt);
-    (_commander || _load_commander()).default.option('--non-interactive', 'do not show interactive prompts');
-    (_commander || _load_commander()).default.option('--scripts-prepend-node-path [bool]', 'prepend the node executable dir to the PATH in scripts', (_conversion || _load_conversion()).boolify);
-    (_commander || _load_commander()).default.option('--no-node-version-check', 'do not warn when using a potentially unsupported Node version');
-    (_commander || _load_commander()).default.option('--focus', 'Focus on a single workspace by installing remote copies of its sibling workspaces.');
-    (_commander || _load_commander()).default.option('--otp <otpcode>', 'one-time password for two factor authentication');
-
-    // if -v is the first command, then always exit after returning the version
-    if (args[0] === '-v') {
-      console.log((_yarnVersion || _load_yarnVersion()).version.trim());
-      process.exitCode = 0;
-      return;
-    }
-
-    // get command name
-    const firstNonFlagIndex = args.findIndex(function (arg, idx, arr) {
-      const isOption = arg.startsWith('-');
-      const prev = idx > 0 && arr[idx - 1];
-      const prevOption = prev && prev.startsWith('-') && (_commander || _load_commander()).default.optionFor(prev);
-      const boundToPrevOption = prevOption && (prevOption.optional || prevOption.required);
-
-      return !isOption && !boundToPrevOption;
-    });
-    let preCommandArgs;
-    let commandName = '';
-    if (firstNonFlagIndex > -1) {
-      preCommandArgs = args.slice(0, firstNonFlagIndex);
-      commandName = args[firstNonFlagIndex];
-      args = args.slice(firstNonFlagIndex + 1);
-    } else {
-      preCommandArgs = args;
-      args = [];
-    }
-
-    let isKnownCommand = Object.prototype.hasOwnProperty.call((_index3 || _load_index3()).default, commandName);
-    const isHelp = function isHelp(arg) {
-      return arg === '--help' || arg === '-h';
-    };
-    const helpInPre = preCommandArgs.findIndex(isHelp);
-    const helpInArgs = args.findIndex(isHelp);
-    const setHelpMode = function setHelpMode() {
-      if (isKnownCommand) {
-        args.unshift(commandName);
-      }
-      commandName = 'help';
-      isKnownCommand = true;
-    };
-
-    if (helpInPre > -1) {
-      preCommandArgs.splice(helpInPre);
-      setHelpMode();
-    } else if (isKnownCommand && helpInArgs === 0) {
-      args.splice(helpInArgs);
-      setHelpMode();
-    }
-
-    if (!commandName) {
-      commandName = 'install';
-      isKnownCommand = true;
-    }
-    if (commandName === 'set' && args[0] === 'version') {
-      commandName = 'policies';
-      args.splice(0, 1, 'set-version');
-      isKnownCommand = true;
-    }
-    if (!isKnownCommand) {
-      // if command is not recognized, then set default to `run`
-      args.unshift(commandName);
-      commandName = 'run';
-    }
-    const command = (_index3 || _load_index3()).default[commandName];
-
-    let warnAboutRunDashDash = false;
-    // we are using "yarn <script> -abc", "yarn run <script> -abc", or "yarn node -abc", we want -abc
-    // to be script options, not yarn options
-
-    // PROXY_COMMANDS is a map of command name to the number of preservedArgs
-    const PROXY_COMMANDS = {
-      run: 1, // yarn run {command}
-      create: 1, // yarn create {project}
-      node: 0, // yarn node
-      workspaces: 1, // yarn workspaces {command}
-      workspace: 2 // yarn workspace {package} {command}
-    };
-    if (PROXY_COMMANDS.hasOwnProperty(commandName)) {
-      if (endArgs.length === 0) {
-        // $FlowFixMe doesn't like that PROXY_COMMANDS doesn't have keys for all commands.
-        let preservedArgs = PROXY_COMMANDS[commandName];
-
-        // If the --into option immediately follows the command (or the script name in the "run/create"
-        // case), we parse them as regular options so that we can cd into them
-        if (args[preservedArgs] === `--into`) {
-          preservedArgs += 2;
-        }
-        endArgs = ['--', ...args.splice(preservedArgs)];
-      } else {
-        warnAboutRunDashDash = true;
-      }
-    }
-
-    args = [...preCommandArgs, ...args];
-
-    command.setFlags((_commander || _load_commander()).default);
-    (_commander || _load_commander()).default.parse([...startArgs,
-    // we use this for https://github.com/tj/commander.js/issues/346, otherwise
-    // it will strip some args that match with any options
-    'this-arg-will-get-stripped-later', ...(0, (_rc || _load_rc()).getRcArgs)(commandName, args), ...args]);
-    (_commander || _load_commander()).default.args = (_commander || _load_commander()).default.args.concat(endArgs.slice(1));
-
-    // we strip cmd
-    console.assert((_commander || _load_commander()).default.args.length >= 1);
-    console.assert((_commander || _load_commander()).default.args[0] === 'this-arg-will-get-stripped-later');
-    (_commander || _load_commander()).default.args.shift();
-
-    //
-    const Reporter = (_commander || _load_commander()).default.json ? (_index || _load_index()).JSONReporter : (_index || _load_index()).ConsoleReporter;
-    const reporter = new Reporter({
-      emoji: process.stdout.isTTY && (_commander || _load_commander()).default.emoji,
-      verbose: (_commander || _load_commander()).default.verbose,
-      noProgress: !(_commander || _load_commander()).default.progress,
-      isSilent: (0, (_conversion || _load_conversion()).boolifyWithDefault)(process.env.YARN_SILENT, false) || (_commander || _load_commander()).default.silent,
-      nonInteractive: (_commander || _load_commander()).default.nonInteractive
-    });
-
-    const exit = function exit(exitCode) {
-      process.exitCode = exitCode || 0;
-      reporter.close();
-    };
-
-    reporter.initPeakMemoryCounter();
-
-    const config = new (_config || _load_config()).default(reporter);
-    const outputWrapperEnabled = (0, (_conversion || _load_conversion()).boolifyWithDefault)(process.env.YARN_WRAP_OUTPUT, true);
-    const shouldWrapOutput = outputWrapperEnabled && !(_commander || _load_commander()).default.json && command.hasWrapper((_commander || _load_commander()).default, (_commander || _load_commander()).default.args) && !(commandName === 'init' && (_commander || _load_commander()).default[`2`]);
-
-    if (shouldWrapOutput) {
-      reporter.header(commandName, { name: 'yarn', version: (_yarnVersion || _load_yarnVersion()).version });
-    }
-
-    if ((_commander || _load_commander()).default.nodeVersionCheck && !(_semver || _load_semver()).default.satisfies(process.versions.node, (_constants || _load_constants()).SUPPORTED_NODE_VERSIONS)) {
-      reporter.warn(reporter.lang('unsupportedNodeVersion', process.versions.node, (_constants || _load_constants()).SUPPORTED_NODE_VERSIONS));
-    }
-
-    if (command.noArguments && (_commander || _load_commander()).default.args.length) {
-      reporter.error(reporter.lang('noArguments'));
-      reporter.info(command.getDocsInfo);
-      exit(1);
-      return;
-    }
-
-    //
-    if ((_commander || _load_commander()).default.yes) {
-      reporter.warn(reporter.lang('yesWarning'));
-    }
-
-    //
-    if (!(_commander || _load_commander()).default.offline && (_network || _load_network()).isOffline()) {
-      reporter.warn(reporter.lang('networkWarning'));
-    }
-
-    //
-    const run = function run() {
-      (0, (_invariant || _load_invariant()).default)(command, 'missing command');
-
-      if (warnAboutRunDashDash) {
-        reporter.warn(reporter.lang('dashDashDeprecation'));
-      }
-
-      return command.run(config, reporter, (_commander || _load_commander()).default, (_commander || _load_commander()).default.args).then(function (exitCode) {
-        if (shouldWrapOutput) {
-          reporter.footer(false);
-        }
-        return exitCode;
-      });
-    };
-
-    //
-    const runEventuallyWithFile = function runEventuallyWithFile(mutexFilename, isFirstTime) {
-      return new Promise(function (resolve) {
-        const lockFilename = mutexFilename || (_path || _load_path()).default.join(config.cwd, (_constants || _load_constants()).SINGLE_INSTANCE_FILENAME);
-        (_properLockfile || _load_properLockfile()).default.lock(lockFilename, { realpath: false }, function (err, release) {
-          if (err) {
-            if (isFirstTime) {
-              reporter.warn(reporter.lang('waitingInstance'));
-            }
-            setTimeout(function () {
-              resolve(runEventuallyWithFile(mutexFilename, false));
-            }, 200); // do not starve the CPU
-          } else {
-            (0, (_death || _load_death()).default)(function () {
-              process.exitCode = 1;
-            });
-            resolve(run().then(function () {
-              return new Promise(function (resolve) {
-                return release(resolve);
-              });
-            }));
-          }
-        });
-      });
-    };
-
-    const runEventuallyWithNetwork = function runEventuallyWithNetwork(mutexPort) {
-      return new Promise(function (resolve, reject) {
-        const connectionOptions = {
-          port: +mutexPort || (_constants || _load_constants()).SINGLE_INSTANCE_PORT,
-          host: 'localhost'
-        };
-
-        function startServer() {
-          const clients = new Set();
-          const server = (_http || _load_http()).default.createServer(manager);
-
-          // The server must not prevent us from exiting
-          server.unref();
-
-          // No socket must timeout, so that they aren't closed before we exit
-          server.timeout = 0;
-
-          // If we fail to setup the server, we ask the existing one for its name
-          server.on('error', () => {
-            reportServerName();
-          });
-
-          // If we succeed, keep track of all the connected sockets to close them later
-          server.on('connection', socket => {
-            clients.add(socket);
-            socket.on('close', () => {
-              clients.delete(socket);
-            });
-          });
-
-          server.listen(connectionOptions, () => {
-            // Don't forget to kill the sockets if we're being killed via signals
-            (0, (_death || _load_death()).default)(killSockets);
-
-            // Also kill the sockets if we finish, whether it's a success or a failure
-            run().then(res => {
-              killSockets();
-              resolve(res);
-            }, err => {
-              killSockets();
-              reject(err);
-            });
-          });
-
-          function manager(request, response) {
-            response.writeHead(200);
-            response.end(JSON.stringify({ cwd: config.cwd, pid: process.pid }));
-          }
-
-          function killSockets() {
-            try {
-              server.close();
-            } catch (err) {
-              // best effort
-            }
-
-            for (var _iterator = clients, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-              var _ref2;
-
-              if (_isArray) {
-                if (_i >= _iterator.length) break;
-                _ref2 = _iterator[_i++];
-              } else {
-                _i = _iterator.next();
-                if (_i.done) break;
-                _ref2 = _i.value;
-              }
-
-              const socket = _ref2;
-
-              try {
-                socket.destroy();
-              } catch (err) {
-                // best effort
-              }
-            }
-
-            // If the process hasn't exited in the next 5s, it has stalled and we abort
-            const timeout = setTimeout(() => {
-              console.error('Process stalled');
-              if (process._getActiveHandles) {
-                console.error('Active handles:');
-                // $FlowFixMe: getActiveHandles is undocumented, but it exists
-                for (var _iterator2 = process._getActiveHandles(), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-                  var _ref3;
-
-                  if (_isArray2) {
-                    if (_i2 >= _iterator2.length) break;
-                    _ref3 = _iterator2[_i2++];
-                  } else {
-                    _i2 = _iterator2.next();
-                    if (_i2.done) break;
-                    _ref3 = _i2.value;
-                  }
-
-                  const handle = _ref3;
-
-                  console.error(`  - ${handle.constructor.name}`);
-                }
-              }
-              // eslint-disable-next-line no-process-exit
-              process.exit(1);
-            }, 5000);
-
-            // This timeout must not prevent us from exiting
-            // $FlowFixMe: Node's setTimeout returns a Timeout, not a Number
-            timeout.unref();
-          }
-        }
-
-        function reportServerName() {
-          const request = (_http || _load_http()).default.get(connectionOptions, response => {
-            const buffers = [];
-
-            response.on('data', buffer => {
-              buffers.push(buffer);
-            });
-
-            response.on('end', () => {
-              try {
-                var _JSON$parse = JSON.parse(Buffer.concat(buffers).toString());
-
-                const cwd = _JSON$parse.cwd,
-                      pid = _JSON$parse.pid;
-
-                reporter.warn(reporter.lang('waitingNamedInstance', pid, cwd));
-              } catch (error) {
-                reporter.verbose(error);
-                reject(new Error(reporter.lang('mutexPortBusy', connectionOptions.port)));
-                return;
-              }
-              waitForTheNetwork();
-            });
-
-            response.on('error', () => {
-              startServer();
-            });
-          });
-
-          request.on('error', () => {
-            startServer();
-          });
-        }
-
-        function waitForTheNetwork() {
-          const socket = (_net || _load_net()).default.createConnection(connectionOptions);
-
-          socket.on('error', () => {
-            // catch & ignore, the retry is handled in 'close'
-          });
-
-          socket.on('close', () => {
-            startServer();
-          });
-        }
-
-        startServer();
-      });
-    };
-
-    function onUnexpectedError(err) {
-      function indent(str) {
-        return '\n  ' + str.trim().split('\n').join('\n  ');
-      }
-
-      const log = [];
-      log.push(`Arguments: ${indent(process.argv.join(' '))}`);
-      log.push(`PATH: ${indent(process.env.PATH || 'undefined')}`);
-      log.push(`Yarn version: ${indent((_yarnVersion || _load_yarnVersion()).version)}`);
-      log.push(`Node version: ${indent(process.versions.node)}`);
-      log.push(`Platform: ${indent(process.platform + ' ' + process.arch)}`);
-
-      log.push(`Trace: ${indent(err.stack)}`);
-
-      // add manifests
-      for (var _iterator3 = (_index2 || _load_index2()).registryNames, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref4 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref4 = _i3.value;
-        }
-
-        const registryName = _ref4;
-
-        const possibleLoc = (_path || _load_path()).default.join(config.cwd, (_index2 || _load_index2()).registries[registryName].filename);
-        const manifest = (_fs || _load_fs()).default.existsSync(possibleLoc) ? (_fs || _load_fs()).default.readFileSync(possibleLoc, 'utf8') : 'No manifest';
-        log.push(`${registryName} manifest: ${indent(manifest)}`);
-      }
-
-      // lockfile
-      const lockLoc = (_path || _load_path()).default.join(config.lockfileFolder || config.cwd, // lockfileFolder might not be set at this point
-      (_constants || _load_constants()).LOCKFILE_FILENAME);
-      const lockfile = (_fs || _load_fs()).default.existsSync(lockLoc) ? (_fs || _load_fs()).default.readFileSync(lockLoc, 'utf8') : 'No lockfile';
-      log.push(`Lockfile: ${indent(lockfile)}`);
-
-      const errorReportLoc = writeErrorReport(log);
-
-      reporter.error(reporter.lang('unexpectedError', err.message));
-
-      if (errorReportLoc) {
-        reporter.info(reporter.lang('bugReport', errorReportLoc));
-      }
-    }
-
-    function writeErrorReport(log) {
-      const errorReportLoc = config.enableMetaFolder ? (_path || _load_path()).default.join(config.cwd, (_constants || _load_constants()).META_FOLDER, 'yarn-error.log') : (_path || _load_path()).default.join(config.cwd, 'yarn-error.log');
-
-      try {
-        (_fs || _load_fs()).default.writeFileSync(errorReportLoc, log.join('\n\n') + '\n');
-      } catch (err) {
-        reporter.error(reporter.lang('fileWriteError', errorReportLoc, err.message));
-        return undefined;
-      }
-
-      return errorReportLoc;
-    }
-
-    const cwd = command.shouldRunInCurrentCwd ? (_commander || _load_commander()).default.cwd : findProjectRoot((_commander || _load_commander()).default.cwd);
-
-    const folderOptionKeys = ['linkFolder', 'globalFolder', 'preferredCacheFolder', 'cacheFolder', 'modulesFolder'];
-
-    // Resolve all folder options relative to cwd
-    const resolvedFolderOptions = {};
-    folderOptionKeys.forEach(function (folderOptionKey) {
-      const folderOption = (_commander || _load_commander()).default[folderOptionKey];
-      const resolvedFolderOption = folderOption ? (_path || _load_path()).default.resolve((_commander || _load_commander()).default.cwd, folderOption) : folderOption;
-      resolvedFolderOptions[folderOptionKey] = resolvedFolderOption;
-    });
-
-    yield config.init((0, (_extends2 || _load_extends()).default)({
-      cwd,
-      commandName
-    }, resolvedFolderOptions, {
-      enablePnp: (_commander || _load_commander()).default.pnp,
-      disablePnp: (_commander || _load_commander()).default.disablePnp,
-      enableDefaultRc: (_commander || _load_commander()).default.defaultRc,
-      extraneousYarnrcFiles: (_commander || _load_commander()).default.useYarnrc,
-      binLinks: (_commander || _load_commander()).default.binLinks,
-      preferOffline: (_commander || _load_commander()).default.preferOffline,
-      captureHar: (_commander || _load_commander()).default.har,
-      ignorePlatform: (_commander || _load_commander()).default.ignorePlatform,
-      ignoreEngines: (_commander || _load_commander()).default.ignoreEngines,
-      ignoreScripts: (_commander || _load_commander()).default.ignoreScripts,
-      offline: (_commander || _load_commander()).default.preferOffline || (_commander || _load_commander()).default.offline,
-      looseSemver: !(_commander || _load_commander()).default.strictSemver,
-      production: (_commander || _load_commander()).default.production,
-      httpProxy: (_commander || _load_commander()).default.proxy,
-      httpsProxy: (_commander || _load_commander()).default.httpsProxy,
-      registry: (_commander || _load_commander()).default.registry,
-      networkConcurrency: (_commander || _load_commander()).default.networkConcurrency,
-      networkTimeout: (_commander || _load_commander()).default.networkTimeout,
-      nonInteractive: (_commander || _load_commander()).default.nonInteractive,
-      updateChecksums: (_commander || _load_commander()).default.updateChecksums,
-      focus: (_commander || _load_commander()).default.focus,
-      otp: (_commander || _load_commander()).default.otp
-    })).then(function () {
-      // lockfile check must happen after config.init sets lockfileFolder
-      if (command.requireLockfile && !(_fs || _load_fs()).default.existsSync((_path || _load_path()).default.join(config.lockfileFolder, (_constants || _load_constants()).LOCKFILE_FILENAME))) {
-        throw new (_errors || _load_errors()).MessageError(reporter.lang('noRequiredLockfile'));
-      }
-
-      // option "no-progress" stored in yarn config
-      const noProgressConfig = config.registries.yarn.getOption('no-progress');
-
-      if (noProgressConfig) {
-        reporter.disableProgress();
-      }
-
-      // verbose logs outputs process.uptime() with this line we can sync uptime to absolute time on the computer
-      reporter.verbose(`current time: ${new Date().toISOString()}`);
-
-      const mutex = (_commander || _load_commander()).default.mutex;
-      if (mutex && typeof mutex === 'string') {
-        const separatorLoc = mutex.indexOf(':');
-        let mutexType;
-        let mutexSpecifier;
-        if (separatorLoc === -1) {
-          mutexType = mutex;
-          mutexSpecifier = undefined;
-        } else {
-          mutexType = mutex.substring(0, separatorLoc);
-          mutexSpecifier = mutex.substring(separatorLoc + 1);
-        }
-
-        if (mutexType === 'file') {
-          return runEventuallyWithFile(mutexSpecifier, true).then(exit);
-        } else if (mutexType === 'network') {
-          return runEventuallyWithNetwork(mutexSpecifier).then(exit);
-        } else {
-          throw new (_errors || _load_errors()).MessageError(`Unknown single instance type ${mutexType}`);
-        }
-      } else {
-        return run().then(exit);
-      }
-    }).catch(function (err) {
-      reporter.verbose(err.stack);
-
-      if (err instanceof (_errors2 || _load_errors2()).ProcessTermError && reporter.isSilent) {
-        return exit(err.EXIT_CODE || 1);
-      }
-
-      if (err instanceof (_errors || _load_errors()).MessageError) {
-        reporter.error(err.message);
-      } else {
-        onUnexpectedError(err);
-      }
-
-      if (command.getDocsInfo) {
-        reporter.info(command.getDocsInfo);
-      }
-
-      if (err instanceof (_errors2 || _load_errors2()).ProcessTermError) {
-        return exit(err.EXIT_CODE || 1);
-      }
-
-      return exit(1);
-    });
-  });
-
-  return function main(_x) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-let start = (() => {
-  var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-    const rc = (0, (_rc || _load_rc()).getRcConfigForCwd)(process.cwd(), process.argv.slice(2));
-    const yarnPath = rc['yarn-path'] || rc['yarnPath'];
-
-    if (yarnPath && !(0, (_conversion || _load_conversion()).boolifyWithDefault)(process.env.YARN_IGNORE_PATH, false)) {
-      const argv = process.argv.slice(2);
-      const opts = { stdio: 'inherit', env: Object.assign({}, process.env, { YARN_IGNORE_PATH: 1 }) };
-      let exitCode = 0;
-
-      process.on(`SIGINT`, function () {
-        // We don't want SIGINT to kill our process; we want it to kill the
-        // innermost process, whose end will cause our own to exit.
-      });
-
-      try {
-        if (/\.[cm]?js$/.test(yarnPath)) {
-          exitCode = yield (0, (_child || _load_child()).spawnp)(process.execPath, [yarnPath, ...argv], opts);
-        } else {
-          exitCode = yield (0, (_child || _load_child()).spawnp)(yarnPath, argv, opts);
-        }
-      } catch (firstError) {
-        try {
-          exitCode = yield (0, (_child || _load_child()).forkp)(yarnPath, argv, opts);
-        } catch (error) {
-          throw firstError;
-        }
-      }
-
-      process.exitCode = exitCode;
-    } else {
-      // ignore all arguments after a --
-      const doubleDashIndex = process.argv.findIndex(function (element) {
-        return element === '--';
-      });
-      const startArgs = process.argv.slice(0, 2);
-      const args = process.argv.slice(2, doubleDashIndex === -1 ? process.argv.length : doubleDashIndex);
-      const endArgs = doubleDashIndex === -1 ? [] : process.argv.slice(doubleDashIndex);
-
-      yield main({ startArgs, args, endArgs });
-    }
-  });
-
-  return function start() {
-    return _ref5.apply(this, arguments);
-  };
-})();
-
-// When this module is compiled via Webpack, its child
-// count will be 0 since it is a single-file bundle.
-
-
-var _http;
-
-function _load_http() {
-  return _http = _interopRequireDefault(__webpack_require__(87));
-}
-
-var _net;
-
-function _load_net() {
-  return _net = _interopRequireDefault(__webpack_require__(164));
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireDefault(__webpack_require__(0));
-}
-
-var _commander;
-
-function _load_commander() {
-  return _commander = _interopRequireDefault(__webpack_require__(338));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireDefault(__webpack_require__(5));
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-var _properLockfile;
-
-function _load_properLockfile() {
-  return _properLockfile = _interopRequireDefault(__webpack_require__(471));
-}
-
-var _loudRejection;
-
-function _load_loudRejection() {
-  return _loudRejection = _interopRequireDefault(__webpack_require__(470));
-}
-
-var _death;
-
-function _load_death() {
-  return _death = _interopRequireDefault(__webpack_require__(469));
-}
-
-var _semver;
-
-function _load_semver() {
-  return _semver = _interopRequireDefault(__webpack_require__(22));
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(200);
-}
-
-var _index2;
-
-function _load_index2() {
-  return _index2 = __webpack_require__(57);
-}
-
-var _index3;
-
-function _load_index3() {
-  return _index3 = _interopRequireDefault(__webpack_require__(334));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _network;
-
-function _load_network() {
-  return _network = _interopRequireWildcard(__webpack_require__(337));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _config;
-
-function _load_config() {
-  return _config = _interopRequireDefault(__webpack_require__(162));
-}
-
-var _rc;
-
-function _load_rc() {
-  return _rc = __webpack_require__(335);
-}
-
-var _child;
-
-function _load_child() {
-  return _child = __webpack_require__(58);
-}
-
-var _yarnVersion;
-
-function _load_yarnVersion() {
-  return _yarnVersion = __webpack_require__(120);
-}
-
-var _signalHandler;
-
-function _load_signalHandler() {
-  return _signalHandler = _interopRequireDefault(__webpack_require__(468));
-}
-
-var _conversion;
-
-function _load_conversion() {
-  return _conversion = __webpack_require__(336);
-}
-
-var _errors2;
-
-function _load_errors2() {
-  return _errors2 = __webpack_require__(6);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-process.stdout.prependListener('error', err => {
-  // swallow err only if downstream consumer process closed pipe early
-  if (err.code === 'EPIPE' || err.code === 'ERR_STREAM_DESTROYED') {
-    return;
-  }
-  throw err;
-});
-
-function findProjectRoot(base) {
-  let prev = null;
-  let dir = base;
-
-  do {
-    if ((_fs || _load_fs()).default.existsSync((_path || _load_path()).default.join(dir, (_constants || _load_constants()).NODE_PACKAGE_JSON))) {
-      return dir;
-    }
-
-    prev = dir;
-    dir = (_path || _load_path()).default.dirname(dir);
-  } while (dir !== prev);
-
-  return base;
-}
-
-const autoRun = exports.autoRun = module.children.length === 0;
-
-if (__webpack_require__.c[__webpack_require__.s] === module) {
-  start().catch(error => {
-    console.error(error.stack || error.message || error);
-    process.exitCode = 1;
-  });
-}
-
-exports.default = start;
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(163)(module)))
-
-/***/ }),
-/* 550 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _baseFetcher;
-
-function _load_baseFetcher() {
-  return _baseFetcher = _interopRequireDefault(__webpack_require__(167));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class CopyFetcher extends (_baseFetcher || _load_baseFetcher()).default {
-  _fetch() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield (_fs || _load_fs()).copy(_this.reference, _this.dest, _this.reporter);
-      return {
-        hash: _this.hash || '',
-        resolved: null
-      };
-    })();
-  }
-}
-exports.default = CopyFetcher;
-
-/***/ }),
-/* 551 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _baseFetcher;
-
-function _load_baseFetcher() {
-  return _baseFetcher = _interopRequireDefault(__webpack_require__(167));
-}
-
-var _git;
-
-function _load_git() {
-  return _git = _interopRequireDefault(__webpack_require__(219));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = _interopRequireWildcard(__webpack_require__(8));
-}
-
-var _crypto;
-
-function _load_crypto() {
-  return _crypto = _interopRequireWildcard(__webpack_require__(168));
-}
-
-var _install;
-
-function _load_install() {
-  return _install = __webpack_require__(34);
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = _interopRequireDefault(__webpack_require__(19));
-}
-
-var _config;
-
-function _load_config() {
-  return _config = _interopRequireDefault(__webpack_require__(162));
-}
-
-var _pack;
-
-function _load_pack() {
-  return _pack = __webpack_require__(166);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const tarFs = __webpack_require__(193);
-const url = __webpack_require__(24);
-const path = __webpack_require__(0);
-const fs = __webpack_require__(5);
-
-const invariant = __webpack_require__(9);
-
-const PACKED_FLAG = '1';
-
-class GitFetcher extends (_baseFetcher || _load_baseFetcher()).default {
-  setupMirrorFromCache() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const tarballMirrorPath = _this.getTarballMirrorPath();
-      const tarballCachePath = _this.getTarballCachePath();
-
-      if (tarballMirrorPath == null) {
-        return;
-      }
-
-      if (!(yield (_fs || _load_fs()).exists(tarballMirrorPath)) && (yield (_fs || _load_fs()).exists(tarballCachePath))) {
-        // The tarball doesn't exists in the offline cache but does in the cache; we import it to the mirror
-        yield (_fs || _load_fs()).mkdirp(path.dirname(tarballMirrorPath));
-        yield (_fs || _load_fs()).copy(tarballCachePath, tarballMirrorPath, _this.reporter);
-      }
-    })();
-  }
-
-  getTarballMirrorPath({ withCommit = true } = {}) {
-    var _url$parse = url.parse(this.reference);
-
-    const pathname = _url$parse.pathname;
-
-
-    if (pathname == null) {
-      return null;
-    }
-
-    const hash = this.hash;
-
-    let packageFilename = withCommit && hash ? `${path.basename(pathname)}-${hash}` : `${path.basename(pathname)}`;
-
-    if (packageFilename.startsWith(':')) {
-      packageFilename = packageFilename.substr(1);
-    }
-
-    return this.config.getOfflineMirrorPath(packageFilename);
-  }
-
-  getTarballCachePath() {
-    return path.join(this.dest, (_constants || _load_constants()).TARBALL_FILENAME);
-  }
-
-  getLocalPaths(override) {
-    const paths = [override ? path.resolve(this.config.cwd, override) : null, this.getTarballMirrorPath(), this.getTarballMirrorPath({ withCommit: false }), this.getTarballCachePath()];
-    // $FlowFixMe: https://github.com/facebook/flow/issues/1414
-    return paths.filter(path => path != null);
-  }
-
-  fetchFromLocal(override) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const tarPaths = _this2.getLocalPaths(override);
-      const stream = yield (_fs || _load_fs()).readFirstAvailableStream(tarPaths);
-
-      return new Promise(function (resolve, reject) {
-        if (!stream) {
-          reject(new (_errors || _load_errors()).MessageError(_this2.reporter.lang('tarballNotInNetworkOrCache', _this2.reference, tarPaths)));
-          return;
-        }
-        invariant(stream, 'cachedStream should be available at this point');
-        // $FlowFixMe - This is available https://nodejs.org/api/fs.html#fs_readstream_path
-        const tarballPath = stream.path;
-
-        const untarStream = _this2._createUntarStream(_this2.dest);
-
-        const hashStream = new (_crypto || _load_crypto()).HashStream();
-        stream.pipe(hashStream).pipe(untarStream).on('finish', function () {
-          const expectHash = _this2.hash;
-          invariant(expectHash, 'Commit hash required');
-
-          const actualHash = hashStream.getHash();
-
-          // This condition is disabled because "expectHash" actually is the commit hash
-          // This is a design issue that we'll need to fix (https://github.com/yarnpkg/yarn/pull/3449)
-          if (true) {
-            resolve({
-              hash: expectHash
-            });
-          } else {
-            reject(new (_errors || _load_errors()).SecurityError(_this2.config.reporter.lang('fetchBadHashWithPath', _this2.packageName, _this2.remote.reference, expectHash, actualHash)));
-          }
-        }).on('error', function (err) {
-          reject(new (_errors || _load_errors()).MessageError(this.reporter.lang('fetchErrorCorrupt', err.message, tarballPath)));
-        });
-      });
-    })();
-  }
-
-  hasPrepareScript(git) {
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const manifestFile = yield git.getFile('package.json');
-
-      if (manifestFile) {
-        const scripts = JSON.parse(manifestFile).scripts;
-        const hasPrepareScript = Boolean(scripts && scripts.prepare);
-        return hasPrepareScript;
-      }
-
-      return false;
-    })();
-  }
-
-  fetchFromExternal() {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const hash = _this3.hash;
-      invariant(hash, 'Commit hash required');
-
-      const gitUrl = (_git || _load_git()).default.npmUrlToGitUrl(_this3.reference);
-      const git = new (_git || _load_git()).default(_this3.config, gitUrl, hash);
-      yield git.init();
-
-      if (yield _this3.hasPrepareScript(git)) {
-        yield _this3.fetchFromInstallAndPack(git);
-      } else {
-        yield _this3.fetchFromGitArchive(git);
-      }
-
-      return {
-        hash
-      };
-    })();
-  }
-
-  fetchFromInstallAndPack(git) {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const prepareDirectory = _this4.config.getTemp(`${(_crypto || _load_crypto()).hash(git.gitUrl.repository)}.${git.hash}.prepare`);
-      yield (_fs || _load_fs()).unlink(prepareDirectory);
-
-      yield git.clone(prepareDirectory);
-
-      var _ref = yield Promise.all([(_config || _load_config()).default.create({
-        binLinks: true,
-        cwd: prepareDirectory,
-        disablePrepublish: true,
-        production: false
-      }, _this4.reporter), (_lockfile || _load_lockfile()).default.fromDirectory(prepareDirectory, _this4.reporter)]);
-
-      const prepareConfig = _ref[0],
-            prepareLockFile = _ref[1];
-
-      yield (0, (_install || _load_install()).install)(prepareConfig, _this4.reporter, {}, prepareLockFile);
-
-      const tarballMirrorPath = _this4.getTarballMirrorPath();
-      const tarballCachePath = _this4.getTarballCachePath();
-
-      if (tarballMirrorPath) {
-        yield _this4._packToTarball(prepareConfig, tarballMirrorPath);
-      }
-      if (tarballCachePath) {
-        yield _this4._packToTarball(prepareConfig, tarballCachePath);
-      }
-
-      yield _this4._packToDirectory(prepareConfig, _this4.dest);
-
-      yield (_fs || _load_fs()).unlink(prepareDirectory);
-    })();
-  }
-
-  _packToTarball(config, path) {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const tarballStream = yield _this5._createTarballStream(config);
-      yield new Promise(function (resolve, reject) {
-        const writeStream = fs.createWriteStream(path);
-        tarballStream.on('error', reject);
-        writeStream.on('error', reject);
-        writeStream.on('end', resolve);
-        writeStream.on('open', function () {
-          tarballStream.pipe(writeStream);
-        });
-        writeStream.once('finish', resolve);
-      });
-    })();
-  }
-
-  _packToDirectory(config, dest) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const tarballStream = yield _this6._createTarballStream(config);
-      yield new Promise(function (resolve, reject) {
-        const untarStream = _this6._createUntarStream(dest);
-        tarballStream.on('error', reject);
-        untarStream.on('error', reject);
-        untarStream.on('end', resolve);
-        untarStream.once('finish', resolve);
-        tarballStream.pipe(untarStream);
-      });
-    })();
-  }
-
-  _createTarballStream(config) {
-    let savedPackedHeader = false;
-    return (0, (_pack || _load_pack()).packTarball)(config, {
-      mapHeader(header) {
-        if (!savedPackedHeader) {
-          savedPackedHeader = true;
-          header.pax = header.pax || {};
-          // add a custom data on the first header
-          // in order to distinguish a tar from "git archive" and a tar from "pack" command
-          header.pax.packed = PACKED_FLAG;
-        }
-        return header;
-      }
-    });
-  }
-
-  _createUntarStream(dest) {
-    const PREFIX = 'package/';
-    let isPackedTarball = undefined;
-    return tarFs.extract(dest, {
-      dmode: 0o555, // all dirs should be readable
-      fmode: 0o444, // all files should be readable
-      chown: false, // don't chown. just leave as it is
-      map: header => {
-        if (isPackedTarball === undefined) {
-          isPackedTarball = header.pax && header.pax.packed === PACKED_FLAG;
-        }
-        if (isPackedTarball) {
-          header.name = header.name.substr(PREFIX.length);
-        }
-      }
-    });
-  }
-
-  fetchFromGitArchive(git) {
-    var _this7 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield git.clone(_this7.dest);
-      const tarballMirrorPath = _this7.getTarballMirrorPath();
-      const tarballCachePath = _this7.getTarballCachePath();
-
-      if (tarballMirrorPath) {
-        yield git.archive(tarballMirrorPath);
-      }
-
-      if (tarballCachePath) {
-        yield git.archive(tarballCachePath);
-      }
-    })();
-  }
-
-  _fetch() {
-    return this.fetchFromLocal().catch(err => this.fetchFromExternal());
-  }
-}
-exports.default = GitFetcher;
-
-/***/ }),
-/* 552 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.workspace = exports.tarball = exports.git = exports.copy = exports.base = undefined;
-
-var _baseFetcher;
-
-function _load_baseFetcher() {
-  return _baseFetcher = _interopRequireDefault(__webpack_require__(167));
-}
-
-var _copyFetcher;
-
-function _load_copyFetcher() {
-  return _copyFetcher = _interopRequireDefault(__webpack_require__(550));
-}
-
-var _gitFetcher;
-
-function _load_gitFetcher() {
-  return _gitFetcher = _interopRequireDefault(__webpack_require__(551));
-}
-
-var _tarballFetcher;
-
-function _load_tarballFetcher() {
-  return _tarballFetcher = _interopRequireDefault(__webpack_require__(364));
-}
-
-var _workspaceFetcher;
-
-function _load_workspaceFetcher() {
-  return _workspaceFetcher = _interopRequireDefault(__webpack_require__(553));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.base = (_baseFetcher || _load_baseFetcher()).default;
-exports.copy = (_copyFetcher || _load_copyFetcher()).default;
-exports.git = (_gitFetcher || _load_gitFetcher()).default;
-exports.tarball = (_tarballFetcher || _load_tarballFetcher()).default;
-exports.workspace = (_workspaceFetcher || _load_workspaceFetcher()).default;
-
-/***/ }),
-/* 553 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _packageFetcher;
-
-function _load_packageFetcher() {
-  return _packageFetcher = __webpack_require__(210);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class WorkspaceFetcher {
-  constructor(dest, remote, config) {
-    this.config = config;
-    this.dest = dest;
-    this.registry = remote.registry;
-    this.workspaceDir = remote.reference;
-    this.registryRemote = remote.registryRemote;
-  }
-
-  setupMirrorFromCache() {
-    return Promise.resolve();
-  }
-
-  fetch() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const pkg = yield _this.config.readManifest(_this.workspaceDir, _this.registry);
-
-      if (_this.registryRemote) {
-        yield _this.fetchRemoteWorkspace(_this.registryRemote, pkg);
-      }
-
-      return {
-        resolved: null,
-        hash: '',
-        cached: false,
-        dest: _this.dest,
-        package: (0, (_extends2 || _load_extends()).default)({}, pkg, {
-          _uid: pkg.version
-        })
-      };
-    })();
-  }
-
-  fetchRemoteWorkspace(remote, manifest) {
-    return (0, (_packageFetcher || _load_packageFetcher()).fetchOneRemote)(remote, manifest.name, manifest.version, this.dest, this.config);
-  }
-}
-exports.default = WorkspaceFetcher;
-
-/***/ }),
-/* 554 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.buildTree = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let buildTree = exports.buildTree = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (resolver, linker, patterns, ignoreHoisted) {
-    const treesByKey = {};
-    const trees = [];
-    const flatTree = yield linker.getFlatHoistedTree(patterns);
-
-    // If using workspaces, filter out the virtual manifest
-    const workspaceLayout = resolver.workspaceLayout;
-
-    const hoisted = workspaceLayout && workspaceLayout.virtualManifestName ? flatTree.filter(function ([key]) {
-      return key.indexOf(workspaceLayout.virtualManifestName) === -1;
-    }) : flatTree;
-
-    const hoistedByKey = {};
-    for (var _iterator = hoisted, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref3;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref3 = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref3 = _i.value;
-      }
-
-      const _ref2 = _ref3;
-      const key = _ref2[0];
-      const info = _ref2[1];
-
-      hoistedByKey[key] = info;
-    }
-
-    // build initial trees
-    for (var _iterator2 = hoisted, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref5 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref5 = _i2.value;
-      }
-
-      const _ref4 = _ref5;
-      const info = _ref4[1];
-
-      const ref = info.pkg._reference;
-      // const parent = getParent(info.key, treesByKey);
-      const children = [];
-      // let depth = 0;
-      invariant(ref, 'expected reference');
-
-      // check parent to obtain next depth
-      // if (parent && parent.depth > 0) {
-      //   depth = parent.depth + 1;
-      // } else {
-      //   depth = 0;
-      // }
-
-      treesByKey[info.key] = {
-        name: info.pkg.name,
-        version: info.pkg.version,
-        children,
-        manifest: info
-      };
-    }
-
-    // add children
-    for (var _iterator3 = hoisted, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref7;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref7 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref7 = _i3.value;
-      }
-
-      const _ref6 = _ref7;
-      const info = _ref6[1];
-
-      const tree = treesByKey[info.key];
-      const parent = getParent(info.key, treesByKey);
-      if (!tree) {
-        continue;
-      }
-
-      if (info.key.split('#').length === 1) {
-        trees.push(tree);
-        continue;
-      }
-
-      if (parent) {
-        parent.children.push(tree);
-      }
-    }
-
-    return trees;
-  });
-
-  return function buildTree(_x, _x2, _x3, _x4) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.getParent = getParent;
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-function getParent(key, treesByKey) {
-  const parentKey = key.slice(0, key.lastIndexOf('#'));
-  return treesByKey[parentKey];
-}
-
-/***/ }),
-/* 555 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-const semver = __webpack_require__(22);
-
-// This isn't really a "proper" constraint resolver. We just return the highest semver
-// version in the versions passed that satisfies the input range. This vastly reduces
-// the complexity and is very efficient for package resolution.
-
-class PackageConstraintResolver {
-  constructor(config, reporter) {
-    this.reporter = reporter;
-    this.config = config;
-  }
-
-  reduce(versions, range) {
-    if (range === 'latest') {
-      // Usually versions are already ordered and the last one is the latest
-      return Promise.resolve(versions[versions.length - 1]);
-    } else {
-      return Promise.resolve(semver.maxSatisfying(versions, range, this.config.looseSemver));
-    }
-  }
-}
-exports.default = PackageConstraintResolver;
-
-/***/ }),
-/* 556 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.NohoistResolver = exports.HoistManifest = undefined;
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _config;
-
-function _load_config() {
-  return _config = _interopRequireDefault(__webpack_require__(162));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _micromatch;
-
-function _load_micromatch() {
-  return _micromatch = _interopRequireDefault(__webpack_require__(114));
-}
-
-var _workspaceLayout2;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout2 = _interopRequireDefault(__webpack_require__(90));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-const path = __webpack_require__(0);
-
-let historyCounter = 0;
-
-const LINK_TYPES = new Set(['workspace', 'link']);
-class HoistManifest {
-  constructor(key, parts, pkg, loc, isDirectRequire, isRequired, isIncompatible) {
-    this.isDirectRequire = isDirectRequire;
-    this.isRequired = isRequired;
-    this.isIncompatible = isIncompatible;
-
-    this.loc = loc;
-    this.pkg = pkg;
-    this.key = key;
-    this.parts = parts;
-    this.originalKey = key;
-    this.previousPaths = [];
-
-    this.history = [];
-    this.addHistory(`Start position = ${key}`);
-
-    this.isNohoist = false;
-    this.originalParentPath = '';
-
-    this.shallowPaths = [];
-    this.isShallow = false;
-  }
-
-  //focus
-
-
-  // nohoist info
-
-
-  addHistory(msg) {
-    this.history.push(`${++historyCounter}: ${msg}`);
-  }
-}
-
-exports.HoistManifest = HoistManifest;
-class PackageHoister {
-  constructor(config, resolver, { ignoreOptional, workspaceLayout } = {}) {
-    this.resolver = resolver;
-    this.config = config;
-
-    this.ignoreOptional = ignoreOptional;
-
-    this.taintedKeys = new Map();
-    this.levelQueue = [];
-    this.tree = new Map();
-
-    this.workspaceLayout = workspaceLayout;
-
-    this.nohoistResolver = new NohoistResolver(config, resolver);
-  }
-
-  /**
-   * Taint this key and prevent any modules from being hoisted to it.
-   */
-
-  taintKey(key, info) {
-    const existingTaint = this.taintedKeys.get(key);
-    if (existingTaint && existingTaint.loc !== info.loc) {
-      return false;
-    } else {
-      this.taintedKeys.set(key, info);
-      return true;
-    }
-  }
-
-  /**
-   * Implode an array of ancestry parts into a key.
-   */
-
-  implodeKey(parts) {
-    return parts.join('#');
-  }
-
-  /**
-   * Seed the hoister with patterns taken from the included resolver.
-   */
-
-  seed(patterns) {
-    this.prepass(patterns);
-
-    for (var _iterator = this.resolver.dedupePatterns(patterns), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const pattern = _ref;
-
-      this._seed(pattern, { isDirectRequire: true });
-    }
-
-    while (true) {
-      let queue = this.levelQueue;
-      if (!queue.length) {
-        this._propagateRequired();
-        return;
-      }
-
-      this.levelQueue = [];
-
-      // sort queue to get determinism between runs
-      queue = queue.sort(([aPattern], [bPattern]) => {
-        return (0, (_misc || _load_misc()).sortAlpha)(aPattern, bPattern);
-      });
-
-      // sort the queue again to hoist packages without peer dependencies first
-      let sortedQueue = [];
-      const availableSet = new Set();
-
-      let hasChanged = true;
-      while (queue.length > 0 && hasChanged) {
-        hasChanged = false;
-
-        const queueCopy = queue;
-        queue = [];
-        for (let t = 0; t < queueCopy.length; ++t) {
-          const queueItem = queueCopy[t];
-          const pattern = queueItem[0];
-          const pkg = this.resolver.getStrictResolvedPattern(pattern);
-
-          const peerDependencies = Object.keys(pkg.peerDependencies || {});
-          const areDependenciesFulfilled = peerDependencies.every(peerDependency => availableSet.has(peerDependency));
-
-          if (areDependenciesFulfilled) {
-            // Move the package inside our sorted queue
-            sortedQueue.push(queueItem);
-
-            // Add it to our set, so that we know it is available
-            availableSet.add(pattern);
-
-            // Schedule a next pass, in case other packages had peer dependencies on this one
-            hasChanged = true;
-          } else {
-            queue.push(queueItem);
-          }
-        }
-      }
-
-      // We might end up with some packages left in the queue, that have not been sorted. We reach this codepath if two
-      // packages have a cyclic dependency, or if the peer dependency is provided by a parent package. In these case,
-      // nothing we can do, so we just add all of these packages to the end of the sorted queue.
-      sortedQueue = sortedQueue.concat(queue);
-
-      for (var _iterator2 = sortedQueue, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const _ref2 = _ref3;
-        const pattern = _ref2[0];
-        const parent = _ref2[1];
-
-        const info = this._seed(pattern, { isDirectRequire: false, parent });
-        if (info) {
-          this.hoist(info);
-        }
-      }
-    }
-  }
-
-  /**
-   * Seed the hoister with a specific pattern.
-   */
-
-  _seed(pattern, { isDirectRequire, parent }) {
-    //
-    const pkg = this.resolver.getStrictResolvedPattern(pattern);
-    const ref = pkg._reference;
-    invariant(ref, 'expected reference');
-
-    //
-    let parentParts = [];
-
-    const isIncompatible = ref.incompatible;
-    const isMarkedAsOptional = ref.optional && this.ignoreOptional;
-
-    let isRequired = isDirectRequire && !ref.ignore && !isIncompatible && !isMarkedAsOptional;
-
-    if (parent) {
-      if (!this.tree.get(parent.key)) {
-        return null;
-      }
-      // non ignored dependencies inherit parent's ignored status
-      // parent may transition from ignored to non ignored when hoisted if it is used in another non ignored branch
-      if (!isDirectRequire && !isIncompatible && parent.isRequired && !isMarkedAsOptional) {
-        isRequired = true;
-      }
-      parentParts = parent.parts;
-    }
-
-    //
-    const loc = this.config.generateModuleCachePath(ref);
-    const parts = parentParts.concat(pkg.name);
-    const key = this.implodeKey(parts);
-    const info = new HoistManifest(key, parts, pkg, loc, isDirectRequire, isRequired, isIncompatible);
-
-    this.nohoistResolver.initNohoist(info, parent);
-
-    this.tree.set(key, info);
-    this.taintKey(key, info);
-
-    //
-    const pushed = new Set();
-    for (var _iterator3 = ref.dependencies, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref4;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref4 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref4 = _i3.value;
-      }
-
-      const depPattern = _ref4;
-
-      if (!pushed.has(depPattern)) {
-        this.levelQueue.push([depPattern, info]);
-        pushed.add(depPattern);
-      }
-    }
-
-    return info;
-  }
-
-  /**
-   * Propagate inherited ignore statuses from non-ignored to ignored packages
-   */
-
-  _propagateRequired() {
-    //
-    const toVisit = [];
-
-    // enumerate all non-ignored packages
-    for (var _iterator4 = this.tree.entries(), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref5;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref5 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref5 = _i4.value;
-      }
-
-      const entry = _ref5;
-
-      if (entry[1].isRequired) {
-        toVisit.push(entry[1]);
-      }
-    }
-
-    // visit them
-    while (toVisit.length) {
-      const info = toVisit.shift();
-      const ref = info.pkg._reference;
-      invariant(ref, 'expected reference');
-
-      for (var _iterator5 = ref.dependencies, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref6;
-
-        if (_isArray5) {
-          if (_i5 >= _iterator5.length) break;
-          _ref6 = _iterator5[_i5++];
-        } else {
-          _i5 = _iterator5.next();
-          if (_i5.done) break;
-          _ref6 = _i5.value;
-        }
-
-        const depPattern = _ref6;
-
-        const depinfo = this._lookupDependency(info, depPattern);
-
-        if (!depinfo) {
-          continue;
-        }
-
-        const depRef = depinfo.pkg._reference;
-
-        // If it's marked as optional, but the parent is required and the
-        // dependency was not listed in `optionalDependencies`, then we mark the
-        // dependency as required.
-        const isMarkedAsOptional = depRef && depRef.optional && this.ignoreOptional && !(info.isRequired && depRef.hint !== 'optional');
-
-        if (!depinfo.isRequired && !depinfo.isIncompatible && !isMarkedAsOptional) {
-          depinfo.isRequired = true;
-          depinfo.addHistory(`Mark as non-ignored because of usage by ${info.key}`);
-          toVisit.push(depinfo);
-        }
-      }
-    }
-  }
-
-  /**
-   * Looks up the package a dependency resolves to
-   */
-
-  _lookupDependency(info, depPattern) {
-    //
-    const pkg = this.resolver.getStrictResolvedPattern(depPattern);
-    const ref = pkg._reference;
-    invariant(ref, 'expected reference');
-
-    //
-    for (let i = info.parts.length; i >= 0; i--) {
-      const checkParts = info.parts.slice(0, i).concat(pkg.name);
-      const checkKey = this.implodeKey(checkParts);
-      const existing = this.tree.get(checkKey);
-      if (existing) {
-        return existing;
-      }
-    }
-
-    return null;
-  }
-
-  /**
-   * Find the highest position we can hoist this module to.
-   */
-
-  getNewParts(key, info, parts) {
-    let stepUp = false;
-
-    const highestHoistingPoint = this.nohoistResolver.highestHoistingPoint(info) || 0;
-    const fullKey = this.implodeKey(parts);
-    const stack = []; // stack of removed parts
-    const name = parts.pop();
-
-    if (info.isNohoist) {
-      info.addHistory(`Marked as nohoist, will not be hoisted above '${parts[highestHoistingPoint]}'`);
-    }
-
-    for (let i = parts.length - 1; i >= highestHoistingPoint; i--) {
-      const checkParts = parts.slice(0, i).concat(name);
-      const checkKey = this.implodeKey(checkParts);
-      info.addHistory(`Looked at ${checkKey} for a match`);
-
-      const existing = this.tree.get(checkKey);
-
-      if (existing) {
-        if (existing.loc === info.loc) {
-          // switch to non ignored if earlier deduped version was ignored (must be compatible)
-          if (!existing.isRequired && info.isRequired) {
-            existing.addHistory(`Deduped ${fullKey} to this item, marking as required`);
-            existing.isRequired = true;
-          } else {
-            existing.addHistory(`Deduped ${fullKey} to this item`);
-          }
-
-          return { parts: checkParts, duplicate: true };
-        } else {
-          // everything above will be shadowed and this is a conflict
-          info.addHistory(`Found a collision at ${checkKey}`);
-          break;
-        }
-      }
-
-      const existingTaint = this.taintedKeys.get(checkKey);
-      if (existingTaint && existingTaint.loc !== info.loc) {
-        info.addHistory(`Broken by ${checkKey}`);
-        break;
-      }
-    }
-
-    const peerDependencies = Object.keys(info.pkg.peerDependencies || {});
-
-    // remove redundant parts that wont collide
-    hoistLoop: while (parts.length > highestHoistingPoint) {
-      // we must not hoist a package higher than its peer dependencies
-      for (var _iterator6 = peerDependencies, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray6) {
-          if (_i6 >= _iterator6.length) break;
-          _ref7 = _iterator6[_i6++];
-        } else {
-          _i6 = _iterator6.next();
-          if (_i6.done) break;
-          _ref7 = _i6.value;
-        }
-
-        const peerDependency = _ref7;
-
-        const checkParts = parts.concat(peerDependency);
-        const checkKey = this.implodeKey(checkParts);
-        info.addHistory(`Looked at ${checkKey} for a peer dependency match`);
-
-        const existing = this.tree.get(checkKey);
-
-        if (existing) {
-          info.addHistory(`Found a peer dependency requirement at ${checkKey}`);
-          break hoistLoop;
-        }
-      }
-
-      const checkParts = parts.concat(name);
-      const checkKey = this.implodeKey(checkParts);
-
-      //
-      const existing = this.tree.get(checkKey);
-      if (existing) {
-        stepUp = true;
-        break;
-      }
-
-      // check if we're trying to hoist ourselves to a previously unflattened module key,
-      // this will result in a conflict and we'll need to move ourselves up
-      if (key !== checkKey && this.taintedKeys.has(checkKey)) {
-        stepUp = true;
-        break;
-      }
-
-      //
-      stack.push(parts.pop());
-    }
-
-    //
-    parts.push(name);
-
-    //
-    const isValidPosition = parts => {
-      // nohoist package can't be hoisted to the "root"
-      if (parts.length <= highestHoistingPoint) {
-        return false;
-      }
-      const key = this.implodeKey(parts);
-      const existing = this.tree.get(key);
-      if (existing && existing.loc === info.loc) {
-        return true;
-      }
-
-      // ensure there's no taint or the taint is us
-      const existingTaint = this.taintedKeys.get(key);
-      if (existingTaint && existingTaint.loc !== info.loc) {
-        return false;
-      }
-
-      return true;
-    };
-
-    // we need to special case when we attempt to hoist to the top level as the `existing` logic
-    // wont be hit in the above `while` loop and we could conflict
-    if (!isValidPosition(parts)) {
-      stepUp = true;
-    }
-
-    // sometimes we need to step up to a parent module to install ourselves
-    while (stepUp && stack.length) {
-      info.addHistory(`Stepping up from ${this.implodeKey(parts)}`);
-
-      parts.pop(); // remove `name`
-      parts.push(stack.pop(), name);
-
-      if (isValidPosition(parts)) {
-        info.addHistory(`Found valid position ${this.implodeKey(parts)}`);
-        stepUp = false;
-      }
-    }
-
-    return { parts, duplicate: false };
-  }
-
-  /**
-   * Hoist all seeded patterns to their highest positions.
-   */
-
-  hoist(info) {
-    const oldKey = info.key,
-          rawParts = info.parts;
-
-    // remove this item from the `tree` map so we can ignore it
-
-    this.tree.delete(oldKey);
-
-    var _getNewParts = this.getNewParts(oldKey, info, rawParts.slice());
-
-    const parts = _getNewParts.parts,
-          duplicate = _getNewParts.duplicate;
-
-
-    const newKey = this.implodeKey(parts);
-    if (duplicate) {
-      info.addHistory(`Satisfied from above by ${newKey}`);
-      this.declareRename(info, rawParts, parts);
-      this.updateHoistHistory(this.nohoistResolver._originalPath(info), this.implodeKey(parts));
-      return;
-    }
-
-    // update to the new key
-    if (oldKey === newKey) {
-      info.addHistory(`Didn't hoist - see reason above`);
-      this.setKey(info, oldKey, rawParts);
-      return;
-    }
-
-    //
-    this.declareRename(info, rawParts, parts);
-    this.setKey(info, newKey, parts);
-  }
-
-  /**
-   * Declare that a module has been hoisted and update our internal references.
-   */
-
-  declareRename(info, oldParts, newParts) {
-    // go down the tree from our new position reserving our name
-    this.taintParents(info, oldParts.slice(0, -1), newParts.length - 1);
-  }
-
-  /**
-   * Crawl upwards through a list of ancestry parts and taint a package name.
-   */
-
-  taintParents(info, processParts, start) {
-    for (let i = start; i < processParts.length; i++) {
-      const parts = processParts.slice(0, i).concat(info.pkg.name);
-      const key = this.implodeKey(parts);
-
-      if (this.taintKey(key, info)) {
-        info.addHistory(`Tainted ${key} to prevent collisions`);
-      }
-    }
-  }
-
-  updateHoistHistory(fromPath, toKey) {
-    const info = this.tree.get(toKey);
-    invariant(info, `expect to find hoist-to ${toKey}`);
-    info.previousPaths.push(fromPath);
-  }
-
-  /**
-   * Update the key of a module and update our references.
-   */
-
-  setKey(info, newKey, parts) {
-    const oldKey = info.key;
-
-    info.key = newKey;
-    info.parts = parts;
-    this.tree.set(newKey, info);
-
-    if (oldKey === newKey) {
-      return;
-    }
-
-    const fromInfo = this.tree.get(newKey);
-    invariant(fromInfo, `expect to find hoist-from ${newKey}`);
-    info.previousPaths.push(this.nohoistResolver._originalPath(fromInfo));
-    info.addHistory(`New position = ${newKey}`);
-  }
-
-  /**
-   * Perform a prepass and if there's multiple versions of the same package, hoist the one with
-   * the most dependents to the top.
-   */
-
-  prepass(patterns) {
-    patterns = this.resolver.dedupePatterns(patterns).sort();
-
-    const visited = new Map();
-
-    const occurences = {};
-
-    // visitor to be used inside add() to mark occurences of packages
-    const visitAdd = (pkg, ancestry, pattern) => {
-      const versions = occurences[pkg.name] = occurences[pkg.name] || {};
-      const version = versions[pkg.version] = versions[pkg.version] || {
-        occurences: new Set(),
-        pattern
-      };
-
-      if (ancestry.length) {
-        version.occurences.add(ancestry[ancestry.length - 1]);
-      }
-    };
-
-    // add an occurring package to the above data structure
-    const add = (pattern, ancestry, ancestryPatterns) => {
-      const pkg = this.resolver.getStrictResolvedPattern(pattern);
-      if (ancestry.indexOf(pkg) >= 0) {
-        // prevent recursive dependencies
-        return;
-      }
-
-      let visitedPattern = visited.get(pattern);
-
-      if (visitedPattern) {
-        // if a package has been visited before, simply increment occurrences of packages
-        // like last time this package was visited
-        visitedPattern.forEach(visitPkg => {
-          visitAdd(visitPkg.pkg, visitPkg.ancestry, visitPkg.pattern);
-        });
-
-        visitAdd(pkg, ancestry, pattern);
-
-        return;
-      }
-
-      const ref = pkg._reference;
-      invariant(ref, 'expected reference');
-
-      visitAdd(pkg, ancestry, pattern);
-
-      for (var _iterator7 = ref.dependencies, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-        var _ref8;
-
-        if (_isArray7) {
-          if (_i7 >= _iterator7.length) break;
-          _ref8 = _iterator7[_i7++];
-        } else {
-          _i7 = _iterator7.next();
-          if (_i7.done) break;
-          _ref8 = _i7.value;
-        }
-
-        const depPattern = _ref8;
-
-        const depAncestry = ancestry.concat(pkg);
-        const depAncestryPatterns = ancestryPatterns.concat(depPattern);
-        add(depPattern, depAncestry, depAncestryPatterns);
-      }
-
-      visitedPattern = visited.get(pattern) || [];
-      visited.set(pattern, visitedPattern);
-      visitedPattern.push({ pkg, ancestry, pattern });
-
-      ancestryPatterns.forEach(ancestryPattern => {
-        const visitedAncestryPattern = visited.get(ancestryPattern);
-        if (visitedAncestryPattern) {
-          visitedAncestryPattern.push({ pkg, ancestry, pattern });
-        }
-      });
-    };
-
-    // get a list of root package names since we can't hoist other dependencies to these spots!
-    const rootPackageNames = new Set();
-    for (var _iterator8 = patterns, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-      var _ref9;
-
-      if (_isArray8) {
-        if (_i8 >= _iterator8.length) break;
-        _ref9 = _iterator8[_i8++];
-      } else {
-        _i8 = _iterator8.next();
-        if (_i8.done) break;
-        _ref9 = _i8.value;
-      }
-
-      const pattern = _ref9;
-
-      const pkg = this.resolver.getStrictResolvedPattern(pattern);
-      rootPackageNames.add(pkg.name);
-      add(pattern, [], []);
-    }
-
-    for (var _iterator9 = Object.keys(occurences).sort(), _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-      var _ref10;
-
-      if (_isArray9) {
-        if (_i9 >= _iterator9.length) break;
-        _ref10 = _iterator9[_i9++];
-      } else {
-        _i9 = _iterator9.next();
-        if (_i9.done) break;
-        _ref10 = _i9.value;
-      }
-
-      const packageName = _ref10;
-
-      const versionOccurences = occurences[packageName];
-      const versions = Object.keys(versionOccurences);
-
-      if (versions.length === 1) {
-        // only one package type so we'll hoist this to the top anyway
-        continue;
-      }
-
-      if (this.tree.get(packageName)) {
-        // a transitive dependency of a previously hoisted dependency exists
-        continue;
-      }
-
-      if (rootPackageNames.has(packageName)) {
-        // can't replace top level packages
-        continue;
-      }
-
-      let mostOccurenceCount;
-      let mostOccurencePattern;
-      for (var _iterator10 = Object.keys(versionOccurences).sort(), _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-        var _ref11;
-
-        if (_isArray10) {
-          if (_i10 >= _iterator10.length) break;
-          _ref11 = _iterator10[_i10++];
-        } else {
-          _i10 = _iterator10.next();
-          if (_i10.done) break;
-          _ref11 = _i10.value;
-        }
-
-        const version = _ref11;
-        var _versionOccurences$ve = versionOccurences[version];
-        const occurences = _versionOccurences$ve.occurences,
-              pattern = _versionOccurences$ve.pattern;
-
-        const occurenceCount = occurences.size;
-
-        if (!mostOccurenceCount || occurenceCount > mostOccurenceCount) {
-          mostOccurenceCount = occurenceCount;
-          mostOccurencePattern = pattern;
-        }
-      }
-      invariant(mostOccurencePattern, 'expected most occurring pattern');
-      invariant(mostOccurenceCount, 'expected most occurring count');
-
-      // only hoist this module if it occured more than once
-      if (mostOccurenceCount > 1) {
-        this._seed(mostOccurencePattern, { isDirectRequire: false });
-      }
-    }
-  }
-
-  markShallowWorkspaceEntries() {
-    const targetWorkspace = this.config.focusedWorkspaceName;
-    const targetHoistManifest = this.tree.get(targetWorkspace);
-    invariant(targetHoistManifest, `targetHoistManifest from ${targetWorkspace} missing`);
-
-    //dedupe with a set
-    const dependentWorkspaces = Array.from(new Set(this._getDependentWorkspaces(targetHoistManifest)));
-
-    const entries = Array.from(this.tree);
-    entries.forEach(([key, info]) => {
-      const splitPath = key.split('#');
-
-      //mark the workspace and any un-hoisted dependencies it has for shallow installation
-      const isShallowDependency = dependentWorkspaces.some(w => {
-        if (splitPath[0] !== w) {
-          //entry is not related to the workspace
-          return false;
-        }
-        if (!splitPath[1]) {
-          //entry is the workspace
-          return true;
-        }
-        //don't bother marking dev dependencies or nohoist packages for shallow installation
-        const treeEntry = this.tree.get(w);
-        invariant(treeEntry, 'treeEntry is not defined for ' + w);
-        const pkg = treeEntry.pkg;
-        return !info.isNohoist && (!pkg.devDependencies || !(splitPath[1] in pkg.devDependencies));
-      });
-
-      if (isShallowDependency) {
-        info.shallowPaths = [null];
-        return;
-      }
-
-      //if package foo is at TARGET_WORKSPACE/node_modules/foo, the hoisted version of foo
-      //should be installed under each shallow workspace that uses it
-      //(unless that workspace has its own version of foo, in which case that should be installed)
-      if (splitPath.length !== 2 || splitPath[0] !== targetWorkspace) {
-        return;
-      }
-      const unhoistedDependency = splitPath[1];
-      const unhoistedInfo = this.tree.get(unhoistedDependency);
-      if (!unhoistedInfo) {
-        return;
-      }
-      dependentWorkspaces.forEach(w => {
-        if (this._packageDependsOnHoistedPackage(w, unhoistedDependency, false)) {
-          unhoistedInfo.shallowPaths.push(w);
-        }
-      });
-    });
-  }
-
-  _getDependentWorkspaces(parent, allowDevDeps = true, alreadySeen = new Set()) {
-    const parentName = parent.pkg.name;
-    if (alreadySeen.has(parentName)) {
-      return [];
-    }
-
-    alreadySeen.add(parentName);
-    invariant(this.workspaceLayout, 'missing workspaceLayout');
-    var _workspaceLayout = this.workspaceLayout;
-    const virtualManifestName = _workspaceLayout.virtualManifestName,
-          workspaces = _workspaceLayout.workspaces;
-
-
-    const directDependencies = [];
-    const ignored = [];
-    Object.keys(workspaces).forEach(workspace => {
-      if (alreadySeen.has(workspace) || workspace === virtualManifestName) {
-        return;
-      }
-
-      //skip a workspace if a different version of it is already being installed under the parent workspace
-      let info = this.tree.get(`${parentName}#${workspace}`);
-      if (info) {
-        const workspaceVersion = workspaces[workspace].manifest.version;
-        if (info.isNohoist && info.originalParentPath.startsWith(`/${WS_ROOT_ALIAS}/${parentName}`) && info.pkg.version === workspaceVersion) {
-          //nohoist installations are exceptions
-          directDependencies.push(info.key);
-        } else {
-          ignored.push(workspace);
-        }
-        return;
-      }
-
-      const searchPath = `/${WS_ROOT_ALIAS}/${parentName}`;
-      info = this.tree.get(workspace);
-      invariant(info, 'missing workspace tree entry ' + workspace);
-      if (!info.previousPaths.some(p => p.startsWith(searchPath))) {
-        return;
-      }
-      if (allowDevDeps || !parent.pkg.devDependencies || !(workspace in parent.pkg.devDependencies)) {
-        directDependencies.push(workspace);
-      }
-    });
-
-    let nested = directDependencies.map(d => {
-      const dependencyEntry = this.tree.get(d);
-      invariant(dependencyEntry, 'missing dependencyEntry ' + d);
-      return this._getDependentWorkspaces(dependencyEntry, false, alreadySeen);
-    });
-    nested = [].concat.apply([], nested); //flatten
-
-    const directDependencyNames = directDependencies.map(d => d.split('#').slice(-1)[0]);
-
-    return directDependencyNames.concat(nested).filter(w => ignored.indexOf(w) === -1);
-  }
-
-  _packageDependsOnHoistedPackage(p, hoisted, checkDevDeps = true, checked = new Set()) {
-    //don't check the same package more than once, and ignore any package that has its own version of hoisted
-    if (checked.has(p) || this.tree.has(`${p}#${hoisted}`)) {
-      return false;
-    }
-    checked.add(p);
-    const info = this.tree.get(p);
-    if (!info) {
-      return false;
-    }
-
-    const pkg = info.pkg;
-    if (!pkg) {
-      return false;
-    }
-
-    let deps = [];
-    if (pkg.dependencies) {
-      deps = deps.concat(Object.keys(pkg.dependencies));
-    }
-    if (checkDevDeps && pkg.devDependencies) {
-      deps = deps.concat(Object.keys(pkg.devDependencies));
-    }
-
-    if (deps.indexOf(hoisted) !== -1) {
-      return true;
-    }
-    return deps.some(dep => this._packageDependsOnHoistedPackage(dep, hoisted, false, checked));
-  }
-
-  /**
-   * Produce a flattened list of module locations and manifests.
-   */
-
-  init() {
-    const flatTree = [];
-
-    //
-    for (var _iterator11 = this.tree.entries(), _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-      var _ref13;
-
-      if (_isArray11) {
-        if (_i11 >= _iterator11.length) break;
-        _ref13 = _iterator11[_i11++];
-      } else {
-        _i11 = _iterator11.next();
-        if (_i11.done) break;
-        _ref13 = _i11.value;
-      }
-
-      const _ref12 = _ref13;
-      const key = _ref12[0];
-      const info = _ref12[1];
-
-      // decompress the location and push it to the flat tree. this path could be made
-      const parts = [];
-      const keyParts = key.split('#');
-      const isWorkspaceEntry = this.workspaceLayout && keyParts[0] === this.workspaceLayout.virtualManifestName;
-
-      // Don't add the virtual manifest (keyParts.length === 1)
-      // or ws childs which were not hoisted to the root (keyParts.length === 2).
-      // If a ws child was hoisted its key would not contain the virtual manifest name
-      if (isWorkspaceEntry && keyParts.length <= 2) {
-        continue;
-      }
-
-      for (let i = 0; i < keyParts.length; i++) {
-        const key = keyParts.slice(0, i + 1).join('#');
-        const hoisted = this.tree.get(key);
-        invariant(hoisted, `expected hoisted manifest for "${key}"`);
-        parts.push(this.config.getFolder(hoisted.pkg));
-        parts.push(keyParts[i]);
-      }
-
-      // Check if the destination is pointing to a sub folder of the virtualManifestName
-      // e.g. _project_/node_modules/workspace-aggregator-123456/node_modules/workspaceChild/node_modules/dependency
-      // This probably happened because the hoister was not able to hoist the workspace child to the root
-      // So we have to change the folder to the workspace package location
-      if (this.workspaceLayout && isWorkspaceEntry) {
-        const wspPkg = this.workspaceLayout.workspaces[keyParts[1]];
-        invariant(wspPkg, `expected workspace package to exist for "${keyParts[1]}"`);
-        parts.splice(0, 4, wspPkg.loc);
-      } else {
-        if (this.config.modulesFolder) {
-          // remove the first part which will be the folder name and replace it with a
-          // hardcoded modules folder
-          parts.splice(0, 1, this.config.modulesFolder);
-        } else {
-          // first part will be the registry-specific module folder
-          parts.splice(0, 0, this.config.lockfileFolder);
-        }
-      }
-
-      const shallowLocs = [];
-      info.shallowPaths.forEach(shallowPath => {
-        const shallowCopyParts = parts.slice();
-        shallowCopyParts[0] = this.config.cwd;
-        if (this.config.modulesFolder) {
-          //add back the module folder name for the shallow installation
-          const treeEntry = this.tree.get(keyParts[0]);
-          invariant(treeEntry, 'expected treeEntry for ' + keyParts[0]);
-          const moduleFolderName = this.config.getFolder(treeEntry.pkg);
-          shallowCopyParts.splice(1, 0, moduleFolderName);
-        }
-
-        if (shallowPath) {
-          const targetWorkspace = this.config.focusedWorkspaceName;
-          const treeEntry = this.tree.get(`${targetWorkspace}#${shallowPath}`) || this.tree.get(shallowPath);
-          invariant(treeEntry, 'expected treeEntry for ' + shallowPath);
-          const moduleFolderName = this.config.getFolder(treeEntry.pkg);
-          shallowCopyParts.splice(1, 0, moduleFolderName, shallowPath);
-        }
-        shallowLocs.push(path.join(...shallowCopyParts));
-      });
-
-      const loc = path.join(...parts);
-      flatTree.push([loc, info]);
-      shallowLocs.forEach(shallowLoc => {
-        const newManifest = (0, (_extends2 || _load_extends()).default)({}, info, { isShallow: true });
-        flatTree.push([shallowLoc, newManifest]);
-      });
-    }
-
-    // remove ignored modules from the tree
-    const visibleFlatTree = [];
-    for (var _iterator12 = flatTree, _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) {
-      var _ref15;
-
-      if (_isArray12) {
-        if (_i12 >= _iterator12.length) break;
-        _ref15 = _iterator12[_i12++];
-      } else {
-        _i12 = _iterator12.next();
-        if (_i12.done) break;
-        _ref15 = _i12.value;
-      }
-
-      const _ref14 = _ref15;
-      const loc = _ref14[0];
-      const info = _ref14[1];
-
-      const ref = info.pkg._reference;
-      invariant(ref, 'expected reference');
-      if (!info.isRequired) {
-        info.addHistory('Deleted as this module was ignored');
-      } else {
-        visibleFlatTree.push([loc, info]);
-      }
-    }
-    return visibleFlatTree;
-  }
-}
-
-exports.default = PackageHoister;
-const WS_ROOT_ALIAS = '_project_';
-class NohoistResolver {
-  constructor(config, resolver) {
-    this.initNohoist = (info, parent) => {
-      let parentNohoistList;
-      let originalParentPath = info.originalParentPath;
-
-      if (parent) {
-        parentNohoistList = parent.nohoistList;
-        originalParentPath = this._originalPath(parent);
-      } else {
-        invariant(this._isTopPackage(info), `${info.key} doesn't have parent nor a top package`);
-        if (info.pkg.name !== this._wsRootPackageName) {
-          parentNohoistList = this._wsRootNohoistList;
-          originalParentPath = this._wsRootPackageName || '';
-        }
-      }
-
-      info.originalParentPath = originalParentPath;
-      let nohoistList = this._extractNohoistList(info.pkg, this._originalPath(info)) || [];
-      if (parentNohoistList) {
-        nohoistList = nohoistList.concat(parentNohoistList);
-      }
-      info.nohoistList = nohoistList.length > 0 ? nohoistList : null;
-      info.isNohoist = this._isNohoist(info);
-    };
-
-    this.highestHoistingPoint = info => {
-      return info.isNohoist && info.parts.length > 1 ? 1 : null;
-    };
-
-    this._isNohoist = info => {
-      if (this._isTopPackage(info)) {
-        return false;
-      }
-      if (info.nohoistList && info.nohoistList.length > 0 && (_micromatch || _load_micromatch()).default.any(this._originalPath(info), info.nohoistList)) {
-        return true;
-      }
-      if (this._config.plugnplayEnabled) {
-        return true;
-      }
-      return false;
-    };
-
-    this._isRootPackage = pkg => {
-      return pkg.name === this._wsRootPackageName;
-    };
-
-    this._originalPath = info => {
-      return this._makePath(info.originalParentPath, info.pkg.name);
-    };
-
-    this._isTopPackage = info => {
-      const parentParts = info.parts.slice(0, -1);
-      const result = !parentParts || parentParts.length <= 0 || parentParts.length === 1 && parentParts[0] === this._wsRootPackageName;
-      return result;
-    };
-
-    this._isLink = info => {
-      return info.pkg._remote != null && LINK_TYPES.has(info.pkg._remote.type);
-    };
-
-    this._extractNohoistList = (pkg, pathPrefix) => {
-      let nohoistList;
-      const ws = this._config.getWorkspaces(pkg);
-
-      if (ws && ws.nohoist) {
-        nohoistList = ws.nohoist.map(p => this._makePath(pathPrefix, p));
-      }
-      return nohoistList;
-    };
-
-    this._resolver = resolver;
-    this._config = config;
-    if (resolver.workspaceLayout) {
-      this._wsRootPackageName = resolver.workspaceLayout.virtualManifestName;
-
-      var _resolver$workspaceLa = resolver.workspaceLayout.getWorkspaceManifest(this._wsRootPackageName);
-
-      const manifest = _resolver$workspaceLa.manifest;
-
-      this._wsRootNohoistList = this._extractNohoistList(manifest, manifest.name);
-    }
-  }
-
-  /**
-   * examine the top level packages to find the root package
-   */
-
-
-  /**
-   * find the highest hoisting point for the given HoistManifest.
-   * algorithm: a nohoist package should never be hoisted beyond the top of its branch, i.e.
-   * the first element of its parts. Therefore the highest possible hoisting index is 1,
-   * unless the package has only 1 part (itself), in such case returns null just like any hoisted package
-   *
-   */
-
-  // private functions
-
-  _makePath(...args) {
-    const parts = args.map(s => s === this._wsRootPackageName ? WS_ROOT_ALIAS : s);
-    const result = parts.join('/');
-    return result[0] === '/' ? result : '/' + result;
-  }
-
-  // extract nohoist from package.json then prefix them with branch path
-  // so we can matched against the branch tree ("originalPath") later
-}
-
-exports.NohoistResolver = NohoistResolver;
-
-/***/ }),
-/* 557 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _config;
-
-function _load_config() {
-  return _config = _interopRequireDefault(__webpack_require__(162));
-}
-
-var _executeLifecycleScript;
-
-function _load_executeLifecycleScript() {
-  return _executeLifecycleScript = _interopRequireDefault(__webpack_require__(111));
-}
-
-var _crypto;
-
-function _load_crypto() {
-  return _crypto = _interopRequireWildcard(__webpack_require__(168));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _packageNameUtils;
-
-function _load_packageNameUtils() {
-  return _packageNameUtils = __webpack_require__(222);
-}
-
-var _pack;
-
-function _load_pack() {
-  return _pack = __webpack_require__(166);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const fs = __webpack_require__(5);
-
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-
-const INSTALL_STAGES = ['preinstall', 'install', 'postinstall'];
-
-class PackageInstallScripts {
-  constructor(config, resolver, force) {
-    this.installed = 0;
-    this.resolver = resolver;
-    this.reporter = config.reporter;
-    this.config = config;
-    this.force = force;
-    this.artifacts = {};
-  }
-
-  setForce(force) {
-    this.force = force;
-  }
-
-  setArtifacts(artifacts) {
-    this.artifacts = artifacts;
-  }
-
-  getArtifacts() {
-    return this.artifacts;
-  }
-
-  getInstallCommands(pkg) {
-    const scripts = pkg.scripts;
-    if (scripts) {
-      const cmds = [];
-      for (var _iterator = INSTALL_STAGES, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const stage = _ref;
-
-        const cmd = scripts[stage];
-        if (cmd) {
-          cmds.push([stage, cmd]);
-        }
-      }
-      return cmds;
-    } else {
-      return [];
-    }
-  }
-
-  walk(loc) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const files = yield (_fs || _load_fs()).walk(loc, null, new Set(_this.config.registryFolders));
-      const mtimes = new Map();
-      for (var _iterator2 = files, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref2 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref2 = _i2.value;
-        }
-
-        const file = _ref2;
-
-        mtimes.set(file.relative, file.mtime);
-      }
-      return mtimes;
-    })();
-  }
-
-  saveBuildArtifacts(loc, pkg, beforeFiles, spinner) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const afterFiles = yield _this2.walk(loc);
-
-      // work out what files have been created/modified
-      const buildArtifacts = [];
-      for (var _iterator3 = afterFiles, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref4 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref4 = _i3.value;
-        }
-
-        const _ref3 = _ref4;
-        const file = _ref3[0];
-        const mtime = _ref3[1];
-
-        if (!beforeFiles.has(file) || beforeFiles.get(file) !== mtime) {
-          buildArtifacts.push(file);
-        }
-      }
-
-      if (!buildArtifacts.length) {
-        // nothing else to do here since we have no build artifacts
-        return;
-      }
-
-      // set build artifacts
-      const ref = pkg._reference;
-      invariant(ref, 'expected reference');
-      _this2.artifacts[`${pkg.name}@${pkg.version}`] = buildArtifacts;
-    })();
-  }
-
-  install(cmds, pkg, spinner) {
-    var _this3 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const ref = pkg._reference;
-      invariant(ref, 'expected reference');
-      const locs = ref.locations;
-
-      let updateProgress;
-
-      if (cmds.length > 0) {
-        updateProgress = function updateProgress(data) {
-          const dataStr = data.toString() // turn buffer into string
-          .trim(); // trim whitespace
-
-          invariant(spinner && spinner.tick, 'We should have spinner and its ticker here');
-          if (dataStr) {
-            spinner.tick(dataStr
-            // Only get the last line
-            .substr(dataStr.lastIndexOf('\n') + 1)
-            // change tabs to spaces as they can interfere with the console
-            .replace(/\t/g, ' '));
-          }
-        };
-      }
-
-      try {
-        for (var _iterator4 = cmds, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref6;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref6 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref6 = _i4.value;
-          }
-
-          const _ref5 = _ref6;
-          const stage = _ref5[0];
-          const cmd = _ref5[1];
-
-          yield Promise.all(locs.map((() => {
-            var _ref7 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) {
-              var _ref8 = yield (0, (_executeLifecycleScript || _load_executeLifecycleScript()).default)({
-                stage,
-                config: _this3.config,
-                cwd: loc,
-                cmd,
-                isInteractive: false,
-                updateProgress
-              });
-
-              const stdout = _ref8.stdout;
-
-              _this3.reporter.verbose(stdout);
-            });
-
-            return function (_x) {
-              return _ref7.apply(this, arguments);
-            };
-          })()));
-        }
-      } catch (err) {
-        err.message = `${locs.join(', ')}: ${err.message}`;
-
-        invariant(ref, 'expected reference');
-
-        if (ref.optional) {
-          ref.ignore = true;
-          ref.incompatible = true;
-          _this3.reporter.warn(_this3.reporter.lang('optionalModuleScriptFail', err.message));
-          _this3.reporter.info(_this3.reporter.lang('optionalModuleFail'));
-
-          // Cleanup node_modules
-          try {
-            yield Promise.all(locs.map((() => {
-              var _ref9 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) {
-                yield (_fs || _load_fs()).unlink(loc);
-              });
-
-              return function (_x2) {
-                return _ref9.apply(this, arguments);
-              };
-            })()));
-          } catch (e) {
-            _this3.reporter.error(_this3.reporter.lang('optionalModuleCleanupFail', e.message));
-          }
-        } else {
-          throw err;
-        }
-      }
-    })();
-  }
-
-  packageCanBeInstalled(pkg) {
-    const cmds = this.getInstallCommands(pkg);
-    if (!cmds.length) {
-      return false;
-    }
-    if (this.config.packBuiltPackages && pkg.prebuiltVariants) {
-      for (const variant in pkg.prebuiltVariants) {
-        if (pkg._remote && pkg._remote.reference && pkg._remote.reference.includes(variant)) {
-          return false;
-        }
-      }
-    }
-    const ref = pkg._reference;
-    invariant(ref, 'Missing package reference');
-    if (!ref.fresh && !this.force) {
-      // this package hasn't been touched
-      return false;
-    }
-
-    // Don't run lifecycle scripts for hoisted packages
-    if (!ref.locations.length) {
-      return false;
-    }
-
-    // we haven't actually written this module out
-    if (ref.ignore) {
-      return false;
-    }
-    return true;
-  }
-
-  runCommand(spinner, pkg) {
-    var _this4 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const cmds = _this4.getInstallCommands(pkg);
-      spinner.setPrefix(++_this4.installed, pkg.name);
-      yield _this4.install(cmds, pkg, spinner);
-    })();
-  }
-
-  // detect if there is a circularDependency in the dependency tree
-  detectCircularDependencies(root, seenManifests, pkg) {
-    const ref = pkg._reference;
-    invariant(ref, 'expected reference');
-
-    const deps = ref.dependencies;
-    for (var _iterator5 = deps, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-      var _ref10;
-
-      if (_isArray5) {
-        if (_i5 >= _iterator5.length) break;
-        _ref10 = _iterator5[_i5++];
-      } else {
-        _i5 = _iterator5.next();
-        if (_i5.done) break;
-        _ref10 = _i5.value;
-      }
-
-      const dep = _ref10;
-
-      const pkgDep = this.resolver.getStrictResolvedPattern(dep);
-      if (seenManifests.has(pkgDep)) {
-        // there is a cycle but not with the root
-        continue;
-      }
-      seenManifests.add(pkgDep);
-      // found a dependency pointing to root
-      if (pkgDep == root) {
-        return true;
-      }
-      if (this.detectCircularDependencies(root, seenManifests, pkgDep)) {
-        return true;
-      }
-    }
-    return false;
-  }
-
-  // find the next package to be installed
-  findInstallablePackage(workQueue, installed) {
-    for (var _iterator6 = workQueue, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray6) {
-        if (_i6 >= _iterator6.length) break;
-        _ref11 = _iterator6[_i6++];
-      } else {
-        _i6 = _iterator6.next();
-        if (_i6.done) break;
-        _ref11 = _i6.value;
-      }
-
-      const pkg = _ref11;
-
-      const ref = pkg._reference;
-      invariant(ref, 'expected reference');
-      const deps = ref.dependencies;
-
-      let dependenciesFulfilled = true;
-      for (var _iterator7 = deps, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-        var _ref12;
-
-        if (_isArray7) {
-          if (_i7 >= _iterator7.length) break;
-          _ref12 = _iterator7[_i7++];
-        } else {
-          _i7 = _iterator7.next();
-          if (_i7.done) break;
-          _ref12 = _i7.value;
-        }
-
-        const dep = _ref12;
-
-        const pkgDep = this.resolver.getStrictResolvedPattern(dep);
-        if (!installed.has(pkgDep)) {
-          dependenciesFulfilled = false;
-          break;
-        }
-      }
-
-      // all dependencies are installed
-      if (dependenciesFulfilled) {
-        return pkg;
-      }
-
-      // detect circular dependency, mark this pkg as installable to break the circle
-      if (this.detectCircularDependencies(pkg, new Set(), pkg)) {
-        return pkg;
-      }
-    }
-    return null;
-  }
-
-  worker(spinner, workQueue, installed, waitQueue) {
-    var _this5 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      while (workQueue.size > 0) {
-        // find a installable package
-        const pkg = _this5.findInstallablePackage(workQueue, installed);
-
-        // can't find a package to install, register into waitQueue
-        if (pkg == null) {
-          spinner.clear();
-          yield new Promise(function (resolve) {
-            return waitQueue.add(resolve);
-          });
-          continue;
-        }
-
-        // found a package to install
-        workQueue.delete(pkg);
-        if (_this5.packageCanBeInstalled(pkg)) {
-          yield _this5.runCommand(spinner, pkg);
-        }
-        installed.add(pkg);
-        for (var _iterator8 = waitQueue, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-          var _ref13;
-
-          if (_isArray8) {
-            if (_i8 >= _iterator8.length) break;
-            _ref13 = _iterator8[_i8++];
-          } else {
-            _i8 = _iterator8.next();
-            if (_i8.done) break;
-            _ref13 = _i8.value;
-          }
-
-          const workerResolve = _ref13;
-
-          workerResolve();
-        }
-        waitQueue.clear();
-      }
-    })();
-  }
-
-  init(seedPatterns) {
-    var _this6 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const workQueue = new Set();
-      const installed = new Set();
-      const pkgs = _this6.resolver.getTopologicalManifests(seedPatterns);
-      let installablePkgs = 0;
-      // A map to keep track of what files exist before installation
-      const beforeFilesMap = new Map();
-      for (var _iterator9 = pkgs, _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-        var _ref14;
-
-        if (_isArray9) {
-          if (_i9 >= _iterator9.length) break;
-          _ref14 = _iterator9[_i9++];
-        } else {
-          _i9 = _iterator9.next();
-          if (_i9.done) break;
-          _ref14 = _i9.value;
-        }
-
-        const pkg = _ref14;
-
-        if (_this6.packageCanBeInstalled(pkg)) {
-          const ref = pkg._reference;
-          invariant(ref, 'expected reference');
-          yield Promise.all(ref.locations.map((() => {
-            var _ref19 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (loc) {
-              beforeFilesMap.set(loc, (yield _this6.walk(loc)));
-              installablePkgs += 1;
-            });
-
-            return function (_x6) {
-              return _ref19.apply(this, arguments);
-            };
-          })()));
-        }
-        workQueue.add(pkg);
-      }
-
-      const set = _this6.reporter.activitySet(installablePkgs, Math.min(installablePkgs, _this6.config.childConcurrency));
-
-      // waitQueue acts like a semaphore to allow workers to register to be notified
-      // when there are more work added to the work queue
-      const waitQueue = new Set();
-      yield Promise.all(set.spinners.map(function (spinner) {
-        return _this6.worker(spinner, workQueue, installed, waitQueue);
-      }));
-      // generate built package as prebuilt one for offline mirror
-      const offlineMirrorPath = _this6.config.getOfflineMirrorPath();
-      if (_this6.config.packBuiltPackages && offlineMirrorPath) {
-        for (var _iterator10 = pkgs, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-          var _ref15;
-
-          if (_isArray10) {
-            if (_i10 >= _iterator10.length) break;
-            _ref15 = _iterator10[_i10++];
-          } else {
-            _i10 = _iterator10.next();
-            if (_i10.done) break;
-            _ref15 = _i10.value;
-          }
-
-          const pkg = _ref15;
-
-          if (_this6.packageCanBeInstalled(pkg)) {
-            let prebuiltPath = path.join(offlineMirrorPath, 'prebuilt');
-            yield (_fs || _load_fs()).mkdirp(prebuiltPath);
-            const prebuiltFilename = (0, (_packageNameUtils || _load_packageNameUtils()).getPlatformSpecificPackageFilename)(pkg);
-            prebuiltPath = path.join(prebuiltPath, prebuiltFilename + '.tgz');
-            const ref = pkg._reference;
-            invariant(ref, 'expected reference');
-            const builtPackagePaths = ref.locations;
-
-            yield Promise.all(builtPackagePaths.map((() => {
-              var _ref16 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (builtPackagePath) {
-                // don't use pack command, we want to avoid the file filters logic
-                const stream = yield (0, (_pack || _load_pack()).packWithIgnoreAndHeaders)(builtPackagePath);
-
-                const hash = yield new Promise(function (resolve, reject) {
-                  const validateStream = new (_crypto || _load_crypto()).HashStream();
-                  stream.pipe(validateStream).pipe(fs.createWriteStream(prebuiltPath)).on('error', reject).on('close', function () {
-                    return resolve(validateStream.getHash());
-                  });
-                });
-                pkg.prebuiltVariants = pkg.prebuiltVariants || {};
-                pkg.prebuiltVariants[prebuiltFilename] = hash;
-              });
-
-              return function (_x3) {
-                return _ref16.apply(this, arguments);
-              };
-            })()));
-          }
-        }
-      } else {
-        // cache all build artifacts
-        for (var _iterator11 = pkgs, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-          var _ref17;
-
-          if (_isArray11) {
-            if (_i11 >= _iterator11.length) break;
-            _ref17 = _iterator11[_i11++];
-          } else {
-            _i11 = _iterator11.next();
-            if (_i11.done) break;
-            _ref17 = _i11.value;
-          }
-
-          const pkg = _ref17;
-
-          if (_this6.packageCanBeInstalled(pkg)) {
-            const ref = pkg._reference;
-            invariant(ref, 'expected reference');
-            const beforeFiles = ref.locations.map(function (loc) {
-              return beforeFilesMap.get(loc);
-            });
-            yield Promise.all(beforeFiles.map((() => {
-              var _ref18 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (b, index) {
-                invariant(b, 'files before installation should always be recorded');
-                yield _this6.saveBuildArtifacts(ref.locations[index], pkg, b, set.spinners[0]);
-              });
-
-              return function (_x4, _x5) {
-                return _ref18.apply(this, arguments);
-              };
-            })()));
-          }
-        }
-      }
-
-      set.end();
-    })();
-  }
-}
-exports.default = PackageInstallScripts;
-
-/***/ }),
-/* 558 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const objectPath = __webpack_require__(304);
-
-const path = __webpack_require__(0);
-
-class BaseRegistry {
-  constructor(cwd, registries, requestManager, reporter, enableDefaultRc, extraneousRcFiles) {
-    this.reporter = reporter;
-    this.requestManager = requestManager;
-    this.registries = registries;
-    this.config = {};
-    this.folder = '';
-    this.token = '';
-    this.loc = '';
-    this.cwd = cwd;
-    this.enableDefaultRc = enableDefaultRc;
-    this.extraneousRcFiles = extraneousRcFiles;
-  }
-
-  // the filename to use for package metadata
-
-
-  //
-
-
-  //
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  //
-
-
-  // absolute folder name to insert modules
-
-
-  // relative folder name to put these modules
-
-
-  setToken(token) {
-    this.token = token;
-  }
-
-  setOtp(otp) {
-    this.otp = otp;
-  }
-
-  getOption(key) {
-    return this.config[key];
-  }
-
-  getAvailableRegistries() {
-    const config = this.config;
-    return Object.keys(config).reduce((registries, option) => {
-      if (option === 'registry' || option.split(':')[1] === 'registry') {
-        registries.push(config[option]);
-      }
-      return registries;
-    }, []);
-  }
-
-  loadConfig() {
-    return Promise.resolve();
-  }
-
-  checkOutdated(config, name, range) {
-    return Promise.reject(new Error('unimplemented'));
-  }
-
-  saveHomeConfig(config) {
-    return Promise.reject(new Error('unimplemented'));
-  }
-
-  request(pathname, opts = {}) {
-    return this.requestManager.request((0, (_extends2 || _load_extends()).default)({
-      url: pathname
-    }, opts));
-  }
-
-  init(overrides = {}) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      _this.mergeEnv('yarn_');
-      yield _this.loadConfig();
-
-      for (var _iterator = Object.keys(overrides), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref = _i.value;
-        }
-
-        const override = _ref;
-
-        const val = overrides[override];
-
-        if (val !== undefined) {
-          _this.config[override] = val;
-        }
-      }
-      _this.loc = path.join(_this.cwd, _this.folder);
-    })();
-  }
-
-  static normalizeConfig(config) {
-    for (const key in config) {
-      config[key] = BaseRegistry.normalizeConfigOption(config[key]);
-    }
-    return config;
-  }
-
-  static normalizeConfigOption(val) {
-    if (val === 'true') {
-      return true;
-    } else if (val === 'false') {
-      return false;
-    } else {
-      return val;
-    }
-  }
-
-  mergeEnv(prefix) {
-    // try environment variables
-    for (const envKey in process.env) {
-      let key = envKey.toLowerCase();
-
-      // only accept keys prefixed with the prefix
-      if (key.indexOf(prefix.toLowerCase()) !== 0) {
-        continue;
-      }
-
-      const val = BaseRegistry.normalizeConfigOption(process.env[envKey]);
-
-      // remove config prefix
-      key = (0, (_misc || _load_misc()).removePrefix)(key, prefix.toLowerCase());
-
-      // replace dunders with dots
-      key = key.replace(/__/g, '.');
-
-      // replace underscores with dashes ignoring keys that start with an underscore
-      key = key.replace(/([^_])_/g, '$1-');
-
-      // set it via a path
-      objectPath.set(this.config, key, val);
-    }
-  }
-}
-exports.default = BaseRegistry;
-
-/***/ }),
-/* 559 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.DEFAULTS = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _npmRegistry;
-
-function _load_npmRegistry() {
-  return _npmRegistry = _interopRequireDefault(__webpack_require__(88));
-}
-
-var _lockfile;
-
-function _load_lockfile() {
-  return _lockfile = __webpack_require__(19);
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-var _yarnVersion;
-
-function _load_yarnVersion() {
-  return _yarnVersion = __webpack_require__(120);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const userHome = __webpack_require__(67).default;
-const path = __webpack_require__(0);
-
-const DEFAULTS = exports.DEFAULTS = {
-  'version-tag-prefix': 'v',
-  'version-git-tag': true,
-  'version-commit-hooks': true,
-  'version-git-sign': false,
-  'version-git-message': 'v%s',
-
-  'init-version': '1.0.0',
-  'init-license': 'MIT',
-
-  'save-prefix': '^',
-  'bin-links': true,
-  'ignore-scripts': false,
-  'ignore-optional': false,
-  registry: (_constants || _load_constants()).YARN_REGISTRY,
-  'strict-ssl': true,
-  'user-agent': [`yarn/${(_yarnVersion || _load_yarnVersion()).version}`, 'npm/?', `node/${process.version}`, process.platform, process.arch].join(' ')
-};
-
-const RELATIVE_KEYS = ['yarn-offline-mirror', 'cache-folder', 'global-folder', 'offline-cache-folder', 'yarn-path'];
-const FOLDER_KEY = ['yarn-offline-mirror', 'cache-folder', 'global-folder', 'offline-cache-folder'];
-
-const npmMap = {
-  'version-git-sign': 'sign-git-tag',
-  'version-tag-prefix': 'tag-version-prefix',
-  'version-git-tag': 'git-tag-version',
-  'version-commit-hooks': 'commit-hooks',
-  'version-git-message': 'message'
-};
-
-class YarnRegistry extends (_npmRegistry || _load_npmRegistry()).default {
-  constructor(cwd, registries, requestManager, reporter, enableDefaultRc, extraneousRcFiles) {
-    super(cwd, registries, requestManager, reporter, enableDefaultRc, extraneousRcFiles);
-
-    this.homeConfigLoc = path.join(userHome, '.yarnrc');
-    this.homeConfig = {};
-  }
-
-  getOption(key) {
-    let val = this.config[key];
-
-    // if this isn't set in a yarn config, then use npm
-    if (typeof val === 'undefined') {
-      val = this.registries.npm.getOption(npmMap[key]);
-    }
-
-    if (typeof val === 'undefined') {
-      val = this.registries.npm.getOption(key);
-    }
-
-    // if this isn't set in a yarn config or npm config, then use the default (or undefined)
-    if (typeof val === 'undefined') {
-      val = DEFAULTS[key];
-    }
-
-    return val;
-  }
-
-  loadConfig() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const locations = yield _this.getPossibleConfigLocations('yarnrc', _this.reporter);
-
-      for (var _iterator = locations, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref2 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref2 = _i.value;
-        }
-
-        const _ref = _ref2;
-        const isHome = _ref[0];
-        const loc = _ref[1];
-        const file = _ref[2];
-
-        var _parse = (0, (_lockfile || _load_lockfile()).parse)(file, loc);
-
-        const config = _parse.object;
-
-
-        if (isHome) {
-          _this.homeConfig = config;
-        }
-
-        for (var _iterator2 = RELATIVE_KEYS, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-          var _ref3;
-
-          if (_isArray2) {
-            if (_i2 >= _iterator2.length) break;
-            _ref3 = _iterator2[_i2++];
-          } else {
-            _i2 = _iterator2.next();
-            if (_i2.done) break;
-            _ref3 = _i2.value;
-          }
-
-          const key = _ref3;
-
-          const valueLoc = config[key];
-
-          if (!_this.config[key] && valueLoc) {
-            const resolvedLoc = config[key] = path.resolve(path.dirname(loc), valueLoc);
-
-            if (FOLDER_KEY.includes(key)) {
-              yield (_fs || _load_fs()).mkdirp(resolvedLoc);
-            }
-          }
-        }
-
-        // merge with any existing environment variables
-        const env = config.env;
-        if (env) {
-          const existingEnv = _this.config.env;
-          if (existingEnv) {
-            _this.config.env = Object.assign({}, env, existingEnv);
-          }
-        }
-
-        _this.config = Object.assign({}, config, _this.config);
-      }
-
-      // default yarn config
-      _this.config = Object.assign({}, DEFAULTS, _this.config);
-    })();
-  }
-
-  saveHomeConfig(config) {
-    var _this2 = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      YarnRegistry.normalizeConfig(config);
-
-      for (const key in config) {
-        const val = config[key];
-
-        // if the current config key was taken from home config then update
-        // the global config
-        if (_this2.homeConfig[key] === _this2.config[key]) {
-          _this2.config[key] = val;
-        }
-
-        // update just the home config
-        _this2.homeConfig[key] = config[key];
-      }
-
-      yield (_fs || _load_fs()).writeFilePreservingEol(_this2.homeConfigLoc, `${(0, (_lockfile || _load_lockfile()).stringify)(_this2.homeConfig)}\n`);
-    })();
-  }
-}
-exports.default = YarnRegistry;
-YarnRegistry.filename = 'yarn.json';
-
-/***/ }),
-/* 560 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsonReporter;
-
-function _load_jsonReporter() {
-  return _jsonReporter = _interopRequireDefault(__webpack_require__(213));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class BufferReporter extends (_jsonReporter || _load_jsonReporter()).default {
-  constructor(opts) {
-    super(opts);
-    this._buffer = [];
-  }
-
-  _dump(type, data, error) {
-    this._buffer.push({
-      type,
-      data,
-      error: !!error
-    });
-  }
-
-  getBuffer() {
-    return this._buffer;
-  }
-
-  getBufferText() {
-    return this._buffer.map(({ data }) => typeof data === 'string' ? data : JSON.stringify(data)).join('');
-  }
-
-  getBufferJson() {
-    return JSON.parse(this.getBufferText());
-  }
-}
-exports.default = BufferReporter;
-
-/***/ }),
-/* 561 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _baseReporter;
-
-function _load_baseReporter() {
-  return _baseReporter = _interopRequireDefault(__webpack_require__(108));
-}
-
-var _progressBar;
-
-function _load_progressBar() {
-  return _progressBar = _interopRequireDefault(__webpack_require__(563));
-}
-
-var _spinnerProgress;
-
-function _load_spinnerProgress() {
-  return _spinnerProgress = _interopRequireDefault(__webpack_require__(564));
-}
-
-var _util;
-
-function _load_util() {
-  return _util = __webpack_require__(212);
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-var _treeHelper;
-
-function _load_treeHelper() {
-  return _treeHelper = __webpack_require__(562);
-}
-
-var _inquirer;
-
-function _load_inquirer() {
-  return _inquirer = _interopRequireDefault(__webpack_require__(276));
-}
-
-var _cliTable;
-
-function _load_cliTable() {
-  return _cliTable = _interopRequireDefault(__webpack_require__(602));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _require = __webpack_require__(3);
-
-const inspect = _require.inspect;
-
-const readline = __webpack_require__(197);
-const chalk = __webpack_require__(30);
-const stripAnsi = __webpack_require__(329);
-const read = __webpack_require__(790);
-const tty = __webpack_require__(104);
-
-const AUDIT_COL_WIDTHS = [15, 62];
-
-const auditSeverityColors = {
-  info: chalk.bold,
-  low: chalk.bold,
-  moderate: chalk.yellow,
-  high: chalk.red,
-  critical: chalk.bgRed
-};
-
-// fixes bold on windows
-if (process.platform === 'win32' && !(process.env.TERM && /^xterm/i.test(process.env.TERM))) {
-  chalk.bold._styles[0].close += '\u001b[m';
-}
-
-class ConsoleReporter extends (_baseReporter || _load_baseReporter()).default {
-  constructor(opts) {
-    super(opts);
-
-    this._lastCategorySize = 0;
-    this._spinners = new Set();
-    this.format = chalk;
-    this.format.stripColor = stripAnsi;
-    this.isSilent = !!opts.isSilent;
-  }
-
-  _prependEmoji(msg, emoji) {
-    if (this.emoji && emoji && this.isTTY) {
-      msg = `${emoji}  ${msg}`;
-    }
-    return msg;
-  }
-
-  _logCategory(category, color, msg) {
-    this._lastCategorySize = category.length;
-    this._log(`${this.format[color](category)} ${msg}`);
-  }
-
-  _verbose(msg) {
-    this._logCategory('verbose', 'grey', `${process.uptime()} ${msg}`);
-  }
-
-  _verboseInspect(obj) {
-    this.inspect(obj);
-  }
-
-  close() {
-    for (var _iterator = this._spinners, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const spinner = _ref;
-
-      spinner.stop();
-    }
-    this._spinners.clear();
-    this.stopProgress();
-    super.close();
-  }
-
-  table(head, body) {
-    //
-    head = head.map(field => this.format.underline(field));
-
-    //
-    const rows = [head].concat(body);
-
-    // get column widths
-    const cols = [];
-    for (let i = 0; i < head.length; i++) {
-      const widths = rows.map(row => this.format.stripColor(row[i]).length);
-      cols[i] = Math.max(...widths);
-    }
-
-    //
-    const builtRows = rows.map(row => {
-      for (let i = 0; i < row.length; i++) {
-        const field = row[i];
-        const padding = cols[i] - this.format.stripColor(field).length;
-
-        row[i] = field + ' '.repeat(padding);
-      }
-      return row.join(' ');
-    });
-
-    this.log(builtRows.join('\n'));
-  }
-
-  step(current, total, msg, emoji) {
-    msg = this._prependEmoji(msg, emoji);
-
-    if (msg.endsWith('?')) {
-      msg = `${(0, (_misc || _load_misc()).removeSuffix)(msg, '?')}...?`;
-    } else {
-      msg += '...';
-    }
-
-    this.log(`${this.format.dim(`[${current}/${total}]`)} ${msg}`);
-  }
-
-  inspect(value) {
-    if (typeof value !== 'number' && typeof value !== 'string') {
-      value = inspect(value, {
-        breakLength: 0,
-        colors: this.isTTY,
-        depth: null,
-        maxArrayLength: null
-      });
-    }
-
-    this.log(String(value), { force: true });
-  }
-
-  list(key, items, hints) {
-    const gutterWidth = (this._lastCategorySize || 2) - 1;
-
-    if (hints) {
-      for (var _iterator2 = items, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref2 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref2 = _i2.value;
-        }
-
-        const item = _ref2;
-
-        this._log(`${' '.repeat(gutterWidth)}- ${this.format.bold(item)}`);
-        this._log(`  ${' '.repeat(gutterWidth)} ${hints[item]}`);
-      }
-    } else {
-      for (var _iterator3 = items, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref3 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref3 = _i3.value;
-        }
-
-        const item = _ref3;
-
-        this._log(`${' '.repeat(gutterWidth)}- ${item}`);
-      }
-    }
-  }
-
-  header(command, pkg) {
-    this.log(this.format.bold(`${pkg.name} ${command} v${pkg.version}`));
-  }
-
-  footer(showPeakMemory) {
-    this.stopProgress();
-
-    const totalTime = (this.getTotalTime() / 1000).toFixed(2);
-    let msg = `Done in ${totalTime}s.`;
-    if (showPeakMemory) {
-      const peakMemory = (this.peakMemory / 1024 / 1024).toFixed(2);
-      msg += ` Peak memory usage ${peakMemory}MB.`;
-    }
-    this.log(this._prependEmoji(msg, '✨'));
-  }
-
-  log(msg, { force = false } = {}) {
-    this._lastCategorySize = 0;
-    this._log(msg, { force });
-  }
-
-  _log(msg, { force = false } = {}) {
-    if (this.isSilent && !force) {
-      return;
-    }
-    (0, (_util || _load_util()).clearLine)(this.stdout);
-    this.stdout.write(`${msg}\n`);
-  }
-
-  success(msg) {
-    this._logCategory('success', 'green', msg);
-  }
-
-  error(msg) {
-    (0, (_util || _load_util()).clearLine)(this.stderr);
-    this.stderr.write(`${this.format.red('error')} ${msg}\n`);
-  }
-
-  info(msg) {
-    this._logCategory('info', 'blue', msg);
-  }
-
-  command(command) {
-    this.log(this.format.dim(`$ ${command}`));
-  }
-
-  warn(msg) {
-    (0, (_util || _load_util()).clearLine)(this.stderr);
-    this.stderr.write(`${this.format.yellow('warning')} ${msg}\n`);
-  }
-
-  question(question, options = {}) {
-    if (!process.stdout.isTTY) {
-      return Promise.reject(new Error("Can't answer a question unless a user TTY"));
-    }
-
-    return new Promise((resolve, reject) => {
-      read({
-        prompt: `${this.format.dim('question')} ${question}: `,
-        silent: !!options.password,
-        output: this.stdout,
-        input: this.stdin
-      }, (err, answer) => {
-        if (err) {
-          if (err.message === 'canceled') {
-            process.exitCode = 1;
-          }
-          reject(err);
-        } else {
-          if (!answer && options.required) {
-            this.error(this.lang('answerRequired'));
-            resolve(this.question(question, options));
-          } else {
-            resolve(answer);
-          }
-        }
-      });
-    });
-  }
-  // handles basic tree output to console
-  tree(key, trees, { force = false } = {}) {
-    this.stopProgress();
-    //
-    if (this.isSilent && !force) {
-      return;
-    }
-    const output = ({ name, children, hint, color }, titlePrefix, childrenPrefix) => {
-      const formatter = this.format;
-      const out = (0, (_treeHelper || _load_treeHelper()).getFormattedOutput)({
-        prefix: titlePrefix,
-        hint,
-        color,
-        name,
-        formatter
-      });
-      this.stdout.write(out);
-
-      if (children && children.length) {
-        (0, (_treeHelper || _load_treeHelper()).recurseTree)((0, (_treeHelper || _load_treeHelper()).sortTrees)(children), childrenPrefix, output);
-      }
-    };
-    (0, (_treeHelper || _load_treeHelper()).recurseTree)((0, (_treeHelper || _load_treeHelper()).sortTrees)(trees), '', output);
-  }
-
-  activitySet(total, workers) {
-    if (!this.isTTY || this.noProgress) {
-      return super.activitySet(total, workers);
-    }
-
-    const spinners = [];
-    const reporterSpinners = this._spinners;
-
-    for (let i = 1; i < workers; i++) {
-      this.log('');
-    }
-
-    for (let i = 0; i < workers; i++) {
-      const spinner = new (_spinnerProgress || _load_spinnerProgress()).default(this.stderr, i);
-      reporterSpinners.add(spinner);
-      spinner.start();
-
-      let prefix = null;
-      let current = 0;
-      const updatePrefix = () => {
-        spinner.setPrefix(`${this.format.dim(`[${current === 0 ? '-' : current}/${total}]`)} `);
-      };
-      const clear = () => {
-        prefix = null;
-        current = 0;
-        updatePrefix();
-        spinner.setText('waiting...');
-      };
-      clear();
-
-      spinners.unshift({
-        clear,
-
-        setPrefix(_current, _prefix) {
-          current = _current;
-          prefix = _prefix;
-          spinner.setText(prefix);
-          updatePrefix();
-        },
-
-        tick(msg) {
-          if (prefix) {
-            msg = `${prefix}: ${msg}`;
-          }
-          spinner.setText(msg);
-        },
-
-        end() {
-          spinner.stop();
-          reporterSpinners.delete(spinner);
-        }
-      });
-    }
-
-    return {
-      spinners,
-      end: () => {
-        for (var _iterator4 = spinners, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-          var _ref4;
-
-          if (_isArray4) {
-            if (_i4 >= _iterator4.length) break;
-            _ref4 = _iterator4[_i4++];
-          } else {
-            _i4 = _iterator4.next();
-            if (_i4.done) break;
-            _ref4 = _i4.value;
-          }
-
-          const spinner = _ref4;
-
-          spinner.end();
-        }
-        readline.moveCursor(this.stdout, 0, -workers + 1);
-      }
-    };
-  }
-
-  activity() {
-    if (!this.isTTY) {
-      return {
-        tick() {},
-        end() {}
-      };
-    }
-    const reporterSpinners = this._spinners;
-
-    const spinner = new (_spinnerProgress || _load_spinnerProgress()).default(this.stderr);
-    spinner.start();
-
-    reporterSpinners.add(spinner);
-
-    return {
-      tick(name) {
-        spinner.setText(name);
-      },
-
-      end() {
-        spinner.stop();
-        reporterSpinners.delete(spinner);
-      }
-    };
-  }
-
-  select(header, question, options) {
-    if (!this.isTTY) {
-      return Promise.reject(new Error("Can't answer a question unless a user TTY"));
-    }
-
-    const rl = readline.createInterface({
-      input: this.stdin,
-      output: this.stdout,
-      terminal: true
-    });
-
-    const questions = options.map(opt => opt.name);
-    const answers = options.map(opt => opt.value);
-
-    function toIndex(input) {
-      const index = answers.indexOf(input);
-
-      if (index >= 0) {
-        return index;
-      } else {
-        return +input;
-      }
-    }
-
-    return new Promise(resolve => {
-      this.info(header);
-
-      for (let i = 0; i < questions.length; i++) {
-        this.log(`  ${this.format.dim(`${i + 1})`)} ${questions[i]}`);
-      }
-
-      const ask = () => {
-        rl.question(`${question}: `, input => {
-          let index = toIndex(input);
-
-          if (isNaN(index)) {
-            this.log('Not a number');
-            ask();
-            return;
-          }
-
-          if (index <= 0 || index > options.length) {
-            this.log('Outside answer range');
-            ask();
-            return;
-          }
-
-          // get index
-          index--;
-          rl.close();
-          resolve(answers[index]);
-        });
-      };
-
-      ask();
-    });
-  }
-
-  progress(count) {
-    if (this.noProgress || count <= 0) {
-      return function () {
-        // noop
-      };
-    }
-
-    if (!this.isTTY) {
-      return function () {
-        // TODO what should the behaviour here be? we could buffer progress messages maybe
-      };
-    }
-
-    // Clear any potentially old progress bars
-    this.stopProgress();
-
-    const bar = this._progressBar = new (_progressBar || _load_progressBar()).default(count, this.stderr, progress => {
-      if (progress === this._progressBar) {
-        this._progressBar = null;
-      }
-    });
-
-    bar.render();
-
-    return function () {
-      bar.tick();
-    };
-  }
-
-  stopProgress() {
-    if (this._progressBar) {
-      this._progressBar.stop();
-    }
-  }
-
-  prompt(message, choices, options = {}) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      if (!process.stdout.isTTY) {
-        return Promise.reject(new Error("Can't answer a question unless a user TTY"));
-      }
-
-      let pageSize;
-      if (process.stdout instanceof tty.WriteStream) {
-        pageSize = process.stdout.rows - 2;
-      }
-
-      const rl = readline.createInterface({
-        input: _this.stdin,
-        output: _this.stdout,
-        terminal: true
-      });
-
-      // $FlowFixMe: Need to update the type of Inquirer
-      const prompt = (_inquirer || _load_inquirer()).default.createPromptModule({
-        input: _this.stdin,
-        output: _this.stdout
-      });
-
-      var _options$name = options.name;
-      const name = _options$name === undefined ? 'prompt' : _options$name;
-      var _options$type = options.type;
-      const type = _options$type === undefined ? 'input' : _options$type,
-            validate = options.validate;
-
-      const answers = yield prompt([{ name, type, message, choices, pageSize, validate }]);
-
-      rl.close();
-
-      return answers[name];
-    })();
-  }
-
-  auditSummary(auditMetadata) {
-    const totalDependencies = auditMetadata.totalDependencies,
-          vulnerabilities = auditMetadata.vulnerabilities;
-
-    const totalVulnerabilities = vulnerabilities.info + vulnerabilities.low + vulnerabilities.moderate + vulnerabilities.high + vulnerabilities.critical;
-    const summary = this.lang('auditSummary', totalVulnerabilities > 0 ? this.rawText(chalk.red(totalVulnerabilities.toString())) : totalVulnerabilities, totalDependencies);
-    this._log(summary);
-
-    if (totalVulnerabilities) {
-      const severities = [];
-      if (vulnerabilities.info) {
-        severities.push(this.lang('auditInfo', vulnerabilities.info));
-      }
-      if (vulnerabilities.low) {
-        severities.push(this.lang('auditLow', vulnerabilities.low));
-      }
-      if (vulnerabilities.moderate) {
-        severities.push(this.lang('auditModerate', vulnerabilities.moderate));
-      }
-      if (vulnerabilities.high) {
-        severities.push(this.lang('auditHigh', vulnerabilities.high));
-      }
-      if (vulnerabilities.critical) {
-        severities.push(this.lang('auditCritical', vulnerabilities.critical));
-      }
-      this._log(`${this.lang('auditSummarySeverity')} ${severities.join(' | ')}`);
-    }
-  }
-
-  auditAction(recommendation) {
-    const label = recommendation.action.resolves.length === 1 ? 'vulnerability' : 'vulnerabilities';
-    this._log(this.lang('auditResolveCommand', this.rawText(chalk.inverse(recommendation.cmd)), recommendation.action.resolves.length, this.rawText(label)));
-    if (recommendation.isBreaking) {
-      this._log(this.lang('auditSemverMajorChange'));
-    }
-  }
-
-  auditManualReview() {
-    const tableOptions = {
-      colWidths: [78]
-    };
-    const table = new (_cliTable || _load_cliTable()).default(tableOptions);
-    table.push([{
-      content: this.lang('auditManualReview'),
-      vAlign: 'center',
-      hAlign: 'center'
-    }]);
-
-    this._log(table.toString());
-  }
-
-  auditAdvisory(resolution, auditAdvisory) {
-    function colorSeverity(severity, message) {
-      return auditSeverityColors[severity](message || severity);
-    }
-
-    function makeAdvisoryTableRow(patchedIn) {
-      const patchRows = [];
-
-      if (patchedIn) {
-        patchRows.push({ 'Patched in': patchedIn });
-      }
-
-      return [{ [chalk.bold(colorSeverity(auditAdvisory.severity))]: chalk.bold(auditAdvisory.title) }, { Package: auditAdvisory.module_name }, ...patchRows, { 'Dependency of': `${resolution.path.split('>')[0]} ${resolution.dev ? '[dev]' : ''}` }, { Path: resolution.path.split('>').join(' > ') }, { 'More info': `https://www.npmjs.com/advisories/${auditAdvisory.id}` }];
-    }
-
-    const tableOptions = {
-      colWidths: AUDIT_COL_WIDTHS,
-      wordWrap: true
-    };
-    const table = new (_cliTable || _load_cliTable()).default(tableOptions);
-    const patchedIn = auditAdvisory.patched_versions.replace(' ', '') === '<0.0.0' ? 'No patch available' : auditAdvisory.patched_versions;
-    table.push(...makeAdvisoryTableRow(patchedIn));
-    this._log(table.toString());
-  }
-}
-exports.default = ConsoleReporter;
-
-/***/ }),
-/* 562 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.sortTrees = sortTrees;
-exports.recurseTree = recurseTree;
-exports.getFormattedOutput = getFormattedOutput;
-
-
-// public
-
-
-// types
-function sortTrees(trees) {
-  return trees.sort(function (tree1, tree2) {
-    return tree1.name.localeCompare(tree2.name);
-  });
-}
-
-function recurseTree(tree, prefix, recurseFunc) {
-  const treeLen = tree.length;
-  const treeEnd = treeLen - 1;
-  for (let i = 0; i < treeLen; i++) {
-    const atEnd = i === treeEnd;
-    recurseFunc(tree[i], prefix + getLastIndentChar(atEnd), prefix + getNextIndentChar(atEnd));
-  }
-}
-
-function getFormattedOutput(fmt) {
-  const item = formatColor(fmt.color, fmt.name, fmt.formatter);
-  const suffix = getSuffix(fmt.hint, fmt.formatter);
-  return `${fmt.prefix}─ ${item}${suffix}\n`;
-}
-
-function getNextIndentChar(end) {
-  return end ? '   ' : '│  ';
-}
-
-function getLastIndentChar(end) {
-  return end ? '└' : '├';
-}
-
-function getSuffix(hint, formatter) {
-  return hint ? ` (${formatter.grey(hint)})` : '';
-}
-
-function formatColor(color, strToFormat, formatter) {
-  return color ? formatter[color](strToFormat) : strToFormat;
-}
-
-/***/ }),
-/* 563 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _util;
-
-function _load_util() {
-  return _util = __webpack_require__(212);
-}
-
-class ProgressBar {
-  constructor(total, stdout = process.stderr, callback) {
-    this.stdout = stdout;
-    this.total = total;
-    this.chars = ProgressBar.bars[0];
-    this.delay = 60;
-    this.curr = 0;
-    this._callback = callback;
-    (0, (_util || _load_util()).clearLine)(stdout);
-  }
-
-  tick() {
-    if (this.curr >= this.total) {
-      return;
-    }
-
-    this.curr++;
-
-    // schedule render
-    if (!this.id) {
-      this.id = setTimeout(() => this.render(), this.delay);
-    }
-  }
-
-  cancelTick() {
-    if (this.id) {
-      clearTimeout(this.id);
-      this.id = null;
-    }
-  }
-
-  stop() {
-    // "stop" by setting current to end so `tick` becomes noop
-    this.curr = this.total;
-
-    this.cancelTick();
-    (0, (_util || _load_util()).clearLine)(this.stdout);
-    if (this._callback) {
-      this._callback(this);
-    }
-  }
-
-  render() {
-    // clear throttle
-    this.cancelTick();
-
-    let ratio = this.curr / this.total;
-    ratio = Math.min(Math.max(ratio, 0), 1);
-
-    // progress without bar
-    let bar = ` ${this.curr}/${this.total}`;
-
-    // calculate size of actual bar
-    // $FlowFixMe: investigate process.stderr.columns flow error
-    const availableSpace = Math.max(0, this.stdout.columns - bar.length - 3);
-    const width = Math.min(this.total, availableSpace);
-    const completeLength = Math.round(width * ratio);
-    const complete = this.chars[0].repeat(completeLength);
-    const incomplete = this.chars[1].repeat(width - completeLength);
-    bar = `[${complete}${incomplete}]${bar}`;
-
-    (0, (_util || _load_util()).toStartOfLine)(this.stdout);
-    this.stdout.write(bar);
-  }
-}
-exports.default = ProgressBar;
-ProgressBar.bars = [['#', '-']];
-
-/***/ }),
-/* 564 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _util;
-
-function _load_util() {
-  return _util = __webpack_require__(212);
-}
-
-class Spinner {
-  constructor(stdout = process.stderr, lineNumber = 0) {
-    this.current = 0;
-    this.prefix = '';
-    this.lineNumber = lineNumber;
-    this.stdout = stdout;
-    this.delay = 60;
-    this.chars = Spinner.spinners[28].split('');
-    this.text = '';
-    this.id = null;
-  }
-
-  setPrefix(prefix) {
-    this.prefix = prefix;
-  }
-  setText(text) {
-    this.text = text;
-  }
-  start() {
-    this.current = 0;
-    this.render();
-  }
-  render() {
-    if (this.id) {
-      clearTimeout(this.id);
-    }
-    // build line ensuring we don't wrap to the next line
-    let msg = `${this.prefix}${this.chars[this.current]} ${this.text}`;
-    const columns = typeof this.stdout.columns === 'number' ? this.stdout.columns : 100;
-    msg = msg.slice(0, columns);
-    (0, (_util || _load_util()).writeOnNthLine)(this.stdout, this.lineNumber, msg);
-    this.current = ++this.current % this.chars.length;
-    this.id = setTimeout(() => this.render(), this.delay);
-  }
-  stop() {
-    if (this.id) {
-      clearTimeout(this.id);
-      this.id = null;
-    }
-    (0, (_util || _load_util()).clearNthLine)(this.stdout, this.lineNumber);
-  }
-}
-exports.default = Spinner;
-Spinner.spinners = ['|/-\\', '⠂-–—–-', '◐◓◑◒', '◴◷◶◵', '◰◳◲◱', '▖▘▝▗', '■□▪▫', '▌▀▐▄', '▉▊▋▌▍▎▏▎▍▌▋▊▉', '▁▃▄▅▆▇█▇▆▅▄▃', '←↖↑↗→↘↓↙', '┤┘┴└├┌┬┐', '◢◣◤◥', '.oO°Oo.', '.oO@*', '🌍🌎🌏', '◡◡ ⊙⊙ ◠◠', '☱☲☴', '⠋⠙⠹⠸⠼⠴⠦⠧⠇⠏', '⠋⠙⠚⠞⠖⠦⠴⠲⠳⠓', '⠄⠆⠇⠋⠙⠸⠰⠠⠰⠸⠙⠋⠇⠆', '⠋⠙⠚⠒⠂⠂⠒⠲⠴⠦⠖⠒⠐⠐⠒⠓⠋', '⠁⠉⠙⠚⠒⠂⠂⠒⠲⠴⠤⠄⠄⠤⠴⠲⠒⠂⠂⠒⠚⠙⠉⠁', '⠈⠉⠋⠓⠒⠐⠐⠒⠖⠦⠤⠠⠠⠤⠦⠖⠒⠐⠐⠒⠓⠋⠉⠈', '⠁⠁⠉⠙⠚⠒⠂⠂⠒⠲⠴⠤⠄⠄⠤⠠⠠⠤⠦⠖⠒⠐⠐⠒⠓⠋⠉⠈⠈', '⢄⢂⢁⡁⡈⡐⡠', '⢹⢺⢼⣸⣇⡧⡗⡏', '⣾⣽⣻⢿⡿⣟⣯⣷', '⠁⠂⠄⡀⢀⠠⠐⠈'];
-
-/***/ }),
-/* 565 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _jsonReporter;
-
-function _load_jsonReporter() {
-  return _jsonReporter = _interopRequireDefault(__webpack_require__(213));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _require = __webpack_require__(77);
-
-const EventEmitter = _require.EventEmitter;
-class EventReporter extends (_jsonReporter || _load_jsonReporter()).default {
-
-  constructor(opts) {
-    super(opts);
-
-    // $FlowFixMe: looks like a flow bug
-    EventEmitter.call(this);
-  }
-
-  _dump(type, data) {
-    this.emit(type, data);
-  }
-}
-
-exports.default = EventReporter;
-Object.assign(EventReporter.prototype, EventEmitter.prototype);
-
-/***/ }),
-/* 566 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-function formatFunction(...strs) {
-  return strs.join(' ');
-}
-
-const defaultFormatter = exports.defaultFormatter = {
-  bold: formatFunction,
-  dim: formatFunction,
-  italic: formatFunction,
-  underline: formatFunction,
-  inverse: formatFunction,
-  strikethrough: formatFunction,
-  black: formatFunction,
-  red: formatFunction,
-  green: formatFunction,
-  yellow: formatFunction,
-  blue: formatFunction,
-  magenta: formatFunction,
-  cyan: formatFunction,
-  white: formatFunction,
-  gray: formatFunction,
-  grey: formatFunction,
-  stripColor: formatFunction
-};
-
-/***/ }),
-/* 567 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-/* eslint max-len: 0 */
-
-const messages = {
-  upToDate: 'Already up-to-date.',
-  folderInSync: 'Folder in sync.',
-  nothingToInstall: 'Nothing to install.',
-  resolvingPackages: 'Resolving packages',
-  checkingManifest: 'Validating package.json',
-  fetchingPackages: 'Fetching packages',
-  linkingDependencies: 'Linking dependencies',
-  rebuildingPackages: 'Rebuilding all packages',
-  buildingFreshPackages: 'Building fresh packages',
-  cleaningModules: 'Cleaning modules',
-  bumpingVersion: 'Bumping version',
-  savingHar: 'Saving HAR file: $0',
-  answer: 'Answer?',
-  usage: 'Usage',
-  installCommandRenamed: '`install` has been replaced with `add` to add new dependencies. Run $0 instead.',
-  globalFlagRemoved: '`--global` has been deprecated. Please run $0 instead.',
-  waitingInstance: 'Waiting for the other yarn instance to finish (pid $0, inside $1)',
-  waitingNamedInstance: 'Waiting for the other yarn instance to finish ($0)',
-  offlineRetrying: 'There appears to be trouble with your network connection. Retrying...',
-  internalServerErrorRetrying: 'There appears to be trouble with the npm registry (returned $1). Retrying...',
-  clearedCache: 'Cleared cache.',
-  couldntClearPackageFromCache: "Couldn't clear package $0 from cache",
-  clearedPackageFromCache: 'Cleared package $0 from cache',
-  packWroteTarball: 'Wrote tarball to $0.',
-  invalidBinField: 'Invalid bin field for $0.',
-  invalidBinEntry: 'Invalid bin entry for $1 (in $0).',
-  helpExamples: '  Examples:\n$0\n',
-  helpCommands: '  Commands:\n$0\n',
-  helpCommandsMore: '  Run `$0` for more information on specific commands.',
-  helpLearnMore: '  Visit $0 to learn more about Yarn.\n',
-
-  manifestPotentialTypo: 'Potential typo $0, did you mean $1?',
-  manifestBuiltinModule: '$0 is also the name of a node core module',
-  manifestNameDot: "Name can't start with a dot",
-  manifestNameIllegalChars: 'Name contains illegal characters',
-  manifestNameBlacklisted: 'Name is blacklisted',
-  manifestLicenseInvalid: 'License should be a valid SPDX license expression',
-  manifestLicenseNone: 'No license field',
-  manifestStringExpected: '$0 is not a string',
-  manifestDependencyCollision: '$0 has dependency $1 with range $2 that collides with a dependency in $3 of the same name with version $4',
-  manifestDirectoryNotFound: 'Unable to read $0 directory of module $1',
-
-  verboseFileCopy: 'Copying $0 to $1.',
-  verboseFileLink: 'Creating hardlink at $0 to $1.',
-  verboseFileSymlink: 'Creating symlink at $0 to $1.',
-  verboseFileSkip: 'Skipping copying of file $0 as the file at $1 is the same size ($2) and mtime ($3).',
-  verboseFileSkipSymlink: 'Skipping copying of $0 as the file at $1 is the same symlink ($2).',
-  verboseFileSkipHardlink: 'Skipping copying of $0 as the file at $1 is the same hardlink ($2).',
-  verboseFileRemoveExtraneous: 'Removing extraneous file $0.',
-  verboseFilePhantomExtraneous: "File $0 would be marked as extraneous but has been removed as it's listed as a phantom file.",
-  verboseFileSkipArtifact: 'Skipping copying of $0 as the file is marked as a built artifact and subject to change.',
-  verboseFileFolder: 'Creating directory $0.',
-
-  verboseRequestStart: 'Performing $0 request to $1.',
-  verboseRequestFinish: 'Request $0 finished with status code $1.',
-
-  configSet: 'Set $0 to $1.',
-  configDelete: 'Deleted $0.',
-  configNpm: 'npm config',
-  configYarn: 'yarn config',
-
-  couldntFindPackagejson: "Couldn't find a package.json file in $0",
-  couldntFindMatch: "Couldn't find match for $0 in $1 for $2.",
-  couldntFindPackageInCache: "Couldn't find any versions for $0 that matches $1 in our cache (possible versions are $2). This is usually caused by a missing entry in the lockfile, running Yarn without the --offline flag may help fix this issue.",
-  couldntFindVersionThatMatchesRange: "Couldn't find any versions for $0 that matches $1",
-  chooseVersionFromList: 'Please choose a version of $0 from this list:',
-  moduleNotInManifest: "This module isn't specified in a package.json file.",
-  moduleAlreadyInManifest: '$0 is already in $1. Please remove existing entry first before adding it to $2.',
-  unknownFolderOrTarball: "Passed folder/tarball doesn't exist,",
-  unknownPackage: "Couldn't find package $0.",
-  unknownPackageName: "Couldn't find package name.",
-  unknownUser: "Couldn't find user $0.",
-  unknownRegistryResolver: 'Unknown registry resolver $0',
-  userNotAnOwner: "User $0 isn't an owner of this package.",
-  invalidVersionArgument: 'Use the $0 flag to create a new version.',
-  invalidVersion: 'Invalid version supplied.',
-  requiredVersionInRange: 'Required version in range.',
-  packageNotFoundRegistry: "Couldn't find package $0 on the $1 registry.",
-  requiredPackageNotFoundRegistry: "Couldn't find package $0 required by $1 on the $2 registry.",
-  doesntExist: "Package $1 refers to a non-existing file '$0'.",
-  missingRequiredPackageKey: `Package $0 doesn't have a $1.`,
-  invalidAccess: 'Invalid argument for access, expected public or restricted.',
-  invalidCommand: 'Invalid subcommand. Try $0',
-  invalidGistFragment: 'Invalid gist fragment $0.',
-  invalidHostedGitFragment: 'Invalid hosted git fragment $0.',
-  invalidFragment: 'Invalid fragment $0.',
-  invalidPackageName: 'Invalid package name.',
-  invalidPackageVersion: "Can't add $0: invalid package version $1.",
-  couldntFindManifestIn: "Couldn't find manifest in $0.",
-  shrinkwrapWarning: 'npm-shrinkwrap.json found. This will not be updated or respected. See https://yarnpkg.com/en/docs/migrating-from-npm for more information.',
-  npmLockfileWarning: 'package-lock.json found. Your project contains lock files generated by tools other than Yarn. It is advised not to mix package managers in order to avoid resolution inconsistencies caused by unsynchronized lock files. To clear this warning, remove package-lock.json.',
-  lockfileOutdated: 'Outdated lockfile. Please run `yarn install` and try again.',
-  lockfileMerged: 'Merge conflict detected in yarn.lock and successfully merged.',
-  lockfileConflict: 'A merge conflict was found in yarn.lock but it could not be successfully merged, regenerating yarn.lock from scratch.',
-  ignoredScripts: 'Ignored scripts due to flag.',
-  missingAddDependencies: 'Missing list of packages to add to your project.',
-  yesWarning: 'The yes flag has been set. This will automatically answer yes to all questions, which may have security implications.',
-  networkWarning: "You don't appear to have an internet connection. Try the --offline flag to use the cache for registry queries.",
-  flatGlobalError: 'The package $0 requires a flat dependency graph. Add `"flat": true` to your package.json and try again.',
-  noName: `Package doesn't have a name.`,
-  noVersion: `Package doesn't have a version.`,
-  answerRequired: 'An answer is required.',
-  missingWhyDependency: 'Missing package name, folder or path to file to identify why a package has been installed',
-  bugReport: 'If you think this is a bug, please open a bug report with the information provided in $0.',
-  unexpectedError: 'An unexpected error occurred: $0.',
-  jsonError: 'Error parsing JSON at $0, $1.',
-  noPermission: 'Cannot create $0 due to insufficient permissions.',
-  noGlobalFolder: 'Cannot find a suitable global folder. Tried these: $0',
-  allDependenciesUpToDate: 'All of your dependencies are up to date.',
-  legendColorsForVersionUpdates: 'Color legend : \n $0    : Major Update backward-incompatible updates \n $1 : Minor Update backward-compatible features \n $2  : Patch Update backward-compatible bug fixes',
-  frozenLockfileError: 'Your lockfile needs to be updated, but yarn was run with `--frozen-lockfile`.',
-  fileWriteError: 'Could not write file $0: $1',
-  multiplePackagesCantUnpackInSameDestination: 'Pattern $0 is trying to unpack in the same destination $1 as pattern $2. This could result in non-deterministic behavior, skipping.',
-  incorrectLockfileEntry: 'Lockfile has incorrect entry for $0. Ignoring it.',
-
-  invalidResolutionName: 'Resolution field $0 does not end with a valid package name and will be ignored',
-  invalidResolutionVersion: 'Resolution field $0 has an invalid version entry and may be ignored',
-  incompatibleResolutionVersion: 'Resolution field $0 is incompatible with requested version $1',
-
-  yarnOutdated: "Your current version of Yarn is out of date. The latest version is $0, while you're on $1.",
-  yarnOutdatedInstaller: 'To upgrade, download the latest installer at $0.',
-  yarnOutdatedCommand: 'To upgrade, run the following command:',
-
-  tooManyArguments: 'Too many arguments, maximum of $0.',
-  tooFewArguments: 'Not enough arguments, expected at least $0.',
-  noArguments: "This command doesn't require any arguments.",
-
-  ownerRemoving: 'Removing owner $0 from package $1.',
-  ownerRemoved: 'Owner removed.',
-  ownerRemoveError: "Couldn't remove owner.",
-  ownerGetting: 'Getting owners for package $0',
-  ownerGettingFailed: "Couldn't get list of owners.",
-  ownerAlready: 'This user is already an owner of this package.',
-  ownerAdded: 'Added owner.',
-  ownerAdding: 'Adding owner $0 to package $1',
-  ownerAddingFailed: "Couldn't add owner.",
-  ownerNone: 'No owners.',
-
-  teamCreating: 'Creating team',
-  teamRemoving: 'Removing team',
-  teamAddingUser: 'Adding user to team',
-  teamRemovingUser: 'Removing user from team',
-  teamListing: 'Listing teams',
-
-  cleaning: 'Cleaning modules',
-  cleanCreatingFile: 'Creating $0',
-  cleanCreatedFile: 'Created $0. Please review the contents of this file then run "yarn autoclean --force" to perform a clean.',
-  cleanAlreadyExists: '$0 already exists. To revert to the default file, delete $0 then rerun this command.',
-  cleanRequiresForce: 'This command required the "--force" flag to perform the clean. This is a destructive operation. Files specified in $0 will be deleted.',
-  cleanDoesNotExist: '$0 does not exist. Autoclean will delete files specified by $0. Run "autoclean --init" to create $0 with the default entries.',
-
-  binLinkCollision: "There's already a linked binary called $0 in your global Yarn bin. Could not link this package's $0 bin entry.",
-  linkCollision: "There's already a package called $0 registered. This command has had no effect. If this command was run in another folder with the same name, the other folder is still linked. Please run yarn unlink in the other folder if you want to register this folder.",
-  linkMissing: 'No registered package found called $0.',
-  linkRegistered: 'Registered $0.',
-  linkRegisteredMessage: 'You can now run `yarn link $0` in the projects where you want to use this package and it will be used instead.',
-  linkUnregistered: 'Unregistered $0.',
-  linkUnregisteredMessage: 'You can now run `yarn unlink $0` in the projects where you no longer want to use this package.',
-  linkUsing: 'Using linked package for $0.',
-  linkDisusing: 'Removed linked package $0.',
-  linkDisusingMessage: 'You will need to run `yarn install --force` to re-install the package that was linked.',
-  linkTargetMissing: 'The target of linked package $0 is missing. Removing link.',
-
-  createInvalidBin: 'Invalid bin entry found in package $0.',
-  createMissingPackage: 'Package not found - this is probably an internal error, and should be reported at https://github.com/yarnpkg/yarn/issues.',
-
-  workspacesAddRootCheck: 'Running this command will add the dependency to the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).',
-  workspacesRemoveRootCheck: 'Running this command will remove the dependency from the workspace root rather than the workspace itself, which might not be what you want - if you really meant it, make it explicit by running this command again with the -W flag (or --ignore-workspace-root-check).',
-  workspacesFocusRootCheck: 'This command can only be run inside an individual workspace.',
-  workspacesRequirePrivateProjects: 'Workspaces can only be enabled in private projects.',
-  workspacesSettingMustBeArray: 'The workspaces field in package.json must be an array.',
-  workspacesDisabled: 'Your project root defines workspaces but the feature is disabled in your Yarn config. Please check "workspaces-experimental" in your .yarnrc file.',
-
-  workspacesNohoistRequirePrivatePackages: 'nohoist config is ignored in $0 because it is not a private package. If you think nohoist should be allowed in public packages, please submit an issue for your use case.',
-  workspacesNohoistDisabled: `$0 defines nohoist but the feature is disabled in your Yarn config ("workspaces-nohoist-experimental" in .yarnrc file)`,
-
-  workspaceRootNotFound: "Cannot find the root of your workspace - are you sure you're currently in a workspace?",
-  workspaceMissingWorkspace: 'Missing workspace name.',
-  workspaceMissingCommand: 'Missing command name.',
-  workspaceUnknownWorkspace: 'Unknown workspace $0.',
-  workspaceVersionMandatory: 'Missing version in workspace at $0, ignoring.',
-  workspaceNameMandatory: 'Missing name in workspace at $0, ignoring.',
-  workspaceNameDuplicate: 'There are more than one workspace with name $0',
-
-  cacheFolderSkipped: 'Skipping preferred cache folder $0 because it is not writable.',
-  cacheFolderMissing: "Yarn hasn't been able to find a cache folder it can use. Please use the explicit --cache-folder option to tell it what location to use, or make one of the preferred locations writable.",
-  cacheFolderSelected: 'Selected the next writable cache folder in the list, will be $0.',
-
-  execMissingCommand: 'Missing command name.',
-
-  noScriptsAvailable: 'There are no scripts specified inside package.json.',
-  noBinAvailable: 'There are no binary scripts available.',
-  dashDashDeprecation: `From Yarn 1.0 onwards, scripts don't require "--" for options to be forwarded. In a future version, any explicit "--" will be forwarded as-is to the scripts.`,
-  commandNotSpecified: 'No command specified.',
-  binCommands: 'Commands available from binary scripts: ',
-  possibleCommands: 'Project commands',
-  commandQuestion: 'Which command would you like to run?',
-  commandFailedWithCode: 'Command failed with exit code $0.',
-  commandFailedWithSignal: 'Command failed with signal $0.',
-  packageRequiresNodeGyp: 'This package requires node-gyp, which is not currently installed. Yarn will attempt to automatically install it. If this fails, you can run "yarn global add node-gyp" to manually install it.',
-  nodeGypAutoInstallFailed: 'Failed to auto-install node-gyp. Please run "yarn global add node-gyp" manually. Error: $0',
-
-  foundIncompatible: 'Found incompatible module.',
-  incompatibleEngine: 'The engine $0 is incompatible with this module. Expected version $1. Got $2',
-  incompatibleCPU: 'The CPU architecture $0 is incompatible with this module.',
-  incompatibleOS: 'The platform $0 is incompatible with this module.',
-  invalidEngine: 'The engine $0 appears to be invalid.',
-  cannotRunWithIncompatibleEnv: 'Commands cannot run with an incompatible environment.',
-
-  optionalCompatibilityExcluded: '$0 is an optional dependency and failed compatibility check. Excluding it from installation.',
-  optionalModuleFail: 'This module is OPTIONAL, you can safely ignore this error',
-  optionalModuleScriptFail: 'Error running install script for optional dependency: $0',
-  optionalModuleCleanupFail: 'Could not cleanup build artifacts from failed install: $0',
-
-  unmetPeer: '$0 has unmet peer dependency $1.',
-  incorrectPeer: '$0 has incorrect peer dependency $1.',
-  selectedPeer: 'Selecting $1 at level $2 as the peer dependency of $0.',
-  missingBundledDependency: '$0 is missing a bundled dependency $1. This should be reported to the package maintainer.',
-
-  savedNewDependency: 'Saved 1 new dependency.',
-  savedNewDependencies: 'Saved $0 new dependencies.',
-  directDependencies: 'Direct dependencies',
-  allDependencies: 'All dependencies',
-
-  foundWarnings: 'Found $0 warnings.',
-  foundErrors: 'Found $0 errors.',
-
-  savedLockfile: 'Saved lockfile.',
-  noRequiredLockfile: 'No lockfile in this directory. Run `yarn install` to generate one.',
-  noLockfileFound: 'No lockfile found.',
-
-  invalidSemver: 'Invalid semver version',
-  newVersion: 'New version',
-  currentVersion: 'Current version',
-  noVersionOnPublish: 'Proceeding with current version',
-
-  manualVersionResolution: 'Unable to find a suitable version for $0, please choose one by typing one of the numbers below:',
-  manualVersionResolutionOption: '$0 which resolved to $1',
-
-  createdTag: 'Created tag.',
-  createdTagFail: "Couldn't add tag.",
-  deletedTag: 'Deleted tag.',
-  deletedTagFail: "Couldn't delete tag.",
-  gettingTags: 'Getting tags',
-  deletingTags: 'Deleting tag',
-  creatingTag: 'Creating tag $0 = $1',
-
-  whyStart: 'Why do we have the module $0?',
-  whyFinding: 'Finding dependency',
-  whyCalculating: 'Calculating file sizes',
-  whyUnknownMatch: "We couldn't find a match!",
-  whyInitGraph: 'Initialising dependency graph',
-  whyWhoKnows: "We don't know why this module exists",
-  whyDiskSizeWithout: 'Disk size without dependencies: $0',
-  whyDiskSizeUnique: 'Disk size with unique dependencies: $0',
-  whyDiskSizeTransitive: 'Disk size with transitive dependencies: $0',
-  whySharedDependencies: 'Number of shared dependencies: $0',
-  whyHoistedTo: `Has been hoisted to $0`,
-
-  whyHoistedFromSimple: `This module exists because it's hoisted from $0.`,
-  whyNotHoistedSimple: `This module exists here because it's in the nohoist list $0.`,
-  whyDependedOnSimple: `This module exists because $0 depends on it.`,
-  whySpecifiedSimple: `This module exists because it's specified in $0.`,
-  whyReasons: 'Reasons this module exists',
-  whyHoistedFrom: 'Hoisted from $0',
-  whyNotHoisted: `in the nohoist list $0`,
-  whyDependedOn: '$0 depends on it',
-  whySpecified: `Specified in $0`,
-
-  whyMatch: `\r=> Found $0`,
-
-  uninstalledPackages: 'Uninstalled packages.',
-  uninstallRegenerate: 'Regenerating lockfile and installing missing dependencies',
-
-  cleanRemovedFiles: 'Removed $0 files',
-  cleanSavedSize: 'Saved $0 MB.',
-
-  configFileFound: 'Found configuration file $0.',
-  configPossibleFile: 'Checking for configuration file $0.',
-
-  npmUsername: 'npm username',
-  npmPassword: 'npm password',
-  npmEmail: 'npm email',
-  npmOneTimePassword: 'npm one-time password',
-
-  loggingIn: 'Logging in',
-  loggedIn: 'Logged in.',
-  notRevokingEnvToken: 'Not revoking login token, specified via environment variable.',
-  notRevokingConfigToken: 'Not revoking login token, specified via config file.',
-  noTokenToRevoke: 'No login token to revoke.',
-  revokingToken: 'Revoking token',
-  revokedToken: 'Revoked login token.',
-
-  loginAsPublic: 'Logging in as public',
-  incorrectCredentials: 'Incorrect username or password.',
-  incorrectOneTimePassword: 'Incorrect one-time password.',
-  twoFactorAuthenticationEnabled: 'Two factor authentication enabled.',
-  clearedCredentials: 'Cleared login credentials.',
-
-  publishFail: "Couldn't publish package: $0",
-  publishPrivate: 'Package marked as private, not publishing.',
-  published: 'Published.',
-  publishing: 'Publishing',
-
-  nonInteractiveNoVersionSpecified: 'You must specify a new version with --new-version when running with --non-interactive.',
-  nonInteractiveNoToken: "No token found and can't prompt for login when running with --non-interactive.",
-
-  infoFail: 'Received invalid response from npm.',
-  malformedRegistryResponse: 'Received malformed response from registry for $0. The registry may be down.',
-  registryNoVersions: 'No valid versions found for $0. The package may be unpublished.',
-
-  cantRequestOffline: "Can't make a request in offline mode ($0)",
-  requestManagerNotSetupHAR: 'RequestManager was not setup to capture HAR files',
-  requestError: 'Request $0 returned a $1',
-  requestFailed: 'Request failed $0',
-  tarballNotInNetworkOrCache: '$0: Tarball is not in network and can not be located in cache ($1)',
-  fetchBadIntegrityCache: 'Incorrect integrity when fetching from the cache for $0. Cache has $1 and remote has $2. Run `yarn cache clean` to fix the problem',
-  fetchBadHashCache: 'Incorrect hash when fetching from the cache for $0. Cache has $1 and remote has $2. Run `yarn cache clean` to fix the problem',
-  fetchBadHashWithPath: "Integrity check failed for $0 (computed integrity doesn't match our records, got $2)",
-  fetchBadIntegrityAlgorithm: 'Integrity checked failed for $0 (none of the specified algorithms are supported)',
-  fetchErrorCorrupt: '$0. Mirror tarball appears to be corrupt. You can resolve this by running:\n\n  rm -rf $1\n  yarn install',
-  errorExtractingTarball: 'Extracting tar content of $1 failed, the file appears to be corrupt: $0',
-  updateInstalling: 'Installing $0...',
-  hostedGitResolveError: 'Error connecting to repository. Please, check the url.',
-  unauthorizedResponse: 'Received a 401 from $0. $1',
-
-  unknownFetcherFor: 'Unknown fetcher for $0',
-
-  downloadGitWithoutCommit: 'Downloading the git repo $0 over plain git without a commit hash',
-  downloadHTTPWithoutCommit: 'Downloading the git repo $0 over HTTP without a commit hash',
-
-  unplugDisabled: "Packages can only be unplugged when Plug'n'Play is enabled.",
-
-  plugnplaySuggestV2L1: "Plug'n'Play support has been greatly improved on the Yarn v2 development branch.",
-  plugnplaySuggestV2L2: 'Please give it a try and tell us what you think! - https://next.yarnpkg.com/getting-started/install',
-  plugnplayWindowsSupport: "Plug'n'Play on Windows doesn't support the cache and project to be kept on separate drives",
-
-  packageInstalledWithBinaries: 'Installed $0 with binaries:',
-  packageHasBinaries: '$0 has binaries:',
-  packageHasNoBinaries: '$0 has no binaries',
-  packageBinaryNotFound: "Couldn't find a binary named $0",
-
-  couldBeDeduped: '$0 could be deduped from $1 to $2',
-  lockfileNotContainPattern: 'Lockfile does not contain pattern: $0',
-  integrityCheckFailed: 'Integrity check failed',
-  noIntegrityFile: "Couldn't find an integrity file",
-  integrityFailedExpectedIsNotAJSON: 'Integrity check: integrity file is not a json',
-  integrityCheckLinkedModulesDontMatch: "Integrity check: Linked modules don't match",
-  integrityFlagsDontMatch: "Integrity check: Flags don't match",
-  integrityLockfilesDontMatch: "Integrity check: Lock files don't match",
-  integrityFailedFilesMissing: 'Integrity check: Files are missing',
-  integrityPatternsDontMatch: "Integrity check: Top level patterns don't match",
-  integrityModulesFoldersMissing: 'Integrity check: Some module folders are missing',
-  integritySystemParamsDontMatch: "Integrity check: System parameters don't match",
-  packageNotInstalled: '$0 not installed',
-  optionalDepNotInstalled: 'Optional dependency $0 not installed',
-  packageWrongVersion: '$0 is wrong version: expected $1, got $2',
-  packageDontSatisfy: "$0 doesn't satisfy found match of $1",
-
-  lockfileExists: 'Lockfile already exists, not importing.',
-  skippingImport: 'Skipping import of $0 for $1',
-  importFailed: 'Import of $0 for $1 failed, resolving normally.',
-  importResolveFailed: 'Import of $0 failed starting in $1',
-  importResolvedRangeMatch: 'Using version $0 of $1 instead of $2 for $3',
-  importSourceFilesCorrupted: 'Failed to import from package-lock.json, source file(s) corrupted',
-  importPackageLock: 'found npm package-lock.json, converting to yarn.lock',
-  importNodeModules: 'creating yarn.lock from local node_modules folder',
-  packageContainsYarnAsGlobal: 'Installing Yarn via Yarn will result in you having two separate versions of Yarn installed at the same time, which is not recommended. To update Yarn please follow https://yarnpkg.com/en/docs/install .',
-
-  scopeNotValid: 'The specified scope is not valid.',
-
-  deprecatedCommand: '$0 is deprecated. Please use $1.',
-  deprecatedListArgs: 'Filtering by arguments is deprecated. Please use the pattern option instead.',
-  implicitFileDeprecated: 'Using the "file:" protocol implicitly is deprecated. Please either prepend the protocol or prepend the path $0 with "./".',
-  unsupportedNodeVersion: 'You are using Node $0 which is not supported and may encounter bugs or unexpected behavior. Yarn supports the following semver range: $1',
-
-  verboseUpgradeBecauseRequested: 'Considering upgrade of $0 to $1 because it was directly requested.',
-  verboseUpgradeBecauseOutdated: 'Considering upgrade of $0 to $1 because a newer version exists in the registry.',
-  verboseUpgradeNotUnlocking: 'Not unlocking $0 in the lockfile because it is a new or direct dependency.',
-  verboseUpgradeUnlocking: 'Unlocking $0 in the lockfile.',
-  folderMissing: "Directory $0 doesn't exist",
-  mutexPortBusy: 'Cannot use the network mutex on port $0. It is probably used by another app.',
-
-  auditRunning: 'Auditing packages',
-  auditSummary: '$0 vulnerabilities found - Packages audited: $1',
-  auditSummarySeverity: 'Severity:',
-  auditCritical: '$0 Critical',
-  auditHigh: '$0 High',
-  auditModerate: '$0 Moderate',
-  auditLow: '$0 Low',
-  auditInfo: '$0 Info',
-  auditResolveCommand: '# Run $0 to resolve $1 $2',
-  auditSemverMajorChange: 'SEMVER WARNING: Recommended action is a potentially breaking change',
-  auditManualReview: 'Manual Review\nSome vulnerabilities require your attention to resolve\n\nVisit https://go.npm.me/audit-guide for additional guidance',
-  auditRunAuditForDetails: 'Security audit found potential problems. Run "yarn audit" for additional details.',
-  auditOffline: 'Skipping audit. Security audit cannot be performed in offline mode.'
-};
-
-exports.default = messages;
-
-/***/ }),
-/* 568 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.en = undefined;
-
-var _en;
-
-function _load_en() {
-  return _en = _interopRequireDefault(__webpack_require__(567));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-exports.en = (_en || _load_en()).default;
-
-/***/ }),
-/* 569 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _baseReporter;
-
-function _load_baseReporter() {
-  return _baseReporter = _interopRequireDefault(__webpack_require__(108));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint no-unused-vars: 0 */
-
-class NoopReporter extends (_baseReporter || _load_baseReporter()).default {
-  lang(key, ...args) {
-    return 'do nothing';
-  }
-  verbose(msg) {}
-  verboseInspect(val) {}
-  initPeakMemoryCounter() {}
-  checkPeakMemory() {}
-  close() {}
-  getTotalTime() {
-    return 0;
-  }
-  list(key, items, hints) {}
-  tree(key, obj) {}
-  step(current, total, message, emoji) {}
-  error(message) {}
-  info(message) {}
-  warn(message) {}
-  success(message) {}
-  log(message) {}
-  command(command) {}
-  inspect(value) {}
-  header(command, pkg) {}
-  footer(showPeakMemory) {}
-  table(head, body) {}
-
-  activity() {
-    return {
-      tick(name) {},
-      end() {}
-    };
-  }
-
-  activitySet(total, workers) {
-    return {
-      spinners: Array(workers).fill({
-        clear() {},
-        setPrefix() {},
-        tick() {},
-        end() {}
-      }),
-      end() {}
-    };
-  }
-
-  question(question, options = {}) {
-    return Promise.reject(new Error('Not implemented'));
-  }
-
-  questionAffirm(question) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      yield _this.question(question);
-      return false;
-    })();
-  }
-
-  select(header, question, options) {
-    return Promise.reject(new Error('Not implemented'));
-  }
-
-  progress(total) {
-    return function () {};
-  }
-
-  disableProgress() {
-    this.noProgress = true;
-  }
-
-  prompt(message, choices, options = {}) {
-    return Promise.reject(new Error('Not implemented'));
-  }
-}
-exports.default = NoopReporter;
-
-/***/ }),
-/* 570 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _extends2;
-
-function _load_extends() {
-  return _extends2 = _interopRequireDefault(__webpack_require__(21));
-}
-
-var _packageRequest;
-
-function _load_packageRequest() {
-  return _packageRequest = _interopRequireDefault(__webpack_require__(122));
-}
-
-var _baseResolver;
-
-function _load_baseResolver() {
-  return _baseResolver = _interopRequireDefault(__webpack_require__(123));
-}
-
-var _workspaceLayout;
-
-function _load_workspaceLayout() {
-  return _workspaceLayout = _interopRequireDefault(__webpack_require__(90));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-class WorkspaceResolver extends (_baseResolver || _load_baseResolver()).default {
-  static isWorkspace(pattern, workspaceLayout) {
-    return !!workspaceLayout && !!workspaceLayout.getManifestByPattern(pattern);
-  }
-
-  constructor(request, fragment, workspaceLayout) {
-    super(request, fragment);
-    this.workspaceLayout = workspaceLayout;
-  }
-
-  resolve(downloadedManifest) {
-    const workspace = this.workspaceLayout.getManifestByPattern(this.request.pattern);
-    invariant(workspace, 'expected workspace');
-    const manifest = workspace.manifest,
-          loc = workspace.loc;
-
-    if (manifest._remote && manifest._remote.registryRemote) {
-      return Promise.resolve(manifest); //already downloaded
-    }
-    const registry = manifest._registry;
-    invariant(registry, 'expected reference');
-    let hash = '';
-    let registryRemote;
-    if (downloadedManifest && manifest.version === downloadedManifest.version) {
-      registryRemote = downloadedManifest._remote;
-      invariant(registryRemote, 'missing remote info');
-      hash = registryRemote.hash;
-      //override any local changes to manifest
-      Object.keys(manifest).forEach(k => k.startsWith('_') || delete manifest[k]);
-      Object.assign(manifest, downloadedManifest);
-    } else if (manifest._remote && manifest._remote.hash) {
-      invariant(workspace.manifest._remote, 'missing remote info');
-      registryRemote = workspace.manifest._remote.registryRemote;
-      hash = manifest._remote.hash;
-    }
-    if (registryRemote) {
-      registryRemote = (0, (_extends2 || _load_extends()).default)({}, registryRemote);
-    }
-
-    manifest._remote = Object.assign(manifest._remote || {}, {
-      type: 'workspace',
-      registryRemote,
-      registry,
-      hash,
-      reference: loc
-    });
-
-    manifest._uid = manifest.version;
-
-    return Promise.resolve(manifest);
-  }
-}
-exports.default = WorkspaceResolver;
-
-/***/ }),
-/* 571 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _hostedGitResolver;
-
-function _load_hostedGitResolver() {
-  return _hostedGitResolver = _interopRequireDefault(__webpack_require__(109));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class BitbucketResolver extends (_hostedGitResolver || _load_hostedGitResolver()).default {
-
-  static getTarballUrl(parts, hash) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}/get/${hash}.tar.gz`;
-  }
-
-  static getGitHTTPBaseUrl(parts) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}`;
-  }
-
-  static getGitHTTPUrl(parts) {
-    return `${BitbucketResolver.getGitHTTPBaseUrl(parts)}.git`;
-  }
-
-  static getGitSSHUrl(parts) {
-    return `git+ssh://git@${this.hostname}/${parts.user}/${parts.repo}.git` + `${parts.hash ? '#' + decodeURIComponent(parts.hash) : ''}`;
-  }
-
-  static getHTTPFileUrl(parts, filename, commit) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}/raw/${commit}/${filename}`;
-  }
-
-  hasHTTPCapability(url) {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      // We don't follow redirects and reject a 302 since this means BitBucket
-      // won't allow us to use the HTTP protocol for `git` access.
-      // Most probably a private repo and this 302 is to a login page.
-      const bitbucketHTTPSupport = yield _this.config.requestManager.request({
-        url,
-        method: 'HEAD',
-        queue: _this.resolver.fetchingQueue,
-        followRedirect: false,
-        rejectStatusCode: 302
-      });
-      return bitbucketHTTPSupport !== false;
-    })();
-  }
-}
-exports.default = BitbucketResolver;
-BitbucketResolver.hostname = 'bitbucket.org';
-BitbucketResolver.protocol = 'bitbucket';
-
-/***/ }),
-/* 572 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _hostedGitResolver;
-
-function _load_hostedGitResolver() {
-  return _hostedGitResolver = _interopRequireDefault(__webpack_require__(109));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class GitLabResolver extends (_hostedGitResolver || _load_hostedGitResolver()).default {
-
-  static getTarballUrl(parts, hash) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}/repository/archive.tar.gz?ref=${hash}`;
-  }
-
-  static getGitHTTPBaseUrl(parts) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}`;
-  }
-
-  static getGitHTTPUrl(parts) {
-    return `${GitLabResolver.getGitHTTPBaseUrl(parts)}.git`;
-  }
-
-  static getGitSSHUrl(parts) {
-    return `git+ssh://git@${this.hostname}/${parts.user}/${parts.repo}.git` + `${parts.hash ? '#' + decodeURIComponent(parts.hash) : ''}`;
-  }
-
-  static getHTTPFileUrl(parts, filename, commit) {
-    return `https://${this.hostname}/${parts.user}/${parts.repo}/raw/${commit}/${filename}`;
-  }
-}
-exports.default = GitLabResolver;
-GitLabResolver.hostname = 'gitlab.com';
-GitLabResolver.protocol = 'gitlab';
-
-/***/ }),
-/* 573 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _errors;
-
-function _load_errors() {
-  return _errors = __webpack_require__(6);
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class RegistryResolver extends (_exoticResolver || _load_exoticResolver()).default {
-  constructor(request, fragment) {
-    super(request, fragment);
-
-    const match = fragment.match(/^(\S+):(@?.*?)(@(.*?)|)$/);
-    if (match) {
-      this.range = match[4] || 'latest';
-      this.name = match[2];
-    } else {
-      throw new (_errors || _load_errors()).MessageError(this.reporter.lang('invalidFragment', fragment));
-    }
-
-    // $FlowFixMe
-    this.registry = this.constructor.protocol;
-  }
-
-  resolve() {
-    return this.fork(this.constructor.factory, false, this.name, this.range);
-  }
-}
-exports.default = RegistryResolver;
-
-/***/ }),
-/* 574 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _tarballFetcher;
-
-function _load_tarballFetcher() {
-  return _tarballFetcher = _interopRequireDefault(__webpack_require__(364));
-}
-
-var _exoticResolver;
-
-function _load_exoticResolver() {
-  return _exoticResolver = _interopRequireDefault(__webpack_require__(89));
-}
-
-var _gitResolver;
-
-function _load_gitResolver() {
-  return _gitResolver = _interopRequireDefault(__webpack_require__(124));
-}
-
-var _guessName;
-
-function _load_guessName() {
-  return _guessName = _interopRequireDefault(__webpack_require__(169));
-}
-
-var _version;
-
-function _load_version() {
-  return _version = _interopRequireWildcard(__webpack_require__(226));
-}
-
-var _crypto;
-
-function _load_crypto() {
-  return _crypto = _interopRequireWildcard(__webpack_require__(168));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const invariant = __webpack_require__(9);
-
-class TarballResolver extends (_exoticResolver || _load_exoticResolver()).default {
-  constructor(request, fragment) {
-    super(request, fragment);
-
-    var _versionUtil$explodeH = (_version || _load_version()).explodeHashedUrl(fragment);
-
-    const hash = _versionUtil$explodeH.hash,
-          url = _versionUtil$explodeH.url;
-
-    this.hash = hash;
-    this.url = url;
-  }
-
-  static isVersion(pattern) {
-    // we can sometimes match git urls which we don't want
-    if ((_gitResolver || _load_gitResolver()).default.isVersion(pattern)) {
-      return false;
-    }
-
-    // full http url
-    if (pattern.startsWith('http://') || pattern.startsWith('https://')) {
-      return true;
-    }
-
-    // local file reference - ignore patterns with names
-    if (pattern.indexOf('@') < 0) {
-      if (pattern.endsWith('.tgz') || pattern.endsWith('.tar.gz')) {
-        return true;
-      }
-    }
-
-    return false;
-  }
-
-  resolve() {
-    var _this = this;
-
-    return (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* () {
-      const shrunk = _this.request.getLocked('tarball');
-      if (shrunk) {
-        return shrunk;
-      }
-
-      const url = _this.url;
-      let hash = _this.hash,
-          registry = _this.registry;
-
-      let pkgJson;
-
-      // generate temp directory
-      const dest = _this.config.getTemp((_crypto || _load_crypto()).hash(url));
-
-      if (yield _this.config.isValidModuleDest(dest)) {
-        var _ref = yield _this.config.readPackageMetadata(dest);
-        // load from local cache
-
-
-        pkgJson = _ref.package;
-        hash = _ref.hash;
-        registry = _ref.registry;
-      } else {
-        // delete if invalid
-        yield (_fs || _load_fs()).unlink(dest);
-
-        const fetcher = new (_tarballFetcher || _load_tarballFetcher()).default(dest, {
-          type: 'tarball',
-          reference: url,
-          registry,
-          hash
-        }, _this.config);
-
-        // fetch file and get it's hash
-        const fetched = yield fetcher.fetch({
-          name: (0, (_guessName || _load_guessName()).default)(url),
-          version: '0.0.0',
-          _registry: 'npm'
-        });
-        pkgJson = fetched.package;
-        hash = fetched.hash;
-
-        registry = pkgJson._registry;
-        invariant(registry, 'expected registry');
-      }
-
-      // use the commit/tarball hash as the uid as we can't rely on the version as it's not
-      // in the registry
-      pkgJson._uid = hash;
-
-      // set remote so it can be "fetched"
-      pkgJson._remote = {
-        type: 'copy',
-        resolved: `${url}#${hash}`,
-        hash,
-        registry,
-        reference: dest
-      };
-
-      return pkgJson;
-    })();
-  }
-}
-exports.default = TarballResolver;
-
-/***/ }),
-/* 575 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _baseResolver;
-
-function _load_baseResolver() {
-  return _baseResolver = _interopRequireDefault(__webpack_require__(123));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class RegistryResolver extends (_baseResolver || _load_baseResolver()).default {
-  constructor(request, name, range) {
-    super(request, `${name}@${range}`);
-    this.name = name;
-    this.range = range;
-
-    this.registryConfig = request.config.registries[this.constructor.registry].config;
-  }
-
-}
-exports.default = RegistryResolver;
-
-/***/ }),
-/* 576 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _npmResolver;
-
-function _load_npmResolver() {
-  return _npmResolver = _interopRequireDefault(__webpack_require__(217));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class YarnResolver extends (_npmResolver || _load_npmResolver()).default {}
-exports.default = YarnResolver;
-
-/***/ }),
-/* 577 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = envReplace;
-const ENV_EXPR = /(\\*)\$\{([^}]+)\}/g;
-
-function envReplace(value, env = process.env) {
-  if (typeof value !== 'string' || !value) {
-    return value;
-  }
-
-  return value.replace(ENV_EXPR, (match, esc, envVarName) => {
-    if (esc.length && esc.length % 2) {
-      return match;
-    }
-    if (undefined === env[envVarName]) {
-      throw new Error('Failed to replace env in config: ' + match);
-    }
-    return env[envVarName] || '';
-  });
-}
-
-/***/ }),
-/* 578 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.fixCmdWinSlashes = fixCmdWinSlashes;
-function fixCmdWinSlashes(cmd) {
-  function findQuotes(quoteSymbol) {
-    const quotes = [];
-    const addQuote = (_, index) => {
-      quotes.push({ from: index, to: index + _.length });
-      return _;
-    };
-    const regEx = new RegExp(quoteSymbol + '.*' + quoteSymbol);
-    cmd.replace(regEx, addQuote);
-    return quotes;
-  }
-  const quotes = findQuotes('"').concat(findQuotes("'"));
-
-  function isInsideQuotes(index) {
-    return quotes.reduce((result, quote) => {
-      return result || quote.from <= index && index <= quote.to;
-    }, false);
-  }
-
-  const cmdPrePattern = '((?:^|&&|&|\\|\\||\\|)\\s*)';
-  const cmdPattern = '(".*?"|\'.*?\'|\\S*)';
-  const regExp = new RegExp(`${cmdPrePattern}${cmdPattern}`, 'g');
-  return cmd.replace(regExp, (whole, pre, cmd, index) => {
-    if ((pre[0] === '&' || pre[0] === '|') && isInsideQuotes(index)) {
-      return whole;
-    }
-    return pre + cmd.replace(/\//g, '\\');
-  });
-}
-
-/***/ }),
-/* 579 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.generatePnpMap = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let getPackageInformationStores = (() => {
-  var _ref17 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, seedPatterns, { resolver, reporter, targetPath, workspaceLayout }) {
-    const targetDirectory = path.dirname(targetPath);
-    const offlineCacheFolder = config.offlineCacheFolder;
-
-    const packageInformationStores = new Map();
-    const blacklistedLocations = new Set();
-
-    const getCachePath = function getCachePath(fsPath) {
-      const cacheRelativePath = normalizePath(path.relative(config.cacheFolder, fsPath));
-
-      // if fsPath is not inside cacheRelativePath, we just skip it
-      if (cacheRelativePath.match(/^\.\.\//)) {
-        return null;
-      }
-
-      return cacheRelativePath;
-    };
-
-    const resolveOfflineCacheFolder = function resolveOfflineCacheFolder(fsPath) {
-      if (!offlineCacheFolder) {
-        return fsPath;
-      }
-
-      const cacheRelativePath = getCachePath(fsPath);
-
-      // if fsPath is not inside the cache, we shouldn't replace it (workspace)
-      if (!cacheRelativePath) {
-        return fsPath;
-      }
-
-      const components = cacheRelativePath.split(/\//g);
-      const cacheEntry = components[0],
-            internalPath = components.slice(1);
-
-
-      return path.resolve(offlineCacheFolder, `${cacheEntry}${OFFLINE_CACHE_EXTENSION}`, internalPath.join('/'));
-    };
-
-    const normalizePath = function normalizePath(fsPath) {
-      return process.platform === 'win32' ? fsPath.replace(backwardSlashRegExp, '/') : fsPath;
-    };
-
-    const normalizeDirectoryPath = function normalizeDirectoryPath(fsPath) {
-      let relativePath = normalizePath(path.relative(targetDirectory, resolveOfflineCacheFolder(fsPath)));
-
-      if (!relativePath.match(/^\.{0,2}\//) && !path.isAbsolute(relativePath)) {
-        relativePath = `./${relativePath}`;
-      }
-
-      return relativePath.replace(/\/?$/, '/');
-    };
-
-    const getHashFrom = function getHashFrom(data) {
-      const hashGenerator = crypto.createHash('sha1');
-
-      for (var _iterator10 = data, _isArray10 = Array.isArray(_iterator10), _i10 = 0, _iterator10 = _isArray10 ? _iterator10 : _iterator10[Symbol.iterator]();;) {
-        var _ref18;
-
-        if (_isArray10) {
-          if (_i10 >= _iterator10.length) break;
-          _ref18 = _iterator10[_i10++];
-        } else {
-          _i10 = _iterator10.next();
-          if (_i10.done) break;
-          _ref18 = _i10.value;
-        }
-
-        const datum = _ref18;
-
-        hashGenerator.update(datum);
-      }
-
-      return hashGenerator.digest('hex');
-    };
-
-    const getResolverEntry = function getResolverEntry(pattern) {
-      const pkg = resolver.getStrictResolvedPattern(pattern);
-      const ref = pkg._reference;
-
-      if (!ref) {
-        return null;
-      }
-
-      invariant(ref.locations.length <= 1, 'Must have at most one location (usually in the cache)');
-      const loc = ref.locations[0];
-
-      if (!loc) {
-        return null;
-      }
-
-      return { pkg, ref, loc };
-    };
-
-    const visit = (() => {
-      var _ref19 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (precomputedResolutions, seedPatterns, parentData = []) {
-        const resolutions = new Map(precomputedResolutions);
-        const locations = new Map();
-
-        // This first pass will compute the package reference of each of the given patterns
-        // They will usually be the package version, but not always. We need to do this in a pre-process pass, because the
-        // dependencies might depend on one another, so if we need to replace one of them, we need to compute it first
-        for (var _iterator11 = seedPatterns, _isArray11 = Array.isArray(_iterator11), _i11 = 0, _iterator11 = _isArray11 ? _iterator11 : _iterator11[Symbol.iterator]();;) {
-          var _ref20;
-
-          if (_isArray11) {
-            if (_i11 >= _iterator11.length) break;
-            _ref20 = _iterator11[_i11++];
-          } else {
-            _i11 = _iterator11.next();
-            if (_i11.done) break;
-            _ref20 = _i11.value;
-          }
-
-          const pattern = _ref20;
-
-          const entry = getResolverEntry(pattern);
-
-          if (!entry) {
-            continue;
-          }
-
-          const pkg = entry.pkg,
-                ref = entry.ref;
-          let loc = entry.loc;
-
-
-          const packageName = pkg.name;
-          let packageReference = pkg.version;
-
-          // If we have peer dependencies, then we generate a new virtual reference based on the parent one
-          // We cannot generate this reference based on what those peer references resolve to, because they might not have
-          // been computed yet (for example, consider the case where A has a peer dependency on B, and B a peer dependency
-          // on A; it's valid, but it prevents us from computing A and B - and it's even worse with 3+ packages involved)
-          const peerDependencies = new Set(Array.from(Object.keys(pkg.peerDependencies || {})));
-
-          // As an optimization, we only setup virtual packages if their underlying packages are referenced multiple times
-          // in the tree. This allow us to avoid having to create symlinks in the majority of cases
-          if (peerDependencies.size > 0 && ref.requests.length > 1) {
-            const hash = getHashFrom([...parentData, packageName, packageReference]);
-
-            let symlinkSource;
-            let symlinkFile;
-
-            switch (ref.remote.type) {
-              case 'workspace':
-                {
-                  symlinkSource = loc;
-                  symlinkFile = path.resolve(config.lockfileFolder, '.pnp', 'workspaces', `pnp-${hash}`, packageName);
-
-                  loc = symlinkFile;
-                }
-                break;
-
-              default:
-                {
-                  const isFromCache = getCachePath(loc);
-
-                  const hashName = isFromCache && offlineCacheFolder ? `pnp-${hash}${OFFLINE_CACHE_EXTENSION}` : `pnp-${hash}`;
-                  const newLoc = path.resolve(config.lockfileFolder, '.pnp', 'externals', hashName, 'node_modules', packageName);
-
-                  // The `node_modules/<pkgName>` part is already there when the package comes from the cache
-                  if (isFromCache) {
-                    const getBase = function getBase(source) {
-                      return path.resolve(source, '../'.repeat(1 + packageName.split('/').length));
-                    };
-                    symlinkSource = resolveOfflineCacheFolder(getBase(loc));
-                    symlinkFile = getBase(newLoc);
-                  } else {
-                    symlinkSource = loc;
-                    symlinkFile = newLoc;
-                  }
-
-                  loc = newLoc;
-                }
-                break;
-            }
-
-            yield (_fs || _load_fs()).mkdirp(path.dirname(symlinkFile));
-            yield (_fs || _load_fs()).symlink(symlinkSource, symlinkFile);
-
-            packageReference = `pnp:${hash}`;
-
-            // We blacklist this path so that we can print a nicer error message if someone tries to require it (it usually
-            // means that they're using realpath on the return value of require.resolve)
-            blacklistedLocations.add(normalizeDirectoryPath(loc));
-          }
-
-          // Now that we have the final reference, we need to store it
-          resolutions.set(packageName, packageReference);
-          locations.set(packageName, loc);
-        }
-
-        // Now that we have the final references, we can start the main loop, which will insert the packages into the store
-        // if they aren't already there, and recurse over their own children
-        for (var _iterator12 = seedPatterns, _isArray12 = Array.isArray(_iterator12), _i12 = 0, _iterator12 = _isArray12 ? _iterator12 : _iterator12[Symbol.iterator]();;) {
-          var _ref21;
-
-          if (_isArray12) {
-            if (_i12 >= _iterator12.length) break;
-            _ref21 = _iterator12[_i12++];
-          } else {
-            _i12 = _iterator12.next();
-            if (_i12.done) break;
-            _ref21 = _i12.value;
-          }
-
-          const pattern = _ref21;
-
-          const entry = getResolverEntry(pattern);
-
-          if (!entry) {
-            continue;
-          }
-
-          const pkg = entry.pkg,
-                ref = entry.ref;
-
-
-          const packageName = pkg.name;
-
-          const packageReference = resolutions.get(packageName);
-          invariant(packageReference, `Package reference should have been computed during the pre-pass`);
-
-          const loc = locations.get(packageName);
-          invariant(loc, `Package location should have been computed during the pre-pass`);
-
-          // We can early exit if the package is already registered with the exact same name and reference, since even if
-          // we might get slightly different dependencies (depending on how things were optimized), both sets are valid
-          let packageInformationStore = packageInformationStores.get(packageName);
-
-          if (!packageInformationStore) {
-            packageInformationStore = new Map();
-            packageInformationStores.set(packageName, packageInformationStore);
-          }
-
-          let packageInformation = packageInformationStore.get(packageReference);
-
-          if (packageInformation) {
-            continue;
-          }
-
-          packageInformation = {
-            packageLocation: normalizeDirectoryPath(loc),
-            packageDependencies: new Map()
-          };
-
-          // Split the dependencies between direct/peer - we will only recurse on the former
-          const peerDependencies = new Set(Array.from(Object.keys(pkg.peerDependencies || {})));
-          const directDependencies = ref.dependencies.filter(function (pattern) {
-            const pkg = resolver.getStrictResolvedPattern(pattern);
-            return !pkg || !peerDependencies.has(pkg.name);
-          });
-
-          // We inject the partial information in the store right now so that we won't cycle indefinitely
-          packageInformationStore.set(packageReference, packageInformation);
-
-          // We must inject the peer dependencies before iterating; one of our dependencies might have a peer dependency
-          // on one of our peer dependencies, so it must be available from the start (we don't have to do that for direct
-          // dependencies, because the "visit" function that will iterate over them will automatically add the to the
-          // candidate resolutions as part of the first step, cf above)
-
-          for (var _iterator13 = peerDependencies, _isArray13 = Array.isArray(_iterator13), _i13 = 0, _iterator13 = _isArray13 ? _iterator13 : _iterator13[Symbol.iterator]();;) {
-            var _ref22;
-
-            if (_isArray13) {
-              if (_i13 >= _iterator13.length) break;
-              _ref22 = _iterator13[_i13++];
-            } else {
-              _i13 = _iterator13.next();
-              if (_i13.done) break;
-              _ref22 = _i13.value;
-            }
-
-            const dependencyName = _ref22;
-
-            const dependencyReference = resolutions.get(dependencyName);
-
-            if (dependencyReference) {
-              packageInformation.packageDependencies.set(dependencyName, dependencyReference);
-            }
-          }
-
-          const childResolutions = yield visit(packageInformation.packageDependencies, directDependencies, [packageName, packageReference]);
-
-          // We can now inject into our package the resolutions we got from the visit function
-          for (var _iterator14 = childResolutions.entries(), _isArray14 = Array.isArray(_iterator14), _i14 = 0, _iterator14 = _isArray14 ? _iterator14 : _iterator14[Symbol.iterator]();;) {
-            var _ref24;
-
-            if (_isArray14) {
-              if (_i14 >= _iterator14.length) break;
-              _ref24 = _iterator14[_i14++];
-            } else {
-              _i14 = _iterator14.next();
-              if (_i14.done) break;
-              _ref24 = _i14.value;
-            }
-
-            const _ref23 = _ref24;
-            const name = _ref23[0];
-            const reference = _ref23[1];
-
-            packageInformation.packageDependencies.set(name, reference);
-          }
-
-          // Finally, unless a package depends on a previous version of itself (that would be weird but correct...), we
-          // inject them an implicit dependency to themselves (so that they can require themselves)
-          if (!packageInformation.packageDependencies.has(packageName)) {
-            packageInformation.packageDependencies.set(packageName, packageReference);
-          }
-        }
-
-        return resolutions;
-      });
-
-      return function visit(_x4, _x5) {
-        return _ref19.apply(this, arguments);
-      };
-    })();
-
-    // If we have workspaces, we need to iterate over them all in order to add them to the map
-    // This is because they might not be declared as dependencies of the top-level project (and with reason, since the
-    // top-level package might depend on a different than the one provided in the workspaces - cf Babel, which depends
-    // on an old version of itself in order to compile itself)
-    if (workspaceLayout) {
-      for (var _iterator15 = Object.keys(workspaceLayout.workspaces), _isArray15 = Array.isArray(_iterator15), _i15 = 0, _iterator15 = _isArray15 ? _iterator15 : _iterator15[Symbol.iterator]();;) {
-        var _ref25;
-
-        if (_isArray15) {
-          if (_i15 >= _iterator15.length) break;
-          _ref25 = _iterator15[_i15++];
-        } else {
-          _i15 = _iterator15.next();
-          if (_i15.done) break;
-          _ref25 = _i15.value;
-        }
-
-        const name = _ref25;
-
-        const pkg = workspaceLayout.workspaces[name].manifest;
-
-        // Skip the aggregator, since it's essentially a duplicate of the top-level package that we'll iterate later on
-        if (pkg.workspaces) {
-          continue;
-        }
-
-        const ref = pkg._reference;
-        invariant(ref, `Workspaces should have a reference`);
-
-        invariant(ref.locations.length === 1, `Workspaces should have exactly one location`);
-        const loc = ref.locations[0];
-        invariant(loc, `Workspaces should have a location`);
-
-        let packageInformationStore = packageInformationStores.get(name);
-
-        if (!packageInformationStore) {
-          packageInformationStore = new Map();
-          packageInformationStores.set(name, packageInformationStore);
-        }
-
-        packageInformationStore.set(pkg.version, {
-          packageLocation: normalizeDirectoryPath(loc),
-          packageDependencies: yield visit(new Map(), ref.dependencies, [name, pkg.version])
-        });
-      }
-    }
-
-    // Register the top-level package in our map
-    // This will recurse on each of its dependencies as well.
-    packageInformationStores.set(null, new Map([[null, {
-      packageLocation: normalizeDirectoryPath(config.lockfileFolder),
-      packageDependencies: yield visit(new Map(), seedPatterns)
-    }]]));
-
-    return [packageInformationStores, blacklistedLocations];
-  });
-
-  return function getPackageInformationStores(_x, _x2, _x3) {
-    return _ref17.apply(this, arguments);
-  };
-})();
-
-let generatePnpMap = exports.generatePnpMap = (() => {
-  var _ref26 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (config, seedPatterns, { resolver, reporter, workspaceLayout, targetPath }) {
-    var _ref27 = yield getPackageInformationStores(config, seedPatterns, {
-      resolver,
-      reporter,
-      targetPath,
-      workspaceLayout
-    });
-
-    const packageInformationStores = _ref27[0],
-          blacklistedLocations = _ref27[1];
-
-
-    const setupStaticTables = [generateMaps(packageInformationStores, blacklistedLocations), generateFindPackageLocator(packageInformationStores)].join(``);
-
-    return pnpApi.replace(/\$\$SHEBANG/g, config.plugnplayShebang).replace(/\$\$BLACKLIST/g, JSON.stringify(config.plugnplayBlacklist)).replace(/\$\$SETUP_STATIC_TABLES\(\);/g, setupStaticTables);
-  });
-
-  return function generatePnpMap(_x6, _x7, _x8) {
-    return _ref26.apply(this, arguments);
-  };
-})();
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* babel-plugin-inline-import './generate-pnp-map-api.tpl.js' */const pnpApi = '#!$$SHEBANG\n\n/* eslint-disable max-len, flowtype/require-valid-file-annotation, flowtype/require-return-type */\n/* global packageInformationStores, $$BLACKLIST, $$SETUP_STATIC_TABLES */\n\n// Used for the resolveUnqualified part of the resolution (ie resolving folder/index.js & file extensions)\n// Deconstructed so that they aren\'t affected by any fs monkeypatching occuring later during the execution\nconst {statSync, lstatSync, readlinkSync, readFileSync, existsSync, realpathSync} = require(\'fs\');\n\nconst Module = require(\'module\');\nconst path = require(\'path\');\nconst StringDecoder = require(\'string_decoder\');\n\nconst ignorePattern = $$BLACKLIST ? new RegExp($$BLACKLIST) : null;\n\nconst pnpFile = path.resolve(__dirname, __filename);\nconst builtinModules = new Set(Module.builtinModules || Object.keys(process.binding(\'natives\')));\n\nconst topLevelLocator = {name: null, reference: null};\nconst blacklistedLocator = {name: NaN, reference: NaN};\n\n// Used for compatibility purposes - cf setupCompatibilityLayer\nconst patchedModules = [];\nconst fallbackLocators = [topLevelLocator];\n\n// Matches backslashes of Windows paths\nconst backwardSlashRegExp = /\\\\/g;\n\n// Matches if the path must point to a directory (ie ends with /)\nconst isDirRegExp = /\\/$/;\n\n// Matches if the path starts with a valid path qualifier (./, ../, /)\n// eslint-disable-next-line no-unused-vars\nconst isStrictRegExp = /^\\.{0,2}\\//;\n\n// Splits a require request into its components, or return null if the request is a file path\nconst pathRegExp = /^(?![a-zA-Z]:[\\\\\\/]|\\\\\\\\|\\.{0,2}(?:\\/|$))((?:@[^\\/]+\\/)?[^\\/]+)\\/?(.*|)$/;\n\n// Keep a reference around ("module" is a common name in this context, so better rename it to something more significant)\nconst pnpModule = module;\n\n/**\n * Used to disable the resolution hooks (for when we want to fallback to the previous resolution - we then need\n * a way to "reset" the environment temporarily)\n */\n\nlet enableNativeHooks = true;\n\n/**\n * Simple helper function that assign an error code to an error, so that it can more easily be caught and used\n * by third-parties.\n */\n\nfunction makeError(code, message, data = {}) {\n  const error = new Error(message);\n  return Object.assign(error, {code, data});\n}\n\n/**\n * Ensures that the returned locator isn\'t a blacklisted one.\n *\n * Blacklisted packages are packages that cannot be used because their dependencies cannot be deduced. This only\n * happens with peer dependencies, which effectively have different sets of dependencies depending on their parents.\n *\n * In order to deambiguate those different sets of dependencies, the Yarn implementation of PnP will generate a\n * symlink for each combination of <package name>/<package version>/<dependent package> it will find, and will\n * blacklist the target of those symlinks. By doing this, we ensure that files loaded through a specific path\n * will always have the same set of dependencies, provided the symlinks are correctly preserved.\n *\n * Unfortunately, some tools do not preserve them, and when it happens PnP isn\'t able anymore to deduce the set of\n * dependencies based on the path of the file that makes the require calls. But since we\'ve blacklisted those paths,\n * we\'re able to print a more helpful error message that points out that a third-party package is doing something\n * incompatible!\n */\n\n// eslint-disable-next-line no-unused-vars\nfunction blacklistCheck(locator) {\n  if (locator === blacklistedLocator) {\n    throw makeError(\n      `BLACKLISTED`,\n      [\n        `A package has been resolved through a blacklisted path - this is usually caused by one of your tools calling`,\n        `"realpath" on the return value of "require.resolve". Since the returned values use symlinks to disambiguate`,\n        `peer dependencies, they must be passed untransformed to "require".`,\n      ].join(` `)\n    );\n  }\n\n  return locator;\n}\n\n$$SETUP_STATIC_TABLES();\n\n/**\n * Returns the module that should be used to resolve require calls. It\'s usually the direct parent, except if we\'re\n * inside an eval expression.\n */\n\nfunction getIssuerModule(parent) {\n  let issuer = parent;\n\n  while (issuer && (issuer.id === \'[eval]\' || issuer.id === \'<repl>\' || !issuer.filename)) {\n    issuer = issuer.parent;\n  }\n\n  return issuer;\n}\n\n/**\n * Returns information about a package in a safe way (will throw if they cannot be retrieved)\n */\n\nfunction getPackageInformationSafe(packageLocator) {\n  const packageInformation = exports.getPackageInformation(packageLocator);\n\n  if (!packageInformation) {\n    throw makeError(\n      `INTERNAL`,\n      `Couldn\'t find a matching entry in the dependency tree for the specified parent (this is probably an internal error)`\n    );\n  }\n\n  return packageInformation;\n}\n\n/**\n * Implements the node resolution for folder access and extension selection\n */\n\nfunction applyNodeExtensionResolution(unqualifiedPath, {extensions}) {\n  // We use this "infinite while" so that we can restart the process as long as we hit package folders\n  while (true) {\n    let stat;\n\n    try {\n      stat = statSync(unqualifiedPath);\n    } catch (error) {}\n\n    // If the file exists and is a file, we can stop right there\n\n    if (stat && !stat.isDirectory()) {\n      // If the very last component of the resolved path is a symlink to a file, we then resolve it to a file. We only\n      // do this first the last component, and not the rest of the path! This allows us to support the case of bin\n      // symlinks, where a symlink in "/xyz/pkg-name/.bin/bin-name" will point somewhere else (like "/xyz/pkg-name/index.js").\n      // In such a case, we want relative requires to be resolved relative to "/xyz/pkg-name/" rather than "/xyz/pkg-name/.bin/".\n      //\n      // Also note that the reason we must use readlink on the last component (instead of realpath on the whole path)\n      // is that we must preserve the other symlinks, in particular those used by pnp to deambiguate packages using\n      // peer dependencies. For example, "/xyz/.pnp/local/pnp-01234569/.bin/bin-name" should see its relative requires\n      // be resolved relative to "/xyz/.pnp/local/pnp-0123456789/" rather than "/xyz/pkg-with-peers/", because otherwise\n      // we would lose the information that would tell us what are the dependencies of pkg-with-peers relative to its\n      // ancestors.\n\n      if (lstatSync(unqualifiedPath).isSymbolicLink()) {\n        unqualifiedPath = path.normalize(path.resolve(path.dirname(unqualifiedPath), readlinkSync(unqualifiedPath)));\n      }\n\n      return unqualifiedPath;\n    }\n\n    // If the file is a directory, we must check if it contains a package.json with a "main" entry\n\n    if (stat && stat.isDirectory()) {\n      let pkgJson;\n\n      try {\n        pkgJson = JSON.parse(readFileSync(`${unqualifiedPath}/package.json`, \'utf-8\'));\n      } catch (error) {}\n\n      let nextUnqualifiedPath;\n\n      if (pkgJson && pkgJson.main) {\n        nextUnqualifiedPath = path.resolve(unqualifiedPath, pkgJson.main);\n      }\n\n      // If the "main" field changed the path, we start again from this new location\n\n      if (nextUnqualifiedPath && nextUnqualifiedPath !== unqualifiedPath) {\n        const resolution = applyNodeExtensionResolution(nextUnqualifiedPath, {extensions});\n\n        if (resolution !== null) {\n          return resolution;\n        }\n      }\n    }\n\n    // Otherwise we check if we find a file that match one of the supported extensions\n\n    const qualifiedPath = extensions\n      .map(extension => {\n        return `${unqualifiedPath}${extension}`;\n      })\n      .find(candidateFile => {\n        return existsSync(candidateFile);\n      });\n\n    if (qualifiedPath) {\n      return qualifiedPath;\n    }\n\n    // Otherwise, we check if the path is a folder - in such a case, we try to use its index\n\n    if (stat && stat.isDirectory()) {\n      const indexPath = extensions\n        .map(extension => {\n          return `${unqualifiedPath}/index${extension}`;\n        })\n        .find(candidateFile => {\n          return existsSync(candidateFile);\n        });\n\n      if (indexPath) {\n        return indexPath;\n      }\n    }\n\n    // Otherwise there\'s nothing else we can do :(\n\n    return null;\n  }\n}\n\n/**\n * This function creates fake modules that can be used with the _resolveFilename function.\n * Ideally it would be nice to be able to avoid this, since it causes useless allocations\n * and cannot be cached efficiently (we recompute the nodeModulePaths every time).\n *\n * Fortunately, this should only affect the fallback, and there hopefully shouldn\'t be a\n * lot of them.\n */\n\nfunction makeFakeModule(path) {\n  const fakeModule = new Module(path, false);\n  fakeModule.filename = path;\n  fakeModule.paths = Module._nodeModulePaths(path);\n  return fakeModule;\n}\n\n/**\n * Normalize path to posix format.\n */\n\nfunction normalizePath(fsPath) {\n  fsPath = path.normalize(fsPath);\n\n  if (process.platform === \'win32\') {\n    fsPath = fsPath.replace(backwardSlashRegExp, \'/\');\n  }\n\n  return fsPath;\n}\n\n/**\n * Forward the resolution to the next resolver (usually the native one)\n */\n\nfunction callNativeResolution(request, issuer) {\n  if (issuer.endsWith(\'/\')) {\n    issuer += \'internal.js\';\n  }\n\n  try {\n    enableNativeHooks = false;\n\n    // Since we would need to create a fake module anyway (to call _resolveLookupPath that\n    // would give us the paths to give to _resolveFilename), we can as well not use\n    // the {paths} option at all, since it internally makes _resolveFilename create another\n    // fake module anyway.\n    return Module._resolveFilename(request, makeFakeModule(issuer), false);\n  } finally {\n    enableNativeHooks = true;\n  }\n}\n\n/**\n * This key indicates which version of the standard is implemented by this resolver. The `std` key is the\n * Plug\'n\'Play standard, and any other key are third-party extensions. Third-party extensions are not allowed\n * to override the standard, and can only offer new methods.\n *\n * If an new version of the Plug\'n\'Play standard is released and some extensions conflict with newly added\n * functions, they\'ll just have to fix the conflicts and bump their own version number.\n */\n\nexports.VERSIONS = {std: 1};\n\n/**\n * Useful when used together with getPackageInformation to fetch information about the top-level package.\n */\n\nexports.topLevel = {name: null, reference: null};\n\n/**\n * Gets the package information for a given locator. Returns null if they cannot be retrieved.\n */\n\nexports.getPackageInformation = function getPackageInformation({name, reference}) {\n  const packageInformationStore = packageInformationStores.get(name);\n\n  if (!packageInformationStore) {\n    return null;\n  }\n\n  const packageInformation = packageInformationStore.get(reference);\n\n  if (!packageInformation) {\n    return null;\n  }\n\n  return packageInformation;\n};\n\n/**\n * Transforms a request (what\'s typically passed as argument to the require function) into an unqualified path.\n * This path is called "unqualified" because it only changes the package name to the package location on the disk,\n * which means that the end result still cannot be directly accessed (for example, it doesn\'t try to resolve the\n * file extension, or to resolve directories to their "index.js" content). Use the "resolveUnqualified" function\n * to convert them to fully-qualified paths, or just use "resolveRequest" that do both operations in one go.\n *\n * Note that it is extremely important that the `issuer` path ends with a forward slash if the issuer is to be\n * treated as a folder (ie. "/tmp/foo/" rather than "/tmp/foo" if "foo" is a directory). Otherwise relative\n * imports won\'t be computed correctly (they\'ll get resolved relative to "/tmp/" instead of "/tmp/foo/").\n */\n\nexports.resolveToUnqualified = function resolveToUnqualified(request, issuer, {considerBuiltins = true} = {}) {\n  // The \'pnpapi\' request is reserved and will always return the path to the PnP file, from everywhere\n\n  if (request === `pnpapi`) {\n    return pnpFile;\n  }\n\n  // Bailout if the request is a native module\n\n  if (considerBuiltins && builtinModules.has(request)) {\n    return null;\n  }\n\n  // We allow disabling the pnp resolution for some subpaths. This is because some projects, often legacy,\n  // contain multiple levels of dependencies (ie. a yarn.lock inside a subfolder of a yarn.lock). This is\n  // typically solved using workspaces, but not all of them have been converted already.\n\n  if (ignorePattern && ignorePattern.test(normalizePath(issuer))) {\n    const result = callNativeResolution(request, issuer);\n\n    if (result === false) {\n      throw makeError(\n        `BUILTIN_NODE_RESOLUTION_FAIL`,\n        `The builtin node resolution algorithm was unable to resolve the module referenced by "${request}" and requested from "${issuer}" (it didn\'t go through the pnp resolver because the issuer was explicitely ignored by the regexp "$$BLACKLIST")`,\n        {\n          request,\n          issuer,\n        }\n      );\n    }\n\n    return result;\n  }\n\n  let unqualifiedPath;\n\n  // If the request is a relative or absolute path, we just return it normalized\n\n  const dependencyNameMatch = request.match(pathRegExp);\n\n  if (!dependencyNameMatch) {\n    if (path.isAbsolute(request)) {\n      unqualifiedPath = path.normalize(request);\n    } else if (issuer.match(isDirRegExp)) {\n      unqualifiedPath = path.normalize(path.resolve(issuer, request));\n    } else {\n      unqualifiedPath = path.normalize(path.resolve(path.dirname(issuer), request));\n    }\n  }\n\n  // Things are more hairy if it\'s a package require - we then need to figure out which package is needed, and in\n  // particular the exact version for the given location on the dependency tree\n\n  if (dependencyNameMatch) {\n    const [, dependencyName, subPath] = dependencyNameMatch;\n\n    const issuerLocator = exports.findPackageLocator(issuer);\n\n    // If the issuer file doesn\'t seem to be owned by a package managed through pnp, then we resort to using the next\n    // resolution algorithm in the chain, usually the native Node resolution one\n\n    if (!issuerLocator) {\n      const result = callNativeResolution(request, issuer);\n\n      if (result === false) {\n        throw makeError(\n          `BUILTIN_NODE_RESOLUTION_FAIL`,\n          `The builtin node resolution algorithm was unable to resolve the module referenced by "${request}" and requested from "${issuer}" (it didn\'t go through the pnp resolver because the issuer doesn\'t seem to be part of the Yarn-managed dependency tree)`,\n          {\n            request,\n            issuer,\n          }\n        );\n      }\n\n      return result;\n    }\n\n    const issuerInformation = getPackageInformationSafe(issuerLocator);\n\n    // We obtain the dependency reference in regard to the package that request it\n\n    let dependencyReference = issuerInformation.packageDependencies.get(dependencyName);\n\n    // If we can\'t find it, we check if we can potentially load it from the packages that have been defined as potential fallbacks.\n    // It\'s a bit of a hack, but it improves compatibility with the existing Node ecosystem. Hopefully we should eventually be able\n    // to kill this logic and become stricter once pnp gets enough traction and the affected packages fix themselves.\n\n    if (issuerLocator !== topLevelLocator) {\n      for (let t = 0, T = fallbackLocators.length; dependencyReference === undefined && t < T; ++t) {\n        const fallbackInformation = getPackageInformationSafe(fallbackLocators[t]);\n        dependencyReference = fallbackInformation.packageDependencies.get(dependencyName);\n      }\n    }\n\n    // If we can\'t find the path, and if the package making the request is the top-level, we can offer nicer error messages\n\n    if (!dependencyReference) {\n      if (dependencyReference === null) {\n        if (issuerLocator === topLevelLocator) {\n          throw makeError(\n            `MISSING_PEER_DEPENDENCY`,\n            `You seem to be requiring a peer dependency ("${dependencyName}"), but it is not installed (which might be because you\'re the top-level package)`,\n            {request, issuer, dependencyName}\n          );\n        } else {\n          throw makeError(\n            `MISSING_PEER_DEPENDENCY`,\n            `Package "${issuerLocator.name}@${issuerLocator.reference}" is trying to access a peer dependency ("${dependencyName}") that should be provided by its direct ancestor but isn\'t`,\n            {request, issuer, issuerLocator: Object.assign({}, issuerLocator), dependencyName}\n          );\n        }\n      } else {\n        if (issuerLocator === topLevelLocator) {\n          throw makeError(\n            `UNDECLARED_DEPENDENCY`,\n            `You cannot require a package ("${dependencyName}") that is not declared in your dependencies (via "${issuer}")`,\n            {request, issuer, dependencyName}\n          );\n        } else {\n          const candidates = Array.from(issuerInformation.packageDependencies.keys());\n          throw makeError(\n            `UNDECLARED_DEPENDENCY`,\n            `Package "${issuerLocator.name}@${issuerLocator.reference}" (via "${issuer}") is trying to require the package "${dependencyName}" (via "${request}") without it being listed in its dependencies (${candidates.join(\n              `, `\n            )})`,\n            {request, issuer, issuerLocator: Object.assign({}, issuerLocator), dependencyName, candidates}\n          );\n        }\n      }\n    }\n\n    // We need to check that the package exists on the filesystem, because it might not have been installed\n\n    const dependencyLocator = {name: dependencyName, reference: dependencyReference};\n    const dependencyInformation = exports.getPackageInformation(dependencyLocator);\n    const dependencyLocation = path.resolve(__dirname, dependencyInformation.packageLocation);\n\n    if (!dependencyLocation) {\n      throw makeError(\n        `MISSING_DEPENDENCY`,\n        `Package "${dependencyLocator.name}@${dependencyLocator.reference}" is a valid dependency, but hasn\'t been installed and thus cannot be required (it might be caused if you install a partial tree, such as on production environments)`,\n        {request, issuer, dependencyLocator: Object.assign({}, dependencyLocator)}\n      );\n    }\n\n    // Now that we know which package we should resolve to, we only have to find out the file location\n\n    if (subPath) {\n      unqualifiedPath = path.resolve(dependencyLocation, subPath);\n    } else {\n      unqualifiedPath = dependencyLocation;\n    }\n  }\n\n  return path.normalize(unqualifiedPath);\n};\n\n/**\n * Transforms an unqualified path into a qualified path by using the Node resolution algorithm (which automatically\n * appends ".js" / ".json", and transforms directory accesses into "index.js").\n */\n\nexports.resolveUnqualified = function resolveUnqualified(\n  unqualifiedPath,\n  {extensions = Object.keys(Module._extensions)} = {}\n) {\n  const qualifiedPath = applyNodeExtensionResolution(unqualifiedPath, {extensions});\n\n  if (qualifiedPath) {\n    return path.normalize(qualifiedPath);\n  } else {\n    throw makeError(\n      `QUALIFIED_PATH_RESOLUTION_FAILED`,\n      `Couldn\'t find a suitable Node resolution for unqualified path "${unqualifiedPath}"`,\n      {unqualifiedPath}\n    );\n  }\n};\n\n/**\n * Transforms a request into a fully qualified path.\n *\n * Note that it is extremely important that the `issuer` path ends with a forward slash if the issuer is to be\n * treated as a folder (ie. "/tmp/foo/" rather than "/tmp/foo" if "foo" is a directory). Otherwise relative\n * imports won\'t be computed correctly (they\'ll get resolved relative to "/tmp/" instead of "/tmp/foo/").\n */\n\nexports.resolveRequest = function resolveRequest(request, issuer, {considerBuiltins, extensions} = {}) {\n  let unqualifiedPath;\n\n  try {\n    unqualifiedPath = exports.resolveToUnqualified(request, issuer, {considerBuiltins});\n  } catch (originalError) {\n    // If we get a BUILTIN_NODE_RESOLUTION_FAIL error there, it means that we\'ve had to use the builtin node\n    // resolution, which usually shouldn\'t happen. It might be because the user is trying to require something\n    // from a path loaded through a symlink (which is not possible, because we need something normalized to\n    // figure out which package is making the require call), so we try to make the same request using a fully\n    // resolved issuer and throws a better and more actionable error if it works.\n    if (originalError.code === `BUILTIN_NODE_RESOLUTION_FAIL`) {\n      let realIssuer;\n\n      try {\n        realIssuer = realpathSync(issuer);\n      } catch (error) {}\n\n      if (realIssuer) {\n        if (issuer.endsWith(`/`)) {\n          realIssuer = realIssuer.replace(/\\/?$/, `/`);\n        }\n\n        try {\n          exports.resolveToUnqualified(request, realIssuer, {considerBuiltins});\n        } catch (error) {\n          // If an error was thrown, the problem doesn\'t seem to come from a path not being normalized, so we\n          // can just throw the original error which was legit.\n          throw originalError;\n        }\n\n        // If we reach this stage, it means that resolveToUnqualified didn\'t fail when using the fully resolved\n        // file path, which is very likely caused by a module being invoked through Node with a path not being\n        // correctly normalized (ie you should use "node $(realpath script.js)" instead of "node script.js").\n        throw makeError(\n          `SYMLINKED_PATH_DETECTED`,\n          `A pnp module ("${request}") has been required from what seems to be a symlinked path ("${issuer}"). This is not possible, you must ensure that your modules are invoked through their fully resolved path on the filesystem (in this case "${realIssuer}").`,\n          {\n            request,\n            issuer,\n            realIssuer,\n          }\n        );\n      }\n    }\n    throw originalError;\n  }\n\n  if (unqualifiedPath === null) {\n    return null;\n  }\n\n  try {\n    return exports.resolveUnqualified(unqualifiedPath, {extensions});\n  } catch (resolutionError) {\n    if (resolutionError.code === \'QUALIFIED_PATH_RESOLUTION_FAILED\') {\n      Object.assign(resolutionError.data, {request, issuer});\n    }\n    throw resolutionError;\n  }\n};\n\n/**\n * Setups the hook into the Node environment.\n *\n * From this point on, any call to `require()` will go through the "resolveRequest" function, and the result will\n * be used as path of the file to load.\n */\n\nexports.setup = function setup() {\n  // A small note: we don\'t replace the cache here (and instead use the native one). This is an effort to not\n  // break code similar to "delete require.cache[require.resolve(FOO)]", where FOO is a package located outside\n  // of the Yarn dependency tree. In this case, we defer the load to the native loader. If we were to replace the\n  // cache by our own, the native loader would populate its own cache, which wouldn\'t be exposed anymore, so the\n  // delete call would be broken.\n\n  const originalModuleLoad = Module._load;\n\n  Module._load = function(request, parent, isMain) {\n    if (!enableNativeHooks) {\n      return originalModuleLoad.call(Module, request, parent, isMain);\n    }\n\n    // Builtins are managed by the regular Node loader\n\n    if (builtinModules.has(request)) {\n      try {\n        enableNativeHooks = false;\n        return originalModuleLoad.call(Module, request, parent, isMain);\n      } finally {\n        enableNativeHooks = true;\n      }\n    }\n\n    // The \'pnpapi\' name is reserved to return the PnP api currently in use by the program\n\n    if (request === `pnpapi`) {\n      return pnpModule.exports;\n    }\n\n    // Request `Module._resolveFilename` (ie. `resolveRequest`) to tell us which file we should load\n\n    const modulePath = Module._resolveFilename(request, parent, isMain);\n\n    // Check if the module has already been created for the given file\n\n    const cacheEntry = Module._cache[modulePath];\n\n    if (cacheEntry) {\n      return cacheEntry.exports;\n    }\n\n    // Create a new module and store it into the cache\n\n    const module = new Module(modulePath, parent);\n    Module._cache[modulePath] = module;\n\n    // The main module is exposed as global variable\n\n    if (isMain) {\n      process.mainModule = module;\n      module.id = \'.\';\n    }\n\n    // Try to load the module, and remove it from the cache if it fails\n\n    let hasThrown = true;\n\n    try {\n      module.load(modulePath);\n      hasThrown = false;\n    } finally {\n      if (hasThrown) {\n        delete Module._cache[modulePath];\n      }\n    }\n\n    // Some modules might have to be patched for compatibility purposes\n\n    for (const [filter, patchFn] of patchedModules) {\n      if (filter.test(request)) {\n        module.exports = patchFn(exports.findPackageLocator(parent.filename), module.exports);\n      }\n    }\n\n    return module.exports;\n  };\n\n  const originalModuleResolveFilename = Module._resolveFilename;\n\n  Module._resolveFilename = function(request, parent, isMain, options) {\n    if (!enableNativeHooks) {\n      return originalModuleResolveFilename.call(Module, request, parent, isMain, options);\n    }\n\n    let issuers;\n\n    if (options) {\n      const optionNames = new Set(Object.keys(options));\n      optionNames.delete(\'paths\');\n\n      if (optionNames.size > 0) {\n        throw makeError(\n          `UNSUPPORTED`,\n          `Some options passed to require() aren\'t supported by PnP yet (${Array.from(optionNames).join(\', \')})`\n        );\n      }\n\n      if (options.paths) {\n        issuers = options.paths.map(entry => `${path.normalize(entry)}/`);\n      }\n    }\n\n    if (!issuers) {\n      const issuerModule = getIssuerModule(parent);\n      const issuer = issuerModule ? issuerModule.filename : `${process.cwd()}/`;\n\n      issuers = [issuer];\n    }\n\n    let firstError;\n\n    for (const issuer of issuers) {\n      let resolution;\n\n      try {\n        resolution = exports.resolveRequest(request, issuer);\n      } catch (error) {\n        firstError = firstError || error;\n        continue;\n      }\n\n      return resolution !== null ? resolution : request;\n    }\n\n    throw firstError;\n  };\n\n  const originalFindPath = Module._findPath;\n\n  Module._findPath = function(request, paths, isMain) {\n    if (!enableNativeHooks) {\n      return originalFindPath.call(Module, request, paths, isMain);\n    }\n\n    for (const path of paths || []) {\n      let resolution;\n\n      try {\n        resolution = exports.resolveRequest(request, path);\n      } catch (error) {\n        continue;\n      }\n\n      if (resolution) {\n        return resolution;\n      }\n    }\n\n    return false;\n  };\n\n  process.versions.pnp = String(exports.VERSIONS.std);\n};\n\nexports.setupCompatibilityLayer = () => {\n  // ESLint currently doesn\'t have any portable way for shared configs to specify their own\n  // plugins that should be used (https://github.com/eslint/eslint/issues/10125). This will\n  // likely get fixed at some point, but it\'ll take time and in the meantime we\'ll just add\n  // additional fallback entries for common shared configs.\n\n  for (const name of [`react-scripts`]) {\n    const packageInformationStore = packageInformationStores.get(name);\n    if (packageInformationStore) {\n      for (const reference of packageInformationStore.keys()) {\n        fallbackLocators.push({name, reference});\n      }\n    }\n  }\n\n  // Modern versions of `resolve` support a specific entry point that custom resolvers can use\n  // to inject a specific resolution logic without having to patch the whole package.\n  //\n  // Cf: https://github.com/browserify/resolve/pull/174\n\n  patchedModules.push([\n    /^\\.\\/normalize-options\\.js$/,\n    (issuer, normalizeOptions) => {\n      if (!issuer || issuer.name !== \'resolve\') {\n        return normalizeOptions;\n      }\n\n      return (request, opts) => {\n        opts = opts || {};\n\n        if (opts.forceNodeResolution) {\n          return opts;\n        }\n\n        opts.preserveSymlinks = true;\n        opts.paths = function(request, basedir, getNodeModulesDir, opts) {\n          // Extract the name of the package being requested (1=full name, 2=scope name, 3=local name)\n          const parts = request.match(/^((?:(@[^\\/]+)\\/)?([^\\/]+))/);\n\n          // make sure that basedir ends with a slash\n          if (basedir.charAt(basedir.length - 1) !== \'/\') {\n            basedir = path.join(basedir, \'/\');\n          }\n          // This is guaranteed to return the path to the "package.json" file from the given package\n          const manifestPath = exports.resolveToUnqualified(`${parts[1]}/package.json`, basedir);\n\n          // The first dirname strips the package.json, the second strips the local named folder\n          let nodeModules = path.dirname(path.dirname(manifestPath));\n\n          // Strips the scope named folder if needed\n          if (parts[2]) {\n            nodeModules = path.dirname(nodeModules);\n          }\n\n          return [nodeModules];\n        };\n\n        return opts;\n      };\n    },\n  ]);\n};\n\nif (module.parent && module.parent.id === \'internal/preload\') {\n  exports.setupCompatibilityLayer();\n\n  exports.setup();\n}\n\nif (process.mainModule === module) {\n  exports.setupCompatibilityLayer();\n\n  const reportError = (code, message, data) => {\n    process.stdout.write(`${JSON.stringify([{code, message, data}, null])}\\n`);\n  };\n\n  const reportSuccess = resolution => {\n    process.stdout.write(`${JSON.stringify([null, resolution])}\\n`);\n  };\n\n  const processResolution = (request, issuer) => {\n    try {\n      reportSuccess(exports.resolveRequest(request, issuer));\n    } catch (error) {\n      reportError(error.code, error.message, error.data);\n    }\n  };\n\n  const processRequest = data => {\n    try {\n      const [request, issuer] = JSON.parse(data);\n      processResolution(request, issuer);\n    } catch (error) {\n      reportError(`INVALID_JSON`, error.message, error.data);\n    }\n  };\n\n  if (process.argv.length > 2) {\n    if (process.argv.length !== 4) {\n      process.stderr.write(`Usage: ${process.argv[0]} ${process.argv[1]} <request> <issuer>\\n`);\n      process.exitCode = 64; /* EX_USAGE */\n    } else {\n      processResolution(process.argv[2], process.argv[3]);\n    }\n  } else {\n    let buffer = \'\';\n    const decoder = new StringDecoder.StringDecoder();\n\n    process.stdin.on(\'data\', chunk => {\n      buffer += decoder.write(chunk);\n\n      do {\n        const index = buffer.indexOf(\'\\n\');\n        if (index === -1) {\n          break;\n        }\n\n        const line = buffer.slice(0, index);\n        buffer = buffer.slice(index + 1);\n\n        processRequest(line);\n      } while (true);\n    });\n  }\n}\n';
-
-
-const crypto = __webpack_require__(11);
-const invariant = __webpack_require__(9);
-const path = __webpack_require__(0);
-
-const backwardSlashRegExp = /\\/g;
-
-const OFFLINE_CACHE_EXTENSION = `.zip`;
-
-function generateMaps(packageInformationStores, blacklistedLocations) {
-  let code = ``;
-
-  // Bake the information stores into our generated code
-  code += `let packageInformationStores = new Map([\n`;
-  for (var _iterator = packageInformationStores, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref2 = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref2 = _i.value;
-    }
-
-    const _ref = _ref2;
-    const packageName = _ref[0];
-    const packageInformationStore = _ref[1];
-
-    code += `  [${JSON.stringify(packageName)}, new Map([\n`;
-    for (var _iterator4 = packageInformationStore, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-      var _ref7;
-
-      if (_isArray4) {
-        if (_i4 >= _iterator4.length) break;
-        _ref7 = _iterator4[_i4++];
-      } else {
-        _i4 = _iterator4.next();
-        if (_i4.done) break;
-        _ref7 = _i4.value;
-      }
-
-      const _ref6 = _ref7;
-      const packageReference = _ref6[0];
-      var _ref6$ = _ref6[1];
-      const packageLocation = _ref6$.packageLocation;
-      const packageDependencies = _ref6$.packageDependencies;
-
-      code += `    [${JSON.stringify(packageReference)}, {\n`;
-      code += `      packageLocation: path.resolve(__dirname, ${JSON.stringify(packageLocation)}),\n`;
-      code += `      packageDependencies: new Map([\n`;
-      for (var _iterator5 = packageDependencies.entries(), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-        var _ref9;
-
-        if (_isArray5) {
-          if (_i5 >= _iterator5.length) break;
-          _ref9 = _iterator5[_i5++];
-        } else {
-          _i5 = _iterator5.next();
-          if (_i5.done) break;
-          _ref9 = _i5.value;
-        }
-
-        const _ref8 = _ref9;
-        const dependencyName = _ref8[0];
-        const dependencyReference = _ref8[1];
-
-        code += `        [${JSON.stringify(dependencyName)}, ${JSON.stringify(dependencyReference)}],\n`;
-      }
-      code += `      ]),\n`;
-      code += `    }],\n`;
-    }
-    code += `  ])],\n`;
-  }
-  code += `]);\n`;
-
-  code += `\n`;
-
-  // Also bake an inverse map that will allow us to find the package information based on the path
-  code += `let locatorsByLocations = new Map([\n`;
-  for (var _iterator2 = blacklistedLocations, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref3;
-
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref3 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref3 = _i2.value;
-    }
-
-    const blacklistedLocation = _ref3;
-
-    code += `  [${JSON.stringify(blacklistedLocation)}, blacklistedLocator],\n`;
-  }
-  for (var _iterator3 = packageInformationStores, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-    var _ref5;
-
-    if (_isArray3) {
-      if (_i3 >= _iterator3.length) break;
-      _ref5 = _iterator3[_i3++];
-    } else {
-      _i3 = _iterator3.next();
-      if (_i3.done) break;
-      _ref5 = _i3.value;
-    }
-
-    const _ref4 = _ref5;
-    const packageName = _ref4[0];
-    const packageInformationStore = _ref4[1];
-
-    for (var _iterator6 = packageInformationStore, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-      var _ref11;
-
-      if (_isArray6) {
-        if (_i6 >= _iterator6.length) break;
-        _ref11 = _iterator6[_i6++];
-      } else {
-        _i6 = _iterator6.next();
-        if (_i6.done) break;
-        _ref11 = _i6.value;
-      }
-
-      const _ref10 = _ref11;
-      const packageReference = _ref10[0];
-      const packageLocation = _ref10[1].packageLocation;
-
-      if (packageName !== null) {
-        code += `  [${JSON.stringify(packageLocation)}, ${JSON.stringify({
-          name: packageName,
-          reference: packageReference
-        })}],\n`;
-      } else {
-        code += `  [${JSON.stringify(packageLocation)}, topLevelLocator],\n`;
-      }
-    }
-  }
-  code += `]);\n`;
-
-  return code;
-}
-
-function generateFindPackageLocator(packageInformationStores) {
-  let code = ``;
-
-  // We get the list of each string length we'll need to check in order to find the current package context
-  const lengths = new Map();
-
-  for (var _iterator7 = packageInformationStores.values(), _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-    var _ref12;
-
-    if (_isArray7) {
-      if (_i7 >= _iterator7.length) break;
-      _ref12 = _iterator7[_i7++];
-    } else {
-      _i7 = _iterator7.next();
-      if (_i7.done) break;
-      _ref12 = _i7.value;
-    }
-
-    const packageInformationStore = _ref12;
-
-    for (var _iterator9 = packageInformationStore.values(), _isArray9 = Array.isArray(_iterator9), _i9 = 0, _iterator9 = _isArray9 ? _iterator9 : _iterator9[Symbol.iterator]();;) {
-      var _ref16;
-
-      if (_isArray9) {
-        if (_i9 >= _iterator9.length) break;
-        _ref16 = _iterator9[_i9++];
-      } else {
-        _i9 = _iterator9.next();
-        if (_i9.done) break;
-        _ref16 = _i9.value;
-      }
-
-      const _ref15 = _ref16;
-      const packageLocation = _ref15.packageLocation;
-
-      if (packageLocation === null) {
-        continue;
-      }
-
-      const length = packageLocation.length;
-      const count = (lengths.get(length) || 0) + 1;
-
-      lengths.set(length, count);
-    }
-  }
-
-  // We must try the larger lengths before the smaller ones, because smaller ones might also match the longest ones
-  // (for instance, /project/path will match /project/path/.pnp/global/node_modules/pnp-cf5f9c17b8f8db)
-  const sortedLengths = Array.from(lengths.entries()).sort((a, b) => {
-    return b[0] - a[0];
-  });
-
-  // Generate a function that, given a file path, returns the associated package name
-  code += `exports.findPackageLocator = function findPackageLocator(location) {\n`;
-  code += `  let relativeLocation = normalizePath(path.relative(__dirname, location));\n`;
-  code += `\n`;
-  code += `  if (!relativeLocation.match(isStrictRegExp))\n`;
-  code += `    relativeLocation = \`./\${relativeLocation}\`;\n`;
-  code += `\n`;
-  code += `  if (location.match(isDirRegExp) && relativeLocation.charAt(relativeLocation.length - 1) !== '/')\n`;
-  code += `    relativeLocation = \`\${relativeLocation}/\`;\n`;
-  code += `\n`;
-  code += `  let match;\n`;
-
-  for (var _iterator8 = sortedLengths, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
-    var _ref14;
-
-    if (_isArray8) {
-      if (_i8 >= _iterator8.length) break;
-      _ref14 = _iterator8[_i8++];
-    } else {
-      _i8 = _iterator8.next();
-      if (_i8.done) break;
-      _ref14 = _i8.value;
-    }
-
-    const _ref13 = _ref14;
-    const length = _ref13[0];
-
-    code += `\n`;
-    code += `  if (relativeLocation.length >= ${length} && relativeLocation[${length - 1}] === '/')\n`;
-    code += `    if (match = locatorsByLocations.get(relativeLocation.substr(0, ${length})))\n`;
-    code += `      return blacklistCheck(match);\n`;
-  }
-
-  code += `\n`;
-  code += `  return null;\n`;
-  code += `};\n`;
-
-  return code;
-}
-
-/***/ }),
-/* 580 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.getTransitiveDevDependencies = getTransitiveDevDependencies;
-function dependenciesObjectToPatterns(dependencies) {
-  if (!dependencies) {
-    return [];
-  }
-  return Object.keys(dependencies).map(name => `${name}@${(dependencies || {})[name]}`);
-}
-
-// Enumerate all the transitive dependencies of a set of top-level packages
-function getTransitiveDependencies(lockfile, roots) {
-  // Queue of dependency patterns to visit; set of already-visited patterns
-  const queue = [];
-  const patterns = new Set();
-
-  const enqueue = pattern => {
-    if (patterns.has(pattern)) {
-      return;
-    }
-    patterns.add(pattern);
-    queue.push(pattern);
-  };
-
-  roots.forEach(enqueue);
-
-  // Final result set
-  const transitiveDependencies = new Set();
-
-  while (queue.length > 0) {
-    const pattern = queue.shift();
-    const lockManifest = lockfile.getLocked(pattern);
-
-    if (!lockManifest) {
-      continue;
-    }
-
-    // Add the dependency to the result set
-    transitiveDependencies.add(`${lockManifest.name}@${lockManifest.version}`);
-
-    // Enqueue any dependencies of the dependency for processing
-
-    const dependencyPatterns = dependenciesObjectToPatterns(lockManifest.dependencies);
-    dependencyPatterns.forEach(enqueue);
-
-    const optionalDependencyPatterns = dependenciesObjectToPatterns(lockManifest.optionalDependencies);
-    optionalDependencyPatterns.forEach(enqueue);
-  }
-
-  return transitiveDependencies;
-}
-
-function setDifference(x, y) {
-  return new Set([...x].filter(value => !y.has(value)));
-}
-
-// Given a manifest, an optional workspace layout, and a lockfile, enumerate
-// all package versions that:
-// i) are present in the lockfile
-// ii) are a transitive dependency of some top-level devDependency
-// iii) are not a transitive dependency of some top-level production dependency
-function getTransitiveDevDependencies(packageManifest, workspaceLayout, lockfile) {
-  // Enumerate the top-level package manifest as well as any workspace manifests
-  const manifests = [packageManifest];
-  if (workspaceLayout) {
-    for (var _iterator = Object.keys(workspaceLayout.workspaces), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const name = _ref;
-
-      manifests.push(workspaceLayout.workspaces[name].manifest);
-    }
-  }
-
-  // Collect all the top-level production and development dependencies across all manifests
-  let productionRoots = [];
-  let developmentRoots = [];
-  for (var _iterator2 = manifests, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref2 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref2 = _i2.value;
-    }
-
-    const manifest = _ref2;
-
-    productionRoots = productionRoots.concat(dependenciesObjectToPatterns(manifest.dependencies));
-    productionRoots = productionRoots.concat(dependenciesObjectToPatterns(manifest.optionalDependencies));
-    developmentRoots = developmentRoots.concat(dependenciesObjectToPatterns(manifest.devDependencies));
-  }
-
-  // Enumerate all the transitive production and development dependencies
-  const productionDependencies = getTransitiveDependencies(lockfile, productionRoots);
-  const developmentDependencies = getTransitiveDependencies(lockfile, developmentRoots);
-
-  // Exclude any development dependencies that are also production dependencies
-  return setDifference(developmentDependencies, productionDependencies);
-}
-
-/***/ }),
-/* 581 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.parseRefs = exports.resolveVersion = exports.isCommitSha = undefined;
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _misc;
-
-function _load_misc() {
-  return _misc = __webpack_require__(18);
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const semver = __webpack_require__(22);
-
-const REF_PREFIX = 'refs/';
-const REF_TAG_PREFIX = 'refs/tags/';
-const REF_BRANCH_PREFIX = 'refs/heads/';
-const REF_PR_PREFIX = 'refs/pull/';
-
-// This regex is designed to match output from git of the style:
-//   ebeb6eafceb61dd08441ffe086c77eb472842494  refs/tags/v0.21.0
-// and extract the hash and ref name as capture groups
-const GIT_REF_LINE_REGEXP = /^([a-fA-F0-9]+)\s+(refs\/(?:tags|heads|pull|remotes)\/.*)$/;
-
-const COMMIT_SHA_REGEXP = /^[a-f0-9]{5,40}$/;
-const REF_NAME_REGEXP = /^refs\/(tags|heads)\/(.+)$/;
-
-const isCommitSha = exports.isCommitSha = target => COMMIT_SHA_REGEXP.test(target);
-
-const tryVersionAsGitCommit = ({ version, refs, git }) => {
-  const lowercaseVersion = version.toLowerCase();
-  if (!isCommitSha(lowercaseVersion)) {
-    return Promise.resolve(null);
-  }
-  for (var _iterator = refs.entries(), _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref2;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref2 = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref2 = _i.value;
-    }
-
-    const _ref = _ref2;
-    const ref = _ref[0];
-    const sha = _ref[1];
-
-    if (sha.startsWith(lowercaseVersion)) {
-      return Promise.resolve({ sha, ref });
-    }
-  }
-  return git.resolveCommit(lowercaseVersion);
-};
-
-const tryEmptyVersionAsDefaultBranch = ({ version, git }) => version.trim() === '' ? git.resolveDefaultBranch() : Promise.resolve(null);
-
-const tryWildcardVersionAsDefaultBranch = ({ version, git }) => version === '*' ? git.resolveDefaultBranch() : Promise.resolve(null);
-
-const tryRef = (refs, ref) => {
-  const sha = refs.get(ref);
-  return sha ? { sha, ref } : null;
-};
-
-const tryVersionAsFullRef = ({ version, refs }) => version.startsWith('refs/') ? tryRef(refs, version) : null;
-
-const tryVersionAsTagName = ({ version, refs }) => tryRef(refs, `${REF_TAG_PREFIX}${version}`);
-
-const tryVersionAsPullRequestNo = ({ version, refs }) => tryRef(refs, `${REF_PR_PREFIX}${version}`);
-
-const tryVersionAsBranchName = ({ version, refs }) => tryRef(refs, `${REF_BRANCH_PREFIX}${version}`);
-
-const tryVersionAsDirectRef = ({ version, refs }) => tryRef(refs, `${REF_PREFIX}${version}`);
-
-const computeSemverNames = ({ config, refs }) => {
-  const names = {
-    tags: [],
-    heads: []
-  };
-  for (var _iterator2 = refs.keys(), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-    var _ref3;
-
-    if (_isArray2) {
-      if (_i2 >= _iterator2.length) break;
-      _ref3 = _iterator2[_i2++];
-    } else {
-      _i2 = _iterator2.next();
-      if (_i2.done) break;
-      _ref3 = _i2.value;
-    }
-
-    const ref = _ref3;
-
-    const match = REF_NAME_REGEXP.exec(ref);
-    if (!match) {
-      continue;
-    }
-    const type = match[1],
-          name = match[2];
-
-    if (semver.valid(name, config.looseSemver)) {
-      names[type].push(name);
-    }
-  }
-  return names;
-};
-
-const findSemver = (version, config, namesList) => config.resolveConstraints(namesList, version);
-
-const tryVersionAsTagSemver = (() => {
-  var _ref4 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ({ version, config, refs }, names) {
-    const result = yield findSemver(version.replace(/^semver:/, ''), config, names.tags);
-    return result ? tryRef(refs, `${REF_TAG_PREFIX}${result}`) : null;
-  });
-
-  return function tryVersionAsTagSemver(_x, _x2) {
-    return _ref4.apply(this, arguments);
-  };
-})();
-
-const tryVersionAsBranchSemver = (() => {
-  var _ref5 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* ({ version, config, refs }, names) {
-    const result = yield findSemver(version.replace(/^semver:/, ''), config, names.heads);
-    return result ? tryRef(refs, `${REF_BRANCH_PREFIX}${result}`) : null;
-  });
-
-  return function tryVersionAsBranchSemver(_x3, _x4) {
-    return _ref5.apply(this, arguments);
-  };
-})();
-
-const tryVersionAsSemverRange = (() => {
-  var _ref6 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (options) {
-    const names = computeSemverNames(options);
-    return (yield tryVersionAsTagSemver(options, names)) || tryVersionAsBranchSemver(options, names);
-  });
-
-  return function tryVersionAsSemverRange(_x5) {
-    return _ref6.apply(this, arguments);
-  };
-})();
-
-const VERSION_RESOLUTION_STEPS = [tryEmptyVersionAsDefaultBranch, tryVersionAsGitCommit, tryVersionAsFullRef, tryVersionAsTagName, tryVersionAsPullRequestNo, tryVersionAsBranchName, tryVersionAsSemverRange, tryWildcardVersionAsDefaultBranch, tryVersionAsDirectRef];
-
-/**
- * Resolve a git-url hash (version) to a git commit sha and branch/tag ref
- * Returns null if the version cannot be resolved to any commit
- */
-
-const resolveVersion = exports.resolveVersion = (() => {
-  var _ref7 = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (options) {
-    for (var _iterator3 = VERSION_RESOLUTION_STEPS, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-      var _ref8;
-
-      if (_isArray3) {
-        if (_i3 >= _iterator3.length) break;
-        _ref8 = _iterator3[_i3++];
-      } else {
-        _i3 = _iterator3.next();
-        if (_i3.done) break;
-        _ref8 = _i3.value;
-      }
-
-      const testFunction = _ref8;
-
-      const result = yield testFunction(options);
-      if (result !== null) {
-        return result;
-      }
-    }
-    return null;
-  });
-
-  return function resolveVersion(_x6) {
-    return _ref7.apply(this, arguments);
-  };
-})();
-
-/**
- * Parse Git ref lines into hash of ref names to SHA hashes
- */
-
-const parseRefs = exports.parseRefs = stdout => {
-  // store references
-  const refs = new Map();
-
-  // line delimited
-  const refLines = stdout.split('\n');
-
-  for (var _iterator4 = refLines, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-    var _ref9;
-
-    if (_isArray4) {
-      if (_i4 >= _iterator4.length) break;
-      _ref9 = _iterator4[_i4++];
-    } else {
-      _i4 = _iterator4.next();
-      if (_i4.done) break;
-      _ref9 = _i4.value;
-    }
-
-    const line = _ref9;
-
-    const match = GIT_REF_LINE_REGEXP.exec(line);
-
-    if (match) {
-      const sha = match[1],
-            tagName = match[2];
-
-      // As documented in gitrevisions:
-      //   https://www.kernel.org/pub/software/scm/git/docs/gitrevisions.html#_specifying_revisions
-      // "A suffix ^ followed by an empty brace pair means the object could be a tag,
-      //   and dereference the tag recursively until a non-tag object is found."
-      // In other words, the hash without ^{} is the hash of the tag,
-      //   and the hash with ^{} is the hash of the commit at which the tag was made.
-
-      const name = (0, (_misc || _load_misc()).removeSuffix)(tagName, '^{}');
-
-      refs.set(name, sha);
-    }
-  }
-
-  return refs;
-};
-
-/***/ }),
-/* 582 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.LogicalDependencyTree = undefined;
-
-var _npmLogicalTree;
-
-function _load_npmLogicalTree() {
-  return _npmLogicalTree = _interopRequireDefault(__webpack_require__(766));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-class LogicalDependencyTree {
-  constructor(packageJson, packageLock) {
-    this.tree = (0, (_npmLogicalTree || _load_npmLogicalTree()).default)(JSON.parse(packageJson), JSON.parse(packageLock));
-  }
-
-  _findNode(name, parentNames) {
-    const parentTree = parentNames ? parentNames.reduce((node, ancestor) => {
-      const ancestorNode = node.dependencies.get(ancestor);
-      return ancestorNode;
-    }, this.tree) : this.tree;
-    const node = parentTree.dependencies.get(name);
-    return node;
-  }
-  getFixedVersionPattern(name, parentNames) {
-    const node = this._findNode(name, parentNames);
-    const version = node.version;
-    return `${node.name}@${version}`;
-  }
-}
-exports.LogicalDependencyTree = LogicalDependencyTree;
-
-/***/ }),
-/* 583 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _util;
-
-function _load_util() {
-  return _util = __webpack_require__(221);
-}
-
-var _index;
-
-function _load_index() {
-  return _index = __webpack_require__(78);
-}
-
-var _inferLicense;
-
-function _load_inferLicense() {
-  return _inferLicense = _interopRequireDefault(__webpack_require__(584));
-}
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const semver = __webpack_require__(22);
-const path = __webpack_require__(0);
-const url = __webpack_require__(24);
-
-const VALID_BIN_KEYS = /^(?!\.{0,2}$)[a-z0-9._-]+$/i;
-
-const LICENSE_RENAMES = {
-  'MIT/X11': 'MIT',
-  X11: 'MIT'
-};
-
-exports.default = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (info, moduleLoc, reporter, warn, looseSemver) {
-    const files = yield (_fs || _load_fs()).readdir(moduleLoc);
-
-    // clean info.version
-    if (typeof info.version === 'string') {
-      info.version = semver.clean(info.version, looseSemver) || info.version;
-    }
-
-    // if name or version aren't set then set them to empty strings
-    info.name = info.name || '';
-    info.version = info.version || '';
-
-    // if the man field is a string then coerce it to an array
-    if (typeof info.man === 'string') {
-      info.man = [info.man];
-    }
-
-    // if the keywords field is a string then split it on any whitespace
-    if (typeof info.keywords === 'string') {
-      info.keywords = info.keywords.split(/\s+/g);
-    }
-
-    // if there's no contributors field but an authors field then expand it
-    if (!info.contributors && files.indexOf('AUTHORS') >= 0) {
-      const authorsFilepath = path.join(moduleLoc, 'AUTHORS');
-      const authorsFilestats = yield (_fs || _load_fs()).stat(authorsFilepath);
-      if (authorsFilestats.isFile()) {
-        let authors = yield (_fs || _load_fs()).readFile(authorsFilepath);
-        authors = authors.split(/\r?\n/g) // split on lines
-        .map(function (line) {
-          return line.replace(/^\s*#.*$/, '').trim();
-        }) // remove comments
-        .filter(function (line) {
-          return !!line;
-        }); // remove empty lines
-        info.contributors = authors;
-      }
-    }
-
-    // expand people fields to objects
-    if (typeof info.author === 'string' || typeof info.author === 'object') {
-      info.author = (0, (_util || _load_util()).normalizePerson)(info.author);
-    }
-    if (Array.isArray(info.contributors)) {
-      info.contributors = info.contributors.map((_util || _load_util()).normalizePerson);
-    }
-    if (Array.isArray(info.maintainers)) {
-      info.maintainers = info.maintainers.map((_util || _load_util()).normalizePerson);
-    }
-
-    // if there's no readme field then load the README file from the cwd
-    if (!info.readme) {
-      const readmeCandidates = files.filter(function (filename) {
-        const lower = filename.toLowerCase();
-        return lower === 'readme' || lower.indexOf('readme.') === 0;
-      }).sort(function (filename1, filename2) {
-        // favor files with extensions
-        return filename2.indexOf('.') - filename1.indexOf('.');
-      });
-
-      for (var _iterator = readmeCandidates, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-        var _ref2;
-
-        if (_isArray) {
-          if (_i >= _iterator.length) break;
-          _ref2 = _iterator[_i++];
-        } else {
-          _i = _iterator.next();
-          if (_i.done) break;
-          _ref2 = _i.value;
-        }
-
-        const readmeFilename = _ref2;
-
-        const readmeFilepath = path.join(moduleLoc, readmeFilename);
-        const readmeFileStats = yield (_fs || _load_fs()).stat(readmeFilepath);
-        if (readmeFileStats.isFile()) {
-          info.readmeFilename = readmeFilename;
-          info.readme = yield (_fs || _load_fs()).readFile(readmeFilepath);
-          break;
-        }
-      }
-    }
-
-    // if there's no description then take the first paragraph from the readme
-    if (!info.description && info.readme) {
-      const desc = (0, (_util || _load_util()).extractDescription)(info.readme);
-      if (desc) {
-        info.description = desc;
-      }
-    }
-
-    // support array of engine keys
-    if (Array.isArray(info.engines)) {
-      const engines = {};
-      for (var _iterator2 = info.engines, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-        var _ref3;
-
-        if (_isArray2) {
-          if (_i2 >= _iterator2.length) break;
-          _ref3 = _iterator2[_i2++];
-        } else {
-          _i2 = _iterator2.next();
-          if (_i2.done) break;
-          _ref3 = _i2.value;
-        }
-
-        const str = _ref3;
-
-        if (typeof str === 'string') {
-          var _str$trim$split = str.trim().split(/ +/g);
-
-          const name = _str$trim$split[0],
-                patternParts = _str$trim$split.slice(1);
-
-          engines[name] = patternParts.join(' ');
-        }
-      }
-      info.engines = engines;
-    }
-
-    // if the repository field is a string then assume it's a git repo and expand it
-    if (typeof info.repository === 'string') {
-      info.repository = {
-        type: 'git',
-        url: info.repository
-      };
-    }
-
-    const repo = info.repository;
-
-    // explode info.repository.url if it's a hosted git shorthand
-    if (repo && typeof repo === 'object' && typeof repo.url === 'string') {
-      repo.url = (0, (_index || _load_index()).hostedGitFragmentToGitUrl)(repo.url, reporter);
-    }
-
-    // allow bugs to be specified as a string, expand it to an object with a single url prop
-    if (typeof info.bugs === 'string') {
-      info.bugs = { url: info.bugs };
-    }
-
-    // normalize homepage url to http
-    if (typeof info.homepage === 'string') {
-      const parts = url.parse(info.homepage);
-      parts.protocol = parts.protocol || 'http:';
-      if (parts.pathname && !parts.hostname) {
-        parts.hostname = parts.pathname;
-        parts.pathname = '';
-      }
-      info.homepage = url.format(parts);
-    }
-
-    // if the `bin` field is as string then expand it to an object with a single property
-    // based on the original `bin` field and `name field`
-    // { name: "foo", bin: "cli.js" } -> { name: "foo", bin: { foo: "cli.js" } }
-    if (typeof info.name === 'string' && typeof info.bin === 'string' && info.bin.length > 0) {
-      // Remove scoped package name for consistency with NPM's bin field fixing behaviour
-      const name = info.name.replace(/^@[^\/]+\//, '');
-      info.bin = { [name]: info.bin };
-    }
-
-    // Validate that the bin entries reference only files within their package, and that
-    // their name is a valid file name
-    if (typeof info.bin === 'object' && info.bin !== null) {
-      const bin = info.bin;
-      for (var _iterator3 = Object.keys(bin), _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
-        var _ref4;
-
-        if (_isArray3) {
-          if (_i3 >= _iterator3.length) break;
-          _ref4 = _iterator3[_i3++];
-        } else {
-          _i3 = _iterator3.next();
-          if (_i3.done) break;
-          _ref4 = _i3.value;
-        }
-
-        const key = _ref4;
-
-        const target = bin[key];
-        if (!VALID_BIN_KEYS.test(key) || !(0, (_util || _load_util()).isValidBin)(target)) {
-          delete bin[key];
-          warn(reporter.lang('invalidBinEntry', info.name, key));
-        } else {
-          bin[key] = path.normalize(target);
-        }
-      }
-    } else if (typeof info.bin !== 'undefined') {
-      delete info.bin;
-      warn(reporter.lang('invalidBinField', info.name));
-    }
-
-    // bundleDependencies is an alias for bundledDependencies
-    if (info.bundledDependencies) {
-      info.bundleDependencies = info.bundledDependencies;
-      delete info.bundledDependencies;
-    }
-
-    let scripts;
-
-    // dummy script object to shove file inferred scripts onto
-    if (info.scripts && typeof info.scripts === 'object') {
-      scripts = info.scripts;
-    } else {
-      scripts = {};
-    }
-
-    // if there's a server.js file and no start script then set it to `node server.js`
-    if (!scripts.start && files.indexOf('server.js') >= 0) {
-      scripts.start = 'node server.js';
-    }
-
-    // if there's a binding.gyp file and no install script then set it to `node-gyp rebuild`
-    if (!scripts.install && files.indexOf('binding.gyp') >= 0) {
-      scripts.install = 'node-gyp rebuild';
-    }
-
-    // set scripts if we've polluted the empty object
-    if (Object.keys(scripts).length) {
-      info.scripts = scripts;
-    }
-
-    const dirs = info.directories;
-
-    if (dirs && typeof dirs === 'object') {
-      const binDir = dirs.bin;
-
-      if (!info.bin && binDir && typeof binDir === 'string') {
-        const bin = info.bin = {};
-        const fullBinDir = path.join(moduleLoc, binDir);
-
-        if (yield (_fs || _load_fs()).exists(fullBinDir)) {
-          for (var _iterator4 = yield (_fs || _load_fs()).readdir(fullBinDir), _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
-            var _ref5;
-
-            if (_isArray4) {
-              if (_i4 >= _iterator4.length) break;
-              _ref5 = _iterator4[_i4++];
-            } else {
-              _i4 = _iterator4.next();
-              if (_i4.done) break;
-              _ref5 = _i4.value;
-            }
-
-            const scriptName = _ref5;
-
-            if (scriptName[0] === '.') {
-              continue;
-            }
-            bin[scriptName] = path.join('.', binDir, scriptName);
-          }
-        } else {
-          warn(reporter.lang('manifestDirectoryNotFound', binDir, info.name));
-        }
-      }
-
-      const manDir = dirs.man;
-
-      if (!info.man && typeof manDir === 'string') {
-        const man = info.man = [];
-        const fullManDir = path.join(moduleLoc, manDir);
-
-        if (yield (_fs || _load_fs()).exists(fullManDir)) {
-          for (var _iterator5 = yield (_fs || _load_fs()).readdir(fullManDir), _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
-            var _ref6;
-
-            if (_isArray5) {
-              if (_i5 >= _iterator5.length) break;
-              _ref6 = _iterator5[_i5++];
-            } else {
-              _i5 = _iterator5.next();
-              if (_i5.done) break;
-              _ref6 = _i5.value;
-            }
-
-            const filename = _ref6;
-
-            if (/^(.*?)\.[0-9]$/.test(filename)) {
-              man.push(path.join('.', manDir, filename));
-            }
-          }
-        } else {
-          warn(reporter.lang('manifestDirectoryNotFound', manDir, info.name));
-        }
-      }
-    }
-
-    delete info.directories;
-
-    // normalize licenses field
-    const licenses = info.licenses;
-    if (Array.isArray(licenses) && !info.license) {
-      let licenseTypes = [];
-
-      for (var _iterator6 = licenses, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
-        var _ref7;
-
-        if (_isArray6) {
-          if (_i6 >= _iterator6.length) break;
-          _ref7 = _iterator6[_i6++];
-        } else {
-          _i6 = _iterator6.next();
-          if (_i6.done) break;
-          _ref7 = _i6.value;
-        }
-
-        let license = _ref7;
-
-        if (license && typeof license === 'object') {
-          license = license.type;
-        }
-        if (typeof license === 'string') {
-          licenseTypes.push(license);
-        }
-      }
-
-      licenseTypes = licenseTypes.filter((_util || _load_util()).isValidLicense);
-
-      if (licenseTypes.length === 1) {
-        info.license = licenseTypes[0];
-      } else if (licenseTypes.length) {
-        info.license = `(${licenseTypes.join(' OR ')})`;
-      }
-    }
-
-    const license = info.license;
-
-    // normalize license
-    if (license && typeof license === 'object') {
-      info.license = license.type;
-    }
-
-    // get license file
-    const licenseFile = files.find(function (filename) {
-      const lower = filename.toLowerCase();
-      return lower === 'license' || lower.startsWith('license.') || lower === 'unlicense' || lower.startsWith('unlicense.');
-    });
-    if (licenseFile) {
-      const licenseFilepath = path.join(moduleLoc, licenseFile);
-      const licenseFileStats = yield (_fs || _load_fs()).stat(licenseFilepath);
-      if (licenseFileStats.isFile()) {
-        const licenseContent = yield (_fs || _load_fs()).readFile(licenseFilepath);
-        const inferredLicense = (0, (_inferLicense || _load_inferLicense()).default)(licenseContent);
-        info.licenseText = licenseContent;
-
-        const license = info.license;
-
-        if (typeof license === 'string') {
-          if (inferredLicense && (0, (_util || _load_util()).isValidLicense)(inferredLicense) && !(0, (_util || _load_util()).isValidLicense)(license)) {
-            // some packages don't specify their license version but we can infer it based on their license file
-            const basicLicense = license.toLowerCase().replace(/(-like|\*)$/g, '');
-            const expandedLicense = inferredLicense.toLowerCase();
-            if (expandedLicense.startsWith(basicLicense)) {
-              // TODO consider doing something to notify the user
-              info.license = inferredLicense;
-            }
-          }
-        } else if (inferredLicense) {
-          // if there's no license then infer it based on the license file
-          info.license = inferredLicense;
-        } else {
-          // valid expression to refer to a license in a file
-          info.license = `SEE LICENSE IN ${licenseFile}`;
-        }
-      }
-    }
-
-    if (typeof info.license === 'string') {
-      // sometimes licenses are known by different names, reduce them
-      info.license = LICENSE_RENAMES[info.license] || info.license;
-    } else if (typeof info.readme === 'string') {
-      // the license might be at the bottom of the README
-      const inferredLicense = (0, (_inferLicense || _load_inferLicense()).default)(info.readme);
-      if (inferredLicense) {
-        info.license = inferredLicense;
-      }
-    }
-
-    // get notice file
-    const noticeFile = files.find(function (filename) {
-      const lower = filename.toLowerCase();
-      return lower === 'notice' || lower.startsWith('notice.');
-    });
-    if (noticeFile) {
-      const noticeFilepath = path.join(moduleLoc, noticeFile);
-      const noticeFileStats = yield (_fs || _load_fs()).stat(noticeFilepath);
-      if (noticeFileStats.isFile()) {
-        info.noticeText = yield (_fs || _load_fs()).readFile(noticeFilepath);
-      }
-    }
-
-    for (var _iterator7 = (_constants || _load_constants()).MANIFEST_FIELDS, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
-      var _ref8;
-
-      if (_isArray7) {
-        if (_i7 >= _iterator7.length) break;
-        _ref8 = _iterator7[_i7++];
-      } else {
-        _i7 = _iterator7.next();
-        if (_i7.done) break;
-        _ref8 = _i7.value;
-      }
-
-      const dependencyType = _ref8;
-
-      const dependencyList = info[dependencyType];
-      if (dependencyList && typeof dependencyList === 'object') {
-        delete dependencyList['//'];
-        for (const name in dependencyList) {
-          dependencyList[name] = dependencyList[name] || '';
-        }
-      }
-    }
-  });
-
-  return function (_x, _x2, _x3, _x4, _x5) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-/***/ }),
-/* 584 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = inferLicense;
-
-var _licenses;
-
-function _load_licenses() {
-  return _licenses = _interopRequireDefault(__webpack_require__(585));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function clean(str) {
-  return str.replace(/[^A-Za-z\s]/g, ' ').replace(/[\s]+/g, ' ').trim().toLowerCase();
-}
-
-const REGEXES = {
-  Apache: [/Apache License\b/],
-  BSD: [/BSD\b/],
-  ISC: [/The ISC License/, /ISC\b/],
-  MIT: [/MIT\b/],
-  Unlicense: [/http:\/\/unlicense.org\//],
-  WTFPL: [/DO WHAT THE FUCK YOU WANT TO PUBLIC LICENSE/, /WTFPL\b/]
-};
-
-function inferLicense(license) {
-  // check if we have any explicit licenses
-  const cleanLicense = clean(license);
-  for (const licenseName in (_licenses || _load_licenses()).default) {
-    const testLicense = (_licenses || _load_licenses()).default[licenseName];
-    if (cleanLicense.search(testLicense) >= 0) {
-      return licenseName;
-    }
-  }
-
-  // infer based on some keywords
-  for (const licenseName in REGEXES) {
-    for (var _iterator = REGEXES[licenseName], _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-      var _ref;
-
-      if (_isArray) {
-        if (_i >= _iterator.length) break;
-        _ref = _iterator[_i++];
-      } else {
-        _i = _iterator.next();
-        if (_i.done) break;
-        _ref = _i.value;
-      }
-
-      const regex = _ref;
-
-      if (license.search(regex) >= 0) {
-        return `${licenseName}*`;
-      }
-    }
-  }
-
-  return null;
-}
-
-/***/ }),
-/* 585 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-
-/* eslint-disable max-len */
-
-/**
- * DO NOT EDIT THIS FILE MANUALLY.
- * THIS FILE WAS GENERATED BY "generate-licenses-js.js".
- */
-
-exports.default = {
-  'Apache-2.0': new RegExp('(licensed under the apache license version the license you may not use this file except in compliance with the license you may obtain a copy of the license at http www apache org licenses license unless required by applicable law or agreed to in writing software distributed under the license is distributed on an as is basis without warranties or conditions of any kind either express or implied see the license for the specific language governing permissions and limitations under the license$|apache license version january http www apache org licenses terms and conditions for use reproduction and distribution definitions license shall mean the terms and conditions for use reproduction and distribution as defined by sections through of this document licensor shall mean the copyright owner or entity authorized by the copyright owner that is granting the license legal entity shall mean the union of the acting entity and all other entities that control are controlled by or are under common control with that entity for the purposes of this definition control means i the power direct or indirect to cause the direction or management of such entity whether by contract or otherwise or ii ownership of fifty percent or more of the outstanding shares or iii beneficial ownership of such entity you or your shall mean an individual or legal entity exercising permissions granted by this license source form shall mean the preferred form for making modifications including but not limited to software source code documentation source and configuration files object form shall mean any form resulting from mechanical transformation or translation of a source form including but not limited to compiled object code generated documentation and conversions to other media types work shall mean the work of authorship whether in source or object form made available under the license as indicated by a copyright notice that is included in or attached to the work an example is provided in the appendix below derivative works shall mean any work whether in source or object form that is based on or derived from the work and for which the editorial revisions annotations elaborations or other modifications represent as a whole an original work of authorship for the purposes of this license derivative works shall not include works that remain separable from or merely link or bind by name to the interfaces of the work and derivative works thereof contribution shall mean any work of authorship including the original version of the work and any modifications or additions to that work or derivative works thereof that is intentionally submitted to licensor for inclusion in the work by the copyright owner or by an individual or legal entity authorized to submit on behalf of the copyright owner for the purposes of this definition submitted means any form of electronic verbal or written communication sent to the licensor or its representatives including but not limited to communication on electronic mailing lists source code control systems and issue tracking systems that are managed by or on behalf of the licensor for the purpose of discussing and improving the work but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as not a contribution contributor shall mean licensor and any individual or legal entity on behalf of whom a contribution has been received by licensor and subsequently incorporated within the work grant of copyright license subject to the terms and conditions of this license each contributor hereby grants to you a perpetual worldwide non exclusive no charge royalty free irrevocable copyright license to reproduce prepare derivative works of publicly display publicly perform sublicense and distribute the work and such derivative works in source or object form grant of patent license subject to the terms and conditions of this license each contributor hereby grants to you a perpetual worldwide non exclusive no charge royalty free irrevocable except as stated in this section patent license to make have made use offer to sell sell import and otherwise transfer the work where such license applies only to those patent claims licensable by such contributor that are necessarily infringed by their contribution s alone or by combination of their contribution s with the work to which such contribution s was submitted if you institute patent litigation against any entity including a cross claim or counterclaim in a lawsuit alleging that the work or a contribution incorporated within the work constitutes direct or contributory patent infringement then any patent licenses granted to you under this license for that work shall terminate as of the date such litigation is filed redistribution you may reproduce and distribute copies of the work or derivative works thereof in any medium with or without modifications and in source or object form provided that you meet the following conditions a you must give any other recipients of the work or derivative works a copy of this license and b you must cause any modified files to carry prominent notices stating that you changed the files and c you must retain in the source form of any derivative works that you distribute all copyright patent trademark and attribution notices from the source form of the work excluding those notices that do not pertain to any part of the derivative works and d if the work includes a notice text file as part of its distribution then any derivative works that you distribute must include a readable copy of the attribution notices contained within such notice file excluding those notices that do not pertain to any part of the derivative works in at least one of the following places within a notice text file distributed as part of the derivative works within the source form or documentation if provided along with the derivative works or within a display generated by the derivative works if and wherever such third party notices normally appear the contents of the notice file are for informational purposes only and do not modify the license you may add your own attribution notices within derivative works that you distribute alongside or as an addendum to the notice text from the work provided that such additional attribution notices cannot be construed as modifying the license you may add your own copyright statement to your modifications and may provide additional or different license terms and conditions for use reproduction or distribution of your modifications or for any such derivative works as a whole provided your use reproduction and distribution of the work otherwise complies with the conditions stated in this license submission of contributions unless you explicitly state otherwise any contribution intentionally submitted for inclusion in the work by you to the licensor shall be under the terms and conditions of this license without any additional terms or conditions notwithstanding the above nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with licensor regarding such contributions trademarks this license does not grant permission to use the trade names trademarks service marks or product names of the licensor except as required for reasonable and customary use in describing the origin of the work and reproducing the content of the notice file disclaimer of warranty unless required by applicable law or agreed to in writing licensor provides the work and each contributor provides its contributions on an as is basis without warranties or conditions of any kind either express or implied including without limitation any warranties or conditions of title non infringement merchantability or fitness for a particular purpose you are solely responsible for determining the appropriateness of using or redistributing the work and assume any risks associated with your exercise of permissions under this license limitation of liability in no event and under no legal theory whether in tort including negligence contract or otherwise unless required by applicable law such as deliberate and grossly negligent acts or agreed to in writing shall any contributor be liable to you for damages including any direct indirect special incidental or consequential damages of any character arising as a result of this license or out of the use or inability to use the work including but not limited to damages for loss of goodwill work stoppage computer failure or malfunction or any and all other commercial damages or losses even if such contributor has been advised of the possibility of such damages accepting warranty or additional liability while redistributing the work or derivative works thereof you may choose to offer and charge a fee for acceptance of support warranty indemnity or other liability obligations and or rights consistent with this license however in accepting such obligations you may act only on your own behalf and on your sole responsibility not on behalf of any other contributor and only if you agree to indemnify defend and hold each contributor harmless for any liability incurred by or claims asserted against such contributor by reason of your accepting any such warranty or additional liability end of terms and conditions$)', 'g'),
-  'BSD-2-Clause': new RegExp('(redistribution and use in source and binary forms with or without modification are permitted provided that the following conditions are met redistributions of source code must retain the above copyright notice this list of conditions and the following disclaimer redistributions in binary form must reproduce the above copyright notice this list of conditions and the following disclaimer in the documentation and or other materials provided with the distribution this(.*?| )is provided by the copyright holders and contributors as is and any express or implied warranties including but not limited to the implied warranties of merchantability and fitness for a particular purpose are disclaimed in no event shall(.*?| )be liable for any direct indirect incidental special exemplary or consequential damages including but not limited to procurement of substitute goods or services loss of use data or profits or business interruption however caused and on any theory of liability whether in contract strict liability or tort including negligence or otherwise arising in any way out of the use of this(.*?| )even if advised of the possibility of such damage$|redistribution and use in source and binary forms with or without modification are permitted provided that the following conditions are met redistributions of source code must retain the above copyright notice this list of conditions and the following disclaimer redistributions in binary form must reproduce the above copyright notice this list of conditions and the following disclaimer in the documentation and or other materials provided with the distribution this software is provided by the copyright holders and contributors as is and any express or implied warranties including but not limited to the implied warranties of merchantability and fitness for a particular purpose are disclaimed in no event shall(.*?| )be liable for any direct indirect incidental special exemplary or consequential damages including but not limited to procurement of substitute goods or services loss of use data or profits or business interruption however caused and on any theory of liability whether in contract strict liability or tort including negligence or otherwise arising in any way out of the use of this software even if advised of the possibility of such damage$)', 'g'),
-  'BSD-3-Clause': new RegExp('(redistribution and use in source and binary forms with or without modification are permitted provided that the following conditions are met redistributions of source code must retain the above copyright notice this list of conditions and the following disclaimer redistributions in binary form must reproduce the above copyright notice this list of conditions and the following disclaimer in the documentation and or other materials provided with the distribution neither the name of(.*?| )nor the names of the contributors may be used to endorse or promote products derived from this software without specific prior written permission this software is provided by the copyright holders and contributors as is and any express or implied warranties including but not limited to the implied warranties of merchantability and fitness for a particular purpose are disclaimed in no event shall(.*?| )be liable for any direct indirect incidental special exemplary or consequential damages including but not limited to procurement of substitute goods or services loss of use data or profits or business interruption however caused and on any theory of liability whether in contract strict liability or tort including negligence or otherwise arising in any way out of the use of this software even if advised of the possibility of such damage$|(redistribution and use in source and binary forms with or without modification are permitted provided that the following conditions are met redistributions of source code must retain the above copyright notice this list of conditions and the following disclaimer redistributions in binary form must reproduce the above copyright notice this list of conditions and the following disclaimer in the documentation and or other materials provided with the distribution the names of any contributors may not be used to endorse or promote products derived from this software without specific prior written permission this software is provided by the copyright holders and contributors as is and any express or implied warranties including but not limited to the implied warranties of merchantability and fitness for a particular purpose are disclaimed in no event shall the copyright holders and contributors be liable for any direct indirect incidental special exemplary or consequential damages including but not limited to procurement of substitute goods or services loss of use data or profits or business interruption however caused and on any theory of liability whether in contract strict liability or tort including negligence or otherwise arising in any way out of the use of this software even if advised of the possibility of such damage$|redistribution and use in source and binary forms with or without modification are permitted provided that the following conditions are met redistributions of source code must retain the above copyright notice this list of conditions and the following disclaimer redistributions in binary form must reproduce the above copyright notice this list of conditions and the following disclaimer in the documentation and or other materials provided with the distribution neither the name(.*?| )nor the names of(.*?| )contributors may be used to endorse or promote products derived from this software without specific prior written permission this software is provided by(.*?| )as is and any express or implied warranties including but not limited to the implied warranties of merchantability and fitness for a particular purpose are disclaimed in no event shall(.*?| )be liable for any direct indirect incidental special exemplary or consequential damages including but not limited to procurement of substitute goods or services loss of use data or profits or business interruption however caused and on any theory of liability whether in contract strict liability or tort including negligence or otherwise arising in any way out of the use of this software even if advised of the possibility of such damage$))', 'g'),
-  MIT: new RegExp('permission is hereby granted free of charge to any person obtaining a copy of this software and associated documentation files the software to deal in the software without restriction including without limitation the rights to use copy modify merge publish distribute sublicense and or sell copies of the software and to permit persons to whom the software is furnished to do so subject to the following conditions the above copyright notice and this permission notice shall be included in all copies or substantial portions of the software the software is provided as is without warranty of any kind express or implied including but not limited to the warranties of merchantability fitness for a particular purpose and noninfringement in no event shall the authors or copyright holders be liable for any claim damages or other liability whether in an action of contract tort or otherwise arising from out of or in connection with the software or the use or other dealings in the software$', 'g'),
-  Unlicense: new RegExp('this is free and unencumbered software released into the public domain anyone is free to copy modify publish use compile sell or distribute this software either in source code form or as a compiled binary for any purpose commercial or non commercial and by any means in jurisdictions that recognize copyright laws the author or authors of this software dedicate any and all copyright interest in the software to the public domain we make this dedication for the benefit of the public at large and to the detriment of our heirs and successors we intend this dedication to be an overt act of relinquishment in perpetuity of all present and future rights to this software under copyright law the software is provided as is without warranty of any kind express or implied including but not limited to the warranties of merchantability fitness for a particular purpose and noninfringement in no event shall the authors be liable for any claim damages or other liability whether in an action of contract tort or otherwise arising from out of or in connection with the software or the use or other dealings in the software for more information please refer to wildcard$', 'g')
-};
-
-/***/ }),
-/* 586 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-exports.default = function (info, moduleLoc, lockfileFolder) {
-  // It won't work if we don't yet know what's the folder we'll use as root. It's not a
-  // big deal tho, because it only happens when trying to figure out the root, and we
-  // don't need to know the dependencies / devDependencies at this time.
-  if (!lockfileFolder) {
-    return;
-  }
-
-  for (var _iterator = (_constants || _load_constants()).DEPENDENCY_TYPES, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
-    var _ref;
-
-    if (_isArray) {
-      if (_i >= _iterator.length) break;
-      _ref = _iterator[_i++];
-    } else {
-      _i = _iterator.next();
-      if (_i.done) break;
-      _ref = _i.value;
-    }
-
-    const dependencyType = _ref;
-
-    const dependencies = info[dependencyType];
-    if (!dependencies) {
-      continue;
-    }
-
-    for (var _iterator2 = Object.keys(dependencies), _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
-      var _ref2;
-
-      if (_isArray2) {
-        if (_i2 >= _iterator2.length) break;
-        _ref2 = _iterator2[_i2++];
-      } else {
-        _i2 = _iterator2.next();
-        if (_i2.done) break;
-        _ref2 = _i2.value;
-      }
-
-      const name = _ref2;
-
-      let value = dependencies[name];
-
-      if (path.isAbsolute(value)) {
-        value = (_fileResolver || _load_fileResolver()).FILE_PROTOCOL_PREFIX + value;
-      }
-
-      let prefix;
-      if (value.startsWith((_fileResolver || _load_fileResolver()).FILE_PROTOCOL_PREFIX)) {
-        prefix = (_fileResolver || _load_fileResolver()).FILE_PROTOCOL_PREFIX;
-      } else if (value.startsWith((_linkResolver || _load_linkResolver()).LINK_PROTOCOL_PREFIX)) {
-        prefix = (_linkResolver || _load_linkResolver()).LINK_PROTOCOL_PREFIX;
-      } else {
-        continue;
-      }
-      (0, (_invariant || _load_invariant()).default)(prefix, 'prefix is definitely defined here');
-
-      const unprefixed = value.substr(prefix.length);
-      const hasPathPrefix = /^\.(\/|$)/.test(unprefixed);
-
-      const absoluteTarget = path.resolve(lockfileFolder, moduleLoc, unprefixed);
-      let relativeTarget = path.relative(lockfileFolder, absoluteTarget) || '.';
-
-      if (absoluteTarget === lockfileFolder) {
-        relativeTarget = '.';
-      } else if (hasPathPrefix) {
-        // TODO: This logic should be removed during the next major bump
-        // If the original value was using the "./" prefix, then we output a similar path.
-        // We need to do this because otherwise it would cause problems with already existing
-        // lockfile, which would see some of their entries being unrecognized.
-        relativeTarget = relativeTarget.replace(/^(?!\.{0,2}\/)/, `./`);
-      }
-
-      dependencies[name] = prefix + relativeTarget.replace(/\\/g, '/');
-    }
-  }
-};
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-var _fileResolver;
-
-function _load_fileResolver() {
-  return _fileResolver = __webpack_require__(215);
-}
-
-var _linkResolver;
-
-function _load_linkResolver() {
-  return _linkResolver = __webpack_require__(368);
-}
-
-var _invariant;
-
-function _load_invariant() {
-  return _invariant = _interopRequireDefault(__webpack_require__(9));
-}
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-/***/ }),
-/* 587 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = {
-  autohr: 'author',
-  autor: 'author',
-  contributers: 'contributors',
-  depdenencies: 'dependencies',
-  dependancies: 'dependencies',
-  dependecies: 'dependencies',
-  depends: 'dependencies',
-  'dev-dependencies': 'devDependencies',
-  devDependences: 'devDependencies',
-  devDepenencies: 'devDependencies',
-  devEependencies: 'devDependencies',
-  devdependencies: 'devDependencies',
-  hampage: 'homepage',
-  hompage: 'homepage',
-  prefereGlobal: 'preferGlobal',
-  publicationConfig: 'publishConfig',
-  repo: 'repository',
-  repostitory: 'repository',
-  script: 'scripts'
-};
-
-/***/ }),
-/* 588 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = parsePackageName;
-
-
-const PKG_INPUT = /(^\S?[^\s@]+)(?:@(\S+))?$/;
-
-function parsePackageName(input) {
-  var _PKG_INPUT$exec = PKG_INPUT.exec(input);
-
-  const name = _PKG_INPUT$exec[1],
-        version = _PKG_INPUT$exec[2];
-
-  return { name, version };
-}
-
-/***/ }),
-/* 589 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-
-var _asyncToGenerator2;
-
-function _load_asyncToGenerator() {
-  return _asyncToGenerator2 = _interopRequireDefault(__webpack_require__(2));
-}
-
-let makePortableProxyScriptUnix = (() => {
-  var _ref = (0, (_asyncToGenerator2 || _load_asyncToGenerator()).default)(function* (source, destination, options) {
-    const environment = options.extraEnvironment ? Array.from(options.extraEnvironment.entries()).map(function ([key, value]) {
-      return `${key}="${value}"`;
-    }).join(' ') + ' ' : '';
-
-    const prependedArguments = options.prependArguments ? ' ' + options.prependArguments.map(function (arg) {
-      return `"${arg}"`;
-    }).join(' ') : '';
-    const appendedArguments = options.appendArguments ? ' ' + options.appendArguments.map(function (arg) {
-      return `"${arg}"`;
-    }).join(' ') : '';
-
-    const filePath = `${destination}/${options.proxyBasename || path.basename(source)}`;
-
-    // Unless impossible we want to preserve any symlinks used to call us when forwarding the call to the binary (so we
-    // cannot use realpath or transform relative paths into absolute ones), but we also need to tell the sh interpreter
-    // that the symlink should be resolved relative to the script directory (hence dirname "$0" at runtime).
-    const sourcePath = path.isAbsolute(source) ? source : `$(dirname "$0")/../${source}`;
-
-    yield (_fs || _load_fs()).mkdirp(destination);
-
-    if (process.platform === 'win32') {
-      yield (_fs || _load_fs()).writeFile(filePath + '.cmd', `@${environment}"${sourcePath}" ${prependedArguments} ${appendedArguments} %*\r\n`);
-    } else {
-      yield (_fs || _load_fs()).writeFile(filePath, `#!/bin/sh\n\n${environment}exec "${sourcePath}"${prependedArguments} "$@"${appendedArguments}\n`);
-      yield (_fs || _load_fs()).chmod(filePath, 0o755);
-    }
-  });
-
-  return function makePortableProxyScriptUnix(_x, _x2, _x3) {
-    return _ref.apply(this, arguments);
-  };
-})();
-
-exports.makePortableProxyScript = makePortableProxyScript;
-
-var _fs;
-
-function _load_fs() {
-  return _fs = _interopRequireWildcard(__webpack_require__(4));
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const path = __webpack_require__(0);
-
-function makePortableProxyScript(source, destination,
-// $FlowFixMe Flow doesn't support exact types with empty default values
-options = {}) {
-  return makePortableProxyScriptUnix(source, destination, options);
-}
-
-/***/ }),
-/* 590 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.findRc = findRc;
-
-var _fs;
-
-function _load_fs() {
-  return _fs = __webpack_require__(5);
-}
-
-var _path;
-
-function _load_path() {
-  return _path = _interopRequireWildcard(__webpack_require__(0));
-}
-
-var _constants;
-
-function _load_constants() {
-  return _constants = __webpack_require__(8);
-}
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
-
-const etc = '/etc';
-
-const isWin = process.platform === 'win32';
-const home = isWin ? process.env.USERPROFILE : process.env.HOME;
-
-function getRcPaths(name, cwd) {
-  const configPaths = [];
-
-  function pushConfigPath(...segments) {
-    configPaths.push((_path || _load_path()).join(...segments));
-    if (segments[segments.length - 1] === `.${name}rc`) {
-      configPaths.push((_path || _load_path()).join(...segments.slice(0, -1), `.${name}rc.yml`));
-    }
-  }
-
-  function unshiftConfigPath(...segments) {
-    if (segments[segments.length - 1] === `.${name}rc`) {
-      configPaths.unshift((_path || _load_path()).join(...segments.slice(0, -1), `.${name}rc.yml`));
-    }
-    configPaths.unshift((_path || _load_path()).join(...segments));
-  }
-
-  if (!isWin) {
-    pushConfigPath(etc, name, 'config');
-    pushConfigPath(etc, `${name}rc`);
-  }
-
-  if (home) {
-    pushConfigPath((_constants || _load_constants()).CONFIG_DIRECTORY);
-    pushConfigPath(home, '.config', name, 'config');
-    pushConfigPath(home, '.config', name);
-    pushConfigPath(home, `.${name}`, 'config');
-    pushConfigPath(home, `.${name}rc`);
-  }
-
-  // add .yarnrc locations relative to the cwd
-  while (true) {
-    unshiftConfigPath(cwd, `.${name}rc`);
-
-    const upperCwd = (_path || _load_path()).dirname(cwd);
-    if (upperCwd === cwd) {
-      // we've reached the root
-      break;
-    } else {
-      // continue since there's still more directories to search
-      cwd = upperCwd;
-    }
-  }
-
-  const envVariable = `${name}_config`.toUpperCase();
-
-  if (process.env[envVariable]) {
-    pushConfigPath(process.env[envVariable]);
-  }
-
-  return configPaths;
-}
-
-function parseRcPaths(paths, parser) {
-  return Object.assign({}, ...paths.map(path => {
-    try {
-      return parser((0, (_fs || _load_fs()).readFileSync)(path).toString(), path);
-    } catch (error) {
-      if (error.code === 'ENOENT' || error.code === 'EISDIR') {
-        return {};
-      } else {
-        throw error;
-      }
-    }
-  }));
-}
-
-function findRc(name, cwd, parser) {
-  return parseRcPaths(getRcPaths(name, cwd), parser);
-}
-
-/***/ }),
-/* 591 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = { "default": __webpack_require__(623), __esModule: true };
-
-/***/ }),
-/* 592 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var DuplexStream = __webpack_require__(791)
-  , util         = __webpack_require__(3)
-  , Buffer       = __webpack_require__(45).Buffer
-
-
-function BufferList (callback) {
-  if (!(this instanceof BufferList))
-    return new BufferList(callback)
-
-  this._bufs  = []
-  this.length = 0
-
-  if (typeof callback == 'function') {
-    this._callback = callback
-
-    var piper = function piper (err) {
-      if (this._callback) {
-        this._callback(err)
-        this._callback = null
-      }
-    }.bind(this)
-
-    this.on('pipe', function onPipe (src) {
-      src.on('error', piper)
-    })
-    this.on('unpipe', function onUnpipe (src) {
-      src.removeListener('error', piper)
-    })
-  } else {
-    this.append(callback)
-  }
-
-  DuplexStream.call(this)
-}
-
-
-util.inherits(BufferList, DuplexStream)
-
-
-BufferList.prototype._offset = function _offset (offset) {
-  var tot = 0, i = 0, _t
-  if (offset === 0) return [ 0, 0 ]
-  for (; i < this._bufs.length; i++) {
-    _t = tot + this._bufs[i].length
-    if (offset < _t || i == this._bufs.length - 1)
-      return [ i, offset - tot ]
-    tot = _t
-  }
-}
-
-
-BufferList.prototype.append = function append (buf) {
-  var i = 0
-
-  if (Buffer.isBuffer(buf)) {
-    this._appendBuffer(buf);
-  } else if (Array.isArray(buf)) {
-    for (; i < buf.length; i++)
-      this.append(buf[i])
-  } else if (buf instanceof BufferList) {
-    // unwrap argument into individual BufferLists
-    for (; i < buf._bufs.length; i++)
-      this.append(buf._bufs[i])
-  } else if (buf != null) {
-    // coerce number arguments to strings, since Buffer(number) does
-    // uninitialized memory allocation
-    if (typeof buf == 'number')
-      buf = buf.toString()
-
-    this._appendBuffer(Buffer.from(buf));
-  }
-
-  return this
-}
-
-
-BufferList.prototype._appendBuffer = function appendBuffer (buf) {
-  this._bufs.push(buf)
-  this.length += buf.length
-}
-
-
-BufferList.prototype._write = function _write (buf, encoding, callback) {
-  this._appendBuffer(buf)
-
-  if (typeof callback == 'function')
-    callback()
-}
-
-
-BufferList.prototype._read = function _read (size) {
-  if (!this.length)
-    return this.push(null)
-
-  size = Math.min(size, this.length)
-  this.push(this.slice(0, size))
-  this.consume(size)
-}
-
-
-BufferList.prototype.end = function end (chunk) {
-  DuplexStream.prototype.end.call(this, chunk)
-
-  if (this._callback) {
-    this._callback(null, this.slice())
-    this._callback = null
-  }
-}
-
-
-BufferList.prototype.get = function get (index) {
-  return this.slice(index, index + 1)[0]
-}
-
-
-BufferList.prototype.slice = function slice (start, end) {
-  if (typeof start == 'number' && start < 0)
-    start += this.length
-  if (typeof end == 'number' && end < 0)
-    end += this.length
-  return this.copy(null, 0, start, end)
-}
-
-
-BufferList.prototype.copy = function copy (dst, dstStart, srcStart, srcEnd) {
-  if (typeof srcStart != 'number' || srcStart < 0)
-    srcStart = 0
-  if (typeof srcEnd != 'number' || srcEnd > this.length)
-    srcEnd = this.length
-  if (srcStart >= this.length)
-    return dst || Buffer.alloc(0)
-  if (srcEnd <= 0)
-    return dst || Buffer.alloc(0)
-
-  var copy   = !!dst
-    , off    = this._offset(srcStart)
-    , len    = srcEnd - srcStart
-    , bytes  = len
-    , bufoff = (copy && dstStart) || 0
-    , start  = off[1]
-    , l
-    , i
-
-  // copy/slice everything
-  if (srcStart === 0 && srcEnd == this.length) {
-    if (!copy) { // slice, but full concat if multiple buffers
-      return this._bufs.length === 1
-        ? this._bufs[0]
-        : Buffer.concat(this._bufs, this.length)
-    }
-
-    // copy, need to copy individual buffers
-    for (i = 0; i < this._bufs.length; i++) {
-      this._bufs[i].copy(dst, bufoff)
-      bufoff += this._bufs[i].length
-    }
-
-    return dst
-  }
-
-  // easy, cheap case where it's a subset of one of the buffers
-  if (bytes <= this._bufs[off[0]].length - start) {
-    return copy
-      ? this._bufs[off[0]].copy(dst, dstStart, start, start + bytes)
-      : this._bufs[off[0]].slice(start, start + bytes)
-  }
-
-  if (!copy) // a slice, we need something to copy in to
-    dst = Buffer.allocUnsafe(len)
-
-  for (i = off[0]; i < this._bufs.length; i++) {
-    l = this._bufs[i].length - start
-
-    if (bytes > l) {
-      this._bufs[i].copy(dst, bufoff, start)
-    } else {
-      this._bufs[i].copy(dst, bufoff, start, start + bytes)
-      break
-    }
-
-    bufoff += l
-    bytes -= l
-
-    if (start)
-      start = 0
-  }
-
-  return dst
-}
-
-BufferList.prototype.shallowSlice = function shallowSlice (start, end) {
-  start = start || 0
-  end = end || this.length
-
-  if (start < 0)
-    start += this.length
-  if (end < 0)
-    end += this.length
-
-  var startOffset = this._offset(start)
-    , endOffset = this._offset(end)
-    , buffers = this._bufs.slice(startOffset[0], endOffset[0] + 1)
-
-  if (endOffset[1] == 0)
-    buffers.pop()
-  else
-    buffers[buffers.length-1] = buffers[buffers.length-1].slice(0, endOffset[1])
-
-  if (startOffset[1] != 0)
-    buffers[0] = buffers[0].slice(startOffset[1])
-
-  return new BufferList(buffers)
-}
-
-BufferList.prototype.toString = function toString (encoding, start, end) {
-  return this.slice(start, end).toString(encoding)
-}
-
-BufferList.prototype.consume = function consume (bytes) {
-  while (this._bufs.length) {
-    if (bytes >= this._bufs[0].length) {
-      bytes -= this._bufs[0].length
-      this.length -= this._bufs[0].length
-      this._bufs.shift()
-    } else {
-      this._bufs[0] = this._bufs[0].slice(bytes)
-      this.length -= bytes
-      break
-    }
-  }
-  return this
-}
-
-
-BufferList.prototype.duplicate = function duplicate () {
-  var i = 0
-    , copy = new BufferList()
-
-  for (; i < this._bufs.length; i++)
-    copy.append(this._bufs[i])
-
-  return copy
-}
-
-
-BufferList.prototype.destroy = function destroy () {
-  this._bufs.length = 0
-  this.length = 0
-  this.push(null)
-}
-
-
-;(function () {
-  var methods = {
-      'readDoubleBE' : 8
-    , 'readDoubleLE' : 8
-    , 'readFloatBE'  : 4
-    , 'readFloatLE'  : 4
-    , 'readInt32BE'  : 4
-    , 'readInt32LE'  : 4
-    , 'readUInt32BE' : 4
-    , 'readUInt32LE' : 4
-    , 'readInt16BE'  : 2
-    , 'readInt16LE'  : 2
-    , 'readUInt16BE' : 2
-    , 'readUInt16LE' : 2
-    , 'readInt8'     : 1
-    , 'readUInt8'    : 1
-  }
-
-  for (var m in methods) {
-    (function (m) {
-      BufferList.prototype[m] = function (offset) {
-        return this.slice(offset, offset + methods[m])[m](0)
-      }
-    }(m))
-  }
-}())
-
-
-module.exports = BufferList
-
-
-/***/ }),
-/* 593 */
-/***/ (function(module, exports) {
-
-function allocUnsafe (size) {
-  if (typeof size !== 'number') {
-    throw new TypeError('"size" argument must be a number')
-  }
-
-  if (size < 0) {
-    throw new RangeError('"size" argument must not be negative')
-  }
-
-  if (Buffer.allocUnsafe) {
-    return Buffer.allocUnsafe(size)
-  } else {
-    return new Buffer(size)
-  }
-}
-
-module.exports = allocUnsafe
-
-
-/***/ }),
-/* 594 */
-/***/ (function(module, exports) {
-
-/* Node.js 6.4.0 and up has full support */
-var hasFullSupport = (function () {
-  try {
-    if (!Buffer.isEncoding('latin1')) {
-      return false
-    }
-
-    var buf = Buffer.alloc ? Buffer.alloc(4) : new Buffer(4)
-
-    buf.fill('ab', 'ucs2')
-
-    return (buf.toString('hex') === '61006200')
-  } catch (_) {
-    return false
-  }
-}())
-
-function isSingleByte (val) {
-  return (val.length === 1 && val.charCodeAt(0) < 256)
-}
-
-function fillWithNumber (buffer, val, start, end) {
-  if (start < 0 || end > buffer.length) {
-    throw new RangeError('Out of range index')
-  }
-
-  start = start >>> 0
-  end = end === undefined ? buffer.length : end >>> 0
-
-  if (end > start) {
-    buffer.fill(val, start, end)
-  }
-
-  return buffer
-}
-
-function fillWithBuffer (buffer, val, start, end) {
-  if (start < 0 || end > buffer.length) {
-    throw new RangeError('Out of range index')
-  }
-
-  if (end <= start) {
-    return buffer
-  }
-
-  start = start >>> 0
-  end = end === undefined ? buffer.length : end >>> 0
-
-  var pos = start
-  var len = val.length
-  while (pos <= (end - len)) {
-    val.copy(buffer, pos)
-    pos += len
-  }
-
-  if (pos !== end) {
-    val.copy(buffer, pos, 0, end - pos)
-  }
-
-  return buffer
-}
-
-function fill (buffer, val, start, end, encoding) {
-  if (hasFullSupport) {
-    return buffer.fill(val, start, end, encoding)
-  }
-
-  if (typeof val === 'number') {
-    return fillWithNumber(buffer, val, start, end)
-  }
-
-  if (typeof val === 'string') {
-    if (typeof start === 'string') {
-      encoding = start
-      start = 0
-      end = buffer.length
-    } else if (typeof end === 'string') {
-      encoding = end
-      end = buffer.length
-    }
-
-    if (encoding !== undefined && typeof encoding !== 'string') {
-      throw new TypeError('encoding must be a string')
-    }
-
-    if (encoding === 'latin1') {
-      encoding = 'binary'
-    }
-
-    if (typeof encoding === 'string' && !Buffer.isEncoding(encoding)) {
-      throw new TypeError('Unknown encoding: ' + encoding)
-    }
-
-    if (val === '') {
-      return fillWithNumber(buffer, 0, start, end)
-    }
-
-    if (isSingleByte(val)) {
-      return fillWithNumber(buffer, val.charCodeAt(0), start, end)
-    }
-
-    val = new Buffer(val, encoding)
-  }
-
-  if (Buffer.isBuffer(val)) {
-    return fillWithBuffer(buffer, val, start, end)
-  }
-
-  // Other values (e.g. undefined, boolean, object) results in zero-fill
-  return fillWithNumber(buffer, 0, start, end)
-}
-
-module.exports = fill
-
-
-/***/ }),
-/* 595 */
-/***/ (function(module, exports) {
-
-var toString = Object.prototype.toString
-
-var isModern = (
-  typeof Buffer.alloc === 'function' &&
-  typeof Buffer.allocUnsafe === 'function' &&
-  typeof Buffer.from === 'function'
-)
-
-function isArrayBuffer (input) {
-  return toString.call(input).slice(8, -1) === 'ArrayBuffer'
-}
-
-function fromArrayBuffer (obj, byteOffset, length) {
-  byteOffset >>>= 0
-
-  var maxLength = obj.byteLength - byteOffset
-
-  if (maxLength < 0) {
-    throw new RangeError("'offset' is out of bounds")
-  }
-
-  if (length === undefined) {
-    length = maxLength
-  } else {
-    length >>>= 0
-
-    if (length > maxLength) {
-      throw new RangeError("'length' is out of bounds")
-    }
-  }
-
-  return isModern
-    ? Buffer.from(obj.slice(byteOffset, byteOffset + length))
-    : new Buffer(new Uint8Array(obj.slice(byteOffset, byteOffset + length)))
-}
-
-function fromString (string, encoding) {
-  if (typeof encoding !== 'string' || encoding === '') {
-    encoding = 'utf8'
-  }
-
-  if (!Buffer.isEncoding(encoding)) {
-    throw new TypeError('"encoding" must be a valid string encoding')
-  }
-
-  return isModern
-    ? Buffer.from(string, encoding)
-    : new Buffer(string, encoding)
-}
-
-function bufferFrom (value, encodingOrOffset, length) {
-  if (typeof value === 'number') {
-    throw new TypeError('"value" argument must not be a number')
-  }
-
-  if (isArrayBuffer(value)) {
-    return fromArrayBuffer(value, encodingOrOffset, length)
-  }
-
-  if (typeof value === 'string') {
-    return fromString(value, encodingOrOffset)
-  }
-
-  return isModern
-    ? Buffer.from(value)
-    : new Buffer(value)
-}
-
-module.exports = bufferFrom
-
-
-/***/ }),
-/* 596 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * bytes
- * Copyright(c) 2012-2014 TJ Holowaychuk
- * Copyright(c) 2015 Jed Watson
- * MIT Licensed
- */
-
-
-
-/**
- * Module exports.
- * @public
- */
-
-module.exports = bytes;
-module.exports.format = format;
-module.exports.parse = parse;
-
-/**
- * Module variables.
- * @private
- */
-
-var formatThousandsRegExp = /\B(?=(\d{3})+(?!\d))/g;
-
-var formatDecimalsRegExp = /(?:\.0*|(\.[^0]+)0+)$/;
-
-var map = {
-  b:  1,
-  kb: 1 << 10,
-  mb: 1 << 20,
-  gb: 1 << 30,
-  tb: ((1 << 30) * 1024)
-};
-
-var parseRegExp = /^((-|\+)?(\d+(?:\.\d+)?)) *(kb|mb|gb|tb)$/i;
-
-/**
- * Convert the given value in bytes into a string or parse to string to an integer in bytes.
- *
- * @param {string|number} value
- * @param {{
- *  case: [string],
- *  decimalPlaces: [number]
- *  fixedDecimals: [boolean]
- *  thousandsSeparator: [string]
- *  unitSeparator: [string]
- *  }} [options] bytes options.
- *
- * @returns {string|number|null}
- */
-
-function bytes(value, options) {
-  if (typeof value === 'string') {
-    return parse(value);
-  }
-
-  if (typeof value === 'number') {
-    return format(value, options);
-  }
-
-  return null;
-}
-
-/**
- * Format the given value in bytes into a string.
- *
- * If the value is negative, it is kept as such. If it is a float,
- * it is rounded.
- *
- * @param {number} value
- * @param {object} [options]
- * @param {number} [options.decimalPlaces=2]
- * @param {number} [options.fixedDecimals=false]
- * @param {string} [options.thousandsSeparator=]
- * @param {string} [options.unit=]
- * @param {string} [options.unitSeparator=]
- *
- * @returns {string|null}
- * @public
- */
-
-function format(value, options) {
-  if (!Number.isFinite(value)) {
-    return null;
-  }
-
-  var mag = Math.abs(value);
-  var thousandsSeparator = (options && options.thousandsSeparator) || '';
-  var unitSeparator = (options && options.unitSeparator) || '';
-  var decimalPlaces = (options && options.decimalPlaces !== undefined) ? options.decimalPlaces : 2;
-  var fixedDecimals = Boolean(options && options.fixedDecimals);
-  var unit = (options && options.unit) || '';
-
-  if (!unit || !map[unit.toLowerCase()]) {
-    if (mag >= map.tb) {
-      unit = 'TB';
-    } else if (mag >= map.gb) {
-      unit = 'GB';
-    } else if (mag >= map.mb) {
-      unit = 'MB';
-    } else if (mag >= map.kb) {
-      unit = 'KB';
-    } else {
-      unit = 'B';
-    }
-  }
-
-  var val = value / map[unit.toLowerCase()];
-  var str = val.toFixed(decimalPlaces);
-
-  if (!fixedDecimals) {
-    str = str.replace(formatDecimalsRegExp, '$1');
-  }
-
-  if (thousandsSeparator) {
-    str = str.replace(formatThousandsRegExp, thousandsSeparator);
-  }
-
-  return str + unitSeparator + unit;
-}
-
-/**
- * Parse the string value into an integer in bytes.
- *
- * If no unit is given, it is assumed the value is in bytes.
- *
- * @param {number|string} val
- *
- * @returns {number|null}
- * @public
- */
-
-function parse(val) {
-  if (typeof val === 'number' && !isNaN(val)) {
-    return val;
-  }
-
-  if (typeof val !== 'string') {
-    return null;
-  }
-
-  // Test if the string passed is valid
-  var results = parseRegExp.exec(val);
-  var floatValue;
-  var unit = 'b';
-
-  if (!results) {
-    // Nothing could be extracted from the given string
-    floatValue = parseInt(val, 10);
-    unit = 'b'
-  } else {
-    // Retrieve the value and the unit
-    floatValue = parseFloat(results[1]);
-    unit = results[4].toLowerCase();
-  }
-
-  return Math.floor(map[unit] * floatValue);
-}
-
-
-/***/ }),
-/* 597 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = (flag, argv) => {
-	argv = argv || process.argv;
-	const prefix = flag.startsWith('-') ? '' : (flag.length === 1 ? '-' : '--');
-	const pos = argv.indexOf(prefix + flag);
-	const terminatorPos = argv.indexOf('--');
-	return pos !== -1 && (terminatorPos === -1 ? true : pos < terminatorPos);
-};
-
-
-/***/ }),
-/* 598 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const os = __webpack_require__(46);
-const hasFlag = __webpack_require__(597);
-
-const env = process.env;
-
-let forceColor;
-if (hasFlag('no-color') ||
-	hasFlag('no-colors') ||
-	hasFlag('color=false')) {
-	forceColor = false;
-} else if (hasFlag('color') ||
-	hasFlag('colors') ||
-	hasFlag('color=true') ||
-	hasFlag('color=always')) {
-	forceColor = true;
-}
-if ('FORCE_COLOR' in env) {
-	forceColor = env.FORCE_COLOR.length === 0 || parseInt(env.FORCE_COLOR, 10) !== 0;
-}
-
-function translateLevel(level) {
-	if (level === 0) {
-		return false;
-	}
-
-	return {
-		level,
-		hasBasic: true,
-		has256: level >= 2,
-		has16m: level >= 3
-	};
-}
-
-function supportsColor(stream) {
-	if (forceColor === false) {
-		return 0;
-	}
-
-	if (hasFlag('color=16m') ||
-		hasFlag('color=full') ||
-		hasFlag('color=truecolor')) {
-		return 3;
-	}
-
-	if (hasFlag('color=256')) {
-		return 2;
-	}
-
-	if (stream && !stream.isTTY && forceColor !== true) {
-		return 0;
-	}
-
-	const min = forceColor ? 1 : 0;
-
-	if (process.platform === 'win32') {
-		// Node.js 7.5.0 is the first version of Node.js to include a patch to
-		// libuv that enables 256 color output on Windows. Anything earlier and it
-		// won't work. However, here we target Node.js 8 at minimum as it is an LTS
-		// release, and Node.js 7 is not. Windows 10 build 10586 is the first Windows
-		// release that supports 256 colors. Windows 10 build 14931 is the first release
-		// that supports 16m/TrueColor.
-		const osRelease = os.release().split('.');
-		if (
-			Number(process.versions.node.split('.')[0]) >= 8 &&
-			Number(osRelease[0]) >= 10 &&
-			Number(osRelease[2]) >= 10586
-		) {
-			return Number(osRelease[2]) >= 14931 ? 3 : 2;
-		}
-
-		return 1;
-	}
-
-	if ('CI' in env) {
-		if (['TRAVIS', 'CIRCLECI', 'APPVEYOR', 'GITLAB_CI'].some(sign => sign in env) || env.CI_NAME === 'codeship') {
-			return 1;
-		}
-
-		return min;
-	}
-
-	if ('TEAMCITY_VERSION' in env) {
-		return /^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0;
-	}
-
-	if (env.COLORTERM === 'truecolor') {
-		return 3;
-	}
-
-	if ('TERM_PROGRAM' in env) {
-		const version = parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
-
-		switch (env.TERM_PROGRAM) {
-			case 'iTerm.app':
-				return version >= 3 ? 3 : 2;
-			case 'Apple_Terminal':
-				return 2;
-			// No default
-		}
-	}
-
-	if (/-256(color)?$/i.test(env.TERM)) {
-		return 2;
-	}
-
-	if (/^screen|^xterm|^vt100|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
-		return 1;
-	}
-
-	if ('COLORTERM' in env) {
-		return 1;
-	}
-
-	if (env.TERM === 'dumb') {
-		return min;
-	}
-
-	return min;
-}
-
-function getSupportLevel(stream) {
-	const level = supportsColor(stream);
-	return translateLevel(level);
-}
-
-module.exports = {
-	supportsColor: getSupportLevel,
-	stdout: getSupportLevel(process.stdout),
-	stderr: getSupportLevel(process.stderr)
-};
-
-
-/***/ }),
-/* 599 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const TEMPLATE_REGEX = /(?:\\(u[a-f\d]{4}|x[a-f\d]{2}|.))|(?:\{(~)?(\w+(?:\([^)]*\))?(?:\.\w+(?:\([^)]*\))?)*)(?:[ \t]|(?=\r?\n)))|(\})|((?:.|[\r\n\f])+?)/gi;
-const STYLE_REGEX = /(?:^|\.)(\w+)(?:\(([^)]*)\))?/g;
-const STRING_REGEX = /^(['"])((?:\\.|(?!\1)[^\\])*)\1$/;
-const ESCAPE_REGEX = /\\(u[a-f\d]{4}|x[a-f\d]{2}|.)|([^\\])/gi;
-
-const ESCAPES = new Map([
-	['n', '\n'],
-	['r', '\r'],
-	['t', '\t'],
-	['b', '\b'],
-	['f', '\f'],
-	['v', '\v'],
-	['0', '\0'],
-	['\\', '\\'],
-	['e', '\u001B'],
-	['a', '\u0007']
-]);
-
-function unescape(c) {
-	if ((c[0] === 'u' && c.length === 5) || (c[0] === 'x' && c.length === 3)) {
-		return String.fromCharCode(parseInt(c.slice(1), 16));
-	}
-
-	return ESCAPES.get(c) || c;
-}
-
-function parseArguments(name, args) {
-	const results = [];
-	const chunks = args.trim().split(/\s*,\s*/g);
-	let matches;
-
-	for (const chunk of chunks) {
-		if (!isNaN(chunk)) {
-			results.push(Number(chunk));
-		} else if ((matches = chunk.match(STRING_REGEX))) {
-			results.push(matches[2].replace(ESCAPE_REGEX, (m, escape, chr) => escape ? unescape(escape) : chr));
-		} else {
-			throw new Error(`Invalid Chalk template style argument: ${chunk} (in style '${name}')`);
-		}
-	}
-
-	return results;
-}
-
-function parseStyle(style) {
-	STYLE_REGEX.lastIndex = 0;
-
-	const results = [];
-	let matches;
-
-	while ((matches = STYLE_REGEX.exec(style)) !== null) {
-		const name = matches[1];
-
-		if (matches[2]) {
-			const args = parseArguments(name, matches[2]);
-			results.push([name].concat(args));
-		} else {
-			results.push([name]);
-		}
-	}
-
-	return results;
-}
-
-function buildStyle(chalk, styles) {
-	const enabled = {};
-
-	for (const layer of styles) {
-		for (const style of layer.styles) {
-			enabled[style[0]] = layer.inverse ? null : style.slice(1);
-		}
-	}
-
-	let current = chalk;
-	for (const styleName of Object.keys(enabled)) {
-		if (Array.isArray(enabled[styleName])) {
-			if (!(styleName in current)) {
-				throw new Error(`Unknown Chalk style: ${styleName}`);
-			}
-
-			if (enabled[styleName].length > 0) {
-				current = current[styleName].apply(current, enabled[styleName]);
-			} else {
-				current = current[styleName];
-			}
-		}
-	}
-
-	return current;
-}
-
-module.exports = (chalk, tmp) => {
-	const styles = [];
-	const chunks = [];
-	let chunk = [];
-
-	// eslint-disable-next-line max-params
-	tmp.replace(TEMPLATE_REGEX, (m, escapeChar, inverse, style, close, chr) => {
-		if (escapeChar) {
-			chunk.push(unescape(escapeChar));
-		} else if (style) {
-			const str = chunk.join('');
-			chunk = [];
-			chunks.push(styles.length === 0 ? str : buildStyle(chalk, styles)(str));
-			styles.push({inverse, styles: parseStyle(style)});
-		} else if (close) {
-			if (styles.length === 0) {
-				throw new Error('Found extraneous } in Chalk template literal');
-			}
-
-			chunks.push(buildStyle(chalk, styles)(chunk.join('')));
-			chunk = [];
-			styles.pop();
-		} else {
-			chunk.push(chr);
-		}
-	});
-
-	chunks.push(chunk.join(''));
-
-	if (styles.length > 0) {
-		const errMsg = `Chalk template literal is missing ${styles.length} closing bracket${styles.length === 1 ? '' : 's'} (\`}\`)`;
-		throw new Error(errMsg);
-	}
-
-	return chunks.join('');
-};
-
-
-/***/ }),
-/* 600 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = chownr
-chownr.sync = chownrSync
-
-var fs = __webpack_require__(5)
-, path = __webpack_require__(0)
-
-function chownr (p, uid, gid, cb) {
-  fs.readdir(p, function (er, children) {
-    // any error other than ENOTDIR means it's not readable, or
-    // doesn't exist.  give up.
-    if (er && er.code !== "ENOTDIR") return cb(er)
-    if (er || !children.length) return fs.chown(p, uid, gid, cb)
-
-    var len = children.length
-    , errState = null
-    children.forEach(function (child) {
-      var pathChild = path.resolve(p, child);
-      fs.lstat(pathChild, function(er, stats) {
-        if (er)
-          return cb(er)
-        if (!stats.isSymbolicLink())
-          chownr(pathChild, uid, gid, then)
-        else
-          then()
-        })
-    })
-    function then (er) {
-      if (errState) return
-      if (er) return cb(errState = er)
-      if (-- len === 0) return fs.chown(p, uid, gid, cb)
-    }
-  })
-}
-
-function chownrSync (p, uid, gid) {
-  var children
-  try {
-    children = fs.readdirSync(p)
-  } catch (er) {
-    if (er && er.code === "ENOTDIR") return fs.chownSync(p, uid, gid)
-    throw er
-  }
-  if (!children.length) return fs.chownSync(p, uid, gid)
-
-  children.forEach(function (child) {
-    var pathChild = path.resolve(p, child)
-    var stats = fs.lstatSync(pathChild)
-    if (!stats.isSymbolicLink())
-      chownrSync(pathChild, uid, gid)
-  })
-  return fs.chownSync(p, uid, gid)
-}
-
-
-/***/ }),
-/* 601 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var env = process.env
-
-var vendors = [
-  // Constant, Name, Envs
-  ['TRAVIS', 'Travis CI', 'TRAVIS'],
-  ['CIRCLE', 'CircleCI', 'CIRCLECI'],
-  ['GITLAB', 'GitLab CI', 'GITLAB_CI'],
-  ['APPVEYOR', 'AppVeyor', 'APPVEYOR'],
-  ['CODESHIP', 'Codeship', {CI_NAME: 'codeship'}],
-  ['DRONE', 'Drone', 'DRONE'],
-  ['MAGNUM', 'Magnum CI', 'MAGNUM'],
-  ['SEMAPHORE', 'Semaphore', 'SEMAPHORE'],
-  ['JENKINS', 'Jenkins', 'JENKINS_URL', 'BUILD_ID'],
-  ['BAMBOO', 'Bamboo', 'bamboo_planKey'],
-  ['TFS', 'Team Foundation Server', 'TF_BUILD'],
-  ['TEAMCITY', 'TeamCity', 'TEAMCITY_VERSION'],
-  ['BUILDKITE', 'Buildkite', 'BUILDKITE'],
-  ['HUDSON', 'Hudson', 'HUDSON_URL'],
-  ['TASKCLUSTER', 'TaskCluster', 'TASK_ID', 'RUN_ID'],
-  ['GOCD', 'GoCD', 'GO_PIPELINE_LABEL'],
-  ['BITBUCKET', 'Bitbucket Pipelines', 'BITBUCKET_COMMIT'],
-  ['CODEBUILD', 'AWS CodeBuild', 'CODEBUILD_BUILD_ARN']
-]
-
-exports.name = null
-
-vendors.forEach(function (vendor) {
-  var constant = vendor.shift()
-  var name = vendor.shift()
-  var isCI = vendor.every(function (obj) {
-    if (typeof obj === 'string') return !!env[obj]
-    return Object.keys(obj).every(function (k) {
-      return env[k] === obj[k]
-    })
-  })
-  exports[constant] = isCI
-  if (isCI) exports.name = name
-})
-
-exports.isCI = !!(
-  env.CI ||                      // Travis CI, CircleCI, Gitlab CI, Appveyor, CodeShip
-  env.CONTINUOUS_INTEGRATION ||  // Travis CI
-  env.BUILD_NUMBER ||            // Jenkins, TeamCity
-  exports.name ||
-  false
-)
-
-
-/***/ }),
-/* 602 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(605);
-
-/***/ }),
-/* 603 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var kindOf = __webpack_require__(179);
-var utils = __webpack_require__(382);
-
-/**
- * A representation of a cell within the table.
- * Implementations must have `init` and `draw` methods,
- * as well as `colSpan`, `rowSpan`, `desiredHeight` and `desiredWidth` properties.
- * @param options
- * @constructor
- */
-function Cell(options){
-  this.setOptions(options);
-}
-
-Cell.prototype.setOptions = function(options){
-  if(['boolean', 'number', 'string'].indexOf(kindOf(options)) !== -1){
-    options = {content:''+options};
-  }
-  options = options || {};
-  this.options = options;
-  var content = options.content;
-  if (['boolean', 'number', 'string'].indexOf(kindOf(content)) !== -1) {
-    this.content = String(content);
-  } else if (!content) {
-    this.content = '';
-  } else {
-    throw new Error('Content needs to be a primitive, got: ' + (typeof  content));
-  }
-  this.colSpan = options.colSpan || 1;
-  this.rowSpan = options.rowSpan || 1;
-};
-
-Cell.prototype.mergeTableOptions = function(tableOptions,cells){
-  this.cells = cells;
-
-  var optionsChars = this.options.chars || {};
-  var tableChars = tableOptions.chars;
-  var chars = this.chars = {};
-  CHAR_NAMES.forEach(function(name){
-     setOption(optionsChars,tableChars,name,chars);
-  });
-
-  this.truncate = this.options.truncate || tableOptions.truncate;
-
-  var style = this.options.style = this.options.style || {};
-  var tableStyle = tableOptions.style;
-  setOption(style, tableStyle, 'padding-left', this);
-  setOption(style, tableStyle, 'padding-right', this);
-  this.head = style.head || tableStyle.head;
-  this.border = style.border || tableStyle.border;
-
-  var fixedWidth = tableOptions.colWidths[this.x];
-  if(tableOptions.wordWrap && fixedWidth){
-    fixedWidth -= this.paddingLeft + this.paddingRight;
-    if(this.colSpan){
-      var i = 1;
-      while(i<this.colSpan){
-        fixedWidth += tableOptions.colWidths[this.x + i];
-        i++;
-      }
-    }
-    this.lines = utils.colorizeLines(utils.wordWrap(fixedWidth,this.content));
-  }
-  else {
-    this.lines = utils.colorizeLines(this.content.split('\n'));
-  }
-
-  this.desiredWidth = utils.strlen(this.content) + this.paddingLeft + this.paddingRight;
-  this.desiredHeight = this.lines.length;
-};
-
-/**
- * Each cell will have it's `x` and `y` values set by the `layout-manager` prior to
- * `init` being called;
- * @type {Number}
- */
-
-Cell.prototype.x = null;
-Cell.prototype.y = null;
-
-/**
- * Initializes the Cells data structure.
- *
- * @param tableOptions - A fully populated set of tableOptions.
- * In addition to the standard default values, tableOptions must have fully populated the
- * `colWidths` and `rowWidths` arrays. Those arrays must have lengths equal to the number
- * of columns or rows (respectively) in this table, and each array item must be a Number.
- *
- */
-Cell.prototype.init = function(tableOptions){
-  var x = this.x;
-  var y = this.y;
-  this.widths = tableOptions.colWidths.slice(x, x + this.colSpan);
-  this.heights = tableOptions.rowHeights.slice(y, y + this.rowSpan);
-  this.width = this.widths.reduce(sumPlusOne, -1);
-  this.height = this.heights.reduce(sumPlusOne, -1);
-
-  this.hAlign = this.options.hAlign || tableOptions.colAligns[x];
-  this.vAlign = this.options.vAlign || tableOptions.rowAligns[y];
-
-  this.drawRight = x + this.colSpan == tableOptions.colWidths.length;
-};
-
-/**
- * Draws the given line of the cell.
- * This default implementation defers to methods `drawTop`, `drawBottom`, `drawLine` and `drawEmpty`.
- * @param lineNum - can be `top`, `bottom` or a numerical line number.
- * @param spanningCell - will be a number if being called from a RowSpanCell, and will represent how
- * many rows below it's being called from. Otherwise it's undefined.
- * @returns {String} The representation of this line.
- */
-Cell.prototype.draw = function(lineNum,spanningCell){
-  if(lineNum == 'top') return this.drawTop(this.drawRight);
-  if(lineNum == 'bottom') return this.drawBottom(this.drawRight);
-  var padLen = Math.max(this.height - this.lines.length, 0);
-  var padTop;
-  switch (this.vAlign){
-    case 'center':
-      padTop = Math.ceil(padLen / 2);
-      break;
-    case 'bottom':
-      padTop = padLen;
-      break;
-    default :
-      padTop = 0;
-  }
-  if( (lineNum < padTop) || (lineNum >= (padTop + this.lines.length))){
-    return this.drawEmpty(this.drawRight,spanningCell);
-  }
-  var forceTruncation = (this.lines.length > this.height) && (lineNum + 1 >= this.height);
-  return this.drawLine(lineNum - padTop, this.drawRight, forceTruncation,spanningCell);
-};
-
-/**
- * Renders the top line of the cell.
- * @param drawRight - true if this method should render the right edge of the cell.
- * @returns {String}
- */
-Cell.prototype.drawTop = function(drawRight){
-  var content = [];
-  if(this.cells){  //TODO: cells should always exist - some tests don't fill it in though
-    this.widths.forEach(function(width,index){
-      content.push(this._topLeftChar(index));
-      content.push(
-        utils.repeat(this.chars[this.y == 0 ? 'top' : 'mid'],width)
-      );
-    },this);
-  }
-  else {
-    content.push(this._topLeftChar(0));
-    content.push(utils.repeat(this.chars[this.y == 0 ? 'top' : 'mid'],this.width));
-  }
-  if(drawRight){
-    content.push(this.chars[this.y == 0 ? 'topRight' : 'rightMid']);
-  }
-  return this.wrapWithStyleColors('border',content.join(''));
-};
-
-Cell.prototype._topLeftChar = function(offset){
-  var x = this.x+offset;
-  var leftChar;
-  if(this.y == 0){
-    leftChar = x == 0 ? 'topLeft' : (offset == 0 ? 'topMid' : 'top');
-  } else  {
-    if(x == 0){
-      leftChar = 'leftMid';
-    }
-    else {
-      leftChar = offset == 0 ? 'midMid' : 'bottomMid';
-      if(this.cells){  //TODO: cells should always exist - some tests don't fill it in though
-        var spanAbove = this.cells[this.y-1][x] instanceof Cell.ColSpanCell;
-        if(spanAbove){
-          leftChar = offset == 0 ? 'topMid' : 'mid';
-        }
-        if(offset == 0){
-          var i = 1;
-          while(this.cells[this.y][x-i] instanceof Cell.ColSpanCell){
-            i++;
-          }
-          if(this.cells[this.y][x-i] instanceof Cell.RowSpanCell){
-            leftChar = 'leftMid';
-          }
-        }
-      }
-    }
-  }
-  return this.chars[leftChar];
-};
-
-Cell.prototype.wrapWithStyleColors = function(styleProperty,content){
-  if(this[styleProperty] && this[styleProperty].length){
-    try {
-      var colors = __webpack_require__(621);
-      for(var i = this[styleProperty].length - 1; i >= 0; i--){
-        colors = colors[this[styleProperty][i]];
-      }
-      return colors(content);
-    } catch (e) {
-      return content;
-    }
-  }
-  else {
-    return content;
-  }
-};
-
-/**
- * Renders a line of text.
- * @param lineNum - Which line of text to render. This is not necessarily the line within the cell.
- * There may be top-padding above the first line of text.
- * @param drawRight - true if this method should render the right edge of the cell.
- * @param forceTruncationSymbol - `true` if the rendered text should end with the truncation symbol even
- * if the text fits. This is used when the cell is vertically truncated. If `false` the text should
- * only include the truncation symbol if the text will not fit horizontally within the cell width.
- * @param spanningCell - a number of if being called from a RowSpanCell. (how many rows below). otherwise undefined.
- * @returns {String}
- */
-Cell.prototype.drawLine = function(lineNum,drawRight,forceTruncationSymbol,spanningCell){
-  var left = this.chars[this.x == 0 ? 'left' : 'middle'];
-  if(this.x && spanningCell && this.cells){
-    var cellLeft = this.cells[this.y+spanningCell][this.x-1];
-    while(cellLeft instanceof ColSpanCell){
-      cellLeft = this.cells[cellLeft.y][cellLeft.x-1];
-    }
-    if(!(cellLeft instanceof RowSpanCell)){
-      left = this.chars['rightMid'];
-    }
-  }
-  var leftPadding = utils.repeat(' ', this.paddingLeft);
-  var right = (drawRight ? this.chars['right'] : '');
-  var rightPadding = utils.repeat(' ', this.paddingRight);
-  var line = this.lines[lineNum];
-  var len = this.width - (this.paddingLeft + this.paddingRight);
-  if(forceTruncationSymbol) line += this.truncate || '…';
-  var content = utils.truncate(line,len,this.truncate);
-  content = utils.pad(content, len, ' ', this.hAlign);
-  content = leftPadding + content + rightPadding;
-  return this.stylizeLine(left,content,right);
-};
-
-Cell.prototype.stylizeLine = function(left,content,right){
-  left = this.wrapWithStyleColors('border',left);
-  right = this.wrapWithStyleColors('border',right);
-  if(this.y === 0){
-    content = this.wrapWithStyleColors('head',content);
-  }
-  return left + content + right;
-};
-
-/**
- * Renders the bottom line of the cell.
- * @param drawRight - true if this method should render the right edge of the cell.
- * @returns {String}
- */
-Cell.prototype.drawBottom = function(drawRight){
-  var left = this.chars[this.x == 0 ? 'bottomLeft' : 'bottomMid'];
-  var content = utils.repeat(this.chars.bottom,this.width);
-  var right = drawRight ? this.chars['bottomRight'] : '';
-  return this.wrapWithStyleColors('border',left + content + right);
-};
-
-/**
- * Renders a blank line of text within the cell. Used for top and/or bottom padding.
- * @param drawRight - true if this method should render the right edge of the cell.
- * @param spanningCell - a number of if being called from a RowSpanCell. (how many rows below). otherwise undefined.
- * @returns {String}
- */
-Cell.prototype.drawEmpty = function(drawRight,spanningCell){
-  var left = this.chars[this.x == 0 ? 'left' : 'middle'];
-  if(this.x && spanningCell && this.cells){
-    var cellLeft = this.cells[this.y+spanningCell][this.x-1];
-    while(cellLeft instanceof ColSpanCell){
-      cellLeft = this.cells[cellLeft.y][cellLeft.x-1];
-    }
-    if(!(cellLeft instanceof RowSpanCell)){
-      left = this.chars['rightMid'];
-    }
-  }
-  var right = (drawRight ? this.chars['right'] : '');
-  var content = utils.repeat(' ',this.width);
-  return this.stylizeLine(left , content , right);
-};
-
-/**
- * A Cell that doesn't do anything. It just draws empty lines.
- * Used as a placeholder in column spanning.
- * @constructor
- */
-function ColSpanCell(){}
-
-ColSpanCell.prototype.draw = function(){
-  return '';
-};
-
-ColSpanCell.prototype.init = function(tableOptions){};
-
-
-/**
- * A placeholder Cell for a Cell that spans multiple rows.
- * It delegates rendering to the original cell, but adds the appropriate offset.
- * @param originalCell
- * @constructor
- */
-function RowSpanCell(originalCell){
-  this.originalCell = originalCell;
-}
-
-RowSpanCell.prototype.init = function(tableOptions){
-  var y = this.y;
-  var originalY = this.originalCell.y;
-  this.cellOffset = y - originalY;
-  this.offset = findDimension(tableOptions.rowHeights,originalY,this.cellOffset);
-};
-
-RowSpanCell.prototype.draw = function(lineNum){
-  if(lineNum == 'top'){
-    return this.originalCell.draw(this.offset,this.cellOffset);
-  }
-  if(lineNum == 'bottom'){
-    return this.originalCell.draw('bottom');
-  }
-  return this.originalCell.draw(this.offset + 1 + lineNum);
-};
-
-ColSpanCell.prototype.mergeTableOptions =
-RowSpanCell.prototype.mergeTableOptions = function(){};
-
-// HELPER FUNCTIONS
-function setOption(objA,objB,nameB,targetObj){
-  var nameA = nameB.split('-');
-  if(nameA.length > 1) {
-    nameA[1] = nameA[1].charAt(0).toUpperCase() + nameA[1].substr(1);
-    nameA = nameA.join('');
-    targetObj[nameA] = objA[nameA] || objA[nameB] || objB[nameA] || objB[nameB];
-  }
-  else {
-    targetObj[nameB] = objA[nameB] || objB[nameB];
-  }
-}
-
-function findDimension(dimensionTable, startingIndex, span){
-  var ret = dimensionTable[startingIndex];
-  for(var i = 1; i < span; i++){
-    ret += 1 + dimensionTable[startingIndex + i];
-  }
-  return ret;
-}
-
-function sumPlusOne(a,b){
-  return a+b+1;
-}
-
-var CHAR_NAMES = [  'top'
-  , 'top-mid'
-  , 'top-left'
-  , 'top-right'
-  , 'bottom'
-  , 'bottom-mid'
-  , 'bottom-left'
-  , 'bottom-right'
-  , 'left'
-  , 'left-mid'
-  , 'mid'
-  , 'mid-mid'
-  , 'right'
-  , 'right-mid'
-  , 'middle'
-];
-module.exports = Cell;
-module.exports.ColSpanCell = ColSpanCell;
-module.exports.RowSpanCell = RowSpanCell;
-
-
-/***/ }),
-/* 604 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var kindOf = __webpack_require__(179);
-var objectAssign = __webpack_require__(303);
-var Cell = __webpack_require__(603);
-var RowSpanCell = Cell.RowSpanCell;
-var ColSpanCell = Cell.ColSpanCell;
-
-(function(){
-  function layoutTable(table){
-    table.forEach(function(row,rowIndex){
-      row.forEach(function(cell,columnIndex){
-        cell.y = rowIndex;
-        cell.x = columnIndex;
-        for(var y = rowIndex; y >= 0; y--){
-          var row2 = table[y];
-          var xMax = (y === rowIndex) ? columnIndex : row2.length;
-          for(var x = 0; x < xMax; x++){
-            var cell2 = row2[x];
-            while(cellsConflict(cell,cell2)){
-              cell.x++;
-            }
-          }
-        }
-      });
-    });
-  }
-
-  function maxWidth(table) {
-    var mw = 0;
-    table.forEach(function (row) {
-      row.forEach(function (cell) {
-        mw = Math.max(mw,cell.x + (cell.colSpan || 1));
-      });
-    });
-    return mw;
-  }
-
-  function maxHeight(table){
-    return table.length;
-  }
-
-  function cellsConflict(cell1,cell2){
-    var yMin1 = cell1.y;
-    var yMax1 = cell1.y - 1 + (cell1.rowSpan || 1);
-    var yMin2 = cell2.y;
-    var yMax2 = cell2.y - 1 + (cell2.rowSpan || 1);
-    var yConflict = !(yMin1 > yMax2 || yMin2 > yMax1);
-
-    var xMin1= cell1.x;
-    var xMax1 = cell1.x - 1 + (cell1.colSpan || 1);
-    var xMin2= cell2.x;
-    var xMax2 = cell2.x - 1 + (cell2.colSpan || 1);
-    var xConflict = !(xMin1 > xMax2 || xMin2 > xMax1);
-
-    return yConflict && xConflict;
-  }
-
-  function conflictExists(rows,x,y){
-    var i_max = Math.min(rows.length-1,y);
-    var cell = {x:x,y:y};
-    for(var i = 0; i <= i_max; i++){
-      var row = rows[i];
-      for(var j = 0; j < row.length; j++){
-        if(cellsConflict(cell,row[j])){
-          return true;
-        }
-      }
-    }
-    return false;
-  }
-
-  function allBlank(rows,y,xMin,xMax){
-    for(var x = xMin; x < xMax; x++){
-      if(conflictExists(rows,x,y)){
-        return false;
-      }
-    }
-    return true;
-  }
-
-  function addRowSpanCells(table){
-    table.forEach(function(row,rowIndex){
-      row.forEach(function(cell){
-        for(var i = 1; i < cell.rowSpan; i++){
-          var rowSpanCell = new RowSpanCell(cell);
-          rowSpanCell.x = cell.x;
-          rowSpanCell.y = cell.y + i;
-          rowSpanCell.colSpan = cell.colSpan;
-          insertCell(rowSpanCell,table[rowIndex+i]);
-        }
-      });
-    });
-  }
-
-  function addColSpanCells(cellRows){
-    for(var rowIndex = cellRows.length-1; rowIndex >= 0; rowIndex--) {
-      var cellColumns = cellRows[rowIndex];
-      for (var columnIndex = 0; columnIndex < cellColumns.length; columnIndex++) {
-        var cell = cellColumns[columnIndex];
-        for (var k = 1; k < cell.colSpan; k++) {
-          var colSpanCell = new ColSpanCell();
-          colSpanCell.x = cell.x + k;
-          colSpanCell.y = cell.y;
-          cellColumns.splice(columnIndex + 1, 0, colSpanCell);
-        }
-      }
-    }
-  }
-
-  function insertCell(cell,row){
-    var x = 0;
-    while(x < row.length && (row[x].x < cell.x)) {
-      x++;
-    }
-    row.splice(x,0,cell);
-  }
-
-  function fillInTable(table){
-    var h_max = maxHeight(table);
-    var w_max = maxWidth(table);
-    for(var y = 0; y < h_max; y++){
-      for(var x = 0; x < w_max; x++){
-        if(!conflictExists(table,x,y)){
-          var opts = {x:x,y:y,colSpan:1,rowSpan:1};
-          x++;
-          while(x < w_max && !conflictExists(table,x,y)){
-            opts.colSpan++;
-            x++;
-          }
-          var y2 = y + 1;
-          while(y2 < h_max && allBlank(table,y2,opts.x,opts.x+opts.colSpan)){
-            opts.rowSpan++;
-            y2++;
-          }
-
-          var cell = new Cell(opts);
-          cell.x = opts.x;
-          cell.y = opts.y;
-          insertCell(cell,table[y]);
-        }
-      }
-    }
-  }
-
-  function generateCells(rows){
-    return rows.map(function(row){
-      if(kindOf(row) !== 'array'){
-        var key = Object.keys(row)[0];
-        row = row[key];
-        if(kindOf(row) === 'array'){
-          row = row.slice();
-          row.unshift(key);
-        }
-        else {
-          row = [key,row];
-        }
-      }
-      return row.map(function(cell){
-        return new Cell(cell);
-      });
-    });
-  }
-
-  function makeTableLayout(rows){
-    var cellRows = generateCells(rows);
-    layoutTable(cellRows);
-    fillInTable(cellRows);
-    addRowSpanCells(cellRows);
-    addColSpanCells(cellRows);
-    return cellRows;
-  }
-
-  module.exports = {
-    makeTableLayout: makeTableLayout,
-    layoutTable: layoutTable,
-    addRowSpanCells: addRowSpanCells,
-    maxWidth:maxWidth,
-    fillInTable:fillInTable,
-    computeWidths:makeComputeWidths('colSpan','desiredWidth','x',1),
-    computeHeights:makeComputeWidths('rowSpan','desiredHeight','y',1)
-  };
-})();
-
-function makeComputeWidths(colSpan,desiredWidth,x,forcedMin){
-  return function(vals,table){
-    var result = [];
-    var spanners = [];
-    table.forEach(function(row){
-      row.forEach(function(cell){
-        if((cell[colSpan] || 1) > 1){
-          spanners.push(cell);
-        }
-        else {
-          result[cell[x]] = Math.max(result[cell[x]] || 0, cell[desiredWidth] || 0, forcedMin);
-        }
-      });
-    });
-
-    vals.forEach(function(val,index){
-      if(kindOf(val) === 'number'){
-        result[index] = val;
-      }
-    });
-
-    //spanners.forEach(function(cell){
-    for(var k = spanners.length - 1; k >=0; k--){
-      var cell = spanners[k];
-      var span = cell[colSpan];
-      var col = cell[x];
-      var existingWidth = result[col];
-      var editableCols = kindOf(vals[col]) === 'number' ? 0 : 1;
-      for(var i = 1; i < span; i ++){
-        existingWidth += 1 + result[col + i];
-        if(kindOf(vals[col + i]) !== 'number'){
-          editableCols++;
-        }
-      }
-      if(cell[desiredWidth] > existingWidth){
-        i = 0;
-        while(editableCols > 0 && cell[desiredWidth] > existingWidth){
-          if(kindOf(vals[col+i]) !== 'number'){
-            var dif = Math.round( (cell[desiredWidth] - existingWidth) / editableCols );
-            existingWidth += dif;
-            result[col + i] += dif;
-            editableCols--;
-          }
-          i++;
-        }
-      }
-    }
-
-    objectAssign(vals,result);
-    for(var j = 0; j < vals.length; j++){
-      vals[j] = Math.max(forcedMin, vals[j] || 0);
-    }
-  };
-}
-
-
-/***/ }),
-/* 605 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var utils = __webpack_require__(382);
-var tableLayout = __webpack_require__(604);
-
-function Table(options){
-  this.options = utils.mergeOptions(options);
-}
-
-Table.prototype.__proto__ = Array.prototype;
-
-Table.prototype.toString = function(){
-  var array = this;
-  var headersPresent = this.options.head && this.options.head.length;
-  if(headersPresent){
-    array = [this.options.head];
-    if(this.length){
-      array.push.apply(array,this);
-    }
-  }
-  else {
-    this.options.style.head=[];
-  }
-
-  var cells = tableLayout.makeTableLayout(array);
-
-  cells.forEach(function(row){
-    row.forEach(function(cell){
-      cell.mergeTableOptions(this.options,cells);
-    },this);
-  },this);
-
-  tableLayout.computeWidths(this.options.colWidths,cells);
-  tableLayout.computeHeights(this.options.rowHeights,cells);
-
-  cells.forEach(function(row,rowIndex){
-    row.forEach(function(cell,cellIndex){
-      cell.init(this.options);
-    },this);
-  },this);
-
-  var result = [];
-
-  for(var rowIndex = 0; rowIndex < cells.length; rowIndex++){
-    var row = cells[rowIndex];
-    var heightOfRow = this.options.rowHeights[rowIndex];
-
-    if(rowIndex === 0 || !this.options.style.compact || (rowIndex == 1 && headersPresent)){
-      doDraw(row,'top',result);
-    }
-
-    for(var lineNum = 0; lineNum < heightOfRow; lineNum++){
-      doDraw(row,lineNum,result);
-    }
-
-    if(rowIndex + 1 == cells.length){
-      doDraw(row,'bottom',result);
-    }
-  }
-
-  return result.join('\n');
-};
-
-function doDraw(row,lineNum,result){
-  var line = [];
-  row.forEach(function(cell){
-    line.push(cell.draw(lineNum));
-  });
-  var str = line.join('');
-  if(str.length) result.push(str);
-}
-
-Table.prototype.__defineGetter__('width', function (){
-  var str = this.toString().split("\n");
-  return str[0].length;
-});
-
-module.exports = Table;
-
-
-/***/ }),
-/* 606 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-exports = module.exports = cliWidth;
-
-function normalizeOpts(options) {
-  var defaultOpts = {
-    defaultWidth: 0,
-    output: process.stdout,
-    tty: __webpack_require__(104)
-  };
-
-  if (!options) {
-    return defaultOpts;
-  } else {
-    Object.keys(defaultOpts).forEach(function (key) {
-      if (!options[key]) {
-        options[key] = defaultOpts[key];
-      }
-    });
-
-    return options;
-  }
-}
-
-function cliWidth(options) {
-  var opts = normalizeOpts(options);
-
-  if (opts.output.getWindowSize) {
-    return opts.output.getWindowSize()[0] || opts.defaultWidth;
-  } else {
-    if (opts.tty.getWindowSize) {
-      return opts.tty.getWindowSize()[1] || opts.defaultWidth;
-    } else {
-      if (opts.output.columns) {
-        return opts.output.columns;
-      } else {
-        if (process.env.CLI_WIDTH) {
-          var width = parseInt(process.env.CLI_WIDTH, 10);
-
-          if (!isNaN(width) && width !== 0) {
-            return width;
-          }
-        }
-      }
-
-      return opts.defaultWidth;
-    }
-  }
-};
-
-
-/***/ }),
-/* 607 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* eslint-disable babel/new-cap, xo/throw-new-error */
-
-module.exports = function (str, pos) {
-	if (str === null || str === undefined) {
-		throw TypeError();
-	}
-
-	str = String(str);
-
-	var size = str.length;
-	var i = pos ? Number(pos) : 0;
-
-	if (Number.isNaN(i)) {
-		i = 0;
-	}
-
-	if (i < 0 || i >= size) {
-		return undefined;
-	}
-
-	var first = str.charCodeAt(i);
-
-	if (first >= 0xD800 && first <= 0xDBFF && size > i + 1) {
-		var second = str.charCodeAt(i + 1);
-
-		if (second >= 0xDC00 && second <= 0xDFFF) {
-			return ((first - 0xD800) * 0x400) + second - 0xDC00 + 0x10000;
-		}
-	}
-
-	return first;
-};
-
-
-/***/ }),
-/* 608 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var conversions = __webpack_require__(384);
-var route = __webpack_require__(609);
-
-var convert = {};
-
-var models = Object.keys(conversions);
-
-function wrapRaw(fn) {
-	var wrappedFn = function (args) {
-		if (args === undefined || args === null) {
-			return args;
-		}
-
-		if (arguments.length > 1) {
-			args = Array.prototype.slice.call(arguments);
-		}
-
-		return fn(args);
-	};
-
-	// preserve .conversion property if there is one
-	if ('conversion' in fn) {
-		wrappedFn.conversion = fn.conversion;
-	}
-
-	return wrappedFn;
-}
-
-function wrapRounded(fn) {
-	var wrappedFn = function (args) {
-		if (args === undefined || args === null) {
-			return args;
-		}
-
-		if (arguments.length > 1) {
-			args = Array.prototype.slice.call(arguments);
-		}
-
-		var result = fn(args);
-
-		// we're assuming the result is an array here.
-		// see notice in conversions.js; don't use box types
-		// in conversion functions.
-		if (typeof result === 'object') {
-			for (var len = result.length, i = 0; i < len; i++) {
-				result[i] = Math.round(result[i]);
-			}
-		}
-
-		return result;
-	};
-
-	// preserve .conversion property if there is one
-	if ('conversion' in fn) {
-		wrappedFn.conversion = fn.conversion;
-	}
-
-	return wrappedFn;
-}
-
-models.forEach(function (fromModel) {
-	convert[fromModel] = {};
-
-	Object.defineProperty(convert[fromModel], 'channels', {value: conversions[fromModel].channels});
-	Object.defineProperty(convert[fromModel], 'labels', {value: conversions[fromModel].labels});
-
-	var routes = route(fromModel);
-	var routeModels = Object.keys(routes);
-
-	routeModels.forEach(function (toModel) {
-		var fn = routes[toModel];
-
-		convert[fromModel][toModel] = wrapRounded(fn);
-		convert[fromModel][toModel].raw = wrapRaw(fn);
-	});
-});
-
-module.exports = convert;
-
-
-/***/ }),
-/* 609 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var conversions = __webpack_require__(384);
-
-/*
-	this function routes a model to all other models.
-
-	all functions that are routed have a property `.conversion` attached
-	to the returned synthetic function. This property is an array
-	of strings, each with the steps in between the 'from' and 'to'
-	color models (inclusive).
-
-	conversions that are not possible simply are not included.
-*/
-
-function buildGraph() {
-	var graph = {};
-	// https://jsperf.com/object-keys-vs-for-in-with-closure/3
-	var models = Object.keys(conversions);
-
-	for (var len = models.length, i = 0; i < len; i++) {
-		graph[models[i]] = {
-			// http://jsperf.com/1-vs-infinity
-			// micro-opt, but this is simple.
-			distance: -1,
-			parent: null
-		};
-	}
-
-	return graph;
-}
-
-// https://en.wikipedia.org/wiki/Breadth-first_search
-function deriveBFS(fromModel) {
-	var graph = buildGraph();
-	var queue = [fromModel]; // unshift -> queue -> pop
-
-	graph[fromModel].distance = 0;
-
-	while (queue.length) {
-		var current = queue.pop();
-		var adjacents = Object.keys(conversions[current]);
-
-		for (var len = adjacents.length, i = 0; i < len; i++) {
-			var adjacent = adjacents[i];
-			var node = graph[adjacent];
-
-			if (node.distance === -1) {
-				node.distance = graph[current].distance + 1;
-				node.parent = current;
-				queue.unshift(adjacent);
-			}
-		}
-	}
-
-	return graph;
-}
-
-function link(from, to) {
-	return function (args) {
-		return to(from(args));
-	};
-}
-
-function wrapConversion(toModel, graph) {
-	var path = [graph[toModel].parent, toModel];
-	var fn = conversions[graph[toModel].parent][toModel];
-
-	var cur = graph[toModel].parent;
-	while (graph[cur].parent) {
-		path.unshift(graph[cur].parent);
-		fn = link(conversions[graph[cur].parent][cur], fn);
-		cur = graph[cur].parent;
-	}
-
-	fn.conversion = path;
-	return fn;
-}
-
-module.exports = function (fromModel) {
-	var graph = deriveBFS(fromModel);
-	var conversion = {};
-
-	var models = Object.keys(graph);
-	for (var len = models.length, i = 0; i < len; i++) {
-		var toModel = models[i];
-		var node = graph[toModel];
-
-		if (node.parent === null) {
-			// no possible conversion, or this node is the source model.
-			continue;
-		}
-
-		conversion[toModel] = wrapConversion(toModel, graph);
-	}
-
-	return conversion;
-};
-
-
-
-/***/ }),
-/* 610 */
-/***/ (function(module, exports) {
-
-module.exports = {
-	"aliceblue": [240, 248, 255],
-	"antiquewhite": [250, 235, 215],
-	"aqua": [0, 255, 255],
-	"aquamarine": [127, 255, 212],
-	"azure": [240, 255, 255],
-	"beige": [245, 245, 220],
-	"bisque": [255, 228, 196],
-	"black": [0, 0, 0],
-	"blanchedalmond": [255, 235, 205],
-	"blue": [0, 0, 255],
-	"blueviolet": [138, 43, 226],
-	"brown": [165, 42, 42],
-	"burlywood": [222, 184, 135],
-	"cadetblue": [95, 158, 160],
-	"chartreuse": [127, 255, 0],
-	"chocolate": [210, 105, 30],
-	"coral": [255, 127, 80],
-	"cornflowerblue": [100, 149, 237],
-	"cornsilk": [255, 248, 220],
-	"crimson": [220, 20, 60],
-	"cyan": [0, 255, 255],
-	"darkblue": [0, 0, 139],
-	"darkcyan": [0, 139, 139],
-	"darkgoldenrod": [184, 134, 11],
-	"darkgray": [169, 169, 169],
-	"darkgreen": [0, 100, 0],
-	"darkgrey": [169, 169, 169],
-	"darkkhaki": [189, 183, 107],
-	"darkmagenta": [139, 0, 139],
-	"darkolivegreen": [85, 107, 47],
-	"darkorange": [255, 140, 0],
-	"darkorchid": [153, 50, 204],
-	"darkred": [139, 0, 0],
-	"darksalmon": [233, 150, 122],
-	"darkseagreen": [143, 188, 143],
-	"darkslateblue": [72, 61, 139],
-	"darkslategray": [47, 79, 79],
-	"darkslategrey": [47, 79, 79],
-	"darkturquoise": [0, 206, 209],
-	"darkviolet": [148, 0, 211],
-	"deeppink": [255, 20, 147],
-	"deepskyblue": [0, 191, 255],
-	"dimgray": [105, 105, 105],
-	"dimgrey": [105, 105, 105],
-	"dodgerblue": [30, 144, 255],
-	"firebrick": [178, 34, 34],
-	"floralwhite": [255, 250, 240],
-	"forestgreen": [34, 139, 34],
-	"fuchsia": [255, 0, 255],
-	"gainsboro": [220, 220, 220],
-	"ghostwhite": [248, 248, 255],
-	"gold": [255, 215, 0],
-	"goldenrod": [218, 165, 32],
-	"gray": [128, 128, 128],
-	"green": [0, 128, 0],
-	"greenyellow": [173, 255, 47],
-	"grey": [128, 128, 128],
-	"honeydew": [240, 255, 240],
-	"hotpink": [255, 105, 180],
-	"indianred": [205, 92, 92],
-	"indigo": [75, 0, 130],
-	"ivory": [255, 255, 240],
-	"khaki": [240, 230, 140],
-	"lavender": [230, 230, 250],
-	"lavenderblush": [255, 240, 245],
-	"lawngreen": [124, 252, 0],
-	"lemonchiffon": [255, 250, 205],
-	"lightblue": [173, 216, 230],
-	"lightcoral": [240, 128, 128],
-	"lightcyan": [224, 255, 255],
-	"lightgoldenrodyellow": [250, 250, 210],
-	"lightgray": [211, 211, 211],
-	"lightgreen": [144, 238, 144],
-	"lightgrey": [211, 211, 211],
-	"lightpink": [255, 182, 193],
-	"lightsalmon": [255, 160, 122],
-	"lightseagreen": [32, 178, 170],
-	"lightskyblue": [135, 206, 250],
-	"lightslategray": [119, 136, 153],
-	"lightslategrey": [119, 136, 153],
-	"lightsteelblue": [176, 196, 222],
-	"lightyellow": [255, 255, 224],
-	"lime": [0, 255, 0],
-	"limegreen": [50, 205, 50],
-	"linen": [250, 240, 230],
-	"magenta": [255, 0, 255],
-	"maroon": [128, 0, 0],
-	"mediumaquamarine": [102, 205, 170],
-	"mediumblue": [0, 0, 205],
-	"mediumorchid": [186, 85, 211],
-	"mediumpurple": [147, 112, 219],
-	"mediumseagreen": [60, 179, 113],
-	"mediumslateblue": [123, 104, 238],
-	"mediumspringgreen": [0, 250, 154],
-	"mediumturquoise": [72, 209, 204],
-	"mediumvioletred": [199, 21, 133],
-	"midnightblue": [25, 25, 112],
-	"mintcream": [245, 255, 250],
-	"mistyrose": [255, 228, 225],
-	"moccasin": [255, 228, 181],
-	"navajowhite": [255, 222, 173],
-	"navy": [0, 0, 128],
-	"oldlace": [253, 245, 230],
-	"olive": [128, 128, 0],
-	"olivedrab": [107, 142, 35],
-	"orange": [255, 165, 0],
-	"orangered": [255, 69, 0],
-	"orchid": [218, 112, 214],
-	"palegoldenrod": [238, 232, 170],
-	"palegreen": [152, 251, 152],
-	"paleturquoise": [175, 238, 238],
-	"palevioletred": [219, 112, 147],
-	"papayawhip": [255, 239, 213],
-	"peachpuff": [255, 218, 185],
-	"peru": [205, 133, 63],
-	"pink": [255, 192, 203],
-	"plum": [221, 160, 221],
-	"powderblue": [176, 224, 230],
-	"purple": [128, 0, 128],
-	"rebeccapurple": [102, 51, 153],
-	"red": [255, 0, 0],
-	"rosybrown": [188, 143, 143],
-	"royalblue": [65, 105, 225],
-	"saddlebrown": [139, 69, 19],
-	"salmon": [250, 128, 114],
-	"sandybrown": [244, 164, 96],
-	"seagreen": [46, 139, 87],
-	"seashell": [255, 245, 238],
-	"sienna": [160, 82, 45],
-	"silver": [192, 192, 192],
-	"skyblue": [135, 206, 235],
-	"slateblue": [106, 90, 205],
-	"slategray": [112, 128, 144],
-	"slategrey": [112, 128, 144],
-	"snow": [255, 250, 250],
-	"springgreen": [0, 255, 127],
-	"steelblue": [70, 130, 180],
-	"tan": [210, 180, 140],
-	"teal": [0, 128, 128],
-	"thistle": [216, 191, 216],
-	"tomato": [255, 99, 71],
-	"turquoise": [64, 224, 208],
-	"violet": [238, 130, 238],
-	"wheat": [245, 222, 179],
-	"white": [255, 255, 255],
-	"whitesmoke": [245, 245, 245],
-	"yellow": [255, 255, 0],
-	"yellowgreen": [154, 205, 50]
-};
-
-/***/ }),
-/* 611 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
-
-The MIT License (MIT)
-
-Original Library
-  - Copyright (c) Marak Squires
-
-Additional functionality
- - Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-*/
-
-var colors = {};
-module['exports'] = colors;
-
-colors.themes = {};
-
-var util = __webpack_require__(3);
-var ansiStyles = colors.styles = __webpack_require__(618);
-var defineProps = Object.defineProperties;
-var newLineRegex = new RegExp(/[\r\n]+/g);
-
-colors.supportsColor = __webpack_require__(620).supportsColor;
-
-if (typeof colors.enabled === 'undefined') {
-  colors.enabled = colors.supportsColor() !== false;
-}
-
-colors.enable = function() {
-  colors.enabled = true;
-};
-
-colors.disable = function() {
-  colors.enabled = false;
-};
-
-colors.stripColors = colors.strip = function(str) {
-  return ('' + str).replace(/\x1B\[\d+m/g, '');
-};
-
-// eslint-disable-next-line no-unused-vars
-var stylize = colors.stylize = function stylize(str, style) {
-  if (!colors.enabled) {
-    return str+'';
-  }
-
-  return ansiStyles[style].open + str + ansiStyles[style].close;
-};
-
-var matchOperatorsRe = /[|\\{}()[\]^$+*?.]/g;
-var escapeStringRegexp = function(str) {
-  if (typeof str !== 'string') {
-    throw new TypeError('Expected a string');
-  }
-  return str.replace(matchOperatorsRe, '\\$&');
-};
-
-function build(_styles) {
-  var builder = function builder() {
-    return applyStyle.apply(builder, arguments);
-  };
-  builder._styles = _styles;
-  // __proto__ is used because we must return a function, but there is
-  // no way to create a function with a different prototype.
-  builder.__proto__ = proto;
-  return builder;
-}
-
-var styles = (function() {
-  var ret = {};
-  ansiStyles.grey = ansiStyles.gray;
-  Object.keys(ansiStyles).forEach(function(key) {
-    ansiStyles[key].closeRe =
-      new RegExp(escapeStringRegexp(ansiStyles[key].close), 'g');
-    ret[key] = {
-      get: function() {
-        return build(this._styles.concat(key));
-      },
-    };
-  });
-  return ret;
-})();
-
-var proto = defineProps(function colors() {}, styles);
-
-function applyStyle() {
-  var args = Array.prototype.slice.call(arguments);
-
-  var str = args.map(function(arg) {
-    if (arg != undefined && arg.constructor === String) {
-      return arg;
-    } else {
-      return util.inspect(arg);
-    }
-  }).join(' ');
-
-  if (!colors.enabled || !str) {
-    return str;
-  }
-
-  var newLinesPresent = str.indexOf('\n') != -1;
-
-  var nestedStyles = this._styles;
-
-  var i = nestedStyles.length;
-  while (i--) {
-    var code = ansiStyles[nestedStyles[i]];
-    str = code.open + str.replace(code.closeRe, code.open) + code.close;
-    if (newLinesPresent) {
-      str = str.replace(newLineRegex, function(match) {
-        return code.close + match + code.open;
-      });
-    }
-  }
-
-  return str;
-}
-
-colors.setTheme = function(theme) {
-  if (typeof theme === 'string') {
-    console.log('colors.setTheme now only accepts an object, not a string.  ' +
-      'If you are trying to set a theme from a file, it is now your (the ' +
-      'caller\'s) responsibility to require the file.  The old syntax ' +
-      'looked like colors.setTheme(__dirname + ' +
-      '\'/../themes/generic-logging.js\'); The new syntax looks like '+
-      'colors.setTheme(require(__dirname + ' +
-      '\'/../themes/generic-logging.js\'));');
-    return;
-  }
-  for (var style in theme) {
-    (function(style) {
-      colors[style] = function(str) {
-        if (typeof theme[style] === 'object') {
-          var out = str;
-          for (var i in theme[style]) {
-            out = colors[theme[style][i]](out);
-          }
-          return out;
-        }
-        return colors[theme[style]](str);
-      };
-    })(style);
-  }
-};
-
-function init() {
-  var ret = {};
-  Object.keys(styles).forEach(function(name) {
-    ret[name] = {
-      get: function() {
-        return build([name]);
-      },
-    };
-  });
-  return ret;
-}
-
-var sequencer = function sequencer(map, str) {
-  var exploded = str.split('');
-  exploded = exploded.map(map);
-  return exploded.join('');
-};
-
-// custom formatter methods
-colors.trap = __webpack_require__(612);
-colors.zalgo = __webpack_require__(613);
-
-// maps
-colors.maps = {};
-colors.maps.america = __webpack_require__(614)(colors);
-colors.maps.zebra = __webpack_require__(617)(colors);
-colors.maps.rainbow = __webpack_require__(615)(colors);
-colors.maps.random = __webpack_require__(616)(colors);
-
-for (var map in colors.maps) {
-  (function(map) {
-    colors[map] = function(str) {
-      return sequencer(colors.maps[map], str);
-    };
-  })(map);
-}
-
-defineProps(colors, init());
-
-
-/***/ }),
-/* 612 */
-/***/ (function(module, exports) {
-
-module['exports'] = function runTheTrap(text, options) {
-  var result = '';
-  text = text || 'Run the trap, drop the bass';
-  text = text.split('');
-  var trap = {
-    a: ['\u0040', '\u0104', '\u023a', '\u0245', '\u0394', '\u039b', '\u0414'],
-    b: ['\u00df', '\u0181', '\u0243', '\u026e', '\u03b2', '\u0e3f'],
-    c: ['\u00a9', '\u023b', '\u03fe'],
-    d: ['\u00d0', '\u018a', '\u0500', '\u0501', '\u0502', '\u0503'],
-    e: ['\u00cb', '\u0115', '\u018e', '\u0258', '\u03a3', '\u03be', '\u04bc',
-         '\u0a6c'],
-    f: ['\u04fa'],
-    g: ['\u0262'],
-    h: ['\u0126', '\u0195', '\u04a2', '\u04ba', '\u04c7', '\u050a'],
-    i: ['\u0f0f'],
-    j: ['\u0134'],
-    k: ['\u0138', '\u04a0', '\u04c3', '\u051e'],
-    l: ['\u0139'],
-    m: ['\u028d', '\u04cd', '\u04ce', '\u0520', '\u0521', '\u0d69'],
-    n: ['\u00d1', '\u014b', '\u019d', '\u0376', '\u03a0', '\u048a'],
-    o: ['\u00d8', '\u00f5', '\u00f8', '\u01fe', '\u0298', '\u047a', '\u05dd',
-         '\u06dd', '\u0e4f'],
-    p: ['\u01f7', '\u048e'],
-    q: ['\u09cd'],
-    r: ['\u00ae', '\u01a6', '\u0210', '\u024c', '\u0280', '\u042f'],
-    s: ['\u00a7', '\u03de', '\u03df', '\u03e8'],
-    t: ['\u0141', '\u0166', '\u0373'],
-    u: ['\u01b1', '\u054d'],
-    v: ['\u05d8'],
-    w: ['\u0428', '\u0460', '\u047c', '\u0d70'],
-    x: ['\u04b2', '\u04fe', '\u04fc', '\u04fd'],
-    y: ['\u00a5', '\u04b0', '\u04cb'],
-    z: ['\u01b5', '\u0240'],
-  };
-  text.forEach(function(c) {
-    c = c.toLowerCase();
-    var chars = trap[c] || [' '];
-    var rand = Math.floor(Math.random() * chars.length);
-    if (typeof trap[c] !== 'undefined') {
-      result += trap[c][rand];
-    } else {
-      result += c;
-    }
-  });
-  return result;
-};
-
-
-/***/ }),
-/* 613 */
-/***/ (function(module, exports) {
-
-// please no
-module['exports'] = function zalgo(text, options) {
-  text = text || '   he is here   ';
-  var soul = {
-    'up': [
-      '̍', '̎', '̄', '̅',
-      '̿', '̑', '̆', '̐',
-      '͒', '͗', '͑', '̇',
-      '̈', '̊', '͂', '̓',
-      '̈', '͊', '͋', '͌',
-      '̃', '̂', '̌', '͐',
-      '̀', '́', '̋', '̏',
-      '̒', '̓', '̔', '̽',
-      '̉', 'ͣ', 'ͤ', 'ͥ',
-      'ͦ', 'ͧ', 'ͨ', 'ͩ',
-      'ͪ', 'ͫ', 'ͬ', 'ͭ',
-      'ͮ', 'ͯ', '̾', '͛',
-      '͆', '̚',
-    ],
-    'down': [
-      '̖', '̗', '̘', '̙',
-      '̜', '̝', '̞', '̟',
-      '̠', '̤', '̥', '̦',
-      '̩', '̪', '̫', '̬',
-      '̭', '̮', '̯', '̰',
-      '̱', '̲', '̳', '̹',
-      '̺', '̻', '̼', 'ͅ',
-      '͇', '͈', '͉', '͍',
-      '͎', '͓', '͔', '͕',
-      '͖', '͙', '͚', '̣',
-    ],
-    'mid': [
-      '̕', '̛', '̀', '́',
-      '͘', '̡', '̢', '̧',
-      '̨', '̴', '̵', '̶',
-      '͜', '͝', '͞',
-      '͟', '͠', '͢', '̸',
-      '̷', '͡', ' ҉',
-    ],
-  };
-  var all = [].concat(soul.up, soul.down, soul.mid);
-
-  function randomNumber(range) {
-    var r = Math.floor(Math.random() * range);
-    return r;
-  }
-
-  function isChar(character) {
-    var bool = false;
-    all.filter(function(i) {
-      bool = (i === character);
-    });
-    return bool;
-  }
-
-
-  function heComes(text, options) {
-    var result = '';
-    var counts;
-    var l;
-    options = options || {};
-    options['up'] =
-      typeof options['up'] !== 'undefined' ? options['up'] : true;
-    options['mid'] =
-      typeof options['mid'] !== 'undefined' ? options['mid'] : true;
-    options['down'] =
-      typeof options['down'] !== 'undefined' ? options['down'] : true;
-    options['size'] =
-      typeof options['size'] !== 'undefined' ? options['size'] : 'maxi';
-    text = text.split('');
-    for (l in text) {
-      if (isChar(l)) {
-        continue;
-      }
-      result = result + text[l];
-      counts = {'up': 0, 'down': 0, 'mid': 0};
-      switch (options.size) {
-      case 'mini':
-        counts.up = randomNumber(8);
-        counts.mid = randomNumber(2);
-        counts.down = randomNumber(8);
-        break;
-      case 'maxi':
-        counts.up = randomNumber(16) + 3;
-        counts.mid = randomNumber(4) + 1;
-        counts.down = randomNumber(64) + 3;
-        break;
-      default:
-        counts.up = randomNumber(8) + 1;
-        counts.mid = randomNumber(6) / 2;
-        counts.down = randomNumber(8) + 1;
-        break;
-      }
-
-      var arr = ['up', 'mid', 'down'];
-      for (var d in arr) {
-        var index = arr[d];
-        for (var i = 0; i <= counts[index]; i++) {
-          if (options[index]) {
-            result = result + soul[index][randomNumber(soul[index].length)];
-          }
-        }
-      }
-    }
-    return result;
-  }
-  // don't summon him
-  return heComes(text, options);
-};
-
-
-
-/***/ }),
-/* 614 */
-/***/ (function(module, exports) {
-
-module['exports'] = function(colors) {
-  return function(letter, i, exploded) {
-    if (letter === ' ') return letter;
-    switch (i%3) {
-      case 0: return colors.red(letter);
-      case 1: return colors.white(letter);
-      case 2: return colors.blue(letter);
-    }
-  };
-};
-
-
-/***/ }),
-/* 615 */
-/***/ (function(module, exports) {
-
-module['exports'] = function(colors) {
-  // RoY G BiV
-  var rainbowColors = ['red', 'yellow', 'green', 'blue', 'magenta'];
-  return function(letter, i, exploded) {
-    if (letter === ' ') {
-      return letter;
-    } else {
-      return colors[rainbowColors[i++ % rainbowColors.length]](letter);
-    }
-  };
-};
-
-
-
-/***/ }),
-/* 616 */
-/***/ (function(module, exports) {
-
-module['exports'] = function(colors) {
-  var available = ['underline', 'inverse', 'grey', 'yellow', 'red', 'green',
-    'blue', 'white', 'cyan', 'magenta'];
-  return function(letter, i, exploded) {
-    return letter === ' ' ? letter :
-      colors[
-        available[Math.round(Math.random() * (available.length - 2))]
-      ](letter);
-  };
-};
-
-
-/***/ }),
-/* 617 */
-/***/ (function(module, exports) {
-
-module['exports'] = function(colors) {
-  return function(letter, i, exploded) {
-    return i % 2 === 0 ? letter : colors.inverse(letter);
-  };
-};
-
-
-/***/ }),
-/* 618 */
-/***/ (function(module, exports) {
-
-/*
-The MIT License (MIT)
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-*/
-
-var styles = {};
-module['exports'] = styles;
-
-var codes = {
-  reset: [0, 0],
-
-  bold: [1, 22],
-  dim: [2, 22],
-  italic: [3, 23],
-  underline: [4, 24],
-  inverse: [7, 27],
-  hidden: [8, 28],
-  strikethrough: [9, 29],
-
-  black: [30, 39],
-  red: [31, 39],
-  green: [32, 39],
-  yellow: [33, 39],
-  blue: [34, 39],
-  magenta: [35, 39],
-  cyan: [36, 39],
-  white: [37, 39],
-  gray: [90, 39],
-  grey: [90, 39],
-
-  bgBlack: [40, 49],
-  bgRed: [41, 49],
-  bgGreen: [42, 49],
-  bgYellow: [43, 49],
-  bgBlue: [44, 49],
-  bgMagenta: [45, 49],
-  bgCyan: [46, 49],
-  bgWhite: [47, 49],
-
-  // legacy styles for colors pre v1.0.0
-  blackBG: [40, 49],
-  redBG: [41, 49],
-  greenBG: [42, 49],
-  yellowBG: [43, 49],
-  blueBG: [44, 49],
-  magentaBG: [45, 49],
-  cyanBG: [46, 49],
-  whiteBG: [47, 49],
-
-};
-
-Object.keys(codes).forEach(function(key) {
-  var val = codes[key];
-  var style = styles[key] = [];
-  style.open = '\u001b[' + val[0] + 'm';
-  style.close = '\u001b[' + val[1] + 'm';
-});
-
-
-/***/ }),
-/* 619 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*
-MIT License
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy of
-this software and associated documentation files (the "Software"), to deal in
-the Software without restriction, including without limitation the rights to
-use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies
-of the Software, and to permit persons to whom the Software is furnished to do
-so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in all
-copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
-*/
-
-
-
-module.exports = function(flag, argv) {
-  argv = argv || process.argv;
-
-  var terminatorPos = argv.indexOf('--');
-  var prefix = /^-{1,2}/.test(flag) ? '' : '--';
-  var pos = argv.indexOf(prefix + flag);
-
-  return pos !== -1 && (terminatorPos === -1 ? true : pos < terminatorPos);
-};
-
-
-/***/ }),
-/* 620 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*
-The MIT License (MIT)
-
-Copyright (c) Sindre Sorhus <sindresorhus@gmail.com> (sindresorhus.com)
-
-Permission is hereby granted, free of charge, to any person obtaining a copy
-of this software and associated documentation files (the "Software"), to deal
-in the Software without restriction, including without limitation the rights
-to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
-copies of the Software, and to permit persons to whom the Software is
-furnished to do so, subject to the following conditions:
-
-The above copyright notice and this permission notice shall be included in
-all copies or substantial portions of the Software.
-
-THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
-IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
-FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
-AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
-LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
-OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
-THE SOFTWARE.
-
-*/
-
-
-
-var os = __webpack_require__(46);
-var hasFlag = __webpack_require__(619);
-
-var env = process.env;
-
-var forceColor = void 0;
-if (hasFlag('no-color') || hasFlag('no-colors') || hasFlag('color=false')) {
-  forceColor = false;
-} else if (hasFlag('color') || hasFlag('colors') || hasFlag('color=true')
-           || hasFlag('color=always')) {
-  forceColor = true;
-}
-if ('FORCE_COLOR' in env) {
-  forceColor = env.FORCE_COLOR.length === 0
-    || parseInt(env.FORCE_COLOR, 10) !== 0;
-}
-
-function translateLevel(level) {
-  if (level === 0) {
-    return false;
-  }
-
-  return {
-    level: level,
-    hasBasic: true,
-    has256: level >= 2,
-    has16m: level >= 3,
-  };
-}
-
-function supportsColor(stream) {
-  if (forceColor === false) {
-    return 0;
-  }
-
-  if (hasFlag('color=16m') || hasFlag('color=full')
-      || hasFlag('color=truecolor')) {
-    return 3;
-  }
-
-  if (hasFlag('color=256')) {
-    return 2;
-  }
-
-  if (stream && !stream.isTTY && forceColor !== true) {
-    return 0;
-  }
-
-  var min = forceColor ? 1 : 0;
-
-  if (process.platform === 'win32') {
-    // Node.js 7.5.0 is the first version of Node.js to include a patch to
-    // libuv that enables 256 color output on Windows. Anything earlier and it
-    // won't work. However, here we target Node.js 8 at minimum as it is an LTS
-    // release, and Node.js 7 is not. Windows 10 build 10586 is the first
-    // Windows release that supports 256 colors. Windows 10 build 14931 is the
-    // first release that supports 16m/TrueColor.
-    var osRelease = os.release().split('.');
-    if (Number(process.versions.node.split('.')[0]) >= 8
-        && Number(osRelease[0]) >= 10 && Number(osRelease[2]) >= 10586) {
-      return Number(osRelease[2]) >= 14931 ? 3 : 2;
-    }
-
-    return 1;
-  }
-
-  if ('CI' in env) {
-    if (['TRAVIS', 'CIRCLECI', 'APPVEYOR', 'GITLAB_CI'].some(function(sign) {
-      return sign in env;
-    }) || env.CI_NAME === 'codeship') {
-      return 1;
-    }
-
-    return min;
-  }
-
-  if ('TEAMCITY_VERSION' in env) {
-    return (/^(9\.(0*[1-9]\d*)\.|\d{2,}\.)/.test(env.TEAMCITY_VERSION) ? 1 : 0
-    );
-  }
-
-  if ('TERM_PROGRAM' in env) {
-    var version = parseInt((env.TERM_PROGRAM_VERSION || '').split('.')[0], 10);
-
-    switch (env.TERM_PROGRAM) {
-      case 'iTerm.app':
-        return version >= 3 ? 3 : 2;
-      case 'Hyper':
-        return 3;
-      case 'Apple_Terminal':
-        return 2;
-      // No default
-    }
-  }
-
-  if (/-256(color)?$/i.test(env.TERM)) {
-    return 2;
-  }
-
-  if (/^screen|^xterm|^vt100|^rxvt|color|ansi|cygwin|linux/i.test(env.TERM)) {
-    return 1;
-  }
-
-  if ('COLORTERM' in env) {
-    return 1;
-  }
-
-  if (env.TERM === 'dumb') {
-    return min;
-  }
-
-  return min;
-}
-
-function getSupportLevel(stream) {
-  var level = supportsColor(stream);
-  return translateLevel(level);
-}
-
-module.exports = {
-  supportsColor: getSupportLevel,
-  stdout: getSupportLevel(process.stdout),
-  stderr: getSupportLevel(process.stderr),
-};
-
-
-/***/ }),
-/* 621 */
-/***/ (function(module, exports, __webpack_require__) {
-
-//
-// Remark: Requiring this file will use the "safe" colors API,
-// which will not touch String.prototype.
-//
-//   var colors = require('colors/safe');
-//   colors.red("foo")
-//
-//
-var colors = __webpack_require__(611);
-module['exports'] = colors;
-
-
-/***/ }),
-/* 622 */
-/***/ (function(module, exports) {
-
-module.exports = defer;
-
-/**
- * Runs provided function on next iteration of the event loop
- *
- * @param {function} fn - function to run
- */
-function defer(fn)
-{
-  var nextTick = typeof setImmediate == 'function'
-    ? setImmediate
-    : (
-      typeof process == 'object' && typeof process.nextTick == 'function'
-      ? process.nextTick
-      : null
-    );
-
-  if (nextTick)
-  {
-    nextTick(fn);
-  }
-  else
-  {
-    setTimeout(fn, 0);
-  }
-}
-
-
-/***/ }),
-/* 623 */
-/***/ (function(module, exports, __webpack_require__) {
-
-__webpack_require__(627);
-module.exports = __webpack_require__(31).Object.assign;
-
-
-/***/ }),
-/* 624 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-// 19.1.2.1 Object.assign(target, source, ...)
-var getKeys = __webpack_require__(171);
-var gOPS = __webpack_require__(625);
-var pIE = __webpack_require__(626);
-var toObject = __webpack_require__(172);
-var IObject = __webpack_require__(170);
-var $assign = Object.assign;
-
-// should work with symbols and should have deterministic property order (V8 bug)
-module.exports = !$assign || __webpack_require__(112)(function () {
-  var A = {};
-  var B = {};
-  // eslint-disable-next-line no-undef
-  var S = Symbol();
-  var K = 'abcdefghijklmnopqrst';
-  A[S] = 7;
-  K.split('').forEach(function (k) { B[k] = k; });
-  return $assign({}, A)[S] != 7 || Object.keys($assign({}, B)).join('') != K;
-}) ? function assign(target, source) { // eslint-disable-line no-unused-vars
-  var T = toObject(target);
-  var aLen = arguments.length;
-  var index = 1;
-  var getSymbols = gOPS.f;
-  var isEnum = pIE.f;
-  while (aLen > index) {
-    var S = IObject(arguments[index++]);
-    var keys = getSymbols ? getKeys(S).concat(getSymbols(S)) : getKeys(S);
-    var length = keys.length;
-    var j = 0;
-    var key;
-    while (length > j) if (isEnum.call(S, key = keys[j++])) T[key] = S[key];
-  } return T;
-} : $assign;
-
-
-/***/ }),
-/* 625 */
-/***/ (function(module, exports) {
-
-exports.f = Object.getOwnPropertySymbols;
-
-
-/***/ }),
-/* 626 */
-/***/ (function(module, exports) {
-
-exports.f = {}.propertyIsEnumerable;
-
-
-/***/ }),
-/* 627 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// 19.1.3.1 Object.assign(target, source)
-var $export = __webpack_require__(60);
-
-$export($export.S + $export.F, 'Object', { assign: __webpack_require__(624) });
-
-
-/***/ }),
-/* 628 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var arrayFindIndex = __webpack_require__(511);
-
-module.exports = function () {
-	var unhandledRejections = [];
-
-	function onUnhandledRejection(reason, promise) {
-		unhandledRejections.push({reason: reason, promise: promise});
-	}
-
-	function onRejectionHandled(promise) {
-		var index = arrayFindIndex(unhandledRejections, function (x) {
-			return x.promise === promise;
-		});
-
-		unhandledRejections.splice(index, 1);
-	}
-
-	function currentlyUnhandled() {
-		return unhandledRejections.map(function (entry) {
-			return {
-				reason: entry.reason,
-				promise: entry.promise
-			};
-		});
-	}
-
-	return {
-		onUnhandledRejection: onUnhandledRejection,
-		onRejectionHandled: onRejectionHandled,
-		currentlyUnhandled: currentlyUnhandled
-	};
-};
-
-
-/***/ }),
-/* 629 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var core = __webpack_require__(628);
-
-module.exports = function (p) {
-	p = p || process;
-	var c = core();
-
-	p.on('unhandledRejection', c.onUnhandledRejection);
-	p.on('rejectionHandled', c.onRejectionHandled);
-
-	return c.currentlyUnhandled;
-};
-
-
-/***/ }),
-/* 630 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var token = '%[a-f0-9]{2}';
-var singleMatcher = new RegExp(token, 'gi');
-var multiMatcher = new RegExp('(' + token + ')+', 'gi');
-
-function decodeComponents(components, split) {
-	try {
-		// Try to decode the entire string first
-		return decodeURIComponent(components.join(''));
-	} catch (err) {
-		// Do nothing
-	}
-
-	if (components.length === 1) {
-		return components;
-	}
-
-	split = split || 1;
-
-	// Split the array in 2 parts
-	var left = components.slice(0, split);
-	var right = components.slice(split);
-
-	return Array.prototype.concat.call([], decodeComponents(left), decodeComponents(right));
-}
-
-function decode(input) {
-	try {
-		return decodeURIComponent(input);
-	} catch (err) {
-		var tokens = input.match(singleMatcher);
-
-		for (var i = 1; i < tokens.length; i++) {
-			input = decodeComponents(tokens, i).join('');
-
-			tokens = input.match(singleMatcher);
-		}
-
-		return input;
-	}
-}
-
-function customDecodeURIComponent(input) {
-	// Keep track of all the replacements and prefill the map with the `BOM`
-	var replaceMap = {
-		'%FE%FF': '\uFFFD\uFFFD',
-		'%FF%FE': '\uFFFD\uFFFD'
-	};
-
-	var match = multiMatcher.exec(input);
-	while (match) {
-		try {
-			// Decode as big chunks as possible
-			replaceMap[match[0]] = decodeURIComponent(match[0]);
-		} catch (err) {
-			var result = decode(match[0]);
-
-			if (result !== match[0]) {
-				replaceMap[match[0]] = result;
-			}
-		}
-
-		match = multiMatcher.exec(input);
-	}
-
-	// Add `%C2` at the end of the map to make sure it does not replace the combinator before everything else
-	replaceMap['%C2'] = '\uFFFD';
-
-	var entries = Object.keys(replaceMap);
-
-	for (var i = 0; i < entries.length; i++) {
-		// Replace all decoded components
-		var key = entries[i];
-		input = input.replace(new RegExp(key, 'g'), replaceMap[key]);
-	}
-
-	return input;
-}
-
-module.exports = function (encodedURI) {
-	if (typeof encodedURI !== 'string') {
-		throw new TypeError('Expected `encodedURI` to be of type `string`, got `' + typeof encodedURI + '`');
-	}
-
-	try {
-		encodedURI = encodedURI.replace(/\+/g, ' ');
-
-		// Try the built in decoder first
-		return decodeURIComponent(encodedURI);
-	} catch (err) {
-		// Fallback to a more advanced decoder
-		return customDecodeURIComponent(encodedURI);
-	}
-};
-
-
-/***/ }),
-/* 631 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var pSlice = Array.prototype.slice;
-var objectKeys = __webpack_require__(633);
-var isArguments = __webpack_require__(632);
-
-var deepEqual = module.exports = function (actual, expected, opts) {
-  if (!opts) opts = {};
-  // 7.1. All identical values are equivalent, as determined by ===.
-  if (actual === expected) {
-    return true;
-
-  } else if (actual instanceof Date && expected instanceof Date) {
-    return actual.getTime() === expected.getTime();
-
-  // 7.3. Other pairs that do not both pass typeof value == 'object',
-  // equivalence is determined by ==.
-  } else if (!actual || !expected || typeof actual != 'object' && typeof expected != 'object') {
-    return opts.strict ? actual === expected : actual == expected;
-
-  // 7.4. For all other Object pairs, including Array objects, equivalence is
-  // determined by having the same number of owned properties (as verified
-  // with Object.prototype.hasOwnProperty.call), the same set of keys
-  // (although not necessarily the same order), equivalent values for every
-  // corresponding key, and an identical 'prototype' property. Note: this
-  // accounts for both named and indexed properties on Arrays.
-  } else {
-    return objEquiv(actual, expected, opts);
-  }
-}
-
-function isUndefinedOrNull(value) {
-  return value === null || value === undefined;
-}
-
-function isBuffer (x) {
-  if (!x || typeof x !== 'object' || typeof x.length !== 'number') return false;
-  if (typeof x.copy !== 'function' || typeof x.slice !== 'function') {
-    return false;
-  }
-  if (x.length > 0 && typeof x[0] !== 'number') return false;
-  return true;
-}
-
-function objEquiv(a, b, opts) {
-  var i, key;
-  if (isUndefinedOrNull(a) || isUndefinedOrNull(b))
-    return false;
-  // an identical 'prototype' property.
-  if (a.prototype !== b.prototype) return false;
-  //~~~I've managed to break Object.keys through screwy arguments passing.
-  //   Converting to array solves the problem.
-  if (isArguments(a)) {
-    if (!isArguments(b)) {
-      return false;
-    }
-    a = pSlice.call(a);
-    b = pSlice.call(b);
-    return deepEqual(a, b, opts);
-  }
-  if (isBuffer(a)) {
-    if (!isBuffer(b)) {
-      return false;
-    }
-    if (a.length !== b.length) return false;
-    for (i = 0; i < a.length; i++) {
-      if (a[i] !== b[i]) return false;
-    }
-    return true;
-  }
-  try {
-    var ka = objectKeys(a),
-        kb = objectKeys(b);
-  } catch (e) {//happens when one is a string literal and the other isn't
-    return false;
-  }
-  // having the same number of owned properties (keys incorporates
-  // hasOwnProperty)
-  if (ka.length != kb.length)
-    return false;
-  //the same set of keys (although not necessarily the same order),
-  ka.sort();
-  kb.sort();
-  //~~~cheap key test
-  for (i = ka.length - 1; i >= 0; i--) {
-    if (ka[i] != kb[i])
-      return false;
-  }
-  //equivalent values for every corresponding key, and
-  //~~~possibly expensive deep test
-  for (i = ka.length - 1; i >= 0; i--) {
-    key = ka[i];
-    if (!deepEqual(a[key], b[key], opts)) return false;
-  }
-  return typeof a === typeof b;
-}
-
-
-/***/ }),
-/* 632 */
-/***/ (function(module, exports) {
-
-var supportsArgumentsClass = (function(){
-  return Object.prototype.toString.call(arguments)
-})() == '[object Arguments]';
-
-exports = module.exports = supportsArgumentsClass ? supported : unsupported;
-
-exports.supported = supported;
-function supported(object) {
-  return Object.prototype.toString.call(object) == '[object Arguments]';
-};
-
-exports.unsupported = unsupported;
-function unsupported(object){
-  return object &&
-    typeof object == 'object' &&
-    typeof object.length == 'number' &&
-    Object.prototype.hasOwnProperty.call(object, 'callee') &&
-    !Object.prototype.propertyIsEnumerable.call(object, 'callee') ||
-    false;
-};
-
-
-/***/ }),
-/* 633 */
-/***/ (function(module, exports) {
-
-exports = module.exports = typeof Object.keys === 'function'
-  ? Object.keys : shim;
-
-exports.shim = shim;
-function shim (obj) {
-  var keys = [];
-  for (var key in obj) keys.push(key);
-  return keys;
-}
-
-
-/***/ }),
-/* 634 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Stream = __webpack_require__(23).Stream;
-var util = __webpack_require__(3);
-
-module.exports = DelayedStream;
-function DelayedStream() {
-  this.source = null;
-  this.dataSize = 0;
-  this.maxDataSize = 1024 * 1024;
-  this.pauseStream = true;
-
-  this._maxDataSizeExceeded = false;
-  this._released = false;
-  this._bufferedEvents = [];
-}
-util.inherits(DelayedStream, Stream);
-
-DelayedStream.create = function(source, options) {
-  var delayedStream = new this();
-
-  options = options || {};
-  for (var option in options) {
-    delayedStream[option] = options[option];
-  }
-
-  delayedStream.source = source;
-
-  var realEmit = source.emit;
-  source.emit = function() {
-    delayedStream._handleEmit(arguments);
-    return realEmit.apply(source, arguments);
-  };
-
-  source.on('error', function() {});
-  if (delayedStream.pauseStream) {
-    source.pause();
-  }
-
-  return delayedStream;
-};
-
-Object.defineProperty(DelayedStream.prototype, 'readable', {
-  configurable: true,
-  enumerable: true,
-  get: function() {
-    return this.source.readable;
-  }
-});
-
-DelayedStream.prototype.setEncoding = function() {
-  return this.source.setEncoding.apply(this.source, arguments);
-};
-
-DelayedStream.prototype.resume = function() {
-  if (!this._released) {
-    this.release();
-  }
-
-  this.source.resume();
-};
-
-DelayedStream.prototype.pause = function() {
-  this.source.pause();
-};
-
-DelayedStream.prototype.release = function() {
-  this._released = true;
-
-  this._bufferedEvents.forEach(function(args) {
-    this.emit.apply(this, args);
-  }.bind(this));
-  this._bufferedEvents = [];
-};
-
-DelayedStream.prototype.pipe = function() {
-  var r = Stream.prototype.pipe.apply(this, arguments);
-  this.resume();
-  return r;
-};
-
-DelayedStream.prototype._handleEmit = function(args) {
-  if (this._released) {
-    this.emit.apply(this, args);
-    return;
-  }
-
-  if (args[0] === 'data') {
-    this.dataSize += args[1].length;
-    this._checkIfMaxDataSizeExceeded();
-  }
-
-  this._bufferedEvents.push(args);
-};
-
-DelayedStream.prototype._checkIfMaxDataSizeExceeded = function() {
-  if (this._maxDataSizeExceeded) {
-    return;
-  }
-
-  if (this.dataSize <= this.maxDataSize) {
-    return;
-  }
-
-  this._maxDataSizeExceeded = true;
-  var message =
-    'DelayedStream#maxDataSize of ' + this.maxDataSize + ' bytes exceeded.'
-  this.emit('error', new Error(message));
-};
-
-
-/***/ }),
-/* 635 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// detect either spaces or tabs but not both to properly handle tabs
-// for indentation and spaces for alignment
-const INDENT_RE = /^(?:( )+|\t+)/;
-
-function getMostUsed(indents) {
-	let result = 0;
-	let maxUsed = 0;
-	let maxWeight = 0;
-
-	for (const entry of indents) {
-		// TODO: use destructuring when targeting Node.js 6
-		const key = entry[0];
-		const val = entry[1];
-
-		const u = val[0];
-		const w = val[1];
-
-		if (u > maxUsed || (u === maxUsed && w > maxWeight)) {
-			maxUsed = u;
-			maxWeight = w;
-			result = Number(key);
-		}
-	}
-
-	return result;
-}
-
-module.exports = str => {
-	if (typeof str !== 'string') {
-		throw new TypeError('Expected a string');
-	}
-
-	// used to see if tabs or spaces are the most used
-	let tabs = 0;
-	let spaces = 0;
-
-	// remember the size of previous line's indentation
-	let prev = 0;
-
-	// remember how many indents/unindents as occurred for a given size
-	// and how much lines follow a given indentation
-	//
-	// indents = {
-	//    3: [1, 0],
-	//    4: [1, 5],
-	//    5: [1, 0],
-	//   12: [1, 0],
-	// }
-	const indents = new Map();
-
-	// pointer to the array of last used indent
-	let current;
-
-	// whether the last action was an indent (opposed to an unindent)
-	let isIndent;
-
-	for (const line of str.split(/\n/g)) {
-		if (!line) {
-			// ignore empty lines
-			continue;
-		}
-
-		let indent;
-		const matches = line.match(INDENT_RE);
-
-		if (matches) {
-			indent = matches[0].length;
-
-			if (matches[1]) {
-				spaces++;
-			} else {
-				tabs++;
-			}
-		} else {
-			indent = 0;
-		}
-
-		const diff = indent - prev;
-		prev = indent;
-
-		if (diff) {
-			// an indent or unindent has been detected
-
-			isIndent = diff > 0;
-
-			current = indents.get(isIndent ? diff : -diff);
-
-			if (current) {
-				current[0]++;
-			} else {
-				current = [1, 0];
-				indents.set(diff, current);
-			}
-		} else if (current) {
-			// if the last action was an indent, increment the weight
-			current[1] += Number(isIndent);
-		}
-	}
-
-	const amount = getMostUsed(indents);
-
-	let type;
-	let indent;
-	if (!amount) {
-		type = null;
-		indent = '';
-	} else if (spaces >= tabs) {
-		type = 'space';
-		indent = ' '.repeat(amount);
-	} else {
-		type = 'tab';
-		indent = '\t'.repeat(amount);
-	}
-
-	return {
-		amount,
-		type,
-		indent
-	};
-};
-
-
-/***/ }),
-/* 636 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
-* Copyright (c) 2013, Yahoo! Inc. All rights reserved.
-* Copyrights licensed under the New BSD License.
-* See the accompanying LICENSE file for terms.
-*/
-
-var CacheObject = function (conf) {
-    conf = conf || {};
-    conf.ttl = parseInt(conf.ttl, 10) || 300; //0 is not permissible
-    conf.cachesize = parseInt(conf.cachesize, 10) || 1000; //0 is not permissible
-    
-    this.ttl = conf.ttl * 1000;
-    this.max = conf.cachesize;
-
-    this.count = 0;
-    this.data = {};
-    var next = __webpack_require__(512);
-
-    this.set = function (key, value, callback) {
-        var self = this;
-        next(function () {
-            if (self.data[key]) {
-                if (self.data[key].newer) {
-                    if (self.data[key].older) {
-                        self.data[key].newer.older = self.data[key].older;
-                        self.data[key].older.newer = self.data[key].newer;
-                    } else {
-                        self.tail = self.data[key].newer;
-                        delete self.tail.older;
-                    }
-
-                    self.data[key].older = self.head;
-                    self.head.newer = self.data[key];
-                    delete self.data[key].newer;
-                    self.head = self.data[key];
-                }
-
-                self.head.val = value;
-                self.head.hit = 0;
-                self.head.ts = Date.now();
-            } else {
-                // key is not exist
-                self.data[key] = {
-                    "key" : key,
-                    "val" : value,
-                    "hit" : 0,
-                    "ts" : Date.now()
-                };
-
-                if (!self.head) {
-                    // cache is empty
-                    self.head = self.data[key];
-                    self.tail = self.data[key];
-                } else {
-                    // insert the new entry to the front
-                    self.head.newer = self.data[key];
-                    self.data[key].older = self.head;
-                    self.head = self.data[key];
-                }
-
-                if (self.count >= self.max) {
-                    // remove the tail
-                    var temp = self.tail;
-                    self.tail = self.tail.newer;
-                    delete self.tail.next;
-                    delete self.data[temp.key];
-                } else {
-                    self.count = self.count + 1;
-                }
-            }
-            /* jshint -W030 */
-            callback && callback(null, value);
-        });
-    };
-
-    this.get = function (key, callback) {
-        var self = this;
-        if (!callback) {
-            throw('cache.get callback is required.');
-        }
-
-        next(function () {
-            if (!self.data[key]) {
-                return callback(null, undefined);
-            }
-            var value;
-            if (conf.ttl !== 0 && (Date.now() - self.data[key].ts) >= self.ttl) {
-                if (self.data[key].newer) {
-                    if (self.data[key].older) {
-                        // in the middle of the list
-                        self.data[key].newer.older = self.data[key].older;
-                        self.data[key].older.newer = self.data[key].newer;
-                    } else {
-                        // tail
-                        self.tail = self.data[key].newer;
-                        delete self.tail.older;
-                    }
-                } else {
-                    // the first item
-                    if (self.data[key].older) {
-                        self.head = self.data[key].older;
-                        delete self.head.newer;
-                    } else {
-                        // 1 items
-                        delete self.head;
-                        delete self.tail;
-                    }
-                }
-
-                delete self.data[key];
-                self.count = self.count - 1;
-            } else {
-                self.data[key].hit = self.data[key].hit + 1;
-                value = self.data[key].val;
-            }
-            callback(null, value);
-        });
-    };
-};
-
-module.exports = CacheObject;
-
-
-/***/ }),
-/* 637 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
-* Copyright (c) 2013, Yahoo! Inc. All rights reserved.
-* Copyrights licensed under the New BSD License.
-* See the accompanying LICENSE file for terms.
-*/
-
-var CacheObject = __webpack_require__(636),
-    deepCopy = __webpack_require__(749),
-    dns = __webpack_require__(964);
-
-
-// original function storage
-var EnhanceDns = function (conf) {
-        conf = conf || {};
-        conf.ttl = parseInt(conf.ttl, 10) || 300; //0 is not allowed ie it ttl is set to 0, it will take the default
-        conf.cachesize = parseInt(conf.cachesize, 10); //0 is allowed but it will disable the caching
-
-        if (isNaN(conf.cachesize)) {
-            conf.cachesize = 1000; //set default cache size to 1000 records max
-        }
-        if (!conf.enable || conf.cachesize <= 0 || dns.internalCache) {
-            //cache already exists, means this code has already execute ie method are already overwritten
-            return dns;
-        }
-        
-        // original function storage
-        var backup_object = {
-                lookup : dns.lookup,
-                resolve : dns.resolve,
-                resolve4 : dns.resolve4,
-                resolve6 : dns.resolve6,
-                resolveMx : dns.resolveMx,
-                resolveTxt : dns.resolveTxt,
-                resolveSrv : dns.resolveSrv,
-                resolveNs : dns.resolveNs,
-                resolveCname : dns.resolveCname,
-                reverse : dns.reverse
-            },
-            // cache storage instance
-            cache = conf.cache ? /*istanbul ignore next*/ new conf.cache(conf) : new CacheObject(conf);
-        
-        // insert cache object to the instance
-        dns.internalCache = cache;
-
-        // override dns.lookup method
-        dns.lookup = function (domain, options, callback) {
-            var family = 0;
-            var hints = 0;
-            var all = false;
-            if (arguments.length === 2) {
-                callback = options;
-                options = family;
-            } else if (typeof options === 'object') {
-                if (options.family) {
-                    family = +options.family;
-                    if (family !== 4 && family !== 6) {
-                        callback(new Error('invalid argument: `family` must be 4 or 6'));
-                        return;
-                    }
-                }
-                /*istanbul ignore next - "hints" require node 0.12+*/
-                if (options.hints) {
-                    hints = +options.hints;
-                }
-                all = (options.all === true);
-            } else if (options) {
-                family = +options;
-                if (family !== 4 && family !== 6) {
-                    callback(new Error('invalid argument: `family` must be 4 or 6'));
-                    return;
-                }
-            }
-
-            cache.get('lookup_' + domain + '_' + family + '_' + hints + '_' + all, function (error, record) {
-                if (record) {
-                    /*istanbul ignore next - "all" option require node 4+*/
-                    if (Array.isArray(record)) {
-                        return callback(error, record);
-                    }
-                    return callback(error, record.address, record.family);
-                }
-
-                try{
-                    backup_object.lookup(domain, options, function (err, address, family_r) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        var value;
-                        /*istanbul ignore next - "all" option require node 4+*/
-                        if (Array.isArray(address)) {
-                            value = address;
-                        } else {
-                            value = {
-                                'address' : address,
-                                'family' : family_r
-                            };
-                        }
-                        cache.set('lookup_' + domain + '_' + family + '_' + hints + '_' +  all, value, function () {
-                            callback(err, address, family_r);
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolve method
-        dns.resolve = function (domain, type, callback) {
-            var type_new, callback_new;
-
-            if (typeof type === 'string') {
-                type_new = type;
-                callback_new = callback;
-            } else {
-                type_new = "A";
-                callback_new = type;
-            }
-
-            cache.get('resolve_' + domain + '_' + type_new, function (error, record) {
-                if (record) {
-                    return callback_new(error, deepCopy(record), true);
-                }
-                try {
-                    backup_object.resolve(domain, type_new, function (err, addresses) {
-                        if (err) {
-                            return callback_new(err);
-                        }
-                        cache.set('resolve_' + domain + '_' + type_new, addresses, function () {
-                            callback_new(err, deepCopy(addresses), false);
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback_new(err);
-                }
-            });
-        };
-
-        // override dns.resolve4 method
-        dns.resolve4 = function (domain, callback) {
-            cache.get('resolve4_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolve4(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolve4_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolve6 method
-        dns.resolve6 = function (domain, callback) {
-            cache.get('resolve6_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolve6(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolve6_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolveMx method
-        dns.resolveMx = function (domain, callback) {
-            cache.get('resolveMx_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolveMx(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolveMx_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolveTxt method
-        dns.resolveTxt = function (domain, callback) {
-            cache.get('resolveTxt_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolveTxt(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolveTxt_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolveSrv method
-        dns.resolveSrv = function (domain, callback) {
-            cache.get('resolveSrv_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolveSrv(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolveSrv_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolveNs method
-        dns.resolveNs = function (domain, callback) {
-            cache.get('resolveNs_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolveNs(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolveNs_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.resolveCname method
-        dns.resolveCname = function (domain, callback) {
-            cache.get('resolveCname_' + domain, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.resolveCname(domain, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('resolveCname_' + domain, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-
-        // override dns.reverse method
-        dns.reverse = function (ip, callback) {
-            cache.get('reverse_' + ip, function (error, record) {
-                if (record) {
-                    return callback(error, deepCopy(record));
-                }
-                try {
-                    backup_object.reverse(ip, function (err, addresses) {
-                        if (err) {
-                            return callback(err);
-                        }
-                        cache.set('reverse_' + ip, addresses, function () {
-                            callback(err, deepCopy(addresses));
-                        });
-                    });
-                } catch (err) {
-                    /*istanbul ignore next - doesn't throw in node 0.10*/
-                    callback(err);
-                }
-            });
-        };
-        return dns;
-};
-
-module.exports = function(conf) {
-    return new EnhanceDns(conf);
-};
-
-
-/***/ }),
-/* 638 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Named EC curves
-
-// Requires ec.js, jsbn.js, and jsbn2.js
-var BigInteger = __webpack_require__(81).BigInteger
-var ECCurveFp = __webpack_require__(139).ECCurveFp
-
-
-// ----------------
-// X9ECParameters
-
-// constructor
-function X9ECParameters(curve,g,n,h) {
-    this.curve = curve;
-    this.g = g;
-    this.n = n;
-    this.h = h;
-}
-
-function x9getCurve() {
-    return this.curve;
-}
-
-function x9getG() {
-    return this.g;
-}
-
-function x9getN() {
-    return this.n;
-}
-
-function x9getH() {
-    return this.h;
-}
-
-X9ECParameters.prototype.getCurve = x9getCurve;
-X9ECParameters.prototype.getG = x9getG;
-X9ECParameters.prototype.getN = x9getN;
-X9ECParameters.prototype.getH = x9getH;
-
-// ----------------
-// SECNamedCurves
-
-function fromHex(s) { return new BigInteger(s, 16); }
-
-function secp128r1() {
-    // p = 2^128 - 2^97 - 1
-    var p = fromHex("FFFFFFFDFFFFFFFFFFFFFFFFFFFFFFFF");
-    var a = fromHex("FFFFFFFDFFFFFFFFFFFFFFFFFFFFFFFC");
-    var b = fromHex("E87579C11079F43DD824993C2CEE5ED3");
-    //byte[] S = Hex.decode("000E0D4D696E6768756151750CC03A4473D03679");
-    var n = fromHex("FFFFFFFE0000000075A30D1B9038A115");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-                + "161FF7528B899B2D0C28607CA52C5B86"
-		+ "CF5AC8395BAFEB13C02DA292DDED7A83");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-function secp160k1() {
-    // p = 2^160 - 2^32 - 2^14 - 2^12 - 2^9 - 2^8 - 2^7 - 2^3 - 2^2 - 1
-    var p = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFAC73");
-    var a = BigInteger.ZERO;
-    var b = fromHex("7");
-    //byte[] S = null;
-    var n = fromHex("0100000000000000000001B8FA16DFAB9ACA16B6B3");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-                + "3B4C382CE37AA192A4019E763036F4F5DD4D7EBB"
-                + "938CF935318FDCED6BC28286531733C3F03C4FEE");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-function secp160r1() {
-    // p = 2^160 - 2^31 - 1
-    var p = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF7FFFFFFF");
-    var a = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF7FFFFFFC");
-    var b = fromHex("1C97BEFC54BD7A8B65ACF89F81D4D4ADC565FA45");
-    //byte[] S = Hex.decode("1053CDE42C14D696E67687561517533BF3F83345");
-    var n = fromHex("0100000000000000000001F4C8F927AED3CA752257");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-		+ "4A96B5688EF573284664698968C38BB913CBFC82"
-		+ "23A628553168947D59DCC912042351377AC5FB32");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-function secp192k1() {
-    // p = 2^192 - 2^32 - 2^12 - 2^8 - 2^7 - 2^6 - 2^3 - 1
-    var p = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFEE37");
-    var a = BigInteger.ZERO;
-    var b = fromHex("3");
-    //byte[] S = null;
-    var n = fromHex("FFFFFFFFFFFFFFFFFFFFFFFE26F2FC170F69466A74DEFD8D");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-                + "DB4FF10EC057E9AE26B07D0280B7F4341DA5D1B1EAE06C7D"
-                + "9B2F2F6D9C5628A7844163D015BE86344082AA88D95E2F9D");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-function secp192r1() {
-    // p = 2^192 - 2^64 - 1
-    var p = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFFFFFFFFFFFF");
-    var a = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFFFFFFFFFFFC");
-    var b = fromHex("64210519E59C80E70FA7E9AB72243049FEB8DEECC146B9B1");
-    //byte[] S = Hex.decode("3045AE6FC8422F64ED579528D38120EAE12196D5");
-    var n = fromHex("FFFFFFFFFFFFFFFFFFFFFFFF99DEF836146BC9B1B4D22831");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-                + "188DA80EB03090F67CBF20EB43A18800F4FF0AFD82FF1012"
-                + "07192B95FFC8DA78631011ED6B24CDD573F977A11E794811");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-function secp224r1() {
-    // p = 2^224 - 2^96 + 1
-    var p = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFF000000000000000000000001");
-    var a = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFFFFFEFFFFFFFFFFFFFFFFFFFFFFFE");
-    var b = fromHex("B4050A850C04B3ABF54132565044B0B7D7BFD8BA270B39432355FFB4");
-    //byte[] S = Hex.decode("BD71344799D5C7FCDC45B59FA3B9AB8F6A948BC5");
-    var n = fromHex("FFFFFFFFFFFFFFFFFFFFFFFFFFFF16A2E0B8F03E13DD29455C5C2A3D");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-                + "B70E0CBD6BB4BF7F321390B94A03C1D356C21122343280D6115C1D21"
-                + "BD376388B5F723FB4C22DFE6CD4375A05A07476444D5819985007E34");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-function secp256r1() {
-    // p = 2^224 (2^32 - 1) + 2^192 + 2^96 - 1
-    var p = fromHex("FFFFFFFF00000001000000000000000000000000FFFFFFFFFFFFFFFFFFFFFFFF");
-    var a = fromHex("FFFFFFFF00000001000000000000000000000000FFFFFFFFFFFFFFFFFFFFFFFC");
-    var b = fromHex("5AC635D8AA3A93E7B3EBBD55769886BC651D06B0CC53B0F63BCE3C3E27D2604B");
-    //byte[] S = Hex.decode("C49D360886E704936A6678E1139D26B7819F7E90");
-    var n = fromHex("FFFFFFFF00000000FFFFFFFFFFFFFFFFBCE6FAADA7179E84F3B9CAC2FC632551");
-    var h = BigInteger.ONE;
-    var curve = new ECCurveFp(p, a, b);
-    var G = curve.decodePointHex("04"
-                + "6B17D1F2E12C4247F8BCE6E563A440F277037D812DEB33A0F4A13945D898C296"
-		+ "4FE342E2FE1A7F9B8EE7EB4A7C0F9E162BCE33576B315ECECBB6406837BF51F5");
-    return new X9ECParameters(curve, G, n, h);
-}
-
-// TODO: make this into a proper hashtable
-function getSECCurveByName(name) {
-    if(name == "secp128r1") return secp128r1();
-    if(name == "secp160k1") return secp160k1();
-    if(name == "secp160r1") return secp160r1();
-    if(name == "secp192k1") return secp192k1();
-    if(name == "secp192r1") return secp192r1();
-    if(name == "secp224r1") return secp224r1();
-    if(name == "secp256r1") return secp256r1();
-    return null;
-}
-
-module.exports = {
-  "secp128r1":secp128r1,
-  "secp160k1":secp160k1,
-  "secp160r1":secp160r1,
-  "secp192k1":secp192k1,
-  "secp192r1":secp192r1,
-  "secp224r1":secp224r1,
-  "secp256r1":secp256r1
-}
-
-
-/***/ }),
-/* 639 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * expand-brackets <https://github.com/jonschlinkert/expand-brackets>
- *
- * Copyright (c) 2015 Jon Schlinkert.
- * Licensed under the MIT license.
- */
-
-
-
-var isPosixBracket = __webpack_require__(739);
-
-/**
- * POSIX character classes
- */
-
-var POSIX = {
-  alnum: 'a-zA-Z0-9',
-  alpha: 'a-zA-Z',
-  blank: ' \\t',
-  cntrl: '\\x00-\\x1F\\x7F',
-  digit: '0-9',
-  graph: '\\x21-\\x7E',
-  lower: 'a-z',
-  print: '\\x20-\\x7E',
-  punct: '-!"#$%&\'()\\*+,./:;<=>?@[\\]^_`{|}~',
-  space: ' \\t\\r\\n\\v\\f',
-  upper: 'A-Z',
-  word:  'A-Za-z0-9_',
-  xdigit: 'A-Fa-f0-9',
-};
-
-/**
- * Expose `brackets`
- */
-
-module.exports = brackets;
-
-function brackets(str) {
-  if (!isPosixBracket(str)) {
-    return str;
-  }
-
-  var negated = false;
-  if (str.indexOf('[^') !== -1) {
-    negated = true;
-    str = str.split('[^').join('[');
-  }
-  if (str.indexOf('[!') !== -1) {
-    negated = true;
-    str = str.split('[!').join('[');
-  }
-
-  var a = str.split('[');
-  var b = str.split(']');
-  var imbalanced = a.length !== b.length;
-
-  var parts = str.split(/(?::\]\[:|\[?\[:|:\]\]?)/);
-  var len = parts.length, i = 0;
-  var end = '', beg = '';
-  var res = [];
-
-  // start at the end (innermost) first
-  while (len--) {
-    var inner = parts[i++];
-    if (inner === '^[!' || inner === '[!') {
-      inner = '';
-      negated = true;
-    }
-
-    var prefix = negated ? '^' : '';
-    var ch = POSIX[inner];
-
-    if (ch) {
-      res.push('[' + prefix + ch + ']');
-    } else if (inner) {
-      if (/^\[?\w-\w\]?$/.test(inner)) {
-        if (i === parts.length) {
-          res.push('[' + prefix + inner);
-        } else if (i === 1) {
-          res.push(prefix + inner + ']');
-        } else {
-          res.push(prefix + inner);
-        }
-      } else {
-        if (i === 1) {
-          beg += inner;
-        } else if (i === parts.length) {
-          end += inner;
-        } else {
-          res.push('[' + prefix + inner + ']');
-        }
-      }
-    }
-  }
-
-  var result = res.join('|');
-  var rlen = res.length || 1;
-  if (rlen > 1) {
-    result = '(?:' + result + ')';
-    rlen = 1;
-  }
-  if (beg) {
-    rlen++;
-    if (beg.charAt(0) === '[') {
-      if (imbalanced) {
-        beg = '\\[' + beg.slice(1);
-      } else {
-        beg += ']';
-      }
-    }
-    result = beg + result;
-  }
-  if (end) {
-    rlen++;
-    if (end.slice(-1) === ']') {
-      if (imbalanced) {
-        end = end.slice(0, end.length - 1) + '\\]';
-      } else {
-        end = '[' + end;
-      }
-    }
-    result += end;
-  }
-
-  if (rlen > 1) {
-    result = result.split('][').join(']|[');
-    if (result.indexOf('|') !== -1 && !/\(\?/.test(result)) {
-      result = '(?:' + result + ')';
-    }
-  }
-
-  result = result.replace(/\[+=|=\]+/g, '\\b');
-  return result;
-}
-
-brackets.makeRe = function(pattern) {
-  try {
-    return new RegExp(brackets(pattern));
-  } catch (err) {}
-};
-
-brackets.isMatch = function(str, pattern) {
-  try {
-    return brackets.makeRe(pattern).test(str);
-  } catch (err) {
-    return false;
-  }
-};
-
-brackets.match = function(arr, pattern) {
-  var len = arr.length, i = 0;
-  var res = arr.slice();
-
-  var re = brackets.makeRe(pattern);
-  while (i < len) {
-    var ele = arr[i++];
-    if (!re.test(ele)) {
-      continue;
-    }
-    res.splice(i, 1);
-  }
-  return res;
-};
-
-
-/***/ }),
-/* 640 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * expand-range <https://github.com/jonschlinkert/expand-range>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT license.
- */
-
-
-
-var fill = __webpack_require__(641);
-
-module.exports = function expandRange(str, options, fn) {
-  if (typeof str !== 'string') {
-    throw new TypeError('expand-range expects a string.');
-  }
-
-  if (typeof options === 'function') {
-    fn = options;
-    options = {};
-  }
-
-  if (typeof options === 'boolean') {
-    options = {};
-    options.makeRe = true;
-  }
-
-  // create arguments to pass to fill-range
-  var opts = options || {};
-  var args = str.split('..');
-  var len = args.length;
-  if (len > 3) { return str; }
-
-  // if only one argument, it can't expand so return it
-  if (len === 1) { return args; }
-
-  // if `true`, tell fill-range to regexify the string
-  if (typeof fn === 'boolean' && fn === true) {
-    opts.makeRe = true;
-  }
-
-  args.push(opts);
-  return fill.apply(null, args.concat(fn));
-};
-
-
-/***/ }),
-/* 641 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * fill-range <https://github.com/jonschlinkert/fill-range>
- *
- * Copyright (c) 2014-2018, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-var isObject = __webpack_require__(643);
-var isNumber = __webpack_require__(642);
-var randomize = __webpack_require__(787);
-var repeatStr = __webpack_require__(797);
-var repeat = __webpack_require__(411);
-
-/**
- * Expose `fillRange`
- */
-
-module.exports = fillRange;
-
-/**
- * Return a range of numbers or letters.
- *
- * @param  {String} `a` Start of the range
- * @param  {String} `b` End of the range
- * @param  {String} `step` Increment or decrement to use.
- * @param  {Function} `fn` Custom function to modify each element in the range.
- * @return {Array}
- */
-
-function fillRange(a, b, step, options, fn) {
-  if (a == null || b == null) {
-    throw new Error('fill-range expects the first and second args to be strings.');
-  }
-
-  if (typeof step === 'function') {
-    fn = step; options = {}; step = null;
-  }
-
-  if (typeof options === 'function') {
-    fn = options; options = {};
-  }
-
-  if (isObject(step)) {
-    options = step; step = '';
-  }
-
-  var expand, regex = false, sep = '';
-  var opts = options || {};
-
-  if (typeof opts.silent === 'undefined') {
-    opts.silent = true;
-  }
-
-  step = step || opts.step;
-
-  // store a ref to unmodified arg
-  var origA = a, origB = b;
-
-  b = (b.toString() === '-0') ? 0 : b;
-
-  if (opts.optimize || opts.makeRe) {
-    step = step ? (step += '~') : step;
-    expand = true;
-    regex = true;
-    sep = '~';
-  }
-
-  // handle special step characters
-  if (typeof step === 'string') {
-    var match = stepRe().exec(step);
-
-    if (match) {
-      var i = match.index;
-      var m = match[0];
-
-      // repeat string
-      if (m === '+') {
-        return repeat(a, b);
-
-      // randomize a, `b` times
-      } else if (m === '?') {
-        return [randomize(a, b)];
-
-      // expand right, no regex reduction
-      } else if (m === '>') {
-        step = step.substr(0, i) + step.substr(i + 1);
-        expand = true;
-
-      // expand to an array, or if valid create a reduced
-      // string for a regex logic `or`
-      } else if (m === '|') {
-        step = step.substr(0, i) + step.substr(i + 1);
-        expand = true;
-        regex = true;
-        sep = m;
-
-      // expand to an array, or if valid create a reduced
-      // string for a regex range
-      } else if (m === '~') {
-        step = step.substr(0, i) + step.substr(i + 1);
-        expand = true;
-        regex = true;
-        sep = m;
-      }
-    } else if (!isNumber(step)) {
-      if (!opts.silent) {
-        throw new TypeError('fill-range: invalid step.');
-      }
-      return null;
-    }
-  }
-
-  if (/[.&*()[\]^%$#@!]/.test(a) || /[.&*()[\]^%$#@!]/.test(b)) {
-    if (!opts.silent) {
-      throw new RangeError('fill-range: invalid range arguments.');
-    }
-    return null;
-  }
-
-  // has neither a letter nor number, or has both letters and numbers
-  // this needs to be after the step logic
-  if (!noAlphaNum(a) || !noAlphaNum(b) || hasBoth(a) || hasBoth(b)) {
-    if (!opts.silent) {
-      throw new RangeError('fill-range: invalid range arguments.');
-    }
-    return null;
-  }
-
-  // validate arguments
-  var isNumA = isNumber(zeros(a));
-  var isNumB = isNumber(zeros(b));
-
-  if ((!isNumA && isNumB) || (isNumA && !isNumB)) {
-    if (!opts.silent) {
-      throw new TypeError('fill-range: first range argument is incompatible with second.');
-    }
-    return null;
-  }
-
-  // by this point both are the same, so we
-  // can use A to check going forward.
-  var isNum = isNumA;
-  var num = formatStep(step);
-
-  // is the range alphabetical? or numeric?
-  if (isNum) {
-    // if numeric, coerce to an integer
-    a = +a; b = +b;
-  } else {
-    // otherwise, get the charCode to expand alpha ranges
-    a = a.charCodeAt(0);
-    b = b.charCodeAt(0);
-  }
-
-  // is the pattern descending?
-  var isDescending = a > b;
-
-  // don't create a character class if the args are < 0
-  if (a < 0 || b < 0) {
-    expand = false;
-    regex = false;
-  }
-
-  // detect padding
-  var padding = isPadded(origA, origB);
-  var res, pad, arr = [];
-  var ii = 0;
-
-  // character classes, ranges and logical `or`
-  if (regex) {
-    if (shouldExpand(a, b, num, isNum, padding, opts)) {
-      // make sure the correct separator is used
-      if (sep === '|' || sep === '~') {
-        sep = detectSeparator(a, b, num, isNum, isDescending);
-      }
-      return wrap([origA, origB], sep, opts);
-    }
-  }
-
-  while (isDescending ? (a >= b) : (a <= b)) {
-    if (padding && isNum) {
-      pad = padding(a);
-    }
-
-    // custom function
-    if (typeof fn === 'function') {
-      res = fn(a, isNum, pad, ii++);
-
-    // letters
-    } else if (!isNum) {
-      if (regex && isInvalidChar(a)) {
-        res = null;
-      } else {
-        res = String.fromCharCode(a);
-      }
-
-    // numbers
-    } else {
-      res = formatPadding(a, pad);
-    }
-
-    // add result to the array, filtering any nulled values
-    if (res !== null) arr.push(res);
-
-    // increment or decrement
-    if (isDescending) {
-      a -= num;
-    } else {
-      a += num;
-    }
-  }
-
-  // now that the array is expanded, we need to handle regex
-  // character classes, ranges or logical `or` that wasn't
-  // already handled before the loop
-  if ((regex || expand) && !opts.noexpand) {
-    // make sure the correct separator is used
-    if (sep === '|' || sep === '~') {
-      sep = detectSeparator(a, b, num, isNum, isDescending);
-    }
-    if (arr.length === 1 || a < 0 || b < 0) { return arr; }
-    return wrap(arr, sep, opts);
-  }
-
-  return arr;
-}
-
-/**
- * Wrap the string with the correct regex
- * syntax.
- */
-
-function wrap(arr, sep, opts) {
-  if (sep === '~') { sep = '-'; }
-  var str = arr.join(sep);
-  var pre = opts && opts.regexPrefix;
-
-  // regex logical `or`
-  if (sep === '|') {
-    str = pre ? pre + str : str;
-    str = '(' + str + ')';
-  }
-
-  // regex character class
-  if (sep === '-') {
-    str = (pre && pre === '^')
-      ? pre + str
-      : str;
-    str = '[' + str + ']';
-  }
-  return [str];
-}
-
-/**
- * Check for invalid characters
- */
-
-function isCharClass(a, b, step, isNum, isDescending) {
-  if (isDescending) { return false; }
-  if (isNum) { return a <= 9 && b <= 9; }
-  if (a < b) { return step === 1; }
-  return false;
-}
-
-/**
- * Detect the correct separator to use
- */
-
-function shouldExpand(a, b, num, isNum, padding, opts) {
-  if (isNum && (a > 9 || b > 9)) { return false; }
-  return !padding && num === 1 && a < b;
-}
-
-/**
- * Detect the correct separator to use
- */
-
-function detectSeparator(a, b, step, isNum, isDescending) {
-  var isChar = isCharClass(a, b, step, isNum, isDescending);
-  if (!isChar) {
-    return '|';
-  }
-  return '~';
-}
-
-/**
- * Correctly format the step based on type
- */
-
-function formatStep(step) {
-  return Math.abs(step >> 0) || 1;
-}
-
-/**
- * Format padding, taking leading `-` into account
- */
-
-function formatPadding(ch, pad) {
-  var res = pad ? pad + ch : ch;
-  if (pad && ch.toString().charAt(0) === '-') {
-    res = '-' + pad + ch.toString().substr(1);
-  }
-  return res.toString();
-}
-
-/**
- * Check for invalid characters
- */
-
-function isInvalidChar(str) {
-  var ch = toStr(str);
-  return ch === '\\'
-    || ch === '['
-    || ch === ']'
-    || ch === '^'
-    || ch === '('
-    || ch === ')'
-    || ch === '`';
-}
-
-/**
- * Convert to a string from a charCode
- */
-
-function toStr(ch) {
-  return String.fromCharCode(ch);
-}
-
-
-/**
- * Step regex
- */
-
-function stepRe() {
-  return /\?|>|\||\+|\~/g;
-}
-
-/**
- * Return true if `val` has either a letter
- * or a number
- */
-
-function noAlphaNum(val) {
-  return /[a-z0-9]/i.test(val);
-}
-
-/**
- * Return true if `val` has both a letter and
- * a number (invalid)
- */
-
-function hasBoth(val) {
-  return /[a-z][0-9]|[0-9][a-z]/i.test(val);
-}
-
-/**
- * Normalize zeros for checks
- */
-
-function zeros(val) {
-  if (/^-*0+$/.test(val.toString())) {
-    return '0';
-  }
-  return val;
-}
-
-/**
- * Return true if `val` has leading zeros,
- * or a similar valid pattern.
- */
-
-function hasZeros(val) {
-  return /[^.]\.|^-*0+[0-9]/.test(val);
-}
-
-/**
- * If the string is padded, returns a curried function with
- * the a cached padding string, or `false` if no padding.
- *
- * @param  {*} `origA` String or number.
- * @return {String|Boolean}
- */
-
-function isPadded(origA, origB) {
-  if (hasZeros(origA) || hasZeros(origB)) {
-    var alen = length(origA);
-    var blen = length(origB);
-
-    var len = alen >= blen
-      ? alen
-      : blen;
-
-    return function (a) {
-      return repeatStr('0', len - length(a));
-    };
-  }
-  return false;
-}
-
-/**
- * Get the string length of `val`
- */
-
-function length(val) {
-  return val.toString().length;
-}
-
-
-/***/ }),
-/* 642 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * is-number <https://github.com/jonschlinkert/is-number>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var typeOf = __webpack_require__(179);
-
-module.exports = function isNumber(num) {
-  var type = typeOf(num);
-  if (type !== 'number' && type !== 'string') {
-    return false;
-  }
-  var n = +num;
-  return (n - n + 1) >= 0 && num !== '';
-};
-
-
-/***/ }),
-/* 643 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * isobject <https://github.com/jonschlinkert/isobject>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var isArray = __webpack_require__(398);
-
-module.exports = function isObject(val) {
-  return val != null && typeof val === 'object' && isArray(val) === false;
-};
-
-
-/***/ }),
-/* 644 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * extglob <https://github.com/jonschlinkert/extglob>
- *
- * Copyright (c) 2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-/**
- * Module dependencies
- */
-
-var isExtglob = __webpack_require__(177);
-var re, cache = {};
-
-/**
- * Expose `extglob`
- */
-
-module.exports = extglob;
-
-/**
- * Convert the given extglob `string` to a regex-compatible
- * string.
- *
- * ```js
- * var extglob = require('extglob');
- * extglob('!(a?(b))');
- * //=> '(?!a(?:b)?)[^/]*?'
- * ```
- *
- * @param {String} `str` The string to convert.
- * @param {Object} `options`
- *   @option {Boolean} [options] `esc` If `false` special characters will not be escaped. Defaults to `true`.
- *   @option {Boolean} [options] `regex` If `true` a regular expression is returned instead of a string.
- * @return {String}
- * @api public
- */
-
-
-function extglob(str, opts) {
-  opts = opts || {};
-  var o = {}, i = 0;
-
-  // fix common character reversals
-  // '*!(.js)' => '*.!(js)'
-  str = str.replace(/!\(([^\w*()])/g, '$1!(');
-
-  // support file extension negation
-  str = str.replace(/([*\/])\.!\([*]\)/g, function (m, ch) {
-    if (ch === '/') {
-      return escape('\\/[^.]+');
-    }
-    return escape('[^.]+');
-  });
-
-  // create a unique key for caching by
-  // combining the string and options
-  var key = str
-    + String(!!opts.regex)
-    + String(!!opts.contains)
-    + String(!!opts.escape);
-
-  if (cache.hasOwnProperty(key)) {
-    return cache[key];
-  }
-
-  if (!(re instanceof RegExp)) {
-    re = regex();
-  }
-
-  opts.negate = false;
-  var m;
-
-  while (m = re.exec(str)) {
-    var prefix = m[1];
-    var inner = m[3];
-    if (prefix === '!') {
-      opts.negate = true;
-    }
-
-    var id = '__EXTGLOB_' + (i++) + '__';
-    // use the prefix of the _last_ (outtermost) pattern
-    o[id] = wrap(inner, prefix, opts.escape);
-    str = str.split(m[0]).join(id);
-  }
-
-  var keys = Object.keys(o);
-  var len = keys.length;
-
-  // we have to loop again to allow us to convert
-  // patterns in reverse order (starting with the
-  // innermost/last pattern first)
-  while (len--) {
-    var prop = keys[len];
-    str = str.split(prop).join(o[prop]);
-  }
-
-  var result = opts.regex
-    ? toRegex(str, opts.contains, opts.negate)
-    : str;
-
-  result = result.split('.').join('\\.');
-
-  // cache the result and return it
-  return (cache[key] = result);
-}
-
-/**
- * Convert `string` to a regex string.
- *
- * @param  {String} `str`
- * @param  {String} `prefix` Character that determines how to wrap the string.
- * @param  {Boolean} `esc` If `false` special characters will not be escaped. Defaults to `true`.
- * @return {String}
- */
-
-function wrap(inner, prefix, esc) {
-  if (esc) inner = escape(inner);
-
-  switch (prefix) {
-    case '!':
-      return '(?!' + inner + ')[^/]' + (esc ? '%%%~' : '*?');
-    case '@':
-      return '(?:' + inner + ')';
-    case '+':
-      return '(?:' + inner + ')+';
-    case '*':
-      return '(?:' + inner + ')' + (esc ? '%%' : '*')
-    case '?':
-      return '(?:' + inner + '|)';
-    default:
-      return inner;
-  }
-}
-
-function escape(str) {
-  str = str.split('*').join('[^/]%%%~');
-  str = str.split('.').join('\\.');
-  return str;
-}
-
-/**
- * extglob regex.
- */
-
-function regex() {
-  return /(\\?[@?!+*$]\\?)(\(([^()]*?)\))/;
-}
-
-/**
- * Negation regex
- */
-
-function negate(str) {
-  return '(?!^' + str + ').*$';
-}
-
-/**
- * Create the regex to do the matching. If
- * the leading character in the `pattern` is `!`
- * a negation regex is returned.
- *
- * @param {String} `pattern`
- * @param {Boolean} `contains` Allow loose matching.
- * @param {Boolean} `isNegated` True if the pattern is a negation pattern.
- */
-
-function toRegex(pattern, contains, isNegated) {
-  var prefix = contains ? '^' : '';
-  var after = contains ? '$' : '';
-  pattern = ('(?:' + pattern + ')' + after);
-  if (isNegated) {
-    pattern = prefix + negate(pattern);
-  }
-  return new RegExp(prefix + pattern);
-}
-
-
-/***/ }),
-/* 645 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
- * extsprintf.js: extended POSIX-style sprintf
- */
-
-var mod_assert = __webpack_require__(28);
-var mod_util = __webpack_require__(3);
-
-/*
- * Public interface
- */
-exports.sprintf = jsSprintf;
-exports.printf = jsPrintf;
-exports.fprintf = jsFprintf;
-
-/*
- * Stripped down version of s[n]printf(3c).  We make a best effort to throw an
- * exception when given a format string we don't understand, rather than
- * ignoring it, so that we won't break existing programs if/when we go implement
- * the rest of this.
- *
- * This implementation currently supports specifying
- *	- field alignment ('-' flag),
- * 	- zero-pad ('0' flag)
- *	- always show numeric sign ('+' flag),
- *	- field width
- *	- conversions for strings, decimal integers, and floats (numbers).
- *	- argument size specifiers.  These are all accepted but ignored, since
- *	  Javascript has no notion of the physical size of an argument.
- *
- * Everything else is currently unsupported, most notably precision, unsigned
- * numbers, non-decimal numbers, and characters.
- */
-function jsSprintf(fmt)
-{
-	var regex = [
-	    '([^%]*)',				/* normal text */
-	    '%',				/* start of format */
-	    '([\'\\-+ #0]*?)',			/* flags (optional) */
-	    '([1-9]\\d*)?',			/* width (optional) */
-	    '(\\.([1-9]\\d*))?',		/* precision (optional) */
-	    '[lhjztL]*?',			/* length mods (ignored) */
-	    '([diouxXfFeEgGaAcCsSp%jr])'	/* conversion */
-	].join('');
-
-	var re = new RegExp(regex);
-	var args = Array.prototype.slice.call(arguments, 1);
-	var flags, width, precision, conversion;
-	var left, pad, sign, arg, match;
-	var ret = '';
-	var argn = 1;
-
-	mod_assert.equal('string', typeof (fmt));
-
-	while ((match = re.exec(fmt)) !== null) {
-		ret += match[1];
-		fmt = fmt.substring(match[0].length);
-
-		flags = match[2] || '';
-		width = match[3] || 0;
-		precision = match[4] || '';
-		conversion = match[6];
-		left = false;
-		sign = false;
-		pad = ' ';
-
-		if (conversion == '%') {
-			ret += '%';
-			continue;
-		}
-
-		if (args.length === 0)
-			throw (new Error('too few args to sprintf'));
-
-		arg = args.shift();
-		argn++;
-
-		if (flags.match(/[\' #]/))
-			throw (new Error(
-			    'unsupported flags: ' + flags));
-
-		if (precision.length > 0)
-			throw (new Error(
-			    'non-zero precision not supported'));
-
-		if (flags.match(/-/))
-			left = true;
-
-		if (flags.match(/0/))
-			pad = '0';
-
-		if (flags.match(/\+/))
-			sign = true;
-
-		switch (conversion) {
-		case 's':
-			if (arg === undefined || arg === null)
-				throw (new Error('argument ' + argn +
-				    ': attempted to print undefined or null ' +
-				    'as a string'));
-			ret += doPad(pad, width, left, arg.toString());
-			break;
-
-		case 'd':
-			arg = Math.floor(arg);
-			/*jsl:fallthru*/
-		case 'f':
-			sign = sign && arg > 0 ? '+' : '';
-			ret += sign + doPad(pad, width, left,
-			    arg.toString());
-			break;
-
-		case 'x':
-			ret += doPad(pad, width, left, arg.toString(16));
-			break;
-
-		case 'j': /* non-standard */
-			if (width === 0)
-				width = 10;
-			ret += mod_util.inspect(arg, false, width);
-			break;
-
-		case 'r': /* non-standard */
-			ret += dumpException(arg);
-			break;
-
-		default:
-			throw (new Error('unsupported conversion: ' +
-			    conversion));
-		}
-	}
-
-	ret += fmt;
-	return (ret);
-}
-
-function jsPrintf() {
-	var args = Array.prototype.slice.call(arguments);
-	args.unshift(process.stdout);
-	jsFprintf.apply(null, args);
-}
-
-function jsFprintf(stream) {
-	var args = Array.prototype.slice.call(arguments, 1);
-	return (stream.write(jsSprintf.apply(this, args)));
-}
-
-function doPad(chr, width, left, str)
-{
-	var ret = str;
-
-	while (ret.length < width) {
-		if (left)
-			ret += chr;
-		else
-			ret = chr + ret;
-	}
-
-	return (ret);
-}
-
-/*
- * This function dumps long stack traces for exceptions having a cause() method.
- * See node-verror for an example.
- */
-function dumpException(ex)
-{
-	var ret;
-
-	if (!(ex instanceof Error))
-		throw (new Error(jsSprintf('invalid type for %%r: %j', ex)));
-
-	/* Note that V8 prepends "ex.stack" with ex.toString(). */
-	ret = 'EXCEPTION: ' + ex.constructor.name + ': ' + ex.stack;
-
-	if (ex.cause && typeof (ex.cause) === 'function') {
-		var cex = ex.cause();
-		if (cex) {
-			ret += '\nCaused by: ' + dumpException(cex);
-		}
-	}
-
-	return (ret);
-}
-
-
-/***/ }),
-/* 646 */
-/***/ (function(module, exports) {
-
-/*!
- * filename-regex <https://github.com/regexps/filename-regex>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert
- * Licensed under the MIT license.
- */
-
-module.exports = function filenameRegex() {
-  return /([^\\\/]+)$/;
-};
-
-
-/***/ }),
-/* 647 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * for-in <https://github.com/jonschlinkert/for-in>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-module.exports = function forIn(obj, fn, thisArg) {
-  for (var key in obj) {
-    if (fn.call(thisArg, obj[key], key, obj) === false) {
-      break;
-    }
-  }
-};
-
-
-/***/ }),
-/* 648 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = ForeverAgent
-ForeverAgent.SSL = ForeverAgentSSL
-
-var util = __webpack_require__(3)
-  , Agent = __webpack_require__(87).Agent
-  , net = __webpack_require__(164)
-  , tls = __webpack_require__(467)
-  , AgentSSL = __webpack_require__(195).Agent
-  
-function getConnectionName(host, port) {  
-  var name = ''
-  if (typeof host === 'string') {
-    name = host + ':' + port
-  } else {
-    // For node.js v012.0 and iojs-v1.5.1, host is an object. And any existing localAddress is part of the connection name.
-    name = host.host + ':' + host.port + ':' + (host.localAddress ? (host.localAddress + ':') : ':')
-  }
-  return name
-}    
-
-function ForeverAgent(options) {
-  var self = this
-  self.options = options || {}
-  self.requests = {}
-  self.sockets = {}
-  self.freeSockets = {}
-  self.maxSockets = self.options.maxSockets || Agent.defaultMaxSockets
-  self.minSockets = self.options.minSockets || ForeverAgent.defaultMinSockets
-  self.on('free', function(socket, host, port) {
-    var name = getConnectionName(host, port)
-
-    if (self.requests[name] && self.requests[name].length) {
-      self.requests[name].shift().onSocket(socket)
-    } else if (self.sockets[name].length < self.minSockets) {
-      if (!self.freeSockets[name]) self.freeSockets[name] = []
-      self.freeSockets[name].push(socket)
-      
-      // if an error happens while we don't use the socket anyway, meh, throw the socket away
-      var onIdleError = function() {
-        socket.destroy()
-      }
-      socket._onIdleError = onIdleError
-      socket.on('error', onIdleError)
-    } else {
-      // If there are no pending requests just destroy the
-      // socket and it will get removed from the pool. This
-      // gets us out of timeout issues and allows us to
-      // default to Connection:keep-alive.
-      socket.destroy()
-    }
-  })
-
-}
-util.inherits(ForeverAgent, Agent)
-
-ForeverAgent.defaultMinSockets = 5
-
-
-ForeverAgent.prototype.createConnection = net.createConnection
-ForeverAgent.prototype.addRequestNoreuse = Agent.prototype.addRequest
-ForeverAgent.prototype.addRequest = function(req, host, port) {
-  var name = getConnectionName(host, port)
-  
-  if (typeof host !== 'string') {
-    var options = host
-    port = options.port
-    host = options.host
-  }
-
-  if (this.freeSockets[name] && this.freeSockets[name].length > 0 && !req.useChunkedEncodingByDefault) {
-    var idleSocket = this.freeSockets[name].pop()
-    idleSocket.removeListener('error', idleSocket._onIdleError)
-    delete idleSocket._onIdleError
-    req._reusedSocket = true
-    req.onSocket(idleSocket)
-  } else {
-    this.addRequestNoreuse(req, host, port)
-  }
-}
-
-ForeverAgent.prototype.removeSocket = function(s, name, host, port) {
-  if (this.sockets[name]) {
-    var index = this.sockets[name].indexOf(s)
-    if (index !== -1) {
-      this.sockets[name].splice(index, 1)
-    }
-  } else if (this.sockets[name] && this.sockets[name].length === 0) {
-    // don't leak
-    delete this.sockets[name]
-    delete this.requests[name]
-  }
-  
-  if (this.freeSockets[name]) {
-    var index = this.freeSockets[name].indexOf(s)
-    if (index !== -1) {
-      this.freeSockets[name].splice(index, 1)
-      if (this.freeSockets[name].length === 0) {
-        delete this.freeSockets[name]
-      }
-    }
-  }
-
-  if (this.requests[name] && this.requests[name].length) {
-    // If we have pending requests and a socket gets closed a new one
-    // needs to be created to take over in the pool for the one that closed.
-    this.createSocket(name, host, port).emit('free')
-  }
-}
-
-function ForeverAgentSSL (options) {
-  ForeverAgent.call(this, options)
-}
-util.inherits(ForeverAgentSSL, ForeverAgent)
-
-ForeverAgentSSL.prototype.createConnection = createConnectionSSL
-ForeverAgentSSL.prototype.addRequestNoreuse = AgentSSL.prototype.addRequest
-
-function createConnectionSSL (port, host, options) {
-  if (typeof port === 'object') {
-    options = port;
-  } else if (typeof host === 'object') {
-    options = host;
-  } else if (typeof options === 'object') {
-    options = options;
-  } else {
-    options = {};
-  }
-
-  if (typeof port === 'number') {
-    options.port = port;
-  }
-
-  if (typeof host === 'string') {
-    options.host = host;
-  }
-
-  return tls.connect(options);
-}
-
-
-/***/ }),
-/* 649 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var CombinedStream = __webpack_require__(385);
-var util = __webpack_require__(3);
-var path = __webpack_require__(0);
-var http = __webpack_require__(87);
-var https = __webpack_require__(195);
-var parseUrl = __webpack_require__(24).parse;
-var fs = __webpack_require__(5);
-var mime = __webpack_require__(400);
-var asynckit = __webpack_require__(517);
-var populate = __webpack_require__(650);
-
-// Public API
-module.exports = FormData;
-
-// make it a Stream
-util.inherits(FormData, CombinedStream);
-
-/**
- * Create readable "multipart/form-data" streams.
- * Can be used to submit forms
- * and file uploads to other web applications.
- *
- * @constructor
- * @param {Object} options - Properties to be added/overriden for FormData and CombinedStream
- */
-function FormData(options) {
-  if (!(this instanceof FormData)) {
-    return new FormData();
-  }
-
-  this._overheadLength = 0;
-  this._valueLength = 0;
-  this._valuesToMeasure = [];
-
-  CombinedStream.call(this);
-
-  options = options || {};
-  for (var option in options) {
-    this[option] = options[option];
-  }
-}
-
-FormData.LINE_BREAK = '\r\n';
-FormData.DEFAULT_CONTENT_TYPE = 'application/octet-stream';
-
-FormData.prototype.append = function(field, value, options) {
-
-  options = options || {};
-
-  // allow filename as single option
-  if (typeof options == 'string') {
-    options = {filename: options};
-  }
-
-  var append = CombinedStream.prototype.append.bind(this);
-
-  // all that streamy business can't handle numbers
-  if (typeof value == 'number') {
-    value = '' + value;
-  }
-
-  // https://github.com/felixge/node-form-data/issues/38
-  if (util.isArray(value)) {
-    // Please convert your array into string
-    // the way web server expects it
-    this._error(new Error('Arrays are not supported.'));
-    return;
-  }
-
-  var header = this._multiPartHeader(field, value, options);
-  var footer = this._multiPartFooter();
-
-  append(header);
-  append(value);
-  append(footer);
-
-  // pass along options.knownLength
-  this._trackLength(header, value, options);
-};
-
-FormData.prototype._trackLength = function(header, value, options) {
-  var valueLength = 0;
-
-  // used w/ getLengthSync(), when length is known.
-  // e.g. for streaming directly from a remote server,
-  // w/ a known file a size, and not wanting to wait for
-  // incoming file to finish to get its size.
-  if (options.knownLength != null) {
-    valueLength += +options.knownLength;
-  } else if (Buffer.isBuffer(value)) {
-    valueLength = value.length;
-  } else if (typeof value === 'string') {
-    valueLength = Buffer.byteLength(value);
-  }
-
-  this._valueLength += valueLength;
-
-  // @check why add CRLF? does this account for custom/multiple CRLFs?
-  this._overheadLength +=
-    Buffer.byteLength(header) +
-    FormData.LINE_BREAK.length;
-
-  // empty or either doesn't have path or not an http response
-  if (!value || ( !value.path && !(value.readable && value.hasOwnProperty('httpVersion')) )) {
-    return;
-  }
-
-  // no need to bother with the length
-  if (!options.knownLength) {
-    this._valuesToMeasure.push(value);
-  }
-};
-
-FormData.prototype._lengthRetriever = function(value, callback) {
-
-  if (value.hasOwnProperty('fd')) {
-
-    // take read range into a account
-    // `end` = Infinity –> read file till the end
-    //
-    // TODO: Looks like there is bug in Node fs.createReadStream
-    // it doesn't respect `end` options without `start` options
-    // Fix it when node fixes it.
-    // https://github.com/joyent/node/issues/7819
-    if (value.end != undefined && value.end != Infinity && value.start != undefined) {
-
-      // when end specified
-      // no need to calculate range
-      // inclusive, starts with 0
-      callback(null, value.end + 1 - (value.start ? value.start : 0));
-
-    // not that fast snoopy
-    } else {
-      // still need to fetch file size from fs
-      fs.stat(value.path, function(err, stat) {
-
-        var fileSize;
-
-        if (err) {
-          callback(err);
-          return;
-        }
-
-        // update final size based on the range options
-        fileSize = stat.size - (value.start ? value.start : 0);
-        callback(null, fileSize);
-      });
-    }
-
-  // or http response
-  } else if (value.hasOwnProperty('httpVersion')) {
-    callback(null, +value.headers['content-length']);
-
-  // or request stream http://github.com/mikeal/request
-  } else if (value.hasOwnProperty('httpModule')) {
-    // wait till response come back
-    value.on('response', function(response) {
-      value.pause();
-      callback(null, +response.headers['content-length']);
-    });
-    value.resume();
-
-  // something else
-  } else {
-    callback('Unknown stream');
-  }
-};
-
-FormData.prototype._multiPartHeader = function(field, value, options) {
-  // custom header specified (as string)?
-  // it becomes responsible for boundary
-  // (e.g. to handle extra CRLFs on .NET servers)
-  if (typeof options.header == 'string') {
-    return options.header;
-  }
-
-  var contentDisposition = this._getContentDisposition(value, options);
-  var contentType = this._getContentType(value, options);
-
-  var contents = '';
-  var headers  = {
-    // add custom disposition as third element or keep it two elements if not
-    'Content-Disposition': ['form-data', 'name="' + field + '"'].concat(contentDisposition || []),
-    // if no content type. allow it to be empty array
-    'Content-Type': [].concat(contentType || [])
-  };
-
-  // allow custom headers.
-  if (typeof options.header == 'object') {
-    populate(headers, options.header);
-  }
-
-  var header;
-  for (var prop in headers) {
-    if (!headers.hasOwnProperty(prop)) continue;
-    header = headers[prop];
-
-    // skip nullish headers.
-    if (header == null) {
-      continue;
-    }
-
-    // convert all headers to arrays.
-    if (!Array.isArray(header)) {
-      header = [header];
-    }
-
-    // add non-empty headers.
-    if (header.length) {
-      contents += prop + ': ' + header.join('; ') + FormData.LINE_BREAK;
-    }
-  }
-
-  return '--' + this.getBoundary() + FormData.LINE_BREAK + contents + FormData.LINE_BREAK;
-};
-
-FormData.prototype._getContentDisposition = function(value, options) {
-
-  var filename
-    , contentDisposition
-    ;
-
-  if (typeof options.filepath === 'string') {
-    // custom filepath for relative paths
-    filename = path.normalize(options.filepath).replace(/\\/g, '/');
-  } else if (options.filename || value.name || value.path) {
-    // custom filename take precedence
-    // formidable and the browser add a name property
-    // fs- and request- streams have path property
-    filename = path.basename(options.filename || value.name || value.path);
-  } else if (value.readable && value.hasOwnProperty('httpVersion')) {
-    // or try http response
-    filename = path.basename(value.client._httpMessage.path);
-  }
-
-  if (filename) {
-    contentDisposition = 'filename="' + filename + '"';
-  }
-
-  return contentDisposition;
-};
-
-FormData.prototype._getContentType = function(value, options) {
-
-  // use custom content-type above all
-  var contentType = options.contentType;
-
-  // or try `name` from formidable, browser
-  if (!contentType && value.name) {
-    contentType = mime.lookup(value.name);
-  }
-
-  // or try `path` from fs-, request- streams
-  if (!contentType && value.path) {
-    contentType = mime.lookup(value.path);
-  }
-
-  // or if it's http-reponse
-  if (!contentType && value.readable && value.hasOwnProperty('httpVersion')) {
-    contentType = value.headers['content-type'];
-  }
-
-  // or guess it from the filepath or filename
-  if (!contentType && (options.filepath || options.filename)) {
-    contentType = mime.lookup(options.filepath || options.filename);
-  }
-
-  // fallback to the default content type if `value` is not simple value
-  if (!contentType && typeof value == 'object') {
-    contentType = FormData.DEFAULT_CONTENT_TYPE;
-  }
-
-  return contentType;
-};
-
-FormData.prototype._multiPartFooter = function() {
-  return function(next) {
-    var footer = FormData.LINE_BREAK;
-
-    var lastPart = (this._streams.length === 0);
-    if (lastPart) {
-      footer += this._lastBoundary();
-    }
-
-    next(footer);
-  }.bind(this);
-};
-
-FormData.prototype._lastBoundary = function() {
-  return '--' + this.getBoundary() + '--' + FormData.LINE_BREAK;
-};
-
-FormData.prototype.getHeaders = function(userHeaders) {
-  var header;
-  var formHeaders = {
-    'content-type': 'multipart/form-data; boundary=' + this.getBoundary()
-  };
-
-  for (header in userHeaders) {
-    if (userHeaders.hasOwnProperty(header)) {
-      formHeaders[header.toLowerCase()] = userHeaders[header];
-    }
-  }
-
-  return formHeaders;
-};
-
-FormData.prototype.getBoundary = function() {
-  if (!this._boundary) {
-    this._generateBoundary();
-  }
-
-  return this._boundary;
-};
-
-FormData.prototype._generateBoundary = function() {
-  // This generates a 50 character boundary similar to those used by Firefox.
-  // They are optimized for boyer-moore parsing.
-  var boundary = '--------------------------';
-  for (var i = 0; i < 24; i++) {
-    boundary += Math.floor(Math.random() * 10).toString(16);
-  }
-
-  this._boundary = boundary;
-};
-
-// Note: getLengthSync DOESN'T calculate streams length
-// As workaround one can calculate file size manually
-// and add it as knownLength option
-FormData.prototype.getLengthSync = function() {
-  var knownLength = this._overheadLength + this._valueLength;
-
-  // Don't get confused, there are 3 "internal" streams for each keyval pair
-  // so it basically checks if there is any value added to the form
-  if (this._streams.length) {
-    knownLength += this._lastBoundary().length;
-  }
-
-  // https://github.com/form-data/form-data/issues/40
-  if (!this.hasKnownLength()) {
-    // Some async length retrievers are present
-    // therefore synchronous length calculation is false.
-    // Please use getLength(callback) to get proper length
-    this._error(new Error('Cannot calculate proper length in synchronous way.'));
-  }
-
-  return knownLength;
-};
-
-// Public API to check if length of added values is known
-// https://github.com/form-data/form-data/issues/196
-// https://github.com/form-data/form-data/issues/262
-FormData.prototype.hasKnownLength = function() {
-  var hasKnownLength = true;
-
-  if (this._valuesToMeasure.length) {
-    hasKnownLength = false;
-  }
-
-  return hasKnownLength;
-};
-
-FormData.prototype.getLength = function(cb) {
-  var knownLength = this._overheadLength + this._valueLength;
-
-  if (this._streams.length) {
-    knownLength += this._lastBoundary().length;
-  }
-
-  if (!this._valuesToMeasure.length) {
-    process.nextTick(cb.bind(this, null, knownLength));
-    return;
-  }
-
-  asynckit.parallel(this._valuesToMeasure, this._lengthRetriever, function(err, values) {
-    if (err) {
-      cb(err);
-      return;
-    }
-
-    values.forEach(function(length) {
-      knownLength += length;
-    });
-
-    cb(null, knownLength);
-  });
-};
-
-FormData.prototype.submit = function(params, cb) {
-  var request
-    , options
-    , defaults = {method: 'post'}
-    ;
-
-  // parse provided url if it's string
-  // or treat it as options object
-  if (typeof params == 'string') {
-
-    params = parseUrl(params);
-    options = populate({
-      port: params.port,
-      path: params.pathname,
-      host: params.hostname,
-      protocol: params.protocol
-    }, defaults);
-
-  // use custom params
-  } else {
-
-    options = populate(params, defaults);
-    // if no port provided use default one
-    if (!options.port) {
-      options.port = options.protocol == 'https:' ? 443 : 80;
-    }
-  }
-
-  // put that good code in getHeaders to some use
-  options.headers = this.getHeaders(params.headers);
-
-  // https if specified, fallback to http in any other case
-  if (options.protocol == 'https:') {
-    request = https.request(options);
-  } else {
-    request = http.request(options);
-  }
-
-  // get content length and fire away
-  this.getLength(function(err, length) {
-    if (err) {
-      this._error(err);
-      return;
-    }
-
-    // add content length
-    request.setHeader('Content-Length', length);
-
-    this.pipe(request);
-    if (cb) {
-      request.on('error', cb);
-      request.on('response', cb.bind(this, null));
-    }
-  }.bind(this));
-
-  return request;
-};
-
-FormData.prototype._error = function(err) {
-  if (!this.error) {
-    this.error = err;
-    this.pause();
-    this.emit('error', err);
-  }
-};
-
-FormData.prototype.toString = function () {
-  return '[object FormData]';
-};
-
-
-/***/ }),
-/* 650 */
-/***/ (function(module, exports) {
-
-// populates missing values
-module.exports = function(dst, src) {
-
-  Object.keys(src).forEach(function(prop)
-  {
-    dst[prop] = dst[prop] || src[prop];
-  });
-
-  return dst;
-};
-
-
-/***/ }),
-/* 651 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(5).constants || __webpack_require__(466)
-
-
-/***/ }),
-/* 652 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * glob-base <https://github.com/jonschlinkert/glob-base>
- *
- * Copyright (c) 2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var path = __webpack_require__(0);
-var parent = __webpack_require__(653);
-var isGlob = __webpack_require__(178);
-
-module.exports = function globBase(pattern) {
-  if (typeof pattern !== 'string') {
-    throw new TypeError('glob-base expects a string.');
-  }
-
-  var res = {};
-  res.base = parent(pattern);
-  res.isGlob = isGlob(pattern);
-
-  if (res.base !== '.') {
-    res.glob = pattern.substr(res.base.length);
-    if (res.glob.charAt(0) === '/') {
-      res.glob = res.glob.substr(1);
-    }
-  } else {
-    res.glob = pattern;
-  }
-
-  if (!res.isGlob) {
-    res.base = dirname(pattern);
-    res.glob = res.base !== '.'
-      ? pattern.substr(res.base.length)
-      : pattern;
-  }
-
-  if (res.glob.substr(0, 2) === './') {
-    res.glob = res.glob.substr(2);
-  }
-  if (res.glob.charAt(0) === '/') {
-    res.glob = res.glob.substr(1);
-  }
-  return res;
-};
-
-function dirname(glob) {
-  if (glob.slice(-1) === '/') return glob;
-  return path.dirname(glob);
-}
-
-
-/***/ }),
-/* 653 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var path = __webpack_require__(0);
-var isglob = __webpack_require__(178);
-
-module.exports = function globParent(str) {
-	str += 'a'; // preserves full path in case of trailing path separator
-	do {str = path.dirname(str)} while (isglob(str));
-	return str;
-};
-
-
-/***/ }),
-/* 654 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Stream = __webpack_require__(23).Stream
-
-module.exports = legacy
-
-function legacy (fs) {
-  return {
-    ReadStream: ReadStream,
-    WriteStream: WriteStream
-  }
-
-  function ReadStream (path, options) {
-    if (!(this instanceof ReadStream)) return new ReadStream(path, options);
-
-    Stream.call(this);
-
-    var self = this;
-
-    this.path = path;
-    this.fd = null;
-    this.readable = true;
-    this.paused = false;
-
-    this.flags = 'r';
-    this.mode = 438; /*=0666*/
-    this.bufferSize = 64 * 1024;
-
-    options = options || {};
-
-    // Mixin options into this
-    var keys = Object.keys(options);
-    for (var index = 0, length = keys.length; index < length; index++) {
-      var key = keys[index];
-      this[key] = options[key];
-    }
-
-    if (this.encoding) this.setEncoding(this.encoding);
-
-    if (this.start !== undefined) {
-      if ('number' !== typeof this.start) {
-        throw TypeError('start must be a Number');
-      }
-      if (this.end === undefined) {
-        this.end = Infinity;
-      } else if ('number' !== typeof this.end) {
-        throw TypeError('end must be a Number');
-      }
-
-      if (this.start > this.end) {
-        throw new Error('start must be <= end');
-      }
-
-      this.pos = this.start;
-    }
-
-    if (this.fd !== null) {
-      process.nextTick(function() {
-        self._read();
-      });
-      return;
-    }
-
-    fs.open(this.path, this.flags, this.mode, function (err, fd) {
-      if (err) {
-        self.emit('error', err);
-        self.readable = false;
-        return;
-      }
-
-      self.fd = fd;
-      self.emit('open', fd);
-      self._read();
-    })
-  }
-
-  function WriteStream (path, options) {
-    if (!(this instanceof WriteStream)) return new WriteStream(path, options);
-
-    Stream.call(this);
-
-    this.path = path;
-    this.fd = null;
-    this.writable = true;
-
-    this.flags = 'w';
-    this.encoding = 'binary';
-    this.mode = 438; /*=0666*/
-    this.bytesWritten = 0;
-
-    options = options || {};
-
-    // Mixin options into this
-    var keys = Object.keys(options);
-    for (var index = 0, length = keys.length; index < length; index++) {
-      var key = keys[index];
-      this[key] = options[key];
-    }
-
-    if (this.start !== undefined) {
-      if ('number' !== typeof this.start) {
-        throw TypeError('start must be a Number');
-      }
-      if (this.start < 0) {
-        throw new Error('start must be >= zero');
-      }
-
-      this.pos = this.start;
-    }
-
-    this.busy = false;
-    this._queue = [];
-
-    if (this.fd === null) {
-      this._open = fs.open;
-      this._queue.push([this._open, this.path, this.flags, this.mode, undefined]);
-      this.flush();
-    }
-  }
-}
-
-
-/***/ }),
-/* 655 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var fs = __webpack_require__(390)
-var constants = __webpack_require__(466)
-
-var origCwd = process.cwd
-var cwd = null
-
-var platform = process.env.GRACEFUL_FS_PLATFORM || process.platform
-
-process.cwd = function() {
-  if (!cwd)
-    cwd = origCwd.call(process)
-  return cwd
-}
-try {
-  process.cwd()
-} catch (er) {}
-
-var chdir = process.chdir
-process.chdir = function(d) {
-  cwd = null
-  chdir.call(process, d)
-}
-
-module.exports = patch
-
-function patch (fs) {
-  // (re-)implement some things that are known busted or missing.
-
-  // lchmod, broken prior to 0.6.2
-  // back-port the fix here.
-  if (constants.hasOwnProperty('O_SYMLINK') &&
-      process.version.match(/^v0\.6\.[0-2]|^v0\.5\./)) {
-    patchLchmod(fs)
-  }
-
-  // lutimes implementation, or no-op
-  if (!fs.lutimes) {
-    patchLutimes(fs)
-  }
-
-  // https://github.com/isaacs/node-graceful-fs/issues/4
-  // Chown should not fail on einval or eperm if non-root.
-  // It should not fail on enosys ever, as this just indicates
-  // that a fs doesn't support the intended operation.
-
-  fs.chown = chownFix(fs.chown)
-  fs.fchown = chownFix(fs.fchown)
-  fs.lchown = chownFix(fs.lchown)
-
-  fs.chmod = chmodFix(fs.chmod)
-  fs.fchmod = chmodFix(fs.fchmod)
-  fs.lchmod = chmodFix(fs.lchmod)
-
-  fs.chownSync = chownFixSync(fs.chownSync)
-  fs.fchownSync = chownFixSync(fs.fchownSync)
-  fs.lchownSync = chownFixSync(fs.lchownSync)
-
-  fs.chmodSync = chmodFixSync(fs.chmodSync)
-  fs.fchmodSync = chmodFixSync(fs.fchmodSync)
-  fs.lchmodSync = chmodFixSync(fs.lchmodSync)
-
-  fs.stat = statFix(fs.stat)
-  fs.fstat = statFix(fs.fstat)
-  fs.lstat = statFix(fs.lstat)
-
-  fs.statSync = statFixSync(fs.statSync)
-  fs.fstatSync = statFixSync(fs.fstatSync)
-  fs.lstatSync = statFixSync(fs.lstatSync)
-
-  // if lchmod/lchown do not exist, then make them no-ops
-  if (!fs.lchmod) {
-    fs.lchmod = function (path, mode, cb) {
-      if (cb) process.nextTick(cb)
-    }
-    fs.lchmodSync = function () {}
-  }
-  if (!fs.lchown) {
-    fs.lchown = function (path, uid, gid, cb) {
-      if (cb) process.nextTick(cb)
-    }
-    fs.lchownSync = function () {}
-  }
-
-  // on Windows, A/V software can lock the directory, causing this
-  // to fail with an EACCES or EPERM if the directory contains newly
-  // created files.  Try again on failure, for up to 60 seconds.
-
-  // Set the timeout this long because some Windows Anti-Virus, such as Parity
-  // bit9, may lock files for up to a minute, causing npm package install
-  // failures. Also, take care to yield the scheduler. Windows scheduling gives
-  // CPU to a busy looping process, which can cause the program causing the lock
-  // contention to be starved of CPU by node, so the contention doesn't resolve.
-  if (platform === "win32") {
-    fs.rename = (function (fs$rename) { return function (from, to, cb) {
-      var start = Date.now()
-      var backoff = 0;
-      fs$rename(from, to, function CB (er) {
-        if (er
-            && (er.code === "EACCES" || er.code === "EPERM")
-            && Date.now() - start < 60000) {
-          setTimeout(function() {
-            fs.stat(to, function (stater, st) {
-              if (stater && stater.code === "ENOENT")
-                fs$rename(from, to, CB);
-              else
-                cb(er)
-            })
-          }, backoff)
-          if (backoff < 100)
-            backoff += 10;
-          return;
-        }
-        if (cb) cb(er)
-      })
-    }})(fs.rename)
-  }
-
-  // if read() returns EAGAIN, then just try it again.
-  fs.read = (function (fs$read) { return function (fd, buffer, offset, length, position, callback_) {
-    var callback
-    if (callback_ && typeof callback_ === 'function') {
-      var eagCounter = 0
-      callback = function (er, _, __) {
-        if (er && er.code === 'EAGAIN' && eagCounter < 10) {
-          eagCounter ++
-          return fs$read.call(fs, fd, buffer, offset, length, position, callback)
-        }
-        callback_.apply(this, arguments)
-      }
-    }
-    return fs$read.call(fs, fd, buffer, offset, length, position, callback)
-  }})(fs.read)
-
-  fs.readSync = (function (fs$readSync) { return function (fd, buffer, offset, length, position) {
-    var eagCounter = 0
-    while (true) {
-      try {
-        return fs$readSync.call(fs, fd, buffer, offset, length, position)
-      } catch (er) {
-        if (er.code === 'EAGAIN' && eagCounter < 10) {
-          eagCounter ++
-          continue
-        }
-        throw er
-      }
-    }
-  }})(fs.readSync)
-}
-
-function patchLchmod (fs) {
-  fs.lchmod = function (path, mode, callback) {
-    fs.open( path
-           , constants.O_WRONLY | constants.O_SYMLINK
-           , mode
-           , function (err, fd) {
-      if (err) {
-        if (callback) callback(err)
-        return
-      }
-      // prefer to return the chmod error, if one occurs,
-      // but still try to close, and report closing errors if they occur.
-      fs.fchmod(fd, mode, function (err) {
-        fs.close(fd, function(err2) {
-          if (callback) callback(err || err2)
-        })
-      })
-    })
-  }
-
-  fs.lchmodSync = function (path, mode) {
-    var fd = fs.openSync(path, constants.O_WRONLY | constants.O_SYMLINK, mode)
-
-    // prefer to return the chmod error, if one occurs,
-    // but still try to close, and report closing errors if they occur.
-    var threw = true
-    var ret
-    try {
-      ret = fs.fchmodSync(fd, mode)
-      threw = false
-    } finally {
-      if (threw) {
-        try {
-          fs.closeSync(fd)
-        } catch (er) {}
-      } else {
-        fs.closeSync(fd)
-      }
-    }
-    return ret
-  }
-}
-
-function patchLutimes (fs) {
-  if (constants.hasOwnProperty("O_SYMLINK")) {
-    fs.lutimes = function (path, at, mt, cb) {
-      fs.open(path, constants.O_SYMLINK, function (er, fd) {
-        if (er) {
-          if (cb) cb(er)
-          return
-        }
-        fs.futimes(fd, at, mt, function (er) {
-          fs.close(fd, function (er2) {
-            if (cb) cb(er || er2)
-          })
-        })
-      })
-    }
-
-    fs.lutimesSync = function (path, at, mt) {
-      var fd = fs.openSync(path, constants.O_SYMLINK)
-      var ret
-      var threw = true
-      try {
-        ret = fs.futimesSync(fd, at, mt)
-        threw = false
-      } finally {
-        if (threw) {
-          try {
-            fs.closeSync(fd)
-          } catch (er) {}
-        } else {
-          fs.closeSync(fd)
-        }
-      }
-      return ret
-    }
-
-  } else {
-    fs.lutimes = function (_a, _b, _c, cb) { if (cb) process.nextTick(cb) }
-    fs.lutimesSync = function () {}
-  }
-}
-
-function chmodFix (orig) {
-  if (!orig) return orig
-  return function (target, mode, cb) {
-    return orig.call(fs, target, mode, function (er) {
-      if (chownErOk(er)) er = null
-      if (cb) cb.apply(this, arguments)
-    })
-  }
-}
-
-function chmodFixSync (orig) {
-  if (!orig) return orig
-  return function (target, mode) {
-    try {
-      return orig.call(fs, target, mode)
-    } catch (er) {
-      if (!chownErOk(er)) throw er
-    }
-  }
-}
-
-
-function chownFix (orig) {
-  if (!orig) return orig
-  return function (target, uid, gid, cb) {
-    return orig.call(fs, target, uid, gid, function (er) {
-      if (chownErOk(er)) er = null
-      if (cb) cb.apply(this, arguments)
-    })
-  }
-}
-
-function chownFixSync (orig) {
-  if (!orig) return orig
-  return function (target, uid, gid) {
-    try {
-      return orig.call(fs, target, uid, gid)
-    } catch (er) {
-      if (!chownErOk(er)) throw er
-    }
-  }
-}
-
-
-function statFix (orig) {
-  if (!orig) return orig
-  // Older versions of Node erroneously returned signed integers for
-  // uid + gid.
-  return function (target, cb) {
-    return orig.call(fs, target, function (er, stats) {
-      if (!stats) return cb.apply(this, arguments)
-      if (stats.uid < 0) stats.uid += 0x100000000
-      if (stats.gid < 0) stats.gid += 0x100000000
-      if (cb) cb.apply(this, arguments)
-    })
-  }
-}
-
-function statFixSync (orig) {
-  if (!orig) return orig
-  // Older versions of Node erroneously returned signed integers for
-  // uid + gid.
-  return function (target) {
-    var stats = orig.call(fs, target)
-    if (stats.uid < 0) stats.uid += 0x100000000
-    if (stats.gid < 0) stats.gid += 0x100000000
-    return stats;
-  }
-}
-
-// ENOSYS means that the fs doesn't support the op. Just ignore
-// that, because it doesn't matter.
-//
-// if there's no getuid, or if getuid() is something other
-// than 0, and the error is EINVAL or EPERM, then just ignore
-// it.
-//
-// This specific case is a silent failure in cp, install, tar,
-// and most other unix tools that manage permissions.
-//
-// When running as root, or if other types of errors are
-// encountered, then it's strict.
-function chownErOk (er) {
-  if (!er)
-    return true
-
-  if (er.code === "ENOSYS")
-    return true
-
-  var nonroot = !process.getuid || process.getuid() !== 0
-  if (nonroot) {
-    if (er.code === "EINVAL" || er.code === "EPERM")
-      return true
-  }
-
-  return false
-}
-
-
-/***/ }),
-/* 656 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var zlib = __webpack_require__(198)
-var peek = __webpack_require__(775)
-var through = __webpack_require__(461)
-var pumpify = __webpack_require__(782)
-var isGzip = __webpack_require__(737)
-var isDeflate = __webpack_require__(732)
-
-var isCompressed = function (data) {
-  if (isGzip(data)) return 1
-  if (isDeflate(data)) return 2
-  return 0
-}
-
-var gunzip = function (maxRecursion) {
-  if (!(maxRecursion >= 0)) maxRecursion = 3
-
-  return peek({newline: false, maxBuffer: 10}, function (data, swap) {
-    if (maxRecursion < 0) return swap(new Error('Maximum recursion reached'))
-    switch (isCompressed(data)) {
-      case 1:
-        swap(null, pumpify(zlib.createGunzip(), gunzip(maxRecursion - 1)))
-        break
-      case 2:
-        swap(null, pumpify(zlib.createInflate(), gunzip(maxRecursion - 1)))
-        break
-      default:
-        swap(null, through())
-    }
-  })
-}
-
-module.exports = gunzip
-
-
-/***/ }),
-/* 657 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"afterRequest.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","optional":true,"required":["lastAccess","eTag","hitCount"],"properties":{"expires":{"type":"string","pattern":"^(\\d{4})(-)?(\\d\\d)(-)?(\\d\\d)(T)?(\\d\\d)(:)?(\\d\\d)(:)?(\\d\\d)(\\.\\d+)?(Z|([+-])(\\d\\d)(:)?(\\d\\d))?"},"lastAccess":{"type":"string","pattern":"^(\\d{4})(-)?(\\d\\d)(-)?(\\d\\d)(T)?(\\d\\d)(:)?(\\d\\d)(:)?(\\d\\d)(\\.\\d+)?(Z|([+-])(\\d\\d)(:)?(\\d\\d))?"},"eTag":{"type":"string"},"hitCount":{"type":"integer"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 658 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"beforeRequest.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","optional":true,"required":["lastAccess","eTag","hitCount"],"properties":{"expires":{"type":"string","pattern":"^(\\d{4})(-)?(\\d\\d)(-)?(\\d\\d)(T)?(\\d\\d)(:)?(\\d\\d)(:)?(\\d\\d)(\\.\\d+)?(Z|([+-])(\\d\\d)(:)?(\\d\\d))?"},"lastAccess":{"type":"string","pattern":"^(\\d{4})(-)?(\\d\\d)(-)?(\\d\\d)(T)?(\\d\\d)(:)?(\\d\\d)(:)?(\\d\\d)(\\.\\d+)?(Z|([+-])(\\d\\d)(:)?(\\d\\d))?"},"eTag":{"type":"string"},"hitCount":{"type":"integer"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 659 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"browser.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["name","version"],"properties":{"name":{"type":"string"},"version":{"type":"string"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 660 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"cache.json#","$schema":"http://json-schema.org/draft-06/schema#","properties":{"beforeRequest":{"oneOf":[{"type":"null"},{"$ref":"beforeRequest.json#"}]},"afterRequest":{"oneOf":[{"type":"null"},{"$ref":"afterRequest.json#"}]},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 661 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"content.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["size","mimeType"],"properties":{"size":{"type":"integer"},"compression":{"type":"integer"},"mimeType":{"type":"string"},"text":{"type":"string"},"encoding":{"type":"string"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 662 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"cookie.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["name","value"],"properties":{"name":{"type":"string"},"value":{"type":"string"},"path":{"type":"string"},"domain":{"type":"string"},"expires":{"type":["string","null"],"format":"date-time"},"httpOnly":{"type":"boolean"},"secure":{"type":"boolean"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 663 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"creator.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["name","version"],"properties":{"name":{"type":"string"},"version":{"type":"string"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 664 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"entry.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","optional":true,"required":["startedDateTime","time","request","response","cache","timings"],"properties":{"pageref":{"type":"string"},"startedDateTime":{"type":"string","format":"date-time","pattern":"^(\\d{4})(-)?(\\d\\d)(-)?(\\d\\d)(T)?(\\d\\d)(:)?(\\d\\d)(:)?(\\d\\d)(\\.\\d+)?(Z|([+-])(\\d\\d)(:)?(\\d\\d))"},"time":{"type":"number","min":0},"request":{"$ref":"request.json#"},"response":{"$ref":"response.json#"},"cache":{"$ref":"cache.json#"},"timings":{"$ref":"timings.json#"},"serverIPAddress":{"type":"string","oneOf":[{"format":"ipv4"},{"format":"ipv6"}]},"connection":{"type":"string"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 665 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"har.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["log"],"properties":{"log":{"$ref":"log.json#"}}}
-
-/***/ }),
-/* 666 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"header.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["name","value"],"properties":{"name":{"type":"string"},"value":{"type":"string"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 667 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-module.exports = {
-  afterRequest: __webpack_require__(657),
-  beforeRequest: __webpack_require__(658),
-  browser: __webpack_require__(659),
-  cache: __webpack_require__(660),
-  content: __webpack_require__(661),
-  cookie: __webpack_require__(662),
-  creator: __webpack_require__(663),
-  entry: __webpack_require__(664),
-  har: __webpack_require__(665),
-  header: __webpack_require__(666),
-  log: __webpack_require__(668),
-  page: __webpack_require__(669),
-  pageTimings: __webpack_require__(670),
-  postData: __webpack_require__(671),
-  query: __webpack_require__(672),
-  request: __webpack_require__(673),
-  response: __webpack_require__(674),
-  timings: __webpack_require__(675)
-}
-
-
-/***/ }),
-/* 668 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"log.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["version","creator","entries"],"properties":{"version":{"type":"string"},"creator":{"$ref":"creator.json#"},"browser":{"$ref":"browser.json#"},"pages":{"type":"array","items":{"$ref":"page.json#"}},"entries":{"type":"array","items":{"$ref":"entry.json#"}},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 669 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"page.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","optional":true,"required":["startedDateTime","id","title","pageTimings"],"properties":{"startedDateTime":{"type":"string","format":"date-time","pattern":"^(\\d{4})(-)?(\\d\\d)(-)?(\\d\\d)(T)?(\\d\\d)(:)?(\\d\\d)(:)?(\\d\\d)(\\.\\d+)?(Z|([+-])(\\d\\d)(:)?(\\d\\d))"},"id":{"type":"string","unique":true},"title":{"type":"string"},"pageTimings":{"$ref":"pageTimings.json#"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 670 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"pageTimings.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","properties":{"onContentLoad":{"type":"number","min":-1},"onLoad":{"type":"number","min":-1},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 671 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"postData.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","optional":true,"required":["mimeType"],"properties":{"mimeType":{"type":"string"},"text":{"type":"string"},"params":{"type":"array","required":["name"],"properties":{"name":{"type":"string"},"value":{"type":"string"},"fileName":{"type":"string"},"contentType":{"type":"string"},"comment":{"type":"string"}}},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 672 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"query.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["name","value"],"properties":{"name":{"type":"string"},"value":{"type":"string"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 673 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"request.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["method","url","httpVersion","cookies","headers","queryString","headersSize","bodySize"],"properties":{"method":{"type":"string"},"url":{"type":"string","format":"uri"},"httpVersion":{"type":"string"},"cookies":{"type":"array","items":{"$ref":"cookie.json#"}},"headers":{"type":"array","items":{"$ref":"header.json#"}},"queryString":{"type":"array","items":{"$ref":"query.json#"}},"postData":{"$ref":"postData.json#"},"headersSize":{"type":"integer"},"bodySize":{"type":"integer"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 674 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"response.json#","$schema":"http://json-schema.org/draft-06/schema#","type":"object","required":["status","statusText","httpVersion","cookies","headers","content","redirectURL","headersSize","bodySize"],"properties":{"status":{"type":"integer"},"statusText":{"type":"string"},"httpVersion":{"type":"string"},"cookies":{"type":"array","items":{"$ref":"cookie.json#"}},"headers":{"type":"array","items":{"$ref":"header.json#"}},"content":{"$ref":"content.json#"},"redirectURL":{"type":"string"},"headersSize":{"type":"integer"},"bodySize":{"type":"integer"},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 675 */
-/***/ (function(module, exports) {
-
-module.exports = {"$id":"timings.json#","$schema":"http://json-schema.org/draft-06/schema#","required":["send","wait","receive"],"properties":{"dns":{"type":"number","min":-1},"connect":{"type":"number","min":-1},"blocked":{"type":"number","min":-1},"send":{"type":"number","min":-1},"wait":{"type":"number","min":-1},"receive":{"type":"number","min":-1},"ssl":{"type":"number","min":-1},"comment":{"type":"string"}}}
-
-/***/ }),
-/* 676 */
-/***/ (function(module, exports) {
-
-function HARError (errors) {
-  var message = 'validation failed'
-
-  this.name = 'HARError'
-  this.message = message
-  this.errors = errors
-
-  if (typeof Error.captureStackTrace === 'function') {
-    Error.captureStackTrace(this, this.constructor)
-  } else {
-    this.stack = (new Error(message)).stack
-  }
-}
-
-HARError.prototype = Error.prototype
-
-module.exports = HARError
-
-
-/***/ }),
-/* 677 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Ajv = __webpack_require__(473)
-var HARError = __webpack_require__(676)
-var schemas = __webpack_require__(667)
-
-var ajv
-
-function validate (name, data) {
-  data = data || {}
-
-  // validator config
-  ajv = ajv || new Ajv({
-    allErrors: true,
-    schemas: schemas
-  })
-
-  var validate = ajv.getSchema(name + '.json')
-
-  return new Promise(function (resolve, reject) {
-    var valid = validate(data)
-
-    !valid ? reject(new HARError(validate.errors)) : resolve(data)
-  })
-}
-
-exports.afterRequest = function (data) {
-  return validate('afterRequest', data)
-}
-
-exports.beforeRequest = function (data) {
-  return validate('beforeRequest', data)
-}
-
-exports.browser = function (data) {
-  return validate('browser', data)
-}
-
-exports.cache = function (data) {
-  return validate('cache', data)
-}
-
-exports.content = function (data) {
-  return validate('content', data)
-}
-
-exports.cookie = function (data) {
-  return validate('cookie', data)
-}
-
-exports.creator = function (data) {
-  return validate('creator', data)
-}
-
-exports.entry = function (data) {
-  return validate('entry', data)
-}
-
-exports.har = function (data) {
-  return validate('har', data)
-}
-
-exports.header = function (data) {
-  return validate('header', data)
-}
-
-exports.log = function (data) {
-  return validate('log', data)
-}
-
-exports.page = function (data) {
-  return validate('page', data)
-}
-
-exports.pageTimings = function (data) {
-  return validate('pageTimings', data)
-}
-
-exports.postData = function (data) {
-  return validate('postData', data)
-}
-
-exports.query = function (data) {
-  return validate('query', data)
-}
-
-exports.request = function (data) {
-  return validate('request', data)
-}
-
-exports.response = function (data) {
-  return validate('response', data)
-}
-
-exports.timings = function (data) {
-  return validate('timings', data)
-}
-
-
-/***/ }),
-/* 678 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var pkg = __webpack_require__(944);
-
-/* @private
- *
- * constructs a set of all dependencies recursively
- *
- * @method depsFor
- * @param {String} name of package to assemble unique deps for
- * @param {String} dir (optional) path to begin resolving from
- * @return {Array} a unique set of all deps
- */
-module.exports = function depsFor(name, dir) {
-  var dependencies = [];
-  var visited = Object.create(null);
-
-  (function again(name, dir) {
-    var thePackage = pkg(name, dir);
-
-    if (thePackage === null) { return; }
-
-    var key = thePackage.name + thePackage.version + thePackage.baseDir;
-
-    if (visited[key]) { return; }
-    visited[key] = true;
-
-    dependencies.push(thePackage);
-
-    return Object.keys(thePackage.dependencies || {}).forEach(function(dep) {
-      again(dep, thePackage.baseDir);
-    });
-  }(name, dir));
-
-  return dependencies;
-};
-
-
-
-/***/ }),
-/* 679 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var resolve = __webpack_require__(814);
-var path = __webpack_require__(0);
-
-/* @private
- *
- * @method resolvePkg
- * @param {String} name
- * @param {String} dir
- * @return {String}
- */
-module.exports = function resolvePkg(name, dir) {
-  if (name === './') {
-    return path.resolve(name, 'package.json');
-  }
-
-  if (name[name.length - 1] !== '/') {
-    name += '/';
-  }
-
-  if (name.charAt(0) === '/') {
-    return name + 'package.json';
-  }
-
-  try {
-    return resolve.sync(name + 'package.json', {
-      basedir: dir || __dirname,
-      preserveSymlinks: false
-    });
-  } catch(err) {
-    if (err.code === 'MODULE_NOT_FOUND') {
-      return null;
-    }
-
-    throw err;
-  }
-};
-
-
-/***/ }),
-/* 680 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-var parser = __webpack_require__(681);
-var signer = __webpack_require__(682);
-var verify = __webpack_require__(683);
-var utils = __webpack_require__(174);
-
-
-
-///--- API
-
-module.exports = {
-
-  parse: parser.parseRequest,
-  parseRequest: parser.parseRequest,
-
-  sign: signer.signRequest,
-  signRequest: signer.signRequest,
-  createSigner: signer.createSigner,
-  isSigner: signer.isSigner,
-
-  sshKeyToPEM: utils.sshKeyToPEM,
-  sshKeyFingerprint: utils.fingerprint,
-  pemToRsaSSHKey: utils.pemToRsaSSHKey,
-
-  verify: verify.verifySignature,
-  verifySignature: verify.verifySignature,
-  verifyHMAC: verify.verifyHMAC
-};
-
-
-/***/ }),
-/* 681 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2012 Joyent, Inc.  All rights reserved.
-
-var assert = __webpack_require__(16);
-var util = __webpack_require__(3);
-var utils = __webpack_require__(174);
-
-
-
-///--- Globals
-
-var HASH_ALGOS = utils.HASH_ALGOS;
-var PK_ALGOS = utils.PK_ALGOS;
-var HttpSignatureError = utils.HttpSignatureError;
-var InvalidAlgorithmError = utils.InvalidAlgorithmError;
-var validateAlgorithm = utils.validateAlgorithm;
-
-var State = {
-  New: 0,
-  Params: 1
-};
-
-var ParamsState = {
-  Name: 0,
-  Quote: 1,
-  Value: 2,
-  Comma: 3
-};
-
-
-///--- Specific Errors
-
-
-function ExpiredRequestError(message) {
-  HttpSignatureError.call(this, message, ExpiredRequestError);
-}
-util.inherits(ExpiredRequestError, HttpSignatureError);
-
-
-function InvalidHeaderError(message) {
-  HttpSignatureError.call(this, message, InvalidHeaderError);
-}
-util.inherits(InvalidHeaderError, HttpSignatureError);
-
-
-function InvalidParamsError(message) {
-  HttpSignatureError.call(this, message, InvalidParamsError);
-}
-util.inherits(InvalidParamsError, HttpSignatureError);
-
-
-function MissingHeaderError(message) {
-  HttpSignatureError.call(this, message, MissingHeaderError);
-}
-util.inherits(MissingHeaderError, HttpSignatureError);
-
-function StrictParsingError(message) {
-  HttpSignatureError.call(this, message, StrictParsingError);
-}
-util.inherits(StrictParsingError, HttpSignatureError);
-
-///--- Exported API
-
-module.exports = {
-
-  /**
-   * Parses the 'Authorization' header out of an http.ServerRequest object.
-   *
-   * Note that this API will fully validate the Authorization header, and throw
-   * on any error.  It will not however check the signature, or the keyId format
-   * as those are specific to your environment.  You can use the options object
-   * to pass in extra constraints.
-   *
-   * As a response object you can expect this:
-   *
-   *     {
-   *       "scheme": "Signature",
-   *       "params": {
-   *         "keyId": "foo",
-   *         "algorithm": "rsa-sha256",
-   *         "headers": [
-   *           "date" or "x-date",
-   *           "digest"
-   *         ],
-   *         "signature": "base64"
-   *       },
-   *       "signingString": "ready to be passed to crypto.verify()"
-   *     }
-   *
-   * @param {Object} request an http.ServerRequest.
-   * @param {Object} options an optional options object with:
-   *                   - clockSkew: allowed clock skew in seconds (default 300).
-   *                   - headers: required header names (def: date or x-date)
-   *                   - algorithms: algorithms to support (default: all).
-   *                   - strict: should enforce latest spec parsing
-   *                             (default: false).
-   * @return {Object} parsed out object (see above).
-   * @throws {TypeError} on invalid input.
-   * @throws {InvalidHeaderError} on an invalid Authorization header error.
-   * @throws {InvalidParamsError} if the params in the scheme are invalid.
-   * @throws {MissingHeaderError} if the params indicate a header not present,
-   *                              either in the request headers from the params,
-   *                              or not in the params from a required header
-   *                              in options.
-   * @throws {StrictParsingError} if old attributes are used in strict parsing
-   *                              mode.
-   * @throws {ExpiredRequestError} if the value of date or x-date exceeds skew.
-   */
-  parseRequest: function parseRequest(request, options) {
-    assert.object(request, 'request');
-    assert.object(request.headers, 'request.headers');
-    if (options === undefined) {
-      options = {};
-    }
-    if (options.headers === undefined) {
-      options.headers = [request.headers['x-date'] ? 'x-date' : 'date'];
-    }
-    assert.object(options, 'options');
-    assert.arrayOfString(options.headers, 'options.headers');
-    assert.optionalFinite(options.clockSkew, 'options.clockSkew');
-
-    var authzHeaderName = options.authorizationHeaderName || 'authorization';
-
-    if (!request.headers[authzHeaderName]) {
-      throw new MissingHeaderError('no ' + authzHeaderName + ' header ' +
-                                   'present in the request');
-    }
-
-    options.clockSkew = options.clockSkew || 300;
-
-
-    var i = 0;
-    var state = State.New;
-    var substate = ParamsState.Name;
-    var tmpName = '';
-    var tmpValue = '';
-
-    var parsed = {
-      scheme: '',
-      params: {},
-      signingString: ''
-    };
-
-    var authz = request.headers[authzHeaderName];
-    for (i = 0; i < authz.length; i++) {
-      var c = authz.charAt(i);
-
-      switch (Number(state)) {
-
-      case State.New:
-        if (c !== ' ') parsed.scheme += c;
-        else state = State.Params;
-        break;
-
-      case State.Params:
-        switch (Number(substate)) {
-
-        case ParamsState.Name:
-          var code = c.charCodeAt(0);
-          // restricted name of A-Z / a-z
-          if ((code >= 0x41 && code <= 0x5a) || // A-Z
-              (code >= 0x61 && code <= 0x7a)) { // a-z
-            tmpName += c;
-          } else if (c === '=') {
-            if (tmpName.length === 0)
-              throw new InvalidHeaderError('bad param format');
-            substate = ParamsState.Quote;
-          } else {
-            throw new InvalidHeaderError('bad param format');
-          }
-          break;
-
-        case ParamsState.Quote:
-          if (c === '"') {
-            tmpValue = '';
-            substate = ParamsState.Value;
-          } else {
-            throw new InvalidHeaderError('bad param format');
-          }
-          break;
-
-        case ParamsState.Value:
-          if (c === '"') {
-            parsed.params[tmpName] = tmpValue;
-            substate = ParamsState.Comma;
-          } else {
-            tmpValue += c;
-          }
-          break;
-
-        case ParamsState.Comma:
-          if (c === ',') {
-            tmpName = '';
-            substate = ParamsState.Name;
-          } else {
-            throw new InvalidHeaderError('bad param format');
-          }
-          break;
-
-        default:
-          throw new Error('Invalid substate');
-        }
-        break;
-
-      default:
-        throw new Error('Invalid substate');
-      }
-
-    }
-
-    if (!parsed.params.headers || parsed.params.headers === '') {
-      if (request.headers['x-date']) {
-        parsed.params.headers = ['x-date'];
-      } else {
-        parsed.params.headers = ['date'];
-      }
-    } else {
-      parsed.params.headers = parsed.params.headers.split(' ');
-    }
-
-    // Minimally validate the parsed object
-    if (!parsed.scheme || parsed.scheme !== 'Signature')
-      throw new InvalidHeaderError('scheme was not "Signature"');
-
-    if (!parsed.params.keyId)
-      throw new InvalidHeaderError('keyId was not specified');
-
-    if (!parsed.params.algorithm)
-      throw new InvalidHeaderError('algorithm was not specified');
-
-    if (!parsed.params.signature)
-      throw new InvalidHeaderError('signature was not specified');
-
-    // Check the algorithm against the official list
-    parsed.params.algorithm = parsed.params.algorithm.toLowerCase();
-    try {
-      validateAlgorithm(parsed.params.algorithm);
-    } catch (e) {
-      if (e instanceof InvalidAlgorithmError)
-        throw (new InvalidParamsError(parsed.params.algorithm + ' is not ' +
-          'supported'));
-      else
-        throw (e);
-    }
-
-    // Build the signingString
-    for (i = 0; i < parsed.params.headers.length; i++) {
-      var h = parsed.params.headers[i].toLowerCase();
-      parsed.params.headers[i] = h;
-
-      if (h === 'request-line') {
-        if (!options.strict) {
-          /*
-           * We allow headers from the older spec drafts if strict parsing isn't
-           * specified in options.
-           */
-          parsed.signingString +=
-            request.method + ' ' + request.url + ' HTTP/' + request.httpVersion;
-        } else {
-          /* Strict parsing doesn't allow older draft headers. */
-          throw (new StrictParsingError('request-line is not a valid header ' +
-            'with strict parsing enabled.'));
-        }
-      } else if (h === '(request-target)') {
-        parsed.signingString +=
-          '(request-target): ' + request.method.toLowerCase() + ' ' +
-          request.url;
-      } else {
-        var value = request.headers[h];
-        if (value === undefined)
-          throw new MissingHeaderError(h + ' was not in the request');
-        parsed.signingString += h + ': ' + value;
-      }
-
-      if ((i + 1) < parsed.params.headers.length)
-        parsed.signingString += '\n';
-    }
-
-    // Check against the constraints
-    var date;
-    if (request.headers.date || request.headers['x-date']) {
-        if (request.headers['x-date']) {
-          date = new Date(request.headers['x-date']);
-        } else {
-          date = new Date(request.headers.date);
-        }
-      var now = new Date();
-      var skew = Math.abs(now.getTime() - date.getTime());
-
-      if (skew > options.clockSkew * 1000) {
-        throw new ExpiredRequestError('clock skew of ' +
-                                      (skew / 1000) +
-                                      's was greater than ' +
-                                      options.clockSkew + 's');
-      }
-    }
-
-    options.headers.forEach(function (hdr) {
-      // Remember that we already checked any headers in the params
-      // were in the request, so if this passes we're good.
-      if (parsed.params.headers.indexOf(hdr.toLowerCase()) < 0)
-        throw new MissingHeaderError(hdr + ' was not a signed header');
-    });
-
-    if (options.algorithms) {
-      if (options.algorithms.indexOf(parsed.params.algorithm) === -1)
-        throw new InvalidParamsError(parsed.params.algorithm +
-                                     ' is not a supported algorithm');
-    }
-
-    parsed.algorithm = parsed.params.algorithm.toUpperCase();
-    parsed.keyId = parsed.params.keyId;
-    return parsed;
-  }
-
-};
-
-
-/***/ }),
-/* 682 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2012 Joyent, Inc.  All rights reserved.
-
-var assert = __webpack_require__(16);
-var crypto = __webpack_require__(11);
-var http = __webpack_require__(87);
-var util = __webpack_require__(3);
-var sshpk = __webpack_require__(328);
-var jsprim = __webpack_require__(746);
-var utils = __webpack_require__(174);
-
-var sprintf = __webpack_require__(3).format;
-
-var HASH_ALGOS = utils.HASH_ALGOS;
-var PK_ALGOS = utils.PK_ALGOS;
-var InvalidAlgorithmError = utils.InvalidAlgorithmError;
-var HttpSignatureError = utils.HttpSignatureError;
-var validateAlgorithm = utils.validateAlgorithm;
-
-///--- Globals
-
-var AUTHZ_FMT =
-  'Signature keyId="%s",algorithm="%s",headers="%s",signature="%s"';
-
-///--- Specific Errors
-
-function MissingHeaderError(message) {
-  HttpSignatureError.call(this, message, MissingHeaderError);
-}
-util.inherits(MissingHeaderError, HttpSignatureError);
-
-function StrictParsingError(message) {
-  HttpSignatureError.call(this, message, StrictParsingError);
-}
-util.inherits(StrictParsingError, HttpSignatureError);
-
-/* See createSigner() */
-function RequestSigner(options) {
-  assert.object(options, 'options');
-
-  var alg = [];
-  if (options.algorithm !== undefined) {
-    assert.string(options.algorithm, 'options.algorithm');
-    alg = validateAlgorithm(options.algorithm);
-  }
-  this.rs_alg = alg;
-
-  /*
-   * RequestSigners come in two varieties: ones with an rs_signFunc, and ones
-   * with an rs_signer.
-   *
-   * rs_signFunc-based RequestSigners have to build up their entire signing
-   * string within the rs_lines array and give it to rs_signFunc as a single
-   * concat'd blob. rs_signer-based RequestSigners can add a line at a time to
-   * their signing state by using rs_signer.update(), thus only needing to
-   * buffer the hash function state and one line at a time.
-   */
-  if (options.sign !== undefined) {
-    assert.func(options.sign, 'options.sign');
-    this.rs_signFunc = options.sign;
-
-  } else if (alg[0] === 'hmac' && options.key !== undefined) {
-    assert.string(options.keyId, 'options.keyId');
-    this.rs_keyId = options.keyId;
-
-    if (typeof (options.key) !== 'string' && !Buffer.isBuffer(options.key))
-      throw (new TypeError('options.key for HMAC must be a string or Buffer'));
-
-    /*
-     * Make an rs_signer for HMACs, not a rs_signFunc -- HMACs digest their
-     * data in chunks rather than requiring it all to be given in one go
-     * at the end, so they are more similar to signers than signFuncs.
-     */
-    this.rs_signer = crypto.createHmac(alg[1].toUpperCase(), options.key);
-    this.rs_signer.sign = function () {
-      var digest = this.digest('base64');
-      return ({
-        hashAlgorithm: alg[1],
-        toString: function () { return (digest); }
-      });
-    };
-
-  } else if (options.key !== undefined) {
-    var key = options.key;
-    if (typeof (key) === 'string' || Buffer.isBuffer(key))
-      key = sshpk.parsePrivateKey(key);
-
-    assert.ok(sshpk.PrivateKey.isPrivateKey(key, [1, 2]),
-      'options.key must be a sshpk.PrivateKey');
-    this.rs_key = key;
-
-    assert.string(options.keyId, 'options.keyId');
-    this.rs_keyId = options.keyId;
-
-    if (!PK_ALGOS[key.type]) {
-      throw (new InvalidAlgorithmError(key.type.toUpperCase() + ' type ' +
-        'keys are not supported'));
-    }
-
-    if (alg[0] !== undefined && key.type !== alg[0]) {
-      throw (new InvalidAlgorithmError('options.key must be a ' +
-        alg[0].toUpperCase() + ' key, was given a ' +
-        key.type.toUpperCase() + ' key instead'));
-    }
-
-    this.rs_signer = key.createSign(alg[1]);
-
-  } else {
-    throw (new TypeError('options.sign (func) or options.key is required'));
-  }
-
-  this.rs_headers = [];
-  this.rs_lines = [];
-}
-
-/**
- * Adds a header to be signed, with its value, into this signer.
- *
- * @param {String} header
- * @param {String} value
- * @return {String} value written
- */
-RequestSigner.prototype.writeHeader = function (header, value) {
-  assert.string(header, 'header');
-  header = header.toLowerCase();
-  assert.string(value, 'value');
-
-  this.rs_headers.push(header);
-
-  if (this.rs_signFunc) {
-    this.rs_lines.push(header + ': ' + value);
-
-  } else {
-    var line = header + ': ' + value;
-    if (this.rs_headers.length > 0)
-      line = '\n' + line;
-    this.rs_signer.update(line);
-  }
-
-  return (value);
-};
-
-/**
- * Adds a default Date header, returning its value.
- *
- * @return {String}
- */
-RequestSigner.prototype.writeDateHeader = function () {
-  return (this.writeHeader('date', jsprim.rfc1123(new Date())));
-};
-
-/**
- * Adds the request target line to be signed.
- *
- * @param {String} method, HTTP method (e.g. 'get', 'post', 'put')
- * @param {String} path
- */
-RequestSigner.prototype.writeTarget = function (method, path) {
-  assert.string(method, 'method');
-  assert.string(path, 'path');
-  method = method.toLowerCase();
-  this.writeHeader('(request-target)', method + ' ' + path);
-};
-
-/**
- * Calculate the value for the Authorization header on this request
- * asynchronously.
- *
- * @param {Func} callback (err, authz)
- */
-RequestSigner.prototype.sign = function (cb) {
-  assert.func(cb, 'callback');
-
-  if (this.rs_headers.length < 1)
-    throw (new Error('At least one header must be signed'));
-
-  var alg, authz;
-  if (this.rs_signFunc) {
-    var data = this.rs_lines.join('\n');
-    var self = this;
-    this.rs_signFunc(data, function (err, sig) {
-      if (err) {
-        cb(err);
-        return;
-      }
-      try {
-        assert.object(sig, 'signature');
-        assert.string(sig.keyId, 'signature.keyId');
-        assert.string(sig.algorithm, 'signature.algorithm');
-        assert.string(sig.signature, 'signature.signature');
-        alg = validateAlgorithm(sig.algorithm);
-
-        authz = sprintf(AUTHZ_FMT,
-          sig.keyId,
-          sig.algorithm,
-          self.rs_headers.join(' '),
-          sig.signature);
-      } catch (e) {
-        cb(e);
-        return;
-      }
-      cb(null, authz);
-    });
-
-  } else {
-    try {
-      var sigObj = this.rs_signer.sign();
-    } catch (e) {
-      cb(e);
-      return;
-    }
-    alg = (this.rs_alg[0] || this.rs_key.type) + '-' + sigObj.hashAlgorithm;
-    var signature = sigObj.toString();
-    authz = sprintf(AUTHZ_FMT,
-      this.rs_keyId,
-      alg,
-      this.rs_headers.join(' '),
-      signature);
-    cb(null, authz);
-  }
-};
-
-///--- Exported API
-
-module.exports = {
-  /**
-   * Identifies whether a given object is a request signer or not.
-   *
-   * @param {Object} object, the object to identify
-   * @returns {Boolean}
-   */
-  isSigner: function (obj) {
-    if (typeof (obj) === 'object' && obj instanceof RequestSigner)
-      return (true);
-    return (false);
-  },
-
-  /**
-   * Creates a request signer, used to asynchronously build a signature
-   * for a request (does not have to be an http.ClientRequest).
-   *
-   * @param {Object} options, either:
-   *                   - {String} keyId
-   *                   - {String|Buffer} key
-   *                   - {String} algorithm (optional, required for HMAC)
-   *                 or:
-   *                   - {Func} sign (data, cb)
-   * @return {RequestSigner}
-   */
-  createSigner: function createSigner(options) {
-    return (new RequestSigner(options));
-  },
-
-  /**
-   * Adds an 'Authorization' header to an http.ClientRequest object.
-   *
-   * Note that this API will add a Date header if it's not already set. Any
-   * other headers in the options.headers array MUST be present, or this
-   * will throw.
-   *
-   * You shouldn't need to check the return type; it's just there if you want
-   * to be pedantic.
-   *
-   * The optional flag indicates whether parsing should use strict enforcement
-   * of the version draft-cavage-http-signatures-04 of the spec or beyond.
-   * The default is to be loose and support
-   * older versions for compatibility.
-   *
-   * @param {Object} request an instance of http.ClientRequest.
-   * @param {Object} options signing parameters object:
-   *                   - {String} keyId required.
-   *                   - {String} key required (either a PEM or HMAC key).
-   *                   - {Array} headers optional; defaults to ['date'].
-   *                   - {String} algorithm optional (unless key is HMAC);
-   *                              default is the same as the sshpk default
-   *                              signing algorithm for the type of key given
-   *                   - {String} httpVersion optional; defaults to '1.1'.
-   *                   - {Boolean} strict optional; defaults to 'false'.
-   * @return {Boolean} true if Authorization (and optionally Date) were added.
-   * @throws {TypeError} on bad parameter types (input).
-   * @throws {InvalidAlgorithmError} if algorithm was bad or incompatible with
-   *                                 the given key.
-   * @throws {sshpk.KeyParseError} if key was bad.
-   * @throws {MissingHeaderError} if a header to be signed was specified but
-   *                              was not present.
-   */
-  signRequest: function signRequest(request, options) {
-    assert.object(request, 'request');
-    assert.object(options, 'options');
-    assert.optionalString(options.algorithm, 'options.algorithm');
-    assert.string(options.keyId, 'options.keyId');
-    assert.optionalArrayOfString(options.headers, 'options.headers');
-    assert.optionalString(options.httpVersion, 'options.httpVersion');
-
-    if (!request.getHeader('Date'))
-      request.setHeader('Date', jsprim.rfc1123(new Date()));
-    if (!options.headers)
-      options.headers = ['date'];
-    if (!options.httpVersion)
-      options.httpVersion = '1.1';
-
-    var alg = [];
-    if (options.algorithm) {
-      options.algorithm = options.algorithm.toLowerCase();
-      alg = validateAlgorithm(options.algorithm);
-    }
-
-    var i;
-    var stringToSign = '';
-    for (i = 0; i < options.headers.length; i++) {
-      if (typeof (options.headers[i]) !== 'string')
-        throw new TypeError('options.headers must be an array of Strings');
-
-      var h = options.headers[i].toLowerCase();
-
-      if (h === 'request-line') {
-        if (!options.strict) {
-          /**
-           * We allow headers from the older spec drafts if strict parsing isn't
-           * specified in options.
-           */
-          stringToSign +=
-            request.method + ' ' + request.path + ' HTTP/' +
-            options.httpVersion;
-        } else {
-          /* Strict parsing doesn't allow older draft headers. */
-          throw (new StrictParsingError('request-line is not a valid header ' +
-            'with strict parsing enabled.'));
-        }
-      } else if (h === '(request-target)') {
-        stringToSign +=
-          '(request-target): ' + request.method.toLowerCase() + ' ' +
-          request.path;
-      } else {
-        var value = request.getHeader(h);
-        if (value === undefined || value === '') {
-          throw new MissingHeaderError(h + ' was not in the request');
-        }
-        stringToSign += h + ': ' + value;
-      }
-
-      if ((i + 1) < options.headers.length)
-        stringToSign += '\n';
-    }
-
-    /* This is just for unit tests. */
-    if (request.hasOwnProperty('_stringToSign')) {
-      request._stringToSign = stringToSign;
-    }
-
-    var signature;
-    if (alg[0] === 'hmac') {
-      if (typeof (options.key) !== 'string' && !Buffer.isBuffer(options.key))
-        throw (new TypeError('options.key must be a string or Buffer'));
-
-      var hmac = crypto.createHmac(alg[1].toUpperCase(), options.key);
-      hmac.update(stringToSign);
-      signature = hmac.digest('base64');
-
-    } else {
-      var key = options.key;
-      if (typeof (key) === 'string' || Buffer.isBuffer(key))
-        key = sshpk.parsePrivateKey(options.key);
-
-      assert.ok(sshpk.PrivateKey.isPrivateKey(key, [1, 2]),
-        'options.key must be a sshpk.PrivateKey');
-
-      if (!PK_ALGOS[key.type]) {
-        throw (new InvalidAlgorithmError(key.type.toUpperCase() + ' type ' +
-          'keys are not supported'));
-      }
-
-      if (alg[0] !== undefined && key.type !== alg[0]) {
-        throw (new InvalidAlgorithmError('options.key must be a ' +
-          alg[0].toUpperCase() + ' key, was given a ' +
-          key.type.toUpperCase() + ' key instead'));
-      }
-
-      var signer = key.createSign(alg[1]);
-      signer.update(stringToSign);
-      var sigObj = signer.sign();
-      if (!HASH_ALGOS[sigObj.hashAlgorithm]) {
-        throw (new InvalidAlgorithmError(sigObj.hashAlgorithm.toUpperCase() +
-          ' is not a supported hash algorithm'));
-      }
-      options.algorithm = key.type + '-' + sigObj.hashAlgorithm;
-      signature = sigObj.toString();
-      assert.notStrictEqual(signature, '', 'empty signature produced');
-    }
-
-    var authzHeaderName = options.authorizationHeaderName || 'Authorization';
-
-    request.setHeader(authzHeaderName, sprintf(AUTHZ_FMT,
-                                               options.keyId,
-                                               options.algorithm,
-                                               options.headers.join(' '),
-                                               signature));
-
-    return true;
-  }
-
-};
-
-
-/***/ }),
-/* 683 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2015 Joyent, Inc.
-
-var assert = __webpack_require__(16);
-var crypto = __webpack_require__(11);
-var sshpk = __webpack_require__(328);
-var utils = __webpack_require__(174);
-
-var HASH_ALGOS = utils.HASH_ALGOS;
-var PK_ALGOS = utils.PK_ALGOS;
-var InvalidAlgorithmError = utils.InvalidAlgorithmError;
-var HttpSignatureError = utils.HttpSignatureError;
-var validateAlgorithm = utils.validateAlgorithm;
-
-///--- Exported API
-
-module.exports = {
-  /**
-   * Verify RSA/DSA signature against public key.  You are expected to pass in
-   * an object that was returned from `parse()`.
-   *
-   * @param {Object} parsedSignature the object you got from `parse`.
-   * @param {String} pubkey RSA/DSA private key PEM.
-   * @return {Boolean} true if valid, false otherwise.
-   * @throws {TypeError} if you pass in bad arguments.
-   * @throws {InvalidAlgorithmError}
-   */
-  verifySignature: function verifySignature(parsedSignature, pubkey) {
-    assert.object(parsedSignature, 'parsedSignature');
-    if (typeof (pubkey) === 'string' || Buffer.isBuffer(pubkey))
-      pubkey = sshpk.parseKey(pubkey);
-    assert.ok(sshpk.Key.isKey(pubkey, [1, 1]), 'pubkey must be a sshpk.Key');
-
-    var alg = validateAlgorithm(parsedSignature.algorithm);
-    if (alg[0] === 'hmac' || alg[0] !== pubkey.type)
-      return (false);
-
-    var v = pubkey.createVerify(alg[1]);
-    v.update(parsedSignature.signingString);
-    return (v.verify(parsedSignature.params.signature, 'base64'));
-  },
-
-  /**
-   * Verify HMAC against shared secret.  You are expected to pass in an object
-   * that was returned from `parse()`.
-   *
-   * @param {Object} parsedSignature the object you got from `parse`.
-   * @param {String} secret HMAC shared secret.
-   * @return {Boolean} true if valid, false otherwise.
-   * @throws {TypeError} if you pass in bad arguments.
-   * @throws {InvalidAlgorithmError}
-   */
-  verifyHMAC: function verifyHMAC(parsedSignature, secret) {
-    assert.object(parsedSignature, 'parsedHMAC');
-    assert.string(secret, 'secret');
-
-    var alg = validateAlgorithm(parsedSignature.algorithm);
-    if (alg[0] !== 'hmac')
-      return (false);
-
-    var hashAlg = alg[1].toUpperCase();
-
-    var hmac = crypto.createHmac(hashAlg, secret);
-    hmac.update(parsedSignature.signingString);
-
-    /*
-     * Now double-hash to avoid leaking timing information - there's
-     * no easy constant-time compare in JS, so we use this approach
-     * instead. See for more info:
-     * https://www.isecpartners.com/blog/2011/february/double-hmac-
-     * verification.aspx
-     */
-    var h1 = crypto.createHmac(hashAlg, secret);
-    h1.update(hmac.digest());
-    h1 = h1.digest();
-    var h2 = crypto.createHmac(hashAlg, secret);
-    h2.update(new Buffer(parsedSignature.params.signature, 'base64'));
-    h2 = h2.digest();
-
-    /* Node 0.8 returns strings from .digest(). */
-    if (typeof (h1) === 'string')
-      return (h1 === h2);
-    /* And node 0.10 lacks the .equals() method on Buffers. */
-    if (Buffer.isBuffer(h1) && !h1.equals)
-      return (h1.toString('binary') === h2.toString('binary'));
-
-    return (h1.equals(h2));
-  }
-};
-
-
-/***/ }),
-/* 684 */
-/***/ (function(module, exports) {
-
-exports.parse = exports.decode = decode
-
-exports.stringify = exports.encode = encode
-
-exports.safe = safe
-exports.unsafe = unsafe
-
-var eol = typeof process !== 'undefined' &&
-  process.platform === 'win32' ? '\r\n' : '\n'
-
-function encode (obj, opt) {
-  var children = []
-  var out = ''
-
-  if (typeof opt === 'string') {
-    opt = {
-      section: opt,
-      whitespace: false
-    }
-  } else {
-    opt = opt || {}
-    opt.whitespace = opt.whitespace === true
-  }
-
-  var separator = opt.whitespace ? ' = ' : '='
-
-  Object.keys(obj).forEach(function (k, _, __) {
-    var val = obj[k]
-    if (val && Array.isArray(val)) {
-      val.forEach(function (item) {
-        out += safe(k + '[]') + separator + safe(item) + '\n'
-      })
-    } else if (val && typeof val === 'object') {
-      children.push(k)
-    } else {
-      out += safe(k) + separator + safe(val) + eol
-    }
-  })
-
-  if (opt.section && out.length) {
-    out = '[' + safe(opt.section) + ']' + eol + out
-  }
-
-  children.forEach(function (k, _, __) {
-    var nk = dotSplit(k).join('\\.')
-    var section = (opt.section ? opt.section + '.' : '') + nk
-    var child = encode(obj[k], {
-      section: section,
-      whitespace: opt.whitespace
-    })
-    if (out.length && child.length) {
-      out += eol
-    }
-    out += child
-  })
-
-  return out
-}
-
-function dotSplit (str) {
-  return str.replace(/\1/g, '\u0002LITERAL\\1LITERAL\u0002')
-    .replace(/\\\./g, '\u0001')
-    .split(/\./).map(function (part) {
-      return part.replace(/\1/g, '\\.')
-      .replace(/\2LITERAL\\1LITERAL\2/g, '\u0001')
-    })
-}
-
-function decode (str) {
-  var out = {}
-  var p = out
-  var section = null
-  //          section     |key      = value
-  var re = /^\[([^\]]*)\]$|^([^=]+)(=(.*))?$/i
-  var lines = str.split(/[\r\n]+/g)
-
-  lines.forEach(function (line, _, __) {
-    if (!line || line.match(/^\s*[;#]/)) return
-    var match = line.match(re)
-    if (!match) return
-    if (match[1] !== undefined) {
-      section = unsafe(match[1])
-      p = out[section] = out[section] || {}
-      return
-    }
-    var key = unsafe(match[2])
-    var value = match[3] ? unsafe(match[4]) : true
-    switch (value) {
-      case 'true':
-      case 'false':
-      case 'null': value = JSON.parse(value)
-    }
-
-    // Convert keys with '[]' suffix to an array
-    if (key.length > 2 && key.slice(-2) === '[]') {
-      key = key.substring(0, key.length - 2)
-      if (!p[key]) {
-        p[key] = []
-      } else if (!Array.isArray(p[key])) {
-        p[key] = [p[key]]
-      }
-    }
-
-    // safeguard against resetting a previously defined
-    // array by accidentally forgetting the brackets
-    if (Array.isArray(p[key])) {
-      p[key].push(value)
-    } else {
-      p[key] = value
-    }
-  })
-
-  // {a:{y:1},"a.b":{x:2}} --> {a:{y:1,b:{x:2}}}
-  // use a filter to return the keys that have to be deleted.
-  Object.keys(out).filter(function (k, _, __) {
-    if (!out[k] ||
-      typeof out[k] !== 'object' ||
-      Array.isArray(out[k])) {
-      return false
-    }
-    // see if the parent section is also an object.
-    // if so, add it to that, and mark this one for deletion
-    var parts = dotSplit(k)
-    var p = out
-    var l = parts.pop()
-    var nl = l.replace(/\\\./g, '.')
-    parts.forEach(function (part, _, __) {
-      if (!p[part] || typeof p[part] !== 'object') p[part] = {}
-      p = p[part]
-    })
-    if (p === out && nl === l) {
-      return false
-    }
-    p[nl] = out[k]
-    return true
-  }).forEach(function (del, _, __) {
-    delete out[del]
-  })
-
-  return out
-}
-
-function isQuoted (val) {
-  return (val.charAt(0) === '"' && val.slice(-1) === '"') ||
-    (val.charAt(0) === "'" && val.slice(-1) === "'")
-}
-
-function safe (val) {
-  return (typeof val !== 'string' ||
-    val.match(/[=\r\n]/) ||
-    val.match(/^\[/) ||
-    (val.length > 1 &&
-     isQuoted(val)) ||
-    val !== val.trim())
-      ? JSON.stringify(val)
-      : val.replace(/;/g, '\\;').replace(/#/g, '\\#')
-}
-
-function unsafe (val, doUnesc) {
-  val = (val || '').trim()
-  if (isQuoted(val)) {
-    // remove the single quotes before calling JSON.parse
-    if (val.charAt(0) === "'") {
-      val = val.substr(1, val.length - 2)
-    }
-    try { val = JSON.parse(val) } catch (_) {}
-  } else {
-    // walk the val to find the first not-escaped ; character
-    var esc = false
-    var unesc = ''
-    for (var i = 0, l = val.length; i < l; i++) {
-      var c = val.charAt(i)
-      if (esc) {
-        if ('\\;#'.indexOf(c) !== -1) {
-          unesc += c
-        } else {
-          unesc += '\\' + c
-        }
-        esc = false
-      } else if (';#'.indexOf(c) !== -1) {
-        break
-      } else if (c === '\\') {
-        esc = true
-      } else {
-        unesc += c
-      }
-    }
-    if (esc) {
-      unesc += '\\'
-    }
-    return unesc.trim()
-  }
-  return val
-}
-
-
-/***/ }),
-/* 685 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var _ = __webpack_require__(38);
-
-/**
- * Choice object
- * Normalize input as choice object
- * @constructor
- * @param {String|Object} val  Choice value. If an object is passed, it should contains
- *                             at least one of `value` or `name` property
- */
-
-module.exports = class Choice {
-  constructor(val, answers) {
-    // Don't process Choice and Separator object
-    if (val instanceof Choice || val.type === 'separator') {
-      return val;
-    }
-
-    if (_.isString(val)) {
-      this.name = val;
-      this.value = val;
-      this.short = val;
-    } else {
-      _.extend(this, val, {
-        name: val.name || val.value,
-        value: 'value' in val ? val.value : val.name,
-        short: val.short || val.name || val.value
-      });
-    }
-
-    if (_.isFunction(val.disabled)) {
-      this.disabled = val.disabled(answers);
-    } else {
-      this.disabled = val.disabled;
-    }
-  }
-};
-
-
-/***/ }),
-/* 686 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var assert = __webpack_require__(28);
-var _ = __webpack_require__(38);
-var Separator = __webpack_require__(175);
-var Choice = __webpack_require__(685);
-
-/**
- * Choices collection
- * Collection of multiple `choice` object
- * @constructor
- * @param {Array} choices  All `choice` to keep in the collection
- */
-
-module.exports = class Choices {
-  constructor(choices, answers) {
-    this.choices = choices.map(val => {
-      if (val.type === 'separator') {
-        if (!(val instanceof Separator)) {
-          val = new Separator(val.line);
-        }
-        return val;
-      }
-      return new Choice(val, answers);
-    });
-
-    this.realChoices = this.choices
-      .filter(Separator.exclude)
-      .filter(item => !item.disabled);
-
-    Object.defineProperty(this, 'length', {
-      get() {
-        return this.choices.length;
-      },
-      set(val) {
-        this.choices.length = val;
-      }
-    });
-
-    Object.defineProperty(this, 'realLength', {
-      get() {
-        return this.realChoices.length;
-      },
-      set() {
-        throw new Error('Cannot set `realLength` of a Choices collection');
-      }
-    });
-  }
-
-  /**
-   * Get a valid choice from the collection
-   * @param  {Number} selector  The selected choice index
-   * @return {Choice|Undefined} Return the matched choice or undefined
-   */
-
-  getChoice(selector) {
-    assert(_.isNumber(selector));
-    return this.realChoices[selector];
-  }
-
-  /**
-   * Get a raw element from the collection
-   * @param  {Number} selector  The selected index value
-   * @return {Choice|Undefined} Return the matched choice or undefined
-   */
-
-  get(selector) {
-    assert(_.isNumber(selector));
-    return this.choices[selector];
-  }
-
-  /**
-   * Match the valid choices against a where clause
-   * @param  {Object} whereClause Lodash `where` clause
-   * @return {Array}              Matching choices or empty array
-   */
-
-  where(whereClause) {
-    return _.filter(this.realChoices, whereClause);
-  }
-
-  /**
-   * Pluck a particular key from the choices
-   * @param  {String} propertyName Property name to select
-   * @return {Array}               Selected properties
-   */
-
-  pluck(propertyName) {
-    return _.map(this.realChoices, propertyName);
-  }
-
-  // Expose usual Array methods
-  indexOf() {
-    return this.choices.indexOf.apply(this.choices, arguments);
-  }
-
-  forEach() {
-    return this.choices.forEach.apply(this.choices, arguments);
-  }
-
-  filter() {
-    return this.choices.filter.apply(this.choices, arguments);
-  }
-
-  find(func) {
-    return _.find(this.choices, func);
-  }
-
-  push() {
-    var objs = _.map(arguments, val => new Choice(val));
-    this.choices.push.apply(this.choices, objs);
-    this.realChoices = this.choices.filter(Separator.exclude);
-    return this.choices;
-  }
-};
-
-
-/***/ }),
-/* 687 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `list` type prompt
- */
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-var cliCursor = __webpack_require__(381);
-var figures = __webpack_require__(270);
-var { map, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var observe = __webpack_require__(80);
-var Paginator = __webpack_require__(176);
-
-class CheckboxPrompt extends Base {
-  constructor(questions, rl, answers) {
-    super(questions, rl, answers);
-
-    if (!this.opt.choices) {
-      this.throwParamError('choices');
-    }
-
-    if (_.isArray(this.opt.default)) {
-      this.opt.choices.forEach(function(choice) {
-        if (this.opt.default.indexOf(choice.value) >= 0) {
-          choice.checked = true;
-        }
-      }, this);
-    }
-
-    this.pointer = 0;
-    this.firstRender = true;
-
-    // Make sure no default is set (so it won't be printed)
-    this.opt.default = null;
-
-    this.paginator = new Paginator(this.screen);
-  }
-
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    var events = observe(this.rl);
-
-    var validation = this.handleSubmitEvents(
-      events.line.pipe(map(this.getCurrentValue.bind(this)))
-    );
-    validation.success.forEach(this.onEnd.bind(this));
-    validation.error.forEach(this.onError.bind(this));
-
-    events.normalizedUpKey
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onUpKey.bind(this));
-    events.normalizedDownKey
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onDownKey.bind(this));
-    events.numberKey
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onNumberKey.bind(this));
-    events.spaceKey
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onSpaceKey.bind(this));
-    events.aKey.pipe(takeUntil(validation.success)).forEach(this.onAllKey.bind(this));
-    events.iKey.pipe(takeUntil(validation.success)).forEach(this.onInverseKey.bind(this));
-
-    // Init the prompt
-    cliCursor.hide();
-    this.render();
-    this.firstRender = false;
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {CheckboxPrompt} self
-   */
-
-  render(error) {
-    // Render question
-    var message = this.getQuestion();
-    var bottomContent = '';
-
-    if (this.firstRender) {
-      message +=
-        '(Press ' +
-        chalk.cyan.bold('<space>') +
-        ' to select, ' +
-        chalk.cyan.bold('<a>') +
-        ' to toggle all, ' +
-        chalk.cyan.bold('<i>') +
-        ' to invert selection)';
-    }
-
-    // Render choices or answer depending on the state
-    if (this.status === 'answered') {
-      message += chalk.cyan(this.selection.join(', '));
-    } else {
-      var choicesStr = renderChoices(this.opt.choices, this.pointer);
-      var indexPosition = this.opt.choices.indexOf(
-        this.opt.choices.getChoice(this.pointer)
-      );
-      message +=
-        '\n' + this.paginator.paginate(choicesStr, indexPosition, this.opt.pageSize);
-    }
-
-    if (error) {
-      bottomContent = chalk.red('>> ') + error;
-    }
-
-    this.screen.render(message, bottomContent);
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  onEnd(state) {
-    this.status = 'answered';
-
-    // Rerender prompt (and clean subline error)
-    this.render();
-
-    this.screen.done();
-    cliCursor.show();
-    this.done(state.value);
-  }
-
-  onError(state) {
-    this.render(state.isValid);
-  }
-
-  getCurrentValue() {
-    var choices = this.opt.choices.filter(function(choice) {
-      return Boolean(choice.checked) && !choice.disabled;
-    });
-
-    this.selection = _.map(choices, 'short');
-    return _.map(choices, 'value');
-  }
-
-  onUpKey() {
-    var len = this.opt.choices.realLength;
-    this.pointer = this.pointer > 0 ? this.pointer - 1 : len - 1;
-    this.render();
-  }
-
-  onDownKey() {
-    var len = this.opt.choices.realLength;
-    this.pointer = this.pointer < len - 1 ? this.pointer + 1 : 0;
-    this.render();
-  }
-
-  onNumberKey(input) {
-    if (input <= this.opt.choices.realLength) {
-      this.pointer = input - 1;
-      this.toggleChoice(this.pointer);
-    }
-    this.render();
-  }
-
-  onSpaceKey() {
-    this.toggleChoice(this.pointer);
-    this.render();
-  }
-
-  onAllKey() {
-    var shouldBeChecked = Boolean(
-      this.opt.choices.find(function(choice) {
-        return choice.type !== 'separator' && !choice.checked;
-      })
-    );
-
-    this.opt.choices.forEach(function(choice) {
-      if (choice.type !== 'separator') {
-        choice.checked = shouldBeChecked;
-      }
-    });
-
-    this.render();
-  }
-
-  onInverseKey() {
-    this.opt.choices.forEach(function(choice) {
-      if (choice.type !== 'separator') {
-        choice.checked = !choice.checked;
-      }
-    });
-
-    this.render();
-  }
-
-  toggleChoice(index) {
-    var item = this.opt.choices.getChoice(index);
-    if (item !== undefined) {
-      this.opt.choices.getChoice(index).checked = !item.checked;
-    }
-  }
-}
-
-/**
- * Function for rendering checkbox choices
- * @param  {Number} pointer Position of the pointer
- * @return {String}         Rendered content
- */
-
-function renderChoices(choices, pointer) {
-  var output = '';
-  var separatorOffset = 0;
-
-  choices.forEach(function(choice, i) {
-    if (choice.type === 'separator') {
-      separatorOffset++;
-      output += ' ' + choice + '\n';
-      return;
-    }
-
-    if (choice.disabled) {
-      separatorOffset++;
-      output += ' - ' + choice.name;
-      output += ' (' + (_.isString(choice.disabled) ? choice.disabled : 'Disabled') + ')';
-    } else {
-      var line = getCheckbox(choice.checked) + ' ' + choice.name;
-      if (i - separatorOffset === pointer) {
-        output += chalk.cyan(figures.pointer + line);
-      } else {
-        output += ' ' + line;
-      }
-    }
-
-    output += '\n';
-  });
-
-  return output.replace(/\n$/, '');
-}
-
-/**
- * Get the checkbox
- * @param  {Boolean} checked - add a X or not to the checkbox
- * @return {String} Composited checkbox string
- */
-
-function getCheckbox(checked) {
-  return checked ? chalk.green(figures.radioOn) : figures.radioOff;
-}
-
-module.exports = CheckboxPrompt;
-
-
-/***/ }),
-/* 688 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `confirm` type prompt
- */
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-var { take, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var observe = __webpack_require__(80);
-
-class ConfirmPrompt extends Base {
-  constructor(questions, rl, answers) {
-    super(questions, rl, answers);
-
-    var rawDefault = true;
-
-    _.extend(this.opt, {
-      filter: function(input) {
-        var value = rawDefault;
-        if (input != null && input !== '') {
-          value = /^y(es)?/i.test(input);
-        }
-        return value;
-      }
-    });
-
-    if (_.isBoolean(this.opt.default)) {
-      rawDefault = this.opt.default;
-    }
-
-    this.opt.default = rawDefault ? 'Y/n' : 'y/N';
-
-    return this;
-  }
-
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb   Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    // Once user confirm (enter key)
-    var events = observe(this.rl);
-    events.keypress.pipe(takeUntil(events.line)).forEach(this.onKeypress.bind(this));
-
-    events.line.pipe(take(1)).forEach(this.onEnd.bind(this));
-
-    // Init
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {ConfirmPrompt} self
-   */
-
-  render(answer) {
-    var message = this.getQuestion();
-
-    if (typeof answer === 'boolean') {
-      message += chalk.cyan(answer ? 'Yes' : 'No');
-    } else {
-      message += this.rl.line;
-    }
-
-    this.screen.render(message);
-
-    return this;
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  onEnd(input) {
-    this.status = 'answered';
-
-    var output = this.opt.filter(input);
-    this.render(output);
-
-    this.screen.done();
-    this.done(output);
-  }
-
-  /**
-   * When user press a key
-   */
-
-  onKeypress() {
-    this.render();
-  }
-}
-
-module.exports = ConfirmPrompt;
-
-
-/***/ }),
-/* 689 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `editor` type prompt
- */
-
-var chalk = __webpack_require__(30);
-var editAsync = __webpack_require__(709).editAsync;
-var Base = __webpack_require__(79);
-var observe = __webpack_require__(80);
-var { Subject } = __webpack_require__(182);
-
-class EditorPrompt extends Base {
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    this.editorResult = new Subject();
-
-    // Open Editor on "line" (Enter Key)
-    var events = observe(this.rl);
-    this.lineSubscription = events.line.subscribe(this.startExternalEditor.bind(this));
-
-    // Trigger Validation when editor closes
-    var validation = this.handleSubmitEvents(this.editorResult);
-    validation.success.forEach(this.onEnd.bind(this));
-    validation.error.forEach(this.onError.bind(this));
-
-    // Prevents default from being printed on screen (can look weird with multiple lines)
-    this.currentText = this.opt.default;
-    this.opt.default = null;
-
-    // Init
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {EditorPrompt} self
-   */
-
-  render(error) {
-    var bottomContent = '';
-    var message = this.getQuestion();
-
-    if (this.status === 'answered') {
-      message += chalk.dim('Received');
-    } else {
-      message += chalk.dim('Press <enter> to launch your preferred editor.');
-    }
-
-    if (error) {
-      bottomContent = chalk.red('>> ') + error;
-    }
-
-    this.screen.render(message, bottomContent);
-  }
-
-  /**
-   * Launch $EDITOR on user press enter
-   */
-
-  startExternalEditor() {
-    // Pause Readline to prevent stdin and stdout from being modified while the editor is showing
-    this.rl.pause();
-    editAsync(this.currentText, this.endExternalEditor.bind(this));
-  }
-
-  endExternalEditor(error, result) {
-    this.rl.resume();
-    if (error) {
-      this.editorResult.error(error);
-    } else {
-      this.editorResult.next(result);
-    }
-  }
-
-  onEnd(state) {
-    this.editorResult.unsubscribe();
-    this.lineSubscription.unsubscribe();
-    this.answer = state.value;
-    this.status = 'answered';
-    // Re-render prompt
-    this.render();
-    this.screen.done();
-    this.done(this.answer);
-  }
-
-  onError(state) {
-    this.render(state.isValid);
-  }
-}
-
-module.exports = EditorPrompt;
-
-
-/***/ }),
-/* 690 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `rawlist` type prompt
- */
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-var { map, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var Separator = __webpack_require__(175);
-var observe = __webpack_require__(80);
-var Paginator = __webpack_require__(176);
-
-class ExpandPrompt extends Base {
-  constructor(questions, rl, answers) {
-    super(questions, rl, answers);
-
-    if (!this.opt.choices) {
-      this.throwParamError('choices');
-    }
-
-    this.validateChoices(this.opt.choices);
-
-    // Add the default `help` (/expand) option
-    this.opt.choices.push({
-      key: 'h',
-      name: 'Help, list all options',
-      value: 'help'
-    });
-
-    this.opt.validate = choice => {
-      if (choice == null) {
-        return 'Please enter a valid command';
-      }
-
-      return choice !== 'help';
-    };
-
-    // Setup the default string (capitalize the default key)
-    this.opt.default = this.generateChoicesString(this.opt.choices, this.opt.default);
-
-    this.paginator = new Paginator(this.screen);
-  }
-
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    // Save user answer and update prompt to show selected option.
-    var events = observe(this.rl);
-    var validation = this.handleSubmitEvents(
-      events.line.pipe(map(this.getCurrentValue.bind(this)))
-    );
-    validation.success.forEach(this.onSubmit.bind(this));
-    validation.error.forEach(this.onError.bind(this));
-    this.keypressObs = events.keypress
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onKeypress.bind(this));
-
-    // Init the prompt
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {ExpandPrompt} self
-   */
-
-  render(error, hint) {
-    var message = this.getQuestion();
-    var bottomContent = '';
-
-    if (this.status === 'answered') {
-      message += chalk.cyan(this.answer);
-    } else if (this.status === 'expanded') {
-      var choicesStr = renderChoices(this.opt.choices, this.selectedKey);
-      message += this.paginator.paginate(choicesStr, this.selectedKey, this.opt.pageSize);
-      message += '\n  Answer: ';
-    }
-
-    message += this.rl.line;
-
-    if (error) {
-      bottomContent = chalk.red('>> ') + error;
-    }
-
-    if (hint) {
-      bottomContent = chalk.cyan('>> ') + hint;
-    }
-
-    this.screen.render(message, bottomContent);
-  }
-
-  getCurrentValue(input) {
-    if (!input) {
-      input = this.rawDefault;
-    }
-    var selected = this.opt.choices.where({ key: input.toLowerCase().trim() })[0];
-    if (!selected) {
-      return null;
-    }
-
-    return selected.value;
-  }
-
-  /**
-   * Generate the prompt choices string
-   * @return {String}  Choices string
-   */
-
-  getChoices() {
-    var output = '';
-
-    this.opt.choices.forEach(choice => {
-      output += '\n  ';
-
-      if (choice.type === 'separator') {
-        output += ' ' + choice;
-        return;
-      }
-
-      var choiceStr = choice.key + ') ' + choice.name;
-      if (this.selectedKey === choice.key) {
-        choiceStr = chalk.cyan(choiceStr);
-      }
-      output += choiceStr;
-    });
-
-    return output;
-  }
-
-  onError(state) {
-    if (state.value === 'help') {
-      this.selectedKey = '';
-      this.status = 'expanded';
-      this.render();
-      return;
-    }
-    this.render(state.isValid);
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  onSubmit(state) {
-    this.status = 'answered';
-    var choice = this.opt.choices.where({ value: state.value })[0];
-    this.answer = choice.short || choice.name;
-
-    // Re-render prompt
-    this.render();
-    this.screen.done();
-    this.done(state.value);
-  }
-
-  /**
-   * When user press a key
-   */
-
-  onKeypress() {
-    this.selectedKey = this.rl.line.toLowerCase();
-    var selected = this.opt.choices.where({ key: this.selectedKey })[0];
-    if (this.status === 'expanded') {
-      this.render();
-    } else {
-      this.render(null, selected ? selected.name : null);
-    }
-  }
-
-  /**
-   * Validate the choices
-   * @param {Array} choices
-   */
-
-  validateChoices(choices) {
-    var formatError;
-    var errors = [];
-    var keymap = {};
-    choices.filter(Separator.exclude).forEach(choice => {
-      if (!choice.key || choice.key.length !== 1) {
-        formatError = true;
-      }
-      if (keymap[choice.key]) {
-        errors.push(choice.key);
-      }
-      keymap[choice.key] = true;
-      choice.key = String(choice.key).toLowerCase();
-    });
-
-    if (formatError) {
-      throw new Error(
-        'Format error: `key` param must be a single letter and is required.'
-      );
-    }
-    if (keymap.h) {
-      throw new Error(
-        'Reserved key error: `key` param cannot be `h` - this value is reserved.'
-      );
-    }
-    if (errors.length) {
-      throw new Error(
-        'Duplicate key error: `key` param must be unique. Duplicates: ' +
-          _.uniq(errors).join(', ')
-      );
-    }
-  }
-
-  /**
-   * Generate a string out of the choices keys
-   * @param  {Array}  choices
-   * @param  {Number|String} default - the choice index or name to capitalize
-   * @return {String} The rendered choices key string
-   */
-  generateChoicesString(choices, defaultChoice) {
-    var defIndex = choices.realLength - 1;
-    if (_.isNumber(defaultChoice) && this.opt.choices.getChoice(defaultChoice)) {
-      defIndex = defaultChoice;
-    } else if (_.isString(defaultChoice)) {
-      let index = _.findIndex(
-        choices.realChoices,
-        ({ value }) => value === defaultChoice
-      );
-      defIndex = index === -1 ? defIndex : index;
-    }
-    var defStr = this.opt.choices.pluck('key');
-    this.rawDefault = defStr[defIndex];
-    defStr[defIndex] = String(defStr[defIndex]).toUpperCase();
-    return defStr.join('');
-  }
-}
-
-/**
- * Function for rendering checkbox choices
- * @param  {String} pointer Selected key
- * @return {String}         Rendered content
- */
-
-function renderChoices(choices, pointer) {
-  var output = '';
-
-  choices.forEach(choice => {
-    output += '\n  ';
-
-    if (choice.type === 'separator') {
-      output += ' ' + choice;
-      return;
-    }
-
-    var choiceStr = choice.key + ') ' + choice.name;
-    if (pointer === choice.key) {
-      choiceStr = chalk.cyan(choiceStr);
-    }
-    output += choiceStr;
-  });
-
-  return output;
-}
-
-module.exports = ExpandPrompt;
-
-
-/***/ }),
-/* 691 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `list` type prompt
- */
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-var figures = __webpack_require__(270);
-var cliCursor = __webpack_require__(381);
-var runAsync = __webpack_require__(181);
-var { flatMap, map, take, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var observe = __webpack_require__(80);
-var Paginator = __webpack_require__(176);
-
-class ListPrompt extends Base {
-  constructor(questions, rl, answers) {
-    super(questions, rl, answers);
-
-    if (!this.opt.choices) {
-      this.throwParamError('choices');
-    }
-
-    this.firstRender = true;
-    this.selected = 0;
-
-    var def = this.opt.default;
-
-    // If def is a Number, then use as index. Otherwise, check for value.
-    if (_.isNumber(def) && def >= 0 && def < this.opt.choices.realLength) {
-      this.selected = def;
-    } else if (!_.isNumber(def) && def != null) {
-      let index = _.findIndex(this.opt.choices.realChoices, ({ value }) => value === def);
-      this.selected = Math.max(index, 0);
-    }
-
-    // Make sure no default is set (so it won't be printed)
-    this.opt.default = null;
-
-    this.paginator = new Paginator(this.screen);
-  }
-
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    var self = this;
-
-    var events = observe(this.rl);
-    events.normalizedUpKey.pipe(takeUntil(events.line)).forEach(this.onUpKey.bind(this));
-    events.normalizedDownKey
-      .pipe(takeUntil(events.line))
-      .forEach(this.onDownKey.bind(this));
-    events.numberKey.pipe(takeUntil(events.line)).forEach(this.onNumberKey.bind(this));
-    events.line
-      .pipe(
-        take(1),
-        map(this.getCurrentValue.bind(this)),
-        flatMap(value => runAsync(self.opt.filter)(value).catch(err => err))
-      )
-      .forEach(this.onSubmit.bind(this));
-
-    // Init the prompt
-    cliCursor.hide();
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {ListPrompt} self
-   */
-
-  render() {
-    // Render question
-    var message = this.getQuestion();
-
-    if (this.firstRender) {
-      message += chalk.dim('(Use arrow keys)');
-    }
-
-    // Render choices or answer depending on the state
-    if (this.status === 'answered') {
-      message += chalk.cyan(this.opt.choices.getChoice(this.selected).short);
-    } else {
-      var choicesStr = listRender(this.opt.choices, this.selected);
-      var indexPosition = this.opt.choices.indexOf(
-        this.opt.choices.getChoice(this.selected)
-      );
-      message +=
-        '\n' + this.paginator.paginate(choicesStr, indexPosition, this.opt.pageSize);
-    }
-
-    this.firstRender = false;
-
-    this.screen.render(message);
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  onSubmit(value) {
-    this.status = 'answered';
-
-    // Rerender prompt
-    this.render();
-
-    this.screen.done();
-    cliCursor.show();
-    this.done(value);
-  }
-
-  getCurrentValue() {
-    return this.opt.choices.getChoice(this.selected).value;
-  }
-
-  /**
-   * When user press a key
-   */
-  onUpKey() {
-    var len = this.opt.choices.realLength;
-    this.selected = this.selected > 0 ? this.selected - 1 : len - 1;
-    this.render();
-  }
-
-  onDownKey() {
-    var len = this.opt.choices.realLength;
-    this.selected = this.selected < len - 1 ? this.selected + 1 : 0;
-    this.render();
-  }
-
-  onNumberKey(input) {
-    if (input <= this.opt.choices.realLength) {
-      this.selected = input - 1;
-    }
-    this.render();
-  }
-}
-
-/**
- * Function for rendering list choices
- * @param  {Number} pointer Position of the pointer
- * @return {String}         Rendered content
- */
-function listRender(choices, pointer) {
-  var output = '';
-  var separatorOffset = 0;
-
-  choices.forEach((choice, i) => {
-    if (choice.type === 'separator') {
-      separatorOffset++;
-      output += '  ' + choice + '\n';
-      return;
-    }
-
-    if (choice.disabled) {
-      separatorOffset++;
-      output += '  - ' + choice.name;
-      output += ' (' + (_.isString(choice.disabled) ? choice.disabled : 'Disabled') + ')';
-      output += '\n';
-      return;
-    }
-
-    var isSelected = i - separatorOffset === pointer;
-    var line = (isSelected ? figures.pointer + ' ' : '  ') + choice.name;
-    if (isSelected) {
-      line = chalk.cyan(line);
-    }
-    output += line + ' \n';
-  });
-
-  return output.replace(/\n$/, '');
-}
-
-module.exports = ListPrompt;
-
-
-/***/ }),
-/* 692 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `input` type prompt
- */
-
-var Input = __webpack_require__(392);
-
-/**
- * Extention of the Input prompt specifically for use with number inputs.
- */
-
-class NumberPrompt extends Input {
-  filterInput(input) {
-    if (input && typeof input === 'string') {
-      input = input.trim();
-      // Match a number in the input
-      let numberMatch = input.match(/(^-?\d+|^\d+\.\d*|^\d*\.\d+)(e\d+)?$/);
-      // If a number is found, return that input.
-      if (numberMatch) {
-        return Number(numberMatch[0]);
-      }
-    }
-    // If the input was invalid return the default value.
-    return this.opt.default == null ? NaN : this.opt.default;
-  }
-}
-
-module.exports = NumberPrompt;
-
-
-/***/ }),
-/* 693 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `password` type prompt
- */
-
-var chalk = __webpack_require__(30);
-var { map, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var observe = __webpack_require__(80);
-
-function mask(input, maskChar) {
-  input = String(input);
-  maskChar = typeof maskChar === 'string' ? maskChar : '*';
-  if (input.length === 0) {
-    return '';
-  }
-
-  return new Array(input.length + 1).join(maskChar);
-}
-
-class PasswordPrompt extends Base {
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    var events = observe(this.rl);
-
-    // Once user confirm (enter key)
-    var submit = events.line.pipe(map(this.filterInput.bind(this)));
-
-    var validation = this.handleSubmitEvents(submit);
-    validation.success.forEach(this.onEnd.bind(this));
-    validation.error.forEach(this.onError.bind(this));
-
-    if (this.opt.mask) {
-      events.keypress
-        .pipe(takeUntil(validation.success))
-        .forEach(this.onKeypress.bind(this));
-    }
-
-    // Init
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {PasswordPrompt} self
-   */
-
-  render(error) {
-    var message = this.getQuestion();
-    var bottomContent = '';
-
-    if (this.status === 'answered') {
-      message += this.opt.mask
-        ? chalk.cyan(mask(this.answer, this.opt.mask))
-        : chalk.italic.dim('[hidden]');
-    } else if (this.opt.mask) {
-      message += mask(this.rl.line || '', this.opt.mask);
-    } else {
-      message += chalk.italic.dim('[input is hidden] ');
-    }
-
-    if (error) {
-      bottomContent = '\n' + chalk.red('>> ') + error;
-    }
-
-    this.screen.render(message, bottomContent);
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  filterInput(input) {
-    if (!input) {
-      return this.opt.default == null ? '' : this.opt.default;
-    }
-    return input;
-  }
-
-  onEnd(state) {
-    this.status = 'answered';
-    this.answer = state.value;
-
-    // Re-render prompt
-    this.render();
-
-    this.screen.done();
-    this.done(state.value);
-  }
-
-  onError(state) {
-    this.render(state.isValid);
-  }
-
-  onKeypress() {
-    this.render();
-  }
-}
-
-module.exports = PasswordPrompt;
-
-
-/***/ }),
-/* 694 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * `rawlist` type prompt
- */
-
-var _ = __webpack_require__(38);
-var chalk = __webpack_require__(30);
-var { map, takeUntil } = __webpack_require__(63);
-var Base = __webpack_require__(79);
-var Separator = __webpack_require__(175);
-var observe = __webpack_require__(80);
-var Paginator = __webpack_require__(176);
-
-class RawListPrompt extends Base {
-  constructor(questions, rl, answers) {
-    super(questions, rl, answers);
-
-    if (!this.opt.choices) {
-      this.throwParamError('choices');
-    }
-
-    this.opt.validChoices = this.opt.choices.filter(Separator.exclude);
-
-    this.selected = 0;
-    this.rawDefault = 0;
-
-    _.extend(this.opt, {
-      validate: function(val) {
-        return val != null;
-      }
-    });
-
-    var def = this.opt.default;
-    if (_.isNumber(def) && def >= 0 && def < this.opt.choices.realLength) {
-      this.selected = def;
-      this.rawDefault = def;
-    } else if (!_.isNumber(def) && def != null) {
-      let index = _.findIndex(this.opt.choices.realChoices, ({ value }) => value === def);
-      let safeIndex = Math.max(index, 0);
-      this.selected = safeIndex;
-      this.rawDefault = safeIndex;
-    }
-
-    // Make sure no default is set (so it won't be printed)
-    this.opt.default = null;
-
-    this.paginator = new Paginator();
-  }
-
-  /**
-   * Start the Inquiry session
-   * @param  {Function} cb      Callback when prompt is done
-   * @return {this}
-   */
-
-  _run(cb) {
-    this.done = cb;
-
-    // Once user confirm (enter key)
-    var events = observe(this.rl);
-    var submit = events.line.pipe(map(this.getCurrentValue.bind(this)));
-
-    var validation = this.handleSubmitEvents(submit);
-    validation.success.forEach(this.onEnd.bind(this));
-    validation.error.forEach(this.onError.bind(this));
-
-    events.keypress
-      .pipe(takeUntil(validation.success))
-      .forEach(this.onKeypress.bind(this));
-
-    // Init the prompt
-    this.render();
-
-    return this;
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {RawListPrompt} self
-   */
-
-  render(error) {
-    // Render question
-    var message = this.getQuestion();
-    var bottomContent = '';
-
-    if (this.status === 'answered') {
-      message += chalk.cyan(this.answer);
-    } else {
-      var choicesStr = renderChoices(this.opt.choices, this.selected);
-      message += this.paginator.paginate(choicesStr, this.selected, this.opt.pageSize);
-      message += '\n  Answer: ';
-    }
-
-    message += this.rl.line;
-
-    if (error) {
-      bottomContent = '\n' + chalk.red('>> ') + error;
-    }
-
-    this.screen.render(message, bottomContent);
-  }
-
-  /**
-   * When user press `enter` key
-   */
-
-  getCurrentValue(index) {
-    if (index == null || index === '') {
-      index = this.rawDefault;
-    } else {
-      index -= 1;
-    }
-
-    var choice = this.opt.choices.getChoice(index);
-    return choice ? choice.value : null;
-  }
-
-  onEnd(state) {
-    this.status = 'answered';
-    this.answer = state.value;
-
-    // Re-render prompt
-    this.render();
-
-    this.screen.done();
-    this.done(state.value);
-  }
-
-  onError() {
-    this.render('Please enter a valid index');
-  }
-
-  /**
-   * When user press a key
-   */
-
-  onKeypress() {
-    var index = this.rl.line.length ? Number(this.rl.line) - 1 : 0;
-
-    if (this.opt.choices.getChoice(index)) {
-      this.selected = index;
-    } else {
-      this.selected = undefined;
-    }
-
-    this.render();
-  }
-}
-
-/**
- * Function for rendering list choices
- * @param  {Number} pointer Position of the pointer
- * @return {String}         Rendered content
- */
-
-function renderChoices(choices, pointer) {
-  var output = '';
-  var separatorOffset = 0;
-
-  choices.forEach(function(choice, i) {
-    output += '\n  ';
-
-    if (choice.type === 'separator') {
-      separatorOffset++;
-      output += ' ' + choice;
-      return;
-    }
-
-    var index = i - separatorOffset;
-    var display = index + 1 + ') ' + choice.name;
-    if (index === pointer) {
-      display = chalk.cyan(display);
-    }
-    output += display;
-  });
-
-  return output;
-}
-
-module.exports = RawListPrompt;
-
-
-/***/ }),
-/* 695 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/**
- * Sticky bottom bar user interface
- */
-
-var through = __webpack_require__(953);
-var Base = __webpack_require__(393);
-var rlUtils = __webpack_require__(394);
-var _ = __webpack_require__(38);
-
-class BottomBar extends Base {
-  constructor(opt) {
-    opt = opt || {};
-
-    super(opt);
-
-    this.log = through(this.writeLog.bind(this));
-    this.bottomBar = opt.bottomBar || '';
-    this.render();
-  }
-
-  /**
-   * Render the prompt to screen
-   * @return {BottomBar} self
-   */
-
-  render() {
-    this.write(this.bottomBar);
-    return this;
-  }
-
-  clean() {
-    rlUtils.clearLine(this.rl, this.bottomBar.split('\n').length);
-    return this;
-  }
-
-  /**
-   * Update the bottom bar content and rerender
-   * @param  {String} bottomBar Bottom bar content
-   * @return {BottomBar}           self
-   */
-
-  updateBottomBar(bottomBar) {
-    rlUtils.clearLine(this.rl, 1);
-    this.rl.output.unmute();
-    this.clean();
-    this.bottomBar = bottomBar;
-    this.render();
-    this.rl.output.mute();
-    return this;
-  }
-
-  /**
-   * Write out log data
-   * @param {String} data - The log data to be output
-   * @return {BottomBar} self
-   */
-
-  writeLog(data) {
-    this.rl.output.unmute();
-    this.clean();
-    this.rl.output.write(this.enforceLF(data.toString()));
-    this.render();
-    this.rl.output.mute();
-    return this;
-  }
-
-  /**
-   * Make sure line end on a line feed
-   * @param  {String} str Input string
-   * @return {String}     The input string with a final line feed
-   */
-
-  enforceLF(str) {
-    return str.match(/[\r\n]$/) ? str : str + '\n';
-  }
-
-  /**
-   * Helper for writing message in Prompt
-   * @param {BottomBar} prompt  - The Prompt object that extends tty
-   * @param {String} message - The message to be output
-   */
-  write(message) {
-    var msgLines = message.split(/\n/);
-    this.height = msgLines.length;
-
-    // Write message to screen and setPrompt to control backspace
-    this.rl.setPrompt(_.last(msgLines));
-
-    if (this.rl.output.rows === 0 && this.rl.output.columns === 0) {
-      /* When it's a tty through serial port there's no terminal info and the render will malfunction,
-         so we need enforce the cursor to locate to the leftmost position for rendering. */
-      rlUtils.left(this.rl, message.length + this.rl.line.length);
-    }
-    this.rl.output.write(message);
-  }
-}
-
-module.exports = BottomBar;
-
-
-/***/ }),
-/* 696 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var _ = __webpack_require__(38);
-var { defer, empty, from, of } = __webpack_require__(182);
-var { concatMap, filter, publish, reduce } = __webpack_require__(63);
-var runAsync = __webpack_require__(181);
-var utils = __webpack_require__(698);
-var Base = __webpack_require__(393);
-
-/**
- * Base interface class other can inherits from
- */
-
-class PromptUI extends Base {
-  constructor(prompts, opt) {
-    super(opt);
-    this.prompts = prompts;
-  }
-
-  run(questions) {
-    // Keep global reference to the answers
-    this.answers = {};
-
-    // Make sure questions is an array.
-    if (_.isPlainObject(questions)) {
-      questions = [questions];
-    }
-
-    // Create an observable, unless we received one as parameter.
-    // Note: As this is a public interface, we cannot do an instanceof check as we won't
-    // be using the exact same object in memory.
-    var obs = _.isArray(questions) ? from(questions) : questions;
-
-    this.process = obs.pipe(
-      concatMap(this.processQuestion.bind(this)),
-      publish() // Creates a hot Observable. It prevents duplicating prompts.
-    );
-
-    this.process.connect();
-
-    return this.process
-      .pipe(
-        reduce((answers, answer) => {
-          _.set(this.answers, answer.name, answer.answer);
-          return this.answers;
-        }, {})
-      )
-      .toPromise(Promise)
-      .then(this.onCompletion.bind(this));
-  }
-
-  /**
-   * Once all prompt are over
-   */
-
-  onCompletion() {
-    this.close();
-
-    return this.answers;
-  }
-
-  processQuestion(question) {
-    question = _.clone(question);
-    return defer(() => {
-      var obs = of(question);
-
-      return obs.pipe(
-        concatMap(this.setDefaultType.bind(this)),
-        concatMap(this.filterIfRunnable.bind(this)),
-        concatMap(() =>
-          utils.fetchAsyncQuestionProperty(question, 'message', this.answers)
-        ),
-        concatMap(() =>
-          utils.fetchAsyncQuestionProperty(question, 'default', this.answers)
-        ),
-        concatMap(() =>
-          utils.fetchAsyncQuestionProperty(question, 'choices', this.answers)
-        ),
-        concatMap(this.fetchAnswer.bind(this))
-      );
-    });
-  }
-
-  fetchAnswer(question) {
-    var Prompt = this.prompts[question.type];
-    this.activePrompt = new Prompt(question, this.rl, this.answers);
-    return defer(() =>
-      from(
-        this.activePrompt.run().then(answer => ({ name: question.name, answer: answer }))
-      )
-    );
-  }
-
-  setDefaultType(question) {
-    // Default type to input
-    if (!this.prompts[question.type]) {
-      question.type = 'input';
-    }
-    return defer(() => of(question));
-  }
-
-  filterIfRunnable(question) {
-    if (question.when === false) {
-      return empty();
-    }
-
-    if (!_.isFunction(question.when)) {
-      return of(question);
-    }
-
-    var answers = this.answers;
-    return defer(() =>
-      from(
-        runAsync(question.when)(answers).then(shouldRun => {
-          if (shouldRun) {
-            return question;
-          }
-        })
-      ).pipe(filter(val => val != null))
-    );
-  }
-}
-
-module.exports = PromptUI;
-
-
-/***/ }),
-/* 697 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var _ = __webpack_require__(38);
-var util = __webpack_require__(394);
-var cliWidth = __webpack_require__(606);
-var stripAnsi = __webpack_require__(329);
-var stringWidth = __webpack_require__(728);
-
-function height(content) {
-  return content.split('\n').length;
-}
-
-function lastLine(content) {
-  return _.last(content.split('\n'));
-}
-
-class ScreenManager {
-  constructor(rl) {
-    // These variables are keeping information to allow correct prompt re-rendering
-    this.height = 0;
-    this.extraLinesUnderPrompt = 0;
-
-    this.rl = rl;
-  }
-
-  render(content, bottomContent) {
-    this.rl.output.unmute();
-    this.clean(this.extraLinesUnderPrompt);
-
-    /**
-     * Write message to screen and setPrompt to control backspace
-     */
-
-    var promptLine = lastLine(content);
-    var rawPromptLine = stripAnsi(promptLine);
-
-    // Remove the rl.line from our prompt. We can't rely on the content of
-    // rl.line (mainly because of the password prompt), so just rely on it's
-    // length.
-    var prompt = rawPromptLine;
-    if (this.rl.line.length) {
-      prompt = prompt.slice(0, -this.rl.line.length);
-    }
-    this.rl.setPrompt(prompt);
-
-    // SetPrompt will change cursor position, now we can get correct value
-    var cursorPos = this.rl._getCursorPos();
-    var width = this.normalizedCliWidth();
-
-    content = this.forceLineReturn(content, width);
-    if (bottomContent) {
-      bottomContent = this.forceLineReturn(bottomContent, width);
-    }
-    // Manually insert an extra line if we're at the end of the line.
-    // This prevent the cursor from appearing at the beginning of the
-    // current line.
-    if (rawPromptLine.length % width === 0) {
-      content += '\n';
-    }
-    var fullContent = content + (bottomContent ? '\n' + bottomContent : '');
-    this.rl.output.write(fullContent);
-
-    /**
-     * Re-adjust the cursor at the correct position.
-     */
-
-    // We need to consider parts of the prompt under the cursor as part of the bottom
-    // content in order to correctly cleanup and re-render.
-    var promptLineUpDiff = Math.floor(rawPromptLine.length / width) - cursorPos.rows;
-    var bottomContentHeight =
-      promptLineUpDiff + (bottomContent ? height(bottomContent) : 0);
-    if (bottomContentHeight > 0) {
-      util.up(this.rl, bottomContentHeight);
-    }
-
-    // Reset cursor at the beginning of the line
-    util.left(this.rl, stringWidth(lastLine(fullContent)));
-
-    // Adjust cursor on the right
-    if (cursorPos.cols > 0) {
-      util.right(this.rl, cursorPos.cols);
-    }
-
-    /**
-     * Set up state for next re-rendering
-     */
-    this.extraLinesUnderPrompt = bottomContentHeight;
-    this.height = height(fullContent);
-
-    this.rl.output.mute();
-  }
-
-  clean(extraLines) {
-    if (extraLines > 0) {
-      util.down(this.rl, extraLines);
-    }
-    util.clearLine(this.rl, this.height);
-  }
-
-  done() {
-    this.rl.setPrompt('');
-    this.rl.output.unmute();
-    this.rl.output.write('\n');
-  }
-
-  releaseCursor() {
-    if (this.extraLinesUnderPrompt > 0) {
-      util.down(this.rl, this.extraLinesUnderPrompt);
-    }
-  }
-
-  normalizedCliWidth() {
-    var width = cliWidth({
-      defaultWidth: 80,
-      output: this.rl.output
-    });
-    return width;
-  }
-
-  breakLines(lines, width) {
-    // Break lines who're longer than the cli width so we can normalize the natural line
-    // returns behavior across terminals.
-    width = width || this.normalizedCliWidth();
-    var regex = new RegExp('(?:(?:\\033[[0-9;]*m)*.?){1,' + width + '}', 'g');
-    return lines.map(line => {
-      var chunk = line.match(regex);
-      // Last match is always empty
-      chunk.pop();
-      return chunk || '';
-    });
-  }
-
-  forceLineReturn(content, width) {
-    width = width || this.normalizedCliWidth();
-    return _.flatten(this.breakLines(content.split('\n'), width)).join('\n');
-  }
-}
-
-module.exports = ScreenManager;
-
-
-/***/ }),
-/* 698 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var _ = __webpack_require__(38);
-var { from, of } = __webpack_require__(182);
-var runAsync = __webpack_require__(181);
-
-/**
- * Resolve a question property value if it is passed as a function.
- * This method will overwrite the property on the question object with the received value.
- * @param  {Object} question - Question object
- * @param  {String} prop     - Property to fetch name
- * @param  {Object} answers  - Answers object
- * @return {Rx.Observable}   - Observable emitting once value is known
- */
-
-exports.fetchAsyncQuestionProperty = function(question, prop, answers) {
-  if (!_.isFunction(question[prop])) {
-    return of(question);
-  }
-
-  return from(
-    runAsync(question[prop])(answers).then(value => {
-      question[prop] = value;
-      return question;
-    })
-  );
-};
-
-
-/***/ }),
-/* 699 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var util = __webpack_require__(3),
-  Match = __webpack_require__ (142);
-
-
-/**
- * This is a superclass for the individual detectors for
- * each of the detectable members of the ISO 2022 family
- * of encodings.
- */
-
-function ISO_2022() {}
-
-ISO_2022.prototype.match = function(det) {
-
-  /**
-   * Matching function shared among the 2022 detectors JP, CN and KR
-   * Counts up the number of legal an unrecognized escape sequences in
-   * the sample of text, and computes a score based on the total number &
-   * the proportion that fit the encoding.
-   *
-   *
-   * @param text the byte buffer containing text to analyse
-   * @param textLen  the size of the text in the byte.
-   * @param escapeSequences the byte escape sequences to test for.
-   * @return match quality, in the range of 0-100.
-   */
-
-  var i, j;
-  var escN;
-  var hits   = 0;
-  var misses = 0;
-  var shifts = 0;
-  var quality;
-
-  // TODO: refactor me
-  var text = det.fInputBytes;
-  var textLen = det.fInputLen;
-
-  scanInput:
-    for (i = 0; i < textLen; i++) {
-      if (text[i] == 0x1b) {
-        checkEscapes:
-          for (escN = 0; escN < this.escapeSequences.length; escN++) {
-            var seq = this.escapeSequences[escN];
-
-            if ((textLen - i) < seq.length)
-              continue checkEscapes;
-
-            for (j = 1; j < seq.length; j++)
-              if (seq[j] != text[i + j])
-                continue checkEscapes;
-
-
-            hits++;
-            i += seq.length - 1;
-            continue scanInput;
-          }
-
-          misses++;
-      }
-
-      // Shift in/out
-      if (text[i] == 0x0e || text[i] == 0x0f)
-        shifts++;
-
-    }
-
-  if (hits == 0)
-    return null;
-
-  //
-  // Initial quality is based on relative proportion of recongized vs.
-  //   unrecognized escape sequences.
-  //   All good:  quality = 100;
-  //   half or less good: quality = 0;
-  //   linear inbetween.
-  quality = (100 * hits - 100 * misses) / (hits + misses);
-
-  // Back off quality if there were too few escape sequences seen.
-  //   Include shifts in this computation, so that KR does not get penalized
-  //   for having only a single Escape sequence, but many shifts.
-  if (hits + shifts < 5)
-    quality -= (5 - (hits + shifts)) * 10;
-
-  return quality <= 0 ? null : new Match(det, this, quality);
-};
-
-module.exports.ISO_2022_JP = function() {
-  this.name = function() {
-    return 'ISO-2022-JP';
-  };
-  this.escapeSequences = [
-    [ 0x1b, 0x24, 0x28, 0x43 ],   // KS X 1001:1992
-    [ 0x1b, 0x24, 0x28, 0x44 ],   // JIS X 212-1990
-    [ 0x1b, 0x24, 0x40 ],         // JIS C 6226-1978
-    [ 0x1b, 0x24, 0x41 ],         // GB 2312-80
-    [ 0x1b, 0x24, 0x42 ],         // JIS X 208-1983
-    [ 0x1b, 0x26, 0x40 ],         // JIS X 208 1990, 1997
-    [ 0x1b, 0x28, 0x42 ],         // ASCII
-    [ 0x1b, 0x28, 0x48 ],         // JIS-Roman
-    [ 0x1b, 0x28, 0x49 ],         // Half-width katakana
-    [ 0x1b, 0x28, 0x4a ],         // JIS-Roman
-    [ 0x1b, 0x2e, 0x41 ],         // ISO 8859-1
-    [ 0x1b, 0x2e, 0x46 ]          // ISO 8859-7
-  ];
-};
-util.inherits(module.exports.ISO_2022_JP, ISO_2022);
-
-
-
-module.exports.ISO_2022_KR = function() {
-  this.name = function() {
-    return 'ISO-2022-KR';
-  };
-  this.escapeSequences = [
-    [ 0x1b, 0x24, 0x29, 0x43 ]
-  ];
-};
-util.inherits(module.exports.ISO_2022_KR, ISO_2022);
-
-
-
-module.exports.ISO_2022_CN = function() {
-  this.name = function() {
-    return 'ISO-2022-CN';
-  };
-  this.escapeSequences = [
-    [ 0x1b, 0x24, 0x29, 0x41 ],   // GB 2312-80
-    [ 0x1b, 0x24, 0x29, 0x47 ],   // CNS 11643-1992 Plane 1
-    [ 0x1b, 0x24, 0x2A, 0x48 ],   // CNS 11643-1992 Plane 2
-    [ 0x1b, 0x24, 0x29, 0x45 ],   // ISO-IR-165
-    [ 0x1b, 0x24, 0x2B, 0x49 ],   // CNS 11643-1992 Plane 3
-    [ 0x1b, 0x24, 0x2B, 0x4A ],   // CNS 11643-1992 Plane 4
-    [ 0x1b, 0x24, 0x2B, 0x4B ],   // CNS 11643-1992 Plane 5
-    [ 0x1b, 0x24, 0x2B, 0x4C ],   // CNS 11643-1992 Plane 6
-    [ 0x1b, 0x24, 0x2B, 0x4D ],   // CNS 11643-1992 Plane 7
-    [ 0x1b, 0x4e ],               // SS2
-    [ 0x1b, 0x4f ]                // SS3
-  ];
-};
-util.inherits(module.exports.ISO_2022_CN, ISO_2022);
-
-
-/***/ }),
-/* 700 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var util = __webpack_require__(3),
-  Match = __webpack_require__ (142);
-
-/**
- * Binary search implementation (recursive)
- */
-function binarySearch(arr, searchValue) {
-  function find(arr, searchValue, left, right) {
-    if (right < left)
-      return -1;
-
-    /*
-    int mid = mid = (left + right) / 2;
-    There is a bug in the above line;
-    Joshua Bloch suggests the following replacement:
-    */
-    var mid = Math.floor((left + right) >>> 1);
-    if (searchValue > arr[mid])
-      return find(arr, searchValue, mid + 1, right);
-
-    if (searchValue < arr[mid])
-      return find(arr, searchValue, left, mid - 1);
-
-    return mid;
-  };
-
-  return find(arr, searchValue, 0, arr.length - 1);
-};
-
-// 'Character'  iterated character class.
-//    Recognizers for specific mbcs encodings make their 'characters' available
-//    by providing a nextChar() function that fills in an instance of iteratedChar
-//    with the next char from the input.
-//    The returned characters are not converted to Unicode, but remain as the raw
-//    bytes (concatenated into an int) from the codepage data.
-//
-//  For Asian charsets, use the raw input rather than the input that has been
-//   stripped of markup.  Detection only considers multi-byte chars, effectively
-//   stripping markup anyway, and double byte chars do occur in markup too.
-//
-function IteratedChar() {
-
-  this.charValue = 0; // 1-4 bytes from the raw input data
-  this.index     = 0;
-  this.nextIndex = 0;
-  this.error     = false;
-  this.done      = false;
-
-  this.reset = function() {
-    this.charValue = 0;
-    this.index     = -1;
-    this.nextIndex = 0;
-    this.error     = false;
-    this.done      = false;
-  };
-
-  this.nextByte = function(det) {
-    if (this.nextIndex >= det.fRawLength) {
-      this.done = true;
-      return -1;
-    }
-    var byteValue = det.fRawInput[this.nextIndex++] & 0x00ff;
-    return byteValue;
-  };
-};
-
-
-
-/**
- * Asian double or multi-byte - charsets.
- * Match is determined mostly by the input data adhering to the
- * encoding scheme for the charset, and, optionally,
- * frequency-of-occurence of characters.
- */
-
-function mbcs() {};
-
-/**
- * Test the match of this charset with the input text data
- *      which is obtained via the CharsetDetector object.
- *
- * @param det  The CharsetDetector, which contains the input text
- *             to be checked for being in this charset.
- * @return     Two values packed into one int  (Damn java, anyhow)
- *             bits 0-7:  the match confidence, ranging from 0-100
- *             bits 8-15: The match reason, an enum-like value.
- */
-mbcs.prototype.match = function(det) {
-
-  var singleByteCharCount = 0,  //TODO Do we really need this?
-    doubleByteCharCount = 0,
-    commonCharCount     = 0,
-    badCharCount        = 0,
-    totalCharCount      = 0,
-    confidence          = 0;
-
-  var iter = new IteratedChar();
-
-  detectBlock: {
-    for (iter.reset(); this.nextChar(iter, det);) {
-      totalCharCount++;
-      if (iter.error) {
-        badCharCount++;
-      } else {
-        var cv = iter.charValue & 0xFFFFFFFF;
-
-        if (cv <= 0xff) {
-          singleByteCharCount++;
-        } else {
-          doubleByteCharCount++;
-          if (this.commonChars != null) {
-            // NOTE: This assumes that there are no 4-byte common chars.
-            if (binarySearch(this.commonChars, cv) >= 0) {
-              commonCharCount++;
-            }
-          }
-        }
-      }
-      if (badCharCount >= 2 && badCharCount * 5 >= doubleByteCharCount) {
-        // console.log('its here!')
-        // Bail out early if the byte data is not matching the encoding scheme.
-        break detectBlock;
-      }
-    }
-
-    if (doubleByteCharCount <= 10 && badCharCount== 0) {
-      // Not many multi-byte chars.
-      if (doubleByteCharCount == 0 && totalCharCount < 10) {
-        // There weren't any multibyte sequences, and there was a low density of non-ASCII single bytes.
-        // We don't have enough data to have any confidence.
-        // Statistical analysis of single byte non-ASCII charcters would probably help here.
-        confidence = 0;
-      }
-      else {
-        //   ASCII or ISO file?  It's probably not our encoding,
-        //   but is not incompatible with our encoding, so don't give it a zero.
-        confidence = 10;
-      }
-      break detectBlock;
-    }
-
-    //
-    //  No match if there are too many characters that don't fit the encoding scheme.
-    //    (should we have zero tolerance for these?)
-    //
-    if (doubleByteCharCount < 20 * badCharCount) {
-      confidence = 0;
-      break detectBlock;
-    }
-
-    if (this.commonChars == null) {
-      // We have no statistics on frequently occuring characters.
-      //  Assess confidence purely on having a reasonable number of
-      //  multi-byte characters (the more the better
-      confidence = 30 + doubleByteCharCount - 20 * badCharCount;
-      if (confidence > 100) {
-        confidence = 100;
-      }
-    } else {
-      //
-      // Frequency of occurence statistics exist.
-      //
-      var maxVal = Math.log(parseFloat(doubleByteCharCount) / 4);
-      var scaleFactor = 90.0 / maxVal;
-      confidence = Math.floor(Math.log(commonCharCount + 1) * scaleFactor + 10);
-      confidence = Math.min(confidence, 100);
-    }
-  }   // end of detectBlock:
-
-  return confidence == 0 ? null : new Match(det, this, confidence);
-};
-
-/**
- * Get the next character (however many bytes it is) from the input data
- *    Subclasses for specific charset encodings must implement this function
- *    to get characters according to the rules of their encoding scheme.
- *
- *  This function is not a method of class iteratedChar only because
- *   that would require a lot of extra derived classes, which is awkward.
- * @param it  The iteratedChar 'struct' into which the returned char is placed.
- * @param det The charset detector, which is needed to get at the input byte data
- *            being iterated over.
- * @return    True if a character was returned, false at end of input.
- */
-
-mbcs.prototype.nextChar = function(iter, det) {};
-
-
-
-/**
- * Shift-JIS charset recognizer.
- */
-module.exports.sjis = function() {
-  this.name = function() {
-    return 'Shift-JIS';
-  };
-  this.language = function() {
-    return 'ja';
-  };
-
-  // TODO:  This set of data comes from the character frequency-
-  //        of-occurence analysis tool.  The data needs to be moved
-  //        into a resource and loaded from there.
-  this.commonChars = [
-    0x8140, 0x8141, 0x8142, 0x8145, 0x815b, 0x8169, 0x816a, 0x8175, 0x8176, 0x82a0,
-    0x82a2, 0x82a4, 0x82a9, 0x82aa, 0x82ab, 0x82ad, 0x82af, 0x82b1, 0x82b3, 0x82b5,
-    0x82b7, 0x82bd, 0x82be, 0x82c1, 0x82c4, 0x82c5, 0x82c6, 0x82c8, 0x82c9, 0x82cc,
-    0x82cd, 0x82dc, 0x82e0, 0x82e7, 0x82e8, 0x82e9, 0x82ea, 0x82f0, 0x82f1, 0x8341,
-    0x8343, 0x834e, 0x834f, 0x8358, 0x835e, 0x8362, 0x8367, 0x8375, 0x8376, 0x8389,
-    0x838a, 0x838b, 0x838d, 0x8393, 0x8e96, 0x93fa, 0x95aa
-  ];
-
-  this.nextChar = function(iter, det) {
-    iter.index = iter.nextIndex;
-    iter.error = false;
-
-    var firstByte;
-    firstByte = iter.charValue = iter.nextByte(det);
-    if (firstByte < 0)
-      return false;
-
-    if (firstByte <= 0x7f || (firstByte > 0xa0 && firstByte <= 0xdf))
-      return true;
-
-    var secondByte = iter.nextByte(det);
-    if (secondByte < 0)
-      return false;
-
-    iter.charValue = (firstByte << 8) | secondByte;
-    if (! ((secondByte >= 0x40 && secondByte <= 0x7f) || (secondByte >= 0x80 && secondByte <= 0xff))) {
-      // Illegal second byte value.
-      iter.error = true;
-    }
-    return true;
-  };
-};
-util.inherits(module.exports.sjis, mbcs);
-
-
-
-/**
- *   Big5 charset recognizer.
- */
-module.exports.big5 = function() {
-  this.name = function() {
-    return 'Big5';
-  };
-  this.language = function() {
-    return 'zh';
-  };
-  // TODO:  This set of data comes from the character frequency-
-  //        of-occurence analysis tool.  The data needs to be moved
-  //        into a resource and loaded from there.
-  this.commonChars = [
-    0xa140, 0xa141, 0xa142, 0xa143, 0xa147, 0xa149, 0xa175, 0xa176, 0xa440, 0xa446,
-    0xa447, 0xa448, 0xa451, 0xa454, 0xa457, 0xa464, 0xa46a, 0xa46c, 0xa477, 0xa4a3,
-    0xa4a4, 0xa4a7, 0xa4c1, 0xa4ce, 0xa4d1, 0xa4df, 0xa4e8, 0xa4fd, 0xa540, 0xa548,
-    0xa558, 0xa569, 0xa5cd, 0xa5e7, 0xa657, 0xa661, 0xa662, 0xa668, 0xa670, 0xa6a8,
-    0xa6b3, 0xa6b9, 0xa6d3, 0xa6db, 0xa6e6, 0xa6f2, 0xa740, 0xa751, 0xa759, 0xa7da,
-    0xa8a3, 0xa8a5, 0xa8ad, 0xa8d1, 0xa8d3, 0xa8e4, 0xa8fc, 0xa9c0, 0xa9d2, 0xa9f3,
-    0xaa6b, 0xaaba, 0xaabe, 0xaacc, 0xaafc, 0xac47, 0xac4f, 0xacb0, 0xacd2, 0xad59,
-    0xaec9, 0xafe0, 0xb0ea, 0xb16f, 0xb2b3, 0xb2c4, 0xb36f, 0xb44c, 0xb44e, 0xb54c,
-    0xb5a5, 0xb5bd, 0xb5d0, 0xb5d8, 0xb671, 0xb7ed, 0xb867, 0xb944, 0xbad8, 0xbb44,
-    0xbba1, 0xbdd1, 0xc2c4, 0xc3b9, 0xc440, 0xc45f
-  ];
-  this.nextChar = function(iter, det) {
-    iter.index = iter.nextIndex;
-    iter.error = false;
-
-    var firstByte = iter.charValue = iter.nextByte(det);
-
-    if (firstByte < 0)
-      return false;
-
-    // single byte character.
-    if (firstByte <= 0x7f || firstByte == 0xff)
-      return true;
-
-    var secondByte = iter.nextByte(det);
-
-    if (secondByte < 0)
-      return false;
-
-    iter.charValue = (iter.charValue << 8) | secondByte;
-
-    if (secondByte < 0x40 || secondByte == 0x7f || secondByte == 0xff)
-      iter.error = true;
-
-    return true;
-  };
-};
-util.inherits(module.exports.big5, mbcs);
-
-
-
-/**
- *  EUC charset recognizers.  One abstract class that provides the common function
- *  for getting the next character according to the EUC encoding scheme,
- *  and nested derived classes for EUC_KR, EUC_JP, EUC_CN.
- *
- *  Get the next character value for EUC based encodings.
- *  Character 'value' is simply the raw bytes that make up the character
- *     packed into an int.
- */
-function eucNextChar(iter, det) {
-  iter.index = iter.nextIndex;
-  iter.error = false;
-  var firstByte  = 0;
-  var secondByte = 0;
-  var thirdByte  = 0;
-  //int fourthByte = 0;
-  buildChar: {
-    firstByte = iter.charValue = iter.nextByte(det);
-    if (firstByte < 0) {
-      // Ran off the end of the input data
-      iter.done = true;
-      break buildChar;
-    }
-    if (firstByte <= 0x8d) {
-      // single byte char
-      break buildChar;
-    }
-    secondByte = iter.nextByte(det);
-    iter.charValue = (iter.charValue << 8) | secondByte;
-    if (firstByte >= 0xA1 && firstByte <= 0xfe) {
-      // Two byte Char
-      if (secondByte < 0xa1) {
-        iter.error = true;
-      }
-      break buildChar;
-    }
-    if (firstByte == 0x8e) {
-      // Code Set 2.
-      //   In EUC-JP, total char size is 2 bytes, only one byte of actual char value.
-      //   In EUC-TW, total char size is 4 bytes, three bytes contribute to char value.
-      // We don't know which we've got.
-      // Treat it like EUC-JP.  If the data really was EUC-TW, the following two
-      //   bytes will look like a well formed 2 byte char.
-      if (secondByte < 0xa1) {
-        iter.error = true;
-      }
-      break buildChar;
-    }
-    if (firstByte == 0x8f) {
-      // Code set 3.
-      // Three byte total char size, two bytes of actual char value.
-      thirdByte = iter.nextByte(det);
-      iter.charValue = (iter.charValue << 8) | thirdByte;
-      if (thirdByte < 0xa1) {
-        iter.error = true;
-      }
-    }
-  }
-  return iter.done == false;
-};
-
-
-
-/**
- * The charset recognize for EUC-JP.  A singleton instance of this class
- *    is created and kept by the public CharsetDetector class
- */
-module.exports.euc_jp = function() {
-  this.name = function() {
-    return 'EUC-JP';
-  };
-  this.language = function() {
-    return 'ja';
-  };
-
-  // TODO:  This set of data comes from the character frequency-
-  //        of-occurence analysis tool.  The data needs to be moved
-  //        into a resource and loaded from there.
-  this.commonChars = [
-    0xa1a1, 0xa1a2, 0xa1a3, 0xa1a6, 0xa1bc, 0xa1ca, 0xa1cb, 0xa1d6, 0xa1d7, 0xa4a2,
-    0xa4a4, 0xa4a6, 0xa4a8, 0xa4aa, 0xa4ab, 0xa4ac, 0xa4ad, 0xa4af, 0xa4b1, 0xa4b3,
-    0xa4b5, 0xa4b7, 0xa4b9, 0xa4bb, 0xa4bd, 0xa4bf, 0xa4c0, 0xa4c1, 0xa4c3, 0xa4c4,
-    0xa4c6, 0xa4c7, 0xa4c8, 0xa4c9, 0xa4ca, 0xa4cb, 0xa4ce, 0xa4cf, 0xa4d0, 0xa4de,
-    0xa4df, 0xa4e1, 0xa4e2, 0xa4e4, 0xa4e8, 0xa4e9, 0xa4ea, 0xa4eb, 0xa4ec, 0xa4ef,
-    0xa4f2, 0xa4f3, 0xa5a2, 0xa5a3, 0xa5a4, 0xa5a6, 0xa5a7, 0xa5aa, 0xa5ad, 0xa5af,
-    0xa5b0, 0xa5b3, 0xa5b5, 0xa5b7, 0xa5b8, 0xa5b9, 0xa5bf, 0xa5c3, 0xa5c6, 0xa5c7,
-    0xa5c8, 0xa5c9, 0xa5cb, 0xa5d0, 0xa5d5, 0xa5d6, 0xa5d7, 0xa5de, 0xa5e0, 0xa5e1,
-    0xa5e5, 0xa5e9, 0xa5ea, 0xa5eb, 0xa5ec, 0xa5ed, 0xa5f3, 0xb8a9, 0xb9d4, 0xbaee,
-    0xbbc8, 0xbef0, 0xbfb7, 0xc4ea, 0xc6fc, 0xc7bd, 0xcab8, 0xcaf3, 0xcbdc, 0xcdd1
-  ];
-
-  this.nextChar = eucNextChar;
-};
-util.inherits(module.exports.euc_jp, mbcs);
-
-
-
-/**
- * The charset recognize for EUC-KR.  A singleton instance of this class
- *    is created and kept by the public CharsetDetector class
- */
-module.exports.euc_kr = function() {
-  this.name = function() {
-    return 'EUC-KR';
-  };
-  this.language = function() {
-    return 'ko';
-  };
-
-  // TODO:  This set of data comes from the character frequency-
-  //        of-occurence analysis tool.  The data needs to be moved
-  //        into a resource and loaded from there.
-  this.commonChars = [
-    0xb0a1, 0xb0b3, 0xb0c5, 0xb0cd, 0xb0d4, 0xb0e6, 0xb0ed, 0xb0f8, 0xb0fa, 0xb0fc,
-    0xb1b8, 0xb1b9, 0xb1c7, 0xb1d7, 0xb1e2, 0xb3aa, 0xb3bb, 0xb4c2, 0xb4cf, 0xb4d9,
-    0xb4eb, 0xb5a5, 0xb5b5, 0xb5bf, 0xb5c7, 0xb5e9, 0xb6f3, 0xb7af, 0xb7c2, 0xb7ce,
-    0xb8a6, 0xb8ae, 0xb8b6, 0xb8b8, 0xb8bb, 0xb8e9, 0xb9ab, 0xb9ae, 0xb9cc, 0xb9ce,
-    0xb9fd, 0xbab8, 0xbace, 0xbad0, 0xbaf1, 0xbbe7, 0xbbf3, 0xbbfd, 0xbcad, 0xbcba,
-    0xbcd2, 0xbcf6, 0xbdba, 0xbdc0, 0xbdc3, 0xbdc5, 0xbec6, 0xbec8, 0xbedf, 0xbeee,
-    0xbef8, 0xbefa, 0xbfa1, 0xbfa9, 0xbfc0, 0xbfe4, 0xbfeb, 0xbfec, 0xbff8, 0xc0a7,
-    0xc0af, 0xc0b8, 0xc0ba, 0xc0bb, 0xc0bd, 0xc0c7, 0xc0cc, 0xc0ce, 0xc0cf, 0xc0d6,
-    0xc0da, 0xc0e5, 0xc0fb, 0xc0fc, 0xc1a4, 0xc1a6, 0xc1b6, 0xc1d6, 0xc1df, 0xc1f6,
-    0xc1f8, 0xc4a1, 0xc5cd, 0xc6ae, 0xc7cf, 0xc7d1, 0xc7d2, 0xc7d8, 0xc7e5, 0xc8ad
-  ];
-
-  this.nextChar = eucNextChar;
-};
-util.inherits(module.exports.euc_kr, mbcs);
-
-
-
-/**
- *   GB-18030 recognizer. Uses simplified Chinese statistics.
- */
-module.exports.gb_18030 = function() {
-  this.name = function() {
-    return 'GB18030';
-  };
-  this.language = function() {
-    return 'zh';
-  };
-
-  /*
-   *  Get the next character value for EUC based encodings.
-   *  Character 'value' is simply the raw bytes that make up the character
-   *     packed into an int.
-   */
-  this.nextChar = function(iter, det) {
-    iter.index = iter.nextIndex;
-    iter.error = false;
-    var firstByte  = 0;
-    var secondByte = 0;
-    var thirdByte  = 0;
-    var fourthByte = 0;
-    buildChar: {
-      firstByte = iter.charValue = iter.nextByte(det);
-      if (firstByte < 0) {
-        // Ran off the end of the input data
-        iter.done = true;
-        break buildChar;
-      }
-      if (firstByte <= 0x80) {
-        // single byte char
-        break buildChar;
-      }
-      secondByte = iter.nextByte(det);
-      iter.charValue = (iter.charValue << 8) | secondByte;
-      if (firstByte >= 0x81 && firstByte <= 0xFE) {
-        // Two byte Char
-        if ((secondByte >= 0x40 && secondByte <= 0x7E) || (secondByte >=80 && secondByte <= 0xFE)) {
-          break buildChar;
-        }
-        // Four byte char
-        if (secondByte >= 0x30 && secondByte <= 0x39) {
-          thirdByte = iter.nextByte(det);
-          if (thirdByte >= 0x81 && thirdByte <= 0xFE) {
-            fourthByte = iter.nextByte(det);
-            if (fourthByte >= 0x30 && fourthByte <= 0x39) {
-              iter.charValue = (iter.charValue << 16) | (thirdByte << 8) | fourthByte;
-              break buildChar;
-            }
-          }
-        }
-        iter.error = true;
-        break buildChar;
-      }
-    }
-    return iter.done == false;
-  };
-
-  // TODO:  This set of data comes from the character frequency-
-  //        of-occurence analysis tool.  The data needs to be moved
-  //        into a resource and loaded from there.
-  this.commonChars = [
-    0xa1a1, 0xa1a2, 0xa1a3, 0xa1a4, 0xa1b0, 0xa1b1, 0xa1f1, 0xa1f3, 0xa3a1, 0xa3ac,
-    0xa3ba, 0xb1a8, 0xb1b8, 0xb1be, 0xb2bb, 0xb3c9, 0xb3f6, 0xb4f3, 0xb5bd, 0xb5c4,
-    0xb5e3, 0xb6af, 0xb6d4, 0xb6e0, 0xb7a2, 0xb7a8, 0xb7bd, 0xb7d6, 0xb7dd, 0xb8b4,
-    0xb8df, 0xb8f6, 0xb9ab, 0xb9c9, 0xb9d8, 0xb9fa, 0xb9fd, 0xbacd, 0xbba7, 0xbbd6,
-    0xbbe1, 0xbbfa, 0xbcbc, 0xbcdb, 0xbcfe, 0xbdcc, 0xbecd, 0xbedd, 0xbfb4, 0xbfc6,
-    0xbfc9, 0xc0b4, 0xc0ed, 0xc1cb, 0xc2db, 0xc3c7, 0xc4dc, 0xc4ea, 0xc5cc, 0xc6f7,
-    0xc7f8, 0xc8ab, 0xc8cb, 0xc8d5, 0xc8e7, 0xc9cf, 0xc9fa, 0xcab1, 0xcab5, 0xcac7,
-    0xcad0, 0xcad6, 0xcaf5, 0xcafd, 0xccec, 0xcdf8, 0xceaa, 0xcec4, 0xced2, 0xcee5,
-    0xcfb5, 0xcfc2, 0xcfd6, 0xd0c2, 0xd0c5, 0xd0d0, 0xd0d4, 0xd1a7, 0xd2aa, 0xd2b2,
-    0xd2b5, 0xd2bb, 0xd2d4, 0xd3c3, 0xd3d0, 0xd3fd, 0xd4c2, 0xd4da, 0xd5e2, 0xd6d0
-  ];
-};
-util.inherits(module.exports.gb_18030, mbcs);
-
-
-/***/ }),
-/* 701 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var util = __webpack_require__(3),
-  Match = __webpack_require__ (142);
-
-/**
- * This class recognizes single-byte encodings. Because the encoding scheme is so
- * simple, language statistics are used to do the matching.
- */
-
-function NGramParser(theNgramList, theByteMap) {
-  var N_GRAM_MASK = 0xFFFFFF;
-
-  this.byteIndex = 0;
-  this.ngram = 0;
-
-  this.ngramList = theNgramList;
-  this.byteMap = theByteMap;
-
-  this.ngramCount = 0;
-  this.hitCount = 0;
-
-  this.spaceChar;
-
-  /*
-   * Binary search for value in table, which must have exactly 64 entries.
-   */
-  this.search = function(table, value) {
-    var index = 0;
-
-    if (table[index + 32] <= value) index += 32;
-    if (table[index + 16] <= value) index += 16;
-    if (table[index + 8]  <= value) index += 8;
-    if (table[index + 4]  <= value) index += 4;
-    if (table[index + 2]  <= value) index += 2;
-    if (table[index + 1]  <= value) index += 1;
-    if (table[index]      > value)  index -= 1;
-
-    if (index < 0 || table[index] != value)
-      return -1;
-
-    return index;
-  };
-
-  this.lookup = function(thisNgram) {
-    this.ngramCount += 1;
-    if (this.search(this.ngramList, thisNgram) >= 0) {
-      this.hitCount += 1;
-    }
-  };
-
-  this.addByte = function(b) {
-    this.ngram = ((this.ngram << 8) + (b & 0xFF)) & N_GRAM_MASK;
-    this.lookup(this.ngram);
-  }
-
-  this.nextByte = function(det) {
-    if (this.byteIndex >= det.fInputLen)
-      return -1;
-
-    return det.fInputBytes[this.byteIndex++] & 0xFF;
-  }
-
-  this.parse = function(det, spaceCh) {
-    var b, ignoreSpace = false;
-    this.spaceChar = spaceCh;
-
-    while ((b = this.nextByte(det)) >= 0) {
-      var mb = this.byteMap[b];
-
-      // TODO: 0x20 might not be a space in all character sets...
-      if (mb != 0) {
-        if (!(mb == this.spaceChar && ignoreSpace)) {
-          this.addByte(mb);
-        }
-
-        ignoreSpace = (mb == this.spaceChar);
-      }
-    }
-
-    // TODO: Is this OK? The buffer could have ended in the middle of a word...
-    this.addByte(this.spaceChar);
-
-    var rawPercent = this.hitCount / this.ngramCount;
-
-    // TODO - This is a bit of a hack to take care of a case
-    // were we were getting a confidence of 135...
-    if (rawPercent > 0.33)
-      return 98;
-
-    return Math.floor(rawPercent * 300.0);
-  };
-};
-
-function NGramsPlusLang(la, ng) {
-  this.fLang = la;
-  this.fNGrams = ng;
-};
-
-function sbcs() {};
-sbcs.prototype.spaceChar = 0x20;
-sbcs.prototype.ngrams = function() {};
-sbcs.prototype.byteMap = function() {};
-sbcs.prototype.match = function(det) {
-
-  var ngrams = this.ngrams();
-  var multiple = (Array.isArray(ngrams) && ngrams[0] instanceof NGramsPlusLang);
-
-  if (!multiple) {
-    var parser = new NGramParser(ngrams, this.byteMap());
-    var confidence = parser.parse(det, this.spaceChar);
-    return confidence <= 0 ? null : new Match(det, this, confidence);
-  }
-
-  var bestConfidenceSoFar = -1;
-  var lang = null;
-
-  for (var i = ngrams.length - 1; i >= 0; i--) {
-    var ngl = ngrams[i];
-
-    var parser = new NGramParser(ngl.fNGrams, this.byteMap());
-    var confidence = parser.parse(det, this.spaceChar);
-    if (confidence > bestConfidenceSoFar) {
-      bestConfidenceSoFar = confidence;
-      lang = ngl.fLang;
-    }
-  }
-
-  var name = this.name(det);
-  return bestConfidenceSoFar <= 0 ? null : new Match(det, this, bestConfidenceSoFar, name, lang);
-};
-
-
-module.exports.ISO_8859_1 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0xAA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0xB5, 0x20, 0x20,
-      0x20, 0x20, 0xBA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0x20,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0x20,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0xFF
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      new NGramsPlusLang('da', [
-        0x206166, 0x206174, 0x206465, 0x20656E, 0x206572, 0x20666F, 0x206861, 0x206920,
-        0x206D65, 0x206F67, 0x2070E5, 0x207369, 0x207374, 0x207469, 0x207669, 0x616620,
-        0x616E20, 0x616E64, 0x617220, 0x617420, 0x646520, 0x64656E, 0x646572, 0x646574,
-        0x652073, 0x656420, 0x656465, 0x656E20, 0x656E64, 0x657220, 0x657265, 0x657320,
-        0x657420, 0x666F72, 0x676520, 0x67656E, 0x676572, 0x696765, 0x696C20, 0x696E67,
-        0x6B6520, 0x6B6B65, 0x6C6572, 0x6C6967, 0x6C6C65, 0x6D6564, 0x6E6465, 0x6E6520,
-        0x6E6720, 0x6E6765, 0x6F6720, 0x6F6D20, 0x6F7220, 0x70E520, 0x722064, 0x722065,
-        0x722073, 0x726520, 0x737465, 0x742073, 0x746520, 0x746572, 0x74696C, 0x766572
-      ]),
-      new NGramsPlusLang('de', [
-        0x20616E, 0x206175, 0x206265, 0x206461, 0x206465, 0x206469, 0x206569, 0x206765,
-        0x206861, 0x20696E, 0x206D69, 0x207363, 0x207365, 0x20756E, 0x207665, 0x20766F,
-        0x207765, 0x207A75, 0x626572, 0x636820, 0x636865, 0x636874, 0x646173, 0x64656E,
-        0x646572, 0x646965, 0x652064, 0x652073, 0x65696E, 0x656974, 0x656E20, 0x657220,
-        0x657320, 0x67656E, 0x68656E, 0x687420, 0x696368, 0x696520, 0x696E20, 0x696E65,
-        0x697420, 0x6C6963, 0x6C6C65, 0x6E2061, 0x6E2064, 0x6E2073, 0x6E6420, 0x6E6465,
-        0x6E6520, 0x6E6720, 0x6E6765, 0x6E7465, 0x722064, 0x726465, 0x726569, 0x736368,
-        0x737465, 0x742064, 0x746520, 0x74656E, 0x746572, 0x756E64, 0x756E67, 0x766572
-      ]),
-      new NGramsPlusLang('en', [
-        0x206120, 0x20616E, 0x206265, 0x20636F, 0x20666F, 0x206861, 0x206865, 0x20696E,
-        0x206D61, 0x206F66, 0x207072, 0x207265, 0x207361, 0x207374, 0x207468, 0x20746F,
-        0x207768, 0x616964, 0x616C20, 0x616E20, 0x616E64, 0x617320, 0x617420, 0x617465,
-        0x617469, 0x642061, 0x642074, 0x652061, 0x652073, 0x652074, 0x656420, 0x656E74,
-        0x657220, 0x657320, 0x666F72, 0x686174, 0x686520, 0x686572, 0x696420, 0x696E20,
-        0x696E67, 0x696F6E, 0x697320, 0x6E2061, 0x6E2074, 0x6E6420, 0x6E6720, 0x6E7420,
-        0x6F6620, 0x6F6E20, 0x6F7220, 0x726520, 0x727320, 0x732061, 0x732074, 0x736169,
-        0x737420, 0x742074, 0x746572, 0x746861, 0x746865, 0x74696F, 0x746F20, 0x747320
-      ]),
-      new NGramsPlusLang('es', [
-        0x206120, 0x206361, 0x20636F, 0x206465, 0x20656C, 0x20656E, 0x206573, 0x20696E,
-        0x206C61, 0x206C6F, 0x207061, 0x20706F, 0x207072, 0x207175, 0x207265, 0x207365,
-        0x20756E, 0x207920, 0x612063, 0x612064, 0x612065, 0x61206C, 0x612070, 0x616369,
-        0x61646F, 0x616C20, 0x617220, 0x617320, 0x6369F3, 0x636F6E, 0x646520, 0x64656C,
-        0x646F20, 0x652064, 0x652065, 0x65206C, 0x656C20, 0x656E20, 0x656E74, 0x657320,
-        0x657374, 0x69656E, 0x69F36E, 0x6C6120, 0x6C6F73, 0x6E2065, 0x6E7465, 0x6F2064,
-        0x6F2065, 0x6F6E20, 0x6F7220, 0x6F7320, 0x706172, 0x717565, 0x726120, 0x726573,
-        0x732064, 0x732065, 0x732070, 0x736520, 0x746520, 0x746F20, 0x756520, 0xF36E20
-      ]),
-      new NGramsPlusLang('fr', [
-        0x206175, 0x20636F, 0x206461, 0x206465, 0x206475, 0x20656E, 0x206574, 0x206C61,
-        0x206C65, 0x207061, 0x20706F, 0x207072, 0x207175, 0x207365, 0x20736F, 0x20756E,
-        0x20E020, 0x616E74, 0x617469, 0x636520, 0x636F6E, 0x646520, 0x646573, 0x647520,
-        0x652061, 0x652063, 0x652064, 0x652065, 0x65206C, 0x652070, 0x652073, 0x656E20,
-        0x656E74, 0x657220, 0x657320, 0x657420, 0x657572, 0x696F6E, 0x697320, 0x697420,
-        0x6C6120, 0x6C6520, 0x6C6573, 0x6D656E, 0x6E2064, 0x6E6520, 0x6E7320, 0x6E7420,
-        0x6F6E20, 0x6F6E74, 0x6F7572, 0x717565, 0x72206C, 0x726520, 0x732061, 0x732064,
-        0x732065, 0x73206C, 0x732070, 0x742064, 0x746520, 0x74696F, 0x756520, 0x757220
-      ]),
-      new NGramsPlusLang('it', [
-        0x20616C, 0x206368, 0x20636F, 0x206465, 0x206469, 0x206520, 0x20696C, 0x20696E,
-        0x206C61, 0x207065, 0x207072, 0x20756E, 0x612063, 0x612064, 0x612070, 0x612073,
-        0x61746F, 0x636865, 0x636F6E, 0x64656C, 0x646920, 0x652061, 0x652063, 0x652064,
-        0x652069, 0x65206C, 0x652070, 0x652073, 0x656C20, 0x656C6C, 0x656E74, 0x657220,
-        0x686520, 0x692061, 0x692063, 0x692064, 0x692073, 0x696120, 0x696C20, 0x696E20,
-        0x696F6E, 0x6C6120, 0x6C6520, 0x6C6920, 0x6C6C61, 0x6E6520, 0x6E6920, 0x6E6F20,
-        0x6E7465, 0x6F2061, 0x6F2064, 0x6F2069, 0x6F2073, 0x6F6E20, 0x6F6E65, 0x706572,
-        0x726120, 0x726520, 0x736920, 0x746120, 0x746520, 0x746920, 0x746F20, 0x7A696F
-      ]),
-      new NGramsPlusLang('nl', [
-        0x20616C, 0x206265, 0x206461, 0x206465, 0x206469, 0x206565, 0x20656E, 0x206765,
-        0x206865, 0x20696E, 0x206D61, 0x206D65, 0x206F70, 0x207465, 0x207661, 0x207665,
-        0x20766F, 0x207765, 0x207A69, 0x61616E, 0x616172, 0x616E20, 0x616E64, 0x617220,
-        0x617420, 0x636874, 0x646520, 0x64656E, 0x646572, 0x652062, 0x652076, 0x65656E,
-        0x656572, 0x656E20, 0x657220, 0x657273, 0x657420, 0x67656E, 0x686574, 0x696520,
-        0x696E20, 0x696E67, 0x697320, 0x6E2062, 0x6E2064, 0x6E2065, 0x6E2068, 0x6E206F,
-        0x6E2076, 0x6E6465, 0x6E6720, 0x6F6E64, 0x6F6F72, 0x6F7020, 0x6F7220, 0x736368,
-        0x737465, 0x742064, 0x746520, 0x74656E, 0x746572, 0x76616E, 0x766572, 0x766F6F
-      ]),
-      new NGramsPlusLang('no', [
-        0x206174, 0x206176, 0x206465, 0x20656E, 0x206572, 0x20666F, 0x206861, 0x206920,
-        0x206D65, 0x206F67, 0x2070E5, 0x207365, 0x20736B, 0x20736F, 0x207374, 0x207469,
-        0x207669, 0x20E520, 0x616E64, 0x617220, 0x617420, 0x646520, 0x64656E, 0x646574,
-        0x652073, 0x656420, 0x656E20, 0x656E65, 0x657220, 0x657265, 0x657420, 0x657474,
-        0x666F72, 0x67656E, 0x696B6B, 0x696C20, 0x696E67, 0x6B6520, 0x6B6B65, 0x6C6520,
-        0x6C6C65, 0x6D6564, 0x6D656E, 0x6E2073, 0x6E6520, 0x6E6720, 0x6E6765, 0x6E6E65,
-        0x6F6720, 0x6F6D20, 0x6F7220, 0x70E520, 0x722073, 0x726520, 0x736F6D, 0x737465,
-        0x742073, 0x746520, 0x74656E, 0x746572, 0x74696C, 0x747420, 0x747465, 0x766572
-      ]),
-      new NGramsPlusLang('pt', [
-        0x206120, 0x20636F, 0x206461, 0x206465, 0x20646F, 0x206520, 0x206573, 0x206D61,
-        0x206E6F, 0x206F20, 0x207061, 0x20706F, 0x207072, 0x207175, 0x207265, 0x207365,
-        0x20756D, 0x612061, 0x612063, 0x612064, 0x612070, 0x616465, 0x61646F, 0x616C20,
-        0x617220, 0x617261, 0x617320, 0x636F6D, 0x636F6E, 0x646120, 0x646520, 0x646F20,
-        0x646F73, 0x652061, 0x652064, 0x656D20, 0x656E74, 0x657320, 0x657374, 0x696120,
-        0x696361, 0x6D656E, 0x6E7465, 0x6E746F, 0x6F2061, 0x6F2063, 0x6F2064, 0x6F2065,
-        0x6F2070, 0x6F7320, 0x706172, 0x717565, 0x726120, 0x726573, 0x732061, 0x732064,
-        0x732065, 0x732070, 0x737461, 0x746520, 0x746F20, 0x756520, 0xE36F20, 0xE7E36F
-      ]),
-      new NGramsPlusLang('sv', [
-        0x206174, 0x206176, 0x206465, 0x20656E, 0x2066F6, 0x206861, 0x206920, 0x20696E,
-        0x206B6F, 0x206D65, 0x206F63, 0x2070E5, 0x20736B, 0x20736F, 0x207374, 0x207469,
-        0x207661, 0x207669, 0x20E472, 0x616465, 0x616E20, 0x616E64, 0x617220, 0x617474,
-        0x636820, 0x646520, 0x64656E, 0x646572, 0x646574, 0x656420, 0x656E20, 0x657220,
-        0x657420, 0x66F672, 0x67656E, 0x696C6C, 0x696E67, 0x6B6120, 0x6C6C20, 0x6D6564,
-        0x6E2073, 0x6E6120, 0x6E6465, 0x6E6720, 0x6E6765, 0x6E696E, 0x6F6368, 0x6F6D20,
-        0x6F6E20, 0x70E520, 0x722061, 0x722073, 0x726120, 0x736B61, 0x736F6D, 0x742073,
-        0x746120, 0x746520, 0x746572, 0x74696C, 0x747420, 0x766172, 0xE47220, 0xF67220,
-      ])
-    ];
-  };
-
-  this.name = function(det) {
-    return (det && det.fC1Bytes) ? 'windows-1252' : 'ISO-8859-1';
-  };
-};
-util.inherits(module.exports.ISO_8859_1, sbcs);
-
-
-module.exports.ISO_8859_2 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0xB1, 0x20, 0xB3, 0x20, 0xB5, 0xB6, 0x20,
-      0x20, 0xB9, 0xBA, 0xBB, 0xBC, 0x20, 0xBE, 0xBF,
-      0x20, 0xB1, 0x20, 0xB3, 0x20, 0xB5, 0xB6, 0xB7,
-      0x20, 0xB9, 0xBA, 0xBB, 0xBC, 0x20, 0xBE, 0xBF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0x20,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0x20,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0x20
-    ];
-  }
-
-  this.ngrams = function() {
-    return [
-      new NGramsPlusLang('cs', [
-        0x206120, 0x206279, 0x20646F, 0x206A65, 0x206E61, 0x206E65, 0x206F20, 0x206F64,
-        0x20706F, 0x207072, 0x2070F8, 0x20726F, 0x207365, 0x20736F, 0x207374, 0x20746F,
-        0x207620, 0x207679, 0x207A61, 0x612070, 0x636520, 0x636820, 0x652070, 0x652073,
-        0x652076, 0x656D20, 0x656EED, 0x686F20, 0x686F64, 0x697374, 0x6A6520, 0x6B7465,
-        0x6C6520, 0x6C6920, 0x6E6120, 0x6EE920, 0x6EEC20, 0x6EED20, 0x6F2070, 0x6F646E,
-        0x6F6A69, 0x6F7374, 0x6F7520, 0x6F7661, 0x706F64, 0x706F6A, 0x70726F, 0x70F865,
-        0x736520, 0x736F75, 0x737461, 0x737469, 0x73746E, 0x746572, 0x746EED, 0x746F20,
-        0x752070, 0xBE6520, 0xE16EED, 0xE9686F, 0xED2070, 0xED2073, 0xED6D20, 0xF86564,
-      ]),
-      new NGramsPlusLang('hu', [
-        0x206120, 0x20617A, 0x206265, 0x206567, 0x20656C, 0x206665, 0x206861, 0x20686F,
-        0x206973, 0x206B65, 0x206B69, 0x206BF6, 0x206C65, 0x206D61, 0x206D65, 0x206D69,
-        0x206E65, 0x20737A, 0x207465, 0x20E973, 0x612061, 0x61206B, 0x61206D, 0x612073,
-        0x616B20, 0x616E20, 0x617A20, 0x62616E, 0x62656E, 0x656779, 0x656B20, 0x656C20,
-        0x656C65, 0x656D20, 0x656E20, 0x657265, 0x657420, 0x657465, 0x657474, 0x677920,
-        0x686F67, 0x696E74, 0x697320, 0x6B2061, 0x6BF67A, 0x6D6567, 0x6D696E, 0x6E2061,
-        0x6E616B, 0x6E656B, 0x6E656D, 0x6E7420, 0x6F6779, 0x732061, 0x737A65, 0x737A74,
-        0x737AE1, 0x73E967, 0x742061, 0x747420, 0x74E173, 0x7A6572, 0xE16E20, 0xE97320,
-      ]),
-      new NGramsPlusLang('pl', [
-        0x20637A, 0x20646F, 0x206920, 0x206A65, 0x206B6F, 0x206D61, 0x206D69, 0x206E61,
-        0x206E69, 0x206F64, 0x20706F, 0x207072, 0x207369, 0x207720, 0x207769, 0x207779,
-        0x207A20, 0x207A61, 0x612070, 0x612077, 0x616E69, 0x636820, 0x637A65, 0x637A79,
-        0x646F20, 0x647A69, 0x652070, 0x652073, 0x652077, 0x65207A, 0x65676F, 0x656A20,
-        0x656D20, 0x656E69, 0x676F20, 0x696120, 0x696520, 0x69656A, 0x6B6120, 0x6B6920,
-        0x6B6965, 0x6D6965, 0x6E6120, 0x6E6961, 0x6E6965, 0x6F2070, 0x6F7761, 0x6F7769,
-        0x706F6C, 0x707261, 0x70726F, 0x70727A, 0x727A65, 0x727A79, 0x7369EA, 0x736B69,
-        0x737461, 0x776965, 0x796368, 0x796D20, 0x7A6520, 0x7A6965, 0x7A7920, 0xF37720,
-      ]),
-      new NGramsPlusLang('ro', [
-        0x206120, 0x206163, 0x206361, 0x206365, 0x20636F, 0x206375, 0x206465, 0x206469,
-        0x206C61, 0x206D61, 0x207065, 0x207072, 0x207365, 0x2073E3, 0x20756E, 0x20BA69,
-        0x20EE6E, 0x612063, 0x612064, 0x617265, 0x617420, 0x617465, 0x617520, 0x636172,
-        0x636F6E, 0x637520, 0x63E320, 0x646520, 0x652061, 0x652063, 0x652064, 0x652070,
-        0x652073, 0x656120, 0x656920, 0x656C65, 0x656E74, 0x657374, 0x692061, 0x692063,
-        0x692064, 0x692070, 0x696520, 0x696920, 0x696E20, 0x6C6120, 0x6C6520, 0x6C6F72,
-        0x6C7569, 0x6E6520, 0x6E7472, 0x6F7220, 0x70656E, 0x726520, 0x726561, 0x727520,
-        0x73E320, 0x746520, 0x747275, 0x74E320, 0x756920, 0x756C20, 0xBA6920, 0xEE6E20,
-      ])
-    ];
-  };
-
-  this.name = function(det) {
-    return (det && det.fC1Bytes) ? 'windows-1250' : 'ISO-8859-2';
-  };
-};
-util.inherits(module.exports.ISO_8859_2, sbcs);
-
-
-module.exports.ISO_8859_5 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0x20, 0xFE, 0xFF,
-      0xD0, 0xD1, 0xD2, 0xD3, 0xD4, 0xD5, 0xD6, 0xD7,
-      0xD8, 0xD9, 0xDA, 0xDB, 0xDC, 0xDD, 0xDE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xD0, 0xD1, 0xD2, 0xD3, 0xD4, 0xD5, 0xD6, 0xD7,
-      0xD8, 0xD9, 0xDA, 0xDB, 0xDC, 0xDD, 0xDE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0x20, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0x20, 0xFE, 0xFF
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x20D220, 0x20D2DE, 0x20D4DE, 0x20D7D0, 0x20D820, 0x20DAD0, 0x20DADE, 0x20DDD0,
-      0x20DDD5, 0x20DED1, 0x20DFDE, 0x20DFE0, 0x20E0D0, 0x20E1DE, 0x20E1E2, 0x20E2DE,
-      0x20E7E2, 0x20EDE2, 0xD0DDD8, 0xD0E2EC, 0xD3DE20, 0xD5DBEC, 0xD5DDD8, 0xD5E1E2,
-      0xD5E220, 0xD820DF, 0xD8D520, 0xD8D820, 0xD8EF20, 0xDBD5DD, 0xDBD820, 0xDBECDD,
-      0xDDD020, 0xDDD520, 0xDDD8D5, 0xDDD8EF, 0xDDDE20, 0xDDDED2, 0xDE20D2, 0xDE20DF,
-      0xDE20E1, 0xDED220, 0xDED2D0, 0xDED3DE, 0xDED920, 0xDEDBEC, 0xDEDC20, 0xDEE1E2,
-      0xDFDEDB, 0xDFE0D5, 0xDFE0D8, 0xDFE0DE, 0xE0D0D2, 0xE0D5D4, 0xE1E2D0, 0xE1E2D2,
-      0xE1E2D8, 0xE1EF20, 0xE2D5DB, 0xE2DE20, 0xE2DEE0, 0xE2EC20, 0xE7E2DE, 0xEBE520
-    ];
-  };
-
-  this.name = function(det) {
-    return 'ISO-8859-5';
-  };
-
-  this.language = function() {
-    return 'ru';
-  };
-};
-util.inherits(module.exports.ISO_8859_5, sbcs);
-
-
-module.exports.ISO_8859_6 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0xC1, 0xC2, 0xC3, 0xC4, 0xC5, 0xC6, 0xC7,
-      0xC8, 0xC9, 0xCA, 0xCB, 0xCC, 0xCD, 0xCE, 0xCF,
-      0xD0, 0xD1, 0xD2, 0xD3, 0xD4, 0xD5, 0xD6, 0xD7,
-      0xD8, 0xD9, 0xDA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x20C7E4, 0x20C7E6, 0x20C8C7, 0x20D9E4, 0x20E1EA, 0x20E4E4, 0x20E5E6, 0x20E8C7,
-      0xC720C7, 0xC7C120, 0xC7CA20, 0xC7D120, 0xC7E420, 0xC7E4C3, 0xC7E4C7, 0xC7E4C8,
-      0xC7E4CA, 0xC7E4CC, 0xC7E4CD, 0xC7E4CF, 0xC7E4D3, 0xC7E4D9, 0xC7E4E2, 0xC7E4E5,
-      0xC7E4E8, 0xC7E4EA, 0xC7E520, 0xC7E620, 0xC7E6CA, 0xC820C7, 0xC920C7, 0xC920E1,
-      0xC920E4, 0xC920E5, 0xC920E8, 0xCA20C7, 0xCF20C7, 0xCFC920, 0xD120C7, 0xD1C920,
-      0xD320C7, 0xD920C7, 0xD9E4E9, 0xE1EA20, 0xE420C7, 0xE4C920, 0xE4E920, 0xE4EA20,
-      0xE520C7, 0xE5C720, 0xE5C920, 0xE5E620, 0xE620C7, 0xE720C7, 0xE7C720, 0xE8C7E4,
-      0xE8E620, 0xE920C7, 0xEA20C7, 0xEA20E5, 0xEA20E8, 0xEAC920, 0xEAD120, 0xEAE620
-    ];
-  };
-
-  this.name = function(det) {
-    return 'ISO-8859-6';
-  };
-
-  this.language = function() {
-    return 'ar';
-  };
-};
-util.inherits(module.exports.ISO_8859_6, sbcs);
-
-
-module.exports.ISO_8859_7 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0xA1, 0xA2, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0xDC, 0x20,
-      0xDD, 0xDE, 0xDF, 0x20, 0xFC, 0x20, 0xFD, 0xFE,
-      0xC0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0x20, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xDC, 0xDD, 0xDE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0x20
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x20E1ED, 0x20E1F0, 0x20E3E9, 0x20E4E9, 0x20E5F0, 0x20E720, 0x20EAE1, 0x20ECE5,
-      0x20EDE1, 0x20EF20, 0x20F0E1, 0x20F0EF, 0x20F0F1, 0x20F3F4, 0x20F3F5, 0x20F4E7,
-      0x20F4EF, 0xDFE120, 0xE120E1, 0xE120F4, 0xE1E920, 0xE1ED20, 0xE1F0FC, 0xE1F220,
-      0xE3E9E1, 0xE5E920, 0xE5F220, 0xE720F4, 0xE7ED20, 0xE7F220, 0xE920F4, 0xE9E120,
-      0xE9EADE, 0xE9F220, 0xEAE1E9, 0xEAE1F4, 0xECE520, 0xED20E1, 0xED20E5, 0xED20F0,
-      0xEDE120, 0xEFF220, 0xEFF520, 0xF0EFF5, 0xF0F1EF, 0xF0FC20, 0xF220E1, 0xF220E5,
-      0xF220EA, 0xF220F0, 0xF220F4, 0xF3E520, 0xF3E720, 0xF3F4EF, 0xF4E120, 0xF4E1E9,
-      0xF4E7ED, 0xF4E7F2, 0xF4E9EA, 0xF4EF20, 0xF4EFF5, 0xF4F9ED, 0xF9ED20, 0xFEED20
-    ];
-  };
-
-  this.name = function(det) {
-    return (det && det.fC1Bytes) ? 'windows-1253' : 'ISO-8859-7';
-  };
-
-  this.language = function() {
-    return 'el';
-  };
-};
-util.inherits(module.exports.ISO_8859_7, sbcs);
-
-module.exports.ISO_8859_8 = function() {
-
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0xB5, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0x20, 0x20, 0x20, 0x20, 0x20
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      new NGramsPlusLang('he', [
-        0x20E0E5, 0x20E0E7, 0x20E0E9, 0x20E0FA, 0x20E1E9, 0x20E1EE, 0x20E4E0, 0x20E4E5,
-        0x20E4E9, 0x20E4EE, 0x20E4F2, 0x20E4F9, 0x20E4FA, 0x20ECE0, 0x20ECE4, 0x20EEE0,
-        0x20F2EC, 0x20F9EC, 0xE0FA20, 0xE420E0, 0xE420E1, 0xE420E4, 0xE420EC, 0xE420EE,
-        0xE420F9, 0xE4E5E0, 0xE5E020, 0xE5ED20, 0xE5EF20, 0xE5F820, 0xE5FA20, 0xE920E4,
-        0xE9E420, 0xE9E5FA, 0xE9E9ED, 0xE9ED20, 0xE9EF20, 0xE9F820, 0xE9FA20, 0xEC20E0,
-        0xEC20E4, 0xECE020, 0xECE420, 0xED20E0, 0xED20E1, 0xED20E4, 0xED20EC, 0xED20EE,
-        0xED20F9, 0xEEE420, 0xEF20E4, 0xF0E420, 0xF0E920, 0xF0E9ED, 0xF2EC20, 0xF820E4,
-        0xF8E9ED, 0xF9EC20, 0xFA20E0, 0xFA20E1, 0xFA20E4, 0xFA20EC, 0xFA20EE, 0xFA20F9,
-      ]),
-      new NGramsPlusLang('he', [
-        0x20E0E5, 0x20E0EC, 0x20E4E9, 0x20E4EC, 0x20E4EE, 0x20E4F0, 0x20E9F0, 0x20ECF2,
-        0x20ECF9, 0x20EDE5, 0x20EDE9, 0x20EFE5, 0x20EFE9, 0x20F8E5, 0x20F8E9, 0x20FAE0,
-        0x20FAE5, 0x20FAE9, 0xE020E4, 0xE020EC, 0xE020ED, 0xE020FA, 0xE0E420, 0xE0E5E4,
-        0xE0EC20, 0xE0EE20, 0xE120E4, 0xE120ED, 0xE120FA, 0xE420E4, 0xE420E9, 0xE420EC,
-        0xE420ED, 0xE420EF, 0xE420F8, 0xE420FA, 0xE4EC20, 0xE5E020, 0xE5E420, 0xE7E020,
-        0xE9E020, 0xE9E120, 0xE9E420, 0xEC20E4, 0xEC20ED, 0xEC20FA, 0xECF220, 0xECF920,
-        0xEDE9E9, 0xEDE9F0, 0xEDE9F8, 0xEE20E4, 0xEE20ED, 0xEE20FA, 0xEEE120, 0xEEE420,
-        0xF2E420, 0xF920E4, 0xF920ED, 0xF920FA, 0xF9E420, 0xFAE020, 0xFAE420, 0xFAE5E9,
-      ])
-    ];
-  };
-
-  this.name = function(det) {
-    return (det && det.fC1Bytes) ? 'windows-1255' : 'ISO-8859-8';
-  };
-
-  this.language = function() {
-    return 'he';
-  };
-
-};
-util.inherits(module.exports.ISO_8859_8, sbcs);
-
-
-module.exports.ISO_8859_9 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0xAA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0xB5, 0x20, 0x20,
-      0x20, 0x20, 0xBA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0x20,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0x69, 0xFE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0x20,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0xFF
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x206261, 0x206269, 0x206275, 0x206461, 0x206465, 0x206765, 0x206861, 0x20696C,
-      0x206B61, 0x206B6F, 0x206D61, 0x206F6C, 0x207361, 0x207461, 0x207665, 0x207961,
-      0x612062, 0x616B20, 0x616C61, 0x616D61, 0x616E20, 0x616EFD, 0x617220, 0x617261,
-      0x6172FD, 0x6173FD, 0x617961, 0x626972, 0x646120, 0x646520, 0x646920, 0x652062,
-      0x65206B, 0x656469, 0x656E20, 0x657220, 0x657269, 0x657369, 0x696C65, 0x696E20,
-      0x696E69, 0x697220, 0x6C616E, 0x6C6172, 0x6C6520, 0x6C6572, 0x6E2061, 0x6E2062,
-      0x6E206B, 0x6E6461, 0x6E6465, 0x6E6520, 0x6E6920, 0x6E696E, 0x6EFD20, 0x72696E,
-      0x72FD6E, 0x766520, 0x796120, 0x796F72, 0xFD6E20, 0xFD6E64, 0xFD6EFD, 0xFDF0FD
-    ];
-  };
-
-  this.name = function(det) {
-    return (det && det.fC1Bytes) ? 'windows-1254' : 'ISO-8859-9';
-  };
-
-  this.language = function() {
-    return 'tr';
-  };
-};
-util.inherits(module.exports.ISO_8859_9, sbcs);
-
-
-module.exports.windows_1251 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x90, 0x83, 0x20, 0x83, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x9A, 0x20, 0x9C, 0x9D, 0x9E, 0x9F,
-      0x90, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x9A, 0x20, 0x9C, 0x9D, 0x9E, 0x9F,
-      0x20, 0xA2, 0xA2, 0xBC, 0x20, 0xB4, 0x20, 0x20,
-      0xB8, 0x20, 0xBA, 0x20, 0x20, 0x20, 0x20, 0xBF,
-      0x20, 0x20, 0xB3, 0xB3, 0xB4, 0xB5, 0x20, 0x20,
-      0xB8, 0x20, 0xBA, 0x20, 0xBC, 0xBE, 0xBE, 0xBF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0xFF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0xF0, 0xF1, 0xF2, 0xF3, 0xF4, 0xF5, 0xF6, 0xF7,
-      0xF8, 0xF9, 0xFA, 0xFB, 0xFC, 0xFD, 0xFE, 0xFF
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x20E220, 0x20E2EE, 0x20E4EE, 0x20E7E0, 0x20E820, 0x20EAE0, 0x20EAEE, 0x20EDE0,
-      0x20EDE5, 0x20EEE1, 0x20EFEE, 0x20EFF0, 0x20F0E0, 0x20F1EE, 0x20F1F2, 0x20F2EE,
-      0x20F7F2, 0x20FDF2, 0xE0EDE8, 0xE0F2FC, 0xE3EE20, 0xE5EBFC, 0xE5EDE8, 0xE5F1F2,
-      0xE5F220, 0xE820EF, 0xE8E520, 0xE8E820, 0xE8FF20, 0xEBE5ED, 0xEBE820, 0xEBFCED,
-      0xEDE020, 0xEDE520, 0xEDE8E5, 0xEDE8FF, 0xEDEE20, 0xEDEEE2, 0xEE20E2, 0xEE20EF,
-      0xEE20F1, 0xEEE220, 0xEEE2E0, 0xEEE3EE, 0xEEE920, 0xEEEBFC, 0xEEEC20, 0xEEF1F2,
-      0xEFEEEB, 0xEFF0E5, 0xEFF0E8, 0xEFF0EE, 0xF0E0E2, 0xF0E5E4, 0xF1F2E0, 0xF1F2E2,
-      0xF1F2E8, 0xF1FF20, 0xF2E5EB, 0xF2EE20, 0xF2EEF0, 0xF2FC20, 0xF7F2EE, 0xFBF520
-    ];
-  };
-
-  this.name = function(det) {
-    return 'windows-1251';
-  };
-
-  this.language = function() {
-    return 'ru';
-  };
-};
-util.inherits(module.exports.windows_1251, sbcs);
-
-
-module.exports.windows_1256 = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x81, 0x20, 0x83, 0x20, 0x20, 0x20, 0x20,
-      0x88, 0x20, 0x8A, 0x20, 0x9C, 0x8D, 0x8E, 0x8F,
-      0x90, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x98, 0x20, 0x9A, 0x20, 0x9C, 0x20, 0x20, 0x9F,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0xAA, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0xB5, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0xC0, 0xC1, 0xC2, 0xC3, 0xC4, 0xC5, 0xC6, 0xC7,
-      0xC8, 0xC9, 0xCA, 0xCB, 0xCC, 0xCD, 0xCE, 0xCF,
-      0xD0, 0xD1, 0xD2, 0xD3, 0xD4, 0xD5, 0xD6, 0x20,
-      0xD8, 0xD9, 0xDA, 0xDB, 0xDC, 0xDD, 0xDE, 0xDF,
-      0xE0, 0xE1, 0xE2, 0xE3, 0xE4, 0xE5, 0xE6, 0xE7,
-      0xE8, 0xE9, 0xEA, 0xEB, 0xEC, 0xED, 0xEE, 0xEF,
-      0x20, 0x20, 0x20, 0x20, 0xF4, 0x20, 0x20, 0x20,
-      0x20, 0xF9, 0x20, 0xFB, 0xFC, 0x20, 0x20, 0xFF
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x20C7E1, 0x20C7E4, 0x20C8C7, 0x20DAE1, 0x20DDED, 0x20E1E1, 0x20E3E4, 0x20E6C7,
-      0xC720C7, 0xC7C120, 0xC7CA20, 0xC7D120, 0xC7E120, 0xC7E1C3, 0xC7E1C7, 0xC7E1C8,
-      0xC7E1CA, 0xC7E1CC, 0xC7E1CD, 0xC7E1CF, 0xC7E1D3, 0xC7E1DA, 0xC7E1DE, 0xC7E1E3,
-      0xC7E1E6, 0xC7E1ED, 0xC7E320, 0xC7E420, 0xC7E4CA, 0xC820C7, 0xC920C7, 0xC920DD,
-      0xC920E1, 0xC920E3, 0xC920E6, 0xCA20C7, 0xCF20C7, 0xCFC920, 0xD120C7, 0xD1C920,
-      0xD320C7, 0xDA20C7, 0xDAE1EC, 0xDDED20, 0xE120C7, 0xE1C920, 0xE1EC20, 0xE1ED20,
-      0xE320C7, 0xE3C720, 0xE3C920, 0xE3E420, 0xE420C7, 0xE520C7, 0xE5C720, 0xE6C7E1,
-      0xE6E420, 0xEC20C7, 0xED20C7, 0xED20E3, 0xED20E6, 0xEDC920, 0xEDD120, 0xEDE420
-    ];
-  };
-
-  this.name = function(det) {
-    return 'windows-1256';
-  };
-
-  this.language = function() {
-    return 'ar';
-  };
-};
-util.inherits(module.exports.windows_1256, sbcs);
-
-
-module.exports.KOI8_R = function() {
-  this.byteMap = function() {
-    return [
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x00,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x61, 0x62, 0x63, 0x64, 0x65, 0x66, 0x67,
-      0x68, 0x69, 0x6A, 0x6B, 0x6C, 0x6D, 0x6E, 0x6F,
-      0x70, 0x71, 0x72, 0x73, 0x74, 0x75, 0x76, 0x77,
-      0x78, 0x79, 0x7A, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0xA3, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0xA3, 0x20, 0x20, 0x20, 0x20,
-      0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20, 0x20,
-      0xC0, 0xC1, 0xC2, 0xC3, 0xC4, 0xC5, 0xC6, 0xC7,
-      0xC8, 0xC9, 0xCA, 0xCB, 0xCC, 0xCD, 0xCE, 0xCF,
-      0xD0, 0xD1, 0xD2, 0xD3, 0xD4, 0xD5, 0xD6, 0xD7,
-      0xD8, 0xD9, 0xDA, 0xDB, 0xDC, 0xDD, 0xDE, 0xDF,
-      0xC0, 0xC1, 0xC2, 0xC3, 0xC4, 0xC5, 0xC6, 0xC7,
-      0xC8, 0xC9, 0xCA, 0xCB, 0xCC, 0xCD, 0xCE, 0xCF,
-      0xD0, 0xD1, 0xD2, 0xD3, 0xD4, 0xD5, 0xD6, 0xD7,
-      0xD8, 0xD9, 0xDA, 0xDB, 0xDC, 0xDD, 0xDE, 0xDF
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-      0x20C4CF, 0x20C920, 0x20CBC1, 0x20CBCF, 0x20CEC1, 0x20CEC5, 0x20CFC2, 0x20D0CF,
-      0x20D0D2, 0x20D2C1, 0x20D3CF, 0x20D3D4, 0x20D4CF, 0x20D720, 0x20D7CF, 0x20DAC1,
-      0x20DCD4, 0x20DED4, 0xC1CEC9, 0xC1D4D8, 0xC5CCD8, 0xC5CEC9, 0xC5D3D4, 0xC5D420,
-      0xC7CF20, 0xC920D0, 0xC9C520, 0xC9C920, 0xC9D120, 0xCCC5CE, 0xCCC920, 0xCCD8CE,
-      0xCEC120, 0xCEC520, 0xCEC9C5, 0xCEC9D1, 0xCECF20, 0xCECFD7, 0xCF20D0, 0xCF20D3,
-      0xCF20D7, 0xCFC7CF, 0xCFCA20, 0xCFCCD8, 0xCFCD20, 0xCFD3D4, 0xCFD720, 0xCFD7C1,
-      0xD0CFCC, 0xD0D2C5, 0xD0D2C9, 0xD0D2CF, 0xD2C1D7, 0xD2C5C4, 0xD3D120, 0xD3D4C1,
-      0xD3D4C9, 0xD3D4D7, 0xD4C5CC, 0xD4CF20, 0xD4CFD2, 0xD4D820, 0xD9C820, 0xDED4CF
-    ];
-  };
-
-  this.name = function(det) {
-    return 'KOI8-R';
-  };
-
-  this.language = function() {
-    return 'ru';
-  };
-};
-util.inherits(module.exports.KOI8_R, sbcs);
-
-
-/*
-module.exports.ISO_8859_7 = function() {
-  this.byteMap = function() {
-    return [
-
-    ];
-  };
-
-  this.ngrams = function() {
-    return [
-
-    ];
-  };
-
-  this.name = function(det) {
-    if (typeof det == 'undefined')
-      return 'ISO-8859-7';
-    return det.fC1Bytes ? 'windows-1253' : 'ISO-8859-7';
-  };
-
-  this.language = function() {
-    return 'el';
-  };
-};
-util.inherits(module.exports.ISO_8859_7, sbcs);
-*/
-
-
-
-/***/ }),
-/* 702 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var util = __webpack_require__(3),
-  Match = __webpack_require__ (142);
-
-/**
- * This class matches UTF-16 and UTF-32, both big- and little-endian. The
- * BOM will be used if it is present.
- */
-module.exports.UTF_16BE = function() {
-  this.name = function() {
-    return 'UTF-16BE';
-  };
-  this.match = function(det) {
-    var input = det.fRawInput;
-
-    if (input.length >= 2 && ((input[0] & 0xff) == 0xfe && (input[1] & 0xff) == 0xff)) {
-      return new Match(det, this, 100); // confidence = 100
-    }
-
-    // TODO: Do some statistics to check for unsigned UTF-16BE
-    return null;
-  };
-};
-
-module.exports.UTF_16LE = function() {
-  this.name = function() {
-    return 'UTF-16LE';
-  };
-  this.match = function(det) {
-    var input = det.fRawInput;
-
-    if (input.length >= 2 && ((input[0] & 0xff) == 0xff && (input[1] & 0xff) == 0xfe)) {
-      // LE BOM is present.
-      if (input.length >= 4 && input[2] == 0x00 && input[3] == 0x00) {
-        // It is probably UTF-32 LE, not UTF-16
-        return null;
-      }
-      return new Match(det, this, 100); // confidence = 100
-    }
-
-    // TODO: Do some statistics to check for unsigned UTF-16LE
-    return null;
-  }
-};
-
-function UTF_32() {};
-UTF_32.prototype.match = function(det) {
-  var input      = det.fRawInput,
-    limit      = (det.fRawLength / 4) * 4,
-    numValid   = 0,
-    numInvalid = 0,
-    hasBOM     = false,
-    confidence = 0;
-
-  if (limit == 0) {
-    return null;
-  }
-
-  if (this.getChar(input, 0) == 0x0000FEFF) {
-    hasBOM = true;
-  }
-
-  for (var i = 0; i < limit; i += 4) {
-    var ch = this.getChar(input, i);
-
-    if (ch < 0 || ch >= 0x10FFFF || (ch >= 0xD800 && ch <= 0xDFFF)) {
-      numInvalid += 1;
-    } else {
-      numValid += 1;
-    }
-  }
-
-  // Cook up some sort of confidence score, based on presence of a BOM
-  //    and the existence of valid and/or invalid multi-byte sequences.
-  if (hasBOM && numInvalid == 0) {
-    confidence = 100;
-  } else if (hasBOM && numValid > numInvalid * 10) {
-    confidence = 80;
-  } else if (numValid > 3 && numInvalid == 0) {
-    confidence = 100;
-  } else if (numValid > 0 && numInvalid == 0) {
-    confidence = 80;
-  } else if (numValid > numInvalid * 10) {
-    // Probably corrupt UTF-32BE data.  Valid sequences aren't likely by chance.
-    confidence = 25;
-  }
-
-  // return confidence == 0 ? null : new CharsetMatch(det, this, confidence);
-  return confidence == 0 ? null : new Match(det, this, confidence);
-};
-
-module.exports.UTF_32BE = function() {
-  this.name = function() {
-    return 'UTF-32BE';
-  };
-  this.getChar = function(input, index) {
-    return (input[index + 0] & 0xff) << 24 | (input[index + 1] & 0xff) << 16 |
-         (input[index + 2] & 0xff) <<  8 | (input[index + 3] & 0xff);
-  };
-};
-util.inherits(module.exports.UTF_32BE, UTF_32);
-
-module.exports.UTF_32LE = function() {
-  this.name = function() {
-    return 'UTF-32LE';
-  };
-  this.getChar = function(input, index) {
-    return (input[index + 3] & 0xff) << 24 | (input[index + 2] & 0xff) << 16 |
-         (input[index + 1] & 0xff) <<  8 | (input[index + 0] & 0xff);
-  };
-};
-util.inherits(module.exports.UTF_32LE, UTF_32);
-
-
-/***/ }),
-/* 703 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-var Match = __webpack_require__ (142);
-
-/**
- * Charset recognizer for UTF-8
- */
-module.exports = function() {
-  this.name = function() {
-    return 'UTF-8';
-  };
-  this.match = function(det) {
-
-    var hasBOM = false,
-      numValid = 0,
-      numInvalid = 0,
-      input = det.fRawInput,
-      trailBytes = 0,
-      confidence;
-
-    if (det.fRawLength >= 3 &&
-      (input[0] & 0xff) == 0xef && (input[1] & 0xff) == 0xbb && (input[2] & 0xff) == 0xbf) {
-      hasBOM = true;
-    }
-
-    // Scan for multi-byte sequences
-    for (var i = 0; i < det.fRawLength; i++) {
-      var b = input[i];
-      if ((b & 0x80) == 0)
-        continue; // ASCII
-
-      // Hi bit on char found.  Figure out how long the sequence should be
-      if ((b & 0x0e0) == 0x0c0) {
-        trailBytes = 1;
-      } else if ((b & 0x0f0) == 0x0e0) {
-        trailBytes = 2;
-      } else if ((b & 0x0f8) == 0xf0) {
-        trailBytes = 3;
-      } else {
-        numInvalid++;
-        if (numInvalid > 5)
-          break;
-        trailBytes = 0;
-      }
-
-      // Verify that we've got the right number of trail bytes in the sequence
-      for (;;) {
-        i++;
-        if (i >= det.fRawLength)
-          break;
-
-        if ((input[i] & 0xc0) != 0x080) {
-          numInvalid++;
-          break;
-        }
-        if (--trailBytes == 0) {
-          numValid++;
-          break;
-        }
-      }
-    }
-
-    // Cook up some sort of confidence score, based on presense of a BOM
-    //    and the existence of valid and/or invalid multi-byte sequences.
-    confidence = 0;
-    if (hasBOM && numInvalid == 0)
-      confidence = 100;
-    else if (hasBOM && numValid > numInvalid * 10)
-      confidence = 80;
-    else if (numValid > 3 && numInvalid == 0)
-      confidence = 100;
-    else if (numValid > 0 && numInvalid == 0)
-      confidence = 80;
-    else if (numValid == 0 && numInvalid == 0)
-      // Plain ASCII.
-      confidence = 10;
-    else if (numValid > numInvalid * 10)
-      // Probably corruput utf-8 data.  Valid sequences aren't likely by chance.
-      confidence = 25;
-    else
-      return null
-
-    return new Match(det, this, confidence);
-  };
-};
-
-
-/***/ }),
-/* 704 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-var fs = __webpack_require__(5);
-
-var utf8  = __webpack_require__(703),
-  unicode = __webpack_require__(702),
-  mbcs    = __webpack_require__(700),
-  sbcs    = __webpack_require__(701),
-  iso2022 = __webpack_require__(699);
-
-var self = this;
-
-var recognisers = [
-  new utf8,
-  new unicode.UTF_16BE,
-  new unicode.UTF_16LE,
-  new unicode.UTF_32BE,
-  new unicode.UTF_32LE,
-  new mbcs.sjis,
-  new mbcs.big5,
-  new mbcs.euc_jp,
-  new mbcs.euc_kr,
-  new mbcs.gb_18030,
-  new iso2022.ISO_2022_JP,
-  new iso2022.ISO_2022_KR,
-  new iso2022.ISO_2022_CN,
-  new sbcs.ISO_8859_1,
-  new sbcs.ISO_8859_2,
-  new sbcs.ISO_8859_5,
-  new sbcs.ISO_8859_6,
-  new sbcs.ISO_8859_7,
-  new sbcs.ISO_8859_8,
-  new sbcs.ISO_8859_9,
-  new sbcs.windows_1251,
-  new sbcs.windows_1256,
-  new sbcs.KOI8_R
-];
-
-module.exports.detect = function(buffer, opts) {
-
-  // Tally up the byte occurence statistics.
-  var fByteStats = [];
-  for (var i = 0; i < 256; i++)
-    fByteStats[i] = 0;
-
-  for (var i = buffer.length - 1; i >= 0; i--)
-    fByteStats[buffer[i] & 0x00ff]++;
-
-  var fC1Bytes = false;
-  for (var i = 0x80; i <= 0x9F; i += 1) {
-    if (fByteStats[i] != 0) {
-      fC1Bytes = true;
-      break;
-    }
-  }
-
-  var context = {
-    fByteStats:  fByteStats,
-    fC1Bytes:    fC1Bytes,
-    fRawInput:   buffer,
-    fRawLength:  buffer.length,
-    fInputBytes: buffer,
-    fInputLen:   buffer.length
-  };
-
-  var matches = recognisers.map(function(rec) {
-    return rec.match(context);
-  }).filter(function(match) {
-    return !!match;
-  }).sort(function(a, b) {
-    return b.confidence - a.confidence;
-  });
-
-  if (opts && opts.returnAllMatches === true) {
-    return matches;
-  }
-  else {
-    return matches.length > 0 ? matches[0].name : null;
-  }
-};
-
-module.exports.detectFile = function(filepath, opts, cb) {
-  if (typeof opts === 'function') {
-    cb = opts;
-    opts = undefined;
-  }
-
-  var fd;
-
-  var handler = function(err, buffer) {
-    if (fd) {
-      fs.closeSync(fd);
-    }
-
-    if (err) return cb(err, null);
-    cb(null, self.detect(buffer, opts));
-  };
-
-  if (opts && opts.sampleSize) {
-    fd = fs.openSync(filepath, 'r'),
-      sample = Buffer.allocUnsafe(opts.sampleSize);
-
-    fs.read(fd, sample, 0, opts.sampleSize, null, function(err) {
-      handler(err, sample);
-    });
-    return;
-  }
-
-  fs.readFile(filepath, handler);
-};
-
-module.exports.detectFileSync = function(filepath, opts) {
-  if (opts && opts.sampleSize) {
-    var fd = fs.openSync(filepath, 'r'),
-      sample = Buffer.allocUnsafe(opts.sampleSize);
-
-    fs.readSync(fd, sample, 0, opts.sampleSize);
-    fs.closeSync(fd);
-    return self.detect(sample, opts);
-  }
-
-  return self.detect(fs.readFileSync(filepath), opts);
-};
-
-// Wrappers for the previous functions to return all encodings
-module.exports.detectAll = function(buffer, opts) {
-  if (typeof opts !== 'object') {
-    opts = {};
-  }
-  opts.returnAllMatches = true;
-  return self.detect(buffer, opts);
-}
-
-module.exports.detectFileAll = function(filepath, opts, cb) {
-  if (typeof opts === 'function') {
-    cb = opts;
-    opts = undefined;
-  }
-  if (typeof opts !== 'object') {
-    opts = {};
-  }
-  opts.returnAllMatches = true;
-  self.detectFile(filepath, opts, cb);
-}
-
-module.exports.detectFileAllSync = function(filepath, opts) {
-  if (typeof opts !== 'object') {
-    opts = {};
-  }
-  opts.returnAllMatches = true;
-  return self.detectFileSync(filepath, opts);
-}
-
-
-/***/ }),
-/* 705 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/***
- * Node External Editor
- *
- * Kevin Gravier <kevin@mrkmg.com>
- * MIT 2018
- */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var CreateFileError = /** @class */ (function (_super) {
-    __extends(CreateFileError, _super);
-    function CreateFileError(originalError) {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Failed to create temporary file for editor") || this;
-        _this.originalError = originalError;
-        var proto = _newTarget.prototype;
-        if (Object.setPrototypeOf) {
-            Object.setPrototypeOf(_this, proto);
-        }
-        else {
-            _this.__proto__ = _newTarget.prototype;
-        }
-        return _this;
-    }
-    return CreateFileError;
-}(Error));
-exports.CreateFileError = CreateFileError;
-
-
-/***/ }),
-/* 706 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/***
- * Node External Editor
- *
- * Kevin Gravier <kevin@mrkmg.com>
- * MIT 2018
- */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var LaunchEditorError = /** @class */ (function (_super) {
-    __extends(LaunchEditorError, _super);
-    function LaunchEditorError(originalError) {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Failed launch editor") || this;
-        _this.originalError = originalError;
-        var proto = _newTarget.prototype;
-        if (Object.setPrototypeOf) {
-            Object.setPrototypeOf(_this, proto);
-        }
-        else {
-            _this.__proto__ = _newTarget.prototype;
-        }
-        return _this;
-    }
-    return LaunchEditorError;
-}(Error));
-exports.LaunchEditorError = LaunchEditorError;
-
-
-/***/ }),
-/* 707 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/***
- * Node External Editor
- *
- * Kevin Gravier <kevin@mrkmg.com>
- * MIT 2018
- */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var ReadFileError = /** @class */ (function (_super) {
-    __extends(ReadFileError, _super);
-    function ReadFileError(originalError) {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Failed to read temporary file") || this;
-        _this.originalError = originalError;
-        var proto = _newTarget.prototype;
-        if (Object.setPrototypeOf) {
-            Object.setPrototypeOf(_this, proto);
-        }
-        else {
-            _this.__proto__ = _newTarget.prototype;
-        }
-        return _this;
-    }
-    return ReadFileError;
-}(Error));
-exports.ReadFileError = ReadFileError;
-
-
-/***/ }),
-/* 708 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/***
- * Node External Editor
- *
- * Kevin Gravier <kevin@mrkmg.com>
- * MIT 2018
- */
-var __extends = (this && this.__extends) || (function () {
-    var extendStatics = function (d, b) {
-        extendStatics = Object.setPrototypeOf ||
-            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
-            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
-        return extendStatics(d, b);
-    }
-    return function (d, b) {
-        extendStatics(d, b);
-        function __() { this.constructor = d; }
-        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
-    };
-})();
-Object.defineProperty(exports, "__esModule", { value: true });
-var RemoveFileError = /** @class */ (function (_super) {
-    __extends(RemoveFileError, _super);
-    function RemoveFileError(originalError) {
-        var _newTarget = this.constructor;
-        var _this = _super.call(this, "Failed to cleanup temporary file") || this;
-        _this.originalError = originalError;
-        var proto = _newTarget.prototype;
-        if (Object.setPrototypeOf) {
-            Object.setPrototypeOf(_this, proto);
-        }
-        else {
-            _this.__proto__ = _newTarget.prototype;
-        }
-        return _this;
-    }
-    return RemoveFileError;
-}(Error));
-exports.RemoveFileError = RemoveFileError;
-
-
-/***/ }),
-/* 709 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/***
- * Node External Editor
- *
- * Kevin Gravier <kevin@mrkmg.com>
- * MIT 2018
- */
-Object.defineProperty(exports, "__esModule", { value: true });
-var chardet_1 = __webpack_require__(704);
-var child_process_1 = __webpack_require__(331);
-var fs_1 = __webpack_require__(5);
-var iconv_lite_1 = __webpack_require__(726);
-var tmp_1 = __webpack_require__(954);
-var CreateFileError_1 = __webpack_require__(705);
-exports.CreateFileError = CreateFileError_1.CreateFileError;
-var LaunchEditorError_1 = __webpack_require__(706);
-exports.LaunchEditorError = LaunchEditorError_1.LaunchEditorError;
-var ReadFileError_1 = __webpack_require__(707);
-exports.ReadFileError = ReadFileError_1.ReadFileError;
-var RemoveFileError_1 = __webpack_require__(708);
-exports.RemoveFileError = RemoveFileError_1.RemoveFileError;
-function edit(text) {
-    if (text === void 0) { text = ""; }
-    var editor = new ExternalEditor(text);
-    editor.run();
-    editor.cleanup();
-    return editor.text;
-}
-exports.edit = edit;
-function editAsync(text, callback) {
-    if (text === void 0) { text = ""; }
-    var editor = new ExternalEditor(text);
-    editor.runAsync(function (err, result) {
-        if (err) {
-            setImmediate(callback, err, null);
-        }
-        else {
-            try {
-                editor.cleanup();
-                setImmediate(callback, null, result);
-            }
-            catch (cleanupError) {
-                setImmediate(callback, cleanupError, null);
-            }
-        }
-    });
-}
-exports.editAsync = editAsync;
-var ExternalEditor = /** @class */ (function () {
-    function ExternalEditor(text) {
-        if (text === void 0) { text = ""; }
-        this.text = "";
-        this.text = text;
-        this.determineEditor();
-        this.createTemporaryFile();
-    }
-    ExternalEditor.splitStringBySpace = function (str) {
-        var pieces = [];
-        var currentString = "";
-        for (var strIndex = 0; strIndex < str.length; strIndex++) {
-            var currentLetter = str[strIndex];
-            if (strIndex > 0 && currentLetter === " " && str[strIndex - 1] !== "\\" && currentString.length > 0) {
-                pieces.push(currentString);
-                currentString = "";
-            }
-            else {
-                currentString += currentLetter;
-            }
-        }
-        if (currentString.length > 0) {
-            pieces.push(currentString);
-        }
-        return pieces;
-    };
-    Object.defineProperty(ExternalEditor.prototype, "temp_file", {
-        get: function () {
-            console.log("DEPRECATED: temp_file. Use tempFile moving forward.");
-            return this.tempFile;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    Object.defineProperty(ExternalEditor.prototype, "last_exit_status", {
-        get: function () {
-            console.log("DEPRECATED: last_exit_status. Use lastExitStatus moving forward.");
-            return this.lastExitStatus;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    ExternalEditor.prototype.run = function () {
-        this.launchEditor();
-        this.readTemporaryFile();
-        return this.text;
-    };
-    ExternalEditor.prototype.runAsync = function (callback) {
-        var _this = this;
-        try {
-            this.launchEditorAsync(function () {
-                try {
-                    _this.readTemporaryFile();
-                    setImmediate(callback, null, _this.text);
-                }
-                catch (readError) {
-                    setImmediate(callback, readError, null);
-                }
-            });
-        }
-        catch (launchError) {
-            setImmediate(callback, launchError, null);
-        }
-    };
-    ExternalEditor.prototype.cleanup = function () {
-        this.removeTemporaryFile();
-    };
-    ExternalEditor.prototype.determineEditor = function () {
-        var editor = process.env.VISUAL ? process.env.VISUAL :
-            process.env.EDITOR ? process.env.EDITOR :
-                /^win/.test(process.platform) ? "notepad" :
-                    "vim";
-        var editorOpts = ExternalEditor.splitStringBySpace(editor).map(function (piece) { return piece.replace("\\ ", " "); });
-        var bin = editorOpts.shift();
-        this.editor = { args: editorOpts, bin: bin };
-    };
-    ExternalEditor.prototype.createTemporaryFile = function () {
-        try {
-            this.tempFile = tmp_1.tmpNameSync({});
-            fs_1.writeFileSync(this.tempFile, this.text, { encoding: "utf8" });
-        }
-        catch (createFileError) {
-            throw new CreateFileError_1.CreateFileError(createFileError);
-        }
-    };
-    ExternalEditor.prototype.readTemporaryFile = function () {
-        try {
-            var tempFileBuffer = fs_1.readFileSync(this.tempFile);
-            if (tempFileBuffer.length === 0) {
-                this.text = "";
-            }
-            else {
-                var encoding = chardet_1.detect(tempFileBuffer).toString();
-                if (!iconv_lite_1.encodingExists(encoding)) {
-                    // Probably a bad idea, but will at least prevent crashing
-                    encoding = "utf8";
-                }
-                this.text = iconv_lite_1.decode(tempFileBuffer, encoding);
-            }
-        }
-        catch (readFileError) {
-            throw new ReadFileError_1.ReadFileError(readFileError);
-        }
-    };
-    ExternalEditor.prototype.removeTemporaryFile = function () {
-        try {
-            fs_1.unlinkSync(this.tempFile);
-        }
-        catch (removeFileError) {
-            throw new RemoveFileError_1.RemoveFileError(removeFileError);
-        }
-    };
-    ExternalEditor.prototype.launchEditor = function () {
-        try {
-            var editorProcess = child_process_1.spawnSync(this.editor.bin, this.editor.args.concat([this.tempFile]), { stdio: "inherit" });
-            this.lastExitStatus = editorProcess.status;
-        }
-        catch (launchError) {
-            throw new LaunchEditorError_1.LaunchEditorError(launchError);
-        }
-    };
-    ExternalEditor.prototype.launchEditorAsync = function (callback) {
-        var _this = this;
-        try {
-            var editorProcess = child_process_1.spawn(this.editor.bin, this.editor.args.concat([this.tempFile]), { stdio: "inherit" });
-            editorProcess.on("exit", function (code) {
-                _this.lastExitStatus = code;
-                setImmediate(callback);
-            });
-        }
-        catch (launchError) {
-            throw new LaunchEditorError_1.LaunchEditorError(launchError);
-        }
-    };
-    return ExternalEditor;
-}());
-exports.ExternalEditor = ExternalEditor;
-
-
-/***/ }),
-/* 710 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var Buffer = __webpack_require__(15).Buffer;
-
-// Multibyte codec. In this scheme, a character is represented by 1 or more bytes.
-// Our codec supports UTF-16 surrogates, extensions for GB18030 and unicode sequences.
-// To save memory and loading time, we read table files only when requested.
-
-exports._dbcs = DBCSCodec;
-
-var UNASSIGNED = -1,
-    GB18030_CODE = -2,
-    SEQ_START  = -10,
-    NODE_START = -1000,
-    UNASSIGNED_NODE = new Array(0x100),
-    DEF_CHAR = -1;
-
-for (var i = 0; i < 0x100; i++)
-    UNASSIGNED_NODE[i] = UNASSIGNED;
-
-
-// Class DBCSCodec reads and initializes mapping tables.
-function DBCSCodec(codecOptions, iconv) {
-    this.encodingName = codecOptions.encodingName;
-    if (!codecOptions)
-        throw new Error("DBCS codec is called without the data.")
-    if (!codecOptions.table)
-        throw new Error("Encoding '" + this.encodingName + "' has no data.");
-
-    // Load tables.
-    var mappingTable = codecOptions.table();
-
-
-    // Decode tables: MBCS -> Unicode.
-
-    // decodeTables is a trie, encoded as an array of arrays of integers. Internal arrays are trie nodes and all have len = 256.
-    // Trie root is decodeTables[0].
-    // Values: >=  0 -> unicode character code. can be > 0xFFFF
-    //         == UNASSIGNED -> unknown/unassigned sequence.
-    //         == GB18030_CODE -> this is the end of a GB18030 4-byte sequence.
-    //         <= NODE_START -> index of the next node in our trie to process next byte.
-    //         <= SEQ_START  -> index of the start of a character code sequence, in decodeTableSeq.
-    this.decodeTables = [];
-    this.decodeTables[0] = UNASSIGNED_NODE.slice(0); // Create root node.
-
-    // Sometimes a MBCS char corresponds to a sequence of unicode chars. We store them as arrays of integers here. 
-    this.decodeTableSeq = [];
-
-    // Actual mapping tables consist of chunks. Use them to fill up decode tables.
-    for (var i = 0; i < mappingTable.length; i++)
-        this._addDecodeChunk(mappingTable[i]);
-
-    this.defaultCharUnicode = iconv.defaultCharUnicode;
-
-    
-    // Encode tables: Unicode -> DBCS.
-
-    // `encodeTable` is array mapping from unicode char to encoded char. All its values are integers for performance.
-    // Because it can be sparse, it is represented as array of buckets by 256 chars each. Bucket can be null.
-    // Values: >=  0 -> it is a normal char. Write the value (if <=256 then 1 byte, if <=65536 then 2 bytes, etc.).
-    //         == UNASSIGNED -> no conversion found. Output a default char.
-    //         <= SEQ_START  -> it's an index in encodeTableSeq, see below. The character starts a sequence.
-    this.encodeTable = [];
-    
-    // `encodeTableSeq` is used when a sequence of unicode characters is encoded as a single code. We use a tree of
-    // objects where keys correspond to characters in sequence and leafs are the encoded dbcs values. A special DEF_CHAR key
-    // means end of sequence (needed when one sequence is a strict subsequence of another).
-    // Objects are kept separately from encodeTable to increase performance.
-    this.encodeTableSeq = [];
-
-    // Some chars can be decoded, but need not be encoded.
-    var skipEncodeChars = {};
-    if (codecOptions.encodeSkipVals)
-        for (var i = 0; i < codecOptions.encodeSkipVals.length; i++) {
-            var val = codecOptions.encodeSkipVals[i];
-            if (typeof val === 'number')
-                skipEncodeChars[val] = true;
-            else
-                for (var j = val.from; j <= val.to; j++)
-                    skipEncodeChars[j] = true;
-        }
-        
-    // Use decode trie to recursively fill out encode tables.
-    this._fillEncodeTable(0, 0, skipEncodeChars);
-
-    // Add more encoding pairs when needed.
-    if (codecOptions.encodeAdd) {
-        for (var uChar in codecOptions.encodeAdd)
-            if (Object.prototype.hasOwnProperty.call(codecOptions.encodeAdd, uChar))
-                this._setEncodeChar(uChar.charCodeAt(0), codecOptions.encodeAdd[uChar]);
-    }
-
-    this.defCharSB  = this.encodeTable[0][iconv.defaultCharSingleByte.charCodeAt(0)];
-    if (this.defCharSB === UNASSIGNED) this.defCharSB = this.encodeTable[0]['?'];
-    if (this.defCharSB === UNASSIGNED) this.defCharSB = "?".charCodeAt(0);
-
-
-    // Load & create GB18030 tables when needed.
-    if (typeof codecOptions.gb18030 === 'function') {
-        this.gb18030 = codecOptions.gb18030(); // Load GB18030 ranges.
-
-        // Add GB18030 decode tables.
-        var thirdByteNodeIdx = this.decodeTables.length;
-        var thirdByteNode = this.decodeTables[thirdByteNodeIdx] = UNASSIGNED_NODE.slice(0);
-
-        var fourthByteNodeIdx = this.decodeTables.length;
-        var fourthByteNode = this.decodeTables[fourthByteNodeIdx] = UNASSIGNED_NODE.slice(0);
-
-        for (var i = 0x81; i <= 0xFE; i++) {
-            var secondByteNodeIdx = NODE_START - this.decodeTables[0][i];
-            var secondByteNode = this.decodeTables[secondByteNodeIdx];
-            for (var j = 0x30; j <= 0x39; j++)
-                secondByteNode[j] = NODE_START - thirdByteNodeIdx;
-        }
-        for (var i = 0x81; i <= 0xFE; i++)
-            thirdByteNode[i] = NODE_START - fourthByteNodeIdx;
-        for (var i = 0x30; i <= 0x39; i++)
-            fourthByteNode[i] = GB18030_CODE
-    }        
-}
-
-DBCSCodec.prototype.encoder = DBCSEncoder;
-DBCSCodec.prototype.decoder = DBCSDecoder;
-
-// Decoder helpers
-DBCSCodec.prototype._getDecodeTrieNode = function(addr) {
-    var bytes = [];
-    for (; addr > 0; addr >>= 8)
-        bytes.push(addr & 0xFF);
-    if (bytes.length == 0)
-        bytes.push(0);
-
-    var node = this.decodeTables[0];
-    for (var i = bytes.length-1; i > 0; i--) { // Traverse nodes deeper into the trie.
-        var val = node[bytes[i]];
-
-        if (val == UNASSIGNED) { // Create new node.
-            node[bytes[i]] = NODE_START - this.decodeTables.length;
-            this.decodeTables.push(node = UNASSIGNED_NODE.slice(0));
-        }
-        else if (val <= NODE_START) { // Existing node.
-            node = this.decodeTables[NODE_START - val];
-        }
-        else
-            throw new Error("Overwrite byte in " + this.encodingName + ", addr: " + addr.toString(16));
-    }
-    return node;
-}
-
-
-DBCSCodec.prototype._addDecodeChunk = function(chunk) {
-    // First element of chunk is the hex mbcs code where we start.
-    var curAddr = parseInt(chunk[0], 16);
-
-    // Choose the decoding node where we'll write our chars.
-    var writeTable = this._getDecodeTrieNode(curAddr);
-    curAddr = curAddr & 0xFF;
-
-    // Write all other elements of the chunk to the table.
-    for (var k = 1; k < chunk.length; k++) {
-        var part = chunk[k];
-        if (typeof part === "string") { // String, write as-is.
-            for (var l = 0; l < part.length;) {
-                var code = part.charCodeAt(l++);
-                if (0xD800 <= code && code < 0xDC00) { // Decode surrogate
-                    var codeTrail = part.charCodeAt(l++);
-                    if (0xDC00 <= codeTrail && codeTrail < 0xE000)
-                        writeTable[curAddr++] = 0x10000 + (code - 0xD800) * 0x400 + (codeTrail - 0xDC00);
-                    else
-                        throw new Error("Incorrect surrogate pair in "  + this.encodingName + " at chunk " + chunk[0]);
-                }
-                else if (0x0FF0 < code && code <= 0x0FFF) { // Character sequence (our own encoding used)
-                    var len = 0xFFF - code + 2;
-                    var seq = [];
-                    for (var m = 0; m < len; m++)
-                        seq.push(part.charCodeAt(l++)); // Simple variation: don't support surrogates or subsequences in seq.
-
-                    writeTable[curAddr++] = SEQ_START - this.decodeTableSeq.length;
-                    this.decodeTableSeq.push(seq);
-                }
-                else
-                    writeTable[curAddr++] = code; // Basic char
-            }
-        } 
-        else if (typeof part === "number") { // Integer, meaning increasing sequence starting with prev character.
-            var charCode = writeTable[curAddr - 1] + 1;
-            for (var l = 0; l < part; l++)
-                writeTable[curAddr++] = charCode++;
-        }
-        else
-            throw new Error("Incorrect type '" + typeof part + "' given in "  + this.encodingName + " at chunk " + chunk[0]);
-    }
-    if (curAddr > 0xFF)
-        throw new Error("Incorrect chunk in "  + this.encodingName + " at addr " + chunk[0] + ": too long" + curAddr);
-}
-
-// Encoder helpers
-DBCSCodec.prototype._getEncodeBucket = function(uCode) {
-    var high = uCode >> 8; // This could be > 0xFF because of astral characters.
-    if (this.encodeTable[high] === undefined)
-        this.encodeTable[high] = UNASSIGNED_NODE.slice(0); // Create bucket on demand.
-    return this.encodeTable[high];
-}
-
-DBCSCodec.prototype._setEncodeChar = function(uCode, dbcsCode) {
-    var bucket = this._getEncodeBucket(uCode);
-    var low = uCode & 0xFF;
-    if (bucket[low] <= SEQ_START)
-        this.encodeTableSeq[SEQ_START-bucket[low]][DEF_CHAR] = dbcsCode; // There's already a sequence, set a single-char subsequence of it.
-    else if (bucket[low] == UNASSIGNED)
-        bucket[low] = dbcsCode;
-}
-
-DBCSCodec.prototype._setEncodeSequence = function(seq, dbcsCode) {
-    
-    // Get the root of character tree according to first character of the sequence.
-    var uCode = seq[0];
-    var bucket = this._getEncodeBucket(uCode);
-    var low = uCode & 0xFF;
-
-    var node;
-    if (bucket[low] <= SEQ_START) {
-        // There's already a sequence with  - use it.
-        node = this.encodeTableSeq[SEQ_START-bucket[low]];
-    }
-    else {
-        // There was no sequence object - allocate a new one.
-        node = {};
-        if (bucket[low] !== UNASSIGNED) node[DEF_CHAR] = bucket[low]; // If a char was set before - make it a single-char subsequence.
-        bucket[low] = SEQ_START - this.encodeTableSeq.length;
-        this.encodeTableSeq.push(node);
-    }
-
-    // Traverse the character tree, allocating new nodes as needed.
-    for (var j = 1; j < seq.length-1; j++) {
-        var oldVal = node[uCode];
-        if (typeof oldVal === 'object')
-            node = oldVal;
-        else {
-            node = node[uCode] = {}
-            if (oldVal !== undefined)
-                node[DEF_CHAR] = oldVal
-        }
-    }
-
-    // Set the leaf to given dbcsCode.
-    uCode = seq[seq.length-1];
-    node[uCode] = dbcsCode;
-}
-
-DBCSCodec.prototype._fillEncodeTable = function(nodeIdx, prefix, skipEncodeChars) {
-    var node = this.decodeTables[nodeIdx];
-    for (var i = 0; i < 0x100; i++) {
-        var uCode = node[i];
-        var mbCode = prefix + i;
-        if (skipEncodeChars[mbCode])
-            continue;
-
-        if (uCode >= 0)
-            this._setEncodeChar(uCode, mbCode);
-        else if (uCode <= NODE_START)
-            this._fillEncodeTable(NODE_START - uCode, mbCode << 8, skipEncodeChars);
-        else if (uCode <= SEQ_START)
-            this._setEncodeSequence(this.decodeTableSeq[SEQ_START - uCode], mbCode);
-    }
-}
-
-
-
-// == Encoder ==================================================================
-
-function DBCSEncoder(options, codec) {
-    // Encoder state
-    this.leadSurrogate = -1;
-    this.seqObj = undefined;
-    
-    // Static data
-    this.encodeTable = codec.encodeTable;
-    this.encodeTableSeq = codec.encodeTableSeq;
-    this.defaultCharSingleByte = codec.defCharSB;
-    this.gb18030 = codec.gb18030;
-}
-
-DBCSEncoder.prototype.write = function(str) {
-    var newBuf = Buffer.alloc(str.length * (this.gb18030 ? 4 : 3)),
-        leadSurrogate = this.leadSurrogate,
-        seqObj = this.seqObj, nextChar = -1,
-        i = 0, j = 0;
-
-    while (true) {
-        // 0. Get next character.
-        if (nextChar === -1) {
-            if (i == str.length) break;
-            var uCode = str.charCodeAt(i++);
-        }
-        else {
-            var uCode = nextChar;
-            nextChar = -1;    
-        }
-
-        // 1. Handle surrogates.
-        if (0xD800 <= uCode && uCode < 0xE000) { // Char is one of surrogates.
-            if (uCode < 0xDC00) { // We've got lead surrogate.
-                if (leadSurrogate === -1) {
-                    leadSurrogate = uCode;
-                    continue;
-                } else {
-                    leadSurrogate = uCode;
-                    // Double lead surrogate found.
-                    uCode = UNASSIGNED;
-                }
-            } else { // We've got trail surrogate.
-                if (leadSurrogate !== -1) {
-                    uCode = 0x10000 + (leadSurrogate - 0xD800) * 0x400 + (uCode - 0xDC00);
-                    leadSurrogate = -1;
-                } else {
-                    // Incomplete surrogate pair - only trail surrogate found.
-                    uCode = UNASSIGNED;
-                }
-                
-            }
-        }
-        else if (leadSurrogate !== -1) {
-            // Incomplete surrogate pair - only lead surrogate found.
-            nextChar = uCode; uCode = UNASSIGNED; // Write an error, then current char.
-            leadSurrogate = -1;
-        }
-
-        // 2. Convert uCode character.
-        var dbcsCode = UNASSIGNED;
-        if (seqObj !== undefined && uCode != UNASSIGNED) { // We are in the middle of the sequence
-            var resCode = seqObj[uCode];
-            if (typeof resCode === 'object') { // Sequence continues.
-                seqObj = resCode;
-                continue;
-
-            } else if (typeof resCode == 'number') { // Sequence finished. Write it.
-                dbcsCode = resCode;
-
-            } else if (resCode == undefined) { // Current character is not part of the sequence.
-
-                // Try default character for this sequence
-                resCode = seqObj[DEF_CHAR];
-                if (resCode !== undefined) {
-                    dbcsCode = resCode; // Found. Write it.
-                    nextChar = uCode; // Current character will be written too in the next iteration.
-
-                } else {
-                    // TODO: What if we have no default? (resCode == undefined)
-                    // Then, we should write first char of the sequence as-is and try the rest recursively.
-                    // Didn't do it for now because no encoding has this situation yet.
-                    // Currently, just skip the sequence and write current char.
-                }
-            }
-            seqObj = undefined;
-        }
-        else if (uCode >= 0) {  // Regular character
-            var subtable = this.encodeTable[uCode >> 8];
-            if (subtable !== undefined)
-                dbcsCode = subtable[uCode & 0xFF];
-            
-            if (dbcsCode <= SEQ_START) { // Sequence start
-                seqObj = this.encodeTableSeq[SEQ_START-dbcsCode];
-                continue;
-            }
-
-            if (dbcsCode == UNASSIGNED && this.gb18030) {
-                // Use GB18030 algorithm to find character(s) to write.
-                var idx = findIdx(this.gb18030.uChars, uCode);
-                if (idx != -1) {
-                    var dbcsCode = this.gb18030.gbChars[idx] + (uCode - this.gb18030.uChars[idx]);
-                    newBuf[j++] = 0x81 + Math.floor(dbcsCode / 12600); dbcsCode = dbcsCode % 12600;
-                    newBuf[j++] = 0x30 + Math.floor(dbcsCode / 1260); dbcsCode = dbcsCode % 1260;
-                    newBuf[j++] = 0x81 + Math.floor(dbcsCode / 10); dbcsCode = dbcsCode % 10;
-                    newBuf[j++] = 0x30 + dbcsCode;
-                    continue;
-                }
-            }
-        }
-
-        // 3. Write dbcsCode character.
-        if (dbcsCode === UNASSIGNED)
-            dbcsCode = this.defaultCharSingleByte;
-        
-        if (dbcsCode < 0x100) {
-            newBuf[j++] = dbcsCode;
-        }
-        else if (dbcsCode < 0x10000) {
-            newBuf[j++] = dbcsCode >> 8;   // high byte
-            newBuf[j++] = dbcsCode & 0xFF; // low byte
-        }
-        else {
-            newBuf[j++] = dbcsCode >> 16;
-            newBuf[j++] = (dbcsCode >> 8) & 0xFF;
-            newBuf[j++] = dbcsCode & 0xFF;
-        }
-    }
-
-    this.seqObj = seqObj;
-    this.leadSurrogate = leadSurrogate;
-    return newBuf.slice(0, j);
-}
-
-DBCSEncoder.prototype.end = function() {
-    if (this.leadSurrogate === -1 && this.seqObj === undefined)
-        return; // All clean. Most often case.
-
-    var newBuf = Buffer.alloc(10), j = 0;
-
-    if (this.seqObj) { // We're in the sequence.
-        var dbcsCode = this.seqObj[DEF_CHAR];
-        if (dbcsCode !== undefined) { // Write beginning of the sequence.
-            if (dbcsCode < 0x100) {
-                newBuf[j++] = dbcsCode;
-            }
-            else {
-                newBuf[j++] = dbcsCode >> 8;   // high byte
-                newBuf[j++] = dbcsCode & 0xFF; // low byte
-            }
-        } else {
-            // See todo above.
-        }
-        this.seqObj = undefined;
-    }
-
-    if (this.leadSurrogate !== -1) {
-        // Incomplete surrogate pair - only lead surrogate found.
-        newBuf[j++] = this.defaultCharSingleByte;
-        this.leadSurrogate = -1;
-    }
-    
-    return newBuf.slice(0, j);
-}
-
-// Export for testing
-DBCSEncoder.prototype.findIdx = findIdx;
-
-
-// == Decoder ==================================================================
-
-function DBCSDecoder(options, codec) {
-    // Decoder state
-    this.nodeIdx = 0;
-    this.prevBuf = Buffer.alloc(0);
-
-    // Static data
-    this.decodeTables = codec.decodeTables;
-    this.decodeTableSeq = codec.decodeTableSeq;
-    this.defaultCharUnicode = codec.defaultCharUnicode;
-    this.gb18030 = codec.gb18030;
-}
-
-DBCSDecoder.prototype.write = function(buf) {
-    var newBuf = Buffer.alloc(buf.length*2),
-        nodeIdx = this.nodeIdx, 
-        prevBuf = this.prevBuf, prevBufOffset = this.prevBuf.length,
-        seqStart = -this.prevBuf.length, // idx of the start of current parsed sequence.
-        uCode;
-
-    if (prevBufOffset > 0) // Make prev buf overlap a little to make it easier to slice later.
-        prevBuf = Buffer.concat([prevBuf, buf.slice(0, 10)]);
-    
-    for (var i = 0, j = 0; i < buf.length; i++) {
-        var curByte = (i >= 0) ? buf[i] : prevBuf[i + prevBufOffset];
-
-        // Lookup in current trie node.
-        var uCode = this.decodeTables[nodeIdx][curByte];
-
-        if (uCode >= 0) { 
-            // Normal character, just use it.
-        }
-        else if (uCode === UNASSIGNED) { // Unknown char.
-            // TODO: Callback with seq.
-            //var curSeq = (seqStart >= 0) ? buf.slice(seqStart, i+1) : prevBuf.slice(seqStart + prevBufOffset, i+1 + prevBufOffset);
-            i = seqStart; // Try to parse again, after skipping first byte of the sequence ('i' will be incremented by 'for' cycle).
-            uCode = this.defaultCharUnicode.charCodeAt(0);
-        }
-        else if (uCode === GB18030_CODE) {
-            var curSeq = (seqStart >= 0) ? buf.slice(seqStart, i+1) : prevBuf.slice(seqStart + prevBufOffset, i+1 + prevBufOffset);
-            var ptr = (curSeq[0]-0x81)*12600 + (curSeq[1]-0x30)*1260 + (curSeq[2]-0x81)*10 + (curSeq[3]-0x30);
-            var idx = findIdx(this.gb18030.gbChars, ptr);
-            uCode = this.gb18030.uChars[idx] + ptr - this.gb18030.gbChars[idx];
-        }
-        else if (uCode <= NODE_START) { // Go to next trie node.
-            nodeIdx = NODE_START - uCode;
-            continue;
-        }
-        else if (uCode <= SEQ_START) { // Output a sequence of chars.
-            var seq = this.decodeTableSeq[SEQ_START - uCode];
-            for (var k = 0; k < seq.length - 1; k++) {
-                uCode = seq[k];
-                newBuf[j++] = uCode & 0xFF;
-                newBuf[j++] = uCode >> 8;
-            }
-            uCode = seq[seq.length-1];
-        }
-        else
-            throw new Error("iconv-lite internal error: invalid decoding table value " + uCode + " at " + nodeIdx + "/" + curByte);
-
-        // Write the character to buffer, handling higher planes using surrogate pair.
-        if (uCode > 0xFFFF) { 
-            uCode -= 0x10000;
-            var uCodeLead = 0xD800 + Math.floor(uCode / 0x400);
-            newBuf[j++] = uCodeLead & 0xFF;
-            newBuf[j++] = uCodeLead >> 8;
-
-            uCode = 0xDC00 + uCode % 0x400;
-        }
-        newBuf[j++] = uCode & 0xFF;
-        newBuf[j++] = uCode >> 8;
-
-        // Reset trie node.
-        nodeIdx = 0; seqStart = i+1;
-    }
-
-    this.nodeIdx = nodeIdx;
-    this.prevBuf = (seqStart >= 0) ? buf.slice(seqStart) : prevBuf.slice(seqStart + prevBufOffset);
-    return newBuf.slice(0, j).toString('ucs2');
-}
-
-DBCSDecoder.prototype.end = function() {
-    var ret = '';
-
-    // Try to parse all remaining chars.
-    while (this.prevBuf.length > 0) {
-        // Skip 1 character in the buffer.
-        ret += this.defaultCharUnicode;
-        var buf = this.prevBuf.slice(1);
-
-        // Parse remaining as usual.
-        this.prevBuf = Buffer.alloc(0);
-        this.nodeIdx = 0;
-        if (buf.length > 0)
-            ret += this.write(buf);
-    }
-
-    this.nodeIdx = 0;
-    return ret;
-}
-
-// Binary search for GB18030. Returns largest i such that table[i] <= val.
-function findIdx(table, val) {
-    if (table[0] > val)
-        return -1;
-
-    var l = 0, r = table.length;
-    while (l < r-1) { // always table[l] <= val < table[r]
-        var mid = l + Math.floor((r-l+1)/2);
-        if (table[mid] <= val)
-            l = mid;
-        else
-            r = mid;
-    }
-    return l;
-}
-
-
-
-/***/ }),
-/* 711 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// Description of supported double byte encodings and aliases.
-// Tables are not require()-d until they are needed to speed up library load.
-// require()-s are direct to support Browserify.
-
-module.exports = {
-    
-    // == Japanese/ShiftJIS ====================================================
-    // All japanese encodings are based on JIS X set of standards:
-    // JIS X 0201 - Single-byte encoding of ASCII + ¥ + Kana chars at 0xA1-0xDF.
-    // JIS X 0208 - Main set of 6879 characters, placed in 94x94 plane, to be encoded by 2 bytes. 
-    //              Has several variations in 1978, 1983, 1990 and 1997.
-    // JIS X 0212 - Supplementary plane of 6067 chars in 94x94 plane. 1990. Effectively dead.
-    // JIS X 0213 - Extension and modern replacement of 0208 and 0212. Total chars: 11233.
-    //              2 planes, first is superset of 0208, second - revised 0212.
-    //              Introduced in 2000, revised 2004. Some characters are in Unicode Plane 2 (0x2xxxx)
-
-    // Byte encodings are:
-    //  * Shift_JIS: Compatible with 0201, uses not defined chars in top half as lead bytes for double-byte
-    //               encoding of 0208. Lead byte ranges: 0x81-0x9F, 0xE0-0xEF; Trail byte ranges: 0x40-0x7E, 0x80-0x9E, 0x9F-0xFC.
-    //               Windows CP932 is a superset of Shift_JIS. Some companies added more chars, notably KDDI.
-    //  * EUC-JP:    Up to 3 bytes per character. Used mostly on *nixes.
-    //               0x00-0x7F       - lower part of 0201
-    //               0x8E, 0xA1-0xDF - upper part of 0201
-    //               (0xA1-0xFE)x2   - 0208 plane (94x94).
-    //               0x8F, (0xA1-0xFE)x2 - 0212 plane (94x94).
-    //  * JIS X 208: 7-bit, direct encoding of 0208. Byte ranges: 0x21-0x7E (94 values). Uncommon.
-    //               Used as-is in ISO2022 family.
-    //  * ISO2022-JP: Stateful encoding, with escape sequences to switch between ASCII, 
-    //                0201-1976 Roman, 0208-1978, 0208-1983.
-    //  * ISO2022-JP-1: Adds esc seq for 0212-1990.
-    //  * ISO2022-JP-2: Adds esc seq for GB2313-1980, KSX1001-1992, ISO8859-1, ISO8859-7.
-    //  * ISO2022-JP-3: Adds esc seq for 0201-1976 Kana set, 0213-2000 Planes 1, 2.
-    //  * ISO2022-JP-2004: Adds 0213-2004 Plane 1.
-    //
-    // After JIS X 0213 appeared, Shift_JIS-2004, EUC-JISX0213 and ISO2022-JP-2004 followed, with just changing the planes.
-    //
-    // Overall, it seems that it's a mess :( http://www8.plala.or.jp/tkubota1/unicode-symbols-map2.html
-
-    'shiftjis': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(721) },
-        encodeAdd: {'\u00a5': 0x5C, '\u203E': 0x7E},
-        encodeSkipVals: [{from: 0xED40, to: 0xF940}],
-    },
-    'csshiftjis': 'shiftjis',
-    'mskanji': 'shiftjis',
-    'sjis': 'shiftjis',
-    'windows31j': 'shiftjis',
-    'ms31j': 'shiftjis',
-    'xsjis': 'shiftjis',
-    'windows932': 'shiftjis',
-    'ms932': 'shiftjis',
-    '932': 'shiftjis',
-    'cp932': 'shiftjis',
-
-    'eucjp': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(719) },
-        encodeAdd: {'\u00a5': 0x5C, '\u203E': 0x7E},
-    },
-
-    // TODO: KDDI extension to Shift_JIS
-    // TODO: IBM CCSID 942 = CP932, but F0-F9 custom chars and other char changes.
-    // TODO: IBM CCSID 943 = Shift_JIS = CP932 with original Shift_JIS lower 128 chars.
-
-
-    // == Chinese/GBK ==========================================================
-    // http://en.wikipedia.org/wiki/GBK
-    // We mostly implement W3C recommendation: https://www.w3.org/TR/encoding/#gbk-encoder
-
-    // Oldest GB2312 (1981, ~7600 chars) is a subset of CP936
-    'gb2312': 'cp936',
-    'gb231280': 'cp936',
-    'gb23121980': 'cp936',
-    'csgb2312': 'cp936',
-    'csiso58gb231280': 'cp936',
-    'euccn': 'cp936',
-
-    // Microsoft's CP936 is a subset and approximation of GBK.
-    'windows936': 'cp936',
-    'ms936': 'cp936',
-    '936': 'cp936',
-    'cp936': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(277) },
-    },
-
-    // GBK (~22000 chars) is an extension of CP936 that added user-mapped chars and some other.
-    'gbk': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(277).concat(__webpack_require__(396)) },
-    },
-    'xgbk': 'gbk',
-    'isoir58': 'gbk',
-
-    // GB18030 is an algorithmic extension of GBK.
-    // Main source: https://www.w3.org/TR/encoding/#gbk-encoder
-    // http://icu-project.org/docs/papers/gb18030.html
-    // http://source.icu-project.org/repos/icu/data/trunk/charset/data/xml/gb-18030-2000.xml
-    // http://www.khngai.com/chinese/charmap/tblgbk.php?page=0
-    'gb18030': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(277).concat(__webpack_require__(396)) },
-        gb18030: function() { return __webpack_require__(720) },
-        encodeSkipVals: [0x80],
-        encodeAdd: {'€': 0xA2E3},
-    },
-
-    'chinese': 'gb18030',
-
-
-    // == Korean ===============================================================
-    // EUC-KR, KS_C_5601 and KS X 1001 are exactly the same.
-    'windows949': 'cp949',
-    'ms949': 'cp949',
-    '949': 'cp949',
-    'cp949': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(718) },
-    },
-
-    'cseuckr': 'cp949',
-    'csksc56011987': 'cp949',
-    'euckr': 'cp949',
-    'isoir149': 'cp949',
-    'korean': 'cp949',
-    'ksc56011987': 'cp949',
-    'ksc56011989': 'cp949',
-    'ksc5601': 'cp949',
-
-
-    // == Big5/Taiwan/Hong Kong ================================================
-    // There are lots of tables for Big5 and cp950. Please see the following links for history:
-    // http://moztw.org/docs/big5/  http://www.haible.de/bruno/charsets/conversion-tables/Big5.html
-    // Variations, in roughly number of defined chars:
-    //  * Windows CP 950: Microsoft variant of Big5. Canonical: http://www.unicode.org/Public/MAPPINGS/VENDORS/MICSFT/WINDOWS/CP950.TXT
-    //  * Windows CP 951: Microsoft variant of Big5-HKSCS-2001. Seems to be never public. http://me.abelcheung.org/articles/research/what-is-cp951/
-    //  * Big5-2003 (Taiwan standard) almost superset of cp950.
-    //  * Unicode-at-on (UAO) / Mozilla 1.8. Falling out of use on the Web. Not supported by other browsers.
-    //  * Big5-HKSCS (-2001, -2004, -2008). Hong Kong standard. 
-    //    many unicode code points moved from PUA to Supplementary plane (U+2XXXX) over the years.
-    //    Plus, it has 4 combining sequences.
-    //    Seems that Mozilla refused to support it for 10 yrs. https://bugzilla.mozilla.org/show_bug.cgi?id=162431 https://bugzilla.mozilla.org/show_bug.cgi?id=310299
-    //    because big5-hkscs is the only encoding to include astral characters in non-algorithmic way.
-    //    Implementations are not consistent within browsers; sometimes labeled as just big5.
-    //    MS Internet Explorer switches from big5 to big5-hkscs when a patch applied.
-    //    Great discussion & recap of what's going on https://bugzilla.mozilla.org/show_bug.cgi?id=912470#c31
-    //    In the encoder, it might make sense to support encoding old PUA mappings to Big5 bytes seq-s.
-    //    Official spec: http://www.ogcio.gov.hk/en/business/tech_promotion/ccli/terms/doc/2003cmp_2008.txt
-    //                   http://www.ogcio.gov.hk/tc/business/tech_promotion/ccli/terms/doc/hkscs-2008-big5-iso.txt
-    // 
-    // Current understanding of how to deal with Big5(-HKSCS) is in the Encoding Standard, http://encoding.spec.whatwg.org/#big5-encoder
-    // Unicode mapping (http://www.unicode.org/Public/MAPPINGS/OBSOLETE/EASTASIA/OTHER/BIG5.TXT) is said to be wrong.
-
-    'windows950': 'cp950',
-    'ms950': 'cp950',
-    '950': 'cp950',
-    'cp950': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(395) },
-    },
-
-    // Big5 has many variations and is an extension of cp950. We use Encoding Standard's as a consensus.
-    'big5': 'big5hkscs',
-    'big5hkscs': {
-        type: '_dbcs',
-        table: function() { return __webpack_require__(395).concat(__webpack_require__(717)) },
-        encodeSkipVals: [0xa2cc],
-    },
-
-    'cnbig5': 'big5hkscs',
-    'csbig5': 'big5hkscs',
-    'xxbig5': 'big5hkscs',
-};
-
-
-/***/ }),
-/* 712 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// Update this array if you add/rename/remove files in this directory.
-// We support Browserify by skipping automatic module discovery and requiring modules directly.
-var modules = [
-    __webpack_require__(713),
-    __webpack_require__(722),
-    __webpack_require__(723),
-    __webpack_require__(714),
-    __webpack_require__(716),
-    __webpack_require__(715),
-    __webpack_require__(710),
-    __webpack_require__(711),
-];
-
-// Put all encoding/alias/codec definitions to single object and export it. 
-for (var i = 0; i < modules.length; i++) {
-    var module = modules[i];
-    for (var enc in module)
-        if (Object.prototype.hasOwnProperty.call(module, enc))
-            exports[enc] = module[enc];
-}
-
-
-/***/ }),
-/* 713 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var Buffer = __webpack_require__(15).Buffer;
-
-// Export Node.js internal encodings.
-
-module.exports = {
-    // Encodings
-    utf8:   { type: "_internal", bomAware: true},
-    cesu8:  { type: "_internal", bomAware: true},
-    unicode11utf8: "utf8",
-
-    ucs2:   { type: "_internal", bomAware: true},
-    utf16le: "ucs2",
-
-    binary: { type: "_internal" },
-    base64: { type: "_internal" },
-    hex:    { type: "_internal" },
-
-    // Codec.
-    _internal: InternalCodec,
-};
-
-//------------------------------------------------------------------------------
-
-function InternalCodec(codecOptions, iconv) {
-    this.enc = codecOptions.encodingName;
-    this.bomAware = codecOptions.bomAware;
-
-    if (this.enc === "base64")
-        this.encoder = InternalEncoderBase64;
-    else if (this.enc === "cesu8") {
-        this.enc = "utf8"; // Use utf8 for decoding.
-        this.encoder = InternalEncoderCesu8;
-
-        // Add decoder for versions of Node not supporting CESU-8
-        if (Buffer.from('eda0bdedb2a9', 'hex').toString() !== '💩') {
-            this.decoder = InternalDecoderCesu8;
-            this.defaultCharUnicode = iconv.defaultCharUnicode;
-        }
-    }
-}
-
-InternalCodec.prototype.encoder = InternalEncoder;
-InternalCodec.prototype.decoder = InternalDecoder;
-
-//------------------------------------------------------------------------------
-
-// We use node.js internal decoder. Its signature is the same as ours.
-var StringDecoder = __webpack_require__(333).StringDecoder;
-
-if (!StringDecoder.prototype.end) // Node v0.8 doesn't have this method.
-    StringDecoder.prototype.end = function() {};
-
-
-function InternalDecoder(options, codec) {
-    StringDecoder.call(this, codec.enc);
-}
-
-InternalDecoder.prototype = StringDecoder.prototype;
-
-
-//------------------------------------------------------------------------------
-// Encoder is mostly trivial
-
-function InternalEncoder(options, codec) {
-    this.enc = codec.enc;
-}
-
-InternalEncoder.prototype.write = function(str) {
-    return Buffer.from(str, this.enc);
-}
-
-InternalEncoder.prototype.end = function() {
-}
-
-
-//------------------------------------------------------------------------------
-// Except base64 encoder, which must keep its state.
-
-function InternalEncoderBase64(options, codec) {
-    this.prevStr = '';
-}
-
-InternalEncoderBase64.prototype.write = function(str) {
-    str = this.prevStr + str;
-    var completeQuads = str.length - (str.length % 4);
-    this.prevStr = str.slice(completeQuads);
-    str = str.slice(0, completeQuads);
-
-    return Buffer.from(str, "base64");
-}
-
-InternalEncoderBase64.prototype.end = function() {
-    return Buffer.from(this.prevStr, "base64");
-}
-
-
-//------------------------------------------------------------------------------
-// CESU-8 encoder is also special.
-
-function InternalEncoderCesu8(options, codec) {
-}
-
-InternalEncoderCesu8.prototype.write = function(str) {
-    var buf = Buffer.alloc(str.length * 3), bufIdx = 0;
-    for (var i = 0; i < str.length; i++) {
-        var charCode = str.charCodeAt(i);
-        // Naive implementation, but it works because CESU-8 is especially easy
-        // to convert from UTF-16 (which all JS strings are encoded in).
-        if (charCode < 0x80)
-            buf[bufIdx++] = charCode;
-        else if (charCode < 0x800) {
-            buf[bufIdx++] = 0xC0 + (charCode >>> 6);
-            buf[bufIdx++] = 0x80 + (charCode & 0x3f);
-        }
-        else { // charCode will always be < 0x10000 in javascript.
-            buf[bufIdx++] = 0xE0 + (charCode >>> 12);
-            buf[bufIdx++] = 0x80 + ((charCode >>> 6) & 0x3f);
-            buf[bufIdx++] = 0x80 + (charCode & 0x3f);
-        }
-    }
-    return buf.slice(0, bufIdx);
-}
-
-InternalEncoderCesu8.prototype.end = function() {
-}
-
-//------------------------------------------------------------------------------
-// CESU-8 decoder is not implemented in Node v4.0+
-
-function InternalDecoderCesu8(options, codec) {
-    this.acc = 0;
-    this.contBytes = 0;
-    this.accBytes = 0;
-    this.defaultCharUnicode = codec.defaultCharUnicode;
-}
-
-InternalDecoderCesu8.prototype.write = function(buf) {
-    var acc = this.acc, contBytes = this.contBytes, accBytes = this.accBytes, 
-        res = '';
-    for (var i = 0; i < buf.length; i++) {
-        var curByte = buf[i];
-        if ((curByte & 0xC0) !== 0x80) { // Leading byte
-            if (contBytes > 0) { // Previous code is invalid
-                res += this.defaultCharUnicode;
-                contBytes = 0;
-            }
-
-            if (curByte < 0x80) { // Single-byte code
-                res += String.fromCharCode(curByte);
-            } else if (curByte < 0xE0) { // Two-byte code
-                acc = curByte & 0x1F;
-                contBytes = 1; accBytes = 1;
-            } else if (curByte < 0xF0) { // Three-byte code
-                acc = curByte & 0x0F;
-                contBytes = 2; accBytes = 1;
-            } else { // Four or more are not supported for CESU-8.
-                res += this.defaultCharUnicode;
-            }
-        } else { // Continuation byte
-            if (contBytes > 0) { // We're waiting for it.
-                acc = (acc << 6) | (curByte & 0x3f);
-                contBytes--; accBytes++;
-                if (contBytes === 0) {
-                    // Check for overlong encoding, but support Modified UTF-8 (encoding NULL as C0 80)
-                    if (accBytes === 2 && acc < 0x80 && acc > 0)
-                        res += this.defaultCharUnicode;
-                    else if (accBytes === 3 && acc < 0x800)
-                        res += this.defaultCharUnicode;
-                    else
-                        // Actually add character.
-                        res += String.fromCharCode(acc);
-                }
-            } else { // Unexpected continuation byte
-                res += this.defaultCharUnicode;
-            }
-        }
-    }
-    this.acc = acc; this.contBytes = contBytes; this.accBytes = accBytes;
-    return res;
-}
-
-InternalDecoderCesu8.prototype.end = function() {
-    var res = 0;
-    if (this.contBytes > 0)
-        res += this.defaultCharUnicode;
-    return res;
-}
-
-
-/***/ }),
-/* 714 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var Buffer = __webpack_require__(15).Buffer;
-
-// Single-byte codec. Needs a 'chars' string parameter that contains 256 or 128 chars that
-// correspond to encoded bytes (if 128 - then lower half is ASCII). 
-
-exports._sbcs = SBCSCodec;
-function SBCSCodec(codecOptions, iconv) {
-    if (!codecOptions)
-        throw new Error("SBCS codec is called without the data.")
-    
-    // Prepare char buffer for decoding.
-    if (!codecOptions.chars || (codecOptions.chars.length !== 128 && codecOptions.chars.length !== 256))
-        throw new Error("Encoding '"+codecOptions.type+"' has incorrect 'chars' (must be of len 128 or 256)");
-    
-    if (codecOptions.chars.length === 128) {
-        var asciiString = "";
-        for (var i = 0; i < 128; i++)
-            asciiString += String.fromCharCode(i);
-        codecOptions.chars = asciiString + codecOptions.chars;
-    }
-
-    this.decodeBuf = Buffer.from(codecOptions.chars, 'ucs2');
-    
-    // Encoding buffer.
-    var encodeBuf = Buffer.alloc(65536, iconv.defaultCharSingleByte.charCodeAt(0));
-
-    for (var i = 0; i < codecOptions.chars.length; i++)
-        encodeBuf[codecOptions.chars.charCodeAt(i)] = i;
-
-    this.encodeBuf = encodeBuf;
-}
-
-SBCSCodec.prototype.encoder = SBCSEncoder;
-SBCSCodec.prototype.decoder = SBCSDecoder;
-
-
-function SBCSEncoder(options, codec) {
-    this.encodeBuf = codec.encodeBuf;
-}
-
-SBCSEncoder.prototype.write = function(str) {
-    var buf = Buffer.alloc(str.length);
-    for (var i = 0; i < str.length; i++)
-        buf[i] = this.encodeBuf[str.charCodeAt(i)];
-    
-    return buf;
-}
-
-SBCSEncoder.prototype.end = function() {
-}
-
-
-function SBCSDecoder(options, codec) {
-    this.decodeBuf = codec.decodeBuf;
-}
-
-SBCSDecoder.prototype.write = function(buf) {
-    // Strings are immutable in JS -> we use ucs2 buffer to speed up computations.
-    var decodeBuf = this.decodeBuf;
-    var newBuf = Buffer.alloc(buf.length*2);
-    var idx1 = 0, idx2 = 0;
-    for (var i = 0; i < buf.length; i++) {
-        idx1 = buf[i]*2; idx2 = i*2;
-        newBuf[idx2] = decodeBuf[idx1];
-        newBuf[idx2+1] = decodeBuf[idx1+1];
-    }
-    return newBuf.toString('ucs2');
-}
-
-SBCSDecoder.prototype.end = function() {
-}
-
-
-/***/ }),
-/* 715 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// Generated data for sbcs codec. Don't edit manually. Regenerate using generation/gen-sbcs.js script.
-module.exports = {
-  "437": "cp437",
-  "737": "cp737",
-  "775": "cp775",
-  "850": "cp850",
-  "852": "cp852",
-  "855": "cp855",
-  "856": "cp856",
-  "857": "cp857",
-  "858": "cp858",
-  "860": "cp860",
-  "861": "cp861",
-  "862": "cp862",
-  "863": "cp863",
-  "864": "cp864",
-  "865": "cp865",
-  "866": "cp866",
-  "869": "cp869",
-  "874": "windows874",
-  "922": "cp922",
-  "1046": "cp1046",
-  "1124": "cp1124",
-  "1125": "cp1125",
-  "1129": "cp1129",
-  "1133": "cp1133",
-  "1161": "cp1161",
-  "1162": "cp1162",
-  "1163": "cp1163",
-  "1250": "windows1250",
-  "1251": "windows1251",
-  "1252": "windows1252",
-  "1253": "windows1253",
-  "1254": "windows1254",
-  "1255": "windows1255",
-  "1256": "windows1256",
-  "1257": "windows1257",
-  "1258": "windows1258",
-  "28591": "iso88591",
-  "28592": "iso88592",
-  "28593": "iso88593",
-  "28594": "iso88594",
-  "28595": "iso88595",
-  "28596": "iso88596",
-  "28597": "iso88597",
-  "28598": "iso88598",
-  "28599": "iso88599",
-  "28600": "iso885910",
-  "28601": "iso885911",
-  "28603": "iso885913",
-  "28604": "iso885914",
-  "28605": "iso885915",
-  "28606": "iso885916",
-  "windows874": {
-    "type": "_sbcs",
-    "chars": "€����…�����������‘’“”•–—�������� กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู����฿เแโใไๅๆ็่้๊๋์ํ๎๏๐๑๒๓๔๕๖๗๘๙๚๛����"
-  },
-  "win874": "windows874",
-  "cp874": "windows874",
-  "windows1250": {
-    "type": "_sbcs",
-    "chars": "€�‚�„…†‡�‰Š‹ŚŤŽŹ�‘’“”•–—�™š›śťžź ˇ˘Ł¤Ą¦§¨©Ş«¬­®Ż°±˛ł´µ¶·¸ąş»Ľ˝ľżŔÁÂĂÄĹĆÇČÉĘËĚÍÎĎĐŃŇÓÔŐÖ×ŘŮÚŰÜÝŢßŕáâăäĺćçčéęëěíîďđńňóôőö÷řůúűüýţ˙"
-  },
-  "win1250": "windows1250",
-  "cp1250": "windows1250",
-  "windows1251": {
-    "type": "_sbcs",
-    "chars": "ЂЃ‚ѓ„…†‡€‰Љ‹ЊЌЋЏђ‘’“”•–—�™љ›њќћџ ЎўЈ¤Ґ¦§Ё©Є«¬­®Ї°±Ііґµ¶·ё№є»јЅѕїАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя"
-  },
-  "win1251": "windows1251",
-  "cp1251": "windows1251",
-  "windows1252": {
-    "type": "_sbcs",
-    "chars": "€�‚ƒ„…†‡ˆ‰Š‹Œ�Ž��‘’“”•–—˜™š›œ�žŸ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ"
-  },
-  "win1252": "windows1252",
-  "cp1252": "windows1252",
-  "windows1253": {
-    "type": "_sbcs",
-    "chars": "€�‚ƒ„…†‡�‰�‹�����‘’“”•–—�™�›���� ΅Ά£¤¥¦§¨©�«¬­®―°±²³΄µ¶·ΈΉΊ»Ό½ΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡ�ΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώ�"
-  },
-  "win1253": "windows1253",
-  "cp1253": "windows1253",
-  "windows1254": {
-    "type": "_sbcs",
-    "chars": "€�‚ƒ„…†‡ˆ‰Š‹Œ����‘’“”•–—˜™š›œ��Ÿ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏĞÑÒÓÔÕÖ×ØÙÚÛÜİŞßàáâãäåæçèéêëìíîïğñòóôõö÷øùúûüışÿ"
-  },
-  "win1254": "windows1254",
-  "cp1254": "windows1254",
-  "windows1255": {
-    "type": "_sbcs",
-    "chars": "€�‚ƒ„…†‡ˆ‰�‹�����‘’“”•–—˜™�›���� ¡¢£₪¥¦§¨©×«¬­®¯°±²³´µ¶·¸¹÷»¼½¾¿ְֱֲֳִֵֶַָֹֺֻּֽ־ֿ׀ׁׂ׃װױײ׳״�������אבגדהוזחטיךכלםמןנסעףפץצקרשת��‎‏�"
-  },
-  "win1255": "windows1255",
-  "cp1255": "windows1255",
-  "windows1256": {
-    "type": "_sbcs",
-    "chars": "€پ‚ƒ„…†‡ˆ‰ٹ‹Œچژڈگ‘’“”•–—ک™ڑ›œ‌‍ں ،¢£¤¥¦§¨©ھ«¬­®¯°±²³´µ¶·¸¹؛»¼½¾؟ہءآأؤإئابةتثجحخدذرزسشصض×طظعغـفقكàلâمنهوçèéêëىيîïًٌٍَôُِ÷ّùْûü‎‏ے"
-  },
-  "win1256": "windows1256",
-  "cp1256": "windows1256",
-  "windows1257": {
-    "type": "_sbcs",
-    "chars": "€�‚�„…†‡�‰�‹�¨ˇ¸�‘’“”•–—�™�›�¯˛� �¢£¤�¦§Ø©Ŗ«¬­®Æ°±²³´µ¶·ø¹ŗ»¼½¾æĄĮĀĆÄÅĘĒČÉŹĖĢĶĪĻŠŃŅÓŌÕÖ×ŲŁŚŪÜŻŽßąįāćäåęēčéźėģķīļšńņóōõö÷ųłśūüżž˙"
-  },
-  "win1257": "windows1257",
-  "cp1257": "windows1257",
-  "windows1258": {
-    "type": "_sbcs",
-    "chars": "€�‚ƒ„…†‡ˆ‰�‹Œ����‘’“”•–—˜™�›œ��Ÿ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂĂÄÅÆÇÈÉÊË̀ÍÎÏĐÑ̉ÓÔƠÖ×ØÙÚÛÜỮßàáâăäåæçèéêë́íîïđṇ̃óôơö÷øùúûüư₫ÿ"
-  },
-  "win1258": "windows1258",
-  "cp1258": "windows1258",
-  "iso88591": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ"
-  },
-  "cp28591": "iso88591",
-  "iso88592": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ Ą˘Ł¤ĽŚ§¨ŠŞŤŹ­ŽŻ°ą˛ł´ľśˇ¸šşťź˝žżŔÁÂĂÄĹĆÇČÉĘËĚÍÎĎĐŃŇÓÔŐÖ×ŘŮÚŰÜÝŢßŕáâăäĺćçčéęëěíîďđńňóôőö÷řůúűüýţ˙"
-  },
-  "cp28592": "iso88592",
-  "iso88593": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ Ħ˘£¤�Ĥ§¨İŞĞĴ­�Ż°ħ²³´µĥ·¸ışğĵ½�żÀÁÂ�ÄĊĈÇÈÉÊËÌÍÎÏ�ÑÒÓÔĠÖ×ĜÙÚÛÜŬŜßàáâ�äċĉçèéêëìíîï�ñòóôġö÷ĝùúûüŭŝ˙"
-  },
-  "cp28593": "iso88593",
-  "iso88594": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ĄĸŖ¤ĨĻ§¨ŠĒĢŦ­Ž¯°ą˛ŗ´ĩļˇ¸šēģŧŊžŋĀÁÂÃÄÅÆĮČÉĘËĖÍÎĪĐŅŌĶÔÕÖ×ØŲÚÛÜŨŪßāáâãäåæįčéęëėíîīđņōķôõö÷øųúûüũū˙"
-  },
-  "cp28594": "iso88594",
-  "iso88595": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ЁЂЃЄЅІЇЈЉЊЋЌ­ЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя№ёђѓєѕіїјљњћќ§ўџ"
-  },
-  "cp28595": "iso88595",
-  "iso88596": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ���¤�������،­�������������؛���؟�ءآأؤإئابةتثجحخدذرزسشصضطظعغ�����ـفقكلمنهوىيًٌٍَُِّْ�������������"
-  },
-  "cp28596": "iso88596",
-  "iso88597": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ‘’£€₯¦§¨©ͺ«¬­�―°±²³΄΅Ά·ΈΉΊ»Ό½ΎΏΐΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡ�ΣΤΥΦΧΨΩΪΫάέήίΰαβγδεζηθικλμνξοπρςστυφχψωϊϋόύώ�"
-  },
-  "cp28597": "iso88597",
-  "iso88598": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ �¢£¤¥¦§¨©×«¬­®¯°±²³´µ¶·¸¹÷»¼½¾��������������������������������‗אבגדהוזחטיךכלםמןנסעףפץצקרשת��‎‏�"
-  },
-  "cp28598": "iso88598",
-  "iso88599": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏĞÑÒÓÔÕÖ×ØÙÚÛÜİŞßàáâãäåæçèéêëìíîïğñòóôõö÷øùúûüışÿ"
-  },
-  "cp28599": "iso88599",
-  "iso885910": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ĄĒĢĪĨĶ§ĻĐŠŦŽ­ŪŊ°ąēģīĩķ·ļđšŧž―ūŋĀÁÂÃÄÅÆĮČÉĘËĖÍÎÏÐŅŌÓÔÕÖŨØŲÚÛÜÝÞßāáâãäåæįčéęëėíîïðņōóôõöũøųúûüýþĸ"
-  },
-  "cp28600": "iso885910",
-  "iso885911": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู����฿เแโใไๅๆ็่้๊๋์ํ๎๏๐๑๒๓๔๕๖๗๘๙๚๛����"
-  },
-  "cp28601": "iso885911",
-  "iso885913": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ”¢£¤„¦§Ø©Ŗ«¬­®Æ°±²³“µ¶·ø¹ŗ»¼½¾æĄĮĀĆÄÅĘĒČÉŹĖĢĶĪĻŠŃŅÓŌÕÖ×ŲŁŚŪÜŻŽßąįāćäåęēčéźėģķīļšńņóōõö÷ųłśūüżž’"
-  },
-  "cp28603": "iso885913",
-  "iso885914": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ Ḃḃ£ĊċḊ§Ẁ©ẂḋỲ­®ŸḞḟĠġṀṁ¶ṖẁṗẃṠỳẄẅṡÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏŴÑÒÓÔÕÖṪØÙÚÛÜÝŶßàáâãäåæçèéêëìíîïŵñòóôõöṫøùúûüýŷÿ"
-  },
-  "cp28604": "iso885914",
-  "iso885915": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£€¥Š§š©ª«¬­®¯°±²³Žµ¶·ž¹º»ŒœŸ¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿ"
-  },
-  "cp28605": "iso885915",
-  "iso885916": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ĄąŁ€„Š§š©Ș«Ź­źŻ°±ČłŽ”¶·žčș»ŒœŸżÀÁÂĂÄĆÆÇÈÉÊËÌÍÎÏĐŃÒÓÔŐÖŚŰÙÚÛÜĘȚßàáâăäćæçèéêëìíîïđńòóôőöśűùúûüęțÿ"
-  },
-  "cp28606": "iso885916",
-  "cp437": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäàåçêëèïîìÄÅÉæÆôöòûùÿÖÜ¢£¥₧ƒáíóúñѪº¿⌐¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-  },
-  "ibm437": "cp437",
-  "csibm437": "cp437",
-  "cp737": {
-    "type": "_sbcs",
-    "chars": "ΑΒΓΔΕΖΗΘΙΚΛΜΝΞΟΠΡΣΤΥΦΧΨΩαβγδεζηθικλμνξοπρσςτυφχψ░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀ωάέήϊίόύϋώΆΈΉΊΌΎΏ±≥≤ΪΫ÷≈°∙·√ⁿ²■ "
-  },
-  "ibm737": "cp737",
-  "csibm737": "cp737",
-  "cp775": {
-    "type": "_sbcs",
-    "chars": "ĆüéāäģåćłēŖŗīŹÄÅÉæÆōöĢ¢ŚśÖÜø£ØפĀĪóŻżź”¦©®¬½¼Ł«»░▒▓│┤ĄČĘĖ╣║╗╝ĮŠ┐└┴┬├─┼ŲŪ╚╔╩╦╠═╬Žąčęėįšųūž┘┌█▄▌▐▀ÓßŌŃõÕµńĶķĻļņĒŅ’­±“¾¶§÷„°∙·¹³²■ "
-  },
-  "ibm775": "cp775",
-  "csibm775": "cp775",
-  "cp850": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäàåçêëèïîìÄÅÉæÆôöòûùÿÖÜø£Ø׃áíóúñѪº¿®¬½¼¡«»░▒▓│┤ÁÂÀ©╣║╗╝¢¥┐└┴┬├─┼ãÃ╚╔╩╦╠═╬¤ðÐÊËÈıÍÎÏ┘┌█▄¦Ì▀ÓßÔÒõÕµþÞÚÛÙýݯ´­±‗¾¶§÷¸°¨·¹³²■ "
-  },
-  "ibm850": "cp850",
-  "csibm850": "cp850",
-  "cp852": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäůćçłëŐőîŹÄĆÉĹĺôöĽľŚśÖÜŤťŁ×čáíóúĄąŽžĘ꬟Ⱥ«»░▒▓│┤ÁÂĚŞ╣║╗╝Żż┐└┴┬├─┼Ăă╚╔╩╦╠═╬¤đĐĎËďŇÍÎě┘┌█▄ŢŮ▀ÓßÔŃńňŠšŔÚŕŰýÝţ´­˝˛ˇ˘§÷¸°¨˙űŘř■ "
-  },
-  "ibm852": "cp852",
-  "csibm852": "cp852",
-  "cp855": {
-    "type": "_sbcs",
-    "chars": "ђЂѓЃёЁєЄѕЅіІїЇјЈљЉњЊћЋќЌўЎџЏюЮъЪаАбБцЦдДеЕфФгГ«»░▒▓│┤хХиИ╣║╗╝йЙ┐└┴┬├─┼кК╚╔╩╦╠═╬¤лЛмМнНоОп┘┌█▄Пя▀ЯрРсСтТуУжЖвВьЬ№­ыЫзЗшШэЭщЩчЧ§■ "
-  },
-  "ibm855": "cp855",
-  "csibm855": "cp855",
-  "cp856": {
-    "type": "_sbcs",
-    "chars": "אבגדהוזחטיךכלםמןנסעףפץצקרשת�£�×����������®¬½¼�«»░▒▓│┤���©╣║╗╝¢¥┐└┴┬├─┼��╚╔╩╦╠═╬¤���������┘┌█▄¦�▀������µ�������¯´­±‗¾¶§÷¸°¨·¹³²■ "
-  },
-  "ibm856": "cp856",
-  "csibm856": "cp856",
-  "cp857": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäàåçêëèïîıÄÅÉæÆôöòûùİÖÜø£ØŞşáíóúñÑĞ𿮬½¼¡«»░▒▓│┤ÁÂÀ©╣║╗╝¢¥┐└┴┬├─┼ãÃ╚╔╩╦╠═╬¤ºªÊËÈ�ÍÎÏ┘┌█▄¦Ì▀ÓßÔÒõÕµ�×ÚÛÙìÿ¯´­±�¾¶§÷¸°¨·¹³²■ "
-  },
-  "ibm857": "cp857",
-  "csibm857": "cp857",
-  "cp858": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäàåçêëèïîìÄÅÉæÆôöòûùÿÖÜø£Ø׃áíóúñѪº¿®¬½¼¡«»░▒▓│┤ÁÂÀ©╣║╗╝¢¥┐└┴┬├─┼ãÃ╚╔╩╦╠═╬¤ðÐÊËÈ€ÍÎÏ┘┌█▄¦Ì▀ÓßÔÒõÕµþÞÚÛÙýݯ´­±‗¾¶§÷¸°¨·¹³²■ "
-  },
-  "ibm858": "cp858",
-  "csibm858": "cp858",
-  "cp860": {
-    "type": "_sbcs",
-    "chars": "ÇüéâãàÁçêÊèÍÔìÃÂÉÀÈôõòÚùÌÕÜ¢£Ù₧ÓáíóúñѪº¿Ò¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-  },
-  "ibm860": "cp860",
-  "csibm860": "cp860",
-  "cp861": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäàåçêëèÐðÞÄÅÉæÆôöþûÝýÖÜø£Ø₧ƒáíóúÁÍÓÚ¿⌐¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-  },
-  "ibm861": "cp861",
-  "csibm861": "cp861",
-  "cp862": {
-    "type": "_sbcs",
-    "chars": "אבגדהוזחטיךכלםמןנסעףפץצקרשת¢£¥₧ƒáíóúñѪº¿⌐¬½¼¡«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-  },
-  "ibm862": "cp862",
-  "csibm862": "cp862",
-  "cp863": {
-    "type": "_sbcs",
-    "chars": "ÇüéâÂà¶çêëèïî‗À§ÉÈÊôËÏûù¤ÔÜ¢£ÙÛƒ¦´óú¨¸³¯Î⌐¬½¼¾«»░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-  },
-  "ibm863": "cp863",
-  "csibm863": "cp863",
-  "cp864": {
-    "type": "_sbcs",
-    "chars": "\u0000\u0001\u0002\u0003\u0004\u0005\u0006\u0007\b\t\n\u000b\f\r\u000e\u000f\u0010\u0011\u0012\u0013\u0014\u0015\u0016\u0017\u0018\u0019\u001a\u001b\u001c\u001d\u001e\u001f !\"#$٪&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~°·∙√▒─│┼┤┬├┴┐┌└┘β∞φ±½¼≈«»ﻷﻸ��ﻻﻼ� ­ﺂ£¤ﺄ��ﺎﺏﺕﺙ،ﺝﺡﺥ٠١٢٣٤٥٦٧٨٩ﻑ؛ﺱﺵﺹ؟¢ﺀﺁﺃﺅﻊﺋﺍﺑﺓﺗﺛﺟﺣﺧﺩﺫﺭﺯﺳﺷﺻﺿﻁﻅﻋﻏ¦¬÷×ﻉـﻓﻗﻛﻟﻣﻧﻫﻭﻯﻳﺽﻌﻎﻍﻡﹽّﻥﻩﻬﻰﻲﻐﻕﻵﻶﻝﻙﻱ■�"
-  },
-  "ibm864": "cp864",
-  "csibm864": "cp864",
-  "cp865": {
-    "type": "_sbcs",
-    "chars": "ÇüéâäàåçêëèïîìÄÅÉæÆôöòûùÿÖÜø£Ø₧ƒáíóúñѪº¿⌐¬½¼¡«¤░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-  },
-  "ibm865": "cp865",
-  "csibm865": "cp865",
-  "cp866": {
-    "type": "_sbcs",
-    "chars": "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмноп░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀рстуфхцчшщъыьэюяЁёЄєЇїЎў°∙·√№¤■ "
-  },
-  "ibm866": "cp866",
-  "csibm866": "cp866",
-  "cp869": {
-    "type": "_sbcs",
-    "chars": "������Ά�·¬¦‘’Έ―ΉΊΪΌ��ΎΫ©Ώ²³ά£έήίϊΐόύΑΒΓΔΕΖΗ½ΘΙ«»░▒▓│┤ΚΛΜΝ╣║╗╝ΞΟ┐└┴┬├─┼ΠΡ╚╔╩╦╠═╬ΣΤΥΦΧΨΩαβγ┘┌█▄δε▀ζηθικλμνξοπρσςτ΄­±υφχ§ψ΅°¨ωϋΰώ■ "
-  },
-  "ibm869": "cp869",
-  "csibm869": "cp869",
-  "cp922": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£¤¥¦§¨©ª«¬­®‾°±²³´µ¶·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏŠÑÒÓÔÕÖ×ØÙÚÛÜÝŽßàáâãäåæçèéêëìíîïšñòóôõö÷øùúûüýžÿ"
-  },
-  "ibm922": "cp922",
-  "csibm922": "cp922",
-  "cp1046": {
-    "type": "_sbcs",
-    "chars": "ﺈ×÷ﹱˆ■│─┐┌└┘ﹹﹻﹽﹿﹷﺊﻰﻳﻲﻎﻏﻐﻶﻸﻺﻼ ¤ﺋﺑﺗﺛﺟﺣ،­ﺧﺳ٠١٢٣٤٥٦٧٨٩ﺷ؛ﺻﺿﻊ؟ﻋءآأؤإئابةتثجحخدذرزسشصضطﻇعغﻌﺂﺄﺎﻓـفقكلمنهوىيًٌٍَُِّْﻗﻛﻟﻵﻷﻹﻻﻣﻧﻬﻩ�"
-  },
-  "ibm1046": "cp1046",
-  "csibm1046": "cp1046",
-  "cp1124": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ЁЂҐЄЅІЇЈЉЊЋЌ­ЎЏАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя№ёђґєѕіїјљњћќ§ўџ"
-  },
-  "ibm1124": "cp1124",
-  "csibm1124": "cp1124",
-  "cp1125": {
-    "type": "_sbcs",
-    "chars": "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмноп░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀рстуфхцчшщъыьэюяЁёҐґЄєІіЇї·√№¤■ "
-  },
-  "ibm1125": "cp1125",
-  "csibm1125": "cp1125",
-  "cp1129": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£¤¥¦§œ©ª«¬­®¯°±²³Ÿµ¶·Œ¹º»¼½¾¿ÀÁÂĂÄÅÆÇÈÉÊË̀ÍÎÏĐÑ̉ÓÔƠÖ×ØÙÚÛÜỮßàáâăäåæçèéêë́íîïđṇ̃óôơö÷øùúûüư₫ÿ"
-  },
-  "ibm1129": "cp1129",
-  "csibm1129": "cp1129",
-  "cp1133": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ກຂຄງຈສຊຍດຕຖທນບປຜຝພຟມຢຣລວຫອຮ���ຯະາຳິີຶືຸູຼັົຽ���ເແໂໃໄ່້໊໋໌ໍໆ�ໜໝ₭����������������໐໑໒໓໔໕໖໗໘໙��¢¬¦�"
-  },
-  "ibm1133": "cp1133",
-  "csibm1133": "cp1133",
-  "cp1161": {
-    "type": "_sbcs",
-    "chars": "��������������������������������่กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู้๊๋€฿เแโใไๅๆ็่้๊๋์ํ๎๏๐๑๒๓๔๕๖๗๘๙๚๛¢¬¦ "
-  },
-  "ibm1161": "cp1161",
-  "csibm1161": "cp1161",
-  "cp1162": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู����฿เแโใไๅๆ็่้๊๋์ํ๎๏๐๑๒๓๔๕๖๗๘๙๚๛����"
-  },
-  "ibm1162": "cp1162",
-  "csibm1162": "cp1162",
-  "cp1163": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£€¥¦§œ©ª«¬­®¯°±²³Ÿµ¶·Œ¹º»¼½¾¿ÀÁÂĂÄÅÆÇÈÉÊË̀ÍÎÏĐÑ̉ÓÔƠÖ×ØÙÚÛÜỮßàáâăäåæçèéêë́íîïđṇ̃óôơö÷øùúûüư₫ÿ"
-  },
-  "ibm1163": "cp1163",
-  "csibm1163": "cp1163",
-  "maccroatian": {
-    "type": "_sbcs",
-    "chars": "ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®Š™´¨≠ŽØ∞±≤≥∆µ∂∑∏š∫ªºΩžø¿¡¬√ƒ≈Ć«Č… ÀÃÕŒœĐ—“”‘’÷◊�©⁄¤‹›Æ»–·‚„‰ÂćÁčÈÍÎÏÌÓÔđÒÚÛÙıˆ˜¯πË˚¸Êæˇ"
-  },
-  "maccyrillic": {
-    "type": "_sbcs",
-    "chars": "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ†°¢£§•¶І®©™Ђђ≠Ѓѓ∞±≤≥іµ∂ЈЄєЇїЉљЊњјЅ¬√ƒ≈∆«»… ЋћЌќѕ–—“”‘’÷„ЎўЏџ№Ёёяабвгдежзийклмнопрстуфхцчшщъыьэю¤"
-  },
-  "macgreek": {
-    "type": "_sbcs",
-    "chars": "Ĺ²É³ÖÜ΅àâä΄¨çéèê룙î‰ôö¦­ùûü†ΓΔΘΛΞΠß®©ΣΪ§≠°·Α±≤≥¥ΒΕΖΗΙΚΜΦΫΨΩάΝ¬ΟΡ≈Τ«»… ΥΧΆΈœ–―“”‘’÷ΉΊΌΎέήίόΏύαβψδεφγηιξκλμνοπώρστθωςχυζϊϋΐΰ�"
-  },
-  "maciceland": {
-    "type": "_sbcs",
-    "chars": "ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûüÝ°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄¤ÐðÞþý·‚„‰ÂÊÁËÈÍÎÏÌÓÔ�ÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ"
-  },
-  "macroman": {
-    "type": "_sbcs",
-    "chars": "ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄¤‹›fifl‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔ�ÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ"
-  },
-  "macromania": {
-    "type": "_sbcs",
-    "chars": "ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ĂŞ∞±≤≥¥µ∂∑∏π∫ªºΩăş¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄¤‹›Ţţ‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔ�ÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ"
-  },
-  "macthai": {
-    "type": "_sbcs",
-    "chars": "«»…“”�•‘’� กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู​–—฿เแโใไๅๆ็่้๊๋์ํ™๏๐๑๒๓๔๕๖๗๘๙®©����"
-  },
-  "macturkish": {
-    "type": "_sbcs",
-    "chars": "ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸĞğİıŞş‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔ�ÒÚÛÙ�ˆ˜¯˘˙˚¸˝˛ˇ"
-  },
-  "macukraine": {
-    "type": "_sbcs",
-    "chars": "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯ†°Ґ£§•¶І®©™Ђђ≠Ѓѓ∞±≤≥іµґЈЄєЇїЉљЊњјЅ¬√ƒ≈∆«»… ЋћЌќѕ–—“”‘’÷„ЎўЏџ№Ёёяабвгдежзийклмнопрстуфхцчшщъыьэю¤"
-  },
-  "koi8r": {
-    "type": "_sbcs",
-    "chars": "─│┌┐└┘├┤┬┴┼▀▄█▌▐░▒▓⌠■∙√≈≤≥ ⌡°²·÷═║╒ё╓╔╕╖╗╘╙╚╛╜╝╞╟╠╡Ё╢╣╤╥╦╧╨╩╪╫╬©юабцдефгхийклмнопярстужвьызшэщчъЮАБЦДЕФГХИЙКЛМНОПЯРСТУЖВЬЫЗШЭЩЧЪ"
-  },
-  "koi8u": {
-    "type": "_sbcs",
-    "chars": "─│┌┐└┘├┤┬┴┼▀▄█▌▐░▒▓⌠■∙√≈≤≥ ⌡°²·÷═║╒ёє╔ії╗╘╙╚╛ґ╝╞╟╠╡ЁЄ╣ІЇ╦╧╨╩╪Ґ╬©юабцдефгхийклмнопярстужвьызшэщчъЮАБЦДЕФГХИЙКЛМНОПЯРСТУЖВЬЫЗШЭЩЧЪ"
-  },
-  "koi8ru": {
-    "type": "_sbcs",
-    "chars": "─│┌┐└┘├┤┬┴┼▀▄█▌▐░▒▓⌠■∙√≈≤≥ ⌡°²·÷═║╒ёє╔ії╗╘╙╚╛ґў╞╟╠╡ЁЄ╣ІЇ╦╧╨╩╪ҐЎ©юабцдефгхийклмнопярстужвьызшэщчъЮАБЦДЕФГХИЙКЛМНОПЯРСТУЖВЬЫЗШЭЩЧЪ"
-  },
-  "koi8t": {
-    "type": "_sbcs",
-    "chars": "қғ‚Ғ„…†‡�‰ҳ‹ҲҷҶ�Қ‘’“”•–—�™�›�����ӯӮё¤ӣ¦§���«¬­®�°±²Ё�Ӣ¶·�№�»���©юабцдефгхийклмнопярстужвьызшэщчъЮАБЦДЕФГХИЙКЛМНОПЯРСТУЖВЬЫЗШЭЩЧЪ"
-  },
-  "armscii8": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ �և։)(»«—.՝,-֊…՜՛՞ԱաԲբԳգԴդԵեԶզԷէԸըԹթԺժԻիԼլԽխԾծԿկՀհՁձՂղՃճՄմՅյՆնՇշՈոՉչՊպՋջՌռՍսՎվՏտՐրՑցՒւՓփՔքՕօՖֆ՚�"
-  },
-  "rk1048": {
-    "type": "_sbcs",
-    "chars": "ЂЃ‚ѓ„…†‡€‰Љ‹ЊҚҺЏђ‘’“”•–—�™љ›њқһџ ҰұӘ¤Ө¦§Ё©Ғ«¬­®Ү°±Ііөµ¶·ё№ғ»әҢңүАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя"
-  },
-  "tcvn": {
-    "type": "_sbcs",
-    "chars": "\u0000ÚỤ\u0003ỪỬỮ\u0007\b\t\n\u000b\f\r\u000e\u000f\u0010ỨỰỲỶỸÝỴ\u0018\u0019\u001a\u001b\u001c\u001d\u001e\u001f !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~ÀẢÃÁẠẶẬÈẺẼÉẸỆÌỈĨÍỊÒỎÕÓỌỘỜỞỠỚỢÙỦŨ ĂÂÊÔƠƯĐăâêôơưđẶ̀̀̉̃́àảãáạẲằẳẵắẴẮẦẨẪẤỀặầẩẫấậèỂẻẽéẹềểễếệìỉỄẾỒĩíịòỔỏõóọồổỗốộờởỡớợùỖủũúụừửữứựỳỷỹýỵỐ"
-  },
-  "georgianacademy": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿აბგდევზთიკლმნოპჟრსტუფქღყშჩცძწჭხჯჰჱჲჳჴჵჶçèéêëìíîïðñòóôõö÷øùúûüýþÿ"
-  },
-  "georgianps": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ¡¢£¤¥¦§¨©ª«¬­®¯°±²³´µ¶·¸¹º»¼½¾¿აბგდევზჱთიკლმნჲოპჟრსტჳუფქღყშჩცძწჭხჴჯჰჵæçèéêëìíîïðñòóôõö÷øùúûüýþÿ"
-  },
-  "pt154": {
-    "type": "_sbcs",
-    "chars": "ҖҒӮғ„…ҶҮҲүҠӢҢҚҺҸҗ‘’“”•–—ҳҷҡӣңқһҹ ЎўЈӨҘҰ§Ё©Ә«¬ӯ®Ҝ°ұІіҙө¶·ё№ә»јҪҫҝАБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя"
-  },
-  "viscii": {
-    "type": "_sbcs",
-    "chars": "\u0000\u0001Ẳ\u0003\u0004ẴẪ\u0007\b\t\n\u000b\f\r\u000e\u000f\u0010\u0011\u0012\u0013Ỷ\u0015\u0016\u0017\u0018Ỹ\u001a\u001b\u001c\u001dỴ\u001f !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}~ẠẮẰẶẤẦẨẬẼẸẾỀỂỄỆỐỒỔỖỘỢỚỜỞỊỎỌỈỦŨỤỲÕắằặấầẩậẽẹếềểễệốồổỗỠƠộờởịỰỨỪỬơớƯÀÁÂÃẢĂẳẵÈÉÊẺÌÍĨỳĐứÒÓÔạỷừửÙÚỹỵÝỡưàáâãảăữẫèéêẻìíĩỉđựòóôõỏọụùúũủýợỮ"
-  },
-  "iso646cn": {
-    "type": "_sbcs",
-    "chars": "\u0000\u0001\u0002\u0003\u0004\u0005\u0006\u0007\b\t\n\u000b\f\r\u000e\u000f\u0010\u0011\u0012\u0013\u0014\u0015\u0016\u0017\u0018\u0019\u001a\u001b\u001c\u001d\u001e\u001f !\"#¥%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[\\]^_`abcdefghijklmnopqrstuvwxyz{|}‾��������������������������������������������������������������������������������������������������������������������������������"
-  },
-  "iso646jp": {
-    "type": "_sbcs",
-    "chars": "\u0000\u0001\u0002\u0003\u0004\u0005\u0006\u0007\b\t\n\u000b\f\r\u000e\u000f\u0010\u0011\u0012\u0013\u0014\u0015\u0016\u0017\u0018\u0019\u001a\u001b\u001c\u001d\u001e\u001f !\"#$%&'()*+,-./0123456789:;<=>?@ABCDEFGHIJKLMNOPQRSTUVWXYZ[¥]^_`abcdefghijklmnopqrstuvwxyz{|}‾��������������������������������������������������������������������������������������������������������������������������������"
-  },
-  "hproman8": {
-    "type": "_sbcs",
-    "chars": "€‚ƒ„…†‡ˆ‰Š‹ŒŽ‘’“”•–—˜™š›œžŸ ÀÂÈÊËÎÏ´ˋˆ¨˜ÙÛ₤¯Ýý°ÇçÑñ¡¿¤£¥§ƒ¢âêôûáéóúàèòùäëöüÅîØÆåíøæÄìÖÜÉïßÔÁÃãÐðÍÌÓÒÕõŠšÚŸÿÞþ·µ¶¾—¼½ªº«■»±�"
-  },
-  "macintosh": {
-    "type": "_sbcs",
-    "chars": "ÄÅÇÉÑÖÜáàâäãåçéèêëíìîïñóòôöõúùûü†°¢£§•¶ß®©™´¨≠ÆØ∞±≤≥¥µ∂∑∏π∫ªºΩæø¿¡¬√ƒ≈∆«»… ÀÃÕŒœ–—“”‘’÷◊ÿŸ⁄¤‹›fifl‡·‚„‰ÂÊÁËÈÍÎÏÌÓÔ�ÒÚÛÙıˆ˜¯˘˙˚¸˝˛ˇ"
-  },
-  "ascii": {
-    "type": "_sbcs",
-    "chars": "��������������������������������������������������������������������������������������������������������������������������������"
-  },
-  "tis620": {
-    "type": "_sbcs",
-    "chars": "���������������������������������กขฃคฅฆงจฉชซฌญฎฏฐฑฒณดตถทธนบปผฝพฟภมยรฤลฦวศษสหฬอฮฯะัาำิีึืฺุู����฿เแโใไๅๆ็่้๊๋์ํ๎๏๐๑๒๓๔๕๖๗๘๙๚๛����"
-  }
-}
-
-/***/ }),
-/* 716 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// Manually added data to be used by sbcs codec in addition to generated one.
-
-module.exports = {
-    // Not supported by iconv, not sure why.
-    "10029": "maccenteuro",
-    "maccenteuro": {
-        "type": "_sbcs",
-        "chars": "ÄĀāÉĄÖÜáąČäčĆć鏟ĎíďĒēĖóėôöõúĚěü†°Ę£§•¶ß®©™ę¨≠ģĮįĪ≤≥īĶ∂∑łĻļĽľĹĺŅņѬ√ńŇ∆«»… ňŐÕőŌ–—“”‘’÷◊ōŔŕŘ‹›řŖŗŠ‚„šŚśÁŤťÍŽžŪÓÔūŮÚůŰűŲųÝýķŻŁżĢˇ"
-    },
-
-    "808": "cp808",
-    "ibm808": "cp808",
-    "cp808": {
-        "type": "_sbcs",
-        "chars": "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмноп░▒▓│┤╡╢╖╕╣║╗╝╜╛┐└┴┬├─┼╞╟╚╔╩╦╠═╬╧╨╤╥╙╘╒╓╫╪┘┌█▄▌▐▀рстуфхцчшщъыьэюяЁёЄєЇїЎў°∙·√№€■ "
-    },
-
-    "mik": {
-        "type": "_sbcs",
-        "chars": "АБВГДЕЖЗИЙКЛМНОПРСТУФХЦЧШЩЪЫЬЭЮЯабвгдежзийклмнопрстуфхцчшщъыьэюя└┴┬├─┼╣║╚╔╩╦╠═╬┐░▒▓│┤№§╗╝┘┌█▄▌▐▀αßΓπΣσµτΦΘΩδ∞φε∩≡±≥≤⌠⌡÷≈°∙·√ⁿ²■ "
-    },
-
-    // Aliases of generated encodings.
-    "ascii8bit": "ascii",
-    "usascii": "ascii",
-    "ansix34": "ascii",
-    "ansix341968": "ascii",
-    "ansix341986": "ascii",
-    "csascii": "ascii",
-    "cp367": "ascii",
-    "ibm367": "ascii",
-    "isoir6": "ascii",
-    "iso646us": "ascii",
-    "iso646irv": "ascii",
-    "us": "ascii",
-
-    "latin1": "iso88591",
-    "latin2": "iso88592",
-    "latin3": "iso88593",
-    "latin4": "iso88594",
-    "latin5": "iso88599",
-    "latin6": "iso885910",
-    "latin7": "iso885913",
-    "latin8": "iso885914",
-    "latin9": "iso885915",
-    "latin10": "iso885916",
-
-    "csisolatin1": "iso88591",
-    "csisolatin2": "iso88592",
-    "csisolatin3": "iso88593",
-    "csisolatin4": "iso88594",
-    "csisolatincyrillic": "iso88595",
-    "csisolatinarabic": "iso88596",
-    "csisolatingreek" : "iso88597",
-    "csisolatinhebrew": "iso88598",
-    "csisolatin5": "iso88599",
-    "csisolatin6": "iso885910",
-
-    "l1": "iso88591",
-    "l2": "iso88592",
-    "l3": "iso88593",
-    "l4": "iso88594",
-    "l5": "iso88599",
-    "l6": "iso885910",
-    "l7": "iso885913",
-    "l8": "iso885914",
-    "l9": "iso885915",
-    "l10": "iso885916",
-
-    "isoir14": "iso646jp",
-    "isoir57": "iso646cn",
-    "isoir100": "iso88591",
-    "isoir101": "iso88592",
-    "isoir109": "iso88593",
-    "isoir110": "iso88594",
-    "isoir144": "iso88595",
-    "isoir127": "iso88596",
-    "isoir126": "iso88597",
-    "isoir138": "iso88598",
-    "isoir148": "iso88599",
-    "isoir157": "iso885910",
-    "isoir166": "tis620",
-    "isoir179": "iso885913",
-    "isoir199": "iso885914",
-    "isoir203": "iso885915",
-    "isoir226": "iso885916",
-
-    "cp819": "iso88591",
-    "ibm819": "iso88591",
-
-    "cyrillic": "iso88595",
-
-    "arabic": "iso88596",
-    "arabic8": "iso88596",
-    "ecma114": "iso88596",
-    "asmo708": "iso88596",
-
-    "greek" : "iso88597",
-    "greek8" : "iso88597",
-    "ecma118" : "iso88597",
-    "elot928" : "iso88597",
-
-    "hebrew": "iso88598",
-    "hebrew8": "iso88598",
-
-    "turkish": "iso88599",
-    "turkish8": "iso88599",
-
-    "thai": "iso885911",
-    "thai8": "iso885911",
-
-    "celtic": "iso885914",
-    "celtic8": "iso885914",
-    "isoceltic": "iso885914",
-
-    "tis6200": "tis620",
-    "tis62025291": "tis620",
-    "tis62025330": "tis620",
-
-    "10000": "macroman",
-    "10006": "macgreek",
-    "10007": "maccyrillic",
-    "10079": "maciceland",
-    "10081": "macturkish",
-
-    "cspc8codepage437": "cp437",
-    "cspc775baltic": "cp775",
-    "cspc850multilingual": "cp850",
-    "cspcp852": "cp852",
-    "cspc862latinhebrew": "cp862",
-    "cpgr": "cp869",
-
-    "msee": "cp1250",
-    "mscyrl": "cp1251",
-    "msansi": "cp1252",
-    "msgreek": "cp1253",
-    "msturk": "cp1254",
-    "mshebr": "cp1255",
-    "msarab": "cp1256",
-    "winbaltrim": "cp1257",
-
-    "cp20866": "koi8r",
-    "20866": "koi8r",
-    "ibm878": "koi8r",
-    "cskoi8r": "koi8r",
-
-    "cp21866": "koi8u",
-    "21866": "koi8u",
-    "ibm1168": "koi8u",
-
-    "strk10482002": "rk1048",
-
-    "tcvn5712": "tcvn",
-    "tcvn57121": "tcvn",
-
-    "gb198880": "iso646cn",
-    "cn": "iso646cn",
-
-    "csiso14jisc6220ro": "iso646jp",
-    "jisc62201969ro": "iso646jp",
-    "jp": "iso646jp",
-
-    "cshproman8": "hproman8",
-    "r8": "hproman8",
-    "roman8": "hproman8",
-    "xroman8": "hproman8",
-    "ibm1051": "hproman8",
-
-    "mac": "macintosh",
-    "csmacintosh": "macintosh",
-};
-
-
-
-/***/ }),
-/* 717 */
-/***/ (function(module, exports) {
-
-module.exports = [["8740","䏰䰲䘃䖦䕸𧉧䵷䖳𧲱䳢𧳅㮕䜶䝄䱇䱀𤊿𣘗𧍒𦺋𧃒䱗𪍑䝏䗚䲅𧱬䴇䪤䚡𦬣爥𥩔𡩣𣸆𣽡晍囻"],["8767","綕夝𨮹㷴霴𧯯寛𡵞媤㘥𩺰嫑宷峼杮薓𩥅瑡璝㡵𡵓𣚞𦀡㻬"],["87a1","𥣞㫵竼龗𤅡𨤍𣇪𠪊𣉞䌊蒄龖鐯䤰蘓墖靊鈘秐稲晠権袝瑌篅枂稬剏遆㓦珄𥶹瓆鿇垳䤯呌䄱𣚎堘穲𧭥讏䚮𦺈䆁𥶙箮𢒼鿈𢓁𢓉𢓌鿉蔄𣖻䂴鿊䓡𪷿拁灮鿋"],["8840","㇀",4,"𠄌㇅𠃑𠃍㇆㇇𠃋𡿨㇈𠃊㇉㇊㇋㇌𠄎㇍㇎ĀÁǍÀĒÉĚÈŌÓǑÒ࿿Ê̄Ế࿿Ê̌ỀÊāáǎàɑēéěèīíǐìōóǒòūúǔùǖǘǚ"],["88a1","ǜü࿿ê̄ế࿿ê̌ềêɡ⏚⏛"],["8940","𪎩𡅅"],["8943","攊"],["8946","丽滝鵎釟"],["894c","𧜵撑会伨侨兖兴农凤务动医华发变团声处备夲头学实実岚庆总斉柾栄桥济炼电纤纬纺织经统缆缷艺苏药视设询车轧轮"],["89a1","琑糼緍楆竉刧"],["89ab","醌碸酞肼"],["89b0","贋胶𠧧"],["89b5","肟黇䳍鷉鸌䰾𩷶𧀎鸊𪄳㗁"],["89c1","溚舾甙"],["89c5","䤑马骏龙禇𨑬𡷊𠗐𢫦两亁亀亇亿仫伷㑌侽㹈倃傈㑽㒓㒥円夅凛凼刅争剹劐匧㗇厩㕑厰㕓参吣㕭㕲㚁咓咣咴咹哐哯唘唣唨㖘唿㖥㖿嗗㗅"],["8a40","𧶄唥"],["8a43","𠱂𠴕𥄫喐𢳆㧬𠍁蹆𤶸𩓥䁓𨂾睺𢰸㨴䟕𨅝𦧲𤷪擝𠵼𠾴𠳕𡃴撍蹾𠺖𠰋𠽤𢲩𨉖𤓓"],["8a64","𠵆𩩍𨃩䟴𤺧𢳂骲㩧𩗴㿭㔆𥋇𩟔𧣈𢵄鵮頕"],["8a76","䏙𦂥撴哣𢵌𢯊𡁷㧻𡁯"],["8aa1","𦛚𦜖𧦠擪𥁒𠱃蹨𢆡𨭌𠜱"],["8aac","䠋𠆩㿺塳𢶍"],["8ab2","𤗈𠓼𦂗𠽌𠶖啹䂻䎺"],["8abb","䪴𢩦𡂝膪飵𠶜捹㧾𢝵跀嚡摼㹃"],["8ac9","𪘁𠸉𢫏𢳉"],["8ace","𡃈𣧂㦒㨆𨊛㕸𥹉𢃇噒𠼱𢲲𩜠㒼氽𤸻"],["8adf","𧕴𢺋𢈈𪙛𨳍𠹺𠰴𦠜羓𡃏𢠃𢤹㗻𥇣𠺌𠾍𠺪㾓𠼰𠵇𡅏𠹌"],["8af6","𠺫𠮩𠵈𡃀𡄽㿹𢚖搲𠾭"],["8b40","𣏴𧘹𢯎𠵾𠵿𢱑𢱕㨘𠺘𡃇𠼮𪘲𦭐𨳒𨶙𨳊閪哌苄喹"],["8b55","𩻃鰦骶𧝞𢷮煀腭胬尜𦕲脴㞗卟𨂽醶𠻺𠸏𠹷𠻻㗝𤷫㘉𠳖嚯𢞵𡃉𠸐𠹸𡁸𡅈𨈇𡑕𠹹𤹐𢶤婔𡀝𡀞𡃵𡃶垜𠸑"],["8ba1","𧚔𨋍𠾵𠹻𥅾㜃𠾶𡆀𥋘𪊽𤧚𡠺𤅷𨉼墙剨㘚𥜽箲孨䠀䬬鼧䧧鰟鮍𥭴𣄽嗻㗲嚉丨夂𡯁屮靑𠂆乛亻㔾尣彑忄㣺扌攵歺氵氺灬爫丬犭𤣩罒礻糹罓𦉪㓁"],["8bde","𦍋耂肀𦘒𦥑卝衤见𧢲讠贝钅镸长门𨸏韦页风飞饣𩠐鱼鸟黄歯龜丷𠂇阝户钢"],["8c40","倻淾𩱳龦㷉袏𤅎灷峵䬠𥇍㕙𥴰愢𨨲辧釶熑朙玺𣊁𪄇㲋𡦀䬐磤琂冮𨜏䀉橣𪊺䈣蘏𠩯稪𩥇𨫪靕灍匤𢁾鏴盙𨧣龧矝亣俰傼丯众龨吴綋墒壐𡶶庒庙忂𢜒斋"],["8ca1","𣏹椙橃𣱣泿"],["8ca7","爀𤔅玌㻛𤨓嬕璹讃𥲤𥚕窓篬糃繬苸薗龩袐龪躹龫迏蕟駠鈡龬𨶹𡐿䁱䊢娚"],["8cc9","顨杫䉶圽"],["8cce","藖𤥻芿𧄍䲁𦵴嵻𦬕𦾾龭龮宖龯曧繛湗秊㶈䓃𣉖𢞖䎚䔶"],["8ce6","峕𣬚諹屸㴒𣕑嵸龲煗䕘𤃬𡸣䱷㥸㑊𠆤𦱁諌侴𠈹妿腬顖𩣺弻"],["8d40","𠮟"],["8d42","𢇁𨥭䄂䚻𩁹㼇龳𪆵䃸㟖䛷𦱆䅼𨚲𧏿䕭㣔𥒚䕡䔛䶉䱻䵶䗪㿈𤬏㙡䓞䒽䇭崾嵈嵖㷼㠏嶤嶹㠠㠸幂庽弥徃㤈㤔㤿㥍惗愽峥㦉憷憹懏㦸戬抐拥挘㧸嚱"],["8da1","㨃揢揻搇摚㩋擀崕嘡龟㪗斆㪽旿晓㫲暒㬢朖㭂枤栀㭘桊梄㭲㭱㭻椉楃牜楤榟榅㮼槖㯝橥橴橱檂㯬檙㯲檫檵櫔櫶殁毁毪汵沪㳋洂洆洦涁㳯涤涱渕渘温溆𨧀溻滢滚齿滨滩漤漴㵆𣽁澁澾㵪㵵熷岙㶊瀬㶑灐灔灯灿炉𠌥䏁㗱𠻘"],["8e40","𣻗垾𦻓焾𥟠㙎榢𨯩孴穉𥣡𩓙穥穽𥦬窻窰竂竃燑𦒍䇊竚竝竪䇯咲𥰁笋筕笩𥌎𥳾箢筯莜𥮴𦱿篐萡箒箸𥴠㶭𥱥蒒篺簆簵𥳁籄粃𤢂粦晽𤕸糉糇糦籴糳糵糎"],["8ea1","繧䔝𦹄絝𦻖璍綉綫焵綳緒𤁗𦀩緤㴓緵𡟹緥𨍭縝𦄡𦅚繮纒䌫鑬縧罀罁罇礶𦋐駡羗𦍑羣𡙡𠁨䕜𣝦䔃𨌺翺𦒉者耈耝耨耯𪂇𦳃耻耼聡𢜔䦉𦘦𣷣𦛨朥肧𨩈脇脚墰𢛶汿𦒘𤾸擧𡒊舘𡡞橓𤩥𤪕䑺舩𠬍𦩒𣵾俹𡓽蓢荢𦬊𤦧𣔰𡝳𣷸芪椛芳䇛"],["8f40","蕋苐茚𠸖𡞴㛁𣅽𣕚艻苢茘𣺋𦶣𦬅𦮗𣗎㶿茝嗬莅䔋𦶥莬菁菓㑾𦻔橗蕚㒖𦹂𢻯葘𥯤葱㷓䓤檧葊𣲵祘蒨𦮖𦹷𦹃蓞萏莑䒠蒓蓤𥲑䉀𥳀䕃蔴嫲𦺙䔧蕳䔖枿蘖"],["8fa1","𨘥𨘻藁𧂈蘂𡖂𧃍䕫䕪蘨㙈𡢢号𧎚虾蝱𪃸蟮𢰧螱蟚蠏噡虬桖䘏衅衆𧗠𣶹𧗤衞袜䙛袴袵揁装睷𧜏覇覊覦覩覧覼𨨥觧𧤤𧪽誜瞓釾誐𧩙竩𧬺𣾏䜓𧬸煼謌謟𥐰𥕥謿譌譍誩𤩺讐讛誯𡛟䘕衏貛𧵔𧶏貫㜥𧵓賖𧶘𧶽贒贃𡤐賛灜贑𤳉㻐起"],["9040","趩𨀂𡀔𤦊㭼𨆼𧄌竧躭躶軃鋔輙輭𨍥𨐒辥錃𪊟𠩐辳䤪𨧞𨔽𣶻廸𣉢迹𪀔𨚼𨔁𢌥㦀𦻗逷𨔼𧪾遡𨕬𨘋邨𨜓郄𨛦邮都酧㫰醩釄粬𨤳𡺉鈎沟鉁鉢𥖹銹𨫆𣲛𨬌𥗛"],["90a1","𠴱錬鍫𨫡𨯫炏嫃𨫢𨫥䥥鉄𨯬𨰹𨯿鍳鑛躼閅閦鐦閠濶䊹𢙺𨛘𡉼𣸮䧟氜陻隖䅬隣𦻕懚隶磵𨫠隽双䦡𦲸𠉴𦐐𩂯𩃥𤫑𡤕𣌊霱虂霶䨏䔽䖅𤫩灵孁霛靜𩇕靗孊𩇫靟鐥僐𣂷𣂼鞉鞟鞱鞾韀韒韠𥑬韮琜𩐳響韵𩐝𧥺䫑頴頳顋顦㬎𧅵㵑𠘰𤅜"],["9140","𥜆飊颷飈飇䫿𦴧𡛓喰飡飦飬鍸餹𤨩䭲𩡗𩤅駵騌騻騐驘𥜥㛄𩂱𩯕髠髢𩬅髴䰎鬔鬭𨘀倴鬴𦦨㣃𣁽魐魀𩴾婅𡡣鮎𤉋鰂鯿鰌𩹨鷔𩾷𪆒𪆫𪃡𪄣𪇟鵾鶃𪄴鸎梈"],["91a1","鷄𢅛𪆓𪈠𡤻𪈳鴹𪂹𪊴麐麕麞麢䴴麪麯𤍤黁㭠㧥㴝伲㞾𨰫鼂鼈䮖鐤𦶢鼗鼖鼹嚟嚊齅馸𩂋韲葿齢齩竜龎爖䮾𤥵𤦻煷𤧸𤍈𤩑玞𨯚𡣺禟𨥾𨸶鍩鏳𨩄鋬鎁鏋𨥬𤒹爗㻫睲穃烐𤑳𤏸煾𡟯炣𡢾𣖙㻇𡢅𥐯𡟸㜢𡛻𡠹㛡𡝴𡣑𥽋㜣𡛀坛𤨥𡏾𡊨"],["9240","𡏆𡒶蔃𣚦蔃葕𤦔𧅥𣸱𥕜𣻻𧁒䓴𣛮𩦝𦼦柹㜳㰕㷧塬𡤢栐䁗𣜿𤃡𤂋𤄏𦰡哋嚞𦚱嚒𠿟𠮨𠸍鏆𨬓鎜仸儫㠙𤐶亼𠑥𠍿佋侊𥙑婨𠆫𠏋㦙𠌊𠐔㐵伩𠋀𨺳𠉵諚𠈌亘"],["92a1","働儍侢伃𤨎𣺊佂倮偬傁俌俥偘僼兙兛兝兞湶𣖕𣸹𣺿浲𡢄𣺉冨凃𠗠䓝𠒣𠒒𠒑赺𨪜𠜎剙劤𠡳勡鍮䙺熌𤎌𠰠𤦬𡃤槑𠸝瑹㻞璙琔瑖玘䮎𤪼𤂍叐㖄爏𤃉喴𠍅响𠯆圝鉝雴鍦埝垍坿㘾壋媙𨩆𡛺𡝯𡜐娬妸銏婾嫏娒𥥆𡧳𡡡𤊕㛵洅瑃娡𥺃"],["9340","媁𨯗𠐓鏠璌𡌃焅䥲鐈𨧻鎽㞠尞岞幞幈𡦖𡥼𣫮廍孏𡤃𡤄㜁𡢠㛝𡛾㛓脪𨩇𡶺𣑲𨦨弌弎𡤧𡞫婫𡜻孄蘔𧗽衠恾𢡠𢘫忛㺸𢖯𢖾𩂈𦽳懀𠀾𠁆𢘛憙憘恵𢲛𢴇𤛔𩅍"],["93a1","摱𤙥𢭪㨩𢬢𣑐𩣪𢹸挷𪑛撶挱揑𤧣𢵧护𢲡搻敫楲㯴𣂎𣊭𤦉𣊫唍𣋠𡣙𩐿曎𣊉𣆳㫠䆐𥖄𨬢𥖏𡛼𥕛𥐥磮𣄃𡠪𣈴㑤𣈏𣆂𤋉暎𦴤晫䮓昰𧡰𡷫晣𣋒𣋡昞𥡲㣑𣠺𣞼㮙𣞢𣏾瓐㮖枏𤘪梶栞㯄檾㡣𣟕𤒇樳橒櫉欅𡤒攑梘橌㯗橺歗𣿀𣲚鎠鋲𨯪𨫋"],["9440","銉𨀞𨧜鑧涥漋𤧬浧𣽿㶏渄𤀼娽渊塇洤硂焻𤌚𤉶烱牐犇犔𤞏𤜥兹𤪤𠗫瑺𣻸𣙟𤩊𤤗𥿡㼆㺱𤫟𨰣𣼵悧㻳瓌琼鎇琷䒟𦷪䕑疃㽣𤳙𤴆㽘畕癳𪗆㬙瑨𨫌𤦫𤦎㫻"],["94a1","㷍𤩎㻿𤧅𤣳釺圲鍂𨫣𡡤僟𥈡𥇧睸𣈲眎眏睻𤚗𣞁㩞𤣰琸璛㺿𤪺𤫇䃈𤪖𦆮錇𥖁砞碍碈磒珐祙𧝁𥛣䄎禛蒖禥樭𣻺稺秴䅮𡛦䄲鈵秱𠵌𤦌𠊙𣶺𡝮㖗啫㕰㚪𠇔𠰍竢婙𢛵𥪯𥪜娍𠉛磰娪𥯆竾䇹籝籭䈑𥮳𥺼𥺦糍𤧹𡞰粎籼粮檲緜縇緓罎𦉡"],["9540","𦅜𧭈綗𥺂䉪𦭵𠤖柖𠁎𣗏埄𦐒𦏸𤥢翝笧𠠬𥫩𥵃笌𥸎駦虅驣樜𣐿㧢𤧷𦖭騟𦖠蒀𧄧𦳑䓪脷䐂胆脉腂𦞴飃𦩂艢艥𦩑葓𦶧蘐𧈛媆䅿𡡀嬫𡢡嫤𡣘蚠蜨𣶏蠭𧐢娂"],["95a1","衮佅袇袿裦襥襍𥚃襔𧞅𧞄𨯵𨯙𨮜𨧹㺭蒣䛵䛏㟲訽訜𩑈彍鈫𤊄旔焩烄𡡅鵭貟賩𧷜妚矃姰䍮㛔踪躧𤰉輰轊䋴汘澻𢌡䢛潹溋𡟚鯩㚵𤤯邻邗啱䤆醻鐄𨩋䁢𨫼鐧𨰝𨰻蓥訫閙閧閗閖𨴴瑅㻂𤣿𤩂𤏪㻧𣈥随𨻧𨹦𨹥㻌𤧭𤩸𣿮琒瑫㻼靁𩂰"],["9640","桇䨝𩂓𥟟靝鍨𨦉𨰦𨬯𦎾銺嬑譩䤼珹𤈛鞛靱餸𠼦巁𨯅𤪲頟𩓚鋶𩗗釥䓀𨭐𤩧𨭤飜𨩅㼀鈪䤥萔餻饍𧬆㷽馛䭯馪驜𨭥𥣈檏騡嫾騯𩣱䮐𩥈馼䮽䮗鍽塲𡌂堢𤦸"],["96a1","𡓨硄𢜟𣶸棅㵽鑘㤧慐𢞁𢥫愇鱏鱓鱻鰵鰐魿鯏𩸭鮟𪇵𪃾鴡䲮𤄄鸘䲰鴌𪆴𪃭𪃳𩤯鶥蒽𦸒𦿟𦮂藼䔳𦶤𦺄𦷰萠藮𦸀𣟗𦁤秢𣖜𣙀䤭𤧞㵢鏛銾鍈𠊿碹鉷鑍俤㑀遤𥕝砽硔碶硋𡝗𣇉𤥁㚚佲濚濙瀞瀞吔𤆵垻壳垊鴖埗焴㒯𤆬燫𦱀𤾗嬨𡞵𨩉"],["9740","愌嫎娋䊼𤒈㜬䭻𨧼鎻鎸𡣖𠼝葲𦳀𡐓𤋺𢰦𤏁妔𣶷𦝁綨𦅛𦂤𤦹𤦋𨧺鋥珢㻩璴𨭣𡢟㻡𤪳櫘珳珻㻖𤨾𤪔𡟙𤩦𠎧𡐤𤧥瑈𤤖炥𤥶銄珦鍟𠓾錱𨫎𨨖鎆𨯧𥗕䤵𨪂煫"],["97a1","𤥃𠳿嚤𠘚𠯫𠲸唂秄𡟺緾𡛂𤩐𡡒䔮鐁㜊𨫀𤦭妰𡢿𡢃𧒄媡㛢𣵛㚰鉟婹𨪁𡡢鍴㳍𠪴䪖㦊僴㵩㵌𡎜煵䋻𨈘渏𩃤䓫浗𧹏灧沯㳖𣿭𣸭渂漌㵯𠏵畑㚼㓈䚀㻚䡱姄鉮䤾轁𨰜𦯀堒埈㛖𡑒烾𤍢𤩱𢿣𡊰𢎽梹楧𡎘𣓥𧯴𣛟𨪃𣟖𣏺𤲟樚𣚭𦲷萾䓟䓎"],["9840","𦴦𦵑𦲂𦿞漗𧄉茽𡜺菭𦲀𧁓𡟛妉媂𡞳婡婱𡤅𤇼㜭姯𡜼㛇熎鎐暚𤊥婮娫𤊓樫𣻹𧜶𤑛𤋊焝𤉙𨧡侰𦴨峂𤓎𧹍𤎽樌𤉖𡌄炦焳𤏩㶥泟勇𤩏繥姫崯㷳彜𤩝𡟟綤萦"],["98a1","咅𣫺𣌀𠈔坾𠣕𠘙㿥𡾞𪊶瀃𩅛嵰玏糓𨩙𩐠俈翧狍猐𧫴猸猹𥛶獁獈㺩𧬘遬燵𤣲珡臶㻊県㻑沢国琙琞琟㻢㻰㻴㻺瓓㼎㽓畂畭畲疍㽼痈痜㿀癍㿗癴㿜発𤽜熈嘣覀塩䀝睃䀹条䁅㗛瞘䁪䁯属瞾矋売砘点砜䂨砹硇硑硦葈𥔵礳栃礲䄃"],["9940","䄉禑禙辻稆込䅧窑䆲窼艹䇄竏竛䇏両筢筬筻簒簛䉠䉺类粜䊌粸䊔糭输烀𠳏総緔緐緽羮羴犟䎗耠耥笹耮耱联㷌垴炠肷胩䏭脌猪脎脒畠脔䐁㬹腖腙腚"],["99a1","䐓堺腼膄䐥膓䐭膥埯臁臤艔䒏芦艶苊苘苿䒰荗险榊萅烵葤惣蒈䔄蒾蓡蓸蔐蔸蕒䔻蕯蕰藠䕷虲蚒蚲蛯际螋䘆䘗袮裿褤襇覑𧥧訩訸誔誴豑賔賲贜䞘塟跃䟭仮踺嗘坔蹱嗵躰䠷軎転軤軭軲辷迁迊迌逳駄䢭飠鈓䤞鈨鉘鉫銱銮銿"],["9a40","鋣鋫鋳鋴鋽鍃鎄鎭䥅䥑麿鐗匁鐝鐭鐾䥪鑔鑹锭関䦧间阳䧥枠䨤靀䨵鞲韂噔䫤惨颹䬙飱塄餎餙冴餜餷饂饝饢䭰駅䮝騼鬏窃魩鮁鯝鯱鯴䱭鰠㝯𡯂鵉鰺"],["9aa1","黾噐鶓鶽鷀鷼银辶鹻麬麱麽黆铜黢黱黸竈齄𠂔𠊷𠎠椚铃妬𠓗塀铁㞹𠗕𠘕𠙶𡚺块煳𠫂𠫍𠮿呪吆𠯋咞𠯻𠰻𠱓𠱥𠱼惧𠲍噺𠲵𠳝𠳭𠵯𠶲𠷈楕鰯螥𠸄𠸎𠻗𠾐𠼭𠹳尠𠾼帋𡁜𡁏𡁶朞𡁻𡂈𡂖㙇𡂿𡃓𡄯𡄻卤蒭𡋣𡍵𡌶讁𡕷𡘙𡟃𡟇乸炻𡠭𡥪"],["9b40","𡨭𡩅𡰪𡱰𡲬𡻈拃𡻕𡼕熘桕𢁅槩㛈𢉼𢏗𢏺𢜪𢡱𢥏苽𢥧𢦓𢫕覥𢫨辠𢬎鞸𢬿顇骽𢱌"],["9b62","𢲈𢲷𥯨𢴈𢴒𢶷𢶕𢹂𢽴𢿌𣀳𣁦𣌟𣏞徱晈暿𧩹𣕧𣗳爁𤦺矗𣘚𣜖纇𠍆墵朎"],["9ba1","椘𣪧𧙗𥿢𣸑𣺹𧗾𢂚䣐䪸𤄙𨪚𤋮𤌍𤀻𤌴𤎖𤩅𠗊凒𠘑妟𡺨㮾𣳿𤐄𤓖垈𤙴㦛𤜯𨗨𩧉㝢𢇃譞𨭎駖𤠒𤣻𤨕爉𤫀𠱸奥𤺥𤾆𠝹軚𥀬劏圿煱𥊙𥐙𣽊𤪧喼𥑆𥑮𦭒釔㑳𥔿𧘲𥕞䜘𥕢𥕦𥟇𤤿𥡝偦㓻𣏌惞𥤃䝼𨥈𥪮𥮉𥰆𡶐垡煑澶𦄂𧰒遖𦆲𤾚譢𦐂𦑊"],["9c40","嵛𦯷輶𦒄𡤜諪𤧶𦒈𣿯𦔒䯀𦖿𦚵𢜛鑥𥟡憕娧晉侻嚹𤔡𦛼乪𤤴陖涏𦲽㘘襷𦞙𦡮𦐑𦡞營𦣇筂𩃀𠨑𦤦鄄𦤹穅鷰𦧺騦𦨭㙟𦑩𠀡禃𦨴𦭛崬𣔙菏𦮝䛐𦲤画补𦶮墶"],["9ca1","㜜𢖍𧁋𧇍㱔𧊀𧊅銁𢅺𧊋錰𧋦𤧐氹钟𧑐𠻸蠧裵𢤦𨑳𡞱溸𤨪𡠠㦤㚹尐秣䔿暶𩲭𩢤襃𧟌𧡘囖䃟𡘊㦡𣜯𨃨𡏅熭荦𧧝𩆨婧䲷𧂯𨦫𧧽𧨊𧬋𧵦𤅺筃祾𨀉澵𪋟樃𨌘厢𦸇鎿栶靝𨅯𨀣𦦵𡏭𣈯𨁈嶅𨰰𨂃圕頣𨥉嶫𤦈斾槕叒𤪥𣾁㰑朶𨂐𨃴𨄮𡾡𨅏"],["9d40","𨆉𨆯𨈚𨌆𨌯𨎊㗊𨑨𨚪䣺揦𨥖砈鉕𨦸䏲𨧧䏟𨧨𨭆𨯔姸𨰉輋𨿅𩃬筑𩄐𩄼㷷𩅞𤫊运犏嚋𩓧𩗩𩖰𩖸𩜲𩣑𩥉𩥪𩧃𩨨𩬎𩵚𩶛纟𩻸𩼣䲤镇𪊓熢𪋿䶑递𪗋䶜𠲜达嗁"],["9da1","辺𢒰边𤪓䔉繿潖檱仪㓤𨬬𧢝㜺躀𡟵𨀤𨭬𨮙𧨾𦚯㷫𧙕𣲷𥘵𥥖亚𥺁𦉘嚿𠹭踎孭𣺈𤲞揞拐𡟶𡡻攰嘭𥱊吚𥌑㷆𩶘䱽嘢嘞罉𥻘奵𣵀蝰东𠿪𠵉𣚺脗鵞贘瘻鱅癎瞹鍅吲腈苷嘥脲萘肽嗪祢噃吖𠺝㗎嘅嗱曱𨋢㘭甴嗰喺咗啲𠱁𠲖廐𥅈𠹶𢱢"],["9e40","𠺢麫絚嗞𡁵抝靭咔賍燶酶揼掹揾啩𢭃鱲𢺳冚㓟𠶧冧呍唞唓癦踭𦢊疱肶蠄螆裇膶萜𡃁䓬猄𤜆宐茋𦢓噻𢛴𧴯𤆣𧵳𦻐𧊶酰𡇙鈈𣳼𪚩𠺬𠻹牦𡲢䝎𤿂𧿹𠿫䃺"],["9ea1","鱝攟𢶠䣳𤟠𩵼𠿬𠸊恢𧖣𠿭"],["9ead","𦁈𡆇熣纎鵐业丄㕷嬍沲卧㚬㧜卽㚥𤘘墚𤭮舭呋垪𥪕𠥹"],["9ec5","㩒𢑥獴𩺬䴉鯭𣳾𩼰䱛𤾩𩖞𩿞葜𣶶𧊲𦞳𣜠挮紥𣻷𣸬㨪逈勌㹴㙺䗩𠒎癀嫰𠺶硺𧼮墧䂿噼鮋嵴癔𪐴麅䳡痹㟻愙𣃚𤏲"],["9ef5","噝𡊩垧𤥣𩸆刴𧂮㖭汊鵼"],["9f40","籖鬹埞𡝬屓擓𩓐𦌵𧅤蚭𠴨𦴢𤫢𠵱"],["9f4f","凾𡼏嶎霃𡷑麁遌笟鬂峑箣扨挵髿篏鬪籾鬮籂粆鰕篼鬉鼗鰛𤤾齚啳寃俽麘俲剠㸆勑坧偖妷帒韈鶫轜呩鞴饀鞺匬愰"],["9fa1","椬叚鰊鴂䰻陁榀傦畆𡝭駚剳"],["9fae","酙隁酜"],["9fb2","酑𨺗捿𦴣櫊嘑醎畺抅𠏼獏籰𥰡𣳽"],["9fc1","𤤙盖鮝个𠳔莾衂"],["9fc9","届槀僭坺刟巵从氱𠇲伹咜哚劚趂㗾弌㗳"],["9fdb","歒酼龥鮗頮颴骺麨麄煺笔"],["9fe7","毺蠘罸"],["9feb","嘠𪙊蹷齓"],["9ff0","跔蹏鸜踁抂𨍽踨蹵竓𤩷稾磘泪詧瘇"],["a040","𨩚鼦泎蟖痃𪊲硓咢贌狢獱謭猂瓱賫𤪻蘯徺袠䒷"],["a055","𡠻𦸅"],["a058","詾𢔛"],["a05b","惽癧髗鵄鍮鮏蟵"],["a063","蠏賷猬霡鮰㗖犲䰇籑饊𦅙慙䰄麖慽"],["a073","坟慯抦戹拎㩜懢厪𣏵捤栂㗒"],["a0a1","嵗𨯂迚𨸹"],["a0a6","僙𡵆礆匲阸𠼻䁥"],["a0ae","矾"],["a0b0","糂𥼚糚稭聦聣絍甅瓲覔舚朌聢𧒆聛瓰脃眤覉𦟌畓𦻑螩蟎臈螌詉貭譃眫瓸蓚㘵榲趦"],["a0d4","覩瑨涹蟁𤀑瓧㷛煶悤憜㳑煢恷"],["a0e2","罱𨬭牐惩䭾删㰘𣳇𥻗𧙖𥔱𡥄𡋾𩤃𦷜𧂭峁𦆭𨨏𣙷𠃮𦡆𤼎䕢嬟𦍌齐麦𦉫"],["a3c0","␀",31,"␡"],["c6a1","①",9,"⑴",9,"ⅰ",9,"丶丿亅亠冂冖冫勹匸卩厶夊宀巛⼳广廴彐彡攴无疒癶辵隶¨ˆヽヾゝゞ〃仝々〆〇ー［］✽ぁ",23],["c740","す",58,"ァアィイ"],["c7a1","ゥ",81,"А",5,"ЁЖ",4],["c840","Л",26,"ёж",25,"⇧↸↹㇏𠃌乚𠂊刂䒑"],["c8a1","龰冈龱𧘇"],["c8cd","￢￤＇＂㈱№℡゛゜⺀⺄⺆⺇⺈⺊⺌⺍⺕⺜⺝⺥⺧⺪⺬⺮⺶⺼⺾⻆⻊⻌⻍⻏⻖⻗⻞⻣"],["c8f5","ʃɐɛɔɵœøŋʊɪ"],["f9fe","￭"],["fa40","𠕇鋛𠗟𣿅蕌䊵珯况㙉𤥂𨧤鍄𡧛苮𣳈砼杄拟𤤳𨦪𠊠𦮳𡌅侫𢓭倈𦴩𧪄𣘀𤪱𢔓倩𠍾徤𠎀𠍇滛𠐟偽儁㑺儎顬㝃萖𤦤𠒇兠𣎴兪𠯿𢃼𠋥𢔰𠖎𣈳𡦃宂蝽𠖳𣲙冲冸"],["faa1","鴴凉减凑㳜凓𤪦决凢卂凭菍椾𣜭彻刋刦刼劵剗劔効勅簕蕂勠蘍𦬓包𨫞啉滙𣾀𠥔𣿬匳卄𠯢泋𡜦栛珕恊㺪㣌𡛨燝䒢卭却𨚫卾卿𡖖𡘓矦厓𨪛厠厫厮玧𥝲㽙玜叁叅汉义埾叙㪫𠮏叠𣿫𢶣叶𠱷吓灹唫晗浛呭𦭓𠵴啝咏咤䞦𡜍𠻝㶴𠵍"],["fb40","𨦼𢚘啇䳭启琗喆喩嘅𡣗𤀺䕒𤐵暳𡂴嘷曍𣊊暤暭噍噏磱囱鞇叾圀囯园𨭦㘣𡉏坆𤆥汮炋坂㚱𦱾埦𡐖堃𡑔𤍣堦𤯵塜墪㕡壠壜𡈼壻寿坃𪅐𤉸鏓㖡够梦㛃湙"],["fba1","𡘾娤啓𡚒蔅姉𠵎𦲁𦴪𡟜姙𡟻𡞲𦶦浱𡠨𡛕姹𦹅媫婣㛦𤦩婷㜈媖瑥嫓𦾡𢕔㶅𡤑㜲𡚸広勐孶斈孼𧨎䀄䡝𠈄寕慠𡨴𥧌𠖥寳宝䴐尅𡭄尓珎尔𡲥𦬨屉䣝岅峩峯嶋𡷹𡸷崐崘嵆𡺤岺巗苼㠭𤤁𢁉𢅳芇㠶㯂帮檊幵幺𤒼𠳓厦亷廐厨𡝱帉廴𨒂"],["fc40","廹廻㢠廼栾鐛弍𠇁弢㫞䢮𡌺强𦢈𢏐彘𢑱彣鞽𦹮彲鍀𨨶徧嶶㵟𥉐𡽪𧃸𢙨釖𠊞𨨩怱暅𡡷㥣㷇㘹垐𢞴祱㹀悞悤悳𤦂𤦏𧩓璤僡媠慤萤慂慈𦻒憁凴𠙖憇宪𣾷"],["fca1","𢡟懓𨮝𩥝懐㤲𢦀𢣁怣慜攞掋𠄘担𡝰拕𢸍捬𤧟㨗搸揸𡎎𡟼撐澊𢸶頔𤂌𥜝擡擥鑻㩦携㩗敍漖𤨨𤨣斅敭敟𣁾斵𤥀䬷旑䃘𡠩无旣忟𣐀昘𣇷𣇸晄𣆤𣆥晋𠹵晧𥇦晳晴𡸽𣈱𨗴𣇈𥌓矅𢣷馤朂𤎜𤨡㬫槺𣟂杞杧杢𤇍𩃭柗䓩栢湐鈼栁𣏦𦶠桝"],["fd40","𣑯槡樋𨫟楳棃𣗍椁椀㴲㨁𣘼㮀枬楡𨩊䋼椶榘㮡𠏉荣傐槹𣙙𢄪橅𣜃檝㯳枱櫈𩆜㰍欝𠤣惞欵歴𢟍溵𣫛𠎵𡥘㝀吡𣭚毡𣻼毜氷𢒋𤣱𦭑汚舦汹𣶼䓅𣶽𤆤𤤌𤤀"],["fda1","𣳉㛥㳫𠴲鮃𣇹𢒑羏样𦴥𦶡𦷫涖浜湼漄𤥿𤂅𦹲蔳𦽴凇沜渝萮𨬡港𣸯瑓𣾂秌湏媑𣁋濸㜍澝𣸰滺𡒗𤀽䕕鏰潄潜㵎潴𩅰㴻澟𤅄濓𤂑𤅕𤀹𣿰𣾴𤄿凟𤅖𤅗𤅀𦇝灋灾炧炁烌烕烖烟䄄㷨熴熖𤉷焫煅媈煊煮岜𤍥煏鍢𤋁焬𤑚𤨧𤨢熺𨯨炽爎"],["fe40","鑂爕夑鑃爤鍁𥘅爮牀𤥴梽牕牗㹕𣁄栍漽犂猪猫𤠣𨠫䣭𨠄猨献珏玪𠰺𦨮珉瑉𤇢𡛧𤨤昣㛅𤦷𤦍𤧻珷琕椃𤨦琹𠗃㻗瑜𢢭瑠𨺲瑇珤瑶莹瑬㜰瑴鏱樬璂䥓𤪌"],["fea1","𤅟𤩹𨮏孆𨰃𡢞瓈𡦈甎瓩甞𨻙𡩋寗𨺬鎅畍畊畧畮𤾂㼄𤴓疎瑝疞疴瘂瘬癑癏癯癶𦏵皐臯㟸𦤑𦤎皡皥皷盌𦾟葢𥂝𥅽𡸜眞眦着撯𥈠睘𣊬瞯𨥤𨥨𡛁矴砉𡍶𤨒棊碯磇磓隥礮𥗠磗礴碱𧘌辸袄𨬫𦂃𢘜禆褀椂禀𥡗禝𧬹礼禩渪𧄦㺨秆𩄍秔"]]
-
-/***/ }),
-/* 718 */
-/***/ (function(module, exports) {
-
-module.exports = [["0","\u0000",127],["8141","갂갃갅갆갋",4,"갘갞갟갡갢갣갥",6,"갮갲갳갴"],["8161","갵갶갷갺갻갽갾갿걁",9,"걌걎",5,"걕"],["8181","걖걗걙걚걛걝",18,"걲걳걵걶걹걻",4,"겂겇겈겍겎겏겑겒겓겕",6,"겞겢",5,"겫겭겮겱",6,"겺겾겿곀곂곃곅곆곇곉곊곋곍",7,"곖곘",7,"곢곣곥곦곩곫곭곮곲곴곷",4,"곾곿괁괂괃괅괇",4,"괎괐괒괓"],["8241","괔괕괖괗괙괚괛괝괞괟괡",7,"괪괫괮",5],["8261","괶괷괹괺괻괽",6,"굆굈굊",5,"굑굒굓굕굖굗"],["8281","굙",7,"굢굤",7,"굮굯굱굲굷굸굹굺굾궀궃",4,"궊궋궍궎궏궑",10,"궞",5,"궥",17,"궸",7,"귂귃귅귆귇귉",6,"귒귔",7,"귝귞귟귡귢귣귥",18],["8341","귺귻귽귾긂",5,"긊긌긎",5,"긕",7],["8361","긝",18,"긲긳긵긶긹긻긼"],["8381","긽긾긿깂깄깇깈깉깋깏깑깒깓깕깗",4,"깞깢깣깤깦깧깪깫깭깮깯깱",6,"깺깾",5,"꺆",5,"꺍",46,"꺿껁껂껃껅",6,"껎껒",5,"껚껛껝",8],["8441","껦껧껩껪껬껮",5,"껵껶껷껹껺껻껽",8],["8461","꼆꼉꼊꼋꼌꼎꼏꼑",18],["8481","꼤",7,"꼮꼯꼱꼳꼵",6,"꼾꽀꽄꽅꽆꽇꽊",5,"꽑",10,"꽞",5,"꽦",18,"꽺",5,"꾁꾂꾃꾅꾆꾇꾉",6,"꾒꾓꾔꾖",5,"꾝",26,"꾺꾻꾽꾾"],["8541","꾿꿁",5,"꿊꿌꿏",4,"꿕",6,"꿝",4],["8561","꿢",5,"꿪",5,"꿲꿳꿵꿶꿷꿹",6,"뀂뀃"],["8581","뀅",6,"뀍뀎뀏뀑뀒뀓뀕",6,"뀞",9,"뀩",26,"끆끇끉끋끍끏끐끑끒끖끘끚끛끜끞",29,"끾끿낁낂낃낅",6,"낎낐낒",5,"낛낝낞낣낤"],["8641","낥낦낧낪낰낲낶낷낹낺낻낽",6,"냆냊",5,"냒"],["8661","냓냕냖냗냙",6,"냡냢냣냤냦",10],["8681","냱",22,"넊넍넎넏넑넔넕넖넗넚넞",4,"넦넧넩넪넫넭",6,"넶넺",5,"녂녃녅녆녇녉",6,"녒녓녖녗녙녚녛녝녞녟녡",22,"녺녻녽녾녿놁놃",4,"놊놌놎놏놐놑놕놖놗놙놚놛놝"],["8741","놞",9,"놩",15],["8761","놹",18,"뇍뇎뇏뇑뇒뇓뇕"],["8781","뇖",5,"뇞뇠",7,"뇪뇫뇭뇮뇯뇱",7,"뇺뇼뇾",5,"눆눇눉눊눍",6,"눖눘눚",5,"눡",18,"눵",6,"눽",26,"뉙뉚뉛뉝뉞뉟뉡",6,"뉪",4],["8841","뉯",4,"뉶",5,"뉽",6,"늆늇늈늊",4],["8861","늏늒늓늕늖늗늛",4,"늢늤늧늨늩늫늭늮늯늱늲늳늵늶늷"],["8881","늸",15,"닊닋닍닎닏닑닓",4,"닚닜닞닟닠닡닣닧닩닪닰닱닲닶닼닽닾댂댃댅댆댇댉",6,"댒댖",5,"댝",54,"덗덙덚덝덠덡덢덣"],["8941","덦덨덪덬덭덯덲덳덵덶덷덹",6,"뎂뎆",5,"뎍"],["8961","뎎뎏뎑뎒뎓뎕",10,"뎢",5,"뎩뎪뎫뎭"],["8981","뎮",21,"돆돇돉돊돍돏돑돒돓돖돘돚돜돞돟돡돢돣돥돦돧돩",18,"돽",18,"됑",6,"됙됚됛됝됞됟됡",6,"됪됬",7,"됵",15],["8a41","둅",10,"둒둓둕둖둗둙",6,"둢둤둦"],["8a61","둧",4,"둭",18,"뒁뒂"],["8a81","뒃",4,"뒉",19,"뒞",5,"뒥뒦뒧뒩뒪뒫뒭",7,"뒶뒸뒺",5,"듁듂듃듅듆듇듉",6,"듑듒듓듔듖",5,"듞듟듡듢듥듧",4,"듮듰듲",5,"듹",26,"딖딗딙딚딝"],["8b41","딞",5,"딦딫",4,"딲딳딵딶딷딹",6,"땂땆"],["8b61","땇땈땉땊땎땏땑땒땓땕",6,"땞땢",8],["8b81","땫",52,"떢떣떥떦떧떩떬떭떮떯떲떶",4,"떾떿뗁뗂뗃뗅",6,"뗎뗒",5,"뗙",18,"뗭",18],["8c41","똀",15,"똒똓똕똖똗똙",4],["8c61","똞",6,"똦",5,"똭",6,"똵",5],["8c81","똻",12,"뙉",26,"뙥뙦뙧뙩",50,"뚞뚟뚡뚢뚣뚥",5,"뚭뚮뚯뚰뚲",16],["8d41","뛃",16,"뛕",8],["8d61","뛞",17,"뛱뛲뛳뛵뛶뛷뛹뛺"],["8d81","뛻",4,"뜂뜃뜄뜆",33,"뜪뜫뜭뜮뜱",6,"뜺뜼",7,"띅띆띇띉띊띋띍",6,"띖",9,"띡띢띣띥띦띧띩",6,"띲띴띶",5,"띾띿랁랂랃랅",6,"랎랓랔랕랚랛랝랞"],["8e41","랟랡",6,"랪랮",5,"랶랷랹",8],["8e61","럂",4,"럈럊",19],["8e81","럞",13,"럮럯럱럲럳럵",6,"럾렂",4,"렊렋렍렎렏렑",6,"렚렜렞",5,"렦렧렩렪렫렭",6,"렶렺",5,"롁롂롃롅",11,"롒롔",7,"롞롟롡롢롣롥",6,"롮롰롲",5,"롹롺롻롽",7],["8f41","뢅",7,"뢎",17],["8f61","뢠",7,"뢩",6,"뢱뢲뢳뢵뢶뢷뢹",4],["8f81","뢾뢿룂룄룆",5,"룍룎룏룑룒룓룕",7,"룞룠룢",5,"룪룫룭룮룯룱",6,"룺룼룾",5,"뤅",18,"뤙",6,"뤡",26,"뤾뤿륁륂륃륅",6,"륍륎륐륒",5],["9041","륚륛륝륞륟륡",6,"륪륬륮",5,"륶륷륹륺륻륽"],["9061","륾",5,"릆릈릋릌릏",15],["9081","릟",12,"릮릯릱릲릳릵",6,"릾맀맂",5,"맊맋맍맓",4,"맚맜맟맠맢맦맧맩맪맫맭",6,"맶맻",4,"먂",5,"먉",11,"먖",33,"먺먻먽먾먿멁멃멄멅멆"],["9141","멇멊멌멏멐멑멒멖멗멙멚멛멝",6,"멦멪",5],["9161","멲멳멵멶멷멹",9,"몆몈몉몊몋몍",5],["9181","몓",20,"몪몭몮몯몱몳",4,"몺몼몾",5,"뫅뫆뫇뫉",14,"뫚",33,"뫽뫾뫿묁묂묃묅",7,"묎묐묒",5,"묙묚묛묝묞묟묡",6],["9241","묨묪묬",7,"묷묹묺묿",4,"뭆뭈뭊뭋뭌뭎뭑뭒"],["9261","뭓뭕뭖뭗뭙",7,"뭢뭤",7,"뭭",4],["9281","뭲",21,"뮉뮊뮋뮍뮎뮏뮑",18,"뮥뮦뮧뮩뮪뮫뮭",6,"뮵뮶뮸",7,"믁믂믃믅믆믇믉",6,"믑믒믔",35,"믺믻믽믾밁"],["9341","밃",4,"밊밎밐밒밓밙밚밠밡밢밣밦밨밪밫밬밮밯밲밳밵"],["9361","밶밷밹",6,"뱂뱆뱇뱈뱊뱋뱎뱏뱑",8],["9381","뱚뱛뱜뱞",37,"벆벇벉벊벍벏",4,"벖벘벛",4,"벢벣벥벦벩",6,"벲벶",5,"벾벿볁볂볃볅",7,"볎볒볓볔볖볗볙볚볛볝",22,"볷볹볺볻볽"],["9441","볾",5,"봆봈봊",5,"봑봒봓봕",8],["9461","봞",5,"봥",6,"봭",12],["9481","봺",5,"뵁",6,"뵊뵋뵍뵎뵏뵑",6,"뵚",9,"뵥뵦뵧뵩",22,"붂붃붅붆붋",4,"붒붔붖붗붘붛붝",6,"붥",10,"붱",6,"붹",24],["9541","뷒뷓뷖뷗뷙뷚뷛뷝",11,"뷪",5,"뷱"],["9561","뷲뷳뷵뷶뷷뷹",6,"븁븂븄븆",5,"븎븏븑븒븓"],["9581","븕",6,"븞븠",35,"빆빇빉빊빋빍빏",4,"빖빘빜빝빞빟빢빣빥빦빧빩빫",4,"빲빶",4,"빾빿뺁뺂뺃뺅",6,"뺎뺒",5,"뺚",13,"뺩",14],["9641","뺸",23,"뻒뻓"],["9661","뻕뻖뻙",6,"뻡뻢뻦",5,"뻭",8],["9681","뻶",10,"뼂",5,"뼊",13,"뼚뼞",33,"뽂뽃뽅뽆뽇뽉",6,"뽒뽓뽔뽖",44],["9741","뾃",16,"뾕",8],["9761","뾞",17,"뾱",7],["9781","뾹",11,"뿆",5,"뿎뿏뿑뿒뿓뿕",6,"뿝뿞뿠뿢",89,"쀽쀾쀿"],["9841","쁀",16,"쁒",5,"쁙쁚쁛"],["9861","쁝쁞쁟쁡",6,"쁪",15],["9881","쁺",21,"삒삓삕삖삗삙",6,"삢삤삦",5,"삮삱삲삷",4,"삾샂샃샄샆샇샊샋샍샎샏샑",6,"샚샞",5,"샦샧샩샪샫샭",6,"샶샸샺",5,"섁섂섃섅섆섇섉",6,"섑섒섓섔섖",5,"섡섢섥섨섩섪섫섮"],["9941","섲섳섴섵섷섺섻섽섾섿셁",6,"셊셎",5,"셖셗"],["9961","셙셚셛셝",6,"셦셪",5,"셱셲셳셵셶셷셹셺셻"],["9981","셼",8,"솆",5,"솏솑솒솓솕솗",4,"솞솠솢솣솤솦솧솪솫솭솮솯솱",11,"솾",5,"쇅쇆쇇쇉쇊쇋쇍",6,"쇕쇖쇙",6,"쇡쇢쇣쇥쇦쇧쇩",6,"쇲쇴",7,"쇾쇿숁숂숃숅",6,"숎숐숒",5,"숚숛숝숞숡숢숣"],["9a41","숤숥숦숧숪숬숮숰숳숵",16],["9a61","쉆쉇쉉",6,"쉒쉓쉕쉖쉗쉙",6,"쉡쉢쉣쉤쉦"],["9a81","쉧",4,"쉮쉯쉱쉲쉳쉵",6,"쉾슀슂",5,"슊",5,"슑",6,"슙슚슜슞",5,"슦슧슩슪슫슮",5,"슶슸슺",33,"싞싟싡싢싥",5,"싮싰싲싳싴싵싷싺싽싾싿쌁",6,"쌊쌋쌎쌏"],["9b41","쌐쌑쌒쌖쌗쌙쌚쌛쌝",6,"쌦쌧쌪",8],["9b61","쌳",17,"썆",7],["9b81","썎",25,"썪썫썭썮썯썱썳",4,"썺썻썾",5,"쎅쎆쎇쎉쎊쎋쎍",50,"쏁",22,"쏚"],["9c41","쏛쏝쏞쏡쏣",4,"쏪쏫쏬쏮",5,"쏶쏷쏹",5],["9c61","쏿",8,"쐉",6,"쐑",9],["9c81","쐛",8,"쐥",6,"쐭쐮쐯쐱쐲쐳쐵",6,"쐾",9,"쑉",26,"쑦쑧쑩쑪쑫쑭",6,"쑶쑷쑸쑺",5,"쒁",18,"쒕",6,"쒝",12],["9d41","쒪",13,"쒹쒺쒻쒽",8],["9d61","쓆",25],["9d81","쓠",8,"쓪",5,"쓲쓳쓵쓶쓷쓹쓻쓼쓽쓾씂",9,"씍씎씏씑씒씓씕",6,"씝",10,"씪씫씭씮씯씱",6,"씺씼씾",5,"앆앇앋앏앐앑앒앖앚앛앜앟앢앣앥앦앧앩",6,"앲앶",5,"앾앿얁얂얃얅얆얈얉얊얋얎얐얒얓얔"],["9e41","얖얙얚얛얝얞얟얡",7,"얪",9,"얶"],["9e61","얷얺얿",4,"엋엍엏엒엓엕엖엗엙",6,"엢엤엦엧"],["9e81","엨엩엪엫엯엱엲엳엵엸엹엺엻옂옃옄옉옊옋옍옎옏옑",6,"옚옝",6,"옦옧옩옪옫옯옱옲옶옸옺옼옽옾옿왂왃왅왆왇왉",6,"왒왖",5,"왞왟왡",10,"왭왮왰왲",5,"왺왻왽왾왿욁",6,"욊욌욎",5,"욖욗욙욚욛욝",6,"욦"],["9f41","욨욪",5,"욲욳욵욶욷욻",4,"웂웄웆",5,"웎"],["9f61","웏웑웒웓웕",6,"웞웟웢",5,"웪웫웭웮웯웱웲"],["9f81","웳",4,"웺웻웼웾",5,"윆윇윉윊윋윍",6,"윖윘윚",5,"윢윣윥윦윧윩",6,"윲윴윶윸윹윺윻윾윿읁읂읃읅",4,"읋읎읐읙읚읛읝읞읟읡",6,"읩읪읬",7,"읶읷읹읺읻읿잀잁잂잆잋잌잍잏잒잓잕잙잛",4,"잢잧",4,"잮잯잱잲잳잵잶잷"],["a041","잸잹잺잻잾쟂",5,"쟊쟋쟍쟏쟑",6,"쟙쟚쟛쟜"],["a061","쟞",5,"쟥쟦쟧쟩쟪쟫쟭",13],["a081","쟻",4,"젂젃젅젆젇젉젋",4,"젒젔젗",4,"젞젟젡젢젣젥",6,"젮젰젲",5,"젹젺젻젽젾젿졁",6,"졊졋졎",5,"졕",26,"졲졳졵졶졷졹졻",4,"좂좄좈좉좊좎",5,"좕",7,"좞좠좢좣좤"],["a141","좥좦좧좩",18,"좾좿죀죁"],["a161","죂죃죅죆죇죉죊죋죍",6,"죖죘죚",5,"죢죣죥"],["a181","죦",14,"죶",5,"죾죿줁줂줃줇",4,"줎　、。·‥…¨〃­―∥＼∼‘’“”〔〕〈",9,"±×÷≠≤≥∞∴°′″℃Å￠￡￥♂♀∠⊥⌒∂∇≡≒§※☆★○●◎◇◆□■△▲▽▼→←↑↓↔〓≪≫√∽∝∵∫∬∈∋⊆⊇⊂⊃∪∩∧∨￢"],["a241","줐줒",5,"줙",18],["a261","줭",6,"줵",18],["a281","쥈",7,"쥒쥓쥕쥖쥗쥙",6,"쥢쥤",7,"쥭쥮쥯⇒⇔∀∃´～ˇ˘˝˚˙¸˛¡¿ː∮∑∏¤℉‰◁◀▷▶♤♠♡♥♧♣⊙◈▣◐◑▒▤▥▨▧▦▩♨☏☎☜☞¶†‡↕↗↙↖↘♭♩♪♬㉿㈜№㏇™㏂㏘℡€®"],["a341","쥱쥲쥳쥵",6,"쥽",10,"즊즋즍즎즏"],["a361","즑",6,"즚즜즞",16],["a381","즯",16,"짂짃짅짆짉짋",4,"짒짔짗짘짛！",58,"￦］",32,"￣"],["a441","짞짟짡짣짥짦짨짩짪짫짮짲",5,"짺짻짽짾짿쨁쨂쨃쨄"],["a461","쨅쨆쨇쨊쨎",5,"쨕쨖쨗쨙",12],["a481","쨦쨧쨨쨪",28,"ㄱ",93],["a541","쩇",4,"쩎쩏쩑쩒쩓쩕",6,"쩞쩢",5,"쩩쩪"],["a561","쩫",17,"쩾",5,"쪅쪆"],["a581","쪇",16,"쪙",14,"ⅰ",9],["a5b0","Ⅰ",9],["a5c1","Α",16,"Σ",6],["a5e1","α",16,"σ",6],["a641","쪨",19,"쪾쪿쫁쫂쫃쫅"],["a661","쫆",5,"쫎쫐쫒쫔쫕쫖쫗쫚",5,"쫡",6],["a681","쫨쫩쫪쫫쫭",6,"쫵",18,"쬉쬊─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂┒┑┚┙┖┕┎┍┞┟┡┢┦┧┩┪┭┮┱┲┵┶┹┺┽┾╀╁╃",7],["a741","쬋",4,"쬑쬒쬓쬕쬖쬗쬙",6,"쬢",7],["a761","쬪",22,"쭂쭃쭄"],["a781","쭅쭆쭇쭊쭋쭍쭎쭏쭑",6,"쭚쭛쭜쭞",5,"쭥",7,"㎕㎖㎗ℓ㎘㏄㎣㎤㎥㎦㎙",9,"㏊㎍㎎㎏㏏㎈㎉㏈㎧㎨㎰",9,"㎀",4,"㎺",5,"㎐",4,"Ω㏀㏁㎊㎋㎌㏖㏅㎭㎮㎯㏛㎩㎪㎫㎬㏝㏐㏓㏃㏉㏜㏆"],["a841","쭭",10,"쭺",14],["a861","쮉",18,"쮝",6],["a881","쮤",19,"쮹",11,"ÆЪĦ"],["a8a6","IJ"],["a8a8","ĿŁØŒºÞŦŊ"],["a8b1","㉠",27,"ⓐ",25,"①",14,"½⅓⅔¼¾⅛⅜⅝⅞"],["a941","쯅",14,"쯕",10],["a961","쯠쯡쯢쯣쯥쯦쯨쯪",18],["a981","쯽",14,"찎찏찑찒찓찕",6,"찞찟찠찣찤æđðħıijĸŀłøœßþŧŋʼn㈀",27,"⒜",25,"⑴",14,"¹²³⁴ⁿ₁₂₃₄"],["aa41","찥찦찪찫찭찯찱",6,"찺찿",4,"챆챇챉챊챋챍챎"],["aa61","챏",4,"챖챚",5,"챡챢챣챥챧챩",6,"챱챲"],["aa81","챳챴챶",29,"ぁ",82],["ab41","첔첕첖첗첚첛첝첞첟첡",6,"첪첮",5,"첶첷첹"],["ab61","첺첻첽",6,"쳆쳈쳊",5,"쳑쳒쳓쳕",5],["ab81","쳛",8,"쳥",6,"쳭쳮쳯쳱",12,"ァ",85],["ac41","쳾쳿촀촂",5,"촊촋촍촎촏촑",6,"촚촜촞촟촠"],["ac61","촡촢촣촥촦촧촩촪촫촭",11,"촺",4],["ac81","촿",28,"쵝쵞쵟А",5,"ЁЖ",25],["acd1","а",5,"ёж",25],["ad41","쵡쵢쵣쵥",6,"쵮쵰쵲",5,"쵹",7],["ad61","춁",6,"춉",10,"춖춗춙춚춛춝춞춟"],["ad81","춠춡춢춣춦춨춪",5,"춱",18,"췅"],["ae41","췆",5,"췍췎췏췑",16],["ae61","췢",5,"췩췪췫췭췮췯췱",6,"췺췼췾",4],["ae81","츃츅츆츇츉츊츋츍",6,"츕츖츗츘츚",5,"츢츣츥츦츧츩츪츫"],["af41","츬츭츮츯츲츴츶",19],["af61","칊",13,"칚칛칝칞칢",5,"칪칬"],["af81","칮",5,"칶칷칹칺칻칽",6,"캆캈캊",5,"캒캓캕캖캗캙"],["b041","캚",5,"캢캦",5,"캮",12],["b061","캻",5,"컂",19],["b081","컖",13,"컦컧컩컪컭",6,"컶컺",5,"가각간갇갈갉갊감",7,"같",4,"갠갤갬갭갯갰갱갸갹갼걀걋걍걔걘걜거걱건걷걸걺검겁것겄겅겆겉겊겋게겐겔겜겝겟겠겡겨격겪견겯결겸겹겻겼경곁계곈곌곕곗고곡곤곧골곪곬곯곰곱곳공곶과곽관괄괆"],["b141","켂켃켅켆켇켉",6,"켒켔켖",5,"켝켞켟켡켢켣"],["b161","켥",6,"켮켲",5,"켹",11],["b181","콅",14,"콖콗콙콚콛콝",6,"콦콨콪콫콬괌괍괏광괘괜괠괩괬괭괴괵괸괼굄굅굇굉교굔굘굡굣구국군굳굴굵굶굻굼굽굿궁궂궈궉권궐궜궝궤궷귀귁귄귈귐귑귓규균귤그극근귿글긁금급긋긍긔기긱긴긷길긺김깁깃깅깆깊까깍깎깐깔깖깜깝깟깠깡깥깨깩깬깰깸"],["b241","콭콮콯콲콳콵콶콷콹",6,"쾁쾂쾃쾄쾆",5,"쾍"],["b261","쾎",18,"쾢",5,"쾩"],["b281","쾪",5,"쾱",18,"쿅",6,"깹깻깼깽꺄꺅꺌꺼꺽꺾껀껄껌껍껏껐껑께껙껜껨껫껭껴껸껼꼇꼈꼍꼐꼬꼭꼰꼲꼴꼼꼽꼿꽁꽂꽃꽈꽉꽐꽜꽝꽤꽥꽹꾀꾄꾈꾐꾑꾕꾜꾸꾹꾼꿀꿇꿈꿉꿋꿍꿎꿔꿜꿨꿩꿰꿱꿴꿸뀀뀁뀄뀌뀐뀔뀜뀝뀨끄끅끈끊끌끎끓끔끕끗끙"],["b341","쿌",19,"쿢쿣쿥쿦쿧쿩"],["b361","쿪",5,"쿲쿴쿶",5,"쿽쿾쿿퀁퀂퀃퀅",5],["b381","퀋",5,"퀒",5,"퀙",19,"끝끼끽낀낄낌낍낏낑나낙낚난낟날낡낢남납낫",4,"낱낳내낵낸낼냄냅냇냈냉냐냑냔냘냠냥너넉넋넌널넒넓넘넙넛넜넝넣네넥넨넬넴넵넷넸넹녀녁년녈념녑녔녕녘녜녠노녹논놀놂놈놉놋농높놓놔놘놜놨뇌뇐뇔뇜뇝"],["b441","퀮",5,"퀶퀷퀹퀺퀻퀽",6,"큆큈큊",5],["b461","큑큒큓큕큖큗큙",6,"큡",10,"큮큯"],["b481","큱큲큳큵",6,"큾큿킀킂",18,"뇟뇨뇩뇬뇰뇹뇻뇽누눅눈눋눌눔눕눗눙눠눴눼뉘뉜뉠뉨뉩뉴뉵뉼늄늅늉느늑는늘늙늚늠늡늣능늦늪늬늰늴니닉닌닐닒님닙닛닝닢다닥닦단닫",4,"닳담답닷",4,"닿대댁댄댈댐댑댓댔댕댜더덕덖던덛덜덞덟덤덥"],["b541","킕",14,"킦킧킩킪킫킭",5],["b561","킳킶킸킺",5,"탂탃탅탆탇탊",5,"탒탖",4],["b581","탛탞탟탡탢탣탥",6,"탮탲",5,"탹",11,"덧덩덫덮데덱덴델뎀뎁뎃뎄뎅뎌뎐뎔뎠뎡뎨뎬도독돈돋돌돎돐돔돕돗동돛돝돠돤돨돼됐되된될됨됩됫됴두둑둔둘둠둡둣둥둬뒀뒈뒝뒤뒨뒬뒵뒷뒹듀듄듈듐듕드득든듣들듦듬듭듯등듸디딕딘딛딜딤딥딧딨딩딪따딱딴딸"],["b641","턅",7,"턎",17],["b661","턠",15,"턲턳턵턶턷턹턻턼턽턾"],["b681","턿텂텆",5,"텎텏텑텒텓텕",6,"텞텠텢",5,"텩텪텫텭땀땁땃땄땅땋때땍땐땔땜땝땟땠땡떠떡떤떨떪떫떰떱떳떴떵떻떼떽뗀뗄뗌뗍뗏뗐뗑뗘뗬또똑똔똘똥똬똴뙈뙤뙨뚜뚝뚠뚤뚫뚬뚱뛔뛰뛴뛸뜀뜁뜅뜨뜩뜬뜯뜰뜸뜹뜻띄띈띌띔띕띠띤띨띰띱띳띵라락란랄람랍랏랐랑랒랖랗"],["b741","텮",13,"텽",6,"톅톆톇톉톊"],["b761","톋",20,"톢톣톥톦톧"],["b781","톩",6,"톲톴톶톷톸톹톻톽톾톿퇁",14,"래랙랜랠램랩랫랬랭랴략랸럇량러럭런럴럼럽럿렀렁렇레렉렌렐렘렙렛렝려력련렬렴렵렷렸령례롄롑롓로록론롤롬롭롯롱롸롼뢍뢨뢰뢴뢸룀룁룃룅료룐룔룝룟룡루룩룬룰룸룹룻룽뤄뤘뤠뤼뤽륀륄륌륏륑류륙륜률륨륩"],["b841","퇐",7,"퇙",17],["b861","퇫",8,"퇵퇶퇷퇹",13],["b881","툈툊",5,"툑",24,"륫륭르륵른를름릅릇릉릊릍릎리릭린릴림립릿링마막만많",4,"맘맙맛망맞맡맣매맥맨맬맴맵맷맸맹맺먀먁먈먕머먹먼멀멂멈멉멋멍멎멓메멕멘멜멤멥멧멨멩며멱면멸몃몄명몇몌모목몫몬몰몲몸몹못몽뫄뫈뫘뫙뫼"],["b941","툪툫툮툯툱툲툳툵",6,"툾퉀퉂",5,"퉉퉊퉋퉌"],["b961","퉍",14,"퉝",6,"퉥퉦퉧퉨"],["b981","퉩",22,"튂튃튅튆튇튉튊튋튌묀묄묍묏묑묘묜묠묩묫무묵묶문묻물묽묾뭄뭅뭇뭉뭍뭏뭐뭔뭘뭡뭣뭬뮈뮌뮐뮤뮨뮬뮴뮷므믄믈믐믓미믹민믿밀밂밈밉밋밌밍및밑바",4,"받",4,"밤밥밧방밭배백밴밸뱀뱁뱃뱄뱅뱉뱌뱍뱐뱝버벅번벋벌벎범법벗"],["ba41","튍튎튏튒튓튔튖",5,"튝튞튟튡튢튣튥",6,"튭"],["ba61","튮튯튰튲",5,"튺튻튽튾틁틃",4,"틊틌",5],["ba81","틒틓틕틖틗틙틚틛틝",6,"틦",9,"틲틳틵틶틷틹틺벙벚베벡벤벧벨벰벱벳벴벵벼벽변별볍볏볐병볕볘볜보복볶본볼봄봅봇봉봐봔봤봬뵀뵈뵉뵌뵐뵘뵙뵤뵨부북분붇불붉붊붐붑붓붕붙붚붜붤붰붸뷔뷕뷘뷜뷩뷰뷴뷸븀븃븅브븍븐블븜븝븟비빅빈빌빎빔빕빗빙빚빛빠빡빤"],["bb41","틻",4,"팂팄팆",5,"팏팑팒팓팕팗",4,"팞팢팣"],["bb61","팤팦팧팪팫팭팮팯팱",6,"팺팾",5,"퍆퍇퍈퍉"],["bb81","퍊",31,"빨빪빰빱빳빴빵빻빼빽뺀뺄뺌뺍뺏뺐뺑뺘뺙뺨뻐뻑뻔뻗뻘뻠뻣뻤뻥뻬뼁뼈뼉뼘뼙뼛뼜뼝뽀뽁뽄뽈뽐뽑뽕뾔뾰뿅뿌뿍뿐뿔뿜뿟뿡쀼쁑쁘쁜쁠쁨쁩삐삑삔삘삠삡삣삥사삭삯산삳살삵삶삼삽삿샀상샅새색샌샐샘샙샛샜생샤"],["bc41","퍪",17,"퍾퍿펁펂펃펅펆펇"],["bc61","펈펉펊펋펎펒",5,"펚펛펝펞펟펡",6,"펪펬펮"],["bc81","펯",4,"펵펶펷펹펺펻펽",6,"폆폇폊",5,"폑",5,"샥샨샬샴샵샷샹섀섄섈섐섕서",4,"섣설섦섧섬섭섯섰성섶세섹센셀셈셉셋셌셍셔셕션셜셤셥셧셨셩셰셴셸솅소속솎손솔솖솜솝솟송솥솨솩솬솰솽쇄쇈쇌쇔쇗쇘쇠쇤쇨쇰쇱쇳쇼쇽숀숄숌숍숏숑수숙순숟술숨숩숫숭"],["bd41","폗폙",7,"폢폤",7,"폮폯폱폲폳폵폶폷"],["bd61","폸폹폺폻폾퐀퐂",5,"퐉",13],["bd81","퐗",5,"퐞",25,"숯숱숲숴쉈쉐쉑쉔쉘쉠쉥쉬쉭쉰쉴쉼쉽쉿슁슈슉슐슘슛슝스슥슨슬슭슴습슷승시식신싣실싫심십싯싱싶싸싹싻싼쌀쌈쌉쌌쌍쌓쌔쌕쌘쌜쌤쌥쌨쌩썅써썩썬썰썲썸썹썼썽쎄쎈쎌쏀쏘쏙쏜쏟쏠쏢쏨쏩쏭쏴쏵쏸쐈쐐쐤쐬쐰"],["be41","퐸",7,"푁푂푃푅",14],["be61","푔",7,"푝푞푟푡푢푣푥",7,"푮푰푱푲"],["be81","푳",4,"푺푻푽푾풁풃",4,"풊풌풎",5,"풕",8,"쐴쐼쐽쑈쑤쑥쑨쑬쑴쑵쑹쒀쒔쒜쒸쒼쓩쓰쓱쓴쓸쓺쓿씀씁씌씐씔씜씨씩씬씰씸씹씻씽아악안앉않알앍앎앓암압앗았앙앝앞애액앤앨앰앱앳앴앵야약얀얄얇얌얍얏양얕얗얘얜얠얩어억언얹얻얼얽얾엄",6,"엌엎"],["bf41","풞",10,"풪",14],["bf61","풹",18,"퓍퓎퓏퓑퓒퓓퓕"],["bf81","퓖",5,"퓝퓞퓠",7,"퓩퓪퓫퓭퓮퓯퓱",6,"퓹퓺퓼에엑엔엘엠엡엣엥여역엮연열엶엷염",5,"옅옆옇예옌옐옘옙옛옜오옥온올옭옮옰옳옴옵옷옹옻와왁완왈왐왑왓왔왕왜왝왠왬왯왱외왹왼욀욈욉욋욍요욕욘욜욤욥욧용우욱운울욹욺움웁웃웅워웍원월웜웝웠웡웨"],["c041","퓾",5,"픅픆픇픉픊픋픍",6,"픖픘",5],["c061","픞",25],["c081","픸픹픺픻픾픿핁핂핃핅",6,"핎핐핒",5,"핚핛핝핞핟핡핢핣웩웬웰웸웹웽위윅윈윌윔윕윗윙유육윤율윰윱윳융윷으윽은을읊음읍읏응",7,"읜읠읨읫이익인일읽읾잃임입잇있잉잊잎자작잔잖잗잘잚잠잡잣잤장잦재잭잰잴잼잽잿쟀쟁쟈쟉쟌쟎쟐쟘쟝쟤쟨쟬저적전절젊"],["c141","핤핦핧핪핬핮",5,"핶핷핹핺핻핽",6,"햆햊햋"],["c161","햌햍햎햏햑",19,"햦햧"],["c181","햨",31,"점접젓정젖제젝젠젤젬젭젯젱져젼졀졈졉졌졍졔조족존졸졺좀좁좃종좆좇좋좌좍좔좝좟좡좨좼좽죄죈죌죔죕죗죙죠죡죤죵주죽준줄줅줆줌줍줏중줘줬줴쥐쥑쥔쥘쥠쥡쥣쥬쥰쥴쥼즈즉즌즐즘즙즛증지직진짇질짊짐집짓"],["c241","헊헋헍헎헏헑헓",4,"헚헜헞",5,"헦헧헩헪헫헭헮"],["c261","헯",4,"헶헸헺",5,"혂혃혅혆혇혉",6,"혒"],["c281","혖",5,"혝혞혟혡혢혣혥",7,"혮",9,"혺혻징짖짙짚짜짝짠짢짤짧짬짭짯짰짱째짹짼쨀쨈쨉쨋쨌쨍쨔쨘쨩쩌쩍쩐쩔쩜쩝쩟쩠쩡쩨쩽쪄쪘쪼쪽쫀쫄쫌쫍쫏쫑쫓쫘쫙쫠쫬쫴쬈쬐쬔쬘쬠쬡쭁쭈쭉쭌쭐쭘쭙쭝쭤쭸쭹쮜쮸쯔쯤쯧쯩찌찍찐찔찜찝찡찢찧차착찬찮찰참찹찻"],["c341","혽혾혿홁홂홃홄홆홇홊홌홎홏홐홒홓홖홗홙홚홛홝",4],["c361","홢",4,"홨홪",5,"홲홳홵",11],["c381","횁횂횄횆",5,"횎횏횑횒횓횕",7,"횞횠횢",5,"횩횪찼창찾채책챈챌챔챕챗챘챙챠챤챦챨챰챵처척천철첨첩첫첬청체첵첸첼쳄쳅쳇쳉쳐쳔쳤쳬쳰촁초촉촌촐촘촙촛총촤촨촬촹최쵠쵤쵬쵭쵯쵱쵸춈추축춘출춤춥춧충춰췄췌췐취췬췰췸췹췻췽츄츈츌츔츙츠측츤츨츰츱츳층"],["c441","횫횭횮횯횱",7,"횺횼",7,"훆훇훉훊훋"],["c461","훍훎훏훐훒훓훕훖훘훚",5,"훡훢훣훥훦훧훩",4],["c481","훮훯훱훲훳훴훶",5,"훾훿휁휂휃휅",11,"휒휓휔치칙친칟칠칡침칩칫칭카칵칸칼캄캅캇캉캐캑캔캘캠캡캣캤캥캬캭컁커컥컨컫컬컴컵컷컸컹케켁켄켈켐켑켓켕켜켠켤켬켭켯켰켱켸코콕콘콜콤콥콧콩콰콱콴콸쾀쾅쾌쾡쾨쾰쿄쿠쿡쿤쿨쿰쿱쿳쿵쿼퀀퀄퀑퀘퀭퀴퀵퀸퀼"],["c541","휕휖휗휚휛휝휞휟휡",6,"휪휬휮",5,"휶휷휹"],["c561","휺휻휽",6,"흅흆흈흊",5,"흒흓흕흚",4],["c581","흟흢흤흦흧흨흪흫흭흮흯흱흲흳흵",6,"흾흿힀힂",5,"힊힋큄큅큇큉큐큔큘큠크큭큰클큼큽킁키킥킨킬킴킵킷킹타탁탄탈탉탐탑탓탔탕태택탠탤탬탭탯탰탱탸턍터턱턴털턺텀텁텃텄텅테텍텐텔템텝텟텡텨텬텼톄톈토톡톤톨톰톱톳통톺톼퇀퇘퇴퇸툇툉툐투툭툰툴툼툽툿퉁퉈퉜"],["c641","힍힎힏힑",6,"힚힜힞",5],["c6a1","퉤튀튁튄튈튐튑튕튜튠튤튬튱트특튼튿틀틂틈틉틋틔틘틜틤틥티틱틴틸팀팁팃팅파팍팎판팔팖팜팝팟팠팡팥패팩팬팰팸팹팻팼팽퍄퍅퍼퍽펀펄펌펍펏펐펑페펙펜펠펨펩펫펭펴편펼폄폅폈평폐폘폡폣포폭폰폴폼폽폿퐁"],["c7a1","퐈퐝푀푄표푠푤푭푯푸푹푼푿풀풂품풉풋풍풔풩퓌퓐퓔퓜퓟퓨퓬퓰퓸퓻퓽프픈플픔픕픗피픽핀필핌핍핏핑하학한할핥함합핫항해핵핸핼햄햅햇했행햐향허헉헌헐헒험헙헛헝헤헥헨헬헴헵헷헹혀혁현혈혐협혓혔형혜혠"],["c8a1","혤혭호혹혼홀홅홈홉홋홍홑화확환활홧황홰홱홴횃횅회획횐횔횝횟횡효횬횰횹횻후훅훈훌훑훔훗훙훠훤훨훰훵훼훽휀휄휑휘휙휜휠휨휩휫휭휴휵휸휼흄흇흉흐흑흔흖흗흘흙흠흡흣흥흩희흰흴흼흽힁히힉힌힐힘힙힛힝"],["caa1","伽佳假價加可呵哥嘉嫁家暇架枷柯歌珂痂稼苛茄街袈訶賈跏軻迦駕刻却各恪慤殼珏脚覺角閣侃刊墾奸姦干幹懇揀杆柬桿澗癎看磵稈竿簡肝艮艱諫間乫喝曷渴碣竭葛褐蝎鞨勘坎堪嵌感憾戡敢柑橄減甘疳監瞰紺邯鑑鑒龕"],["cba1","匣岬甲胛鉀閘剛堈姜岡崗康强彊慷江畺疆糠絳綱羌腔舡薑襁講鋼降鱇介价個凱塏愷愾慨改槪漑疥皆盖箇芥蓋豈鎧開喀客坑更粳羹醵倨去居巨拒据據擧渠炬祛距踞車遽鉅鋸乾件健巾建愆楗腱虔蹇鍵騫乞傑杰桀儉劍劒檢"],["cca1","瞼鈐黔劫怯迲偈憩揭擊格檄激膈覡隔堅牽犬甄絹繭肩見譴遣鵑抉決潔結缺訣兼慊箝謙鉗鎌京俓倞傾儆勁勍卿坰境庚徑慶憬擎敬景暻更梗涇炅烱璟璥瓊痙硬磬竟競絅經耕耿脛莖警輕逕鏡頃頸驚鯨係啓堺契季屆悸戒桂械"],["cda1","棨溪界癸磎稽系繫繼計誡谿階鷄古叩告呱固姑孤尻庫拷攷故敲暠枯槁沽痼皐睾稿羔考股膏苦苽菰藁蠱袴誥賈辜錮雇顧高鼓哭斛曲梏穀谷鵠困坤崑昆梱棍滾琨袞鯤汨滑骨供公共功孔工恐恭拱控攻珙空蚣貢鞏串寡戈果瓜"],["cea1","科菓誇課跨過鍋顆廓槨藿郭串冠官寬慣棺款灌琯瓘管罐菅觀貫關館刮恝括适侊光匡壙廣曠洸炚狂珖筐胱鑛卦掛罫乖傀塊壞怪愧拐槐魁宏紘肱轟交僑咬喬嬌嶠巧攪敎校橋狡皎矯絞翹膠蕎蛟較轎郊餃驕鮫丘久九仇俱具勾"],["cfa1","區口句咎嘔坵垢寇嶇廐懼拘救枸柩構歐毆毬求溝灸狗玖球瞿矩究絿耉臼舅舊苟衢謳購軀逑邱鉤銶駒驅鳩鷗龜國局菊鞠鞫麴君窘群裙軍郡堀屈掘窟宮弓穹窮芎躬倦券勸卷圈拳捲權淃眷厥獗蕨蹶闕机櫃潰詭軌饋句晷歸貴"],["d0a1","鬼龜叫圭奎揆槻珪硅窺竅糾葵規赳逵閨勻均畇筠菌鈞龜橘克剋劇戟棘極隙僅劤勤懃斤根槿瑾筋芹菫覲謹近饉契今妗擒昑檎琴禁禽芩衾衿襟金錦伋及急扱汲級給亘兢矜肯企伎其冀嗜器圻基埼夔奇妓寄岐崎己幾忌技旗旣"],["d1a1","朞期杞棋棄機欺氣汽沂淇玘琦琪璂璣畸畿碁磯祁祇祈祺箕紀綺羈耆耭肌記譏豈起錡錤飢饑騎騏驥麒緊佶吉拮桔金喫儺喇奈娜懦懶拏拿癩",5,"那樂",4,"諾酪駱亂卵暖欄煖爛蘭難鸞捏捺南嵐枏楠湳濫男藍襤拉"],["d2a1","納臘蠟衲囊娘廊",4,"乃來內奈柰耐冷女年撚秊念恬拈捻寧寗努勞奴弩怒擄櫓爐瑙盧",5,"駑魯",10,"濃籠聾膿農惱牢磊腦賂雷尿壘",7,"嫩訥杻紐勒",5,"能菱陵尼泥匿溺多茶"],["d3a1","丹亶但單團壇彖斷旦檀段湍短端簞緞蛋袒鄲鍛撻澾獺疸達啖坍憺擔曇淡湛潭澹痰聃膽蕁覃談譚錟沓畓答踏遝唐堂塘幢戇撞棠當糖螳黨代垈坮大對岱帶待戴擡玳臺袋貸隊黛宅德悳倒刀到圖堵塗導屠島嶋度徒悼挑掉搗桃"],["d4a1","棹櫂淘渡滔濤燾盜睹禱稻萄覩賭跳蹈逃途道都鍍陶韜毒瀆牘犢獨督禿篤纛讀墩惇敦旽暾沌焞燉豚頓乭突仝冬凍動同憧東桐棟洞潼疼瞳童胴董銅兜斗杜枓痘竇荳讀豆逗頭屯臀芚遁遯鈍得嶝橙燈登等藤謄鄧騰喇懶拏癩羅"],["d5a1","蘿螺裸邏樂洛烙珞絡落諾酪駱丹亂卵欄欒瀾爛蘭鸞剌辣嵐擥攬欖濫籃纜藍襤覽拉臘蠟廊朗浪狼琅瑯螂郞來崍徠萊冷掠略亮倆兩凉梁樑粮粱糧良諒輛量侶儷勵呂廬慮戾旅櫚濾礪藜蠣閭驢驪麗黎力曆歷瀝礫轢靂憐戀攣漣"],["d6a1","煉璉練聯蓮輦連鍊冽列劣洌烈裂廉斂殮濂簾獵令伶囹寧岺嶺怜玲笭羚翎聆逞鈴零靈領齡例澧禮醴隷勞怒撈擄櫓潞瀘爐盧老蘆虜路輅露魯鷺鹵碌祿綠菉錄鹿麓論壟弄朧瀧瓏籠聾儡瀨牢磊賂賚賴雷了僚寮廖料燎療瞭聊蓼"],["d7a1","遼鬧龍壘婁屢樓淚漏瘻累縷蔞褸鏤陋劉旒柳榴流溜瀏琉瑠留瘤硫謬類六戮陸侖倫崙淪綸輪律慄栗率隆勒肋凜凌楞稜綾菱陵俚利厘吏唎履悧李梨浬犁狸理璃異痢籬罹羸莉裏裡里釐離鯉吝潾燐璘藺躪隣鱗麟林淋琳臨霖砬"],["d8a1","立笠粒摩瑪痲碼磨馬魔麻寞幕漠膜莫邈万卍娩巒彎慢挽晩曼滿漫灣瞞萬蔓蠻輓饅鰻唜抹末沫茉襪靺亡妄忘忙望網罔芒茫莽輞邙埋妹媒寐昧枚梅每煤罵買賣邁魅脈貊陌驀麥孟氓猛盲盟萌冪覓免冕勉棉沔眄眠綿緬面麵滅"],["d9a1","蔑冥名命明暝椧溟皿瞑茗蓂螟酩銘鳴袂侮冒募姆帽慕摸摹暮某模母毛牟牡瑁眸矛耗芼茅謀謨貌木沐牧目睦穆鶩歿沒夢朦蒙卯墓妙廟描昴杳渺猫竗苗錨務巫憮懋戊拇撫无楙武毋無珷畝繆舞茂蕪誣貿霧鵡墨默們刎吻問文"],["daa1","汶紊紋聞蚊門雯勿沕物味媚尾嵋彌微未梶楣渼湄眉米美薇謎迷靡黴岷悶愍憫敏旻旼民泯玟珉緡閔密蜜謐剝博拍搏撲朴樸泊珀璞箔粕縛膊舶薄迫雹駁伴半反叛拌搬攀斑槃泮潘班畔瘢盤盼磐磻礬絆般蟠返頒飯勃拔撥渤潑"],["dba1","發跋醱鉢髮魃倣傍坊妨尨幇彷房放方旁昉枋榜滂磅紡肪膀舫芳蒡蚌訪謗邦防龐倍俳北培徘拜排杯湃焙盃背胚裴裵褙賠輩配陪伯佰帛柏栢白百魄幡樊煩燔番磻繁蕃藩飜伐筏罰閥凡帆梵氾汎泛犯範范法琺僻劈壁擘檗璧癖"],["dca1","碧蘗闢霹便卞弁變辨辯邊別瞥鱉鼈丙倂兵屛幷昞昺柄棅炳甁病秉竝輧餠騈保堡報寶普步洑湺潽珤甫菩補褓譜輔伏僕匐卜宓復服福腹茯蔔複覆輹輻馥鰒本乶俸奉封峯峰捧棒烽熢琫縫蓬蜂逢鋒鳳不付俯傅剖副否咐埠夫婦"],["dda1","孚孵富府復扶敷斧浮溥父符簿缶腐腑膚艀芙莩訃負賦賻赴趺部釜阜附駙鳧北分吩噴墳奔奮忿憤扮昐汾焚盆粉糞紛芬賁雰不佛弗彿拂崩朋棚硼繃鵬丕備匕匪卑妃婢庇悲憊扉批斐枇榧比毖毗毘沸泌琵痺砒碑秕秘粃緋翡肥"],["dea1","脾臂菲蜚裨誹譬費鄙非飛鼻嚬嬪彬斌檳殯浜濱瀕牝玭貧賓頻憑氷聘騁乍事些仕伺似使俟僿史司唆嗣四士奢娑寫寺射巳師徙思捨斜斯柶査梭死沙泗渣瀉獅砂社祀祠私篩紗絲肆舍莎蓑蛇裟詐詞謝賜赦辭邪飼駟麝削數朔索"],["dfa1","傘刪山散汕珊産疝算蒜酸霰乷撒殺煞薩三參杉森渗芟蔘衫揷澁鈒颯上傷像償商喪嘗孀尙峠常床庠廂想桑橡湘爽牀狀相祥箱翔裳觴詳象賞霜塞璽賽嗇塞穡索色牲生甥省笙墅壻嶼序庶徐恕抒捿敍暑曙書栖棲犀瑞筮絮緖署"],["e0a1","胥舒薯西誓逝鋤黍鼠夕奭席惜昔晳析汐淅潟石碩蓆釋錫仙僊先善嬋宣扇敾旋渲煽琁瑄璇璿癬禪線繕羨腺膳船蘚蟬詵跣選銑鐥饍鮮卨屑楔泄洩渫舌薛褻設說雪齧剡暹殲纖蟾贍閃陝攝涉燮葉城姓宬性惺成星晟猩珹盛省筬"],["e1a1","聖聲腥誠醒世勢歲洗稅笹細說貰召嘯塑宵小少巢所掃搔昭梳沼消溯瀟炤燒甦疏疎瘙笑篠簫素紹蔬蕭蘇訴逍遡邵銷韶騷俗屬束涑粟續謖贖速孫巽損蓀遜飡率宋悚松淞訟誦送頌刷殺灑碎鎖衰釗修受嗽囚垂壽嫂守岫峀帥愁"],["e2a1","戍手授搜收數樹殊水洙漱燧狩獸琇璲瘦睡秀穗竪粹綏綬繡羞脩茱蒐蓚藪袖誰讐輸遂邃酬銖銹隋隧隨雖需須首髓鬚叔塾夙孰宿淑潚熟琡璹肅菽巡徇循恂旬栒楯橓殉洵淳珣盾瞬筍純脣舜荀蓴蕣詢諄醇錞順馴戌術述鉥崇崧"],["e3a1","嵩瑟膝蝨濕拾習褶襲丞乘僧勝升承昇繩蠅陞侍匙嘶始媤尸屎屍市弑恃施是時枾柴猜矢示翅蒔蓍視試詩諡豕豺埴寔式息拭植殖湜熄篒蝕識軾食飾伸侁信呻娠宸愼新晨燼申神紳腎臣莘薪藎蜃訊身辛辰迅失室實悉審尋心沁"],["e4a1","沈深瀋甚芯諶什十拾雙氏亞俄兒啞娥峨我牙芽莪蛾衙訝阿雅餓鴉鵝堊岳嶽幄惡愕握樂渥鄂鍔顎鰐齷安岸按晏案眼雁鞍顔鮟斡謁軋閼唵岩巖庵暗癌菴闇壓押狎鴨仰央怏昻殃秧鴦厓哀埃崖愛曖涯碍艾隘靄厄扼掖液縊腋額"],["e5a1","櫻罌鶯鸚也倻冶夜惹揶椰爺耶若野弱掠略約若葯蒻藥躍亮佯兩凉壤孃恙揚攘敭暘梁楊樣洋瀁煬痒瘍禳穰糧羊良襄諒讓釀陽量養圄御於漁瘀禦語馭魚齬億憶抑檍臆偃堰彦焉言諺孼蘖俺儼嚴奄掩淹嶪業円予余勵呂女如廬"],["e6a1","旅歟汝濾璵礖礪與艅茹輿轝閭餘驪麗黎亦力域役易曆歷疫繹譯轢逆驛嚥堧姸娟宴年延憐戀捐挻撚椽沇沿涎涓淵演漣烟然煙煉燃燕璉硏硯秊筵緣練縯聯衍軟輦蓮連鉛鍊鳶列劣咽悅涅烈熱裂說閱厭廉念捻染殮炎焰琰艶苒"],["e7a1","簾閻髥鹽曄獵燁葉令囹塋寧嶺嶸影怜映暎楹榮永泳渶潁濚瀛瀯煐營獰玲瑛瑩瓔盈穎纓羚聆英詠迎鈴鍈零霙靈領乂倪例刈叡曳汭濊猊睿穢芮藝蘂禮裔詣譽豫醴銳隸霓預五伍俉傲午吾吳嗚塢墺奧娛寤悟惡懊敖旿晤梧汚澳"],["e8a1","烏熬獒筽蜈誤鰲鼇屋沃獄玉鈺溫瑥瘟穩縕蘊兀壅擁瓮甕癰翁邕雍饔渦瓦窩窪臥蛙蝸訛婉完宛梡椀浣玩琓琬碗緩翫脘腕莞豌阮頑曰往旺枉汪王倭娃歪矮外嵬巍猥畏了僚僥凹堯夭妖姚寥寮尿嶢拗搖撓擾料曜樂橈燎燿瑤療"],["e9a1","窈窯繇繞耀腰蓼蟯要謠遙遼邀饒慾欲浴縟褥辱俑傭冗勇埇墉容庸慂榕涌湧溶熔瑢用甬聳茸蓉踊鎔鏞龍于佑偶優又友右宇寓尤愚憂旴牛玗瑀盂祐禑禹紆羽芋藕虞迂遇郵釪隅雨雩勖彧旭昱栯煜稶郁頊云暈橒殞澐熉耘芸蕓"],["eaa1","運隕雲韻蔚鬱亐熊雄元原員圓園垣媛嫄寃怨愿援沅洹湲源爰猿瑗苑袁轅遠阮院願鴛月越鉞位偉僞危圍委威尉慰暐渭爲瑋緯胃萎葦蔿蝟衛褘謂違韋魏乳侑儒兪劉唯喩孺宥幼幽庾悠惟愈愉揄攸有杻柔柚柳楡楢油洧流游溜"],["eba1","濡猶猷琉瑜由留癒硫紐維臾萸裕誘諛諭踰蹂遊逾遺酉釉鍮類六堉戮毓肉育陸倫允奫尹崙淪潤玧胤贇輪鈗閏律慄栗率聿戎瀜絨融隆垠恩慇殷誾銀隱乙吟淫蔭陰音飮揖泣邑凝應膺鷹依倚儀宜意懿擬椅毅疑矣義艤薏蟻衣誼"],["eca1","議醫二以伊利吏夷姨履已弛彛怡易李梨泥爾珥理異痍痢移罹而耳肄苡荑裏裡貽貳邇里離飴餌匿溺瀷益翊翌翼謚人仁刃印吝咽因姻寅引忍湮燐璘絪茵藺蚓認隣靭靷鱗麟一佚佾壹日溢逸鎰馹任壬妊姙恁林淋稔臨荏賃入卄"],["eda1","立笠粒仍剩孕芿仔刺咨姉姿子字孜恣慈滋炙煮玆瓷疵磁紫者自茨蔗藉諮資雌作勺嚼斫昨灼炸爵綽芍酌雀鵲孱棧殘潺盞岑暫潛箴簪蠶雜丈仗匠場墻壯奬將帳庄張掌暲杖樟檣欌漿牆狀獐璋章粧腸臟臧莊葬蔣薔藏裝贓醬長"],["eea1","障再哉在宰才材栽梓渽滓災縡裁財載齋齎爭箏諍錚佇低儲咀姐底抵杵楮樗沮渚狙猪疽箸紵苧菹著藷詛貯躇這邸雎齟勣吊嫡寂摘敵滴狄炙的積笛籍績翟荻謫賊赤跡蹟迪迹適鏑佃佺傳全典前剪塡塼奠專展廛悛戰栓殿氈澱"],["efa1","煎琠田甸畑癲筌箋箭篆纏詮輾轉鈿銓錢鐫電顚顫餞切截折浙癤竊節絶占岾店漸点粘霑鮎點接摺蝶丁井亭停偵呈姃定幀庭廷征情挺政整旌晶晸柾楨檉正汀淀淨渟湞瀞炡玎珽町睛碇禎程穽精綎艇訂諪貞鄭酊釘鉦鋌錠霆靖"],["f0a1","靜頂鼎制劑啼堤帝弟悌提梯濟祭第臍薺製諸蹄醍除際霽題齊俎兆凋助嘲弔彫措操早晁曺曹朝條棗槽漕潮照燥爪璪眺祖祚租稠窕粗糟組繰肇藻蚤詔調趙躁造遭釣阻雕鳥族簇足鏃存尊卒拙猝倧宗從悰慫棕淙琮種終綜縱腫"],["f1a1","踪踵鍾鐘佐坐左座挫罪主住侏做姝胄呪周嗾奏宙州廚晝朱柱株注洲湊澍炷珠疇籌紂紬綢舟蛛註誅走躊輳週酎酒鑄駐竹粥俊儁准埈寯峻晙樽浚準濬焌畯竣蠢逡遵雋駿茁中仲衆重卽櫛楫汁葺增憎曾拯烝甑症繒蒸證贈之只"],["f2a1","咫地址志持指摯支旨智枝枳止池沚漬知砥祉祗紙肢脂至芝芷蜘誌識贄趾遲直稙稷織職唇嗔塵振搢晉晋桭榛殄津溱珍瑨璡畛疹盡眞瞋秦縉縝臻蔯袗診賑軫辰進鎭陣陳震侄叱姪嫉帙桎瓆疾秩窒膣蛭質跌迭斟朕什執潗緝輯"],["f3a1","鏶集徵懲澄且侘借叉嗟嵯差次此磋箚茶蹉車遮捉搾着窄錯鑿齪撰澯燦璨瓚竄簒纂粲纘讚贊鑽餐饌刹察擦札紮僭參塹慘慙懺斬站讒讖倉倡創唱娼廠彰愴敞昌昶暢槍滄漲猖瘡窓脹艙菖蒼債埰寀寨彩採砦綵菜蔡采釵冊柵策"],["f4a1","責凄妻悽處倜刺剔尺慽戚拓擲斥滌瘠脊蹠陟隻仟千喘天川擅泉淺玔穿舛薦賤踐遷釧闡阡韆凸哲喆徹撤澈綴輟轍鐵僉尖沾添甛瞻簽籤詹諂堞妾帖捷牒疊睫諜貼輒廳晴淸聽菁請靑鯖切剃替涕滯締諦逮遞體初剿哨憔抄招梢"],["f5a1","椒楚樵炒焦硝礁礎秒稍肖艸苕草蕉貂超酢醋醮促囑燭矗蜀觸寸忖村邨叢塚寵悤憁摠總聰蔥銃撮催崔最墜抽推椎楸樞湫皺秋芻萩諏趨追鄒酋醜錐錘鎚雛騶鰍丑畜祝竺筑築縮蓄蹙蹴軸逐春椿瑃出朮黜充忠沖蟲衝衷悴膵萃"],["f6a1","贅取吹嘴娶就炊翠聚脆臭趣醉驟鷲側仄厠惻測層侈値嗤峙幟恥梔治淄熾痔痴癡稚穉緇緻置致蚩輜雉馳齒則勅飭親七柒漆侵寢枕沈浸琛砧針鍼蟄秤稱快他咤唾墮妥惰打拖朶楕舵陀馱駝倬卓啄坼度托拓擢晫柝濁濯琢琸託"],["f7a1","鐸呑嘆坦彈憚歎灘炭綻誕奪脫探眈耽貪塔搭榻宕帑湯糖蕩兌台太怠態殆汰泰笞胎苔跆邰颱宅擇澤撑攄兎吐土討慟桶洞痛筒統通堆槌腿褪退頹偸套妬投透鬪慝特闖坡婆巴把播擺杷波派爬琶破罷芭跛頗判坂板版瓣販辦鈑"],["f8a1","阪八叭捌佩唄悖敗沛浿牌狽稗覇貝彭澎烹膨愎便偏扁片篇編翩遍鞭騙貶坪平枰萍評吠嬖幣廢弊斃肺蔽閉陛佈包匍匏咆哺圃布怖抛抱捕暴泡浦疱砲胞脯苞葡蒲袍褒逋鋪飽鮑幅暴曝瀑爆輻俵剽彪慓杓標漂瓢票表豹飇飄驃"],["f9a1","品稟楓諷豊風馮彼披疲皮被避陂匹弼必泌珌畢疋筆苾馝乏逼下何厦夏廈昰河瑕荷蝦賀遐霞鰕壑學虐謔鶴寒恨悍旱汗漢澣瀚罕翰閑閒限韓割轄函含咸啣喊檻涵緘艦銜陷鹹合哈盒蛤閤闔陜亢伉姮嫦巷恒抗杭桁沆港缸肛航"],["faa1","行降項亥偕咳垓奚孩害懈楷海瀣蟹解該諧邂駭骸劾核倖幸杏荇行享向嚮珦鄕響餉饗香噓墟虛許憲櫶獻軒歇險驗奕爀赫革俔峴弦懸晛泫炫玄玹現眩睍絃絢縣舷衒見賢鉉顯孑穴血頁嫌俠協夾峽挾浹狹脅脇莢鋏頰亨兄刑型"],["fba1","形泂滎瀅灐炯熒珩瑩荊螢衡逈邢鎣馨兮彗惠慧暳蕙蹊醯鞋乎互呼壕壺好岵弧戶扈昊晧毫浩淏湖滸澔濠濩灝狐琥瑚瓠皓祜糊縞胡芦葫蒿虎號蝴護豪鎬頀顥惑或酷婚昏混渾琿魂忽惚笏哄弘汞泓洪烘紅虹訌鴻化和嬅樺火畵"],["fca1","禍禾花華話譁貨靴廓擴攫確碻穫丸喚奐宦幻患換歡晥桓渙煥環紈還驩鰥活滑猾豁闊凰幌徨恍惶愰慌晃晄榥況湟滉潢煌璜皇篁簧荒蝗遑隍黃匯回廻徊恢悔懷晦會檜淮澮灰獪繪膾茴蛔誨賄劃獲宖橫鐄哮嚆孝效斅曉梟涍淆"],["fda1","爻肴酵驍侯候厚后吼喉嗅帿後朽煦珝逅勛勳塤壎焄熏燻薰訓暈薨喧暄煊萱卉喙毁彙徽揮暉煇諱輝麾休携烋畦虧恤譎鷸兇凶匈洶胸黑昕欣炘痕吃屹紇訖欠欽歆吸恰洽翕興僖凞喜噫囍姬嬉希憙憘戱晞曦熙熹熺犧禧稀羲詰"]]
-
-/***/ }),
-/* 719 */
-/***/ (function(module, exports) {
-
-module.exports = [["0","\u0000",127],["8ea1","｡",62],["a1a1","　、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼～∥｜…‥‘’“”（）〔〕［］｛｝〈",9,"＋－±×÷＝≠＜＞≦≧∞∴♂♀°′″℃￥＄￠￡％＃＆＊＠§☆★○●◎◇"],["a2a1","◆□■△▲▽▼※〒→←↑↓〓"],["a2ba","∈∋⊆⊇⊂⊃∪∩"],["a2ca","∧∨￢⇒⇔∀∃"],["a2dc","∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬"],["a2f2","ʼn♯♭♪†‡¶"],["a2fe","◯"],["a3b0","０",9],["a3c1","Ａ",25],["a3e1","ａ",25],["a4a1","ぁ",82],["a5a1","ァ",85],["a6a1","Α",16,"Σ",6],["a6c1","α",16,"σ",6],["a7a1","А",5,"ЁЖ",25],["a7d1","а",5,"ёж",25],["a8a1","─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂"],["ada1","①",19,"Ⅰ",9],["adc0","㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡"],["addf","㍻〝〟№㏍℡㊤",4,"㈱㈲㈹㍾㍽㍼≒≡∫∮∑√⊥∠∟⊿∵∩∪"],["b0a1","亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭"],["b1a1","院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応"],["b2a1","押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改"],["b3a1","魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱"],["b4a1","粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄"],["b5a1","機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京"],["b6a1","供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈"],["b7a1","掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲"],["b8a1","検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向"],["b9a1","后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込"],["baa1","此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷"],["bba1","察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時"],["bca1","次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周"],["bda1","宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償"],["bea1","勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾"],["bfa1","拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾"],["c0a1","澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線"],["c1a1","繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎"],["c2a1","臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只"],["c3a1","叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵"],["c4a1","帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓"],["c5a1","邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到"],["c6a1","董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入"],["c7a1","如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦"],["c8a1","函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美"],["c9a1","鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服"],["caa1","福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋"],["cba1","法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満"],["cca1","漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒"],["cda1","諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃"],["cea1","痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯"],["cfa1","蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕"],["d0a1","弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲"],["d1a1","僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨"],["d2a1","辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨"],["d3a1","咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉"],["d4a1","圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩"],["d5a1","奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓"],["d6a1","屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏"],["d7a1","廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚"],["d8a1","悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛"],["d9a1","戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼"],["daa1","據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼"],["dba1","曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍"],["dca1","棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣"],["dda1","檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾"],["dea1","沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌"],["dfa1","漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼"],["e0a1","燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱"],["e1a1","瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰"],["e2a1","癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬"],["e3a1","磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐"],["e4a1","筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆"],["e5a1","紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺"],["e6a1","罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋"],["e7a1","隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙"],["e8a1","茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈"],["e9a1","蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙"],["eaa1","蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞"],["eba1","襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫"],["eca1","譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊"],["eda1","蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸"],["eea1","遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮"],["efa1","錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞"],["f0a1","陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰"],["f1a1","顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷"],["f2a1","髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈"],["f3a1","鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠"],["f4a1","堯槇遙瑤凜熙"],["f9a1","纊褜鍈銈蓜俉炻昱棈鋹曻彅丨仡仼伀伃伹佖侒侊侚侔俍偀倢俿倞偆偰偂傔僴僘兊兤冝冾凬刕劜劦勀勛匀匇匤卲厓厲叝﨎咜咊咩哿喆坙坥垬埈埇﨏塚增墲夋奓奛奝奣妤妺孖寀甯寘寬尞岦岺峵崧嵓﨑嵂嵭嶸嶹巐弡弴彧德"],["faa1","忞恝悅悊惞惕愠惲愑愷愰憘戓抦揵摠撝擎敎昀昕昻昉昮昞昤晥晗晙晴晳暙暠暲暿曺朎朗杦枻桒柀栁桄棏﨓楨﨔榘槢樰橫橆橳橾櫢櫤毖氿汜沆汯泚洄涇浯涖涬淏淸淲淼渹湜渧渼溿澈澵濵瀅瀇瀨炅炫焏焄煜煆煇凞燁燾犱"],["fba1","犾猤猪獷玽珉珖珣珒琇珵琦琪琩琮瑢璉璟甁畯皂皜皞皛皦益睆劯砡硎硤硺礰礼神祥禔福禛竑竧靖竫箞精絈絜綷綠緖繒罇羡羽茁荢荿菇菶葈蒴蕓蕙蕫﨟薰蘒﨡蠇裵訒訷詹誧誾諟諸諶譓譿賰賴贒赶﨣軏﨤逸遧郞都鄕鄧釚"],["fca1","釗釞釭釮釤釥鈆鈐鈊鈺鉀鈼鉎鉙鉑鈹鉧銧鉷鉸鋧鋗鋙鋐﨧鋕鋠鋓錥錡鋻﨨錞鋿錝錂鍰鍗鎤鏆鏞鏸鐱鑅鑈閒隆﨩隝隯霳霻靃靍靏靑靕顗顥飯飼餧館馞驎髙髜魵魲鮏鮱鮻鰀鵰鵫鶴鸙黑"],["fcf1","ⅰ",9,"￢￤＇＂"],["8fa2af","˘ˇ¸˙˝¯˛˚～΄΅"],["8fa2c2","¡¦¿"],["8fa2eb","ºª©®™¤№"],["8fa6e1","ΆΈΉΊΪ"],["8fa6e7","Ό"],["8fa6e9","ΎΫ"],["8fa6ec","Ώ"],["8fa6f1","άέήίϊΐόςύϋΰώ"],["8fa7c2","Ђ",10,"ЎЏ"],["8fa7f2","ђ",10,"ўџ"],["8fa9a1","ÆĐ"],["8fa9a4","Ħ"],["8fa9a6","IJ"],["8fa9a8","ŁĿ"],["8fa9ab","ŊØŒ"],["8fa9af","ŦÞ"],["8fa9c1","æđðħıijĸłŀʼnŋøœßŧþ"],["8faaa1","ÁÀÄÂĂǍĀĄÅÃĆĈČÇĊĎÉÈËÊĚĖĒĘ"],["8faaba","ĜĞĢĠĤÍÌÏÎǏİĪĮĨĴĶĹĽĻŃŇŅÑÓÒÖÔǑŐŌÕŔŘŖŚŜŠŞŤŢÚÙÜÛŬǓŰŪŲŮŨǗǛǙǕŴÝŸŶŹŽŻ"],["8faba1","áàäâăǎāąåãćĉčçċďéèëêěėēęǵĝğ"],["8fabbd","ġĥíìïîǐ"],["8fabc5","īįĩĵķĺľļńňņñóòöôǒőōõŕřŗśŝšşťţúùüûŭǔűūųůũǘǜǚǖŵýÿŷźžż"],["8fb0a1","丂丄丅丌丒丟丣两丨丫丮丯丰丵乀乁乄乇乑乚乜乣乨乩乴乵乹乿亍亖亗亝亯亹仃仐仚仛仠仡仢仨仯仱仳仵份仾仿伀伂伃伈伋伌伒伕伖众伙伮伱你伳伵伷伹伻伾佀佂佈佉佋佌佒佔佖佘佟佣佪佬佮佱佷佸佹佺佽佾侁侂侄"],["8fb1a1","侅侉侊侌侎侐侒侓侔侗侙侚侞侟侲侷侹侻侼侽侾俀俁俅俆俈俉俋俌俍俏俒俜俠俢俰俲俼俽俿倀倁倄倇倊倌倎倐倓倗倘倛倜倝倞倢倧倮倰倲倳倵偀偁偂偅偆偊偌偎偑偒偓偗偙偟偠偢偣偦偧偪偭偰偱倻傁傃傄傆傊傎傏傐"],["8fb2a1","傒傓傔傖傛傜傞",4,"傪傯傰傹傺傽僀僃僄僇僌僎僐僓僔僘僜僝僟僢僤僦僨僩僯僱僶僺僾儃儆儇儈儋儌儍儎僲儐儗儙儛儜儝儞儣儧儨儬儭儯儱儳儴儵儸儹兂兊兏兓兕兗兘兟兤兦兾冃冄冋冎冘冝冡冣冭冸冺冼冾冿凂"],["8fb3a1","凈减凑凒凓凕凘凞凢凥凮凲凳凴凷刁刂刅划刓刕刖刘刢刨刱刲刵刼剅剉剕剗剘剚剜剟剠剡剦剮剷剸剹劀劂劅劊劌劓劕劖劗劘劚劜劤劥劦劧劯劰劶劷劸劺劻劽勀勄勆勈勌勏勑勔勖勛勜勡勥勨勩勪勬勰勱勴勶勷匀匃匊匋"],["8fb4a1","匌匑匓匘匛匜匞匟匥匧匨匩匫匬匭匰匲匵匼匽匾卂卌卋卙卛卡卣卥卬卭卲卹卾厃厇厈厎厓厔厙厝厡厤厪厫厯厲厴厵厷厸厺厽叀叅叏叒叓叕叚叝叞叠另叧叵吂吓吚吡吧吨吪启吱吴吵呃呄呇呍呏呞呢呤呦呧呩呫呭呮呴呿"],["8fb5a1","咁咃咅咈咉咍咑咕咖咜咟咡咦咧咩咪咭咮咱咷咹咺咻咿哆哊响哎哠哪哬哯哶哼哾哿唀唁唅唈唉唌唍唎唕唪唫唲唵唶唻唼唽啁啇啉啊啍啐啑啘啚啛啞啠啡啤啦啿喁喂喆喈喎喏喑喒喓喔喗喣喤喭喲喿嗁嗃嗆嗉嗋嗌嗎嗑嗒"],["8fb6a1","嗓嗗嗘嗛嗞嗢嗩嗶嗿嘅嘈嘊嘍",5,"嘙嘬嘰嘳嘵嘷嘹嘻嘼嘽嘿噀噁噃噄噆噉噋噍噏噔噞噠噡噢噣噦噩噭噯噱噲噵嚄嚅嚈嚋嚌嚕嚙嚚嚝嚞嚟嚦嚧嚨嚩嚫嚬嚭嚱嚳嚷嚾囅囉囊囋囏囐囌囍囙囜囝囟囡囤",4,"囱囫园"],["8fb7a1","囶囷圁圂圇圊圌圑圕圚圛圝圠圢圣圤圥圩圪圬圮圯圳圴圽圾圿坅坆坌坍坒坢坥坧坨坫坭",4,"坳坴坵坷坹坺坻坼坾垁垃垌垔垗垙垚垜垝垞垟垡垕垧垨垩垬垸垽埇埈埌埏埕埝埞埤埦埧埩埭埰埵埶埸埽埾埿堃堄堈堉埡"],["8fb8a1","堌堍堛堞堟堠堦堧堭堲堹堿塉塌塍塏塐塕塟塡塤塧塨塸塼塿墀墁墇墈墉墊墌墍墏墐墔墖墝墠墡墢墦墩墱墲壄墼壂壈壍壎壐壒壔壖壚壝壡壢壩壳夅夆夋夌夒夓夔虁夝夡夣夤夨夯夰夳夵夶夿奃奆奒奓奙奛奝奞奟奡奣奫奭"],["8fb9a1","奯奲奵奶她奻奼妋妌妎妒妕妗妟妤妧妭妮妯妰妳妷妺妼姁姃姄姈姊姍姒姝姞姟姣姤姧姮姯姱姲姴姷娀娄娌娍娎娒娓娞娣娤娧娨娪娭娰婄婅婇婈婌婐婕婞婣婥婧婭婷婺婻婾媋媐媓媖媙媜媞媟媠媢媧媬媱媲媳媵媸媺媻媿"],["8fbaa1","嫄嫆嫈嫏嫚嫜嫠嫥嫪嫮嫵嫶嫽嬀嬁嬈嬗嬴嬙嬛嬝嬡嬥嬭嬸孁孋孌孒孖孞孨孮孯孼孽孾孿宁宄宆宊宎宐宑宓宔宖宨宩宬宭宯宱宲宷宺宼寀寁寍寏寖",4,"寠寯寱寴寽尌尗尞尟尣尦尩尫尬尮尰尲尵尶屙屚屜屢屣屧屨屩"],["8fbba1","屭屰屴屵屺屻屼屽岇岈岊岏岒岝岟岠岢岣岦岪岲岴岵岺峉峋峒峝峗峮峱峲峴崁崆崍崒崫崣崤崦崧崱崴崹崽崿嵂嵃嵆嵈嵕嵑嵙嵊嵟嵠嵡嵢嵤嵪嵭嵰嵹嵺嵾嵿嶁嶃嶈嶊嶒嶓嶔嶕嶙嶛嶟嶠嶧嶫嶰嶴嶸嶹巃巇巋巐巎巘巙巠巤"],["8fbca1","巩巸巹帀帇帍帒帔帕帘帟帠帮帨帲帵帾幋幐幉幑幖幘幛幜幞幨幪",4,"幰庀庋庎庢庤庥庨庪庬庱庳庽庾庿廆廌廋廎廑廒廔廕廜廞廥廫异弆弇弈弎弙弜弝弡弢弣弤弨弫弬弮弰弴弶弻弽弿彀彄彅彇彍彐彔彘彛彠彣彤彧"],["8fbda1","彯彲彴彵彸彺彽彾徉徍徏徖徜徝徢徧徫徤徬徯徰徱徸忄忇忈忉忋忐",4,"忞忡忢忨忩忪忬忭忮忯忲忳忶忺忼怇怊怍怓怔怗怘怚怟怤怭怳怵恀恇恈恉恌恑恔恖恗恝恡恧恱恾恿悂悆悈悊悎悑悓悕悘悝悞悢悤悥您悰悱悷"],["8fbea1","悻悾惂惄惈惉惊惋惎惏惔惕惙惛惝惞惢惥惲惵惸惼惽愂愇愊愌愐",4,"愖愗愙愜愞愢愪愫愰愱愵愶愷愹慁慅慆慉慞慠慬慲慸慻慼慿憀憁憃憄憋憍憒憓憗憘憜憝憟憠憥憨憪憭憸憹憼懀懁懂懎懏懕懜懝懞懟懡懢懧懩懥"],["8fbfa1","懬懭懯戁戃戄戇戓戕戜戠戢戣戧戩戫戹戽扂扃扄扆扌扐扑扒扔扖扚扜扤扭扯扳扺扽抍抎抏抐抦抨抳抶抷抺抾抿拄拎拕拖拚拪拲拴拼拽挃挄挊挋挍挐挓挖挘挩挪挭挵挶挹挼捁捂捃捄捆捊捋捎捒捓捔捘捛捥捦捬捭捱捴捵"],["8fc0a1","捸捼捽捿掂掄掇掊掐掔掕掙掚掞掤掦掭掮掯掽揁揅揈揎揑揓揔揕揜揠揥揪揬揲揳揵揸揹搉搊搐搒搔搘搞搠搢搤搥搩搪搯搰搵搽搿摋摏摑摒摓摔摚摛摜摝摟摠摡摣摭摳摴摻摽撅撇撏撐撑撘撙撛撝撟撡撣撦撨撬撳撽撾撿"],["8fc1a1","擄擉擊擋擌擎擐擑擕擗擤擥擩擪擭擰擵擷擻擿攁攄攈攉攊攏攓攔攖攙攛攞攟攢攦攩攮攱攺攼攽敃敇敉敐敒敔敟敠敧敫敺敽斁斅斊斒斕斘斝斠斣斦斮斲斳斴斿旂旈旉旎旐旔旖旘旟旰旲旴旵旹旾旿昀昄昈昉昍昑昒昕昖昝"],["8fc2a1","昞昡昢昣昤昦昩昪昫昬昮昰昱昳昹昷晀晅晆晊晌晑晎晗晘晙晛晜晠晡曻晪晫晬晾晳晵晿晷晸晹晻暀晼暋暌暍暐暒暙暚暛暜暟暠暤暭暱暲暵暻暿曀曂曃曈曌曎曏曔曛曟曨曫曬曮曺朅朇朎朓朙朜朠朢朳朾杅杇杈杌杔杕杝"],["8fc3a1","杦杬杮杴杶杻极构枎枏枑枓枖枘枙枛枰枱枲枵枻枼枽柹柀柂柃柅柈柉柒柗柙柜柡柦柰柲柶柷桒栔栙栝栟栨栧栬栭栯栰栱栳栻栿桄桅桊桌桕桗桘桛桫桮",4,"桵桹桺桻桼梂梄梆梈梖梘梚梜梡梣梥梩梪梮梲梻棅棈棌棏"],["8fc4a1","棐棑棓棖棙棜棝棥棨棪棫棬棭棰棱棵棶棻棼棽椆椉椊椐椑椓椖椗椱椳椵椸椻楂楅楉楎楗楛楣楤楥楦楨楩楬楰楱楲楺楻楿榀榍榒榖榘榡榥榦榨榫榭榯榷榸榺榼槅槈槑槖槗槢槥槮槯槱槳槵槾樀樁樃樏樑樕樚樝樠樤樨樰樲"],["8fc5a1","樴樷樻樾樿橅橆橉橊橎橐橑橒橕橖橛橤橧橪橱橳橾檁檃檆檇檉檋檑檛檝檞檟檥檫檯檰檱檴檽檾檿櫆櫉櫈櫌櫐櫔櫕櫖櫜櫝櫤櫧櫬櫰櫱櫲櫼櫽欂欃欆欇欉欏欐欑欗欛欞欤欨欫欬欯欵欶欻欿歆歊歍歒歖歘歝歠歧歫歮歰歵歽"],["8fc6a1","歾殂殅殗殛殟殠殢殣殨殩殬殭殮殰殸殹殽殾毃毄毉毌毖毚毡毣毦毧毮毱毷毹毿氂氄氅氉氍氎氐氒氙氟氦氧氨氬氮氳氵氶氺氻氿汊汋汍汏汒汔汙汛汜汫汭汯汴汶汸汹汻沅沆沇沉沔沕沗沘沜沟沰沲沴泂泆泍泏泐泑泒泔泖"],["8fc7a1","泚泜泠泧泩泫泬泮泲泴洄洇洊洎洏洑洓洚洦洧洨汧洮洯洱洹洼洿浗浞浟浡浥浧浯浰浼涂涇涑涒涔涖涗涘涪涬涴涷涹涽涿淄淈淊淎淏淖淛淝淟淠淢淥淩淯淰淴淶淼渀渄渞渢渧渲渶渹渻渼湄湅湈湉湋湏湑湒湓湔湗湜湝湞"],["8fc8a1","湢湣湨湳湻湽溍溓溙溠溧溭溮溱溳溻溿滀滁滃滇滈滊滍滎滏滫滭滮滹滻滽漄漈漊漌漍漖漘漚漛漦漩漪漯漰漳漶漻漼漭潏潑潒潓潗潙潚潝潞潡潢潨潬潽潾澃澇澈澋澌澍澐澒澓澔澖澚澟澠澥澦澧澨澮澯澰澵澶澼濅濇濈濊"],["8fc9a1","濚濞濨濩濰濵濹濼濽瀀瀅瀆瀇瀍瀗瀠瀣瀯瀴瀷瀹瀼灃灄灈灉灊灋灔灕灝灞灎灤灥灬灮灵灶灾炁炅炆炔",4,"炛炤炫炰炱炴炷烊烑烓烔烕烖烘烜烤烺焃",4,"焋焌焏焞焠焫焭焯焰焱焸煁煅煆煇煊煋煐煒煗煚煜煞煠"],["8fcaa1","煨煹熀熅熇熌熒熚熛熠熢熯熰熲熳熺熿燀燁燄燋燌燓燖燙燚燜燸燾爀爇爈爉爓爗爚爝爟爤爫爯爴爸爹牁牂牃牅牎牏牐牓牕牖牚牜牞牠牣牨牫牮牯牱牷牸牻牼牿犄犉犍犎犓犛犨犭犮犱犴犾狁狇狉狌狕狖狘狟狥狳狴狺狻"],["8fcba1","狾猂猄猅猇猋猍猒猓猘猙猞猢猤猧猨猬猱猲猵猺猻猽獃獍獐獒獖獘獝獞獟獠獦獧獩獫獬獮獯獱獷獹獼玀玁玃玅玆玎玐玓玕玗玘玜玞玟玠玢玥玦玪玫玭玵玷玹玼玽玿珅珆珉珋珌珏珒珓珖珙珝珡珣珦珧珩珴珵珷珹珺珻珽"],["8fcca1","珿琀琁琄琇琊琑琚琛琤琦琨",9,"琹瑀瑃瑄瑆瑇瑋瑍瑑瑒瑗瑝瑢瑦瑧瑨瑫瑭瑮瑱瑲璀璁璅璆璇璉璏璐璑璒璘璙璚璜璟璠璡璣璦璨璩璪璫璮璯璱璲璵璹璻璿瓈瓉瓌瓐瓓瓘瓚瓛瓞瓟瓤瓨瓪瓫瓯瓴瓺瓻瓼瓿甆"],["8fcda1","甒甖甗甠甡甤甧甩甪甯甶甹甽甾甿畀畃畇畈畎畐畒畗畞畟畡畯畱畹",5,"疁疅疐疒疓疕疙疜疢疤疴疺疿痀痁痄痆痌痎痏痗痜痟痠痡痤痧痬痮痯痱痹瘀瘂瘃瘄瘇瘈瘊瘌瘏瘒瘓瘕瘖瘙瘛瘜瘝瘞瘣瘥瘦瘩瘭瘲瘳瘵瘸瘹"],["8fcea1","瘺瘼癊癀癁癃癄癅癉癋癕癙癟癤癥癭癮癯癱癴皁皅皌皍皕皛皜皝皟皠皢",6,"皪皭皽盁盅盉盋盌盎盔盙盠盦盨盬盰盱盶盹盼眀眆眊眎眒眔眕眗眙眚眜眢眨眭眮眯眴眵眶眹眽眾睂睅睆睊睍睎睏睒睖睗睜睞睟睠睢"],["8fcfa1","睤睧睪睬睰睲睳睴睺睽瞀瞄瞌瞍瞔瞕瞖瞚瞟瞢瞧瞪瞮瞯瞱瞵瞾矃矉矑矒矕矙矞矟矠矤矦矪矬矰矱矴矸矻砅砆砉砍砎砑砝砡砢砣砭砮砰砵砷硃硄硇硈硌硎硒硜硞硠硡硣硤硨硪确硺硾碊碏碔碘碡碝碞碟碤碨碬碭碰碱碲碳"],["8fd0a1","碻碽碿磇磈磉磌磎磒磓磕磖磤磛磟磠磡磦磪磲磳礀磶磷磺磻磿礆礌礐礚礜礞礟礠礥礧礩礭礱礴礵礻礽礿祄祅祆祊祋祏祑祔祘祛祜祧祩祫祲祹祻祼祾禋禌禑禓禔禕禖禘禛禜禡禨禩禫禯禱禴禸离秂秄秇秈秊秏秔秖秚秝秞"],["8fd1a1","秠秢秥秪秫秭秱秸秼稂稃稇稉稊稌稑稕稛稞稡稧稫稭稯稰稴稵稸稹稺穄穅穇穈穌穕穖穙穜穝穟穠穥穧穪穭穵穸穾窀窂窅窆窊窋窐窑窔窞窠窣窬窳窵窹窻窼竆竉竌竎竑竛竨竩竫竬竱竴竻竽竾笇笔笟笣笧笩笪笫笭笮笯笰"],["8fd2a1","笱笴笽笿筀筁筇筎筕筠筤筦筩筪筭筯筲筳筷箄箉箎箐箑箖箛箞箠箥箬箯箰箲箵箶箺箻箼箽篂篅篈篊篔篖篗篙篚篛篨篪篲篴篵篸篹篺篼篾簁簂簃簄簆簉簋簌簎簏簙簛簠簥簦簨簬簱簳簴簶簹簺籆籊籕籑籒籓籙",5],["8fd3a1","籡籣籧籩籭籮籰籲籹籼籽粆粇粏粔粞粠粦粰粶粷粺粻粼粿糄糇糈糉糍糏糓糔糕糗糙糚糝糦糩糫糵紃紇紈紉紏紑紒紓紖紝紞紣紦紪紭紱紼紽紾絀絁絇絈絍絑絓絗絙絚絜絝絥絧絪絰絸絺絻絿綁綂綃綅綆綈綋綌綍綑綖綗綝"],["8fd4a1","綞綦綧綪綳綶綷綹緂",4,"緌緍緎緗緙縀緢緥緦緪緫緭緱緵緶緹緺縈縐縑縕縗縜縝縠縧縨縬縭縯縳縶縿繄繅繇繎繐繒繘繟繡繢繥繫繮繯繳繸繾纁纆纇纊纍纑纕纘纚纝纞缼缻缽缾缿罃罄罇罏罒罓罛罜罝罡罣罤罥罦罭"],["8fd5a1","罱罽罾罿羀羋羍羏羐羑羖羗羜羡羢羦羪羭羴羼羿翀翃翈翎翏翛翟翣翥翨翬翮翯翲翺翽翾翿耇耈耊耍耎耏耑耓耔耖耝耞耟耠耤耦耬耮耰耴耵耷耹耺耼耾聀聄聠聤聦聭聱聵肁肈肎肜肞肦肧肫肸肹胈胍胏胒胔胕胗胘胠胭胮"],["8fd6a1","胰胲胳胶胹胺胾脃脋脖脗脘脜脞脠脤脧脬脰脵脺脼腅腇腊腌腒腗腠腡腧腨腩腭腯腷膁膐膄膅膆膋膎膖膘膛膞膢膮膲膴膻臋臃臅臊臎臏臕臗臛臝臞臡臤臫臬臰臱臲臵臶臸臹臽臿舀舃舏舓舔舙舚舝舡舢舨舲舴舺艃艄艅艆"],["8fd7a1","艋艎艏艑艖艜艠艣艧艭艴艻艽艿芀芁芃芄芇芉芊芎芑芔芖芘芚芛芠芡芣芤芧芨芩芪芮芰芲芴芷芺芼芾芿苆苐苕苚苠苢苤苨苪苭苯苶苷苽苾茀茁茇茈茊茋荔茛茝茞茟茡茢茬茭茮茰茳茷茺茼茽荂荃荄荇荍荎荑荕荖荗荰荸"],["8fd8a1","荽荿莀莂莄莆莍莒莔莕莘莙莛莜莝莦莧莩莬莾莿菀菇菉菏菐菑菔菝荓菨菪菶菸菹菼萁萆萊萏萑萕萙莭萯萹葅葇葈葊葍葏葑葒葖葘葙葚葜葠葤葥葧葪葰葳葴葶葸葼葽蒁蒅蒒蒓蒕蒞蒦蒨蒩蒪蒯蒱蒴蒺蒽蒾蓀蓂蓇蓈蓌蓏蓓"],["8fd9a1","蓜蓧蓪蓯蓰蓱蓲蓷蔲蓺蓻蓽蔂蔃蔇蔌蔎蔐蔜蔞蔢蔣蔤蔥蔧蔪蔫蔯蔳蔴蔶蔿蕆蕏",4,"蕖蕙蕜",6,"蕤蕫蕯蕹蕺蕻蕽蕿薁薅薆薉薋薌薏薓薘薝薟薠薢薥薧薴薶薷薸薼薽薾薿藂藇藊藋藎薭藘藚藟藠藦藨藭藳藶藼"],["8fdaa1","藿蘀蘄蘅蘍蘎蘐蘑蘒蘘蘙蘛蘞蘡蘧蘩蘶蘸蘺蘼蘽虀虂虆虒虓虖虗虘虙虝虠",4,"虩虬虯虵虶虷虺蚍蚑蚖蚘蚚蚜蚡蚦蚧蚨蚭蚱蚳蚴蚵蚷蚸蚹蚿蛀蛁蛃蛅蛑蛒蛕蛗蛚蛜蛠蛣蛥蛧蚈蛺蛼蛽蜄蜅蜇蜋蜎蜏蜐蜓蜔蜙蜞蜟蜡蜣"],["8fdba1","蜨蜮蜯蜱蜲蜹蜺蜼蜽蜾蝀蝃蝅蝍蝘蝝蝡蝤蝥蝯蝱蝲蝻螃",6,"螋螌螐螓螕螗螘螙螞螠螣螧螬螭螮螱螵螾螿蟁蟈蟉蟊蟎蟕蟖蟙蟚蟜蟟蟢蟣蟤蟪蟫蟭蟱蟳蟸蟺蟿蠁蠃蠆蠉蠊蠋蠐蠙蠒蠓蠔蠘蠚蠛蠜蠞蠟蠨蠭蠮蠰蠲蠵"],["8fdca1","蠺蠼衁衃衅衈衉衊衋衎衑衕衖衘衚衜衟衠衤衩衱衹衻袀袘袚袛袜袟袠袨袪袺袽袾裀裊",4,"裑裒裓裛裞裧裯裰裱裵裷褁褆褍褎褏褕褖褘褙褚褜褠褦褧褨褰褱褲褵褹褺褾襀襂襅襆襉襏襒襗襚襛襜襡襢襣襫襮襰襳襵襺"],["8fdda1","襻襼襽覉覍覐覔覕覛覜覟覠覥覰覴覵覶覷覼觔",4,"觥觩觫觭觱觳觶觹觽觿訄訅訇訏訑訒訔訕訞訠訢訤訦訫訬訯訵訷訽訾詀詃詅詇詉詍詎詓詖詗詘詜詝詡詥詧詵詶詷詹詺詻詾詿誀誃誆誋誏誐誒誖誗誙誟誧誩誮誯誳"],["8fdea1","誶誷誻誾諃諆諈諉諊諑諓諔諕諗諝諟諬諰諴諵諶諼諿謅謆謋謑謜謞謟謊謭謰謷謼譂",4,"譈譒譓譔譙譍譞譣譭譶譸譹譼譾讁讄讅讋讍讏讔讕讜讞讟谸谹谽谾豅豇豉豋豏豑豓豔豗豘豛豝豙豣豤豦豨豩豭豳豵豶豻豾貆"],["8fdfa1","貇貋貐貒貓貙貛貜貤貹貺賅賆賉賋賏賖賕賙賝賡賨賬賯賰賲賵賷賸賾賿贁贃贉贒贗贛赥赩赬赮赿趂趄趈趍趐趑趕趞趟趠趦趫趬趯趲趵趷趹趻跀跅跆跇跈跊跎跑跔跕跗跙跤跥跧跬跰趼跱跲跴跽踁踄踅踆踋踑踔踖踠踡踢"],["8fe0a1","踣踦踧踱踳踶踷踸踹踽蹀蹁蹋蹍蹎蹏蹔蹛蹜蹝蹞蹡蹢蹩蹬蹭蹯蹰蹱蹹蹺蹻躂躃躉躐躒躕躚躛躝躞躢躧躩躭躮躳躵躺躻軀軁軃軄軇軏軑軔軜軨軮軰軱軷軹軺軭輀輂輇輈輏輐輖輗輘輞輠輡輣輥輧輨輬輭輮輴輵輶輷輺轀轁"],["8fe1a1","轃轇轏轑",4,"轘轝轞轥辝辠辡辤辥辦辵辶辸达迀迁迆迊迋迍运迒迓迕迠迣迤迨迮迱迵迶迻迾适逄逈逌逘逛逨逩逯逪逬逭逳逴逷逿遃遄遌遛遝遢遦遧遬遰遴遹邅邈邋邌邎邐邕邗邘邙邛邠邡邢邥邰邲邳邴邶邽郌邾郃"],["8fe2a1","郄郅郇郈郕郗郘郙郜郝郟郥郒郶郫郯郰郴郾郿鄀鄄鄅鄆鄈鄍鄐鄔鄖鄗鄘鄚鄜鄞鄠鄥鄢鄣鄧鄩鄮鄯鄱鄴鄶鄷鄹鄺鄼鄽酃酇酈酏酓酗酙酚酛酡酤酧酭酴酹酺酻醁醃醅醆醊醎醑醓醔醕醘醞醡醦醨醬醭醮醰醱醲醳醶醻醼醽醿"],["8fe3a1","釂釃釅釓釔釗釙釚釞釤釥釩釪釬",5,"釷釹釻釽鈀鈁鈄鈅鈆鈇鈉鈊鈌鈐鈒鈓鈖鈘鈜鈝鈣鈤鈥鈦鈨鈮鈯鈰鈳鈵鈶鈸鈹鈺鈼鈾鉀鉂鉃鉆鉇鉊鉍鉎鉏鉑鉘鉙鉜鉝鉠鉡鉥鉧鉨鉩鉮鉯鉰鉵",4,"鉻鉼鉽鉿銈銉銊銍銎銒銗"],["8fe4a1","銙銟銠銤銥銧銨銫銯銲銶銸銺銻銼銽銿",4,"鋅鋆鋇鋈鋋鋌鋍鋎鋐鋓鋕鋗鋘鋙鋜鋝鋟鋠鋡鋣鋥鋧鋨鋬鋮鋰鋹鋻鋿錀錂錈錍錑錔錕錜錝錞錟錡錤錥錧錩錪錳錴錶錷鍇鍈鍉鍐鍑鍒鍕鍗鍘鍚鍞鍤鍥鍧鍩鍪鍭鍯鍰鍱鍳鍴鍶"],["8fe5a1","鍺鍽鍿鎀鎁鎂鎈鎊鎋鎍鎏鎒鎕鎘鎛鎞鎡鎣鎤鎦鎨鎫鎴鎵鎶鎺鎩鏁鏄鏅鏆鏇鏉",4,"鏓鏙鏜鏞鏟鏢鏦鏧鏹鏷鏸鏺鏻鏽鐁鐂鐄鐈鐉鐍鐎鐏鐕鐖鐗鐟鐮鐯鐱鐲鐳鐴鐻鐿鐽鑃鑅鑈鑊鑌鑕鑙鑜鑟鑡鑣鑨鑫鑭鑮鑯鑱鑲钄钃镸镹"],["8fe6a1","镾閄閈閌閍閎閝閞閟閡閦閩閫閬閴閶閺閽閿闆闈闉闋闐闑闒闓闙闚闝闞闟闠闤闦阝阞阢阤阥阦阬阱阳阷阸阹阺阼阽陁陒陔陖陗陘陡陮陴陻陼陾陿隁隂隃隄隉隑隖隚隝隟隤隥隦隩隮隯隳隺雊雒嶲雘雚雝雞雟雩雯雱雺霂"],["8fe7a1","霃霅霉霚霛霝霡霢霣霨霱霳靁靃靊靎靏靕靗靘靚靛靣靧靪靮靳靶靷靸靻靽靿鞀鞉鞕鞖鞗鞙鞚鞞鞟鞢鞬鞮鞱鞲鞵鞶鞸鞹鞺鞼鞾鞿韁韄韅韇韉韊韌韍韎韐韑韔韗韘韙韝韞韠韛韡韤韯韱韴韷韸韺頇頊頙頍頎頔頖頜頞頠頣頦"],["8fe8a1","頫頮頯頰頲頳頵頥頾顄顇顊顑顒顓顖顗顙顚顢顣顥顦顪顬颫颭颮颰颴颷颸颺颻颿飂飅飈飌飡飣飥飦飧飪飳飶餂餇餈餑餕餖餗餚餛餜餟餢餦餧餫餱",4,"餹餺餻餼饀饁饆饇饈饍饎饔饘饙饛饜饞饟饠馛馝馟馦馰馱馲馵"],["8fe9a1","馹馺馽馿駃駉駓駔駙駚駜駞駧駪駫駬駰駴駵駹駽駾騂騃騄騋騌騐騑騖騞騠騢騣騤騧騭騮騳騵騶騸驇驁驄驊驋驌驎驑驔驖驝骪骬骮骯骲骴骵骶骹骻骾骿髁髃髆髈髎髐髒髕髖髗髛髜髠髤髥髧髩髬髲髳髵髹髺髽髿",4],["8feaa1","鬄鬅鬈鬉鬋鬌鬍鬎鬐鬒鬖鬙鬛鬜鬠鬦鬫鬭鬳鬴鬵鬷鬹鬺鬽魈魋魌魕魖魗魛魞魡魣魥魦魨魪",4,"魳魵魷魸魹魿鮀鮄鮅鮆鮇鮉鮊鮋鮍鮏鮐鮔鮚鮝鮞鮦鮧鮩鮬鮰鮱鮲鮷鮸鮻鮼鮾鮿鯁鯇鯈鯎鯐鯗鯘鯝鯟鯥鯧鯪鯫鯯鯳鯷鯸"],["8feba1","鯹鯺鯽鯿鰀鰂鰋鰏鰑鰖鰘鰙鰚鰜鰞鰢鰣鰦",4,"鰱鰵鰶鰷鰽鱁鱃鱄鱅鱉鱊鱎鱏鱐鱓鱔鱖鱘鱛鱝鱞鱟鱣鱩鱪鱜鱫鱨鱮鱰鱲鱵鱷鱻鳦鳲鳷鳹鴋鴂鴑鴗鴘鴜鴝鴞鴯鴰鴲鴳鴴鴺鴼鵅鴽鵂鵃鵇鵊鵓鵔鵟鵣鵢鵥鵩鵪鵫鵰鵶鵷鵻"],["8feca1","鵼鵾鶃鶄鶆鶊鶍鶎鶒鶓鶕鶖鶗鶘鶡鶪鶬鶮鶱鶵鶹鶼鶿鷃鷇鷉鷊鷔鷕鷖鷗鷚鷞鷟鷠鷥鷧鷩鷫鷮鷰鷳鷴鷾鸊鸂鸇鸎鸐鸑鸒鸕鸖鸙鸜鸝鹺鹻鹼麀麂麃麄麅麇麎麏麖麘麛麞麤麨麬麮麯麰麳麴麵黆黈黋黕黟黤黧黬黭黮黰黱黲黵"],["8feda1","黸黿鼂鼃鼉鼏鼐鼑鼒鼔鼖鼗鼙鼚鼛鼟鼢鼦鼪鼫鼯鼱鼲鼴鼷鼹鼺鼼鼽鼿齁齃",4,"齓齕齖齗齘齚齝齞齨齩齭",4,"齳齵齺齽龏龐龑龒龔龖龗龞龡龢龣龥"]]
-
-/***/ }),
-/* 720 */
-/***/ (function(module, exports) {
-
-module.exports = {"uChars":[128,165,169,178,184,216,226,235,238,244,248,251,253,258,276,284,300,325,329,334,364,463,465,467,469,471,473,475,477,506,594,610,712,716,730,930,938,962,970,1026,1104,1106,8209,8215,8218,8222,8231,8241,8244,8246,8252,8365,8452,8454,8458,8471,8482,8556,8570,8596,8602,8713,8720,8722,8726,8731,8737,8740,8742,8748,8751,8760,8766,8777,8781,8787,8802,8808,8816,8854,8858,8870,8896,8979,9322,9372,9548,9588,9616,9622,9634,9652,9662,9672,9676,9680,9702,9735,9738,9793,9795,11906,11909,11913,11917,11928,11944,11947,11951,11956,11960,11964,11979,12284,12292,12312,12319,12330,12351,12436,12447,12535,12543,12586,12842,12850,12964,13200,13215,13218,13253,13263,13267,13270,13384,13428,13727,13839,13851,14617,14703,14801,14816,14964,15183,15471,15585,16471,16736,17208,17325,17330,17374,17623,17997,18018,18212,18218,18301,18318,18760,18811,18814,18820,18823,18844,18848,18872,19576,19620,19738,19887,40870,59244,59336,59367,59413,59417,59423,59431,59437,59443,59452,59460,59478,59493,63789,63866,63894,63976,63986,64016,64018,64021,64025,64034,64037,64042,65074,65093,65107,65112,65127,65132,65375,65510,65536],"gbChars":[0,36,38,45,50,81,89,95,96,100,103,104,105,109,126,133,148,172,175,179,208,306,307,308,309,310,311,312,313,341,428,443,544,545,558,741,742,749,750,805,819,820,7922,7924,7925,7927,7934,7943,7944,7945,7950,8062,8148,8149,8152,8164,8174,8236,8240,8262,8264,8374,8380,8381,8384,8388,8390,8392,8393,8394,8396,8401,8406,8416,8419,8424,8437,8439,8445,8482,8485,8496,8521,8603,8936,8946,9046,9050,9063,9066,9076,9092,9100,9108,9111,9113,9131,9162,9164,9218,9219,11329,11331,11334,11336,11346,11361,11363,11366,11370,11372,11375,11389,11682,11686,11687,11692,11694,11714,11716,11723,11725,11730,11736,11982,11989,12102,12336,12348,12350,12384,12393,12395,12397,12510,12553,12851,12962,12973,13738,13823,13919,13933,14080,14298,14585,14698,15583,15847,16318,16434,16438,16481,16729,17102,17122,17315,17320,17402,17418,17859,17909,17911,17915,17916,17936,17939,17961,18664,18703,18814,18962,19043,33469,33470,33471,33484,33485,33490,33497,33501,33505,33513,33520,33536,33550,37845,37921,37948,38029,38038,38064,38065,38066,38069,38075,38076,38078,39108,39109,39113,39114,39115,39116,39265,39394,189000]}
-
-/***/ }),
-/* 721 */
-/***/ (function(module, exports) {
-
-module.exports = [["0","\u0000",128],["a1","｡",62],["8140","　、。，．・：；？！゛゜´｀¨＾￣＿ヽヾゝゞ〃仝々〆〇ー―‐／＼～∥｜…‥‘’“”（）〔〕［］｛｝〈",9,"＋－±×"],["8180","÷＝≠＜＞≦≧∞∴♂♀°′″℃￥＄￠￡％＃＆＊＠§☆★○●◎◇◆□■△▲▽▼※〒→←↑↓〓"],["81b8","∈∋⊆⊇⊂⊃∪∩"],["81c8","∧∨￢⇒⇔∀∃"],["81da","∠⊥⌒∂∇≡≒≪≫√∽∝∵∫∬"],["81f0","ʼn♯♭♪†‡¶"],["81fc","◯"],["824f","０",9],["8260","Ａ",25],["8281","ａ",25],["829f","ぁ",82],["8340","ァ",62],["8380","ム",22],["839f","Α",16,"Σ",6],["83bf","α",16,"σ",6],["8440","А",5,"ЁЖ",25],["8470","а",5,"ёж",7],["8480","о",17],["849f","─│┌┐┘└├┬┤┴┼━┃┏┓┛┗┣┳┫┻╋┠┯┨┷┿┝┰┥┸╂"],["8740","①",19,"Ⅰ",9],["875f","㍉㌔㌢㍍㌘㌧㌃㌶㍑㍗㌍㌦㌣㌫㍊㌻㎜㎝㎞㎎㎏㏄㎡"],["877e","㍻"],["8780","〝〟№㏍℡㊤",4,"㈱㈲㈹㍾㍽㍼≒≡∫∮∑√⊥∠∟⊿∵∩∪"],["889f","亜唖娃阿哀愛挨姶逢葵茜穐悪握渥旭葦芦鯵梓圧斡扱宛姐虻飴絢綾鮎或粟袷安庵按暗案闇鞍杏以伊位依偉囲夷委威尉惟意慰易椅為畏異移維緯胃萎衣謂違遺医井亥域育郁磯一壱溢逸稲茨芋鰯允印咽員因姻引飲淫胤蔭"],["8940","院陰隠韻吋右宇烏羽迂雨卯鵜窺丑碓臼渦嘘唄欝蔚鰻姥厩浦瓜閏噂云運雲荏餌叡営嬰影映曳栄永泳洩瑛盈穎頴英衛詠鋭液疫益駅悦謁越閲榎厭円"],["8980","園堰奄宴延怨掩援沿演炎焔煙燕猿縁艶苑薗遠鉛鴛塩於汚甥凹央奥往応押旺横欧殴王翁襖鴬鴎黄岡沖荻億屋憶臆桶牡乙俺卸恩温穏音下化仮何伽価佳加可嘉夏嫁家寡科暇果架歌河火珂禍禾稼箇花苛茄荷華菓蝦課嘩貨迦過霞蚊俄峨我牙画臥芽蛾賀雅餓駕介会解回塊壊廻快怪悔恢懐戒拐改"],["8a40","魁晦械海灰界皆絵芥蟹開階貝凱劾外咳害崖慨概涯碍蓋街該鎧骸浬馨蛙垣柿蛎鈎劃嚇各廓拡撹格核殻獲確穫覚角赫較郭閣隔革学岳楽額顎掛笠樫"],["8a80","橿梶鰍潟割喝恰括活渇滑葛褐轄且鰹叶椛樺鞄株兜竃蒲釜鎌噛鴨栢茅萱粥刈苅瓦乾侃冠寒刊勘勧巻喚堪姦完官寛干幹患感慣憾換敢柑桓棺款歓汗漢澗潅環甘監看竿管簡緩缶翰肝艦莞観諌貫還鑑間閑関陥韓館舘丸含岸巌玩癌眼岩翫贋雁頑顔願企伎危喜器基奇嬉寄岐希幾忌揮机旗既期棋棄"],["8b40","機帰毅気汽畿祈季稀紀徽規記貴起軌輝飢騎鬼亀偽儀妓宜戯技擬欺犠疑祇義蟻誼議掬菊鞠吉吃喫桔橘詰砧杵黍却客脚虐逆丘久仇休及吸宮弓急救"],["8b80","朽求汲泣灸球究窮笈級糾給旧牛去居巨拒拠挙渠虚許距鋸漁禦魚亨享京供侠僑兇競共凶協匡卿叫喬境峡強彊怯恐恭挟教橋況狂狭矯胸脅興蕎郷鏡響饗驚仰凝尭暁業局曲極玉桐粁僅勤均巾錦斤欣欽琴禁禽筋緊芹菌衿襟謹近金吟銀九倶句区狗玖矩苦躯駆駈駒具愚虞喰空偶寓遇隅串櫛釧屑屈"],["8c40","掘窟沓靴轡窪熊隈粂栗繰桑鍬勲君薫訓群軍郡卦袈祁係傾刑兄啓圭珪型契形径恵慶慧憩掲携敬景桂渓畦稽系経継繋罫茎荊蛍計詣警軽頚鶏芸迎鯨"],["8c80","劇戟撃激隙桁傑欠決潔穴結血訣月件倹倦健兼券剣喧圏堅嫌建憲懸拳捲検権牽犬献研硯絹県肩見謙賢軒遣鍵険顕験鹸元原厳幻弦減源玄現絃舷言諺限乎個古呼固姑孤己庫弧戸故枯湖狐糊袴股胡菰虎誇跨鈷雇顧鼓五互伍午呉吾娯後御悟梧檎瑚碁語誤護醐乞鯉交佼侯候倖光公功効勾厚口向"],["8d40","后喉坑垢好孔孝宏工巧巷幸広庚康弘恒慌抗拘控攻昂晃更杭校梗構江洪浩港溝甲皇硬稿糠紅紘絞綱耕考肯肱腔膏航荒行衡講貢購郊酵鉱砿鋼閤降"],["8d80","項香高鴻剛劫号合壕拷濠豪轟麹克刻告国穀酷鵠黒獄漉腰甑忽惚骨狛込此頃今困坤墾婚恨懇昏昆根梱混痕紺艮魂些佐叉唆嵯左差査沙瑳砂詐鎖裟坐座挫債催再最哉塞妻宰彩才採栽歳済災采犀砕砦祭斎細菜裁載際剤在材罪財冴坂阪堺榊肴咲崎埼碕鷺作削咋搾昨朔柵窄策索錯桜鮭笹匙冊刷"],["8e40","察拶撮擦札殺薩雑皐鯖捌錆鮫皿晒三傘参山惨撒散桟燦珊産算纂蚕讃賛酸餐斬暫残仕仔伺使刺司史嗣四士始姉姿子屍市師志思指支孜斯施旨枝止"],["8e80","死氏獅祉私糸紙紫肢脂至視詞詩試誌諮資賜雌飼歯事似侍児字寺慈持時次滋治爾璽痔磁示而耳自蒔辞汐鹿式識鴫竺軸宍雫七叱執失嫉室悉湿漆疾質実蔀篠偲柴芝屡蕊縞舎写射捨赦斜煮社紗者謝車遮蛇邪借勺尺杓灼爵酌釈錫若寂弱惹主取守手朱殊狩珠種腫趣酒首儒受呪寿授樹綬需囚収周"],["8f40","宗就州修愁拾洲秀秋終繍習臭舟蒐衆襲讐蹴輯週酋酬集醜什住充十従戎柔汁渋獣縦重銃叔夙宿淑祝縮粛塾熟出術述俊峻春瞬竣舜駿准循旬楯殉淳"],["8f80","準潤盾純巡遵醇順処初所暑曙渚庶緒署書薯藷諸助叙女序徐恕鋤除傷償勝匠升召哨商唱嘗奨妾娼宵将小少尚庄床廠彰承抄招掌捷昇昌昭晶松梢樟樵沼消渉湘焼焦照症省硝礁祥称章笑粧紹肖菖蒋蕉衝裳訟証詔詳象賞醤鉦鍾鐘障鞘上丈丞乗冗剰城場壌嬢常情擾条杖浄状畳穣蒸譲醸錠嘱埴飾"],["9040","拭植殖燭織職色触食蝕辱尻伸信侵唇娠寝審心慎振新晋森榛浸深申疹真神秦紳臣芯薪親診身辛進針震人仁刃塵壬尋甚尽腎訊迅陣靭笥諏須酢図厨"],["9080","逗吹垂帥推水炊睡粋翠衰遂酔錐錘随瑞髄崇嵩数枢趨雛据杉椙菅頗雀裾澄摺寸世瀬畝是凄制勢姓征性成政整星晴棲栖正清牲生盛精聖声製西誠誓請逝醒青静斉税脆隻席惜戚斥昔析石積籍績脊責赤跡蹟碩切拙接摂折設窃節説雪絶舌蝉仙先千占宣専尖川戦扇撰栓栴泉浅洗染潜煎煽旋穿箭線"],["9140","繊羨腺舛船薦詮賎践選遷銭銑閃鮮前善漸然全禅繕膳糎噌塑岨措曾曽楚狙疏疎礎祖租粗素組蘇訴阻遡鼠僧創双叢倉喪壮奏爽宋層匝惣想捜掃挿掻"],["9180","操早曹巣槍槽漕燥争痩相窓糟総綜聡草荘葬蒼藻装走送遭鎗霜騒像増憎臓蔵贈造促側則即息捉束測足速俗属賊族続卒袖其揃存孫尊損村遜他多太汰詑唾堕妥惰打柁舵楕陀駄騨体堆対耐岱帯待怠態戴替泰滞胎腿苔袋貸退逮隊黛鯛代台大第醍題鷹滝瀧卓啄宅托択拓沢濯琢託鐸濁諾茸凧蛸只"],["9240","叩但達辰奪脱巽竪辿棚谷狸鱈樽誰丹単嘆坦担探旦歎淡湛炭短端箪綻耽胆蛋誕鍛団壇弾断暖檀段男談値知地弛恥智池痴稚置致蜘遅馳築畜竹筑蓄"],["9280","逐秩窒茶嫡着中仲宙忠抽昼柱注虫衷註酎鋳駐樗瀦猪苧著貯丁兆凋喋寵帖帳庁弔張彫徴懲挑暢朝潮牒町眺聴脹腸蝶調諜超跳銚長頂鳥勅捗直朕沈珍賃鎮陳津墜椎槌追鎚痛通塚栂掴槻佃漬柘辻蔦綴鍔椿潰坪壷嬬紬爪吊釣鶴亭低停偵剃貞呈堤定帝底庭廷弟悌抵挺提梯汀碇禎程締艇訂諦蹄逓"],["9340","邸鄭釘鼎泥摘擢敵滴的笛適鏑溺哲徹撤轍迭鉄典填天展店添纏甜貼転顛点伝殿澱田電兎吐堵塗妬屠徒斗杜渡登菟賭途都鍍砥砺努度土奴怒倒党冬"],["9380","凍刀唐塔塘套宕島嶋悼投搭東桃梼棟盗淘湯涛灯燈当痘祷等答筒糖統到董蕩藤討謄豆踏逃透鐙陶頭騰闘働動同堂導憧撞洞瞳童胴萄道銅峠鴇匿得徳涜特督禿篤毒独読栃橡凸突椴届鳶苫寅酉瀞噸屯惇敦沌豚遁頓呑曇鈍奈那内乍凪薙謎灘捺鍋楢馴縄畷南楠軟難汝二尼弐迩匂賑肉虹廿日乳入"],["9440","如尿韮任妊忍認濡禰祢寧葱猫熱年念捻撚燃粘乃廼之埜嚢悩濃納能脳膿農覗蚤巴把播覇杷波派琶破婆罵芭馬俳廃拝排敗杯盃牌背肺輩配倍培媒梅"],["9480","楳煤狽買売賠陪這蝿秤矧萩伯剥博拍柏泊白箔粕舶薄迫曝漠爆縛莫駁麦函箱硲箸肇筈櫨幡肌畑畠八鉢溌発醗髪伐罰抜筏閥鳩噺塙蛤隼伴判半反叛帆搬斑板氾汎版犯班畔繁般藩販範釆煩頒飯挽晩番盤磐蕃蛮匪卑否妃庇彼悲扉批披斐比泌疲皮碑秘緋罷肥被誹費避非飛樋簸備尾微枇毘琵眉美"],["9540","鼻柊稗匹疋髭彦膝菱肘弼必畢筆逼桧姫媛紐百謬俵彪標氷漂瓢票表評豹廟描病秒苗錨鋲蒜蛭鰭品彬斌浜瀕貧賓頻敏瓶不付埠夫婦富冨布府怖扶敷"],["9580","斧普浮父符腐膚芙譜負賦赴阜附侮撫武舞葡蕪部封楓風葺蕗伏副復幅服福腹複覆淵弗払沸仏物鮒分吻噴墳憤扮焚奮粉糞紛雰文聞丙併兵塀幣平弊柄並蔽閉陛米頁僻壁癖碧別瞥蔑箆偏変片篇編辺返遍便勉娩弁鞭保舗鋪圃捕歩甫補輔穂募墓慕戊暮母簿菩倣俸包呆報奉宝峰峯崩庖抱捧放方朋"],["9640","法泡烹砲縫胞芳萌蓬蜂褒訪豊邦鋒飽鳳鵬乏亡傍剖坊妨帽忘忙房暴望某棒冒紡肪膨謀貌貿鉾防吠頬北僕卜墨撲朴牧睦穆釦勃没殆堀幌奔本翻凡盆"],["9680","摩磨魔麻埋妹昧枚毎哩槙幕膜枕鮪柾鱒桝亦俣又抹末沫迄侭繭麿万慢満漫蔓味未魅巳箕岬密蜜湊蓑稔脈妙粍民眠務夢無牟矛霧鵡椋婿娘冥名命明盟迷銘鳴姪牝滅免棉綿緬面麺摸模茂妄孟毛猛盲網耗蒙儲木黙目杢勿餅尤戻籾貰問悶紋門匁也冶夜爺耶野弥矢厄役約薬訳躍靖柳薮鑓愉愈油癒"],["9740","諭輸唯佑優勇友宥幽悠憂揖有柚湧涌猶猷由祐裕誘遊邑郵雄融夕予余与誉輿預傭幼妖容庸揚揺擁曜楊様洋溶熔用窯羊耀葉蓉要謡踊遥陽養慾抑欲"],["9780","沃浴翌翼淀羅螺裸来莱頼雷洛絡落酪乱卵嵐欄濫藍蘭覧利吏履李梨理璃痢裏裡里離陸律率立葎掠略劉流溜琉留硫粒隆竜龍侶慮旅虜了亮僚両凌寮料梁涼猟療瞭稜糧良諒遼量陵領力緑倫厘林淋燐琳臨輪隣鱗麟瑠塁涙累類令伶例冷励嶺怜玲礼苓鈴隷零霊麗齢暦歴列劣烈裂廉恋憐漣煉簾練聯"],["9840","蓮連錬呂魯櫓炉賂路露労婁廊弄朗楼榔浪漏牢狼篭老聾蝋郎六麓禄肋録論倭和話歪賄脇惑枠鷲亙亘鰐詫藁蕨椀湾碗腕"],["989f","弌丐丕个丱丶丼丿乂乖乘亂亅豫亊舒弍于亞亟亠亢亰亳亶从仍仄仆仂仗仞仭仟价伉佚估佛佝佗佇佶侈侏侘佻佩佰侑佯來侖儘俔俟俎俘俛俑俚俐俤俥倚倨倔倪倥倅伜俶倡倩倬俾俯們倆偃假會偕偐偈做偖偬偸傀傚傅傴傲"],["9940","僉僊傳僂僖僞僥僭僣僮價僵儉儁儂儖儕儔儚儡儺儷儼儻儿兀兒兌兔兢竸兩兪兮冀冂囘册冉冏冑冓冕冖冤冦冢冩冪冫决冱冲冰况冽凅凉凛几處凩凭"],["9980","凰凵凾刄刋刔刎刧刪刮刳刹剏剄剋剌剞剔剪剴剩剳剿剽劍劔劒剱劈劑辨辧劬劭劼劵勁勍勗勞勣勦飭勠勳勵勸勹匆匈甸匍匐匏匕匚匣匯匱匳匸區卆卅丗卉卍凖卞卩卮夘卻卷厂厖厠厦厥厮厰厶參簒雙叟曼燮叮叨叭叺吁吽呀听吭吼吮吶吩吝呎咏呵咎呟呱呷呰咒呻咀呶咄咐咆哇咢咸咥咬哄哈咨"],["9a40","咫哂咤咾咼哘哥哦唏唔哽哮哭哺哢唹啀啣啌售啜啅啖啗唸唳啝喙喀咯喊喟啻啾喘喞單啼喃喩喇喨嗚嗅嗟嗄嗜嗤嗔嘔嗷嘖嗾嗽嘛嗹噎噐營嘴嘶嘲嘸"],["9a80","噫噤嘯噬噪嚆嚀嚊嚠嚔嚏嚥嚮嚶嚴囂嚼囁囃囀囈囎囑囓囗囮囹圀囿圄圉圈國圍圓團圖嗇圜圦圷圸坎圻址坏坩埀垈坡坿垉垓垠垳垤垪垰埃埆埔埒埓堊埖埣堋堙堝塲堡塢塋塰毀塒堽塹墅墹墟墫墺壞墻墸墮壅壓壑壗壙壘壥壜壤壟壯壺壹壻壼壽夂夊夐夛梦夥夬夭夲夸夾竒奕奐奎奚奘奢奠奧奬奩"],["9b40","奸妁妝佞侫妣妲姆姨姜妍姙姚娥娟娑娜娉娚婀婬婉娵娶婢婪媚媼媾嫋嫂媽嫣嫗嫦嫩嫖嫺嫻嬌嬋嬖嬲嫐嬪嬶嬾孃孅孀孑孕孚孛孥孩孰孳孵學斈孺宀"],["9b80","它宦宸寃寇寉寔寐寤實寢寞寥寫寰寶寳尅將專對尓尠尢尨尸尹屁屆屎屓屐屏孱屬屮乢屶屹岌岑岔妛岫岻岶岼岷峅岾峇峙峩峽峺峭嶌峪崋崕崗嵜崟崛崑崔崢崚崙崘嵌嵒嵎嵋嵬嵳嵶嶇嶄嶂嶢嶝嶬嶮嶽嶐嶷嶼巉巍巓巒巖巛巫已巵帋帚帙帑帛帶帷幄幃幀幎幗幔幟幢幤幇幵并幺麼广庠廁廂廈廐廏"],["9c40","廖廣廝廚廛廢廡廨廩廬廱廳廰廴廸廾弃弉彝彜弋弑弖弩弭弸彁彈彌彎弯彑彖彗彙彡彭彳彷徃徂彿徊很徑徇從徙徘徠徨徭徼忖忻忤忸忱忝悳忿怡恠"],["9c80","怙怐怩怎怱怛怕怫怦怏怺恚恁恪恷恟恊恆恍恣恃恤恂恬恫恙悁悍惧悃悚悄悛悖悗悒悧悋惡悸惠惓悴忰悽惆悵惘慍愕愆惶惷愀惴惺愃愡惻惱愍愎慇愾愨愧慊愿愼愬愴愽慂慄慳慷慘慙慚慫慴慯慥慱慟慝慓慵憙憖憇憬憔憚憊憑憫憮懌懊應懷懈懃懆憺懋罹懍懦懣懶懺懴懿懽懼懾戀戈戉戍戌戔戛"],["9d40","戞戡截戮戰戲戳扁扎扞扣扛扠扨扼抂抉找抒抓抖拔抃抔拗拑抻拏拿拆擔拈拜拌拊拂拇抛拉挌拮拱挧挂挈拯拵捐挾捍搜捏掖掎掀掫捶掣掏掉掟掵捫"],["9d80","捩掾揩揀揆揣揉插揶揄搖搴搆搓搦搶攝搗搨搏摧摯摶摎攪撕撓撥撩撈撼據擒擅擇撻擘擂擱擧舉擠擡抬擣擯攬擶擴擲擺攀擽攘攜攅攤攣攫攴攵攷收攸畋效敖敕敍敘敞敝敲數斂斃變斛斟斫斷旃旆旁旄旌旒旛旙无旡旱杲昊昃旻杳昵昶昴昜晏晄晉晁晞晝晤晧晨晟晢晰暃暈暎暉暄暘暝曁暹曉暾暼"],["9e40","曄暸曖曚曠昿曦曩曰曵曷朏朖朞朦朧霸朮朿朶杁朸朷杆杞杠杙杣杤枉杰枩杼杪枌枋枦枡枅枷柯枴柬枳柩枸柤柞柝柢柮枹柎柆柧檜栞框栩桀桍栲桎"],["9e80","梳栫桙档桷桿梟梏梭梔條梛梃檮梹桴梵梠梺椏梍桾椁棊椈棘椢椦棡椌棍棔棧棕椶椒椄棗棣椥棹棠棯椨椪椚椣椡棆楹楷楜楸楫楔楾楮椹楴椽楙椰楡楞楝榁楪榲榮槐榿槁槓榾槎寨槊槝榻槃榧樮榑榠榜榕榴槞槨樂樛槿權槹槲槧樅榱樞槭樔槫樊樒櫁樣樓橄樌橲樶橸橇橢橙橦橈樸樢檐檍檠檄檢檣"],["9f40","檗蘗檻櫃櫂檸檳檬櫞櫑櫟檪櫚櫪櫻欅蘖櫺欒欖鬱欟欸欷盜欹飮歇歃歉歐歙歔歛歟歡歸歹歿殀殄殃殍殘殕殞殤殪殫殯殲殱殳殷殼毆毋毓毟毬毫毳毯"],["9f80","麾氈氓气氛氤氣汞汕汢汪沂沍沚沁沛汾汨汳沒沐泄泱泓沽泗泅泝沮沱沾沺泛泯泙泪洟衍洶洫洽洸洙洵洳洒洌浣涓浤浚浹浙涎涕濤涅淹渕渊涵淇淦涸淆淬淞淌淨淒淅淺淙淤淕淪淮渭湮渮渙湲湟渾渣湫渫湶湍渟湃渺湎渤滿渝游溂溪溘滉溷滓溽溯滄溲滔滕溏溥滂溟潁漑灌滬滸滾漿滲漱滯漲滌"],["e040","漾漓滷澆潺潸澁澀潯潛濳潭澂潼潘澎澑濂潦澳澣澡澤澹濆澪濟濕濬濔濘濱濮濛瀉瀋濺瀑瀁瀏濾瀛瀚潴瀝瀘瀟瀰瀾瀲灑灣炙炒炯烱炬炸炳炮烟烋烝"],["e080","烙焉烽焜焙煥煕熈煦煢煌煖煬熏燻熄熕熨熬燗熹熾燒燉燔燎燠燬燧燵燼燹燿爍爐爛爨爭爬爰爲爻爼爿牀牆牋牘牴牾犂犁犇犒犖犢犧犹犲狃狆狄狎狒狢狠狡狹狷倏猗猊猜猖猝猴猯猩猥猾獎獏默獗獪獨獰獸獵獻獺珈玳珎玻珀珥珮珞璢琅瑯琥珸琲琺瑕琿瑟瑙瑁瑜瑩瑰瑣瑪瑶瑾璋璞璧瓊瓏瓔珱"],["e140","瓠瓣瓧瓩瓮瓲瓰瓱瓸瓷甄甃甅甌甎甍甕甓甞甦甬甼畄畍畊畉畛畆畚畩畤畧畫畭畸當疆疇畴疊疉疂疔疚疝疥疣痂疳痃疵疽疸疼疱痍痊痒痙痣痞痾痿"],["e180","痼瘁痰痺痲痳瘋瘍瘉瘟瘧瘠瘡瘢瘤瘴瘰瘻癇癈癆癜癘癡癢癨癩癪癧癬癰癲癶癸發皀皃皈皋皎皖皓皙皚皰皴皸皹皺盂盍盖盒盞盡盥盧盪蘯盻眈眇眄眩眤眞眥眦眛眷眸睇睚睨睫睛睥睿睾睹瞎瞋瞑瞠瞞瞰瞶瞹瞿瞼瞽瞻矇矍矗矚矜矣矮矼砌砒礦砠礪硅碎硴碆硼碚碌碣碵碪碯磑磆磋磔碾碼磅磊磬"],["e240","磧磚磽磴礇礒礑礙礬礫祀祠祗祟祚祕祓祺祿禊禝禧齋禪禮禳禹禺秉秕秧秬秡秣稈稍稘稙稠稟禀稱稻稾稷穃穗穉穡穢穩龝穰穹穽窈窗窕窘窖窩竈窰"],["e280","窶竅竄窿邃竇竊竍竏竕竓站竚竝竡竢竦竭竰笂笏笊笆笳笘笙笞笵笨笶筐筺笄筍笋筌筅筵筥筴筧筰筱筬筮箝箘箟箍箜箚箋箒箏筝箙篋篁篌篏箴篆篝篩簑簔篦篥籠簀簇簓篳篷簗簍篶簣簧簪簟簷簫簽籌籃籔籏籀籐籘籟籤籖籥籬籵粃粐粤粭粢粫粡粨粳粲粱粮粹粽糀糅糂糘糒糜糢鬻糯糲糴糶糺紆"],["e340","紂紜紕紊絅絋紮紲紿紵絆絳絖絎絲絨絮絏絣經綉絛綏絽綛綺綮綣綵緇綽綫總綢綯緜綸綟綰緘緝緤緞緻緲緡縅縊縣縡縒縱縟縉縋縢繆繦縻縵縹繃縷"],["e380","縲縺繧繝繖繞繙繚繹繪繩繼繻纃緕繽辮繿纈纉續纒纐纓纔纖纎纛纜缸缺罅罌罍罎罐网罕罔罘罟罠罨罩罧罸羂羆羃羈羇羌羔羞羝羚羣羯羲羹羮羶羸譱翅翆翊翕翔翡翦翩翳翹飜耆耄耋耒耘耙耜耡耨耿耻聊聆聒聘聚聟聢聨聳聲聰聶聹聽聿肄肆肅肛肓肚肭冐肬胛胥胙胝胄胚胖脉胯胱脛脩脣脯腋"],["e440","隋腆脾腓腑胼腱腮腥腦腴膃膈膊膀膂膠膕膤膣腟膓膩膰膵膾膸膽臀臂膺臉臍臑臙臘臈臚臟臠臧臺臻臾舁舂舅與舊舍舐舖舩舫舸舳艀艙艘艝艚艟艤"],["e480","艢艨艪艫舮艱艷艸艾芍芒芫芟芻芬苡苣苟苒苴苳苺莓范苻苹苞茆苜茉苙茵茴茖茲茱荀茹荐荅茯茫茗茘莅莚莪莟莢莖茣莎莇莊荼莵荳荵莠莉莨菴萓菫菎菽萃菘萋菁菷萇菠菲萍萢萠莽萸蔆菻葭萪萼蕚蒄葷葫蒭葮蒂葩葆萬葯葹萵蓊葢蒹蒿蒟蓙蓍蒻蓚蓐蓁蓆蓖蒡蔡蓿蓴蔗蔘蔬蔟蔕蔔蓼蕀蕣蕘蕈"],["e540","蕁蘂蕋蕕薀薤薈薑薊薨蕭薔薛藪薇薜蕷蕾薐藉薺藏薹藐藕藝藥藜藹蘊蘓蘋藾藺蘆蘢蘚蘰蘿虍乕虔號虧虱蚓蚣蚩蚪蚋蚌蚶蚯蛄蛆蚰蛉蠣蚫蛔蛞蛩蛬"],["e580","蛟蛛蛯蜒蜆蜈蜀蜃蛻蜑蜉蜍蛹蜊蜴蜿蜷蜻蜥蜩蜚蝠蝟蝸蝌蝎蝴蝗蝨蝮蝙蝓蝣蝪蠅螢螟螂螯蟋螽蟀蟐雖螫蟄螳蟇蟆螻蟯蟲蟠蠏蠍蟾蟶蟷蠎蟒蠑蠖蠕蠢蠡蠱蠶蠹蠧蠻衄衂衒衙衞衢衫袁衾袞衵衽袵衲袂袗袒袮袙袢袍袤袰袿袱裃裄裔裘裙裝裹褂裼裴裨裲褄褌褊褓襃褞褥褪褫襁襄褻褶褸襌褝襠襞"],["e640","襦襤襭襪襯襴襷襾覃覈覊覓覘覡覩覦覬覯覲覺覽覿觀觚觜觝觧觴觸訃訖訐訌訛訝訥訶詁詛詒詆詈詼詭詬詢誅誂誄誨誡誑誥誦誚誣諄諍諂諚諫諳諧"],["e680","諤諱謔諠諢諷諞諛謌謇謚諡謖謐謗謠謳鞫謦謫謾謨譁譌譏譎證譖譛譚譫譟譬譯譴譽讀讌讎讒讓讖讙讚谺豁谿豈豌豎豐豕豢豬豸豺貂貉貅貊貍貎貔豼貘戝貭貪貽貲貳貮貶賈賁賤賣賚賽賺賻贄贅贊贇贏贍贐齎贓賍贔贖赧赭赱赳趁趙跂趾趺跏跚跖跌跛跋跪跫跟跣跼踈踉跿踝踞踐踟蹂踵踰踴蹊"],["e740","蹇蹉蹌蹐蹈蹙蹤蹠踪蹣蹕蹶蹲蹼躁躇躅躄躋躊躓躑躔躙躪躡躬躰軆躱躾軅軈軋軛軣軼軻軫軾輊輅輕輒輙輓輜輟輛輌輦輳輻輹轅轂輾轌轉轆轎轗轜"],["e780","轢轣轤辜辟辣辭辯辷迚迥迢迪迯邇迴逅迹迺逑逕逡逍逞逖逋逧逶逵逹迸遏遐遑遒逎遉逾遖遘遞遨遯遶隨遲邂遽邁邀邊邉邏邨邯邱邵郢郤扈郛鄂鄒鄙鄲鄰酊酖酘酣酥酩酳酲醋醉醂醢醫醯醪醵醴醺釀釁釉釋釐釖釟釡釛釼釵釶鈞釿鈔鈬鈕鈑鉞鉗鉅鉉鉤鉈銕鈿鉋鉐銜銖銓銛鉚鋏銹銷鋩錏鋺鍄錮"],["e840","錙錢錚錣錺錵錻鍜鍠鍼鍮鍖鎰鎬鎭鎔鎹鏖鏗鏨鏥鏘鏃鏝鏐鏈鏤鐚鐔鐓鐃鐇鐐鐶鐫鐵鐡鐺鑁鑒鑄鑛鑠鑢鑞鑪鈩鑰鑵鑷鑽鑚鑼鑾钁鑿閂閇閊閔閖閘閙"],["e880","閠閨閧閭閼閻閹閾闊濶闃闍闌闕闔闖關闡闥闢阡阨阮阯陂陌陏陋陷陜陞陝陟陦陲陬隍隘隕隗險隧隱隲隰隴隶隸隹雎雋雉雍襍雜霍雕雹霄霆霈霓霎霑霏霖霙霤霪霰霹霽霾靄靆靈靂靉靜靠靤靦靨勒靫靱靹鞅靼鞁靺鞆鞋鞏鞐鞜鞨鞦鞣鞳鞴韃韆韈韋韜韭齏韲竟韶韵頏頌頸頤頡頷頽顆顏顋顫顯顰"],["e940","顱顴顳颪颯颱颶飄飃飆飩飫餃餉餒餔餘餡餝餞餤餠餬餮餽餾饂饉饅饐饋饑饒饌饕馗馘馥馭馮馼駟駛駝駘駑駭駮駱駲駻駸騁騏騅駢騙騫騷驅驂驀驃"],["e980","騾驕驍驛驗驟驢驥驤驩驫驪骭骰骼髀髏髑髓體髞髟髢髣髦髯髫髮髴髱髷髻鬆鬘鬚鬟鬢鬣鬥鬧鬨鬩鬪鬮鬯鬲魄魃魏魍魎魑魘魴鮓鮃鮑鮖鮗鮟鮠鮨鮴鯀鯊鮹鯆鯏鯑鯒鯣鯢鯤鯔鯡鰺鯲鯱鯰鰕鰔鰉鰓鰌鰆鰈鰒鰊鰄鰮鰛鰥鰤鰡鰰鱇鰲鱆鰾鱚鱠鱧鱶鱸鳧鳬鳰鴉鴈鳫鴃鴆鴪鴦鶯鴣鴟鵄鴕鴒鵁鴿鴾鵆鵈"],["ea40","鵝鵞鵤鵑鵐鵙鵲鶉鶇鶫鵯鵺鶚鶤鶩鶲鷄鷁鶻鶸鶺鷆鷏鷂鷙鷓鷸鷦鷭鷯鷽鸚鸛鸞鹵鹹鹽麁麈麋麌麒麕麑麝麥麩麸麪麭靡黌黎黏黐黔黜點黝黠黥黨黯"],["ea80","黴黶黷黹黻黼黽鼇鼈皷鼕鼡鼬鼾齊齒齔齣齟齠齡齦齧齬齪齷齲齶龕龜龠堯槇遙瑤凜熙"],["ed40","纊褜鍈銈蓜俉炻昱棈鋹曻彅丨仡仼伀伃伹佖侒侊侚侔俍偀倢俿倞偆偰偂傔僴僘兊兤冝冾凬刕劜劦勀勛匀匇匤卲厓厲叝﨎咜咊咩哿喆坙坥垬埈埇﨏"],["ed80","塚增墲夋奓奛奝奣妤妺孖寀甯寘寬尞岦岺峵崧嵓﨑嵂嵭嶸嶹巐弡弴彧德忞恝悅悊惞惕愠惲愑愷愰憘戓抦揵摠撝擎敎昀昕昻昉昮昞昤晥晗晙晴晳暙暠暲暿曺朎朗杦枻桒柀栁桄棏﨓楨﨔榘槢樰橫橆橳橾櫢櫤毖氿汜沆汯泚洄涇浯涖涬淏淸淲淼渹湜渧渼溿澈澵濵瀅瀇瀨炅炫焏焄煜煆煇凞燁燾犱"],["ee40","犾猤猪獷玽珉珖珣珒琇珵琦琪琩琮瑢璉璟甁畯皂皜皞皛皦益睆劯砡硎硤硺礰礼神祥禔福禛竑竧靖竫箞精絈絜綷綠緖繒罇羡羽茁荢荿菇菶葈蒴蕓蕙"],["ee80","蕫﨟薰蘒﨡蠇裵訒訷詹誧誾諟諸諶譓譿賰賴贒赶﨣軏﨤逸遧郞都鄕鄧釚釗釞釭釮釤釥鈆鈐鈊鈺鉀鈼鉎鉙鉑鈹鉧銧鉷鉸鋧鋗鋙鋐﨧鋕鋠鋓錥錡鋻﨨錞鋿錝錂鍰鍗鎤鏆鏞鏸鐱鑅鑈閒隆﨩隝隯霳霻靃靍靏靑靕顗顥飯飼餧館馞驎髙髜魵魲鮏鮱鮻鰀鵰鵫鶴鸙黑"],["eeef","ⅰ",9,"￢￤＇＂"],["f040","",62],["f080","",124],["f140","",62],["f180","",124],["f240","",62],["f280","",124],["f340","",62],["f380","",124],["f440","",62],["f480","",124],["f540","",62],["f580","",124],["f640","",62],["f680","",124],["f740","",62],["f780","",124],["f840","",62],["f880","",124],["f940",""],["fa40","ⅰ",9,"Ⅰ",9,"￢￤＇＂㈱№℡∵纊褜鍈銈蓜俉炻昱棈鋹曻彅丨仡仼伀伃伹佖侒侊侚侔俍偀倢俿倞偆偰偂傔僴僘兊"],["fa80","兤冝冾凬刕劜劦勀勛匀匇匤卲厓厲叝﨎咜咊咩哿喆坙坥垬埈埇﨏塚增墲夋奓奛奝奣妤妺孖寀甯寘寬尞岦岺峵崧嵓﨑嵂嵭嶸嶹巐弡弴彧德忞恝悅悊惞惕愠惲愑愷愰憘戓抦揵摠撝擎敎昀昕昻昉昮昞昤晥晗晙晴晳暙暠暲暿曺朎朗杦枻桒柀栁桄棏﨓楨﨔榘槢樰橫橆橳橾櫢櫤毖氿汜沆汯泚洄涇浯"],["fb40","涖涬淏淸淲淼渹湜渧渼溿澈澵濵瀅瀇瀨炅炫焏焄煜煆煇凞燁燾犱犾猤猪獷玽珉珖珣珒琇珵琦琪琩琮瑢璉璟甁畯皂皜皞皛皦益睆劯砡硎硤硺礰礼神"],["fb80","祥禔福禛竑竧靖竫箞精絈絜綷綠緖繒罇羡羽茁荢荿菇菶葈蒴蕓蕙蕫﨟薰蘒﨡蠇裵訒訷詹誧誾諟諸諶譓譿賰賴贒赶﨣軏﨤逸遧郞都鄕鄧釚釗釞釭釮釤釥鈆鈐鈊鈺鉀鈼鉎鉙鉑鈹鉧銧鉷鉸鋧鋗鋙鋐﨧鋕鋠鋓錥錡鋻﨨錞鋿錝錂鍰鍗鎤鏆鏞鏸鐱鑅鑈閒隆﨩隝隯霳霻靃靍靏靑靕顗顥飯飼餧館馞驎髙"],["fc40","髜魵魲鮏鮱鮻鰀鵰鵫鶴鸙黑"]]
-
-/***/ }),
-/* 722 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var Buffer = __webpack_require__(15).Buffer;
-
-// Note: UTF16-LE (or UCS2) codec is Node.js native. See encodings/internal.js
-
-// == UTF16-BE codec. ==========================================================
-
-exports.utf16be = Utf16BECodec;
-function Utf16BECodec() {
-}
-
-Utf16BECodec.prototype.encoder = Utf16BEEncoder;
-Utf16BECodec.prototype.decoder = Utf16BEDecoder;
-Utf16BECodec.prototype.bomAware = true;
-
-
-// -- Encoding
-
-function Utf16BEEncoder() {
-}
-
-Utf16BEEncoder.prototype.write = function(str) {
-    var buf = Buffer.from(str, 'ucs2');
-    for (var i = 0; i < buf.length; i += 2) {
-        var tmp = buf[i]; buf[i] = buf[i+1]; buf[i+1] = tmp;
-    }
-    return buf;
-}
-
-Utf16BEEncoder.prototype.end = function() {
-}
-
-
-// -- Decoding
-
-function Utf16BEDecoder() {
-    this.overflowByte = -1;
-}
-
-Utf16BEDecoder.prototype.write = function(buf) {
-    if (buf.length == 0)
-        return '';
-
-    var buf2 = Buffer.alloc(buf.length + 1),
-        i = 0, j = 0;
-
-    if (this.overflowByte !== -1) {
-        buf2[0] = buf[0];
-        buf2[1] = this.overflowByte;
-        i = 1; j = 2;
-    }
-
-    for (; i < buf.length-1; i += 2, j+= 2) {
-        buf2[j] = buf[i+1];
-        buf2[j+1] = buf[i];
-    }
-
-    this.overflowByte = (i == buf.length-1) ? buf[buf.length-1] : -1;
-
-    return buf2.slice(0, j).toString('ucs2');
-}
-
-Utf16BEDecoder.prototype.end = function() {
-}
-
-
-// == UTF-16 codec =============================================================
-// Decoder chooses automatically from UTF-16LE and UTF-16BE using BOM and space-based heuristic.
-// Defaults to UTF-16LE, as it's prevalent and default in Node.
-// http://en.wikipedia.org/wiki/UTF-16 and http://encoding.spec.whatwg.org/#utf-16le
-// Decoder default can be changed: iconv.decode(buf, 'utf16', {defaultEncoding: 'utf-16be'});
-
-// Encoder uses UTF-16LE and prepends BOM (which can be overridden with addBOM: false).
-
-exports.utf16 = Utf16Codec;
-function Utf16Codec(codecOptions, iconv) {
-    this.iconv = iconv;
-}
-
-Utf16Codec.prototype.encoder = Utf16Encoder;
-Utf16Codec.prototype.decoder = Utf16Decoder;
-
-
-// -- Encoding (pass-through)
-
-function Utf16Encoder(options, codec) {
-    options = options || {};
-    if (options.addBOM === undefined)
-        options.addBOM = true;
-    this.encoder = codec.iconv.getEncoder('utf-16le', options);
-}
-
-Utf16Encoder.prototype.write = function(str) {
-    return this.encoder.write(str);
-}
-
-Utf16Encoder.prototype.end = function() {
-    return this.encoder.end();
-}
-
-
-// -- Decoding
-
-function Utf16Decoder(options, codec) {
-    this.decoder = null;
-    this.initialBytes = [];
-    this.initialBytesLen = 0;
-
-    this.options = options || {};
-    this.iconv = codec.iconv;
-}
-
-Utf16Decoder.prototype.write = function(buf) {
-    if (!this.decoder) {
-        // Codec is not chosen yet. Accumulate initial bytes.
-        this.initialBytes.push(buf);
-        this.initialBytesLen += buf.length;
-        
-        if (this.initialBytesLen < 16) // We need more bytes to use space heuristic (see below)
-            return '';
-
-        // We have enough bytes -> detect endianness.
-        var buf = Buffer.concat(this.initialBytes),
-            encoding = detectEncoding(buf, this.options.defaultEncoding);
-        this.decoder = this.iconv.getDecoder(encoding, this.options);
-        this.initialBytes.length = this.initialBytesLen = 0;
-    }
-
-    return this.decoder.write(buf);
-}
-
-Utf16Decoder.prototype.end = function() {
-    if (!this.decoder) {
-        var buf = Buffer.concat(this.initialBytes),
-            encoding = detectEncoding(buf, this.options.defaultEncoding);
-        this.decoder = this.iconv.getDecoder(encoding, this.options);
-
-        var res = this.decoder.write(buf),
-            trail = this.decoder.end();
-
-        return trail ? (res + trail) : res;
-    }
-    return this.decoder.end();
-}
-
-function detectEncoding(buf, defaultEncoding) {
-    var enc = defaultEncoding || 'utf-16le';
-
-    if (buf.length >= 2) {
-        // Check BOM.
-        if (buf[0] == 0xFE && buf[1] == 0xFF) // UTF-16BE BOM
-            enc = 'utf-16be';
-        else if (buf[0] == 0xFF && buf[1] == 0xFE) // UTF-16LE BOM
-            enc = 'utf-16le';
-        else {
-            // No BOM found. Try to deduce encoding from initial content.
-            // Most of the time, the content has ASCII chars (U+00**), but the opposite (U+**00) is uncommon.
-            // So, we count ASCII as if it was LE or BE, and decide from that.
-            var asciiCharsLE = 0, asciiCharsBE = 0, // Counts of chars in both positions
-                _len = Math.min(buf.length - (buf.length % 2), 64); // Len is always even.
-
-            for (var i = 0; i < _len; i += 2) {
-                if (buf[i] === 0 && buf[i+1] !== 0) asciiCharsBE++;
-                if (buf[i] !== 0 && buf[i+1] === 0) asciiCharsLE++;
-            }
-
-            if (asciiCharsBE > asciiCharsLE)
-                enc = 'utf-16be';
-            else if (asciiCharsBE < asciiCharsLE)
-                enc = 'utf-16le';
-        }
-    }
-
-    return enc;
-}
-
-
-
-
-/***/ }),
-/* 723 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var Buffer = __webpack_require__(15).Buffer;
-
-// UTF-7 codec, according to https://tools.ietf.org/html/rfc2152
-// See also below a UTF-7-IMAP codec, according to http://tools.ietf.org/html/rfc3501#section-5.1.3
-
-exports.utf7 = Utf7Codec;
-exports.unicode11utf7 = 'utf7'; // Alias UNICODE-1-1-UTF-7
-function Utf7Codec(codecOptions, iconv) {
-    this.iconv = iconv;
-};
-
-Utf7Codec.prototype.encoder = Utf7Encoder;
-Utf7Codec.prototype.decoder = Utf7Decoder;
-Utf7Codec.prototype.bomAware = true;
-
-
-// -- Encoding
-
-var nonDirectChars = /[^A-Za-z0-9'\(\),-\.\/:\? \n\r\t]+/g;
-
-function Utf7Encoder(options, codec) {
-    this.iconv = codec.iconv;
-}
-
-Utf7Encoder.prototype.write = function(str) {
-    // Naive implementation.
-    // Non-direct chars are encoded as "+<base64>-"; single "+" char is encoded as "+-".
-    return Buffer.from(str.replace(nonDirectChars, function(chunk) {
-        return "+" + (chunk === '+' ? '' : 
-            this.iconv.encode(chunk, 'utf16-be').toString('base64').replace(/=+$/, '')) 
-            + "-";
-    }.bind(this)));
-}
-
-Utf7Encoder.prototype.end = function() {
-}
-
-
-// -- Decoding
-
-function Utf7Decoder(options, codec) {
-    this.iconv = codec.iconv;
-    this.inBase64 = false;
-    this.base64Accum = '';
-}
-
-var base64Regex = /[A-Za-z0-9\/+]/;
-var base64Chars = [];
-for (var i = 0; i < 256; i++)
-    base64Chars[i] = base64Regex.test(String.fromCharCode(i));
-
-var plusChar = '+'.charCodeAt(0), 
-    minusChar = '-'.charCodeAt(0),
-    andChar = '&'.charCodeAt(0);
-
-Utf7Decoder.prototype.write = function(buf) {
-    var res = "", lastI = 0,
-        inBase64 = this.inBase64,
-        base64Accum = this.base64Accum;
-
-    // The decoder is more involved as we must handle chunks in stream.
-
-    for (var i = 0; i < buf.length; i++) {
-        if (!inBase64) { // We're in direct mode.
-            // Write direct chars until '+'
-            if (buf[i] == plusChar) {
-                res += this.iconv.decode(buf.slice(lastI, i), "ascii"); // Write direct chars.
-                lastI = i+1;
-                inBase64 = true;
-            }
-        } else { // We decode base64.
-            if (!base64Chars[buf[i]]) { // Base64 ended.
-                if (i == lastI && buf[i] == minusChar) {// "+-" -> "+"
-                    res += "+";
-                } else {
-                    var b64str = base64Accum + buf.slice(lastI, i).toString();
-                    res += this.iconv.decode(Buffer.from(b64str, 'base64'), "utf16-be");
-                }
-
-                if (buf[i] != minusChar) // Minus is absorbed after base64.
-                    i--;
-
-                lastI = i+1;
-                inBase64 = false;
-                base64Accum = '';
-            }
-        }
-    }
-
-    if (!inBase64) {
-        res += this.iconv.decode(buf.slice(lastI), "ascii"); // Write direct chars.
-    } else {
-        var b64str = base64Accum + buf.slice(lastI).toString();
-
-        var canBeDecoded = b64str.length - (b64str.length % 8); // Minimal chunk: 2 quads -> 2x3 bytes -> 3 chars.
-        base64Accum = b64str.slice(canBeDecoded); // The rest will be decoded in future.
-        b64str = b64str.slice(0, canBeDecoded);
-
-        res += this.iconv.decode(Buffer.from(b64str, 'base64'), "utf16-be");
-    }
-
-    this.inBase64 = inBase64;
-    this.base64Accum = base64Accum;
-
-    return res;
-}
-
-Utf7Decoder.prototype.end = function() {
-    var res = "";
-    if (this.inBase64 && this.base64Accum.length > 0)
-        res = this.iconv.decode(Buffer.from(this.base64Accum, 'base64'), "utf16-be");
-
-    this.inBase64 = false;
-    this.base64Accum = '';
-    return res;
-}
-
-
-// UTF-7-IMAP codec.
-// RFC3501 Sec. 5.1.3 Modified UTF-7 (http://tools.ietf.org/html/rfc3501#section-5.1.3)
-// Differences:
-//  * Base64 part is started by "&" instead of "+"
-//  * Direct characters are 0x20-0x7E, except "&" (0x26)
-//  * In Base64, "," is used instead of "/"
-//  * Base64 must not be used to represent direct characters.
-//  * No implicit shift back from Base64 (should always end with '-')
-//  * String must end in non-shifted position.
-//  * "-&" while in base64 is not allowed.
-
-
-exports.utf7imap = Utf7IMAPCodec;
-function Utf7IMAPCodec(codecOptions, iconv) {
-    this.iconv = iconv;
-};
-
-Utf7IMAPCodec.prototype.encoder = Utf7IMAPEncoder;
-Utf7IMAPCodec.prototype.decoder = Utf7IMAPDecoder;
-Utf7IMAPCodec.prototype.bomAware = true;
-
-
-// -- Encoding
-
-function Utf7IMAPEncoder(options, codec) {
-    this.iconv = codec.iconv;
-    this.inBase64 = false;
-    this.base64Accum = Buffer.alloc(6);
-    this.base64AccumIdx = 0;
-}
-
-Utf7IMAPEncoder.prototype.write = function(str) {
-    var inBase64 = this.inBase64,
-        base64Accum = this.base64Accum,
-        base64AccumIdx = this.base64AccumIdx,
-        buf = Buffer.alloc(str.length*5 + 10), bufIdx = 0;
-
-    for (var i = 0; i < str.length; i++) {
-        var uChar = str.charCodeAt(i);
-        if (0x20 <= uChar && uChar <= 0x7E) { // Direct character or '&'.
-            if (inBase64) {
-                if (base64AccumIdx > 0) {
-                    bufIdx += buf.write(base64Accum.slice(0, base64AccumIdx).toString('base64').replace(/\//g, ',').replace(/=+$/, ''), bufIdx);
-                    base64AccumIdx = 0;
-                }
-
-                buf[bufIdx++] = minusChar; // Write '-', then go to direct mode.
-                inBase64 = false;
-            }
-
-            if (!inBase64) {
-                buf[bufIdx++] = uChar; // Write direct character
-
-                if (uChar === andChar)  // Ampersand -> '&-'
-                    buf[bufIdx++] = minusChar;
-            }
-
-        } else { // Non-direct character
-            if (!inBase64) {
-                buf[bufIdx++] = andChar; // Write '&', then go to base64 mode.
-                inBase64 = true;
-            }
-            if (inBase64) {
-                base64Accum[base64AccumIdx++] = uChar >> 8;
-                base64Accum[base64AccumIdx++] = uChar & 0xFF;
-
-                if (base64AccumIdx == base64Accum.length) {
-                    bufIdx += buf.write(base64Accum.toString('base64').replace(/\//g, ','), bufIdx);
-                    base64AccumIdx = 0;
-                }
-            }
-        }
-    }
-
-    this.inBase64 = inBase64;
-    this.base64AccumIdx = base64AccumIdx;
-
-    return buf.slice(0, bufIdx);
-}
-
-Utf7IMAPEncoder.prototype.end = function() {
-    var buf = Buffer.alloc(10), bufIdx = 0;
-    if (this.inBase64) {
-        if (this.base64AccumIdx > 0) {
-            bufIdx += buf.write(this.base64Accum.slice(0, this.base64AccumIdx).toString('base64').replace(/\//g, ',').replace(/=+$/, ''), bufIdx);
-            this.base64AccumIdx = 0;
-        }
-
-        buf[bufIdx++] = minusChar; // Write '-', then go to direct mode.
-        this.inBase64 = false;
-    }
-
-    return buf.slice(0, bufIdx);
-}
-
-
-// -- Decoding
-
-function Utf7IMAPDecoder(options, codec) {
-    this.iconv = codec.iconv;
-    this.inBase64 = false;
-    this.base64Accum = '';
-}
-
-var base64IMAPChars = base64Chars.slice();
-base64IMAPChars[','.charCodeAt(0)] = true;
-
-Utf7IMAPDecoder.prototype.write = function(buf) {
-    var res = "", lastI = 0,
-        inBase64 = this.inBase64,
-        base64Accum = this.base64Accum;
-
-    // The decoder is more involved as we must handle chunks in stream.
-    // It is forgiving, closer to standard UTF-7 (for example, '-' is optional at the end).
-
-    for (var i = 0; i < buf.length; i++) {
-        if (!inBase64) { // We're in direct mode.
-            // Write direct chars until '&'
-            if (buf[i] == andChar) {
-                res += this.iconv.decode(buf.slice(lastI, i), "ascii"); // Write direct chars.
-                lastI = i+1;
-                inBase64 = true;
-            }
-        } else { // We decode base64.
-            if (!base64IMAPChars[buf[i]]) { // Base64 ended.
-                if (i == lastI && buf[i] == minusChar) { // "&-" -> "&"
-                    res += "&";
-                } else {
-                    var b64str = base64Accum + buf.slice(lastI, i).toString().replace(/,/g, '/');
-                    res += this.iconv.decode(Buffer.from(b64str, 'base64'), "utf16-be");
-                }
-
-                if (buf[i] != minusChar) // Minus may be absorbed after base64.
-                    i--;
-
-                lastI = i+1;
-                inBase64 = false;
-                base64Accum = '';
-            }
-        }
-    }
-
-    if (!inBase64) {
-        res += this.iconv.decode(buf.slice(lastI), "ascii"); // Write direct chars.
-    } else {
-        var b64str = base64Accum + buf.slice(lastI).toString().replace(/,/g, '/');
-
-        var canBeDecoded = b64str.length - (b64str.length % 8); // Minimal chunk: 2 quads -> 2x3 bytes -> 3 chars.
-        base64Accum = b64str.slice(canBeDecoded); // The rest will be decoded in future.
-        b64str = b64str.slice(0, canBeDecoded);
-
-        res += this.iconv.decode(Buffer.from(b64str, 'base64'), "utf16-be");
-    }
-
-    this.inBase64 = inBase64;
-    this.base64Accum = base64Accum;
-
-    return res;
-}
-
-Utf7IMAPDecoder.prototype.end = function() {
-    var res = "";
-    if (this.inBase64 && this.base64Accum.length > 0)
-        res = this.iconv.decode(Buffer.from(this.base64Accum, 'base64'), "utf16-be");
-
-    this.inBase64 = false;
-    this.base64Accum = '';
-    return res;
-}
-
-
-
-
-/***/ }),
-/* 724 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var BOMChar = '\uFEFF';
-
-exports.PrependBOM = PrependBOMWrapper
-function PrependBOMWrapper(encoder, options) {
-    this.encoder = encoder;
-    this.addBOM = true;
-}
-
-PrependBOMWrapper.prototype.write = function(str) {
-    if (this.addBOM) {
-        str = BOMChar + str;
-        this.addBOM = false;
-    }
-
-    return this.encoder.write(str);
-}
-
-PrependBOMWrapper.prototype.end = function() {
-    return this.encoder.end();
-}
-
-
-//------------------------------------------------------------------------------
-
-exports.StripBOM = StripBOMWrapper;
-function StripBOMWrapper(decoder, options) {
-    this.decoder = decoder;
-    this.pass = false;
-    this.options = options || {};
-}
-
-StripBOMWrapper.prototype.write = function(buf) {
-    var res = this.decoder.write(buf);
-    if (this.pass || !res)
-        return res;
-
-    if (res[0] === BOMChar) {
-        res = res.slice(1);
-        if (typeof this.options.stripBOM === 'function')
-            this.options.stripBOM();
-    }
-
-    this.pass = true;
-    return res;
-}
-
-StripBOMWrapper.prototype.end = function() {
-    return this.decoder.end();
-}
-
-
-
-/***/ }),
-/* 725 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var Buffer = __webpack_require__(64).Buffer;
-// Note: not polyfilled with safer-buffer on a purpose, as overrides Buffer
-
-// == Extend Node primitives to use iconv-lite =================================
-
-module.exports = function (iconv) {
-    var original = undefined; // Place to keep original methods.
-
-    // Node authors rewrote Buffer internals to make it compatible with
-    // Uint8Array and we cannot patch key functions since then.
-    // Note: this does use older Buffer API on a purpose
-    iconv.supportsNodeEncodingsExtension = !(Buffer.from || new Buffer(0) instanceof Uint8Array);
-
-    iconv.extendNodeEncodings = function extendNodeEncodings() {
-        if (original) return;
-        original = {};
-
-        if (!iconv.supportsNodeEncodingsExtension) {
-            console.error("ACTION NEEDED: require('iconv-lite').extendNodeEncodings() is not supported in your version of Node");
-            console.error("See more info at https://github.com/ashtuchkin/iconv-lite/wiki/Node-v4-compatibility");
-            return;
-        }
-
-        var nodeNativeEncodings = {
-            'hex': true, 'utf8': true, 'utf-8': true, 'ascii': true, 'binary': true, 
-            'base64': true, 'ucs2': true, 'ucs-2': true, 'utf16le': true, 'utf-16le': true,
-        };
-
-        Buffer.isNativeEncoding = function(enc) {
-            return enc && nodeNativeEncodings[enc.toLowerCase()];
-        }
-
-        // -- SlowBuffer -----------------------------------------------------------
-        var SlowBuffer = __webpack_require__(64).SlowBuffer;
-
-        original.SlowBufferToString = SlowBuffer.prototype.toString;
-        SlowBuffer.prototype.toString = function(encoding, start, end) {
-            encoding = String(encoding || 'utf8').toLowerCase();
-
-            // Use native conversion when possible
-            if (Buffer.isNativeEncoding(encoding))
-                return original.SlowBufferToString.call(this, encoding, start, end);
-
-            // Otherwise, use our decoding method.
-            if (typeof start == 'undefined') start = 0;
-            if (typeof end == 'undefined') end = this.length;
-            return iconv.decode(this.slice(start, end), encoding);
-        }
-
-        original.SlowBufferWrite = SlowBuffer.prototype.write;
-        SlowBuffer.prototype.write = function(string, offset, length, encoding) {
-            // Support both (string, offset, length, encoding)
-            // and the legacy (string, encoding, offset, length)
-            if (isFinite(offset)) {
-                if (!isFinite(length)) {
-                    encoding = length;
-                    length = undefined;
-                }
-            } else {  // legacy
-                var swap = encoding;
-                encoding = offset;
-                offset = length;
-                length = swap;
-            }
-
-            offset = +offset || 0;
-            var remaining = this.length - offset;
-            if (!length) {
-                length = remaining;
-            } else {
-                length = +length;
-                if (length > remaining) {
-                    length = remaining;
-                }
-            }
-            encoding = String(encoding || 'utf8').toLowerCase();
-
-            // Use native conversion when possible
-            if (Buffer.isNativeEncoding(encoding))
-                return original.SlowBufferWrite.call(this, string, offset, length, encoding);
-
-            if (string.length > 0 && (length < 0 || offset < 0))
-                throw new RangeError('attempt to write beyond buffer bounds');
-
-            // Otherwise, use our encoding method.
-            var buf = iconv.encode(string, encoding);
-            if (buf.length < length) length = buf.length;
-            buf.copy(this, offset, 0, length);
-            return length;
-        }
-
-        // -- Buffer ---------------------------------------------------------------
-
-        original.BufferIsEncoding = Buffer.isEncoding;
-        Buffer.isEncoding = function(encoding) {
-            return Buffer.isNativeEncoding(encoding) || iconv.encodingExists(encoding);
-        }
-
-        original.BufferByteLength = Buffer.byteLength;
-        Buffer.byteLength = SlowBuffer.byteLength = function(str, encoding) {
-            encoding = String(encoding || 'utf8').toLowerCase();
-
-            // Use native conversion when possible
-            if (Buffer.isNativeEncoding(encoding))
-                return original.BufferByteLength.call(this, str, encoding);
-
-            // Slow, I know, but we don't have a better way yet.
-            return iconv.encode(str, encoding).length;
-        }
-
-        original.BufferToString = Buffer.prototype.toString;
-        Buffer.prototype.toString = function(encoding, start, end) {
-            encoding = String(encoding || 'utf8').toLowerCase();
-
-            // Use native conversion when possible
-            if (Buffer.isNativeEncoding(encoding))
-                return original.BufferToString.call(this, encoding, start, end);
-
-            // Otherwise, use our decoding method.
-            if (typeof start == 'undefined') start = 0;
-            if (typeof end == 'undefined') end = this.length;
-            return iconv.decode(this.slice(start, end), encoding);
-        }
-
-        original.BufferWrite = Buffer.prototype.write;
-        Buffer.prototype.write = function(string, offset, length, encoding) {
-            var _offset = offset, _length = length, _encoding = encoding;
-            // Support both (string, offset, length, encoding)
-            // and the legacy (string, encoding, offset, length)
-            if (isFinite(offset)) {
-                if (!isFinite(length)) {
-                    encoding = length;
-                    length = undefined;
-                }
-            } else {  // legacy
-                var swap = encoding;
-                encoding = offset;
-                offset = length;
-                length = swap;
-            }
-
-            encoding = String(encoding || 'utf8').toLowerCase();
-
-            // Use native conversion when possible
-            if (Buffer.isNativeEncoding(encoding))
-                return original.BufferWrite.call(this, string, _offset, _length, _encoding);
-
-            offset = +offset || 0;
-            var remaining = this.length - offset;
-            if (!length) {
-                length = remaining;
-            } else {
-                length = +length;
-                if (length > remaining) {
-                    length = remaining;
-                }
-            }
-
-            if (string.length > 0 && (length < 0 || offset < 0))
-                throw new RangeError('attempt to write beyond buffer bounds');
-
-            // Otherwise, use our encoding method.
-            var buf = iconv.encode(string, encoding);
-            if (buf.length < length) length = buf.length;
-            buf.copy(this, offset, 0, length);
-            return length;
-
-            // TODO: Set _charsWritten.
-        }
-
-
-        // -- Readable -------------------------------------------------------------
-        if (iconv.supportsStreams) {
-            var Readable = __webpack_require__(23).Readable;
-
-            original.ReadableSetEncoding = Readable.prototype.setEncoding;
-            Readable.prototype.setEncoding = function setEncoding(enc, options) {
-                // Use our own decoder, it has the same interface.
-                // We cannot use original function as it doesn't handle BOM-s.
-                this._readableState.decoder = iconv.getDecoder(enc, options);
-                this._readableState.encoding = enc;
-            }
-
-            Readable.prototype.collect = iconv._collect;
-        }
-    }
-
-    // Remove iconv-lite Node primitive extensions.
-    iconv.undoExtendNodeEncodings = function undoExtendNodeEncodings() {
-        if (!iconv.supportsNodeEncodingsExtension)
-            return;
-        if (!original)
-            throw new Error("require('iconv-lite').undoExtendNodeEncodings(): Nothing to undo; extendNodeEncodings() is not called.")
-
-        delete Buffer.isNativeEncoding;
-
-        var SlowBuffer = __webpack_require__(64).SlowBuffer;
-
-        SlowBuffer.prototype.toString = original.SlowBufferToString;
-        SlowBuffer.prototype.write = original.SlowBufferWrite;
-
-        Buffer.isEncoding = original.BufferIsEncoding;
-        Buffer.byteLength = original.BufferByteLength;
-        Buffer.prototype.toString = original.BufferToString;
-        Buffer.prototype.write = original.BufferWrite;
-
-        if (iconv.supportsStreams) {
-            var Readable = __webpack_require__(23).Readable;
-
-            Readable.prototype.setEncoding = original.ReadableSetEncoding;
-            delete Readable.prototype.collect;
-        }
-
-        original = undefined;
-    }
-}
-
-
-/***/ }),
-/* 726 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// Some environments don't have global Buffer (e.g. React Native).
-// Solution would be installing npm modules "buffer" and "stream" explicitly.
-var Buffer = __webpack_require__(15).Buffer;
-
-var bomHandling = __webpack_require__(724),
-    iconv = module.exports;
-
-// All codecs and aliases are kept here, keyed by encoding name/alias.
-// They are lazy loaded in `iconv.getCodec` from `encodings/index.js`.
-iconv.encodings = null;
-
-// Characters emitted in case of error.
-iconv.defaultCharUnicode = '�';
-iconv.defaultCharSingleByte = '?';
-
-// Public API.
-iconv.encode = function encode(str, encoding, options) {
-    str = "" + (str || ""); // Ensure string.
-
-    var encoder = iconv.getEncoder(encoding, options);
-
-    var res = encoder.write(str);
-    var trail = encoder.end();
-    
-    return (trail && trail.length > 0) ? Buffer.concat([res, trail]) : res;
-}
-
-iconv.decode = function decode(buf, encoding, options) {
-    if (typeof buf === 'string') {
-        if (!iconv.skipDecodeWarning) {
-            console.error('Iconv-lite warning: decode()-ing strings is deprecated. Refer to https://github.com/ashtuchkin/iconv-lite/wiki/Use-Buffers-when-decoding');
-            iconv.skipDecodeWarning = true;
-        }
-
-        buf = Buffer.from("" + (buf || ""), "binary"); // Ensure buffer.
-    }
-
-    var decoder = iconv.getDecoder(encoding, options);
-
-    var res = decoder.write(buf);
-    var trail = decoder.end();
-
-    return trail ? (res + trail) : res;
-}
-
-iconv.encodingExists = function encodingExists(enc) {
-    try {
-        iconv.getCodec(enc);
-        return true;
-    } catch (e) {
-        return false;
-    }
-}
-
-// Legacy aliases to convert functions
-iconv.toEncoding = iconv.encode;
-iconv.fromEncoding = iconv.decode;
-
-// Search for a codec in iconv.encodings. Cache codec data in iconv._codecDataCache.
-iconv._codecDataCache = {};
-iconv.getCodec = function getCodec(encoding) {
-    if (!iconv.encodings)
-        iconv.encodings = __webpack_require__(712); // Lazy load all encoding definitions.
-    
-    // Canonicalize encoding name: strip all non-alphanumeric chars and appended year.
-    var enc = iconv._canonicalizeEncoding(encoding);
-
-    // Traverse iconv.encodings to find actual codec.
-    var codecOptions = {};
-    while (true) {
-        var codec = iconv._codecDataCache[enc];
-        if (codec)
-            return codec;
-
-        var codecDef = iconv.encodings[enc];
-
-        switch (typeof codecDef) {
-            case "string": // Direct alias to other encoding.
-                enc = codecDef;
-                break;
-
-            case "object": // Alias with options. Can be layered.
-                for (var key in codecDef)
-                    codecOptions[key] = codecDef[key];
-
-                if (!codecOptions.encodingName)
-                    codecOptions.encodingName = enc;
-                
-                enc = codecDef.type;
-                break;
-
-            case "function": // Codec itself.
-                if (!codecOptions.encodingName)
-                    codecOptions.encodingName = enc;
-
-                // The codec function must load all tables and return object with .encoder and .decoder methods.
-                // It'll be called only once (for each different options object).
-                codec = new codecDef(codecOptions, iconv);
-
-                iconv._codecDataCache[codecOptions.encodingName] = codec; // Save it to be reused later.
-                return codec;
-
-            default:
-                throw new Error("Encoding not recognized: '" + encoding + "' (searched as: '"+enc+"')");
-        }
-    }
-}
-
-iconv._canonicalizeEncoding = function(encoding) {
-    // Canonicalize encoding name: strip all non-alphanumeric chars and appended year.
-    return (''+encoding).toLowerCase().replace(/:\d{4}$|[^0-9a-z]/g, "");
-}
-
-iconv.getEncoder = function getEncoder(encoding, options) {
-    var codec = iconv.getCodec(encoding),
-        encoder = new codec.encoder(options, codec);
-
-    if (codec.bomAware && options && options.addBOM)
-        encoder = new bomHandling.PrependBOM(encoder, options);
-
-    return encoder;
-}
-
-iconv.getDecoder = function getDecoder(encoding, options) {
-    var codec = iconv.getCodec(encoding),
-        decoder = new codec.decoder(options, codec);
-
-    if (codec.bomAware && !(options && options.stripBOM === false))
-        decoder = new bomHandling.StripBOM(decoder, options);
-
-    return decoder;
-}
-
-
-// Load extensions in Node. All of them are omitted in Browserify build via 'browser' field in package.json.
-var nodeVer = typeof process !== 'undefined' && process.versions && process.versions.node;
-if (nodeVer) {
-
-    // Load streaming support in Node v0.10+
-    var nodeVerArr = nodeVer.split(".").map(Number);
-    if (nodeVerArr[0] > 0 || nodeVerArr[1] >= 10) {
-        __webpack_require__(727)(iconv);
-    }
-
-    // Load Node primitive extensions.
-    __webpack_require__(725)(iconv);
-}
-
-if (false) {
-    console.error("iconv-lite warning: javascript files use encoding different from utf-8. See https://github.com/ashtuchkin/iconv-lite/wiki/Javascript-source-file-encodings for more info.");
-}
-
-
-/***/ }),
-/* 727 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var Buffer = __webpack_require__(64).Buffer,
-    Transform = __webpack_require__(23).Transform;
-
-
-// == Exports ==================================================================
-module.exports = function(iconv) {
-    
-    // Additional Public API.
-    iconv.encodeStream = function encodeStream(encoding, options) {
-        return new IconvLiteEncoderStream(iconv.getEncoder(encoding, options), options);
-    }
-
-    iconv.decodeStream = function decodeStream(encoding, options) {
-        return new IconvLiteDecoderStream(iconv.getDecoder(encoding, options), options);
-    }
-
-    iconv.supportsStreams = true;
-
-
-    // Not published yet.
-    iconv.IconvLiteEncoderStream = IconvLiteEncoderStream;
-    iconv.IconvLiteDecoderStream = IconvLiteDecoderStream;
-    iconv._collect = IconvLiteDecoderStream.prototype.collect;
-};
-
-
-// == Encoder stream =======================================================
-function IconvLiteEncoderStream(conv, options) {
-    this.conv = conv;
-    options = options || {};
-    options.decodeStrings = false; // We accept only strings, so we don't need to decode them.
-    Transform.call(this, options);
-}
-
-IconvLiteEncoderStream.prototype = Object.create(Transform.prototype, {
-    constructor: { value: IconvLiteEncoderStream }
-});
-
-IconvLiteEncoderStream.prototype._transform = function(chunk, encoding, done) {
-    if (typeof chunk != 'string')
-        return done(new Error("Iconv encoding stream needs strings as its input."));
-    try {
-        var res = this.conv.write(chunk);
-        if (res && res.length) this.push(res);
-        done();
-    }
-    catch (e) {
-        done(e);
-    }
-}
-
-IconvLiteEncoderStream.prototype._flush = function(done) {
-    try {
-        var res = this.conv.end();
-        if (res && res.length) this.push(res);
-        done();
-    }
-    catch (e) {
-        done(e);
-    }
-}
-
-IconvLiteEncoderStream.prototype.collect = function(cb) {
-    var chunks = [];
-    this.on('error', cb);
-    this.on('data', function(chunk) { chunks.push(chunk); });
-    this.on('end', function() {
-        cb(null, Buffer.concat(chunks));
-    });
-    return this;
-}
-
-
-// == Decoder stream =======================================================
-function IconvLiteDecoderStream(conv, options) {
-    this.conv = conv;
-    options = options || {};
-    options.encoding = this.encoding = 'utf8'; // We output strings.
-    Transform.call(this, options);
-}
-
-IconvLiteDecoderStream.prototype = Object.create(Transform.prototype, {
-    constructor: { value: IconvLiteDecoderStream }
-});
-
-IconvLiteDecoderStream.prototype._transform = function(chunk, encoding, done) {
-    if (!Buffer.isBuffer(chunk))
-        return done(new Error("Iconv decoding stream needs buffers as its input."));
-    try {
-        var res = this.conv.write(chunk);
-        if (res && res.length) this.push(res, this.encoding);
-        done();
-    }
-    catch (e) {
-        done(e);
-    }
-}
-
-IconvLiteDecoderStream.prototype._flush = function(done) {
-    try {
-        var res = this.conv.end();
-        if (res && res.length) this.push(res, this.encoding);                
-        done();
-    }
-    catch (e) {
-        done(e);
-    }
-}
-
-IconvLiteDecoderStream.prototype.collect = function(cb) {
-    var res = '';
-    this.on('error', cb);
-    this.on('data', function(chunk) { res += chunk; });
-    this.on('end', function() {
-        cb(null, res);
-    });
-    return this;
-}
-
-
-
-/***/ }),
-/* 728 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const stripAnsi = __webpack_require__(329);
-const isFullwidthCodePoint = __webpack_require__(736);
-
-module.exports = str => {
-	if (typeof str !== 'string' || str.length === 0) {
-		return 0;
-	}
-
-	str = stripAnsi(str);
-
-	let width = 0;
-
-	for (let i = 0; i < str.length; i++) {
-		const code = str.codePointAt(i);
-
-		// Ignore control characters
-		if (code <= 0x1F || (code >= 0x7F && code <= 0x9F)) {
-			continue;
-		}
-
-		// Ignore combining characters
-		if (code >= 0x300 && code <= 0x36F) {
-			continue;
-		}
-
-		// Surrogates
-		if (code > 0xFFFF) {
-			i++;
-		}
-
-		width += isFullwidthCodePoint(code) ? 2 : 1;
-	}
-
-	return width;
-};
-
-
-/***/ }),
-/* 729 */
-/***/ (function(module, exports) {
-
-/*!
- * Determine if an object is a Buffer
- *
- * @author   Feross Aboukhadijeh <https://feross.org>
- * @license  MIT
- */
-
-// The _isBuffer check is for Safari 5-7 support, because it's missing
-// Object.prototype.constructor. Remove this eventually
-module.exports = function (obj) {
-  return obj != null && (isBuffer(obj) || isSlowBuffer(obj) || !!obj._isBuffer)
-}
-
-function isBuffer (obj) {
-  return !!obj.constructor && typeof obj.constructor.isBuffer === 'function' && obj.constructor.isBuffer(obj)
-}
-
-// For Node v0.10 support. Remove this eventually.
-function isSlowBuffer (obj) {
-  return typeof obj.readFloatLE === 'function' && typeof obj.slice === 'function' && isBuffer(obj.slice(0, 0))
-}
-
-
-/***/ }),
-/* 730 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const builtinModules = __webpack_require__(731);
-
-const moduleSet = new Set(builtinModules);
-
-module.exports = moduleName => {
-	if (typeof moduleName !== 'string') {
-		throw new TypeError('Expected a string');
-	}
-
-	return moduleSet.has(moduleName);
-};
-
-
-/***/ }),
-/* 731 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-const blacklist = [
-	'freelist',
-	'sys'
-];
-
-module.exports = Object.keys(process.binding('natives'))
-	.filter(x => !/^_|^internal|\//.test(x) && blacklist.indexOf(x) === -1)
-	.sort();
-
-
-/***/ }),
-/* 732 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-module.exports = function (buf) {
-  if (!buf || buf.length < 2) return false
-  return buf[0] === 0x78 && (buf[1] === 1 || buf[1] === 0x9c || buf[1] === 0xda)
-}
-
-
-/***/ }),
-/* 733 */
-/***/ (function(module, exports) {
-
-/*!
- * is-dotfile <https://github.com/jonschlinkert/is-dotfile>
- *
- * Copyright (c) 2015-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-module.exports = function(str) {
-  if (str.charCodeAt(0) === 46 /* . */ && str.indexOf('/', 1) === -1) {
-    return true;
-  }
-  var slash = str.lastIndexOf('/');
-  return slash !== -1 ? str.charCodeAt(slash + 1) === 46  /* . */ : false;
-};
-
-
-/***/ }),
-/* 734 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * is-equal-shallow <https://github.com/jonschlinkert/is-equal-shallow>
- *
- * Copyright (c) 2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var isPrimitive = __webpack_require__(740);
-
-module.exports = function isEqual(a, b) {
-  if (!a && !b) { return true; }
-  if (!a && b || a && !b) { return false; }
-
-  var numKeysA = 0, numKeysB = 0, key;
-  for (key in b) {
-    numKeysB++;
-    if (!isPrimitive(b[key]) || !a.hasOwnProperty(key) || (a[key] !== b[key])) {
-      return false;
-    }
-  }
-  for (key in a) {
-    numKeysA++;
-  }
-  return numKeysA === numKeysB;
-};
-
-
-/***/ }),
-/* 735 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * is-extendable <https://github.com/jonschlinkert/is-extendable>
- *
- * Copyright (c) 2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-module.exports = function isExtendable(val) {
-  return typeof val !== 'undefined' && val !== null
-    && (typeof val === 'object' || typeof val === 'function');
-};
-
-
-/***/ }),
-/* 736 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-/* eslint-disable yoda */
-module.exports = x => {
-	if (Number.isNaN(x)) {
-		return false;
-	}
-
-	// code points are derived from:
-	// http://www.unix.org/Public/UNIDATA/EastAsianWidth.txt
-	if (
-		x >= 0x1100 && (
-			x <= 0x115f ||  // Hangul Jamo
-			x === 0x2329 || // LEFT-POINTING ANGLE BRACKET
-			x === 0x232a || // RIGHT-POINTING ANGLE BRACKET
-			// CJK Radicals Supplement .. Enclosed CJK Letters and Months
-			(0x2e80 <= x && x <= 0x3247 && x !== 0x303f) ||
-			// Enclosed CJK Letters and Months .. CJK Unified Ideographs Extension A
-			(0x3250 <= x && x <= 0x4dbf) ||
-			// CJK Unified Ideographs .. Yi Radicals
-			(0x4e00 <= x && x <= 0xa4c6) ||
-			// Hangul Jamo Extended-A
-			(0xa960 <= x && x <= 0xa97c) ||
-			// Hangul Syllables
-			(0xac00 <= x && x <= 0xd7a3) ||
-			// CJK Compatibility Ideographs
-			(0xf900 <= x && x <= 0xfaff) ||
-			// Vertical Forms
-			(0xfe10 <= x && x <= 0xfe19) ||
-			// CJK Compatibility Forms .. Small Form Variants
-			(0xfe30 <= x && x <= 0xfe6b) ||
-			// Halfwidth and Fullwidth Forms
-			(0xff01 <= x && x <= 0xff60) ||
-			(0xffe0 <= x && x <= 0xffe6) ||
-			// Kana Supplement
-			(0x1b000 <= x && x <= 0x1b001) ||
-			// Enclosed Ideographic Supplement
-			(0x1f200 <= x && x <= 0x1f251) ||
-			// CJK Unified Ideographs Extension B .. Tertiary Ideographic Plane
-			(0x20000 <= x && x <= 0x3fffd)
-		)
-	) {
-		return true;
-	}
-
-	return false;
-};
-
-
-/***/ }),
-/* 737 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-/**
- * Check if a Buffer/Uint8Array is a GZIP file
- *
- * @param {Buffer} buf
- * @api public
- */
-
-module.exports = function (buf) {
-    if (!buf || buf.length < 3) {
-        return false;
-    }
-
-    return buf[0] === 31 && buf[1] === 139 && buf[2] === 8;
-};
-
-
-/***/ }),
-/* 738 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var toString = Object.prototype.toString;
-
-module.exports = function (x) {
-	var prototype;
-	return toString.call(x) === '[object Object]' && (prototype = Object.getPrototypeOf(x), prototype === null || prototype === Object.getPrototypeOf({}));
-};
-
-
-/***/ }),
-/* 739 */
-/***/ (function(module, exports) {
-
-/*!
- * is-posix-bracket <https://github.com/jonschlinkert/is-posix-bracket>
- *
- * Copyright (c) 2015-2016, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-module.exports = function isPosixBracket(str) {
-  return typeof str === 'string' && /\[([:.=+])(?:[^\[\]]|)+\1\]/.test(str);
-};
-
-
-/***/ }),
-/* 740 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * is-primitive <https://github.com/jonschlinkert/is-primitive>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-// see http://jsperf.com/testing-value-is-primitive/7
-module.exports = function isPrimitive(value) {
-  return value == null || (typeof value !== 'function' && typeof value !== 'object');
-};
-
-
-/***/ }),
-/* 741 */
-/***/ (function(module, exports) {
-
-module.exports = isPromise;
-
-function isPromise(obj) {
-  return !!obj && (typeof obj === 'object' || typeof obj === 'function') && typeof obj.then === 'function';
-}
-
-
-/***/ }),
-/* 742 */
-/***/ (function(module, exports) {
-
-module.exports      = isTypedArray
-isTypedArray.strict = isStrictTypedArray
-isTypedArray.loose  = isLooseTypedArray
-
-var toString = Object.prototype.toString
-var names = {
-    '[object Int8Array]': true
-  , '[object Int16Array]': true
-  , '[object Int32Array]': true
-  , '[object Uint8Array]': true
-  , '[object Uint8ClampedArray]': true
-  , '[object Uint16Array]': true
-  , '[object Uint32Array]': true
-  , '[object Float32Array]': true
-  , '[object Float64Array]': true
-}
-
-function isTypedArray(arr) {
-  return (
-       isStrictTypedArray(arr)
-    || isLooseTypedArray(arr)
-  )
-}
-
-function isStrictTypedArray(arr) {
-  return (
-       arr instanceof Int8Array
-    || arr instanceof Int16Array
-    || arr instanceof Int32Array
-    || arr instanceof Uint8Array
-    || arr instanceof Uint8ClampedArray
-    || arr instanceof Uint16Array
-    || arr instanceof Uint32Array
-    || arr instanceof Float32Array
-    || arr instanceof Float64Array
-  )
-}
-
-function isLooseTypedArray(arr) {
-  return names[toString.call(arr)]
-}
-
-
-/***/ }),
-/* 743 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var __WEBPACK_AMD_DEFINE_FACTORY__, __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/*!
- * is-windows <https://github.com/jonschlinkert/is-windows>
- *
- * Copyright © 2015-2018, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-(function(factory) {
-  if (exports && typeof exports === 'object' && typeof module !== 'undefined') {
-    module.exports = factory();
-  } else if (true) {
-    !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_FACTORY__ = (factory),
-				__WEBPACK_AMD_DEFINE_RESULT__ = (typeof __WEBPACK_AMD_DEFINE_FACTORY__ === 'function' ?
-				(__WEBPACK_AMD_DEFINE_FACTORY__.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__)) : __WEBPACK_AMD_DEFINE_FACTORY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-  } else if (typeof window !== 'undefined') {
-    window.isWindows = factory();
-  } else if (typeof global !== 'undefined') {
-    global.isWindows = factory();
-  } else if (typeof self !== 'undefined') {
-    self.isWindows = factory();
-  } else {
-    this.isWindows = factory();
-  }
-})(function() {
-  'use strict';
-  return function isWindows() {
-    return process && (process.platform === 'win32' || /^(msys|cygwin)$/.test(process.env.OSTYPE));
-  };
-});
-
-
-/***/ }),
-/* 744 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var __WEBPACK_AMD_DEFINE_ARRAY__, __WEBPACK_AMD_DEFINE_RESULT__;/**
- * JSONSchema Validator - Validates JavaScript objects using JSON Schemas
- *	(http://www.json.com/json-schema-proposal/)
- *
- * Copyright (c) 2007 Kris Zyp SitePen (www.sitepen.com)
- * Licensed under the MIT (MIT-LICENSE.txt) license.
-To use the validator call the validate function with an instance object and an optional schema object.
-If a schema is provided, it will be used to validate. If the instance object refers to a schema (self-validating),
-that schema will be used to validate and the schema parameter is not necessary (if both exist,
-both validations will occur).
-The validate method will return an array of validation errors. If there are no errors, then an
-empty list will be returned. A validation error will have two properties:
-"property" which indicates which property had the error
-"message" which indicates what the error was
- */
-(function (root, factory) {
-    if (true) {
-        // AMD. Register as an anonymous module.
-        !(__WEBPACK_AMD_DEFINE_ARRAY__ = [], __WEBPACK_AMD_DEFINE_RESULT__ = function () {
-            return factory();
-        }.apply(exports, __WEBPACK_AMD_DEFINE_ARRAY__),
-				__WEBPACK_AMD_DEFINE_RESULT__ !== undefined && (module.exports = __WEBPACK_AMD_DEFINE_RESULT__));
-    } else if (typeof module === 'object' && module.exports) {
-        // Node. Does not work with strict CommonJS, but
-        // only CommonJS-like environments that support module.exports,
-        // like Node.
-        module.exports = factory();
-    } else {
-        // Browser globals
-        root.jsonSchema = factory();
-    }
-}(this, function () {// setup primitive classes to be JSON Schema types
-var exports = validate
-exports.Integer = {type:"integer"};
-var primitiveConstructors = {
-	String: String,
-	Boolean: Boolean,
-	Number: Number,
-	Object: Object,
-	Array: Array,
-	Date: Date
-}
-exports.validate = validate;
-function validate(/*Any*/instance,/*Object*/schema) {
-		// Summary:
-		//  	To use the validator call JSONSchema.validate with an instance object and an optional schema object.
-		// 		If a schema is provided, it will be used to validate. If the instance object refers to a schema (self-validating),
-		// 		that schema will be used to validate and the schema parameter is not necessary (if both exist,
-		// 		both validations will occur).
-		// 		The validate method will return an object with two properties:
-		// 			valid: A boolean indicating if the instance is valid by the schema
-		// 			errors: An array of validation errors. If there are no errors, then an
-		// 					empty list will be returned. A validation error will have two properties:
-		// 						property: which indicates which property had the error
-		// 						message: which indicates what the error was
-		//
-		return validate(instance, schema, {changing: false});//, coerce: false, existingOnly: false});
-	};
-exports.checkPropertyChange = function(/*Any*/value,/*Object*/schema, /*String*/property) {
-		// Summary:
-		// 		The checkPropertyChange method will check to see if an value can legally be in property with the given schema
-		// 		This is slightly different than the validate method in that it will fail if the schema is readonly and it will
-		// 		not check for self-validation, it is assumed that the passed in value is already internally valid.
-		// 		The checkPropertyChange method will return the same object type as validate, see JSONSchema.validate for
-		// 		information.
-		//
-		return validate(value, schema, {changing: property || "property"});
-	};
-var validate = exports._validate = function(/*Any*/instance,/*Object*/schema,/*Object*/options) {
-
-	if (!options) options = {};
-	var _changing = options.changing;
-
-	function getType(schema){
-		return schema.type || (primitiveConstructors[schema.name] == schema && schema.name.toLowerCase());
-	}
-	var errors = [];
-	// validate a value against a property definition
-	function checkProp(value, schema, path,i){
-
-		var l;
-		path += path ? typeof i == 'number' ? '[' + i + ']' : typeof i == 'undefined' ? '' : '.' + i : i;
-		function addError(message){
-			errors.push({property:path,message:message});
-		}
-
-		if((typeof schema != 'object' || schema instanceof Array) && (path || typeof schema != 'function') && !(schema && getType(schema))){
-			if(typeof schema == 'function'){
-				if(!(value instanceof schema)){
-					addError("is not an instance of the class/constructor " + schema.name);
-				}
-			}else if(schema){
-				addError("Invalid schema/property definition " + schema);
-			}
-			return null;
-		}
-		if(_changing && schema.readonly){
-			addError("is a readonly field, it can not be changed");
-		}
-		if(schema['extends']){ // if it extends another schema, it must pass that schema as well
-			checkProp(value,schema['extends'],path,i);
-		}
-		// validate a value against a type definition
-		function checkType(type,value){
-			if(type){
-				if(typeof type == 'string' && type != 'any' &&
-						(type == 'null' ? value !== null : typeof value != type) &&
-						!(value instanceof Array && type == 'array') &&
-						!(value instanceof Date && type == 'date') &&
-						!(type == 'integer' && value%1===0)){
-					return [{property:path,message:(typeof value) + " value found, but a " + type + " is required"}];
-				}
-				if(type instanceof Array){
-					var unionErrors=[];
-					for(var j = 0; j < type.length; j++){ // a union type
-						if(!(unionErrors=checkType(type[j],value)).length){
-							break;
-						}
-					}
-					if(unionErrors.length){
-						return unionErrors;
-					}
-				}else if(typeof type == 'object'){
-					var priorErrors = errors;
-					errors = [];
-					checkProp(value,type,path);
-					var theseErrors = errors;
-					errors = priorErrors;
-					return theseErrors;
-				}
-			}
-			return [];
-		}
-		if(value === undefined){
-			if(schema.required){
-				addError("is missing and it is required");
-			}
-		}else{
-			errors = errors.concat(checkType(getType(schema),value));
-			if(schema.disallow && !checkType(schema.disallow,value).length){
-				addError(" disallowed value was matched");
-			}
-			if(value !== null){
-				if(value instanceof Array){
-					if(schema.items){
-						var itemsIsArray = schema.items instanceof Array;
-						var propDef = schema.items;
-						for (i = 0, l = value.length; i < l; i += 1) {
-							if (itemsIsArray)
-								propDef = schema.items[i];
-							if (options.coerce)
-								value[i] = options.coerce(value[i], propDef);
-							errors.concat(checkProp(value[i],propDef,path,i));
-						}
-					}
-					if(schema.minItems && value.length < schema.minItems){
-						addError("There must be a minimum of " + schema.minItems + " in the array");
-					}
-					if(schema.maxItems && value.length > schema.maxItems){
-						addError("There must be a maximum of " + schema.maxItems + " in the array");
-					}
-				}else if(schema.properties || schema.additionalProperties){
-					errors.concat(checkObj(value, schema.properties, path, schema.additionalProperties));
-				}
-				if(schema.pattern && typeof value == 'string' && !value.match(schema.pattern)){
-					addError("does not match the regex pattern " + schema.pattern);
-				}
-				if(schema.maxLength && typeof value == 'string' && value.length > schema.maxLength){
-					addError("may only be " + schema.maxLength + " characters long");
-				}
-				if(schema.minLength && typeof value == 'string' && value.length < schema.minLength){
-					addError("must be at least " + schema.minLength + " characters long");
-				}
-				if(typeof schema.minimum !== undefined && typeof value == typeof schema.minimum &&
-						schema.minimum > value){
-					addError("must have a minimum value of " + schema.minimum);
-				}
-				if(typeof schema.maximum !== undefined && typeof value == typeof schema.maximum &&
-						schema.maximum < value){
-					addError("must have a maximum value of " + schema.maximum);
-				}
-				if(schema['enum']){
-					var enumer = schema['enum'];
-					l = enumer.length;
-					var found;
-					for(var j = 0; j < l; j++){
-						if(enumer[j]===value){
-							found=1;
-							break;
-						}
-					}
-					if(!found){
-						addError("does not have a value in the enumeration " + enumer.join(", "));
-					}
-				}
-				if(typeof schema.maxDecimal == 'number' &&
-					(value.toString().match(new RegExp("\\.[0-9]{" + (schema.maxDecimal + 1) + ",}")))){
-					addError("may only have " + schema.maxDecimal + " digits of decimal places");
-				}
-			}
-		}
-		return null;
-	}
-	// validate an object against a schema
-	function checkObj(instance,objTypeDef,path,additionalProp){
-
-		if(typeof objTypeDef =='object'){
-			if(typeof instance != 'object' || instance instanceof Array){
-				errors.push({property:path,message:"an object is required"});
-			}
-			
-			for(var i in objTypeDef){ 
-				if(objTypeDef.hasOwnProperty(i)){
-					var value = instance[i];
-					// skip _not_ specified properties
-					if (value === undefined && options.existingOnly) continue;
-					var propDef = objTypeDef[i];
-					// set default
-					if(value === undefined && propDef["default"]){
-						value = instance[i] = propDef["default"];
-					}
-					if(options.coerce && i in instance){
-						value = instance[i] = options.coerce(value, propDef);
-					}
-					checkProp(value,propDef,path,i);
-				}
-			}
-		}
-		for(i in instance){
-			if(instance.hasOwnProperty(i) && !(i.charAt(0) == '_' && i.charAt(1) == '_') && objTypeDef && !objTypeDef[i] && additionalProp===false){
-				if (options.filter) {
-					delete instance[i];
-					continue;
-				} else {
-					errors.push({property:path,message:(typeof value) + "The property " + i +
-						" is not defined in the schema and the schema does not allow additional properties"});
-				}
-			}
-			var requires = objTypeDef && objTypeDef[i] && objTypeDef[i].requires;
-			if(requires && !(requires in instance)){
-				errors.push({property:path,message:"the presence of the property " + i + " requires that " + requires + " also be present"});
-			}
-			value = instance[i];
-			if(additionalProp && (!(objTypeDef && typeof objTypeDef == 'object') || !(i in objTypeDef))){
-				if(options.coerce){
-					value = instance[i] = options.coerce(value, additionalProp);
-				}
-				checkProp(value,additionalProp,path,i);
-			}
-			if(!_changing && value && value.$schema){
-				errors = errors.concat(checkProp(value,value.$schema,path,i));
-			}
-		}
-		return errors;
-	}
-	if(schema){
-		checkProp(instance,schema,'',_changing || '');
-	}
-	if(!_changing && instance && instance.$schema){
-		checkProp(instance,instance.$schema,'','');
-	}
-	return {valid:!errors.length,errors:errors};
-};
-exports.mustBeValid = function(result){
-	//	summary:
-	//		This checks to ensure that the result is valid and will throw an appropriate error message if it is not
-	// result: the result returned from checkPropertyChange or validate
-	if(!result.valid){
-		throw new TypeError(result.errors.map(function(error){return "for property " + error.property + ': ' + error.message;}).join(", \n"));
-	}
-}
-
-return exports;
-}));
-
-
-/***/ }),
-/* 745 */
-/***/ (function(module, exports) {
-
-exports = module.exports = stringify
-exports.getSerialize = serializer
-
-function stringify(obj, replacer, spaces, cycleReplacer) {
-  return JSON.stringify(obj, serializer(replacer, cycleReplacer), spaces)
-}
-
-function serializer(replacer, cycleReplacer) {
-  var stack = [], keys = []
-
-  if (cycleReplacer == null) cycleReplacer = function(key, value) {
-    if (stack[0] === value) return "[Circular ~]"
-    return "[Circular ~." + keys.slice(0, stack.indexOf(value)).join(".") + "]"
-  }
-
-  return function(key, value) {
-    if (stack.length > 0) {
-      var thisPos = stack.indexOf(this)
-      ~thisPos ? stack.splice(thisPos + 1) : stack.push(this)
-      ~thisPos ? keys.splice(thisPos, Infinity, key) : keys.push(key)
-      if (~stack.indexOf(value)) value = cycleReplacer.call(this, key, value)
-    }
-    else stack.push(value)
-
-    return replacer == null ? value : replacer.call(this, key, value)
-  }
-}
-
-
-/***/ }),
-/* 746 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
- * lib/jsprim.js: utilities for primitive JavaScript types
- */
-
-var mod_assert = __webpack_require__(16);
-var mod_util = __webpack_require__(3);
-
-var mod_extsprintf = __webpack_require__(645);
-var mod_verror = __webpack_require__(960);
-var mod_jsonschema = __webpack_require__(744);
-
-/*
- * Public interface
- */
-exports.deepCopy = deepCopy;
-exports.deepEqual = deepEqual;
-exports.isEmpty = isEmpty;
-exports.hasKey = hasKey;
-exports.forEachKey = forEachKey;
-exports.pluck = pluck;
-exports.flattenObject = flattenObject;
-exports.flattenIter = flattenIter;
-exports.validateJsonObject = validateJsonObjectJS;
-exports.validateJsonObjectJS = validateJsonObjectJS;
-exports.randElt = randElt;
-exports.extraProperties = extraProperties;
-exports.mergeObjects = mergeObjects;
-
-exports.startsWith = startsWith;
-exports.endsWith = endsWith;
-
-exports.parseInteger = parseInteger;
-
-exports.iso8601 = iso8601;
-exports.rfc1123 = rfc1123;
-exports.parseDateTime = parseDateTime;
-
-exports.hrtimediff = hrtimeDiff;
-exports.hrtimeDiff = hrtimeDiff;
-exports.hrtimeAccum = hrtimeAccum;
-exports.hrtimeAdd = hrtimeAdd;
-exports.hrtimeNanosec = hrtimeNanosec;
-exports.hrtimeMicrosec = hrtimeMicrosec;
-exports.hrtimeMillisec = hrtimeMillisec;
-
-
-/*
- * Deep copy an acyclic *basic* Javascript object.  This only handles basic
- * scalars (strings, numbers, booleans) and arbitrarily deep arrays and objects
- * containing these.  This does *not* handle instances of other classes.
- */
-function deepCopy(obj)
-{
-	var ret, key;
-	var marker = '__deepCopy';
-
-	if (obj && obj[marker])
-		throw (new Error('attempted deep copy of cyclic object'));
-
-	if (obj && obj.constructor == Object) {
-		ret = {};
-		obj[marker] = true;
-
-		for (key in obj) {
-			if (key == marker)
-				continue;
-
-			ret[key] = deepCopy(obj[key]);
-		}
-
-		delete (obj[marker]);
-		return (ret);
-	}
-
-	if (obj && obj.constructor == Array) {
-		ret = [];
-		obj[marker] = true;
-
-		for (key = 0; key < obj.length; key++)
-			ret.push(deepCopy(obj[key]));
-
-		delete (obj[marker]);
-		return (ret);
-	}
-
-	/*
-	 * It must be a primitive type -- just return it.
-	 */
-	return (obj);
-}
-
-function deepEqual(obj1, obj2)
-{
-	if (typeof (obj1) != typeof (obj2))
-		return (false);
-
-	if (obj1 === null || obj2 === null || typeof (obj1) != 'object')
-		return (obj1 === obj2);
-
-	if (obj1.constructor != obj2.constructor)
-		return (false);
-
-	var k;
-	for (k in obj1) {
-		if (!obj2.hasOwnProperty(k))
-			return (false);
-
-		if (!deepEqual(obj1[k], obj2[k]))
-			return (false);
-	}
-
-	for (k in obj2) {
-		if (!obj1.hasOwnProperty(k))
-			return (false);
-	}
-
-	return (true);
-}
-
-function isEmpty(obj)
-{
-	var key;
-	for (key in obj)
-		return (false);
-	return (true);
-}
-
-function hasKey(obj, key)
-{
-	mod_assert.equal(typeof (key), 'string');
-	return (Object.prototype.hasOwnProperty.call(obj, key));
-}
-
-function forEachKey(obj, callback)
-{
-	for (var key in obj) {
-		if (hasKey(obj, key)) {
-			callback(key, obj[key]);
-		}
-	}
-}
-
-function pluck(obj, key)
-{
-	mod_assert.equal(typeof (key), 'string');
-	return (pluckv(obj, key));
-}
-
-function pluckv(obj, key)
-{
-	if (obj === null || typeof (obj) !== 'object')
-		return (undefined);
-
-	if (obj.hasOwnProperty(key))
-		return (obj[key]);
-
-	var i = key.indexOf('.');
-	if (i == -1)
-		return (undefined);
-
-	var key1 = key.substr(0, i);
-	if (!obj.hasOwnProperty(key1))
-		return (undefined);
-
-	return (pluckv(obj[key1], key.substr(i + 1)));
-}
-
-/*
- * Invoke callback(row) for each entry in the array that would be returned by
- * flattenObject(data, depth).  This is just like flattenObject(data,
- * depth).forEach(callback), except that the intermediate array is never
- * created.
- */
-function flattenIter(data, depth, callback)
-{
-	doFlattenIter(data, depth, [], callback);
-}
-
-function doFlattenIter(data, depth, accum, callback)
-{
-	var each;
-	var key;
-
-	if (depth === 0) {
-		each = accum.slice(0);
-		each.push(data);
-		callback(each);
-		return;
-	}
-
-	mod_assert.ok(data !== null);
-	mod_assert.equal(typeof (data), 'object');
-	mod_assert.equal(typeof (depth), 'number');
-	mod_assert.ok(depth >= 0);
-
-	for (key in data) {
-		each = accum.slice(0);
-		each.push(key);
-		doFlattenIter(data[key], depth - 1, each, callback);
-	}
-}
-
-function flattenObject(data, depth)
-{
-	if (depth === 0)
-		return ([ data ]);
-
-	mod_assert.ok(data !== null);
-	mod_assert.equal(typeof (data), 'object');
-	mod_assert.equal(typeof (depth), 'number');
-	mod_assert.ok(depth >= 0);
-
-	var rv = [];
-	var key;
-
-	for (key in data) {
-		flattenObject(data[key], depth - 1).forEach(function (p) {
-			rv.push([ key ].concat(p));
-		});
-	}
-
-	return (rv);
-}
-
-function startsWith(str, prefix)
-{
-	return (str.substr(0, prefix.length) == prefix);
-}
-
-function endsWith(str, suffix)
-{
-	return (str.substr(
-	    str.length - suffix.length, suffix.length) == suffix);
-}
-
-function iso8601(d)
-{
-	if (typeof (d) == 'number')
-		d = new Date(d);
-	mod_assert.ok(d.constructor === Date);
-	return (mod_extsprintf.sprintf('%4d-%02d-%02dT%02d:%02d:%02d.%03dZ',
-	    d.getUTCFullYear(), d.getUTCMonth() + 1, d.getUTCDate(),
-	    d.getUTCHours(), d.getUTCMinutes(), d.getUTCSeconds(),
-	    d.getUTCMilliseconds()));
-}
-
-var RFC1123_MONTHS = [
-    'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
-    'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
-var RFC1123_DAYS = [
-    'Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
-
-function rfc1123(date) {
-	return (mod_extsprintf.sprintf('%s, %02d %s %04d %02d:%02d:%02d GMT',
-	    RFC1123_DAYS[date.getUTCDay()], date.getUTCDate(),
-	    RFC1123_MONTHS[date.getUTCMonth()], date.getUTCFullYear(),
-	    date.getUTCHours(), date.getUTCMinutes(),
-	    date.getUTCSeconds()));
-}
-
-/*
- * Parses a date expressed as a string, as either a number of milliseconds since
- * the epoch or any string format that Date accepts, giving preference to the
- * former where these two sets overlap (e.g., small numbers).
- */
-function parseDateTime(str)
-{
-	/*
-	 * This is irritatingly implicit, but significantly more concise than
-	 * alternatives.  The "+str" will convert a string containing only a
-	 * number directly to a Number, or NaN for other strings.  Thus, if the
-	 * conversion succeeds, we use it (this is the milliseconds-since-epoch
-	 * case).  Otherwise, we pass the string directly to the Date
-	 * constructor to parse.
-	 */
-	var numeric = +str;
-	if (!isNaN(numeric)) {
-		return (new Date(numeric));
-	} else {
-		return (new Date(str));
-	}
-}
-
-
-/*
- * Number.*_SAFE_INTEGER isn't present before node v0.12, so we hardcode
- * the ES6 definitions here, while allowing for them to someday be higher.
- */
-var MAX_SAFE_INTEGER = Number.MAX_SAFE_INTEGER || 9007199254740991;
-var MIN_SAFE_INTEGER = Number.MIN_SAFE_INTEGER || -9007199254740991;
-
-
-/*
- * Default options for parseInteger().
- */
-var PI_DEFAULTS = {
-	base: 10,
-	allowSign: true,
-	allowPrefix: false,
-	allowTrailing: false,
-	allowImprecise: false,
-	trimWhitespace: false,
-	leadingZeroIsOctal: false
-};
-
-var CP_0 = 0x30;
-var CP_9 = 0x39;
-
-var CP_A = 0x41;
-var CP_B = 0x42;
-var CP_O = 0x4f;
-var CP_T = 0x54;
-var CP_X = 0x58;
-var CP_Z = 0x5a;
-
-var CP_a = 0x61;
-var CP_b = 0x62;
-var CP_o = 0x6f;
-var CP_t = 0x74;
-var CP_x = 0x78;
-var CP_z = 0x7a;
-
-var PI_CONV_DEC = 0x30;
-var PI_CONV_UC = 0x37;
-var PI_CONV_LC = 0x57;
-
-
-/*
- * A stricter version of parseInt() that provides options for changing what
- * is an acceptable string (for example, disallowing trailing characters).
- */
-function parseInteger(str, uopts)
-{
-	mod_assert.string(str, 'str');
-	mod_assert.optionalObject(uopts, 'options');
-
-	var baseOverride = false;
-	var options = PI_DEFAULTS;
-
-	if (uopts) {
-		baseOverride = hasKey(uopts, 'base');
-		options = mergeObjects(options, uopts);
-		mod_assert.number(options.base, 'options.base');
-		mod_assert.ok(options.base >= 2, 'options.base >= 2');
-		mod_assert.ok(options.base <= 36, 'options.base <= 36');
-		mod_assert.bool(options.allowSign, 'options.allowSign');
-		mod_assert.bool(options.allowPrefix, 'options.allowPrefix');
-		mod_assert.bool(options.allowTrailing,
-		    'options.allowTrailing');
-		mod_assert.bool(options.allowImprecise,
-		    'options.allowImprecise');
-		mod_assert.bool(options.trimWhitespace,
-		    'options.trimWhitespace');
-		mod_assert.bool(options.leadingZeroIsOctal,
-		    'options.leadingZeroIsOctal');
-
-		if (options.leadingZeroIsOctal) {
-			mod_assert.ok(!baseOverride,
-			    '"base" and "leadingZeroIsOctal" are ' +
-			    'mutually exclusive');
-		}
-	}
-
-	var c;
-	var pbase = -1;
-	var base = options.base;
-	var start;
-	var mult = 1;
-	var value = 0;
-	var idx = 0;
-	var len = str.length;
-
-	/* Trim any whitespace on the left side. */
-	if (options.trimWhitespace) {
-		while (idx < len && isSpace(str.charCodeAt(idx))) {
-			++idx;
-		}
-	}
-
-	/* Check the number for a leading sign. */
-	if (options.allowSign) {
-		if (str[idx] === '-') {
-			idx += 1;
-			mult = -1;
-		} else if (str[idx] === '+') {
-			idx += 1;
-		}
-	}
-
-	/* Parse the base-indicating prefix if there is one. */
-	if (str[idx] === '0') {
-		if (options.allowPrefix) {
-			pbase = prefixToBase(str.charCodeAt(idx + 1));
-			if (pbase !== -1 && (!baseOverride || pbase === base)) {
-				base = pbase;
-				idx += 2;
-			}
-		}
-
-		if (pbase === -1 && options.leadingZeroIsOctal) {
-			base = 8;
-		}
-	}
-
-	/* Parse the actual digits. */
-	for (start = idx; idx < len; ++idx) {
-		c = translateDigit(str.charCodeAt(idx));
-		if (c !== -1 && c < base) {
-			value *= base;
-			value += c;
-		} else {
-			break;
-		}
-	}
-
-	/* If we didn't parse any digits, we have an invalid number. */
-	if (start === idx) {
-		return (new Error('invalid number: ' + JSON.stringify(str)));
-	}
-
-	/* Trim any whitespace on the right side. */
-	if (options.trimWhitespace) {
-		while (idx < len && isSpace(str.charCodeAt(idx))) {
-			++idx;
-		}
-	}
-
-	/* Check for trailing characters. */
-	if (idx < len && !options.allowTrailing) {
-		return (new Error('trailing characters after number: ' +
-		    JSON.stringify(str.slice(idx))));
-	}
-
-	/* If our value is 0, we return now, to avoid returning -0. */
-	if (value === 0) {
-		return (0);
-	}
-
-	/* Calculate our final value. */
-	var result = value * mult;
-
-	/*
-	 * If the string represents a value that cannot be precisely represented
-	 * by JavaScript, then we want to check that:
-	 *
-	 * - We never increased the value past MAX_SAFE_INTEGER
-	 * - We don't make the result negative and below MIN_SAFE_INTEGER
-	 *
-	 * Because we only ever increment the value during parsing, there's no
-	 * chance of moving past MAX_SAFE_INTEGER and then dropping below it
-	 * again, losing precision in the process. This means that we only need
-	 * to do our checks here, at the end.
-	 */
-	if (!options.allowImprecise &&
-	    (value > MAX_SAFE_INTEGER || result < MIN_SAFE_INTEGER)) {
-		return (new Error('number is outside of the supported range: ' +
-		    JSON.stringify(str.slice(start, idx))));
-	}
-
-	return (result);
-}
-
-
-/*
- * Interpret a character code as a base-36 digit.
- */
-function translateDigit(d)
-{
-	if (d >= CP_0 && d <= CP_9) {
-		/* '0' to '9' -> 0 to 9 */
-		return (d - PI_CONV_DEC);
-	} else if (d >= CP_A && d <= CP_Z) {
-		/* 'A' - 'Z' -> 10 to 35 */
-		return (d - PI_CONV_UC);
-	} else if (d >= CP_a && d <= CP_z) {
-		/* 'a' - 'z' -> 10 to 35 */
-		return (d - PI_CONV_LC);
-	} else {
-		/* Invalid character code */
-		return (-1);
-	}
-}
-
-
-/*
- * Test if a value matches the ECMAScript definition of trimmable whitespace.
- */
-function isSpace(c)
-{
-	return (c === 0x20) ||
-	    (c >= 0x0009 && c <= 0x000d) ||
-	    (c === 0x00a0) ||
-	    (c === 0x1680) ||
-	    (c === 0x180e) ||
-	    (c >= 0x2000 && c <= 0x200a) ||
-	    (c === 0x2028) ||
-	    (c === 0x2029) ||
-	    (c === 0x202f) ||
-	    (c === 0x205f) ||
-	    (c === 0x3000) ||
-	    (c === 0xfeff);
-}
-
-
-/*
- * Determine which base a character indicates (e.g., 'x' indicates hex).
- */
-function prefixToBase(c)
-{
-	if (c === CP_b || c === CP_B) {
-		/* 0b/0B (binary) */
-		return (2);
-	} else if (c === CP_o || c === CP_O) {
-		/* 0o/0O (octal) */
-		return (8);
-	} else if (c === CP_t || c === CP_T) {
-		/* 0t/0T (decimal) */
-		return (10);
-	} else if (c === CP_x || c === CP_X) {
-		/* 0x/0X (hexadecimal) */
-		return (16);
-	} else {
-		/* Not a meaningful character */
-		return (-1);
-	}
-}
-
-
-function validateJsonObjectJS(schema, input)
-{
-	var report = mod_jsonschema.validate(input, schema);
-
-	if (report.errors.length === 0)
-		return (null);
-
-	/* Currently, we only do anything useful with the first error. */
-	var error = report.errors[0];
-
-	/* The failed property is given by a URI with an irrelevant prefix. */
-	var propname = error['property'];
-	var reason = error['message'].toLowerCase();
-	var i, j;
-
-	/*
-	 * There's at least one case where the property error message is
-	 * confusing at best.  We work around this here.
-	 */
-	if ((i = reason.indexOf('the property ')) != -1 &&
-	    (j = reason.indexOf(' is not defined in the schema and the ' +
-	    'schema does not allow additional properties')) != -1) {
-		i += 'the property '.length;
-		if (propname === '')
-			propname = reason.substr(i, j - i);
-		else
-			propname = propname + '.' + reason.substr(i, j - i);
-
-		reason = 'unsupported property';
-	}
-
-	var rv = new mod_verror.VError('property "%s": %s', propname, reason);
-	rv.jsv_details = error;
-	return (rv);
-}
-
-function randElt(arr)
-{
-	mod_assert.ok(Array.isArray(arr) && arr.length > 0,
-	    'randElt argument must be a non-empty array');
-
-	return (arr[Math.floor(Math.random() * arr.length)]);
-}
-
-function assertHrtime(a)
-{
-	mod_assert.ok(a[0] >= 0 && a[1] >= 0,
-	    'negative numbers not allowed in hrtimes');
-	mod_assert.ok(a[1] < 1e9, 'nanoseconds column overflow');
-}
-
-/*
- * Compute the time elapsed between hrtime readings A and B, where A is later
- * than B.  hrtime readings come from Node's process.hrtime().  There is no
- * defined way to represent negative deltas, so it's illegal to diff B from A
- * where the time denoted by B is later than the time denoted by A.  If this
- * becomes valuable, we can define a representation and extend the
- * implementation to support it.
- */
-function hrtimeDiff(a, b)
-{
-	assertHrtime(a);
-	assertHrtime(b);
-	mod_assert.ok(a[0] > b[0] || (a[0] == b[0] && a[1] >= b[1]),
-	    'negative differences not allowed');
-
-	var rv = [ a[0] - b[0], 0 ];
-
-	if (a[1] >= b[1]) {
-		rv[1] = a[1] - b[1];
-	} else {
-		rv[0]--;
-		rv[1] = 1e9 - (b[1] - a[1]);
-	}
-
-	return (rv);
-}
-
-/*
- * Convert a hrtime reading from the array format returned by Node's
- * process.hrtime() into a scalar number of nanoseconds.
- */
-function hrtimeNanosec(a)
-{
-	assertHrtime(a);
-
-	return (Math.floor(a[0] * 1e9 + a[1]));
-}
-
-/*
- * Convert a hrtime reading from the array format returned by Node's
- * process.hrtime() into a scalar number of microseconds.
- */
-function hrtimeMicrosec(a)
-{
-	assertHrtime(a);
-
-	return (Math.floor(a[0] * 1e6 + a[1] / 1e3));
-}
-
-/*
- * Convert a hrtime reading from the array format returned by Node's
- * process.hrtime() into a scalar number of milliseconds.
- */
-function hrtimeMillisec(a)
-{
-	assertHrtime(a);
-
-	return (Math.floor(a[0] * 1e3 + a[1] / 1e6));
-}
-
-/*
- * Add two hrtime readings A and B, overwriting A with the result of the
- * addition.  This function is useful for accumulating several hrtime intervals
- * into a counter.  Returns A.
- */
-function hrtimeAccum(a, b)
-{
-	assertHrtime(a);
-	assertHrtime(b);
-
-	/*
-	 * Accumulate the nanosecond component.
-	 */
-	a[1] += b[1];
-	if (a[1] >= 1e9) {
-		/*
-		 * The nanosecond component overflowed, so carry to the seconds
-		 * field.
-		 */
-		a[0]++;
-		a[1] -= 1e9;
-	}
-
-	/*
-	 * Accumulate the seconds component.
-	 */
-	a[0] += b[0];
-
-	return (a);
-}
-
-/*
- * Add two hrtime readings A and B, returning the result as a new hrtime array.
- * Does not modify either input argument.
- */
-function hrtimeAdd(a, b)
-{
-	assertHrtime(a);
-
-	var rv = [ a[0], a[1] ];
-
-	return (hrtimeAccum(rv, b));
-}
-
-
-/*
- * Check an object for unexpected properties.  Accepts the object to check, and
- * an array of allowed property names (strings).  Returns an array of key names
- * that were found on the object, but did not appear in the list of allowed
- * properties.  If no properties were found, the returned array will be of
- * zero length.
- */
-function extraProperties(obj, allowed)
-{
-	mod_assert.ok(typeof (obj) === 'object' && obj !== null,
-	    'obj argument must be a non-null object');
-	mod_assert.ok(Array.isArray(allowed),
-	    'allowed argument must be an array of strings');
-	for (var i = 0; i < allowed.length; i++) {
-		mod_assert.ok(typeof (allowed[i]) === 'string',
-		    'allowed argument must be an array of strings');
-	}
-
-	return (Object.keys(obj).filter(function (key) {
-		return (allowed.indexOf(key) === -1);
-	}));
-}
-
-/*
- * Given three sets of properties "provided" (may be undefined), "overrides"
- * (required), and "defaults" (may be undefined), construct an object containing
- * the union of these sets with "overrides" overriding "provided", and
- * "provided" overriding "defaults".  None of the input objects are modified.
- */
-function mergeObjects(provided, overrides, defaults)
-{
-	var rv, k;
-
-	rv = {};
-	if (defaults) {
-		for (k in defaults)
-			rv[k] = defaults[k];
-	}
-
-	if (provided) {
-		for (k in provided)
-			rv[k] = provided[k];
-	}
-
-	if (overrides) {
-		for (k in overrides)
-			rv[k] = overrides[k];
-	}
-
-	return (rv);
-}
-
-
-/***/ }),
-/* 747 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/* eslint-disable no-nested-ternary */
-
-var arr = [];
-var charCodeCache = [];
-
-module.exports = function (a, b) {
-	if (a === b) {
-		return 0;
-	}
-
-	var swap = a;
-
-	// Swapping the strings if `a` is longer than `b` so we know which one is the
-	// shortest & which one is the longest
-	if (a.length > b.length) {
-		a = b;
-		b = swap;
-	}
-
-	var aLen = a.length;
-	var bLen = b.length;
-
-	if (aLen === 0) {
-		return bLen;
-	}
-
-	if (bLen === 0) {
-		return aLen;
-	}
-
-	// Performing suffix trimming:
-	// We can linearly drop suffix common to both strings since they
-	// don't increase distance at all
-	// Note: `~-` is the bitwise way to perform a `- 1` operation
-	while (aLen > 0 && (a.charCodeAt(~-aLen) === b.charCodeAt(~-bLen))) {
-		aLen--;
-		bLen--;
-	}
-
-	if (aLen === 0) {
-		return bLen;
-	}
-
-	// Performing prefix trimming
-	// We can linearly drop prefix common to both strings since they
-	// don't increase distance at all
-	var start = 0;
-
-	while (start < aLen && (a.charCodeAt(start) === b.charCodeAt(start))) {
-		start++;
-	}
-
-	aLen -= start;
-	bLen -= start;
-
-	if (aLen === 0) {
-		return bLen;
-	}
-
-	var bCharCode;
-	var ret;
-	var tmp;
-	var tmp2;
-	var i = 0;
-	var j = 0;
-
-	while (i < aLen) {
-		charCodeCache[start + i] = a.charCodeAt(start + i);
-		arr[i] = ++i;
-	}
-
-	while (j < bLen) {
-		bCharCode = b.charCodeAt(start + j);
-		tmp = j++;
-		ret = j;
-
-		for (i = 0; i < aLen; i++) {
-			tmp2 = bCharCode === charCodeCache[start + i] ? tmp : tmp + 1;
-			tmp = arr[i];
-			ret = arr[i] = tmp > ret ? tmp2 > ret ? ret + 1 : tmp2 : tmp2 > tmp ? tmp + 1 : tmp2;
-		}
-	}
-
-	return ret;
-};
-
-
-/***/ }),
-/* 748 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/* WEBPACK VAR INJECTION */(function(module) {/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as the size to enable large array optimizations. */
-var LARGE_ARRAY_SIZE = 200;
-
-/** Used to stand-in for `undefined` hash values. */
-var HASH_UNDEFINED = '__lodash_hash_undefined__';
-
-/** Used as references for various `Number` constants. */
-var MAX_SAFE_INTEGER = 9007199254740991;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]',
-    arrayTag = '[object Array]',
-    boolTag = '[object Boolean]',
-    dateTag = '[object Date]',
-    errorTag = '[object Error]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    mapTag = '[object Map]',
-    numberTag = '[object Number]',
-    objectTag = '[object Object]',
-    promiseTag = '[object Promise]',
-    regexpTag = '[object RegExp]',
-    setTag = '[object Set]',
-    stringTag = '[object String]',
-    symbolTag = '[object Symbol]',
-    weakMapTag = '[object WeakMap]';
-
-var arrayBufferTag = '[object ArrayBuffer]',
-    dataViewTag = '[object DataView]',
-    float32Tag = '[object Float32Array]',
-    float64Tag = '[object Float64Array]',
-    int8Tag = '[object Int8Array]',
-    int16Tag = '[object Int16Array]',
-    int32Tag = '[object Int32Array]',
-    uint8Tag = '[object Uint8Array]',
-    uint8ClampedTag = '[object Uint8ClampedArray]',
-    uint16Tag = '[object Uint16Array]',
-    uint32Tag = '[object Uint32Array]';
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/6.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to match `RegExp` flags from their coerced string values. */
-var reFlags = /\w*$/;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Used to detect unsigned integer values. */
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-/** Used to identify `toStringTag` values supported by `_.clone`. */
-var cloneableTags = {};
-cloneableTags[argsTag] = cloneableTags[arrayTag] =
-cloneableTags[arrayBufferTag] = cloneableTags[dataViewTag] =
-cloneableTags[boolTag] = cloneableTags[dateTag] =
-cloneableTags[float32Tag] = cloneableTags[float64Tag] =
-cloneableTags[int8Tag] = cloneableTags[int16Tag] =
-cloneableTags[int32Tag] = cloneableTags[mapTag] =
-cloneableTags[numberTag] = cloneableTags[objectTag] =
-cloneableTags[regexpTag] = cloneableTags[setTag] =
-cloneableTags[stringTag] = cloneableTags[symbolTag] =
-cloneableTags[uint8Tag] = cloneableTags[uint8ClampedTag] =
-cloneableTags[uint16Tag] = cloneableTags[uint32Tag] = true;
-cloneableTags[errorTag] = cloneableTags[funcTag] =
-cloneableTags[weakMapTag] = false;
-
-/** Used to determine if values are of the language type `Object`. */
-var objectTypes = {
-  'function': true,
-  'object': true
-};
-
-/** Detect free variable `exports`. */
-var freeExports = (objectTypes[typeof exports] && exports && !exports.nodeType)
-  ? exports
-  : undefined;
-
-/** Detect free variable `module`. */
-var freeModule = (objectTypes[typeof module] && module && !module.nodeType)
-  ? module
-  : undefined;
-
-/** Detect the popular CommonJS extension `module.exports`. */
-var moduleExports = (freeModule && freeModule.exports === freeExports)
-  ? freeExports
-  : undefined;
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = checkGlobal(freeExports && freeModule && typeof global == 'object' && global);
-
-/** Detect free variable `self`. */
-var freeSelf = checkGlobal(objectTypes[typeof self] && self);
-
-/** Detect free variable `window`. */
-var freeWindow = checkGlobal(objectTypes[typeof window] && window);
-
-/** Detect `this` as the global object. */
-var thisGlobal = checkGlobal(objectTypes[typeof this] && this);
-
-/**
- * Used as a reference to the global object.
- *
- * The `this` value is used if it's the global object to avoid Greasemonkey's
- * restricted `window` object, otherwise the `window` object is used.
- */
-var root = freeGlobal ||
-  ((freeWindow !== (thisGlobal && thisGlobal.window)) && freeWindow) ||
-    freeSelf || thisGlobal || Function('return this')();
-
-/**
- * Adds the key-value `pair` to `map`.
- *
- * @private
- * @param {Object} map The map to modify.
- * @param {Array} pair The key-value pair to add.
- * @returns {Object} Returns `map`.
- */
-function addMapEntry(map, pair) {
-  // Don't return `Map#set` because it doesn't return the map instance in IE 11.
-  map.set(pair[0], pair[1]);
-  return map;
-}
-
-/**
- * Adds `value` to `set`.
- *
- * @private
- * @param {Object} set The set to modify.
- * @param {*} value The value to add.
- * @returns {Object} Returns `set`.
- */
-function addSetEntry(set, value) {
-  set.add(value);
-  return set;
-}
-
-/**
- * A specialized version of `_.forEach` for arrays without support for
- * iteratee shorthands.
- *
- * @private
- * @param {Array} array The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns `array`.
- */
-function arrayEach(array, iteratee) {
-  var index = -1,
-      length = array.length;
-
-  while (++index < length) {
-    if (iteratee(array[index], index, array) === false) {
-      break;
-    }
-  }
-  return array;
-}
-
-/**
- * Appends the elements of `values` to `array`.
- *
- * @private
- * @param {Array} array The array to modify.
- * @param {Array} values The values to append.
- * @returns {Array} Returns `array`.
- */
-function arrayPush(array, values) {
-  var index = -1,
-      length = values.length,
-      offset = array.length;
-
-  while (++index < length) {
-    array[offset + index] = values[index];
-  }
-  return array;
-}
-
-/**
- * A specialized version of `_.reduce` for arrays without support for
- * iteratee shorthands.
- *
- * @private
- * @param {Array} array The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @param {*} [accumulator] The initial value.
- * @param {boolean} [initAccum] Specify using the first element of `array` as
- *  the initial value.
- * @returns {*} Returns the accumulated value.
- */
-function arrayReduce(array, iteratee, accumulator, initAccum) {
-  var index = -1,
-      length = array.length;
-
-  if (initAccum && length) {
-    accumulator = array[++index];
-  }
-  while (++index < length) {
-    accumulator = iteratee(accumulator, array[index], index, array);
-  }
-  return accumulator;
-}
-
-/**
- * The base implementation of `_.times` without support for iteratee shorthands
- * or max array length checks.
- *
- * @private
- * @param {number} n The number of times to invoke `iteratee`.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the array of results.
- */
-function baseTimes(n, iteratee) {
-  var index = -1,
-      result = Array(n);
-
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-  return result;
-}
-
-/**
- * Checks if `value` is a global object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {null|Object} Returns `value` if it's a global object, else `null`.
- */
-function checkGlobal(value) {
-  return (value && value.Object === Object) ? value : null;
-}
-
-/**
- * Checks if `value` is a host object in IE < 9.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
- */
-function isHostObject(value) {
-  // Many host objects are `Object` objects that can coerce to strings
-  // despite having improperly defined `toString` methods.
-  var result = false;
-  if (value != null && typeof value.toString != 'function') {
-    try {
-      result = !!(value + '');
-    } catch (e) {}
-  }
-  return result;
-}
-
-/**
- * Converts `map` to its key-value pairs.
- *
- * @private
- * @param {Object} map The map to convert.
- * @returns {Array} Returns the key-value pairs.
- */
-function mapToArray(map) {
-  var index = -1,
-      result = Array(map.size);
-
-  map.forEach(function(value, key) {
-    result[++index] = [key, value];
-  });
-  return result;
-}
-
-/**
- * Converts `set` to an array of its values.
- *
- * @private
- * @param {Object} set The set to convert.
- * @returns {Array} Returns the values.
- */
-function setToArray(set) {
-  var index = -1,
-      result = Array(set.size);
-
-  set.forEach(function(value) {
-    result[++index] = value;
-  });
-  return result;
-}
-
-/** Used for built-in method references. */
-var arrayProto = Array.prototype,
-    objectProto = Object.prototype;
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = Function.prototype.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/6.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
-
-/** Built-in value references. */
-var Buffer = moduleExports ? root.Buffer : undefined,
-    Symbol = root.Symbol,
-    Uint8Array = root.Uint8Array,
-    getOwnPropertySymbols = Object.getOwnPropertySymbols,
-    objectCreate = Object.create,
-    propertyIsEnumerable = objectProto.propertyIsEnumerable,
-    splice = arrayProto.splice;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeGetPrototype = Object.getPrototypeOf,
-    nativeKeys = Object.keys;
-
-/* Built-in method references that are verified to be native. */
-var DataView = getNative(root, 'DataView'),
-    Map = getNative(root, 'Map'),
-    Promise = getNative(root, 'Promise'),
-    Set = getNative(root, 'Set'),
-    WeakMap = getNative(root, 'WeakMap'),
-    nativeCreate = getNative(Object, 'create');
-
-/** Used to detect maps, sets, and weakmaps. */
-var dataViewCtorString = toSource(DataView),
-    mapCtorString = toSource(Map),
-    promiseCtorString = toSource(Promise),
-    setCtorString = toSource(Set),
-    weakMapCtorString = toSource(WeakMap);
-
-/** Used to convert symbols to primitives and strings. */
-var symbolProto = Symbol ? Symbol.prototype : undefined,
-    symbolValueOf = symbolProto ? symbolProto.valueOf : undefined;
-
-/**
- * Creates a hash object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Hash(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the hash.
- *
- * @private
- * @name clear
- * @memberOf Hash
- */
-function hashClear() {
-  this.__data__ = nativeCreate ? nativeCreate(null) : {};
-}
-
-/**
- * Removes `key` and its value from the hash.
- *
- * @private
- * @name delete
- * @memberOf Hash
- * @param {Object} hash The hash to modify.
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function hashDelete(key) {
-  return this.has(key) && delete this.__data__[key];
-}
-
-/**
- * Gets the hash value for `key`.
- *
- * @private
- * @name get
- * @memberOf Hash
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function hashGet(key) {
-  var data = this.__data__;
-  if (nativeCreate) {
-    var result = data[key];
-    return result === HASH_UNDEFINED ? undefined : result;
-  }
-  return hasOwnProperty.call(data, key) ? data[key] : undefined;
-}
-
-/**
- * Checks if a hash value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Hash
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function hashHas(key) {
-  var data = this.__data__;
-  return nativeCreate ? data[key] !== undefined : hasOwnProperty.call(data, key);
-}
-
-/**
- * Sets the hash `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Hash
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the hash instance.
- */
-function hashSet(key, value) {
-  var data = this.__data__;
-  data[key] = (nativeCreate && value === undefined) ? HASH_UNDEFINED : value;
-  return this;
-}
-
-// Add methods to `Hash`.
-Hash.prototype.clear = hashClear;
-Hash.prototype['delete'] = hashDelete;
-Hash.prototype.get = hashGet;
-Hash.prototype.has = hashHas;
-Hash.prototype.set = hashSet;
-
-/**
- * Creates an list cache object.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function ListCache(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the list cache.
- *
- * @private
- * @name clear
- * @memberOf ListCache
- */
-function listCacheClear() {
-  this.__data__ = [];
-}
-
-/**
- * Removes `key` and its value from the list cache.
- *
- * @private
- * @name delete
- * @memberOf ListCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function listCacheDelete(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    return false;
-  }
-  var lastIndex = data.length - 1;
-  if (index == lastIndex) {
-    data.pop();
-  } else {
-    splice.call(data, index, 1);
-  }
-  return true;
-}
-
-/**
- * Gets the list cache value for `key`.
- *
- * @private
- * @name get
- * @memberOf ListCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function listCacheGet(key) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  return index < 0 ? undefined : data[index][1];
-}
-
-/**
- * Checks if a list cache value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf ListCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function listCacheHas(key) {
-  return assocIndexOf(this.__data__, key) > -1;
-}
-
-/**
- * Sets the list cache `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf ListCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the list cache instance.
- */
-function listCacheSet(key, value) {
-  var data = this.__data__,
-      index = assocIndexOf(data, key);
-
-  if (index < 0) {
-    data.push([key, value]);
-  } else {
-    data[index][1] = value;
-  }
-  return this;
-}
-
-// Add methods to `ListCache`.
-ListCache.prototype.clear = listCacheClear;
-ListCache.prototype['delete'] = listCacheDelete;
-ListCache.prototype.get = listCacheGet;
-ListCache.prototype.has = listCacheHas;
-ListCache.prototype.set = listCacheSet;
-
-/**
- * Creates a map cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function MapCache(entries) {
-  var index = -1,
-      length = entries ? entries.length : 0;
-
-  this.clear();
-  while (++index < length) {
-    var entry = entries[index];
-    this.set(entry[0], entry[1]);
-  }
-}
-
-/**
- * Removes all key-value entries from the map.
- *
- * @private
- * @name clear
- * @memberOf MapCache
- */
-function mapCacheClear() {
-  this.__data__ = {
-    'hash': new Hash,
-    'map': new (Map || ListCache),
-    'string': new Hash
-  };
-}
-
-/**
- * Removes `key` and its value from the map.
- *
- * @private
- * @name delete
- * @memberOf MapCache
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function mapCacheDelete(key) {
-  return getMapData(this, key)['delete'](key);
-}
-
-/**
- * Gets the map value for `key`.
- *
- * @private
- * @name get
- * @memberOf MapCache
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function mapCacheGet(key) {
-  return getMapData(this, key).get(key);
-}
-
-/**
- * Checks if a map value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf MapCache
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function mapCacheHas(key) {
-  return getMapData(this, key).has(key);
-}
-
-/**
- * Sets the map `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf MapCache
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the map cache instance.
- */
-function mapCacheSet(key, value) {
-  getMapData(this, key).set(key, value);
-  return this;
-}
-
-// Add methods to `MapCache`.
-MapCache.prototype.clear = mapCacheClear;
-MapCache.prototype['delete'] = mapCacheDelete;
-MapCache.prototype.get = mapCacheGet;
-MapCache.prototype.has = mapCacheHas;
-MapCache.prototype.set = mapCacheSet;
-
-/**
- * Creates a stack cache object to store key-value pairs.
- *
- * @private
- * @constructor
- * @param {Array} [entries] The key-value pairs to cache.
- */
-function Stack(entries) {
-  this.__data__ = new ListCache(entries);
-}
-
-/**
- * Removes all key-value entries from the stack.
- *
- * @private
- * @name clear
- * @memberOf Stack
- */
-function stackClear() {
-  this.__data__ = new ListCache;
-}
-
-/**
- * Removes `key` and its value from the stack.
- *
- * @private
- * @name delete
- * @memberOf Stack
- * @param {string} key The key of the value to remove.
- * @returns {boolean} Returns `true` if the entry was removed, else `false`.
- */
-function stackDelete(key) {
-  return this.__data__['delete'](key);
-}
-
-/**
- * Gets the stack value for `key`.
- *
- * @private
- * @name get
- * @memberOf Stack
- * @param {string} key The key of the value to get.
- * @returns {*} Returns the entry value.
- */
-function stackGet(key) {
-  return this.__data__.get(key);
-}
-
-/**
- * Checks if a stack value for `key` exists.
- *
- * @private
- * @name has
- * @memberOf Stack
- * @param {string} key The key of the entry to check.
- * @returns {boolean} Returns `true` if an entry for `key` exists, else `false`.
- */
-function stackHas(key) {
-  return this.__data__.has(key);
-}
-
-/**
- * Sets the stack `key` to `value`.
- *
- * @private
- * @name set
- * @memberOf Stack
- * @param {string} key The key of the value to set.
- * @param {*} value The value to set.
- * @returns {Object} Returns the stack cache instance.
- */
-function stackSet(key, value) {
-  var cache = this.__data__;
-  if (cache instanceof ListCache && cache.__data__.length == LARGE_ARRAY_SIZE) {
-    cache = this.__data__ = new MapCache(cache.__data__);
-  }
-  cache.set(key, value);
-  return this;
-}
-
-// Add methods to `Stack`.
-Stack.prototype.clear = stackClear;
-Stack.prototype['delete'] = stackDelete;
-Stack.prototype.get = stackGet;
-Stack.prototype.has = stackHas;
-Stack.prototype.set = stackSet;
-
-/**
- * Assigns `value` to `key` of `object` if the existing value is not equivalent
- * using [`SameValueZero`](http://ecma-international.org/ecma-262/6.0/#sec-samevaluezero)
- * for equality comparisons.
- *
- * @private
- * @param {Object} object The object to modify.
- * @param {string} key The key of the property to assign.
- * @param {*} value The value to assign.
- */
-function assignValue(object, key, value) {
-  var objValue = object[key];
-  if (!(hasOwnProperty.call(object, key) && eq(objValue, value)) ||
-      (value === undefined && !(key in object))) {
-    object[key] = value;
-  }
-}
-
-/**
- * Gets the index at which the `key` is found in `array` of key-value pairs.
- *
- * @private
- * @param {Array} array The array to search.
- * @param {*} key The key to search for.
- * @returns {number} Returns the index of the matched value, else `-1`.
- */
-function assocIndexOf(array, key) {
-  var length = array.length;
-  while (length--) {
-    if (eq(array[length][0], key)) {
-      return length;
-    }
-  }
-  return -1;
-}
-
-/**
- * The base implementation of `_.assign` without support for multiple sources
- * or `customizer` functions.
- *
- * @private
- * @param {Object} object The destination object.
- * @param {Object} source The source object.
- * @returns {Object} Returns `object`.
- */
-function baseAssign(object, source) {
-  return object && copyObject(source, keys(source), object);
-}
-
-/**
- * The base implementation of `_.clone` and `_.cloneDeep` which tracks
- * traversed objects.
- *
- * @private
- * @param {*} value The value to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @param {boolean} [isFull] Specify a clone including symbols.
- * @param {Function} [customizer] The function to customize cloning.
- * @param {string} [key] The key of `value`.
- * @param {Object} [object] The parent object of `value`.
- * @param {Object} [stack] Tracks traversed objects and their clone counterparts.
- * @returns {*} Returns the cloned value.
- */
-function baseClone(value, isDeep, isFull, customizer, key, object, stack) {
-  var result;
-  if (customizer) {
-    result = object ? customizer(value, key, object, stack) : customizer(value);
-  }
-  if (result !== undefined) {
-    return result;
-  }
-  if (!isObject(value)) {
-    return value;
-  }
-  var isArr = isArray(value);
-  if (isArr) {
-    result = initCloneArray(value);
-    if (!isDeep) {
-      return copyArray(value, result);
-    }
-  } else {
-    var tag = getTag(value),
-        isFunc = tag == funcTag || tag == genTag;
-
-    if (isBuffer(value)) {
-      return cloneBuffer(value, isDeep);
-    }
-    if (tag == objectTag || tag == argsTag || (isFunc && !object)) {
-      if (isHostObject(value)) {
-        return object ? value : {};
-      }
-      result = initCloneObject(isFunc ? {} : value);
-      if (!isDeep) {
-        return copySymbols(value, baseAssign(result, value));
-      }
-    } else {
-      if (!cloneableTags[tag]) {
-        return object ? value : {};
-      }
-      result = initCloneByTag(value, tag, baseClone, isDeep);
-    }
-  }
-  // Check for circular references and return its corresponding clone.
-  stack || (stack = new Stack);
-  var stacked = stack.get(value);
-  if (stacked) {
-    return stacked;
-  }
-  stack.set(value, result);
-
-  if (!isArr) {
-    var props = isFull ? getAllKeys(value) : keys(value);
-  }
-  // Recursively populate clone (susceptible to call stack limits).
-  arrayEach(props || value, function(subValue, key) {
-    if (props) {
-      key = subValue;
-      subValue = value[key];
-    }
-    assignValue(result, key, baseClone(subValue, isDeep, isFull, customizer, key, value, stack));
-  });
-  return result;
-}
-
-/**
- * The base implementation of `_.create` without support for assigning
- * properties to the created object.
- *
- * @private
- * @param {Object} prototype The object to inherit from.
- * @returns {Object} Returns the new object.
- */
-function baseCreate(proto) {
-  return isObject(proto) ? objectCreate(proto) : {};
-}
-
-/**
- * The base implementation of `getAllKeys` and `getAllKeysIn` which uses
- * `keysFunc` and `symbolsFunc` to get the enumerable property names and
- * symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Function} keysFunc The function to get the keys of `object`.
- * @param {Function} symbolsFunc The function to get the symbols of `object`.
- * @returns {Array} Returns the array of property names and symbols.
- */
-function baseGetAllKeys(object, keysFunc, symbolsFunc) {
-  var result = keysFunc(object);
-  return isArray(object) ? result : arrayPush(result, symbolsFunc(object));
-}
-
-/**
- * The base implementation of `_.has` without support for deep paths.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Array|string} key The key to check.
- * @returns {boolean} Returns `true` if `key` exists, else `false`.
- */
-function baseHas(object, key) {
-  // Avoid a bug in IE 10-11 where objects with a [[Prototype]] of `null`,
-  // that are composed entirely of index properties, return `false` for
-  // `hasOwnProperty` checks of them.
-  return hasOwnProperty.call(object, key) ||
-    (typeof object == 'object' && key in object && getPrototype(object) === null);
-}
-
-/**
- * The base implementation of `_.keys` which doesn't skip the constructor
- * property of prototypes or treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function baseKeys(object) {
-  return nativeKeys(Object(object));
-}
-
-/**
- * The base implementation of `_.property` without support for deep paths.
- *
- * @private
- * @param {string} key The key of the property to get.
- * @returns {Function} Returns the new accessor function.
- */
-function baseProperty(key) {
-  return function(object) {
-    return object == null ? undefined : object[key];
-  };
-}
-
-/**
- * Creates a clone of  `buffer`.
- *
- * @private
- * @param {Buffer} buffer The buffer to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Buffer} Returns the cloned buffer.
- */
-function cloneBuffer(buffer, isDeep) {
-  if (isDeep) {
-    return buffer.slice();
-  }
-  var result = new buffer.constructor(buffer.length);
-  buffer.copy(result);
-  return result;
-}
-
-/**
- * Creates a clone of `arrayBuffer`.
- *
- * @private
- * @param {ArrayBuffer} arrayBuffer The array buffer to clone.
- * @returns {ArrayBuffer} Returns the cloned array buffer.
- */
-function cloneArrayBuffer(arrayBuffer) {
-  var result = new arrayBuffer.constructor(arrayBuffer.byteLength);
-  new Uint8Array(result).set(new Uint8Array(arrayBuffer));
-  return result;
-}
-
-/**
- * Creates a clone of `dataView`.
- *
- * @private
- * @param {Object} dataView The data view to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the cloned data view.
- */
-function cloneDataView(dataView, isDeep) {
-  var buffer = isDeep ? cloneArrayBuffer(dataView.buffer) : dataView.buffer;
-  return new dataView.constructor(buffer, dataView.byteOffset, dataView.byteLength);
-}
-
-/**
- * Creates a clone of `map`.
- *
- * @private
- * @param {Object} map The map to clone.
- * @param {Function} cloneFunc The function to clone values.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the cloned map.
- */
-function cloneMap(map, isDeep, cloneFunc) {
-  var array = isDeep ? cloneFunc(mapToArray(map), true) : mapToArray(map);
-  return arrayReduce(array, addMapEntry, new map.constructor);
-}
-
-/**
- * Creates a clone of `regexp`.
- *
- * @private
- * @param {Object} regexp The regexp to clone.
- * @returns {Object} Returns the cloned regexp.
- */
-function cloneRegExp(regexp) {
-  var result = new regexp.constructor(regexp.source, reFlags.exec(regexp));
-  result.lastIndex = regexp.lastIndex;
-  return result;
-}
-
-/**
- * Creates a clone of `set`.
- *
- * @private
- * @param {Object} set The set to clone.
- * @param {Function} cloneFunc The function to clone values.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the cloned set.
- */
-function cloneSet(set, isDeep, cloneFunc) {
-  var array = isDeep ? cloneFunc(setToArray(set), true) : setToArray(set);
-  return arrayReduce(array, addSetEntry, new set.constructor);
-}
-
-/**
- * Creates a clone of the `symbol` object.
- *
- * @private
- * @param {Object} symbol The symbol object to clone.
- * @returns {Object} Returns the cloned symbol object.
- */
-function cloneSymbol(symbol) {
-  return symbolValueOf ? Object(symbolValueOf.call(symbol)) : {};
-}
-
-/**
- * Creates a clone of `typedArray`.
- *
- * @private
- * @param {Object} typedArray The typed array to clone.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the cloned typed array.
- */
-function cloneTypedArray(typedArray, isDeep) {
-  var buffer = isDeep ? cloneArrayBuffer(typedArray.buffer) : typedArray.buffer;
-  return new typedArray.constructor(buffer, typedArray.byteOffset, typedArray.length);
-}
-
-/**
- * Copies the values of `source` to `array`.
- *
- * @private
- * @param {Array} source The array to copy values from.
- * @param {Array} [array=[]] The array to copy values to.
- * @returns {Array} Returns `array`.
- */
-function copyArray(source, array) {
-  var index = -1,
-      length = source.length;
-
-  array || (array = Array(length));
-  while (++index < length) {
-    array[index] = source[index];
-  }
-  return array;
-}
-
-/**
- * Copies properties of `source` to `object`.
- *
- * @private
- * @param {Object} source The object to copy properties from.
- * @param {Array} props The property identifiers to copy.
- * @param {Object} [object={}] The object to copy properties to.
- * @param {Function} [customizer] The function to customize copied values.
- * @returns {Object} Returns `object`.
- */
-function copyObject(source, props, object, customizer) {
-  object || (object = {});
-
-  var index = -1,
-      length = props.length;
-
-  while (++index < length) {
-    var key = props[index];
-
-    var newValue = customizer
-      ? customizer(object[key], source[key], key, object, source)
-      : source[key];
-
-    assignValue(object, key, newValue);
-  }
-  return object;
-}
-
-/**
- * Copies own symbol properties of `source` to `object`.
- *
- * @private
- * @param {Object} source The object to copy symbols from.
- * @param {Object} [object={}] The object to copy symbols to.
- * @returns {Object} Returns `object`.
- */
-function copySymbols(source, object) {
-  return copyObject(source, getSymbols(source), object);
-}
-
-/**
- * Creates an array of own enumerable property names and symbols of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names and symbols.
- */
-function getAllKeys(object) {
-  return baseGetAllKeys(object, keys, getSymbols);
-}
-
-/**
- * Gets the "length" property value of `object`.
- *
- * **Note:** This function is used to avoid a
- * [JIT bug](https://bugs.webkit.org/show_bug.cgi?id=142792) that affects
- * Safari on at least iOS 8.1-8.3 ARM64.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {*} Returns the "length" value.
- */
-var getLength = baseProperty('length');
-
-/**
- * Gets the data for `map`.
- *
- * @private
- * @param {Object} map The map to query.
- * @param {string} key The reference key.
- * @returns {*} Returns the map data.
- */
-function getMapData(map, key) {
-  var data = map.__data__;
-  return isKeyable(key)
-    ? data[typeof key == 'string' ? 'string' : 'hash']
-    : data.map;
-}
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = object[key];
-  return isNative(value) ? value : undefined;
-}
-
-/**
- * Gets the `[[Prototype]]` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {null|Object} Returns the `[[Prototype]]`.
- */
-function getPrototype(value) {
-  return nativeGetPrototype(Object(value));
-}
-
-/**
- * Creates an array of the own enumerable symbol properties of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of symbols.
- */
-function getSymbols(object) {
-  // Coerce `object` to an object to avoid non-object errors in V8.
-  // See https://bugs.chromium.org/p/v8/issues/detail?id=3443 for more details.
-  return getOwnPropertySymbols(Object(object));
-}
-
-// Fallback for IE < 11.
-if (!getOwnPropertySymbols) {
-  getSymbols = function() {
-    return [];
-  };
-}
-
-/**
- * Gets the `toStringTag` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function getTag(value) {
-  return objectToString.call(value);
-}
-
-// Fallback for data views, maps, sets, and weak maps in IE 11,
-// for data views in Edge, and promises in Node.js.
-if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
-    (Map && getTag(new Map) != mapTag) ||
-    (Promise && getTag(Promise.resolve()) != promiseTag) ||
-    (Set && getTag(new Set) != setTag) ||
-    (WeakMap && getTag(new WeakMap) != weakMapTag)) {
-  getTag = function(value) {
-    var result = objectToString.call(value),
-        Ctor = result == objectTag ? value.constructor : undefined,
-        ctorString = Ctor ? toSource(Ctor) : undefined;
-
-    if (ctorString) {
-      switch (ctorString) {
-        case dataViewCtorString: return dataViewTag;
-        case mapCtorString: return mapTag;
-        case promiseCtorString: return promiseTag;
-        case setCtorString: return setTag;
-        case weakMapCtorString: return weakMapTag;
-      }
-    }
-    return result;
-  };
-}
-
-/**
- * Initializes an array clone.
- *
- * @private
- * @param {Array} array The array to clone.
- * @returns {Array} Returns the initialized clone.
- */
-function initCloneArray(array) {
-  var length = array.length,
-      result = array.constructor(length);
-
-  // Add properties assigned by `RegExp#exec`.
-  if (length && typeof array[0] == 'string' && hasOwnProperty.call(array, 'index')) {
-    result.index = array.index;
-    result.input = array.input;
-  }
-  return result;
-}
-
-/**
- * Initializes an object clone.
- *
- * @private
- * @param {Object} object The object to clone.
- * @returns {Object} Returns the initialized clone.
- */
-function initCloneObject(object) {
-  return (typeof object.constructor == 'function' && !isPrototype(object))
-    ? baseCreate(getPrototype(object))
-    : {};
-}
-
-/**
- * Initializes an object clone based on its `toStringTag`.
- *
- * **Note:** This function only supports cloning values with tags of
- * `Boolean`, `Date`, `Error`, `Number`, `RegExp`, or `String`.
- *
- * @private
- * @param {Object} object The object to clone.
- * @param {string} tag The `toStringTag` of the object to clone.
- * @param {Function} cloneFunc The function to clone values.
- * @param {boolean} [isDeep] Specify a deep clone.
- * @returns {Object} Returns the initialized clone.
- */
-function initCloneByTag(object, tag, cloneFunc, isDeep) {
-  var Ctor = object.constructor;
-  switch (tag) {
-    case arrayBufferTag:
-      return cloneArrayBuffer(object);
-
-    case boolTag:
-    case dateTag:
-      return new Ctor(+object);
-
-    case dataViewTag:
-      return cloneDataView(object, isDeep);
-
-    case float32Tag: case float64Tag:
-    case int8Tag: case int16Tag: case int32Tag:
-    case uint8Tag: case uint8ClampedTag: case uint16Tag: case uint32Tag:
-      return cloneTypedArray(object, isDeep);
-
-    case mapTag:
-      return cloneMap(object, isDeep, cloneFunc);
-
-    case numberTag:
-    case stringTag:
-      return new Ctor(object);
-
-    case regexpTag:
-      return cloneRegExp(object);
-
-    case setTag:
-      return cloneSet(object, isDeep, cloneFunc);
-
-    case symbolTag:
-      return cloneSymbol(object);
-  }
-}
-
-/**
- * Creates an array of index keys for `object` values of arrays,
- * `arguments` objects, and strings, otherwise `null` is returned.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array|null} Returns index keys, else `null`.
- */
-function indexKeys(object) {
-  var length = object ? object.length : undefined;
-  if (isLength(length) &&
-      (isArray(object) || isString(object) || isArguments(object))) {
-    return baseTimes(length, String);
-  }
-  return null;
-}
-
-/**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
-function isIndex(value, length) {
-  length = length == null ? MAX_SAFE_INTEGER : length;
-  return !!length &&
-    (typeof value == 'number' || reIsUint.test(value)) &&
-    (value > -1 && value % 1 == 0 && value < length);
-}
-
-/**
- * Checks if `value` is suitable for use as unique object key.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is suitable, else `false`.
- */
-function isKeyable(value) {
-  var type = typeof value;
-  return (type == 'string' || type == 'number' || type == 'symbol' || type == 'boolean')
-    ? (value !== '__proto__')
-    : (value === null);
-}
-
-/**
- * Checks if `value` is likely a prototype object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
- */
-function isPrototype(value) {
-  var Ctor = value && value.constructor,
-      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
-
-  return value === proto;
-}
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to process.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-/**
- * Performs a
- * [`SameValueZero`](http://ecma-international.org/ecma-262/6.0/#sec-samevaluezero)
- * comparison between two values to determine if they are equivalent.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to compare.
- * @param {*} other The other value to compare.
- * @returns {boolean} Returns `true` if the values are equivalent, else `false`.
- * @example
- *
- * var object = { 'user': 'fred' };
- * var other = { 'user': 'fred' };
- *
- * _.eq(object, object);
- * // => true
- *
- * _.eq(object, other);
- * // => false
- *
- * _.eq('a', 'a');
- * // => true
- *
- * _.eq('a', Object('a'));
- * // => false
- *
- * _.eq(NaN, NaN);
- * // => true
- */
-function eq(value, other) {
-  return value === other || (value !== value && other !== other);
-}
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-function isArguments(value) {
-  // Safari 8.1 incorrectly makes `arguments.callee` enumerable in strict mode.
-  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
-    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
-}
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @type {Function}
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified,
- *  else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike(value) {
-  return value != null && isLength(getLength(value)) && !isFunction(value);
-}
-
-/**
- * This method is like `_.isArrayLike` except that it also checks if `value`
- * is an object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array-like object,
- *  else `false`.
- * @example
- *
- * _.isArrayLikeObject([1, 2, 3]);
- * // => true
- *
- * _.isArrayLikeObject(document.body.children);
- * // => true
- *
- * _.isArrayLikeObject('abc');
- * // => false
- *
- * _.isArrayLikeObject(_.noop);
- * // => false
- */
-function isArrayLikeObject(value) {
-  return isObjectLike(value) && isArrayLike(value);
-}
-
-/**
- * Checks if `value` is a buffer.
- *
- * @static
- * @memberOf _
- * @since 4.3.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a buffer, else `false`.
- * @example
- *
- * _.isBuffer(new Buffer(2));
- * // => true
- *
- * _.isBuffer(new Uint8Array(2));
- * // => false
- */
-var isBuffer = !Buffer ? constant(false) : function(value) {
-  return value instanceof Buffer;
-};
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified,
- *  else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 8 which returns 'object' for typed array and weak map constructors,
-  // and PhantomJS 1.9 which returns 'function' for `NodeList` instances.
-  var tag = isObject(value) ? objectToString.call(value) : '';
-  return tag == funcTag || tag == genTag;
-}
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This function is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/6.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length,
- *  else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/6.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is a native function.
- *
- * @static
- * @memberOf _
- * @since 3.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- * @example
- *
- * _.isNative(Array.prototype.push);
- * // => true
- *
- * _.isNative(_);
- * // => false
- */
-function isNative(value) {
-  if (!isObject(value)) {
-    return false;
-  }
-  var pattern = (isFunction(value) || isHostObject(value)) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource(value));
-}
-
-/**
- * Checks if `value` is classified as a `String` primitive or object.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is correctly classified,
- *  else `false`.
- * @example
- *
- * _.isString('abc');
- * // => true
- *
- * _.isString(1);
- * // => false
- */
-function isString(value) {
-  return typeof value == 'string' ||
-    (!isArray(value) && isObjectLike(value) && objectToString.call(value) == stringTag);
-}
-
-/**
- * Creates an array of the own enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects. See the
- * [ES spec](http://ecma-international.org/ecma-262/6.0/#sec-object.keys)
- * for more details.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keys(new Foo);
- * // => ['a', 'b'] (iteration order is not guaranteed)
- *
- * _.keys('hi');
- * // => ['0', '1']
- */
-function keys(object) {
-  var isProto = isPrototype(object);
-  if (!(isProto || isArrayLike(object))) {
-    return baseKeys(object);
-  }
-  var indexes = indexKeys(object),
-      skipIndexes = !!indexes,
-      result = indexes || [],
-      length = result.length;
-
-  for (var key in object) {
-    if (baseHas(object, key) &&
-        !(skipIndexes && (key == 'length' || isIndex(key, length))) &&
-        !(isProto && key == 'constructor')) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Creates a function that returns `value`.
- *
- * @static
- * @memberOf _
- * @since 2.4.0
- * @category Util
- * @param {*} value The value to return from the new function.
- * @returns {Function} Returns the new constant function.
- * @example
- *
- * var object = { 'user': 'fred' };
- * var getter = _.constant(object);
- *
- * getter() === object;
- * // => true
- */
-function constant(value) {
-  return function() {
-    return value;
-  };
-}
-
-module.exports = baseClone;
-
-/* WEBPACK VAR INJECTION */}.call(exports, __webpack_require__(163)(module)))
-
-/***/ }),
-/* 749 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/**
- * lodash 4.3.2 (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright 2012-2016 The Dojo Foundation <http://dojofoundation.org/>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright 2009-2016 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- * Available under MIT license <https://lodash.com/license>
- */
-var baseClone = __webpack_require__(748);
-
-/**
- * Creates a shallow clone of `value`.
- *
- * **Note:** This method is loosely based on the
- * [structured clone algorithm](https://mdn.io/Structured_clone_algorithm)
- * and supports cloning arrays, array buffers, booleans, date objects, maps,
- * numbers, `Object` objects, regexes, sets, strings, symbols, and typed
- * arrays. The own enumerable properties of `arguments` objects are cloned
- * as plain objects. An empty object is returned for uncloneable values such
- * as error objects, functions, DOM nodes, and WeakMaps.
- *
- * @static
- * @memberOf _
- * @category Lang
- * @param {*} value The value to clone.
- * @returns {*} Returns the cloned value.
- * @example
- *
- * var objects = [{ 'a': 1 }, { 'b': 2 }];
- *
- * var shallow = _.clone(objects);
- * console.log(shallow[0] === objects[0]);
- * // => true
- */
-function clone(value) {
-  return baseClone(value, false, true);
-}
-
-module.exports = clone;
-
-
-/***/ }),
-/* 750 */
-/***/ (function(module, exports) {
-
-/**
- * lodash (Custom Build) <https://lodash.com/>
- * Build: `lodash modularize exports="npm" -o ./`
- * Copyright jQuery Foundation and other contributors <https://jquery.org/>
- * Released under MIT license <https://lodash.com/license>
- * Based on Underscore.js 1.8.3 <http://underscorejs.org/LICENSE>
- * Copyright Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors
- */
-
-/** Used as references for various `Number` constants. */
-var MAX_SAFE_INTEGER = 9007199254740991;
-
-/** `Object#toString` result references. */
-var argsTag = '[object Arguments]',
-    funcTag = '[object Function]',
-    genTag = '[object GeneratorFunction]',
-    mapTag = '[object Map]',
-    objectTag = '[object Object]',
-    promiseTag = '[object Promise]',
-    setTag = '[object Set]',
-    stringTag = '[object String]',
-    weakMapTag = '[object WeakMap]';
-
-var dataViewTag = '[object DataView]';
-
-/**
- * Used to match `RegExp`
- * [syntax characters](http://ecma-international.org/ecma-262/7.0/#sec-patterns).
- */
-var reRegExpChar = /[\\^$.*+?()[\]{}|]/g;
-
-/** Used to detect host constructors (Safari). */
-var reIsHostCtor = /^\[object .+?Constructor\]$/;
-
-/** Used to detect unsigned integer values. */
-var reIsUint = /^(?:0|[1-9]\d*)$/;
-
-/** Used to compose unicode character classes. */
-var rsAstralRange = '\\ud800-\\udfff',
-    rsComboMarksRange = '\\u0300-\\u036f\\ufe20-\\ufe23',
-    rsComboSymbolsRange = '\\u20d0-\\u20f0',
-    rsVarRange = '\\ufe0e\\ufe0f';
-
-/** Used to compose unicode capture groups. */
-var rsAstral = '[' + rsAstralRange + ']',
-    rsCombo = '[' + rsComboMarksRange + rsComboSymbolsRange + ']',
-    rsFitz = '\\ud83c[\\udffb-\\udfff]',
-    rsModifier = '(?:' + rsCombo + '|' + rsFitz + ')',
-    rsNonAstral = '[^' + rsAstralRange + ']',
-    rsRegional = '(?:\\ud83c[\\udde6-\\uddff]){2}',
-    rsSurrPair = '[\\ud800-\\udbff][\\udc00-\\udfff]',
-    rsZWJ = '\\u200d';
-
-/** Used to compose unicode regexes. */
-var reOptMod = rsModifier + '?',
-    rsOptVar = '[' + rsVarRange + ']?',
-    rsOptJoin = '(?:' + rsZWJ + '(?:' + [rsNonAstral, rsRegional, rsSurrPair].join('|') + ')' + rsOptVar + reOptMod + ')*',
-    rsSeq = rsOptVar + reOptMod + rsOptJoin,
-    rsSymbol = '(?:' + [rsNonAstral + rsCombo + '?', rsCombo, rsRegional, rsSurrPair, rsAstral].join('|') + ')';
-
-/** Used to match [string symbols](https://mathiasbynens.be/notes/javascript-unicode). */
-var reUnicode = RegExp(rsFitz + '(?=' + rsFitz + ')|' + rsSymbol + rsSeq, 'g');
-
-/** Used to detect strings with [zero-width joiners or code points from the astral planes](http://eev.ee/blog/2015/09/12/dark-corners-of-unicode/). */
-var reHasUnicode = RegExp('[' + rsZWJ + rsAstralRange  + rsComboMarksRange + rsComboSymbolsRange + rsVarRange + ']');
-
-/** Detect free variable `global` from Node.js. */
-var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
-
-/** Detect free variable `self`. */
-var freeSelf = typeof self == 'object' && self && self.Object === Object && self;
-
-/** Used as a reference to the global object. */
-var root = freeGlobal || freeSelf || Function('return this')();
-
-/**
- * A specialized version of `_.map` for arrays without support for iteratee
- * shorthands.
- *
- * @private
- * @param {Array} [array] The array to iterate over.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the new mapped array.
- */
-function arrayMap(array, iteratee) {
-  var index = -1,
-      length = array ? array.length : 0,
-      result = Array(length);
-
-  while (++index < length) {
-    result[index] = iteratee(array[index], index, array);
-  }
-  return result;
-}
-
-/**
- * Converts an ASCII `string` to an array.
- *
- * @private
- * @param {string} string The string to convert.
- * @returns {Array} Returns the converted array.
- */
-function asciiToArray(string) {
-  return string.split('');
-}
-
-/**
- * The base implementation of `_.times` without support for iteratee shorthands
- * or max array length checks.
- *
- * @private
- * @param {number} n The number of times to invoke `iteratee`.
- * @param {Function} iteratee The function invoked per iteration.
- * @returns {Array} Returns the array of results.
- */
-function baseTimes(n, iteratee) {
-  var index = -1,
-      result = Array(n);
-
-  while (++index < n) {
-    result[index] = iteratee(index);
-  }
-  return result;
-}
-
-/**
- * The base implementation of `_.values` and `_.valuesIn` which creates an
- * array of `object` property values corresponding to the property names
- * of `props`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {Array} props The property names to get values for.
- * @returns {Object} Returns the array of property values.
- */
-function baseValues(object, props) {
-  return arrayMap(props, function(key) {
-    return object[key];
-  });
-}
-
-/**
- * Gets the value at `key` of `object`.
- *
- * @private
- * @param {Object} [object] The object to query.
- * @param {string} key The key of the property to get.
- * @returns {*} Returns the property value.
- */
-function getValue(object, key) {
-  return object == null ? undefined : object[key];
-}
-
-/**
- * Checks if `string` contains Unicode symbols.
- *
- * @private
- * @param {string} string The string to inspect.
- * @returns {boolean} Returns `true` if a symbol is found, else `false`.
- */
-function hasUnicode(string) {
-  return reHasUnicode.test(string);
-}
-
-/**
- * Checks if `value` is a host object in IE < 9.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a host object, else `false`.
- */
-function isHostObject(value) {
-  // Many host objects are `Object` objects that can coerce to strings
-  // despite having improperly defined `toString` methods.
-  var result = false;
-  if (value != null && typeof value.toString != 'function') {
-    try {
-      result = !!(value + '');
-    } catch (e) {}
-  }
-  return result;
-}
-
-/**
- * Converts `iterator` to an array.
- *
- * @private
- * @param {Object} iterator The iterator to convert.
- * @returns {Array} Returns the converted array.
- */
-function iteratorToArray(iterator) {
-  var data,
-      result = [];
-
-  while (!(data = iterator.next()).done) {
-    result.push(data.value);
-  }
-  return result;
-}
-
-/**
- * Converts `map` to its key-value pairs.
- *
- * @private
- * @param {Object} map The map to convert.
- * @returns {Array} Returns the key-value pairs.
- */
-function mapToArray(map) {
-  var index = -1,
-      result = Array(map.size);
-
-  map.forEach(function(value, key) {
-    result[++index] = [key, value];
-  });
-  return result;
-}
-
-/**
- * Creates a unary function that invokes `func` with its argument transformed.
- *
- * @private
- * @param {Function} func The function to wrap.
- * @param {Function} transform The argument transform.
- * @returns {Function} Returns the new function.
- */
-function overArg(func, transform) {
-  return function(arg) {
-    return func(transform(arg));
-  };
-}
-
-/**
- * Converts `set` to an array of its values.
- *
- * @private
- * @param {Object} set The set to convert.
- * @returns {Array} Returns the values.
- */
-function setToArray(set) {
-  var index = -1,
-      result = Array(set.size);
-
-  set.forEach(function(value) {
-    result[++index] = value;
-  });
-  return result;
-}
-
-/**
- * Converts `string` to an array.
- *
- * @private
- * @param {string} string The string to convert.
- * @returns {Array} Returns the converted array.
- */
-function stringToArray(string) {
-  return hasUnicode(string)
-    ? unicodeToArray(string)
-    : asciiToArray(string);
-}
-
-/**
- * Converts a Unicode `string` to an array.
- *
- * @private
- * @param {string} string The string to convert.
- * @returns {Array} Returns the converted array.
- */
-function unicodeToArray(string) {
-  return string.match(reUnicode) || [];
-}
-
-/** Used for built-in method references. */
-var funcProto = Function.prototype,
-    objectProto = Object.prototype;
-
-/** Used to detect overreaching core-js shims. */
-var coreJsData = root['__core-js_shared__'];
-
-/** Used to detect methods masquerading as native. */
-var maskSrcKey = (function() {
-  var uid = /[^.]+$/.exec(coreJsData && coreJsData.keys && coreJsData.keys.IE_PROTO || '');
-  return uid ? ('Symbol(src)_1.' + uid) : '';
-}());
-
-/** Used to resolve the decompiled source of functions. */
-var funcToString = funcProto.toString;
-
-/** Used to check objects for own properties. */
-var hasOwnProperty = objectProto.hasOwnProperty;
-
-/**
- * Used to resolve the
- * [`toStringTag`](http://ecma-international.org/ecma-262/7.0/#sec-object.prototype.tostring)
- * of values.
- */
-var objectToString = objectProto.toString;
-
-/** Used to detect if a method is native. */
-var reIsNative = RegExp('^' +
-  funcToString.call(hasOwnProperty).replace(reRegExpChar, '\\$&')
-  .replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g, '$1.*?') + '$'
-);
-
-/** Built-in value references. */
-var Symbol = root.Symbol,
-    iteratorSymbol = Symbol ? Symbol.iterator : undefined,
-    propertyIsEnumerable = objectProto.propertyIsEnumerable;
-
-/* Built-in method references for those with the same name as other `lodash` methods. */
-var nativeKeys = overArg(Object.keys, Object);
-
-/* Built-in method references that are verified to be native. */
-var DataView = getNative(root, 'DataView'),
-    Map = getNative(root, 'Map'),
-    Promise = getNative(root, 'Promise'),
-    Set = getNative(root, 'Set'),
-    WeakMap = getNative(root, 'WeakMap');
-
-/** Used to detect maps, sets, and weakmaps. */
-var dataViewCtorString = toSource(DataView),
-    mapCtorString = toSource(Map),
-    promiseCtorString = toSource(Promise),
-    setCtorString = toSource(Set),
-    weakMapCtorString = toSource(WeakMap);
-
-/**
- * Creates an array of the enumerable property names of the array-like `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @param {boolean} inherited Specify returning inherited property names.
- * @returns {Array} Returns the array of property names.
- */
-function arrayLikeKeys(value, inherited) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  // Safari 9 makes `arguments.length` enumerable in strict mode.
-  var result = (isArray(value) || isArguments(value))
-    ? baseTimes(value.length, String)
-    : [];
-
-  var length = result.length,
-      skipIndexes = !!length;
-
-  for (var key in value) {
-    if ((inherited || hasOwnProperty.call(value, key)) &&
-        !(skipIndexes && (key == 'length' || isIndex(key, length)))) {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * The base implementation of `getTag`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-function baseGetTag(value) {
-  return objectToString.call(value);
-}
-
-/**
- * The base implementation of `_.isNative` without bad shim checks.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a native function,
- *  else `false`.
- */
-function baseIsNative(value) {
-  if (!isObject(value) || isMasked(value)) {
-    return false;
-  }
-  var pattern = (isFunction(value) || isHostObject(value)) ? reIsNative : reIsHostCtor;
-  return pattern.test(toSource(value));
-}
-
-/**
- * The base implementation of `_.keys` which doesn't treat sparse arrays as dense.
- *
- * @private
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- */
-function baseKeys(object) {
-  if (!isPrototype(object)) {
-    return nativeKeys(object);
-  }
-  var result = [];
-  for (var key in Object(object)) {
-    if (hasOwnProperty.call(object, key) && key != 'constructor') {
-      result.push(key);
-    }
-  }
-  return result;
-}
-
-/**
- * Copies the values of `source` to `array`.
- *
- * @private
- * @param {Array} source The array to copy values from.
- * @param {Array} [array=[]] The array to copy values to.
- * @returns {Array} Returns `array`.
- */
-function copyArray(source, array) {
-  var index = -1,
-      length = source.length;
-
-  array || (array = Array(length));
-  while (++index < length) {
-    array[index] = source[index];
-  }
-  return array;
-}
-
-/**
- * Gets the native function at `key` of `object`.
- *
- * @private
- * @param {Object} object The object to query.
- * @param {string} key The key of the method to get.
- * @returns {*} Returns the function if it's native, else `undefined`.
- */
-function getNative(object, key) {
-  var value = getValue(object, key);
-  return baseIsNative(value) ? value : undefined;
-}
-
-/**
- * Gets the `toStringTag` of `value`.
- *
- * @private
- * @param {*} value The value to query.
- * @returns {string} Returns the `toStringTag`.
- */
-var getTag = baseGetTag;
-
-// Fallback for data views, maps, sets, and weak maps in IE 11,
-// for data views in Edge < 14, and promises in Node.js.
-if ((DataView && getTag(new DataView(new ArrayBuffer(1))) != dataViewTag) ||
-    (Map && getTag(new Map) != mapTag) ||
-    (Promise && getTag(Promise.resolve()) != promiseTag) ||
-    (Set && getTag(new Set) != setTag) ||
-    (WeakMap && getTag(new WeakMap) != weakMapTag)) {
-  getTag = function(value) {
-    var result = objectToString.call(value),
-        Ctor = result == objectTag ? value.constructor : undefined,
-        ctorString = Ctor ? toSource(Ctor) : undefined;
-
-    if (ctorString) {
-      switch (ctorString) {
-        case dataViewCtorString: return dataViewTag;
-        case mapCtorString: return mapTag;
-        case promiseCtorString: return promiseTag;
-        case setCtorString: return setTag;
-        case weakMapCtorString: return weakMapTag;
-      }
-    }
-    return result;
-  };
-}
-
-/**
- * Checks if `value` is a valid array-like index.
- *
- * @private
- * @param {*} value The value to check.
- * @param {number} [length=MAX_SAFE_INTEGER] The upper bounds of a valid index.
- * @returns {boolean} Returns `true` if `value` is a valid index, else `false`.
- */
-function isIndex(value, length) {
-  length = length == null ? MAX_SAFE_INTEGER : length;
-  return !!length &&
-    (typeof value == 'number' || reIsUint.test(value)) &&
-    (value > -1 && value % 1 == 0 && value < length);
-}
-
-/**
- * Checks if `func` has its source masked.
- *
- * @private
- * @param {Function} func The function to check.
- * @returns {boolean} Returns `true` if `func` is masked, else `false`.
- */
-function isMasked(func) {
-  return !!maskSrcKey && (maskSrcKey in func);
-}
-
-/**
- * Checks if `value` is likely a prototype object.
- *
- * @private
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a prototype, else `false`.
- */
-function isPrototype(value) {
-  var Ctor = value && value.constructor,
-      proto = (typeof Ctor == 'function' && Ctor.prototype) || objectProto;
-
-  return value === proto;
-}
-
-/**
- * Converts `func` to its source code.
- *
- * @private
- * @param {Function} func The function to process.
- * @returns {string} Returns the source code.
- */
-function toSource(func) {
-  if (func != null) {
-    try {
-      return funcToString.call(func);
-    } catch (e) {}
-    try {
-      return (func + '');
-    } catch (e) {}
-  }
-  return '';
-}
-
-/**
- * Checks if `value` is likely an `arguments` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an `arguments` object,
- *  else `false`.
- * @example
- *
- * _.isArguments(function() { return arguments; }());
- * // => true
- *
- * _.isArguments([1, 2, 3]);
- * // => false
- */
-function isArguments(value) {
-  // Safari 8.1 makes `arguments.callee` enumerable in strict mode.
-  return isArrayLikeObject(value) && hasOwnProperty.call(value, 'callee') &&
-    (!propertyIsEnumerable.call(value, 'callee') || objectToString.call(value) == argsTag);
-}
-
-/**
- * Checks if `value` is classified as an `Array` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array, else `false`.
- * @example
- *
- * _.isArray([1, 2, 3]);
- * // => true
- *
- * _.isArray(document.body.children);
- * // => false
- *
- * _.isArray('abc');
- * // => false
- *
- * _.isArray(_.noop);
- * // => false
- */
-var isArray = Array.isArray;
-
-/**
- * Checks if `value` is array-like. A value is considered array-like if it's
- * not a function and has a `value.length` that's an integer greater than or
- * equal to `0` and less than or equal to `Number.MAX_SAFE_INTEGER`.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is array-like, else `false`.
- * @example
- *
- * _.isArrayLike([1, 2, 3]);
- * // => true
- *
- * _.isArrayLike(document.body.children);
- * // => true
- *
- * _.isArrayLike('abc');
- * // => true
- *
- * _.isArrayLike(_.noop);
- * // => false
- */
-function isArrayLike(value) {
-  return value != null && isLength(value.length) && !isFunction(value);
-}
-
-/**
- * This method is like `_.isArrayLike` except that it also checks if `value`
- * is an object.
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an array-like object,
- *  else `false`.
- * @example
- *
- * _.isArrayLikeObject([1, 2, 3]);
- * // => true
- *
- * _.isArrayLikeObject(document.body.children);
- * // => true
- *
- * _.isArrayLikeObject('abc');
- * // => false
- *
- * _.isArrayLikeObject(_.noop);
- * // => false
- */
-function isArrayLikeObject(value) {
-  return isObjectLike(value) && isArrayLike(value);
-}
-
-/**
- * Checks if `value` is classified as a `Function` object.
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a function, else `false`.
- * @example
- *
- * _.isFunction(_);
- * // => true
- *
- * _.isFunction(/abc/);
- * // => false
- */
-function isFunction(value) {
-  // The use of `Object#toString` avoids issues with the `typeof` operator
-  // in Safari 8-9 which returns 'object' for typed array and other constructors.
-  var tag = isObject(value) ? objectToString.call(value) : '';
-  return tag == funcTag || tag == genTag;
-}
-
-/**
- * Checks if `value` is a valid array-like length.
- *
- * **Note:** This method is loosely based on
- * [`ToLength`](http://ecma-international.org/ecma-262/7.0/#sec-tolength).
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a valid length, else `false`.
- * @example
- *
- * _.isLength(3);
- * // => true
- *
- * _.isLength(Number.MIN_VALUE);
- * // => false
- *
- * _.isLength(Infinity);
- * // => false
- *
- * _.isLength('3');
- * // => false
- */
-function isLength(value) {
-  return typeof value == 'number' &&
-    value > -1 && value % 1 == 0 && value <= MAX_SAFE_INTEGER;
-}
-
-/**
- * Checks if `value` is the
- * [language type](http://www.ecma-international.org/ecma-262/7.0/#sec-ecmascript-language-types)
- * of `Object`. (e.g. arrays, functions, objects, regexes, `new Number(0)`, and `new String('')`)
- *
- * @static
- * @memberOf _
- * @since 0.1.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is an object, else `false`.
- * @example
- *
- * _.isObject({});
- * // => true
- *
- * _.isObject([1, 2, 3]);
- * // => true
- *
- * _.isObject(_.noop);
- * // => true
- *
- * _.isObject(null);
- * // => false
- */
-function isObject(value) {
-  var type = typeof value;
-  return !!value && (type == 'object' || type == 'function');
-}
-
-/**
- * Checks if `value` is object-like. A value is object-like if it's not `null`
- * and has a `typeof` result of "object".
- *
- * @static
- * @memberOf _
- * @since 4.0.0
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is object-like, else `false`.
- * @example
- *
- * _.isObjectLike({});
- * // => true
- *
- * _.isObjectLike([1, 2, 3]);
- * // => true
- *
- * _.isObjectLike(_.noop);
- * // => false
- *
- * _.isObjectLike(null);
- * // => false
- */
-function isObjectLike(value) {
-  return !!value && typeof value == 'object';
-}
-
-/**
- * Checks if `value` is classified as a `String` primitive or object.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Lang
- * @param {*} value The value to check.
- * @returns {boolean} Returns `true` if `value` is a string, else `false`.
- * @example
- *
- * _.isString('abc');
- * // => true
- *
- * _.isString(1);
- * // => false
- */
-function isString(value) {
-  return typeof value == 'string' ||
-    (!isArray(value) && isObjectLike(value) && objectToString.call(value) == stringTag);
-}
-
-/**
- * Converts `value` to an array.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Lang
- * @param {*} value The value to convert.
- * @returns {Array} Returns the converted array.
- * @example
- *
- * _.toArray({ 'a': 1, 'b': 2 });
- * // => [1, 2]
- *
- * _.toArray('abc');
- * // => ['a', 'b', 'c']
- *
- * _.toArray(1);
- * // => []
- *
- * _.toArray(null);
- * // => []
- */
-function toArray(value) {
-  if (!value) {
-    return [];
-  }
-  if (isArrayLike(value)) {
-    return isString(value) ? stringToArray(value) : copyArray(value);
-  }
-  if (iteratorSymbol && value[iteratorSymbol]) {
-    return iteratorToArray(value[iteratorSymbol]());
-  }
-  var tag = getTag(value),
-      func = tag == mapTag ? mapToArray : (tag == setTag ? setToArray : values);
-
-  return func(value);
-}
-
-/**
- * Creates an array of the own enumerable property names of `object`.
- *
- * **Note:** Non-object values are coerced to objects. See the
- * [ES spec](http://ecma-international.org/ecma-262/7.0/#sec-object.keys)
- * for more details.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property names.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.keys(new Foo);
- * // => ['a', 'b'] (iteration order is not guaranteed)
- *
- * _.keys('hi');
- * // => ['0', '1']
- */
-function keys(object) {
-  return isArrayLike(object) ? arrayLikeKeys(object) : baseKeys(object);
-}
-
-/**
- * Creates an array of the own enumerable string keyed property values of `object`.
- *
- * **Note:** Non-object values are coerced to objects.
- *
- * @static
- * @since 0.1.0
- * @memberOf _
- * @category Object
- * @param {Object} object The object to query.
- * @returns {Array} Returns the array of property values.
- * @example
- *
- * function Foo() {
- *   this.a = 1;
- *   this.b = 2;
- * }
- *
- * Foo.prototype.c = 3;
- *
- * _.values(new Foo);
- * // => [1, 2] (iteration order is not guaranteed)
- *
- * _.values('hi');
- * // => ['h', 'i']
- */
-function values(object) {
-  return object ? baseValues(object, keys(object)) : [];
-}
-
-module.exports = toArray;
-
-
-/***/ }),
-/* 751 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var crypto = __webpack_require__(11)
-var max = Math.pow(2, 32)
-
-module.exports = random
-module.exports.cryptographic = true
-
-function random () {
-  var buf = crypto
-    .randomBytes(4)
-    .toString('hex')
-
-  return parseInt(buf, 16) / max
-}
-
-
-/***/ }),
-/* 752 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var chars = {}, unesc, temp;
-
-function reverse(object, prepender) {
-  return Object.keys(object).reduce(function(reversed, key) {
-    var newKey = prepender ? prepender + key : key; // Optionally prepend a string to key.
-    reversed[object[key]] = newKey; // Swap key and value.
-    return reversed; // Return the result.
-  }, {});
-}
-
-/**
- * Regex for common characters
- */
-
-chars.escapeRegex = {
-  '?': /\?/g,
-  '@': /\@/g,
-  '!': /\!/g,
-  '+': /\+/g,
-  '*': /\*/g,
-  '(': /\(/g,
-  ')': /\)/g,
-  '[': /\[/g,
-  ']': /\]/g
-};
-
-/**
- * Escape characters
- */
-
-chars.ESC = {
-  '?': '__UNESC_QMRK__',
-  '@': '__UNESC_AMPE__',
-  '!': '__UNESC_EXCL__',
-  '+': '__UNESC_PLUS__',
-  '*': '__UNESC_STAR__',
-  ',': '__UNESC_COMMA__',
-  '(': '__UNESC_LTPAREN__',
-  ')': '__UNESC_RTPAREN__',
-  '[': '__UNESC_LTBRACK__',
-  ']': '__UNESC_RTBRACK__'
-};
-
-/**
- * Unescape characters
- */
-
-chars.UNESC = unesc || (unesc = reverse(chars.ESC, '\\'));
-
-chars.ESC_TEMP = {
-  '?': '__TEMP_QMRK__',
-  '@': '__TEMP_AMPE__',
-  '!': '__TEMP_EXCL__',
-  '*': '__TEMP_STAR__',
-  '+': '__TEMP_PLUS__',
-  ',': '__TEMP_COMMA__',
-  '(': '__TEMP_LTPAREN__',
-  ')': '__TEMP_RTPAREN__',
-  '[': '__TEMP_LTBRACK__',
-  ']': '__TEMP_RTBRACK__'
-};
-
-chars.TEMP = temp || (temp = reverse(chars.ESC_TEMP));
-
-module.exports = chars;
-
-
-/***/ }),
-/* 753 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * micromatch <https://github.com/jonschlinkert/micromatch>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var utils = __webpack_require__(300);
-var Glob = __webpack_require__(754);
-
-/**
- * Expose `expand`
- */
-
-module.exports = expand;
-
-/**
- * Expand a glob pattern to resolve braces and
- * similar patterns before converting to regex.
- *
- * @param  {String|Array} `pattern`
- * @param  {Array} `files`
- * @param  {Options} `opts`
- * @return {Array}
- */
-
-function expand(pattern, options) {
-  if (typeof pattern !== 'string') {
-    throw new TypeError('micromatch.expand(): argument should be a string.');
-  }
-
-  var glob = new Glob(pattern, options || {});
-  var opts = glob.options;
-
-  if (!utils.isGlob(pattern)) {
-    glob.pattern = glob.pattern.replace(/([\/.])/g, '\\$1');
-    return glob;
-  }
-
-  glob.pattern = glob.pattern.replace(/(\+)(?!\()/g, '\\$1');
-  glob.pattern = glob.pattern.split('$').join('\\$');
-
-  if (typeof opts.braces !== 'boolean' && typeof opts.nobraces !== 'boolean') {
-    opts.braces = true;
-  }
-
-  if (glob.pattern === '.*') {
-    return {
-      pattern: '\\.' + star,
-      tokens: tok,
-      options: opts
-    };
-  }
-
-  if (glob.pattern === '*') {
-    return {
-      pattern: oneStar(opts.dot),
-      tokens: tok,
-      options: opts
-    };
-  }
-
-  // parse the glob pattern into tokens
-  glob.parse();
-  var tok = glob.tokens;
-  tok.is.negated = opts.negated;
-
-  // dotfile handling
-  if ((opts.dotfiles === true || tok.is.dotfile) && opts.dot !== false) {
-    opts.dotfiles = true;
-    opts.dot = true;
-  }
-
-  if ((opts.dotdirs === true || tok.is.dotdir) && opts.dot !== false) {
-    opts.dotdirs = true;
-    opts.dot = true;
-  }
-
-  // check for braces with a dotfile pattern
-  if (/[{,]\./.test(glob.pattern)) {
-    opts.makeRe = false;
-    opts.dot = true;
-  }
-
-  if (opts.nonegate !== true) {
-    opts.negated = glob.negated;
-  }
-
-  // if the leading character is a dot or a slash, escape it
-  if (glob.pattern.charAt(0) === '.' && glob.pattern.charAt(1) !== '/') {
-    glob.pattern = '\\' + glob.pattern;
-  }
-
-  /**
-   * Extended globs
-   */
-
-  // expand braces, e.g `{1..5}`
-  glob.track('before braces');
-  if (tok.is.braces) {
-    glob.braces();
-  }
-  glob.track('after braces');
-
-  // expand extglobs, e.g `foo/!(a|b)`
-  glob.track('before extglob');
-  if (tok.is.extglob) {
-    glob.extglob();
-  }
-  glob.track('after extglob');
-
-  // expand brackets, e.g `[[:alpha:]]`
-  glob.track('before brackets');
-  if (tok.is.brackets) {
-    glob.brackets();
-  }
-  glob.track('after brackets');
-
-  // special patterns
-  glob._replace('[!', '[^');
-  glob._replace('(?', '(%~');
-  glob._replace(/\[\]/, '\\[\\]');
-  glob._replace('/[', '/' + (opts.dot ? dotfiles : nodot) + '[', true);
-  glob._replace('/?', '/' + (opts.dot ? dotfiles : nodot) + '[^/]', true);
-  glob._replace('/.', '/(?=.)\\.', true);
-
-  // windows drives
-  glob._replace(/^(\w):([\\\/]+?)/gi, '(?=.)$1:$2', true);
-
-  // negate slashes in exclusion ranges
-  if (glob.pattern.indexOf('[^') !== -1) {
-    glob.pattern = negateSlash(glob.pattern);
-  }
-
-  if (opts.globstar !== false && glob.pattern === '**') {
-    glob.pattern = globstar(opts.dot);
-
-  } else {
-    glob.pattern = balance(glob.pattern, '[', ']');
-    glob.escape(glob.pattern);
-
-    // if the pattern has `**`
-    if (tok.is.globstar) {
-      glob.pattern = collapse(glob.pattern, '/**');
-      glob.pattern = collapse(glob.pattern, '**/');
-      glob._replace('/**/', '(?:/' + globstar(opts.dot) + '/|/)', true);
-      glob._replace(/\*{2,}/g, '**');
-
-      // 'foo/*'
-      glob._replace(/(\w+)\*(?!\/)/g, '$1[^/]*?', true);
-      glob._replace(/\*\*\/\*(\w)/g, globstar(opts.dot) + '\\/' + (opts.dot ? dotfiles : nodot) + '[^/]*?$1', true);
-
-      if (opts.dot !== true) {
-        glob._replace(/\*\*\/(.)/g, '(?:**\\/|)$1');
-      }
-
-      // 'foo/**' or '{**,*}', but not 'foo**'
-      if (tok.path.dirname !== '' || /,\*\*|\*\*,/.test(glob.orig)) {
-        glob._replace('**', globstar(opts.dot), true);
-      }
-    }
-
-    // ends with /*
-    glob._replace(/\/\*$/, '\\/' + oneStar(opts.dot), true);
-    // ends with *, no slashes
-    glob._replace(/(?!\/)\*$/, star, true);
-    // has 'n*.' (partial wildcard w/ file extension)
-    glob._replace(/([^\/]+)\*/, '$1' + oneStar(true), true);
-    // has '*'
-    glob._replace('*', oneStar(opts.dot), true);
-    glob._replace('?.', '?\\.', true);
-    glob._replace('?:', '?:', true);
-
-    glob._replace(/\?+/g, function(match) {
-      var len = match.length;
-      if (len === 1) {
-        return qmark;
-      }
-      return qmark + '{' + len + '}';
-    });
-
-    // escape '.abc' => '\\.abc'
-    glob._replace(/\.([*\w]+)/g, '\\.$1');
-    // fix '[^\\\\/]'
-    glob._replace(/\[\^[\\\/]+\]/g, qmark);
-    // '///' => '\/'
-    glob._replace(/\/+/g, '\\/');
-    // '\\\\\\' => '\\'
-    glob._replace(/\\{2,}/g, '\\');
-  }
-
-  // unescape previously escaped patterns
-  glob.unescape(glob.pattern);
-  glob._replace('__UNESC_STAR__', '*');
-
-  // escape dots that follow qmarks
-  glob._replace('?.', '?\\.');
-
-  // remove unnecessary slashes in character classes
-  glob._replace('[^\\/]', qmark);
-
-  if (glob.pattern.length > 1) {
-    if (/^[\[?*]/.test(glob.pattern)) {
-      // only prepend the string if we don't want to match dotfiles
-      glob.pattern = (opts.dot ? dotfiles : nodot) + glob.pattern;
-    }
-  }
-
-  return glob;
-}
-
-/**
- * Collapse repeated character sequences.
- *
- * ```js
- * collapse('a/../../../b', '../');
- * //=> 'a/../b'
- * ```
- *
- * @param  {String} `str`
- * @param  {String} `ch` Character sequence to collapse
- * @return {String}
- */
-
-function collapse(str, ch) {
-  var res = str.split(ch);
-  var isFirst = res[0] === '';
-  var isLast = res[res.length - 1] === '';
-  res = res.filter(Boolean);
-  if (isFirst) res.unshift('');
-  if (isLast) res.push('');
-  return res.join(ch);
-}
-
-/**
- * Negate slashes in exclusion ranges, per glob spec:
- *
- * ```js
- * negateSlash('[^foo]');
- * //=> '[^\\/foo]'
- * ```
- *
- * @param  {String} `str` glob pattern
- * @return {String}
- */
-
-function negateSlash(str) {
-  return str.replace(/\[\^([^\]]*?)\]/g, function(match, inner) {
-    if (inner.indexOf('/') === -1) {
-      inner = '\\/' + inner;
-    }
-    return '[^' + inner + ']';
-  });
-}
-
-/**
- * Escape imbalanced braces/bracket. This is a very
- * basic, naive implementation that only does enough
- * to serve the purpose.
- */
-
-function balance(str, a, b) {
-  var aarr = str.split(a);
-  var alen = aarr.join('').length;
-  var blen = str.split(b).join('').length;
-
-  if (alen !== blen) {
-    str = aarr.join('\\' + a);
-    return str.split(b).join('\\' + b);
-  }
-  return str;
-}
-
-/**
- * Special patterns to be converted to regex.
- * Heuristics are used to simplify patterns
- * and speed up processing.
- */
-
-/* eslint no-multi-spaces: 0 */
-var qmark       = '[^/]';
-var star        = qmark + '*?';
-var nodot       = '(?!\\.)(?=.)';
-var dotfileGlob = '(?:\\/|^)\\.{1,2}($|\\/)';
-var dotfiles    = '(?!' + dotfileGlob + ')(?=.)';
-var twoStarDot  = '(?:(?!' + dotfileGlob + ').)*?';
-
-/**
- * Create a regex for `*`.
- *
- * If `dot` is true, or the pattern does not begin with
- * a leading star, then return the simpler regex.
- */
-
-function oneStar(dotfile) {
-  return dotfile ? '(?!' + dotfileGlob + ')(?=.)' + star : (nodot + star);
-}
-
-function globstar(dotfile) {
-  if (dotfile) { return twoStarDot; }
-  return '(?:(?!(?:\\/|^)\\.).)*?';
-}
-
-
-/***/ }),
-/* 754 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var chars = __webpack_require__(752);
-var utils = __webpack_require__(300);
-
-/**
- * Expose `Glob`
- */
-
-var Glob = module.exports = function Glob(pattern, options) {
-  if (!(this instanceof Glob)) {
-    return new Glob(pattern, options);
-  }
-  this.options = options || {};
-  this.pattern = pattern;
-  this.history = [];
-  this.tokens = {};
-  this.init(pattern);
-};
-
-/**
- * Initialize defaults
- */
-
-Glob.prototype.init = function(pattern) {
-  this.orig = pattern;
-  this.negated = this.isNegated();
-  this.options.track = this.options.track || false;
-  this.options.makeRe = true;
-};
-
-/**
- * Push a change into `glob.history`. Useful
- * for debugging.
- */
-
-Glob.prototype.track = function(msg) {
-  if (this.options.track) {
-    this.history.push({msg: msg, pattern: this.pattern});
-  }
-};
-
-/**
- * Return true if `glob.pattern` was negated
- * with `!`, also remove the `!` from the pattern.
- *
- * @return {Boolean}
- */
-
-Glob.prototype.isNegated = function() {
-  if (this.pattern.charCodeAt(0) === 33 /* '!' */) {
-    this.pattern = this.pattern.slice(1);
-    return true;
-  }
-  return false;
-};
-
-/**
- * Expand braces in the given glob pattern.
- *
- * We only need to use the [braces] lib when
- * patterns are nested.
- */
-
-Glob.prototype.braces = function() {
-  if (this.options.nobraces !== true && this.options.nobrace !== true) {
-    // naive/fast check for imbalanced characters
-    var a = this.pattern.match(/[\{\(\[]/g);
-    var b = this.pattern.match(/[\}\)\]]/g);
-
-    // if imbalanced, don't optimize the pattern
-    if (a && b && (a.length !== b.length)) {
-      this.options.makeRe = false;
-    }
-
-    // expand brace patterns and join the resulting array
-    var expanded = utils.braces(this.pattern, this.options);
-    this.pattern = expanded.join('|');
-  }
-};
-
-/**
- * Expand bracket expressions in `glob.pattern`
- */
-
-Glob.prototype.brackets = function() {
-  if (this.options.nobrackets !== true) {
-    this.pattern = utils.brackets(this.pattern);
-  }
-};
-
-/**
- * Expand bracket expressions in `glob.pattern`
- */
-
-Glob.prototype.extglob = function() {
-  if (this.options.noextglob === true) return;
-
-  if (utils.isExtglob(this.pattern)) {
-    this.pattern = utils.extglob(this.pattern, {escape: true});
-  }
-};
-
-/**
- * Parse the given pattern
- */
-
-Glob.prototype.parse = function(pattern) {
-  this.tokens = utils.parseGlob(pattern || this.pattern, true);
-  return this.tokens;
-};
-
-/**
- * Replace `a` with `b`. Also tracks the change before and
- * after each replacement. This is disabled by default, but
- * can be enabled by setting `options.track` to true.
- *
- * Also, when the pattern is a string, `.split()` is used,
- * because it's much faster than replace.
- *
- * @param  {RegExp|String} `a`
- * @param  {String} `b`
- * @param  {Boolean} `escape` When `true`, escapes `*` and `?` in the replacement.
- * @return {String}
- */
-
-Glob.prototype._replace = function(a, b, escape) {
-  this.track('before (find): "' + a + '" (replace with): "' + b + '"');
-  if (escape) b = esc(b);
-  if (a && b && typeof a === 'string') {
-    this.pattern = this.pattern.split(a).join(b);
-  } else {
-    this.pattern = this.pattern.replace(a, b);
-  }
-  this.track('after');
-};
-
-/**
- * Escape special characters in the given string.
- *
- * @param  {String} `str` Glob pattern
- * @return {String}
- */
-
-Glob.prototype.escape = function(str) {
-  this.track('before escape: ');
-  var re = /["\\](['"]?[^"'\\]['"]?)/g;
-
-  this.pattern = str.replace(re, function($0, $1) {
-    var o = chars.ESC;
-    var ch = o && o[$1];
-    if (ch) {
-      return ch;
-    }
-    if (/[a-z]/i.test($0)) {
-      return $0.split('\\').join('');
-    }
-    return $0;
-  });
-
-  this.track('after escape: ');
-};
-
-/**
- * Unescape special characters in the given string.
- *
- * @param  {String} `str`
- * @return {String}
- */
-
-Glob.prototype.unescape = function(str) {
-  var re = /__([A-Z]+)_([A-Z]+)__/g;
-  this.pattern = str.replace(re, function($0, $1) {
-    return chars[$1][$0];
-  });
-  this.pattern = unesc(this.pattern);
-};
-
-/**
- * Escape/unescape utils
- */
-
-function esc(str) {
-  str = str.split('?').join('%~');
-  str = str.split('*').join('%%');
-  return str;
-}
-
-function unesc(str) {
-  str = str.split('%~').join('?');
-  str = str.split('%%').join('*');
-  return str;
-}
-
-
-/***/ }),
-/* 755 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * arr-diff <https://github.com/jonschlinkert/arr-diff>
- *
- * Copyright (c) 2014 Jon Schlinkert, contributors.
- * Licensed under the MIT License
- */
-
-
-
-var flatten = __webpack_require__(510);
-var slice = [].slice;
-
-/**
- * Return the difference between the first array and
- * additional arrays.
- *
- * ```js
- * var diff = require('{%= name %}');
- *
- * var a = ['a', 'b', 'c', 'd'];
- * var b = ['b', 'c'];
- *
- * console.log(diff(a, b))
- * //=> ['a', 'd']
- * ```
- *
- * @param  {Array} `a`
- * @param  {Array} `b`
- * @return {Array}
- * @api public
- */
-
-function diff(arr, arrays) {
-  var argsLen = arguments.length;
-  var len = arr.length, i = -1;
-  var res = [], arrays;
-
-  if (argsLen === 1) {
-    return arr;
-  }
-
-  if (argsLen > 2) {
-    arrays = flatten(slice.call(arguments, 1));
-  }
-
-  while (++i < len) {
-    if (!~arrays.indexOf(arr[i])) {
-      res.push(arr[i]);
-    }
-  }
-  return res;
-}
-
-/**
- * Expose `diff`
- */
-
-module.exports = diff;
-
-
-/***/ }),
-/* 756 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * array-unique <https://github.com/jonschlinkert/array-unique>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-module.exports = function unique(arr) {
-  if (!Array.isArray(arr)) {
-    throw new TypeError('array-unique expects an array.');
-  }
-
-  var len = arr.length;
-  var i = -1;
-
-  while (i++ < len) {
-    var j = i + 1;
-
-    for (; j < arr.length; ++j) {
-      if (arr[i] === arr[j]) {
-        arr.splice(j--, 1);
-      }
-    }
-  }
-  return arr;
-};
-
-
-/***/ }),
-/* 757 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * braces <https://github.com/jonschlinkert/braces>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT license.
- */
-
-
-
-/**
- * Module dependencies
- */
-
-var expand = __webpack_require__(640);
-var repeat = __webpack_require__(411);
-var tokens = __webpack_require__(778);
-
-/**
- * Expose `braces`
- */
-
-module.exports = function(str, options) {
-  if (typeof str !== 'string') {
-    throw new Error('braces expects a string');
-  }
-  return braces(str, options);
-};
-
-/**
- * Expand `{foo,bar}` or `{1..5}` braces in the
- * given `string`.
- *
- * @param  {String} `str`
- * @param  {Array} `arr`
- * @param  {Object} `options`
- * @return {Array}
- */
-
-function braces(str, arr, options) {
-  if (str === '') {
-    return [];
-  }
-
-  if (!Array.isArray(arr)) {
-    options = arr;
-    arr = [];
-  }
-
-  var opts = options || {};
-  arr = arr || [];
-
-  if (typeof opts.nodupes === 'undefined') {
-    opts.nodupes = true;
-  }
-
-  var fn = opts.fn;
-  var es6;
-
-  if (typeof opts === 'function') {
-    fn = opts;
-    opts = {};
-  }
-
-  if (!(patternRe instanceof RegExp)) {
-    patternRe = patternRegex();
-  }
-
-  var matches = str.match(patternRe) || [];
-  var m = matches[0];
-
-  switch(m) {
-    case '\\,':
-      return escapeCommas(str, arr, opts);
-    case '\\.':
-      return escapeDots(str, arr, opts);
-    case '\/.':
-      return escapePaths(str, arr, opts);
-    case ' ':
-      return splitWhitespace(str);
-    case '{,}':
-      return exponential(str, opts, braces);
-    case '{}':
-      return emptyBraces(str, arr, opts);
-    case '\\{':
-    case '\\}':
-      return escapeBraces(str, arr, opts);
-    case '${':
-      if (!/\{[^{]+\{/.test(str)) {
-        return arr.concat(str);
-      } else {
-        es6 = true;
-        str = tokens.before(str, es6Regex());
-      }
-  }
-
-  if (!(braceRe instanceof RegExp)) {
-    braceRe = braceRegex();
-  }
-
-  var match = braceRe.exec(str);
-  if (match == null) {
-    return [str];
-  }
-
-  var outter = match[1];
-  var inner = match[2];
-  if (inner === '') { return [str]; }
-
-  var segs, segsLength;
-
-  if (inner.indexOf('..') !== -1) {
-    segs = expand(inner, opts, fn) || inner.split(',');
-    segsLength = segs.length;
-
-  } else if (inner[0] === '"' || inner[0] === '\'') {
-    return arr.concat(str.split(/['"]/).join(''));
-
-  } else {
-    segs = inner.split(',');
-    if (opts.makeRe) {
-      return braces(str.replace(outter, wrap(segs, '|')), opts);
-    }
-
-    segsLength = segs.length;
-    if (segsLength === 1 && opts.bash) {
-      segs[0] = wrap(segs[0], '\\');
-    }
-  }
-
-  var len = segs.length;
-  var i = 0, val;
-
-  while (len--) {
-    var path = segs[i++];
-
-    if (/(\.[^.\/])/.test(path)) {
-      if (segsLength > 1) {
-        return segs;
-      } else {
-        return [str];
-      }
-    }
-
-    val = splice(str, outter, path);
-
-    if (/\{[^{}]+?\}/.test(val)) {
-      arr = braces(val, arr, opts);
-    } else if (val !== '') {
-      if (opts.nodupes && arr.indexOf(val) !== -1) { continue; }
-      arr.push(es6 ? tokens.after(val) : val);
-    }
-  }
-
-  if (opts.strict) { return filter(arr, filterEmpty); }
-  return arr;
-}
-
-/**
- * Expand exponential ranges
- *
- *   `a{,}{,}` => ['a', 'a', 'a', 'a']
- */
-
-function exponential(str, options, fn) {
-  if (typeof options === 'function') {
-    fn = options;
-    options = null;
-  }
-
-  var opts = options || {};
-  var esc = '__ESC_EXP__';
-  var exp = 0;
-  var res;
-
-  var parts = str.split('{,}');
-  if (opts.nodupes) {
-    return fn(parts.join(''), opts);
-  }
-
-  exp = parts.length - 1;
-  res = fn(parts.join(esc), opts);
-  var len = res.length;
-  var arr = [];
-  var i = 0;
-
-  while (len--) {
-    var ele = res[i++];
-    var idx = ele.indexOf(esc);
-
-    if (idx === -1) {
-      arr.push(ele);
-
-    } else {
-      ele = ele.split('__ESC_EXP__').join('');
-      if (!!ele && opts.nodupes !== false) {
-        arr.push(ele);
-
-      } else {
-        var num = Math.pow(2, exp);
-        arr.push.apply(arr, repeat(ele, num));
-      }
-    }
-  }
-  return arr;
-}
-
-/**
- * Wrap a value with parens, brackets or braces,
- * based on the given character/separator.
- *
- * @param  {String|Array} `val`
- * @param  {String} `ch`
- * @return {String}
- */
-
-function wrap(val, ch) {
-  if (ch === '|') {
-    return '(' + val.join(ch) + ')';
-  }
-  if (ch === ',') {
-    return '{' + val.join(ch) + '}';
-  }
-  if (ch === '-') {
-    return '[' + val.join(ch) + ']';
-  }
-  if (ch === '\\') {
-    return '\\{' + val + '\\}';
-  }
-}
-
-/**
- * Handle empty braces: `{}`
- */
-
-function emptyBraces(str, arr, opts) {
-  return braces(str.split('{}').join('\\{\\}'), arr, opts);
-}
-
-/**
- * Filter out empty-ish values
- */
-
-function filterEmpty(ele) {
-  return !!ele && ele !== '\\';
-}
-
-/**
- * Handle patterns with whitespace
- */
-
-function splitWhitespace(str) {
-  var segs = str.split(' ');
-  var len = segs.length;
-  var res = [];
-  var i = 0;
-
-  while (len--) {
-    res.push.apply(res, braces(segs[i++]));
-  }
-  return res;
-}
-
-/**
- * Handle escaped braces: `\\{foo,bar}`
- */
-
-function escapeBraces(str, arr, opts) {
-  if (!/\{[^{]+\{/.test(str)) {
-    return arr.concat(str.split('\\').join(''));
-  } else {
-    str = str.split('\\{').join('__LT_BRACE__');
-    str = str.split('\\}').join('__RT_BRACE__');
-    return map(braces(str, arr, opts), function(ele) {
-      ele = ele.split('__LT_BRACE__').join('{');
-      return ele.split('__RT_BRACE__').join('}');
-    });
-  }
-}
-
-/**
- * Handle escaped dots: `{1\\.2}`
- */
-
-function escapeDots(str, arr, opts) {
-  if (!/[^\\]\..+\\\./.test(str)) {
-    return arr.concat(str.split('\\').join(''));
-  } else {
-    str = str.split('\\.').join('__ESC_DOT__');
-    return map(braces(str, arr, opts), function(ele) {
-      return ele.split('__ESC_DOT__').join('.');
-    });
-  }
-}
-
-/**
- * Handle escaped dots: `{1\\.2}`
- */
-
-function escapePaths(str, arr, opts) {
-  str = str.split('\/.').join('__ESC_PATH__');
-  return map(braces(str, arr, opts), function(ele) {
-    return ele.split('__ESC_PATH__').join('\/.');
-  });
-}
-
-/**
- * Handle escaped commas: `{a\\,b}`
- */
-
-function escapeCommas(str, arr, opts) {
-  if (!/\w,/.test(str)) {
-    return arr.concat(str.split('\\').join(''));
-  } else {
-    str = str.split('\\,').join('__ESC_COMMA__');
-    return map(braces(str, arr, opts), function(ele) {
-      return ele.split('__ESC_COMMA__').join(',');
-    });
-  }
-}
-
-/**
- * Regex for common patterns
- */
-
-function patternRegex() {
-  return /\${|( (?=[{,}])|(?=[{,}]) )|{}|{,}|\\,(?=.*[{}])|\/\.(?=.*[{}])|\\\.(?={)|\\{|\\}/;
-}
-
-/**
- * Braces regex.
- */
-
-function braceRegex() {
-  return /.*(\\?\{([^}]+)\})/;
-}
-
-/**
- * es6 delimiter regex.
- */
-
-function es6Regex() {
-  return /\$\{([^}]+)\}/;
-}
-
-var braceRe;
-var patternRe;
-
-/**
- * Faster alternative to `String.replace()` when the
- * index of the token to be replaces can't be supplied
- */
-
-function splice(str, token, replacement) {
-  var i = str.indexOf(token);
-  return str.substr(0, i) + replacement
-    + str.substr(i + token.length);
-}
-
-/**
- * Fast array map
- */
-
-function map(arr, fn) {
-  if (arr == null) {
-    return [];
-  }
-
-  var len = arr.length;
-  var res = new Array(len);
-  var i = -1;
-
-  while (++i < len) {
-    res[i] = fn(arr[i], i, arr);
-  }
-
-  return res;
-}
-
-/**
- * Fast array filter
- */
-
-function filter(arr, cb) {
-  if (arr == null) return [];
-  if (typeof cb !== 'function') {
-    throw new TypeError('braces: filter expects a callback function.');
-  }
-
-  var len = arr.length;
-  var res = arr.slice();
-  var i = 0;
-
-  while (len--) {
-    if (!cb(arr[len], i++)) {
-      res.splice(len, 1);
-    }
-  }
-  return res;
-}
-
-
-/***/ }),
-/* 758 */
-/***/ (function(module, exports) {
-
-module.exports = {"application/1d-interleaved-parityfec":{"source":"iana"},"application/3gpdash-qoe-report+xml":{"source":"iana","compressible":true},"application/3gpp-ims+xml":{"source":"iana","compressible":true},"application/a2l":{"source":"iana"},"application/activemessage":{"source":"iana"},"application/activity+json":{"source":"iana","compressible":true},"application/alto-costmap+json":{"source":"iana","compressible":true},"application/alto-costmapfilter+json":{"source":"iana","compressible":true},"application/alto-directory+json":{"source":"iana","compressible":true},"application/alto-endpointcost+json":{"source":"iana","compressible":true},"application/alto-endpointcostparams+json":{"source":"iana","compressible":true},"application/alto-endpointprop+json":{"source":"iana","compressible":true},"application/alto-endpointpropparams+json":{"source":"iana","compressible":true},"application/alto-error+json":{"source":"iana","compressible":true},"application/alto-networkmap+json":{"source":"iana","compressible":true},"application/alto-networkmapfilter+json":{"source":"iana","compressible":true},"application/aml":{"source":"iana"},"application/andrew-inset":{"source":"iana","extensions":["ez"]},"application/applefile":{"source":"iana"},"application/applixware":{"source":"apache","extensions":["aw"]},"application/atf":{"source":"iana"},"application/atfx":{"source":"iana"},"application/atom+xml":{"source":"iana","compressible":true,"extensions":["atom"]},"application/atomcat+xml":{"source":"iana","compressible":true,"extensions":["atomcat"]},"application/atomdeleted+xml":{"source":"iana","compressible":true},"application/atomicmail":{"source":"iana"},"application/atomsvc+xml":{"source":"iana","compressible":true,"extensions":["atomsvc"]},"application/atxml":{"source":"iana"},"application/auth-policy+xml":{"source":"iana","compressible":true},"application/bacnet-xdd+zip":{"source":"iana","compressible":false},"application/batch-smtp":{"source":"iana"},"application/bdoc":{"compressible":false,"extensions":["bdoc"]},"application/beep+xml":{"source":"iana","compressible":true},"application/calendar+json":{"source":"iana","compressible":true},"application/calendar+xml":{"source":"iana","compressible":true},"application/call-completion":{"source":"iana"},"application/cals-1840":{"source":"iana"},"application/cbor":{"source":"iana"},"application/cccex":{"source":"iana"},"application/ccmp+xml":{"source":"iana","compressible":true},"application/ccxml+xml":{"source":"iana","compressible":true,"extensions":["ccxml"]},"application/cdfx+xml":{"source":"iana","compressible":true},"application/cdmi-capability":{"source":"iana","extensions":["cdmia"]},"application/cdmi-container":{"source":"iana","extensions":["cdmic"]},"application/cdmi-domain":{"source":"iana","extensions":["cdmid"]},"application/cdmi-object":{"source":"iana","extensions":["cdmio"]},"application/cdmi-queue":{"source":"iana","extensions":["cdmiq"]},"application/cdni":{"source":"iana"},"application/cea":{"source":"iana"},"application/cea-2018+xml":{"source":"iana","compressible":true},"application/cellml+xml":{"source":"iana","compressible":true},"application/cfw":{"source":"iana"},"application/clue_info+xml":{"source":"iana","compressible":true},"application/cms":{"source":"iana"},"application/cnrp+xml":{"source":"iana","compressible":true},"application/coap-group+json":{"source":"iana","compressible":true},"application/coap-payload":{"source":"iana"},"application/commonground":{"source":"iana"},"application/conference-info+xml":{"source":"iana","compressible":true},"application/cose":{"source":"iana"},"application/cose-key":{"source":"iana"},"application/cose-key-set":{"source":"iana"},"application/cpl+xml":{"source":"iana","compressible":true},"application/csrattrs":{"source":"iana"},"application/csta+xml":{"source":"iana","compressible":true},"application/cstadata+xml":{"source":"iana","compressible":true},"application/csvm+json":{"source":"iana","compressible":true},"application/cu-seeme":{"source":"apache","extensions":["cu"]},"application/cwt":{"source":"iana"},"application/cybercash":{"source":"iana"},"application/dart":{"compressible":true},"application/dash+xml":{"source":"iana","compressible":true,"extensions":["mpd"]},"application/dashdelta":{"source":"iana"},"application/davmount+xml":{"source":"iana","compressible":true,"extensions":["davmount"]},"application/dca-rft":{"source":"iana"},"application/dcd":{"source":"iana"},"application/dec-dx":{"source":"iana"},"application/dialog-info+xml":{"source":"iana","compressible":true},"application/dicom":{"source":"iana"},"application/dicom+json":{"source":"iana","compressible":true},"application/dicom+xml":{"source":"iana","compressible":true},"application/dii":{"source":"iana"},"application/dit":{"source":"iana"},"application/dns":{"source":"iana"},"application/dns+json":{"source":"iana","compressible":true},"application/docbook+xml":{"source":"apache","compressible":true,"extensions":["dbk"]},"application/dskpp+xml":{"source":"iana","compressible":true},"application/dssc+der":{"source":"iana","extensions":["dssc"]},"application/dssc+xml":{"source":"iana","compressible":true,"extensions":["xdssc"]},"application/dvcs":{"source":"iana"},"application/ecmascript":{"source":"iana","compressible":true,"extensions":["ecma","es"]},"application/edi-consent":{"source":"iana"},"application/edi-x12":{"source":"iana","compressible":false},"application/edifact":{"source":"iana","compressible":false},"application/efi":{"source":"iana"},"application/emergencycalldata.comment+xml":{"source":"iana","compressible":true},"application/emergencycalldata.control+xml":{"source":"iana","compressible":true},"application/emergencycalldata.deviceinfo+xml":{"source":"iana","compressible":true},"application/emergencycalldata.ecall.msd":{"source":"iana"},"application/emergencycalldata.providerinfo+xml":{"source":"iana","compressible":true},"application/emergencycalldata.serviceinfo+xml":{"source":"iana","compressible":true},"application/emergencycalldata.subscriberinfo+xml":{"source":"iana","compressible":true},"application/emergencycalldata.veds+xml":{"source":"iana","compressible":true},"application/emma+xml":{"source":"iana","compressible":true,"extensions":["emma"]},"application/emotionml+xml":{"source":"iana","compressible":true},"application/encaprtp":{"source":"iana"},"application/epp+xml":{"source":"iana","compressible":true},"application/epub+zip":{"source":"iana","compressible":false,"extensions":["epub"]},"application/eshop":{"source":"iana"},"application/exi":{"source":"iana","extensions":["exi"]},"application/fastinfoset":{"source":"iana"},"application/fastsoap":{"source":"iana"},"application/fdt+xml":{"source":"iana","compressible":true},"application/fhir+json":{"source":"iana","compressible":true},"application/fhir+xml":{"source":"iana","compressible":true},"application/fido.trusted-apps+json":{"compressible":true},"application/fits":{"source":"iana"},"application/font-sfnt":{"source":"iana"},"application/font-tdpfr":{"source":"iana","extensions":["pfr"]},"application/font-woff":{"source":"iana","compressible":false},"application/framework-attributes+xml":{"source":"iana","compressible":true},"application/geo+json":{"source":"iana","compressible":true,"extensions":["geojson"]},"application/geo+json-seq":{"source":"iana"},"application/geoxacml+xml":{"source":"iana","compressible":true},"application/gltf-buffer":{"source":"iana"},"application/gml+xml":{"source":"iana","compressible":true,"extensions":["gml"]},"application/gpx+xml":{"source":"apache","compressible":true,"extensions":["gpx"]},"application/gxf":{"source":"apache","extensions":["gxf"]},"application/gzip":{"source":"iana","compressible":false,"extensions":["gz"]},"application/h224":{"source":"iana"},"application/held+xml":{"source":"iana","compressible":true},"application/hjson":{"extensions":["hjson"]},"application/http":{"source":"iana"},"application/hyperstudio":{"source":"iana","extensions":["stk"]},"application/ibe-key-request+xml":{"source":"iana","compressible":true},"application/ibe-pkg-reply+xml":{"source":"iana","compressible":true},"application/ibe-pp-data":{"source":"iana"},"application/iges":{"source":"iana"},"application/im-iscomposing+xml":{"source":"iana","compressible":true},"application/index":{"source":"iana"},"application/index.cmd":{"source":"iana"},"application/index.obj":{"source":"iana"},"application/index.response":{"source":"iana"},"application/index.vnd":{"source":"iana"},"application/inkml+xml":{"source":"iana","compressible":true,"extensions":["ink","inkml"]},"application/iotp":{"source":"iana"},"application/ipfix":{"source":"iana","extensions":["ipfix"]},"application/ipp":{"source":"iana"},"application/isup":{"source":"iana"},"application/its+xml":{"source":"iana","compressible":true},"application/java-archive":{"source":"apache","compressible":false,"extensions":["jar","war","ear"]},"application/java-serialized-object":{"source":"apache","compressible":false,"extensions":["ser"]},"application/java-vm":{"source":"apache","compressible":false,"extensions":["class"]},"application/javascript":{"source":"iana","charset":"UTF-8","compressible":true,"extensions":["js","mjs"]},"application/jf2feed+json":{"source":"iana","compressible":true},"application/jose":{"source":"iana"},"application/jose+json":{"source":"iana","compressible":true},"application/jrd+json":{"source":"iana","compressible":true},"application/json":{"source":"iana","charset":"UTF-8","compressible":true,"extensions":["json","map"]},"application/json-patch+json":{"source":"iana","compressible":true},"application/json-seq":{"source":"iana"},"application/json5":{"extensions":["json5"]},"application/jsonml+json":{"source":"apache","compressible":true,"extensions":["jsonml"]},"application/jwk+json":{"source":"iana","compressible":true},"application/jwk-set+json":{"source":"iana","compressible":true},"application/jwt":{"source":"iana"},"application/kpml-request+xml":{"source":"iana","compressible":true},"application/kpml-response+xml":{"source":"iana","compressible":true},"application/ld+json":{"source":"iana","compressible":true,"extensions":["jsonld"]},"application/lgr+xml":{"source":"iana","compressible":true},"application/link-format":{"source":"iana"},"application/load-control+xml":{"source":"iana","compressible":true},"application/lost+xml":{"source":"iana","compressible":true,"extensions":["lostxml"]},"application/lostsync+xml":{"source":"iana","compressible":true},"application/lxf":{"source":"iana"},"application/mac-binhex40":{"source":"iana","extensions":["hqx"]},"application/mac-compactpro":{"source":"apache","extensions":["cpt"]},"application/macwriteii":{"source":"iana"},"application/mads+xml":{"source":"iana","compressible":true,"extensions":["mads"]},"application/manifest+json":{"charset":"UTF-8","compressible":true,"extensions":["webmanifest"]},"application/marc":{"source":"iana","extensions":["mrc"]},"application/marcxml+xml":{"source":"iana","compressible":true,"extensions":["mrcx"]},"application/mathematica":{"source":"iana","extensions":["ma","nb","mb"]},"application/mathml+xml":{"source":"iana","compressible":true,"extensions":["mathml"]},"application/mathml-content+xml":{"source":"iana","compressible":true},"application/mathml-presentation+xml":{"source":"iana","compressible":true},"application/mbms-associated-procedure-description+xml":{"source":"iana","compressible":true},"application/mbms-deregister+xml":{"source":"iana","compressible":true},"application/mbms-envelope+xml":{"source":"iana","compressible":true},"application/mbms-msk+xml":{"source":"iana","compressible":true},"application/mbms-msk-response+xml":{"source":"iana","compressible":true},"application/mbms-protection-description+xml":{"source":"iana","compressible":true},"application/mbms-reception-report+xml":{"source":"iana","compressible":true},"application/mbms-register+xml":{"source":"iana","compressible":true},"application/mbms-register-response+xml":{"source":"iana","compressible":true},"application/mbms-schedule+xml":{"source":"iana","compressible":true},"application/mbms-user-service-description+xml":{"source":"iana","compressible":true},"application/mbox":{"source":"iana","extensions":["mbox"]},"application/media-policy-dataset+xml":{"source":"iana","compressible":true},"application/media_control+xml":{"source":"iana","compressible":true},"application/mediaservercontrol+xml":{"source":"iana","compressible":true,"extensions":["mscml"]},"application/merge-patch+json":{"source":"iana","compressible":true},"application/metalink+xml":{"source":"apache","compressible":true,"extensions":["metalink"]},"application/metalink4+xml":{"source":"iana","compressible":true,"extensions":["meta4"]},"application/mets+xml":{"source":"iana","compressible":true,"extensions":["mets"]},"application/mf4":{"source":"iana"},"application/mikey":{"source":"iana"},"application/mmt-usd+xml":{"source":"iana","compressible":true},"application/mods+xml":{"source":"iana","compressible":true,"extensions":["mods"]},"application/moss-keys":{"source":"iana"},"application/moss-signature":{"source":"iana"},"application/mosskey-data":{"source":"iana"},"application/mosskey-request":{"source":"iana"},"application/mp21":{"source":"iana","extensions":["m21","mp21"]},"application/mp4":{"source":"iana","extensions":["mp4s","m4p"]},"application/mpeg4-generic":{"source":"iana"},"application/mpeg4-iod":{"source":"iana"},"application/mpeg4-iod-xmt":{"source":"iana"},"application/mrb-consumer+xml":{"source":"iana","compressible":true},"application/mrb-publish+xml":{"source":"iana","compressible":true},"application/msc-ivr+xml":{"source":"iana","compressible":true},"application/msc-mixer+xml":{"source":"iana","compressible":true},"application/msword":{"source":"iana","compressible":false,"extensions":["doc","dot"]},"application/mud+json":{"source":"iana","compressible":true},"application/mxf":{"source":"iana","extensions":["mxf"]},"application/n-quads":{"source":"iana"},"application/n-triples":{"source":"iana"},"application/nasdata":{"source":"iana"},"application/news-checkgroups":{"source":"iana"},"application/news-groupinfo":{"source":"iana"},"application/news-transmission":{"source":"iana"},"application/nlsml+xml":{"source":"iana","compressible":true},"application/node":{"source":"iana"},"application/nss":{"source":"iana"},"application/ocsp-request":{"source":"iana"},"application/ocsp-response":{"source":"iana"},"application/octet-stream":{"source":"iana","compressible":false,"extensions":["bin","dms","lrf","mar","so","dist","distz","pkg","bpk","dump","elc","deploy","exe","dll","deb","dmg","iso","img","msi","msp","msm","buffer"]},"application/oda":{"source":"iana","extensions":["oda"]},"application/odx":{"source":"iana"},"application/oebps-package+xml":{"source":"iana","compressible":true,"extensions":["opf"]},"application/ogg":{"source":"iana","compressible":false,"extensions":["ogx"]},"application/omdoc+xml":{"source":"apache","compressible":true,"extensions":["omdoc"]},"application/onenote":{"source":"apache","extensions":["onetoc","onetoc2","onetmp","onepkg"]},"application/oxps":{"source":"iana","extensions":["oxps"]},"application/p2p-overlay+xml":{"source":"iana","compressible":true},"application/parityfec":{"source":"iana"},"application/passport":{"source":"iana"},"application/patch-ops-error+xml":{"source":"iana","compressible":true,"extensions":["xer"]},"application/pdf":{"source":"iana","compressible":false,"extensions":["pdf"]},"application/pdx":{"source":"iana"},"application/pgp-encrypted":{"source":"iana","compressible":false,"extensions":["pgp"]},"application/pgp-keys":{"source":"iana"},"application/pgp-signature":{"source":"iana","extensions":["asc","sig"]},"application/pics-rules":{"source":"apache","extensions":["prf"]},"application/pidf+xml":{"source":"iana","compressible":true},"application/pidf-diff+xml":{"source":"iana","compressible":true},"application/pkcs10":{"source":"iana","extensions":["p10"]},"application/pkcs12":{"source":"iana"},"application/pkcs7-mime":{"source":"iana","extensions":["p7m","p7c"]},"application/pkcs7-signature":{"source":"iana","extensions":["p7s"]},"application/pkcs8":{"source":"iana","extensions":["p8"]},"application/pkcs8-encrypted":{"source":"iana"},"application/pkix-attr-cert":{"source":"iana","extensions":["ac"]},"application/pkix-cert":{"source":"iana","extensions":["cer"]},"application/pkix-crl":{"source":"iana","extensions":["crl"]},"application/pkix-pkipath":{"source":"iana","extensions":["pkipath"]},"application/pkixcmp":{"source":"iana","extensions":["pki"]},"application/pls+xml":{"source":"iana","compressible":true,"extensions":["pls"]},"application/poc-settings+xml":{"source":"iana","compressible":true},"application/postscript":{"source":"iana","compressible":true,"extensions":["ai","eps","ps"]},"application/ppsp-tracker+json":{"source":"iana","compressible":true},"application/problem+json":{"source":"iana","compressible":true},"application/problem+xml":{"source":"iana","compressible":true},"application/provenance+xml":{"source":"iana","compressible":true},"application/prs.alvestrand.titrax-sheet":{"source":"iana"},"application/prs.cww":{"source":"iana","extensions":["cww"]},"application/prs.hpub+zip":{"source":"iana","compressible":false},"application/prs.nprend":{"source":"iana"},"application/prs.plucker":{"source":"iana"},"application/prs.rdf-xml-crypt":{"source":"iana"},"application/prs.xsf+xml":{"source":"iana","compressible":true},"application/pskc+xml":{"source":"iana","compressible":true,"extensions":["pskcxml"]},"application/qsig":{"source":"iana"},"application/raml+yaml":{"compressible":true,"extensions":["raml"]},"application/raptorfec":{"source":"iana"},"application/rdap+json":{"source":"iana","compressible":true},"application/rdf+xml":{"source":"iana","compressible":true,"extensions":["rdf","owl"]},"application/reginfo+xml":{"source":"iana","compressible":true,"extensions":["rif"]},"application/relax-ng-compact-syntax":{"source":"iana","extensions":["rnc"]},"application/remote-printing":{"source":"iana"},"application/reputon+json":{"source":"iana","compressible":true},"application/resource-lists+xml":{"source":"iana","compressible":true,"extensions":["rl"]},"application/resource-lists-diff+xml":{"source":"iana","compressible":true,"extensions":["rld"]},"application/rfc+xml":{"source":"iana","compressible":true},"application/riscos":{"source":"iana"},"application/rlmi+xml":{"source":"iana","compressible":true},"application/rls-services+xml":{"source":"iana","compressible":true,"extensions":["rs"]},"application/route-apd+xml":{"source":"iana","compressible":true},"application/route-s-tsid+xml":{"source":"iana","compressible":true},"application/route-usd+xml":{"source":"iana","compressible":true},"application/rpki-ghostbusters":{"source":"iana","extensions":["gbr"]},"application/rpki-manifest":{"source":"iana","extensions":["mft"]},"application/rpki-publication":{"source":"iana"},"application/rpki-roa":{"source":"iana","extensions":["roa"]},"application/rpki-updown":{"source":"iana"},"application/rsd+xml":{"source":"apache","compressible":true,"extensions":["rsd"]},"application/rss+xml":{"source":"apache","compressible":true,"extensions":["rss"]},"application/rtf":{"source":"iana","compressible":true,"extensions":["rtf"]},"application/rtploopback":{"source":"iana"},"application/rtx":{"source":"iana"},"application/samlassertion+xml":{"source":"iana","compressible":true},"application/samlmetadata+xml":{"source":"iana","compressible":true},"application/sbml+xml":{"source":"iana","compressible":true,"extensions":["sbml"]},"application/scaip+xml":{"source":"iana","compressible":true},"application/scim+json":{"source":"iana","compressible":true},"application/scvp-cv-request":{"source":"iana","extensions":["scq"]},"application/scvp-cv-response":{"source":"iana","extensions":["scs"]},"application/scvp-vp-request":{"source":"iana","extensions":["spq"]},"application/scvp-vp-response":{"source":"iana","extensions":["spp"]},"application/sdp":{"source":"iana","extensions":["sdp"]},"application/secevent+jwt":{"source":"iana"},"application/senml+cbor":{"source":"iana"},"application/senml+json":{"source":"iana","compressible":true},"application/senml+xml":{"source":"iana","compressible":true},"application/senml-exi":{"source":"iana"},"application/sensml+cbor":{"source":"iana"},"application/sensml+json":{"source":"iana","compressible":true},"application/sensml+xml":{"source":"iana","compressible":true},"application/sensml-exi":{"source":"iana"},"application/sep+xml":{"source":"iana","compressible":true},"application/sep-exi":{"source":"iana"},"application/session-info":{"source":"iana"},"application/set-payment":{"source":"iana"},"application/set-payment-initiation":{"source":"iana","extensions":["setpay"]},"application/set-registration":{"source":"iana"},"application/set-registration-initiation":{"source":"iana","extensions":["setreg"]},"application/sgml":{"source":"iana"},"application/sgml-open-catalog":{"source":"iana"},"application/shf+xml":{"source":"iana","compressible":true,"extensions":["shf"]},"application/sieve":{"source":"iana"},"application/simple-filter+xml":{"source":"iana","compressible":true},"application/simple-message-summary":{"source":"iana"},"application/simplesymbolcontainer":{"source":"iana"},"application/slate":{"source":"iana"},"application/smil":{"source":"iana"},"application/smil+xml":{"source":"iana","compressible":true,"extensions":["smi","smil"]},"application/smpte336m":{"source":"iana"},"application/soap+fastinfoset":{"source":"iana"},"application/soap+xml":{"source":"iana","compressible":true},"application/sparql-query":{"source":"iana","extensions":["rq"]},"application/sparql-results+xml":{"source":"iana","compressible":true,"extensions":["srx"]},"application/spirits-event+xml":{"source":"iana","compressible":true},"application/sql":{"source":"iana"},"application/srgs":{"source":"iana","extensions":["gram"]},"application/srgs+xml":{"source":"iana","compressible":true,"extensions":["grxml"]},"application/sru+xml":{"source":"iana","compressible":true,"extensions":["sru"]},"application/ssdl+xml":{"source":"apache","compressible":true,"extensions":["ssdl"]},"application/ssml+xml":{"source":"iana","compressible":true,"extensions":["ssml"]},"application/stix+json":{"source":"iana","compressible":true},"application/tamp-apex-update":{"source":"iana"},"application/tamp-apex-update-confirm":{"source":"iana"},"application/tamp-community-update":{"source":"iana"},"application/tamp-community-update-confirm":{"source":"iana"},"application/tamp-error":{"source":"iana"},"application/tamp-sequence-adjust":{"source":"iana"},"application/tamp-sequence-adjust-confirm":{"source":"iana"},"application/tamp-status-query":{"source":"iana"},"application/tamp-status-response":{"source":"iana"},"application/tamp-update":{"source":"iana"},"application/tamp-update-confirm":{"source":"iana"},"application/tar":{"compressible":true},"application/taxii+json":{"source":"iana","compressible":true},"application/tei+xml":{"source":"iana","compressible":true,"extensions":["tei","teicorpus"]},"application/thraud+xml":{"source":"iana","compressible":true,"extensions":["tfi"]},"application/timestamp-query":{"source":"iana"},"application/timestamp-reply":{"source":"iana"},"application/timestamped-data":{"source":"iana","extensions":["tsd"]},"application/tlsrpt+gzip":{"source":"iana"},"application/tlsrpt+json":{"source":"iana","compressible":true},"application/tnauthlist":{"source":"iana"},"application/trickle-ice-sdpfrag":{"source":"iana"},"application/trig":{"source":"iana"},"application/ttml+xml":{"source":"iana","compressible":true},"application/tve-trigger":{"source":"iana"},"application/ulpfec":{"source":"iana"},"application/urc-grpsheet+xml":{"source":"iana","compressible":true},"application/urc-ressheet+xml":{"source":"iana","compressible":true},"application/urc-targetdesc+xml":{"source":"iana","compressible":true},"application/urc-uisocketdesc+xml":{"source":"iana","compressible":true},"application/vcard+json":{"source":"iana","compressible":true},"application/vcard+xml":{"source":"iana","compressible":true},"application/vemmi":{"source":"iana"},"application/vividence.scriptfile":{"source":"apache"},"application/vnd.1000minds.decision-model+xml":{"source":"iana","compressible":true},"application/vnd.3gpp-prose+xml":{"source":"iana","compressible":true},"application/vnd.3gpp-prose-pc3ch+xml":{"source":"iana","compressible":true},"application/vnd.3gpp-v2x-local-service-information":{"source":"iana"},"application/vnd.3gpp.access-transfer-events+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.bsf+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.gmop+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mcdata-payload":{"source":"iana"},"application/vnd.3gpp.mcdata-signalling":{"source":"iana"},"application/vnd.3gpp.mcptt-affiliation-command+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mcptt-floor-request+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mcptt-info+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mcptt-location-info+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mcptt-mbms-usage-info+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mcptt-signed+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.mid-call+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.pic-bw-large":{"source":"iana","extensions":["plb"]},"application/vnd.3gpp.pic-bw-small":{"source":"iana","extensions":["psb"]},"application/vnd.3gpp.pic-bw-var":{"source":"iana","extensions":["pvb"]},"application/vnd.3gpp.sms":{"source":"iana"},"application/vnd.3gpp.sms+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.srvcc-ext+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.srvcc-info+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.state-and-event-info+xml":{"source":"iana","compressible":true},"application/vnd.3gpp.ussd+xml":{"source":"iana","compressible":true},"application/vnd.3gpp2.bcmcsinfo+xml":{"source":"iana","compressible":true},"application/vnd.3gpp2.sms":{"source":"iana"},"application/vnd.3gpp2.tcap":{"source":"iana","extensions":["tcap"]},"application/vnd.3lightssoftware.imagescal":{"source":"iana"},"application/vnd.3m.post-it-notes":{"source":"iana","extensions":["pwn"]},"application/vnd.accpac.simply.aso":{"source":"iana","extensions":["aso"]},"application/vnd.accpac.simply.imp":{"source":"iana","extensions":["imp"]},"application/vnd.acucobol":{"source":"iana","extensions":["acu"]},"application/vnd.acucorp":{"source":"iana","extensions":["atc","acutc"]},"application/vnd.adobe.air-application-installer-package+zip":{"source":"apache","compressible":false,"extensions":["air"]},"application/vnd.adobe.flash.movie":{"source":"iana"},"application/vnd.adobe.formscentral.fcdt":{"source":"iana","extensions":["fcdt"]},"application/vnd.adobe.fxp":{"source":"iana","extensions":["fxp","fxpl"]},"application/vnd.adobe.partial-upload":{"source":"iana"},"application/vnd.adobe.xdp+xml":{"source":"iana","compressible":true,"extensions":["xdp"]},"application/vnd.adobe.xfdf":{"source":"iana","extensions":["xfdf"]},"application/vnd.aether.imp":{"source":"iana"},"application/vnd.afpc.afplinedata":{"source":"iana"},"application/vnd.afpc.modca":{"source":"iana"},"application/vnd.ah-barcode":{"source":"iana"},"application/vnd.ahead.space":{"source":"iana","extensions":["ahead"]},"application/vnd.airzip.filesecure.azf":{"source":"iana","extensions":["azf"]},"application/vnd.airzip.filesecure.azs":{"source":"iana","extensions":["azs"]},"application/vnd.amadeus+json":{"source":"iana","compressible":true},"application/vnd.amazon.ebook":{"source":"apache","extensions":["azw"]},"application/vnd.amazon.mobi8-ebook":{"source":"iana"},"application/vnd.americandynamics.acc":{"source":"iana","extensions":["acc"]},"application/vnd.amiga.ami":{"source":"iana","extensions":["ami"]},"application/vnd.amundsen.maze+xml":{"source":"iana","compressible":true},"application/vnd.android.package-archive":{"source":"apache","compressible":false,"extensions":["apk"]},"application/vnd.anki":{"source":"iana"},"application/vnd.anser-web-certificate-issue-initiation":{"source":"iana","extensions":["cii"]},"application/vnd.anser-web-funds-transfer-initiation":{"source":"apache","extensions":["fti"]},"application/vnd.antix.game-component":{"source":"iana","extensions":["atx"]},"application/vnd.apache.thrift.binary":{"source":"iana"},"application/vnd.apache.thrift.compact":{"source":"iana"},"application/vnd.apache.thrift.json":{"source":"iana"},"application/vnd.api+json":{"source":"iana","compressible":true},"application/vnd.apothekende.reservation+json":{"source":"iana","compressible":true},"application/vnd.apple.installer+xml":{"source":"iana","compressible":true,"extensions":["mpkg"]},"application/vnd.apple.mpegurl":{"source":"iana","extensions":["m3u8"]},"application/vnd.apple.pkpass":{"compressible":false,"extensions":["pkpass"]},"application/vnd.arastra.swi":{"source":"iana"},"application/vnd.aristanetworks.swi":{"source":"iana","extensions":["swi"]},"application/vnd.artisan+json":{"source":"iana","compressible":true},"application/vnd.artsquare":{"source":"iana"},"application/vnd.astraea-software.iota":{"source":"iana","extensions":["iota"]},"application/vnd.audiograph":{"source":"iana","extensions":["aep"]},"application/vnd.autopackage":{"source":"iana"},"application/vnd.avalon+json":{"source":"iana","compressible":true},"application/vnd.avistar+xml":{"source":"iana","compressible":true},"application/vnd.balsamiq.bmml+xml":{"source":"iana","compressible":true},"application/vnd.balsamiq.bmpr":{"source":"iana"},"application/vnd.banana-accounting":{"source":"iana"},"application/vnd.bbf.usp.msg":{"source":"iana"},"application/vnd.bbf.usp.msg+json":{"source":"iana","compressible":true},"application/vnd.bekitzur-stech+json":{"source":"iana","compressible":true},"application/vnd.bint.med-content":{"source":"iana"},"application/vnd.biopax.rdf+xml":{"source":"iana","compressible":true},"application/vnd.blink-idb-value-wrapper":{"source":"iana"},"application/vnd.blueice.multipass":{"source":"iana","extensions":["mpm"]},"application/vnd.bluetooth.ep.oob":{"source":"iana"},"application/vnd.bluetooth.le.oob":{"source":"iana"},"application/vnd.bmi":{"source":"iana","extensions":["bmi"]},"application/vnd.businessobjects":{"source":"iana","extensions":["rep"]},"application/vnd.byu.uapi+json":{"source":"iana","compressible":true},"application/vnd.cab-jscript":{"source":"iana"},"application/vnd.canon-cpdl":{"source":"iana"},"application/vnd.canon-lips":{"source":"iana"},"application/vnd.capasystems-pg+json":{"source":"iana","compressible":true},"application/vnd.cendio.thinlinc.clientconf":{"source":"iana"},"application/vnd.century-systems.tcp_stream":{"source":"iana"},"application/vnd.chemdraw+xml":{"source":"iana","compressible":true,"extensions":["cdxml"]},"application/vnd.chess-pgn":{"source":"iana"},"application/vnd.chipnuts.karaoke-mmd":{"source":"iana","extensions":["mmd"]},"application/vnd.cinderella":{"source":"iana","extensions":["cdy"]},"application/vnd.cirpack.isdn-ext":{"source":"iana"},"application/vnd.citationstyles.style+xml":{"source":"iana","compressible":true,"extensions":["csl"]},"application/vnd.claymore":{"source":"iana","extensions":["cla"]},"application/vnd.cloanto.rp9":{"source":"iana","extensions":["rp9"]},"application/vnd.clonk.c4group":{"source":"iana","extensions":["c4g","c4d","c4f","c4p","c4u"]},"application/vnd.cluetrust.cartomobile-config":{"source":"iana","extensions":["c11amc"]},"application/vnd.cluetrust.cartomobile-config-pkg":{"source":"iana","extensions":["c11amz"]},"application/vnd.coffeescript":{"source":"iana"},"application/vnd.collabio.xodocuments.document":{"source":"iana"},"application/vnd.collabio.xodocuments.document-template":{"source":"iana"},"application/vnd.collabio.xodocuments.presentation":{"source":"iana"},"application/vnd.collabio.xodocuments.presentation-template":{"source":"iana"},"application/vnd.collabio.xodocuments.spreadsheet":{"source":"iana"},"application/vnd.collabio.xodocuments.spreadsheet-template":{"source":"iana"},"application/vnd.collection+json":{"source":"iana","compressible":true},"application/vnd.collection.doc+json":{"source":"iana","compressible":true},"application/vnd.collection.next+json":{"source":"iana","compressible":true},"application/vnd.comicbook+zip":{"source":"iana","compressible":false},"application/vnd.comicbook-rar":{"source":"iana"},"application/vnd.commerce-battelle":{"source":"iana"},"application/vnd.commonspace":{"source":"iana","extensions":["csp"]},"application/vnd.contact.cmsg":{"source":"iana","extensions":["cdbcmsg"]},"application/vnd.coreos.ignition+json":{"source":"iana","compressible":true},"application/vnd.cosmocaller":{"source":"iana","extensions":["cmc"]},"application/vnd.crick.clicker":{"source":"iana","extensions":["clkx"]},"application/vnd.crick.clicker.keyboard":{"source":"iana","extensions":["clkk"]},"application/vnd.crick.clicker.palette":{"source":"iana","extensions":["clkp"]},"application/vnd.crick.clicker.template":{"source":"iana","extensions":["clkt"]},"application/vnd.crick.clicker.wordbank":{"source":"iana","extensions":["clkw"]},"application/vnd.criticaltools.wbs+xml":{"source":"iana","compressible":true,"extensions":["wbs"]},"application/vnd.ctc-posml":{"source":"iana","extensions":["pml"]},"application/vnd.ctct.ws+xml":{"source":"iana","compressible":true},"application/vnd.cups-pdf":{"source":"iana"},"application/vnd.cups-postscript":{"source":"iana"},"application/vnd.cups-ppd":{"source":"iana","extensions":["ppd"]},"application/vnd.cups-raster":{"source":"iana"},"application/vnd.cups-raw":{"source":"iana"},"application/vnd.curl":{"source":"iana"},"application/vnd.curl.car":{"source":"apache","extensions":["car"]},"application/vnd.curl.pcurl":{"source":"apache","extensions":["pcurl"]},"application/vnd.cyan.dean.root+xml":{"source":"iana","compressible":true},"application/vnd.cybank":{"source":"iana"},"application/vnd.d2l.coursepackage1p0+zip":{"source":"iana","compressible":false},"application/vnd.dart":{"source":"iana","compressible":true,"extensions":["dart"]},"application/vnd.data-vision.rdz":{"source":"iana","extensions":["rdz"]},"application/vnd.datapackage+json":{"source":"iana","compressible":true},"application/vnd.dataresource+json":{"source":"iana","compressible":true},"application/vnd.debian.binary-package":{"source":"iana"},"application/vnd.dece.data":{"source":"iana","extensions":["uvf","uvvf","uvd","uvvd"]},"application/vnd.dece.ttml+xml":{"source":"iana","compressible":true,"extensions":["uvt","uvvt"]},"application/vnd.dece.unspecified":{"source":"iana","extensions":["uvx","uvvx"]},"application/vnd.dece.zip":{"source":"iana","extensions":["uvz","uvvz"]},"application/vnd.denovo.fcselayout-link":{"source":"iana","extensions":["fe_launch"]},"application/vnd.desmume-movie":{"source":"iana"},"application/vnd.desmume.movie":{"source":"apache"},"application/vnd.dir-bi.plate-dl-nosuffix":{"source":"iana"},"application/vnd.dm.delegation+xml":{"source":"iana","compressible":true},"application/vnd.dna":{"source":"iana","extensions":["dna"]},"application/vnd.document+json":{"source":"iana","compressible":true},"application/vnd.dolby.mlp":{"source":"apache","extensions":["mlp"]},"application/vnd.dolby.mobile.1":{"source":"iana"},"application/vnd.dolby.mobile.2":{"source":"iana"},"application/vnd.doremir.scorecloud-binary-document":{"source":"iana"},"application/vnd.dpgraph":{"source":"iana","extensions":["dpg"]},"application/vnd.dreamfactory":{"source":"iana","extensions":["dfac"]},"application/vnd.drive+json":{"source":"iana","compressible":true},"application/vnd.ds-keypoint":{"source":"apache","extensions":["kpxx"]},"application/vnd.dtg.local":{"source":"iana"},"application/vnd.dtg.local.flash":{"source":"iana"},"application/vnd.dtg.local.html":{"source":"iana"},"application/vnd.dvb.ait":{"source":"iana","extensions":["ait"]},"application/vnd.dvb.dvbj":{"source":"iana"},"application/vnd.dvb.esgcontainer":{"source":"iana"},"application/vnd.dvb.ipdcdftnotifaccess":{"source":"iana"},"application/vnd.dvb.ipdcesgaccess":{"source":"iana"},"application/vnd.dvb.ipdcesgaccess2":{"source":"iana"},"application/vnd.dvb.ipdcesgpdd":{"source":"iana"},"application/vnd.dvb.ipdcroaming":{"source":"iana"},"application/vnd.dvb.iptv.alfec-base":{"source":"iana"},"application/vnd.dvb.iptv.alfec-enhancement":{"source":"iana"},"application/vnd.dvb.notif-aggregate-root+xml":{"source":"iana","compressible":true},"application/vnd.dvb.notif-container+xml":{"source":"iana","compressible":true},"application/vnd.dvb.notif-generic+xml":{"source":"iana","compressible":true},"application/vnd.dvb.notif-ia-msglist+xml":{"source":"iana","compressible":true},"application/vnd.dvb.notif-ia-registration-request+xml":{"source":"iana","compressible":true},"application/vnd.dvb.notif-ia-registration-response+xml":{"source":"iana","compressible":true},"application/vnd.dvb.notif-init+xml":{"source":"iana","compressible":true},"application/vnd.dvb.pfr":{"source":"iana"},"application/vnd.dvb.service":{"source":"iana","extensions":["svc"]},"application/vnd.dxr":{"source":"iana"},"application/vnd.dynageo":{"source":"iana","extensions":["geo"]},"application/vnd.dzr":{"source":"iana"},"application/vnd.easykaraoke.cdgdownload":{"source":"iana"},"application/vnd.ecdis-update":{"source":"iana"},"application/vnd.ecip.rlp":{"source":"iana"},"application/vnd.ecowin.chart":{"source":"iana","extensions":["mag"]},"application/vnd.ecowin.filerequest":{"source":"iana"},"application/vnd.ecowin.fileupdate":{"source":"iana"},"application/vnd.ecowin.series":{"source":"iana"},"application/vnd.ecowin.seriesrequest":{"source":"iana"},"application/vnd.ecowin.seriesupdate":{"source":"iana"},"application/vnd.efi.img":{"source":"iana"},"application/vnd.efi.iso":{"source":"iana"},"application/vnd.emclient.accessrequest+xml":{"source":"iana","compressible":true},"application/vnd.enliven":{"source":"iana","extensions":["nml"]},"application/vnd.enphase.envoy":{"source":"iana"},"application/vnd.eprints.data+xml":{"source":"iana","compressible":true},"application/vnd.epson.esf":{"source":"iana","extensions":["esf"]},"application/vnd.epson.msf":{"source":"iana","extensions":["msf"]},"application/vnd.epson.quickanime":{"source":"iana","extensions":["qam"]},"application/vnd.epson.salt":{"source":"iana","extensions":["slt"]},"application/vnd.epson.ssf":{"source":"iana","extensions":["ssf"]},"application/vnd.ericsson.quickcall":{"source":"iana"},"application/vnd.espass-espass+zip":{"source":"iana","compressible":false},"application/vnd.eszigno3+xml":{"source":"iana","compressible":true,"extensions":["es3","et3"]},"application/vnd.etsi.aoc+xml":{"source":"iana","compressible":true},"application/vnd.etsi.asic-e+zip":{"source":"iana","compressible":false},"application/vnd.etsi.asic-s+zip":{"source":"iana","compressible":false},"application/vnd.etsi.cug+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvcommand+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvdiscovery+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvprofile+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvsad-bc+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvsad-cod+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvsad-npvr+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvservice+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvsync+xml":{"source":"iana","compressible":true},"application/vnd.etsi.iptvueprofile+xml":{"source":"iana","compressible":true},"application/vnd.etsi.mcid+xml":{"source":"iana","compressible":true},"application/vnd.etsi.mheg5":{"source":"iana"},"application/vnd.etsi.overload-control-policy-dataset+xml":{"source":"iana","compressible":true},"application/vnd.etsi.pstn+xml":{"source":"iana","compressible":true},"application/vnd.etsi.sci+xml":{"source":"iana","compressible":true},"application/vnd.etsi.simservs+xml":{"source":"iana","compressible":true},"application/vnd.etsi.timestamp-token":{"source":"iana"},"application/vnd.etsi.tsl+xml":{"source":"iana","compressible":true},"application/vnd.etsi.tsl.der":{"source":"iana"},"application/vnd.eudora.data":{"source":"iana"},"application/vnd.evolv.ecig.profile":{"source":"iana"},"application/vnd.evolv.ecig.settings":{"source":"iana"},"application/vnd.evolv.ecig.theme":{"source":"iana"},"application/vnd.ezpix-album":{"source":"iana","extensions":["ez2"]},"application/vnd.ezpix-package":{"source":"iana","extensions":["ez3"]},"application/vnd.f-secure.mobile":{"source":"iana"},"application/vnd.fastcopy-disk-image":{"source":"iana"},"application/vnd.fdf":{"source":"iana","extensions":["fdf"]},"application/vnd.fdsn.mseed":{"source":"iana","extensions":["mseed"]},"application/vnd.fdsn.seed":{"source":"iana","extensions":["seed","dataless"]},"application/vnd.ffsns":{"source":"iana"},"application/vnd.filmit.zfc":{"source":"iana"},"application/vnd.fints":{"source":"iana"},"application/vnd.firemonkeys.cloudcell":{"source":"iana"},"application/vnd.flographit":{"source":"iana","extensions":["gph"]},"application/vnd.fluxtime.clip":{"source":"iana","extensions":["ftc"]},"application/vnd.font-fontforge-sfd":{"source":"iana"},"application/vnd.framemaker":{"source":"iana","extensions":["fm","frame","maker","book"]},"application/vnd.frogans.fnc":{"source":"iana","extensions":["fnc"]},"application/vnd.frogans.ltf":{"source":"iana","extensions":["ltf"]},"application/vnd.fsc.weblaunch":{"source":"iana","extensions":["fsc"]},"application/vnd.fujitsu.oasys":{"source":"iana","extensions":["oas"]},"application/vnd.fujitsu.oasys2":{"source":"iana","extensions":["oa2"]},"application/vnd.fujitsu.oasys3":{"source":"iana","extensions":["oa3"]},"application/vnd.fujitsu.oasysgp":{"source":"iana","extensions":["fg5"]},"application/vnd.fujitsu.oasysprs":{"source":"iana","extensions":["bh2"]},"application/vnd.fujixerox.art-ex":{"source":"iana"},"application/vnd.fujixerox.art4":{"source":"iana"},"application/vnd.fujixerox.ddd":{"source":"iana","extensions":["ddd"]},"application/vnd.fujixerox.docuworks":{"source":"iana","extensions":["xdw"]},"application/vnd.fujixerox.docuworks.binder":{"source":"iana","extensions":["xbd"]},"application/vnd.fujixerox.docuworks.container":{"source":"iana"},"application/vnd.fujixerox.hbpl":{"source":"iana"},"application/vnd.fut-misnet":{"source":"iana"},"application/vnd.fuzzysheet":{"source":"iana","extensions":["fzs"]},"application/vnd.genomatix.tuxedo":{"source":"iana","extensions":["txd"]},"application/vnd.geo+json":{"source":"iana","compressible":true},"application/vnd.geocube+xml":{"source":"iana","compressible":true},"application/vnd.geogebra.file":{"source":"iana","extensions":["ggb"]},"application/vnd.geogebra.tool":{"source":"iana","extensions":["ggt"]},"application/vnd.geometry-explorer":{"source":"iana","extensions":["gex","gre"]},"application/vnd.geonext":{"source":"iana","extensions":["gxt"]},"application/vnd.geoplan":{"source":"iana","extensions":["g2w"]},"application/vnd.geospace":{"source":"iana","extensions":["g3w"]},"application/vnd.gerber":{"source":"iana"},"application/vnd.globalplatform.card-content-mgt":{"source":"iana"},"application/vnd.globalplatform.card-content-mgt-response":{"source":"iana"},"application/vnd.gmx":{"source":"iana","extensions":["gmx"]},"application/vnd.google-apps.document":{"compressible":false,"extensions":["gdoc"]},"application/vnd.google-apps.presentation":{"compressible":false,"extensions":["gslides"]},"application/vnd.google-apps.spreadsheet":{"compressible":false,"extensions":["gsheet"]},"application/vnd.google-earth.kml+xml":{"source":"iana","compressible":true,"extensions":["kml"]},"application/vnd.google-earth.kmz":{"source":"iana","compressible":false,"extensions":["kmz"]},"application/vnd.gov.sk.e-form+xml":{"source":"iana","compressible":true},"application/vnd.gov.sk.e-form+zip":{"source":"iana","compressible":false},"application/vnd.gov.sk.xmldatacontainer+xml":{"source":"iana","compressible":true},"application/vnd.grafeq":{"source":"iana","extensions":["gqf","gqs"]},"application/vnd.gridmp":{"source":"iana"},"application/vnd.groove-account":{"source":"iana","extensions":["gac"]},"application/vnd.groove-help":{"source":"iana","extensions":["ghf"]},"application/vnd.groove-identity-message":{"source":"iana","extensions":["gim"]},"application/vnd.groove-injector":{"source":"iana","extensions":["grv"]},"application/vnd.groove-tool-message":{"source":"iana","extensions":["gtm"]},"application/vnd.groove-tool-template":{"source":"iana","extensions":["tpl"]},"application/vnd.groove-vcard":{"source":"iana","extensions":["vcg"]},"application/vnd.hal+json":{"source":"iana","compressible":true},"application/vnd.hal+xml":{"source":"iana","compressible":true,"extensions":["hal"]},"application/vnd.handheld-entertainment+xml":{"source":"iana","compressible":true,"extensions":["zmm"]},"application/vnd.hbci":{"source":"iana","extensions":["hbci"]},"application/vnd.hc+json":{"source":"iana","compressible":true},"application/vnd.hcl-bireports":{"source":"iana"},"application/vnd.hdt":{"source":"iana"},"application/vnd.heroku+json":{"source":"iana","compressible":true},"application/vnd.hhe.lesson-player":{"source":"iana","extensions":["les"]},"application/vnd.hp-hpgl":{"source":"iana","extensions":["hpgl"]},"application/vnd.hp-hpid":{"source":"iana","extensions":["hpid"]},"application/vnd.hp-hps":{"source":"iana","extensions":["hps"]},"application/vnd.hp-jlyt":{"source":"iana","extensions":["jlt"]},"application/vnd.hp-pcl":{"source":"iana","extensions":["pcl"]},"application/vnd.hp-pclxl":{"source":"iana","extensions":["pclxl"]},"application/vnd.httphone":{"source":"iana"},"application/vnd.hydrostatix.sof-data":{"source":"iana","extensions":["sfd-hdstx"]},"application/vnd.hyper+json":{"source":"iana","compressible":true},"application/vnd.hyper-item+json":{"source":"iana","compressible":true},"application/vnd.hyperdrive+json":{"source":"iana","compressible":true},"application/vnd.hzn-3d-crossword":{"source":"iana"},"application/vnd.ibm.afplinedata":{"source":"iana"},"application/vnd.ibm.electronic-media":{"source":"iana"},"application/vnd.ibm.minipay":{"source":"iana","extensions":["mpy"]},"application/vnd.ibm.modcap":{"source":"iana","extensions":["afp","listafp","list3820"]},"application/vnd.ibm.rights-management":{"source":"iana","extensions":["irm"]},"application/vnd.ibm.secure-container":{"source":"iana","extensions":["sc"]},"application/vnd.iccprofile":{"source":"iana","extensions":["icc","icm"]},"application/vnd.ieee.1905":{"source":"iana"},"application/vnd.igloader":{"source":"iana","extensions":["igl"]},"application/vnd.imagemeter.folder+zip":{"source":"iana","compressible":false},"application/vnd.imagemeter.image+zip":{"source":"iana","compressible":false},"application/vnd.immervision-ivp":{"source":"iana","extensions":["ivp"]},"application/vnd.immervision-ivu":{"source":"iana","extensions":["ivu"]},"application/vnd.ims.imsccv1p1":{"source":"iana"},"application/vnd.ims.imsccv1p2":{"source":"iana"},"application/vnd.ims.imsccv1p3":{"source":"iana"},"application/vnd.ims.lis.v2.result+json":{"source":"iana","compressible":true},"application/vnd.ims.lti.v2.toolconsumerprofile+json":{"source":"iana","compressible":true},"application/vnd.ims.lti.v2.toolproxy+json":{"source":"iana","compressible":true},"application/vnd.ims.lti.v2.toolproxy.id+json":{"source":"iana","compressible":true},"application/vnd.ims.lti.v2.toolsettings+json":{"source":"iana","compressible":true},"application/vnd.ims.lti.v2.toolsettings.simple+json":{"source":"iana","compressible":true},"application/vnd.informedcontrol.rms+xml":{"source":"iana","compressible":true},"application/vnd.informix-visionary":{"source":"iana"},"application/vnd.infotech.project":{"source":"iana"},"application/vnd.infotech.project+xml":{"source":"iana","compressible":true},"application/vnd.innopath.wamp.notification":{"source":"iana"},"application/vnd.insors.igm":{"source":"iana","extensions":["igm"]},"application/vnd.intercon.formnet":{"source":"iana","extensions":["xpw","xpx"]},"application/vnd.intergeo":{"source":"iana","extensions":["i2g"]},"application/vnd.intertrust.digibox":{"source":"iana"},"application/vnd.intertrust.nncp":{"source":"iana"},"application/vnd.intu.qbo":{"source":"iana","extensions":["qbo"]},"application/vnd.intu.qfx":{"source":"iana","extensions":["qfx"]},"application/vnd.iptc.g2.catalogitem+xml":{"source":"iana","compressible":true},"application/vnd.iptc.g2.conceptitem+xml":{"source":"iana","compressible":true},"application/vnd.iptc.g2.knowledgeitem+xml":{"source":"iana","compressible":true},"application/vnd.iptc.g2.newsitem+xml":{"source":"iana","compressible":true},"application/vnd.iptc.g2.newsmessage+xml":{"source":"iana","compressible":true},"application/vnd.iptc.g2.packageitem+xml":{"source":"iana","compressible":true},"application/vnd.iptc.g2.planningitem+xml":{"source":"iana","compressible":true},"application/vnd.ipunplugged.rcprofile":{"source":"iana","extensions":["rcprofile"]},"application/vnd.irepository.package+xml":{"source":"iana","compressible":true,"extensions":["irp"]},"application/vnd.is-xpr":{"source":"iana","extensions":["xpr"]},"application/vnd.isac.fcs":{"source":"iana","extensions":["fcs"]},"application/vnd.jam":{"source":"iana","extensions":["jam"]},"application/vnd.japannet-directory-service":{"source":"iana"},"application/vnd.japannet-jpnstore-wakeup":{"source":"iana"},"application/vnd.japannet-payment-wakeup":{"source":"iana"},"application/vnd.japannet-registration":{"source":"iana"},"application/vnd.japannet-registration-wakeup":{"source":"iana"},"application/vnd.japannet-setstore-wakeup":{"source":"iana"},"application/vnd.japannet-verification":{"source":"iana"},"application/vnd.japannet-verification-wakeup":{"source":"iana"},"application/vnd.jcp.javame.midlet-rms":{"source":"iana","extensions":["rms"]},"application/vnd.jisp":{"source":"iana","extensions":["jisp"]},"application/vnd.joost.joda-archive":{"source":"iana","extensions":["joda"]},"application/vnd.jsk.isdn-ngn":{"source":"iana"},"application/vnd.kahootz":{"source":"iana","extensions":["ktz","ktr"]},"application/vnd.kde.karbon":{"source":"iana","extensions":["karbon"]},"application/vnd.kde.kchart":{"source":"iana","extensions":["chrt"]},"application/vnd.kde.kformula":{"source":"iana","extensions":["kfo"]},"application/vnd.kde.kivio":{"source":"iana","extensions":["flw"]},"application/vnd.kde.kontour":{"source":"iana","extensions":["kon"]},"application/vnd.kde.kpresenter":{"source":"iana","extensions":["kpr","kpt"]},"application/vnd.kde.kspread":{"source":"iana","extensions":["ksp"]},"application/vnd.kde.kword":{"source":"iana","extensions":["kwd","kwt"]},"application/vnd.kenameaapp":{"source":"iana","extensions":["htke"]},"application/vnd.kidspiration":{"source":"iana","extensions":["kia"]},"application/vnd.kinar":{"source":"iana","extensions":["kne","knp"]},"application/vnd.koan":{"source":"iana","extensions":["skp","skd","skt","skm"]},"application/vnd.kodak-descriptor":{"source":"iana","extensions":["sse"]},"application/vnd.las.las+json":{"source":"iana","compressible":true},"application/vnd.las.las+xml":{"source":"iana","compressible":true,"extensions":["lasxml"]},"application/vnd.leap+json":{"source":"iana","compressible":true},"application/vnd.liberty-request+xml":{"source":"iana","compressible":true},"application/vnd.llamagraphics.life-balance.desktop":{"source":"iana","extensions":["lbd"]},"application/vnd.llamagraphics.life-balance.exchange+xml":{"source":"iana","compressible":true,"extensions":["lbe"]},"application/vnd.lotus-1-2-3":{"source":"iana","extensions":["123"]},"application/vnd.lotus-approach":{"source":"iana","extensions":["apr"]},"application/vnd.lotus-freelance":{"source":"iana","extensions":["pre"]},"application/vnd.lotus-notes":{"source":"iana","extensions":["nsf"]},"application/vnd.lotus-organizer":{"source":"iana","extensions":["org"]},"application/vnd.lotus-screencam":{"source":"iana","extensions":["scm"]},"application/vnd.lotus-wordpro":{"source":"iana","extensions":["lwp"]},"application/vnd.macports.portpkg":{"source":"iana","extensions":["portpkg"]},"application/vnd.mapbox-vector-tile":{"source":"iana"},"application/vnd.marlin.drm.actiontoken+xml":{"source":"iana","compressible":true},"application/vnd.marlin.drm.conftoken+xml":{"source":"iana","compressible":true},"application/vnd.marlin.drm.license+xml":{"source":"iana","compressible":true},"application/vnd.marlin.drm.mdcf":{"source":"iana"},"application/vnd.mason+json":{"source":"iana","compressible":true},"application/vnd.maxmind.maxmind-db":{"source":"iana"},"application/vnd.mcd":{"source":"iana","extensions":["mcd"]},"application/vnd.medcalcdata":{"source":"iana","extensions":["mc1"]},"application/vnd.mediastation.cdkey":{"source":"iana","extensions":["cdkey"]},"application/vnd.meridian-slingshot":{"source":"iana"},"application/vnd.mfer":{"source":"iana","extensions":["mwf"]},"application/vnd.mfmp":{"source":"iana","extensions":["mfm"]},"application/vnd.micro+json":{"source":"iana","compressible":true},"application/vnd.micrografx.flo":{"source":"iana","extensions":["flo"]},"application/vnd.micrografx.igx":{"source":"iana","extensions":["igx"]},"application/vnd.microsoft.portable-executable":{"source":"iana"},"application/vnd.microsoft.windows.thumbnail-cache":{"source":"iana"},"application/vnd.miele+json":{"source":"iana","compressible":true},"application/vnd.mif":{"source":"iana","extensions":["mif"]},"application/vnd.minisoft-hp3000-save":{"source":"iana"},"application/vnd.mitsubishi.misty-guard.trustweb":{"source":"iana"},"application/vnd.mobius.daf":{"source":"iana","extensions":["daf"]},"application/vnd.mobius.dis":{"source":"iana","extensions":["dis"]},"application/vnd.mobius.mbk":{"source":"iana","extensions":["mbk"]},"application/vnd.mobius.mqy":{"source":"iana","extensions":["mqy"]},"application/vnd.mobius.msl":{"source":"iana","extensions":["msl"]},"application/vnd.mobius.plc":{"source":"iana","extensions":["plc"]},"application/vnd.mobius.txf":{"source":"iana","extensions":["txf"]},"application/vnd.mophun.application":{"source":"iana","extensions":["mpn"]},"application/vnd.mophun.certificate":{"source":"iana","extensions":["mpc"]},"application/vnd.motorola.flexsuite":{"source":"iana"},"application/vnd.motorola.flexsuite.adsi":{"source":"iana"},"application/vnd.motorola.flexsuite.fis":{"source":"iana"},"application/vnd.motorola.flexsuite.gotap":{"source":"iana"},"application/vnd.motorola.flexsuite.kmr":{"source":"iana"},"application/vnd.motorola.flexsuite.ttc":{"source":"iana"},"application/vnd.motorola.flexsuite.wem":{"source":"iana"},"application/vnd.motorola.iprm":{"source":"iana"},"application/vnd.mozilla.xul+xml":{"source":"iana","compressible":true,"extensions":["xul"]},"application/vnd.ms-3mfdocument":{"source":"iana"},"application/vnd.ms-artgalry":{"source":"iana","extensions":["cil"]},"application/vnd.ms-asf":{"source":"iana"},"application/vnd.ms-cab-compressed":{"source":"iana","extensions":["cab"]},"application/vnd.ms-color.iccprofile":{"source":"apache"},"application/vnd.ms-excel":{"source":"iana","compressible":false,"extensions":["xls","xlm","xla","xlc","xlt","xlw"]},"application/vnd.ms-excel.addin.macroenabled.12":{"source":"iana","extensions":["xlam"]},"application/vnd.ms-excel.sheet.binary.macroenabled.12":{"source":"iana","extensions":["xlsb"]},"application/vnd.ms-excel.sheet.macroenabled.12":{"source":"iana","extensions":["xlsm"]},"application/vnd.ms-excel.template.macroenabled.12":{"source":"iana","extensions":["xltm"]},"application/vnd.ms-fontobject":{"source":"iana","compressible":true,"extensions":["eot"]},"application/vnd.ms-htmlhelp":{"source":"iana","extensions":["chm"]},"application/vnd.ms-ims":{"source":"iana","extensions":["ims"]},"application/vnd.ms-lrm":{"source":"iana","extensions":["lrm"]},"application/vnd.ms-office.activex+xml":{"source":"iana","compressible":true},"application/vnd.ms-officetheme":{"source":"iana","extensions":["thmx"]},"application/vnd.ms-opentype":{"source":"apache","compressible":true},"application/vnd.ms-outlook":{"compressible":false,"extensions":["msg"]},"application/vnd.ms-package.obfuscated-opentype":{"source":"apache"},"application/vnd.ms-pki.seccat":{"source":"apache","extensions":["cat"]},"application/vnd.ms-pki.stl":{"source":"apache","extensions":["stl"]},"application/vnd.ms-playready.initiator+xml":{"source":"iana","compressible":true},"application/vnd.ms-powerpoint":{"source":"iana","compressible":false,"extensions":["ppt","pps","pot"]},"application/vnd.ms-powerpoint.addin.macroenabled.12":{"source":"iana","extensions":["ppam"]},"application/vnd.ms-powerpoint.presentation.macroenabled.12":{"source":"iana","extensions":["pptm"]},"application/vnd.ms-powerpoint.slide.macroenabled.12":{"source":"iana","extensions":["sldm"]},"application/vnd.ms-powerpoint.slideshow.macroenabled.12":{"source":"iana","extensions":["ppsm"]},"application/vnd.ms-powerpoint.template.macroenabled.12":{"source":"iana","extensions":["potm"]},"application/vnd.ms-printdevicecapabilities+xml":{"source":"iana","compressible":true},"application/vnd.ms-printing.printticket+xml":{"source":"apache","compressible":true},"application/vnd.ms-printschematicket+xml":{"source":"iana","compressible":true},"application/vnd.ms-project":{"source":"iana","extensions":["mpp","mpt"]},"application/vnd.ms-tnef":{"source":"iana"},"application/vnd.ms-windows.devicepairing":{"source":"iana"},"application/vnd.ms-windows.nwprinting.oob":{"source":"iana"},"application/vnd.ms-windows.printerpairing":{"source":"iana"},"application/vnd.ms-windows.wsd.oob":{"source":"iana"},"application/vnd.ms-wmdrm.lic-chlg-req":{"source":"iana"},"application/vnd.ms-wmdrm.lic-resp":{"source":"iana"},"application/vnd.ms-wmdrm.meter-chlg-req":{"source":"iana"},"application/vnd.ms-wmdrm.meter-resp":{"source":"iana"},"application/vnd.ms-word.document.macroenabled.12":{"source":"iana","extensions":["docm"]},"application/vnd.ms-word.template.macroenabled.12":{"source":"iana","extensions":["dotm"]},"application/vnd.ms-works":{"source":"iana","extensions":["wps","wks","wcm","wdb"]},"application/vnd.ms-wpl":{"source":"iana","extensions":["wpl"]},"application/vnd.ms-xpsdocument":{"source":"iana","compressible":false,"extensions":["xps"]},"application/vnd.msa-disk-image":{"source":"iana"},"application/vnd.mseq":{"source":"iana","extensions":["mseq"]},"application/vnd.msign":{"source":"iana"},"application/vnd.multiad.creator":{"source":"iana"},"application/vnd.multiad.creator.cif":{"source":"iana"},"application/vnd.music-niff":{"source":"iana"},"application/vnd.musician":{"source":"iana","extensions":["mus"]},"application/vnd.muvee.style":{"source":"iana","extensions":["msty"]},"application/vnd.mynfc":{"source":"iana","extensions":["taglet"]},"application/vnd.ncd.control":{"source":"iana"},"application/vnd.ncd.reference":{"source":"iana"},"application/vnd.nearst.inv+json":{"source":"iana","compressible":true},"application/vnd.nervana":{"source":"iana"},"application/vnd.netfpx":{"source":"iana"},"application/vnd.neurolanguage.nlu":{"source":"iana","extensions":["nlu"]},"application/vnd.nimn":{"source":"iana"},"application/vnd.nintendo.nitro.rom":{"source":"iana"},"application/vnd.nintendo.snes.rom":{"source":"iana"},"application/vnd.nitf":{"source":"iana","extensions":["ntf","nitf"]},"application/vnd.noblenet-directory":{"source":"iana","extensions":["nnd"]},"application/vnd.noblenet-sealer":{"source":"iana","extensions":["nns"]},"application/vnd.noblenet-web":{"source":"iana","extensions":["nnw"]},"application/vnd.nokia.catalogs":{"source":"iana"},"application/vnd.nokia.conml+wbxml":{"source":"iana"},"application/vnd.nokia.conml+xml":{"source":"iana","compressible":true},"application/vnd.nokia.iptv.config+xml":{"source":"iana","compressible":true},"application/vnd.nokia.isds-radio-presets":{"source":"iana"},"application/vnd.nokia.landmark+wbxml":{"source":"iana"},"application/vnd.nokia.landmark+xml":{"source":"iana","compressible":true},"application/vnd.nokia.landmarkcollection+xml":{"source":"iana","compressible":true},"application/vnd.nokia.n-gage.ac+xml":{"source":"iana","compressible":true},"application/vnd.nokia.n-gage.data":{"source":"iana","extensions":["ngdat"]},"application/vnd.nokia.n-gage.symbian.install":{"source":"iana","extensions":["n-gage"]},"application/vnd.nokia.ncd":{"source":"iana"},"application/vnd.nokia.pcd+wbxml":{"source":"iana"},"application/vnd.nokia.pcd+xml":{"source":"iana","compressible":true},"application/vnd.nokia.radio-preset":{"source":"iana","extensions":["rpst"]},"application/vnd.nokia.radio-presets":{"source":"iana","extensions":["rpss"]},"application/vnd.novadigm.edm":{"source":"iana","extensions":["edm"]},"application/vnd.novadigm.edx":{"source":"iana","extensions":["edx"]},"application/vnd.novadigm.ext":{"source":"iana","extensions":["ext"]},"application/vnd.ntt-local.content-share":{"source":"iana"},"application/vnd.ntt-local.file-transfer":{"source":"iana"},"application/vnd.ntt-local.ogw_remote-access":{"source":"iana"},"application/vnd.ntt-local.sip-ta_remote":{"source":"iana"},"application/vnd.ntt-local.sip-ta_tcp_stream":{"source":"iana"},"application/vnd.oasis.opendocument.chart":{"source":"iana","extensions":["odc"]},"application/vnd.oasis.opendocument.chart-template":{"source":"iana","extensions":["otc"]},"application/vnd.oasis.opendocument.database":{"source":"iana","extensions":["odb"]},"application/vnd.oasis.opendocument.formula":{"source":"iana","extensions":["odf"]},"application/vnd.oasis.opendocument.formula-template":{"source":"iana","extensions":["odft"]},"application/vnd.oasis.opendocument.graphics":{"source":"iana","compressible":false,"extensions":["odg"]},"application/vnd.oasis.opendocument.graphics-template":{"source":"iana","extensions":["otg"]},"application/vnd.oasis.opendocument.image":{"source":"iana","extensions":["odi"]},"application/vnd.oasis.opendocument.image-template":{"source":"iana","extensions":["oti"]},"application/vnd.oasis.opendocument.presentation":{"source":"iana","compressible":false,"extensions":["odp"]},"application/vnd.oasis.opendocument.presentation-template":{"source":"iana","extensions":["otp"]},"application/vnd.oasis.opendocument.spreadsheet":{"source":"iana","compressible":false,"extensions":["ods"]},"application/vnd.oasis.opendocument.spreadsheet-template":{"source":"iana","extensions":["ots"]},"application/vnd.oasis.opendocument.text":{"source":"iana","compressible":false,"extensions":["odt"]},"application/vnd.oasis.opendocument.text-master":{"source":"iana","extensions":["odm"]},"application/vnd.oasis.opendocument.text-template":{"source":"iana","extensions":["ott"]},"application/vnd.oasis.opendocument.text-web":{"source":"iana","extensions":["oth"]},"application/vnd.obn":{"source":"iana"},"application/vnd.ocf+cbor":{"source":"iana"},"application/vnd.oftn.l10n+json":{"source":"iana","compressible":true},"application/vnd.oipf.contentaccessdownload+xml":{"source":"iana","compressible":true},"application/vnd.oipf.contentaccessstreaming+xml":{"source":"iana","compressible":true},"application/vnd.oipf.cspg-hexbinary":{"source":"iana"},"application/vnd.oipf.dae.svg+xml":{"source":"iana","compressible":true},"application/vnd.oipf.dae.xhtml+xml":{"source":"iana","compressible":true},"application/vnd.oipf.mippvcontrolmessage+xml":{"source":"iana","compressible":true},"application/vnd.oipf.pae.gem":{"source":"iana"},"application/vnd.oipf.spdiscovery+xml":{"source":"iana","compressible":true},"application/vnd.oipf.spdlist+xml":{"source":"iana","compressible":true},"application/vnd.oipf.ueprofile+xml":{"source":"iana","compressible":true},"application/vnd.oipf.userprofile+xml":{"source":"iana","compressible":true},"application/vnd.olpc-sugar":{"source":"iana","extensions":["xo"]},"application/vnd.oma-scws-config":{"source":"iana"},"application/vnd.oma-scws-http-request":{"source":"iana"},"application/vnd.oma-scws-http-response":{"source":"iana"},"application/vnd.oma.bcast.associated-procedure-parameter+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.drm-trigger+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.imd+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.ltkm":{"source":"iana"},"application/vnd.oma.bcast.notification+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.provisioningtrigger":{"source":"iana"},"application/vnd.oma.bcast.sgboot":{"source":"iana"},"application/vnd.oma.bcast.sgdd+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.sgdu":{"source":"iana"},"application/vnd.oma.bcast.simple-symbol-container":{"source":"iana"},"application/vnd.oma.bcast.smartcard-trigger+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.sprov+xml":{"source":"iana","compressible":true},"application/vnd.oma.bcast.stkm":{"source":"iana"},"application/vnd.oma.cab-address-book+xml":{"source":"iana","compressible":true},"application/vnd.oma.cab-feature-handler+xml":{"source":"iana","compressible":true},"application/vnd.oma.cab-pcc+xml":{"source":"iana","compressible":true},"application/vnd.oma.cab-subs-invite+xml":{"source":"iana","compressible":true},"application/vnd.oma.cab-user-prefs+xml":{"source":"iana","compressible":true},"application/vnd.oma.dcd":{"source":"iana"},"application/vnd.oma.dcdc":{"source":"iana"},"application/vnd.oma.dd2+xml":{"source":"iana","compressible":true,"extensions":["dd2"]},"application/vnd.oma.drm.risd+xml":{"source":"iana","compressible":true},"application/vnd.oma.group-usage-list+xml":{"source":"iana","compressible":true},"application/vnd.oma.lwm2m+json":{"source":"iana","compressible":true},"application/vnd.oma.lwm2m+tlv":{"source":"iana"},"application/vnd.oma.pal+xml":{"source":"iana","compressible":true},"application/vnd.oma.poc.detailed-progress-report+xml":{"source":"iana","compressible":true},"application/vnd.oma.poc.final-report+xml":{"source":"iana","compressible":true},"application/vnd.oma.poc.groups+xml":{"source":"iana","compressible":true},"application/vnd.oma.poc.invocation-descriptor+xml":{"source":"iana","compressible":true},"application/vnd.oma.poc.optimized-progress-report+xml":{"source":"iana","compressible":true},"application/vnd.oma.push":{"source":"iana"},"application/vnd.oma.scidm.messages+xml":{"source":"iana","compressible":true},"application/vnd.oma.xcap-directory+xml":{"source":"iana","compressible":true},"application/vnd.omads-email+xml":{"source":"iana","compressible":true},"application/vnd.omads-file+xml":{"source":"iana","compressible":true},"application/vnd.omads-folder+xml":{"source":"iana","compressible":true},"application/vnd.omaloc-supl-init":{"source":"iana"},"application/vnd.onepager":{"source":"iana"},"application/vnd.onepagertamp":{"source":"iana"},"application/vnd.onepagertamx":{"source":"iana"},"application/vnd.onepagertat":{"source":"iana"},"application/vnd.onepagertatp":{"source":"iana"},"application/vnd.onepagertatx":{"source":"iana"},"application/vnd.openblox.game+xml":{"source":"iana","compressible":true},"application/vnd.openblox.game-binary":{"source":"iana"},"application/vnd.openeye.oeb":{"source":"iana"},"application/vnd.openofficeorg.extension":{"source":"apache","extensions":["oxt"]},"application/vnd.openstreetmap.data+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.custom-properties+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.customxmlproperties+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawing+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawingml.chart+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawingml.chartshapes+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawingml.diagramcolors+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawingml.diagramdata+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawingml.diagramlayout+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.drawingml.diagramstyle+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.extended-properties+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.commentauthors+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.comments+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.handoutmaster+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.notesmaster+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.notesslide+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.presentation":{"source":"iana","compressible":false,"extensions":["pptx"]},"application/vnd.openxmlformats-officedocument.presentationml.presentation.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.presprops+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.slide":{"source":"iana","extensions":["sldx"]},"application/vnd.openxmlformats-officedocument.presentationml.slide+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.slidelayout+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.slidemaster+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.slideshow":{"source":"iana","extensions":["ppsx"]},"application/vnd.openxmlformats-officedocument.presentationml.slideshow.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.slideupdateinfo+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.tablestyles+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.tags+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.template":{"source":"iana","extensions":["potx"]},"application/vnd.openxmlformats-officedocument.presentationml.template.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.presentationml.viewprops+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.calcchain+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.chartsheet+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.comments+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.connections+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.dialogsheet+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.externallink+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.pivotcachedefinition+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.pivotcacherecords+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.pivottable+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.querytable+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.revisionheaders+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.revisionlog+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.sharedstrings+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet":{"source":"iana","compressible":false,"extensions":["xlsx"]},"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.sheetmetadata+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.styles+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.table+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.tablesinglecells+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.template":{"source":"iana","extensions":["xltx"]},"application/vnd.openxmlformats-officedocument.spreadsheetml.template.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.usernames+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.volatiledependencies+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.spreadsheetml.worksheet+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.theme+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.themeoverride+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.vmldrawing":{"source":"iana"},"application/vnd.openxmlformats-officedocument.wordprocessingml.comments+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.document":{"source":"iana","compressible":false,"extensions":["docx"]},"application/vnd.openxmlformats-officedocument.wordprocessingml.document.glossary+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.document.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.endnotes+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.fonttable+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.footer+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.footnotes+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.numbering+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.settings+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.styles+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.template":{"source":"iana","extensions":["dotx"]},"application/vnd.openxmlformats-officedocument.wordprocessingml.template.main+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-officedocument.wordprocessingml.websettings+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-package.core-properties+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-package.digital-signature-xmlsignature+xml":{"source":"iana","compressible":true},"application/vnd.openxmlformats-package.relationships+xml":{"source":"iana","compressible":true},"application/vnd.oracle.resource+json":{"source":"iana","compressible":true},"application/vnd.orange.indata":{"source":"iana"},"application/vnd.osa.netdeploy":{"source":"iana"},"application/vnd.osgeo.mapguide.package":{"source":"iana","extensions":["mgp"]},"application/vnd.osgi.bundle":{"source":"iana"},"application/vnd.osgi.dp":{"source":"iana","extensions":["dp"]},"application/vnd.osgi.subsystem":{"source":"iana","extensions":["esa"]},"application/vnd.otps.ct-kip+xml":{"source":"iana","compressible":true},"application/vnd.oxli.countgraph":{"source":"iana"},"application/vnd.pagerduty+json":{"source":"iana","compressible":true},"application/vnd.palm":{"source":"iana","extensions":["pdb","pqa","oprc"]},"application/vnd.panoply":{"source":"iana"},"application/vnd.paos+xml":{"source":"iana","compressible":true},"application/vnd.paos.xml":{"source":"apache"},"application/vnd.patentdive":{"source":"iana"},"application/vnd.pawaafile":{"source":"iana","extensions":["paw"]},"application/vnd.pcos":{"source":"iana"},"application/vnd.pg.format":{"source":"iana","extensions":["str"]},"application/vnd.pg.osasli":{"source":"iana","extensions":["ei6"]},"application/vnd.piaccess.application-licence":{"source":"iana"},"application/vnd.picsel":{"source":"iana","extensions":["efif"]},"application/vnd.pmi.widget":{"source":"iana","extensions":["wg"]},"application/vnd.poc.group-advertisement+xml":{"source":"iana","compressible":true},"application/vnd.pocketlearn":{"source":"iana","extensions":["plf"]},"application/vnd.powerbuilder6":{"source":"iana","extensions":["pbd"]},"application/vnd.powerbuilder6-s":{"source":"iana"},"application/vnd.powerbuilder7":{"source":"iana"},"application/vnd.powerbuilder7-s":{"source":"iana"},"application/vnd.powerbuilder75":{"source":"iana"},"application/vnd.powerbuilder75-s":{"source":"iana"},"application/vnd.preminet":{"source":"iana"},"application/vnd.previewsystems.box":{"source":"iana","extensions":["box"]},"application/vnd.proteus.magazine":{"source":"iana","extensions":["mgz"]},"application/vnd.psfs":{"source":"iana"},"application/vnd.publishare-delta-tree":{"source":"iana","extensions":["qps"]},"application/vnd.pvi.ptid1":{"source":"iana","extensions":["ptid"]},"application/vnd.pwg-multiplexed":{"source":"iana"},"application/vnd.pwg-xhtml-print+xml":{"source":"iana","compressible":true},"application/vnd.qualcomm.brew-app-res":{"source":"iana"},"application/vnd.quarantainenet":{"source":"iana"},"application/vnd.quark.quarkxpress":{"source":"iana","extensions":["qxd","qxt","qwd","qwt","qxl","qxb"]},"application/vnd.quobject-quoxdocument":{"source":"iana"},"application/vnd.radisys.moml+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-audit+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-audit-conf+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-audit-conn+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-audit-dialog+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-audit-stream+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-conf+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog-base+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog-fax-detect+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog-fax-sendrecv+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog-group+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog-speech+xml":{"source":"iana","compressible":true},"application/vnd.radisys.msml-dialog-transform+xml":{"source":"iana","compressible":true},"application/vnd.rainstor.data":{"source":"iana"},"application/vnd.rapid":{"source":"iana"},"application/vnd.rar":{"source":"iana"},"application/vnd.realvnc.bed":{"source":"iana","extensions":["bed"]},"application/vnd.recordare.musicxml":{"source":"iana","extensions":["mxl"]},"application/vnd.recordare.musicxml+xml":{"source":"iana","compressible":true,"extensions":["musicxml"]},"application/vnd.renlearn.rlprint":{"source":"iana"},"application/vnd.restful+json":{"source":"iana","compressible":true},"application/vnd.rig.cryptonote":{"source":"iana","extensions":["cryptonote"]},"application/vnd.rim.cod":{"source":"apache","extensions":["cod"]},"application/vnd.rn-realmedia":{"source":"apache","extensions":["rm"]},"application/vnd.rn-realmedia-vbr":{"source":"apache","extensions":["rmvb"]},"application/vnd.route66.link66+xml":{"source":"iana","compressible":true,"extensions":["link66"]},"application/vnd.rs-274x":{"source":"iana"},"application/vnd.ruckus.download":{"source":"iana"},"application/vnd.s3sms":{"source":"iana"},"application/vnd.sailingtracker.track":{"source":"iana","extensions":["st"]},"application/vnd.sbm.cid":{"source":"iana"},"application/vnd.sbm.mid2":{"source":"iana"},"application/vnd.scribus":{"source":"iana"},"application/vnd.sealed.3df":{"source":"iana"},"application/vnd.sealed.csf":{"source":"iana"},"application/vnd.sealed.doc":{"source":"iana"},"application/vnd.sealed.eml":{"source":"iana"},"application/vnd.sealed.mht":{"source":"iana"},"application/vnd.sealed.net":{"source":"iana"},"application/vnd.sealed.ppt":{"source":"iana"},"application/vnd.sealed.tiff":{"source":"iana"},"application/vnd.sealed.xls":{"source":"iana"},"application/vnd.sealedmedia.softseal.html":{"source":"iana"},"application/vnd.sealedmedia.softseal.pdf":{"source":"iana"},"application/vnd.seemail":{"source":"iana","extensions":["see"]},"application/vnd.sema":{"source":"iana","extensions":["sema"]},"application/vnd.semd":{"source":"iana","extensions":["semd"]},"application/vnd.semf":{"source":"iana","extensions":["semf"]},"application/vnd.shana.informed.formdata":{"source":"iana","extensions":["ifm"]},"application/vnd.shana.informed.formtemplate":{"source":"iana","extensions":["itp"]},"application/vnd.shana.informed.interchange":{"source":"iana","extensions":["iif"]},"application/vnd.shana.informed.package":{"source":"iana","extensions":["ipk"]},"application/vnd.shootproof+json":{"source":"iana","compressible":true},"application/vnd.sigrok.session":{"source":"iana"},"application/vnd.simtech-mindmapper":{"source":"iana","extensions":["twd","twds"]},"application/vnd.siren+json":{"source":"iana","compressible":true},"application/vnd.smaf":{"source":"iana","extensions":["mmf"]},"application/vnd.smart.notebook":{"source":"iana"},"application/vnd.smart.teacher":{"source":"iana","extensions":["teacher"]},"application/vnd.software602.filler.form+xml":{"source":"iana","compressible":true},"application/vnd.software602.filler.form-xml-zip":{"source":"iana"},"application/vnd.solent.sdkm+xml":{"source":"iana","compressible":true,"extensions":["sdkm","sdkd"]},"application/vnd.spotfire.dxp":{"source":"iana","extensions":["dxp"]},"application/vnd.spotfire.sfs":{"source":"iana","extensions":["sfs"]},"application/vnd.sqlite3":{"source":"iana"},"application/vnd.sss-cod":{"source":"iana"},"application/vnd.sss-dtf":{"source":"iana"},"application/vnd.sss-ntf":{"source":"iana"},"application/vnd.stardivision.calc":{"source":"apache","extensions":["sdc"]},"application/vnd.stardivision.draw":{"source":"apache","extensions":["sda"]},"application/vnd.stardivision.impress":{"source":"apache","extensions":["sdd"]},"application/vnd.stardivision.math":{"source":"apache","extensions":["smf"]},"application/vnd.stardivision.writer":{"source":"apache","extensions":["sdw","vor"]},"application/vnd.stardivision.writer-global":{"source":"apache","extensions":["sgl"]},"application/vnd.stepmania.package":{"source":"iana","extensions":["smzip"]},"application/vnd.stepmania.stepchart":{"source":"iana","extensions":["sm"]},"application/vnd.street-stream":{"source":"iana"},"application/vnd.sun.wadl+xml":{"source":"iana","compressible":true,"extensions":["wadl"]},"application/vnd.sun.xml.calc":{"source":"apache","extensions":["sxc"]},"application/vnd.sun.xml.calc.template":{"source":"apache","extensions":["stc"]},"application/vnd.sun.xml.draw":{"source":"apache","extensions":["sxd"]},"application/vnd.sun.xml.draw.template":{"source":"apache","extensions":["std"]},"application/vnd.sun.xml.impress":{"source":"apache","extensions":["sxi"]},"application/vnd.sun.xml.impress.template":{"source":"apache","extensions":["sti"]},"application/vnd.sun.xml.math":{"source":"apache","extensions":["sxm"]},"application/vnd.sun.xml.writer":{"source":"apache","extensions":["sxw"]},"application/vnd.sun.xml.writer.global":{"source":"apache","extensions":["sxg"]},"application/vnd.sun.xml.writer.template":{"source":"apache","extensions":["stw"]},"application/vnd.sus-calendar":{"source":"iana","extensions":["sus","susp"]},"application/vnd.svd":{"source":"iana","extensions":["svd"]},"application/vnd.swiftview-ics":{"source":"iana"},"application/vnd.symbian.install":{"source":"apache","extensions":["sis","sisx"]},"application/vnd.syncml+xml":{"source":"iana","compressible":true,"extensions":["xsm"]},"application/vnd.syncml.dm+wbxml":{"source":"iana","extensions":["bdm"]},"application/vnd.syncml.dm+xml":{"source":"iana","compressible":true,"extensions":["xdm"]},"application/vnd.syncml.dm.notification":{"source":"iana"},"application/vnd.syncml.dmddf+wbxml":{"source":"iana"},"application/vnd.syncml.dmddf+xml":{"source":"iana","compressible":true},"application/vnd.syncml.dmtnds+wbxml":{"source":"iana"},"application/vnd.syncml.dmtnds+xml":{"source":"iana","compressible":true},"application/vnd.syncml.ds.notification":{"source":"iana"},"application/vnd.tableschema+json":{"source":"iana","compressible":true},"application/vnd.tao.intent-module-archive":{"source":"iana","extensions":["tao"]},"application/vnd.tcpdump.pcap":{"source":"iana","extensions":["pcap","cap","dmp"]},"application/vnd.think-cell.ppttc+json":{"source":"iana","compressible":true},"application/vnd.tmd.mediaflex.api+xml":{"source":"iana","compressible":true},"application/vnd.tml":{"source":"iana"},"application/vnd.tmobile-livetv":{"source":"iana","extensions":["tmo"]},"application/vnd.tri.onesource":{"source":"iana"},"application/vnd.trid.tpt":{"source":"iana","extensions":["tpt"]},"application/vnd.triscape.mxs":{"source":"iana","extensions":["mxs"]},"application/vnd.trueapp":{"source":"iana","extensions":["tra"]},"application/vnd.truedoc":{"source":"iana"},"application/vnd.ubisoft.webplayer":{"source":"iana"},"application/vnd.ufdl":{"source":"iana","extensions":["ufd","ufdl"]},"application/vnd.uiq.theme":{"source":"iana","extensions":["utz"]},"application/vnd.umajin":{"source":"iana","extensions":["umj"]},"application/vnd.unity":{"source":"iana","extensions":["unityweb"]},"application/vnd.uoml+xml":{"source":"iana","compressible":true,"extensions":["uoml"]},"application/vnd.uplanet.alert":{"source":"iana"},"application/vnd.uplanet.alert-wbxml":{"source":"iana"},"application/vnd.uplanet.bearer-choice":{"source":"iana"},"application/vnd.uplanet.bearer-choice-wbxml":{"source":"iana"},"application/vnd.uplanet.cacheop":{"source":"iana"},"application/vnd.uplanet.cacheop-wbxml":{"source":"iana"},"application/vnd.uplanet.channel":{"source":"iana"},"application/vnd.uplanet.channel-wbxml":{"source":"iana"},"application/vnd.uplanet.list":{"source":"iana"},"application/vnd.uplanet.list-wbxml":{"source":"iana"},"application/vnd.uplanet.listcmd":{"source":"iana"},"application/vnd.uplanet.listcmd-wbxml":{"source":"iana"},"application/vnd.uplanet.signal":{"source":"iana"},"application/vnd.uri-map":{"source":"iana"},"application/vnd.valve.source.material":{"source":"iana"},"application/vnd.vcx":{"source":"iana","extensions":["vcx"]},"application/vnd.vd-study":{"source":"iana"},"application/vnd.vectorworks":{"source":"iana"},"application/vnd.vel+json":{"source":"iana","compressible":true},"application/vnd.verimatrix.vcas":{"source":"iana"},"application/vnd.vidsoft.vidconference":{"source":"iana"},"application/vnd.visio":{"source":"iana","extensions":["vsd","vst","vss","vsw"]},"application/vnd.visionary":{"source":"iana","extensions":["vis"]},"application/vnd.vividence.scriptfile":{"source":"iana"},"application/vnd.vsf":{"source":"iana","extensions":["vsf"]},"application/vnd.wap.sic":{"source":"iana"},"application/vnd.wap.slc":{"source":"iana"},"application/vnd.wap.wbxml":{"source":"iana","extensions":["wbxml"]},"application/vnd.wap.wmlc":{"source":"iana","extensions":["wmlc"]},"application/vnd.wap.wmlscriptc":{"source":"iana","extensions":["wmlsc"]},"application/vnd.webturbo":{"source":"iana","extensions":["wtb"]},"application/vnd.wfa.p2p":{"source":"iana"},"application/vnd.wfa.wsc":{"source":"iana"},"application/vnd.windows.devicepairing":{"source":"iana"},"application/vnd.wmc":{"source":"iana"},"application/vnd.wmf.bootstrap":{"source":"iana"},"application/vnd.wolfram.mathematica":{"source":"iana"},"application/vnd.wolfram.mathematica.package":{"source":"iana"},"application/vnd.wolfram.player":{"source":"iana","extensions":["nbp"]},"application/vnd.wordperfect":{"source":"iana","extensions":["wpd"]},"application/vnd.wqd":{"source":"iana","extensions":["wqd"]},"application/vnd.wrq-hp3000-labelled":{"source":"iana"},"application/vnd.wt.stf":{"source":"iana","extensions":["stf"]},"application/vnd.wv.csp+wbxml":{"source":"iana"},"application/vnd.wv.csp+xml":{"source":"iana","compressible":true},"application/vnd.wv.ssp+xml":{"source":"iana","compressible":true},"application/vnd.xacml+json":{"source":"iana","compressible":true},"application/vnd.xara":{"source":"iana","extensions":["xar"]},"application/vnd.xfdl":{"source":"iana","extensions":["xfdl"]},"application/vnd.xfdl.webform":{"source":"iana"},"application/vnd.xmi+xml":{"source":"iana","compressible":true},"application/vnd.xmpie.cpkg":{"source":"iana"},"application/vnd.xmpie.dpkg":{"source":"iana"},"application/vnd.xmpie.plan":{"source":"iana"},"application/vnd.xmpie.ppkg":{"source":"iana"},"application/vnd.xmpie.xlim":{"source":"iana"},"application/vnd.yamaha.hv-dic":{"source":"iana","extensions":["hvd"]},"application/vnd.yamaha.hv-script":{"source":"iana","extensions":["hvs"]},"application/vnd.yamaha.hv-voice":{"source":"iana","extensions":["hvp"]},"application/vnd.yamaha.openscoreformat":{"source":"iana","extensions":["osf"]},"application/vnd.yamaha.openscoreformat.osfpvg+xml":{"source":"iana","compressible":true,"extensions":["osfpvg"]},"application/vnd.yamaha.remote-setup":{"source":"iana"},"application/vnd.yamaha.smaf-audio":{"source":"iana","extensions":["saf"]},"application/vnd.yamaha.smaf-phrase":{"source":"iana","extensions":["spf"]},"application/vnd.yamaha.through-ngn":{"source":"iana"},"application/vnd.yamaha.tunnel-udpencap":{"source":"iana"},"application/vnd.yaoweme":{"source":"iana"},"application/vnd.yellowriver-custom-menu":{"source":"iana","extensions":["cmp"]},"application/vnd.youtube.yt":{"source":"iana"},"application/vnd.zul":{"source":"iana","extensions":["zir","zirz"]},"application/vnd.zzazz.deck+xml":{"source":"iana","compressible":true,"extensions":["zaz"]},"application/voicexml+xml":{"source":"iana","compressible":true,"extensions":["vxml"]},"application/voucher-cms+json":{"source":"iana","compressible":true},"application/vq-rtcpxr":{"source":"iana"},"application/wasm":{"compressible":true,"extensions":["wasm"]},"application/watcherinfo+xml":{"source":"iana","compressible":true},"application/webpush-options+json":{"source":"iana","compressible":true},"application/whoispp-query":{"source":"iana"},"application/whoispp-response":{"source":"iana"},"application/widget":{"source":"iana","extensions":["wgt"]},"application/winhlp":{"source":"apache","extensions":["hlp"]},"application/wita":{"source":"iana"},"application/wordperfect5.1":{"source":"iana"},"application/wsdl+xml":{"source":"iana","compressible":true,"extensions":["wsdl"]},"application/wspolicy+xml":{"source":"iana","compressible":true,"extensions":["wspolicy"]},"application/x-7z-compressed":{"source":"apache","compressible":false,"extensions":["7z"]},"application/x-abiword":{"source":"apache","extensions":["abw"]},"application/x-ace-compressed":{"source":"apache","extensions":["ace"]},"application/x-amf":{"source":"apache"},"application/x-apple-diskimage":{"source":"apache","extensions":["dmg"]},"application/x-arj":{"compressible":false,"extensions":["arj"]},"application/x-authorware-bin":{"source":"apache","extensions":["aab","x32","u32","vox"]},"application/x-authorware-map":{"source":"apache","extensions":["aam"]},"application/x-authorware-seg":{"source":"apache","extensions":["aas"]},"application/x-bcpio":{"source":"apache","extensions":["bcpio"]},"application/x-bdoc":{"compressible":false,"extensions":["bdoc"]},"application/x-bittorrent":{"source":"apache","extensions":["torrent"]},"application/x-blorb":{"source":"apache","extensions":["blb","blorb"]},"application/x-bzip":{"source":"apache","compressible":false,"extensions":["bz"]},"application/x-bzip2":{"source":"apache","compressible":false,"extensions":["bz2","boz"]},"application/x-cbr":{"source":"apache","extensions":["cbr","cba","cbt","cbz","cb7"]},"application/x-cdlink":{"source":"apache","extensions":["vcd"]},"application/x-cfs-compressed":{"source":"apache","extensions":["cfs"]},"application/x-chat":{"source":"apache","extensions":["chat"]},"application/x-chess-pgn":{"source":"apache","extensions":["pgn"]},"application/x-chrome-extension":{"extensions":["crx"]},"application/x-cocoa":{"source":"nginx","extensions":["cco"]},"application/x-compress":{"source":"apache"},"application/x-conference":{"source":"apache","extensions":["nsc"]},"application/x-cpio":{"source":"apache","extensions":["cpio"]},"application/x-csh":{"source":"apache","extensions":["csh"]},"application/x-deb":{"compressible":false},"application/x-debian-package":{"source":"apache","extensions":["deb","udeb"]},"application/x-dgc-compressed":{"source":"apache","extensions":["dgc"]},"application/x-director":{"source":"apache","extensions":["dir","dcr","dxr","cst","cct","cxt","w3d","fgd","swa"]},"application/x-doom":{"source":"apache","extensions":["wad"]},"application/x-dtbncx+xml":{"source":"apache","compressible":true,"extensions":["ncx"]},"application/x-dtbook+xml":{"source":"apache","compressible":true,"extensions":["dtb"]},"application/x-dtbresource+xml":{"source":"apache","compressible":true,"extensions":["res"]},"application/x-dvi":{"source":"apache","compressible":false,"extensions":["dvi"]},"application/x-envoy":{"source":"apache","extensions":["evy"]},"application/x-eva":{"source":"apache","extensions":["eva"]},"application/x-font-bdf":{"source":"apache","extensions":["bdf"]},"application/x-font-dos":{"source":"apache"},"application/x-font-framemaker":{"source":"apache"},"application/x-font-ghostscript":{"source":"apache","extensions":["gsf"]},"application/x-font-libgrx":{"source":"apache"},"application/x-font-linux-psf":{"source":"apache","extensions":["psf"]},"application/x-font-pcf":{"source":"apache","extensions":["pcf"]},"application/x-font-snf":{"source":"apache","extensions":["snf"]},"application/x-font-speedo":{"source":"apache"},"application/x-font-sunos-news":{"source":"apache"},"application/x-font-type1":{"source":"apache","extensions":["pfa","pfb","pfm","afm"]},"application/x-font-vfont":{"source":"apache"},"application/x-freearc":{"source":"apache","extensions":["arc"]},"application/x-futuresplash":{"source":"apache","extensions":["spl"]},"application/x-gca-compressed":{"source":"apache","extensions":["gca"]},"application/x-glulx":{"source":"apache","extensions":["ulx"]},"application/x-gnumeric":{"source":"apache","extensions":["gnumeric"]},"application/x-gramps-xml":{"source":"apache","extensions":["gramps"]},"application/x-gtar":{"source":"apache","extensions":["gtar"]},"application/x-gzip":{"source":"apache"},"application/x-hdf":{"source":"apache","extensions":["hdf"]},"application/x-httpd-php":{"compressible":true,"extensions":["php"]},"application/x-install-instructions":{"source":"apache","extensions":["install"]},"application/x-iso9660-image":{"source":"apache","extensions":["iso"]},"application/x-java-archive-diff":{"source":"nginx","extensions":["jardiff"]},"application/x-java-jnlp-file":{"source":"apache","compressible":false,"extensions":["jnlp"]},"application/x-javascript":{"compressible":true},"application/x-latex":{"source":"apache","compressible":false,"extensions":["latex"]},"application/x-lua-bytecode":{"extensions":["luac"]},"application/x-lzh-compressed":{"source":"apache","extensions":["lzh","lha"]},"application/x-makeself":{"source":"nginx","extensions":["run"]},"application/x-mie":{"source":"apache","extensions":["mie"]},"application/x-mobipocket-ebook":{"source":"apache","extensions":["prc","mobi"]},"application/x-mpegurl":{"compressible":false},"application/x-ms-application":{"source":"apache","extensions":["application"]},"application/x-ms-shortcut":{"source":"apache","extensions":["lnk"]},"application/x-ms-wmd":{"source":"apache","extensions":["wmd"]},"application/x-ms-wmz":{"source":"apache","extensions":["wmz"]},"application/x-ms-xbap":{"source":"apache","extensions":["xbap"]},"application/x-msaccess":{"source":"apache","extensions":["mdb"]},"application/x-msbinder":{"source":"apache","extensions":["obd"]},"application/x-mscardfile":{"source":"apache","extensions":["crd"]},"application/x-msclip":{"source":"apache","extensions":["clp"]},"application/x-msdos-program":{"extensions":["exe"]},"application/x-msdownload":{"source":"apache","extensions":["exe","dll","com","bat","msi"]},"application/x-msmediaview":{"source":"apache","extensions":["mvb","m13","m14"]},"application/x-msmetafile":{"source":"apache","extensions":["wmf","wmz","emf","emz"]},"application/x-msmoney":{"source":"apache","extensions":["mny"]},"application/x-mspublisher":{"source":"apache","extensions":["pub"]},"application/x-msschedule":{"source":"apache","extensions":["scd"]},"application/x-msterminal":{"source":"apache","extensions":["trm"]},"application/x-mswrite":{"source":"apache","extensions":["wri"]},"application/x-netcdf":{"source":"apache","extensions":["nc","cdf"]},"application/x-ns-proxy-autoconfig":{"compressible":true,"extensions":["pac"]},"application/x-nzb":{"source":"apache","extensions":["nzb"]},"application/x-perl":{"source":"nginx","extensions":["pl","pm"]},"application/x-pilot":{"source":"nginx","extensions":["prc","pdb"]},"application/x-pkcs12":{"source":"apache","compressible":false,"extensions":["p12","pfx"]},"application/x-pkcs7-certificates":{"source":"apache","extensions":["p7b","spc"]},"application/x-pkcs7-certreqresp":{"source":"apache","extensions":["p7r"]},"application/x-rar-compressed":{"source":"apache","compressible":false,"extensions":["rar"]},"application/x-redhat-package-manager":{"source":"nginx","extensions":["rpm"]},"application/x-research-info-systems":{"source":"apache","extensions":["ris"]},"application/x-sea":{"source":"nginx","extensions":["sea"]},"application/x-sh":{"source":"apache","compressible":true,"extensions":["sh"]},"application/x-shar":{"source":"apache","extensions":["shar"]},"application/x-shockwave-flash":{"source":"apache","compressible":false,"extensions":["swf"]},"application/x-silverlight-app":{"source":"apache","extensions":["xap"]},"application/x-sql":{"source":"apache","extensions":["sql"]},"application/x-stuffit":{"source":"apache","compressible":false,"extensions":["sit"]},"application/x-stuffitx":{"source":"apache","extensions":["sitx"]},"application/x-subrip":{"source":"apache","extensions":["srt"]},"application/x-sv4cpio":{"source":"apache","extensions":["sv4cpio"]},"application/x-sv4crc":{"source":"apache","extensions":["sv4crc"]},"application/x-t3vm-image":{"source":"apache","extensions":["t3"]},"application/x-tads":{"source":"apache","extensions":["gam"]},"application/x-tar":{"source":"apache","compressible":true,"extensions":["tar"]},"application/x-tcl":{"source":"apache","extensions":["tcl","tk"]},"application/x-tex":{"source":"apache","extensions":["tex"]},"application/x-tex-tfm":{"source":"apache","extensions":["tfm"]},"application/x-texinfo":{"source":"apache","extensions":["texinfo","texi"]},"application/x-tgif":{"source":"apache","extensions":["obj"]},"application/x-ustar":{"source":"apache","extensions":["ustar"]},"application/x-virtualbox-hdd":{"compressible":true,"extensions":["hdd"]},"application/x-virtualbox-ova":{"compressible":true,"extensions":["ova"]},"application/x-virtualbox-ovf":{"compressible":true,"extensions":["ovf"]},"application/x-virtualbox-vbox":{"compressible":true,"extensions":["vbox"]},"application/x-virtualbox-vbox-extpack":{"compressible":false,"extensions":["vbox-extpack"]},"application/x-virtualbox-vdi":{"compressible":true,"extensions":["vdi"]},"application/x-virtualbox-vhd":{"compressible":true,"extensions":["vhd"]},"application/x-virtualbox-vmdk":{"compressible":true,"extensions":["vmdk"]},"application/x-wais-source":{"source":"apache","extensions":["src"]},"application/x-web-app-manifest+json":{"compressible":true,"extensions":["webapp"]},"application/x-www-form-urlencoded":{"source":"iana","compressible":true},"application/x-x509-ca-cert":{"source":"apache","extensions":["der","crt","pem"]},"application/x-xfig":{"source":"apache","extensions":["fig"]},"application/x-xliff+xml":{"source":"apache","compressible":true,"extensions":["xlf"]},"application/x-xpinstall":{"source":"apache","compressible":false,"extensions":["xpi"]},"application/x-xz":{"source":"apache","extensions":["xz"]},"application/x-zmachine":{"source":"apache","extensions":["z1","z2","z3","z4","z5","z6","z7","z8"]},"application/x400-bp":{"source":"iana"},"application/xacml+xml":{"source":"iana","compressible":true},"application/xaml+xml":{"source":"apache","compressible":true,"extensions":["xaml"]},"application/xcap-att+xml":{"source":"iana","compressible":true},"application/xcap-caps+xml":{"source":"iana","compressible":true},"application/xcap-diff+xml":{"source":"iana","compressible":true,"extensions":["xdf"]},"application/xcap-el+xml":{"source":"iana","compressible":true},"application/xcap-error+xml":{"source":"iana","compressible":true},"application/xcap-ns+xml":{"source":"iana","compressible":true},"application/xcon-conference-info+xml":{"source":"iana","compressible":true},"application/xcon-conference-info-diff+xml":{"source":"iana","compressible":true},"application/xenc+xml":{"source":"iana","compressible":true,"extensions":["xenc"]},"application/xhtml+xml":{"source":"iana","compressible":true,"extensions":["xhtml","xht"]},"application/xhtml-voice+xml":{"source":"apache","compressible":true},"application/xliff+xml":{"source":"iana","compressible":true},"application/xml":{"source":"iana","compressible":true,"extensions":["xml","xsl","xsd","rng"]},"application/xml-dtd":{"source":"iana","compressible":true,"extensions":["dtd"]},"application/xml-external-parsed-entity":{"source":"iana"},"application/xml-patch+xml":{"source":"iana","compressible":true},"application/xmpp+xml":{"source":"iana","compressible":true},"application/xop+xml":{"source":"iana","compressible":true,"extensions":["xop"]},"application/xproc+xml":{"source":"apache","compressible":true,"extensions":["xpl"]},"application/xslt+xml":{"source":"iana","compressible":true,"extensions":["xslt"]},"application/xspf+xml":{"source":"apache","compressible":true,"extensions":["xspf"]},"application/xv+xml":{"source":"iana","compressible":true,"extensions":["mxml","xhvml","xvml","xvm"]},"application/yang":{"source":"iana","extensions":["yang"]},"application/yang-data+json":{"source":"iana","compressible":true},"application/yang-data+xml":{"source":"iana","compressible":true},"application/yang-patch+json":{"source":"iana","compressible":true},"application/yang-patch+xml":{"source":"iana","compressible":true},"application/yin+xml":{"source":"iana","compressible":true,"extensions":["yin"]},"application/zip":{"source":"iana","compressible":false,"extensions":["zip"]},"application/zlib":{"source":"iana"},"audio/1d-interleaved-parityfec":{"source":"iana"},"audio/32kadpcm":{"source":"iana"},"audio/3gpp":{"source":"iana","compressible":false,"extensions":["3gpp"]},"audio/3gpp2":{"source":"iana"},"audio/aac":{"source":"iana"},"audio/ac3":{"source":"iana"},"audio/adpcm":{"source":"apache","extensions":["adp"]},"audio/amr":{"source":"iana"},"audio/amr-wb":{"source":"iana"},"audio/amr-wb+":{"source":"iana"},"audio/aptx":{"source":"iana"},"audio/asc":{"source":"iana"},"audio/atrac-advanced-lossless":{"source":"iana"},"audio/atrac-x":{"source":"iana"},"audio/atrac3":{"source":"iana"},"audio/basic":{"source":"iana","compressible":false,"extensions":["au","snd"]},"audio/bv16":{"source":"iana"},"audio/bv32":{"source":"iana"},"audio/clearmode":{"source":"iana"},"audio/cn":{"source":"iana"},"audio/dat12":{"source":"iana"},"audio/dls":{"source":"iana"},"audio/dsr-es201108":{"source":"iana"},"audio/dsr-es202050":{"source":"iana"},"audio/dsr-es202211":{"source":"iana"},"audio/dsr-es202212":{"source":"iana"},"audio/dv":{"source":"iana"},"audio/dvi4":{"source":"iana"},"audio/eac3":{"source":"iana"},"audio/encaprtp":{"source":"iana"},"audio/evrc":{"source":"iana"},"audio/evrc-qcp":{"source":"iana"},"audio/evrc0":{"source":"iana"},"audio/evrc1":{"source":"iana"},"audio/evrcb":{"source":"iana"},"audio/evrcb0":{"source":"iana"},"audio/evrcb1":{"source":"iana"},"audio/evrcnw":{"source":"iana"},"audio/evrcnw0":{"source":"iana"},"audio/evrcnw1":{"source":"iana"},"audio/evrcwb":{"source":"iana"},"audio/evrcwb0":{"source":"iana"},"audio/evrcwb1":{"source":"iana"},"audio/evs":{"source":"iana"},"audio/fwdred":{"source":"iana"},"audio/g711-0":{"source":"iana"},"audio/g719":{"source":"iana"},"audio/g722":{"source":"iana"},"audio/g7221":{"source":"iana"},"audio/g723":{"source":"iana"},"audio/g726-16":{"source":"iana"},"audio/g726-24":{"source":"iana"},"audio/g726-32":{"source":"iana"},"audio/g726-40":{"source":"iana"},"audio/g728":{"source":"iana"},"audio/g729":{"source":"iana"},"audio/g7291":{"source":"iana"},"audio/g729d":{"source":"iana"},"audio/g729e":{"source":"iana"},"audio/gsm":{"source":"iana"},"audio/gsm-efr":{"source":"iana"},"audio/gsm-hr-08":{"source":"iana"},"audio/ilbc":{"source":"iana"},"audio/ip-mr_v2.5":{"source":"iana"},"audio/isac":{"source":"apache"},"audio/l16":{"source":"iana"},"audio/l20":{"source":"iana"},"audio/l24":{"source":"iana","compressible":false},"audio/l8":{"source":"iana"},"audio/lpc":{"source":"iana"},"audio/melp":{"source":"iana"},"audio/melp1200":{"source":"iana"},"audio/melp2400":{"source":"iana"},"audio/melp600":{"source":"iana"},"audio/midi":{"source":"apache","extensions":["mid","midi","kar","rmi"]},"audio/mobile-xmf":{"source":"iana"},"audio/mp3":{"compressible":false,"extensions":["mp3"]},"audio/mp4":{"source":"iana","compressible":false,"extensions":["m4a","mp4a"]},"audio/mp4a-latm":{"source":"iana"},"audio/mpa":{"source":"iana"},"audio/mpa-robust":{"source":"iana"},"audio/mpeg":{"source":"iana","compressible":false,"extensions":["mpga","mp2","mp2a","mp3","m2a","m3a"]},"audio/mpeg4-generic":{"source":"iana"},"audio/musepack":{"source":"apache"},"audio/ogg":{"source":"iana","compressible":false,"extensions":["oga","ogg","spx"]},"audio/opus":{"source":"iana"},"audio/parityfec":{"source":"iana"},"audio/pcma":{"source":"iana"},"audio/pcma-wb":{"source":"iana"},"audio/pcmu":{"source":"iana"},"audio/pcmu-wb":{"source":"iana"},"audio/prs.sid":{"source":"iana"},"audio/qcelp":{"source":"iana"},"audio/raptorfec":{"source":"iana"},"audio/red":{"source":"iana"},"audio/rtp-enc-aescm128":{"source":"iana"},"audio/rtp-midi":{"source":"iana"},"audio/rtploopback":{"source":"iana"},"audio/rtx":{"source":"iana"},"audio/s3m":{"source":"apache","extensions":["s3m"]},"audio/silk":{"source":"apache","extensions":["sil"]},"audio/smv":{"source":"iana"},"audio/smv-qcp":{"source":"iana"},"audio/smv0":{"source":"iana"},"audio/sp-midi":{"source":"iana"},"audio/speex":{"source":"iana"},"audio/t140c":{"source":"iana"},"audio/t38":{"source":"iana"},"audio/telephone-event":{"source":"iana"},"audio/tone":{"source":"iana"},"audio/uemclip":{"source":"iana"},"audio/ulpfec":{"source":"iana"},"audio/usac":{"source":"iana"},"audio/vdvi":{"source":"iana"},"audio/vmr-wb":{"source":"iana"},"audio/vnd.3gpp.iufp":{"source":"iana"},"audio/vnd.4sb":{"source":"iana"},"audio/vnd.audiokoz":{"source":"iana"},"audio/vnd.celp":{"source":"iana"},"audio/vnd.cisco.nse":{"source":"iana"},"audio/vnd.cmles.radio-events":{"source":"iana"},"audio/vnd.cns.anp1":{"source":"iana"},"audio/vnd.cns.inf1":{"source":"iana"},"audio/vnd.dece.audio":{"source":"iana","extensions":["uva","uvva"]},"audio/vnd.digital-winds":{"source":"iana","extensions":["eol"]},"audio/vnd.dlna.adts":{"source":"iana"},"audio/vnd.dolby.heaac.1":{"source":"iana"},"audio/vnd.dolby.heaac.2":{"source":"iana"},"audio/vnd.dolby.mlp":{"source":"iana"},"audio/vnd.dolby.mps":{"source":"iana"},"audio/vnd.dolby.pl2":{"source":"iana"},"audio/vnd.dolby.pl2x":{"source":"iana"},"audio/vnd.dolby.pl2z":{"source":"iana"},"audio/vnd.dolby.pulse.1":{"source":"iana"},"audio/vnd.dra":{"source":"iana","extensions":["dra"]},"audio/vnd.dts":{"source":"iana","extensions":["dts"]},"audio/vnd.dts.hd":{"source":"iana","extensions":["dtshd"]},"audio/vnd.dvb.file":{"source":"iana"},"audio/vnd.everad.plj":{"source":"iana"},"audio/vnd.hns.audio":{"source":"iana"},"audio/vnd.lucent.voice":{"source":"iana","extensions":["lvp"]},"audio/vnd.ms-playready.media.pya":{"source":"iana","extensions":["pya"]},"audio/vnd.nokia.mobile-xmf":{"source":"iana"},"audio/vnd.nortel.vbk":{"source":"iana"},"audio/vnd.nuera.ecelp4800":{"source":"iana","extensions":["ecelp4800"]},"audio/vnd.nuera.ecelp7470":{"source":"iana","extensions":["ecelp7470"]},"audio/vnd.nuera.ecelp9600":{"source":"iana","extensions":["ecelp9600"]},"audio/vnd.octel.sbc":{"source":"iana"},"audio/vnd.presonus.multitrack":{"source":"iana"},"audio/vnd.qcelp":{"source":"iana"},"audio/vnd.rhetorex.32kadpcm":{"source":"iana"},"audio/vnd.rip":{"source":"iana","extensions":["rip"]},"audio/vnd.rn-realaudio":{"compressible":false},"audio/vnd.sealedmedia.softseal.mpeg":{"source":"iana"},"audio/vnd.vmx.cvsd":{"source":"iana"},"audio/vnd.wave":{"compressible":false},"audio/vorbis":{"source":"iana","compressible":false},"audio/vorbis-config":{"source":"iana"},"audio/wav":{"compressible":false,"extensions":["wav"]},"audio/wave":{"compressible":false,"extensions":["wav"]},"audio/webm":{"source":"apache","compressible":false,"extensions":["weba"]},"audio/x-aac":{"source":"apache","compressible":false,"extensions":["aac"]},"audio/x-aiff":{"source":"apache","extensions":["aif","aiff","aifc"]},"audio/x-caf":{"source":"apache","compressible":false,"extensions":["caf"]},"audio/x-flac":{"source":"apache","extensions":["flac"]},"audio/x-m4a":{"source":"nginx","extensions":["m4a"]},"audio/x-matroska":{"source":"apache","extensions":["mka"]},"audio/x-mpegurl":{"source":"apache","extensions":["m3u"]},"audio/x-ms-wax":{"source":"apache","extensions":["wax"]},"audio/x-ms-wma":{"source":"apache","extensions":["wma"]},"audio/x-pn-realaudio":{"source":"apache","extensions":["ram","ra"]},"audio/x-pn-realaudio-plugin":{"source":"apache","extensions":["rmp"]},"audio/x-realaudio":{"source":"nginx","extensions":["ra"]},"audio/x-tta":{"source":"apache"},"audio/x-wav":{"source":"apache","extensions":["wav"]},"audio/xm":{"source":"apache","extensions":["xm"]},"chemical/x-cdx":{"source":"apache","extensions":["cdx"]},"chemical/x-cif":{"source":"apache","extensions":["cif"]},"chemical/x-cmdf":{"source":"apache","extensions":["cmdf"]},"chemical/x-cml":{"source":"apache","extensions":["cml"]},"chemical/x-csml":{"source":"apache","extensions":["csml"]},"chemical/x-pdb":{"source":"apache"},"chemical/x-xyz":{"source":"apache","extensions":["xyz"]},"font/collection":{"source":"iana","extensions":["ttc"]},"font/otf":{"source":"iana","compressible":true,"extensions":["otf"]},"font/sfnt":{"source":"iana"},"font/ttf":{"source":"iana","extensions":["ttf"]},"font/woff":{"source":"iana","extensions":["woff"]},"font/woff2":{"source":"iana","extensions":["woff2"]},"image/aces":{"source":"iana"},"image/apng":{"compressible":false,"extensions":["apng"]},"image/bmp":{"source":"iana","compressible":true,"extensions":["bmp"]},"image/cgm":{"source":"iana","extensions":["cgm"]},"image/dicom-rle":{"source":"iana"},"image/emf":{"source":"iana"},"image/fits":{"source":"iana"},"image/g3fax":{"source":"iana","extensions":["g3"]},"image/gif":{"source":"iana","compressible":false,"extensions":["gif"]},"image/ief":{"source":"iana","extensions":["ief"]},"image/jls":{"source":"iana"},"image/jp2":{"source":"iana","compressible":false,"extensions":["jp2","jpg2"]},"image/jpeg":{"source":"iana","compressible":false,"extensions":["jpeg","jpg","jpe"]},"image/jpm":{"source":"iana","compressible":false,"extensions":["jpm"]},"image/jpx":{"source":"iana","compressible":false,"extensions":["jpx","jpf"]},"image/ktx":{"source":"iana","extensions":["ktx"]},"image/naplps":{"source":"iana"},"image/pjpeg":{"compressible":false},"image/png":{"source":"iana","compressible":false,"extensions":["png"]},"image/prs.btif":{"source":"iana","extensions":["btif"]},"image/prs.pti":{"source":"iana"},"image/pwg-raster":{"source":"iana"},"image/sgi":{"source":"apache","extensions":["sgi"]},"image/svg+xml":{"source":"iana","compressible":true,"extensions":["svg","svgz"]},"image/t38":{"source":"iana"},"image/tiff":{"source":"iana","compressible":false,"extensions":["tiff","tif"]},"image/tiff-fx":{"source":"iana"},"image/vnd.adobe.photoshop":{"source":"iana","compressible":true,"extensions":["psd"]},"image/vnd.airzip.accelerator.azv":{"source":"iana"},"image/vnd.cns.inf2":{"source":"iana"},"image/vnd.dece.graphic":{"source":"iana","extensions":["uvi","uvvi","uvg","uvvg"]},"image/vnd.djvu":{"source":"iana","extensions":["djvu","djv"]},"image/vnd.dvb.subtitle":{"source":"iana","extensions":["sub"]},"image/vnd.dwg":{"source":"iana","extensions":["dwg"]},"image/vnd.dxf":{"source":"iana","extensions":["dxf"]},"image/vnd.fastbidsheet":{"source":"iana","extensions":["fbs"]},"image/vnd.fpx":{"source":"iana","extensions":["fpx"]},"image/vnd.fst":{"source":"iana","extensions":["fst"]},"image/vnd.fujixerox.edmics-mmr":{"source":"iana","extensions":["mmr"]},"image/vnd.fujixerox.edmics-rlc":{"source":"iana","extensions":["rlc"]},"image/vnd.globalgraphics.pgb":{"source":"iana"},"image/vnd.microsoft.icon":{"source":"iana"},"image/vnd.mix":{"source":"iana"},"image/vnd.mozilla.apng":{"source":"iana"},"image/vnd.ms-modi":{"source":"iana","extensions":["mdi"]},"image/vnd.ms-photo":{"source":"apache","extensions":["wdp"]},"image/vnd.net-fpx":{"source":"iana","extensions":["npx"]},"image/vnd.radiance":{"source":"iana"},"image/vnd.sealed.png":{"source":"iana"},"image/vnd.sealedmedia.softseal.gif":{"source":"iana"},"image/vnd.sealedmedia.softseal.jpg":{"source":"iana"},"image/vnd.svf":{"source":"iana"},"image/vnd.tencent.tap":{"source":"iana"},"image/vnd.valve.source.texture":{"source":"iana"},"image/vnd.wap.wbmp":{"source":"iana","extensions":["wbmp"]},"image/vnd.xiff":{"source":"iana","extensions":["xif"]},"image/vnd.zbrush.pcx":{"source":"iana"},"image/webp":{"source":"apache","extensions":["webp"]},"image/wmf":{"source":"iana"},"image/x-3ds":{"source":"apache","extensions":["3ds"]},"image/x-cmu-raster":{"source":"apache","extensions":["ras"]},"image/x-cmx":{"source":"apache","extensions":["cmx"]},"image/x-freehand":{"source":"apache","extensions":["fh","fhc","fh4","fh5","fh7"]},"image/x-icon":{"source":"apache","compressible":true,"extensions":["ico"]},"image/x-jng":{"source":"nginx","extensions":["jng"]},"image/x-mrsid-image":{"source":"apache","extensions":["sid"]},"image/x-ms-bmp":{"source":"nginx","compressible":true,"extensions":["bmp"]},"image/x-pcx":{"source":"apache","extensions":["pcx"]},"image/x-pict":{"source":"apache","extensions":["pic","pct"]},"image/x-portable-anymap":{"source":"apache","extensions":["pnm"]},"image/x-portable-bitmap":{"source":"apache","extensions":["pbm"]},"image/x-portable-graymap":{"source":"apache","extensions":["pgm"]},"image/x-portable-pixmap":{"source":"apache","extensions":["ppm"]},"image/x-rgb":{"source":"apache","extensions":["rgb"]},"image/x-tga":{"source":"apache","extensions":["tga"]},"image/x-xbitmap":{"source":"apache","extensions":["xbm"]},"image/x-xcf":{"compressible":false},"image/x-xpixmap":{"source":"apache","extensions":["xpm"]},"image/x-xwindowdump":{"source":"apache","extensions":["xwd"]},"message/cpim":{"source":"iana"},"message/delivery-status":{"source":"iana"},"message/disposition-notification":{"source":"iana","extensions":["disposition-notification"]},"message/external-body":{"source":"iana"},"message/feedback-report":{"source":"iana"},"message/global":{"source":"iana","extensions":["u8msg"]},"message/global-delivery-status":{"source":"iana","extensions":["u8dsn"]},"message/global-disposition-notification":{"source":"iana","extensions":["u8mdn"]},"message/global-headers":{"source":"iana","extensions":["u8hdr"]},"message/http":{"source":"iana","compressible":false},"message/imdn+xml":{"source":"iana","compressible":true},"message/news":{"source":"iana"},"message/partial":{"source":"iana","compressible":false},"message/rfc822":{"source":"iana","compressible":true,"extensions":["eml","mime"]},"message/s-http":{"source":"iana"},"message/sip":{"source":"iana"},"message/sipfrag":{"source":"iana"},"message/tracking-status":{"source":"iana"},"message/vnd.si.simp":{"source":"iana"},"message/vnd.wfa.wsc":{"source":"iana","extensions":["wsc"]},"model/3mf":{"source":"iana"},"model/gltf+json":{"source":"iana","compressible":true,"extensions":["gltf"]},"model/gltf-binary":{"source":"iana","compressible":true,"extensions":["glb"]},"model/iges":{"source":"iana","compressible":false,"extensions":["igs","iges"]},"model/mesh":{"source":"iana","compressible":false,"extensions":["msh","mesh","silo"]},"model/stl":{"source":"iana"},"model/vnd.collada+xml":{"source":"iana","compressible":true,"extensions":["dae"]},"model/vnd.dwf":{"source":"iana","extensions":["dwf"]},"model/vnd.flatland.3dml":{"source":"iana"},"model/vnd.gdl":{"source":"iana","extensions":["gdl"]},"model/vnd.gs-gdl":{"source":"apache"},"model/vnd.gs.gdl":{"source":"iana"},"model/vnd.gtw":{"source":"iana","extensions":["gtw"]},"model/vnd.moml+xml":{"source":"iana","compressible":true},"model/vnd.mts":{"source":"iana","extensions":["mts"]},"model/vnd.opengex":{"source":"iana"},"model/vnd.parasolid.transmit.binary":{"source":"iana"},"model/vnd.parasolid.transmit.text":{"source":"iana"},"model/vnd.rosette.annotated-data-model":{"source":"iana"},"model/vnd.usdz+zip":{"source":"iana","compressible":false},"model/vnd.valve.source.compiled-map":{"source":"iana"},"model/vnd.vtu":{"source":"iana","extensions":["vtu"]},"model/vrml":{"source":"iana","compressible":false,"extensions":["wrl","vrml"]},"model/x3d+binary":{"source":"apache","compressible":false,"extensions":["x3db","x3dbz"]},"model/x3d+fastinfoset":{"source":"iana"},"model/x3d+vrml":{"source":"apache","compressible":false,"extensions":["x3dv","x3dvz"]},"model/x3d+xml":{"source":"iana","compressible":true,"extensions":["x3d","x3dz"]},"model/x3d-vrml":{"source":"iana"},"multipart/alternative":{"source":"iana","compressible":false},"multipart/appledouble":{"source":"iana"},"multipart/byteranges":{"source":"iana"},"multipart/digest":{"source":"iana"},"multipart/encrypted":{"source":"iana","compressible":false},"multipart/form-data":{"source":"iana","compressible":false},"multipart/header-set":{"source":"iana"},"multipart/mixed":{"source":"iana","compressible":false},"multipart/multilingual":{"source":"iana"},"multipart/parallel":{"source":"iana"},"multipart/related":{"source":"iana","compressible":false},"multipart/report":{"source":"iana"},"multipart/signed":{"source":"iana","compressible":false},"multipart/vnd.bint.med-plus":{"source":"iana"},"multipart/voice-message":{"source":"iana"},"multipart/x-mixed-replace":{"source":"iana"},"text/1d-interleaved-parityfec":{"source":"iana"},"text/cache-manifest":{"source":"iana","compressible":true,"extensions":["appcache","manifest"]},"text/calendar":{"source":"iana","extensions":["ics","ifb"]},"text/calender":{"compressible":true},"text/cmd":{"compressible":true},"text/coffeescript":{"extensions":["coffee","litcoffee"]},"text/css":{"source":"iana","charset":"UTF-8","compressible":true,"extensions":["css"]},"text/csv":{"source":"iana","compressible":true,"extensions":["csv"]},"text/csv-schema":{"source":"iana"},"text/directory":{"source":"iana"},"text/dns":{"source":"iana"},"text/ecmascript":{"source":"iana"},"text/encaprtp":{"source":"iana"},"text/enriched":{"source":"iana"},"text/fwdred":{"source":"iana"},"text/grammar-ref-list":{"source":"iana"},"text/html":{"source":"iana","compressible":true,"extensions":["html","htm","shtml"]},"text/jade":{"extensions":["jade"]},"text/javascript":{"source":"iana","compressible":true},"text/jcr-cnd":{"source":"iana"},"text/jsx":{"compressible":true,"extensions":["jsx"]},"text/less":{"extensions":["less"]},"text/markdown":{"source":"iana","compressible":true,"extensions":["markdown","md"]},"text/mathml":{"source":"nginx","extensions":["mml"]},"text/mizar":{"source":"iana"},"text/n3":{"source":"iana","compressible":true,"extensions":["n3"]},"text/parameters":{"source":"iana"},"text/parityfec":{"source":"iana"},"text/plain":{"source":"iana","compressible":true,"extensions":["txt","text","conf","def","list","log","in","ini"]},"text/provenance-notation":{"source":"iana"},"text/prs.fallenstein.rst":{"source":"iana"},"text/prs.lines.tag":{"source":"iana","extensions":["dsc"]},"text/prs.prop.logic":{"source":"iana"},"text/raptorfec":{"source":"iana"},"text/red":{"source":"iana"},"text/rfc822-headers":{"source":"iana"},"text/richtext":{"source":"iana","compressible":true,"extensions":["rtx"]},"text/rtf":{"source":"iana","compressible":true,"extensions":["rtf"]},"text/rtp-enc-aescm128":{"source":"iana"},"text/rtploopback":{"source":"iana"},"text/rtx":{"source":"iana"},"text/sgml":{"source":"iana","extensions":["sgml","sgm"]},"text/shex":{"extensions":["shex"]},"text/slim":{"extensions":["slim","slm"]},"text/strings":{"source":"iana"},"text/stylus":{"extensions":["stylus","styl"]},"text/t140":{"source":"iana"},"text/tab-separated-values":{"source":"iana","compressible":true,"extensions":["tsv"]},"text/troff":{"source":"iana","extensions":["t","tr","roff","man","me","ms"]},"text/turtle":{"source":"iana","charset":"UTF-8","extensions":["ttl"]},"text/ulpfec":{"source":"iana"},"text/uri-list":{"source":"iana","compressible":true,"extensions":["uri","uris","urls"]},"text/vcard":{"source":"iana","compressible":true,"extensions":["vcard"]},"text/vnd.a":{"source":"iana"},"text/vnd.abc":{"source":"iana"},"text/vnd.ascii-art":{"source":"iana"},"text/vnd.curl":{"source":"iana","extensions":["curl"]},"text/vnd.curl.dcurl":{"source":"apache","extensions":["dcurl"]},"text/vnd.curl.mcurl":{"source":"apache","extensions":["mcurl"]},"text/vnd.curl.scurl":{"source":"apache","extensions":["scurl"]},"text/vnd.debian.copyright":{"source":"iana"},"text/vnd.dmclientscript":{"source":"iana"},"text/vnd.dvb.subtitle":{"source":"iana","extensions":["sub"]},"text/vnd.esmertec.theme-descriptor":{"source":"iana"},"text/vnd.fly":{"source":"iana","extensions":["fly"]},"text/vnd.fmi.flexstor":{"source":"iana","extensions":["flx"]},"text/vnd.gml":{"source":"iana"},"text/vnd.graphviz":{"source":"iana","extensions":["gv"]},"text/vnd.hgl":{"source":"iana"},"text/vnd.in3d.3dml":{"source":"iana","extensions":["3dml"]},"text/vnd.in3d.spot":{"source":"iana","extensions":["spot"]},"text/vnd.iptc.newsml":{"source":"iana"},"text/vnd.iptc.nitf":{"source":"iana"},"text/vnd.latex-z":{"source":"iana"},"text/vnd.motorola.reflex":{"source":"iana"},"text/vnd.ms-mediapackage":{"source":"iana"},"text/vnd.net2phone.commcenter.command":{"source":"iana"},"text/vnd.radisys.msml-basic-layout":{"source":"iana"},"text/vnd.si.uricatalogue":{"source":"iana"},"text/vnd.sun.j2me.app-descriptor":{"source":"iana","extensions":["jad"]},"text/vnd.trolltech.linguist":{"source":"iana"},"text/vnd.wap.si":{"source":"iana"},"text/vnd.wap.sl":{"source":"iana"},"text/vnd.wap.wml":{"source":"iana","extensions":["wml"]},"text/vnd.wap.wmlscript":{"source":"iana","extensions":["wmls"]},"text/vtt":{"charset":"UTF-8","compressible":true,"extensions":["vtt"]},"text/x-asm":{"source":"apache","extensions":["s","asm"]},"text/x-c":{"source":"apache","extensions":["c","cc","cxx","cpp","h","hh","dic"]},"text/x-component":{"source":"nginx","extensions":["htc"]},"text/x-fortran":{"source":"apache","extensions":["f","for","f77","f90"]},"text/x-gwt-rpc":{"compressible":true},"text/x-handlebars-template":{"extensions":["hbs"]},"text/x-java-source":{"source":"apache","extensions":["java"]},"text/x-jquery-tmpl":{"compressible":true},"text/x-lua":{"extensions":["lua"]},"text/x-markdown":{"compressible":true,"extensions":["mkd"]},"text/x-nfo":{"source":"apache","extensions":["nfo"]},"text/x-opml":{"source":"apache","extensions":["opml"]},"text/x-org":{"compressible":true,"extensions":["org"]},"text/x-pascal":{"source":"apache","extensions":["p","pas"]},"text/x-processing":{"compressible":true,"extensions":["pde"]},"text/x-sass":{"extensions":["sass"]},"text/x-scss":{"extensions":["scss"]},"text/x-setext":{"source":"apache","extensions":["etx"]},"text/x-sfv":{"source":"apache","extensions":["sfv"]},"text/x-suse-ymp":{"compressible":true,"extensions":["ymp"]},"text/x-uuencode":{"source":"apache","extensions":["uu"]},"text/x-vcalendar":{"source":"apache","extensions":["vcs"]},"text/x-vcard":{"source":"apache","extensions":["vcf"]},"text/xml":{"source":"iana","compressible":true,"extensions":["xml"]},"text/xml-external-parsed-entity":{"source":"iana"},"text/yaml":{"extensions":["yaml","yml"]},"video/1d-interleaved-parityfec":{"source":"iana"},"video/3gpp":{"source":"iana","extensions":["3gp","3gpp"]},"video/3gpp-tt":{"source":"iana"},"video/3gpp2":{"source":"iana","extensions":["3g2"]},"video/bmpeg":{"source":"iana"},"video/bt656":{"source":"iana"},"video/celb":{"source":"iana"},"video/dv":{"source":"iana"},"video/encaprtp":{"source":"iana"},"video/h261":{"source":"iana","extensions":["h261"]},"video/h263":{"source":"iana","extensions":["h263"]},"video/h263-1998":{"source":"iana"},"video/h263-2000":{"source":"iana"},"video/h264":{"source":"iana","extensions":["h264"]},"video/h264-rcdo":{"source":"iana"},"video/h264-svc":{"source":"iana"},"video/h265":{"source":"iana"},"video/iso.segment":{"source":"iana"},"video/jpeg":{"source":"iana","extensions":["jpgv"]},"video/jpeg2000":{"source":"iana"},"video/jpm":{"source":"apache","extensions":["jpm","jpgm"]},"video/mj2":{"source":"iana","extensions":["mj2","mjp2"]},"video/mp1s":{"source":"iana"},"video/mp2p":{"source":"iana"},"video/mp2t":{"source":"iana","extensions":["ts"]},"video/mp4":{"source":"iana","compressible":false,"extensions":["mp4","mp4v","mpg4"]},"video/mp4v-es":{"source":"iana"},"video/mpeg":{"source":"iana","compressible":false,"extensions":["mpeg","mpg","mpe","m1v","m2v"]},"video/mpeg4-generic":{"source":"iana"},"video/mpv":{"source":"iana"},"video/nv":{"source":"iana"},"video/ogg":{"source":"iana","compressible":false,"extensions":["ogv"]},"video/parityfec":{"source":"iana"},"video/pointer":{"source":"iana"},"video/quicktime":{"source":"iana","compressible":false,"extensions":["qt","mov"]},"video/raptorfec":{"source":"iana"},"video/raw":{"source":"iana"},"video/rtp-enc-aescm128":{"source":"iana"},"video/rtploopback":{"source":"iana"},"video/rtx":{"source":"iana"},"video/smpte291":{"source":"iana"},"video/smpte292m":{"source":"iana"},"video/ulpfec":{"source":"iana"},"video/vc1":{"source":"iana"},"video/vnd.cctv":{"source":"iana"},"video/vnd.dece.hd":{"source":"iana","extensions":["uvh","uvvh"]},"video/vnd.dece.mobile":{"source":"iana","extensions":["uvm","uvvm"]},"video/vnd.dece.mp4":{"source":"iana"},"video/vnd.dece.pd":{"source":"iana","extensions":["uvp","uvvp"]},"video/vnd.dece.sd":{"source":"iana","extensions":["uvs","uvvs"]},"video/vnd.dece.video":{"source":"iana","extensions":["uvv","uvvv"]},"video/vnd.directv.mpeg":{"source":"iana"},"video/vnd.directv.mpeg-tts":{"source":"iana"},"video/vnd.dlna.mpeg-tts":{"source":"iana"},"video/vnd.dvb.file":{"source":"iana","extensions":["dvb"]},"video/vnd.fvt":{"source":"iana","extensions":["fvt"]},"video/vnd.hns.video":{"source":"iana"},"video/vnd.iptvforum.1dparityfec-1010":{"source":"iana"},"video/vnd.iptvforum.1dparityfec-2005":{"source":"iana"},"video/vnd.iptvforum.2dparityfec-1010":{"source":"iana"},"video/vnd.iptvforum.2dparityfec-2005":{"source":"iana"},"video/vnd.iptvforum.ttsavc":{"source":"iana"},"video/vnd.iptvforum.ttsmpeg2":{"source":"iana"},"video/vnd.motorola.video":{"source":"iana"},"video/vnd.motorola.videop":{"source":"iana"},"video/vnd.mpegurl":{"source":"iana","extensions":["mxu","m4u"]},"video/vnd.ms-playready.media.pyv":{"source":"iana","extensions":["pyv"]},"video/vnd.nokia.interleaved-multimedia":{"source":"iana"},"video/vnd.nokia.mp4vr":{"source":"iana"},"video/vnd.nokia.videovoip":{"source":"iana"},"video/vnd.objectvideo":{"source":"iana"},"video/vnd.radgamettools.bink":{"source":"iana"},"video/vnd.radgamettools.smacker":{"source":"iana"},"video/vnd.sealed.mpeg1":{"source":"iana"},"video/vnd.sealed.mpeg4":{"source":"iana"},"video/vnd.sealed.swf":{"source":"iana"},"video/vnd.sealedmedia.softseal.mov":{"source":"iana"},"video/vnd.uvvu.mp4":{"source":"iana","extensions":["uvu","uvvu"]},"video/vnd.vivo":{"source":"iana","extensions":["viv"]},"video/vp8":{"source":"iana"},"video/webm":{"source":"apache","compressible":false,"extensions":["webm"]},"video/x-f4v":{"source":"apache","extensions":["f4v"]},"video/x-fli":{"source":"apache","extensions":["fli"]},"video/x-flv":{"source":"apache","compressible":false,"extensions":["flv"]},"video/x-m4v":{"source":"apache","extensions":["m4v"]},"video/x-matroska":{"source":"apache","compressible":false,"extensions":["mkv","mk3d","mks"]},"video/x-mng":{"source":"apache","extensions":["mng"]},"video/x-ms-asf":{"source":"apache","extensions":["asf","asx"]},"video/x-ms-vob":{"source":"apache","extensions":["vob"]},"video/x-ms-wm":{"source":"apache","extensions":["wm"]},"video/x-ms-wmv":{"source":"apache","compressible":false,"extensions":["wmv"]},"video/x-ms-wmx":{"source":"apache","extensions":["wmx"]},"video/x-ms-wvx":{"source":"apache","extensions":["wvx"]},"video/x-msvideo":{"source":"apache","extensions":["avi"]},"video/x-sgi-movie":{"source":"apache","extensions":["movie"]},"video/x-smv":{"source":"apache","extensions":["smv"]},"x-conference/x-cooltalk":{"source":"apache","extensions":["ice"]},"x-shader/x-fragment":{"compressible":true},"x-shader/x-vertex":{"compressible":true}}
-
-/***/ }),
-/* 759 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*!
- * mime-db
- * Copyright(c) 2014 Jonathan Ong
- * MIT Licensed
- */
-
-/**
- * Module exports.
- */
-
-module.exports = __webpack_require__(758)
-
-
-/***/ }),
-/* 760 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = (to, from) => {
-	// TODO: use `Reflect.ownKeys()` when targeting Node.js 6
-	for (const prop of Object.getOwnPropertyNames(from).concat(Object.getOwnPropertySymbols(from))) {
-		Object.defineProperty(to, prop, Object.getOwnPropertyDescriptor(from, prop));
-	}
-
-	return to;
-};
-
-
-/***/ }),
-/* 761 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-const mkdirp = __webpack_require__(145)
-
-module.exports = function (dir, opts) {
-  return new Promise((resolve, reject) => {
-    mkdirp(dir, opts, (err, made) => err === null ? resolve(made) : reject(err))
-  })
-}
-
-
-/***/ }),
-/* 762 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-var Promise = __webpack_require__(345)
-var fs
-try {
-  fs = __webpack_require__(391)
-} catch(err) {
-  fs = __webpack_require__(5)
-}
-
-var api = [
-  'appendFile',
-  'chmod',
-  'chown',
-  'close',
-  'fchmod',
-  'fchown',
-  'fdatasync',
-  'fstat',
-  'fsync',
-  'ftruncate',
-  'futimes',
-  'lchown',
-  'link',
-  'lstat',
-  'mkdir',
-  'open',
-  'read',
-  'readFile',
-  'readdir',
-  'readlink',
-  'realpath',
-  'rename',
-  'rmdir',
-  'stat',
-  'symlink',
-  'truncate',
-  'unlink',
-  'utimes',
-  'write',
-  'writeFile'
-]
-
-typeof fs.access === 'function' && api.push('access')
-typeof fs.copyFile === 'function' && api.push('copyFile')
-typeof fs.mkdtemp === 'function' && api.push('mkdtemp')
-
-__webpack_require__(951).withCallback(fs, exports, api)
-
-exports.exists = function (filename, callback) {
-  // callback
-  if (typeof callback === 'function') {
-    return fs.stat(filename, function (err) {
-      callback(null, !err);
-    })
-  }
-  // or promise
-  return new Promise(function (resolve) {
-    fs.stat(filename, function (err) {
-      resolve(!err)
-    })
-  })
-}
-
-
-/***/ }),
-/* 763 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*jslint node: true*/
-var toArray = __webpack_require__(750);
-var emojiByName = __webpack_require__(764);
-
-"use strict";
-
-/**
- * regex to parse emoji in a string - finds emoji, e.g. :coffee:
- */
-var emojiNameRegex = /:([a-zA-Z0-9_\-\+]+):/g;
-
-/**
- * regex to trim whitespace
- * use instead of String.prototype.trim() for IE8 supprt
- */
-var trimSpaceRegex = /^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g;
-
-/**
- * Removes colons on either side
- * of the string if present
- * @param  {string} str
- * @return {string}
- */
-function stripColons (str) {
-  var colonIndex = str.indexOf(':');
-  if (colonIndex > -1) {
-    // :emoji: (http://www.emoji-cheat-sheet.com/)
-    if (colonIndex === str.length - 1) {
-      str = str.substring(0, colonIndex);
-      return stripColons(str);
-    } else {
-      str = str.substr(colonIndex + 1);
-      return stripColons(str);
-    }
-  }
-
-  return str;
-}
-
-/**
- * Adds colons to either side
- * of the string
- * @param {string} str
- * @return {string}
- */
-function wrapColons (str) {
-  return (typeof str === 'string' && str.length > 0) ? ':' + str + ':' : str;
-}
-
-/**
- * Ensure that the word is wrapped in colons
- * by only adding them, if they are not there.
- * @param {string} str
- * @return {string}
- */
-function ensureColons (str) {
-  return (typeof str === 'string' && str[0] !== ':') ? wrapColons(str) : str;
-}
-
-// Non spacing mark, some emoticons have them. It's the 'Variant Form',
-// which provides more information so that emoticons can be rendered as
-// more colorful graphics. FE0E is a unicode text version, where as FE0F
-// should be rendered as a graphical version. The code gracefully degrades.
-var NON_SPACING_MARK = String.fromCharCode(65039); // 65039 - '️' - 0xFE0F;
-var nonSpacingRegex = new RegExp(NON_SPACING_MARK, 'g')
-
-// Remove the non-spacing-mark from the code, never send a stripped version
-// to the client, as it kills graphical emoticons.
-function stripNSB (code) {
-  return code.replace(nonSpacingRegex, '');
-};
-
-// Reversed hash table, where as emojiByName contains a { heart: '❤' }
-// dictionary emojiByCode contains { ❤: 'heart' }. The codes are normalized
-// to the text version.
-var emojiByCode = Object.keys(emojiByName).reduce(function(h,k) {
-  h[stripNSB(emojiByName[k])] = k;
-  return h;
-}, {});
-
-/**
- * Emoji namespace
- */
-var Emoji = {
-  emoji: emojiByName,
-};
-
-/**
- * get emoji code from name
- * @param  {string} emoji
- * @return {string}
- */
-Emoji._get = function _get (emoji) {
-  if (emojiByName.hasOwnProperty(emoji)) {
-    return emojiByName[emoji];
-  }
-
-  return ensureColons(emoji);
-};
-
-/**
- * get emoji code from :emoji: string or name
- * @param  {string} emoji
- * @return {string}
- */
-Emoji.get = function get (emoji) {
-  emoji = stripColons(emoji);
-
-  return Emoji._get(emoji);
-};
-
-/**
- * find the emoji by either code or name
- * @param {string} nameOrCode The emoji to find, either `coffee`, `:coffee:` or `☕`;
- * @return {object}
- */
-Emoji.find = function find (nameOrCode) {
-  return Emoji.findByName(nameOrCode) || Emoji.findByCode(nameOrCode);
-};
-
-/**
- * find the emoji by name
- * @param {string} name The emoji to find either `coffee` or `:coffee:`;
- * @return {object}
- */
-Emoji.findByName = function findByName (name) {
-  var stripped = stripColons(name);
-  var emoji = emojiByName[stripped];
-
-  return emoji ? ({ emoji: emoji, key: stripped }) : undefined;
-};
-
-/**
- * find the emoji by code (emoji)
- * @param {string} code The emoji to find; for example `☕` or `☔`
- * @return {object}
- */
-Emoji.findByCode = function findByCode (code) {
-  var stripped = stripNSB(code);
-  var name = emojiByCode[stripped];
-
-  // lookup emoji to ensure the Variant Form is returned
-  return name ? ({ emoji: emojiByName[name], key: name }) : undefined;
-};
-
-
-/**
- * Check if an emoji is known by this library
- * @param {string} nameOrCode The emoji to validate, either `coffee`, `:coffee:` or `☕`;
- * @return {object}
- */
-Emoji.hasEmoji = function hasEmoji (nameOrCode) {
-  return Emoji.hasEmojiByName(nameOrCode) || Emoji.hasEmojiByCode(nameOrCode);
-};
-
-/**
- * Check if an emoji with given name is known by this library
- * @param {string} name The emoji to validate either `coffee` or `:coffee:`;
- * @return {object}
- */
-Emoji.hasEmojiByName = function hasEmojiByName (name) {
-  var result = Emoji.findByName(name);
-  return !!result && result.key === stripColons(name);
-};
-
-/**
- * Check if a given emoji is known by this library
- * @param {string} code The emoji to validate; for example `☕` or `☔`
- * @return {object}
- */
-Emoji.hasEmojiByCode = function hasEmojiByCode (code) {
-  var result = Emoji.findByCode(code);
-  return !!result && stripNSB(result.emoji) === stripNSB(code);
-};
-
-/**
- * get emoji name from code
- * @param  {string} emoji
- * @param  {boolean} includeColons should the result include the ::
- * @return {string}
- */
-Emoji.which = function which (emoji_code, includeColons) {
-  var code = stripNSB(emoji_code);
-  var word = emojiByCode[code];
-
-  return includeColons ? wrapColons(word) : word;
-};
-
-/**
- * emojify a string (replace :emoji: with an emoji)
- * @param  {string} str
- * @param  {function} on_missing (gets emoji name without :: and returns a proper emoji if no emoji was found)
- * @param  {function} format (wrap the returned emoji in a custom element)
- * @return {string}
- */
-Emoji.emojify = function emojify (str, on_missing, format) {
-  if (!str) return '';
-
-  return str.split(emojiNameRegex) // parse emoji via regex
-            .map(function parseEmoji(s, i) {
-              // every second element is an emoji, e.g. "test :fast_forward:" -> [ "test ", "fast_forward" ]
-              if (i % 2 === 0) return s;
-              var emoji = Emoji._get(s);
-              var isMissing = emoji.indexOf(':') > -1;
-
-              if (isMissing && typeof on_missing === 'function') {
-                return on_missing(s);
-              }
-
-              if (!isMissing && typeof format === 'function') {
-                return format(emoji, s);
-              }
-
-              return emoji;
-            })
-            .join('') // convert back to string
-  ;
-};
-
-/**
- * return a random emoji
- * @return {string}
- */
-Emoji.random = function random () {
-  var emojiKeys = Object.keys(emojiByName);
-  var randomIndex = Math.floor(Math.random() * emojiKeys.length);
-  var key = emojiKeys[randomIndex];
-  var emoji = Emoji._get(key);
-  return { key: key, emoji: emoji };
-}
-
-/**
- *  return an collection of potential emoji matches
- *  @param {string} str
- *  @return {Array.<Object>}
- */
-Emoji.search = function search (str) {
-  var emojiKeys = Object.keys(emojiByName);
-  var matcher = stripColons(str)
-  var matchingKeys = emojiKeys.filter(function(key) {
-    return key.toString().indexOf(matcher) === 0;
-  });
-  return matchingKeys.map(function(key) {
-    return {
-      key: key,
-      emoji: Emoji._get(key),
-    };
-  });
-}
-
-/**
- * unemojify a string (replace emoji with :emoji:)
- * @param  {string} str
- * @return {string}
- */
-Emoji.unemojify = function unemojify (str) {
-  if (!str) return '';
-  var words = toArray(str);
-
-  return words.map(function(word) {
-    return Emoji.which(word, true) || word;
-  }).join('');
-};
-
-/**
- * replace emojis with replacement value
- * @param {string} str
- * @param {function|string} the string or callback function to replace the emoji with
- * @param {boolean} should trailing whitespaces be cleaned? Defaults false
- * @return {string}
- */
-Emoji.replace = function replace (str, replacement, cleanSpaces) {
-  if (!str) return '';
-
-  var replace = typeof replacement === 'function' ? replacement : function() { return replacement; };
-  var words = toArray(str);
-
-  var replaced = words.map(function(word, idx) {
-    var emoji = Emoji.findByCode(word);
-    
-    if (emoji && cleanSpaces && words[idx + 1] === ' ') {
-      words[idx + 1] = '';
-    }
-
-    return emoji ? replace(emoji) : word;
-  }).join('');
-
-  return cleanSpaces ? replaced.replace(trimSpaceRegex, '') : replaced;
-};
-
-
-/**
- * remove all emojis from a string
- * @param {string} str
- * @return {string}
- */
-Emoji.strip = function strip (str) {
-  return Emoji.replace(str, '', true);
-};
-
-module.exports = Emoji;
-
-
-/***/ }),
-/* 764 */
-/***/ (function(module, exports) {
-
-module.exports = {"100":"💯","1234":"🔢","interrobang":"⁉️","tm":"™️","information_source":"ℹ️","left_right_arrow":"↔️","arrow_up_down":"↕️","arrow_upper_left":"↖️","arrow_upper_right":"↗️","arrow_lower_right":"↘️","arrow_lower_left":"↙️","keyboard":"⌨","sunny":"☀️","cloud":"☁️","umbrella":"☔️","showman":"☃","comet":"☄","ballot_box_with_check":"☑️","coffee":"☕️","shamrock":"☘","skull_and_crossbones":"☠","radioactive_sign":"☢","biohazard_sign":"☣","orthodox_cross":"☦","wheel_of_dharma":"☸","white_frowning_face":"☹","aries":"♈️","taurus":"♉️","sagittarius":"♐️","capricorn":"♑️","aquarius":"♒️","pisces":"♓️","spades":"♠️","clubs":"♣️","hearts":"♥️","diamonds":"♦️","hotsprings":"♨️","hammer_and_pick":"⚒","anchor":"⚓️","crossed_swords":"⚔","scales":"⚖","alembic":"⚗","gear":"⚙","scissors":"✂️","white_check_mark":"✅","airplane":"✈️","email":"✉️","envelope":"✉️","black_nib":"✒️","heavy_check_mark":"✔️","heavy_multiplication_x":"✖️","star_of_david":"✡","sparkles":"✨","eight_spoked_asterisk":"✳️","eight_pointed_black_star":"✴️","snowflake":"❄️","sparkle":"❇️","question":"❓","grey_question":"❔","grey_exclamation":"❕","exclamation":"❗️","heavy_exclamation_mark":"❗️","heavy_heart_exclamation_mark_ornament":"❣","heart":"❤️","heavy_plus_sign":"➕","heavy_minus_sign":"➖","heavy_division_sign":"➗","arrow_heading_up":"⤴️","arrow_heading_down":"⤵️","wavy_dash":"〰️","congratulations":"㊗️","secret":"㊙️","copyright":"©️","registered":"®️","bangbang":"‼️","leftwards_arrow_with_hook":"↩️","arrow_right_hook":"↪️","watch":"⌚️","hourglass":"⌛️","fast_forward":"⏩","rewind":"⏪","arrow_double_up":"⏫","arrow_double_down":"⏬","black_right_pointing_double_triangle_with_vertical_bar":"⏭","black_left_pointing_double_triangle_with_vertical_bar":"⏮","black_right_pointing_triangle_with_double_vertical_bar":"⏯","alarm_clock":"⏰","stopwatch":"⏱","timer_clock":"⏲","hourglass_flowing_sand":"⏳","double_vertical_bar":"⏸","black_square_for_stop":"⏹","black_circle_for_record":"⏺","m":"Ⓜ️","black_small_square":"▪️","white_small_square":"▫️","arrow_forward":"▶️","arrow_backward":"◀️","white_medium_square":"◻️","black_medium_square":"◼️","white_medium_small_square":"◽️","black_medium_small_square":"◾️","phone":"☎️","telephone":"☎️","point_up":"☝️","star_and_crescent":"☪","peace_symbol":"☮","yin_yang":"☯","relaxed":"☺️","gemini":"♊️","cancer":"♋️","leo":"♌️","virgo":"♍️","libra":"♎️","scorpius":"♏️","recycle":"♻️","wheelchair":"♿️","atom_symbol":"⚛","fleur_de_lis":"⚜","warning":"⚠️","zap":"⚡️","white_circle":"⚪️","black_circle":"⚫️","coffin":"⚰","funeral_urn":"⚱","soccer":"⚽️","baseball":"⚾️","snowman":"⛄️","partly_sunny":"⛅️","thunder_cloud_and_rain":"⛈","ophiuchus":"⛎","pick":"⛏","helmet_with_white_cross":"⛑","chains":"⛓","no_entry":"⛔️","shinto_shrine":"⛩","church":"⛪️","mountain":"⛰","umbrella_on_ground":"⛱","fountain":"⛲️","golf":"⛳️","ferry":"⛴","boat":"⛵️","sailboat":"⛵️","skier":"⛷","ice_skate":"⛸","person_with_ball":"⛹","tent":"⛺️","fuelpump":"⛽️","fist":"✊","hand":"✋","raised_hand":"✋","v":"✌️","writing_hand":"✍","pencil2":"✏️","latin_cross":"✝","x":"❌","negative_squared_cross_mark":"❎","arrow_right":"➡️","curly_loop":"➰","loop":"➿","arrow_left":"⬅️","arrow_up":"⬆️","arrow_down":"⬇️","black_large_square":"⬛️","white_large_square":"⬜️","star":"⭐️","o":"⭕️","part_alternation_mark":"〽️","mahjong":"🀄️","black_joker":"🃏","a":"🅰️","b":"🅱️","o2":"🅾️","parking":"🅿️","ab":"🆎","cl":"🆑","cool":"🆒","free":"🆓","id":"🆔","new":"🆕","ng":"🆖","ok":"🆗","sos":"🆘","up":"🆙","vs":"🆚","koko":"🈁","sa":"🈂️","u7121":"🈚️","u6307":"🈯️","u7981":"🈲","u7a7a":"🈳","u5408":"🈴","u6e80":"🈵","u6709":"🈶","u6708":"🈷️","u7533":"🈸","u5272":"🈹","u55b6":"🈺","ideograph_advantage":"🉐","accept":"🉑","cyclone":"🌀","foggy":"🌁","closed_umbrella":"🌂","night_with_stars":"🌃","sunrise_over_mountains":"🌄","sunrise":"🌅","city_sunset":"🌆","city_sunrise":"🌇","rainbow":"🌈","bridge_at_night":"🌉","ocean":"🌊","volcano":"🌋","milky_way":"🌌","earth_africa":"🌍","earth_americas":"🌎","earth_asia":"🌏","globe_with_meridians":"🌐","new_moon":"🌑","waxing_crescent_moon":"🌒","first_quarter_moon":"🌓","moon":"🌔","waxing_gibbous_moon":"🌔","full_moon":"🌕","waning_gibbous_moon":"🌖","last_quarter_moon":"🌗","waning_crescent_moon":"🌘","crescent_moon":"🌙","new_moon_with_face":"🌚","first_quarter_moon_with_face":"🌛","last_quarter_moon_with_face":"🌜","full_moon_with_face":"🌝","sun_with_face":"🌞","star2":"🌟","stars":"🌠","thermometer":"🌡","mostly_sunny":"🌤","sun_small_cloud":"🌤","barely_sunny":"🌥","sun_behind_cloud":"🌥","partly_sunny_rain":"🌦","sun_behind_rain_cloud":"🌦","rain_cloud":"🌧","snow_cloud":"🌨","lightning":"🌩","lightning_cloud":"🌩","tornado":"🌪","tornado_cloud":"🌪","fog":"🌫","wind_blowing_face":"🌬","hotdog":"🌭","taco":"🌮","burrito":"🌯","chestnut":"🌰","seedling":"🌱","evergreen_tree":"🌲","deciduous_tree":"🌳","palm_tree":"🌴","cactus":"🌵","hot_pepper":"🌶","tulip":"🌷","cherry_blossom":"🌸","rose":"🌹","hibiscus":"🌺","sunflower":"🌻","blossom":"🌼","corn":"🌽","ear_of_rice":"🌾","herb":"🌿","four_leaf_clover":"🍀","maple_leaf":"🍁","fallen_leaf":"🍂","leaves":"🍃","mushroom":"🍄","tomato":"🍅","eggplant":"🍆","grapes":"🍇","melon":"🍈","watermelon":"🍉","tangerine":"🍊","lemon":"🍋","banana":"🍌","pineapple":"🍍","apple":"🍎","green_apple":"🍏","pear":"🍐","peach":"🍑","cherries":"🍒","strawberry":"🍓","hamburger":"🍔","pizza":"🍕","meat_on_bone":"🍖","poultry_leg":"🍗","rice_cracker":"🍘","rice_ball":"🍙","rice":"🍚","curry":"🍛","ramen":"🍜","spaghetti":"🍝","bread":"🍞","fries":"🍟","sweet_potato":"🍠","dango":"🍡","oden":"🍢","sushi":"🍣","fried_shrimp":"🍤","fish_cake":"🍥","icecream":"🍦","shaved_ice":"🍧","ice_cream":"🍨","doughnut":"🍩","cookie":"🍪","chocolate_bar":"🍫","candy":"🍬","lollipop":"🍭","custard":"🍮","honey_pot":"🍯","cake":"🍰","bento":"🍱","stew":"🍲","egg":"🍳","fork_and_knife":"🍴","tea":"🍵","sake":"🍶","wine_glass":"🍷","cocktail":"🍸","tropical_drink":"🍹","beer":"🍺","beers":"🍻","baby_bottle":"🍼","knife_fork_plate":"🍽","champagne":"🍾","popcorn":"🍿","ribbon":"🎀","gift":"🎁","birthday":"🎂","jack_o_lantern":"🎃","christmas_tree":"🎄","santa":"🎅","fireworks":"🎆","sparkler":"🎇","balloon":"🎈","tada":"🎉","confetti_ball":"🎊","tanabata_tree":"🎋","crossed_flags":"🎌","bamboo":"🎍","dolls":"🎎","flags":"🎏","wind_chime":"🎐","rice_scene":"🎑","school_satchel":"🎒","mortar_board":"🎓","medal":"🎖","reminder_ribbon":"🎗","studio_microphone":"🎙","level_slider":"🎚","control_knobs":"🎛","film_frames":"🎞","admission_tickets":"🎟","carousel_horse":"🎠","ferris_wheel":"🎡","roller_coaster":"🎢","fishing_pole_and_fish":"🎣","microphone":"🎤","movie_camera":"🎥","cinema":"🎦","headphones":"🎧","art":"🎨","tophat":"🎩","circus_tent":"🎪","ticket":"🎫","clapper":"🎬","performing_arts":"🎭","video_game":"🎮","dart":"🎯","slot_machine":"🎰","8ball":"🎱","game_die":"🎲","bowling":"🎳","flower_playing_cards":"🎴","musical_note":"🎵","notes":"🎶","saxophone":"🎷","guitar":"🎸","musical_keyboard":"🎹","trumpet":"🎺","violin":"🎻","musical_score":"🎼","running_shirt_with_sash":"🎽","tennis":"🎾","ski":"🎿","basketball":"🏀","checkered_flag":"🏁","snowboarder":"🏂","runner":"🏃","running":"🏃","surfer":"🏄","sports_medal":"🏅","trophy":"🏆","horse_racing":"🏇","football":"🏈","rugby_football":"🏉","swimmer":"🏊","weight_lifter":"🏋","golfer":"🏌","racing_motorcycle":"🏍","racing_car":"🏎","cricket_bat_and_ball":"🏏","volleyball":"🏐","field_hockey_stick_and_ball":"🏑","ice_hockey_stick_and_puck":"🏒","table_tennis_paddle_and_ball":"🏓","snow_capped_mountain":"🏔","camping":"🏕","beach_with_umbrella":"🏖","building_construction":"🏗","house_buildings":"🏘","cityscape":"🏙","derelict_house_building":"🏚","classical_building":"🏛","desert":"🏜","desert_island":"🏝","national_park":"🏞","stadium":"🏟","house":"🏠","house_with_garden":"🏡","office":"🏢","post_office":"🏣","european_post_office":"🏤","hospital":"🏥","bank":"🏦","atm":"🏧","hotel":"🏨","love_hotel":"🏩","convenience_store":"🏪","school":"🏫","department_store":"🏬","factory":"🏭","izakaya_lantern":"🏮","lantern":"🏮","japanese_castle":"🏯","european_castle":"🏰","waving_white_flag":"🏳","waving_black_flag":"🏴","rosette":"🏵","label":"🏷","badminton_racquet_and_shuttlecock":"🏸","bow_and_arrow":"🏹","amphora":"🏺","skin-tone-2":"🏻","skin-tone-3":"🏼","skin-tone-4":"🏽","skin-tone-5":"🏾","skin-tone-6":"🏿","rat":"🐀","mouse2":"🐁","ox":"🐂","water_buffalo":"🐃","cow2":"🐄","tiger2":"🐅","leopard":"🐆","rabbit2":"🐇","cat2":"🐈","dragon":"🐉","crocodile":"🐊","whale2":"🐋","snail":"🐌","snake":"🐍","racehorse":"🐎","ram":"🐏","goat":"🐐","sheep":"🐑","monkey":"🐒","rooster":"🐓","chicken":"🐔","dog2":"🐕","pig2":"🐖","boar":"🐗","elephant":"🐘","octopus":"🐙","shell":"🐚","bug":"🐛","ant":"🐜","bee":"🐝","honeybee":"🐝","beetle":"🐞","fish":"🐟","tropical_fish":"🐠","blowfish":"🐡","turtle":"🐢","hatching_chick":"🐣","baby_chick":"🐤","hatched_chick":"🐥","bird":"🐦","penguin":"🐧","koala":"🐨","poodle":"🐩","dromedary_camel":"🐪","camel":"🐫","dolphin":"🐬","flipper":"🐬","mouse":"🐭","cow":"🐮","tiger":"🐯","rabbit":"🐰","cat":"🐱","dragon_face":"🐲","whale":"🐳","horse":"🐴","monkey_face":"🐵","dog":"🐶","pig":"🐷","frog":"🐸","hamster":"🐹","wolf":"🐺","bear":"🐻","panda_face":"🐼","pig_nose":"🐽","feet":"🐾","paw_prints":"🐾","chipmunk":"🐿","eyes":"👀","eye":"👁","ear":"👂","nose":"👃","lips":"👄","tongue":"👅","point_up_2":"👆","point_down":"👇","point_left":"👈","point_right":"👉","facepunch":"👊","punch":"👊","wave":"👋","ok_hand":"👌","+1":"👍","thumbsup":"👍","-1":"👎","thumbsdown":"👎","clap":"👏","open_hands":"👐","crown":"👑","womans_hat":"👒","eyeglasses":"👓","necktie":"👔","shirt":"👕","tshirt":"👕","jeans":"👖","dress":"👗","kimono":"👘","bikini":"👙","womans_clothes":"👚","purse":"👛","handbag":"👜","pouch":"👝","mans_shoe":"👞","shoe":"👞","athletic_shoe":"👟","high_heel":"👠","sandal":"👡","boot":"👢","footprints":"👣","bust_in_silhouette":"👤","busts_in_silhouette":"👥","boy":"👦","girl":"👧","man":"👨","woman":"👩","family":"👨‍👩‍👦","man-woman-boy":"👨‍👩‍👦","couple":"👫","man_and_woman_holding_hands":"👫","two_men_holding_hands":"👬","two_women_holding_hands":"👭","cop":"👮","dancers":"👯","bride_with_veil":"👰","person_with_blond_hair":"👱","man_with_gua_pi_mao":"👲","man_with_turban":"👳","older_man":"👴","older_woman":"👵","baby":"👶","construction_worker":"👷","princess":"👸","japanese_ogre":"👹","japanese_goblin":"👺","ghost":"👻","angel":"👼","alien":"👽","space_invader":"👾","imp":"👿","skull":"💀","information_desk_person":"💁","guardsman":"💂","dancer":"💃","lipstick":"💄","nail_care":"💅","massage":"💆","haircut":"💇","barber":"💈","syringe":"💉","pill":"💊","kiss":"💋","love_letter":"💌","ring":"💍","gem":"💎","couplekiss":"💏","bouquet":"💐","couple_with_heart":"💑","wedding":"💒","heartbeat":"💓","broken_heart":"💔","two_hearts":"💕","sparkling_heart":"💖","heartpulse":"💗","cupid":"💘","blue_heart":"💙","green_heart":"💚","yellow_heart":"💛","purple_heart":"💜","gift_heart":"💝","revolving_hearts":"💞","heart_decoration":"💟","diamond_shape_with_a_dot_inside":"💠","bulb":"💡","anger":"💢","bomb":"💣","zzz":"💤","boom":"💥","collision":"💥","sweat_drops":"💦","droplet":"💧","dash":"💨","hankey":"💩","poop":"💩","shit":"💩","muscle":"💪","dizzy":"💫","speech_balloon":"💬","thought_balloon":"💭","white_flower":"💮","moneybag":"💰","currency_exchange":"💱","heavy_dollar_sign":"💲","credit_card":"💳","yen":"💴","dollar":"💵","euro":"💶","pound":"💷","money_with_wings":"💸","chart":"💹","seat":"💺","computer":"💻","briefcase":"💼","minidisc":"💽","floppy_disk":"💾","cd":"💿","dvd":"📀","file_folder":"📁","open_file_folder":"📂","page_with_curl":"📃","page_facing_up":"📄","date":"📅","calendar":"📆","card_index":"📇","chart_with_upwards_trend":"📈","chart_with_downwards_trend":"📉","bar_chart":"📊","clipboard":"📋","pushpin":"📌","round_pushpin":"📍","paperclip":"📎","straight_ruler":"📏","triangular_ruler":"📐","bookmark_tabs":"📑","ledger":"📒","notebook":"📓","notebook_with_decorative_cover":"📔","closed_book":"📕","book":"📖","open_book":"📖","green_book":"📗","blue_book":"📘","orange_book":"📙","books":"📚","name_badge":"📛","scroll":"📜","memo":"📝","pencil":"📝","telephone_receiver":"📞","pager":"📟","fax":"📠","satellite":"🛰","loudspeaker":"📢","mega":"📣","outbox_tray":"📤","inbox_tray":"📥","package":"📦","e-mail":"📧","incoming_envelope":"📨","envelope_with_arrow":"📩","mailbox_closed":"📪","mailbox":"📫","mailbox_with_mail":"📬","mailbox_with_no_mail":"📭","postbox":"📮","postal_horn":"📯","newspaper":"📰","iphone":"📱","calling":"📲","vibration_mode":"📳","mobile_phone_off":"📴","no_mobile_phones":"📵","signal_strength":"📶","camera":"📷","camera_with_flash":"📸","video_camera":"📹","tv":"📺","radio":"📻","vhs":"📼","film_projector":"📽","prayer_beads":"📿","twisted_rightwards_arrows":"🔀","repeat":"🔁","repeat_one":"🔂","arrows_clockwise":"🔃","arrows_counterclockwise":"🔄","low_brightness":"🔅","high_brightness":"🔆","mute":"🔇","speaker":"🔈","sound":"🔉","loud_sound":"🔊","battery":"🔋","electric_plug":"🔌","mag":"🔍","mag_right":"🔎","lock_with_ink_pen":"🔏","closed_lock_with_key":"🔐","key":"🔑","lock":"🔒","unlock":"🔓","bell":"🔔","no_bell":"🔕","bookmark":"🔖","link":"🔗","radio_button":"🔘","back":"🔙","end":"🔚","on":"🔛","soon":"🔜","top":"🔝","underage":"🔞","keycap_ten":"🔟","capital_abcd":"🔠","abcd":"🔡","symbols":"🔣","abc":"🔤","fire":"🔥","flashlight":"🔦","wrench":"🔧","hammer":"🔨","nut_and_bolt":"🔩","hocho":"🔪","knife":"🔪","gun":"🔫","microscope":"🔬","telescope":"🔭","crystal_ball":"🔮","six_pointed_star":"🔯","beginner":"🔰","trident":"🔱","black_square_button":"🔲","white_square_button":"🔳","red_circle":"🔴","large_blue_circle":"🔵","large_orange_diamond":"🔶","large_blue_diamond":"🔷","small_orange_diamond":"🔸","small_blue_diamond":"🔹","small_red_triangle":"🔺","small_red_triangle_down":"🔻","arrow_up_small":"🔼","arrow_down_small":"🔽","om_symbol":"🕉","dove_of_peace":"🕊","kaaba":"🕋","mosque":"🕌","synagogue":"🕍","menorah_with_nine_branches":"🕎","clock1":"🕐","clock2":"🕑","clock3":"🕒","clock4":"🕓","clock5":"🕔","clock6":"🕕","clock7":"🕖","clock8":"🕗","clock9":"🕘","clock10":"🕙","clock11":"🕚","clock12":"🕛","clock130":"🕜","clock230":"🕝","clock330":"🕞","clock430":"🕟","clock530":"🕠","clock630":"🕡","clock730":"🕢","clock830":"🕣","clock930":"🕤","clock1030":"🕥","clock1130":"🕦","clock1230":"🕧","candle":"🕯","mantelpiece_clock":"🕰","hole":"🕳","man_in_business_suit_levitating":"🕴","sleuth_or_spy":"🕵","dark_sunglasses":"🕶","spider":"🕷","spider_web":"🕸","joystick":"🕹","linked_paperclips":"🖇","lower_left_ballpoint_pen":"🖊","lower_left_fountain_pen":"🖋","lower_left_paintbrush":"🖌","lower_left_crayon":"🖍","raised_hand_with_fingers_splayed":"🖐","middle_finger":"🖕","reversed_hand_with_middle_finger_extended":"🖕","spock-hand":"🖖","desktop_computer":"🖥","printer":"🖨","three_button_mouse":"🖱","trackball":"🖲","frame_with_picture":"🖼","card_index_dividers":"🗂","card_file_box":"🗃","file_cabinet":"🗄","wastebasket":"🗑","spiral_note_pad":"🗒","spiral_calendar_pad":"🗓","compression":"🗜","old_key":"🗝","rolled_up_newspaper":"🗞","dagger_knife":"🗡","speaking_head_in_silhouette":"🗣","left_speech_bubble":"🗨","right_anger_bubble":"🗯","ballot_box_with_ballot":"🗳","world_map":"🗺","mount_fuji":"🗻","tokyo_tower":"🗼","statue_of_liberty":"🗽","japan":"🗾","moyai":"🗿","grinning":"😀","grin":"😁","joy":"😂","smiley":"😃","smile":"😄","sweat_smile":"😅","laughing":"😆","satisfied":"😆","innocent":"😇","smiling_imp":"😈","wink":"😉","blush":"😊","yum":"😋","relieved":"😌","heart_eyes":"😍","sunglasses":"😎","smirk":"😏","neutral_face":"😐","expressionless":"😑","unamused":"😒","sweat":"😓","pensive":"😔","confused":"😕","confounded":"😖","kissing":"😗","kissing_heart":"😘","kissing_smiling_eyes":"😙","kissing_closed_eyes":"😚","stuck_out_tongue":"😛","stuck_out_tongue_winking_eye":"😜","stuck_out_tongue_closed_eyes":"😝","disappointed":"😞","worried":"😟","angry":"😠","rage":"😡","cry":"😢","persevere":"😣","triumph":"😤","disappointed_relieved":"😥","frowning":"😦","anguished":"😧","fearful":"😨","weary":"😩","sleepy":"😪","tired_face":"😫","grimacing":"😬","sob":"😭","open_mouth":"😮","hushed":"😯","cold_sweat":"😰","scream":"😱","astonished":"😲","flushed":"😳","sleeping":"😴","dizzy_face":"😵","no_mouth":"😶","mask":"😷","smile_cat":"😸","joy_cat":"😹","smiley_cat":"😺","heart_eyes_cat":"😻","smirk_cat":"😼","kissing_cat":"😽","pouting_cat":"😾","crying_cat_face":"😿","scream_cat":"🙀","slightly_frowning_face":"🙁","slightly_smiling_face":"🙂","upside_down_face":"🙃","face_with_rolling_eyes":"🙄","no_good":"🙅","ok_woman":"🙆","bow":"🙇","see_no_evil":"🙈","hear_no_evil":"🙉","speak_no_evil":"🙊","raising_hand":"🙋","raised_hands":"🙌","person_frowning":"🙍","person_with_pouting_face":"🙎","pray":"🙏","rocket":"🚀","helicopter":"🚁","steam_locomotive":"🚂","railway_car":"🚃","bullettrain_side":"🚄","bullettrain_front":"🚅","train2":"🚆","metro":"🚇","light_rail":"🚈","station":"🚉","tram":"🚊","train":"🚋","bus":"🚌","oncoming_bus":"🚍","trolleybus":"🚎","busstop":"🚏","minibus":"🚐","ambulance":"🚑","fire_engine":"🚒","police_car":"🚓","oncoming_police_car":"🚔","taxi":"🚕","oncoming_taxi":"🚖","car":"🚗","red_car":"🚗","oncoming_automobile":"🚘","blue_car":"🚙","truck":"🚚","articulated_lorry":"🚛","tractor":"🚜","monorail":"🚝","mountain_railway":"🚞","suspension_railway":"🚟","mountain_cableway":"🚠","aerial_tramway":"🚡","ship":"🚢","rowboat":"🚣","speedboat":"🚤","traffic_light":"🚥","vertical_traffic_light":"🚦","construction":"🚧","rotating_light":"🚨","triangular_flag_on_post":"🚩","door":"🚪","no_entry_sign":"🚫","smoking":"🚬","no_smoking":"🚭","put_litter_in_its_place":"🚮","do_not_litter":"🚯","potable_water":"🚰","non-potable_water":"🚱","bike":"🚲","no_bicycles":"🚳","bicyclist":"🚴","mountain_bicyclist":"🚵","walking":"🚶","no_pedestrians":"🚷","children_crossing":"🚸","mens":"🚹","womens":"🚺","restroom":"🚻","baby_symbol":"🚼","toilet":"🚽","wc":"🚾","shower":"🚿","bath":"🛀","bathtub":"🛁","passport_control":"🛂","customs":"🛃","baggage_claim":"🛄","left_luggage":"🛅","couch_and_lamp":"🛋","sleeping_accommodation":"🛌","shopping_bags":"🛍","bellhop_bell":"🛎","bed":"🛏","place_of_worship":"🛐","hammer_and_wrench":"🛠","shield":"🛡","oil_drum":"🛢","motorway":"🛣","railway_track":"🛤","motor_boat":"🛥","small_airplane":"🛩","airplane_departure":"🛫","airplane_arriving":"🛬","passenger_ship":"🛳","zipper_mouth_face":"🤐","money_mouth_face":"🤑","face_with_thermometer":"🤒","nerd_face":"🤓","thinking_face":"🤔","face_with_head_bandage":"🤕","robot_face":"🤖","hugging_face":"🤗","the_horns":"🤘","sign_of_the_horns":"🤘","crab":"🦀","lion_face":"🦁","scorpion":"🦂","turkey":"🦃","unicorn_face":"🦄","cheese_wedge":"🧀","hash":"#️⃣","keycap_star":"*⃣","zero":"0️⃣","one":"1️⃣","two":"2️⃣","three":"3️⃣","four":"4️⃣","five":"5️⃣","six":"6️⃣","seven":"7️⃣","eight":"8️⃣","nine":"9️⃣","flag-ac":"🇦🇨","flag-ad":"🇦🇩","flag-ae":"🇦🇪","flag-af":"🇦🇫","flag-ag":"🇦🇬","flag-ai":"🇦🇮","flag-al":"🇦🇱","flag-am":"🇦🇲","flag-ao":"🇦🇴","flag-aq":"🇦🇶","flag-ar":"🇦🇷","flag-as":"🇦🇸","flag-at":"🇦🇹","flag-au":"🇦🇺","flag-aw":"🇦🇼","flag-ax":"🇦🇽","flag-az":"🇦🇿","flag-ba":"🇧🇦","flag-bb":"🇧🇧","flag-bd":"🇧🇩","flag-be":"🇧🇪","flag-bf":"🇧🇫","flag-bg":"🇧🇬","flag-bh":"🇧🇭","flag-bi":"🇧🇮","flag-bj":"🇧🇯","flag-bl":"🇧🇱","flag-bm":"🇧🇲","flag-bn":"🇧🇳","flag-bo":"🇧🇴","flag-bq":"🇧🇶","flag-br":"🇧🇷","flag-bs":"🇧🇸","flag-bt":"🇧🇹","flag-bv":"🇧🇻","flag-bw":"🇧🇼","flag-by":"🇧🇾","flag-bz":"🇧🇿","flag-ca":"🇨🇦","flag-cc":"🇨🇨","flag-cd":"🇨🇩","flag-cf":"🇨🇫","flag-cg":"🇨🇬","flag-ch":"🇨🇭","flag-ci":"🇨🇮","flag-ck":"🇨🇰","flag-cl":"🇨🇱","flag-cm":"🇨🇲","flag-cn":"🇨🇳","cn":"🇨🇳","flag-co":"🇨🇴","flag-cp":"🇨🇵","flag-cr":"🇨🇷","flag-cu":"🇨🇺","flag-cv":"🇨🇻","flag-cw":"🇨🇼","flag-cx":"🇨🇽","flag-cy":"🇨🇾","flag-cz":"🇨🇿","flag-de":"🇩🇪","de":"🇩🇪","flag-dg":"🇩🇬","flag-dj":"🇩🇯","flag-dk":"🇩🇰","flag-dm":"🇩🇲","flag-do":"🇩🇴","flag-dz":"🇩🇿","flag-ea":"🇪🇦","flag-ec":"🇪🇨","flag-ee":"🇪🇪","flag-eg":"🇪🇬","flag-eh":"🇪🇭","flag-er":"🇪🇷","flag-es":"🇪🇸","es":"🇪🇸","flag-et":"🇪🇹","flag-eu":"🇪🇺","flag-fi":"🇫🇮","flag-fj":"🇫🇯","flag-fk":"🇫🇰","flag-fm":"🇫🇲","flag-fo":"🇫🇴","flag-fr":"🇫🇷","fr":"🇫🇷","flag-ga":"🇬🇦","flag-gb":"🇬🇧","gb":"🇬🇧","uk":"🇬🇧","flag-gd":"🇬🇩","flag-ge":"🇬🇪","flag-gf":"🇬🇫","flag-gg":"🇬🇬","flag-gh":"🇬🇭","flag-gi":"🇬🇮","flag-gl":"🇬🇱","flag-gm":"🇬🇲","flag-gn":"🇬🇳","flag-gp":"🇬🇵","flag-gq":"🇬🇶","flag-gr":"🇬🇷","flag-gs":"🇬🇸","flag-gt":"🇬🇹","flag-gu":"🇬🇺","flag-gw":"🇬🇼","flag-gy":"🇬🇾","flag-hk":"🇭🇰","flag-hm":"🇭🇲","flag-hn":"🇭🇳","flag-hr":"🇭🇷","flag-ht":"🇭🇹","flag-hu":"🇭🇺","flag-ic":"🇮🇨","flag-id":"🇮🇩","flag-ie":"🇮🇪","flag-il":"🇮🇱","flag-im":"🇮🇲","flag-in":"🇮🇳","flag-io":"🇮🇴","flag-iq":"🇮🇶","flag-ir":"🇮🇷","flag-is":"🇮🇸","flag-it":"🇮🇹","it":"🇮🇹","flag-je":"🇯🇪","flag-jm":"🇯🇲","flag-jo":"🇯🇴","flag-jp":"🇯🇵","jp":"🇯🇵","flag-ke":"🇰🇪","flag-kg":"🇰🇬","flag-kh":"🇰🇭","flag-ki":"🇰🇮","flag-km":"🇰🇲","flag-kn":"🇰🇳","flag-kp":"🇰🇵","flag-kr":"🇰🇷","kr":"🇰🇷","flag-kw":"🇰🇼","flag-ky":"🇰🇾","flag-kz":"🇰🇿","flag-la":"🇱🇦","flag-lb":"🇱🇧","flag-lc":"🇱🇨","flag-li":"🇱🇮","flag-lk":"🇱🇰","flag-lr":"🇱🇷","flag-ls":"🇱🇸","flag-lt":"🇱🇹","flag-lu":"🇱🇺","flag-lv":"🇱🇻","flag-ly":"🇱🇾","flag-ma":"🇲🇦","flag-mc":"🇲🇨","flag-md":"🇲🇩","flag-me":"🇲🇪","flag-mf":"🇲🇫","flag-mg":"🇲🇬","flag-mh":"🇲🇭","flag-mk":"🇲🇰","flag-ml":"🇲🇱","flag-mm":"🇲🇲","flag-mn":"🇲🇳","flag-mo":"🇲🇴","flag-mp":"🇲🇵","flag-mq":"🇲🇶","flag-mr":"🇲🇷","flag-ms":"🇲🇸","flag-mt":"🇲🇹","flag-mu":"🇲🇺","flag-mv":"🇲🇻","flag-mw":"🇲🇼","flag-mx":"🇲🇽","flag-my":"🇲🇾","flag-mz":"🇲🇿","flag-na":"🇳🇦","flag-nc":"🇳🇨","flag-ne":"🇳🇪","flag-nf":"🇳🇫","flag-ng":"🇳🇬","flag-ni":"🇳🇮","flag-nl":"🇳🇱","flag-no":"🇳🇴","flag-np":"🇳🇵","flag-nr":"🇳🇷","flag-nu":"🇳🇺","flag-nz":"🇳🇿","flag-om":"🇴🇲","flag-pa":"🇵🇦","flag-pe":"🇵🇪","flag-pf":"🇵🇫","flag-pg":"🇵🇬","flag-ph":"🇵🇭","flag-pk":"🇵🇰","flag-pl":"🇵🇱","flag-pm":"🇵🇲","flag-pn":"🇵🇳","flag-pr":"🇵🇷","flag-ps":"🇵🇸","flag-pt":"🇵🇹","flag-pw":"🇵🇼","flag-py":"🇵🇾","flag-qa":"🇶🇦","flag-re":"🇷🇪","flag-ro":"🇷🇴","flag-rs":"🇷🇸","flag-ru":"🇷🇺","ru":"🇷🇺","flag-rw":"🇷🇼","flag-sa":"🇸🇦","flag-sb":"🇸🇧","flag-sc":"🇸🇨","flag-sd":"🇸🇩","flag-se":"🇸🇪","flag-sg":"🇸🇬","flag-sh":"🇸🇭","flag-si":"🇸🇮","flag-sj":"🇸🇯","flag-sk":"🇸🇰","flag-sl":"🇸🇱","flag-sm":"🇸🇲","flag-sn":"🇸🇳","flag-so":"🇸🇴","flag-sr":"🇸🇷","flag-ss":"🇸🇸","flag-st":"🇸🇹","flag-sv":"🇸🇻","flag-sx":"🇸🇽","flag-sy":"🇸🇾","flag-sz":"🇸🇿","flag-ta":"🇹🇦","flag-tc":"🇹🇨","flag-td":"🇹🇩","flag-tf":"🇹🇫","flag-tg":"🇹🇬","flag-th":"🇹🇭","flag-tj":"🇹🇯","flag-tk":"🇹🇰","flag-tl":"🇹🇱","flag-tm":"🇹🇲","flag-tn":"🇹🇳","flag-to":"🇹🇴","flag-tr":"🇹🇷","flag-tt":"🇹🇹","flag-tv":"🇹🇻","flag-tw":"🇹🇼","flag-tz":"🇹🇿","flag-ua":"🇺🇦","flag-ug":"🇺🇬","flag-um":"🇺🇲","flag-us":"🇺🇸","us":"🇺🇸","flag-uy":"🇺🇾","flag-uz":"🇺🇿","flag-va":"🇻🇦","flag-vc":"🇻🇨","flag-ve":"🇻🇪","flag-vg":"🇻🇬","flag-vi":"🇻🇮","flag-vn":"🇻🇳","flag-vu":"🇻🇺","flag-wf":"🇼🇫","flag-ws":"🇼🇸","flag-xk":"🇽🇰","flag-ye":"🇾🇪","flag-yt":"🇾🇹","flag-za":"🇿🇦","flag-zm":"🇿🇲","flag-zw":"🇿🇼","man-man-boy":"👨‍👨‍👦","man-man-boy-boy":"👨‍👨‍👦‍👦","man-man-girl":"👨‍👨‍👧","man-man-girl-boy":"👨‍👨‍👧‍👦","man-man-girl-girl":"👨‍👨‍👧‍👧","man-woman-boy-boy":"👨‍👩‍👦‍👦","man-woman-girl":"👨‍👩‍👧","man-woman-girl-boy":"👨‍👩‍👧‍👦","man-woman-girl-girl":"👨‍👩‍👧‍👧","man-heart-man":"👨‍❤️‍👨","man-kiss-man":"👨‍❤️‍💋‍👨","woman-woman-boy":"👩‍👩‍👦","woman-woman-boy-boy":"👩‍👩‍👦‍👦","woman-woman-girl":"👩‍👩‍👧","woman-woman-girl-boy":"👩‍👩‍👧‍👦","woman-woman-girl-girl":"👩‍👩‍👧‍👧","woman-heart-woman":"👩‍❤️‍👩","woman-kiss-woman":"👩‍❤️‍💋‍👩"}
-
-/***/ }),
-/* 765 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*!
- * normalize-path <https://github.com/jonschlinkert/normalize-path>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-var removeTrailingSeparator = __webpack_require__(796);
-
-module.exports = function normalizePath(str, stripTrailing) {
-  if (typeof str !== 'string') {
-    throw new TypeError('expected a string');
-  }
-  str = str.replace(/[\\\/]+/g, '/');
-  if (stripTrailing !== false) {
-    str = removeTrailingSeparator(str);
-  }
-  return str;
-};
-
-
-/***/ }),
-/* 766 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-let path
-
-class LogicalTree {
-  constructor (name, address, opts) {
-    this.name = name
-    this.version = opts.version
-    this.address = address || ''
-    this.optional = !!opts.optional
-    this.dev = !!opts.dev
-    this.bundled = !!opts.bundled
-    this.resolved = opts.resolved
-    this.integrity = opts.integrity
-    this.dependencies = new Map()
-    this.requiredBy = new Set()
-  }
-
-  get isRoot () { return !this.requiredBy.size }
-
-  addDep (dep) {
-    this.dependencies.set(dep.name, dep)
-    dep.requiredBy.add(this)
-    return this
-  }
-
-  delDep (dep) {
-    this.dependencies.delete(dep.name)
-    dep.requiredBy.delete(this)
-    return this
-  }
-
-  getDep (name) {
-    return this.dependencies.get(name)
-  }
-
-  path (prefix) {
-    if (this.isRoot) {
-      // The address of the root is the prefix itself.
-      return prefix || ''
-    } else {
-      if (!path) { path = __webpack_require__(0) }
-      return path.join(
-        prefix || '',
-        'node_modules',
-        this.address.replace(/:/g, '/node_modules/')
-      )
-    }
-  }
-
-  // This finds cycles _from_ a given node: if some deeper dep has
-  // its own cycle, but that cycle does not refer to this node,
-  // it will return false.
-  hasCycle (_seen, _from) {
-    if (!_seen) { _seen = new Set() }
-    if (!_from) { _from = this }
-    for (let dep of this.dependencies.values()) {
-      if (_seen.has(dep)) { continue }
-      _seen.add(dep)
-      if (dep === _from || dep.hasCycle(_seen, _from)) {
-        return true
-      }
-    }
-    return false
-  }
-
-  forEachAsync (fn, opts, _pending) {
-    if (!opts) { opts = _pending || {} }
-    if (!_pending) { _pending = new Map() }
-    const P = opts.Promise || Promise
-    if (_pending.has(this)) {
-      return P.resolve(this.hasCycle() || _pending.get(this))
-    }
-    const pending = P.resolve().then(() => {
-      return fn(this, () => {
-        return promiseMap(
-          this.dependencies.values(),
-          dep => dep.forEachAsync(fn, opts, _pending),
-          opts
-        )
-      })
-    })
-    _pending.set(this, pending)
-    return pending
-  }
-
-  forEach (fn, _seen) {
-    if (!_seen) { _seen = new Set() }
-    if (_seen.has(this)) { return }
-    _seen.add(this)
-    fn(this, () => {
-      for (let dep of this.dependencies.values()) {
-        dep.forEach(fn, _seen)
-      }
-    })
-  }
-}
-
-module.exports = lockTree
-function lockTree (pkg, pkgLock, opts) {
-  const tree = makeNode(pkg.name, null, pkg)
-  const allDeps = new Map()
-  Array.from(
-    new Set(Object.keys(pkg.devDependencies || {})
-    .concat(Object.keys(pkg.optionalDependencies || {}))
-    .concat(Object.keys(pkg.dependencies || {})))
-  ).forEach(name => {
-    let dep = allDeps.get(name)
-    if (!dep) {
-      const depNode = (pkgLock.dependencies || {})[name]
-      dep = makeNode(name, name, depNode)
-    }
-    addChild(dep, tree, allDeps, pkgLock)
-  })
-  return tree
-}
-
-module.exports.node = makeNode
-function makeNode (name, address, opts) {
-  return new LogicalTree(name, address, opts || {})
-}
-
-function addChild (dep, tree, allDeps, pkgLock) {
-  tree.addDep(dep)
-  allDeps.set(dep.address, dep)
-  const addr = dep.address
-  const lockNode = atAddr(pkgLock, addr)
-  Object.keys(lockNode.requires || {}).forEach(name => {
-    const tdepAddr = reqAddr(pkgLock, name, addr)
-    let tdep = allDeps.get(tdepAddr)
-    if (!tdep) {
-      tdep = makeNode(name, tdepAddr, atAddr(pkgLock, tdepAddr))
-      addChild(tdep, dep, allDeps, pkgLock)
-    } else {
-      dep.addDep(tdep)
-    }
-  })
-}
-
-module.exports._reqAddr = reqAddr
-function reqAddr (pkgLock, name, fromAddr) {
-  const lockNode = atAddr(pkgLock, fromAddr)
-  const child = (lockNode.dependencies || {})[name]
-  if (child) {
-    return `${fromAddr}:${name}`
-  } else {
-    const parts = fromAddr.split(':')
-    while (parts.length) {
-      parts.pop()
-      const joined = parts.join(':')
-      const parent = atAddr(pkgLock, joined)
-      if (parent) {
-        const child = (parent.dependencies || {})[name]
-        if (child) {
-          return `${joined}${parts.length ? ':' : ''}${name}`
-        }
-      }
-    }
-    const err = new Error(`${name} not accessible from ${fromAddr}`)
-    err.pkgLock = pkgLock
-    err.target = name
-    err.from = fromAddr
-    throw err
-  }
-}
-
-module.exports._atAddr = atAddr
-function atAddr (pkgLock, addr) {
-  if (!addr.length) { return pkgLock }
-  const parts = addr.split(':')
-  return parts.reduce((acc, next) => {
-    return acc && (acc.dependencies || {})[next]
-  }, pkgLock)
-}
-
-function promiseMap (arr, fn, opts, _index) {
-  _index = _index || 0
-  const P = (opts && opts.Promise) || Promise
-  if (P.map) {
-    return P.map(arr, fn, opts)
-  } else {
-    if (!(arr instanceof Array)) {
-      arr = Array.from(arr)
-    }
-    if (_index >= arr.length) {
-      return P.resolve()
-    } else {
-      return P.resolve(fn(arr[_index], _index, arr))
-      .then(() => promiseMap(arr, fn, opts, _index + 1))
-    }
-  }
-}
-
-
-/***/ }),
-/* 767 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = Number.isNaN || function (x) {
-	return x !== x;
-};
-
-
-/***/ }),
-/* 768 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var crypto = __webpack_require__(11)
-  , qs = __webpack_require__(196)
-  ;
-
-function sha1 (key, body) {
-  return crypto.createHmac('sha1', key).update(body).digest('base64')
-}
-
-function rsa (key, body) {
-  return crypto.createSign("RSA-SHA1").update(body).sign(key, 'base64');
-}
-
-function rfc3986 (str) {
-  return encodeURIComponent(str)
-    .replace(/!/g,'%21')
-    .replace(/\*/g,'%2A')
-    .replace(/\(/g,'%28')
-    .replace(/\)/g,'%29')
-    .replace(/'/g,'%27')
-    ;
-}
-
-// Maps object to bi-dimensional array
-// Converts { foo: 'A', bar: [ 'b', 'B' ]} to
-// [ ['foo', 'A'], ['bar', 'b'], ['bar', 'B'] ]
-function map (obj) {
-  var key, val, arr = []
-  for (key in obj) {
-    val = obj[key]
-    if (Array.isArray(val))
-      for (var i = 0; i < val.length; i++)
-        arr.push([key, val[i]])
-    else if (typeof val === "object")
-      for (var prop in val)
-        arr.push([key + '[' + prop + ']', val[prop]]);
-    else
-      arr.push([key, val])
-  }
-  return arr
-}
-
-// Compare function for sort
-function compare (a, b) {
-  return a > b ? 1 : a < b ? -1 : 0
-}
-
-function generateBase (httpMethod, base_uri, params) {
-  // adapted from https://dev.twitter.com/docs/auth/oauth and 
-  // https://dev.twitter.com/docs/auth/creating-signature
-
-  // Parameter normalization
-  // http://tools.ietf.org/html/rfc5849#section-3.4.1.3.2
-  var normalized = map(params)
-  // 1.  First, the name and value of each parameter are encoded
-  .map(function (p) {
-    return [ rfc3986(p[0]), rfc3986(p[1] || '') ]
-  })
-  // 2.  The parameters are sorted by name, using ascending byte value
-  //     ordering.  If two or more parameters share the same name, they
-  //     are sorted by their value.
-  .sort(function (a, b) {
-    return compare(a[0], b[0]) || compare(a[1], b[1])
-  })
-  // 3.  The name of each parameter is concatenated to its corresponding
-  //     value using an "=" character (ASCII code 61) as a separator, even
-  //     if the value is empty.
-  .map(function (p) { return p.join('=') })
-   // 4.  The sorted name/value pairs are concatenated together into a
-   //     single string by using an "&" character (ASCII code 38) as
-   //     separator.
-  .join('&')
-
-  var base = [
-    rfc3986(httpMethod ? httpMethod.toUpperCase() : 'GET'),
-    rfc3986(base_uri),
-    rfc3986(normalized)
-  ].join('&')
-
-  return base
-}
-
-function hmacsign (httpMethod, base_uri, params, consumer_secret, token_secret) {
-  var base = generateBase(httpMethod, base_uri, params)
-  var key = [
-    consumer_secret || '',
-    token_secret || ''
-  ].map(rfc3986).join('&')
-
-  return sha1(key, base)
-}
-
-function rsasign (httpMethod, base_uri, params, private_key, token_secret) {
-  var base = generateBase(httpMethod, base_uri, params)
-  var key = private_key || ''
-
-  return rsa(key, base)
-}
-
-function plaintext (consumer_secret, token_secret) {
-  var key = [
-    consumer_secret || '',
-    token_secret || ''
-  ].map(rfc3986).join('&')
-
-  return key
-}
-
-function sign (signMethod, httpMethod, base_uri, params, consumer_secret, token_secret) {
-  var method
-  var skipArgs = 1
-
-  switch (signMethod) {
-    case 'RSA-SHA1':
-      method = rsasign
-      break
-    case 'HMAC-SHA1':
-      method = hmacsign
-      break
-    case 'PLAINTEXT':
-      method = plaintext
-      skipArgs = 4
-      break
-    default:
-     throw new Error("Signature method not supported: " + signMethod)
-  }
-
-  return method.apply(null, [].slice.call(arguments, skipArgs))
-}
-
-exports.hmacsign = hmacsign
-exports.rsasign = rsasign
-exports.plaintext = plaintext
-exports.sign = sign
-exports.rfc3986 = rfc3986
-exports.generateBase = generateBase
-
-
-
-/***/ }),
-/* 769 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * object.omit <https://github.com/jonschlinkert/object.omit>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var isObject = __webpack_require__(735);
-var forOwn = __webpack_require__(770);
-
-module.exports = function omit(obj, keys) {
-  if (!isObject(obj)) return {};
-
-  keys = [].concat.apply([], [].slice.call(arguments, 1));
-  var last = keys[keys.length - 1];
-  var res = {}, fn;
-
-  if (typeof last === 'function') {
-    fn = keys.pop();
-  }
-
-  var isFunction = typeof fn === 'function';
-  if (!keys.length && !isFunction) {
-    return obj;
-  }
-
-  forOwn(obj, function(value, key) {
-    if (keys.indexOf(key) === -1) {
-
-      if (!isFunction) {
-        res[key] = value;
-      } else if (fn(value, key, obj)) {
-        res[key] = value;
-      }
-    }
-  });
-  return res;
-};
-
-
-/***/ }),
-/* 770 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * for-own <https://github.com/jonschlinkert/for-own>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-var forIn = __webpack_require__(647);
-var hasOwn = Object.prototype.hasOwnProperty;
-
-module.exports = function forOwn(obj, fn, thisArg) {
-  forIn(obj, function(val, key) {
-    if (hasOwn.call(obj, key)) {
-      return fn.call(thisArg, obj[key], key, obj);
-    }
-  });
-};
-
-
-/***/ }),
-/* 771 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const mimicFn = __webpack_require__(760);
-
-module.exports = (fn, opts) => {
-	// TODO: Remove this in v3
-	if (opts === true) {
-		throw new TypeError('The second argument is now an options object');
-	}
-
-	if (typeof fn !== 'function') {
-		throw new TypeError('Expected a function');
-	}
-
-	opts = opts || {};
-
-	let ret;
-	let called = false;
-	const fnName = fn.displayName || fn.name || '<anonymous>';
-
-	const onetime = function () {
-		if (called) {
-			if (opts.throw === true) {
-				throw new Error(`Function \`${fnName}\` can only be called once`);
-			}
-
-			return ret;
-		}
-
-		called = true;
-		ret = fn.apply(this, arguments);
-		fn = null;
-
-		return ret;
-	};
-
-	mimicFn(onetime, fn);
-
-	return onetime;
-};
-
-
-/***/ }),
-/* 772 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var isWindows = process.platform === 'win32';
-var trailingSlashRe = isWindows ? /[^:]\\$/ : /.\/$/;
-
-// https://github.com/nodejs/node/blob/3e7a14381497a3b73dda68d05b5130563cdab420/lib/os.js#L25-L43
-module.exports = function () {
-	var path;
-
-	if (isWindows) {
-		path = process.env.TEMP ||
-			process.env.TMP ||
-			(process.env.SystemRoot || process.env.windir) + '\\temp';
-	} else {
-		path = process.env.TMPDIR ||
-			process.env.TMP ||
-			process.env.TEMP ||
-			'/tmp';
-	}
-
-	if (trailingSlashRe.test(path)) {
-		path = path.slice(0, -1);
-	}
-
-	return path;
-};
-
-
-/***/ }),
-/* 773 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * parse-glob <https://github.com/jonschlinkert/parse-glob>
- *
- * Copyright (c) 2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-var isGlob = __webpack_require__(178);
-var findBase = __webpack_require__(652);
-var extglob = __webpack_require__(177);
-var dotfile = __webpack_require__(733);
-
-/**
- * Expose `cache`
- */
-
-var cache = module.exports.cache = {};
-
-/**
- * Parse a glob pattern into tokens.
- *
- * When no paths or '**' are in the glob, we use a
- * different strategy for parsing the filename, since
- * file names can contain braces and other difficult
- * patterns. such as:
- *
- *  - `*.{a,b}`
- *  - `(**|*.js)`
- */
-
-module.exports = function parseGlob(glob) {
-  if (cache.hasOwnProperty(glob)) {
-    return cache[glob];
-  }
-
-  var tok = {};
-  tok.orig = glob;
-  tok.is = {};
-
-  // unescape dots and slashes in braces/brackets
-  glob = escape(glob);
-
-  var parsed = findBase(glob);
-  tok.is.glob = parsed.isGlob;
-
-  tok.glob = parsed.glob;
-  tok.base = parsed.base;
-  var segs = /([^\/]*)$/.exec(glob);
-
-  tok.path = {};
-  tok.path.dirname = '';
-  tok.path.basename = segs[1] || '';
-  tok.path.dirname = glob.split(tok.path.basename).join('') || '';
-  var basename = (tok.path.basename || '').split('.') || '';
-  tok.path.filename = basename[0] || '';
-  tok.path.extname = basename.slice(1).join('.') || '';
-  tok.path.ext = '';
-
-  if (isGlob(tok.path.dirname) && !tok.path.basename) {
-    if (!/\/$/.test(tok.glob)) {
-      tok.path.basename = tok.glob;
-    }
-    tok.path.dirname = tok.base;
-  }
-
-  if (glob.indexOf('/') === -1 && !tok.is.globstar) {
-    tok.path.dirname = '';
-    tok.path.basename = tok.orig;
-  }
-
-  var dot = tok.path.basename.indexOf('.');
-  if (dot !== -1) {
-    tok.path.filename = tok.path.basename.slice(0, dot);
-    tok.path.extname = tok.path.basename.slice(dot);
-  }
-
-  if (tok.path.extname.charAt(0) === '.') {
-    var exts = tok.path.extname.split('.');
-    tok.path.ext = exts[exts.length - 1];
-  }
-
-  // unescape dots and slashes in braces/brackets
-  tok.glob = unescape(tok.glob);
-  tok.path.dirname = unescape(tok.path.dirname);
-  tok.path.basename = unescape(tok.path.basename);
-  tok.path.filename = unescape(tok.path.filename);
-  tok.path.extname = unescape(tok.path.extname);
-
-  // Booleans
-  var is = (glob && tok.is.glob);
-  tok.is.negated  = glob && glob.charAt(0) === '!';
-  tok.is.extglob  = glob && extglob(glob);
-  tok.is.braces   = has(is, glob, '{');
-  tok.is.brackets = has(is, glob, '[:');
-  tok.is.globstar = has(is, glob, '**');
-  tok.is.dotfile  = dotfile(tok.path.basename) || dotfile(tok.path.filename);
-  tok.is.dotdir   = dotdir(tok.path.dirname);
-  return (cache[glob] = tok);
-}
-
-/**
- * Returns true if the glob matches dot-directories.
- *
- * @param  {Object} `tok` The tokens object
- * @param  {Object} `path` The path object
- * @return {Object}
- */
-
-function dotdir(base) {
-  if (base.indexOf('/.') !== -1) {
-    return true;
-  }
-  if (base.charAt(0) === '.' && base.charAt(1) !== '/') {
-    return true;
-  }
-  return false;
-}
-
-/**
- * Returns true if the pattern has the given `ch`aracter(s)
- *
- * @param  {Object} `glob` The glob pattern.
- * @param  {Object} `ch` The character to test for
- * @return {Object}
- */
-
-function has(is, glob, ch) {
-  return is && glob.indexOf(ch) !== -1;
-}
-
-/**
- * Escape/unescape utils
- */
-
-function escape(str) {
-  var re = /\{([^{}]*?)}|\(([^()]*?)\)|\[([^\[\]]*?)\]/g;
-  return str.replace(re, function (outter, braces, parens, brackets) {
-    var inner = braces || parens || brackets;
-    if (!inner) { return outter; }
-    return outter.split(inner).join(esc(inner));
-  });
-}
-
-function esc(str) {
-  str = str.split('/').join('__SLASH__');
-  str = str.split('.').join('__DOT__');
-  return str;
-}
-
-function unescape(str) {
-  str = str.split('__SLASH__').join('/');
-  str = str.split('__DOT__').join('.');
-  return str;
-}
-
-
-/***/ }),
-/* 774 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var isWindows = process.platform === 'win32';
-
-// Regex to split a windows path into three parts: [*, device, slash,
-// tail] windows-only
-var splitDeviceRe =
-    /^([a-zA-Z]:|[\\\/]{2}[^\\\/]+[\\\/]+[^\\\/]+)?([\\\/])?([\s\S]*?)$/;
-
-// Regex to split the tail part of the above into [*, dir, basename, ext]
-var splitTailRe =
-    /^([\s\S]*?)((?:\.{1,2}|[^\\\/]+?|)(\.[^.\/\\]*|))(?:[\\\/]*)$/;
-
-var win32 = {};
-
-// Function to split a filename into [root, dir, basename, ext]
-function win32SplitPath(filename) {
-  // Separate device+slash from tail
-  var result = splitDeviceRe.exec(filename),
-      device = (result[1] || '') + (result[2] || ''),
-      tail = result[3] || '';
-  // Split the tail into dir, basename and extension
-  var result2 = splitTailRe.exec(tail),
-      dir = result2[1],
-      basename = result2[2],
-      ext = result2[3];
-  return [device, dir, basename, ext];
-}
-
-win32.parse = function(pathString) {
-  if (typeof pathString !== 'string') {
-    throw new TypeError(
-        "Parameter 'pathString' must be a string, not " + typeof pathString
-    );
-  }
-  var allParts = win32SplitPath(pathString);
-  if (!allParts || allParts.length !== 4) {
-    throw new TypeError("Invalid path '" + pathString + "'");
-  }
-  return {
-    root: allParts[0],
-    dir: allParts[0] + allParts[1].slice(0, -1),
-    base: allParts[2],
-    ext: allParts[3],
-    name: allParts[2].slice(0, allParts[2].length - allParts[3].length)
-  };
-};
-
-
-
-// Split a filename into [root, dir, basename, ext], unix version
-// 'root' is just a slash, or nothing.
-var splitPathRe =
-    /^(\/?|)([\s\S]*?)((?:\.{1,2}|[^\/]+?|)(\.[^.\/]*|))(?:[\/]*)$/;
-var posix = {};
-
-
-function posixSplitPath(filename) {
-  return splitPathRe.exec(filename).slice(1);
-}
-
-
-posix.parse = function(pathString) {
-  if (typeof pathString !== 'string') {
-    throw new TypeError(
-        "Parameter 'pathString' must be a string, not " + typeof pathString
-    );
-  }
-  var allParts = posixSplitPath(pathString);
-  if (!allParts || allParts.length !== 4) {
-    throw new TypeError("Invalid path '" + pathString + "'");
-  }
-  allParts[1] = allParts[1] || '';
-  allParts[2] = allParts[2] || '';
-  allParts[3] = allParts[3] || '';
-
-  return {
-    root: allParts[0],
-    dir: allParts[0] + allParts[1].slice(0, -1),
-    base: allParts[2],
-    ext: allParts[3],
-    name: allParts[2].slice(0, allParts[2].length - allParts[3].length)
-  };
-};
-
-
-if (isWindows)
-  module.exports = win32.parse;
-else /* posix */
-  module.exports = posix.parse;
-
-module.exports.posix = posix.parse;
-module.exports.win32 = win32.parse;
-
-
-/***/ }),
-/* 775 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var duplexify = __webpack_require__(386)
-var through = __webpack_require__(461)
-var bufferFrom = __webpack_require__(595)
-
-var noop = function() {}
-
-var isObject = function(data) {
-  return !Buffer.isBuffer(data) && typeof data !== 'string'
-}
-
-var peek = function(opts, onpeek) {
-  if (typeof opts === 'number') opts = {maxBuffer:opts}
-  if (typeof opts === 'function') return peek(null, opts)
-  if (!opts) opts = {}
-
-  var maxBuffer = typeof opts.maxBuffer === 'number' ? opts.maxBuffer : 65535
-  var strict = opts.strict
-  var newline = opts.newline !== false
-
-  var buffer = []
-  var bufferSize = 0
-  var dup = duplexify.obj()
-
-  var peeker = through.obj({highWaterMark:1}, function(data, enc, cb) {
-    if (isObject(data)) return ready(data, null, cb)
-    if (!Buffer.isBuffer(data)) data = bufferFrom(data)
-
-    if (newline) {
-      var nl = Array.prototype.indexOf.call(data, 10)
-      if (nl > 0 && data[nl-1] === 13) nl--
-
-      if (nl > -1) {
-        buffer.push(data.slice(0, nl))
-        return ready(Buffer.concat(buffer), data.slice(nl), cb)
-      }
-    }
-
-    buffer.push(data)
-    bufferSize += data.length
-
-    if (bufferSize < maxBuffer) return cb()
-    if (strict) return cb(new Error('No newline found'))
-    ready(Buffer.concat(buffer), null, cb)
-  })
-
-  var onpreend = function() {
-    if (strict) return dup.destroy(new Error('No newline found'))
-    dup.cork()
-    ready(Buffer.concat(buffer), null, function(err) {
-      if (err) return dup.destroy(err)
-      dup.uncork()
-    })
-  }
-
-  var ready = function(data, overflow, cb) {
-    dup.removeListener('preend', onpreend)
-    onpeek(data, function(err, parser) {
-      if (err) return cb(err)
-
-      dup.setWritable(parser)
-      dup.setReadable(parser)
-
-      if (data) parser.write(data)
-      if (overflow) parser.write(overflow)
-
-      overflow = buffer = peeker = null // free the data
-      cb()
-    })
-  }
-
-  dup.on('preend', onpreend)
-  dup.setWritable(peeker)
-
-  return dup
-}
-
-module.exports = peek
-
-
-/***/ }),
-/* 776 */
-/***/ (function(module, exports) {
-
-// Generated by CoffeeScript 1.12.2
-(function() {
-  var getNanoSeconds, hrtime, loadTime, moduleLoadTime, nodeLoadTime, upTime;
-
-  if ((typeof performance !== "undefined" && performance !== null) && performance.now) {
-    module.exports = function() {
-      return performance.now();
-    };
-  } else if ((typeof process !== "undefined" && process !== null) && process.hrtime) {
-    module.exports = function() {
-      return (getNanoSeconds() - nodeLoadTime) / 1e6;
-    };
-    hrtime = process.hrtime;
-    getNanoSeconds = function() {
-      var hr;
-      hr = hrtime();
-      return hr[0] * 1e9 + hr[1];
-    };
-    moduleLoadTime = getNanoSeconds();
-    upTime = process.uptime() * 1e9;
-    nodeLoadTime = moduleLoadTime - upTime;
-  } else if (Date.now) {
-    module.exports = function() {
-      return Date.now() - loadTime;
-    };
-    loadTime = Date.now();
-  } else {
-    module.exports = function() {
-      return new Date().getTime() - loadTime;
-    };
-    loadTime = new Date().getTime();
-  }
-
-}).call(this);
-
-//# sourceMappingURL=performance-now.js.map
-
-
-/***/ }),
-/* 777 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = (url, opts) => {
-	if (typeof url !== 'string') {
-		throw new TypeError(`Expected \`url\` to be of type \`string\`, got \`${typeof url}\``);
-	}
-
-	url = url.trim();
-	opts = Object.assign({https: false}, opts);
-
-	if (/^\.*\/|^(?!localhost)\w+:/.test(url)) {
-		return url;
-	}
-
-	return url.replace(/^(?!(?:\w+:)?\/\/)/, opts.https ? 'https://' : 'http://');
-};
-
-
-/***/ }),
-/* 778 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * preserve <https://github.com/jonschlinkert/preserve>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT license.
- */
-
-
-
-/**
- * Replace tokens in `str` with a temporary, heuristic placeholder.
- *
- * ```js
- * tokens.before('{a\\,b}');
- * //=> '{__ID1__}'
- * ```
- *
- * @param  {String} `str`
- * @return {String} String with placeholders.
- * @api public
- */
-
-exports.before = function before(str, re) {
-  return str.replace(re, function (match) {
-    var id = randomize();
-    cache[id] = match;
-    return '__ID' + id + '__';
-  });
-};
-
-/**
- * Replace placeholders in `str` with original tokens.
- *
- * ```js
- * tokens.after('{__ID1__}');
- * //=> '{a\\,b}'
- * ```
- *
- * @param  {String} `str` String with placeholders
- * @return {String} `str` String with original tokens.
- * @api public
- */
-
-exports.after = function after(str) {
-  return str.replace(/__ID(.{5})__/g, function (_, id) {
-    return cache[id];
-  });
-};
-
-function randomize() {
-  return Math.random().toString().slice(2, 7);
-}
-
-var cache = {};
-
-/***/ }),
-/* 779 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-function makeSync(fs, name) {
-    const fn = fs[`${name}Sync`];
-
-    return function () {
-        const callback = arguments[arguments.length - 1];
-        const args = Array.prototype.slice.call(arguments, 0, -1);
-        let ret;
-
-        try {
-            ret = fn.apply(fs, args);
-        } catch (err) {
-            return callback(err);
-        }
-
-        callback(null, ret);
-    };
-}
-
-function syncFs(fs) {
-    const fns = ['mkdir', 'realpath', 'stat', 'rmdir', 'utimes'];
-    const obj = {};
-
-    // Create the sync versions of the methods that we need
-    fns.forEach((name) => {
-        obj[name] = makeSync(fs, name);
-    });
-
-    // Copy the rest of the functions
-    for (const key in fs) {
-        if (!obj[key]) {
-            obj[key] = fs[key];
-        }
-    }
-
-    return obj;
-}
-
-module.exports = syncFs;
-
-
-/***/ }),
-/* 780 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-/**
- * Key a method on your object with this symbol and you can get special
- * formatting for that value! See ShellStringText, ShellStringUnquoted, or
- * shellStringSemicolon for examples.
- * @ignore
- */
-const formatSymbol = Symbol('format');
-/**
- * This symbol is for implementing advanced behaviors like the need for extra
- * carets in Windows shell strings that use pipes. If present, it's called in
- * an earlier phase than formatSymbol, and is passed a mutable context that can
- * be read during the format phase to influence formatting.
- * @ignore
- */
-const preformatSymbol = Symbol('preformat');
-
-// When minimum Node version becomes 6, replace calls to sticky with /.../y and
-// inline execFrom.
-let stickySupported = true;
-try {
-  new RegExp('', 'y');
-} catch (e) {
-  stickySupported = false;
-}
-const sticky = stickySupported ? source => new RegExp(source, 'y') : source => new RegExp(`^(?:${source})`);
-const execFrom = stickySupported ? (re, haystack, index) => (re.lastIndex = index, re.exec(haystack)) : (re, haystack, index) => re.exec(haystack.substr(index));
-
-function quoteForCmd(text, forceQuote) {
-  let caretDepth = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 0;
-  // See the below blog post for an explanation of this function and
-  // quoteForWin32:
-  // https://blogs.msdn.microsoft.com/twistylittlepassagesallalike/2011/04/23/everyone-quotes-command-line-arguments-the-wrong-way/
-  if (!text.length) {
-    return '""';
-  }
-  if (/[\n\r]/.test(text)) {
-    throw new Error("Line breaks can't be quoted on Windows");
-  }
-  const caretEscape = /["%]/.test(text);
-  text = quoteForWin32(text, forceQuote || !caretEscape && /[&()<>^|]/.test(text));
-  if (caretEscape) {
-    // See Win32Context for explanation of what caretDepth is for.
-    do {
-      text = text.replace(/[\t "%&()<>^|]/g, '^$&');
-    } while (caretDepth--);
-  }
-  return text;
-}
-const quoteForWin32 = (text, forceQuote) => forceQuote || /[\t "]/.test(text) ? `"${text.replace(/\\+(?=$|")/g, '$&$&').replace(/"/g, '\\"')}"` : text;
-const cmdMetaChars = /[\t\n\r "%&()<>^|]/;
-class Win32Context {
-  constructor() {
-    this.currentScope = newScope(null);
-    this.scopesByObject = new Map();
-  }
-  read(text) {
-    // When cmd.exe pipes to or from a batch file, it spawns a second copy of
-    // itself to run the inner command. This necessitates doubling up on carets
-    // so that escaped characters survive both cmd.exe invocations. See:
-    // https://stackoverflow.com/questions/8192318/why-does-delayed-expansion-fail-when-inside-a-piped-block-of-code#8194279
-    // https://ss64.com/nt/syntax-redirection.html
-    //
-    // Parentheses can create an additional subshell, requiring additional
-    // escaping... it's a mess.
-    //
-    // So here's what we do about it: we read all unquoted text in a shell
-    // string and put it through this tiny parser that looks for pipes,
-    // sequence operators (&, &&, ||), and parentheses. This can't be part of
-    // the main Puka parsing, because it can be affected by `unquoted(...)`
-    // values provided at evaluation time.
-    //
-    // Then, after associating each thing that needs to be quoted with a scope
-    // (via `mark()`), we can determine the depth of caret escaping required
-    // in each scope and pass it (via `Formatter::quote()`) to `quoteForCmd()`.
-    //
-    // See also `ShellStringText`, which holds the logic for the previous
-    // paragraph.
-    const length = text.length;
-    for (let pos = 0, match; pos < length;) {
-      if (match = execFrom(reUnimportant, text, pos)) {
-        pos += match[0].length;
-      }
-      if (pos >= length) break;
-      if (match = execFrom(reSeqOp, text, pos)) {
-        this.seq();
-        pos += match[0].length;
-      } else {
-        const char = text.charCodeAt(pos);
-        if (char === CARET) {
-          pos += 2;
-        } else if (char === QUOTE) {
-          // If you were foolish enough to leave a dangling quotation mark in
-          // an unquoted span... you're likely to have bigger problems than
-          // incorrect escaping. So we just do the simplest thing of looking for
-          // the end quote only in this piece of text.
-          pos += execFrom(reNotQuote, text, pos + 1)[0].length + 2;
-        } else {
-          if (char === OPEN_PAREN) {
-            this.enterScope();
-          } else if (char === CLOSE_PAREN) {
-            this.exitScope();
-          } else {
-            // (char === '|')
-            this.currentScope.depthDelta = 1;
-          }
-          pos++;
-        }
-      }
-    }
-  }
-  enterScope() {
-    this.currentScope = newScope(this.currentScope);
-  }
-  exitScope() {
-    this.currentScope = this.currentScope.parent || (this.currentScope.parent = newScope(null));
-  }
-  seq() {
-    // | binds tighter than sequence operators, so the latter create new sibling
-    // scopes for future |s to mutate.
-    this.currentScope = newScope(this.currentScope.parent);
-  }
-  mark(obj) {
-    this.scopesByObject.set(obj, this.currentScope);
-  }
-  at(obj) {
-    return { depth: getDepth(this.scopesByObject.get(obj)) };
-  }
-}
-const getDepth = scope => scope === null ? 0 : scope.depth !== -1 ? scope.depth : scope.depth = getDepth(scope.parent) + scope.depthDelta;
-const newScope = parent => ({ parent, depthDelta: 0, depth: -1 });
-const CARET = '^'.charCodeAt();
-const QUOTE = '"'.charCodeAt();
-const OPEN_PAREN = '('.charCodeAt();
-const CLOSE_PAREN = ')'.charCodeAt();
-const reNotQuote = sticky('[^"]*');
-const reSeqOp = sticky('&&?|\\|\\|');
-const reUnimportant = sticky('(?:>&|[^"$&()^|])+');
-
-const quoteForSh = (text, forceQuote) => text.length ? forceQuote || shMetaChars.test(text) ? `'${text.replace(/'/g, "'\\''")}'`.replace(/^(?:'')+(?!$)/, '').replace(/\\'''/g, "\\'") : text : "''";
-const shMetaChars = /[\t\n\r "#$&'()*;<>?\\`|~]/;
-
-/**
- * To get a Formatter, call `Formatter.for`.
- *
- * To create a new Formatter, pass an object to `Formatter.declare`.
- *
- * To set the global default Formatter, assign to `Formatter.default`.
- *
- * @class
- * @property {Formatter} default - The Formatter to be used when no platform
- * is provided—for example, when creating strings with `sh`.
- * @ignore
- */
-function Formatter() {}
-Object.assign(Formatter, /** @lends Formatter */{
-  /**
-   * Gets a Formatter that has been declared for the provided platform, or
-   * the base `'sh'` formatter if there is no Formatter specific to this
-   * platform, or the Formatter for the current platform if no specific platform
-   * is provided.
-   */
-  for(platform) {
-    return platform == null ? Formatter.default || (Formatter.default = Formatter.for(process.platform)) : Formatter._registry.get(platform) || Formatter._registry.get('sh');
-  },
-  /**
-   * Creates a new Formatter or mutates the properties on an existing
-   * Formatter. The `platform` key on the provided properties object determines
-   * when the Formatter is retrieved.
-   */
-  declare(props) {
-    const platform = props && props.platform || 'sh';
-    const existingFormatter = Formatter._registry.get(platform);
-    const formatter = Object.assign(existingFormatter || new Formatter(), props);
-    formatter.emptyString === void 0 && (formatter.emptyString = formatter.quote('', true));
-    existingFormatter || Formatter._registry.set(formatter.platform, formatter);
-  },
-  _registry: new Map(),
-  prototype: {
-    platform: 'sh',
-    quote: quoteForSh,
-    metaChars: shMetaChars,
-    hasExtraMetaChars: false,
-    statementSeparator: ';',
-    createContext() {
-      return defaultContext;
-    }
-  }
-});
-const defaultContext = {
-  at() {}
-};
-Formatter.declare();
-Formatter.declare({
-  platform: 'win32',
-  quote(text, forceQuote, opts) {
-    return quoteForCmd(text, forceQuote, opts && opts.depth || 0);
-  },
-  metaChars: cmdMetaChars,
-  hasExtraMetaChars: true,
-  statementSeparator: '&',
-  createContext(root) {
-    const context = new this.Context();
-    root[preformatSymbol](context);
-    return context;
-  },
-  Context: Win32Context
-});
-
-const isObject = any => any === Object(any);
-function memoize(f) {
-  const cache = new WeakMap();
-  return arg => {
-    let result = cache.get(arg);
-    if (result === void 0) {
-      result = f(arg);
-      cache.set(arg, result);
-    }
-    return result;
-  };
-}
-
-/**
- * Represents a contiguous span of text that may or must be quoted. The contents
- * may already contain quoted segments, which will always be quoted. If unquoted
- * segments also require quoting, the entire span will be quoted together.
- * @ignore
- */
-class ShellStringText {
-  constructor(contents, untested) {
-    this.contents = contents;
-    this.untested = untested;
-  }
-  [formatSymbol](formatter, context) {
-    const unformattedContents = this.contents;
-    const length = unformattedContents.length;
-    const contents = new Array(length);
-    for (let i = 0; i < length; i++) {
-      const c = unformattedContents[i];
-      contents[i] = isObject(c) && formatSymbol in c ? c[formatSymbol](formatter) : c;
-    }
-    for (let unquoted = true, i = 0; i < length; i++) {
-      const content = contents[i];
-      if (content === null) {
-        unquoted = !unquoted;
-      } else {
-        if (unquoted && (formatter.hasExtraMetaChars || this.untested && this.untested.has(i)) && formatter.metaChars.test(content)) {
-          return formatter.quote(contents.join(''), false, context.at(this));
-        }
-      }
-    }
-    const parts = [];
-    for (let quoted = null, i = 0; i < length; i++) {
-      const content = contents[i];
-      if (content === null) {
-        quoted = quoted ? (parts.push(formatter.quote(quoted.join(''), true, context.at(this))), null) : [];
-      } else {
-        (quoted || parts).push(content);
-      }
-    }
-    const result = parts.join('');
-    return result.length ? result : formatter.emptyString;
-  }
-  [preformatSymbol](context) {
-    context.mark(this);
-  }
-}
-
-/**
- * Represents a contiguous span of text that will not be quoted.
- * @ignore
- */
-class ShellStringUnquoted {
-  constructor(value) {
-    this.value = value;
-  }
-  [formatSymbol]() {
-    return this.value;
-  }
-  [preformatSymbol](context) {
-    context.read(this.value);
-  }
-}
-
-/**
- * Represents a semicolon... or an ampersand, on Windows.
- * @ignore
- */
-const shellStringSemicolon = {
-  [formatSymbol](formatter) {
-    return formatter.statementSeparator;
-  },
-  [preformatSymbol](context) {
-    context.seq();
-  }
-};
-
-const PLACEHOLDER = {};
-const parse = memoize(templateSpans => {
-  // These are the token types our DSL can recognize. Their values won't escape
-  // this function.
-  const TOKEN_TEXT = 0;
-  const TOKEN_QUOTE = 1;
-  const TOKEN_SEMI = 2;
-  const TOKEN_UNQUOTED = 3;
-  const TOKEN_SPACE = 4;
-  const TOKEN_REDIRECT = 5;
-  const result = [];
-  let placeholderCount = 0;
-  let prefix = null;
-  let onlyPrefixOnce = false;
-  let contents = [];
-  let quote = 0;
-  const lastSpan = templateSpans.length - 1;
-  for (let spanIndex = 0; spanIndex <= lastSpan; spanIndex++) {
-    const templateSpan = templateSpans[spanIndex];
-    const posEnd = templateSpan.length;
-    let tokenStart = 0;
-    if (spanIndex) {
-      placeholderCount++;
-      contents.push(PLACEHOLDER);
-    }
-    // For each span, we first do a recognizing pass in which we use regular
-    // expressions to identify the positions of tokens in the text, and then
-    // a second pass that actually splits the text into the minimum number of
-    // substrings necessary.
-    const recognized = []; // [type1, index1, type2, index2...]
-    let firstWordBreak = -1;
-    let lastWordBreak = -1;
-    {
-      let pos = 0,
-          match;
-      while (pos < posEnd) {
-        if (quote) {
-          if (match = execFrom(quote === CHAR_SQUO ? reQuotation1 : reQuotation2, templateSpan, pos)) {
-            recognized.push(TOKEN_TEXT, pos);
-            pos += match[0].length;
-          }
-          if (pos < posEnd) {
-            recognized.push(TOKEN_QUOTE, pos++);
-            quote = 0;
-          }
-        } else {
-          if (match = execFrom(reText, templateSpan, pos)) {
-            const setBreaks = match[1] != null;
-            setBreaks && firstWordBreak < 0 && (firstWordBreak = pos);
-            recognized.push(setBreaks ? TOKEN_UNQUOTED : TOKEN_TEXT, pos);
-            pos += match[0].length;
-            setBreaks && (lastWordBreak = pos);
-          }
-          if (match = execFrom(reRedirectOrSpace, templateSpan, pos)) {
-            firstWordBreak < 0 && (firstWordBreak = pos);
-            lastWordBreak = pos;
-            recognized.push(match[1] ? TOKEN_REDIRECT : TOKEN_SPACE, pos);
-            pos += match[0].length;
-          }
-          const char = templateSpan.charCodeAt(pos);
-          if (char === CHAR_SEMI) {
-            firstWordBreak < 0 && (firstWordBreak = pos);
-            recognized.push(TOKEN_SEMI, pos++);
-            lastWordBreak = pos;
-          } else if (char === CHAR_SQUO || char === CHAR_DQUO) {
-            recognized.push(TOKEN_QUOTE, pos++);
-            quote = char;
-          }
-        }
-      }
-    }
-    // Word breaks are only important if they separate words with placeholders,
-    // so we can ignore the first/last break if this is the first/last span.
-    spanIndex === 0 && (firstWordBreak = -1);
-    spanIndex === lastSpan && (lastWordBreak = posEnd);
-    // Here begins the second pass mentioned above. This loop runs one more
-    // iteration than there are tokens in recognized, because it handles tokens
-    // on a one-iteration delay; hence the i <= iEnd instead of i < iEnd.
-    const iEnd = recognized.length;
-    for (let i = 0, type = -1; i <= iEnd; i += 2) {
-      let typeNext = -1,
-          pos;
-      if (i === iEnd) {
-        pos = posEnd;
-      } else {
-        typeNext = recognized[i];
-        pos = recognized[i + 1];
-        // If the next token is space or redirect, but there's another word
-        // break in this span, then we can handle that token the same way we
-        // would handle unquoted text because it isn't being attached to a
-        // placeholder.
-        typeNext >= TOKEN_SPACE && pos !== lastWordBreak && (typeNext = TOKEN_UNQUOTED);
-      }
-      const breakHere = pos === firstWordBreak || pos === lastWordBreak;
-      if (pos && (breakHere || typeNext !== type)) {
-        let value = type === TOKEN_QUOTE ? null : type === TOKEN_SEMI ? shellStringSemicolon : templateSpan.substring(tokenStart, pos);
-        if (type >= TOKEN_SEMI) {
-          // This branch handles semicolons, unquoted text, spaces, and
-          // redirects. shellStringSemicolon is already a formatSymbol object;
-          // the rest need to be wrapped.
-          type === TOKEN_SEMI || (value = new ShellStringUnquoted(value));
-          // We don't need to check placeholderCount here like we do below;
-          // that's only relevant during the first word break of the span, and
-          // because this iteration of the loop is processing the token that
-          // was checked for breaks in the previous iteration, it will have
-          // already been handled. For the same reason, prefix is guaranteed to
-          // be null.
-          if (contents.length) {
-            result.push(new ShellStringText(contents, null));
-            contents = [];
-          }
-          // Only spaces and redirects become prefixes, but not if they've been
-          // rewritten to unquoted above.
-          if (type >= TOKEN_SPACE) {
-            prefix = value;
-            onlyPrefixOnce = type === TOKEN_SPACE;
-          } else {
-            result.push(value);
-          }
-        } else {
-          contents.push(value);
-        }
-        tokenStart = pos;
-      }
-      if (breakHere) {
-        if (placeholderCount) {
-          result.push({ contents, placeholderCount, prefix, onlyPrefixOnce });
-        } else {
-          // There's no prefix to handle in this branch; a prefix prior to this
-          // span would mean placeholderCount > 0, and a prefix in this span
-          // can't be created because spaces and redirects get rewritten to
-          // unquoted before the last word break.
-          contents.length && result.push(new ShellStringText(contents, null));
-        }
-        placeholderCount = 0;prefix = null;onlyPrefixOnce = false;
-        contents = [];
-      }
-      type = typeNext;
-    }
-  }
-  if (quote) {
-    throw new SyntaxError(`String is missing a ${String.fromCharCode(quote)} character`);
-  }
-  return result;
-});
-const CHAR_SEMI = ';'.charCodeAt();
-const CHAR_SQUO = "'".charCodeAt();
-const CHAR_DQUO = '"'.charCodeAt();
-const reQuotation1 = sticky("[^']+");
-const reQuotation2 = sticky('[^"]+');
-const reText = sticky('[^\\s"#$&\'();<>\\\\`|]+|([#$&()\\\\`|]+)');
-const reRedirectOrSpace = sticky('((?:\\s+\\d+|\\s*)[<>]+\\s*)|\\s+');
-
-class BitSet {
-  constructor() {
-    this.vector = new Int32Array(1);
-  }
-  has(n) {
-    return (this.vector[n >>> 5] & 1 << n) !== 0;
-  }
-  add(n) {
-    const i = n >>> 5,
-          requiredLength = i + 1;
-    let vector = this.vector;var _vector = vector;
-    let length = _vector.length;
-    if (requiredLength > length) {
-      while (requiredLength > (length *= 2));
-      const oldValues = vector;
-      vector = new Int32Array(length);
-      vector.set(oldValues);
-      this.vector = vector;
-    }
-    vector[i] |= 1 << n;
-  }
-}
-
-function evaluate(template, values) {
-  values = values.map(toStringishArray);
-  const children = [];
-  let valuesStart = 0;
-  for (let i = 0, iMax = template.length; i < iMax; i++) {
-    const word = template[i];
-    if (formatSymbol in word) {
-      children.push(word);
-      continue;
-    }
-    const contents = word.contents,
-          placeholderCount = word.placeholderCount,
-          prefix = word.prefix,
-          onlyPrefixOnce = word.onlyPrefixOnce;
-    const kMax = contents.length;
-    const valuesEnd = valuesStart + placeholderCount;
-    const tuples = cartesianProduct(values, valuesStart, valuesEnd);
-    valuesStart = valuesEnd;
-    for (let j = 0, jMax = tuples.length; j < jMax; j++) {
-      const needSpace = j > 0;
-      const tuple = tuples[j];
-      (needSpace || prefix) && children.push(needSpace && (onlyPrefixOnce || !prefix) ? unquotedSpace : prefix);
-      let interpolatedContents = [];
-      let untested = null;
-      let quoting = false;
-      let tupleIndex = 0;
-      for (let k = 0; k < kMax; k++) {
-        const content = contents[k];
-        if (content === PLACEHOLDER) {
-          const value = tuple[tupleIndex++];
-          if (quoting) {
-            interpolatedContents.push(value);
-          } else {
-            if (isObject(value) && formatSymbol in value) {
-              if (interpolatedContents.length) {
-                children.push(new ShellStringText(interpolatedContents, untested));
-                interpolatedContents = [];
-                untested = null;
-              }
-              children.push(value);
-            } else {
-              (untested || (untested = new BitSet())).add(interpolatedContents.length);
-              interpolatedContents.push(value);
-            }
-          }
-        } else {
-          interpolatedContents.push(content);
-          content === null && (quoting = !quoting);
-        }
-      }
-      if (interpolatedContents.length) {
-        children.push(new ShellStringText(interpolatedContents, untested));
-      }
-    }
-  }
-  return children;
-}
-const primToStringish = value => value == null ? '' + value : value;
-function toStringishArray(value) {
-  let array;
-  switch (true) {
-    default:
-      if (isObject(value)) {
-        if (Array.isArray(value)) {
-          array = value;break;
-        }
-        if (Symbol.iterator in value) {
-          array = Array.from(value);break;
-        }
-      }
-      array = [value];
-  }
-  return array.map(primToStringish);
-}
-function cartesianProduct(arrs, start, end) {
-  const size = end - start;
-  let resultLength = 1;
-  for (let i = start; i < end; i++) {
-    resultLength *= arrs[i].length;
-  }
-  if (resultLength > 1e6) {
-    throw new RangeError("Far too many elements to interpolate");
-  }
-  const result = new Array(resultLength);
-  const indices = new Array(size).fill(0);
-  for (let i = 0; i < resultLength; i++) {
-    const value = result[i] = new Array(size);
-    for (let j = 0; j < size; j++) {
-      value[j] = arrs[j + start][indices[j]];
-    }
-    for (let j = size - 1; j >= 0; j--) {
-      if (++indices[j] < arrs[j + start].length) break;
-      indices[j] = 0;
-    }
-  }
-  return result;
-}
-const unquotedSpace = new ShellStringUnquoted(' ');
-
-/**
- * A ShellString represents a shell command after it has been interpolated, but
- * before it has been formatted for a particular platform. ShellStrings are
- * useful if you want to prepare a command for a different platform than the
- * current one, for instance.
- *
- * To create a ShellString, use `ShellString.sh` the same way you would use
- * top-level `sh`.
- */
-class ShellString {
-  /** @hideconstructor */
-  constructor(children) {
-    this.children = children;
-  }
-  /**
-   * `ShellString.sh` is a template tag just like `sh`; the only difference is
-   * that this function returns a ShellString which has not yet been formatted
-   * into a String.
-   * @returns {ShellString}
-   * @function sh
-   * @static
-   * @memberof ShellString
-   */
-  static sh(templateSpans) {
-    for (var _len = arguments.length, values = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-      values[_key - 1] = arguments[_key];
-    }
-    return new ShellString(evaluate(parse(templateSpans), values));
-  }
-  /**
-   * A method to format a ShellString into a regular String formatted for a
-   * particular platform.
-   *
-   * @param {String} [platform] a value that `process.platform` might take:
-   * `'win32'`, `'linux'`, etc.; determines how the string is to be formatted.
-   * When omitted, effectively the same as `process.platform`.
-   * @returns {String}
-   */
-  toString(platform) {
-    return this[formatSymbol](Formatter.for(platform));
-  }
-  [formatSymbol](formatter) {
-    let context = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : formatter.createContext(this);
-    return this.children.map(child => child[formatSymbol](formatter, context)).join('');
-  }
-  [preformatSymbol](context) {
-    const children = this.children;
-    for (let i = 0, iMax = children.length; i < iMax; i++) {
-      const child = children[i];
-      if (preformatSymbol in child) {
-        child[preformatSymbol](context);
-      }
-    }
-  }
-}
-
-/**
- * A Windows-specific version of {@link quoteForShell}.
- * @param {String} text to be quoted
- * @param {Boolean} [forceQuote] whether to always add quotes even if the string
- * is already safe. Defaults to `false`.
- */
-
-/**
- * A Unix-specific version of {@link quoteForShell}.
- * @param {String} text to be quoted
- * @param {Boolean} [forceQuote] whether to always add quotes even if the string
- * is already safe. Defaults to `false`.
- */
-
-/**
- * Quotes a string for injecting into a shell command.
- *
- * This function is exposed for some hypothetical case when the `sh` DSL simply
- * won't do; `sh` is expected to be the more convenient option almost always.
- * Compare:
- *
- * ```javascript
- * console.log('cmd' + args.map(a => ' ' + quoteForShell(a)).join(''));
- * console.log(sh`cmd ${args}`); // same as above
- *
- * console.log('cmd' + args.map(a => ' ' + quoteForShell(a, true)).join(''));
- * console.log(sh`cmd "${args}"`); // same as above
- * ```
- *
- * Additionally, on Windows, `sh` checks the entire command string for pipes,
- * which subtly change how arguments need to be quoted. If your commands may
- * involve pipes, you are strongly encouraged to use `sh` and not try to roll
- * your own with `quoteForShell`.
- *
- * @param {String} text to be quoted
- * @param {Boolean} [forceQuote] whether to always add quotes even if the string
- * is already safe. Defaults to `false`.
- * @param {String} [platform] a value that `process.platform` might take:
- * `'win32'`, `'linux'`, etc.; determines how the string is to be formatted.
- * When omitted, effectively the same as `process.platform`.
- *
- * @returns {String} a string that is safe for the current (or specified)
- * platform.
- */
-function quoteForShell(text, forceQuote, platform) {
-  return Formatter.for(platform).quote(text, forceQuote);
-}
-
-/**
- * A string template tag for safely constructing cross-platform shell commands.
- *
- * An `sh` template is not actually treated as a literal string to be
- * interpolated; instead, it is a tiny DSL designed to make working with shell
- * strings safe, simple, and straightforward. To get started quickly, see the
- * examples below. {@link #the-sh-dsl More detailed documentation} is available
- * further down.
- *
- * @name sh
- * @example
- * const title = '"this" & "that"';
- * sh`script --title=${title}`; // => "script '--title=\"this\" & \"that\"'"
- * // Note: these examples show results for non-Windows platforms.
- * // On Windows, the above would instead be
- * // 'script ^"--title=\\^"this\\^" ^& \\^"that\\^"^"'.
- *
- * const names = ['file1', 'file 2'];
- * sh`rimraf ${names}.txt`; // => "rimraf file1.txt 'file 2.txt'"
- *
- * const cmd1 = ['cat', 'file 1.txt', 'file 2.txt'];
- * const cmd2 = ['use-input', '-abc'];
- * sh`${cmd1}|${cmd2}`; // => "cat 'file 1.txt' 'file 2.txt'|use-input -abc"
- *
- * @returns {String} - a string formatted for the platform Node is currently
- * running on.
- */
-const sh = function () {
-  return ShellString.sh.apply(ShellString, arguments).toString();
-};
-
-/**
- * This function permits raw strings to be interpolated into a `sh` template.
- *
- * **IMPORTANT**: If you're using Puka due to security concerns, make sure you
- * don't pass any untrusted content to `unquoted`. This may be obvious, but
- * stray punctuation in an `unquoted` section can compromise the safety of the
- * entire shell command.
- *
- * @param value - any value (it will be treated as a string)
- *
- * @example
- * const both = true;
- * sh`foo ${unquoted(both ? '&&' : '||')} bar`; // => 'foo && bar'
- */
-const unquoted = value => new ShellStringUnquoted(value);
-
-exports.Formatter = Formatter;
-exports.ShellString = ShellString;
-exports.ShellStringText = ShellStringText;
-exports.ShellStringUnquoted = ShellStringUnquoted;
-exports.quoteForCmd = quoteForCmd;
-exports.quoteForSh = quoteForSh;
-exports.quoteForShell = quoteForShell;
-exports.sh = sh;
-exports.shellStringSemicolon = shellStringSemicolon;
-exports.formatSymbol = formatSymbol;
-exports.preformatSymbol = preformatSymbol;
-exports.unquoted = unquoted;
-
-
-/***/ }),
-/* 781 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var once = __webpack_require__(83)
-var eos = __webpack_require__(173)
-var fs = __webpack_require__(5) // we only need fs to get the ReadStream and WriteStream prototypes
-
-var noop = function () {}
-
-var isFn = function (fn) {
-  return typeof fn === 'function'
-}
-
-var isFS = function (stream) {
-  if (!fs) return false // browser
-  return (stream instanceof (fs.ReadStream || noop) || stream instanceof (fs.WriteStream || noop)) && isFn(stream.close)
-}
-
-var isRequest = function (stream) {
-  return stream.setHeader && isFn(stream.abort)
-}
-
-var destroyer = function (stream, reading, writing, callback) {
-  callback = once(callback)
-
-  var closed = false
-  stream.on('close', function () {
-    closed = true
-  })
-
-  eos(stream, {readable: reading, writable: writing}, function (err) {
-    if (err) return callback(err)
-    closed = true
-    callback()
-  })
-
-  var destroyed = false
-  return function (err) {
-    if (closed) return
-    if (destroyed) return
-    destroyed = true
-
-    if (isFS(stream)) return stream.close(noop) // use close for fs streams to avoid fd leaks
-    if (isRequest(stream)) return stream.abort() // request.destroy just do .end - .abort is what we want
-
-    if (isFn(stream.destroy)) return stream.destroy()
-
-    callback(err || new Error('stream was destroyed'))
-  }
-}
-
-var call = function (fn) {
-  fn()
-}
-
-var pipe = function (from, to) {
-  return from.pipe(to)
-}
-
-var pump = function () {
-  var streams = Array.prototype.slice.call(arguments)
-  var callback = isFn(streams[streams.length - 1] || noop) && streams.pop() || noop
-
-  if (Array.isArray(streams[0])) streams = streams[0]
-  if (streams.length < 2) throw new Error('pump requires two streams per minimum')
-
-  var error
-  var destroys = streams.map(function (stream, i) {
-    var reading = i < streams.length - 1
-    var writing = i > 0
-    return destroyer(stream, reading, writing, function (err) {
-      if (!error) error = err
-      if (err) destroys.forEach(call)
-      if (reading) return
-      destroys.forEach(call)
-      callback(error)
-    })
-  })
-
-  return streams.reduce(pipe)
-}
-
-module.exports = pump
-
-
-/***/ }),
-/* 782 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var pump = __webpack_require__(783)
-var inherits = __webpack_require__(61)
-var Duplexify = __webpack_require__(386)
-
-var toArray = function(args) {
-  if (!args.length) return []
-  return Array.isArray(args[0]) ? args[0] : Array.prototype.slice.call(args)
-}
-
-var define = function(opts) {
-  var Pumpify = function() {
-    var streams = toArray(arguments)
-    if (!(this instanceof Pumpify)) return new Pumpify(streams)
-    Duplexify.call(this, null, null, opts)
-    if (streams.length) this.setPipeline(streams)
-  }
-
-  inherits(Pumpify, Duplexify)
-
-  Pumpify.prototype.setPipeline = function() {
-    var streams = toArray(arguments)
-    var self = this
-    var ended = false
-    var w = streams[0]
-    var r = streams[streams.length-1]
-
-    r = r.readable ? r : null
-    w = w.writable ? w : null
-
-    var onclose = function() {
-      streams[0].emit('error', new Error('stream was destroyed'))
-    }
-
-    this.on('close', onclose)
-    this.on('prefinish', function() {
-      if (!ended) self.cork()
-    })
-
-    pump(streams, function(err) {
-      self.removeListener('close', onclose)
-      if (err) return self.destroy(err.message === 'premature close' ? null : err)
-      ended = true
-      // pump ends after the last stream is not writable *but*
-      // pumpify still forwards the readable part so we need to catch errors
-      // still, so reenable autoDestroy in this case
-      if (self._autoDestroy === false) self._autoDestroy = true
-      self.uncork()
-    })
-
-    if (this.destroyed) return onclose()
-    this.setWritable(w)
-    this.setReadable(r)
-  }
-
-  return Pumpify
-}
-
-module.exports = define({autoDestroy:false, destroy:false})
-module.exports.obj = define({autoDestroy: false, destroy:false, objectMode:true, highWaterMark:16})
-module.exports.ctor = define
-
-
-/***/ }),
-/* 783 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var once = __webpack_require__(83)
-var eos = __webpack_require__(173)
-var fs = __webpack_require__(5) // we only need fs to get the ReadStream and WriteStream prototypes
-
-var noop = function () {}
-var ancient = /^v?\.0/.test(process.version)
-
-var isFn = function (fn) {
-  return typeof fn === 'function'
-}
-
-var isFS = function (stream) {
-  if (!ancient) return false // newer node version do not need to care about fs is a special way
-  if (!fs) return false // browser
-  return (stream instanceof (fs.ReadStream || noop) || stream instanceof (fs.WriteStream || noop)) && isFn(stream.close)
-}
-
-var isRequest = function (stream) {
-  return stream.setHeader && isFn(stream.abort)
-}
-
-var destroyer = function (stream, reading, writing, callback) {
-  callback = once(callback)
-
-  var closed = false
-  stream.on('close', function () {
-    closed = true
-  })
-
-  eos(stream, {readable: reading, writable: writing}, function (err) {
-    if (err) return callback(err)
-    closed = true
-    callback()
-  })
-
-  var destroyed = false
-  return function (err) {
-    if (closed) return
-    if (destroyed) return
-    destroyed = true
-
-    if (isFS(stream)) return stream.close(noop) // use close for fs streams to avoid fd leaks
-    if (isRequest(stream)) return stream.abort() // request.destroy just do .end - .abort is what we want
-
-    if (isFn(stream.destroy)) return stream.destroy()
-
-    callback(err || new Error('stream was destroyed'))
-  }
-}
-
-var call = function (fn) {
-  fn()
-}
-
-var pipe = function (from, to) {
-  return from.pipe(to)
-}
-
-var pump = function () {
-  var streams = Array.prototype.slice.call(arguments)
-  var callback = isFn(streams[streams.length - 1] || noop) && streams.pop() || noop
-
-  if (Array.isArray(streams[0])) streams = streams[0]
-  if (streams.length < 2) throw new Error('pump requires two streams per minimum')
-
-  var error
-  var destroys = streams.map(function (stream, i) {
-    var reading = i < streams.length - 1
-    var writing = i > 0
-    return destroyer(stream, reading, writing, function (err) {
-      if (!error) error = err
-      if (err) destroys.forEach(call)
-      if (reading) return
-      destroys.forEach(call)
-      callback(error)
-    })
-  })
-
-  streams.reduce(pipe)
-}
-
-module.exports = pump
-
-
-/***/ }),
-/* 784 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var utils = __webpack_require__(405);
-
-var has = Object.prototype.hasOwnProperty;
-
-var defaults = {
-    allowDots: false,
-    allowPrototypes: false,
-    arrayLimit: 20,
-    decoder: utils.decode,
-    delimiter: '&',
-    depth: 5,
-    parameterLimit: 1000,
-    plainObjects: false,
-    strictNullHandling: false
-};
-
-var parseValues = function parseQueryStringValues(str, options) {
-    var obj = {};
-    var cleanStr = options.ignoreQueryPrefix ? str.replace(/^\?/, '') : str;
-    var limit = options.parameterLimit === Infinity ? undefined : options.parameterLimit;
-    var parts = cleanStr.split(options.delimiter, limit);
-
-    for (var i = 0; i < parts.length; ++i) {
-        var part = parts[i];
-
-        var bracketEqualsPos = part.indexOf(']=');
-        var pos = bracketEqualsPos === -1 ? part.indexOf('=') : bracketEqualsPos + 1;
-
-        var key, val;
-        if (pos === -1) {
-            key = options.decoder(part, defaults.decoder);
-            val = options.strictNullHandling ? null : '';
-        } else {
-            key = options.decoder(part.slice(0, pos), defaults.decoder);
-            val = options.decoder(part.slice(pos + 1), defaults.decoder);
-        }
-        if (has.call(obj, key)) {
-            obj[key] = [].concat(obj[key]).concat(val);
-        } else {
-            obj[key] = val;
-        }
-    }
-
-    return obj;
-};
-
-var parseObject = function (chain, val, options) {
-    var leaf = val;
-
-    for (var i = chain.length - 1; i >= 0; --i) {
-        var obj;
-        var root = chain[i];
-
-        if (root === '[]') {
-            obj = [];
-            obj = obj.concat(leaf);
-        } else {
-            obj = options.plainObjects ? Object.create(null) : {};
-            var cleanRoot = root.charAt(0) === '[' && root.charAt(root.length - 1) === ']' ? root.slice(1, -1) : root;
-            var index = parseInt(cleanRoot, 10);
-            if (
-                !isNaN(index)
-                && root !== cleanRoot
-                && String(index) === cleanRoot
-                && index >= 0
-                && (options.parseArrays && index <= options.arrayLimit)
-            ) {
-                obj = [];
-                obj[index] = leaf;
-            } else {
-                obj[cleanRoot] = leaf;
-            }
-        }
-
-        leaf = obj;
-    }
-
-    return leaf;
-};
-
-var parseKeys = function parseQueryStringKeys(givenKey, val, options) {
-    if (!givenKey) {
-        return;
-    }
-
-    // Transform dot notation to bracket notation
-    var key = options.allowDots ? givenKey.replace(/\.([^.[]+)/g, '[$1]') : givenKey;
-
-    // The regex chunks
-
-    var brackets = /(\[[^[\]]*])/;
-    var child = /(\[[^[\]]*])/g;
-
-    // Get the parent
-
-    var segment = brackets.exec(key);
-    var parent = segment ? key.slice(0, segment.index) : key;
-
-    // Stash the parent if it exists
-
-    var keys = [];
-    if (parent) {
-        // If we aren't using plain objects, optionally prefix keys
-        // that would overwrite object prototype properties
-        if (!options.plainObjects && has.call(Object.prototype, parent)) {
-            if (!options.allowPrototypes) {
-                return;
-            }
-        }
-
-        keys.push(parent);
-    }
-
-    // Loop through children appending to the array until we hit depth
-
-    var i = 0;
-    while ((segment = child.exec(key)) !== null && i < options.depth) {
-        i += 1;
-        if (!options.plainObjects && has.call(Object.prototype, segment[1].slice(1, -1))) {
-            if (!options.allowPrototypes) {
-                return;
-            }
-        }
-        keys.push(segment[1]);
-    }
-
-    // If there's a remainder, just add whatever is left
-
-    if (segment) {
-        keys.push('[' + key.slice(segment.index) + ']');
-    }
-
-    return parseObject(keys, val, options);
-};
-
-module.exports = function (str, opts) {
-    var options = opts ? utils.assign({}, opts) : {};
-
-    if (options.decoder !== null && options.decoder !== undefined && typeof options.decoder !== 'function') {
-        throw new TypeError('Decoder has to be a function.');
-    }
-
-    options.ignoreQueryPrefix = options.ignoreQueryPrefix === true;
-    options.delimiter = typeof options.delimiter === 'string' || utils.isRegExp(options.delimiter) ? options.delimiter : defaults.delimiter;
-    options.depth = typeof options.depth === 'number' ? options.depth : defaults.depth;
-    options.arrayLimit = typeof options.arrayLimit === 'number' ? options.arrayLimit : defaults.arrayLimit;
-    options.parseArrays = options.parseArrays !== false;
-    options.decoder = typeof options.decoder === 'function' ? options.decoder : defaults.decoder;
-    options.allowDots = typeof options.allowDots === 'boolean' ? options.allowDots : defaults.allowDots;
-    options.plainObjects = typeof options.plainObjects === 'boolean' ? options.plainObjects : defaults.plainObjects;
-    options.allowPrototypes = typeof options.allowPrototypes === 'boolean' ? options.allowPrototypes : defaults.allowPrototypes;
-    options.parameterLimit = typeof options.parameterLimit === 'number' ? options.parameterLimit : defaults.parameterLimit;
-    options.strictNullHandling = typeof options.strictNullHandling === 'boolean' ? options.strictNullHandling : defaults.strictNullHandling;
-
-    if (str === '' || str === null || typeof str === 'undefined') {
-        return options.plainObjects ? Object.create(null) : {};
-    }
-
-    var tempObj = typeof str === 'string' ? parseValues(str, options) : str;
-    var obj = options.plainObjects ? Object.create(null) : {};
-
-    // Iterate over the keys and setup the new object
-
-    var keys = Object.keys(tempObj);
-    for (var i = 0; i < keys.length; ++i) {
-        var key = keys[i];
-        var newObj = parseKeys(key, tempObj[key], options);
-        obj = utils.merge(obj, newObj, options);
-    }
-
-    return utils.compact(obj);
-};
-
-
-/***/ }),
-/* 785 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var utils = __webpack_require__(405);
-var formats = __webpack_require__(403);
-
-var arrayPrefixGenerators = {
-    brackets: function brackets(prefix) { // eslint-disable-line func-name-matching
-        return prefix + '[]';
-    },
-    indices: function indices(prefix, key) { // eslint-disable-line func-name-matching
-        return prefix + '[' + key + ']';
-    },
-    repeat: function repeat(prefix) { // eslint-disable-line func-name-matching
-        return prefix;
-    }
-};
-
-var toISO = Date.prototype.toISOString;
-
-var defaults = {
-    delimiter: '&',
-    encode: true,
-    encoder: utils.encode,
-    encodeValuesOnly: false,
-    serializeDate: function serializeDate(date) { // eslint-disable-line func-name-matching
-        return toISO.call(date);
-    },
-    skipNulls: false,
-    strictNullHandling: false
-};
-
-var stringify = function stringify( // eslint-disable-line func-name-matching
-    object,
-    prefix,
-    generateArrayPrefix,
-    strictNullHandling,
-    skipNulls,
-    encoder,
-    filter,
-    sort,
-    allowDots,
-    serializeDate,
-    formatter,
-    encodeValuesOnly
-) {
-    var obj = object;
-    if (typeof filter === 'function') {
-        obj = filter(prefix, obj);
-    } else if (obj instanceof Date) {
-        obj = serializeDate(obj);
-    } else if (obj === null) {
-        if (strictNullHandling) {
-            return encoder && !encodeValuesOnly ? encoder(prefix, defaults.encoder) : prefix;
-        }
-
-        obj = '';
-    }
-
-    if (typeof obj === 'string' || typeof obj === 'number' || typeof obj === 'boolean' || utils.isBuffer(obj)) {
-        if (encoder) {
-            var keyValue = encodeValuesOnly ? prefix : encoder(prefix, defaults.encoder);
-            return [formatter(keyValue) + '=' + formatter(encoder(obj, defaults.encoder))];
-        }
-        return [formatter(prefix) + '=' + formatter(String(obj))];
-    }
-
-    var values = [];
-
-    if (typeof obj === 'undefined') {
-        return values;
-    }
-
-    var objKeys;
-    if (Array.isArray(filter)) {
-        objKeys = filter;
-    } else {
-        var keys = Object.keys(obj);
-        objKeys = sort ? keys.sort(sort) : keys;
-    }
-
-    for (var i = 0; i < objKeys.length; ++i) {
-        var key = objKeys[i];
-
-        if (skipNulls && obj[key] === null) {
-            continue;
-        }
-
-        if (Array.isArray(obj)) {
-            values = values.concat(stringify(
-                obj[key],
-                generateArrayPrefix(prefix, key),
-                generateArrayPrefix,
-                strictNullHandling,
-                skipNulls,
-                encoder,
-                filter,
-                sort,
-                allowDots,
-                serializeDate,
-                formatter,
-                encodeValuesOnly
-            ));
-        } else {
-            values = values.concat(stringify(
-                obj[key],
-                prefix + (allowDots ? '.' + key : '[' + key + ']'),
-                generateArrayPrefix,
-                strictNullHandling,
-                skipNulls,
-                encoder,
-                filter,
-                sort,
-                allowDots,
-                serializeDate,
-                formatter,
-                encodeValuesOnly
-            ));
-        }
-    }
-
-    return values;
-};
-
-module.exports = function (object, opts) {
-    var obj = object;
-    var options = opts ? utils.assign({}, opts) : {};
-
-    if (options.encoder !== null && options.encoder !== undefined && typeof options.encoder !== 'function') {
-        throw new TypeError('Encoder has to be a function.');
-    }
-
-    var delimiter = typeof options.delimiter === 'undefined' ? defaults.delimiter : options.delimiter;
-    var strictNullHandling = typeof options.strictNullHandling === 'boolean' ? options.strictNullHandling : defaults.strictNullHandling;
-    var skipNulls = typeof options.skipNulls === 'boolean' ? options.skipNulls : defaults.skipNulls;
-    var encode = typeof options.encode === 'boolean' ? options.encode : defaults.encode;
-    var encoder = typeof options.encoder === 'function' ? options.encoder : defaults.encoder;
-    var sort = typeof options.sort === 'function' ? options.sort : null;
-    var allowDots = typeof options.allowDots === 'undefined' ? false : options.allowDots;
-    var serializeDate = typeof options.serializeDate === 'function' ? options.serializeDate : defaults.serializeDate;
-    var encodeValuesOnly = typeof options.encodeValuesOnly === 'boolean' ? options.encodeValuesOnly : defaults.encodeValuesOnly;
-    if (typeof options.format === 'undefined') {
-        options.format = formats['default'];
-    } else if (!Object.prototype.hasOwnProperty.call(formats.formatters, options.format)) {
-        throw new TypeError('Unknown format option provided.');
-    }
-    var formatter = formats.formatters[options.format];
-    var objKeys;
-    var filter;
-
-    if (typeof options.filter === 'function') {
-        filter = options.filter;
-        obj = filter('', obj);
-    } else if (Array.isArray(options.filter)) {
-        filter = options.filter;
-        objKeys = filter;
-    }
-
-    var keys = [];
-
-    if (typeof obj !== 'object' || obj === null) {
-        return '';
-    }
-
-    var arrayFormat;
-    if (options.arrayFormat in arrayPrefixGenerators) {
-        arrayFormat = options.arrayFormat;
-    } else if ('indices' in options) {
-        arrayFormat = options.indices ? 'indices' : 'repeat';
-    } else {
-        arrayFormat = 'indices';
-    }
-
-    var generateArrayPrefix = arrayPrefixGenerators[arrayFormat];
-
-    if (!objKeys) {
-        objKeys = Object.keys(obj);
-    }
-
-    if (sort) {
-        objKeys.sort(sort);
-    }
-
-    for (var i = 0; i < objKeys.length; ++i) {
-        var key = objKeys[i];
-
-        if (skipNulls && obj[key] === null) {
-            continue;
-        }
-
-        keys = keys.concat(stringify(
-            obj[key],
-            key,
-            generateArrayPrefix,
-            strictNullHandling,
-            skipNulls,
-            encode ? encoder : null,
-            filter,
-            sort,
-            allowDots,
-            serializeDate,
-            formatter,
-            encodeValuesOnly
-        ));
-    }
-
-    var joined = keys.join(delimiter);
-    var prefix = options.addQueryPrefix === true ? '?' : '';
-
-    return joined.length > 0 ? prefix + joined : '';
-};
-
-
-/***/ }),
-/* 786 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var strictUriEncode = __webpack_require__(943);
-var objectAssign = __webpack_require__(303);
-var decodeComponent = __webpack_require__(630);
-
-function encoderForArrayFormat(opts) {
-	switch (opts.arrayFormat) {
-		case 'index':
-			return function (key, value, index) {
-				return value === null ? [
-					encode(key, opts),
-					'[',
-					index,
-					']'
-				].join('') : [
-					encode(key, opts),
-					'[',
-					encode(index, opts),
-					']=',
-					encode(value, opts)
-				].join('');
-			};
-
-		case 'bracket':
-			return function (key, value) {
-				return value === null ? encode(key, opts) : [
-					encode(key, opts),
-					'[]=',
-					encode(value, opts)
-				].join('');
-			};
-
-		default:
-			return function (key, value) {
-				return value === null ? encode(key, opts) : [
-					encode(key, opts),
-					'=',
-					encode(value, opts)
-				].join('');
-			};
-	}
-}
-
-function parserForArrayFormat(opts) {
-	var result;
-
-	switch (opts.arrayFormat) {
-		case 'index':
-			return function (key, value, accumulator) {
-				result = /\[(\d*)\]$/.exec(key);
-
-				key = key.replace(/\[\d*\]$/, '');
-
-				if (!result) {
-					accumulator[key] = value;
-					return;
-				}
-
-				if (accumulator[key] === undefined) {
-					accumulator[key] = {};
-				}
-
-				accumulator[key][result[1]] = value;
-			};
-
-		case 'bracket':
-			return function (key, value, accumulator) {
-				result = /(\[\])$/.exec(key);
-				key = key.replace(/\[\]$/, '');
-
-				if (!result) {
-					accumulator[key] = value;
-					return;
-				} else if (accumulator[key] === undefined) {
-					accumulator[key] = [value];
-					return;
-				}
-
-				accumulator[key] = [].concat(accumulator[key], value);
-			};
-
-		default:
-			return function (key, value, accumulator) {
-				if (accumulator[key] === undefined) {
-					accumulator[key] = value;
-					return;
-				}
-
-				accumulator[key] = [].concat(accumulator[key], value);
-			};
-	}
-}
-
-function encode(value, opts) {
-	if (opts.encode) {
-		return opts.strict ? strictUriEncode(value) : encodeURIComponent(value);
-	}
-
-	return value;
-}
-
-function keysSorter(input) {
-	if (Array.isArray(input)) {
-		return input.sort();
-	} else if (typeof input === 'object') {
-		return keysSorter(Object.keys(input)).sort(function (a, b) {
-			return Number(a) - Number(b);
-		}).map(function (key) {
-			return input[key];
-		});
-	}
-
-	return input;
-}
-
-function extract(str) {
-	var queryStart = str.indexOf('?');
-	if (queryStart === -1) {
-		return '';
-	}
-	return str.slice(queryStart + 1);
-}
-
-function parse(str, opts) {
-	opts = objectAssign({arrayFormat: 'none'}, opts);
-
-	var formatter = parserForArrayFormat(opts);
-
-	// Create an object with no prototype
-	// https://github.com/sindresorhus/query-string/issues/47
-	var ret = Object.create(null);
-
-	if (typeof str !== 'string') {
-		return ret;
-	}
-
-	str = str.trim().replace(/^[?#&]/, '');
-
-	if (!str) {
-		return ret;
-	}
-
-	str.split('&').forEach(function (param) {
-		var parts = param.replace(/\+/g, ' ').split('=');
-		// Firefox (pre 40) decodes `%3D` to `=`
-		// https://github.com/sindresorhus/query-string/pull/37
-		var key = parts.shift();
-		var val = parts.length > 0 ? parts.join('=') : undefined;
-
-		// missing `=` should be `null`:
-		// http://w3.org/TR/2012/WD-url-20120524/#collect-url-parameters
-		val = val === undefined ? null : decodeComponent(val);
-
-		formatter(decodeComponent(key), val, ret);
-	});
-
-	return Object.keys(ret).sort().reduce(function (result, key) {
-		var val = ret[key];
-		if (Boolean(val) && typeof val === 'object' && !Array.isArray(val)) {
-			// Sort object keys, not values
-			result[key] = keysSorter(val);
-		} else {
-			result[key] = val;
-		}
-
-		return result;
-	}, Object.create(null));
-}
-
-exports.extract = extract;
-exports.parse = parse;
-
-exports.stringify = function (obj, opts) {
-	var defaults = {
-		encode: true,
-		strict: true,
-		arrayFormat: 'none'
-	};
-
-	opts = objectAssign(defaults, opts);
-
-	if (opts.sort === false) {
-		opts.sort = function () {};
-	}
-
-	var formatter = encoderForArrayFormat(opts);
-
-	return obj ? Object.keys(obj).sort(opts.sort).map(function (key) {
-		var val = obj[key];
-
-		if (val === undefined) {
-			return '';
-		}
-
-		if (val === null) {
-			return encode(key, opts);
-		}
-
-		if (Array.isArray(val)) {
-			var result = [];
-
-			val.slice().forEach(function (val2) {
-				if (val2 === undefined) {
-					return;
-				}
-
-				result.push(formatter(key, val2, result.length));
-			});
-
-			return result.join('&');
-		}
-
-		return encode(key, opts) + '=' + encode(val, opts);
-	}).filter(function (x) {
-		return x.length > 0;
-	}).join('&') : '';
-};
-
-exports.parseUrl = function (str, opts) {
-	return {
-		url: str.split('?')[0] || '',
-		query: parse(extract(str), opts)
-	};
-};
-
-
-/***/ }),
-/* 787 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * randomatic <https://github.com/jonschlinkert/randomatic>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-var isNumber = __webpack_require__(788);
-var typeOf = __webpack_require__(789);
-var mathRandom = __webpack_require__(751);
-
-/**
- * Expose `randomatic`
- */
-
-module.exports = randomatic;
-module.exports.isCrypto = !!mathRandom.cryptographic;
-
-/**
- * Available mask characters
- */
-
-var type = {
-  lower: 'abcdefghijklmnopqrstuvwxyz',
-  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-  number: '0123456789',
-  special: '~!@#$%^&()_+-={}[];\',.'
-};
-
-type.all = type.lower + type.upper + type.number + type.special;
-
-/**
- * Generate random character sequences of a specified `length`,
- * based on the given `pattern`.
- *
- * @param {String} `pattern` The pattern to use for generating the random string.
- * @param {String} `length` The length of the string to generate.
- * @param {String} `options`
- * @return {String}
- * @api public
- */
-
-function randomatic(pattern, length, options) {
-  if (typeof pattern === 'undefined') {
-    throw new Error('randomatic expects a string or number.');
-  }
-
-  var custom = false;
-  if (arguments.length === 1) {
-    if (typeof pattern === 'string') {
-      length = pattern.length;
-
-    } else if (isNumber(pattern)) {
-      options = {};
-      length = pattern;
-      pattern = '*';
-    }
-  }
-
-  if (typeOf(length) === 'object' && length.hasOwnProperty('chars')) {
-    options = length;
-    pattern = options.chars;
-    length = pattern.length;
-    custom = true;
-  }
-
-  var opts = options || {};
-  var mask = '';
-  var res = '';
-
-  // Characters to be used
-  if (pattern.indexOf('?') !== -1) mask += opts.chars;
-  if (pattern.indexOf('a') !== -1) mask += type.lower;
-  if (pattern.indexOf('A') !== -1) mask += type.upper;
-  if (pattern.indexOf('0') !== -1) mask += type.number;
-  if (pattern.indexOf('!') !== -1) mask += type.special;
-  if (pattern.indexOf('*') !== -1) mask += type.all;
-  if (custom) mask += pattern;
-
-  while (length--) {
-    res += mask.charAt(parseInt(mathRandom() * mask.length, 10));
-  }
-  return res;
-};
-
-
-/***/ }),
-/* 788 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * is-number <https://github.com/jonschlinkert/is-number>
- *
- * Copyright (c) 2014-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-module.exports = function isNumber(num) {
-  var type = typeof num;
-
-  if (type === 'string' || num instanceof String) {
-    // an empty string would be coerced to true with the below logic
-    if (!num.trim()) return false;
-  } else if (type !== 'number' && !(num instanceof Number)) {
-    return false;
-  }
-
-  return (num - num + 1) >= 0;
-};
-
-
-/***/ }),
-/* 789 */
-/***/ (function(module, exports) {
-
-var toString = Object.prototype.toString;
-
-module.exports = function kindOf(val) {
-  if (val === void 0) return 'undefined';
-  if (val === null) return 'null';
-
-  var type = typeof val;
-  if (type === 'boolean') return 'boolean';
-  if (type === 'string') return 'string';
-  if (type === 'number') return 'number';
-  if (type === 'symbol') return 'symbol';
-  if (type === 'function') {
-    return isGeneratorFn(val) ? 'generatorfunction' : 'function';
-  }
-
-  if (isArray(val)) return 'array';
-  if (isBuffer(val)) return 'buffer';
-  if (isArguments(val)) return 'arguments';
-  if (isDate(val)) return 'date';
-  if (isError(val)) return 'error';
-  if (isRegexp(val)) return 'regexp';
-
-  switch (ctorName(val)) {
-    case 'Symbol': return 'symbol';
-    case 'Promise': return 'promise';
-
-    // Set, Map, WeakSet, WeakMap
-    case 'WeakMap': return 'weakmap';
-    case 'WeakSet': return 'weakset';
-    case 'Map': return 'map';
-    case 'Set': return 'set';
-
-    // 8-bit typed arrays
-    case 'Int8Array': return 'int8array';
-    case 'Uint8Array': return 'uint8array';
-    case 'Uint8ClampedArray': return 'uint8clampedarray';
-
-    // 16-bit typed arrays
-    case 'Int16Array': return 'int16array';
-    case 'Uint16Array': return 'uint16array';
-
-    // 32-bit typed arrays
-    case 'Int32Array': return 'int32array';
-    case 'Uint32Array': return 'uint32array';
-    case 'Float32Array': return 'float32array';
-    case 'Float64Array': return 'float64array';
-  }
-
-  if (isGeneratorObj(val)) {
-    return 'generator';
-  }
-
-  // Non-plain objects
-  type = toString.call(val);
-  switch (type) {
-    case '[object Object]': return 'object';
-    // iterators
-    case '[object Map Iterator]': return 'mapiterator';
-    case '[object Set Iterator]': return 'setiterator';
-    case '[object String Iterator]': return 'stringiterator';
-    case '[object Array Iterator]': return 'arrayiterator';
-  }
-
-  // other
-  return type.slice(8, -1).toLowerCase().replace(/\s/g, '');
-};
-
-function ctorName(val) {
-  return val.constructor ? val.constructor.name : null;
-}
-
-function isArray(val) {
-  if (Array.isArray) return Array.isArray(val);
-  return val instanceof Array;
-}
-
-function isError(val) {
-  return val instanceof Error || (typeof val.message === 'string' && val.constructor && typeof val.constructor.stackTraceLimit === 'number');
-}
-
-function isDate(val) {
-  if (val instanceof Date) return true;
-  return typeof val.toDateString === 'function'
-    && typeof val.getDate === 'function'
-    && typeof val.setDate === 'function';
-}
-
-function isRegexp(val) {
-  if (val instanceof RegExp) return true;
-  return typeof val.flags === 'string'
-    && typeof val.ignoreCase === 'boolean'
-    && typeof val.multiline === 'boolean'
-    && typeof val.global === 'boolean';
-}
-
-function isGeneratorFn(name, val) {
-  return ctorName(name) === 'GeneratorFunction';
-}
-
-function isGeneratorObj(val) {
-  return typeof val.throw === 'function'
-    && typeof val.return === 'function'
-    && typeof val.next === 'function';
-}
-
-function isArguments(val) {
-  try {
-    if (typeof val.length === 'number' && typeof val.callee === 'function') {
-      return true;
-    }
-  } catch (err) {
-    if (err.message.indexOf('callee') !== -1) {
-      return true;
-    }
-  }
-  return false;
-}
-
-/**
- * If you need to support Safari 5-7 (8-10 yr-old browser),
- * take a look at https://github.com/feross/is-buffer
- */
-
-function isBuffer(val) {
-  if (val.constructor && typeof val.constructor.isBuffer === 'function') {
-    return val.constructor.isBuffer(val);
-  }
-  return false;
-}
-
-
-/***/ }),
-/* 790 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-module.exports = read
-
-var readline = __webpack_require__(197)
-var Mute = __webpack_require__(401)
-
-function read (opts, cb) {
-  if (opts.num) {
-    throw new Error('read() no longer accepts a char number limit')
-  }
-
-  if (typeof opts.default !== 'undefined' &&
-      typeof opts.default !== 'string' &&
-      typeof opts.default !== 'number') {
-    throw new Error('default value must be string or number')
-  }
-
-  var input = opts.input || process.stdin
-  var output = opts.output || process.stdout
-  var prompt = (opts.prompt || '').trim() + ' '
-  var silent = opts.silent
-  var editDef = false
-  var timeout = opts.timeout
-
-  var def = opts.default || ''
-  if (def) {
-    if (silent) {
-      prompt += '(<default hidden>) '
-    } else if (opts.edit) {
-      editDef = true
-    } else {
-      prompt += '(' + def + ') '
-    }
-  }
-  var terminal = !!(opts.terminal || output.isTTY)
-
-  var m = new Mute({ replace: opts.replace, prompt: prompt })
-  m.pipe(output, {end: false})
-  output = m
-  var rlOpts = { input: input, output: output, terminal: terminal }
-
-  if (process.version.match(/^v0\.6/)) {
-    var rl = readline.createInterface(rlOpts.input, rlOpts.output)
-  } else {
-    var rl = readline.createInterface(rlOpts)
-  }
-
-
-  output.unmute()
-  rl.setPrompt(prompt)
-  rl.prompt()
-  if (silent) {
-    output.mute()
-  } else if (editDef) {
-    rl.line = def
-    rl.cursor = def.length
-    rl._refreshLine()
-  }
-
-  var called = false
-  rl.on('line', onLine)
-  rl.on('error', onError)
-
-  rl.on('SIGINT', function () {
-    rl.close()
-    onError(new Error('canceled'))
-  })
-
-  var timer
-  if (timeout) {
-    timer = setTimeout(function () {
-      onError(new Error('timed out'))
-    }, timeout)
-  }
-
-  function done () {
-    called = true
-    rl.close()
-
-    if (process.version.match(/^v0\.6/)) {
-      rl.input.removeAllListeners('data')
-      rl.input.removeAllListeners('keypress')
-      rl.input.pause()
-    }
-
-    clearTimeout(timer)
-    output.mute()
-    output.end()
-  }
-
-  function onError (er) {
-    if (called) return
-    done()
-    return cb(er)
-  }
-
-  function onLine (line) {
-    if (called) return
-    if (silent && terminal) {
-      output.unmute()
-      output.write('\r\n')
-    }
-    done()
-    // truncate the \n at the end.
-    line = line.replace(/\r?\n$/, '')
-    var isDefault = !!(editDef && line === def)
-    if (def && !line) {
-      isDefault = true
-      line = def
-    }
-    cb(null, line, isDefault)
-  }
-}
-
-
-/***/ }),
-/* 791 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(102).Duplex
-
-
-/***/ }),
-/* 792 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright Joyent, Inc. and other Node contributors.
-//
-// Permission is hereby granted, free of charge, to any person obtaining a
-// copy of this software and associated documentation files (the
-// "Software"), to deal in the Software without restriction, including
-// without limitation the rights to use, copy, modify, merge, publish,
-// distribute, sublicense, and/or sell copies of the Software, and to permit
-// persons to whom the Software is furnished to do so, subject to the
-// following conditions:
-//
-// The above copyright notice and this permission notice shall be included
-// in all copies or substantial portions of the Software.
-//
-// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
-// OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
-// MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN
-// NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM,
-// DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
-// OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE
-// USE OR OTHER DEALINGS IN THE SOFTWARE.
-
-// a passthrough stream.
-// basically just the most minimal sort of Transform stream.
-// Every written chunk gets output as-is.
-
-
-
-module.exports = PassThrough;
-
-var Transform = __webpack_require__(407);
-
-/*<replacement>*/
-var util = __webpack_require__(113);
-util.inherits = __webpack_require__(61);
-/*</replacement>*/
-
-util.inherits(PassThrough, Transform);
-
-function PassThrough(options) {
-  if (!(this instanceof PassThrough)) return new PassThrough(options);
-
-  Transform.call(this, options);
-}
-
-PassThrough.prototype._transform = function (chunk, encoding, cb) {
-  cb(null, chunk);
-};
-
-/***/ }),
-/* 793 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-var Buffer = __webpack_require__(45).Buffer;
-var util = __webpack_require__(3);
-
-function copyBuffer(src, target, offset) {
-  src.copy(target, offset);
-}
-
-module.exports = function () {
-  function BufferList() {
-    _classCallCheck(this, BufferList);
-
-    this.head = null;
-    this.tail = null;
-    this.length = 0;
-  }
-
-  BufferList.prototype.push = function push(v) {
-    var entry = { data: v, next: null };
-    if (this.length > 0) this.tail.next = entry;else this.head = entry;
-    this.tail = entry;
-    ++this.length;
-  };
-
-  BufferList.prototype.unshift = function unshift(v) {
-    var entry = { data: v, next: this.head };
-    if (this.length === 0) this.tail = entry;
-    this.head = entry;
-    ++this.length;
-  };
-
-  BufferList.prototype.shift = function shift() {
-    if (this.length === 0) return;
-    var ret = this.head.data;
-    if (this.length === 1) this.head = this.tail = null;else this.head = this.head.next;
-    --this.length;
-    return ret;
-  };
-
-  BufferList.prototype.clear = function clear() {
-    this.head = this.tail = null;
-    this.length = 0;
-  };
-
-  BufferList.prototype.join = function join(s) {
-    if (this.length === 0) return '';
-    var p = this.head;
-    var ret = '' + p.data;
-    while (p = p.next) {
-      ret += s + p.data;
-    }return ret;
-  };
-
-  BufferList.prototype.concat = function concat(n) {
-    if (this.length === 0) return Buffer.alloc(0);
-    if (this.length === 1) return this.head.data;
-    var ret = Buffer.allocUnsafe(n >>> 0);
-    var p = this.head;
-    var i = 0;
-    while (p) {
-      copyBuffer(p.data, ret, i);
-      i += p.data.length;
-      p = p.next;
-    }
-    return ret;
-  };
-
-  return BufferList;
-}();
-
-if (util && util.inspect && util.inspect.custom) {
-  module.exports.prototype[util.inspect.custom] = function () {
-    var obj = util.inspect({ length: this.length });
-    return this.constructor.name + ' ' + obj;
-  };
-}
-
-/***/ }),
-/* 794 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(102).Transform
-
-
-/***/ }),
-/* 795 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * regex-cache <https://github.com/jonschlinkert/regex-cache>
- *
- * Copyright (c) 2015-2017, Jon Schlinkert.
- * Released under the MIT License.
- */
-
-
-
-var equal = __webpack_require__(734);
-var basic = {};
-var cache = {};
-
-/**
- * Expose `regexCache`
- */
-
-module.exports = regexCache;
-
-/**
- * Memoize the results of a call to the new RegExp constructor.
- *
- * @param  {Function} fn [description]
- * @param  {String} str [description]
- * @param  {Options} options [description]
- * @param  {Boolean} nocompare [description]
- * @return {RegExp}
- */
-
-function regexCache(fn, str, opts) {
-  var key = '_default_', regex, cached;
-
-  if (!str && !opts) {
-    if (typeof fn !== 'function') {
-      return fn;
-    }
-    return basic[key] || (basic[key] = fn(str));
-  }
-
-  var isString = typeof str === 'string';
-  if (isString) {
-    if (!opts) {
-      return basic[str] || (basic[str] = fn(str));
-    }
-    key = str;
-  } else {
-    opts = str;
-  }
-
-  cached = cache[key];
-  if (cached && equal(cached.opts, opts)) {
-    return cached.regex;
-  }
-
-  memo(key, opts, (regex = fn(str, opts)));
-  return regex;
-}
-
-function memo(key, opts, regex) {
-  cache[key] = {regex: regex, opts: opts};
-}
-
-/**
- * Expose `cache`
- */
-
-module.exports.cache = cache;
-module.exports.basic = basic;
-
-
-/***/ }),
-/* 796 */
-/***/ (function(module, exports) {
-
-var isWin = process.platform === 'win32';
-
-module.exports = function (str) {
-	var i = str.length - 1;
-	if (i < 2) {
-		return str;
-	}
-	while (isSeparator(str, i)) {
-		i--;
-	}
-	return str.substr(0, i + 1);
-};
-
-function isSeparator(str, i) {
-	var char = str[i];
-	return i > 0 && (char === '/' || (isWin && char === '\\'));
-}
-
-
-/***/ }),
-/* 797 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * repeat-string <https://github.com/jonschlinkert/repeat-string>
- *
- * Copyright (c) 2014-2015, Jon Schlinkert.
- * Licensed under the MIT License.
- */
-
-
-
-/**
- * Results cache
- */
-
-var res = '';
-var cache;
-
-/**
- * Expose `repeat`
- */
-
-module.exports = repeat;
-
-/**
- * Repeat the given `string` the specified `number`
- * of times.
- *
- * **Example:**
- *
- * ```js
- * var repeat = require('repeat-string');
- * repeat('A', 5);
- * //=> AAAAA
- * ```
- *
- * @param {String} `string` The string to repeat
- * @param {Number} `number` The number of times to repeat the string
- * @return {String} Repeated string
- * @api public
- */
-
-function repeat(str, num) {
-  if (typeof str !== 'string') {
-    throw new TypeError('expected a string');
-  }
-
-  // cover common, quick use cases
-  if (num === 1) return str;
-  if (num === 2) return str + str;
-
-  var max = str.length * num;
-  if (cache !== str || typeof cache === 'undefined') {
-    cache = str;
-    res = '';
-  } else if (res.length >= max) {
-    return res.substr(0, max);
-  }
-
-  while (max > res.length && num > 1) {
-    if (num & 1) {
-      res += str;
-    }
-
-    num >>= 1;
-    str += str;
-  }
-
-  res += str;
-  res = res.substr(0, max);
-  return res;
-}
-
-
-/***/ }),
-/* 798 */
-/***/ (function(module, exports) {
-
-module.exports = {"name":"request-capture-har","version":"1.2.2","description":"Wrapper for request module that saves all traffic as a HAR file, useful for auto mocking a client","main":"request-capture-har.js","scripts":{"test":"semistandard","travis":"npm test && node request-capture-har.js"},"repository":{"type":"git","url":"git+https://github.com/paulirish/node-request-capture-har.git"},"keywords":["http","request","har"],"author":"Lars Thorup <lars@zealake.com> (http://github.com/larsthorup)","license":"MIT","bugs":{"url":"https://github.com/paulirish/node-request-capture-har/issues"},"homepage":"https://github.com/paulirish/node-request-capture-har#readme","files":["request-capture-har.js"],"devDependencies":{"semistandard":"^8.0.0"}}
-
-/***/ }),
-/* 799 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var fs = __webpack_require__(5);
-var pkg = __webpack_require__(798);
-
-function buildHarHeaders (headers) {
-  return headers ? Object.keys(headers).map(function (key) {
-    return {
-      name: key,
-      // header values are required to be strings
-      value: headers[key].toString()
-    };
-  }) : [];
-}
-
-function appendPostData (entry, request) {
-  if (!request.body) return;
-
-  entry.request.postData = {
-    mimeType: 'application/octet-stream',
-    text: request.body
-  };
-}
-
-function toMs (num) {
-  return Math.round(num * 1000) / 1000;
-}
-
-function HarWrapper (requestModule) {
-  this.requestModule = requestModule;
-  this.clear();
-}
-
-HarWrapper.prototype.request = function (options) {
-  // include detailed timing data in response object
-  Object.assign(options, { time: true });
-  var self = this;
-  // make call to true request module
-  return this.requestModule(options, function (err, incomingMessage, response) {
-    // create new har entry with reponse timings
-    if (!err) {
-      self.entries.push(self.buildHarEntry(incomingMessage));
-    }
-
-    // fire any callback provided in options, as request has ignored it
-    //     https://github.com/request/request/blob/v2.75.0/index.js#L40
-    if (typeof options.callback === 'function') {
-      options.callback.apply(null, arguments);
-    }
-  });
-};
-
-HarWrapper.prototype.clear = function () {
-  this.entries = [];
-  this.earliestTime = new Date(2099, 1, 1);
-};
-
-HarWrapper.prototype.saveHar = function (fileName) {
-  var httpArchive = {
-    log: {
-      version: '1.2',
-      creator: {name: 'request-capture-har', version: pkg.version},
-      pages: [{
-        startedDateTime: new Date(this.earliestTime).toISOString(),
-        id: 'request-capture-har',
-        title: 'request-capture-har',
-        pageTimings: { }
-      }],
-      entries: this.entries
-    }
-  };
-  fs.writeFileSync(fileName, JSON.stringify(httpArchive, null, 2));
-};
-
-HarWrapper.prototype.buildTimings = function (entry, response) {
-  var startTs = response.request.startTime;
-  var endTs = startTs + response.elapsedTime;
-  var totalTime = endTs - startTs;
-
-  if (new Date(startTs) < this.earliestTime) {
-    this.earliestTime = new Date(startTs);
-  }
-  entry.startedDateTime = new Date(startTs).toISOString();
-  entry.time = totalTime;
-
-  // new timing data added in request 2.81.0
-  if (response.timingPhases) {
-    entry.timings = {
-      'blocked': toMs(response.timingPhases.wait),
-      'dns': toMs(response.timingPhases.dns),
-      'connect': toMs(response.timingPhases.tcp),
-      'send': 0,
-      'wait': toMs(response.timingPhases.firstByte),
-      'receive': toMs(response.timingPhases.download)
-    };
-    return;
-  }
-
-  var responseStartTs = response.request.response.responseStartTime;
-
-  var waitingTime = responseStartTs - startTs;
-  var receiveTime = endTs - responseStartTs;
-  entry.timings = {
-    send: 0,
-    wait: waitingTime,
-    receive: receiveTime
-  };
-};
-
-HarWrapper.prototype.buildHarEntry = function (response) {
-  var entry = {
-    request: {
-      method: response.request.method,
-      url: response.request.uri.href,
-      httpVersion: 'HTTP/' + response.httpVersion,
-      cookies: [],
-      headers: buildHarHeaders(response.request.headers),
-      queryString: [],
-      headersSize: -1,
-      bodySize: -1
-    },
-    response: {
-      status: response.statusCode,
-      statusText: response.statusMessage,
-      httpVersion: 'HTTP/' + response.httpVersion,
-      cookies: [],
-      headers: buildHarHeaders(response.headers),
-      _transferSize: response.body.length,
-      content: {
-        size: response.body.length,
-        mimeType: response.headers['content-type']
-      },
-      redirectURL: '',
-      headersSize: -1,
-      bodySize: -1
-    },
-    cache: {}
-  };
-  this.buildTimings(entry, response);
-  appendPostData(entry, response.request);
-  return entry;
-};
-
-module.exports = HarWrapper;
-
-
-/***/ }),
-/* 800 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-// Copyright 2010-2012 Mikeal Rogers
-//
-//    Licensed under the Apache License, Version 2.0 (the "License");
-//    you may not use this file except in compliance with the License.
-//    You may obtain a copy of the License at
-//
-//        http://www.apache.org/licenses/LICENSE-2.0
-//
-//    Unless required by applicable law or agreed to in writing, software
-//    distributed under the License is distributed on an "AS IS" BASIS,
-//    WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-//    See the License for the specific language governing permissions and
-//    limitations under the License.
-
-
-
-var extend = __webpack_require__(269)
-var cookies = __webpack_require__(412)
-var helpers = __webpack_require__(305)
-
-var paramsHaveRequestBody = helpers.paramsHaveRequestBody
-
-// organize params for patch, post, put, head, del
-function initParams (uri, options, callback) {
-  if (typeof options === 'function') {
-    callback = options
-  }
-
-  var params = {}
-  if (typeof options === 'object') {
-    extend(params, options, {uri: uri})
-  } else if (typeof uri === 'string') {
-    extend(params, {uri: uri})
-  } else {
-    extend(params, uri)
-  }
-
-  params.callback = callback || params.callback
-  return params
-}
-
-function request (uri, options, callback) {
-  if (typeof uri === 'undefined') {
-    throw new Error('undefined is not a valid uri or options object.')
-  }
-
-  var params = initParams(uri, options, callback)
-
-  if (params.method === 'HEAD' && paramsHaveRequestBody(params)) {
-    throw new Error('HTTP HEAD requests MUST NOT include a request body.')
-  }
-
-  return new request.Request(params)
-}
-
-function verbFunc (verb) {
-  var method = verb.toUpperCase()
-  return function (uri, options, callback) {
-    var params = initParams(uri, options, callback)
-    params.method = method
-    return request(params, params.callback)
-  }
-}
-
-// define like this to please codeintel/intellisense IDEs
-request.get = verbFunc('get')
-request.head = verbFunc('head')
-request.options = verbFunc('options')
-request.post = verbFunc('post')
-request.put = verbFunc('put')
-request.patch = verbFunc('patch')
-request.del = verbFunc('delete')
-request['delete'] = verbFunc('delete')
-
-request.jar = function (store) {
-  return cookies.jar(store)
-}
-
-request.cookie = function (str) {
-  return cookies.parse(str)
-}
-
-function wrapRequestMethod (method, options, requester, verb) {
-  return function (uri, opts, callback) {
-    var params = initParams(uri, opts, callback)
-
-    var target = {}
-    extend(true, target, options, params)
-
-    target.pool = params.pool || options.pool
-
-    if (verb) {
-      target.method = verb.toUpperCase()
-    }
-
-    if (typeof requester === 'function') {
-      method = requester
-    }
-
-    return method(target, target.callback)
-  }
-}
-
-request.defaults = function (options, requester) {
-  var self = this
-
-  options = options || {}
-
-  if (typeof options === 'function') {
-    requester = options
-    options = {}
-  }
-
-  var defaults = wrapRequestMethod(self, options, requester)
-
-  var verbs = ['get', 'head', 'post', 'put', 'patch', 'del', 'delete']
-  verbs.forEach(function (verb) {
-    defaults[verb] = wrapRequestMethod(self[verb], options, requester, verb)
-  })
-
-  defaults.cookie = wrapRequestMethod(self.cookie, options, requester)
-  defaults.jar = self.jar
-  defaults.defaults = self.defaults
-  return defaults
-}
-
-request.forever = function (agentOptions, optionsArg) {
-  var options = {}
-  if (optionsArg) {
-    extend(options, optionsArg)
-  }
-  if (agentOptions) {
-    options.agentOptions = agentOptions
-  }
-
-  options.forever = true
-  return request.defaults(options)
-}
-
-// Exports
-
-module.exports = request
-request.Request = __webpack_require__(813)
-request.initParams = initParams
-
-// Backwards compatibility for request.debug
-Object.defineProperty(request, 'debug', {
-  enumerable: true,
-  get: function () {
-    return request.Request.debug
-  },
-  set: function (debug) {
-    request.Request.debug = debug
-  }
-})
-
-
-/***/ }),
-/* 801 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var caseless = __webpack_require__(231)
-var uuid = __webpack_require__(119)
-var helpers = __webpack_require__(305)
-
-var md5 = helpers.md5
-var toBase64 = helpers.toBase64
-
-function Auth (request) {
-  // define all public properties here
-  this.request = request
-  this.hasAuth = false
-  this.sentAuth = false
-  this.bearerToken = null
-  this.user = null
-  this.pass = null
-}
-
-Auth.prototype.basic = function (user, pass, sendImmediately) {
-  var self = this
-  if (typeof user !== 'string' || (pass !== undefined && typeof pass !== 'string')) {
-    self.request.emit('error', new Error('auth() received invalid user or password'))
-  }
-  self.user = user
-  self.pass = pass
-  self.hasAuth = true
-  var header = user + ':' + (pass || '')
-  if (sendImmediately || typeof sendImmediately === 'undefined') {
-    var authHeader = 'Basic ' + toBase64(header)
-    self.sentAuth = true
-    return authHeader
-  }
-}
-
-Auth.prototype.bearer = function (bearer, sendImmediately) {
-  var self = this
-  self.bearerToken = bearer
-  self.hasAuth = true
-  if (sendImmediately || typeof sendImmediately === 'undefined') {
-    if (typeof bearer === 'function') {
-      bearer = bearer()
-    }
-    var authHeader = 'Bearer ' + (bearer || '')
-    self.sentAuth = true
-    return authHeader
-  }
-}
-
-Auth.prototype.digest = function (method, path, authHeader) {
-  // TODO: More complete implementation of RFC 2617.
-  //   - handle challenge.domain
-  //   - support qop="auth-int" only
-  //   - handle Authentication-Info (not necessarily?)
-  //   - check challenge.stale (not necessarily?)
-  //   - increase nc (not necessarily?)
-  // For reference:
-  // http://tools.ietf.org/html/rfc2617#section-3
-  // https://github.com/bagder/curl/blob/master/lib/http_digest.c
-
-  var self = this
-
-  var challenge = {}
-  var re = /([a-z0-9_-]+)=(?:"([^"]+)"|([a-z0-9_-]+))/gi
-  for (;;) {
-    var match = re.exec(authHeader)
-    if (!match) {
-      break
-    }
-    challenge[match[1]] = match[2] || match[3]
-  }
-
-  /**
-   * RFC 2617: handle both MD5 and MD5-sess algorithms.
-   *
-   * If the algorithm directive's value is "MD5" or unspecified, then HA1 is
-   *   HA1=MD5(username:realm:password)
-   * If the algorithm directive's value is "MD5-sess", then HA1 is
-   *   HA1=MD5(MD5(username:realm:password):nonce:cnonce)
-   */
-  var ha1Compute = function (algorithm, user, realm, pass, nonce, cnonce) {
-    var ha1 = md5(user + ':' + realm + ':' + pass)
-    if (algorithm && algorithm.toLowerCase() === 'md5-sess') {
-      return md5(ha1 + ':' + nonce + ':' + cnonce)
-    } else {
-      return ha1
-    }
-  }
-
-  var qop = /(^|,)\s*auth\s*($|,)/.test(challenge.qop) && 'auth'
-  var nc = qop && '00000001'
-  var cnonce = qop && uuid().replace(/-/g, '')
-  var ha1 = ha1Compute(challenge.algorithm, self.user, challenge.realm, self.pass, challenge.nonce, cnonce)
-  var ha2 = md5(method + ':' + path)
-  var digestResponse = qop
-    ? md5(ha1 + ':' + challenge.nonce + ':' + nc + ':' + cnonce + ':' + qop + ':' + ha2)
-    : md5(ha1 + ':' + challenge.nonce + ':' + ha2)
-  var authValues = {
-    username: self.user,
-    realm: challenge.realm,
-    nonce: challenge.nonce,
-    uri: path,
-    qop: qop,
-    response: digestResponse,
-    nc: nc,
-    cnonce: cnonce,
-    algorithm: challenge.algorithm,
-    opaque: challenge.opaque
-  }
-
-  authHeader = []
-  for (var k in authValues) {
-    if (authValues[k]) {
-      if (k === 'qop' || k === 'nc' || k === 'algorithm') {
-        authHeader.push(k + '=' + authValues[k])
-      } else {
-        authHeader.push(k + '="' + authValues[k] + '"')
-      }
-    }
-  }
-  authHeader = 'Digest ' + authHeader.join(', ')
-  self.sentAuth = true
-  return authHeader
-}
-
-Auth.prototype.onRequest = function (user, pass, sendImmediately, bearer) {
-  var self = this
-  var request = self.request
-
-  var authHeader
-  if (bearer === undefined && user === undefined) {
-    self.request.emit('error', new Error('no auth mechanism defined'))
-  } else if (bearer !== undefined) {
-    authHeader = self.bearer(bearer, sendImmediately)
-  } else {
-    authHeader = self.basic(user, pass, sendImmediately)
-  }
-  if (authHeader) {
-    request.setHeader('authorization', authHeader)
-  }
-}
-
-Auth.prototype.onResponse = function (response) {
-  var self = this
-  var request = self.request
-
-  if (!self.hasAuth || self.sentAuth) { return null }
-
-  var c = caseless(response.headers)
-
-  var authHeader = c.get('www-authenticate')
-  var authVerb = authHeader && authHeader.split(' ')[0].toLowerCase()
-  request.debug('reauth', authVerb)
-
-  switch (authVerb) {
-    case 'basic':
-      return self.basic(self.user, self.pass, true)
-
-    case 'bearer':
-      return self.bearer(self.bearerToken, true)
-
-    case 'digest':
-      return self.digest(request.method, request.path, authHeader)
-  }
-}
-
-exports.Auth = Auth
-
-
-/***/ }),
-/* 802 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-function formatHostname (hostname) {
-  // canonicalize the hostname, so that 'oogle.com' won't match 'google.com'
-  return hostname.replace(/^\.*/, '.').toLowerCase()
-}
-
-function parseNoProxyZone (zone) {
-  zone = zone.trim().toLowerCase()
-
-  var zoneParts = zone.split(':', 2)
-  var zoneHost = formatHostname(zoneParts[0])
-  var zonePort = zoneParts[1]
-  var hasPort = zone.indexOf(':') > -1
-
-  return {hostname: zoneHost, port: zonePort, hasPort: hasPort}
-}
-
-function uriInNoProxy (uri, noProxy) {
-  var port = uri.port || (uri.protocol === 'https:' ? '443' : '80')
-  var hostname = formatHostname(uri.hostname)
-  var noProxyList = noProxy.split(',')
-
-  // iterate through the noProxyList until it finds a match.
-  return noProxyList.map(parseNoProxyZone).some(function (noProxyZone) {
-    var isMatchedAt = hostname.indexOf(noProxyZone.hostname)
-    var hostnameMatched = (
-      isMatchedAt > -1 &&
-        (isMatchedAt === hostname.length - noProxyZone.hostname.length)
-    )
-
-    if (noProxyZone.hasPort) {
-      return (port === noProxyZone.port) && hostnameMatched
-    }
-
-    return hostnameMatched
-  })
-}
-
-function getProxyFromURI (uri) {
-  // Decide the proper request proxy to use based on the request URI object and the
-  // environmental variables (NO_PROXY, HTTP_PROXY, etc.)
-  // respect NO_PROXY environment variables (see: http://lynx.isc.org/current/breakout/lynx_help/keystrokes/environments.html)
-
-  var noProxy = process.env.NO_PROXY || process.env.no_proxy || ''
-
-  // if the noProxy is a wildcard then return null
-
-  if (noProxy === '*') {
-    return null
-  }
-
-  // if the noProxy is not empty and the uri is found return null
-
-  if (noProxy !== '' && uriInNoProxy(uri, noProxy)) {
-    return null
-  }
-
-  // Check for HTTP or HTTPS Proxy in environment Else default to null
-
-  if (uri.protocol === 'http:') {
-    return process.env.HTTP_PROXY ||
-      process.env.http_proxy || null
-  }
-
-  if (uri.protocol === 'https:') {
-    return process.env.HTTPS_PROXY ||
-      process.env.https_proxy ||
-      process.env.HTTP_PROXY ||
-      process.env.http_proxy || null
-  }
-
-  // if none of that works, return null
-  // (What uri protocol are you using then?)
-
-  return null
-}
-
-module.exports = getProxyFromURI
-
-
-/***/ }),
-/* 803 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var fs = __webpack_require__(5)
-var qs = __webpack_require__(196)
-var validate = __webpack_require__(677)
-var extend = __webpack_require__(269)
-
-function Har (request) {
-  this.request = request
-}
-
-Har.prototype.reducer = function (obj, pair) {
-  // new property ?
-  if (obj[pair.name] === undefined) {
-    obj[pair.name] = pair.value
-    return obj
-  }
-
-  // existing? convert to array
-  var arr = [
-    obj[pair.name],
-    pair.value
-  ]
-
-  obj[pair.name] = arr
-
-  return obj
-}
-
-Har.prototype.prep = function (data) {
-  // construct utility properties
-  data.queryObj = {}
-  data.headersObj = {}
-  data.postData.jsonObj = false
-  data.postData.paramsObj = false
-
-  // construct query objects
-  if (data.queryString && data.queryString.length) {
-    data.queryObj = data.queryString.reduce(this.reducer, {})
-  }
-
-  // construct headers objects
-  if (data.headers && data.headers.length) {
-    // loweCase header keys
-    data.headersObj = data.headers.reduceRight(function (headers, header) {
-      headers[header.name] = header.value
-      return headers
-    }, {})
-  }
-
-  // construct Cookie header
-  if (data.cookies && data.cookies.length) {
-    var cookies = data.cookies.map(function (cookie) {
-      return cookie.name + '=' + cookie.value
-    })
-
-    if (cookies.length) {
-      data.headersObj.cookie = cookies.join('; ')
-    }
-  }
-
-  // prep body
-  function some (arr) {
-    return arr.some(function (type) {
-      return data.postData.mimeType.indexOf(type) === 0
-    })
-  }
-
-  if (some([
-    'multipart/mixed',
-    'multipart/related',
-    'multipart/form-data',
-    'multipart/alternative'])) {
-    // reset values
-    data.postData.mimeType = 'multipart/form-data'
-  } else if (some([
-    'application/x-www-form-urlencoded'])) {
-    if (!data.postData.params) {
-      data.postData.text = ''
-    } else {
-      data.postData.paramsObj = data.postData.params.reduce(this.reducer, {})
-
-      // always overwrite
-      data.postData.text = qs.stringify(data.postData.paramsObj)
-    }
-  } else if (some([
-    'text/json',
-    'text/x-json',
-    'application/json',
-    'application/x-json'])) {
-    data.postData.mimeType = 'application/json'
-
-    if (data.postData.text) {
-      try {
-        data.postData.jsonObj = JSON.parse(data.postData.text)
-      } catch (e) {
-        this.request.debug(e)
-
-        // force back to text/plain
-        data.postData.mimeType = 'text/plain'
-      }
-    }
-  }
-
-  return data
-}
-
-Har.prototype.options = function (options) {
-  // skip if no har property defined
-  if (!options.har) {
-    return options
-  }
-
-  var har = {}
-  extend(har, options.har)
-
-  // only process the first entry
-  if (har.log && har.log.entries) {
-    har = har.log.entries[0]
-  }
-
-  // add optional properties to make validation successful
-  har.url = har.url || options.url || options.uri || options.baseUrl || '/'
-  har.httpVersion = har.httpVersion || 'HTTP/1.1'
-  har.queryString = har.queryString || []
-  har.headers = har.headers || []
-  har.cookies = har.cookies || []
-  har.postData = har.postData || {}
-  har.postData.mimeType = har.postData.mimeType || 'application/octet-stream'
-
-  har.bodySize = 0
-  har.headersSize = 0
-  har.postData.size = 0
-
-  if (!validate.request(har)) {
-    return options
-  }
-
-  // clean up and get some utility properties
-  var req = this.prep(har)
-
-  // construct new options
-  if (req.url) {
-    options.url = req.url
-  }
-
-  if (req.method) {
-    options.method = req.method
-  }
-
-  if (Object.keys(req.queryObj).length) {
-    options.qs = req.queryObj
-  }
-
-  if (Object.keys(req.headersObj).length) {
-    options.headers = req.headersObj
-  }
-
-  function test (type) {
-    return req.postData.mimeType.indexOf(type) === 0
-  }
-  if (test('application/x-www-form-urlencoded')) {
-    options.form = req.postData.paramsObj
-  } else if (test('application/json')) {
-    if (req.postData.jsonObj) {
-      options.body = req.postData.jsonObj
-      options.json = true
-    }
-  } else if (test('multipart/form-data')) {
-    options.formData = {}
-
-    req.postData.params.forEach(function (param) {
-      var attachment = {}
-
-      if (!param.fileName && !param.fileName && !param.contentType) {
-        options.formData[param.name] = param.value
-        return
-      }
-
-      // attempt to read from disk!
-      if (param.fileName && !param.value) {
-        attachment.value = fs.createReadStream(param.fileName)
-      } else if (param.value) {
-        attachment.value = param.value
-      }
-
-      if (param.fileName) {
-        attachment.options = {
-          filename: param.fileName,
-          contentType: param.contentType ? param.contentType : null
-        }
-      }
-
-      options.formData[param.name] = attachment
-    })
-  } else {
-    if (req.postData.text) {
-      options.body = req.postData.text
-    }
-  }
-
-  return options
-}
-
-exports.Har = Har
-
-
-/***/ }),
-/* 804 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var crypto = __webpack_require__(11)
-
-function randomString (size) {
-  var bits = (size + 1) * 6
-  var buffer = crypto.randomBytes(Math.ceil(bits / 8))
-  var string = buffer.toString('base64').replace(/\+/g, '-').replace(/\//g, '_').replace(/=/g, '')
-  return string.slice(0, size)
-}
-
-function calculatePayloadHash (payload, algorithm, contentType) {
-  var hash = crypto.createHash(algorithm)
-  hash.update('hawk.1.payload\n')
-  hash.update((contentType ? contentType.split(';')[0].trim().toLowerCase() : '') + '\n')
-  hash.update(payload || '')
-  hash.update('\n')
-  return hash.digest('base64')
-}
-
-exports.calculateMac = function (credentials, opts) {
-  var normalized = 'hawk.1.header\n' +
-    opts.ts + '\n' +
-    opts.nonce + '\n' +
-    (opts.method || '').toUpperCase() + '\n' +
-    opts.resource + '\n' +
-    opts.host.toLowerCase() + '\n' +
-    opts.port + '\n' +
-    (opts.hash || '') + '\n'
-
-  if (opts.ext) {
-    normalized = normalized + opts.ext.replace('\\', '\\\\').replace('\n', '\\n')
-  }
-
-  normalized = normalized + '\n'
-
-  if (opts.app) {
-    normalized = normalized + opts.app + '\n' + (opts.dlg || '') + '\n'
-  }
-
-  var hmac = crypto.createHmac(credentials.algorithm, credentials.key).update(normalized)
-  var digest = hmac.digest('base64')
-  return digest
-}
-
-exports.header = function (uri, method, opts) {
-  var timestamp = opts.timestamp || Math.floor((Date.now() + (opts.localtimeOffsetMsec || 0)) / 1000)
-  var credentials = opts.credentials
-  if (!credentials || !credentials.id || !credentials.key || !credentials.algorithm) {
-    return ''
-  }
-
-  if (['sha1', 'sha256'].indexOf(credentials.algorithm) === -1) {
-    return ''
-  }
-
-  var artifacts = {
-    ts: timestamp,
-    nonce: opts.nonce || randomString(6),
-    method: method,
-    resource: uri.pathname + (uri.search || ''),
-    host: uri.hostname,
-    port: uri.port || (uri.protocol === 'http:' ? 80 : 443),
-    hash: opts.hash,
-    ext: opts.ext,
-    app: opts.app,
-    dlg: opts.dlg
-  }
-
-  if (!artifacts.hash && (opts.payload || opts.payload === '')) {
-    artifacts.hash = calculatePayloadHash(opts.payload, credentials.algorithm, opts.contentType)
-  }
-
-  var mac = exports.calculateMac(credentials, artifacts)
-
-  var hasExt = artifacts.ext !== null && artifacts.ext !== undefined && artifacts.ext !== ''
-  var header = 'Hawk id="' + credentials.id +
-    '", ts="' + artifacts.ts +
-    '", nonce="' + artifacts.nonce +
-    (artifacts.hash ? '", hash="' + artifacts.hash : '') +
-    (hasExt ? '", ext="' + artifacts.ext.replace(/\\/g, '\\\\').replace(/"/g, '\\"') : '') +
-    '", mac="' + mac + '"'
-
-  if (artifacts.app) {
-    header = header + ', app="' + artifacts.app + (artifacts.dlg ? '", dlg="' + artifacts.dlg : '') + '"'
-  }
-
-  return header
-}
-
-
-/***/ }),
-/* 805 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var uuid = __webpack_require__(119)
-var CombinedStream = __webpack_require__(385)
-var isstream = __webpack_require__(399)
-var Buffer = __webpack_require__(45).Buffer
-
-function Multipart (request) {
-  this.request = request
-  this.boundary = uuid()
-  this.chunked = false
-  this.body = null
-}
-
-Multipart.prototype.isChunked = function (options) {
-  var self = this
-  var chunked = false
-  var parts = options.data || options
-
-  if (!parts.forEach) {
-    self.request.emit('error', new Error('Argument error, options.multipart.'))
-  }
-
-  if (options.chunked !== undefined) {
-    chunked = options.chunked
-  }
-
-  if (self.request.getHeader('transfer-encoding') === 'chunked') {
-    chunked = true
-  }
-
-  if (!chunked) {
-    parts.forEach(function (part) {
-      if (typeof part.body === 'undefined') {
-        self.request.emit('error', new Error('Body attribute missing in multipart.'))
-      }
-      if (isstream(part.body)) {
-        chunked = true
-      }
-    })
-  }
-
-  return chunked
-}
-
-Multipart.prototype.setHeaders = function (chunked) {
-  var self = this
-
-  if (chunked && !self.request.hasHeader('transfer-encoding')) {
-    self.request.setHeader('transfer-encoding', 'chunked')
-  }
-
-  var header = self.request.getHeader('content-type')
-
-  if (!header || header.indexOf('multipart') === -1) {
-    self.request.setHeader('content-type', 'multipart/related; boundary=' + self.boundary)
-  } else {
-    if (header.indexOf('boundary') !== -1) {
-      self.boundary = header.replace(/.*boundary=([^\s;]+).*/, '$1')
-    } else {
-      self.request.setHeader('content-type', header + '; boundary=' + self.boundary)
-    }
-  }
-}
-
-Multipart.prototype.build = function (parts, chunked) {
-  var self = this
-  var body = chunked ? new CombinedStream() : []
-
-  function add (part) {
-    if (typeof part === 'number') {
-      part = part.toString()
-    }
-    return chunked ? body.append(part) : body.push(Buffer.from(part))
-  }
-
-  if (self.request.preambleCRLF) {
-    add('\r\n')
-  }
-
-  parts.forEach(function (part) {
-    var preamble = '--' + self.boundary + '\r\n'
-    Object.keys(part).forEach(function (key) {
-      if (key === 'body') { return }
-      preamble += key + ': ' + part[key] + '\r\n'
-    })
-    preamble += '\r\n'
-    add(preamble)
-    add(part.body)
-    add('\r\n')
-  })
-  add('--' + self.boundary + '--')
-
-  if (self.request.postambleCRLF) {
-    add('\r\n')
-  }
-
-  return body
-}
-
-Multipart.prototype.onRequest = function (options) {
-  var self = this
-
-  var chunked = self.isChunked(options)
-  var parts = options.data || options
-
-  self.setHeaders(chunked)
-  self.chunked = chunked
-  self.body = self.build(parts, chunked)
-}
-
-exports.Multipart = Multipart
-
-
-/***/ }),
-/* 806 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var url = __webpack_require__(24)
-var qs = __webpack_require__(404)
-var caseless = __webpack_require__(231)
-var uuid = __webpack_require__(119)
-var oauth = __webpack_require__(768)
-var crypto = __webpack_require__(11)
-var Buffer = __webpack_require__(45).Buffer
-
-function OAuth (request) {
-  this.request = request
-  this.params = null
-}
-
-OAuth.prototype.buildParams = function (_oauth, uri, method, query, form, qsLib) {
-  var oa = {}
-  for (var i in _oauth) {
-    oa['oauth_' + i] = _oauth[i]
-  }
-  if (!oa.oauth_version) {
-    oa.oauth_version = '1.0'
-  }
-  if (!oa.oauth_timestamp) {
-    oa.oauth_timestamp = Math.floor(Date.now() / 1000).toString()
-  }
-  if (!oa.oauth_nonce) {
-    oa.oauth_nonce = uuid().replace(/-/g, '')
-  }
-  if (!oa.oauth_signature_method) {
-    oa.oauth_signature_method = 'HMAC-SHA1'
-  }
-
-  var consumer_secret_or_private_key = oa.oauth_consumer_secret || oa.oauth_private_key // eslint-disable-line camelcase
-  delete oa.oauth_consumer_secret
-  delete oa.oauth_private_key
-
-  var token_secret = oa.oauth_token_secret // eslint-disable-line camelcase
-  delete oa.oauth_token_secret
-
-  var realm = oa.oauth_realm
-  delete oa.oauth_realm
-  delete oa.oauth_transport_method
-
-  var baseurl = uri.protocol + '//' + uri.host + uri.pathname
-  var params = qsLib.parse([].concat(query, form, qsLib.stringify(oa)).join('&'))
-
-  oa.oauth_signature = oauth.sign(
-    oa.oauth_signature_method,
-    method,
-    baseurl,
-    params,
-    consumer_secret_or_private_key, // eslint-disable-line camelcase
-    token_secret // eslint-disable-line camelcase
-  )
-
-  if (realm) {
-    oa.realm = realm
-  }
-
-  return oa
-}
-
-OAuth.prototype.buildBodyHash = function (_oauth, body) {
-  if (['HMAC-SHA1', 'RSA-SHA1'].indexOf(_oauth.signature_method || 'HMAC-SHA1') < 0) {
-    this.request.emit('error', new Error('oauth: ' + _oauth.signature_method +
-      ' signature_method not supported with body_hash signing.'))
-  }
-
-  var shasum = crypto.createHash('sha1')
-  shasum.update(body || '')
-  var sha1 = shasum.digest('hex')
-
-  return Buffer.from(sha1, 'hex').toString('base64')
-}
-
-OAuth.prototype.concatParams = function (oa, sep, wrap) {
-  wrap = wrap || ''
-
-  var params = Object.keys(oa).filter(function (i) {
-    return i !== 'realm' && i !== 'oauth_signature'
-  }).sort()
-
-  if (oa.realm) {
-    params.splice(0, 0, 'realm')
-  }
-  params.push('oauth_signature')
-
-  return params.map(function (i) {
-    return i + '=' + wrap + oauth.rfc3986(oa[i]) + wrap
-  }).join(sep)
-}
-
-OAuth.prototype.onRequest = function (_oauth) {
-  var self = this
-  self.params = _oauth
-
-  var uri = self.request.uri || {}
-  var method = self.request.method || ''
-  var headers = caseless(self.request.headers)
-  var body = self.request.body || ''
-  var qsLib = self.request.qsLib || qs
-
-  var form
-  var query
-  var contentType = headers.get('content-type') || ''
-  var formContentType = 'application/x-www-form-urlencoded'
-  var transport = _oauth.transport_method || 'header'
-
-  if (contentType.slice(0, formContentType.length) === formContentType) {
-    contentType = formContentType
-    form = body
-  }
-  if (uri.query) {
-    query = uri.query
-  }
-  if (transport === 'body' && (method !== 'POST' || contentType !== formContentType)) {
-    self.request.emit('error', new Error('oauth: transport_method of body requires POST ' +
-      'and content-type ' + formContentType))
-  }
-
-  if (!form && typeof _oauth.body_hash === 'boolean') {
-    _oauth.body_hash = self.buildBodyHash(_oauth, self.request.body.toString())
-  }
-
-  var oa = self.buildParams(_oauth, uri, method, query, form, qsLib)
-
-  switch (transport) {
-    case 'header':
-      self.request.setHeader('Authorization', 'OAuth ' + self.concatParams(oa, ',', '"'))
-      break
-
-    case 'query':
-      var href = self.request.uri.href += (query ? '&' : '?') + self.concatParams(oa, '&')
-      self.request.uri = url.parse(href)
-      self.request.path = self.request.uri.path
-      break
-
-    case 'body':
-      self.request.body = (form ? form + '&' : '') + self.concatParams(oa, '&')
-      break
-
-    default:
-      self.request.emit('error', new Error('oauth: transport_method invalid'))
-  }
-}
-
-exports.OAuth = OAuth
-
-
-/***/ }),
-/* 807 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var qs = __webpack_require__(404)
-var querystring = __webpack_require__(196)
-
-function Querystring (request) {
-  this.request = request
-  this.lib = null
-  this.useQuerystring = null
-  this.parseOptions = null
-  this.stringifyOptions = null
-}
-
-Querystring.prototype.init = function (options) {
-  if (this.lib) { return }
-
-  this.useQuerystring = options.useQuerystring
-  this.lib = (this.useQuerystring ? querystring : qs)
-
-  this.parseOptions = options.qsParseOptions || {}
-  this.stringifyOptions = options.qsStringifyOptions || {}
-}
-
-Querystring.prototype.stringify = function (obj) {
-  return (this.useQuerystring)
-    ? this.rfc3986(this.lib.stringify(obj,
-      this.stringifyOptions.sep || null,
-      this.stringifyOptions.eq || null,
-      this.stringifyOptions))
-    : this.lib.stringify(obj, this.stringifyOptions)
-}
-
-Querystring.prototype.parse = function (str) {
-  return (this.useQuerystring)
-    ? this.lib.parse(str,
-      this.parseOptions.sep || null,
-      this.parseOptions.eq || null,
-      this.parseOptions)
-    : this.lib.parse(str, this.parseOptions)
-}
-
-Querystring.prototype.rfc3986 = function (str) {
-  return str.replace(/[!'()*]/g, function (c) {
-    return '%' + c.charCodeAt(0).toString(16).toUpperCase()
-  })
-}
-
-Querystring.prototype.unescape = querystring.unescape
-
-exports.Querystring = Querystring
-
-
-/***/ }),
-/* 808 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var url = __webpack_require__(24)
-var isUrl = /^https?:/
-
-function Redirect (request) {
-  this.request = request
-  this.followRedirect = true
-  this.followRedirects = true
-  this.followAllRedirects = false
-  this.followOriginalHttpMethod = false
-  this.allowRedirect = function () { return true }
-  this.maxRedirects = 10
-  this.redirects = []
-  this.redirectsFollowed = 0
-  this.removeRefererHeader = false
-}
-
-Redirect.prototype.onRequest = function (options) {
-  var self = this
-
-  if (options.maxRedirects !== undefined) {
-    self.maxRedirects = options.maxRedirects
-  }
-  if (typeof options.followRedirect === 'function') {
-    self.allowRedirect = options.followRedirect
-  }
-  if (options.followRedirect !== undefined) {
-    self.followRedirects = !!options.followRedirect
-  }
-  if (options.followAllRedirects !== undefined) {
-    self.followAllRedirects = options.followAllRedirects
-  }
-  if (self.followRedirects || self.followAllRedirects) {
-    self.redirects = self.redirects || []
-  }
-  if (options.removeRefererHeader !== undefined) {
-    self.removeRefererHeader = options.removeRefererHeader
-  }
-  if (options.followOriginalHttpMethod !== undefined) {
-    self.followOriginalHttpMethod = options.followOriginalHttpMethod
-  }
-}
-
-Redirect.prototype.redirectTo = function (response) {
-  var self = this
-  var request = self.request
-
-  var redirectTo = null
-  if (response.statusCode >= 300 && response.statusCode < 400 && response.caseless.has('location')) {
-    var location = response.caseless.get('location')
-    request.debug('redirect', location)
-
-    if (self.followAllRedirects) {
-      redirectTo = location
-    } else if (self.followRedirects) {
-      switch (request.method) {
-        case 'PATCH':
-        case 'PUT':
-        case 'POST':
-        case 'DELETE':
-          // Do not follow redirects
-          break
-        default:
-          redirectTo = location
-          break
-      }
-    }
-  } else if (response.statusCode === 401) {
-    var authHeader = request._auth.onResponse(response)
-    if (authHeader) {
-      request.setHeader('authorization', authHeader)
-      redirectTo = request.uri
-    }
-  }
-  return redirectTo
-}
-
-Redirect.prototype.onResponse = function (response) {
-  var self = this
-  var request = self.request
-
-  var redirectTo = self.redirectTo(response)
-  if (!redirectTo || !self.allowRedirect.call(request, response)) {
-    return false
-  }
-
-  request.debug('redirect to', redirectTo)
-
-  // ignore any potential response body.  it cannot possibly be useful
-  // to us at this point.
-  // response.resume should be defined, but check anyway before calling. Workaround for browserify.
-  if (response.resume) {
-    response.resume()
-  }
-
-  if (self.redirectsFollowed >= self.maxRedirects) {
-    request.emit('error', new Error('Exceeded maxRedirects. Probably stuck in a redirect loop ' + request.uri.href))
-    return false
-  }
-  self.redirectsFollowed += 1
-
-  if (!isUrl.test(redirectTo)) {
-    redirectTo = url.resolve(request.uri.href, redirectTo)
-  }
-
-  var uriPrev = request.uri
-  request.uri = url.parse(redirectTo)
-
-  // handle the case where we change protocol from https to http or vice versa
-  if (request.uri.protocol !== uriPrev.protocol) {
-    delete request.agent
-  }
-
-  self.redirects.push({ statusCode: response.statusCode, redirectUri: redirectTo })
-
-  if (self.followAllRedirects && request.method !== 'HEAD' &&
-    response.statusCode !== 401 && response.statusCode !== 307) {
-    request.method = self.followOriginalHttpMethod ? request.method : 'GET'
-  }
-  // request.method = 'GET' // Force all redirects to use GET || commented out fixes #215
-  delete request.src
-  delete request.req
-  delete request._started
-  if (response.statusCode !== 401 && response.statusCode !== 307) {
-    // Remove parameters from the previous response, unless this is the second request
-    // for a server that requires digest authentication.
-    delete request.body
-    delete request._form
-    if (request.headers) {
-      request.removeHeader('host')
-      request.removeHeader('content-type')
-      request.removeHeader('content-length')
-      if (request.uri.hostname !== request.originalHost.split(':')[0]) {
-        // Remove authorization if changing hostnames (but not if just
-        // changing ports or protocols).  This matches the behavior of curl:
-        // https://github.com/bagder/curl/blob/6beb0eee/lib/http.c#L710
-        request.removeHeader('authorization')
-      }
-    }
-  }
-
-  if (!self.removeRefererHeader) {
-    request.setHeader('referer', uriPrev.href)
-  }
-
-  request.emit('redirect')
-
-  request.init()
-
-  return true
-}
-
-exports.Redirect = Redirect
-
-
-/***/ }),
-/* 809 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var url = __webpack_require__(24)
-var tunnel = __webpack_require__(955)
-
-var defaultProxyHeaderWhiteList = [
-  'accept',
-  'accept-charset',
-  'accept-encoding',
-  'accept-language',
-  'accept-ranges',
-  'cache-control',
-  'content-encoding',
-  'content-language',
-  'content-location',
-  'content-md5',
-  'content-range',
-  'content-type',
-  'connection',
-  'date',
-  'expect',
-  'max-forwards',
-  'pragma',
-  'referer',
-  'te',
-  'user-agent',
-  'via'
-]
-
-var defaultProxyHeaderExclusiveList = [
-  'proxy-authorization'
-]
-
-function constructProxyHost (uriObject) {
-  var port = uriObject.port
-  var protocol = uriObject.protocol
-  var proxyHost = uriObject.hostname + ':'
-
-  if (port) {
-    proxyHost += port
-  } else if (protocol === 'https:') {
-    proxyHost += '443'
-  } else {
-    proxyHost += '80'
-  }
-
-  return proxyHost
-}
-
-function constructProxyHeaderWhiteList (headers, proxyHeaderWhiteList) {
-  var whiteList = proxyHeaderWhiteList
-    .reduce(function (set, header) {
-      set[header.toLowerCase()] = true
-      return set
-    }, {})
-
-  return Object.keys(headers)
-    .filter(function (header) {
-      return whiteList[header.toLowerCase()]
-    })
-    .reduce(function (set, header) {
-      set[header] = headers[header]
-      return set
-    }, {})
-}
-
-function constructTunnelOptions (request, proxyHeaders) {
-  var proxy = request.proxy
-
-  var tunnelOptions = {
-    proxy: {
-      host: proxy.hostname,
-      port: +proxy.port,
-      proxyAuth: proxy.auth,
-      headers: proxyHeaders
-    },
-    headers: request.headers,
-    ca: request.ca,
-    cert: request.cert,
-    key: request.key,
-    passphrase: request.passphrase,
-    pfx: request.pfx,
-    ciphers: request.ciphers,
-    rejectUnauthorized: request.rejectUnauthorized,
-    secureOptions: request.secureOptions,
-    secureProtocol: request.secureProtocol
-  }
-
-  return tunnelOptions
-}
-
-function constructTunnelFnName (uri, proxy) {
-  var uriProtocol = (uri.protocol === 'https:' ? 'https' : 'http')
-  var proxyProtocol = (proxy.protocol === 'https:' ? 'Https' : 'Http')
-  return [uriProtocol, proxyProtocol].join('Over')
-}
-
-function getTunnelFn (request) {
-  var uri = request.uri
-  var proxy = request.proxy
-  var tunnelFnName = constructTunnelFnName(uri, proxy)
-  return tunnel[tunnelFnName]
-}
-
-function Tunnel (request) {
-  this.request = request
-  this.proxyHeaderWhiteList = defaultProxyHeaderWhiteList
-  this.proxyHeaderExclusiveList = []
-  if (typeof request.tunnel !== 'undefined') {
-    this.tunnelOverride = request.tunnel
-  }
-}
-
-Tunnel.prototype.isEnabled = function () {
-  var self = this
-  var request = self.request
-    // Tunnel HTTPS by default. Allow the user to override this setting.
-
-  // If self.tunnelOverride is set (the user specified a value), use it.
-  if (typeof self.tunnelOverride !== 'undefined') {
-    return self.tunnelOverride
-  }
-
-  // If the destination is HTTPS, tunnel.
-  if (request.uri.protocol === 'https:') {
-    return true
-  }
-
-  // Otherwise, do not use tunnel.
-  return false
-}
-
-Tunnel.prototype.setup = function (options) {
-  var self = this
-  var request = self.request
-
-  options = options || {}
-
-  if (typeof request.proxy === 'string') {
-    request.proxy = url.parse(request.proxy)
-  }
-
-  if (!request.proxy || !request.tunnel) {
-    return false
-  }
-
-  // Setup Proxy Header Exclusive List and White List
-  if (options.proxyHeaderWhiteList) {
-    self.proxyHeaderWhiteList = options.proxyHeaderWhiteList
-  }
-  if (options.proxyHeaderExclusiveList) {
-    self.proxyHeaderExclusiveList = options.proxyHeaderExclusiveList
-  }
-
-  var proxyHeaderExclusiveList = self.proxyHeaderExclusiveList.concat(defaultProxyHeaderExclusiveList)
-  var proxyHeaderWhiteList = self.proxyHeaderWhiteList.concat(proxyHeaderExclusiveList)
-
-  // Setup Proxy Headers and Proxy Headers Host
-  // Only send the Proxy White Listed Header names
-  var proxyHeaders = constructProxyHeaderWhiteList(request.headers, proxyHeaderWhiteList)
-  proxyHeaders.host = constructProxyHost(request.uri)
-
-  proxyHeaderExclusiveList.forEach(request.removeHeader, request)
-
-  // Set Agent from Tunnel Data
-  var tunnelFn = getTunnelFn(request)
-  var tunnelOptions = constructTunnelOptions(request, proxyHeaders)
-  request.agent = tunnelFn(tunnelOptions)
-
-  return true
-}
-
-Tunnel.defaultProxyHeaderWhiteList = defaultProxyHeaderWhiteList
-Tunnel.defaultProxyHeaderExclusiveList = defaultProxyHeaderExclusiveList
-exports.Tunnel = Tunnel
-
-
-/***/ }),
-/* 810 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * Copyright (c) 2015, Salesforce.com, Inc.
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- *
- * 3. Neither the name of Salesforce.com nor the names of its contributors may
- * be used to endorse or promote products derived from this software without
- * specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
-
-var net = __webpack_require__(164);
-var urlParse = __webpack_require__(24).parse;
-var pubsuffix = __webpack_require__(415);
-var Store = __webpack_require__(416).Store;
-var MemoryCookieStore = __webpack_require__(811).MemoryCookieStore;
-var pathMatch = __webpack_require__(413).pathMatch;
-var VERSION = __webpack_require__(812).version;
-
-var punycode;
-try {
-  punycode = __webpack_require__(332);
-} catch(e) {
-  console.warn("cookie: can't load punycode; won't use punycode for domain normalization");
-}
-
-// From RFC6265 S4.1.1
-// note that it excludes \x3B ";"
-var COOKIE_OCTETS = /^[\x21\x23-\x2B\x2D-\x3A\x3C-\x5B\x5D-\x7E]+$/;
-
-var CONTROL_CHARS = /[\x00-\x1F]/;
-
-// From Chromium // '\r', '\n' and '\0' should be treated as a terminator in
-// the "relaxed" mode, see:
-// https://github.com/ChromiumWebApps/chromium/blob/b3d3b4da8bb94c1b2e061600df106d590fda3620/net/cookies/parsed_cookie.cc#L60
-var TERMINATORS = ['\n', '\r', '\0'];
-
-// RFC6265 S4.1.1 defines path value as 'any CHAR except CTLs or ";"'
-// Note ';' is \x3B
-var PATH_VALUE = /[\x20-\x3A\x3C-\x7E]+/;
-
-// date-time parsing constants (RFC6265 S5.1.1)
-
-var DATE_DELIM = /[\x09\x20-\x2F\x3B-\x40\x5B-\x60\x7B-\x7E]/;
-
-var MONTH_TO_NUM = {
-  jan:0, feb:1, mar:2, apr:3, may:4, jun:5,
-  jul:6, aug:7, sep:8, oct:9, nov:10, dec:11
-};
-var NUM_TO_MONTH = [
-  'Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'
-];
-var NUM_TO_DAY = [
-  'Sun','Mon','Tue','Wed','Thu','Fri','Sat'
-];
-
-var MAX_TIME = 2147483647000; // 31-bit max
-var MIN_TIME = 0; // 31-bit min
-
-/*
- * Parses a Natural number (i.e., non-negative integer) with either the
- *    <min>*<max>DIGIT ( non-digit *OCTET )
- * or
- *    <min>*<max>DIGIT
- * grammar (RFC6265 S5.1.1).
- *
- * The "trailingOK" boolean controls if the grammar accepts a
- * "( non-digit *OCTET )" trailer.
- */
-function parseDigits(token, minDigits, maxDigits, trailingOK) {
-  var count = 0;
-  while (count < token.length) {
-    var c = token.charCodeAt(count);
-    // "non-digit = %x00-2F / %x3A-FF"
-    if (c <= 0x2F || c >= 0x3A) {
-      break;
-    }
-    count++;
-  }
-
-  // constrain to a minimum and maximum number of digits.
-  if (count < minDigits || count > maxDigits) {
-    return null;
-  }
-
-  if (!trailingOK && count != token.length) {
-    return null;
-  }
-
-  return parseInt(token.substr(0,count), 10);
-}
-
-function parseTime(token) {
-  var parts = token.split(':');
-  var result = [0,0,0];
-
-  /* RF6256 S5.1.1:
-   *      time            = hms-time ( non-digit *OCTET )
-   *      hms-time        = time-field ":" time-field ":" time-field
-   *      time-field      = 1*2DIGIT
-   */
-
-  if (parts.length !== 3) {
-    return null;
-  }
-
-  for (var i = 0; i < 3; i++) {
-    // "time-field" must be strictly "1*2DIGIT", HOWEVER, "hms-time" can be
-    // followed by "( non-digit *OCTET )" so therefore the last time-field can
-    // have a trailer
-    var trailingOK = (i == 2);
-    var num = parseDigits(parts[i], 1, 2, trailingOK);
-    if (num === null) {
-      return null;
-    }
-    result[i] = num;
-  }
-
-  return result;
-}
-
-function parseMonth(token) {
-  token = String(token).substr(0,3).toLowerCase();
-  var num = MONTH_TO_NUM[token];
-  return num >= 0 ? num : null;
-}
-
-/*
- * RFC6265 S5.1.1 date parser (see RFC for full grammar)
- */
-function parseDate(str) {
-  if (!str) {
-    return;
-  }
-
-  /* RFC6265 S5.1.1:
-   * 2. Process each date-token sequentially in the order the date-tokens
-   * appear in the cookie-date
-   */
-  var tokens = str.split(DATE_DELIM);
-  if (!tokens) {
-    return;
-  }
-
-  var hour = null;
-  var minute = null;
-  var second = null;
-  var dayOfMonth = null;
-  var month = null;
-  var year = null;
-
-  for (var i=0; i<tokens.length; i++) {
-    var token = tokens[i].trim();
-    if (!token.length) {
-      continue;
-    }
-
-    var result;
-
-    /* 2.1. If the found-time flag is not set and the token matches the time
-     * production, set the found-time flag and set the hour- value,
-     * minute-value, and second-value to the numbers denoted by the digits in
-     * the date-token, respectively.  Skip the remaining sub-steps and continue
-     * to the next date-token.
-     */
-    if (second === null) {
-      result = parseTime(token);
-      if (result) {
-        hour = result[0];
-        minute = result[1];
-        second = result[2];
-        continue;
-      }
-    }
-
-    /* 2.2. If the found-day-of-month flag is not set and the date-token matches
-     * the day-of-month production, set the found-day-of- month flag and set
-     * the day-of-month-value to the number denoted by the date-token.  Skip
-     * the remaining sub-steps and continue to the next date-token.
-     */
-    if (dayOfMonth === null) {
-      // "day-of-month = 1*2DIGIT ( non-digit *OCTET )"
-      result = parseDigits(token, 1, 2, true);
-      if (result !== null) {
-        dayOfMonth = result;
-        continue;
-      }
-    }
-
-    /* 2.3. If the found-month flag is not set and the date-token matches the
-     * month production, set the found-month flag and set the month-value to
-     * the month denoted by the date-token.  Skip the remaining sub-steps and
-     * continue to the next date-token.
-     */
-    if (month === null) {
-      result = parseMonth(token);
-      if (result !== null) {
-        month = result;
-        continue;
-      }
-    }
-
-    /* 2.4. If the found-year flag is not set and the date-token matches the
-     * year production, set the found-year flag and set the year-value to the
-     * number denoted by the date-token.  Skip the remaining sub-steps and
-     * continue to the next date-token.
-     */
-    if (year === null) {
-      // "year = 2*4DIGIT ( non-digit *OCTET )"
-      result = parseDigits(token, 2, 4, true);
-      if (result !== null) {
-        year = result;
-        /* From S5.1.1:
-         * 3.  If the year-value is greater than or equal to 70 and less
-         * than or equal to 99, increment the year-value by 1900.
-         * 4.  If the year-value is greater than or equal to 0 and less
-         * than or equal to 69, increment the year-value by 2000.
-         */
-        if (year >= 70 && year <= 99) {
-          year += 1900;
-        } else if (year >= 0 && year <= 69) {
-          year += 2000;
-        }
-      }
-    }
-  }
-
-  /* RFC 6265 S5.1.1
-   * "5. Abort these steps and fail to parse the cookie-date if:
-   *     *  at least one of the found-day-of-month, found-month, found-
-   *        year, or found-time flags is not set,
-   *     *  the day-of-month-value is less than 1 or greater than 31,
-   *     *  the year-value is less than 1601,
-   *     *  the hour-value is greater than 23,
-   *     *  the minute-value is greater than 59, or
-   *     *  the second-value is greater than 59.
-   *     (Note that leap seconds cannot be represented in this syntax.)"
-   *
-   * So, in order as above:
-   */
-  if (
-    dayOfMonth === null || month === null || year === null || second === null ||
-    dayOfMonth < 1 || dayOfMonth > 31 ||
-    year < 1601 ||
-    hour > 23 ||
-    minute > 59 ||
-    second > 59
-  ) {
-    return;
-  }
-
-  return new Date(Date.UTC(year, month, dayOfMonth, hour, minute, second));
-}
-
-function formatDate(date) {
-  var d = date.getUTCDate(); d = d >= 10 ? d : '0'+d;
-  var h = date.getUTCHours(); h = h >= 10 ? h : '0'+h;
-  var m = date.getUTCMinutes(); m = m >= 10 ? m : '0'+m;
-  var s = date.getUTCSeconds(); s = s >= 10 ? s : '0'+s;
-  return NUM_TO_DAY[date.getUTCDay()] + ', ' +
-    d+' '+ NUM_TO_MONTH[date.getUTCMonth()] +' '+ date.getUTCFullYear() +' '+
-    h+':'+m+':'+s+' GMT';
-}
-
-// S5.1.2 Canonicalized Host Names
-function canonicalDomain(str) {
-  if (str == null) {
-    return null;
-  }
-  str = str.trim().replace(/^\./,''); // S4.1.2.3 & S5.2.3: ignore leading .
-
-  // convert to IDN if any non-ASCII characters
-  if (punycode && /[^\u0001-\u007f]/.test(str)) {
-    str = punycode.toASCII(str);
-  }
-
-  return str.toLowerCase();
-}
-
-// S5.1.3 Domain Matching
-function domainMatch(str, domStr, canonicalize) {
-  if (str == null || domStr == null) {
-    return null;
-  }
-  if (canonicalize !== false) {
-    str = canonicalDomain(str);
-    domStr = canonicalDomain(domStr);
-  }
-
-  /*
-   * "The domain string and the string are identical. (Note that both the
-   * domain string and the string will have been canonicalized to lower case at
-   * this point)"
-   */
-  if (str == domStr) {
-    return true;
-  }
-
-  /* "All of the following [three] conditions hold:" (order adjusted from the RFC) */
-
-  /* "* The string is a host name (i.e., not an IP address)." */
-  if (net.isIP(str)) {
-    return false;
-  }
-
-  /* "* The domain string is a suffix of the string" */
-  var idx = str.indexOf(domStr);
-  if (idx <= 0) {
-    return false; // it's a non-match (-1) or prefix (0)
-  }
-
-  // e.g "a.b.c".indexOf("b.c") === 2
-  // 5 === 3+2
-  if (str.length !== domStr.length + idx) { // it's not a suffix
-    return false;
-  }
-
-  /* "* The last character of the string that is not included in the domain
-  * string is a %x2E (".") character." */
-  if (str.substr(idx-1,1) !== '.') {
-    return false;
-  }
-
-  return true;
-}
-
-
-// RFC6265 S5.1.4 Paths and Path-Match
-
-/*
- * "The user agent MUST use an algorithm equivalent to the following algorithm
- * to compute the default-path of a cookie:"
- *
- * Assumption: the path (and not query part or absolute uri) is passed in.
- */
-function defaultPath(path) {
-  // "2. If the uri-path is empty or if the first character of the uri-path is not
-  // a %x2F ("/") character, output %x2F ("/") and skip the remaining steps.
-  if (!path || path.substr(0,1) !== "/") {
-    return "/";
-  }
-
-  // "3. If the uri-path contains no more than one %x2F ("/") character, output
-  // %x2F ("/") and skip the remaining step."
-  if (path === "/") {
-    return path;
-  }
-
-  var rightSlash = path.lastIndexOf("/");
-  if (rightSlash === 0) {
-    return "/";
-  }
-
-  // "4. Output the characters of the uri-path from the first character up to,
-  // but not including, the right-most %x2F ("/")."
-  return path.slice(0, rightSlash);
-}
-
-function trimTerminator(str) {
-  for (var t = 0; t < TERMINATORS.length; t++) {
-    var terminatorIdx = str.indexOf(TERMINATORS[t]);
-    if (terminatorIdx !== -1) {
-      str = str.substr(0,terminatorIdx);
-    }
-  }
-
-  return str;
-}
-
-function parseCookiePair(cookiePair, looseMode) {
-  cookiePair = trimTerminator(cookiePair);
-
-  var firstEq = cookiePair.indexOf('=');
-  if (looseMode) {
-    if (firstEq === 0) { // '=' is immediately at start
-      cookiePair = cookiePair.substr(1);
-      firstEq = cookiePair.indexOf('='); // might still need to split on '='
-    }
-  } else { // non-loose mode
-    if (firstEq <= 0) { // no '=' or is at start
-      return; // needs to have non-empty "cookie-name"
-    }
-  }
-
-  var cookieName, cookieValue;
-  if (firstEq <= 0) {
-    cookieName = "";
-    cookieValue = cookiePair.trim();
-  } else {
-    cookieName = cookiePair.substr(0, firstEq).trim();
-    cookieValue = cookiePair.substr(firstEq+1).trim();
-  }
-
-  if (CONTROL_CHARS.test(cookieName) || CONTROL_CHARS.test(cookieValue)) {
-    return;
-  }
-
-  var c = new Cookie();
-  c.key = cookieName;
-  c.value = cookieValue;
-  return c;
-}
-
-function parse(str, options) {
-  if (!options || typeof options !== 'object') {
-    options = {};
-  }
-  str = str.trim();
-
-  // We use a regex to parse the "name-value-pair" part of S5.2
-  var firstSemi = str.indexOf(';'); // S5.2 step 1
-  var cookiePair = (firstSemi === -1) ? str : str.substr(0, firstSemi);
-  var c = parseCookiePair(cookiePair, !!options.loose);
-  if (!c) {
-    return;
-  }
-
-  if (firstSemi === -1) {
-    return c;
-  }
-
-  // S5.2.3 "unparsed-attributes consist of the remainder of the set-cookie-string
-  // (including the %x3B (";") in question)." plus later on in the same section
-  // "discard the first ";" and trim".
-  var unparsed = str.slice(firstSemi + 1).trim();
-
-  // "If the unparsed-attributes string is empty, skip the rest of these
-  // steps."
-  if (unparsed.length === 0) {
-    return c;
-  }
-
-  /*
-   * S5.2 says that when looping over the items "[p]rocess the attribute-name
-   * and attribute-value according to the requirements in the following
-   * subsections" for every item.  Plus, for many of the individual attributes
-   * in S5.3 it says to use the "attribute-value of the last attribute in the
-   * cookie-attribute-list".  Therefore, in this implementation, we overwrite
-   * the previous value.
-   */
-  var cookie_avs = unparsed.split(';');
-  while (cookie_avs.length) {
-    var av = cookie_avs.shift().trim();
-    if (av.length === 0) { // happens if ";;" appears
-      continue;
-    }
-    var av_sep = av.indexOf('=');
-    var av_key, av_value;
-
-    if (av_sep === -1) {
-      av_key = av;
-      av_value = null;
-    } else {
-      av_key = av.substr(0,av_sep);
-      av_value = av.substr(av_sep+1);
-    }
-
-    av_key = av_key.trim().toLowerCase();
-
-    if (av_value) {
-      av_value = av_value.trim();
-    }
-
-    switch(av_key) {
-    case 'expires': // S5.2.1
-      if (av_value) {
-        var exp = parseDate(av_value);
-        // "If the attribute-value failed to parse as a cookie date, ignore the
-        // cookie-av."
-        if (exp) {
-          // over and underflow not realistically a concern: V8's getTime() seems to
-          // store something larger than a 32-bit time_t (even with 32-bit node)
-          c.expires = exp;
-        }
-      }
-      break;
-
-    case 'max-age': // S5.2.2
-      if (av_value) {
-        // "If the first character of the attribute-value is not a DIGIT or a "-"
-        // character ...[or]... If the remainder of attribute-value contains a
-        // non-DIGIT character, ignore the cookie-av."
-        if (/^-?[0-9]+$/.test(av_value)) {
-          var delta = parseInt(av_value, 10);
-          // "If delta-seconds is less than or equal to zero (0), let expiry-time
-          // be the earliest representable date and time."
-          c.setMaxAge(delta);
-        }
-      }
-      break;
-
-    case 'domain': // S5.2.3
-      // "If the attribute-value is empty, the behavior is undefined.  However,
-      // the user agent SHOULD ignore the cookie-av entirely."
-      if (av_value) {
-        // S5.2.3 "Let cookie-domain be the attribute-value without the leading %x2E
-        // (".") character."
-        var domain = av_value.trim().replace(/^\./, '');
-        if (domain) {
-          // "Convert the cookie-domain to lower case."
-          c.domain = domain.toLowerCase();
-        }
-      }
-      break;
-
-    case 'path': // S5.2.4
-      /*
-       * "If the attribute-value is empty or if the first character of the
-       * attribute-value is not %x2F ("/"):
-       *   Let cookie-path be the default-path.
-       * Otherwise:
-       *   Let cookie-path be the attribute-value."
-       *
-       * We'll represent the default-path as null since it depends on the
-       * context of the parsing.
-       */
-      c.path = av_value && av_value[0] === "/" ? av_value : null;
-      break;
-
-    case 'secure': // S5.2.5
-      /*
-       * "If the attribute-name case-insensitively matches the string "Secure",
-       * the user agent MUST append an attribute to the cookie-attribute-list
-       * with an attribute-name of Secure and an empty attribute-value."
-       */
-      c.secure = true;
-      break;
-
-    case 'httponly': // S5.2.6 -- effectively the same as 'secure'
-      c.httpOnly = true;
-      break;
-
-    default:
-      c.extensions = c.extensions || [];
-      c.extensions.push(av);
-      break;
-    }
-  }
-
-  return c;
-}
-
-// avoid the V8 deoptimization monster!
-function jsonParse(str) {
-  var obj;
-  try {
-    obj = JSON.parse(str);
-  } catch (e) {
-    return e;
-  }
-  return obj;
-}
-
-function fromJSON(str) {
-  if (!str) {
-    return null;
-  }
-
-  var obj;
-  if (typeof str === 'string') {
-    obj = jsonParse(str);
-    if (obj instanceof Error) {
-      return null;
-    }
-  } else {
-    // assume it's an Object
-    obj = str;
-  }
-
-  var c = new Cookie();
-  for (var i=0; i<Cookie.serializableProperties.length; i++) {
-    var prop = Cookie.serializableProperties[i];
-    if (obj[prop] === undefined ||
-        obj[prop] === Cookie.prototype[prop])
-    {
-      continue; // leave as prototype default
-    }
-
-    if (prop === 'expires' ||
-        prop === 'creation' ||
-        prop === 'lastAccessed')
-    {
-      if (obj[prop] === null) {
-        c[prop] = null;
-      } else {
-        c[prop] = obj[prop] == "Infinity" ?
-          "Infinity" : new Date(obj[prop]);
-      }
-    } else {
-      c[prop] = obj[prop];
-    }
-  }
-
-  return c;
-}
-
-/* Section 5.4 part 2:
- * "*  Cookies with longer paths are listed before cookies with
- *     shorter paths.
- *
- *  *  Among cookies that have equal-length path fields, cookies with
- *     earlier creation-times are listed before cookies with later
- *     creation-times."
- */
-
-function cookieCompare(a,b) {
-  var cmp = 0;
-
-  // descending for length: b CMP a
-  var aPathLen = a.path ? a.path.length : 0;
-  var bPathLen = b.path ? b.path.length : 0;
-  cmp = bPathLen - aPathLen;
-  if (cmp !== 0) {
-    return cmp;
-  }
-
-  // ascending for time: a CMP b
-  var aTime = a.creation ? a.creation.getTime() : MAX_TIME;
-  var bTime = b.creation ? b.creation.getTime() : MAX_TIME;
-  cmp = aTime - bTime;
-  if (cmp !== 0) {
-    return cmp;
-  }
-
-  // break ties for the same millisecond (precision of JavaScript's clock)
-  cmp = a.creationIndex - b.creationIndex;
-
-  return cmp;
-}
-
-// Gives the permutation of all possible pathMatch()es of a given path. The
-// array is in longest-to-shortest order.  Handy for indexing.
-function permutePath(path) {
-  if (path === '/') {
-    return ['/'];
-  }
-  if (path.lastIndexOf('/') === path.length-1) {
-    path = path.substr(0,path.length-1);
-  }
-  var permutations = [path];
-  while (path.length > 1) {
-    var lindex = path.lastIndexOf('/');
-    if (lindex === 0) {
-      break;
-    }
-    path = path.substr(0,lindex);
-    permutations.push(path);
-  }
-  permutations.push('/');
-  return permutations;
-}
-
-function getCookieContext(url) {
-  if (url instanceof Object) {
-    return url;
-  }
-  // NOTE: decodeURI will throw on malformed URIs (see GH-32).
-  // Therefore, we will just skip decoding for such URIs.
-  try {
-    url = decodeURI(url);
-  }
-  catch(err) {
-    // Silently swallow error
-  }
-
-  return urlParse(url);
-}
-
-function Cookie(options) {
-  options = options || {};
-
-  Object.keys(options).forEach(function(prop) {
-    if (Cookie.prototype.hasOwnProperty(prop) &&
-        Cookie.prototype[prop] !== options[prop] &&
-        prop.substr(0,1) !== '_')
-    {
-      this[prop] = options[prop];
-    }
-  }, this);
-
-  this.creation = this.creation || new Date();
-
-  // used to break creation ties in cookieCompare():
-  Object.defineProperty(this, 'creationIndex', {
-    configurable: false,
-    enumerable: false, // important for assert.deepEqual checks
-    writable: true,
-    value: ++Cookie.cookiesCreated
-  });
-}
-
-Cookie.cookiesCreated = 0; // incremented each time a cookie is created
-
-Cookie.parse = parse;
-Cookie.fromJSON = fromJSON;
-
-Cookie.prototype.key = "";
-Cookie.prototype.value = "";
-
-// the order in which the RFC has them:
-Cookie.prototype.expires = "Infinity"; // coerces to literal Infinity
-Cookie.prototype.maxAge = null; // takes precedence over expires for TTL
-Cookie.prototype.domain = null;
-Cookie.prototype.path = null;
-Cookie.prototype.secure = false;
-Cookie.prototype.httpOnly = false;
-Cookie.prototype.extensions = null;
-
-// set by the CookieJar:
-Cookie.prototype.hostOnly = null; // boolean when set
-Cookie.prototype.pathIsDefault = null; // boolean when set
-Cookie.prototype.creation = null; // Date when set; defaulted by Cookie.parse
-Cookie.prototype.lastAccessed = null; // Date when set
-Object.defineProperty(Cookie.prototype, 'creationIndex', {
-  configurable: true,
-  enumerable: false,
-  writable: true,
-  value: 0
-});
-
-Cookie.serializableProperties = Object.keys(Cookie.prototype)
-  .filter(function(prop) {
-    return !(
-      Cookie.prototype[prop] instanceof Function ||
-      prop === 'creationIndex' ||
-      prop.substr(0,1) === '_'
-    );
-  });
-
-Cookie.prototype.inspect = function inspect() {
-  var now = Date.now();
-  return 'Cookie="'+this.toString() +
-    '; hostOnly='+(this.hostOnly != null ? this.hostOnly : '?') +
-    '; aAge='+(this.lastAccessed ? (now-this.lastAccessed.getTime())+'ms' : '?') +
-    '; cAge='+(this.creation ? (now-this.creation.getTime())+'ms' : '?') +
-    '"';
-};
-
-Cookie.prototype.toJSON = function() {
-  var obj = {};
-
-  var props = Cookie.serializableProperties;
-  for (var i=0; i<props.length; i++) {
-    var prop = props[i];
-    if (this[prop] === Cookie.prototype[prop]) {
-      continue; // leave as prototype default
-    }
-
-    if (prop === 'expires' ||
-        prop === 'creation' ||
-        prop === 'lastAccessed')
-    {
-      if (this[prop] === null) {
-        obj[prop] = null;
-      } else {
-        obj[prop] = this[prop] == "Infinity" ? // intentionally not ===
-          "Infinity" : this[prop].toISOString();
-      }
-    } else if (prop === 'maxAge') {
-      if (this[prop] !== null) {
-        // again, intentionally not ===
-        obj[prop] = (this[prop] == Infinity || this[prop] == -Infinity) ?
-          this[prop].toString() : this[prop];
-      }
-    } else {
-      if (this[prop] !== Cookie.prototype[prop]) {
-        obj[prop] = this[prop];
-      }
-    }
-  }
-
-  return obj;
-};
-
-Cookie.prototype.clone = function() {
-  return fromJSON(this.toJSON());
-};
-
-Cookie.prototype.validate = function validate() {
-  if (!COOKIE_OCTETS.test(this.value)) {
-    return false;
-  }
-  if (this.expires != Infinity && !(this.expires instanceof Date) && !parseDate(this.expires)) {
-    return false;
-  }
-  if (this.maxAge != null && this.maxAge <= 0) {
-    return false; // "Max-Age=" non-zero-digit *DIGIT
-  }
-  if (this.path != null && !PATH_VALUE.test(this.path)) {
-    return false;
-  }
-
-  var cdomain = this.cdomain();
-  if (cdomain) {
-    if (cdomain.match(/\.$/)) {
-      return false; // S4.1.2.3 suggests that this is bad. domainMatch() tests confirm this
-    }
-    var suffix = pubsuffix.getPublicSuffix(cdomain);
-    if (suffix == null) { // it's a public suffix
-      return false;
-    }
-  }
-  return true;
-};
-
-Cookie.prototype.setExpires = function setExpires(exp) {
-  if (exp instanceof Date) {
-    this.expires = exp;
-  } else {
-    this.expires = parseDate(exp) || "Infinity";
-  }
-};
-
-Cookie.prototype.setMaxAge = function setMaxAge(age) {
-  if (age === Infinity || age === -Infinity) {
-    this.maxAge = age.toString(); // so JSON.stringify() works
-  } else {
-    this.maxAge = age;
-  }
-};
-
-// gives Cookie header format
-Cookie.prototype.cookieString = function cookieString() {
-  var val = this.value;
-  if (val == null) {
-    val = '';
-  }
-  if (this.key === '') {
-    return val;
-  }
-  return this.key+'='+val;
-};
-
-// gives Set-Cookie header format
-Cookie.prototype.toString = function toString() {
-  var str = this.cookieString();
-
-  if (this.expires != Infinity) {
-    if (this.expires instanceof Date) {
-      str += '; Expires='+formatDate(this.expires);
-    } else {
-      str += '; Expires='+this.expires;
-    }
-  }
-
-  if (this.maxAge != null && this.maxAge != Infinity) {
-    str += '; Max-Age='+this.maxAge;
-  }
-
-  if (this.domain && !this.hostOnly) {
-    str += '; Domain='+this.domain;
-  }
-  if (this.path) {
-    str += '; Path='+this.path;
-  }
-
-  if (this.secure) {
-    str += '; Secure';
-  }
-  if (this.httpOnly) {
-    str += '; HttpOnly';
-  }
-  if (this.extensions) {
-    this.extensions.forEach(function(ext) {
-      str += '; '+ext;
-    });
-  }
-
-  return str;
-};
-
-// TTL() partially replaces the "expiry-time" parts of S5.3 step 3 (setCookie()
-// elsewhere)
-// S5.3 says to give the "latest representable date" for which we use Infinity
-// For "expired" we use 0
-Cookie.prototype.TTL = function TTL(now) {
-  /* RFC6265 S4.1.2.2 If a cookie has both the Max-Age and the Expires
-   * attribute, the Max-Age attribute has precedence and controls the
-   * expiration date of the cookie.
-   * (Concurs with S5.3 step 3)
-   */
-  if (this.maxAge != null) {
-    return this.maxAge<=0 ? 0 : this.maxAge*1000;
-  }
-
-  var expires = this.expires;
-  if (expires != Infinity) {
-    if (!(expires instanceof Date)) {
-      expires = parseDate(expires) || Infinity;
-    }
-
-    if (expires == Infinity) {
-      return Infinity;
-    }
-
-    return expires.getTime() - (now || Date.now());
-  }
-
-  return Infinity;
-};
-
-// expiryTime() replaces the "expiry-time" parts of S5.3 step 3 (setCookie()
-// elsewhere)
-Cookie.prototype.expiryTime = function expiryTime(now) {
-  if (this.maxAge != null) {
-    var relativeTo = now || this.creation || new Date();
-    var age = (this.maxAge <= 0) ? -Infinity : this.maxAge*1000;
-    return relativeTo.getTime() + age;
-  }
-
-  if (this.expires == Infinity) {
-    return Infinity;
-  }
-  return this.expires.getTime();
-};
-
-// expiryDate() replaces the "expiry-time" parts of S5.3 step 3 (setCookie()
-// elsewhere), except it returns a Date
-Cookie.prototype.expiryDate = function expiryDate(now) {
-  var millisec = this.expiryTime(now);
-  if (millisec == Infinity) {
-    return new Date(MAX_TIME);
-  } else if (millisec == -Infinity) {
-    return new Date(MIN_TIME);
-  } else {
-    return new Date(millisec);
-  }
-};
-
-// This replaces the "persistent-flag" parts of S5.3 step 3
-Cookie.prototype.isPersistent = function isPersistent() {
-  return (this.maxAge != null || this.expires != Infinity);
-};
-
-// Mostly S5.1.2 and S5.2.3:
-Cookie.prototype.cdomain =
-Cookie.prototype.canonicalizedDomain = function canonicalizedDomain() {
-  if (this.domain == null) {
-    return null;
-  }
-  return canonicalDomain(this.domain);
-};
-
-function CookieJar(store, options) {
-  if (typeof options === "boolean") {
-    options = {rejectPublicSuffixes: options};
-  } else if (options == null) {
-    options = {};
-  }
-  if (options.rejectPublicSuffixes != null) {
-    this.rejectPublicSuffixes = options.rejectPublicSuffixes;
-  }
-  if (options.looseMode != null) {
-    this.enableLooseMode = options.looseMode;
-  }
-
-  if (!store) {
-    store = new MemoryCookieStore();
-  }
-  this.store = store;
-}
-CookieJar.prototype.store = null;
-CookieJar.prototype.rejectPublicSuffixes = true;
-CookieJar.prototype.enableLooseMode = false;
-var CAN_BE_SYNC = [];
-
-CAN_BE_SYNC.push('setCookie');
-CookieJar.prototype.setCookie = function(cookie, url, options, cb) {
-  var err;
-  var context = getCookieContext(url);
-  if (options instanceof Function) {
-    cb = options;
-    options = {};
-  }
-
-  var host = canonicalDomain(context.hostname);
-  var loose = this.enableLooseMode;
-  if (options.loose != null) {
-    loose = options.loose;
-  }
-
-  // S5.3 step 1
-  if (!(cookie instanceof Cookie)) {
-    cookie = Cookie.parse(cookie, { loose: loose });
-  }
-  if (!cookie) {
-    err = new Error("Cookie failed to parse");
-    return cb(options.ignoreError ? null : err);
-  }
-
-  // S5.3 step 2
-  var now = options.now || new Date(); // will assign later to save effort in the face of errors
-
-  // S5.3 step 3: NOOP; persistent-flag and expiry-time is handled by getCookie()
-
-  // S5.3 step 4: NOOP; domain is null by default
-
-  // S5.3 step 5: public suffixes
-  if (this.rejectPublicSuffixes && cookie.domain) {
-    var suffix = pubsuffix.getPublicSuffix(cookie.cdomain());
-    if (suffix == null) { // e.g. "com"
-      err = new Error("Cookie has domain set to a public suffix");
-      return cb(options.ignoreError ? null : err);
-    }
-  }
-
-  // S5.3 step 6:
-  if (cookie.domain) {
-    if (!domainMatch(host, cookie.cdomain(), false)) {
-      err = new Error("Cookie not in this host's domain. Cookie:"+cookie.cdomain()+" Request:"+host);
-      return cb(options.ignoreError ? null : err);
-    }
-
-    if (cookie.hostOnly == null) { // don't reset if already set
-      cookie.hostOnly = false;
-    }
-
-  } else {
-    cookie.hostOnly = true;
-    cookie.domain = host;
-  }
-
-  //S5.2.4 If the attribute-value is empty or if the first character of the
-  //attribute-value is not %x2F ("/"):
-  //Let cookie-path be the default-path.
-  if (!cookie.path || cookie.path[0] !== '/') {
-    cookie.path = defaultPath(context.pathname);
-    cookie.pathIsDefault = true;
-  }
-
-  // S5.3 step 8: NOOP; secure attribute
-  // S5.3 step 9: NOOP; httpOnly attribute
-
-  // S5.3 step 10
-  if (options.http === false && cookie.httpOnly) {
-    err = new Error("Cookie is HttpOnly and this isn't an HTTP API");
-    return cb(options.ignoreError ? null : err);
-  }
-
-  var store = this.store;
-
-  if (!store.updateCookie) {
-    store.updateCookie = function(oldCookie, newCookie, cb) {
-      this.putCookie(newCookie, cb);
-    };
-  }
-
-  function withCookie(err, oldCookie) {
-    if (err) {
-      return cb(err);
-    }
-
-    var next = function(err) {
-      if (err) {
-        return cb(err);
-      } else {
-        cb(null, cookie);
-      }
-    };
-
-    if (oldCookie) {
-      // S5.3 step 11 - "If the cookie store contains a cookie with the same name,
-      // domain, and path as the newly created cookie:"
-      if (options.http === false && oldCookie.httpOnly) { // step 11.2
-        err = new Error("old Cookie is HttpOnly and this isn't an HTTP API");
-        return cb(options.ignoreError ? null : err);
-      }
-      cookie.creation = oldCookie.creation; // step 11.3
-      cookie.creationIndex = oldCookie.creationIndex; // preserve tie-breaker
-      cookie.lastAccessed = now;
-      // Step 11.4 (delete cookie) is implied by just setting the new one:
-      store.updateCookie(oldCookie, cookie, next); // step 12
-
-    } else {
-      cookie.creation = cookie.lastAccessed = now;
-      store.putCookie(cookie, next); // step 12
-    }
-  }
-
-  store.findCookie(cookie.domain, cookie.path, cookie.key, withCookie);
-};
-
-// RFC6365 S5.4
-CAN_BE_SYNC.push('getCookies');
-CookieJar.prototype.getCookies = function(url, options, cb) {
-  var context = getCookieContext(url);
-  if (options instanceof Function) {
-    cb = options;
-    options = {};
-  }
-
-  var host = canonicalDomain(context.hostname);
-  var path = context.pathname || '/';
-
-  var secure = options.secure;
-  if (secure == null && context.protocol &&
-      (context.protocol == 'https:' || context.protocol == 'wss:'))
-  {
-    secure = true;
-  }
-
-  var http = options.http;
-  if (http == null) {
-    http = true;
-  }
-
-  var now = options.now || Date.now();
-  var expireCheck = options.expire !== false;
-  var allPaths = !!options.allPaths;
-  var store = this.store;
-
-  function matchingCookie(c) {
-    // "Either:
-    //   The cookie's host-only-flag is true and the canonicalized
-    //   request-host is identical to the cookie's domain.
-    // Or:
-    //   The cookie's host-only-flag is false and the canonicalized
-    //   request-host domain-matches the cookie's domain."
-    if (c.hostOnly) {
-      if (c.domain != host) {
-        return false;
-      }
-    } else {
-      if (!domainMatch(host, c.domain, false)) {
-        return false;
-      }
-    }
-
-    // "The request-uri's path path-matches the cookie's path."
-    if (!allPaths && !pathMatch(path, c.path)) {
-      return false;
-    }
-
-    // "If the cookie's secure-only-flag is true, then the request-uri's
-    // scheme must denote a "secure" protocol"
-    if (c.secure && !secure) {
-      return false;
-    }
-
-    // "If the cookie's http-only-flag is true, then exclude the cookie if the
-    // cookie-string is being generated for a "non-HTTP" API"
-    if (c.httpOnly && !http) {
-      return false;
-    }
-
-    // deferred from S5.3
-    // non-RFC: allow retention of expired cookies by choice
-    if (expireCheck && c.expiryTime() <= now) {
-      store.removeCookie(c.domain, c.path, c.key, function(){}); // result ignored
-      return false;
-    }
-
-    return true;
-  }
-
-  store.findCookies(host, allPaths ? null : path, function(err,cookies) {
-    if (err) {
-      return cb(err);
-    }
-
-    cookies = cookies.filter(matchingCookie);
-
-    // sorting of S5.4 part 2
-    if (options.sort !== false) {
-      cookies = cookies.sort(cookieCompare);
-    }
-
-    // S5.4 part 3
-    var now = new Date();
-    cookies.forEach(function(c) {
-      c.lastAccessed = now;
-    });
-    // TODO persist lastAccessed
-
-    cb(null,cookies);
-  });
-};
-
-CAN_BE_SYNC.push('getCookieString');
-CookieJar.prototype.getCookieString = function(/*..., cb*/) {
-  var args = Array.prototype.slice.call(arguments,0);
-  var cb = args.pop();
-  var next = function(err,cookies) {
-    if (err) {
-      cb(err);
-    } else {
-      cb(null, cookies
-        .sort(cookieCompare)
-        .map(function(c){
-          return c.cookieString();
-        })
-        .join('; '));
-    }
-  };
-  args.push(next);
-  this.getCookies.apply(this,args);
-};
-
-CAN_BE_SYNC.push('getSetCookieStrings');
-CookieJar.prototype.getSetCookieStrings = function(/*..., cb*/) {
-  var args = Array.prototype.slice.call(arguments,0);
-  var cb = args.pop();
-  var next = function(err,cookies) {
-    if (err) {
-      cb(err);
-    } else {
-      cb(null, cookies.map(function(c){
-        return c.toString();
-      }));
-    }
-  };
-  args.push(next);
-  this.getCookies.apply(this,args);
-};
-
-CAN_BE_SYNC.push('serialize');
-CookieJar.prototype.serialize = function(cb) {
-  var type = this.store.constructor.name;
-  if (type === 'Object') {
-    type = null;
-  }
-
-  // update README.md "Serialization Format" if you change this, please!
-  var serialized = {
-    // The version of tough-cookie that serialized this jar. Generally a good
-    // practice since future versions can make data import decisions based on
-    // known past behavior. When/if this matters, use `semver`.
-    version: 'tough-cookie@'+VERSION,
-
-    // add the store type, to make humans happy:
-    storeType: type,
-
-    // CookieJar configuration:
-    rejectPublicSuffixes: !!this.rejectPublicSuffixes,
-
-    // this gets filled from getAllCookies:
-    cookies: []
-  };
-
-  if (!(this.store.getAllCookies &&
-        typeof this.store.getAllCookies === 'function'))
-  {
-    return cb(new Error('store does not support getAllCookies and cannot be serialized'));
-  }
-
-  this.store.getAllCookies(function(err,cookies) {
-    if (err) {
-      return cb(err);
-    }
-
-    serialized.cookies = cookies.map(function(cookie) {
-      // convert to serialized 'raw' cookies
-      cookie = (cookie instanceof Cookie) ? cookie.toJSON() : cookie;
-
-      // Remove the index so new ones get assigned during deserialization
-      delete cookie.creationIndex;
-
-      return cookie;
-    });
-
-    return cb(null, serialized);
-  });
-};
-
-// well-known name that JSON.stringify calls
-CookieJar.prototype.toJSON = function() {
-  return this.serializeSync();
-};
-
-// use the class method CookieJar.deserialize instead of calling this directly
-CAN_BE_SYNC.push('_importCookies');
-CookieJar.prototype._importCookies = function(serialized, cb) {
-  var jar = this;
-  var cookies = serialized.cookies;
-  if (!cookies || !Array.isArray(cookies)) {
-    return cb(new Error('serialized jar has no cookies array'));
-  }
-  cookies = cookies.slice(); // do not modify the original
-
-  function putNext(err) {
-    if (err) {
-      return cb(err);
-    }
-
-    if (!cookies.length) {
-      return cb(err, jar);
-    }
-
-    var cookie;
-    try {
-      cookie = fromJSON(cookies.shift());
-    } catch (e) {
-      return cb(e);
-    }
-
-    if (cookie === null) {
-      return putNext(null); // skip this cookie
-    }
-
-    jar.store.putCookie(cookie, putNext);
-  }
-
-  putNext();
-};
-
-CookieJar.deserialize = function(strOrObj, store, cb) {
-  if (arguments.length !== 3) {
-    // store is optional
-    cb = store;
-    store = null;
-  }
-
-  var serialized;
-  if (typeof strOrObj === 'string') {
-    serialized = jsonParse(strOrObj);
-    if (serialized instanceof Error) {
-      return cb(serialized);
-    }
-  } else {
-    serialized = strOrObj;
-  }
-
-  var jar = new CookieJar(store, serialized.rejectPublicSuffixes);
-  jar._importCookies(serialized, function(err) {
-    if (err) {
-      return cb(err);
-    }
-    cb(null, jar);
-  });
-};
-
-CookieJar.deserializeSync = function(strOrObj, store) {
-  var serialized = typeof strOrObj === 'string' ?
-    JSON.parse(strOrObj) : strOrObj;
-  var jar = new CookieJar(store, serialized.rejectPublicSuffixes);
-
-  // catch this mistake early:
-  if (!jar.store.synchronous) {
-    throw new Error('CookieJar store is not synchronous; use async API instead.');
-  }
-
-  jar._importCookiesSync(serialized);
-  return jar;
-};
-CookieJar.fromJSON = CookieJar.deserializeSync;
-
-CAN_BE_SYNC.push('clone');
-CookieJar.prototype.clone = function(newStore, cb) {
-  if (arguments.length === 1) {
-    cb = newStore;
-    newStore = null;
-  }
-
-  this.serialize(function(err,serialized) {
-    if (err) {
-      return cb(err);
-    }
-    CookieJar.deserialize(newStore, serialized, cb);
-  });
-};
-
-// Use a closure to provide a true imperative API for synchronous stores.
-function syncWrap(method) {
-  return function() {
-    if (!this.store.synchronous) {
-      throw new Error('CookieJar store is not synchronous; use async API instead.');
-    }
-
-    var args = Array.prototype.slice.call(arguments);
-    var syncErr, syncResult;
-    args.push(function syncCb(err, result) {
-      syncErr = err;
-      syncResult = result;
-    });
-    this[method].apply(this, args);
-
-    if (syncErr) {
-      throw syncErr;
-    }
-    return syncResult;
-  };
-}
-
-// wrap all declared CAN_BE_SYNC methods in the sync wrapper
-CAN_BE_SYNC.forEach(function(method) {
-  CookieJar.prototype[method+'Sync'] = syncWrap(method);
-});
-
-module.exports = {
-  CookieJar: CookieJar,
-  Cookie: Cookie,
-  Store: Store,
-  MemoryCookieStore: MemoryCookieStore,
-  parseDate: parseDate,
-  formatDate: formatDate,
-  parse: parse,
-  fromJSON: fromJSON,
-  domainMatch: domainMatch,
-  defaultPath: defaultPath,
-  pathMatch: pathMatch,
-  getPublicSuffix: pubsuffix.getPublicSuffix,
-  cookieCompare: cookieCompare,
-  permuteDomain: __webpack_require__(414).permuteDomain,
-  permutePath: permutePath,
-  canonicalDomain: canonicalDomain
-};
-
-
-/***/ }),
-/* 811 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-/*!
- * Copyright (c) 2015, Salesforce.com, Inc.
- * All rights reserved.
- *
- * Redistribution and use in source and binary forms, with or without
- * modification, are permitted provided that the following conditions are met:
- *
- * 1. Redistributions of source code must retain the above copyright notice,
- * this list of conditions and the following disclaimer.
- *
- * 2. Redistributions in binary form must reproduce the above copyright notice,
- * this list of conditions and the following disclaimer in the documentation
- * and/or other materials provided with the distribution.
- *
- * 3. Neither the name of Salesforce.com nor the names of its contributors may
- * be used to endorse or promote products derived from this software without
- * specific prior written permission.
- *
- * THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
- * AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
- * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE
- * ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE
- * LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR
- * CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF
- * SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS
- * INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN
- * CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE)
- * ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE
- * POSSIBILITY OF SUCH DAMAGE.
- */
-
-var Store = __webpack_require__(416).Store;
-var permuteDomain = __webpack_require__(414).permuteDomain;
-var pathMatch = __webpack_require__(413).pathMatch;
-var util = __webpack_require__(3);
-
-function MemoryCookieStore() {
-  Store.call(this);
-  this.idx = {};
-}
-util.inherits(MemoryCookieStore, Store);
-exports.MemoryCookieStore = MemoryCookieStore;
-MemoryCookieStore.prototype.idx = null;
-
-// Since it's just a struct in RAM, this Store is synchronous
-MemoryCookieStore.prototype.synchronous = true;
-
-// force a default depth:
-MemoryCookieStore.prototype.inspect = function() {
-  return "{ idx: "+util.inspect(this.idx, false, 2)+' }';
-};
-
-MemoryCookieStore.prototype.findCookie = function(domain, path, key, cb) {
-  if (!this.idx[domain]) {
-    return cb(null,undefined);
-  }
-  if (!this.idx[domain][path]) {
-    return cb(null,undefined);
-  }
-  return cb(null,this.idx[domain][path][key]||null);
-};
-
-MemoryCookieStore.prototype.findCookies = function(domain, path, cb) {
-  var results = [];
-  if (!domain) {
-    return cb(null,[]);
-  }
-
-  var pathMatcher;
-  if (!path) {
-    // null means "all paths"
-    pathMatcher = function matchAll(domainIndex) {
-      for (var curPath in domainIndex) {
-        var pathIndex = domainIndex[curPath];
-        for (var key in pathIndex) {
-          results.push(pathIndex[key]);
-        }
-      }
-    };
-
-  } else {
-    pathMatcher = function matchRFC(domainIndex) {
-       //NOTE: we should use path-match algorithm from S5.1.4 here
-       //(see : https://github.com/ChromiumWebApps/chromium/blob/b3d3b4da8bb94c1b2e061600df106d590fda3620/net/cookies/canonical_cookie.cc#L299)
-       Object.keys(domainIndex).forEach(function (cookiePath) {
-         if (pathMatch(path, cookiePath)) {
-           var pathIndex = domainIndex[cookiePath];
-
-           for (var key in pathIndex) {
-             results.push(pathIndex[key]);
-           }
-         }
-       });
-     };
-  }
-
-  var domains = permuteDomain(domain) || [domain];
-  var idx = this.idx;
-  domains.forEach(function(curDomain) {
-    var domainIndex = idx[curDomain];
-    if (!domainIndex) {
-      return;
-    }
-    pathMatcher(domainIndex);
-  });
-
-  cb(null,results);
-};
-
-MemoryCookieStore.prototype.putCookie = function(cookie, cb) {
-  if (!this.idx[cookie.domain]) {
-    this.idx[cookie.domain] = {};
-  }
-  if (!this.idx[cookie.domain][cookie.path]) {
-    this.idx[cookie.domain][cookie.path] = {};
-  }
-  this.idx[cookie.domain][cookie.path][cookie.key] = cookie;
-  cb(null);
-};
-
-MemoryCookieStore.prototype.updateCookie = function(oldCookie, newCookie, cb) {
-  // updateCookie() may avoid updating cookies that are identical.  For example,
-  // lastAccessed may not be important to some stores and an equality
-  // comparison could exclude that field.
-  this.putCookie(newCookie,cb);
-};
-
-MemoryCookieStore.prototype.removeCookie = function(domain, path, key, cb) {
-  if (this.idx[domain] && this.idx[domain][path] && this.idx[domain][path][key]) {
-    delete this.idx[domain][path][key];
-  }
-  cb(null);
-};
-
-MemoryCookieStore.prototype.removeCookies = function(domain, path, cb) {
-  if (this.idx[domain]) {
-    if (path) {
-      delete this.idx[domain][path];
-    } else {
-      delete this.idx[domain];
-    }
-  }
-  return cb(null);
-};
-
-MemoryCookieStore.prototype.getAllCookies = function(cb) {
-  var cookies = [];
-  var idx = this.idx;
-
-  var domains = Object.keys(idx);
-  domains.forEach(function(domain) {
-    var paths = Object.keys(idx[domain]);
-    paths.forEach(function(path) {
-      var keys = Object.keys(idx[domain][path]);
-      keys.forEach(function(key) {
-        if (key !== null) {
-          cookies.push(idx[domain][path][key]);
-        }
-      });
-    });
-  });
-
-  // Sort by creationIndex so deserializing retains the creation order.
-  // When implementing your own store, this SHOULD retain the order too
-  cookies.sort(function(a,b) {
-    return (a.creationIndex||0) - (b.creationIndex||0);
-  });
-
-  cb(null, cookies);
-};
-
-
-/***/ }),
-/* 812 */
-/***/ (function(module, exports) {
-
-module.exports = {"author":{"name":"Jeremy Stashewsky","email":"jstashewsky@salesforce.com","website":"https://github.com/stash"},"contributors":[{"name":"Alexander Savin","website":"https://github.com/apsavin"},{"name":"Ian Livingstone","website":"https://github.com/ianlivingstone"},{"name":"Ivan Nikulin","website":"https://github.com/inikulin"},{"name":"Lalit Kapoor","website":"https://github.com/lalitkapoor"},{"name":"Sam Thompson","website":"https://github.com/sambthompson"},{"name":"Sebastian Mayr","website":"https://github.com/Sebmaster"}],"license":"BSD-3-Clause","name":"tough-cookie","description":"RFC6265 Cookies and Cookie Jar for node.js","keywords":["HTTP","cookie","cookies","set-cookie","cookiejar","jar","RFC6265","RFC2965"],"version":"2.3.4","homepage":"https://github.com/salesforce/tough-cookie","repository":{"type":"git","url":"git://github.com/salesforce/tough-cookie.git"},"bugs":{"url":"https://github.com/salesforce/tough-cookie/issues"},"main":"./lib/cookie","files":["lib"],"scripts":{"suffixup":"curl -o public_suffix_list.dat https://publicsuffix.org/list/public_suffix_list.dat && ./generate-pubsuffix.js","test":"vows test/*_test.js"},"engines":{"node":">=0.8"},"devDependencies":{"async":"^1.4.2","string.prototype.repeat":"^0.2.0","vows":"^0.8.1"},"dependencies":{"punycode":"^1.4.1"}}
-
-/***/ }),
-/* 813 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var http = __webpack_require__(87)
-var https = __webpack_require__(195)
-var url = __webpack_require__(24)
-var util = __webpack_require__(3)
-var stream = __webpack_require__(23)
-var zlib = __webpack_require__(198)
-var aws2 = __webpack_require__(521)
-var aws4 = __webpack_require__(522)
-var httpSignature = __webpack_require__(680)
-var mime = __webpack_require__(400)
-var caseless = __webpack_require__(231)
-var ForeverAgent = __webpack_require__(648)
-var FormData = __webpack_require__(649)
-var extend = __webpack_require__(269)
-var isstream = __webpack_require__(399)
-var isTypedArray = __webpack_require__(742).strict
-var helpers = __webpack_require__(305)
-var cookies = __webpack_require__(412)
-var getProxyFromURI = __webpack_require__(802)
-var Querystring = __webpack_require__(807).Querystring
-var Har = __webpack_require__(803).Har
-var Auth = __webpack_require__(801).Auth
-var OAuth = __webpack_require__(806).OAuth
-var hawk = __webpack_require__(804)
-var Multipart = __webpack_require__(805).Multipart
-var Redirect = __webpack_require__(808).Redirect
-var Tunnel = __webpack_require__(809).Tunnel
-var now = __webpack_require__(776)
-var Buffer = __webpack_require__(45).Buffer
-
-var safeStringify = helpers.safeStringify
-var isReadStream = helpers.isReadStream
-var toBase64 = helpers.toBase64
-var defer = helpers.defer
-var copy = helpers.copy
-var version = helpers.version
-var globalCookieJar = cookies.jar()
-
-var globalPool = {}
-
-function filterForNonReserved (reserved, options) {
-  // Filter out properties that are not reserved.
-  // Reserved values are passed in at call site.
-
-  var object = {}
-  for (var i in options) {
-    var notReserved = (reserved.indexOf(i) === -1)
-    if (notReserved) {
-      object[i] = options[i]
-    }
-  }
-  return object
-}
-
-function filterOutReservedFunctions (reserved, options) {
-  // Filter out properties that are functions and are reserved.
-  // Reserved values are passed in at call site.
-
-  var object = {}
-  for (var i in options) {
-    var isReserved = !(reserved.indexOf(i) === -1)
-    var isFunction = (typeof options[i] === 'function')
-    if (!(isReserved && isFunction)) {
-      object[i] = options[i]
-    }
-  }
-  return object
-}
-
-// Return a simpler request object to allow serialization
-function requestToJSON () {
-  var self = this
-  return {
-    uri: self.uri,
-    method: self.method,
-    headers: self.headers
-  }
-}
-
-// Return a simpler response object to allow serialization
-function responseToJSON () {
-  var self = this
-  return {
-    statusCode: self.statusCode,
-    body: self.body,
-    headers: self.headers,
-    request: requestToJSON.call(self.request)
-  }
-}
-
-function Request (options) {
-  // if given the method property in options, set property explicitMethod to true
-
-  // extend the Request instance with any non-reserved properties
-  // remove any reserved functions from the options object
-  // set Request instance to be readable and writable
-  // call init
-
-  var self = this
-
-  // start with HAR, then override with additional options
-  if (options.har) {
-    self._har = new Har(self)
-    options = self._har.options(options)
-  }
-
-  stream.Stream.call(self)
-  var reserved = Object.keys(Request.prototype)
-  var nonReserved = filterForNonReserved(reserved, options)
-
-  extend(self, nonReserved)
-  options = filterOutReservedFunctions(reserved, options)
-
-  self.readable = true
-  self.writable = true
-  if (options.method) {
-    self.explicitMethod = true
-  }
-  self._qs = new Querystring(self)
-  self._auth = new Auth(self)
-  self._oauth = new OAuth(self)
-  self._multipart = new Multipart(self)
-  self._redirect = new Redirect(self)
-  self._tunnel = new Tunnel(self)
-  self.init(options)
-}
-
-util.inherits(Request, stream.Stream)
-
-// Debugging
-Request.debug = process.env.NODE_DEBUG && /\brequest\b/.test(process.env.NODE_DEBUG)
-function debug () {
-  if (Request.debug) {
-    console.error('REQUEST %s', util.format.apply(util, arguments))
-  }
-}
-Request.prototype.debug = debug
-
-Request.prototype.init = function (options) {
-  // init() contains all the code to setup the request object.
-  // the actual outgoing request is not started until start() is called
-  // this function is called from both the constructor and on redirect.
-  var self = this
-  if (!options) {
-    options = {}
-  }
-  self.headers = self.headers ? copy(self.headers) : {}
-
-  // Delete headers with value undefined since they break
-  // ClientRequest.OutgoingMessage.setHeader in node 0.12
-  for (var headerName in self.headers) {
-    if (typeof self.headers[headerName] === 'undefined') {
-      delete self.headers[headerName]
-    }
-  }
-
-  caseless.httpify(self, self.headers)
-
-  if (!self.method) {
-    self.method = options.method || 'GET'
-  }
-  if (!self.localAddress) {
-    self.localAddress = options.localAddress
-  }
-
-  self._qs.init(options)
-
-  debug(options)
-  if (!self.pool && self.pool !== false) {
-    self.pool = globalPool
-  }
-  self.dests = self.dests || []
-  self.__isRequestRequest = true
-
-  // Protect against double callback
-  if (!self._callback && self.callback) {
-    self._callback = self.callback
-    self.callback = function () {
-      if (self._callbackCalled) {
-        return // Print a warning maybe?
-      }
-      self._callbackCalled = true
-      self._callback.apply(self, arguments)
-    }
-    self.on('error', self.callback.bind())
-    self.on('complete', self.callback.bind(self, null))
-  }
-
-  // People use this property instead all the time, so support it
-  if (!self.uri && self.url) {
-    self.uri = self.url
-    delete self.url
-  }
-
-  // If there's a baseUrl, then use it as the base URL (i.e. uri must be
-  // specified as a relative path and is appended to baseUrl).
-  if (self.baseUrl) {
-    if (typeof self.baseUrl !== 'string') {
-      return self.emit('error', new Error('options.baseUrl must be a string'))
-    }
-
-    if (typeof self.uri !== 'string') {
-      return self.emit('error', new Error('options.uri must be a string when using options.baseUrl'))
-    }
-
-    if (self.uri.indexOf('//') === 0 || self.uri.indexOf('://') !== -1) {
-      return self.emit('error', new Error('options.uri must be a path when using options.baseUrl'))
-    }
-
-    // Handle all cases to make sure that there's only one slash between
-    // baseUrl and uri.
-    var baseUrlEndsWithSlash = self.baseUrl.lastIndexOf('/') === self.baseUrl.length - 1
-    var uriStartsWithSlash = self.uri.indexOf('/') === 0
-
-    if (baseUrlEndsWithSlash && uriStartsWithSlash) {
-      self.uri = self.baseUrl + self.uri.slice(1)
-    } else if (baseUrlEndsWithSlash || uriStartsWithSlash) {
-      self.uri = self.baseUrl + self.uri
-    } else if (self.uri === '') {
-      self.uri = self.baseUrl
-    } else {
-      self.uri = self.baseUrl + '/' + self.uri
-    }
-    delete self.baseUrl
-  }
-
-  // A URI is needed by this point, emit error if we haven't been able to get one
-  if (!self.uri) {
-    return self.emit('error', new Error('options.uri is a required argument'))
-  }
-
-  // If a string URI/URL was given, parse it into a URL object
-  if (typeof self.uri === 'string') {
-    self.uri = url.parse(self.uri)
-  }
-
-  // Some URL objects are not from a URL parsed string and need href added
-  if (!self.uri.href) {
-    self.uri.href = url.format(self.uri)
-  }
-
-  // DEPRECATED: Warning for users of the old Unix Sockets URL Scheme
-  if (self.uri.protocol === 'unix:') {
-    return self.emit('error', new Error('`unix://` URL scheme is no longer supported. Please use the format `http://unix:SOCKET:PATH`'))
-  }
-
-  // Support Unix Sockets
-  if (self.uri.host === 'unix') {
-    self.enableUnixSocket()
-  }
-
-  if (self.strictSSL === false) {
-    self.rejectUnauthorized = false
-  }
-
-  if (!self.uri.pathname) { self.uri.pathname = '/' }
-
-  if (!(self.uri.host || (self.uri.hostname && self.uri.port)) && !self.uri.isUnix) {
-    // Invalid URI: it may generate lot of bad errors, like 'TypeError: Cannot call method `indexOf` of undefined' in CookieJar
-    // Detect and reject it as soon as possible
-    var faultyUri = url.format(self.uri)
-    var message = 'Invalid URI "' + faultyUri + '"'
-    if (Object.keys(options).length === 0) {
-      // No option ? This can be the sign of a redirect
-      // As this is a case where the user cannot do anything (they didn't call request directly with this URL)
-      // they should be warned that it can be caused by a redirection (can save some hair)
-      message += '. This can be caused by a crappy redirection.'
-    }
-    // This error was fatal
-    self.abort()
-    return self.emit('error', new Error(message))
-  }
-
-  if (!self.hasOwnProperty('proxy')) {
-    self.proxy = getProxyFromURI(self.uri)
-  }
-
-  self.tunnel = self._tunnel.isEnabled()
-  if (self.proxy) {
-    self._tunnel.setup(options)
-  }
-
-  self._redirect.onRequest(options)
-
-  self.setHost = false
-  if (!self.hasHeader('host')) {
-    var hostHeaderName = self.originalHostHeaderName || 'host'
-    // When used with an IPv6 address, `host` will provide
-    // the correct bracketed format, unlike using `hostname` and
-    // optionally adding the `port` when necessary.
-    self.setHeader(hostHeaderName, self.uri.host)
-    self.setHost = true
-  }
-
-  self.jar(self._jar || options.jar)
-
-  if (!self.uri.port) {
-    if (self.uri.protocol === 'http:') { self.uri.port = 80 } else if (self.uri.protocol === 'https:') { self.uri.port = 443 }
-  }
-
-  if (self.proxy && !self.tunnel) {
-    self.port = self.proxy.port
-    self.host = self.proxy.hostname
-  } else {
-    self.port = self.uri.port
-    self.host = self.uri.hostname
-  }
-
-  if (options.form) {
-    self.form(options.form)
-  }
-
-  if (options.formData) {
-    var formData = options.formData
-    var requestForm = self.form()
-    var appendFormValue = function (key, value) {
-      if (value && value.hasOwnProperty('value') && value.hasOwnProperty('options')) {
-        requestForm.append(key, value.value, value.options)
-      } else {
-        requestForm.append(key, value)
-      }
-    }
-    for (var formKey in formData) {
-      if (formData.hasOwnProperty(formKey)) {
-        var formValue = formData[formKey]
-        if (formValue instanceof Array) {
-          for (var j = 0; j < formValue.length; j++) {
-            appendFormValue(formKey, formValue[j])
-          }
-        } else {
-          appendFormValue(formKey, formValue)
-        }
-      }
-    }
-  }
-
-  if (options.qs) {
-    self.qs(options.qs)
-  }
-
-  if (self.uri.path) {
-    self.path = self.uri.path
-  } else {
-    self.path = self.uri.pathname + (self.uri.search || '')
-  }
-
-  if (self.path.length === 0) {
-    self.path = '/'
-  }
-
-  // Auth must happen last in case signing is dependent on other headers
-  if (options.aws) {
-    self.aws(options.aws)
-  }
-
-  if (options.hawk) {
-    self.hawk(options.hawk)
-  }
-
-  if (options.httpSignature) {
-    self.httpSignature(options.httpSignature)
-  }
-
-  if (options.auth) {
-    if (Object.prototype.hasOwnProperty.call(options.auth, 'username')) {
-      options.auth.user = options.auth.username
-    }
-    if (Object.prototype.hasOwnProperty.call(options.auth, 'password')) {
-      options.auth.pass = options.auth.password
-    }
-
-    self.auth(
-      options.auth.user,
-      options.auth.pass,
-      options.auth.sendImmediately,
-      options.auth.bearer
-    )
-  }
-
-  if (self.gzip && !self.hasHeader('accept-encoding')) {
-    self.setHeader('accept-encoding', 'gzip, deflate')
-  }
-
-  if (self.uri.auth && !self.hasHeader('authorization')) {
-    var uriAuthPieces = self.uri.auth.split(':').map(function (item) { return self._qs.unescape(item) })
-    self.auth(uriAuthPieces[0], uriAuthPieces.slice(1).join(':'), true)
-  }
-
-  if (!self.tunnel && self.proxy && self.proxy.auth && !self.hasHeader('proxy-authorization')) {
-    var proxyAuthPieces = self.proxy.auth.split(':').map(function (item) { return self._qs.unescape(item) })
-    var authHeader = 'Basic ' + toBase64(proxyAuthPieces.join(':'))
-    self.setHeader('proxy-authorization', authHeader)
-  }
-
-  if (self.proxy && !self.tunnel) {
-    self.path = (self.uri.protocol + '//' + self.uri.host + self.path)
-  }
-
-  if (options.json) {
-    self.json(options.json)
-  }
-  if (options.multipart) {
-    self.multipart(options.multipart)
-  }
-
-  if (options.time) {
-    self.timing = true
-
-    // NOTE: elapsedTime is deprecated in favor of .timings
-    self.elapsedTime = self.elapsedTime || 0
-  }
-
-  function setContentLength () {
-    if (isTypedArray(self.body)) {
-      self.body = Buffer.from(self.body)
-    }
-
-    if (!self.hasHeader('content-length')) {
-      var length
-      if (typeof self.body === 'string') {
-        length = Buffer.byteLength(self.body)
-      } else if (Array.isArray(self.body)) {
-        length = self.body.reduce(function (a, b) { return a + b.length }, 0)
-      } else {
-        length = self.body.length
-      }
-
-      if (length) {
-        self.setHeader('content-length', length)
-      } else {
-        self.emit('error', new Error('Argument error, options.body.'))
-      }
-    }
-  }
-  if (self.body && !isstream(self.body)) {
-    setContentLength()
-  }
-
-  if (options.oauth) {
-    self.oauth(options.oauth)
-  } else if (self._oauth.params && self.hasHeader('authorization')) {
-    self.oauth(self._oauth.params)
-  }
-
-  var protocol = self.proxy && !self.tunnel ? self.proxy.protocol : self.uri.protocol
-  var defaultModules = {'http:': http, 'https:': https}
-  var httpModules = self.httpModules || {}
-
-  self.httpModule = httpModules[protocol] || defaultModules[protocol]
-
-  if (!self.httpModule) {
-    return self.emit('error', new Error('Invalid protocol: ' + protocol))
-  }
-
-  if (options.ca) {
-    self.ca = options.ca
-  }
-
-  if (!self.agent) {
-    if (options.agentOptions) {
-      self.agentOptions = options.agentOptions
-    }
-
-    if (options.agentClass) {
-      self.agentClass = options.agentClass
-    } else if (options.forever) {
-      var v = version()
-      // use ForeverAgent in node 0.10- only
-      if (v.major === 0 && v.minor <= 10) {
-        self.agentClass = protocol === 'http:' ? ForeverAgent : ForeverAgent.SSL
-      } else {
-        self.agentClass = self.httpModule.Agent
-        self.agentOptions = self.agentOptions || {}
-        self.agentOptions.keepAlive = true
-      }
-    } else {
-      self.agentClass = self.httpModule.Agent
-    }
-  }
-
-  if (self.pool === false) {
-    self.agent = false
-  } else {
-    self.agent = self.agent || self.getNewAgent()
-  }
-
-  self.on('pipe', function (src) {
-    if (self.ntick && self._started) {
-      self.emit('error', new Error('You cannot pipe to this stream after the outbound request has started.'))
-    }
-    self.src = src
-    if (isReadStream(src)) {
-      if (!self.hasHeader('content-type')) {
-        self.setHeader('content-type', mime.lookup(src.path))
-      }
-    } else {
-      if (src.headers) {
-        for (var i in src.headers) {
-          if (!self.hasHeader(i)) {
-            self.setHeader(i, src.headers[i])
-          }
-        }
-      }
-      if (self._json && !self.hasHeader('content-type')) {
-        self.setHeader('content-type', 'application/json')
-      }
-      if (src.method && !self.explicitMethod) {
-        self.method = src.method
-      }
-    }
-
-  // self.on('pipe', function () {
-  //   console.error('You have already piped to this stream. Pipeing twice is likely to break the request.')
-  // })
-  })
-
-  defer(function () {
-    if (self._aborted) {
-      return
-    }
-
-    var end = function () {
-      if (self._form) {
-        if (!self._auth.hasAuth) {
-          self._form.pipe(self)
-        } else if (self._auth.hasAuth && self._auth.sentAuth) {
-          self._form.pipe(self)
-        }
-      }
-      if (self._multipart && self._multipart.chunked) {
-        self._multipart.body.pipe(self)
-      }
-      if (self.body) {
-        if (isstream(self.body)) {
-          self.body.pipe(self)
-        } else {
-          setContentLength()
-          if (Array.isArray(self.body)) {
-            self.body.forEach(function (part) {
-              self.write(part)
-            })
-          } else {
-            self.write(self.body)
-          }
-          self.end()
-        }
-      } else if (self.requestBodyStream) {
-        console.warn('options.requestBodyStream is deprecated, please pass the request object to stream.pipe.')
-        self.requestBodyStream.pipe(self)
-      } else if (!self.src) {
-        if (self._auth.hasAuth && !self._auth.sentAuth) {
-          self.end()
-          return
-        }
-        if (self.method !== 'GET' && typeof self.method !== 'undefined') {
-          self.setHeader('content-length', 0)
-        }
-        self.end()
-      }
-    }
-
-    if (self._form && !self.hasHeader('content-length')) {
-      // Before ending the request, we had to compute the length of the whole form, asyncly
-      self.setHeader(self._form.getHeaders(), true)
-      self._form.getLength(function (err, length) {
-        if (!err && !isNaN(length)) {
-          self.setHeader('content-length', length)
-        }
-        end()
-      })
-    } else {
-      end()
-    }
-
-    self.ntick = true
-  })
-}
-
-Request.prototype.getNewAgent = function () {
-  var self = this
-  var Agent = self.agentClass
-  var options = {}
-  if (self.agentOptions) {
-    for (var i in self.agentOptions) {
-      options[i] = self.agentOptions[i]
-    }
-  }
-  if (self.ca) {
-    options.ca = self.ca
-  }
-  if (self.ciphers) {
-    options.ciphers = self.ciphers
-  }
-  if (self.secureProtocol) {
-    options.secureProtocol = self.secureProtocol
-  }
-  if (self.secureOptions) {
-    options.secureOptions = self.secureOptions
-  }
-  if (typeof self.rejectUnauthorized !== 'undefined') {
-    options.rejectUnauthorized = self.rejectUnauthorized
-  }
-
-  if (self.cert && self.key) {
-    options.key = self.key
-    options.cert = self.cert
-  }
-
-  if (self.pfx) {
-    options.pfx = self.pfx
-  }
-
-  if (self.passphrase) {
-    options.passphrase = self.passphrase
-  }
-
-  var poolKey = ''
-
-  // different types of agents are in different pools
-  if (Agent !== self.httpModule.Agent) {
-    poolKey += Agent.name
-  }
-
-  // ca option is only relevant if proxy or destination are https
-  var proxy = self.proxy
-  if (typeof proxy === 'string') {
-    proxy = url.parse(proxy)
-  }
-  var isHttps = (proxy && proxy.protocol === 'https:') || this.uri.protocol === 'https:'
-
-  if (isHttps) {
-    if (options.ca) {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.ca
-    }
-
-    if (typeof options.rejectUnauthorized !== 'undefined') {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.rejectUnauthorized
-    }
-
-    if (options.cert) {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.cert.toString('ascii') + options.key.toString('ascii')
-    }
-
-    if (options.pfx) {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.pfx.toString('ascii')
-    }
-
-    if (options.ciphers) {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.ciphers
-    }
-
-    if (options.secureProtocol) {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.secureProtocol
-    }
-
-    if (options.secureOptions) {
-      if (poolKey) {
-        poolKey += ':'
-      }
-      poolKey += options.secureOptions
-    }
-  }
-
-  if (self.pool === globalPool && !poolKey && Object.keys(options).length === 0 && self.httpModule.globalAgent) {
-    // not doing anything special.  Use the globalAgent
-    return self.httpModule.globalAgent
-  }
-
-  // we're using a stored agent.  Make sure it's protocol-specific
-  poolKey = self.uri.protocol + poolKey
-
-  // generate a new agent for this setting if none yet exists
-  if (!self.pool[poolKey]) {
-    self.pool[poolKey] = new Agent(options)
-    // properly set maxSockets on new agents
-    if (self.pool.maxSockets) {
-      self.pool[poolKey].maxSockets = self.pool.maxSockets
-    }
-  }
-
-  return self.pool[poolKey]
-}
-
-Request.prototype.start = function () {
-  // start() is called once we are ready to send the outgoing HTTP request.
-  // this is usually called on the first write(), end() or on nextTick()
-  var self = this
-
-  if (self.timing) {
-    // All timings will be relative to this request's startTime.  In order to do this,
-    // we need to capture the wall-clock start time (via Date), immediately followed
-    // by the high-resolution timer (via now()).  While these two won't be set
-    // at the _exact_ same time, they should be close enough to be able to calculate
-    // high-resolution, monotonically non-decreasing timestamps relative to startTime.
-    var startTime = new Date().getTime()
-    var startTimeNow = now()
-  }
-
-  if (self._aborted) {
-    return
-  }
-
-  self._started = true
-  self.method = self.method || 'GET'
-  self.href = self.uri.href
-
-  if (self.src && self.src.stat && self.src.stat.size && !self.hasHeader('content-length')) {
-    self.setHeader('content-length', self.src.stat.size)
-  }
-  if (self._aws) {
-    self.aws(self._aws, true)
-  }
-
-  // We have a method named auth, which is completely different from the http.request
-  // auth option.  If we don't remove it, we're gonna have a bad time.
-  var reqOptions = copy(self)
-  delete reqOptions.auth
-
-  debug('make request', self.uri.href)
-
-  // node v6.8.0 now supports a `timeout` value in `http.request()`, but we
-  // should delete it for now since we handle timeouts manually for better
-  // consistency with node versions before v6.8.0
-  delete reqOptions.timeout
-
-  try {
-    self.req = self.httpModule.request(reqOptions)
-  } catch (err) {
-    self.emit('error', err)
-    return
-  }
-
-  if (self.timing) {
-    self.startTime = startTime
-    self.startTimeNow = startTimeNow
-
-    // Timing values will all be relative to startTime (by comparing to startTimeNow
-    // so we have an accurate clock)
-    self.timings = {}
-  }
-
-  var timeout
-  if (self.timeout && !self.timeoutTimer) {
-    if (self.timeout < 0) {
-      timeout = 0
-    } else if (typeof self.timeout === 'number' && isFinite(self.timeout)) {
-      timeout = self.timeout
-    }
-  }
-
-  self.req.on('response', self.onRequestResponse.bind(self))
-  self.req.on('error', self.onRequestError.bind(self))
-  self.req.on('drain', function () {
-    self.emit('drain')
-  })
-
-  self.req.on('socket', function (socket) {
-    // `._connecting` was the old property which was made public in node v6.1.0
-    var isConnecting = socket._connecting || socket.connecting
-    if (self.timing) {
-      self.timings.socket = now() - self.startTimeNow
-
-      if (isConnecting) {
-        var onLookupTiming = function () {
-          self.timings.lookup = now() - self.startTimeNow
-        }
-
-        var onConnectTiming = function () {
-          self.timings.connect = now() - self.startTimeNow
-        }
-
-        socket.once('lookup', onLookupTiming)
-        socket.once('connect', onConnectTiming)
-
-        // clean up timing event listeners if needed on error
-        self.req.once('error', function () {
-          socket.removeListener('lookup', onLookupTiming)
-          socket.removeListener('connect', onConnectTiming)
-        })
-      }
-    }
-
-    var setReqTimeout = function () {
-      // This timeout sets the amount of time to wait *between* bytes sent
-      // from the server once connected.
-      //
-      // In particular, it's useful for erroring if the server fails to send
-      // data halfway through streaming a response.
-      self.req.setTimeout(timeout, function () {
-        if (self.req) {
-          self.abort()
-          var e = new Error('ESOCKETTIMEDOUT')
-          e.code = 'ESOCKETTIMEDOUT'
-          e.connect = false
-          self.emit('error', e)
-        }
-      })
-    }
-    if (timeout !== undefined) {
-      // Only start the connection timer if we're actually connecting a new
-      // socket, otherwise if we're already connected (because this is a
-      // keep-alive connection) do not bother. This is important since we won't
-      // get a 'connect' event for an already connected socket.
-      if (isConnecting) {
-        var onReqSockConnect = function () {
-          socket.removeListener('connect', onReqSockConnect)
-          clearTimeout(self.timeoutTimer)
-          self.timeoutTimer = null
-          setReqTimeout()
-        }
-
-        socket.on('connect', onReqSockConnect)
-
-        self.req.on('error', function (err) { // eslint-disable-line handle-callback-err
-          socket.removeListener('connect', onReqSockConnect)
-        })
-
-        // Set a timeout in memory - this block will throw if the server takes more
-        // than `timeout` to write the HTTP status and headers (corresponding to
-        // the on('response') event on the client). NB: this measures wall-clock
-        // time, not the time between bytes sent by the server.
-        self.timeoutTimer = setTimeout(function () {
-          socket.removeListener('connect', onReqSockConnect)
-          self.abort()
-          var e = new Error('ETIMEDOUT')
-          e.code = 'ETIMEDOUT'
-          e.connect = true
-          self.emit('error', e)
-        }, timeout)
-      } else {
-        // We're already connected
-        setReqTimeout()
-      }
-    }
-    self.emit('socket', socket)
-  })
-
-  self.emit('request', self.req)
-}
-
-Request.prototype.onRequestError = function (error) {
-  var self = this
-  if (self._aborted) {
-    return
-  }
-  if (self.req && self.req._reusedSocket && error.code === 'ECONNRESET' &&
-    self.agent.addRequestNoreuse) {
-    self.agent = { addRequest: self.agent.addRequestNoreuse.bind(self.agent) }
-    self.start()
-    self.req.end()
-    return
-  }
-  if (self.timeout && self.timeoutTimer) {
-    clearTimeout(self.timeoutTimer)
-    self.timeoutTimer = null
-  }
-  self.emit('error', error)
-}
-
-Request.prototype.onRequestResponse = function (response) {
-  var self = this
-
-  if (self.timing) {
-    self.timings.response = now() - self.startTimeNow
-  }
-
-  debug('onRequestResponse', self.uri.href, response.statusCode, response.headers)
-  response.on('end', function () {
-    if (self.timing) {
-      self.timings.end = now() - self.startTimeNow
-      response.timingStart = self.startTime
-
-      // fill in the blanks for any periods that didn't trigger, such as
-      // no lookup or connect due to keep alive
-      if (!self.timings.socket) {
-        self.timings.socket = 0
-      }
-      if (!self.timings.lookup) {
-        self.timings.lookup = self.timings.socket
-      }
-      if (!self.timings.connect) {
-        self.timings.connect = self.timings.lookup
-      }
-      if (!self.timings.response) {
-        self.timings.response = self.timings.connect
-      }
-
-      debug('elapsed time', self.timings.end)
-
-      // elapsedTime includes all redirects
-      self.elapsedTime += Math.round(self.timings.end)
-
-      // NOTE: elapsedTime is deprecated in favor of .timings
-      response.elapsedTime = self.elapsedTime
-
-      // timings is just for the final fetch
-      response.timings = self.timings
-
-      // pre-calculate phase timings as well
-      response.timingPhases = {
-        wait: self.timings.socket,
-        dns: self.timings.lookup - self.timings.socket,
-        tcp: self.timings.connect - self.timings.lookup,
-        firstByte: self.timings.response - self.timings.connect,
-        download: self.timings.end - self.timings.response,
-        total: self.timings.end
-      }
-    }
-    debug('response end', self.uri.href, response.statusCode, response.headers)
-  })
-
-  if (self._aborted) {
-    debug('aborted', self.uri.href)
-    response.resume()
-    return
-  }
-
-  self.response = response
-  response.request = self
-  response.toJSON = responseToJSON
-
-  // XXX This is different on 0.10, because SSL is strict by default
-  if (self.httpModule === https &&
-    self.strictSSL && (!response.hasOwnProperty('socket') ||
-    !response.socket.authorized)) {
-    debug('strict ssl error', self.uri.href)
-    var sslErr = response.hasOwnProperty('socket') ? response.socket.authorizationError : self.uri.href + ' does not support SSL'
-    self.emit('error', new Error('SSL Error: ' + sslErr))
-    return
-  }
-
-  // Save the original host before any redirect (if it changes, we need to
-  // remove any authorization headers).  Also remember the case of the header
-  // name because lots of broken servers expect Host instead of host and we
-  // want the caller to be able to specify this.
-  self.originalHost = self.getHeader('host')
-  if (!self.originalHostHeaderName) {
-    self.originalHostHeaderName = self.hasHeader('host')
-  }
-  if (self.setHost) {
-    self.removeHeader('host')
-  }
-  if (self.timeout && self.timeoutTimer) {
-    clearTimeout(self.timeoutTimer)
-    self.timeoutTimer = null
-  }
-
-  var targetCookieJar = (self._jar && self._jar.setCookie) ? self._jar : globalCookieJar
-  var addCookie = function (cookie) {
-    // set the cookie if it's domain in the href's domain.
-    try {
-      targetCookieJar.setCookie(cookie, self.uri.href, {ignoreError: true})
-    } catch (e) {
-      self.emit('error', e)
-    }
-  }
-
-  response.caseless = caseless(response.headers)
-
-  if (response.caseless.has('set-cookie') && (!self._disableCookies)) {
-    var headerName = response.caseless.has('set-cookie')
-    if (Array.isArray(response.headers[headerName])) {
-      response.headers[headerName].forEach(addCookie)
-    } else {
-      addCookie(response.headers[headerName])
-    }
-  }
-
-  if (self._redirect.onResponse(response)) {
-    return // Ignore the rest of the response
-  } else {
-    // Be a good stream and emit end when the response is finished.
-    // Hack to emit end on close because of a core bug that never fires end
-    response.on('close', function () {
-      if (!self._ended) {
-        self.response.emit('end')
-      }
-    })
-
-    response.once('end', function () {
-      self._ended = true
-    })
-
-    var noBody = function (code) {
-      return (
-        self.method === 'HEAD' ||
-        // Informational
-        (code >= 100 && code < 200) ||
-        // No Content
-        code === 204 ||
-        // Not Modified
-        code === 304
-      )
-    }
-
-    var responseContent
-    if (self.gzip && !noBody(response.statusCode)) {
-      var contentEncoding = response.headers['content-encoding'] || 'identity'
-      contentEncoding = contentEncoding.trim().toLowerCase()
-
-      // Be more lenient with decoding compressed responses, since (very rarely)
-      // servers send slightly invalid gzip responses that are still accepted
-      // by common browsers.
-      // Always using Z_SYNC_FLUSH is what cURL does.
-      var zlibOptions = {
-        flush: zlib.Z_SYNC_FLUSH,
-        finishFlush: zlib.Z_SYNC_FLUSH
-      }
-
-      if (contentEncoding === 'gzip') {
-        responseContent = zlib.createGunzip(zlibOptions)
-        response.pipe(responseContent)
-      } else if (contentEncoding === 'deflate') {
-        responseContent = zlib.createInflate(zlibOptions)
-        response.pipe(responseContent)
-      } else {
-        // Since previous versions didn't check for Content-Encoding header,
-        // ignore any invalid values to preserve backwards-compatibility
-        if (contentEncoding !== 'identity') {
-          debug('ignoring unrecognized Content-Encoding ' + contentEncoding)
-        }
-        responseContent = response
-      }
-    } else {
-      responseContent = response
-    }
-
-    if (self.encoding) {
-      if (self.dests.length !== 0) {
-        console.error('Ignoring encoding parameter as this stream is being piped to another stream which makes the encoding option invalid.')
-      } else {
-        responseContent.setEncoding(self.encoding)
-      }
-    }
-
-    if (self._paused) {
-      responseContent.pause()
-    }
-
-    self.responseContent = responseContent
-
-    self.emit('response', response)
-
-    self.dests.forEach(function (dest) {
-      self.pipeDest(dest)
-    })
-
-    responseContent.on('data', function (chunk) {
-      if (self.timing && !self.responseStarted) {
-        self.responseStartTime = (new Date()).getTime()
-
-        // NOTE: responseStartTime is deprecated in favor of .timings
-        response.responseStartTime = self.responseStartTime
-      }
-      self._destdata = true
-      self.emit('data', chunk)
-    })
-    responseContent.once('end', function (chunk) {
-      self.emit('end', chunk)
-    })
-    responseContent.on('error', function (error) {
-      self.emit('error', error)
-    })
-    responseContent.on('close', function () { self.emit('close') })
-
-    if (self.callback) {
-      self.readResponseBody(response)
-    } else { // if no callback
-      self.on('end', function () {
-        if (self._aborted) {
-          debug('aborted', self.uri.href)
-          return
-        }
-        self.emit('complete', response)
-      })
-    }
-  }
-  debug('finish init function', self.uri.href)
-}
-
-Request.prototype.readResponseBody = function (response) {
-  var self = this
-  debug("reading response's body")
-  var buffers = []
-  var bufferLength = 0
-  var strings = []
-
-  self.on('data', function (chunk) {
-    if (!Buffer.isBuffer(chunk)) {
-      strings.push(chunk)
-    } else if (chunk.length) {
-      bufferLength += chunk.length
-      buffers.push(chunk)
-    }
-  })
-  self.on('end', function () {
-    debug('end event', self.uri.href)
-    if (self._aborted) {
-      debug('aborted', self.uri.href)
-      // `buffer` is defined in the parent scope and used in a closure it exists for the life of the request.
-      // This can lead to leaky behavior if the user retains a reference to the request object.
-      buffers = []
-      bufferLength = 0
-      return
-    }
-
-    if (bufferLength) {
-      debug('has body', self.uri.href, bufferLength)
-      response.body = Buffer.concat(buffers, bufferLength)
-      if (self.encoding !== null) {
-        response.body = response.body.toString(self.encoding)
-      }
-      // `buffer` is defined in the parent scope and used in a closure it exists for the life of the Request.
-      // This can lead to leaky behavior if the user retains a reference to the request object.
-      buffers = []
-      bufferLength = 0
-    } else if (strings.length) {
-      // The UTF8 BOM [0xEF,0xBB,0xBF] is converted to [0xFE,0xFF] in the JS UTC16/UCS2 representation.
-      // Strip this value out when the encoding is set to 'utf8', as upstream consumers won't expect it and it breaks JSON.parse().
-      if (self.encoding === 'utf8' && strings[0].length > 0 && strings[0][0] === '\uFEFF') {
-        strings[0] = strings[0].substring(1)
-      }
-      response.body = strings.join('')
-    }
-
-    if (self._json) {
-      try {
-        response.body = JSON.parse(response.body, self._jsonReviver)
-      } catch (e) {
-        debug('invalid JSON received', self.uri.href)
-      }
-    }
-    debug('emitting complete', self.uri.href)
-    if (typeof response.body === 'undefined' && !self._json) {
-      response.body = self.encoding === null ? Buffer.alloc(0) : ''
-    }
-    self.emit('complete', response, response.body)
-  })
-}
-
-Request.prototype.abort = function () {
-  var self = this
-  self._aborted = true
-
-  if (self.req) {
-    self.req.abort()
-  } else if (self.response) {
-    self.response.destroy()
-  }
-
-  self.emit('abort')
-}
-
-Request.prototype.pipeDest = function (dest) {
-  var self = this
-  var response = self.response
-  // Called after the response is received
-  if (dest.headers && !dest.headersSent) {
-    if (response.caseless.has('content-type')) {
-      var ctname = response.caseless.has('content-type')
-      if (dest.setHeader) {
-        dest.setHeader(ctname, response.headers[ctname])
-      } else {
-        dest.headers[ctname] = response.headers[ctname]
-      }
-    }
-
-    if (response.caseless.has('content-length')) {
-      var clname = response.caseless.has('content-length')
-      if (dest.setHeader) {
-        dest.setHeader(clname, response.headers[clname])
-      } else {
-        dest.headers[clname] = response.headers[clname]
-      }
-    }
-  }
-  if (dest.setHeader && !dest.headersSent) {
-    for (var i in response.headers) {
-      // If the response content is being decoded, the Content-Encoding header
-      // of the response doesn't represent the piped content, so don't pass it.
-      if (!self.gzip || i !== 'content-encoding') {
-        dest.setHeader(i, response.headers[i])
-      }
-    }
-    dest.statusCode = response.statusCode
-  }
-  if (self.pipefilter) {
-    self.pipefilter(response, dest)
-  }
-}
-
-Request.prototype.qs = function (q, clobber) {
-  var self = this
-  var base
-  if (!clobber && self.uri.query) {
-    base = self._qs.parse(self.uri.query)
-  } else {
-    base = {}
-  }
-
-  for (var i in q) {
-    base[i] = q[i]
-  }
-
-  var qs = self._qs.stringify(base)
-
-  if (qs === '') {
-    return self
-  }
-
-  self.uri = url.parse(self.uri.href.split('?')[0] + '?' + qs)
-  self.url = self.uri
-  self.path = self.uri.path
-
-  if (self.uri.host === 'unix') {
-    self.enableUnixSocket()
-  }
-
-  return self
-}
-Request.prototype.form = function (form) {
-  var self = this
-  if (form) {
-    if (!/^application\/x-www-form-urlencoded\b/.test(self.getHeader('content-type'))) {
-      self.setHeader('content-type', 'application/x-www-form-urlencoded')
-    }
-    self.body = (typeof form === 'string')
-      ? self._qs.rfc3986(form.toString('utf8'))
-      : self._qs.stringify(form).toString('utf8')
-    return self
-  }
-  // create form-data object
-  self._form = new FormData()
-  self._form.on('error', function (err) {
-    err.message = 'form-data: ' + err.message
-    self.emit('error', err)
-    self.abort()
-  })
-  return self._form
-}
-Request.prototype.multipart = function (multipart) {
-  var self = this
-
-  self._multipart.onRequest(multipart)
-
-  if (!self._multipart.chunked) {
-    self.body = self._multipart.body
-  }
-
-  return self
-}
-Request.prototype.json = function (val) {
-  var self = this
-
-  if (!self.hasHeader('accept')) {
-    self.setHeader('accept', 'application/json')
-  }
-
-  if (typeof self.jsonReplacer === 'function') {
-    self._jsonReplacer = self.jsonReplacer
-  }
-
-  self._json = true
-  if (typeof val === 'boolean') {
-    if (self.body !== undefined) {
-      if (!/^application\/x-www-form-urlencoded\b/.test(self.getHeader('content-type'))) {
-        self.body = safeStringify(self.body, self._jsonReplacer)
-      } else {
-        self.body = self._qs.rfc3986(self.body)
-      }
-      if (!self.hasHeader('content-type')) {
-        self.setHeader('content-type', 'application/json')
-      }
-    }
-  } else {
-    self.body = safeStringify(val, self._jsonReplacer)
-    if (!self.hasHeader('content-type')) {
-      self.setHeader('content-type', 'application/json')
-    }
-  }
-
-  if (typeof self.jsonReviver === 'function') {
-    self._jsonReviver = self.jsonReviver
-  }
-
-  return self
-}
-Request.prototype.getHeader = function (name, headers) {
-  var self = this
-  var result, re, match
-  if (!headers) {
-    headers = self.headers
-  }
-  Object.keys(headers).forEach(function (key) {
-    if (key.length !== name.length) {
-      return
-    }
-    re = new RegExp(name, 'i')
-    match = key.match(re)
-    if (match) {
-      result = headers[key]
-    }
-  })
-  return result
-}
-Request.prototype.enableUnixSocket = function () {
-  // Get the socket & request paths from the URL
-  var unixParts = this.uri.path.split(':')
-  var host = unixParts[0]
-  var path = unixParts[1]
-  // Apply unix properties to request
-  this.socketPath = host
-  this.uri.pathname = path
-  this.uri.path = path
-  this.uri.host = host
-  this.uri.hostname = host
-  this.uri.isUnix = true
-}
-
-Request.prototype.auth = function (user, pass, sendImmediately, bearer) {
-  var self = this
-
-  self._auth.onRequest(user, pass, sendImmediately, bearer)
-
-  return self
-}
-Request.prototype.aws = function (opts, now) {
-  var self = this
-
-  if (!now) {
-    self._aws = opts
-    return self
-  }
-
-  if (opts.sign_version === 4 || opts.sign_version === '4') {
-    // use aws4
-    var options = {
-      host: self.uri.host,
-      path: self.uri.path,
-      method: self.method,
-      headers: {
-        'content-type': self.getHeader('content-type') || ''
-      },
-      body: self.body
-    }
-    var signRes = aws4.sign(options, {
-      accessKeyId: opts.key,
-      secretAccessKey: opts.secret,
-      sessionToken: opts.session
-    })
-    self.setHeader('authorization', signRes.headers.Authorization)
-    self.setHeader('x-amz-date', signRes.headers['X-Amz-Date'])
-    if (signRes.headers['X-Amz-Security-Token']) {
-      self.setHeader('x-amz-security-token', signRes.headers['X-Amz-Security-Token'])
-    }
-  } else {
-    // default: use aws-sign2
-    var date = new Date()
-    self.setHeader('date', date.toUTCString())
-    var auth = {
-      key: opts.key,
-      secret: opts.secret,
-      verb: self.method.toUpperCase(),
-      date: date,
-      contentType: self.getHeader('content-type') || '',
-      md5: self.getHeader('content-md5') || '',
-      amazonHeaders: aws2.canonicalizeHeaders(self.headers)
-    }
-    var path = self.uri.path
-    if (opts.bucket && path) {
-      auth.resource = '/' + opts.bucket + path
-    } else if (opts.bucket && !path) {
-      auth.resource = '/' + opts.bucket
-    } else if (!opts.bucket && path) {
-      auth.resource = path
-    } else if (!opts.bucket && !path) {
-      auth.resource = '/'
-    }
-    auth.resource = aws2.canonicalizeResource(auth.resource)
-    self.setHeader('authorization', aws2.authorization(auth))
-  }
-
-  return self
-}
-Request.prototype.httpSignature = function (opts) {
-  var self = this
-  httpSignature.signRequest({
-    getHeader: function (header) {
-      return self.getHeader(header, self.headers)
-    },
-    setHeader: function (header, value) {
-      self.setHeader(header, value)
-    },
-    method: self.method,
-    path: self.path
-  }, opts)
-  debug('httpSignature authorization', self.getHeader('authorization'))
-
-  return self
-}
-Request.prototype.hawk = function (opts) {
-  var self = this
-  self.setHeader('Authorization', hawk.header(self.uri, self.method, opts))
-}
-Request.prototype.oauth = function (_oauth) {
-  var self = this
-
-  self._oauth.onRequest(_oauth)
-
-  return self
-}
-
-Request.prototype.jar = function (jar) {
-  var self = this
-  var cookies
-
-  if (self._redirect.redirectsFollowed === 0) {
-    self.originalCookieHeader = self.getHeader('cookie')
-  }
-
-  if (!jar) {
-    // disable cookies
-    cookies = false
-    self._disableCookies = true
-  } else {
-    var targetCookieJar = (jar && jar.getCookieString) ? jar : globalCookieJar
-    var urihref = self.uri.href
-    // fetch cookie in the Specified host
-    if (targetCookieJar) {
-      cookies = targetCookieJar.getCookieString(urihref)
-    }
-  }
-
-  // if need cookie and cookie is not empty
-  if (cookies && cookies.length) {
-    if (self.originalCookieHeader) {
-      // Don't overwrite existing Cookie header
-      self.setHeader('cookie', self.originalCookieHeader + '; ' + cookies)
-    } else {
-      self.setHeader('cookie', cookies)
-    }
-  }
-  self._jar = jar
-  return self
-}
-
-// Stream API
-Request.prototype.pipe = function (dest, opts) {
-  var self = this
-
-  if (self.response) {
-    if (self._destdata) {
-      self.emit('error', new Error('You cannot pipe after data has been emitted from the response.'))
-    } else if (self._ended) {
-      self.emit('error', new Error('You cannot pipe after the response has been ended.'))
-    } else {
-      stream.Stream.prototype.pipe.call(self, dest, opts)
-      self.pipeDest(dest)
-      return dest
-    }
-  } else {
-    self.dests.push(dest)
-    stream.Stream.prototype.pipe.call(self, dest, opts)
-    return dest
-  }
-}
-Request.prototype.write = function () {
-  var self = this
-  if (self._aborted) { return }
-
-  if (!self._started) {
-    self.start()
-  }
-  if (self.req) {
-    return self.req.write.apply(self.req, arguments)
-  }
-}
-Request.prototype.end = function (chunk) {
-  var self = this
-  if (self._aborted) { return }
-
-  if (chunk) {
-    self.write(chunk)
-  }
-  if (!self._started) {
-    self.start()
-  }
-  if (self.req) {
-    self.req.end()
-  }
-}
-Request.prototype.pause = function () {
-  var self = this
-  if (!self.responseContent) {
-    self._paused = true
-  } else {
-    self.responseContent.pause.apply(self.responseContent, arguments)
-  }
-}
-Request.prototype.resume = function () {
-  var self = this
-  if (!self.responseContent) {
-    self._paused = false
-  } else {
-    self.responseContent.resume.apply(self.responseContent, arguments)
-  }
-}
-Request.prototype.destroy = function () {
-  var self = this
-  if (!self._ended) {
-    self.end()
-  } else if (self.response) {
-    self.response.destroy()
-  }
-}
-
-Request.defaultProxyHeaderWhiteList =
-  Tunnel.defaultProxyHeaderWhiteList.slice()
-
-Request.defaultProxyHeaderExclusiveList =
-  Tunnel.defaultProxyHeaderExclusiveList.slice()
-
-// Exports
-
-Request.prototype.toJSON = requestToJSON
-module.exports = Request
-
-
-/***/ }),
-/* 814 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var core = __webpack_require__(306);
-var async = __webpack_require__(815);
-async.core = core;
-async.isCore = function isCore(x) { return core[x]; };
-async.sync = __webpack_require__(817);
-
-exports = async;
-module.exports = async;
-
-
-/***/ }),
-/* 815 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var core = __webpack_require__(306);
-var fs = __webpack_require__(5);
-var path = __webpack_require__(0);
-var caller = __webpack_require__(417);
-var nodeModulesPaths = __webpack_require__(418);
-
-var defaultIsFile = function isFile(file, cb) {
-    fs.stat(file, function (err, stat) {
-        if (!err) {
-            return cb(null, stat.isFile() || stat.isFIFO());
-        }
-        if (err.code === 'ENOENT' || err.code === 'ENOTDIR') return cb(null, false);
-        return cb(err);
-    });
-};
-
-module.exports = function resolve(x, options, callback) {
-    var cb = callback;
-    var opts = options || {};
-    if (typeof opts === 'function') {
-        cb = opts;
-        opts = {};
-    }
-    if (typeof x !== 'string') {
-        var err = new TypeError('Path must be a string.');
-        return process.nextTick(function () {
-            cb(err);
-        });
-    }
-
-    var isFile = opts.isFile || defaultIsFile;
-    var readFile = opts.readFile || fs.readFile;
-
-    var extensions = opts.extensions || ['.js'];
-    var basedir = opts.basedir || path.dirname(caller());
-    var parent = opts.filename || basedir;
-
-    opts.paths = opts.paths || [];
-
-    if (/^(?:\.\.?(?:\/|$)|\/|([A-Za-z]:)?[/\\])/.test(x)) {
-        var res = path.resolve(basedir, x);
-        if (x === '..' || x.slice(-1) === '/') res += '/';
-        if (/\/$/.test(x) && res === basedir) {
-            loadAsDirectory(res, opts.package, onfile);
-        } else loadAsFile(res, opts.package, onfile);
-    } else loadNodeModules(x, basedir, function (err, n, pkg) {
-        if (err) cb(err);
-        else if (n) cb(null, n, pkg);
-        else if (core[x]) return cb(null, x);
-        else {
-            var moduleError = new Error("Cannot find module '" + x + "' from '" + parent + "'");
-            moduleError.code = 'MODULE_NOT_FOUND';
-            cb(moduleError);
-        }
-    });
-
-    function onfile(err, m, pkg) {
-        if (err) cb(err);
-        else if (m) cb(null, m, pkg);
-        else loadAsDirectory(res, function (err, d, pkg) {
-            if (err) cb(err);
-            else if (d) cb(null, d, pkg);
-            else {
-                var moduleError = new Error("Cannot find module '" + x + "' from '" + parent + "'");
-                moduleError.code = 'MODULE_NOT_FOUND';
-                cb(moduleError);
-            }
-        });
-    }
-
-    function loadAsFile(x, thePackage, callback) {
-        var loadAsFilePackage = thePackage;
-        var cb = callback;
-        if (typeof loadAsFilePackage === 'function') {
-            cb = loadAsFilePackage;
-            loadAsFilePackage = undefined;
-        }
-
-        var exts = [''].concat(extensions);
-        load(exts, x, loadAsFilePackage);
-
-        function load(exts, x, loadPackage) {
-            if (exts.length === 0) return cb(null, undefined, loadPackage);
-            var file = x + exts[0];
-
-            var pkg = loadPackage;
-            if (pkg) onpkg(null, pkg);
-            else loadpkg(path.dirname(file), onpkg);
-
-            function onpkg(err, pkg_, dir) {
-                pkg = pkg_;
-                if (err) return cb(err);
-                if (dir && pkg && opts.pathFilter) {
-                    var rfile = path.relative(dir, file);
-                    var rel = rfile.slice(0, rfile.length - exts[0].length);
-                    var r = opts.pathFilter(pkg, x, rel);
-                    if (r) return load(
-                        [''].concat(extensions.slice()),
-                        path.resolve(dir, r),
-                        pkg
-                    );
-                }
-                isFile(file, onex);
-            }
-            function onex(err, ex) {
-                if (err) return cb(err);
-                if (ex) return cb(null, file, pkg);
-                load(exts.slice(1), x, pkg);
-            }
-        }
-    }
-
-    function loadpkg(dir, cb) {
-        if (dir === '' || dir === '/') return cb(null);
-        if (process.platform === 'win32' && (/^\w:[/\\]*$/).test(dir)) {
-            return cb(null);
-        }
-        if (/[/\\]node_modules[/\\]*$/.test(dir)) return cb(null);
-
-        var pkgfile = path.join(dir, 'package.json');
-        isFile(pkgfile, function (err, ex) {
-            // on err, ex is false
-            if (!ex) return loadpkg(path.dirname(dir), cb);
-
-            readFile(pkgfile, function (err, body) {
-                if (err) cb(err);
-                try { var pkg = JSON.parse(body); } catch (jsonErr) {}
-
-                if (pkg && opts.packageFilter) {
-                    pkg = opts.packageFilter(pkg, pkgfile);
-                }
-                cb(null, pkg, dir);
-            });
-        });
-    }
-
-    function loadAsDirectory(x, loadAsDirectoryPackage, callback) {
-        var cb = callback;
-        var fpkg = loadAsDirectoryPackage;
-        if (typeof fpkg === 'function') {
-            cb = fpkg;
-            fpkg = opts.package;
-        }
-
-        var pkgfile = path.join(x, 'package.json');
-        isFile(pkgfile, function (err, ex) {
-            if (err) return cb(err);
-            if (!ex) return loadAsFile(path.join(x, 'index'), fpkg, cb);
-
-            readFile(pkgfile, function (err, body) {
-                if (err) return cb(err);
-                try {
-                    var pkg = JSON.parse(body);
-                } catch (jsonErr) {}
-
-                if (opts.packageFilter) {
-                    pkg = opts.packageFilter(pkg, pkgfile);
-                }
-
-                if (pkg.main) {
-                    if (pkg.main === '.' || pkg.main === './') {
-                        pkg.main = 'index';
-                    }
-                    loadAsFile(path.resolve(x, pkg.main), pkg, function (err, m, pkg) {
-                        if (err) return cb(err);
-                        if (m) return cb(null, m, pkg);
-                        if (!pkg) return loadAsFile(path.join(x, 'index'), pkg, cb);
-
-                        var dir = path.resolve(x, pkg.main);
-                        loadAsDirectory(dir, pkg, function (err, n, pkg) {
-                            if (err) return cb(err);
-                            if (n) return cb(null, n, pkg);
-                            loadAsFile(path.join(x, 'index'), pkg, cb);
-                        });
-                    });
-                    return;
-                }
-
-                loadAsFile(path.join(x, '/index'), pkg, cb);
-            });
-        });
-    }
-
-    function processDirs(cb, dirs) {
-        if (dirs.length === 0) return cb(null, undefined);
-        var dir = dirs[0];
-
-        var file = path.join(dir, x);
-        loadAsFile(file, opts.package, onfile);
-
-        function onfile(err, m, pkg) {
-            if (err) return cb(err);
-            if (m) return cb(null, m, pkg);
-            loadAsDirectory(path.join(dir, x), opts.package, ondir);
-        }
-
-        function ondir(err, n, pkg) {
-            if (err) return cb(err);
-            if (n) return cb(null, n, pkg);
-            processDirs(cb, dirs.slice(1));
-        }
-    }
-    function loadNodeModules(x, start, cb) {
-        processDirs(cb, nodeModulesPaths(start, opts));
-    }
-};
-
-
-/***/ }),
-/* 816 */
-/***/ (function(module, exports) {
-
-module.exports = {"assert":true,"async_hooks":">= 8","buffer_ieee754":"< 0.9.7","buffer":true,"child_process":true,"cluster":true,"console":true,"constants":true,"crypto":true,"_debugger":"< 8","dgram":true,"dns":true,"domain":true,"events":true,"freelist":"< 6","fs":true,"fs/promises":">= 10 && < 10.1","_http_agent":">= 0.11.1","_http_client":">= 0.11.1","_http_common":">= 0.11.1","_http_incoming":">= 0.11.1","_http_outgoing":">= 0.11.1","_http_server":">= 0.11.1","http":true,"http2":">= 8.8","https":true,"inspector":">= 8.0.0","_linklist":"< 8","module":true,"net":true,"node-inspect/lib/_inspect":">= 7.6.0","node-inspect/lib/internal/inspect_client":">= 7.6.0","node-inspect/lib/internal/inspect_repl":">= 7.6.0","os":true,"path":true,"perf_hooks":">= 8.5","process":">= 1","punycode":true,"querystring":true,"readline":true,"repl":true,"smalloc":">= 0.11.5 && < 3","_stream_duplex":">= 0.9.4","_stream_transform":">= 0.9.4","_stream_wrap":">= 1.4.1","_stream_passthrough":">= 0.9.4","_stream_readable":">= 0.9.4","_stream_writable":">= 0.9.4","stream":true,"string_decoder":true,"sys":true,"timers":true,"_tls_common":">= 0.11.13","_tls_legacy":">= 0.11.3 && < 10","_tls_wrap":">= 0.11.3","tls":true,"trace_events":">= 10","tty":true,"url":true,"util":true,"v8/tools/arguments":">= 10","v8/tools/codemap":[">= 4.4.0 && < 5",">= 5.2.0"],"v8/tools/consarray":[">= 4.4.0 && < 5",">= 5.2.0"],"v8/tools/csvparser":[">= 4.4.0 && < 5",">= 5.2.0"],"v8/tools/logreader":[">= 4.4.0 && < 5",">= 5.2.0"],"v8/tools/profile_view":[">= 4.4.0 && < 5",">= 5.2.0"],"v8/tools/splaytree":[">= 4.4.0 && < 5",">= 5.2.0"],"v8":">= 1","vm":true,"zlib":true}
-
-/***/ }),
-/* 817 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var core = __webpack_require__(306);
-var fs = __webpack_require__(5);
-var path = __webpack_require__(0);
-var caller = __webpack_require__(417);
-var nodeModulesPaths = __webpack_require__(418);
-
-var defaultIsFile = function isFile(file) {
-    try {
-        var stat = fs.statSync(file);
-    } catch (e) {
-        if (e && (e.code === 'ENOENT' || e.code === 'ENOTDIR')) return false;
-        throw e;
-    }
-    return stat.isFile() || stat.isFIFO();
-};
-
-module.exports = function (x, options) {
-    if (typeof x !== 'string') {
-        throw new TypeError('Path must be a string.');
-    }
-    var opts = options || {};
-    var isFile = opts.isFile || defaultIsFile;
-    var readFileSync = opts.readFileSync || fs.readFileSync;
-
-    var extensions = opts.extensions || ['.js'];
-    var basedir = opts.basedir || path.dirname(caller());
-    var parent = opts.filename || basedir;
-
-    opts.paths = opts.paths || [];
-
-    if (/^(?:\.\.?(?:\/|$)|\/|([A-Za-z]:)?[/\\])/.test(x)) {
-        var res = path.resolve(basedir, x);
-        if (x === '..' || x.slice(-1) === '/') res += '/';
-        var m = loadAsFileSync(res) || loadAsDirectorySync(res);
-        if (m) return m;
-    } else {
-        var n = loadNodeModulesSync(x, basedir);
-        if (n) return n;
-    }
-
-    if (core[x]) return x;
-
-    var err = new Error("Cannot find module '" + x + "' from '" + parent + "'");
-    err.code = 'MODULE_NOT_FOUND';
-    throw err;
-
-    function loadAsFileSync(x) {
-        var pkg = loadpkg(path.dirname(x));
-
-        if (pkg && pkg.dir && pkg.pkg && opts.pathFilter) {
-            var rfile = path.relative(pkg.dir, x);
-            var r = opts.pathFilter(pkg.pkg, x, rfile);
-            if (r) {
-                x = path.resolve(pkg.dir, r); // eslint-disable-line no-param-reassign
-            }
-        }
-
-        if (isFile(x)) {
-            return x;
-        }
-
-        for (var i = 0; i < extensions.length; i++) {
-            var file = x + extensions[i];
-            if (isFile(file)) {
-                return file;
-            }
-        }
-    }
-
-    function loadpkg(dir) {
-        if (dir === '' || dir === '/') return;
-        if (process.platform === 'win32' && (/^\w:[/\\]*$/).test(dir)) {
-            return;
-        }
-        if (/[/\\]node_modules[/\\]*$/.test(dir)) return;
-
-        var pkgfile = path.join(dir, 'package.json');
-
-        if (!isFile(pkgfile)) {
-            return loadpkg(path.dirname(dir));
-        }
-
-        var body = readFileSync(pkgfile);
-
-        try {
-            var pkg = JSON.parse(body);
-        } catch (jsonErr) {}
-
-        if (pkg && opts.packageFilter) {
-            pkg = opts.packageFilter(pkg, dir);
-        }
-
-        return { pkg: pkg, dir: dir };
-    }
-
-    function loadAsDirectorySync(x) {
-        var pkgfile = path.join(x, '/package.json');
-        if (isFile(pkgfile)) {
-            try {
-                var body = readFileSync(pkgfile, 'UTF8');
-                var pkg = JSON.parse(body);
-
-                if (opts.packageFilter) {
-                    pkg = opts.packageFilter(pkg, x);
-                }
-
-                if (pkg.main) {
-                    if (pkg.main === '.' || pkg.main === './') {
-                        pkg.main = 'index';
-                    }
-                    var m = loadAsFileSync(path.resolve(x, pkg.main));
-                    if (m) return m;
-                    var n = loadAsDirectorySync(path.resolve(x, pkg.main));
-                    if (n) return n;
-                }
-            } catch (e) {}
-        }
-
-        return loadAsFileSync(path.join(x, '/index'));
-    }
-
-    function loadNodeModulesSync(x, start) {
-        var dirs = nodeModulesPaths(start, opts);
-        for (var i = 0; i < dirs.length; i++) {
-            var dir = dirs[i];
-            var m = loadAsFileSync(path.join(dir, '/', x));
-            if (m) return m;
-            var n = loadAsDirectorySync(path.join(dir, '/', x));
-            if (n) return n;
-        }
-    }
-};
-
-
-/***/ }),
-/* 818 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const onetime = __webpack_require__(771);
-const signalExit = __webpack_require__(451);
-
-module.exports = onetime(() => {
-	signalExit(() => {
-		process.stderr.write('\u001b[?25h');
-	}, {alwaysLast: true});
-});
-
-
-/***/ }),
-/* 819 */
-/***/ (function(module, exports, __webpack_require__) {
-
-module.exports = __webpack_require__(820);
-
-/***/ }),
-/* 820 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var RetryOperation = __webpack_require__(821);
-
-exports.operation = function(options) {
-  var timeouts = exports.timeouts(options);
-  return new RetryOperation(timeouts, {
-      forever: options && options.forever,
-      unref: options && options.unref
-  });
-};
-
-exports.timeouts = function(options) {
-  if (options instanceof Array) {
-    return [].concat(options);
-  }
-
-  var opts = {
-    retries: 10,
-    factor: 2,
-    minTimeout: 1 * 1000,
-    maxTimeout: Infinity,
-    randomize: false
-  };
-  for (var key in options) {
-    opts[key] = options[key];
-  }
-
-  if (opts.minTimeout > opts.maxTimeout) {
-    throw new Error('minTimeout is greater than maxTimeout');
-  }
-
-  var timeouts = [];
-  for (var i = 0; i < opts.retries; i++) {
-    timeouts.push(this.createTimeout(i, opts));
-  }
-
-  if (options && options.forever && !timeouts.length) {
-    timeouts.push(this.createTimeout(i, opts));
-  }
-
-  // sort the array numerically ascending
-  timeouts.sort(function(a,b) {
-    return a - b;
-  });
-
-  return timeouts;
-};
-
-exports.createTimeout = function(attempt, opts) {
-  var random = (opts.randomize)
-    ? (Math.random() + 1)
-    : 1;
-
-  var timeout = Math.round(random * opts.minTimeout * Math.pow(opts.factor, attempt));
-  timeout = Math.min(timeout, opts.maxTimeout);
-
-  return timeout;
-};
-
-exports.wrap = function(obj, options, methods) {
-  if (options instanceof Array) {
-    methods = options;
-    options = null;
-  }
-
-  if (!methods) {
-    methods = [];
-    for (var key in obj) {
-      if (typeof obj[key] === 'function') {
-        methods.push(key);
-      }
-    }
-  }
-
-  for (var i = 0; i < methods.length; i++) {
-    var method   = methods[i];
-    var original = obj[method];
-
-    obj[method] = function retryWrapper() {
-      var op       = exports.operation(options);
-      var args     = Array.prototype.slice.call(arguments);
-      var callback = args.pop();
-
-      args.push(function(err) {
-        if (op.retry(err)) {
-          return;
-        }
-        if (err) {
-          arguments[0] = op.mainError();
-        }
-        callback.apply(this, arguments);
-      });
-
-      op.attempt(function() {
-        original.apply(obj, args);
-      });
-    };
-    obj[method].options = options;
-  }
-};
-
-
-/***/ }),
-/* 821 */
-/***/ (function(module, exports) {
-
-function RetryOperation(timeouts, options) {
-  // Compatibility for the old (timeouts, retryForever) signature
-  if (typeof options === 'boolean') {
-    options = { forever: options };
-  }
-
-  this._timeouts = timeouts;
-  this._options = options || {};
-  this._fn = null;
-  this._errors = [];
-  this._attempts = 1;
-  this._operationTimeout = null;
-  this._operationTimeoutCb = null;
-  this._timeout = null;
-
-  if (this._options.forever) {
-    this._cachedTimeouts = this._timeouts.slice(0);
-  }
-}
-module.exports = RetryOperation;
-
-RetryOperation.prototype.stop = function() {
-  if (this._timeout) {
-    clearTimeout(this._timeout);
-  }
-
-  this._timeouts       = [];
-  this._cachedTimeouts = null;
-};
-
-RetryOperation.prototype.retry = function(err) {
-  if (this._timeout) {
-    clearTimeout(this._timeout);
-  }
-
-  if (!err) {
-    return false;
-  }
-
-  this._errors.push(err);
-
-  var timeout = this._timeouts.shift();
-  if (timeout === undefined) {
-    if (this._cachedTimeouts) {
-      // retry forever, only keep last error
-      this._errors.splice(this._errors.length - 1, this._errors.length);
-      this._timeouts = this._cachedTimeouts.slice(0);
-      timeout = this._timeouts.shift();
-    } else {
-      return false;
-    }
-  }
-
-  var self = this;
-  var timer = setTimeout(function() {
-    self._attempts++;
-
-    if (self._operationTimeoutCb) {
-      self._timeout = setTimeout(function() {
-        self._operationTimeoutCb(self._attempts);
-      }, self._operationTimeout);
-
-      if (this._options.unref) {
-          self._timeout.unref();
-      }
-    }
-
-    self._fn(self._attempts);
-  }, timeout);
-
-  if (this._options.unref) {
-      timer.unref();
-  }
-
-  return true;
-};
-
-RetryOperation.prototype.attempt = function(fn, timeoutOps) {
-  this._fn = fn;
-
-  if (timeoutOps) {
-    if (timeoutOps.timeout) {
-      this._operationTimeout = timeoutOps.timeout;
-    }
-    if (timeoutOps.cb) {
-      this._operationTimeoutCb = timeoutOps.cb;
-    }
-  }
-
-  var self = this;
-  if (this._operationTimeoutCb) {
-    this._timeout = setTimeout(function() {
-      self._operationTimeoutCb();
-    }, self._operationTimeout);
-  }
-
-  this._fn(this._attempts);
-};
-
-RetryOperation.prototype.try = function(fn) {
-  console.log('Using RetryOperation.try() is deprecated');
-  this.attempt(fn);
-};
-
-RetryOperation.prototype.start = function(fn) {
-  console.log('Using RetryOperation.start() is deprecated');
-  this.attempt(fn);
-};
-
-RetryOperation.prototype.start = RetryOperation.prototype.try;
-
-RetryOperation.prototype.errors = function() {
-  return this._errors;
-};
-
-RetryOperation.prototype.attempts = function() {
-  return this._attempts;
-};
-
-RetryOperation.prototype.mainError = function() {
-  if (this._errors.length === 0) {
-    return null;
-  }
-
-  var counts = {};
-  var mainError = null;
-  var mainErrorCount = 0;
-
-  for (var i = 0; i < this._errors.length; i++) {
-    var error = this._errors[i];
-    var message = error.message;
-    var count = (counts[message] || 0) + 1;
-
-    counts[message] = count;
-
-    if (count >= mainErrorCount) {
-      mainError = error;
-      mainErrorCount = count;
-    }
-  }
-
-  return mainError;
-};
-
-
-/***/ }),
-/* 822 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return SubscribeOnObservable; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__scheduler_asap__ = __webpack_require__(438);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_isNumeric__ = __webpack_require__(190);
-/** PURE_IMPORTS_START tslib,_Observable,_scheduler_asap,_util_isNumeric PURE_IMPORTS_END */
-
-
-
-
-var SubscribeOnObservable = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SubscribeOnObservable, _super);
-    function SubscribeOnObservable(source, delayTime, scheduler) {
-        if (delayTime === void 0) {
-            delayTime = 0;
-        }
-        if (scheduler === void 0) {
-            scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_asap__["a" /* asap */];
-        }
-        var _this = _super.call(this) || this;
-        _this.source = source;
-        _this.delayTime = delayTime;
-        _this.scheduler = scheduler;
-        if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_isNumeric__["a" /* isNumeric */])(delayTime) || delayTime < 0) {
-            _this.delayTime = 0;
-        }
-        if (!scheduler || typeof scheduler.schedule !== 'function') {
-            _this.scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_asap__["a" /* asap */];
-        }
-        return _this;
-    }
-    SubscribeOnObservable.create = function (source, delay, scheduler) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (scheduler === void 0) {
-            scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_asap__["a" /* asap */];
-        }
-        return new SubscribeOnObservable(source, delay, scheduler);
-    };
-    SubscribeOnObservable.dispatch = function (arg) {
-        var source = arg.source, subscriber = arg.subscriber;
-        return this.add(source.subscribe(subscriber));
-    };
-    SubscribeOnObservable.prototype._subscribe = function (subscriber) {
-        var delay = this.delayTime;
-        var source = this.source;
-        var scheduler = this.scheduler;
-        return scheduler.schedule(SubscribeOnObservable.dispatch, delay, {
-            source: source, subscriber: subscriber
-        });
-    };
-    return SubscribeOnObservable;
-}(__WEBPACK_IMPORTED_MODULE_1__Observable__["a" /* Observable */]));
-
-//# sourceMappingURL=SubscribeOnObservable.js.map
-
-
-/***/ }),
-/* 823 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = bindCallback;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncSubject__ = __webpack_require__(183);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__operators_map__ = __webpack_require__(47);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_canReportError__ = __webpack_require__(322);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START _Observable,_AsyncSubject,_operators_map,_util_canReportError,_util_isArray,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-
-
-
-function bindCallback(callbackFunc, resultSelector, scheduler) {
-    if (resultSelector) {
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_isScheduler__["a" /* isScheduler */])(resultSelector)) {
-            scheduler = resultSelector;
-        }
-        else {
-            return function () {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                return bindCallback(callbackFunc, scheduler).apply(void 0, args).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__operators_map__["a" /* map */])(function (args) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isArray__["a" /* isArray */])(args) ? resultSelector.apply(void 0, args) : resultSelector(args); }));
-            };
-        }
-    }
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var context = this;
-        var subject;
-        var params = {
-            context: context,
-            subject: subject,
-            callbackFunc: callbackFunc,
-            scheduler: scheduler,
-        };
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            if (!scheduler) {
-                if (!subject) {
-                    subject = new __WEBPACK_IMPORTED_MODULE_1__AsyncSubject__["a" /* AsyncSubject */]();
-                    var handler = function () {
-                        var innerArgs = [];
-                        for (var _i = 0; _i < arguments.length; _i++) {
-                            innerArgs[_i] = arguments[_i];
-                        }
-                        subject.next(innerArgs.length <= 1 ? innerArgs[0] : innerArgs);
-                        subject.complete();
-                    };
-                    try {
-                        callbackFunc.apply(context, args.concat([handler]));
-                    }
-                    catch (err) {
-                        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_canReportError__["a" /* canReportError */])(subject)) {
-                            subject.error(err);
-                        }
-                        else {
-                            console.warn(err);
-                        }
-                    }
-                }
-                return subject.subscribe(subscriber);
-            }
-            else {
-                var state = {
-                    args: args, subscriber: subscriber, params: params,
-                };
-                return scheduler.schedule(dispatch, 0, state);
-            }
-        });
-    };
-}
-function dispatch(state) {
-    var _this = this;
-    var self = this;
-    var args = state.args, subscriber = state.subscriber, params = state.params;
-    var callbackFunc = params.callbackFunc, context = params.context, scheduler = params.scheduler;
-    var subject = params.subject;
-    if (!subject) {
-        subject = params.subject = new __WEBPACK_IMPORTED_MODULE_1__AsyncSubject__["a" /* AsyncSubject */]();
-        var handler = function () {
-            var innerArgs = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                innerArgs[_i] = arguments[_i];
-            }
-            var value = innerArgs.length <= 1 ? innerArgs[0] : innerArgs;
-            _this.add(scheduler.schedule(dispatchNext, 0, { value: value, subject: subject }));
-        };
-        try {
-            callbackFunc.apply(context, args.concat([handler]));
-        }
-        catch (err) {
-            subject.error(err);
-        }
-    }
-    this.add(subject.subscribe(subscriber));
-}
-function dispatchNext(state) {
-    var value = state.value, subject = state.subject;
-    subject.next(value);
-    subject.complete();
-}
-function dispatchError(state) {
-    var err = state.err, subject = state.subject;
-    subject.error(err);
-}
-//# sourceMappingURL=bindCallback.js.map
-
-
-/***/ }),
-/* 824 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = bindNodeCallback;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncSubject__ = __webpack_require__(183);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__operators_map__ = __webpack_require__(47);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_canReportError__ = __webpack_require__(322);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_isScheduler__ = __webpack_require__(49);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_isArray__ = __webpack_require__(41);
-/** PURE_IMPORTS_START _Observable,_AsyncSubject,_operators_map,_util_canReportError,_util_isScheduler,_util_isArray PURE_IMPORTS_END */
-
-
-
-
-
-
-function bindNodeCallback(callbackFunc, resultSelector, scheduler) {
-    if (resultSelector) {
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isScheduler__["a" /* isScheduler */])(resultSelector)) {
-            scheduler = resultSelector;
-        }
-        else {
-            return function () {
-                var args = [];
-                for (var _i = 0; _i < arguments.length; _i++) {
-                    args[_i] = arguments[_i];
-                }
-                return bindNodeCallback(callbackFunc, scheduler).apply(void 0, args).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__operators_map__["a" /* map */])(function (args) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_isArray__["a" /* isArray */])(args) ? resultSelector.apply(void 0, args) : resultSelector(args); }));
-            };
-        }
-    }
-    return function () {
-        var args = [];
-        for (var _i = 0; _i < arguments.length; _i++) {
-            args[_i] = arguments[_i];
-        }
-        var params = {
-            subject: undefined,
-            args: args,
-            callbackFunc: callbackFunc,
-            scheduler: scheduler,
-            context: this,
-        };
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var context = params.context;
-            var subject = params.subject;
-            if (!scheduler) {
-                if (!subject) {
-                    subject = params.subject = new __WEBPACK_IMPORTED_MODULE_1__AsyncSubject__["a" /* AsyncSubject */]();
-                    var handler = function () {
-                        var innerArgs = [];
-                        for (var _i = 0; _i < arguments.length; _i++) {
-                            innerArgs[_i] = arguments[_i];
-                        }
-                        var err = innerArgs.shift();
-                        if (err) {
-                            subject.error(err);
-                            return;
-                        }
-                        subject.next(innerArgs.length <= 1 ? innerArgs[0] : innerArgs);
-                        subject.complete();
-                    };
-                    try {
-                        callbackFunc.apply(context, args.concat([handler]));
-                    }
-                    catch (err) {
-                        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_canReportError__["a" /* canReportError */])(subject)) {
-                            subject.error(err);
-                        }
-                        else {
-                            console.warn(err);
-                        }
-                    }
-                }
-                return subject.subscribe(subscriber);
-            }
-            else {
-                return scheduler.schedule(dispatch, 0, { params: params, subscriber: subscriber, context: context });
-            }
-        });
-    };
-}
-function dispatch(state) {
-    var _this = this;
-    var params = state.params, subscriber = state.subscriber, context = state.context;
-    var callbackFunc = params.callbackFunc, args = params.args, scheduler = params.scheduler;
-    var subject = params.subject;
-    if (!subject) {
-        subject = params.subject = new __WEBPACK_IMPORTED_MODULE_1__AsyncSubject__["a" /* AsyncSubject */]();
-        var handler = function () {
-            var innerArgs = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                innerArgs[_i] = arguments[_i];
-            }
-            var err = innerArgs.shift();
-            if (err) {
-                _this.add(scheduler.schedule(dispatchError, 0, { err: err, subject: subject }));
-            }
-            else {
-                var value = innerArgs.length <= 1 ? innerArgs[0] : innerArgs;
-                _this.add(scheduler.schedule(dispatchNext, 0, { value: value, subject: subject }));
-            }
-        };
-        try {
-            callbackFunc.apply(context, args.concat([handler]));
-        }
-        catch (err) {
-            this.add(scheduler.schedule(dispatchError, 0, { err: err, subject: subject }));
-        }
-    }
-    this.add(subject.subscribe(subscriber));
-}
-function dispatchNext(arg) {
-    var value = arg.value, subject = arg.subject;
-    subject.next(value);
-    subject.complete();
-}
-function dispatchError(arg) {
-    var err = arg.err, subject = arg.subject;
-    subject.error(err);
-}
-//# sourceMappingURL=bindNodeCallback.js.map
-
-
-/***/ }),
-/* 825 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = forkJoin;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__empty__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__operators_map__ = __webpack_require__(47);
-/** PURE_IMPORTS_START tslib,_Observable,_util_isArray,_empty,_util_subscribeToResult,_OuterSubscriber,_operators_map PURE_IMPORTS_END */
-
-
-
-
-
-
-
-function forkJoin() {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
-    var resultSelector;
-    if (typeof sources[sources.length - 1] === 'function') {
-        resultSelector = sources.pop();
-    }
-    if (sources.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArray__["a" /* isArray */])(sources[0])) {
-        sources = sources[0];
-    }
-    if (sources.length === 0) {
-        return __WEBPACK_IMPORTED_MODULE_3__empty__["b" /* EMPTY */];
-    }
-    if (resultSelector) {
-        return forkJoin(sources).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__operators_map__["a" /* map */])(function (args) { return resultSelector.apply(void 0, args); }));
-    }
-    return new __WEBPACK_IMPORTED_MODULE_1__Observable__["a" /* Observable */](function (subscriber) {
-        return new ForkJoinSubscriber(subscriber, sources);
-    });
-}
-var ForkJoinSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ForkJoinSubscriber, _super);
-    function ForkJoinSubscriber(destination, sources) {
-        var _this = _super.call(this, destination) || this;
-        _this.sources = sources;
-        _this.completed = 0;
-        _this.haveValues = 0;
-        var len = sources.length;
-        _this.values = new Array(len);
-        for (var i = 0; i < len; i++) {
-            var source = sources[i];
-            var innerSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(_this, source, null, i);
-            if (innerSubscription) {
-                _this.add(innerSubscription);
-            }
-        }
-        return _this;
-    }
-    ForkJoinSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.values[outerIndex] = innerValue;
-        if (!innerSub._hasValue) {
-            innerSub._hasValue = true;
-            this.haveValues++;
-        }
-    };
-    ForkJoinSubscriber.prototype.notifyComplete = function (innerSub) {
-        var _a = this, destination = _a.destination, haveValues = _a.haveValues, values = _a.values;
-        var len = values.length;
-        if (!innerSub._hasValue) {
-            destination.complete();
-            return;
-        }
-        this.completed++;
-        if (this.completed !== len) {
-            return;
-        }
-        if (haveValues === len) {
-            destination.next(values);
-        }
-        destination.complete();
-    };
-    return ForkJoinSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_5__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=forkJoin.js.map
-
-
-/***/ }),
-/* 826 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = fromEvent;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isFunction__ = __webpack_require__(154);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__operators_map__ = __webpack_require__(47);
-/** PURE_IMPORTS_START _Observable,_util_isArray,_util_isFunction,_operators_map PURE_IMPORTS_END */
-
-
-
-
-var toString = Object.prototype.toString;
-function fromEvent(target, eventName, options, resultSelector) {
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isFunction__["a" /* isFunction */])(options)) {
-        resultSelector = options;
-        options = undefined;
-    }
-    if (resultSelector) {
-        return fromEvent(target, eventName, options).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__operators_map__["a" /* map */])(function (args) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isArray__["a" /* isArray */])(args) ? resultSelector.apply(void 0, args) : resultSelector(args); }));
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        function handler(e) {
-            if (arguments.length > 1) {
-                subscriber.next(Array.prototype.slice.call(arguments));
-            }
-            else {
-                subscriber.next(e);
-            }
-        }
-        setupSubscription(target, eventName, handler, subscriber, options);
-    });
-}
-function setupSubscription(sourceObj, eventName, handler, subscriber, options) {
-    var unsubscribe;
-    if (isEventTarget(sourceObj)) {
-        var source_1 = sourceObj;
-        sourceObj.addEventListener(eventName, handler, options);
-        unsubscribe = function () { return source_1.removeEventListener(eventName, handler, options); };
-    }
-    else if (isJQueryStyleEventEmitter(sourceObj)) {
-        var source_2 = sourceObj;
-        sourceObj.on(eventName, handler);
-        unsubscribe = function () { return source_2.off(eventName, handler); };
-    }
-    else if (isNodeStyleEventEmitter(sourceObj)) {
-        var source_3 = sourceObj;
-        sourceObj.addListener(eventName, handler);
-        unsubscribe = function () { return source_3.removeListener(eventName, handler); };
-    }
-    else if (sourceObj && sourceObj.length) {
-        for (var i = 0, len = sourceObj.length; i < len; i++) {
-            setupSubscription(sourceObj[i], eventName, handler, subscriber, options);
-        }
-    }
-    else {
-        throw new TypeError('Invalid event target');
-    }
-    subscriber.add(unsubscribe);
-}
-function isNodeStyleEventEmitter(sourceObj) {
-    return sourceObj && typeof sourceObj.addListener === 'function' && typeof sourceObj.removeListener === 'function';
-}
-function isJQueryStyleEventEmitter(sourceObj) {
-    return sourceObj && typeof sourceObj.on === 'function' && typeof sourceObj.off === 'function';
-}
-function isEventTarget(sourceObj) {
-    return sourceObj && typeof sourceObj.addEventListener === 'function' && typeof sourceObj.removeEventListener === 'function';
-}
-//# sourceMappingURL=fromEvent.js.map
-
-
-/***/ }),
-/* 827 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = fromEventPattern;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isFunction__ = __webpack_require__(154);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__operators_map__ = __webpack_require__(47);
-/** PURE_IMPORTS_START _Observable,_util_isArray,_util_isFunction,_operators_map PURE_IMPORTS_END */
-
-
-
-
-function fromEventPattern(addHandler, removeHandler, resultSelector) {
-    if (resultSelector) {
-        return fromEventPattern(addHandler, removeHandler).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__operators_map__["a" /* map */])(function (args) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_isArray__["a" /* isArray */])(args) ? resultSelector.apply(void 0, args) : resultSelector(args); }));
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var handler = function () {
-            var e = [];
-            for (var _i = 0; _i < arguments.length; _i++) {
-                e[_i] = arguments[_i];
-            }
-            return subscriber.next(e.length === 1 ? e[0] : e);
-        };
-        var retValue;
-        try {
-            retValue = addHandler(handler);
-        }
-        catch (err) {
-            subscriber.error(err);
-            return undefined;
-        }
-        if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isFunction__["a" /* isFunction */])(removeHandler)) {
-            return undefined;
-        }
-        return function () { return removeHandler(handler, retValue); };
-    });
-}
-//# sourceMappingURL=fromEventPattern.js.map
-
-
-/***/ }),
-/* 828 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = fromIterable;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__symbol_iterator__ = __webpack_require__(151);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToIterable__ = __webpack_require__(448);
-/** PURE_IMPORTS_START _Observable,_Subscription,_symbol_iterator,_util_subscribeToIterable PURE_IMPORTS_END */
-
-
-
-
-function fromIterable(input, scheduler) {
-    if (!input) {
-        throw new Error('Iterable cannot be null');
-    }
-    if (!scheduler) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToIterable__["a" /* subscribeToIterable */])(input));
-    }
-    else {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var sub = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-            var iterator;
-            sub.add(function () {
-                if (iterator && typeof iterator.return === 'function') {
-                    iterator.return();
-                }
-            });
-            sub.add(scheduler.schedule(function () {
-                iterator = input[__WEBPACK_IMPORTED_MODULE_2__symbol_iterator__["a" /* iterator */]]();
-                sub.add(scheduler.schedule(function () {
-                    if (subscriber.closed) {
-                        return;
-                    }
-                    var value;
-                    var done;
-                    try {
-                        var result = iterator.next();
-                        value = result.value;
-                        done = result.done;
-                    }
-                    catch (err) {
-                        subscriber.error(err);
-                        return;
-                    }
-                    if (done) {
-                        subscriber.complete();
-                    }
-                    else {
-                        subscriber.next(value);
-                        this.schedule();
-                    }
-                }));
-            }));
-            return sub;
-        });
-    }
-}
-//# sourceMappingURL=fromIterable.js.map
-
-
-/***/ }),
-/* 829 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = fromObservable;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__symbol_observable__ = __webpack_require__(117);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToObservable__ = __webpack_require__(449);
-/** PURE_IMPORTS_START _Observable,_Subscription,_symbol_observable,_util_subscribeToObservable PURE_IMPORTS_END */
-
-
-
-
-function fromObservable(input, scheduler) {
-    if (!scheduler) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToObservable__["a" /* subscribeToObservable */])(input));
-    }
-    else {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var sub = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-            sub.add(scheduler.schedule(function () {
-                var observable = input[__WEBPACK_IMPORTED_MODULE_2__symbol_observable__["a" /* observable */]]();
-                sub.add(observable.subscribe({
-                    next: function (value) { sub.add(scheduler.schedule(function () { return subscriber.next(value); })); },
-                    error: function (err) { sub.add(scheduler.schedule(function () { return subscriber.error(err); })); },
-                    complete: function () { sub.add(scheduler.schedule(function () { return subscriber.complete(); })); },
-                }));
-            }));
-            return sub;
-        });
-    }
-}
-//# sourceMappingURL=fromObservable.js.map
-
-
-/***/ }),
-/* 830 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = fromPromise;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToPromise__ = __webpack_require__(450);
-/** PURE_IMPORTS_START _Observable,_Subscription,_util_subscribeToPromise PURE_IMPORTS_END */
-
-
-
-function fromPromise(input, scheduler) {
-    if (!scheduler) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToPromise__["a" /* subscribeToPromise */])(input));
-    }
-    else {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var sub = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-            sub.add(scheduler.schedule(function () {
-                return input.then(function (value) {
-                    sub.add(scheduler.schedule(function () {
-                        subscriber.next(value);
-                        sub.add(scheduler.schedule(function () { return subscriber.complete(); }));
-                    }));
-                }, function (err) {
-                    sub.add(scheduler.schedule(function () { return subscriber.error(err); }));
-                });
-            }));
-            return sub;
-        });
-    }
-}
-//# sourceMappingURL=fromPromise.js.map
-
-
-/***/ }),
-/* 831 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = generate;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_identity__ = __webpack_require__(118);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START _Observable,_util_identity,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-function generate(initialStateOrOptions, condition, iterate, resultSelectorOrObservable, scheduler) {
-    var resultSelector;
-    var initialState;
-    if (arguments.length == 1) {
-        var options = initialStateOrOptions;
-        initialState = options.initialState;
-        condition = options.condition;
-        iterate = options.iterate;
-        resultSelector = options.resultSelector || __WEBPACK_IMPORTED_MODULE_1__util_identity__["a" /* identity */];
-        scheduler = options.scheduler;
-    }
-    else if (resultSelectorOrObservable === undefined || __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isScheduler__["a" /* isScheduler */])(resultSelectorOrObservable)) {
-        initialState = initialStateOrOptions;
-        resultSelector = __WEBPACK_IMPORTED_MODULE_1__util_identity__["a" /* identity */];
-        scheduler = resultSelectorOrObservable;
-    }
-    else {
-        initialState = initialStateOrOptions;
-        resultSelector = resultSelectorOrObservable;
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var state = initialState;
-        if (scheduler) {
-            return scheduler.schedule(dispatch, 0, {
-                subscriber: subscriber,
-                iterate: iterate,
-                condition: condition,
-                resultSelector: resultSelector,
-                state: state
-            });
-        }
-        do {
-            if (condition) {
-                var conditionResult = void 0;
-                try {
-                    conditionResult = condition(state);
-                }
-                catch (err) {
-                    subscriber.error(err);
-                    return undefined;
-                }
-                if (!conditionResult) {
-                    subscriber.complete();
-                    break;
-                }
-            }
-            var value = void 0;
-            try {
-                value = resultSelector(state);
-            }
-            catch (err) {
-                subscriber.error(err);
-                return undefined;
-            }
-            subscriber.next(value);
-            if (subscriber.closed) {
-                break;
-            }
-            try {
-                state = iterate(state);
-            }
-            catch (err) {
-                subscriber.error(err);
-                return undefined;
-            }
-        } while (true);
-        return undefined;
-    });
-}
-function dispatch(state) {
-    var subscriber = state.subscriber, condition = state.condition;
-    if (subscriber.closed) {
-        return undefined;
-    }
-    if (state.needIterate) {
-        try {
-            state.state = state.iterate(state.state);
-        }
-        catch (err) {
-            subscriber.error(err);
-            return undefined;
-        }
-    }
-    else {
-        state.needIterate = true;
-    }
-    if (condition) {
-        var conditionResult = void 0;
-        try {
-            conditionResult = condition(state.state);
-        }
-        catch (err) {
-            subscriber.error(err);
-            return undefined;
-        }
-        if (!conditionResult) {
-            subscriber.complete();
-            return undefined;
-        }
-        if (subscriber.closed) {
-            return undefined;
-        }
-    }
-    var value;
-    try {
-        value = state.resultSelector(state.state);
-    }
-    catch (err) {
-        subscriber.error(err);
-        return undefined;
-    }
-    if (subscriber.closed) {
-        return undefined;
-    }
-    subscriber.next(value);
-    if (subscriber.closed) {
-        return undefined;
-    }
-    return this.schedule(state);
-}
-//# sourceMappingURL=generate.js.map
-
-
-/***/ }),
-/* 832 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = iif;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__defer__ = __webpack_require__(310);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START _defer,_empty PURE_IMPORTS_END */
-
-
-function iif(condition, trueResult, falseResult) {
-    if (trueResult === void 0) {
-        trueResult = __WEBPACK_IMPORTED_MODULE_1__empty__["b" /* EMPTY */];
-    }
-    if (falseResult === void 0) {
-        falseResult = __WEBPACK_IMPORTED_MODULE_1__empty__["b" /* EMPTY */];
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__defer__["a" /* defer */])(function () { return condition() ? trueResult : falseResult; });
-}
-//# sourceMappingURL=iif.js.map
-
-
-/***/ }),
-/* 833 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = interval;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isNumeric__ = __webpack_require__(190);
-/** PURE_IMPORTS_START _Observable,_scheduler_async,_util_isNumeric PURE_IMPORTS_END */
-
-
-
-function interval(period, scheduler) {
-    if (period === void 0) {
-        period = 0;
-    }
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_1__scheduler_async__["a" /* async */];
-    }
-    if (!__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isNumeric__["a" /* isNumeric */])(period) || period < 0) {
-        period = 0;
-    }
-    if (!scheduler || typeof scheduler.schedule !== 'function') {
-        scheduler = __WEBPACK_IMPORTED_MODULE_1__scheduler_async__["a" /* async */];
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        subscriber.add(scheduler.schedule(dispatch, period, { subscriber: subscriber, counter: 0, period: period }));
-        return subscriber;
-    });
-}
-function dispatch(state) {
-    var subscriber = state.subscriber, counter = state.counter, period = state.period;
-    subscriber.next(counter);
-    this.schedule({ subscriber: subscriber, counter: counter + 1, period: period }, period);
-}
-//# sourceMappingURL=interval.js.map
-
-
-/***/ }),
-/* 834 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = onErrorResumeNext;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__from__ = __webpack_require__(62);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START _Observable,_from,_util_isArray,_empty PURE_IMPORTS_END */
-
-
-
-
-function onErrorResumeNext() {
-    var sources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        sources[_i] = arguments[_i];
-    }
-    if (sources.length === 0) {
-        return __WEBPACK_IMPORTED_MODULE_3__empty__["b" /* EMPTY */];
-    }
-    var first = sources[0], remainder = sources.slice(1);
-    if (sources.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArray__["a" /* isArray */])(first)) {
-        return onErrorResumeNext.apply(void 0, first);
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var subNext = function () { return subscriber.add(onErrorResumeNext.apply(void 0, remainder).subscribe(subscriber)); };
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__from__["a" /* from */])(first).subscribe({
-            next: function (value) { subscriber.next(value); },
-            error: subNext,
-            complete: subNext,
-        });
-    });
-}
-//# sourceMappingURL=onErrorResumeNext.js.map
-
-
-/***/ }),
-/* 835 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = pairs;
-/* unused harmony export dispatch */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/** PURE_IMPORTS_START _Observable,_Subscription PURE_IMPORTS_END */
-
-
-function pairs(obj, scheduler) {
-    if (!scheduler) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var keys = Object.keys(obj);
-            for (var i = 0; i < keys.length && !subscriber.closed; i++) {
-                var key = keys[i];
-                if (obj.hasOwnProperty(key)) {
-                    subscriber.next([key, obj[key]]);
-                }
-            }
-            subscriber.complete();
-        });
-    }
-    else {
-        return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-            var keys = Object.keys(obj);
-            var subscription = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-            subscription.add(scheduler.schedule(dispatch, 0, { keys: keys, index: 0, subscriber: subscriber, subscription: subscription, obj: obj }));
-            return subscription;
-        });
-    }
-}
-function dispatch(state) {
-    var keys = state.keys, index = state.index, subscriber = state.subscriber, subscription = state.subscription, obj = state.obj;
-    if (!subscriber.closed) {
-        if (index < keys.length) {
-            var key = keys[index];
-            subscriber.next([key, obj[key]]);
-            subscription.add(this.schedule({ keys: keys, index: index + 1, subscriber: subscriber, subscription: subscription, obj: obj }));
-        }
-        else {
-            subscriber.complete();
-        }
-    }
-}
-//# sourceMappingURL=pairs.js.map
-
-
-/***/ }),
-/* 836 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = range;
-/* unused harmony export dispatch */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/** PURE_IMPORTS_START _Observable PURE_IMPORTS_END */
-
-function range(start, count, scheduler) {
-    if (start === void 0) {
-        start = 0;
-    }
-    if (count === void 0) {
-        count = 0;
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var index = 0;
-        var current = start;
-        if (scheduler) {
-            return scheduler.schedule(dispatch, 0, {
-                index: index, count: count, start: start, subscriber: subscriber
-            });
-        }
-        else {
-            do {
-                if (index++ >= count) {
-                    subscriber.complete();
-                    break;
-                }
-                subscriber.next(current++);
-                if (subscriber.closed) {
-                    break;
-                }
-            } while (true);
-        }
-        return undefined;
-    });
-}
-function dispatch(state) {
-    var start = state.start, index = state.index, count = state.count, subscriber = state.subscriber;
-    if (index >= count) {
-        subscriber.complete();
-        return;
-    }
-    subscriber.next(start);
-    if (subscriber.closed) {
-        return;
-    }
-    state.index = index + 1;
-    state.start = start + 1;
-    this.schedule(state);
-}
-//# sourceMappingURL=range.js.map
-
-
-/***/ }),
-/* 837 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = using;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__from__ = __webpack_require__(62);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START _Observable,_from,_empty PURE_IMPORTS_END */
-
-
-
-function using(resourceFactory, observableFactory) {
-    return new __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */](function (subscriber) {
-        var resource;
-        try {
-            resource = resourceFactory();
-        }
-        catch (err) {
-            subscriber.error(err);
-            return undefined;
-        }
-        var result;
-        try {
-            result = observableFactory(resource);
-        }
-        catch (err) {
-            subscriber.error(err);
-            return undefined;
-        }
-        var source = result ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__from__["a" /* from */])(result) : __WEBPACK_IMPORTED_MODULE_2__empty__["b" /* EMPTY */];
-        var subscription = source.subscribe(subscriber);
-        return function () {
-            subscription.unsubscribe();
-            if (resource) {
-                resource.unsubscribe();
-            }
-        };
-    });
-}
-//# sourceMappingURL=using.js.map
-
-
-/***/ }),
-/* 838 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = auditTime;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__audit__ = __webpack_require__(428);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_timer__ = __webpack_require__(427);
-/** PURE_IMPORTS_START _scheduler_async,_audit,_observable_timer PURE_IMPORTS_END */
-
-
-
-function auditTime(duration, scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_0__scheduler_async__["a" /* async */];
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__audit__["a" /* audit */])(function () { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_timer__["a" /* timer */])(duration, scheduler); });
-}
-//# sourceMappingURL=auditTime.js.map
-
-
-/***/ }),
-/* 839 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = buffer;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function buffer(closingNotifier) {
-    return function bufferOperatorFunction(source) {
-        return source.lift(new BufferOperator(closingNotifier));
-    };
-}
-var BufferOperator = /*@__PURE__*/ (function () {
-    function BufferOperator(closingNotifier) {
-        this.closingNotifier = closingNotifier;
-    }
-    BufferOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new BufferSubscriber(subscriber, this.closingNotifier));
-    };
-    return BufferOperator;
-}());
-var BufferSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BufferSubscriber, _super);
-    function BufferSubscriber(destination, closingNotifier) {
-        var _this = _super.call(this, destination) || this;
-        _this.buffer = [];
-        _this.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(_this, closingNotifier));
-        return _this;
-    }
-    BufferSubscriber.prototype._next = function (value) {
-        this.buffer.push(value);
-    };
-    BufferSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        var buffer = this.buffer;
-        this.buffer = [];
-        this.destination.next(buffer);
-    };
-    return BufferSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=buffer.js.map
-
-
-/***/ }),
-/* 840 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = bufferCount;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function bufferCount(bufferSize, startBufferEvery) {
-    if (startBufferEvery === void 0) {
-        startBufferEvery = null;
-    }
-    return function bufferCountOperatorFunction(source) {
-        return source.lift(new BufferCountOperator(bufferSize, startBufferEvery));
-    };
-}
-var BufferCountOperator = /*@__PURE__*/ (function () {
-    function BufferCountOperator(bufferSize, startBufferEvery) {
-        this.bufferSize = bufferSize;
-        this.startBufferEvery = startBufferEvery;
-        if (!startBufferEvery || bufferSize === startBufferEvery) {
-            this.subscriberClass = BufferCountSubscriber;
-        }
-        else {
-            this.subscriberClass = BufferSkipCountSubscriber;
-        }
-    }
-    BufferCountOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new this.subscriberClass(subscriber, this.bufferSize, this.startBufferEvery));
-    };
-    return BufferCountOperator;
-}());
-var BufferCountSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BufferCountSubscriber, _super);
-    function BufferCountSubscriber(destination, bufferSize) {
-        var _this = _super.call(this, destination) || this;
-        _this.bufferSize = bufferSize;
-        _this.buffer = [];
-        return _this;
-    }
-    BufferCountSubscriber.prototype._next = function (value) {
-        var buffer = this.buffer;
-        buffer.push(value);
-        if (buffer.length == this.bufferSize) {
-            this.destination.next(buffer);
-            this.buffer = [];
-        }
-    };
-    BufferCountSubscriber.prototype._complete = function () {
-        var buffer = this.buffer;
-        if (buffer.length > 0) {
-            this.destination.next(buffer);
-        }
-        _super.prototype._complete.call(this);
-    };
-    return BufferCountSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-var BufferSkipCountSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BufferSkipCountSubscriber, _super);
-    function BufferSkipCountSubscriber(destination, bufferSize, startBufferEvery) {
-        var _this = _super.call(this, destination) || this;
-        _this.bufferSize = bufferSize;
-        _this.startBufferEvery = startBufferEvery;
-        _this.buffers = [];
-        _this.count = 0;
-        return _this;
-    }
-    BufferSkipCountSubscriber.prototype._next = function (value) {
-        var _a = this, bufferSize = _a.bufferSize, startBufferEvery = _a.startBufferEvery, buffers = _a.buffers, count = _a.count;
-        this.count++;
-        if (count % startBufferEvery === 0) {
-            buffers.push([]);
-        }
-        for (var i = buffers.length; i--;) {
-            var buffer = buffers[i];
-            buffer.push(value);
-            if (buffer.length === bufferSize) {
-                buffers.splice(i, 1);
-                this.destination.next(buffer);
-            }
-        }
-    };
-    BufferSkipCountSubscriber.prototype._complete = function () {
-        var _a = this, buffers = _a.buffers, destination = _a.destination;
-        while (buffers.length > 0) {
-            var buffer = buffers.shift();
-            if (buffer.length > 0) {
-                destination.next(buffer);
-            }
-        }
-        _super.prototype._complete.call(this);
-    };
-    return BufferSkipCountSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=bufferCount.js.map
-
-
-/***/ }),
-/* 841 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = bufferTime;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START tslib,_scheduler_async,_Subscriber,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-
-function bufferTime(bufferTimeSpan) {
-    var length = arguments.length;
-    var scheduler = __WEBPACK_IMPORTED_MODULE_1__scheduler_async__["a" /* async */];
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_isScheduler__["a" /* isScheduler */])(arguments[arguments.length - 1])) {
-        scheduler = arguments[arguments.length - 1];
-        length--;
-    }
-    var bufferCreationInterval = null;
-    if (length >= 2) {
-        bufferCreationInterval = arguments[1];
-    }
-    var maxBufferSize = Number.POSITIVE_INFINITY;
-    if (length >= 3) {
-        maxBufferSize = arguments[2];
-    }
-    return function bufferTimeOperatorFunction(source) {
-        return source.lift(new BufferTimeOperator(bufferTimeSpan, bufferCreationInterval, maxBufferSize, scheduler));
-    };
-}
-var BufferTimeOperator = /*@__PURE__*/ (function () {
-    function BufferTimeOperator(bufferTimeSpan, bufferCreationInterval, maxBufferSize, scheduler) {
-        this.bufferTimeSpan = bufferTimeSpan;
-        this.bufferCreationInterval = bufferCreationInterval;
-        this.maxBufferSize = maxBufferSize;
-        this.scheduler = scheduler;
-    }
-    BufferTimeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new BufferTimeSubscriber(subscriber, this.bufferTimeSpan, this.bufferCreationInterval, this.maxBufferSize, this.scheduler));
-    };
-    return BufferTimeOperator;
-}());
-var Context = /*@__PURE__*/ (function () {
-    function Context() {
-        this.buffer = [];
-    }
-    return Context;
-}());
-var BufferTimeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BufferTimeSubscriber, _super);
-    function BufferTimeSubscriber(destination, bufferTimeSpan, bufferCreationInterval, maxBufferSize, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.bufferTimeSpan = bufferTimeSpan;
-        _this.bufferCreationInterval = bufferCreationInterval;
-        _this.maxBufferSize = maxBufferSize;
-        _this.scheduler = scheduler;
-        _this.contexts = [];
-        var context = _this.openContext();
-        _this.timespanOnly = bufferCreationInterval == null || bufferCreationInterval < 0;
-        if (_this.timespanOnly) {
-            var timeSpanOnlyState = { subscriber: _this, context: context, bufferTimeSpan: bufferTimeSpan };
-            _this.add(context.closeAction = scheduler.schedule(dispatchBufferTimeSpanOnly, bufferTimeSpan, timeSpanOnlyState));
-        }
-        else {
-            var closeState = { subscriber: _this, context: context };
-            var creationState = { bufferTimeSpan: bufferTimeSpan, bufferCreationInterval: bufferCreationInterval, subscriber: _this, scheduler: scheduler };
-            _this.add(context.closeAction = scheduler.schedule(dispatchBufferClose, bufferTimeSpan, closeState));
-            _this.add(scheduler.schedule(dispatchBufferCreation, bufferCreationInterval, creationState));
-        }
-        return _this;
-    }
-    BufferTimeSubscriber.prototype._next = function (value) {
-        var contexts = this.contexts;
-        var len = contexts.length;
-        var filledBufferContext;
-        for (var i = 0; i < len; i++) {
-            var context_1 = contexts[i];
-            var buffer = context_1.buffer;
-            buffer.push(value);
-            if (buffer.length == this.maxBufferSize) {
-                filledBufferContext = context_1;
-            }
-        }
-        if (filledBufferContext) {
-            this.onBufferFull(filledBufferContext);
-        }
-    };
-    BufferTimeSubscriber.prototype._error = function (err) {
-        this.contexts.length = 0;
-        _super.prototype._error.call(this, err);
-    };
-    BufferTimeSubscriber.prototype._complete = function () {
-        var _a = this, contexts = _a.contexts, destination = _a.destination;
-        while (contexts.length > 0) {
-            var context_2 = contexts.shift();
-            destination.next(context_2.buffer);
-        }
-        _super.prototype._complete.call(this);
-    };
-    BufferTimeSubscriber.prototype._unsubscribe = function () {
-        this.contexts = null;
-    };
-    BufferTimeSubscriber.prototype.onBufferFull = function (context) {
-        this.closeContext(context);
-        var closeAction = context.closeAction;
-        closeAction.unsubscribe();
-        this.remove(closeAction);
-        if (!this.closed && this.timespanOnly) {
-            context = this.openContext();
-            var bufferTimeSpan = this.bufferTimeSpan;
-            var timeSpanOnlyState = { subscriber: this, context: context, bufferTimeSpan: bufferTimeSpan };
-            this.add(context.closeAction = this.scheduler.schedule(dispatchBufferTimeSpanOnly, bufferTimeSpan, timeSpanOnlyState));
-        }
-    };
-    BufferTimeSubscriber.prototype.openContext = function () {
-        var context = new Context();
-        this.contexts.push(context);
-        return context;
-    };
-    BufferTimeSubscriber.prototype.closeContext = function (context) {
-        this.destination.next(context.buffer);
-        var contexts = this.contexts;
-        var spliceIndex = contexts ? contexts.indexOf(context) : -1;
-        if (spliceIndex >= 0) {
-            contexts.splice(contexts.indexOf(context), 1);
-        }
-    };
-    return BufferTimeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_2__Subscriber__["a" /* Subscriber */]));
-function dispatchBufferTimeSpanOnly(state) {
-    var subscriber = state.subscriber;
-    var prevContext = state.context;
-    if (prevContext) {
-        subscriber.closeContext(prevContext);
-    }
-    if (!subscriber.closed) {
-        state.context = subscriber.openContext();
-        state.context.closeAction = this.schedule(state, state.bufferTimeSpan);
-    }
-}
-function dispatchBufferCreation(state) {
-    var bufferCreationInterval = state.bufferCreationInterval, bufferTimeSpan = state.bufferTimeSpan, subscriber = state.subscriber, scheduler = state.scheduler;
-    var context = subscriber.openContext();
-    var action = this;
-    if (!subscriber.closed) {
-        subscriber.add(context.closeAction = scheduler.schedule(dispatchBufferClose, bufferTimeSpan, { subscriber: subscriber, context: context }));
-        action.schedule(state, bufferCreationInterval);
-    }
-}
-function dispatchBufferClose(arg) {
-    var subscriber = arg.subscriber, context = arg.context;
-    subscriber.closeContext(context);
-}
-//# sourceMappingURL=bufferTime.js.map
-
-
-/***/ }),
-/* 842 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = bufferToggle;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/** PURE_IMPORTS_START tslib,_Subscription,_util_subscribeToResult,_OuterSubscriber PURE_IMPORTS_END */
-
-
-
-
-function bufferToggle(openings, closingSelector) {
-    return function bufferToggleOperatorFunction(source) {
-        return source.lift(new BufferToggleOperator(openings, closingSelector));
-    };
-}
-var BufferToggleOperator = /*@__PURE__*/ (function () {
-    function BufferToggleOperator(openings, closingSelector) {
-        this.openings = openings;
-        this.closingSelector = closingSelector;
-    }
-    BufferToggleOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new BufferToggleSubscriber(subscriber, this.openings, this.closingSelector));
-    };
-    return BufferToggleOperator;
-}());
-var BufferToggleSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BufferToggleSubscriber, _super);
-    function BufferToggleSubscriber(destination, openings, closingSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.openings = openings;
-        _this.closingSelector = closingSelector;
-        _this.contexts = [];
-        _this.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(_this, openings));
-        return _this;
-    }
-    BufferToggleSubscriber.prototype._next = function (value) {
-        var contexts = this.contexts;
-        var len = contexts.length;
-        for (var i = 0; i < len; i++) {
-            contexts[i].buffer.push(value);
-        }
-    };
-    BufferToggleSubscriber.prototype._error = function (err) {
-        var contexts = this.contexts;
-        while (contexts.length > 0) {
-            var context_1 = contexts.shift();
-            context_1.subscription.unsubscribe();
-            context_1.buffer = null;
-            context_1.subscription = null;
-        }
-        this.contexts = null;
-        _super.prototype._error.call(this, err);
-    };
-    BufferToggleSubscriber.prototype._complete = function () {
-        var contexts = this.contexts;
-        while (contexts.length > 0) {
-            var context_2 = contexts.shift();
-            this.destination.next(context_2.buffer);
-            context_2.subscription.unsubscribe();
-            context_2.buffer = null;
-            context_2.subscription = null;
-        }
-        this.contexts = null;
-        _super.prototype._complete.call(this);
-    };
-    BufferToggleSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        outerValue ? this.closeBuffer(outerValue) : this.openBuffer(innerValue);
-    };
-    BufferToggleSubscriber.prototype.notifyComplete = function (innerSub) {
-        this.closeBuffer(innerSub.context);
-    };
-    BufferToggleSubscriber.prototype.openBuffer = function (value) {
-        try {
-            var closingSelector = this.closingSelector;
-            var closingNotifier = closingSelector.call(this, value);
-            if (closingNotifier) {
-                this.trySubscribe(closingNotifier);
-            }
-        }
-        catch (err) {
-            this._error(err);
-        }
-    };
-    BufferToggleSubscriber.prototype.closeBuffer = function (context) {
-        var contexts = this.contexts;
-        if (contexts && context) {
-            var buffer = context.buffer, subscription = context.subscription;
-            this.destination.next(buffer);
-            contexts.splice(contexts.indexOf(context), 1);
-            this.remove(subscription);
-            subscription.unsubscribe();
-        }
-    };
-    BufferToggleSubscriber.prototype.trySubscribe = function (closingNotifier) {
-        var contexts = this.contexts;
-        var buffer = [];
-        var subscription = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-        var context = { buffer: buffer, subscription: subscription };
-        contexts.push(context);
-        var innerSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(this, closingNotifier, context);
-        if (!innerSubscription || innerSubscription.closed) {
-            this.closeBuffer(context);
-        }
-        else {
-            innerSubscription.context = context;
-            this.add(innerSubscription);
-            subscription.add(innerSubscription);
-        }
-    };
-    return BufferToggleSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=bufferToggle.js.map
-
-
-/***/ }),
-/* 843 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = bufferWhen;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subscription,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-
-function bufferWhen(closingSelector) {
-    return function (source) {
-        return source.lift(new BufferWhenOperator(closingSelector));
-    };
-}
-var BufferWhenOperator = /*@__PURE__*/ (function () {
-    function BufferWhenOperator(closingSelector) {
-        this.closingSelector = closingSelector;
-    }
-    BufferWhenOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new BufferWhenSubscriber(subscriber, this.closingSelector));
-    };
-    return BufferWhenOperator;
-}());
-var BufferWhenSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](BufferWhenSubscriber, _super);
-    function BufferWhenSubscriber(destination, closingSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.closingSelector = closingSelector;
-        _this.subscribing = false;
-        _this.openBuffer();
-        return _this;
-    }
-    BufferWhenSubscriber.prototype._next = function (value) {
-        this.buffer.push(value);
-    };
-    BufferWhenSubscriber.prototype._complete = function () {
-        var buffer = this.buffer;
-        if (buffer) {
-            this.destination.next(buffer);
-        }
-        _super.prototype._complete.call(this);
-    };
-    BufferWhenSubscriber.prototype._unsubscribe = function () {
-        this.buffer = null;
-        this.subscribing = false;
-    };
-    BufferWhenSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.openBuffer();
-    };
-    BufferWhenSubscriber.prototype.notifyComplete = function () {
-        if (this.subscribing) {
-            this.complete();
-        }
-        else {
-            this.openBuffer();
-        }
-    };
-    BufferWhenSubscriber.prototype.openBuffer = function () {
-        var closingSubscription = this.closingSubscription;
-        if (closingSubscription) {
-            this.remove(closingSubscription);
-            closingSubscription.unsubscribe();
-        }
-        var buffer = this.buffer;
-        if (this.buffer) {
-            this.destination.next(buffer);
-        }
-        this.buffer = [];
-        var closingNotifier = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(this.closingSelector)();
-        if (closingNotifier === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-            this.error(__WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */].e);
-        }
-        else {
-            closingSubscription = new __WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]();
-            this.closingSubscription = closingSubscription;
-            this.add(closingSubscription);
-            this.subscribing = true;
-            closingSubscription.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__["a" /* subscribeToResult */])(this, closingNotifier));
-            this.subscribing = false;
-        }
-    };
-    return BufferWhenSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=bufferWhen.js.map
-
-
-/***/ }),
-/* 844 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = catchError;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_InnerSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-function catchError(selector) {
-    return function catchErrorOperatorFunction(source) {
-        var operator = new CatchOperator(selector);
-        var caught = source.lift(operator);
-        return (operator.caught = caught);
-    };
-}
-var CatchOperator = /*@__PURE__*/ (function () {
-    function CatchOperator(selector) {
-        this.selector = selector;
-    }
-    CatchOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new CatchSubscriber(subscriber, this.selector, this.caught));
-    };
-    return CatchOperator;
-}());
-var CatchSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](CatchSubscriber, _super);
-    function CatchSubscriber(destination, selector, caught) {
-        var _this = _super.call(this, destination) || this;
-        _this.selector = selector;
-        _this.caught = caught;
-        return _this;
-    }
-    CatchSubscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            var result = void 0;
-            try {
-                result = this.selector(err, this.caught);
-            }
-            catch (err2) {
-                _super.prototype.error.call(this, err2);
-                return;
-            }
-            this._unsubscribeAndRecycle();
-            var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__["a" /* InnerSubscriber */](this, undefined, undefined);
-            this.add(innerSubscriber);
-            __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__["a" /* subscribeToResult */])(this, result, undefined, undefined, innerSubscriber);
-        }
-    };
-    return CatchSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=catchError.js.map
-
-
-/***/ }),
-/* 845 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = combineAll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_combineLatest__ = __webpack_require__(309);
-/** PURE_IMPORTS_START _observable_combineLatest PURE_IMPORTS_END */
-
-function combineAll(project) {
-    return function (source) { return source.lift(new __WEBPACK_IMPORTED_MODULE_0__observable_combineLatest__["b" /* CombineLatestOperator */](project)); };
-}
-//# sourceMappingURL=combineAll.js.map
-
-
-/***/ }),
-/* 846 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = combineLatest;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__observable_combineLatest__ = __webpack_require__(309);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_from__ = __webpack_require__(62);
-/** PURE_IMPORTS_START _util_isArray,_observable_combineLatest,_observable_from PURE_IMPORTS_END */
-
-
-
-var none = {};
-function combineLatest() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    var project = null;
-    if (typeof observables[observables.length - 1] === 'function') {
-        project = observables.pop();
-    }
-    if (observables.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_isArray__["a" /* isArray */])(observables[0])) {
-        observables = observables[0].slice();
-    }
-    return function (source) { return source.lift.call(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_from__["a" /* from */])([source].concat(observables)), new __WEBPACK_IMPORTED_MODULE_1__observable_combineLatest__["b" /* CombineLatestOperator */](project)); };
-}
-//# sourceMappingURL=combineLatest.js.map
-
-
-/***/ }),
-/* 847 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = concat;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_concat__ = __webpack_require__(186);
-/** PURE_IMPORTS_START _observable_concat PURE_IMPORTS_END */
-
-function concat() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    return function (source) { return source.lift.call(__WEBPACK_IMPORTED_MODULE_0__observable_concat__["a" /* concat */].apply(void 0, [source].concat(observables))); };
-}
-//# sourceMappingURL=concat.js.map
-
-
-/***/ }),
-/* 848 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = concatMapTo;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__concatMap__ = __webpack_require__(430);
-/** PURE_IMPORTS_START _concatMap PURE_IMPORTS_END */
-
-function concatMapTo(innerObservable, resultSelector) {
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__concatMap__["a" /* concatMap */])(function () { return innerObservable; }, resultSelector);
-}
-//# sourceMappingURL=concatMapTo.js.map
-
-
-/***/ }),
-/* 849 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = count;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function count(predicate) {
-    return function (source) { return source.lift(new CountOperator(predicate, source)); };
-}
-var CountOperator = /*@__PURE__*/ (function () {
-    function CountOperator(predicate, source) {
-        this.predicate = predicate;
-        this.source = source;
-    }
-    CountOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new CountSubscriber(subscriber, this.predicate, this.source));
-    };
-    return CountOperator;
-}());
-var CountSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](CountSubscriber, _super);
-    function CountSubscriber(destination, predicate, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.source = source;
-        _this.count = 0;
-        _this.index = 0;
-        return _this;
-    }
-    CountSubscriber.prototype._next = function (value) {
-        if (this.predicate) {
-            this._tryPredicate(value);
-        }
-        else {
-            this.count++;
-        }
-    };
-    CountSubscriber.prototype._tryPredicate = function (value) {
-        var result;
-        try {
-            result = this.predicate(value, this.index++, this.source);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        if (result) {
-            this.count++;
-        }
-    };
-    CountSubscriber.prototype._complete = function () {
-        this.destination.next(this.count);
-        this.destination.complete();
-    };
-    return CountSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=count.js.map
-
-
-/***/ }),
-/* 850 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = debounce;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function debounce(durationSelector) {
-    return function (source) { return source.lift(new DebounceOperator(durationSelector)); };
-}
-var DebounceOperator = /*@__PURE__*/ (function () {
-    function DebounceOperator(durationSelector) {
-        this.durationSelector = durationSelector;
-    }
-    DebounceOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DebounceSubscriber(subscriber, this.durationSelector));
-    };
-    return DebounceOperator;
-}());
-var DebounceSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DebounceSubscriber, _super);
-    function DebounceSubscriber(destination, durationSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.durationSelector = durationSelector;
-        _this.hasValue = false;
-        _this.durationSubscription = null;
-        return _this;
-    }
-    DebounceSubscriber.prototype._next = function (value) {
-        try {
-            var result = this.durationSelector.call(this, value);
-            if (result) {
-                this._tryNext(value, result);
-            }
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    };
-    DebounceSubscriber.prototype._complete = function () {
-        this.emitValue();
-        this.destination.complete();
-    };
-    DebounceSubscriber.prototype._tryNext = function (value, duration) {
-        var subscription = this.durationSubscription;
-        this.value = value;
-        this.hasValue = true;
-        if (subscription) {
-            subscription.unsubscribe();
-            this.remove(subscription);
-        }
-        subscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(this, duration);
-        if (subscription && !subscription.closed) {
-            this.add(this.durationSubscription = subscription);
-        }
-    };
-    DebounceSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.emitValue();
-    };
-    DebounceSubscriber.prototype.notifyComplete = function () {
-        this.emitValue();
-    };
-    DebounceSubscriber.prototype.emitValue = function () {
-        if (this.hasValue) {
-            var value = this.value;
-            var subscription = this.durationSubscription;
-            if (subscription) {
-                this.durationSubscription = null;
-                subscription.unsubscribe();
-                this.remove(subscription);
-            }
-            this.value = null;
-            this.hasValue = false;
-            _super.prototype._next.call(this, value);
-        }
-    };
-    return DebounceSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=debounce.js.map
-
-
-/***/ }),
-/* 851 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = debounceTime;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__scheduler_async__ = __webpack_require__(40);
-/** PURE_IMPORTS_START tslib,_Subscriber,_scheduler_async PURE_IMPORTS_END */
-
-
-
-function debounceTime(dueTime, scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_async__["a" /* async */];
-    }
-    return function (source) { return source.lift(new DebounceTimeOperator(dueTime, scheduler)); };
-}
-var DebounceTimeOperator = /*@__PURE__*/ (function () {
-    function DebounceTimeOperator(dueTime, scheduler) {
-        this.dueTime = dueTime;
-        this.scheduler = scheduler;
-    }
-    DebounceTimeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DebounceTimeSubscriber(subscriber, this.dueTime, this.scheduler));
-    };
-    return DebounceTimeOperator;
-}());
-var DebounceTimeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DebounceTimeSubscriber, _super);
-    function DebounceTimeSubscriber(destination, dueTime, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.dueTime = dueTime;
-        _this.scheduler = scheduler;
-        _this.debouncedSubscription = null;
-        _this.lastValue = null;
-        _this.hasValue = false;
-        return _this;
-    }
-    DebounceTimeSubscriber.prototype._next = function (value) {
-        this.clearDebounce();
-        this.lastValue = value;
-        this.hasValue = true;
-        this.add(this.debouncedSubscription = this.scheduler.schedule(dispatchNext, this.dueTime, this));
-    };
-    DebounceTimeSubscriber.prototype._complete = function () {
-        this.debouncedNext();
-        this.destination.complete();
-    };
-    DebounceTimeSubscriber.prototype.debouncedNext = function () {
-        this.clearDebounce();
-        if (this.hasValue) {
-            var lastValue = this.lastValue;
-            this.lastValue = null;
-            this.hasValue = false;
-            this.destination.next(lastValue);
-        }
-    };
-    DebounceTimeSubscriber.prototype.clearDebounce = function () {
-        var debouncedSubscription = this.debouncedSubscription;
-        if (debouncedSubscription !== null) {
-            this.remove(debouncedSubscription);
-            debouncedSubscription.unsubscribe();
-            this.debouncedSubscription = null;
-        }
-    };
-    return DebounceTimeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-function dispatchNext(subscriber) {
-    subscriber.debouncedNext();
-}
-//# sourceMappingURL=debounceTime.js.map
-
-
-/***/ }),
-/* 852 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = delay;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isDate__ = __webpack_require__(443);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__Notification__ = __webpack_require__(184);
-/** PURE_IMPORTS_START tslib,_scheduler_async,_util_isDate,_Subscriber,_Notification PURE_IMPORTS_END */
-
-
-
-
-
-function delay(delay, scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_1__scheduler_async__["a" /* async */];
-    }
-    var absoluteDelay = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isDate__["a" /* isDate */])(delay);
-    var delayFor = absoluteDelay ? (+delay - scheduler.now()) : Math.abs(delay);
-    return function (source) { return source.lift(new DelayOperator(delayFor, scheduler)); };
-}
-var DelayOperator = /*@__PURE__*/ (function () {
-    function DelayOperator(delay, scheduler) {
-        this.delay = delay;
-        this.scheduler = scheduler;
-    }
-    DelayOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DelaySubscriber(subscriber, this.delay, this.scheduler));
-    };
-    return DelayOperator;
-}());
-var DelaySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DelaySubscriber, _super);
-    function DelaySubscriber(destination, delay, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.delay = delay;
-        _this.scheduler = scheduler;
-        _this.queue = [];
-        _this.active = false;
-        _this.errored = false;
-        return _this;
-    }
-    DelaySubscriber.dispatch = function (state) {
-        var source = state.source;
-        var queue = source.queue;
-        var scheduler = state.scheduler;
-        var destination = state.destination;
-        while (queue.length > 0 && (queue[0].time - scheduler.now()) <= 0) {
-            queue.shift().notification.observe(destination);
-        }
-        if (queue.length > 0) {
-            var delay_1 = Math.max(0, queue[0].time - scheduler.now());
-            this.schedule(state, delay_1);
-        }
-        else {
-            this.unsubscribe();
-            source.active = false;
-        }
-    };
-    DelaySubscriber.prototype._schedule = function (scheduler) {
-        this.active = true;
-        var destination = this.destination;
-        destination.add(scheduler.schedule(DelaySubscriber.dispatch, this.delay, {
-            source: this, destination: this.destination, scheduler: scheduler
-        }));
-    };
-    DelaySubscriber.prototype.scheduleNotification = function (notification) {
-        if (this.errored === true) {
-            return;
-        }
-        var scheduler = this.scheduler;
-        var message = new DelayMessage(scheduler.now() + this.delay, notification);
-        this.queue.push(message);
-        if (this.active === false) {
-            this._schedule(scheduler);
-        }
-    };
-    DelaySubscriber.prototype._next = function (value) {
-        this.scheduleNotification(__WEBPACK_IMPORTED_MODULE_4__Notification__["a" /* Notification */].createNext(value));
-    };
-    DelaySubscriber.prototype._error = function (err) {
-        this.errored = true;
-        this.queue = [];
-        this.destination.error(err);
-        this.unsubscribe();
-    };
-    DelaySubscriber.prototype._complete = function () {
-        this.scheduleNotification(__WEBPACK_IMPORTED_MODULE_4__Notification__["a" /* Notification */].createComplete());
-        this.unsubscribe();
-    };
-    return DelaySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__Subscriber__["a" /* Subscriber */]));
-var DelayMessage = /*@__PURE__*/ (function () {
-    function DelayMessage(time, notification) {
-        this.time = time;
-        this.notification = notification;
-    }
-    return DelayMessage;
-}());
-//# sourceMappingURL=delay.js.map
-
-
-/***/ }),
-/* 853 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = delayWhen;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Observable__ = __webpack_require__(12);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subscriber,_Observable,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-function delayWhen(delayDurationSelector, subscriptionDelay) {
-    if (subscriptionDelay) {
-        return function (source) {
-            return new SubscriptionDelayObservable(source, subscriptionDelay)
-                .lift(new DelayWhenOperator(delayDurationSelector));
-        };
-    }
-    return function (source) { return source.lift(new DelayWhenOperator(delayDurationSelector)); };
-}
-var DelayWhenOperator = /*@__PURE__*/ (function () {
-    function DelayWhenOperator(delayDurationSelector) {
-        this.delayDurationSelector = delayDurationSelector;
-    }
-    DelayWhenOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DelayWhenSubscriber(subscriber, this.delayDurationSelector));
-    };
-    return DelayWhenOperator;
-}());
-var DelayWhenSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DelayWhenSubscriber, _super);
-    function DelayWhenSubscriber(destination, delayDurationSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.delayDurationSelector = delayDurationSelector;
-        _this.completed = false;
-        _this.delayNotifierSubscriptions = [];
-        _this.index = 0;
-        return _this;
-    }
-    DelayWhenSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.destination.next(outerValue);
-        this.removeSubscription(innerSub);
-        this.tryComplete();
-    };
-    DelayWhenSubscriber.prototype.notifyError = function (error, innerSub) {
-        this._error(error);
-    };
-    DelayWhenSubscriber.prototype.notifyComplete = function (innerSub) {
-        var value = this.removeSubscription(innerSub);
-        if (value) {
-            this.destination.next(value);
-        }
-        this.tryComplete();
-    };
-    DelayWhenSubscriber.prototype._next = function (value) {
-        var index = this.index++;
-        try {
-            var delayNotifier = this.delayDurationSelector(value, index);
-            if (delayNotifier) {
-                this.tryDelay(delayNotifier, value);
-            }
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    };
-    DelayWhenSubscriber.prototype._complete = function () {
-        this.completed = true;
-        this.tryComplete();
-        this.unsubscribe();
-    };
-    DelayWhenSubscriber.prototype.removeSubscription = function (subscription) {
-        subscription.unsubscribe();
-        var subscriptionIdx = this.delayNotifierSubscriptions.indexOf(subscription);
-        if (subscriptionIdx !== -1) {
-            this.delayNotifierSubscriptions.splice(subscriptionIdx, 1);
-        }
-        return subscription.outerValue;
-    };
-    DelayWhenSubscriber.prototype.tryDelay = function (delayNotifier, value) {
-        var notifierSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(this, delayNotifier, value);
-        if (notifierSubscription && !notifierSubscription.closed) {
-            var destination = this.destination;
-            destination.add(notifierSubscription);
-            this.delayNotifierSubscriptions.push(notifierSubscription);
-        }
-    };
-    DelayWhenSubscriber.prototype.tryComplete = function () {
-        if (this.completed && this.delayNotifierSubscriptions.length === 0) {
-            this.destination.complete();
-        }
-    };
-    return DelayWhenSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-var SubscriptionDelayObservable = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SubscriptionDelayObservable, _super);
-    function SubscriptionDelayObservable(source, subscriptionDelay) {
-        var _this = _super.call(this) || this;
-        _this.source = source;
-        _this.subscriptionDelay = subscriptionDelay;
-        return _this;
-    }
-    SubscriptionDelayObservable.prototype._subscribe = function (subscriber) {
-        this.subscriptionDelay.subscribe(new SubscriptionDelaySubscriber(subscriber, this.source));
-    };
-    return SubscriptionDelayObservable;
-}(__WEBPACK_IMPORTED_MODULE_2__Observable__["a" /* Observable */]));
-var SubscriptionDelaySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SubscriptionDelaySubscriber, _super);
-    function SubscriptionDelaySubscriber(parent, source) {
-        var _this = _super.call(this) || this;
-        _this.parent = parent;
-        _this.source = source;
-        _this.sourceSubscribed = false;
-        return _this;
-    }
-    SubscriptionDelaySubscriber.prototype._next = function (unused) {
-        this.subscribeToSource();
-    };
-    SubscriptionDelaySubscriber.prototype._error = function (err) {
-        this.unsubscribe();
-        this.parent.error(err);
-    };
-    SubscriptionDelaySubscriber.prototype._complete = function () {
-        this.unsubscribe();
-        this.subscribeToSource();
-    };
-    SubscriptionDelaySubscriber.prototype.subscribeToSource = function () {
-        if (!this.sourceSubscribed) {
-            this.sourceSubscribed = true;
-            this.unsubscribe();
-            this.source.subscribe(this.parent);
-        }
-    };
-    return SubscriptionDelaySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=delayWhen.js.map
-
-
-/***/ }),
-/* 854 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = dematerialize;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function dematerialize() {
-    return function dematerializeOperatorFunction(source) {
-        return source.lift(new DeMaterializeOperator());
-    };
-}
-var DeMaterializeOperator = /*@__PURE__*/ (function () {
-    function DeMaterializeOperator() {
-    }
-    DeMaterializeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DeMaterializeSubscriber(subscriber));
-    };
-    return DeMaterializeOperator;
-}());
-var DeMaterializeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DeMaterializeSubscriber, _super);
-    function DeMaterializeSubscriber(destination) {
-        return _super.call(this, destination) || this;
-    }
-    DeMaterializeSubscriber.prototype._next = function (value) {
-        value.observe(this.destination);
-    };
-    return DeMaterializeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=dematerialize.js.map
-
-
-/***/ }),
-/* 855 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = distinct;
-/* unused harmony export DistinctSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function distinct(keySelector, flushes) {
-    return function (source) { return source.lift(new DistinctOperator(keySelector, flushes)); };
-}
-var DistinctOperator = /*@__PURE__*/ (function () {
-    function DistinctOperator(keySelector, flushes) {
-        this.keySelector = keySelector;
-        this.flushes = flushes;
-    }
-    DistinctOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new DistinctSubscriber(subscriber, this.keySelector, this.flushes));
-    };
-    return DistinctOperator;
-}());
-var DistinctSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](DistinctSubscriber, _super);
-    function DistinctSubscriber(destination, keySelector, flushes) {
-        var _this = _super.call(this, destination) || this;
-        _this.keySelector = keySelector;
-        _this.values = new Set();
-        if (flushes) {
-            _this.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(_this, flushes));
-        }
-        return _this;
-    }
-    DistinctSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.values.clear();
-    };
-    DistinctSubscriber.prototype.notifyError = function (error, innerSub) {
-        this._error(error);
-    };
-    DistinctSubscriber.prototype._next = function (value) {
-        if (this.keySelector) {
-            this._useKeySelector(value);
-        }
-        else {
-            this._finalizeNext(value, value);
-        }
-    };
-    DistinctSubscriber.prototype._useKeySelector = function (value) {
-        var key;
-        var destination = this.destination;
-        try {
-            key = this.keySelector(value);
-        }
-        catch (err) {
-            destination.error(err);
-            return;
-        }
-        this._finalizeNext(key, value);
-    };
-    DistinctSubscriber.prototype._finalizeNext = function (key, value) {
-        var values = this.values;
-        if (!values.has(key)) {
-            values.add(key);
-            this.destination.next(value);
-        }
-    };
-    return DistinctSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-
-//# sourceMappingURL=distinct.js.map
-
-
-/***/ }),
-/* 856 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = distinctUntilKeyChanged;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__distinctUntilChanged__ = __webpack_require__(431);
-/** PURE_IMPORTS_START _distinctUntilChanged PURE_IMPORTS_END */
-
-function distinctUntilKeyChanged(key, compare) {
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__distinctUntilChanged__["a" /* distinctUntilChanged */])(function (x, y) { return compare ? compare(x[key], y[key]) : x[key] === y[key]; });
-}
-//# sourceMappingURL=distinctUntilKeyChanged.js.map
-
-
-/***/ }),
-/* 857 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = elementAt;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_ArgumentOutOfRangeError__ = __webpack_require__(152);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__filter__ = __webpack_require__(147);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__throwIfEmpty__ = __webpack_require__(188);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__defaultIfEmpty__ = __webpack_require__(146);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__take__ = __webpack_require__(319);
-/** PURE_IMPORTS_START _util_ArgumentOutOfRangeError,_filter,_throwIfEmpty,_defaultIfEmpty,_take PURE_IMPORTS_END */
-
-
-
-
-
-function elementAt(index, defaultValue) {
-    if (index < 0) {
-        throw new __WEBPACK_IMPORTED_MODULE_0__util_ArgumentOutOfRangeError__["a" /* ArgumentOutOfRangeError */]();
-    }
-    var hasDefaultValue = arguments.length >= 2;
-    return function (source) {
-        return source.pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__filter__["a" /* filter */])(function (v, i) { return i === index; }), __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__take__["a" /* take */])(1), hasDefaultValue
-            ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__defaultIfEmpty__["a" /* defaultIfEmpty */])(defaultValue)
-            : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__throwIfEmpty__["a" /* throwIfEmpty */])(function () { return new __WEBPACK_IMPORTED_MODULE_0__util_ArgumentOutOfRangeError__["a" /* ArgumentOutOfRangeError */](); }));
-    };
-}
-//# sourceMappingURL=elementAt.js.map
-
-
-/***/ }),
-/* 858 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = endWith;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_fromArray__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__observable_scalar__ = __webpack_require__(312);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_empty__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__observable_concat__ = __webpack_require__(186);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START _observable_fromArray,_observable_scalar,_observable_empty,_observable_concat,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-
-
-function endWith() {
-    var array = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        array[_i] = arguments[_i];
-    }
-    return function (source) {
-        var scheduler = array[array.length - 1];
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isScheduler__["a" /* isScheduler */])(scheduler)) {
-            array.pop();
-        }
-        else {
-            scheduler = null;
-        }
-        var len = array.length;
-        if (len === 1 && !scheduler) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_concat__["a" /* concat */])(source, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__observable_scalar__["a" /* scalar */])(array[0]));
-        }
-        else if (len > 0) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_concat__["a" /* concat */])(source, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__observable_fromArray__["a" /* fromArray */])(array, scheduler));
-        }
-        else {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_concat__["a" /* concat */])(source, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_empty__["a" /* empty */])(scheduler));
-        }
-    };
-}
-//# sourceMappingURL=endWith.js.map
-
-
-/***/ }),
-/* 859 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = every;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function every(predicate, thisArg) {
-    return function (source) { return source.lift(new EveryOperator(predicate, thisArg, source)); };
-}
-var EveryOperator = /*@__PURE__*/ (function () {
-    function EveryOperator(predicate, thisArg, source) {
-        this.predicate = predicate;
-        this.thisArg = thisArg;
-        this.source = source;
-    }
-    EveryOperator.prototype.call = function (observer, source) {
-        return source.subscribe(new EverySubscriber(observer, this.predicate, this.thisArg, this.source));
-    };
-    return EveryOperator;
-}());
-var EverySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](EverySubscriber, _super);
-    function EverySubscriber(destination, predicate, thisArg, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.thisArg = thisArg;
-        _this.source = source;
-        _this.index = 0;
-        _this.thisArg = thisArg || _this;
-        return _this;
-    }
-    EverySubscriber.prototype.notifyComplete = function (everyValueMatch) {
-        this.destination.next(everyValueMatch);
-        this.destination.complete();
-    };
-    EverySubscriber.prototype._next = function (value) {
-        var result = false;
-        try {
-            result = this.predicate.call(this.thisArg, value, this.index++, this.source);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        if (!result) {
-            this.notifyComplete(false);
-        }
-    };
-    EverySubscriber.prototype._complete = function () {
-        this.notifyComplete(true);
-    };
-    return EverySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=every.js.map
-
-
-/***/ }),
-/* 860 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = exhaust;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function exhaust() {
-    return function (source) { return source.lift(new SwitchFirstOperator()); };
-}
-var SwitchFirstOperator = /*@__PURE__*/ (function () {
-    function SwitchFirstOperator() {
-    }
-    SwitchFirstOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SwitchFirstSubscriber(subscriber));
-    };
-    return SwitchFirstOperator;
-}());
-var SwitchFirstSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SwitchFirstSubscriber, _super);
-    function SwitchFirstSubscriber(destination) {
-        var _this = _super.call(this, destination) || this;
-        _this.hasCompleted = false;
-        _this.hasSubscription = false;
-        return _this;
-    }
-    SwitchFirstSubscriber.prototype._next = function (value) {
-        if (!this.hasSubscription) {
-            this.hasSubscription = true;
-            this.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(this, value));
-        }
-    };
-    SwitchFirstSubscriber.prototype._complete = function () {
-        this.hasCompleted = true;
-        if (!this.hasSubscription) {
-            this.destination.complete();
-        }
-    };
-    SwitchFirstSubscriber.prototype.notifyComplete = function (innerSub) {
-        this.remove(innerSub);
-        this.hasSubscription = false;
-        if (this.hasCompleted) {
-            this.destination.complete();
-        }
-    };
-    return SwitchFirstSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=exhaust.js.map
-
-
-/***/ }),
-/* 861 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = exhaustMap;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__map__ = __webpack_require__(47);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__observable_from__ = __webpack_require__(62);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_InnerSubscriber,_util_subscribeToResult,_map,_observable_from PURE_IMPORTS_END */
-
-
-
-
-
-
-function exhaustMap(project, resultSelector) {
-    if (resultSelector) {
-        return function (source) { return source.pipe(exhaustMap(function (a, i) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__observable_from__["a" /* from */])(project(a, i)).pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__map__["a" /* map */])(function (b, ii) { return resultSelector(a, b, i, ii); })); })); };
-    }
-    return function (source) {
-        return source.lift(new ExhauseMapOperator(project));
-    };
-}
-var ExhauseMapOperator = /*@__PURE__*/ (function () {
-    function ExhauseMapOperator(project) {
-        this.project = project;
-    }
-    ExhauseMapOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ExhaustMapSubscriber(subscriber, this.project));
-    };
-    return ExhauseMapOperator;
-}());
-var ExhaustMapSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ExhaustMapSubscriber, _super);
-    function ExhaustMapSubscriber(destination, project) {
-        var _this = _super.call(this, destination) || this;
-        _this.project = project;
-        _this.hasSubscription = false;
-        _this.hasCompleted = false;
-        _this.index = 0;
-        return _this;
-    }
-    ExhaustMapSubscriber.prototype._next = function (value) {
-        if (!this.hasSubscription) {
-            this.tryNext(value);
-        }
-    };
-    ExhaustMapSubscriber.prototype.tryNext = function (value) {
-        var result;
-        var index = this.index++;
-        try {
-            result = this.project(value, index);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.hasSubscription = true;
-        this._innerSub(result, value, index);
-    };
-    ExhaustMapSubscriber.prototype._innerSub = function (result, value, index) {
-        var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__["a" /* InnerSubscriber */](this, undefined, undefined);
-        var destination = this.destination;
-        destination.add(innerSubscriber);
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__["a" /* subscribeToResult */])(this, result, value, index, innerSubscriber);
-    };
-    ExhaustMapSubscriber.prototype._complete = function () {
-        this.hasCompleted = true;
-        if (!this.hasSubscription) {
-            this.destination.complete();
-        }
-        this.unsubscribe();
-    };
-    ExhaustMapSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.destination.next(innerValue);
-    };
-    ExhaustMapSubscriber.prototype.notifyError = function (err) {
-        this.destination.error(err);
-    };
-    ExhaustMapSubscriber.prototype.notifyComplete = function (innerSub) {
-        var destination = this.destination;
-        destination.remove(innerSub);
-        this.hasSubscription = false;
-        if (this.hasCompleted) {
-            this.destination.complete();
-        }
-    };
-    return ExhaustMapSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=exhaustMap.js.map
-
-
-/***/ }),
-/* 862 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = expand;
-/* unused harmony export ExpandOperator */
-/* unused harmony export ExpandSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-function expand(project, concurrent, scheduler) {
-    if (concurrent === void 0) {
-        concurrent = Number.POSITIVE_INFINITY;
-    }
-    if (scheduler === void 0) {
-        scheduler = undefined;
-    }
-    concurrent = (concurrent || 0) < 1 ? Number.POSITIVE_INFINITY : concurrent;
-    return function (source) { return source.lift(new ExpandOperator(project, concurrent, scheduler)); };
-}
-var ExpandOperator = /*@__PURE__*/ (function () {
-    function ExpandOperator(project, concurrent, scheduler) {
-        this.project = project;
-        this.concurrent = concurrent;
-        this.scheduler = scheduler;
-    }
-    ExpandOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ExpandSubscriber(subscriber, this.project, this.concurrent, this.scheduler));
-    };
-    return ExpandOperator;
-}());
-
-var ExpandSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ExpandSubscriber, _super);
-    function ExpandSubscriber(destination, project, concurrent, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.project = project;
-        _this.concurrent = concurrent;
-        _this.scheduler = scheduler;
-        _this.index = 0;
-        _this.active = 0;
-        _this.hasCompleted = false;
-        if (concurrent < Number.POSITIVE_INFINITY) {
-            _this.buffer = [];
-        }
-        return _this;
-    }
-    ExpandSubscriber.dispatch = function (arg) {
-        var subscriber = arg.subscriber, result = arg.result, value = arg.value, index = arg.index;
-        subscriber.subscribeToProjection(result, value, index);
-    };
-    ExpandSubscriber.prototype._next = function (value) {
-        var destination = this.destination;
-        if (destination.closed) {
-            this._complete();
-            return;
-        }
-        var index = this.index++;
-        if (this.active < this.concurrent) {
-            destination.next(value);
-            var result = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_tryCatch__["a" /* tryCatch */])(this.project)(value, index);
-            if (result === __WEBPACK_IMPORTED_MODULE_2__util_errorObject__["a" /* errorObject */]) {
-                destination.error(__WEBPACK_IMPORTED_MODULE_2__util_errorObject__["a" /* errorObject */].e);
-            }
-            else if (!this.scheduler) {
-                this.subscribeToProjection(result, value, index);
-            }
-            else {
-                var state = { subscriber: this, result: result, value: value, index: index };
-                var destination_1 = this.destination;
-                destination_1.add(this.scheduler.schedule(ExpandSubscriber.dispatch, 0, state));
-            }
-        }
-        else {
-            this.buffer.push(value);
-        }
-    };
-    ExpandSubscriber.prototype.subscribeToProjection = function (result, value, index) {
-        this.active++;
-        var destination = this.destination;
-        destination.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_subscribeToResult__["a" /* subscribeToResult */])(this, result, value, index));
-    };
-    ExpandSubscriber.prototype._complete = function () {
-        this.hasCompleted = true;
-        if (this.hasCompleted && this.active === 0) {
-            this.destination.complete();
-        }
-        this.unsubscribe();
-    };
-    ExpandSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this._next(innerValue);
-    };
-    ExpandSubscriber.prototype.notifyComplete = function (innerSub) {
-        var buffer = this.buffer;
-        var destination = this.destination;
-        destination.remove(innerSub);
-        this.active--;
-        if (buffer && buffer.length > 0) {
-            this._next(buffer.shift());
-        }
-        if (this.hasCompleted && this.active === 0) {
-            this.destination.complete();
-        }
-    };
-    return ExpandSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-
-//# sourceMappingURL=expand.js.map
-
-
-/***/ }),
-/* 863 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = finalize;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscription__ = __webpack_require__(25);
-/** PURE_IMPORTS_START tslib,_Subscriber,_Subscription PURE_IMPORTS_END */
-
-
-
-function finalize(callback) {
-    return function (source) { return source.lift(new FinallyOperator(callback)); };
-}
-var FinallyOperator = /*@__PURE__*/ (function () {
-    function FinallyOperator(callback) {
-        this.callback = callback;
-    }
-    FinallyOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new FinallySubscriber(subscriber, this.callback));
-    };
-    return FinallyOperator;
-}());
-var FinallySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](FinallySubscriber, _super);
-    function FinallySubscriber(destination, callback) {
-        var _this = _super.call(this, destination) || this;
-        _this.add(new __WEBPACK_IMPORTED_MODULE_2__Subscription__["a" /* Subscription */](callback));
-        return _this;
-    }
-    return FinallySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=finalize.js.map
-
-
-/***/ }),
-/* 864 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = findIndex;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__operators_find__ = __webpack_require__(432);
-/** PURE_IMPORTS_START _operators_find PURE_IMPORTS_END */
-
-function findIndex(predicate, thisArg) {
-    return function (source) { return source.lift(new __WEBPACK_IMPORTED_MODULE_0__operators_find__["b" /* FindValueOperator */](predicate, source, true, thisArg)); };
-}
-//# sourceMappingURL=findIndex.js.map
-
-
-/***/ }),
-/* 865 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = first;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_EmptyError__ = __webpack_require__(153);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__filter__ = __webpack_require__(147);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__take__ = __webpack_require__(319);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__defaultIfEmpty__ = __webpack_require__(146);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__throwIfEmpty__ = __webpack_require__(188);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_identity__ = __webpack_require__(118);
-/** PURE_IMPORTS_START _util_EmptyError,_filter,_take,_defaultIfEmpty,_throwIfEmpty,_util_identity PURE_IMPORTS_END */
-
-
-
-
-
-
-function first(predicate, defaultValue) {
-    var hasDefaultValue = arguments.length >= 2;
-    return function (source) { return source.pipe(predicate ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__filter__["a" /* filter */])(function (v, i) { return predicate(v, i, source); }) : __WEBPACK_IMPORTED_MODULE_5__util_identity__["a" /* identity */], __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__take__["a" /* take */])(1), hasDefaultValue ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__defaultIfEmpty__["a" /* defaultIfEmpty */])(defaultValue) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__throwIfEmpty__["a" /* throwIfEmpty */])(function () { return new __WEBPACK_IMPORTED_MODULE_0__util_EmptyError__["a" /* EmptyError */](); })); };
-}
-//# sourceMappingURL=first.js.map
-
-
-/***/ }),
-/* 866 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = ignoreElements;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function ignoreElements() {
-    return function ignoreElementsOperatorFunction(source) {
-        return source.lift(new IgnoreElementsOperator());
-    };
-}
-var IgnoreElementsOperator = /*@__PURE__*/ (function () {
-    function IgnoreElementsOperator() {
-    }
-    IgnoreElementsOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new IgnoreElementsSubscriber(subscriber));
-    };
-    return IgnoreElementsOperator;
-}());
-var IgnoreElementsSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](IgnoreElementsSubscriber, _super);
-    function IgnoreElementsSubscriber() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    IgnoreElementsSubscriber.prototype._next = function (unused) {
-    };
-    return IgnoreElementsSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=ignoreElements.js.map
-
-
-/***/ }),
-/* 867 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isEmpty;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function isEmpty() {
-    return function (source) { return source.lift(new IsEmptyOperator()); };
-}
-var IsEmptyOperator = /*@__PURE__*/ (function () {
-    function IsEmptyOperator() {
-    }
-    IsEmptyOperator.prototype.call = function (observer, source) {
-        return source.subscribe(new IsEmptySubscriber(observer));
-    };
-    return IsEmptyOperator;
-}());
-var IsEmptySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](IsEmptySubscriber, _super);
-    function IsEmptySubscriber(destination) {
-        return _super.call(this, destination) || this;
-    }
-    IsEmptySubscriber.prototype.notifyComplete = function (isEmpty) {
-        var destination = this.destination;
-        destination.next(isEmpty);
-        destination.complete();
-    };
-    IsEmptySubscriber.prototype._next = function (value) {
-        this.notifyComplete(false);
-    };
-    IsEmptySubscriber.prototype._complete = function () {
-        this.notifyComplete(true);
-    };
-    return IsEmptySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=isEmpty.js.map
-
-
-/***/ }),
-/* 868 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = last;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_EmptyError__ = __webpack_require__(153);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__filter__ = __webpack_require__(147);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__takeLast__ = __webpack_require__(320);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__throwIfEmpty__ = __webpack_require__(188);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__defaultIfEmpty__ = __webpack_require__(146);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_identity__ = __webpack_require__(118);
-/** PURE_IMPORTS_START _util_EmptyError,_filter,_takeLast,_throwIfEmpty,_defaultIfEmpty,_util_identity PURE_IMPORTS_END */
-
-
-
-
-
-
-function last(predicate, defaultValue) {
-    var hasDefaultValue = arguments.length >= 2;
-    return function (source) { return source.pipe(predicate ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__filter__["a" /* filter */])(function (v, i) { return predicate(v, i, source); }) : __WEBPACK_IMPORTED_MODULE_5__util_identity__["a" /* identity */], __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__takeLast__["a" /* takeLast */])(1), hasDefaultValue ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__defaultIfEmpty__["a" /* defaultIfEmpty */])(defaultValue) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__throwIfEmpty__["a" /* throwIfEmpty */])(function () { return new __WEBPACK_IMPORTED_MODULE_0__util_EmptyError__["a" /* EmptyError */](); })); };
-}
-//# sourceMappingURL=last.js.map
-
-
-/***/ }),
-/* 869 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = mapTo;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function mapTo(value) {
-    return function (source) { return source.lift(new MapToOperator(value)); };
-}
-var MapToOperator = /*@__PURE__*/ (function () {
-    function MapToOperator(value) {
-        this.value = value;
-    }
-    MapToOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new MapToSubscriber(subscriber, this.value));
-    };
-    return MapToOperator;
-}());
-var MapToSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](MapToSubscriber, _super);
-    function MapToSubscriber(destination, value) {
-        var _this = _super.call(this, destination) || this;
-        _this.value = value;
-        return _this;
-    }
-    MapToSubscriber.prototype._next = function (x) {
-        this.destination.next(this.value);
-    };
-    return MapToSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=mapTo.js.map
-
-
-/***/ }),
-/* 870 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = materialize;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Notification__ = __webpack_require__(184);
-/** PURE_IMPORTS_START tslib,_Subscriber,_Notification PURE_IMPORTS_END */
-
-
-
-function materialize() {
-    return function materializeOperatorFunction(source) {
-        return source.lift(new MaterializeOperator());
-    };
-}
-var MaterializeOperator = /*@__PURE__*/ (function () {
-    function MaterializeOperator() {
-    }
-    MaterializeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new MaterializeSubscriber(subscriber));
-    };
-    return MaterializeOperator;
-}());
-var MaterializeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](MaterializeSubscriber, _super);
-    function MaterializeSubscriber(destination) {
-        return _super.call(this, destination) || this;
-    }
-    MaterializeSubscriber.prototype._next = function (value) {
-        this.destination.next(__WEBPACK_IMPORTED_MODULE_2__Notification__["a" /* Notification */].createNext(value));
-    };
-    MaterializeSubscriber.prototype._error = function (err) {
-        var destination = this.destination;
-        destination.next(__WEBPACK_IMPORTED_MODULE_2__Notification__["a" /* Notification */].createError(err));
-        destination.complete();
-    };
-    MaterializeSubscriber.prototype._complete = function () {
-        var destination = this.destination;
-        destination.next(__WEBPACK_IMPORTED_MODULE_2__Notification__["a" /* Notification */].createComplete());
-        destination.complete();
-    };
-    return MaterializeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=materialize.js.map
-
-
-/***/ }),
-/* 871 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = max;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__reduce__ = __webpack_require__(187);
-/** PURE_IMPORTS_START _reduce PURE_IMPORTS_END */
-
-function max(comparer) {
-    var max = (typeof comparer === 'function')
-        ? function (x, y) { return comparer(x, y) > 0 ? x : y; }
-        : function (x, y) { return x > y ? x : y; };
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__reduce__["a" /* reduce */])(max);
-}
-//# sourceMappingURL=max.js.map
-
-
-/***/ }),
-/* 872 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = merge;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_merge__ = __webpack_require__(424);
-/** PURE_IMPORTS_START _observable_merge PURE_IMPORTS_END */
-
-function merge() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    return function (source) { return source.lift.call(__WEBPACK_IMPORTED_MODULE_0__observable_merge__["a" /* merge */].apply(void 0, [source].concat(observables))); };
-}
-//# sourceMappingURL=merge.js.map
-
-
-/***/ }),
-/* 873 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = mergeMapTo;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__mergeMap__ = __webpack_require__(148);
-/** PURE_IMPORTS_START _mergeMap PURE_IMPORTS_END */
-
-function mergeMapTo(innerObservable, resultSelector, concurrent) {
-    if (concurrent === void 0) {
-        concurrent = Number.POSITIVE_INFINITY;
-    }
-    if (typeof resultSelector === 'function') {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__mergeMap__["a" /* mergeMap */])(function () { return innerObservable; }, resultSelector, concurrent);
-    }
-    if (typeof resultSelector === 'number') {
-        concurrent = resultSelector;
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__mergeMap__["a" /* mergeMap */])(function () { return innerObservable; }, concurrent);
-}
-//# sourceMappingURL=mergeMapTo.js.map
-
-
-/***/ }),
-/* 874 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = mergeScan;
-/* unused harmony export MergeScanOperator */
-/* unused harmony export MergeScanSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__ = __webpack_require__(14);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__InnerSubscriber__ = __webpack_require__(84);
-/** PURE_IMPORTS_START tslib,_util_tryCatch,_util_errorObject,_util_subscribeToResult,_OuterSubscriber,_InnerSubscriber PURE_IMPORTS_END */
-
-
-
-
-
-
-function mergeScan(accumulator, seed, concurrent) {
-    if (concurrent === void 0) {
-        concurrent = Number.POSITIVE_INFINITY;
-    }
-    return function (source) { return source.lift(new MergeScanOperator(accumulator, seed, concurrent)); };
-}
-var MergeScanOperator = /*@__PURE__*/ (function () {
-    function MergeScanOperator(accumulator, seed, concurrent) {
-        this.accumulator = accumulator;
-        this.seed = seed;
-        this.concurrent = concurrent;
-    }
-    MergeScanOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new MergeScanSubscriber(subscriber, this.accumulator, this.seed, this.concurrent));
-    };
-    return MergeScanOperator;
-}());
-
-var MergeScanSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](MergeScanSubscriber, _super);
-    function MergeScanSubscriber(destination, accumulator, acc, concurrent) {
-        var _this = _super.call(this, destination) || this;
-        _this.accumulator = accumulator;
-        _this.acc = acc;
-        _this.concurrent = concurrent;
-        _this.hasValue = false;
-        _this.hasCompleted = false;
-        _this.buffer = [];
-        _this.active = 0;
-        _this.index = 0;
-        return _this;
-    }
-    MergeScanSubscriber.prototype._next = function (value) {
-        if (this.active < this.concurrent) {
-            var index = this.index++;
-            var ish = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__util_tryCatch__["a" /* tryCatch */])(this.accumulator)(this.acc, value);
-            var destination = this.destination;
-            if (ish === __WEBPACK_IMPORTED_MODULE_2__util_errorObject__["a" /* errorObject */]) {
-                destination.error(__WEBPACK_IMPORTED_MODULE_2__util_errorObject__["a" /* errorObject */].e);
-            }
-            else {
-                this.active++;
-                this._innerSub(ish, value, index);
-            }
-        }
-        else {
-            this.buffer.push(value);
-        }
-    };
-    MergeScanSubscriber.prototype._innerSub = function (ish, value, index) {
-        var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_5__InnerSubscriber__["a" /* InnerSubscriber */](this, undefined, undefined);
-        var destination = this.destination;
-        destination.add(innerSubscriber);
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__["a" /* subscribeToResult */])(this, ish, value, index, innerSubscriber);
-    };
-    MergeScanSubscriber.prototype._complete = function () {
-        this.hasCompleted = true;
-        if (this.active === 0 && this.buffer.length === 0) {
-            if (this.hasValue === false) {
-                this.destination.next(this.acc);
-            }
-            this.destination.complete();
-        }
-        this.unsubscribe();
-    };
-    MergeScanSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        var destination = this.destination;
-        this.acc = innerValue;
-        this.hasValue = true;
-        destination.next(innerValue);
-    };
-    MergeScanSubscriber.prototype.notifyComplete = function (innerSub) {
-        var buffer = this.buffer;
-        var destination = this.destination;
-        destination.remove(innerSub);
-        this.active--;
-        if (buffer.length > 0) {
-            this._next(buffer.shift());
-        }
-        else if (this.active === 0 && this.hasCompleted) {
-            if (this.hasValue === false) {
-                this.destination.next(this.acc);
-            }
-            this.destination.complete();
-        }
-    };
-    return MergeScanSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__["a" /* OuterSubscriber */]));
-
-//# sourceMappingURL=mergeScan.js.map
-
-
-/***/ }),
-/* 875 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = min;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__reduce__ = __webpack_require__(187);
-/** PURE_IMPORTS_START _reduce PURE_IMPORTS_END */
-
-function min(comparer) {
-    var min = (typeof comparer === 'function')
-        ? function (x, y) { return comparer(x, y) < 0 ? x : y; }
-        : function (x, y) { return x < y ? x : y; };
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__reduce__["a" /* reduce */])(min);
-}
-//# sourceMappingURL=min.js.map
-
-
-/***/ }),
-/* 876 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = onErrorResumeNext;
-/* unused harmony export onErrorResumeNextStatic */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__observable_from__ = __webpack_require__(62);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_observable_from,_util_isArray,_OuterSubscriber,_InnerSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-
-function onErrorResumeNext() {
-    var nextSources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        nextSources[_i] = arguments[_i];
-    }
-    if (nextSources.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArray__["a" /* isArray */])(nextSources[0])) {
-        nextSources = nextSources[0];
-    }
-    return function (source) { return source.lift(new OnErrorResumeNextOperator(nextSources)); };
-}
-function onErrorResumeNextStatic() {
-    var nextSources = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        nextSources[_i] = arguments[_i];
-    }
-    var source = null;
-    if (nextSources.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_isArray__["a" /* isArray */])(nextSources[0])) {
-        nextSources = nextSources[0];
-    }
-    source = nextSources.shift();
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__observable_from__["a" /* from */])(source, null).lift(new OnErrorResumeNextOperator(nextSources));
-}
-var OnErrorResumeNextOperator = /*@__PURE__*/ (function () {
-    function OnErrorResumeNextOperator(nextSources) {
-        this.nextSources = nextSources;
-    }
-    OnErrorResumeNextOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new OnErrorResumeNextSubscriber(subscriber, this.nextSources));
-    };
-    return OnErrorResumeNextOperator;
-}());
-var OnErrorResumeNextSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](OnErrorResumeNextSubscriber, _super);
-    function OnErrorResumeNextSubscriber(destination, nextSources) {
-        var _this = _super.call(this, destination) || this;
-        _this.destination = destination;
-        _this.nextSources = nextSources;
-        return _this;
-    }
-    OnErrorResumeNextSubscriber.prototype.notifyError = function (error, innerSub) {
-        this.subscribeToNextSource();
-    };
-    OnErrorResumeNextSubscriber.prototype.notifyComplete = function (innerSub) {
-        this.subscribeToNextSource();
-    };
-    OnErrorResumeNextSubscriber.prototype._error = function (err) {
-        this.subscribeToNextSource();
-        this.unsubscribe();
-    };
-    OnErrorResumeNextSubscriber.prototype._complete = function () {
-        this.subscribeToNextSource();
-        this.unsubscribe();
-    };
-    OnErrorResumeNextSubscriber.prototype.subscribeToNextSource = function () {
-        var next = this.nextSources.shift();
-        if (next) {
-            var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_4__InnerSubscriber__["a" /* InnerSubscriber */](this, undefined, undefined);
-            var destination = this.destination;
-            destination.add(innerSubscriber);
-            __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__["a" /* subscribeToResult */])(this, next, undefined, undefined, innerSubscriber);
-        }
-        else {
-            this.destination.complete();
-        }
-    };
-    return OnErrorResumeNextSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=onErrorResumeNext.js.map
-
-
-/***/ }),
-/* 877 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = pairwise;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function pairwise() {
-    return function (source) { return source.lift(new PairwiseOperator()); };
-}
-var PairwiseOperator = /*@__PURE__*/ (function () {
-    function PairwiseOperator() {
-    }
-    PairwiseOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new PairwiseSubscriber(subscriber));
-    };
-    return PairwiseOperator;
-}());
-var PairwiseSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](PairwiseSubscriber, _super);
-    function PairwiseSubscriber(destination) {
-        var _this = _super.call(this, destination) || this;
-        _this.hasPrev = false;
-        return _this;
-    }
-    PairwiseSubscriber.prototype._next = function (value) {
-        if (this.hasPrev) {
-            this.destination.next([this.prev, value]);
-        }
-        else {
-            this.hasPrev = true;
-        }
-        this.prev = value;
-    };
-    return PairwiseSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=pairwise.js.map
-
-
-/***/ }),
-/* 878 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = partition;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_not__ = __webpack_require__(931);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__filter__ = __webpack_require__(147);
-/** PURE_IMPORTS_START _util_not,_filter PURE_IMPORTS_END */
-
-
-function partition(predicate, thisArg) {
-    return function (source) {
-        return [
-            __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__filter__["a" /* filter */])(predicate, thisArg)(source),
-            __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__filter__["a" /* filter */])(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_not__["a" /* not */])(predicate, thisArg))(source)
-        ];
-    };
-}
-//# sourceMappingURL=partition.js.map
-
-
-/***/ }),
-/* 879 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = pluck;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__map__ = __webpack_require__(47);
-/** PURE_IMPORTS_START _map PURE_IMPORTS_END */
-
-function pluck() {
-    var properties = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        properties[_i] = arguments[_i];
-    }
-    var length = properties.length;
-    if (length === 0) {
-        throw new Error('list of properties cannot be empty.');
-    }
-    return function (source) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__map__["a" /* map */])(plucker(properties, length))(source); };
-}
-function plucker(props, length) {
-    var mapper = function (x) {
-        var currentProp = x;
-        for (var i = 0; i < length; i++) {
-            var p = currentProp[props[i]];
-            if (typeof p !== 'undefined') {
-                currentProp = p;
-            }
-            else {
-                return undefined;
-            }
-        }
-        return currentProp;
-    };
-    return mapper;
-}
-//# sourceMappingURL=pluck.js.map
-
-
-/***/ }),
-/* 880 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = publish;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__multicast__ = __webpack_require__(116);
-/** PURE_IMPORTS_START _Subject,_multicast PURE_IMPORTS_END */
-
-
-function publish(selector) {
-    return selector ?
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__multicast__["a" /* multicast */])(function () { return new __WEBPACK_IMPORTED_MODULE_0__Subject__["a" /* Subject */](); }, selector) :
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__multicast__["a" /* multicast */])(new __WEBPACK_IMPORTED_MODULE_0__Subject__["a" /* Subject */]());
-}
-//# sourceMappingURL=publish.js.map
-
-
-/***/ }),
-/* 881 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = publishBehavior;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__BehaviorSubject__ = __webpack_require__(419);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__multicast__ = __webpack_require__(116);
-/** PURE_IMPORTS_START _BehaviorSubject,_multicast PURE_IMPORTS_END */
-
-
-function publishBehavior(value) {
-    return function (source) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__multicast__["a" /* multicast */])(new __WEBPACK_IMPORTED_MODULE_0__BehaviorSubject__["a" /* BehaviorSubject */](value))(source); };
-}
-//# sourceMappingURL=publishBehavior.js.map
-
-
-/***/ }),
-/* 882 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = publishLast;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__AsyncSubject__ = __webpack_require__(183);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__multicast__ = __webpack_require__(116);
-/** PURE_IMPORTS_START _AsyncSubject,_multicast PURE_IMPORTS_END */
-
-
-function publishLast() {
-    return function (source) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__multicast__["a" /* multicast */])(new __WEBPACK_IMPORTED_MODULE_0__AsyncSubject__["a" /* AsyncSubject */]())(source); };
-}
-//# sourceMappingURL=publishLast.js.map
-
-
-/***/ }),
-/* 883 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = publishReplay;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ReplaySubject__ = __webpack_require__(308);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__multicast__ = __webpack_require__(116);
-/** PURE_IMPORTS_START _ReplaySubject,_multicast PURE_IMPORTS_END */
-
-
-function publishReplay(bufferSize, windowTime, selectorOrScheduler, scheduler) {
-    if (selectorOrScheduler && typeof selectorOrScheduler !== 'function') {
-        scheduler = selectorOrScheduler;
-    }
-    var selector = typeof selectorOrScheduler === 'function' ? selectorOrScheduler : undefined;
-    var subject = new __WEBPACK_IMPORTED_MODULE_0__ReplaySubject__["a" /* ReplaySubject */](bufferSize, windowTime, scheduler);
-    return function (source) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__multicast__["a" /* multicast */])(function () { return subject; }, selector)(source); };
-}
-//# sourceMappingURL=publishReplay.js.map
-
-
-/***/ }),
-/* 884 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = race;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__util_isArray__ = __webpack_require__(41);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__observable_race__ = __webpack_require__(426);
-/** PURE_IMPORTS_START _util_isArray,_observable_race PURE_IMPORTS_END */
-
-
-function race() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    return function raceOperatorFunction(source) {
-        if (observables.length === 1 && __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__util_isArray__["a" /* isArray */])(observables[0])) {
-            observables = observables[0];
-        }
-        return source.lift.call(__WEBPACK_IMPORTED_MODULE_1__observable_race__["a" /* race */].apply(void 0, [source].concat(observables)));
-    };
-}
-//# sourceMappingURL=race.js.map
-
-
-/***/ }),
-/* 885 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = repeat;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_empty__ = __webpack_require__(39);
-/** PURE_IMPORTS_START tslib,_Subscriber,_observable_empty PURE_IMPORTS_END */
-
-
-
-function repeat(count) {
-    if (count === void 0) {
-        count = -1;
-    }
-    return function (source) {
-        if (count === 0) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_empty__["a" /* empty */])();
-        }
-        else if (count < 0) {
-            return source.lift(new RepeatOperator(-1, source));
-        }
-        else {
-            return source.lift(new RepeatOperator(count - 1, source));
-        }
-    };
-}
-var RepeatOperator = /*@__PURE__*/ (function () {
-    function RepeatOperator(count, source) {
-        this.count = count;
-        this.source = source;
-    }
-    RepeatOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new RepeatSubscriber(subscriber, this.count, this.source));
-    };
-    return RepeatOperator;
-}());
-var RepeatSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RepeatSubscriber, _super);
-    function RepeatSubscriber(destination, count, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.count = count;
-        _this.source = source;
-        return _this;
-    }
-    RepeatSubscriber.prototype.complete = function () {
-        if (!this.isStopped) {
-            var _a = this, source = _a.source, count = _a.count;
-            if (count === 0) {
-                return _super.prototype.complete.call(this);
-            }
-            else if (count > -1) {
-                this.count = count - 1;
-            }
-            source.subscribe(this._unsubscribeAndRecycle());
-        }
-    };
-    return RepeatSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=repeat.js.map
-
-
-/***/ }),
-/* 886 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = repeatWhen;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subject,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-
-function repeatWhen(notifier) {
-    return function (source) { return source.lift(new RepeatWhenOperator(notifier)); };
-}
-var RepeatWhenOperator = /*@__PURE__*/ (function () {
-    function RepeatWhenOperator(notifier) {
-        this.notifier = notifier;
-    }
-    RepeatWhenOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new RepeatWhenSubscriber(subscriber, this.notifier, source));
-    };
-    return RepeatWhenOperator;
-}());
-var RepeatWhenSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RepeatWhenSubscriber, _super);
-    function RepeatWhenSubscriber(destination, notifier, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.notifier = notifier;
-        _this.source = source;
-        _this.sourceIsBeingSubscribedTo = true;
-        return _this;
-    }
-    RepeatWhenSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.sourceIsBeingSubscribedTo = true;
-        this.source.subscribe(this);
-    };
-    RepeatWhenSubscriber.prototype.notifyComplete = function (innerSub) {
-        if (this.sourceIsBeingSubscribedTo === false) {
-            return _super.prototype.complete.call(this);
-        }
-    };
-    RepeatWhenSubscriber.prototype.complete = function () {
-        this.sourceIsBeingSubscribedTo = false;
-        if (!this.isStopped) {
-            if (!this.retries) {
-                this.subscribeToRetries();
-            }
-            if (!this.retriesSubscription || this.retriesSubscription.closed) {
-                return _super.prototype.complete.call(this);
-            }
-            this._unsubscribeAndRecycle();
-            this.notifications.next();
-        }
-    };
-    RepeatWhenSubscriber.prototype._unsubscribe = function () {
-        var _a = this, notifications = _a.notifications, retriesSubscription = _a.retriesSubscription;
-        if (notifications) {
-            notifications.unsubscribe();
-            this.notifications = null;
-        }
-        if (retriesSubscription) {
-            retriesSubscription.unsubscribe();
-            this.retriesSubscription = null;
-        }
-        this.retries = null;
-    };
-    RepeatWhenSubscriber.prototype._unsubscribeAndRecycle = function () {
-        var _unsubscribe = this._unsubscribe;
-        this._unsubscribe = null;
-        _super.prototype._unsubscribeAndRecycle.call(this);
-        this._unsubscribe = _unsubscribe;
-        return this;
-    };
-    RepeatWhenSubscriber.prototype.subscribeToRetries = function () {
-        this.notifications = new __WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]();
-        var retries = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(this.notifier)(this.notifications);
-        if (retries === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-            return _super.prototype.complete.call(this);
-        }
-        this.retries = retries;
-        this.retriesSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__["a" /* subscribeToResult */])(this, retries);
-    };
-    return RepeatWhenSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=repeatWhen.js.map
-
-
-/***/ }),
-/* 887 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = retry;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function retry(count) {
-    if (count === void 0) {
-        count = -1;
-    }
-    return function (source) { return source.lift(new RetryOperator(count, source)); };
-}
-var RetryOperator = /*@__PURE__*/ (function () {
-    function RetryOperator(count, source) {
-        this.count = count;
-        this.source = source;
-    }
-    RetryOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new RetrySubscriber(subscriber, this.count, this.source));
-    };
-    return RetryOperator;
-}());
-var RetrySubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RetrySubscriber, _super);
-    function RetrySubscriber(destination, count, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.count = count;
-        _this.source = source;
-        return _this;
-    }
-    RetrySubscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            var _a = this, source = _a.source, count = _a.count;
-            if (count === 0) {
-                return _super.prototype.error.call(this, err);
-            }
-            else if (count > -1) {
-                this.count = count - 1;
-            }
-            source.subscribe(this._unsubscribeAndRecycle());
-        }
-    };
-    return RetrySubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=retry.js.map
-
-
-/***/ }),
-/* 888 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = retryWhen;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subject,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-
-function retryWhen(notifier) {
-    return function (source) { return source.lift(new RetryWhenOperator(notifier, source)); };
-}
-var RetryWhenOperator = /*@__PURE__*/ (function () {
-    function RetryWhenOperator(notifier, source) {
-        this.notifier = notifier;
-        this.source = source;
-    }
-    RetryWhenOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new RetryWhenSubscriber(subscriber, this.notifier, this.source));
-    };
-    return RetryWhenOperator;
-}());
-var RetryWhenSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](RetryWhenSubscriber, _super);
-    function RetryWhenSubscriber(destination, notifier, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.notifier = notifier;
-        _this.source = source;
-        return _this;
-    }
-    RetryWhenSubscriber.prototype.error = function (err) {
-        if (!this.isStopped) {
-            var errors = this.errors;
-            var retries = this.retries;
-            var retriesSubscription = this.retriesSubscription;
-            if (!retries) {
-                errors = new __WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]();
-                retries = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(this.notifier)(errors);
-                if (retries === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-                    return _super.prototype.error.call(this, __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */].e);
-                }
-                retriesSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__["a" /* subscribeToResult */])(this, retries);
-            }
-            else {
-                this.errors = null;
-                this.retriesSubscription = null;
-            }
-            this._unsubscribeAndRecycle();
-            this.errors = errors;
-            this.retries = retries;
-            this.retriesSubscription = retriesSubscription;
-            errors.next(err);
-        }
-    };
-    RetryWhenSubscriber.prototype._unsubscribe = function () {
-        var _a = this, errors = _a.errors, retriesSubscription = _a.retriesSubscription;
-        if (errors) {
-            errors.unsubscribe();
-            this.errors = null;
-        }
-        if (retriesSubscription) {
-            retriesSubscription.unsubscribe();
-            this.retriesSubscription = null;
-        }
-        this.retries = null;
-    };
-    RetryWhenSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        var _unsubscribe = this._unsubscribe;
-        this._unsubscribe = null;
-        this._unsubscribeAndRecycle();
-        this._unsubscribe = _unsubscribe;
-        this.source.subscribe(this);
-    };
-    return RetryWhenSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=retryWhen.js.map
-
-
-/***/ }),
-/* 889 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = sample;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function sample(notifier) {
-    return function (source) { return source.lift(new SampleOperator(notifier)); };
-}
-var SampleOperator = /*@__PURE__*/ (function () {
-    function SampleOperator(notifier) {
-        this.notifier = notifier;
-    }
-    SampleOperator.prototype.call = function (subscriber, source) {
-        var sampleSubscriber = new SampleSubscriber(subscriber);
-        var subscription = source.subscribe(sampleSubscriber);
-        subscription.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(sampleSubscriber, this.notifier));
-        return subscription;
-    };
-    return SampleOperator;
-}());
-var SampleSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SampleSubscriber, _super);
-    function SampleSubscriber() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.hasValue = false;
-        return _this;
-    }
-    SampleSubscriber.prototype._next = function (value) {
-        this.value = value;
-        this.hasValue = true;
-    };
-    SampleSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.emitValue();
-    };
-    SampleSubscriber.prototype.notifyComplete = function () {
-        this.emitValue();
-    };
-    SampleSubscriber.prototype.emitValue = function () {
-        if (this.hasValue) {
-            this.hasValue = false;
-            this.destination.next(this.value);
-        }
-    };
-    return SampleSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=sample.js.map
-
-
-/***/ }),
-/* 890 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = sampleTime;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__scheduler_async__ = __webpack_require__(40);
-/** PURE_IMPORTS_START tslib,_Subscriber,_scheduler_async PURE_IMPORTS_END */
-
-
-
-function sampleTime(period, scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_async__["a" /* async */];
-    }
-    return function (source) { return source.lift(new SampleTimeOperator(period, scheduler)); };
-}
-var SampleTimeOperator = /*@__PURE__*/ (function () {
-    function SampleTimeOperator(period, scheduler) {
-        this.period = period;
-        this.scheduler = scheduler;
-    }
-    SampleTimeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SampleTimeSubscriber(subscriber, this.period, this.scheduler));
-    };
-    return SampleTimeOperator;
-}());
-var SampleTimeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SampleTimeSubscriber, _super);
-    function SampleTimeSubscriber(destination, period, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.period = period;
-        _this.scheduler = scheduler;
-        _this.hasValue = false;
-        _this.add(scheduler.schedule(dispatchNotification, period, { subscriber: _this, period: period }));
-        return _this;
-    }
-    SampleTimeSubscriber.prototype._next = function (value) {
-        this.lastValue = value;
-        this.hasValue = true;
-    };
-    SampleTimeSubscriber.prototype.notifyNext = function () {
-        if (this.hasValue) {
-            this.hasValue = false;
-            this.destination.next(this.lastValue);
-        }
-    };
-    return SampleTimeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-function dispatchNotification(state) {
-    var subscriber = state.subscriber, period = state.period;
-    subscriber.notifyNext();
-    this.schedule(state, period);
-}
-//# sourceMappingURL=sampleTime.js.map
-
-
-/***/ }),
-/* 891 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = sequenceEqual;
-/* unused harmony export SequenceEqualOperator */
-/* unused harmony export SequenceEqualSubscriber */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_errorObject__ = __webpack_require__(48);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_tryCatch,_util_errorObject PURE_IMPORTS_END */
-
-
-
-
-function sequenceEqual(compareTo, comparor) {
-    return function (source) { return source.lift(new SequenceEqualOperator(compareTo, comparor)); };
-}
-var SequenceEqualOperator = /*@__PURE__*/ (function () {
-    function SequenceEqualOperator(compareTo, comparor) {
-        this.compareTo = compareTo;
-        this.comparor = comparor;
-    }
-    SequenceEqualOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SequenceEqualSubscriber(subscriber, this.compareTo, this.comparor));
-    };
-    return SequenceEqualOperator;
-}());
-
-var SequenceEqualSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SequenceEqualSubscriber, _super);
-    function SequenceEqualSubscriber(destination, compareTo, comparor) {
-        var _this = _super.call(this, destination) || this;
-        _this.compareTo = compareTo;
-        _this.comparor = comparor;
-        _this._a = [];
-        _this._b = [];
-        _this._oneComplete = false;
-        _this.destination.add(compareTo.subscribe(new SequenceEqualCompareToSubscriber(destination, _this)));
-        return _this;
-    }
-    SequenceEqualSubscriber.prototype._next = function (value) {
-        if (this._oneComplete && this._b.length === 0) {
-            this.emit(false);
-        }
-        else {
-            this._a.push(value);
-            this.checkValues();
-        }
-    };
-    SequenceEqualSubscriber.prototype._complete = function () {
-        if (this._oneComplete) {
-            this.emit(this._a.length === 0 && this._b.length === 0);
-        }
-        else {
-            this._oneComplete = true;
-        }
-        this.unsubscribe();
-    };
-    SequenceEqualSubscriber.prototype.checkValues = function () {
-        var _c = this, _a = _c._a, _b = _c._b, comparor = _c.comparor;
-        while (_a.length > 0 && _b.length > 0) {
-            var a = _a.shift();
-            var b = _b.shift();
-            var areEqual = false;
-            if (comparor) {
-                areEqual = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(comparor)(a, b);
-                if (areEqual === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-                    this.destination.error(__WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */].e);
-                }
-            }
-            else {
-                areEqual = a === b;
-            }
-            if (!areEqual) {
-                this.emit(false);
-            }
-        }
-    };
-    SequenceEqualSubscriber.prototype.emit = function (value) {
-        var destination = this.destination;
-        destination.next(value);
-        destination.complete();
-    };
-    SequenceEqualSubscriber.prototype.nextB = function (value) {
-        if (this._oneComplete && this._a.length === 0) {
-            this.emit(false);
-        }
-        else {
-            this._b.push(value);
-            this.checkValues();
-        }
-    };
-    SequenceEqualSubscriber.prototype.completeB = function () {
-        if (this._oneComplete) {
-            this.emit(this._a.length === 0 && this._b.length === 0);
-        }
-        else {
-            this._oneComplete = true;
-        }
-    };
-    return SequenceEqualSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-
-var SequenceEqualCompareToSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SequenceEqualCompareToSubscriber, _super);
-    function SequenceEqualCompareToSubscriber(destination, parent) {
-        var _this = _super.call(this, destination) || this;
-        _this.parent = parent;
-        return _this;
-    }
-    SequenceEqualCompareToSubscriber.prototype._next = function (value) {
-        this.parent.nextB(value);
-    };
-    SequenceEqualCompareToSubscriber.prototype._error = function (err) {
-        this.parent.error(err);
-        this.unsubscribe();
-    };
-    SequenceEqualCompareToSubscriber.prototype._complete = function () {
-        this.parent.completeB();
-        this.unsubscribe();
-    };
-    return SequenceEqualCompareToSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=sequenceEqual.js.map
-
-
-/***/ }),
-/* 892 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = share;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__multicast__ = __webpack_require__(116);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__refCount__ = __webpack_require__(316);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subject__ = __webpack_require__(36);
-/** PURE_IMPORTS_START _multicast,_refCount,_Subject PURE_IMPORTS_END */
-
-
-
-function shareSubjectFactory() {
-    return new __WEBPACK_IMPORTED_MODULE_2__Subject__["a" /* Subject */]();
-}
-function share() {
-    return function (source) { return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__refCount__["a" /* refCount */])()(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__multicast__["a" /* multicast */])(shareSubjectFactory)(source)); };
-}
-//# sourceMappingURL=share.js.map
-
-
-/***/ }),
-/* 893 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = shareReplay;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__ReplaySubject__ = __webpack_require__(308);
-/** PURE_IMPORTS_START _ReplaySubject PURE_IMPORTS_END */
-
-function shareReplay(bufferSize, windowTime, scheduler) {
-    if (bufferSize === void 0) {
-        bufferSize = Number.POSITIVE_INFINITY;
-    }
-    if (windowTime === void 0) {
-        windowTime = Number.POSITIVE_INFINITY;
-    }
-    return function (source) { return source.lift(shareReplayOperator(bufferSize, windowTime, scheduler)); };
-}
-function shareReplayOperator(bufferSize, windowTime, scheduler) {
-    var subject;
-    var refCount = 0;
-    var subscription;
-    var hasError = false;
-    var isComplete = false;
-    return function shareReplayOperation(source) {
-        refCount++;
-        if (!subject || hasError) {
-            hasError = false;
-            subject = new __WEBPACK_IMPORTED_MODULE_0__ReplaySubject__["a" /* ReplaySubject */](bufferSize, windowTime, scheduler);
-            subscription = source.subscribe({
-                next: function (value) { subject.next(value); },
-                error: function (err) {
-                    hasError = true;
-                    subject.error(err);
-                },
-                complete: function () {
-                    isComplete = true;
-                    subject.complete();
-                },
-            });
-        }
-        var innerSub = subject.subscribe(this);
-        return function () {
-            refCount--;
-            innerSub.unsubscribe();
-            if (subscription && refCount === 0 && isComplete) {
-                subscription.unsubscribe();
-            }
-        };
-    };
-}
-//# sourceMappingURL=shareReplay.js.map
-
-
-/***/ }),
-/* 894 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = single;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_EmptyError__ = __webpack_require__(153);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_EmptyError PURE_IMPORTS_END */
-
-
-
-function single(predicate) {
-    return function (source) { return source.lift(new SingleOperator(predicate, source)); };
-}
-var SingleOperator = /*@__PURE__*/ (function () {
-    function SingleOperator(predicate, source) {
-        this.predicate = predicate;
-        this.source = source;
-    }
-    SingleOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SingleSubscriber(subscriber, this.predicate, this.source));
-    };
-    return SingleOperator;
-}());
-var SingleSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SingleSubscriber, _super);
-    function SingleSubscriber(destination, predicate, source) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.source = source;
-        _this.seenValue = false;
-        _this.index = 0;
-        return _this;
-    }
-    SingleSubscriber.prototype.applySingleValue = function (value) {
-        if (this.seenValue) {
-            this.destination.error('Sequence contains more than one element');
-        }
-        else {
-            this.seenValue = true;
-            this.singleValue = value;
-        }
-    };
-    SingleSubscriber.prototype._next = function (value) {
-        var index = this.index++;
-        if (this.predicate) {
-            this.tryNext(value, index);
-        }
-        else {
-            this.applySingleValue(value);
-        }
-    };
-    SingleSubscriber.prototype.tryNext = function (value, index) {
-        try {
-            if (this.predicate(value, index, this.source)) {
-                this.applySingleValue(value);
-            }
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    };
-    SingleSubscriber.prototype._complete = function () {
-        var destination = this.destination;
-        if (this.index > 0) {
-            destination.next(this.seenValue ? this.singleValue : undefined);
-            destination.complete();
-        }
-        else {
-            destination.error(new __WEBPACK_IMPORTED_MODULE_2__util_EmptyError__["a" /* EmptyError */]);
-        }
-    };
-    return SingleSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=single.js.map
-
-
-/***/ }),
-/* 895 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = skip;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function skip(count) {
-    return function (source) { return source.lift(new SkipOperator(count)); };
-}
-var SkipOperator = /*@__PURE__*/ (function () {
-    function SkipOperator(total) {
-        this.total = total;
-    }
-    SkipOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SkipSubscriber(subscriber, this.total));
-    };
-    return SkipOperator;
-}());
-var SkipSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SkipSubscriber, _super);
-    function SkipSubscriber(destination, total) {
-        var _this = _super.call(this, destination) || this;
-        _this.total = total;
-        _this.count = 0;
-        return _this;
-    }
-    SkipSubscriber.prototype._next = function (x) {
-        if (++this.count > this.total) {
-            this.destination.next(x);
-        }
-    };
-    return SkipSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=skip.js.map
-
-
-/***/ }),
-/* 896 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = skipLast;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_ArgumentOutOfRangeError__ = __webpack_require__(152);
-/** PURE_IMPORTS_START tslib,_Subscriber,_util_ArgumentOutOfRangeError PURE_IMPORTS_END */
-
-
-
-function skipLast(count) {
-    return function (source) { return source.lift(new SkipLastOperator(count)); };
-}
-var SkipLastOperator = /*@__PURE__*/ (function () {
-    function SkipLastOperator(_skipCount) {
-        this._skipCount = _skipCount;
-        if (this._skipCount < 0) {
-            throw new __WEBPACK_IMPORTED_MODULE_2__util_ArgumentOutOfRangeError__["a" /* ArgumentOutOfRangeError */];
-        }
-    }
-    SkipLastOperator.prototype.call = function (subscriber, source) {
-        if (this._skipCount === 0) {
-            return source.subscribe(new __WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */](subscriber));
-        }
-        else {
-            return source.subscribe(new SkipLastSubscriber(subscriber, this._skipCount));
-        }
-    };
-    return SkipLastOperator;
-}());
-var SkipLastSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SkipLastSubscriber, _super);
-    function SkipLastSubscriber(destination, _skipCount) {
-        var _this = _super.call(this, destination) || this;
-        _this._skipCount = _skipCount;
-        _this._count = 0;
-        _this._ring = new Array(_skipCount);
-        return _this;
-    }
-    SkipLastSubscriber.prototype._next = function (value) {
-        var skipCount = this._skipCount;
-        var count = this._count++;
-        if (count < skipCount) {
-            this._ring[count] = value;
-        }
-        else {
-            var currentIndex = count % skipCount;
-            var ring = this._ring;
-            var oldValue = ring[currentIndex];
-            ring[currentIndex] = value;
-            this.destination.next(oldValue);
-        }
-    };
-    return SkipLastSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=skipLast.js.map
-
-
-/***/ }),
-/* 897 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = skipUntil;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__ = __webpack_require__(84);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_InnerSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-function skipUntil(notifier) {
-    return function (source) { return source.lift(new SkipUntilOperator(notifier)); };
-}
-var SkipUntilOperator = /*@__PURE__*/ (function () {
-    function SkipUntilOperator(notifier) {
-        this.notifier = notifier;
-    }
-    SkipUntilOperator.prototype.call = function (destination, source) {
-        return source.subscribe(new SkipUntilSubscriber(destination, this.notifier));
-    };
-    return SkipUntilOperator;
-}());
-var SkipUntilSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SkipUntilSubscriber, _super);
-    function SkipUntilSubscriber(destination, notifier) {
-        var _this = _super.call(this, destination) || this;
-        _this.hasValue = false;
-        var innerSubscriber = new __WEBPACK_IMPORTED_MODULE_2__InnerSubscriber__["a" /* InnerSubscriber */](_this, undefined, undefined);
-        _this.add(innerSubscriber);
-        _this.innerSubscription = innerSubscriber;
-        __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__["a" /* subscribeToResult */])(_this, notifier, undefined, undefined, innerSubscriber);
-        return _this;
-    }
-    SkipUntilSubscriber.prototype._next = function (value) {
-        if (this.hasValue) {
-            _super.prototype._next.call(this, value);
-        }
-    };
-    SkipUntilSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.hasValue = true;
-        if (this.innerSubscription) {
-            this.innerSubscription.unsubscribe();
-        }
-    };
-    SkipUntilSubscriber.prototype.notifyComplete = function () {
-    };
-    return SkipUntilSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=skipUntil.js.map
-
-
-/***/ }),
-/* 898 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = skipWhile;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function skipWhile(predicate) {
-    return function (source) { return source.lift(new SkipWhileOperator(predicate)); };
-}
-var SkipWhileOperator = /*@__PURE__*/ (function () {
-    function SkipWhileOperator(predicate) {
-        this.predicate = predicate;
-    }
-    SkipWhileOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new SkipWhileSubscriber(subscriber, this.predicate));
-    };
-    return SkipWhileOperator;
-}());
-var SkipWhileSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](SkipWhileSubscriber, _super);
-    function SkipWhileSubscriber(destination, predicate) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.skipping = true;
-        _this.index = 0;
-        return _this;
-    }
-    SkipWhileSubscriber.prototype._next = function (value) {
-        var destination = this.destination;
-        if (this.skipping) {
-            this.tryCallPredicate(value);
-        }
-        if (!this.skipping) {
-            destination.next(value);
-        }
-    };
-    SkipWhileSubscriber.prototype.tryCallPredicate = function (value) {
-        try {
-            var result = this.predicate(value, this.index++);
-            this.skipping = Boolean(result);
-        }
-        catch (err) {
-            this.destination.error(err);
-        }
-    };
-    return SkipWhileSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=skipWhile.js.map
-
-
-/***/ }),
-/* 899 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = startWith;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_fromArray__ = __webpack_require__(85);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__observable_scalar__ = __webpack_require__(312);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_empty__ = __webpack_require__(39);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__observable_concat__ = __webpack_require__(186);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START _observable_fromArray,_observable_scalar,_observable_empty,_observable_concat,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-
-
-function startWith() {
-    var array = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        array[_i] = arguments[_i];
-    }
-    return function (source) {
-        var scheduler = array[array.length - 1];
-        if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isScheduler__["a" /* isScheduler */])(scheduler)) {
-            array.pop();
-        }
-        else {
-            scheduler = null;
-        }
-        var len = array.length;
-        if (len === 1 && !scheduler) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_concat__["a" /* concat */])(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__observable_scalar__["a" /* scalar */])(array[0]), source);
-        }
-        else if (len > 0) {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_concat__["a" /* concat */])(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__observable_fromArray__["a" /* fromArray */])(array, scheduler), source);
-        }
-        else {
-            return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_concat__["a" /* concat */])(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_empty__["a" /* empty */])(scheduler), source);
-        }
-    };
-}
-//# sourceMappingURL=startWith.js.map
-
-
-/***/ }),
-/* 900 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = subscribeOn;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_SubscribeOnObservable__ = __webpack_require__(822);
-/** PURE_IMPORTS_START _observable_SubscribeOnObservable PURE_IMPORTS_END */
-
-function subscribeOn(scheduler, delay) {
-    if (delay === void 0) {
-        delay = 0;
-    }
-    return function subscribeOnOperatorFunction(source) {
-        return source.lift(new SubscribeOnOperator(scheduler, delay));
-    };
-}
-var SubscribeOnOperator = /*@__PURE__*/ (function () {
-    function SubscribeOnOperator(scheduler, delay) {
-        this.scheduler = scheduler;
-        this.delay = delay;
-    }
-    SubscribeOnOperator.prototype.call = function (subscriber, source) {
-        return new __WEBPACK_IMPORTED_MODULE_0__observable_SubscribeOnObservable__["a" /* SubscribeOnObservable */](source, this.delay, this.scheduler).subscribe(subscriber);
-    };
-    return SubscribeOnOperator;
-}());
-//# sourceMappingURL=subscribeOn.js.map
-
-
-/***/ }),
-/* 901 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = switchAll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__switchMap__ = __webpack_require__(318);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_identity__ = __webpack_require__(118);
-/** PURE_IMPORTS_START _switchMap,_util_identity PURE_IMPORTS_END */
-
-
-function switchAll() {
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__switchMap__["a" /* switchMap */])(__WEBPACK_IMPORTED_MODULE_1__util_identity__["a" /* identity */]);
-}
-//# sourceMappingURL=switchAll.js.map
-
-
-/***/ }),
-/* 902 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = switchMapTo;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__switchMap__ = __webpack_require__(318);
-/** PURE_IMPORTS_START _switchMap PURE_IMPORTS_END */
-
-function switchMapTo(innerObservable, resultSelector) {
-    return resultSelector ? __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__switchMap__["a" /* switchMap */])(function () { return innerObservable; }, resultSelector) : __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__switchMap__["a" /* switchMap */])(function () { return innerObservable; });
-}
-//# sourceMappingURL=switchMapTo.js.map
-
-
-/***/ }),
-/* 903 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = takeUntil;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function takeUntil(notifier) {
-    return function (source) { return source.lift(new TakeUntilOperator(notifier)); };
-}
-var TakeUntilOperator = /*@__PURE__*/ (function () {
-    function TakeUntilOperator(notifier) {
-        this.notifier = notifier;
-    }
-    TakeUntilOperator.prototype.call = function (subscriber, source) {
-        var takeUntilSubscriber = new TakeUntilSubscriber(subscriber);
-        var notifierSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(takeUntilSubscriber, this.notifier);
-        if (notifierSubscription && !takeUntilSubscriber.seenValue) {
-            takeUntilSubscriber.add(notifierSubscription);
-            return source.subscribe(takeUntilSubscriber);
-        }
-        return takeUntilSubscriber;
-    };
-    return TakeUntilOperator;
-}());
-var TakeUntilSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](TakeUntilSubscriber, _super);
-    function TakeUntilSubscriber(destination) {
-        var _this = _super.call(this, destination) || this;
-        _this.seenValue = false;
-        return _this;
-    }
-    TakeUntilSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.seenValue = true;
-        this.complete();
-    };
-    TakeUntilSubscriber.prototype.notifyComplete = function () {
-    };
-    return TakeUntilSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=takeUntil.js.map
-
-
-/***/ }),
-/* 904 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = takeWhile;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/** PURE_IMPORTS_START tslib,_Subscriber PURE_IMPORTS_END */
-
-
-function takeWhile(predicate) {
-    return function (source) { return source.lift(new TakeWhileOperator(predicate)); };
-}
-var TakeWhileOperator = /*@__PURE__*/ (function () {
-    function TakeWhileOperator(predicate) {
-        this.predicate = predicate;
-    }
-    TakeWhileOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new TakeWhileSubscriber(subscriber, this.predicate));
-    };
-    return TakeWhileOperator;
-}());
-var TakeWhileSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](TakeWhileSubscriber, _super);
-    function TakeWhileSubscriber(destination, predicate) {
-        var _this = _super.call(this, destination) || this;
-        _this.predicate = predicate;
-        _this.index = 0;
-        return _this;
-    }
-    TakeWhileSubscriber.prototype._next = function (value) {
-        var destination = this.destination;
-        var result;
-        try {
-            result = this.predicate(value, this.index++);
-        }
-        catch (err) {
-            destination.error(err);
-            return;
-        }
-        this.nextOrComplete(value, result);
-    };
-    TakeWhileSubscriber.prototype.nextOrComplete = function (value, predicateResult) {
-        var destination = this.destination;
-        if (Boolean(predicateResult)) {
-            destination.next(value);
-        }
-        else {
-            destination.complete();
-        }
-    };
-    return TakeWhileSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=takeWhile.js.map
-
-
-/***/ }),
-/* 905 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = throttleTime;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__throttle__ = __webpack_require__(436);
-/** PURE_IMPORTS_START tslib,_Subscriber,_scheduler_async,_throttle PURE_IMPORTS_END */
-
-
-
-
-function throttleTime(duration, scheduler, config) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_async__["a" /* async */];
-    }
-    if (config === void 0) {
-        config = __WEBPACK_IMPORTED_MODULE_3__throttle__["b" /* defaultThrottleConfig */];
-    }
-    return function (source) { return source.lift(new ThrottleTimeOperator(duration, scheduler, config.leading, config.trailing)); };
-}
-var ThrottleTimeOperator = /*@__PURE__*/ (function () {
-    function ThrottleTimeOperator(duration, scheduler, leading, trailing) {
-        this.duration = duration;
-        this.scheduler = scheduler;
-        this.leading = leading;
-        this.trailing = trailing;
-    }
-    ThrottleTimeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new ThrottleTimeSubscriber(subscriber, this.duration, this.scheduler, this.leading, this.trailing));
-    };
-    return ThrottleTimeOperator;
-}());
-var ThrottleTimeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](ThrottleTimeSubscriber, _super);
-    function ThrottleTimeSubscriber(destination, duration, scheduler, leading, trailing) {
-        var _this = _super.call(this, destination) || this;
-        _this.duration = duration;
-        _this.scheduler = scheduler;
-        _this.leading = leading;
-        _this.trailing = trailing;
-        _this._hasTrailingValue = false;
-        _this._trailingValue = null;
-        return _this;
-    }
-    ThrottleTimeSubscriber.prototype._next = function (value) {
-        if (this.throttled) {
-            if (this.trailing) {
-                this._trailingValue = value;
-                this._hasTrailingValue = true;
-            }
-        }
-        else {
-            this.add(this.throttled = this.scheduler.schedule(dispatchNext, this.duration, { subscriber: this }));
-            if (this.leading) {
-                this.destination.next(value);
-            }
-        }
-    };
-    ThrottleTimeSubscriber.prototype._complete = function () {
-        if (this._hasTrailingValue) {
-            this.destination.next(this._trailingValue);
-            this.destination.complete();
-        }
-        else {
-            this.destination.complete();
-        }
-    };
-    ThrottleTimeSubscriber.prototype.clearThrottle = function () {
-        var throttled = this.throttled;
-        if (throttled) {
-            if (this.trailing && this._hasTrailingValue) {
-                this.destination.next(this._trailingValue);
-                this._trailingValue = null;
-                this._hasTrailingValue = false;
-            }
-            throttled.unsubscribe();
-            this.remove(throttled);
-            this.throttled = null;
-        }
-    };
-    return ThrottleTimeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-function dispatchNext(arg) {
-    var subscriber = arg.subscriber;
-    subscriber.clearThrottle();
-}
-//# sourceMappingURL=throttleTime.js.map
-
-
-/***/ }),
-/* 906 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = timeInterval;
-/* unused harmony export TimeInterval */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__scan__ = __webpack_require__(317);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__observable_defer__ = __webpack_require__(310);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__map__ = __webpack_require__(47);
-/** PURE_IMPORTS_START _scheduler_async,_scan,_observable_defer,_map PURE_IMPORTS_END */
-
-
-
-
-function timeInterval(scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_0__scheduler_async__["a" /* async */];
-    }
-    return function (source) {
-        return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__observable_defer__["a" /* defer */])(function () {
-            return source.pipe(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__scan__["a" /* scan */])(function (_a, value) {
-                var current = _a.current;
-                return ({ value: value, current: scheduler.now(), last: current });
-            }, { current: scheduler.now(), value: undefined, last: undefined }), __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__map__["a" /* map */])(function (_a) {
-                var current = _a.current, last = _a.last, value = _a.value;
-                return new TimeInterval(value, current - last);
-            }));
-        });
-    };
-}
-var TimeInterval = /*@__PURE__*/ (function () {
-    function TimeInterval(value, interval) {
-        this.value = value;
-        this.interval = interval;
-    }
-    return TimeInterval;
-}());
-
-//# sourceMappingURL=timeInterval.js.map
-
-
-/***/ }),
-/* 907 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = timeout;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_TimeoutError__ = __webpack_require__(440);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__timeoutWith__ = __webpack_require__(437);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__observable_throwError__ = __webpack_require__(313);
-/** PURE_IMPORTS_START _scheduler_async,_util_TimeoutError,_timeoutWith,_observable_throwError PURE_IMPORTS_END */
-
-
-
-
-function timeout(due, scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_0__scheduler_async__["a" /* async */];
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__timeoutWith__["a" /* timeoutWith */])(due, __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__observable_throwError__["a" /* throwError */])(new __WEBPACK_IMPORTED_MODULE_1__util_TimeoutError__["a" /* TimeoutError */]()), scheduler);
-}
-//# sourceMappingURL=timeout.js.map
-
-
-/***/ }),
-/* 908 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = timestamp;
-/* unused harmony export Timestamp */
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__map__ = __webpack_require__(47);
-/** PURE_IMPORTS_START _scheduler_async,_map PURE_IMPORTS_END */
-
-
-function timestamp(scheduler) {
-    if (scheduler === void 0) {
-        scheduler = __WEBPACK_IMPORTED_MODULE_0__scheduler_async__["a" /* async */];
-    }
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_1__map__["a" /* map */])(function (value) { return new Timestamp(value, scheduler.now()); });
-}
-var Timestamp = /*@__PURE__*/ (function () {
-    function Timestamp(value, timestamp) {
-        this.value = value;
-        this.timestamp = timestamp;
-    }
-    return Timestamp;
-}());
-
-//# sourceMappingURL=timestamp.js.map
-
-
-/***/ }),
-/* 909 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = toArray;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__reduce__ = __webpack_require__(187);
-/** PURE_IMPORTS_START _reduce PURE_IMPORTS_END */
-
-function toArrayReducer(arr, item, index) {
-    if (index === 0) {
-        return [item];
-    }
-    arr.push(item);
-    return arr;
-}
-function toArray() {
-    return __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_0__reduce__["a" /* reduce */])(toArrayReducer, []);
-}
-//# sourceMappingURL=toArray.js.map
-
-
-/***/ }),
-/* 910 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = window;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-function window(windowBoundaries) {
-    return function windowOperatorFunction(source) {
-        return source.lift(new WindowOperator(windowBoundaries));
-    };
-}
-var WindowOperator = /*@__PURE__*/ (function () {
-    function WindowOperator(windowBoundaries) {
-        this.windowBoundaries = windowBoundaries;
-    }
-    WindowOperator.prototype.call = function (subscriber, source) {
-        var windowSubscriber = new WindowSubscriber(subscriber);
-        var sourceSubscription = source.subscribe(windowSubscriber);
-        if (!sourceSubscription.closed) {
-            windowSubscriber.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_subscribeToResult__["a" /* subscribeToResult */])(windowSubscriber, this.windowBoundaries));
-        }
-        return sourceSubscription;
-    };
-    return WindowOperator;
-}());
-var WindowSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](WindowSubscriber, _super);
-    function WindowSubscriber(destination) {
-        var _this = _super.call(this, destination) || this;
-        _this.window = new __WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]();
-        destination.next(_this.window);
-        return _this;
-    }
-    WindowSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.openWindow();
-    };
-    WindowSubscriber.prototype.notifyError = function (error, innerSub) {
-        this._error(error);
-    };
-    WindowSubscriber.prototype.notifyComplete = function (innerSub) {
-        this._complete();
-    };
-    WindowSubscriber.prototype._next = function (value) {
-        this.window.next(value);
-    };
-    WindowSubscriber.prototype._error = function (err) {
-        this.window.error(err);
-        this.destination.error(err);
-    };
-    WindowSubscriber.prototype._complete = function () {
-        this.window.complete();
-        this.destination.complete();
-    };
-    WindowSubscriber.prototype._unsubscribe = function () {
-        this.window = null;
-    };
-    WindowSubscriber.prototype.openWindow = function () {
-        var prevWindow = this.window;
-        if (prevWindow) {
-            prevWindow.complete();
-        }
-        var destination = this.destination;
-        var newWindow = this.window = new __WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]();
-        destination.next(newWindow);
-    };
-    return WindowSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_2__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=window.js.map
-
-
-/***/ }),
-/* 911 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = windowCount;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subject__ = __webpack_require__(36);
-/** PURE_IMPORTS_START tslib,_Subscriber,_Subject PURE_IMPORTS_END */
-
-
-
-function windowCount(windowSize, startWindowEvery) {
-    if (startWindowEvery === void 0) {
-        startWindowEvery = 0;
-    }
-    return function windowCountOperatorFunction(source) {
-        return source.lift(new WindowCountOperator(windowSize, startWindowEvery));
-    };
-}
-var WindowCountOperator = /*@__PURE__*/ (function () {
-    function WindowCountOperator(windowSize, startWindowEvery) {
-        this.windowSize = windowSize;
-        this.startWindowEvery = startWindowEvery;
-    }
-    WindowCountOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new WindowCountSubscriber(subscriber, this.windowSize, this.startWindowEvery));
-    };
-    return WindowCountOperator;
-}());
-var WindowCountSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](WindowCountSubscriber, _super);
-    function WindowCountSubscriber(destination, windowSize, startWindowEvery) {
-        var _this = _super.call(this, destination) || this;
-        _this.destination = destination;
-        _this.windowSize = windowSize;
-        _this.startWindowEvery = startWindowEvery;
-        _this.windows = [new __WEBPACK_IMPORTED_MODULE_2__Subject__["a" /* Subject */]()];
-        _this.count = 0;
-        destination.next(_this.windows[0]);
-        return _this;
-    }
-    WindowCountSubscriber.prototype._next = function (value) {
-        var startWindowEvery = (this.startWindowEvery > 0) ? this.startWindowEvery : this.windowSize;
-        var destination = this.destination;
-        var windowSize = this.windowSize;
-        var windows = this.windows;
-        var len = windows.length;
-        for (var i = 0; i < len && !this.closed; i++) {
-            windows[i].next(value);
-        }
-        var c = this.count - windowSize + 1;
-        if (c >= 0 && c % startWindowEvery === 0 && !this.closed) {
-            windows.shift().complete();
-        }
-        if (++this.count % startWindowEvery === 0 && !this.closed) {
-            var window_1 = new __WEBPACK_IMPORTED_MODULE_2__Subject__["a" /* Subject */]();
-            windows.push(window_1);
-            destination.next(window_1);
-        }
-    };
-    WindowCountSubscriber.prototype._error = function (err) {
-        var windows = this.windows;
-        if (windows) {
-            while (windows.length > 0 && !this.closed) {
-                windows.shift().error(err);
-            }
-        }
-        this.destination.error(err);
-    };
-    WindowCountSubscriber.prototype._complete = function () {
-        var windows = this.windows;
-        if (windows) {
-            while (windows.length > 0 && !this.closed) {
-                windows.shift().complete();
-            }
-        }
-        this.destination.complete();
-    };
-    WindowCountSubscriber.prototype._unsubscribe = function () {
-        this.count = 0;
-        this.windows = null;
-    };
-    return WindowCountSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscriber__["a" /* Subscriber */]));
-//# sourceMappingURL=windowCount.js.map
-
-
-/***/ }),
-/* 912 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = windowTime;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__scheduler_async__ = __webpack_require__(40);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_isNumeric__ = __webpack_require__(190);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_isScheduler__ = __webpack_require__(49);
-/** PURE_IMPORTS_START tslib,_Subject,_scheduler_async,_Subscriber,_util_isNumeric,_util_isScheduler PURE_IMPORTS_END */
-
-
-
-
-
-
-function windowTime(windowTimeSpan) {
-    var scheduler = __WEBPACK_IMPORTED_MODULE_2__scheduler_async__["a" /* async */];
-    var windowCreationInterval = null;
-    var maxWindowSize = Number.POSITIVE_INFINITY;
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_isScheduler__["a" /* isScheduler */])(arguments[3])) {
-        scheduler = arguments[3];
-    }
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_isScheduler__["a" /* isScheduler */])(arguments[2])) {
-        scheduler = arguments[2];
-    }
-    else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isNumeric__["a" /* isNumeric */])(arguments[2])) {
-        maxWindowSize = arguments[2];
-    }
-    if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_isScheduler__["a" /* isScheduler */])(arguments[1])) {
-        scheduler = arguments[1];
-    }
-    else if (__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_4__util_isNumeric__["a" /* isNumeric */])(arguments[1])) {
-        windowCreationInterval = arguments[1];
-    }
-    return function windowTimeOperatorFunction(source) {
-        return source.lift(new WindowTimeOperator(windowTimeSpan, windowCreationInterval, maxWindowSize, scheduler));
-    };
-}
-var WindowTimeOperator = /*@__PURE__*/ (function () {
-    function WindowTimeOperator(windowTimeSpan, windowCreationInterval, maxWindowSize, scheduler) {
-        this.windowTimeSpan = windowTimeSpan;
-        this.windowCreationInterval = windowCreationInterval;
-        this.maxWindowSize = maxWindowSize;
-        this.scheduler = scheduler;
-    }
-    WindowTimeOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new WindowTimeSubscriber(subscriber, this.windowTimeSpan, this.windowCreationInterval, this.maxWindowSize, this.scheduler));
-    };
-    return WindowTimeOperator;
-}());
-var CountedSubject = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](CountedSubject, _super);
-    function CountedSubject() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this._numberOfNextedValues = 0;
-        return _this;
-    }
-    CountedSubject.prototype.next = function (value) {
-        this._numberOfNextedValues++;
-        _super.prototype.next.call(this, value);
-    };
-    Object.defineProperty(CountedSubject.prototype, "numberOfNextedValues", {
-        get: function () {
-            return this._numberOfNextedValues;
-        },
-        enumerable: true,
-        configurable: true
-    });
-    return CountedSubject;
-}(__WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]));
-var WindowTimeSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](WindowTimeSubscriber, _super);
-    function WindowTimeSubscriber(destination, windowTimeSpan, windowCreationInterval, maxWindowSize, scheduler) {
-        var _this = _super.call(this, destination) || this;
-        _this.destination = destination;
-        _this.windowTimeSpan = windowTimeSpan;
-        _this.windowCreationInterval = windowCreationInterval;
-        _this.maxWindowSize = maxWindowSize;
-        _this.scheduler = scheduler;
-        _this.windows = [];
-        var window = _this.openWindow();
-        if (windowCreationInterval !== null && windowCreationInterval >= 0) {
-            var closeState = { subscriber: _this, window: window, context: null };
-            var creationState = { windowTimeSpan: windowTimeSpan, windowCreationInterval: windowCreationInterval, subscriber: _this, scheduler: scheduler };
-            _this.add(scheduler.schedule(dispatchWindowClose, windowTimeSpan, closeState));
-            _this.add(scheduler.schedule(dispatchWindowCreation, windowCreationInterval, creationState));
-        }
-        else {
-            var timeSpanOnlyState = { subscriber: _this, window: window, windowTimeSpan: windowTimeSpan };
-            _this.add(scheduler.schedule(dispatchWindowTimeSpanOnly, windowTimeSpan, timeSpanOnlyState));
-        }
-        return _this;
-    }
-    WindowTimeSubscriber.prototype._next = function (value) {
-        var windows = this.windows;
-        var len = windows.length;
-        for (var i = 0; i < len; i++) {
-            var window_1 = windows[i];
-            if (!window_1.closed) {
-                window_1.next(value);
-                if (window_1.numberOfNextedValues >= this.maxWindowSize) {
-                    this.closeWindow(window_1);
-                }
-            }
-        }
-    };
-    WindowTimeSubscriber.prototype._error = function (err) {
-        var windows = this.windows;
-        while (windows.length > 0) {
-            windows.shift().error(err);
-        }
-        this.destination.error(err);
-    };
-    WindowTimeSubscriber.prototype._complete = function () {
-        var windows = this.windows;
-        while (windows.length > 0) {
-            var window_2 = windows.shift();
-            if (!window_2.closed) {
-                window_2.complete();
-            }
-        }
-        this.destination.complete();
-    };
-    WindowTimeSubscriber.prototype.openWindow = function () {
-        var window = new CountedSubject();
-        this.windows.push(window);
-        var destination = this.destination;
-        destination.next(window);
-        return window;
-    };
-    WindowTimeSubscriber.prototype.closeWindow = function (window) {
-        window.complete();
-        var windows = this.windows;
-        windows.splice(windows.indexOf(window), 1);
-    };
-    return WindowTimeSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_3__Subscriber__["a" /* Subscriber */]));
-function dispatchWindowTimeSpanOnly(state) {
-    var subscriber = state.subscriber, windowTimeSpan = state.windowTimeSpan, window = state.window;
-    if (window) {
-        subscriber.closeWindow(window);
-    }
-    state.window = subscriber.openWindow();
-    this.schedule(state, windowTimeSpan);
-}
-function dispatchWindowCreation(state) {
-    var windowTimeSpan = state.windowTimeSpan, subscriber = state.subscriber, scheduler = state.scheduler, windowCreationInterval = state.windowCreationInterval;
-    var window = subscriber.openWindow();
-    var action = this;
-    var context = { action: action, subscription: null };
-    var timeSpanState = { subscriber: subscriber, window: window, context: context };
-    context.subscription = scheduler.schedule(dispatchWindowClose, windowTimeSpan, timeSpanState);
-    action.add(context.subscription);
-    action.schedule(state, windowCreationInterval);
-}
-function dispatchWindowClose(state) {
-    var subscriber = state.subscriber, window = state.window, context = state.context;
-    if (context && context.action && context.subscription) {
-        context.action.remove(context.subscription);
-    }
-    subscriber.closeWindow(window);
-}
-//# sourceMappingURL=windowTime.js.map
-
-
-/***/ }),
-/* 913 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = windowToggle;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Subscription__ = __webpack_require__(25);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_6__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subject,_Subscription,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-
-
-function windowToggle(openings, closingSelector) {
-    return function (source) { return source.lift(new WindowToggleOperator(openings, closingSelector)); };
-}
-var WindowToggleOperator = /*@__PURE__*/ (function () {
-    function WindowToggleOperator(openings, closingSelector) {
-        this.openings = openings;
-        this.closingSelector = closingSelector;
-    }
-    WindowToggleOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new WindowToggleSubscriber(subscriber, this.openings, this.closingSelector));
-    };
-    return WindowToggleOperator;
-}());
-var WindowToggleSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](WindowToggleSubscriber, _super);
-    function WindowToggleSubscriber(destination, openings, closingSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.openings = openings;
-        _this.closingSelector = closingSelector;
-        _this.contexts = [];
-        _this.add(_this.openSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_subscribeToResult__["a" /* subscribeToResult */])(_this, openings, openings));
-        return _this;
-    }
-    WindowToggleSubscriber.prototype._next = function (value) {
-        var contexts = this.contexts;
-        if (contexts) {
-            var len = contexts.length;
-            for (var i = 0; i < len; i++) {
-                contexts[i].window.next(value);
-            }
-        }
-    };
-    WindowToggleSubscriber.prototype._error = function (err) {
-        var contexts = this.contexts;
-        this.contexts = null;
-        if (contexts) {
-            var len = contexts.length;
-            var index = -1;
-            while (++index < len) {
-                var context_1 = contexts[index];
-                context_1.window.error(err);
-                context_1.subscription.unsubscribe();
-            }
-        }
-        _super.prototype._error.call(this, err);
-    };
-    WindowToggleSubscriber.prototype._complete = function () {
-        var contexts = this.contexts;
-        this.contexts = null;
-        if (contexts) {
-            var len = contexts.length;
-            var index = -1;
-            while (++index < len) {
-                var context_2 = contexts[index];
-                context_2.window.complete();
-                context_2.subscription.unsubscribe();
-            }
-        }
-        _super.prototype._complete.call(this);
-    };
-    WindowToggleSubscriber.prototype._unsubscribe = function () {
-        var contexts = this.contexts;
-        this.contexts = null;
-        if (contexts) {
-            var len = contexts.length;
-            var index = -1;
-            while (++index < len) {
-                var context_3 = contexts[index];
-                context_3.window.unsubscribe();
-                context_3.subscription.unsubscribe();
-            }
-        }
-    };
-    WindowToggleSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        if (outerValue === this.openings) {
-            var closingSelector = this.closingSelector;
-            var closingNotifier = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_3__util_tryCatch__["a" /* tryCatch */])(closingSelector)(innerValue);
-            if (closingNotifier === __WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */]) {
-                return this.error(__WEBPACK_IMPORTED_MODULE_4__util_errorObject__["a" /* errorObject */].e);
-            }
-            else {
-                var window_1 = new __WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]();
-                var subscription = new __WEBPACK_IMPORTED_MODULE_2__Subscription__["a" /* Subscription */]();
-                var context_4 = { window: window_1, subscription: subscription };
-                this.contexts.push(context_4);
-                var innerSubscription = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_6__util_subscribeToResult__["a" /* subscribeToResult */])(this, closingNotifier, context_4);
-                if (innerSubscription.closed) {
-                    this.closeWindow(this.contexts.length - 1);
-                }
-                else {
-                    innerSubscription.context = context_4;
-                    subscription.add(innerSubscription);
-                }
-                this.destination.next(window_1);
-            }
-        }
-        else {
-            this.closeWindow(this.contexts.indexOf(outerValue));
-        }
-    };
-    WindowToggleSubscriber.prototype.notifyError = function (err) {
-        this.error(err);
-    };
-    WindowToggleSubscriber.prototype.notifyComplete = function (inner) {
-        if (inner !== this.openSubscription) {
-            this.closeWindow(this.contexts.indexOf(inner.context));
-        }
-    };
-    WindowToggleSubscriber.prototype.closeWindow = function (index) {
-        if (index === -1) {
-            return;
-        }
-        var contexts = this.contexts;
-        var context = contexts[index];
-        var window = context.window, subscription = context.subscription;
-        contexts.splice(index, 1);
-        window.complete();
-        subscription.unsubscribe();
-    };
-    return WindowToggleSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_5__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=windowToggle.js.map
-
-
-/***/ }),
-/* 914 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = windowWhen;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subject__ = __webpack_require__(36);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_tryCatch__ = __webpack_require__(56);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_3__util_errorObject__ = __webpack_require__(48);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_Subject,_util_tryCatch,_util_errorObject,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-
-
-
-function windowWhen(closingSelector) {
-    return function windowWhenOperatorFunction(source) {
-        return source.lift(new WindowOperator(closingSelector));
-    };
-}
-var WindowOperator = /*@__PURE__*/ (function () {
-    function WindowOperator(closingSelector) {
-        this.closingSelector = closingSelector;
-    }
-    WindowOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new WindowSubscriber(subscriber, this.closingSelector));
-    };
-    return WindowOperator;
-}());
-var WindowSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](WindowSubscriber, _super);
-    function WindowSubscriber(destination, closingSelector) {
-        var _this = _super.call(this, destination) || this;
-        _this.destination = destination;
-        _this.closingSelector = closingSelector;
-        _this.openWindow();
-        return _this;
-    }
-    WindowSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.openWindow(innerSub);
-    };
-    WindowSubscriber.prototype.notifyError = function (error, innerSub) {
-        this._error(error);
-    };
-    WindowSubscriber.prototype.notifyComplete = function (innerSub) {
-        this.openWindow(innerSub);
-    };
-    WindowSubscriber.prototype._next = function (value) {
-        this.window.next(value);
-    };
-    WindowSubscriber.prototype._error = function (err) {
-        this.window.error(err);
-        this.destination.error(err);
-        this.unsubscribeClosingNotification();
-    };
-    WindowSubscriber.prototype._complete = function () {
-        this.window.complete();
-        this.destination.complete();
-        this.unsubscribeClosingNotification();
-    };
-    WindowSubscriber.prototype.unsubscribeClosingNotification = function () {
-        if (this.closingNotification) {
-            this.closingNotification.unsubscribe();
-        }
-    };
-    WindowSubscriber.prototype.openWindow = function (innerSub) {
-        if (innerSub === void 0) {
-            innerSub = null;
-        }
-        if (innerSub) {
-            this.remove(innerSub);
-            innerSub.unsubscribe();
-        }
-        var prevWindow = this.window;
-        if (prevWindow) {
-            prevWindow.complete();
-        }
-        var window = this.window = new __WEBPACK_IMPORTED_MODULE_1__Subject__["a" /* Subject */]();
-        this.destination.next(window);
-        var closingNotifier = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_tryCatch__["a" /* tryCatch */])(this.closingSelector)();
-        if (closingNotifier === __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */]) {
-            var err = __WEBPACK_IMPORTED_MODULE_3__util_errorObject__["a" /* errorObject */].e;
-            this.destination.error(err);
-            this.window.error(err);
-        }
-        else {
-            this.add(this.closingNotification = __webpack_require__.i(__WEBPACK_IMPORTED_MODULE_5__util_subscribeToResult__["a" /* subscribeToResult */])(this, closingNotifier));
-        }
-    };
-    return WindowSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_4__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=windowWhen.js.map
-
-
-/***/ }),
-/* 915 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = withLatestFrom;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__ = __webpack_require__(13);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__ = __webpack_require__(14);
-/** PURE_IMPORTS_START tslib,_OuterSubscriber,_util_subscribeToResult PURE_IMPORTS_END */
-
-
-
-function withLatestFrom() {
-    var args = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        args[_i] = arguments[_i];
-    }
-    return function (source) {
-        var project;
-        if (typeof args[args.length - 1] === 'function') {
-            project = args.pop();
-        }
-        var observables = args;
-        return source.lift(new WithLatestFromOperator(observables, project));
-    };
-}
-var WithLatestFromOperator = /*@__PURE__*/ (function () {
-    function WithLatestFromOperator(observables, project) {
-        this.observables = observables;
-        this.project = project;
-    }
-    WithLatestFromOperator.prototype.call = function (subscriber, source) {
-        return source.subscribe(new WithLatestFromSubscriber(subscriber, this.observables, this.project));
-    };
-    return WithLatestFromOperator;
-}());
-var WithLatestFromSubscriber = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](WithLatestFromSubscriber, _super);
-    function WithLatestFromSubscriber(destination, observables, project) {
-        var _this = _super.call(this, destination) || this;
-        _this.observables = observables;
-        _this.project = project;
-        _this.toRespond = [];
-        var len = observables.length;
-        _this.values = new Array(len);
-        for (var i = 0; i < len; i++) {
-            _this.toRespond.push(i);
-        }
-        for (var i = 0; i < len; i++) {
-            var observable = observables[i];
-            _this.add(__webpack_require__.i(__WEBPACK_IMPORTED_MODULE_2__util_subscribeToResult__["a" /* subscribeToResult */])(_this, observable, observable, i));
-        }
-        return _this;
-    }
-    WithLatestFromSubscriber.prototype.notifyNext = function (outerValue, innerValue, outerIndex, innerIndex, innerSub) {
-        this.values[outerIndex] = innerValue;
-        var toRespond = this.toRespond;
-        if (toRespond.length > 0) {
-            var found = toRespond.indexOf(outerIndex);
-            if (found !== -1) {
-                toRespond.splice(found, 1);
-            }
-        }
-    };
-    WithLatestFromSubscriber.prototype.notifyComplete = function () {
-    };
-    WithLatestFromSubscriber.prototype._next = function (value) {
-        if (this.toRespond.length === 0) {
-            var args = [value].concat(this.values);
-            if (this.project) {
-                this._tryProject(args);
-            }
-            else {
-                this.destination.next(args);
-            }
-        }
-    };
-    WithLatestFromSubscriber.prototype._tryProject = function (args) {
-        var result;
-        try {
-            result = this.project.apply(this, args);
-        }
-        catch (err) {
-            this.destination.error(err);
-            return;
-        }
-        this.destination.next(result);
-    };
-    return WithLatestFromSubscriber;
-}(__WEBPACK_IMPORTED_MODULE_1__OuterSubscriber__["a" /* OuterSubscriber */]));
-//# sourceMappingURL=withLatestFrom.js.map
-
-
-/***/ }),
-/* 916 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = zip;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_zip__ = __webpack_require__(314);
-/** PURE_IMPORTS_START _observable_zip PURE_IMPORTS_END */
-
-function zip() {
-    var observables = [];
-    for (var _i = 0; _i < arguments.length; _i++) {
-        observables[_i] = arguments[_i];
-    }
-    return function zipOperatorFunction(source) {
-        return source.lift.call(__WEBPACK_IMPORTED_MODULE_0__observable_zip__["a" /* zip */].apply(void 0, [source].concat(observables)));
-    };
-}
-//# sourceMappingURL=zip.js.map
-
-
-/***/ }),
-/* 917 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = zipAll;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__observable_zip__ = __webpack_require__(314);
-/** PURE_IMPORTS_START _observable_zip PURE_IMPORTS_END */
-
-function zipAll(project) {
-    return function (source) { return source.lift(new __WEBPACK_IMPORTED_MODULE_0__observable_zip__["b" /* ZipOperator */](project)); };
-}
-//# sourceMappingURL=zipAll.js.map
-
-
-/***/ }),
-/* 918 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Action; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__Subscription__ = __webpack_require__(25);
-/** PURE_IMPORTS_START tslib,_Subscription PURE_IMPORTS_END */
-
-
-var Action = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](Action, _super);
-    function Action(scheduler, work) {
-        return _super.call(this) || this;
-    }
-    Action.prototype.schedule = function (state, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        return this;
-    };
-    return Action;
-}(__WEBPACK_IMPORTED_MODULE_1__Subscription__["a" /* Subscription */]));
-
-//# sourceMappingURL=Action.js.map
-
-
-/***/ }),
-/* 919 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AnimationFrameAction; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncAction__ = __webpack_require__(149);
-/** PURE_IMPORTS_START tslib,_AsyncAction PURE_IMPORTS_END */
-
-
-var AnimationFrameAction = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AnimationFrameAction, _super);
-    function AnimationFrameAction(scheduler, work) {
-        var _this = _super.call(this, scheduler, work) || this;
-        _this.scheduler = scheduler;
-        _this.work = work;
-        return _this;
-    }
-    AnimationFrameAction.prototype.requestAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (delay !== null && delay > 0) {
-            return _super.prototype.requestAsyncId.call(this, scheduler, id, delay);
-        }
-        scheduler.actions.push(this);
-        return scheduler.scheduled || (scheduler.scheduled = requestAnimationFrame(function () { return scheduler.flush(null); }));
-    };
-    AnimationFrameAction.prototype.recycleAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if ((delay !== null && delay > 0) || (delay === null && this.delay > 0)) {
-            return _super.prototype.recycleAsyncId.call(this, scheduler, id, delay);
-        }
-        if (scheduler.actions.length === 0) {
-            cancelAnimationFrame(id);
-            scheduler.scheduled = undefined;
-        }
-        return undefined;
-    };
-    return AnimationFrameAction;
-}(__WEBPACK_IMPORTED_MODULE_1__AsyncAction__["a" /* AsyncAction */]));
-
-//# sourceMappingURL=AnimationFrameAction.js.map
-
-
-/***/ }),
-/* 920 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AnimationFrameScheduler; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__ = __webpack_require__(150);
-/** PURE_IMPORTS_START tslib,_AsyncScheduler PURE_IMPORTS_END */
-
-
-var AnimationFrameScheduler = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AnimationFrameScheduler, _super);
-    function AnimationFrameScheduler() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AnimationFrameScheduler.prototype.flush = function (action) {
-        this.active = true;
-        this.scheduled = undefined;
-        var actions = this.actions;
-        var error;
-        var index = -1;
-        var count = actions.length;
-        action = action || actions.shift();
-        do {
-            if (error = action.execute(action.state, action.delay)) {
-                break;
-            }
-        } while (++index < count && (action = actions.shift()));
-        this.active = false;
-        if (error) {
-            while (++index < count && (action = actions.shift())) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    };
-    return AnimationFrameScheduler;
-}(__WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__["a" /* AsyncScheduler */]));
-
-//# sourceMappingURL=AnimationFrameScheduler.js.map
-
-
-/***/ }),
-/* 921 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AsapAction; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__util_Immediate__ = __webpack_require__(927);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__AsyncAction__ = __webpack_require__(149);
-/** PURE_IMPORTS_START tslib,_util_Immediate,_AsyncAction PURE_IMPORTS_END */
-
-
-
-var AsapAction = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AsapAction, _super);
-    function AsapAction(scheduler, work) {
-        var _this = _super.call(this, scheduler, work) || this;
-        _this.scheduler = scheduler;
-        _this.work = work;
-        return _this;
-    }
-    AsapAction.prototype.requestAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (delay !== null && delay > 0) {
-            return _super.prototype.requestAsyncId.call(this, scheduler, id, delay);
-        }
-        scheduler.actions.push(this);
-        return scheduler.scheduled || (scheduler.scheduled = __WEBPACK_IMPORTED_MODULE_1__util_Immediate__["a" /* Immediate */].setImmediate(scheduler.flush.bind(scheduler, null)));
-    };
-    AsapAction.prototype.recycleAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if ((delay !== null && delay > 0) || (delay === null && this.delay > 0)) {
-            return _super.prototype.recycleAsyncId.call(this, scheduler, id, delay);
-        }
-        if (scheduler.actions.length === 0) {
-            __WEBPACK_IMPORTED_MODULE_1__util_Immediate__["a" /* Immediate */].clearImmediate(id);
-            scheduler.scheduled = undefined;
-        }
-        return undefined;
-    };
-    return AsapAction;
-}(__WEBPACK_IMPORTED_MODULE_2__AsyncAction__["a" /* AsyncAction */]));
-
-//# sourceMappingURL=AsapAction.js.map
-
-
-/***/ }),
-/* 922 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return AsapScheduler; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__ = __webpack_require__(150);
-/** PURE_IMPORTS_START tslib,_AsyncScheduler PURE_IMPORTS_END */
-
-
-var AsapScheduler = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](AsapScheduler, _super);
-    function AsapScheduler() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    AsapScheduler.prototype.flush = function (action) {
-        this.active = true;
-        this.scheduled = undefined;
-        var actions = this.actions;
-        var error;
-        var index = -1;
-        var count = actions.length;
-        action = action || actions.shift();
-        do {
-            if (error = action.execute(action.state, action.delay)) {
-                break;
-            }
-        } while (++index < count && (action = actions.shift()));
-        this.active = false;
-        if (error) {
-            while (++index < count && (action = actions.shift())) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    };
-    return AsapScheduler;
-}(__WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__["a" /* AsyncScheduler */]));
-
-//# sourceMappingURL=AsapScheduler.js.map
-
-
-/***/ }),
-/* 923 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return QueueAction; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncAction__ = __webpack_require__(149);
-/** PURE_IMPORTS_START tslib,_AsyncAction PURE_IMPORTS_END */
-
-
-var QueueAction = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](QueueAction, _super);
-    function QueueAction(scheduler, work) {
-        var _this = _super.call(this, scheduler, work) || this;
-        _this.scheduler = scheduler;
-        _this.work = work;
-        return _this;
-    }
-    QueueAction.prototype.schedule = function (state, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (delay > 0) {
-            return _super.prototype.schedule.call(this, state, delay);
-        }
-        this.delay = delay;
-        this.state = state;
-        this.scheduler.flush(this);
-        return this;
-    };
-    QueueAction.prototype.execute = function (state, delay) {
-        return (delay > 0 || this.closed) ?
-            _super.prototype.execute.call(this, state, delay) :
-            this._execute(state, delay);
-    };
-    QueueAction.prototype.requestAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if ((delay !== null && delay > 0) || (delay === null && this.delay > 0)) {
-            return _super.prototype.requestAsyncId.call(this, scheduler, id, delay);
-        }
-        return scheduler.flush(this);
-    };
-    return QueueAction;
-}(__WEBPACK_IMPORTED_MODULE_1__AsyncAction__["a" /* AsyncAction */]));
-
-//# sourceMappingURL=QueueAction.js.map
-
-
-/***/ }),
-/* 924 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return QueueScheduler; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__ = __webpack_require__(150);
-/** PURE_IMPORTS_START tslib,_AsyncScheduler PURE_IMPORTS_END */
-
-
-var QueueScheduler = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](QueueScheduler, _super);
-    function QueueScheduler() {
-        return _super !== null && _super.apply(this, arguments) || this;
-    }
-    return QueueScheduler;
-}(__WEBPACK_IMPORTED_MODULE_1__AsyncScheduler__["a" /* AsyncScheduler */]));
-
-//# sourceMappingURL=QueueScheduler.js.map
-
-
-/***/ }),
-/* 925 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return VirtualTimeScheduler; });
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "b", function() { return VirtualAction; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0_tslib__ = __webpack_require__(1);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AsyncAction__ = __webpack_require__(149);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__AsyncScheduler__ = __webpack_require__(150);
-/** PURE_IMPORTS_START tslib,_AsyncAction,_AsyncScheduler PURE_IMPORTS_END */
-
-
-
-var VirtualTimeScheduler = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](VirtualTimeScheduler, _super);
-    function VirtualTimeScheduler(SchedulerAction, maxFrames) {
-        if (SchedulerAction === void 0) {
-            SchedulerAction = VirtualAction;
-        }
-        if (maxFrames === void 0) {
-            maxFrames = Number.POSITIVE_INFINITY;
-        }
-        var _this = _super.call(this, SchedulerAction, function () { return _this.frame; }) || this;
-        _this.maxFrames = maxFrames;
-        _this.frame = 0;
-        _this.index = -1;
-        return _this;
-    }
-    VirtualTimeScheduler.prototype.flush = function () {
-        var _a = this, actions = _a.actions, maxFrames = _a.maxFrames;
-        var error, action;
-        while ((action = actions.shift()) && (this.frame = action.delay) <= maxFrames) {
-            if (error = action.execute(action.state, action.delay)) {
-                break;
-            }
-        }
-        if (error) {
-            while (action = actions.shift()) {
-                action.unsubscribe();
-            }
-            throw error;
-        }
-    };
-    VirtualTimeScheduler.frameTimeFactor = 10;
-    return VirtualTimeScheduler;
-}(__WEBPACK_IMPORTED_MODULE_2__AsyncScheduler__["a" /* AsyncScheduler */]));
-
-var VirtualAction = /*@__PURE__*/ (function (_super) {
-    __WEBPACK_IMPORTED_MODULE_0_tslib__["a" /* __extends */](VirtualAction, _super);
-    function VirtualAction(scheduler, work, index) {
-        if (index === void 0) {
-            index = scheduler.index += 1;
-        }
-        var _this = _super.call(this, scheduler, work) || this;
-        _this.scheduler = scheduler;
-        _this.work = work;
-        _this.index = index;
-        _this.active = true;
-        _this.index = scheduler.index = index;
-        return _this;
-    }
-    VirtualAction.prototype.schedule = function (state, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        if (!this.id) {
-            return _super.prototype.schedule.call(this, state, delay);
-        }
-        this.active = false;
-        var action = new VirtualAction(this.scheduler, this.work);
-        this.add(action);
-        return action.schedule(state, delay);
-    };
-    VirtualAction.prototype.requestAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        this.delay = scheduler.frame + delay;
-        var actions = scheduler.actions;
-        actions.push(this);
-        actions.sort(VirtualAction.sortActions);
-        return true;
-    };
-    VirtualAction.prototype.recycleAsyncId = function (scheduler, id, delay) {
-        if (delay === void 0) {
-            delay = 0;
-        }
-        return undefined;
-    };
-    VirtualAction.prototype._execute = function (state, delay) {
-        if (this.active === true) {
-            return _super.prototype._execute.call(this, state, delay);
-        }
-    };
-    VirtualAction.sortActions = function (a, b) {
-        if (a.delay === b.delay) {
-            if (a.index === b.index) {
-                return 0;
-            }
-            else if (a.index > b.index) {
-                return 1;
-            }
-            else {
-                return -1;
-            }
-        }
-        else if (a.delay > b.delay) {
-            return 1;
-        }
-        else {
-            return -1;
-        }
-    };
-    return VirtualAction;
-}(__WEBPACK_IMPORTED_MODULE_1__AsyncAction__["a" /* AsyncAction */]));
-
-//# sourceMappingURL=VirtualTimeScheduler.js.map
-
-
-/***/ }),
-/* 926 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return animationFrame; });
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__AnimationFrameAction__ = __webpack_require__(919);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__AnimationFrameScheduler__ = __webpack_require__(920);
-/** PURE_IMPORTS_START _AnimationFrameAction,_AnimationFrameScheduler PURE_IMPORTS_END */
-
-
-var animationFrame = /*@__PURE__*/ new __WEBPACK_IMPORTED_MODULE_1__AnimationFrameScheduler__["a" /* AnimationFrameScheduler */](__WEBPACK_IMPORTED_MODULE_0__AnimationFrameAction__["a" /* AnimationFrameAction */]);
-//# sourceMappingURL=animationFrame.js.map
-
-
-/***/ }),
-/* 927 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (binding) */ __webpack_require__.d(__webpack_exports__, "a", function() { return Immediate; });
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-var nextHandle = 1;
-var tasksByHandle = {};
-function runIfPresent(handle) {
-    var cb = tasksByHandle[handle];
-    if (cb) {
-        cb();
-    }
-}
-var Immediate = {
-    setImmediate: function (cb) {
-        var handle = nextHandle++;
-        tasksByHandle[handle] = cb;
-        Promise.resolve().then(function () { return runIfPresent(handle); });
-        return handle;
-    },
-    clearImmediate: function (handle) {
-        delete tasksByHandle[handle];
-    },
-};
-//# sourceMappingURL=Immediate.js.map
-
-
-/***/ }),
-/* 928 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isInteropObservable;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__symbol_observable__ = __webpack_require__(117);
-/** PURE_IMPORTS_START _symbol_observable PURE_IMPORTS_END */
-
-function isInteropObservable(input) {
-    return input && typeof input[__WEBPACK_IMPORTED_MODULE_0__symbol_observable__["a" /* observable */]] === 'function';
-}
-//# sourceMappingURL=isInteropObservable.js.map
-
-
-/***/ }),
-/* 929 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isIterable;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__symbol_iterator__ = __webpack_require__(151);
-/** PURE_IMPORTS_START _symbol_iterator PURE_IMPORTS_END */
-
-function isIterable(input) {
-    return input && typeof input[__WEBPACK_IMPORTED_MODULE_0__symbol_iterator__["a" /* iterator */]] === 'function';
-}
-//# sourceMappingURL=isIterable.js.map
-
-
-/***/ }),
-/* 930 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = isObservable;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Observable__ = __webpack_require__(12);
-/** PURE_IMPORTS_START _Observable PURE_IMPORTS_END */
-
-function isObservable(obj) {
-    return !!obj && (obj instanceof __WEBPACK_IMPORTED_MODULE_0__Observable__["a" /* Observable */] || (typeof obj.lift === 'function' && typeof obj.subscribe === 'function'));
-}
-//# sourceMappingURL=isObservable.js.map
-
-
-/***/ }),
-/* 931 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = not;
-/** PURE_IMPORTS_START  PURE_IMPORTS_END */
-function not(pred, thisArg) {
-    function notPred() {
-        return !(notPred.pred.apply(notPred.thisArg, arguments));
-    }
-    notPred.pred = pred;
-    notPred.thisArg = thisArg;
-    return notPred;
-}
-//# sourceMappingURL=not.js.map
-
-
-/***/ }),
-/* 932 */
-/***/ (function(module, __webpack_exports__, __webpack_require__) {
-
-"use strict";
-/* harmony export (immutable) */ __webpack_exports__["a"] = toSubscriber;
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_0__Subscriber__ = __webpack_require__(7);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_1__symbol_rxSubscriber__ = __webpack_require__(321);
-/* harmony import */ var __WEBPACK_IMPORTED_MODULE_2__Observer__ = __webpack_require__(420);
-/** PURE_IMPORTS_START _Subscriber,_symbol_rxSubscriber,_Observer PURE_IMPORTS_END */
-
-
-
-function toSubscriber(nextOrObserver, error, complete) {
-    if (nextOrObserver) {
-        if (nextOrObserver instanceof __WEBPACK_IMPORTED_MODULE_0__Subscriber__["a" /* Subscriber */]) {
-            return nextOrObserver;
-        }
-        if (nextOrObserver[__WEBPACK_IMPORTED_MODULE_1__symbol_rxSubscriber__["a" /* rxSubscriber */]]) {
-            return nextOrObserver[__WEBPACK_IMPORTED_MODULE_1__symbol_rxSubscriber__["a" /* rxSubscriber */]]();
-        }
-    }
-    if (!nextOrObserver && !error && !complete) {
-        return new __WEBPACK_IMPORTED_MODULE_0__Subscriber__["a" /* Subscriber */](__WEBPACK_IMPORTED_MODULE_2__Observer__["a" /* empty */]);
-    }
-    return new __WEBPACK_IMPORTED_MODULE_0__Subscriber__["a" /* Subscriber */](nextOrObserver, error, complete);
-}
-//# sourceMappingURL=toSubscriber.js.map
-
-
-/***/ }),
-/* 933 */
-/***/ (function(module, exports) {
-
-// This is not the set of all possible signals.
-//
-// It IS, however, the set of all signals that trigger
-// an exit on either Linux or BSD systems.  Linux is a
-// superset of the signal names supported on BSD, and
-// the unknown signals just fail to register, so we can
-// catch that easily enough.
-//
-// Don't bother with SIGKILL.  It's uncatchable, which
-// means that we can't fire any callbacks anyway.
-//
-// If a user does happen to register a handler on a non-
-// fatal signal like SIGWINCH or something, and then
-// exit, it'll end up firing `process.emit('exit')`, so
-// the handler will be fired anyway.
-//
-// SIGBUS, SIGFPE, SIGSEGV and SIGILL, when not raised
-// artificially, inherently leave the process in a
-// state from which it is not safe to try and enter JS
-// listeners.
-module.exports = [
-  'SIGABRT',
-  'SIGALRM',
-  'SIGHUP',
-  'SIGINT',
-  'SIGTERM'
-]
-
-if (process.platform !== 'win32') {
-  module.exports.push(
-    'SIGVTALRM',
-    'SIGXCPU',
-    'SIGXFSZ',
-    'SIGUSR2',
-    'SIGTRAP',
-    'SIGSYS',
-    'SIGQUIT',
-    'SIGIOT'
-    // should detect profiler and enable/disable accordingly.
-    // see #21
-    // 'SIGPROF'
-  )
-}
-
-if (process.platform === 'linux') {
-  module.exports.push(
-    'SIGIO',
-    'SIGPOLL',
-    'SIGPWR',
-    'SIGSTKFLT',
-    'SIGUNUSED'
-  )
-}
-
-
-/***/ }),
-/* 934 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const isPlainObj = __webpack_require__(738);
-
-module.exports = (obj, opts) => {
-	if (!isPlainObj(obj)) {
-		throw new TypeError('Expected a plain object');
-	}
-
-	opts = opts || {};
-
-	// DEPRECATED
-	if (typeof opts === 'function') {
-		throw new TypeError('Specify the compare function as an option instead');
-	}
-
-	const deep = opts.deep;
-	const seenInput = [];
-	const seenOutput = [];
-
-	const sortKeys = x => {
-		const seenIndex = seenInput.indexOf(x);
-
-		if (seenIndex !== -1) {
-			return seenOutput[seenIndex];
-		}
-
-		const ret = {};
-		const keys = Object.keys(x).sort(opts.compare);
-
-		seenInput.push(x);
-		seenOutput.push(ret);
-
-		for (let i = 0; i < keys.length; i++) {
-			const key = keys[i];
-			const val = x[key];
-
-			if (deep && Array.isArray(val)) {
-				const retArr = [];
-
-				for (let j = 0; j < val.length; j++) {
-					retArr[j] = isPlainObj(val[j]) ? sortKeys(val[j]) : val[j];
-				}
-
-				ret[key] = retArr;
-				continue;
-			}
-
-			ret[key] = deep && isPlainObj(val) ? sortKeys(val) : val;
-		}
-
-		return ret;
-	};
-
-	return sortKeys(obj);
-};
-
-
-/***/ }),
-/* 935 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
-Copyright 2015 Kyle E. Mitchell
-
-Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
-
-   http://www.apache.org/licenses/LICENSE-2.0
-
-Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
-limitations under the License.
-*/
-var parse = __webpack_require__(452)
-var spdxLicenseIds = __webpack_require__(453)
-
-function valid (string) {
-  try {
-    parse(string)
-    return true
-  } catch (error) {
-    return false
-  }
-}
-
-// Common transpositions of license identifier acronyms
-var transpositions = [
-  ['APGL', 'AGPL'],
-  ['Gpl', 'GPL'],
-  ['GLP', 'GPL'],
-  ['APL', 'Apache'],
-  ['ISD', 'ISC'],
-  ['GLP', 'GPL'],
-  ['IST', 'ISC'],
-  ['Claude', 'Clause'],
-  [' or later', '+'],
-  [' International', ''],
-  ['GNU', 'GPL'],
-  ['GUN', 'GPL'],
-  ['+', ''],
-  ['GNU GPL', 'GPL'],
-  ['GNU/GPL', 'GPL'],
-  ['GNU GLP', 'GPL'],
-  ['GNU General Public License', 'GPL'],
-  ['Gnu public license', 'GPL'],
-  ['GNU Public License', 'GPL'],
-  ['GNU GENERAL PUBLIC LICENSE', 'GPL'],
-  ['MTI', 'MIT'],
-  ['Mozilla Public License', 'MPL'],
-  ['WTH', 'WTF'],
-  ['-License', '']
-]
-
-var TRANSPOSED = 0
-var CORRECT = 1
-
-// Simple corrections to nearly valid identifiers.
-var transforms = [
-  // e.g. 'mit'
-  function (argument) {
-    return argument.toUpperCase()
-  },
-  // e.g. 'MIT '
-  function (argument) {
-    return argument.trim()
-  },
-  // e.g. 'M.I.T.'
-  function (argument) {
-    return argument.replace(/\./g, '')
-  },
-  // e.g. 'Apache- 2.0'
-  function (argument) {
-    return argument.replace(/\s+/g, '')
-  },
-  // e.g. 'CC BY 4.0''
-  function (argument) {
-    return argument.replace(/\s+/g, '-')
-  },
-  // e.g. 'LGPLv2.1'
-  function (argument) {
-    return argument.replace('v', '-')
-  },
-  // e.g. 'Apache 2.0'
-  function (argument) {
-    return argument.replace(/,?\s*(\d)/, '-$1')
-  },
-  // e.g. 'GPL 2'
-  function (argument) {
-    return argument.replace(/,?\s*(\d)/, '-$1.0')
-  },
-  // e.g. 'Apache Version 2.0'
-  function (argument) {
-    return argument
-      .replace(/,?\s*(V\.|v\.|V|v|Version|version)\s*(\d)/, '-$2')
-  },
-  // e.g. 'Apache Version 2'
-  function (argument) {
-    return argument
-      .replace(/,?\s*(V\.|v\.|V|v|Version|version)\s*(\d)/, '-$2.0')
-  },
-  // e.g. 'ZLIB'
-  function (argument) {
-    return argument[0].toUpperCase() + argument.slice(1)
-  },
-  // e.g. 'MPL/2.0'
-  function (argument) {
-    return argument.replace('/', '-')
-  },
-  // e.g. 'Apache 2'
-  function (argument) {
-    return argument
-      .replace(/\s*V\s*(\d)/, '-$1')
-      .replace(/(\d)$/, '$1.0')
-  },
-  // e.g. 'GPL-2.0', 'GPL-3.0'
-  function (argument) {
-    if (argument.indexOf('3.0') !== -1) {
-      return argument + '-or-later'
-    } else {
-      return argument + '-only'
-    }
-  },
-  // e.g. 'GPL-2.0-'
-  function (argument) {
-    return argument + 'only'
-  },
-  // e.g. 'GPL2'
-  function (argument) {
-    return argument.replace(/(\d)$/, '-$1.0')
-  },
-  // e.g. 'BSD 3'
-  function (argument) {
-    return argument.replace(/(-| )?(\d)$/, '-$2-Clause')
-  },
-  // e.g. 'BSD clause 3'
-  function (argument) {
-    return argument.replace(/(-| )clause(-| )(\d)/, '-$3-Clause')
-  },
-  // e.g. 'BY-NC-4.0'
-  function (argument) {
-    return 'CC-' + argument
-  },
-  // e.g. 'BY-NC'
-  function (argument) {
-    return 'CC-' + argument + '-4.0'
-  },
-  // e.g. 'Attribution-NonCommercial'
-  function (argument) {
-    return argument
-      .replace('Attribution', 'BY')
-      .replace('NonCommercial', 'NC')
-      .replace('NoDerivatives', 'ND')
-      .replace(/ (\d)/, '-$1')
-      .replace(/ ?International/, '')
-  },
-  // e.g. 'Attribution-NonCommercial'
-  function (argument) {
-    return 'CC-' +
-      argument
-        .replace('Attribution', 'BY')
-        .replace('NonCommercial', 'NC')
-        .replace('NoDerivatives', 'ND')
-        .replace(/ (\d)/, '-$1')
-        .replace(/ ?International/, '') +
-      '-4.0'
-  }
-]
-
-var licensesWithVersions = spdxLicenseIds
-  .map(function (id) {
-    var match = /^(.*)-\d+\.\d+$/.exec(id)
-    return match
-      ? [match[0], match[1]]
-      : [id, null]
-  })
-  .reduce(function (objectMap, item) {
-    var key = item[1]
-    objectMap[key] = objectMap[key] || []
-    objectMap[key].push(item[0])
-    return objectMap
-  }, {})
-
-var licensesWithOneVersion = Object.keys(licensesWithVersions)
-  .map(function makeEntries (key) {
-    return [key, licensesWithVersions[key]]
-  })
-  .filter(function identifySoleVersions (item) {
-    return (
-      // Licenses has just one valid version suffix.
-      item[1].length === 1 &&
-      item[0] !== null &&
-      // APL will be considered Apache, rather than APL-1.0
-      item[0] !== 'APL'
-    )
-  })
-  .map(function createLastResorts (item) {
-    return [item[0], item[1][0]]
-  })
-
-licensesWithVersions = undefined
-
-// If all else fails, guess that strings containing certain substrings
-// meant to identify certain licenses.
-var lastResorts = [
-  ['UNLI', 'Unlicense'],
-  ['WTF', 'WTFPL'],
-  ['2 CLAUSE', 'BSD-2-Clause'],
-  ['2-CLAUSE', 'BSD-2-Clause'],
-  ['3 CLAUSE', 'BSD-3-Clause'],
-  ['3-CLAUSE', 'BSD-3-Clause'],
-  ['AFFERO', 'AGPL-3.0-or-later'],
-  ['AGPL', 'AGPL-3.0-or-later'],
-  ['APACHE', 'Apache-2.0'],
-  ['ARTISTIC', 'Artistic-2.0'],
-  ['Affero', 'AGPL-3.0-or-later'],
-  ['BEER', 'Beerware'],
-  ['BOOST', 'BSL-1.0'],
-  ['BSD', 'BSD-2-Clause'],
-  ['CDDL', 'CDDL-1.1'],
-  ['ECLIPSE', 'EPL-1.0'],
-  ['FUCK', 'WTFPL'],
-  ['GNU', 'GPL-3.0-or-later'],
-  ['LGPL', 'LGPL-3.0-or-later'],
-  ['GPLV1', 'GPL-1.0-only'],
-  ['GPLV2', 'GPL-2.0-only'],
-  ['GPL', 'GPL-3.0-or-later'],
-  ['MIT +NO-FALSE-ATTRIBS', 'MITNFA'],
-  ['MIT', 'MIT'],
-  ['MPL', 'MPL-2.0'],
-  ['X11', 'X11'],
-  ['ZLIB', 'Zlib']
-].concat(licensesWithOneVersion)
-
-var SUBSTRING = 0
-var IDENTIFIER = 1
-
-var validTransformation = function (identifier) {
-  for (var i = 0; i < transforms.length; i++) {
-    var transformed = transforms[i](identifier).trim()
-    if (transformed !== identifier && valid(transformed)) {
-      return transformed
-    }
-  }
-  return null
-}
-
-var validLastResort = function (identifier) {
-  var upperCased = identifier.toUpperCase()
-  for (var i = 0; i < lastResorts.length; i++) {
-    var lastResort = lastResorts[i]
-    if (upperCased.indexOf(lastResort[SUBSTRING]) > -1) {
-      return lastResort[IDENTIFIER]
-    }
-  }
-  return null
-}
-
-var anyCorrection = function (identifier, check) {
-  for (var i = 0; i < transpositions.length; i++) {
-    var transposition = transpositions[i]
-    var transposed = transposition[TRANSPOSED]
-    if (identifier.indexOf(transposed) > -1) {
-      var corrected = identifier.replace(
-        transposed,
-        transposition[CORRECT]
-      )
-      var checked = check(corrected)
-      if (checked !== null) {
-        return checked
-      }
-    }
-  }
-  return null
-}
-
-module.exports = function (identifier) {
-  var validArugment = (
-    typeof identifier === 'string' &&
-    identifier.trim().length !== 0
-  )
-  if (!validArugment) {
-    throw Error('Invalid argument. Expected non-empty string.')
-  }
-  identifier = identifier.replace(/\+$/, '').trim()
-  if (valid(identifier)) {
-    return upgradeGPLs(identifier)
-  }
-  var transformed = validTransformation(identifier)
-  if (transformed !== null) {
-    return upgradeGPLs(transformed)
-  }
-  transformed = anyCorrection(identifier, function (argument) {
-    if (valid(argument)) {
-      return argument
-    }
-    return validTransformation(argument)
-  })
-  if (transformed !== null) {
-    return upgradeGPLs(transformed)
-  }
-  transformed = validLastResort(identifier)
-  if (transformed !== null) {
-    return upgradeGPLs(transformed)
-  }
-  transformed = anyCorrection(identifier, validLastResort)
-  if (transformed !== null) {
-    return upgradeGPLs(transformed)
-  }
-  return null
-}
-
-function upgradeGPLs (value) {
-  if ([
-    'GPL-1.0', 'LGPL-1.0', 'AGPL-1.0',
-    'GPL-2.0', 'LGPL-2.0', 'AGPL-2.0',
-    'LGPL-2.1'
-  ].indexOf(value) !== -1) {
-    return value + '-only'
-  } else if (['GPL-3.0', 'LGPL-3.0', 'AGPL-3.0'].indexOf(value) !== -1) {
-    return value + '-or-later'
-  } else {
-    return value
-  }
-}
-
-
-/***/ }),
-/* 936 */
-/***/ (function(module, exports) {
-
-module.exports = ["389-exception","Autoconf-exception-2.0","Autoconf-exception-3.0","Bison-exception-2.2","Bootloader-exception","CLISP-exception-2.0","Classpath-exception-2.0","DigiRule-FOSS-exception","FLTK-exception","Fawkes-Runtime-exception","Font-exception-2.0","GCC-exception-2.0","GCC-exception-3.1","LZMA-exception","Libtool-exception","Linux-syscall-note","Nokia-Qt-exception-1.1","OCCT-exception-1.0","Qwt-exception-1.0","WxWindows-exception-3.1","eCos-exception-2.0","freertos-exception-2.0","gnu-javamail-exception","i2p-gpl-java-exception","mif-exception","openvpn-openssl-exception","u-boot-exception-2.0"]
-
-/***/ }),
-/* 937 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-// The ABNF grammar in the spec is totally ambiguous.
-//
-// This parser follows the operator precedence defined in the
-// `Order of Precedence and Parentheses` section.
-
-module.exports = function (tokens) {
-  var index = 0
-
-  function hasMore () {
-    return index < tokens.length
-  }
-
-  function token () {
-    return hasMore() ? tokens[index] : null
-  }
-
-  function next () {
-    if (!hasMore()) {
-      throw new Error()
-    }
-    index++
-  }
-
-  function parseOperator (operator) {
-    var t = token()
-    if (t && t.type === 'OPERATOR' && operator === t.string) {
-      next()
-      return t.string
-    }
-  }
-
-  function parseWith () {
-    if (parseOperator('WITH')) {
-      var t = token()
-      if (t && t.type === 'EXCEPTION') {
-        next()
-        return t.string
-      }
-      throw new Error('Expected exception after `WITH`')
-    }
-  }
-
-  function parseLicenseRef () {
-    // TODO: Actually, everything is concatenated into one string
-    // for backward-compatibility but it could be better to return
-    // a nice structure.
-    var begin = index
-    var string = ''
-    var t = token()
-    if (t.type === 'DOCUMENTREF') {
-      next()
-      string += 'DocumentRef-' + t.string + ':'
-      if (!parseOperator(':')) {
-        throw new Error('Expected `:` after `DocumentRef-...`')
-      }
-    }
-    t = token()
-    if (t.type === 'LICENSEREF') {
-      next()
-      string += 'LicenseRef-' + t.string
-      return {license: string}
-    }
-    index = begin
-  }
-
-  function parseLicense () {
-    var t = token()
-    if (t && t.type === 'LICENSE') {
-      next()
-      var node = {license: t.string}
-      if (parseOperator('+')) {
-        node.plus = true
-      }
-      var exception = parseWith()
-      if (exception) {
-        node.exception = exception
-      }
-      return node
-    }
-  }
-
-  function parseParenthesizedExpression () {
-    var left = parseOperator('(')
-    if (!left) {
-      return
-    }
-
-    var expr = parseExpression()
-
-    if (!parseOperator(')')) {
-      throw new Error('Expected `)`')
-    }
-
-    return expr
-  }
-
-  function parseAtom () {
-    return (
-      parseParenthesizedExpression() ||
-      parseLicenseRef() ||
-      parseLicense()
-    )
-  }
-
-  function makeBinaryOpParser (operator, nextParser) {
-    return function parseBinaryOp () {
-      var left = nextParser()
-      if (!left) {
-        return
-      }
-
-      if (!parseOperator(operator)) {
-        return left
-      }
-
-      var right = parseBinaryOp()
-      if (!right) {
-        throw new Error('Expected expression')
-      }
-      return {
-        left: left,
-        conjunction: operator.toLowerCase(),
-        right: right
-      }
-    }
-  }
-
-  var parseAnd = makeBinaryOpParser('AND', parseAtom)
-  var parseExpression = makeBinaryOpParser('OR', parseAnd)
-
-  var node = parseExpression()
-  if (!node || hasMore()) {
-    throw new Error('Syntax error')
-  }
-  return node
-}
-
-
-/***/ }),
-/* 938 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var licenses = []
-  .concat(__webpack_require__(453))
-  .concat(__webpack_require__(939))
-var exceptions = __webpack_require__(936)
-
-module.exports = function (source) {
-  var index = 0
-
-  function hasMore () {
-    return index < source.length
-  }
-
-  // `value` can be a regexp or a string.
-  // If it is recognized, the matching source string is returned and
-  // the index is incremented. Otherwise `undefined` is returned.
-  function read (value) {
-    if (value instanceof RegExp) {
-      var chars = source.slice(index)
-      var match = chars.match(value)
-      if (match) {
-        index += match[0].length
-        return match[0]
-      }
-    } else {
-      if (source.indexOf(value, index) === index) {
-        index += value.length
-        return value
-      }
-    }
-  }
-
-  function skipWhitespace () {
-    read(/[ ]*/)
-  }
-
-  function operator () {
-    var string
-    var possibilities = ['WITH', 'AND', 'OR', '(', ')', ':', '+']
-    for (var i = 0; i < possibilities.length; i++) {
-      string = read(possibilities[i])
-      if (string) {
-        break
-      }
-    }
-
-    if (string === '+' && index > 1 && source[index - 2] === ' ') {
-      throw new Error('Space before `+`')
-    }
-
-    return string && {
-      type: 'OPERATOR',
-      string: string
-    }
-  }
-
-  function idstring () {
-    return read(/[A-Za-z0-9-.]+/)
-  }
-
-  function expectIdstring () {
-    var string = idstring()
-    if (!string) {
-      throw new Error('Expected idstring at offset ' + index)
-    }
-    return string
-  }
-
-  function documentRef () {
-    if (read('DocumentRef-')) {
-      var string = expectIdstring()
-      return {type: 'DOCUMENTREF', string: string}
-    }
-  }
-
-  function licenseRef () {
-    if (read('LicenseRef-')) {
-      var string = expectIdstring()
-      return {type: 'LICENSEREF', string: string}
-    }
-  }
-
-  function identifier () {
-    var begin = index
-    var string = idstring()
-
-    if (licenses.indexOf(string) !== -1) {
-      return {
-        type: 'LICENSE',
-        string: string
-      }
-    } else if (exceptions.indexOf(string) !== -1) {
-      return {
-        type: 'EXCEPTION',
-        string: string
-      }
-    }
-
-    index = begin
-  }
-
-  // Tries to read the next token. Returns `undefined` if no token is
-  // recognized.
-  function parseToken () {
-    // Ordering matters
-    return (
-      operator() ||
-      documentRef() ||
-      licenseRef() ||
-      identifier()
-    )
-  }
-
-  var tokens = []
-  while (hasMore()) {
-    skipWhitespace()
-    if (!hasMore()) {
-      break
-    }
-
-    var token = parseToken()
-    if (!token) {
-      throw new Error('Unexpected `' + source[index] +
-                      '` at offset ' + index)
-    }
-
-    tokens.push(token)
-  }
-  return tokens
-}
-
-
-/***/ }),
-/* 939 */
-/***/ (function(module, exports) {
-
-module.exports = ["AGPL-3.0","eCos-2.0","GFDL-1.1","GFDL-1.2","GFDL-1.3","GPL-1.0","GPL-2.0-with-autoconf-exception","GPL-2.0-with-bison-exception","GPL-2.0-with-classpath-exception","GPL-2.0-with-font-exception","GPL-2.0-with-GCC-exception","GPL-2.0","GPL-3.0-with-autoconf-exception","GPL-3.0-with-GCC-exception","GPL-3.0","LGPL-2.0","LGPL-2.1","LGPL-3.0","Nunit","StandardML-NJ","wxWindows"]
-
-/***/ }),
-/* 940 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2017 Joyent, Inc.
-
-module.exports = {
-	read: read,
-	verify: verify,
-	sign: sign,
-	signAsync: signAsync,
-	write: write,
-
-	/* Internal private API */
-	fromBuffer: fromBuffer,
-	toBuffer: toBuffer
-};
-
-var assert = __webpack_require__(16);
-var SSHBuffer = __webpack_require__(159);
-var crypto = __webpack_require__(11);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var Identity = __webpack_require__(158);
-var rfc4253 = __webpack_require__(103);
-var Signature = __webpack_require__(75);
-var utils = __webpack_require__(26);
-var Certificate = __webpack_require__(155);
-
-function verify(cert, key) {
-	/*
-	 * We always give an issuerKey, so if our verify() is being called then
-	 * there was no signature. Return false.
-	 */
-	return (false);
-}
-
-var TYPES = {
-	'user': 1,
-	'host': 2
-};
-Object.keys(TYPES).forEach(function (k) { TYPES[TYPES[k]] = k; });
-
-var ECDSA_ALGO = /^ecdsa-sha2-([^@-]+)-cert-v01@openssh.com$/;
-
-function read(buf, options) {
-	if (Buffer.isBuffer(buf))
-		buf = buf.toString('ascii');
-	var parts = buf.trim().split(/[ \t\n]+/g);
-	if (parts.length < 2 || parts.length > 3)
-		throw (new Error('Not a valid SSH certificate line'));
-
-	var algo = parts[0];
-	var data = parts[1];
-
-	data = Buffer.from(data, 'base64');
-	return (fromBuffer(data, algo));
-}
-
-function fromBuffer(data, algo, partial) {
-	var sshbuf = new SSHBuffer({ buffer: data });
-	var innerAlgo = sshbuf.readString();
-	if (algo !== undefined && innerAlgo !== algo)
-		throw (new Error('SSH certificate algorithm mismatch'));
-	if (algo === undefined)
-		algo = innerAlgo;
-
-	var cert = {};
-	cert.signatures = {};
-	cert.signatures.openssh = {};
-
-	cert.signatures.openssh.nonce = sshbuf.readBuffer();
-
-	var key = {};
-	var parts = (key.parts = []);
-	key.type = getAlg(algo);
-
-	var partCount = algs.info[key.type].parts.length;
-	while (parts.length < partCount)
-		parts.push(sshbuf.readPart());
-	assert.ok(parts.length >= 1, 'key must have at least one part');
-
-	var algInfo = algs.info[key.type];
-	if (key.type === 'ecdsa') {
-		var res = ECDSA_ALGO.exec(algo);
-		assert.ok(res !== null);
-		assert.strictEqual(res[1], parts[0].data.toString());
-	}
-
-	for (var i = 0; i < algInfo.parts.length; ++i) {
-		parts[i].name = algInfo.parts[i];
-		if (parts[i].name !== 'curve' &&
-		    algInfo.normalize !== false) {
-			var p = parts[i];
-			p.data = utils.mpNormalize(p.data);
-		}
-	}
-
-	cert.subjectKey = new Key(key);
-
-	cert.serial = sshbuf.readInt64();
-
-	var type = TYPES[sshbuf.readInt()];
-	assert.string(type, 'valid cert type');
-
-	cert.signatures.openssh.keyId = sshbuf.readString();
-
-	var principals = [];
-	var pbuf = sshbuf.readBuffer();
-	var psshbuf = new SSHBuffer({ buffer: pbuf });
-	while (!psshbuf.atEnd())
-		principals.push(psshbuf.readString());
-	if (principals.length === 0)
-		principals = ['*'];
-
-	cert.subjects = principals.map(function (pr) {
-		if (type === 'user')
-			return (Identity.forUser(pr));
-		else if (type === 'host')
-			return (Identity.forHost(pr));
-		throw (new Error('Unknown identity type ' + type));
-	});
-
-	cert.validFrom = int64ToDate(sshbuf.readInt64());
-	cert.validUntil = int64ToDate(sshbuf.readInt64());
-
-	cert.signatures.openssh.critical = sshbuf.readBuffer();
-	cert.signatures.openssh.exts = sshbuf.readBuffer();
-
-	/* reserved */
-	sshbuf.readBuffer();
-
-	var signingKeyBuf = sshbuf.readBuffer();
-	cert.issuerKey = rfc4253.read(signingKeyBuf);
-
-	/*
-	 * OpenSSH certs don't give the identity of the issuer, just their
-	 * public key. So, we use an Identity that matches anything. The
-	 * isSignedBy() function will later tell you if the key matches.
-	 */
-	cert.issuer = Identity.forHost('**');
-
-	var sigBuf = sshbuf.readBuffer();
-	cert.signatures.openssh.signature =
-	    Signature.parse(sigBuf, cert.issuerKey.type, 'ssh');
-
-	if (partial !== undefined) {
-		partial.remainder = sshbuf.remainder();
-		partial.consumed = sshbuf._offset;
-	}
-
-	return (new Certificate(cert));
-}
-
-function int64ToDate(buf) {
-	var i = buf.readUInt32BE(0) * 4294967296;
-	i += buf.readUInt32BE(4);
-	var d = new Date();
-	d.setTime(i * 1000);
-	d.sourceInt64 = buf;
-	return (d);
-}
-
-function dateToInt64(date) {
-	if (date.sourceInt64 !== undefined)
-		return (date.sourceInt64);
-	var i = Math.round(date.getTime() / 1000);
-	var upper = Math.floor(i / 4294967296);
-	var lower = Math.floor(i % 4294967296);
-	var buf = Buffer.alloc(8);
-	buf.writeUInt32BE(upper, 0);
-	buf.writeUInt32BE(lower, 4);
-	return (buf);
-}
-
-function sign(cert, key) {
-	if (cert.signatures.openssh === undefined)
-		cert.signatures.openssh = {};
-	try {
-		var blob = toBuffer(cert, true);
-	} catch (e) {
-		delete (cert.signatures.openssh);
-		return (false);
-	}
-	var sig = cert.signatures.openssh;
-	var hashAlgo = undefined;
-	if (key.type === 'rsa' || key.type === 'dsa')
-		hashAlgo = 'sha1';
-	var signer = key.createSign(hashAlgo);
-	signer.write(blob);
-	sig.signature = signer.sign();
-	return (true);
-}
-
-function signAsync(cert, signer, done) {
-	if (cert.signatures.openssh === undefined)
-		cert.signatures.openssh = {};
-	try {
-		var blob = toBuffer(cert, true);
-	} catch (e) {
-		delete (cert.signatures.openssh);
-		done(e);
-		return;
-	}
-	var sig = cert.signatures.openssh;
-
-	signer(blob, function (err, signature) {
-		if (err) {
-			done(err);
-			return;
-		}
-		try {
-			/*
-			 * This will throw if the signature isn't of a
-			 * type/algo that can be used for SSH.
-			 */
-			signature.toBuffer('ssh');
-		} catch (e) {
-			done(e);
-			return;
-		}
-		sig.signature = signature;
-		done();
-	});
-}
-
-function write(cert, options) {
-	if (options === undefined)
-		options = {};
-
-	var blob = toBuffer(cert);
-	var out = getCertType(cert.subjectKey) + ' ' + blob.toString('base64');
-	if (options.comment)
-		out = out + ' ' + options.comment;
-	return (out);
-}
-
-
-function toBuffer(cert, noSig) {
-	assert.object(cert.signatures.openssh, 'signature for openssh format');
-	var sig = cert.signatures.openssh;
-
-	if (sig.nonce === undefined)
-		sig.nonce = crypto.randomBytes(16);
-	var buf = new SSHBuffer({});
-	buf.writeString(getCertType(cert.subjectKey));
-	buf.writeBuffer(sig.nonce);
-
-	var key = cert.subjectKey;
-	var algInfo = algs.info[key.type];
-	algInfo.parts.forEach(function (part) {
-		buf.writePart(key.part[part]);
-	});
-
-	buf.writeInt64(cert.serial);
-
-	var type = cert.subjects[0].type;
-	assert.notStrictEqual(type, 'unknown');
-	cert.subjects.forEach(function (id) {
-		assert.strictEqual(id.type, type);
-	});
-	type = TYPES[type];
-	buf.writeInt(type);
-
-	if (sig.keyId === undefined) {
-		sig.keyId = cert.subjects[0].type + '_' +
-		    (cert.subjects[0].uid || cert.subjects[0].hostname);
-	}
-	buf.writeString(sig.keyId);
-
-	var sub = new SSHBuffer({});
-	cert.subjects.forEach(function (id) {
-		if (type === TYPES.host)
-			sub.writeString(id.hostname);
-		else if (type === TYPES.user)
-			sub.writeString(id.uid);
-	});
-	buf.writeBuffer(sub.toBuffer());
-
-	buf.writeInt64(dateToInt64(cert.validFrom));
-	buf.writeInt64(dateToInt64(cert.validUntil));
-
-	if (sig.critical === undefined)
-		sig.critical = Buffer.alloc(0);
-	buf.writeBuffer(sig.critical);
-
-	if (sig.exts === undefined)
-		sig.exts = Buffer.alloc(0);
-	buf.writeBuffer(sig.exts);
-
-	/* reserved */
-	buf.writeBuffer(Buffer.alloc(0));
-
-	sub = rfc4253.write(cert.issuerKey);
-	buf.writeBuffer(sub);
-
-	if (!noSig)
-		buf.writeBuffer(sig.signature.toBuffer('ssh'));
-
-	return (buf.toBuffer());
-}
-
-function getAlg(certType) {
-	if (certType === 'ssh-rsa-cert-v01@openssh.com')
-		return ('rsa');
-	if (certType === 'ssh-dss-cert-v01@openssh.com')
-		return ('dsa');
-	if (certType.match(ECDSA_ALGO))
-		return ('ecdsa');
-	if (certType === 'ssh-ed25519-cert-v01@openssh.com')
-		return ('ed25519');
-	throw (new Error('Unsupported cert type ' + certType));
-}
-
-function getCertType(key) {
-	if (key.type === 'rsa')
-		return ('ssh-rsa-cert-v01@openssh.com');
-	if (key.type === 'dsa')
-		return ('ssh-dss-cert-v01@openssh.com');
-	if (key.type === 'ecdsa')
-		return ('ecdsa-sha2-' + key.curve + '-cert-v01@openssh.com');
-	if (key.type === 'ed25519')
-		return ('ssh-ed25519-cert-v01@openssh.com');
-	throw (new Error('Unsupported key type ' + key.type));
-}
-
-
-/***/ }),
-/* 941 */
-/***/ (function(module, exports, __webpack_require__) {
-
-// Copyright 2016 Joyent, Inc.
-
-var x509 = __webpack_require__(457);
-
-module.exports = {
-	read: read,
-	verify: x509.verify,
-	sign: x509.sign,
-	write: write
-};
-
-var assert = __webpack_require__(16);
-var asn1 = __webpack_require__(66);
-var Buffer = __webpack_require__(15).Buffer;
-var algs = __webpack_require__(32);
-var utils = __webpack_require__(26);
-var Key = __webpack_require__(27);
-var PrivateKey = __webpack_require__(33);
-var pem = __webpack_require__(86);
-var Identity = __webpack_require__(158);
-var Signature = __webpack_require__(75);
-var Certificate = __webpack_require__(155);
-
-function read(buf, options) {
-	if (typeof (buf) !== 'string') {
-		assert.buffer(buf, 'buf');
-		buf = buf.toString('ascii');
-	}
-
-	var lines = buf.trim().split(/[\r\n]+/g);
-
-	var m = lines[0].match(/*JSSTYLED*/
-	    /[-]+[ ]*BEGIN CERTIFICATE[ ]*[-]+/);
-	assert.ok(m, 'invalid PEM header');
-
-	var m2 = lines[lines.length - 1].match(/*JSSTYLED*/
-	    /[-]+[ ]*END CERTIFICATE[ ]*[-]+/);
-	assert.ok(m2, 'invalid PEM footer');
-
-	var headers = {};
-	while (true) {
-		lines = lines.slice(1);
-		m = lines[0].match(/*JSSTYLED*/
-		    /^([A-Za-z0-9-]+): (.+)$/);
-		if (!m)
-			break;
-		headers[m[1].toLowerCase()] = m[2];
-	}
-
-	/* Chop off the first and last lines */
-	lines = lines.slice(0, -1).join('');
-	buf = Buffer.from(lines, 'base64');
-
-	return (x509.read(buf, options));
-}
-
-function write(cert, options) {
-	var dbuf = x509.write(cert, options);
-
-	var header = 'CERTIFICATE';
-	var tmp = dbuf.toString('base64');
-	var len = tmp.length + (tmp.length / 64) +
-	    18 + 16 + header.length*2 + 10;
-	var buf = Buffer.alloc(len);
-	var o = 0;
-	o += buf.write('-----BEGIN ' + header + '-----\n', o);
-	for (var i = 0; i < tmp.length; ) {
-		var limit = i + 64;
-		if (limit > tmp.length)
-			limit = tmp.length;
-		o += buf.write(tmp.slice(i, limit), o);
-		buf[o++] = 10;
-		i = limit;
-	}
-	o += buf.write('-----END ' + header + '-----\n', o);
-
-	return (buf.slice(0, o));
-}
-
-
-/***/ }),
-/* 942 */
-/***/ (function(module, exports) {
-
-module.exports = shift
-
-function shift (stream) {
-  var rs = stream._readableState
-  if (!rs) return null
-  return rs.objectMode ? stream.read() : stream.read(getStateLength(rs))
-}
-
-function getStateLength (state) {
-  if (state.buffer.length) {
-    // Since node 6.3.0 state.buffer is a BufferList not an array
-    if (state.buffer.head) {
-      return state.buffer.head.data.length
-    }
-
-    return state.buffer[0].length
-  }
-
-  return state.length
-}
-
-
-/***/ }),
-/* 943 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-module.exports = function (str) {
-	return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
-		return '%' + c.charCodeAt(0).toString(16).toUpperCase();
-	});
-};
-
-
-/***/ }),
-/* 944 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var resolvePkg = __webpack_require__(679);
-
-/* @private
- *
- * given the name of a descendent module this module locates and returns its
- * package.json. In addition, it provides the baseDir.
- *
- * @method pkg
- * @param {String} name
- * @param {String} dir (optional) root directory to begin resolution
- */
-module.exports = function pkg(name, dir) {
-  if (name !== './') { name += '/'; }
-
-  var packagePath = resolvePkg(name, dir);
-  if (packagePath === null) { return null; }
-
-  var thePackage = require(packagePath);
-
-  thePackage.baseDir = packagePath.slice(0, packagePath.length - 12 /* index of `/package.json` */);
-
-  return thePackage;
-};
-
-
-/***/ }),
-/* 945 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var stripAnsi = __webpack_require__(947);
-var codePointAt = __webpack_require__(607);
-var isFullwidthCodePoint = __webpack_require__(946);
-
-// https://github.com/nodejs/io.js/blob/cff7300a578be1b10001f2d967aaedc88aee6402/lib/readline.js#L1345
-module.exports = function (str) {
-	if (typeof str !== 'string' || str.length === 0) {
-		return 0;
-	}
-
-	var width = 0;
-
-	str = stripAnsi(str);
-
-	for (var i = 0; i < str.length; i++) {
-		var code = codePointAt(str, i);
-
-		// ignore control characters
-		if (code <= 0x1f || (code >= 0x7f && code <= 0x9f)) {
-			continue;
-		}
-
-		// surrogates
-		if (code >= 0x10000) {
-			i++;
-		}
-
-		if (isFullwidthCodePoint(code)) {
-			width += 2;
-		} else {
-			width++;
-		}
-	}
-
-	return width;
-};
-
-
-/***/ }),
-/* 946 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var numberIsNan = __webpack_require__(767);
-
-module.exports = function (x) {
-	if (numberIsNan(x)) {
-		return false;
-	}
-
-	// https://github.com/nodejs/io.js/blob/cff7300a578be1b10001f2d967aaedc88aee6402/lib/readline.js#L1369
-
-	// code points are derived from:
-	// http://www.unix.org/Public/UNIDATA/EastAsianWidth.txt
-	if (x >= 0x1100 && (
-		x <= 0x115f ||  // Hangul Jamo
-		0x2329 === x || // LEFT-POINTING ANGLE BRACKET
-		0x232a === x || // RIGHT-POINTING ANGLE BRACKET
-		// CJK Radicals Supplement .. Enclosed CJK Letters and Months
-		(0x2e80 <= x && x <= 0x3247 && x !== 0x303f) ||
-		// Enclosed CJK Letters and Months .. CJK Unified Ideographs Extension A
-		0x3250 <= x && x <= 0x4dbf ||
-		// CJK Unified Ideographs .. Yi Radicals
-		0x4e00 <= x && x <= 0xa4c6 ||
-		// Hangul Jamo Extended-A
-		0xa960 <= x && x <= 0xa97c ||
-		// Hangul Syllables
-		0xac00 <= x && x <= 0xd7a3 ||
-		// CJK Compatibility Ideographs
-		0xf900 <= x && x <= 0xfaff ||
-		// Vertical Forms
-		0xfe10 <= x && x <= 0xfe19 ||
-		// CJK Compatibility Forms .. Small Form Variants
-		0xfe30 <= x && x <= 0xfe6b ||
-		// Halfwidth and Fullwidth Forms
-		0xff01 <= x && x <= 0xff60 ||
-		0xffe0 <= x && x <= 0xffe6 ||
-		// Kana Supplement
-		0x1b000 <= x && x <= 0x1b001 ||
-		// Enclosed Ideographic Supplement
-		0x1f200 <= x && x <= 0x1f251 ||
-		// CJK Unified Ideographs Extension B .. Tertiary Ideographic Plane
-		0x20000 <= x && x <= 0x3fffd)) {
-		return true;
-	}
-
-	return false;
-}
-
-
-/***/ }),
-/* 947 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-var ansiRegex = __webpack_require__(505)();
-
-module.exports = function (str) {
-	return typeof str === 'string' ? str.replace(ansiRegex, '') : str;
-};
-
-
-/***/ }),
-/* 948 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-module.exports = () => {
-	const pattern = [
-		'[\\u001B\\u009B][[\\]()#;?]*(?:(?:(?:[a-zA-Z\\d]*(?:;[a-zA-Z\\d]*)*)?\\u0007)',
-		'(?:(?:\\d{1,4}(?:;\\d{0,4})*)?[\\dA-PRZcf-ntqry=><~]))'
-	].join('|');
-
-	return new RegExp(pattern, 'g');
-};
-
-
-/***/ }),
-/* 949 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var util = __webpack_require__(3)
-var bl = __webpack_require__(592)
-var xtend = __webpack_require__(465)
-var headers = __webpack_require__(459)
-
-var Writable = __webpack_require__(102).Writable
-var PassThrough = __webpack_require__(102).PassThrough
-
-var noop = function () {}
-
-var overflow = function (size) {
-  size &= 511
-  return size && 512 - size
-}
-
-var emptyStream = function (self, offset) {
-  var s = new Source(self, offset)
-  s.end()
-  return s
-}
-
-var mixinPax = function (header, pax) {
-  if (pax.path) header.name = pax.path
-  if (pax.linkpath) header.linkname = pax.linkpath
-  if (pax.size) header.size = parseInt(pax.size, 10)
-  header.pax = pax
-  return header
-}
-
-var Source = function (self, offset) {
-  this._parent = self
-  this.offset = offset
-  PassThrough.call(this)
-}
-
-util.inherits(Source, PassThrough)
-
-Source.prototype.destroy = function (err) {
-  this._parent.destroy(err)
-}
-
-var Extract = function (opts) {
-  if (!(this instanceof Extract)) return new Extract(opts)
-  Writable.call(this, opts)
-
-  opts = opts || {}
-
-  this._offset = 0
-  this._buffer = bl()
-  this._missing = 0
-  this._partial = false
-  this._onparse = noop
-  this._header = null
-  this._stream = null
-  this._overflow = null
-  this._cb = null
-  this._locked = false
-  this._destroyed = false
-  this._pax = null
-  this._paxGlobal = null
-  this._gnuLongPath = null
-  this._gnuLongLinkPath = null
-
-  var self = this
-  var b = self._buffer
-
-  var oncontinue = function () {
-    self._continue()
-  }
-
-  var onunlock = function (err) {
-    self._locked = false
-    if (err) return self.destroy(err)
-    if (!self._stream) oncontinue()
-  }
-
-  var onstreamend = function () {
-    self._stream = null
-    var drain = overflow(self._header.size)
-    if (drain) self._parse(drain, ondrain)
-    else self._parse(512, onheader)
-    if (!self._locked) oncontinue()
-  }
-
-  var ondrain = function () {
-    self._buffer.consume(overflow(self._header.size))
-    self._parse(512, onheader)
-    oncontinue()
-  }
-
-  var onpaxglobalheader = function () {
-    var size = self._header.size
-    self._paxGlobal = headers.decodePax(b.slice(0, size))
-    b.consume(size)
-    onstreamend()
-  }
-
-  var onpaxheader = function () {
-    var size = self._header.size
-    self._pax = headers.decodePax(b.slice(0, size))
-    if (self._paxGlobal) self._pax = xtend(self._paxGlobal, self._pax)
-    b.consume(size)
-    onstreamend()
-  }
-
-  var ongnulongpath = function () {
-    var size = self._header.size
-    this._gnuLongPath = headers.decodeLongPath(b.slice(0, size), opts.filenameEncoding)
-    b.consume(size)
-    onstreamend()
-  }
-
-  var ongnulonglinkpath = function () {
-    var size = self._header.size
-    this._gnuLongLinkPath = headers.decodeLongPath(b.slice(0, size), opts.filenameEncoding)
-    b.consume(size)
-    onstreamend()
-  }
-
-  var onheader = function () {
-    var offset = self._offset
-    var header
-    try {
-      header = self._header = headers.decode(b.slice(0, 512), opts.filenameEncoding)
-    } catch (err) {
-      self.emit('error', err)
-    }
-    b.consume(512)
-
-    if (!header) {
-      self._parse(512, onheader)
-      oncontinue()
-      return
-    }
-    if (header.type === 'gnu-long-path') {
-      self._parse(header.size, ongnulongpath)
-      oncontinue()
-      return
-    }
-    if (header.type === 'gnu-long-link-path') {
-      self._parse(header.size, ongnulonglinkpath)
-      oncontinue()
-      return
-    }
-    if (header.type === 'pax-global-header') {
-      self._parse(header.size, onpaxglobalheader)
-      oncontinue()
-      return
-    }
-    if (header.type === 'pax-header') {
-      self._parse(header.size, onpaxheader)
-      oncontinue()
-      return
-    }
-
-    if (self._gnuLongPath) {
-      header.name = self._gnuLongPath
-      self._gnuLongPath = null
-    }
-
-    if (self._gnuLongLinkPath) {
-      header.linkname = self._gnuLongLinkPath
-      self._gnuLongLinkPath = null
-    }
-
-    if (self._pax) {
-      self._header = header = mixinPax(header, self._pax)
-      self._pax = null
-    }
-
-    self._locked = true
-
-    if (!header.size || header.type === 'directory') {
-      self._parse(512, onheader)
-      self.emit('entry', header, emptyStream(self, offset), onunlock)
-      return
-    }
-
-    self._stream = new Source(self, offset)
-
-    self.emit('entry', header, self._stream, onunlock)
-    self._parse(header.size, onstreamend)
-    oncontinue()
-  }
-
-  this._onheader = onheader
-  this._parse(512, onheader)
-}
-
-util.inherits(Extract, Writable)
-
-Extract.prototype.destroy = function (err) {
-  if (this._destroyed) return
-  this._destroyed = true
-
-  if (err) this.emit('error', err)
-  this.emit('close')
-  if (this._stream) this._stream.emit('close')
-}
-
-Extract.prototype._parse = function (size, onparse) {
-  if (this._destroyed) return
-  this._offset += size
-  this._missing = size
-  if (onparse === this._onheader) this._partial = false
-  this._onparse = onparse
-}
-
-Extract.prototype._continue = function () {
-  if (this._destroyed) return
-  var cb = this._cb
-  this._cb = noop
-  if (this._overflow) this._write(this._overflow, undefined, cb)
-  else cb()
-}
-
-Extract.prototype._write = function (data, enc, cb) {
-  if (this._destroyed) return
-
-  var s = this._stream
-  var b = this._buffer
-  var missing = this._missing
-  if (data.length) this._partial = true
-
-  // we do not reach end-of-chunk now. just forward it
-
-  if (data.length < missing) {
-    this._missing -= data.length
-    this._overflow = null
-    if (s) return s.write(data, cb)
-    b.append(data)
-    return cb()
-  }
-
-  // end-of-chunk. the parser should call cb.
-
-  this._cb = cb
-  this._missing = 0
-
-  var overflow = null
-  if (data.length > missing) {
-    overflow = data.slice(missing)
-    data = data.slice(0, missing)
-  }
-
-  if (s) s.end(data)
-  else b.append(data)
-
-  this._overflow = overflow
-  this._onparse()
-}
-
-Extract.prototype._final = function (cb) {
-  if (this._partial) return this.destroy(new Error('Unexpected end of data'))
-  cb()
-}
-
-module.exports = Extract
-
-
-/***/ }),
-/* 950 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var constants = __webpack_require__(651)
-var eos = __webpack_require__(173)
-var util = __webpack_require__(3)
-var alloc = __webpack_require__(380)
-var toBuffer = __webpack_require__(462)
-
-var Readable = __webpack_require__(102).Readable
-var Writable = __webpack_require__(102).Writable
-var StringDecoder = __webpack_require__(333).StringDecoder
-
-var headers = __webpack_require__(459)
-
-var DMODE = parseInt('755', 8)
-var FMODE = parseInt('644', 8)
-
-var END_OF_TAR = alloc(1024)
-
-var noop = function () {}
-
-var overflow = function (self, size) {
-  size &= 511
-  if (size) self.push(END_OF_TAR.slice(0, 512 - size))
-}
-
-function modeToType (mode) {
-  switch (mode & constants.S_IFMT) {
-    case constants.S_IFBLK: return 'block-device'
-    case constants.S_IFCHR: return 'character-device'
-    case constants.S_IFDIR: return 'directory'
-    case constants.S_IFIFO: return 'fifo'
-    case constants.S_IFLNK: return 'symlink'
-  }
-
-  return 'file'
-}
-
-var Sink = function (to) {
-  Writable.call(this)
-  this.written = 0
-  this._to = to
-  this._destroyed = false
-}
-
-util.inherits(Sink, Writable)
-
-Sink.prototype._write = function (data, enc, cb) {
-  this.written += data.length
-  if (this._to.push(data)) return cb()
-  this._to._drain = cb
-}
-
-Sink.prototype.destroy = function () {
-  if (this._destroyed) return
-  this._destroyed = true
-  this.emit('close')
-}
-
-var LinkSink = function () {
-  Writable.call(this)
-  this.linkname = ''
-  this._decoder = new StringDecoder('utf-8')
-  this._destroyed = false
-}
-
-util.inherits(LinkSink, Writable)
-
-LinkSink.prototype._write = function (data, enc, cb) {
-  this.linkname += this._decoder.write(data)
-  cb()
-}
-
-LinkSink.prototype.destroy = function () {
-  if (this._destroyed) return
-  this._destroyed = true
-  this.emit('close')
-}
-
-var Void = function () {
-  Writable.call(this)
-  this._destroyed = false
-}
-
-util.inherits(Void, Writable)
-
-Void.prototype._write = function (data, enc, cb) {
-  cb(new Error('No body allowed for this entry'))
-}
-
-Void.prototype.destroy = function () {
-  if (this._destroyed) return
-  this._destroyed = true
-  this.emit('close')
-}
-
-var Pack = function (opts) {
-  if (!(this instanceof Pack)) return new Pack(opts)
-  Readable.call(this, opts)
-
-  this._drain = noop
-  this._finalized = false
-  this._finalizing = false
-  this._destroyed = false
-  this._stream = null
-}
-
-util.inherits(Pack, Readable)
-
-Pack.prototype.entry = function (header, buffer, callback) {
-  if (this._stream) throw new Error('already piping an entry')
-  if (this._finalized || this._destroyed) return
-
-  if (typeof buffer === 'function') {
-    callback = buffer
-    buffer = null
-  }
-
-  if (!callback) callback = noop
-
-  var self = this
-
-  if (!header.size || header.type === 'symlink') header.size = 0
-  if (!header.type) header.type = modeToType(header.mode)
-  if (!header.mode) header.mode = header.type === 'directory' ? DMODE : FMODE
-  if (!header.uid) header.uid = 0
-  if (!header.gid) header.gid = 0
-  if (!header.mtime) header.mtime = new Date()
-
-  if (typeof buffer === 'string') buffer = toBuffer(buffer)
-  if (Buffer.isBuffer(buffer)) {
-    header.size = buffer.length
-    this._encode(header)
-    this.push(buffer)
-    overflow(self, header.size)
-    process.nextTick(callback)
-    return new Void()
-  }
-
-  if (header.type === 'symlink' && !header.linkname) {
-    var linkSink = new LinkSink()
-    eos(linkSink, function (err) {
-      if (err) { // stream was closed
-        self.destroy()
-        return callback(err)
-      }
-
-      header.linkname = linkSink.linkname
-      self._encode(header)
-      callback()
-    })
-
-    return linkSink
-  }
-
-  this._encode(header)
-
-  if (header.type !== 'file' && header.type !== 'contiguous-file') {
-    process.nextTick(callback)
-    return new Void()
-  }
-
-  var sink = new Sink(this)
-
-  this._stream = sink
-
-  eos(sink, function (err) {
-    self._stream = null
-
-    if (err) { // stream was closed
-      self.destroy()
-      return callback(err)
-    }
-
-    if (sink.written !== header.size) { // corrupting tar
-      self.destroy()
-      return callback(new Error('size mismatch'))
-    }
-
-    overflow(self, header.size)
-    if (self._finalizing) self.finalize()
-    callback()
-  })
-
-  return sink
-}
-
-Pack.prototype.finalize = function () {
-  if (this._stream) {
-    this._finalizing = true
-    return
-  }
-
-  if (this._finalized) return
-  this._finalized = true
-  this.push(END_OF_TAR)
-  this.push(null)
-}
-
-Pack.prototype.destroy = function (err) {
-  if (this._destroyed) return
-  this._destroyed = true
-
-  if (err) this.emit('error', err)
-  this.emit('close')
-  if (this._stream && this._stream.destroy) this._stream.destroy()
-}
-
-Pack.prototype._encode = function (header) {
-  if (!header.pax) {
-    var buf = headers.encode(header)
-    if (buf) {
-      this.push(buf)
-      return
-    }
-  }
-  this._encodePax(header)
-}
-
-Pack.prototype._encodePax = function (header) {
-  var paxHeader = headers.encodePax({
-    name: header.name,
-    linkname: header.linkname,
-    pax: header.pax
-  })
-
-  var newHeader = {
-    name: 'PaxHeader',
-    mode: header.mode,
-    uid: header.uid,
-    gid: header.gid,
-    size: paxHeader.length,
-    mtime: header.mtime,
-    type: 'pax-header',
-    linkname: header.linkname && 'PaxHeader',
-    uname: header.uname,
-    gname: header.gname,
-    devmajor: header.devmajor,
-    devminor: header.devminor
-  }
-
-  this.push(headers.encode(newHeader))
-  this.push(paxHeader)
-  overflow(this, paxHeader.length)
-
-  newHeader.size = header.size
-  newHeader.type = header.type
-  this.push(headers.encode(newHeader))
-}
-
-Pack.prototype._read = function (n) {
-  var drain = this._drain
-  this._drain = noop
-  drain()
-}
-
-module.exports = Pack
-
-
-/***/ }),
-/* 951 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-var thenify = __webpack_require__(952)
-
-module.exports = thenifyAll
-thenifyAll.withCallback = withCallback
-thenifyAll.thenify = thenify
-
-/**
- * Promisifies all the selected functions in an object.
- *
- * @param {Object} source the source object for the async functions
- * @param {Object} [destination] the destination to set all the promisified methods
- * @param {Array} [methods] an array of method names of `source`
- * @return {Object}
- * @api public
- */
-
-function thenifyAll(source, destination, methods) {
-  return promisifyAll(source, destination, methods, thenify)
-}
-
-/**
- * Promisifies all the selected functions in an object and backward compatible with callback.
- *
- * @param {Object} source the source object for the async functions
- * @param {Object} [destination] the destination to set all the promisified methods
- * @param {Array} [methods] an array of method names of `source`
- * @return {Object}
- * @api public
- */
-
-function withCallback(source, destination, methods) {
-  return promisifyAll(source, destination, methods, thenify.withCallback)
-}
-
-function promisifyAll(source, destination, methods, promisify) {
-  if (!destination) {
-    destination = {};
-    methods = Object.keys(source)
-  }
-
-  if (Array.isArray(destination)) {
-    methods = destination
-    destination = {}
-  }
-
-  if (!methods) {
-    methods = Object.keys(source)
-  }
-
-  if (typeof source === 'function') destination = promisify(source)
-
-  methods.forEach(function (name) {
-    // promisify only if it's a function
-    if (typeof source[name] === 'function') destination[name] = promisify(source[name])
-  })
-
-  // proxy the rest
-  Object.keys(source).forEach(function (name) {
-    if (deprecated(source, name)) return
-    if (destination[name]) return
-    destination[name] = source[name]
-  })
-
-  return destination
-}
-
-function deprecated(source, name) {
-  var desc = Object.getOwnPropertyDescriptor(source, name)
-  if (!desc || !desc.get) return false
-  if (desc.get.name === 'deprecated') return true
-  return false
-}
-
-
-/***/ }),
-/* 952 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-var Promise = __webpack_require__(345)
-var assert = __webpack_require__(28)
-
-module.exports = thenify
-
-/**
- * Turn async functions into promises
- *
- * @param {Function} $$__fn__$$
- * @return {Function}
- * @api public
- */
-
-function thenify($$__fn__$$, options) {
-  assert(typeof $$__fn__$$ === 'function')
-  return eval(createWrapper($$__fn__$$.name, options))
-}
-
-/**
- * Turn async functions into promises and backward compatible with callback
- *
- * @param {Function} $$__fn__$$
- * @return {Function}
- * @api public
- */
-
-thenify.withCallback = function ($$__fn__$$, options) {
-  assert(typeof $$__fn__$$ === 'function')
-  options = options || {}
-  options.withCallback = true
-  if (options.multiArgs === undefined) options.multiArgs = true
-  return eval(createWrapper($$__fn__$$.name, options))
-}
-
-function createCallback(resolve, reject, multiArgs) {
-  return function(err, value) {
-    if (err) return reject(err)
-    var length = arguments.length
-
-    if (length <= 2 || !multiArgs) return resolve(value)
-
-    if (Array.isArray(multiArgs)) {
-      var values = {}
-      for (var i = 1; i < length; i++) values[multiArgs[i - 1]] = arguments[i]
-      return resolve(values)
-    }
-
-    var values = new Array(length - 1)
-    for (var i = 1; i < length; ++i) values[i - 1] = arguments[i]
-    resolve(values)
-  }
-}
-
-function createWrapper(name, options) {
-  name = (name || '').replace(/\s|bound(?!$)/g, '')
-  options = options || {}
-  // default to true
-  var multiArgs = options.multiArgs !== undefined ? options.multiArgs : true
-  multiArgs = 'var multiArgs = ' + JSON.stringify(multiArgs) + '\n'
-
-  var withCallback = options.withCallback ?
-    'var lastType = typeof arguments[len - 1]\n'
-    + 'if (lastType === "function") return $$__fn__$$.apply(self, arguments)\n'
-   : ''
-
-  return '(function ' + name + '() {\n'
-    + 'var self = this\n'
-    + 'var len = arguments.length\n'
-    + multiArgs
-    + withCallback
-    + 'var args = new Array(len + 1)\n'
-    + 'for (var i = 0; i < len; ++i) args[i] = arguments[i]\n'
-    + 'var lastIndex = i\n'
-    + 'return new Promise(function (resolve, reject) {\n'
-      + 'args[lastIndex] = createCallback(resolve, reject, multiArgs)\n'
-      + '$$__fn__$$.apply(self, args)\n'
-    + '})\n'
-  + '})'
-}
-
-
-/***/ }),
-/* 953 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var Stream = __webpack_require__(23)
-
-// through
-//
-// a stream that does nothing but re-emit the input.
-// useful for aggregating a series of changing but not ending streams into one stream)
-
-exports = module.exports = through
-through.through = through
-
-//create a readable writable stream.
-
-function through (write, end, opts) {
-  write = write || function (data) { this.queue(data) }
-  end = end || function () { this.queue(null) }
-
-  var ended = false, destroyed = false, buffer = [], _ended = false
-  var stream = new Stream()
-  stream.readable = stream.writable = true
-  stream.paused = false
-
-//  stream.autoPause   = !(opts && opts.autoPause   === false)
-  stream.autoDestroy = !(opts && opts.autoDestroy === false)
-
-  stream.write = function (data) {
-    write.call(this, data)
-    return !stream.paused
-  }
-
-  function drain() {
-    while(buffer.length && !stream.paused) {
-      var data = buffer.shift()
-      if(null === data)
-        return stream.emit('end')
-      else
-        stream.emit('data', data)
-    }
-  }
-
-  stream.queue = stream.push = function (data) {
-//    console.error(ended)
-    if(_ended) return stream
-    if(data === null) _ended = true
-    buffer.push(data)
-    drain()
-    return stream
-  }
-
-  //this will be registered as the first 'end' listener
-  //must call destroy next tick, to make sure we're after any
-  //stream piped from here.
-  //this is only a problem if end is not emitted synchronously.
-  //a nicer way to do this is to make sure this is the last listener for 'end'
-
-  stream.on('end', function () {
-    stream.readable = false
-    if(!stream.writable && stream.autoDestroy)
-      process.nextTick(function () {
-        stream.destroy()
-      })
-  })
-
-  function _end () {
-    stream.writable = false
-    end.call(stream)
-    if(!stream.readable && stream.autoDestroy)
-      stream.destroy()
-  }
-
-  stream.end = function (data) {
-    if(ended) return
-    ended = true
-    if(arguments.length) stream.write(data)
-    _end() // will emit or queue
-    return stream
-  }
-
-  stream.destroy = function () {
-    if(destroyed) return
-    destroyed = true
-    ended = true
-    buffer.length = 0
-    stream.writable = stream.readable = false
-    stream.emit('close')
-    return stream
-  }
-
-  stream.pause = function () {
-    if(stream.paused) return
-    stream.paused = true
-    return stream
-  }
-
-  stream.resume = function () {
-    if(stream.paused) {
-      stream.paused = false
-      stream.emit('resume')
-    }
-    drain()
-    //may have become paused again,
-    //as drain emits 'data'.
-    if(!stream.paused)
-      stream.emit('drain')
-    return stream
-  }
-  return stream
-}
-
-
-
-/***/ }),
-/* 954 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*!
- * Tmp
- *
- * Copyright (c) 2011-2017 KARASZI Istvan <github@spam.raszi.hu>
- *
- * MIT Licensed
- */
-
-/*
- * Module dependencies.
- */
-const fs = __webpack_require__(5);
-const path = __webpack_require__(0);
-const crypto = __webpack_require__(11);
-const osTmpDir = __webpack_require__(772);
-const _c = process.binding('constants');
-
-/*
- * The working inner variables.
- */
-const
-  /**
-   * The temporary directory.
-   * @type {string}
-   */
-  tmpDir = osTmpDir(),
-
-  // the random characters to choose from
-  RANDOM_CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz',
-
-  TEMPLATE_PATTERN = /XXXXXX/,
-
-  DEFAULT_TRIES = 3,
-
-  CREATE_FLAGS = (_c.O_CREAT || _c.fs.O_CREAT) | (_c.O_EXCL || _c.fs.O_EXCL) | (_c.O_RDWR || _c.fs.O_RDWR),
-
-  EBADF = _c.EBADF || _c.os.errno.EBADF,
-  ENOENT = _c.ENOENT || _c.os.errno.ENOENT,
-
-  DIR_MODE = 448 /* 0o700 */,
-  FILE_MODE = 384 /* 0o600 */,
-
-  // this will hold the objects need to be removed on exit
-  _removeObjects = [];
-
-var
-  _gracefulCleanup = false,
-  _uncaughtException = false;
-
-/**
- * Random name generator based on crypto.
- * Adapted from http://blog.tompawlak.org/how-to-generate-random-values-nodejs-javascript
- *
- * @param {number} howMany
- * @returns {string} the generated random name
- * @private
- */
-function _randomChars(howMany) {
-  var
-    value = [],
-    rnd = null;
-
-  // make sure that we do not fail because we ran out of entropy
-  try {
-    rnd = crypto.randomBytes(howMany);
-  } catch (e) {
-    rnd = crypto.pseudoRandomBytes(howMany);
-  }
-
-  for (var i = 0; i < howMany; i++) {
-    value.push(RANDOM_CHARS[rnd[i] % RANDOM_CHARS.length]);
-  }
-
-  return value.join('');
-}
-
-/**
- * Checks whether the `obj` parameter is defined or not.
- *
- * @param {Object} obj
- * @returns {boolean} true if the object is undefined
- * @private
- */
-function _isUndefined(obj) {
-  return typeof obj === 'undefined';
-}
-
-/**
- * Parses the function arguments.
- *
- * This function helps to have optional arguments.
- *
- * @param {(Options|Function)} options
- * @param {Function} callback
- * @returns {Array} parsed arguments
- * @private
- */
-function _parseArguments(options, callback) {
-  if (typeof options == 'function') {
-    return [callback || {}, options];
-  }
-
-  if (_isUndefined(options)) {
-    return [{}, callback];
-  }
-
-  return [options, callback];
-}
-
-/**
- * Generates a new temporary name.
- *
- * @param {Object} opts
- * @returns {string} the new random name according to opts
- * @private
- */
-function _generateTmpName(opts) {
-  if (opts.name) {
-    return path.join(opts.dir || tmpDir, opts.name);
-  }
-
-  // mkstemps like template
-  if (opts.template) {
-    return opts.template.replace(TEMPLATE_PATTERN, _randomChars(6));
-  }
-
-  // prefix and postfix
-  const name = [
-    opts.prefix || 'tmp-',
-    process.pid,
-    _randomChars(12),
-    opts.postfix || ''
-  ].join('');
-
-  return path.join(opts.dir || tmpDir, name);
-}
-
-/**
- * Gets a temporary file name.
- *
- * @param {(Options|tmpNameCallback)} options options or callback
- * @param {?tmpNameCallback} callback the callback function
- */
-function tmpName(options, callback) {
-  var
-    args = _parseArguments(options, callback),
-    opts = args[0],
-    cb = args[1],
-    tries = opts.name ? 1 : opts.tries || DEFAULT_TRIES;
-
-  if (isNaN(tries) || tries < 0)
-    return cb(new Error('Invalid tries'));
-
-  if (opts.template && !opts.template.match(TEMPLATE_PATTERN))
-    return cb(new Error('Invalid template provided'));
-
-  (function _getUniqueName() {
-    const name = _generateTmpName(opts);
-
-    // check whether the path exists then retry if needed
-    fs.stat(name, function (err) {
-      if (!err) {
-        if (tries-- > 0) return _getUniqueName();
-
-        return cb(new Error('Could not get a unique tmp filename, max tries reached ' + name));
-      }
-
-      cb(null, name);
-    });
-  }());
-}
-
-/**
- * Synchronous version of tmpName.
- *
- * @param {Object} options
- * @returns {string} the generated random name
- * @throws {Error} if the options are invalid or could not generate a filename
- */
-function tmpNameSync(options) {
-  var
-    args = _parseArguments(options),
-    opts = args[0],
-    tries = opts.name ? 1 : opts.tries || DEFAULT_TRIES;
-
-  if (isNaN(tries) || tries < 0)
-    throw new Error('Invalid tries');
-
-  if (opts.template && !opts.template.match(TEMPLATE_PATTERN))
-    throw new Error('Invalid template provided');
-
-  do {
-    const name = _generateTmpName(opts);
-    try {
-      fs.statSync(name);
-    } catch (e) {
-      return name;
-    }
-  } while (tries-- > 0);
-
-  throw new Error('Could not get a unique tmp filename, max tries reached');
-}
-
-/**
- * Creates and opens a temporary file.
- *
- * @param {(Options|fileCallback)} options the config options or the callback function
- * @param {?fileCallback} callback
- */
-function file(options, callback) {
-  var
-    args = _parseArguments(options, callback),
-    opts = args[0],
-    cb = args[1];
-
-  opts.postfix = (_isUndefined(opts.postfix)) ? '.tmp' : opts.postfix;
-
-  // gets a temporary filename
-  tmpName(opts, function _tmpNameCreated(err, name) {
-    if (err) return cb(err);
-
-    // create and open the file
-    fs.open(name, CREATE_FLAGS, opts.mode || FILE_MODE, function _fileCreated(err, fd) {
-      if (err) return cb(err);
-
-      if (opts.discardDescriptor) {
-        return fs.close(fd, function _discardCallback(err) {
-          if (err) {
-            // Low probability, and the file exists, so this could be
-            // ignored.  If it isn't we certainly need to unlink the
-            // file, and if that fails too its error is more
-            // important.
-            try {
-              fs.unlinkSync(name);
-            } catch (e) {
-              if (!isENOENT(e)) {
-                err = e;
-              }
-            }
-            return cb(err);
-          }
-          cb(null, name, undefined, _prepareTmpFileRemoveCallback(name, -1, opts));
-        });
-      }
-      if (opts.detachDescriptor) {
-        return cb(null, name, fd, _prepareTmpFileRemoveCallback(name, -1, opts));
-      }
-      cb(null, name, fd, _prepareTmpFileRemoveCallback(name, fd, opts));
-    });
-  });
-}
-
-/**
- * Synchronous version of file.
- *
- * @param {Options} options
- * @returns {FileSyncObject} object consists of name, fd and removeCallback
- * @throws {Error} if cannot create a file
- */
-function fileSync(options) {
-  var
-    args = _parseArguments(options),
-    opts = args[0];
-
-  opts.postfix = opts.postfix || '.tmp';
-
-  const discardOrDetachDescriptor = opts.discardDescriptor || opts.detachDescriptor;
-  const name = tmpNameSync(opts);
-  var fd = fs.openSync(name, CREATE_FLAGS, opts.mode || FILE_MODE);
-  if (opts.discardDescriptor) {
-    fs.closeSync(fd); 
-    fd = undefined;
-  }
-
-  return {
-    name: name,
-    fd: fd,
-    removeCallback: _prepareTmpFileRemoveCallback(name, discardOrDetachDescriptor ? -1 : fd, opts)
-  };
-}
-
-/**
- * Removes files and folders in a directory recursively.
- *
- * @param {string} root
- * @private
- */
-function _rmdirRecursiveSync(root) {
-  const dirs = [root];
-
-  do {
-    var
-      dir = dirs.pop(),
-      deferred = false,
-      files = fs.readdirSync(dir);
-
-    for (var i = 0, length = files.length; i < length; i++) {
-      var
-        file = path.join(dir, files[i]),
-        stat = fs.lstatSync(file); // lstat so we don't recurse into symlinked directories
-
-      if (stat.isDirectory()) {
-        if (!deferred) {
-          deferred = true;
-          dirs.push(dir);
-        }
-        dirs.push(file);
-      } else {
-        fs.unlinkSync(file);
-      }
-    }
-
-    if (!deferred) {
-      fs.rmdirSync(dir);
-    }
-  } while (dirs.length !== 0);
-}
-
-/**
- * Creates a temporary directory.
- *
- * @param {(Options|dirCallback)} options the options or the callback function
- * @param {?dirCallback} callback
- */
-function dir(options, callback) {
-  var
-    args = _parseArguments(options, callback),
-    opts = args[0],
-    cb = args[1];
-
-  // gets a temporary filename
-  tmpName(opts, function _tmpNameCreated(err, name) {
-    if (err) return cb(err);
-
-    // create the directory
-    fs.mkdir(name, opts.mode || DIR_MODE, function _dirCreated(err) {
-      if (err) return cb(err);
-
-      cb(null, name, _prepareTmpDirRemoveCallback(name, opts));
-    });
-  });
-}
-
-/**
- * Synchronous version of dir.
- *
- * @param {Options} options
- * @returns {DirSyncObject} object consists of name and removeCallback
- * @throws {Error} if it cannot create a directory
- */
-function dirSync(options) {
-  var
-    args = _parseArguments(options),
-    opts = args[0];
-
-  const name = tmpNameSync(opts);
-  fs.mkdirSync(name, opts.mode || DIR_MODE);
-
-  return {
-    name: name,
-    removeCallback: _prepareTmpDirRemoveCallback(name, opts)
-  };
-}
-
-/**
- * Prepares the callback for removal of the temporary file.
- *
- * @param {string} name the path of the file
- * @param {number} fd file descriptor
- * @param {Object} opts
- * @returns {fileCallback}
- * @private
- */
-function _prepareTmpFileRemoveCallback(name, fd, opts) {
-  const removeCallback = _prepareRemoveCallback(function _removeCallback(fdPath) {
-    try {
-      if (0 <= fdPath[0]) {
-        fs.closeSync(fdPath[0]);
-      }
-    }
-    catch (e) {
-      // under some node/windows related circumstances, a temporary file
-      // may have not be created as expected or the file was already closed
-      // by the user, in which case we will simply ignore the error
-      if (!isEBADF(e) && !isENOENT(e)) {
-        // reraise any unanticipated error
-        throw e;
-      }
-    }
-    try {
-      fs.unlinkSync(fdPath[1]);
-    }
-    catch (e) {
-      if (!isENOENT(e)) {
-        // reraise any unanticipated error
-        throw e;
-      }
-    }
-  }, [fd, name]);
-
-  if (!opts.keep) {
-    _removeObjects.unshift(removeCallback);
-  }
-
-  return removeCallback;
-}
-
-/**
- * Prepares the callback for removal of the temporary directory.
- *
- * @param {string} name
- * @param {Object} opts
- * @returns {Function} the callback
- * @private
- */
-function _prepareTmpDirRemoveCallback(name, opts) {
-  const removeFunction = opts.unsafeCleanup ? _rmdirRecursiveSync : fs.rmdirSync.bind(fs);
-  const removeCallback = _prepareRemoveCallback(removeFunction, name);
-
-  if (!opts.keep) {
-    _removeObjects.unshift(removeCallback);
-  }
-
-  return removeCallback;
-}
-
-/**
- * Creates a guarded function wrapping the removeFunction call.
- *
- * @param {Function} removeFunction
- * @param {Object} arg
- * @returns {Function}
- * @private
- */
-function _prepareRemoveCallback(removeFunction, arg) {
-  var called = false;
-
-  return function _cleanupCallback(next) {
-    if (!called) {
-      const index = _removeObjects.indexOf(_cleanupCallback);
-      if (index >= 0) {
-        _removeObjects.splice(index, 1);
-      }
-
-      called = true;
-      removeFunction(arg);
-    }
-
-    if (next) next(null);
-  };
-}
-
-/**
- * The garbage collector.
- *
- * @private
- */
-function _garbageCollector() {
-  if (_uncaughtException && !_gracefulCleanup) {
-    return;
-  }
-
-  // the function being called removes itself from _removeObjects,
-  // loop until _removeObjects is empty
-  while (_removeObjects.length) {
-    try {
-      _removeObjects[0].call(null);
-    } catch (e) {
-      // already removed?
-    }
-  }
-}
-
-/**
- * Helper for testing against EBADF to compensate changes made to Node 7.x under Windows.
- */
-function isEBADF(error) {
-  return isExpectedError(error, -EBADF, 'EBADF');
-}
-
-/**
- * Helper for testing against ENOENT to compensate changes made to Node 7.x under Windows.
- */
-function isENOENT(error) {
-  return isExpectedError(error, -ENOENT, 'ENOENT');
-}
-
-/**
- * Helper to determine whether the expected error code matches the actual code and errno,
- * which will differ between the supported node versions.
- *
- * - Node >= 7.0:
- *   error.code {String}
- *   error.errno {String|Number} any numerical value will be negated
- *
- * - Node >= 6.0 < 7.0:
- *   error.code {String}
- *   error.errno {Number} negated
- *
- * - Node >= 4.0 < 6.0: introduces SystemError
- *   error.code {String}
- *   error.errno {Number} negated
- *
- * - Node >= 0.10 < 4.0:
- *   error.code {Number} negated
- *   error.errno n/a
- */
-function isExpectedError(error, code, errno) {
-  return error.code == code || error.code == errno;
-}
-
-/**
- * Sets the graceful cleanup.
- *
- * Also removes the created files and directories when an uncaught exception occurs.
- */
-function setGracefulCleanup() {
-  _gracefulCleanup = true;
-}
-
-const version = process.versions.node.split('.').map(function (value) {
-  return parseInt(value, 10);
-});
-
-if (version[0] === 0 && (version[1] < 9 || version[1] === 9 && version[2] < 5)) {
-  process.addListener('uncaughtException', function _uncaughtExceptionThrown(err) {
-    _uncaughtException = true;
-    _garbageCollector();
-
-    throw err;
-  });
-}
-
-process.addListener('exit', function _exit(code) {
-  if (code) _uncaughtException = true;
-  _garbageCollector();
-});
-
-/**
- * Configuration options.
- *
- * @typedef {Object} Options
- * @property {?number} tries the number of tries before give up the name generation
- * @property {?string} template the "mkstemp" like filename template
- * @property {?string} name fix name
- * @property {?string} dir the tmp directory to use
- * @property {?string} prefix prefix for the generated name
- * @property {?string} postfix postfix for the generated name
- */
-
-/**
- * @typedef {Object} FileSyncObject
- * @property {string} name the name of the file
- * @property {string} fd the file descriptor
- * @property {fileCallback} removeCallback the callback function to remove the file
- */
-
-/**
- * @typedef {Object} DirSyncObject
- * @property {string} name the name of the directory
- * @property {fileCallback} removeCallback the callback function to remove the directory
- */
-
-/**
- * @callback tmpNameCallback
- * @param {?Error} err the error object if anything goes wrong
- * @param {string} name the temporary file name
- */
-
-/**
- * @callback fileCallback
- * @param {?Error} err the error object if anything goes wrong
- * @param {string} name the temporary file name
- * @param {number} fd the file descriptor
- * @param {cleanupCallback} fn the cleanup callback function
- */
-
-/**
- * @callback dirCallback
- * @param {?Error} err the error object if anything goes wrong
- * @param {string} name the temporary file name
- * @param {cleanupCallback} fn the cleanup callback function
- */
-
-/**
- * Removes the temporary created file or directory.
- *
- * @callback cleanupCallback
- * @param {simpleCallback} [next] function to call after entry was removed
- */
-
-/**
- * Callback function for function composition.
- * @see {@link https://github.com/raszi/node-tmp/issues/57|raszi/node-tmp#57}
- *
- * @callback simpleCallback
- */
-
-// exporting all the needed methods
-module.exports.tmpdir = tmpDir;
-
-module.exports.dir = dir;
-module.exports.dirSync = dirSync;
-
-module.exports.file = file;
-module.exports.fileSync = fileSync;
-
-module.exports.tmpName = tmpName;
-module.exports.tmpNameSync = tmpNameSync;
-
-module.exports.setGracefulCleanup = setGracefulCleanup;
-
-
-/***/ }),
-/* 955 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-var net = __webpack_require__(164)
-  , tls = __webpack_require__(467)
-  , http = __webpack_require__(87)
-  , https = __webpack_require__(195)
-  , events = __webpack_require__(77)
-  , assert = __webpack_require__(28)
-  , util = __webpack_require__(3)
-  , Buffer = __webpack_require__(45).Buffer
-  ;
-
-exports.httpOverHttp = httpOverHttp
-exports.httpsOverHttp = httpsOverHttp
-exports.httpOverHttps = httpOverHttps
-exports.httpsOverHttps = httpsOverHttps
-
-
-function httpOverHttp(options) {
-  var agent = new TunnelingAgent(options)
-  agent.request = http.request
-  return agent
-}
-
-function httpsOverHttp(options) {
-  var agent = new TunnelingAgent(options)
-  agent.request = http.request
-  agent.createSocket = createSecureSocket
-  agent.defaultPort = 443
-  return agent
-}
-
-function httpOverHttps(options) {
-  var agent = new TunnelingAgent(options)
-  agent.request = https.request
-  return agent
-}
-
-function httpsOverHttps(options) {
-  var agent = new TunnelingAgent(options)
-  agent.request = https.request
-  agent.createSocket = createSecureSocket
-  agent.defaultPort = 443
-  return agent
-}
-
-
-function TunnelingAgent(options) {
-  var self = this
-  self.options = options || {}
-  self.proxyOptions = self.options.proxy || {}
-  self.maxSockets = self.options.maxSockets || http.Agent.defaultMaxSockets
-  self.requests = []
-  self.sockets = []
-
-  self.on('free', function onFree(socket, host, port) {
-    for (var i = 0, len = self.requests.length; i < len; ++i) {
-      var pending = self.requests[i]
-      if (pending.host === host && pending.port === port) {
-        // Detect the request to connect same origin server,
-        // reuse the connection.
-        self.requests.splice(i, 1)
-        pending.request.onSocket(socket)
-        return
-      }
-    }
-    socket.destroy()
-    self.removeSocket(socket)
-  })
-}
-util.inherits(TunnelingAgent, events.EventEmitter)
-
-TunnelingAgent.prototype.addRequest = function addRequest(req, options) {
-  var self = this
-
-   // Legacy API: addRequest(req, host, port, path)
-  if (typeof options === 'string') {
-    options = {
-      host: options,
-      port: arguments[2],
-      path: arguments[3]
-    };
-  }
-
-  if (self.sockets.length >= this.maxSockets) {
-    // We are over limit so we'll add it to the queue.
-    self.requests.push({host: options.host, port: options.port, request: req})
-    return
-  }
-
-  // If we are under maxSockets create a new one.
-  self.createConnection({host: options.host, port: options.port, request: req})
-}
-
-TunnelingAgent.prototype.createConnection = function createConnection(pending) {
-  var self = this
-
-  self.createSocket(pending, function(socket) {
-    socket.on('free', onFree)
-    socket.on('close', onCloseOrRemove)
-    socket.on('agentRemove', onCloseOrRemove)
-    pending.request.onSocket(socket)
-
-    function onFree() {
-      self.emit('free', socket, pending.host, pending.port)
-    }
-
-    function onCloseOrRemove(err) {
-      self.removeSocket(socket)
-      socket.removeListener('free', onFree)
-      socket.removeListener('close', onCloseOrRemove)
-      socket.removeListener('agentRemove', onCloseOrRemove)
-    }
-  })
-}
-
-TunnelingAgent.prototype.createSocket = function createSocket(options, cb) {
-  var self = this
-  var placeholder = {}
-  self.sockets.push(placeholder)
-
-  var connectOptions = mergeOptions({}, self.proxyOptions,
-    { method: 'CONNECT'
-    , path: options.host + ':' + options.port
-    , agent: false
-    }
-  )
-  if (connectOptions.proxyAuth) {
-    connectOptions.headers = connectOptions.headers || {}
-    connectOptions.headers['Proxy-Authorization'] = 'Basic ' +
-        Buffer.from(connectOptions.proxyAuth).toString('base64')
-  }
-
-  debug('making CONNECT request')
-  var connectReq = self.request(connectOptions)
-  connectReq.useChunkedEncodingByDefault = false // for v0.6
-  connectReq.once('response', onResponse) // for v0.6
-  connectReq.once('upgrade', onUpgrade)   // for v0.6
-  connectReq.once('connect', onConnect)   // for v0.7 or later
-  connectReq.once('error', onError)
-  connectReq.end()
-
-  function onResponse(res) {
-    // Very hacky. This is necessary to avoid http-parser leaks.
-    res.upgrade = true
-  }
-
-  function onUpgrade(res, socket, head) {
-    // Hacky.
-    process.nextTick(function() {
-      onConnect(res, socket, head)
-    })
-  }
-
-  function onConnect(res, socket, head) {
-    connectReq.removeAllListeners()
-    socket.removeAllListeners()
-
-    if (res.statusCode === 200) {
-      assert.equal(head.length, 0)
-      debug('tunneling connection has established')
-      self.sockets[self.sockets.indexOf(placeholder)] = socket
-      cb(socket)
-    } else {
-      debug('tunneling socket could not be established, statusCode=%d', res.statusCode)
-      var error = new Error('tunneling socket could not be established, ' + 'statusCode=' + res.statusCode)
-      error.code = 'ECONNRESET'
-      options.request.emit('error', error)
-      self.removeSocket(placeholder)
-    }
-  }
-
-  function onError(cause) {
-    connectReq.removeAllListeners()
-
-    debug('tunneling socket could not be established, cause=%s\n', cause.message, cause.stack)
-    var error = new Error('tunneling socket could not be established, ' + 'cause=' + cause.message)
-    error.code = 'ECONNRESET'
-    options.request.emit('error', error)
-    self.removeSocket(placeholder)
-  }
-}
-
-TunnelingAgent.prototype.removeSocket = function removeSocket(socket) {
-  var pos = this.sockets.indexOf(socket)
-  if (pos === -1) return
-
-  this.sockets.splice(pos, 1)
-
-  var pending = this.requests.shift()
-  if (pending) {
-    // If we have pending requests and a socket gets closed a new one
-    // needs to be created to take over in the pool for the one that closed.
-    this.createConnection(pending)
-  }
-}
-
-function createSecureSocket(options, cb) {
-  var self = this
-  TunnelingAgent.prototype.createSocket.call(self, options, function(socket) {
-    // 0 is dummy port for v0.6
-    var secureSocket = tls.connect(0, mergeOptions({}, self.options,
-      { servername: options.host
-      , socket: socket
-      }
-    ))
-    self.sockets[self.sockets.indexOf(socket)] = secureSocket
-    cb(secureSocket)
-  })
-}
-
-
-function mergeOptions(target) {
-  for (var i = 1, len = arguments.length; i < len; ++i) {
-    var overrides = arguments[i]
-    if (typeof overrides === 'object') {
-      var keys = Object.keys(overrides)
-      for (var j = 0, keyLen = keys.length; j < keyLen; ++j) {
-        var k = keys[j]
-        if (overrides[k] !== undefined) {
-          target[k] = overrides[k]
-        }
-      }
-    }
-  }
-  return target
-}
-
-
-var debug
-if (process.env.NODE_DEBUG && /\btunnel\b/.test(process.env.NODE_DEBUG)) {
-  debug = function() {
-    var args = Array.prototype.slice.call(arguments)
-    if (typeof args[0] === 'string') {
-      args[0] = 'TUNNEL: ' + args[0]
-    } else {
-      args.unshift('TUNNEL:')
-    }
-    console.error.apply(console, args)
-  }
-} else {
-  debug = function() {}
-}
-exports.debug = debug // for test
-
-
-/***/ }),
-/* 956 */
-/***/ (function(module, exports, __webpack_require__) {
-
-
-/**
- * For Node.js, simply re-export the core `util.deprecate` function.
- */
-
-module.exports = __webpack_require__(3).deprecate;
-
-
-/***/ }),
-/* 957 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var rng = __webpack_require__(464);
-var bytesToUuid = __webpack_require__(463);
-
-// **`v1()` - Generate time-based UUID**
-//
-// Inspired by https://github.com/LiosK/UUID.js
-// and http://docs.python.org/library/uuid.html
-
-var _nodeId;
-var _clockseq;
-
-// Previous uuid creation time
-var _lastMSecs = 0;
-var _lastNSecs = 0;
-
-// See https://github.com/broofa/node-uuid for API details
-function v1(options, buf, offset) {
-  var i = buf && offset || 0;
-  var b = buf || [];
-
-  options = options || {};
-  var node = options.node || _nodeId;
-  var clockseq = options.clockseq !== undefined ? options.clockseq : _clockseq;
-
-  // node and clockseq need to be initialized to random values if they're not
-  // specified.  We do this lazily to minimize issues related to insufficient
-  // system entropy.  See #189
-  if (node == null || clockseq == null) {
-    var seedBytes = rng();
-    if (node == null) {
-      // Per 4.5, create and 48-bit node id, (47 random bits + multicast bit = 1)
-      node = _nodeId = [
-        seedBytes[0] | 0x01,
-        seedBytes[1], seedBytes[2], seedBytes[3], seedBytes[4], seedBytes[5]
-      ];
-    }
-    if (clockseq == null) {
-      // Per 4.2.2, randomize (14 bit) clockseq
-      clockseq = _clockseq = (seedBytes[6] << 8 | seedBytes[7]) & 0x3fff;
-    }
-  }
-
-  // UUID timestamps are 100 nano-second units since the Gregorian epoch,
-  // (1582-10-15 00:00).  JSNumbers aren't precise enough for this, so
-  // time is handled internally as 'msecs' (integer milliseconds) and 'nsecs'
-  // (100-nanoseconds offset from msecs) since unix epoch, 1970-01-01 00:00.
-  var msecs = options.msecs !== undefined ? options.msecs : new Date().getTime();
-
-  // Per 4.2.1.2, use count of uuid's generated during the current clock
-  // cycle to simulate higher resolution clock
-  var nsecs = options.nsecs !== undefined ? options.nsecs : _lastNSecs + 1;
-
-  // Time since last uuid creation (in msecs)
-  var dt = (msecs - _lastMSecs) + (nsecs - _lastNSecs)/10000;
-
-  // Per 4.2.1.2, Bump clockseq on clock regression
-  if (dt < 0 && options.clockseq === undefined) {
-    clockseq = clockseq + 1 & 0x3fff;
-  }
-
-  // Reset nsecs if clock regresses (new clockseq) or we've moved onto a new
-  // time interval
-  if ((dt < 0 || msecs > _lastMSecs) && options.nsecs === undefined) {
-    nsecs = 0;
-  }
-
-  // Per 4.2.1.2 Throw error if too many uuids are requested
-  if (nsecs >= 10000) {
-    throw new Error('uuid.v1(): Can\'t create more than 10M uuids/sec');
-  }
-
-  _lastMSecs = msecs;
-  _lastNSecs = nsecs;
-  _clockseq = clockseq;
-
-  // Per 4.1.4 - Convert from unix epoch to Gregorian epoch
-  msecs += 12219292800000;
-
-  // `time_low`
-  var tl = ((msecs & 0xfffffff) * 10000 + nsecs) % 0x100000000;
-  b[i++] = tl >>> 24 & 0xff;
-  b[i++] = tl >>> 16 & 0xff;
-  b[i++] = tl >>> 8 & 0xff;
-  b[i++] = tl & 0xff;
-
-  // `time_mid`
-  var tmh = (msecs / 0x100000000 * 10000) & 0xfffffff;
-  b[i++] = tmh >>> 8 & 0xff;
-  b[i++] = tmh & 0xff;
-
-  // `time_high_and_version`
-  b[i++] = tmh >>> 24 & 0xf | 0x10; // include version
-  b[i++] = tmh >>> 16 & 0xff;
-
-  // `clock_seq_hi_and_reserved` (Per 4.2.2 - include variant)
-  b[i++] = clockseq >>> 8 | 0x80;
-
-  // `clock_seq_low`
-  b[i++] = clockseq & 0xff;
-
-  // `node`
-  for (var n = 0; n < 6; ++n) {
-    b[i + n] = node[n];
-  }
-
-  return buf ? buf : bytesToUuid(b);
-}
-
-module.exports = v1;
-
-
-/***/ }),
-/* 958 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var rng = __webpack_require__(464);
-var bytesToUuid = __webpack_require__(463);
-
-function v4(options, buf, offset) {
-  var i = buf && offset || 0;
-
-  if (typeof(options) == 'string') {
-    buf = options === 'binary' ? new Array(16) : null;
-    options = null;
-  }
-  options = options || {};
-
-  var rnds = options.random || (options.rng || rng)();
-
-  // Per 4.4, set bits for version and `clock_seq_hi_and_reserved`
-  rnds[6] = (rnds[6] & 0x0f) | 0x40;
-  rnds[8] = (rnds[8] & 0x3f) | 0x80;
-
-  // Copy bytes to buffer, if provided
-  if (buf) {
-    for (var ii = 0; ii < 16; ++ii) {
-      buf[i + ii] = rnds[ii];
-    }
-  }
-
-  return buf || bytesToUuid(rnds);
-}
-
-module.exports = v4;
-
-
-/***/ }),
-/* 959 */
-/***/ (function(module, exports, __webpack_require__) {
-
-var parse = __webpack_require__(452);
-var correct = __webpack_require__(935);
-
-var genericWarning = (
-  'license should be ' +
-  'a valid SPDX license expression (without "LicenseRef"), ' +
-  '"UNLICENSED", or ' +
-  '"SEE LICENSE IN <filename>"'
-);
-
-var fileReferenceRE = /^SEE LICEN[CS]E IN (.+)$/;
-
-function startsWith(prefix, string) {
-  return string.slice(0, prefix.length) === prefix;
-}
-
-function usesLicenseRef(ast) {
-  if (ast.hasOwnProperty('license')) {
-    var license = ast.license;
-    return (
-      startsWith('LicenseRef', license) ||
-      startsWith('DocumentRef', license)
-    );
-  } else {
-    return (
-      usesLicenseRef(ast.left) ||
-      usesLicenseRef(ast.right)
-    );
-  }
-}
-
-module.exports = function(argument) {
-  var ast;
-
-  try {
-    ast = parse(argument);
-  } catch (e) {
-    var match
-    if (
-      argument === 'UNLICENSED' ||
-      argument === 'UNLICENCED'
-    ) {
-      return {
-        validForOldPackages: true,
-        validForNewPackages: true,
-        unlicensed: true
-      };
-    } else if (match = fileReferenceRE.exec(argument)) {
-      return {
-        validForOldPackages: true,
-        validForNewPackages: true,
-        inFile: match[1]
-      };
-    } else {
-      var result = {
-        validForOldPackages: false,
-        validForNewPackages: false,
-        warnings: [genericWarning]
-      };
-      if (argument.trim().length !== 0) {
-        var corrected = correct(argument);
-        if (corrected) {
-          result.warnings.push(
-            'license is similar to the valid expression "' + corrected + '"'
-          );
-        }
-      }
-      return result;
-    }
-  }
-
-  if (usesLicenseRef(ast)) {
-    return {
-      validForNewPackages: false,
-      validForOldPackages: false,
-      spdx: true,
-      warnings: [genericWarning]
-    };
-  } else {
-    return {
-      validForNewPackages: true,
-      validForOldPackages: true,
-      spdx: true
-    };
-  }
-};
-
-
-/***/ }),
-/* 960 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
- * verror.js: richer JavaScript errors
- */
-
-var mod_assertplus = __webpack_require__(16);
-var mod_util = __webpack_require__(3);
-
-var mod_extsprintf = __webpack_require__(961);
-var mod_isError = __webpack_require__(113).isError;
-var sprintf = mod_extsprintf.sprintf;
-
-/*
- * Public interface
- */
-
-/* So you can 'var VError = require('verror')' */
-module.exports = VError;
-/* For compatibility */
-VError.VError = VError;
-/* Other exported classes */
-VError.SError = SError;
-VError.WError = WError;
-VError.MultiError = MultiError;
-
-/*
- * Common function used to parse constructor arguments for VError, WError, and
- * SError.  Named arguments to this function:
- *
- *     strict		force strict interpretation of sprintf arguments, even
- *     			if the options in "argv" don't say so
- *
- *     argv		error's constructor arguments, which are to be
- *     			interpreted as described in README.md.  For quick
- *     			reference, "argv" has one of the following forms:
- *
- *          [ sprintf_args... ]           (argv[0] is a string)
- *          [ cause, sprintf_args... ]    (argv[0] is an Error)
- *          [ options, sprintf_args... ]  (argv[0] is an object)
- *
- * This function normalizes these forms, producing an object with the following
- * properties:
- *
- *    options           equivalent to "options" in third form.  This will never
- *    			be a direct reference to what the caller passed in
- *    			(i.e., it may be a shallow copy), so it can be freely
- *    			modified.
- *
- *    shortmessage      result of sprintf(sprintf_args), taking options.strict
- *    			into account as described in README.md.
- */
-function parseConstructorArguments(args)
-{
-	var argv, options, sprintf_args, shortmessage, k;
-
-	mod_assertplus.object(args, 'args');
-	mod_assertplus.bool(args.strict, 'args.strict');
-	mod_assertplus.array(args.argv, 'args.argv');
-	argv = args.argv;
-
-	/*
-	 * First, figure out which form of invocation we've been given.
-	 */
-	if (argv.length === 0) {
-		options = {};
-		sprintf_args = [];
-	} else if (mod_isError(argv[0])) {
-		options = { 'cause': argv[0] };
-		sprintf_args = argv.slice(1);
-	} else if (typeof (argv[0]) === 'object') {
-		options = {};
-		for (k in argv[0]) {
-			options[k] = argv[0][k];
-		}
-		sprintf_args = argv.slice(1);
-	} else {
-		mod_assertplus.string(argv[0],
-		    'first argument to VError, SError, or WError ' +
-		    'constructor must be a string, object, or Error');
-		options = {};
-		sprintf_args = argv;
-	}
-
-	/*
-	 * Now construct the error's message.
-	 *
-	 * extsprintf (which we invoke here with our caller's arguments in order
-	 * to construct this Error's message) is strict in its interpretation of
-	 * values to be processed by the "%s" specifier.  The value passed to
-	 * extsprintf must actually be a string or something convertible to a
-	 * String using .toString().  Passing other values (notably "null" and
-	 * "undefined") is considered a programmer error.  The assumption is
-	 * that if you actually want to print the string "null" or "undefined",
-	 * then that's easy to do that when you're calling extsprintf; on the
-	 * other hand, if you did NOT want that (i.e., there's actually a bug
-	 * where the program assumes some variable is non-null and tries to
-	 * print it, which might happen when constructing a packet or file in
-	 * some specific format), then it's better to stop immediately than
-	 * produce bogus output.
-	 *
-	 * However, sometimes the bug is only in the code calling VError, and a
-	 * programmer might prefer to have the error message contain "null" or
-	 * "undefined" rather than have the bug in the error path crash the
-	 * program (making the first bug harder to identify).  For that reason,
-	 * by default VError converts "null" or "undefined" arguments to their
-	 * string representations and passes those to extsprintf.  Programmers
-	 * desiring the strict behavior can use the SError class or pass the
-	 * "strict" option to the VError constructor.
-	 */
-	mod_assertplus.object(options);
-	if (!options.strict && !args.strict) {
-		sprintf_args = sprintf_args.map(function (a) {
-			return (a === null ? 'null' :
-			    a === undefined ? 'undefined' : a);
-		});
-	}
-
-	if (sprintf_args.length === 0) {
-		shortmessage = '';
-	} else {
-		shortmessage = sprintf.apply(null, sprintf_args);
-	}
-
-	return ({
-	    'options': options,
-	    'shortmessage': shortmessage
-	});
-}
-
-/*
- * See README.md for reference documentation.
- */
-function VError()
-{
-	var args, obj, parsed, cause, ctor, message, k;
-
-	args = Array.prototype.slice.call(arguments, 0);
-
-	/*
-	 * This is a regrettable pattern, but JavaScript's built-in Error class
-	 * is defined to work this way, so we allow the constructor to be called
-	 * without "new".
-	 */
-	if (!(this instanceof VError)) {
-		obj = Object.create(VError.prototype);
-		VError.apply(obj, arguments);
-		return (obj);
-	}
-
-	/*
-	 * For convenience and backwards compatibility, we support several
-	 * different calling forms.  Normalize them here.
-	 */
-	parsed = parseConstructorArguments({
-	    'argv': args,
-	    'strict': false
-	});
-
-	/*
-	 * If we've been given a name, apply it now.
-	 */
-	if (parsed.options.name) {
-		mod_assertplus.string(parsed.options.name,
-		    'error\'s "name" must be a string');
-		this.name = parsed.options.name;
-	}
-
-	/*
-	 * For debugging, we keep track of the original short message (attached
-	 * this Error particularly) separately from the complete message (which
-	 * includes the messages of our cause chain).
-	 */
-	this.jse_shortmsg = parsed.shortmessage;
-	message = parsed.shortmessage;
-
-	/*
-	 * If we've been given a cause, record a reference to it and update our
-	 * message appropriately.
-	 */
-	cause = parsed.options.cause;
-	if (cause) {
-		mod_assertplus.ok(mod_isError(cause), 'cause is not an Error');
-		this.jse_cause = cause;
-
-		if (!parsed.options.skipCauseMessage) {
-			message += ': ' + cause.message;
-		}
-	}
-
-	/*
-	 * If we've been given an object with properties, shallow-copy that
-	 * here.  We don't want to use a deep copy in case there are non-plain
-	 * objects here, but we don't want to use the original object in case
-	 * the caller modifies it later.
-	 */
-	this.jse_info = {};
-	if (parsed.options.info) {
-		for (k in parsed.options.info) {
-			this.jse_info[k] = parsed.options.info[k];
-		}
-	}
-
-	this.message = message;
-	Error.call(this, message);
-
-	if (Error.captureStackTrace) {
-		ctor = parsed.options.constructorOpt || this.constructor;
-		Error.captureStackTrace(this, ctor);
-	}
-
-	return (this);
-}
-
-mod_util.inherits(VError, Error);
-VError.prototype.name = 'VError';
-
-VError.prototype.toString = function ve_toString()
-{
-	var str = (this.hasOwnProperty('name') && this.name ||
-		this.constructor.name || this.constructor.prototype.name);
-	if (this.message)
-		str += ': ' + this.message;
-
-	return (str);
-};
-
-/*
- * This method is provided for compatibility.  New callers should use
- * VError.cause() instead.  That method also uses the saner `null` return value
- * when there is no cause.
- */
-VError.prototype.cause = function ve_cause()
-{
-	var cause = VError.cause(this);
-	return (cause === null ? undefined : cause);
-};
-
-/*
- * Static methods
- *
- * These class-level methods are provided so that callers can use them on
- * instances of Errors that are not VErrors.  New interfaces should be provided
- * only using static methods to eliminate the class of programming mistake where
- * people fail to check whether the Error object has the corresponding methods.
- */
-
-VError.cause = function (err)
-{
-	mod_assertplus.ok(mod_isError(err), 'err must be an Error');
-	return (mod_isError(err.jse_cause) ? err.jse_cause : null);
-};
-
-VError.info = function (err)
-{
-	var rv, cause, k;
-
-	mod_assertplus.ok(mod_isError(err), 'err must be an Error');
-	cause = VError.cause(err);
-	if (cause !== null) {
-		rv = VError.info(cause);
-	} else {
-		rv = {};
-	}
-
-	if (typeof (err.jse_info) == 'object' && err.jse_info !== null) {
-		for (k in err.jse_info) {
-			rv[k] = err.jse_info[k];
-		}
-	}
-
-	return (rv);
-};
-
-VError.findCauseByName = function (err, name)
-{
-	var cause;
-
-	mod_assertplus.ok(mod_isError(err), 'err must be an Error');
-	mod_assertplus.string(name, 'name');
-	mod_assertplus.ok(name.length > 0, 'name cannot be empty');
-
-	for (cause = err; cause !== null; cause = VError.cause(cause)) {
-		mod_assertplus.ok(mod_isError(cause));
-		if (cause.name == name) {
-			return (cause);
-		}
-	}
-
-	return (null);
-};
-
-VError.hasCauseWithName = function (err, name)
-{
-	return (VError.findCauseByName(err, name) !== null);
-};
-
-VError.fullStack = function (err)
-{
-	mod_assertplus.ok(mod_isError(err), 'err must be an Error');
-
-	var cause = VError.cause(err);
-
-	if (cause) {
-		return (err.stack + '\ncaused by: ' + VError.fullStack(cause));
-	}
-
-	return (err.stack);
-};
-
-VError.errorFromList = function (errors)
-{
-	mod_assertplus.arrayOfObject(errors, 'errors');
-
-	if (errors.length === 0) {
-		return (null);
-	}
-
-	errors.forEach(function (e) {
-		mod_assertplus.ok(mod_isError(e));
-	});
-
-	if (errors.length == 1) {
-		return (errors[0]);
-	}
-
-	return (new MultiError(errors));
-};
-
-VError.errorForEach = function (err, func)
-{
-	mod_assertplus.ok(mod_isError(err), 'err must be an Error');
-	mod_assertplus.func(func, 'func');
-
-	if (err instanceof MultiError) {
-		err.errors().forEach(function iterError(e) { func(e); });
-	} else {
-		func(err);
-	}
-};
-
-
-/*
- * SError is like VError, but stricter about types.  You cannot pass "null" or
- * "undefined" as string arguments to the formatter.
- */
-function SError()
-{
-	var args, obj, parsed, options;
-
-	args = Array.prototype.slice.call(arguments, 0);
-	if (!(this instanceof SError)) {
-		obj = Object.create(SError.prototype);
-		SError.apply(obj, arguments);
-		return (obj);
-	}
-
-	parsed = parseConstructorArguments({
-	    'argv': args,
-	    'strict': true
-	});
-
-	options = parsed.options;
-	VError.call(this, options, '%s', parsed.shortmessage);
-
-	return (this);
-}
-
-/*
- * We don't bother setting SError.prototype.name because once constructed,
- * SErrors are just like VErrors.
- */
-mod_util.inherits(SError, VError);
-
-
-/*
- * Represents a collection of errors for the purpose of consumers that generally
- * only deal with one error.  Callers can extract the individual errors
- * contained in this object, but may also just treat it as a normal single
- * error, in which case a summary message will be printed.
- */
-function MultiError(errors)
-{
-	mod_assertplus.array(errors, 'list of errors');
-	mod_assertplus.ok(errors.length > 0, 'must be at least one error');
-	this.ase_errors = errors;
-
-	VError.call(this, {
-	    'cause': errors[0]
-	}, 'first of %d error%s', errors.length, errors.length == 1 ? '' : 's');
-}
-
-mod_util.inherits(MultiError, VError);
-MultiError.prototype.name = 'MultiError';
-
-MultiError.prototype.errors = function me_errors()
-{
-	return (this.ase_errors.slice(0));
-};
-
-
-/*
- * See README.md for reference details.
- */
-function WError()
-{
-	var args, obj, parsed, options;
-
-	args = Array.prototype.slice.call(arguments, 0);
-	if (!(this instanceof WError)) {
-		obj = Object.create(WError.prototype);
-		WError.apply(obj, args);
-		return (obj);
-	}
-
-	parsed = parseConstructorArguments({
-	    'argv': args,
-	    'strict': false
-	});
-
-	options = parsed.options;
-	options['skipCauseMessage'] = true;
-	VError.call(this, options, '%s', parsed.shortmessage);
-
-	return (this);
-}
-
-mod_util.inherits(WError, VError);
-WError.prototype.name = 'WError';
-
-WError.prototype.toString = function we_toString()
-{
-	var str = (this.hasOwnProperty('name') && this.name ||
-		this.constructor.name || this.constructor.prototype.name);
-	if (this.message)
-		str += ': ' + this.message;
-	if (this.jse_cause && this.jse_cause.message)
-		str += '; caused by ' + this.jse_cause.toString();
-
-	return (str);
-};
-
-/*
- * For purely historical reasons, WError's cause() function allows you to set
- * the cause.
- */
-WError.prototype.cause = function we_cause(c)
-{
-	if (mod_isError(c))
-		this.jse_cause = c;
-
-	return (this.jse_cause);
-};
-
-
-/***/ }),
-/* 961 */
-/***/ (function(module, exports, __webpack_require__) {
-
-/*
- * extsprintf.js: extended POSIX-style sprintf
- */
-
-var mod_assert = __webpack_require__(28);
-var mod_util = __webpack_require__(3);
-
-/*
- * Public interface
- */
-exports.sprintf = jsSprintf;
-exports.printf = jsPrintf;
-exports.fprintf = jsFprintf;
-
-/*
- * Stripped down version of s[n]printf(3c).  We make a best effort to throw an
- * exception when given a format string we don't understand, rather than
- * ignoring it, so that we won't break existing programs if/when we go implement
- * the rest of this.
- *
- * This implementation currently supports specifying
- *	- field alignment ('-' flag),
- * 	- zero-pad ('0' flag)
- *	- always show numeric sign ('+' flag),
- *	- field width
- *	- conversions for strings, decimal integers, and floats (numbers).
- *	- argument size specifiers.  These are all accepted but ignored, since
- *	  Javascript has no notion of the physical size of an argument.
- *
- * Everything else is currently unsupported, most notably precision, unsigned
- * numbers, non-decimal numbers, and characters.
- */
-function jsSprintf(ofmt)
-{
-	var regex = [
-	    '([^%]*)',				/* normal text */
-	    '%',				/* start of format */
-	    '([\'\\-+ #0]*?)',			/* flags (optional) */
-	    '([1-9]\\d*)?',			/* width (optional) */
-	    '(\\.([1-9]\\d*))?',		/* precision (optional) */
-	    '[lhjztL]*?',			/* length mods (ignored) */
-	    '([diouxXfFeEgGaAcCsSp%jr])'	/* conversion */
-	].join('');
-
-	var re = new RegExp(regex);
-
-	/* variadic arguments used to fill in conversion specifiers */
-	var args = Array.prototype.slice.call(arguments, 1);
-	/* remaining format string */
-	var fmt = ofmt;
-
-	/* components of the current conversion specifier */
-	var flags, width, precision, conversion;
-	var left, pad, sign, arg, match;
-
-	/* return value */
-	var ret = '';
-
-	/* current variadic argument (1-based) */
-	var argn = 1;
-	/* 0-based position in the format string that we've read */
-	var posn = 0;
-	/* 1-based position in the format string of the current conversion */
-	var convposn;
-	/* current conversion specifier */
-	var curconv;
-
-	mod_assert.equal('string', typeof (fmt),
-	    'first argument must be a format string');
-
-	while ((match = re.exec(fmt)) !== null) {
-		ret += match[1];
-		fmt = fmt.substring(match[0].length);
-
-		/*
-		 * Update flags related to the current conversion specifier's
-		 * position so that we can report clear error messages.
-		 */
-		curconv = match[0].substring(match[1].length);
-		convposn = posn + match[1].length + 1;
-		posn += match[0].length;
-
-		flags = match[2] || '';
-		width = match[3] || 0;
-		precision = match[4] || '';
-		conversion = match[6];
-		left = false;
-		sign = false;
-		pad = ' ';
-
-		if (conversion == '%') {
-			ret += '%';
-			continue;
-		}
-
-		if (args.length === 0) {
-			throw (jsError(ofmt, convposn, curconv,
-			    'has no matching argument ' +
-			    '(too few arguments passed)'));
-		}
-
-		arg = args.shift();
-		argn++;
-
-		if (flags.match(/[\' #]/)) {
-			throw (jsError(ofmt, convposn, curconv,
-			    'uses unsupported flags'));
-		}
-
-		if (precision.length > 0) {
-			throw (jsError(ofmt, convposn, curconv,
-			    'uses non-zero precision (not supported)'));
-		}
-
-		if (flags.match(/-/))
-			left = true;
-
-		if (flags.match(/0/))
-			pad = '0';
-
-		if (flags.match(/\+/))
-			sign = true;
-
-		switch (conversion) {
-		case 's':
-			if (arg === undefined || arg === null) {
-				throw (jsError(ofmt, convposn, curconv,
-				    'attempted to print undefined or null ' +
-				    'as a string (argument ' + argn + ' to ' +
-				    'sprintf)'));
-			}
-			ret += doPad(pad, width, left, arg.toString());
-			break;
-
-		case 'd':
-			arg = Math.floor(arg);
-			/*jsl:fallthru*/
-		case 'f':
-			sign = sign && arg > 0 ? '+' : '';
-			ret += sign + doPad(pad, width, left,
-			    arg.toString());
-			break;
-
-		case 'x':
-			ret += doPad(pad, width, left, arg.toString(16));
-			break;
-
-		case 'j': /* non-standard */
-			if (width === 0)
-				width = 10;
-			ret += mod_util.inspect(arg, false, width);
-			break;
-
-		case 'r': /* non-standard */
-			ret += dumpException(arg);
-			break;
-
-		default:
-			throw (jsError(ofmt, convposn, curconv,
-			    'is not supported'));
-		}
-	}
-
-	ret += fmt;
-	return (ret);
-}
-
-function jsError(fmtstr, convposn, curconv, reason) {
-	mod_assert.equal(typeof (fmtstr), 'string');
-	mod_assert.equal(typeof (curconv), 'string');
-	mod_assert.equal(typeof (convposn), 'number');
-	mod_assert.equal(typeof (reason), 'string');
-	return (new Error('format string "' + fmtstr +
-	    '": conversion specifier "' + curconv + '" at character ' +
-	    convposn + ' ' + reason));
-}
-
-function jsPrintf() {
-	var args = Array.prototype.slice.call(arguments);
-	args.unshift(process.stdout);
-	jsFprintf.apply(null, args);
-}
-
-function jsFprintf(stream) {
-	var args = Array.prototype.slice.call(arguments, 1);
-	return (stream.write(jsSprintf.apply(this, args)));
-}
-
-function doPad(chr, width, left, str)
-{
-	var ret = str;
-
-	while (ret.length < width) {
-		if (left)
-			ret += chr;
-		else
-			ret = chr + ret;
-	}
-
-	return (ret);
-}
-
-/*
- * This function dumps long stack traces for exceptions having a cause() method.
- * See node-verror for an example.
- */
-function dumpException(ex)
-{
-	var ret;
-
-	if (!(ex instanceof Error))
-		throw (new Error(jsSprintf('invalid type for %%r: %j', ex)));
-
-	/* Note that V8 prepends "ex.stack" with ex.toString(). */
-	ret = 'EXCEPTION: ' + ex.constructor.name + ': ' + ex.stack;
-
-	if (ex.cause && typeof (ex.cause) === 'function') {
-		var cex = ex.cause();
-		if (cex) {
-			ret += '\nCaused by: ' + dumpException(cex);
-		}
-	}
-
-	return (ret);
-}
-
-
-/***/ }),
-/* 962 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-const lenient = __webpack_require__(963);
-
-module.exports = (val, opts) => {
-	val = String(val).trim();
-	opts = Object.assign({
-		lenient: false,
-		default: null
-	}, opts);
-
-	if (opts.default !== null && typeof opts.default !== 'boolean') {
-		throw new TypeError(`Expected the \`default\` option to be of type \`boolean\`, got \`${typeof opts.default}\``);
-	}
-
-	if (/^(?:y|yes|true|1)$/i.test(val)) {
-		return true;
-	}
-
-	if (/^(?:n|no|false|0)$/i.test(val)) {
-		return false;
-	}
-
-	if (opts.lenient === true) {
-		return lenient(val, opts);
-	}
-
-	return opts.default;
-};
-
-
-/***/ }),
-/* 963 */
-/***/ (function(module, exports, __webpack_require__) {
-
-"use strict";
-
-
-const YES_MATCH_SCORE_THRESHOLD = 2;
-const NO_MATCH_SCORE_THRESHOLD = 1.25;
-
-const yMatch = new Map([
-	[5, 0.25],
-	[6, 0.25],
-	[7, 0.25],
-	['t', 0.75],
-	['y', 1],
-	['u', 0.75],
-	['g', 0.25],
-	['h', 0.25],
-	['k', 0.25]
-]);
-
-const eMatch = new Map([
-	[2, 0.25],
-	[3, 0.25],
-	[4, 0.25],
-	['w', 0.75],
-	['e', 1],
-	['r', 0.75],
-	['s', 0.25],
-	['d', 0.25],
-	['f', 0.25]
-]);
-
-const sMatch = new Map([
-	['q', 0.25],
-	['w', 0.25],
-	['e', 0.25],
-	['a', 0.75],
-	['s', 1],
-	['d', 0.75],
-	['z', 0.25],
-	['x', 0.25],
-	['c', 0.25]
-]);
-
-const nMatch = new Map([
-	['h', 0.25],
-	['j', 0.25],
-	['k', 0.25],
-	['b', 0.75],
-	['n', 1],
-	['m', 0.75]
-]);
-
-const oMatch = new Map([
-	[9, 0.25],
-	[0, 0.25],
-	['i', 0.75],
-	['o', 1],
-	['p', 0.75],
-	['k', 0.25],
-	['l', 0.25]
-]);
-
-function getYesMatchScore(val) {
-	let score = 0;
-	const y = val[0];
-	const e = val[1];
-	const s = val[2];
-
-	if (yMatch.has(y)) {
-		score += yMatch.get(y);
-	}
-
-	if (eMatch.has(e)) {
-		score += eMatch.get(e);
-	}
-
-	if (sMatch.has(s)) {
-		score += sMatch.get(s);
-	}
-
-	return score;
-}
-
-function getNoMatchScore(val) {
-	let score = 0;
-	const n = val[0];
-	const o = val[1];
-
-	if (nMatch.has(n)) {
-		score += nMatch.get(n);
-	}
-
-	if (oMatch.has(o)) {
-		score += oMatch.get(o);
-	}
-
-	return score;
-}
-
-module.exports = (val, opts) => {
-	if (getYesMatchScore(val) >= YES_MATCH_SCORE_THRESHOLD) {
-		return true;
-	}
-
-	if (getNoMatchScore(val) >= NO_MATCH_SCORE_THRESHOLD) {
-		return false;
-	}
-
-	return opts.default;
-};
-
-
-/***/ }),
-/* 964 */
-/***/ (function(module, exports) {
-
-module.exports = require("dns");
-
-/***/ }),
-/* 965 */
-/***/ (function(module, exports) {
-
-module.exports = require("domain");
-
-/***/ })
-/******/ ]);
\ No newline at end of file
diff --git a/packages/react/tests/e2e/build/examples-scaffold/.yarnrc b/packages/react/tests/e2e/build/examples-scaffold/.yarnrc
deleted file mode 100644
index b09c035349d..00000000000
--- a/packages/react/tests/e2e/build/examples-scaffold/.yarnrc
+++ /dev/null
@@ -1,9 +0,0 @@
-# THIS IS AN AUTOGENERATED FILE. DO NOT EDIT THIS FILE DIRECTLY.
-# yarn lockfile v1
-
-
-version "1.22.10"
-lastUpdateCheck 1622067490629
-yarn-offline-mirror "./.yarn/offline-mirror"
-yarn-offline-mirror-pruning true
-yarn-path ".yarn/releases/yarn-1.22.10.js"
diff --git a/packages/react/tests/e2e/build/examples-scaffold/package.json b/packages/react/tests/e2e/build/examples-scaffold/package.json
deleted file mode 100644
index da18460610a..00000000000
--- a/packages/react/tests/e2e/build/examples-scaffold/package.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "name": "react-examples-e2e-test",
-  "private": true,
-  "version": "0.0.0",
-  "repository": "git@github.com:carbon-design-system/carbon-for-ibm-dotcom.git",
-  "license": "Apache-2.0",
-  "workspaces": {
-    "packages": [
-      "components/*"
-    ]
-  },
-  "devDependencies": {
-    "carbon-components": "^10.36.0",
-    "rimraf": "^3.0.2"
-  }
-}
diff --git a/packages/react/tests/e2e/build/replace-dependencies.js b/packages/react/tests/e2e/build/replace-dependencies.js
deleted file mode 100644
index a8f19343ae4..00000000000
--- a/packages/react/tests/e2e/build/replace-dependencies.js
+++ /dev/null
@@ -1,77 +0,0 @@
-#!/usr/bin/env node
-
-/**
- * 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.
- */
-
-'use strict';
-
-const fs = require('fs');
-const { program } = require('commander');
-
-program.option('-f, --folder <folder>', 'Location of packages folder');
-program.parse();
-
-/**
- * Command line options
- *
- * @type {program.OptionValues}
- */
-const _opts = program.opts();
-
-/**
- * Files passed into the command
- *
- * @type {string[]}
- */
-const _files = program.args;
-
-/**
- * Dependency targets
- *
- * @type {string[]}
- */
-const deps = ['dependencies', 'peerDependencies', 'devDependencies'];
-
-/**
- * Defined packages
- *
- * @type {string[]}
- */
-const packs = [
-  '@carbon/ibmdotcom-services',
-  '@carbon/ibmdotcom-styles',
-  '@carbon/ibmdotcom-utilities',
-  '@carbon/ibmdotcom-react',
-  '@carbon/ibmdotcom-web-components',
-];
-
-/**
- * Replaces `@carbon/ibmdotcom-*` dependencies in the given `package.json` files with the local directory references.
- *
- * @param {string[]} files The files.
- */
-const replace = files => {
-  const { folder } = _opts;
-
-  files.forEach(file => {
-    const contents = JSON.parse(fs.readFileSync(file));
-    deps.forEach(dep => {
-      const item = contents[dep];
-      if (item) {
-        packs.forEach(pack => {
-          if (item[pack]) {
-            item[pack] = `file:${folder}/${pack.replace(/^@carbon\//, '')}`;
-          }
-        });
-      }
-    });
-
-    fs.writeFileSync(file, JSON.stringify(contents, null, 2));
-  });
-};
-
-replace(_files);
diff --git a/packages/react/tests/e2e/cypress.json b/packages/react/tests/e2e/cypress.json
deleted file mode 100644
index e32c64a0004..00000000000
--- a/packages/react/tests/e2e/cypress.json
+++ /dev/null
@@ -1,16 +0,0 @@
-{
-  "baseUrl": "http://localhost:8080",
-  "browser": "chrome",
-  "headless": true,
-  "fixturesFolder": "tests/e2e/cypress/fixtures",
-  "fileServerFolder": "tests/e2e/dist",
-  "screenshotsFolder": "tests/e2e/cypress/screenshots",
-  "videosFolder": "tests/e2e/cypress/videos",
-  "integrationFolder": "tests/e2e/cypress/integration",
-  "supportFile": "tests/e2e/cypress/support/index.js",
-  "pluginsFile": "tests/e2e/cypress/plugins/index.js",
-  "nodeVersion": "system",
-  "testFiles": "**/*.e2e.js",
-  "pageLoadTimeout": 40000,
-  "defaultCommandTimeout": 40000
-}
diff --git a/packages/react/tests/e2e/cypress/fixtures/countrylist.json b/packages/react/tests/e2e/cypress/fixtures/countrylist.json
deleted file mode 100644
index b89e14d7399..00000000000
--- a/packages/react/tests/e2e/cypress/fixtures/countrylist.json
+++ /dev/null
@@ -1 +0,0 @@
-{"regionList":[{"name":"Americas","key":"am","countryList":[{"name":"Anguilla","locale":[["en-ai","English"]]},{"name":"Antigua and Barbuda","locale":[["en-ag","English"]]},{"name":"Argentina","locale":[["es-ar","Spanish (Español)"]]},{"name":"Aruba","locale":[["en-aw","English"]]},{"name":"Bahamas","locale":[["en-bs","English"]]},{"name":"Barbados","locale":[["en-bb","English"]]},{"name":"Bermuda","locale":[["en-bm","English"]]},{"name":"Bolivia","locale":[["es-bo","Spanish (Español)"]]},{"name":"Brazil (Brasil)","locale":[["pt-br","Portuguese (Português)"]]},{"name":"Canada","locale":[["en-ca","English"]]},{"name":"Canada","locale":[["fr-ca","French (Français)"]]},{"name":"Cayman Islands","locale":[["en-ky","English"]]},{"name":"Chile","locale":[["es-cl","Spanish (Español)"]]},{"name":"Colombia","locale":[["es-co","Spanish (Español)"]]},{"name":"Costa Rica","locale":[["es-cr","Spanish (Español)"]]},{"name":"Curacao","locale":[["en-cw","English"]]},{"name":"Dominica","locale":[["en-dm","English"]]},{"name":"Ecuador","locale":[["es-ec","Spanish (Español)"]]},{"name":"Grenada","locale":[["en-gd","English"]]},{"name":"Guyana","locale":[["en-gy","English"]]},{"name":"Jamaica","locale":[["en-jm","English"]]},{"name":"Mexico","locale":[["es-mx","Spanish (Español)"]]},{"name":"Montserrat","locale":[["en-ms","English"]]},{"name":"Paraguay","locale":[["es-py","Spanish (Español)"]]},{"name":"Peru","locale":[["es-pe","Spanish (Español)"]]},{"name":"Saint Kitts and Nevis","locale":[["en-kn","English"]]},{"name":"Saint Lucia","locale":[["en-lc","English"]]},{"name":"Saint Vincent and the Grenadines","locale":[["en-vc","English"]]},{"name":"Suriname","locale":[["en-sr","English"]]},{"name":"Trinidad and Tobago","locale":[["en-tt","English"]]},{"name":"Turks and Caicos Islands","locale":[["en-tc","English"]]},{"name":"United States","locale":[["en-us","English"]]},{"name":"Uruguay","locale":[["es-uy","Spanish (Español)"]]},{"name":"Venezuela","locale":[["es-ve","Spanish (Español)"]]},{"name":"Virgin Islands, British","locale":[["en-vg","English"]]}]},{"name":"Asia Pacific","key":"ap","countryList":[{"name":"Australia","locale":[["en-au","English"]]},{"name":"Bangladesh","locale":[["en-bd","English"]]},{"name":"Brunei Darussalam","locale":[["en-bn","English"]]},{"name":"Cambodia","locale":[["en-kh","English"]]},{"name":"China (中国)","locale":[["zh-cn","Chinese (简体中文)"]]},{"name":"Hong Kong S.A.R. of China","locale":[["en-hk","English"]]},{"name":"India","locale":[["en-in","English"]]},{"name":"Indonesia","locale":[["en-id","English"]]},{"name":"Japan (日本)","locale":[["ja-jp","Japanese (日本語)"]]},{"name":"Korea, Republic of (대한민국)","locale":[["ko-kr","Korean (한국어)"]]},{"name":"Malaysia","locale":[["en-my","English"]]},{"name":"Nepal","locale":[["en-np","English"]]},{"name":"New Zealand","locale":[["en-nz","English"]]},{"name":"Philippines","locale":[["en-ph","English"]]},{"name":"Singapore","locale":[["en-sg","English"]]},{"name":"Sri Lanka","locale":[["en-lk","English"]]},{"name":"Taiwan (台灣)","locale":[["zh-tw","Chinese (繁體中文)"]]},{"name":"Thailand","locale":[["en-th","English"]]},{"name":"Vietnam","locale":[["en-vn","English"]]}]},{"name":"Europe","key":"eu","countryList":[{"name":"Austria (Österreich)","locale":[["de-at","German (Deutsch)"]]},{"name":"Belgium/Luxembourg","locale":[["en-be","English"]]},{"name":"Bulgaria","locale":[["en-bg","English"]]},{"name":"Croatia","locale":[["en-hr","English"]]},{"name":"Cyprus","locale":[["en-cy","English"]]},{"name":"Czech Republic","locale":[["en-cz","English"]]},{"name":"Denmark","locale":[["en-dk","English"]]},{"name":"Estonia","locale":[["en-ee","English"]]},{"name":"Finland","locale":[["en-fi","English"]]},{"name":"France","locale":[["fr-fr","French (Français)"]]},{"name":"Germany (Deutschland)","locale":[["de-de","German (Deutsch)"]]},{"name":"Greece","locale":[["en-gr","English"]]},{"name":"Hungary","locale":[["en-hu","English"]]},{"name":"Ireland","locale":[["en-ie","English"]]},{"name":"Italy (Italia)","locale":[["it-it","Italian (Italiano)"]]},{"name":"Kazakhstan","locale":[["en-kz","English"]]},{"name":"Latvia","locale":[["en-lv","English"]]},{"name":"Lithuania","locale":[["en-lt","English"]]},{"name":"Netherlands","locale":[["en-nl","English"]]},{"name":"Norway","locale":[["en-no","English"]]},{"name":"Poland (Polska)","locale":[["pl-pl","Polish (Polskie)"]]},{"name":"Portugal","locale":[["en-pt","English"]]},{"name":"Romania","locale":[["en-ro","English"]]},{"name":"Russian (Россия)","locale":[["ru-ru","Russian (русский)"]]},{"name":"Serbia","locale":[["en-rs","English"]]},{"name":"Slovakia","locale":[["en-sk","English"]]},{"name":"Slovenia","locale":[["en-si","English"]]},{"name":"Spain (España)","locale":[["es-es","Spanish (Español)"]]},{"name":"Sweden","locale":[["en-se","English"]]},{"name":"Switzerland (Suisse)","locale":[["fr-ch","French (Français)"]]},{"name":"Switzerland (Schweiz)","locale":[["de-ch","German (Deutsch)"]]},{"name":"Turkey (Türkiye)","locale":[["tr-tr","Turkish (Türk)"]]},{"name":"Ukraine","locale":[["en-ua","English"]]},{"name":"United Kingdom","locale":[["en-uk","English"]]},{"name":"United Kingdom","locale":[["en-gb","English"]]},{"name":"Uzbekistan","locale":[["en-uz","English"]]}]},{"name":"Middle East and Africa","key":"mea","countryList":[{"name":"Afghanistan","locale":[["en-af","English"]]},{"name":"Algeria (Algérie)","locale":[["fr-dz","French (Français)"]]},{"name":"Angola","locale":[["pt-ao","Portuguese (Português)"]]},{"name":"Bahrain","locale":[["en-bh","English"]]},{"name":"Botswana","locale":[["en-bw","English"]]},{"name":"Burkina Faso","locale":[["fr-bf","French (Français)"]]},{"name":"Cameroon (Cameroun)","locale":[["fr-cm","French (Français)"]]},{"name":"Chad (Tchad)","locale":[["fr-td","French (Français)"]]},{"name":"Congo","locale":[["fr-cg","French (Français)"]]},{"name":"Congo, Democratic Republic of (République Démocratique du Congo)","locale":[["fr-cd","French (Français)"]]},{"name":"Egypt","locale":[["en-eg","English"]]},{"name":"Ethiopia","locale":[["en-et","English"]]},{"name":"Gabon","locale":[["fr-ga","French (Français)"]]},{"name":"Ghana","locale":[["en-gh","English"]]},{"name":"Iraq","locale":[["en-iq","English"]]},{"name":"Israel","locale":[["en-il","English"]]},{"name":"Ivory Coast (Côte d'Ivoire)","locale":[["fr-ci","French (Français)"]]},{"name":"Jordan","locale":[["en-jo","English"]]},{"name":"Kenya","locale":[["en-ke","English"]]},{"name":"Kuwait","locale":[["en-kw","English"]]},{"name":"Lebanon","locale":[["en-lb","English"]]},{"name":"Libya","locale":[["en-ly","English"]]},{"name":"Madagascar","locale":[["fr-mg","French (Français)"]]},{"name":"Malawi","locale":[["en-mw","English"]]},{"name":"Mauritius (Maurice)","locale":[["fr-mu","French (Français)"]]},{"name":"Morocco (Maroc)","locale":[["fr-ma","French (Français)"]]},{"name":"Mozambique","locale":[["pt-mz","Portuguese (Português)"]]},{"name":"Namibia","locale":[["en-na","English"]]},{"name":"Niger","locale":[["fr-ne","French (Français)"]]},{"name":"Nigeria","locale":[["en-ng","English"]]},{"name":"Oman","locale":[["en-om","English"]]},{"name":"Pakistan","locale":[["en-pk","English"]]},{"name":"Qatar","locale":[["en-qa","English"]]},{"name":"Saudi Arabia","locale":[["en-sa","English"]]},{"name":"Saudi Arabia (المملكة العربية السعودية)","locale":[["ar-sa","Arabic (عربى)"]]},{"name":"Senegal (Sénégal)","locale":[["fr-sn","French (Français)"]]},{"name":"Seychelles","locale":[["fr-sc","French (Français)"]]},{"name":"Sierra Leone","locale":[["en-sl","English"]]},{"name":"South Africa","locale":[["en-za","English"]]},{"name":"Tanzania, United Republic of","locale":[["en-tz","English"]]},{"name":"Tunisia (Tunisie)","locale":[["fr-tn","French (Français)"]]},{"name":"Uganda","locale":[["en-ug","English"]]},{"name":"United Arab Emirates","locale":[["en-ae","English"]]},{"name":"United Arab Emirates (الإمارات العربية المتحدة)","locale":[["ar-ae","Arabic (عربى)"]]},{"name":"Yemen","locale":[["en-ye","English"]]},{"name":"Zambia","locale":[["en-zm","English"]]},{"name":"Zimbabwe","locale":[["en-zw","English"]]}]}],"localeModal":{"headerTitle":"Select geographic area","modalClose":"Close modal","searchLabel":"Search by location or language. Note: Location/Language will be dynamically updated as you provide the input","searchClearText":"Clear search input","searchPlaceholder":"Search by location or language","availabilityText":"This page is available in the following locations and languages","unavailabilityText":"This page is unavailable in your preferred location or language"},"timestamp":1635277797890}
diff --git a/packages/react/tests/e2e/cypress/fixtures/ibm-common.js b/packages/react/tests/e2e/cypress/fixtures/ibm-common.js
deleted file mode 100644
index 5eca5702f57..00000000000
--- a/packages/react/tests/e2e/cypress/fixtures/ibm-common.js
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * Copyright IBM Corp. 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-module.exports = {}
diff --git a/packages/react/tests/e2e/cypress/fixtures/status.json b/packages/react/tests/e2e/cypress/fixtures/status.json
deleted file mode 100644
index b8539094e87..00000000000
--- a/packages/react/tests/e2e/cypress/fixtures/status.json
+++ /dev/null
@@ -1 +0,0 @@
-{"user":"Unauthenticated"}
diff --git a/packages/react/tests/e2e/cypress/fixtures/translation-raw.json b/packages/react/tests/e2e/cypress/fixtures/translation-raw.json
deleted file mode 100644
index 39548733dd3..00000000000
--- a/packages/react/tests/e2e/cypress/fixtures/translation-raw.json
+++ /dev/null
@@ -1,1567 +0,0 @@
-{
-  "mastheadNav": {
-    "links": [
-      {
-        "title": "Products & Solutions",
-        "titleEnglish": "Products & Solutions",
-        "url": "",
-        "hasMenu": true,
-        "hasMegapanel": true,
-        "menuSections": [
-          {
-            "heading": "The essentials",
-            "menuItems": [
-              {
-                "title": "Hybrid Cloud",
-                "titleEnglish": "Hybrid Cloud",
-                "url": "",
-                "highlighted": true,
-                "megapanelContent": {
-                  "headingTitle": "Hybrid Cloud",
-                  "headingUrl": "",
-                  "description": "Blend cloud and on-premises resources for flexibility and balance",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "What is Hybrid Cloud?",
-                        "titleEnglish": "What is Hybrid Cloud?",
-                        "highlightedLink": true,
-                        "url": "https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"
-                      },
-                      {
-                        "title": "Hybrid Cloud solutions",
-                        "titleEnglish": "Hybrid Cloud solutions",
-                        "highlightedLink": true,
-                        "url": "https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Artificial intelligence",
-                "titleEnglish": "Artificial intelligence",
-                "url": "",
-                "highlighted": true,
-                "megapanelContent": {
-                  "headingTitle": "Artificial intelligence",
-                  "headingUrl": "",
-                  "description": "Unlock the value in your organization with Watson",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "What is AI?",
-                        "titleEnglish": "What is AI?",
-                        "highlightedLink": true,
-                        "url": "https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?mhsrc=ibmsearch_a&mhq=what%20is%20AI%3F"
-                      },
-                      {
-                        "title": "AI solutions",
-                        "titleEnglish": "AI solutions",
-                        "highlightedLink": true,
-                        "url": "https://www.ibm.com/cloud/ai?lnk=hpmps_ess"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Top products & platforms",
-                "titleEnglish": "Top products & platforms",
-                "url": "https://www.ibm.com/products?lnk=hpmps_bupr",
-                "megapanelContent": {
-                  "headingTitle": "Top products & platforms",
-                  "headingUrl": "https://www.ibm.com/products?lnk=hpmps_bupr",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Aspera",
-                        "titleEnglish": "Aspera",
-                        "url": "https://www.ibm.com/products/aspera?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "Cognos",
-                        "titleEnglish": "Cognos",
-                        "url": "https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "Db2",
-                        "titleEnglish": "Db2",
-                        "url": "https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "IBM Cloud",
-                        "titleEnglish": "IBM Cloud",
-                        "url": "https://www.ibm.com/cloud?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "IBM Cloud Paks",
-                        "titleEnglish": "IBM Cloud Paks",
-                        "url": "https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "IBM Sterling",
-                        "titleEnglish": "IBM Sterling",
-                        "url": "https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "IBM Storage",
-                        "titleEnglish": "IBM Storage",
-                        "url": "https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "IBM Z",
-                        "titleEnglish": "IBM Z",
-                        "url": "https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "Red Hat OpenShift",
-                        "titleEnglish": "Red Hat OpenShift",
-                        "url": "https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "SPSS Statistics",
-                        "titleEnglish": "SPSS Statistics",
-                        "url": "https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "Watson",
-                        "titleEnglish": "Watson",
-                        "url": "https://www.ibm.com/watson?lnk=hpmps_bupr"
-                      },
-                      {
-                        "title": "WebSphere",
-                        "titleEnglish": "WebSphere",
-                        "url": "https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Solutions",
-                "titleEnglish": "Solutions",
-                "url": "",
-                "megapanelContent": {
-                  "headingTitle": "Solutions",
-                  "headingUrl": "",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Artificial intelligence",
-                        "titleEnglish": "Artificial intelligence",
-                        "url": "https://www.ibm.com/cloud/ai?lnk=hpmps_buai"
-                      },
-                      {
-                        "title": "Automation",
-                        "titleEnglish": "Business automation",
-                        "url": "https://www.ibm.com/cloud/automation?lnk=hpmps_buau"
-                      },
-                      {
-                        "title": "Blockchain",
-                        "titleEnglish": "Blockchain",
-                        "url": "https://www.ibm.com/blockchain?lnk=hpmps_bubc"
-                      },
-                      {
-                        "title": "Business operations",
-                        "titleEnglish": "Business operations",
-                        "url": "https://www.ibm.com/business-operations?lnk=hpmps_buop"
-                      },
-                      {
-                        "title": "Cloud computing",
-                        "titleEnglish": "Cloud computing",
-                        "url": "https://www.ibm.com/cloud?lnk=hpmps_bucl"
-                      },
-                      {
-                        "title": "Data & Analytics",
-                        "titleEnglish": "Data & Analytics",
-                        "url": "https://www.ibm.com/analytics?lnk=hpmps_buda"
-                      },
-                      {
-                        "title": "Hybrid Cloud",
-                        "titleEnglish": "Hybrid Cloud",
-                        "url": "https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"
-                      },
-                      {
-                        "title": "IT infrastructure",
-                        "titleEnglish": "IT infrastructure",
-                        "url": "https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"
-                      },
-                      {
-                        "title": "Quantum computing",
-                        "titleEnglish": "Quantum computing",
-                        "url": "https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"
-                      },
-                      {
-                        "title": "Security",
-                        "titleEnglish": "Security",
-                        "url": "https://www.ibm.com/security?lnk=hpmps_buse"
-                      },
-                      {
-                        "title": "Supply chain",
-                        "titleEnglish": "Supply chain",
-                        "url": "https://www.ibm.com/supply-chain?lnk=hpmps_busc"
-                      },
-                      {
-                        "title": "COVID-19 solutions",
-                        "titleEnglish": "COVID-19 solutions",
-                        "url": "https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Industries",
-                "titleEnglish": "Industries",
-                "url": "https://www.ibm.com/industries?lnk=hpmps_buin",
-                "megapanelContent": {
-                  "headingTitle": "Industries",
-                  "headingUrl": "https://www.ibm.com/industries?lnk=hpmps_buin",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Aerospace & defense",
-                        "titleEnglish": "Aerospace & defense",
-                        "url": "https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Automotive",
-                        "titleEnglish": "Automotive",
-                        "url": "https://www.ibm.com/industries/automotive?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Banking & financial markets",
-                        "titleEnglish": "Banking & financial markets",
-                        "url": "https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Education",
-                        "titleEnglish": "Education",
-                        "url": "https://www.ibm.com/industries/education?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Electronics",
-                        "titleEnglish": "Electronics",
-                        "url": "https://www.ibm.com/industries/electronics?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Energy & utilities",
-                        "titleEnglish": "Energy & utilities",
-                        "url": "https://www.ibm.com/industries/energy?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Government",
-                        "titleEnglish": "Government",
-                        "url": "https://www.ibm.com/industries/government?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Healthcare",
-                        "titleEnglish": "Healthcare",
-                        "url": "https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Insurance",
-                        "titleEnglish": "Insurance",
-                        "url": "https://www.ibm.com/industries/insurance?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "Life sciences",
-                        "titleEnglish": "Life sciences",
-                        "url": "https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"
-                      },
-                      {
-                        "title": "View all Industries",
-                        "titleEnglish": "View all Industries",
-                        "url": "https://www.ibm.com/industries?lnk=hpmps_buin#2546397"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "View all products",
-                "titleEnglish": "View all products",
-                "url": "https://www.ibm.com/products?lnk=hpmps_buall",
-                "megaPanelViewAll": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "title": "Consulting & Services",
-        "titleEnglish": "Consulting & Services",
-        "url": "",
-        "hasMenu": true,
-        "hasMegapanel": true,
-        "menuSections": [
-          {
-            "heading": "",
-            "menuItems": [
-              {
-                "title": "IBM Consulting",
-                "titleEnglish": "IBM Consulting",
-                "url": "https://www.ibm.com/consulting?lnk=hpmco&lnk2=link",
-                "megapanelContent": {
-                  "headingTitle": "IBM Consulting",
-                  "headingUrl": "https://www.ibm.com/consulting?lnk=hpmco&lnk2=link",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Strategy Consulting",
-                        "titleEnglish": "Strategy Consulting",
-                        "url": "https://www.ibm.com/consulting/strategy?lnk=hpmco_bust&lnk2=learn"
-                      },
-                      {
-                        "title": "Experience Consulting",
-                        "titleEnglish": "Experience Consulting",
-                        "url": "https://www.ibm.com/consulting/experience?lnk=hpmco_buex&lnk2=learn"
-                      },
-                      {
-                        "title": "Operations Consulting",
-                        "titleEnglish": "Operations Consulting",
-                        "url": "https://www.ibm.com/consulting/operations?lnk=hpmco_buop&lnk2=learn"
-                      },
-                      {
-                        "title": "Technology Consulting",
-                        "titleEnglish": "Technology Consulting",
-                        "url": "https://www.ibm.com/consulting/technology?lnk=hpmco_bute&lnk2=learn"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Business consulting services",
-                "titleEnglish": "Business process services",
-                "url": "https://www.ibm.com/services/business?lnk=hpmsc_bups",
-                "megapanelContent": {
-                  "headingTitle": "Business consulting services",
-                  "headingUrl": "https://www.ibm.com/services/business?lnk=hpmsc_bups",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Artificial intelligence services",
-                        "titleEnglish": "Artificial intelligence services",
-                        "url": "https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Automation",
-                        "titleEnglish": "Automation",
-                        "url": "https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Big data & data platform",
-                        "titleEnglish": "Big data & data platform",
-                        "url": "https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Business process outsourcing",
-                        "titleEnglish": "Business process outsourcing",
-                        "url": "https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Edge consulting",
-                        "titleEnglish": "Edge consulting",
-                        "url": "https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Finance consulting and outsourcing services",
-                        "titleEnglish": "Finance transformation",
-                        "url": "https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Operations consulting",
-                        "titleEnglish": "IoT consulting",
-                        "url": "https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Procurement consulting and managed services",
-                        "titleEnglish": "Procurement & strategic sourcing",
-                        "url": "https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Risk management consulting services",
-                        "titleEnglish": "Risk consulting & fraud management",
-                        "url": "https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"
-                      },
-                      {
-                        "title": "Supply chain consulting services",
-                        "titleEnglish": "Supply chain",
-                        "url": "https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Design & business strategy",
-                "titleEnglish": "Design & business strategy",
-                "url": "https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs",
-                "megapanelContent": {
-                  "headingTitle": "Design & business strategy",
-                  "headingUrl": "https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Customer experience consulting",
-                        "titleEnglish": "Experience strategy",
-                        "url": "https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"
-                      },
-                      {
-                        "title": "E-commerce consulting",
-                        "titleEnglish": "Digital strategy",
-                        "url": "https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"
-                      },
-                      {
-                        "title": "Marketing consulting",
-                        "titleEnglish": "Marketing platforms",
-                        "url": "https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"
-                      },
-                      {
-                        "title": "Salesforce consulting",
-                        "titleEnglish": "Salesforce consulting",
-                        "url": "https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Hybrid multicloud services",
-                "titleEnglish": "Hybrid multicloud services",
-                "url": "https://www.ibm.com/cloud/services?lnk=hpmsc_bups"
-              },
-              {
-                "title": "Talent management services",
-                "titleEnglish": "Talent & transformation",
-                "url": "https://www.ibm.com/services/talent-management?lnk=hpmsc_buta",
-                "megapanelContent": {
-                  "headingTitle": "Talent management services",
-                  "headingUrl": "https://www.ibm.com/services/talent-management?lnk=hpmsc_buta",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "HR transformation services",
-                        "titleEnglish": "HR transformation",
-                        "url": "https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"
-                      },
-                      {
-                        "title": "Talent acquisition services",
-                        "titleEnglish": "Talent acquisition",
-                        "url": "https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"
-                      },
-                      {
-                        "title": "Talent development services",
-                        "titleEnglish": "Talent development",
-                        "url": "https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Application services",
-                "titleEnglish": "Application services",
-                "url": "https://www.ibm.com/services/applications?lnk=hpmsc_buas",
-                "megapanelContent": {
-                  "headingTitle": "Application services",
-                  "headingUrl": "https://www.ibm.com/services/applications?lnk=hpmsc_buas",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Application Modernization",
-                        "titleEnglish": "Application Modernization",
-                        "url": "https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"
-                      },
-                      {
-                        "title": "Enterprise applications strategy",
-                        "titleEnglish": "Enterprise applications strategy",
-                        "url": "https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "IBM Garage",
-                "titleEnglish": "IBM Garages",
-                "url": "https://www.ibm.com/garage?lnk=hpmsc_buas"
-              },
-              {
-                "title": "Security services",
-                "titleEnglish": "Security services",
-                "url": "https://www.ibm.com/security/services?lnk=hpmsc_buse",
-                "megapanelContent": {
-                  "headingTitle": "Security services",
-                  "headingUrl": "https://www.ibm.com/security/services?lnk=hpmsc_buse",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Application security",
-                        "titleEnglish": "Application security",
-                        "url": "https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"
-                      },
-                      {
-                        "title": "Cloud security",
-                        "titleEnglish": "Cloud security",
-                        "url": "https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"
-                      },
-                      {
-                        "title": "Data security",
-                        "titleEnglish": "Data security",
-                        "url": "https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"
-                      },
-                      {
-                        "title": "Identity & access management",
-                        "titleEnglish": "Identity & access management",
-                        "url": "https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"
-                      },
-                      {
-                        "title": "Managed security",
-                        "titleEnglish": "Managed security",
-                        "url": "https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"
-                      },
-                      {
-                        "title": "Security governance",
-                        "titleEnglish": "Security governance",
-                        "url": "https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Technology Support Services",
-                "titleEnglish": "Services for tech support",
-                "url": "https://www.ibm.com/services/technology-support?lnk=hpmsc_busv",
-                "megapanelContent": {
-                  "headingTitle": "Technology Support Services",
-                  "headingUrl": "https://www.ibm.com/services/technology-support?lnk=hpmsc_busv",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Open source",
-                        "titleEnglish": "Open source",
-                        "url": "https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"
-                      },
-                      {
-                        "title": "Third party & multivendor",
-                        "titleEnglish": "Third party & multivendor",
-                        "url": "https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"
-                      },
-                      {
-                        "title": "IBM warranties and maintenance",
-                        "titleEnglish": "IBM warranties and maintenance",
-                        "url": "https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Flexible payment plans",
-                "titleEnglish": "Flexible payment plans",
-                "url": "https://www.ibm.com/financing?lnk=hpmsc_bufi"
-              },
-              {
-                "title": "View all services",
-                "titleEnglish": "View all services",
-                "url": "https://www.ibm.com/services?lnk=hpmsc_buall",
-                "megaPanelViewAll": true
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "title": "Learn & Support",
-        "titleEnglish": "Learn & Support",
-        "url": "",
-        "hasMenu": true,
-        "hasMegapanel": true,
-        "menuSections": [
-          {
-            "heading": "",
-            "menuItems": [
-              {
-                "title": "What is...",
-                "titleEnglish": "What is...",
-                "url": "https://www.ibm.com/cloud/learn?lnk=hpmls_buwi",
-                "megapanelContent": {
-                  "headingTitle": "What is...",
-                  "headingUrl": "https://www.ibm.com/cloud/learn?lnk=hpmls_buwi",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Artificial intelligence",
-                        "titleEnglish": "Artificial intelligence",
-                        "url": "https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Automation",
-                        "titleEnglish": "Automation",
-                        "url": "https://www.ibm.com/topics/automation?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Blockchain",
-                        "titleEnglish": "Blockchain",
-                        "url": "https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Business intelligence",
-                        "titleEnglish": "Business intelligence",
-                        "url": "https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Chatbots",
-                        "titleEnglish": "Chatbots",
-                        "url": "https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Cloud computing",
-                        "titleEnglish": "Cloud computing",
-                        "url": "https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Containerization",
-                        "titleEnglish": "Containerization",
-                        "url": "https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Cybersecurity",
-                        "titleEnglish": "Cybersecurity",
-                        "url": "https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Databases",
-                        "titleEnglish": "Databases",
-                        "url": "https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "DevOps",
-                        "titleEnglish": "DevOps",
-                        "url": "https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Hybrid Cloud",
-                        "titleEnglish": "Hybrid Cloud",
-                        "url": "https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Kubernetes",
-                        "titleEnglish": "Kubernetes",
-                        "url": "https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Quantum computing",
-                        "titleEnglish": "Quantum computing",
-                        "url": "https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"
-                      },
-                      {
-                        "title": "Supply chain",
-                        "titleEnglish": "Supply chain",
-                        "url": "https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Training",
-                "titleEnglish": "Training",
-                "url": "https://www.ibm.com/training/?lnk=hpmls_butr",
-                "megapanelContent": {
-                  "headingTitle": "Training",
-                  "headingUrl": "https://www.ibm.com/training/?lnk=hpmls_butr",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Courses",
-                        "titleEnglish": "Courses",
-                        "url": "https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"
-                      },
-                      {
-                        "title": "Learning journeys",
-                        "titleEnglish": "Learning journeys",
-                        "url": "https://www.ibm.com/training/journeys?lnk=hpmls_butr"
-                      },
-                      {
-                        "title": "Professional certifications",
-                        "titleEnglish": "Professional certifications",
-                        "url": "https://www.ibm.com/certify?lnk=hpmls_butr"
-                      },
-                      {
-                        "title": "Digital learning subscriptions",
-                        "titleEnglish": "Digital learning subscriptions",
-                        "url": "https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Developer education",
-                "titleEnglish": "Developer education",
-                "url": "https://developer.ibm.com/?lnk=hpmls_bude",
-                "megapanelContent": {
-                  "headingTitle": "Developer education",
-                  "headingUrl": "https://developer.ibm.com/?lnk=hpmls_bude",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Code patterns",
-                        "titleEnglish": "Code patterns",
-                        "url": "https://developer.ibm.com/patterns/?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "Developer community",
-                        "titleEnglish": "Developer community",
-                        "url": "https://developer.ibm.com/community/?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "Developer events",
-                        "titleEnglish": "Developer events",
-                        "url": "https://developer.ibm.com/events/?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "Open Source @ IBM",
-                        "titleEnglish": "Open Source @ IBM",
-                        "url": "https://ibm.com/opensource?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "Technical articles",
-                        "titleEnglish": "Technical articles",
-                        "url": "https://developer.ibm.com/articles?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "Tutorials",
-                        "titleEnglish": "Tutorials",
-                        "url": "https://developer.ibm.com/tutorials/?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "Videos",
-                        "titleEnglish": "Videos",
-                        "url": "https://developer.ibm.com/videos?lnk=hpmls_bude"
-                      },
-                      {
-                        "title": "View more Developer education",
-                        "titleEnglish": "View more Developer education",
-                        "url": "https://developer.ibm.com/?lnk=hpmls_bude"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Documentation",
-                "titleEnglish": "Documentation",
-                "url": "https://www.ibm.com/docs/en?lnk=hpmls_budc",
-                "megapanelContent": {
-                  "headingTitle": "Documentation",
-                  "headingUrl": "https://www.ibm.com/docs/en?lnk=hpmls_budc",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "All product documentation",
-                        "titleEnglish": "All product documentation",
-                        "url": "https://www.ibm.com/docs/en?lnk=hpmls_budc"
-                      },
-                      {
-                        "title": "For products on IBM Cloud",
-                        "titleEnglish": "For products on IBM Cloud",
-                        "url": "https://cloud.ibm.com/docs?lnk=hpmls_budc"
-                      },
-                      {
-                        "title": "For use cases — IBM Redbooks",
-                        "titleEnglish": "For use cases — IBM Redbooks",
-                        "url": "https://www.redbooks.ibm.com/?lnk=hpmls_budc"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Community",
-                "titleEnglish": "Community",
-                "url": "",
-                "megapanelContent": {
-                  "headingTitle": "Community",
-                  "headingUrl": "",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "IBM Developer",
-                        "titleEnglish": "IBM Developer",
-                        "url": "https://developer.ibm.com/?lnk=hpmls_buco"
-                      },
-                      {
-                        "title": "IBM Community",
-                        "titleEnglish": "IBM Community",
-                        "url": "https://community.ibm.com/community/user/home?lnk=hpmls_buco"
-                      },
-                      {
-                        "title": "Support forums",
-                        "titleEnglish": "Support forums",
-                        "url": "https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Resources",
-                "titleEnglish": "Resources",
-                "url": "https://www.ibm.com/blogs/?lnk=hpmls_bure",
-                "megapanelContent": {
-                  "headingTitle": "Resources",
-                  "headingUrl": "https://www.ibm.com/blogs/?lnk=hpmls_bure",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Blogs & thought leadership",
-                        "titleEnglish": "Blogs & thought leadership",
-                        "url": "https://www.ibm.com/blogs/?lnk=hpmls_bure"
-                      },
-                      {
-                        "title": "Case studies & client stories",
-                        "titleEnglish": "Case studies & client stories",
-                        "url": "https://www.ibm.com/case-studies?lnk=hpmls_bure"
-                      },
-                      {
-                        "title": "Upcoming events & webinars",
-                        "titleEnglish": "Upcoming events & webinars",
-                        "url": "https://www.ibm.com/events?lnk=hpmls_bure"
-                      },
-                      {
-                        "title": "IBM Institute for Business Value",
-                        "titleEnglish": "IBM Institute for Business Value",
-                        "url": "https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Support",
-                "titleEnglish": "Support",
-                "url": "https://www.ibm.com/mysupport?lnk=hpmls_busu",
-                "megapanelContent": {
-                  "headingTitle": "Support",
-                  "headingUrl": "https://www.ibm.com/mysupport?lnk=hpmls_busu",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Download fixes, updates & drivers",
-                        "titleEnglish": "Download fixes, updates & drivers",
-                        "url": "https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"
-                      },
-                      {
-                        "title": "Download licensed software - Passport Advantage",
-                        "titleEnglish": "Download licensed software - Passport Advantage",
-                        "url": "https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"
-                      },
-                      {
-                        "title": "View your cases",
-                        "titleEnglish": "View your cases",
-                        "url": "https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"
-                      },
-                      {
-                        "title": "Open a case",
-                        "titleEnglish": "Open a case",
-                        "url": "https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"
-                      },
-                      {
-                        "title": "View available support plans",
-                        "titleEnglish": "View available support plans",
-                        "url": "https://www.ibm.com/support/offerings?lnk=hpmls_busu"
-                      },
-                      {
-                        "title": "View more on Support",
-                        "titleEnglish": "View more on Support",
-                        "url": "https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "Cloud platform support",
-                "titleEnglish": "Cloud platform support",
-                "url": "https://www.ibm.com/cloud/support?lnk=hpmls_bucl"
-              }
-            ]
-          }
-        ]
-      },
-      {
-        "title": "Explore more",
-        "titleEnglish": "Explore more",
-        "url": "",
-        "hasMenu": true,
-        "hasMegapanel": true,
-        "menuSections": [
-          {
-            "heading": "",
-            "menuItems": [
-              {
-                "title": "Partner with us",
-                "titleEnglish": "Partners",
-                "url": "https://www.ibm.com/partners?lnk=hpmex_bupa",
-                "megapanelContent": {
-                  "headingTitle": "Partner with us",
-                  "headingUrl": "https://www.ibm.com/partners?lnk=hpmex_bupa",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "PartnerWorld",
-                        "titleEnglish": "Partner with us — PartnerWorld",
-                        "url": "https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"
-                      },
-                      {
-                        "title": "Our strategic partnerships",
-                        "titleEnglish": "Our strategic partnerships",
-                        "url": "https://www.ibm.com/alliances?lnk=hpmex_bupa"
-                      },
-                      {
-                        "title": "Flexible payment plans",
-                        "titleEnglish": "Flexible payment plans",
-                        "url": "https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "IBM Research",
-                "titleEnglish": "IBM Research",
-                "url": "https://www.research.ibm.com/?lnk=hpmex_bure",
-                "megapanelContent": {
-                  "headingTitle": "IBM Research",
-                  "headingUrl": "https://www.research.ibm.com/?lnk=hpmex_bure",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Research areas",
-                        "titleEnglish": "Research areas",
-                        "url": "https://www.research.ibm.com/?lnk=hpmex_bure"
-                      },
-                      {
-                        "title": "Researcher directory",
-                        "titleEnglish": "Researcher directory",
-                        "url": "https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"
-                      },
-                      {
-                        "title": "Patents",
-                        "titleEnglish": "Patents",
-                        "url": "https://www.research.ibm.com/patents/?lnk=hpmex_bure"
-                      },
-                      {
-                        "title": "Work with us",
-                        "titleEnglish": "Work with us",
-                        "url": "https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "About IBM",
-                "titleEnglish": "About IBM",
-                "url": "https://www.ibm.com/about?lnk=hpmex_buab",
-                "megapanelContent": {
-                  "headingTitle": "About IBM",
-                  "headingUrl": "https://www.ibm.com/about?lnk=hpmex_buab",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Annual report",
-                        "titleEnglish": "Annual report",
-                        "url": "https://www.ibm.com/annualreport/?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "Career opportunities",
-                        "titleEnglish": "Career opportunities",
-                        "url": "https://www.ibm.com/employment/?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "Corporate social responsibility",
-                        "titleEnglish": "Corporate social responsibility",
-                        "url": "https://www.ibm.org?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "Diversity & inclusion",
-                        "titleEnglish": "Diversity & inclusion",
-                        "url": "https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "Investor relations",
-                        "titleEnglish": "Investor relations",
-                        "url": "https://www.ibm.com/investor/?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "News & announcements",
-                        "titleEnglish": "News & announcements",
-                        "url": "https://newsroom.ibm.com?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "Thought leadership",
-                        "titleEnglish": "Thought leadership",
-                        "url": "https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"
-                      },
-                      {
-                        "title": "Security, privacy & trust",
-                        "titleEnglish": "Security, privacy & trust",
-                        "url": "https://www.ibm.com/trust?lnk=hpmex_buab"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              },
-              {
-                "title": "COVID-19",
-                "titleEnglish": "COVID-19",
-                "url": "https://www.ibm.com/impact/covid-19?lnk=hpmex_buco",
-                "megapanelContent": {
-                  "headingTitle": "COVID-19",
-                  "headingUrl": "https://www.ibm.com/impact/covid-19?lnk=hpmex_buco",
-                  "description": "",
-                  "quickLinks": {
-                    "title": "",
-                    "links": [
-                      {
-                        "title": "Business solutions",
-                        "titleEnglish": "Business solutions",
-                        "url": "https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"
-                      },
-                      {
-                        "title": "Action guide",
-                        "titleEnglish": "Action guide",
-                        "url": "https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"
-                      }
-                    ]
-                  },
-                  "feature": {
-                    "heading": "",
-                    "imageUrl": "",
-                    "linkTitle": "",
-                    "linkUrl": ""
-                  }
-                }
-              }
-            ]
-          }
-        ]
-      }
-    ]
-  },
-  "masthead": {
-    "search": {
-      "btnSearchClosed": "Open IBM search field",
-      "btnSearchOpen": "Search all of IBM",
-      "btnClose": "Close IBM search field",
-      "placeHolderText": "Search all of IBM"
-    },
-    "profileMenu": {
-      "signedout": {
-        "iconLabel": "User Profile",
-        "links": [
-          {
-            "title": "My IBM",
-            "url": "https://myibm.ibm.com/?lnk=mmi"
-          },
-          {
-            "title": "Log in",
-            "url": "https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"
-          }
-        ]
-      },
-      "signedin": {
-        "iconLabel": "User Profile: Logged in",
-        "links": [
-          {
-            "title": "My IBM",
-            "url": "https://myibm.ibm.com/?lnk=mmi"
-          },
-          {
-            "title": "Profile",
-            "url": "https://myibm.ibm.com/profile/?lnk=mmi"
-          },
-          {
-            "title": "Billing",
-            "url": "https://myibm.ibm.com/billing/?lnk=mmi"
-          },
-          {
-            "title": "Log out",
-            "url": "https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"
-          }
-        ]
-      }
-    }
-  },
-  "profileMenu": {
-    "signedout": [
-      {
-        "title": "My IBM",
-        "url": "https://myibm.ibm.com/?lnk=mmi"
-      },
-      {
-        "id": "signin",
-        "title": "Log in",
-        "url": "https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"
-      }
-    ],
-    "signedin": [
-      {
-        "title": "My IBM",
-        "url": "https://myibm.ibm.com/?lnk=mmi"
-      },
-      {
-        "title": "Profile",
-        "url": "https://myibm.ibm.com/profile/?lnk=mmi"
-      },
-      {
-        "title": "Billing",
-        "url": "https://myibm.ibm.com/billing/?lnk=mmi"
-      },
-      {
-        "id": "signout",
-        "title": "Log out",
-        "url": "https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"
-      }
-    ]
-  },
-  "marketplace": {
-    "title": "Products",
-    "url": ""
-  },
-  "footerMenu": [
-    {
-      "title": "Products & Solutions",
-      "links": [
-        {
-          "title": "Top products & platforms",
-          "url": "https://www.ibm.com/products?lnk=fps"
-        },
-        {
-          "title": "Industries",
-          "url": "https://www.ibm.com/industries?lnk=fps"
-        },
-        {
-          "title": "Artificial intelligence",
-          "url": "https://ibm.com/cloud/ai?lnk=fps"
-        },
-        {
-          "title": "Blockchain",
-          "url": "https://www.ibm.com/blockchain?lnk=fps"
-        },
-        {
-          "title": "Business operations",
-          "url": "https://www.ibm.com/business-operations?lnk=fps"
-        },
-        {
-          "title": "Cloud computing",
-          "url": "https://www.ibm.com/cloud?lnk=fps"
-        },
-        {
-          "title": "Data & Analytics",
-          "url": "https://www.ibm.com/analytics?lnk=fps"
-        },
-        {
-          "title": "Hybrid cloud",
-          "url": "https://www.ibm.com/cloud/hybrid?lnk=fps"
-        },
-        {
-          "title": "IT infrastructure",
-          "url": "https://www.ibm.com/it-infrastructure?lnk=fps"
-        },
-        {
-          "title": "Security",
-          "url": "https://www.ibm.com/security?lnk=fps"
-        },
-        {
-          "title": "Supply chain",
-          "url": "https://www.ibm.com/supply-chain?lnk=fps"
-        }
-      ]
-    },
-    {
-      "title": "Learn about",
-      "links": [
-        {
-          "title": "What is Hybrid Cloud?",
-          "url": "https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"
-        },
-        {
-          "title": "What is Artificial intelligence?",
-          "url": "https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"
-        },
-        {
-          "title": "What is Cloud Computing?",
-          "url": "https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"
-        },
-        {
-          "title": "What is Kubernetes?",
-          "url": "https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"
-        },
-        {
-          "title": "What are Containers?",
-          "url": "https://www.ibm.com/cloud/learn/containers?lnk=fle"
-        },
-        {
-          "title": "What is DevOps?",
-          "url": "https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"
-        },
-        {
-          "title": "What is Machine Learning?",
-          "url": "https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"
-        }
-      ]
-    },
-    {
-      "title": "Popular links",
-      "links": [
-        {
-          "title": "IBM Consulting",
-          "url": "https://www.ibm.com/consulting?lnk=fco"
-        },
-        {
-          "title": "Communities",
-          "url": "https://community.ibm.com/community/user/home?lnk=fpo"
-        },
-        {
-          "title": "Developer education",
-          "url": "https://developer.ibm.com/?lnk=fpo"
-        },
-        {
-          "title": "Support - Download fixes, updates & drivers",
-          "url": "https://www.ibm.com/support/fixcentral/?lnk=fpo"
-        },
-        {
-          "title": "IBM Research",
-          "url": "https://www.research.ibm.com/?lnk=fpo"
-        },
-        {
-          "title": "Partner with us - PartnerWorld",
-          "url": "https://www.ibm.com/partnerworld/public?lnk=fpo"
-        },
-        {
-          "title": "Training - Courses",
-          "url": "https://www.ibm.com/training/search?q=course&lnk=fpo"
-        },
-        {
-          "title": "Upcoming events & webinars",
-          "url": "https://www.ibm.com/events/?lnk=fpo"
-        }
-      ]
-    },
-    {
-      "title": "About IBM",
-      "links": [
-        {
-          "title": "Annual report",
-          "url": "https://www.ibm.com/annualreport/?lnk=fab"
-        },
-        {
-          "title": "Career opportunities",
-          "url": "https://www.ibm.com/employment/?lnk=fab"
-        },
-        {
-          "title": "Corporate social responsibility",
-          "url": "https://www.ibm.org/?lnk=fab"
-        },
-        {
-          "title": "Diversity & inclusion",
-          "url": "https://www.ibm.com/employment/inclusion/?lnk=fab"
-        },
-        {
-          "title": "Investor relations",
-          "url": "https://www.ibm.com/investor/?lnk=fab"
-        },
-        {
-          "title": "News & announcements",
-          "url": "https://newsroom.ibm.com/?lnk=fab"
-        },
-        {
-          "title": "Thought leadership",
-          "url": "https://www.ibm.com/thought-leadership/?lnk=fab"
-        },
-        {
-          "title": "Security, privacy & trust",
-          "url": "https://www.ibm.com/trust?lnk=fab"
-        },
-        {
-          "title": "About IBM",
-          "url": "https://www.ibm.com/about?lnk=fab"
-        }
-      ]
-    }
-  ],
-  "footerThin": [
-    {
-      "title": "Contact IBM",
-      "titleEnglish": "Contact IBM",
-      "url": "https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"
-    },
-    {
-      "title": "Privacy",
-      "titleEnglish": "Privacy",
-      "url": "https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"
-    },
-    {
-      "title": "Terms of use",
-      "titleEnglish": "Terms of use",
-      "url": "https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"
-    },
-    {
-      "title": "Accessibility",
-      "titleEnglish": "Accessibility",
-      "url": "https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"
-    }
-  ],
-  "localeSelector": {
-    "localVersions": "Localized versions of this page",
-    "homepages": "Worldwide ibm.com home pages"
-  },
-  "socialFollow": {
-    "title": "Follow IBM",
-    "links": [
-      {
-        "linkClass": "ibm-linkedin-encircled-link",
-        "title": "LinkedIn",
-        "url": "https://www.linkedin.com/company/ibm"
-      },
-      {
-        "linkClass": "ibm-twitter-encircled-link",
-        "title": "Twitter",
-        "url": "https://www.twitter.com/ibm"
-      },
-      {
-        "linkClass": "ibm-instagram-encircled-link",
-        "title": "Instagram",
-        "url": "https://www.instagram.com/ibm"
-      }
-    ]
-  },
-  "socialSharing": [
-    {
-      "id": "facebook",
-      "title": "Facebook",
-      "url": "https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"
-    },
-    {
-      "id": "twitter",
-      "title": "Twitter",
-      "url": "https://twitter.com/?status=%{URL}%20-%20%{TITLE}"
-    },
-    {
-      "id": "linkedin",
-      "title": "Linked In",
-      "url": "https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"
-    }
-  ],
-  "leaving": {
-    "LEAVING001": "Leaving the IBM Web site",
-    "LEAVING002": "You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.",
-    "LEAVING003": "You are headed to",
-    "LEAVING004": "Notice"
-  },
-  "misc": {
-    "backtotop": "Back to top",
-    "cancelText": "Cancel",
-    "close": "Close",
-    "cookiePrefs": "Cookie preferences",
-    "continueText": "Continue",
-    "editProfile": "Edit profile",
-    "emailThisPage": "E-mail this page",
-    "feedback": "Feedback",
-    "mpScopedSearh": "Products",
-    "withinMp": "Products",
-    "next": "Next",
-    "noresults": "No results found",
-    "prev": "Previous",
-    "resultsNav": "Use down and up arrow keys to navigate through the results.",
-    "search": "Search",
-    "selectCountry": "Select a country/region",
-    "sharePage": "Share this page",
-    "signin": "Sign in",
-    "signout": "Sign out",
-    "sitenav": "Site navigation",
-    "welcomeback": "Welcome back"
-  }
-}
diff --git a/packages/react/tests/e2e/cypress/fixtures/translation.json b/packages/react/tests/e2e/cypress/fixtures/translation.json
deleted file mode 100644
index 38754582194..00000000000
--- a/packages/react/tests/e2e/cypress/fixtures/translation.json
+++ /dev/null
@@ -1 +0,0 @@
-{"mastheadNav":{"links":[{"title":"Products & Solutions","titleEnglish":"Products & Solutions","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"The essentials","menuItems":[{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Hybrid Cloud","headingUrl":"","description":"Blend cloud and on-premises resources for flexibility and balance","quickLinks":{"title":"","links":[{"title":"What is Hybrid Cloud?","titleEnglish":"What is Hybrid Cloud?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmps_ess"},{"title":"Hybrid Cloud solutions","titleEnglish":"Hybrid Cloud solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/go-hybrid?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"","highlighted":true,"megapanelContent":{"headingTitle":"Artificial intelligence","headingUrl":"","description":"Unlock the value in your organization with Watson","quickLinks":{"title":"","links":[{"title":"What is AI?","titleEnglish":"What is AI?","highlightedLink":true,"url":"https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmps_ess"},{"title":"AI solutions","titleEnglish":"AI solutions","highlightedLink":true,"url":"https://www.ibm.com/cloud/ai?lnk=hpmps_ess"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Top products & platforms","titleEnglish":"Top products & platforms","url":"https://www.ibm.com/products?lnk=hpmps_bupr","megapanelContent":{"headingTitle":"Top products & platforms","headingUrl":"https://www.ibm.com/products?lnk=hpmps_bupr","description":"","quickLinks":{"title":"","links":[{"title":"Aspera","titleEnglish":"Aspera","url":"https://www.ibm.com/products/aspera?lnk=hpmps_bupr"},{"title":"Cognos","titleEnglish":"Cognos","url":"https://www.ibm.com/products/cognos-analytics?lnk=hpmps_bupr"},{"title":"Db2","titleEnglish":"Db2","url":"https://www.ibm.com/analytics/db2?lnk=hpmps_bupr"},{"title":"IBM Cloud","titleEnglish":"IBM Cloud","url":"https://www.ibm.com/cloud?lnk=hpmps_bupr"},{"title":"IBM Cloud Paks","titleEnglish":"IBM Cloud Paks","url":"https://www.ibm.com/cloud/paks?lnk=hpmps_bupr"},{"title":"IBM Sterling","titleEnglish":"IBM Sterling","url":"https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr"},{"title":"IBM Storage","titleEnglish":"IBM Storage","url":"https://www.ibm.com/it-infrastructure/storage/?lnk=hpmps_bupr"},{"title":"IBM Z","titleEnglish":"IBM Z","url":"https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr"},{"title":"Red Hat OpenShift","titleEnglish":"Red Hat OpenShift","url":"https://www.ibm.com/cloud/openshift?lnk=hpmps_bupr"},{"title":"SPSS Statistics","titleEnglish":"SPSS Statistics","url":"https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr"},{"title":"Watson","titleEnglish":"Watson","url":"https://www.ibm.com/watson?lnk=hpmps_bupr"},{"title":"WebSphere","titleEnglish":"WebSphere","url":"https://www.ibm.com/cloud/websphere-application-server?lnk=hpmps_bupr"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Solutions","titleEnglish":"Solutions","url":"","megapanelContent":{"headingTitle":"Solutions","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/ai?lnk=hpmps_buai"},{"title":"Automation","titleEnglish":"Business automation","url":"https://www.ibm.com/cloud/automation?lnk=hpmps_buau"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=hpmps_bubc"},{"title":"Business operations","titleEnglish":"Business operations","url":"https://www.ibm.com/business-operations?lnk=hpmps_buop"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=hpmps_bucl"},{"title":"Data & Analytics","titleEnglish":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=hpmps_buda"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl"},{"title":"IT infrastructure","titleEnglish":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=hpmps_buit"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/?lnk=hpmps_qc"},{"title":"Security","titleEnglish":"Security","url":"https://www.ibm.com/security?lnk=hpmps_buse"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=hpmps_busc"},{"title":"COVID-19 solutions","titleEnglish":"COVID-19 solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmps_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Industries","titleEnglish":"Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin","megapanelContent":{"headingTitle":"Industries","headingUrl":"https://www.ibm.com/industries?lnk=hpmps_buin","description":"","quickLinks":{"title":"","links":[{"title":"Aerospace & defense","titleEnglish":"Aerospace & defense","url":"https://www.ibm.com/industries/aerospace-defense?lnk=hpmps_buin"},{"title":"Automotive","titleEnglish":"Automotive","url":"https://www.ibm.com/industries/automotive?lnk=hpmps_buin"},{"title":"Banking & financial markets","titleEnglish":"Banking & financial markets","url":"https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin"},{"title":"Education","titleEnglish":"Education","url":"https://www.ibm.com/industries/education?lnk=hpmps_buin"},{"title":"Electronics","titleEnglish":"Electronics","url":"https://www.ibm.com/industries/electronics?lnk=hpmps_buin"},{"title":"Energy & utilities","titleEnglish":"Energy & utilities","url":"https://www.ibm.com/industries/energy?lnk=hpmps_buin"},{"title":"Government","titleEnglish":"Government","url":"https://www.ibm.com/industries/government?lnk=hpmps_buin"},{"title":"Healthcare","titleEnglish":"Healthcare","url":"https://www.ibm.com/industries/healthcare?lnk=hpmps_buin"},{"title":"Insurance","titleEnglish":"Insurance","url":"https://www.ibm.com/industries/insurance?lnk=hpmps_buin"},{"title":"Life sciences","titleEnglish":"Life sciences","url":"https://www.ibm.com/industries/lifesciences?lnk=hpmps_buin"},{"title":"View all Industries","titleEnglish":"View all Industries","url":"https://www.ibm.com/industries?lnk=hpmps_buin#2546397"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"View all products","titleEnglish":"View all products","url":"https://www.ibm.com/products?lnk=hpmps_buall","megaPanelViewAll":true}]}]},{"title":"Consulting & Services","titleEnglish":"Services & Consulting","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"IBM Consulting","titleEnglish":"IBM Consulting","url":"https://www.ibm.com/consulting?lnk=hpmco&lnk2=link","megapanelContent":{"headingTitle":"IBM Consulting","headingUrl":"https://www.ibm.com/consulting?lnk=hpmco&lnk2=link","description":"","quickLinks":{"title":"","links":[{"title":"Strategy Consulting","titleEnglish":"Strategy Consulting","url":"https://www.ibm.com/consulting/strategy?lnk=hpmco_bust&lnk2=learn"},{"title":"Experience Consulting","titleEnglish":"Experience Consulting","url":"https://www.ibm.com/consulting/experience?lnk=hpmco_buex&lnk2=learn"},{"title":"Operations Consulting","titleEnglish":"Operations Consulting","url":"https://www.ibm.com/consulting/operations?lnk=hpmco_buop&lnk2=learn"},{"title":"Technology Consulting","titleEnglish":"Technology Consulting","url":"https://www.ibm.com/consulting/technology?lnk=hpmco_bute&lnk2=learn"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Business consulting services","titleEnglish":"Business process services","url":"https://www.ibm.com/services/business?lnk=hpmsc_bups","megapanelContent":{"headingTitle":"Business consulting services","headingUrl":"https://www.ibm.com/services/business?lnk=hpmsc_bups","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence services","titleEnglish":"Artificial intelligence services","url":"https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/cloud/automation/services?lnk=hpmsc_bups"},{"title":"Big data & data platform","titleEnglish":"Big data & data platform","url":"https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups"},{"title":"Business process outsourcing","titleEnglish":"Business process outsourcing","url":"https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups"},{"title":"Edge consulting","titleEnglish":"Edge consulting","url":"https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups"},{"title":"Finance consulting and outsourcing services","titleEnglish":"Finance transformation","url":"https://www.ibm.com/services/process/finance-consulting?lnk=hpmsc_bups"},{"title":"Operations consulting","titleEnglish":"IoT consulting","url":"https://www.ibm.com/services/process/operations-consulting?lnk=hpmsc_bups"},{"title":"Procurement consulting and managed services","titleEnglish":"Procurement & strategic sourcing","url":"https://www.ibm.com/services/process/procurement-consulting?lnk=hpmsc_bups"},{"title":"Risk management consulting services","titleEnglish":"Risk consulting & fraud management","url":"https://www.ibm.com/services/process/risk-management?lnk=hpmsc_bups"},{"title":"Supply chain consulting services","titleEnglish":"Supply chain","url":"https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png","linkTitle":"","linkUrl":""}}},{"title":"Design & business strategy","titleEnglish":"Design & business strategy","url":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs","megapanelContent":{"headingTitle":"Design & business strategy","headingUrl":"https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs","description":"","quickLinks":{"title":"","links":[{"title":"Customer experience consulting","titleEnglish":"Experience strategy","url":"https://www.ibm.com/services/customer-experience-consulting?lnk=hpmsc_bubs"},{"title":"E-commerce consulting","titleEnglish":"Digital strategy","url":"https://www.ibm.com/services/ecommerce?lnk=hpmsc_bubs"},{"title":"Marketing consulting","titleEnglish":"Marketing platforms","url":"https://www.ibm.com/services/marketing-consulting?lnk=hpmsc_bubs"},{"title":"Salesforce consulting","titleEnglish":"Salesforce consulting","url":"https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png","linkTitle":"","linkUrl":""}}},{"title":"Hybrid multicloud services","titleEnglish":"Hybrid multicloud services","url":"https://www.ibm.com/cloud/services?lnk=hpmsc_bups"},{"title":"Talent management services","titleEnglish":"Talent & transformation","url":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","megapanelContent":{"headingTitle":"Talent management services","headingUrl":"https://www.ibm.com/services/talent-management?lnk=hpmsc_buta","description":"","quickLinks":{"title":"","links":[{"title":"HR transformation services","titleEnglish":"HR transformation","url":"https://www.ibm.com/services/talent-management/hr-transformation?lnk=hpmsc_buta"},{"title":"Talent acquisition services","titleEnglish":"Talent acquisition","url":"https://www.ibm.com/services/talent-management/talent-acquisition?lnk=hpmsc_buta"},{"title":"Talent development services","titleEnglish":"Talent development","url":"https://www.ibm.com/services/talent-management/talent-development?lnk=hpmsc_buta"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png","linkTitle":"","linkUrl":""}}},{"title":"Application services","titleEnglish":"Application services","url":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","megapanelContent":{"headingTitle":"Application services","headingUrl":"https://www.ibm.com/services/applications?lnk=hpmsc_buas","description":"","quickLinks":{"title":"","links":[{"title":"Application Modernization","titleEnglish":"Application Modernization","url":"https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas"},{"title":"Enterprise applications strategy","titleEnglish":"Enterprise applications strategy","url":"https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Garage","titleEnglish":"IBM Garages","url":"https://www.ibm.com/garage?lnk=hpmsc_buas"},{"title":"Security services","titleEnglish":"Security services","url":"https://www.ibm.com/security/services?lnk=hpmsc_buse","megapanelContent":{"headingTitle":"Security services","headingUrl":"https://www.ibm.com/security/services?lnk=hpmsc_buse","description":"","quickLinks":{"title":"","links":[{"title":"Application security","titleEnglish":"Application security","url":"https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse"},{"title":"Cloud security","titleEnglish":"Cloud security","url":"https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse"},{"title":"Data security","titleEnglish":"Data security","url":"https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse"},{"title":"Identity & access management","titleEnglish":"Identity & access management","url":"https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse"},{"title":"Managed security","titleEnglish":"Managed security","url":"https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse"},{"title":"Security governance","titleEnglish":"Security governance","url":"https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png","linkTitle":"","linkUrl":""}}},{"title":"Technology Support Services","titleEnglish":"Services for tech support","url":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","megapanelContent":{"headingTitle":"Technology Support Services","headingUrl":"https://www.ibm.com/services/technology-support?lnk=hpmsc_busv","description":"","quickLinks":{"title":"","links":[{"title":"Open source","titleEnglish":"Open source","url":"https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv"},{"title":"Third party & multivendor","titleEnglish":"Third party & multivendor","url":"https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv"},{"title":"IBM warranties and maintenance","titleEnglish":"IBM warranties and maintenance","url":"https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png","linkTitle":"","linkUrl":""}}},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/financing?lnk=hpmsc_bufi"},{"title":"View all services","titleEnglish":"View all services","url":"https://www.ibm.com/services?lnk=hpmsc_buall","megaPanelViewAll":true}]}]},{"title":"Learn & Support","titleEnglish":"Learn & Support","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"What is...","titleEnglish":"What is...","url":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","megapanelContent":{"headingTitle":"What is...","headingUrl":"https://www.ibm.com/cloud/learn?lnk=hpmls_buwi","description":"","quickLinks":{"title":"","links":[{"title":"Artificial intelligence","titleEnglish":"Artificial intelligence","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi"},{"title":"Automation","titleEnglish":"Automation","url":"https://www.ibm.com/topics/automation?lnk=hpmls_buwi"},{"title":"Blockchain","titleEnglish":"Blockchain","url":"https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi"},{"title":"Business intelligence","titleEnglish":"Business intelligence","url":"https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi"},{"title":"Chatbots","titleEnglish":"Chatbots","url":"https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi"},{"title":"Cloud computing","titleEnglish":"Cloud computing","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi"},{"title":"Containerization","titleEnglish":"Containerization","url":"https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi"},{"title":"Cybersecurity","titleEnglish":"Cybersecurity","url":"https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi"},{"title":"Databases","titleEnglish":"Databases","url":"https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi"},{"title":"DevOps","titleEnglish":"DevOps","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi"},{"title":"Hybrid Cloud","titleEnglish":"Hybrid Cloud","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi"},{"title":"Kubernetes","titleEnglish":"Kubernetes","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi"},{"title":"Quantum computing","titleEnglish":"Quantum computing","url":"https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi"},{"title":"Supply chain","titleEnglish":"Supply chain","url":"https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png","linkTitle":"","linkUrl":""}}},{"title":"Training","titleEnglish":"Training","url":"https://www.ibm.com/training/?lnk=hpmls_butr","megapanelContent":{"headingTitle":"Training","headingUrl":"https://www.ibm.com/training/?lnk=hpmls_butr","description":"","quickLinks":{"title":"","links":[{"title":"Courses","titleEnglish":"Courses","url":"https://www.ibm.com/training/search?q=course&lnk=hpmls_butr"},{"title":"Learning journeys","titleEnglish":"Learning journeys","url":"https://www.ibm.com/training/journeys?lnk=hpmls_butr"},{"title":"Professional certifications","titleEnglish":"Professional certifications","url":"https://www.ibm.com/certify?lnk=hpmls_butr"},{"title":"Digital learning subscriptions","titleEnglish":"Digital learning subscriptions","url":"https://www.ibm.com/training/subscriptions?lnk=hpmls_butr"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png","linkTitle":"","linkUrl":""}}},{"title":"Developer education","titleEnglish":"Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude","megapanelContent":{"headingTitle":"Developer education","headingUrl":"https://developer.ibm.com/?lnk=hpmls_bude","description":"","quickLinks":{"title":"","links":[{"title":"Code patterns","titleEnglish":"Code patterns","url":"https://developer.ibm.com/patterns/?lnk=hpmls_bude"},{"title":"Developer community","titleEnglish":"Developer community","url":"https://developer.ibm.com/community/?lnk=hpmls_bude"},{"title":"Developer events","titleEnglish":"Developer events","url":"https://developer.ibm.com/events/?lnk=hpmls_bude"},{"title":"Open Source @ IBM","titleEnglish":"Open Source @ IBM","url":"https://ibm.com/opensource?lnk=hpmls_bude"},{"title":"Technical articles","titleEnglish":"Technical articles","url":"https://developer.ibm.com/articles?lnk=hpmls_bude"},{"title":"Tutorials","titleEnglish":"Tutorials","url":"https://developer.ibm.com/tutorials/?lnk=hpmls_bude"},{"title":"Videos","titleEnglish":"Videos","url":"https://developer.ibm.com/videos?lnk=hpmls_bude"},{"title":"View more Developer education","titleEnglish":"View more Developer education","url":"https://developer.ibm.com/?lnk=hpmls_bude"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png","linkTitle":"","linkUrl":""}}},{"title":"Documentation","titleEnglish":"Documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc","megapanelContent":{"headingTitle":"Documentation","headingUrl":"https://www.ibm.com/docs/en?lnk=hpmls_budc","description":"","quickLinks":{"title":"","links":[{"title":"All product documentation","titleEnglish":"All product documentation","url":"https://www.ibm.com/docs/en?lnk=hpmls_budc"},{"title":"For products on IBM Cloud","titleEnglish":"For products on IBM Cloud","url":"https://cloud.ibm.com/docs?lnk=hpmls_budc"},{"title":"For use cases — IBM Redbooks","titleEnglish":"For use cases — IBM Redbooks","url":"https://www.redbooks.ibm.com/?lnk=hpmls_budc"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png","linkTitle":"","linkUrl":""}}},{"title":"Community","titleEnglish":"Community","url":"","megapanelContent":{"headingTitle":"Community","headingUrl":"","description":"","quickLinks":{"title":"","links":[{"title":"IBM Developer","titleEnglish":"IBM Developer","url":"https://developer.ibm.com/?lnk=hpmls_buco"},{"title":"IBM Community","titleEnglish":"IBM Community","url":"https://community.ibm.com/community/user/home?lnk=hpmls_buco"},{"title":"Support forums","titleEnglish":"Support forums","url":"https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}},{"title":"Resources","titleEnglish":"Resources","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure","megapanelContent":{"headingTitle":"Resources","headingUrl":"https://www.ibm.com/blogs/?lnk=hpmls_bure","description":"","quickLinks":{"title":"","links":[{"title":"Blogs & thought leadership","titleEnglish":"Blogs & thought leadership","url":"https://www.ibm.com/blogs/?lnk=hpmls_bure"},{"title":"Case studies & client stories","titleEnglish":"Case studies & client stories","url":"https://www.ibm.com/case-studies?lnk=hpmls_bure"},{"title":"Upcoming events & webinars","titleEnglish":"Upcoming events & webinars","url":"https://www.ibm.com/events?lnk=hpmls_bure"},{"title":"IBM Institute for Business Value","titleEnglish":"IBM Institute for Business Value","url":"https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png","linkTitle":"","linkUrl":""}}},{"title":"Support","titleEnglish":"Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu","megapanelContent":{"headingTitle":"Support","headingUrl":"https://www.ibm.com/mysupport?lnk=hpmls_busu","description":"","quickLinks":{"title":"","links":[{"title":"Download fixes, updates & drivers","titleEnglish":"Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu"},{"title":"Download licensed software - Passport Advantage","titleEnglish":"Download licensed software - Passport Advantage","url":"https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu"},{"title":"View your cases","titleEnglish":"View your cases","url":"https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu"},{"title":"Open a case","titleEnglish":"Open a case","url":"https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu"},{"title":"View available support plans","titleEnglish":"View available support plans","url":"https://www.ibm.com/support/offerings?lnk=hpmls_busu"},{"title":"View more on Support","titleEnglish":"View more on Support","url":"https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png","linkTitle":"","linkUrl":""}}},{"title":"Cloud platform support","titleEnglish":"Cloud platform support","url":"https://www.ibm.com/cloud/support?lnk=hpmls_bucl"}]}]},{"title":"Explore more","titleEnglish":"Explore more","url":"","hasMenu":true,"hasMegapanel":true,"menuSections":[{"heading":"","menuItems":[{"title":"Partner with us","titleEnglish":"Partners","url":"https://www.ibm.com/partners?lnk=hpmex_bupa","megapanelContent":{"headingTitle":"Partner with us","headingUrl":"https://www.ibm.com/partners?lnk=hpmex_bupa","description":"","quickLinks":{"title":"","links":[{"title":"PartnerWorld","titleEnglish":"Partner with us — PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa"},{"title":"Our strategic partnerships","titleEnglish":"Our strategic partnerships","url":"https://www.ibm.com/alliances?lnk=hpmex_bupa"},{"title":"Flexible payment plans","titleEnglish":"Flexible payment plans","url":"https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png","linkTitle":"","linkUrl":""}}},{"title":"IBM Research","titleEnglish":"IBM Research","url":"https://www.research.ibm.com/?lnk=hpmex_bure","megapanelContent":{"headingTitle":"IBM Research","headingUrl":"https://www.research.ibm.com/?lnk=hpmex_bure","description":"","quickLinks":{"title":"","links":[{"title":"Research areas","titleEnglish":"Research areas","url":"https://www.research.ibm.com/?lnk=hpmex_bure"},{"title":"Researcher directory","titleEnglish":"Researcher directory","url":"https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure"},{"title":"Patents","titleEnglish":"Patents","url":"https://www.research.ibm.com/patents/?lnk=hpmex_bure"},{"title":"Work with us","titleEnglish":"Work with us","url":"https://www.research.ibm.com/frontiers/?lnk=hpmex_bure"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png","linkTitle":"","linkUrl":""}}},{"title":"About IBM","titleEnglish":"About IBM","url":"https://www.ibm.com/about?lnk=hpmex_buab","megapanelContent":{"headingTitle":"About IBM","headingUrl":"https://www.ibm.com/about?lnk=hpmex_buab","description":"","quickLinks":{"title":"","links":[{"title":"Annual report","titleEnglish":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=hpmex_buab"},{"title":"Career opportunities","titleEnglish":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=hpmex_buab"},{"title":"Corporate social responsibility","titleEnglish":"Corporate social responsibility","url":"https://www.ibm.org?lnk=hpmex_buab"},{"title":"Diversity & inclusion","titleEnglish":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab"},{"title":"Investor relations","titleEnglish":"Investor relations","url":"https://www.ibm.com/investor/?lnk=hpmex_buab"},{"title":"News & announcements","titleEnglish":"News & announcements","url":"https://newsroom.ibm.com?lnk=hpmex_buab"},{"title":"Thought leadership","titleEnglish":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=hpmex_buab"},{"title":"Security, privacy & trust","titleEnglish":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=hpmex_buab"}]},"feature":{"heading":"","imageUrl":"https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png","linkTitle":"","linkUrl":""}}},{"title":"COVID-19","titleEnglish":"COVID-19","url":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","megapanelContent":{"headingTitle":"COVID-19","headingUrl":"https://www.ibm.com/impact/covid-19?lnk=hpmex_buco","description":"","quickLinks":{"title":"","links":[{"title":"Business solutions","titleEnglish":"Business solutions","url":"https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco"},{"title":"Action guide","titleEnglish":"Action guide","url":"https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco"}]},"feature":{"heading":"","imageUrl":"","linkTitle":"","linkUrl":""}}}]}]}]},"masthead":{"search":{"btnSearchClosed":"Open IBM search field","btnSearchOpen":"Search all of IBM","btnClose":"Close IBM search field","placeHolderText":"Search all of IBM"},"profileMenu":{"signedout":{"iconLabel":"User Profile","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"}]},"signedin":{"iconLabel":"User Profile: Logged in","links":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]}}},"profileMenu":{"signedout":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"id":"signin","title":"Log in","url":"https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com%2Fus-en%3Far%3D1&nonce=8675309"}],"signedin":[{"title":"My IBM","url":"https://myibm.ibm.com/?lnk=mmi"},{"title":"Profile","url":"https://myibm.ibm.com/profile/?lnk=mmi"},{"title":"Billing","url":"https://myibm.ibm.com/billing/?lnk=mmi"},{"id":"signout","title":"Log out","url":"https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"}]},"marketplace":{"title":"Products","url":""},"footerMenu":[{"title":"Products & Solutions","links":[{"title":"Top products & platforms","url":"https://www.ibm.com/products?lnk=fps"},{"title":"Industries","url":"https://www.ibm.com/industries?lnk=fps"},{"title":"Artificial intelligence","url":"https://ibm.com/cloud/ai?lnk=fps"},{"title":"Blockchain","url":"https://www.ibm.com/blockchain?lnk=fps"},{"title":"Business operations","url":"https://www.ibm.com/business-operations?lnk=fps"},{"title":"Cloud computing","url":"https://www.ibm.com/cloud?lnk=fps"},{"title":"Data & Analytics","url":"https://www.ibm.com/analytics?lnk=fps"},{"title":"Hybrid cloud","url":"https://www.ibm.com/cloud/hybrid?lnk=fps"},{"title":"IT infrastructure","url":"https://www.ibm.com/it-infrastructure?lnk=fps"},{"title":"Security","url":"https://www.ibm.com/security?lnk=fps"},{"title":"Supply chain","url":"https://www.ibm.com/supply-chain?lnk=fps"}]},{"title":"Learn about","links":[{"title":"What is Hybrid Cloud?","url":"https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"},{"title":"What is Artificial intelligence?","url":"https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"},{"title":"What is Cloud Computing?","url":"https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"},{"title":"What is Kubernetes?","url":"https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"},{"title":"What are Containers?","url":"https://www.ibm.com/cloud/learn/containers?lnk=fle"},{"title":"What is DevOps?","url":"https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"},{"title":"What is Machine Learning?","url":"https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"}]},{"title":"Popular links","links":[{"title":"IBM Consulting","url":"https://www.ibm.com/consulting?lnk=fco"},{"title":"Communities","url":"https://community.ibm.com/community/user/home?lnk=fpo"},{"title":"Developer education","url":"https://developer.ibm.com/?lnk=fpo"},{"title":"Support - Download fixes, updates & drivers","url":"https://www.ibm.com/support/fixcentral/?lnk=fpo"},{"title":"IBM Research","url":"https://www.research.ibm.com/?lnk=fpo"},{"title":"Partner with us - PartnerWorld","url":"https://www.ibm.com/partnerworld/public?lnk=fpo"},{"title":"Training - Courses","url":"https://www.ibm.com/training/search?q=course&lnk=fpo"},{"title":"Upcoming events & webinars","url":"https://www.ibm.com/events/?lnk=fpo"}]},{"title":"About IBM","links":[{"title":"Annual report","url":"https://www.ibm.com/annualreport/?lnk=fab"},{"title":"Career opportunities","url":"https://www.ibm.com/employment/?lnk=fab"},{"title":"Corporate social responsibility","url":"https://www.ibm.org/?lnk=fab"},{"title":"Diversity & inclusion","url":"https://www.ibm.com/employment/inclusion/?lnk=fab"},{"title":"Investor relations","url":"https://www.ibm.com/investor/?lnk=fab"},{"title":"News & announcements","url":"https://newsroom.ibm.com/?lnk=fab"},{"title":"Thought leadership","url":"https://www.ibm.com/thought-leadership/?lnk=fab"},{"title":"Security, privacy & trust","url":"https://www.ibm.com/trust?lnk=fab"},{"title":"About IBM","url":"https://www.ibm.com/about?lnk=fab"}]},{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]}],"footerThin":[{"title":"Contact IBM","titleEnglish":"Contact IBM","url":"https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"},{"title":"Privacy","titleEnglish":"Privacy","url":"https://www.ibm.com/privacy/us/en/?lnk=flg-priv-usen"},{"title":"Terms of use","titleEnglish":"Terms of use","url":"https://www.ibm.com/us-en/legal?lnk=flg-tous-usen"},{"title":"Accessibility","titleEnglish":"Accessibility","url":"https://www.ibm.com/accessibility/us/en/?lnk=flg-acce-usen"}],"localeSelector":{"localVersions":"Localized versions of this page","homepages":"Worldwide ibm.com home pages"},"socialFollow":{"title":"Follow IBM","links":[{"linkClass":"ibm-linkedin-encircled-link","title":"LinkedIn","url":"https://www.linkedin.com/company/ibm"},{"linkClass":"ibm-twitter-encircled-link","title":"Twitter","url":"https://www.twitter.com/ibm"},{"linkClass":"ibm-instagram-encircled-link","title":"Instagram","url":"https://www.instagram.com/ibm"}]},"socialSharing":[{"id":"facebook","title":"Facebook","url":"https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"},{"id":"twitter","title":"Twitter","url":"https://twitter.com/?status=%{URL}%20-%20%{TITLE}"},{"id":"linkedin","title":"Linked In","url":"https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"}],"leaving":{"LEAVING001":"Leaving the IBM Web site","LEAVING002":"You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.","LEAVING003":"You are headed to","LEAVING004":"Notice"},"misc":{"backtotop":"Back to top","cancelText":"Cancel","close":"Close","cookiePrefs":"Cookie preferences","continueText":"Continue","editProfile":"Edit profile","emailThisPage":"E-mail this page","feedback":"Feedback","mpScopedSearh":"Products","withinMp":"Products","next":"Next","noresults":"No results found","prev":"Previous","resultsNav":"Use down and up arrow keys to navigate through the results.","search":"Search","selectCountry":"Select a country/region","sharePage":"Share this page","signin":"Sign in","signout":"Sign out","sitenav":"Site navigation","welcomeback":"Welcome back"},"timestamp":1635277797894}
diff --git a/packages/react/tests/e2e/cypress/fixtures/typeahead.json b/packages/react/tests/e2e/cypress/fixtures/typeahead.json
deleted file mode 100644
index e8b231ab9d8..00000000000
--- a/packages/react/tests/e2e/cypress/fixtures/typeahead.json
+++ /dev/null
@@ -1 +0,0 @@
-{ "response" : [ ["test", "0"],["testing", "1"],["tester", "2"],["test automation", "3"],["testing jobs", "4"],["test realtime", "5"],["test of between subjects effects", "6"],["test data management", "7"],["test specialist", "8"],["test tls 1.2", "9"] ] }
diff --git a/packages/react/tests/e2e/cypress/integration/ButtonGroup/ButtonGroup.e2e.js b/packages/react/tests/e2e/cypress/integration/ButtonGroup/ButtonGroup.e2e.js
deleted file mode 100644
index 8de101a0a56..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ButtonGroup/ButtonGroup.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ButtonGroup', () => {
-  it('should load the default ButtonGroup example', () => {
-    cy.visit('/ButtonGroup');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ButtonGroup | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CTA/CTA.e2e.js b/packages/react/tests/e2e/cypress/integration/CTA/CTA.e2e.js
deleted file mode 100644
index ecf14c89b6c..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CTA/CTA.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CTA', () => {
-  it('should load the default CTA example', () => {
-    cy.visit('/CTA');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CTA | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CTASection/CTASection.e2e.js b/packages/react/tests/e2e/cypress/integration/CTASection/CTASection.e2e.js
deleted file mode 100644
index 23ff2d0382b..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CTASection/CTASection.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CTASection', () => {
-  it('should load the default CTASection example', () => {
-    cy.visit('/CTASection');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CTASection | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CalloutQuote/CalloutQuote.e2e.js b/packages/react/tests/e2e/cypress/integration/CalloutQuote/CalloutQuote.e2e.js
deleted file mode 100644
index 51e51d816b9..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CalloutQuote/CalloutQuote.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CalloutQuote', () => {
-  it('should load the default CalloutQuote example', () => {
-    cy.visit('/CalloutQuote');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CalloutQuote | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CalloutWithMedia/CalloutWithMedia.e2e.js b/packages/react/tests/e2e/cypress/integration/CalloutWithMedia/CalloutWithMedia.e2e.js
deleted file mode 100644
index 53a721ce99e..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CalloutWithMedia/CalloutWithMedia.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CalloutWithMedia', () => {
-  it('should load the default CalloutWithMedia example', () => {
-    cy.visit('/CalloutWithMedia');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CalloutWithMedia | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Card/Card.e2e.js b/packages/react/tests/e2e/cypress/integration/Card/Card.e2e.js
deleted file mode 100644
index a0156567637..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Card/Card.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CardGroup', () => {
-  it('should load the default CardGroup example', () => {
-    cy.visit('/CardGroup');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CardGroup | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CardGroup/CardGroup.e2e.js b/packages/react/tests/e2e/cypress/integration/CardGroup/CardGroup.e2e.js
deleted file mode 100644
index 5a0608c3f42..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CardGroup/CardGroup.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('Card', () => {
-  it('should load the default Card example', () => {
-    cy.visit('/Card');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Card | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CardLink/CardLink.e2e.js b/packages/react/tests/e2e/cypress/integration/CardLink/CardLink.e2e.js
deleted file mode 100644
index b0e9e91c75f..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CardLink/CardLink.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CardLink', () => {
-  it('should load the default CardLink example', () => {
-    cy.visit('/CardLink');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CardLink | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CardSectionImages/CardSectionImages.e2e.js b/packages/react/tests/e2e/cypress/integration/CardSectionImages/CardSectionImages.e2e.js
deleted file mode 100644
index 645b2cca5c3..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CardSectionImages/CardSectionImages.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CardSectionImages', () => {
-  it('should load the default CardSectionImages example', () => {
-    cy.visit('/CardSectionImages');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CardSectionImages | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/CardSectionSimple/CardSectionSimple.e2e.js b/packages/react/tests/e2e/cypress/integration/CardSectionSimple/CardSectionSimple.e2e.js
deleted file mode 100644
index 2850e9e1ac6..00000000000
--- a/packages/react/tests/e2e/cypress/integration/CardSectionSimple/CardSectionSimple.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('CardSectionSimple', () => {
-  it('should load the default CardSectionSimple example', () => {
-    cy.visit('/CardSectionSimple');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('CardSectionSimple | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentBlockCards/ContentBlockCards.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentBlockCards/ContentBlockCards.e2e.js
deleted file mode 100644
index 490a659c1c3..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentBlockCards/ContentBlockCards.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentBlockCards', () => {
-  it('should load the default ContentBlockCards example', () => {
-    cy.visit('/ContentBlockCards');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentBlockCards | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentBlockHorizontal/ContentBlockHorizontal.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentBlockHorizontal/ContentBlockHorizontal.e2e.js
deleted file mode 100644
index 8d7a5caab5a..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentBlockHorizontal/ContentBlockHorizontal.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentBlockHorizontal', () => {
-  it('should load the default ContentBlockHorizontal example', () => {
-    cy.visit('/ContentBlockHorizontal');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentBlockHorizontal | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentBlockMedia/ContentBlockMedia.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentBlockMedia/ContentBlockMedia.e2e.js
deleted file mode 100644
index 40aa60b0bef..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentBlockMedia/ContentBlockMedia.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentBlockMedia', () => {
-  it('should load the default ContentBlockMedia example', () => {
-    cy.visit('/ContentBlockMedia');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentBlockMedia | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentBlockMixed/ContentBlockMixed.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentBlockMixed/ContentBlockMixed.e2e.js
deleted file mode 100644
index 24c386bb14b..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentBlockMixed/ContentBlockMixed.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentBlockMixed', () => {
-  it('should load the default ContentBlockMixed example', () => {
-    cy.visit('/ContentBlockMixed');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentBlockMixed | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentBlockSegmented/ContentBlockSegmented.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentBlockSegmented/ContentBlockSegmented.e2e.js
deleted file mode 100644
index 73e325d18a5..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentBlockSegmented/ContentBlockSegmented.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentBlockSegmented', () => {
-  it('should load the default ContentBlockSegmented example', () => {
-    cy.visit('/ContentBlockSegmented');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentBlockSegmented | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentBlockSimple/ContentBlockSimple.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentBlockSimple/ContentBlockSimple.e2e.js
deleted file mode 100644
index 19c1f59670c..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentBlockSimple/ContentBlockSimple.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentBlockSimple', () => {
-  it('should load the default ContentBlockSimple example', () => {
-    cy.visit('/ContentBlockSimple');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentBlockSimple | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentGroupCards/ContentGroupCards.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentGroupCards/ContentGroupCards.e2e.js
deleted file mode 100644
index e01c42f0f92..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentGroupCards/ContentGroupCards.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentGroupCards', () => {
-  it('should load the default ContentGroupCards example', () => {
-    cy.visit('/ContentGroupCards');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentGroupCards | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentGroupHorizontal/ContentGroupHorizontal.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentGroupHorizontal/ContentGroupHorizontal.e2e.js
deleted file mode 100644
index 669c5aa8427..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentGroupHorizontal/ContentGroupHorizontal.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentGroupHorizontal', () => {
-  it('should load the default ContentGroupHorizontal example', () => {
-    cy.visit('/ContentGroupHorizontal');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentGroupHorizontal | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentGroupPictograms/ContentGroupPictograms.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentGroupPictograms/ContentGroupPictograms.e2e.js
deleted file mode 100644
index 2622ac4aa77..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentGroupPictograms/ContentGroupPictograms.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentGroupPictograms', () => {
-  it('should load the default ContentGroupPictograms example', () => {
-    cy.visit('/ContentGroupPictograms');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentGroupPictograms | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentGroupSimple/ContentGroupSimple.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentGroupSimple/ContentGroupSimple.e2e.js
deleted file mode 100644
index 463ad78c191..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentGroupSimple/ContentGroupSimple.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentGroupSimple', () => {
-  it('should load the default ContentGroupSimple example', () => {
-    cy.visit('/ContentGroupSimple');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentGroupSimple | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ContentItemHorizontal/ContentItemHorizontal.e2e.js b/packages/react/tests/e2e/cypress/integration/ContentItemHorizontal/ContentItemHorizontal.e2e.js
deleted file mode 100644
index 17ebe8e996f..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ContentItemHorizontal/ContentItemHorizontal.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ContentItemHorizontal', () => {
-  it('should load the default ContentItemHorizontal example', () => {
-    cy.visit('/ContentItemHorizontal');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ContentItemHorizontal | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/DotcomShell/DotcomShell.e2e.js b/packages/react/tests/e2e/cypress/integration/DotcomShell/DotcomShell.e2e.js
deleted file mode 100644
index 8168ffa688c..00000000000
--- a/packages/react/tests/e2e/cypress/integration/DotcomShell/DotcomShell.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-describe('DotcomShell', () => {
-  it('should load the default DotcomShell example', () => {
-    cy.visit('/DotcomShell');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('DotcomShell | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ExpressiveModal/ExpressiveModal.e2e.js b/packages/react/tests/e2e/cypress/integration/ExpressiveModal/ExpressiveModal.e2e.js
deleted file mode 100644
index 4a8ddd5db7e..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ExpressiveModal/ExpressiveModal.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ExpressiveModal', () => {
-  it('should load the default ExpressiveModal example', () => {
-    cy.visit('/ExpressiveModal');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ExpressiveModal | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/FeatureCard/FeatureCard.e2e.js b/packages/react/tests/e2e/cypress/integration/FeatureCard/FeatureCard.e2e.js
deleted file mode 100644
index e5560ddc686..00000000000
--- a/packages/react/tests/e2e/cypress/integration/FeatureCard/FeatureCard.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('FeatureCard', () => {
-  it('should load the default FeatureCard example', () => {
-    cy.visit('/FeatureCard');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('FeatureCard | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Footer/Footer.e2e.js b/packages/react/tests/e2e/cypress/integration/Footer/Footer.e2e.js
deleted file mode 100644
index 828a3916d2e..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Footer/Footer.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-describe('Footer', () => {
-  it('should load the default Footer example', () => {
-    cy.visit('/Footer');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Footer | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/HorizontalRule/HorizontalRule.e2e.js b/packages/react/tests/e2e/cypress/integration/HorizontalRule/HorizontalRule.e2e.js
deleted file mode 100644
index b40cbcdb111..00000000000
--- a/packages/react/tests/e2e/cypress/integration/HorizontalRule/HorizontalRule.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('HorizontalRule', () => {
-  it('should load the default HorizontalRule example', () => {
-    cy.visit('/HorizontalRule');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('HorizontalRule | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Image/Image.e2e.js b/packages/react/tests/e2e/cypress/integration/Image/Image.e2e.js
deleted file mode 100644
index e9a5448fa6b..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Image/Image.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('Image', () => {
-  it('should load the default Image example', () => {
-    cy.visit('/Image');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Image | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ImageWithCaption/ImageWithCaption.e2e.js b/packages/react/tests/e2e/cypress/integration/ImageWithCaption/ImageWithCaption.e2e.js
deleted file mode 100644
index 5a86521ddc0..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ImageWithCaption/ImageWithCaption.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ImageWithCaption', () => {
-  it('should load the default ImageWithCaption example', () => {
-    cy.visit('/ImageWithCaption');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ImageWithCaption | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Layout/Layout.e2e.js b/packages/react/tests/e2e/cypress/integration/Layout/Layout.e2e.js
deleted file mode 100644
index b7740804e5c..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Layout/Layout.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('Layout', () => {
-  it('should load the default Layout example', () => {
-    cy.visit('/Layout');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Layout | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/LeadSpaceBlock/LeadSpaceBlock.e2e.js b/packages/react/tests/e2e/cypress/integration/LeadSpaceBlock/LeadSpaceBlock.e2e.js
deleted file mode 100644
index afe8a975dee..00000000000
--- a/packages/react/tests/e2e/cypress/integration/LeadSpaceBlock/LeadSpaceBlock.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('LeadSpaceBlock', () => {
-  it('should load the default LeadSpaceBlock example', () => {
-    cy.visit('/LeadSpaceBlock');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('LeadSpaceBlock | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Leadspace/Leadspace.e2e.js b/packages/react/tests/e2e/cypress/integration/Leadspace/Leadspace.e2e.js
deleted file mode 100644
index 53fc812efda..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Leadspace/Leadspace.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('Leadspace', () => {
-  it('should load the default Leadspace example', () => {
-    cy.visit('/Leadspace');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Leadspace | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/LightboxMediaViewer/LightboxMediaViewer.e2e.js b/packages/react/tests/e2e/cypress/integration/LightboxMediaViewer/LightboxMediaViewer.e2e.js
deleted file mode 100644
index c830fb96bb0..00000000000
--- a/packages/react/tests/e2e/cypress/integration/LightboxMediaViewer/LightboxMediaViewer.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('LightboxMediaViewer', () => {
-  it('should load the default LightboxMediaViewer example', () => {
-    cy.visit('/LightboxMediaViewer');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('LightboxMediaViewer | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/LinkList/LinkList.e2e.js b/packages/react/tests/e2e/cypress/integration/LinkList/LinkList.e2e.js
deleted file mode 100644
index f2574d7014f..00000000000
--- a/packages/react/tests/e2e/cypress/integration/LinkList/LinkList.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('LinkList', () => {
-  it('should load the default LinkList example', () => {
-    cy.visit('/LinkList');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('LinkList | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/LinkWithIcon/LinkWithIcon.e2e.js b/packages/react/tests/e2e/cypress/integration/LinkWithIcon/LinkWithIcon.e2e.js
deleted file mode 100644
index 4b2e59f7c0b..00000000000
--- a/packages/react/tests/e2e/cypress/integration/LinkWithIcon/LinkWithIcon.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('LinkWithIcon', () => {
-  it('should load the default LinkWithIcon example', () => {
-    cy.visit('/LinkWithIcon');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('LinkWithIcon | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/LocaleModal/LocaleModal.e2e.js b/packages/react/tests/e2e/cypress/integration/LocaleModal/LocaleModal.e2e.js
deleted file mode 100644
index bd0f8ec769a..00000000000
--- a/packages/react/tests/e2e/cypress/integration/LocaleModal/LocaleModal.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-describe('LocaleModal', () => {
-  it('should load the default LocaleModal example', () => {
-    cy.visit('/LocaleModal');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('LocaleModal | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/LogoGrid/LogoGrid.e2e.js b/packages/react/tests/e2e/cypress/integration/LogoGrid/LogoGrid.e2e.js
deleted file mode 100644
index b2306e5c279..00000000000
--- a/packages/react/tests/e2e/cypress/integration/LogoGrid/LogoGrid.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('LogoGrid', () => {
-  it('should load the default LogoGrid example', () => {
-    cy.visit('/LogoGrid');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('LogoGrid | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Masthead/Masthead.e2e.js b/packages/react/tests/e2e/cypress/integration/Masthead/Masthead.e2e.js
deleted file mode 100644
index d16dc90727c..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Masthead/Masthead.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-describe('Masthead', () => {
-  it('should load the default Masthead example', () => {
-    cy.visit('/Masthead');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Masthead | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/MastheadL1/MastheadL1.e2e.js b/packages/react/tests/e2e/cypress/integration/MastheadL1/MastheadL1.e2e.js
deleted file mode 100644
index 7d835f9c79d..00000000000
--- a/packages/react/tests/e2e/cypress/integration/MastheadL1/MastheadL1.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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';
-
-describe('Masthead L1', () => {
-  it('should load the default Masthead L1 example', () => {
-    cy.visit('/MastheadL1');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Masthead L1 | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/PictogramItem/PictogramItem.e2e.js b/packages/react/tests/e2e/cypress/integration/PictogramItem/PictogramItem.e2e.js
deleted file mode 100644
index 89b34c2d2a8..00000000000
--- a/packages/react/tests/e2e/cypress/integration/PictogramItem/PictogramItem.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('PictogramItem', () => {
-  it('should load the default PictogramItem example', () => {
-    cy.visit('/PictogramItem');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('PictogramItem | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/Quote/Quote.e2e.js b/packages/react/tests/e2e/cypress/integration/Quote/Quote.e2e.js
deleted file mode 100644
index b5513685219..00000000000
--- a/packages/react/tests/e2e/cypress/integration/Quote/Quote.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('Quote', () => {
-  it('should load the default Quote example', () => {
-    cy.visit('/Quote');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('Quote | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/ScrollAnimations/ScrollAnimations.e2e.js b/packages/react/tests/e2e/cypress/integration/ScrollAnimations/ScrollAnimations.e2e.js
deleted file mode 100644
index d5e1f017d96..00000000000
--- a/packages/react/tests/e2e/cypress/integration/ScrollAnimations/ScrollAnimations.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('ScrollAnimations', () => {
-  it('should load the default ScrollAnimations example', () => {
-    cy.visit('/ScrollAnimations');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('ScrollAnimations | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/TableOfContents/TableOfContents.e2e.js b/packages/react/tests/e2e/cypress/integration/TableOfContents/TableOfContents.e2e.js
deleted file mode 100644
index 48e4c3db53f..00000000000
--- a/packages/react/tests/e2e/cypress/integration/TableOfContents/TableOfContents.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('TableOfContents', () => {
-  it('should load the default TableOfContents example', () => {
-    cy.visit('/TableOfContents');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('TableOfContents | default');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/integration/VideoPlayer/VideoPlayer.e2e.js b/packages/react/tests/e2e/cypress/integration/VideoPlayer/VideoPlayer.e2e.js
deleted file mode 100644
index 97f39fa2252..00000000000
--- a/packages/react/tests/e2e/cypress/integration/VideoPlayer/VideoPlayer.e2e.js
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('VideoPlayer', () => {
-  it('should load the default VideoPlayer example', () => {
-    cy.visit('/VideoPlayer');
-  });
-});
diff --git a/packages/react/tests/e2e/cypress/plugins/index.js b/packages/react/tests/e2e/cypress/plugins/index.js
deleted file mode 100644
index 3ae7465af44..00000000000
--- a/packages/react/tests/e2e/cypress/plugins/index.js
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-// eslint-disable-next-line no-unused-vars
-module.exports = (on, config) => {
-  // `on` is used to hook into various events Cypress emits
-  // `config` is the resolved Cypress config
-};
diff --git a/packages/react/tests/e2e/cypress/support/commands.js b/packages/react/tests/e2e/cypress/support/commands.js
deleted file mode 100644
index eb6c1a1f0ba..00000000000
--- a/packages/react/tests/e2e/cypress/support/commands.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
diff --git a/packages/react/tests/e2e/cypress/support/index.js b/packages/react/tests/e2e/cypress/support/index.js
deleted file mode 100644
index d6d536d5081..00000000000
--- a/packages/react/tests/e2e/cypress/support/index.js
+++ /dev/null
@@ -1,81 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 2022
- *
- * 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 '@percy/cypress';
-import './commands';
-
-beforeEach(() => {
-  // Mock the country list
-  cy.intercept(
-    'https://1.www.s81c.com/common/js/dynamicnav/www/countrylist/jsononly/usen-utf8.json',
-    {
-      fixture: 'countrylist.json',
-    }
-  );
-
-  // Mock the translation file
-  cy.intercept(
-    'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/translations/masthead-footer/usen.json',
-    {
-      fixture: 'translation-raw.json',
-    }
-  );
-
-  // Mock the user status
-  cy.intercept('https://login.ibm.com/v1/mgmt/idaas/user/status/\n', {
-    fixture: 'status.json',
-  });
-
-  cy.intercept('https://prepiam.ice.ibmcloud.com/v1/mgmt/idaas/user/status/', {
-    fixture: 'status.json',
-  });
-
-  // Mock search typeahead API
-  cy.intercept('**/search/typeahead/v1?*', {
-    fixture: 'typeahead.json',
-  });
-
-  // Block ibm-common.js
-  cy.intercept('https://1.www.s81c.com/common/stats/ibm-common.js', {
-    fixture: 'ibm-common.js',
-  });
-
-  // Mock Kaltura API
-  // cy.intercept('https://cdnapisec.kaltura.com/api_v3/index.php?*', {
-  //   fixture: 'kaltura.json',
-  // });
-
-  // Set an initial `digitalData` object
-  cy.window().then(win => {
-    win.digitalData = {
-      page: {
-        category: {
-          primaryCategory: '',
-        },
-        pageInfo: {
-          effectiveDate: '',
-          expiryDate: '',
-          language: 'en-US',
-          publishDate: '',
-          publisher: '',
-          version: 'Carbon for IBM.com',
-          ibm: {
-            contentDelivery: '',
-            contentProducer: '',
-            country: 'US',
-            industry: '',
-            owner: '',
-            siteID: '',
-            subject: '',
-            type: '',
-          },
-        },
-        isDataLayerReady: true,
-      },
-    };
-  });
-});
diff --git a/packages/react/tests/karma-accessibility-checker.conf.js b/packages/react/tests/karma-accessibility-checker.conf.js
deleted file mode 100644
index ffd2df46506..00000000000
--- a/packages/react/tests/karma-accessibility-checker.conf.js
+++ /dev/null
@@ -1,182 +0,0 @@
-/**
- * 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.
- */
-
-'use strict';
-
-/* eslint-disable global-require */
-
-const path = require('path');
-
-module.exports = function setupKarmaIBMa(config) {
-  const { browsers, random, specs, useExperimentalFeatures, verbose } =
-    config.customConfig;
-
-  config.set({
-    basePath: '..',
-
-    browsers: browsers.length > 0 ? browsers : ['ChromeHeadless'],
-
-    client: {
-      jasmine: {
-        random: !!random,
-      },
-    },
-
-    frameworks: ['jasmine', 'aChecker'],
-
-    files: [
-      'tests/utils/achecker-compliance.js',
-      'tests/a11y/karma-setup-context.js',
-      'tests/a11y/karma-test-shim.js',
-    ],
-
-    preprocessors: {
-      'src/**/*.js': ['webpack', 'sourcemap'],
-      'tests/a11y/**/*.js': ['webpack', 'sourcemap'],
-      'tests/utils/**/*.js': ['webpack', 'sourcemap'],
-    },
-
-    webpack: {
-      mode: 'development',
-      devtool: 'inline-source-maps',
-      module: {
-        rules: [
-          {
-            test: /@storybook[\\/]addon-/i,
-            use: 'null-loader',
-          },
-          {
-            test: /\.mdx$/,
-            use: 'null-loader',
-          },
-          {
-            test: /\.svg$/,
-            use: ['@svgr/webpack'],
-          },
-          {
-            test: /\.js$/,
-            use: [
-              {
-                loader: 'babel-loader',
-                options: {
-                  configFile: false,
-                  presets: [
-                    '@babel/preset-react',
-                    [
-                      '@babel/preset-env',
-                      {
-                        modules: false,
-                        targets: {
-                          browsers: [
-                            'last 1 version',
-                            'Firefox ESR',
-                            'not opera > 0',
-                            'not op_mini > 0',
-                            'not op_mob > 0',
-                            'not android > 0',
-                            'not edge > 0',
-                            'not ie > 0',
-                            'not ie_mob > 0',
-                          ],
-                        },
-                      },
-                    ],
-                  ],
-                  plugins: [
-                    '@babel/plugin-transform-class-properties',
-                    '@babel/plugin-proposal-export-default-from',
-                    '@babel/plugin-transform-nullish-coalescing-operator',
-                    '@babel/plugin-transform-optional-chaining',
-                    [
-                      'babel-plugin-transform-define',
-                      {
-                        'process.env.AAT_STORIES_REGEXP':
-                          specs.length > 0
-                            ? new RegExp(specs[0])
-                            : /\.stories\.js$/,
-                        'process.env.AAT_VERBOSE': !!verbose,
-                      },
-                    ],
-                  ],
-                },
-              },
-            ],
-          },
-          {
-            test: /\.scss$/,
-            sideEffects: true,
-            use: [
-              {
-                loader: 'postcss-loader',
-                options: {
-                  plugins: () => [
-                    require('autoprefixer')({
-                      overrideBrowsersList: [
-                        '> 0.5%',
-                        'last 2 versions',
-                        'Firefox ESR',
-                        'not dead',
-                      ],
-                    }),
-                  ],
-                },
-              },
-              {
-                loader: 'fast-sass-loader',
-                options: {
-                  includePaths: [
-                    path.resolve(__dirname, '../node_modules'),
-                    path.resolve(__dirname, '../../../node_modules'),
-                  ],
-                  data: `
-                    $feature-flags: (
-                      grid: ${useExperimentalFeatures},
-                      ui-shell: true,
-                    );
-                  `,
-                },
-              },
-            ],
-          },
-          {
-            test: /\.(jpe?g|png|gif)(\?[a-z0-9=.]+)?$/,
-            loader: 'file-loader',
-          },
-        ],
-      },
-    },
-
-    webpackMiddleware: {
-      noInfo: !verbose,
-    },
-
-    plugins: [
-      require('karma-accessibility-checker'),
-      require('karma-jasmine'),
-      require('karma-spec-reporter'),
-      require('karma-sourcemap-loader'),
-      require('karma-webpack'),
-      require('karma-chrome-launcher'),
-      require('karma-firefox-launcher'),
-    ],
-
-    reporters: ['spec', 'aChecker'],
-
-    port: 9000,
-
-    colors: true,
-
-    logLevel: verbose ? config.LOG_DEBUG : config.LOG_INFO,
-
-    autoWatch: true,
-    autoWatchBatchDelay: 400,
-
-    browserNoActivityTimeout: 60000,
-
-    concurrency: Infinity,
-  });
-};
diff --git a/packages/react/tests/utils/achecker-compliance.js b/packages/react/tests/utils/achecker-compliance.js
deleted file mode 100644
index 5e3662cea13..00000000000
--- a/packages/react/tests/utils/achecker-compliance.js
+++ /dev/null
@@ -1,135 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 shouldIssueBeIgnoredGlobal from './global-ignore-achecker-issues';
-
-const currentSpec = [];
-
-jasmine.getEnv().addReporter({
-  suiteStarted({ description }) {
-    currentSpec.push(description);
-  },
-  specStarted({ description }) {
-    currentSpec.push(description);
-  },
-  specDone() {
-    currentSpec.pop();
-  },
-  suiteDone() {
-    currentSpec.pop();
-  },
-});
-
-/**
- * @callback shouldIssueBeIgnoredCallback
- * @param {object} issue An issue report from aChecker.
- * @param {Node} elem The DOM node the aChecker issue report is reported on.
- * @returns {boolean} `true` if the aChecker issue report should be ignored.
- */
-
-beforeEach(function () {
-  jasmine.addAsyncMatchers({
-    toBeACheckerCompliant() {
-      return {
-        /**
-         * @param {HTMLElement} actualElem The DOM element to test the a11y compliance with.
-         * @param {object} [options={}] The options.
-         * @param {shouldIssueBeIgnoredCallback} [options.shouldIssueBeIgnored]
-         *   A function that checks if an aChecker issue report should be ignored.
-         * @returns {object}
-         *   `{ pass: true }` if the given DOM element's content passes a11y compliance tests.
-         *   `{ pass: false, message: 'The message' }` otherwise.
-         */
-        async compare(actualElem, options = {}) {
-          const doc = actualElem.ownerDocument;
-          const filterFuncs = [];
-          const { shouldIssueBeIgnored } = options;
-          if (typeof shouldIssueBeIgnored === 'function') {
-            filterFuncs.push(shouldIssueBeIgnored);
-          }
-          filterFuncs.push(shouldIssueBeIgnoredGlobal);
-          const results = await aChecker.getComplianceHelper(
-            actualElem,
-            currentSpec.join(' - ')
-          );
-          if (!results?.report?.results) {
-            throw (
-              results?.details ||
-              new Error('a11y test result is not available for unknown reason.')
-            );
-          }
-          const code = aChecker.assertCompliance(results.report);
-          if (code !== 0) {
-            const issues = results.report.results.filter(
-              filterFuncs.length === 0
-                ? () => true
-                : (issue) => {
-                    const elem =
-                      doc &&
-                      doc
-                        .evaluate(
-                          // TODO: See why there seem to be two `<html>`s
-                          issue.path.dom.replace('/html[2]', '/html[1]'),
-                          doc,
-                          null,
-                          XPathResult.ANY_TYPE,
-                          null
-                        )
-                        .iterateNext();
-                    return !filterFuncs.some((filterFunc) =>
-                      filterFunc(issue, elem)
-                    );
-                  }
-            );
-            if (issues.length > 0) {
-              if (process.env.AAT_VERBOSE) {
-                console.error(
-                  'a11y compliance issues:',
-                  issues.map((issue) => {
-                    const elem =
-                      doc &&
-                      doc
-                        .evaluate(
-                          // TODO: See why there seem to be two `<html>`s
-                          issue.path.dom.replace('/html[2]', '/html[1]'),
-                          doc,
-                          null,
-                          XPathResult.ANY_TYPE,
-                          null
-                        )
-                        .iterateNext();
-                    return {
-                      ...issue,
-                      elem,
-                    };
-                  })
-                );
-              }
-              const messages = issues.map(
-                ({ ruleId, reasonId, message, path, snippet }) =>
-                  [
-                    message,
-                    `  Rule ID: ${ruleId}`,
-                    `  Failure reason ID: ${reasonId}`,
-                    `  XPath: ${path.dom}`,
-                    `  Markup snippet: ${snippet}`,
-                  ].join('\n')
-              );
-              return {
-                pass: false,
-                message: `\n${messages.join('\n')}`,
-              };
-            }
-          }
-          return {
-            pass: true,
-          };
-        },
-      };
-    },
-  });
-});
diff --git a/packages/react/tests/utils/global-ignore-achecker-issues.js b/packages/react/tests/utils/global-ignore-achecker-issues.js
deleted file mode 100644
index dee11699c9d..00000000000
--- a/packages/react/tests/utils/global-ignore-achecker-issues.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 shouldIssueBeIgnoredForRule = {};
-
-export default function shouldIssueBeIgnored(issue, elem) {
-  return (
-    issue.value.every((item) => item !== 'FAIL') ||
-    [shouldIssueBeIgnoredForRule[issue.ruleId]].some((test) =>
-      typeof test === 'function' ? test(elem) : test
-    )
-  );
-}
diff --git a/packages/services-store/src/actions/__tests__/profileAPI.test.ts b/packages/services-store/src/actions/__tests__/profileAPI.test.ts
index 1d04de16fc4..8d392e5a819 100644
--- a/packages/services-store/src/actions/__tests__/profileAPI.test.ts
+++ b/packages/services-store/src/actions/__tests__/profileAPI.test.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -15,6 +15,7 @@ import {
   UNAUTHENTICATED_STATUS,
   PROFILE_API_ACTION,
   ProfileAPIState,
+  MASTHEAD_AUTH_METHOD,
 } from '../../types/profileAPI';
 import convertValue from '../../../tests/utils/convert-value';
 import { loadUserStatus, setUserStatus } from '../profileAPI';
@@ -43,7 +44,7 @@ describe('Redux actions for `ProfileAPI`', () => {
       user: UNAUTHENTICATED_STATUS,
     });
     const store = mockStore();
-    await store.dispatch(loadUserStatus());
+    await store.dispatch(loadUserStatus(MASTHEAD_AUTH_METHOD.DEFAULT));
     expect(convertValue(store.getActions())).toEqual([
       {
         type: PROFILE_API_ACTION.SET_REQUEST_USER_STATUS_IN_PROGRESS,
@@ -63,7 +64,7 @@ describe('Redux actions for `ProfileAPI`', () => {
     const store = mockStore();
     let caught;
     try {
-      await store.dispatch(loadUserStatus());
+      await store.dispatch(loadUserStatus(MASTHEAD_AUTH_METHOD.DEFAULT));
     } catch (error) {
       caught = error;
     }
diff --git a/packages/services-store/src/actions/__tests__/translateAPI.test.ts b/packages/services-store/src/actions/__tests__/translateAPI.test.ts
index 06bb81ceacd..bd875da1eff 100644
--- a/packages/services-store/src/actions/__tests__/translateAPI.test.ts
+++ b/packages/services-store/src/actions/__tests__/translateAPI.test.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -53,15 +53,21 @@ const mockTranslation: Partial<Translation> = {
   },
 };
 
+const endpoint =
+  '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2';
+
 describe('Redux actions for `TranslateAPI`', () => {
   it('dispatches the action to set translation data', () => {
     const store = mockStore();
-    store.dispatch(setTranslation('lang-foo', mockTranslation as Translation));
+    store.dispatch(
+      setTranslation('lang-foo', mockTranslation as Translation, endpoint)
+    );
     expect(store.getActions()).toEqual([
       {
         type: TRANSLATE_API_ACTION.SET_TRANSLATION,
         language: 'lang-foo',
         translation: mockTranslation,
+        endpoint,
       },
     ]);
   });
diff --git a/packages/services-store/src/actions/cloudAccountAuthAPI.ts b/packages/services-store/src/actions/cloudAccountAuthAPI.ts
index 61a77332bba..ab3c91ceb91 100644
--- a/packages/services-store/src/actions/cloudAccountAuthAPI.ts
+++ b/packages/services-store/src/actions/cloudAccountAuthAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
diff --git a/packages/services-store/src/actions/profileAPI.ts b/packages/services-store/src/actions/profileAPI.ts
index e1f8d2c9974..f3220f9c15a 100644
--- a/packages/services-store/src/actions/profileAPI.ts
+++ b/packages/services-store/src/actions/profileAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -13,6 +13,7 @@ import {
   UserStatus,
   PROFILE_API_ACTION,
   ProfileAPIState,
+  MASTHEAD_AUTH_METHOD,
 } from '../types/profileAPI';
 
 /**
@@ -58,14 +59,27 @@ export type ProfileAPIActions =
 /**
  * @returns A Redux action that sends a REST call for user authentication status.
  */
-export function loadUserStatus(): ThunkAction<
+export function loadUserStatus(
+  authMethod: MASTHEAD_AUTH_METHOD
+): ThunkAction<
   Promise<UserStatus>,
   { profileAPI: ProfileAPIState },
   void,
   ProfileAPIActions
 > {
   return async (dispatch) => {
-    const promiseStatus: Promise<UserStatus> = ProfileAPI.getUserStatus();
+    let promiseStatus: Promise<UserStatus>;
+    switch (authMethod) {
+      case MASTHEAD_AUTH_METHOD.COOKIE:
+        promiseStatus = ProfileAPI.checkCloudCookie();
+        break;
+      case MASTHEAD_AUTH_METHOD.DOCS_API:
+        promiseStatus = ProfileAPI.checkCloudDocsAPI();
+        break;
+      default:
+        promiseStatus = ProfileAPI.getUserStatus();
+    }
+
     dispatch(setRequestUserStatusInProgress(promiseStatus));
     try {
       dispatch(setUserStatus(await promiseStatus));
diff --git a/packages/services-store/src/actions/translateAPI.ts b/packages/services-store/src/actions/translateAPI.ts
index e4e688bf76b..16c1f7641a8 100644
--- a/packages/services-store/src/actions/translateAPI.ts
+++ b/packages/services-store/src/actions/translateAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -24,12 +24,14 @@ import {
  */
 export function setRequestTranslationInProgress(
   language: string,
-  request: Promise<Translation>
+  request: Promise<Translation>,
+  endpoint
 ) {
   return {
     type: TRANSLATE_API_ACTION.SET_REQUEST_TRANSLATION_IN_PROGRESS,
     language,
     request,
+    endpoint,
   };
 }
 
@@ -52,11 +54,16 @@ export function setErrorRequestTranslation(language: string, error: Error) {
  * @param translation The translation data from the REST call.
  * @returns A Redux action to set the given translation data.
  */
-export function setTranslation(language: string, translation: Translation) {
+export function setTranslation(
+  language: string,
+  translation: Translation,
+  endpoint
+) {
   return {
     type: TRANSLATE_API_ACTION.SET_TRANSLATION,
     language,
     translation,
+    endpoint,
   };
 }
 
@@ -70,7 +77,7 @@ export type TranslateAPIActions =
 
 /**
  * @param language The language. If not given, the default language from DDO is used.
- * @param dataEndpoint The translation endpoint to fetch from if not using default dds endpoint
+ * @param dataEndpoint The translation endpoint to fetch from if not using default c4d endpoint
  * @returns A Redux action that sends a REST call for translation data.
  */
 export function loadTranslation(
@@ -87,9 +94,11 @@ export function loadTranslation(
     const effectiveLanguage: string =
       language ?? (await dispatch(loadLanguage() as any));
     const { requestsTranslation = {} } = getState().translateAPI ?? {};
-    const { [effectiveLanguage]: requestTranslation } = requestsTranslation;
-    if (requestTranslation) {
-      return requestTranslation;
+    if (requestsTranslation?.[effectiveLanguage]) {
+      const requestTranslation = requestsTranslation?.[effectiveLanguage];
+      if (requestTranslation && requestTranslation.endpoint === dataEndpoint) {
+        return requestTranslation;
+      }
     }
     const [primary, country] = effectiveLanguage.split('-');
     const promiseTranslation: Promise<Translation> =
@@ -101,10 +110,20 @@ export function loadTranslation(
         dataEndpoint
       );
     dispatch(
-      setRequestTranslationInProgress(effectiveLanguage, promiseTranslation)
+      setRequestTranslationInProgress(
+        effectiveLanguage,
+        promiseTranslation,
+        dataEndpoint
+      )
     );
     try {
-      dispatch(setTranslation(effectiveLanguage, await promiseTranslation));
+      dispatch(
+        setTranslation(
+          effectiveLanguage,
+          await promiseTranslation,
+          dataEndpoint
+        )
+      );
     } catch (error) {
       dispatch(setErrorRequestTranslation(effectiveLanguage, error as Error));
     }
diff --git a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts
index e97c789802e..af002cd8dad 100644
--- a/packages/services-store/src/reducers/__tests__/translateAPI.test.ts
+++ b/packages/services-store/src/reducers/__tests__/translateAPI.test.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -40,6 +40,9 @@ const mockTranslation: Partial<Translation> = {
   },
 };
 
+const endpoint =
+  '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2';
+
 describe('Redux reducers for `LocaleAPI`', () => {
   it('should return the state unmodified for unknown action', () => {
     const state = {
@@ -58,6 +61,7 @@ describe('Redux reducers for `LocaleAPI`', () => {
           type: TRANSLATE_API_ACTION.SET_REQUEST_TRANSLATION_IN_PROGRESS,
           language: 'lang-foo',
           request,
+          endpoint,
         })
       )
     ).toEqual({
@@ -66,6 +70,7 @@ describe('Redux reducers for `LocaleAPI`', () => {
       },
       requestsTranslation: {
         'lang-foo': 'PROMISE',
+        endpoint,
       },
     });
   });
@@ -96,6 +101,7 @@ describe('Redux reducers for `LocaleAPI`', () => {
           type: TRANSLATE_API_ACTION.SET_TRANSLATION,
           language: 'lang-foo',
           translation: mockTranslation as Translation,
+          endpoint,
         })
       )
     ).toEqual({
@@ -104,6 +110,7 @@ describe('Redux reducers for `LocaleAPI`', () => {
       },
       requestsTranslation: {
         'lang-foo': 'PROMISE',
+        endpoint,
       },
       translations: {
         'lang-foo': mockTranslation,
diff --git a/packages/services-store/src/reducers/translateAPI.ts b/packages/services-store/src/reducers/translateAPI.ts
index c45509711cf..a5a3227979b 100644
--- a/packages/services-store/src/reducers/translateAPI.ts
+++ b/packages/services-store/src/reducers/translateAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -26,7 +26,7 @@ export default function reducer(
 ): TranslateAPIState {
   switch (action.type) {
     case TRANSLATE_API_ACTION.SET_REQUEST_TRANSLATION_IN_PROGRESS: {
-      const { language, request } = action as ReturnType<
+      const { language, request, endpoint } = action as ReturnType<
         typeof setRequestTranslationInProgress
       >;
       return {
@@ -38,6 +38,7 @@ export default function reducer(
         requestsTranslation: {
           ...(state.requestsTranslation || {}),
           [language]: request,
+          endpoint,
         },
       };
     }
@@ -58,7 +59,7 @@ export default function reducer(
       };
     }
     case TRANSLATE_API_ACTION.SET_TRANSLATION: {
-      const { language, translation } = action as ReturnType<
+      const { language, translation, endpoint } = action as ReturnType<
         typeof setTranslation
       >;
       return {
@@ -71,6 +72,7 @@ export default function reducer(
         requestsTranslation: {
           ...(state.requestsTranslation || {}),
           [language]: Promise.resolve(translation),
+          endpoint,
         },
         translations: {
           ...(state.translations || {}),
diff --git a/packages/services-store/src/types/profileAPI.ts b/packages/services-store/src/types/profileAPI.ts
index 501d00ff1b6..fc44f34113e 100644
--- a/packages/services-store/src/types/profileAPI.ts
+++ b/packages/services-store/src/types/profileAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -22,6 +22,11 @@ export interface UserStatus {
  */
 export const UNAUTHENTICATED_STATUS = 'Unauthenticated';
 
+/**
+ * Cloud Unauthenticated user status
+ */
+export const CLOUD_UNAUTHENTICATED_STATUS = 'anonymous';
+
 /**
  * The Redux action ID for `ProfileAPI`.
  */
@@ -41,6 +46,15 @@ export enum PROFILE_API_ACTION {
   SET_USER_STATUS = 'SET_USER_STATUS',
 }
 
+/**
+ * Authentication status types.
+ */
+export enum MASTHEAD_AUTH_METHOD {
+  DEFAULT = 'profile-api',
+  COOKIE = 'cookie',
+  DOCS_API = 'docs-api',
+}
+
 /**
  * A Redux substate for `ProfileAPI`.
  */
diff --git a/packages/services-store/src/types/translateAPI.ts b/packages/services-store/src/types/translateAPI.ts
index 7a24f628efd..b9884009b36 100644
--- a/packages/services-store/src/types/translateAPI.ts
+++ b/packages/services-store/src/types/translateAPI.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -17,6 +17,7 @@ export interface BasicLink {
   highlightedLink?: boolean;
   url?: string;
   description?: string;
+  target?: string;
 }
 
 /**
@@ -78,18 +79,61 @@ export interface MastheadLink {
   url?: string;
   hasMenu?: boolean;
   hasMegapanel?: boolean;
+  megamenuLayout?: 'tab' | 'list';
   menuSections?: MastheadMenuSection[];
 }
 
 /**
  * A menu section for masthead
+ *
+ * @deprecated
  */
-export interface MastheadL1 {
+export interface LegacyMastheadL1 {
   title: string;
   url?: string;
   menuItems?: MastheadLink[];
 }
 
+/**
+ * A menu section for masthead
+ */
+export interface MastheadL1 {
+  title: string;
+  url?: string;
+  menuItems: L1MenuItem[];
+  actions?: {
+    cta?: BasicLink;
+    login?: BasicLink;
+  };
+}
+
+export interface L1MenuItem extends BasicLink {
+  submenu?: L1Submenu;
+}
+
+export interface L1Submenu {
+  announcement?: string; // From AEM rich text editor
+  menuSections: L1SubmenuSection[]; // maximum of 3 in outer array
+  columns?: 1 | 2 | 3; // Should default to 1 if unspecified
+  footer?: {
+    title: string;
+    url: string;
+  };
+}
+
+export interface L1SubmenuSection {
+  span: 1 | 2; // Only used if containing L1Submenu.columns === 3.
+  heading?: L1SubmenuSectionHeading;
+  items?: BasicLink[];
+}
+
+export interface L1SubmenuSectionHeading {
+  headingLevel?: 2 | 3 | 4 | 5 | 6;
+  title: string;
+  url?: string;
+  description?: string;
+}
+
 /**
  * An profile item in masthead.
  */
@@ -237,7 +281,10 @@ export interface TranslateAPIState {
   /**
    * The requests for the translation data, keyed by the language.
    */
-  requestsTranslation?: { [language: string]: Promise<Translation> };
+  requestsTranslation?: {
+    [language: string]: Promise<Translation> | string;
+    endpoint: string;
+  };
 
   /**
    * The status of whether requests for the translation data are in progress, keyed by the language.
@@ -249,3 +296,29 @@ export interface TranslateAPIState {
    */
   errorsRequestTranslation?: { [language: string]: Error };
 }
+
+// New for v2.1.0
+export interface L0Menu {
+  items: L0MenuItem[];
+}
+
+export interface L0MenuItem extends BasicLink {
+  submenu?: L0Megamenu | BasicLink[];
+}
+
+export interface L0Megamenu {
+  sections: Megapanel[];
+  highlights?: MegapanelLinkGroup[];
+  viewAll?: BasicLink;
+}
+
+export interface Megapanel {
+  heading?: BasicLink;
+  groups: MegapanelLinkGroup[];
+  viewAll?: BasicLink;
+}
+
+export interface MegapanelLinkGroup {
+  heading?: BasicLink;
+  links?: BasicLink[];
+}
diff --git a/packages/services/CHANGELOG.md b/packages/services/CHANGELOG.md
index 1ec23931250..1962fcaf471 100644
--- a/packages/services/CHANGELOG.md
+++ b/packages/services/CHANGELOG.md
@@ -3,6 +3,35 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.0.0-rc.1...@carbon/ibmdotcom-services@2.0.0-rc.2) (2023-11-30)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
+# [2.0.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@2.0.0-rc.0...@carbon/ibmdotcom-services@2.0.0-rc.1) (2023-11-28)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
+# [2.0.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@1.51.0-rc.0...@carbon/ibmdotcom-services@2.0.0-rc.0) (2023-11-20)
+
+
+### Features
+
+* **masthead-v2:** integrate alpha branch ([#10952](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10952)) ([d3374d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d3374d10728884caac00eaa16b32c741ecbf09f0))
+* **package:** update packages to Carbon v11 ([#10779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10779)) ([1c88604](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1c88604ba0129a308c978ddf0ec7a73abebe8a67))
+* upgrade to Carbon 11 ([#10196](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10196)) ([2976ac5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2976ac51d8db5953f56464c24b49b5e73a3073c3)), closes [#9948](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9948)
+
+
+
+
+
 # [1.53.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-services@1.53.0-rc.2...@carbon/ibmdotcom-services@1.53.0) (2023-11-15)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services
diff --git a/packages/services/package.json b/packages/services/package.json
index 5847bc23131..ec02f97cb24 100644
--- a/packages/services/package.json
+++ b/packages/services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "1.53.0",
+  "version": "2.0.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,9 +25,7 @@
     "umd/**/*"
   ],
   "keywords": [
-    "react",
     "carbon",
-    "carbon-components",
     "ibm",
     "carbon-design-system",
     "components"
@@ -48,7 +46,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-utilities": "1.53.0",
+    "@carbon/ibmdotcom-utilities": "2.0.0-rc.2",
     "@carbon/telemetry": "0.1.0",
     "axios": "^1.6.0",
     "marked": "^4.0.10",
diff --git a/packages/services/scripts/rollup.config.js b/packages/services/scripts/rollup.config.js
index 53a1b197ce7..31435c65bad 100644
--- a/packages/services/scripts/rollup.config.js
+++ b/packages/services/scripts/rollup.config.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/services/src/services/Analytics/Analytics.js b/packages/services/src/services/Analytics/Analytics.js
index 3767a617aa7..177692a7006 100644
--- a/packages/services/src/services/Analytics/Analytics.js
+++ b/packages/services/src/services/Analytics/Analytics.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js b/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js
index 80a7cb3c816..a1ee51f52a5 100644
--- a/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js
+++ b/packages/services/src/services/CloudAccountAuth/CloudAccountAuth.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
diff --git a/packages/services/src/services/DDO/DDO.js b/packages/services/src/services/DDO/DDO.js
index 018197b144b..bf6a6bb7ea2 100644
--- a/packages/services/src/services/DDO/DDO.js
+++ b/packages/services/src/services/DDO/DDO.js
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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 ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import root from 'window-or-global';
 
 /**
@@ -116,7 +116,7 @@ class DDOAPI {
    */
   static async setVersion() {
     return await this.isReady().then(() => {
-      root.digitalData.page.pageInfo.version = ddsSettings.version;
+      root.digitalData.page.pageInfo.version = settings.version;
     });
   }
 
diff --git a/packages/services/src/services/DDO/__tests__/DDO.test.js b/packages/services/src/services/DDO/__tests__/DDO.test.js
index c0655ca828d..d75d3447713 100644
--- a/packages/services/src/services/DDO/__tests__/DDO.test.js
+++ b/packages/services/src/services/DDO/__tests__/DDO.test.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -12,7 +12,7 @@ import root from 'window-or-global';
 jest.mock(
   '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings',
   () => ({
-    version: 'dds.v1.0.0',
+    version: 'cds.v1.0.0',
   })
 );
 
@@ -36,7 +36,7 @@ describe('DDOAPI', () => {
   it('should set the version in the DDO', async () => {
     await DDOAPI.setVersion();
 
-    expect(root.digitalData.page.pageInfo.version).toEqual('dds.v1.0.0');
+    expect(root.digitalData.page.pageInfo.version).toEqual('cds.v1.0.0');
   });
 
   it('should return the country location', async () => {
diff --git a/packages/services/src/services/KalturaPlayer/KalturaPlayer.js b/packages/services/src/services/KalturaPlayer/KalturaPlayer.js
index b30ee09bf74..1da4192bac1 100644
--- a/packages/services/src/services/KalturaPlayer/KalturaPlayer.js
+++ b/packages/services/src/services/KalturaPlayer/KalturaPlayer.js
@@ -217,7 +217,7 @@ class KalturaPlayerAPI {
 
         if (
           !document.getElementById(targetId) &&
-          document.querySelector('dds-tabs-extended-media')
+          document.querySelector('cds-tabs-extended-media')
         ) {
           const newVideoDiv = document.createElement('div');
           newVideoDiv.classList.add(`bx--video-player__video`);
@@ -274,9 +274,9 @@ class KalturaPlayerAPI {
 
         if (isCustomCreated) {
           const previousVideoDiv = document
-            .querySelector('dds-tabs-extended-media')
+            .querySelector('cds-tabs-extended-media')
             .shadowRoot.querySelector(
-              `.bx--accordion__item--active dds-video-player`
+              `.bx--accordion__item--active cds-video-player`
             ).lastChild;
           previousVideoDiv.parentElement.appendChild(
             document.getElementById(targetId)
diff --git a/packages/services/src/services/Locale/Locale.js b/packages/services/src/services/Locale/Locale.js
index 34de561f342..4b054d9b3d9 100644
--- a/packages/services/src/services/Locale/Locale.js
+++ b/packages/services/src/services/Locale/Locale.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -64,7 +64,7 @@ const _axiosConfig = {
  * @type {string}
  * @private
  */
-const _sessionListKey = 'dds-countrylist';
+const _sessionListKey = 'cds-countrylist';
 
 /**
  * Two hours in milliseconds to compare session timestamp.
diff --git a/packages/services/src/services/Locale/__tests__/Locale.test.js b/packages/services/src/services/Locale/__tests__/Locale.test.js
index d3bb607771a..ec4feef65a1 100644
--- a/packages/services/src/services/Locale/__tests__/Locale.test.js
+++ b/packages/services/src/services/Locale/__tests__/Locale.test.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -528,7 +528,7 @@ describe('LocaleAPI', () => {
 
     // using very old cached session
     sessionStorageMock.setItem(
-      'dds-countrylist-en-us',
+      'cds-countrylist-en-us',
       JSON.stringify(Object.assign(oldSession, { CACHE: true }))
     );
 
@@ -538,7 +538,7 @@ describe('LocaleAPI', () => {
     });
 
     const newSession = JSON.parse(
-      sessionStorageMock.getItem('dds-countrylist-en-us')
+      sessionStorageMock.getItem('cds-countrylist-en-us')
     );
 
     // fresh cached data would lack this property
diff --git a/packages/services/src/services/Profile/Profile.js b/packages/services/src/services/Profile/Profile.js
index 4908d5e2d30..e870d5e70b2 100644
--- a/packages/services/src/services/Profile/Profile.js
+++ b/packages/services/src/services/Profile/Profile.js
@@ -1,10 +1,11 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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 axios from 'axios';
+import Cookies from 'js-cookie';
 
 /**
  * @constant {string | string} Host for the profile status API call
@@ -29,6 +30,14 @@ const _version = (process && process.env.PROFILE_VERSION) || 'v1';
  */
 const _endpoint = `${_host}/${_version}/mgmt/idaas/user/status/`;
 
+/**
+ * The cookie name for determining user login status for cloud.ibm.com.
+ *
+ * @type {string}
+ * @private
+ */
+const _cookieName = 'com.ibm.cloud.iam.LoggedIn.prod';
+
 /**
  * Profile API class with methods for checking user authentication for ibm.com
  */
@@ -59,6 +68,42 @@ class ProfileAPI {
         return { user: 'Unauthenticated' };
       });
   }
+
+  /**
+   * retrieve the cloud login status via cookie
+   *
+   *
+   * @returns {string} string determining login status
+   */
+  static checkCloudCookie() {
+    const cloudLogin = Cookies.get(_cookieName);
+
+    return { user: cloudLogin === '1' ? 'authenticated' : 'anonymous' };
+  }
+
+  /**
+   * retrieve the cloud login status via api
+   *
+   *
+   * @returns {string} string determining login status
+   */
+  static async checkCloudDocsAPI() {
+    const cloudLogin = await axios
+      .get('/api/v6/selected-account?profile=true', {
+        headers: {
+          Accept: 'application/json',
+        },
+      })
+      .then((response) => {
+        return response.status === 200 ? 'authenticated' : 'anonymous';
+      })
+      .catch((error) => {
+        console.error(error);
+        return 'anonymous';
+      });
+
+    return { user: cloudLogin };
+  }
 }
 
 export default ProfileAPI;
diff --git a/packages/services/src/services/SearchTypeahead/SearchTypeahead.js b/packages/services/src/services/SearchTypeahead/SearchTypeahead.js
index b73520e3b1c..6ec2902a14a 100644
--- a/packages/services/src/services/SearchTypeahead/SearchTypeahead.js
+++ b/packages/services/src/services/SearchTypeahead/SearchTypeahead.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/services/src/services/Translation/Translation.js b/packages/services/src/services/Translation/Translation.js
index 376863df4f5..0a8dd115844 100644
--- a/packages/services/src/services/Translation/Translation.js
+++ b/packages/services/src/services/Translation/Translation.js
@@ -24,8 +24,8 @@ const _host =
  * @type {string}
  * @private
  */
-const _ddsEndpointDefault =
-  '/common/carbon-for-ibm-dotcom/translations/masthead-footer';
+const _c4dEndpointDefault =
+  '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1';
 
 /**
  * Translation API endpoint
@@ -33,11 +33,11 @@ const _ddsEndpointDefault =
  * @type {string}
  * @private
  */
-const _ddsEndpoint =
+const _c4dEndpoint =
   (process &&
-    (process.env.REACT_APP_DDS_TRANSLATION_ENDPOINT ||
-      process.env.DDS_TRANSLATION_ENDPOINT)) ||
-  _ddsEndpointDefault;
+    (process.env.REACT_APP_C4D_TRANSLATION_ENDPOINT ||
+      process.env.C4D_TRANSLATION_ENDPOINT)) ||
+  _c4dEndpointDefault;
 
 /**
  * Session Storage key for translation data
@@ -45,7 +45,7 @@ const _ddsEndpoint =
  * @type {string}
  * @private
  */
-const _sessionTranslationKey = 'dds-translation';
+const _sessionTranslationKey = 'c4d-translation';
 
 /**
  * The cache for in-flight or resolved requests for the i18n data, keyed by the initiating locale.
@@ -158,7 +158,7 @@ class TranslationAPI {
         const regex = /((http(s?)):\/\/)/g;
 
         // Check to see if the string from the endpoint variable contains https/http or not.
-        const urlEndpoint = endpoint || _ddsEndpoint;
+        const urlEndpoint = endpoint || _c4dEndpoint;
         const locationParam =
           country !== 'undefined' ? `${country}${lang}` : `${lang}`;
         const host = regex.test(endpoint) ? '' : _host;
@@ -210,8 +210,8 @@ class TranslationAPI {
   static getSessionKey(endpoint) {
     let sessionKey = _sessionTranslationKey;
     // form session key from specified endpoint
-    if (_ddsEndpointDefault !== _ddsEndpoint || endpoint) {
-      const endpointSrc = endpoint || _ddsEndpoint;
+    if (_c4dEndpointDefault !== _c4dEndpoint || endpoint) {
+      const endpointSrc = endpoint || _c4dEndpoint;
       sessionKey = endpointSrc.replace(
         /[`~!@#$%^&*()_|+\-=?;:'",.<>{}[\]\\/]/gi,
         ''
diff --git a/packages/services/src/services/Translation/__tests__/Translation.test.js b/packages/services/src/services/Translation/__tests__/Translation.test.js
index bbd891552f7..0bb5df4c66a 100755
--- a/packages/services/src/services/Translation/__tests__/Translation.test.js
+++ b/packages/services/src/services/Translation/__tests__/Translation.test.js
@@ -153,7 +153,7 @@ describe('TranslationAPI', () => {
       href: 'https://www.loremipsum.com',
     };
 
-    const expectedSessionKey = 'dds-translation-us-en';
+    const expectedSessionKey = 'c4d-translation-us-en';
 
     await TranslationAPI.getTranslation({
       lc: 'en',
@@ -167,7 +167,7 @@ describe('TranslationAPI', () => {
   it('should return a json with a recent timestamp', async () => {
     // using very old cached session
     sessionStorageMock.setItem(
-      'dds-translation-us-en',
+      'c4d-translation-us-en',
       JSON.stringify(Object.assign(oldSession, { CACHE: true }))
     );
 
@@ -177,7 +177,7 @@ describe('TranslationAPI', () => {
     });
 
     const newSession = JSON.parse(
-      sessionStorageMock.getItem('dds-translation-us-en')
+      sessionStorageMock.getItem('c4d-translation-us-en')
     );
 
     // fresh data would lack this property
diff --git a/packages/services/src/services/VideoPlayer/VideoPlayer.js b/packages/services/src/services/VideoPlayer/VideoPlayer.js
index c46de13db38..4577e3bd770 100644
--- a/packages/services/src/services/VideoPlayer/VideoPlayer.js
+++ b/packages/services/src/services/VideoPlayer/VideoPlayer.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/services/src/services/global/global.js b/packages/services/src/services/global/global.js
index 262fea969bb..3c747c557ab 100644
--- a/packages/services/src/services/global/global.js
+++ b/packages/services/src/services/global/global.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg b/packages/storybook-images/assets/global-banner/global-banner-4-col-image.jpg
similarity index 100%
rename from packages/storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg
rename to packages/storybook-images/assets/global-banner/global-banner-4-col-image.jpg
diff --git a/packages/storybook-images/assets/universal-banner/universal-banner-4-col-lg.jpg b/packages/storybook-images/assets/global-banner/global-banner-4-col-lg.jpg
similarity index 100%
rename from packages/storybook-images/assets/universal-banner/universal-banner-4-col-lg.jpg
rename to packages/storybook-images/assets/global-banner/global-banner-4-col-lg.jpg
diff --git a/packages/storybook-images/assets/universal-banner/universal-banner-4-col-xlg.jpg b/packages/storybook-images/assets/global-banner/global-banner-4-col-xlg.jpg
similarity index 100%
rename from packages/storybook-images/assets/universal-banner/universal-banner-4-col-xlg.jpg
rename to packages/storybook-images/assets/global-banner/global-banner-4-col-xlg.jpg
diff --git a/packages/storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg b/packages/storybook-images/assets/global-banner/global-banner-8-col-image.jpg
similarity index 100%
rename from packages/storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg
rename to packages/storybook-images/assets/global-banner/global-banner-8-col-image.jpg
diff --git a/packages/storybook-images/assets/universal-banner/universal-banner-8-col-lg.jpg b/packages/storybook-images/assets/global-banner/global-banner-8-col-lg.jpg
similarity index 100%
rename from packages/storybook-images/assets/universal-banner/universal-banner-8-col-lg.jpg
rename to packages/storybook-images/assets/global-banner/global-banner-8-col-lg.jpg
diff --git a/packages/storybook-images/assets/universal-banner/universal-banner-8-col-xlg.jpg b/packages/storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg
similarity index 100%
rename from packages/storybook-images/assets/universal-banner/universal-banner-8-col-xlg.jpg
rename to packages/storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg
diff --git a/packages/stylelint-config-ibmdotcom/package.json b/packages/stylelint-config-ibmdotcom/package.json
index 85a7c3ceaf1..d1426f29fe6 100644
--- a/packages/stylelint-config-ibmdotcom/package.json
+++ b/packages/stylelint-config-ibmdotcom/package.json
@@ -11,7 +11,6 @@
     "ibm",
     "elements",
     "carbon",
-    "carbon-elements",
     "carbon-design-system",
     "components",
     "react"
diff --git a/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js b/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js
index 3a5f63e78dd..4a891accb5e 100644
--- a/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js
+++ b/packages/stylelint-config-ibmdotcom/rules/limit-language-features.js
@@ -74,14 +74,14 @@ module.exports = {
     'declaration-property-unit-blacklist': OFF,
     // Specify a whitelist of allowed property and unit pairs within
     // declarations.
-    'declaration-property-unit-whitelist': {
+    'declaration-property-unit-allowed-list': {
       'font-size': ['rem', '%', 'vw'],
       '/^animation/': ['ms'],
       'line-height': ['rem'],
     },
     // Specify a blacklist of disallowed property and value pairs within
     // declarations.
-    'declaration-property-value-blacklist': {
+    'declaration-property-value-disallowed-list': {
       // Disallow unset as it is unsupported in IE11
       '/.*/': ['unset'],
     },
diff --git a/packages/stylelint-config-ibmdotcom/rules/possible-errors.js b/packages/stylelint-config-ibmdotcom/rules/possible-errors.js
index 8158516aaee..c6802e5735f 100644
--- a/packages/stylelint-config-ibmdotcom/rules/possible-errors.js
+++ b/packages/stylelint-config-ibmdotcom/rules/possible-errors.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2018
+ * Copyright IBM Corp. 2018, 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.
@@ -42,8 +42,18 @@ module.exports = {
     'block-no-empty': true,
 
     // Selector
-    'selector-pseudo-class-no-unknown': true,
-    'selector-pseudo-element-no-unknown': true,
+    'selector-pseudo-class-no-unknown': [
+      true,
+      {
+        ignorePseudoClasses: ['part', 'is', 'where'],
+      },
+    ],
+    'selector-pseudo-element-no-unknown': [
+      true,
+      {
+        ignorePseudoElements: ['part'],
+      },
+    ],
     'selector-type-no-unknown': true,
 
     // Media feature
diff --git a/packages/stylelint-config-ibmdotcom/rules/stylistic-issues.js b/packages/stylelint-config-ibmdotcom/rules/stylistic-issues.js
index 78ae2ebd8af..5b73ba31e0a 100644
--- a/packages/stylelint-config-ibmdotcom/rules/stylistic-issues.js
+++ b/packages/stylelint-config-ibmdotcom/rules/stylistic-issues.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2018, 2018
+ * Copyright IBM Corp. 2018, 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.
diff --git a/packages/styles/CHANGELOG.md b/packages/styles/CHANGELOG.md
index 054f36f6d81..8b1686646a9 100644
--- a/packages/styles/CHANGELOG.md
+++ b/packages/styles/CHANGELOG.md
@@ -3,7 +3,7 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
-# [1.53.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.53.0-rc.2...@carbon/ibmdotcom-styles@1.53.0) (2023-11-15)
+# [2.0.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@2.0.0-rc.1...@carbon/ibmdotcom-styles@2.0.0-rc.2) (2023-11-30)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-styles
 
@@ -11,6 +11,79 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+# [2.0.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.51.0-rc.0...@carbon/ibmdotcom-styles@2.0.0-rc.0) (2023-11-20)
+
+
+### Bug Fixes
+
+* **deps:** update dependency @carbon/layout to v10.37.2 ([#10949](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10949)) ([369a0c2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/369a0c2b4d35cab348e2a571e035c9c9a0d0a8da))
+* **back-to-top:** remove border-color rule ([#10891](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10891)) ([75175c0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/75175c0b7b840e19c98d2deba393acb2338d5026))
+* **card:** heading/copy spacing ([#11018](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11018)) ([97c1418](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97c1418060baee3e65300b591d649825a97d151e))
+* **carousel:** update v2 styles and fix broken video cards ([#11006](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11006)) ([e34be4c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e34be4cf0d8499001191c1826b446bdef8431830))
+* **dependencies:** core carbon updates ([8d9555b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8d9555bf1049938653ee405e27ca2a5fbf284cda))
+* **footer:** adress comments ([7a80cae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a80caec4235f9efaaa91047ce766f25dc46c630))
+* **footer:** cleanup ([c3048ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c3048ea07851c7693396681263c05eb23eb60155))
+* **footer:** fix grid alignment when disabling locale ([#11028](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11028)) ([7943e5b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7943e5bca6b09cba154ed40dfa8829bbfcb3b617))
+* **footer:** legal spacing/border ([6625117](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/66251179acdbbadfc08565c601e4b86ffa34972d))
+* **footer:** prefixes ([41103be](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/41103be9b69b0d435ea3c6b6db712dd54f44e74a))
+* **prefix:** change styles prefix to `c4d` ([#10912](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10912)) ([7ffeabb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7ffeabbff4817591416f8c5de3281d84e089928c))
+* **styles:** update var interpolation causing warnings ([#11003](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11003)) ([1239c87](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1239c8789e34fbfccfc054328c00768c8ce35908))
+* **video-player:** v2 alignment ([30dfebb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/30dfebb20250edf1e3eb1e09166903d21f16d60e))
+
+
+### Features
+
+* **background-media:** move styles to styles package ([7a4a3e8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a4a3e85dedbd2e2a6c2209e9ab6026fcb975d18))
+* **button-group:** update to v2 ([#10904](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10904)) ([0d510cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0d510cdf190b631612dc5ec62687644f3da04549))
+* **callout-with-media:** v2 styles updates ([#10939](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10939)) ([facbd3e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/facbd3ead8cab338a0c2ded61e3039becbab6e0e))
+* **callout:** update quote and media with new tokens ([#10895](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10895)) ([813474d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/813474d02f43b3cffa1a7c976a8c4afbc4147a8e))
+* **card - pictogram:** card pictogram v2 style changes ([#10930](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10930)) ([90ee979](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/90ee979d87236468ba94cd721303e4730fd47392))
+* **card-group/card-section-offset:** v2 updates ([#11043](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11043)) ([45a8eb4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/45a8eb4ac1d76c66bed93280b9cddb98041b4ed5))
+* **card-in-card:** v2 updates ([#10996](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10996)) ([a98e2f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a98e2f7bb4f0fdf44080af50828c864bff0309d5))
+* **card-link:** update v2 ([#10953](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10953)) ([4d1ee6e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d1ee6e55e90e1ae842022548450c4d063476e3b))
+* **card-static:** update v2 styles ([#10944](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10944)) ([de094c0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/de094c0914c07af2038e0c248d208546283ed58e))
+* **card:** v2 card style updates ([#10903](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10903)) ([cd84259](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd8425991d16f1598af8a4eb6f84669d1bc82d28))
+* **content-group:** v2 style updates ([#11007](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11007)) ([94e9d94](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/94e9d9441283bef64c8a39dca058e67e6bf97bef))
+* **content-item-row:** v2 ([#11004](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11004)) ([010c8eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/010c8eb6a765498838243ba615217dd1feb42dee))
+* **content-item:** v2 updates ([#11068](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11068)) ([0ddc051](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0ddc05108b270b9a8dffb027ec2d6d639bb5fa38))
+* **cta:** deprecate cta and migrate features to base components ([#10873](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10873)) ([f3417e2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f3417e2e24e9f0d3bac5bbbafc2c5d189ff2555b))
+* **dotcom-shell:** update to v2 ([#11082](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11082)) ([9c97fcf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9c97fcf6265f5317ea12e28e9f09bf5e9c436405))
+* **expressive-modal/lightbox-media-viewer:** update expressive modal v2 ([#11052](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11052)) ([f608eae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f608eaecc656f3ce684d28ab144fc68ca3356d5f))
+* **feature-card:** enable color scheme selection ([#10744](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10744)) ([c7e5a1f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c7e5a1f1b95a9fc9e497c08fced92ab9d948d443))
+* **feature-section:** update to v2 ([#10959](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10959)) ([2517dab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2517dabc7f2d04dba86f31a57c98620fc73ba1a1))
+* **filter-panel:** v2 updates ([#10974](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10974)) ([098c67c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/098c67c868f2e28c1f284c0ae681aac6d8de3b2d))
+* **footer:** v2 footer styles ([#10938](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10938)) ([5519067](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/55190674318a227639c80d7cf2bf7b1a7b170c37))
+* **footer:** v2 layout updates ([4802032](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/480203264bcb0a3c2e8ccc4afbfa07b0679c2f26))
+* **global-banner:** v2 ([#10997](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10997)) ([97fda38](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97fda38cf57bf02a9687ca6ecc1d0642c79304f8))
+* **image:** v2 updates ([#10810](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10810)) ([7627a86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7627a86b1d5eef7a5365351e698ec65d9650ecc7))
+* **in-page-banner:** rename content-group-banner to in-page-banner ([#10999](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10999)) ([5d178cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d178cfe91ae51cd56bb4c8702f7315be90c4fe1))
+* **leadspace-block:** v2 update ([#11027](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11027)) ([585ec03](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/585ec0314e3a861adb535db0859e411a1ee91760))
+* **leadspace-with-search:** update to v2 ([#10961](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10961)) ([c0031ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c0031ee462fe5b2f84ef19641412b938d28c34e3))
+* **leadspace:** updating to v2 ([#10946](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10946)) ([a9d12b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a9d12b2815783137a400665a2fc33f9e657925f2))
+* **leaving-ibm:** v2 style updates ([#10941](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10941)) ([6e5aef5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6e5aef52b698bde911300b020e3ae8d2e75eed15))
+* **link-list:** upgrade to v2 styles ([#11008](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11008)) ([be4c9b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be4c9b249d0614a94ba592105825afbb4e9f3a49))
+* **link-with-icon:** upgrade v2 styles ([#11009](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11009)) ([f45a4fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f45a4fe8398a12c3771e970ed13ee149f91d6d38))
+* **locale-modal:** v2 locale modal styles ([#10951](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10951)) ([f3fb8b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f3fb8b8ea60f15b80d04e21da8fb64aef68ea98b))
+* **masthead-v2:** integrate alpha branch ([#10952](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10952)) ([d3374d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d3374d10728884caac00eaa16b32c741ecbf09f0))
+* **package:** update packages to Carbon v11 ([#10779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10779)) ([1c88604](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1c88604ba0129a308c978ddf0ec7a73abebe8a67))
+* **quote:** remove color-scheme ([#11120](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11120)) ([c4ebf0a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4ebf0a501775fc0c7e44a9502af8d65d93a46ff))
+* **search-with-typeahead:** v2 styles for search-with-typeahead ([#10893](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10893)) ([259e220](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/259e2208d6985c6b46b8ff471bf4ac8ef6093b79))
+* **tabs-extended:** update to v11 styles and deprecate `vertical` variant ([#11086](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11086)) ([6caf5e7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6caf5e748b21ed7bf81e19c6d00be26ac706458e))
+* **tag-link/group:** v2 style updates ([#11039](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11039)) ([80dd23a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80dd23a77757d08a1600f05cf9f01b2dedc67481))
+* **toc:** v2 updates ([#10932](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10932)) ([ba12f0e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ba12f0e8231e0ad7850d05979afc25bde96dfb20))
+* upgrade to Carbon 11 ([#10196](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10196)) ([2976ac5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2976ac51d8db5953f56464c24b49b5e73a3073c3)), closes [#9948](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9948)
+* **video-player:** update video player v2 ([#10934](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10934)) ([6154221](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/61542213cbe744e96d06149553e0fa4ca4b62f05))
+
+
+
+
+
+# [1.53.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.53.0-rc.2...@carbon/ibmdotcom-styles@1.53.0) (2023-11-15)
+
+
+
+
+
 # [1.53.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.53.0-rc.1...@carbon/ibmdotcom-styles@1.53.0-rc.2) (2023-11-06)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-styles
@@ -21,10 +94,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.53.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-styles@1.52.0-rc.1...@carbon/ibmdotcom-styles@1.53.0-rc.1) (2023-11-02)
 
-
-### Bug Fixes
-
-* **deps:** update dependency @carbon/layout to v10.37.2 ([#10949](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10949)) ([369a0c2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/369a0c2b4d35cab348e2a571e035c9c9a0d0a8da))
+**Note:** Version bump only for package @carbon/ibmdotcom-styles
 
 
 
@@ -983,7 +1053,7 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **content-item:** expose component in storybook ([#7233](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7233)) ([43208ad](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/43208ad)), closes [#6700](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6700)
 * **content-item-horizontal:** update styles and layout ([#7318](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7318)) ([54b6d1e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/54b6d1e)), closes [#7264](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7264)
 * **feature-card:** make hover states consistent ([#7338](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7338)) ([06b9a31](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/06b9a31))
-* **featured-section:** adjust target new tab issue by extending dds-card-cta ([#7250](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7250)) ([9fe5d78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9fe5d78))
+* **featured-section:** adjust target new tab issue by extending cds-card-cta ([#7250](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7250)) ([9fe5d78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9fe5d78))
 * **leadspace:** allow lead space height to grow with content ([#7184](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7184)) ([9271f6e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9271f6e)), closes [#7155](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7155) [#6336](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6336)
 * **link-list:** remove video duration only for link list ([#7360](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7360)) ([3002205](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3002205)), closes [#6086](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6086) [/github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/7342#issuecomment-938006980](https://github.com//github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/7342/issues/issuecomment-938006980)
 * **link-list:** update heading font size for video card ([#7289](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7289)) ([c2c896a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c2c896a)), closes [#6086](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/6086)
@@ -1841,7 +1911,7 @@ All notable changes to this project will be documented in this file. See
   ([5ffee6f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5ffee6f)),
   closes
   [#4127](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4127)
-- **styles:** ensure dds-prefix variable is included
+- **styles:** ensure cds-prefix variable is included
   ([#4396](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4396))
   ([136245c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/136245c)),
   closes
diff --git a/packages/styles/carbon.yml b/packages/styles/carbon.yml
index b0412ea8346..6e6eb9ad58e 100644
--- a/packages/styles/carbon.yml
+++ b/packages/styles/carbon.yml
@@ -17,7 +17,9 @@ library:
 assets:
   back-to-top:
     name: Back to top
-    description: Back to top is a sticky button that appears on long form pages. When triggered it scrolls the the user back to the top of the page.
+    description:
+      Back to top is a sticky button that appears on long form pages. When
+      triggered it scrolls the the user back to the top of the page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/back-to-top
     status: stable
     type: component
@@ -28,7 +30,10 @@ assets:
       - contextual-navigation
   button-group:
     name: Button group
-    description: The Button group component is to be utilized within IBM.com for grouping two or more Button components together and sets all buttons to the same width.
+    description:
+      The Button group component is to be utilized within IBM.com for grouping
+      two or more Button components together and sets all buttons to the same
+      width.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/button-group
     status:
       key: stable
@@ -42,7 +47,9 @@ assets:
       - contextual-navigation
   callout-quote:
     name: Callout quote
-    description: Callout quote is a typographic layout that is used to highlight an impactful client statement or user testimonial.
+    description:
+      Callout quote is a typographic layout that is used to highlight an
+      impactful client statement or user testimonial.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/callout-quote
     status: stable
     type: component
@@ -54,7 +61,9 @@ assets:
       - content-block
   callout-with-media:
     name: Callout with media
-    description: Callout with media is used to feature a high value media asset such as a customer story.
+    description:
+      Callout with media is used to feature a high value media asset such as a
+      customer story.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/callout-with-media
     status: stable
     type: component
@@ -67,7 +76,11 @@ assets:
       - content-element
   card:
     name: Card
-    description: The Card component can be used in many different page types. The default design includes a heading and a call to action, and optional extras include an eyebrow, copy, and media. By adding and removing optional content, the card offers a wide range of design possibilities.
+    description:
+      The Card component can be used in many different page types. The default
+      design includes a heading and a call to action, and optional extras
+      include an eyebrow, copy, and media. By adding and removing optional
+      content, the card offers a wide range of design possibilities.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#card
     status: stable
     type: component
@@ -79,7 +92,10 @@ assets:
       - contextual-navigation
   card-in-card:
     name: Card in card
-    description: Card in card shares the same functionality and text content requirements of a standard card, but requires a large media element. Card in card is often used in a Card group to as a featured card.
+    description:
+      Card in card shares the same functionality and text content requirements
+      of a standard card, but requires a large media element. Card in card is
+      often used in a Card group to as a featured card.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#card-in-card
     status: stable
     type: component
@@ -91,7 +107,11 @@ assets:
       - contextual-navigation
   card-link:
     name: Card link
-    description: Unlike Card, which can be used as a standalone component, Card link should always be accompanied by contextual copy on the page. Card links contain a heading, an optional CTA (call-to-action), and optional body copy. The entire card is clickable.
+    description:
+      Unlike Card, which can be used as a standalone component, Card link should
+      always be accompanied by contextual copy on the page. Card links contain a
+      heading, an optional CTA (call-to-action), and optional body copy. The
+      entire card is clickable.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#card-link
     status: stable
     type: component
@@ -103,7 +123,10 @@ assets:
       - contextual-navigation
   feature-card:
     name: Feature card
-    description: "Feature card is used for highlighting a piece of content on page. It should be used sparingly to be effective. Feature card has two sizes: medium and large."
+    description:
+      'Feature card is used for highlighting a piece of content on page. It
+      should be used sparingly to be effective. Feature card has two sizes:
+      medium and large.'
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cards#feature-card
     status: stable
     type: component
@@ -117,7 +140,9 @@ assets:
       - contextual-navigation
   card-group:
     name: Card group
-    description: Card group arranges cards in a grid and offers useful features that are applied to the group as a whole.
+    description:
+      Card group arranges cards in a grid and offers useful features that are
+      applied to the group as a whole.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-group
     status: stable
     type: component
@@ -130,7 +155,9 @@ assets:
       - content-element
   card-section:
     name: Card section
-    description: Card section is a collection of cards presented in a full-width section with a left-column header that responds to the grid.
+    description:
+      Card section is a collection of cards presented in a full-width section
+      with a left-column header that responds to the grid.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section
     status: stable
     type: component
@@ -139,22 +166,12 @@ assets:
     thumbnailPath: ../../thumbnails/card-section.svg
     tags:
       - content-block
-  card-section-images:
-    name: Card section with images
-    description: Card section with images brings images into each card in the section. Like Card section, this component is used for presenting resources or links, but presents images instead of body copy in each card.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section#card-section-with-images
-    status: stable
-    type: component
-    platform: web
-    noIndex: true
-    thumbnailPath: ../../thumbnails/card-section-images.svg
-    tags:
-      - content-block
-      - media
-      - contextual-navigation
   card-section-carousel:
     name: Card section carousel
-    description: Card section carousel is an exploratory component, meaning it allows users to browse or explore multiple pieces of content within the same area of the page.
+    description:
+      Card section carousel is an exploratory component, meaning it allows users
+      to browse or explore multiple pieces of content within the same area of
+      the page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section-carousel
     status: stable
     type: component
@@ -167,7 +184,10 @@ assets:
       - contextual-navigation
   carousel:
     name: Carousel
-    description: The carousel is an exploratory component, meaning it allows users to browse or explore multiple pieces of content within the same area of the page.
+    description:
+      The carousel is an exploratory component, meaning it allows users to
+      browse or explore multiple pieces of content within the same area of the
+      page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/carousel
     status: stable
     type: component
@@ -181,7 +201,12 @@ assets:
       - content-element
   content-block:
     name: Content block
-    description: Content block is a high-level layout component that acts as the main content unit used inside of a Content section to build web experiences on IBM dotcom. It encapsulates other content components (one or multiple content groups) and brings them together into a custom visual, which solves a specific problem for the user.
+    description:
+      Content block is a high-level layout component that acts as the main
+      content unit used inside of a Content section to build web experiences on
+      IBM dotcom. It encapsulates other content components (one or multiple
+      content groups) and brings them together into a custom visual, which
+      solves a specific problem for the user.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block
     status: stable
     type: component
@@ -193,7 +218,9 @@ assets:
       - content-element
   content-block-cards:
     name: Content block cards
-    description: Content block cards is used to present small self-contained pieces of information as cards.
+    description:
+      Content block cards is used to present small self-contained pieces of
+      information as cards.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-cards
     status: stable
     type: component
@@ -204,7 +231,9 @@ assets:
       - content-block
   content-block-horizontal:
     name: Content block horizontal
-    description: Content block horizontal is used to highlight a group of more important pieces of content, such as products or solutions, with more visual weight.
+    description:
+      Content block horizontal is used to highlight a group of more important
+      pieces of content, such as products or solutions, with more visual weight.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-horizontal
     status: stable
     type: component
@@ -215,7 +244,9 @@ assets:
       - content-block
   content-block-media:
     name: Content block media
-    description: Content block media is used to present information with images in a group setting.
+    description:
+      Content block media is used to present information with images in a group
+      setting.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-media
     status: stable
     type: component
@@ -227,7 +258,9 @@ assets:
       - media
   content-block-segmented:
     name: Content block segmented
-    description: Content block segmented is a variation of Content block simple with the added ability to add subsections.
+    description:
+      Content block segmented is a variation of Content block simple with the
+      added ability to add subsections.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-segmented
     status: stable
     type: component
@@ -238,7 +271,9 @@ assets:
       - content-block
   content-block-simple:
     name: Content block simple
-    description: Content block simple is typically used for the introductory section on a page.
+    description:
+      Content block simple is typically used for the introductory section on a
+      page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-block-simple
     status: stable
     type: component
@@ -249,7 +284,11 @@ assets:
       - content-block
   content-group:
     name: Content group
-    description: Content group acts as a content unit, and is used inside a Content section or a Content block. It can contain basic content components (one or multiple content items of the same kind), bringing them together into highly-customized solutions for the user.
+    description:
+      Content group acts as a content unit, and is used inside a Content section
+      or a Content block. It can contain basic content components (one or
+      multiple content items of the same kind), bringing them together into
+      highly-customized solutions for the user.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group
     status: stable
     type: component
@@ -259,20 +298,27 @@ assets:
     tags:
       - content-block
       - content-element
-  content-group-banner:
-    name: Content group banner
-    description: Content group banner is designed as a subtle callout, intended for tangential information or announcements that are supplementary to the page’s main focus.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-banner
+  in-page-banner:
+    name: In page banner
+    description:
+      In page banner is designed as a subtle callout, intended for tangential
+      information or announcements that are supplementary to the page’s main
+      focus.
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/in-page-banner
     status: stable
     type: component
     platform: web
     noIndex: true
-    thumbnailPath: ../../thumbnails/content-group-banner.svg
+    thumbnailPath: ../../thumbnails/in-page-banner.svg
     tags:
       - content-block
   content-group-cards:
     name: Content group cards
-    description: Content group cards is used to present information through a group of cards with each acting as a call to action that drives to additional or supporting destinations. It is suitable for adding concise buckets of content and links to a long-form reading experience.
+    description:
+      Content group cards is used to present information through a group of
+      cards with each acting as a call to action that drives to additional or
+      supporting destinations. It is suitable for adding concise buckets of
+      content and links to a long-form reading experience.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-cards
     status: stable
     type: component
@@ -283,7 +329,9 @@ assets:
       - content-block
   content-group-pictograms:
     name: Content group pictograms
-    description: Content group pictograms is used to present a group of information, each with a supporting pictogram.
+    description:
+      Content group pictograms is used to present a group of information, each
+      with a supporting pictogram.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-pictograms
     status: stable
     type: component
@@ -295,7 +343,9 @@ assets:
       - media
   content-group-simple:
     name: Content group simple
-    description: Content group simple is an alternative form of a narrative layout where the content is broken up into smaller pieces to make it more digestible.
+    description:
+      Content group simple is an alternative form of a narrative layout where
+      the content is broken up into smaller pieces to make it more digestible.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-simple
     status: stable
     type: component
@@ -306,7 +356,13 @@ assets:
       - content-block
   content-item:
     name: Content item
-    description: The Content item is a basic-level content component that acts as a primary content unit, and it is used inside a Content group to build web experiences on IBM dotcom pages. It can encapsulate basic content (a heading, a description, a media element – image or video – and a CTA) and brings them all together into a content component which solves a specific problem for the user.
+    description:
+      The Content item is a basic-level content component that acts as a primary
+      content unit, and it is used inside a Content group to build web
+      experiences on IBM dotcom pages. It can encapsulate basic content (a
+      heading, a description, a media element – image or video – and a CTA) and
+      brings them all together into a content component which solves a specific
+      problem for the user.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item
     status: stable
     type: component
@@ -315,21 +371,28 @@ assets:
     thumbnailPath: ../../thumbnails/content-item.svg
     tags:
       - content-element
-  content-item-horizontal:
-    name: Content item horizontal
-    description: Content item horizontal component displays information in a horizontal orientation.
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+  content-item-row:
+    name: Content item row
+    description:
+      Content item row component displays information in a horizontal
+      orientation.
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
     status: stable
     type: component
     platform: web
     noIndex: true
-    thumbnailPath: ../../thumbnails/content-item-horizontal.svg
+    thumbnailPath: ../../thumbnails/content-item-row.svg
     tags:
       - content-block
       - content-element
   content-section:
     name: Content section
-    description: Content section is a high-level content component that acts as the main content unit to build web page experiences for IBM.com. It encapsulates other content components (one or multiple Content blocks and/or Content groups) and brings them together, providing flexibility to create many different solutions for users.
+    description:
+      Content section is a high-level content component that acts as the main
+      content unit to build web page experiences for IBM.com. It encapsulates
+      other content components (one or multiple Content blocks and/or Content
+      groups) and brings them together, providing flexibility to create many
+      different solutions for users.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-section
     status: stable
     type: component
@@ -340,7 +403,9 @@ assets:
       - content-block
   cta:
     name: CTA
-    description: CTA stands for call to action. A CTA refers to the use of words or phrases that can compel an audience to act in a specific way.
+    description:
+      CTA stands for call to action. A CTA refers to the use of words or phrases
+      that can compel an audience to act in a specific way.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cta
     status: stable
     type: component
@@ -352,7 +417,10 @@ assets:
       - contextual-navigation
   cta-section:
     name: CTA section
-    description: CTA section builds off of CTA block and adds a content section heading in the left most columns. This component is typically used with the Table of contents horizontal.
+    description:
+      CTA section builds off of CTA block and adds a content section heading in
+      the left most columns. This component is typically used with the Table of
+      contents horizontal.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cta-block-and-section#cta-section
     status: stable
     type: component
@@ -364,7 +432,10 @@ assets:
       - contextual-navigation
   cta-block:
     name: CTA block
-    description: CTA block combines a heading, copy and CTA(s), this component is typically used at the bottom of a page to guide the user towards the next step in their journey.
+    description:
+      CTA block combines a heading, copy and CTA(s), this component is typically
+      used at the bottom of a page to guide the user towards the next step in
+      their journey.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/cta-block-and-section#cta-block
     status: stable
     type: component
@@ -376,7 +447,9 @@ assets:
       - contextual-navigation
   dotcom-shell:
     name: Dotcom shell
-    description: Dotcom shell includes the Masthead, and Footer components, all wrapped in a UI shell using Carbon’s grid.
+    description:
+      Dotcom shell includes the Masthead, and Footer components, all wrapped in
+      a UI shell using Carbon’s grid.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/dotcom-shell
     status: stable
     type: component
@@ -387,7 +460,9 @@ assets:
       - shell
   expressive-modal:
     name: Expressive modal
-    description: Expressive modal is based on the Carbon modal component with slight styling updates to increase the padding and uses fixed buttons.
+    description:
+      Expressive modal is based on the Carbon modal component with slight
+      styling updates to increase the padding and uses fixed buttons.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/expressive-modal
     status: stable
     type: component
@@ -411,7 +486,10 @@ assets:
       - media
   filter-panel:
     name: Filter panel
-    description: The filter panel is a component that can be customized to provide categorized filters to help users trim down large amounts of content, data and/or search results.
+    description:
+      The filter panel is a component that can be customized to provide
+      categorized filters to help users trim down large amounts of content, data
+      and/or search results.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/filter-panel
     status: stable
     type: component
@@ -423,7 +501,10 @@ assets:
       - input-control
   footer:
     name: Footer
-    description: The Footer is required on all IBM.com pages, it is placed at the bottom of a page and acts as the catch-all section that helps users navigate and provides corporate level general and legal information.
+    description:
+      The Footer is required on all IBM.com pages, it is placed at the bottom of
+      a page and acts as the catch-all section that helps users navigate and
+      provides corporate level general and legal information.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/footer
     status: stable
     type: component
@@ -435,7 +516,9 @@ assets:
       - shell
   horizontal-rule:
     name: Horizontal rule
-    description: The horizontal rule component is utilized for thematic breaks within the content.
+    description:
+      The horizontal rule component is utilized for thematic breaks within the
+      content.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/horizontal-rule
     status: stable
     type: component
@@ -446,7 +529,11 @@ assets:
       - content-element
   image:
     name: Image
-    description: Image, at its core, is a wrapper that adds an image to the page. You have the option to pass multiple images to the image component to render at the various breakpoints. This is particularly useful if you want to render different images at different screen sizes.
+    description:
+      Image, at its core, is a wrapper that adds an image to the page. You have
+      the option to pass multiple images to the image component to render at the
+      various breakpoints. This is particularly useful if you want to render
+      different images at different screen sizes.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/images#image
     status: stable
     type: component
@@ -458,7 +545,11 @@ assets:
       - media
   image-with-caption:
     name: Image with caption
-    description: With the Image with caption component, an image can include a caption beneath to provide more context. In addition, the image can be clicked to open a larger version of the image, using the Lightbox media viewer overlay.
+    description:
+      With the Image with caption component, an image can include a caption
+      beneath to provide more context. In addition, the image can be clicked to
+      open a larger version of the image, using the Lightbox media viewer
+      overlay.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/images#image-with-caption
     status: stable
     type: component
@@ -470,7 +561,12 @@ assets:
       - media
   language-selector:
     name: Language selector
-    description: Language selector is for users to select their preferred language on a website. The content on the website will appear in the default language until the users reselect their preferred language then the page content will reload in the reselected language provided a translation is available.
+    description:
+      Language selector is for users to select their preferred language on a
+      website. The content on the website will appear in the default language
+      until the users reselect their preferred language then the page content
+      will reload in the reselected language provided a translation is
+      available.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/language-selector
     status: stable
     type: component
@@ -481,7 +577,9 @@ assets:
       - input-control
   layout:
     name: Layout
-    description:  The layout component is to be utilized within IBM.com for various abstract layout configurations.
+    description:
+      The layout component is to be utilized within IBM.com for various abstract
+      layout configurations.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/layout
     status: stable
     type: component
@@ -492,7 +590,10 @@ assets:
       - content-block
   lead-space:
     name: Lead space
-    description:  Lead space sets the context and also helps users understand what type of content they are going to find on the page. It is always positioned at the top.
+    description:
+      Lead space sets the context and also helps users understand what type of
+      content they are going to find on the page. It is always positioned at the
+      top.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/leadspace
     status: stable
     type: component
@@ -503,7 +604,13 @@ assets:
       - content-block
   lead-space-block:
     name: Lead space block
-    description:  Lead space block is an alternative to the Lead space, enabling a more productive first site of viewer engagement. Lead space — block is positioned at the top of a web page, with a purpose to orient the user when they land on a page, inform them of the content, and guide them to the first key piece of content on the page, whether it’s a crucial piece of information or a call-to-action button.
+    description:
+      Lead space block is an alternative to the Lead space, enabling a more
+      productive first site of viewer engagement. Lead space — block is
+      positioned at the top of a web page, with a purpose to orient the user
+      when they land on a page, inform them of the content, and guide them to
+      the first key piece of content on the page, whether it’s a crucial piece
+      of information or a call-to-action button.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/lead-space-block
     status: stable
     type: component
@@ -514,7 +621,11 @@ assets:
       - content-block
   lead-space-search:
     name: Lead space search
-    description:  Lead space search provides a fast route to information discovery by including a prominent search option in the lead space. As the search is always positioned at the top, it is discoverable by users the moment they land on the page.
+    description:
+      Lead space search provides a fast route to information discovery by
+      including a prominent search option in the lead space. As the search is
+      always positioned at the top, it is discoverable by users the moment they
+      land on the page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/lead-space-search
     status: stable
     type: component
@@ -526,7 +637,9 @@ assets:
       - content-block
   leaving-ibm-modal:
     name: Leaving IBM modal
-    description:  The Leaving IBM notice displays as an overlay when a user clicks an external link.
+    description:
+      The Leaving IBM notice displays as an overlay when a user clicks an
+      external link.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/leaving-ibm-modal
     status: stable
     type: component
@@ -537,7 +650,9 @@ assets:
       - system-feedback
   lightbox-media-viewer:
     name: Lightbox media viewer
-    description:  Lightbox media viewer allows the user to view an image or video at a larger size within a modal.
+    description:
+      Lightbox media viewer allows the user to view an image or video at a
+      larger size within a modal.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/lightbox-media-viewer
     status: stable
     type: component
@@ -548,7 +663,9 @@ assets:
       - media
   link-list:
     name: Link list
-    description:  Link list is used for multiple CTAs, with options for vertical and horizontal lists and varying CTA styling.
+    description:
+      Link list is used for multiple CTAs, with options for vertical and
+      horizontal lists and varying CTA styling.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/link-list
     status: stable
     type: component
@@ -559,7 +676,9 @@ assets:
       - contextual-navigation
   link-list-section:
     name: Link list section
-    description:  Link list section is used for multiple CTAs, with options for vertical and horizontal lists and varying CTA styling.
+    description:
+      Link list section is used for multiple CTAs, with options for vertical and
+      horizontal lists and varying CTA styling.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/link-list-section
     status: stable
     type: component
@@ -571,7 +690,10 @@ assets:
       - content-element
   link-with-icon:
     name: Link with icon
-    description:  Link with icon is primarily used as a navigational element with an icon as an indicator to the destination or type of content being referenced. Link with icon should not be used within a paragraph.
+    description:
+      Link with icon is primarily used as a navigational element with an icon as
+      an indicator to the destination or type of content being referenced. Link
+      with icon should not be used within a paragraph.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/link-with-icon
     status: stable
     type: component
@@ -582,7 +704,9 @@ assets:
       - contextual-navigation
   locale-modal:
     name: Locale modal
-    description:  Locale modal is triggered after selecting the locale button and allows users to change geographic regions and languages, if available.
+    description:
+      Locale modal is triggered after selecting the locale button and allows
+      users to change geographic regions and languages, if available.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/localemodal
     status: stable
     type: component
@@ -594,7 +718,9 @@ assets:
       - contextual-navigation
   logo-grid:
     name: Logo grid
-    description: Logo grid is used to present a group of client or partner logos. Currently the logos are not clickable.
+    description:
+      Logo grid is used to present a group of client or partner logos. Currently
+      the logos are not clickable.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/logo-grid
     status: stable
     type: component
@@ -605,7 +731,10 @@ assets:
       - content-block
   masthead:
     name: Masthead
-    description: Masthead is a fundamental navigational component for IBM.com that displays consistently at the top of each page. It also includes search and profile services for IBM.com.
+    description:
+      Masthead is a fundamental navigational component for IBM.com that displays
+      consistently at the top of each page. It also includes search and profile
+      services for IBM.com.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/masthead
     status: stable
     type: component
@@ -616,7 +745,9 @@ assets:
       - structural-navigation
   pictogram-item:
     name: Pictogram item
-    description: Pictogram item is used to communicate messages at a glance, afford interactivity, and simplify complex ideas.
+    description:
+      Pictogram item is used to communicate messages at a glance, afford
+      interactivity, and simplify complex ideas.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/pictogram-item
     status: stable
     type: component
@@ -627,7 +758,9 @@ assets:
       - media
   quote:
     name: Quote
-    description: Quote is used to highlight an impactful client statement or user testimonial.
+    description:
+      Quote is used to highlight an impactful client statement or user
+      testimonial.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/quote
     status: stable
     type: component
@@ -638,7 +771,10 @@ assets:
       - content-element
   table-of-contents:
     name: Table of contents
-    description: The table of contents component allows users to quickly navigate through long pages by providing jump links to different sections of the content within a single page.
+    description:
+      The table of contents component allows users to quickly navigate through
+      long pages by providing jump links to different sections of the content
+      within a single page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/table-of-contents
     status: stable
     type: component
@@ -650,7 +786,10 @@ assets:
       - contextual-navigation
   tabs-extended:
     name: Tabs extended
-    description: On desktop, Tabs extended renders as tabs. On mobile, the component renders as an accordion, making it easy to read and access each section while scrolling.
+    description:
+      On desktop, Tabs extended renders as tabs. On mobile, the component
+      renders as an accordion, making it easy to read and access each section
+      while scrolling.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/tabs-extended#tabs-extended
     status: stable
     type: component
@@ -662,7 +801,13 @@ assets:
       - content-block
   tabs-extended-media:
     name: Tabs extended media
-    description: Tabs extended provides an option to include media. It uses Content item horizontal with media to create an organized section for displaying content with media. This is useful especially when reducing page length is desired. Keep in mind that when using tabs, some content will be hidden until the user interacts with the component, so they should not be used for information that is considered critical.
+    description:
+      Tabs extended provides an option to include media. It uses Content item
+      horizontal with media to create an organized section for displaying
+      content with media. This is useful especially when reducing page length is
+      desired. Keep in mind that when using tabs, some content will be hidden
+      until the user interacts with the component, so they should not be used
+      for information that is considered critical.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/tabs-extended#tabs-extended-media
     status: stable
     type: component
@@ -675,7 +820,9 @@ assets:
       - media
   tag-link:
     name: Tag link
-    description: Tag link is a clickable tag that links the topic to another page with more information.
+    description:
+      Tag link is a clickable tag that links the topic to another page with more
+      information.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/tag-link
     status: stable
     type: component
@@ -687,7 +834,10 @@ assets:
       - structural-navigation
   universal-banner:
     name: Universal banner
-    description: Universal banner is used exclusively to feature global and critical announcements. It is the only component that can be positioned above the masthead.
+    description:
+      Universal banner is used exclusively to feature global and critical
+      announcements. It is the only component that can be positioned above the
+      masthead.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/universal-banner
     status:
       key: draft
@@ -701,7 +851,9 @@ assets:
       - content-block
   video:
     name: Video
-    description: Video allows you to embed Kaltura videos from the media center in various ways throughout a page.
+    description:
+      Video allows you to embed Kaltura videos from the media center in various
+      ways throughout a page.
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/video
     status: stable
     type: component
diff --git a/packages/styles/gulp/build/default.js b/packages/styles/gulp/build/default.js
index 3dff30258f0..97bce402bb7 100644
--- a/packages/styles/gulp/build/default.js
+++ b/packages/styles/gulp/build/default.js
@@ -14,5 +14,5 @@ const gulp = require('gulp');
  *
  * @module default
  */
-module.exports = gulp.task('default', gulp.series('clean', 
+module.exports = gulp.task('default', gulp.series('clean',
     gulp.parallel('sass-ltr', 'sass-rtl')));
\ No newline at end of file
diff --git a/packages/styles/gulp/tasks/sass-ltr.js b/packages/styles/gulp/tasks/sass-ltr.js
index b3d6fad80c8..4cddf6144b8 100644
--- a/packages/styles/gulp/tasks/sass-ltr.js
+++ b/packages/styles/gulp/tasks/sass-ltr.js
@@ -11,8 +11,7 @@ const gulp = require('gulp'),
   prefix = require('gulp-autoprefixer'),
   cleanCSS = require('gulp-clean-css'),
   rename = require('gulp-rename'),
-  // This can be changed to `dart-sass` once Carbon V11 is used require('sass')
-  sass = require('gulp-sass')(require('node-sass')),
+  sass = require('gulp-sass')(require('sass')),
   path = require('path');
 
 /**
@@ -30,8 +29,8 @@ function _sass() {
     .src(global.config.scssEntry)
     .pipe(sass({
       includePaths: [
-        path.resolve(__dirname, '../../', 'node_modules'),
-        path.resolve(__dirname, '../../../../', 'node_modules'),
+        path.resolve(__dirname, '../../', 'node_modules'), // styles
+        path.resolve(__dirname, '../../../../', 'node_modules'), // styles
       ]
     }).on('error', sass.logError))
     .pipe(
diff --git a/packages/styles/gulp/tasks/sass-rtl.js b/packages/styles/gulp/tasks/sass-rtl.js
index 9f29a934f9d..fe4d4f6ad6b 100644
--- a/packages/styles/gulp/tasks/sass-rtl.js
+++ b/packages/styles/gulp/tasks/sass-rtl.js
@@ -12,8 +12,7 @@ const gulp = require('gulp'),
   cleanCSS = require('gulp-clean-css'),
   rename = require('gulp-rename'),
   rtlcss = require('gulp-rtlcss'),
-  // This can be changed to `dart-sass` once Carbon V11 is used require('sass')
-  sass = require('gulp-sass')(require('node-sass')),
+  sass = require('gulp-sass')(require('sass')),
   path = require('path');
 
 /**
@@ -31,8 +30,8 @@ function _sass() {
     .src(global.config.scssEntry)
     .pipe(sass({
       includePaths: [
-        path.resolve(__dirname, '../../', 'node_modules'),
-        path.resolve(__dirname, '../../../../', 'node_modules'),
+        path.resolve(__dirname, '../../', 'node_modules'), // styles
+        path.resolve(__dirname, '../../../../', 'node_modules'), // root
       ]
     }).on('error', sass.logError))
     .pipe(
diff --git a/packages/styles/gulp/tasks/watch.js b/packages/styles/gulp/tasks/watch.js
index c20a26eee37..3c892410c25 100644
--- a/packages/styles/gulp/tasks/watch.js
+++ b/packages/styles/gulp/tasks/watch.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * 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.
diff --git a/packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg b/packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg
new file mode 100644
index 00000000000..c030fb66c32
--- /dev/null
+++ b/packages/styles/icons/svg/IBM-8bar-logo--h23-white.svg
@@ -0,0 +1,13 @@
+<svg width="58" height="24" viewBox="0 0 58 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="logo">
+<path id="logo color" fill-rule="evenodd" clip-rule="evenodd" d="M32.1335 0.846069H41.1894L41.6962 2.27207H32.1335V0.846069ZM24.6845 0.853948C26.1997 0.853948 27.5854 1.39128 28.6559 2.27961H12.8537V0.853948H24.6845ZM30.6052 5.27381C30.4652 4.76894 30.2588 4.29079 29.9965 3.84781H12.8537V5.27381H30.6052ZM16.0668 11.2619V9.83626H29.9956C29.6789 10.3692 29.2802 10.849 28.817 11.2619H16.0668ZM28.7641 12.8301H16.067V14.2561H29.9427C29.6264 13.7232 29.2277 13.243 28.7641 12.8301ZM20.887 17.2502H16.0669V15.8242H20.887V17.2502ZM12.8536 20.2442V18.8185H30.6051C30.4652 19.3234 30.2587 19.8015 29.9964 20.2442H12.8536ZM16.0669 8.26783H20.887V6.84183H16.0669V8.26783ZM30.6404 8.268H25.4149V6.842H30.8191C30.8191 7.33368 30.7551 7.81048 30.6404 8.268ZM25.4149 15.8243V17.2503H30.8191C30.8191 16.7583 30.7551 16.2818 30.6404 15.8243H25.4149ZM32.1337 23.2383H40.1698V21.812H32.1337V23.2383ZM40.1698 20.2433H32.1337V18.8169H40.1698V20.2433ZM35.3482 17.2479H40.1698V15.8219H35.3482V17.2479ZM40.1698 14.2532H35.3482V12.8268H40.1698V14.2532ZM49.8135 23.2383H57.8496V21.812H49.8135V23.2383ZM57.8496 20.2433H49.8135V18.8169H57.8496V20.2433ZM49.8135 17.2479H54.6351V15.8219H49.8135V17.2479ZM54.6351 14.2532H49.8135V12.8268H54.6351V14.2532ZM49.8135 11.2579H54.6351V9.83156H49.8135H45.5972L45.09 11.2579H49.322L49.8135 9.89953V11.2579ZM40.1698 9.83163H44.3861L44.8933 11.258H40.661L40.1698 9.8996V11.258H35.3482V9.83163H40.1698ZM54.6351 6.83646H46.6614L46.1549 8.26279H54.6351V6.83646ZM48.2837 2.27275L48.7905 0.846407H57.8495V2.27275H48.2837ZM44.9886 23.2383L45.5048 21.812H44.4783L44.9886 23.2383ZM46.0721 20.2431H43.9111L43.3953 18.8168H46.5883L46.0721 20.2431ZM42.8278 17.248H47.1554L47.6712 15.8219H42.312L42.8278 17.248ZM48.2387 14.2531H41.7446L41.2288 12.8267H48.7545L48.2387 14.2531ZM35.3482 8.26273H43.8284L43.3216 6.83639H35.3482V8.26273ZM57.8498 5.26752H47.2191L47.7262 3.84118H57.8498V5.26752ZM42.2571 3.84128H32.1335V5.26762H42.764L42.2571 3.84128ZM12.8536 23.2384V21.8124H28.6558C27.5853 22.701 26.1996 23.2384 24.6844 23.2384H12.8536ZM0 23.2303H11.2467V21.8043H0V23.2303ZM11.2467 20.2362H0V18.8102H11.2467V20.2362ZM3.21309 17.2422H8.03326V15.8162H3.21309V17.2422ZM8.03326 14.2482H3.21309V12.8222H8.03326V14.2482ZM3.21309 11.2538H8.03326V9.82815H3.21309V11.2538ZM8.03326 8.26012H3.21309V6.83412H8.03326V8.26012ZM0 5.26576H11.2467V3.83976H0V5.26576ZM11.2467 2.27173H0V0.846069H11.2467V2.27173Z" fill="#8C8C8C"/>
+<mask id="mask0_1455_52615" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="58" height="24">
+<path id="logo color_2" fill-rule="evenodd" clip-rule="evenodd" d="M32.1335 0.846069H41.1894L41.6962 2.27207H32.1335V0.846069ZM24.6845 0.853948C26.1997 0.853948 27.5854 1.39128 28.6559 2.27961H12.8537V0.853948H24.6845ZM30.6052 5.27381C30.4652 4.76894 30.2588 4.29079 29.9965 3.84781H12.8537V5.27381H30.6052ZM16.0668 11.2619V9.83626H29.9956C29.6789 10.3692 29.2802 10.849 28.817 11.2619H16.0668ZM28.7641 12.8301H16.067V14.2561H29.9427C29.6264 13.7232 29.2277 13.243 28.7641 12.8301ZM20.887 17.2502H16.0669V15.8242H20.887V17.2502ZM12.8536 20.2442V18.8185H30.6051C30.4652 19.3234 30.2587 19.8015 29.9964 20.2442H12.8536ZM16.0669 8.26783H20.887V6.84183H16.0669V8.26783ZM30.6404 8.268H25.4149V6.842H30.8191C30.8191 7.33368 30.7551 7.81048 30.6404 8.268ZM25.4149 15.8243V17.2503H30.8191C30.8191 16.7583 30.7551 16.2818 30.6404 15.8243H25.4149ZM32.1337 23.2383H40.1698V21.812H32.1337V23.2383ZM40.1698 20.2433H32.1337V18.8169H40.1698V20.2433ZM35.3482 17.2479H40.1698V15.8219H35.3482V17.2479ZM40.1698 14.2532H35.3482V12.8268H40.1698V14.2532ZM49.8135 23.2383H57.8496V21.812H49.8135V23.2383ZM57.8496 20.2433H49.8135V18.8169H57.8496V20.2433ZM49.8135 17.2479H54.6351V15.8219H49.8135V17.2479ZM54.6351 14.2532H49.8135V12.8268H54.6351V14.2532ZM49.8135 11.2579H54.6351V9.83156H49.8135H45.5972L45.09 11.2579H49.322L49.8135 9.89953V11.2579ZM40.1698 9.83163H44.3861L44.8933 11.258H40.661L40.1698 9.8996V11.258H35.3482V9.83163H40.1698ZM54.6351 6.83646H46.6614L46.1549 8.26279H54.6351V6.83646ZM48.2837 2.27275L48.7905 0.846407H57.8495V2.27275H48.2837ZM44.9886 23.2383L45.5048 21.812H44.4783L44.9886 23.2383ZM46.0721 20.2431H43.9111L43.3953 18.8168H46.5883L46.0721 20.2431ZM42.8278 17.248H47.1554L47.6712 15.8219H42.312L42.8278 17.248ZM48.2387 14.2531H41.7446L41.2288 12.8267H48.7545L48.2387 14.2531ZM35.3482 8.26273H43.8284L43.3216 6.83639H35.3482V8.26273ZM57.8498 5.26752H47.2191L47.7262 3.84118H57.8498V5.26752ZM42.2571 3.84128H32.1335V5.26762H42.764L42.2571 3.84128ZM12.8536 23.2384V21.8124H28.6558C27.5853 22.701 26.1996 23.2384 24.6844 23.2384H12.8536ZM0 23.2303H11.2467V21.8043H0V23.2303ZM11.2467 20.2362H0V18.8102H11.2467V20.2362ZM3.21309 17.2422H8.03326V15.8162H3.21309V17.2422ZM8.03326 14.2482H3.21309V12.8222H8.03326V14.2482ZM3.21309 11.2538H8.03326V9.82815H3.21309V11.2538ZM8.03326 8.26012H3.21309V6.83412H8.03326V8.26012ZM0 5.26576H11.2467V3.83976H0V5.26576ZM11.2467 2.27173H0V0.846069H11.2467V2.27173Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_1455_52615)">
+<g id="color/gray/gray-10">
+<rect id="gray-10" y="0.5" width="58" height="23" fill="#F4F4F4"/>
+</g>
+</g>
+</g>
+</svg>
diff --git a/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg b/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
index e5356c2af2c..5a237f87a5d 100644
--- a/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
+++ b/packages/styles/icons/svg/IBM-8bar-logo--h65-white.svg
@@ -2,7 +2,7 @@
 <svg
   width="157"
   height="65"
-  class="bx--footer-logo__logo"
+  class="c4d--footer-logo__logo"
   viewBox="0 0 157 65"
   version="1.1"
   xmlns="http://www.w3.org/2000/svg"
diff --git a/packages/styles/icons/svg/play-video.svg b/packages/styles/icons/svg/play-video.svg
index b6292f3cecf..3c9f49a5494 100644
--- a/packages/styles/icons/svg/play-video.svg
+++ b/packages/styles/icons/svg/play-video.svg
@@ -1,14 +1,14 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="64px" height="64px" viewBox="0 0 64 64" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>Group 3</title>
-    <g id="visual-spec" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Card-group-video" transform="translate(-736.000000, -1746.000000)">
-            <g id="Group-2-Copy-2" transform="translate(608.000000, 1658.000000)">
-                <g id="Group-3" transform="translate(128.000000, 88.000000)">
-                    <circle id="Oval-Copy-3" fill-opacity="0.9" fill="#525252" cx="32" cy="32" r="32"></circle>
-                    <path d="M26.5555476,43.111135 C26.0032708,43.111135 25.5555476,42.6633959 25.5555476,42.1111111 L25.5555476,20.1111111 C25.5541311,19.7531358 25.7441673,19.4217049 26.0538295,19.2421008 C26.3634918,19.0624967 26.745539,19.0621192 27.0555476,19.2411111 L46.0555476,30.2411111 C46.368866,30.4186723 46.5625038,30.7509842 46.5625038,31.1111111 C46.5625038,31.4712381 46.368866,31.8035499 46.0555476,31.9811111 L27.0555476,42.9811111 C26.9031526,43.0674916 26.7307319,43.1123209 26.5555476,43.111135 Z" id="Path-Copy" fill="#F3F3F3" fill-rule="nonzero"></path>
-                </g>
-            </g>
+<svg width="64px" height="64px" viewBox="0 0 64 64" slot="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <title>Group 3</title>
+  <g id="visual-spec" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Card-group-video" transform="translate(-736.000000, -1746.000000)">
+      <g id="Group-2-Copy-2" transform="translate(608.000000, 1658.000000)">
+        <g id="Group-3" transform="translate(128.000000, 88.000000)">
+          <circle id="Oval-Copy-3" fill-opacity="0.9" fill="#525252" cx="32" cy="32" r="32"></circle>
+          <path d="M26.5555476,43.111135 C26.0032708,43.111135 25.5555476,42.6633959 25.5555476,42.1111111 L25.5555476,20.1111111 C25.5541311,19.7531358 25.7441673,19.4217049 26.0538295,19.2421008 C26.3634918,19.0624967 26.745539,19.0621192 27.0555476,19.2411111 L46.0555476,30.2411111 C46.368866,30.4186723 46.5625038,30.7509842 46.5625038,31.1111111 C46.5625038,31.4712381 46.368866,31.8035499 46.0555476,31.9811111 L27.0555476,42.9811111 C26.9031526,43.0674916 26.7307319,43.1123209 26.5555476,43.111135 Z" id="Path-Copy" fill="#F3F3F3" fill-rule="nonzero"></path>
         </g>
+      </g>
     </g>
+  </g>
 </svg>
\ No newline at end of file
diff --git a/packages/styles/package.json b/packages/styles/package.json
index 71f1a791bdb..191c9a604f8 100644
--- a/packages/styles/package.json
+++ b/packages/styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "1.53.0",
+  "version": "2.0.0-rc.2",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",
@@ -13,9 +13,7 @@
     "icons/**/*"
   ],
   "keywords": [
-    "react",
     "carbon",
-    "carbon-components",
     "ibm",
     "carbon-design-system",
     "components"
@@ -28,21 +26,17 @@
     "ci-check": "yarn build",
     "postinstall": "carbon-telemetry collect --install",
     "start": "gulp dev",
-    "upgrade-carbon": "yarn upgrade-interactive @carbon/grid @carbon/import-once @carbon/layout @carbon/motion @carbon/themes @carbon/type carbon-components @carbon/icons-react --latest --exact"
+    "upgrade-carbon": "yarn upgrade-interactive @carbon/layout @carbon/styles @carbon/themes @carbon/icons-react --latest --exact"
   },
   "dependencies": {
-    "@carbon/grid": "10.43.2",
-    "@carbon/icons-react": "10.49.2",
-    "@carbon/import-once": "10.7.0",
-    "@carbon/layout": "10.37.2",
-    "@carbon/motion": "10.29.2",
+    "@carbon/icons-react": "^11.21.0",
+    "@carbon/layout": "^11.20.0",
+    "@carbon/styles": "^1.36.0",
     "@carbon/telemetry": "0.1.0",
-    "@carbon/themes": "10.55.3",
-    "@carbon/type": "10.45.3",
-    "carbon-components": "10.58.12"
+    "@carbon/type": "^11.25.0"
   },
   "devDependencies": {
-    "carbon-components-react": "7.59.17",
+    "@carbon/themes": "^11.20.0",
     "del": "^6.0.0",
     "gulp": "^4.0.2",
     "gulp-autoprefixer": "^6.1.0",
@@ -50,7 +44,8 @@
     "gulp-rename": "^2.0.0",
     "gulp-rtlcss": "^1.4.1",
     "gulp-sass": "^5.0.0",
-    "node-sass": "^8.0.0",
-    "require-dir": "^1.2.0"
+    "require-dir": "^1.2.0",
+    "sass": "~1.69.5",
+    "sass-loader": "^13.0.0"
   }
 }
diff --git a/packages/styles/scss/components/audio-player/_audio-player.scss b/packages/styles/scss/components/audio-player/_audio-player.scss
index f372e5e62fb..44647718960 100644
--- a/packages/styles/scss/components/audio-player/_audio-player.scss
+++ b/packages/styles/scss/components/audio-player/_audio-player.scss
@@ -5,9 +5,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../../globals/utils/ratio-base';
-@import 'carbon-components/scss/components/slider/slider';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/ratio-base' as *;
+@use '@carbon/styles/scss/components/slider';
 
 @mixin audio-player {
   .#{$prefix}--audio-player {
@@ -16,7 +19,7 @@
     align-items: center;
     height: $spacing-09;
     padding: 0 $spacing-03 0 0;
-    background-color: $ui-01;
+    background-color: $layer-01;
 
     /* For Accessibility on the buttons, when focusing the button */
     .#{$prefix}--btn {
@@ -37,7 +40,7 @@
                 path {
                   &:not([data-icon-path]) {
                     &:not([fill='none']) {
-                      fill: $ui-03;
+                      fill: $layer-accent-01;
                     }
                   }
                 }
@@ -47,7 +50,7 @@
         }
 
         &.#{$prefix}--tooltip__trigger:focus {
-          outline: $spacing-01 solid var(--cds-focus, $carbon--blue-60);
+          outline: $spacing-01 solid $focus;
           outline-offset: calc(-1 * #{$spacing-01});
         }
       }
@@ -62,20 +65,19 @@
     align-items: center;
     width: 100%;
     padding: $spacing-05;
-    background-color: $ui-01;
-    border-bottom: 1px solid $ui-03;
+    background-color: $layer-01;
+    border-bottom: 1px solid $layer-accent-01;
   }
 
   .#{$prefix}--audio-player__captions-text {
     min-height: calc(#{$spacing-05} + #{$spacing-01});
-    color: $text-01;
-    @include carbon--type-style('caption-01');
+    color: $text-primary;
   }
 
   .#{$prefix}--audio-player__thumbnail {
     width: $spacing-09;
     height: $spacing-09;
-    border: 1px solid $ui-03;
+    border: 1px solid $layer-accent-01;
 
     background-position: center;
     background-repeat: no-repeat;
@@ -101,8 +103,8 @@
     }
     svg {
       &.#{$prefix}--btn__icon {
-        width: var(--cds-icon-size-04, 2rem);
-        height: var(--cds-icon-size-04, 2rem);
+        width: $spacing-07;
+        height: $spacing-07;
       }
     }
   }
@@ -132,7 +134,7 @@
     }
 
     .#{$prefix}--menu--open {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
   .#{$prefix}--audio-player__volume-control-menu {
@@ -163,7 +165,3 @@
     }
   }
 }
-
-@include exports('audio-player') {
-  @include audio-player;
-}
diff --git a/packages/styles/scss/components/audio-player/_index.scss b/packages/styles/scss/components/audio-player/_index.scss
new file mode 100644
index 00000000000..7deaab55928
--- /dev/null
+++ b/packages/styles/scss/components/audio-player/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'audio-player';
+@use 'audio-player';
+
+@include audio-player.audio-player;
diff --git a/packages/styles/scss/components/back-to-top/_back-to-top.scss b/packages/styles/scss/components/back-to-top/_back-to-top.scss
index c456db580c6..0445eba7188 100644
--- a/packages/styles/scss/components/back-to-top/_back-to-top.scss
+++ b/packages/styles/scss/components/back-to-top/_back-to-top.scss
@@ -1,35 +1,37 @@
 /**
-* Copyright IBM Corp. 2016, 2021
+* Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '@carbon/styles/scss/components/button' as *;
 
 @mixin back-to-top {
-  :host(#{$dds-prefix}-back-to-top) {
+  :host(#{$c4d-prefix}-back-to-top) {
     position: sticky;
     bottom: 0;
     display: flex;
-    padding-right: $carbon--spacing-05;
+    padding-right: $spacing-05;
     outline: none;
     height: 0;
     z-index: 9999;
 
     .#{$prefix}--back-to-top__btn {
       position: relative;
-      bottom: $carbon--spacing-10;
-      border-color: $ui-background;
+      bottom: $spacing-10;
       border-radius: 50%;
-      width: $container-04;
-      height: $container-04;
+      width: $spacing-09;
+      height: $spacing-09;
       margin-left: auto;
       visibility: visible;
       opacity: 1;
-      transition: all $duration--fast-02 motion(standard, productive);
+      transition: all $duration-fast-02 motion(standard, productive);
     }
 
     &[hidden] {
@@ -41,12 +43,8 @@
   }
 
   @media print {
-    :host(#{$dds-prefix}-back-to-top) {
+    :host(#{$c4d-prefix}-back-to-top) {
       display: none;
     }
   }
 }
-
-@include exports('back-to-top') {
-  @include back-to-top;
-}
diff --git a/packages/styles/scss/components/back-to-top/_index.scss b/packages/styles/scss/components/back-to-top/_index.scss
new file mode 100644
index 00000000000..d8964329e07
--- /dev/null
+++ b/packages/styles/scss/components/back-to-top/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'back-to-top';
+@use 'back-to-top';
+
+@include back-to-top.back-to-top;
diff --git a/packages/styles/scss/components/background-media/README.md b/packages/styles/scss/components/background-media/README.md
deleted file mode 100644
index 89edef853b5..00000000000
--- a/packages/styles/scss/components/background-media/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/background-media/background-media';
-```
-
-#### Elements
-
-| Class                   | Description                                                                                                  |
-| ----------------------- | ------------------------------------------------------------------------------------------------------------ |
-| `.bx--background-media` | The Background media shares the same core functionality of background media across our different components. |
-
-#### Blocks
-
-| Class                                    | Description                                                   |
-| ---------------------------------------- | ------------------------------------------------------------- |
-| `.bx--background-media--gradient`        | Controls the direction the gradient                           |
-| `.bx--background-media--mobile-position` | Sets the hierarchy of the background Image on smaller devices |
diff --git a/packages/styles/scss/components/background-media/_background-media.scss b/packages/styles/scss/components/background-media/_background-media.scss
index e8668570b8d..00610c76e5b 100644
--- a/packages/styles/scss/components/background-media/_background-media.scss
+++ b/packages/styles/scss/components/background-media/_background-media.scss
@@ -5,17 +5,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../image/image';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/web-components/scss/components/tooltip/tooltip' as *;
+@use '../../globals/vars' as *;
+@use '../image';
 
 @mixin background-media {
-  :host(#{$dds-prefix}-background-media) {
+  :host(#{$c4d-prefix}-background-media) {
     position: relative;
     height: 100%;
     display: block;
     outline: none;
+
+    .#{$c4d-prefix}--image__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
   }
 
   .#{$prefix}--background-media--mobile-position {
@@ -31,27 +42,27 @@
     height: 100%;
     z-index: 1;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       background-image: linear-gradient(
         to bottom,
-        $ui-background 0%,
+        $background 0%,
         rgba(255, 255, 255, 0) 100%
       );
     }
   }
 
   .#{$prefix}--background-media--gradient--left-to-right {
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       background-image: linear-gradient(
         to right,
-        $ui-background 25%,
+        $background 25%,
         rgba(255, 255, 255, 0) 75%
       );
 
       [dir='rtl'] & {
         background-image: linear-gradient(
           to left,
-          $ui-background 25%,
+          $background 25%,
           rgba(255, 255, 255, 0) 75%
         );
       }
@@ -59,10 +70,10 @@
   }
 
   .#{$prefix}--background-media--gradient--top-to-bottom {
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       background-image: linear-gradient(
         to bottom,
-        $ui-background 0%,
+        $background 0%,
         rgba(255, 255, 255, 0) 100%
       );
     }
@@ -70,9 +81,9 @@
 
   .#{$prefix}--video-player__controls {
     appearance: none;
-    background: $ui-background;
+    background: $background;
     border: none;
-    color: $text-01;
+    color: $text-primary;
     border-radius: 50%;
     padding: 0;
     line-height: 0;
@@ -83,8 +94,33 @@
     z-index: 2;
     cursor: pointer;
   }
-}
 
-@include exports('background-media') {
-  @include background-media;
+  .#{$prefix}--background-media--video {
+    aspect-ratio: 16 / 9; /* stylelint-disable-line property-no-unknown */
+    @include breakpoint(md) {
+      aspect-ratio: auto; /* stylelint-disable-line property-no-unknown */
+    }
+  }
+
+  .#{$prefix}--video-player__controls[hasTooltip] {
+    @include tooltip--trigger('definition', top);
+    @include tooltip--placement('definition', 'top', 'end');
+
+    position: absolute;
+    border: $spacing-01 solid transparent;
+    background-clip: padding-box;
+
+    &:focus {
+      border-color: $text-primary;
+      outline: $spacing-01 solid $background;
+    }
+  }
+
+  .#{$prefix}--background-media--container {
+    contain: layout;
+  }
+
+  .#{$prefix}--background-media--item {
+    height: 100%;
+  }
 }
diff --git a/packages/styles/scss/components/background-media/_index.scss b/packages/styles/scss/components/background-media/_index.scss
new file mode 100644
index 00000000000..886d751b19a
--- /dev/null
+++ b/packages/styles/scss/components/background-media/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'background-media';
+@use 'background-media';
+
+@include background-media.background-media;
diff --git a/packages/styles/scss/components/button-group/_button-group.scss b/packages/styles/scss/components/button-group/_button-group.scss
new file mode 100644
index 00000000000..d65e4587788
--- /dev/null
+++ b/packages/styles/scss/components/button-group/_button-group.scss
@@ -0,0 +1,107 @@
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+
+@use '../../globals/vars' as *;
+@use '../lightbox-media-viewer';
+@use '../button';
+
+@mixin button-group {
+  :host(#{$c4d-prefix}-button-group-item),
+  :host(#{$c4d-prefix}-button-cta) {
+    @extend :host(#{$c4d-prefix}-button);
+
+    outline: none;
+    max-width: 100%;
+    min-width: 0;
+
+    @media print {
+      max-width: 100%;
+      margin-bottom: $spacing-05;
+      display: block;
+    }
+
+    .#{$prefix}--btn {
+      width: 100%;
+      word-break: break-word;
+      transition: all $duration-fast-01 motion(entrance, productive), width 0s,
+        height 0s;
+      max-width: 100%;
+
+      @media print {
+        background: $white-0;
+        border: to-rem(1px) solid $gray-100;
+        color: $gray-100;
+        font-weight: 600;
+        display: block;
+        max-width: inherit;
+      }
+
+      .#{$prefix}--btn__icon {
+        width: auto;
+        height: auto;
+      }
+
+      .#{$prefix}--btn--hidden {
+        display: none;
+        visibility: hidden;
+
+        @media print {
+          display: inline-block;
+          visibility: visible;
+          font-weight: 200;
+          color: $gray-100;
+
+          span {
+            font-weight: 600;
+            margin-left: calc(-1 * #{$spacing-02});
+            margin-right: $spacing-02;
+          }
+        }
+      }
+    }
+
+    .#{$prefix}--btn--multiline {
+      align-items: start;
+    }
+  }
+
+  :host(#{$c4d-prefix}-button-group),
+  :host(#{$c4d-prefix}-leadspace-block-cta) {
+    --#{$c4d-prefix}--button-group--item-count: 3;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-auto-rows: 1fr;
+    grid-gap: $spacing-05;
+
+    @include breakpoint(md) {
+      display: inline-grid;
+      grid-template-columns: repeat(
+        var(--#{$c4d-prefix}--button-group--item-count),
+        1fr
+      );
+    }
+
+    @media print {
+      display: block;
+    }
+  }
+
+  :host(#{$c4d-prefix}-button-group-item) {
+    ::slotted([slot='icon']) {
+      @media print {
+        fill: $gray-100;
+      }
+    }
+  }
+}
diff --git a/packages/styles/scss/components/button-group/_index.scss b/packages/styles/scss/components/button-group/_index.scss
new file mode 100644
index 00000000000..edd645aa79e
--- /dev/null
+++ b/packages/styles/scss/components/button-group/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'button-group';
+@use 'button-group';
+
+@include button-group.button-group;
diff --git a/packages/styles/scss/components/button/_button.scss b/packages/styles/scss/components/button/_button.scss
new file mode 100644
index 00000000000..ae58e08f831
--- /dev/null
+++ b/packages/styles/scss/components/button/_button.scss
@@ -0,0 +1,40 @@
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../../../carbon-web-components/src/components/button/button';
+
+@mixin button {
+  :host(#{$c4d-prefix}-button) {
+    @extend :host(#{$prefix}-button);
+
+    svg {
+      @extend .#{$prefix}--btn__icon;
+    }
+
+    .#{$prefix}--btn--hidden {
+      display: none;
+      visibility: hidden;
+
+      @media print {
+        display: inline-block;
+        visibility: visible;
+        font-weight: 200;
+        color: $text-primary;
+
+        span {
+          font-weight: 600;
+          margin-left: calc(-1 * #{$spacing-02});
+          margin-right: $spacing-02;
+        }
+      }
+    }
+  }
+}
diff --git a/packages/styles/scss/components/button/_index.scss b/packages/styles/scss/components/button/_index.scss
new file mode 100644
index 00000000000..5cd90905d56
--- /dev/null
+++ b/packages/styles/scss/components/button/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 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.
+//
+
+@forward 'button';
+@use 'button';
+
+@include button.button;
diff --git a/packages/styles/scss/components/buttongroup/_buttongroup.scss b/packages/styles/scss/components/buttongroup/_buttongroup.scss
deleted file mode 100644
index 704661ea815..00000000000
--- a/packages/styles/scss/components/buttongroup/_buttongroup.scss
+++ /dev/null
@@ -1,125 +0,0 @@
-/**
-* Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import 'carbon-components/scss/components/button/button';
-@import '../lightbox-media-viewer/lightbox-media-viewer';
-
-@mixin buttongroup {
-  @include button;
-
-  .#{$prefix}--buttongroup,
-  :host(#{$dds-prefix}-button-group),
-  :host(#{$dds-prefix}-leadspace-block-cta) {
-    --#{$dds-prefix}--button-group--item-count: 3;
-
-    display: grid;
-    grid-template-columns: 1fr;
-    grid-auto-rows: 1fr;
-    grid-gap: $carbon--layout-01;
-
-    @include carbon--breakpoint(md) {
-      display: inline-grid;
-      grid-template-columns: repeat(
-        var(--#{$dds-prefix}--button-group--item-count),
-        1fr
-      );
-    }
-
-    @media print {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--buttongroup-item,
-  :host(#{$dds-prefix}-button-group-item),
-  :host(#{$dds-prefix}-button-cta) {
-    max-width: 100%;
-    min-width: 0;
-
-    @media print {
-      max-width: 100%;
-      margin-bottom: $spacing-05;
-      display: block;
-    }
-
-    .#{$prefix}--btn {
-      font-size: 1rem;
-      position: relative;
-      width: 100%;
-      height: 100%;
-      word-break: break-word;
-      transition: all $duration--fast-01 motion(entrance, productive), width 0s,
-        height 0s;
-      max-width: 100%;
-
-      @media print {
-        background: $white-0;
-        border: rem(1px) solid $gray-100;
-        color: $gray-100;
-        font-weight: 600;
-        display: block;
-        max-width: inherit;
-      }
-
-      .#{$prefix}--btn__icon {
-        width: auto;
-        height: auto;
-      }
-
-      .#{$prefix}--btn--hidden {
-        display: none;
-        visibility: hidden;
-
-        @media print {
-          display: inline-block;
-          visibility: visible;
-          font-weight: 200;
-          color: $gray-100;
-
-          span {
-            font-weight: 600;
-            margin-left: calc(-1 * #{$spacing-02});
-            margin-right: $spacing-02;
-          }
-        }
-      }
-    }
-
-    .#{$prefix}--btn--multiline {
-      align-items: start;
-    }
-  }
-
-  :host(#{$dds-prefix}-button-group-item) {
-    ::slotted([slot='icon']) {
-      position: absolute;
-      right: 1rem;
-      top: 50%;
-      transform: translateY(-50%);
-      flex-shrink: 0;
-
-      @media print {
-        fill: $gray-100;
-      }
-    }
-  }
-
-  .#{$prefix}--buttongroup-item--pseudo {
-    position: absolute;
-    clip: rect(0, 0, 0, 0);
-
-    .#{$prefix}--btn {
-      width: auto;
-    }
-  }
-}
-
-@include exports('buttongroup') {
-  @include buttongroup;
-}
diff --git a/packages/styles/scss/components/callout-quote/_callout-quote.scss b/packages/styles/scss/components/callout-quote/_callout-quote.scss
new file mode 100644
index 00000000000..70b0af03be7
--- /dev/null
+++ b/packages/styles/scss/components/callout-quote/_callout-quote.scss
@@ -0,0 +1,100 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../internal/callout/callout' as *;
+@use '../quote/quote' as *;
+
+@include callout;
+@include quote;
+
+@mixin callout-quote {
+  :host(#{$c4d-prefix}-callout-quote) {
+    @extend :host(#{$c4d-prefix}-callout);
+    @extend :host(#{$c4d-prefix}-callout-text);
+    @include make-row;
+
+    @include breakpoint(md) {
+      @include hang;
+    }
+
+    padding-bottom: $spacing-10;
+
+    ::slotted(#{$c4d-prefix}-callout-link-with-icon) {
+      padding-left: $spacing-07;
+      outline: transparent;
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='inverse']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='layer']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='purple']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
+  }
+  :host(#{$c4d-prefix}-callout-quote[color-scheme='cyan']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
+  }
+
+  :host(#{$c4d-prefix}-callout-link-with-icon) {
+    @extend .#{$c4d-prefix}--link-with-icon !optional;
+
+    display: inline-block;
+    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
+      color: $link-primary;
+
+      &:hover {
+        color: $link-primary-hover;
+      }
+
+      &:active {
+        color: $link-primary;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-link-with-icon[color-scheme='inverse']) {
+    a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
+      color: $link-inverse;
+      outline-color: $focus-inverse;
+
+      &:hover {
+        // @carbon/styles has no hover color for $link-inverse.
+        color: $link-inverse;
+      }
+
+      &:active {
+        color: $link-inverse;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-callout-quote) #{$c4d-prefix}-hr {
+    margin: $spacing-05;
+    @include breakpoint(md) {
+      margin: $spacing-05 0;
+    }
+    @include breakpoint(lg) {
+      margin: $spacing-05 $spacing-03;
+    }
+  }
+}
diff --git a/packages/styles/scss/components/callout-quote/_index.scss b/packages/styles/scss/components/callout-quote/_index.scss
new file mode 100644
index 00000000000..81c8881f645
--- /dev/null
+++ b/packages/styles/scss/components/callout-quote/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'callout-quote';
+@use 'callout-quote';
+
+@include callout-quote.callout-quote;
diff --git a/packages/styles/scss/components/callout-quote/index.scss b/packages/styles/scss/components/callout-quote/index.scss
deleted file mode 100644
index 397f640e028..00000000000
--- a/packages/styles/scss/components/callout-quote/index.scss
+++ /dev/null
@@ -1,57 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../internal/callout/callout';
-@import '../quote/quote';
-@import '../../globals/utils/hang';
-
-@mixin callout-quote {
-  .#{$prefix}--callout-quote,
-  :host(#{$dds-prefix}-callout-quote) {
-    .#{$prefix}--quote {
-      background-color: $inverse-02;
-      .#{$prefix}--link {
-        color: $inverse-link;
-        outline-color: $inverse-focus-ui;
-        &:hover {
-          color: #a6c8ff;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--callout-quote .#{$prefix}--callout__container {
-    padding-left: 1rem;
-    padding-right: 1rem;
-
-    @include carbon--breakpoint('md') {
-      padding-left: 0;
-      padding-right: 0;
-    }
-  }
-
-  :host(#{$dds-prefix}-callout-quote) {
-    @extend .#{$prefix}--callout__container;
-
-    @include carbon--breakpoint('md') {
-      @include hang;
-    }
-
-    padding-bottom: $layout-05;
-
-    ::slotted(#{$dds-prefix}-callout-link-with-icon) {
-      padding-left: $spacing-07;
-      outline: transparent;
-    }
-  }
-}
-
-@include exports('callout-quote') {
-  @include callout-quote;
-}
diff --git a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
index 3eeaf898739..9e910169974 100644
--- a/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
+++ b/packages/styles/scss/components/callout-with-media/_callout-with-media.scss
@@ -5,100 +5,178 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/imports';
-@import '../../globals/vars';
-@import '../../internal/callout/callout';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/callout/callout' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-item/content-item';
+@use '../image';
+@use '../content-block-simple/content-block-simple';
+
+@include callout;
 
 @mixin callout-with-media {
-  :host(#{$dds-prefix}-callout-with-media),
-  .#{$prefix}--callout-with-media {
-    display: block;
-    background-color: $inverse-02;
+  :host(#{$c4d-prefix}-callout-with-media) {
+    @extend :host(#{$c4d-prefix}-callout);
 
-    ::slotted([slot='heading']),
-    .#{$prefix}--content-block__heading {
+    display: flex;
+
+    ::slotted([slot='heading']) {
       margin-bottom: $spacing-07;
+      margin-left: 0;
     }
 
     ::slotted([slot='copy']) {
-      margin-bottom: $spacing-07;
-      color: $inverse-01;
+      margin-bottom: $spacing-05;
+      margin-left: 0;
+    }
+
+    ::slotted([slot='media']) {
+      margin: 0 0 $spacing-07;
     }
   }
 
-  :host(#{$dds-prefix}-callout-with-media) ::slotted([slot='heading']),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
-  :host(#{$dds-prefix}-callout-with-media-copy)
-    ::slotted(#{$dds-prefix}-content-block-paragraph),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-item__copy p,
-  :host(#{$dds-prefix}-callout-with-media-image) .#{$prefix}--image__caption,
-  :host(#{$dds-prefix}-callout-with-media-video)
-    ::slotted(#{$dds-prefix}-video-player),
-  .#{$prefix}--callout-with-media .#{$prefix}--video-player__video-caption,
-  .#{$prefix}--callout-with-media .#{$prefix}--image__caption {
-    color: $inverse-01;
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan']) {
+    @extend :host(#{$c4d-prefix}-callout[color-scheme='cyan']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy)
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='inverse'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='inverse'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='layer'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='layer'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='purple'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='purple'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media[color-scheme='cyan'])
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media-copy[color-scheme='cyan'])
+    ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @extend :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']);
   }
 
-  :host(#{$dds-prefix}-callout-with-media) ::slotted([slot='heading']),
-  .#{$prefix}--callout-with-media .#{$prefix}--content-block__heading,
-  :host(#{$dds-prefix}-callout-with-media) ::slotted([slot='copy']),
-  .#{$prefix}--callout-with-media .#{$prefix}--callout-with-media-copy {
+  :host(#{$c4d-prefix}-callout-with-media-image)
+    .#{$c4d-prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video)
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='inverse'])
+    .#{$c4d-prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='inverse'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='layer'])
+    .#{$c4d-prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='layer'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='purple'])
+    .#{$c4d-prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='purple'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media-image[color-scheme='cyan'])
+    .#{$c4d-prefix}--image__caption,
+  :host(#{$c4d-prefix}-callout-with-media-video[color-scheme='cyan'])
+    ::slotted(#{$c4d-prefix}-video-player) {
+    @extend :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']);
+  }
+
+  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-callout-with-media) ::slotted([slot='copy']) {
     padding-right: $spacing-07;
-    max-width: rem(640px);
+    max-width: to-rem(640px);
     width: auto;
   }
 
-  .#{$prefix}--callout-with-media .#{$prefix}--callout__content {
-    padding-top: 0;
-  }
-  :host(#{$dds-prefix}-callout-with-media-video),
+  :host(#{$c4d-prefix}-callout-with-media-video),
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
     .#{$prefix}--content-block-simple__media-video {
     margin-top: 0;
 
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       margin-top: -16px;
     }
   }
 
-  :host(#{$dds-prefix}-callout-with-media-image),
+  :host(#{$c4d-prefix}-callout-with-media-image),
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
     .#{$prefix}--content-block-simple__media-image {
     margin-top: $spacing-07;
 
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       margin-top: 0;
     }
   }
 
-  :host(#{$dds-prefix}-callout-with-media) .#{$prefix}--callout__content,
+  :host(#{$c4d-prefix}-callout-with-media) .#{$prefix}--callout__content,
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
     .#{$prefix}--content-block {
-    padding-bottom: $layout-05;
+    padding-bottom: $spacing-10;
   }
 
-  :host(#{$dds-prefix}-callout-with-media-image),
+  :host(#{$c4d-prefix}-callout-with-media-image),
   .#{$prefix}--callout-with-media
     .#{$prefix}--callout__content
     .#{$prefix}--content-block {
     .#{$prefix}--image__caption {
-      @include carbon--type-style('caption-02');
+      @include type-style('caption-02');
 
-      margin-top: $carbon--spacing-03;
+      margin-top: $spacing-03;
     }
     .#{$prefix}--video-player__video-caption {
       padding-top: $spacing-03;
     }
   }
 
-  :host(#{$dds-prefix}-callout-with-media-image) .#{$prefix}--image__img {
+  :host(#{$c4d-prefix}-callout-with-media-image) .#{$prefix}--image__img {
     max-width: 100%;
   }
 }
-@include exports('callout-with-media') {
-  @include callout-with-media;
-}
diff --git a/packages/styles/scss/components/callout-with-media/_index.scss b/packages/styles/scss/components/callout-with-media/_index.scss
new file mode 100644
index 00000000000..aeb71a0bd91
--- /dev/null
+++ b/packages/styles/scss/components/callout-with-media/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'callout-with-media';
+@use 'callout-with-media';
+
+@include callout-with-media.callout-with-media;
diff --git a/packages/styles/scss/components/callout-with-media/index.scss b/packages/styles/scss/components/callout-with-media/index.scss
deleted file mode 100644
index eec03031cab..00000000000
--- a/packages/styles/scss/components/callout-with-media/index.scss
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 '../../globals/imports';
-@import '../../internal/callout/callout';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-item/content-item';
-@import '../image/image';
-@import '../image-with-caption/image-with-caption';
-@import '../content-block-simple/content-block-simple';
-@import './callout-with-media';
diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
index cd67e1bf3d2..f6d26ae6b23 100644
--- a/packages/styles/scss/components/card-group/_card-group.scss
+++ b/packages/styles/scss/components/card-group/_card-group.scss
@@ -1,58 +1,66 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/ratio-base';
-@import '../../internal/content-section/content-section';
-@import '../card/index';
-@import '../image/image';
-@import '../link-with-icon/link-with-icon';
-
-@mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
-  .#{$prefix}--card__heading {
-    color: $text-01;
-  }
-  .#{$prefix}--card__copy,
-  .#{$prefix}--card__eyebrow {
-    color: $text-02;
-  }
-  .#{$prefix}--card--inverse {
-    background-color: $inverse-02;
-    height: 100%;
+@use 'sass:math';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/ratio-base' as *;
+@use '../../internal/content-section';
+@use '../card';
+@use '../image';
+@use '../link-with-icon';
 
-    .#{$prefix}--card__heading {
-      color: $inverse-01;
-    }
+@mixin card-group {
+  :host(#{$c4d-prefix}-card-group) {
+    --#{$c4d-prefix}--card-group--cards-in-row: 1;
+
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 1px;
+    background: none;
 
-    &.#{$prefix}--card--link:hover {
-      background-color: $inverse-hover-ui;
+    @include breakpoint(md) {
+      grid-template-columns: repeat(2, 1fr);
     }
-    .#{$prefix}--card__cta,
-    .#{$prefix}--card__cta a,
-    .#{$prefix}--card__cta a:visited {
-      color: $inverse-link;
+
+    @include breakpoint(lg) {
+      grid-template-columns: repeat(
+        var(--#{$c4d-prefix}--card-group--cards-in-row),
+        1fr
+      );
     }
   }
-}
 
-@mixin card-group {
-  :host(#{$dds-prefix}-card-group),
-  .#{$prefix}--card-group {
-    @include themed-items;
+  :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode]) {
+    padding-top: 0;
+    padding-left: 1px;
+    padding-right: 1px;
+  }
+
+  :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode='default']) {
+    padding-top: $spacing-07;
   }
 
-  :host(#{$dds-prefix}-card-group-item),
-  .#{$prefix}--card-group__card {
-    // FIXME: CardLink is being used as Card in React, need to separate this
-    .#{$prefix}--card-link .#{$prefix}--card__heading {
-      @include carbon--type-style('expressive-heading-03', true);
+  :host(#{$c4d-prefix}-card-group[with-card-in-card][grid-mode='narrow']) {
+    padding-top: $spacing-05;
+  }
+
+  :host(#{$c4d-prefix}-card-group-item) {
+    .#{$prefix}--card {
+      border: 0;
+      outline: 1px solid $border-tile-01;
+      outline-offset: 0;
     }
 
     .#{$prefix}--image {
@@ -60,7 +68,7 @@
         height: carbon--mini-units(30);
       }
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         @include ratio-base(4, 3, true);
 
         &__img {
@@ -73,183 +81,71 @@
 
     &:focus,
     &:focus-within {
-      outline: none;
-    }
-  }
-
-  // FIXME: WC only override
-  :host(#{$dds-prefix}-card-group-item)
-    .#{$prefix}--card-link
-    .#{$prefix}--card__heading {
-    @include carbon--type-style('expressive-heading-02', true);
-  }
-
-  :host(#{$dds-prefix}-card-group-item),
-  :host(#{$dds-prefix}-card-group-card-link-item) {
-    padding-bottom: 1px;
-    padding-right: 1px;
-
-    &[border] {
-      border: none;
-    }
-
-    &[empty] {
-      display: none;
-      background-color: $ui-background;
-      outline: 1px solid $ui-background;
-
-      @include carbon--breakpoint('md') {
-        display: block;
-      }
-
-      .#{$prefix}--card__wrapper {
-        height: 100%;
-      }
-
-      .#{$prefix}--card,
-      .#{$prefix}--card__wrapper,
-      &:hover .#{$prefix}--card__wrapper {
-        background: transparent;
-      }
-
-      &[border],
-      &[border]:hover {
-        .#{$prefix}--card__wrapper {
-          background: $ui-background;
-        }
-      }
-    }
-
-    &[pattern-background] {
       .#{$prefix}--card {
-        border-bottom: 1px solid $ui-03;
-      }
-
-      .#{$prefix}--card,
-      .#{$prefix}--card__wrapper {
-        background: $ui-background;
+        outline-offset: -1px;
       }
     }
   }
 
-  // React card focus outline
-  .#{$prefix}--card-group__card {
-    &:focus-within {
+  :host(#{$c4d-prefix}-card-group-item[href='']) {
+    .#{$prefix}--card {
       outline: none;
-      position: relative;
-
-      &::after {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        outline: 2px solid $focus;
-        outline-offset: -2px;
-        pointer-events: none;
-      }
-
-      .#{$prefix}--card__img {
-        position: absolute;
-        z-index: auto;
-      }
-
-      .#{$prefix}--tile {
-        outline: none;
-      }
     }
   }
 
-  :host(#{$dds-prefix}-card-group),
-  .#{$prefix}--card-group__row,
-  .#{$prefix}--card-group__cards__row {
-    --#{$dds-prefix}--card-group--cards-in-row: 1;
-
-    display: grid;
-    grid-template-columns: 1fr;
+  :host(#{$c4d-prefix}-card-group-item[empty]) {
+    visibility: hidden;
+  }
 
-    @include carbon--breakpoint('md') {
-      grid-template-columns: repeat(2, 1fr);
-    }
+  :host(#{$c4d-prefix}-card-group-item[link]) {
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      @include type-style('heading-02');
 
-    @include carbon--breakpoint('lg') {
-      grid-template-columns: repeat(
-        var(--#{$dds-prefix}--card-group--cards-in-row),
-        1fr
-      );
+      margin-bottom: 0;
     }
-  }
 
-  .#{$prefix}--card-group__cards__row {
-    // `@include carbon--make-row()` has negative margin adjustment assuming that it's placed in Carbon grid.
-    // Such adjustment has adverse effect when card group is placed in non-Carbon-grid,
-    // but keeps it for React for backward-compatibility reason.
-    margin-left: calc(-1 * #{$carbon--grid-gutter} / 2);
-    margin-right: calc(-1 * #{$carbon--grid-gutter} / 2);
-
-    position: relative;
-    &::after {
-      content: '';
-      display: block;
-      width: 100%;
-      height: 100%;
-      position: absolute;
-      left: 0;
-      top: 0;
-      pointer-events: none;
-      box-shadow: inset 0 0 0 1px $ui-background;
+    .#{$prefix}--card .#{$prefix}--card__copy {
+      margin-top: 0;
     }
   }
 
-  .#{$prefix}--card-group__cards__col {
-    padding: 0;
-    background: $decorative-01;
-
-    border-right: 1px solid $decorative-01;
-    border-top: 1px solid $decorative-01;
-
-    &:last-of-type {
-      border-right: 0;
-      width: calc(100% - 1px);
+  :host(#{$c4d-prefix}-card-group)[grid-mode='narrow'] {
+    @include breakpoint(sm) {
+      padding-top: $spacing-03;
+      gap: $spacing-03;
     }
 
-    .#{$prefix}--card--inverse {
-      height: 100%;
+    @include breakpoint(md) {
+      padding-top: $spacing-05;
+      gap: $spacing-05;
     }
   }
 
-  // Add Grid Mode Narrow (16px gutter) style.
-  :host(#{$dds-prefix}-card-group)[grid-mode='narrow'],
-  .#{$prefix}--card-group--narrow {
-    @include carbon--breakpoint('sm') {
-      padding-top: $carbon--spacing-03;
-      gap: $carbon--spacing-03;
+  :host(#{$c4d-prefix}-card-group)[grid-mode='default'] {
+    @include breakpoint(sm) {
+      padding-top: $spacing-03;
+      gap: $spacing-07;
     }
 
-    @include carbon--breakpoint('md') {
-      padding-top: $carbon--spacing-05;
-      gap: $carbon--spacing-05;
+    @include breakpoint(md) {
+      padding-top: $spacing-05;
+      gap: $spacing-07;
     }
+  }
 
-    @include carbon--breakpoint('lg') {
-      grid-template-columns: repeat(
-        3,
-        calc((100% / 3) - #{carbon--mini-units(2)})
-      );
+  :host(#{$c4d-prefix}-card-group)[grid-mode='condensed'] {
+    @include breakpoint(sm) {
+      padding-top: $spacing-03;
+      gap: 1px;
     }
 
-    ::slotted(#{$dds-prefix}-card-group-item),
-    ::slotted(#{$dds-prefix}-card-group-card-link-item),
-    .#{$prefix}--card-group__cards__col {
-      border: 0;
-      padding: 0;
+    @include breakpoint(md) {
+      padding-top: $spacing-05;
     }
   }
 
   // card with video focus outline
-  :host(#{$dds-prefix}-card-group-item)[cta-type='video'] {
+  :host(#{$c4d-prefix}-card-group-item)[cta-type='video'] {
     &:focus-within {
       .#{$prefix}--tile {
         outline: none;
@@ -263,118 +159,22 @@
           left: 0;
           bottom: 0;
           right: 0;
-          box-shadow: inset 0 0 0 2px $focus;
+          box-shadow: inset 0 0 0 $spacing-01 $focus;
           pointer-events: none;
         }
       }
     }
   }
 
-  .#{$prefix}--card-group--border {
-    &::after {
-      content: none;
-      box-shadow: none;
-    }
-
-    .#{$prefix}--card-group__cards__col {
-      padding: 0;
-      border: 1px solid $decorative-01;
-      border-bottom: 0;
-    }
-
-    .#{$prefix}--card-group__cards__col:last-of-type {
-      border-bottom: 1px solid $decorative-01;
-      padding-right: 0;
-    }
-
-    @include carbon--breakpoint('md') {
-      .#{$prefix}--card-group__cards__col {
-        border-bottom: 0;
-        border-right: 0;
-      }
-
-      .#{$prefix}--card-group__cards__col:nth-child(2n),
-      .#{$prefix}--card-group__cards__col:last-of-type {
-        border-right: 1px solid $decorative-01;
-      }
-
-      .#{$prefix}--card-group__cards__col:last-of-type:not(:nth-child(2n)) {
-        width: calc(100% + 1px);
-      }
-
-      .#{$prefix}--card-group__cards__col:nth-last-of-type(-n + 2) {
-        border-bottom: 1px solid $decorative-01;
-        height: calc(100% + 1px);
-      }
-    }
-
-    @include carbon--breakpoint('lg') {
-      .#{$prefix}--card-group__cards__col:nth-child(2n),
-      .#{$prefix}--card-group__cards__col:nth-last-of-type(-n + 2) {
-        border-bottom: 0;
-        border-right: 0;
-        height: auto;
-      }
-
-      .#{$prefix}--card-group__cards__col:nth-child(3n),
-      .#{$prefix}--card-group__cards__col:last-of-type {
-        border-right: 1px solid $decorative-01;
-        width: calc(100% + 1px);
-      }
-
-      .#{$prefix}--card-group__cards__col:nth-last-of-type(-n + 3) {
-        border-bottom: 1px solid $decorative-01;
-        height: calc(100% + 1px);
-      }
-
-      .#{$prefix}--card-group__cards__col:last-of-type:not(:nth-child(3n)) {
-        width: calc(100% + 1px);
-      }
-    }
-  }
-
-  .#{$prefix}--card-group__cards__col .#{$prefix}--card-group__card {
-    // React version of card group has `.bx--card-group__cards__col` surrounding `.bx--card-group__card`.
-    // Ensures that the former takes the whole height of card regardless of how high the card group row ends up with.
-    height: 100%;
-  }
-
-  .#{$prefix}--card-group.#{$prefix}--card-group--g10 {
-    @include carbon--theme(
-      $carbon--theme--g10,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-  .#{$prefix}--card-group.#{$prefix}--card-group--g90 {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-  .#{$prefix}--card-group.#{$prefix}--card-group--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
   // Print styles
   @media print {
-    :host(#{$dds-prefix}-card-group),
-    .#{$prefix}--card-group__row,
-    .#{$prefix}--card-group__cards__row {
+    :host(#{$c4d-prefix}-card-group) {
       display: flex;
       flex-wrap: nowrap;
 
-      ::slotted(#{$dds-prefix}-card-group-item),
-      ::slotted(#{$dds-prefix}-card-group-card-link-item),
-      .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-group-item),
+      ::slotted(#{$c4d-prefix}-card-group-card-link-item),
+      .#{$c4d-prefix}--card {
         /* stylelint-disable declaration-no-important */
         // need important since it gets overriden in WC Card Group without it
         background-color: transparent !important;
@@ -385,12 +185,12 @@
       }
     }
 
-    :host(#{$dds-prefix}-card-group-item),
-    :host(#{$dds-prefix}-card-group-card-link-item) {
+    :host(#{$c4d-prefix}-card-group-item),
+    :host(#{$c4d-prefix}-card-group-card-link-item) {
       background-color: transparent;
 
       &[empty] {
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           /* stylelint-disable declaration-no-important */
           // need important since it gets overriden in WC Card Group without it
           display: none !important;
@@ -400,12 +200,8 @@
 
       .#{$prefix}--tile {
         background-color: transparent;
-        border: 1px solid $gray-20;
+        border: 1px solid $border-subtle-01;
       }
     }
   }
 }
-
-@include exports('card-group') {
-  @include card-group;
-}
diff --git a/packages/styles/scss/components/card-group/_index.scss b/packages/styles/scss/components/card-group/_index.scss
new file mode 100644
index 00000000000..148f787998d
--- /dev/null
+++ b/packages/styles/scss/components/card-group/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'card-group';
+@use 'card-group';
+
+@include card-group.card-group;
diff --git a/packages/styles/scss/components/card-in-card/README.md b/packages/styles/scss/components/card-in-card/README.md
deleted file mode 100644
index 086e31462fd..00000000000
--- a/packages/styles/scss/components/card-in-card/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/card-in-card/card-in-card';
-```
-
-#### Elements
-
-| Class                          | Description                                      |
-| ------------------------------ | ------------------------------------------------ |
-| `.bx--card-in-card__card`      | Card element within the CardInCard pattern       |
-| `.bx--card-in-card__container` | Parent container class of the CardInCard pattern |
-
-#### Blocks
-
-| Class               | Description                                         |
-| ------------------- | --------------------------------------------------- |
-| `.bx--card-in-card` | Highest level class name for the CardInCard pattern |
diff --git a/packages/styles/scss/components/card-in-card/_card-in-card.scss b/packages/styles/scss/components/card-in-card/_card-in-card.scss
index 2cba5119ac7..8ed855334b2 100644
--- a/packages/styles/scss/components/card-in-card/_card-in-card.scss
+++ b/packages/styles/scss/components/card-in-card/_card-in-card.scss
@@ -1,69 +1,86 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/aspect-ratio';
-@import '../../globals/utils/ratio-base';
-@import '../image/image';
-@import '../card/index';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/aspect-ratio';
+@use '../../globals/utils/ratio-base' as *;
+@use '../image';
+@use '../card';
+@use './tokens' as *;
 
 @mixin card-in-card {
-  :host(#{$dds-prefix}-card-in-card),
-  .#{$prefix}--card-in-card {
+  :host(#{$c4d-prefix}-card-in-card) {
     height: auto;
 
-    &:focus-within {
-      z-index: 0;
-      outline: 2px solid $focus;
-      outline-offset: -2px;
-    }
-
     .#{$prefix}--card:focus-within {
-      z-index: -1;
+      outline: none;
+      border-color: $background;
+
+      &::before {
+        content: '';
+        display: block;
+        position: absolute;
+        z-index: 1;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        border: $spacing-01 solid $focus;
+        outline: 1px solid $focus-inset;
+        outline-offset: -3px;
+      }
     }
 
     &:hover {
-      ::slotted([slot='image']),
-      #{$dds-prefix}-card-in-card-image {
-        &::before {
-          opacity: 0.2;
-        }
+      cursor: pointer;
+
+      &::after {
+        content: '';
+        opacity: 0.08;
+        background: $card-background;
+        position: absolute;
+        width: 100%;
+        height: 100%;
       }
     }
 
     .#{$prefix}--card-in-card__container {
-      color: $text-01;
-      background: $ui-background;
+      color: $text-primary;
+      background: $background;
       position: relative;
     }
 
     .#{$prefix}--card__wrapper {
-      background-color: $ui-01;
+      background-color: $layer-01;
       height: auto;
-      padding: $carbon--spacing-05;
+      padding: $spacing-05;
+      border-left: 1px solid $border-tile;
+      border-top: 1px solid $border-tile;
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         width: 50%;
         position: absolute;
         bottom: 0;
         right: 0;
       }
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         width: 33.33%;
       }
 
-      .#{$prefix}--card__eyebrow,
-      .#{$prefix}--card__heading,
-      ::slotted(#{$dds-prefix}-card-eyebrow),
-      ::slotted(#{$dds-prefix}-card-heading) {
-        @include carbon--breakpoint('md') {
+      ::slotted(#{$c4d-prefix}-card-eyebrow),
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        @include breakpoint(md) {
           width: 90%;
         }
       }
@@ -72,35 +89,35 @@
         padding: 0;
       }
 
-      .#{$prefix}--card__eyebrow,
-      ::slotted(#{$dds-prefix}-card-eyebrow) {
-        margin-bottom: $carbon--spacing-03;
-        color: $text-02;
+      ::slotted(#{$c4d-prefix}-card-eyebrow) {
+        margin-bottom: $spacing-02;
+        color: $text-secondary;
       }
     }
   }
 
-  :host(#{$dds-prefix}-card-in-card-image) {
+  :host(#{$c4d-prefix}-card-in-card-image) {
     @extend .#{$prefix}--image;
 
+    display: block;
     position: relative;
     z-index: 0;
 
     @include ratio-base(4, 3, true);
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       @include ratio-base(16, 9, true);
     }
 
     ::slotted(svg[slot='icon']) {
-      @extend .#{$prefix}--image__icon;
+      @extend :host(#{$c4d-prefix}-image::slotted(svg[slot='icon']));
 
-      @include carbon--breakpoint('md') {
-        right: calc(75% - #{$carbon--spacing-07});
+      @include breakpoint(md) {
+        right: calc(75% - #{$spacing-07});
       }
 
-      @include carbon--breakpoint('lg') {
-        right: calc(50% - #{$carbon--spacing-04});
+      @include breakpoint(lg) {
+        right: calc(50% - #{$spacing-04});
       }
     }
 
@@ -113,12 +130,11 @@
       left: 0;
       opacity: 0;
       z-index: 1;
-      background-color: $inverse-02;
-      transition: opacity $duration--moderate-01
-        motion('standard', 'productive');
+      background-color: $background-inverse;
+      transition: opacity $duration-moderate-01 motion('standard', 'productive');
     }
 
-    .#{$prefix}--image__img {
+    .#{$c4d-prefix}--image__img {
       position: absolute;
       height: 100%;
       top: 0;
@@ -126,27 +142,35 @@
   }
 
   // Adjust the card width when grid mode is equal to "narrow".
-  :host(#{$dds-prefix}-card-in-card)[grid-mode='narrow'],
+  :host(#{$c4d-prefix}-card-in-card)[grid-mode='narrow'],
   .#{$prefix}--card-in-card--narrow {
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       width: calc(100% - #{carbon--mini-units(2)});
     }
 
     .#{$prefix}--card__wrapper {
-      @include carbon--breakpoint('md') {
-        width: calc(50% - #{$carbon--spacing-04});
+      @include breakpoint(md) {
+        width: calc(50% - #{$spacing-04} + #{to-rem(5px)});
       }
 
-      @include carbon--breakpoint('lg') {
-        width: calc(33.33% - #{$carbon--spacing-04});
+      @include breakpoint(lg) {
+        width: calc(33.33% - #{$spacing-04} + #{to-rem(2px)});
       }
     }
   }
 
-  // Add a $ui-03 border line color when the grid mode is equal "collapsed".
-  :host(#{$dds-prefix}-card-in-card)[grid-mode='collapsed'],
+  // Add a $layer-accent-01 border line color when the grid mode is equal "collapsed".
+  :host(#{$c4d-prefix}-card-in-card)[grid-mode='default'],
   .#{$prefix}--card-in-card--narrow {
     .#{$prefix}--card__wrapper {
+      @include breakpoint(md) {
+        width: calc(50% - #{$spacing-05} + #{to-rem(1px)});
+      }
+
+      @include breakpoint(lg) {
+        width: calc(33.33% - #{to-rem(20.5px)});
+      }
+
       &::after {
         content: '';
         display: block;
@@ -157,12 +181,8 @@
         bottom: -1px;
         pointer-events: none;
         z-index: 1;
-        background-color: $ui-03;
+        background-color: $layer-accent-01;
       }
     }
   }
 }
-
-@include exports('card-in-card') {
-  @include card-in-card;
-}
diff --git a/packages/styles/scss/components/card-in-card/_index.scss b/packages/styles/scss/components/card-in-card/_index.scss
new file mode 100644
index 00000000000..e48c77f5d8d
--- /dev/null
+++ b/packages/styles/scss/components/card-in-card/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'card-in-card';
+@use 'card-in-card';
+
+@include card-in-card.card-in-card;
diff --git a/packages/styles/scss/components/card-in-card/_tokens.scss b/packages/styles/scss/components/card-in-card/_tokens.scss
new file mode 100644
index 00000000000..12087b343cc
--- /dev/null
+++ b/packages/styles/scss/components/card-in-card/_tokens.scss
@@ -0,0 +1,39 @@
+//
+// Copyright IBM Corp. 2020
+//
+// 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 '@carbon/colors' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/component-tokens';
+
+$card-background: (
+  fallback: $black,
+  values: (
+    (
+      theme: themes.$white,
+      value: $black,
+    ),
+    (
+      theme: themes.$g10,
+      value: $black,
+    ),
+    (
+      theme: themes.$g90,
+      value: $white,
+    ),
+    (
+      theme: themes.$g100,
+      value: $white,
+    ),
+  ),
+);
+
+$card-in-card-tokens: (
+  card-background: $card-background,
+);
+
+$card-background: component-tokens.get-var($card-background, 'card-background');
diff --git a/packages/styles/scss/components/card-link/_card-link.scss b/packages/styles/scss/components/card-link/_card-link.scss
index 5f93ae63693..e112e753baa 100644
--- a/packages/styles/scss/components/card-link/_card-link.scss
+++ b/packages/styles/scss/components/card-link/_card-link.scss
@@ -5,47 +5,46 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../card/index';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../card';
 
 @mixin card-link {
   .#{$prefix}--card__CTA--disabled {
     cursor: not-allowed;
   }
 
-  :host(#{$dds-prefix}-card-link[disabled]),
+  :host(#{$c4d-prefix}-card-link[disabled]),
   .#{$prefix}--card__CTA--disabled {
     .#{$prefix}--card__heading,
     ::slotted([slot='heading']),
     .#{$prefix}--card__copy,
     .#{$prefix}--card__eyebrow {
-      color: $disabled-02;
+      color: $text-disabled;
     }
     .#{$prefix}--card__footer,
     .#{$prefix}--card__wrapper {
       .#{$prefix}--link-with-icon {
         svg {
           margin-left: 0;
-          color: $disabled-02;
+          color: $text-disabled;
         }
       }
       ::slotted(svg[slot='footer']),
       svg {
-        fill: $disabled-02;
+        fill: $text-disabled;
       }
     }
   }
 
-  :host(#{$dds-prefix}-card-link-heading),
+  :host(#{$c4d-prefix}-card-link-heading),
   .#{$prefix}--card-link .#{$prefix}--card__heading {
-    @include carbon--type-style('expressive-heading-02');
+    @include type-style('heading-02');
   }
 
-  :host(#{$dds-prefix}-card-link-heading) {
+  :host(#{$c4d-prefix}-card-link-heading) {
     margin-bottom: 0;
   }
 }
-
-@include exports('card-link') {
-  @include card-link;
-}
diff --git a/packages/styles/scss/components/card-link/_index.scss b/packages/styles/scss/components/card-link/_index.scss
new file mode 100644
index 00000000000..4b0b7da8e4d
--- /dev/null
+++ b/packages/styles/scss/components/card-link/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'card-link';
+@use 'card-link';
+
+@include card-link.card-link;
diff --git a/packages/styles/scss/components/card-section-images/_card-section-images.scss b/packages/styles/scss/components/card-section-images/_card-section-images.scss
index 174b114eefb..491445903f5 100644
--- a/packages/styles/scss/components/card-section-images/_card-section-images.scss
+++ b/packages/styles/scss/components/card-section-images/_card-section-images.scss
@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../../internal/content-section/content-section';
-@import '../card-group/card-group';
+@use '../../globals/vars' as *;
+@use '../../internal/content-section/content-section';
+@use '../card-group/card-group';
diff --git a/packages/styles/scss/components/card-section-images/_index.scss b/packages/styles/scss/components/card-section-images/_index.scss
new file mode 100644
index 00000000000..0ba9ebfa82e
--- /dev/null
+++ b/packages/styles/scss/components/card-section-images/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward '../../internal/content-section';
+@use '../../internal/content-section';
+@forward '../card-group';
+@use '../card-group';
diff --git a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss
index f2df528d448..e4b0dc98328 100644
--- a/packages/styles/scss/components/card-section-offset/_card-section-offset.scss
+++ b/packages/styles/scss/components/card-section-offset/_card-section-offset.scss
@@ -1,18 +1,22 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../card-group/card-group';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../card-group/card-group';
 
 @mixin card-section-offset {
-  :host(#{$dds-prefix}-card-section-offset) {
+  :host(#{$c4d-prefix}-card-section-offset) {
     display: block;
     position: relative;
     width: 100%;
@@ -21,7 +25,7 @@
     /* stylelint-disable-next-line property-no-unknown */
     aspect-ratio: 16 / 9;
 
-    ::slotted(#{$dds-prefix}-background-media) {
+    ::slotted(#{$c4d-prefix}-background-media) {
       height: auto;
 
       /* stylelint-disable-next-line property-no-unknown */
@@ -29,15 +33,15 @@
     }
 
     /* remove when the `mobile-position` attribute is removed */
-    #{$dds-prefix}-background-media {
+    #{$c4d-prefix}-background-media {
       height: auto;
 
       /* stylelint-disable-next-line property-no-unknown */
       aspect-ratio: 4 / 3;
     }
 
-    @include carbon--breakpoint('md') {
-      ::slotted(#{$dds-prefix}-background-media) {
+    @include breakpoint(md) {
+      ::slotted(#{$c4d-prefix}-background-media) {
         top: 0;
         position: absolute;
         height: 100%;
@@ -48,7 +52,7 @@
       }
 
       /* remove when the `mobile-position` attribute is removed */
-      #{$dds-prefix}-background-media {
+      #{$c4d-prefix}-background-media {
         position: absolute;
         height: 100%;
         width: 100%;
@@ -58,20 +62,20 @@
       }
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       display: flex;
     }
 
-    ::slotted(:not(#{$dds-prefix}-background-media)) {
+    ::slotted(:not(#{$c4d-prefix}-background-media)) {
       z-index: 1;
     }
 
     ::slotted([slot='action']) {
       width: 90%;
-      max-width: rem(640px);
+      max-width: to-rem(640px);
 
-      @include carbon--breakpoint('md') {
-        width: calc(100% - var(--cds-spacing-07, 2rem));
+      @include breakpoint(md) {
+        width: calc(100% - $spacing-07);
       }
     }
 
@@ -81,7 +85,7 @@
       width: 100%;
       padding: $spacing-07 0 $spacing-10 $spacing-05;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         padding-bottom: 0;
       }
     }
@@ -93,7 +97,10 @@
       padding-top: 0;
       z-index: 1;
 
-      @include carbon--breakpoint('lg') {
+      top: -1px;
+      left: -1px;
+
+      @include breakpoint(lg) {
         padding-top: $spacing-07;
       }
     }
@@ -102,14 +109,14 @@
   // Print styles
   @media print {
     .#{$prefix}--card-section-offset__content,
-    :host(#{$dds-prefix}-card-section-offset) {
-      background-color: $white-0;
+    :host(#{$c4d-prefix}-card-section-offset) {
+      background-color: $background;
       flex-wrap: wrap;
 
       /* stylelint-disable-next-line property-no-unknown */
       aspect-ratio: auto;
 
-      #{$dds-prefix}-background-media {
+      #{$c4d-prefix}-background-media {
         display: none;
       }
 
@@ -118,10 +125,9 @@
       }
 
       ::slotted([slot='heading']) {
-        @include carbon--type-style('expressive-heading-05');
-
-        color: $gray-90;
-        margin-bottom: $carbon--spacing-03;
+        // @include type-style('fluid-heading-05');
+        color: $layer-01;
+        margin-bottom: $spacing-03;
       }
 
       ::slotted([slot='card-group']) {
@@ -130,7 +136,3 @@
     }
   }
 }
-
-@include exports('card-section-offset') {
-  @include card-section-offset;
-}
diff --git a/packages/styles/scss/components/card-section-offset/_index.scss b/packages/styles/scss/components/card-section-offset/_index.scss
new file mode 100644
index 00000000000..a166e4af8cf
--- /dev/null
+++ b/packages/styles/scss/components/card-section-offset/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'card-section-offset';
+@use 'card-section-offset';
+
+@include card-section-offset.card-section-offset;
diff --git a/packages/styles/scss/components/card-section-simple/_card-section-simple.scss b/packages/styles/scss/components/card-section-simple/_card-section-simple.scss
index 174b114eefb..491445903f5 100644
--- a/packages/styles/scss/components/card-section-simple/_card-section-simple.scss
+++ b/packages/styles/scss/components/card-section-simple/_card-section-simple.scss
@@ -5,6 +5,6 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../../internal/content-section/content-section';
-@import '../card-group/card-group';
+@use '../../globals/vars' as *;
+@use '../../internal/content-section/content-section';
+@use '../card-group/card-group';
diff --git a/packages/styles/scss/components/card-section-simple/_index.scss b/packages/styles/scss/components/card-section-simple/_index.scss
new file mode 100644
index 00000000000..6077c9d4c88
--- /dev/null
+++ b/packages/styles/scss/components/card-section-simple/_index.scss
@@ -0,0 +1,9 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'card-section-simple';
+@use 'card-section-simple';
diff --git a/packages/styles/scss/components/card/README.md b/packages/styles/scss/components/card/README.md
deleted file mode 100644
index 429ea72f785..00000000000
--- a/packages/styles/scss/components/card/README.md
+++ /dev/null
@@ -1,25 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-```
-
-#### Blocks
-
-| Class       | Description                                     |
-| ----------- | ----------------------------------------------- |
-| `.bx--card` | Highest level class name for the Card component |
-
-#### Elements
-
-| Class                | Description                               |
-| -------------------- | ----------------------------------------- |
-| `.bx--card__heading` | Title element within the Card component   |
-| `.bx--card__copy`    | Paragraph of text styling for Card        |
-| `.bx--card__footer`  | Footer aligned bottom with icon           |
-| `.bx--card__img`     | Image component within the Card component |
-| `.bx--card__wrapper` | Wrapper container for all Card content    |
diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
new file mode 100644
index 00000000000..2ba0ee5aaa7
--- /dev/null
+++ b/packages/styles/scss/components/card/_card.scss
@@ -0,0 +1,681 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/tag/index' as *;
+@use '@carbon/styles/scss/components/tile/index' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/content-width' as *;
+@use '../../globals/utils/ratio-base' as *;
+@use '../lightbox-media-viewer/lightbox-media-viewer';
+@use '../link-with-icon/link-with-icon';
+
+@mixin card {
+  .#{$prefix}--card,
+  :host(#{$c4d-prefix}-card),
+  :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card-in-card),
+  :host(#{$c4d-prefix}-card-group-item),
+  :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card,
+  :host(#{$c4d-prefix}-content-group-cards-item),
+  :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card {
+    @include tile($enable-experimental-tile-contrast: true);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background-color: $layer-01;
+    text-decoration: none;
+    padding: 0;
+    transition: $duration-moderate-01 motion(standard, productive);
+
+    &:focus-within {
+      .#{$prefix}--tile--clickable {
+        outline: $spacing-01 solid $focus;
+        outline-offset: -#{$spacing-01};
+        position: relative;
+        z-index: 2;
+      }
+
+      ::slotted(#{$c4d-prefix}-image),
+      ::slotted(#{$c4d-prefix}-card-cta-image),
+      .#{$prefix}--card__img,
+      .#{$prefix}--image {
+        z-index: -1;
+      }
+    }
+
+    &:focus,
+    &:visited,
+    &:active {
+      position: relative;
+      z-index: 2;
+      text-decoration: none;
+
+      ::slotted(#{$c4d-prefix}-image),
+      .#{$prefix}--image {
+        z-index: -1;
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-image),
+    ::slotted(#{$c4d-prefix}-card-cta-image) {
+      position: relative;
+
+      &::before {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: $border-inverse;
+        opacity: 0;
+        transition: $duration-moderate-01 motion(standard, productive);
+      }
+    }
+
+    &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
+      padding: 0;
+      transition: $duration-moderate-01 motion(standard, productive);
+
+      &:hover {
+        #{$c4d-prefix}-image,
+        ::slotted(#{$c4d-prefix}-image),
+        ::slotted(#{$c4d-prefix}-card-cta-image) {
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: $overlay;
+            opacity: 16%;
+          }
+        }
+      }
+    }
+
+    .#{$prefix}--card__wrapper {
+      display: flex;
+      flex: 1;
+      min-height: carbon--mini-units(20);
+      justify-content: space-between;
+      transition: $duration-moderate-01 motion(standard, productive);
+
+      @include ratio-base(2, 1, false);
+    }
+
+    .#{$prefix}--card__content {
+      display: flex;
+      flex-direction: column;
+      padding: $spacing-05;
+      width: 100%;
+    }
+
+    .#{$prefix}--card__heading {
+      @include type-style('fluid-heading-03', true);
+
+      margin-bottom: $spacing-10;
+    }
+
+    .#{$prefix}--card__heading,
+    .#{$prefix}--card__copy {
+      @include content-width;
+
+      color: $text-primary;
+    }
+
+    .#{$prefix}--card__copy:not([hidden]) {
+      @include type-style('body-02');
+
+      margin-bottom: $spacing-07;
+    }
+
+    .#{$prefix}--card__img {
+      transition: $duration-moderate-01 motion(standard, productive);
+    }
+  }
+
+  // Card with pictogram placement style
+  :host(#{$c4d-prefix}-card-group-item),
+  :host(#{$c4d-prefix}-card-in-card),
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card) {
+    outline: none;
+
+    .#{$prefix}--card__pictogram {
+      display: flex;
+
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: $spacing-07;
+        margin-bottom: 0;
+
+        @include breakpoint(md) {
+          padding-left: 0;
+          flex: 1;
+          display: flex;
+        }
+      }
+    }
+
+    &[pictogram] .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: 0;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-left: 0;
+      }
+
+      .#{$prefix}--card__content {
+        position: relative;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+        margin-bottom: 0;
+
+        &[hidden] {
+          margin: 0;
+        }
+      }
+
+      svg {
+        position: absolute;
+        right: $spacing-05;
+        bottom: $spacing-05;
+        color: $link-primary;
+      }
+    }
+
+    &[pictogram] {
+      &[pictogram-placement='top'] .#{$prefix}--card {
+        ::slotted(#{$c4d-prefix}-card-heading) {
+          align-items: flex-end;
+          margin-bottom: 0;
+          margin-top: auto;
+        }
+
+        .#{$prefix}--card__copy {
+          margin-top: $spacing-07;
+        }
+
+        ::slotted(svg[slot='pictogram']) {
+          margin-bottom: $spacing-07;
+        }
+      }
+
+      &[pictogram-placement='bottom'] .#{$prefix}--card {
+        ::slotted(#{$c4d-prefix}-card-heading) {
+          align-items: flex-start;
+        }
+
+        .#{$prefix}--card__copy {
+          margin-bottom: $spacing-07;
+        }
+
+        ::slotted(svg[slot='pictogram']) {
+          margin-top: auto;
+          align-items: flex-end;
+        }
+      }
+    }
+
+    ::slotted(svg[slot='pictogram']) {
+      fill: currentColor;
+      @include breakpoint(md) {
+        margin-left: 0;
+      }
+      @include breakpoint(sm) {
+        margin-left: $spacing-05;
+      }
+    }
+
+    &[color-scheme='inverse'] {
+      .#{$prefix}--card svg,
+      ::slotted(svg[slot='pictogram']) {
+        color: $link-inverse;
+      }
+    }
+
+    .#{$prefix}--card__copy {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-05;
+    }
+
+    ::slotted(div) {
+      /* stylelint-disable declaration-no-important */
+      // need the !important to prevent CSS reset styles from overwritting margin for tags
+      margin-left: -$spacing-02 !important;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
+    @include ratio-base(1, 1, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper {
+    @include ratio-base(3, 2, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper {
+    @include ratio-base(4, 3, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper {
+    @include ratio-base(16, 9, false);
+  }
+  .#{$prefix}--card.#{$prefix}--card--light {
+    background-color: $layer-02;
+  }
+
+  .#{$prefix}--card--border {
+    border: 1px solid $layer-accent-01;
+  }
+
+  // FIXME: CardLink is being used as Card in React, need to separate this
+  .#{$prefix}--card__CTA.#{$prefix}--card__CardCTA .#{$prefix}--card__heading {
+    @include type-style('fluid-heading-03', true);
+  }
+
+  // static card
+
+  :host(#{$c4d-prefix}-card),
+  :host(#{$c4d-prefix}-card-group-item) {
+    &:not([href]) {
+      .#{$prefix}--card .#{$prefix}--card__copy {
+        margin-bottom: $spacing-01;
+      }
+
+      .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
+        &::after {
+          display: none;
+        }
+      }
+
+      &:focus-within ::slotted(#{$c4d-prefix}-image) {
+        z-index: 0;
+      }
+
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-bottom: $spacing-10;
+        margin-bottom: auto;
+      }
+
+      ::slotted(#{$c4d-prefix}-card-footer) {
+        margin-top: $spacing-07;
+        display: inline-flex;
+        &::after {
+          position: relative;
+        }
+      }
+    }
+
+    &[color-scheme='light'] {
+      &,
+      &:hover {
+        .#{$prefix}--card__wrapper {
+          background-color: $layer-02;
+          transition: $duration-moderate-01 motion(standard, productive);
+        }
+      }
+
+      &[href] {
+        :hover {
+          .#{$prefix}--card__wrapper {
+            background-color: $background-hover;
+          }
+        }
+        &:active,
+        a:active {
+          outline: none;
+        }
+      }
+    }
+
+    // Logo card
+    &[logo] {
+      .#{$prefix}--card {
+        background-color: $layer-02;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-bottom: $spacing-05;
+      }
+
+      &:hover {
+        border-color: $toggle-off;
+
+        .#{$prefix}--card__wrapper {
+          background-color: $layer-02;
+        }
+      }
+
+      &:active {
+        border-color: $border-inverse;
+      }
+
+      ::slotted(#{$c4d-prefix}-card-footer) {
+        height: 0;
+      }
+    }
+
+    &[href][logo] {
+      &:hover {
+        .#{$prefix}--card__wrapper {
+          background-color: $layer-02;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-card[link]) {
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      @include type-style('heading-02');
+
+      margin-bottom: 0;
+    }
+
+    .#{$prefix}--card .#{$prefix}--card__copy {
+      margin-top: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card-link-cta),
+  :host(#{$c4d-prefix}-card-link) {
+    outline: none;
+  }
+
+  :host(#{$c4d-prefix}-card-eyebrow),
+  .#{$prefix}--card__eyebrow {
+    @include content-width;
+    @include type-style('label-02');
+
+    margin-bottom: $spacing-03;
+    color: $text-secondary;
+  }
+
+  :host(#{$c4d-prefix}-card-footer),
+  :host(#{$c4d-prefix}-card-cta-footer),
+  :host(#{$c4d-prefix}-card-in-card-footer),
+  :host(#{$c4d-prefix}-feature-card-footer),
+  :host(#{$c4d-prefix}-feature-cta-footer) {
+    margin-top: auto;
+    display: flex;
+    align-items: flex-end;
+
+    &:focus-visible {
+      outline: none;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-footer) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: flex;
+
+      svg,
+      ::slotted(svg[slot='icon']) {
+        display: block;
+      }
+    }
+  }
+
+  .#{$prefix}--card .#{$prefix}--card__footer,
+  :host(#{$c4d-prefix}-card-footer) a,
+  :host(#{$c4d-prefix}-card-cta-footer) a,
+  :host(#{$c4d-prefix}-card-in-card-footer) a,
+  :host(#{$c4d-prefix}-feature-card-footer) a,
+  :host(#{$c4d-prefix}-feature-cta-footer) a {
+    /* Moves the footer down to the bottom in the card */
+    margin-top: auto;
+    text-decoration: none;
+
+    &:focus {
+      outline: none;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+
+    span {
+      flex: none;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      z-index: 1;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+    }
+
+    .#{$prefix}--card__cta__copy {
+      max-width: calc(100% - 20px - #{$spacing-03});
+      margin-right: $spacing-03;
+      @include type-style('body-02');
+    }
+
+    .#{$prefix}--card__footer__copy {
+      max-width: calc(100% - 20px);
+      margin-bottom: -$spacing-01;
+    }
+
+    svg,
+    ::slotted(svg[slot='icon']) {
+      display: block;
+      min-width: 20px;
+      margin-left: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-footer),
+  :host(#{$c4d-prefix}-card-cta-footer) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: flex;
+      width: 100%;
+      justify-content: flex-end;
+      align-items: center;
+
+      &:active {
+        color: $link-primary-hover;
+      }
+    }
+
+    &[color-scheme='inverse']
+      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
+        .#{$prefix}--link--disabled
+      ) {
+      color: $link-inverse;
+    }
+  }
+
+  // static card footer
+  :host(#{$c4d-prefix}-card-footer):not([parent-href]) {
+    .#{$prefix}--card__footer {
+      width: auto;
+      justify-content: flex-start;
+
+      &:hover {
+        color: $link-primary-hover;
+      }
+
+      &:active,
+      &:hover {
+        text-decoration: none;
+      }
+
+      &::after {
+        content: none;
+      }
+      &:focus {
+        outline: $spacing-01 solid $focus;
+      }
+    }
+
+    .#{$prefix}--card__cta__copy {
+      margin-right: $spacing-03;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
+  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
+    .#{$prefix}--card {
+    .#{$prefix}--tile {
+      background-color: $background-inverse;
+      border-color: $background-inverse;
+
+      &:hover {
+        #{$c4d-prefix}-image,
+        ::slotted(#{$c4d-prefix}-image),
+        ::slotted(#{$c4d-prefix}-card-cta-image) {
+          filter: brightness(108%);
+
+          &::after {
+            display: none;
+          }
+        }
+      }
+    }
+
+    .#{$prefix}--card__wrapper:hover {
+      background-color: $background-inverse-hover;
+    }
+
+    .#{$prefix}--card__heading,
+    .#{$prefix}--card__copy {
+      color: $icon-inverse;
+    }
+
+    .#{$prefix}--card__eyebrow {
+      color: $text-placeholder;
+    }
+
+    &:focus-within {
+      &::after {
+        content: '';
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        right: 0;
+        border: $spacing-01 solid $focus;
+        outline: 1px solid $focus-inset;
+        outline-offset: -3px;
+        pointer-events: none;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-heading),
+  :host(#{$c4d-prefix}-card-link-heading) {
+    @include content-width;
+
+    color: $text-primary;
+    margin-bottom: $spacing-10;
+  }
+
+  :host(#{$c4d-prefix}-card-heading) {
+    @include type-style('heading-03', true);
+  }
+
+  :host(#{$c4d-prefix}-card-link-heading) {
+    @include type-style('heading-02', true);
+
+    margin-bottom: 0;
+  }
+
+  :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
+  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
+  :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
+  .#{$prefix}--card-group__card {
+    ::slotted(#{$c4d-prefix}-card-eyebrow),
+    ::slotted(#{$c4d-prefix}-card-heading),
+    ::slotted(#{$c4d-prefix}-card-link-heading) {
+      color: $text-inverse;
+    }
+
+    &:hover {
+      ::slotted(#{$c4d-prefix}-image),
+      ::slotted(#{$c4d-prefix}-card-cta-image) {
+        filter: brightness(108%);
+      }
+    }
+  }
+
+  @media print {
+    :host(#{$c4d-prefix}-card),
+    :host(#{$c4d-prefix}-card-group-item),
+    :host(#{$c4d-prefix}-card-cta),
+    :host(#{$c4d-prefix}-card-in-card),
+    :host(#{$c4d-prefix}-content-group-cards-item) {
+      border: 1px solid $layer-accent-01;
+
+      .#{$prefix}--card {
+        background-color: $layer-02;
+        border: none;
+      }
+
+      ::slotted(#{$c4d-prefix}-image),
+      ::slotted(#{$c4d-prefix}-card-cta-image),
+      .#{$prefix}--image {
+        display: none;
+      }
+    }
+
+    .#{$prefix}--card {
+      background-color: $layer-02;
+      border: 1px solid $layer-accent-01;
+
+      .#{$prefix}--card__img,
+      .#{$prefix}--card__image_img,
+      .#{$prefix}--image,
+      .#{$prefix}--card__video-thumbnail {
+        display: none;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-card[disabled]),
+  :host(#{$c4d-prefix}-region-item[disabled]) {
+    .#{$prefix}--card {
+      cursor: not-allowed;
+    }
+
+    .#{$prefix}--card__copy,
+    ::slotted(#{$c4d-prefix}-card-eyebrow),
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      color: $text-disabled;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']),
+  :host(#{$c4d-prefix}-card-footer[cta-type='video']) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      justify-content: space-between;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-footer[href])::after {
+    position: relative;
+  }
+}
diff --git a/packages/styles/scss/components/card/_index.scss b/packages/styles/scss/components/card/_index.scss
new file mode 100644
index 00000000000..2868a1a817d
--- /dev/null
+++ b/packages/styles/scss/components/card/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'card';
+@use 'card';
+
+@include card.card;
diff --git a/packages/styles/scss/components/card/index.scss b/packages/styles/scss/components/card/index.scss
deleted file mode 100644
index b8fda3e5648..00000000000
--- a/packages/styles/scss/components/card/index.scss
+++ /dev/null
@@ -1,802 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss';
-@import '../../globals/utils/ratio-base';
-@import 'carbon-components/scss/components/tile/tile';
-@import '../lightbox-media-viewer/lightbox-media-viewer';
-@import 'carbon-components/scss/components/tag/tag';
-
-@mixin card {
-  .#{$prefix}--card,
-  :host(#{$dds-prefix}-card),
-  :host(#{$dds-prefix}-link-list-item-card),
-  :host(#{$dds-prefix}-card-group-item),
-  :host(#{$dds-prefix}-card-group-item) .#{$prefix}--card,
-  :host(#{$dds-prefix}-card-cta),
-  :host(#{$dds-prefix}-link-list-item-card-cta),
-  :host(#{$dds-prefix}-card-in-card),
-  :host(#{$dds-prefix}-content-group-cards-item),
-  :host(#{$dds-prefix}-content-group-cards-item) .#{$prefix}--card {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    background-color: $ui-01;
-    text-decoration: none;
-    padding: 0;
-    transition: $duration--moderate-01 motion(standard, productive);
-
-    &:hover {
-      background-color: $hover-ui;
-      text-decoration: none;
-
-      .#{$prefix}--card__wrapper {
-        background-color: $hover-ui;
-      }
-
-      &.#{$prefix}--card__CTA--disabled.#{$prefix}--tile--clickable {
-        background-color: $ui-01;
-
-        > * {
-          background-color: $ui-01;
-        }
-      }
-
-      ::slotted(#{$dds-prefix}-image),
-      ::slotted(#{$dds-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image,
-      .#{$prefix}--card__video-thumbnail {
-        &::before {
-          opacity: 0.08;
-          z-index: 1;
-        }
-      }
-
-      .#{$prefix}--card__video-thumbnail {
-        svg {
-          circle {
-            opacity: 0.9;
-            fill: $gray-100;
-          }
-
-          path {
-            fill: $icon-03;
-          }
-        }
-      }
-    }
-
-    &:focus-within {
-      outline: 2px solid $focus;
-      outline-offset: -2px;
-      position: relative;
-      z-index: 2;
-
-      ::slotted(#{$dds-prefix}-image),
-      ::slotted(#{$dds-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--image {
-        z-index: -1;
-      }
-    }
-
-    &:focus,
-    &:visited,
-    &:active {
-      position: relative;
-      z-index: 2;
-      text-decoration: none;
-
-      ::slotted(#{$dds-prefix}-image),
-      .#{$prefix}--image {
-        z-index: -1;
-      }
-    }
-
-    ::slotted(#{$dds-prefix}-image),
-    ::slotted(#{$dds-prefix}-card-cta-image),
-    .#{$prefix}--card__img,
-    .#{$prefix}--card__image_img,
-    .#{$prefix}--image,
-    .#{$prefix}--card__video-thumbnail {
-      position: relative;
-
-      &::before {
-        content: '';
-        position: absolute;
-        top: 0;
-        right: 0;
-        bottom: 0;
-        left: 0;
-        background-color: $ui-05;
-        opacity: 0;
-        transition: $duration--moderate-01 motion(standard, productive);
-      }
-    }
-
-    .#{$prefix}--card__video-thumbnail {
-      svg {
-        circle,
-        path {
-          transition: $duration--moderate-01 motion(standard, productive);
-        }
-      }
-    }
-
-    .#{$prefix}--card.#{$prefix}--tile {
-      padding: 0;
-      transition: $duration--moderate-01 motion(standard, productive);
-    }
-
-    .#{$prefix}--card__wrapper {
-      display: flex;
-      flex: 1;
-      min-height: carbon--mini-units(20);
-      justify-content: space-between;
-      transition: $duration--moderate-01 motion(standard, productive);
-
-      @include ratio-base(2, 1, false);
-    }
-
-    .#{$prefix}--card__content {
-      display: flex;
-      flex-direction: column;
-      padding: $carbon--spacing-05;
-      width: 100%;
-    }
-
-    .#{$prefix}--card__heading {
-      @include carbon--type-style('expressive-heading-03', true);
-
-      margin-bottom: $carbon--layout-05;
-    }
-
-    .#{$prefix}--card__heading,
-    .#{$prefix}--card__copy {
-      @include content-width;
-
-      color: $text-01;
-    }
-
-    .#{$prefix}--card__copy:not([hidden]) {
-      @include carbon--type-style('body-short-02');
-
-      margin-bottom: $carbon--spacing-07;
-    }
-
-    .#{$prefix}--card__img {
-      transition: $duration--moderate-01 motion(standard, productive);
-    }
-
-    // styles the React wrapper version of Tag Group within Card
-    /* stylelint-disable-next-line selector-type-no-unknown */
-    dds-tag-group {
-      margin-top: $spacing-05;
-    }
-  }
-
-  .#{$prefix}--card.#{$prefix}--card--light {
-    background-color: $ui-02;
-  }
-
-  .#{$prefix}--card.#{$prefix}--card--static {
-    outline: none;
-
-    &:hover {
-      .#{$prefix}--card__wrapper {
-        background-color: $ui-02;
-      }
-    }
-
-    .#{$prefix}--card__footer {
-      align-self: flex-start;
-      &:hover {
-        text-decoration: underline;
-
-        svg,
-        .#{$prefix}--card__cta__copy {
-          color: $hover-primary-text;
-        }
-      }
-
-      &:active,
-      &:focus {
-        align-self: flex-start;
-        outline: 1px solid $focus;
-      }
-      &::after {
-        position: relative;
-      }
-    }
-  }
-
-  .#{$prefix}--card--border {
-    border: 1px solid $ui-03;
-  }
-
-  // FIXME: CardLink is being used as Card in React, need to separate this
-  .#{$prefix}--card__CTA.#{$prefix}--card__CardCTA .#{$prefix}--card__heading {
-    @include carbon--type-style('expressive-heading-03', true);
-  }
-
-  // static card
-  :host(#{$dds-prefix}-card) {
-    // Outlined/Border card
-    &[border] {
-      .#{$prefix}--card {
-        border: 1px solid $ui-03;
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-card),
-  :host(#{$dds-prefix}-card-group-item) {
-    &:not([href]) {
-      &,
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $ui-01;
-        }
-      }
-
-      &:focus-within,
-      .#{$prefix}--card:focus-within {
-        outline: none;
-      }
-
-      ::slotted(#{$dds-prefix}-card-footer) {
-        display: inline-flex;
-        &::after {
-          position: relative;
-        }
-      }
-    }
-    &[color-scheme='light'] {
-      &,
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $ui-02;
-          transition: $duration--moderate-01 motion(standard, productive);
-        }
-      }
-
-      &[href] {
-        :hover {
-          .#{$prefix}--card__wrapper {
-            background-color: $hover-ui;
-          }
-        }
-        &:active,
-        a:active {
-          outline: none;
-        }
-      }
-    }
-
-    // Logo card
-    &[logo] {
-      .#{$prefix}--card {
-        background-color: $ui-02;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-bottom: $spacing-05;
-      }
-
-      &:hover {
-        border-color: $ui-04;
-
-        .#{$prefix}--card__wrapper {
-          background-color: $ui-02;
-        }
-      }
-
-      &:active {
-        border-color: $ui-05;
-      }
-
-      ::slotted(#{$dds-prefix}-card-footer) {
-        height: 0;
-      }
-    }
-
-    &[href][logo] {
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $ui-02;
-        }
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-card-cta),
-  :host(#{$dds-prefix}-card-link-cta),
-  :host(#{$dds-prefix}-card-link) {
-    outline: none;
-  }
-
-  :host(#{$dds-prefix}-card-eyebrow),
-  .#{$prefix}--card__eyebrow {
-    @include content-width;
-    @include carbon--type-style('label-02');
-
-    margin-bottom: $carbon--spacing-03;
-    color: $text-02;
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__cta,
-  .#{$prefix}--card .#{$prefix}--card__cta a,
-  .#{$prefix}--card .#{$prefix}--card__cta a:visited,
-  :host(#{$dds-prefix}-card-footer)
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$dds-prefix}-card-cta-footer)
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    margin-left: 0;
-    color: $link-01;
-  }
-
-  :host(#{$dds-prefix}-card-footer[disabled])
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    color: $disabled-02;
-  }
-
-  :host(#{$dds-prefix}-card-footer),
-  :host(#{$dds-prefix}-card-cta-footer),
-  :host(#{$dds-prefix}-card-in-card-footer),
-  :host(#{$dds-prefix}-feature-card-footer),
-  :host(#{$dds-prefix}-feature-cta-footer) {
-    margin-top: auto;
-    display: flex;
-    align-items: flex-end;
-
-    &:focus-visible {
-      outline: none;
-    }
-  }
-
-  :host(#{$dds-prefix}-card-footer) {
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-      display: flex;
-
-      svg,
-      ::slotted(svg[slot='icon']) {
-        display: block;
-      }
-    }
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__footer,
-  :host(#{$dds-prefix}-card-footer) a,
-  :host(#{$dds-prefix}-card-cta-footer) a,
-  :host(#{$dds-prefix}-card-in-card-footer) a,
-  :host(#{$dds-prefix}-feature-card-footer) a,
-  :host(#{$dds-prefix}-feature-cta-footer) a {
-    /* Moves the footer down to the bottom in the card */
-    margin-top: auto;
-    text-decoration: none;
-
-    &:focus {
-      outline: none;
-    }
-
-    &:hover {
-      text-decoration: none;
-    }
-
-    span {
-      flex: none;
-    }
-
-    &::after {
-      content: '';
-      position: absolute;
-      z-index: 1;
-      top: 0;
-      left: 0;
-      bottom: 0;
-      right: 0;
-    }
-
-    .#{$prefix}--card__cta__copy {
-      max-width: calc(100% - 20px - #{$carbon--spacing-03});
-      margin-right: $carbon--spacing-03;
-      color: $link-01;
-      @include carbon--type-style('body-short-02');
-    }
-
-    .#{$prefix}--card__footer__copy {
-      max-width: calc(100% - 20px);
-      margin-bottom: -$carbon--spacing-01;
-    }
-
-    svg,
-    ::slotted(svg[slot='icon']) {
-      display: block;
-      min-width: 20px;
-      margin-left: 0;
-    }
-  }
-
-  :host(#{$dds-prefix}-card-footer) a,
-  :host(#{$dds-prefix}-card-cta-footer) a,
-  :host(#{$dds-prefix}-card-in-card-footer) a {
-    @include carbon--breakpoint('md') {
-      padding-right: $carbon--spacing-07;
-    }
-  }
-
-  :host(#{$dds-prefix}-feature-cta-footer) a {
-    svg,
-    ::slotted(svg[slot='icon']) {
-      fill: $inverse-link;
-
-      @include carbon--breakpoint('max') {
-        width: $carbon--spacing-07;
-        height: $carbon--spacing-07;
-      }
-    }
-  }
-
-  // static card footer
-  :host(#{$dds-prefix}-card-footer):not([parent-href]) {
-    .#{$prefix}--card__footer {
-      &::after {
-        content: none;
-      }
-      &:focus {
-        outline: 2px solid $focus;
-      }
-    }
-  }
-
-  .#{$prefix}--card__footer__icon-left {
-    svg.#{$prefix}--card__cta,
-    ::slotted(svg[slot='icon']) {
-      margin-right: $carbon--spacing-03;
-    }
-
-    .#{$prefix}--card__cta__copy {
-      margin-right: 0;
-    }
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__footer,
-  .#{$dds-prefix}-ce--card__footer {
-    display: flex;
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__footer svg,
-  .#{$dds-prefix}-ce--card__footer ::slotted(svg[slot='icon']) {
-    fill: currentColor;
-    align-self: center;
-  }
-
-  .#{$prefix}--card--inverse,
-  .#{$prefix}--card.#{$prefix}--card--inverse,
-  :host(#{$dds-prefix}-card)[color-scheme='inverse'],
-  :host(#{$dds-prefix}-card-group-item)[color-scheme='inverse']
-    .#{$prefix}--card {
-    background-color: $inverse-02;
-
-    .#{$prefix}--card__wrapper:hover {
-      background-color: $inverse-hover-ui;
-    }
-
-    .#{$prefix}--card__heading,
-    .#{$prefix}--card__copy {
-      color: $inverse-01;
-    }
-
-    .#{$prefix}--card__eyebrow {
-      color: $text-03;
-    }
-
-    &:hover {
-      background-color: $inverse-hover-ui;
-
-      ::slotted(#{$dds-prefix}-image),
-      ::slotted(#{$dds-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image {
-        filter: brightness(108%);
-      }
-    }
-
-    &:focus-within {
-      &::after {
-        content: '';
-        position: absolute;
-        z-index: 2;
-        top: 0;
-        left: 0;
-        bottom: 0;
-        right: 0;
-        border: 2px solid $focus;
-        outline: 1px solid $inverse-focus-ui;
-        outline-offset: -3px;
-        pointer-events: none;
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-card-heading),
-  :host(#{$dds-prefix}-card-link-heading) {
-    @include content-width;
-
-    color: $text-01;
-    margin-bottom: $carbon--layout-05;
-  }
-
-  :host(#{$dds-prefix}-card-heading) {
-    @include carbon--type-style('expressive-heading-03', true);
-  }
-
-  :host(#{$dds-prefix}-card-link-heading) {
-    @include carbon--type-style('expressive-heading-02', true);
-
-    margin-bottom: 0;
-  }
-
-  :host(#{$dds-prefix}-card)[color-scheme='inverse'],
-  :host(#{$dds-prefix}-card-group-item)[color-scheme='inverse'],
-  :host(#{$dds-prefix}-feature-section-card-link)[color-scheme='inverse'],
-  .#{$prefix}--card-group__card {
-    ::slotted(#{$dds-prefix}-card-eyebrow) {
-      color: $text-03;
-    }
-
-    ::slotted(#{$dds-prefix}-card-heading),
-    ::slotted(#{$dds-prefix}-card-link-heading) {
-      color: $inverse-01;
-    }
-
-    &:hover {
-      ::slotted(#{$dds-prefix}-image),
-      ::slotted(#{$dds-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image {
-        filter: brightness(108%);
-      }
-    }
-  }
-
-  .#{$prefix}--card--inverse .#{$prefix}--card__cta,
-  .#{$prefix}--card--inverse .#{$prefix}--card__cta a,
-  .#{$prefix}--card--inverse .#{$prefix}--card__cta a:visited,
-  .#{$prefix}--card--inverse
-    .#{$prefix}--card__footer
-    .#{$prefix}--card__cta__copy,
-  :host(#{$dds-prefix}-card-cta-footer[color-scheme='inverse'])
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$dds-prefix}-card-cta-footer[color-scheme='inverse'])
-    .#{$prefix}--card__cta__copy,
-  :host(#{$dds-prefix}-card-footer[color-scheme='inverse'])
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$dds-prefix}-card-footer[color-scheme='inverse'])
-    .#{$prefix}--card__cta__copy {
-    color: $inverse-link;
-  }
-
-  @media print {
-    :host(#{$dds-prefix}-card),
-    :host(#{$dds-prefix}-link-list-item-card),
-    :host(#{$dds-prefix}-card-group-item),
-    :host(#{$dds-prefix}-card-cta),
-    :host(#{$dds-prefix}-link-list-item-card-cta),
-    :host(#{$dds-prefix}-card-in-card),
-    :host(#{$dds-prefix}-content-group-cards-item) {
-      border: 1px solid $ui-03;
-
-      .#{$prefix}--card {
-        background-color: $ui-02;
-        border: none;
-      }
-
-      ::slotted(#{$dds-prefix}-image),
-      ::slotted(#{$dds-prefix}-card-cta-image),
-      ::slotted(#{$dds-prefix}-tag-group),
-      .#{$prefix}--image {
-        display: none;
-      }
-    }
-
-    .#{$prefix}--card {
-      background-color: $ui-02;
-      border: 1px solid $ui-03;
-
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image,
-      .#{$prefix}--card__video-thumbnail {
-        display: none;
-      }
-    }
-  }
-
-  // Card with pictogram placement style
-  :host(#{$dds-prefix}-card-group-item),
-  :host(#{$dds-prefix}-card-in-card),
-  :host(#{$dds-prefix}-card-cta),
-  :host(#{$dds-prefix}-card) {
-    outline: none;
-
-    .#{$prefix}--card__pictogram {
-      display: flex;
-
-      ::slotted(#{$dds-prefix}-card-heading) {
-        padding-top: $carbon--spacing-07;
-        margin-bottom: 0;
-
-        @include carbon--breakpoint('md') {
-          padding-left: 0;
-          flex: 1;
-          display: flex;
-        }
-      }
-    }
-
-    &[pictogram-placement='top'] .#{$prefix}--card,
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$dds-prefix}-card-heading) {
-          padding-top: 0;
-
-          @include carbon--breakpoint('md') {
-            /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-            display: -webkit-box;
-            -webkit-box-orient: vertical;
-            -webkit-line-clamp: 3;
-            /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-            overflow: hidden;
-            max-width: calc(100% - #{$carbon--spacing-10});
-            opacity: 1;
-            transform: translate3d(0, 0, 0);
-            transition: all $duration--moderate-02 motion(standard, productive)
-              0.25s;
-          }
-        }
-
-        ::slotted(svg[slot='pictogram']) {
-          margin-left: 0;
-        }
-
-        .#{$prefix}--card__content {
-          position: relative;
-        }
-
-        .#{$prefix}--card__copy {
-          margin-top: $carbon--spacing-07;
-          margin-bottom: 0;
-
-          @include carbon--breakpoint('md') {
-            margin-top: 0;
-            visibility: hidden;
-            opacity: 0;
-            transform: translate3d(0, -16px, 0);
-            transition: all $duration--moderate-02 motion(standard, productive);
-          }
-        }
-      }
-
-      &:hover,
-      &:focus {
-        .#{$prefix}--card__motion {
-          ::slotted(#{$dds-prefix}-card-heading) {
-            @include carbon--breakpoint('md') {
-              opacity: 0;
-              transform: translate3d(0, 16px, 0);
-              transition-delay: 0s;
-            }
-          }
-
-          .#{$prefix}--card__copy {
-            @include carbon--breakpoint('md') {
-              display: block;
-              overflow: hidden;
-              visibility: visible;
-              opacity: 1;
-              transform: translate3d(0, 0, 0);
-              transition-delay: 0.2s;
-            }
-          }
-        }
-      }
-    }
-
-    &[pictogram-placement='top'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$dds-prefix}-card-heading) {
-          align-items: flex-end;
-          margin-bottom: 0;
-          margin-top: auto;
-
-          @include carbon--breakpoint('md') {
-            position: absolute;
-            bottom: $carbon--spacing-05;
-          }
-        }
-
-        .#{$prefix}--card__copy {
-          @include carbon--breakpoint('md') {
-            margin-top: auto;
-          }
-        }
-
-        ::slotted(svg[slot='pictogram']) {
-          margin-bottom: $carbon--spacing-10;
-
-          @include carbon--breakpoint('md') {
-            margin-bottom: $carbon--spacing-07;
-          }
-        }
-      }
-    }
-
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      .#{$prefix}--card__motion {
-        ::slotted(#{$dds-prefix}-card-heading) {
-          align-items: flex-start;
-
-          @include carbon--breakpoint('md') {
-            position: absolute;
-            top: $carbon--spacing-05;
-          }
-        }
-
-        .#{$prefix}--card__copy {
-          margin-bottom: $carbon--spacing-10;
-
-          @include carbon--breakpoint('md') {
-            margin-bottom: $carbon--spacing-07;
-          }
-        }
-
-        ::slotted(svg[slot='pictogram']) {
-          margin-top: auto;
-          align-items: flex-end;
-        }
-      }
-    }
-
-    ::slotted(svg[slot='pictogram']) {
-      fill: currentColor;
-      @include carbon--breakpoint('md') {
-        margin-left: 0;
-      }
-      @include carbon--breakpoint('sm') {
-        margin-left: $carbon--layout-01;
-      }
-    }
-
-    &[color-scheme='inverse'] ::slotted(svg[slot='pictogram']) {
-      color: $inverse-link;
-    }
-
-    .#{$prefix}--card__copy {
-      display: flex;
-      flex-direction: column;
-      gap: $carbon--spacing-05;
-    }
-  }
-}
-
-@include exports('card') {
-  @include card;
-}
diff --git a/packages/styles/scss/components/carousel/_carousel.scss b/packages/styles/scss/components/carousel/_carousel.scss
index ac195eae8cb..1952489b301 100644
--- a/packages/styles/scss/components/carousel/_carousel.scss
+++ b/packages/styles/scss/components/carousel/_carousel.scss
@@ -7,131 +7,136 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import 'carbon-components/scss/components/button/button';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/vendor/@carbon/layout/breakpoint';
-@import '../../globals/vars';
-
-:host(#{$dds-prefix}-carousel),
-.#{$prefix}--carousel {
-  --#{$dds-prefix}--carousel--page-size: 1;
-
-  @include carbon--breakpoint(md) {
-    --#{$dds-prefix}--carousel--page-size: 2;
-  }
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/button' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin carousel {
+  :host(#{$c4d-prefix}-carousel),
+  .#{$prefix}--carousel {
+    --#{$c4d-prefix}--carousel--page-size: 1;
 
-  @include carbon--breakpoint(lg) {
-    --#{$dds-prefix}--carousel--page-size: 3;
-  }
+    @include breakpoint(md) {
+      --#{$c4d-prefix}--carousel--page-size: 2;
+    }
 
-  [role='region'] {
-    display: contents;
-  }
+    @include breakpoint(lg) {
+      --#{$c4d-prefix}--carousel--page-size: 4;
+    }
 
-  display: flex;
-  flex-direction: column;
-
-  overflow: hidden;
-  inline-size: calc(
-    100% + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
-  );
-  margin-inline-end: calc(
-    -1 * var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
-  );
-  padding-inline-start: $spacing-05;
-  padding-inline-end: calc(
-    #{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
-  );
-
-  @include carbon--breakpoint(md) {
-    padding-inline-start: 0;
-  }
+    [role='region'] {
+      display: contents;
+    }
 
-  ::slotted(:not([name])) {
-    flex: 0 0
-      calc(
-        (
-            100% - (var(--#{$dds-prefix}--carousel--page-size, 1) - 1) * #{$spacing-05}
-          ) / var(--#{$dds-prefix}--carousel--page-size, 1)
-      );
-    block-size: auto;
-    margin-inline-end: $spacing-05;
-    vertical-align: middle;
-  }
+    display: flex;
+    flex-direction: column;
 
-  .#{$prefix}--carousel__scroll-container {
-    grid-area: body;
-    position: relative;
     overflow: hidden;
-    margin-inline-end: calc(
-      -1 * (#{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05}))
+    inline-size: calc(
+      100% + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
     );
-  }
-
-  .#{$prefix}--carousel__scroll-contents {
-    position: relative;
     margin-inline-end: calc(
-      #{$spacing-05} + var(--#{$dds-prefix}--carousel--overflow-hint-size, #{$spacing-05})
+      -1 * var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
+    );
+    padding-inline-start: $spacing-05;
+    padding-inline-end: calc(
+      #{$spacing-05} + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
     );
-    display: flex;
-    // Achieves `sameHeight` effect for card group.
-    // The cards must have `height:auto`.
-    align-items: stretch;
-  }
 
-  .#{$prefix}--carousel__scroll-contents--scrolling {
-    transition: inset-inline-start $duration--slow-01
-      motion(standard, productive);
-  }
+    @include breakpoint(md) {
+      padding-inline-start: 0;
+    }
 
-  .#{$prefix}--carousel__navigation {
-    @include carbon--type-style('body-long-02', true);
+    ::slotted(:not([name])) {
+      flex: 0 0
+        calc(
+          (
+              100% - (var(--#{$c4d-prefix}--carousel--page-size, 1) - 1) * #{$spacing-05}
+            ) / var(--#{$c4d-prefix}--carousel--page-size, 1)
+        );
+      block-size: auto;
+      margin-inline-end: $spacing-05;
+      vertical-align: middle;
+    }
 
-    grid-area: navigation;
-    display: grid;
-    grid-template-columns: auto auto auto;
-    justify-content: flex-end;
-    align-items: center;
-    gap: $spacing-05;
-    margin-block-start: $spacing-05;
-  }
+    .#{$prefix}--carousel__scroll-container {
+      grid-area: body;
+      position: relative;
+      overflow: hidden;
+      margin-inline-end: calc(
+        -1 * (#{$spacing-05} + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05}))
+      );
+    }
 
-  .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
-    padding: 0;
-    min-block-size: $container-03;
-    block-size: $container-03;
-    inline-size: $container-03;
+    .#{$prefix}--carousel__scroll-contents {
+      position: relative;
+      margin-inline-end: calc(
+        #{$spacing-05} + var(--#{$c4d-prefix}--carousel--overflow-hint-size, #{$spacing-05})
+      );
+      display: flex;
+      // Achieves `sameHeight` effect for card group.
+      // The cards must have `height:auto`.
+      align-items: stretch;
+    }
 
-    svg {
-      margin: auto;
+    .#{$prefix}--carousel__scroll-contents--scrolling {
+      transition: inset-inline-start $duration-slow-01
+        motion(standard, productive);
     }
-  }
 
-  .#{$prefix}--carousel__navigation__status {
-    direction: ltr;
-  }
-}
+    .#{$prefix}--carousel__navigation {
+      @include type-style('body-02', true);
 
-:host(#{$dds-prefix}-carousel[in-modal]) {
-  padding: 0 0 $spacing-05;
-  inline-size: 100%;
-  block-size: 100%;
+      grid-area: navigation;
+      display: grid;
+      grid-template-columns: auto auto auto;
+      justify-content: flex-end;
+      align-items: center;
+      gap: $spacing-05;
+      margin-block-start: $spacing-05;
+    }
 
-  @include carbon--breakpoint(md) {
-    padding-block-end: 0;
-  }
+    .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
+      padding: 0;
+      min-block-size: $spacing-09;
+      inline-size: $spacing-09;
+      block-size: $spacing-09;
 
-  .#{$prefix}--carousel__scroll-container {
-    flex-grow: 1;
+      svg {
+        margin: auto;
+      }
+    }
   }
 
-  .#{$prefix}--carousel__scroll-contents {
+  :host(#{$c4d-prefix}-carousel[in-modal]) {
+    padding: 0 0 $spacing-05;
+    inline-size: 100%;
     block-size: 100%;
+
+    @include breakpoint(md) {
+      padding-block-end: 0;
+    }
+
+    .#{$prefix}--carousel__scroll-container {
+      flex-grow: 1;
+    }
+
+    .#{$prefix}--carousel__scroll-contents {
+      block-size: 100%;
+    }
+  }
+
+  .#{$prefix}--carousel__navigation__status {
+    direction: ltr;
   }
 }
 
-:host(#{$dds-prefix}-carousel[dir='rtl']) {
-  .#{$prefix}--btn.#{$prefix}--carousel__navigation__btn {
+:host(#{$c4d-prefix}-carousel[dir='rtl']) {
+  .#{$prefix}--btn.#{$c4d-prefix}--carousel__navigation__btn {
     svg {
       transform: rotate(180deg);
     }
@@ -139,9 +144,9 @@
 }
 
 @media print {
-  :host(#{$dds-prefix}-carousel),
+  :host(#{$c4d-prefix}-carousel),
   .#{$prefix}--carousel {
-    --#{$dds-prefix}--carousel--page-size: 4;
+    --#{$c4d-prefix}--carousel--page-size: 4;
 
     flex-flow: row wrap;
     margin: 0;
diff --git a/packages/styles/scss/components/carousel/_index.scss b/packages/styles/scss/components/carousel/_index.scss
new file mode 100644
index 00000000000..210b676cd63
--- /dev/null
+++ b/packages/styles/scss/components/carousel/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'carousel';
+@use 'carousel';
+
+@include carousel.carousel;
diff --git a/packages/styles/scss/components/content-block-cards/_content-block-cards.scss b/packages/styles/scss/components/content-block-cards/_content-block-cards.scss
index 44524dc534f..34b03c1cc0d 100644
--- a/packages/styles/scss/components/content-block-cards/_content-block-cards.scss
+++ b/packages/styles/scss/components/content-block-cards/_content-block-cards.scss
@@ -5,49 +5,53 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../card-group/card-group';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../card-group/card-group';
 
 @mixin content-block-cards {
-  :host(#{$dds-prefix}-content-block-cards),
+  :host(#{$c4d-prefix}-content-block-cards),
   .#{$prefix}--content-block-cards .#{$prefix}--content-block {
     display: block;
-    padding-top: $carbon--layout-03;
-    padding-bottom: $carbon--layout-05;
+    padding-top: $spacing-07;
+    padding-bottom: $spacing-10;
 
-    @include carbon--breakpoint('md') {
-      padding-top: $carbon--layout-03;
-      padding-bottom: $carbon--layout-06;
+    @include breakpoint(md) {
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-12;
     }
 
-    @include carbon--breakpoint('lg') {
-      padding-top: $carbon--layout-05;
-      padding-bottom: $carbon--layout-07;
+    @include breakpoint(lg) {
+      padding-top: $spacing-10;
+      padding-bottom: $spacing-13;
     }
   }
 
-  :host(#{$dds-prefix}-content-block-cards) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-content-block-cards) ::slotted([slot='heading']),
   .#{$prefix}--content-block-cards .#{$prefix}--content-block__heading {
-    margin-bottom: $carbon--layout-03;
+    margin-bottom: $spacing-07;
 
-    @include carbon--breakpoint('md') {
-      margin-bottom: $carbon--layout-04;
+    @include breakpoint(md) {
+      margin-bottom: $spacing-09;
     }
 
-    @include carbon--breakpoint('lg') {
-      margin-bottom: $carbon--layout-03;
+    @include breakpoint(lg) {
+      margin-bottom: $spacing-07;
     }
   }
 
-  :host(#{$dds-prefix}-content-block-cards) .#{$prefix}--content-block__cta,
+  :host(#{$c4d-prefix}-content-block-cards) .#{$prefix}--content-block__cta,
   .#{$prefix}--content-block-cards .#{$prefix}--content-block__cta {
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col(4, 12);
+    @include breakpoint(lg) {
+      @include make-col(4, 12);
     }
   }
 
-  :host(#{$dds-prefix}-content-block-cards) .#{$prefix}--content-block__cta {
+  :host(#{$c4d-prefix}-content-block-cards) .#{$prefix}--content-block__cta {
     padding: 0;
   }
 
@@ -58,7 +62,3 @@
     }
   }
 }
-
-@include exports('content-block-cards') {
-  @include content-block-cards;
-}
diff --git a/packages/styles/scss/components/content-block-cards/_index.scss b/packages/styles/scss/components/content-block-cards/_index.scss
new file mode 100644
index 00000000000..de738a20682
--- /dev/null
+++ b/packages/styles/scss/components/content-block-cards/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-cards';
+@use 'content-block-cards';
+
+@include content-block-cards.content-block-cards;
diff --git a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss
index 7c9c9c14381..cba3476527d 100644
--- a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss
+++ b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss
@@ -4,106 +4,114 @@
 * 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/hang';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../internal/content-block';
+@use '../link-with-icon';
 
 @mixin content-block-headlines {
-  :host(#{$dds-prefix}-content-block-headlines),
+  :host(#{$c4d-prefix}-content-block-headlines),
   .#{$prefix}--content-block-headlines {
     .#{$prefix}--content-block {
-      @include carbon--breakpoint('md') {
-        padding-top: $carbon--spacing-07;
+      @include breakpoint(md) {
+        padding-top: $spacing-07;
       }
 
-      @include carbon--breakpoint('lg') {
-        padding-top: $carbon--layout-05;
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
       }
     }
 
     .#{$prefix}--content-block__heading,
     .#{$prefix}--content-block__copy {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col-ready;
-        @include carbon--make-col(8, 12);
+      @include breakpoint(lg) {
+        @include make-col-ready;
+        @include make-col(8, 12);
         @include hang;
       }
     }
 
-    ::slotted(#{$dds-prefix}-content-block-copy),
+    ::slotted(#{$c4d-prefix}-content-block-copy),
     .#{$prefix}--content-block__copy {
-      margin-bottom: 6rem;
+      margin-bottom: $spacing-12;
       p {
-        margin-bottom: $carbon--layout-05;
+        margin-bottom: $spacing-10;
 
-        @include carbon--breakpoint('lg') {
-          margin-bottom: $carbon--layout-06;
+        @include breakpoint(lg) {
+          margin-bottom: $spacing-12;
         }
       }
     }
   }
 
   .#{$prefix}--content-block-headlines__container {
-    @include carbon--make-row;
+    @include make-row;
   }
 
   .#{$prefix}--content-block-headlines__row {
-    @include carbon--make-col-ready;
+    @include make-col-ready;
 
     &:last-of-type {
-      margin-bottom: $carbon--spacing-07;
+      margin-bottom: $spacing-07;
 
-      @include carbon--breakpoint('md') {
-        margin-bottom: $carbon--spacing-07;
+      @include breakpoint(md) {
+        margin-bottom: $spacing-07;
       }
 
-      @include carbon--breakpoint('lg') {
-        margin-bottom: $carbon--layout-06;
+      @include breakpoint(lg) {
+        margin-bottom: $spacing-12;
       }
     }
 
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col(12, 12);
+    @include breakpoint(md) {
+      @include make-col(12, 12);
     }
 
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col(8, 12);
+    @include breakpoint(lg) {
+      @include make-col(8, 12);
     }
   }
 
   .#{$prefix}--content-block-headlines__item-container {
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       display: grid;
       grid-template-columns: repeat(2, minmax(0, 1fr));
     }
   }
 
-  :host(#{$dds-prefix}-content-block-headlines-item),
+  :host(#{$c4d-prefix}-content-block-headlines-item),
   .#{$prefix}--content-block-headlines__item {
     display: flex;
     flex-direction: column;
 
-    border-top: 1px solid $ui-03;
-    padding-top: $carbon--spacing-05;
-    padding-bottom: $carbon--spacing-07;
+    border-top: 1px solid $layer-accent-01;
+    padding-top: $spacing-05;
+    padding-bottom: $spacing-07;
 
-    @include carbon--make-col-ready;
+    @include make-col-ready;
 
     .#{$prefix}--content-block-headlines__heading,
     .#{$prefix}--content-block-headlines__copy {
       max-width: 90%;
-      color: $text-01;
+      color: $text-primary;
     }
 
     .#{$prefix}--content-block-headlines__copy {
-      @include carbon--type-style('body-long-02', true);
+      @include type-style('body-02', true);
 
-      margin: $carbon--spacing-05 0 0;
+      margin: $spacing-05 0 0;
     }
 
-    :host(#{$dds-prefix}-content-block-headlines-heading),
+    :host(#{$c4d-prefix}-content-block-headlines-heading),
     .#{$prefix}--content-block-headlines__heading {
-      @include carbon--type-style('display-02', true);
+      @include type-style('display-02', true);
     }
 
     .#{$prefix}--content-block-headlines__cta-container {
@@ -111,12 +119,12 @@
     }
 
     .#{$prefix}--link {
-      margin-top: $carbon--spacing-05;
+      margin-top: $spacing-05;
     }
 
-    @include carbon--breakpoint('md') {
-      padding-top: $carbon--spacing-05;
-      padding-bottom: $carbon--layout-05;
+    @include breakpoint(md) {
+      padding-top: $spacing-05;
+      padding-bottom: $spacing-10;
     }
   }
 
@@ -126,14 +134,14 @@
       'body' auto
       'footer' auto / 1fr;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       grid-template:
         'heading heading' auto
         'body body' auto
         'footer .' auto / 1fr 1fr;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       grid-template:
         'heading heading .' auto
         'body body .' auto
@@ -141,7 +149,3 @@
     }
   }
 }
-
-@include exports('content-block-headlines') {
-  @include content-block-headlines;
-}
diff --git a/packages/styles/scss/components/content-block-headlines/_index.scss b/packages/styles/scss/components/content-block-headlines/_index.scss
new file mode 100644
index 00000000000..a25646ff9d7
--- /dev/null
+++ b/packages/styles/scss/components/content-block-headlines/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-headlines';
+@use 'content-block-headlines';
+
+@include content-block-headlines.content-block-headlines;
diff --git a/packages/styles/scss/components/content-block-headlines/index.scss b/packages/styles/scss/components/content-block-headlines/index.scss
deleted file mode 100644
index 64c45d78369..00000000000
--- a/packages/styles/scss/components/content-block-headlines/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../link-with-icon/link-with-icon';
-@import 'content-block-headlines';
diff --git a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
index 88741d14728..941f7f423e1 100644
--- a/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
+++ b/packages/styles/scss/components/content-block-horizontal/_content-block-horizontal.scss
@@ -5,70 +5,57 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../internal/content-block/content-block';
-@import '../content-item-horizontal/content-item-horizontal';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../internal/content-block';
+@use '../content-item-row';
+@use '../../globals/vars' as *;
 
 @mixin content-block-horizontal {
-  :host(#{$dds-prefix}-content-block-horizontal),
-  :host(#{$dds-prefix}-content-group-horizontal) {
-    padding-top: $layout-03;
-    padding-bottom: $carbon--layout-03;
+  :host(#{$c4d-prefix}-content-block-horizontal) {
+    padding-top: $spacing-07;
+    padding-bottom: $spacing-07;
 
-    @include carbon--breakpoint('md') {
-      padding-bottom: $layout-03;
+    @include breakpoint(md) {
+      padding-bottom: $spacing-07;
     }
 
-    @include carbon--breakpoint('lg') {
-      padding-top: $layout-05;
-      padding-bottom: $layout-05;
+    @include breakpoint(lg) {
+      padding-top: $spacing-10;
+      padding-bottom: $spacing-10;
     }
   }
 
-  .#{$prefix}--content-block-horizontal,
-  .#{$prefix}--content-group-horizontal {
+  .#{$prefix}--content-block-horizontal {
     .#{$prefix}--content-block {
-      padding-top: $layout-03;
-      padding-bottom: $layout-01;
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-05;
 
-      @include carbon--breakpoint('lg') {
-        padding-top: $layout-05;
-        padding-bottom: $layout-04;
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
+        padding-bottom: $spacing-09;
       }
     }
   }
-  .#{$prefix}--content-group-horizontal {
-    .#{$prefix}--content-item-horizontal__item--cta {
-      margin-top: 0;
-    }
-  }
 
-  :host(#{$dds-prefix}-content-block-horizontal) ::slotted([slot='heading']),
-  :host(#{$dds-prefix}-content-group-horizontal) ::slotted([slot='heading']),
-  .#{$prefix}--content-block-horizontal .#{$prefix}--content-block__heading,
-  .#{$prefix}--content-group-horizontal .#{$prefix}--content-block__heading {
-    margin-bottom: $layout-03;
+  :host(#{$c4d-prefix}-content-block-horizontal) ::slotted([slot='heading']),
+  .#{$prefix}--content-block-horizontal .#{$prefix}--content-block__heading {
+    margin-bottom: $spacing-07;
   }
 
-  :host(#{$dds-prefix}-content-item-horizontal):last-child,
-  .#{$prefix}--content-block-horizontal
-    .#{$prefix}--content-item-horizontal__item:last-child,
-  .#{$prefix}--content-group-horizontal
-    .#{$prefix}--content-item-horizontal__item:last-child {
-    @include carbon--breakpoint('max') {
-      padding-bottom: $layout-07;
+  :host(#{$c4d-prefix}-content-item-row):last-child {
+    @include breakpoint(max) {
+      padding-bottom: $spacing-13;
     }
-    @include carbon--breakpoint('lg') {
-      padding-bottom: $layout-07;
+    @include breakpoint(lg) {
+      padding-bottom: $spacing-13;
     }
-    @include carbon--breakpoint('md') {
-      padding-bottom: $layout-05;
+    @include breakpoint(md) {
+      padding-bottom: $spacing-10;
     }
-    @include carbon--breakpoint('sm') {
-      padding-bottom: $layout-03;
+    @include breakpoint(sm) {
+      padding-bottom: $spacing-07;
     }
   }
 }
-
-@include exports('content-block-horizontal') {
-  @include content-block-horizontal;
-}
diff --git a/packages/styles/scss/components/content-block-horizontal/_index.scss b/packages/styles/scss/components/content-block-horizontal/_index.scss
new file mode 100644
index 00000000000..84b10004d22
--- /dev/null
+++ b/packages/styles/scss/components/content-block-horizontal/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-horizontal';
+@use 'content-block-horizontal';
+
+@include content-block-horizontal.content-block-horizontal;
diff --git a/packages/styles/scss/components/content-block-media/_content-block-media.scss b/packages/styles/scss/components/content-block-media/_content-block-media.scss
index 84a3c348ca4..c6399675b0d 100644
--- a/packages/styles/scss/components/content-block-media/_content-block-media.scss
+++ b/packages/styles/scss/components/content-block-media/_content-block-media.scss
@@ -1,24 +1,35 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-group';
+@use '../../internal/content-item/content-item';
+@use '../card';
+@use '../content-group-simple/index';
+@use '../image';
+@use '../feature-card';
 
 @mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
+  color: $text-primary;
+  background: $background;
 
   &.#{$prefix}--content-block-media--with-border
     .#{$prefix}--content-block-media__divider {
-    border-bottom-color: $ui-04;
+    border-bottom-color: $toggle-off;
   }
 }
 
 @mixin content-block-media {
   .#{$prefix}--content-block-media,
-  :host(#{$dds-prefix}-content-block-media) {
+  :host(#{$c4d-prefix}-content-block-media) {
     @include themed-items;
 
     .#{$prefix}--content-group:last-child {
@@ -26,19 +37,13 @@
     }
 
     .#{$prefix}--feature-card {
-      max-width: rem(640px);
+      max-width: to-rem(640px);
     }
   }
 
   .#{$prefix}--content-block-media--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
+    @include theme($g100, true);
+
+    @include themed-items;
   }
 }
-@include exports('content-block-media') {
-  @include content-block-media;
-}
diff --git a/packages/styles/scss/components/content-block-media/_index.scss b/packages/styles/scss/components/content-block-media/_index.scss
new file mode 100644
index 00000000000..000acc14776
--- /dev/null
+++ b/packages/styles/scss/components/content-block-media/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-media';
+@use 'content-block-media';
+
+@include content-block-media.content-block-media;
diff --git a/packages/styles/scss/components/content-block-media/index.scss b/packages/styles/scss/components/content-block-media/index.scss
deleted file mode 100644
index 84bde6027d6..00000000000
--- a/packages/styles/scss/components/content-block-media/index.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-group/content-group';
-@import '../../internal/content-item/content-item';
-@import '../card/index';
-@import '../content-group-simple/index';
-@import '../image/image';
-@import '../image-with-caption/image-with-caption';
-@import '../feature-card/feature-card';
-@import 'content-block-media';
diff --git a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
index 11d967abb78..c0debca2673 100644
--- a/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
+++ b/packages/styles/scss/components/content-block-mixed/_content-block-mixed.scss
@@ -5,25 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-group';
+@use '../content-group-cards';
+@use '../content-group-pictograms';
+@use '../content-group-simple';
+
 @mixin content-block-mixed {
-  :host(dds-content-block-mixed),
+  :host(cds-content-block-mixed),
   .#{$prefix}--content-block-mixed {
     .#{$prefix}--content-group-pictograms {
-      margin-left: -$carbon--spacing-05;
+      margin-left: -$spacing-05;
       .#{$prefix}--pictogram-item__row {
-        width: calc(100% + 16px);
-        max-width: calc(100% + 16px);
+        width: calc(100% + $spacing-05);
+        max-width: calc(100% + $spacing-05);
       }
     }
 
     .#{$prefix}--layout-1-3 {
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         .#{$prefix}--link-list__list.#{$prefix}--link-list__list--card {
-          margin-right: -$carbon--spacing-05;
+          margin-right: -$spacing-05;
         }
       }
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col-offset(1, 12);
+      @include breakpoint(lg) {
+        @include make-col-offset(1, 12);
       }
     }
 
@@ -32,7 +43,3 @@
     }
   }
 }
-
-@include exports('content-block-mixed') {
-  @include content-block-mixed;
-}
diff --git a/packages/styles/scss/components/content-block-mixed/_index.scss b/packages/styles/scss/components/content-block-mixed/_index.scss
new file mode 100644
index 00000000000..fd3f5184bc4
--- /dev/null
+++ b/packages/styles/scss/components/content-block-mixed/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-mixed';
+@use 'content-block-mixed';
+
+@include content-block-mixed.content-block-mixed;
diff --git a/packages/styles/scss/components/content-block-mixed/index.scss b/packages/styles/scss/components/content-block-mixed/index.scss
deleted file mode 100644
index 0695df315c1..00000000000
--- a/packages/styles/scss/components/content-block-mixed/index.scss
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-group/content-group';
-@import '../content-group-cards/index';
-@import '../content-group-pictograms/index';
-@import '../content-group-simple/index';
-@import 'content-block-mixed';
diff --git a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss
index 1e798b36cfc..925fae268ce 100755
--- a/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss
+++ b/packages/styles/scss/components/content-block-segmented/_content-block-segmented.scss
@@ -4,15 +4,22 @@
  * 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 '../../globals/vars';
-@import '../../globals/imports';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-group';
+@use '../../internal/content-item/content-item';
+@use '../image';
 
 @mixin content-block-segmented {
-  :host(#{$dds-prefix}-content-block-segmented),
+  :host(#{$c4d-prefix}-content-block-segmented),
   .#{$prefix}--content-block-segmented {
     .#{$prefix}--row {
       &.#{$prefix}--layout--border {
-        @include carbon--breakpoint('lg') {
+        @include breakpoint(lg) {
           padding-bottom: $spacing-13;
         }
 
@@ -27,14 +34,14 @@
     }
 
     .#{$prefix}--content-group__cta-row {
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         margin-left: 0;
       }
     }
 
     .#{$prefix}--content-block__cta-row {
       margin-bottom: $spacing-07;
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         margin-bottom: $spacing-13;
       }
     }
@@ -53,23 +60,23 @@
 
       &-border {
         margin-bottom: $spacing-07;
-        @include carbon--breakpoint('lg') {
+        @include breakpoint(lg) {
           margin-bottom: $spacing-13;
         }
       }
     }
   }
 
-  :host(#{$dds-prefix}-content-block-segmented)
+  :host(#{$c4d-prefix}-content-block-segmented)
     .#{$prefix}--content-block__children
     .#{$prefix}--content-block-segmented__media
     ::slotted(:not([slot])) {
     display: block;
-    margin-top: $carbon--layout-05;
-    margin-bottom: $carbon--layout-05;
+    margin-top: $spacing-10;
+    margin-bottom: $spacing-10;
   }
 
-  :host(#{$dds-prefix}-content-block-segmented)
+  :host(#{$c4d-prefix}-content-block-segmented)
     .#{$prefix}--content-block__children
     .#{$prefix}--content-block-segmented__media
     ::slotted(:not([slot]):last-of-type) {
@@ -78,14 +85,11 @@
 
   .#{$prefix}--content-block-segmented .#{$prefix}--content-group {
     display: block;
-    margin-top: $carbon--layout-05;
-    margin-bottom: $carbon--layout-05;
+    margin-top: $spacing-10;
+    margin-bottom: $spacing-10;
 
     &:last-of-type {
       margin-bottom: 0;
     }
   }
 }
-@include exports('content-block-segmented') {
-  @include content-block-segmented;
-}
diff --git a/packages/styles/scss/components/content-block-segmented/_index.scss b/packages/styles/scss/components/content-block-segmented/_index.scss
new file mode 100644
index 00000000000..f95726becd0
--- /dev/null
+++ b/packages/styles/scss/components/content-block-segmented/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-segmented';
+@use 'content-block-segmented';
+
+@include content-block-segmented.content-block-segmented;
diff --git a/packages/styles/scss/components/content-block-segmented/index.scss b/packages/styles/scss/components/content-block-segmented/index.scss
deleted file mode 100644
index 4fc0feb600e..00000000000
--- a/packages/styles/scss/components/content-block-segmented/index.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-group/content-group';
-@import '../../internal/content-item/content-item';
-@import '../image-with-caption/image-with-caption';
-@import 'content-block-segmented';
diff --git a/packages/styles/scss/components/content-block-simple/README.md b/packages/styles/scss/components/content-block-simple/README.md
deleted file mode 100644
index a9d3bbb9c8c..00000000000
--- a/packages/styles/scss/components/content-block-simple/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/content-block-simple/index';
-```
-
-#### Elements
-
-| Class                                | Description           |
-| ------------------------------------ | --------------------- |
-| `.bx--content-block-simple__content` | Content block content |
-
-#### Blocks
-
-| Class                       | Description                              |
-| --------------------------- | ---------------------------------------- |
-| `.bx--content-block-simple` | Highest level class name for the pattern |
diff --git a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
index 2351765644e..965241dfd52 100644
--- a/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
+++ b/packages/styles/scss/components/content-block-simple/_content-block-simple.scss
@@ -1,17 +1,19 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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.
  */
 
-@mixin content-block-simple {
-  .#{$prefix}--content-block {
-    // empty for now
-  }
+@use '@carbon/styles/scss/config' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-item/content-item';
+@use '../image';
 
+@mixin content-block-simple {
   .#{$prefix}--content-block-simple__media-video {
-    max-width: rem(640px);
+    max-width: to-rem(640px);
   }
 
   .#{$prefix}--content-block-simple__content {
@@ -22,7 +24,3 @@
     }
   }
 }
-
-@include exports('content-block-simple') {
-  @include content-block-simple;
-}
diff --git a/packages/styles/scss/components/content-block-simple/_index.scss b/packages/styles/scss/components/content-block-simple/_index.scss
new file mode 100644
index 00000000000..c6ff438e552
--- /dev/null
+++ b/packages/styles/scss/components/content-block-simple/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block-simple';
+@use 'content-block-simple';
+
+@include content-block-simple.content-block-simple;
diff --git a/packages/styles/scss/components/content-block-simple/index.scss b/packages/styles/scss/components/content-block-simple/index.scss
deleted file mode 100644
index 1deb6986c6e..00000000000
--- a/packages/styles/scss/components/content-block-simple/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-item/content-item';
-@import '../image/image';
diff --git a/packages/styles/scss/components/content-group-banner/_content-group-banner.scss b/packages/styles/scss/components/content-group-banner/_content-group-banner.scss
deleted file mode 100644
index f203de3c443..00000000000
--- a/packages/styles/scss/components/content-group-banner/_content-group-banner.scss
+++ /dev/null
@@ -1,68 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../internal/content-group/content-group';
-@import '../../globals/imports';
-
-@mixin content-group-banner {
-  :host(#{$dds-prefix}-content-group-banner),
-  .#{$prefix}--content-group-banner {
-    background: $ui-background;
-    padding-top: $spacing-07;
-    padding-bottom: $spacing-07;
-
-    @include carbon--breakpoint('md') {
-      padding-bottom: $spacing-09;
-    }
-
-    ::slotted(#{$dds-prefix}-content-group-heading),
-    .#{$prefix}--content-layout ::slotted([slot='heading']),
-    .#{$prefix}--content-group__title {
-      margin-bottom: 0;
-
-      @include carbon--breakpoint('md') {
-        grid-column: 1 / span 6;
-      }
-
-      @include carbon--breakpoint('lg') {
-        grid-column: 1 / span 8;
-      }
-    }
-
-    ::slotted(#{$dds-prefix}-link-list),
-    .#{$prefix}--content-layout ::slotted([slot='complementary']),
-    .#{$prefix}--link-list__list {
-      position: relative;
-      grid-area: auto;
-      margin-top: $spacing-07;
-      margin-bottom: 0;
-      padding-bottom: 0;
-
-      @include carbon--breakpoint('md') {
-        grid-column: 1 / span 6;
-      }
-
-      @include carbon--breakpoint('lg') {
-        grid-column: 9 / span 12;
-        margin: 0;
-        padding-left: $carbon--spacing-05;
-        padding-right: $carbon--spacing-05;
-        border-left: 1px solid $ui-03;
-
-        // Adjust the direction of the border line on RTL.
-        [dir='rtl'] & {
-          border-left: inherit;
-          border-right: 1px solid $ui-03;
-        }
-      }
-    }
-  }
-}
-
-@include exports('content-group-banner') {
-  @include content-group-banner;
-}
diff --git a/packages/styles/scss/components/content-group-cards/README.md b/packages/styles/scss/components/content-group-cards/README.md
deleted file mode 100644
index 288d6828a5a..00000000000
--- a/packages/styles/scss/components/content-group-cards/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/content-group-cards/index';
-```
-
-#### Elements
-
-| Class                                         | Description                                                                            |
-| --------------------------------------------- | -------------------------------------------------------------------------------------- |
-| `.bx--content-group-cards__container`         | Element containing all list section content                                            |
-| `.bx--content-group-cards__row`               | Vertical divisions across the viewport                                                 |
-| `.bx--content-group-cards__col`               | Horizonal divisions across the viewport and change in width at different screen widths |
-| `.bx--content-group-cards__title`             | Title for list section pattern                                                         |
-| `.bx--content-group-cards__divider_col`       | Horizonal division for divider element                                                 |
-| `.bx--content-group-cards__divider`           | Divider element                                                                        |
-| `.bx--content-group-cards-item__title`        | list section item title element                                                        |
-| `.bx--content-group-cards-item__content`      | list section item content element                                                      |
-| `.bx--content-group-cards-item__link`         | list section item Link element                                                         |
-| `.bx--content-group-cards-item__link__button` | list section item Link button element                                                  |
-
-#### Blocks
-
-| Class                            | Description                                                       |
-| -------------------------------- | ----------------------------------------------------------------- |
-| `.bx--content-group-cards`       | Highest level class name for the Content Array with cards pattern |
-| `.bx--content-group-cards-group` | Content Array with cards section group component class            |
-| `.bx--content-group-cards-item`  | Content Array with cards section item component class             |
diff --git a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
index c6b12d285d5..91934e16aad 100644
--- a/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
+++ b/packages/styles/scss/components/content-group-cards/_content-group-cards.scss
@@ -5,22 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
+@use 'sass:list';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-group';
+@use '../link-with-icon';
+@use '../card';
 
 @mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
+  color: $text-primary;
+  background: $background;
 }
 
 @mixin content-group-cards {
-  :host(#{$dds-prefix}-content-group-cards),
+  :host(#{$c4d-prefix}-content-group-cards),
   .#{$prefix}--content-group-cards {
     ::slotted([slot='copy']),
     .#{$prefix}--content-group__copy {
       margin-bottom: $spacing-09;
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         margin-bottom: $spacing-10;
       }
     }
@@ -29,34 +37,31 @@
   }
 
   .#{$prefix}--content-group-cards__row {
-    margin-left: -1rem;
-    margin-right: -1rem;
+    margin-left: -$spacing-05;
+    margin-right: -$spacing-05;
 
     display: grid;
 
-    @include carbon--breakpoint(md) {
+    @include breakpoint(md) {
       grid-template-columns: 1fr 1fr;
       grid-auto-rows: 1fr;
     }
   }
 
-  :host(#{$dds-prefix}-content-group-cards-item),
+  :host(#{$c4d-prefix}-content-group-cards-item),
   .#{$prefix}--content-group-cards-item__col {
-    margin-top: $carbon--grid-gutter--condensed / 2;
-    margin-bottom: $carbon--grid-gutter--condensed / 2;
-    padding-left: $carbon--grid-gutter--condensed / 2;
-    padding-right: $carbon--grid-gutter--condensed / 2;
+    margin-top: list.slash($grid-gutter, 2);
+    margin-bottom: list.slash($grid-gutter, 2);
+    padding-left: list.slash($grid-gutter, 2);
+    padding-right: list.slash($grid-gutter, 2);
 
     &:focus {
       outline: none;
     }
   }
 
-  :host(#{$dds-prefix}-content-group-cards-item) {
-    padding: $carbon--grid-gutter--condensed / 2;
+  :host(#{$c4d-prefix}-content-group-cards-item) {
+    padding: list.slash($grid-gutter, 2);
     background: none;
   }
 }
-@include exports('content-group-cards') {
-  @include content-group-cards;
-}
diff --git a/packages/styles/scss/components/content-group-cards/_index.scss b/packages/styles/scss/components/content-group-cards/_index.scss
new file mode 100644
index 00000000000..d8cb5e3e78a
--- /dev/null
+++ b/packages/styles/scss/components/content-group-cards/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-group-cards';
+@use 'content-group-cards';
+
+@include content-group-cards.content-group-cards;
diff --git a/packages/styles/scss/components/content-group-cards/index.scss b/packages/styles/scss/components/content-group-cards/index.scss
deleted file mode 100644
index cc2ab665a6a..00000000000
--- a/packages/styles/scss/components/content-group-cards/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-group/content-group';
-@import '../link-with-icon/link-with-icon';
-@import '../card/index';
-@import 'content-group-cards';
diff --git a/packages/styles/scss/components/content-group-horizontal/_content-group-horizontal.scss b/packages/styles/scss/components/content-group-horizontal/_content-group-horizontal.scss
deleted file mode 100644
index cc8dc0b2eac..00000000000
--- a/packages/styles/scss/components/content-group-horizontal/_content-group-horizontal.scss
+++ /dev/null
@@ -1,41 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal"
-@warn 'Deprecated scss import for `content-group-horizontal`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal`';
-@import '../content-block-horizontal/content-block-horizontal';
-
-@mixin content-group-horizontal {
-  :host(#{$dds-prefix}-content-group-horizontal) ::slotted([slot='heading']),
-  .#{$prefix}--content-group-horizontal .#{$prefix}--content-block__heading {
-    margin-bottom: $layout-05;
-    @include carbon--breakpoint('lg') {
-      margin-bottom: $layout-03;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal):last-child,
-  .#{$prefix}--content-group-horizontal
-    .#{$prefix}--content-item-horizontal__item:last-child {
-    @include carbon--breakpoint('max') {
-      padding-bottom: $layout-07;
-    }
-    @include carbon--breakpoint('lg') {
-      padding-bottom: $layout-07;
-    }
-    @include carbon--breakpoint('md') {
-      padding-bottom: $layout-06;
-    }
-    @include carbon--breakpoint('sm') {
-      padding-bottom: $layout-05;
-    }
-  }
-}
-
-@include exports('content-group-horizontal') {
-  @include content-group-horizontal;
-}
diff --git a/packages/styles/scss/components/content-group-pictograms/README.md b/packages/styles/scss/components/content-group-pictograms/README.md
deleted file mode 100644
index 20f04f5fcd6..00000000000
--- a/packages/styles/scss/components/content-group-pictograms/README.md
+++ /dev/null
@@ -1,24 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/content-group-pictograms/index';
-```
-
-#### Elements
-
-| Class                                 | Description                                           |
-| ------------------------------------- | ----------------------------------------------------- |
-| `.bx--content-group-pictograms__row`  | Horizontal wrapper of Content Group Pictogram pattern |
-| `.bx--content-group-pictograms__col`  | Wrapper for column size handling of Content Group     |
-| `.bx--content-group-pictograms__item` | Pictogram Item                                        |
-
-#### Blocks
-
-| Class                                 | Description                                                       |
-| ------------------------------------- | ----------------------------------------------------------------- |
-| `.bx--content-group-pictograms`       | Highest level class name for the Content Group Pictograms pattern |
-| `.bx--content-group-pictograms__item` | Pictogram Item components                                         |
diff --git a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss
index 60e13208aee..b59b79b2bf9 100644
--- a/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss
+++ b/packages/styles/scss/components/content-group-pictograms/_content-group-pictograms.scss
@@ -5,15 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/vars' as *;
+@use '../pictogram-item';
+
 @mixin content-group-pictograms {
-  :host(#{$dds-prefix}-content-group-pictograms)
-    ::slotted(#{$dds-prefix}-content-group-copy),
+  :host(#{$c4d-prefix}-content-group-pictograms)
+    ::slotted(#{$c4d-prefix}-content-group-copy),
   .#{$prefix}--content-group-pictograms .#{$prefix}--content-group__copy {
     margin-bottom: $spacing-05;
     margin-left: $spacing-05;
     margin-right: $spacing-05;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-bottom: $spacing-07;
     }
   }
@@ -34,7 +40,3 @@
     }
   }
 }
-
-@include exports('content-group-pictograms') {
-  @include content-group-pictograms;
-}
diff --git a/packages/styles/scss/components/content-group-pictograms/_index.scss b/packages/styles/scss/components/content-group-pictograms/_index.scss
new file mode 100644
index 00000000000..a7a56d4e43a
--- /dev/null
+++ b/packages/styles/scss/components/content-group-pictograms/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-group-pictograms';
+@use 'content-group-pictograms';
+
+@include content-group-pictograms.content-group-pictograms;
diff --git a/packages/styles/scss/components/content-group-pictograms/index.scss b/packages/styles/scss/components/content-group-pictograms/index.scss
deleted file mode 100644
index db4b209ce6d..00000000000
--- a/packages/styles/scss/components/content-group-pictograms/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../pictogram-item/pictogram-item';
-@import './content-group-pictograms';
diff --git a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss
index e8df1bf11c1..92e474f90c0 100644
--- a/packages/styles/scss/components/content-group-simple/_content-group-simple.scss
+++ b/packages/styles/scss/components/content-group-simple/_content-group-simple.scss
@@ -5,19 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-group';
+
 @mixin content-group-simple {
-  :host(#{$dds-prefix}-content-group-simple)
-    ::slotted(#{$dds-prefix}-content-group-copy),
+  :host(#{$c4d-prefix}-content-group-simple)
+    ::slotted(#{$c4d-prefix}-content-group-copy),
   .#{$prefix}--content-group-simple .#{$prefix}--content-group__copy {
     margin-bottom: $spacing-07;
   }
 
   .bx--content-group__cta {
-    max-width: calc(320px + 1rem);
+    max-width: calc(320px + $spacing-05);
     padding-right: 0;
   }
 }
-
-@include exports('content-group-simple') {
-  @include content-group-simple;
-}
diff --git a/packages/styles/scss/components/content-group-simple/_index.scss b/packages/styles/scss/components/content-group-simple/_index.scss
new file mode 100644
index 00000000000..27568007005
--- /dev/null
+++ b/packages/styles/scss/components/content-group-simple/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-group-simple';
+@use 'content-group-simple';
+
+@include content-group-simple.content-group-simple;
diff --git a/packages/styles/scss/components/content-group-simple/index.scss b/packages/styles/scss/components/content-group-simple/index.scss
deleted file mode 100644
index 008f15a76c4..00000000000
--- a/packages/styles/scss/components/content-group-simple/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../internal/content-group/content-group';
-@import '../../globals/imports';
-@import 'content-group-simple';
diff --git a/packages/styles/scss/components/content-group/_content-group.scss b/packages/styles/scss/components/content-group/_content-group.scss
new file mode 100644
index 00000000000..ef3b3148344
--- /dev/null
+++ b/packages/styles/scss/components/content-group/_content-group.scss
@@ -0,0 +1,37 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-block';
+@use '@carbon/ibmdotcom-styles/scss/internal/content-group';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin content-group {
+  :host(#{$c4d-prefix}-content-group),
+  :host(#{$c4d-prefix}-content-group-copy),
+  :host(#{$c4d-prefix}-content-group-paragraph) {
+    display: block;
+  }
+
+  :host(#{$c4d-prefix}-content-group-copy) {
+    @include type-style('body-02');
+  }
+  :host(#{$c4d-prefix}-content-group-heading),
+  :host(#{$c4d-prefix}-content-group-copy) {
+    max-width: 40rem;
+  }
+  :host(#{$c4d-prefix}-content-group) {
+    ::slotted([slot='footer']) {
+      background: none;
+      height: auto;
+    }
+  }
+  .#{$prefix}--content-layout__body {
+    display: block;
+  }
+}
diff --git a/packages/styles/scss/components/content-group/_index.scss b/packages/styles/scss/components/content-group/_index.scss
new file mode 100644
index 00000000000..f770178b3f9
--- /dev/null
+++ b/packages/styles/scss/components/content-group/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-group';
+@use 'content-group';
+
+@include content-group.content-group;
diff --git a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss b/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss
deleted file mode 100644
index 4e67b3ccbe6..00000000000
--- a/packages/styles/scss/components/content-item-horizontal-media/_content-item-horizontal-media.scss
+++ /dev/null
@@ -1,181 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/imports';
-@import '../link-list/index';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-
-@mixin content-item-horizontal-media {
-  :host(#{$dds-prefix}-content-item-horizontal-media) {
-    padding: $carbon--spacing-07 $carbon--spacing-05 $carbon--spacing-10;
-    display: block;
-
-    @include carbon--breakpoint(md) {
-      padding-bottom: $carbon--spacing-10;
-    }
-    @include carbon--breakpoint(lg) {
-      padding-top: $carbon--spacing-07;
-      padding-bottom: $carbon--spacing-10;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-media),
-  :host(#{$dds-prefix}-content-item-horizontal-media-featured)
-    ::slotted([slot='heading']),
-  :host(#{$dds-prefix}-content-item-horizontal-media-copy)
-    ::slotted(:not([slot])),
-  :host(#{$dds-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow,
-  .#{$prefix}--content-item-horizontal__item--heading,
-  .#{$prefix}--content-item-horizontal__item--copy {
-    width: 100%;
-    max-width: 100%;
-    min-width: 0;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow {
-    color: $text-05;
-    padding-bottom: $spacing-03;
-    @include carbon--type-style('label-01');
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-media)
-    ::slotted([slot='heading']),
-  :host(#{$dds-prefix}-content-item-horizontal-media-featured)
-    ::slotted([slot='heading']),
-  .#{$prefix}--content-item-horizontal__item--heading {
-    display: block;
-    color: $text-01;
-    margin-bottom: $carbon--spacing-07;
-    @include carbon--type-style('expressive-heading-03', true);
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-media-copy)
-    ::slotted(:not([slot])) {
-    margin-bottom: $carbon--spacing-07;
-    max-width: rem(640px);
-    p {
-      color: $text-01;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-media-video) {
-    position: relative;
-    text-align: left;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-media)
-    .#{$prefix}--content-item__cta,
-  :host(#{$dds-prefix}-content-item-horizontal-media-featured)
-    .#{$prefix}--content-item__cta,
-  .#{$prefix}--content-item-horizontal__item--cta {
-    margin-top: auto;
-    margin-bottom: $carbon--spacing-07;
-
-    .#{$prefix}--link-list {
-      padding: 0;
-      &:first-of-type {
-        padding: 0;
-      }
-    }
-
-    .#{$prefix}--link-list li {
-      @include carbon--breakpoint(md) {
-        margin-bottom: $carbon--spacing-05;
-      }
-    }
-  }
-
-  .#{$prefix}--content-item-horizontal__row {
-    width: 100%;
-    display: grid;
-    grid-auto-flow: dense;
-    grid-template-columns: repeat(4, 1fr);
-    column-gap: $carbon--spacing-07;
-
-    @include carbon--breakpoint(lg) {
-      grid-template-columns: repeat(12, 1fr);
-    }
-
-    .#{$prefix}--content-item-horizontal__col {
-      text-align: left;
-      grid-column: 1 / span 4;
-
-      &:first-of-type {
-        margin-inline-end: $carbon--spacing-07;
-      }
-
-      &:last-of-type {
-        @include carbon--breakpoint(lg) {
-          margin-block-start: 0;
-          grid-column: 5 / span 8;
-        }
-      }
-    }
-
-    &.#{$prefix}--content-item-horizontal-media__align-left {
-      .#{$prefix}--content-item-horizontal__col {
-        &:first-of-type {
-          @include carbon--breakpoint(lg) {
-            margin-inline-end: 0;
-            grid-column: 1 / span 8;
-          }
-        }
-
-        &:last-of-type {
-          @include carbon--breakpoint(lg) {
-            margin-inline-end: $carbon--spacing-07;
-            grid-column: 9 / span 4;
-          }
-        }
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-media-featured) {
-    display: block;
-    position: relative;
-    padding-block-start: $carbon--spacing-07;
-    margin-block-end: $carbon--spacing-10;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: $carbon--spacing-05 * -1;
-      right: $carbon--spacing-05 * -1;
-      height: 1px;
-      background-color: $ui-03;
-    }
-
-    .#{$prefix}--content-item-horizontal__row {
-      .#{$prefix}--content-item-horizontal__col {
-        &:last-of-type {
-          @include carbon--breakpoint-down(md) {
-            margin-block-start: 0;
-          }
-        }
-      }
-    }
-
-    ::slotted([slot='media']) {
-      grid-column: 1 / span 4;
-      @include carbon--breakpoint(lg) {
-        grid-column: 1 / span 12;
-      }
-    }
-    ::slotted(#{$dds-prefix}-image) {
-      max-width: none;
-      margin-top: 0;
-    }
-  }
-}
-
-@include exports('content-item-horizontal-media') {
-  @include content-item-horizontal-media;
-}
diff --git a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss
deleted file mode 100644
index cc5c737ba54..00000000000
--- a/packages/styles/scss/components/content-item-horizontal/_content-item-horizontal.scss
+++ /dev/null
@@ -1,321 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 '../../globals/imports';
-@import '../link-list/index';
-
-@mixin content-item-horizontal {
-  // Web component
-  :host(#{$dds-prefix}-content-item-horizontal),
-  // React
-  .#{$prefix}--content-item-horizontal__item {
-    @include carbon--make-row;
-
-    border-top: 1px solid $ui-03;
-    padding-left: $carbon--spacing-05;
-    padding-right: $carbon--spacing-05;
-
-    @include carbon--breakpoint(sm) {
-      padding-top: $carbon--spacing-07;
-      padding-bottom: $carbon--spacing-10;
-    }
-
-    @include carbon--breakpoint(lg) {
-      padding-top: $carbon--spacing-07;
-      padding-bottom: $carbon--layout-05;
-    }
-
-    &[thumbnail] {
-      @include carbon--breakpoint(md) {
-        min-height: rem(306px);
-      }
-
-      @include carbon--breakpoint(lg) {
-        min-height: rem(272px);
-      }
-
-      @include carbon--breakpoint(xlg) {
-        min-height: rem(252px);
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal) {
-    margin: 0;
-  }
-
-  .#{$prefix}--content-item-horizontal__row {
-    min-height: 160px;
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    @include carbon--breakpoint(md) {
-      flex-direction: row;
-    }
-
-    :host(#{$dds-prefix}-content-item-horizontal)[thumbnail] & {
-      justify-content: space-between;
-      min-height: auto;
-    }
-  }
-
-  .#{$prefix}--content-item-horizontal__col {
-    // React styles - only accounting for the default variation
-    @include carbon--make-col-ready;
-
-    // Web component layout styles - accommodating the thumbnail variation
-    &--1,
-    &--2 {
-      @include carbon--make-col-ready;
-    }
-
-    &--1 {
-      @include carbon--make-col(4, 4);
-
-      @include carbon--breakpoint(md) {
-        @include carbon--make-row;
-
-        margin: 0;
-        padding: 0;
-        width: auto;
-      }
-
-      :host(#{$dds-prefix}-content-item-horizontal)[thumbnail] & {
-        @include carbon--breakpoint(md) {
-          @include carbon--make-col(4, 8);
-        }
-
-        @include carbon--breakpoint(lg) {
-          @include carbon--make-col(8, 12);
-
-          display: flex;
-        }
-      }
-    }
-
-    &--2 {
-      grid-column: 1 / span 4;
-      padding-left: 0;
-      padding-right: 0;
-      @include carbon--breakpoint(md) {
-        grid-column: 5 / span 4;
-        grid-row: 1 / span 2;
-      }
-      @include carbon--breakpoint(lg) {
-        grid-column: 9 / span 4;
-        grid-row: 1 / span 1;
-      }
-      :host(#{$dds-prefix}-content-item-horizontal)[thumbnail] & {
-        @include carbon--breakpoint(md) {
-          @include carbon--make-col(3, 8);
-        }
-
-        @include carbon--breakpoint(lg) {
-          @include carbon--make-col(3, 12);
-        }
-      }
-    }
-  }
-
-  // Web component
-  .#{$prefix}--content-item-horizontal__heading-wrapper,
-  .#{$prefix}--content-item-horizontal__content-wrapper,
-  // React
-  .#{$prefix}--content-item-horizontal__col:first-of-type,
-  .#{$prefix}--content-item-horizontal__col:last-of-type {
-    :host(#{$dds-prefix}-content-item-horizontal)[thumbnail] & {
-      @include carbon--make-col(4, 4);
-
-      @include carbon--breakpoint(lg) {
-        @include carbon--make-col(4, 8);
-      }
-    }
-  }
-
-  // Web component
-  .#{$prefix}--content-item-horizontal__heading-wrapper,
-  // React
-  .#{$prefix}--content-item-horizontal__col:first-of-type {
-    @include carbon--breakpoint(md) {
-      @include carbon--make-col(6, 12);
-    }
-    @include carbon--breakpoint(lg) {
-      @include carbon--make-col(4, 12);
-    }
-  }
-
-  // Web component
-  .#{$prefix}--content-item-horizontal__content-wrapper,
-  // React
-  .#{$prefix}--content-item-horizontal__col:last-of-type {
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-
-    @include carbon--breakpoint(lg) {
-      @include carbon--make-col(8, 12);
-
-      display: flex;
-    }
-  }
-
-  .#{$prefix}--content-item-horizontal__content-wrapper {
-    grid-column: 1 / span 4;
-    @include carbon--breakpoint(lg) {
-      grid-column: 5 / span 4;
-      padding-left: $spacing-04;
-    }
-  }
-
-  .#{$prefix}--content-item-horizontal__content-wrapper_with-media {
-    width: 100%;
-    @include carbon--breakpoint(lg) {
-      @include carbon--make-col(8, 12);
-
-      padding-left: $spacing-04;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal) ::slotted([slot='media']) {
-    display: block;
-    padding-top: $spacing-07;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal) ::slotted([slot='heading']),
-  :host(#{$dds-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])),
-  :host(#{$dds-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow,
-  .#{$prefix}--content-item-horizontal__item--heading,
-  .#{$prefix}--content-item-horizontal__item--copy {
-    @include carbon--breakpoint(md) {
-      max-width: 90%;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])) {
-    max-width: rem(640px);
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-eyebrow),
-  .#{$prefix}--content-item-horizontal__item--eyebrow {
-    color: $text-05;
-    padding-bottom: $spacing-03;
-    @include carbon--type-style('label-02');
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal) ::slotted([slot='heading']),
-  .#{$prefix}--content-item-horizontal__item--heading {
-    display: block;
-    color: $text-01;
-    margin-bottom: $carbon--spacing-07;
-
-    @include carbon--type-style('expressive-heading-03', true);
-  }
-
-  ::slotted([slot='heading']) {
-    margin-bottom: $carbon--spacing-07;
-    max-width: 100%;
-    @include carbon--breakpoint(lg) {
-      padding-left: 0;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal)[thumbnail] {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
-    grid-auto-flow: dense;
-
-    @include carbon--breakpoint(md) {
-      grid-template-columns: repeat(8, 1fr);
-      column-gap: $spacing-07;
-    }
-    @include carbon--breakpoint(lg) {
-      grid-template-columns: repeat(12, 1fr);
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal[thumbnail])
-    .#{$prefix}--content-item-horizontal__heading-wrapper {
-    max-width: 100%;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal[thumbnail])
-    .#{$prefix}--content-item-horizontal__content-wrapper {
-    @include carbon--breakpoint-down(md) {
-      margin-bottom: $spacing-07;
-    }
-
-    max-width: 100%;
-    padding-left: 0;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal[thumbnail]) {
-    .#{$prefix}--content-item-horizontal__body-wrapper {
-      grid-column: 1 / span 4;
-      max-width: 100%;
-
-      @include carbon--breakpoint(lg) {
-        grid-column: 1 / span 8;
-        display: contents;
-      }
-    }
-    .#{$prefix}--content-item-horizontal__col--2 {
-      max-width: 100%;
-      grid-column: 1 / span 4;
-      @include carbon--breakpoint(md) {
-        grid-column: 5 / span 4;
-      }
-      @include carbon--breakpoint(lg) {
-        grid-column: 9 / span 4;
-      }
-    }
-  }
-
-  .#{$prefix}--content-item-horizontal__heading-wrapper {
-    grid-column: 1 / span 4;
-    padding-left: 0;
-    padding-right: 0;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-copy) ::slotted(:not([slot])),
-  .#{$prefix}--content-item-horizontal__item--copy {
-    margin-bottom: $carbon--spacing-07;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal-thumbnail-copy)
-    ::slotted(#{$dds-prefix}-content-item-paragraph) {
-    margin-bottom: $carbon--spacing-07;
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal) .#{$prefix}--content-item__cta,
-  .#{$prefix}--content-item-horizontal__item--cta {
-    .#{$prefix}--link-list {
-      padding: 0;
-
-      &:first-of-type {
-        padding: 0;
-      }
-    }
-
-    .#{$prefix}--link-list li:last-of-type {
-      margin-bottom: 0;
-    }
-  }
-
-  :host(#{$dds-prefix}-content-item-horizontal) ::slotted([slot='thumbnail']) {
-    @include carbon--breakpoint(md) {
-      @include carbon--make-col(3, 3);
-
-      margin-top: 0;
-      padding-right: 0;
-    }
-  }
-}
-
-@include exports('content-item-horizontal') {
-  @include content-item-horizontal;
-}
diff --git a/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
new file mode 100644
index 00000000000..896168a13b5
--- /dev/null
+++ b/packages/styles/scss/components/content-item-row-media/_content-item-row-media.scss
@@ -0,0 +1,190 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/vars' as *;
+@use '../link-list';
+
+@mixin content-item-row-media {
+  :host(#{$c4d-prefix}-content-item-row-media) {
+    padding: $spacing-07 0 $spacing-10;
+    display: block;
+
+    @include breakpoint(md) {
+      padding-bottom: $spacing-10;
+    }
+
+    @include breakpoint(lg) {
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-10;
+    }
+
+    ::slotted([slot='media']) {
+      margin-top: $spacing-07;
+
+      @include breakpoint(md) {
+        margin-top: $spacing-09;
+      }
+
+      @include breakpoint(lg) {
+        margin-top: 0;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-media),
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])),
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
+    width: 100%;
+    max-width: 100%;
+    min-width: 0;
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
+    color: $text-helper;
+    padding-bottom: $spacing-03;
+    @include type-style('label-01');
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-media) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    ::slotted([slot='heading']) {
+    display: block;
+    color: $text-primary;
+    margin-bottom: $spacing-07;
+    @include type-style('fluid-heading-03', true);
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-media-copy) ::slotted(:not([slot])) {
+    max-width: to-rem(640px);
+    p {
+      color: $text-primary;
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-media-video) {
+    position: relative;
+    text-align: left;
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-media) .#{$prefix}--content-item__cta,
+  :host(#{$c4d-prefix}-content-item-row-media-featured)
+    .#{$prefix}--content-item__cta {
+    margin-top: auto;
+
+    .#{$prefix}--link-list {
+      padding: 0;
+      &:first-of-type {
+        padding: 0;
+      }
+    }
+
+    .#{$prefix}--link-list li {
+      @include breakpoint(md) {
+        margin-bottom: $spacing-05;
+      }
+    }
+  }
+
+  .#{$prefix}--content-item-row__row {
+    width: 100%;
+    display: grid;
+    grid-auto-flow: dense;
+    grid-template-columns: repeat(4, 1fr);
+    column-gap: $spacing-07;
+
+    @include breakpoint(lg) {
+      grid-template-columns: repeat(12, 1fr);
+    }
+
+    .#{$prefix}--content-item-row__col {
+      text-align: left;
+      grid-column: 1 / span 4;
+
+      &:first-of-type {
+        margin-inline-end: $spacing-07;
+      }
+
+      &:last-of-type {
+        @include breakpoint(lg) {
+          margin-block-start: 0;
+          grid-column: 5 / span 8;
+        }
+      }
+    }
+
+    &.#{$prefix}--content-item-row-media__align-left {
+      .#{$prefix}--content-item-row__col {
+        &:first-of-type {
+          @include breakpoint(lg) {
+            margin-inline-end: 0;
+            grid-column: 1 / span 8;
+          }
+        }
+
+        &:last-of-type {
+          @include breakpoint(lg) {
+            margin-inline-end: $spacing-07;
+            grid-column: 9 / span 4;
+          }
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-media-featured) {
+    display: block;
+    position: relative;
+    padding-block-start: $spacing-07;
+    margin-block-end: $spacing-10;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: $spacing-05 * -1;
+      right: $spacing-05 * -1;
+      height: 1px;
+      background-color: $layer-accent-01;
+    }
+
+    .#{$prefix}--content-item-row__row {
+      .#{$prefix}--content-item-row__col {
+        &:last-of-type {
+          @include breakpoint-down(md) {
+            margin-block-start: 0;
+          }
+        }
+      }
+    }
+
+    ::slotted([slot='media']) {
+      grid-column: 1 / span 4;
+      margin-top: $spacing-07;
+
+      @include breakpoint(md) {
+        margin-top: $spacing-09;
+      }
+
+      @include breakpoint(lg) {
+        grid-column: 1 / span 12;
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-image) {
+      max-width: none;
+      margin-top: 0;
+    }
+  }
+}
diff --git a/packages/styles/scss/components/content-item-row-media/_index.scss b/packages/styles/scss/components/content-item-row-media/_index.scss
new file mode 100644
index 00000000000..7398bdaa295
--- /dev/null
+++ b/packages/styles/scss/components/content-item-row-media/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-item-row-media';
+@use 'content-item-row-media';
+
+@include content-item-row-media.content-item-row-media;
diff --git a/packages/styles/scss/components/content-item-row/_content-item-row.scss b/packages/styles/scss/components/content-item-row/_content-item-row.scss
new file mode 100644
index 00000000000..603bfb41d8f
--- /dev/null
+++ b/packages/styles/scss/components/content-item-row/_content-item-row.scss
@@ -0,0 +1,270 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../link-list';
+
+@mixin content-item-row {
+  :host(#{$c4d-prefix}-content-item-row) {
+    @include make-row;
+
+    border-top: 1px solid $layer-accent-01;
+    margin: 0;
+
+    @include breakpoint(sm) {
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-10;
+    }
+
+    @include breakpoint(lg) {
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-10;
+    }
+  }
+
+  .#{$prefix}--content-item-row__row {
+    min-height: $spacing-13;
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    @include breakpoint(md) {
+      flex-direction: row;
+    }
+
+    :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
+      justify-content: space-between;
+      min-height: auto;
+    }
+  }
+
+  .#{$prefix}--content-item-row__col {
+    // Web component layout styles - accommodating the thumbnail variation
+    &--1,
+    &--2 {
+      @include make-col-ready;
+    }
+
+    &--1 {
+      @include make-col(4, 4);
+
+      @include breakpoint(md) {
+        @include make-row;
+
+        margin: 0;
+        padding: 0;
+        width: auto;
+      }
+
+      :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
+        @include breakpoint(md) {
+          @include make-col(4, 8);
+        }
+
+        @include breakpoint(lg) {
+          @include make-col(8, 12);
+
+          display: flex;
+        }
+      }
+    }
+
+    &--2 {
+      grid-column: 1 / span 4;
+      padding-left: 0;
+      padding-right: 0;
+      @include breakpoint(md) {
+        grid-column: 5 / span 4;
+        grid-row: 1 / span 2;
+      }
+      @include breakpoint(lg) {
+        grid-column: 9 / span 4;
+        grid-row: 1 / span 1;
+      }
+      :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
+        @include breakpoint(md) {
+          @include make-col(3, 8);
+        }
+
+        @include breakpoint(lg) {
+          @include make-col(3, 12);
+        }
+      }
+    }
+  }
+
+  .#{$prefix}--content-item-row__heading-wrapper,
+  .#{$prefix}--content-item-row__content-wrapper {
+    :host(#{$c4d-prefix}-content-item-row)[thumbnail] & {
+      @include make-col(4, 4);
+
+      @include breakpoint(lg) {
+        @include make-col(4, 8);
+      }
+    }
+  }
+
+  .#{$prefix}--content-item-row__heading-wrapper {
+    grid-column: 1 / span 4;
+    padding-left: 0;
+    padding-right: 0;
+
+    @include breakpoint(md) {
+      @include make-col(6, 12);
+    }
+    @include breakpoint(lg) {
+      @include make-col(4, 12);
+    }
+  }
+
+  .#{$prefix}--content-item-row__content-wrapper {
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    grid-column: 1 / span 4;
+
+    @include breakpoint(lg) {
+      @include make-col(8, 12);
+
+      display: flex;
+      grid-column: 5 / span 4;
+      padding-left: $spacing-04;
+    }
+  }
+
+  .#{$prefix}--content-item-row__content-wrapper_with-media {
+    width: 100%;
+    @include breakpoint(lg) {
+      @include make-col(8, 12);
+
+      padding-left: $spacing-04;
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='media']) {
+    display: block;
+    padding-top: $spacing-07;
+    @include breakpoint(md) {
+      padding-top: $spacing-09;
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-copy) ::slotted(:not([slot])) {
+    max-width: to-rem(640px);
+  }
+
+  :host(#{$c4d-prefix}-content-item-row-eyebrow) {
+    display: block;
+    color: $text-helper;
+    padding-bottom: $spacing-03;
+    @include type-style('label-02');
+  }
+
+  :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='heading']) {
+    display: block;
+    color: $text-primary;
+    margin-bottom: $spacing-07;
+
+    @include type-style('fluid-heading-03', true);
+  }
+
+  ::slotted([slot='heading']) {
+    margin-bottom: $spacing-07;
+    max-width: 100%;
+    @include breakpoint(lg) {
+      padding-left: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row)[thumbnail] {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+    grid-auto-flow: dense;
+
+    @include breakpoint(md) {
+      min-height: to-rem(306px);
+      grid-template-columns: repeat(8, 1fr);
+      column-gap: $spacing-07;
+    }
+
+    @include breakpoint(lg) {
+      min-height: to-rem(272px);
+      grid-template-columns: repeat(12, 1fr);
+    }
+
+    @include breakpoint(xlg) {
+      min-height: to-rem(252px);
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row[thumbnail])
+    .#{$prefix}--content-item-row__heading-wrapper {
+    max-width: 100%;
+  }
+
+  :host(#{$c4d-prefix}-content-item-row[thumbnail])
+    .#{$prefix}--content-item-row__content-wrapper {
+    @include breakpoint-down(md) {
+      margin-bottom: $spacing-07;
+    }
+
+    max-width: 100%;
+    padding-left: 0;
+  }
+
+  :host(#{$c4d-prefix}-content-item-row[thumbnail]) {
+    .#{$prefix}--content-item-row__body-wrapper {
+      grid-column: 1 / span 4;
+      max-width: 100%;
+
+      @include breakpoint(lg) {
+        grid-column: 1 / span 8;
+        display: contents;
+      }
+    }
+    .#{$prefix}--content-item-row__col--2 {
+      max-width: 100%;
+      grid-column: 1 / span 4;
+      @include breakpoint(md) {
+        grid-column: 5 / span 4;
+      }
+      @include breakpoint(lg) {
+        grid-column: 9 / span 4;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row) .#{$prefix}--content-item__cta {
+    .#{$prefix}--link-list {
+      padding: 0;
+
+      &:first-of-type {
+        padding: 0;
+      }
+    }
+
+    .#{$prefix}--link-list li:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-content-item-row) ::slotted([slot='thumbnail']) {
+    @include breakpoint(md) {
+      @include make-col(3, 3);
+
+      margin-top: 0;
+      padding-right: 0;
+    }
+  }
+}
diff --git a/packages/styles/scss/components/content-item-row/_index.scss b/packages/styles/scss/components/content-item-row/_index.scss
new file mode 100644
index 00000000000..1cb41ca9bdc
--- /dev/null
+++ b/packages/styles/scss/components/content-item-row/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-item-row';
+@use 'content-item-row';
+
+@include content-item-row.content-item-row;
diff --git a/packages/styles/scss/components/cta-block/_cta-block.scss b/packages/styles/scss/components/cta-block/_cta-block.scss
index 0fea90dbb2c..d11a20b3b01 100644
--- a/packages/styles/scss/components/cta-block/_cta-block.scss
+++ b/packages/styles/scss/components/cta-block/_cta-block.scss
@@ -1,88 +1,99 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 '../buttongroup/_buttongroup';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-item/content-item';
+@use '../button-group';
 
 @mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
+  color: $text-primary;
+  background: $background;
 
   .#{$prefix}--content-item__heading {
-    color: $text-01;
+    color: $text-primary;
   }
 
   .#{$prefix}--content-item__copy {
     p {
-      color: $text-01;
+      color: $text-primary;
     }
   }
 
   .#{$prefix}--content-item__cta {
-    color: $link-01;
+    color: $link-primary;
   }
 }
 
-@mixin cta-block--pattern {
-  :host(#{$dds-prefix}-cta-block),
+@mixin cta-block {
+  :host(#{$c4d-prefix}-cta-block),
   .#{$prefix}--cta-block {
-    padding-top: $carbon--layout-03;
-    padding-bottom: $carbon--layout-05;
-    @include carbon--breakpoint('lg') {
-      padding-top: $carbon--layout-05;
+    padding-top: $spacing-07;
+    padding-bottom: $spacing-10;
+    @include breakpoint(lg) {
+      padding-top: $spacing-10;
     }
 
     .#{$prefix}--cta-block__cta {
-      padding-bottom: $carbon--layout-05;
-      @include carbon--breakpoint('md') {
-        padding-bottom: $carbon--layout-06;
+      padding-bottom: $spacing-10;
+      @include breakpoint(md) {
+        padding-bottom: $spacing-12;
       }
-      @include carbon--breakpoint('lg') {
-        padding-bottom: $carbon--layout-07;
+      @include breakpoint(lg) {
+        padding-bottom: $spacing-13;
       }
 
       .#{$prefix}--buttongroup {
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           flex-direction: row;
         }
       }
 
       .#{$prefix}--buttongroup-item {
-        @include carbon--breakpoint('md') {
-          padding-right: $carbon--layout-03;
+        @include breakpoint(md) {
+          padding-right: $spacing-07;
         }
       }
     }
 
     .#{$prefix}--content-block {
-      padding-top: $carbon--layout-03;
+      padding-top: $spacing-07;
       padding-bottom: 0;
 
-      @include carbon--breakpoint('lg') {
-        padding-top: $carbon--layout-05;
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
       }
     }
 
     .#{$prefix}--content-block__heading,
     .#{$prefix}--content-block__copy {
       width: 90%;
-      max-width: rem(640px);
+      max-width: to-rem(640px);
 
-      @include carbon--breakpoint('sm') {
+      @include breakpoint(sm) {
         width: 100%;
       }
     }
 
     .#{$prefix}--content-block__heading {
-      @include carbon--type-style('expressive-heading-05', true);
+      @include type-style('fluid-heading-05', true);
     }
 
     .#{$prefix}--content-block__copy {
       p {
         margin-bottom: 0;
-        @include carbon--type-style('expressive-heading-03', true);
+        @include type-style('fluid-heading-03', true);
       }
     }
 
@@ -92,25 +103,25 @@
 
     .#{$prefix}--helper-wrapper {
       .#{$prefix}--content-item-wrapper {
-        @include carbon--make-row;
+        @include make-row;
 
         .#{$prefix}--content-item {
           width: 100%;
           margin-bottom: 0;
-          padding-bottom: $carbon--spacing-05;
+          padding-bottom: $spacing-05;
           position: relative;
 
-          @include carbon--make-col-ready;
+          @include make-col-ready;
 
-          @include carbon--breakpoint('md') {
-            @include carbon--make-col(4, 8);
+          @include breakpoint(md) {
+            @include make-col(4, 8);
           }
 
           &:last-of-type {
-            margin-top: $carbon--spacing-05;
+            margin-top: $spacing-05;
 
-            @include carbon--breakpoint('md') {
-              margin-top: $carbon--spacing-07;
+            @include breakpoint(md) {
+              margin-top: $spacing-07;
             }
           }
         }
@@ -118,9 +129,9 @@
         .#{$prefix}--content-item__heading {
           width: 100%;
 
-          @include carbon--type-style('expressive-heading-02', true);
+          @include type-style('heading-02', true);
 
-          @include carbon--breakpoint('md') {
+          @include breakpoint(md) {
             width: 90%;
           }
         }
@@ -128,36 +139,36 @@
         .#{$prefix}--content-item__copy {
           width: 100%;
 
-          @include carbon--breakpoint('md') {
+          @include breakpoint(md) {
             width: 90%;
           }
 
           p {
             width: 100%;
-            margin-bottom: $carbon--spacing-05;
+            margin-bottom: $spacing-05;
 
-            @include carbon--type-style('body-long-02', true);
+            @include type-style('body-02', true);
           }
         }
       }
     }
 
     &.#{$prefix}--cta-block__has-items {
-      padding-bottom: $carbon--layout-04;
+      padding-bottom: $spacing-09;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         padding-bottom: carbon--mini-units(10);
       }
 
       .#{$prefix}--cta-block__cta {
-        padding-bottom: $carbon--spacing-07;
+        padding-bottom: $spacing-07;
 
-        @include carbon--breakpoint('md') {
-          padding-bottom: $carbon--layout-05;
+        @include breakpoint(md) {
+          padding-bottom: $spacing-10;
         }
 
-        @include carbon--breakpoint('lg') {
-          padding-bottom: $carbon--layout-06;
+        @include breakpoint(lg) {
+          padding-bottom: $spacing-12;
         }
       }
 
@@ -168,33 +179,20 @@
   }
 
   .#{$prefix}--cta-block--g10 {
-    @include carbon--theme(
-      $carbon--theme--g10,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
+    @include theme($g10, feature-flag-enabled('enable-css-custom-properties'));
+
+    @include themed-items;
   }
 
   .#{$prefix}--cta-block--g90 {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
+    @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
+
+    @include themed-items;
   }
 
   .#{$prefix}--cta-block--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-}
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-@include exports('cta-block--pattern') {
-  @include cta-block--pattern;
+    @include themed-items;
+  }
 }
diff --git a/packages/styles/scss/components/cta-block/_index.scss b/packages/styles/scss/components/cta-block/_index.scss
new file mode 100644
index 00000000000..fe835662b79
--- /dev/null
+++ b/packages/styles/scss/components/cta-block/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'cta-block';
+@use 'cta-block';
+
+@include cta-block.cta-block;
diff --git a/packages/styles/scss/components/cta-block/index.scss b/packages/styles/scss/components/cta-block/index.scss
deleted file mode 100644
index 1fb327c125a..00000000000
--- a/packages/styles/scss/components/cta-block/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-item/content-item';
-@import 'cta-block';
diff --git a/packages/styles/scss/components/cta-section/_cta-section.scss b/packages/styles/scss/components/cta-section/_cta-section.scss
new file mode 100644
index 00000000000..0e80110b95e
--- /dev/null
+++ b/packages/styles/scss/components/cta-section/_cta-section.scss
@@ -0,0 +1,197 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../../internal/content-item/content-item';
+@use '../button-group';
+
+@mixin themed-items {
+  color: $text-primary;
+  background: $background;
+
+  .#{$prefix}--content-item__heading {
+    color: $text-primary;
+  }
+
+  .#{$prefix}--content-item__copy {
+    p {
+      color: $text-primary;
+    }
+  }
+
+  .#{$prefix}--content-item__cta {
+    color: $link-primary;
+  }
+}
+
+@mixin cta-section {
+  :host(#{$c4d-prefix}-cta-section),
+  .#{$prefix}--cta-section {
+    .#{$prefix}--cta-section__cta {
+      padding-bottom: $spacing-10;
+
+      @include breakpoint(md) {
+        padding-bottom: $spacing-12;
+      }
+
+      @include breakpoint(lg) {
+        padding-bottom: $spacing-13;
+      }
+
+      .#{$prefix}--buttongroup {
+        @include breakpoint(md) {
+          flex-direction: row;
+        }
+      }
+
+      .#{$prefix}--buttongroup-item {
+        @include breakpoint(md) {
+          padding-right: $spacing-05;
+        }
+      }
+    }
+
+    .#{$prefix}--content-block {
+      padding-top: $spacing-07;
+      padding-bottom: 0;
+
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
+      }
+    }
+
+    .#{$prefix}--content-block__heading,
+    .#{$prefix}--content-block__copy {
+      width: 90%;
+      max-width: 640px;
+
+      @include breakpoint(sm) {
+        width: 100%;
+      }
+    }
+
+    .#{$prefix}--content-block__heading {
+      @include type-style('fluid-heading-05', true);
+    }
+
+    .#{$prefix}--content-block__copy {
+      p {
+        margin-bottom: 0;
+        @include type-style('fluid-heading-03', true);
+      }
+    }
+
+    .#{$prefix}--content-block__cta-col {
+      margin-top: 0;
+    }
+
+    .#{$prefix}--helper-wrapper {
+      .#{$prefix}--content-item-wrapper {
+        border-top: 1px solid $layer-accent-01;
+
+        @include make-row;
+
+        .#{$prefix}--content-item {
+          width: 100%;
+          margin-bottom: 0;
+          padding-bottom: $spacing-05;
+          position: relative;
+
+          @include make-col-ready;
+
+          @include breakpoint(md) {
+            @include make-col(4, 8);
+          }
+
+          &:last-of-type {
+            margin-top: $spacing-05;
+
+            @include breakpoint(md) {
+              margin-top: $spacing-07;
+            }
+          }
+        }
+
+        .#{$prefix}--content-item__heading {
+          width: 100%;
+
+          @include type-style('heading-02', true);
+
+          @include breakpoint(md) {
+            width: 90%;
+          }
+        }
+
+        .#{$prefix}--content-item__copy {
+          width: 100%;
+
+          @include breakpoint(md) {
+            width: 90%;
+          }
+
+          p {
+            width: 100%;
+            margin-bottom: $spacing-05;
+
+            @include type-style('body-02', true);
+          }
+        }
+      }
+    }
+
+    &.#{$prefix}--cta-section__has-items {
+      padding-bottom: $spacing-09;
+
+      @include breakpoint(lg) {
+        padding-bottom: carbon--mini-units(10);
+      }
+
+      .#{$prefix}--cta-section__cta {
+        padding-bottom: $spacing-07;
+
+        @include breakpoint(md) {
+          padding-bottom: $spacing-10;
+        }
+
+        @include breakpoint(lg) {
+          padding-bottom: $spacing-12;
+        }
+      }
+
+      .#{$prefix}--content-block {
+        padding-bottom: 0;
+      }
+    }
+
+    @include breakpoint(lg) {
+      padding-bottom: $spacing-10;
+    }
+  }
+
+  .#{$prefix}--cta-section--g10 {
+    @include theme($g10, true);
+    @include themed-items;
+  }
+
+  .#{$prefix}--cta-section--g90 {
+    @include theme($g90, true);
+    @include themed-items;
+  }
+
+  .#{$prefix}--cta-section--g100 {
+    @include theme($g100, true);
+    @include themed-items;
+  }
+}
diff --git a/packages/styles/scss/components/cta-section/_index.scss b/packages/styles/scss/components/cta-section/_index.scss
new file mode 100644
index 00000000000..efc475e3cef
--- /dev/null
+++ b/packages/styles/scss/components/cta-section/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'cta-section';
+@use 'cta-section';
+
+@include cta-section.cta-section;
diff --git a/packages/styles/scss/components/ctasection/README.md b/packages/styles/scss/components/ctasection/README.md
deleted file mode 100644
index 7dea42adf85..00000000000
--- a/packages/styles/scss/components/ctasection/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/sections/ctasection/ctasection';
-```
-
-#### Blocks
-
-| Class              | Description                                          |
-| ------------------ | ---------------------------------------------------- |
-| `.bx--cta-section` | Highest level class name for the CTA section pattern |
diff --git a/packages/styles/scss/components/ctasection/_ctasection.scss b/packages/styles/scss/components/ctasection/_ctasection.scss
deleted file mode 100644
index 3d073ca593d..00000000000
--- a/packages/styles/scss/components/ctasection/_ctasection.scss
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../buttongroup/_buttongroup';
-
-@mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
-
-  .#{$prefix}--content-item__heading {
-    color: $text-01;
-  }
-
-  .#{$prefix}--content-item__copy {
-    p {
-      color: $text-01;
-    }
-  }
-
-  .#{$prefix}--content-item__cta {
-    color: $link-01;
-  }
-}
-
-@mixin cta-section--pattern {
-  :host(#{$dds-prefix}-cta-section),
-  .#{$prefix}--cta-section {
-    .#{$prefix}--cta-section__cta {
-      padding-bottom: $carbon--layout-05;
-
-      @include carbon--breakpoint('md') {
-        padding-bottom: $carbon--layout-06;
-      }
-
-      @include carbon--breakpoint('lg') {
-        padding-bottom: $carbon--layout-07;
-      }
-
-      .#{$prefix}--buttongroup {
-        @include carbon--breakpoint('md') {
-          flex-direction: row;
-        }
-      }
-
-      .#{$prefix}--buttongroup-item {
-        @include carbon--breakpoint('md') {
-          padding-right: $carbon--spacing-05;
-        }
-      }
-    }
-
-    .#{$prefix}--content-block {
-      padding-top: $carbon--layout-03;
-      padding-bottom: 0;
-
-      @include carbon--breakpoint('lg') {
-        padding-top: $carbon--layout-05;
-      }
-    }
-
-    .#{$prefix}--content-block__heading,
-    .#{$prefix}--content-block__copy {
-      width: 90%;
-      max-width: 640px;
-
-      @include carbon--breakpoint('sm') {
-        width: 100%;
-      }
-    }
-
-    .#{$prefix}--content-block__heading {
-      @include carbon--type-style('expressive-heading-05', true);
-    }
-
-    .#{$prefix}--content-block__copy {
-      p {
-        margin-bottom: 0;
-        @include carbon--type-style('expressive-heading-03', true);
-      }
-    }
-
-    .#{$prefix}--content-block__cta-col {
-      margin-top: 0;
-    }
-
-    .#{$prefix}--helper-wrapper {
-      .#{$prefix}--content-item-wrapper {
-        border-top: 1px solid $ui-03;
-
-        @include carbon--make-row;
-
-        .#{$prefix}--content-item {
-          width: 100%;
-          margin-bottom: 0;
-          padding-bottom: $carbon--spacing-05;
-          position: relative;
-
-          @include carbon--make-col-ready;
-
-          @include carbon--breakpoint('md') {
-            @include carbon--make-col(4, 8);
-          }
-
-          &:last-of-type {
-            margin-top: $carbon--spacing-05;
-
-            @include carbon--breakpoint('md') {
-              margin-top: $carbon--spacing-07;
-            }
-          }
-        }
-
-        .#{$prefix}--content-item__heading {
-          width: 100%;
-
-          @include carbon--type-style('expressive-heading-02', true);
-
-          @include carbon--breakpoint('md') {
-            width: 90%;
-          }
-        }
-
-        .#{$prefix}--content-item__copy {
-          width: 100%;
-
-          @include carbon--breakpoint('md') {
-            width: 90%;
-          }
-
-          p {
-            width: 100%;
-            margin-bottom: $carbon--spacing-05;
-
-            @include carbon--type-style('body-long-02', true);
-          }
-        }
-      }
-    }
-
-    &.#{$prefix}--cta-section__has-items {
-      padding-bottom: $carbon--layout-04;
-
-      @include carbon--breakpoint('lg') {
-        padding-bottom: carbon--mini-units(10);
-      }
-
-      .#{$prefix}--cta-section__cta {
-        padding-bottom: $carbon--spacing-07;
-
-        @include carbon--breakpoint('md') {
-          padding-bottom: $carbon--layout-05;
-        }
-
-        @include carbon--breakpoint('lg') {
-          padding-bottom: $carbon--layout-06;
-        }
-      }
-
-      .#{$prefix}--content-block {
-        padding-bottom: 0;
-      }
-    }
-
-    @include carbon--breakpoint('lg') {
-      padding-bottom: $carbon--layout-05;
-    }
-  }
-
-  .#{$prefix}--cta-section--g10 {
-    @include carbon--theme(
-      $carbon--theme--g10,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
-  .#{$prefix}--cta-section--g90 {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
-  .#{$prefix}--cta-section--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-}
-
-@include exports('cta-section--pattern') {
-  @include cta-section--pattern;
-}
diff --git a/packages/styles/scss/components/ctasection/index.scss b/packages/styles/scss/components/ctasection/index.scss
deleted file mode 100644
index 2a52da644c5..00000000000
--- a/packages/styles/scss/components/ctasection/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import '../../internal/content-block/content-block';
-@import '../../internal/content-item/content-item';
-@import 'ctasection';
diff --git a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss
index 146e9d098f3..bf563a8ee71 100644
--- a/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss
+++ b/packages/styles/scss/components/dotcom-shell/_dotcom-shell.scss
@@ -5,21 +5,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../footer/index';
-@import '../masthead/index';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/vars' as *;
+@use '../footer';
+@use '../masthead';
 
 @mixin dotcom-shell {
-  :host(#{$dds-prefix}-dotcom-shell),
+  :host(#{$c4d-prefix}-dotcom-shell),
   .#{$prefix}--dotcom-shell {
     display: flex;
     flex-direction: column;
-    padding-top: $carbon--layout-04;
+    padding-top: $spacing-09;
     width: 100%;
 
     .#{$prefix}--tableofcontents__sidebar {
-      top: 48px;
+      top: $spacing-09;
     }
   }
 
@@ -29,8 +30,9 @@
     max-width: 99rem;
     width: 100%;
   }
-}
 
-@include exports('dotcom-shell') {
-  @include dotcom-shell;
+  :host(#{$c4d-prefix}-dotcom-shell-container),
+  :host(#{$c4d-prefix}-dotcom-shell-composite) {
+    display: contents;
+  }
 }
diff --git a/packages/styles/scss/components/dotcom-shell/_index.scss b/packages/styles/scss/components/dotcom-shell/_index.scss
new file mode 100644
index 00000000000..8a0c2ebeb82
--- /dev/null
+++ b/packages/styles/scss/components/dotcom-shell/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'dotcom-shell';
+@use 'dotcom-shell';
+
+@include dotcom-shell.dotcom-shell;
diff --git a/packages/styles/scss/components/expressive-modal/README.md b/packages/styles/scss/components/expressive-modal/README.md
deleted file mode 100644
index d2986a8851b..00000000000
--- a/packages/styles/scss/components/expressive-modal/README.md
+++ /dev/null
@@ -1,18 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package into the top of your main SCSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/expressive-modal/expressive-modal';
-```
-
-#### Modifiers
-
-Use these modifiers with the `.bx--modal` class.
-
-| Class                               | Description                                                   |
-| ----------------------------------- | ------------------------------------------------------------- |
-| `.bx--modal--expressive`            | Themes the modal for expressive moments                       |
-| `.bx--modal--expressive--fullwidth` | Themes the modal for expressive moments and fullwidth variant |
diff --git a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
index 68bb9b90532..b265ef740a1 100644
--- a/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
+++ b/packages/styles/scss/components/expressive-modal/_expressive-modal.scss
@@ -5,82 +5,135 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
+@use 'sass:math';
 
-@import 'carbon-components/scss/components/modal/modal';
+@use '../../globals/vars' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/modal' as *;
 
 /// Expressive modal
 /// @access private
 /// @group expressive-modal
 
-@mixin expressive-model {
+@mixin expressive-modal {
   $modal: '.#{$prefix}--modal';
-  $button-size: rem(48px);
-  $icon-size: rem(20px);
-  $offset-close-icon: $carbon--spacing-07 - (($button-size - $icon-size) / 2);
+  $icon-size: to-rem(20px);
 
-  :host(#{$dds-prefix}-expressive-modal),
-  #{$modal}--expressive {
-    color: $text-01;
+  :host(#{$c4d-prefix}-expressive-modal) {
+    @extend .#{$prefix}--modal;
 
-    #{$modal}-container {
-      padding: $carbon--spacing-05;
-      min-height: $carbon--spacing-07 + $icon-size + $carbon--spacing-07;
+    .#{$prefix}--modal-container {
+      grid-template-rows: 1fr;
+      padding: $spacing-05;
+      min-height: $spacing-10 + to-rem($icon-size);
 
-      @include carbon--breakpoint('md') {
-        padding: $carbon--spacing-07;
+      @include breakpoint(md) {
+        padding: $spacing-07;
       }
     }
 
-    #{$modal}-content {
-      display: flex;
-      padding-left: 0;
-      padding-right: $button-size - $offset-close-icon;
-      margin-bottom: 0;
-      padding-top: 0;
+    .#{$prefix}--modal-content {
+      display: grid;
+      grid-template-rows: auto 1fr auto;
+      padding-bottom: 0;
+    }
+
+    .#{$c4d-prefix}-ce--modal__header--with-body {
+      margin-bottom: $spacing-05;
+    }
+
+    .#{$c4d-prefix}-ce--modal__body {
+      width: 100%;
+    }
+
+    .#{$c4d-prefix}-ce--modal__body--with-footer {
+      margin-bottom: $spacing-09;
+    }
+  }
+
+  :host(#{$c4d-prefix}-expressive-modal[open]) {
+    @extend .#{$prefix}--modal;
+
+    opacity: 1;
+    transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      visibility 0ms linear;
+    visibility: inherit;
+
+    .#{$prefix}--modal-container {
+      transform: translate3d(0, 0, 0);
+      transition: transform $duration-moderate-02 motion(entrance, expressive);
+    }
+
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
     }
   }
 
-  :host(#{$dds-prefix}-expressive-modal-footer) #{$modal}-footer {
+  :host(#{$c4d-prefix}-expressive-modal-footer) .#{$prefix}--modal-footer {
     justify-content: flex-start;
-    height: rem(48px);
+    height: $spacing-09;
   }
 
-  :host(#{$dds-prefix}-expressive-modal-close-button) {
-    #{$modal}-close {
+  :host(#{$c4d-prefix}-expressive-modal-close-button) {
+    .#{$prefix}--modal-close {
       position: fixed;
     }
   }
 
-  :host(#{$dds-prefix}-expressive-modal-heading),
-  #{$modal}--expressive #{$modal}-content h1 {
-    @include carbon--type-style('expressive-heading-04');
+  :host(#{$c4d-prefix}-expressive-modal-heading),
+  .#{$prefix}--modal--expressive .#{$prefix}--modal-content h1 {
+    @include type-style('heading-04');
   }
 
-  :host(#{$dds-prefix}-expressive-modal)[expressive-size='full-width'],
-  #{$modal}--expressive--fullwidth {
-    @include carbon--breakpoint('md') {
-      #{$modal}-container {
-        width: calc(100% - #{$carbon--spacing-07});
+  :host(#{$c4d-prefix}-expressive-modal-header) {
+    display: block;
+    padding: 0;
+  }
+
+  :host(#{$c4d-prefix}-expressive-modal-body),
+  :host(#{$c4d-prefix}-lightbox-media-viewer-body) {
+    @include type-style('body-02');
+  }
+
+  :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'],
+  .#{$prefix}--modal--expressive--fullwidth {
+    @include breakpoint(md) {
+      .#{$prefix}--modal-container {
+        width: calc(100% - #{$spacing-07});
         max-width: 96rem;
-        height: calc(100% - #{$carbon--spacing-07});
+        height: calc(100% - #{$spacing-07});
         max-height: none;
       }
     }
   }
 
-  :host(#{$dds-prefix}-expressive-modal[size='full-width'])
-    ::slotted(#{$dds-prefix}-expressive-modal-body),
-  :host(#{$dds-prefix}-expressive-modal[size='full-width'])
-    ::slotted(#{$dds-prefix}-lightbox-media-viewer-body),
-  #{$modal}--expressive--fullwidth #{$modal}-content {
+  :host(#{$c4d-prefix}-expressive-modal)[expressive-size='full-width'] {
+    .#{$prefix}--modal-container {
+      padding: 0;
+    }
+
+    .#{$prefix}--modal-content {
+      padding: $spacing-05;
+
+      @include breakpoint(md) {
+        padding: $spacing-07;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-expressive-modal[size='full-width'])
+    ::slotted(#{$c4d-prefix}-expressive-modal-body),
+  :host(#{$c4d-prefix}-expressive-modal[size='full-width'])
+    ::slotted(#{$c4d-prefix}-lightbox-media-viewer-body),
+  .#{$prefix}--modal--expressive--fullwidth .#{$prefix}--modal-content {
     padding-right: 0;
     height: auto;
-    min-height: rem(500px);
+    min-height: to-rem(500px);
   }
 }
-
-@include exports('expressive-model') {
-  @include expressive-model;
-}
diff --git a/packages/styles/scss/components/expressive-modal/_index.scss b/packages/styles/scss/components/expressive-modal/_index.scss
new file mode 100644
index 00000000000..608714592d8
--- /dev/null
+++ b/packages/styles/scss/components/expressive-modal/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'expressive-modal';
+@use 'expressive-modal';
+
+@include expressive-modal.expressive-modal;
diff --git a/packages/styles/scss/components/feature-card-block-large/README.md b/packages/styles/scss/components/feature-card-block-large/README.md
deleted file mode 100644
index db0539eefaf..00000000000
--- a/packages/styles/scss/components/feature-card-block-large/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/feature-card-block-large/feature-card-block-large';
-```
-
-#### Elements
-
-| Class                                      | Description                                                 |
-| ------------------------------------------ | ----------------------------------------------------------- |
-| `.bx--feature-card-block-large__card`      | Card element within the FeatureCardBlockLarge pattern       |
-| `.bx--feature-card-block-large__container` | Parent container class of the FeatureCardBlockLarge pattern |
-
-#### Blocks
-
-| Class                           | Description                                                    |
-| ------------------------------- | -------------------------------------------------------------- |
-| `.bx--feature-card-block-large` | Highest level class name for the FeatureCardBlockLarge pattern |
diff --git a/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss b/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss
deleted file mode 100644
index 971ba0dda70..00000000000
--- a/packages/styles/scss/components/feature-card-block-large/_feature-card-block-large.scss
+++ /dev/null
@@ -1,211 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/aspect-ratio';
-@import '../../globals/utils/hang';
-@import '../image/image';
-@import '../card/index';
-
-$fcb-large-custom-bp-copy: 992px;
-$fcb-large-custom-bp-nocopy: 752px;
-$fcb-breakpoint-up--lg: map-get(
-    map-get($carbon--grid-breakpoints, 'lg'),
-    'width'
-  ) - rem(1px);
-
-@mixin feature-card-block-large {
-  :host(#{$dds-prefix}-feature-card-block-large),
-  .#{$prefix}--feature-card-block-large {
-    margin-bottom: $carbon--layout-03;
-
-    @include carbon--breakpoint('md') {
-      margin-bottom: $carbon--layout-05;
-    }
-
-    @include carbon--breakpoint('lg') {
-      margin-bottom: $carbon--layout-06;
-    }
-
-    :hover {
-      .#{$prefix}--card__wrapper {
-        background: $hover-ui;
-      }
-    }
-
-    .#{$prefix}--card {
-      background: none;
-      height: 100%;
-
-      &:focus-within {
-        outline-width: 3px;
-        outline-offset: 1px;
-      }
-
-      @include carbon--breakpoint-between(
-        $fcb-large-custom-bp-copy,
-        $fcb-breakpoint-up--lg
-      ) {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        flex-direction: row;
-      }
-      @include carbon--breakpoint('xlg') {
-        position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
-        flex-direction: row;
-      }
-
-      ::slotted([slot='image']),
-      &__wrapper,
-      .#{$prefix}--image {
-        @include carbon--breakpoint-between(
-          $fcb-large-custom-bp-copy,
-          $fcb-breakpoint-up--lg
-        ) {
-          width: 50%;
-          height: 100%;
-        }
-        @include carbon--breakpoint('xlg') {
-          width: 50%;
-          height: 100%;
-        }
-      }
-
-      .#{$prefix}--image {
-        overflow-y: hidden;
-      }
-    }
-
-    .#{$prefix}--card__wrapper {
-      @include carbon--theme($carbon--theme--g90, true);
-
-      background-color: $ui-01;
-      min-height: 50%;
-      height: auto;
-      padding: $spacing-07 $spacing-05;
-
-      @include carbon--breakpoint('md') {
-        padding: $layout-03;
-      }
-
-      @include carbon--breakpoint('max') {
-        padding: $layout-05;
-      }
-
-      .#{$prefix}--card__eyebrow,
-      .#{$prefix}--card__heading,
-      .#{$prefix}--card__copy,
-      ::slotted(#{$dds-prefix}-card-eyebrow),
-      ::slotted(#{$dds-prefix}-card-heading) {
-        width: 100%;
-        max-width: rem(480px);
-        @include carbon--breakpoint('md') {
-          width: 90%;
-        }
-      }
-
-      .#{$prefix}--card__content {
-        padding: 0;
-      }
-
-      .#{$prefix}--card__eyebrow,
-      ::slotted(#{$dds-prefix}-card-eyebrow) {
-        margin: 0 0 $spacing-05 0;
-      }
-
-      .#{$prefix}--card__heading,
-      ::slotted(#{$dds-prefix}-card-heading) {
-        @include carbon--type-style('expressive-heading-04', true);
-
-        margin-bottom: $spacing-07;
-      }
-
-      .#{$prefix}--card__copy {
-        @include carbon--type-style('body-long-02');
-        @include carbon--breakpoint-down('md') {
-          margin-bottom: $spacing-07;
-        }
-      }
-    }
-
-    .#{$prefix}--card__footer {
-      flex-direction: row;
-    }
-
-    // special breakpoint for no copy present
-    &.#{$prefix}--feature-card-block-large_no-copy-text {
-      @include carbon--breakpoint($fcb-large-custom-bp-nocopy) {
-        padding-top: aspect-ratio(2, 1);
-      }
-
-      .#{$prefix}--card {
-        @include carbon--breakpoint($fcb-large-custom-bp-nocopy) {
-          position: absolute;
-          top: 0;
-          left: 0;
-          right: 0;
-          bottom: 0;
-          flex-direction: row;
-
-          &__wrapper,
-          .#{$prefix}--image {
-            width: 50%;
-            height: 100%;
-          }
-        }
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-feature-card-block-large-footer)
-    .#{$dds-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  .#{$prefix}--feature-card-block-large
-    .#{$prefix}--feature-card-block-large__card.#{$prefix}--tile
-    .#{$prefix}--card__cta,
-  .#{$prefix}--feature-card-block-large
-    .#{$prefix}--feature-card-block-large__card.#{$prefix}--tile
-    .#{$prefix}--card__cta:visited {
-    margin-top: auto;
-    float: none;
-    width: $layout-03;
-    height: $layout-03;
-
-    @include carbon--type-style('productive-heading-05');
-  }
-}
-
-.#{$prefix}--feature-card-block-large__container {
-  color: $text-01;
-  background: $ui-background;
-  position: relative;
-  height: 100%;
-  @include hang;
-
-  @include carbon--breakpoint-between(
-    $fcb-large-custom-bp-copy,
-    $fcb-breakpoint-up--lg
-  ) {
-    padding-top: aspect-ratio(2, 1);
-  }
-  @include carbon--breakpoint('xlg') {
-    padding-top: aspect-ratio(2, 1);
-  }
-}
-
-@include exports('feature-card-block-large') {
-  @include feature-card-block-large;
-}
diff --git a/packages/styles/scss/components/feature-card-block-medium/README.md b/packages/styles/scss/components/feature-card-block-medium/README.md
deleted file mode 100644
index 61692c301c6..00000000000
--- a/packages/styles/scss/components/feature-card-block-medium/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/feature-card/feature-card';
-```
-
-#### Elements
-
-| Class                     | Description                                 |
-| ------------------------- | ------------------------------------------- |
-| `.bx--feature-card__card` | Card element within the FeatureCard pattern |
-
-#### Blocks
-
-| Class               | Description                                          |
-| ------------------- | ---------------------------------------------------- |
-| `.bx--feature-card` | Highest level class name for the FeatureCard pattern |
diff --git a/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss b/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss
deleted file mode 100644
index e9a1b3874a1..00000000000
--- a/packages/styles/scss/components/feature-card-block-medium/_feature-card-block-medium.scss
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../internal/content-group/content-group';
-@import '../feature-card/feature-card';
-
-@mixin feature-card-block-medium {
-  .#{$prefix}--feature-card-block-medium,
-  :host(#{$dds-prefix}-feature-card-block-medium) {
-    color: $text-01;
-    background: $ui-background;
-    margin: $carbon--layout-05 0;
-
-    @include carbon--breakpoint('lg') {
-      margin: $carbon--layout-06 0;
-    }
-
-    &:focus {
-      outline: none;
-    }
-  }
-
-  // There is no content under `.#{$prefix}--card__heading` in feature card block medium,
-  // because `.#{$prefix}--card__heading` actually is a copy content and the heading content goes outside the card
-  .#{$prefix}--feature-card-block-medium
-    .#{$prefix}--card
-    .#{$prefix}--card__heading,
-  :host(#{$dds-prefix}-feature-card-block-medium)
-    .#{$prefix}--card
-    ::slotted(#{$dds-prefix}-card-heading) {
-    margin-bottom: 0;
-  }
-
-  .#{$prefix}--feature-card-block-medium__heading,
-  ::slotted(#{$dds-prefix}-feature-card-block-medium-block-heading) {
-    @include carbon--type-style('expressive-heading-04', true);
-
-    display: block;
-    margin-bottom: $carbon--spacing-07;
-  }
-}
-@include exports('feature-card-block-medium') {
-  @include feature-card-block-medium;
-}
diff --git a/packages/styles/scss/components/feature-card/README.md b/packages/styles/scss/components/feature-card/README.md
deleted file mode 100644
index 703250900fb..00000000000
--- a/packages/styles/scss/components/feature-card/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card';
-```
-
-#### Elements
-
-| Class                                 | Description                                           |
-| ------------------------------------- | ----------------------------------------------------- |
-| `.bx--feature-card__card`             | Card element within the FeatureCard pattern           |
-| `.bx--feature-card-block-large__card` | Card element within the FeatureCardBlockLarge pattern |
-
-#### Blocks
-
-| Class                           | Description                                                       |
-| ------------------------------- | ----------------------------------------------------------------- |
-| `.bx--feature-card`             | Highest level class name for the FeatureCard pattern              |
-| `.bx--feature-card-block-large` | Highest level class name for the FeatureCardLarge variant pattern |
diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
index 8879c764632..4bf249b8fd9 100644
--- a/packages/styles/scss/components/feature-card/_feature-card.scss
+++ b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -5,24 +5,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../components/image/image';
-@import '../../components/card/index';
-@import '../../globals/utils/aspect-ratio';
-@import '../../globals/utils/hang';
+@use 'sass:map';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/grid' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../components/image';
+@use '../../components/card';
+@use '../../globals/utils/aspect-ratio' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../../../web-components/src/components/card/card' as *;
 
 $fcb-large-custom-bp-copy: 992px;
 $fcb-large-custom-bp-nocopy: 752px;
-$fcb-breakpoint-up--lg: map-get(
-    map-get($carbon--grid-breakpoints, 'lg'),
-    'width'
-  ) - rem(1px);
+$fcb-breakpoint-up--lg: map.get(map.get($grid-breakpoints, 'lg'), 'width') -
+  to-rem(1px);
+
+$feature-flags: (
+  enable-experimental-tile-contrast: true,
+);
 
 @mixin card {
-  @include carbon--breakpoint-down('md') {
-    position: absolute;
+  @include breakpoint-down(md) {
     padding-top: 0;
     top: 0;
     left: 0;
@@ -30,14 +41,13 @@ $fcb-breakpoint-up--lg: map-get(
     bottom: 0;
   }
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint(md) {
     flex-direction: row;
   }
 
   .#{$prefix}--card__heading,
-  ::slotted(#{$dds-prefix}-card-heading) {
-    margin-bottom: $layout-03;
-    color: $inverse-01;
+  ::slotted(#{$c4d-prefix}-card-heading) {
+    margin-bottom: $spacing-07;
   }
 
   &:focus-within {
@@ -49,15 +59,12 @@ $fcb-breakpoint-up--lg: map-get(
       display: block;
       position: absolute;
       z-index: 1;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      border: 2px solid $focus;
-      outline: 1px solid #ffffff;
+      inset: -1px;
+      border: $spacing-01 solid $focus;
+      outline: 1px solid $focus-inset;
       outline-offset: -3px;
 
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         min-height: 292px;
       }
     }
@@ -66,37 +73,42 @@ $fcb-breakpoint-up--lg: map-get(
 
 @mixin feature-card {
   // all feature cards
-  :host(#{$dds-prefix}-feature-card),
-  :host(#{$dds-prefix}-feature-cta),
+  :host(#{$c4d-prefix}-feature-card),
+  :host(#{$c4d-prefix}-feature-cta),
   .#{$prefix}--feature-card-large,
   .#{$prefix}--feature-card {
     position: relative;
+    // avoid shorthand for border to render correctly
+    border-color: $border-subtle-selected;
+    border-style: solid;
+    // breaks on Firefox with `rem` function
+    border-width: 1px;
 
     &:hover {
       ::slotted([slot='image']),
-      #{$dds-prefix}-image,
+      #{$c4d-prefix}-image,
       .#{$prefix}--image {
         &::before {
           opacity: 0.08;
         }
       }
+    }
 
-      .#{$prefix}--card__wrapper {
-        background-color: $inverse-hover-ui;
-      }
+    &:focus-within {
+      border-color: transparent;
     }
 
-    @include carbon--breakpoint-down('md') {
-      @include carbon--make-row;
+    @include breakpoint-down(md) {
+      @include make-row;
     }
 
     .#{$prefix}--card__content {
-      transition: background-color $duration--moderate-01
+      transition: background-color $duration-moderate-01
         motion(standard, productive);
     }
 
     ::slotted([slot='image']),
-    #{$dds-prefix}-image,
+    #{$c4d-prefix}-image,
     .#{$prefix}--image {
       width: 100%;
       height: aspect-ratio(2, 1);
@@ -110,26 +122,41 @@ $fcb-breakpoint-up--lg: map-get(
         left: 0;
         opacity: 0;
         z-index: 1;
-        background-color: $inverse-01;
-        transition: opacity $duration--moderate-01 motion(standard, productive);
+        transition: opacity $duration-moderate-01 motion(standard, productive);
       }
     }
   }
 
-  :host(#{$dds-prefix}-feature-card),
-  :host(#{$dds-prefix}-feature-cta) {
-    @include carbon--breakpoint-down('md') {
+  :host(#{$c4d-prefix}-feature-card),
+  :host(#{$c4d-prefix}-feature-cta) {
+    display: block;
+    outline: none;
+
+    @include breakpoint-down(md) {
       display: flex;
+
+      .#{$prefix}--card__wrapper {
+        display: flex;
+        min-height: 0;
+        height: auto;
+
+        .#{$prefix}--card__content {
+          height: 100%;
+          padding: $spacing-05;
+        }
+      }
+
+      .#{$prefix}--card--link {
+        display: block;
+      }
     }
   }
 
   // feature cards that are not size large
   .#{$prefix}--feature-card,
-  :host(#{$dds-prefix}-feature-card:not([size='large'])),
-  :host(#{$dds-prefix}-feature-cta:not([size='large'])) {
-    @include carbon--breakpoint-down('md') {
-      padding-top: aspect-ratio(1, 1);
-
+  :host(#{$c4d-prefix}-feature-card:not([size='large'])),
+  :host(#{$c4d-prefix}-feature-cta:not([size='large'])) {
+    @include breakpoint-down(md) {
       .#{$prefix}--card__content {
         height: 100%;
         padding: carbon--mini-units(2);
@@ -141,7 +168,7 @@ $fcb-breakpoint-up--lg: map-get(
         width: 100%;
         padding: carbon--mini-units(2);
         padding-right: 10%;
-        padding-bottom: $layout-03;
+        padding-bottom: $spacing-07;
       }
 
       .#{$prefix}--card__footer {
@@ -150,7 +177,7 @@ $fcb-breakpoint-up--lg: map-get(
       }
 
       .#{$prefix}--card__wrapper {
-        display: block;
+        display: flex;
         min-height: 0;
         height: auto;
       }
@@ -166,16 +193,14 @@ $fcb-breakpoint-up--lg: map-get(
     }
 
     .#{$prefix}--card__heading {
-      margin-bottom: $layout-03;
-      color: $inverse-01;
+      margin-bottom: $spacing-07;
     }
 
     .#{$prefix}--card__wrapper {
-      background-color: $inverse-02;
       width: 100%;
       height: aspect-ratio(2, 1);
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         width: 50%;
         height: auto;
       }
@@ -186,20 +211,17 @@ $fcb-breakpoint-up--lg: map-get(
       }
     }
 
-    &:hover {
-      .#{$prefix}--card__wrapper {
-        background-color: $inverse-hover-ui;
-      }
-    }
-
     // image
 
     ::slotted([slot='image']),
-    #{$dds-prefix}-image,
+    #{$c4d-prefix}-image,
     .#{$prefix}--image {
-      @include carbon--breakpoint('md') {
+      z-index: 0;
+
+      @include breakpoint(md) {
         width: 50%;
         height: 100%;
+        padding-top: aspect-ratio(2, 1);
       }
     }
 
@@ -207,26 +229,24 @@ $fcb-breakpoint-up--lg: map-get(
 
     .#{$prefix}--feature-card__card .#{$prefix}--card__footer {
       flex-direction: row-reverse;
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         flex-direction: row;
       }
 
       svg {
-        fill: $inverse-link;
-
-        @include carbon--breakpoint('sm') {
-          width: rem(20px);
-          height: rem(20px);
+        @include breakpoint(sm) {
+          width: to-rem(20px);
+          height: to-rem(20px);
         }
 
-        @include carbon--breakpoint('md') {
-          width: $carbon--spacing-06;
-          height: $carbon--spacing-06;
+        @include breakpoint(md) {
+          width: $spacing-06;
+          height: $spacing-06;
         }
 
-        @include carbon--breakpoint('max') {
-          width: $carbon--spacing-07;
-          height: $carbon--spacing-07;
+        @include breakpoint(max) {
+          width: $spacing-07;
+          height: $spacing-07;
         }
       }
     }
@@ -238,52 +258,69 @@ $fcb-breakpoint-up--lg: map-get(
   }
 
   // feature cards that are size large
-  :host(#{$dds-prefix}-feature-card[size='large']),
-  :host(#{$dds-prefix}-feature-cta[size='large']),
-  .#{$prefix}--feature-card-large {
-    margin-bottom: $carbon--layout-03;
-    color: $text-01;
-    background: $ui-background;
+  :host(#{$c4d-prefix}-feature-card[size='large']),
+  :host(#{$c4d-prefix}-feature-cta[size='large']) {
+    margin-bottom: $spacing-07;
+    color: $text-primary;
+    background-color: $layer-01;
     position: relative;
     @include hang;
 
-    @include carbon--breakpoint('md') {
-      margin-bottom: $carbon--layout-05;
+    @include breakpoint(md) {
+      margin-bottom: $spacing-10;
+      padding-top: aspect-ratio(2, 1);
     }
 
-    @include carbon--breakpoint('lg') {
-      margin-bottom: $carbon--layout-06;
+    @include breakpoint(lg) {
+      margin-bottom: $spacing-12;
     }
 
-    @include carbon--breakpoint('xlg') {
+    @include breakpoint(xlg) {
       padding-top: aspect-ratio(2, 1);
     }
 
     .#{$prefix}--card {
-      background: none;
       height: 100%;
 
       &:focus-within {
-        outline-width: 3px;
-        outline-offset: 1px;
+        outline: none;
+        outline-offset: 0;
+
+        &::before {
+          content: '';
+          display: block;
+          position: absolute;
+          z-index: 1;
+          inset: -1px;
+          border: $spacing-01 solid $focus;
+          outline: 1px solid $focus-inset;
+          outline-offset: -3px;
+
+          @include breakpoint-down(md) {
+            min-height: 292px;
+          }
+        }
       }
 
-      @include carbon--breakpoint('xlg') {
+      @include breakpoint(md) {
         position: absolute;
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
         flex-direction: row;
+        inset: 0;
       }
 
       ::slotted([slot='image']),
-      #{$dds-prefix}-image,
-      &__wrapper,
+      #{$c4d-prefix}-image,
       .#{$prefix}--image {
-        @include carbon--breakpoint('xlg') {
+        z-index: 0;
+
+        @include breakpoint(md) {
           width: 50%;
           height: 100%;
+          padding-top: aspect-ratio(2, 1);
+        }
+
+        @include breakpoint(xlg) {
+          height: 100%;
         }
       }
 
@@ -293,14 +330,13 @@ $fcb-breakpoint-up--lg: map-get(
     }
 
     .#{$prefix}--card__wrapper {
-      background-color: $inverse-02;
       min-height: 50%;
       height: auto;
 
       &::before {
         padding-top: 0;
 
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           padding-top: 50%;
         }
       }
@@ -308,66 +344,92 @@ $fcb-breakpoint-up--lg: map-get(
       .#{$prefix}--card__eyebrow,
       .#{$prefix}--card__heading,
       .#{$prefix}--card__copy,
-      ::slotted(#{$dds-prefix}-card-eyebrow),
-      ::slotted(#{$dds-prefix}-card-heading) {
+      ::slotted(#{$c4d-prefix}-card-eyebrow),
+      ::slotted(#{$c4d-prefix}-card-heading) {
         width: 100%;
-        color: $inverse-01;
-        max-width: rem(480px);
+        max-width: to-rem(480px);
 
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           width: 90%;
         }
       }
 
       .#{$prefix}--card__content {
-        padding: $spacing-07 $spacing-05;
+        padding: $spacing-07 $spacing-05 $spacing-05;
 
-        @include carbon--breakpoint('md') {
-          padding: $layout-03;
+        @include breakpoint(md) {
+          padding: $spacing-05;
         }
 
-        @include carbon--breakpoint('max') {
-          padding: $layout-05;
+        @include breakpoint(xlg) {
+          padding: $spacing-07;
         }
       }
 
       .#{$prefix}--card__eyebrow,
-      ::slotted(#{$dds-prefix}-card-eyebrow) {
-        margin: 0 0 $spacing-05 0;
-        color: $inverse-01;
+      ::slotted(#{$c4d-prefix}-card-eyebrow) {
+        margin: 0 0 $spacing-03 0;
       }
 
       .#{$prefix}--card__heading,
-      ::slotted(#{$dds-prefix}-card-heading) {
-        color: $inverse-01;
+      ::slotted(#{$c4d-prefix}-card-heading) {
         margin-bottom: $spacing-07;
-        @include carbon--type-style('expressive-heading-04', true);
+
+        @include breakpoint(sm) {
+          @include type-style('heading-03');
+        }
+
+        @include breakpoint(lg) {
+          @include type-style('heading-04');
+        }
       }
 
       .#{$prefix}--card__copy {
-        @include carbon--type-style('body-long-02');
-        @include carbon--breakpoint-down('md') {
+        @include type-style('body-02');
+
+        @include breakpoint(md) {
+          @include type-style('body-01');
+        }
+
+        @include breakpoint(lg) {
+          @include type-style('body-02');
+        }
+
+        @include breakpoint-down(md) {
           margin-bottom: $spacing-07;
         }
+
+        /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
+        @include breakpoint-between(md, lg) {
+          ::slotted(*) {
+            display: -webkit-box;
+            white-space: normal;
+            -webkit-line-clamp: 8;
+            -webkit-box-orient: vertical;
+            height: 100%;
+            word-break: break-word;
+          }
+        }
+        /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
       }
     }
 
     .#{$prefix}--card__footer {
       flex-direction: row;
 
-      @include carbon--breakpoint('xlg') {
+      @include breakpoint(xlg) {
         flex-direction: row-reverse;
       }
     }
 
     // special breakpoint for no copy present
     &.#{$prefix}--feature-card-large_no-copy-text {
-      @include carbon--breakpoint($fcb-large-custom-bp-nocopy) {
+      @include breakpoint($fcb-large-custom-bp-nocopy) {
         padding-top: aspect-ratio(2, 1);
       }
 
       .#{$prefix}--card {
-        @include carbon--breakpoint($fcb-large-custom-bp-nocopy) {
+        @include breakpoint($fcb-large-custom-bp-nocopy) {
           position: absolute;
           top: 0;
           left: 0;
@@ -385,8 +447,8 @@ $fcb-breakpoint-up--lg: map-get(
     }
   }
 
-  :host(#{$dds-prefix}-feature-card-footer)
-    .#{$dds-prefix}-ce--card__footer
+  :host(#{$c4d-prefix}-feature-card-footer)
+    .#{$c4d-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']),
   .#{$prefix}--feature-card-large
     .#{$prefix}--feature-card-large__card.#{$prefix}--tile
@@ -396,27 +458,140 @@ $fcb-breakpoint-up--lg: map-get(
     .#{$prefix}--card__cta:visited {
     margin-top: auto;
     float: none;
-    fill: $inverse-link;
 
-    @include carbon--breakpoint('sm') {
-      width: rem(20px);
-      height: rem(20px);
+    @include breakpoint(sm) {
+      width: to-rem(20px);
+      height: to-rem(20px);
     }
 
-    @include carbon--breakpoint('md') {
-      width: $carbon--spacing-06;
-      height: $carbon--spacing-06;
+    @include breakpoint(md) {
+      width: $spacing-06;
+      height: $spacing-06;
     }
 
-    @include carbon--breakpoint('max') {
-      width: $carbon--spacing-07;
-      height: $carbon--spacing-07;
+    @include breakpoint(max) {
+      width: $spacing-07;
+      height: $spacing-07;
     }
 
-    @include carbon--type-style('productive-heading-05');
+    @include type-style('productive-heading-05');
   }
-}
 
-@include exports('feature-card') {
-  @include feature-card;
+  // inverse color scheme
+  :host(#{$c4d-prefix}-feature-card)[color-scheme='inverse'],
+  :host(#{$c4d-prefix}-feature-cta)[color-scheme='inverse'] {
+    border-color: $border-inverse;
+
+    .#{$prefix}--card__heading,
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      color: $icon-inverse;
+    }
+
+    ::slotted(#{$c4d-prefix}-card-heading) {
+      color: $focus-inset;
+    }
+
+    &:hover .#{$prefix}--card__wrapper {
+      background-color: $background-inverse-hover;
+    }
+
+    ::slotted([slot='image']),
+    #{$c4d-prefix}-image,
+    .#{$prefix}--image {
+      &::before {
+        background-color: $icon-inverse;
+      }
+    }
+  }
+
+  // feature cards that are not size large
+  :host(
+      #{$c4d-prefix}-feature-card:not([size='large'])
+    )[color-scheme='inverse'],
+  :host(
+      #{$c4d-prefix}-feature-cta:not([size='large'])
+    )[color-scheme='inverse'] {
+    .#{$prefix}--card__heading {
+      color: $icon-inverse;
+    }
+
+    .#{$prefix}--card__wrapper {
+      background-color: $background-inverse;
+    }
+
+    &:hover .#{$prefix}--card__wrapper {
+      background-color: $background-inverse-hover;
+    }
+
+    // footer
+    .#{$prefix}--feature-card__card .#{$prefix}--card__footer svg {
+      fill: $link-inverse;
+    }
+  }
+
+  // feature cards that are size large
+  :host(#{$c4d-prefix}-feature-card[size='large'])[color-scheme='inverse'],
+  :host(#{$c4d-prefix}-feature-cta[size='large'])[color-scheme='inverse'] {
+    .#{$prefix}--card__wrapper {
+      background-color: $background-inverse;
+
+      .#{$prefix}--card__eyebrow,
+      .#{$prefix}--card__heading,
+      .#{$prefix}--card__copy,
+      ::slotted(#{$c4d-prefix}-card-eyebrow),
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        color: $icon-inverse;
+      }
+      .#{$prefix}--card__eyebrow,
+      ::slotted(#{$c4d-prefix}-card-eyebrow) {
+        color: $icon-inverse;
+      }
+
+      .#{$prefix}--card__heading,
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        color: $icon-inverse;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse']
+    .#{$c4d-prefix}-ce--card__footer
+    ::slotted(svg[slot='icon']) {
+    fill: $link-inverse;
+  }
+
+  :host(#{$c4d-prefix}-feature-card[size='large']) {
+    ::slotted(#{$c4d-prefix}-feature-card-footer) {
+      display: flex;
+      justify-content: flex-end;
+
+      @include breakpoint(xlg) {
+        justify-content: flex-end;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-feature-card-footer),
+  :host(#{$c4d-prefix}-feature-cta-footer) {
+    display: flex;
+    justify-content: flex-end;
+
+    @include breakpoint(md) {
+      justify-content: flex-end;
+    }
+
+    &[size='large'] {
+      .dds-ce--card__footer ::slotted(svg[slot='icon']) {
+        @include breakpoint(max) {
+          width: $spacing-10;
+          height: $spacing-10;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-feature-card[size='large'])[color-scheme='inverse']:hover
+    .#{$prefix}--card__wrapper {
+    background-color: $background-inverse-hover;
+  }
 }
diff --git a/packages/styles/scss/components/feature-card/_index.scss b/packages/styles/scss/components/feature-card/_index.scss
new file mode 100644
index 00000000000..6bdad1075d2
--- /dev/null
+++ b/packages/styles/scss/components/feature-card/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'feature-card';
+@use 'feature-card';
+
+@include feature-card.feature-card;
diff --git a/packages/styles/scss/components/feature-section/README.md b/packages/styles/scss/components/feature-section/README.md
deleted file mode 100644
index 801493428c4..00000000000
--- a/packages/styles/scss/components/feature-section/README.md
+++ /dev/null
@@ -1,16 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/feature-section/feature-section';
-```
-
-#### Elements
-
-| Class                             | Description                               |
-| --------------------------------- | ----------------------------------------- |
-| `.bx--feature-section`            | Feature Section pattern main element      |
-| `.bx--feature-section__container` | Feature Section pattern container element |
diff --git a/packages/styles/scss/components/feature-section/_feature-section.scss b/packages/styles/scss/components/feature-section/_feature-section.scss
index 0ee7028142b..8e01246ec05 100644
--- a/packages/styles/scss/components/feature-section/_feature-section.scss
+++ b/packages/styles/scss/components/feature-section/_feature-section.scss
@@ -5,17 +5,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/aspect-ratio';
-@import '../../globals/utils/ratio-base';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/aspect-ratio';
+@use '../../globals/carbon-grid';
+@use '../../globals/utils/ratio-base' as *;
+@use '../../globals/tokens/color-tokens' as *;
 
 @mixin feature-section {
+  :host(#{$c4d-prefix}-feature-section) {
+    display: block;
+    outline: none;
+  }
+
   .#{$prefix}--feature-section {
+    box-sizing: border-box;
     position: relative;
-    padding-left: $carbon--spacing-05;
-    padding-right: $carbon--spacing-05;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
     outline: none;
 
     &:hover {
@@ -31,7 +41,7 @@
     &:focus-within {
       outline: none;
 
-      ::slotted(#{$dds-prefix}-image),
+      ::slotted(#{$c4d-prefix}-image),
       .#{$prefix}--image {
         z-index: 0;
       }
@@ -39,44 +49,67 @@
   }
 
   .#{$prefix}--feature-section__container {
-    background-color: $ui-01;
+    background-color: $layer-01;
     display: block;
 
-    @include carbon--breakpoint('lg') {
+    div[class^='#{$prefix}--col'] {
+      box-sizing: border-box;
+    }
+
+    @include breakpoint(lg) {
       display: flex;
     }
   }
 
+  :host(#{$c4d-prefix}-feature-section[color-scheme='inverse'])
+    .#{$prefix}--feature-section__container {
+    background-color: $background-inverse;
+
+    ::slotted([slot='eyebrow']),
+    ::slotted([slot='heading']),
+    ::slotted([slot='copy']) {
+      color: $text-inverse;
+    }
+  }
+
+  :host(#{$c4d-prefix}-feature-section[color-scheme='cyan'])
+    .#{$prefix}--feature-section__container {
+    background-color: $background-cyan;
+  }
+
+  :host(#{$c4d-prefix}-feature-section[color-scheme='purple'])
+    .#{$prefix}--feature-section__container {
+    background-color: $background-purple;
+  }
+
   .#{$prefix}--feature-section__body {
     position: relative;
-    padding-top: $carbon--spacing-07;
+    padding-top: $spacing-07;
     padding-left: 0;
     padding-right: 0;
 
-    @include carbon--breakpoint('max') {
-      padding-top: $carbon--spacing-08;
+    @include breakpoint(max) {
+      padding-top: $spacing-08;
     }
 
-    .#{$prefix}--content-item__copy p,
-    ::slotted(#{$dds-prefix}-content-item-paragraph) {
-      margin-bottom: $carbon--spacing-07;
+    ::slotted(#{$c4d-prefix}-content-item-paragraph) {
+      margin-bottom: $spacing-07;
 
-      @include carbon--breakpoint('md') {
-        margin-bottom: $carbon--spacing-09;
+      @include breakpoint(md) {
+        margin-bottom: $spacing-09;
       }
     }
 
-    .#{$prefix}--card-link,
-    ::slotted(#{$dds-prefix}-feature-section-card-link) {
+    ::slotted([slot='footer']) {
       position: relative;
       display: inline-block;
       margin-left: 25%;
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         margin-left: 50%;
       }
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         position: absolute;
         margin-left: 0;
       }
@@ -87,48 +120,47 @@
     position: relative;
     padding-left: 0;
     padding-right: 0;
+    border: 1px solid $border-subtle-01;
 
-    .#{$prefix}--image,
-    ::slotted(#{$dds-prefix}-image) {
+    ::slotted(#{$c4d-prefix}-image) {
       overflow: hidden;
 
-      @include carbon--breakpoint('sm') {
+      @include breakpoint(sm) {
         height: aspect-ratio(1, 1);
       }
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         height: aspect-ratio(4, 3);
       }
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         height: aspect-ratio(1, 1);
       }
     }
   }
 
-  .#{$prefix}--card__eyebrow,
-  ::slotted(#{$dds-prefix}-card-eyebrow) {
+  ::slotted(#{$c4d-prefix}-card-eyebrow) {
     display: inline-block;
-    margin-bottom: $carbon--spacing-05;
+    margin-bottom: $spacing-03;
   }
 
-  .#{$prefix}--card-link,
-  ::slotted(#{$dds-prefix}-feature-section-card-link) {
+  ::slotted([slot='footer']) {
     position: absolute;
     right: 0;
-    bottom: 0;
+    bottom: -1px;
     width: 75%;
+    height: auto;
 
-    @include carbon--breakpoint('md') {
-      width: calc(50% - #{$carbon--spacing-05});
-      right: $carbon--spacing-05;
+    @include breakpoint(md) {
+      width: calc(50% - #{$spacing-05});
+      right: $spacing-05;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       width: calc(50% - #{$spacing-03});
     }
 
-    @include carbon--breakpoint('max') {
+    @include breakpoint(max) {
       width: calc(50% - #{$spacing-04});
     }
 
@@ -136,12 +168,8 @@
       max-width: inherit;
     }
 
-    @include carbon--breakpoint('max') {
-      right: $carbon--spacing-06;
+    @include breakpoint(max) {
+      right: $spacing-06;
     }
   }
 }
-
-@include exports('feature-section') {
-  @include feature-section;
-}
diff --git a/packages/styles/scss/components/feature-section/_index.scss b/packages/styles/scss/components/feature-section/_index.scss
new file mode 100644
index 00000000000..54bb7790002
--- /dev/null
+++ b/packages/styles/scss/components/feature-section/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'feature-section';
+@use 'feature-section';
+
+@include feature-section.feature-section;
diff --git a/packages/styles/scss/components/filter-panel/_filter-panel.scss b/packages/styles/scss/components/filter-panel/_filter-panel.scss
index e22d65d8ea7..522309f892b 100644
--- a/packages/styles/scss/components/filter-panel/_filter-panel.scss
+++ b/packages/styles/scss/components/filter-panel/_filter-panel.scss
@@ -5,31 +5,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import 'carbon-components/scss/components/accordion/keyframes';
-@import 'carbon-components/scss/components/accordion/accordion';
-@import '@carbon/web-components/scss/components/checkbox/checkbox';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/button' as *;
+@use '@carbon/styles/scss/components/checkbox';
+@use '../../../../carbon-web-components/src/components/modal/modal';
+@use '../../../../carbon-web-components/scss/components/accordion/accordion';
+@use '../../globals/vars' as *;
 
 @mixin filter-panel {
   .#{$prefix}--filter__heading {
-    @include carbon--type-style('heading-01');
+    @include type-style('heading-01');
 
     padding: $spacing-05;
   }
 
   .#{$prefix}--filter-panel__section {
-    background-color: $ui-01;
-    padding-bottom: rem(112px);
+    box-sizing: border-box;
+    background-color: $layer-01;
+    padding-bottom: to-rem(112px);
     margin-top: $spacing-05;
     overflow: initial;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       height: 80%;
       width: 60%;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       height: auto;
       width: auto;
       padding-bottom: $spacing-09;
@@ -48,30 +56,33 @@
     position: relative;
     cursor: pointer;
     padding: $spacing-03 $spacing-05;
-    color: $text-02;
-    @include carbon--type-style('body-short-01');
+    color: $text-secondary;
+    @include type-style('body-compact-01');
 
     &:hover {
-      color: $text-01;
+      color: $text-primary;
     }
 
     &:focus-visible {
       outline: $spacing-01 solid $focus;
       margin-left: $spacing-01;
       margin-right: $spacing-01;
-      padding-left: rem(14px);
+      padding-left: to-rem(14px);
       z-index: 1;
     }
 
     .#{$prefix}--close__icon {
       position: absolute;
       right: $spacing-05;
-      top: rem(10px);
+      top: to-rem(10px);
     }
   }
 
   .#{$prefix}--selected-option-dropdown {
     display: grid;
+    padding: 0;
+    margin: 0;
+
     &.#{$prefix}--selected-option-dropdown__hidden {
       display: none;
     }
@@ -92,9 +103,9 @@
     cursor: pointer;
     padding-right: $spacing-05;
     border: 0;
-    color: $link-01;
-    background-color: $ui-01;
-    @include carbon--type-style('body-short-01');
+    color: $link-primary;
+    background-color: $layer-01;
+    @include type-style('body-compact-01');
   }
 
   .#{$prefix}--heading-clear {
@@ -109,14 +120,10 @@
 
   .#{$prefix}--clear__container {
     display: flex;
+    align-items: center;
   }
 
-  .#{$prefix}--filter__modal__button {
-    display: flex;
-    justify-content: space-between;
-  }
-
-  :host(#{$dds-prefix}-filter-panel) {
+  :host(#{$c4d-prefix}-filter-panel) {
     .#{$prefix}--clear {
       display: block;
 
@@ -128,55 +135,42 @@
       }
 
       &:hover {
-        color: $hover-primary-text;
+        color: $link-primary-hover;
       }
     }
 
     &:not([has-selections]) {
       .#{$prefix}--clear {
-        color: $disabled-02;
+        color: $button-disabled;
         cursor: not-allowed;
       }
     }
-    @include carbon--breakpoint-down('lg') {
+    @include breakpoint-down(lg) {
       display: none;
     }
   }
 
-  :host(#{$dds-prefix}-filter-panel-composite) {
-    .#{$prefix}--filter-button {
-      @include carbon--type-style('body-short-01');
+  :host(#{$c4d-prefix}-filter-panel-composite) {
+    @include emit-layout-tokens();
 
-      cursor: pointer;
-      border: 1px solid $interactive-03;
-      color: $interactive-03;
-      padding: $spacing-05;
-      margin-top: $spacing-05;
-      margin-left: $spacing-05;
-      background-color: transparent;
-      width: rem(128px);
-      @include carbon--breakpoint('lg') {
+    #{$prefix}-button {
+      @include breakpoint(lg) {
         display: none;
       }
-
-      &:hover {
-        background-color: $hover-tertiary;
-        color: $inverse-01;
-      }
     }
   }
 
-  :host(#{$dds-prefix}-filter-panel-checkbox) {
-    padding-left: rem(14px);
-    padding-bottom: rem(6px);
-    @extend :host(#{$prefix}-checkbox);
-    @include carbon--type-style('body-short-01');
+  :host(#{$c4d-prefix}-filter-panel-checkbox) {
+    padding-left: to-rem(14px);
+    padding-bottom: to-rem(6px);
+    @extend .#{$prefix}--checkbox-label;
+    @include type-style('body-compact-01');
 
-    color: $text-02;
+    color: $text-secondary;
 
     &:hover,
     &[checked] {
-      color: $text-01;
+      color: $text-primary;
     }
 
     label.#{$prefix}--checkbox-label {
@@ -184,20 +178,20 @@
       padding-left: $spacing-06;
 
       &::before {
-        border: 1px solid $icon-02;
+        border: 1px solid $icon-secondary;
       }
 
       &:hover::before {
-        border: 1px solid $icon-01;
+        border: 1px solid $icon-primary;
       }
     }
   }
 
-  :host(#{$dds-prefix}-filter-panel-input-select) {
+  :host(#{$c4d-prefix}-filter-panel-input-select) {
     display: block;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
 
     &[selected] {
@@ -205,19 +199,18 @@
     }
   }
 
-  :host(#{$dds-prefix}-filter-panel-input-select-item) {
-    @include carbon--type-style('body-short-01');
+  :host(#{$c4d-prefix}-filter-panel-input-select-item) {
+    @include type-style('body-compact-01');
 
-    background-color: $ui-01;
-    width: 100%;
+    background-color: $layer-01;
     cursor: pointer;
     position: relative;
-    color: $text-02;
+    color: $text-secondary;
     padding: $spacing-03 $spacing-06;
 
     &:hover {
-      background-color: $hover-ui;
-      color: $text-01;
+      background-color: $background-hover;
+      color: $text-primary;
     }
 
     &:active {
@@ -226,34 +219,38 @@
 
     &[selected] {
       background-color: $highlight;
-      color: $text-01;
+      color: $text-primary;
     }
 
     .#{$prefix}--close__icon {
       position: absolute;
       right: $spacing-05;
-      top: rem(10px);
+      top: to-rem(10px);
     }
   }
 
-  :host(#{$dds-prefix}-filter-panel-heading) {
+  :host(#{$c4d-prefix}-filter-panel-heading) {
     display: none;
   }
 
-  :host(#{$dds-prefix}-filter-group:first-of-type) {
+  :host(#{$c4d-prefix}-filter-group) {
+    @extend :host(#{$prefix}-accordion);
+  }
+
+  :host(#{$c4d-prefix}-filter-group:first-of-type) {
     ::slotted(#{$prefix}-filter-group-item:first-of-type) {
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         margin-top: $spacing-05;
       }
     }
   }
 
-  :host(#{$dds-prefix}-filter-group-item) {
-    @extend .#{$prefix}--accordion__item;
+  :host(#{$c4d-prefix}-filter-group-item) {
+    @extend :host(#{$prefix}-accordion-item);
 
     display: block;
     outline: none;
-    border-top: 1px solid $ui-03;
+    border-top: 1px solid $layer-accent-01;
     border-bottom: none;
 
     .#{$prefix}--accordion__heading {
@@ -261,20 +258,32 @@
       align-items: center;
     }
 
-    .#{$prefix}--accordion__arrow {
-      align-self: flex-start;
+    .#{$prefix}--accordion__title {
+      @include type-style('heading-01');
     }
 
-    .#{$prefix}--accordion__title {
-      @include carbon--type-style('heading-01');
+    .#{$c4d-prefix}-filter-group-item__view-all {
+      @include font-family('sans');
+
+      width: 100%;
+      padding: $spacing-03 $spacing-05;
+      text-align: left;
+      cursor: pointer;
+
+      &:focus-visible {
+        outline: none;
+        border-color: $focus;
+        box-shadow: inset 0 0 0 $button-outline-width $focus,
+          inset 0 0 0 $button-border-width $background;
+      }
     }
 
     &:last-of-type {
-      border-bottom: 1px solid $ui-03;
+      border-bottom: 1px solid $layer-accent-01;
     }
   }
 
-  :host(#{$dds-prefix}-filter-group-item[open]:not([disabled])) {
+  :host(#{$c4d-prefix}-filter-group-item[open]:not([disabled])) {
     @extend .#{$prefix}--accordion__item--active;
 
     .#{$prefix}--accordion__content {
@@ -283,7 +292,8 @@
     }
   }
 
-  :host(#{$dds-prefix}-filter-modal-footer) {
+  :host(#{$c4d-prefix}-filter-modal-footer) {
+    display: flex;
     z-index: 999;
     position: absolute;
     bottom: 0;
@@ -291,14 +301,56 @@
     overflow: auto;
   }
 
-  :host(#{$dds-prefix}-filter-modal-heading) {
-    @include carbon--type-style('heading-01');
+  :host(#{$c4d-prefix}-filter-modal-heading) {
+    @include type-style('heading-01');
 
     display: block;
     padding-bottom: $spacing-03;
   }
-}
 
-@include exports('filter-panel') {
-  @include filter-panel;
+  :host(#{$c4d-prefix}-filter-panel-modal) {
+    @extend :host(#{$prefix}-modal);
+
+    left: 0;
+
+    @include breakpoint(lg) {
+      display: none;
+    }
+
+    .#{$prefix}--filter-panel__section.#{$prefix}--modal-container {
+      transform: translate3d(0, 0, 0);
+      overflow: initial;
+      @include breakpoint(md) {
+        height: 80%;
+        width: 60%;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-filter-panel-modal[open]) {
+    @extend :host(#{$prefix}-modal[open]);
+    @include breakpoint(lg) {
+      display: none;
+    }
+  }
+
+  :host(#{$c4d-prefix}-filter-panel-modal[expressive-size='full-width']) {
+    .#{$prefix}--modal-container {
+      max-height: none;
+
+      @include breakpoint(lg) {
+        width: calc(100% - $spacing-07);
+        height: calc(100% - $spacing-07);
+      }
+
+      .#{$prefix}--modal-content {
+        margin: $spacing-09 $spacing-07;
+        padding: 0;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-filter-modal-footer-button) {
+    @extend :host(#{$prefix}-modal-footer-button);
+  }
 }
diff --git a/packages/styles/scss/components/filter-panel/_index.scss b/packages/styles/scss/components/filter-panel/_index.scss
new file mode 100644
index 00000000000..f4359d360ce
--- /dev/null
+++ b/packages/styles/scss/components/filter-panel/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'filter-panel';
+@use 'filter-panel';
+
+@include filter-panel.filter-panel;
diff --git a/packages/styles/scss/components/footer/README.md b/packages/styles/scss/components/footer/README.md
deleted file mode 100644
index 9ece04668c8..00000000000
--- a/packages/styles/scss/components/footer/README.md
+++ /dev/null
@@ -1,27 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/footer/index';
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--footer` class.
-
-| Class                | Description                                |
-| -------------------- | ------------------------------------------ |
-| `.bx--footer--short` | The className for the short footer variant |
-
-#### Blocks
-
-| Class                   | Description                                       |
-| ----------------------- | ------------------------------------------------- |
-| `.bx--footer`           | Highest level class name for the footer component |
-| `.bx--footer-logo`      | IBM logo for the Footer                           |
-| `.bx--footer-nav`       | Main navigational section within the footer       |
-| `.bx--footer-nav-group` | A title and list of links for footer              |
-| `.bx--legal-nav`        | Required legal navigation below the footer        |
diff --git a/packages/styles/scss/components/footer/_components.scss b/packages/styles/scss/components/footer/_components.scss
deleted file mode 100644
index ba23690981f..00000000000
--- a/packages/styles/scss/components/footer/_components.scss
+++ /dev/null
@@ -1,22 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../locale-modal/locale-modal';
-
-// /// Include footer components with g90 theme
-// /// @access private
-// /// @group footer
-
-@import 'language-selector';
-@import 'locale-button';
-@import 'footer';
-@import 'footer-logo';
-@import 'footer-nav';
-@import 'footer-nav-group';
-@import 'legal-nav';
diff --git a/packages/styles/scss/components/footer/_footer-logo.scss b/packages/styles/scss/components/footer/_footer-logo.scss
index 787aa2922fe..e396445b982 100644
--- a/packages/styles/scss/components/footer/_footer-logo.scss
+++ b/packages/styles/scss/components/footer/_footer-logo.scss
@@ -1,61 +1,75 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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.
  */
 
+@use 'sass:math';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+
 /// Footer title styles
 /// @access private
 /// @group footer
 
 @mixin footer-logo {
-  :host(#{$dds-prefix}-footer-logo),
+  :host(#{$c4d-prefix}-footer-logo),
   .#{$prefix}--footer-logo {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      &:focus-visible {
-        outline: none;
-      }
-      @include carbon--make-col(2, 4);
-
-      @include carbon--breakpoint('md') {
-        margin-bottom: $spacing-09;
-        @include carbon--make-col(2, 8);
-      }
-
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(2, 16);
-      }
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
+
+    &:focus-visible {
+      outline: none;
+    }
+    @include make-col(2, 4);
+
+    @include breakpoint(md) {
+      margin-bottom: $spacing-09;
+      @include make-col(2, 8);
+    }
+
+    @include breakpoint(lg) {
+      @include make-col(2, 16);
     }
   }
 
-  .#{$prefix}--footer-logo__link {
-    $logo-padding: $carbon--grid-gutter / 2;
-    $logo-size: carbon--mini-units(16) + ($logo-padding * 2);
+  .#{$c4d-prefix}--footer-logo__link {
+    $logo-padding: math.div($grid-gutter, 2);
+    $logo-size: 8rem + ($logo-padding * 2);
 
-    color: $text-04;
+    color: $text-on-color;
     padding-left: $logo-padding;
     display: inline-block;
 
-    @include carbon--make-col-ready;
+    @include make-col-ready;
 
     width: auto;
     &:focus {
       outline: none;
-      box-shadow: inset 0 0 0 2px $focus;
+      box-shadow: inset 0 0 0 $spacing-01 $focus;
     }
   }
 
-  .#{$prefix}--footer-logo__logo {
+  .#{$c4d-prefix}--footer-logo__logo {
     fill: currentColor;
     display: inline-block;
     width: 128px;
   }
-}
 
-@include exports('footer-logo') {
-  @include footer-logo;
+  :host(#{$c4d-prefix}-footer-logo[size='micro']) {
+    align-self: center;
+    margin: 0;
+
+    @include breakpoint-between(md, lg) {
+      position: absolute;
+      bottom: to-rem(58.5px);
+    }
+  }
 }
diff --git a/packages/styles/scss/components/footer/_footer-nav-group.scss b/packages/styles/scss/components/footer/_footer-nav-group.scss
index 33aa257cdb8..46ec1507680 100644
--- a/packages/styles/scss/components/footer/_footer-nav-group.scss
+++ b/packages/styles/scss/components/footer/_footer-nav-group.scss
@@ -5,69 +5,85 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+
 /// Footer nav group styles
 /// @access private
 /// @group footer
 
 @mixin footer-nav-group {
-  :host(#{$dds-prefix}-footer-nav-group),
+  :host(#{$c4d-prefix}-footer-nav-group),
   .#{$prefix}--footer-nav-group,
   .#{$prefix}--footer-nav-group.#{$prefix}--accordion__item {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      padding-left: 0;
-      display: block;
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-      &:last-child {
-        margin-bottom: carbon--mini-units(6);
-        border-bottom: 1px solid $ui-03;
+    padding-left: 0;
+    display: block;
 
-        @include carbon--breakpoint('md') {
-          border-bottom: none;
-        }
+    &:last-child {
+      margin-bottom: $spacing-09;
+      border-bottom: 1px solid $layer-accent-01;
+
+      @include breakpoint(md) {
+        border-bottom: none;
       }
+    }
 
-      .#{$prefix}--accordion__content {
-        padding-left: 0;
-        padding-right: 0;
+    .#{$prefix}--accordion__content {
+      padding-left: 0;
+      padding-right: 0;
+
+      ul {
+        list-style: none;
+        padding-inline-start: 0;
+        margin: 0;
       }
+    }
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col-ready;
+    .#{$prefix}--accordion__arrow {
+      margin: 2px $spacing-05 0 0;
+    }
 
-        padding-left: 0;
-        display: inline-block;
-        margin-bottom: carbon--mini-units(6);
+    @include breakpoint(md) {
+      @include make-col-ready;
 
-        &.#{$prefix}--accordion__item {
-          border-top: 0 transparent;
-        }
+      padding-left: 0;
+      display: inline-block;
+      margin-bottom: $spacing-09;
 
-        .#{$prefix}--accordion__heading {
-          display: none;
-        }
+      &.#{$prefix}--accordion__item {
+        border-top: 0 transparent;
+      }
 
-        .#{$prefix}--accordion__content {
-          display: block;
-          height: auto;
-          opacity: 1;
-          visibility: visible;
-        }
+      .#{$prefix}--accordion__heading {
+        display: none;
+      }
 
-        .#{$prefix}--accordion__content,
-        &.#{$prefix}--accordion__item--active .#{$prefix}--accordion__content {
-          padding: 0;
-        }
+      .#{$prefix}--accordion__content {
+        display: block;
+        height: auto;
+        opacity: 1;
+        visibility: visible;
+      }
+
+      .#{$prefix}--accordion__content,
+      &.#{$prefix}--accordion__item--active .#{$prefix}--accordion__content {
+        padding: 0;
       }
     }
   }
 
-  :host(#{$dds-prefix}-footer-nav-item),
+  :host(#{$c4d-prefix}-footer-nav-item),
   .#{$prefix}--footer-nav-group {
     .#{$prefix}--link {
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         margin-top: 0;
         display: block;
         padding: $spacing-05;
@@ -78,11 +94,11 @@
         }
 
         &:hover {
-          background-color: $hover-ui;
+          background-color: $background-hover;
         }
 
         &:active {
-          background-color: $active-ui;
+          background-color: $layer-active-01;
         }
 
         &:focus {
@@ -94,27 +110,24 @@
   }
 
   .#{$prefix}--footer-nav-group__title {
-    @include carbon--type-style('expressive-heading-01');
+    @include type-style('heading-01');
 
     display: none;
   }
 
   .#{$prefix}--footer-nav-group__link {
-    @include carbon--type-style('body-long-01');
+    @include type-style('body-01');
   }
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint(md) {
     .#{$prefix}--footer-nav-group__title {
       display: block;
+      margin: 0;
     }
 
-    :host(#{$dds-prefix}-footer-nav-item),
+    :host(#{$c4d-prefix}-footer-nav-item),
     .#{$prefix}--footer-nav-group__item {
-      margin-top: carbon--mini-units(1);
+      margin-top: $spacing-03;
     }
   }
 }
-
-@include exports('footer-nav-group') {
-  @include footer-nav-group;
-}
diff --git a/packages/styles/scss/components/footer/_footer-nav.scss b/packages/styles/scss/components/footer/_footer-nav.scss
index e1f1a5021b0..2fb5742ea7f 100644
--- a/packages/styles/scss/components/footer/_footer-nav.scss
+++ b/packages/styles/scss/components/footer/_footer-nav.scss
@@ -5,82 +5,84 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/components/accordion/accordion';
+@use 'sass:list';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/components/accordion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
 
 /// Footer nav styles
 /// @access private
 /// @group footer
 
 @mixin footer-nav {
-  :host(#{$dds-prefix}-footer-nav),
-  .#{$prefix}--footer-nav {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include accordion;
-      @include carbon--make-col-ready;
+  :host(#{$c4d-prefix}-footer-nav) {
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-      padding: 0;
-      order: 1;
+    @include accordion;
+    @include make-col-ready;
 
-      @include carbon--breakpoint('md') {
-        border-top: 1px solid $ui-03;
-        padding: 0 $carbon--grid-gutter / 2;
-      }
+    padding: 0;
+    order: 1;
 
-      @include carbon--breakpoint-between('md', 'lg') {
-        padding-top: carbon--mini-units(2);
-      }
+    @include breakpoint(md) {
+      padding: 0 calc($grid-gutter / 2);
+    }
+
+    @include breakpoint(lg) {
+      @include make-col(12, 16);
+    }
 
-      @include carbon--breakpoint('lg') {
-        padding-top: $spacing-05;
-        @include carbon--make-col(12, 16);
-        @include carbon--make-col-offset(4, 16);
-      }
+    .#{$prefix}--accordion__heading {
+      display: flex;
+      align-items: center;
+      min-height: $spacing-09;
+      padding: 0;
+    }
 
-      .#{$prefix}--accordion__heading {
-        display: flex;
-        align-items: center;
-        min-height: $carbon--spacing-09;
-        padding: 0;
-      }
+    ::slotted([slot='locale-button']),
+    ::slotted([slot='language-selector']) {
+      display: inline-block;
+      margin-left: 0;
+      width: 100%;
+      max-width: 100%;
     }
   }
 
-  :host(#{$dds-prefix}-footer-nav[disable-locale-button]),
+  :host(#{$c4d-prefix}-footer-nav[disable-locale-button]),
   nav.#{$prefix}--footer-nav__locale-button--disabled {
     border-top: none;
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       padding-top: 0;
-      @include carbon--make-col-offset(2, 16);
+      @include make-col-offset(2, 16);
     }
   }
 
   .#{$prefix}--footer-nav__container {
-    @include carbon--breakpoint('md') {
-      @include carbon--make-row;
+    @include breakpoint(md) {
+      @include make-row;
 
       display: block;
       column-count: 2;
-      column-gap: $carbon--grid-gutter;
+      column-gap: $grid-gutter;
       margin-left: 0;
       margin-right: 0;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       column-count: 3;
-      column-gap: $carbon--grid-gutter;
+      column-gap: $grid-gutter;
     }
   }
 
-  :host(#{$dds-prefix}-footer[size='short'])
-    ::slotted(#{$dds-prefix}-footer-nav),
+  :host(#{$c4d-prefix}-footer[size='short'])
+    ::slotted(#{$c4d-prefix}-footer-nav),
   .#{$prefix}--footer--short .#{$prefix}--footer-nav {
     display: none;
   }
 }
-
-@include exports('footer-nav') {
-  @include footer-nav;
-}
diff --git a/packages/styles/scss/components/footer/_footer.scss b/packages/styles/scss/components/footer/_footer.scss
index d598388e6eb..ca0741cd0e2 100644
--- a/packages/styles/scss/components/footer/_footer.scss
+++ b/packages/styles/scss/components/footer/_footer.scss
@@ -1,61 +1,97 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/combo-box';
+@use '@carbon/styles/scss/components/select';
+@use '@carbon/styles/scss/components/form';
+@use '@carbon/styles/scss/components/text-input';
+@use '@carbon/styles/scss/components/link';
+@use '../locale-modal';
+
 /// Footer styles
 /// @access private
 /// @group footer
 
 @mixin footer {
-  :host(#{$dds-prefix}-footer),
-  .#{$prefix}--footer {
+  :host(#{$c4d-prefix}-footer) {
     width: 100%;
-    padding-block: $carbon--spacing-09;
+    padding-block: $spacing-09;
 
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      color: $text-01;
-      background-color: $ui-background;
-      padding-top: carbon--mini-units(6);
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-      .#{$prefix}--modal-content {
-        .#{$prefix}--link {
-          &,
-          &:visited {
-            color: $inverse-01;
-          }
+    color: $text-primary;
+    background-color: $background;
+    padding-top: $spacing-09;
+
+    .#{$prefix}--modal-content {
+      .#{$prefix}--link {
+        &,
+        &:visited {
+          color: $icon-inverse;
         }
       }
     }
+
+    @include breakpoint-down(md) {
+      ::slotted([slot='brand']) {
+        margin-bottom: $spacing-09;
+      }
+    }
   }
 
-  :host(#{$dds-prefix}-footer[size='short']),
-  .#{$prefix}--footer--short {
-    padding-block: carbon--mini-units(4);
+  :host(#{$c4d-prefix}-footer[size='short']) {
+    .#{$prefix}--footer__logo-container {
+      width: 100%;
+    }
 
     .#{$prefix}--language-selector__container {
       margin-top: $spacing-09;
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         margin-top: 0;
       }
-      @include carbon--breakpoint('max') {
-        @include carbon--make-col-offset(10, 16);
+      @include breakpoint(max) {
+        @include make-col-offset(10, 16);
+      }
+    }
+
+    @include breakpoint-down(md) {
+      ::slotted([slot='brand']) {
+        margin-bottom: 0;
       }
     }
   }
 
-  :host(#{$dds-prefix}-footer[size='micro']),
-  .#{$prefix}--footer--micro {
-    padding-top: 0;
-    padding-bottom: 0;
+  :host(#{$c4d-prefix}-footer[size='micro']) {
+    @include breakpoint(md) {
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    @include breakpoint-down(md) {
+      ::slotted([slot='locale-button']) {
+        margin-top: 0;
+      }
+    }
 
     .#{$prefix}--footer__logo-container {
-      display: none;
+      @include breakpoint(md) {
+        display: none;
+      }
     }
 
     .#{$prefix}--language-selector__container {
@@ -74,52 +110,47 @@
     }
   }
 
-  :host(#{$dds-prefix}-footer-nav-item),
-  :host(#{$dds-prefix}-legal-nav-item),
-  :host(#{$dds-prefix}-legal-nav-cookie-preferences-placeholder),
-  .#{$prefix}--footer {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      .#{$prefix}--footer__link.#{$prefix}--link {
-        @include carbon--type-style('body-long-01');
-        &,
-        &:visited {
-          color: $text-02;
-        }
+  :host(#{$c4d-prefix}-footer-nav-item),
+  :host(#{$c4d-prefix}-legal-nav-item),
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div {
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-        &:focus {
-          outline-color: $focus;
-          outline-offset: -1px;
-        }
+    display: list-item;
+    outline: none;
 
-        &:active {
-          color: $text-04;
-        }
+    .#{$prefix}--footer__link.#{$prefix}--link {
+      @include type-style('body-01');
+      &,
+      &:visited {
+        color: $text-secondary;
+      }
 
-        &:hover,
-        &:visited:hover {
-          color: $text-01;
-        }
+      &:focus {
+        outline-color: $focus;
+        outline-offset: -1px;
+      }
+
+      &:active {
+        color: $text-on-color;
+      }
+
+      &:hover,
+      &:visited:hover {
+        color: $text-primary;
       }
     }
   }
 
-  :host(#{$dds-prefix}-legal-nav),
-  .#{$prefix}--footer {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      .#{$prefix}--legal-nav__list {
-        .#{$prefix}--legal-nav__list-item {
-          .#{$prefix}--link {
-            color: $text-02;
+  :host(#{$c4d-prefix}-legal-nav) {
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-            &:hover {
-              color: $text-01;
-            }
+    .#{$prefix}--legal-nav__list {
+      .#{$prefix}--legal-nav__list-item {
+        .#{$prefix}--link {
+          color: $text-secondary;
+
+          &:hover {
+            color: $text-primary;
           }
         }
       }
@@ -127,48 +158,52 @@
   }
 
   .#{$prefix}--footer__main {
-    @include carbon--make-container;
+    box-sizing: border-box;
+    @include make-container;
   }
 
   .#{$prefix}--footer__main-container {
-    @include carbon--make-row;
+    @include make-row;
 
     flex-direction: column;
 
-    :host(#{$dds-prefix}-footer[size='short']) &,
+    :host(#{$c4d-prefix}-footer[size='short']) &,
     .#{$prefix}--footer--short & {
       flex-direction: row;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       flex-direction: row;
     }
   }
 
   .#{$prefix}--footer__logo-container {
-    width: 100%;
-    @include carbon--make-container;
+    @include make-container;
+
+    margin-right: 0;
+    margin-left: 0;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-bottom: 0;
       padding-left: $spacing-05;
       padding-right: $spacing-05;
     }
 
-    .#{$prefix}--footer__logo-row {
-      @include carbon--make-row;
+    @include breakpoint(lg) {
+      width: 100%;
+      margin-right: auto;
+      margin-left: auto;
     }
-  }
 
-  .#{$prefix}--footer__locale-button--disabled {
-    @include carbon--make-col(2, 16);
+    .#{$prefix}--footer__logo-row {
+      @include make-row;
 
-    margin-left: 0;
-    margin-right: 0;
+      justify-content: space-between;
+    }
   }
 
   @media print {
-    :host(#{$dds-prefix}-footer),
+    :host(#{$c4d-prefix}-footer),
     .#{$prefix}--footer {
       /* stylelint-disable declaration-no-important */
       // need important since it gets overriden in WC Footer without it
@@ -176,8 +211,347 @@
       /* stylelint-enable declaration-no-important */
     }
   }
-}
 
-@include exports('footer') {
-  @include footer;
+  :host(#{$c4d-prefix}-footer),
+  :host(#{$c4d-prefix}-legal-nav) {
+    display: block;
+    .#{$c4d-prefix}--adjunct-links__container {
+      list-style: none;
+      margin-top: $spacing-07;
+      @include breakpoint-down(md) {
+        @include make-container;
+      }
+    }
+    .#{$prefix}--adjunct-links__container--hidden {
+      display: none;
+    }
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group[open]) {
+    @extend .#{$prefix}--accordion__item--active;
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group[open]) .#{$prefix}--accordion__content {
+    display: block;
+    padding-top: 0;
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group) {
+    .#{$prefix}--accordion__heading {
+      border-top: 1px solid $border-subtle-01;
+      padding: 0;
+      align-items: center;
+      min-height: $spacing-09;
+    }
+  }
+
+  :host(#{$c4d-prefix}-footer-nav-group:last-of-type) {
+    @include breakpoint-down(md) {
+      border-bottom: 1px solid $border-subtle-01;
+    }
+  }
+
+  // The style of legal nav deviates from the one of React, so we can make the markup simpler.
+  // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
+  :host(#{$c4d-prefix}-legal-nav):not([size='micro']) {
+    .#{$c4d-prefix}--adjunct-links__container,
+    .#{$c4d-prefix}--legal-nav__list {
+      padding-bottom: 0;
+      padding-top: 0;
+
+      @include breakpoint(md) {
+        padding-top: $spacing-03;
+      }
+      @include breakpoint(lg) {
+        @include make-col-offset(4, 16);
+      }
+
+      > ul {
+        width: 100%;
+        @include breakpoint(md) {
+          display: block;
+          column-count: 2;
+          column-gap: $grid-gutter;
+        }
+
+        @include breakpoint(lg) {
+          column-count: 3;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-legal-nav[size='micro']) {
+    ::slotted(#{$c4d-prefix}-legal-nav-item),
+    ::slotted(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) {
+      @include breakpoint(md) {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        min-height: $spacing-09;
+      }
+    }
+
+    .#{$c4d-prefix}--adjunct-links__container {
+      display: none;
+    }
+
+    .#{$c4d-prefix}--legal-nav {
+      display: block;
+      border-top: 0;
+    }
+
+    // The style of legal nav deviates from the one of React, so we can make the markup simpler.
+    // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
+    .#{$c4d-prefix}--legal-nav__list {
+      width: 100%;
+
+      div {
+        @include breakpoint(lg) {
+          display: flex;
+        }
+      }
+
+      div > ul {
+        border-top: 1px solid $border-subtle-01;
+        padding: 0 $spacing-05;
+
+        @include breakpoint-down(md) {
+          padding-top: $spacing-03;
+        }
+
+        @include breakpoint(md) {
+          display: flex;
+          column-count: inherit;
+        }
+
+        @include breakpoint(lg) {
+          border-top: none;
+          padding: 0 $spacing-05 0 $spacing-07;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-locale-button[size='micro']) {
+    @include breakpoint(md) {
+      margin: 0;
+      flex-shrink: 1;
+      padding: 0;
+
+      margin-left: 50%;
+
+      .#{$prefix}--btn--tertiary {
+        background-color: $background;
+        margin: 0;
+        border: none;
+        @include type-style('body-short-01');
+        @include breakpoint(md) {
+          align-self: flex-end;
+          border-left: 1px solid $border-subtle-01;
+        }
+
+        @include breakpoint(lg) {
+          margin: 0 (-$spacing-05) 0 0;
+        }
+
+        &:hover,
+        &:focus {
+          background-color: $background-hover;
+          color: $text-primary;
+        }
+
+        .#{$prefix}--btn--tertiary,
+        .#{$prefix}--list-box,
+        .#{$prefix}--select-input {
+          background-color: $background;
+          max-width: 100%;
+
+          &:hover {
+            background-color: $background-hover;
+          }
+
+          &:active {
+            background-color: $background-active;
+          }
+        }
+
+        .#{$prefix}--select {
+          max-width: 100%;
+        }
+
+        .#{$prefix}--text-input,
+        .#{$prefix}--list-box,
+        .#{$prefix}--select-input {
+          border-bottom: none;
+        }
+      }
+    }
+    @include breakpoint(lg) {
+      margin-left: 0;
+    }
+
+    .#{$prefix}--btn {
+      padding-top: $spacing-04;
+      padding-bottom: $spacing-04;
+    }
+
+    .#{$prefix}--locale-btn {
+      max-width: 100%;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-desktop),
+  :host(#{$c4d-prefix}-language-selector-mobile) {
+    position: relative;
+    outline: none;
+    margin-top: $spacing-09;
+    margin-bottom: $spacing-09;
+    max-height: $spacing-09;
+    padding: 0 $spacing-05;
+    @include make-col(4, 4);
+
+    .#{$prefix}--list-box__field {
+      background-color: $layer-01;
+    }
+
+    .#{$prefix}--combo-box {
+      bottom: $spacing-05;
+    }
+
+    .#{$prefix}--list-box__menu {
+      position: absolute;
+      top: auto;
+      bottom: 47px;
+      max-height: 13.5rem;
+    }
+
+    .#{$prefix}--text-input {
+      @include type-style('body-short-01');
+      @include emit-layout-tokens();
+    }
+
+    @include breakpoint(md) {
+      margin-top: 0;
+      padding: 0;
+      @include make-col(4, 8);
+      @include make-col-offset(2, 8);
+    }
+
+    @include breakpoint(lg) {
+      @include make-col(4, 16);
+      @include make-col-offset(10, 16);
+
+      order: 1;
+      min-width: 13.5rem;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-desktop) {
+    .#{$prefix}--list-box__menu-icon {
+      right: $spacing-04;
+    }
+
+    .#{$prefix}--list-box__selection {
+      right: 2.25rem;
+    }
+
+    .#{$prefix}--label-visually-hidden {
+      visibility: hidden;
+      height: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-desktop[size='micro']) {
+    margin: 0;
+    padding: 0;
+    border-left: 1px solid $border-subtle-01;
+    align-self: flex-end;
+    margin-bottom: 0;
+    width: 100%;
+
+    .#{$prefix}--dropdown {
+      background-color: $background;
+      max-height: $spacing-09;
+      height: $spacing-09;
+
+      .#{$prefix}--list-box__field {
+        height: inherit;
+        background-color: $background;
+      }
+
+      &:hover {
+        background-color: $background-hover;
+      }
+    }
+
+    .#{$prefix}--list-box__menu {
+      bottom: to-rem($spacing-09);
+    }
+
+    .#{$prefix}--dropdown,
+    .#{$prefix}--text-input {
+      border-bottom: none;
+    }
+
+    @include breakpoint(sm) {
+      .#{$prefix}--select-input__wrapper {
+        height: 100%;
+      }
+
+      .#{$prefix}--select-input {
+        height: 100%;
+        background-color: $background;
+        border-bottom: none;
+
+        &:hover {
+          background-color: $background-hover;
+        }
+      }
+    }
+
+    @include breakpoint(md) {
+      max-width: 50%;
+      border-left: 1px solid $border-subtle-01;
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-mobile[size='micro']) {
+    align-self: flex-end;
+    border-left: 1px solid $border-subtle-01;
+    width: 100%;
+    margin-top: 0;
+
+    .#{$prefix}--select {
+      display: block;
+    }
+
+    .#{$prefix}--select-input {
+      height: 100%;
+      width: 100%;
+      max-width: 100%;
+
+      &:hover {
+        background-color: $background-hover;
+      }
+    }
+
+    @include breakpoint(md) {
+      margin: 0;
+      max-width: 50%;
+      padding: 0;
+
+      .#{$prefix}--select-input {
+        background-color: $background;
+        border-bottom: none;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-language-selector-mobile) {
+    .#{$prefix}--select-input__wrapper {
+      height: $spacing-09;
+      margin-top: -#{$spacing-05};
+    }
+  }
 }
diff --git a/packages/styles/scss/components/footer/_index.scss b/packages/styles/scss/components/footer/_index.scss
new file mode 100644
index 00000000000..f5b86c2df6f
--- /dev/null
+++ b/packages/styles/scss/components/footer/_index.scss
@@ -0,0 +1,29 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@use 'footer';
+@forward 'footer';
+@use 'footer-logo';
+@forward 'footer-logo';
+@use 'footer-nav';
+@forward 'footer-nav';
+@use 'footer-nav-group';
+@forward 'footer-nav-group';
+@use 'language-selector';
+@forward 'language-selector';
+@use 'legal-nav';
+@forward 'legal-nav';
+@use 'locale-button';
+@forward 'locale-button';
+
+@include footer.footer;
+@include footer-logo.footer-logo;
+@include footer-nav.footer-nav;
+@include footer-nav-group.footer-nav-group;
+@include language-selector.language-selector;
+@include legal-nav.legal-nav;
+@include locale-button.locale-button;
diff --git a/packages/styles/scss/components/footer/_language-selector.scss b/packages/styles/scss/components/footer/_language-selector.scss
index af68ae08c2c..8530371d344 100644
--- a/packages/styles/scss/components/footer/_language-selector.scss
+++ b/packages/styles/scss/components/footer/_language-selector.scss
@@ -1,14 +1,21 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/components/combo-box/combo-box';
-@import 'carbon-components/scss/components/list-box/list-box';
-@import 'carbon-components/scss/components/select/select';
-@import 'carbon-components/scss/components/text-input/text-input';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/combo-box/combo-box' as *;
+@use '@carbon/styles/scss/components/list-box/list-box' as *;
+@use '@carbon/styles/scss/components/select/select' as *;
+@use '@carbon/styles/scss/components/text-input/text-input' as *;
+@use '../../globals/utils/flex-grid' as *;
 
 /// Footer language selector
 /// @access private
@@ -16,97 +23,97 @@
 
 @mixin language-selector {
   .#{$prefix}--language-selector__container {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include combo-box;
-      @include listbox;
-      @include select;
-      @include text-input;
-
-      margin: $spacing-09 0;
-      padding-left: 0;
-      padding-right: 0;
-      order: 0;
-      @include carbon--type-style('body-short-01');
-      @include carbon--breakpoint-down('md') {
-        @include carbon--make-col-ready;
-      }
-      @include carbon--breakpoint('md') {
-        margin-top: 0;
-        @include carbon--make-col(4, 8);
-        @include carbon--make-col-offset(2, 8);
-      }
-      .#{$prefix}--language-selector {
-        max-width: 100%;
-        width: 100%;
-        height: $spacing-09;
-        margin-right: 0;
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
 
-        .#{$prefix}--list-box__menu-icon {
-          right: $spacing-04;
-        }
+    @include combo-box;
+    @include list-box;
+    @include select;
+    @include text-input;
 
-        .#{$prefix}--list-box__selection {
-          right: 2.25rem;
-        }
+    margin: $spacing-09 0;
+    padding-left: 0;
+    padding-right: 0;
+    order: 0;
 
-        .#{$prefix}--list-box__field {
-          height: inherit;
-        }
+    @include type-style('body-compact-01');
+    @include breakpoint-down(md) {
+      @include make-col-ready;
+    }
 
-        @include carbon--breakpoint('md') {
-          min-width: carbon--mini-units(27);
+    @include breakpoint(md) {
+      margin-top: 0;
+      @include make-col(4, 8);
+      @include make-col-offset(2, 8);
+    }
 
-          .#{$prefix}--footer--short & {
-            float: right;
-          }
-        }
+    .#{$prefix}--language-selector {
+      max-width: 100%;
+      width: 100%;
+      height: $spacing-09;
+      margin-right: 0;
 
-        // Expressive styles
-        .#{$prefix}--text-input,
-        .#{$prefix}--list-box__menu-item__option {
-          @include carbon--type-style('body-short-01');
-        }
+      .#{$prefix}--list-box__menu-icon {
+        right: $spacing-04;
       }
 
-      .#{$prefix}--footer--short & {
-        margin-top: 0;
+      .#{$prefix}--list-box__selection {
+        right: 2.25rem;
       }
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(4, 8);
+      .#{$prefix}--list-box__field {
+        height: inherit;
+      }
 
-        margin-bottom: carbon--mini-units(2);
+      @include breakpoint(md) {
+        min-width: carbon--mini-units(27);
 
         .#{$prefix}--footer--short & {
-          @include carbon--make-col-offset(2, 8);
+          float: right;
         }
       }
 
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(4, 16);
-        @include carbon--make-col-offset(10, 16);
+      // Expressive styles
+      .#{$prefix}--text-input,
+      .#{$prefix}--list-box__menu-item__option {
+        @include type-style('body-compact-01');
+      }
+    }
+
+    .#{$prefix}--footer--short & {
+      margin-top: 0;
+    }
+
+    @include breakpoint(md) {
+      @include make-col(4, 8);
+
+      margin-bottom: carbon--mini-units(2);
+
+      .#{$prefix}--footer--short & {
+        @include make-col-offset(2, 8);
+      }
+    }
+
+    @include breakpoint(lg) {
+      @include make-col(4, 16);
+      @include make-col-offset(10, 16);
 
-        order: 1;
+      order: 1;
 
-        .#{$prefix}--footer--short & {
-          @include carbon--make-col-offset(10, 16);
-        }
+      .#{$prefix}--footer--short & {
+        @include make-col-offset(10, 16);
       }
+    }
 
-      @include carbon--breakpoint('max') {
-        .#{$prefix}--footer--short & {
-          @include carbon--make-col-offset(11, 16);
-        }
+    @include breakpoint(max) {
+      .#{$prefix}--footer--short & {
+        @include make-col-offset(11, 16);
       }
     }
 
     .#{$prefix}--list-box--up {
       .#{$prefix}--list-box__menu {
         z-index: 1;
-        bottom: rem(47px);
+        bottom: to-rem(47px);
       }
     }
 
@@ -116,7 +123,7 @@
       .#{$prefix}--select-input {
         width: 100%;
         max-width: 100%;
-        height: $layout-04;
+        height: $spacing-09;
       }
     }
 
@@ -126,7 +133,7 @@
     .#{$prefix}--form-item {
       display: block;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         display: none;
       }
     }
@@ -134,7 +141,7 @@
     .#{$prefix}--list-box__wrapper {
       display: none;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         display: block;
       }
     }
@@ -148,7 +155,3 @@
     }
   }
 }
-
-@include exports('language-selector') {
-  @include language-selector;
-}
diff --git a/packages/styles/scss/components/footer/_legal-nav.scss b/packages/styles/scss/components/footer/_legal-nav.scss
index 2516acfc96d..5a660bc2486 100644
--- a/packages/styles/scss/components/footer/_legal-nav.scss
+++ b/packages/styles/scss/components/footer/_legal-nav.scss
@@ -5,136 +5,154 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/flex-grid' as *;
+
 /// Legal nav styles
 /// @access private
 /// @group footer
 
 @mixin legal-nav {
-  :host(#{$dds-prefix}-legal-nav),
-  .#{$prefix}--legal-nav__container {
-    @include carbon--make-container;
+  :host(#{$c4d-prefix}-legal-nav) {
+    @include make-container;
   }
 
-  .#{$prefix}--legal-nav {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include carbon--make-row;
+  .#{$c4d-prefix}--legal-nav {
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
+    @include make-row;
 
-      .#{$prefix}--footer:not(.#{$prefix}--footer--short) & {
-        @include carbon--breakpoint-down('md') {
-          border-top: 0;
-        }
+    .#{$prefix}--footer:not(.#{$prefix}--footer--short) & {
+      @include breakpoint-down(md) {
+        border-top: 0;
       }
     }
   }
 
-  .#{$prefix}--legal-nav__list {
+  .#{$c4d-prefix}--adjunct-links__container,
+  .#{$c4d-prefix}--legal-nav__list {
     width: 100%;
-    padding-left: $carbon--spacing-05;
+    padding-left: $spacing-05;
 
-    @include carbon--breakpoint('md') {
-      border-top: 1px solid $ui-03;
+    ul {
+      list-style: none;
+      padding: 0;
+      margin: 0;
     }
 
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col-offset(4, 16);
+    @include breakpoint(md) {
+      border-top: 1px solid $layer-accent-01;
     }
-    &.#{$prefix}--legal-nav__micro {
-      @include carbon--theme(
-        $carbon--theme--g90,
+
+    @include breakpoint(lg) {
+      @include make-col-offset(4, 16);
+    }
+    &.#{$c4d-prefix}--legal-nav__micro {
+      @include theme(
+        $g100,
         feature-flag-enabled('enable-css-custom-properties')
-      ) {
-        display: flex;
-        padding-bottom: 0;
-        padding-left: 0;
-        flex-direction: column-reverse;
-        margin-right: 0;
+      );
 
-        @include carbon--breakpoint('md') {
-          padding-left: 0;
+      display: flex;
+      padding-bottom: 0;
+      padding-left: 0;
+      flex-direction: column-reverse;
+      margin-right: 0;
+
+      @include breakpoint-down(md) {
+        ::slotted([slot='locale']),
+        ::slotted([slot='brand']) {
+          display: none;
         }
+      }
+
+      @include breakpoint(md) {
+        padding-left: 0;
+      }
+
+      @include breakpoint(lg) {
+        justify-content: space-between;
+        flex-direction: row;
+        margin-left: 0;
+      }
+
+      .#{$prefix}--legal-nav__holder {
+        column-count: inherit;
+        margin-left: 0;
+        border-top: 1px solid $layer-accent-01;
+        padding: 0 $spacing-05;
 
-        @include carbon--breakpoint('lg') {
-          justify-content: space-between;
-          flex-direction: row;
-          margin-left: 0;
+        @include breakpoint(md) {
+          display: flex;
+          align-items: center;
+          padding: 0 $spacing-05 0;
         }
 
-        .#{$prefix}--legal-nav__holder {
-          column-count: inherit;
-          margin-left: 0;
-          border-top: 1px solid $ui-03;
-          padding: 0 $carbon--spacing-05;
+        @include breakpoint(lg) {
+          border-top: none;
+        }
 
-          @include carbon--breakpoint('md') {
-            display: flex;
-            align-items: center;
-            padding: 0 $carbon--spacing-05 0;
-          }
+        .#{$prefix}--legal-nav__list-item {
+          margin-right: 0;
+          padding-top: 0;
+          height: $spacing-09;
+          display: flex;
+          align-items: center;
 
-          @include carbon--breakpoint('lg') {
-            border-top: none;
+          @include breakpoint(md) {
+            margin-right: $spacing-07;
           }
 
-          .#{$prefix}--legal-nav__list-item {
-            margin-right: 0;
-            padding-top: 0;
-            height: $spacing-09;
+          a {
             display: flex;
             align-items: center;
+            width: 100%;
+          }
+        }
+      }
 
-            @include carbon--breakpoint('md') {
-              margin-right: $carbon--spacing-07;
-            }
+      .#{$prefix}--locale-btn__container,
+      .#{$prefix}--language-selector__container {
+        margin: 0;
 
-            a {
-              display: flex;
-              align-items: center;
-              width: 100%;
-            }
-          }
+        @include breakpoint(md) {
+          align-self: flex-end;
+          width: 50%;
+          border-left: 1px solid $layer-accent-01;
         }
 
-        .#{$prefix}--locale-btn__container,
-        .#{$prefix}--language-selector__container {
+        @include breakpoint(lg) {
           margin: 0;
+        }
 
-          @include carbon--breakpoint('md') {
-            align-self: flex-end;
-            width: 50%;
-            border-left: 1px solid $ui-03;
-          }
+        .#{$prefix}--btn--secondary,
+        .#{$prefix}--list-box,
+        .#{$prefix}--select-input {
+          background-color: $background;
+          max-width: 100%;
 
-          @include carbon--breakpoint('lg') {
-            margin: 0;
+          &:hover {
+            background-color: $background-hover;
           }
 
-          .#{$prefix}--btn--secondary,
-          .#{$prefix}--list-box,
-          .#{$prefix}--select-input {
-            background-color: $ui-background;
-            max-width: 100%;
-
-            &:hover {
-              background-color: $hover-ui;
-            }
-
-            &:active {
-              background-color: $active-ui;
-            }
+          &:active {
+            background-color: $layer-active-01;
           }
+        }
 
-          .#{$prefix}--select {
-            max-width: 100%;
-          }
+        .#{$prefix}--select {
+          max-width: 100%;
+        }
 
-          .#{$prefix}--text-input,
-          .#{$prefix}--list-box,
-          .#{$prefix}--select-input {
-            border-bottom: none;
-          }
+        .#{$prefix}--text-input,
+        .#{$prefix}--list-box,
+        .#{$prefix}--select-input {
+          border-bottom: none;
         }
       }
     }
@@ -144,27 +162,27 @@
     padding-top: 0;
     margin-left: 0;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       padding-top: $spacing-03;
       column-count: 2;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       column-count: 3;
     }
   }
 
   .#{$prefix}--adjunct-links__holder {
     margin-left: 0;
-    margin-top: $carbon--spacing-09;
-    padding: 0 $carbon--layout-04 0 $carbon--spacing-05;
+    margin-top: $spacing-09;
+    padding: 0 $spacing-09 0 $spacing-05;
     width: 100%;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       width: 50%;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       margin-left: 25%;
       width: 25%;
     }
@@ -175,22 +193,18 @@
     }
 
     .#{$prefix}--legal-nav__list-item:not(:first-of-type) {
-      padding-top: $carbon--spacing-03;
+      padding-top: $spacing-03;
     }
   }
 
-  :host(#{$dds-prefix}-legal-nav-item),
-  :host(#{$dds-prefix}-legal-nav-cookie-preferences-placeholder),
+  :host(#{$c4d-prefix}-legal-nav-item),
+  :host(#{$c4d-prefix}-legal-nav-cookie-preferences-placeholder) div,
   .#{$prefix}--legal-nav__list-item {
-    margin-right: carbon--mini-units(4);
-    padding: carbon--mini-units(2) 0 0 0;
-    @include carbon--type-style('body-long-01');
+    margin-right: $spacing-07;
+    padding: $spacing-03 0 0 0;
+    @include type-style('body-01');
 
-    @include carbon--breakpoint('md') {
-      padding: carbon--mini-units(1) 0 0 0;
-    }
-
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       &:first-child {
         padding-top: 0;
       }
@@ -201,7 +215,3 @@
     }
   }
 }
-
-@include exports('legal-nav') {
-  @include legal-nav;
-}
diff --git a/packages/styles/scss/components/footer/_locale-button.scss b/packages/styles/scss/components/footer/_locale-button.scss
index 2e5c5c623f3..79f7f18fbd6 100644
--- a/packages/styles/scss/components/footer/_locale-button.scss
+++ b/packages/styles/scss/components/footer/_locale-button.scss
@@ -5,69 +5,81 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/components/button/button';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/layout' as *;
+@use '@carbon/styles/scss/components/button' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
 
 /// Footer locale button
 /// @access private
 /// @group footer
 
-@mixin local-button {
-  :host(#{$dds-prefix}-locale-button),
+@mixin locale-button {
+  :host(#{$c4d-prefix}-locale-button),
   .#{$prefix}--locale-btn__container {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include button;
-      @include carbon--make-col-ready;
-      @include carbon--make-col(4, 4);
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
+    @include button;
+    @include make-col-ready;
+    @include make-col(4, 4);
 
-      margin: $spacing-09 0;
+    margin: $spacing-09 0;
 
-      .#{$prefix}--locale-btn {
-        max-width: 100%;
-        width: 100%;
-        @include type-style('body-short-01');
+    .#{$c4d-prefix}--locale-btn {
+      @include emit-layout-tokens();
 
-        @include carbon--breakpoint('md') {
-          min-width: carbon--mini-units(27);
-        }
-      }
+      max-width: 100%;
+      width: 100%;
+      @include type-style('body-compact-01');
 
-      @include carbon--breakpoint('md') {
-        align-self: end;
-        margin-bottom: $spacing-10;
-        @include carbon--make-col(4, 8);
-        @include carbon--make-col-offset(2, 8);
+      align-items: center;
 
-        padding-left: 0;
-        padding-right: 0;
-        margin-top: 0;
-      }
+      // Forces the style of text + icon button style
+      padding-right: $spacing-04;
 
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(4, 16);
-        @include carbon--make-col-offset(10, 16);
+      @include breakpoint(md) {
+        min-width: 13.5rem;
       }
     }
+
+    @include breakpoint(md) {
+      align-self: end;
+      margin-bottom: $spacing-10;
+      @include make-col(4, 8);
+      @include make-col-offset(2, 8);
+
+      padding-left: 0;
+      padding-right: 0;
+      margin-top: 0;
+    }
+
+    @include breakpoint(lg) {
+      @include make-col(4, 16);
+      @include make-col-offset(10, 16);
+    }
   }
 
-  :host(#{$dds-prefix}-footer[size='short'])
-    ::slotted(#{$dds-prefix}-locale-button),
+  :host(#{$c4d-prefix}-footer[size='short'])
+    ::slotted(#{$c4d-prefix}-locale-button),
   .#{$prefix}--footer--short .#{$prefix}--locale-btn__container {
     margin-top: $spacing-09;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-top: 0;
-      @include carbon--make-col-offset(2, 8);
+      @include make-col-offset(2, 8);
 
       .#{$prefix}--locale-btn {
         float: right;
       }
     }
 
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col-offset(10, 16);
+    @include breakpoint(lg) {
+      @include make-col-offset(10, 16);
     }
   }
 
@@ -77,14 +89,10 @@
       .#{$prefix}--btn--tertiary {
         &:hover,
         &:focus {
-          background-color: $hover-ui;
-          color: $text-01;
+          background-color: $background-hover;
+          color: $text-primary;
         }
       }
     }
   }
 }
-
-@include exports('local-button') {
-  @include local-button;
-}
diff --git a/packages/styles/scss/components/footer/index.scss b/packages/styles/scss/components/footer/index.scss
deleted file mode 100644
index c80649ec7fd..00000000000
--- a/packages/styles/scss/components/footer/index.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-/**
- * 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 './components';
diff --git a/packages/styles/scss/components/global-banner/_global-banner.scss b/packages/styles/scss/components/global-banner/_global-banner.scss
new file mode 100644
index 00000000000..d313a70ba16
--- /dev/null
+++ b/packages/styles/scss/components/global-banner/_global-banner.scss
@@ -0,0 +1,241 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../image/index';
+
+@mixin global-banner {
+  :host(#{$c4d-prefix}-global-banner) {
+    @include theme($g100, true);
+
+    display: block;
+    background-color: $background;
+
+    .#{$prefix}--global-banner-content-wrapper {
+      @include make-row;
+    }
+
+    .#{$prefix}--global-banner-layout-container {
+      @include make-container;
+
+      box-sizing: border-box;
+      max-height: $spacing-13;
+
+      /* stylelint-disable selector-pseudo-class-no-unknown */
+      &:where(a) {
+        /* stylelint-enable selector-pseudo-class-no-unknown */
+        display: block;
+        text-decoration: none;
+        border: $spacing-01 solid transparent;
+
+        &:hover,
+        &:active {
+          background: $background-hover;
+        }
+
+        &:focus,
+        &:active {
+          outline: to-rem(1px) solid $background;
+          outline-offset: to-rem(-1px);
+          border-color: $focus;
+        }
+      }
+    }
+
+    .#{$prefix}--global-banner-text-container,
+    .#{$prefix}--global-banner-cta-container,
+    .#{$prefix}--global-banner-icon {
+      box-sizing: border-box;
+      padding-block: $spacing-05;
+
+      @include breakpoint(lg) {
+        padding-block: $spacing-07;
+      }
+    }
+
+    .#{$prefix}--global-banner-image-container {
+      box-sizing: border-box;
+      max-height: $spacing-13;
+      padding-inline-end: $spacing-05;
+      position: relative;
+
+      ::slotted(#{$c4d-prefix}-global-banner-image) {
+        position: absolute;
+        width: calc(100% + #{$spacing-05});
+        height: 100%;
+        inset-inline-end: 0;
+        inset-block-start: 0;
+
+        @include breakpoint(max) {
+          width: 100%;
+        }
+      }
+    }
+
+    .#{$prefix}--global-banner-text-container {
+      @include make-col(4, 4);
+
+      padding-inline: $spacing-05;
+      max-width: calc(100% - (20px + #{$spacing-05}));
+
+      @include breakpoint(md) {
+        @include make-col(7, 8);
+      }
+
+      @include breakpoint(lg) {
+        padding-inline-end: $spacing-09;
+      }
+    }
+
+    .#{$prefix}--global-banner-cta-container {
+      display: none;
+
+      @include breakpoint(lg) {
+        @include make-col(4, 16);
+      }
+
+      @include breakpoint(xlg) {
+        @include make-col(3, 16);
+      }
+
+      @include breakpoint(max) {
+        @include make-col(4, 16);
+      }
+    }
+
+    .#{$prefix}--global-banner-icon {
+      width: calc(20px + #{$spacing-05});
+      padding-inline-end: $spacing-05;
+      color: $text-primary;
+      text-align: right;
+
+      svg {
+        margin-top: $spacing-01;
+      }
+
+      @include breakpoint(md) {
+        @include make-col(1, 8);
+
+        padding-inline-end: 0;
+      }
+
+      @include breakpoint(lg) {
+        display: none;
+      }
+    }
+
+    &[has-image] {
+      .#{$prefix}--global-banner-image-container {
+        display: none;
+      }
+    }
+
+    &[image-width='4-col'] {
+      .#{$prefix}--global-banner-image-container {
+        @include breakpoint(lg) {
+          @include make-col(4, 16);
+        }
+      }
+
+      .#{$prefix}--global-banner-text-container {
+        @include breakpoint(lg) {
+          @include make-col(7, 16);
+        }
+      }
+
+      .#{$prefix}--global-banner-cta-container {
+        @include breakpoint(lg) {
+          @include make-col-offset(1, 16);
+        }
+      }
+    }
+
+    &[image-width='8-col'] {
+      .#{$prefix}--global-banner-image-container {
+        @include make-col(8, 16);
+      }
+
+      .#{$prefix}--global-banner-text-container {
+        @include breakpoint(lg) {
+          @include make-col(4, 16);
+        }
+      }
+    }
+
+    &:not([has-image]) {
+      .#{$prefix}--global-banner-text-container {
+        @include breakpoint(lg) {
+          @include make-col(11, 16);
+        }
+      }
+
+      .#{$prefix}--global-banner-cta-container {
+        @include breakpoint(lg) {
+          @include make-col-offset(1, 16);
+        }
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-button) {
+      @include theme($g100, true);
+
+      width: 100%;
+      display: flex;
+      max-width: 320px;
+
+      @include breakpoint(xlg) {
+        width: calc(100% + #{$spacing-05});
+      }
+    }
+
+    #{$c4d-prefix}-link-with-icon {
+      @include breakpoint(md) {
+        display: none;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-global-banner-heading) {
+    @include type-style('heading-02', true);
+
+    display: block;
+    color: $text-primary;
+    max-width: 960px;
+
+    @include breakpoint(lg) {
+      width: calc(100% - #{$spacing-10});
+    }
+
+    @include breakpoint(lg) {
+      width: calc(100% - #{$spacing-10});
+    }
+
+    @include breakpoint(xlg) {
+      width: calc(100% - #{$spacing-07});
+    }
+  }
+
+  :host(#{$c4d-prefix}-global-banner-copy) {
+    @include type-style('body-compact-02', true);
+
+    display: block;
+    color: $text-primary;
+  }
+
+  :host(#{$c4d-prefix}-global-banner-image) {
+    .#{$prefix}--image__img {
+      object-fit: cover;
+    }
+  }
+}
diff --git a/packages/styles/scss/components/global-banner/_index.scss b/packages/styles/scss/components/global-banner/_index.scss
new file mode 100644
index 00000000000..5bde9702b3b
--- /dev/null
+++ b/packages/styles/scss/components/global-banner/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'global-banner';
+@use 'global-banner';
+
+@include global-banner.global-banner;
diff --git a/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss
new file mode 100644
index 00000000000..e28b5b6eab8
--- /dev/null
+++ b/packages/styles/scss/components/horizontal-rule/_horizontal-rule.scss
@@ -0,0 +1,64 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+
+@mixin horizontal-rule {
+  $subtle-contrast: $border-subtle-01;
+  $strong-contrast: $border-strong-01;
+  $thin-weight: to-rem(1px);
+
+  :host(#{$c4d-prefix}-hr) {
+    display: block;
+    margin: $spacing-05 0;
+    border: none;
+    height: $thin-weight;
+    background: $strong-contrast;
+  }
+
+  :host(
+      #{$c4d-prefix}-hr[type='dashed']:not([size='small']):not(
+          [size='medium']
+        ):not([size='large'])
+    ) {
+    height: $thin-weight;
+    background-color: transparent;
+    background-size: $spacing-05 $thin-weight;
+    background-repeat: repeat-x;
+    background-image: linear-gradient(
+      to right,
+      $strong-contrast 50%,
+      transparent 50%
+    );
+  }
+
+  :host(#{$c4d-prefix}-hr[size='small']) {
+    max-width: $spacing-07;
+  }
+  :host(#{$c4d-prefix}-hr[size='medium']) {
+    max-width: $spacing-09;
+  }
+  :host(#{$c4d-prefix}-hr[size='large']) {
+    max-width: $spacing-10;
+  }
+
+  :host(#{$c4d-prefix}-hr[contrast='subtle']) {
+    background: $subtle-contrast;
+  }
+
+  :host(#{$c4d-prefix}-hr[contrast='strong']) {
+    background: $strong-contrast;
+  }
+
+  :host(#{$c4d-prefix}-hr[weight='thick']) {
+    height: $spacing-01;
+  }
+}
diff --git a/packages/styles/scss/components/horizontal-rule/_index.scss b/packages/styles/scss/components/horizontal-rule/_index.scss
new file mode 100644
index 00000000000..9547910b14d
--- /dev/null
+++ b/packages/styles/scss/components/horizontal-rule/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'horizontal-rule';
+@use 'horizontal-rule';
+
+@include horizontal-rule.horizontal-rule;
diff --git a/packages/styles/scss/components/horizontalrule/README.md b/packages/styles/scss/components/horizontalrule/README.md
deleted file mode 100644
index 7dd140662b2..00000000000
--- a/packages/styles/scss/components/horizontalrule/README.md
+++ /dev/null
@@ -1,29 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/horizontalrule/index';
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--hr` class.
-
-| Class                    | Description                                          |
-| ------------------------ | ---------------------------------------------------- |
-| `.bx--hr--small`         | The className for the short fixed-length hr variant  |
-| `.bx--hr--medium`        | The className for the medium fixed-length hr variant |
-| `.bx--hr--large`         | The className for the large fixed-length hr variant  |
-| `.bx--hr--low-contrast`  | The className for the low contrast color hr variant  |
-| `.bx--hr--high-contrast` | The className for the high contrast color hr variant |
-| `.bx--hr--dashed`        | The className for the dashed hr variant              |
-| `.bx--hr--thick`         | The className for the thicker hr variant             |
-
-#### Blocks
-
-| Class     | Description                                   |
-| --------- | --------------------------------------------- |
-| `.bx--hr` | Highest level class name for the hr component |
diff --git a/packages/styles/scss/components/horizontalrule/_horizontalrule.scss b/packages/styles/scss/components/horizontalrule/_horizontalrule.scss
index 0a0d86c2426..e28b5b6eab8 100644
--- a/packages/styles/scss/components/horizontalrule/_horizontalrule.scss
+++ b/packages/styles/scss/components/horizontalrule/_horizontalrule.scss
@@ -5,114 +5,60 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-
-@mixin horizontalrule {
-  $low-contrast: $ui-03;
-  $medium-contrast: $ui-04;
-  $high-contrast: $ui-05;
-  $thin-weight: rem(1px);
-
-  :host(#{$dds-prefix}-hr)[size='small'] {
-    @extend .#{$prefix}--hr--small;
-  }
-  :host(#{$dds-prefix}-hr)[size='medium'] {
-    @extend .#{$prefix}--hr--medium;
-  }
-  :host(#{$dds-prefix}-hr)[size='large'] {
-    @extend .#{$prefix}--hr--large;
-  }
-  :host(#{$dds-prefix}-hr)[weight='thick'] {
-    @extend .#{$prefix}--hr--thick;
-  }
-  :host(#{$dds-prefix}-hr)[type='dashed'] {
-    @extend .#{$prefix}--hr--dashed;
-  }
-  :host(#{$dds-prefix}-hr)[contrast='low-contrast'] {
-    @extend .#{$prefix}--hr--low-contrast;
-  }
-  :host(#{$dds-prefix}-hr)[contrast='high-contrast'] {
-    @extend .#{$prefix}--hr--high-contrast;
-  }
-
-  :host(#{$dds-prefix}-hr),
-  .#{$prefix}--hr {
-    margin: $carbon--spacing-05 0;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+
+@mixin horizontal-rule {
+  $subtle-contrast: $border-subtle-01;
+  $strong-contrast: $border-strong-01;
+  $thin-weight: to-rem(1px);
+
+  :host(#{$c4d-prefix}-hr) {
+    display: block;
+    margin: $spacing-05 0;
     border: none;
     height: $thin-weight;
-    background: $medium-contrast;
-
-    &.#{$prefix}--hr--small {
-      max-width: carbon--mini-units(4);
-    }
-
-    &.#{$prefix}--hr--medium {
-      max-width: carbon--mini-units(6);
-    }
-
-    &.#{$prefix}--hr--large {
-      max-width: carbon--mini-units(8);
-    }
-
-    &.#{$prefix}--hr--thick {
-      height: rem(2px);
-    }
-
-    &.#{$prefix}--hr--low-contrast {
-      background: $low-contrast;
-    }
-
-    &.#{$prefix}--hr--high-contrast {
-      background: $high-contrast;
-    }
+    background: $strong-contrast;
   }
 
-  .#{$prefix}--hr--dashed {
+  :host(
+      #{$c4d-prefix}-hr[type='dashed']:not([size='small']):not(
+          [size='medium']
+        ):not([size='large'])
+    ) {
     height: $thin-weight;
     background-color: transparent;
-    background-size: $carbon--spacing-05 $thin-weight;
+    background-size: $spacing-05 $thin-weight;
     background-repeat: repeat-x;
     background-image: linear-gradient(
       to right,
-      $medium-contrast 50%,
+      $strong-contrast 50%,
       transparent 50%
     );
-
-    &.#{$prefix}--hr--low-contrast {
-      background-image: linear-gradient(
-        to right,
-        $low-contrast 50%,
-        transparent 50%
-      );
-    }
-
-    &.#{$prefix}--hr--high-contrast {
-      background-image: linear-gradient(
-        to right,
-        $high-contrast 50%,
-        transparent 50%
-      );
-    }
   }
 
-  .#{$prefix}--hr--small,
-  .#{$prefix}--hr--medium,
-  .#{$prefix}--hr--large {
-    height: $thin-weight;
-    background: $medium-contrast;
-    background-image: none;
+  :host(#{$c4d-prefix}-hr[size='small']) {
+    max-width: $spacing-07;
+  }
+  :host(#{$c4d-prefix}-hr[size='medium']) {
+    max-width: $spacing-09;
+  }
+  :host(#{$c4d-prefix}-hr[size='large']) {
+    max-width: $spacing-10;
+  }
 
-    &.#{$prefix}--hr--low-contrast {
-      background: $low-contrast;
-    }
+  :host(#{$c4d-prefix}-hr[contrast='subtle']) {
+    background: $subtle-contrast;
+  }
 
-    &.#{$prefix}--hr--high-contrast {
-      background: $high-contrast;
-    }
+  :host(#{$c4d-prefix}-hr[contrast='strong']) {
+    background: $strong-contrast;
   }
-}
 
-@include exports('horizontalrule') {
-  @include horizontalrule;
+  :host(#{$c4d-prefix}-hr[weight='thick']) {
+    height: $spacing-01;
+  }
 }
diff --git a/packages/styles/scss/components/image-with-caption/image-with-caption.scss b/packages/styles/scss/components/image-with-caption/image-with-caption.scss
deleted file mode 100644
index a63182e2197..00000000000
--- a/packages/styles/scss/components/image-with-caption/image-with-caption.scss
+++ /dev/null
@@ -1,101 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../image/image';
-@import '../lightbox-media-viewer/lightbox-media-viewer';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/motion/motion.scss';
-
-@mixin image-with-caption {
-  .#{$prefix}--image-with-caption,
-  :host(#{$dds-prefix}-image)[heading] {
-    display: block;
-    margin-top: $carbon--spacing-07;
-    margin-bottom: $carbon--spacing-07;
-    max-width: carbon--mini-units(80);
-
-    @include carbon--breakpoint('md') {
-      margin-top: $carbon--spacing-07;
-      margin-bottom: $carbon--spacing-07;
-    }
-  }
-
-  .#{$prefix}--image-with-caption__image {
-    display: block;
-    width: 100%;
-    padding: 0;
-    position: relative;
-    pointer-events: none;
-    border: none;
-    background-color: transparent;
-
-    &:hover {
-      // only have lightbox functionality on bigger breakpoints
-      @include carbon--breakpoint(md) {
-        cursor: pointer;
-
-        .#{$prefix}--image__img,
-        #{$dds-prefix}-image {
-          filter: brightness(80%);
-        }
-
-        .#{$prefix}--image-with-caption__zoom-button {
-          background-color: rgba(0, 0, 0, 1);
-        }
-      }
-    }
-
-    &:hover,
-    &:focus {
-      // only have lightbox functionality on bigger breakpoints
-      @include carbon--breakpoint(md) {
-        outline: 2px solid $focus;
-      }
-    }
-  }
-
-  .#{$prefix}--image-with-caption__zoom-button {
-    display: none;
-
-    // only have lightbox functionality on bigger breakpoints
-    @include carbon--breakpoint(md) {
-      width: $carbon--spacing-09;
-      height: $carbon--spacing-09;
-      display: flex;
-      position: absolute;
-      right: 0;
-      bottom: 0;
-      background-color: rgba(0, 0, 0, 0.5);
-
-      svg {
-        margin: auto;
-        fill: $icon-03;
-      }
-    }
-  }
-
-  .#{$prefix}--image-with-caption__image,
-  .#{$prefix}--image-with-caption__zoom-button {
-    // only have lightbox functionality on bigger breakpoints
-    @include carbon--breakpoint(md) {
-      transition: $duration--moderate-01 motion(standard, productive);
-      pointer-events: auto;
-    }
-  }
-
-  .#{$prefix}--image__caption {
-    @include carbon--type-style('caption-02');
-
-    margin-top: $carbon--spacing-03;
-    color: $text-05;
-  }
-}
-
-@include exports('image-with-caption') {
-  @include image-with-caption;
-}
diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss
index 5fb22ae355e..a8050643461 100644
--- a/packages/styles/scss/components/image/_image.scss
+++ b/packages/styles/scss/components/image/_image.scss
@@ -5,27 +5,63 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/ratio-base';
+@use '../../globals/vars' as *;
+@use '../../globals/utils/ratio-base' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/colors' as *;
+@use '../lightbox-media-viewer/lightbox-media-viewer';
 
 @mixin image {
-  .#{$prefix}--image {
+  :host(#{$c4d-prefix}-global-banner-image),
+  :host(#{$c4d-prefix}-card-cta-image),
+  :host(#{$c4d-prefix}-image) {
     position: relative;
+    display: block;
+
+    .#{$c4d-prefix}--image__img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      display: block;
+    }
+
+    .#{$c4d-prefix}--image__img--border {
+      outline: 1px solid $border-subtle-02;
+    }
   }
 
-  .#{$prefix}--image__img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-    display: block;
+  :host(#{$c4d-prefix}-card-cta-image::slotted(svg[slot='icon'])),
+  :host(#{$c4d-prefix}-image::slotted(svg[slot='icon'])) {
+    position: absolute;
+    top: calc(50% - #{$spacing-07});
+    right: calc(50% - #{$spacing-07});
+  }
+
+  :host(#{$c4d-prefix}-image-item) {
+    display: none;
   }
 
-  .#{$prefix}--image__img--border {
-    outline: 1px solid $decorative-01;
+  :host(#{$c4d-prefix}-image)[card-group-item],
+  :host(#{$c4d-prefix}-image) {
+    @include ratio-base(4, 3, true);
+
+    padding-top: 75%;
+    height: 0;
+    overflow: hidden;
+
+    .#{$c4d-prefix}--image__img {
+      position: absolute;
+      height: 100%;
+      top: 0;
+    }
   }
 
-  .#{$prefix}--image__longdescription {
+  .#{$c4d-prefix}--image__longdescription {
     position: absolute;
     width: 1px;
     height: 1px;
@@ -34,26 +70,123 @@
     overflow: hidden;
   }
 
-  .#{$prefix}--image__icon {
-    position: absolute;
-    top: calc(50% - #{$carbon--spacing-07});
-    right: calc(50% - #{$carbon--spacing-07});
+  :host(#{$c4d-prefix}-image)[heading] {
+    display: block;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-07;
+    max-width: carbon--mini-units(80);
+
+    @include breakpoint(md) {
+      margin-top: $spacing-07;
+      margin-bottom: $spacing-07;
+    }
+  }
+
+  .#{$c4d-prefix}--image-with-caption__image {
+    display: block;
+    width: 100%;
+    padding: 0;
+    position: relative;
+    pointer-events: none;
+    border: 1px solid $border-tile-01;
+    background-color: transparent;
+
+    &:hover {
+      // only have lightbox functionality on bigger breakpoints
+      @include breakpoint(md) {
+        cursor: zoom-in;
+
+        .#{$c4d-prefix}--image__img {
+          filter: brightness(80%);
+        }
+
+        .#{$c4d-prefix}--image-with-caption__zoom-button {
+          background-color: rgba($gray-100, 1);
+        }
+      }
+    }
+
+    &:focus {
+      // only have lightbox functionality on bigger breakpoints
+      @include breakpoint(md) {
+        outline: $spacing-01 solid $focus;
+        border: 1px solid $focus-inset;
+      }
+    }
+  }
+
+  .#{$c4d-prefix}--image-with-caption__zoom-button {
+    display: none;
+
+    // only have lightbox functionality on bigger breakpoints
+    @include breakpoint(md) {
+      width: $spacing-09;
+      height: $spacing-09;
+      display: flex;
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      background-color: rgba($gray-100, 0.85);
+
+      svg {
+        margin: auto;
+        fill: $white;
+      }
+    }
+  }
+
+  .#{$c4d-prefix}--image-with-caption__image,
+  .#{$c4d-prefix}--image-with-caption__zoom-button {
+    // only have lightbox functionality on bigger breakpoints
+    @include breakpoint(md) {
+      transition: $duration-moderate-01 motion(standard, productive);
+      pointer-events: auto;
+    }
+  }
+
+  .#{$c4d-prefix}--image__caption {
+    @include type-style('body-01');
+
+    margin-top: $spacing-03;
+    color: $text-helper;
+  }
+
+  :host(#{$c4d-prefix}-image[lightbox-contrast='dark']) {
+    .#{$c4d-prefix}--image-with-caption__zoom-button {
+      background-color: rgba($white, 0.85);
+
+      svg {
+        fill: $gray-90;
+      }
+    }
+    .#{$c4d-prefix}--image-with-caption__image {
+      &:hover {
+        // only have lightbox functionality on bigger breakpoints
+        @include breakpoint(md) {
+          .#{$c4d-prefix}--image__img {
+            filter: brightness(120%);
+          }
+
+          .#{$c4d-prefix}--image-with-caption__zoom-button {
+            background-color: rgba($white, 1);
+          }
+        }
+      }
+    }
   }
 
-  // dds-image-logo style.
-  :host(#{$dds-prefix}-image-logo) {
-    background-color: $ui-02;
+  // c4d-image-logo style.
+  :host(#{$c4d-prefix}-image-logo) {
+    background-color: $layer-02;
     margin: $spacing-05 $spacing-05 $spacing-03 $spacing-05;
-    max-width: rem(160px);
+    max-width: $spacing-13;
 
     @include ratio-base(2, 1, false);
 
-    .#{$prefix}--image__img {
+    .#{$c4d-prefix}--image__img {
       object-fit: contain;
+      width: 100%;
+      height: 100%;
     }
   }
 }
-
-@include exports('image') {
-  @include image;
-}
diff --git a/packages/styles/scss/components/image/_index.scss b/packages/styles/scss/components/image/_index.scss
new file mode 100644
index 00000000000..1c7dacf8ee7
--- /dev/null
+++ b/packages/styles/scss/components/image/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'image';
+@use 'image';
+
+@include image.image;
diff --git a/packages/styles/scss/components/in-page-banner/_in-page-banner.scss b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss
new file mode 100644
index 00000000000..7856c7c73f1
--- /dev/null
+++ b/packages/styles/scss/components/in-page-banner/_in-page-banner.scss
@@ -0,0 +1,89 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-group';
+@use '../../globals/tokens/color-tokens' as *;
+
+@mixin in-page-banner {
+  :host(#{$c4d-prefix}-in-page-banner) {
+    display: block;
+    background: $background;
+    padding-top: $spacing-07;
+    padding-bottom: $spacing-07;
+
+    @include breakpoint(md) {
+      padding-bottom: $spacing-09;
+    }
+
+    ::slotted(#{$c4d-prefix}-content-group-heading),
+    .#{$prefix}--content-layout ::slotted([slot='heading']),
+    .#{$prefix}--content-group__title {
+      margin-bottom: 0;
+
+      @include breakpoint(md) {
+        grid-column: 1 / span 6;
+      }
+
+      @include breakpoint(lg) {
+        grid-column: 1 / span 8;
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-link-list),
+    .#{$prefix}--content-layout ::slotted([slot='complementary']),
+    .#{$prefix}--link-list__list {
+      position: relative;
+      grid-area: auto;
+      margin-top: $spacing-07;
+      margin-bottom: 0;
+      padding-bottom: 0;
+
+      @include breakpoint(md) {
+        grid-column: 1 / span 6;
+      }
+
+      @include breakpoint(lg) {
+        grid-column: 9 / span 12;
+        margin: 0;
+        padding-left: $spacing-05;
+        padding-right: $spacing-05;
+        border-left: 1px solid $layer-accent-01;
+
+        // Adjust the direction of the border line on RTL.
+        [dir='rtl'] & {
+          border-left: inherit;
+          border-right: 1px solid $layer-accent-01;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-in-page-banner[color-scheme='cyan']) {
+    background-color: $background-cyan;
+
+    ::slotted([slot='heading']) {
+      color: $text-cyan;
+    }
+  }
+
+  :host(#{$c4d-prefix}-in-page-banner[color-scheme='purple']) {
+    background-color: $background-purple;
+
+    ::slotted([slot='heading']) {
+      color: $text-purple;
+    }
+  }
+
+  :host(#{$c4d-prefix}-in-page-banner[color-scheme='layer']) {
+    background-color: $layer-01;
+  }
+}
diff --git a/packages/styles/scss/components/in-page-banner/_index.scss b/packages/styles/scss/components/in-page-banner/_index.scss
new file mode 100644
index 00000000000..20b5053b867
--- /dev/null
+++ b/packages/styles/scss/components/in-page-banner/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'in-page-banner';
+@use 'in-page-banner';
+
+@include in-page-banner.in-page-banner;
diff --git a/packages/styles/scss/components/layout/README.md b/packages/styles/scss/components/layout/README.md
deleted file mode 100644
index 11b7083684b..00000000000
--- a/packages/styles/scss/components/layout/README.md
+++ /dev/null
@@ -1,21 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--layout` class.
-
-| Class                                                              | Description             |
-| ------------------------------------------------------------------ | ----------------------- |
-| `.bx--layout--top-layout-01` to `.bx--layout--top-layout-07`       | Top spacing modifier    |
-| `.bx--layout--bottom-layout-01` to `.bx--layout--bottom-layout-07` | Bottom spacing modifier |
-| `.bx--layout--sticky`                                              | Sticky column modifier  |
-| `.bx--layout-2-3`                                                  | 2-3 column modifier     |
-| `.bx--layout-1-3`                                                  | 1-3 column modifier     |
diff --git a/packages/styles/scss/components/layout/_index.scss b/packages/styles/scss/components/layout/_index.scss
new file mode 100644
index 00000000000..9ba65274bd7
--- /dev/null
+++ b/packages/styles/scss/components/layout/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'layout';
+@use 'layout';
+
+@include layout.layout;
diff --git a/packages/styles/scss/components/layout/_layout.scss b/packages/styles/scss/components/layout/_layout.scss
index af4cf049d2a..1ee604b0e31 100644
--- a/packages/styles/scss/components/layout/_layout.scss
+++ b/packages/styles/scss/components/layout/_layout.scss
@@ -5,21 +5,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+
+// $carbon--layouts has been replaced by standard spacing tokens
+$layout-spacings: $spacing-05, $spacing-06, $spacing-07, $spacing-09,
+  $spacing-10, $spacing-12, $spacing-13;
 
 /// A mixin to apply Carobn grid colspan style only in large breakpoint.
 /// @param {Number} $span - The number of columns covered
 /// @param {Number} $columns - The total number of columns available
-@mixin dds--make-col($span, $columns) {
-  @include carbon--make-col-ready();
-  @include carbon--breakpoint('lg') {
-    @include carbon--make-col($span, $columns);
+@mixin cds--make-col($span, $columns) {
+  @include make-col-ready();
+  @include breakpoint(lg) {
+    @include make-col($span, $columns);
   }
 }
 
 @mixin layout {
   .#{$prefix}--layout--sticky-mobile {
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       position: sticky;
       top: 0;
       z-index: 1;
@@ -28,15 +37,15 @@
   }
 
   .#{$prefix}--layout--sticky {
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       position: sticky;
       top: 0;
       z-index: 1;
     }
   }
 
-  @each $layout in $carbon--layout {
-    $i: index($carbon--layout, $layout);
+  @each $layout in $layout-spacings {
+    $i: index($layout-spacings, $layout);
     .#{$prefix}--layout--top {
       &-layout-0#{$i} {
         margin-top: $layout;
@@ -50,39 +59,35 @@
   }
 
   .#{$prefix}--layout--border {
-    @include carbon--breakpoint('sm') {
-      padding-bottom: 4rem;
+    @include breakpoint(sm) {
+      padding-bottom: $spacing-10;
     }
 
-    @include carbon--breakpoint('md') {
-      margin-left: -2rem;
-      margin-right: -2rem;
-      padding-left: 1rem;
-      padding-right: 1rem;
-      padding-bottom: 6rem;
+    @include breakpoint(md) {
+      margin-left: -$spacing-07;
+      margin-right: -$spacing-07;
+      padding-left: $spacing-05;
+      padding-right: $spacing-05;
+      padding-bottom: $spacing-12;
     }
 
-    @include carbon--breakpoint('lg') {
-      margin-left: -1rem;
-      padding-bottom: 10rem;
+    @include breakpoint(lg) {
+      margin-left: -$spacing-05;
+      padding-bottom: $spacing-13;
     }
 
-    @include carbon--breakpoint('max') {
-      margin-right: -1rem;
+    @include breakpoint(max) {
+      margin-right: -$spacing-05;
     }
 
-    border-bottom: solid 1px $ui-04;
+    border-bottom: solid 1px $toggle-off;
   }
 
   .#{$prefix}--layout-2-3 {
-    @include dds--make-col(12, 16);
+    @include cds--make-col(12, 16);
   }
 
   .#{$prefix}--layout-1-3 {
-    @include dds--make-col(4, 16);
+    @include cds--make-col(4, 16);
   }
 }
-
-@include exports('layout') {
-  @include layout;
-}
diff --git a/packages/styles/scss/components/leadspace-block/_index.scss b/packages/styles/scss/components/leadspace-block/_index.scss
new file mode 100644
index 00000000000..b12acc9ae62
--- /dev/null
+++ b/packages/styles/scss/components/leadspace-block/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'leadspace-block';
+@use 'leadspace-block';
+
+@include leadspace-block.leadspace-block;
diff --git a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
index 2fe83e69b1d..7d2608d8c43 100644
--- a/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
+++ b/packages/styles/scss/components/leadspace-block/_leadspace-block.scss
@@ -1,145 +1,107 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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 '../../globals/imports';
-@import '../../globals/utils/content-width';
-@import '../../globals/utils/hang';
-@import '../buttongroup/_buttongroup';
-@import '../link-list/index';
-@import '../image-with-caption/image-with-caption';
-@import '../../internal/content-block/content-block';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/content-width' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../globals/vars' as *;
+@use '../link-list';
+@use '../image';
+@use '../../internal/content-block';
 
-%leadspace-block-padding {
-  padding-top: 0;
-  padding-bottom: $layout-01;
+@mixin leadspace-block {
+  :host(#{$c4d-prefix}-leadspace-block) {
+    display: block;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-12;
 
-  @include carbon--breakpoint('md') {
-    padding-bottom: $layout-06;
-  }
-  @include carbon--breakpoint('lg') {
-    padding-bottom: $layout-07;
-  }
-}
+    @include breakpoint(md) {
+      margin-top: $spacing-10;
+      margin-bottom: $spacing-13;
+    }
 
-@mixin leadspace-block {
-  :host(#{$dds-prefix}-leadspace-block)
-    ::slotted(#{$dds-prefix}-leadspace-block-content) {
-    @extend %leadspace-block-padding;
+    ::slotted(#{$c4d-prefix}-leadspace-block-content) {
+      padding: 0;
+    }
   }
 
-  .#{$prefix}--leadspace-block {
-    .#{$prefix}--content-block {
-      @extend %leadspace-block-padding;
-
-      .#{$prefix}--image-with-caption {
-        margin-bottom: 0;
-      }
+  :host(#{$c4d-prefix}-leadspace-block[border]) {
+    margin: $spacing-07 0;
 
-      .#{$prefix}--link-list__list__CTA {
-        max-width: none;
-      }
+    @include breakpoint(md) {
+      margin: $spacing-10 0;
     }
+  }
+
+  :host(#{$c4d-prefix}-leadspace-block[border])
+    ::slotted(#{$c4d-prefix}-leadspace-block-content) {
+    padding-top: 0;
+    padding-bottom: $spacing-10;
 
-    .#{$prefix}--content-block__copy {
-      p {
-        @include carbon--type-style('expressive-heading-03', true);
-      }
+    @include breakpoint(md) {
+      padding-bottom: $spacing-12;
     }
+  }
 
-    dds-hr,
-    .#{$prefix}--hr {
-      border-color: $ui-04;
-      margin-top: 0;
+  :host(#{$c4d-prefix}-leadspace-block) c4d-hr {
+    margin: 0 #{-$spacing-05};
+  }
 
-      @include hang;
-    }
+  :host(#{$c4d-prefix}-leadspace-block) ::slotted([slot='heading']),
+  :host(#{$c4d-prefix}-leadspace-block-content)
+    ::slotted(#{$c4d-prefix}-content-block-copy) {
+    display: block;
+    width: 100%;
 
-    .#{$prefix}--content-block__cta {
-      margin-top: 0;
+    @include breakpoint(md) {
+      max-width: to-rem(640px);
+      padding-right: $spacing-07;
     }
   }
 
-  :host(#{$dds-prefix}-leadspace-with-search-heading),
-  :host(#{$dds-prefix}-leadspace-block-heading),
-  .#{$prefix}--leadspace-block__title {
-    width: 90%;
-    color: $text-01;
-    padding-top: $layout-03;
-    @include carbon--type-style('expressive-heading-06', true);
-
-    /* stylelint-disable declaration-no-important */
-    ::slotted(h1) {
-      all: unset !important; /* stylelint-disable-line declaration-property-value-blacklist */
-    }
-    /* stylelint-enable declaration-no-important */
+  :host(#{$c4d-prefix}-leadspace-block) ::slotted([slot='heading']) {
+    width: 100%;
+    padding-left: 0;
 
-    @include carbon--breakpoint('md') {
-      padding-top: $layout-03;
-    }
+    margin-bottom: $spacing-07;
+    margin-left: 0;
 
-    @include carbon--breakpoint('lg') {
-      padding-top: $layout-05;
+    @include breakpoint-down(md) {
+      padding-right: 0;
     }
   }
 
-  :host(#{$dds-prefix}-leadspace-block-content)
-    ::slotted(#{$dds-prefix}-link-list),
+  :host(#{$c4d-prefix}-leadspace-block-content)
+    ::slotted(#{$c4d-prefix}-link-list),
   .#{$prefix}--leadspace-block .#{$prefix}--link-list {
     display: block;
-    padding-top: $spacing-09;
     padding-bottom: $spacing-09;
     margin-right: 0;
     max-width: none;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       max-width: carbon--mini-units(80);
     }
   }
 
-  .#{$prefix}--leadspace-block
-    .#{$prefix}--link-list
-    .#{$prefix}--link-list__list--vertical-end
-    .#{$prefix}--link-list__list__CTA {
-    max-width: none;
-  }
-
-  :host(#{$dds-prefix}-leadspace-block-content)
-    ::slotted(#{$dds-prefix}-content-block-copy) {
-    display: block;
-  }
-
-  :host(#{$dds-prefix}-leadspace-block-media),
+  :host(#{$c4d-prefix}-leadspace-block-media),
   .#{$prefix}--leadspace-block .#{$prefix}--leadspace-block__media {
     display: block;
     max-width: carbon--mini-units(80);
+    padding-bottom: $spacing-07;
 
-    @include carbon--breakpoint('md') {
-      padding-top: $spacing-05;
-    }
-
-    ::slotted(#{$dds-prefix}-image),
-    .#{$prefix}--image-with-caption {
+    ::slotted(#{$c4d-prefix}-image) {
       margin-top: 0;
       margin-bottom: 0;
     }
   }
-
-  :host(#{$dds-prefix}-leadspace-block-cta),
-  .#{$prefix}--leadspace-block .#{$prefix}--buttongroup {
-    padding-top: 0;
-
-    ::slotted(#{$dds-prefix}-button-group-item),
-    .#{$prefix}--buttongroup-item {
-      margin-top: 0;
-      padding-top: 0;
-    }
-  }
-}
-
-@include exports('leadspace-block') {
-  @include leadspace-block;
 }
diff --git a/packages/styles/scss/components/leadspace-with-search/_index.scss b/packages/styles/scss/components/leadspace-with-search/_index.scss
new file mode 100644
index 00000000000..c0e68d9c67d
--- /dev/null
+++ b/packages/styles/scss/components/leadspace-with-search/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'leadspace-with-search';
+@use 'leadspace-with-search';
+
+@include leadspace-with-search.leadspace-with-search;
diff --git a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss
index 01ac2262ba5..f786c748ee3 100644
--- a/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss
+++ b/packages/styles/scss/components/leadspace-with-search/_leadspace-with-search.scss
@@ -1,176 +1,58 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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.
  */
 
-@mixin leadspace-with-search {
-  .#{$prefix}--leadspace-with-search {
-    padding-top: $layout-04;
-    padding-bottom: $layout-04;
-    border-bottom: 1px solid $ui-03;
-    @include carbon--make-container;
-    @include carbon--breakpoint('lg') {
-      padding-top: $layout-05;
-      padding-bottom: $layout-05;
-    }
-    &__row {
-      @include carbon--make-row;
-    }
-    &__content {
-      @include carbon--make-col(4, 4);
-      @include carbon--make-col-ready;
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(12, 16);
-        @include carbon--make-col-offset(4, 16);
-      }
-    }
-    &__heading {
-      color: $text-01;
-      @include type-style('expressive-heading-06', true);
-    }
-    &__copy {
-      color: $text-01;
-      @include type-style('expressive-heading-05', true);
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(6, 8);
-      }
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(8, 16);
-      }
-    }
-    &__search {
-      margin-top: $layout-03;
-      svg.bx--search-magnifier {
-        height: $layout-02;
-        width: $layout-02;
-        @include carbon--breakpoint('lg') {
-          height: $layout-03;
-          width: $layout-03;
-        }
-      }
-      button.bx--search-close {
-        height: 100%;
-        width: $layout-04;
-        @include carbon--breakpoint('md') {
-          width: $layout-05;
-          svg {
-            height: $layout-02;
-            width: $layout-02;
-          }
-        }
-      }
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(6, 8);
-      }
-      @include carbon--breakpoint('lg') {
-        height: $layout-05;
-        margin-top: $layout-05;
-        @include carbon--make-col(8, 10);
-
-        input.bx--search-input {
-          height: 100%;
-          color: $text-01;
-          padding-left: carbon--mini-units(8);
-          @include type-style('expressive-heading-03');
-          &::placeholder {
-            color: $text-05;
-            @include type-style('expressive-heading-03');
-          }
-          &:focus::placeholder {
-            color: transparent;
-          }
-        }
-      }
-    }
-  }
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-block';
+@use '../leadspace-block';
 
-  :host(#{$dds-prefix}-leadspace-with-search) {
+@mixin leadspace-with-search {
+  :host(#{$c4d-prefix}-leadspace-with-search) {
     display: block;
     position: relative;
 
-    &[has-image] {
-      @include carbon--breakpoint-down('lg') {
-        ::slotted([slot='hr']) {
-          display: none;
-        }
-      }
-
-      .#{$prefix}--content-layout {
-        @include carbon--breakpoint-down('md') {
-          padding-bottom: 0;
-        }
-      }
-    }
-
-    #{$dds-prefix}-background-media {
-      display: block;
-      height: auto;
-
-      @include carbon--breakpoint('md') {
-        display: none;
-      }
-    }
-
-    ::slotted([slot='image']) {
-      display: none;
-      @include carbon--breakpoint('md') {
-        position: absolute;
-        display: block;
-        height: 100%;
-        margin: 0 calc(50% - 50vw);
-        width: 100vw;
-        top: 0;
-        // Puts background underneath all static elements
-        z-index: -1;
-      }
-    }
-
-    ::slotted(#{$dds-prefix}-leadspace-block-heading) {
-      @include carbon--breakpoint('md') {
-        width: calc(75% - 32px);
-        max-width: rem(640px);
-      }
-
-      @include carbon--breakpoint('lg') {
-        width: calc(100% - 32px);
-        max-width: rem(640px);
-      }
-    }
-
     .#{$prefix}--content-layout {
       position: relative;
-      padding: $spacing-05 0 $spacing-07;
+      padding: $spacing-07 0 $spacing-07;
 
       &::before {
         right: calc(50% - 50vw);
         content: '';
-        background-color: $ui-background;
+        background-color: $background;
         position: absolute;
         width: 100vw;
         height: 100%;
         z-index: -1;
       }
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         padding: $spacing-07 0 $spacing-09;
       }
 
-      @include carbon--breakpoint('xlg') {
+      @include breakpoint(xlg) {
         padding: $spacing-09 0;
       }
 
       &-g10 {
-        @include carbon--theme($carbon--theme--g10, true);
+        @include theme($g10, true);
       }
 
       &-g90 {
-        @include carbon--theme($carbon--theme--g90, true);
+        @include theme($g90, true);
       }
 
       &-g100 {
-        @include carbon--theme($carbon--theme--g100, true);
+        @include theme($g100, true);
       }
     }
 
@@ -183,36 +65,24 @@
       transition-timing-function: motion(entrance, productive);
       transition-duration: 0s;
 
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         margin: 0 $spacing-05;
       }
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         padding-bottom: $spacing-12;
       }
 
-      &-adjacent-theme {
+      &-dual-theme {
         padding: $spacing-07 0;
 
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           padding: $spacing-09 0;
         }
       }
 
-      &-g10 {
-        @include carbon--theme($carbon--theme--g10, true);
-      }
-
-      &-g90 {
-        @include carbon--theme($carbon--theme--g90, true);
-      }
-
-      &-g100 {
-        @include carbon--theme($carbon--theme--g100, true);
-      }
-
       .#{$prefix}--sticky-header {
-        @include carbon--type-style('expressive-heading-01');
+        @include type-style('heading-01');
 
         display: none;
         align-self: center;
@@ -222,7 +92,7 @@
         top: 0;
         right: calc(50% - 50vw);
         content: '';
-        background-color: $ui-background;
+        background-color: $background;
         position: absolute;
         width: 100vw;
         height: 100%;
@@ -230,164 +100,148 @@
       }
     }
 
-    ::slotted(#{$dds-prefix}-search-with-typeahead) {
-      @include carbon--breakpoint('md') {
-        width: 75%;
-      }
-
-      @include carbon--breakpoint('lg') {
-        width: 125%;
-      }
-    }
+    ::slotted(#{$c4d-prefix}-leadspace-heading) {
+      margin-bottom: 0;
+      padding-left: 0;
+      color: $text-primary;
 
-    ::slotted(#{$dds-prefix}-hr) {
-      margin: 0 calc(50% - 50vw);
-      position: relative;
-      background: $ui-03;
-    }
+      max-width: to-rem(640px);
 
-    &[adjacent-theme='white-and-g10'] {
-      .#{$prefix}--search-container {
-        @include carbon--theme($carbon--theme--g10, true);
+      @include breakpoint(md) {
+        width: calc(75% - $spacing-07);
       }
-    }
 
-    &[adjacent-theme='g10-and-white'] {
-      ::slotted(#{$dds-prefix}-background-media),
-      .#{$prefix}--content-layout {
-        @include carbon--theme($carbon--theme--g10, true);
+      @include breakpoint(lg) {
+        width: calc(100% - $spacing-07);
       }
     }
 
-    &[adjacent-theme='g90-and-g100'] {
-      ::slotted(#{$dds-prefix}-background-media),
-      .#{$prefix}--content-layout {
-        @include carbon--theme($carbon--theme--g90, true);
+    ::slotted(#{$c4d-prefix}-search-with-typeahead) {
+      @include breakpoint(md) {
+        margin-left: $spacing-05;
+        width: calc(75% - $spacing-07);
       }
 
-      .#{$prefix}--search-container {
-        @include carbon--theme($carbon--theme--g100, true);
+      @include breakpoint(lg) {
+        width: calc(100% - $spacing-07);
       }
     }
 
-    &[adjacent-theme='g100-and-g90'] {
-      ::slotted(#{$dds-prefix}-background-media),
-      .#{$prefix}--content-layout {
-        @include carbon--theme($carbon--theme--g100, true);
-      }
-
-      .#{$prefix}--search-container {
-        @include carbon--theme($carbon--theme--g90, true);
-      }
+    ::slotted(#{$c4d-prefix}-hr) {
+      margin: 0 calc(50% - 50vw);
+      position: relative;
+      background: $layer-accent-01;
     }
+  }
 
-    &[sticky-search] {
-      .#{$prefix}--search-container {
-        position: fixed;
-        width: 100%;
-        top: 0;
-        left: 0;
-        padding: $spacing-05 0;
-        margin: 0;
-        transform: translateY(-100%);
-      }
-
-      .#{$prefix}--search-container-inner {
-        @include carbon--make-container;
-        @include carbon--make-row;
+  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='white-and-g10']) {
+    .#{$prefix}--search-layout {
+      @include theme($white, true);
+    }
 
-        margin-left: auto;
-        margin-right: auto;
-      }
+    .#{$prefix}--search-container {
+      @include theme($g10, true);
+    }
+  }
 
-      .#{$prefix}--sticky-header {
-        @include carbon--breakpoint('lg') {
-          @include carbon--make-col(4, 16);
-        }
-      }
+  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g10-and-white']) {
+    .#{$prefix}--content-layout {
+      @include theme($g10, true);
+    }
 
-      ::slotted(#{$dds-prefix}-search-with-typeahead) {
-        @include carbon--make-col(4, 4);
+    .#{$prefix}--search-container {
+      @include theme($white, true);
+    }
+  }
 
-        @include carbon--breakpoint('lg') {
-          @include carbon--make-col(10, 16);
-        }
-      }
+  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g90-and-g100']) {
+    .#{$prefix}--content-layout {
+      @include theme($g90, true);
+    }
 
-      &[scroll-behavior]:not([adjacent-theme]) {
-        .#{$prefix}--search-container {
-          &::before {
-            border-bottom: 1px solid $ui-03;
-          }
-        }
-      }
+    .#{$prefix}--search-container {
+      @include theme($g100, true);
     }
   }
 
-  :host(#{$dds-prefix}-leadspace-with-search-heading),
-  :host(#{$dds-prefix}-leadspace-with-search-content) {
-    display: block;
-    padding: 0;
+  :host(#{$c4d-prefix}-leadspace-with-search[dual-theme='g100-and-g90']) {
+    .#{$prefix}--content-layout {
+      @include theme($g100, true);
+    }
 
-    /* stylelint-disable declaration-no-important */
-    ::slotted(h1) {
-      all: unset !important; /* stylelint-disable-line declaration-property-value-blacklist */
+    .#{$prefix}--search-container {
+      @include theme($g90, true);
     }
-    /* stylelint-enable declaration-no-important */
   }
 
-  :host(#{$dds-prefix}-leadspace-with-search-content-heading) {
-    @extend :host(#{$dds-prefix}-content-block-heading);
+  :host(#{$c4d-prefix}-leadspace-with-search[sticky-search]) {
+    .#{$prefix}--search-container {
+      position: fixed;
+      width: 100%;
+      top: 0;
+      left: 0;
+      padding: $spacing-05 0;
+      margin: 0;
+      transform: translateY(-100%);
+    }
 
-    @include carbon--breakpoint-down('lg') {
-      display: block;
-      width: calc(75% - #{$spacing-07});
-      margin-bottom: 0;
+    .#{$prefix}--search-container-inner {
+      @include make-container;
+      @include make-row;
+
+      margin-left: auto;
+      margin-right: auto;
     }
 
-    @include carbon--breakpoint('xlg') {
-      display: block;
-      width: calc(100% - #{$spacing-07});
-      margin-bottom: 0;
+    .#{$prefix}--sticky-header {
+      @include breakpoint(lg) {
+        @include make-col(4, 16);
+      }
     }
 
-    // !important required to override slotted styling from block-content component
-    @include carbon--breakpoint-down('md') {
-      /* stylelint-disable declaration-no-important */
-      margin-left: 0 !important;
-      /* stylelint-enable declaration-no-important */
-      width: 100%;
+    ::slotted(#{$c4d-prefix}-search-with-typeahead) {
+      @include make-col(4, 4);
+
+      @include breakpoint(lg) {
+        @include make-col(10, 16);
+      }
+    }
+  }
+
+  :host(
+      #{$c4d-prefix}-leadspace-with-search[sticky-search][scroll-behavior]:not(
+          [dual-theme]
+        )
+    ) {
+    .#{$prefix}--search-container {
+      &::before {
+        border-bottom: 1px solid $layer-accent-01;
+      }
     }
   }
 
-  :host(#{$dds-prefix}-leadspace-with-search-content-copy) {
-    @extend :host(#{$dds-prefix}-content-block-paragraph);
-    @include carbon--type-style('expressive-heading-03', true);
+  :host(#{$c4d-prefix}-leadspace-with-search-copy) {
+    @extend :host(#{$c4d-prefix}-content-block-paragraph);
+    @include type-style('fluid-heading-03', true);
 
     display: block;
     padding-top: $spacing-07;
     margin-bottom: 0;
-    max-width: rem(640px);
+    max-width: to-rem(640px);
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       width: calc(75% - #{$spacing-07});
+      padding-right: $spacing-05;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       width: calc(100% - #{$spacing-07});
+      padding-right: $spacing-05;
     }
 
     // !important required to override slotted styling from block-content component
-    @include carbon--breakpoint-down('md') {
-      /* stylelint-disable declaration-no-important */
-      margin-left: 0 !important;
-      /* stylelint-enable declaration-no-important */
+    @include breakpoint-down(md) {
       padding-top: $spacing-06;
-      width: 100%;
     }
   }
 }
-
-@include exports('leadspace-with-search') {
-  @include leadspace-with-search;
-}
diff --git a/packages/styles/scss/components/leadspace-with-search/index.scss b/packages/styles/scss/components/leadspace-with-search/index.scss
deleted file mode 100644
index cff5d9260ce..00000000000
--- a/packages/styles/scss/components/leadspace-with-search/index.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2022
- *
- * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block';
-@import './leadspace-with-search';
diff --git a/packages/styles/scss/components/leadspace/README.md b/packages/styles/scss/components/leadspace/README.md
deleted file mode 100644
index f4e06fd72b7..00000000000
--- a/packages/styles/scss/components/leadspace/README.md
+++ /dev/null
@@ -1,36 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/sections/leadspace/leadspace';
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--leadspace` class.
-
-| Class                        | Description                                                        |
-| ---------------------------- | ------------------------------------------------------------------ |
-| `.bx--leadspace--productive` | The className for 'productive' variant which changes title styling |
-| `.bx--leadspace--gradient`   | Renders pattern with gradient overlay                              |
-
-#### Elements
-
-| Class                       | Description                                            |
-| --------------------------- | ------------------------------------------------------ |
-| `.bx--leadspace__image`     | Background image of the lead space pattern (optional)  |
-| `.bx--leadspace__container` | Element containing all copy/cta content                |
-| `.bx--leadspace__overlay`   | Gradient overlay behind copy content                   |
-| `.bx--leadspace__title`     | Required title/heading for the lead space              |
-| `.bx--leadspace__content`   | Content holder for optional short description and ctas |
-| `.bx--leadspace__desc`      | Optional short description                             |
-| `.bx--leadspace__ctas`      | Optional CTA buttons                                   |
-
-#### Blocks
-
-| Class            | Description                                        |
-| ---------------- | -------------------------------------------------- |
-| `.bx--leadspace` | Highest level class name for the leadspace pattern |
diff --git a/packages/styles/scss/components/leadspace/_index.scss b/packages/styles/scss/components/leadspace/_index.scss
new file mode 100644
index 00000000000..1a02099a94c
--- /dev/null
+++ b/packages/styles/scss/components/leadspace/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'leadspace';
+@use 'leadspace';
+
+@include leadspace.leadspace;
diff --git a/packages/styles/scss/components/leadspace/_leadspace.scss b/packages/styles/scss/components/leadspace/_leadspace.scss
index a6623bccc79..da769a3df14 100644
--- a/packages/styles/scss/components/leadspace/_leadspace.scss
+++ b/packages/styles/scss/components/leadspace/_leadspace.scss
@@ -5,76 +5,122 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../buttongroup/_buttongroup';
-@import '../image/image';
-@import '../tag-group/tag-group';
+@use 'sass:map';
+@use 'sass:math';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/utils/content-width' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/utils/ratio-base' as *;
+@use '../../globals/vars' as *;
+@use '../button-group';
+@use '../image';
 
 $btn-min-width: 26;
 
+@keyframes loadingAnimation {
+  0% {
+    background-position: 0% 50%;
+  }
+  50% {
+    background-position: 100% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+
 // items that change according to the theme applied
 @mixin themed-items($theme: white) {
-  // TODO: figure out how to use the $ui-background color token instead with rgba()
-  $dds--gradient-light: #ffffff;
-  $dds--gradient-dark: #161616;
-
-  @include buttongroup;
+  // TODO: figure out how to use the $background color token instead with rgba()
+  $cds--gradient-light: #ffffff;
+  $cds--gradient-dark: #161616;
 
-  .#{$prefix}--leadspace__section {
+  .#{$c4d-prefix}--leadspace__section {
     display: flex;
-    background-color: $ui-background;
+    background-color: $background;
 
     @media print {
-      background-color: $white-0;
+      background-color: $background;
     }
   }
 
-  .#{$prefix}--leadspace__gradient__stops stop {
-    stop-color: $ui-background;
+  .#{$c4d-prefix}--leadspace__gradient__stops stop {
+    stop-color: $background;
   }
 
-  .#{$prefix}--leadspace--centered .#{$prefix}--leadspace__overlay {
-    background-color: $ui-background;
+  .#{$c4d-prefix}--leadspace--centered .#{$c4d-prefix}--leadspace__overlay {
+    background-color: $background;
   }
 
-  ::slotted(#{$dds-prefix}-leadspace-heading),
-  .#{$prefix}--leadspace__title,
-  .#{$prefix}--leadspace__desc {
-    color: $text-01;
-
-    @media print {
-      color: $gray-100;
-    }
+  ::slotted(#{$c4d-prefix}-leadspace-heading),
+  .#{$c4d-prefix}--leadspace__title,
+  .#{$c4d-prefix}--leadspace__desc {
+    color: $text-primary;
+    padding-right: 0;
   }
 
-  .#{$prefix}--leadspace--centered .#{$prefix}--leadspace__desc {
+  .#{$c4d-prefix}--leadspace--centered .#{$c4d-prefix}--leadspace__desc {
     width: 100%;
   }
 
-  .#{$prefix}--buttongroup {
-    padding-left: 0;
-
-    @include carbon--breakpoint(md) {
-      display: flex;
-    }
-  }
-
-  @include carbon--breakpoint(md) {
-    .#{$prefix}--leadspace--centered .#{$prefix}--leadspace__overlay {
+  @include breakpoint(md) {
+    .#{$c4d-prefix}--leadspace--centered .#{$c4d-prefix}--leadspace__overlay {
       background-color: transparent;
     }
   }
 }
 
 @mixin leadspace {
-  ::slotted([slot='action']),
-  .#{$prefix}--buttongroup {
-    padding-top: $carbon--layout-03;
+  ::slotted([slot='action']) {
+    padding-top: $spacing-07;
+  }
+
+  :host(#{$c4d-prefix}-leadspace) {
+    display: block;
+    position: relative;
+
+    &::before {
+      content: '';
+      opacity: 0;
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: -1;
+      background: linear-gradient(270deg, #c6c6c6, #a8a8a8);
+      background-size: 100% 100%;
+      animation: loadingAnimation 2000ms ease infinite;
+      transition: all 800ms cubic-bezier(0.4, 0.14, 0.3, 1);
+    }
+
+    &[loading] {
+      &::before {
+        z-index: 5;
+        opacity: 1;
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-background-media) {
+      height: auto;
+      aspect-ratio: 4 / 3; /* stylelint-disable-line property-no-unknown */
+
+      @include breakpoint(lg) {
+        position: absolute;
+        inset: 0;
+        height: 100%;
+        aspect-ratio: auto; /* stylelint-disable-line property-no-unknown */
+      }
+    }
   }
 
-  :host(#{$dds-prefix}-leadspace),
-  .#{$prefix}--leadspace {
+  :host(#{$c4d-prefix}-leadspace),
+  .#{$c4d-prefix}--leadspace {
     .#{$prefix}--image {
       /* stylelint-disable-next-line comment-whitespace-inside */
       /* !rtl:raw:
@@ -83,35 +129,33 @@ $btn-min-width: 26;
 
       picture {
         width: 100%;
-        max-width: rem(1584px);
+        max-width: to-rem(1584px);
       }
     }
 
-    .#{$prefix}--leadspace--content__container {
+    .#{$c4d-prefix}--leadspace--content__container {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
       height: 100%;
+      margin-bottom: $spacing-07;
     }
 
-    .#{$prefix}--leadspace__container {
+    .#{$c4d-prefix}--leadspace__container {
       position: relative;
       width: 100%;
 
-      @include carbon--breakpoint(lg) {
+      @include breakpoint(lg) {
         position: static;
       }
     }
 
-    .#{$prefix}--buttongroup,
-    ::slotted(#{$dds-prefix}-button-group),
-    ::slotted(#{$dds-prefix}-leadspace-block-cta) {
-      padding-bottom: $spacing-07;
-
-      @include carbon--breakpoint(md) {
+    ::slotted(#{$c4d-prefix}-button-group),
+    ::slotted(#{$c4d-prefix}-leadspace-block-cta) {
+      @include breakpoint(md) {
         display: grid;
         grid-template-columns: repeat(
-          var(--#{$dds-prefix}--button-group--item-count),
+          var(--#{$c4d-prefix}--button-group--item-count),
           1fr
         );
         @media print {
@@ -120,8 +164,8 @@ $btn-min-width: 26;
       }
     }
 
-    .#{$prefix}--leadspace__overlay {
-      @include carbon--make-container;
+    .#{$c4d-prefix}--leadspace__overlay {
+      @include make-container;
 
       position: relative;
       display: flex;
@@ -132,52 +176,53 @@ $btn-min-width: 26;
       width: 100%;
       max-width: none;
 
-      @include carbon--breakpoint(lg) {
-        height: 100%;
+      @include breakpoint-down(md) {
+        width: auto;
       }
     }
 
-    .#{$prefix}--leadspace--productive {
-      ::slotted(#{$dds-prefix}-leadspace-heading),
-      .#{$prefix}--leadspace__title {
-        @include carbon--type-style(expressive-heading-06, true);
+    .#{$c4d-prefix}--leadspace--productive {
+      ::slotted(#{$c4d-prefix}-leadspace-heading),
+      .#{$c4d-prefix}--leadspace__title {
+        @include type-style(fluid-heading-05, true);
       }
     }
 
-    .#{$prefix}--leadspace__desc {
+    .#{$c4d-prefix}--leadspace__desc {
       z-index: 1;
-      @include carbon--make-col-ready;
-      @include carbon--type-style(expressive-heading-03, true);
-      @include carbon--make-col(4, 4);
-    }
+      @include make-col-ready;
+      @include type-style(fluid-heading-03, true);
+      @include make-col(4, 4);
 
-    .#{$prefix}--leadspace__row {
-      @include carbon--make-row;
+      margin-bottom: 0;
 
-      flex-flow: column nowrap;
-    }
+      @include breakpoint-down(lg) {
+        margin-top: 0;
+      }
 
-    .#{$prefix}--leadspace__action {
-      display: inline-block;
+      @include breakpoint(md) {
+        width: calc(60% - $spacing-07);
+      }
 
-      // Button requirements dictate buttons should be full width at 320px and
-      // down. The carbon--breakpoint-down(sm) mixin has logic that will use
-      // a value of 320px - 0.02, which is not quite what we want, so instead,
-      // we use carbon--breakpoint-down with a number argument, using the
-      // defined width for the sm breakpoint.
-      $breakpoint: map-get($carbon--grid-breakpoints, sm);
-      $width: map-get($breakpoint, width);
-      @include carbon--breakpoint-down($width) {
-        display: block;
+      @include breakpoint(lg) {
+        width: calc(30% - $spacing-07);
       }
     }
 
-    .#{$prefix}--btn {
-      min-width: carbon--mini-units($btn-min-width);
+    .#{$c4d-prefix}--leadspace__row {
+      @include make-row;
+
+      flex-flow: column nowrap;
+    }
+
+    .#{$c4d-prefix}--leadspace__action {
+      @include breakpoint(md) {
+        display: inline-block;
+      }
     }
 
-    @include carbon--breakpoint(md) {
-      .#{$prefix}--leadspace__overlay {
+    @include breakpoint(md) {
+      .#{$c4d-prefix}--leadspace__overlay {
         padding-top: $spacing-07;
         top: 0;
       }
@@ -186,19 +231,19 @@ $btn-min-width: 26;
         height: 100%;
       }
 
-      ::slotted(#{$dds-prefix}-leadspace-heading),
-      .#{$prefix}--leadspace__title {
-        width: percentage(6 / 8);
+      ::slotted(#{$c4d-prefix}-leadspace-heading),
+      .#{$c4d-prefix}--leadspace__title {
+        width: percentage(math.div(6, 8));
 
         flex-shrink: 1;
       }
 
-      .#{$prefix}--leadspace__desc {
-        @include carbon--make-col(6, 8);
+      .#{$c4d-prefix}--leadspace__desc {
+        @include make-col(6, 8);
       }
     }
 
-    @include carbon--breakpoint(lg) {
+    @include breakpoint(lg) {
       width: 100vw;
       overflow: hidden;
       position: relative;
@@ -207,36 +252,35 @@ $btn-min-width: 26;
       margin-left: -50vw;
       margin-right: -50vw;
 
-      .#{$prefix}--leadspace__section {
+      .#{$c4d-prefix}--leadspace__section {
         margin-right: auto;
         margin-left: auto;
         position: relative;
         max-width: 99rem;
       }
 
-      .#{$prefix}--leadspace__container {
+      .#{$c4d-prefix}--leadspace__container {
         width: 100%;
       }
 
-      ::slotted(#{$dds-prefix}-leadspace-heading),
-      .#{$prefix}--leadspace__title {
-        width: percentage(8 / 16);
+      ::slotted(#{$c4d-prefix}-leadspace-heading),
+      .#{$c4d-prefix}--leadspace__title {
+        width: percentage(math.div(8, 16));
       }
 
-      .#{$prefix}--leadspace__desc {
-        @include carbon--make-col-ready;
-        @include carbon--make-col(6, 16);
+      .#{$c4d-prefix}--leadspace__desc {
+        @include make-col(6, 16);
       }
 
-      .#{$prefix}--leadspace--productive {
-        ::slotted(#{$dds-prefix}-leadspace-heading),
-        .#{$prefix}--leadspace__title {
-          @include carbon--make-col(7, 16);
+      .#{$c4d-prefix}--leadspace--productive {
+        ::slotted(#{$c4d-prefix}-leadspace-heading),
+        .#{$c4d-prefix}--leadspace__title {
+          @include make-col(7, 16);
         }
       }
     }
 
-    .#{$prefix}--leadspace--centered {
+    .#{$c4d-prefix}--leadspace--centered {
       margin-right: auto;
       margin-left: auto;
       max-width: 99rem;
@@ -244,83 +288,83 @@ $btn-min-width: 26;
       background-size: cover;
       background-position: center top;
 
-      ::slotted(#{$dds-prefix}-button-group),
-      ::slotted([slot='action']),
-      .#{$prefix}--buttongroup {
-        padding-top: $carbon--layout-01;
-        padding-bottom: calc(#{$layout-03});
+      ::slotted(#{$c4d-prefix}-button-group),
+      ::slotted([slot='action']) {
+        padding-top: $spacing-05;
+        padding-bottom: 0;
 
-        @include carbon--breakpoint('lg') {
-          padding-bottom: calc(#{$layout-06} + #{$layout-07});
+        @include breakpoint(lg) {
+          padding-bottom: calc(#{$spacing-12} + #{$spacing-13});
         }
       }
 
-      &.#{$prefix}--leadspace__section {
-        min-height: rem(560px);
+      &.#{$c4d-prefix}--leadspace__section {
+        min-height: to-rem(560px);
         padding-top: 0;
       }
 
-      .#{$prefix}--leadspace--content__container {
+      .#{$c4d-prefix}--leadspace--content__container {
         display: flex;
         flex-direction: column;
         justify-content: space-between;
-        @include carbon--make-col-ready;
-        @include carbon--make-col(4, 4);
+        margin-bottom: $spacing-07;
+
+        @include make-col-ready;
+        @include make-col(4, 4);
       }
 
-      .#{$prefix}--leadspace__desc {
+      .#{$c4d-prefix}--leadspace__desc {
         width: 95%;
         padding-top: $spacing-09;
 
-        @include carbon--type-style(expressive-heading-03, true);
+        @include type-style(fluid-heading-03, true);
       }
 
-      ::slotted(#{$dds-prefix}-leadspace-heading),
-      .#{$prefix}--leadspace__title {
+      ::slotted(#{$c4d-prefix}-leadspace-heading),
+      .#{$c4d-prefix}--leadspace__title {
         margin-bottom: 0;
-        @include carbon--type-style(expressive-heading-05, true);
       }
 
-      .#{$prefix}--leadspace__desc,
-      ::slotted(#{$dds-prefix}-leadspace-heading),
-      .#{$prefix}--leadspace__title {
+      .#{$c4d-prefix}--leadspace__desc,
+      ::slotted(#{$c4d-prefix}-leadspace-heading),
+      .#{$c4d-prefix}--leadspace__title {
         flex: none;
       }
 
       @include themed-items;
 
-      @include carbon--breakpoint(sm) {
-        .#{$prefix}--leadspace__overlay {
+      @include breakpoint(sm) {
+        .#{$c4d-prefix}--leadspace__overlay {
           padding: $spacing-05 0 0 0;
         }
       }
 
-      @include carbon--breakpoint(md) {
-        .#{$prefix}--leadspace__overlay {
+      @include breakpoint(md) {
+        .#{$c4d-prefix}--leadspace__overlay {
           padding: $spacing-07 0 0 0;
         }
 
-        .#{$prefix}--leadspace--content__container {
+        .#{$c4d-prefix}--leadspace--content__container {
           margin: 0 auto;
           padding-left: $spacing-06;
-          @include carbon--breakpoint(lg) {
-            @include carbon--make-col(4, 8);
+          @include breakpoint(lg) {
+            @include make-col(4, 8);
           }
         }
 
-        ::slotted(#{$dds-prefix}-leadspace-heading),
-        .#{$prefix}--leadspace__title,
-        .#{$prefix}--leadspace__desc {
+        ::slotted(#{$c4d-prefix}-leadspace-heading),
+        .#{$c4d-prefix}--leadspace__title,
+        .#{$c4d-prefix}--leadspace__desc {
           @include content-width;
         }
 
-        .#{$prefix}--leadspace__desc {
-          padding-top: $carbon--layout-04;
+        .#{$c4d-prefix}--leadspace__desc {
+          padding-top: $spacing-09;
         }
       }
 
-      @include carbon--breakpoint(lg) {
-        .#{$prefix}--leadspace__overlay {
+      @include breakpoint(lg) {
+        .#{$c4d-prefix}--leadspace__overlay {
           height: 100%;
           padding: $spacing-10 0 0 0;
         }
@@ -329,17 +373,17 @@ $btn-min-width: 26;
 
     @include themed-items;
 
-    .#{$prefix}--leadspace--g100,
-    .#{$prefix}--leadspace--g90 {
-      @include carbon--theme(
-        $carbon--theme--g100,
+    .#{$c4d-prefix}--leadspace--g100,
+    .#{$c4d-prefix}--leadspace--g90 {
+      @include theme(
+        $g100,
         feature-flag-enabled('enable-css-custom-properties')
-      ) {
-        @include themed-items(dark);
-      }
+      );
+
+      @include themed-items(dark);
     }
 
-    .#{$prefix}--leadspace__gradient {
+    .#{$c4d-prefix}--leadspace__gradient {
       display: block;
       position: absolute;
       top: 0;
@@ -353,11 +397,11 @@ $btn-min-width: 26;
       }
     }
 
-    .#{$prefix}--leadspace__gradient__rect {
+    .#{$c4d-prefix}--leadspace__gradient__rect {
       fill: url(#stops);
     }
 
-    .#{$prefix}--leadspace__gradient__stops stop {
+    .#{$c4d-prefix}--leadspace__gradient__stops stop {
       &:nth-of-type(1) {
         stop-opacity: 1;
         /* stylelint-disable-next-line comment-whitespace-inside */
@@ -387,8 +431,8 @@ $btn-min-width: 26;
       }
     }
 
-    .#{$prefix}--leadspace--centered
-      .#{$prefix}--leadspace__gradient__stops
+    .#{$c4d-prefix}--leadspace--centered
+      .#{$c4d-prefix}--leadspace__gradient__stops
       stop {
       &:nth-of-type(1) {
         stop-opacity: 1;
@@ -408,47 +452,17 @@ $btn-min-width: 26;
     }
   }
 
-  .#{$prefix}--leadspace__section {
-    height: auto;
-  }
-
-  .#{$prefix}--leadspace--medium {
-    .#{$prefix}--leadspace__section {
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(60);
-      }
-    }
-  }
-
-  .#{$prefix}--leadspace--tall {
-    .#{$prefix}--leadspace__section {
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(70);
-      }
-    }
-  }
-
-  .#{$prefix}--leadspace--super {
-    .#{$prefix}--leadspace__section {
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(80);
-      }
-    }
-  }
-
-  :host(#{$dds-prefix}-leadspace) ::slotted([slot='navigation']) {
+  :host(#{$c4d-prefix}-leadspace) ::slotted([slot='navigation']) {
     z-index: 1;
-    padding-left: $spacing-05;
-    padding-right: $spacing-05;
-    max-width: rem(640px);
-  }
-
-  :host(#{$dds-prefix}-leadspace) ::slotted(#{$dds-prefix}-tag-group) {
-    padding-bottom: $spacing-03;
+    /* stylelint-disable declaration-no-important */
+    // need the !important to prevent CSS reset styles from overwritting margin for tags
+    padding-left: $spacing-05 !important;
+    padding-right: $spacing-05 !important;
+    padding-bottom: $spacing-05 !important;
   }
 
-  :host(#{$dds-prefix}-breadcrumb-link[aria-current='page']) .#{$prefix}--link {
-    color: $text-01;
+  :host(#{$c4d-prefix}-breadcrumb-link[aria-current='page']) .#{$prefix}--link {
+    color: $text-primary;
     cursor: auto;
 
     &:hover {
@@ -456,111 +470,133 @@ $btn-min-width: 26;
     }
   }
 
-  :host(#{$dds-prefix}-leadspace) ::slotted(#{$dds-prefix}-leadspace-image) {
-    @include carbon--breakpoint('lg') {
+  :host(#{$c4d-prefix}-leadspace) ::slotted(#{$c4d-prefix}-leadspace-image) {
+    @include breakpoint(lg) {
       height: 100%;
     }
   }
 
-  :host(#{$dds-prefix}-leadspace-heading),
-  .#{$prefix}--leadspace__title {
+  :host(#{$c4d-prefix}-leadspace-heading),
+  .#{$c4d-prefix}--leadspace__title {
     padding-top: 0;
     margin-bottom: $spacing-09;
     padding-left: $spacing-05;
     padding-right: $spacing-05;
     width: 95%;
     z-index: 1;
-    @include carbon--type-style(expressive-heading-06, true);
 
-    /* stylelint-disable declaration-no-important */
+    ::slotted(span) {
+      color: $link-primary;
+    }
+
     ::slotted(h1) {
-      all: unset !important; /* stylelint-disable-line declaration-property-value-blacklist */
+      display: none;
     }
-    /* stylelint-enable declaration-no-important */
   }
 
-  :host(#{$dds-prefix}-leadspace)[size='tall'],
-  :host(#{$dds-prefix}-leadspace)[size='super'] {
-    ::slotted(#{$dds-prefix}-leadspace-heading) {
-      @include carbon--breakpoint('lg') {
-        margin-bottom: $spacing-12;
-      }
-    }
+  :host(#{$c4d-prefix}-leadspace-heading[type-style='fluid-heading-05']) {
+    @include type-style(fluid-heading-05, true);
   }
 
-  :host(#{$dds-prefix}-leadspace)[size='tall'],
-  :host(#{$dds-prefix}-leadspace)[size] {
-    .#{$prefix}--leadspace__section {
-      height: auto;
+  :host(#{$c4d-prefix}-leadspace-heading[type-style='display-01']) {
+    @include type-style(display-01, true);
+  }
 
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(70);
+  :host(#{$c4d-prefix}-leadspace)[size='super'] {
+    @include breakpoint(lg) {
+      .#{$c4d-prefix}--leadspace__overlay {
+        height: 40rem;
+      }
+    }
+
+    .#{$c4d-prefix}--leadspace__section {
+      @include breakpoint(lg) {
+        min-height: 40rem;
       }
     }
   }
 
-  :host(#{$dds-prefix}-leadspace)[size='short'] {
-    ::slotted(#{$dds-prefix}-leadspace-heading) {
-      margin-bottom: $spacing-07;
-      @include carbon--type-style(expressive-heading-06, true);
+  :host(#{$c4d-prefix}-leadspace)[size='medium'] {
+    @include breakpoint(lg) {
+      .#{$c4d-prefix}--leadspace__overlay {
+        height: 30rem;
+      }
+    }
 
-      @include carbon--breakpoint('lg') {
+    ::slotted(#{$c4d-prefix}-leadspace-heading) {
+      @include breakpoint(lg) {
         margin-bottom: $spacing-10;
       }
     }
 
-    .#{$prefix}--leadspace__section {
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(40);
+    .#{$c4d-prefix}--leadspace__section {
+      @include breakpoint(lg) {
+        min-height: 30rem;
       }
     }
   }
 
-  :host-context(#{$dds-prefix}-leadspace[size='short']) {
-    @include carbon--breakpoint('lg') {
-      .#{$prefix}--image__img {
-        object-position: left top;
+  :host(#{$c4d-prefix}-leadspace)[size='short'] {
+    @include breakpoint(lg) {
+      .#{$c4d-prefix}--leadspace__overlay {
+        height: 20rem;
       }
     }
-  }
 
-  :host(#{$dds-prefix}-leadspace)[size='medium'] {
-    ::slotted(#{$dds-prefix}-leadspace-heading) {
-      @include carbon--type-style(expressive-heading-05, true);
+    ::slotted(#{$c4d-prefix}-leadspace-heading) {
+      margin-bottom: $spacing-07;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         margin-bottom: $spacing-10;
       }
     }
 
-    .#{$prefix}--leadspace__section {
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(60);
+    .#{$c4d-prefix}--leadspace__section {
+      @include breakpoint(lg) {
+        min-height: 20rem;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-leadspace)[size='tall'],
+  :host(#{$c4d-prefix}-leadspace)[size='super'] {
+    ::slotted(#{$c4d-prefix}-leadspace-heading) {
+      @include breakpoint(lg) {
+        margin-bottom: $spacing-12;
       }
     }
   }
 
-  :host(#{$dds-prefix}-leadspace)[size='super'] {
-    ::slotted(#{$dds-prefix}-leadspace-heading) {
-      @include carbon--type-style(display-01, true);
+  :host(#{$c4d-prefix}-leadspace)[size='tall'] {
+    @include breakpoint(lg) {
+      .#{$c4d-prefix}--leadspace__overlay {
+        height: 35rem;
+      }
+    }
+
+    .#{$c4d-prefix}--leadspace__section {
+      height: auto;
+      min-height: 35rem;
     }
+  }
 
-    .#{$prefix}--leadspace__section {
-      @include carbon--breakpoint('lg') {
-        min-height: carbon--mini-units(80);
+  :host-context(#{$c4d-prefix}-leadspace[size='short']) {
+    @include breakpoint(lg) {
+      .#{$prefix}--image__img {
+        object-position: left top;
       }
     }
   }
 
-  :host(#{$dds-prefix}-leadspace-image),
-  .#{$prefix}--leadspace .#{$prefix}--image {
+  :host(#{$c4d-prefix}-leadspace-image),
+  .#{$c4d-prefix}--leadspace .#{$prefix}--image {
     @include ratio-base(4, 3, false);
 
-    @include carbon--breakpoint(md) {
+    @include breakpoint(md) {
       @include ratio-base(16, 9, false);
     }
 
-    @include carbon--breakpoint(lg) {
+    @include breakpoint(lg) {
       position: absolute;
       top: 0;
       left: 0;
@@ -581,7 +617,3 @@ $btn-min-width: 26;
     }
   }
 }
-
-@include exports('leadspace') {
-  @include leadspace;
-}
diff --git a/packages/styles/scss/components/leaving-ibm/_index.scss b/packages/styles/scss/components/leaving-ibm/_index.scss
new file mode 100644
index 00000000000..6f41a6978c2
--- /dev/null
+++ b/packages/styles/scss/components/leaving-ibm/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'leaving-ibm';
+@use 'leaving-ibm';
+
+@include leaving-ibm.leaving-ibm;
diff --git a/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss b/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss
new file mode 100644
index 00000000000..c5f618520e2
--- /dev/null
+++ b/packages/styles/scss/components/leaving-ibm/_leaving-ibm.scss
@@ -0,0 +1,63 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../../../carbon-web-components/src/components/modal/modal' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin leaving-ibm {
+  :host(#{$c4d-prefix}-leaving-ibm-composite),
+  :host(#{$c4d-prefix}-leaving-ibm-container) {
+    width: 100%;
+  }
+
+  :host(#{$c4d-prefix}-leaving-ibm-modal) {
+    @extend :host(#{$prefix}-modal);
+
+    max-height: 100%;
+  }
+  :host(#{$c4d-prefix}-leaving-ibm-modal)[open] {
+    @extend :host(#{$prefix}-modal[open]);
+  }
+
+  :host(#{$c4d-prefix}-leaving-ibm-modal-heading) {
+    @include type-style('fluid-heading-04', true);
+  }
+
+  :host(#{$c4d-prefix}-leaving-ibm-modal-body) {
+    @extend :host(#{$prefix}-modal-body);
+
+    padding-right: 20%;
+    z-index: 1;
+
+    ::slotted(#{$c4d-prefix}-leaving-ibm-modal-supplemental),
+    ::slotted(slot[name='supplemental']) {
+      display: block;
+      margin-top: $spacing-07;
+      color: $text-secondary;
+      @include type-style('label-02');
+    }
+
+    > p {
+      padding-right: 0;
+      margin: 0;
+    }
+    ::slotted(:last-child) {
+      padding-bottom: 0;
+    }
+    #{$prefix}-link {
+      min-height: 24px;
+      display: inline-block;
+    }
+  }
+  .#{$prefix}--modal-container {
+    transform: translate3d(0, 0, 0);
+  }
+}
diff --git a/packages/styles/scss/components/lightbox-media-viewer/_index.scss b/packages/styles/scss/components/lightbox-media-viewer/_index.scss
new file mode 100644
index 00000000000..e0b15f4ed23
--- /dev/null
+++ b/packages/styles/scss/components/lightbox-media-viewer/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'lightbox-media-viewer';
+@use 'lightbox-media-viewer';
+
+@include lightbox-media-viewer.lightbox-media-viewer;
diff --git a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss
index ad86e794ea4..f357b6f8fda 100644
--- a/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss
+++ b/packages/styles/scss/components/lightbox-media-viewer/_lightbox-media-viewer.scss
@@ -5,23 +5,53 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../expressive-modal/expressive-modal';
-@import '../video-player/video-player';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/video-player';
+@use '../expressive-modal/expressive-modal';
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../expressive-modal' as *;
+@use '../video-player' as *;
 
 @mixin lightbox-media-viewer {
-  .#{$prefix}--modal--expressive--fullwidth
-    .#{$prefix}--modal-container
-    .#{$prefix}--modal-content {
+  :host(#{$c4d-prefix}-lightbox-image-viewer),
+  :host(#{$c4d-prefix}-lightbox-video-player) {
+    @extend :host(#{$c4d-prefix}-expressive-modal-body);
+    @extend .#{$c4d-prefix}--lightbox-media-viewer;
+  }
+
+  :host(#{$c4d-prefix}-lightbox-video-player-container),
+  :host(#{$c4d-prefix}-lightbox-video-player-composite) {
+    display: contents;
+  }
+
+  :host(#{$c4d-prefix}-lightbox-video-player) .#{$c4d-prefix}--video-player {
+    width: 100%;
+
+    ::slotted(.#{$c4d-prefix}--video-player__video) {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+    }
+  }
+
+  .#{$c4d-prefix}--modal--expressive--fullwidth
+    .#{$c4d-prefix}--modal-container
+    .#{$c4d-prefix}--modal-content {
     min-height: 100%;
   }
 
-  .#{$prefix}--lightbox-media-viewer {
-    color: $text-01;
+  .#{$c4d-prefix}--lightbox-media-viewer {
+    color: $text-primary;
 
     .#{$prefix}--modal-container {
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         padding: 0 $spacing-05;
       }
       .#{$prefix}--modal-content {
@@ -29,31 +59,31 @@
       }
     }
 
-    .#{$prefix}--video-player {
+    .#{$c4d-prefix}--video-player {
       width: 100%;
-      .#{$prefix}--video-player__video-container {
+      .#{$c4d-prefix}--video-player__video-container {
         /* stylelint-disable-next-line function-name-case */
         padding-top: Min(calc(100vh - #{$spacing-13}), 56.25%);
       }
     }
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       .#{$prefix}--model-container {
-        padding-top: $carbon--layout-05;
+        padding-top: $spacing-10;
         padding-bottom: 0;
       }
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       .#{$prefix}--model-container {
-        padding-top: $carbon--layout-04;
-        padding-bottom: $carbon--spacing-05;
+        padding-top: $spacing-09;
+        padding-bottom: $spacing-05;
       }
     }
   }
 
-  :host(#{$dds-prefix}-lightbox-media-viewer-body),
-  .#{$prefix}--lightbox-media-viewer__container {
+  :host(#{$c4d-prefix}-lightbox-media-viewer-body),
+  .#{$c4d-prefix}--lightbox-media-viewer__container {
     display: block;
     width: 100%;
     height: 100%;
@@ -73,41 +103,46 @@
 
     &::before {
       top: 0;
-      background: linear-gradient(to bottom, $ui-01, transparent);
+      background: linear-gradient(to bottom, $layer-01, transparent);
     }
 
     &::after {
       bottom: 0;
-      background: linear-gradient(to top, $ui-01, transparent);
+      background: linear-gradient(to top, $layer-01, transparent);
     }
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       padding-left: $spacing-05;
       padding-right: $spacing-05;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       display: flex;
       flex-direction: column;
       padding: 0;
     }
 
-    .#{$prefix}--lightbox-media-viewer__row {
-      @include carbon--make-row(0);
+    .#{$c4d-prefix}--lightbox-media-viewer__row {
+      @include make-row(0);
 
       flex-flow: column nowrap;
       width: 100%;
       // Padding top needs to account for the scroll gradient overlay
       padding-top: calc(#{$spacing-09} - #{$spacing-07});
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         padding-top: 0;
         flex-direction: row;
       }
     }
 
-    .#{$prefix}--lightbox-media-viewer__media {
-      @include carbon--breakpoint-down('lg') {
+    .#{$c4d-prefix}--lightbox-media-viewer__media,
+    .#{$c4d-prefix}--lightbox-media-viewer__media-description {
+      box-sizing: border-box;
+    }
+
+    .#{$c4d-prefix}--lightbox-media-viewer__media {
+      @include breakpoint-down(lg) {
         position: relative;
       }
 
@@ -118,71 +153,71 @@
         max-height: 100%;
       }
 
-      @include carbon--breakpoint-down('lg') {
+      @include breakpoint-down(lg) {
         display: flex;
         align-items: center;
       }
 
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col-ready;
-        @include carbon--make-col(12, 16);
+      @include breakpoint(lg) {
+        @include make-col-ready;
+        @include make-col(12, 16);
 
         width: 100%;
         flex: none;
         /* stylelint-disable-next-line property-no-unknown */
         aspect-ratio: 16 / 9;
 
-        .#{$prefix}--image {
+        .#{$c4d-prefix}--image {
           height: 100%;
         }
       }
     }
 
-    .#{$prefix}--lightbox-media-viewer__media-description {
+    .#{$c4d-prefix}--lightbox-media-viewer__media-description {
       display: flex;
       flex-direction: column;
       position: relative;
 
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col-ready;
-        @include carbon--make-col(4, 16);
+      @include breakpoint(lg) {
+        @include make-col-ready;
+        @include make-col(4, 16);
 
         margin-left: auto;
       }
 
-      @include carbon--breakpoint-down('lg') {
+      @include breakpoint-down(lg) {
         flex-grow: 1;
       }
     }
 
-    .#{$prefix}--lightbox-media-viewer__content {
-      padding-right: $carbon--spacing-07;
+    .#{$c4d-prefix}--lightbox-media-viewer__content {
+      padding-right: $spacing-07;
 
-      @include carbon--type-style('body-long-02');
-      @include carbon--breakpoint('lg') {
+      @include type-style('body-02');
+      @include breakpoint(lg) {
         overflow: auto;
       }
     }
 
-    .#{$prefix}--lightbox-media-viewer__content__title {
-      padding-bottom: $carbon--spacing-07;
+    .#{$c4d-prefix}--lightbox-media-viewer__content__title {
+      padding-bottom: $spacing-07;
 
-      @include carbon--type-style('expressive-heading-03');
-      @include carbon--breakpoint-down('lg') {
+      @include type-style('fluid-heading-03', true);
+      @include breakpoint-down(lg) {
         padding-top: $spacing-05;
       }
     }
 
-    .#{$prefix}--lightbox-media-viewer__content__desc {
-      color: $text-02;
+    .#{$c4d-prefix}--lightbox-media-viewer__content__desc {
+      color: $text-secondary;
       padding-bottom: $spacing-07;
 
-      @include carbon--type-style('body-long-02');
+      @include type-style('body-02');
     }
 
-    .#{$prefix}--lightbox-media-viewer__title,
-    .#{$prefix}--lightbox-media-viewer__desc {
-      @include carbon--breakpoint('lg') {
+    .#{$c4d-prefix}--lightbox-media-viewer__title,
+    .#{$c4d-prefix}--lightbox-media-viewer__desc {
+      @include breakpoint(lg) {
         display: flex;
         max-width: 95%;
         height: 100%;
@@ -190,11 +225,7 @@
     }
   }
 
-  ::slotted(#{$dds-prefix}-video-player-container) {
+  ::slotted(#{$c4d-prefix}-video-player-container) {
     width: 100%;
   }
 }
-
-@include exports('lightbox-media-viewer') {
-  @include lightbox-media-viewer;
-}
diff --git a/packages/styles/scss/components/link-list-section/_index.scss b/packages/styles/scss/components/link-list-section/_index.scss
new file mode 100644
index 00000000000..f79606c2e2a
--- /dev/null
+++ b/packages/styles/scss/components/link-list-section/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'link-list-section';
+@use 'link-list-section';
+
+@include link-list-section.link-list-section;
diff --git a/packages/styles/scss/components/link-list-section/_link-list-section.scss b/packages/styles/scss/components/link-list-section/_link-list-section.scss
new file mode 100644
index 00000000000..266b4b821a3
--- /dev/null
+++ b/packages/styles/scss/components/link-list-section/_link-list-section.scss
@@ -0,0 +1,35 @@
+//
+// 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.
+//
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-section';
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+@mixin link-list-section {
+  :host(#{$c4d-prefix}-link-list-section) {
+    display: block;
+
+    .#{$prefix}--content-section__left {
+      padding-top: 0;
+    }
+
+    .#{$prefix}--content-section__children {
+      margin-top: 0;
+
+      @include breakpoint(lg) {
+        @include make-col(8, 16);
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-content-section-heading) {
+      margin-bottom: 0;
+    }
+  }
+}
diff --git a/packages/styles/scss/components/link-list/README.md b/packages/styles/scss/components/link-list/README.md
deleted file mode 100644
index 1a8b36290da..00000000000
--- a/packages/styles/scss/components/link-list/README.md
+++ /dev/null
@@ -1,23 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package scss into the top of your main SCSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/link-list/index';
-```
-
-#### Blocks
-
-| Class            | Description                                     |
-| ---------------- | ----------------------------------------------- |
-| `.bx--link-list` | Highest level class name for the Card component |
-
-#### Elements
-
-| Class                       | Description                                |
-| --------------------------- | ------------------------------------------ |
-| `.bx--link-list__heading`   | Heading element of the LinkList component. |
-| `.bx--link-list__list`      | List of items for LinkList.                |
-| `.bx--link-list__list__CTA` | Within each item is leveraging the CTA.    |
diff --git a/packages/styles/scss/components/link-list/_index.scss b/packages/styles/scss/components/link-list/_index.scss
new file mode 100644
index 00000000000..c1a70f819b1
--- /dev/null
+++ b/packages/styles/scss/components/link-list/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'link-list';
+@use 'link-list';
+
+@include link-list.link-list;
diff --git a/packages/styles/scss/components/link-list/_link-list.scss b/packages/styles/scss/components/link-list/_link-list.scss
index d4e17c6f0dd..9c1dfea4892 100644
--- a/packages/styles/scss/components/link-list/_link-list.scss
+++ b/packages/styles/scss/components/link-list/_link-list.scss
@@ -5,262 +5,182 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../card';
+@use '../link-with-icon';
+
 @mixin link-list {
-  .#{$prefix}--link-list {
-    padding-bottom: $carbon--layout-05;
+  :host(#{$c4d-prefix}-link-list) {
+    padding-bottom: 0;
 
-    &:first-of-type {
-      padding-top: $carbon--layout-05;
+    ul {
+      padding: 0;
+      margin: 0;
     }
-  }
 
-  :host(#{$dds-prefix}-link-list-item-card),
-  :host(#{$dds-prefix}-link-list-item-card-cta),
-  .#{$prefix}--link-list {
-    .#{$prefix}--card {
-      max-width: none;
+    .#{$c4d-prefix}--link-list__list--vertical,
+    .#{$c4d-prefix}-ce--link-list__list--end {
+      display: grid;
+      grid-auto-rows: 1fr;
 
-      &:not(:hover) {
-        background: $ui-background;
+      ::slotted(#{$c4d-prefix}-link-list-item),
+      ::slotted(#{$c4d-prefix}-link-list-item-cta) {
+        outline: none;
       }
     }
 
-    .#{$prefix}--card__footer {
-      margin-top: 0;
-
-      svg {
-        margin-right: 0;
-
-        @include carbon--breakpoint-down('md') {
-          align-self: start;
-          margin-top: 1px; /* keeps icon centered when text is a single line */
-        }
-      }
+    .#{$c4d-prefix}--link-list__list--vertical
+      ::slotted(#{$c4d-prefix}-link-list-item) {
+      display: flex;
     }
 
-    .#{$prefix}--card__wrapper {
-      padding-left: $carbon--spacing-07;
-      padding-right: $carbon--spacing-07;
-
-      .#{$prefix}--card__copy {
-        margin-bottom: 0;
+    .#{$c4d-prefix}-ce--link-list__heading__wrapper {
+      display: contents;
+    }
 
-        @include carbon--breakpoint('lg') {
-          margin-bottom: $carbon--spacing-07;
-        }
+    @include breakpoint(md) {
+      .#{$c4d-prefix}-ce--link-list__heading--split
+        ::slotted(#{$c4d-prefix}-link-list-heading) {
+        width: 33.3%;
+        padding-right: 10%;
       }
+    }
 
-      .#{$prefix}--card__copy p,
-      .#{$prefix}--card__heading,
-      .#{$prefix}--card__copy ::slotted(p) {
-        color: $link-01;
-        @include carbon--type-style('body-short-02');
+    .#{$c4d-prefix}-ce--link-list__list--split,
+    .#{$c4d-prefix}-ce--link-list__list--three-columns {
+      ::slotted(#{$c4d-prefix}-link-list-item) {
+        display: grid;
+        align-items: stretch;
+        // margin-right: -$spacing-05;
       }
 
-      @include carbon--breakpoint('md') {
-        padding-left: 0;
-        padding-right: 0;
-      }
+      @include breakpoint(md) {
+        display: grid;
+        grid-column-gap: $spacing-07;
 
-      &::before,
-      &::after {
-        display: none;
+        ::slotted(#{$c4d-prefix}-link-list-item) {
+          margin-left: -$spacing-05;
+          margin-right: 0;
+        }
       }
     }
 
-    .#{$prefix}--card__content {
-      flex-direction: row;
-      justify-content: space-between;
-
-      @include carbon--breakpoint('lg') {
-        flex-direction: column;
+    .#{$c4d-prefix}-ce--link-list__list--split {
+      @include breakpoint(md) {
+        grid-template-columns: 1fr 1fr;
       }
     }
 
-    &:focus {
-      outline: none;
-    }
-  }
-
-  :host(#{$dds-prefix}-link-list-item-card-cta) {
-    ::slotted(#{$dds-prefix}-card-cta-footer) {
-      @include carbon--breakpoint-down('lg') {
-        margin-top: 0;
+    .#{$c4d-prefix}-ce--link-list__list--three-columns {
+      @include breakpoint(md) {
+        grid-template-columns: 1fr 1fr 1fr;
       }
     }
   }
 
-  :host(#{$dds-prefix}-link-list-item-card-cta)[cta-type='video'],
-  .#{$prefix}--card__video {
-    [slot='heading'],
-    .#{$prefix}--card__heading {
-      margin-bottom: 0;
-
-      @include carbon--type-style('body-short-02');
+  :host(#{$c4d-prefix}-link-list-item) {
+    .#{$prefix}--link {
+      align-content: flex-start;
 
-      @include carbon--breakpoint('lg') {
-        margin-bottom: $carbon--spacing-05;
+      span,
+      ::slotted(svg[slot='icon']) {
+        align-self: flex-start;
       }
     }
   }
-  :host(#{$dds-prefix}-link-list-item-card-cta)[cta-type='video'] {
-    [slot='heading'],
-    .#{$prefix}--card__heading {
-      color: $link-01;
-    }
-  }
-
-  .#{$prefix}--link-list__heading,
-  :host(#{$dds-prefix}-link-list-heading) {
-    margin-bottom: $carbon--spacing-05;
-
-    @include carbon--type-style('expressive-heading-02');
-
-    color: $text-01;
-  }
-
-  .#{$prefix}--link-list__list.#{$prefix}--link-list__list--card {
-    margin-left: -$carbon--spacing-05;
-    margin-right: -$carbon--spacing-05;
-  }
 
-  .#{$prefix}--link-list__list--horizontal {
-    ::slotted(#{$dds-prefix}-link-list-item),
-    ::slotted(#{$dds-prefix}-link-list-item-card),
-    ::slotted(#{$dds-prefix}-link-list-item-cta),
-    ::slotted(#{$dds-prefix}-link-list-item-card-cta),
-    .#{$prefix}--link-list__list__CTA {
-      float: left;
-      padding-right: $carbon--spacing-07;
-      padding-bottom: $carbon--spacing-05;
+  :host(#{$c4d-prefix}-link-list-heading) {
+    margin-bottom: $spacing-05;
+    color: $text-primary;
+    display: block;
 
-      @include carbon--breakpoint('md') {
-        padding-bottom: 0;
-      }
+    .#{$prefix}--link {
+      cursor: pointer;
     }
-  }
 
-  .#{$prefix}--link-list__list--vertical {
-    .#{$prefix}--link-list__list__CTA {
-      margin-bottom: $carbon--spacing-05;
+    @include type-style('heading-02');
 
-      &:last-of-type {
-        margin-bottom: 0;
-      }
-    }
-
-    ::slotted(*) {
-      margin-bottom: $carbon--spacing-05;
+    @include breakpoint(md) {
+      margin-left: -$spacing-05;
     }
 
-    ::slotted(*:last-of-type) {
-      margin-bottom: 0;
+    @include breakpoint(lg) {
+      margin-left: 0;
     }
   }
 
-  .#{$prefix}--content-item-horizontal__item--cta {
-    .#{$prefix}--link-list li {
-      &:last-of-type {
-        @include carbon--breakpoint('lg') {
-          margin-bottom: 0;
-        }
-      }
+  :host(#{$c4d-prefix}-link-list-item)[type='default'],
+  :host(#{$c4d-prefix}-link-list-item-cta)[type='default'],
+  :host(#{$c4d-prefix}-link-list-item)[type='end'] {
+    .#{$prefix}--link {
+      display: flex;
+      width: 100%;
+      padding: $spacing-05 0;
     }
   }
 
-  .#{$prefix}--link-list__list--vertical-end {
-    ::slotted(#{$dds-prefix}-link-list-item),
-    ::slotted(#{$dds-prefix}-link-list-item-cta),
-    .#{$prefix}--link-list__list__CTA .#{$prefix}--link-with-icon__container {
-      @include carbon--make-col-ready;
-
-      width: 100%;
+  .#{$c4d-prefix}--link-list__list {
+    ::slotted(#{$c4d-prefix}-link-list-item),
+    ::slotted(#{$c4d-prefix}-link-list-item-cta) {
+      display: flex;
+      border-top: 1px solid $border-subtle-01;
     }
 
-    .#{$prefix}--link-list__list__CTA .#{$prefix}--link-with-icon__container {
-      a {
-        padding: $carbon--spacing-05 0;
-        justify-content: space-between;
-
-        &:hover {
-          text-decoration: none;
-        }
-
-        &:focus {
-          outline: none;
-        }
-      }
-
-      svg {
-        align-self: start;
-        margin-left: $carbon--spacing-07;
-        margin-top: 1px; /* keeps icon centered when text is a single line */
-      }
+    &:last-of-type {
+      border-bottom: 1px solid $border-subtle-01;
     }
   }
 
-  .#{$prefix}--link-list__list--vertical-end .#{$prefix}--link-list__list__CTA {
-    border-bottom: 1px solid $ui-03;
-    max-width: 640px;
-    @include hang;
-
-    &:hover {
-      background: $hover-ui;
-    }
-
-    &:focus-within {
-      outline: 2px solid $focus;
-    }
+  .#{$c4d-prefix}-ce--link-list__list--end {
+    ::slotted(#{$c4d-prefix}-link-list-item),
+    ::slotted(#{$c4d-prefix}-link-list-item-cta) {
+      border-top: 1px solid $border-subtle-01;
+      border-bottom: 1px solid $border-subtle-01;
+      margin-top: -1px;
 
-    &:first-of-type {
-      border-top: 1px solid $ui-03;
+      @include breakpoint(lg) {
+        margin-left: -$spacing-05;
+        margin-right: -$spacing-05;
+      }
     }
   }
 
-  :host(#{$dds-prefix}-link-list-item-card),
-  :host(#{$dds-prefix}-link-list-item-card-cta),
-  .#{$prefix}--link-list__list__CTA {
-    &.#{$prefix}--link-list__list--video .#{$prefix}--card__footer span {
-      color: $link-01;
-      display: none;
+  .#{$c4d-prefix}--link-list__list--horizontal {
+    ::slotted(#{$c4d-prefix}-link-list-item),
+    ::slotted(#{$c4d-prefix}-link-list-item-cta) {
+      float: left;
+      padding-right: $spacing-07;
+      padding-bottom: $spacing-05;
 
-      @include carbon--breakpoint('lg') {
-        display: inline;
+      @include breakpoint(md) {
+        padding-bottom: 0;
       }
     }
   }
 
-  :host(#{$dds-prefix}-link-list-item-card),
-  :host(#{$dds-prefix}-link-list-item-card-cta),
-  .#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA {
-    max-width: carbon--mini-units(80);
-    border-top: 1px solid $ui-03;
-
-    &:last-of-type {
-      border-bottom: 1px solid $ui-03;
+  .#{$c4d-prefix}--link-list__list--vertical {
+    ::slotted(*) {
+      margin-bottom: $spacing-05;
     }
   }
 
-  :host(#{$dds-prefix}-link-list-item-card),
-  :host(#{$dds-prefix}-link-list-item-card-cta),
-  .#{$prefix}--link-list__list--card .#{$prefix}--link-list__list__CTA div {
-    .#{$prefix}--tile {
-      margin-left: 0;
-      margin-right: 0;
-      min-height: 0;
-
-      .#{$prefix}--card__wrapper {
-        min-height: 0;
-        padding: 0;
-
-        @include carbon--breakpoint('lg') {
-          min-height: 116px;
-        }
-      }
-    }
+  :host(#{$c4d-prefix}-link-list-item)
+    .#{$prefix}--link-with-icon__icon-left
+    ::slotted(svg[slot='icon']),
+  :host(#{$c4d-prefix}-link-list-item-cta)
+    .#{$prefix}--link-with-icon__icon-left
+    ::slotted(svg[slot='icon']) {
+    min-width: 20px;
+    min-height: 20px;
   }
-}
 
-@include exports('link-list') {
-  @include link-list;
+  :host(#{$c4d-prefix}-link-list):last-of-type {
+    padding-bottom: $spacing-10;
+  }
 }
diff --git a/packages/styles/scss/components/link-list/index.scss b/packages/styles/scss/components/link-list/index.scss
deleted file mode 100644
index 5dc0ec40193..00000000000
--- a/packages/styles/scss/components/link-list/index.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/hang';
-@import '../card/index';
-@import '../link-with-icon/link-with-icon';
-@import 'link-list';
diff --git a/packages/styles/scss/components/link-with-icon/_index.scss b/packages/styles/scss/components/link-with-icon/_index.scss
new file mode 100644
index 00000000000..07b1612725e
--- /dev/null
+++ b/packages/styles/scss/components/link-with-icon/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'link-with-icon';
+@use 'link-with-icon';
+
+@include link-with-icon.link-with-icon;
diff --git a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
index 3084434f0e1..4e5e43b59f3 100644
--- a/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
+++ b/packages/styles/scss/components/link-with-icon/_link-with-icon.scss
@@ -5,19 +5,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/components/link/link';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../lightbox-media-viewer/lightbox-media-viewer';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/link';
+@use '../../globals/vars' as *;
+@use '../lightbox-media-viewer/lightbox-media-viewer';
 
 @mixin link-with-icon {
-  .#{$prefix}--link-with-icon,
-  :host(#{$dds-prefix}-link-with-icon),
-  :host(#{$dds-prefix}-link-list-item),
-  :host(#{$dds-prefix}-link-list-item-cta),
-  :host(#{$dds-prefix}-text-cta) {
-    display: flex;
-
+  .#{$c4d-prefix}--link-with-icon,
+  :host(#{$c4d-prefix}-link-with-icon),
+  :host(#{$c4d-prefix}-link-list-item),
+  :host(#{$c4d-prefix}-link-list-item-cta),
+  :host(#{$c4d-prefix}-text-cta) {
     span {
       vertical-align: middle;
       align-self: center;
@@ -26,22 +28,27 @@
 
     svg,
     ::slotted(svg[slot='icon']) {
-      display: block;
-      margin-left: $carbon--spacing-03;
-      align-self: center;
+      display: inline;
+      margin-left: $spacing-03;
+      align-self: middle;
       fill: currentColor;
     }
 
     &.#{$prefix}--link--visited {
-      color: $visited-link;
+      color: $link-visited;
     }
 
     &.#{$prefix}--link--disabled {
       &:hover {
-        @include type-style('body-short-02');
+        @include type-style('body-compact-02');
       }
     }
 
+    // Re-define the ruleset so this wins over `.cds--link:visited`, etc.
+    .#{$prefix}--link--disabled {
+      color: $text-disabled;
+    }
+
     &.#{$prefix}--link-with-icon__icon-left,
     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon.#{$prefix}--link-with-icon__icon-left {
       display: flex;
@@ -53,20 +60,20 @@
         align-self: start;
         position: relative;
         margin-left: 0;
-        margin-right: $carbon--spacing-03;
+        margin-right: $spacing-03;
         top: 1px;
       }
     }
   }
 
   .#{$prefix}--link-with-icon__container,
-  :host(#{$dds-prefix}-callout-link-with-icon),
-  :host(#{$dds-prefix}-card-cta-footer),
-  :host(#{$dds-prefix}-card-footer),
-  :host(#{$dds-prefix}-link-with-icon),
-  :host(#{$dds-prefix}-link-list-item),
-  :host(#{$dds-prefix}-link-list-item-cta),
-  :host(#{$dds-prefix}-text-cta) {
+  :host(#{$c4d-prefix}-callout-link-with-icon),
+  :host(#{$c4d-prefix}-card-cta-footer),
+  :host(#{$c4d-prefix}-card-footer),
+  :host(#{$c4d-prefix}-link-with-icon),
+  :host(#{$c4d-prefix}-link-list-item),
+  :host(#{$c4d-prefix}-link-list-item-cta),
+  :host(#{$c4d-prefix}-text-cta) {
     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
       display: inline-block;
 
@@ -83,35 +90,35 @@
     }
   }
 
-  :host(#{$dds-prefix}-card-cta-footer)[mode='link-list'][cta-type='video'] {
+  :host(#{$c4d-prefix}-card-cta-footer)[mode='link-list'][cta-type='video'] {
     .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon span {
       display: none;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         display: inline;
       }
     }
   }
 
   .#{$prefix}--link-with-icon,
-  :host(#{$dds-prefix}-link-with-icon),
-  :host(#{$dds-prefix}-text-cta) {
+  :host(#{$c4d-prefix}-link-with-icon),
+  :host(#{$c4d-prefix}-text-cta) {
     &:not(:first-of-type) {
-      margin-left: $carbon--spacing-07;
+      margin-left: $spacing-07;
     }
 
     .#{$prefix}--link-with-icon__icon-left::slotted(svg[slot='icon']) {
-      margin-right: $carbon--spacing-03;
+      margin-right: $spacing-03;
       margin-left: 0;
     }
 
     .#{$prefix}--link-with-icon__icon-right::slotted(svg[slot='icon']) {
-      margin-left: $carbon--spacing-03;
+      margin-left: $spacing-03;
       margin-right: 0;
     }
 
     &:focus {
-      outline: 2px solid $focus;
+      outline: $spacing-01 solid $focus;
     }
 
     &:active {
@@ -119,19 +126,15 @@
     }
   }
 
-  :host(#{$dds-prefix}-link-with-icon),
-  :host(#{$dds-prefix}-text-cta) {
+  :host(#{$c4d-prefix}-link-with-icon),
+  :host(#{$c4d-prefix}-text-cta) {
     &:focus {
       outline: none;
     }
   }
 
-  :host(#{$dds-prefix}-link-with-icon),
+  :host(#{$c4d-prefix}-link-with-icon),
   .#{$prefix}--link-with-icon__container {
     display: table;
   }
 }
-
-@include exports('link-with-icon') {
-  @include link-with-icon;
-}
diff --git a/packages/styles/scss/components/list/_index.scss b/packages/styles/scss/components/list/_index.scss
new file mode 100644
index 00000000000..3e9eeaf3579
--- /dev/null
+++ b/packages/styles/scss/components/list/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'list';
+@use 'list';
+
+@include list.list;
diff --git a/packages/styles/scss/components/list/_list.scss b/packages/styles/scss/components/list/_list.scss
index a944c25bebc..f481907c292 100644
--- a/packages/styles/scss/components/list/_list.scss
+++ b/packages/styles/scss/components/list/_list.scss
@@ -5,42 +5,41 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import 'carbon-components/scss/components/list/list';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '@carbon/styles/scss/components/list';
 
 @mixin list {
   .#{$prefix}--list--ordered,
   .#{$prefix}--list--unordered {
-    @include carbon--type-style('body-long-02');
+    @include type-style('body-02');
   }
 
   .#{$prefix}--list--ordered {
-    margin-left: 1rem;
+    margin-left: $spacing-05;
 
     &:not(.#{$prefix}--list--nested) {
       > .#{$prefix}--list__item {
         &::before {
-          left: -1rem;
+          left: -$spacing-05;
         }
       }
     }
   }
 
   .#{$prefix}--list--unordered {
-    margin-left: 1rem;
+    margin-left: $spacing-05;
 
     .#{$prefix}--list__item {
       &::before {
-        left: -1rem;
+        left: -$spacing-05;
       }
     }
   }
 
   .#{$prefix}--list__item {
-    margin-top: 0.25rem;
+    margin-top: $spacing-02;
   }
 }
-
-@include exports('list') {
-  @include list;
-}
diff --git a/packages/styles/scss/components/locale-modal/_index.scss b/packages/styles/scss/components/locale-modal/_index.scss
new file mode 100644
index 00000000000..b4baea3d4b9
--- /dev/null
+++ b/packages/styles/scss/components/locale-modal/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'locale-modal';
+@use 'locale-modal';
+
+@include locale-modal.locale-modal;
diff --git a/packages/styles/scss/components/locale-modal/_locale-modal.scss b/packages/styles/scss/components/locale-modal/_locale-modal.scss
index 2f987bdc932..7a3c2795a41 100644
--- a/packages/styles/scss/components/locale-modal/_locale-modal.scss
+++ b/packages/styles/scss/components/locale-modal/_locale-modal.scss
@@ -1,274 +1,374 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../card/index';
-@import 'carbon-components/scss/components/search/search';
-@import 'carbon-components/scss/components/modal/modal';
+@use 'sass:map';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/layout/scss/convert' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/flex-grid' as *;
+
+@use '../card' as *;
+@use '@carbon/styles/scss/components/search' as *;
+@use '@carbon/styles/scss/components/modal' as *;
 
 /// Locale modal
 /// @access private
 /// @group locale-modal
 
 @mixin locale-modal {
-  :host(#{$dds-prefix}-locale-modal),
-  .#{$prefix}--locale-modal-container {
-    @include carbon--theme(
-      $carbon--theme--white,
+  :host(#{$c4d-prefix}-locale-modal) {
+    @extend .#{$prefix}--modal;
+
+    @include theme(
+      $white,
       feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      .#{$prefix}--modal-container {
-        background-color: $ui-background;
-        height: 100%;
-        min-height: 80%;
-
-        @media (max-height: rem(450px)) {
-          .#{$prefix}--locale-modal__filtering {
-            .#{$prefix}--locale-modal__filter {
-              overflow-y: initial;
+    );
+
+    .#{$prefix}--modal-container {
+      background-color: $background;
+      height: calc(100% - $spacing-07);
+      min-height: 80%;
+      padding: $spacing-05;
+
+      @include breakpoint-down('md') {
+        width: fit-content;
+      }
 
-              .#{$prefix}--locale-modal__list {
-                overflow-y: initial;
-              }
+      .#{$prefix}--modal-content {
+        padding: 0;
+        margin: 0;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+      }
+
+      @media (max-height: to-rem(450px)) {
+        .#{$c4d-prefix}--locale-modal__filtering {
+          .#{$c4d-prefix}--locale-modal__filter {
+            overflow-y: initial;
+
+            .#{$c4d-prefix}--locale-modal__list {
+              overflow-y: initial;
             }
           }
+        }
 
-          .#{$prefix}--locale-modal__search {
-            position: relative;
-          }
+        .#{$c4d-prefix}--locale-modal__search {
+          position: relative;
         }
       }
+    }
+
+    .#{$c4d-prefix}--locale-modal {
+      padding-left: $spacing-05;
+      margin-bottom: 0;
+      margin-top: $spacing-07;
+      display: flex;
 
-      .#{$prefix}--locale-modal {
-        padding-left: $carbon--spacing-05;
-        margin-bottom: $carbon--spacing-05;
-        margin-top: $carbon--spacing-07;
-        display: flex;
+      &.#{$prefix}--modal-content {
+        padding-top: $spacing-03;
+        margin-top: $spacing-07;
 
-        &.#{$prefix}--modal-content {
-          padding-right: $carbon--spacing-05;
+        @include breakpoint('lg', $grid-breakpoints) {
+          margin-top: auto;
         }
+      }
+
+      @include type-style(body-compact-02, true);
+    }
 
-        @include carbon--type-style(body-short-02, true);
+    .#{$c4d-prefix}--locale-modal__locales.#{$c4d-prefix}--locale-modal__locales-hidden {
+      display: none;
+    }
+
+    button.#{$prefix}--modal-header__label,
+    .#{$c4d-prefix}--locale-modal__back .#{$prefix}--modal-header__label {
+      padding: 0;
+      border: none;
+      background-color: transparent;
+      display: inline-flex;
+
+      &:hover {
+        cursor: pointer;
+        color: $background-brand;
+        text-decoration: underline;
       }
 
-      .#{$prefix}--locale-modal__locales.#{$prefix}--locale-modal__locales-hidden {
-        display: none;
+      &:focus {
+        outline-width: $spacing-01;
+        outline-offset: -#{$spacing-01};
+        outline-color: $background-brand;
       }
 
-      button.#{$prefix}--modal-header__label,
-      .#{$prefix}--locale-modal__back .#{$prefix}--modal-header__label {
-        padding: 0;
-        border: none;
-        background-color: transparent;
-        display: inline-flex;
-
-        &:hover {
-          cursor: pointer;
-          color: $interactive-01;
-          text-decoration: underline;
-        }
+      svg {
+        fill: currentColor;
+      }
+    }
 
-        &:focus {
-          outline-width: 2px;
-          outline-offset: -2px;
-          outline-color: $interactive-01;
-        }
+    .#{$c4d-prefix}--locale-modal__filter {
+      z-index: -1;
+      opacity: 0;
+      transform: translate3d(0, -24px, 0);
+      transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
+      display: none;
+      top: $spacing-09;
+    }
 
-        svg {
-          fill: currentColor;
-        }
-      }
+    .#{$prefix}--modal-header {
+      padding-left: $spacing-07;
+      padding-top: $spacing-05;
+    }
+
+    .#{$prefix}--modal-header__label {
+      color: $text-primary;
+      display: flex;
+      align-items: center;
 
-      .#{$prefix}--locale-modal__filter {
-        z-index: -1;
-        opacity: 0;
-        transform: translate3d(0, -24px, 0);
-        transition: transform 240ms cubic-bezier(0.4, 0.14, 1, 1);
-        display: none;
-        top: 3rem;
+      .#{$c4d-prefix}--locale-modal__label-globe {
+        width: to-rem(20px);
+        height: to-rem(20px);
+        margin-left: $spacing-02;
       }
 
-      .#{$prefix}--modal-header {
-        padding-left: $carbon--spacing-07;
-        padding-top: $carbon--spacing-05;
+      .#{$c4d-prefix}--locale-modal__label-arrow {
+        margin-right: $spacing-03;
       }
 
-      .#{$prefix}--modal-header__label {
-        color: $text-01;
-        display: flex;
-        align-items: center;
+      @include type-style('body-compact-02');
+    }
 
-        .#{$prefix}--locale-modal__label-globe {
-          width: rem(20px);
-          height: rem(20px);
-          margin-left: $spacing-02;
-        }
+    .#{$prefix}--modal-header__heading {
+      @include type-style('fluid-heading-04', true);
 
-        .#{$prefix}--locale-modal__label-arrow {
-          margin-right: $carbon--spacing-03;
-        }
+      padding: 0;
+      margin-top: $spacing-04;
 
-        @include carbon--type-style('body-short-02');
+      &:focus {
+        outline: none;
       }
+    }
+
+    #{$c4d-prefix}-expressive-modal-header {
+      padding: 3px 20% 0 $spacing-05;
+      margin-bottom: $spacing-03;
+    }
+  }
 
-      .#{$prefix}--modal-header__heading {
-        @include carbon--type-style('expressive-heading-04', true);
+  :host(#{$c4d-prefix}-locale-modal[open]) {
+    @extend .#{$prefix}--modal;
 
-        margin-top: $carbon--spacing-04;
+    opacity: 1;
+    transition: opacity $duration-moderate-02 motion(entrance, expressive),
+      visibility 0ms linear;
+    visibility: inherit;
 
-        &:focus {
-          outline: none;
-        }
-      }
+    .#{$prefix}--modal-container {
+      transform: translate3d(0, 0, 0);
+      transition: transform $duration-moderate-02 motion(entrance, expressive);
+    }
 
-      // FIXME: CardLink is being used as Card in React, need to separate this
-      .#{$prefix}--card__CTA.#{$prefix}--card-link .#{$prefix}--card__heading {
-        @include carbon--type-style('expressive-heading-03', true);
-      }
+    @media screen and (prefers-reduced-motion: reduce) {
+      transition: none;
     }
   }
-}
 
-:host(#{$prefix}-search) .#{$prefix}--search-input,
-.#{$prefix}--search--xl .#{$prefix}--search-input {
-  &::placeholder {
-    color: $text-02;
+  .#{$c4d-prefix}--locale-modal-container
+    .#{$c4d-prefix}--locale-modal__regions {
+    width: 100%;
+    margin-top: auto;
+    > .#{$prefix}--row {
+      margin-left: 0;
+      margin-right: 0;
+    }
   }
-}
 
-.#{$prefix}--locale-modal-container .#{$prefix}--locale-modal__regions {
-  width: 100%;
-  margin-top: auto;
-  > .#{$prefix}--row {
-    margin-left: 0;
-    margin-right: 0;
+  :host(#{$c4d-prefix}-region-item) .#{$prefix}--link {
+    outline: 1px solid $layer-02;
+    outline-offset: -1px;
+    max-width: none;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: stretch;
+    text-align: inherit;
+
+    &:hover.#{$prefix}--link--disabled {
+      display: flex;
+    }
+
+    &:focus-within {
+      outline-width: $spacing-01;
+      outline-offset: -#{$spacing-01};
+      outline-color: $background-brand;
+    }
+
+    @include breakpoint-down(lg) {
+      min-height: $spacing-12;
+    }
   }
-}
 
-:host(#{$dds-prefix}-region-item) .#{$prefix}--link,
-.#{$prefix}--locale-modal-container
-  .#{$prefix}--locale-modal__regions
-  .#{$prefix}--card {
-  min-height: rem(184px);
-  outline: 1px solid $ui-02;
-  outline-offset: -1px;
-  max-width: none;
-  width: 100%;
-  height: 100%;
-  display: flex;
-
-  &:focus-within {
-    outline-width: 2px;
-    outline-offset: -2px;
-    outline-color: $interactive-01;
+  :host(#{$c4d-prefix}-region-item) .#{$prefix}--card.#{$prefix}--tile {
+    border-bottom: transparent;
   }
 
-  @include carbon--breakpoint-down(lg) {
-    min-height: rem(96px);
+  :host(#{$c4d-prefix}-region-item:last-of-type)
+    .#{$prefix}--card.#{$prefix}--tile {
+    border-bottom: 1px solid $border-tile;
   }
-}
 
-:host(#{$dds-prefix}-region-item),
-.#{$prefix}--modal-container {
-  svg.#{$prefix}--card__cta {
-    color: $ui-05;
+  @include breakpoint(lg) {
+    :host(#{$c4d-prefix}-region-item) .#{$prefix}--card.#{$prefix}--tile {
+      border-bottom: 1px solid $border-tile;
+    }
+
+    :host(#{$c4d-prefix}-region-item:first-of-type)
+      .#{$prefix}--card.#{$prefix}--tile {
+      border-right: transparent;
+    }
+
+    :host(#{$c4d-prefix}-region-item:nth-of-type(3))
+      .#{$prefix}--card.#{$prefix}--tile {
+      border-top: transparent;
+      border-right: transparent;
+    }
+
+    :host(#{$c4d-prefix}-region-item:last-of-type)
+      .#{$prefix}--card.#{$prefix}--tile {
+      border-top: transparent;
+    }
   }
-}
 
-:host(#{$dds-prefix}-locale-item) a.#{$prefix}--link,
-.#{$prefix}--locale-modal-container .#{$prefix}--locale-modal__locales {
-  text-decoration: none;
-  border: 2px solid transparent;
-  display: flex;
-  min-height: $carbon--spacing-09;
-  border-bottom: 1px solid $ui-03;
-  transition: background-color $duration--fast-02 motion(standard, expressive),
-    border $duration--fast-02 motion(standard, expressive);
-
-  &:hover {
-    background-color: $hover-ui;
+  :host(#{$c4d-prefix}-region-item),
+  .#{$prefix}--modal-container {
+    svg.#{$prefix}--card__cta {
+      color: $border-inverse;
+    }
   }
 
-  &:active,
-  &:focus {
-    border: 2px solid $focus;
-    outline: none;
+  :host(#{$c4d-prefix}-regions) {
+    display: flex;
+    flex-wrap: wrap;
   }
-}
 
-:host(#{$dds-prefix}-locale-item),
-.#{$prefix}--locale-modal-container {
-  .#{$prefix}--locale-modal__locales__name {
-    width: 50%;
-    color: $text-05;
-    padding: $carbon--spacing-04 $carbon--spacing-05;
-    @include type-style('body-short-02');
+  :host(#{$c4d-prefix}-locale-item) a.#{$prefix}--link {
+    text-decoration: none;
+    border: $spacing-01 solid transparent;
+    display: flex;
+    min-height: $spacing-09;
+    border-bottom: 1px solid $layer-accent-01;
+    transition: background-color $duration-fast-02 motion(standard, expressive),
+      border $duration-fast-02 motion(standard, expressive);
+
+    &:hover {
+      background-color: $background-hover;
+    }
 
-    &:first-of-type {
-      color: $text-01;
+    &:active,
+    &:focus {
+      border: $spacing-01 solid $focus;
+      outline: none;
     }
   }
-}
 
-:host(#{$dds-prefix}-locale-search),
-.#{$prefix}--locale-modal-container .#{$prefix}--locale-modal__filtering {
-  display: flex;
-  flex-direction: column;
-  margin-top: $carbon--spacing-07;
-  overflow: hidden;
+  :host(#{$c4d-prefix}-locale-item) {
+    .#{$c4d-prefix}--locale-modal__locales__name {
+      width: 50%;
+      color: $text-helper;
+      padding: $spacing-04 $spacing-05;
+      @include type-style('body-compact-02');
 
-  .#{$prefix}--locale-modal__filter {
-    opacity: 1;
-    z-index: 1;
-    transform: translate3d(0, 0, 0);
-    transition: 240ms cubic-bezier(0, 0, 0.3, 1);
+      &:first-of-type {
+        color: $text-primary;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-locale-search) {
+    padding-top: $spacing-03;
     display: flex;
     flex-direction: column;
-    flex: 1;
+    margin-top: $spacing-07;
     overflow: hidden;
-  }
 
-  .#{$prefix}--locale-modal__regions {
-    visibility: hidden;
-    z-index: -1;
-    opacity: 0;
-    display: none;
-    transition: 240ms cubic-bezier(0, 0, 0.3, 1);
-  }
-}
+    #{$prefix}-search::part(input)::placeholder {
+      color: $text-secondary;
+    }
 
-:host(#{$dds-prefix}-locale-search),
-.#{$prefix}--locale-modal-container {
-  .#{$prefix}--locale-modal__search {
-    position: sticky;
-    top: 0;
-    background-color: $ui-background;
-    border-bottom: rem(1px) solid $ui-03;
+    .#{$c4d-prefix}--locale-modal__filter {
+      opacity: 1;
+      z-index: 1;
+      transform: translate3d(0, 0, 0);
+      transition: 240ms cubic-bezier(0, 0, 0.3, 1);
+      display: flex;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    }
 
-    .#{$prefix}--search-input {
-      background-color: $field-01;
+    .#{$c4d-prefix}--locale-modal__regions {
+      visibility: hidden;
+      z-index: -1;
+      opacity: 0;
+      display: none;
+      transition: 240ms cubic-bezier(0, 0, 0.3, 1);
     }
-  }
 
-  .#{$prefix}--locale-modal__search-text {
-    padding: $carbon--spacing-07 $carbon--spacing-05 $carbon--spacing-05;
-    min-height: $carbon--spacing-09;
+    .#{$c4d-prefix}--locale-modal__search {
+      position: sticky;
+      top: 0;
+      background-color: $background;
+      border-bottom: 1px solid $layer-accent-01;
+    }
+
+    .#{$c4d-prefix}--locale-modal__search-text {
+      padding: $spacing-07 $spacing-05 $spacing-05;
+      margin: 0;
+
+      @include type-style('label-02');
+    }
 
-    @include carbon--type-style('label-02');
+    .#{$c4d-prefix}--locale-modal__list {
+      flex: 1;
+      overflow-y: auto;
+    }
   }
 
-  .#{$prefix}--locale-modal__list {
-    flex: 1;
-    overflow-y: auto;
+  :host(#{$c4d-prefix}-locale-modal) #{$c4d-prefix}-expressive-modal-heading {
+    width: fit-content;
   }
-}
 
-@include exports('locale-modal') {
-  @include locale-modal;
+  :host(#{$c4d-prefix}-region-item) {
+    @include make-col(4, 4);
+
+    @include breakpoint('lg') {
+      @include make-col(8, 16);
+    }
+
+    .#{$prefix}--card__wrapper {
+      height: 100%;
+    }
+
+    ::slotted(div.#{$c4d-prefix}--region-item-footer) {
+      /* stylelint-disable declaration-no-important */
+      // need the !important to prevent CSS reset styles from overwritting margin
+      margin-top: auto !important;
+      width: 100%;
+      display: flex;
+      justify-content: flex-end;
+      color: $border-inverse;
+    }
+
+    ::slotted(div.#{$c4d-prefix}--region-item-footer[disabled]) {
+      color: $icon-disabled;
+    }
+  }
 }
diff --git a/packages/styles/scss/components/logo-grid/README.md b/packages/styles/scss/components/logo-grid/README.md
deleted file mode 100644
index 4ce44a5ef50..00000000000
--- a/packages/styles/scss/components/logo-grid/README.md
+++ /dev/null
@@ -1,26 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/blocks/logo-grid/index';
-```
-
-#### Elements
-
-| Class                       | Description                                                                     |
-| --------------------------- | ------------------------------------------------------------------------------- |
-| `.bx--logo-grid__container` | Element containing all logo grid rows                                           |
-| `.bx--logo-grid__wrapper`   | Wrapper for Logo placeholders                                                   |
-| `.bx--logo-grid__row`       | Horizontal divisions across the viewport                                        |
-| `.bx--logo-grid__col`       | Vertical divisions across the viewport and change in width at different screen. |
-| `.bx--logo-grid__link`      | Url of the Logo                                                                 |
-| `.bx--logo-grid__logo`      | Placeholder for logo grid                                                       |
-
-#### Blocks
-
-| Class            | Description                                         |
-| ---------------- | --------------------------------------------------- |
-| `.bx--logo-grid` | Highest level class name for the logo grid pattern. |
diff --git a/packages/styles/scss/components/logo-grid/_index.scss b/packages/styles/scss/components/logo-grid/_index.scss
new file mode 100644
index 00000000000..2d296b8d293
--- /dev/null
+++ b/packages/styles/scss/components/logo-grid/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'logo-grid';
+@use 'logo-grid';
+
+@include logo-grid.logo-grid;
diff --git a/packages/styles/scss/components/logo-grid/_logo-grid.scss b/packages/styles/scss/components/logo-grid/_logo-grid.scss
index 4bb51f255a1..025a2887116 100644
--- a/packages/styles/scss/components/logo-grid/_logo-grid.scss
+++ b/packages/styles/scss/components/logo-grid/_logo-grid.scss
@@ -5,29 +5,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/hang';
-@import '../../globals/utils/aspect-ratio';
-@import '../image/image';
-@import '../../internal/content-block/content-block';
+@use 'sass:math';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../globals/utils/aspect-ratio';
+@use '../image';
+@use '../../internal/content-block';
 
 @mixin logo-grid {
   .#{$prefix}--logo-grid,
-  :host(#{$dds-prefix}-logo-grid) {
+  :host(#{$c4d-prefix}-logo-grid) {
     .#{$prefix}--content-block {
       padding-top: 0;
       padding-bottom: 0;
-      background: $inverse-01;
+      background: $icon-inverse;
     }
 
     .#{$prefix}--content-block__heading,
     .#{$prefix}--content-layout--logo-grid ::slotted([slot]) {
-      margin: $layout-05 0 0;
-      color: $text-01;
+      margin: $spacing-10 0 0;
+      color: $text-primary;
 
-      @include carbon--breakpoint-down('md') {
-        margin: $layout-03 0 0;
+      @include breakpoint-down(md) {
+        margin: $spacing-07 0 0;
       }
     }
 
@@ -38,13 +45,13 @@
     .#{$prefix}--content-block__cta {
       margin-top: $spacing-09;
 
-      @include carbon--make-col-ready;
-      @include carbon--make-col(1, 1);
+      @include make-col-ready;
+      @include make-col(1, 1);
 
       padding-left: $spacing-05;
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(1, 3);
+      @include breakpoint(md) {
+        @include make-col(1, 3);
       }
     }
 
@@ -55,13 +62,13 @@
 
     .#{$prefix}--image {
       display: block;
-      background: $inverse-01;
+      background: $icon-inverse;
       overflow-y: hidden;
       padding-top: aspect-ratio(288px, 216px);
       position: relative;
 
       &:active img {
-        border: 1px $ui-03 solid;
+        border: 1px $layer-accent-01 solid;
       }
 
       img {
@@ -75,7 +82,7 @@
     }
   }
 
-  :host(#{$dds-prefix}-logo-grid) {
+  :host(#{$c4d-prefix}-logo-grid) {
     .#{$prefix}--content-block__cta-row[hidden] {
       display: none;
     }
@@ -91,23 +98,23 @@
     display: block;
 
     &:active .#{$prefix}--logo-grid__logo {
-      box-shadow: inset 0 0 0 1px $ui-03;
+      box-shadow: inset 0 0 0 1px $layer-accent-01;
     }
   }
 
   .#{$prefix}--logo-grid__row {
     display: grid;
-    margin-left: calc(-1 * #{$carbon--grid-gutter} / 2);
-    margin-right: calc(-1 * #{$carbon--grid-gutter} / 2);
+    margin-left: calc(-1 * math.div($grid-gutter, 2));
+    margin-right: calc(-1 * math.div($grid-gutter, 2));
     grid-template-columns: repeat(2, 1fr);
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       &.#{$prefix}--logo-grid__4-columns {
         grid-template-columns: repeat(4, 1fr);
       }
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       grid-template-columns: repeat(3, 1fr);
 
       &.#{$prefix}--logo-grid__4-columns {
@@ -117,25 +124,25 @@
   }
 
   .#{$prefix}--logo-grid__col,
-  :host(#{$dds-prefix}-logo-grid-item) {
+  :host(#{$c4d-prefix}-logo-grid-item) {
     /* stylelint-disable */
     aspect-ratio: var(--logo-ratio, '16/9');
     /* stylelint-enable */
-    padding-left: $carbon--grid-gutter--condensed / 2;
-    padding-right: $carbon--grid-gutter--condensed / 2;
-    @include carbon--breakpoint('sm') {
-      padding-left: $carbon--grid-gutter / 2;
-      padding-right: $carbon--grid-gutter / 2;
+    padding-left: math.div($grid-gutter, 2);
+    padding-right: math.div($grid-gutter, 2);
+    @include breakpoint(sm) {
+      padding-left: math.div($grid-gutter, 2);
+      padding-right: math.div($grid-gutter, 2);
     }
   }
 
-  :host(#{$dds-prefix}-logo-grid-item) {
+  :host(#{$c4d-prefix}-logo-grid-item) {
     display: flex;
     align-items: stretch;
     justify-content: center;
-    margin-top: $carbon--spacing-07;
-    // @include carbon--breakpoint-down('md') {
-    //   margin-bottom: $carbon--spacing-07;
+    margin-top: $spacing-07;
+    // @include breakpoint-down(md) {
+    //   margin-bottom: $spacing-07;
     // }
     picture,
     img {
@@ -146,11 +153,11 @@
   }
 
   .#{$prefix}--logo-grid__heading {
-    @include carbon--type-style('expressive-heading-05', true);
+    @include type-style('fluid-heading-05', true);
 
     width: 90%;
-    margin-top: $carbon--spacing-07;
-    margin-bottom: $carbon--spacing-07;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-07;
   }
 
   .#{$prefix}--content-layout__body {
@@ -160,15 +167,15 @@
   .#{$prefix}--logo-grid__wrapper,
   .#{$prefix}--content-layout--logo-grid {
     width: 100%;
-    margin-bottom: $layout-07;
-    @include carbon--breakpoint-down('md') {
-      margin-bottom: $layout-06;
+    margin-bottom: $spacing-13;
+    @include breakpoint-down(md) {
+      margin-bottom: $spacing-12;
     }
   }
 
-  :host(#{$dds-prefix}-logo-grid-link) ::slotted(svg) {
+  :host(#{$c4d-prefix}-logo-grid-link) ::slotted(svg) {
     margin-top: auto;
-    fill: $link-01;
+    fill: $link-primary;
   }
 
   .#{$prefix}--content-layout--logo-grid {
@@ -179,11 +186,8 @@
       'footer' auto / 1fr;
   }
 
-  dds-hr,
+  cds-hr,
   .#{$prefix}--hr {
     @include hang;
   }
 }
-@include exports('logo-grid') {
-  @include logo-grid;
-}
diff --git a/packages/styles/scss/components/masthead/_index.scss b/packages/styles/scss/components/masthead/_index.scss
new file mode 100644
index 00000000000..348dc2787d4
--- /dev/null
+++ b/packages/styles/scss/components/masthead/_index.scss
@@ -0,0 +1,32 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'masthead';
+@use 'masthead';
+@forward 'masthead-l1';
+@use 'masthead-l1';
+@forward 'masthead-search';
+@use 'masthead-search';
+@forward '../search-with-typeahead';
+@use '../search-with-typeahead';
+@forward 'masthead-leftnav';
+@use 'masthead-leftnav';
+@forward 'masthead-megamenu';
+@use 'masthead-megamenu';
+@forward 'masthead-megamenu-scroll';
+@use 'masthead-megamenu-scroll';
+@forward 'masthead-top-nav-name';
+@use 'masthead-top-nav-name';
+@forward 'vars';
+
+@include masthead.masthead;
+@include masthead-l1.masthead-l1;
+@include masthead-search.masthead-search;
+@include masthead-leftnav.masthead-leftnav;
+@include masthead-megamenu.masthead-megamenu;
+@include masthead-megamenu-scroll.masthead-megamenu-scroll;
+@include masthead-top-nav-name.masthead-top-nav-name;
diff --git a/packages/styles/scss/components/masthead/_masthead-l1.scss b/packages/styles/scss/components/masthead/_masthead-l1.scss
index 6bb4c93be77..11eacd6935e 100644
--- a/packages/styles/scss/components/masthead/_masthead-l1.scss
+++ b/packages/styles/scss/components/masthead/_masthead-l1.scss
@@ -1,12 +1,21 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/themes';
-@import '../../globals/vars';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '../../globals/vars' as *;
+@use 'vars' as *;
 
 /// @access private
 /// @group dotcom ui-shell Masthead L1
@@ -14,160 +23,860 @@
 $search-transition: cubic-bezier(0.2, 0, 0.38, 0.9);
 $search-transition-timing: 95ms;
 
+@mixin mobile-button-base {
+  border: none;
+  border-bottom: 1px solid $layer-accent-01;
+  text-decoration: none;
+  display: flex;
+  justify-content: space-between;
+  padding: $spacing-05;
+  width: 100%;
+  min-height: $spacing-07;
+  gap: $spacing-06;
+
+  &:focus-visible {
+    outline: $spacing-01 solid $focus;
+    outline-offset: calc(-1 * #{$spacing-01});
+  }
+}
+
+@mixin desktop-button-base {
+  appearance: none;
+  background: transparent;
+  border: none;
+  text-decoration: none;
+  height: 100%;
+  column-gap: $spacing-03;
+  padding: $spacing-05;
+}
+
 @mixin masthead-l1 {
+  // Set up variables to store column-widths without using flexbox
+
   .#{$prefix}--masthead__l1,
-  :host(#{$dds-prefix}-masthead-l1) {
-    @include carbon--theme($carbon--theme--white, true);
+  :host(#{$c4d-prefix}-masthead-l1) {
+    /* stylelint-disable-next-line length-zero-no-unit */
+    --page-width: calc(100vw - var(--scrollbar-width, 0px));
+    --grid-width: var(--page-width);
+    --column-width: var(--page-width);
+    --gutter-width: 1rem;
+
+    @include breakpoint-up(sm) {
+      --column-width: calc(var(--grid-width) / 4);
+    }
+
+    @include breakpoint-up(md) {
+      --grid-width: calc(var(--page-width) - 2rem);
+      --column-width: calc(var(--grid-width) / 8);
+    }
+
+    @include breakpoint-up(lg) {
+      --column-width: calc(var(--grid-width) / 16);
+    }
+
+    @include breakpoint-up(max) {
+      --grid-width: calc(99rem - 3rem);
+    }
+
+    @include theme($white, true);
 
-    display: flex;
     position: relative;
-    max-width: 98rem;
-    margin-left: auto;
-    margin-right: auto;
-    height: $layout-04;
-    background-color: $ui-02;
+    background-color: $layer-02;
     transition-timing-function: $search-transition;
     overflow: visible;
+  }
 
-    &::after {
-      content: '';
-      position: absolute;
-      height: rem(1px);
-      bottom: rem(-1px);
-      left: calc(-50vw + 50%);
-      right: calc(-50vw + 50%);
-      background-color: $ui-03;
+  // L1 Mobile Styles
+  @media screen and (max-width: 799px) {
+    .#{$prefix}--masthead__l1-inner-container {
+      width: 100%;
     }
-  }
 
-  .#{$prefix}--masthead__l1-inner-container {
-    width: 100%;
-    display: flex;
+    .#{$prefix}--masthead__l1-title {
+      @include type-style(productive-heading-01);
 
-    &::before {
-      content: '';
-      position: absolute;
-      background-color: $ui-background;
-      height: 48px;
-      left: calc(-50vw + 50%);
-      right: 100%;
-      z-index: 1;
+      background-color: transparent;
+      border: none;
+      border-bottom: 1px solid $layer-accent-01;
+      color: $text-primary;
+      display: flex;
+      justify-content: space-between;
+      padding: $spacing-05;
+      width: 100%;
+      gap: $spacing-06;
+
+      &:hover {
+        background-color: $background-hover;
+      }
+
+      &:active {
+        background-color: $background-active;
+      }
+
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &:disabled {
+        color: $text-disabled;
+        border-bottom-color: $border-disabled;
+      }
+
+      &[active] {
+        border-bottom: 3px solid $focus;
+      }
+
+      &.is-open {
+        svg {
+          transform: rotateX(180deg);
+        }
+      }
+
+      svg {
+        color: $icon-primary;
+      }
     }
 
-    &::after {
-      content: '';
-      position: absolute;
-      background-color: $ui-background;
-      height: 48px;
-      left: 100%;
-      right: calc(-50vw + 50%);
+    .#{$prefix}--masthead__l1-dropdown {
+      &:not(.is-open) {
+        display: none;
+      }
+
+      // Height of viewport, minus the L0/L1 combo, minus additional space to match L0 megapanels
+      max-height: calc(100vh - 98px - #{$spacing-10} - #{$spacing-09});
+      overflow-y: auto;
     }
-  }
 
-  .#{$prefix}--masthead__l1-name,
-  :host(#{$dds-prefix}-masthead-l1-name) {
-    display: flex;
-    height: 100%;
-    z-index: 1;
-    background-color: $ui-02;
-    color: $text-04;
-    padding: 0 0 0 rem(12px);
-    align-items: stretch;
-    white-space: nowrap;
+    .#{$prefix}--masthead__l1-dropdown-item {
+      @include type-style(body-short-01);
+      @include mobile-button-base;
+
+      background-color: transparent;
+      color: $text-secondary;
+
+      &:hover {
+        background-color: $background-hover;
+        color: $text-primary;
+      }
+
+      &:active {
+        background-color: $background-active;
+        color: $text-primary;
+      }
+
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &:disabled {
+        color: $text-disabled;
+        border-bottom-color: $border-disabled;
+      }
+
+      &[active] {
+        position: relative;
+
+        &::after {
+          content: '';
+          display: block;
+          position: absolute;
+          inset-inline-start: 0;
+          inset-block: 0;
+          width: 3px;
+          background-color: $focus;
+        }
+      }
+
+      &.is-open {
+        background-color: $background-selected;
+        color: $text-primary;
 
-    @include carbon--breakpoint-down(lg) {
-      padding-left: 0;
+        svg {
+          transform: rotateX(180deg);
+          color: $icon-primary;
+        }
+      }
+
+      svg {
+        color: $icon-secondary;
+      }
     }
 
-    &[aria-selected='true'] span::after {
-      content: '';
-      display: block;
-      position: absolute;
-      box-sizing: border-box;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      height: rem(3px);
-      background-color: $link-01;
+    .#{$prefix}--masthead__l1-dropdown-subsection {
+      &:not(.is-open) {
+        display: none;
+      }
+
+      padding-bottom: $spacing-07;
+      border-bottom: 1px solid $layer-accent-01;
+
+      .#{$prefix}--masthead__l1-dropdown-item {
+        padding-block: $spacing-04;
+        padding-inline-start: $spacing-05;
+        padding-inline-end: $spacing-08;
+        border-bottom: none;
+        color: $text-secondary;
+
+        &:hover,
+        &:active {
+          color: $text-primary;
+        }
+      }
+
+      .#{$prefix}--masthead__l1-dropdown-viewall {
+        margin-top: $spacing-07;
+      }
     }
-  }
 
-  .#{$prefix}--masthead__l1-name-title {
-    display: flex;
-    align-items: stretch;
-    min-width: rem(67px);
-    white-space: nowrap;
-    position: relative;
+    .#{$prefix}--masthead__l1-dropdown-announcement {
+      @include type-style(body-short-01);
 
-    a {
-      @include type-style('productive-heading-02');
+      margin: 0 $spacing-05 $spacing-05;
+      padding: $spacing-05 0;
+      border-bottom: 1px solid $layer-accent-01;
+    }
 
-      display: flex;
-      align-items: center;
-      color: $text-01;
-      position: relative;
+    .#{$prefix}--masthead__l1-dropdown-heading {
+      @include type-style(productive-heading-01);
+
+      color: $text-primary;
+
+      // Headings that are not links.
+      &.#{$prefix}--masthead__l1-dropdown-heading--no-link {
+        padding-block: $spacing-04;
+        padding-inline-start: $spacing-05;
+        padding-inline-end: $spacing-08;
+        width: 100%;
+        min-height: $spacing-07;
+      }
+
+      .#{$prefix}--masthead__l1-dropdown-item {
+        @include type-style(productive-heading-01);
+
+        color: inherit;
+        justify-content: flex-start;
+        padding-block: $spacing-04;
+        padding-inline-start: $spacing-05;
+        padding-inline-end: $spacing-08;
+        width: 100%;
+        min-height: $spacing-07;
+        gap: $spacing-03;
+
+        svg {
+          fill: $icon-primary;
+        }
+      }
+
+      &:not(:nth-of-type(1)) {
+        margin-top: $spacing-07;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-viewall {
+      @include type-style(body-short-01);
+
+      background-color: transparent;
       text-decoration: none;
-      padding: 0 $carbon--spacing-05;
+      display: flex;
+      justify-content: flex-start;
+      padding: $spacing-05;
+      width: 100%;
+      min-height: $spacing-07;
+      gap: $spacing-03;
 
-      &:active,
       &:focus {
-        outline: 2px solid $interactive-01;
-        outline-offset: -2px;
+        text-decoration: underline;
+      }
+
+      &:hover {
+        background-color: $background-hover;
+        text-decoration: underline;
+      }
+
+      &:active {
+        background-color: $background-active;
+        text-decoration: underline;
+      }
+
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
       }
     }
 
-    &:hover {
-      background-color: $hover-ui;
+    .#{$prefix}--masthead__l1-dropdown-login {
+      @include mobile-button-base;
+      @include type-style(body-short-01);
+
+      color: $button-primary;
+
+      svg {
+        color: inherit;
+      }
+
+      &:hover {
+        color: $link-primary-hover;
+        background-color: $background-hover;
+      }
+
+      &:focus-visible {
+        color: $button-primary;
+      }
+
+      &:active {
+        color: $button-primary-active;
+        background-color: $background-active;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-cta {
+      @include mobile-button-base;
+      @include type-style(body-short-01);
+
+      background-color: $background-brand;
+      color: $layer-02;
+
+      svg {
+        color: inherit;
+      }
+
+      &:hover {
+        background-color: $button-primary-hover;
+      }
+
+      &:focus-visible {
+        outline-color: $layer-02;
+        outline-offset: calc(-1 * #{$spacing-02});
+      }
+
+      &:active {
+        color: $layer-02;
+        background-color: $button-primary-active;
+      }
+
+      &:disabled {
+        background-color: $text-disabled;
+      }
     }
   }
 
-  .#{$prefix}--masthead__l1-nav {
-    padding-left: 0;
+  // L1 Desktop Styles
+  @media screen and (min-width: 800px) {
+    .#{$prefix}--masthead__l1,
+    :host(#{$c4d-prefix}-masthead-l1) {
+      display: block;
+      border-bottom: 1px solid $layer-accent-01;
+    }
+
+    .#{$prefix}--masthead__l1-inner-container {
+      width: 100%;
+      max-width: 98rem;
+      margin: 0 auto;
+      height: $spacing-10;
+      display: grid;
+      grid-template-areas: 'padding platform menu spacer login cta';
+      grid-template-columns: $spacing-05 auto minmax(1px, 1fr) $spacing-08 auto auto;
+      position: relative;
+      z-index: 1;
+
+      > * {
+        position: relative;
+        z-index: 1;
+      }
+
+      > .#{$prefix}--masthead__l1-menu-container-mask {
+        content: '';
+        position: absolute;
+        display: block;
+        background-color: $background;
+        z-index: 2;
+        inset-block: 0;
+
+        &--start {
+          inset-inline-start: -50vw;
+          inset-inline-end: 100%;
+        }
+
+        &--end {
+          inset-inline-start: 100%;
+          inset-inline-end: -50vw;
+        }
+      }
+
+      &::before,
+      &::after {
+        content: '';
+        display: block;
+        position: relative;
+        z-index: 1;
+        background-color: $background;
+      }
 
-    li:not([role='none']) {
-      > a {
-        align-items: flex-end;
+      &::before {
+        grid-area: padding;
+      }
+
+      &::after {
+        grid-area: spacer;
       }
     }
 
-    a.#{$prefix}--header__menu-item {
+    .#{$prefix}--masthead__background-wrapper {
+      background-color: $background;
+    }
+
+    .#{$prefix}--masthead__l1-title {
+      @include type-style(productive-heading-01);
+      @include desktop-button-base;
+
+      display: inline-flex;
+      grid-area: platform;
+      height: 100%;
+      color: $text-primary;
+      border-bottom: 3px solid transparent;
+      padding-bottom: calc(#{$spacing-05} - #{$spacing-01});
+      align-items: flex-end;
+      background-color: $background;
+
+      &[active] {
+        border-bottom-color: $focus;
+      }
+
       &:hover {
-        background-color: $hover-ui;
+        background-color: $background-hover;
       }
 
-      &:focus {
-        border-color: $interactive-01;
+      &:active {
+        background-color: $background-active;
       }
 
-      svg {
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+    }
+
+    .#{$prefix}--masthead__l1-menu-container-outer {
+      grid-area: menu;
+      display: flex;
+      z-index: 0;
+    }
+
+    .#{$prefix}--masthead__l1-menu-container-scroller {
+      @include desktop-button-base;
+
+      padding: 0;
+      background-color: $background;
+      z-index: 1;
+    }
+
+    .#{$prefix}--masthead__l1-menu-container-scroller-inner {
+      display: inline-flex;
+      background-color: $background;
+      flex-shrink: 0;
+      padding: $spacing-05 $spacing-03;
+      align-items: flex-end;
+      height: 100%;
+      width: 100%;
+
+      &:hover {
+        color: $text-primary;
+        background-color: $background-hover;
+      }
+
+      &:active {
+        color: $text-primary;
+        background-color: $background-active;
+      }
+
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &[hidden] {
+        /* stylelint-disable-next-line declaration-no-important */
+        display: none !important;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-menu-container-inner {
+      height: 100%;
+      flex-shrink: 1;
+      flex-grow: 1;
+      z-index: 0;
+    }
+
+    .#{$prefix}--masthead__l1-menu {
+      position: absolute;
+      display: flex;
+      height: 100%;
+      transition: translate $search-transition-timing $search-transition;
+
+      > li {
         position: relative;
-        top: -2px;
-        fill: $text-01;
       }
     }
 
-    a.#{$prefix}--header__menu-title[aria-expanded='true'] {
-      background-color: $ui-03;
-      + .#{$prefix}--header__menu {
-        li {
-          background-color: $ui-background;
+    .#{$prefix}--masthead__l1-item {
+      @include type-style(body-short-01);
+      @include desktop-button-base;
 
-          &:hover {
-            background-color: $hover-ui;
-          }
+      display: inline-flex;
+      background-color: $background;
+      color: $text-secondary;
+      border: 1px solid transparent;
+      border-top: none;
+      align-items: flex-end;
+      white-space: nowrap;
+
+      &[active]::after {
+        content: '';
+        position: absolute;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        height: 3px;
+        background-color: $focus;
+      }
+
+      &:hover {
+        color: $text-primary;
+        background-color: $background-hover;
+      }
+
+      &:active {
+        color: $text-primary;
+        background-color: $background-active;
+      }
 
-          a.#{$prefix}--header__menu-item {
-            &:hover {
-              color: $text-01;
-              background-color: $hover-ui;
-            }
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &:is([disabled], .is-disabled) {
+        color: $text-disabled;
+      }
+
+      &.is-open {
+        height: calc(100% + 3px);
+        padding-bottom: calc(#{$spacing-05} + 3px);
+        border-color: #c6c6c6;
+        box-shadow: 0 0 6px #c6c6c6;
+        clip-path: polygon(
+          calc(0% - 6px) calc(0% - 6px),
+          calc(100% + 6px) calc(0% - 6px),
+          calc(100% + 6px) 100%,
+          calc(0% - 6px) 100%
+        );
+
+        svg {
+          rotate: 180deg;
+        }
+      }
+
+      svg {
+        color: inherit;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown {
+      position: absolute;
+      inset-block-start: calc(100% + 1px);
+      inset-inline-start: 0;
+      width: 320;
+      background-color: $background;
+      border: 1px solid #c6c6c6;
+      border-top: none;
+      box-shadow: 0 0 6px #c6c6c6;
+      clip-path: polygon(
+        calc(0% - 6px) 0%,
+        calc(100% + 6px) 0%,
+        calc(100% + 6px) calc(100% + 6px),
+        calc(0% - 6px) calc(100% + 6px)
+      );
+      padding: $spacing-05 0 0;
+      max-width: calc(100vw - (2 * #{$spacing-05}));
+      visibility: hidden;
+      overflow-y: auto;
+
+      &.is-open {
+        visibility: visible;
+      }
+
+      &.#{$prefix}--masthead__l1-dropdown__1-col {
+        width: calc(2 * var(--column-width));
+      }
+
+      &.#{$prefix}--masthead__l1-dropdown__2-col {
+        width: calc(4 * var(--column-width));
+      }
+
+      &.#{$prefix}--masthead__l1-dropdown__3-col {
+        width: calc(6 * var(--column-width));
+      }
+
+      @media screen and (min-width: 66rem) {
+        &.#{$prefix}--masthead__l1-dropdown__1-col {
+          width: calc(4 * var(--column-width));
+        }
+
+        &.#{$prefix}--masthead__l1-dropdown__2-col {
+          width: calc(8 * var(--column-width));
+        }
+
+        &.#{$prefix}--masthead__l1-dropdown__3-col {
+          width: calc(12 * var(--column-width));
+        }
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-links {
+      column-rule: 1px solid $layer-accent-01;
+      padding-bottom: $spacing-08;
+
+      .#{$prefix}--masthead__l1-dropdown__2-col & {
+        column-count: 2;
+        column-gap: 0;
+      }
+
+      .#{$prefix}--masthead__l1-dropdown__3-col & {
+        column-count: 3;
+        column-gap: 0;
+      }
+
+      > * {
+        break-inside: avoid;
+      }
+
+      // Contains a wide col child.
+      &.#{$prefix}--masthead__l1-dropdown--has-column-wide {
+        display: grid;
+        grid-template-columns: repeat(3, 1fr);
+
+        .#{$prefix}--masthead__l1-dropdown-column-wide {
+          grid-column: span 2;
+
+          .#{$prefix}--masthead__l1-dropdown-menu-items {
+            columns: 2;
+            column-gap: 0;
           }
         }
+
+        > *:nth-child(2) {
+          border-inline-start: 1px solid $layer-accent-01;
+        }
       }
     }
-  }
-}
 
-@include exports('masthead-l1') {
-  @include masthead-l1;
+    .#{$prefix}--masthead__l1-dropdown-announcement {
+      @include type-style(body-short-01);
+
+      margin: 0 $spacing-05 $spacing-05;
+      padding-bottom: $spacing-05;
+      border-bottom: 1px solid $layer-accent-01;
+
+      :is(h1, h2, h3, h4, h5, h6, strong, b) {
+        @include type-style(productive-heading-01);
+      }
+
+      :focus {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-menu-items {
+      padding-bottom: $spacing-06;
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-heading {
+      @include type-style(productive-heading-03);
+
+      color: $text-primary;
+
+      .#{$prefix}--masthead__l1-dropdown-item {
+        @include type-style(productive-heading-03);
+        @include desktop-button-base;
+
+        color: inherit;
+        padding: $spacing-03 $spacing-05;
+        margin-bottom: $spacing-03;
+
+        svg {
+          vertical-align: middle;
+          position: relative;
+          bottom: to-rem(2px);
+          margin-inline-start: $spacing-03;
+        }
+      }
+
+      // Headings that do not contain links.
+      &.#{$prefix}--masthead__l1-dropdown-heading--no-link {
+        padding: $spacing-03 $spacing-05;
+        margin-bottom: $spacing-03;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-heading-desc {
+      @include type-style(body-short-01);
+
+      display: block;
+      color: $text-secondary;
+      padding: 0 $spacing-05;
+      margin: calc(-1 * #{$spacing-03}) 0 $spacing-03;
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-item {
+      @include type-style(body-short-01);
+      @include desktop-button-base;
+
+      display: inline-block;
+      padding: $spacing-03 $spacing-05;
+      color: $text-secondary;
+      width: 100%;
+
+      &:hover {
+        color: $text-primary;
+        background-color: $background-hover;
+      }
+
+      &:active {
+        color: $text-secondary;
+      }
+
+      &:active,
+      &:focus-visible {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+      svg {
+        color: inherit;
+      }
+
+      .#{$prefix}--masthead__l1-dropdown-item-title {
+        @include type-style(productive-heading-01);
+
+        display: block;
+      }
+
+      .#{$prefix}--masthead__l1-dropdown-item-description {
+        display: block;
+        white-space: break-spaces;
+        color: $text-secondary;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-dropdown-viewall {
+      @include type-style(body-short-01);
+
+      display: flex;
+      gap: $spacing-03;
+      align-content: center;
+      padding: $spacing-05;
+      text-decoration: none;
+      color: $link-primary;
+      border-top: 1px solid $layer-accent-01;
+
+      &:hover {
+        color: $link-primary-hover;
+        text-decoration: underline;
+      }
+
+      &:active,
+      &:active:visited,
+      &:active:visited:hover {
+        color: $text-primary;
+        text-decoration: underline;
+      }
+
+      &:focus {
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &:visited {
+        color: $link-primary;
+      }
+
+      &:visited:hover {
+        color: $link-primary-hover;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-cta {
+      @include desktop-button-base;
+      @include type-style(body-short-01);
+
+      display: inline-flex;
+      grid-area: cta;
+      background-color: $background-brand;
+      color: $layer-02;
+      align-items: flex-end;
+
+      svg {
+        color: inherit;
+      }
+
+      &:hover {
+        background-color: $button-primary-hover;
+      }
+
+      &:focus-visible {
+        outline: $spacing-01 solid $layer-02;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &:active {
+        color: $layer-02;
+        background-color: $button-primary-active;
+      }
+
+      &:disabled {
+        background-color: $text-disabled;
+      }
+    }
+
+    .#{$prefix}--masthead__l1-login {
+      @include desktop-button-base;
+      @include type-style(body-short-01);
+
+      display: inline-flex;
+      grid-area: login;
+      color: $button-primary;
+      background-color: $background;
+      align-items: flex-end;
+
+      svg {
+        color: inherit;
+      }
+
+      &:hover {
+        color: $link-primary-hover;
+        background-color: $background-hover;
+      }
+
+      &:focus-visible {
+        color: $button-primary;
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+
+      &:active {
+        color: $button-primary-active;
+        background-color: $background-active;
+        outline: $spacing-01 solid $focus;
+        outline-offset: calc(-1 * #{$spacing-01});
+      }
+    }
+  }
 }
diff --git a/packages/styles/scss/components/masthead/_masthead-leftnav.scss b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
index 179da57458b..0701b25acbe 100644
--- a/packages/styles/scss/components/masthead/_masthead-leftnav.scss
+++ b/packages/styles/scss/components/masthead/_masthead-leftnav.scss
@@ -1,15 +1,25 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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.
  */
 
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+
 // Include left navigation component
 /// @access private
 /// @group masthead
 
-@mixin masthead-sidenav {
+@mixin masthead-leftnav {
   .#{$prefix}--masthead__focus {
     opacity: 0;
     border: none;
@@ -17,13 +27,13 @@
   }
 
   .#{$prefix}--masthead .#{$prefix}--side-nav__navigation {
-    height: calc(100% - #{mini-units(6)});
+    height: calc(100% - #{$spacing-09});
 
     > nav {
       height: 100%;
     }
 
-    @include carbon--breakpoint-up(800px) {
+    @include breakpoint-up(800px) {
       display: none;
     }
   }
@@ -37,16 +47,16 @@
 
     &.#{$prefix}--header__action--active {
       border-color: transparent;
-      background-color: $ui-background;
+      background-color: $background;
 
       &:focus {
         border-color: $focus;
-        background-color: $hover-ui;
+        background-color: $background-hover;
       }
 
       + .#{$prefix}--header__logo {
         z-index: 6001;
-        margin-left: $carbon--spacing-09;
+        margin-left: $spacing-09;
       }
 
       .#{$prefix}--side-nav__close {
@@ -59,15 +69,15 @@
     }
 
     &.#{$prefix}--masthead__header--search-active {
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         display: none;
       }
     }
 
-    @include carbon--breakpoint-between('md', 'lg') {
+    @include breakpoint-between('md', 'lg') {
       + .#{$prefix}--header__logo {
         a {
-          padding: 0 $carbon--spacing-05;
+          padding: 0 $spacing-05;
         }
       }
     }
@@ -84,19 +94,19 @@
       visibility: hidden;
       transform: translateZ(0.0001px);
       /* stylelint-disable-next-line  time-min-milliseconds */
-      transition: visibility 1ms motion(exit, productive) $duration--fast-02,
-        inset-inline-start $duration--fast-02 motion(exit, productive) 1ms;
+      transition: visibility 1ms motion(exit, productive) $duration-fast-02,
+        inset-inline-start $duration-fast-02 motion(exit, productive) 1ms;
 
       &:not(.#{$prefix}--side-nav--fixed):hover {
-        @include carbon--breakpoint-down(md) {
+        @include breakpoint-down(md) {
           max-width: 100vw;
           width: 100vw;
         }
       }
 
       .#{$prefix}--header__logo {
-        height: 3rem;
-        padding-left: $carbon--spacing-09;
+        height: $spacing-09;
+        padding-left: $spacing-09;
       }
     }
 
@@ -114,7 +124,7 @@
 
     .#{$prefix}--side-nav__item {
       height: auto;
-      min-height: $container-04;
+      min-height: $spacing-09;
 
       .#{$prefix}--side-nav__submenu {
         height: 100%;
@@ -124,16 +134,16 @@
     .#{$prefix}--side-nav__overlay {
       top: 0;
       z-index: 1000;
-      @include carbon--breakpoint-down(md) {
-        background-color: $ui-background;
+      @include breakpoint-down(md) {
+        background-color: $background;
       }
     }
 
     .#{$prefix}--side-nav__overlay-active {
       display: none;
-      @include carbon--breakpoint-down(800px) {
+      @include breakpoint-down(800px) {
         display: block;
-        background-color: $overlay-01;
+        background-color: $overlay;
       }
     }
 
@@ -144,23 +154,23 @@
       transform: translateZ(0.0001px);
       /* stylelint-disable-next-line time-min-milliseconds */
       transition: visibility 1ms motion(exit, productive) 0ms,
-        inset-inline-start $duration--fast-02 motion(exit, productive) 1ms;
+        inset-inline-start $duration-fast-02 motion(exit, productive) 1ms;
     }
 
     .#{$prefix}--side-nav--ux,
     .#{$prefix}--side-nav,
     .#{$prefix}--side-nav--expanded {
-      @include carbon--breakpoint-down(md) {
+      @include breakpoint-down(md) {
         max-width: 100vw;
         width: 100vw;
-        border-top: 1px solid $ui-03;
+        border-top: 1px solid $layer-accent-01;
       }
     }
   }
 
-  :host(#{$dds-prefix}-left-nav-menu-section),
+  :host(#{$c4d-prefix}-left-nav-menu-section),
   .#{$prefix}--side-nav__menu-section {
-    @include carbon--theme($carbon--theme--white, true);
+    @include theme($white, true);
 
     position: absolute;
     width: 100%;
@@ -168,56 +178,56 @@
     overflow-y: auto;
     z-index: 0;
     inset-inline-start: -100%;
-    background-color: $ui-background;
+    background-color: $background;
     padding-bottom: $spacing-09;
     transform: translateZ(0.0001px);
-    transition: inset-inline-start $duration--moderate-01
+    transition: inset-inline-start $duration-moderate-01
       motion(exit, productive);
 
     a {
-      @include carbon--type-style(body-short-02);
+      @include type-style(body-compact-02);
 
-      padding-left: $carbon--spacing-05;
-      height: carbon--mini-units(6);
+      padding-left: $spacing-05;
+      height: $spacing-09;
 
       &:hover {
         text-decoration: none;
-        background-color: $shell-side-nav-bg-04;
+        background-color: $background-hover;
       }
     }
 
     .#{$prefix}--masthead__side-nav--submemu-title {
-      @include carbon--type-style(productive-heading-02);
+      @include type-style(heading-compact-02);
 
       display: flex;
-      color: $text-01;
-      padding: 0.8rem $carbon--spacing-05;
+      color: $text-primary;
+      padding: 0.8rem $spacing-05;
       height: auto;
-      min-height: 3rem;
-      border-bottom: 1px solid $ui-04;
+      min-height: $spacing-09;
+      border-bottom: 1px solid $toggle-off;
       align-items: center;
       text-decoration: none;
 
       &:focus {
-        outline: 2px solid $focus;
-        outline-offset: -2px;
+        outline: $spacing-01 solid $focus;
+        outline-offset: -#{$spacing-01};
       }
     }
 
     .#{$prefix}--side-nav__item
       .#{$prefix}--masthead__side-nav--submemu-section-title {
       height: auto;
-      min-height: 3rem;
+      min-height: $spacing-09;
       padding: 0;
 
       span {
-        @include carbon--type-style(productive-heading-02);
+        @include type-style(heading-compact-02);
 
         display: flex;
         width: 100%;
-        padding: 0.8rem 1rem;
-        color: $text-01;
-        border-bottom: 1px solid $ui-04;
+        padding: 0.8rem $spacing-05;
+        color: $text-primary;
+        border-bottom: 1px solid $toggle-off;
       }
     }
 
@@ -227,26 +237,25 @@
       justify-content: flex-end;
       align-items: center;
       align-self: flex-start;
-      margin-top: rem(2px);
+      margin-top: $spacing-01;
     }
   }
 
   a,
   button {
     &.#{$prefix}--side-nav__link {
-      height: carbon--mini-units(6);
-      @include carbon--type-style(body-short-02);
+      height: $spacing-09;
+      @include type-style(body-short-01);
 
       > {
         .#{$prefix}--side-nav__link-text {
-          @include carbon--type-style(body-short-02);
+          @include type-style(body-short-01);
 
           display: flex;
           align-items: center;
-          color: $text-02;
+          color: $text-secondary;
           width: 100%;
           height: 100%;
-          border-bottom: 1px solid $ui-03;
           text-overflow: ellipsis;
         }
       }
@@ -255,17 +264,17 @@
       &:focus {
         > {
           .#{$prefix}--side-nav__link-text {
-            color: $text-01;
+            color: $text-primary;
           }
         }
       }
     }
 
     &.#{$prefix}--side-nav__link--current {
-      background-color: $ui-background;
+      background-color: $background;
       > {
         .#{$prefix}--side-nav__link-text {
-          color: $text-01;
+          color: $text-primary;
         }
       }
     }
@@ -274,30 +283,43 @@
   .#{$prefix}--masthead__side-nav--submemu-back {
     position: sticky;
     top: 0;
-    background-color: $ui-background;
+    background-color: $background;
     z-index: 1;
+
     button {
       width: 100%;
       border: none;
       cursor: pointer;
-      outline: 2px solid transparent;
-      outline-offset: -2px;
+      outline: $spacing-01 solid transparent;
+      outline-offset: -#{$spacing-01};
       position: relative;
       display: flex;
       align-items: center;
-      min-height: 2rem;
-      padding: 0 1rem;
-      background-color: $ui-background;
+      min-height: $spacing-07;
+      padding: 0 $spacing-05;
+      background-color: $background;
+
+      &:hover {
+        background-color: $background-hover;
+
+        > .#{$prefix}--side-nav__link-text {
+          color: $link-primary-hover;
+        }
+      }
 
       &:focus {
         outline: 2px solid $focus;
         outline-offset: -2px;
+
+        > .#{$prefix}--side-nav__link-text {
+          color: $link-primary;
+        }
       }
 
       > .#{$prefix}--side-nav__link-text {
-        @include carbon--type-style(body-short-02);
+        @include type-style(body-short-01);
 
-        color: $link-01;
+        color: $link-primary;
         display: flex;
         border-bottom: none;
         align-items: center;
@@ -316,29 +338,23 @@
     }
   }
 
-  .#{$prefix}--masthead__side-nav--submemu-back
-    button:focus
-    > .#{$prefix}--side-nav__link-text {
-    color: $link-01;
-  }
-
-  :host(#{$dds-prefix}-left-nav-menu-section)[expanded],
+  :host(#{$c4d-prefix}-left-nav-menu-section)[expanded],
   .#{$prefix}--side-nav__menu-section--expanded {
     z-index: 1;
     inset-inline-start: 0;
   }
 
-  :host(#{$dds-prefix}-left-nav-menu-section)[is-submenu],
+  :host(#{$c4d-prefix}-left-nav-menu-section)[is-submenu],
   .#{$prefix}--side-nav__menu-section-submenu {
     inset-inline-start: 100%;
   }
 
-  :host(#{$dds-prefix}-left-nav-menu-section)[is-submenu][expanded],
+  :host(#{$c4d-prefix}-left-nav-menu-section)[is-submenu][expanded],
   .#{$prefix}--side-nav__menu-section-submenu.#{$prefix}--side-nav__menu-section--expanded {
     inset-inline-start: 0;
   }
 
-  :host(#{$dds-prefix}-left-nav-menu-section)[is-submenu][transition],
+  :host(#{$c4d-prefix}-left-nav-menu-section)[is-submenu][transition],
   .#{$prefix}--side-nav__menu-section-submenu--expanded {
     inset-inline-start: -100%;
   }
@@ -352,40 +368,39 @@
   }
 
   .#{$prefix}--side-nav__submenu {
-    @include carbon--theme($carbon--theme--white, true);
+    @include theme($white, true);
 
     .#{$prefix}--side-nav__submenu-content {
       width: 100%;
       height: auto;
-      min-height: rem(48px);
+      min-height: $spacing-09;
       display: flex;
-      border-bottom: 1px solid $ui-03;
     }
 
     .#{$prefix}--side-nav__submenu-title {
-      @include carbon--type-style(body-short-02);
+      @include type-style(body-short-01);
 
-      color: $text-02;
+      color: $text-secondary;
       align-self: center;
     }
 
     &[aria-haspopup='true'] {
-      height: $container-04;
+      height: $spacing-09;
       &.#{$prefix}--side-nav__submenu-platform {
-        border-top: 1px solid $ui-03;
-        border-bottom: 1px solid $ui-04;
+        border-top: 1px solid $layer-accent-01;
+        border-bottom: 1px solid $toggle-off;
         text-decoration: none;
-        color: $text-01;
-        height: $container-04;
+        color: $text-primary;
+        height: $spacing-09;
 
-        @include carbon--type-style(expressive-heading-02);
+        @include type-style(heading-02);
       }
     }
 
     &:hover,
     &:focus {
       .#{$prefix}--side-nav__submenu-title {
-        color: $text-01;
+        color: $text-primary;
       }
     }
   }
@@ -399,21 +414,139 @@
   }
 
   .#{$prefix}--masthead__side-nav--submemu-heading,
-  :host(#{$dds-prefix}-left-nav-menu-category-heading) {
-    @include type-style('body-long-01');
+  :host(#{$c4d-prefix}-left-nav-menu-category-heading) {
+    @include type-style('body-short-01');
 
-    font-size: 1rem;
-    line-height: 1.5rem;
-    letter-spacing: normal;
     display: block;
-    color: $text-02;
-    padding: $spacing-02 0;
-    margin: 0 $spacing-05;
-    border-bottom: 1px solid $ui-03;
+    color: $text-secondary;
+
+    &:is(.#{$prefix}--left-nav-menu-category__heading-large) {
+      margin: $spacing-03 0 $spacing-06;
+
+      .#{$prefix}--side-nav__heading {
+        padding: 0;
+      }
+    }
+
+    .#{$prefix}--side-nav__heading {
+      height: auto;
+      padding: $spacing-05 0;
+    }
+
+    .#{$prefix}--side-nav__heading-title {
+      display: block;
+      padding: 0 $spacing-05;
+
+      &:where(a) {
+        color: inherit;
+        display: inline-flex;
+        gap: $spacing-03;
+        align-items: center;
+        text-decoration: none;
+
+        &:hover {
+          text-decoration: underline;
+        }
+
+        &:focus {
+          outline: 2px solid $focus;
+          outline-offset: -2px;
+          color: $text-primary;
+        }
+      }
+    }
+
+    .#{$prefix}--side-nav__heading-description {
+      padding: 0 $spacing-05;
+    }
+
+    ::slotted(:first-child) {
+      padding-top: $spacing-03;
+    }
+
+    h2 {
+      @include type-style(productive-heading-01);
+
+      color: $text-primary;
+    }
+
+    h2.#{$prefix}--side-nav__menu-section-title {
+      @include type-style(productive-heading-03);
+
+      + .#{$prefix}--side-nav__heading-description {
+        margin-block-start: $spacing-03;
+      }
+    }
+  }
+
+  /* stylelint-disable selector-pseudo-class-parentheses-space-inside */
+  :host(#{$c4d-prefix}-left-nav-menu-category-heading):not(
+      .#{$prefix}--left-nav-menu-category__heading-large
+    ),
+  :host(#{$c4d-prefix}-left-nav-menu),
+  :host(#{$c4d-prefix}-left-nav-menu-item) {
+    display: block;
+    border-bottom: 1px solid $layer-accent-01;
+  }
+  /* stylelint-enable selector-pseudo-class-parentheses-space-inside */
+
+  :host(#{$c4d-prefix}-left-nav-menu-item) {
+    .#{$prefix}--side-nav__link {
+      display: flex;
+      align-items: center;
+      padding-left: $spacing-05;
+      height: auto;
+      min-height: $spacing-09;
+      width: 100%;
+
+      &:not(:is(a)):hover {
+        background-color: transparent;
+      }
+    }
+
+    &.#{$prefix}--side-nav__group-header {
+      &:not(:first-of-type) {
+        margin-top: $spacing-07;
+      }
+
+      .#{$prefix}--side-nav__link-text {
+        @include type-style(productive-heading-01);
+
+        color: $text-primary;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $spacing-03;
+
+        svg {
+          color: $icon-primary;
+        }
+      }
+    }
+
+    &.#{$prefix}--side-nav__group-view-all {
+      &:hover {
+        .#{$prefix}--side-nav__link-text {
+          color: $link-primary-hover;
+        }
+      }
+
+      .#{$prefix}--side-nav__link-text {
+        color: $button-primary;
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: $spacing-03;
+
+        svg {
+          color: $button-primary;
+        }
+      }
+    }
   }
 
   .#{$prefix}--masthead__side-nav--submemu--selected {
-    border-inline-start: 3px solid $interactive-01;
+    border-inline-start: 3px solid $background-brand;
 
     .#{$prefix}--side-nav__submenu-title,
     &.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
@@ -425,8 +558,8 @@
   .#{$prefix}--side-nav__submenu[aria-expanded='true']
     .#{$prefix}--side-nav__submenu-chevron {
     > svg {
-      transform: rotate(-90deg) scale(1.25);
-      fill: $text-01;
+      transform: rotate(-90deg);
+      fill: $text-primary;
 
       :host([dir='rtl']) & {
         transform: rotate(90deg) scale(1.25);
@@ -437,40 +570,17 @@
   .#{$prefix}--side-nav__item .#{$prefix}--side-nav__link,
   .#{$prefix}--side-nav__menu-item
     .#{$prefix}--side-nav__link:not([isbackbutton='true']),
-  :host(#{$dds-prefix}-left-nav-item-highlighted) a.#{$prefix}--side-nav__link,
-  :host(#{$dds-prefix}-left-nav-menu-item-highlighted)
+  :host(#{$c4d-prefix}-left-nav-item-highlighted) a.#{$prefix}--side-nav__link,
+  :host(#{$c4d-prefix}-left-nav-menu-item-highlighted)
     a.#{$prefix}--side-nav__link,
-  :host(#{$dds-prefix}-left-nav-item) a.#{$prefix}--side-nav__link,
-  :host(#{$dds-prefix}-left-nav-menu-item) a.#{$prefix}--side-nav__link {
+  :host(#{$c4d-prefix}-left-nav-item) a.#{$prefix}--side-nav__link {
     display: flex;
-    padding-left: $carbon--spacing-05;
+    padding-left: $spacing-05;
     height: auto;
-    min-height: carbon--mini-units(6);
+    min-height: $spacing-09;
     width: 100%;
   }
 
-  .#{$prefix}--masthead__side-nav__last-highlighted,
-  :host(#{$dds-prefix}-left-nav-menu-item[last-highlighted]),
-  :host(#{$dds-prefix}-left-nav-menu[last-highlighted]) {
-    border-bottom: 1px solid $ui-04;
-  }
-
-  :host(#{$dds-prefix}-left-nav-menu[last-highlighted])
-    .#{$prefix}--side-nav__submenu
-    .#{$prefix}--side-nav__submenu-content,
-  .#{$prefix}--masthead__side-nav__last-highlighted
-    .#{$prefix}--side-nav__submenu-content,
-  .#{$prefix}--side-nav__menu-item.#{$prefix}--masthead__side-nav__last-highlighted
-    .#{$prefix}--side-nav__link,
-  :host(dds-left-nav-menu-section)
-    .#{$prefix}--masthead__side-nav--submemu-back
-    .#{$prefix}--side-nav__link
-    .#{$prefix}--side-nav__link-text,
-  :host(#{$dds-prefix}-left-nav-menu-item[last-highlighted])
-    .#{$prefix}--side-nav__link {
-    border-bottom: none;
-  }
-
   .#{$prefix}--side-nav__submenu-platform {
     flex-direction: row;
 
@@ -479,7 +589,3 @@
     }
   }
 }
-
-@include exports('masthead-sidenav') {
-  @include masthead-sidenav;
-}
diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu-scroll.scss b/packages/styles/scss/components/masthead/_masthead-megamenu-scroll.scss
index 425df705d34..b1380726fc4 100644
--- a/packages/styles/scss/components/masthead/_masthead-megamenu-scroll.scss
+++ b/packages/styles/scss/components/masthead/_masthead-megamenu-scroll.scss
@@ -5,12 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/config' as *;
+
 /**
  * This locks the scroll on the body element when the megamenu is expanded.
- * When using the megamenu web component, adopters will need to load this file in their application for 
+ * When using the megamenu web component, adopters will need to load this file in their application for
  * the scroll locking to work.
  */
-.#{$prefix}--body__lock-scroll {
-  position: relative;
-  overflow: hidden;
+
+@mixin masthead-megamenu-scroll {
+  .#{$prefix}--body__lock-scroll {
+    position: relative;
+    overflow: hidden;
+  }
 }
diff --git a/packages/styles/scss/components/masthead/_masthead-megamenu.scss b/packages/styles/scss/components/masthead/_masthead-megamenu.scss
index d8cc15404d1..43bb70762d2 100644
--- a/packages/styles/scss/components/masthead/_masthead-megamenu.scss
+++ b/packages/styles/scss/components/masthead/_masthead-megamenu.scss
@@ -5,9 +5,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+
+@mixin masthead-megamenu-limit-height {
+  max-height: var(--#{$c4d-prefix}-masthead-max-height);
+  overflow: var(--#{$c4d-prefix}-masthead-overflow);
+}
+
 @mixin masthead-megamenu {
   $l0-nav-height: $spacing-09;
-  $l1-nav-height: rem(98px);
+  $l1-nav-height: to-rem(98px);
 
   @keyframes expand {
     0% {
@@ -30,7 +45,7 @@
     }
   }
 
-  :host(#{$dds-prefix}-megamenu-top-nav-menu)
+  :host(#{$c4d-prefix}-megamenu-top-nav-menu)
     .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu,
   .#{$prefix}--header__nav
@@ -46,26 +61,26 @@
     box-shadow: none;
   }
 
-  :host(#{$dds-prefix}-megamenu-top-nav-menu),
+  :host(#{$c4d-prefix}-megamenu-top-nav-menu),
   .#{$prefix}--masthead__megamenu__l0-nav,
   .#{$prefix}--masthead__megamenu__l1-nav {
     .#{$prefix}--header__menu {
       position: fixed;
       display: block;
       visibility: hidden;
-      margin-bottom: $layout-05;
+      margin-bottom: $spacing-10;
       left: 0;
       width: 100vw;
       transform: translateZ(0.0001px);
-      transition: visibility $transition--expansion $carbon--standard-easing;
+      transition: visibility $transition-expansion $standard-easing;
     }
 
     .#{$prefix}--header__menu-title[aria-expanded='false']
       + .#{$prefix}--header__menu {
-      ::slotted(#{$dds-prefix}-megamenu),
-      ::slotted(#{$dds-prefix}-cloud-megamenu),
+      ::slotted(#{$c4d-prefix}-megamenu),
+      ::slotted(#{$c4d-prefix}-cloud-megamenu),
       .#{$prefix}--masthead__megamenu {
-        animation: $transition--expansion motion(standard, expressive) collapse;
+        animation: $transition-expansion motion(standard, expressive) collapse;
       }
     }
 
@@ -77,21 +92,21 @@
       height: calc(100vh - #{$spacing-10} - #{$spacing-09});
       transform: translateZ(0);
       visibility: visible;
-      margin-bottom: $layout-05;
+      margin-bottom: $spacing-10;
       // `100vw` in Shadow DOM causes delayed rendering bug in Safari
       // https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4493
-      width: var(--#{$dds-prefix}-ce--viewport-width, 100vw);
-      min-height: carbon--mini-units(40);
+      width: var(--#{$c4d-prefix}-ce--viewport-width, 100vw);
+      min-height: 320px;
 
-      ::slotted(#{$dds-prefix}-megamenu),
-      ::slotted(#{$dds-prefix}-cloud-megamenu),
+      ::slotted(#{$c4d-prefix}-megamenu),
+      ::slotted(#{$c4d-prefix}-cloud-megamenu),
       .#{$prefix}--masthead__megamenu {
-        animation: $transition--expansion motion(standard, expressive) expand;
+        animation: $transition-expansion motion(standard, expressive) expand;
       }
     }
   }
 
-  :host(#{$dds-prefix}-megamenu-top-nav-menu),
+  :host(#{$c4d-prefix}-megamenu-top-nav-menu),
   .#{$prefix}--masthead__megamenu__l0-nav {
     .#{$prefix}--header__menu-title[aria-expanded='true']
       + .#{$prefix}--header__menu {
@@ -105,84 +120,344 @@
     top: $l1-nav-height;
   }
 
-  :host(#{$dds-prefix}-megamenu),
-  :host(#{$dds-prefix}-cloud-megamenu),
+  :host(#{$c4d-prefix}-megamenu),
+  :host(#{$c4d-prefix}-cloud-megamenu),
   .#{$prefix}--masthead__megamenu {
+    @include box-shadow;
+    --#{$c4d-prefix}-masthead-max-height: calc(
+      100vh - var(--cds-spacing-09, 3rem) - var(--cds-layout-05, 4rem)
+    );
+    --#{$c4d-prefix}-masthead-overflow: overlay;
+
     display: block;
     overflow-y: overlay;
     overflow-x: hidden;
-    background-color: $ui-background;
+    background-color: $background;
 
     &:focus {
       outline: none;
     }
 
-    @include box-shadow;
-
     .#{$prefix}--masthead__megamenu__container {
+      @include make-container;
+
       width: 100vw;
-      @include carbon--make-container;
+    }
 
-      .#{$prefix}--masthead__megamenu__container--row {
-        @include carbon--make-row;
+    .#{$prefix}--masthead__megamenu__container--row {
+      background-color: $layer-accent-01;
+
+      /**
+       * Faceted (tab) and Simple (list) megamenus have different layouts between
+       * 'md' and 'lg' breakpoints. This requires us to apply identical styles at
+       * different breakpoints, and we must also leverage custom properties to assign
+       * values across shadow roots. The concept is that these upper shadow roots have
+       * the stateful information needed to dictate how elements in the lower shadow
+       * roots should appear, and we can pass that information down via custom props.
+       */
+      &.#{$prefix}--masthead__megamenu__container--row--tab {
+        @include make-row;
 
         flex-wrap: nowrap;
+        gap: 1px;
+
+        ::slotted(#{$c4d-prefix}-megamenu-right-navigation) {
+          --#{$c4d-prefix}-right-nav-padding: #{$spacing-05};
+        }
+      }
+
+      &.#{$prefix}--masthead__megamenu__container--row--list {
+        @include breakpoint-down(lg) {
+          @include masthead-megamenu-limit-height;
+          --#{$c4d-prefix}-view-all-inset: calc(#{$spacing-05} * -1);
+          --#{$c4d-prefix}-view-all-container-position: initial;
+          --#{$c4d-prefix}-view-all-container-transform: initial;
+
+          // Set containing block for fixed position view all CTA.
+          transform: rotate(0deg);
+          position: relative;
+          z-index: 1;
+
+          margin-inline: calc(#{$spacing-09} * -1);
+        }
+
+        @include breakpoint-up(lg) {
+          @include make-row;
+
+          flex-wrap: nowrap;
+          gap: 1px;
+        }
+
+        ::slotted(#{$c4d-prefix}-megamenu-left-navigation),
+        ::slotted(#{$c4d-prefix}-megamenu-right-navigation) {
+          @include breakpoint-down(lg) {
+            --#{$c4d-prefix}-view-all-padding: #{$spacing-05};
+            --#{$c4d-prefix}-masthead-max-height: initial;
+            --#{$c4d-prefix}-masthead-overflow: initial;
+
+            width: 100%;
+            max-width: initial;
+            margin-inline: initial;
+            padding-inline: $spacing-07;
+            border-bottom: to-rem(1px) solid $layer-accent-01;
+            overflow: initial;
+            max-height: initial;
+
+            .#{$prefix}--masthead__megamenu-container {
+              max-height: initial;
+              overflow: initial;
+            }
+          }
+        }
+
+        ::slotted(#{$c4d-prefix}-megamenu-left-navigation) {
+          --#{$c4d-prefix}-left-nav-columns: 2;
+
+          @include breakpoint-up(lg) {
+            --#{$c4d-prefix}-left-nav-columns: initial;
+          }
+        }
+
+        ::slotted(#{$c4d-prefix}-megamenu-right-navigation) {
+          --#{$c4d-prefix}-right-nav-padding: 0;
+
+          @include breakpoint-down(lg) {
+            --#{$c4d-prefix}-view-all-display: none;
+
+            border-bottom: none;
+          }
+
+          @include breakpoint-up(lg) {
+            --#{$c4d-prefix}-right-nav-padding: #{$spacing-05};
+          }
+        }
+
+        ::slotted([part*='view-all']) {
+          --#{$c4d-prefix}-view-all-padding: #{$spacing-09};
+
+          position: sticky;
+          z-index: 1;
+          inset-block-end: 0;
+          background-color: $background;
+          border-top: to-rem(1px) solid $layer-accent-01;
+
+          @include breakpoint-up(lg) {
+            display: none;
+          }
+        }
       }
     }
+
+    ::slotted([role='tabpanel']) {
+      width: 100%;
+    }
   }
 
-  :host(#{$dds-prefix}-megamenu-right-navigation),
+  :host(#{$c4d-prefix}-megamenu-left-navigation),
+  .#{$prefix}--masthead__megamenu__highlight-section,
+  :host(#{$c4d-prefix}-megamenu-right-navigation),
   .#{$prefix}--masthead__megamenu__categories-section {
-    display: flex;
-    flex-direction: column;
-    padding-top: rem(18px);
+    background-color: $background;
+    padding-block-start: $spacing-06;
+    display: block;
+    position: relative;
+
+    .#{$prefix}--masthead__megamenu-container {
+      @include masthead-megamenu-limit-height;
+
+      position: var(--#{$c4d-prefix}-view-all-container-position, relative);
+      height: 100%;
+      z-index: 1;
+
+      // Set containing block for fixed position view all CTA.
+      transform: var(
+        --#{$c4d-prefix}-view-all-container-transform,
+        rotate(0deg)
+      );
+
+      &.#{$prefix}--masthead__megamenu-container--has-view-all-link {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        .#{$prefix}--masthead__megamenu-container-inner {
+          max-height: 100%;
+          overflow: overlay;
+        }
+
+        .#{$prefix}--masthead__megamenu__view-all {
+          display: var(--#{$c4d-prefix}-view-all-display, inherit);
+          position: relative;
+          background-color: $background;
+        }
+
+        .#{$prefix}--masthead__megamenu__view-all__border {
+          position: absolute;
+          top: 0;
+          height: to-rem(1px);
+          background: $layer-accent-01;
+        }
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-megamenu-left-navigation),
+  .#{$prefix}--masthead__megamenu__highlight-section {
+    @include make-col(4, 16);
+
+    min-height: 100%;
+
+    // Shift border left without breaking Carbon grid alignment.
+    padding-inline-start: $spacing-05;
+    margin-inline-start: calc(#{$spacing-05} * -1);
+
+    .#{$prefix}--masthead__megamenu__categories {
+      columns: var(--#{$c4d-prefix}-left-nav-columns, 'initial');
+      gap: 0;
+    }
+
+    .#{$prefix}--masthead__megamenu__view-all__border {
+      inset-inline: 0;
+    }
+  }
+
+  :host(#{$c4d-prefix}-megamenu-right-navigation),
+  .#{$prefix}--masthead__megamenu__categories-section {
+    display: block;
     width: 100%;
 
+    &.#{$c4d-prefix}--masthead__tabpanel-child {
+      height: 100%;
+    }
+
+    &[style-scheme='has-sidebar'] {
+      .#{$prefix}--masthead__megamenu__heading,
+      .#{$prefix}--masthead__megamenu__categories {
+        padding-inline-start: var(
+          --#{$c4d-prefix}-right-nav-padding,
+          $spacing-05
+        );
+      }
+    }
+
+    ::slotted(#{$c4d-prefix}-megamenu-heading) {
+      --heading-description-column-count: 2;
+      --heading-description-column-count-lg: 4;
+    }
+
+    .#{$prefix}--masthead__megamenu--has-view-all-link {
+      .#{$prefix}--masthead__megamenu__categories {
+        padding-block-end: 0;
+      }
+    }
+
+    .#{$prefix}--masthead__megamenu-container--has-sidebar {
+      ::slotted(#{$c4d-prefix}-megamenu-heading) {
+        --heading-description-column-count: 2;
+        --heading-description-column-count-lg: 3;
+      }
+
+      .#{$prefix}--masthead__megamenu__categories {
+        @include breakpoint-up('lg') {
+          column-count: 3;
+        }
+      }
+    }
+
     .#{$prefix}--masthead__megamenu__categories {
-      padding: 0 0 $layout-03 0;
-      column-count: 4;
+      padding-block-end: $spacing-07;
+      column-count: 2;
       column-gap: 0;
+
+      @include breakpoint-up('lg') {
+        column-count: 4;
+      }
     }
 
-    .#{$prefix}--masthead__megamenu--hasViewAllLink {
-      padding-bottom: 0;
+    .#{$prefix}--masthead__megamenu__view-all__border {
+      inset-inline: 0;
+    }
+
+    // Disable columns here so child element can reapply them.
+    &[data-child-count='1'] {
+      .#{$prefix}--masthead__megamenu__categories {
+        column-count: initial;
+
+        @include breakpoint-up('lg') {
+          column-count: initial;
+        }
+      }
     }
+  }
+
+  .#{$prefix}--masthead__megamenu__heading,
+  :host(#{$c4d-prefix}-megamenu-heading) {
+    span {
+      display: block;
+      max-width: calc((1 / var(--heading-description-column-count, 2)) * 100%);
 
-    .#{$prefix}--masthead__megamenu--hasHighlights {
-      column-count: 3;
+      @include breakpoint-up('lg') {
+        max-width: calc(
+          (1 / var(--heading-description-column-count-lg, 4)) * 100%
+        );
+      }
     }
   }
 
   .#{$prefix}--masthead__megamenu__copy,
-  :host(#{$dds-prefix}-megamenu-category-group-copy) {
-    display: block;
-    @include type-style('body-long-01');
+  :host(#{$c4d-prefix}-megamenu-category-group-copy) {
+    @include type-style('body-short-01');
 
-    color: $text-02;
-    padding: rem(6px) $spacing-05 rem(10px);
+    display: block;
+    color: $text-secondary;
+    margin: to-rem(6px) $spacing-05 to-rem(10px);
+    max-width: to-rem(272px);
   }
 
-  :host(#{$dds-prefix}-megamenu-category-group),
+  :host(#{$c4d-prefix}-megamenu-category-group),
   .#{$prefix}--masthead__megamenu__category-group {
     display: block;
 
-    .#{$prefix}--masthead__megamenu__category-group-content {
+    &.only-child {
+      .#{$prefix}--masthead__megamenu__category-group-heading {
+        @include make-col(1, 2);
+
+        @include breakpoint-up('lg') {
+          @include make-col(1, 3);
+        }
+      }
+
+      .#{$prefix}--masthead__megamenu__category-group-content {
+        column-count: 2;
+        column-gap: 0;
+
+        @include breakpoint-up('lg') {
+          column-count: 3;
+        }
+      }
+
+      ::slotted(#{$c4d-prefix}-megamenu-category-link) {
+        display: block;
+        break-inside: avoid;
+      }
+    }
+
+    .#{$prefix}--masthead__megamenu__category-group-content-wrapper {
       width: 100%;
       display: inline-block;
-      padding-bottom: $spacing-07;
+      padding-block-end: $spacing-06;
     }
 
     .#{$prefix}--masthead__megamenu__copy,
-    ::slotted(#{$dds-prefix}-megamenu-category-group-copy) {
-      @include type-style('body-long-01');
+    ::slotted(#{$c4d-prefix}-megamenu-category-group-copy) {
+      @include type-style('body-short-01');
 
-      color: $text-01;
-      margin-top: rem(-6px);
-      padding: 0 $spacing-05 $spacing-03 $spacing-05;
+      color: $text-secondary;
+      margin: to-rem(-6px) $spacing-05 $spacing-06;
     }
   }
 
-  :host(#{$dds-prefix}-megamenu-link-with-icon) {
+  :host(#{$c4d-prefix}-megamenu-link-with-icon) {
     span {
       flex: inherit;
     }
@@ -197,97 +472,104 @@
   }
 
   :host(
-      #{$dds-prefix}-megamenu-link-with-icon
-    )[style-scheme='category-headline'],
-  .#{$prefix}--masthead__megamenu__category-headline {
+      #{$c4d-prefix}-megamenu-link-with-icon
+    )[style-scheme='category-headline'] {
     width: 100%;
 
     p,
     a,
     .#{$prefix}--link-with-icon {
-      padding: 6px $spacing-05;
-      text-decoration: none;
       width: 100%;
-
-      @include type-style('expressive-heading-01');
+      padding: to-rem(6px) $spacing-05;
+      margin-block-end: $spacing-06;
     }
 
+    p,
+    a,
+    .#{$prefix}--link-with-icon,
     ::slotted(span),
     span {
-      color: $text-01;
+      @include type-style(heading-03, true);
 
+      color: $text-secondary;
+      text-decoration: none;
+    }
+
+    ::slotted(span),
+    span {
       flex: inherit;
     }
 
+    ::slotted(svg),
     svg {
-      color: $link-01;
+      fill: $text-secondary;
       min-width: $spacing-05;
     }
 
     &:visited,
     &:hover {
-      color: $text-01;
+      color: $text-secondary;
     }
   }
 
-  :host(#{$dds-prefix}-megamenu-category-link) a,
+  :host(#{$c4d-prefix}-megamenu-category-link) a,
   .#{$prefix}--masthead__megamenu__category-sublink {
-    @include type-style('body-long-01');
+    @include type-style('body-short-01');
 
-    color: $text-02;
+    color: $text-secondary;
     text-decoration: none;
-    padding: 6px $spacing-05;
+    padding: to-rem(6px) $spacing-05;
     display: block;
 
+    &:visited {
+      color: $text-secondary;
+    }
+
     &:hover,
-    &:active {
-      color: $text-01;
+    &:active,
+    &:hover:visited {
+      color: $text-primary;
     }
   }
 
   .#{$prefix}--masthead__megamenu__category-sublink--highlighted,
   :host(
-      #{$dds-prefix}-megamenu-link-with-icon
+      #{$c4d-prefix}-megamenu-link-with-icon
     )[style-scheme='category-sublink'] {
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
 
     width: 100%;
 
+    a {
+      width: 100%;
+      padding: to-rem(7px) $spacing-05;
+    }
+
     span {
       flex: inherit;
     }
   }
 
-  .#{$prefix}--masthead__megamenu__category-sublink--highlighted,
-  :host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='category-sublink']
-    a {
-    width: 100%;
-    padding: 7px $spacing-05;
-  }
-
-  :host(#{$dds-prefix}-megamenu-link-with-icon)[style-scheme='view-all'],
+  :host(#{$c4d-prefix}-megamenu-link-with-icon)[part*='view-all'],
   .#{$prefix}--masthead__megamenu__view-all-cta {
-    margin-top: auto;
+    width: 100%;
     display: flex;
-    z-index: 1;
 
-    a,
-    .#{$prefix}--link-with-icon {
+    &[part*='view-all-left'] {
+      [part='link'] {
+        padding-inline-start: $spacing-05;
+      }
+    }
+
+    [part='link'] {
       text-decoration: none;
       width: 100%;
-      margin: 0 $spacing-05;
-      border-top: rem(1px) solid $ui-03;
+      padding-inline: var(--#{$c4d-prefix}-view-all-padding, #{$spacing-07})
+        $spacing-05;
       height: $spacing-09;
 
-      &:hover,
-      &:focus {
-        margin: 0;
-        padding: 0 $spacing-05;
-      }
-
       &:hover {
-        border-top: rem(1px) solid transparent;
-        color: $hover-primary-text;
+        color: $link-primary-hover;
       }
     }
 
@@ -297,16 +579,14 @@
     }
 
     span {
-      @include type-style('body-short-01');
+      @include type-style('body-compact-01');
 
       flex: inherit;
     }
   }
 
-  :host(#{$dds-prefix}-megamenu-category-link) a,
-  :host(#{$dds-prefix}-megamenu-link-with-icon) a,
-  .#{$prefix}--masthead__megamenu__category-headline
-    .#{$prefix}--link-with-icon,
+  :host(#{$c4d-prefix}-megamenu-category-link) a,
+  :host(#{$c4d-prefix}-megamenu-link-with-icon) a,
   .#{$prefix}--masthead__megamenu__category-sublink--highlighted,
   .#{$prefix}--masthead__megamenu__view-all-cta .#{$prefix}--link-with-icon,
   .#{$prefix}--masthead__megamenu__category-sublink {
@@ -314,13 +594,13 @@
     &:active {
       @include focus-outline;
 
-      outline-width: 2px;
-      outline-offset: -2px;
+      outline-width: $spacing-01;
+      outline-offset: -#{$spacing-01};
     }
 
     &:active,
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
       text-decoration: none;
     }
 
@@ -332,38 +612,4 @@
       */
     }
   }
-
-  :host(#{$dds-prefix}-megamenu-left-navigation),
-  .#{$prefix}--masthead__megamenu__highlight-section {
-    min-height: 100%;
-    padding-top: rem(18px);
-    border-right: rem(1px) solid $ui-03;
-    @include carbon--make-col(4, 16);
-  }
-
-  @include carbon--breakpoint-between(800px, 1055px) {
-    .#{$prefix}--masthead__megamenu__container--row {
-      flex-direction: column;
-    }
-
-    :host(#{$dds-prefix}-megamenu-left-navigation),
-    .#{$prefix}--masthead__megamenu__highlight-section {
-      border-right: none;
-      border-bottom: rem(1px) solid $ui-03;
-      column-count: 2;
-      column-gap: 0;
-      @include carbon--make-col(8, 8);
-    }
-
-    :host(#{$dds-prefix}-megamenu-right-navigation),
-    .#{$prefix}--masthead__megamenu__categories-section {
-      .#{$prefix}--masthead__megamenu__categories {
-        column-count: 2;
-      }
-    }
-  }
-}
-
-@include exports('masthead-megamenu') {
-  @include masthead-megamenu;
 }
diff --git a/packages/styles/scss/components/masthead/_masthead-search.scss b/packages/styles/scss/components/masthead/_masthead-search.scss
index 1a73e07cfda..54ddc13c5c7 100755
--- a/packages/styles/scss/components/masthead/_masthead-search.scss
+++ b/packages/styles/scss/components/masthead/_masthead-search.scss
@@ -5,50 +5,56 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use 'vars' as *;
 
 /// @access private
-@mixin masthead-top-nav-name {
-  @include carbon--type-style(expressive-heading-02, true);
+@mixin masthead-top-nav-search {
+  @include type-style(heading-02, true);
 
-  color: $text-01;
-  padding-left: $carbon--spacing-05;
-  padding-right: $carbon--spacing-05;
-  border: solid 2px transparent;
+  color: $text-primary;
+  padding-left: $spacing-05;
+  padding-right: $spacing-05;
+  border: solid $spacing-01 transparent;
   transition: $button-transition;
   position: relative;
   white-space: nowrap;
   z-index: 1;
-  background-color: $ui-background;
+  background-color: $background;
 
-  @include carbon--breakpoint(lg) {
-    margin-left: $carbon--spacing-05;
+  @include breakpoint(lg) {
+    margin-left: $spacing-05;
   }
 
   &:hover {
-    background-color: $hover-ui;
-    color: $text-01;
+    background-color: $background-hover;
+    color: $text-primary;
   }
 
   &:active,
   &:focus {
     border-color: $focus;
-    background-color: $ui-01;
+    background-color: $layer-01;
   }
 
   &::before {
     content: '';
     display: block;
     position: absolute;
-    left: calc(-1rem - 2px);
+    left: calc(-1 * ($spacing-05 - $spacing-01));
     top: 50%;
     transform: translateY(-50%);
-    height: 1.5rem;
+    height: $spacing-06;
     width: 0.0625rem;
     background-color: #dcdcdc;
   }
 
-  @include carbon--breakpoint-down(800px) {
+  @include breakpoint-down(800px) {
     display: none;
   }
 }
@@ -56,7 +62,7 @@
 @mixin masthead-search {
   // main nav/search container excluding
   // profile and logo icons - TODO rename this
-  :host(#{$dds-prefix}-top-nav),
+  :host(#{$c4d-prefix}-top-nav),
   .#{$prefix}--header__search {
     display: flex;
     flex: 1;
@@ -76,12 +82,12 @@
       .#{$prefix}--masthead__platform-name {
         z-index: 1;
         height: 100%;
-        background: $ui-background;
+        background: $background;
       }
     }
 
     a.#{$prefix}--header__name {
-      @include masthead-top-nav-name;
+      @include masthead-top-nav-search;
     }
 
     &.#{$prefix}--masthead__header--search-active {
@@ -92,7 +98,7 @@
       + .#{$prefix}--header__profile {
         display: none;
 
-        @include carbon--breakpoint(md) {
+        @include breakpoint(md) {
           display: flex;
         }
       }
@@ -102,7 +108,7 @@
   .#{$prefix}--header__search:not(
       .#{$prefix}--masthead__header--search-active
     ) {
-    @include carbon--breakpoint(md) {
+    @include breakpoint(md) {
       overflow-x: visible;
     }
   }
@@ -119,15 +125,15 @@
 
     .#{$prefix}--header__search--search,
     .#{$prefix}--header__search--close {
-      color: $icon-02;
+      color: $icon-secondary;
 
-      background-color: $ui-background;
+      background-color: $background;
       padding: 0;
 
       &:hover {
-        background-color: $hover-ui;
+        background-color: $background-hover;
         svg[focusable='false'][aria-hidden='true'] {
-          fill: $icon-01;
+          fill: $icon-primary;
         }
       }
       // prevent tooltip from showing on hover
@@ -149,9 +155,9 @@
 
   // search container
   .#{$prefix}--masthead__search,
-  :host(#{$dds-prefix}-masthead-search) {
-    height: $carbon--spacing-09;
-    margin-left: rem(48px);
+  :host(#{$c4d-prefix}-masthead-search) {
+    height: $spacing-09;
+    margin-left: $spacing-09;
 
     &.#{$prefix}--masthead__search--active,
     &[active] {
@@ -161,7 +167,7 @@
 
       button.#{$prefix}--header__search--close.#{$prefix}--header__action[part='close-button'] {
         display: inline-flex;
-        width: $carbon--spacing-09;
+        width: $spacing-09;
       }
 
       .#{$prefix}--header__search--actions {
@@ -175,9 +181,9 @@
           bottom: 0;
           left: 0;
           display: block;
-          border-bottom: 2px solid $interactive-01;
+          border-bottom: $spacing-01 solid $background-brand;
           width: 100%;
-          height: 2px;
+          height: $spacing-01;
           z-index: 10002;
         }
       }
@@ -185,11 +191,11 @@
       .#{$prefix}--header__search--input {
         display: flex;
         flex: 1;
-        padding: 0 $carbon--spacing-05;
-        outline: 2px solid transparent;
-        outline-offset: -2px;
-        background-color: $ui-01;
-        height: carbon--mini-units(6);
+        padding: 0 $spacing-05;
+        outline: $spacing-01 solid transparent;
+        outline-offset: -#{$spacing-01};
+        background-color: $layer-01;
+        height: $spacing-09;
         z-index: 10000;
 
         &::placeholder {
@@ -197,22 +203,22 @@
           opacity: 1;
           transition-duration: 112ms;
           transition-delay: 200ms;
-          color: $text-03;
+          color: $text-placeholder;
         }
       }
 
       .#{$prefix}--header__search--close,
       .#{$prefix}--header__search--search {
-        border: 2px solid transparent;
+        border: $spacing-01 solid transparent;
 
         &:focus,
         &:active {
-          border: 2px solid $focus;
+          border: $spacing-01 solid $focus;
         }
       }
 
       .#{$prefix}--header__action {
-        background-color: $ui-01;
+        background-color: $layer-01;
         transition-property: width;
         transition-delay: 380ms;
         transition-duration: 112ms;
@@ -220,14 +226,14 @@
     }
 
     &.#{$prefix}--masthead__search--active {
-      @include carbon--breakpoint-down(md) {
+      @include breakpoint-down(md) {
         position: absolute;
         width: 100vw;
       }
     }
 
     &[active] {
-      @include carbon--breakpoint-down(md) {
+      @include breakpoint-down(md) {
         width: 100vw;
         right: 0;
       }
@@ -238,37 +244,37 @@
     display: flex;
     justify-content: flex-end;
     position: relative;
-    height: $carbon--spacing-09;
+    height: $spacing-09;
   }
 
   .react-autosuggest__suggestions-container {
     position: absolute;
-    top: $carbon--spacing-09;
+    top: $spacing-09;
     left: 0;
     width: 100%;
-    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
+    box-shadow: 0 $spacing-02 $spacing-03 0 rgba(0, 0, 0, 0.5);
   }
 
   .react-autosuggest__suggestions-list {
-    background-color: $ui-background;
+    background-color: $background;
   }
 
   .react-autosuggest__section-title {
-    height: $carbon--spacing-09;
+    height: $spacing-09;
     display: flex;
     align-items: center;
-    color: $text-02;
-    padding: 0 $carbon--spacing-05;
-    border-top: solid 1px $ui-04;
-    border-bottom: solid 1px $ui-01;
-    background-color: $ui-background;
+    color: $text-secondary;
+    padding: 0 $spacing-05;
+    border-top: solid 1px $toggle-off;
+    border-bottom: solid 1px $layer-01;
+    background-color: $background;
 
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
   }
 
   .react-autosuggest__suggestion {
-    color: $text-01;
-    height: $carbon--spacing-09;
+    color: $text-primary;
+    height: $spacing-09;
     display: flex;
     span {
       font-weight: 600;
@@ -276,9 +282,9 @@
 
     .#{$prefix}--container-class {
       display: flex;
-      border-bottom: 1px solid $ui-01;
+      border-bottom: 1px solid $layer-01;
       flex: 1;
-      padding: 0 $carbon--spacing-05;
+      padding: 0 $spacing-05;
       align-items: center;
 
       &:focus {
@@ -288,14 +294,14 @@
 
     &:hover {
       cursor: pointer;
-      background-color: $hover-ui;
+      background-color: $background-hover;
       transition: $search-transition-timing;
     }
 
     .#{$prefix}--container-highlight-class:not(:hover),
     &:focus,
     &:active {
-      outline: 2px solid $focus;
+      outline: $spacing-01 solid $focus;
     }
 
     &:last-of-type {
@@ -306,22 +312,18 @@
   }
 
   .#{$prefix}--header__search--input {
-    font-size: $carbon--spacing-05;
+    font-size: $spacing-05;
     line-height: 1.375rem;
     border: none;
     width: 0;
     transition: 120ms;
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $layer-accent-01;
     padding: 0;
 
     &::placeholder {
       position: relative;
-      left: 5rem;
+      left: $spacing-11;
       opacity: 0;
     }
   }
 }
-
-@include exports('masthead-search') {
-  @include masthead-search;
-}
diff --git a/packages/styles/scss/components/masthead/_masthead-top-nav-name.scss b/packages/styles/scss/components/masthead/_masthead-top-nav-name.scss
index 46bd1347e2b..3331a24351b 100644
--- a/packages/styles/scss/components/masthead/_masthead-top-nav-name.scss
+++ b/packages/styles/scss/components/masthead/_masthead-top-nav-name.scss
@@ -5,38 +5,44 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use 'vars' as *;
 
-/// @access private
 @mixin masthead-top-nav-name {
-  @include carbon--type-style(expressive-heading-02, true);
+  %masthead-top-nav-name {
+    @include type-style('heading-02');
 
-  color: $text-01;
-  padding-left: $carbon--spacing-05;
-  padding-right: $carbon--spacing-05;
-  border: solid 2px transparent;
-  transition: $button-transition;
-  position: relative;
-  white-space: nowrap;
-  z-index: 1;
-  background-color: $ui-background;
+    color: $text-primary;
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
+    border: solid $spacing-01 transparent;
+    transition: $button-transition;
+    position: relative;
+    white-space: nowrap;
+    z-index: 1;
+    background-color: $background;
 
-  @include carbon--breakpoint(lg) {
-    margin-left: $carbon--spacing-05;
-  }
+    @include breakpoint(lg) {
+      margin-left: $spacing-05;
+    }
 
-  &:hover {
-    background-color: $hover-ui;
-    color: $text-01;
-  }
+    &:hover {
+      background-color: $background-hover;
+      color: $text-primary;
+    }
 
-  &:active,
-  &:focus {
-    border-color: $focus;
-    background-color: $ui-01;
-  }
+    &:active,
+    &:focus {
+      border-color: $focus;
+      background-color: $layer-01;
+    }
 
-  @include carbon--breakpoint-down(800px) {
-    display: none;
+    @include breakpoint-down(800px) {
+      display: none;
+    }
   }
 }
diff --git a/packages/styles/scss/components/masthead/_masthead.scss b/packages/styles/scss/components/masthead/_masthead.scss
index 6f91c82653e..14d349a0698 100755
--- a/packages/styles/scss/components/masthead/_masthead.scss
+++ b/packages/styles/scss/components/masthead/_masthead.scss
@@ -5,52 +5,62 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/components/overflow-menu/overflow-menu' as *;
+@use '@carbon/styles/scss/components/tooltip';
+@use '@carbon/styles/scss/components/ui-shell/side-nav';
+@use '@carbon/styles/scss/components/ui-shell/ui-shell';
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/vars' as *;
+@use '../link-with-icon';
+@use 'vars' as *;
 
 /// @access private
 /// @group dotcom-shell
 
-$button-transition: background-color 110ms, border-color 110ms, color 110ms;
-$search-transition: cubic-bezier(0.2, 0, 0.38, 0.9);
-$search-transition-timing: 95ms;
-
 /// @access private
 @mixin masthead-logo {
   height: 100%;
   z-index: 2;
-  background-color: $ui-background;
+  background-color: $background;
 
   a {
     position: relative;
     display: flex;
     height: 100%;
     align-items: center;
-    padding: 0 $carbon--spacing-07;
-    border: solid 2px transparent;
+    padding: 0 $spacing-07;
+    border: solid $spacing-01 transparent;
     transition: $button-transition;
     outline: none;
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
 
     &:active,
     &:focus {
       border-color: $focus;
-      background-color: $ui-01;
+      background-color: $layer-01;
     }
 
-    @include carbon--breakpoint-up(max) {
-      padding: 0 $carbon--spacing-08;
+    @include breakpoint-up(max) {
+      padding: 0 $spacing-08;
     }
 
-    @include carbon--breakpoint-down(xlg) {
-      padding: 0 $carbon--spacing-07;
+    @include breakpoint-down(xlg) {
+      padding: 0 $spacing-07;
     }
 
-    @include carbon--breakpoint-down(lg) {
-      padding: 0 $carbon--spacing-05;
+    @include breakpoint-down(lg) {
+      padding: 0 $spacing-05;
     }
 
     svg {
@@ -69,16 +79,16 @@ $search-transition-timing: 95ms;
     }
 
     &::after {
-      @include carbon--breakpoint-up(800px) {
+      @include breakpoint-up(800px) {
         content: '';
         display: block;
         position: absolute;
-        right: rem(-3px);
+        right: to-rem(-3px);
         top: 50%;
         transform: translateY(-50%);
-        height: rem(24px);
-        width: rem(1px);
-        background-color: $ui-03;
+        height: $spacing-06;
+        width: to-rem(1px);
+        background-color: $layer-accent-01;
       }
     }
   }
@@ -98,7 +108,7 @@ $search-transition-timing: 95ms;
 
   &.#{$prefix}--search-active {
     display: none;
-    @include carbon--breakpoint(md) {
+    @include breakpoint(md) {
       display: block;
     }
   }
@@ -116,7 +126,7 @@ $search-transition-timing: 95ms;
     height: 100%;
     top: 0;
     left: 0;
-    border-top: 1px solid $ui-03;
+    border-top: 1px solid $layer-accent-01;
   }
 
   &:first-of-type {
@@ -126,22 +136,22 @@ $search-transition-timing: 95ms;
   }
 
   &:hover {
-    background-color: $ui-01;
+    background-color: $layer-01;
 
     &::before {
-      border-top: 1px solid $ui-01;
+      border-top: 1px solid $layer-01;
     }
 
     + li {
       &::before {
-        border-top: 1px solid $ui-01;
+        border-top: 1px solid $layer-01;
       }
     }
   }
 
   &:focus {
     &::before {
-      border: 2px solid $interactive-01;
+      border: $spacing-01 solid $background-brand;
       box-sizing: border-box;
     }
   }
@@ -149,43 +159,60 @@ $search-transition-timing: 95ms;
 
 /// @access private
 @mixin masthead-top-nav-link {
-  @include carbon--type-style(body-short-02, true);
+  @include type-style(body-compact-02, true);
 
   border: none;
-  padding: rem(13px) $spacing-05;
-  color: $text-02;
+  padding: to-rem(13px) $spacing-05;
+  color: $text-secondary;
   white-space: nowrap;
 
+  > svg {
+    fill: $icon-secondary;
+  }
+
   &:hover {
-    background-color: $hover-ui;
+    background-color: $background-hover;
     cursor: pointer;
-    color: $text-01;
+  }
+
+  &:active {
+    background-color: $background-selected;
+  }
+
+  &:active,
+  &:hover {
+    color: $icon-primary;
+
     > svg {
-      fill: currentColor;
+      fill: $icon-primary;
     }
   }
 
   &:active,
   &:focus {
-    outline: 2px solid $interactive-01;
+    outline: 2px solid $button-primary;
     outline-offset: -2px;
-    > svg {
-      fill: $text-01;
-    }
   }
 }
 
 /// @access private
 @mixin masthead {
-  :host(#{$dds-prefix}-masthead-composite),
-  :host(#{$dds-prefix}-cloud-masthead-container) {
+  * {
+    box-sizing: border-box;
+  }
+
+  :host(#{$c4d-prefix}-masthead-composite),
+  :host(#{$c4d-prefix}-masthead-container),
+  :host(#{$c4d-prefix}-cloud-masthead-container) {
+    position: relative;
     z-index: 900;
-    padding-top: $carbon--layout-04;
+    padding-top: $spacing-09;
   }
 
   .#{$prefix}--masthead,
-  :host(#{$dds-prefix}-masthead) {
-    @include carbon--theme($carbon--theme--white, true);
+  :host(#{$c4d-prefix}-masthead) {
+    @include theme($white, true);
+    @include font-family('sans');
 
     position: fixed;
     top: 0;
@@ -195,46 +222,50 @@ $search-transition-timing: 95ms;
     transition-delay: 200ms;
     transition-timing-function: $search-transition;
     transition-duration: 300ms;
-    background-color: $ui-background;
+    background-color: $background;
 
     &[with-banner] {
       top: $spacing-13;
     }
+
+    &[has-l1] {
+      --c4d-active-l0-border-color: #{$layer-accent-01};
+    }
+
+    ::slotted([slot='profile']) {
+      background-color: $background;
+    }
   }
 
-  :host(#{$dds-prefix}-megamenu-overlay),
+  :host(#{$c4d-prefix}-megamenu-overlay),
   .#{$prefix}--masthead__overlay {
     position: fixed;
     left: 0;
-    top: 48px;
+    top: $spacing-09;
     height: 100%;
     width: 100%;
     z-index: -1;
     visibility: hidden;
     background-color: none;
     opacity: 0;
-    transition: opacity $transition--expansion $carbon--standard-easing,
-      visibility $transition--expansion $carbon--standard-easing,
-      background-color $transition--expansion $carbon--standard-easing;
+    transition: opacity $transition-expansion $standard-easing,
+      visibility $transition-expansion $standard-easing,
+      background-color $transition-expansion $standard-easing;
   }
 
-  :host(#{$dds-prefix}-megamenu-overlay)[active],
+  :host(#{$c4d-prefix}-megamenu-overlay)[active],
   .#{$prefix}--masthead__overlay-show {
-    background-color: $overlay-01;
+    background-color: $overlay;
     visibility: visible;
     opacity: 1;
     height: 100vh;
   }
 
-  :host(#{$dds-prefix}-megamenu-link-with-icon) {
-    @extend .#{$prefix}--link-with-icon;
-  }
-
   .#{$prefix}--masthead--sticky.#{$prefix}--masthead--sticky__l1 {
     top: -98px;
 
-    @include carbon--breakpoint-up(800px) {
-      top: -48px;
+    @include breakpoint-up(800px) {
+      top: -$spacing-09;
     }
   }
 
@@ -249,16 +280,16 @@ $search-transition-timing: 95ms;
     .#{$prefix}--tableofcontents__sidebar {
     top: 0;
 
-    @include carbon--breakpoint-up(800px) {
-      top: 48px;
+    @include breakpoint-up(800px) {
+      top: $spacing-09;
     }
   }
 
   .#{$prefix}--masthead__l0 {
-    @include carbon--theme($carbon--theme--white, true);
+    @include theme($white, true);
 
     position: relative;
-    background: $ui-background;
+    background: $background;
 
     &::after {
       content: '';
@@ -267,16 +298,16 @@ $search-transition-timing: 95ms;
       height: 1px;
       bottom: -1px;
       left: 0;
-      background-color: $ui-03;
+      background-color: $layer-accent-01;
     }
   }
 
   .#{$prefix}--header,
   .#{$prefix}--masthead__l0 #{$prefix}-header {
     transition-timing-function: $search-transition;
-    background: $ui-background;
+    background: $background;
     border: none;
-    max-width: rem(1584px);
+    max-width: to-rem(1584px);
     margin-left: auto;
     margin-right: auto;
     margin-bottom: 1px;
@@ -286,8 +317,8 @@ $search-transition-timing: 95ms;
     &::before {
       content: '';
       position: absolute;
-      background-color: $ui-background;
-      height: 48px;
+      background-color: $background;
+      height: $spacing-09;
       left: calc(-50vw + 50%);
       right: 100%;
       z-index: 1;
@@ -295,22 +326,22 @@ $search-transition-timing: 95ms;
     &::after {
       content: '';
       position: absolute;
-      background-color: $ui-background;
-      height: 48px;
+      background-color: $background;
+      height: $spacing-09;
       left: 100%;
       right: calc(-50vw + 50%);
     }
 
     .#{$prefix}--header__menu-arrow {
-      fill: $icon-02;
+      fill: $icon-secondary;
       &:hover {
-        fill: $icon-02;
+        fill: $icon-secondary;
       }
     }
   }
 
   .#{$prefix}--skip-to-content:focus {
-    height: rem(49px);
+    height: to-rem(49px);
   }
 
   .#{$prefix}--header__logo {
@@ -335,19 +366,19 @@ $search-transition-timing: 95ms;
     position: absolute;
     height: 100%;
     inset-inline-start: 0;
-    transition: inset $transition--base motion(standard, productive);
+    transition: inset $transition-base motion(standard, productive);
   }
 
   .#{$prefix}--header__submenu,
-  :host(#{$dds-prefix}-top-nav-menu-item) {
+  :host(#{$c4d-prefix}-top-nav-menu-item) {
     .#{$prefix}--text-truncate--end {
       white-space: normal;
     }
   }
 
-  :host(#{$dds-prefix}-top-nav-item),
-  :host(#{$dds-prefix}-top-nav-menu),
-  :host(#{$dds-prefix}-megamenu-top-nav-menu),
+  :host(#{$c4d-prefix}-top-nav-item),
+  :host(#{$c4d-prefix}-top-nav-menu),
+  :host(#{$c4d-prefix}-megamenu-top-nav-menu),
   .#{$prefix}--header__nav {
     a.#{$prefix}--header__menu-item {
       @include masthead-top-nav-link;
@@ -357,6 +388,10 @@ $search-transition-timing: 95ms;
         &[data-selected='true'] {
           border-bottom-color: transparent;
         }
+
+        &::after {
+          background-color: $focus;
+        }
       }
     }
 
@@ -365,12 +400,16 @@ $search-transition-timing: 95ms;
       &:active {
         &[data-selected='true'][aria-expanded='false'] {
           border-bottom-color: transparent;
+
+          &::after {
+            background-color: $focus;
+          }
         }
       }
     }
 
     a.#{$prefix}--header__menu-item[data-selected='true'] {
-      color: $text-01;
+      color: $text-primary;
     }
 
     a.#{$prefix}--header__menu-item[data-selected='true']::after,
@@ -382,45 +421,47 @@ $search-transition-timing: 95ms;
       bottom: 0;
       left: 0;
       right: 0;
-      height: rem(3px);
-      background-color: $link-01;
+      height: to-rem(3px);
+      background-color: var(--c4d-active-l0-border-color, $link-primary);
     }
   }
 
-  :host(#{$dds-prefix}-top-nav-menu),
-  :host(#{$dds-prefix}-megamenu-top-nav-menu) {
+  :host(#{$c4d-prefix}-top-nav-menu),
+  :host(#{$c4d-prefix}-megamenu-top-nav-menu) {
     a.#{$prefix}--header__menu-item {
       border-bottom: $spacing-01 solid transparent;
-      padding: rem(13px) $spacing-05 rem(11px);
+      padding: to-rem(13px) $spacing-05 to-rem(11px);
     }
   }
 
-  :host(#{$dds-prefix}-top-nav-menu),
+  :host(#{$c4d-prefix}-top-nav-menu),
   .#{$prefix}--header__nav {
     .#{$prefix}--header__menu-title[aria-expanded='true'] {
       z-index: 0;
-      background-color: $ui-01;
+      background-color: $layer-01;
       + .#{$prefix}--header__menu {
-        background-color: $ui-02;
-        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+        background-color: $layer-02;
+        box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
         bottom: -1px;
-        width: rem(256px);
+        width: to-rem(256px);
+
         li {
           @include masthead-top-nav-menu-item;
         }
+
         .#{$prefix}--header__menu-item {
           border: none;
           position: relative;
           height: 100%;
 
           &:hover {
-            color: $text-01;
-            background-color: $hover-ui;
+            color: $text-primary;
+            background-color: $background-hover;
           }
 
           &:focus {
             &::before {
-              border: 2px solid $interactive-01;
+              border: $spacing-01 solid $background-brand;
               box-sizing: border-box;
             }
           }
@@ -450,31 +491,29 @@ $search-transition-timing: 95ms;
     }
   }
   .#{$prefix}--header__action {
-    border: 2px solid transparent;
-    background-color: $ui-background;
+    border: $spacing-01 solid transparent;
+    background-color: $background;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    > {
-      svg {
-        position: relative;
-        fill: $icon-02;
-      }
-    }
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
       transition-duration: $search-transition-timing;
-      > {
-        svg {
-          fill: $icon-01;
-        }
+
+      > svg {
+        fill: $icon-primary;
       }
     }
 
     &:focus,
     &:active {
       border-color: $focus;
-      background-color: $hover-ui;
+      background-color: $background-hover;
+    }
+
+    > svg {
+      position: relative;
+      fill: $icon-secondary;
     }
 
     .#{$prefix}--overflow-menu {
@@ -483,7 +522,7 @@ $search-transition-timing: 95ms;
 
       &.#{$prefix}--overflow-menu--open {
         box-shadow: none;
-        outline: 2px solid $interactive-01;
+        outline: $spacing-01 solid $background-brand;
         outline-offset: 0;
       }
 
@@ -516,12 +555,12 @@ $search-transition-timing: 95ms;
 
   .#{$prefix}--header__nav-caret-left,
   .#{$prefix}--header__nav-caret-right {
-    width: rem(40px);
+    width: $spacing-08;
     height: 100%;
     display: none;
     position: absolute;
     top: 0;
-    background-color: $ui-background;
+    background-color: $background;
     border: none;
     > {
       svg {
@@ -533,20 +572,20 @@ $search-transition-timing: 95ms;
       }
     }
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
       transition-duration: $search-transition-timing;
       > {
         svg {
-          fill: $text-01;
+          fill: $text-primary;
         }
       }
     }
     &:focus,
     &:active {
       display: block;
-      background-color: $hover-ui;
-      outline: 2px solid $interactive-01;
-      outline-offset: -2px;
+      background-color: $background-hover;
+      outline: $spacing-01 solid $background-brand;
+      outline-offset: -#{$spacing-01};
       &::before,
       &::after {
         display: none;
@@ -569,8 +608,8 @@ $search-transition-timing: 95ms;
       left: 0;
       top: 50%;
       transform: translateY(-50%);
-      height: rem(24px);
-      width: rem(1px);
+      height: $spacing-06;
+      width: to-rem(1px);
       background-color: #dcdcdc;
     }
   }
@@ -578,15 +617,11 @@ $search-transition-timing: 95ms;
   .#{$prefix}--header__nav-caret-left-gradient {
     display: block;
     position: absolute;
-    left: rem(40px);
+    left: $spacing-08;
     top: 0;
     height: 100%;
-    width: rem(8px);
-    background: linear-gradient(
-      to right,
-      $ui-background,
-      rgba(255, 255, 255, 0)
-    );
+    width: $spacing-03;
+    background: linear-gradient(to right, $background, rgba(255, 255, 255, 0));
     z-index: 1;
   }
 
@@ -600,8 +635,8 @@ $search-transition-timing: 95ms;
       right: 0;
       top: 50%;
       transform: translateY(-50%);
-      height: rem(24px);
-      width: rem(1px);
+      height: $spacing-06;
+      width: to-rem(1px);
       background-color: #dcdcdc;
     }
   }
@@ -610,22 +645,18 @@ $search-transition-timing: 95ms;
     display: block;
     position: absolute;
     top: 0;
-    right: rem(40px);
+    right: $spacing-08;
     height: 100%;
-    width: rem(8px);
-    background: linear-gradient(
-      to left,
-      $ui-background,
-      rgba(255, 255, 255, 0)
-    );
+    width: $spacing-03;
+    background: linear-gradient(to left, $background, rgba(255, 255, 255, 0));
   }
 
   .#{$prefix}--header__action--active {
     position: relative;
-    border: 2px solid $interactive-01;
-    background-color: $hover-ui;
+    border: $spacing-01 solid $background-brand;
+    background-color: $background-hover;
 
-    @include carbon--breakpoint-up(sm) {
+    @include breakpoint-up(sm) {
       top: 0;
       z-index: 6001;
     }
@@ -634,7 +665,7 @@ $search-transition-timing: 95ms;
   .#{$prefix}--header__menu {
     li {
       &:hover {
-        background-color: $ui-01;
+        background-color: $layer-01;
       }
 
       &:last-of-type {
@@ -664,14 +695,14 @@ $search-transition-timing: 95ms;
 
   .#{$prefix}--header__search--search {
     outline: none;
-    width: $carbon--spacing-09;
+    width: $spacing-09;
   }
 
   // masthead profile menu
   .#{$prefix}--overflow-menu-options {
-    @include carbon--theme($carbon--theme--white, true);
+    @include theme($white, true);
 
-    background-color: $ui-background;
+    background-color: $background;
     position: fixed;
     z-index: 99999;
     /* !rtl:raw:
@@ -688,32 +719,32 @@ $search-transition-timing: 95ms;
   }
 
   .#{$prefix}--overflow-menu-options__btn {
-    @include carbon--type-style(body-short-02, true);
+    @include type-style(body-compact-02, true);
 
-    color: $text-01;
+    color: $text-primary;
     text-decoration: none;
 
     &:hover {
-      background-color: $ui-01;
+      background-color: $layer-01;
     }
   }
 
   .#{$prefix}--overflow-menu-options__option {
-    height: $layout-04;
+    height: $spacing-09;
     &:hover {
-      background-color: $ui-01;
+      background-color: $layer-01;
     }
   }
 
   .#{$prefix}--overflow-menu.#{$prefix}--overflow-menu--open {
     box-shadow: none;
-    background-color: $hover-ui;
+    background-color: $background-hover;
   }
   .#{$prefix}--header__action.#{$prefix}--overflow-menu {
     height: $spacing-09;
   }
 
-  @include carbon--breakpoint-up(800px) {
+  @include breakpoint-up(800px) {
     .#{$prefix}--header__menu-toggle__hidden {
       display: none;
     }
@@ -724,13 +755,9 @@ $search-transition-timing: 95ms;
   }
 
   @media print {
-    :host(#{$dds-prefix}-masthead),
+    :host(#{$c4d-prefix}-masthead),
     .#{$prefix}--masthead {
       display: none;
     }
   }
 }
-
-@include exports('masthead') {
-  @include masthead;
-}
diff --git a/packages/styles/scss/components/masthead/_vars.scss b/packages/styles/scss/components/masthead/_vars.scss
new file mode 100644
index 00000000000..ccc3f2b694b
--- /dev/null
+++ b/packages/styles/scss/components/masthead/_vars.scss
@@ -0,0 +1,21 @@
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+
+/// @type Value
+/// @access public
+/// @group masthead
+$button-transition: background-color 110ms, border-color 110ms, color 110ms;
+
+/// @type Value
+/// @access public
+/// @group masthead
+$search-transition: cubic-bezier(0.2, 0, 0.38, 0.9);
+
+/// @type Value
+/// @access public
+/// @group masthead
+$search-transition-timing: 95ms;
diff --git a/packages/styles/scss/components/masthead/index.scss b/packages/styles/scss/components/masthead/index.scss
deleted file mode 100644
index b9e8ed57c49..00000000000
--- a/packages/styles/scss/components/masthead/index.scss
+++ /dev/null
@@ -1,26 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import 'carbon-components/scss/components/overflow-menu/overflow-menu';
-@import 'carbon-components/scss/components/tooltip/tooltip';
-@import 'carbon-components/scss/components/ui-shell/ui-shell';
-@import 'carbon-components/scss/components/ui-shell/side-nav';
-@import '../link-with-icon/link-with-icon';
-
-// Include masthead components
-// @access private
-// @group masthead
-
-@import 'masthead';
-@import 'masthead-l1';
-@import 'masthead-search';
-@import 'masthead-leftnav';
-@import 'masthead-megamenu';
-@import 'masthead-megamenu-scroll';
-@import 'masthead-top-nav-name';
diff --git a/packages/styles/scss/components/notice-choice/_index.scss b/packages/styles/scss/components/notice-choice/_index.scss
new file mode 100644
index 00000000000..c7525a54f93
--- /dev/null
+++ b/packages/styles/scss/components/notice-choice/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'notice-choice';
+@use 'notice-choice';
+
+@include notice-choice.notice-choice;
diff --git a/packages/styles/scss/components/notice-choice/_notice-choice.scss b/packages/styles/scss/components/notice-choice/_notice-choice.scss
index 97bc2340365..674997c0017 100644
--- a/packages/styles/scss/components/notice-choice/_notice-choice.scss
+++ b/packages/styles/scss/components/notice-choice/_notice-choice.scss
@@ -4,21 +4,20 @@
  * 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 '../../globals/vars';
-@import '../../globals/imports';
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
 @mixin notice-choice {
   .#{$prefix}--nc {
     max-width: 640px;
     p,
     .#{$prefix}--checkbox-group {
-      margin-bottom: 1.5rem;
+      margin-bottom: $spacing-06;
     }
     a {
-      color: $link-01;
+      color: $link-primary;
     }
   }
 }
-
-@include exports('notice-choice') {
-  @include notice-choice;
-}
diff --git a/packages/styles/scss/components/pictogram-item/README.md b/packages/styles/scss/components/pictogram-item/README.md
deleted file mode 100644
index f3b92ac7b5d..00000000000
--- a/packages/styles/scss/components/pictogram-item/README.md
+++ /dev/null
@@ -1,22 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/pictogram-item';
-```
-
-#### Elements
-
-| Class                              | Description                               |
-| ---------------------------------- | ----------------------------------------- |
-| `.bx--pictogram-item__pictogram`   | Pictogram Item SVG component              |
-| `.bx--pictogram-item__content-col` | Pictogram Item wrapper for Component Item |
-
-#### Blocks
-
-| Class                 | Description                                               |
-| --------------------- | --------------------------------------------------------- |
-| `.bx--pictogram-item` | Highest level class name for the Pictogram Item component |
diff --git a/packages/styles/scss/components/pictogram-item/_index.scss b/packages/styles/scss/components/pictogram-item/_index.scss
new file mode 100644
index 00000000000..685e184a930
--- /dev/null
+++ b/packages/styles/scss/components/pictogram-item/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'pictogram-item';
+@use 'pictogram-item';
+
+@include pictogram-item.pictogram-item;
diff --git a/packages/styles/scss/components/pictogram-item/_pictogram-item.scss b/packages/styles/scss/components/pictogram-item/_pictogram-item.scss
index 0b1273641f5..cf492ab738c 100644
--- a/packages/styles/scss/components/pictogram-item/_pictogram-item.scss
+++ b/packages/styles/scss/components/pictogram-item/_pictogram-item.scss
@@ -5,67 +5,67 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../internal/content-item/content-item';
-@import '../link-with-icon/link-with-icon';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../internal/content-item/content-item';
+@use '../link-with-icon';
 
 @mixin pictogram-item {
   .#{$prefix}--pictogram-item,
-  :host(#{$dds-prefix}-pictogram-item) {
+  :host(#{$c4d-prefix}-pictogram-item) {
     .#{$prefix}--pictogram-item__row {
-      @include carbon--make-row;
+      @include make-row;
 
       margin-left: 0;
       margin-right: 0;
 
       max-width: 100%;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         max-width: 100%;
       }
     }
 
     .#{$prefix}--pictogram-item__wrapper {
-      @include carbon--make-col-ready;
+      @include make-col-ready;
 
-      @include carbon--make-col(4, 4);
+      @include make-col(4, 4);
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(2, 8);
+      @include breakpoint(md) {
+        @include make-col(2, 8);
       }
     }
 
     .#{$prefix}--pictogram-item__content {
-      @include carbon--make-col-ready;
+      @include make-col-ready;
 
-      @include carbon--make-col(4, 4);
+      @include make-col(4, 4);
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(6, 8);
+      @include breakpoint(md) {
+        @include make-col(6, 8);
       }
 
-      @include carbon--breakpoint('max') {
-        padding-right: $carbon--spacing-11;
+      @include breakpoint(max) {
+        padding-right: $spacing-11;
       }
     }
 
     .#{$prefix}--pictogram-item__pictogram,
     ::slotted(svg) {
       display: block;
-      margin-top: $carbon--spacing-07;
-      height: 80px;
-      width: 80px;
+      margin-top: $spacing-07;
+      height: $spacing-11;
+      width: $spacing-11;
     }
 
     &[color='blue'] {
       .#{$prefix}--pictogram-item__pictogram {
-        color: $link-01;
+        color: $link-primary;
       }
     }
   }
 }
-
-@include exports('pictogram-item') {
-  @include pictogram-item;
-}
diff --git a/packages/styles/scss/components/pricing-table/_index.scss b/packages/styles/scss/components/pricing-table/_index.scss
new file mode 100644
index 00000000000..68b0b7fc084
--- /dev/null
+++ b/packages/styles/scss/components/pricing-table/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'pricing-table';
+@use 'pricing-table';
+
+@include pricing-table.pricing-table;
diff --git a/packages/styles/scss/components/pricing-table/_pricing-table.scss b/packages/styles/scss/components/pricing-table/_pricing-table.scss
index c6f743d80e2..ea2a2734154 100644
--- a/packages/styles/scss/components/pricing-table/_pricing-table.scss
+++ b/packages/styles/scss/components/pricing-table/_pricing-table.scss
@@ -1,36 +1,42 @@
 //
-// Copyright IBM Corp. 2022, 2023
+// Copyright IBM Corp. 2022
 //
 // 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 'carbon-components/scss/components/tag/tag';
-@import '../../globals/imports';
-@import '../../globals/vars';
-@import '../buttongroup/buttongroup';
-@import '../structured-list/structured-list';
-
-@include structured-list;
-@include tags;
+@use '@carbon/styles/scss/components/tag' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../button-group' as *;
+@use '../structured-list' as *;
+
+// @include button-group;
+// @include structured-list;
+// @include tags;
 
 @keyframes sticky-header-slide-in {
   from {
     top: -100%;
   }
   to {
-    top: var(--#{$dds-prefix}-sticky-header-height);
+    top: var(--#{$c4d-prefix}-sticky-header-height);
   }
 }
 
 @mixin pricing-table {
-  .#{$prefix}--pricing-table,
-  :host(#{$dds-prefix}-pricing-table) {
-    @extend .#{$dds-prefix}--structured-list;
+  .#{$c4d-prefix}--pricing-table,
+  :host(#{$c4d-prefix}-pricing-table) {
+    @extend .#{$c4d-prefix}--structured-list;
 
     overflow-y: hidden;
 
-    .#{$dds-prefix}-pricing-table-sentinel {
+    .#{$c4d-prefix}-pricing-table-sentinel {
       display: block;
       height: 1px;
       margin-top: -1px;
@@ -39,17 +45,17 @@
   }
 
   .#{$prefix}--pricing-table-group,
-  :host(#{$dds-prefix}-pricing-table-group) {
+  :host(#{$c4d-prefix}-pricing-table-group) {
     @extend .#{$prefix}--structured-list-group;
   }
 
   .#{$prefix}--pricing-table-header-row,
-  :host(#{$dds-prefix}-pricing-table-header-row) {
+  :host(#{$c4d-prefix}-pricing-table-header-row) {
     @extend .#{$prefix}--structured-list-header-row;
 
     box-shadow: none;
-    transition: top $duration--slow-01 motion(standard, productive),
-      box-shadow $duration--fast-02 motion(standard, productive);
+    transition: top $duration-slow-01 motion(standard, productive),
+      box-shadow $duration-fast-02 motion(standard, productive);
 
     // Pseudo full width background activated when row is sticky.
     &::before {
@@ -59,27 +65,27 @@
       top: 0;
       bottom: 0;
       left: 0;
-      transition: $duration--slow-01 motion(standard, productive),
+      transition: $duration-slow-01 motion(standard, productive),
         box-shadow 0 motion(standard, productive);
     }
 
     &.#{$prefix}--pricing-table-header-row--sticky {
       position: sticky;
-      animation: sticky-header-slide-in $duration--slow-01
+      animation: sticky-header-slide-in $duration-slow-01
         motion(standard, productive);
-      top: var(--#{$dds-prefix}-sticky-header-height);
-      background-color: $ui-background;
+      top: var(--#{$c4d-prefix}-sticky-header-height);
+      background-color: $background;
       z-index: 1;
 
       &::before {
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           width: 100vw;
           left: calc(50% - 50vw);
           right: calc(50% - 50vw);
-          background-color: $ui-background;
-          box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
-          transition: $duration--fast-02 motion(standard, productive),
-            box-shadow $duration--slow-01 motion(standard, productive);
+          background-color: $background;
+          box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
+          transition: $duration-fast-02 motion(standard, productive),
+            box-shadow $duration-slow-01 motion(standard, productive);
         }
       }
 
@@ -92,9 +98,9 @@
   .#{$prefix}--pricing-table-header-row,
   .#{$prefix}--pricing-table-row,
   .#{$prefix}--pricing-table-group tr,
-  :host(#{$dds-prefix}-pricing-table-header-row),
-  :host(#{$dds-prefix}-pricing-table-row),
-  :host(#{$dds-prefix}-pricing-table-group) tr {
+  :host(#{$c4d-prefix}-pricing-table-header-row),
+  :host(#{$c4d-prefix}-pricing-table-row),
+  :host(#{$c4d-prefix}-pricing-table-group) tr {
     @extend .#{$prefix}--structured-list-all-rows;
 
     position: relative;
@@ -111,14 +117,14 @@
       bottom: 0;
       width: 100%;
       height: 1px;
-      background-color: $ui-03;
+      background-color: $layer-accent-01;
     }
   }
 
   .#{$prefix}--pricing-table-header-row,
   .#{$prefix}--pricing-table-row,
-  :host(#{$dds-prefix}-pricing-table-header-row),
-  :host(#{$dds-prefix}-pricing-table-row) {
+  :host(#{$c4d-prefix}-pricing-table-header-row),
+  :host(#{$c4d-prefix}-pricing-table-row) {
     ::slotted(:last-child) {
       flex-grow: none;
       max-width: var(--width);
@@ -128,23 +134,23 @@
   .#{$prefix}--pricing-table-header-cell,
   .#{$prefix}--pricing-table-cell,
   .#{$prefix}--pricing-table-group th,
-  :host(#{$dds-prefix}-pricing-table-header-cell),
-  :host(#{$dds-prefix}-pricing-table-cell),
-  :host(#{$dds-prefix}-pricing-table-group) th {
+  :host(#{$c4d-prefix}-pricing-table-header-cell),
+  :host(#{$c4d-prefix}-pricing-table-cell),
+  :host(#{$c4d-prefix}-pricing-table-group) th {
     @extend .#{$prefix}--structured-list-all-cells;
 
-    padding-block-end: $carbon--spacing-05;
+    padding-block-end: $spacing-05;
   }
 
   .#{$prefix}--pricing-table-header-cell,
   .#{$prefix}--pricing-table-cell,
-  :host(#{$dds-prefix}-pricing-table-header-cell),
-  :host(#{$dds-prefix}-pricing-table-cell) {
+  :host(#{$c4d-prefix}-pricing-table-header-cell),
+  :host(#{$c4d-prefix}-pricing-table-cell) {
     position: relative;
-    background-color: $ui-background;
+    background-color: $background;
 
     &.highlighted {
-      background-color: $ui-01;
+      background-color: $layer-01;
     }
 
     .#{$prefix}--pricing-table-cell-inner {
@@ -152,35 +158,23 @@
       display: flex;
       justify-content: space-between;
     }
-
-    .#{$prefix}--pricing-table-cell-content {
-      display: flex;
-      align-items: start;
-      line-height: 1.25rem;
-
-      svg {
-        margin-inline-end: $spacing-03;
-        flex-shrink: 0;
-      }
-    }
   }
 
   .#{$prefix}--pricing-table-header-cell,
-  :host(#{$dds-prefix}-pricing-table-header-cell) {
+  :host(#{$c4d-prefix}-pricing-table-header-cell) {
     @extend .#{$prefix}--structured-list-header-cell;
   }
 
   .#{$prefix}--pricing-table-header-cell:not([scope='row']),
-  :host(#{$dds-prefix}-pricing-table-header-cell:not([scope='row'])) {
-    padding-block-end: $carbon--layout-06;
-    transition: padding-block-end $duration--slow-01
-      motion(standard, productive);
+  :host(#{$c4d-prefix}-pricing-table-header-cell:not([scope='row'])) {
+    padding-block-end: $spacing-12;
+    transition: padding-block-end $duration-slow-01 motion(standard, productive);
 
     &.#{$prefix}--pricing-table-header-cell--sticky {
       border-bottom-color: transparent;
 
       &::after {
-        @include carbon--breakpoint-down('md') {
+        @include breakpoint-down(md) {
           /**
            * Mobile sticky header shadow must be set on cells since they extend
            * beyond the width of their container.
@@ -199,31 +193,30 @@
     }
 
     &.#{$prefix}--pricing-table-header-cell--sticky[type='complex'] {
-      padding-block-end: $carbon--spacing-05;
+      padding-block-end: $spacing-05;
 
       .#{$prefix}--pricing-table-header-cell-tag-wrapper,
       .#{$prefix}--pricing-table-cell-inner {
-        transition: $duration--slow-01 motion(standard, productive),
-          opacity $duration--fast-02 motion(standard, productive);
+        transition: $duration-slow-01 motion(standard, productive),
+          opacity $duration-fast-02 motion(standard, productive);
       }
 
       .#{$prefix}--pricing-table-header-cell-cta,
-      ::slotted(#{$dds-prefix}-pricing-table-header-cell-cta) {
-        margin-block-start: $carbon--spacing-05;
+      ::slotted(#{$c4d-prefix}-pricing-table-header-cell-cta) {
+        margin-block-start: $spacing-05;
       }
     }
 
     .#{$prefix}--pricing-table-header-cell-tag-wrapper,
     .#{$prefix}--pricing-table-cell-inner {
-      transition: $duration--slow-01 motion(standard, productive),
-        opacity $duration--slow-01 motion(standard, productive)
-          $duration--slow-01;
+      transition: $duration-slow-01 motion(standard, productive),
+        opacity $duration-slow-01 motion(standard, productive) $duration-slow-01;
     }
 
     &.highlighted {
       position: relative;
 
-      ::slotted(#{$dds-prefix}-pricing-table-highlight-label) {
+      ::slotted(#{$c4d-prefix}-pricing-table-highlight-label) {
         display: block;
       }
     }
@@ -237,70 +230,69 @@
   }
 
   .#{$prefix}--pricing-table-cell,
-  :host(#{$dds-prefix}-pricing-table-cell) {
+  :host(#{$c4d-prefix}-pricing-table-cell) {
     @extend .#{$prefix}--structured-list-cell;
 
     &.annotation-visible {
-      ::slotted(#{$dds-prefix}-pricing-table-cell-annotation) {
+      ::slotted(#{$c4d-prefix}-pricing-table-cell-annotation) {
         display: block;
         height: auto;
         opacity: 1;
-        margin-block-start: $carbon--spacing-05;
+        margin-block-start: $spacing-05;
         transform: translateY(0);
       }
     }
 
     &.annotation-visible.no-cell-content {
-      ::slotted(#{$dds-prefix}-pricing-table-cell-annotation) {
+      ::slotted(#{$c4d-prefix}-pricing-table-cell-annotation) {
         margin-top: 0;
       }
     }
   }
 
-  :host(#{$dds-prefix}-pricing-table-cell[icon]) {
+  :host(#{$c4d-prefix}-pricing-table-cell[icon]) {
     &[icon='checkmark'] {
-      color: $support-02;
+      color: $support-success;
     }
   }
 
   .#{$prefix}--pricing-table-highlight-label,
-  :host(#{$dds-prefix}-pricing-table-highlight-label) {
-    @include carbon--type-style('body-short-01');
+  :host(#{$c4d-prefix}-pricing-table-highlight-label) {
+    @include type-style('body-compact-01');
 
     display: none;
     position: absolute;
     bottom: 100%;
     left: 0;
     right: 0;
-    background-color: $ui-05;
-    color: $inverse-01;
-    padding: $carbon--spacing-03 $carbon--spacing-05;
+    background-color: $border-inverse;
+    color: $icon-inverse;
+    padding: $spacing-03 $spacing-05;
   }
 
   .#{$prefix}--pricing-table-header-cell-headline,
-  :host(#{$dds-prefix}-pricing-table-header-cell-headline) {
-    @include carbon--type-style('expressive-heading-03');
-
-    color: $text-01;
+  :host(#{$c4d-prefix}-pricing-table-header-cell-headline) {
+    // @include type-style('fluid-heading-03');
+    color: $text-primary;
     display: block;
   }
 
   .#{$prefix}--pricing-table-header-cell-caption,
-  :host(#{$dds-prefix}-pricing-table-header-cell-caption) {
-    @include carbon--type-style('productive-heading-01');
+  :host(#{$c4d-prefix}-pricing-table-header-cell-caption) {
+    @include type-style('heading-compact-01');
 
-    color: $text-01;
+    color: $text-primary;
     display: block;
   }
 
   .#{$prefix}--pricing-table-header-cell-tag,
-  :host(#{$dds-prefix}-pricing-table-header-cell-tag) a {
+  :host(#{$c4d-prefix}-pricing-table-header-cell-tag) a {
     @extend .#{$prefix}--tag;
     @extend .#{$prefix}--tag--green;
     @extend .#{$prefix}--tag--sm;
 
     text-decoration: none;
-    margin: $carbon--spacing-05 0 0;
+    margin: $spacing-05 0 0;
 
     &[href] {
       cursor: pointer;
@@ -308,32 +300,32 @@
   }
 
   .#{$prefix}--pricing-table-header-cell-description,
-  :host(#{$dds-prefix}-pricing-table-header-cell-description) {
-    @include carbon--type-style('body-long-01');
+  :host(#{$c4d-prefix}-pricing-table-header-cell-description) {
+    @include type-style('body-01');
 
     display: block;
-    margin-block-start: $carbon--spacing-05;
-    color: $text-01;
+    margin-block-start: $spacing-05;
+    color: $text-primary;
   }
 
   .#{$prefix}--pricing-table-header-cell-cta,
-  :host(#{$dds-prefix}-pricing-table-header-cell-cta) {
-    @extend .#{$prefix}--buttongroup-item;
+  :host(#{$c4d-prefix}-pricing-table-header-cell-cta) {
+    @extend :host(#{$c4d-prefix}-button-group-item);
 
     display: block;
-    margin-block-start: $carbon--spacing-06;
+    margin-block-start: $spacing-06;
 
     .#{$prefix}--btn svg {
       position: absolute;
-      right: 1rem;
+      right: $spacing-05;
       top: 50%;
       transform: translateY(-50%);
     }
   }
 
   .#{$prefix}--pricing-table-annotation-toggle,
-  :host(#{$dds-prefix}-pricing-table-annotation-toggle) {
-    padding-inline-end: $carbon--spacing-03;
+  :host(#{$c4d-prefix}-pricing-table-annotation-toggle) {
+    padding-inline-end: $spacing-03;
 
     button {
       background: none;
@@ -342,21 +334,17 @@
     }
 
     svg {
-      fill: $ui-04;
+      fill: $toggle-off;
     }
   }
 
   .#{$prefix}--pricing-table-cell-annotation,
-  :host(#{$dds-prefix}-pricing-table-cell-annotation) {
+  :host(#{$c4d-prefix}-pricing-table-cell-annotation) {
     display: block;
-    color: $text-02;
-    transition: $duration--fast-02 motion(standard, productive);
+    color: $text-secondary;
+    transition: $duration-fast-02 motion(standard, productive);
     height: 0;
     opacity: 0;
-    transform: translateY(-#{$carbon--spacing-05});
+    transform: translateY(-#{$spacing-05});
   }
 }
-
-@include exports('pricing-table') {
-  @include pricing-table;
-}
diff --git a/packages/styles/scss/components/quote/_index.scss b/packages/styles/scss/components/quote/_index.scss
new file mode 100644
index 00000000000..4519efc1db8
--- /dev/null
+++ b/packages/styles/scss/components/quote/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'quote';
+@use 'quote';
+
+@include quote.quote;
diff --git a/packages/styles/scss/components/quote/_quote.scss b/packages/styles/scss/components/quote/_quote.scss
index 6a02d01869a..c09bd75382e 100644
--- a/packages/styles/scss/components/quote/_quote.scss
+++ b/packages/styles/scss/components/quote/_quote.scss
@@ -1,21 +1,25 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/hang';
-@import '../../components/horizontalrule/horizontalrule';
-@import '../../components/link-with-icon/link-with-icon';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../components/horizontal-rule';
+@use '../../components/link-with-icon' as *;
 
 @mixin quote {
-  .#{$prefix}--quote,
-  :host(#{$dds-prefix}-quote) {
-    background: $ui-background;
-    padding-bottom: $layout-05;
+  :host(#{$c4d-prefix}-quote) {
+    background: $background;
+    padding-bottom: $spacing-10;
     display: block;
     @include hang;
 
@@ -26,7 +30,7 @@
   }
 
   .#{$prefix}--quote__container {
-    @include carbon--make-row;
+    @include make-row;
   }
 
   .#{$prefix}--quote__wrapper {
@@ -34,60 +38,60 @@
   }
 
   .#{$prefix}--quote__copy {
-    @include carbon--make-col-ready;
-    @include carbon--type-style('quotation-01', true);
-    @include carbon--font-family('serif');
+    @include make-col-ready;
+    @include type-style('quotation-01', true);
+    @include font-family('serif');
 
     word-break: break-word;
-    padding: 0 $spacing-07 $carbon--layout-03 $spacing-07;
+    padding: 0 $spacing-07 $spacing-07 $spacing-07;
+    margin: 0;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       padding-bottom: $spacing-09;
-      @include carbon--type-style('quotation-02', true);
+      @include type-style('quotation-02', true);
     }
   }
 
   .#{$prefix}--quote__mark {
-    @include carbon--type-style('quotation-01', true);
-    @include carbon--font-family('serif');
+    @include type-style('quotation-01', true);
+    @include font-family('serif');
 
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       // this value was chosen by visually stay the closest as possible from the quotation text in the small breakpoint
       left: 1.4rem;
     }
 
-    @include carbon--breakpoint('md') {
-      @include carbon--type-style('quotation-02', true);
+    @include breakpoint(md) {
+      @include type-style('quotation-02', true);
     }
 
     position: absolute;
     // this value was chosen by visually stay the closest as possible from the quotation text in the md and above breakpoints
     left: 0.6rem;
-    color: $text-01;
   }
 
   .#{$prefix}--quote__mark-corner-bracket {
-    @include carbon--breakpoint('sm') {
+    @include breakpoint(sm) {
       left: 0.6rem;
     }
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       left: calc(-1 * #{$spacing-03});
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       left: calc(-1 * #{$spacing-05});
     }
 
-    @include carbon--breakpoint('max') {
+    @include breakpoint(max) {
       left: calc(-1 * #{$spacing-07});
     }
   }
 
   .#{$prefix}--quote__source {
-    @include carbon--make-col-ready;
+    @include make-col-ready;
 
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       padding-bottom: $spacing-05;
     }
 
@@ -95,93 +99,88 @@
     padding-bottom: $spacing-09;
   }
 
-  :host(#{$dds-prefix}-quote-source-heading),
-  .#{$prefix}--quote__source-heading {
+  :host(#{$c4d-prefix}-quote-source-bottom-copy),
+  :host(#{$c4d-prefix}-quote-source-copy),
+  :host(#{$c4d-prefix}-quote-source-heading) {
+    display: block;
+  }
+
+  :host(#{$c4d-prefix}-quote-source-heading) {
     padding-left: $spacing-05;
-    @include carbon--type-style(expressive-heading-02, true);
+    @include type-style(heading-02, true);
   }
 
-  :host(#{$dds-prefix}-quote-source-copy),
-  .#{$prefix}--quote__source-body {
+  :host(#{$c4d-prefix}-quote-source-copy) {
     padding-left: $spacing-05;
-    @include carbon--type-style(body-long-02, true);
+    @include type-style(body-02, true);
   }
 
-  :host(#{$dds-prefix}-quote-source-bottom-copy),
-  .#{$prefix}--quote__source-optional-copy {
+  :host(#{$c4d-prefix}-quote-source-bottom-copy) {
     padding-left: $spacing-05;
-    @include carbon--type-style(body-long-02, true);
+    @include type-style(body-02, true);
   }
 
   .#{$prefix}--quote__mark-closing {
     margin-left: calc(-1 * #{$spacing-02});
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-left: calc(-1 * #{$spacing-03});
     }
   }
 
-  :host(#{$dds-prefix}-quote) .#{$prefix}--quote__footer {
+  :host(#{$c4d-prefix}-quote) .#{$prefix}--quote__footer {
     padding-left: $spacing-05;
     padding-right: $spacing-05;
 
-    ::slotted(#{$dds-prefix}-quote-link-with-icon) {
+    ::slotted(#{$c4d-prefix}-quote-link-with-icon) {
       margin-left: $spacing-05;
     }
   }
 
-  :host(#{$dds-prefix}-quote)[color-scheme='inverse'] {
-    background: $inverse-02;
-    color: $inverse-01;
-
-    .#{$prefix}--quote__mark {
-      color: $inverse-01;
-    }
-
-    .#{$prefix}--quote__footer {
-      padding-left: 0;
-      padding-right: 0;
-
-      ::slotted(#{$dds-prefix}-quote-link-with-icon) {
-        margin-left: 0;
-        padding-left: $spacing-07;
-        outline: transparent;
-      }
-    }
-  }
-
   .#{$prefix}--callout__container,
-  :host(#{$dds-prefix}-callout) {
-    @include carbon--make-row;
+  :host(#{$c4d-prefix}-callout) {
+    @include make-row;
   }
 
   .#{$prefix}--callout__column {
-    @include carbon--make-col-ready;
+    @include make-col-ready;
   }
 
   .#{$prefix}--callout__content {
-    @include carbon--breakpoint(sm) {
-      padding-top: $layout-03;
+    @include breakpoint(sm) {
+      padding-top: $spacing-07;
     }
 
-    @include carbon--breakpoint(md) {
-      @include carbon--make-col-offset(1, 8);
-      @include carbon--make-col(6, 8);
+    @include breakpoint(md) {
+      @include make-col-offset(1, 8);
+      @include make-col(6, 8);
 
       padding-left: $spacing-02;
       padding-right: $spacing-02;
-      padding-top: $layout-05;
+      padding-top: $spacing-10;
     }
 
-    @include carbon--breakpoint(lg) {
+    @include breakpoint(lg) {
       padding-left: $spacing-01;
       padding-right: $spacing-01;
-      @include carbon--make-col-offset(1, 12);
-      @include carbon--make-col(10, 12);
+      @include make-col-offset(1, 12);
+      @include make-col(10, 12);
+    }
+  }
+
+  :host(#{$c4d-prefix}-quote) #{$c4d-prefix}-hr {
+    margin: $spacing-05;
+    @include breakpoint(md) {
+      margin: $spacing-05 0;
+    }
+    @include breakpoint(lg) {
+      margin: $spacing-05 $spacing-03;
     }
   }
-}
 
-@include exports('quote') {
-  @include quote;
+  :host(#{$c4d-prefix}-quote-link-with-icon) {
+    @extend .#{$prefix}--link-with-icon !optional;
+
+    display: inline-block;
+  }
 }
diff --git a/packages/styles/scss/components/scroll-into-view/_index.scss b/packages/styles/scss/components/scroll-into-view/_index.scss
new file mode 100644
index 00000000000..44686209946
--- /dev/null
+++ b/packages/styles/scss/components/scroll-into-view/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'scroll-into-view';
+@use 'scroll-into-view';
+
+@include scroll-into-view.scroll-into-view;
diff --git a/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss b/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss
index f9248264705..fcb92d83c54 100644
--- a/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss
+++ b/packages/styles/scss/components/scroll-into-view/_scroll-into-view.scss
@@ -5,79 +5,83 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/vars' as *;
 
-:root {
-  --#{$dds-prefix}--fade-in-out-delay: 0s;
-}
-
-$dds--slide-distance: $carbon--layout-03;
-
-.#{$prefix}--fade-in {
-  transition-timing-function: carbon--motion(entrance, expressive);
-  transition-duration: $duration--slow-01;
-  transition-delay: var(--#{$dds-prefix}--fade-in-out-delay);
-  opacity: 1;
-}
+@mixin scroll-into-view {
+  :root {
+    --#{$c4d-prefix}--fade-in-out-delay: 0s;
+  }
 
-.#{$prefix}--fade-out {
-  opacity: 0;
-}
+  $cds--slide-distance: $spacing-07;
 
-.#{$prefix}--slide {
-  &-in {
-    position: relative;
-    top: 0;
-    left: 0;
+  .#{$prefix}--fade-in {
+    transition-timing-function: motion(entrance, expressive);
+    transition-duration: $duration-slow-01;
+    transition-delay: var(--#{$c4d-prefix}--fade-in-out-delay);
     opacity: 1;
-
-    transition-timing-function: carbon--motion(entrance, expressive);
-    transition-duration: $duration--slow-01;
-    transition-delay: var(--#{$dds-prefix}--fade-in-out-delay);
   }
 
-  &-up {
-    top: $dds--slide-distance;
+  .#{$prefix}--fade-out {
     opacity: 0;
   }
 
-  &-up-right {
-    top: $dds--slide-distance;
-    left: -$dds--slide-distance;
-    opacity: 0;
-  }
+  .#{$prefix}--slide {
+    &-in {
+      position: relative;
+      top: 0;
+      left: 0;
+      opacity: 1;
 
-  &-right {
-    left: -$dds--slide-distance;
-    opacity: 0;
-  }
+      transition-timing-function: motion(entrance, expressive);
+      transition-duration: $duration-slow-01;
+      transition-delay: var(--#{$c4d-prefix}--fade-in-out-delay);
+    }
 
-  &-down-right {
-    top: -$dds--slide-distance;
-    left: -$dds--slide-distance;
-    opacity: 0;
-  }
+    &-up {
+      top: $cds--slide-distance;
+      opacity: 0;
+    }
 
-  &-down {
-    top: -$dds--slide-distance;
-    opacity: 0;
-  }
+    &-up-right {
+      top: $cds--slide-distance;
+      left: -$cds--slide-distance;
+      opacity: 0;
+    }
 
-  &-down-left {
-    top: -$dds--slide-distance;
-    left: $dds--slide-distance;
-    opacity: 0;
-  }
+    &-right {
+      left: -$cds--slide-distance;
+      opacity: 0;
+    }
 
-  &-left {
-    left: $dds--slide-distance;
-    opacity: 0;
-  }
+    &-down-right {
+      top: -$cds--slide-distance;
+      left: -$cds--slide-distance;
+      opacity: 0;
+    }
 
-  &-up-left {
-    top: $dds--slide-distance;
-    left: $dds--slide-distance;
-    opacity: 0;
+    &-down {
+      top: -$cds--slide-distance;
+      opacity: 0;
+    }
+
+    &-down-left {
+      top: -$cds--slide-distance;
+      left: $cds--slide-distance;
+      opacity: 0;
+    }
+
+    &-left {
+      left: $cds--slide-distance;
+      opacity: 0;
+    }
+
+    &-up-left {
+      top: $cds--slide-distance;
+      left: $cds--slide-distance;
+      opacity: 0;
+    }
   }
 }
diff --git a/packages/styles/scss/components/search-with-typeahead/_index.scss b/packages/styles/scss/components/search-with-typeahead/_index.scss
new file mode 100644
index 00000000000..4b56e37977d
--- /dev/null
+++ b/packages/styles/scss/components/search-with-typeahead/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'search-with-typeahead';
+@use 'search-with-typeahead';
+
+@include search-with-typeahead.search-with-typeahead;
diff --git a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
index e2b39274fc3..b3f5a2906db 100644
--- a/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
+++ b/packages/styles/scss/components/search-with-typeahead/_search-with-typeahead.scss
@@ -3,24 +3,65 @@
  *
  * 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 '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/ui-shell/header';
+@use '@carbon/styles/scss/components/ui-shell/side-nav';
+@use '@carbon/styles/scss/components/dropdown';
+@use '@carbon/styles/scss/components/select';
+@use '../../globals/vars' as *;
+@use '../masthead/vars' as *;
+
+@mixin react-autosuggest-suggestion {
+  color: $text-primary;
+  height: $spacing-09;
+  display: flex;
+  span {
+    font-weight: 600;
+  }
+
+  .#{$prefix}--container-class {
+    display: flex;
+    border-bottom: 1px solid $layer-01;
+    flex: 1;
+    padding: 0 $spacing-05;
+    align-items: center;
 
-@import 'carbon-components/scss/components/ui-shell/header';
-@import 'carbon-components/scss/components/ui-shell/side-nav';
-@import '@carbon/web-components/scss/components/dropdown/dropdown';
-@import '@carbon/web-components/scss/components/select/select';
+    &:focus {
+      outline: none;
+    }
+  }
 
-@import '../../globals/vars';
-@import '../../globals/imports';
+  &:hover {
+    cursor: pointer;
+    background-color: $background-hover;
+    transition: $search-transition-timing;
+  }
 
-$search-transition: cubic-bezier(0.2, 0, 0.38, 0.9);
-$search-transition-timing: 95ms;
-$button-transition: background-color 110ms, border-color 110ms, color 110ms;
+  .#{$prefix}--container-highlight-class:not(:hover),
+  &:focus,
+  &:active {
+    outline: $spacing-01 solid $focus;
+    outline-offset: -#{$spacing-01};
+  }
+
+  &:last-of-type {
+    .#{$prefix}--container-class {
+      border-bottom: none;
+    }
+  }
+}
 
 @mixin search-with-typeahead {
   // main nav/search container excluding
   // profile and logo icons for masthead use
-  :host(#{$dds-prefix}-top-nav),
+  :host(#{$c4d-prefix}-top-nav),
   .#{$prefix}--header__search {
     display: flex;
     flex: 1;
@@ -40,7 +81,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
       .#{$prefix}--masthead__platform-name {
         z-index: 1;
         height: 100%;
-        background: $ui-background;
+        background: $background;
       }
     }
 
@@ -52,7 +93,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
       + .#{$prefix}--header__profile {
         display: none;
 
-        @include carbon--breakpoint(md) {
+        @include breakpoint(md) {
           display: flex;
         }
       }
@@ -62,29 +103,29 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
   .#{$prefix}--header__search:not(
       .#{$prefix}--masthead__header--search-active
     ) {
-    @include carbon--breakpoint(md) {
+    @include breakpoint(md) {
       overflow-x: visible;
     }
   }
 
   .#{$prefix}--header__action {
-    border: 2px solid transparent;
-    background-color: $ui-background;
+    border: $spacing-01 solid transparent;
+    background-color: $background;
     display: inline-flex;
     justify-content: center;
     align-items: center;
     > {
       svg {
         position: relative;
-        fill: $icon-02;
+        fill: $icon-secondary;
       }
     }
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
       transition-duration: $search-transition-timing;
       > {
         svg {
-          fill: $icon-01;
+          fill: $icon-primary;
         }
       }
     }
@@ -92,7 +133,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
     &:focus,
     &:active {
       border-color: $focus;
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
   }
 
@@ -101,18 +142,19 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
     top: 0;
     right: 0;
     display: flex;
+    background-color: $background;
 
     .#{$prefix}--header__search--search,
     .#{$prefix}--header__search--close {
-      color: $icon-02;
+      color: $icon-secondary;
 
-      background-color: $ui-background;
+      background-color: $background;
       padding: 0;
 
       &:hover {
-        background-color: $hover-ui;
+        background-color: $background-hover;
         svg[focusable='false'][aria-hidden='true'] {
-          fill: $icon-01;
+          fill: $icon-primary;
         }
       }
       // prevent tooltip from showing on hover
@@ -145,23 +187,25 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
 
   .#{$prefix}--header__search--search {
     outline: none;
-    width: $carbon--spacing-09;
+    width: $spacing-09;
   }
 
-  :host(#{$dds-prefix}-search-with-typeahead) {
+  :host(#{$c4d-prefix}-search-with-typeahead) {
     display: block;
     position: relative;
     outline: none;
     height: $spacing-09;
-    margin-left: rem(48px);
+    margin-left: $spacing-09;
 
-    .#{$dds-prefix}-ce__search__list {
+    .#{$c4d-prefix}-ce__search__list {
       height: 0;
       overflow: hidden;
+      margin: 0;
     }
 
-    &[open] .#{$dds-prefix}-ce__search__list {
+    &[open] .#{$c4d-prefix}-ce__search__list {
       height: auto;
+      padding: 0;
     }
 
     &[active] {
@@ -171,6 +215,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
 
       button.#{$prefix}--header__search--close.#{$prefix}--header__action[part='close-button'] {
         display: inline-flex;
+        min-width: $spacing-09;
       }
 
       button.#{$prefix}--header__search--close.#{$prefix}--header__action.#{$prefix}--header__search--hide {
@@ -188,9 +233,9 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
           bottom: 0;
           left: 0;
           display: block;
-          border-bottom: 2px solid $interactive-01;
+          border-bottom: $spacing-01 solid $border-interactive;
           width: 100%;
-          height: 2px;
+          height: $spacing-01;
           z-index: 10002;
         }
       }
@@ -199,9 +244,10 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
         display: flex;
         flex: 1;
         padding: 0 $spacing-05;
-        outline: 2px solid transparent;
-        outline-offset: -2px;
-        background-color: $ui-01;
+        outline: $spacing-01 solid transparent;
+        outline-offset: -#{$spacing-01};
+        background-color: $layer-01;
+        color: $text-primary;
         height: carbon--mini-units(6);
         z-index: 10000;
 
@@ -210,7 +256,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
           opacity: 1;
           transition-duration: 112ms;
           transition-delay: 200ms;
-          color: $text-03;
+          color: $text-placeholder;
         }
       }
 
@@ -221,16 +267,16 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
 
       .#{$prefix}--header__search--close,
       .#{$prefix}--header__search--search {
-        border: 2px solid transparent;
+        border: $spacing-01 solid transparent;
 
         &:focus,
         &:active {
-          border: 2px solid $focus;
+          border: $spacing-01 solid $focus;
         }
       }
 
       .#{$prefix}--header__action {
-        background-color: $ui-01;
+        background-color: $layer-01;
         transition-property: width;
         transition-delay: 380ms;
         transition-duration: 112ms;
@@ -239,7 +285,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
 
     &[scope-value] {
       .react-autosuggest__suggestions-container {
-        @include carbon--breakpoint-down('lg') {
+        @include breakpoint-down(lg) {
           left: $spacing-09;
           width: calc(100% - #{$spacing-09});
         }
@@ -247,21 +293,17 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
     }
 
     &[leadspace-search] {
-      background: $ui-01;
-      outline: 2px solid transparent;
-      transition: background-color $duration--fast-02
+      background: $layer-01;
+      outline: $spacing-01 solid transparent;
+      transition: background-color $duration-fast-02
           motion(standard, productive),
-        outline $duration--fast-02 motion(standard, productive),
-        top $duration--fast-02 motion(entrance, productive);
+        outline $duration-fast-02 motion(standard, productive),
+        top $duration-fast-02 motion(entrance, productive);
 
       top: 0;
 
-      @include carbon--breakpoint('md') {
-        height: $spacing-10;
-      }
-
       &:focus {
-        outline: 2px solid $focus;
+        outline: $spacing-01 solid $focus;
         .#{$prefix}--header__search--actions {
           border-bottom: none;
         }
@@ -270,22 +312,22 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
       &[unfocused] {
         outline: none;
         .#{$prefix}--header__search--actions {
-          border-bottom: 1px solid $ui-04;
+          border-bottom: 1px solid $toggle-off;
         }
       }
 
       .#{$prefix}--header__search--actions {
         display: flex;
         width: 100%;
-        border-bottom: 1px solid $ui-04;
+        border-bottom: 1px solid $toggle-off;
       }
 
       .#{$prefix}--search-magnifier-icon {
         position: absolute;
         z-index: 2;
         top: 50%;
-        left: var(--cds-spacing-05, 1rem);
-        fill: var(--cds-icon-02, #525252);
+        left: $spacing-05;
+        fill: var(--cds-icon-secondary, #525252);
         pointer-events: none;
         transform: translateY(-50%);
       }
@@ -293,10 +335,6 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
       form {
         width: 100%;
         padding-left: $spacing-09;
-
-        @include carbon--breakpoint('md') {
-          height: $spacing-10;
-        }
       }
 
       .react-autosuggest__container {
@@ -306,34 +344,24 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
       }
 
       .react-autosuggest__suggestions-container {
-        top: rem(50px);
+        top: calc($spacing-09 + 2px);
 
-        @include carbon--breakpoint('md') {
-          top: rem(66px);
+        @include breakpoint(md) {
+          top: to-rem(66px);
         }
       }
 
       .react-autosuggest__suggestions-list {
-        background-color: $ui-01;
+        background-color: $layer-01;
       }
 
       .#{$prefix}--header__search--input {
-        color: $text-01;
+        color: $text-primary;
         border-bottom: none;
-
-        @include carbon--breakpoint('md') {
-          height: $spacing-10;
-        }
-      }
-
-      .#{$prefix}--header__search--close {
-        @include carbon--breakpoint('md') {
-          height: $spacing-10;
-        }
       }
 
       &[large] {
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           height: $spacing-09;
         }
 
@@ -341,45 +369,45 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
           width: 100%;
           padding-left: $spacing-09;
 
-          @include carbon--breakpoint('md') {
+          @include breakpoint(md) {
             height: $spacing-09;
           }
         }
 
         .#{$prefix}--header__search--input {
-          @include carbon--breakpoint('md') {
+          @include breakpoint(md) {
             height: $spacing-09;
           }
         }
 
         .#{$prefix}--header__search--close {
-          @include carbon--breakpoint('md') {
+          @include breakpoint(md) {
             height: $spacing-09;
           }
         }
 
         .react-autosuggest__suggestions-container {
-          top: rem(50px);
+          top: to-rem(50px);
 
-          @include carbon--breakpoint('md') {
-            top: rem(50px);
+          @include breakpoint(md) {
+            top: to-rem(50px);
           }
         }
       }
     }
 
     &[sticky-search] {
-      top: rem(80px);
+      top: $spacing-11;
     }
 
     &[theme-sticky] {
       top: $spacing-05;
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         top: $spacing-07;
       }
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         top: $spacing-09;
       }
     }
@@ -389,104 +417,70 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
     display: flex;
     justify-content: flex-end;
     position: relative;
-    height: $carbon--spacing-09;
+    height: $spacing-09;
   }
 
   .react-autosuggest__suggestions-container {
     position: absolute;
-    top: $carbon--spacing-09;
+    top: $spacing-09;
     left: 0;
     width: 100%;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+    box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
     max-height: 80vh;
     overflow-y: auto;
   }
 
   .react-autosuggest__suggestions-list {
-    background-color: $ui-background;
+    background-color: $background;
   }
 
   .react-autosuggest__section-title {
-    height: $carbon--spacing-09;
+    height: $spacing-09;
     display: flex;
     align-items: center;
-    color: $text-02;
-    padding: 0 $carbon--spacing-05;
-    border-top: solid 1px $ui-04;
-    border-bottom: solid 1px $ui-01;
-    background-color: $ui-background;
+    color: $text-secondary;
+    padding: 0 $spacing-05;
+    border-top: solid 1px $toggle-off;
+    border-bottom: solid 1px $layer-01;
+    background-color: $background;
 
-    @include type-style('body-short-01');
+    @include type-style('body-compact-01');
   }
 
   .react-autosuggest__suggestion {
-    color: $text-01;
-    height: $carbon--spacing-09;
-    display: flex;
-    span {
-      font-weight: 600;
-    }
-
-    .#{$prefix}--container-class {
-      display: flex;
-      border-bottom: 1px solid $ui-01;
-      flex: 1;
-      padding: 0 $carbon--spacing-05;
-      align-items: center;
-
-      &:focus {
-        outline: none;
-      }
-    }
-
-    &:hover {
-      cursor: pointer;
-      background-color: $hover-ui;
-      transition: $search-transition-timing;
-    }
-
-    .#{$prefix}--container-highlight-class:not(:hover),
-    &:focus,
-    &:active {
-      outline: 2px solid $focus;
-      outline-offset: -2px;
-    }
-
-    &:last-of-type {
-      .#{$prefix}--container-class {
-        border-bottom: none;
-      }
-    }
+    @include react-autosuggest-suggestion;
   }
 
   .#{$prefix}--header__search--input {
-    font-size: $carbon--spacing-05;
+    @include font-family('sans');
+
+    font-size: $spacing-05;
     line-height: 1.375rem;
     border: none;
     width: 0;
     transition: 120ms;
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $layer-accent-01;
     padding: 0;
 
     &::placeholder {
       position: relative;
-      left: 5rem;
+      left: $spacing-11;
       opacity: 0;
     }
   }
 }
 
-:host(#{$dds-prefix}-search-with-typeahead-item) {
-  @extend .react-autosuggest__suggestion;
+:host(#{$c4d-prefix}-search-with-typeahead-item) {
+  @include react-autosuggest-suggestion;
 
   span {
     white-space: pre;
   }
 
   &[groupTitle] {
-    @include carbon--type-style('body-long-01', true);
+    @include type-style('body-01', true);
 
-    color: $text-05;
+    color: $text-helper;
 
     &:active {
       outline: none;
@@ -500,18 +494,22 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
 
   &[lastBeforeGroup] {
     .#{$prefix}--container-class {
-      border-bottom-color: $ui-04;
+      border-bottom-color: $toggle-off;
     }
   }
 }
 
-:host(#{$dds-prefix}-scoped-search-dropdown),
-:host(#{$dds-prefix}-scoped-search-dropdown-mobile) {
+:host(#{$c4d-prefix}-search-with-typeahead-item[alternate]) {
+  border-top: 1px solid $border-subtle-01;
+}
+
+:host(#{$c4d-prefix}-scoped-search-dropdown),
+:host(#{$c4d-prefix}-scoped-search-dropdown-mobile) {
   display: flex;
-  border-right: 1px solid $ui-03;
+  border-right: 1px solid $layer-accent-01;
 
   .#{$prefix}--list-box {
-    height: 3rem;
+    height: $spacing-09;
     max-height: none;
   }
 
@@ -520,8 +518,8 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
   }
 }
 
-:host(#{$dds-prefix}-scoped-search-dropdown) {
-  @include carbon--breakpoint-down('lg') {
+:host(#{$c4d-prefix}-scoped-search-dropdown) {
+  @include breakpoint-down(lg) {
     display: none;
   }
 
@@ -530,8 +528,8 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
   }
 }
 
-:host(#{$dds-prefix}-scoped-search-dropdown-mobile) {
-  width: 3rem;
+:host(#{$c4d-prefix}-scoped-search-dropdown-mobile) {
+  width: $spacing-09;
 
   .#{$prefix}--select-input {
     padding: 0;
@@ -551,11 +549,7 @@ $button-transition: background-color 110ms, border-color 110ms, color 110ms;
     width: 0;
   }
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint(lg) {
     display: none;
   }
 }
-
-@include exports('search-with-typeahead') {
-  @include search-with-typeahead;
-}
diff --git a/packages/styles/scss/components/structured-list/_index.scss b/packages/styles/scss/components/structured-list/_index.scss
new file mode 100644
index 00000000000..05247509270
--- /dev/null
+++ b/packages/styles/scss/components/structured-list/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'structured-list';
+@use 'structured-list';
+
+@include structured-list.structured-list;
diff --git a/packages/styles/scss/components/structured-list/_structured-list.scss b/packages/styles/scss/components/structured-list/_structured-list.scss
index 21960336853..be43fe68681 100644
--- a/packages/styles/scss/components/structured-list/_structured-list.scss
+++ b/packages/styles/scss/components/structured-list/_structured-list.scss
@@ -1,13 +1,17 @@
 //
-// Copyright IBM Corp. 2019, 2023
+// Copyright IBM Corp. 2019, 2022
 //
 // 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 '../../globals/imports';
-@import '../../globals/vars';
-@import '@carbon/web-components/scss/components/structured-list/structured-list';
+@use '@carbon/styles/scss/components/structured-list' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
 
 // Overridden column spanning
 @mixin structured-list-colspan($colNumber) {
@@ -19,7 +23,7 @@
     flex: 0 0 var(--width);
   }
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint(md) {
     ::slotted(*:nth-child(#{$colNumber})) {
       --cols: var(
         --col-span-md-#{$colNumber},
@@ -32,7 +36,7 @@
     }
   }
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint(lg) {
     ::slotted(*:nth-child(#{$colNumber})) {
       --cols: var(
         --col-span-lg-#{$colNumber},
@@ -53,7 +57,7 @@
   $value: null;
 
   @for $i from $begin through $end {
-    $new-value: ($i * 50vw) 0 $ui-03;
+    $new-value: ($i * 50vw) 0 $layer-accent-01;
     $value: append($value, $new-value);
 
     @if $i != $end {
@@ -67,31 +71,31 @@
 @mixin structured-list {
   // Inherited Table Styles
   .#{$prefix}--structured-list-header-row,
-  :host(#{$dds-prefix}-structured-list-header-row) {
+  :host(#{$c4d-prefix}-structured-list-header-row) {
     border-bottom: none;
   }
 
   .#{$prefix}--structured-list-header-cell,
-  :host(#{$dds-prefix}-structured-list-header-cell) {
+  :host(#{$c4d-prefix}-structured-list-header-cell) {
     @extend .#{$prefix}--structured-list-th;
 
     padding-inline: $spacing-05;
     padding-block-end: $spacing-05;
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $layer-accent-01;
   }
 
   .#{$prefix}--structured-list-group,
-  :host(#{$dds-prefix}-structured-list-group) {
+  :host(#{$c4d-prefix}-structured-list-group) {
     display: contents;
 
     tr {
       @extend .#{$prefix}--structured-list-row;
 
-      background-color: $ui-03;
-      color: $text-01;
-      border-bottom: 1px solid $ui-03;
+      background-color: $layer-accent-01;
+      color: $text-primary;
+      border-bottom: 1px solid $layer-accent-01;
 
-      @include carbon--breakpoint-down('md') {
+      @include breakpoint-down(md) {
         box-shadow: extended-box-shadow();
       }
     }
@@ -99,7 +103,7 @@
     th {
       @extend .#{$prefix}--structured-list-td;
 
-      color: $text-01;
+      color: $text-primary;
       text-align: left;
       font-weight: bold;
       padding-inline: $spacing-05;
@@ -108,31 +112,31 @@
   }
 
   .#{$prefix}--structured-list-cell,
-  :host(#{$dds-prefix}-structured-list-cell) {
+  :host(#{$c4d-prefix}-structured-list-cell) {
     @extend .#{$prefix}--structured-list-td;
 
     padding-inline: $spacing-05;
-    border-bottom: 1px solid $ui-03;
+    border-bottom: 1px solid $layer-accent-01;
   }
 
   // Default Carbon Rows/Columns
   .#{$prefix}--structured-list-all-rows,
-  :host(#{$dds-prefix}-structured-list-header-row),
-  :host(#{$dds-prefix}-structured-list-row),
-  :host(#{$dds-prefix}-structured-list-group) tr {
+  :host(#{$c4d-prefix}-structured-list-header-row),
+  :host(#{$c4d-prefix}-structured-list-row),
+  :host(#{$c4d-prefix}-structured-list-group) tr {
     --max-cols: 4;
 
-    @include carbon--breakpoint('sm') {
-      @include carbon--make-row();
+    @include breakpoint(sm) {
+      @include make-row();
 
       flex-wrap: nowrap;
     }
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       --max-cols: 8;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       --max-cols: 16;
     }
 
@@ -147,34 +151,34 @@
   }
 
   .#{$prefix}--structured-list-all-cells,
-  :host(#{$dds-prefix}-structured-list-header-cell),
-  :host(#{$dds-prefix}-structured-list-cell),
-  :host(#{$dds-prefix}-structured-list-group) td {
+  :host(#{$c4d-prefix}-structured-list-header-cell),
+  :host(#{$c4d-prefix}-structured-list-cell),
+  :host(#{$c4d-prefix}-structured-list-group) td {
     height: auto;
     scroll-snap-align: start;
 
-    @include carbon--breakpoint('sm') {
-      @include carbon--make-col(2, 4);
+    @include breakpoint(sm) {
+      @include make-col(2, 4);
     }
 
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col(2, 8);
+    @include breakpoint(md) {
+      @include make-col(2, 8);
     }
 
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col(2, 16);
+    @include breakpoint(lg) {
+      @include make-col(2, 16);
     }
   }
 
   // Internal components
-  .#{$dds-prefix}--structured-list,
-  :host(#{$dds-prefix}-structured-list) {
+  .#{$c4d-prefix}--structured-list,
+  :host(#{$c4d-prefix}-structured-list) {
     display: flex;
     flex-wrap: nowrap;
-    padding-left: $carbon--layout-01;
-    padding-right: $carbon--layout-01;
-    margin-left: -#{$carbon--layout-01};
-    margin-right: -#{$carbon--layout-01};
+    padding-left: $spacing-05;
+    padding-right: $spacing-05;
+    margin-left: -#{$spacing-05};
+    margin-right: -#{$spacing-05};
     overflow-x: auto;
     scroll-snap-type: x;
     position: relative;
@@ -194,7 +198,7 @@
 
       &::before {
         content: '';
-        width: 24px;
+        width: $spacing-06;
         height: 100%;
         position: absolute;
         top: 0;
@@ -202,21 +206,21 @@
 
       &.left {
         left: 0;
-        transform: translateX(-1rem);
+        transform: translateX(-$spacing-05);
 
         &::before {
           left: 0;
-          background-image: linear-gradient(90deg, $ui-01, transparent);
+          background-image: linear-gradient(90deg, $layer-01, transparent);
         }
       }
 
       &.right {
         left: calc(100%);
-        transform: translateX(1rem);
+        transform: translateX($spacing-05);
 
         &::before {
           right: 0;
-          background-image: linear-gradient(90deg, transparent, $ui-01);
+          background-image: linear-gradient(90deg, transparent, $layer-01);
         }
       }
     }
@@ -235,29 +239,19 @@
   }
 
   .#{$prefix}--structured-list-cell-tooltip-icon,
-  :host(#{$dds-prefix}-structured-list-cell) #{$prefix}-tooltip-icon {
+  :host(#{$c4d-prefix}-structured-list-cell) #{$prefix}-tooltip-icon {
     display: inline-flex;
     vertical-align: sub;
 
     svg {
-      fill: $icon-02;
+      fill: $icon-secondary;
     }
   }
 
   .#{$prefix}--structured-list-cell[icon],
-  :host(#{$dds-prefix}-structured-list-cell[icon]) {
+  :host(#{$c4d-prefix}-structured-list-cell[icon]) {
     &[icon='checkmark'] {
-      color: $support-02;
+      color: $support-success;
     }
   }
-
-  .#{$prefix}--structured-list-cell-icon-text,
-  :host(#{$dds-prefix}-structured-list-cell)
-    .#{$prefix}--structured-list-cell-icon-text {
-    color: $text-02;
-  }
-}
-
-@include exports('structured-list') {
-  @include structured-list;
 }
diff --git a/packages/styles/scss/components/tableofcontents/README.md b/packages/styles/scss/components/tableofcontents/README.md
deleted file mode 100644
index 139e3dbe1b4..00000000000
--- a/packages/styles/scss/components/tableofcontents/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/index';
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--tableofcontents` class.
-
-| Class                        | Description                           |
-| ---------------------------- | ------------------------------------- |
-| `.bx--tableofcontents--g100` | The className for dark theme variant. |
-
-#### Elements
-
-| Class                           | Description                                           |
-| ------------------------------- | ----------------------------------------------------- |
-| `.bx--tableofcontents__mobile`  | TOC Menu that renders for sm viewport and md viewport |
-| `.bx--tableofcontents__desktop` | TOC Menu that renders for lg viewport to max viewport |
-| `.bx--tableofcontents__sidebar` | Left side column where table of contents is rendered. |
-| `.bx--tableofcontents__content` | Right side column where main content is rendered.     |
-
-#### Blocks
-
-| Class                  | Description                                              |
-| ---------------------- | -------------------------------------------------------- |
-| `.bx--tableofcontents` | Highest level class name for the sticky table of content |
diff --git a/packages/styles/scss/components/tableofcontents/_index.scss b/packages/styles/scss/components/tableofcontents/_index.scss
new file mode 100644
index 00000000000..8b9a03bbe4d
--- /dev/null
+++ b/packages/styles/scss/components/tableofcontents/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'table-of-contents';
+@use 'table-of-contents';
+
+@include table-of-contents.table-of-contents;
diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
new file mode 100644
index 00000000000..219bef2dbd9
--- /dev/null
+++ b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -0,0 +1,464 @@
+/**
+ * Copyright IBM Corp. 2016, 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.
+ */
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/carbon-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/hang' as *;
+@use '../layout/layout';
+
+$hover-transition-timing: 95ms;
+
+// items that change according to the theme applied
+@mixin themed-items {
+  color: $text-primary;
+  background: $background;
+  .#{$prefix}--tableofcontents__item {
+    a {
+      border-left: $spacing-02 solid $border-subtle-01;
+      color: $text-secondary;
+
+      &:hover {
+        border-left-color: $layer-selected-hover-01;
+        color: $text-primary;
+      }
+    }
+  }
+
+  .#{$prefix}--tableofcontents__navbar {
+    .#{$prefix}--tableofcontents__item {
+      a {
+        white-space: nowrap;
+        border-left: none;
+        color: $text-secondary;
+      }
+
+      &:hover {
+        background-color: $background-hover;
+      }
+    }
+
+    .#{$prefix}--tableofcontents__item--active a {
+      color: $text-primary;
+
+      &::before {
+        content: '';
+        position: absolute;
+        bottom: 0;
+        height: to-rem(20px);
+        width: $spacing-01;
+        top: to-rem(14px);
+        background-color: $border-interactive;
+        margin-left: to-rem(-6px);
+      }
+    }
+  }
+
+  .#{$prefix}--tableofcontents__item--active {
+    a,
+    a:hover {
+      color: $text-primary;
+      border-left-color: $border-interactive;
+    }
+
+    a:focus {
+      border-bottom: none;
+    }
+
+    &:hover {
+      border-left-color: $border-interactive;
+    }
+  }
+}
+
+@mixin table-of-contents {
+  :host(#{$c4d-prefix}-table-of-contents) {
+    text-size-adjust: 100%;
+    @extend .#{$prefix}--grid;
+
+    display: block;
+    margin: 0;
+
+    @include themed-items;
+  }
+
+  .#{$c4d-prefix}-ce--table-of-contents__container,
+  .#{$c4d-prefix}-ce--table-of-contents-horizontal__container {
+    @include make-row();
+  }
+
+  .#{$prefix}--tableofcontents__sidebar {
+    @extend .#{$prefix}--col-lg-4;
+
+    position: inherit;
+    top: auto;
+    z-index: 10;
+    padding: 0;
+  }
+
+  .#{$prefix}--tableofcontents__content {
+    @extend .#{$prefix}--col-lg-12;
+
+    padding: $spacing-05 0 $spacing-09 0;
+  }
+
+  .#{$prefix}--tableofcontents {
+    display: block;
+    padding-top: $spacing-07;
+    margin-top: $spacing-07;
+    @include make-col(3, 4);
+  }
+
+  .#{$prefix}--tableofcontents ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .#{$prefix}--tableofcontents__item {
+    a {
+      text-decoration: none;
+      display: inline-block;
+      width: 100%;
+      padding-top: $spacing-04;
+      padding-bottom: $spacing-04;
+      padding-left: $spacing-04;
+      @include type-style('body-02');
+    }
+
+    a:hover {
+      cursor: pointer;
+    }
+
+    a:focus {
+      outline: $spacing-01 solid $focus;
+      z-index: 1;
+      position: relative;
+    }
+  }
+
+  .#{$prefix}--tableofcontents__children {
+    @include breakpoint(lg) {
+      padding-top: $spacing-10;
+      padding-left: 0;
+      margin-bottom: -$spacing-07;
+      @include make-col(3, 4);
+    }
+
+    padding-left: $spacing-05;
+    padding-top: $spacing-07;
+
+    display: block;
+
+    &[hidden] {
+      display: none;
+    }
+
+    > .#{$prefix}--link-list {
+      padding-top: 0;
+      padding-bottom: $spacing-05;
+    }
+
+    hr[data-autoid='#{$c4d-prefix}--hr'] {
+      margin-top: 0;
+    }
+  }
+
+  .#{$prefix}--tableofcontents__contents {
+    [name] {
+      display: block;
+      color: $text-primary;
+      transform: translateY(calc(-1 * #{$spacing-07}));
+
+      > * {
+        transform: translateY($spacing-07);
+      }
+
+      &:focus {
+        outline: none;
+      }
+    }
+  }
+
+  .#{$prefix}--tableofcontents-horizontal__contents {
+    [name] {
+      display: block;
+      padding-top: $spacing-09;
+    }
+  }
+
+  .#{$prefix}--tableofcontents__navbar {
+    z-index: 10;
+    position: sticky;
+    top: 0;
+    width: 100%;
+
+    border-bottom: 1px solid $border-subtle-00;
+    border-top: 1px solid $border-subtle-00;
+    height: $spacing-09;
+    background-color: $background;
+
+    .#{$prefix}--tableofcontents__item {
+      a {
+        border-left: none;
+        color: $text-secondary;
+        padding-left: $spacing-05;
+        padding-right: $spacing-05;
+        width: auto;
+
+        &:focus {
+          outline: $spacing-01 solid $focus;
+          outline-offset: -#{$spacing-01};
+          position: initial;
+        }
+      }
+    }
+
+    .#{$prefix}--tableofcontents {
+      flex: 1;
+      max-width: none;
+      padding: 0;
+      margin-top: 0;
+      position: absolute;
+      transition: left $transition-base motion(standard, productive);
+
+      ul {
+        display: flex;
+        justify-content: flex-start;
+      }
+    }
+  }
+
+  .#{$prefix}--sub-content-left {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 1px;
+    height: 100%;
+  }
+
+  .#{$prefix}--sub-content-right {
+    position: absolute;
+    top: 0;
+    right: 1px;
+    width: 1px;
+    height: 100%;
+  }
+
+  .#{$prefix}--toc__navbar-chevron-left-container[hidden],
+  .#{$prefix}--toc__navbar-chevron-right-container[hidden] {
+    display: none;
+  }
+
+  .#{$prefix}--toc__navbar-chevron-left-container,
+  .#{$prefix}--toc__navbar-chevron-right-container {
+    display: block;
+    width: $spacing-08;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    z-index: 1;
+    border: none;
+    background-color: $background;
+    > {
+      svg {
+        position: absolute;
+        fill: $icon-secondary;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+      }
+    }
+    &:hover {
+      background-color: $layer-hover-03;
+      transition-duration: $hover-transition-timing;
+      > {
+        svg {
+          fill: $text-primary;
+        }
+      }
+    }
+    &:focus,
+    &:active {
+      display: block;
+      background-color: $layer-hover-03;
+      outline: $spacing-01 solid $background-brand;
+      outline-offset: -#{$spacing-01};
+      &::before,
+      &::after {
+        display: none;
+      }
+    }
+
+    &::before {
+      content: '';
+      position: absolute;
+      left: $spacing-08;
+      top: 0;
+      height: 100%;
+      width: $spacing-03;
+      z-index: 1;
+      background: linear-gradient(
+        to right,
+        $background,
+        rgba(255, 255, 255, 0)
+      );
+    }
+  }
+
+  .#{$prefix}--toc__navbar-chevron-left-container {
+    left: 0;
+    @include breakpoint(md) {
+      left: -$spacing-05;
+    }
+
+    &:hover {
+      &::before {
+        background: linear-gradient(
+          to right,
+          $layer-hover-03,
+          rgba(255, 255, 255, 0)
+        );
+      }
+    }
+  }
+
+  .#{$prefix}--toc__navbar-chevron-right-container {
+    z-index: 2;
+    right: -$spacing-01;
+
+    @include breakpoint(md) {
+      right: -$spacing-05;
+    }
+
+    &::before {
+      content: '';
+      left: auto;
+      right: $spacing-08;
+      background: linear-gradient(to left, $background, rgba(255, 255, 255, 0));
+    }
+
+    &:hover {
+      &::before {
+        background: linear-gradient(
+          to left,
+          $layer-hover-03,
+          rgba(255, 255, 255, 0)
+        );
+      }
+    }
+  }
+
+  .#{$prefix}--tableofcontents--g100 {
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
+
+    @include themed-items;
+  }
+
+  .#{$prefix}--tableofcontents--g10 {
+    @include theme($g10, feature-flag-enabled('enable-css-custom-properties'));
+
+    @include themed-items;
+  }
+
+  .#{$prefix}--toc__print-styles {
+    display: none;
+  }
+
+  @media print {
+    :host(#{$c4d-prefix}-table-of-contents),
+    .#{$prefix}--tableofcontents {
+      .#{$prefix}--tableofcontents__sidebar {
+        position: relative;
+      }
+
+      .#{$prefix}--tableofcontents {
+        display: block;
+      }
+
+      &[toc-layout='horizontal'] {
+        .#{$prefix}--tableofcontents__navbar {
+          display: none;
+        }
+
+        .#{$prefix}--toc__print-styles {
+          display: block;
+        }
+      }
+
+      ::slotted(#{$c4d-prefix}-image) {
+        width: 25%;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-table-of-contents) .#{$prefix}--tableofcontents__navbar {
+    &::before,
+    &::after {
+      border-bottom: 1px solid $border-subtle-00;
+      border-top: 1px solid $border-subtle-00;
+      content: '';
+      background-color: $background;
+      position: absolute;
+      top: -1px;
+      height: 100%;
+      left: calc(-50vw + 50%);
+      right: 100%;
+      z-index: 1;
+    }
+
+    &::after {
+      left: 100%;
+      right: calc(-50vw + 50%);
+    }
+  }
+
+  :host(#{$c4d-prefix}-table-of-contents[toc-layout='horizontal'])
+    .#{$prefix}--tableofcontents-container {
+    position: relative;
+    overflow: scroll;
+    height: $spacing-09;
+  }
+
+  :host(#{$c4d-prefix}-table-of-contents)
+    .#{$prefix}--tableofcontents-container {
+    @include breakpoint-down(lg) {
+      position: relative;
+      overflow: scroll;
+      height: $spacing-09;
+    }
+  }
+
+  :host(#{$c4d-prefix}-table-of-contents[toc-layout='horizontal'])
+    .#{$prefix}--tableofcontents__content {
+    max-width: none;
+    flex: 1;
+  }
+
+  .#{$c4d-prefix}-ce--table-of-contents__container {
+    // TODO: Make the layout CSS grid-based so we can remove this ruleset
+    ::slotted(#{$c4d-prefix}-content-block-simple),
+    ::slotted(#{$c4d-prefix}-content-block-segmented) {
+      margin-left: calc(-1 * #{$spacing-05});
+      margin-right: calc(-1 * #{$spacing-05});
+    }
+  }
+
+  .#{$c4d-prefix}-ce--toc__navbar-chevron-container--hidden {
+    position: absolute;
+    visibility: hidden;
+  }
+}
diff --git a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss b/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
deleted file mode 100644
index 203576b4ae7..00000000000
--- a/packages/styles/scss/components/tableofcontents/_tableofcontents.scss
+++ /dev/null
@@ -1,468 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/hang';
-@import '../layout/layout';
-
-$hover-transition-timing: 95ms;
-
-// items that change according to the theme applied
-@mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
-  .#{$prefix}--tableofcontents__mobile {
-    border-bottom: 1px solid $ui-04;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--tableofcontents__desktop__item {
-    a {
-      border-left: rem(4px) solid $ui-03;
-      color: $text-02;
-
-      &:hover {
-        border-left-color: $hover-selected-ui;
-        color: $text-01;
-      }
-    }
-  }
-
-  .#{$prefix}--tableofcontents__navbar {
-    .#{$prefix}--tableofcontents__desktop__item {
-      margin-bottom: 1px;
-
-      a {
-        white-space: nowrap;
-        border-left: none;
-        color: $text-02;
-      }
-
-      &:hover {
-        background-color: $hover-ui;
-      }
-    }
-
-    .#{$prefix}--tableofcontents__desktop__item--active a {
-      color: $text-01;
-    }
-  }
-
-  .#{$prefix}--tableofcontents__desktop__item--active {
-    a,
-    a:hover {
-      color: $text-01;
-      border-left-color: $link-01;
-    }
-
-    a:focus {
-      border-bottom: none;
-    }
-
-    &:hover {
-      border-left-color: $link-01;
-    }
-  }
-}
-
-@mixin tableofcontents {
-  :host(#{$dds-prefix}-table-of-contents),
-  .#{$prefix}--tableofcontents {
-    text-size-adjust: 100%;
-    @extend .#{$prefix}--grid;
-
-    display: block;
-    margin: 0;
-
-    @include themed-items;
-  }
-
-  .#{$dds-prefix}-ce--table-of-contents__container,
-  .#{$dds-prefix}-ce--table-of-contents-horizontal__container {
-    @include carbon--make-row();
-  }
-
-  .#{$prefix}--tableofcontents__sidebar {
-    @extend .#{$prefix}--col-lg-4;
-
-    position: sticky;
-    top: 0;
-    z-index: 10;
-    padding-left: 0;
-
-    @include carbon--breakpoint('lg') {
-      position: inherit;
-      top: auto;
-    }
-  }
-
-  .#{$prefix}--tableofcontents__content {
-    @extend .#{$prefix}--col-lg-12;
-  }
-
-  .#{$prefix}--tableofcontents__children__mobile {
-    @include carbon--breakpoint('lg') {
-      display: none;
-    }
-
-    margin-top: $layout-03;
-  }
-
-  .#{$prefix}--tableofcontents__mobile {
-    margin-right: -$carbon--spacing-05;
-    background-color: $field-01;
-    padding-right: $carbon--spacing-05;
-    padding-left: $carbon--spacing-05;
-  }
-
-  .#{$prefix}--tableofcontents__mobile__select {
-    border-radius: 0;
-    border: none;
-    background-color: transparent;
-    color: $text-01;
-    height: rem(48px);
-    appearance: none;
-    @include carbon--type-style(body-short-02);
-    @include focus-outline('reset');
-
-    max-width: 100%;
-    min-width: 100%;
-    text-overflow: ellipsis;
-    padding-right: $carbon--spacing-06;
-    display: block;
-    cursor: pointer;
-    transition: background-color $duration--fast-01 motion(standard, productive),
-      outline $duration--fast-01 motion(standard, productive);
-  }
-
-  .#{$prefix}--tableofcontents__mobile__select__wrapper {
-    height: rem(47px);
-    position: relative;
-    display: flex;
-    align-items: center;
-    flex: 1 1 100%;
-  }
-  .#{$prefix}--tableofcontents__mobile__select__icon {
-    position: absolute;
-    right: 0;
-    pointer-events: none;
-    cursor: pointer;
-  }
-
-  .#{$prefix}--tableofcontents__mobile__select__option {
-    @include carbon--theme($carbon--theme--white, true);
-  }
-
-  .#{$prefix}--tableofcontents__desktop {
-    padding-top: $carbon--spacing-07;
-    margin-top: $carbon--spacing-07;
-    @include carbon--make-col(3, 4);
-  }
-
-  .#{$prefix}--tableofcontents__desktop__item {
-    a {
-      text-decoration: none;
-      display: inline-block;
-      width: 100%;
-      padding-top: rem(12px);
-      padding-bottom: rem(12px);
-      padding-left: rem(12px);
-      @include carbon--type-style('body-long-02');
-    }
-
-    a:hover {
-      cursor: pointer;
-    }
-
-    a:focus {
-      outline: 2px solid $focus;
-      z-index: 1;
-      position: relative;
-    }
-  }
-
-  .#{$prefix}--tableofcontents__desktop__children {
-    padding-top: $layout-05;
-    margin-bottom: -$carbon--spacing-07;
-
-    @include carbon--make-col(3, 4);
-
-    display: none;
-
-    @include carbon--breakpoint('lg') {
-      display: block;
-
-      &[hidden] {
-        display: none;
-      }
-    }
-
-    > .#{$prefix}--link-list {
-      padding-top: 0;
-      padding-bottom: $spacing-05;
-    }
-
-    hr[data-autoid='#{$dds-prefix}--hr'] {
-      margin-top: 0;
-    }
-  }
-
-  .#{$prefix}--tableofcontents__contents {
-    [name] {
-      display: block;
-      color: $text-01;
-      transform: translateY(calc(-1 * #{$layout-03}));
-
-      > * {
-        transform: translateY($layout-03);
-      }
-
-      &:focus {
-        outline: none;
-      }
-
-      @include carbon--breakpoint('lg') {
-        transform: none;
-
-        > * {
-          transform: none;
-        }
-      }
-    }
-  }
-
-  .#{$prefix}--tableofcontents-horizontal__contents {
-    [name] {
-      display: block;
-      padding-top: $spacing-09;
-    }
-  }
-
-  .#{$prefix}--tableofcontents__navbar {
-    z-index: 10;
-    position: sticky;
-    top: 0;
-    width: 100%;
-
-    @include carbon--breakpoint('lg') {
-      filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.3));
-      border-bottom: 1px solid $ui-04;
-      height: rem(49px);
-      background-color: $ui-01;
-    }
-
-    .#{$prefix}--tableofcontents__desktop__item {
-      a {
-        border-left: none;
-        color: $text-02;
-        padding-left: $spacing-05;
-        padding-right: $spacing-05;
-
-        &:focus {
-          outline: 2px solid $focus;
-          height: rem(48px);
-          outline-offset: -2px;
-        }
-      }
-    }
-
-    .#{$prefix}--tableofcontents__desktop__item--active a {
-      border-bottom: 2px solid $interactive-04;
-      padding-bottom: rem(10px);
-    }
-
-    .#{$prefix}--tableofcontents__desktop {
-      flex: 1;
-      max-width: none;
-      padding-top: 0;
-      margin-top: 0;
-      position: absolute;
-      transition: left $transition--base motion(standard, productive);
-
-      ul {
-        display: flex;
-        justify-content: flex-start;
-      }
-    }
-  }
-
-  .#{$prefix}--sub-content-left {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 1px;
-    height: 100%;
-  }
-
-  .#{$prefix}--sub-content-right {
-    position: absolute;
-    top: 0;
-    right: 1px;
-    width: 1px;
-    height: 100%;
-  }
-
-  .#{$prefix}--toc__navbar-caret-left,
-  .#{$prefix}--toc__navbar-caret-right {
-    width: rem(40px);
-    height: 100%;
-    display: none;
-    position: absolute;
-    top: 0;
-    border: none;
-    background-color: $ui-01;
-    > {
-      svg {
-        position: absolute;
-        fill: $icon-02;
-        top: 50%;
-        left: 50%;
-        transform: translateX(-50%) translateY(-50%);
-      }
-    }
-    &:hover {
-      background-color: $hover-ui;
-      transition-duration: $hover-transition-timing;
-      > {
-        svg {
-          fill: $text-01;
-        }
-      }
-    }
-    &:focus,
-    &:active {
-      display: block;
-      background-color: $hover-ui;
-      outline: 2px solid $interactive-01;
-      outline-offset: -2px;
-      &::before,
-      &::after {
-        display: none;
-      }
-    }
-    @media (min-width: 800px) {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--toc__navbar-caret-left-container[hidden],
-  .#{$prefix}--toc__navbar-caret-right-container[hidden] {
-    display: none;
-  }
-
-  .#{$prefix}--toc__navbar-caret-left {
-    left: 0;
-  }
-
-  .#{$prefix}--toc__navbar-caret-left-gradient {
-    display: block;
-    position: absolute;
-    left: rem(40px);
-    top: 0;
-    height: 100%;
-    width: rem(8px);
-    z-index: 1;
-    background: linear-gradient(to right, $ui-01, rgba(255, 255, 255, 0));
-  }
-
-  .#{$prefix}--toc__navbar-caret-right {
-    right: 0;
-  }
-
-  .#{$prefix}--toc__navbar-caret-right-gradient {
-    display: block;
-    position: absolute;
-    top: 0;
-    right: rem(40px);
-    height: 100%;
-    width: rem(8px);
-    background: linear-gradient(to left, $ui-01, rgba(255, 255, 255, 0));
-  }
-
-  @include carbon--breakpoint('sm') {
-    .#{$prefix}--tableofcontents__desktop {
-      display: none;
-    }
-  }
-
-  @include carbon--breakpoint('md') {
-    .#{$prefix}--tableofcontents__mobile {
-      padding-left: $carbon--spacing-05;
-    }
-  }
-
-  @include carbon--breakpoint('lg') {
-    .#{$prefix}--tableofcontents__mobile {
-      display: none;
-    }
-
-    .#{$prefix}--tableofcontents__desktop {
-      display: block;
-    }
-  }
-
-  .#{$prefix}--tableofcontents--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
-  .#{$prefix}--tableofcontents--g10 {
-    @include carbon--theme(
-      $carbon--theme--g10,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
-  .#{$prefix}--toc__print-styles {
-    display: none;
-  }
-
-  @media print {
-    :host(#{$dds-prefix}-table-of-contents),
-    .#{$prefix}--tableofcontents {
-      .#{$prefix}--tableofcontents__sidebar {
-        position: relative;
-      }
-
-      .#{$prefix}--tableofcontents__desktop {
-        display: block;
-      }
-      .#{$prefix}--tableofcontents__mobile {
-        display: none;
-      }
-
-      &[toc-layout='horizontal'] {
-        .#{$prefix}--tableofcontents__navbar {
-          display: none;
-        }
-
-        .#{$prefix}--toc__print-styles {
-          display: block;
-        }
-      }
-
-      ::slotted(#{$dds-prefix}-image) {
-        width: 25%;
-      }
-    }
-  }
-}
-
-@include exports('tableofcontents') {
-  @include tableofcontents;
-}
diff --git a/packages/styles/scss/components/tableofcontents/index.scss b/packages/styles/scss/components/tableofcontents/index.scss
deleted file mode 100644
index 9ee4887fce6..00000000000
--- a/packages/styles/scss/components/tableofcontents/index.scss
+++ /dev/null
@@ -1,9 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../globals/imports';
-@import 'tableofcontents';
diff --git a/packages/styles/scss/components/tabs-extended-media/_index.scss b/packages/styles/scss/components/tabs-extended-media/_index.scss
new file mode 100644
index 00000000000..543461557cd
--- /dev/null
+++ b/packages/styles/scss/components/tabs-extended-media/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'tabs-extended-media';
+@use 'tabs-extended-media';
+
+@include tabs-extended-media.tabs-extended-media;
diff --git a/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss b/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss
index 6ef441b7729..641669aeaae 100644
--- a/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss
+++ b/packages/styles/scss/components/tabs-extended-media/_tabs-extended-media.scss
@@ -5,64 +5,61 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../link-list/index';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import 'carbon-components/scss/components/tabs/tabs';
-@import 'carbon-components/scss/components/accordion/accordion';
-@import 'carbon-components/scss/components/accordion/keyframes';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/components/accordion';
+@use '@carbon/styles/scss/components/tabs';
+@use '../link-list';
+@use '../../globals/vars' as *;
 
 @mixin tabs-extended-media {
-  :host(#{$dds-prefix}-tabs-extended-media) {
+  :host(#{$c4d-prefix}-tabs-extended-media) {
     margin: 0;
     display: flex;
     overflow-x: hidden;
 
-    @include carbon--breakpoint(sm) {
-      padding-top: $carbon--spacing-07;
-      padding-bottom: $carbon--spacing-12;
+    @include breakpoint(sm) {
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-12;
     }
-    @include carbon--breakpoint(lg) {
-      padding-top: $carbon--spacing-10;
-      padding-bottom: 10rem;
+    @include breakpoint(lg) {
+      padding-top: $spacing-10;
+      padding-bottom: $spacing-13;
     }
 
     ::slotted([slot='heading']) {
-      margin-bottom: $carbon--spacing-09;
-      padding-left: $carbon--spacing-05;
-      padding-right: $carbon--spacing-05;
+      margin-bottom: $spacing-09;
+      padding-left: $spacing-05;
+      padding-right: $spacing-05;
 
-      @include carbon--breakpoint(lg) {
-        padding-top: var(--cds-spacing-04, 0.75rem);
+      @include breakpoint(lg) {
+        padding-top: $spacing-04;
       }
     }
 
     .#{$prefix}--tabs-extended-media {
       width: 100%;
 
-      @include carbon--breakpoint(lg) {
+      @include breakpoint(lg) {
         display: flex;
       }
     }
 
     .#{$prefix}--heading {
-      @include carbon--breakpoint(lg) {
+      @include breakpoint(lg) {
         flex: 0 0 25%;
       }
     }
 
     .#{$prefix}--accordion__content {
-      margin-top: -$carbon--spacing-07;
-      margin-bottom: $carbon--spacing-05;
-      padding: $carbon--spacing-07 0 0;
+      margin-top: -$spacing-07;
+      margin-bottom: $spacing-05;
+      padding: $spacing-07 0 0;
 
-      @include carbon--breakpoint(md) {
-        margin-bottom: -$carbon--spacing-05;
+      @include breakpoint(md) {
+        margin-bottom: -$spacing-05;
       }
     }
   }
 }
-
-@include exports('tabs-extended-media') {
-  @include tabs-extended-media;
-}
diff --git a/packages/styles/scss/components/tabs-extended/_index.scss b/packages/styles/scss/components/tabs-extended/_index.scss
new file mode 100644
index 00000000000..91764d46102
--- /dev/null
+++ b/packages/styles/scss/components/tabs-extended/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'tabs-extended';
+@use 'tabs-extended';
+
+@include tabs-extended.tabs-extended;
diff --git a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
index ca7eefc94d7..e70dbdc7647 100644
--- a/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
+++ b/packages/styles/scss/components/tabs-extended/_tabs-extended.scss
@@ -5,276 +5,165 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/imports';
-@import '../link-list/index';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import 'carbon-components/scss/components/tabs/tabs';
-@import '@carbon/web-components/scss/components/tooltip/tooltip';
-@import 'carbon-components/scss/components/accordion/accordion';
-@import 'carbon-components/scss/components/accordion/keyframes';
+@use 'sass:math';
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/button' as *;
+@use '../../globals/vars' as *;
+@use '@carbon/styles/scss/components/tabs/vars' as *;
+@use '../../../../carbon-web-components/src/components/tabs/tabs';
 
 @mixin tabs-extended {
-  :host(#{$dds-prefix}-tabs-extended),
-  :host(#{$dds-prefix}-tabs-extended-media) {
-    .#{$prefix}--tabs {
-      display: none;
-
-      .#{$prefix}--tabs__nav {
-        position: relative;
-        overflow: visible;
-      }
-
-      .#{$prefix}--tabs__nav-item {
-        min-height: $spacing-09;
-        width: calc(100% / (12 / 2) - (#{$spacing-01} / 2));
-        height: auto;
-
-        p {
-          @include carbon--type-style('body-long-01', true);
-        }
-
-        &:hover:not(.bx--tabs__nav-item--disabled) {
-          box-shadow: none;
-        }
-      }
-
-      .#{$prefix}--tabs__nav-item--selected:not(
-          .#{$prefix}--tabs__nav-item--disabled
-        ) {
-        .#{$prefix}--tabs__nav-link,
-        .#{$prefix}--tabs__nav-link:focus,
-        .#{$prefix}--tabs__nav-link:active {
-          border-bottom: rem(2px) solid $border-interactive;
-
-          p {
-            @include type-style('productive-heading-02');
-
-            color: $text-01;
-          }
-        }
-      }
+  :host(#{$c4d-prefix}-tabs-extended),
+  :host(#{$c4d-prefix}-tabs-extended-media) {
+    @extend :host(#{$prefix}-tabs);
+  }
 
-      .#{$prefix}--tabs__nav-link:hover {
-        p {
-          @include type-style('body-short-02');
+  :host(#{$c4d-prefix}-tab) {
+    @extend :host(#{$prefix}-tab);
 
-          color: $text-01;
-        }
-      }
+    .#{$prefix}--tabs__nav-link {
+      display: flex;
+      height: $spacing-08;
+      font-size: $spacing-05;
+    }
 
+    &[selected] {
       .#{$prefix}--tabs__nav-link {
-        height: auto;
-        overflow: visible;
-        white-space: normal;
-        background: none;
-        border: initial;
-        border-bottom: rem(2px) solid $ui-03;
-        display: inline-flex;
-        width: 100%;
-        text-align: left;
-
-        &[hasTooltip] {
-          @include tooltip--trigger('definition', top);
-          @include tooltip--placement('definition', 'bottom', 'start');
-
-          &::before,
-          &::after {
-            display: none;
-          }
+        @include type-style('heading-compact-01');
 
-          &:hover,
-          &:focus {
-            &::before,
-            &::after {
-              display: flex;
-            }
-          }
+        border-bottom: $spacing-01 solid $border-interactive;
+      }
+    }
+  }
 
-          &:focus {
-            @include focus-outline('outline');
-          }
-        }
+  :host(#{$c4d-prefix}-tab:hover) {
+    background-color: transparent;
+    box-shadow: 0 -1px 0 $background-hover;
 
-        div {
-          align-self: flex-start;
-        }
+    a.#{$prefix}--tabs__nav-link {
+      border-bottom: $tab-underline-color-hover;
+      color: $text-primary;
+    }
+  }
 
-        /* stylelint-disable value-no-vendor-prefix, property-no-vendor-prefix */
-        p {
-          display: -webkit-box;
-          white-space: normal;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          text-overflow: ellipsis;
-          overflow: hidden;
-          height: 100%;
-          line-height: 1.375rem;
-          hyphens: auto;
+  :host(#{$c4d-prefix}-tab[disabled][role]),
+  :host(#{$c4d-prefix}-tab[disabled][role]:hover) {
+    background-color: transparent;
+    box-shadow: none;
+    cursor: not-allowed;
+    outline: none;
+
+    .#{$prefix}--tabs__nav-link {
+      color: $tab-text-disabled;
+      pointer-events: none;
+      outline: none;
+      border-bottom: $tab-underline-disabled;
+    }
+  }
 
-          @include type-style('body-short-02');
-        }
-        /* stylelint-enable value-no-vendor-prefix, property-no-vendor-prefix */
-      }
+  :host(#{$c4d-prefix}-tab[selected]) {
+    display: flex;
+    background-color: transparent;
 
-      @include carbon--breakpoint(lg) {
-        display: block;
-      }
+    .#{$prefix}--tabs__nav-link {
+      @include type-style('heading-01');
+      font-size: $spacing-05;
     }
 
-    .#{$prefix}--tab-content {
-      @include carbon--type-style('body-long-02', true);
-
-      padding: 0;
-      display: none;
+    transition: color $duration-fast-01 motion(standard, productive);
 
-      @include carbon--breakpoint(lg) {
-        display: block;
+    .#{$prefix}--tabs__nav-link {
+      &,
+    // Need to override core Carbon's non-selected focus color
+    &:focus,
+    &:active {
+        color: $text-primary;
       }
     }
+  }
 
-    // Add "Vertical" orientation styling.
-    .#{$prefix}--tabs-extended--vertical {
-      display: flex;
-      flex-wrap: wrap;
-
-      .#{$prefix}--tabs {
-        @include carbon--breakpoint(lg) {
-          @include carbon--make-col(3, 16);
-        }
-
-        .#{$prefix}--tabs__nav {
-          @include carbon--breakpoint(md) {
-            flex-direction: column;
-          }
-        }
-
-        .#{$prefix}--tabs__nav-link {
-          width: auto;
-          padding: 0;
-          border-bottom: rem(2px) solid transparent;
-        }
+  // Disabled tab never gets selected, but we guard for manual addition of `selected` attribute
+  :host(#{$c4d-prefix}-tab[disabled][selected]),
+  :host(#{$c4d-prefix}-tab[disabled][selected]:hover),
+  :host(#{$c4d-prefix}-tab[disabled][in-focus][selected]),
+  :host(#{$c4d-prefix}-tab[disabled][in-focus][selected]:hover) {
+    display: flex;
+    background-color: transparent;
+    box-shadow: none;
 
-        .#{$prefix}--tabs__nav-item {
-          width: max-content;
-          max-width: calc(100% - #{$spacing-06});
-          min-height: rem(26px);
-          margin-top: $spacing-06;
-        }
-      }
+    @include focus-outline('reset');
 
-      .#{$prefix}--accordion {
-        flex: 0 0 1;
-      }
+    .#{$prefix}--tabs__nav-link {
+      @include type-style('body-short-01');
 
-      .#{$prefix}--tab-content {
-        @include carbon--breakpoint(lg) {
-          @include carbon--make-col(12, 16);
-          @include carbon--make-col-offset(1, 16);
-        }
-      }
-    }
+      color: $tab-text-disabled;
+      border-bottom: $tab-underline-disabled;
 
-    .#{$prefix}--accordion {
-      display: block;
-      @include carbon--breakpoint(lg) {
-        display: none;
+      &:focus,
+      &:active {
+        border-bottom-width: to-rem(3px);
       }
     }
+  }
 
-    .#{$prefix}--accordion__heading {
-      justify-content: space-between;
-      z-index: 0;
-    }
+  :host(#{$c4d-prefix}-tabs-extended[type='contained']) {
+    @extend :host(#{$prefix}-tabs[type='contained']);
+  }
 
-    .#{$prefix}--accordion__title {
-      max-width: rem(640px);
-      margin-right: $spacing-07;
-    }
+  :host(#{$c4d-prefix}-tab[type='contained']) {
+    background-color: $layer-accent-01;
 
-    .#{$prefix}--accordion__content {
-      p {
-        @include carbon--type-style('body-long-02', true);
-      }
+    a.#{$prefix}--tabs__nav-link {
+      height: $spacing-09;
+      padding: 0 $spacing-05;
+      font-size: $spacing-05;
     }
   }
 
-  @media print {
-    :host(#{$dds-prefix}-tabs-extended),
-    :host(#{$dds-prefix}-tabs-extended-media) {
-      .#{$prefix}--accordion__content {
-        display: block;
-      }
+  :host(#{$c4d-prefix}-tab[type='contained']),
+  :host(#{$c4d-prefix}-tab[type='contained']:hover) {
+    a.#{$prefix}--tabs__nav-link {
+      border-bottom: none;
+      // Draws the border without affecting the inner-content
+      box-shadow: to-rem(-1px) 0 0 0 $border-strong;
     }
   }
-}
-
-@include exports('tabs-extended') {
-  @include tabs-extended;
-}
-
-button.#{$prefix}--tabs__nav-link {
-  @include focus-outline('reset');
 
-  display: inline-block;
-  overflow: hidden;
-  width: calc(100% - #{$spacing-07});
-  height: rem(40px);
-  padding: $spacing-04 0;
-  border-bottom: 1px solid $ui-03;
-  margin: 0 $spacing-05;
-  color: $text-02;
-  font-weight: 400;
-  line-height: $spacing-05;
-  text-decoration: none;
-  text-overflow: ellipsis;
-  transition: border $duration--fast-01 motion(standard, productive),
-    outline $duration--fast-01 motion(standard, productive);
-  white-space: nowrap;
-
-  &:focus,
-  &:active {
-    @include focus-outline('outline');
+  :host(#{$c4d-prefix}-tab[type='contained'][hide-divider])
+    a.#{$prefix}--tabs__nav-link {
+    box-shadow: to-rem(-1px) 0 0 0 transparent;
+  }
 
-    width: 100%;
-    padding-left: $spacing-05;
-    margin: 0;
+  :host(#{$c4d-prefix}-tab[type='contained'][disabled][role])
+    .#{$prefix}--tabs__nav-link {
+    background-color: $button-disabled;
+    border-bottom: none;
+    color: $text-on-color-disabled;
   }
 
-  @include carbon--breakpoint(md) {
-    width: rem(160px);
-    padding: $spacing-04 $spacing-05 $spacing-03;
-    border-bottom: $tab-underline-color;
-    margin: 0;
-    line-height: inherit;
+  :host(#{$c4d-prefix}-tab[type='contained'][selected]),
+  :host(#{$c4d-prefix}-tab[type='contained'][selected]:hover) {
+    background-color: $layer-01;
 
-    &:focus,
-    &:active {
-      width: rem(160px);
-      border-bottom: rem(2px);
+    .#{$prefix}--tabs__nav-link {
+      // Draws the border without affecting the inner-content
+      box-shadow: inset 0 $spacing-01 0 0 $interactive;
+      border-bottom: none;
     }
-  }
-}
 
-.#{$prefix}--tabs--container button.#{$prefix}--tabs__nav-link {
-  @include carbon--breakpoint(md) {
-    height: rem(48px);
-    padding: $spacing-03 $spacing-05;
-    border-bottom: none;
+    .#{$prefix}--tabs__nav-link:focus,
+    .#{$prefix}--tabs__nav-link:active {
+      box-shadow: none;
+    }
   }
-}
-
-.#{$prefix}--tabs__nav-item--disabled button.#{$prefix}--tabs__nav-link:active {
-  border-bottom: $tab-underline-disabled;
-  outline: none;
-}
 
-.#{$prefix}--tabs__nav-item:not(.#{$prefix}--tabs__nav-item--selected):not(
-    .#{$prefix}--tabs__nav-item--disabled
-  ):not(.#{$prefix}--tabs__nav-item--selected)
-  button.#{$prefix}--tabs__nav-link:active {
-  color: $text-02;
-}
-
-.#{$prefix}--accordion__title {
-  hyphens: auto;
+  :host(#{$c4d-prefix}-tab[type='contained']:hover) {
+    background-color: $layer-accent-hover;
+  }
 }
diff --git a/packages/styles/scss/components/tag-group/_index.scss b/packages/styles/scss/components/tag-group/_index.scss
new file mode 100644
index 00000000000..544ecb787c0
--- /dev/null
+++ b/packages/styles/scss/components/tag-group/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'tag-group';
+@use 'tag-group';
+
+@include tag-group.tag-group;
diff --git a/packages/styles/scss/components/tag-group/_tag-group.scss b/packages/styles/scss/components/tag-group/_tag-group.scss
index d5de05b2b7b..a332296e3cc 100644
--- a/packages/styles/scss/components/tag-group/_tag-group.scss
+++ b/packages/styles/scss/components/tag-group/_tag-group.scss
@@ -5,23 +5,26 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../globals/imports';
-@import '../../globals/vars';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '../../globals/vars' as *;
 
-:host(#{$dds-prefix}-tag-group) {
-  display: flex;
-  flex-flow: row wrap;
-  gap: $spacing-03;
-
-  ::slotted(#{$dds-prefix}-tag-link) {
+@mixin tag-group {
+  :host(#{$c4d-prefix}-tag-group) {
     display: flex;
-  }
+    flex-flow: row wrap;
+    gap: $spacing-03;
+
+    ::slotted(#{$c4d-prefix}-tag-link) {
+      display: flex;
+    }
 
-  // !important necessary for React wrappers since Carbon React styles override margin without this
-  ::slotted(.#{$prefix}--tag),
-  ::slotted(#{$prefix}-filter-tag),
-  ::slotted(#{$prefix}-tag) {
-    // stylelint-disable-next-line declaration-no-important
-    margin: 0 !important;
+    // !important necessary for React wrappers since Carbon React styles override margin without this
+    ::slotted(.#{$prefix}--tag),
+    ::slotted(#{$prefix}-filter-tag),
+    ::slotted(#{$prefix}-tag) {
+      // stylelint-disable-next-line declaration-no-important
+      margin: 0 !important;
+    }
   }
 }
diff --git a/packages/styles/scss/components/tag-link/_index.scss b/packages/styles/scss/components/tag-link/_index.scss
new file mode 100644
index 00000000000..f481b3c745d
--- /dev/null
+++ b/packages/styles/scss/components/tag-link/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'tag-link';
+@use 'tag-link';
+
+@include tag-link.tag-link;
diff --git a/packages/styles/scss/components/tag-link/_tag-link.scss b/packages/styles/scss/components/tag-link/_tag-link.scss
index cb4e9c60543..43ec249ad9f 100644
--- a/packages/styles/scss/components/tag-link/_tag-link.scss
+++ b/packages/styles/scss/components/tag-link/_tag-link.scss
@@ -5,29 +5,34 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../../globals/imports';
-@import '../../globals/vars';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/vars' as *;
 
-:host(#{$dds-prefix}-tag-link) a {
-  @include carbon--type-style(body-long-01, true);
+@mixin tag-link {
+  :host(#{$c4d-prefix}-tag-link) a {
+    @include type-style(body-01, true);
 
-  padding: rem(6px) $carbon--spacing-05;
-  border-radius: rem(15px);
-  background-color: $ui-01;
-  color: $text-02;
-  text-decoration: none;
+    padding: to-rem(6px) $spacing-05;
+    border-radius: to-rem(15px);
+    background-color: $layer-01;
+    color: $text-secondary;
+    text-decoration: none;
 
-  &:hover {
-    background-color: $hover-ui;
-    color: $text-01;
-  }
+    &:hover {
+      background-color: $background-hover;
+      color: $text-primary;
+    }
 
-  &:active {
-    background-color: $active-ui;
-  }
+    &:active {
+      background-color: $layer-active-01;
+    }
 
-  &:focus {
-    outline: none;
-    box-shadow: inset 0 0 0 2px $focus;
+    &:focus {
+      outline: none;
+      box-shadow: inset 0 0 0 $spacing-01 $focus;
+    }
   }
 }
diff --git a/packages/styles/scss/components/universal-banner/_universal-banner.scss b/packages/styles/scss/components/universal-banner/_universal-banner.scss
deleted file mode 100644
index ac22d9fab73..00000000000
--- a/packages/styles/scss/components/universal-banner/_universal-banner.scss
+++ /dev/null
@@ -1,229 +0,0 @@
-//
-// Copyright IBM Corp. 2019, 2023
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-@import '../../globals/imports';
-@import '../../globals/vars';
-
-:host(#{$dds-prefix}-universal-banner) {
-  @include carbon--theme($carbon--theme--g100, true);
-
-  display: block;
-  background-color: $ui-background;
-
-  .#{$prefix}--universal-banner-content-wrapper {
-    @include carbon--make-row;
-  }
-
-  .#{$prefix}--universal-banner-layout-container {
-    @include carbon--make-container;
-
-    max-height: $spacing-13;
-
-    /* stylelint-disable selector-pseudo-class-no-unknown */
-    &:where(a) {
-      /* stylelint-enable selector-pseudo-class-no-unknown */
-      display: block;
-      text-decoration: none;
-      border: $spacing-01 solid transparent;
-
-      &:hover,
-      &:active {
-        background: $hover-ui;
-      }
-
-      &:focus,
-      &:active {
-        outline: rem(1px) solid $ui-background;
-        outline-offset: rem(-1px);
-        border-color: $focus;
-      }
-    }
-  }
-
-  .#{$prefix}--universal-banner-text-container,
-  .#{$prefix}--universal-banner-cta-container,
-  .#{$prefix}--universal-banner-icon {
-    padding-block: $spacing-05;
-
-    @include carbon--breakpoint('lg') {
-      padding-block: $spacing-07;
-    }
-  }
-
-  .#{$prefix}--universal-banner-image-container {
-    max-height: $spacing-13;
-    padding-inline-end: $spacing-05;
-    position: relative;
-
-    ::slotted(#{$dds-prefix}-universal-banner-image) {
-      position: absolute;
-      width: calc(100% + #{$spacing-05});
-      height: 100%;
-      inset-inline-end: 0;
-      inset-block-start: 0;
-
-      @include carbon--breakpoint('max') {
-        width: 100%;
-      }
-    }
-  }
-
-  .#{$prefix}--universal-banner-text-container {
-    @include carbon--make-col(4, 4);
-
-    padding-inline: $spacing-05;
-    max-width: calc(100% - (20px + #{$spacing-05}));
-
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col(7, 8);
-    }
-
-    @include carbon--breakpoint('lg') {
-      padding-inline-end: $spacing-09;
-    }
-  }
-
-  .#{$prefix}--universal-banner-cta-container {
-    display: none;
-
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col(4, 16);
-    }
-
-    @include carbon--breakpoint('xlg') {
-      @include carbon--make-col(3, 16);
-    }
-
-    @include carbon--breakpoint('max') {
-      @include carbon--make-col(4, 16);
-    }
-  }
-
-  .#{$prefix}--universal-banner-icon {
-    width: calc(20px + #{$spacing-05});
-    padding-inline-end: $spacing-05;
-    color: $text-01;
-    text-align: right;
-
-    svg {
-      margin-top: $spacing-01;
-    }
-
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col(1, 8);
-
-      padding-inline-end: 0;
-    }
-
-    @include carbon--breakpoint('lg') {
-      display: none;
-    }
-  }
-
-  &[has-image] {
-    .#{$prefix}--universal-banner-image-container {
-      display: none;
-    }
-  }
-
-  &[image-width='4-col'] {
-    .#{$prefix}--universal-banner-image-container {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(4, 16);
-      }
-    }
-
-    .#{$prefix}--universal-banner-text-container {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(7, 16);
-      }
-    }
-
-    .#{$prefix}--universal-banner-cta-container {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col-offset(1, 16);
-      }
-    }
-  }
-
-  &[image-width='8-col'] {
-    .#{$prefix}--universal-banner-image-container {
-      @include carbon--make-col(8, 16);
-    }
-
-    .#{$prefix}--universal-banner-text-container {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(4, 16);
-      }
-    }
-  }
-
-  &:not([has-image]) {
-    .#{$prefix}--universal-banner-text-container {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(11, 16);
-      }
-    }
-
-    .#{$prefix}--universal-banner-cta-container {
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col-offset(1, 16);
-      }
-    }
-  }
-
-  ::slotted(#{$dds-prefix}-button-cta) {
-    @include carbon--theme($carbon--theme--g100, true);
-
-    width: 100%;
-    display: block;
-    max-width: 320px;
-
-    @include carbon--breakpoint('xlg') {
-      width: calc(100% + #{$spacing-05});
-    }
-  }
-
-  #{$dds-prefix}-link-with-icon {
-    @include carbon--breakpoint('md') {
-      display: none;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-universal-banner-heading) {
-  @include carbon--type-style('expressive-heading-02', true);
-
-  display: block;
-  color: $text-01;
-  max-width: 960px;
-
-  @include carbon--breakpoint('lg') {
-    width: calc(100% - #{$spacing-10});
-  }
-
-  @include carbon--breakpoint('lg') {
-    width: calc(100% - #{$spacing-10});
-  }
-
-  @include carbon--breakpoint('xlg') {
-    width: calc(100% - #{$spacing-07});
-  }
-}
-
-:host(#{$dds-prefix}-universal-banner-copy) {
-  @include carbon--type-style('body-short-02', true);
-
-  display: block;
-  color: $text-01;
-}
-
-:host(#{$dds-prefix}-universal-banner-image) {
-  .#{$prefix}--image__img {
-    object-fit: cover;
-  }
-}
diff --git a/packages/styles/scss/components/video-player/_index.scss b/packages/styles/scss/components/video-player/_index.scss
new file mode 100644
index 00000000000..6c0aae51df9
--- /dev/null
+++ b/packages/styles/scss/components/video-player/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'video-player';
+@use 'video-player';
+
+@include video-player.video-player;
diff --git a/packages/styles/scss/components/video-player/_video-player.scss b/packages/styles/scss/components/video-player/_video-player.scss
index 099daec5d0f..b1aa1166769 100644
--- a/packages/styles/scss/components/video-player/_video-player.scss
+++ b/packages/styles/scss/components/video-player/_video-player.scss
@@ -1,70 +1,75 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/ratio-base';
-
+@use '../../globals/vars' as *;
+@use '../../globals/utils/ratio-base' as *;
+@use '@carbon/styles/scss/colors' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
 $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
 
 @mixin video-player {
-  :host(#{$dds-prefix}-video-player),
-  .#{$prefix}--video-player {
-    color: var(--#{$dds-prefix}--video-caption--color, $text-02);
+  :host(#{$c4d-prefix}-video-player),
+  .#{$c4d-prefix}--video-player {
+    color: var(--#{$c4d-prefix}--video-caption--color, $text-secondary);
 
-    .#{$prefix}--image__img {
+    .#{$c4d-prefix}--image__img {
       width: 100%;
       height: 100%;
     }
 
     &:focus {
       outline: none;
-      .#{$prefix}--video-player__video-container {
+      .#{$c4d-prefix}--video-player__video-container {
         &::before {
           content: ' ';
           position: absolute;
-          top: rem(2px);
-          left: rem(2px);
-          right: rem(2px);
-          bottom: rem(2px);
+          top: $spacing-01;
+          left: $spacing-01;
+          right: $spacing-01;
+          bottom: $spacing-01;
           z-index: 1;
-          border: 1px solid $inverse-focus-ui;
-          outline: 2px solid $focus;
+          border: 1px solid $focus-inverse;
+          outline: $spacing-01 solid $focus;
         }
       }
     }
   }
 
-  :host(#{$dds-prefix}-video-player[background-mode='true']),
-  .#{$prefix}--video-player[background-mode='true'] {
-    .#{$prefix}--video-player__video-container {
+  :host(#{$c4d-prefix}-video-player[background-mode='true']),
+  .#{$c4d-prefix}--video-player[background-mode='true'] {
+    .#{$c4d-prefix}--video-player__video-container {
       height: 100%;
       padding: 0;
     }
   }
 
-  .#{$prefix}--video-player
-    .#{$prefix}--video-player__image-overlay:focus::before {
+  .#{$c4d-prefix}--video-player
+    .#{$c4d-prefix}--video-player__image-overlay:focus::before {
     content: ' ';
     position: absolute;
-    top: rem(2px);
-    left: rem(2px);
-    right: rem(2px);
-    bottom: rem(2px);
+    top: $spacing-01;
+    left: $spacing-01;
+    right: $spacing-01;
+    bottom: $spacing-01;
     z-index: 1;
-    border: 1px solid $inverse-focus-ui;
-    outline: 2px solid $focus;
+    border: 1px solid $focus-inverse;
+    outline: $spacing-01 solid $focus;
   }
 
-  :host(#{$dds-prefix}-video-player) #{$dds-prefix}-image,
-  .#{$prefix}--video-player .#{$prefix}--image {
+  :host(#{$c4d-prefix}-video-player) #{$c4d-prefix}-image,
+  .#{$c4d-prefix}--video-player .#{$c4d-prefix}--image {
     position: relative;
     width: 100%;
     height: 100%;
+    padding-top: 0;
 
     &::before {
       content: '';
@@ -75,8 +80,8 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       left: 0;
       opacity: 0;
       z-index: 1;
-      background-color: $ui-05;
-      transition: opacity $duration--moderate-01 motion(standard, productive);
+      background-color: $border-inverse;
+      transition: opacity $duration-moderate-01 motion(standard, productive);
     }
 
     &:hover::before {
@@ -84,17 +89,18 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  .#{$prefix}--video-player__video-container {
+  .#{$c4d-prefix}--video-player__video-container {
     width: 100%;
     position: relative;
     display: inline-block;
+    padding-top: min(calc(100vh - #{$spacing-13}), 56.25%);
 
     &:focus {
       outline: none;
     }
 
-    ::slotted(.#{$prefix}--video-player__video),
-    .#{$prefix}--video-player__video {
+    ::slotted(.#{$c4d-prefix}--video-player__video),
+    .#{$c4d-prefix}--video-player__video {
       position: absolute;
       top: 0;
       left: 0;
@@ -108,7 +114,7 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
       $width: nth($aspect-ratio, 1);
       $height: nth($aspect-ratio, 2);
 
-      &.#{$prefix}--video-player__aspect-ratio {
+      &.#{$c4d-prefix}--video-player__aspect-ratio {
         &--#{$width}x#{$height} {
           @include ratio-base($width, $height, true);
         }
@@ -116,14 +122,14 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  .#{$prefix}--video-player__video-caption {
-    @include carbon--type-style('caption-02');
+  .#{$c4d-prefix}--video-player__video-caption {
+    @include type-style('caption-02');
 
-    padding-top: var(--#{$dds-prefix}--video-caption--padding, $spacing-03);
+    padding-top: var(--#{$c4d-prefix}--video-caption--padding, $spacing-03);
     max-width: 90%;
   }
 
-  .#{$prefix}--video-player__image-overlay {
+  .#{$c4d-prefix}--video-player__image-overlay {
     border: none;
     padding: 0;
     cursor: pointer;
@@ -144,16 +150,20 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
         }
 
         path {
-          fill: $icon-03;
+          fill: $icon-on-color;
         }
       }
     }
 
     svg {
+      position: absolute;
+      top: calc(50% - #{$spacing-07});
+      right: calc(50% - #{$spacing-07});
+
       circle,
       path {
-        transition: fill $duration--moderate-01 motion(standard, productive),
-          opacity $duration--moderate-01 motion(standard, productive);
+        transition: fill $duration-moderate-01 motion(standard, productive),
+          opacity $duration-moderate-01 motion(standard, productive);
       }
 
       circle {
@@ -162,17 +172,14 @@ $aspect-ratios: ((16, 9), (9, 16), (2, 1), (1, 2), (4, 3), (3, 4), (1, 1));
     }
   }
 
-  :host(#{$dds-prefix}-video-player) .#{$prefix}--video-player__image-overlay,
-  .#{$prefix}--video-player .#{$prefix}--video-player__image-overlay {
+  :host(#{$c4d-prefix}-video-player)
+    .#{$c4d-prefix}--video-player__image-overlay,
+  .#{$c4d-prefix}--video-player .#{$c4d-prefix}--video-player__image-overlay {
     &:active {
-      #{$dds-prefix}-image::before,
-      .#{$prefix}--image::before {
+      #{$c4d-prefix}-image::before,
+      .#{$c4d-prefix}--image::before {
         opacity: 0.12;
       }
     }
   }
 }
-
-@include exports('video-player') {
-  @include video-player;
-}
diff --git a/packages/styles/scss/globals/_carbon-grid.scss b/packages/styles/scss/globals/_carbon-grid.scss
index 6becdf3fe18..067dee54f9b 100644
--- a/packages/styles/scss/globals/_carbon-grid.scss
+++ b/packages/styles/scss/globals/_carbon-grid.scss
@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/mixins';
+@use '@carbon/grid';
 
-@include exports('carbon-grid') {
-  @include carbon--grid();
-}
+// Emit the flex-grid styles
+@include grid.flex-grid();
diff --git a/packages/styles/scss/globals/_feature-flags.scss b/packages/styles/scss/globals/_feature-flags.scss
index 2a7af45d6e6..64d77ccc057 100644
--- a/packages/styles/scss/globals/_feature-flags.scss
+++ b/packages/styles/scss/globals/_feature-flags.scss
@@ -12,24 +12,24 @@
 /// Initialize the feature flag map with default values.
 /// @access public
 /// @type Map
-/// @group dds-feature-flags
+/// @group cds-feature-flags
 /// @example
-/// @example scss - Overriding defaults from the `$dds-default-feature-flags` map
-///   $dds-feature-flags: (
+/// @example scss - Overriding defaults from the `$cds-default-feature-flags` map
+///   $cds-feature-flags: (
 ///     carbon-expressive-experimental: true,
 ///   );
-$dds-feature-flags: () !default;
+$cds-feature-flags: () !default;
 
 /// Default feature flag values
 /// @access private
 /// @type Map
-/// @group dds-feature-flags
-$dds-default-feature-flags: ();
+/// @group cds-feature-flags
+$cds-default-feature-flags: ();
 
 /// @access private
 /// @type Bool
-/// @group dds-feature-flags
-$dds-did-warn-diverged-feature-flags: false !default;
+/// @group cds-feature-flags
+$cds-did-warn-diverged-feature-flags: false !default;
 
 /// Look for user-defined feature flags that are different from default ones, and warn them before merging them.
 /// @access private
@@ -37,10 +37,10 @@ $dds-did-warn-diverged-feature-flags: false !default;
 /// @param {Map} $src - The feature flags to merge from (user-defined feature flags)
 /// @returns {Map} - The result of `map-merge($dst, $src)`
 /// @example scss
-///   $dds-feature-flags: merge-feature-flags($dds-default-feature-flags, $dds-feature-flags);
-/// @group dds-feature-flags
+///   $cds-feature-flags: merge-feature-flags($cds-default-feature-flags, $cds-feature-flags);
+/// @group cds-feature-flags
 @function merge-feature-flags($dst, $src) {
-  @if (not $dds-did-warn-diverged-feature-flags) {
+  @if (not $cds-did-warn-diverged-feature-flags) {
     $diverged: ();
 
     @each $name, $value in $src {
@@ -55,30 +55,30 @@ $dds-did-warn-diverged-feature-flags: false !default;
       @warn 'Usage of non-default feature flags was found: #{$diverged}. ' +
         'Feature/code under non-default feature flags are either experimental, deprecated, or support for edge cases. ' +
         'They are subject to change any time. Use them at your own risk.';
-      $dds-did-warn-diverged-feature-flags: true !global;
+      $cds-did-warn-diverged-feature-flags: true !global;
     }
   }
 
   @return map-merge($dst, $src);
 }
 
-$dds-feature-flags: merge-feature-flags(
-  $dds-default-feature-flags,
-  $dds-feature-flags
+$cds-feature-flags: merge-feature-flags(
+  $cds-default-feature-flags,
+  $cds-feature-flags
 );
 
 /// Used for enabling features
 /// @access public
-/// @param {String} $feature - Feature from `$dds-default-feature-flags`
+/// @param {String} $feature - Feature from `$cds-default-feature-flags`
 /// @return {Bool}
 /// @example scss
 ///   // Will include code inside of { } only if `components-x` is true
-///   @if dds-feature-flag-enabled('components-x') { ... }
-/// @group dds-feature-flags
-@function dds-feature-flag-enabled($feature) {
+///   @if cds-feature-flag-enabled('components-x') { ... }
+/// @group cds-feature-flags
+@function cds-feature-flag-enabled($feature) {
   @if variable-exists(feature-flags) ==
     true and
-    map-get($dds-feature-flags, $feature) ==
+    map-get($cds-feature-flags, $feature) ==
     true
   {
     @return true;
diff --git a/packages/styles/scss/globals/_imports.scss b/packages/styles/scss/globals/_imports.scss
index d386eb6a685..6cd2cc24a5d 100644
--- a/packages/styles/scss/globals/_imports.scss
+++ b/packages/styles/scss/globals/_imports.scss
@@ -13,14 +13,14 @@
 // isolated as helper functions/mixins/utilities and should have minimal
 // effect on the final artifact size
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/type';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/font-family';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/themes';
-@import 'carbon-components/scss/globals/scss/vars';
-@import 'carbon-components/scss/globals/scss/helper-mixins';
-@import 'carbon-components/scss/globals/scss/layout';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'carbon-components/scss/globals/scss/css--reset';
+@use 'vars' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/grid' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/reset' as *;
 
-@import './utils/content-width';
-@import './carbon-grid';
+@forward './utils/content-width';
+@forward './utils/ratio-base';
diff --git a/packages/styles/scss/globals/_tokens.scss b/packages/styles/scss/globals/_tokens.scss
index e7ff740a32f..0eca775a808 100644
--- a/packages/styles/scss/globals/_tokens.scss
+++ b/packages/styles/scss/globals/_tokens.scss
@@ -1,14 +1,12 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/font-family';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/scale';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-------------------------
 // Tokens
@@ -20,26 +18,26 @@
 $legal-01: (
   font-size: carbon--type-scale(1),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(16px),
+  line-height: $spacing-05,
   letter-spacing: 0.32px,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/ibmdotcom-styles
-$subbody-short-01: (
+$subbody-compact-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(18px),
+  line-height: to-rem(18px),
   letter-spacing: 0.16px,
 ) !default;
 
 /// @type Map
 /// @access public
 /// @group @carbon/ibmdotcom-styles
-$subbody-long-01: (
+$subbody-01: (
   font-size: carbon--type-scale(2),
   font-weight: carbon--font-weight('regular'),
-  line-height: carbon--rem(18px),
+  line-height: to-rem(18px),
   letter-spacing: 0.16px,
 ) !default;
diff --git a/packages/styles/scss/globals/_vars.scss b/packages/styles/scss/globals/_vars.scss
index b626e87ce13..f22fb2b2c45 100644
--- a/packages/styles/scss/globals/_vars.scss
+++ b/packages/styles/scss/globals/_vars.scss
@@ -5,4 +5,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-$dds-prefix: 'dds' !default;
+$c4d-prefix: 'c4d' !default;
diff --git a/packages/styles/scss/globals/tokens/_color-tokens.scss b/packages/styles/scss/globals/tokens/_color-tokens.scss
new file mode 100644
index 00000000000..fb3c14d5d33
--- /dev/null
+++ b/packages/styles/scss/globals/tokens/_color-tokens.scss
@@ -0,0 +1,167 @@
+//
+// Copyright IBM Corp. 2020
+//
+// 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 '@carbon/colors' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/utilities/component-tokens';
+
+$background-cyan: (
+  fallback: $cyan-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: $cyan-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: $cyan-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: $cyan-90,
+    ),
+    (
+      theme: themes.$g100,
+      value: $cyan-90,
+    ),
+  ),
+);
+
+$text-cyan: (
+  fallback: $cyan-90,
+  values: (
+    (
+      theme: themes.$white,
+      value: $cyan-90,
+    ),
+    (
+      theme: themes.$g10,
+      value: $cyan-90,
+    ),
+    (
+      theme: themes.$g90,
+      value: $cyan-10,
+    ),
+    (
+      theme: themes.$g100,
+      value: $cyan-10,
+    ),
+  ),
+);
+
+$caption-cyan: (
+  fallback: $cyan-70,
+  values: (
+    (
+      theme: themes.$white,
+      value: $cyan-70,
+    ),
+    (
+      theme: themes.$g10,
+      value: $cyan-70,
+    ),
+    (
+      theme: themes.$g90,
+      value: $cyan-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: $cyan-30,
+    ),
+  ),
+);
+
+$background-purple: (
+  fallback: $purple-10,
+  values: (
+    (
+      theme: themes.$white,
+      value: $purple-10,
+    ),
+    (
+      theme: themes.$g10,
+      value: $purple-10,
+    ),
+    (
+      theme: themes.$g90,
+      value: $purple-90,
+    ),
+    (
+      theme: themes.$g100,
+      value: $purple-90,
+    ),
+  ),
+);
+
+$text-purple: (
+  fallback: $purple-90,
+  values: (
+    (
+      theme: themes.$white,
+      value: $purple-90,
+    ),
+    (
+      theme: themes.$g10,
+      value: $purple-90,
+    ),
+    (
+      theme: themes.$g90,
+      value: $purple-10,
+    ),
+    (
+      theme: themes.$g100,
+      value: $purple-10,
+    ),
+  ),
+);
+
+$caption-purple: (
+  fallback: $purple-70,
+  values: (
+    (
+      theme: themes.$white,
+      value: $purple-70,
+    ),
+    (
+      theme: themes.$g10,
+      value: $purple-70,
+    ),
+    (
+      theme: themes.$g90,
+      value: $purple-30,
+    ),
+    (
+      theme: themes.$g100,
+      value: $purple-30,
+    ),
+  ),
+);
+
+$color-tokens: (
+  background-cyan: $background-cyan,
+  text-cyan: $text-cyan,
+  caption-cyan: $caption-cyan,
+  background-purple: $background-purple,
+  text-purple: $text-purple,
+  caption-purple: $caption-purple,
+);
+
+$background-cyan: component-tokens.get-var($background-cyan, 'background-cyan');
+
+$text-cyan: component-tokens.get-var($text-cyan, 'text-cyan');
+
+$caption-cyan: component-tokens.get-var($caption-cyan, 'caption-cyan');
+
+$background-purple: component-tokens.get-var(
+  $background-purple,
+  'background-purple'
+);
+
+$text-purple: component-tokens.get-var($text-purple, 'text-purple');
+
+$caption-purple: component-tokens.get-var($caption-purple, 'caption-purple');
diff --git a/packages/styles/scss/globals/utils/_aspect-ratio.scss b/packages/styles/scss/globals/utils/_aspect-ratio.scss
index 8984dd21621..c23be80d187 100644
--- a/packages/styles/scss/globals/utils/_aspect-ratio.scss
+++ b/packages/styles/scss/globals/utils/_aspect-ratio.scss
@@ -5,6 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use 'sass:math';
+
 // Aspect Ratio
 // function to reuse the aspect ratio
 // @param $height
@@ -14,6 +16,6 @@
 //
 // @return percentage of height vs width
 @function aspect-ratio($width, $height) {
-  $ratio: $height / $width * 100%;
+  $ratio: math.div($height, $width) * 100%;
   @return $ratio;
 }
diff --git a/packages/styles/scss/globals/utils/_content-width.scss b/packages/styles/scss/globals/utils/_content-width.scss
index 428930c75f1..bbef2df7e66 100644
--- a/packages/styles/scss/globals/utils/_content-width.scss
+++ b/packages/styles/scss/globals/utils/_content-width.scss
@@ -5,13 +5,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-//Sets the Width and Max-Width of the Card to 90% / carbon--mini-units(80)
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
+//Sets the Width and Max-Width of the Card to 90% / carbon--mini-units(80)
 @mixin content-width {
   width: 90%;
   max-width: carbon--mini-units(80);
 
-  @include carbon--breakpoint('md') {
-    width: calc(100% - #{$layout-03});
+  @include breakpoint(md) {
+    width: calc(100% - #{$spacing-07});
   }
 }
diff --git a/packages/styles/scss/globals/utils/_flex-grid.scss b/packages/styles/scss/globals/utils/_flex-grid.scss
new file mode 100644
index 00000000000..62b4f5aa4fb
--- /dev/null
+++ b/packages/styles/scss/globals/utils/_flex-grid.scss
@@ -0,0 +1,325 @@
+/**
+* Copyright IBM Corp. 2016, 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.
+*/
+
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+
+@use '@carbon/grid/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+
+/// Used to initialize the default properties for a column class, most notably
+/// for setting width and default gutters when a column's breakpoint has not been
+/// hit yet.
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+/// @param {Number} $collapsed-gutter [$grid-gutter-condensed] - The condensed mode gutter
+
+/// @group @carbon/grid
+@mixin make-col-ready(
+  $gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter-condensed
+) {
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%;
+  padding-right: $gutter * 0.5;
+  padding-left: $gutter * 0.5;
+
+  // For our condensed use-case, our gutters collapse to $spacing-01 solid, 1px on each
+  // side.
+  .#{$prefix}--row--condensed &,
+  .#{$prefix}--grid--condensed & {
+    padding-right: $condensed-gutter * 0.5;
+    padding-left: $condensed-gutter * 0.5;
+  }
+
+  // For our narrow use-case, our container hangs $spacing-05 into the gutter
+  .#{$prefix}--row--narrow &,
+  .#{$prefix}--grid--narrow & {
+    padding-right: $gutter * 0.5;
+    padding-left: 0;
+  }
+}
+
+/// Define the width of the column for a given span and column count.
+/// A width of 0 will hide the column entirely.
+/// @param {Number} $span - The number of columns covered
+/// @param {Number} $columns - The total number of columns available
+
+/// @group @carbon/grid
+@mixin make-col($span, $columns) {
+  @if $span == 0 {
+    display: none;
+  } @else {
+    // Explicitly include `display: block` to override
+    display: block;
+    // Add a `max-width` to ensure content within each column does not blow out
+    // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+    // do not appear to require this.
+    max-width: math.percentage(math.div($span, $columns));
+    flex: 0 0 math.percentage(math.div($span, $columns));
+  }
+}
+
+/// Create a column offset for a given span and column count.
+/// @param {Number} $span - The number of columns the offset should cover
+/// @param {Number} $columns - The total number of columns available
+
+/// @group @carbon/grid
+@mixin make-col-offset($span, $columns) {
+  $offset: 0;
+  $offset: math.div($span, $columns);
+  @if $offset == 0 {
+    margin-left: 0;
+  } @else {
+    margin-left: math.percentage($offset);
+  }
+}
+
+/// Output the CSS required for all the columns in a given grid system.
+/// @param {Map} $breakpoints [$grid-breakpoints] - The breakpoints in the grid system
+/// @param {Number} $gutter [$grid-gutter] - The gutter for the grid system
+
+/// @group @carbon/grid
+@mixin make-grid-columns(
+  $breakpoints: $grid-breakpoints,
+  $gutter: $grid-gutter
+) {
+  .#{$prefix}--col {
+    @include make-col-ready($gutter);
+  }
+
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint);
+    $columns: map.get(map.get($breakpoints, $breakpoint), columns);
+
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 0 through $columns {
+      .#{$prefix}--col#{$infix}-#{$i} {
+        @include make-col-ready($gutter);
+      }
+    }
+
+    .#{$prefix}--col#{$infix},
+    .#{$prefix}--col#{$infix}--auto {
+      @include make-col-ready($gutter);
+    }
+
+    @include breakpoint($breakpoint, $breakpoints) {
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .#{$prefix}--col,
+      .#{$prefix}--col#{$infix} {
+        max-width: 100%;
+        flex-basis: 0;
+        flex-grow: 1;
+      }
+
+      .#{$prefix}--col--auto,
+      .#{$prefix}--col#{$infix}--auto {
+        width: auto;
+        // Reset earlier grid tiers
+        max-width: 100%;
+        flex: 1 0 0%;
+      }
+
+      @for $i from 0 through $columns {
+        .#{$prefix}--col#{$infix}-#{$i} {
+          @include make-col($i, $columns);
+        }
+      }
+
+      @for $i from 0 through ($columns - 1) {
+        @if not($infix == '') {
+          .#{$prefix}--offset#{$infix}-#{$i} {
+            @include make-col-offset($i, $columns);
+          }
+        }
+      }
+    }
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Rows
+// -----------------------------------------------------------------------------
+
+/// Define the properties for a selector assigned to a row in the grid system.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+
+/// @group @carbon/grid
+@mixin make-row($gutter: $grid-gutter) {
+  display: flex;
+  flex-wrap: wrap;
+  margin-right: -1 * $gutter * 0.5;
+  margin-left: -1 * $gutter * 0.5;
+}
+
+// -----------------------------------------------------------------------------
+// No gutter
+// -----------------------------------------------------------------------------
+
+/// Add `no-gutter` and `no-gutter--{start,end}` classes to the output CSS. These
+/// classes are useful for dropping the gutter in fluid situations.
+
+/// @group @carbon/grid
+@mixin -no-gutter {
+  .#{$prefix}--no-gutter,
+  .#{$prefix}--row.#{$prefix}--no-gutter [class*='#{$prefix}--col'] {
+    padding-right: 0;
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--start,
+  .#{$prefix}--row.#{$prefix}--no-gutter--start [class*='#{$prefix}--col'] {
+    padding-left: 0;
+  }
+
+  .#{$prefix}--no-gutter--end,
+  .#{$prefix}--row.#{$prefix}--no-gutter--end [class*='#{$prefix}--col'] {
+    padding-right: 0;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Hang
+// -----------------------------------------------------------------------------
+
+/// Add `hang--start` and `hang--end` classes for a given gutter. These classes are
+/// used alongside `no-gutter--start` and `no-gutter--end` to "hang" type.
+/// @param {Number} $gutter [$grid-gutter] - The gutter in the grid system
+
+/// @group @carbon/grid
+@mixin -hang($gutter: $grid-gutter) {
+  .#{$prefix}--hang--start {
+    padding-left: $gutter * 0.5;
+  }
+
+  .#{$prefix}--hang--end {
+    padding-right: $gutter * 0.5;
+  }
+}
+
+// -----------------------------------------------------------------------------
+// Grid
+// -----------------------------------------------------------------------------
+
+/// Create the container for a grid. Will cause full-bleed for the grid unless
+/// max-width properties are added with `make-container-max-widths`
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+
+/// @group @carbon/grid
+@mixin make-container($breakpoints: $grid-breakpoints) {
+  margin-right: auto;
+  margin-left: auto;
+
+  @include -set-largest-breakpoint($breakpoints);
+
+  @each $name, $value in $breakpoints {
+    $prev-breakpoint: map.get($breakpoints, breakpoint-prev($name));
+    $margin: map.get($value, margin);
+
+    @if $prev-breakpoint {
+      $prev-margin: map.get($prev-breakpoint, margin);
+      @if $prev-margin != $margin {
+        @include breakpoint($name) {
+          padding-right: #{($grid-gutter * 0.5) + $margin};
+          padding-left: #{($grid-gutter * 0.5) + $margin};
+        }
+      }
+    } @else {
+      @include breakpoint($name) {
+        padding-right: #{($grid-gutter * 0.5) + $margin};
+        padding-left: #{($grid-gutter * 0.5) + $margin};
+      }
+    }
+  }
+}
+
+/// Get the last breakpoint width and set max-width to its value
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+
+/// @group @carbon/grid
+@mixin -set-largest-breakpoint($breakpoints: $grid-breakpoints) {
+  $largest-breakpoint: -last-map-item($breakpoints);
+
+  max-width: map.get($largest-breakpoint, 'width');
+}
+
+/// Add in the max-widths for each breakpoint to the container
+/// @param {Map} $breakpoints [$grid-breakpoints] - A map of breakpoints where the key is the name
+
+/// @group @carbon/grid
+@mixin make-container-max-widths($breakpoints: $grid-breakpoints) {
+  @each $name, $value in $breakpoints {
+    @include breakpoint($name) {
+      max-width: map.get($value, width);
+    }
+  }
+}
+
+/// Pass in a map, and get the last one in the list back
+/// @access public
+/// @param {Map} $map - Map
+/// @return {*} Desired value
+/// @group @carbon/layout
+@function -last-map-item($map) {
+  $total-length: list.length($map);
+  @return map-get($map, -key-by-index($map, $total-length));
+}
+
+/// Provide a map and index, and get back the relevant key value
+/// @access public
+/// @param {Map} $map - Map
+/// @param {Integer} $index - Key chain
+/// @return {String} Desired value
+/// @group @carbon/layout
+@function -key-by-index($map, $index) {
+  $keys: map.keys($map);
+  @return nth($keys, $index);
+}
+
+/// Generate the CSS for a grid for the given breakpoints and gutters
+/// @param {Map} $breakpoints [$grid-breakpoints] - The default breakpoints
+/// @param {Number} $grid-gutter [$grid-gutter] - The default gutters
+/// @param {Number} $condensed-gutter [$grid-gutter-condensed] - The condensed mode gutter
+/// @access public
+/// @group @carbon/grid
+@mixin flex-grid(
+  $breakpoints: $grid-breakpoints,
+  $grid-gutter: $grid-gutter,
+  $condensed-gutter: $grid-gutter-condensed
+) {
+  .#{$prefix}--grid {
+    @include make-container($breakpoints);
+  }
+
+  @include largest-breakpoint($breakpoints) {
+    .#{$prefix}--grid--full-width {
+      max-width: 100%;
+    }
+  }
+
+  .#{$prefix}--row {
+    @include make-row();
+  }
+
+  .#{$prefix}--row-padding [class*='#{$prefix}--col'],
+  .#{$prefix}--col-padding {
+    padding-top: $grid-gutter * 0.5;
+    padding-bottom: $grid-gutter * 0.5;
+  }
+
+  .#{$prefix}--grid--condensed [class*='#{$prefix}--col'] {
+    padding-top: $condensed-gutter * 0.5;
+    padding-bottom: $condensed-gutter * 0.5;
+  }
+
+  @include make-grid-columns($breakpoints, $grid-gutter);
+  @include -no-gutter();
+  @include -hang($grid-gutter);
+}
diff --git a/packages/styles/scss/globals/utils/_hang.scss b/packages/styles/scss/globals/utils/_hang.scss
index 8c0036b9be9..9def3bfb2c1 100644
--- a/packages/styles/scss/globals/utils/_hang.scss
+++ b/packages/styles/scss/globals/utils/_hang.scss
@@ -5,8 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+@use 'sass:list';
+@use '@carbon/styles/scss/grid' as *;
+
 // mixin to hang into the gutters of the grid
 @mixin hang() {
-  margin-left: -($carbon--grid-gutter / 2);
-  margin-right: -($carbon--grid-gutter / 2);
+  margin-left: list.slash($grid-gutter, -2);
+  margin-right: list.slash($grid-gutter, -2);
 }
diff --git a/packages/styles/scss/globals/utils/_ratio-base.scss b/packages/styles/scss/globals/utils/_ratio-base.scss
index 6868a83bf99..b17108c2e02 100644
--- a/packages/styles/scss/globals/utils/_ratio-base.scss
+++ b/packages/styles/scss/globals/utils/_ratio-base.scss
@@ -6,7 +6,7 @@
  */
 
 // mixin to give the ratio for lays doen for an aspect ratio
-@import '../../globals/utils/aspect-ratio';
+@use '../../globals/utils/aspect-ratio' as *;
 
 @mixin ratio-base($height, $width, $fixed) {
   @if ($fixed) {
diff --git a/packages/styles/scss/ibm-dotcom-styles.css b/packages/styles/scss/ibm-dotcom-styles.css
new file mode 100644
index 00000000000..72d50e2838b
--- /dev/null
+++ b/packages/styles/scss/ibm-dotcom-styles.css
@@ -0,0 +1,19 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 8 | @use '@carbon/styles/scss/config' as *;
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   scss/components/audio-player/_audio-player.scss 8:1  @forward
+ *   scss/components/audio-player/_index.scss 8:1         @use
+ *   scss/ibm-dotcom-styles.scss 13:1                     root stylesheet */
+
+body::before {
+  font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono',
+    'Droid Sans Mono', monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid #000000;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 8 \2502  @use '@carbon/styles/scss/config' as *;\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   scss/components/audio-player/_audio-player.scss 8:1  @forward\a   scss/components/audio-player/_index.scss 8:1         @use\a   scss/ibm-dotcom-styles.scss 13:1                     root stylesheet";
+}
diff --git a/packages/styles/scss/ibm-dotcom-styles.scss b/packages/styles/scss/ibm-dotcom-styles.scss
index e1655f64b35..883061220a9 100644
--- a/packages/styles/scss/ibm-dotcom-styles.scss
+++ b/packages/styles/scss/ibm-dotcom-styles.scss
@@ -6,65 +6,62 @@
  */
 
 // Globals
-@import 'globals/feature-flags';
-@import 'globals/tokens';
+@forward 'globals/feature-flags';
+// @forward 'globals/tokens';
 
 // Components
-@import 'components/back-to-top/back-to-top';
-@import 'components/buttongroup/buttongroup';
-@import 'components/callout-quote/index';
-@import 'components/callout-with-media/index';
-@import 'components/card/index';
-@import 'components/card-group/card-group';
-@import 'components/card-link/card-link';
-@import 'components/card-section-images/card-section-images';
-@import 'components/card-section-offset/card-section-offset';
-@import 'components/card-section-simple/card-section-simple';
-@import 'components/content-block-cards/content-block-cards';
-@import 'components/content-block-headlines/index';
-@import 'components/content-block-horizontal/content-block-horizontal';
-@import 'components/content-block-media/index';
-@import 'components/content-block-mixed/index';
-@import 'components/content-block-segmented/index';
-@import 'components/content-block-simple/index';
-@import 'components/content-group-cards/index';
-@import 'components/content-group-pictograms/index';
-@import 'components/content-group-simple/index';
-@import 'components/content-item-horizontal/content-item-horizontal';
-@import 'components/ctasection/index';
-@import 'components/dotcom-shell/dotcom-shell';
-@import 'components/expressive-modal/expressive-modal';
-@import 'components/feature-card/feature-card';
-@import 'components/feature-card-block-large/feature-card-block-large';
-@import 'components/feature-card-block-medium/feature-card-block-medium';
-@import 'components/filter-panel/filter-panel';
-@import 'components/footer/index';
-@import 'components/horizontalrule/horizontalrule';
-@import 'components/image/image';
-@import 'components/image-with-caption/image-with-caption';
-@import 'components/layout/layout';
-@import 'components/leadspace/leadspace';
-@import 'components/leadspace-block/leadspace-block';
-@import 'components/leadspace-with-search/index';
-@import 'components/lightbox-media-viewer/lightbox-media-viewer';
-@import 'components/link-with-icon/link-with-icon';
-@import 'components/link-list/index';
-@import 'components/list/list';
-@import 'components/locale-modal/locale-modal';
-@import 'components/logo-grid/logo-grid';
-@import 'components/masthead/index';
-@import 'components/notice-choice/notice-choice';
-@import 'components/pictogram-item/pictogram-item';
-@import 'components/pricing-table/pricing-table';
-@import 'components/quote/quote';
-@import 'components/tableofcontents/tableofcontents';
-@import 'components/universal-banner/universal-banner';
-@import 'components/video-player/video-player';
-@import 'components/audio-player/audio-player';
+@use 'components/audio-player';
+@use 'components/back-to-top';
+@use 'components/button-group';
+@use 'components/callout-quote';
+@use 'components/callout-with-media';
+@use 'components/card';
+@use 'components/card-group';
+@use 'components/card-link';
+@use 'components/card-section-offset';
+@use 'components/card-section-simple';
+@use 'components/content-block-cards';
+@use 'components/content-block-headlines';
+@use 'components/content-block-horizontal';
+@use 'components/content-block-media';
+@use 'components/content-block-mixed';
+@use 'components/content-block-segmented';
+@use 'components/content-block-simple';
+@use 'components/content-group-cards';
+@use 'components/content-group-pictograms';
+@use 'components/content-group-simple';
+@use 'components/content-item-row';
+@use 'components/cta-section';
+@use 'components/dotcom-shell';
+@use 'components/expressive-modal';
+@use 'components/feature-card';
+@use 'components/filter-panel';
+@use 'components/footer';
+@use 'components/horizontal-rule';
+@use 'components/image';
+@use 'components/in-page-banner';
+@use 'components/layout';
+@use 'components/leadspace';
+@use 'components/leadspace-block';
+@use 'components/leadspace-with-search';
+@use 'components/lightbox-media-viewer';
+@use 'components/link-with-icon';
+@use 'components/link-list';
+@use 'components/list';
+@use 'components/locale-modal';
+@use 'components/logo-grid';
+@use 'components/masthead';
+@use 'components/notice-choice';
+@use 'components/pictogram-item';
+@use 'components/pricing-table';
+@use 'components/quote';
+@use 'components/tableofcontents';
+@use 'components/global-banner';
+@use 'components/video-player';
 
 // Internal
-@import 'internal/callout/callout';
-@import 'internal/content-block/content-block';
-@import 'internal/content-item/content-item';
-@import 'internal/content-group/content-group';
-@import 'internal/content-section/content-section';
+@use 'internal/callout';
+@use 'internal/content-block';
+@use 'internal/content-item';
+@use 'internal/content-group';
+@use 'internal/content-section';
diff --git a/packages/styles/scss/internal/callout/_callout.scss b/packages/styles/scss/internal/callout/_callout.scss
index 73143644310..8447b7c3118 100644
--- a/packages/styles/scss/internal/callout/_callout.scss
+++ b/packages/styles/scss/internal/callout/_callout.scss
@@ -5,56 +5,95 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/hang';
+@use 'sass:map';
+@use '@carbon/colors' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/themes';
+@use '@carbon/styles/scss/theme' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/hang' as *;
+@use '../../globals/tokens/color-tokens' as *;
 
 @mixin callout {
-  .#{$prefix}--callout__container,
-  :host(#{$dds-prefix}-callout) {
-    background-color: $inverse-02;
-    @include carbon--make-row;
+  :host(#{$c4d-prefix}-callout) {
+    background-color: $background;
   }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='inverse']) {
+    background-color: $background-inverse;
+  }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='layer']) {
+    background-color: $layer-01;
+  }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='purple']) {
+    background-color: $background-purple;
+  }
+
+  :host(#{$c4d-prefix}-callout[color-scheme='cyan']) {
+    background-color: $background-cyan;
+  }
+
+  :host(#{$c4d-prefix}-callout-text),
+  :host(#{$c4d-prefix}-callout-text[color-scheme='layer']) {
+    color: $text-primary;
+  }
+
+  :host(#{$c4d-prefix}-callout-text[color-scheme='inverse']) {
+    color: $text-inverse;
+  }
+
+  :host(#{$c4d-prefix}-callout-text[color-scheme='purple']) {
+    color: $text-purple;
+  }
+
+  :host(#{$c4d-prefix}-callout-text[color-scheme='cyan']) {
+    color: $text-cyan;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='layer']),
+  :host(#{$c4d-prefix}-callout-caption) {
+    color: $text-secondary;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='inverse']) {
+    color: $text-inverse;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='purple']) {
+    color: $caption-purple;
+  }
+
+  :host(#{$c4d-prefix}-callout-caption[color-scheme='cyan']) {
+    color: $caption-cyan;
+  }
+
   .#{$prefix}--callout__column {
-    @include carbon--make-col-ready;
+    @include make-col-ready;
   }
   .#{$prefix}--callout__content {
-    @include carbon--breakpoint(sm) {
+    box-sizing: border-box;
+
+    @include breakpoint(sm) {
       padding-top: $layout-03;
     }
-    @include carbon--breakpoint(md) {
-      @include carbon--make-col-offset(1, 8);
-      @include carbon--make-col(6, 8);
+    @include breakpoint(md) {
+      @include make-col-offset(1, 8);
+      @include make-col(6, 8);
 
       padding-left: $spacing-02;
       padding-right: $spacing-02;
       padding-top: $layout-05;
     }
-    @include carbon--breakpoint(lg) {
+    @include breakpoint(lg) {
       padding-left: $spacing-01;
       padding-right: $spacing-01;
-      @include carbon--make-col-offset(1, 12);
-      @include carbon--make-col(10, 12);
-    }
-
-    .#{$prefix}--quote {
-      background-color: $ui-01;
-    }
-
-    .#{$prefix}--quote__copy,
-    .#{$prefix}--quote__source-heading,
-    .#{$prefix}--quote__source-body,
-    .#{$prefix}--quote__source-optional-copy,
-    ::slotted(#{$dds-prefix}-quote-source-bottom-copy),
-    ::slotted(#{$dds-prefix}-quote-source-copy),
-    ::slotted(#{$dds-prefix}-quote-source-heading),
-    .#{$prefix}--quote__mark {
-      color: $inverse-01;
+      @include make-col-offset(1, 12);
+      @include make-col(10, 12);
     }
   }
 }
-
-@include exports('callout') {
-  @include callout;
-}
diff --git a/packages/styles/scss/internal/callout/_index.scss b/packages/styles/scss/internal/callout/_index.scss
new file mode 100644
index 00000000000..209dc529d53
--- /dev/null
+++ b/packages/styles/scss/internal/callout/_index.scss
@@ -0,0 +1,12 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'callout';
+
+@use 'callout';
+
+@include callout.callout;
diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss
index c1c442d313a..8aa4542e5a1 100644
--- a/packages/styles/scss/internal/content-block/_content-block.scss
+++ b/packages/styles/scss/internal/content-block/_content-block.scss
@@ -1,48 +1,52 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/content-width';
-@import '../../globals/utils/hang';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/content-width' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/utils/hang' as *;
 
 @mixin content-block {
-  :host(#{$dds-prefix}-content-block),
-  :host(#{$dds-prefix}-content-block-simple),
-  :host(#{$dds-prefix}-content-block-media),
-  :host(#{$dds-prefix}-content-block-mixed),
-  :host(#{$dds-prefix}-content-block-horizontal),
-  :host(#{$dds-prefix}-content-group-horizontal),
-  :host(#{$dds-prefix}-leadspace-block-content),
-  :host(#{$dds-prefix}-leadspace-with-search-content),
-  :host(#{$dds-prefix}-content-block-segmented),
-  :host(#{$dds-prefix}-content-block-headlines),
+  :host(#{$c4d-prefix}-content-block),
+  :host(#{$c4d-prefix}-content-block-simple),
+  :host(#{$c4d-prefix}-content-block-media),
+  :host(#{$c4d-prefix}-content-block-mixed),
+  :host(#{$c4d-prefix}-content-block-horizontal),
+  :host(#{$c4d-prefix}-leadspace-block-content),
+  :host(#{$c4d-prefix}-leadspace-with-search-content),
+  :host(#{$c4d-prefix}-content-block-segmented),
+  :host(#{$c4d-prefix}-content-block-headlines),
   .#{$prefix}--content-block {
     display: block;
-    padding-top: $carbon--layout-03;
-    padding-bottom: $carbon--layout-05;
+    padding-top: $spacing-07;
+    padding-bottom: $spacing-10;
 
-    @include carbon--breakpoint('md') {
-      padding-top: $carbon--layout-05;
-      padding-bottom: $carbon--layout-06;
+    @include breakpoint(md) {
+      padding-top: $spacing-10;
+      padding-bottom: $spacing-12;
     }
 
-    @include carbon--breakpoint('max') {
-      padding-bottom: $carbon--layout-07;
+    @include breakpoint(max) {
+      padding-bottom: $spacing-13;
     }
 
     .#{$prefix}--card__CTA {
       // TO DO: aspect ratio 2x1
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         @include hang;
       }
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       .#{$prefix}--link-list {
         &:first-of-type {
           padding-top: 0;
@@ -59,7 +63,7 @@
       'body' auto
       'footer' auto / 1fr;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       grid-template:
         'heading heading' auto
         'body body' auto
@@ -76,15 +80,15 @@
     // Most slotted contents have margins aligning to Carbon grid gutters.
     // Note: Child contents define their margin by their own
     ::slotted([slot]) {
-      margin-left: $carbon--spacing-05;
-      margin-right: $carbon--spacing-05;
+      margin-left: $spacing-05;
+      margin-right: $spacing-05;
     }
 
     // Cards and link lists are the exceptions of above
-    // TODO: Remove negative margin adjustment from `<dds-link-list-item*>` and add `<dds-link-list>` here
-    ::slotted(#{$dds-prefix}-card[slot]),
-    ::slotted(#{$dds-prefix}-card-cta[slot]),
-    ::slotted(#{$dds-prefix}-card-link-cta[slot]) {
+    // TODO: Remove negative margin adjustment from `<cds-link-list-item*>` and add `<cds-link-list>` here
+    ::slotted(#{$c4d-prefix}-card[slot]),
+    ::slotted(#{$c4d-prefix}-card-cta[slot]),
+    ::slotted(#{$c4d-prefix}-card-link-cta[slot]) {
       margin-left: 0;
       margin-right: 0;
     }
@@ -95,21 +99,18 @@
       margin-top: $layout-05;
       margin-bottom: $layout-05;
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         margin-top: 0;
         margin-bottom: 0;
       }
     }
 
-    .dds--content-block-footer ::slotted([slot='footer']) {
-      max-width: none;
-    }
-
     ::slotted([slot='footer']) {
-      margin-top: $carbon--layout-04;
+      margin-top: $spacing-09;
 
-      @include carbon--breakpoint('md') {
-        margin-top: $carbon--layout-05;
+      @include breakpoint(md) {
+        width: 50%;
+        margin-top: $spacing-10;
       }
     }
 
@@ -118,10 +119,10 @@
     }
 
     ::slotted([slot='media']) {
-      margin-top: $carbon--spacing-07;
+      margin-top: $spacing-07;
     }
 
-    ::slotted(#{$dds-prefix}-video-player-container) {
+    ::slotted(#{$c4d-prefix}-video-player-container) {
       // Ensures the margin gets effective
       display: block;
     }
@@ -134,7 +135,7 @@
       'footer' auto
       'complementary' auto / 1fr;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       grid-template:
         'heading heading' auto
         'body body' auto
@@ -142,7 +143,7 @@
         'complementary complementary' auto / 1fr 1fr;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       grid-template-columns: repeat(12, 1fr);
       grid-template-areas:
         'heading heading heading heading heading heading heading heading . . . .'
@@ -160,101 +161,93 @@
     }
   }
 
-  :host(#{$dds-prefix}-content-block-horizontal) #{$dds-prefix}-hr,
-  :host(#{$dds-prefix}-content-group-horizontal) #{$dds-prefix}-hr {
+  :host(#{$c4d-prefix}-content-block-horizontal) #{$c4d-prefix}-hr {
     margin: 0;
     margin-top: $layout-03;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-top: 0;
     }
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       margin-top: $layout-05;
     }
   }
 
-  .#{$prefix}--content-block .#{$prefix}--hr,
-  .#{$prefix}--content-group-horizontal
-    .#{$prefix}--content-block
-    .#{$prefix}--hr {
+  .#{$prefix}--content-block .#{$prefix}--hr {
     margin-top: $layout-03;
 
     @include hang;
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-top: $layout-01;
     }
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       margin-top: calc(#{$layout-04} + #{$spacing-03});
     }
   }
 
-  :host(#{$dds-prefix}-content-block-heading),
-  :host(#{$dds-prefix}-content-block-copy),
-  :host(#{$dds-prefix}-callout-with-media-copy),
+  :host(#{$c4d-prefix}-content-block-heading),
+  :host(#{$c4d-prefix}-content-block-copy),
+  :host(#{$c4d-prefix}-callout-with-media-copy),
   .#{$prefix}--content-block__heading,
   .#{$prefix}--content-block__copy {
     @include content-width;
   }
 
-  :host(#{$dds-prefix}-content-block-heading),
+  :host(#{$c4d-prefix}-content-block-heading),
   .#{$prefix}--content-block__heading {
-    @include carbon--type-style('expressive-heading-05', true);
+    @include type-style('fluid-heading-05', true);
 
-    color: $text-01;
-    margin-bottom: $carbon--spacing-07;
+    color: $text-primary;
+    margin-bottom: $spacing-07;
   }
 
-  :host(#{$dds-prefix}-content-block-paragraph),
+  :host(#{$c4d-prefix}-content-block-paragraph),
   .#{$prefix}--content-block__copy p {
-    @include carbon--type-style('expressive-heading-03', true);
+    @include type-style('fluid-heading-03', true);
 
-    margin-bottom: $carbon--spacing-07;
-    color: $text-01;
+    margin-bottom: $spacing-07;
+    color: $text-primary;
   }
 
   .#{$prefix}--content-block__cta {
-    margin-top: $carbon--layout-04;
-    @include carbon--breakpoint('md') {
-      margin-top: $carbon--layout-05;
+    margin-top: $spacing-09;
+    @include breakpoint(md) {
+      margin-top: $spacing-10;
     }
 
     .#{$prefix}--feature-card {
-      @include carbon--make-row;
+      @include make-row;
     }
 
     // FIXME: CardLink is being used as Card in React, need to separate this
     .#{$prefix}--card__CTA.#{$prefix}--card-link .#{$prefix}--card__heading {
-      @include carbon--type-style('expressive-heading-02', true);
+      @include type-style('heading-02', true);
     }
   }
 
   .#{$prefix}--content-block__cta-row {
-    @include carbon--make-row;
+    @include make-row;
     // allows for margin collapsing
     display: block;
   }
 
   .#{$prefix}--content-block__cta-col {
-    @include carbon--make-col-ready;
+    @include make-col-ready;
 
-    max-width: calc(320px + #{$carbon--layout-05});
+    max-width: calc(320px + #{$spacing-10});
 
-    @include carbon--breakpoint('sm') {
+    @include breakpoint(sm) {
       .#{$prefix}--card__CTA {
-        margin-left: -($carbon--spacing-05);
+        margin-left: -($spacing-05);
       }
     }
 
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col(4, 8);
+    @include breakpoint(md) {
+      @include make-col(4, 8);
 
-      padding-left: $carbon--spacing-05;
-      padding-right: $carbon--spacing-05;
-      max-width: calc(320px + #{$carbon--layout-05});
+      padding-left: $spacing-05;
+      padding-right: $spacing-05;
+      max-width: calc(320px + #{$spacing-10});
     }
   }
 }
-
-@include exports('content-block') {
-  @include content-block;
-}
diff --git a/packages/styles/scss/internal/content-block/_index.scss b/packages/styles/scss/internal/content-block/_index.scss
new file mode 100644
index 00000000000..2d1b05acebe
--- /dev/null
+++ b/packages/styles/scss/internal/content-block/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-block';
+@use 'content-block';
+
+@include content-block.content-block;
diff --git a/packages/styles/scss/internal/content-group/_content-group.scss b/packages/styles/scss/internal/content-group/_content-group.scss
index 535184d5201..9b62df4d732 100644
--- a/packages/styles/scss/internal/content-group/_content-group.scss
+++ b/packages/styles/scss/internal/content-group/_content-group.scss
@@ -5,93 +5,93 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/content-width';
-@import '../../globals/utils/hang';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/content-width' as *;
+@use '../../globals/utils/hang' as *;
 
 @mixin themed-items {
-  :host(#{$dds-prefix}-content-group-heading),
+  :host(#{$c4d-prefix}-content-group-heading),
   .#{$prefix}--content-group__title {
-    color: $text-01;
+    color: $text-primary;
   }
 }
 @mixin content-group {
-  :host(#{$dds-prefix}-content-group) ::slotted(:not([slot])) {
+  :host(#{$c4d-prefix}-content-group) ::slotted(:not([slot])) {
     margin-left: $spacing-05;
     margin-right: $spacing-05;
   }
 
-  :host(#{$dds-prefix}-content-group),
-  :host(#{$dds-prefix}-content-group-simple),
-  :host(#{$dds-prefix}-content-group-cards),
-  :host(#{$dds-prefix}-content-group-pictograms),
+  :host(#{$c4d-prefix}-content-group),
+  :host(#{$c4d-prefix}-content-group-simple),
+  :host(#{$c4d-prefix}-content-group-cards),
+  :host(#{$c4d-prefix}-content-group-pictograms),
   .#{$prefix}--content-group {
     display: block;
     margin-top: $spacing-07;
     margin-bottom: $spacing-07;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-bottom: $spacing-09;
     }
 
     .#{$prefix}--card__CTA {
       // TO DO: aspect ratio 2x1
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         @include hang;
       }
     }
   }
 
-  :host(#{$dds-prefix}-content-group-heading),
+  :host(#{$c4d-prefix}-content-group-heading),
   .#{$prefix}--content-group__title {
-    @include carbon--type-style('expressive-heading-04', true);
+    @include type-style('fluid-heading-04', true);
 
     display: block;
-    margin-bottom: $carbon--spacing-07;
+    margin-bottom: $spacing-07;
   }
 
-  :host(#{$dds-prefix}-content-group-heading),
-  :host(#{$dds-prefix}-content-group-copy),
+  :host(#{$c4d-prefix}-content-group-heading),
+  :host(#{$c4d-prefix}-content-group-copy),
   .#{$prefix}--content-group__title,
   .#{$prefix}--content-group__copy {
     @include content-width;
   }
 
-  :host(#{$dds-prefix}-content-group-copy),
+  :host(#{$c4d-prefix}-content-group-copy),
   .#{$prefix}--content-group__copy {
     margin-bottom: $layout-03;
   }
 
-  :host(#{$dds-prefix}-content-group) ::slotted([slot='footer']),
+  :host(#{$c4d-prefix}-content-group) ::slotted([slot='footer']),
   .#{$prefix}--content-group__cta {
-    margin-top: $carbon--layout-04;
+    margin-top: $spacing-09;
 
-    @include carbon--breakpoint('md') {
-      @include carbon--make-col-ready;
-      @include carbon--make-col(4, 8);
+    @include breakpoint(md) {
+      @include make-col-ready;
+      @include make-col(4, 8);
     }
   }
 
-  :host(#{$dds-prefix}-content-group) ::slotted([slot='footer']) {
-    @include carbon--breakpoint('md') {
-      margin-left: -1rem;
+  :host(#{$c4d-prefix}-content-group) ::slotted([slot='footer']) {
+    @include breakpoint(md) {
+      margin-left: -$spacing-05;
     }
   }
 
   .#{$prefix}--content-group__cta-row {
-    @include carbon--make-row;
+    @include make-row;
 
     // allows for margin collapsing
     display: block;
 
     // FIXME: CardLink is being used as Card in React, need to separate this
     .#{$prefix}--card__CTA.#{$prefix}--card-link .#{$prefix}--card__heading {
-      @include carbon--type-style('expressive-heading-02', true);
+      @include type-style('heading-02', true);
     }
   }
 }
-
-@include exports('content-group') {
-  @include content-group;
-}
diff --git a/packages/styles/scss/internal/content-group/_index.scss b/packages/styles/scss/internal/content-group/_index.scss
new file mode 100644
index 00000000000..f770178b3f9
--- /dev/null
+++ b/packages/styles/scss/internal/content-group/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-group';
+@use 'content-group';
+
+@include content-group.content-group;
diff --git a/packages/styles/scss/internal/content-item/_content-item.scss b/packages/styles/scss/internal/content-item/_content-item.scss
index 3d4013a1943..ca9d971ed36 100644
--- a/packages/styles/scss/internal/content-item/_content-item.scss
+++ b/packages/styles/scss/internal/content-item/_content-item.scss
@@ -1,80 +1,107 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 '../../globals/vars';
-@import '../../globals/imports';
-@import '../../globals/utils/content-width';
-@import '../../components/list/list';
-@import '../../components/link-with-icon/link-with-icon';
-@import '../../components/buttongroup/buttongroup';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '../../globals/vars' as *;
+@use '../../globals/utils/content-width' as *;
+@use '../../components/list/list';
+@use '../../components/link-with-icon';
+@use '../../components/button-group';
 
 @mixin content-item {
-  .#{$prefix}--content-item--inverse {
-    background-color: $inverse-02;
+  :host(#{$c4d-prefix}-content-item) {
+    display: block;
+    margin-top: $spacing-07;
+    margin-bottom: $spacing-07;
+    max-width: to-rem(640px);
 
-    .#{$prefix}--content-item__heading {
-      color: $text-04;
+    @include breakpoint(md) {
+      padding-right: $spacing-05;
     }
 
-    .#{$prefix}--content-item__copy p {
-      color: $text-04;
+    .#{$c4d-prefix}--content-item__horizontal {
+      @include breakpoint(md) {
+        display: flex;
+      }
+      .#{$c4d-prefix}--content-item__media {
+        margin-right: $spacing-07;
+      }
     }
-  }
 
-  :host(#{$dds-prefix}-content-item),
-  .#{$prefix}--content-item {
-    display: block;
-    margin-top: $carbon--spacing-07;
-    margin-bottom: $carbon--spacing-07;
+    .#{$c4d-prefix}--content-item__statitics {
+      @include type-style('fluid-display-01', true);
+
+      margin-bottom: $spacing-05;
+    }
+
+    .#{$c4d-prefix}--content-item__media {
+      margin-bottom: $spacing-05;
+    }
+
+    ::slotted(#{$c4d-prefix}-image-logo) {
+      /* stylelint-disable */
+      aspect-ratio: var(--logo-ratio);
+      /* stylelint-enable */
+      margin: 0;
+      margin-bottom: $spacing-06;
+    }
+
+    ::slotted(svg) {
+      width: $spacing-10;
+      height: $spacing-10;
+    }
   }
 
-  :host(#{$dds-prefix}-content-item)
-    ::slotted(#{$dds-prefix}-video-player-container),
-  .#{$prefix}--content-item .#{$prefix}--video-player {
+  :host(#{$c4d-prefix}-content-item)
+    ::slotted(#{$c4d-prefix}-video-player-container) {
     margin-top: $spacing-05;
-    margin-bottom: $carbon--spacing-07;
+    margin-bottom: $spacing-07;
     max-width: 40rem;
   }
 
-  .#{$prefix}--content-item .#{$prefix}--image-with-caption {
-    margin-top: $spacing-05;
+  :host(#{$c4d-prefix}-content-item-heading),
+  :host(#{$c4d-prefix}-content-item-copy),
+  :host(#{$c4d-prefix}-content-item-paragraph) {
+    display: block;
   }
 
-  :host(#{$dds-prefix}-content-item-heading),
-  :host(#{$dds-prefix}-content-item-copy),
-  .#{$prefix}--content-item__heading,
-  .#{$prefix}--content-item__copy {
-    @include carbon--breakpoint(md) {
+  :host(#{$c4d-prefix}-content-item-copy) {
+    @include breakpoint(md) {
       @include content-width;
-
-      display: block;
     }
   }
 
-  :host(#{$dds-prefix}-content-item-heading),
-  .#{$prefix}--content-item__heading {
-    @include carbon--type-style('expressive-heading-02');
+  :host(#{$c4d-prefix}-content-item-heading) {
+    @include type-style('heading-02');
 
-    color: $text-01;
+    color: $text-primary;
   }
 
-  :host(#{$dds-prefix}-content-item-paragraph),
-  .#{$prefix}--content-item__copy p {
-    @include carbon--type-style('body-long-02');
+  :host(#{$c4d-prefix}-content-item-paragraph) {
+    @include type-style('body-02');
 
-    color: $text-01;
-    margin-bottom: $carbon--spacing-06;
+    color: $text-primary;
+    margin-bottom: $spacing-05;
   }
 
-  .#{$prefix}--content-item__cta {
-    margin-top: $carbon--spacing-05;
+  :host(#{$c4d-prefix}-content-item[horizontal])
+    ::slotted(#{$c4d-prefix}-image) {
+    width: 100%;
+    @include breakpoint(md) {
+      width: to-rem(128px);
+    }
   }
-}
 
-@include exports('content-item') {
-  @include content-item;
+  :host(#{$c4d-prefix}-content-item) ::slotted([slot='footer']) {
+    margin-left: 0;
+  }
 }
diff --git a/packages/styles/scss/internal/content-item/_index.scss b/packages/styles/scss/internal/content-item/_index.scss
new file mode 100644
index 00000000000..19166692801
--- /dev/null
+++ b/packages/styles/scss/internal/content-item/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-item';
+@use 'content-item';
+
+@include content-item.content-item;
diff --git a/packages/styles/scss/internal/content-section/_content-section.scss b/packages/styles/scss/internal/content-section/_content-section.scss
index 4a62ed03de1..6c3164b60ec 100644
--- a/packages/styles/scss/internal/content-section/_content-section.scss
+++ b/packages/styles/scss/internal/content-section/_content-section.scss
@@ -5,23 +5,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../globals/vars';
-@import '../../globals/imports';
-
-@mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '../../globals/utils/flex-grid' as *;
+@use '../../globals/vars' as *;
+
+@mixin content-section-themed-items {
+  color: $text-primary;
+  background: $background;
 }
 
 @mixin content-section {
-  :host(#{$dds-prefix}-link-list-section),
+  :host(#{$c4d-prefix}-link-list-section),
   .#{$prefix}--content-section {
     padding-top: $spacing-09;
-    padding-bottom: $carbon--layout-05;
+    padding-bottom: $spacing-10;
   }
 
   .#{$prefix}--content-section-layout {
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       display: flex;
     }
   }
@@ -30,18 +36,18 @@
     padding: $spacing-05;
     padding-top: 0;
 
-    @include carbon--breakpoint-down('lg') {
+    @include breakpoint-down(lg) {
       padding-bottom: $spacing-07;
     }
 
-    @include carbon--breakpoint(lg) {
-      @include carbon--make-col(4, 16);
+    @include breakpoint(lg) {
+      @include make-col(4, 16);
     }
   }
 
   .#{$prefix}--content-section__body {
-    @include carbon--breakpoint-down(md) {
-      // TODO: `display:block` or `display:flex` here causes broken carousel if `<dds-carousel>` is slotted in as the child,
+    @include breakpoint-down(md) {
+      // TODO: `display:block` or `display:flex` here causes broken carousel if `<cds-carousel>` is slotted in as the child,
       // especially if the carousel containts large number of cards.
       // May need to investigate.
       display: contents;
@@ -49,51 +55,51 @@
   }
 
   .#{$prefix}--content-section__grid,
-  :host(#{$dds-prefix}-cta-section) {
-    @include carbon--make-container;
+  :host(#{$c4d-prefix}-cta-section) {
+    @include make-container;
   }
 
   .#{$prefix}--content-section__row {
-    @include carbon--make-row;
+    @include make-row;
   }
 
   .#{$prefix}--content-section__left,
   .#{$prefix}--content-section__children {
-    @include carbon--make-col-ready;
+    @include make-col-ready;
   }
 
   .#{$prefix}--content-section__left {
-    @include carbon--breakpoint(lg) {
-      @include carbon--make-col(4, 16);
+    @include breakpoint(lg) {
+      @include make-col(4, 16);
 
       padding-top: $spacing-05;
     }
   }
 
-  :host(#{$dds-prefix}-content-section-heading),
+  :host(#{$c4d-prefix}-content-section-heading),
   .#{$prefix}--content-section__heading {
     margin-top: 0;
     margin-bottom: 0;
-    color: $text-01;
+    color: $text-primary;
 
-    @include type-style('expressive-heading-02');
+    @include type-style('heading-02');
   }
 
-  :host(#{$dds-prefix}-content-section-copy),
+  :host(#{$c4d-prefix}-content-section-copy),
   .#{$prefix}--content-section__copy p {
-    @include type-style('body-short-02');
+    @include type-style('body-compact-02');
 
-    color: $text-02;
+    color: $text-secondary;
     margin-bottom: $spacing-06;
   }
 
-  :host(#{$dds-prefix}-content-section-heading),
+  :host(#{$c4d-prefix}-content-section-heading),
   .#{$prefix}--content-section__heading,
-  :host(#{$dds-prefix}-content-section-copy),
+  :host(#{$c4d-prefix}-content-section-copy),
   .#{$prefix}--content-section__copy p,
-  :host(#{$dds-prefix}-content-section) ::slotted([slot='footer']),
+  :host(#{$c4d-prefix}-content-section) ::slotted([slot='footer']),
   .#{$prefix}--content-section__cta {
-    @include carbon--breakpoint(md) {
+    @include breakpoint(md) {
       padding-right: $spacing-07;
     }
   }
@@ -101,8 +107,8 @@
   .#{$prefix}--content-section__children {
     margin-top: $spacing-06;
 
-    @include carbon--breakpoint(lg) {
-      @include carbon--make-col(12, 16);
+    @include breakpoint(lg) {
+      @include make-col(12, 16);
 
       margin-top: 0;
     }
@@ -122,31 +128,17 @@
   }
 
   .#{$prefix}--content-section--g10 {
-    @include carbon--theme(
-      $carbon--theme--g10,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
+    @include theme($g10, feature-flag-enabled('enable-css-custom-properties'));
+    @include content-section-themed-items;
   }
+
   .#{$prefix}--content-section--g90 {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
+    @include theme($g90, feature-flag-enabled('enable-css-custom-properties'));
+    @include content-section-themed-items;
   }
+
   .#{$prefix}--content-section--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
+    @include theme($g100, feature-flag-enabled('enable-css-custom-properties'));
+    @include content-section-themed-items;
   }
 }
-
-@include exports('content-section') {
-  @include content-section;
-}
diff --git a/packages/styles/scss/internal/content-section/_index.scss b/packages/styles/scss/internal/content-section/_index.scss
new file mode 100644
index 00000000000..15b4b76c4b2
--- /dev/null
+++ b/packages/styles/scss/internal/content-section/_index.scss
@@ -0,0 +1,11 @@
+//
+// Copyright IBM Corp. 2018, 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.
+//
+
+@forward 'content-section';
+@use 'content-section';
+
+@include content-section.content-section;
diff --git a/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss b/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss
index a591f1c7b5a..85b598177e4 100644
--- a/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss
+++ b/packages/styles/scss/patterns/blocks/callout-data/_callout-data.scss
@@ -10,57 +10,57 @@
     .#{$prefix}--callout {
       &-data {
         &__data {
-          @include carbon--type-style('display-03', true);
+          @include type-style('display-03', true);
 
-          color: $inverse-01;
+          color: $icon-inverse;
           padding-top: $layout-01;
           padding-bottom: $layout-05;
         }
 
         &__copy {
-          @include carbon--type-style('expressive-heading-03', true);
+          @include type-style('fluid-heading-03', true);
 
-          color: $inverse-01;
+          color: $icon-inverse;
           margin-top: auto;
           padding-bottom: $layout-01;
         }
 
         &__source {
-          @include carbon--type-style('body-short-01', true);
+          @include type-style('body-compact-01', true);
 
           width: 90%;
           max-width: carbon--mini-units(80);
           padding-bottom: $layout-03;
 
-          @include carbon--breakpoint('md') {
+          @include breakpoint(md) {
             padding-bottom: $layout-05;
           }
 
-          @include carbon--breakpoint('lg') {
+          @include breakpoint(lg) {
             padding-bottom: $layout-06;
           }
 
           padding-top: $spacing-03;
-          color: $text-05;
+          color: $text-helper;
         }
       }
 
       &__column {
         height: auto;
 
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           height: carbon--mini-units(40);
         }
 
-        @include carbon--breakpoint('lg') {
+        @include breakpoint(lg) {
           height: carbon--mini-units(50);
         }
 
-        @include carbon--breakpoint('xlg') {
+        @include breakpoint(xlg) {
           height: carbon--mini-units(60);
         }
 
-        @include carbon--breakpoint('max') {
+        @include breakpoint(max) {
           height: carbon--mini-units(70);
         }
       }
@@ -77,6 +77,3 @@
     }
   }
 }
-@include exports('callout-data') {
-  @include callout-data;
-}
diff --git a/packages/styles/scss/patterns/blocks/callout-data/_index.scss b/packages/styles/scss/patterns/blocks/callout-data/_index.scss
new file mode 100644
index 00000000000..7c7996da210
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/callout-data/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout-data/callout-data"
+@warn 'Deprecated scss import for `callout-data`, remap to `@carbon/ibmdotcom-styles/scss/components/callout-data/callout-data`';
+@use '../../../components/callout-data/index';
diff --git a/packages/styles/scss/patterns/blocks/callout-data/index.scss b/packages/styles/scss/patterns/blocks/callout-data/index.scss
deleted file mode 100644
index bc1ff628932..00000000000
--- a/packages/styles/scss/patterns/blocks/callout-data/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout-data/callout-data"
-@warn 'Deprecated scss import for `callout-data`, remap to `@carbon/ibmdotcom-styles/scss/components/callout-data/callout-data`';
-@import '../../../components/callout-data/index';
diff --git a/packages/styles/scss/patterns/blocks/callout-quote/_index.scss b/packages/styles/scss/patterns/blocks/callout-quote/_index.scss
new file mode 100644
index 00000000000..feea0c6797a
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/callout-quote/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout-quote/index"
+@warn 'Deprecated scss import for `callout-quote`, remap to `@carbon/ibmdotcom-styles/scss/components/callout-quote/index`';
+@use '../../../components/callout-quote';
diff --git a/packages/styles/scss/patterns/blocks/callout-quote/index.scss b/packages/styles/scss/patterns/blocks/callout-quote/index.scss
deleted file mode 100644
index 2829d0f595c..00000000000
--- a/packages/styles/scss/patterns/blocks/callout-quote/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout-quote/index"
-@warn 'Deprecated scss import for `callout-quote`, remap to `@carbon/ibmdotcom-styles/scss/components/callout-quote/index`';
-@import '../../../components/callout-quote/index';
diff --git a/packages/styles/scss/patterns/blocks/callout-with-media/_callout-with-media.scss b/packages/styles/scss/patterns/blocks/callout-with-media/_callout-with-media.scss
index 8e7423233d1..a59ef5c0d37 100644
--- a/packages/styles/scss/patterns/blocks/callout-with-media/_callout-with-media.scss
+++ b/packages/styles/scss/patterns/blocks/callout-with-media/_callout-with-media.scss
@@ -15,7 +15,7 @@
       padding-bottom: $layout-05;
 
       &-simple__media-video {
-        @include carbon--breakpoint-down('md') {
+        @include breakpoint-down(md) {
           margin-top: -16px;
         }
 
@@ -23,7 +23,7 @@
       }
 
       &-simple__media-image {
-        @include carbon--breakpoint-down('md') {
+        @include breakpoint-down(md) {
           margin-top: 0;
         }
 
@@ -36,6 +36,3 @@
     }
   }
 }
-@include exports('callout-with-media') {
-  @include callout-with-media;
-}
diff --git a/packages/styles/scss/patterns/blocks/callout-with-media/_index.scss b/packages/styles/scss/patterns/blocks/callout-with-media/_index.scss
new file mode 100644
index 00000000000..1998b8d430a
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/callout-with-media/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout-with-media/index"
+@warn 'Deprecated scss import for `callout-with-media`, remap to `@carbon/ibmdotcom-styles/scss/components/callout-with-media/index`';
+@use '../../../components/callout-with-media';
diff --git a/packages/styles/scss/patterns/blocks/callout-with-media/index.scss b/packages/styles/scss/patterns/blocks/callout-with-media/index.scss
deleted file mode 100644
index 06112622df8..00000000000
--- a/packages/styles/scss/patterns/blocks/callout-with-media/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout-with-media/index"
-@warn 'Deprecated scss import for `callout-with-media`, remap to `@carbon/ibmdotcom-styles/scss/components/callout-with-media/index`';
-@import '../../../components/callout-with-media/index';
diff --git a/packages/styles/scss/patterns/blocks/content-block-cards/_content-block-cards.scss b/packages/styles/scss/patterns/blocks/content-block-cards/_content-block-cards.scss
index efe839c19fe..98edcc43661 100644
--- a/packages/styles/scss/patterns/blocks/content-block-cards/_content-block-cards.scss
+++ b/packages/styles/scss/patterns/blocks/content-block-cards/_content-block-cards.scss
@@ -7,7 +7,8 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-cards/content-block-cards"
 @warn 'Deprecated scss import for `content-block-cards`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-cards/content-block-cards`';
-@import '../../../components/content-block-cards/content-block-cards';
+@use '../../globals/utils/flex-grid' as *;
+@use '../../../components/content-block-cards';
 
 @mixin content-block-cards {
   .#{$prefix}--content-block-cards {
@@ -18,35 +19,31 @@
       }
     }
     .#{$prefix}--content-block {
-      padding-top: $carbon--layout-03;
-      padding-bottom: $carbon--layout-05;
-      @include carbon--breakpoint('md') {
-        padding-top: $carbon--layout-03;
-        padding-bottom: $carbon--layout-06;
+      padding-top: $spacing-07;
+      padding-bottom: $spacing-10;
+      @include breakpoint(md) {
+        padding-top: $spacing-07;
+        padding-bottom: $spacing-12;
       }
-      @include carbon--breakpoint('lg') {
-        padding-top: $carbon--layout-05;
-        padding-bottom: $carbon--layout-07;
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
+        padding-bottom: $spacing-13;
       }
 
       &__heading {
-        margin-bottom: $carbon--layout-03;
-        @include carbon--breakpoint('md') {
-          margin-bottom: $carbon--layout-04;
+        margin-bottom: $spacing-07;
+        @include breakpoint(md) {
+          margin-bottom: $spacing-09;
         }
-        @include carbon--breakpoint('lg') {
-          margin-bottom: $carbon--layout-05;
+        @include breakpoint(lg) {
+          margin-bottom: $spacing-10;
         }
       }
       &__cta {
-        @include carbon--breakpoint('lg') {
-          @include carbon--make-col(4, 12);
+        @include breakpoint(lg) {
+          @include make-col(4, 12);
         }
       }
     }
   }
 }
-
-@include exports('content-block-cards') {
-  @include content-block-cards;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-block-headlines/_content-block-headlines.scss b/packages/styles/scss/patterns/blocks/content-block-headlines/_content-block-headlines.scss
index 99f479672c0..034833716e2 100644
--- a/packages/styles/scss/patterns/blocks/content-block-headlines/_content-block-headlines.scss
+++ b/packages/styles/scss/patterns/blocks/content-block-headlines/_content-block-headlines.scss
@@ -5,15 +5,17 @@
 * LICENSE file in the root directory of this source tree.
 */
 
+@use '../../globals/utils/flex-grid' as *;
+
 @mixin content-block-headlines {
   .#{$prefix}--content-block-headlines {
     .#{$prefix}--content-block {
       &__heading,
       &__copy {
-        @include carbon--breakpoint('lg') {
-          @include carbon--make-col-ready;
+        @include breakpoint(lg) {
+          @include make-col-ready;
 
-          @include carbon--make-col(8, 12);
+          @include make-col(8, 12);
 
           @include hang;
         }
@@ -21,94 +23,91 @@
 
       &__copy {
         p {
-          margin-bottom: $carbon--layout-05;
+          margin-bottom: $spacing-10;
 
-          @include carbon--breakpoint('lg') {
-            margin-bottom: $carbon--layout-06;
+          @include breakpoint(lg) {
+            margin-bottom: $spacing-12;
           }
         }
       }
 
-      @include carbon--breakpoint('md') {
-        padding-top: $carbon--spacing-07;
+      @include breakpoint(md) {
+        padding-top: $spacing-07;
       }
 
-      @include carbon--breakpoint('lg') {
-        padding-top: $carbon--layout-05;
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
       }
     }
 
     &__container {
-      @include carbon--make-row;
+      @include make-row;
     }
 
     &__row {
-      @include carbon--make-col-ready;
+      @include make-col-ready;
 
       &:last-of-type {
-        margin-bottom: $carbon--spacing-07;
+        margin-bottom: $spacing-07;
 
-        @include carbon--breakpoint('md') {
-          margin-bottom: $carbon--spacing-07;
+        @include breakpoint(md) {
+          margin-bottom: $spacing-07;
         }
 
-        @include carbon--breakpoint('lg') {
-          margin-bottom: $carbon--layout-06;
+        @include breakpoint(lg) {
+          margin-bottom: $spacing-12;
         }
       }
 
-      @include carbon--breakpoint('md') {
-        border-top: 1px solid $ui-03;
+      @include breakpoint(md) {
+        border-top: 1px solid $layer-accent-01;
 
-        @include carbon--make-col(12, 12);
+        @include make-col(12, 12);
       }
 
-      @include carbon--breakpoint('lg') {
-        @include carbon--make-col(8, 12);
+      @include breakpoint(lg) {
+        @include make-col(8, 12);
       }
     }
 
     &__item {
       &-container {
-        @include carbon--make-row;
+        @include make-row;
       }
 
-      @include carbon--make-col-ready;
+      @include make-col-ready;
 
-      border-top: 1px solid $ui-03;
-      padding-top: $carbon--spacing-05;
-      padding-bottom: $carbon--spacing-07;
+      border-top: 1px solid $layer-accent-01;
+      padding-top: $spacing-05;
+      padding-bottom: $spacing-07;
 
       h4,
       p {
         max-width: 90%;
-        color: $text-01;
+        color: $text-primary;
       }
 
       p {
-        @include carbon--type-style('body-long-02', true);
+        @include type-style('body-02', true);
 
-        margin: $carbon--spacing-05 0 0;
+        margin: $spacing-05 0 0;
       }
 
       h4 {
-        @include carbon--type-style('display-02', true);
+        @include type-style('display-02', true);
       }
 
       .#{$prefix}--link {
-        margin-top: $carbon--spacing-05;
+        margin-top: $spacing-05;
       }
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(4, 8);
+      @include breakpoint(md) {
+        @include make-col(4, 8);
 
         border-top: none;
-        padding-top: $carbon--spacing-05;
-        padding-bottom: $carbon--layout-05;
+        padding-top: $spacing-05;
+        padding-bottom: $spacing-10;
       }
     }
   }
 }
-@include exports('content-block-headlines') {
-  @include content-block-headlines;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-block-headlines/_index.scss b/packages/styles/scss/patterns/blocks/content-block-headlines/_index.scss
new file mode 100644
index 00000000000..50d3d7d5599
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-block-headlines/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-headlines/index"
+@warn 'Deprecated scss import for `content-block-headlines`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-headlines/index`';
+@use '../../../components/content-block-headlines';
diff --git a/packages/styles/scss/patterns/blocks/content-block-headlines/index.scss b/packages/styles/scss/patterns/blocks/content-block-headlines/index.scss
deleted file mode 100644
index 2ba14b0dad0..00000000000
--- a/packages/styles/scss/patterns/blocks/content-block-headlines/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-headlines/index"
-@warn 'Deprecated scss import for `content-block-headlines`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-headlines/index`';
-@import '../../../components/content-block-headlines/index';
diff --git a/packages/styles/scss/patterns/blocks/content-block-media/_content-block-media.scss b/packages/styles/scss/patterns/blocks/content-block-media/_content-block-media.scss
index ab6cf63a98a..4ccf5cc1e50 100644
--- a/packages/styles/scss/patterns/blocks/content-block-media/_content-block-media.scss
+++ b/packages/styles/scss/patterns/blocks/content-block-media/_content-block-media.scss
@@ -6,12 +6,12 @@
  */
 
 @mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
+  color: $text-primary;
+  background: $background;
 
   &.#{$prefix}--content-block-media--with-border
     .#{$prefix}--content-block-media__divider {
-    border-bottom-color: $ui-04;
+    border-bottom-color: $toggle-off;
   }
 }
 
@@ -25,14 +25,11 @@
   }
 
   .#{$prefix}--content-block-media--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
+    @include theme(
+      $g100,
       feature-flag-enabled('enable-css-custom-properties')
     ) {
       @include themed-items;
     }
   }
 }
-@include exports('content-block-media') {
-  @include content-block-media;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-block-media/_index.scss b/packages/styles/scss/patterns/blocks/content-block-media/_index.scss
new file mode 100644
index 00000000000..199a4a6941f
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-block-media/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-media/index"
+@warn 'Deprecated scss import for `content-block-media`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-media/index`';
+@use '../../../components/content-block-media';
diff --git a/packages/styles/scss/patterns/blocks/content-block-media/index.scss b/packages/styles/scss/patterns/blocks/content-block-media/index.scss
deleted file mode 100644
index 6d4a9f88178..00000000000
--- a/packages/styles/scss/patterns/blocks/content-block-media/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-media/index"
-@warn 'Deprecated scss import for `content-block-media`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-media/index`';
-@import '../../../components/content-block-media/index';
diff --git a/packages/styles/scss/patterns/blocks/content-block-mixed/_content-block-mixed.scss b/packages/styles/scss/patterns/blocks/content-block-mixed/_content-block-mixed.scss
index 259de018fba..9085be6bd62 100644
--- a/packages/styles/scss/patterns/blocks/content-block-mixed/_content-block-mixed.scss
+++ b/packages/styles/scss/patterns/blocks/content-block-mixed/_content-block-mixed.scss
@@ -8,7 +8,3 @@
 @mixin content-block-mixed {
   // empty for now
 }
-
-@include exports('content-block-mixed') {
-  @include content-block-mixed;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-block-mixed/_index.scss b/packages/styles/scss/patterns/blocks/content-block-mixed/_index.scss
new file mode 100644
index 00000000000..7e72bae74d9
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-block-mixed/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index"
+@warn 'Deprecated scss import for `content-block-mixed`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index`';
+@use '../../../components/content-block-mixed';
diff --git a/packages/styles/scss/patterns/blocks/content-block-mixed/index.scss b/packages/styles/scss/patterns/blocks/content-block-mixed/index.scss
deleted file mode 100644
index 566f64600cd..00000000000
--- a/packages/styles/scss/patterns/blocks/content-block-mixed/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index"
-@warn 'Deprecated scss import for `content-block-mixed`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index`';
-@import '../../../components/content-block-mixed/index';
diff --git a/packages/styles/scss/patterns/blocks/content-block-segmented/_content-block-segmented.scss b/packages/styles/scss/patterns/blocks/content-block-segmented/_content-block-segmented.scss
index 5d25a5ef5ac..942fc2fd51a 100755
--- a/packages/styles/scss/patterns/blocks/content-block-segmented/_content-block-segmented.scss
+++ b/packages/styles/scss/patterns/blocks/content-block-segmented/_content-block-segmented.scss
@@ -8,24 +8,21 @@
 @mixin content-block-segmented {
   .#{$prefix}--content-block-segmented {
     .#{$prefix}--content-group {
-      margin-top: $carbon--layout-05;
-      margin-bottom: $carbon--layout-05;
+      margin-top: $spacing-10;
+      margin-bottom: $spacing-10;
 
-      @include carbon--breakpoint('lg') {
-        margin-top: $carbon--layout-06;
-        margin-bottom: $carbon--layout-06;
+      @include breakpoint(lg) {
+        margin-top: $spacing-12;
+        margin-bottom: $spacing-12;
       }
     }
 
     .#{$prefix}--row {
       &.#{$prefix}--layout--border {
-        @include carbon--breakpoint('lg') {
-          padding-bottom: $carbon--layout-06;
+        @include breakpoint(lg) {
+          padding-bottom: $spacing-12;
         }
       }
     }
   }
 }
-@include exports('content-block-segmented') {
-  @include content-block-segmented;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-block-segmented/_index.scss b/packages/styles/scss/patterns/blocks/content-block-segmented/_index.scss
new file mode 100644
index 00000000000..8c1db89687f
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-block-segmented/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-segmented/index"
+@warn 'Deprecated scss import for `content-block-segmented`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-segmented/index`';
+@use '../../../components/content-block-segmented';
diff --git a/packages/styles/scss/patterns/blocks/content-block-segmented/index.scss b/packages/styles/scss/patterns/blocks/content-block-segmented/index.scss
deleted file mode 100644
index 1d67d8609bd..00000000000
--- a/packages/styles/scss/patterns/blocks/content-block-segmented/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-segmented/index"
-@warn 'Deprecated scss import for `content-block-segmented`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-segmented/index`';
-@import '../../../components/content-block-segmented/index';
diff --git a/packages/styles/scss/patterns/blocks/content-block-simple/_content-block-simple.scss b/packages/styles/scss/patterns/blocks/content-block-simple/_content-block-simple.scss
index 99a0a01b23a..0bf2b818636 100644
--- a/packages/styles/scss/patterns/blocks/content-block-simple/_content-block-simple.scss
+++ b/packages/styles/scss/patterns/blocks/content-block-simple/_content-block-simple.scss
@@ -7,13 +7,6 @@
 
 @mixin content-block-simple {
   .#{$prefix}--content-block-simple--inverse {
-    background-color: $inverse-02;
+    background-color: $focus-inset;
   }
-  .#{$prefix}--content-block {
-    // empty for now
-  }
-}
-
-@include exports('content-block-simple') {
-  @include content-block-simple;
 }
diff --git a/packages/styles/scss/patterns/blocks/content-block-simple/_index.scss b/packages/styles/scss/patterns/blocks/content-block-simple/_index.scss
new file mode 100644
index 00000000000..60e2f24fc49
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-block-simple/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-simple/index"
+@warn 'Deprecated scss import for `content-block-simple`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-simple/index`';
+@use '../../../components/content-block-simple';
diff --git a/packages/styles/scss/patterns/blocks/content-block-simple/index.scss b/packages/styles/scss/patterns/blocks/content-block-simple/index.scss
deleted file mode 100644
index 61a992e217f..00000000000
--- a/packages/styles/scss/patterns/blocks/content-block-simple/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-simple/index"
-@warn 'Deprecated scss import for `content-block-simple`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-simple/index`';
-@import '../../../components/content-block-simple/index';
diff --git a/packages/styles/scss/patterns/blocks/content-group-cards/_content-group-cards.scss b/packages/styles/scss/patterns/blocks/content-group-cards/_content-group-cards.scss
index 5b3dd6cd652..48292a4c12d 100644
--- a/packages/styles/scss/patterns/blocks/content-group-cards/_content-group-cards.scss
+++ b/packages/styles/scss/patterns/blocks/content-group-cards/_content-group-cards.scss
@@ -5,32 +5,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '../../../components/link-with-icon/link-with-icon';
+@use 'sass:list';
+
+@use '../../globals/utils/flex-grid' as *;
+@use '../../../components/link-with-icon';
 
 @mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
+  color: $text-primary;
+  background: $background;
 }
 
 @mixin content-group-cards {
   .#{$prefix}--content-group-cards {
     &__row {
-      @include carbon--make-row;
+      @include make-row;
     }
 
     &-item__col {
-      margin-top: $carbon--grid-gutter--condensed / 2;
-      margin-bottom: $carbon--grid-gutter--condensed / 2;
-      @include carbon--make-col-ready;
+      margin-top: list.slash($grid-gutter, 2);
+      margin-bottom: list.slash($grid-gutter, 2);
+      @include make-col-ready;
 
-      @include carbon--breakpoint(lg) {
-        @include carbon--make-col(8, 16);
+      @include breakpoint(lg) {
+        @include make-col(8, 16);
       }
     }
 
     @include themed-items;
   }
 }
-@include exports('content-group-cards') {
-  @include content-group-cards;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-group-cards/_index.scss b/packages/styles/scss/patterns/blocks/content-group-cards/_index.scss
new file mode 100644
index 00000000000..52b07f202d0
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-group-cards/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-group-cards/index"
+@warn 'Deprecated scss import for `content-group-cards`, remap to `@carbon/ibmdotcom-styles/scss/components/content-group-cards/index`';
+@use '../../../components/content-group-cards';
diff --git a/packages/styles/scss/patterns/blocks/content-group-cards/index.scss b/packages/styles/scss/patterns/blocks/content-group-cards/index.scss
deleted file mode 100644
index faf9e0cec5b..00000000000
--- a/packages/styles/scss/patterns/blocks/content-group-cards/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-group-cards/index"
-@warn 'Deprecated scss import for `content-group-cards`, remap to `@carbon/ibmdotcom-styles/scss/components/content-group-cards/index`';
-@import '../../../components/content-group-cards/index';
diff --git a/packages/styles/scss/patterns/blocks/content-group-horizontal/_content-group-horizontal.scss b/packages/styles/scss/patterns/blocks/content-group-horizontal/_content-group-horizontal.scss
deleted file mode 100644
index 23867d13f39..00000000000
--- a/packages/styles/scss/patterns/blocks/content-group-horizontal/_content-group-horizontal.scss
+++ /dev/null
@@ -1,36 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 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.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal"
-@warn 'Deprecated scss import for `content-group-horizontal`, remap to `@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal`';
-@import '../../../components/content-block-horizontal/content-block-horizontal';
-
-@mixin content-group-horizontal {
-  .#{$prefix}--content-group-horizontal {
-    .#{$prefix}--content-item-horizontal__item:last-child {
-      @include carbon--breakpoint('max') {
-        padding-bottom: $layout-07;
-      }
-      @include carbon--breakpoint('lg') {
-        padding-bottom: $layout-07;
-      }
-      @include carbon--breakpoint('md') {
-        padding-bottom: $layout-06;
-      }
-      @include carbon--breakpoint('sm') {
-        padding-bottom: $layout-05;
-      }
-    }
-    .#{$prefix}--content-block {
-      padding-bottom: 0;
-    }
-  }
-}
-
-@include exports('content-group-horizontal') {
-  @include content-group-horizontal;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-group-pictograms/_content-group-pictograms.scss b/packages/styles/scss/patterns/blocks/content-group-pictograms/_content-group-pictograms.scss
index f09e36c2dfb..712154fa7f4 100644
--- a/packages/styles/scss/patterns/blocks/content-group-pictograms/_content-group-pictograms.scss
+++ b/packages/styles/scss/patterns/blocks/content-group-pictograms/_content-group-pictograms.scss
@@ -10,7 +10,7 @@
     .#{$prefix}--content-group__copy {
       margin-bottom: $spacing-05;
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         margin-bottom: $spacing-07;
       }
     }
@@ -26,6 +26,3 @@
     }
   }
 }
-@include exports('content-group-pictograms') {
-  @include content-group-pictograms;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-group-pictograms/_index.scss b/packages/styles/scss/patterns/blocks/content-group-pictograms/_index.scss
new file mode 100644
index 00000000000..3bf4fe3929a
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-group-pictograms/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/index"
+@warn 'Deprecated scss import for `content-group-pictograms`, remap to `@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/index`';
+@use '../../../components/content-group-pictograms';
diff --git a/packages/styles/scss/patterns/blocks/content-group-pictograms/index.scss b/packages/styles/scss/patterns/blocks/content-group-pictograms/index.scss
deleted file mode 100644
index 11623cd25f5..00000000000
--- a/packages/styles/scss/patterns/blocks/content-group-pictograms/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/index"
-@warn 'Deprecated scss import for `content-group-pictograms`, remap to `@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/index`';
-@import '../../../components/content-group-pictograms/index';
diff --git a/packages/styles/scss/patterns/blocks/content-group-simple/_content-group-simple.scss b/packages/styles/scss/patterns/blocks/content-group-simple/_content-group-simple.scss
index c2d5514e76c..6dc43daebfd 100644
--- a/packages/styles/scss/patterns/blocks/content-group-simple/_content-group-simple.scss
+++ b/packages/styles/scss/patterns/blocks/content-group-simple/_content-group-simple.scss
@@ -12,7 +12,3 @@
     }
   }
 }
-
-@include exports('content-group-simple') {
-  @include content-group-simple;
-}
diff --git a/packages/styles/scss/patterns/blocks/content-group-simple/_index.scss b/packages/styles/scss/patterns/blocks/content-group-simple/_index.scss
new file mode 100644
index 00000000000..060e7133a79
--- /dev/null
+++ b/packages/styles/scss/patterns/blocks/content-group-simple/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-group-simple/index"
+@warn 'Deprecated scss import for `content-group-simple`, remap to `@carbon/ibmdotcom-styles/scss/components/content-group-simple/index`';
+@use '../../../components/content-group-simple';
diff --git a/packages/styles/scss/patterns/blocks/content-group-simple/index.scss b/packages/styles/scss/patterns/blocks/content-group-simple/index.scss
deleted file mode 100644
index 1c71dc70429..00000000000
--- a/packages/styles/scss/patterns/blocks/content-group-simple/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-group-simple/index"
-@warn 'Deprecated scss import for `content-group-simple`, remap to `@carbon/ibmdotcom-styles/scss/components/content-group-simple/index`';
-@import '../../../components/content-group-simple/index';
diff --git a/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss b/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss
index 734cc3388a7..1e88070fe17 100644
--- a/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss
+++ b/packages/styles/scss/patterns/blocks/leadspace-block/_leadspace-block.scss
@@ -7,21 +7,21 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block"
 @warn 'Deprecated scss import for `leadspace-block`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block`';
-@import '../../../components/leadspace-block/leadspace-block';
+@use '../../../components/leadspace-block';
 
 @mixin leadspace-block {
   .#{$prefix}--leadspace-block {
     &__title {
       width: 90%;
-      color: $text-01;
+      color: $text-primary;
       padding-top: $layout-03;
-      @include carbon--type-style('expressive-heading-06', true);
+      @include type-style('fluid-heading-06', true);
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         padding-top: $layout-03;
       }
 
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         padding-top: $layout-05;
       }
     }
@@ -36,14 +36,14 @@
       padding-bottom: $layout-01;
       &__copy {
         p {
-          @include carbon--type-style('expressive-heading-03', true);
+          @include type-style('fluid-heading-03', true);
         }
       }
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         padding-bottom: $layout-06;
       }
-      @include carbon--breakpoint('lg') {
+      @include breakpoint(lg) {
         padding-bottom: $layout-07;
       }
 
@@ -61,7 +61,7 @@
       }
 
       .#{$prefix}--leadspace-block__media {
-        @include carbon--breakpoint('md') {
+        @include breakpoint(md) {
           padding-top: $spacing-05;
         }
 
@@ -69,26 +69,10 @@
           margin-top: 0;
         }
       }
-
-      .#{$prefix}--buttongroup {
-        padding-top: 0;
-
-        .#{$prefix}--buttongroup-item {
-          margin-top: 0;
-        }
-      }
-      .#{$prefix}--buttongroup-item {
-        margin-top: 0;
-        padding-top: 0;
-      }
     }
     .#{$prefix}--hr {
-      border-color: $ui-04;
+      border-color: $toggle-off;
       margin-top: 0;
     }
   }
 }
-
-@include exports('leadspace-block') {
-  @include leadspace-block;
-}
diff --git a/packages/styles/scss/patterns/blocks/logo-grid/_logo-grid.scss b/packages/styles/scss/patterns/blocks/logo-grid/_logo-grid.scss
index 57966531cd0..4fe616f4f10 100644
--- a/packages/styles/scss/patterns/blocks/logo-grid/_logo-grid.scss
+++ b/packages/styles/scss/patterns/blocks/logo-grid/_logo-grid.scss
@@ -7,7 +7,8 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid"
 @warn 'Deprecated scss import for `logo-grid`, remap to `@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid`';
-@import '../../../components/logo-grid/logo-grid';
+@use '../../globals/utils/flex-grid' as *;
+@use '../../../components/logo-grid';
 
 @mixin logo-grid {
   .#{$prefix}--logo-grid {
@@ -16,19 +17,19 @@
     .#{$prefix}--content-block {
       padding-top: 0;
       padding-bottom: 0;
-      background: $inverse-01;
+      background: $icon-inverse;
     }
 
     .#{$prefix}--content-block__heading {
       margin: $layout-03 0;
-      color: $text-01;
+      color: $text-primary;
 
-      @include carbon--breakpoint('md') {
+      @include breakpoint(md) {
         margin: $layout-05 0;
       }
     }
     &__container {
-      border-bottom: 1px $ui-04 solid;
+      border-bottom: 1px $toggle-off solid;
     }
 
     &__no-border {
@@ -44,17 +45,17 @@
     .#{$prefix}--content-block__cta {
       margin-top: $layout-01;
       margin-bottom: $layout-07;
-      @include carbon--make-col-ready;
-      @include carbon--make-col(1, 1);
+      @include make-col-ready;
+      @include make-col(1, 1);
 
       padding-left: $spacing-05;
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(1, 3);
+      @include breakpoint(md) {
+        @include make-col(1, 3);
       }
 
       .#{$prefix}--card__heading {
-        @include carbon--type-style('productive-heading-01');
+        @include type-style('heading-compact-01');
       }
     }
 
@@ -66,34 +67,34 @@
     &__link {
       display: block;
       &:hover .#{$prefix}--logo-grid__logo {
-        box-shadow: inset 0 0 0 1px $ui-04;
+        box-shadow: inset 0 0 0 1px $toggle-off;
       }
       &:active .#{$prefix}--logo-grid__logo {
-        box-shadow: inset 0 0 0 1px $ui-03;
+        box-shadow: inset 0 0 0 1px $layer-accent-01;
       }
     }
 
     &__row {
-      @include carbon--make-row;
+      @include make-row;
     }
 
     &__col {
-      @include carbon--make-col-ready;
-      @include carbon--make-col(1, 2);
+      @include make-col-ready;
+      @include make-col(1, 2);
 
       margin-bottom: $spacing-07;
 
-      @include carbon--breakpoint('md') {
-        @include carbon--make-col(1, 3);
+      @include breakpoint(md) {
+        @include make-col(1, 3);
       }
     }
 
     &__heading {
-      @include carbon--type-style('expressive-heading-05', true);
+      @include type-style('fluid-heading-05', true);
 
       width: 90%;
-      margin-top: $carbon--spacing-07;
-      margin-bottom: $carbon--spacing-07;
+      margin-top: $spacing-07;
+      margin-bottom: $spacing-07;
     }
 
     &__wrapper {
@@ -102,16 +103,16 @@
 
     .#{$prefix}--image {
       display: block;
-      background: $inverse-01;
+      background: $icon-inverse;
       overflow-y: hidden;
       padding-top: aspect-ratio(288px, 216px);
       position: relative;
 
       &:hover img {
-        border: 1px $ui-04 solid;
+        border: 1px $toggle-off solid;
       }
       &:active img {
-        border: 1px $ui-03 solid;
+        border: 1px $layer-accent-01 solid;
       }
 
       img {
@@ -125,6 +126,3 @@
     }
   }
 }
-@include exports('logo-grid') {
-  @include logo-grid;
-}
diff --git a/packages/styles/scss/patterns/sections/card-section-images/_card-section-images.scss b/packages/styles/scss/patterns/sections/card-section-images/_card-section-images.scss
deleted file mode 100644
index 5020382416b..00000000000
--- a/packages/styles/scss/patterns/sections/card-section-images/_card-section-images.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card-section-images/card-section-images"
-@warn 'Deprecated scss import for `card-section-images`, remap to `@carbon/ibmdotcom-styles/scss/components/card-section-images/card-section-images`';
-@import '../../../components/card-section-images/card-section-images';
diff --git a/packages/styles/scss/patterns/sections/card-section-simple/_card-section-simple.scss b/packages/styles/scss/patterns/sections/card-section-simple/_card-section-simple.scss
index e2f53b1c142..352b2b7bafc 100644
--- a/packages/styles/scss/patterns/sections/card-section-simple/_card-section-simple.scss
+++ b/packages/styles/scss/patterns/sections/card-section-simple/_card-section-simple.scss
@@ -7,4 +7,4 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card-section-simple/card-section-simple"
 @warn 'Deprecated scss import for `card-section-simple`, remap to `@carbon/ibmdotcom-styles/scss/components/card-section-simple/card-section-simple`';
-@import '../../../components/card-section-simple/card-section-simple';
+@use '../../../components/card-section-simple';
diff --git a/packages/styles/scss/components/cta-block/README.md b/packages/styles/scss/patterns/sections/cta-section/README.md
similarity index 100%
rename from packages/styles/scss/components/cta-block/README.md
rename to packages/styles/scss/patterns/sections/cta-section/README.md
diff --git a/packages/styles/scss/patterns/sections/cta-section/_cta-section.scss b/packages/styles/scss/patterns/sections/cta-section/_cta-section.scss
new file mode 100644
index 00000000000..39f17965c19
--- /dev/null
+++ b/packages/styles/scss/patterns/sections/cta-section/_cta-section.scss
@@ -0,0 +1,178 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * 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 '../../globals/utils/flex-grid' as *;
+@use '../../../components/button-group';
+
+@mixin themed-items {
+  color: $text-primary;
+  background: $background;
+
+  .#{$prefix}--content-item {
+    &__heading {
+      color: $text-primary;
+    }
+
+    &__copy {
+      p {
+        color: $text-primary;
+      }
+    }
+
+    &__cta {
+      color: $link-primary;
+    }
+  }
+}
+
+@mixin cta-section {
+  .#{$prefix}--cta-section {
+    &__cta {
+      @include breakpoint(md) {
+        padding-bottom: $spacing-12;
+      }
+    }
+
+    .#{$prefix}--content-block {
+      padding-top: $spacing-07;
+      padding-bottom: 0;
+
+      &__heading,
+      &__copy {
+        width: 90%;
+        max-width: 640px;
+
+        @include breakpoint(sm) {
+          width: 100%;
+        }
+      }
+
+      &__heading {
+        @include type-style('fluid-heading-05', true);
+      }
+
+      &__copy {
+        p {
+          margin-bottom: 0;
+          @include type-style('fluid-heading-03', true);
+        }
+      }
+
+      &__cta-col {
+        margin-top: 0;
+      }
+
+      @include breakpoint(lg) {
+        padding-top: $spacing-10;
+      }
+    }
+
+    .#{$prefix}--helper-wrapper {
+      .#{$prefix}--content-item-wrapper {
+        border-top: 1px solid $layer-accent-01;
+
+        @include make-row;
+
+        .#{$prefix}--content-item {
+          width: 100%;
+          margin-bottom: 0;
+          padding-bottom: $spacing-05;
+          position: relative;
+
+          @include make-col-ready;
+
+          &__heading {
+            width: 100%;
+
+            @include type-style('heading-02', true);
+          }
+
+          &__copy {
+            width: 100%;
+            p {
+              width: 100%;
+              margin-bottom: $spacing-05;
+
+              @include type-style('body-02', true);
+            }
+          }
+
+          @include breakpoint(md) {
+            @include make-col(4, 8);
+
+            &__heading {
+              width: 90%;
+            }
+
+            &__copy {
+              width: 90%;
+            }
+          }
+
+          &:last-of-type {
+            margin-top: $spacing-05;
+
+            @include breakpoint(md) {
+              margin-top: $spacing-07;
+            }
+          }
+        }
+      }
+    }
+
+    &.#{$prefix}--cta-section__has-items {
+      padding-bottom: $spacing-09;
+
+      @include breakpoint(lg) {
+        padding-bottom: carbon--mini-units(10);
+      }
+
+      .#{$prefix}--cta-section {
+        &__cta {
+          padding-bottom: $spacing-07;
+
+          @include breakpoint(md) {
+            padding-bottom: $spacing-10;
+          }
+
+          @include breakpoint(lg) {
+            padding-bottom: $spacing-12;
+          }
+        }
+      }
+
+      .#{$prefix}--content-block {
+        padding-bottom: 0;
+      }
+    }
+
+    @include breakpoint(lg) {
+      padding-bottom: $spacing-10;
+    }
+  }
+
+  .#{$prefix}--cta-section--g10 {
+    @include theme($g10, feature-flag-enabled('enable-css-custom-properties')) {
+      @include themed-items;
+    }
+  }
+
+  .#{$prefix}--cta-section--g90 {
+    @include theme($g90, feature-flag-enabled('enable-css-custom-properties')) {
+      @include themed-items;
+    }
+  }
+
+  .#{$prefix}--cta-section--g100 {
+    @include theme(
+      $g100,
+      feature-flag-enabled('enable-css-custom-properties')
+    ) {
+      @include themed-items;
+    }
+  }
+}
diff --git a/packages/styles/scss/patterns/sections/cta-section/_index.scss b/packages/styles/scss/patterns/sections/cta-section/_index.scss
new file mode 100644
index 00000000000..c1c47dbdd7c
--- /dev/null
+++ b/packages/styles/scss/patterns/sections/cta-section/_index.scss
@@ -0,0 +1,10 @@
+/**
+ * Copyright IBM Corp. 2016, 2020
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/ctasection/index"
+@warn 'Deprecated scss import for `ctasection`, remap to `@carbon/ibmdotcom-styles/scss/components/ctasection/index`';
+@use '../../../components/cta-section';
diff --git a/packages/styles/scss/patterns/sections/ctasection/README.md b/packages/styles/scss/patterns/sections/ctasection/README.md
deleted file mode 100644
index 7dea42adf85..00000000000
--- a/packages/styles/scss/patterns/sections/ctasection/README.md
+++ /dev/null
@@ -1,15 +0,0 @@
-### SCSS
-
-#### Usage
-
-Import the package css into the top of your main CSS file.
-
-```css
-@import '@carbon/ibmdotcom-styles/scss/patterns/sections/ctasection/ctasection';
-```
-
-#### Blocks
-
-| Class              | Description                                          |
-| ------------------ | ---------------------------------------------------- |
-| `.bx--cta-section` | Highest level class name for the CTA section pattern |
diff --git a/packages/styles/scss/patterns/sections/ctasection/_ctasection.scss b/packages/styles/scss/patterns/sections/ctasection/_ctasection.scss
deleted file mode 100644
index 524f10fbfb2..00000000000
--- a/packages/styles/scss/patterns/sections/ctasection/_ctasection.scss
+++ /dev/null
@@ -1,186 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * 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 '../../../components/buttongroup/buttongroup';
-
-@mixin themed-items {
-  color: $text-01;
-  background: $ui-background;
-
-  .#{$prefix}--content-item {
-    &__heading {
-      color: $text-01;
-    }
-
-    &__copy {
-      p {
-        color: $text-01;
-      }
-    }
-
-    &__cta {
-      color: $link-01;
-    }
-  }
-}
-
-@mixin cta-section--pattern {
-  .#{$prefix}--cta-section {
-    &__cta {
-      @include carbon--breakpoint('md') {
-        padding-bottom: $carbon--layout-06;
-      }
-    }
-
-    .#{$prefix}--content-block {
-      padding-top: $carbon--layout-03;
-      padding-bottom: 0;
-
-      &__heading,
-      &__copy {
-        width: 90%;
-        max-width: 640px;
-
-        @include carbon--breakpoint('sm') {
-          width: 100%;
-        }
-      }
-
-      &__heading {
-        @include carbon--type-style('expressive-heading-05', true);
-      }
-
-      &__copy {
-        p {
-          margin-bottom: 0;
-          @include carbon--type-style('expressive-heading-03', true);
-        }
-      }
-
-      &__cta-col {
-        margin-top: 0;
-      }
-
-      @include carbon--breakpoint('lg') {
-        padding-top: $carbon--layout-05;
-      }
-    }
-
-    .#{$prefix}--helper-wrapper {
-      .#{$prefix}--content-item-wrapper {
-        border-top: 1px solid $ui-03;
-
-        @include carbon--make-row;
-
-        .#{$prefix}--content-item {
-          width: 100%;
-          margin-bottom: 0;
-          padding-bottom: $carbon--spacing-05;
-          position: relative;
-
-          @include carbon--make-col-ready;
-
-          &__heading {
-            width: 100%;
-
-            @include carbon--type-style('expressive-heading-02', true);
-          }
-
-          &__copy {
-            width: 100%;
-            p {
-              width: 100%;
-              margin-bottom: $carbon--spacing-05;
-
-              @include carbon--type-style('body-long-02', true);
-            }
-          }
-
-          @include carbon--breakpoint('md') {
-            @include carbon--make-col(4, 8);
-
-            &__heading {
-              width: 90%;
-            }
-
-            &__copy {
-              width: 90%;
-            }
-          }
-
-          &:last-of-type {
-            margin-top: $carbon--spacing-05;
-
-            @include carbon--breakpoint('md') {
-              margin-top: $carbon--spacing-07;
-            }
-          }
-        }
-      }
-    }
-
-    &.#{$prefix}--cta-section__has-items {
-      padding-bottom: $carbon--layout-04;
-
-      @include carbon--breakpoint('lg') {
-        padding-bottom: carbon--mini-units(10);
-      }
-
-      .#{$prefix}--cta-section {
-        &__cta {
-          padding-bottom: $carbon--spacing-07;
-
-          @include carbon--breakpoint('md') {
-            padding-bottom: $carbon--layout-05;
-          }
-
-          @include carbon--breakpoint('lg') {
-            padding-bottom: $carbon--layout-06;
-          }
-        }
-      }
-
-      .#{$prefix}--content-block {
-        padding-bottom: 0;
-      }
-    }
-
-    @include carbon--breakpoint('lg') {
-      padding-bottom: $carbon--layout-05;
-    }
-  }
-
-  .#{$prefix}--cta-section--g10 {
-    @include carbon--theme(
-      $carbon--theme--g10,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
-  .#{$prefix}--cta-section--g90 {
-    @include carbon--theme(
-      $carbon--theme--g90,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-
-  .#{$prefix}--cta-section--g100 {
-    @include carbon--theme(
-      $carbon--theme--g100,
-      feature-flag-enabled('enable-css-custom-properties')
-    ) {
-      @include themed-items;
-    }
-  }
-}
-
-@include exports('cta-section--pattern') {
-  @include cta-section--pattern;
-}
diff --git a/packages/styles/scss/patterns/sections/ctasection/index.scss b/packages/styles/scss/patterns/sections/ctasection/index.scss
deleted file mode 100644
index 0fccc7b475c..00000000000
--- a/packages/styles/scss/patterns/sections/ctasection/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/ctasection/index"
-@warn 'Deprecated scss import for `ctasection`, remap to `@carbon/ibmdotcom-styles/scss/components/ctasection/index`';
-@import '../../../components/ctasection/index';
diff --git a/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss b/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss
index 87f78a882be..7a4a328308f 100644
--- a/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss
+++ b/packages/styles/scss/patterns/sections/leadspace/_leadspace.scss
@@ -7,18 +7,19 @@
 
 /// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace"
 @warn 'Deprecated scss import for `leadspace`, remap to `@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace`';
-@import '../../../components/leadspace/leadspace';
+@use '../../globals/utils/flex-grid' as *;
+@use '../../../components/leadspace';
 
 $btn-min-width: 26;
 
 @mixin gradient($color) {
-  .#{$prefix}--leadspace--gradient {
+  .#{$c4d-prefix}--leadspace--gradient {
     background-color: rgba($color, 0.75);
   }
 
-  @include carbon--breakpoint(md) {
-    .#{$prefix}--leadspace--gradient {
-      @include carbon--breakpoint(md) {
+  @include breakpoint(md) {
+    .#{$c4d-prefix}--leadspace--gradient {
+      @include breakpoint(md) {
         background-color: transparent;
         background-image: linear-gradient(
           to right,
@@ -28,7 +29,7 @@ $btn-min-width: 26;
       }
     }
 
-    .#{$prefix}--leadspace--centered {
+    .#{$c4d-prefix}--leadspace--centered {
       &__gradient {
         background: linear-gradient(
           to bottom,
@@ -44,33 +45,29 @@ $btn-min-width: 26;
 
 // items that change according to the theme applied
 @mixin themed-items($theme: white) {
-  // TODO: figure out how to use the $ui-background color token instead with rgba()
-  $dds--gradient-light: #ffffff;
-  $dds--gradient-dark: #161616;
+  // TODO: figure out how to use the $background color token instead with rgba()
+  $cds--gradient-light: #ffffff;
+  $cds--gradient-dark: #161616;
 
   @include buttongroup;
 
-  background-color: $ui-background;
+  background-color: $background;
 
-  .#{$prefix}--leadspace--centered__overlay {
-    background-color: $ui-background;
+  .#{$c4d-prefix}--leadspace--centered__overlay {
+    background-color: $background;
   }
 
-  .#{$prefix}--leadspace__title,
-  .#{$prefix}--leadspace__desc,
-  .#{$prefix}--leadspace--centered__title,
-  .#{$prefix}--leadspace--centered__desc {
-    color: $text-01;
+  .#{$c4d-prefix}--leadspace__title,
+  .#{$c4d-prefix}--leadspace__desc,
+  .#{$c4d-prefix}--leadspace--centered__title,
+  .#{$c4d-prefix}--leadspace--centered__desc {
+    color: $text-primary;
   }
-  .#{$prefix}--leadspace--centered__desc {
+  .#{$c4d-prefix}--leadspace--centered__desc {
     width: 100%;
-  }
-  .#{$prefix}--buttongroup {
-    padding-left: 0;
-  }
 
-  @include carbon--breakpoint(md) {
-    .#{$prefix}--leadspace--centered {
+  @include breakpoint(md) {
+    .#{$c4d-prefix}--leadspace--centered {
       &__overlay {
         background-color: transparent;
       }
@@ -78,17 +75,14 @@ $btn-min-width: 26;
   }
 
   @if $theme == dark {
-    @include gradient($dds--gradient-dark);
+    @include gradient($cds--gradient-dark);
   } @else {
-    @include gradient($dds--gradient-light);
+    @include gradient($cds--gradient-light);
   }
 }
 
 @mixin leadspace {
-  .#{$prefix}--buttongroup {
-    padding-top: $carbon--layout-01;
-  }
-  .#{$prefix}--leadspace {
+  .#{$c4d-prefix}--leadspace {
     &--content__container {
       height: 100%;
       display: flex;
@@ -96,7 +90,7 @@ $btn-min-width: 26;
       justify-content: space-between;
     }
 
-    .#{$prefix}--image {
+    .#{$c4d-prefix}--image {
       position: absolute;
       top: 0;
       width: 100%;
@@ -114,7 +108,7 @@ $btn-min-width: 26;
     }
 
     &__overlay {
-      @include carbon--make-container;
+      @include make-container;
 
       position: relative;
       display: flex;
@@ -127,52 +121,52 @@ $btn-min-width: 26;
       max-width: none;
     }
 
-    .#{$prefix}--leadspace__title {
+    .#{$c4d-prefix}--leadspace__title {
       padding-top: 0;
       margin-bottom: $spacing-09;
-      @include carbon--type-style(display-01, true);
+      @include type-style(display-01, true);
     }
 
     &__title {
-      padding-left: 1rem;
+      padding-left: $spacing-05;
       width: 95%;
     }
     &__desc {
-      @include carbon--make-col-ready;
+      @include make-col-ready;
     }
 
     &__row {
-      @include carbon--make-row;
+      @include make-row;
     }
 
     .#{$prefix}--btn {
       min-width: carbon--mini-units($btn-min-width);
     }
 
-    .#{$prefix}--leadspace__desc {
-      @include carbon--type-style(expressive-heading-03, true);
-      @include carbon--make-col(4, 4);
+    .#{$c4d-prefix}--leadspace__desc {
+      @include type-style(fluid-heading-03, true);
+      @include make-col(4, 4);
     }
 
     @include themed-items;
   }
 
-  .#{$prefix}--leadspace--g100,
-  .#{$prefix}--leadspace--g90 {
-    @include carbon--theme(
-      $carbon--theme--g100,
+  .#{$c4d-prefix}--leadspace--g100,
+  .#{$c4d-prefix}--leadspace--g90 {
+    @include theme(
+      $g100,
       feature-flag-enabled('enable-css-custom-properties')
     ) {
       @include themed-items(dark);
     }
   }
 
-  .#{$prefix}--leadspace--productive .#{$prefix}--leadspace__title {
-    @include carbon--type-style(expressive-heading-06, true);
+  .#{$c4d-prefix}--leadspace--productive .#{$c4d-prefix}--leadspace__title {
+    @include type-style(fluid-heading-06, true);
   }
 
-  @include carbon--breakpoint(md) {
-    .#{$prefix}--leadspace {
+  @include breakpoint(md) {
+    .#{$c4d-prefix}--leadspace {
       margin-right: auto;
       margin-left: auto;
       position: relative;
@@ -195,71 +189,67 @@ $btn-min-width: 26;
         height: 100%;
       }
 
-      .#{$prefix}--image {
+      .#{$c4d-prefix}--image {
         height: auto;
       }
 
-      .#{$prefix}--leadspace__title {
-        @include carbon--make-col(7, 8);
+      .#{$c4d-prefix}--leadspace__title {
+        @include make-col(7, 8);
 
         flex-shrink: 1;
       }
 
-      .#{$prefix}--leadspace__desc {
-        @include carbon--make-col(4, 8);
+      .#{$c4d-prefix}--leadspace__desc {
+        @include make-col(4, 8);
       }
     }
   }
 
-  @include carbon--breakpoint(lg) {
-    .#{$prefix}--leadspace {
+  @include breakpoint(lg) {
+    .#{$c4d-prefix}--leadspace {
       padding-top: aspect-ratio(1056px, 480px);
 
-      .#{$prefix}--leadspace__title {
-        @include carbon--make-col(8, 16);
+      .#{$c4d-prefix}--leadspace__title {
+        @include make-col(8, 16);
       }
 
-      .#{$prefix}--leadspace__desc {
-        @include carbon--make-col-ready;
-        @include carbon--make-col(4, 16);
+      .#{$c4d-prefix}--leadspace__desc {
+        @include make-col-ready;
+        @include make-col(4, 16);
       }
     }
 
-    .#{$prefix}--leadspace--productive .#{$prefix}--leadspace__title {
-      @include carbon--make-col(7, 16);
+    .#{$c4d-prefix}--leadspace--productive .#{$c4d-prefix}--leadspace__title {
+      @include make-col(7, 16);
     }
   }
 
-  @include carbon--breakpoint(xlg) {
-    .#{$prefix}--leadspace {
+  @include breakpoint(xlg) {
+    .#{$c4d-prefix}--leadspace {
       padding-top: aspect-ratio(1312px, 560px);
     }
   }
 
-  @include carbon--breakpoint(max) {
-    .#{$prefix}--leadspace {
+  @include breakpoint(max) {
+    .#{$c4d-prefix}--leadspace {
       padding-top: aspect-ratio(1584px, 640px);
     }
   }
 }
 
 @mixin leadspace-centered {
-  .#{$prefix}--leadspace--centered {
+  .#{$c4d-prefix}--leadspace--centered {
     margin-right: auto;
     margin-left: auto;
     max-width: 99rem;
-    .#{$prefix}--buttongroup {
-      padding-bottom: $carbon--layout-01;
-      padding-top: 0;
-    }
 
     &--content__container {
       display: flex;
       flex-direction: column;
       justify-content: space-between;
-      padding-left: $carbon--spacing-05;
-      @include carbon--make-col-ready;
-      @include carbon--make-col(4, 4);
+      padding-left: $spacing-05;
+      @include make-col-ready;
+      @include make-col(4, 4);
     }
     &--mobile__image {
       height: carbon--mini-units(20);
@@ -272,39 +262,35 @@ $btn-min-width: 26;
       }
     }
     &__content {
-      @include carbon--make-row;
+      @include make-row;
     }
 
     &__desc {
       width: 95%;
-      @include carbon--type-style(expressive-heading-03, true);
+      @include type-style(fluid-heading-03, true);
     }
 
     &__title {
-      @include carbon--type-style(expressive-heading-05, true);
+      @include type-style(fluid-heading-05, true);
     }
 
     &__desc,
     &__title {
-      padding-top: $carbon--layout-03;
+      padding-top: $spacing-07;
     }
 
     @include themed-items;
   }
 
-  @include carbon--breakpoint(md) {
-    .#{$prefix}--leadspace--centered {
-      .#{$prefix}--buttongroup {
-        padding-bottom: 0;
-      }
-
+  @include breakpoint(md) {
+    .#{$c4d-prefix}--leadspace--centered {
       &__overlay {
         padding-bottom: carbon--mini-units(20);
       }
       &--content__container {
         margin: auto;
-        padding-left: 1.5rem;
-        @include carbon--make-col(4, 8);
+        padding-left: $spacing-06;
+        @include make-col(4, 8);
       }
       &__image {
         background-repeat: no-repeat;
@@ -318,7 +304,7 @@ $btn-min-width: 26;
       }
 
       &__desc {
-        padding-top: $carbon--layout-04;
+        padding-top: $spacing-09;
       }
 
       &--mobile__image {
@@ -326,16 +312,16 @@ $btn-min-width: 26;
       }
     }
 
-    .#{$prefix}--leadspace--centered__image
-      .#{$prefix}--leadspace--centered__overlay {
+    .#{$c4d-prefix}--leadspace--centered__image
+      .#{$c4d-prefix}--leadspace--centered__overlay {
       padding-bottom: carbon--mini-units(32);
     }
   }
 
-  @include carbon--breakpoint(lg) {
-    .#{$prefix}--leadspace--centered {
+  @include breakpoint(lg) {
+    .#{$c4d-prefix}--leadspace--centered {
       &__title {
-        padding-top: $carbon--layout-05;
+        padding-top: $spacing-10;
       }
 
       &__content {
@@ -344,21 +330,13 @@ $btn-min-width: 26;
       }
     }
   }
-  .#{$prefix}--leadspace--centered--g100,
-  .#{$prefix}--leadspace--centered--g90 {
-    @include carbon--theme(
-      $carbon--theme--g100,
+  .#{$c4d-prefix}--leadspace--centered--g100,
+  .#{$c4d-prefix}--leadspace--centered--g90 {
+    @include theme(
+      $g100,
       feature-flag-enabled('enable-css-custom-properties')
     ) {
       @include themed-items(dark);
     }
   }
 }
-
-@include exports('leadspace-centered') {
-  @include leadspace-centered;
-}
-
-@include exports('leadspace') {
-  @include leadspace;
-}
diff --git a/packages/styles/scss/patterns/sub-patterns/buttongroup/_buttongroup.scss b/packages/styles/scss/patterns/sub-patterns/buttongroup/_buttongroup.scss
deleted file mode 100644
index 75b749be1c1..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/buttongroup/_buttongroup.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup"
-
-@warn 'Deprecated scss import for `buttongroup`, remap to `@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup`';
-@import '../../../components/buttongroup/buttongroup';
diff --git a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss b/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
deleted file mode 100644
index 37f7c900d76..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/callout/_callout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/callout/callout"
-
-@warn 'Deprecated scss import for `callout`, remap to `@carbon/ibmdotcom-styles/scss/components/callout/callout`';
-@import '../../../components/callout/callout';
diff --git a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss b/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
deleted file mode 100644
index 3328c691c80..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card-group/_card-group.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card-group/card-group"
-
-@warn 'Deprecated scss import for `card-group`, remap to `@carbon/ibmdotcom-styles/scss/components/card-group/card-group`';
-@import '../../../components/card-group/card-group';
diff --git a/packages/styles/scss/patterns/sub-patterns/card/index.scss b/packages/styles/scss/patterns/sub-patterns/card/index.scss
deleted file mode 100644
index adda4bc00f0..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/card/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/card/index"
-
-@warn 'Deprecated scss import for `card`, remap to `@carbon/ibmdotcom-styles/scss/components/card/index`';
-@import '../../../components/card/index';
diff --git a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss b/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
deleted file mode 100644
index 9f78763e22a..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/content-item-horizontal/_content-item-horizontal.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal"
-
-@warn 'Deprecated scss import for `content-item-horizontal`, remap to `@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal`';
-@import '../../../components/content-item-horizontal/content-item-horizontal';
diff --git a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss b/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
deleted file mode 100644
index d003bab341e..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/feature-card/_feature-card.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card"
-
-@warn 'Deprecated scss import for `feature-card`, remap to `@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card`';
-@import '../../../components/feature-card/feature-card';
diff --git a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss b/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
deleted file mode 100644
index 78958275c2a..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/layout/_layout.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/layout/layout"
-
-@warn 'Deprecated scss import for `layout`, remap to `@carbon/ibmdotcom-styles/scss/components/layout/layout`';
-@import '../../../components/layout/layout';
diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss b/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
deleted file mode 100644
index 856d2d14392..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/link-list/_link-list.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/link-list"
-
-@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/link-list`';
-@import '../../../components/link-list/link-list';
diff --git a/packages/styles/scss/patterns/sub-patterns/link-list/index.scss b/packages/styles/scss/patterns/sub-patterns/link-list/index.scss
deleted file mode 100644
index baeb29efd2f..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/link-list/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/link-list/index"
-
-@warn 'Deprecated scss import for `link-list`, remap to `@carbon/ibmdotcom-styles/scss/components/link-list/index`';
-@import '../../../components/link-list/index';
diff --git a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss b/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
deleted file mode 100644
index ec29f644032..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/pictogram-item/_pictogram-item.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item"
-
-@warn 'Deprecated scss import for `pictogram-item`, remap to `@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item`';
-@import '../../../components/pictogram-item/pictogram-item';
diff --git a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss b/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
deleted file mode 100644
index 85bf2fd0662..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/quote/_quote.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/quote/quote"
-
-@warn 'Deprecated scss import for `quote`, remap to `@carbon/ibmdotcom-styles/scss/components/quote/quote`';
-@import '../../../components/quote/quote';
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
deleted file mode 100644
index 713f5a2b779..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/_tableofcontents.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents"
-
-@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents`';
-@import '../../../components/tableofcontents/tableofcontents';
diff --git a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss b/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
deleted file mode 100644
index 8a8aa8937de..00000000000
--- a/packages/styles/scss/patterns/sub-patterns/tableofcontents/index.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/// @deprecated Remap import to "@carbon/ibmdotcom-styles/scss/components/tableofcontents/index"
-
-@warn 'Deprecated scss import for `tableofcontents`, remap to `@carbon/ibmdotcom-styles/scss/components/tableofcontents/index`';
-@import '../../../components/tableofcontents/index';
diff --git a/packages/styles/scss/themes/expressive/_tokens.scss b/packages/styles/scss/themes/expressive/_tokens.scss
index 6cdccec76d6..a812b17e955 100644
--- a/packages/styles/scss/themes/expressive/_tokens.scss
+++ b/packages/styles/scss/themes/expressive/_tokens.scss
@@ -1,17 +1,14 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/generated/container';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/generated/icon-size';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/font-family';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/scale';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
+@use '@carbon/styles/scss/theme' as *;
 
 /// Carbon core original size tokens.
 /// Used to theme-zone from expressive back to productive, and thus defines only items that expressive version defines.
@@ -21,21 +18,21 @@
 $carbon-productive-size-tokens: (
   container-01: $carbon--container-01,
   container-02: $carbon--container-02,
-  container-03: $carbon--container-03,
+  $spacing-09: $carbon--$spacing-09,
   container-04: $carbon--container-04,
   container-05: $carbon--container-05,
   icon-size-01: $carbon--icon-size-01,
 );
 
-/// DDS version of size tokens.
+/// C4D version of size tokens.
 /// @type Map
 /// @access public
 /// @group carbon-expressive
 $carbon-expressive-size-tokens: (
-  container-01: 2rem,
-  container-02: 2.5rem,
-  container-03: 3rem,
-  container-04: 3rem,
+  container-01: $spacing-07,
+  container-02: $spacing-08,
+  $spacing-09: $spacing-09,
+  container-04: $spacing-09,
   container-05: 4.5rem,
   icon-size-01: 1.25rem,
 );
@@ -47,134 +44,134 @@ $carbon-expressive-size-tokens: (
 /// @access public
 /// @group carbon-expressive
 $carbon-productive-type-tokens: (
-  body-short-01: (
+  body-compact-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(18px),
+    line-height: to-rem(18px),
     letter-spacing: 0.16px,
   ),
-  body-long-01: (
+  body-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(20px),
+    line-height: to-rem(20px),
     letter-spacing: 0.16px,
   ),
   label-01: (
     font-size: carbon--type-scale(1),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(16px),
+    line-height: $spacing-05,
     letter-spacing: 0.32px,
   ),
   caption-01: (
     font-size: carbon--type-scale(1),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(16px),
+    line-height: $spacing-05,
     letter-spacing: 0.32px,
   ),
   code-01: (
-    font-family: carbon--font-family('mono'),
+    font-family: font-family('mono'),
     font-size: carbon--type-scale(1),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(16px),
+    line-height: $spacing-05,
     letter-spacing: 0.32px,
   ),
   code-02: (
-    font-family: carbon--font-family('mono'),
+    font-family: font-family('mono'),
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(20px),
+    line-height: to-rem(20px),
     letter-spacing: 0.32px,
   ),
   helper-text-01: (
     font-size: carbon--type-scale(1),
-    line-height: carbon--rem(16px),
+    line-height: $spacing-05,
     letter-spacing: 0.32px,
   ),
   heading-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('semibold'),
-    line-height: carbon--rem(18px),
+    line-height: to-rem(18px),
     letter-spacing: 0.16px,
   ),
-  productive-heading-01: (
+  heading-compact-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('semibold'),
-    line-height: carbon--rem(18px),
+    line-height: to-rem(18px),
     letter-spacing: 0.16px,
   ),
-  expressive-heading-01: (
+  heading-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('semibold'),
-    line-height: carbon--rem(20px),
+    line-height: to-rem(20px),
     letter-spacing: 0.16px,
   ),
 );
 
-/// DDS version of type tokens.
+/// C4D version of type tokens.
 /// @type Map
 /// @access public
 /// @group carbon-expressive
 $carbon-expressive-type-tokens: (
-  body-short-01: (
+  body-compact-01: (
     font-size: carbon--type-scale(3),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(22px),
+    line-height: to-rem(22px),
     letter-spacing: 0,
   ),
-  body-long-01: (
+  body-01: (
     font-size: carbon--type-scale(3),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(24px),
+    line-height: $spacing-06,
     letter-spacing: 0,
   ),
   label-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(18px),
+    line-height: to-rem(18px),
     letter-spacing: 0.16px,
   ),
   caption-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(18px),
+    line-height: to-rem(18px),
     letter-spacing: 0.16px,
   ),
   code-01: (
-    font-family: carbon--font-family('mono'),
+    font-family: font-family('mono'),
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(20px),
+    line-height: to-rem(20px),
     letter-spacing: 0,
   ),
   code-02: (
-    font-family: carbon--font-family('mono'),
+    font-family: font-family('mono'),
     font-size: carbon--type-scale(3),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(24px),
+    line-height: $spacing-06,
     letter-spacing: 0,
   ),
   helper-text-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('regular'),
-    line-height: carbon--rem(18px),
+    line-height: to-rem(18px),
     letter-spacing: 0.16px,
   ),
   heading-01: (
     font-size: carbon--type-scale(3),
     font-weight: carbon--font-weight('semibold'),
-    line-height: carbon--rem(22px),
+    line-height: to-rem(22px),
     letter-spacing: 0,
   ),
-  productive-heading-01: (
+  heading-compact-01: (
     font-size: carbon--type-scale(3),
     font-weight: carbon--font-weight('semibold'),
-    line-height: carbon--rem(22px),
+    line-height: to-rem(22px),
     letter-spacing: 0,
   ),
-  expressive-heading-01: (
+  heading-01: (
     font-size: carbon--type-scale(2),
     font-weight: carbon--font-weight('semibold'),
-    line-height: carbon--rem(20px),
+    line-height: to-rem(20px),
     letter-spacing: 0.16px,
   ),
 ) !default;
@@ -197,18 +194,18 @@ $carbon-productive-component-tokens: (
     ),
   button-field-height:
     var(
-      --#{$custom-property-prefix}-container-03,
-      map-get($carbon-productive-size-tokens, 'container-03')
+      --#{$custom-property-prefix}-$spacing-09,
+      map-get($carbon-productive-size-tokens, '$spacing-09')
     ),
   input-height:
     var(
-      --#{$custom-property-prefix}-container-03,
-      map-get($carbon-productive-size-tokens, 'container-03')
+      --#{$custom-property-prefix}-$spacing-09,
+      map-get($carbon-productive-size-tokens, '$spacing-09')
     ),
   tab-height:
     var(
-      --#{$custom-property-prefix}-container-03,
-      map-get($carbon-productive-size-tokens, 'container-03')
+      --#{$custom-property-prefix}-$spacing-09,
+      map-get($carbon-productive-size-tokens, '$spacing-09')
     ),
   tab-container-height:
     var(
@@ -217,7 +214,7 @@ $carbon-productive-component-tokens: (
     ),
 ) !default;
 
-/// DDS version of component tokens.
+/// C4D version of component tokens.
 /// @type Map
 /// @access public
 /// @group carbon-expressive
@@ -234,18 +231,18 @@ $carbon-expressive-component-tokens: (
     ),
   button-field-height:
     var(
-      --#{$custom-property-prefix}-container-03,
-      map-get($carbon-expressive-size-tokens, 'container-03')
+      --#{$custom-property-prefix}-$spacing-09,
+      map-get($carbon-expressive-size-tokens, '$spacing-09')
     ),
   input-height:
     var(
-      --#{$custom-property-prefix}-container-03,
-      map-get($carbon-expressive-size-tokens, 'container-03')
+      --#{$custom-property-prefix}-$spacing-09,
+      map-get($carbon-expressive-size-tokens, '$spacing-09')
     ),
   tab-height:
     var(
-      --#{$custom-property-prefix}-container-03,
-      map-get($carbon-expressive-size-tokens, 'container-03')
+      --#{$custom-property-prefix}-$spacing-09,
+      map-get($carbon-expressive-size-tokens, '$spacing-09')
     ),
   tab-container-height:
     var(
@@ -315,11 +312,11 @@ $carbon-expressive-component-tokens: (
     --#{$custom-property-prefix}-container-02,
     map-get($carbon-expressive-size-tokens, 'container-02')
   ) !global;
-  $container-03: var(
-    --#{$custom-property-prefix}-container-03,
-    map-get($carbon-expressive-size-tokens, 'container-03')
+  $spacing-09: var(
+    --#{$custom-property-prefix}-$spacing-09,
+    map-get($carbon-expressive-size-tokens, '$spacing-09')
   ) !global;
-  $container-04: var(
+  $spacing-09: var(
     --#{$custom-property-prefix}-container-04,
     map-get($carbon-expressive-size-tokens, 'container-04')
   ) !global;
@@ -335,16 +332,13 @@ $carbon-expressive-component-tokens: (
   ) !global;
 
   // Type tokens
-  // For type tokens, Carbon emits CSS custom properties via `@mixin carbon--type-style`
+  // For type tokens, Carbon emits CSS custom properties via `@mixin type-style`
   // Ref: https://github.com/carbon-design-system/carbon/blob/v10.15.0/packages/type/scss/_styles.scss#L705
-  $body-short-01: map-get(
-    $carbon-expressive-type-tokens,
-    'body-short-01'
-  ) !global;
-  $body-long-01: map-get(
+  $body-compact-01: map-get(
     $carbon-expressive-type-tokens,
-    'body-long-01'
+    'body-compact-01'
   ) !global;
+  $body-01: map-get($carbon-expressive-type-tokens, 'body-01') !global;
   $label-01: map-get($carbon-expressive-type-tokens, 'label-01') !global;
   $caption-01: map-get($carbon-expressive-type-tokens, 'caption-01') !global;
   $code-01: map-get($carbon-expressive-type-tokens, 'code-01') !global;
@@ -354,17 +348,14 @@ $carbon-expressive-component-tokens: (
     'helper-text-01'
   ) !global;
   $heading-01: map-get($carbon-expressive-type-tokens, 'heading-01') !global;
-  $productive-heading-01: map-get(
-    $carbon-expressive-type-tokens,
-    'productive-heading-01'
-  ) !global;
-  $expressive-heading-01: map-get(
+  $heading-compact-01: map-get(
     $carbon-expressive-type-tokens,
-    'expressive-heading-01'
+    'heading-compact-01'
   ) !global;
+  $heading-01: map-get($carbon-expressive-type-tokens, 'heading-01') !global;
 
   // Ensures `$carbon--theme` and `$carbon--theme--themename` are in sync to:
-  // 1) Ensure `@include carbon--theme()` call in `_theme-tokens.scss` picks up correct type token values.
+  // 1) Ensure `@include theme()` call in `_theme-tokens.scss` picks up correct type token values.
   //    Ref: https://unpkg.com/browse/@carbon/themes@10.12.0/scss/generated/_mixins.scss
   // 2) Ensure the comparison in `@function get-token-value` works.
   //    Ref: https://github.com/carbon-design-system/carbon/blob/v10.11.0/packages/components/src/globals/scss/_component-tokens.scss#L28
@@ -374,105 +365,105 @@ $carbon-expressive-component-tokens: (
       caption-01: $caption-01,
       label-01: $label-01,
       helper-text-01: $helper-text-01,
-      body-short-01: $body-short-01,
-      body-long-01: $body-long-01,
+      body-compact-01: $body-compact-01,
+      body-01: $body-01,
       code-01: $code-01,
       code-02: $code-02,
       heading-01: $heading-01,
-      productive-heading-01: $productive-heading-01,
-      expressive-heading-01: $expressive-heading-01,
+      heading-compact-01: $heading-compact-01,
+      heading-01: $heading-01,
       container-01: $container-01,
       container-02: $container-02,
-      container-03: $container-03,
-      container-04: $container-04,
+      $spacing-09: $spacing-09,
+      container-04: $spacing-09,
       container-05: $container-05,
       icon-size-01: $icon-size-01,
     )
   ) !global;
 
-  $carbon--theme--white: map-merge(
-    $carbon--theme--white,
+  $white: map-merge(
+    $white,
     (
       caption-01: $caption-01,
       label-01: $label-01,
       helper-text-01: $helper-text-01,
-      body-short-01: $body-short-01,
-      body-long-01: $body-long-01,
+      body-compact-01: $body-compact-01,
+      body-01: $body-01,
       code-01: $code-01,
       code-02: $code-02,
       heading-01: $heading-01,
-      productive-heading-01: $productive-heading-01,
-      expressive-heading-01: $expressive-heading-01,
+      heading-compact-01: $heading-compact-01,
+      heading-01: $heading-01,
       container-01: $container-01,
       container-02: $container-02,
-      container-03: $container-03,
-      container-04: $container-04,
+      $spacing-09: $spacing-09,
+      container-04: $spacing-09,
       container-05: $container-05,
       icon-size-01: $icon-size-01,
     )
   ) !global;
 
-  $carbon--theme--g10: map-merge(
-    $carbon--theme--g10,
+  $g10: map-merge(
+    $g10,
     (
       caption-01: $caption-01,
       label-01: $label-01,
       helper-text-01: $helper-text-01,
-      body-short-01: $body-short-01,
-      body-long-01: $body-long-01,
+      body-compact-01: $body-compact-01,
+      body-01: $body-01,
       code-01: $code-01,
       code-02: $code-02,
       heading-01: $heading-01,
-      productive-heading-01: $productive-heading-01,
-      expressive-heading-01: $expressive-heading-01,
+      heading-compact-01: $heading-compact-01,
+      heading-01: $heading-01,
       container-01: $container-01,
       container-02: $container-02,
-      container-03: $container-03,
-      container-04: $container-04,
+      $spacing-09: $spacing-09,
+      container-04: $spacing-09,
       container-05: $container-05,
       icon-size-01: $icon-size-01,
     )
   ) !global;
 
-  $carbon--theme--g90: map-merge(
-    $carbon--theme--g90,
+  $g90: map-merge(
+    $g90,
     (
       caption-01: $caption-01,
       label-01: $label-01,
       helper-text-01: $helper-text-01,
-      body-short-01: $body-short-01,
-      body-long-01: $body-long-01,
+      body-compact-01: $body-compact-01,
+      body-01: $body-01,
       code-01: $code-01,
       code-02: $code-02,
       heading-01: $heading-01,
-      productive-heading-01: $productive-heading-01,
-      expressive-heading-01: $expressive-heading-01,
+      heading-compact-01: $heading-compact-01,
+      heading-01: $heading-01,
       container-01: $container-01,
       container-02: $container-02,
-      container-03: $container-03,
-      container-04: $container-04,
+      $spacing-09: $spacing-09,
+      container-04: $spacing-09,
       container-05: $container-05,
       icon-size-01: $icon-size-01,
     )
   ) !global;
 
-  $carbon--theme--g100: map-merge(
-    $carbon--theme--g100,
+  $g100: map-merge(
+    $g100,
     (
       caption-01: $caption-01,
       label-01: $label-01,
       helper-text-01: $helper-text-01,
-      body-short-01: $body-short-01,
-      body-long-01: $body-long-01,
+      body-compact-01: $body-compact-01,
+      body-01: $body-01,
       code-01: $code-01,
       code-02: $code-02,
       heading-01: $heading-01,
-      productive-heading-01: $productive-heading-01,
-      expressive-heading-01: $expressive-heading-01,
+      heading-compact-01: $heading-compact-01,
+      heading-01: $heading-01,
       container-01: $container-01,
       container-02: $container-02,
-      container-03: $container-03,
-      container-04: $container-04,
+      $spacing-09: $spacing-09,
+      container-04: $spacing-09,
       container-05: $container-05,
       icon-size-01: $icon-size-01,
     )
diff --git a/packages/styles/scss/themes/expressive/components/_accordion.scss b/packages/styles/scss/themes/expressive/components/_accordion.scss
index 3f1e28bac52..3efa5aba052 100644
--- a/packages/styles/scss/themes/expressive/components/_accordion.scss
+++ b/packages/styles/scss/themes/expressive/components/_accordion.scss
@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use 'sass:list';
+
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Accordion (expressive)
@@ -17,7 +19,7 @@
 @mixin accordion-expressive {
   .#{$prefix}--accordion__heading {
     padding: calc(
-        (#{$container-03} - #{map-get($body-long-01, 'line-height')}) / 2
+        list.slash(#{$spacing-09} - #{map-get($body-01, 'line-height')}, 2)
       )
       0;
   }
diff --git a/packages/styles/scss/themes/expressive/components/_button.scss b/packages/styles/scss/themes/expressive/components/_button.scss
index 1ef343f69a2..54128c0b98d 100644
--- a/packages/styles/scss/themes/expressive/components/_button.scss
+++ b/packages/styles/scss/themes/expressive/components/_button.scss
@@ -5,7 +5,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use 'sass:list';
+
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Button (expressive)
@@ -17,10 +19,16 @@
 @mixin button-expressive {
   .#{$prefix}--btn {
     padding-top: calc(
-      (#{$button-md-height} - #{map-get($body-short-01, 'line-height')}) / 2 - #{$button-outline-width}
+      list.slash(
+          #{$button-md-height} - #{map-get($body-compact-01, 'line-height')},
+          2
+        ) - #{$button-outline-width}
     );
     padding-bottom: calc(
-      (#{$button-md-height} - #{map-get($body-short-01, 'line-height')}) / 2 - #{$button-outline-width}
+      list.slash(
+          #{$button-md-height} - #{map-get($body-compact-01, 'line-height')},
+          2
+        ) - #{$button-outline-width}
     );
 
     .#{$prefix}--btn__icon {
@@ -31,24 +39,38 @@
     &.#{$prefix}--btn--field {
       min-height: $button-field-height;
       padding-top: calc(
-        (#{$button-field-height} - #{map-get($body-short-01, 'line-height')}) /
-          2 - #{$button-outline-width}
+        list.slash(
+            #{$button-field-height} - #{map-get(
+                $body-compact-01,
+                'line-height'
+              )},
+            2
+          ) - #{$button-outline-width}
       );
       padding-bottom: calc(
-        (#{$button-field-height} - #{map-get($body-short-01, 'line-height')}) /
-          2 - #{$button-outline-width}
+        list.slash(
+            #{$button-field-height} - #{map-get(
+                $body-compact-01,
+                'line-height'
+              )},
+            2
+          ) - #{$button-outline-width}
       );
     }
 
     &.#{$prefix}--btn--sm {
       min-height: $button-sm-height;
       padding-top: calc(
-        (#{$button-sm-height} - #{map-get($body-short-01, 'line-height')}) / 2 -
-          #{$button-outline-width}
+        list.slash(
+            #{$button-sm-height} - #{map-get($body-compact-01, 'line-height')},
+            2
+          ) - #{$button-outline-width}
       );
       padding-bottom: calc(
-        (#{$button-sm-height} - #{map-get($body-short-01, 'line-height')}) / 2 -
-          #{$button-outline-width}
+        list.slash(
+            #{$button-sm-height} - #{map-get($body-compact-01, 'line-height')},
+            2
+          ) - #{$button-outline-width}
       );
     }
   }
@@ -56,20 +78,20 @@
   .#{$prefix}--btn--icon-only {
     min-width: $button-md-height;
     padding: calc(
-      (#{$button-md-height} - #{$icon-size-01}) / 2 - #{$button-outline-width}
+      list.slash(#{$button-md-height} - #{$icon-size-01}, 2) - #{$button-outline-width}
     );
 
     &.#{$prefix}--btn--field {
       min-width: $button-field-height;
       padding: calc(
-        (#{$button-field-height} - #{$icon-size-01}) / 2 - #{$button-outline-width}
+        list.slash(#{$button-field-height} - #{$icon-size-01}, 2) - #{$button-outline-width}
       );
     }
 
     &.#{$prefix}--btn--sm {
       min-width: $button-sm-height;
       padding: calc(
-        (#{$button-sm-height} - #{$icon-size-01}) / 2 - #{$button-outline-width}
+        list.slash(#{$button-sm-height} - #{$icon-size-01}, 2) - #{$button-outline-width}
       );
     }
   }
diff --git a/packages/styles/scss/themes/expressive/components/_checkbox.scss b/packages/styles/scss/themes/expressive/components/_checkbox.scss
index 2f5883d5fa7..d97741d84dc 100644
--- a/packages/styles/scss/themes/expressive/components/_checkbox.scss
+++ b/packages/styles/scss/themes/expressive/components/_checkbox.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Checkbox (expressive)
diff --git a/packages/styles/scss/themes/expressive/components/_code-snippet.scss b/packages/styles/scss/themes/expressive/components/_code-snippet.scss
index 700d7b005cb..93871e0a1a0 100644
--- a/packages/styles/scss/themes/expressive/components/_code-snippet.scss
+++ b/packages/styles/scss/themes/expressive/components/_code-snippet.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Code snippet (expressive)
@@ -17,7 +17,7 @@
 @mixin code-snippet-expressive {
   // Single Line Snippet
   .#{$prefix}--snippet--single {
-    height: $carbon--spacing-09;
+    height: $spacing-09;
 
     #{$prefix}--snippet-container {
       height: 100%;
diff --git a/packages/styles/scss/themes/expressive/components/_combo-box.scss b/packages/styles/scss/themes/expressive/components/_combo-box.scss
index e1c114d39b6..d6cc6ce2a6b 100644
--- a/packages/styles/scss/themes/expressive/components/_combo-box.scss
+++ b/packages/styles/scss/themes/expressive/components/_combo-box.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Combo Box (expressive)
@@ -17,15 +17,15 @@
 @mixin combo-box-expressive {
   .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__selection svg {
-    width: carbon--rem(20px);
-    height: carbon--rem(20px);
+    width: to-rem(20px);
+    height: to-rem(20px);
   }
   .#{$prefix}--combo-box.#{$prefix}--list-box {
     .#{$prefix}--list-box__menu-icon {
-      top: 0.75rem;
+      top: $spacing-04;
       svg {
-        height: rem(20px);
-        width: rem(20px);
+        height: to-rem(20px);
+        width: to-rem(20px);
       }
     }
   }
diff --git a/packages/styles/scss/themes/expressive/components/_content-switcher.scss b/packages/styles/scss/themes/expressive/components/_content-switcher.scss
index 0d6065f2806..bdeceb2d2dd 100644
--- a/packages/styles/scss/themes/expressive/components/_content-switcher.scss
+++ b/packages/styles/scss/themes/expressive/components/_content-switcher.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Content Switcher (expressive)
@@ -16,6 +16,6 @@
 /// @group content-switcher-expressive
 @mixin content-switcher-expressive {
   .#{$prefix}--content-switcher {
-    height: carbon--rem(48px);
+    height: $spacing-09;
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_copy-button.scss b/packages/styles/scss/themes/expressive/components/_copy-button.scss
index 732a95d6ec8..a493749beb4 100644
--- a/packages/styles/scss/themes/expressive/components/_copy-button.scss
+++ b/packages/styles/scss/themes/expressive/components/_copy-button.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Copy button (expressive)
@@ -16,11 +16,11 @@
 /// @group copy-button-expressive
 @mixin copy-button-expressive {
   .#{$prefix}--copy-btn {
-    height: $carbon--spacing-09;
-    width: $carbon--spacing-09;
+    height: $spacing-09;
+    width: $spacing-09;
     svg {
-      height: rem(20px);
-      width: rem(20px);
+      height: to-rem(20px);
+      width: to-rem(20px);
     }
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_data-table.scss b/packages/styles/scss/themes/expressive/components/_data-table.scss
index b150ab84882..0f46709f839 100644
--- a/packages/styles/scss/themes/expressive/components/_data-table.scss
+++ b/packages/styles/scss/themes/expressive/components/_data-table.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Data Table (expressive)
@@ -16,17 +16,17 @@
 /// @group data-table-expressive
 @mixin data-table-expressive {
   .#{$prefix}--data-table--compact td {
-    height: rem(32px);
+    height: $spacing-07;
   }
   .#{$prefix}--data-table--short td {
-    height: rem(40px);
+    height: $spacing-08;
   }
   .#{$prefix}--data-table--tall td {
-    height: rem(70px);
+    height: to-rem(70px);
   }
   .#{$prefix}--table-expand__svg {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--data-table tbody td {
     &.#{$prefix}--table-column-checkbox {
@@ -35,8 +35,8 @@
   }
 
   .#{$prefix}--action-list .#{$prefix}--btn__icon {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--toolbar-search-container-expandable
     .#{$prefix}--search
@@ -45,8 +45,8 @@
     width: var(--cds-layout-04, 3.25rem);
   }
   .#{$prefix}--action-list .#{$prefix}--btn .#{$prefix}--btn__icon {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--overflow-menu__icon {
     height: 1.25rem;
diff --git a/packages/styles/scss/themes/expressive/components/_date-picker.scss b/packages/styles/scss/themes/expressive/components/_date-picker.scss
index 80b514d36c4..42ac5d4e7fd 100644
--- a/packages/styles/scss/themes/expressive/components/_date-picker.scss
+++ b/packages/styles/scss/themes/expressive/components/_date-picker.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Date Picker (expressive)
@@ -16,28 +16,28 @@
 /// @group date-picker-expressive
 @mixin date-picker-expressive {
   .#{$prefix}--date-picker__input {
-    height: carbon--rem(48px); /* $carbon--container-04 */
+    height: $spacing-09; /* $carbon--container-04 */
   }
 
   .#{$prefix}--date-picker.#{$prefix}--date-picker--simple {
     .#{$prefix}--date-picker__input {
-      width: rem(128px);
+      width: to-rem(128px);
     }
   }
 
   .#{$prefix}--date-picker__icon {
-    width: rem(20px);
-    height: rem(20px);
+    width: to-rem(20px);
+    height: to-rem(20px);
   }
 
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker-container,
   .#{$prefix}--date-picker--range .#{$prefix}--date-picker__input {
-    width: rem(160px);
+    width: $spacing-13;
   }
 
   .flatpickr-prev-month svg,
   .flatpickr-next-month svg {
-    width: rem(20px);
-    height: rem(20px);
+    width: to-rem(20px);
+    height: to-rem(20px);
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_dropdown.scss b/packages/styles/scss/themes/expressive/components/_dropdown.scss
index 06f2ad8ae9c..61d832550e2 100644
--- a/packages/styles/scss/themes/expressive/components/_dropdown.scss
+++ b/packages/styles/scss/themes/expressive/components/_dropdown.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Date Picker (expressive)
@@ -17,15 +17,15 @@
 @mixin dropdown-expressive {
   .#{$prefix}--dropdown.#{$prefix}--list-box--sm,
   .#{$prefix}--dropdown.#{$prefix}--list-box--sm .#{$prefix}--list-box__field {
-    height: 2.5rem;
+    height: $spacing-08;
   }
 
   .#{$prefix}--dropdown.#{$prefix}--list-box {
     .#{$prefix}--list-box__menu-icon {
-      top: 0.75rem;
+      top: $spacing-04;
       svg {
-        height: rem(20px);
-        width: rem(20px);
+        height: to-rem(20px);
+        width: to-rem(20px);
       }
     }
   }
diff --git a/packages/styles/scss/themes/expressive/components/_file-uploader.scss b/packages/styles/scss/themes/expressive/components/_file-uploader.scss
index 341cfae764b..bac85e059ce 100644
--- a/packages/styles/scss/themes/expressive/components/_file-uploader.scss
+++ b/packages/styles/scss/themes/expressive/components/_file-uploader.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // File Uploader (expressive)
@@ -15,18 +15,18 @@
 /// @group file-uploader-expressive
 @mixin file-uploader-expressive {
   .#{$prefix}--file__state-container .#{$prefix}--file-close svg {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--file__state-container .#{$prefix}--file-complete {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--file__state-container .#{$prefix}--btn--tertiary {
-    width: rem(142px);
+    width: to-rem(142px);
   }
   .#{$prefix}--file__state-container .#{$prefix}--file-invalid {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_inline-loading.scss b/packages/styles/scss/themes/expressive/components/_inline-loading.scss
index 059e2538d31..f6be76c1baa 100644
--- a/packages/styles/scss/themes/expressive/components/_inline-loading.scss
+++ b/packages/styles/scss/themes/expressive/components/_inline-loading.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 //-----------------------------
 // Inline Loading  (expressive)
 //-----------------------------
@@ -15,7 +15,7 @@
 @mixin inline-loading-expressive {
   .#{$prefix}--inline-loading__checkmark-container,
   .#{$prefix}--inline-loading--error {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_inline-notifications.scss b/packages/styles/scss/themes/expressive/components/_inline-notifications.scss
index 2b5a2b21b41..5b278b7595a 100644
--- a/packages/styles/scss/themes/expressive/components/_inline-notifications.scss
+++ b/packages/styles/scss/themes/expressive/components/_inline-notifications.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Inline Notifications  (expressive)
@@ -26,8 +26,8 @@
       padding: 0.8rem 0;
     }
     .#{$prefix}--inline-notification__action-button.#{$prefix}--btn--ghost {
-      padding: calc(0.375rem - 3px) 1rem;
-      margin: 0.25rem 0;
+      padding: calc(0.375rem - 3px) $spacing-05;
+      margin: $spacing-02 0;
     }
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_list-box.scss b/packages/styles/scss/themes/expressive/components/_list-box.scss
index 4ebbc7bb0ed..0d78e359d0f 100644
--- a/packages/styles/scss/themes/expressive/components/_list-box.scss
+++ b/packages/styles/scss/themes/expressive/components/_list-box.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // List Box (Expressive)
@@ -16,28 +16,28 @@
 /// @group list-box-expressive
 @mixin list-box-expressive {
   .#{$prefix}--list-box {
-    height: carbon--rem(48px); /* $carbon--container-04 */
-    max-height: carbon--rem(48px); /* $carbon--container-04 */
+    height: $spacing-09; /* $carbon--container-04 */
+    max-height: $spacing-09; /* $carbon--container-04 */
   }
 
   .#{$prefix}--list-box__field {
-    height: carbon--rem(48px); /* $carbon--container-04 */
+    height: $spacing-09; /* $carbon--container-04 */
   }
 
   .#{$prefix}--list-box__menu-item {
-    height: carbon--rem(48px); /* $carbon--container-04 */
+    height: $spacing-09; /* $carbon--container-04 */
   }
 
   .#{$prefix}--list-box__menu-item__option {
-    height: carbon--rem(48px); /* $carbon--container-04 */
-    padding: carbon--rem(14px) 0;
+    height: $spacing-09; /* $carbon--container-04 */
+    padding: to-rem(14px) 0;
 
     &:focus {
-      padding: carbon--rem(14px) carbon--rem(16px);
+      padding: to-rem(14px) $spacing-05;
     }
   }
 
   .#{$prefix}--list-box__menu-icon > svg {
-    width: carbon--rem(20px);
+    width: to-rem(20px);
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_loading.scss b/packages/styles/scss/themes/expressive/components/_loading.scss
index 3075c5af2af..30937008da8 100644
--- a/packages/styles/scss/themes/expressive/components/_loading.scss
+++ b/packages/styles/scss/themes/expressive/components/_loading.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Loading  (expressive)
diff --git a/packages/styles/scss/themes/expressive/components/_modal.scss b/packages/styles/scss/themes/expressive/components/_modal.scss
index ade0d6d4639..430e8012ffd 100644
--- a/packages/styles/scss/themes/expressive/components/_modal.scss
+++ b/packages/styles/scss/themes/expressive/components/_modal.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Modal (expressive)
@@ -19,7 +19,7 @@
     background-image: linear-gradient(
       to bottom,
       rgba(244, 244, 244, 0),
-      $ui-01
+      $layer-01
     );
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_multi-select.scss b/packages/styles/scss/themes/expressive/components/_multi-select.scss
index ecc069e12d5..4ceceb68f96 100644
--- a/packages/styles/scss/themes/expressive/components/_multi-select.scss
+++ b/packages/styles/scss/themes/expressive/components/_multi-select.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Combo Box (expressive)
@@ -17,10 +17,10 @@
 @mixin multi-select-expressive {
   .#{$prefix}--multi-select.#{$prefix}--list-box {
     .#{$prefix}--list-box__menu-icon {
-      top: 0.75rem;
+      top: $spacing-04;
       svg {
-        height: rem(20px);
-        width: rem(20px);
+        height: to-rem(20px);
+        width: to-rem(20px);
       }
     }
   }
diff --git a/packages/styles/scss/themes/expressive/components/_number-input.scss b/packages/styles/scss/themes/expressive/components/_number-input.scss
index 563f4d32b3d..1d3a0c1665e 100644
--- a/packages/styles/scss/themes/expressive/components/_number-input.scss
+++ b/packages/styles/scss/themes/expressive/components/_number-input.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Number Input (expressive)
@@ -16,12 +16,12 @@
 /// @group number-input-expressive
 @mixin number-input-expressive {
   .#{$prefix}--number input[type='number'] {
-    height: carbon--rem(48px); /* $carbon--container-04 */
+    height: $spacing-09; /* $carbon--container-04 */
   }
 
   .#{$prefix}--number__input-wrapper .#{$prefix}--number__invalid {
-    width: carbon--rem(20px);
-    height: carbon--rem(20px);
+    width: to-rem(20px);
+    height: to-rem(20px);
   }
 
   .#{$prefix}--number__control-btn.up-icon,
@@ -30,8 +30,8 @@
     height: 100%;
 
     svg {
-      height: carbon--rem(20px);
-      width: carbon--rem(20px);
+      height: to-rem(20px);
+      width: to-rem(20px);
     }
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_overflow-menu.scss b/packages/styles/scss/themes/expressive/components/_overflow-menu.scss
index 48f4577edfb..8bd70412e83 100644
--- a/packages/styles/scss/themes/expressive/components/_overflow-menu.scss
+++ b/packages/styles/scss/themes/expressive/components/_overflow-menu.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Overflow Menu (expressive)
@@ -16,21 +16,21 @@
 /// @group overflow-menu-expressive
 @mixin overflow-menu-expressive {
   .#{$prefix}--overflow-menu {
-    height: rem(40px);
-    width: rem(40px);
+    height: $spacing-08;
+    width: $spacing-08;
 
     &-options__option {
-      height: rem(48px);
+      height: $spacing-09;
     }
 
     &-options--open[data-floating-menu-direction='bottom']::after,
     &-options--open[data-floating-menu-direction='top']::after {
-      width: rem(40px);
+      width: $spacing-08;
     }
 
     &__icon {
-      height: rem(20px);
-      width: rem(20px);
+      height: to-rem(20px);
+      width: to-rem(20px);
     }
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_progressive-indicator.scss b/packages/styles/scss/themes/expressive/components/_progressive-indicator.scss
index cae3f787bfa..f5f9654dd7c 100644
--- a/packages/styles/scss/themes/expressive/components/_progressive-indicator.scss
+++ b/packages/styles/scss/themes/expressive/components/_progressive-indicator.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Progressive Indicator (expressive)
@@ -16,7 +16,7 @@
 /// @group progressive-indicator-expressive
 @mixin progressive-indicator-expressive {
   .#{$prefix}--progress-step svg {
-    height: carbon--rem(20px);
-    width: carbon--rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_search.scss b/packages/styles/scss/themes/expressive/components/_search.scss
index 152d9de4b76..46ce0ee18f8 100644
--- a/packages/styles/scss/themes/expressive/components/_search.scss
+++ b/packages/styles/scss/themes/expressive/components/_search.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Search (expressive)
@@ -16,15 +16,15 @@
 /// @group search-expressive
 @mixin search-expressive {
   .#{$prefix}--search svg {
-    height: carbon--rem(20px);
-    width: carbon--rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
 
   .#{$prefix}--search--lg .#{$prefix}--search-input {
-    height: $carbon--spacing-09;
+    height: $spacing-09;
   }
 
   .#{$prefix}--search--sm .#{$prefix}--search-input {
-    height: $carbon--spacing-08;
+    height: $spacing-08;
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_select.scss b/packages/styles/scss/themes/expressive/components/_select.scss
index 4e4098b9ad0..1777b8d224f 100644
--- a/packages/styles/scss/themes/expressive/components/_select.scss
+++ b/packages/styles/scss/themes/expressive/components/_select.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Select (expressive)
@@ -16,21 +16,21 @@
 /// @group select-expressive
 @mixin select-expressive {
   .#{$prefix}--select-input {
-    height: rem(48px);
+    height: $spacing-09;
   }
   .#{$prefix}--select__invalid-icon {
-    height: rem(20px);
-    width: rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--select__arrow {
-    width: rem(20px);
+    width: to-rem(20px);
   }
   .#{$prefix}--select--inline.#{$prefix}--select--invalid .#{$prefix}--label,
   .#{$prefix}--select--inline.#{$prefix}--select--invalid
     .#{$prefix}--form__helper-text {
-    margin-top: 1rem;
+    margin-top: $spacing-05;
   }
   .#{$prefix}--form__helper-text {
-    line-height: 1rem;
+    line-height: $spacing-05;
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_structured-list.scss b/packages/styles/scss/themes/expressive/components/_structured-list.scss
index 66b9b21b50a..ff8ea1972d7 100644
--- a/packages/styles/scss/themes/expressive/components/_structured-list.scss
+++ b/packages/styles/scss/themes/expressive/components/_structured-list.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Structured List (expressive)
diff --git a/packages/styles/scss/themes/expressive/components/_tabs.scss b/packages/styles/scss/themes/expressive/components/_tabs.scss
index fb3471d348b..bccbebdce29 100644
--- a/packages/styles/scss/themes/expressive/components/_tabs.scss
+++ b/packages/styles/scss/themes/expressive/components/_tabs.scss
@@ -5,8 +5,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Tabs (expressive)
@@ -17,25 +17,25 @@
 /// @group tabs-expressive
 @mixin tabs-expressive {
   .#{$prefix}--tabs-trigger {
-    height: $container-03;
+    height: $spacing-09;
   }
 
-  @include carbon--breakpoint(md) {
+  @include breakpoint(md) {
     .#{$prefix}--tabs {
-      min-height: $container-03;
+      min-height: $spacing-09;
     }
 
     .#{$prefix}--tabs--container {
-      min-height: $container-04;
+      min-height: $spacing-09;
 
       a.#{$prefix}--tabs__nav-link {
-        height: $container-04;
+        height: $spacing-09;
       }
     }
 
     .#{$prefix}--tabs__nav-item,
     a.#{$prefix}--tabs__nav-link {
-      height: $container-03;
+      height: $spacing-09;
     }
 
     a.#{$prefix}--tabs__nav-link {
diff --git a/packages/styles/scss/themes/expressive/components/_tag.scss b/packages/styles/scss/themes/expressive/components/_tag.scss
index 9e50bef1202..9f116067edb 100644
--- a/packages/styles/scss/themes/expressive/components/_tag.scss
+++ b/packages/styles/scss/themes/expressive/components/_tag.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Tag (expressive)
@@ -16,12 +16,12 @@
 /// @group tag-expressive
 @mixin tag-expressive {
   .#{$prefix}--tag {
-    @include carbon--type-style('label-01');
+    @include type-style('label-01');
 
-    /* stylelint-disable-next-line declaration-property-unit-whitelist */
-    line-height: carbon--rem(20px);
+    /* stylelint-disable-next-line declaration-property-unit-allowed-list */
+    line-height: to-rem(20px);
 
-    height: carbon--rem(32px); /* carbon--container-02 */
+    height: $spacing-07; /* carbon--container-02 */
     padding: 6px $spacing-05;
   }
 
@@ -31,7 +31,7 @@
 
   .#{$prefix}--tag--disabled,
   .#{$prefix}--tag--filter.#{$prefix}--tag--disabled {
-    color: $disabled-02;
+    color: $text-disabled;
   }
 
   .#{$prefix}--tag__close-icon {
diff --git a/packages/styles/scss/themes/expressive/components/_text-area.scss b/packages/styles/scss/themes/expressive/components/_text-area.scss
index e4eb72fce14..c13813b1ade 100644
--- a/packages/styles/scss/themes/expressive/components/_text-area.scss
+++ b/packages/styles/scss/themes/expressive/components/_text-area.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Text Area (expressive)
diff --git a/packages/styles/scss/themes/expressive/components/_text-input.scss b/packages/styles/scss/themes/expressive/components/_text-input.scss
index 8fd2462098c..9d4517b35d7 100644
--- a/packages/styles/scss/themes/expressive/components/_text-input.scss
+++ b/packages/styles/scss/themes/expressive/components/_text-input.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Text Input (expressive)
@@ -16,24 +16,24 @@
 /// @group text-input-expressive
 @mixin text-input-expressive {
   .#{$prefix}--text-input {
-    height: carbon--rem(48px); /* $carbon--container-04 */
+    height: $spacing-09; /* $carbon--container-04 */
 
     &__invalid-icon {
-      height: carbon--rem(20px);
-      width: carbon--rem(20px);
+      height: to-rem(20px);
+      width: to-rem(20px);
     }
   }
   .#{$prefix}--text-input__field-wrapper
     .#{$prefix}--text-input--password__visibility,
   .#{$prefix}--text-input__field-wrapper
     .#{$prefix}--text-input--password__visibility__toggle.#{$prefix}--tooltip__trigger {
-    height: carbon--rem(20px);
-    width: carbon--rem(20px);
+    height: to-rem(20px);
+    width: to-rem(20px);
 
     .#{$prefix}--icon-visibility-off,
     .#{$prefix}--icon-visibility-on {
-      height: carbon--rem(20px);
-      width: carbon--rem(20px);
+      height: to-rem(20px);
+      width: to-rem(20px);
     }
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_tile.scss b/packages/styles/scss/themes/expressive/components/_tile.scss
index c0b35809c7f..5ea03550367 100644
--- a/packages/styles/scss/themes/expressive/components/_tile.scss
+++ b/packages/styles/scss/themes/expressive/components/_tile.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Tile (expressive)
@@ -16,7 +16,7 @@
 /// @group tile-expressive
 @mixin tile-expressive {
   .#{$prefix}--tile--is-selected {
-    outline-offset: -2px;
+    outline-offset: -#{$spacing-01};
   }
 
   .#{$prefix}--tile__checkmark {
diff --git a/packages/styles/scss/themes/expressive/components/_time-picker.scss b/packages/styles/scss/themes/expressive/components/_time-picker.scss
index a5a8a7565bc..1f9f192b122 100644
--- a/packages/styles/scss/themes/expressive/components/_time-picker.scss
+++ b/packages/styles/scss/themes/expressive/components/_time-picker.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Time Picker (expressive)
@@ -16,7 +16,7 @@
 /// @group time-picker-expressive
 @mixin time-picker-expressive {
   .#{$prefix}--time-picker__input-field {
-    height: carbon--rem(48px);
-    width: carbon--rem(85px);
+    height: $spacing-09;
+    width: to-rem(85px);
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_toast-notifications.scss b/packages/styles/scss/themes/expressive/components/_toast-notifications.scss
index 538da77a11a..0b91c79a1a6 100644
--- a/packages/styles/scss/themes/expressive/components/_toast-notifications.scss
+++ b/packages/styles/scss/themes/expressive/components/_toast-notifications.scss
@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Toast Notifications  (expressive)
diff --git a/packages/styles/scss/themes/expressive/components/_tooltip.scss b/packages/styles/scss/themes/expressive/components/_tooltip.scss
index 0f494ae7849..f5229262674 100644
--- a/packages/styles/scss/themes/expressive/components/_tooltip.scss
+++ b/packages/styles/scss/themes/expressive/components/_tooltip.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2020
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Tooltip (expressive)
@@ -19,7 +19,7 @@
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-start
     .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--right.#{$prefix}--tooltip--align-end {
     &::before {
-      border-width: rem(4px) rem(5.5px) rem(4px) 0;
+      border-width: $spacing-02 to-rem(5.5px) $spacing-02 0;
     }
   }
 
@@ -27,10 +27,10 @@
   .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-start
     .#{$prefix}--tooltip__trigger.#{$prefix}--tooltip--left.#{$prefix}--tooltip--align-end {
     &::before {
-      border-width: rem(4px) 0 rem(4px) rem(5.5px);
+      border-width: $spacing-02 0 $spacing-02 to-rem(5.5px);
     }
   }
   .#{$prefix}--tooltip .#{$prefix}--link {
-    font-size: 1rem;
+    font-size: $spacing-05;
   }
 }
diff --git a/packages/styles/scss/themes/expressive/components/_ui-shell.scss b/packages/styles/scss/themes/expressive/components/_ui-shell.scss
index b9507eacf14..ff5eeaa27c3 100644
--- a/packages/styles/scss/themes/expressive/components/_ui-shell.scss
+++ b/packages/styles/scss/themes/expressive/components/_ui-shell.scss
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/convert';
+@use '@carbon/styles/scss/utilities/convert' as *;
 
 //-----------------------------
 // Accordion (expressive)
@@ -39,14 +39,14 @@
     padding: 0;
 
     &--active {
-      border-top: rem(1px) solid $interactive-02;
+      border-top: to-rem(1px) solid $button-secondary;
       outline: none;
     }
   }
 
   .#{$prefix}--btn.#{$prefix}--btn--icon-only.#{$prefix}--tooltip__trigger:focus {
     outline: none;
-    border-color: $ui-01;
+    border-color: $layer-01;
     box-shadow: none;
   }
 }
diff --git a/packages/styles/scss/themes/expressive/index.css b/packages/styles/scss/themes/expressive/index.css
new file mode 100644
index 00000000000..ac0aec198eb
--- /dev/null
+++ b/packages/styles/scss/themes/expressive/index.css
@@ -0,0 +1,17 @@
+/* Error: Can't find stylesheet to import.
+ *   ,
+ * 8 | @use '@carbon/styles/scss/config' as *;
+ *   | ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
+ *   '
+ *   scss/themes/expressive/index.scss 8:1  root stylesheet */
+
+body::before {
+  font-family: 'Source Code Pro', 'SF Mono', Monaco, Inconsolata, 'Fira Mono',
+    'Droid Sans Mono', monospace;
+  white-space: pre;
+  display: block;
+  padding: 1em;
+  margin-bottom: 1em;
+  border-bottom: 2px solid #000000;
+  content: "Error: Can't find stylesheet to import.\a   \2577 \a 8 \2502  @use '@carbon/styles/scss/config' as *;\a   \2502  ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\a   \2575 \a   scss/themes/expressive/index.scss 8:1  root stylesheet";
+}
diff --git a/packages/styles/scss/themes/expressive/index.scss b/packages/styles/scss/themes/expressive/index.scss
index a1a4a1adb92..eb86f262082 100644
--- a/packages/styles/scss/themes/expressive/index.scss
+++ b/packages/styles/scss/themes/expressive/index.scss
@@ -5,43 +5,43 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'carbon-components/scss/globals/scss/vars';
-@import 'tokens';
+@use '@carbon/styles/scss/config' as *;
+@use 'tokens';
+@forward 'tokens';
 
 // Carbon component theming
-@import 'components/accordion';
-@import 'components/button';
-@import 'components/checkbox';
-@import 'components/code-snippet';
-@import 'components/combo-box';
-@import 'components/content-switcher';
-@import 'components/copy-button';
-@import 'components/date-picker';
-@import 'components/data-table';
-@import 'components/dropdown';
-@import 'components/file-uploader';
-@import 'components/inline-loading';
-@import 'components/inline-notifications';
-@import 'components/list-box';
-@import 'components/loading';
-@import 'components/modal';
-@import 'components/multi-select';
-@import 'components/number-input';
-@import 'components/overflow-menu';
-@import 'components/progressive-indicator';
-@import 'components/tabs';
-@import 'components/tag';
-@import 'components/text-area';
-@import 'components/text-input';
-@import 'components/tile';
-@import 'components/time-picker';
-@import 'components/tooltip';
-@import 'components/search';
-@import 'components/select';
-@import 'components/structured-list';
-@import 'components/toast-notifications';
-@import 'components/ui-shell';
+@use 'components/accordion';
+@use 'components/button';
+@use 'components/checkbox';
+@use 'components/code-snippet';
+@use 'components/combo-box';
+@use 'components/content-switcher';
+@use 'components/copy-button';
+@use 'components/date-picker';
+@use 'components/data-table';
+@use 'components/dropdown';
+@use 'components/file-uploader';
+@use 'components/inline-loading';
+@use 'components/inline-notifications';
+@use 'components/list-box';
+@use 'components/loading';
+@use 'components/modal';
+@use 'components/multi-select';
+@use 'components/number-input';
+@use 'components/overflow-menu';
+@use 'components/progressive-indicator';
+@use 'components/tabs';
+@use 'components/tag';
+@use 'components/text-area';
+@use 'components/text-input';
+@use 'components/tile';
+@use 'components/time-picker';
+@use 'components/tooltip';
+@use 'components/search';
+@use 'components/select';
+@use 'components/structured-list';
+@use 'components/toast-notifications';
+@use 'components/ui-shell';
 
 //-------------------------
 // Expressive Theme
diff --git a/packages/utilities/CHANGELOG.md b/packages/utilities/CHANGELOG.md
index 49c3168b597..6fa79554d03 100644
--- a/packages/utilities/CHANGELOG.md
+++ b/packages/utilities/CHANGELOG.md
@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.0.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.0.0-rc.1...@carbon/ibmdotcom-utilities@2.0.0-rc.2) (2023-11-30)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
+# [2.0.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@2.0.0-rc.0...@carbon/ibmdotcom-utilities@2.0.0-rc.1) (2023-11-28)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 # [1.53.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.53.0-rc.2...@carbon/ibmdotcom-utilities@1.53.0) (2023-11-15)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities
@@ -21,11 +37,30 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 # [1.53.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.52.0-rc.0...@carbon/ibmdotcom-utilities@1.53.0-rc.1) (2023-11-02)
 
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
 
 
 # 1.53.0-rc.0 (2023-10-30)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities
+# [2.0.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-utilities@1.51.0-rc.0...@carbon/ibmdotcom-utilities@2.0.0-rc.0) (2023-11-20)
+
+
+### Bug Fixes
+
+* add missed extensions to on imports ([#10288](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10288)) ([e3ab4a7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e3ab4a7bc7917f016e2c5d4abc4a8df90f9642f2))
+
+
+### Features
+
+* **card:** v2 card style updates ([#10903](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10903)) ([cd84259](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd8425991d16f1598af8a4eb6f84669d1bc82d28))
+* **global-banner:** v2 ([#10997](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10997)) ([97fda38](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97fda38cf57bf02a9687ca6ecc1d0642c79304f8))
+* **masthead-v2:** integrate alpha branch ([#10952](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10952)) ([d3374d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d3374d10728884caac00eaa16b32c741ecbf09f0))
+* **package:** update packages to Carbon v11 ([#10779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10779)) ([1c88604](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1c88604ba0129a308c978ddf0ec7a73abebe8a67))
+* upgrade to Carbon 11 ([#10196](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10196)) ([2976ac5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2976ac51d8db5953f56464c24b49b5e73a3073c3)), closes [#9948](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9948)
 
 
 
diff --git a/packages/utilities/package.json b/packages/utilities/package.json
index 29f6dbd6360..993f06c8a3b 100644
--- a/packages/utilities/package.json
+++ b/packages/utilities/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "1.53.0",
+  "version": "2.0.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -25,9 +25,7 @@
     "umd/**/*"
   ],
   "keywords": [
-    "react",
     "carbon",
-    "carbon-components",
     "ibm",
     "carbon-design-system",
     "components"
@@ -44,13 +42,11 @@
     "jsdoc": "rimraf docs && jsdoc -c ./jsdoc.json ./README.md",
     "postinstall": "carbon-telemetry collect --install",
     "prepublish": "yarn build",
-    "test": "jest",
-    "upgrade-carbon": "yarn upgrade-interactive carbon-components --latest --exact"
+    "test": "jest"
   },
   "dependencies": {
     "@carbon/telemetry": "0.1.0",
     "axios": "^1.6.0",
-    "carbon-components": "10.58.12",
     "isomorphic-dompurify": "0.27.0",
     "js-cookie": "^2.2.1",
     "marked": "^4.0.10",
diff --git a/packages/utilities/scripts/rollup.config.js b/packages/utilities/scripts/rollup.config.js
index c33a2539b10..5ae39e54299 100644
--- a/packages/utilities/scripts/rollup.config.js
+++ b/packages/utilities/scripts/rollup.config.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js b/packages/utilities/src/utilities/StickyHeader/StickyHeader.js
index d412b3816eb..461982e0f55 100644
--- a/packages/utilities/src/utilities/StickyHeader/StickyHeader.js
+++ b/packages/utilities/src/utilities/StickyHeader/StickyHeader.js
@@ -6,13 +6,10 @@
  */
 
 import { baseFontSize, breakpoints } from '@carbon/layout';
-import ddsSettings from '../settings/settings.js';
 import root from 'window-or-global';
-import settings from 'carbon-components/es/globals/js/settings';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+import settings from '../settings/settings.js';
 
+const { prefix, stablePrefix: c4dPrefix } = settings;
 const gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
 
 class StickyHeader {
@@ -48,7 +45,7 @@ class StickyHeader {
   }
 
   static get customPropertyName() {
-    return `--${ddsPrefix}-sticky-header-height`;
+    return `--${c4dPrefix}-sticky-header-height`;
   }
 
   get height() {
@@ -77,7 +74,7 @@ class StickyHeader {
 
     const tocRoot = toc.shadowRoot;
 
-    const desktopSelector = `.${ddsPrefix}-ce--table-of-contents__items-container`;
+    const desktopSelector = `.${c4dPrefix}-ce--table-of-contents__items-container`;
 
     if (window.innerWidth > gridBreakpoint) {
       if (toc.layout === 'horizontal') {
@@ -96,7 +93,7 @@ class StickyHeader {
   }
 
   set banner(component) {
-    if (this._validateComponent(component, `${ddsPrefix}-universal-banner`)) {
+    if (this._validateComponent(component, `${c4dPrefix}-global-banner`)) {
       this._banner = component;
       this.hasBanner = true;
 
@@ -110,7 +107,7 @@ class StickyHeader {
 
   set leadspaceWithSearch(component) {
     if (
-      this._validateComponent(component, `${ddsPrefix}-leadspace-with-search`)
+      this._validateComponent(component, `${c4dPrefix}-leadspace-with-search`)
     ) {
       this._leadspaceWithSearch = component;
       const leadspaceSearchBar = component.shadowRoot.querySelector(
@@ -118,7 +115,7 @@ class StickyHeader {
       );
       this._leadspaceSearchBar = leadspaceSearchBar;
       this._leadspaceWithSearchInput = component.querySelector(
-        `${ddsPrefix}-search-with-typeahead`
+        `${c4dPrefix}-search-with-typeahead`
       );
       this._leadspaceWithSearchStickyThreshold =
         parseInt(window.getComputedStyle(leadspaceSearchBar).paddingBottom) -
@@ -128,27 +125,27 @@ class StickyHeader {
   }
 
   set localeModal(component) {
-    if (this._validateComponent(component, `${ddsPrefix}-locale-modal`)) {
+    if (this._validateComponent(component, `${c4dPrefix}-locale-modal`)) {
       this._localeModal = component;
       this._calculateCumulativeHeight();
     }
   }
 
   set masthead(component) {
-    if (this._validateComponent(component, `${ddsPrefix}-masthead`)) {
+    if (this._validateComponent(component, `${c4dPrefix}-masthead`)) {
       this._masthead = component;
       if (this._banner) this._masthead.setAttribute('with-banner', '');
 
       this._mastheadL0 = component.shadowRoot.querySelector(
         `.${prefix}--masthead__l0`
       );
-      this._mastheadL1 = component.querySelector(`${ddsPrefix}-masthead-l1`);
+      this._mastheadL1 = component.querySelector(`${c4dPrefix}-masthead-l1`);
       this._calculateCumulativeHeight();
     }
   }
 
   set tableOfContents(component) {
-    if (this._validateComponent(component, `${ddsPrefix}-table-of-contents`)) {
+    if (this._validateComponent(component, `${c4dPrefix}-table-of-contents`)) {
       this._tableOfContents = component;
       this._tableOfContentsStickyUpdate();
       this._resizeObserver.observe(this._tableOfContents);
diff --git a/packages/utilities/src/utilities/featureflag/featureflag.js b/packages/utilities/src/utilities/featureflag/featureflag.js
index 3b5f665822b..e264bdc167a 100644
--- a/packages/utilities/src/utilities/featureflag/featureflag.js
+++ b/packages/utilities/src/utilities/featureflag/featureflag.js
@@ -13,7 +13,7 @@
  * @private
  * @returns {object} JSX object
  *
- * return featureFlag(DDS_FEATURE_NAME, <div>hello world</div>);
+ * return featureFlag(C4D_FEATURE_NAME, <div>hello world</div>);
  */
 function featureFlag(flag, jsx) {
   return flag ? jsx : null;
diff --git a/packages/utilities/src/utilities/focuswrap/focuswrap.js b/packages/utilities/src/utilities/focuswrap/focuswrap.js
index b663146111f..e27530ed5cf 100644
--- a/packages/utilities/src/utilities/focuswrap/focuswrap.js
+++ b/packages/utilities/src/utilities/focuswrap/focuswrap.js
@@ -1,11 +1,11 @@
 /**
- * Copyright IBM Corp. 2020, 2021
+ * 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 on from 'carbon-components/es/globals/js/misc/on';
+import { on } from '../on';
 
 /**
  * Fires the given event if focus goes out of the given element.
@@ -14,13 +14,13 @@ import on from 'carbon-components/es/globals/js/misc/on';
  * @param {Element[]} sentinelNodes
  *   The focus sentinel nodes.
  *   If these nodes gets focus, we see it as focus went out of the `element`.
- * @param {string} [eventRequestFocusWrap=dds-request-focus-wrap] The event name.
+ * @param {string} [eventRequestFocusWrap=cds-request-focus-wrap] The event name.
  * @returns {Function} The handle to remove the event handler.
  */
 function focuswrap(
   element,
   sentinelNodes,
-  eventRequestFocusWrap = 'dds-request-focus-wrap'
+  eventRequestFocusWrap = 'cds-request-focus-wrap'
 ) {
   return on(element, 'focusout', function handleFocusout(event) {
     const { target, relatedTarget } = event;
diff --git a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
index ec5f585c80e..75e541dbc04 100644
--- a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
+++ b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
@@ -42,15 +42,15 @@ describe('g11n formatter for video caption', () => {
     });
 
     it('should fill zero for minutes', async () => {
-      expect(formatVideoDuration({ duration: 30000 })).toBe('0:30');
+      expect(formatVideoDuration({ duration: 30000 })).toBe('0:30 min');
     });
 
     it('should fill zero for seconds', async () => {
-      expect(formatVideoDuration({ duration: 65000 })).toBe('1:05');
+      expect(formatVideoDuration({ duration: 65000 })).toBe('1:05 min');
     });
 
     it('should support more than 1 minute', async () => {
-      expect(formatVideoDuration({ duration: 90000 })).toBe('1:30');
+      expect(formatVideoDuration({ duration: 90000 })).toBe('1:30 min');
     });
   });
 });
diff --git a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
index 8249fd55d90..6118dbca2fe 100644
--- a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
+++ b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
@@ -33,10 +33,17 @@ export function formatVideoCaption({ duration, name } = {}) {
  * @returns {string} The formatted video duration.
  */
 export function formatVideoDuration({ duration } = {}) {
+  const hours = Math.floor(((duration ?? 0) / (1000 * 60 * 60)) % 24);
   const minutes = Math.floor((duration ?? 0) / 60000);
   const seconds = Math.floor(((duration ?? 0) / 1000) % 60);
+
   const fillSeconds = Array.from({
     length: 2 - String(seconds).length + 1,
   }).join('0');
-  return duration == null ? duration : `${minutes}:${fillSeconds}${seconds}`;
+
+  return duration == null
+    ? duration
+    : hours
+    ? `${hours}:${minutes} hr`
+    : `${minutes}:${fillSeconds}${seconds} min`;
 }
diff --git a/packages/utilities/src/utilities/index.js b/packages/utilities/src/utilities/index.js
index 78043709c76..02627f62a5e 100644
--- a/packages/utilities/src/utilities/index.js
+++ b/packages/utilities/src/utilities/index.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2021
+ * Copyright IBM Corp. 2016, 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.
@@ -15,6 +15,7 @@ export * from './formatVideoCaption';
 export * from './ipcinfoCookie';
 export * from './loadNonLatinPlex';
 export * from './markdownToHtml';
+export * from './on';
 export * from './removeHtmlTagEntities';
 export * from './sameHeight';
 export * from './serialize';
diff --git a/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js b/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js
index 6a38a86c91f..4157749a13d 100644
--- a/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js
+++ b/packages/utilities/src/utilities/ipcinfoCookie/__tests__/ipcinfoCookie.test.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * 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.
diff --git a/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js b/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js
index c659eebba1c..38057392ed0 100644
--- a/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js
+++ b/packages/utilities/src/utilities/ipcinfoCookie/ipcinfoCookie.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/utilities/src/utilities/markdownToHtml/__tests__/markdownToHtml.test.js b/packages/utilities/src/utilities/markdownToHtml/__tests__/markdownToHtml.test.js
index 30a4a88c441..28f587f7d08 100644
--- a/packages/utilities/src/utilities/markdownToHtml/__tests__/markdownToHtml.test.js
+++ b/packages/utilities/src/utilities/markdownToHtml/__tests__/markdownToHtml.test.js
@@ -6,7 +6,7 @@
  */
 
 import { markdownToHtml } from '../';
-import settings from 'carbon-components/es/globals/js/settings';
+import settings from '../../settings/settings.js';
 
 const { prefix } = settings;
 
diff --git a/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js b/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js
index 3ce2fc3c0f4..dc80e6ea080 100644
--- a/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js
+++ b/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -7,7 +7,7 @@
 
 import DOMPurify from 'isomorphic-dompurify';
 import { marked } from 'marked';
-import settings from 'carbon-components/es/globals/js/settings';
+import settings from '../settings/settings.js';
 import striptags from 'striptags';
 
 const { prefix } = settings;
diff --git a/packages/utilities/src/utilities/on/index.js b/packages/utilities/src/utilities/on/index.js
new file mode 100644
index 00000000000..e91df1ee00d
--- /dev/null
+++ b/packages/utilities/src/utilities/on/index.js
@@ -0,0 +1,8 @@
+/**
+ * Copyright IBM Corp. 2018, 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.
+ */
+
+export { default as on } from './on';
diff --git a/packages/utilities/src/utilities/on/on.js b/packages/utilities/src/utilities/on/on.js
new file mode 100644
index 00000000000..529a64332d3
--- /dev/null
+++ b/packages/utilities/src/utilities/on/on.js
@@ -0,0 +1,25 @@
+/**
+ * Copyright IBM Corp. 2018, 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.
+ */
+
+/**
+ *
+ * @param {*} element
+ * @param  {...any} args
+ * @returns {Event} The event
+ */
+
+function on(element, ...args) {
+  element.addEventListener(...args);
+  return {
+    release() {
+      element.removeEventListener(...args);
+      return null;
+    },
+  };
+}
+
+export default on;
diff --git a/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js b/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js
index b38dc3d5a67..12091ff18ab 100644
--- a/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js
+++ b/packages/utilities/src/utilities/parseAspectRatio/parseAspectRatio.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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.
diff --git a/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js b/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js
index ce2c9d8e8c2..d2752d990ea 100644
--- a/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js
+++ b/packages/utilities/src/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/utilities/src/utilities/settings/settings.js b/packages/utilities/src/utilities/settings/settings.js
index 2f287e3ad0a..32809a03992 100644
--- a/packages/utilities/src/utilities/settings/settings.js
+++ b/packages/utilities/src/utilities/settings/settings.js
@@ -10,12 +10,14 @@
  *
  * @exports ibmdotcom.settings
  * @type {object} Settings object
- * @property {string} [prefix=dds]
- * Carbon for IBM.com v1.x.y-test',
+ * @property {string} [stablePrefix=c4d] stable prefix
+ * @property {string} [prefix=cds] core Carbon prefix
+ * Carbon for IBM.com v2.0.0',
  */
 const settings = {
-  version: 'Carbon for IBM.com v1.53.0',
-  stablePrefix: 'dds',
+  version: 'Carbon for IBM.com v2.0.0',
+  stablePrefix: 'c4d',
+  prefix: 'cds',
 };
 
 export default settings;
diff --git a/packages/web-components/.env.example b/packages/web-components/.env.example
index a4bca249de1..02cd01fa735 100644
--- a/packages/web-components/.env.example
+++ b/packages/web-components/.env.example
@@ -18,5 +18,5 @@ KALTURA_PARTNER_ID=<Kaltura partner id, e.g. 243342>
 KALTURA_UICONF_ID=<Kaltura uiconf id, e.g. 12905712>
 
 # Feature Flags
-DDS_FLAGS_ALL=<Boolean flag to turn on all feature flags>
-DDS_CLOUD_MASTHEAD=<Boolean flag to turn on/off cloud masthead>
+C4D_FLAGS_ALL=<Boolean flag to turn on all feature flags>
+C4D_CLOUD_MASTHEAD=<Boolean flag to turn on/off cloud masthead>
diff --git a/packages/web-components/.eslintrc.js b/packages/web-components/.eslintrc.js
index 4997db2dd2c..75ad5442f6b 100644
--- a/packages/web-components/.eslintrc.js
+++ b/packages/web-components/.eslintrc.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/.storybook/addon-knobs-args/decorators.ts b/packages/web-components/.storybook/addon-knobs-args/decorators.ts
index 640d6f5722b..58ca87650fb 100644
--- a/packages/web-components/.storybook/addon-knobs-args/decorators.ts
+++ b/packages/web-components/.storybook/addon-knobs-args/decorators.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
index 77a30af5939..e36c24b5abf 100644
--- a/packages/web-components/.storybook/container.scss
+++ b/packages/web-components/.storybook/container.scss
@@ -7,42 +7,46 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/grid/grid';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/grid';
 
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@import '@carbon/type/scss/font-face/serif';
-@import '@carbon/type/scss/reset';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@include carbon--font-face-serif();
-@include carbon--type-reset();
+@use '@carbon/ibmdotcom-styles/scss/globals/tokens/color-tokens' as color-tokens;
+@use '@carbon/styles/scss/components/button/tokens' as button-tokens;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+
+@include add-component-tokens(color-tokens.$color-tokens);
+@include add-component-tokens(button-tokens.$button-tokens);
+@include add-component-tokens(tag-tokens.$tag-tokens);
+
+// Emit the flex-grid styles
+@include grid.flex-grid();
 
 :root {
-  @include carbon--theme($carbon--theme--white, true);
+  @include theme($white, true);
 
   height: 100%;
 }
 
 :root[storybook-carbon-theme='g10'] {
-  @include carbon--theme($carbon--theme--g10, true);
+  @include theme($g10, true);
 }
 
 :root[storybook-carbon-theme='g90'] {
-  @include carbon--theme($carbon--theme--g90, true);
+  @include theme($g90, true);
 }
 
 :root[storybook-carbon-theme='g100'] {
-  @include carbon--theme($carbon--theme--g100, true);
+  @include theme($g100, true);
 }
 
 body {
   // `@include css-body` has `font-family: inherit` via `@include type-style('body-short-01')`,
   // which kills `font-family` from `@include carbon--type-reset`
-  color: $text-01;
-  background-color: $ui-background;
+  color: $text-primary;
+  background-color: $background;
   line-height: 1;
 }
 
@@ -66,7 +70,7 @@ html {
   }
 }
 
-.dds-story-padding {
-  padding-top: 1rem;
-  padding-bottom: 1rem;
+.c4d-story-padding {
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-05;
 }
diff --git a/packages/web-components/.storybook/main.js b/packages/web-components/.storybook/main.js
index 23e6fbba06f..d30da93b23b 100644
--- a/packages/web-components/.storybook/main.js
+++ b/packages/web-components/.storybook/main.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -10,7 +10,7 @@
 'use strict';
 
 const path = require('path');
-const sass = require('node-sass');
+const sass = require('sass');
 const webpack = require('webpack');
 const TerserPlugin = require('terser-webpack-plugin');
 const rtlcss = require('rtlcss');
@@ -154,10 +154,7 @@ module.exports = {
     if (babelLoaderRule) {
       config.module.rules.unshift({
         use: babelLoaderRule.use,
-        include: [
-          path.dirname(require.resolve('lit-html')),
-          path.dirname(require.resolve('lit-element')),
-        ],
+        include: [path.dirname(require.resolve('lit'))],
       });
     }
 
@@ -168,11 +165,8 @@ module.exports = {
         use: 'null-loader',
       },
       {
-        test: /[\\/]styles[\\/]icons[\\/]/i,
-        use: [
-          ...babelLoaderRule.use,
-          require.resolve('../tools/svg-result-ibmdotcom-icon-loader'),
-        ],
+        test: /\.svg$/,
+        use: [{ loader: 'raw-loader' }],
       },
       {
         test: /\.stories\.[jt]sx?$/,
diff --git a/packages/web-components/.storybook/manager.js b/packages/web-components/.storybook/manager.js
index 4e913e03469..fe55ab130f3 100644
--- a/packages/web-components/.storybook/manager.js
+++ b/packages/web-components/.storybook/manager.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/.storybook/preview-head.html b/packages/web-components/.storybook/preview-head.html
index 52d00829e45..182d15a39ef 100644
--- a/packages/web-components/.storybook/preview-head.html
+++ b/packages/web-components/.storybook/preview-head.html
@@ -1,59 +1,218 @@
 <!-- Americas -->
-<link rel="alternate" hreflang="en-ag" href="iframe.html?id=components-dotcom-shell--default&cc=ag&lc=en" />
-<link rel="alternate" hreflang="en-ai" href="iframe.html?id=components-dotcom-shell--default&cc=ai&lc=en" />
-<link rel="alternate" hreflang="en-aw" href="iframe.html?id=components-dotcom-shell--default&cc=aw&lc=en" />
-<link rel="alternate" hreflang="en-bb" href="iframe.html?id=components-dotcom-shell--default&cc=bb&lc=en" />
-<link rel="alternate" hreflang="en-bm" href="iframe.html?id=components-dotcom-shell--default&cc=bm&lc=en" />
-<link rel="alternate" hreflang="en-bs" href="iframe.html?id=components-dotcom-shell--default&cc=bs&lc=en" />
-<link rel="alternate" hreflang="en-ca" href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=en" />
-<link rel="alternate" hreflang="en-cw" href="iframe.html?id=components-dotcom-shell--default&cc=cw&lc=en" />
-<link rel="alternate" hreflang="en-dm" href="iframe.html?id=components-dotcom-shell--default&cc=dm&lc=en" />
-<link rel="alternate" hreflang="en-gd" href="iframe.html?id=components-dotcom-shell--default&cc=gd&lc=en" />
-<link rel="alternate" hreflang="en-gy" href="iframe.html?id=components-dotcom-shell--default&cc=gy&lc=en" />
-<link rel="alternate" hreflang="en-jm" href="iframe.html?id=components-dotcom-shell--default&cc=jm&lc=en" />
-<link rel="alternate" hreflang="en-ky" href="iframe.html?id=components-dotcom-shell--default&cc=ky&lc=en" />
-<link rel="alternate" hreflang="en-ms" href="iframe.html?id=components-dotcom-shell--default&cc=ms&lc=en" />
-<link rel="alternate" hreflang="en-tc" href="iframe.html?id=components-dotcom-shell--default&cc=tc&lc=en" />
-<link rel="alternate" hreflang="en-tt" href="iframe.html?id=components-dotcom-shell--default&cc=tt&lc=en" />
-<link rel="alternate" hreflang="en-us" href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
-<link rel="alternate" hreflang="en-vc" href="iframe.html?id=components-dotcom-shell--default&cc=vc&lc=en" />
-<link rel="alternate" hreflang="en-vg" href="iframe.html?id=components-dotcom-shell--default&cc=vg&lc=en" />
-<link rel="alternate" hreflang="es-ar" href="iframe.html?id=components-dotcom-shell--default&cc=ar&lc=es" />
-<link rel="alternate" hreflang="es-bo" href="iframe.html?id=components-dotcom-shell--default&cc=bo&lc=es" />
-<link rel="alternate" hreflang="es-cl" href="iframe.html?id=components-dotcom-shell--default&cc=cl&lc=es" />
-<link rel="alternate" hreflang="es-co" href="iframe.html?id=components-dotcom-shell--default&cc=co&lc=es" />
-<link rel="alternate" hreflang="es-cr" href="iframe.html?id=components-dotcom-shell--default&cc=cr&lc=es" />
-<link rel="alternate" hreflang="es-ec" href="iframe.html?id=components-dotcom-shell--default&cc=ec&lc=es" />
-<link rel="alternate" hreflang="es-mx" href="iframe.html?id=components-dotcom-shell--default&cc=mx&lc=es" />
-<link rel="alternate" hreflang="es-pe" href="iframe.html?id=components-dotcom-shell--default&cc=pe&lc=es" />
-<link rel="alternate" hreflang="es-py" href="iframe.html?id=components-dotcom-shell--default&cc=py&lc=es" />
-<link rel="alternate" hreflang="es-uy" href="iframe.html?id=components-dotcom-shell--default&cc=uy&lc=es" />
-<link rel="alternate" hreflang="es-ve" href="iframe.html?id=components-dotcom-shell--default&cc=ve&lc=es" />
-<link rel="alternate" hreflang="fr-ca" href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=fr" />
-<link rel="alternate" hreflang="pt-br" href="iframe.html?id=components-dotcom-shell--default&cc=br&lc=pt" />
-<link rel="alternate" hreflang="x-defult" href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ag"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ag&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ai"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ai&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-aw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=aw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bb"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bb&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bs"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bs&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ca"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-cw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-dm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=dm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-gd"
+  href="iframe.html?id=components-dotcom-shell--default&cc=gd&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-gy"
+  href="iframe.html?id=components-dotcom-shell--default&cc=gy&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-jm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=jm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ky"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ky&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ms"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ms&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-tc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tc&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-tt"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tt&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-us"
+  href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-vc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=vc&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-vg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=vg&lc=en" />
+<link
+  rel="alternate"
+  hreflang="es-ar"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ar&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-bo"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bo&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-cl"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cl&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-co"
+  href="iframe.html?id=components-dotcom-shell--default&cc=co&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-cr"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cr&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-ec"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ec&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-mx"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mx&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-pe"
+  href="iframe.html?id=components-dotcom-shell--default&cc=pe&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-py"
+  href="iframe.html?id=components-dotcom-shell--default&cc=py&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-uy"
+  href="iframe.html?id=components-dotcom-shell--default&cc=uy&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-ve"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ve&lc=es" />
+<link
+  rel="alternate"
+  hreflang="fr-ca"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="pt-br"
+  href="iframe.html?id=components-dotcom-shell--default&cc=br&lc=pt" />
+<link
+  rel="alternate"
+  hreflang="x-defult"
+  href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
 
 <!-- Asia Pacific -->
-<link rel="alternate" hreflang="en-au" href="iframe.html?id=components-dotcom-shell--default&cc=au&lc=en" />
-<link rel="alternate" hreflang="en-bd" href="iframe.html?id=components-dotcom-shell--default&cc=bd&lc=en" />
-<link rel="alternate" hreflang="en-hk" href="iframe.html?id=components-dotcom-shell--default&cc=hk&lc=en" />
-<link rel="alternate" hreflang="en-id" href="iframe.html?id=components-dotcom-shell--default&cc=id&lc=en" />
-<link rel="alternate" hreflang="en-in" href="iframe.html?id=components-dotcom-shell--default&cc=in&lc=en" />
-<link rel="alternate" hreflang="en-kh" href="iframe.html?id=components-dotcom-shell--default&cc=kh&lc=en" />
-<link rel="alternate" hreflang="en-kn" href="iframe.html?id=components-dotcom-shell--default&cc=kn&lc=en" />
-<link rel="alternate" hreflang="en-lc" href="iframe.html?id=components-dotcom-shell--default&cc=lc&lc=en" />
-<link rel="alternate" hreflang="en-lk" href="iframe.html?id=components-dotcom-shell--default&cc=lk&lc=en" />
-<link rel="alternate" hreflang="en-my" href="iframe.html?id=components-dotcom-shell--default&cc=my&lc=en" />
-<link rel="alternate" hreflang="en-np" href="iframe.html?id=components-dotcom-shell--default&cc=np&lc=en" />
-<link rel="alternate" hreflang="en-nz" href="iframe.html?id=components-dotcom-shell--default&cc=nz&lc=en" />
-<link rel="alternate" hreflang="en-ph" href="iframe.html?id=components-dotcom-shell--default&cc=ph&lc=en" />
-<link rel="alternate" hreflang="en-sg" href="iframe.html?id=components-dotcom-shell--default&cc=sg&lc=en" />
-<link rel="alternate" hreflang="en-th" href="iframe.html?id=components-dotcom-shell--default&cc=th&lc=en" />
-<link rel="alternate" hreflang="en-vn" href="iframe.html?id=components-dotcom-shell--default&cc=vn&lc=en" />
-<link rel="alternate" hreflang="ja-jp" href="iframe.html?id=components-dotcom-shell--default&cc=jp&lc=ja" />
-<link rel="alternate" hreflang="ko-kr" href="iframe.html?id=components-dotcom-shell--default&cc=kr&lc=ko" />
-<link rel="alternate" hreflang="zh-cn" href="iframe.html?id=components-dotcom-shell--default&cc=cn&lc=zh" />
-<link rel="alternate" hreflang="zh-tw" href="iframe.html?id=components-dotcom-shell--default&cc=tw&lc=zh" />
+<link
+  rel="alternate"
+  hreflang="en-au"
+  href="iframe.html?id=components-dotcom-shell--default&cc=au&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bd"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bd&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-hk"
+  href="iframe.html?id=components-dotcom-shell--default&cc=hk&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-id"
+  href="iframe.html?id=components-dotcom-shell--default&cc=id&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-in"
+  href="iframe.html?id=components-dotcom-shell--default&cc=in&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-kh"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kh&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-kn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kn&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-lc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=lc&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-lk"
+  href="iframe.html?id=components-dotcom-shell--default&cc=lk&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-my"
+  href="iframe.html?id=components-dotcom-shell--default&cc=my&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-np"
+  href="iframe.html?id=components-dotcom-shell--default&cc=np&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-nz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=nz&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ph"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ph&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sg&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-th"
+  href="iframe.html?id=components-dotcom-shell--default&cc=th&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-vn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=vn&lc=en" />
+<link
+  rel="alternate"
+  hreflang="ja-jp"
+  href="iframe.html?id=components-dotcom-shell--default&cc=jp&lc=ja" />
+<link
+  rel="alternate"
+  hreflang="ko-kr"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kr&lc=ko" />
+<link
+  rel="alternate"
+  hreflang="zh-cn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cn&lc=zh" />
+<link
+  rel="alternate"
+  hreflang="zh-tw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tw&lc=zh" />
 
 <!-- Europe -->
 <!-- <link rel="alternate" hreflang="de-at" href="iframe.html?id=components-dotcom-shell--default&cc=at&lc=de" />
@@ -94,55 +253,206 @@
 <link rel="alternate" hreflang="tr-tr" href="iframe.html?id=components-dotcom-shell--default&cc=tr&lc=tr" /> -->
 
 <!-- Middle East and Africa -->
-<link rel="alternate" hreflang="ar-ae" href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=ar" />
-<link rel="alternate" hreflang="ar-sa" href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=ar" />
-<link rel="alternate" hreflang="en-ae" href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=en" />
-<link rel="alternate" hreflang="en-af" href="iframe.html?id=components-dotcom-shell--default&cc=af&lc=en" />
-<link rel="alternate" hreflang="en-bh" href="iframe.html?id=components-dotcom-shell--default&cc=bh&lc=en" />
-<link rel="alternate" hreflang="en-bn" href="iframe.html?id=components-dotcom-shell--default&cc=bn&lc=en" />
-<link rel="alternate" hreflang="en-bw" href="iframe.html?id=components-dotcom-shell--default&cc=bw&lc=en" />
-<link rel="alternate" hreflang="en-eg" href="iframe.html?id=components-dotcom-shell--default&cc=eg&lc=en" />
-<link rel="alternate" hreflang="en-et" href="iframe.html?id=components-dotcom-shell--default&cc=et&lc=en" />
-<link rel="alternate" hreflang="en-gh" href="iframe.html?id=components-dotcom-shell--default&cc=gh&lc=en" />
-<link rel="alternate" hreflang="en-il" href="iframe.html?id=components-dotcom-shell--default&cc=il&lc=en" />
-<link rel="alternate" hreflang="en-iq" href="iframe.html?id=components-dotcom-shell--default&cc=iq&lc=en" />
-<link rel="alternate" hreflang="en-jo" href="iframe.html?id=components-dotcom-shell--default&cc=jo&lc=en" />
-<link rel="alternate" hreflang="en-ke" href="iframe.html?id=components-dotcom-shell--default&cc=ke&lc=en" />
-<link rel="alternate" hreflang="en-kw" href="iframe.html?id=components-dotcom-shell--default&cc=kw&lc=en" />
-<link rel="alternate" hreflang="en-lb" href="iframe.html?id=components-dotcom-shell--default&cc=lb&lc=en" />
-<link rel="alternate" hreflang="en-ly" href="iframe.html?id=components-dotcom-shell--default&cc=ly&lc=en" />
-<link rel="alternate" hreflang="en-mw" href="iframe.html?id=components-dotcom-shell--default&cc=mw&lc=en" />
-<link rel="alternate" hreflang="en-na" href="iframe.html?id=components-dotcom-shell--default&cc=na&lc=en" />
-<link rel="alternate" hreflang="en-ng" href="iframe.html?id=components-dotcom-shell--default&cc=ng&lc=en" />
-<link rel="alternate" hreflang="en-om" href="iframe.html?id=components-dotcom-shell--default&cc=om&lc=en" />
-<link rel="alternate" hreflang="en-pk" href="iframe.html?id=components-dotcom-shell--default&cc=pk&lc=en" />
-<link rel="alternate" hreflang="en-qa" href="iframe.html?id=components-dotcom-shell--default&cc=qa&lc=en" />
-<link rel="alternate" hreflang="en-sa" href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=en" />
-<link rel="alternate" hreflang="en-sl" href="iframe.html?id=components-dotcom-shell--default&cc=sl&lc=en" />
-<link rel="alternate" hreflang="en-sr" href="iframe.html?id=components-dotcom-shell--default&cc=sr&lc=en" />
-<link rel="alternate" hreflang="en-tz" href="iframe.html?id=components-dotcom-shell--default&cc=tz&lc=en" />
-<link rel="alternate" hreflang="en-ug" href="iframe.html?id=components-dotcom-shell--default&cc=ug&lc=en" />
-<link rel="alternate" hreflang="en-ye" href="iframe.html?id=components-dotcom-shell--default&cc=ye&lc=en" />
-<link rel="alternate" hreflang="en-za" href="iframe.html?id=components-dotcom-shell--default&cc=za&lc=en" />
-<link rel="alternate" hreflang="en-zm" href="iframe.html?id=components-dotcom-shell--default&cc=zm&lc=en" />
-<link rel="alternate" hreflang="en-zw" href="iframe.html?id=components-dotcom-shell--default&cc=zw&lc=en" />
-<link rel="alternate" hreflang="fr-bf" href="iframe.html?id=components-dotcom-shell--default&cc=bf&lc=fr" />
-<link rel="alternate" hreflang="fr-cd" href="iframe.html?id=components-dotcom-shell--default&cc=cd&lc=fr" />
-<link rel="alternate" hreflang="fr-cg" href="iframe.html?id=components-dotcom-shell--default&cc=cg&lc=fr" />
-<link rel="alternate" hreflang="fr-ci" href="iframe.html?id=components-dotcom-shell--default&cc=ci&lc=fr" />
-<link rel="alternate" hreflang="fr-cm" href="iframe.html?id=components-dotcom-shell--default&cc=cm&lc=fr" />
-<link rel="alternate" hreflang="fr-dz" href="iframe.html?id=components-dotcom-shell--default&cc=dz&lc=fr" />
-<link rel="alternate" hreflang="fr-ga" href="iframe.html?id=components-dotcom-shell--default&cc=ga&lc=fr" />
-<link rel="alternate" hreflang="fr-ma" href="iframe.html?id=components-dotcom-shell--default&cc=ma&lc=fr" />
-<link rel="alternate" hreflang="fr-mg" href="iframe.html?id=components-dotcom-shell--default&cc=mg&lc=fr" />
-<link rel="alternate" hreflang="fr-mu" href="iframe.html?id=components-dotcom-shell--default&cc=mu&lc=fr" />
-<link rel="alternate" hreflang="fr-ne" href="iframe.html?id=components-dotcom-shell--default&cc=ne&lc=fr" />
-<link rel="alternate" hreflang="fr-sc" href="iframe.html?id=components-dotcom-shell--default&cc=sc&lc=fr" />
-<link rel="alternate" hreflang="fr-sn" href="iframe.html?id=components-dotcom-shell--default&cc=sn&lc=fr" />
-<link rel="alternate" hreflang="fr-td" href="iframe.html?id=components-dotcom-shell--default&cc=td&lc=fr" />
-<link rel="alternate" hreflang="fr-tn" href="iframe.html?id=components-dotcom-shell--default&cc=tn&lc=fr" />
-<link rel="alternate" hreflang="pt-ao" href="iframe.html?id=components-dotcom-shell--default&cc=ao&lc=pt" />
-<link rel="alternate" hreflang="pt-mz" href="iframe.html?id=components-dotcom-shell--default&cc=mz&lc=pt" />
+<link
+  rel="alternate"
+  hreflang="ar-ae"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=ar" />
+<link
+  rel="alternate"
+  hreflang="ar-sa"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=ar" />
+<link
+  rel="alternate"
+  hreflang="en-ae"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-af"
+  href="iframe.html?id=components-dotcom-shell--default&cc=af&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bh"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bh&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bn&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-eg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=eg&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-et"
+  href="iframe.html?id=components-dotcom-shell--default&cc=et&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-gh"
+  href="iframe.html?id=components-dotcom-shell--default&cc=gh&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-il"
+  href="iframe.html?id=components-dotcom-shell--default&cc=il&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-iq"
+  href="iframe.html?id=components-dotcom-shell--default&cc=iq&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-jo"
+  href="iframe.html?id=components-dotcom-shell--default&cc=jo&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ke"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ke&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-kw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-lb"
+  href="iframe.html?id=components-dotcom-shell--default&cc=lb&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ly"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ly&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-mw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-na"
+  href="iframe.html?id=components-dotcom-shell--default&cc=na&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ng"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ng&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-om"
+  href="iframe.html?id=components-dotcom-shell--default&cc=om&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-pk"
+  href="iframe.html?id=components-dotcom-shell--default&cc=pk&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-qa"
+  href="iframe.html?id=components-dotcom-shell--default&cc=qa&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sa"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sl"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sl&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sr"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sr&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-tz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tz&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ug"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ug&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ye"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ye&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-za"
+  href="iframe.html?id=components-dotcom-shell--default&cc=za&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-zm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=zm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-zw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=zw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="fr-bf"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bf&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-cd"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cd&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-cg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cg&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ci"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ci&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-cm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cm&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-dz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=dz&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ga"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ga&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ma"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ma&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-mg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mg&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-mu"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mu&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ne"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ne&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-sc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sc&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-sn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sn&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-td"
+  href="iframe.html?id=components-dotcom-shell--default&cc=td&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-tn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tn&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="pt-ao"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ao&lc=pt" />
+<link
+  rel="alternate"
+  hreflang="pt-mz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mz&lc=pt" />
+
+<link
+  rel="stylesheet"
+  href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
 
 <script>
   window.digitalData = window.digitalData || {
@@ -192,16 +502,16 @@
 
 <style>
   @media only percy {
-    [data-autoid='dds--privacy-cp'] {
+    [data-autoid='cds--privacy-cp'] {
       display: none !important;
     }
 
-    dds-video-player-container,
-    dds-callout-with-media-video {
+    cds-video-player-container,
+    cds-callout-with-media-video {
       display: none !important;
     }
 
-    .dds-ce-demo-devenv--ui-shell-content {
+    .cds-ce-demo-devenv--ui-shell-content {
       display: none !important;
     }
   }
diff --git a/packages/web-components/.storybook/preview.ts b/packages/web-components/.storybook/preview.ts
index c6d5610aa4a..fdd800fee49 100644
--- a/packages/web-components/.storybook/preview.ts
+++ b/packages/web-components/.storybook/preview.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-html'; // eslint-disable-line import/first
-import { classMap } from 'lit-html/directives/class-map';
+import { html } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
 import coreEvents from '@storybook/core-events';
 import addons from '@storybook/addons';
 
@@ -58,15 +58,15 @@ export const decorators = [
     const result = story();
     const { hasStoryPadding } = parameters;
     const classes = classMap({
-      'dds-story-padding': hasStoryPadding,
+      'c4d-story-padding': hasStoryPadding,
     });
 
     return html`
       <style>
         ${containerStyles}
       </style>
-      <bx-skip-to-content href="#main-content"
-        >Skip to main content</bx-skip-to-content
+      <cds-skip-to-content href="#main-content"
+        >Skip to main content</cds-skip-to-content
       >
       <div
         id="main-content"
diff --git a/packages/web-components/.storybook/react/container.scss b/packages/web-components/.storybook/react/container.scss
index 2ba3ccb545a..6ae9862ffe6 100644
--- a/packages/web-components/.storybook/react/container.scss
+++ b/packages/web-components/.storybook/react/container.scss
@@ -7,5 +7,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/styles';
-@import '../container.scss';
+@use '../container';
diff --git a/packages/web-components/.storybook/react/preview-head.html b/packages/web-components/.storybook/react/preview-head.html
index 52d00829e45..182d15a39ef 100644
--- a/packages/web-components/.storybook/react/preview-head.html
+++ b/packages/web-components/.storybook/react/preview-head.html
@@ -1,59 +1,218 @@
 <!-- Americas -->
-<link rel="alternate" hreflang="en-ag" href="iframe.html?id=components-dotcom-shell--default&cc=ag&lc=en" />
-<link rel="alternate" hreflang="en-ai" href="iframe.html?id=components-dotcom-shell--default&cc=ai&lc=en" />
-<link rel="alternate" hreflang="en-aw" href="iframe.html?id=components-dotcom-shell--default&cc=aw&lc=en" />
-<link rel="alternate" hreflang="en-bb" href="iframe.html?id=components-dotcom-shell--default&cc=bb&lc=en" />
-<link rel="alternate" hreflang="en-bm" href="iframe.html?id=components-dotcom-shell--default&cc=bm&lc=en" />
-<link rel="alternate" hreflang="en-bs" href="iframe.html?id=components-dotcom-shell--default&cc=bs&lc=en" />
-<link rel="alternate" hreflang="en-ca" href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=en" />
-<link rel="alternate" hreflang="en-cw" href="iframe.html?id=components-dotcom-shell--default&cc=cw&lc=en" />
-<link rel="alternate" hreflang="en-dm" href="iframe.html?id=components-dotcom-shell--default&cc=dm&lc=en" />
-<link rel="alternate" hreflang="en-gd" href="iframe.html?id=components-dotcom-shell--default&cc=gd&lc=en" />
-<link rel="alternate" hreflang="en-gy" href="iframe.html?id=components-dotcom-shell--default&cc=gy&lc=en" />
-<link rel="alternate" hreflang="en-jm" href="iframe.html?id=components-dotcom-shell--default&cc=jm&lc=en" />
-<link rel="alternate" hreflang="en-ky" href="iframe.html?id=components-dotcom-shell--default&cc=ky&lc=en" />
-<link rel="alternate" hreflang="en-ms" href="iframe.html?id=components-dotcom-shell--default&cc=ms&lc=en" />
-<link rel="alternate" hreflang="en-tc" href="iframe.html?id=components-dotcom-shell--default&cc=tc&lc=en" />
-<link rel="alternate" hreflang="en-tt" href="iframe.html?id=components-dotcom-shell--default&cc=tt&lc=en" />
-<link rel="alternate" hreflang="en-us" href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
-<link rel="alternate" hreflang="en-vc" href="iframe.html?id=components-dotcom-shell--default&cc=vc&lc=en" />
-<link rel="alternate" hreflang="en-vg" href="iframe.html?id=components-dotcom-shell--default&cc=vg&lc=en" />
-<link rel="alternate" hreflang="es-ar" href="iframe.html?id=components-dotcom-shell--default&cc=ar&lc=es" />
-<link rel="alternate" hreflang="es-bo" href="iframe.html?id=components-dotcom-shell--default&cc=bo&lc=es" />
-<link rel="alternate" hreflang="es-cl" href="iframe.html?id=components-dotcom-shell--default&cc=cl&lc=es" />
-<link rel="alternate" hreflang="es-co" href="iframe.html?id=components-dotcom-shell--default&cc=co&lc=es" />
-<link rel="alternate" hreflang="es-cr" href="iframe.html?id=components-dotcom-shell--default&cc=cr&lc=es" />
-<link rel="alternate" hreflang="es-ec" href="iframe.html?id=components-dotcom-shell--default&cc=ec&lc=es" />
-<link rel="alternate" hreflang="es-mx" href="iframe.html?id=components-dotcom-shell--default&cc=mx&lc=es" />
-<link rel="alternate" hreflang="es-pe" href="iframe.html?id=components-dotcom-shell--default&cc=pe&lc=es" />
-<link rel="alternate" hreflang="es-py" href="iframe.html?id=components-dotcom-shell--default&cc=py&lc=es" />
-<link rel="alternate" hreflang="es-uy" href="iframe.html?id=components-dotcom-shell--default&cc=uy&lc=es" />
-<link rel="alternate" hreflang="es-ve" href="iframe.html?id=components-dotcom-shell--default&cc=ve&lc=es" />
-<link rel="alternate" hreflang="fr-ca" href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=fr" />
-<link rel="alternate" hreflang="pt-br" href="iframe.html?id=components-dotcom-shell--default&cc=br&lc=pt" />
-<link rel="alternate" hreflang="x-defult" href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ag"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ag&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ai"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ai&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-aw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=aw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bb"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bb&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bs"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bs&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ca"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-cw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-dm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=dm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-gd"
+  href="iframe.html?id=components-dotcom-shell--default&cc=gd&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-gy"
+  href="iframe.html?id=components-dotcom-shell--default&cc=gy&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-jm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=jm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ky"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ky&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ms"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ms&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-tc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tc&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-tt"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tt&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-us"
+  href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-vc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=vc&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-vg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=vg&lc=en" />
+<link
+  rel="alternate"
+  hreflang="es-ar"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ar&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-bo"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bo&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-cl"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cl&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-co"
+  href="iframe.html?id=components-dotcom-shell--default&cc=co&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-cr"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cr&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-ec"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ec&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-mx"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mx&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-pe"
+  href="iframe.html?id=components-dotcom-shell--default&cc=pe&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-py"
+  href="iframe.html?id=components-dotcom-shell--default&cc=py&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-uy"
+  href="iframe.html?id=components-dotcom-shell--default&cc=uy&lc=es" />
+<link
+  rel="alternate"
+  hreflang="es-ve"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ve&lc=es" />
+<link
+  rel="alternate"
+  hreflang="fr-ca"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ca&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="pt-br"
+  href="iframe.html?id=components-dotcom-shell--default&cc=br&lc=pt" />
+<link
+  rel="alternate"
+  hreflang="x-defult"
+  href="iframe.html?id=components-dotcom-shell--default&cc=us&lc=en" />
 
 <!-- Asia Pacific -->
-<link rel="alternate" hreflang="en-au" href="iframe.html?id=components-dotcom-shell--default&cc=au&lc=en" />
-<link rel="alternate" hreflang="en-bd" href="iframe.html?id=components-dotcom-shell--default&cc=bd&lc=en" />
-<link rel="alternate" hreflang="en-hk" href="iframe.html?id=components-dotcom-shell--default&cc=hk&lc=en" />
-<link rel="alternate" hreflang="en-id" href="iframe.html?id=components-dotcom-shell--default&cc=id&lc=en" />
-<link rel="alternate" hreflang="en-in" href="iframe.html?id=components-dotcom-shell--default&cc=in&lc=en" />
-<link rel="alternate" hreflang="en-kh" href="iframe.html?id=components-dotcom-shell--default&cc=kh&lc=en" />
-<link rel="alternate" hreflang="en-kn" href="iframe.html?id=components-dotcom-shell--default&cc=kn&lc=en" />
-<link rel="alternate" hreflang="en-lc" href="iframe.html?id=components-dotcom-shell--default&cc=lc&lc=en" />
-<link rel="alternate" hreflang="en-lk" href="iframe.html?id=components-dotcom-shell--default&cc=lk&lc=en" />
-<link rel="alternate" hreflang="en-my" href="iframe.html?id=components-dotcom-shell--default&cc=my&lc=en" />
-<link rel="alternate" hreflang="en-np" href="iframe.html?id=components-dotcom-shell--default&cc=np&lc=en" />
-<link rel="alternate" hreflang="en-nz" href="iframe.html?id=components-dotcom-shell--default&cc=nz&lc=en" />
-<link rel="alternate" hreflang="en-ph" href="iframe.html?id=components-dotcom-shell--default&cc=ph&lc=en" />
-<link rel="alternate" hreflang="en-sg" href="iframe.html?id=components-dotcom-shell--default&cc=sg&lc=en" />
-<link rel="alternate" hreflang="en-th" href="iframe.html?id=components-dotcom-shell--default&cc=th&lc=en" />
-<link rel="alternate" hreflang="en-vn" href="iframe.html?id=components-dotcom-shell--default&cc=vn&lc=en" />
-<link rel="alternate" hreflang="ja-jp" href="iframe.html?id=components-dotcom-shell--default&cc=jp&lc=ja" />
-<link rel="alternate" hreflang="ko-kr" href="iframe.html?id=components-dotcom-shell--default&cc=kr&lc=ko" />
-<link rel="alternate" hreflang="zh-cn" href="iframe.html?id=components-dotcom-shell--default&cc=cn&lc=zh" />
-<link rel="alternate" hreflang="zh-tw" href="iframe.html?id=components-dotcom-shell--default&cc=tw&lc=zh" />
+<link
+  rel="alternate"
+  hreflang="en-au"
+  href="iframe.html?id=components-dotcom-shell--default&cc=au&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bd"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bd&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-hk"
+  href="iframe.html?id=components-dotcom-shell--default&cc=hk&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-id"
+  href="iframe.html?id=components-dotcom-shell--default&cc=id&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-in"
+  href="iframe.html?id=components-dotcom-shell--default&cc=in&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-kh"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kh&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-kn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kn&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-lc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=lc&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-lk"
+  href="iframe.html?id=components-dotcom-shell--default&cc=lk&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-my"
+  href="iframe.html?id=components-dotcom-shell--default&cc=my&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-np"
+  href="iframe.html?id=components-dotcom-shell--default&cc=np&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-nz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=nz&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ph"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ph&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sg&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-th"
+  href="iframe.html?id=components-dotcom-shell--default&cc=th&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-vn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=vn&lc=en" />
+<link
+  rel="alternate"
+  hreflang="ja-jp"
+  href="iframe.html?id=components-dotcom-shell--default&cc=jp&lc=ja" />
+<link
+  rel="alternate"
+  hreflang="ko-kr"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kr&lc=ko" />
+<link
+  rel="alternate"
+  hreflang="zh-cn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cn&lc=zh" />
+<link
+  rel="alternate"
+  hreflang="zh-tw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tw&lc=zh" />
 
 <!-- Europe -->
 <!-- <link rel="alternate" hreflang="de-at" href="iframe.html?id=components-dotcom-shell--default&cc=at&lc=de" />
@@ -94,55 +253,206 @@
 <link rel="alternate" hreflang="tr-tr" href="iframe.html?id=components-dotcom-shell--default&cc=tr&lc=tr" /> -->
 
 <!-- Middle East and Africa -->
-<link rel="alternate" hreflang="ar-ae" href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=ar" />
-<link rel="alternate" hreflang="ar-sa" href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=ar" />
-<link rel="alternate" hreflang="en-ae" href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=en" />
-<link rel="alternate" hreflang="en-af" href="iframe.html?id=components-dotcom-shell--default&cc=af&lc=en" />
-<link rel="alternate" hreflang="en-bh" href="iframe.html?id=components-dotcom-shell--default&cc=bh&lc=en" />
-<link rel="alternate" hreflang="en-bn" href="iframe.html?id=components-dotcom-shell--default&cc=bn&lc=en" />
-<link rel="alternate" hreflang="en-bw" href="iframe.html?id=components-dotcom-shell--default&cc=bw&lc=en" />
-<link rel="alternate" hreflang="en-eg" href="iframe.html?id=components-dotcom-shell--default&cc=eg&lc=en" />
-<link rel="alternate" hreflang="en-et" href="iframe.html?id=components-dotcom-shell--default&cc=et&lc=en" />
-<link rel="alternate" hreflang="en-gh" href="iframe.html?id=components-dotcom-shell--default&cc=gh&lc=en" />
-<link rel="alternate" hreflang="en-il" href="iframe.html?id=components-dotcom-shell--default&cc=il&lc=en" />
-<link rel="alternate" hreflang="en-iq" href="iframe.html?id=components-dotcom-shell--default&cc=iq&lc=en" />
-<link rel="alternate" hreflang="en-jo" href="iframe.html?id=components-dotcom-shell--default&cc=jo&lc=en" />
-<link rel="alternate" hreflang="en-ke" href="iframe.html?id=components-dotcom-shell--default&cc=ke&lc=en" />
-<link rel="alternate" hreflang="en-kw" href="iframe.html?id=components-dotcom-shell--default&cc=kw&lc=en" />
-<link rel="alternate" hreflang="en-lb" href="iframe.html?id=components-dotcom-shell--default&cc=lb&lc=en" />
-<link rel="alternate" hreflang="en-ly" href="iframe.html?id=components-dotcom-shell--default&cc=ly&lc=en" />
-<link rel="alternate" hreflang="en-mw" href="iframe.html?id=components-dotcom-shell--default&cc=mw&lc=en" />
-<link rel="alternate" hreflang="en-na" href="iframe.html?id=components-dotcom-shell--default&cc=na&lc=en" />
-<link rel="alternate" hreflang="en-ng" href="iframe.html?id=components-dotcom-shell--default&cc=ng&lc=en" />
-<link rel="alternate" hreflang="en-om" href="iframe.html?id=components-dotcom-shell--default&cc=om&lc=en" />
-<link rel="alternate" hreflang="en-pk" href="iframe.html?id=components-dotcom-shell--default&cc=pk&lc=en" />
-<link rel="alternate" hreflang="en-qa" href="iframe.html?id=components-dotcom-shell--default&cc=qa&lc=en" />
-<link rel="alternate" hreflang="en-sa" href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=en" />
-<link rel="alternate" hreflang="en-sl" href="iframe.html?id=components-dotcom-shell--default&cc=sl&lc=en" />
-<link rel="alternate" hreflang="en-sr" href="iframe.html?id=components-dotcom-shell--default&cc=sr&lc=en" />
-<link rel="alternate" hreflang="en-tz" href="iframe.html?id=components-dotcom-shell--default&cc=tz&lc=en" />
-<link rel="alternate" hreflang="en-ug" href="iframe.html?id=components-dotcom-shell--default&cc=ug&lc=en" />
-<link rel="alternate" hreflang="en-ye" href="iframe.html?id=components-dotcom-shell--default&cc=ye&lc=en" />
-<link rel="alternate" hreflang="en-za" href="iframe.html?id=components-dotcom-shell--default&cc=za&lc=en" />
-<link rel="alternate" hreflang="en-zm" href="iframe.html?id=components-dotcom-shell--default&cc=zm&lc=en" />
-<link rel="alternate" hreflang="en-zw" href="iframe.html?id=components-dotcom-shell--default&cc=zw&lc=en" />
-<link rel="alternate" hreflang="fr-bf" href="iframe.html?id=components-dotcom-shell--default&cc=bf&lc=fr" />
-<link rel="alternate" hreflang="fr-cd" href="iframe.html?id=components-dotcom-shell--default&cc=cd&lc=fr" />
-<link rel="alternate" hreflang="fr-cg" href="iframe.html?id=components-dotcom-shell--default&cc=cg&lc=fr" />
-<link rel="alternate" hreflang="fr-ci" href="iframe.html?id=components-dotcom-shell--default&cc=ci&lc=fr" />
-<link rel="alternate" hreflang="fr-cm" href="iframe.html?id=components-dotcom-shell--default&cc=cm&lc=fr" />
-<link rel="alternate" hreflang="fr-dz" href="iframe.html?id=components-dotcom-shell--default&cc=dz&lc=fr" />
-<link rel="alternate" hreflang="fr-ga" href="iframe.html?id=components-dotcom-shell--default&cc=ga&lc=fr" />
-<link rel="alternate" hreflang="fr-ma" href="iframe.html?id=components-dotcom-shell--default&cc=ma&lc=fr" />
-<link rel="alternate" hreflang="fr-mg" href="iframe.html?id=components-dotcom-shell--default&cc=mg&lc=fr" />
-<link rel="alternate" hreflang="fr-mu" href="iframe.html?id=components-dotcom-shell--default&cc=mu&lc=fr" />
-<link rel="alternate" hreflang="fr-ne" href="iframe.html?id=components-dotcom-shell--default&cc=ne&lc=fr" />
-<link rel="alternate" hreflang="fr-sc" href="iframe.html?id=components-dotcom-shell--default&cc=sc&lc=fr" />
-<link rel="alternate" hreflang="fr-sn" href="iframe.html?id=components-dotcom-shell--default&cc=sn&lc=fr" />
-<link rel="alternate" hreflang="fr-td" href="iframe.html?id=components-dotcom-shell--default&cc=td&lc=fr" />
-<link rel="alternate" hreflang="fr-tn" href="iframe.html?id=components-dotcom-shell--default&cc=tn&lc=fr" />
-<link rel="alternate" hreflang="pt-ao" href="iframe.html?id=components-dotcom-shell--default&cc=ao&lc=pt" />
-<link rel="alternate" hreflang="pt-mz" href="iframe.html?id=components-dotcom-shell--default&cc=mz&lc=pt" />
+<link
+  rel="alternate"
+  hreflang="ar-ae"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=ar" />
+<link
+  rel="alternate"
+  hreflang="ar-sa"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=ar" />
+<link
+  rel="alternate"
+  hreflang="en-ae"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ae&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-af"
+  href="iframe.html?id=components-dotcom-shell--default&cc=af&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bh"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bh&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bn&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-bw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-eg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=eg&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-et"
+  href="iframe.html?id=components-dotcom-shell--default&cc=et&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-gh"
+  href="iframe.html?id=components-dotcom-shell--default&cc=gh&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-il"
+  href="iframe.html?id=components-dotcom-shell--default&cc=il&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-iq"
+  href="iframe.html?id=components-dotcom-shell--default&cc=iq&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-jo"
+  href="iframe.html?id=components-dotcom-shell--default&cc=jo&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ke"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ke&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-kw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=kw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-lb"
+  href="iframe.html?id=components-dotcom-shell--default&cc=lb&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ly"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ly&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-mw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-na"
+  href="iframe.html?id=components-dotcom-shell--default&cc=na&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ng"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ng&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-om"
+  href="iframe.html?id=components-dotcom-shell--default&cc=om&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-pk"
+  href="iframe.html?id=components-dotcom-shell--default&cc=pk&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-qa"
+  href="iframe.html?id=components-dotcom-shell--default&cc=qa&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sa"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sa&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sl"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sl&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-sr"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sr&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-tz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tz&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ug"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ug&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-ye"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ye&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-za"
+  href="iframe.html?id=components-dotcom-shell--default&cc=za&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-zm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=zm&lc=en" />
+<link
+  rel="alternate"
+  hreflang="en-zw"
+  href="iframe.html?id=components-dotcom-shell--default&cc=zw&lc=en" />
+<link
+  rel="alternate"
+  hreflang="fr-bf"
+  href="iframe.html?id=components-dotcom-shell--default&cc=bf&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-cd"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cd&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-cg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cg&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ci"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ci&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-cm"
+  href="iframe.html?id=components-dotcom-shell--default&cc=cm&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-dz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=dz&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ga"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ga&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ma"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ma&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-mg"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mg&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-mu"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mu&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-ne"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ne&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-sc"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sc&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-sn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=sn&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-td"
+  href="iframe.html?id=components-dotcom-shell--default&cc=td&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="fr-tn"
+  href="iframe.html?id=components-dotcom-shell--default&cc=tn&lc=fr" />
+<link
+  rel="alternate"
+  hreflang="pt-ao"
+  href="iframe.html?id=components-dotcom-shell--default&cc=ao&lc=pt" />
+<link
+  rel="alternate"
+  hreflang="pt-mz"
+  href="iframe.html?id=components-dotcom-shell--default&cc=mz&lc=pt" />
+
+<link
+  rel="stylesheet"
+  href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
 
 <script>
   window.digitalData = window.digitalData || {
@@ -192,16 +502,16 @@
 
 <style>
   @media only percy {
-    [data-autoid='dds--privacy-cp'] {
+    [data-autoid='cds--privacy-cp'] {
       display: none !important;
     }
 
-    dds-video-player-container,
-    dds-callout-with-media-video {
+    cds-video-player-container,
+    cds-callout-with-media-video {
       display: none !important;
     }
 
-    .dds-ce-demo-devenv--ui-shell-content {
+    .cds-ce-demo-devenv--ui-shell-content {
       display: none !important;
     }
   }
diff --git a/packages/web-components/.storybook/react/preview.tsx b/packages/web-components/.storybook/react/preview.tsx
index 197776910a8..bf3ac4f9b4a 100644
--- a/packages/web-components/.storybook/react/preview.tsx
+++ b/packages/web-components/.storybook/react/preview.tsx
@@ -12,7 +12,8 @@ import React, { StrictMode } from 'react';
 import coreEvents from '@storybook/core-events';
 import addons from '@storybook/addons';
 import { withKnobs } from '@storybook/addon-knobs';
-import BXSkipToContent from '../../src/internal/vendor/@carbon/web-components/components-react/skip-to-content/skip-to-content';
+import CDSSkipToContent from '../../src/internal/vendor/@carbon/web-components/components-react/skip-to-content/skip-to-content.js';
+
 import { CURRENT_THEME } from '@carbon/storybook-addon-theme/es/shared';
 import containerStyles from './container.scss'; // eslint-disable-line import/first
 
@@ -50,14 +51,14 @@ export const decorators = [
     const result = story();
     const { hasStoryPadding } = parameters;
     const classes = cx({
-      'dds-story-padding': hasStoryPadding,
+      'cds-story-padding': hasStoryPadding,
     });
     return (
       <StrictMode>
         <style>{containerStyles.cssText}</style>
-        <BXSkipToContent href="#main-content">
+        <CDSSkipToContent href="#main-content">
           Skip to main content
-        </BXSkipToContent>
+        </CDSSkipToContent>
         <div
           id="main-content"
           data-floating-menu-container
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/CHANGELOG.md
index 6d08df268a8..89b21628bff 100644
--- a/packages/web-components/CHANGELOG.md
+++ b/packages/web-components/CHANGELOG.md
@@ -3,7 +3,11 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+<<<<<<< HEAD
 # [1.38.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@1.38.0-rc.2...@carbon/ibmdotcom-web-components@1.38.0) (2023-11-15)
+=======
+# [2.0.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.0.0-rc.1...@carbon/ibmdotcom-web-components@2.0.0-rc.2) (2023-11-30)
+>>>>>>> 73a006506d4343b2ed5f31da826aeb9e9f7139bd
 
 **Note:** Version bump only for package @carbon/ibmdotcom-web-components
 
@@ -11,11 +15,24 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 
 
+<<<<<<< HEAD
 # [1.38.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@1.38.0-rc.1...@carbon/ibmdotcom-web-components@1.38.0-rc.2) (2023-11-06)
+=======
+# [2.0.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@2.0.0-rc.0...@carbon/ibmdotcom-web-components@2.0.0-rc.1) (2023-11-28)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-web-components
+
+
+
+
+
+# [2.0.0-rc.0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/ibmdotcom-web-components@1.36.0-rc.0...@carbon/ibmdotcom-web-components@2.0.0-rc.0) (2023-11-20)
+>>>>>>> 73a006506d4343b2ed5f31da826aeb9e9f7139bd
 
 
 ### Bug Fixes
 
+<<<<<<< HEAD
 * **link-with-icon:** remove property set-by-enum ([#11092](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11092)) ([885ed65](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/885ed656ff6f0dcf58ebcd684e0b6c6c8878d247))
 
 
@@ -35,11 +52,86 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **quote:** make quote-link-with-icon available in quote cdn bundle ([#11020](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11020)) ([8e6b754](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8e6b754ee49aaf8c4704ed6ff34da155a26a8f21))
 * **ui-shell:** a11y issue with side nav item ([#11044](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11044)) ([9eb94ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9eb94ea097dcf9610a72900468008373cfec3bbe)), closes [#10918](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10918)
 * **video-player:** move updateThumbnailUrl callback after updateComplete ([#11067](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11067)) ([b9445ec](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b9445eccfc896d261f310bba57a0aafe6b6c8dcd)), closes [#7914](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/7914) [/github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/video-player/video-player-composite.ts#L230-L234](https://github.com//github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/video-player/video-player-composite.ts/issues/L230-L234)
+=======
+* **card:** heading/copy spacing ([#11018](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11018)) ([97c1418](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97c1418060baee3e65300b591d649825a97d151e))
+* **carousel:** update v2 styles and fix broken video cards ([#11006](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11006)) ([e34be4c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/e34be4cf0d8499001191c1826b446bdef8431830))
+* **components:** format ([b6f5ec0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b6f5ec0bae2f583daa6e61e9f0bdedc92bf8be6a))
+* **dependencies:** core carbon updates ([8d9555b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/8d9555bf1049938653ee405e27ca2a5fbf284cda))
+* **footer:** adress comments ([7a80cae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7a80caec4235f9efaaa91047ce766f25dc46c630))
+* **footer:** cleanup ([c3048ea](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c3048ea07851c7693396681263c05eb23eb60155))
+* **footer:** legal spacing/border ([6625117](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/66251179acdbbadfc08565c601e4b86ffa34972d))
+* **footer:** locale click function ([7e2453e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7e2453ee7e2dc55d7b635eadf8c470952dc917d6))
+* **footer:** prefixes ([41103be](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/41103be9b69b0d435ea3c6b6db712dd54f44e74a))
+* **footer:** try to use new locale changes ([000202b](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/000202bc924d3934d1503a8065d15bacf24d2fbf))
+* **in-page-banner:** updating codesandbox examples ([#11029](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11029)) ([0a79b0f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0a79b0f8071b5cf67dd220235b8564641f0ddd01))
+* **leadspace-block:** video ([bf3361e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/bf3361ebfa0fdaabb9b9ec849c5ffce6f63a52aa))
+* **masthead:** left nav click out ([#10019](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10019)) ([6f2688f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6f2688f75a3d3531fd11841604fdfe138ea51d47)), closes [#9951](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9951)
+* **masthead:** left nav focuswrap ([#10171](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10171)) ([1a26cd6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1a26cd67e4c88e5070c7943abe53c4501dba4b2d)), closes [#10026](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10026)
+* **Masthead:** Search field does not display auto suggest results ([#10795](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10795)) ([db17bd9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/db17bd96947ee28049b7ca542bf6c7a274b63404)), closes [#10741](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10741)
+* **prefix:** change styles prefix to `c4d` ([#10912](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10912)) ([7ffeabb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7ffeabbff4817591416f8c5de3281d84e089928c))
+* **skip-to-content:** v2 storybook ([#10796](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10796)) ([acfd302](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/acfd302d5297cac990d8a1cff1e4c25c8bda8c49))
+* **storybook:** react wrapper ([#10811](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10811)) ([ed604cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ed604cdbcfffdadf0cc57106efa46dd0b60352f7))
+* **styles:** update var interpolation causing warnings ([#11003](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11003)) ([1239c87](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1239c8789e34fbfccfc054328c00768c8ce35908))
+* **tabs-extended:** deprecate orientation prop ([#10762](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10762)) ([3d67309](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3d673090e87c9e6d55f1ab6054c97c550855cbca))
+* **web-component:** storybook grid ([#10801](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10801)) ([b94a2a9](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/b94a2a955fa79e4a13c01e5f91793c7bde0d620d))
+>>>>>>> 73a006506d4343b2ed5f31da826aeb9e9f7139bd
 
 
 ### Features
 
+<<<<<<< HEAD
 * **locale-modal:** only render modal when its called by user click ([#10892](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10892)) ([317d2be](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/317d2bee88f8a704a56a4e10492a936fd29bdfe4)), closes [#10657](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10657)
+=======
+* **background-media:** move styles to styles package ([fbda54d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/fbda54d5415ce249d0f3c8f722cf0023909ef433))
+* **button-group:** update to v2 ([#10904](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10904)) ([0d510cd](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0d510cdf190b631612dc5ec62687644f3da04549))
+* **callout-with-media:** v2 styles updates ([#10939](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10939)) ([facbd3e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/facbd3ead8cab338a0c2ded61e3039becbab6e0e))
+* **callout:** update quote and media with new tokens ([#10895](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10895)) ([813474d](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/813474d02f43b3cffa1a7c976a8c4afbc4147a8e))
+* **card - pictogram:** card pictogram v2 style changes ([#10930](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10930)) ([90ee979](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/90ee979d87236468ba94cd721303e4730fd47392))
+* **card-group/card-section-offset:** v2 updates ([#11043](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11043)) ([45a8eb4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/45a8eb4ac1d76c66bed93280b9cddb98041b4ed5))
+* **card-in-card:** v2 updates ([#10996](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10996)) ([a98e2f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a98e2f7bb4f0fdf44080af50828c864bff0309d5))
+* **card-link:** update v2 ([#10953](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10953)) ([4d1ee6e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/4d1ee6e55e90e1ae842022548450c4d063476e3b))
+* **card-static:** update v2 styles ([#10944](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10944)) ([de094c0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/de094c0914c07af2038e0c248d208546283ed58e))
+* **card:** v2 card style updates ([#10903](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10903)) ([cd84259](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/cd8425991d16f1598af8a4eb6f84669d1bc82d28))
+* **content-block:** make content-block an internal component ([#11019](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11019)) ([33dc7a3](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/33dc7a36ff05a6ac43fe9e13c44ff46d088de8cf))
+* **content-group:** v2 style updates ([#11007](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11007)) ([94e9d94](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/94e9d9441283bef64c8a39dca058e67e6bf97bef))
+* **content-item-row:** v2 ([#11004](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11004)) ([010c8eb](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/010c8eb6a765498838243ba615217dd1feb42dee))
+* **content-item:** v2 updates ([#11068](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11068)) ([0ddc051](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0ddc05108b270b9a8dffb027ec2d6d639bb5fa38))
+* **cta:** deprecate cta and migrate features to base components ([#10873](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10873)) ([f3417e2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f3417e2e24e9f0d3bac5bbbafc2c5d189ff2555b))
+* **dotcom-shell:** update to v2 ([#11082](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11082)) ([9c97fcf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9c97fcf6265f5317ea12e28e9f09bf5e9c436405))
+* **dropdown/combo-box:** syncing dropdown and combo-box to v11 ([#10343](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10343)) ([352298a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/352298a5bc0ab871ca45b539bfadac17a880d298))
+* **expressive-modal/lightbox-media-viewer:** update expressive modal v2 ([#11052](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11052)) ([f608eae](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f608eaecc656f3ce684d28ab144fc68ca3356d5f))
+* **feature-card:** enable color scheme selection ([#10744](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10744)) ([c7e5a1f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c7e5a1f1b95a9fc9e497c08fced92ab9d948d443))
+* **feature-section:** update to v2 ([#10959](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10959)) ([2517dab](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2517dabc7f2d04dba86f31a57c98620fc73ba1a1))
+* **filter-panel:** v2 updates ([#10974](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10974)) ([098c67c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/098c67c868f2e28c1f284c0ae681aac6d8de3b2d))
+* **footer:** v2 footer styles ([#10938](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10938)) ([5519067](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/55190674318a227639c80d7cf2bf7b1a7b170c37))
+* **footer:** v2 layout updates ([4802032](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/480203264bcb0a3c2e8ccc4afbfa07b0679c2f26))
+* **global-banner:** v2 ([#10997](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10997)) ([97fda38](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/97fda38cf57bf02a9687ca6ecc1d0642c79304f8))
+* **image:** v2 updates ([#10810](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10810)) ([7627a86](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/7627a86b1d5eef7a5365351e698ec65d9650ecc7))
+* **in-page-banner:** rename content-group-banner to in-page-banner ([#10999](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10999)) ([5d178cf](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/5d178cfe91ae51cd56bb4c8702f7315be90c4fe1))
+* **leadspace-block:** v2 update ([#11027](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11027)) ([585ec03](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/585ec0314e3a861adb535db0859e411a1ee91760))
+* **leadspace-with-search:** update to v2 ([#10961](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10961)) ([c0031ee](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c0031ee462fe5b2f84ef19641412b938d28c34e3))
+* **leadspace:** updating to v2 ([#10946](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10946)) ([a9d12b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/a9d12b2815783137a400665a2fc33f9e657925f2))
+* **leaving-ibm:** v2 style updates ([#10941](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10941)) ([6e5aef5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6e5aef52b698bde911300b020e3ae8d2e75eed15))
+* **link-list:** upgrade to v2 styles ([#11008](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11008)) ([be4c9b2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/be4c9b249d0614a94ba592105825afbb4e9f3a49))
+* **link-with-icon:** upgrade v2 styles ([#11009](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11009)) ([f45a4fe](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f45a4fe8398a12c3771e970ed13ee149f91d6d38))
+* **locale-modal:** v2 locale modal styles ([#10951](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10951)) ([f3fb8b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/f3fb8b8ea60f15b80d04e21da8fb64aef68ea98b))
+* **masthead-v2:** integrate alpha branch ([#10952](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10952)) ([d3374d1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d3374d10728884caac00eaa16b32c741ecbf09f0))
+* **modal:** sync with @carbon/react v11 ([#10397](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10397)) ([0535990](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/0535990458f17a4ed6143796a9600ebf40f98050))
+* **multi-select:** @carbon/react v11 sync ([#10412](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10412)) ([392743e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/392743e2c6a679c24e4ca4a24cdde9914e81e193))
+* **notice-choice:** move component in sb to under new folder ([#10931](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10931)) ([3a45bed](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/3a45beda2308af9a4b21d9cc057227bd1fc7e3ca))
+* **package:** update packages to Carbon v11 ([#10779](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10779)) ([1c88604](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/1c88604ba0129a308c978ddf0ec7a73abebe8a67))
+* **quote:** remove color-scheme ([#11120](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11120)) ([c4ebf0a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/c4ebf0a501775fc0c7e44a9502af8d65d93a46ff))
+* **scroll-animations:** v2 updates ([#11054](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11054)) ([d74cdc5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/d74cdc5f8ce7f482503fd22202ab4faf831eaddb))
+* **search-with-typeahead:** v2 styles for search-with-typeahead ([#10893](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10893)) ([259e220](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/259e2208d6985c6b46b8ff471bf4ac8ef6093b79))
+* **search:** sync with carbon react ([#10337](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10337)) ([eafe9f7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/eafe9f7855c4f1f8170180a8666751f5034d6027))
+* **select:** sync with @carbon/react ([#10284](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10284)) ([88e2782](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/88e278280fed19bc4a6a013edf6067dafb106149))
+* **tabs-extended:** update to v11 styles and deprecate `vertical` variant ([#11086](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11086)) ([6caf5e7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/6caf5e748b21ed7bf81e19c6d00be26ac706458e))
+* **tag-link/group:** v2 style updates ([#11039](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/11039)) ([80dd23a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/80dd23a77757d08a1600f05cf9f01b2dedc67481))
+* **text-input:** text-input @carbon/react v11 sync ([#10308](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10308)) ([2d4f01f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2d4f01fdea62b909b1d7663103aa8e35f62d7cf2))
+* **toc:** v2 updates ([#10932](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10932)) ([ba12f0e](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/ba12f0e8231e0ad7850d05979afc25bde96dfb20))
+* upgrade to Carbon 11 ([#10196](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10196)) ([2976ac5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2976ac51d8db5953f56464c24b49b5e73a3073c3)), closes [#9948](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/9948)
+* **video-player:** update video player v2 ([#10934](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/10934)) ([6154221](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/61542213cbe744e96d06149553e0fa4ca4b62f05))
+>>>>>>> 73a006506d4343b2ed5f31da826aeb9e9f7139bd
 
 
 
@@ -1121,7 +1213,7 @@ All notable changes to this project will be documented in this file. See
 - **card-pictogram:** show body copy on both pictogram positions
   ([#8359](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/8359))
   ([96f027f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/96f027f))
-- **carousel:** apply same height function to heading used in dds-card-cta
+- **carousel:** apply same height function to heading used in cds-card-cta
   ([#8336](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/8336))
   ([a7f11f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/a7f11f6))
 - **cloud-masthead:** remove extra spacing from masthead
@@ -1279,7 +1371,7 @@ All notable changes to this project will be documented in this file. See
 - **card-pictogram:** show body copy on both pictogram positions
   ([#8359](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/8359))
   ([96f027f](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/96f027f))
-- **carousel:** apply same height function to heading used in dds-card-cta
+- **carousel:** apply same height function to heading used in cds-card-cta
   ([#8336](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/8336))
   ([a7f11f6](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/a7f11f6))
 - **cloud-masthead:** remove extra spacing from masthead
@@ -1965,7 +2057,7 @@ All notable changes to this project will be documented in this file. See
 - **cta-section:** use sans-serif font for statistics
   ([#7292](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/7292))
   ([28e31b8](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/28e31b8))
-- **featured-section:** adjust target new tab issue by extending dds-card-cta
+- **featured-section:** adjust target new tab issue by extending cds-card-cta
   ([#7250](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/7250))
   ([9fe5d78](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/9fe5d78))
 - **footer:** addressing accessibility issues
@@ -2199,7 +2291,7 @@ All notable changes to this project will be documented in this file. See
   ([ef6b9b7](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/ef6b9b7)),
   closes
   [#5920](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/5920)
-- **video-player:** set tabindex of 0 to dds-video-player
+- **video-player:** set tabindex of 0 to cds-video-player
   ([#7105](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/7105))
   ([9cb6aef](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/9cb6aef))
 
@@ -2380,7 +2472,7 @@ All notable changes to this project will be documented in this file. See
   ([877bff0](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/877bff0)),
   closes
   [#6784](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/6784)
-- **footer:** Set dds-footer role to contentinfo
+- **footer:** Set cds-footer role to contentinfo
   ([#6964](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/issues/6964))
   ([8c4b25c](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/commit/8c4b25c)),
   closes
diff --git a/packages/web-components/IMPLEMENTATION_NOTES.md b/packages/web-components/IMPLEMENTATION_NOTES.md
index 67b2e3c345d..beca75342a1 100644
--- a/packages/web-components/IMPLEMENTATION_NOTES.md
+++ b/packages/web-components/IMPLEMENTATION_NOTES.md
@@ -69,7 +69,7 @@ There are three categories of components in `@carbon/ibmdotcom-web-components`:
 | State                                         | Description                                                                                                                                                                                                                                                 |
 | --------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
 | UI components                                 | Components that define the user interface. Most components are in this category.                                                                                                                                                                            |
-| Composite components                          | Components that render UI components from object structures via property. An example is `<dds-masthead-composite>` that renders top/left navs from the `navLinks` property as an object. Components in this category should have `<*-composite>` tag names. |
+| Composite components                          | Components that render UI components from object structures via property. An example is `<cds-masthead-composite>` that renders top/left navs from the `navLinks` property as an object. Components in this category should have `<*-composite>` tag names. |
 | [Container components](#container-components) | Inheritances of composite components that connects to `@carbon/ibmdotcom-service`.                                                                                                                                                                          |
 
 ## Carbon core library
@@ -80,12 +80,12 @@ versions of the Carbon core library. Here are some examples:
 
 | Component                                                                                                                                                                               | Extends from                                                                                                                         |
 | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ |
-| [`<dds-card>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/card/card.ts)                                             | [`<bx-link>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/link/link.ts)                 |
-| [`<dds-link-with-icon>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/link-with-icon/link-with-icon.ts)               | [`<bx-link>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/link/link.ts)                 |
-| [`<dds-top-nav>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/masthead/top-nav.ts)                                   | [`<bx-header-nav>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/ui-shell/header-nav.ts) |
-| [`<dds-left-nav>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/masthead/left-nav.ts)                                 | [`<bx-side-nav>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/ui-shell/side-nav.ts)     |
-| [`<dds-language-selector-desktop>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/footer/language-selector-desktop.ts) | [`<bx-combo-box>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/combo-box/combo-box.ts)  |
-| [`<dds-language-selector-mobile>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/footer/language-selector-mobile.ts)   | [`<bx-select>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/select/select.ts)           |
+| [`<cds-card>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/card/card.ts)                                             | [`<bx-link>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/link/link.ts)                 |
+| [`<cds-link-with-icon>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/link-with-icon/link-with-icon.ts)               | [`<bx-link>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/link/link.ts)                 |
+| [`<cds-top-nav>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/masthead/top-nav.ts)                                   | [`<bx-header-nav>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/ui-shell/header-nav.ts) |
+| [`<cds-left-nav>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/masthead/left-nav.ts)                                 | [`<bx-side-nav>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/ui-shell/side-nav.ts)     |
+| [`<cds-language-selector-desktop>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/footer/language-selector-desktop.ts) | [`<bx-combo-box>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/combo-box/combo-box.ts)  |
+| [`<cds-language-selector-mobile>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/footer/language-selector-mobile.ts)   | [`<bx-select>`](https://github.com/carbon-design-system/carbon-web-components/blob/master/src/components/select/select.ts)           |
 
 ## Component CSS
 
@@ -96,8 +96,8 @@ Most components use the following to define CSS:
 ```typescript
 import styles from './some-component.scss';
 
-@customElement('dds-some-component')
-class DDSSomeComponent extends LitElement {
+@customElement('c4d-some-component')
+class C4DSomeComponent extends LitElement {
   ...
 
   static styles = styles;
@@ -142,11 +142,11 @@ but
 There are several approaches depending on what best suits the use case:
 
 1. Create an inherited class with different styles applied (e.g.
-   [`<dds-callout-quote>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/callout-quote/callout-quote.ts)
-   that extends `<dds-quote>`).
+   [`<cds-callout-quote>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/callout-quote/callout-quote.ts)
+   that extends `<cds-quote>`).
 2. Use CSS custom properties as they are inherited to descendant DOM elements.
    An example is
-   [`<dds-link-list>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0-rc.0/packages/web-components/src/components/link-list/link-list.scss#L34).
+   [`<cds-link-list>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0-rc.0/packages/web-components/src/components/link-list/link-list.scss#L34).
    However, it may not be a good idea to use this approach if there are many
    custom properties.
 
@@ -207,29 +207,29 @@ There are some common behaviors in CTA components that are implemented by
 
 The `video` CTA type requires more features, implemented by
 [`VideoCTAMixin`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0-rc.0/packages/web-components/src/component-mixins/cta/video.ts).
-With the exception of `<dds-feature-cta-footer>`, every CTA component supports
+With the exception of `<cds-feature-cta-footer>`, every CTA component supports
 the `video` CTA type (as of `v1.15.0`) and thus extend `VideoCTAMixin`.
 `VideoCTAMixin` implements the following:
 
-- Send an event (`dds-cta-run-action`) when user clicks on CTA.
-- Send an event (`dds-cta-request-video-data`) when the CTA type is `video` and
+- Send an event (`cds-cta-run-action`) when user clicks on CTA.
+- Send an event (`cds-cta-request-video-data`) when the CTA type is `video` and
   video info (caption, duration and thumbmail) hasn't been loaded yet.
 
 Those events are handled by
-[`<dds-video-cta-container>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-container.ts):
+[`<cds-video-cta-container>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-container.ts):
 
-| Event                        | `<dds-video-cta-container>` logic                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
+| Event                        | `<cds-video-cta-container>` logic                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           |
 | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `dds-cta-run-action`         | Launches the lightbox, by setting the [`_activeVideoId`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L102) private property and using it to trigger [opening the modal](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L157). `_activeVideoId` should be cleared when the lightbox is closed.                                                                                                                                                |
-| `dds-cta-request-video-data` | Loads the [video info](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L84) via [Redux store](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/services-store/src/actions/videoPlayerAPI.ts#L63-L84), and updates `event.target` with the [loaded video info](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L87-L88). `event.target` should be a CTA component as CTA component is the one firing the event. |
+| `cds-cta-run-action`         | Launches the lightbox, by setting the [`_activeVideoId`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L102) private property and using it to trigger [opening the modal](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L157). `_activeVideoId` should be cleared when the lightbox is closed.                                                                                                                                                |
+| `cds-cta-request-video-data` | Loads the [video info](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L84) via [Redux store](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/services-store/src/actions/videoPlayerAPI.ts#L63-L84), and updates `event.target` with the [loaded video info](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/video-cta-composite.ts#L87-L88). `event.target` should be a CTA component as CTA component is the one firing the event. |
 
-Only one instance of `<dds-video-cta-container>` is needed in an application as
+Only one instance of `<cds-video-cta-container>` is needed in an application as
 long as it contains all CTA components, as can be seen
 [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/cta/__stories__/cta.stories.ts#L176-L182).
-This separation between `<dds-*-cta>` and `<dds-video-cta-container>` keeps
-`<dds-*-cta>` lightweight and simple.
+This separation between `<cds-*-cta>` and `<cds-video-cta-container>` keeps
+`<cds-*-cta>` lightweight and simple.
 
-- Send an event (`dds-cta-request-video-data`) when a user clicks on the CTA so
+- Send an event (`cds-cta-request-video-data`) when a user clicks on the CTA so
   that the lightbox video player can launch the lightbox.
 - Returns the video caption, duration, and thumbnail.
 
@@ -240,8 +240,8 @@ The video player has two states,
 and
 [video (playing) mode](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/defs.ts#L22).
 When a user clicks on a video thumbmail, the
-[`dds-video-player-content-state-changed`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player.ts#L42-L51)
-event is fired, allowing `<dds-video-player-composite>` to
+[`cds-video-player-content-state-changed`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player.ts#L42-L51)
+event is fired, allowing `<cds-video-player-composite>` to
 [embed the video](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player-composite.ts#L80-L86).
 
 Embedding the video involves:
@@ -249,11 +249,11 @@ Embedding the video involves:
 1. [Creating](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player-container.ts#L157-L159)
    the DOM element of the video.
 2. [Inserting](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player-container.ts#L160-L164)
-   the DOM element to the correct location. `<dds-video-player-composite>`
+   the DOM element to the correct location. `<cds-video-player-composite>`
    specifies the location for the DOM element of the video via the
    [`selectorVideoPlayer`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player-composite.ts#L182-L184)
    static property. This can be overridden by using
-   [`<dds-lightbox-video-player-composite>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts#L119-L121).
+   [`<cds-lightbox-video-player-composite>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts#L119-L121).
 3. [Calling](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.16.0/packages/web-components/src/components/video-player/video-player-container.ts#L165)
    the video player API from `@carbon/ibmdotcom-services`.
 
@@ -269,12 +269,12 @@ While frameworks such as Angular and Vue require limited to no changes in the
 application when using web components, React has some issues. React heavily
 relies on its knowledge with regard to how intrinsic HTML elements work.
 
-For example, `<dds-foo custom-boolean={true}>` renders as
-`<dds-foo custom-boolean="true">`. This differs from `<button disabled={true}>`,
+For example, `<cds-foo custom-boolean={true}>` renders as
+`<cds-foo custom-boolean="true">`. This differs from `<button disabled={true}>`,
 which renders as `<button disabled>` (empty string in `disabled` attribute
 value).
 
-Another example is `<dds-foo onFoo={handleFoo}>` which doesn't attach an event
+Another example is `<cds-foo onFoo={handleFoo}>` which doesn't attach an event
 handler, whereas `<div onClick={handleClick}>` does.
 
 ### React wrapper generator
@@ -339,8 +339,8 @@ and `eventXXX` in the custom element class. The build procedure can be found
 #### Limited components to generate React wrapper
 
 As of `v1.15.0`, we decided to generate React wrappers only for components
-without a pure React counterpart, for example `<dds-carousel>` and
-`<dds-leaving-ibm-modal>`.
+without a pure React counterpart, for example `<cds-carousel>` and
+`<cds-leaving-ibm-modal>`.
 
 These components should have a `/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */`
 annotation at the default export. The annotation is read by a
@@ -354,7 +354,7 @@ the list of files to generate React wrappers.
 Here are some more types of non-React APIs that an application can use with
 React integration code:
 
-- Constant/enum definitions, e.g. `PICTOGRAM_PLACEMENT` for `<dds-card>`
+- Constant/enum definitions, e.g. `PICTOGRAM_PLACEMENT` for `<cds-card>`
 - `mapStateToProps()`/`mapDispatchToProps()` for Redux integration
 
 Because of the non-React nature, this implementation is identical to the
@@ -414,12 +414,12 @@ React wrappers for composite components render web components of leaf
 components, as opposed to the web components version of the composite component.
 Doing so ensures React SSR works for REST API calls, reducing network
 round-trips that is the key benefit of React SSR. For example,
-[`<dds-leaving-ibm-modal>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components-react/leaving-ibm/leaving-ibm-composite.tsx).
+[`<cds-leaving-ibm-modal>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components-react/leaving-ibm/leaving-ibm-composite.tsx).
 
 React wrappers for container components use the official Redux integration
 library, `react-redux`. Doing so allows applications to be scoped, leveraging
 React's [context feature](https://reactjs.org/docs/context.html). For example,
-[`<dds-leaving-ibm-modal>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components-react/leaving-ibm/leaving-ibm-container.ts).
+[`<cds-leaving-ibm-modal>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components-react/leaving-ibm/leaving-ibm-container.ts).
 
 ## Container components
 
@@ -445,12 +445,12 @@ Similar to `react-redux`, `ConnectMixin` uses two callbacks:
 And container components are created by `ConnectMixin`:
 
 ```typescript
-@customElement(`${ddsPrefix}-footer-container`)
-class DDSFooterContainer extends ConnectMixin(
+@customElement(`${c4dPrefix}-footer-container`)
+class C4DFooterContainer extends ConnectMixin(
   store,
   mapStateToProps,
   mapDispatchToProps
-)(DDSFooterComposite) {}
+)(C4DFooterComposite) {}
 ```
 
 As seen in the example above, one notable difference of `ConnectMixin` from
@@ -502,30 +502,30 @@ The search box feature in masthead consists of two things:
 
 | Component                                                                                                                                                                                    | Description                                      |
 | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------ |
-| [`<dds-masthead-search>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search.ts)                     | The search box UI.                               |
-| [`<dds-masthead-search-container>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-container.ts) | The component to load and render search results. |
+| [`<cds-masthead-search>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search.ts)                     | The search box UI.                               |
+| [`<cds-masthead-search-container>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-container.ts) | The component to load and render search results. |
 
-`<dds-masthead-search>` triggers the `dds-masthead-search-input` event when
-users type in the input field. `<dds-masthead-search-composite>`, the underlying
-component behind `<dds-masthead-search-container>`,
+`<cds-masthead-search>` triggers the `cds-masthead-search-input` event when
+users type in the input field. `<cds-masthead-search-composite>`, the underlying
+component behind `<cds-masthead-search-container>`,
 [runs](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-composite.ts#L43-L46)
 the
 [`loadSearchResults()`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/services-store/src/actions/searchAPI.ts#L93-L120)
 Redux action during the
-[`dds-masthead-search-input`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-composite.ts#L139)
+[`cds-masthead-search-input`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-composite.ts#L139)
 event.
 
-`<dds-masthead-search-composite>` uses
+`<cds-masthead-search-composite>` uses
 [`ThrottledInputMixin`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/globals/mixins/throttled-input.ts)
-to throttle the `dds-masthead-search-input` event. `ThrottledInputMixin` calls
+to throttle the `cds-masthead-search-input` event. `ThrottledInputMixin` calls
 `_handleThrottledInput()` as the `eventInput` static method is fired.
 
-`<dds-masthead-search-container>`
+`<cds-masthead-search-container>`
 [intersects the search query](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-container.ts#L64-L70)
 with the table of loaded search results and sets the
 [`currentSearchResults`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-container.ts#L72)
 property, which is rendered as
-[`<dds-masthead-search-item>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-composite.ts#L118-L123).
+[`<cds-masthead-search-item>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.13.0/packages/web-components/src/components/masthead/masthead-search-composite.ts#L118-L123).
 
 ## TypeScript type definition
 
@@ -675,7 +675,7 @@ Most unit tests consist of the following parts:
 We use [`lit-html`](https://lit-html.polymer-project.org), the underlying
 template library of `lit-element`. In some cases, we reuse templates from
 [Storybook CSF](https://storybook.js.org/docs/react/api/csf), The test for
-[`<dds-leadspace-block>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/leadspace-block/__tests__/leadspace-block.test.ts#L12-L30)
+[`<cds-leadspace-block>`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/leadspace-block/__tests__/leadspace-block.test.ts#L12-L30)
 is an example.
 
 #### Waiting for a template to be updated
@@ -694,10 +694,10 @@ await Promise.resolve();
 ```
 
 If multiple `lit-html` templates are being tested, multiple template update
-cycles (microtasks) may be in play. For example, rendering `<dds-carousel>` in a
+cycles (microtasks) may be in play. For example, rendering `<cds-carousel>` in a
 test template involves three update cycles. One for test template, another for
-`<dds-carousel>` that registers its `slotchange` event handler, and lastly
-`<dds-carousel>`,which again updates the template upon the `slotchange` event.
+`<cds-carousel>` that registers its `slotchange` event handler, and lastly
+`<cds-carousel>`,which again updates the template upon the `slotchange` event.
 In such cases we need to wait for microtasks to be done multiple times.
 
 #### Changing a public property
@@ -712,7 +712,7 @@ can be found
 
 Changing a private property in a test allows us to quickly set up the test
 environment for a particular case in an isolated manner. For example,
-`<dds-carousel>` has a
+`<cds-carousel>` has a
 [private property](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/carousel/carousel.ts#L46)
 that reflects the space between cards. This property is updated by the
 `slotchange` event handler as well as by a `ResizeObserver` callback. Directly
@@ -866,13 +866,13 @@ within the component while it's open. There is a spec
 elements where keyboard focus is kept within, but nothing has been implemented
 yet.
 
-To achieve a similar behavior, `<dds-expressive-modal>` defines its own "focus
+To achieve a similar behavior, `<cds-expressive-modal>` defines its own "focus
 wrap" behavior. The code
 [detects](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/expressive-modal/expressive-modal.ts#L146-L155)
-if the keyboard focus leaves `<dds-expressive-modal>`, and returns focus within
+if the keyboard focus leaves `<cds-expressive-modal>`, and returns focus within
 the component if so.
 
-Making sure focus wrapping works even when `<dds-expressive-modal>` is the last
+Making sure focus wrapping works even when `<cds-expressive-modal>` is the last
 element in `<body>` requires extra mechanism. In such cases the entire viewport
 loses focus and the `blur` event cannot detect the newly focused element. To
 prevent this, we use
@@ -881,15 +881,15 @@ that is a non-visible, focusable
 [element](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/expressive-modal/expressive-modal.ts#L306)
 that gets focused before the viewport loses focus.
 
-`<dds-left-nav>` uses a
+`<cds-left-nav>` uses a
 [utility function](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/utilities/src/utilities/focuswrap/focuswrap.js)
 for the same purpose, which supports two regions for focus wrapping. When the
-focus leaves `<dds-masthead-menu-button>` (the trigger button for
-`<dds-left-nav>`), focus should return to `<dds-left-nav>`. When the focus
-leaves `<dds-left-nav>`, focus should then go to `<dds-masthead-menu-button>`.
+focus leaves `<cds-masthead-menu-button>` (the trigger button for
+`<cds-left-nav>`), focus should return to `<cds-left-nav>`. When the focus
+leaves `<cds-left-nav>`, focus should then go to `<cds-masthead-menu-button>`.
 The utility function fires
-[`dds-request-focus-wrap`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/utilities/src/utilities/focuswrap/focuswrap.js#L23)
-in such conditions, and `<dds-left-nav>` handles the [`dds-request-focus-wrap`]
+[`cds-request-focus-wrap`](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/utilities/src/utilities/focuswrap/focuswrap.js#L23)
+in such conditions, and `<cds-left-nav>` handles the [`cds-request-focus-wrap`]
 event(https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.15.0/packages/web-components/src/components/masthead/left-nav.ts#L61-L93)
-to decide whether `<dds-masthead-menu-button>` or `<dds-left-nav>` should get
+to decide whether `<cds-masthead-menu-button>` or `<cds-left-nav>` should get
 focus.
diff --git a/packages/web-components/README.md b/packages/web-components/README.md
index f8a643d46fc..09765e1007f 100644
--- a/packages/web-components/README.md
+++ b/packages/web-components/README.md
@@ -68,10 +68,10 @@ yarn add @carbon/ibmdotcom-web-components
 > ```
 
 `@carbon/ibmdotcom-web-components` uses
-[`lit-html`](https://lit-html.polymer-project.org) for reactive templating on
-top of raw Web Components standard and
-[`lit-element`](https://lit-element.polymer-project.org) for reactive
-properties/attributes on top of `lit-html`.
+[`lit`](https://lit-html.polymer-project.org) for reactive templating on top of
+raw Web Components standard and
+[`lit/decorators`](https://lit-element.polymer-project.org) for reactive
+properties/attributes on top of `lit`.
 
 ## Usage Examples
 
@@ -96,7 +96,7 @@ import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-contain
 Once you do that, you can use our components as easy as using HTML tags, like:
 
 ```html
-<dds-masthead-container></dds-masthead-container>
+<c4d-masthead-container></c4d-masthead-container>
 ```
 
 > 💡 Check our
@@ -151,7 +151,7 @@ module: {
         {
           loader: 'sass-loader',
           options: {
-            implementation: require('node-sass'),
+            implementation: require('sass'),
             sassOptions: {
               includePaths: ['../node_modules', '../../../node_modules'],
               // `enable-css-custom-properties` and `grid-columns-16` feature flags
@@ -181,7 +181,7 @@ To prevent a flash of unstyled content (FOUC) from happening on your page be
 sure to to `display: none` if a component has not been defined yet. For example
 
 ```css
-dds-button-group:not(:defined) {
+c4d-button-group:not(:defined) {
   display: none;
 }
 ```
@@ -224,7 +224,7 @@ Here is an example of implementing the `dotcom-shell`:
 <html>
   <head>
     <script type="module">
-      import 'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js';
+      import 'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/dotcom-shell.min.js';
 
       // The minimum prerequisite to use our service for translation data, etc.
       window.digitalData = {
@@ -252,7 +252,7 @@ Here is an example of implementing the `dotcom-shell`:
     ...
   </head>
   <body>
-    <dds-dotcom-shell-container></dds-dotcom-shell-container>
+    <c4d-dotcom-shell-container></c4d-dotcom-shell-container>
   </body>
 </html>
 ```
@@ -271,7 +271,7 @@ page:
   <head>
     <link
       rel="stylesheet"
-      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/plex.css" />
     ...
   </head>
 </html>
@@ -315,12 +315,12 @@ A tag release would be called as:
 <!-- LATEST -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/dotcom-shell.min.js"></script>
 
 <!-- NEXT -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/dotcom-shell.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/next/dotcom-shell.min.js"></script>
 ```
 
 A specific release would be called as:
@@ -329,7 +329,7 @@ A specific release would be called as:
 <!-- SPECIFIC VERSION (available starting v1.6.0) -->
 <script
   type="module"
-  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v1.x.y/dotcom-shell.min.js"></script>
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v2.x.y/dotcom-shell.min.js"></script>
 ```
 
 > NOTE: The latest/next tags are moving versions. While beneficial to always
@@ -374,7 +374,7 @@ IBM.com Northstar footer:
 <body id="ibm-com" class="ibm-type">
   <div id="ibm-top" class="ibm-landing-page">
     <!-- Uses Carbon for IBM.com Web Components masthead -->
-    <dds-masthead-container></dds-masthead-container>
+    <c4d-masthead-container></c4d-masthead-container>
     <div id="ibm-content-wrapper">...</div>
     <!-- Uses legacy IBM.com Design System (Northstar) footer -->
     <footer role="contentinfo" aria-label="IBM"></footer>
@@ -437,14 +437,14 @@ You can create a derived class of our component and override
 like:
 
 ```javascript
-import { css, customElement } from 'lit-element';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components/link-with-icon/link-with-icon';
+import { css, customElement } from 'lit';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components/link-with-icon/link-with-icon';
 
 @customElement('my-link-with-icon')
-class MyLinkWithIcon extends DDSLinkWithIcon {
+class MyLinkWithIcon extends C4DLinkWithIcon {
   // Custom CSS to enforce `g100` color of the link text
   static styles = css`
-    ${DDSLinkWithIcon.styles}
+    ${C4DLinkWithIcon.styles}
     .bx--link-with-icon {
       color: #3d70b2;
     }
@@ -460,29 +460,19 @@ scheme of `@carbon/ibmdotcom-web-components` components:
 For example, if you add CSS like below:
 
 ```css
-dds-link-with-icon {
-  --cds-link-01: #3d70b2; /* `$link-01` token for `g100` theme */
+c4d-link-with-icon {
+  --c4d-link-01: #3d70b2; /* `$link-01` token for `g100` theme */
 }
 ```
 
 The color of the link in the code below changes to the one in the `g100` theme:
 
 ```html
-<dds-link-with-icon href="https://www.ibm.com/standards/carbon">
+<c4d-link-with-icon
+  href="https://www.ibm.com/standards/carbon"
+  cta-type="local">
   Link text
-  <svg
-    slot="icon"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20">
-    <path
-      d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-  </svg>
-</dds-link-with-icon>
+</c4d-link-with-icon>
 ```
 
 The names of CSS Custom Properties you can use are the Carbon theme tokens
@@ -493,12 +483,11 @@ With CSS Custom Properties approach, you can switch the entire theme under the
 specific element by:
 
 ```scss
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
+@use '@carbon/styles/scss/themes' as *;
 
-dds-link-with-icon {
+c4d-link-with-icon {
   // Emits all theme tokens in CSS Custom Properties
-  @include carbon--theme($carbon--theme--g100, true);
+  @include theme(g100, true);
 }
 ```
 
@@ -510,10 +499,10 @@ use your application's CSS to affect `@carbon/ibmdotcom-web-components` styles
 in a more flexible manner.
 
 For example, below style changes back button's text color in
-`<dds-locale-modal>` to one of `g100` theme:
+`<cds-locale-modal>` to one of `g100` theme:
 
 ```css
-dds-locale-modal::part(back-button) {
+cds-locale-modal::part(back-button) {
   color: #152935;
 }
 ```
diff --git a/packages/web-components/carbon.yml b/packages/web-components/carbon.yml
index 35f72630c6d..360e20ad23c 100644
--- a/packages/web-components/carbon.yml
+++ b/packages/web-components/carbon.yml
@@ -2,7 +2,9 @@
 library:
   id: ibmdotcom-web-components
   name: IBM.com Web Components
-  description: Create web experiences that adhere to IBM’s web standards using this primary component library.
+  description:
+    Create web experiences that adhere to IBM’s web standards using this primary
+    component library.
   externalDocsUrl: https://www.ibm.com/standards/web/carbon-for-ibm-dotcom
   inherits: ibmdotcom-styles
   demoLinks:
@@ -103,15 +105,6 @@ assets:
         name: Storybook
         action: link
         url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-card-section-simple
-  card-section-images:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section#card-section-with-images
-    status: stable
-    framework: web-component
-    demoLinks:
-      - type: storybook
-        name: Storybook
-        action: link
-        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-card-section-images
   card-section-carousel:
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/card-section-carousel
     status: stable
@@ -193,15 +186,15 @@ assets:
         name: Storybook
         action: link
         url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-group
-  content-group-banner:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-banner
+  in-page-banner:
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/in-page-banner
     status: stable
     framework: web-component
     demoLinks:
       - type: storybook
         name: Storybook
         action: link
-        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-group-banner
+        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-in-page-banner
   content-group-cards:
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-group-cards
     status: stable
@@ -238,15 +231,15 @@ assets:
         name: Storybook
         action: link
         url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item
-  content-item-horizontal:
-    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-horizontal
+  content-item-row:
+    externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-item-row
     status: stable
     framework: web-component
     demoLinks:
       - type: storybook
         name: Storybook
         action: link
-        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-horizontal
+        url: https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-content-item-row
   content-section:
     externalDocsUrl: https://www.ibm.com/standards/carbon/components/content-section
     status: stable
diff --git a/packages/web-components/docs/breaking-changes.md b/packages/web-components/docs/breaking-changes.md
index 223cb7674a8..fc546b13946 100644
--- a/packages/web-components/docs/breaking-changes.md
+++ b/packages/web-components/docs/breaking-changes.md
@@ -1,14 +1,18 @@
 # Breaking changes
 
+## v2.0.0
+
+The breaking changes and migration documentation can be found [here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/feat/carbon-for-ibm-dotcom-v2/docs/dotcom-v2-migration.md).
+
 ## v1.13.0
 
 ### Dependency updates
 
-- Starting in `v1.13.0`, `Carbon for IBM.com Web Components` will include 
-  `lit-html` and `lit-element` as `dependencies` rather than 
-  `peerDependencies`. This means that installing on applications will no longer 
-  be required and can be safely removed from the project setup for using 
-  `Carbon for IBM.com`. 
+- Starting in `v1.13.0`, `Carbon for IBM.com Web Components` will include
+  `lit-html` and `lit-element` as `dependencies` rather than
+  `peerDependencies`. This means that installing on applications will no longer
+  be required and can be safely removed from the project setup for using
+  `Carbon for IBM.com`.
 
 ## v1.11.0
 
@@ -22,21 +26,21 @@
 ### Design adjustment
 
 - All content block and content group components should now
-  use `<dds-card-link-cta>`
-  instead of `<dds-card-cta>` for the footer CTA component per design
+  use `<cds-card-link-cta>`
+  instead of `<cds-card-cta>` for the footer CTA component per design
   specifications. Example markup:
 
 ```html
 
-<dds-content-block-simple>
+<cds-content-block-simple>
   ...
-  <dds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-    <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-    <dds-card-cta-footer>
+  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+    <cds-card-cta-footer>
       ...
-    </dds-card-cta-footer>
-  </dds-card-link-cta>
-</dds-content-block-simple>
+    </cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-block-simple>
 ```
 
 ## v1.9.0
@@ -78,12 +82,12 @@
 
 ## v1.3.0
 
-- **card-in-card**: `<dds-card-in-card-footer>` is replaced with
-  `<dds-card-cta-footer>`
-- **cta-section**: `<dds-cta-section>` has various API updates per updated
+- **card-in-card**: `<cds-card-in-card-footer>` is replaced with
+  `<cds-card-cta-footer>`
+- **cta-section**: `<cds-cta-section>` has various API updates per updated
   designs
-- **callout-with-media**: `<dds-content-block-copy>` is replaced with
-  `<dds-callout-with-media-copy>`
+- **callout-with-media**: `<cds-content-block-copy>` is replaced with
+  `<cds-callout-with-media-copy>`
 
 ## v1.0.0
 
@@ -92,47 +96,47 @@
   check updated documentation when updating to this version release of web
   components. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4635
-* The `mark-type` attribute of `<dds-quote>` now takes dash-cased values
+* The `mark-type` attribute of `<cds-quote>` now takes dash-cased values
   (e.g. `double-curved`) instead of camel-cased values (`doubleCurved`). PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4658
-* The shadow slot names of `<dds-quote>` are now dash-cased
+* The shadow slot names of `<cds-quote>` are now dash-cased
   (e.g. `source-heading`) instead of camel-cased (e.g. `sourceHeading`). PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4756
-* Card slots `eyebrow` and `heading` are now custom elements `dds-card-eyebrow`
-  and `dds-card-heading` respectively. PR
+* Card slots `eyebrow` and `heading` are now custom elements `cds-card-eyebrow`
+  and `cds-card-heading` respectively. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4783
-* `copy` slot in `<dds-quote>` now is the default slot. Also other slots in
-  `<dds-quote>` no longer has styling elements around it for better flexibility.
-  The default styles are implemented by `<dds-quote-source-copy>`
-  /`<dds-quote-source-heading>`/`<dds-quote-source-bottom-heading>`. PR
+* `copy` slot in `<cds-quote>` now is the default slot. Also other slots in
+  `<cds-quote>` no longer has styling elements around it for better flexibility.
+  The default styles are implemented by `<cds-quote-source-copy>`
+  /`<cds-quote-source-heading>`/`<cds-quote-source-bottom-heading>`. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4840
-* `copy` slot in `<dds-leadspace>` now is the default slot. Also `title` slot in
-  `<dds-leadspace>`/`<dds-leadspace-block>` no longer has styling elements
+* `copy` slot in `<cds-leadspace>` now is the default slot. Also `title` slot in
+  `<cds-leadspace>`/`<cds-leadspace-block>` no longer has styling elements
   around it for better flexibility. The default styles are implemented by
-  `<dds-leadspace-heading>`. PR
+  `<cds-leadspace-heading>`. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4841
-* `eyebrow` slot in `<dds-content-item-horizontal>` no longer has styling
+* `eyebrow` slot in `<cds-content-item-horizontal>` no longer has styling
   elements around it for better flexibility. The default styles are implemented
-  by `<dds-content-item-horizontal-eyebrow>`. PR
+  by `<cds-content-item-horizontal-eyebrow>`. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4842
-* `<slot name="heading">` in `<dds-feature-card-block-medium>` is renamed to
+* `<slot name="heading">` in `<cds-feature-card-block-medium>` is renamed to
   `<slot="block-heading">`. Also `<slot name="copy">` in the same component is
   renamed to `<slot name="heading">`. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4850
-* `<dds-content-block-simple>` and `<dds-callout-with-media>` use
-  `<dds-content-block-copy size="sm">` instead of `<dds-content-item-copy>` for
+* `<cds-content-block-simple>` and `<cds-callout-with-media>` use
+  `<cds-content-block-copy size="sm">` instead of `<cds-content-item-copy>` for
   the copy content. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4869
-* `<dds-content-group>` descendants use `<dds-content-group-copy>` instead of
-  `<dds-content-item-copy>` (or plane `<p>`) for the copy content. PR
+* `<cds-content-group>` descendants use `<cds-content-group-copy>` instead of
+  `<cds-content-item-copy>` (or plane `<p>`) for the copy content. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4869
-* `<slot name="content">` in `<dds-content-block>` and `<dds-content-group>`
+* `<slot name="content">` in `<cds-content-block>` and `<cds-content-group>`
   descendants has become the default slot. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4869
-* `<slot name="buttons">` in `<dds-leadspace>` is changed to
-  `<slot name="action">` to align to `<dds-cta-section>`. PR
+* `<slot name="buttons">` in `<cds-leadspace>` is changed to
+  `<slot name="action">` to align to `<cds-cta-section>`. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4898
-* The default `<slot>` for `<dds-cta-section>` is repurposed from one for copy
+* The default `<slot>` for `<cds-cta-section>` is repurposed from one for copy
   content to one for child content items. The slot for copy content is now
   `<slot name="copy">`. PR
   reference: https://github.com/carbon-design-system/carbon-for-ibm-dotcom/pull/4897
diff --git a/packages/web-components/docs/carbon-cdn-style-helpers.md b/packages/web-components/docs/carbon-cdn-style-helpers.md
index 1534bb88b89..3096efc7933 100644
--- a/packages/web-components/docs/carbon-cdn-style-helpers.md
+++ b/packages/web-components/docs/carbon-cdn-style-helpers.md
@@ -16,11 +16,11 @@
 
 ## Overview
 
-In order to minimize the necessity of using front-end bundlers with the Carbon 
+In order to minimize the necessity of using front-end bundlers with the Carbon
 for IBM.com Web Components CDN artifacts, page level styles artifacts are also
 available to use.
 
-If your application is not already compiling its own version of the below 
+If your application is not already compiling its own version of the below
 artifacts, these can be included as part of your project.
 
 > NOTE: The latest/next tags are moving versions. While beneficial to
@@ -46,7 +46,7 @@ the page. Note, this will import `IBM Plex Sans`, `IBM Plex Serif`, and `IBM Ple
 
 ### Alternative: individual Plex family loading
 
-Plex fonts are also available as CSS artifacts, where the Plex font families can be loaded in individually. 
+Plex fonts are also available as CSS artifacts, where the Plex font families can be loaded in individually.
 
 Available CSS files:
 
@@ -250,84 +250,79 @@ The following includes Carbon grid and all corresponding grid classes.
 
 ```html
 // SPECIFIC VERSION
-<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v1.x.y]/grid.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/grid.css" />
 
 // LATEST tag
-<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
 
 // NEXT tag
-<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/grid.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/grid.css" />
 ```
 
 [Learn more about the Carbon 2x Grid](https://carbondesignsystem.com/guidelines/2x-grid/overview)
 
 ## Carbon theme zoning classes
 
-The following includes classes for creating Carbon theme zones (white, g10, g90, 
+The following includes classes for creating Carbon theme zones (white, g10, g90,
 g100). Note that these classes take advantage of using CSS Custom Properties enabled
 in Carbon.
 
 ```html
 // SPECIFIC VERSION
-<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/[v1.x.y]/themes.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/version/[v2.x.y]/themes.css" />
 
 // LATEST tag
-<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/themes.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
 
 // NEXT tag
-<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/themes.css" />
+<link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/next/themes.css" />
 ```
 
 ### Available classes
 
 | Theme  | Class name              |
 | ------ | ----------------------- |
-| white  | `.dds-theme-zone-white` |
-| g10    | `.dds-theme-zone-g10`   |
-| g90    | `.dds-theme-zone-g90`   |
-| g100   | `.dds-theme-zone-g100`  |
+| white  | `.cds-theme-zone-white` |
+| g10    | `.cds-theme-zone-g10`   |
+| g90    | `.cds-theme-zone-g90`   |
+| g100   | `.cds-theme-zone-g100`  |
 
 ### Example usage
 
 ```html
 <html>
 <head>
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/themes.css" />
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace.min.js"></script>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/themes.css" />
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/dotcom-shell.min.js"></script>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/latest/leadspace.min.js"></script>
   ...
 </head>
 <body>
-<dds-dotcom-shell-container>
+<c4d-dotcom-shell-container>
 <main>
-    <dds-leadspace size="medium" class="dds-theme-zone-g90">
-      <dds-leadspace-heading>LeadSpace title</dds-leadspace-heading>
+    <c4d-leadspace size="medium" class="cds-theme-zone-g90">
+      <c4d-leadspace-heading>LeadSpace title</c4d-leadspace-heading>
       LeadSpace copy
-      <dds-button-group slot="action">
-        <dds-button-group-item href="www.example.com">
+      <c4d-button-group slot="action">
+        <c4d-button-group-item href="www.example.com" cta-type="local">
           Button 1
-          <svg 
-            focusable="false" 
-            preserveAspectRatio="xMidYMid meet" 
-            xmlns="http://www.w3.org/2000/svg" 
-            fill="currentColor" 
-            aria-hidden="true" 
-            width="20" 
-            height="20" 
-            viewBox="0 0 20 20" 
-            slot="icon"
-          >
-            <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-          </svg>
-        </dds-button-group-item>
-      </dds-button-group>
-      <dds-leadspace-image slot="image" class="bx--image" alt="alt text" default-src="https://picsum.photos/id/1076/1056/480">
-        <dds-image-item media="(min-width: 672px)" srcset="https://picsum.photos/id/1076/672/400"></dds-image-item>
-        <dds-image-item media="(min-width: 0)" srcset="https://picsum.photos/id/1076/320/370"></dds-image-item>
-      </dds-leadspace-image>
-    </dds-leadspace>  
+        </c4d-button-group-item>
+      </c4d-button-group>
+      <c4d-background-media
+        slot="image"
+        opacity="100"
+        alt="alt text"
+        default-src="https://picsum.photos/id/1076/1056/480">
+        <c4d-image-item
+          media="(min-width: 672px)"
+          srcset="https://picsum.photos/id/1076/672/400"></c4d-image-item>
+        <c4d-image-item
+          media="(min-width: 0)"
+          srcset="https://picsum.photos/id/1076/320/370"></c4d-image-item>
+      </c4d-background-media>
+    </c4d-leadspace>
 </main>
-</dds-dotcom-shell-container>
+</cds-dotcom-shell-container>
 </body>
 </html>
 ```
diff --git a/packages/web-components/docs/coding-conventions.md b/packages/web-components/docs/coding-conventions.md
index 3c89698c993..b7e56eb57e2 100644
--- a/packages/web-components/docs/coding-conventions.md
+++ b/packages/web-components/docs/coding-conventions.md
@@ -85,7 +85,7 @@ To avoid memory leaks and zombie event listeners, we ensure the event listeners
 
 For that purpose, similar to `carbon-web-components`, `@carbon/ibmdotcom-web-components` uses `@HostListener(type, options)` decorator. `@HostListener(type, options)` decorator works with a custom element class inheriting `HostListenerMixin()` and attaches an event listener using the target method as the listener.
 
-Here's an example seen in `<bx-modal>` code:
+Here's an example seen in `<cds-modal>` code:
 
 ```typescript
 ...
@@ -94,7 +94,7 @@ import HostListenerMixin from '@carbon/web-components/es/globals/mixins/HostList
 ...
 
 @customElement(`${prefix}-modal` as any)
-class BXModal extends HostListenerMixin(LitElement) {
+class CDSModal extends HostListenerMixin(LitElement) {
   ...
 
   @HostListener('click')
@@ -126,7 +126,7 @@ import Handle from '../../globals/internal/handle';
 
 ...
 
-@customElement(`${ddsPrefix}-some-component`)
+@customElement(`${c4dPrefix}-some-component`)
 class SomeComponent extends LitElement {
   ...
 
@@ -143,7 +143,7 @@ class SomeComponent extends LitElement {
 
   connectedCallback() {
     super.connectedCallback();
-    const { mediaStickExpanded } = this.constructor as typeof DDSFooterNavGroup;
+    const { mediaStickExpanded } = this.constructor as typeof C4DFooterNavGroup;
     // `.matchMedia()` returns an event target
     const mediaQueryList = this.ownerDocument!.defaultView!.matchMedia(mediaStickExpanded);
     this._hChangeMediaQuery = on(mediaQueryList, 'change', this._handleChangeMediaQuery);
@@ -169,9 +169,9 @@ class SomeComponent extends LitElement {
 
 ## Component styles for different component states/variants
 
-Carbon core CSS uses BEM modifier like `bx--btn--danger` to style different states/variants of a component.
+Carbon core CSS uses BEM modifier like `cds--btn--danger` to style different states/variants of a component.
 
-OTOH, similar to `carbonm-custom-elements`, `@carbon/ibmdotcom-web-components` uses attributes to represent different states/variants (e.g. `<bx-btn type="danger">`), in a similar manner as how attributes influence states/variants of native elements (e.g. `<input type="hidden">`).
+OTOH, similar to `carbonm-custom-elements`, `@carbon/ibmdotcom-web-components` uses attributes to represent different states/variants (e.g. `<cds-btn type="danger">`), in a similar manner as how attributes influence states/variants of native elements (e.g. `<input type="hidden">`).
 
 If such states/variants should affect the style of custom element (shadow host), we define attribute styles from the following reasons:
 
@@ -185,7 +185,7 @@ Sometimes a component attribute/property chooses one in the choices. For example
 Instead of using `primary`/`secondary`, etc. directly like this:
 
 ```typescript
-class BXBtn extends LitElement {
+class CDSBtn extends LitElement {
   ...
 
   /**
@@ -228,7 +228,7 @@ export enum BUTTON_KIND {
 
 ...
 
-class BXBtn extends LitElement {
+class CDSBtn extends LitElement {
   ...
 
   /**
@@ -270,7 +270,7 @@ A component variant with different options can be created by creating a derived
 
 This codebase intends to support the components being inherited, to some extent. e.g. Compoennts with different options described above. To support that, it's easier for all properties/methods exposed as `protected`, but it exposes a risk of the component internals being poked around. The current guideline for using `protected` is the following:
 
-- Ones where override happens within this component library (e.g. `<bx-multi-select>` inheriting `<bx-dropdown>`)
+- Ones where override happens within this component library (e.g. `<bx-multi-select>` inheriting `<cds-dropdown>`)
 - Element ID's auto-generation logic
 - (Possibly some more, e.g. ones whose API are stable enough)
 
@@ -300,25 +300,25 @@ One of the greatest things about Web Components is that component's implementati
 
 ### Strive to avoid accessing shadow DOM nodes of other components
 
-Given we are using [`open` mode for Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Basic_usage), access to shadow DOM content won't be prohibited and it's sometime temptative to access shadow DOM nodes of a component from another component, like in `<dds-masthead-menu-button>`:
+Given we are using [`open` mode for Shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM#Basic_usage), access to shadow DOM content won't be prohibited and it's sometime temptative to access shadow DOM nodes of a component from another component, like in `<c4d-masthead-menu-button>`:
 
 `masthead-menu-button.ts`:
 
 ```typescript
 // ❗️ Don't do this
 _handleClick(event: MouseEvent) {
-  // Grab `<dds-left-nav>`
-  const leftNav = document.querySelector('dds-left-nav');
+  // Grab `<cds-left-nav>`
+  const leftNav = document.querySelector('c4d-left-nav');
   // Poke into inner DOM node in shadow DOM
-  const leftNavContentInShadowDOM = leftNav.shadowRoot.querySelector('.dds--left-nav__content');
+  const leftNavContentInShadowDOM = leftNav.shadowRoot.querySelector('.c4d--left-nav__content');
   // Change the CSS class of inner DOM node
-  leftNavContentInShadowDOM.classList.togle('.dds--left-nav__content--shown');
+  leftNavContentInShadowDOM.classList.togle('.c4d--left-nav__content--shown');
 }
 ```
 
-However, it means poking into `<dds-left-nav>`'s implementation details, in a similar manner to accessing `private` properties in a class. And thus when `<dds-left-nav>` removes `dds--left-nav__content` class from the content node (it's an implementation detail) `<dds-masthead-menu-button>` will be broken.
+However, it means poking into `<c4d-left-nav>`'s implementation details, in a similar manner to accessing `private` properties in a class. And thus when `<c4d-left-nav>` removes `c4d--left-nav__content` class from the content node (it's an implementation detail) `<c4d-masthead-menu-button>` will be broken.
 
-The first step to fix this problem is adding an API to `<dds-left-nav>` for adding/removing `dds--left-nav__content--shown` class. For example, we can introduce `active` property to do so:
+The first step to fix this problem is adding an API to `<c4d-left-nav>` for adding/removing `c4d--left-nav__content--shown` class. For example, we can introduce `active` property to do so:
 
 `left-nav.ts`:
 
@@ -329,8 +329,8 @@ active = false;
 render() {
   const { active } = this;
   const classes = classMap({
-    [`${ddsPrefix}--left-nav__content`]: true,
-    [`${ddsPrefix}--left-nav__content__shown`]: active,
+    [`${c4dPrefix}--left-nav__content`]: true,
+    [`${c4dPrefix}--left-nav__content__shown`]: active,
   });
   return html`
     <div class="${classes}">
@@ -342,7 +342,7 @@ render() {
 
 ### Custom events
 
-Another step is adding an API to `<dds-masthead-menu-button>` that tells the user gesture of clicking and translating it to a meaning context to an application ("toggling" in this case):
+Another step is adding an API to `<c4d-masthead-menu-button>` that tells the user gesture of clicking and translating it to a meaning context to an application ("toggling" in this case):
 
 `masthead-menu-button.ts`:
 
@@ -351,7 +351,7 @@ _handleClick(event: MouseEvent) {
   const active = !this.active;
   this.active = active;
   this.dispatchEvent(
-    new CustomEvent((this.constructor as typeof BXHeaderMenuButton).eventToggle, {
+    new CustomEvent((this.constructor as typeof CDSHeaderMenuButton).eventToggle, {
       bubbles: true,
       cancelable: false,
       composed: true,
@@ -363,11 +363,11 @@ _handleClick(event: MouseEvent) {
 }
 
 static get eventToggle() {
-  return `${ddsPrefix}-masthead-menu-button-toggled`;
+  return `${c4dPrefix}-masthead-menu-button-toggled`;
 }
 ```
 
-Above code fires `dds-masthead-menu-button-toggled` custom event so that other components can see when user toggles the state of `<dds-masthead-menu-button>`. For example, `<dds-left-nav>` can listen to `dds-masthead-menu-button-toggled` event and reflect the new state from the event to `<dds-left-nav>`:
+Above code fires `c4d-masthead-menu-button-toggled` custom event so that other components can see when user toggles the state of `<c4d-masthead-menu-button>`. For example, `<c4d-left-nav>` can listen to `c4d-masthead-menu-button-toggled` event and reflect the new state from the event to `<c4d-left-nav>`:
 
 `left-nav.ts`:
 
@@ -379,7 +379,7 @@ private _handleToggleMenuButton(event: CustomEvent) {
 }
 
 static get eventButtonToggle() {
-  return `${ddsPrefix}-header-menu-button-toggled`;
+  return `${c4dPrefix}-header-menu-button-toggled`;
 }
 ```
 
@@ -456,11 +456,12 @@ The second item is **required** for proper creation of the react-wrapped compone
 Example: 
 
 ```typescript
-import { html, property, LitElement } from 'lit-element';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../globals/decorators/carbon-element';
 
 @customElement(`${prefix}-accordion-item`)
-class BXAccordionItem extends FocusMixin(LitElement) {
+class CDSAccordionItem extends FocusMixin(LitElement) {
   ...
 ```
 ### Custom element registration
@@ -475,19 +476,19 @@ It may not be desirable in two scenarios:
 
 In Custom Elements world, the custom element itself (the host of shadow DOM) itself is an element.
 
-When we create a custom element that represents `<li class="bx--footer-nav-group__item">`, it's tempting to render the following in shadow DOM:
+When we create a custom element that represents `<li class="cds--footer-nav-group__item">`, it's tempting to render the following in shadow DOM:
 
 ```typescript
-@customElement(`${ddsPreifx}-footer-nav-item`)
-class DDSFooterNavItem extends LitElement {
+@customElement(`${c4dPrefix}-footer-nav-item`)
+class C4DFooterNavItem extends LitElement {
   ...
 
   render() {
     const { href } = this;
     // ❗️ Don't do this
     return html`
-      <li class="bx--footer-nav-group__item">
-        <a class="bx--footer-nav-group__link bx--footer__link" href="${ifNonNull(href)}">
+      <li class="cds--footer-nav-group__item">
+        <a class="cds--footer-nav-group__link cds--footer__link" href="${ifDefined(href)}">
       </li>
     `;
   }
@@ -496,22 +497,22 @@ class DDSFooterNavItem extends LitElement {
 }
 ```
 
-But if we do this, we end up creating a DOM tree like below, which means, creating `<dds-footer-nav-item>` as an element in addition to the `<li>`:
+But if we do this, we end up creating a DOM tree like below, which means, creating `<c4d-footer-nav-item>` as an element in addition to the `<li>`:
 
 ```html
-<dds-footer-nav-item>
+<c4d-footer-nav-item>
   #shadow-root
-    <li class="bx--footer-nav-group__item">
-      <a class="bx--footer-nav-group__link bx--footer__link" href="https://ibm.com/foo">
+    <li class="cds--footer-nav-group__item">
+      <a class="cds--footer-nav-group__link cds--footer__link" href="https://ibm.com/foo">
     </li>
-</dds-footer-nav-item>
+</c4d-footer-nav-item>
 ```
 
 To solve such redundant DOM element, we do the following instead:
 
 ```typescript
 @customElement(`${ddsPreifx}-footer-nav-item`)
-class DDSFooterNavItem extends LitElement {
+class C4DFooterNavItem extends LitElement {
   ...
 
   connectedCallback() {
@@ -526,7 +527,7 @@ class DDSFooterNavItem extends LitElement {
     const { href } = this;
     // Don't render `<li>` here
     return html`
-      <a class="bx--footer-nav-group__link bx--footer__link" href="${ifNonNull(href)}">
+      <a class="cds--footer-nav-group__link cds--footer__link" href="${ifDefined(href)}">
     `;
   }
 
@@ -534,15 +535,15 @@ class DDSFooterNavItem extends LitElement {
 }
 ```
 
-> 💡 Make sure `:host(#{$ddsPrefix}-footer-nav-item)` the same CSS rules as `#{$prefix}--footer-nav-group__item` in the Sass code.
+> 💡 Make sure `:host(#{$c4dPrefix}-footer-nav-item)` the same CSS rules as `#{$prefix}--footer-nav-group__item` in the Sass code.
 
 > 💡 `<button>` and `<a>` are exceptions to this rule because there is no way to implement the same feature of those tags with a custom element.
 
 ## Propagating misc attributes from shadow host to an element in shadow DOM
 
-Similar to `carbon-web-components`, some components, e.g. `<bx-btn>`, simply represent the content in shadow DOM, e.g. `<button>` in it. It's sometimes desiable for applications to have control of attributes in `<button>`, for example, adding `data-` attributes there.
+Similar to `carbon-web-components`, some components, e.g. `<cds-btn>`, simply represent the content in shadow DOM, e.g. `<button>` in it. It's sometimes desiable for applications to have control of attributes in `<button>`, for example, adding `data-` attributes there.
 
-In such case, we let consumer create a derived class. For example, its `.attributeChangedCallback()` can propagate `<bx-btn>`'s attribute to `<button>` in it.
+In such case, we let consumer create a derived class. For example, its `.attributeChangedCallback()` can propagate `<cds-btn>`'s attribute to `<button>` in it.
 
 ## Private properties
 
@@ -561,7 +562,7 @@ That said, in `@carbon/ibmdotcom-web-components` codebase prefers class inherita
 To highlight this, here is an example of what a preferred inheritance pattern would be:
 
 ```typescript
-class DDSFoo extends DDSBar {
+class C4DFoo extends C4DBar {
   render() {
     return html`
       ${super.render()}(Some additional content)
@@ -573,11 +574,11 @@ class DDSFoo extends DDSBar {
 Whereas this would be a pattern to avoid:
 
 ```typescript
-class DDSFoo extends LitElement {
+class C4DFoo extends LitElement {
   render() {
     return html`
       // ❗️ Consider avoiding this
-      <dds-bar>...</dds-bar>
+      <cds-bar>...</cds-bar>
     `;
   }
 }
@@ -588,12 +589,12 @@ class DDSFoo extends LitElement {
 This repository limits the number of components that works with component data, from the following reasons:
 
 1. It's hard for users to figure out what the correct data structure to set to our components, even if we document it well. For example, an effort to test components with different data can easily cause data scheme validation errors, or (even worse) internal errors, if the component requires complex data structure to use.
-2. Native HTML elements, including custom elements, can handle only primitive data effectively via attributes. For example, `<dds-some-element complex-data="{ foo: { subFoo: 'sub-foo' } }">` is hard to read and has `JSON.parse()`/`JSON.stringify()` overhead. We can use an element property instead of an attribute in this particular case, but properties won't be shown explicitly in e.g. DOM inspectors.
+2. Native HTML elements, including custom elements, can handle only primitive data effectively via attributes. For example, `<c4d-some-element complex-data="{ foo: { subFoo: 'sub-foo' } }">` is hard to read and has `JSON.parse()`/`JSON.stringify()` overhead. We can use an element property instead of an attribute in this particular case, but properties won't be shown explicitly in e.g. DOM inspectors.
 3. Modern templating engines do some sort of data comparisons to determine what portion of UI has to be re-rendered. If many components have to work with complex data, such comparison will be very costful.
 
 But there are certain kind of components that have to work with complex data, which is, ones that manage application-level states. This repository clearly separates such kind of components vs. one that purely represents user interface/interaction, using the following categorization:
 
-- **Container components**: Ones that manage application-level states and/or do data fetching/storing. The elements has `<dds-*-container>` naming rule. Container components may work with dedicated state manager like Redux (often recommended).
+- **Container components**: Ones that manage application-level states and/or do data fetching/storing. The elements has `<c4d-*-container>` naming rule. Container components may work with dedicated state manager like Redux (often recommended).
 - **Leaf components**: Ones that represents user interface/interaction. Most of our components are in this category.
 
 ## Optimizing layout query
diff --git a/packages/web-components/docs/contributing-to-web-components.md b/packages/web-components/docs/contributing-to-web-components.md
index 4f5d183a96e..2e7730f4756 100644
--- a/packages/web-components/docs/contributing-to-web-components.md
+++ b/packages/web-components/docs/contributing-to-web-components.md
@@ -38,11 +38,11 @@ what some of the things we would be looking for as part of your contribution.
 We try to have any contributions to the library to live in their corresponding
 package(s). The main packages to look out for when contributing a Web Component:
 
-- **Styles**: ([@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles)) 
+- **Styles**: ([@carbon/ibmdotcom-styles](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/styles))
 All styles should live in the styles package in the monorepo. This way, the
-styles can be shared with any other framework package (e.g. web components). 
-In addition, the way that web components utilize styles requires that there 
-isn't a heavy amount of nesting happening in the `SCSS` code. 
+styles can be shared with any other framework package (e.g. web components).
+In addition, the way that web components utilize styles requires that there
+isn't a heavy amount of nesting happening in the `SCSS` code.
 - **Services**: ([@carbon/ibmdotcom-services](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/services))
 If your component makes any API requests to a service that does not currently
 exist yet in our Services package, you can add in a new ES6 service class in
@@ -52,13 +52,13 @@ Be sure to properly export the class from the main `index.js`.
 - **Utilities**: ([@carbon/ibmdotcom-utilities](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/utilities))
 Similar to ([Services](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/services)),
 any abstract utilities can be added to the Utilities package as an ES6 class or
-function. Be sure to properly export the class or function from the main 
+function. Be sure to properly export the class or function from the main
 `index.js`.
 
 ## JSDoc
 
 It is important that the component includes full documentation using `JSDoc`
-standards. Our codebase uses `web-component-analyzer` to output the 
+standards. Our codebase uses `web-component-analyzer` to output the
 `custom-elements.json` for rendering the prop tables in our Storybook Docs for
 each component. When documenting, be sure to capture:
 
@@ -68,19 +68,19 @@ each component. When documenting, be sure to capture:
 
 ## Stable Selectors
 
-Every component must include [stable selectors](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/stable-selectors.md) 
+Every component must include [stable selectors](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/stable-selectors.md)
 as part of the overall markup, identifying any key elements that would be useful
 to have the ability to identify in a DOM search. At minimum, there should be at
-least a container level stable selector defined, and all should use the `dds--`
-prefix identified from the utilities package. 
+least a container level stable selector defined, and all should use the `cds--`
+prefix identified from the utilities package.
 
 Our codebase provides a `StableSelectorMixin`, which is used for automatically
-setting the `data-autoid` based on the custom element name for the wrapper 
+setting the `data-autoid` based on the custom element name for the wrapper
 element:
 
 ```javascript
-@customElement(`${ddsPrefix}-my-component`)
-class DDSMyComponent extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-my-component`)
+class C4DMyComponent extends StableSelectorMixin(LitElement) {
   ...
   render() {
     return html`
@@ -89,21 +89,21 @@ class DDSMyComponent extends StableSelectorMixin(LitElement) {
   }
 
   static styles = styles;
-} // => <dds-my-component data-autoid="dds--my-component"></dds-my-component>
+} // => <c4d-my-component data-autoid="c4d--my-component"></c4d-my-component>
 ```
 
 ## Feature Flag
 
-If this is a new component or enhancement, we would require that it is 
-introduced into Carbon for IBM.com behind a feature flag. 
+If this is a new component or enhancement, we would require that it is
+introduced into Carbon for IBM.com behind a feature flag.
 
 [You can read full details on how to create and implement a feature flag here](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/docs/feature-flags.md).
 
 ## Environment Variables
 
-If introducing any new environment variables (e.g. feature flags), be sure to 
-also update the `.env.example` file at the root of the Web Components package 
-folder. The example should include a good description of what the environment 
+If introducing any new environment variables (e.g. feature flags), be sure to
+also update the `.env.example` file at the root of the Web Components package
+folder. The example should include a good description of what the environment
 variable does.
 
 ## Storybook
@@ -112,16 +112,16 @@ In storybook, we are looking for the following criteria:
 
 - Blend of configurable knobs to multiple sub-stories that capture full
 functionality and features. When it makes sense, break down to multiple stories
-so that our automated visual regression tool ([Percy](https://percy.io)) can 
-automatically capture in its snapshot suite rather than creating multiple 
+so that our automated visual regression tool ([Percy](https://percy.io)) can
+automatically capture in its snapshot suite rather than creating multiple
 knobs.
 - Knob labels include the actual prop name in parenthesis
-- README (`README.stories.mdx`) with clear instructions for any Carbon for 
+- README (`README.stories.mdx`) with clear instructions for any Carbon for
 IBM.com user to get started right away. This would include:
   * Which import(s) to include
-  * How to implement in a sample application (multiple examples if 
+  * How to implement in a sample application (multiple examples if
     necessary)
-  * Environment variable description and implementation details (if introducing 
+  * Environment variable description and implementation details (if introducing
     a new component)
   * Prop table
   * Stable Selectors table
@@ -129,14 +129,14 @@ IBM.com user to get started right away. This would include:
 
 ## Unit Test Coverage
 
-Our team looks to include a minimum of 80% unit test coverage. One of the 
-features that we have included is automated snapshot testing, which will 
-auto-generate snapshot tests based on existing storybook stories. 
+Our team looks to include a minimum of 80% unit test coverage. One of the
+features that we have included is automated snapshot testing, which will
+auto-generate snapshot tests based on existing storybook stories.
 While this gives automatic coverage right off the bat, additional unit tests
 may be required to get over the 80% goal. All component level tests must live
 in the component folder under a sub-folder `__tests__`. The file name structure
 should be `my-component.test.js`. Be sure to include any mock data (if necessary)
-in a `data` subfolder under `__tests__`. 
+in a `data` subfolder under `__tests__`.
 
 All commands below should be run at `packages/web-components` directory.
 
@@ -144,10 +144,10 @@ To view a coverage report (and run the test suite), you can run:
 
 ```bash
 yarn test:unit
-``` 
+```
 
-This will generate a `coverage` folder under the package level `tests` folder 
-which includes what the current coverage amount is, and which line(s) are 
+This will generate a `coverage` folder under the package level `tests` folder
+which includes what the current coverage amount is, and which line(s) are
 missing any coverage.
 
 To update the snapshot file, run the following:
diff --git a/packages/web-components/docs/feature-flags.md b/packages/web-components/docs/feature-flags.md
index 2ccb95a3f94..ef8518d575e 100644
--- a/packages/web-components/docs/feature-flags.md
+++ b/packages/web-components/docs/feature-flags.md
@@ -25,35 +25,35 @@ not be ready for the next release, etc.
 
 ## Creating a Feature Flag
 
-Within the file `/packages/web-components/src/globals/internal/feature-flags.ts`, 
+Within the file `/packages/web-components/src/globals/internal/feature-flags.ts`,
 add a line with the following structure:
 
 ```javascript
-export const DDS_FEATURE_NAME: boolean = process.env.DDS_FEATURE_NAME === 'true' || DDS_FLAGS_ALL || false;
+export const C4D_FEATURE_NAME: boolean = process.env.C4D_FEATURE_NAME === 'true' || C4D_FLAGS_ALL || false;
 ```
 
-Then, add `DDS_FEATURE_NAME` to `.env.example` in the root of the package:
+Then, add `C4D_FEATURE_NAME` to `.env.example` in the root of the package:
 
 ```text
 # Feature Flags
-DDS_FEATURE_NAME=<boolean flag to turn on or off feature xyz>
+C4D_FEATURE_NAME=<boolean flag to turn on or off feature xyz>
 ```
 
 ## Activating Feature Flag in Unit Tests
 
-In order for unit tests to pass, the feature flag needs to be activated in 
-the unit test configuration. To do this, in 
-`packages/web-components/tests/karma.conf.js`, add the following in 
+In order for unit tests to pass, the feature flag needs to be activated in
+the unit test configuration. To do this, in
+`packages/web-components/tests/karma.conf.js`, add the following in
 `DefinePlugin`:
 
 ```javascript
 new webpack.DefinePlugin({
-  'process.env.DDS_FEATURE_NAME': JSON.stringify('true'),
+  'process.env.C4D_FEATURE_NAME': JSON.stringify('true'),
 })
 ```
 
 > NOTE: You may need to also add a `@ts-ignore` to your test as typescript
-> checks will throw an error if a component may return `undefined`: 
+> checks will throw an error if a component may return `undefined`:
 
 ```javascript
 import { Default } from '../__stories__/feature-name.stories';
@@ -63,7 +63,7 @@ const template = (props?) =>
   Default({
     parameters: {
       props: {
-        'dds-feature-name': props,
+        'c4d-feature-name': props,
       },
     },
   });
@@ -77,47 +77,47 @@ Once a flag is created, it can then be imported for use within a component.
 For example:
 
 ```javascript
-import { LitElement } from 'lit-element';
-import { DDS_FEATURE_NAME } from '../../globals/internal/feature-flags';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-const { stablePrefix: ddsPrefix } = ddsSettings;
+import { LitElement } from 'lit';
+import { C4D_FEATURE_NAME } from '../../globals/internal/feature-flags';
+import c4dSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+const { stablePrefix: c4dPrefix } = ddsSettings;
 
 /**
  * EXPERIMENTAL: My Feature
  *
- * @element dds-my-feature
+ * @element c4d-my-feature
  */
-class DDSMyFeature extends LitElement {
+class C4DMyFeature extends LitElement {
   ...
 }
 // Define the new element
-if (DDS_FEATURE_NAME) {
-  customElements.define(`${ddsPrefix}-callout-data`, DDSMyFeature);
+if (C4D_FEATURE_NAME) {
+  customElements.define(`${c4dPrefix}-callout-data`, C4DMyFeature);
 }
 
-export default !DDS_FEATURE_NAME ? undefined : DDSMyFeature;
+export default !C4D_FEATURE_NAME ? undefined : C4DMyFeature;
 ```
 
 ## Wrapping Storybook Stories with Feature Flags
 
 When rendering the Storybook instance, experimental features should not appear
-unless the flag is enabled. Any storybook stories should be exported with the 
+unless the flag is enabled. Any storybook stories should be exported with the
 feature flag:
 
 ```javascript
 import { number, select, text } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
 import '../my-feature';
-import { DDS_MY_FEATURE } from '../../../internal/feature-flags';
+import { C4D_MY_FEATURE } from '../../../internal/feature-flags';
 
-export const Default = !DDS_MY_FEATURE
+export const Default = !C4D_MY_FEATURE
   ? undefined
   : args => {
       ...
     };
 
-export default !DDS_MY_FEATURE
+export default !C4D_MY_FEATURE
  ? undefined
  : {
      title: 'Components/My feature',
@@ -127,7 +127,7 @@ export default !DDS_MY_FEATURE
 
 ## Turning On/Off Feature Flags Locally
 
-To enable a feature locally, follow the instructions on [environment variables](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/react/docs/environment-variables.md).
+To enable a feature locally, follow the below instructions: 
 
 Replace the helper text with the value `true`. For example:
 
@@ -135,7 +135,7 @@ Replace the helper text with the value `true`. For example:
 
 ```text
 # Feature Flags
-DDS_FEATURE_NAME=true
+C4D_FEATURE_NAME=true
 ```
 
 Once the flag is in place, storybook can be deployed and will honor the flag.
diff --git a/packages/web-components/docs/markdown-contents.md b/packages/web-components/docs/markdown-contents.md
index ec0aa4eb8a4..fec5f4ac65f 100644
--- a/packages/web-components/docs/markdown-contents.md
+++ b/packages/web-components/docs/markdown-contents.md
@@ -3,7 +3,7 @@
 ## Table of contents
 
 - [Markdown contents](#markdown-contents)
-  - [Using `<dds-content-*-copy>`](#using-dds-content--copy)
+  - [Using `<c4d-content-*-copy>`](#using-c4d-content--copy)
   - [Rendering markdown on server](#rendering-markdown-on-server)
   - [Use raw HTML](#use-raw-html)
 
@@ -11,11 +11,11 @@
 
 ## Markdown contents
 
-In most cases, `<dds-content-*>` is used with its "copy" content. There are several ways to specify the copy content.
+In most cases, `<c4d-content-*>` is used with its "copy" content. There are several ways to specify the copy content.
 
-### Using `<dds-content-*-copy>`
+### Using `<c4d-content-*-copy>`
 
-`<dds-content-*-copy>` are Web Components that automatically renders the given markdown content to HTML. It takes either `content` property (_not_ attribute) or child text node as the markdown content. The markdown content will be converted to HTML with sanitization.
+`<c4d-content-*-copy>` are Web Components that automatically renders the given markdown content to HTML. It takes either `content` property (_not_ attribute) or child text node as the markdown content. The markdown content will be converted to HTML with sanitization.
 
 Given the nature of child text node, some extra caution is required to use child text node as the markdown content:
 
@@ -25,7 +25,7 @@ Given the nature of child text node, some extra caution is required to use child
 
 ### Rendering markdown on server
 
-While `<dds-content-*-copy>` provides an easy way to use markdown for `<dds-content-*>`, it requires markdown parser and HTML sanitizer has to be downloaded and run in browser. To reduce the cost of downloading and running, especially if the target network and device environment is limiting, rendering markdown on server is often helpful.
+While `<c4d-content-*-copy>` provides an easy way to use markdown for `<c4d-content-*>`, it requires markdown parser and HTML sanitizer has to be downloaded and run in browser. To reduce the cost of downloading and running, especially if the target network and device environment is limiting, rendering markdown on server is often helpful.
 
 For example, a Handlebars helper that works with the Carbon for IBM.com [`markdownToHtml` utility](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/v1.12.0/packages/utilities/src/utilities/markdownToHtml/markdownToHtml.js) can be defined to convert generated HTML from markdown content:
 
@@ -43,7 +43,7 @@ Handlebars.registerHelper('markdown', options => {
 Such Handlebars helper can be used like:
 
 ```handlebars
-<div class="bx--content-item__copy">
+<div class="cds--content-item__copy">
   {{{{markdown}}}}
 Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
 Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
@@ -58,7 +58,7 @@ some common categories:
 </div>
 ```
 
-> 💡 Make sure loading the Sass code for the corresponding CSS class for the "copy" content. For example, one for `bx--content-item__copy` class is defined in `@carbon/ibmdotcom-styles/scss/internal/content-item/content-item`.
+> 💡 Make sure loading the Sass code for the corresponding CSS class for the "copy" content. For example, one for `cds--content-item__copy` class is defined in `@carbon/ibmdotcom-styles/scss/internal/content-item/content-item`.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/usage/markdown-handlebars)
@@ -71,28 +71,28 @@ some common categories:
 Another way to define the "copy" content is using raw HTML:
 
 ```html
-<div class="bx--content-item__copy">
+<div class="cds--content-item__copy">
   <p>
     Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
     hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, <em>consequat</em> libero. Here are some common categories:
   </p>
-  <ul class="bx--list--unordered">
-    <li class="bx--list__item">
-      <a href="https://www.ibm.com" class="bx--link">list item</a>
-      <ol class="bx--list--ordered">
-        <li class="bx--list__item">list item 1a</li>
+  <ul class="csd--list--unordered">
+    <li class="cds--list__item">
+      <a href="https://www.ibm.com" class="cds--link">list item</a>
+      <ol class="cds--list--ordered">
+        <li class="cds--list__item">list item 1a</li>
       </ol>
     </li>
   </ul>
-  <ol class="bx--list--ordered">
-    <li class="bx--list__item">
+  <ol class="cds--list--ordered">
+    <li class="cds--list__item">
       list item 2
-      <ul class="bx--list--unordered">
-        <li class="bx--list__item">list item 2a</li>
+      <ul class="cds--list--unordered">
+        <li class="cds--list__item">list item 2a</li>
       </ul>
     </li>
   </ol>
 </div>
 ```
 
-> 💡 Make sure loading the Sass code for the corresponding CSS class for the "copy" content. For example, one for `bx--content-item__copy` class is defined in `@carbon/ibmdotcom-styles/scss/internal/content-item/content-item`.
+> 💡 Make sure loading the Sass code for the corresponding CSS class for the "copy" content. For example, one for `cds--content-item__copy` class is defined in `@carbon/ibmdotcom-styles/scss/internal/content-item/content-item`.
diff --git a/packages/web-components/docs/stable-selectors.md b/packages/web-components/docs/stable-selectors.md
index cb910ce8d87..5d45605d406 100644
--- a/packages/web-components/docs/stable-selectors.md
+++ b/packages/web-components/docs/stable-selectors.md
@@ -11,22 +11,22 @@
 
 `@carbon/ibmdotcom-react`, etc. libraries have `data-autoid` attributes in several places, to convey better context for example in analytics libraries when they capture bubbling events (e.g. `click` on `<body>` and inspect `event.target`). `data-autoid` is more useful than having to inspect contents in raw HTML `<div>` tags, etc., because `data-autoid` augments raw `<div>` tags with the context of application structure whereas raw `<div>` tags themselves tend to only convey how the UI should look. We call such `data-autoid` attributes "stable selectors".
 
-`@carbon/ibmdotcom-web-components`, being based on Web Components, abstracts away such raw HTML `<div>`, etc. tags, into e.g. `<dds-header-logo>` (one for the IBM logo in masthead) and `<dds-masthead-search>` (one for the collapsible search box in masthead).
+`@carbon/ibmdotcom-web-components`, being based on Web Components, abstracts away such raw HTML `<div>`, etc. tags, into e.g. `<cds-header-logo>` (one for the IBM logo in masthead) and `<cds-masthead-search>` (one for the collapsible search box in masthead).
 
 It means that in Web Components world, tag names and their attributes will convey application structure, without having to rely on "stable selectors". For example, analytics code can do something like:
 
 ```javascript
 document.body.addEventListener('click', event => {
-  if (event.target.tagName === 'DDS-MASTHEAD-LOGO') {
+  if (event.target.tagName === 'C4D-MASTHEAD-LOGO') {
     // Code to send header logo click event to analytics...
   }
 });
 ```
 
-`<dds-masthead-search>` has more than one clickable button. Therefore, `<dds-masthead-search>` fires custom events e.g. `dds-masthead-search-toggled` to better convey the context with respect to what action is taken upon clicking. You can use it like:
+`<c4d-masthead-search>` has more than one clickable button. Therefore, `<c4d-masthead-search>` fires custom events e.g. `c4d-masthead-search-toggled` to better convey the context with respect to what action is taken upon clicking. You can use it like:
 
 ```javascript
-document.body.addEventListener('dds-masthead-search-toggled', event => {
+document.body.addEventListener('c4d-masthead-search-toggled', event => {
   console.log('Search box new open state:', event.detail.active);
   // Code to send masthead search bar toggle event to analytics...
 });
diff --git a/packages/web-components/examples/codesandbox/components-react/background-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/background-media/src/index.js
index 427d1f41634..47765d98193 100644
--- a/packages/web-components/examples/codesandbox/components-react/background-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/background-media/src/index.js
@@ -9,32 +9,32 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 import './index.css';
 
 const App = () => (
-  <DDSBackgroundMedia
+  <C4DBackgroundMedia
     gradient-direction={'left-to-right'}
     mobile-position=""
     alt={'Image alt text'}
     default-src={'https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616'}>
-    <DDSImageItem
+    <C4DImageItem
       media="(min-width: 1584px)"
-      srcset={'https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-    <DDSImageItem
+      srcset={'https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+    <C4DImageItem
       media="(min-width: 1312px)"
-      srcset={'https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-    <DDSImageItem
+      srcset={'https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+    <C4DImageItem
       media="(min-width: 672px)"
-      srcset={'https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-    <DDSImageItem
+      srcset={'https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+    <C4DImageItem
       media="(min-width: 320px)"
-      srcset={'https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-    <DDSImageItem
+      srcset={'https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+    <C4DImageItem
       media="(min-width: 0px)"
-      srcset={'https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-  </DDSBackgroundMedia>
+      srcset={'https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+  </C4DBackgroundMedia>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js b/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
index 053b5d68b32..8155601a44c 100644
--- a/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/button-group/src/index.js
@@ -9,22 +9,19 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
 import './index.css';
 
 const App = () => (
-  <DDSButtonGroup>
-    <DDSButtonGroupItem href="https://www.example.com">
-      <ArrowRight20 slot="icon" />
+  <C4DButtonGroup>
+    <C4DButtonGroupItem href="https://www.example.com" cta-type="local">
       Button 1
-    </DDSButtonGroupItem>
-    <DDSButtonGroupItem href="https://www.example.com">
-      <ArrowRight20 slot="icon" />
+    </C4DButtonGroupItem>
+    <C4DButtonGroupItem href="https://www.example.com" cta-type="local">
       Button 2
-    </DDSButtonGroupItem>
-  </DDSButtonGroup>
+    </C4DButtonGroupItem>
+  </C4DButtonGroup>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/react/examples/codesandbox/components/MastheadL1/.gitignore b/packages/web-components/examples/codesandbox/components-react/button/.gitignore
similarity index 100%
rename from packages/react/examples/codesandbox/components/MastheadL1/.gitignore
rename to packages/web-components/examples/codesandbox/components-react/button/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/index.html b/packages/web-components/examples/codesandbox/components-react/button/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-banner/index.html
rename to packages/web-components/examples/codesandbox/components-react/button/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/button/package.json b/packages/web-components/examples/codesandbox/components-react/button/package.json
new file mode 100644
index 00000000000..243a630d120
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "ibmdotcom-web-components-react-button-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
+  "license": "Apache-2",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest",
+    "@carbon/icons-react": "~10.22.0",
+    "carbon-components": "~10.23.0",
+    "lit-element": "^2.5.1",
+    "lit-html": "^1.4.1",
+    "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.10.0",
+    "@types/lodash-es": "^4.17.0",
+    "@types/react": "^16.9.0",
+    "babel-loader": "^8.2.0",
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/Card/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/Card/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components-react/button/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/src/index.css b/packages/web-components/examples/codesandbox/components-react/button/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-banner/src/index.css
rename to packages/web-components/examples/codesandbox/components-react/button/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/button/src/index.js b/packages/web-components/examples/codesandbox/components-react/button/src/index.js
new file mode 100644
index 00000000000..a2b00b0d8d1
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/button/src/index.js
@@ -0,0 +1,19 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 'react-dom';
+import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import './index.css';
+
+const App = () => (
+  <DDSButton href="https://www.example.com" cta-type="local">Button text</DDSButton>
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/button/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/pictogram-item/webpack.config.js
rename to packages/web-components/examples/codesandbox/components-react/button/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js b/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js
index baaea716223..ca8e0ecbd19 100644
--- a/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/callout-quote/src/index.js
@@ -9,24 +9,23 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
-import DDSCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
+import C4DCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 import './index.css';
 
 const App = () => (
-  <DDSCalloutQuote mark-type="double-curved">
+  <C4DCalloutQuote mark-type="double-curved">
     Bringing together the technology and expertise for a new way to create
-    <DDSQuoteSourceHeading>John Doe</DDSQuoteSourceHeading>
-    <DDSQuoteSourceCopy>Senior Vice President</DDSQuoteSourceCopy>
-    <DDSQuoteSourceBottomCopy>IBM Cloud</DDSQuoteSourceBottomCopy>
-    <DDSCalloutLinkWithIcon slot="footer" href="https://example.com">
-      Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-    </DDSCalloutLinkWithIcon>
-  </DDSCalloutQuote>
+    <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
+    <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>
+    <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
+    <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+      Link with icon
+    </C4DCalloutLinkWithIcon>
+  </C4DCalloutQuote>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.js
index 3f096b97663..9261065e896 100644
--- a/packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/callout-with-media/src/index.js
@@ -9,21 +9,21 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
-import DDSCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
+import C4DCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
+import C4DCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
 import './index.css';
 
 const App = () => (
-  <DDSCalloutWithMedia>
-    <DDSContentBlockHeading>Curabitur malesuada varius mi eu posuere</DDSContentBlockHeading>
-    <DDSCalloutWithMediaCopy size="sm">lorum ipsum dolor sit ameet</DDSCalloutWithMediaCopy>
-    <DDSCalloutWithMediaImage
+  <C4DCalloutWithMedia>
+    <C4DContentBlockHeading>Curabitur malesuada varius mi eu posuere</C4DContentBlockHeading>
+    <C4DCalloutWithMediaCopy size="sm">lorum ipsum dolor sit ameet</C4DCalloutWithMediaCopy>
+    <C4DCalloutWithMediaImage
       alt="Image alt text"
       default-src={'https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616'}
-      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></DDSCalloutWithMediaImage>
-  </DDSCalloutWithMedia>
+      heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></C4DCalloutWithMediaImage>
+  </C4DCalloutWithMedia>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/card-group/src/index.js b/packages/web-components/examples/codesandbox/components-react/card-group/src/index.js
index 27941446f54..3eac83ed28a 100644
--- a/packages/web-components/examples/codesandbox/components-react/card-group/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/card-group/src/index.js
@@ -10,75 +10,75 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import './index.css';
 
 const App = () => (
-  <DDSCardGroup>
-    <DDSCardGroupItem href="https://example.com">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+  <C4DCardGroup>
+    <C4DCardGroupItem href="https://example.com">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
         Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer">
+      <C4DCardCTAFooter slot="footer">
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardGroupItem>
-    <DDSCardGroupItem href="https://example.com">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+      </C4DCardCTAFooter>
+    </C4DCardGroupItem>
+    <C4DCardGroupItem href="https://example.com">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
         Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer">
+      <C4DCardCTAFooter slot="footer">
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardGroupItem>
-    <DDSCardGroupItem href="https://example.com">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+      </C4DCardCTAFooter>
+    </C4DCardGroupItem>
+    <C4DCardGroupItem href="https://example.com">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
         Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer">
+      <C4DCardCTAFooter slot="footer">
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardGroupItem>
-    <DDSCardGroupItem href="https://example.com">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+      </C4DCardCTAFooter>
+    </C4DCardGroupItem>
+    <C4DCardGroupItem href="https://example.com">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
         Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer">
+      <C4DCardCTAFooter slot="footer">
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardGroupItem>
-    <DDSCardGroupItem href="https://example.com">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+      </C4DCardCTAFooter>
+    </C4DCardGroupItem>
+    <C4DCardGroupItem href="https://example.com">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
         Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer">
+      <C4DCardCTAFooter slot="footer">
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardGroupItem>
-    <DDSCardGroupItem href="https://example.com" colorScheme="inverse">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+      </C4DCardCTAFooter>
+    </C4DCardGroupItem>
+    <C4DCardGroupItem href="https://example.com" colorScheme="inverse">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
         Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer" colorScheme="inverse">
+      <C4DCardCTAFooter slot="footer" colorScheme="inverse">
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardGroupItem>
-  </DDSCardGroup>
+      </C4DCardCTAFooter>
+    </C4DCardGroupItem>
+  </C4DCardGroup>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.js b/packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.js
index 8c99996499b..500104fa5f1 100644
--- a/packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/card-in-card/src/index.js
@@ -10,27 +10,27 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import './index.css';
 
 const App = () => (
-  <DDSCardInCard href="https://example.com">
-    <DDSCardInCardImage slot="image" alt="Image alt text" default-src="https://picsum.photos/id/1076/480/360">
-      <DDSImageItem media="(min-width: 1312px)" srcset="https://picsum.photos/id/1076/1312/738"></DDSImageItem>
-      <DDSImageItem media="(min-width: 672px)" srcset="https://picsum.photos/id/1076/960/540"></DDSImageItem>
-      <DDSImageItem media="(min-width: 320px)" srcset="https://picsum.photos/id/1076/480/360"></DDSImageItem>
-    </DDSCardInCardImage>
-    <DDSCardEyebrow>Label</DDSCardEyebrow>
-    <DDSCardHeading>Standard Bank Group prepares to embrace Africa’s AI opportunity</DDSCardHeading>
-    <DDSCardCTAFooter>
+  <C4DCardInCard href="https://example.com">
+    <C4DCardInCardImage slot="image" alt="Image alt text" default-src="https://picsum.photos/id/1076/480/360">
+      <C4DImageItem media="(min-width: 1312px)" srcset="https://picsum.photos/id/1076/1312/738"></C4DImageItem>
+      <C4DImageItem media="(min-width: 672px)" srcset="https://picsum.photos/id/1076/960/540"></C4DImageItem>
+      <C4DImageItem media="(min-width: 320px)" srcset="https://picsum.photos/id/1076/480/360"></C4DImageItem>
+    </C4DCardInCardImage>
+    <C4DCardEyebrow>Label</C4DCardEyebrow>
+    <C4DCardHeading>Standard Bank Group prepares to embrace Africa’s AI opportunity</C4DCardHeading>
+    <C4DCardCTAFooter>
       <ArrowRight20 slot="icon" />
-    </DDSCardCTAFooter>
-  </DDSCardInCard>
+    </C4DCardCTAFooter>
+  </C4DCardInCard>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/card-link/src/index.js b/packages/web-components/examples/codesandbox/components-react/card-link/src/index.js
index 196ee541ec1..7e137c70e7e 100644
--- a/packages/web-components/examples/codesandbox/components-react/card-link/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/card-link/src/index.js
@@ -9,20 +9,20 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <DDSCardLink href="https://example.com">
-    <DDSCardLinkHeading>Heading text</DDSCardLinkHeading>
+  <C4DCardLink href="https://example.com">
+    <C4DCardLinkHeading>Heading text</C4DCardLinkHeading>
     <p>Optional copy text</p>
-    <DDSCardFooter>
+    <C4DCardFooter>
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSCardLink>
+    </C4DCardFooter>
+  </C4DCardLink>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.js b/packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.js
index 280e60cfdd9..5199df29d2c 100644
--- a/packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/card-section-offset/src/index.js
@@ -9,56 +9,56 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardSectionOffset from '@carbon/ibmdotcom-web-components/es/components-react/card-section-offset/card-section-offset';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardSectionOffset from '@carbon/ibmdotcom-web-components/es/components-react/card-section-offset/card-section-offset';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 import './index.css';
 
 const App = () => (
-  <DDSCardSectionOffset>
-    <DDSBackgroundMedia
+  <C4DCardSectionOffset>
+    <C4DBackgroundMedia
       gradient-direction="left-to-right"
       mobile-position="top"
       alt={'alt'}
-      default-src={'https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616'}></DDSBackgroundMedia>
-    <DDSContentBlockHeading slot="heading">Heading</DDSContentBlockHeading>
-    <DDSTextCTA slot="action" icon-placement="right" cta-type={'local'} href={'https://example.com'}>
+      default-src={'https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616'}></C4DBackgroundMedia>
+    <C4DContentBlockHeading slot="heading">Heading</C4DContentBlockHeading>
+    <C4DTextCTA slot="action" icon-placement="right" cta-type={'local'} href={'https://example.com'}>
       Copy
-    </DDSTextCTA>
-    <DDSCardGroup slot="card-group" cards-per-row="2">
-      <DDSCardGroupItem empty></DDSCardGroupItem>
-      <DDSCardGroupItem href="https://example.com">
-        <DDSCardEyebrow>Label</DDSCardEyebrow>
-        <DDSCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</DDSCardHeading>
+    </C4DTextCTA>
+    <C4DCardGroup slot="card-group" cards-per-row="2">
+      <C4DCardGroupItem empty></C4DCardGroupItem>
+      <C4DCardGroupItem href="https://example.com">
+        <C4DCardEyebrow>Label</C4DCardEyebrow>
+        <C4DCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</C4DCardHeading>
         <p>Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis</p>
-        <DDSCardCTAFooter slot="footer">
+        <C4DCardCTAFooter slot="footer">
           <ArrowRight20 slot="icon" />
-        </DDSCardCTAFooter>
-      </DDSCardGroupItem>
-      <DDSCardGroupItem href="https://example.com">
-        <DDSCardEyebrow>Label</DDSCardEyebrow>
-        <DDSCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</DDSCardHeading>
+        </C4DCardCTAFooter>
+      </C4DCardGroupItem>
+      <C4DCardGroupItem href="https://example.com">
+        <C4DCardEyebrow>Label</C4DCardEyebrow>
+        <C4DCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</C4DCardHeading>
         <p>Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis</p>
-        <DDSCardCTAFooter slot="footer">
+        <C4DCardCTAFooter slot="footer">
           <ArrowRight20 slot="icon" />
-        </DDSCardCTAFooter>
-      </DDSCardGroupItem>
-      <DDSCardGroupItem href="https://example.com">
-        <DDSCardEyebrow>Label</DDSCardEyebrow>
-        <DDSCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</DDSCardHeading>
+        </C4DCardCTAFooter>
+      </C4DCardGroupItem>
+      <C4DCardGroupItem href="https://example.com">
+        <C4DCardEyebrow>Label</C4DCardEyebrow>
+        <C4DCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</C4DCardHeading>
         <p>Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis</p>
-        <DDSCardCTAFooter slot="footer">
+        <C4DCardCTAFooter slot="footer">
           <ArrowRight20 slot="icon" />
-        </DDSCardCTAFooter>
-      </DDSCardGroupItem>
-    </DDSCardGroup>
-  </DDSCardSectionOffset>
+        </C4DCardCTAFooter>
+      </C4DCardGroupItem>
+    </C4DCardGroup>
+  </C4DCardSectionOffset>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js b/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js
index 4ec62c3b2a1..cd4067d6ee3 100644
--- a/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/card-section-simple/src/index.js
@@ -9,75 +9,75 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4">
-        <DDSCardSectionSimple>
-          <DDSContentSectionHeading>Aliquam condimentum interdum</DDSContentSectionHeading>
-          <DDSCardGroup>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4">
+        <C4DCardSectionSimple>
+          <C4DContentSectionHeading>Aliquam condimentum interdum</C4DContentSectionHeading>
+          <C4DCardGroup>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter slot="footer">
+              <C4DCardCTAFooter slot="footer">
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter slot="footer">
+              <C4DCardCTAFooter slot="footer">
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter slot="footer">
+              <C4DCardCTAFooter slot="footer">
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter slot="footer">
+              <C4DCardCTAFooter slot="footer">
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter slot="footer">
+              <C4DCardCTAFooter slot="footer">
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-          </DDSCardGroup>
-        </DDSCardSectionSimple>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+          </C4DCardGroup>
+        </C4DCardSectionSimple>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/card/src/index.js b/packages/web-components/examples/codesandbox/components-react/card/src/index.js
index 5f50031fc89..fd05003d218 100644
--- a/packages/web-components/examples/codesandbox/components-react/card/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/card/src/index.js
@@ -9,22 +9,22 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card.js';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card.js';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <DDSCard href="https://example.com">
-    <DDSCardEyebrow>Eyebrow text</DDSCardEyebrow>
-    <DDSCardHeading>Heading text</DDSCardHeading>
+  <C4DCard href="https://example.com">
+    <C4DCardEyebrow>Eyebrow text</C4DCardEyebrow>
+    <C4DCardHeading>Heading text</C4DCardHeading>
     <p>Optional copy text</p>
-    <DDSCardFooter>
+    <C4DCardFooter>
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSCard>
+    </C4DCardFooter>
+  </C4DCard>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
index cf151ee97c7..9e7f0ee7811 100644
--- a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
@@ -9,11 +9,10 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 import './index.css';
 
 const headingDefault = 'Lorem ipsum dolor sit amet';
@@ -25,23 +24,22 @@ const copyOdd = `
 
 // eslint-disable-next-line react/prop-types
 const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => (
-  <DDSCard href="https://www.ibm.com/standards/carbon">
-    <DDSCardHeading>{heading}</DDSCardHeading>
-    {copy}
-    <DDSCardFooter>
-      <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSCard>
+  <C4DCard href="https://www.ibm.com/standards/carbon" cta-type="local">
+    <C4DCardHeading>{heading}</C4DCardHeading>
+    <p>{copy}</p>
+    <C4DCardFooter>
+    </C4DCardFooter>
+  </C4DCard>
 );
 
 const App = () => (
-  <DDSCarousel>
+  <C4DCarousel>
     <Card />
     <Card copy={copyOdd} />
     <Card />
     <Card copy={copyOdd} />
     <Card />
-  </DDSCarousel>
+  </C4DCarousel>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js
index 71e829436c5..2deff017d2e 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-cards/src/index.js
@@ -9,65 +9,65 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
-        <DDSContentBlockCards>
-          <DDSContentBlockHeading>Lorem ipsum dolor sit amet</DDSContentBlockHeading>
-          <DDSCardGroup>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+        <C4DContentBlockCards>
+          <C4DContentBlockHeading>Lorem ipsum dolor sit amet</C4DContentBlockHeading>
+          <C4DCardGroup>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter>
+              <C4DCardCTAFooter>
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter>
+              <C4DCardCTAFooter>
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter>
+              <C4DCardCTAFooter>
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-            <DDSCardGroupItem href="https://example.com">
-              <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+            <C4DCardGroupItem href="https://example.com">
+              <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
               </p>
-              <DDSCardCTAFooter>
+              <C4DCardCTAFooter>
                 <ArrowRight20 slot="icon" />
-              </DDSCardCTAFooter>
-            </DDSCardGroupItem>
-          </DDSCardGroup>
-        </DDSContentBlockCards>
+              </C4DCardCTAFooter>
+            </C4DCardGroupItem>
+          </C4DCardGroup>
+        </C4DContentBlockCards>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
index 120e8327481..cf7379a9f70 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-horizontal/src/index.js
@@ -9,35 +9,35 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 import './index.css';
 
 const App = () => (
-  <DDSContentBlockHorizontal>
-    <DDSContentBlockHeading>Lorem ipsum dolor sit amet</DDSContentBlockHeading>
-    <DDSContentItemHorizontal>
-      <DDSContentItemHorizontalEyebrow>Lorem ipsum</DDSContentItemHorizontalEyebrow>
-      <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-      <DDSContentItemHorizontalCopy>Lorem ipsum dolor sit amet</DDSContentItemHorizontalCopy>
-      <DDSLinkList slot="footer" type="vertical">
-        <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+  <C4DContentBlockHorizontal>
+    <C4DContentBlockHeading>Lorem ipsum dolor sit amet</C4DContentBlockHeading>
+    <C4DContentItemRow>
+      <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
+      <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+      <C4DContentItemRowCopy>Lorem ipsum dolor sit amet</C4DContentItemRowCopy>
+      <C4DLinkList slot="footer" type="vertical">
+        <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
           Link text
-        </DDSLinkListItemCTA>
-        <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
           External link text
-        </DDSLinkListItemCTA>
-      </DDSLinkList>
-    </DDSContentItemHorizontal>
-  </DDSContentBlockHorizontal>
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+    </C4DContentItemRow>
+  </C4DContentBlockHorizontal>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html b/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html
index f12120e0bfe..eea03cefb16 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-media/index.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <title>carbon-web-components example with React</title>
   </head>
   <body>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js
index eab8dbef790..1de839993f6 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-media/src/index.js
@@ -9,66 +9,66 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content.js';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content.js';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-        <DDSContentBlockMedia>
-          <DDSContentBlockHeading>Curabitur malesuada varius mi eu posuere</DDSContentBlockHeading>
-          <DDSContentBlockCopy size="lg">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+        <C4DContentBlockMedia>
+          <C4DContentBlockHeading>Curabitur malesuada varius mi eu posuere</C4DContentBlockHeading>
+          <C4DContentBlockCopy size="lg">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin,
             sodales nulla quis, consequat libero.
-          </DDSContentBlockCopy>
-          <DDSContentBlockMediaContent>
-            <DDSContentGroupHeading>Lorem ipsum dolor sit amet</DDSContentGroupHeading>
-            <DDSImage
+          </C4DContentBlockCopy>
+          <C4DContentBlockMediaContent>
+            <C4DContentGroupHeading>Lorem ipsum dolor sit amet</C4DContentGroupHeading>
+            <C4DImage
               slot="media"
               alt="Image alt text"
               defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               heading="Lorem ipsum">
-              <DDSImageItem
+              <C4DImageItem
                 media="(min-width: 672px)"
                 srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               />
-              <DDSImageItem
+              <C4DImageItem
                 media="(min-width: 400px)"
                 srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               />
-              <DDSImageItem
+              <C4DImageItem
                 media="(min-width: 320px)"
                 srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               />
-            </DDSImage>
-            <DDSContentItem>
-              <DDSContentItemHeading>Lorem ipsum dolor sit amet.</DDSContentItemHeading>
-              <DDSContentItemCopy>
+            </C4DImage>
+            <C4DContentItem>
+              <C4DContentItemHeading>Lorem ipsum dolor sit amet.</C4DContentItemHeading>
+              <C4DContentItemCopy>
                 Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-              </DDSContentItemCopy>
-            </DDSContentItem>
-            <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-              <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-              <DDSCardCTAFooter />
-            </DDSCardLinkCTA>
-          </DDSContentBlockMediaContent>
-        </DDSContentBlockMedia>
+              </C4DContentItemCopy>
+            </C4DContentItem>
+            <C4DCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
+              <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+              <C4DCardCTAFooter />
+            </C4DCardLinkCTA>
+          </C4DContentBlockMediaContent>
+        </C4DContentBlockMedia>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html
index f12120e0bfe..eea03cefb16 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/index.html
@@ -13,7 +13,7 @@
     <meta charset="utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <title>carbon-web-components example with React</title>
   </head>
   <body>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js
index f985933f621..fe2c185e76d 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-mixed/src/index.js
@@ -9,106 +9,106 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentBlockMixed from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentBlockMixed from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
+import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import TouchScreen from '@carbon/pictograms-react/es/touch--screen/index.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-        <DDSContentBlockMixed>
-          <DDSContentBlockHeading>Lorem ipsum dolor sit amet</DDSContentBlockHeading>
-          <DDSContentBlockCopy>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+        <C4DContentBlockMixed>
+          <C4DContentBlockHeading>Lorem ipsum dolor sit amet</C4DContentBlockHeading>
+          <C4DContentBlockCopy>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-          </DDSContentBlockCopy>
-          <DDSContentGroupCards>
-            <DDSContentGroupHeading>Content group heading</DDSContentGroupHeading>
-            <DDSContentGroupCardsItem href="www.ibm.com">
-              <DDSCardHeading>
+          </C4DContentBlockCopy>
+          <C4DContentGroupCards>
+            <C4DContentGroupHeading>Content group heading</C4DContentGroupHeading>
+            <C4DContentGroupCardsItem href="www.ibm.com">
+              <C4DCardHeading>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-              </DDSCardHeading>
+              </C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <DDSCardFooter>
+              <C4DCardFooter>
                 <ArrowRight20 slot="icon" />
-              </DDSCardFooter>
-            </DDSContentGroupCardsItem>
-            <DDSContentGroupCardsItem href="www.ibm.com">
-              <DDSCardHeading>
+              </C4DCardFooter>
+            </C4DContentGroupCardsItem>
+            <C4DContentGroupCardsItem href="www.ibm.com">
+              <C4DCardHeading>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-              </DDSCardHeading>
+              </C4DCardHeading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <DDSCardFooter>
+              <C4DCardFooter>
                 <ArrowRight20 slot="icon" />
-              </DDSCardFooter>
-            </DDSContentGroupCardsItem>
-          </DDSContentGroupCards>
-          <DDSContentGroupPictograms>
-            <DDSContentGroupHeading>Curabitur malesuada varius mi eu posuere</DDSContentGroupHeading>
-            <DDSContentGroupCopy>Lorem ipsum *dolor* sit amet</DDSContentGroupCopy>
-            <DDSPictogramItem>
+              </C4DCardFooter>
+            </C4DContentGroupCardsItem>
+          </C4DContentGroupCards>
+          <C4DContentGroupPictograms>
+            <C4DContentGroupHeading>Curabitur malesuada varius mi eu posuere</C4DContentGroupHeading>
+            <C4DContentGroupCopy>Lorem ipsum *dolor* sit amet</C4DContentGroupCopy>
+            <C4DPictogramItem>
               <TouchScreen slot="pictogram" />
-              <DDSContentItemHeading>Lorem ipsum dolor sit amet</DDSContentItemHeading>
-              <DDSContentItemCopy>Lorem ipsum dolor sit amet</DDSContentItemCopy>
-              <DDSLinkWithIcon href="https://www.ibm.com/" slot="footer">
+              <C4DContentItemHeading>Lorem ipsum dolor sit amet</C4DContentItemHeading>
+              <C4DContentItemCopy>Lorem ipsum dolor sit amet</C4DContentItemCopy>
+              <C4DLinkWithIcon href="https://www.ibm.com/" slot="footer">
                 Link text <ArrowRight20 slot="icon" />
-              </DDSLinkWithIcon>
-            </DDSPictogramItem>
-          </DDSContentGroupPictograms>
-          <DDSContentGroupSimple>
-            <DDSContentGroupHeading>Curabitur malesuada varius mi eu posuere</DDSContentGroupHeading>
-            <DDSContentGroupCopy>Lorem ipsum *dolor* sit amet</DDSContentGroupCopy>
-            <DDSImage
+              </C4DLinkWithIcon>
+            </C4DPictogramItem>
+          </C4DContentGroupPictograms>
+          <C4DContentGroupSimple>
+            <C4DContentGroupHeading>Curabitur malesuada varius mi eu posuere</C4DContentGroupHeading>
+            <C4DContentGroupCopy>Lorem ipsum *dolor* sit amet</C4DContentGroupCopy>
+            <C4DImage
               slot="media"
               alt="Image alt text"
               defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               heading="Curabitur malesuada varius mi eu posuere">
-              <DDSImageItem
+              <C4DImageItem
                 media="(min-width: 672px)"
                 srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               />
-              <DDSImageItem
+              <C4DImageItem
                 media="(min-width: 400px)"
                 srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               />
-              <DDSImageItem
+              <C4DImageItem
                 media="(min-width: 320px)"
                 srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               />
-            </DDSImage>
-            <DDSCardLinkCTA slot="footer" cta-type="local" href="https://example.com">
-              <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-              <DDSCardCTAFooter></DDSCardCTAFooter>
-            </DDSCardLinkCTA>
-          </DDSContentGroupSimple>
-        </DDSContentBlockMixed>
+            </C4DImage>
+            <C4DCardLinkCTA slot="footer" cta-type="local" href="https://example.com">
+              <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+              <C4DCardCTAFooter></C4DCardCTAFooter>
+            </C4DCardLinkCTA>
+          </C4DContentGroupSimple>
+        </C4DContentBlockMixed>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js
index 3e1f53425dc..ddbd91ee007 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block-segmented/src/index.js
@@ -9,18 +9,18 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 // eslint-disable-next-line max-len
-import DDSContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
+import C4DContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
 // eslint-disable-next-line max-len
-import DDSContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
+import C4DContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
@@ -28,11 +28,11 @@ import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320
 import './index.css';
 
 const image = (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Mauris iaculis eget dolor nec hendrerit.">
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Mauris iaculis eget dolor nec hendrerit.">
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
 const contentItemCopy =
@@ -46,40 +46,40 @@ const contentItemCopy =
   'turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium ' +
   'elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.';
 
-const video = <DDSVideoPlayerContainer slot="media" video-id="0_uka1msg4"></DDSVideoPlayerContainer>;
+const video = <C4DVideoPlayerContainer slot="media" video-id="0_uka1msg4"></C4DVideoPlayerContainer>;
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-8 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-lg-8 cds--no-gutter">
         (
-        <DDSContentBlockSegmented>
-          <DDSContentBlockHeading>Lorem ipsum dolor sit amet.</DDSContentBlockHeading>
-          <DDSContentBlockCopy>
+        <C4DContentBlockSegmented>
+          <C4DContentBlockHeading>Lorem ipsum dolor sit amet.</C4DContentBlockHeading>
+          <C4DContentBlockCopy>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
             consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-          </DDSContentBlockCopy>
+          </C4DContentBlockCopy>
           {image}
-          <DDSContentBlockSegmentedItem>
-            <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-            <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+          <C4DContentBlockSegmentedItem>
+            <C4DContentGroupHeading>Lorem ipsum dolor sit amet.</C4DContentGroupHeading>
+            <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
+            <C4DTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
               Lorem Ipsum dolor sit
-            </DDSTextCTA>
-          </DDSContentBlockSegmentedItem>
-          <DDSContentBlockSegmentedItem>
-            <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-            <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
+            </C4DTextCTA>
+          </C4DContentBlockSegmentedItem>
+          <C4DContentBlockSegmentedItem>
+            <C4DContentGroupHeading>Lorem ipsum dolor sit amet.</C4DContentGroupHeading>
+            <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
             {video}
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+            <C4DTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
               Lorem Ipsum dolor sit
-            </DDSTextCTA>
-          </DDSContentBlockSegmentedItem>
-          <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">
+            </C4DTextCTA>
+          </C4DContentBlockSegmentedItem>
+          <C4DTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">
             Lorem ipsum dolor
-          </DDSTextCTA>
-        </DDSContentBlockSegmented>
+          </C4DTextCTA>
+        </C4DContentBlockSegmented>
         )
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-block/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-block/src/index.js
index 5c04e26580b..03d1ac79137 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-block/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-block/src/index.js
@@ -9,23 +9,23 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentBlock from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentBlock from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import './index.css';
 
 const App = () => (
-  <DDSContentBlock>
-    <DDSContentBlockHeading>Heading text</DDSContentBlockHeading>
-    <DDSContentBlockCopy>Copy test</DDSContentBlockCopy>
-    <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-      <DDSCardLinkHeading>cta copy</DDSCardLinkHeading>
-      <DDSCardCTAFooter></DDSCardCTAFooter>
-    </DDSCardLinkCTA>
-  </DDSContentBlock>
+  <C4DContentBlock>
+    <C4DContentBlockHeading>Heading text</C4DContentBlockHeading>
+    <C4DContentBlockCopy>Copy test</C4DContentBlockCopy>
+    <C4DCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
+      <C4DCardLinkHeading>cta copy</C4DCardLinkHeading>
+      <C4DCardCTAFooter></C4DCardCTAFooter>
+    </C4DCardLinkCTA>
+  </C4DContentBlock>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/package.json b/packages/web-components/examples/codesandbox/components-react/content-group-banner/package.json
deleted file mode 100644
index 29771011282..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group-banner/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-react-content-group-banner-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
-  "license": "Apache-2",
-  "scripts": {
-    "start": "webpack serve"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest",
-    "@carbon/icons-react": "~10.22.0",
-    "carbon-components": "~10.23.0",
-    "lit-element": "~2.4.0",
-    "lit-html": "~1.3.0",
-    "lodash-es": "^4.17.0",
-    "prop-types": "^15.7.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "@types/react": "^16.9.0",
-    "babel-loader": "^8.2.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-group-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-banner/src/index.js
deleted file mode 100644
index 7101fbd37f7..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-group-banner/src/index.js
+++ /dev/null
@@ -1,32 +0,0 @@
-/**
- * @license
- *
- * 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 'react-dom';
-import DDSContentGroupBanner from '@carbon/ibmdotcom-web-components/es/components-react/content-group-banner/content-group-banner';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import './index.css';
-
-const App = () => (
-  <DDSContentGroupBanner>
-    <DDSContentGroupHeading>Curabitur malesuada varius mi eu posuere</DDSContentGroupHeading>
-    <DDSLinkList type="vertical" slot="complementary">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Link text
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        External link text
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentGroupBanner>
-);
-
-render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js
index a758455ce58..4e87f30e55f 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-group-cards/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -10,43 +10,43 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20';
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
 import './index.css';
 
 const card1 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</C4DCardHeading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <DDSCardFooter icon-placement="left">
+    <C4DCardFooter icon-placement="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 const card2 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</C4DCardHeading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-    <DDSCardFooter icon-placement="left">
+    <C4DCardFooter icon-placement="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 const App = () => (
-  <DDSContentGroupCards>
-    <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-    <DDSContentGroupCopy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</DDSContentGroupCopy>
+  <C4DContentGroupCards>
+    <C4DContentGroupHeading>Lorem ipsum dolor sit amet.</C4DContentGroupHeading>
+    <C4DContentGroupCopy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</C4DContentGroupCopy>
     {card1}
     {card2}
     {card1}
     {card2}
-  </DDSContentGroupCards>
+  </C4DContentGroupCards>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js
index d0f08ce6594..d8b127bdc8a 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-group-pictograms/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -11,13 +11,13 @@ import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20';
 // eslint-disable-next-line max-len
-import DDSContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
+import C4DContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
 import './index.css';
 
 const pictogramsItems = [
@@ -48,23 +48,23 @@ const pictogramsItems = [
 ];
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">
-        <DDSContentGroupPictograms>
-          <DDSContentGroupHeading>{groupHeading}</DDSContentGroupHeading>
-          <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8 cds--no-gutter">
+        <C4DContentGroupPictograms>
+          <C4DContentGroupHeading>{groupHeading}</C4DContentGroupHeading>
+          <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
           {pictogramsItems.map(({ heading, copy, linkWithIcon }) => (
-            <DDSPictogramItem>
+            <C4DPictogramItem>
               <Pictogram slot="pictogram" />
-              <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-              <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-              <DDSLinkWithIcon href={linkWithIcon.href} slot="footer">
+              <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+              <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+              <C4DLinkWithIcon href={linkWithIcon.href} slot="footer">
                 {linkWithIcon.copy} <ArrowRight20 slot="icon" />
-              </DDSLinkWithIcon>
-            </DDSPictogramItem>
+              </C4DLinkWithIcon>
+            </C4DPictogramItem>
           ))}
-        </DDSContentGroupPictograms>
+        </C4DContentGroupPictograms>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js
index e9a62a9a751..7900d195bd7 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-group-simple/src/index.js
@@ -9,19 +9,19 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy.js';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy.js';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
 // eslint-disable-next-line max-len
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container.js';
+import C4DContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container.js';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
@@ -70,38 +70,38 @@ const items = [
 ];
 
 const image = ({ heading: imageHeading } = { heading: undefined }) => (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading={imageHeading}>
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading={imageHeading}>
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12 bx--no-gutter">
-        <DDSVideoCTAContainer>
-          <DDSContentGroupSimple>
-            <DDSContentGroupHeading>'Curabitur malesuada varius mi eu posuere'</DDSContentGroupHeading>
-            <DDSContentGroupCopy>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-lg-12 cds--no-gutter">
+        <C4DVideoCTAContainer>
+          <C4DContentGroupSimple>
+            <C4DContentGroupHeading>'Curabitur malesuada varius mi eu posuere'</C4DContentGroupHeading>
+            <C4DContentGroupCopy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </DDSContentGroupCopy>
+            </C4DContentGroupCopy>
             {image({ heading: 'Curabitur malesuada varius mi eu posuere' })}
             {items.map(({ heading: itemHeading }) => (
-              <DDSContentItem>
-                <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-                <DDSContentItemCopy>
+              <C4DContentItem>
+                <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+                <C4DContentItemCopy>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-                </DDSContentItemCopy>
-              </DDSContentItem>
+                </C4DContentItemCopy>
+              </C4DContentItem>
             ))}
-            <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-              <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-              <DDSCardCTAFooter></DDSCardCTAFooter>
-            </DDSCardLinkCTA>
-          </DDSContentGroupSimple>
-        </DDSVideoCTAContainer>
+            <C4DCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
+              <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+              <C4DCardCTAFooter></C4DCardCTAFooter>
+            </C4DCardLinkCTA>
+          </C4DContentGroupSimple>
+        </C4DVideoCTAContainer>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-group/src/index.js
index f24900dcf58..3b1de9a5c69 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-group/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-group/src/index.js
@@ -9,23 +9,23 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSContentGroup from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentGroup from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
 import './index.css';
 
 const App = () => (
-  <DDSContentGroup>
-    <DDSContentGroupHeading>Heading</DDSContentGroupHeading>
-    <DDSContentGroupCopy>Copy</DDSContentGroupCopy>
-    <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-      <DDSCardLinkHeading>Learn more about natural language processing</DDSCardLinkHeading>
-      <DDSCardCTAFooter></DDSCardCTAFooter>
-    </DDSCardLinkCTA>
-  </DDSContentGroup>
+  <C4DContentGroup>
+    <C4DContentGroupHeading>Heading</C4DContentGroupHeading>
+    <C4DContentGroupCopy>Copy</C4DContentGroupCopy>
+    <C4DCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
+      <C4DCardLinkHeading>Learn more about natural language processing</C4DCardLinkHeading>
+      <C4DCardCTAFooter></C4DCardCTAFooter>
+    </C4DCardLinkCTA>
+  </C4DContentGroup>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json
deleted file mode 100644
index 6bc3a4895c9..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-react-content-item-horizontal-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
-  "license": "Apache-2",
-  "scripts": {
-    "start": "webpack serve"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest",
-    "@carbon/icons-react": "~10.22.0",
-    "carbon-components": "~10.23.0",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "lodash-es": "^4.17.0",
-    "prop-types": "^15.7.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "@types/react": "^16.9.0",
-    "babel-loader": "^8.2.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js
deleted file mode 100644
index a5c9cf0a07d..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.js
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * @license
- *
- * 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 'react-dom';
-// eslint-disable-next-line max-len
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-// eslint-disable-next-line max-len
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
-// eslint-disable-next-line max-len
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-
-import './index.css';
-
-const App = () => (
-  <DDSContentItemHorizontal>
-    <DDSContentItemHorizontalEyebrow>Lorem ipsum</DDSContentItemHorizontalEyebrow>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalCopy>
-      Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin.
-    </DDSContentItemHorizontalCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentItemHorizontal>
-);
-
-render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/.gitignore b/packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-banner/.gitignore
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/index.html
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
new file mode 100644
index 00000000000..2aad58bdf43
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "ibmdotcom-web-components-react-content-item-row-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
+  "license": "Apache-2",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest",
+    "@carbon/icons-react": "~10.22.0",
+    "carbon-components": "~10.23.0",
+    "lit-element": "^2.5.1",
+    "lit-html": "^1.4.1",
+    "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.10.0",
+    "@types/lodash-es": "^4.17.0",
+    "@types/react": "^16.9.0",
+    "babel-loader": "^8.2.0",
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CardGroup/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CardGroup/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/src/index.css
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
new file mode 100644
index 00000000000..8804b9ac8d5
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/content-item-row/src/index.js
@@ -0,0 +1,43 @@
+/**
+ * @license
+ *
+ * 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 'react-dom';
+// eslint-disable-next-line max-len
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+// eslint-disable-next-line max-len
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
+// eslint-disable-next-line max-len
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+
+import './index.css';
+
+const App = () => (
+  <C4DContentItemRow>
+    <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
+    <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+    <C4DContentItemRowCopy>
+      Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+      Phasellus at elit sollicitudin.
+    </C4DContentItemRowCopy>
+    <C4DLinkList slot="footer" type="vertical">
+      <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+        Microservices and containers
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
+  </C4DContentItemRow>
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-group-banner/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-group-banner/webpack.config.js
rename to packages/web-components/examples/codesandbox/components-react/content-item-row/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js
index afe7d7c6790..cce11b521b9 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-item/src/index.js
@@ -9,20 +9,20 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 import './index.css';
 
 const App = () => (
-  <DDSContentItem>
-    <DDSContentItemHeading>Heading</DDSContentItemHeading>
-    <DDSContentItemCopy>Copy</DDSContentItemCopy>
-    <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+  <C4DContentItem>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
       CTA text
-    </DDSTextCTA>
-  </DDSContentItem>
+    </C4DLinkWithIcon>
+  </C4DContentItem>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-section/src/index.js b/packages/web-components/examples/codesandbox/components-react/content-section/src/index.js
index 0dc7e0598b3..b470b71f85f 100644
--- a/packages/web-components/examples/codesandbox/components-react/content-section/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/content-section/src/index.js
@@ -9,20 +9,20 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 import './index.css';
 
 const App = () => (
-  <DDSContentSection>
-    <DDSContentSectionHeading>Heading</DDSContentSectionHeading>
-    <DDSContentSectionCopy>Copy</DDSContentSectionCopy>
-    <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+  <C4DContentSection>
+    <C4DContentSectionHeading>Heading</C4DContentSectionHeading>
+    <C4DContentSectionCopy>Copy</C4DContentSectionCopy>
+    <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
       Link action
-    </DDSTextCTA>
-  </DDSContentSection>
+    </C4DTextCTA>
+  </C4DContentSection>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/package.json b/packages/web-components/examples/codesandbox/components-react/cta-block/package.json
index 01152b535ae..2333c035797 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-block/package.json
+++ b/packages/web-components/examples/codesandbox/components-react/cta-block/package.json
@@ -5,7 +5,8 @@
   "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
   "license": "Apache-2",
   "scripts": {
-    "start": "webpack serve"
+    "start": "webpack serve",
+    "build": "webpack"
   },
   "dependencies": {
     "@carbon/ibmdotcom-web-components": "latest",
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-block/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-block/src/index.js
index b4feaaac286..a22c7f89523 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-block/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-block/src/index.js
@@ -9,56 +9,56 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
-import DDSCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
+import C4DCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 import './index.css';
 
 const App = () => (
-  <DDSCTABlock no-border>
-    <DDSContentBlockHeading>DDS Content Block Heading</DDSContentBlockHeading>
-    <DDSContentBlockCopy>DDS Content Block Copy</DDSContentBlockCopy>
+  <C4DCTABlock no-border>
+    <C4DContentBlockHeading>C4D Content Block Heading</C4DContentBlockHeading>
+    <C4DContentBlockCopy>C4D Content Block Copy</C4DContentBlockCopy>
 
-    <DDSButtonGroup slot="action">
-      <DDSButtonGroupItem href="https://example.com">Secondary Button</DDSButtonGroupItem>
-      <DDSButtonGroupItem ref="https://example.com">Primary button</DDSButtonGroupItem>
-    </DDSButtonGroup>
+    <C4DButtonGroup slot="action">
+      <C4DButtonGroupItem href="https://example.com">Secondary Button</C4DButtonGroupItem>
+      <C4DButtonGroupItem ref="https://example.com">Primary button</C4DButtonGroupItem>
+    </C4DButtonGroup>
 
-    <DDSCTABlockItemRow>
-      <DDSCTABlockItem>
-        <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-        <DDSContentItemCopy>
+    <C4DCTABlockItemRow>
+      <C4DCTABlockItem>
+        <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+        <C4DContentItemCopy>
           IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
-        </DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">
+        </C4DContentItemCopy>
+        <C4DTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">
           Find a partner
-        </DDSTextCTA>
-      </DDSCTABlockItem>
+        </C4DTextCTA>
+      </C4DCTABlockItem>
 
-      <DDSCTABlockItem>
-        <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-        <DDSContentItemCopy>Dig into more self-directed larning about DevOps methodologies.</DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">
+      <C4DCTABlockItem>
+        <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+        <C4DContentItemCopy>Dig into more self-directed larning about DevOps methodologies.</C4DContentItemCopy>
+        <C4DTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">
           Browse tutorials
-        </DDSTextCTA>
-      </DDSCTABlockItem>
+        </C4DTextCTA>
+      </C4DCTABlockItem>
 
-      <DDSCTABlockItem>
-        <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-        <DDSContentItemCopy>Dig into more self-directed larning about DevOps methodologies.</DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">
+      <C4DCTABlockItem>
+        <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+        <C4DContentItemCopy>Dig into more self-directed larning about DevOps methodologies.</C4DContentItemCopy>
+        <C4DTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">
           Browse tutorials
-        </DDSTextCTA>
-      </DDSCTABlockItem>
-    </DDSCTABlockItemRow>
-  </DDSCTABlock>
+        </C4DTextCTA>
+      </C4DCTABlockItem>
+    </C4DCTABlockItemRow>
+  </C4DCTABlock>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-button/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-button/src/index.js
index 42513f98efe..dd681d6f4d6 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-button/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-button/src/index.js
@@ -9,13 +9,13 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
+import C4DButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
 import './index.css';
 
 const App = () => (
-  <DDSButtonCTA cta-type="local" kind="tertiary" href="https://www.example.com">
+  <C4DButtonCTA cta-type="local" kind="tertiary" href="https://www.example.com">
     Button CTA Copy
-  </DDSButtonCTA>
+  </C4DButtonCTA>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js
index 1994aa9d307..56105b246a7 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-card-link/src/index.js
@@ -9,22 +9,22 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-4 bx--no-gutter">
-        <DDSCardLinkCTA cta-type="local" href="https://www.example.com">
-          <DDSCardLinkHeading>Card link heading</DDSCardLinkHeading>
-          <DDSCardCTAFooter>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-4 cds--no-gutter">
+        <C4DCardLinkCTA cta-type="local" href="https://www.example.com">
+          <C4DCardLinkHeading>Card link heading</C4DCardLinkHeading>
+          <C4DCardCTAFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardCTAFooter>
-        </DDSCardLinkCTA>
+          </C4DCardCTAFooter>
+        </C4DCardLinkCTA>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js
index 134aa9c3ccc..15d5ec3637b 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-card/src/index.js
@@ -9,21 +9,21 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-4 bx--no-gutter">
-        <DDSCardCTA cta-type="local" href="https://www.example.com">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-4 cds--no-gutter">
+        <C4DCardCTA cta-type="local" href="https://www.example.com">
           Card CTA Copy
-          <DDSCardCTAFooter>
+          <C4DCardCTAFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardCTAFooter>
-        </DDSCardCTA>
+          </C4DCardCTAFooter>
+        </C4DCardCTA>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js
index 3bcead136ed..418fb7d4266 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-feature/src/index.js
@@ -9,28 +9,28 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
-import DDSFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
+import C4DFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import './index.css';
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8">
-        <DDSFeatureCTA cta-type="local" href="https://www.example.com">
-          <DDSCardHeading>Feature CTA Copy</DDSCardHeading>
-          <DDSImage
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8">
+        <C4DFeatureCTA cta-type="local" href="https://www.example.com">
+          <C4DCardHeading>Feature CTA Copy</C4DCardHeading>
+          <C4DImage
             slot="image"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
           />
-          <DDSFeatureCTAFooter>
+          <C4DFeatureCTAFooter>
             <ArrowRight20 slot="icon" />
-          </DDSFeatureCTAFooter>
-        </DDSFeatureCTA>
+          </C4DFeatureCTAFooter>
+        </C4DFeatureCTA>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-section/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-section/src/index.js
index e7f9e82473b..e9fa4859112 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-section/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-section/src/index.js
@@ -9,26 +9,26 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 
 import './index.css';
 
 const App = () => (
-  <DDSCTASection>
-    <DDSCTABlock>
-      <DDSContentBlockHeading>Curabitur malesuada varius mi eu posuere</DDSContentBlockHeading>
-      <DDSContentBlockCopy>
+  <C4DCTASection>
+    <C4DCTABlock>
+      <C4DContentBlockHeading>Curabitur malesuada varius mi eu posuere</C4DContentBlockHeading>
+      <C4DContentBlockCopy>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-      </DDSContentBlockCopy>
-      <DDSTextCTA slot="action" cta-type="local" icon-placement="right" href="https://www.example.com">
+      </C4DContentBlockCopy>
+      <C4DTextCTA slot="action" cta-type="local" icon-placement="right" href="https://www.example.com">
         Browse tutorials
-      </DDSTextCTA>
-    </DDSCTABlock>
-  </DDSCTASection>
+      </C4DTextCTA>
+    </C4DCTABlock>
+  </C4DCTASection>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/cta-text/src/index.js b/packages/web-components/examples/codesandbox/components-react/cta-text/src/index.js
index 70b2a0cd3d3..b3fcec71613 100644
--- a/packages/web-components/examples/codesandbox/components-react/cta-text/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/cta-text/src/index.js
@@ -9,13 +9,13 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 import './index.css';
 
 const App = () => (
-  <DDSTextCTA cta-type="local" href="https://www.example.com">
+  <C4DTextCTA cta-type="local" href="https://www.example.com">
     Text CTA Copy
-  </DDSTextCTA>
+  </C4DTextCTA>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js b/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js
index 5fd9d31d922..eede65afd95 100644
--- a/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/dotcom-shell/src/index.js
@@ -9,7 +9,7 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSDotcomShellContainer from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell-container';
+import C4DDotcomShellContainer from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell-container';
 import './index.css';
 
 window.digitalData = {
@@ -26,11 +26,11 @@ window.digitalData = {
 };
 
 const App = () => (
-  <DDSDotcomShellContainer>
-    <main className="bx--content dds-ce-demo--ui-shell-content">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--offset-lg-3 bx--col-lg-13">
+  <C4DDotcomShellContainer>
+    <main className="cds--content cds-ce-demo--ui-shell-content">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--offset-lg-3 cds--col-lg-13">
             <h2>Purpose and function</h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
@@ -66,7 +66,7 @@ const App = () => (
         </div>
       </div>
     </main>
-  </DDSDotcomShellContainer>
+  </C4DDotcomShellContainer>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.js b/packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.js
index 9ef8e0e962e..51d63dd31d2 100644
--- a/packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/expressive-modal/src/index.js
@@ -10,34 +10,34 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
-import DDSExpressiveModalHeader from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-header';
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
-import DDSExpressiveModalHeading from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-heading';
-import DDSExpressiveModalBody from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-body';
-import DDSExpressiveModalFooter from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-footer';
-import DDSButtonExpressive from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
+import C4DExpressiveModalHeader from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-header';
+import C4DExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
+import C4DExpressiveModalHeading from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-heading';
+import C4DExpressiveModalBody from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-body';
+import C4DExpressiveModalFooter from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-footer';
+import C4DButtonExpressive from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
 import './index.css';
 
 const App = () => (
-  <DDSExpressiveModal open={true}>
-    <DDSExpressiveModalHeader>
-      <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-      <DDSExpressiveModalHeading>Modal Title</DDSExpressiveModalHeading>
-    </DDSExpressiveModalHeader>
-    <DDSExpressiveModalBody>
+  <C4DExpressiveModal open={true}>
+    <C4DExpressiveModalHeader>
+      <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+      <C4DExpressiveModalHeading>Modal Title</C4DExpressiveModalHeading>
+    </C4DExpressiveModalHeader>
+    <C4DExpressiveModalBody>
       Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus
       pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit
       amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae
       facilisis ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In
       venenatis sapien eu nisl congue suscipit.
-    </DDSExpressiveModalBody>
-    <DDSExpressiveModalFooter>
-      <DDSButtonExpressive>
+    </C4DExpressiveModalBody>
+    <C4DExpressiveModalFooter>
+      <C4DButtonExpressive>
         Lorem ipsum <ArrowRight20 slot="icon" />
-      </DDSButtonExpressive>
-    </DDSExpressiveModalFooter>
-  </DDSExpressiveModal>
+      </C4DButtonExpressive>
+    </C4DExpressiveModalFooter>
+  </C4DExpressiveModal>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-card/src/index.js b/packages/web-components/examples/codesandbox/components-react/feature-card/src/index.js
index e123748c6bc..bb4952b398a 100644
--- a/packages/web-components/examples/codesandbox/components-react/feature-card/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/feature-card/src/index.js
@@ -10,24 +10,24 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
-import DDSFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
+import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import './index.css';
 
 const App = () => (
-  <DDSFeatureCard href="https://www.example.com">
-    <DDSImage
+  <C4DFeatureCard href="https://www.example.com">
+    <C4DImage
       alt="Image alt text"
       defaultSrc="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
       slot="image"
     />
-    <DDSCardHeading>Feature card heading</DDSCardHeading>
-    <DDSFeatureCardFooter>
+    <C4DCardHeading>Feature card heading</C4DCardHeading>
+    <C4DFeatureCardFooter>
       <ArrowRight20 slot="icon" />
-    </DDSFeatureCardFooter>
-  </DDSFeatureCard>
+    </C4DFeatureCardFooter>
+  </C4DFeatureCard>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js b/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js
index 642dd10997e..71f28692bb8 100644
--- a/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/feature-section/src/index.js
@@ -9,46 +9,46 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
-import DDSFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
-import DDSFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
+import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 import './index.css';
 
 const App = () => (
-  <DDSFeatureSection media-alignment={'left'}>
-    <DDSImage slot="image" default-src={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}>
-      <DDSImageItem
-        media="(min-width: 1312px)"
-        srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-      <DDSImageItem
-        media="(min-width: 672px)"
-        srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-      <DDSImageItem
-        media="(min-width: 320px)"
-        srcset={'https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-      <DDSImageItem
-        media="(min-width: 320px)"
-        srcset={'https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-      <DDSImageItem
-        media="(min-width: 320px)"
-        srcset={'https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-    </DDSImage>
-    <DDSCardEyebrow>5 min activity</DDSCardEyebrow>
-    <DDSContentBlockHeading>Ready when you are</DDSContentBlockHeading>
-    <DDSContentItemParagraph slot="copy">Copy example</DDSContentItemParagraph>
+  <C4DFeatureSection media-alignment={'left'}>
+      <C4DImage slot="image" default-src={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}>
+        <C4DImageItem 
+          media="(min-width: 1312px)"
+          srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 672px)"
+          srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 320px)"
+          srcset={'https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 320px)"
+          srcset={'https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem 
+          media="(min-width: 320px)"
+          srcset={'https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+      </C4DImage>
+      <C4DCardEyebrow>5 min activity</C4DCardEyebrow>
+      <C4DContentBlockHeading>Ready when you are</C4DContentBlockHeading>
+      <C4DContentItemParagraph slot="copy">Copy example</C4DContentItemParagraph>
 
-    <DDSFeatureSectionCardLink slot="footer" href={'https://example.com'} cta-type={'local'} color-scheme="inverse">
-      <DDSCardLinkHeading>Try a free virtual business framing session with IBM Garage</DDSCardLinkHeading>
-      <DDSCardCTAFooter color-scheme="inverse"> </DDSCardCTAFooter>
-    </DDSFeatureSectionCardLink>
-  </DDSFeatureSection>
+      <C4DCard link slot="footer" href={'https://example.com'} cta-type={'local'} color-scheme="inverse">
+        <C4DCardHeading>Try a free virtual business framing session with IBM Garage</C4DCardHeading>
+        <C4DCardFooter color-scheme="inverse"> </C4DCardFooter>
+      </C4DCard>
+    </C4DFeatureSection>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
index 6cf89a6fb2f..58c39ce16c6 100644
--- a/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/filter-panel/src/index.js
@@ -9,63 +9,63 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
-import DDSFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
-import DDSFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
-import DDSFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
-import DDSFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
-import DDSFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
-import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+import C4DFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
+import C4DFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
+import C4DFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
+import C4DFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
+import C4DFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
+import C4DFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import C4DFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
 import './index.css';
 
 const App = () => (
-  <DDSFilterPanelComposite>
-    <DDSFilterPanelHeading slot="heading">Filter</DDSFilterPanelHeading>
-    <DDSFilterGroup>
-      <DDSFilterGroupItem title-text="Product types">
-        <DDSFilterPanelCheckbox value="API">API</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Application">Application</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Data Set">Data Set</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Free Trial">Free Trial</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Hardware">Hardware</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Service">Service</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Service Assets">Service Assets</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="Software">Software</DDSFilterPanelCheckbox>
-      </DDSFilterGroupItem>
-      <DDSFilterGroupItem title-text="Technologies">
-        <DDSFilterPanelInputSelect header-value="Analytics" title="Analytics"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
-          <DDSFilterPanelInputSelectItem value="Machine Learning">Machine Learning</DDSFilterPanelInputSelectItem>
-          <DDSFilterPanelInputSelectItem value="Natural language processing">
+  <C4DFilterPanelComposite>
+    <C4DFilterPanelHeading slot="heading">Filter</C4DFilterPanelHeading>
+    <C4DFilterGroup>
+      <C4DFilterGroupItem title="Product types">
+        <C4DFilterPanelCheckbox value="API">API</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Application">Application</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Data Set">Data Set</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Free Trial">Free Trial</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Hardware">Hardware</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Service">Service</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Service Assets">Service Assets</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="Software">Software</C4DFilterPanelCheckbox>
+      </C4DFilterGroupItem>
+      <C4DFilterGroupItem title="Technologies">
+        <C4DFilterPanelInputSelect header-value="Analytics" title="Analytics"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
+          <C4DFilterPanelInputSelectItem value="Machine Learning">Machine Learning</C4DFilterPanelInputSelectItem>
+          <C4DFilterPanelInputSelectItem value="Natural language processing">
             Natural language processing
-          </DDSFilterPanelInputSelectItem>
-          <DDSFilterPanelInputSelectItem value="Speech recognition">Speech recognition</DDSFilterPanelInputSelectItem>
-        </DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Automation" title="Automation"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="IT infrastructure" title="IT infrastructure"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="IT management" title="IT management"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Mobile technologys" title="Mobile technology"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Security" title="Security"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Software development" title="Software development"></DDSFilterPanelInputSelect>
-      </DDSFilterGroupItem>
-      <DDSFilterGroupItem title-text="Business needs">
-        <DDSFilterPanelInputSelect header-value="Business operations" title="Business operations"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Content Management" title="Content Management"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Customer service" title="Customer service"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Finance" title="Finance"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect header-value="Marketing and sales" title="Marketing and sales"></DDSFilterPanelInputSelect>
-        <DDSFilterPanelInputSelect
+          </C4DFilterPanelInputSelectItem>
+          <C4DFilterPanelInputSelectItem value="Speech recognition">Speech recognition</C4DFilterPanelInputSelectItem>
+        </C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Automation" title="Automation"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="IT infrastructure" title="IT infrastructure"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="IT management" title="IT management"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Mobile technologys" title="Mobile technology"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Security" title="Security"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Software development" title="Software development"></C4DFilterPanelInputSelect>
+      </C4DFilterGroupItem>
+      <C4DFilterGroupItem title="Business needs">
+        <C4DFilterPanelInputSelect header-value="Business operations" title="Business operations"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Content Management" title="Content Management"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Customer service" title="Customer service"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Finance" title="Finance"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect header-value="Marketing and sales" title="Marketing and sales"></C4DFilterPanelInputSelect>
+        <C4DFilterPanelInputSelect
           header-value="Supply chain management"
-          title="Supply chain management"></DDSFilterPanelInputSelect>
-      </DDSFilterGroupItem>
-      <DDSFilterGroupItem title-text="Deployment types">
-        <DDSFilterPanelCheckbox value="On-premises">On-premises</DDSFilterPanelCheckbox>
-        <DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
-      </DDSFilterGroupItem>
-    </DDSFilterGroup>
-  </DDSFilterPanelComposite>
+          title="Supply chain management"></C4DFilterPanelInputSelect>
+      </C4DFilterGroupItem>
+      <C4DFilterGroupItem title="Deployment types">
+        <C4DFilterPanelCheckbox value="On-premises">On-premises</C4DFilterPanelCheckbox>
+        <C4DFilterPanelCheckbox value="SaaS">SaaS</C4DFilterPanelCheckbox>
+      </C4DFilterGroupItem>
+    </C4DFilterGroup>
+  </C4DFilterPanelComposite>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/footer/src/index.js b/packages/web-components/examples/codesandbox/components-react/footer/src/index.js
index 5f8cb613429..87c65b1cbfd 100644
--- a/packages/web-components/examples/codesandbox/components-react/footer/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/footer/src/index.js
@@ -9,15 +9,15 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSFooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
+import C4DFooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
 import './index.css';
 
 const App = () => (
-  <DDSFooterContainer
+  <C4DFooterContainer
     lang-display="United States - English"
     language-selector-label="Choose a language"
     clear-selection-label="Clear language selection"
-    selected-language="English"></DDSFooterContainer>
+    selected-language="English"></C4DFooterContainer>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components-react/global-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/.gitignore
rename to packages/web-components/examples/codesandbox/components-react/global-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/index.html b/packages/web-components/examples/codesandbox/components-react/global-banner/index.html
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/universal-banner/index.html
rename to packages/web-components/examples/codesandbox/components-react/global-banner/index.html
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/package.json b/packages/web-components/examples/codesandbox/components-react/global-banner/package.json
new file mode 100644
index 00000000000..5bbe962eade
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/global-banner/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "ibmdotcom-web-components-react-global-banner-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
+  "license": "Apache-2",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "canary",
+    "@carbon/icons-react": "~10.22.0",
+    "carbon-components": "~10.23.0",
+    "lit-element": "^2.5.1",
+    "lit-html": "^1.4.1",
+    "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.10.0",
+    "@types/lodash-es": "^4.17.0",
+    "@types/react": "^16.9.0",
+    "babel-loader": "^8.2.0",
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CardLink/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/global-banner/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CardLink/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components-react/global-banner/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/src/index.css b/packages/web-components/examples/codesandbox/components-react/global-banner/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tag-group/src/index.css
rename to packages/web-components/examples/codesandbox/components-react/global-banner/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/global-banner/src/index.js b/packages/web-components/examples/codesandbox/components-react/global-banner/src/index.js
new file mode 100644
index 00000000000..ecb6961eb01
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/global-banner/src/index.js
@@ -0,0 +1,32 @@
+/**
+ * @license
+ *
+ * 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 'react-dom';
+// eslint-disable-next-line max-len
+import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
+import C4DGlobalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-heading';
+import C4DGlobalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-copy';
+import C4DGlobalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-image';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import './index.css';
+
+const App = () => (
+  <C4DGlobalBanner image-width="4-col">
+    <C4DGlobalBannerImage
+      default-src={'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616'}></C4DGlobalBannerImage>
+    <C4DGlobalBannerHeading>Hybrid cloud and AI for smarter business</C4DGlobalBannerHeading>
+    <C4DGlobalBannerCopy>Las Vegas, June 15-18, 2025</C4DGlobalBannerCopy>
+    <C4DButton slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
+      Register for Think. Free
+    </C4DButton>
+  </C4DGlobalBanner>
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/global-banner/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/content-item-horizontal/webpack.config.js
rename to packages/web-components/examples/codesandbox/components-react/global-banner/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.js b/packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.js
index f58188f9c09..48059b5dba7 100644
--- a/packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/horizontal-rule/src/index.js
@@ -10,10 +10,10 @@
 import React from 'react';
 import { render } from 'react-dom';
 /* eslint-disable max-len */
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
 /* eslint-enable max-len */
 import './index.css';
 
-const App = () => <DDSHorizontalRule size="fluid"></DDSHorizontalRule>;
+const App = () => <C4DHorizontalRule size="fluid"></C4DHorizontalRule>;
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/image/src/index.js b/packages/web-components/examples/codesandbox/components-react/image/src/index.js
index 2e135af9490..76de47dba4b 100644
--- a/packages/web-components/examples/codesandbox/components-react/image/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/image/src/index.js
@@ -9,22 +9,22 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
 import './index.css';
 
 const App = () => (
-  <DDSImage alt="Image alt text">
-    <DDSImageItem
+  <C4DImage alt="Image alt text">
+    <C4DImageItem
       media="(min-width:672px)"
-      srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></DDSImageItem>
-    <DDSImageItem
+      srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+    <C4DImageItem
       media="(min-width:400px)"
-      srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></DDSImageItem>
-    <DDSImageItem
+      srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+    <C4DImageItem
       media="(min-width:320px)"
-      srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></DDSImageItem>
-  </DDSImage>
+      srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+  </C4DImage>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/.gitignore b/packages/web-components/examples/codesandbox/components-react/in-page-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/pictogram-item/.gitignore
rename to packages/web-components/examples/codesandbox/components-react/in-page-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/index.html b/packages/web-components/examples/codesandbox/components-react/in-page-banner/index.html
new file mode 100644
index 00000000000..b6df1c62a0c
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/in-page-banner/index.html
@@ -0,0 +1,22 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
+    <title>carbon-web-components example with React</title>
+  </head>
+  <body>
+    <noscript>
+      You need to enable JavaScript to run this app.
+    </noscript>
+    <div id="root"></div>
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/package.json b/packages/web-components/examples/codesandbox/components-react/in-page-banner/package.json
new file mode 100644
index 00000000000..5712a27c4eb
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/in-page-banner/package.json
@@ -0,0 +1,35 @@
+{
+  "name": "ibmdotcom-web-components-react-in-page-banner-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
+  "license": "Apache-2",
+  "scripts": {
+    "start": "webpack serve"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest",
+    "@carbon/icons-react": "~10.22.0",
+    "carbon-components": "~10.23.0",
+    "lit-element": "~2.4.0",
+    "lit-html": "~1.3.0",
+    "lodash-es": "^4.17.0",
+    "prop-types": "^15.7.0",
+    "react": "^17.0.0",
+    "react-dom": "^17.0.0",
+    "react-redux": "^7.2.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0",
+    "@babel/preset-react": "^7.10.0",
+    "@types/lodash-es": "^4.17.0",
+    "@types/react": "^16.9.0",
+    "babel-loader": "^8.2.0",
+    "css-loader": "^4.3.0",
+    "html-webpack-plugin": "^4.5.0",
+    "style-loader": "^2.0.0",
+    "webpack": "^4.0.0",
+    "webpack-cli": "^4.0.0",
+    "webpack-dev-server": "^3.11.0"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CardSectionImages/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/in-page-banner/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CardSectionImages/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components-react/in-page-banner/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/src/index.css b/packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.css
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tag-link/src/index.css
rename to packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.css
diff --git a/packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.js b/packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.js
new file mode 100644
index 00000000000..182e6864df2
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components-react/in-page-banner/src/index.js
@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * 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 'react-dom';
+import C4DInPageBanner from '@carbon/ibmdotcom-web-components/es/components-react/in-page-banner/in-page-banner';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import './index.css';
+
+const App = () => (
+  <C4DInPageBanner>
+    <C4DContentGroupHeading>Curabitur malesuada varius mi eu posuere</C4DContentGroupHeading>
+    <C4DLinkList type="vertical" slot="complementary">
+      <C4DLinkListItem
+        icon-placement="right"
+        href="https://www.ibm.com"
+        cta-type="local">
+        Link text
+      </C4DLinkListItem>
+      <C4DLinkListItem
+        icon-placement="right"
+        href="https://www.ibm.com"
+        cta-type="local">
+        Link text
+      </C4DLinkListItem>
+    </C4DLinkList>
+  </C4DInPageBanner>
+);
+
+render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/in-page-banner/webpack.config.js
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tag-group/webpack.config.js
rename to packages/web-components/examples/codesandbox/components-react/in-page-banner/webpack.config.js
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js b/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js
index 6df18098b8c..e27011fe1c8 100644
--- a/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/leadspace-block/src/index.js
@@ -9,68 +9,62 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js';
-import DDSLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading.js';
-import DDSLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js';
-import DDSLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta.js';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item.js';
+import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading.js';
+import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import Download20 from '@carbon/icons-react/es/download/20.js';
 
 import './index.css';
 
 const App = () => (
-  <DDSLeadspaceBlock>
-    <DDSLeadspaceBlockHeading>Lead Space Block Title</DDSLeadspaceBlockHeading>
-    <DDSLeadspaceBlockContent>
-      <DDSContentBlockHeading>Content Block Heading</DDSContentBlockHeading>
-      <DDSContentBlockCopy>Content Block Copy</DDSContentBlockCopy>
-      <DDSLeadspaceBlockMedia slot="media">
-        <DDSImage
+  <C4DLeadspaceBlock>
+    <C4DLeadspaceHeading type-style="fluid-heading-05">Lead Space Block Title</C4DLeadspaceHeading>
+    <C4DLeadspaceBlockContent>
+      <C4DContentBlockCopy>Content Block Copy</C4DContentBlockCopy>
+      <C4DLeadspaceBlockMedia slot="media">
+        <C4DImage
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
           heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-          <DDSImageItem
+          <C4DImageItem
             media="(min-width: 672px)"
             srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
           />
-          <DDSImageItem
+          <C4DImageItem
             media="(min-width: 400px)"
             srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
           />
-          <DDSImageItem
+          <C4DImageItem
             media="(min-width: 320px)"
             srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
           />
-        </DDSImage>
-      </DDSLeadspaceBlockMedia>
-      <DDSLinkList type="end">
-        <DDSLinkListHeading>Featured products</DDSLinkListHeading>
-        <DDSLinkListItem href="https://example.com">
+        </C4DImage>
+      </C4DLeadspaceBlockMedia>
+      <C4DLinkList type="end">
+        <C4DLinkListHeading>Featured products</C4DLinkListHeading>
+        <C4DLinkListItem href="https://example.com">
           IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           UrbanCode <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           View all products <Download20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-      <DDSLeadspaceBlockCTA>
-        <DDSButtonGroupItem href="www.ibm.com">
-          Contact sales <ArrowRight20 slot="icon" />
-        </DDSButtonGroupItem>
-      </DDSLeadspaceBlockCTA>
-    </DDSLeadspaceBlockContent>
-  </DDSLeadspaceBlock>
+        </C4DLinkListItem>
+      </C4DLinkList>
+      <C4DButton href="https://example.com" cta-type="local">
+        Contact sales
+      </C4DButton>
+    </C4DLeadspaceBlockContent>
+  </C4DLeadspaceBlock>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.js b/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.js
index af03ac84804..626edab5869 100644
--- a/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/leadspace-with-search/src/index.js
@@ -10,31 +10,31 @@
 import React from 'react';
 import { render } from 'react-dom';
 /* eslint-disable max-len */
-import DDSLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
-import DDSLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading';
-import DDSLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content';
-import DDSLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading';
-import DDSLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy';
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
+import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
+import C4DLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading';
+import C4DLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content';
+import C4DLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading';
+import C4DLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
 /* eslint-enable max-len */
 import './index.css';
 
 const App = () => (
-  <DDSLeadspaceWithSearch>
-    <DDSLeadspaceWithSearchHeading>Find a product</DDSLeadspaceWithSearchHeading>
-    <DDSLeadspaceWithSearchContent>
-      <DDSLeadspaceWithSearchContentHeading>
+  <C4DLeadspaceWithSearch>
+    <C4DLeadspaceWithSearchHeading>Find a product</C4DLeadspaceWithSearchHeading>
+    <C4DLeadspaceWithSearchContent>
+      <C4DLeadspaceWithSearchContentHeading>
         Innovate like a startup, scale for the enterprise
-      </DDSLeadspaceWithSearchContentHeading>
-      <DDSLeadspaceWithSearchContentCopy>
+      </C4DLeadspaceWithSearchContentHeading>
+      <C4DLeadspaceWithSearchContentCopy>
         Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build,
         test, and deploy code changes quickly, ensuring software is always ready for deployment.
-      </DDSLeadspaceWithSearchContentCopy>
-    </DDSLeadspaceWithSearchContent>
-    <DDSSearchWithTypeahead slot="search" leadspace-search></DDSSearchWithTypeahead>
-    <DDSHorizontalRule slot="hr"></DDSHorizontalRule>
-  </DDSLeadspaceWithSearch>
+      </C4DLeadspaceWithSearchContentCopy>
+    </C4DLeadspaceWithSearchContent>
+    <C4DSearchWithTypeahead slot="search" leadspace-search></C4DSearchWithTypeahead>
+    <C4DHorizontalRule slot="hr"></C4DHorizontalRule>
+  </C4DLeadspaceWithSearch>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js b/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js
index 161f730a45c..1d87ec33a2e 100644
--- a/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/leadspace/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -10,44 +10,44 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
-import DDSLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 import './index.css';
 
 const App = () => (
-  <DDSLeadspace alt="Image alt text">
-    <DDSLeadspaceHeading>Heading can go on two lines max</DDSLeadspaceHeading>
+  <C4DLeadspace alt="Image alt text">
+    <C4DLeadspaceHeading>Heading can go on two lines max</C4DLeadspaceHeading>
     Use this area for a short line of copy to support the title
-    <DDSButtonGroup slot="action">
-      <DDSButtonGroupItem href="https://www.example.com">
+    <C4DButtonGroup slot="action">
+      <C4DButtonGroupItem href="https://www.example.com">
         <ArrowRight20 slot="icon" />
         Button 1
-      </DDSButtonGroupItem>
-      <DDSButtonGroupItem href="https://www.example.com">
+      </C4DButtonGroupItem>
+      <C4DButtonGroupItem href="https://www.example.com">
         <ArrowRight20 slot="icon" />
         Button 2
-      </DDSButtonGroupItem>
-    </DDSButtonGroup>
-    <DDSBackgroundMedia
+      </C4DButtonGroupItem>
+    </C4DButtonGroup>
+    <C4DBackgroundMedia
       slot="image"
       default-src="https://picsum.photos/id/1076/1056/480"
       alt="Image alt text"
       opacity="100"
     >
-      <DDSImageItem
+      <C4DImageItem
         media="(min-width: 672px)"
         srcset="https://picsum.photos/id/1076/672/400"
-      ></DDSImageItem>
-      <DDSImageItem
+      ></C4DImageItem>
+      <C4DImageItem
         media="(min-width: 0)"
         srcset="https://picsum.photos/id/1076/320/370"
-      ></DDSImageItem>
-    </DDSBackgroundMedia>
-  </DDSLeadspace>
+      ></C4DImageItem>
+    </C4DBackgroundMedia>
+  </C4DLeadspace>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.js b/packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.js
index bffaea49b7a..3bae774e534 100644
--- a/packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/leaving-ibm/src/index.js
@@ -9,9 +9,9 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container';
+import C4DLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container';
 import './index.css';
 
-const App = () => <DDSLeavingIBMContainer href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/" open />;
+const App = () => <C4DLeavingIBMContainer href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/" open />;
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.js b/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.js
index becb6dcead5..fd9e0b0ef14 100644
--- a/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/lightbox-media-viewer/src/index.js
@@ -9,15 +9,15 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSButtonExpressive from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
-import DDSLightboxVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-video-player-container';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DLightboxVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-video-player-container';
 
 import './index.css';
 
 const App = () => (
   <>
-    <DDSButtonExpressive id="open-modal-btn">Open modal</DDSButtonExpressive>
-    <DDSLightboxVideoPlayerContainer id="my-video" video-id="1_9h94wo6b"></DDSLightboxVideoPlayerContainer>
+    <C4DButton id="open-modal-btn">Open modal</C4DButton>
+    <C4DLightboxVideoPlayerContainer id="my-video" video-id="1_9h94wo6b"></C4DLightboxVideoPlayerContainer>
   </>
 );
 
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.js b/packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.js
index c850c21dae9..be36a43180b 100644
--- a/packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/link-list-section/src/index.js
@@ -10,37 +10,37 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSLinkListSection from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DLinkListSection from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 
 import './index.css';
 
 const App = () => (
-  <DDSLinkListSection>
-    <DDSLinkListHeading>Link list section heading</DDSLinkListHeading>
-    <DDSLinkList>
-      <DDSLinkListItem href="https://example.com">
+  <C4DLinkListSection>
+    <C4DLinkListHeading>Link list section heading</C4DLinkListHeading>
+    <C4DLinkList>
+      <C4DLinkListItem href="https://example.com">
         Learn more about Kubernetes and automating deployment <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
         Containerization A Complete Guide <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
         Microservices and containers <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
         Learn more about Kubernetes <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
         Containerization A Complete Guide <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
         Microservices and containers <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-    </DDSLinkList>
-  </DDSLinkListSection>
+      </C4DLinkListItem>
+    </C4DLinkList>
+  </C4DLinkListSection>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/link-list/src/index.js b/packages/web-components/examples/codesandbox/components-react/link-list/src/index.js
index ce5b27c4ea9..4694e358396 100644
--- a/packages/web-components/examples/codesandbox/components-react/link-list/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/link-list/src/index.js
@@ -10,32 +10,25 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItemCard from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item-card';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+
 import './index.css';
 
 const App = () => (
-  <DDSVideoCTAContainer>
-    <DDSLinkList type="default">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCard href="https://example.com">
-        <p>Learn more about Kubernetes</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLinkListItemCard>
-      <DDSLinkListItemCard href="https://example.com">
-        <p>Containerization A Complete Guide</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLinkListItemCard>
-    </DDSLinkList>
-  </DDSVideoCTAContainer>
+  <C4DVideoCTAContainer>
+    <C4DLinkList type="default">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItem href="https://example.com">
+        <p>Learn more about Kubernetes <ArrowRight20 slot="icon" /></p>
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
+        <p>Containerization A Complete Guide <ArrowRight20 slot="icon" /></p>
+      </C4DLinkListItem>
+    </C4DLinkList>
+  </C4DVideoCTAContainer>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.js b/packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.js
index 931c710587b..d993d43bba4 100644
--- a/packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/locale-modal/src/index.js
@@ -9,9 +9,9 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSLocaleModalContainer from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-container.js';
+import C4DLocaleModalContainer from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-container.js';
 import './index.css';
 
-const App = () => <DDSLocaleModalContainer lang-display="United States - English" open></DDSLocaleModalContainer>;
+const App = () => <C4DLocaleModalContainer lang-display="United States - English" open></C4DLocaleModalContainer>;
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.js b/packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.js
index 128a6e93d8b..2f2caeb6c5d 100644
--- a/packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/logo-grid/src/index.js
@@ -10,27 +10,27 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
-import DDSLogoGridLink from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-link';
-import DDSLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
+import C4DLogoGridLink from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-link';
+import C4DLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
 import './index.css';
 
 const App = () => (
-  <DDSLogoGrid>
-    <DDSContentBlockHeading>Our customers</DDSContentBlockHeading>
-    <DDSLogoGridItem
+  <C4DLogoGrid>
+    <C4DContentBlockHeading>Our customers</C4DContentBlockHeading>
+    <C4DLogoGridItem
       default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
-      alt={''}></DDSLogoGridItem>
-    <DDSLogoGridLink href={'https://example.com'}>
-      <DDSCardLinkHeading>Lorem ipsum</DDSCardLinkHeading>
-      <DDSCardFooter>
+      alt={''}></C4DLogoGridItem>
+    <C4DLogoGridLink href={'https://example.com'}>
+      <C4DCardLinkHeading>Lorem ipsum</C4DCardLinkHeading>
+      <C4DCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSLogoGridLink>
-  </DDSLogoGrid>
+      </C4DCardFooter>
+    </C4DLogoGridLink>
+  </C4DLogoGrid>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js b/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js
index 22e725adc43..f287b1838eb 100644
--- a/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/masthead-l1/src/index.js
@@ -9,16 +9,16 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
+import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
 import './index.css';
 
 const App = () => (
   <>
-    <DDSMastheadContainer id="masthead-container"></DDSMastheadContainer>
-    <main className="bx--content dds-ce-demo--ui-shell-content">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--offset-lg-3 bx--col-lg-13">
+    <C4DMastheadContainer id="masthead-container"></C4DMastheadContainer>
+    <main className="cds--content cds-ce-demo--ui-shell-content">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--offset-lg-3 cds--col-lg-13">
             <h2>Purpose and function</h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
@@ -98,4 +98,4 @@ const l1Data = {
   ],
 };
 
-document.querySelector('dds-masthead-container').l1Data = l1Data;
+document.querySelector('cds-masthead-container').l1Data = l1Data;
diff --git a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js b/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js
index cdb953440d1..e0e5228e929 100644
--- a/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/masthead/src/index.js
@@ -9,16 +9,16 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
+import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
 import './index.css';
 
 const App = () => (
   <>
-    <DDSMastheadContainer id="masthead-container"></DDSMastheadContainer>
-    <main className="bx--content dds-ce-demo--ui-shell-content">
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--offset-lg-3 bx--col-lg-13">
+    <C4DMastheadContainer id="masthead-container"></C4DMastheadContainer>
+    <main className="cds--content cds-ce-demo--ui-shell-content">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--offset-lg-3 cds--col-lg-13">
             <h2>Purpose and function</h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html
deleted file mode 100644
index 66fb6ec136d..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <title>carbon-web-components example with React</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <script type="module" src="index.js"></script>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json b/packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json
deleted file mode 100644
index 22f60318d4b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-react-pictogram-item-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
-  "license": "Apache-2",
-  "scripts": {
-    "start": "webpack serve"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest",
-    "@carbon/icons-react": "~10.22.0",
-    "carbon-components": "~10.23.0",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "lodash-es": "^4.17.0",
-    "prop-types": "^15.7.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "@types/react": "^16.9.0",
-    "babel-loader": "^8.2.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js b/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js
deleted file mode 100644
index 02db1575606..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/pictogram-item/src/index.js
+++ /dev/null
@@ -1,50 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 'react-dom';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import './index.css';
-
-const App = () => (
-  <DDSPictogramItem>
-    <svg
-      slot="pictogram"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      stroke="currentColor"
-      data-autoid="dds--pictogram-item__pictogram"
-      aria-label="Pictogram description"
-      width="64"
-      height="64"
-      viewBox="8 8 32 32"
-      role="img"
-      class="bx--pictogram-item__pictogram">
-      <path
-        fill="none"
-        stroke-linejoin="round"
-        stroke-miterlimit="10"
-        stroke-width=".72"
-        d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
-        0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"></path>
-    </svg>
-    <DDSContentItemHeading>Example heading</DDSContentItemHeading>
-    <DDSContentItemCopy>Example item copy</DDSContentItemCopy>
-    <DDSLinkWithIcon href="www.ibm.com" slot="footer">
-      Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-    </DDSLinkWithIcon>
-  </DDSPictogramItem>
-);
-
-render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/quote/src/index.js b/packages/web-components/examples/codesandbox/components-react/quote/src/index.js
index f97e0caca1b..a41f693e1ac 100644
--- a/packages/web-components/examples/codesandbox/components-react/quote/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/quote/src/index.js
@@ -10,23 +10,23 @@
 import React from 'react';
 import { render } from 'react-dom';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSQuote from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DQuote from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 import './index.css';
 
 const App = () => (
-  <DDSQuote color-scheme="inverse" mark-type="double-curved">
+  <C4DQuote color-scheme="inverse" mark-type="double-curved">
     Bringing together the technology and expertise for a new way to create
-    <DDSQuoteSourceHeading>John Doe</DDSQuoteSourceHeading>
-    <DDSQuoteSourceCopy>Senior Vice President</DDSQuoteSourceCopy>
-    <DDSQuoteSourceBottomCopy>IBM Cloud</DDSQuoteSourceBottomCopy>
-    <DDSLinkWithIcon slot="footer" href="https://example.com">
+    <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
+    <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>
+    <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
+    <C4DLinkWithIcon slot="footer" href="https://example.com">
       Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-    </DDSLinkWithIcon>
-  </DDSQuote>
+    </C4DLinkWithIcon>
+  </C4DQuote>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.js b/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.js
index dbc22a277bf..d0615964f1e 100644
--- a/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/search-with-typeahead/src/index.js
@@ -10,9 +10,9 @@
 import React from 'react';
 import { render } from 'react-dom';
 // eslint-disable-next-line max-len
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
 import './index.css';
 
-const App = () => <DDSSearchWithTypeahead active={true}></DDSSearchWithTypeahead>;
+const App = () => <C4DSearchWithTypeahead active={true}></C4DSearchWithTypeahead>;
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/structured-list/src/index.js b/packages/web-components/examples/codesandbox/components-react/structured-list/src/index.js
index fbb9f7a7a3b..b29d1a12278 100644
--- a/packages/web-components/examples/codesandbox/components-react/structured-list/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/structured-list/src/index.js
@@ -9,80 +9,80 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSStructuredList from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list';
-import DDSStructuredListHead from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-head';
-import DDSStructuredListHeaderRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-row';
-import DDSStructuredListHeaderCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-cell';
-import DDSStructuredListBody from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-body';
-import DDSStructuredListGroup from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-group';
-import DDSStructuredListRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-row';
-import DDSStructuredListCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-cell';
+import C4DStructuredList from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list';
+import C4DStructuredListHead from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-head';
+import C4DStructuredListHeaderRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-row';
+import C4DStructuredListHeaderCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-cell';
+import C4DStructuredListBody from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-body';
+import C4DStructuredListGroup from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-group';
+import C4DStructuredListRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-row';
+import C4DStructuredListCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-cell';
 import './index.css';
 
 const App = () => (
-  <DDSStructuredList>
-    <DDSStructuredListHead>
-      <DDSStructuredListHeaderRow>
-        <DDSStructuredListHeaderCell>Column A</DDSStructuredListHeaderCell>
-        <DDSStructuredListHeaderCell>Column B</DDSStructuredListHeaderCell>
-        <DDSStructuredListHeaderCell>Column C</DDSStructuredListHeaderCell>
-        <DDSStructuredListHeaderCell>Column D</DDSStructuredListHeaderCell>
-      </DDSStructuredListHeaderRow>
-    </DDSStructuredListHead>
-    <DDSStructuredListBody>
-      <DDSStructuredListGroup title="Group 1">
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-          <DDSStructuredListCell>
+  <C4DStructuredList>
+    <C4DStructuredListHead>
+      <C4DStructuredListHeaderRow>
+        <C4DStructuredListHeaderCell>Column A</C4DStructuredListHeaderCell>
+        <C4DStructuredListHeaderCell>Column B</C4DStructuredListHeaderCell>
+        <C4DStructuredListHeaderCell>Column C</C4DStructuredListHeaderCell>
+        <C4DStructuredListHeaderCell>Column D</C4DStructuredListHeaderCell>
+      </C4DStructuredListHeaderRow>
+    </C4DStructuredListHead>
+    <C4DStructuredListBody>
+      <C4DStructuredListGroup title="Group 1">
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListGroup>
-      <DDSStructuredListGroup title="Group 2">
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListGroup>
+      <C4DStructuredListGroup title="Group 2">
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListGroup>
-      <DDSStructuredListGroup title="Group 3">
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListGroup>
+      <C4DStructuredListGroup title="Group 3">
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
             augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListGroup>
-    </DDSStructuredListBody>
-  </DDSStructuredList>
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListGroup>
+    </C4DStructuredListBody>
+  </C4DStructuredList>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.js b/packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.js
index 4343e3f2910..2aeec2cd012 100644
--- a/packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/table-of-contents/src/index.js
@@ -9,9 +9,9 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
+import C4DTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
 import './index.css';
 
-const App = () => <DDSTableOfContents></DDSTableOfContents>;
+const App = () => <C4DTableOfContents></C4DTableOfContents>;
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
index 583d1135a34..786f14d209b 100644
--- a/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/tabs-extended-media/src/index.js
@@ -9,109 +9,109 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSTabsExtendedMedia from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media';
-import DDSTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
+import C4DTabsExtendedMedia from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media';
+import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
 /* eslint-disable max-len */
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
 /* eslint-disable max-len */
-import DDSContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
 /* eslint-disable max-len */
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 
 import './index.css';
 
 const App = () => (
-  <DDSTabsExtendedMedia>
-    <DDSContentSectionHeading>Section heading</DDSContentSectionHeading>
-    <DDSTab label="First tab">
-      <DDSContentItemHorizontalMedia align="left">
-        <DDSImage
+  <C4DTabsExtendedMedia>
+    <C4DContentSectionHeading>Section heading</C4DContentSectionHeading>
+    <C4DTab label="First tab">
+      <C4DContentItemRowMedia align="left">
+        <C4DImage
           slot="media"
           alt="Image alt text"
-          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-        <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-        <DDSContentItemHorizontalMediaCopy>
+          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+        <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </DDSContentItemHorizontalMediaCopy>
-        <DDSLinkList slot="footer" type="vertical">
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        </C4DContentItemRowMediaCopy>
+        <C4DLinkList slot="footer" type="vertical">
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
-          </DDSLinkListItemCTA>
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+          </C4DLinkListItemCTA>
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
             Microservices and containers
-          </DDSLinkListItemCTA>
-        </DDSLinkList>
-      </DDSContentItemHorizontalMedia>
-    </DDSTab>
-    <DDSTab label="Second tab">
-      <DDSContentItemHorizontalMedia align="left">
-        <DDSImage
+          </C4DLinkListItemCTA>
+        </C4DLinkList>
+      </C4DContentItemRowMedia>
+    </C4DTab>
+    <C4DTab label="Second tab">
+      <C4DContentItemRowMedia align="left">
+        <C4DImage
           slot="media"
           alt="Image alt text"
-          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-        <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-        <DDSContentItemHorizontalMediaCopy>
+          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+        <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </DDSContentItemHorizontalMediaCopy>
-        <DDSLinkList slot="footer" type="vertical">
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        </C4DContentItemRowMediaCopy>
+        <C4DLinkList slot="footer" type="vertical">
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
-          </DDSLinkListItemCTA>
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+          </C4DLinkListItemCTA>
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
             Microservices and containers
-          </DDSLinkListItemCTA>
-        </DDSLinkList>
-      </DDSContentItemHorizontalMedia>
-    </DDSTab>
-    <DDSTab label="Third tab">
-      <DDSContentItemHorizontalMedia align="left">
-        <DDSImage
+          </C4DLinkListItemCTA>
+        </C4DLinkList>
+      </C4DContentItemRowMedia>
+    </C4DTab>
+    <C4DTab label="Third tab">
+      <C4DContentItemRowMedia align="left">
+        <C4DImage
           slot="media"
           alt="Image alt text"
-          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-        <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-        <DDSContentItemHorizontalMediaCopy>
+          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+        <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </DDSContentItemHorizontalMediaCopy>
-        <DDSLinkList slot="footer" type="vertical">
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        </C4DContentItemRowMediaCopy>
+        <C4DLinkList slot="footer" type="vertical">
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
-          </DDSLinkListItemCTA>
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+          </C4DLinkListItemCTA>
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
             Microservices and containers
-          </DDSLinkListItemCTA>
-        </DDSLinkList>
-      </DDSContentItemHorizontalMedia>
-    </DDSTab>
-    <DDSTab label="Fourth tab">
-      <DDSContentItemHorizontalMedia align="left">
-        <DDSImage
+          </C4DLinkListItemCTA>
+        </C4DLinkList>
+      </C4DContentItemRowMedia>
+    </C4DTab>
+    <C4DTab label="Fourth tab">
+      <C4DContentItemRowMedia align="left">
+        <C4DImage
           slot="media"
           alt="Image alt text"
-          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-        <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-        <DDSContentItemHorizontalMediaCopy>
+          default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+        <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+        <C4DContentItemRowMediaCopy>
           Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin.
-        </DDSContentItemHorizontalMediaCopy>
-        <DDSLinkList slot="footer" type="vertical">
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        </C4DContentItemRowMediaCopy>
+        <C4DLinkList slot="footer" type="vertical">
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
             Learn more
-          </DDSLinkListItemCTA>
-          <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+          </C4DLinkListItemCTA>
+          <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
             Microservices and containers
-          </DDSLinkListItemCTA>
-        </DDSLinkList>
-      </DDSContentItemHorizontalMedia>
-    </DDSTab>
-  </DDSTabsExtendedMedia>
+          </C4DLinkListItemCTA>
+        </C4DLinkList>
+      </C4DContentItemRowMedia>
+    </C4DTab>
+  </C4DTabsExtendedMedia>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.js b/packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.js
index 023ad3d454f..ef84d4e8aa3 100644
--- a/packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/tabs-extended/src/index.js
@@ -9,20 +9,20 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
-import DDSTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
+import C4DTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
+import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
 
 import './index.css';
 
 const App = () => (
-  <DDSTabsExtended>
-    <DDSTab label="First Tab">
+  <C4DTabsExtended>
+    <C4DTab label="First Tab">
       <p>First tab paragraph text</p>
-    </DDSTab>
-    <DDSTab label="Second Tab">
+    </C4DTab>
+    <C4DTab label="Second Tab">
       <p>Second tab paragraph text</p>
-    </DDSTab>
-  </DDSTabsExtended>
+    </C4DTab>
+  </C4DTabsExtended>
 );
 
 render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/index.html b/packages/web-components/examples/codesandbox/components-react/tag-group/index.html
deleted file mode 100644
index a85fd29b320..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-group/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
-    <title>carbon-web-components example with React</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <script type="module" src="index.js"></script>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/package.json b/packages/web-components/examples/codesandbox/components-react/tag-group/package.json
deleted file mode 100644
index 114474ae59d..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-group/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-react-tag-group-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
-  "license": "Apache-2",
-  "scripts": {
-    "start": "webpack serve"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest",
-    "@carbon/icons-react": "~10.22.0",
-    "carbon-components": "~10.23.0",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "lodash-es": "^4.17.0",
-    "prop-types": "^15.7.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "@types/react": "^16.9.0",
-    "babel-loader": "^8.2.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/tag-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/src/index.js b/packages/web-components/examples/codesandbox/components-react/tag-group/src/index.js
deleted file mode 100644
index ecd167b1bb5..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-group/src/index.js
+++ /dev/null
@@ -1,25 +0,0 @@
-/**
- * @license
- *
- * 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 'react-dom';
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link';
-import './index.css';
-
-const App = () => (
-  <DDSTagGroup>
-    <DDSTagLink href="https://www.example.com">Copy text 1</DDSTagLink>
-    <DDSTagLink href="https://www.example.com">Copy text 2</DDSTagLink>
-    <DDSTagLink href="https://www.example.com">Copy text 3</DDSTagLink>
-    <DDSTagLink href="https://www.example.com">Copy text 4</DDSTagLink>
-  </DDSTagGroup>
-);
-
-render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/index.html b/packages/web-components/examples/codesandbox/components-react/tag-link/index.html
deleted file mode 100644
index 66fb6ec136d..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-link/index.html
+++ /dev/null
@@ -1,24 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
-    <title>carbon-web-components example with React</title>
-  </head>
-  <body>
-    <noscript>
-      You need to enable JavaScript to run this app.
-    </noscript>
-    <div id="root"></div>
-    <script type="module" src="index.js"></script>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/package.json b/packages/web-components/examples/codesandbox/components-react/tag-link/package.json
deleted file mode 100644
index bb20b6a7057..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-link/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-react-tag-link-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
-  "license": "Apache-2",
-  "scripts": {
-    "start": "webpack serve"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest",
-    "@carbon/icons-react": "~10.22.0",
-    "carbon-components": "~10.23.0",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "lodash-es": "^4.17.0",
-    "prop-types": "^15.7.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "@types/react": "^16.9.0",
-    "babel-loader": "^8.2.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/tag-link/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-link/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/src/index.js b/packages/web-components/examples/codesandbox/components-react/tag-link/src/index.js
deleted file mode 100644
index 1ab2b8c59e6..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-link/src/index.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @license
- *
- * 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 'react-dom';
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link';
-import './index.css';
-
-const App = () => <DDSTagLink href="https://www.example.com">Copy Text</DDSTagLink>;
-
-render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/tag-link/webpack.config.js
deleted file mode 100644
index b8a5ef508bc..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/tag-link/webpack.config.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @license
- *
- * 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.
- */
-
-'use strict';
-
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-react'],
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        sideEffects: true,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
-  },
-  plugins: [
-    // Lets WebPack Dev Server serve `.html` file.
-    // If you have other means to server `.html` content, this is not needed.
-    new HtmlWebpackPlugin({
-      template: 'index.html',
-      inject: false,
-    }),
-  ],
-  output: {
-    library: 'index',
-    filename: 'index.js',
-  },
-};
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/.gitignore b/packages/web-components/examples/codesandbox/components-react/universal-banner/.gitignore
deleted file mode 100644
index 7d5b7a94f4d..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/universal-banner/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/build
-/node_modules
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/package.json b/packages/web-components/examples/codesandbox/components-react/universal-banner/package.json
deleted file mode 100644
index 85f3c8b0e59..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/universal-banner/package.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-react-universal-banner-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com with React.",
-  "license": "Apache-2",
-  "scripts": {
-    "start": "webpack serve"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "canary",
-    "@carbon/icons-react": "~10.22.0",
-    "carbon-components": "~10.23.0",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
-    "lodash-es": "^4.17.0",
-    "prop-types": "^15.7.0",
-    "react": "^17.0.0",
-    "react-dom": "^17.0.0",
-    "react-redux": "^7.2.0"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0",
-    "@babel/preset-react": "^7.10.0",
-    "@types/lodash-es": "^4.17.0",
-    "@types/react": "^16.9.0",
-    "babel-loader": "^8.2.0",
-    "css-loader": "^4.3.0",
-    "html-webpack-plugin": "^4.5.0",
-    "style-loader": "^2.0.0",
-    "webpack": "^4.0.0",
-    "webpack-cli": "^4.0.0",
-    "webpack-dev-server": "^3.11.0"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components-react/universal-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/universal-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.css b/packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.css
deleted file mode 100644
index d858ebb2da4..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.css
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-html,
-body {
-  margin: 0;
-}
-
-body {
-  padding: 2rem;
-}
-
-/* Minimum setting to use IBM Plex font */
-@font-face {
-  font-weight: 400;
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  src: local('IBM Plex Sans'), local('IBMPlexSans'),
-    url(https://1www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-Regular.woff) format('woff');
-  font-display: auto;
-}
-
-@font-face {
-  font-weight: 600;
-  font-family: 'IBM Plex Sans';
-  font-style: normal;
-  src: local('IBM Plex Sans SemiBold'), local('IBMPlexSans-SemiBold'),
-    url(https://1www.s81c.com/common/carbon/plex/fonts/IBM-Plex-Sans/fonts/complete/woff/IBMPlexSans-SemiBold.woff) format('woff');
-  font-display: auto;
-}
-
-/* From: https://github.com/carbon-design-system/carbon/blob/v10.22.0/packages/type/scss/_reset.scss#L31-L32 */
-body {
-  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-}
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.js b/packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.js
deleted file mode 100644
index 086e0ef7b68..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/universal-banner/src/index.js
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @license
- *
- * 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 'react-dom';
-// eslint-disable-next-line max-len
-import DDSUniversalBanner from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner';
-import DDSUniversalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-heading';
-import DDSUniversalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-copy';
-import DDSUniversalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-image';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import './index.css';
-
-const App = () => (
-  <DDSUniversalBanner image-width="4-col">
-    <DDSUniversalBannerImage
-      slot="image"
-      default-src={'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616'}></DDSUniversalBannerImage>
-    <DDSUniversalBannerHeading slot="heading">Hybrid cloud and AI for smarter business</DDSUniversalBannerHeading>
-    <DDSUniversalBannerCopy slot="copy">Las Vegas, June 15-18, 2025</DDSUniversalBannerCopy>
-    <DDSButtonCTA slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-      Register for Think. Free
-    </DDSButtonCTA>
-  </DDSUniversalBanner>
-);
-
-render(<App />, document.getElementById('root'));
diff --git a/packages/web-components/examples/codesandbox/components-react/universal-banner/webpack.config.js b/packages/web-components/examples/codesandbox/components-react/universal-banner/webpack.config.js
deleted file mode 100644
index b8a5ef508bc..00000000000
--- a/packages/web-components/examples/codesandbox/components-react/universal-banner/webpack.config.js
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @license
- *
- * 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.
- */
-
-'use strict';
-
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-
-module.exports = {
-  module: {
-    rules: [
-      {
-        test: /\.js$/,
-        use: [
-          {
-            loader: 'babel-loader',
-            options: {
-              presets: ['@babel/preset-react'],
-            },
-          },
-        ],
-      },
-      {
-        test: /\.css$/,
-        sideEffects: true,
-        use: ['style-loader', 'css-loader'],
-      },
-    ],
-  },
-  plugins: [
-    // Lets WebPack Dev Server serve `.html` file.
-    // If you have other means to server `.html` content, this is not needed.
-    new HtmlWebpackPlugin({
-      template: 'index.html',
-      inject: false,
-    }),
-  ],
-  output: {
-    library: 'index',
-    filename: 'index.js',
-  },
-};
diff --git a/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js b/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js
index 1aabba7c7a6..77d3ab253aa 100644
--- a/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js
+++ b/packages/web-components/examples/codesandbox/components-react/video-player/src/index.js
@@ -9,15 +9,15 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 import './index.css';
 
 const App = () => (
   <>
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--offset-lg-3 bx--col-lg-13">
-          <DDSVideoPlayerContainer aspectRatio="1x1" videoId="1_9h94wo6b" />
+    <div className="cds--grid">
+      <div className="cds--row">
+        <div className="cds--offset-lg-3 cds--col-lg-13">
+          <C4DVideoPlayerContainer aspectRatio="1x1" videoId="1_9h94wo6b" />
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html b/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html
index ad3b7602a38..72391fd2a10 100644
--- a/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/back-to-top/cdn.html
@@ -12,8 +12,7 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     #app {
       height: 6000px;
@@ -22,14 +21,14 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/back-to-top.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Scroll down! 👋</h1>
       <div id="app"></div>
     </div>
   </div>
 </div>
-<dds-back-to-top></dds-back-to-top>
+<cds-back-to-top></cds-back-to-top>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/back-to-top/index.html b/packages/web-components/examples/codesandbox/components/back-to-top/index.html
index 22ba1fe2a79..0f561f0caca 100644
--- a/packages/web-components/examples/codesandbox/components/back-to-top/index.html
+++ b/packages/web-components/examples/codesandbox/components/back-to-top/index.html
@@ -13,8 +13,7 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     #app {
       height: 6000px;
@@ -23,14 +22,14 @@
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Scroll down! 👋</h1>
       <div id="app"></div>
     </div>
   </div>
 </div>
-<dds-back-to-top></dds-back-to-top>
+<cds-back-to-top></cds-back-to-top>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/background-media/cdn.html b/packages/web-components/examples/codesandbox/components/background-media/cdn.html
index 3a29c3f82d5..92029a2987c 100644
--- a/packages/web-components/examples/codesandbox/components/background-media/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/background-media/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-background-media:not(:defined) {
+    cds-background-media:not(:defined) {
       display: none;
     }
   </style>
@@ -23,33 +22,33 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/background-media.min.js"></script>
 </head>
 <body>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-sm-4 bx--no-gutter">
-        <dds-background-media
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-sm-4 cds--no-gutter">
+        <cds-background-media
           alt="alt-text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-          <dds-image-item
+          <cds-image-item
             media="(min-width: 1312px)"
             srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
           >
-          </dds-image-item>
-          <dds-image-item
+          </cds-image-item>
+          <cds-image-item
             media="(min-width: 1056px)"
             srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
           >
-          </dds-image-item>
-          <dds-image-item media="(min-width: 991px)"
+          </cds-image-item>
+          <cds-image-item media="(min-width: 991px)"
                           srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 672px)"
+          </cds-image-item>
+          <cds-image-item media="(min-width: 672px)"
                           srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)"
+          </cds-image-item>
+          <cds-image-item media="(min-width: 320px)"
                           srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-          </dds-image-item>
-        </dds-background-media>
+          </cds-image-item>
+        </cds-background-media>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/background-media/index.html b/packages/web-components/examples/codesandbox/components/background-media/index.html
index 996819af35b..d6f600b94ae 100644
--- a/packages/web-components/examples/codesandbox/components/background-media/index.html
+++ b/packages/web-components/examples/codesandbox/components/background-media/index.html
@@ -11,44 +11,43 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-background-media:not(:defined) {
+    cds-background-media:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-sm-4 bx--no-gutter">
-        <dds-background-media
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-sm-4 cds--no-gutter">
+        <cds-background-media
           alt="alt-text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-          <dds-image-item
+          <cds-image-item
             media="(min-width: 1312px)"
             srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
           >
-          </dds-image-item>
-          <dds-image-item
+          </cds-image-item>
+          <cds-image-item
             media="(min-width: 1056px)"
             srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
           >
-          </dds-image-item>
-          <dds-image-item media="(min-width: 991px)"
+          </cds-image-item>
+          <cds-image-item media="(min-width: 991px)"
                           srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 672px)"
+          </cds-image-item>
+          <cds-image-item media="(min-width: 672px)"
                           srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)"
+          </cds-image-item>
+          <cds-image-item media="(min-width: 320px)"
                           srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-          </dds-image-item>
-        </dds-background-media>
+          </cds-image-item>
+        </cds-background-media>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/button-group/cdn.html b/packages/web-components/examples/codesandbox/components/button-group/cdn.html
index 27f70d8dfec..fa9aab9a566 100644
--- a/packages/web-components/examples/codesandbox/components/button-group/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/button-group/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-button-group:not(:defined) {
+    cds-button-group:not(:defined) {
       display: none;
     }
   </style>
@@ -25,13 +24,13 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/button-group.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-button-group>
-        <dds-button-group-item>Lorem ipsum</dds-button-group-item>
-        <dds-button-group-item>Dolor sit amet</dds-button-group-item>
-      </dds-button-group>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <c4d-button-group>
+        <c4d-button-group-item href="https://www.example.com" cta-type="local">Lorem ipsum</c4d-button-group-item>
+        <c4d-button-group-item href="https://www.example.com" cta-type="local">Dolor sit amet</c4d-button-group-item>
+      </c4d-button-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/button-group/index.html b/packages/web-components/examples/codesandbox/components/button-group/index.html
index 5d4cf5877ae..f87a9c68228 100644
--- a/packages/web-components/examples/codesandbox/components/button-group/index.html
+++ b/packages/web-components/examples/codesandbox/components/button-group/index.html
@@ -17,22 +17,22 @@
           href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-button-group:not(:defined) {
+      cds-button-group:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-sm-4 bx--col-lg-12">
-        <dds-button-group>
-          <dds-button-group-item>Lorem ipsum</dds-button-group-item>
-          <dds-button-group-item>Dolor sit amet</dds-button-group-item>
-        </dds-button-group>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <c4d-button-group>
+            <c4d-button-group-item href="https://www.example.com" cta-type="local">Lorem ipsum</c4d-button-group-item>
+            <c4d-button-group-item href="https://www.example.com" cta-type="local">Dolor sit amet</c4d-button-group-item>
+          </c4d-button-group>
+        </div>
       </div>
     </div>
-  </div>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/button/.babelrc b/packages/web-components/examples/codesandbox/components/button/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components/button/.gitignore b/packages/web-components/examples/codesandbox/components/button/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/web-components/examples/codesandbox/components/button/cdn.html b/packages/web-components/examples/codesandbox/components/button/cdn.html
new file mode 100644
index 00000000000..936a9a27225
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/cdn.html
@@ -0,0 +1,36 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <style>
+    /* Suppress custom element until styles are loaded */
+    dds-button:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module"
+          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/button.min.js"></script>
+</head>
+<body>
+<div class="bx--grid">
+  <div class="bx--row">
+    <div class="bx--col-sm-4 bx--col-lg-12">
+      <dds-button href="https://www.example.com" cta-type="local">Button text</dds-button>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/button/index.html b/packages/web-components/examples/codesandbox/components/button/index.html
new file mode 100644
index 00000000000..713197e26c3
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/index.html
@@ -0,0 +1,35 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet"
+          href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+    <link rel="stylesheet"
+          href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+    <style>
+      /* Suppress custom element until styles are loaded */
+      dds-button:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+  <body>
+  <div class="bx--grid">
+    <div class="bx--row">
+      <div class="bx--col-sm-4 bx--col-lg-12">
+        <dds-button href="https://www.example.com" cta-type="local">Button text</dds-button>
+      </div>
+    </div>
+  </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/button/package.json b/packages/web-components/examples/codesandbox/components/button/package.json
new file mode 100644
index 00000000000..45808038336
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "ibmdotcom-web-components-button-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build *.html --no-minify --public-url ./"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/CardSectionSimple/sandbox.config.json b/packages/web-components/examples/codesandbox/components/button/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/CardSectionSimple/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/button/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/button/src/index.js b/packages/web-components/examples/codesandbox/components/button/src/index.js
new file mode 100644
index 00000000000..620988b6814
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/button/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * 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 '@carbon/ibmdotcom-web-components/es/components/button/index.js';
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/cdn.html b/packages/web-components/examples/codesandbox/components/callout-quote/cdn.html
index e1fadcacc77..831f0d61bc0 100644
--- a/packages/web-components/examples/codesandbox/components/callout-quote/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/callout-quote/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-callout-quote:not(:defined) {
+    cds-callout-quote:not(:defined) {
       display: none;
     }
   </style>
@@ -25,16 +24,16 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/callout-quote.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-callout-quote>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-callout-quote>
         Callout Quote: Duis aute irure dolor in reprehenderit
-        <dds-quote-source-heading>Lorem ipsum</dds-quote-source-heading>
-        <dds-quote-source-copy>consectetur adipiscing elit
-        </dds-quote-source-copy>
-        <dds-quote-source-bottom-copy>IBM Cloud</dds-quote-source-bottom-copy>
-        <dds-callout-link-with-icon slot="footer" href="https//example/com">
+        <cds-quote-source-heading>Lorem ipsum</cds-quote-source-heading>
+        <cds-quote-source-copy>consectetur adipiscing elit
+        </cds-quote-source-copy>
+        <cds-quote-source-bottom-copy>IBM Cloud</cds-quote-source-bottom-copy>
+        <cds-callout-link-with-icon slot="footer" href="https//example/com">
           Link with Icon
           <svg
             slot="icon"
@@ -50,8 +49,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-callout-link-with-icon>
-      </dds-callout-quote>
+        </cds-callout-link-with-icon>
+      </cds-callout-quote>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-quote/index.html b/packages/web-components/examples/codesandbox/components/callout-quote/index.html
index e6154305552..4dc0ded1e25 100644
--- a/packages/web-components/examples/codesandbox/components/callout-quote/index.html
+++ b/packages/web-components/examples/codesandbox/components/callout-quote/index.html
@@ -13,27 +13,26 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-callout-quote:not(:defined) {
+    cds-callout-quote:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-callout-quote>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-callout-quote>
         Callout Quote: Duis aute irure dolor in reprehenderit
-        <dds-quote-source-heading>Lorem ipsum</dds-quote-source-heading>
-        <dds-quote-source-copy>consectetur adipiscing elit
-        </dds-quote-source-copy>
-        <dds-quote-source-bottom-copy>IBM Cloud</dds-quote-source-bottom-copy>
-        <dds-callout-link-with-icon slot="footer" href="https//example/com">
+        <cds-quote-source-heading>Lorem ipsum</cds-quote-source-heading>
+        <cds-quote-source-copy>consectetur adipiscing elit
+        </cds-quote-source-copy>
+        <cds-quote-source-bottom-copy>IBM Cloud</cds-quote-source-bottom-copy>
+        <cds-callout-link-with-icon slot="footer" href="https//example/com">
           Link with Icon
           <svg
             slot="icon"
@@ -49,8 +48,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-callout-link-with-icon>
-      </dds-callout-quote>
+        </cds-callout-link-with-icon>
+      </cds-callout-quote>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html b/packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html
index 92e15c44dcb..524610f8b35 100644
--- a/packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/callout-with-media/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-callout-with-media:not(:defined) {
+    cds-callout-with-media:not(:defined) {
       display: none;
     }
   </style>
@@ -25,29 +24,29 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/callout-with-media.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-callout-with-media>
-        <dds-content-block-heading>Curabitur malesuada varius mi eu posuere
-        </dds-content-block-heading>
-        <dds-callout-with-media-copy size="sm">
-          <dds-content-block-paragraph
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-callout-with-media>
+        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere
+        </cds-content-block-heading>
+        <cds-callout-with-media-copy size="sm">
+          <cds-content-block-paragraph
           >Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit.
             Aenean et ultricies est. Mauris iaculis eget dolor
             nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis,
             <em>consequat</em> libero. Here are some common
             categories:
-          </dds-content-block-paragraph
+          </cds-content-block-paragraph
           >
-        </dds-callout-with-media-copy>
-        <dds-callout-with-media-image
+        </cds-callout-with-media-copy>
+        <cds-callout-with-media-image
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
           heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         >
-        </dds-callout-with-media-image>
-      </dds-callout-with-media>
+        </cds-callout-with-media-image>
+      </cds-callout-with-media>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/callout-with-media/index.html b/packages/web-components/examples/codesandbox/components/callout-with-media/index.html
index 765bea79c58..0952ede5674 100644
--- a/packages/web-components/examples/codesandbox/components/callout-with-media/index.html
+++ b/packages/web-components/examples/codesandbox/components/callout-with-media/index.html
@@ -13,40 +13,39 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-callout-with-media:not(:defined) {
+    cds-callout-with-media:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-callout-with-media>
-        <dds-content-block-heading>Curabitur malesuada varius mi eu posuere
-        </dds-content-block-heading>
-        <dds-callout-with-media-copy size="sm">
-          <dds-content-block-paragraph
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-callout-with-media>
+        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere
+        </cds-content-block-heading>
+        <cds-callout-with-media-copy size="sm">
+          <cds-content-block-paragraph
           >Lorem ipsum <em>dolor</em> sit amet, consectetur adipiscing elit.
             Aenean et ultricies est. Mauris iaculis eget dolor
             nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis,
             <em>consequat</em> libero. Here are some common
             categories:
-          </dds-content-block-paragraph
+          </cds-content-block-paragraph
           >
-        </dds-callout-with-media-copy>
-        <dds-callout-with-media-image
+        </cds-callout-with-media-copy>
+        <cds-callout-with-media-image
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
           heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
         >
-        </dds-callout-with-media-image>
-      </dds-callout-with-media>
+        </cds-callout-with-media-image>
+      </cds-callout-with-media>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-group/cdn.html b/packages/web-components/examples/codesandbox/components/card-group/cdn.html
index c7e994bb056..70eaba276e7 100644
--- a/packages/web-components/examples/codesandbox/components/card-group/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card-group/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-group:not(:defined) {
+    cds-card-group:not(:defined) {
       display: none;
     }
   </style>
@@ -25,12 +24,12 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-group.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card-group>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card-group>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -38,7 +37,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -52,10 +51,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -63,7 +62,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -77,10 +76,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -88,7 +87,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -102,10 +101,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -113,7 +112,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -127,10 +126,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -138,7 +137,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -152,11 +151,11 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com" color-scheme="inverse">
-          <dds-card-heading>Top level card link</dds-card-heading>
-          <dds-card-cta-footer slot="footer" color-scheme="inverse">
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com" color-scheme="inverse">
+          <cds-card-heading>Top level card link</cds-card-heading>
+          <cds-card-cta-footer slot="footer" color-scheme="inverse">
             <svg
               slot="icon"
               focusable="false"
@@ -170,9 +169,9 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-      </dds-card-group>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+      </cds-card-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-group/index.html b/packages/web-components/examples/codesandbox/components/card-group/index.html
index bf6099018c4..f59c42cba97 100644
--- a/packages/web-components/examples/codesandbox/components/card-group/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-group/index.html
@@ -13,23 +13,22 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-group:not(:defined) {
+    cds-card-group:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card-group>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card-group>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -37,7 +36,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -51,10 +50,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -62,7 +61,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -76,10 +75,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -87,7 +86,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -101,10 +100,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -112,7 +111,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -126,10 +125,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com">
-          <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com">
+          <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
             ultricies est. Mauris iaculis eget dolor nec
@@ -137,7 +136,7 @@
             consequat
             libero.
           </p>
-          <dds-card-cta-footer slot="footer">
+          <cds-card-cta-footer slot="footer">
             <svg
               slot="icon"
               focusable="false"
@@ -151,11 +150,11 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-        <dds-card-group-item href="https://example.com" color-scheme="inverse">
-          <dds-card-heading>Top level card link</dds-card-heading>
-          <dds-card-cta-footer slot="footer" color-scheme="inverse">
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+        <cds-card-group-item href="https://example.com" color-scheme="inverse">
+          <cds-card-heading>Top level card link</cds-card-heading>
+          <cds-card-cta-footer slot="footer" color-scheme="inverse">
             <svg
               slot="icon"
               focusable="false"
@@ -169,9 +168,9 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-group-item>
-      </dds-card-group>
+          </cds-card-cta-footer>
+        </cds-card-group-item>
+      </cds-card-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/cdn.html b/packages/web-components/examples/codesandbox/components/card-in-card/cdn.html
index 369941d203a..196c6671100 100644
--- a/packages/web-components/examples/codesandbox/components/card-in-card/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card-in-card/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-in-card:not(:defined) {
+    cds-card-in-card:not(:defined) {
       display: none;
     }
   </style>
@@ -25,25 +24,25 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-in-card.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
-      <dds-card-in-card href="https://example.com">
-        <dds-card-in-card-image slot="image" alt="Image alt text"
+      <cds-card-in-card href="https://example.com">
+        <cds-card-in-card-image slot="image" alt="Image alt text"
                                 default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-          <dds-image-item media="(min-width: 1312px)"
-                          srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
-          <dds-image-item media="(min-width: 672px)"
-                          srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
-          <dds-image-item media="(min-width: 320px)"
-                          srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"></dds-image-item>
-        </dds-card-in-card-image>
-        <dds-card-eyebrow>Label</dds-card-eyebrow>
-        <dds-card-heading>Standard Bank Group prepares to embrace Africa’s AI
+          <cds-image-item media="(min-width: 1312px)"
+                          srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
+          <cds-image-item media="(min-width: 672px)"
+                          srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
+          <cds-image-item media="(min-width: 320px)"
+                          srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"></cds-image-item>
+        </cds-card-in-card-image>
+        <cds-card-eyebrow>Label</cds-card-eyebrow>
+        <cds-card-heading>Standard Bank Group prepares to embrace Africa’s AI
           opportunity
-        </dds-card-heading>
-        <dds-card-cta-footer>
+        </cds-card-heading>
+        <cds-card-cta-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -58,8 +57,8 @@ <h1>Hello World! 👋</h1>
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-cta-footer>
-      </dds-card-in-card>
+        </cds-card-cta-footer>
+      </cds-card-in-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-in-card/index.html b/packages/web-components/examples/codesandbox/components/card-in-card/index.html
index e28465121bb..aebbbe877ad 100644
--- a/packages/web-components/examples/codesandbox/components/card-in-card/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-in-card/index.html
@@ -13,45 +13,44 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-in-card:not(:defined) {
+    cds-card-in-card:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
-      <dds-card-in-card cta-type="external" href="https://example.com">
-        <dds-card-in-card-image
+      <cds-card-in-card cta-type="external" href="https://example.com">
+        <cds-card-in-card-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"
         >
-          <dds-image-item
+          <cds-image-item
             media="(min-width: 1312px)"
             srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"
-          ></dds-image-item>
-          <dds-image-item
+          ></cds-image-item>
+          <cds-image-item
             media="(min-width: 672px)"
             srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"
-          ></dds-image-item>
-          <dds-image-item
+          ></cds-image-item>
+          <cds-image-item
             media="(min-width: 320px)"
             srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"
-          ></dds-image-item>
-        </dds-card-in-card-image>
-        <dds-card-heading
+          ></cds-image-item>
+        </cds-card-in-card-image>
+        <cds-card-heading
           >Standard Bank Group prepares to embrace Africa’s AI opportunity
-        </dds-card-heading>
-        <dds-card-cta-footer> </dds-card-cta-footer>
-      </dds-card-in-card>
+        </cds-card-heading>
+        <cds-card-cta-footer> </cds-card-cta-footer>
+      </cds-card-in-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-link/cdn.html b/packages/web-components/examples/codesandbox/components/card-link/cdn.html
index 2d7a8cab4de..9517f9eba30 100644
--- a/packages/web-components/examples/codesandbox/components/card-link/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card-link/cdn.html
@@ -13,23 +13,22 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-link:not(:defined) {
+    cds-card-link:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-link.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card-link href="https://example.com">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card-link href="https://example.com">
         <p>Explore AI use cases in all industries</p>
-        <dds-card-footer slot="footer">
+        <cds-card-footer slot="footer">
           <svg
             slot="icon"
             focusable="false"
@@ -42,8 +41,8 @@
           >
             <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-footer>
-      </dds-card-link>
+        </cds-card-footer>
+      </cds-card-link>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-link/index.html b/packages/web-components/examples/codesandbox/components/card-link/index.html
index 8aee94639da..dc24d2098cc 100644
--- a/packages/web-components/examples/codesandbox/components/card-link/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-link/index.html
@@ -15,19 +15,19 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-link:not(:defined) {
+    cds-card-link:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card-link href="https://example.com">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card-link href="https://example.com">
         <p>Explore AI use cases in all industries</p>
-        <dds-card-footer slot="footer">
+        <cds-card-footer slot="footer">
           <svg
             slot="icon"
             focusable="false"
@@ -41,8 +41,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-footer>
-      </dds-card-link>
+        </cds-card-footer>
+      </cds-card-link>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html b/packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html
index 52ba2bf3236..9917198dd61 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-carousel/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-section-carousel:not(:defined) {
+    cds-card-section-carousel:not(:defined) {
       display: none;
     }
   </style>
@@ -25,14 +24,14 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-carousel.min.js"></script>
 </head>
 <body>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <dds-card-section-carousel>
-        <dds-content-section-heading>Card Section - Carousel</dds-content-section-heading>
-        <dds-content-section-copy
+  <div class="cds--grid">
+    <div class="cds--row">
+      <cds-card-section-carousel>
+        <cds-content-section-heading>Card Section - Carousel</cds-content-section-heading>
+        <cds-content-section-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-        </dds-content-section-copy>
-        <dds-link-with-icon slot="footer"
+        </cds-content-section-copy>
+        <cds-link-with-icon slot="footer"
           href="https://www.ibm.com/standards/carbon">
           Link text
           <svg
@@ -48,12 +47,12 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-link-with-icon>
-        <dds-carousel>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+        </cds-link-with-icon>
+        <cds-carousel>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -67,12 +66,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -86,12 +85,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -105,12 +104,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -124,12 +123,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -143,12 +142,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -162,12 +161,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -181,12 +180,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -200,12 +199,12 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-          <dds-card href="https://www.example.com">
-            <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+            </cds-card-footer>
+          </cds-card>
+          <cds-card href="https://www.example.com">
+            <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
             <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-            <dds-card-footer>
+            <cds-card-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -219,10 +218,10 @@
                 <path
                   d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-card>
-        </dds-carousel>
-      </dds-card-section-carousel>
+            </cds-card-footer>
+          </cds-card>
+        </cds-carousel>
+      </cds-card-section-carousel>
     </div>
   </div>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-carousel/index.html b/packages/web-components/examples/codesandbox/components/card-section-carousel/index.html
index 09b7ed64274..2f31dd96a15 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-carousel/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-carousel/index.html
@@ -13,25 +13,24 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-section-carousel:not(:defined) {
+    cds-card-section-carousel:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <dds-card-section-carousel>
-      <dds-content-section-heading>Card Section - Carousel</dds-content-section-heading>
-      <dds-content-section-copy
+<div class="cds--grid">
+  <div class="cds--row">
+    <cds-card-section-carousel>
+      <cds-content-section-heading>Card Section - Carousel</cds-content-section-heading>
+      <cds-content-section-copy
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. CDN
-      </dds-content-section-copy>
-      <dds-link-with-icon slot="footer"
+      </cds-content-section-copy>
+      <cds-link-with-icon slot="footer"
         href="https://www.ibm.com/standards/carbon">
         Link text
         <svg
@@ -47,12 +46,12 @@
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-link-with-icon>
-      <dds-carousel>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+      </cds-link-with-icon>
+      <cds-carousel>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -66,12 +65,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -85,12 +84,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -104,12 +103,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -123,12 +122,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -142,12 +141,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -161,12 +160,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -180,12 +179,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -199,12 +198,12 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://www.example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          </cds-card-footer>
+        </cds-card>
+        <cds-card href="https://www.example.com">
+          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <dds-card-footer>
+          <cds-card-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -218,10 +217,10 @@
               <path
                 d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-card>
-      </dds-carousel>
-    </dds-card-section-carousel>
+          </cds-card-footer>
+        </cds-card>
+      </cds-carousel>
+    </cds-card-section-carousel>
   </div>
 </div>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html b/packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html
index fa43eb39b6b..e072424e42c 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-offset/cdn.html
@@ -12,45 +12,44 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-section-offset:not(:defined) {
+    cds-card-section-offset:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-offset.min.js"></script>
 </head>
 <body>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <dds-card-section-offset>
-        <dds-content-block-heading slot="heading">heading</dds-content-block-heading>
-        <dds-background-media
+  <div class="cds--grid">
+    <div class="cds--row">
+      <cds-card-section-offset>
+        <cds-content-block-heading slot="heading">heading</cds-content-block-heading>
+        <cds-background-media
           gradient-direction="left-to-right"
           slot="image-top"
           alt="alt text"
           default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616"
         >
-        </dds-background-media>
-        <dds-text-cta
+        </cds-background-media>
+        <cds-text-cta
           slot="action"
           cta-type="local"
           icon-placement="right"
           href="https://example.com"
         >
           CTA copy
-        </dds-text-cta>
-        <dds-card-group slot="card-group" cards-per-row="2">
-          <dds-card-group-item empty></dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-eyebrow>Label</dds-card-eyebrow>
-            <dds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading>
+        </cds-text-cta>
+        <cds-card-group slot="card-group" cards-per-row="2">
+          <cds-card-group-item empty></cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-eyebrow>Label</cds-card-eyebrow>
+            <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -63,15 +62,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-eyebrow>Label</dds-card-eyebrow>
-            <dds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-eyebrow>Label</cds-card-eyebrow>
+            <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -84,15 +83,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-eyebrow>Label</dds-card-eyebrow>
-            <dds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-eyebrow>Label</cds-card-eyebrow>
+            <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -105,10 +104,10 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-        </dds-card-group>
-      </dds-card-section-offset>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+        </cds-card-group>
+      </cds-card-section-offset>
     </div>
   </div>
 </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-offset/index.html b/packages/web-components/examples/codesandbox/components/card-section-offset/index.html
index f8fddf6e14d..f5cd5033224 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-offset/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-offset/index.html
@@ -16,41 +16,41 @@
           href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-card-section-offset:not(:defined) {
+      cds-card-section-offset:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <dds-card-section-offset>
-          <dds-background-media
+    <div class="cds--grid">
+      <div class="cds--row">
+        <cds-card-section-offset>
+          <cds-background-media
             gradient-direction="left-to-right"
             slot="image-top"
             alt="alt text"
             default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616"
           >
-          </dds-background-media>
-          <dds-content-block-heading slot="heading">heading</dds-content-block-heading>
-          <dds-text-cta
+          </cds-background-media>
+          <cds-content-block-heading slot="heading">heading</cds-content-block-heading>
+          <cds-text-cta
             slot="action"
             cta-type="local"
             icon-placement="right"
             href="https://example.com"
           >
             CTA copy
-          </dds-text-cta>
-          <dds-card-group slot="card-group" cards-per-row="2">
-            <dds-card-group-item empty></dds-card-group-item>
-            <dds-card-group-item href="https://example.com">
-              <dds-card-eyebrow>Label</dds-card-eyebrow>
-              <dds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading>
+          </cds-text-cta>
+          <cds-card-group slot="card-group" cards-per-row="2">
+            <cds-card-group-item empty></cds-card-group-item>
+            <cds-card-group-item href="https://example.com">
+              <cds-card-eyebrow>Label</cds-card-eyebrow>
+              <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
               </p>
-              <dds-card-cta-footer slot="footer">
+              <cds-card-cta-footer slot="footer">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -63,15 +63,15 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-cta-footer>
-            </dds-card-group-item>
-            <dds-card-group-item href="https://example.com">
-              <dds-card-eyebrow>Label</dds-card-eyebrow>
-              <dds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading>
+              </cds-card-cta-footer>
+            </cds-card-group-item>
+            <cds-card-group-item href="https://example.com">
+              <cds-card-eyebrow>Label</cds-card-eyebrow>
+              <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
               </p>
-              <dds-card-cta-footer slot="footer">
+              <cds-card-cta-footer slot="footer">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -84,15 +84,15 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-cta-footer>
-            </dds-card-group-item>
-            <dds-card-group-item href="https://example.com">
-              <dds-card-eyebrow>Label</dds-card-eyebrow>
-              <dds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading>
+              </cds-card-cta-footer>
+            </cds-card-group-item>
+            <cds-card-group-item href="https://example.com">
+              <cds-card-eyebrow>Label</cds-card-eyebrow>
+              <cds-card-heading>Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis
               </p>
-              <dds-card-cta-footer slot="footer">
+              <cds-card-cta-footer slot="footer">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -105,10 +105,10 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-cta-footer>
-            </dds-card-group-item>
-          </dds-card-group>
-        </dds-card-section-offset>
+              </cds-card-cta-footer>
+            </cds-card-group-item>
+          </cds-card-group>
+        </cds-card-section-offset>
       </div>
     </div>
   </body>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html b/packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html
index 286c5a14de2..81fcf81699b 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-simple/cdn.html
@@ -12,29 +12,29 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card-section-simple:not(:defined) {
+    cds-card-section-simple:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-simple.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4">
-      <dds-card-section-simple heading="Aliquam condimentum interdum">
-        <dds-content-section-heading>Aliquam condimentum interdum</dds-content-section-heading>
-        <dds-card-group>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4">
+      <cds-card-section-simple heading="Aliquam condimentum interdum">
+        <cds-content-section-heading>Aliquam condimentum interdum</cds-content-section-heading>
+        <cds-card-group>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -47,15 +47,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -68,15 +68,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -89,15 +89,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -110,15 +110,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -131,10 +131,10 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-        </dds-card-group>
-      </dds-card-section-simple>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+        </cds-card-group>
+      </cds-card-section-simple>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
index fe7d5bfcd5f..47ee9e1e2a9 100644
--- a/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
+++ b/packages/web-components/examples/codesandbox/components/card-section-simple/index.html
@@ -14,26 +14,26 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-card-section-simple:not(:defined) {
+      cds-card-section-simple:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4">
-          <dds-card-section-simple>
-            <dds-content-section-heading>Aliquam condimentum interdum</dds-content-section-heading>
-            <dds-card-group>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4">
+          <cds-card-section-simple>
+            <cds-content-section-heading>Aliquam condimentum interdum</cds-content-section-heading>
+            <cds-card-group>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -46,15 +46,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -67,15 +67,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -88,15 +88,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -109,15 +109,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -130,10 +130,10 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-            </dds-card-group>
-          </dds-card-section-simple>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+            </cds-card-group>
+          </cds-card-section-simple>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/card/cdn.html b/packages/web-components/examples/codesandbox/components/card/cdn.html
index c568b9584b5..392d6cbf58d 100644
--- a/packages/web-components/examples/codesandbox/components/card/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/card/cdn.html
@@ -11,24 +11,23 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card:not(:defined) {
+    cds-card:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card href="https://example.com">
-        <dds-card-eyebrow>eyebrow text</dds-card-eyebrow>
-        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-        <dds-card-footer>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card href="https://example.com">
+        <cds-card-eyebrow>eyebrow text</cds-card-eyebrow>
+        <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+        <cds-card-footer>
           Card cta text
           <svg
             slot="icon"
@@ -43,8 +42,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-footer>
-      </dds-card>
+        </cds-card-footer>
+      </cds-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/card/index.html b/packages/web-components/examples/codesandbox/components/card/index.html
index 8a132e171d1..b4baf2742a8 100644
--- a/packages/web-components/examples/codesandbox/components/card/index.html
+++ b/packages/web-components/examples/codesandbox/components/card/index.html
@@ -11,24 +11,23 @@
   <meta charset="UTF-8" />
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-card:not(:defined) {
+    cds-card:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card href="https://example.com">
-        <dds-card-eyebrow>eyebrow text</dds-card-eyebrow>
-        <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-        <dds-card-footer>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card href="https://example.com">
+        <cds-card-eyebrow>eyebrow text</cds-card-eyebrow>
+        <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+        <cds-card-footer>
           Card cta text
           <svg
             slot="icon"
@@ -43,8 +42,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-footer>
-      </dds-card>
+        </cds-card-footer>
+      </cds-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/carousel/cdn.html b/packages/web-components/examples/codesandbox/components/carousel/cdn.html
index 80b84cad301..215b2074fcd 100644
--- a/packages/web-components/examples/codesandbox/components/carousel/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/carousel/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-carousel:not(:defined) {
+    cds-carousel:not(:defined) {
       display: none;
     }
   </style>
@@ -27,113 +26,48 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-16">
-      <dds-carousel>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-16">
+      <c4d-carousel>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-      </dds-carousel>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-carousel>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/carousel/index.html b/packages/web-components/examples/codesandbox/components/carousel/index.html
index f2ebe644f07..5d973dbae19 100644
--- a/packages/web-components/examples/codesandbox/components/carousel/index.html
+++ b/packages/web-components/examples/codesandbox/components/carousel/index.html
@@ -13,124 +13,58 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-carousel:not(:defined) {
+    c4d-carousel:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-16">
-      <dds-carousel>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-16">
+      <c4d-carousel>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-        <dds-card href="https://example.com">
-          <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <dds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-card>
-      </dds-carousel>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-carousel>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html b/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html
index cb4f9de11cc..e4da074490d 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html
+++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn-rtl.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-cloud-masthead-container:not(:defined) {
+    cds-cloud-masthead-container:not(:defined) {
       display: none;
     }
 
@@ -24,16 +24,16 @@
     }
 
     @media (min-width: 66rem) {
-      .bx--offset-lg-3 {
+      .cds--offset-lg-3 {
         margin-left: 0;
       }
     }
 
-    .bx--content.dds-ce-demo--ui-shell-content h2 {
+    .cds--content.cds-ce-demo--ui-shell-content h2 {
       margin: 30px 0;
     }
 
-    .bx--content.dds-ce-demo--ui-shell-content h2:first-of-type {
+    .cds--content.cds-ce-demo--ui-shell-content h2:first-of-type {
       margin-top: 0;
     }
   </style>
@@ -41,11 +41,11 @@
   <script src="src/index-cdn.js"></script>
 </head>
 <body>
-<dds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></dds-cloud-masthead-container>
-<main class="bx--content dds-ce-demo--ui-shell-content">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--offset-lg-3 bx--col-lg-13">
+<cds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></cds-cloud-masthead-container>
+<main class="cds--content cds-ce-demo--ui-shell-content">
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--offset-lg-3 cds--col-lg-13">
         <h2>
           Purpose and function
         </h2>
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html b/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html
index 1e969832385..554efd867e0 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-cloud-masthead-container:not(:defined) {
+    cds-cloud-masthead-container:not(:defined) {
       display: none;
     }
 
@@ -24,16 +24,16 @@
     }
 
     @media (min-width: 66rem) {
-      .bx--offset-lg-3 {
+      .cds--offset-lg-3 {
         margin-left: 0;
       }
     }
 
-    .bx--content.dds-ce-demo--ui-shell-content h2 {
+    .cds--content.cds-ce-demo--ui-shell-content h2 {
       margin: 30px 0;
     }
 
-    .bx--content.dds-ce-demo--ui-shell-content h2:first-of-type {
+    .cds--content.cds-ce-demo--ui-shell-content h2:first-of-type {
       margin-top: 0;
     }
   </style>
@@ -41,11 +41,11 @@
   <script src="src/index-cdn.js"></script>
 </head>
 <body>
-<dds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></dds-cloud-masthead-container>
-<main class="bx--content dds-ce-demo--ui-shell-content">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--offset-lg-3 bx--col-lg-13">
+<cds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></cds-cloud-masthead-container>
+<main class="cds--content cds-ce-demo--ui-shell-content">
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--offset-lg-3 cds--col-lg-13">
         <h2>
           Purpose and function
         </h2>
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html b/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html
index 72aebecd230..38119f74993 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html
+++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/index.html
@@ -14,18 +14,18 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-cloud-masthead-container:not(:defined) {
+      cds-cloud-masthead-container:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-  <dds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></dds-cloud-masthead-container>
-  <main class="bx--content dds-ce-demo--ui-shell-content">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--offset-lg-3 bx--col-lg-13">
+  <cds-cloud-masthead-container data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead" id="cloud-masthead-container"></cds-cloud-masthead-container>
+  <main class="cds--content cds-ce-demo--ui-shell-content">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--offset-lg-3 cds--col-lg-13">
             <h2>
               Purpose and function
             </h2>
diff --git a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss b/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss
index ef898fdb19b..7e81870866f 100644
--- a/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss
+++ b/packages/web-components/examples/codesandbox/components/cloud-masthead/src/index.scss
@@ -21,12 +21,12 @@ body {
 }
 
 @media (min-width: 66rem) {
-  .bx--offset-lg-3 {
+  .cds--offset-lg-3 {
     margin-left: 0;
   }
 }
 
-.bx--content.dds-ce-demo--ui-shell-content {
+.cds--content.cds-ce-demo--ui-shell-content {
   h2 {
     margin: 30px 0;
 
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/.env.local b/packages/web-components/examples/codesandbox/components/content-block-card-static/.env.local
index e5dd4e78a13..7a3f7d2a59a 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/.env.local
+++ b/packages/web-components/examples/codesandbox/components/content-block-card-static/.env.local
@@ -1 +1 @@
-DDS_CONTENT_BLOCK_CARD_STATIC=true
\ No newline at end of file
+C4D_CONTENT_BLOCK_CARD_STATIC=true
\ No newline at end of file
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html
index 4e1ced01a7c..b242abc838c 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-card-static/cdn.html
@@ -12,78 +12,78 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-card-static:not(:defined) {
+    cds-content-block-card-static:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-card-static.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-      <dds-content-block-card-static>
-        <dds-content-block-heading>Lorem ipsum dolor sit amet.</dds-content-block-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+      <cds-content-block-card-static>
+        <cds-content-block-heading>Lorem ipsum dolor sit amet.</cds-content-block-heading>
 
-        <dds-card-group grid-mode="border">
-          <dds-card-group-item>
-            <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+        <cds-card-group grid-mode="border">
+          <cds-card-group-item>
+            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </dds-card-group-item>
+          </cds-card-group-item>
 
-          <dds-card-group-item>
-            <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+          <cds-card-group-item>
+            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </dds-card-group-item>
+          </cds-card-group-item>
 
-          <dds-card-group-item>
-            <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+          <cds-card-group-item>
+            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </dds-card-group-item>
+          </cds-card-group-item>
 
-          <dds-card-group-item>
-            <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+          <cds-card-group-item>
+            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </dds-card-group-item>
+          </cds-card-group-item>
 
-          <dds-card-group-item>
-            <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+          <cds-card-group-item>
+            <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-          </dds-card-group-item>
-        </dds-card-group>
+          </cds-card-group-item>
+        </cds-card-group>
 
-        <dds-content-item>
-          <dds-content-item-heading>Vivamus suscipit scelerisque arcu sed.</dds-content-item-heading>
-          <dds-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</dds-content-item-copy>
-        </dds-content-item>
+        <cds-content-item>
+          <cds-content-item-heading>Vivamus suscipit scelerisque arcu sed.</cds-content-item-heading>
+          <cds-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</cds-content-item-copy>
+        </cds-content-item>
 
-        <dds-button-group slot="footer">
-          <dds-button-group-item href="https://example.com">
+        <cds-button-group slot="footer">
+          <cds-button-group-item href="https://example.com">
             Contact us
-          </dds-button-group-item>
-          <dds-button-group-item href="https://example.com">
+          </cds-button-group-item>
+          <cds-button-group-item href="https://example.com">
             Free trial
-          </dds-button-group-item>
-        </dds-button-group>
-      </dds-content-block-card-static>
+          </cds-button-group-item>
+        </cds-button-group>
+      </cds-content-block-card-static>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-card-static/index.html b/packages/web-components/examples/codesandbox/components/content-block-card-static/index.html
index c62cc2beeef..0abc06c6083 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-card-static/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-card-static/index.html
@@ -12,79 +12,79 @@
     <title>@carbon/ibmdotcom-web-components example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <script src="src/index.js"></script>
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-card-static:not(:defined) {
+      cds-content-block-card-static:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <dds-content-block-card-static>
-            <dds-content-block-heading>Morbi consectetur vulputate faucibus. Proin.</dds-content-block-heading>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-cds--s--offset-lg-4">
+          <cds-content-block-card-static>
+            <cds-content-block-heading>Morbi consectetur vulputate faucibus. Proin.</cds-content-block-heading>
 
-            <dds-card-group grid-mode="border">
-              <dds-card-group-item>
-                <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+            <cds-card-group grid-mode="border">
+              <cds-card-group-item>
+                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </dds-card-group-item>
+              </cds-card-group-item>
 
-              <dds-card-group-item>
-                <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+              <cds-card-group-item>
+                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </dds-card-group-item>
+              </cds-card-group-item>
 
-              <dds-card-group-item>
-                <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+              <cds-card-group-item>
+                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </dds-card-group-item>
+              </cds-card-group-item>
 
-              <dds-card-group-item>
-                <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+              <cds-card-group-item>
+                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </dds-card-group-item>
+              </cds-card-group-item>
 
-              <dds-card-group-item>
-                <dds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</dds-card-heading>
+              <cds-card-group-item>
+                <cds-card-heading>Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                   Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-              </dds-card-group-item>
-            </dds-card-group>
+              </cds-card-group-item>
+            </cds-card-group>
 
-            <dds-content-item>
-              <dds-content-item-heading>Vivamus suscipit scelerisque arcu sed.</dds-content-item-heading>
-              <dds-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</dds-content-item-copy>
-            </dds-content-item>
+            <cds-content-item>
+              <cds-content-item-heading>Vivamus suscipit scelerisque arcu sed.</cds-content-item-heading>
+              <cds-content-item-copy>Donec convallis magna ut urna aliquam, cursus iaculis mi commodo. Donec ut quam tincidunt, pharetra urna eget, sollicitudin sem. Donec odio mauris, tristique non venenatis nec, egestas at odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque eu purus aliquet, vulputate massa sit amet, suscipit arcu. Pellentesque tincidunt faucibus lacinia. Aliquam consequat pretium ultrices. Curabitur non nunc ac ipsum porta tempus rhoncus ac metus.</cds-content-item-copy>
+            </cds-content-item>
 
-            <dds-button-group slot="footer">
-              <dds-button-group-item href="https://example.com">
+            <cds-button-group slot="footer">
+              <cds-button-group-item href="https://example.com">
                 Contact us
-              </dds-button-group-item>
-              <dds-button-group-item href="https://example.com">
+              </cds-button-group-item>
+              <cds-button-group-item href="https://example.com">
                 Free trial
-              </dds-button-group-item>
-            </dds-button-group>
-          </dds-content-block-card-static>
+              </cds-button-group-item>
+            </cds-button-group>
+          </cds-content-block-card-static>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html
index f568dabf6ac..a3e5ab99240 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-cards/cdn.html
@@ -12,29 +12,29 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-cards:not(:defined) {
+    cds-content-block-cards:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-cards.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
-      <dds-content-block-cards>
-        <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-        <dds-card-group>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+      <cds-content-block-cards>
+        <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
+        <cds-card-group>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -48,15 +48,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -70,15 +70,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -92,15 +92,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -114,15 +114,15 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-          <dds-card-group-item href="https://example.com">
-            <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+          <cds-card-group-item href="https://example.com">
+            <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
             </p>
-            <dds-card-cta-footer slot="footer">
+            <cds-card-cta-footer slot="footer">
               <svg
                 slot="icon"
                 focusable="false"
@@ -136,12 +136,12 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-group-item>
-        </dds-card-group>
-        <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
+            </cds-card-cta-footer>
+          </cds-card-group-item>
+        </cds-card-group>
+        <cds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
           <p>Lorem ipsum dolor sit ametttt</p>
-          <dds-card-cta-footer>
+          <cds-card-cta-footer>
             <svg
               slot="footer"
               focusable="false"
@@ -155,9 +155,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-cta>
-      </dds-content-block-cards>
+          </cds-card-cta-footer>
+        </cds-card-cta>
+      </cds-content-block-cards>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
index ad75fa703aa..39eafcf4ec2 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
@@ -14,26 +14,26 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-cards:not(:defined) {
+      cds-content-block-cards:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
-          <dds-content-block-cards>
-            <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-            <dds-card-group>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+          <cds-content-block-cards>
+            <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
+            <cds-card-group>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -47,15 +47,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -69,15 +69,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -91,15 +91,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -113,15 +113,15 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-              <dds-card-group-item href="https://example.com">
-                <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+              <cds-card-group-item href="https://example.com">
+                <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                   hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
                 </p>
-                <dds-card-cta-footer slot="footer">
+                <cds-card-cta-footer slot="footer">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -135,12 +135,12 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-group-item>
-            </dds-card-group>
-            <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
+                </cds-card-cta-footer>
+              </cds-card-group-item>
+            </cds-card-group>
+            <cds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
               <p>Lorem ipsum dolor sit ametttt</p>
-              <dds-card-cta-footer>
+              <cds-card-cta-footer>
                 <svg
                   slot="footer"
                   focusable="false"
@@ -154,9 +154,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-cta-footer>
-            </dds-card-cta>
-          </dds-content-block-cards>
+              </cds-card-cta-footer>
+            </cds-card-cta>
+          </cds-content-block-cards>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/.env.local b/packages/web-components/examples/codesandbox/components/content-block-headlines/.env.local
index 10b82d2f1e9..0b1c9c45eb9 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/.env.local
+++ b/packages/web-components/examples/codesandbox/components/content-block-headlines/.env.local
@@ -1 +1 @@
-DDS_CONTENT_BLOCK_HEADLINES=true
\ No newline at end of file
+C4D_CONTENT_BLOCK_HEADLINES=true
\ No newline at end of file
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html
index 270e5c855b1..db7af2aea23 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-headlines/cdn.html
@@ -12,73 +12,73 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-headlines:not(:defined) {
+    cds-content-block-headlines:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-headlines.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
-      <dds-content-block-headlines>
-        <dds-content-block-heading>Aliquam condimentum</dds-content-block-heading>
-        <dds-content-block-copy
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+      <cds-content-block-headlines>
+        <cds-content-block-heading>Aliquam condimentum</cds-content-block-heading>
+        <cds-content-block-copy
         >Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-          hendrerit.</dds-content-block-copy
+          hendrerit.</cds-content-block-copy
         >
-        <dds-content-block-headlines-item>
-          <dds-content-block-headlines-heading>25%</dds-content-block-headlines-heading>
-          <dds-content-item-copy slot="copy"
+        <cds-content-block-headlines-item>
+          <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
+          <cds-content-item-copy slot="copy"
           >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-            faster.</dds-content-item-copy
+            faster.</cds-content-item-copy
           >
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+          <cds-link-list slot="footer" type="vertical">
+            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
               Link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-block-headlines-item>
-        <dds-content-block-headlines-item>
-          <dds-content-block-headlines-heading>25%</dds-content-block-headlines-heading>
-          <dds-content-item-copy slot="copy"
+            </cds-link-list-item-cta>
+          </cds-link-list>
+        </cds-content-block-headlines-item>
+        <cds-content-block-headlines-item>
+          <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
+          <cds-content-item-copy slot="copy"
           >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-            faster.</dds-content-item-copy
+            faster.</cds-content-item-copy
           >
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+          <cds-link-list slot="footer" type="vertical">
+            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
               Link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-block-headlines-item>
-        <dds-content-block-headlines-item>
-          <dds-content-block-headlines-heading>1.34M</dds-content-block-headlines-heading>
-          <dds-content-item-copy slot="copy"
-          >Save 1.34M per year by optimizing your time and IT expenses.</dds-content-item-copy
+            </cds-link-list-item-cta>
+          </cds-link-list>
+        </cds-content-block-headlines-item>
+        <cds-content-block-headlines-item>
+          <cds-content-block-headlines-heading>1.34M</cds-content-block-headlines-heading>
+          <cds-content-item-copy slot="copy"
+          >Save 1.34M per year by optimizing your time and IT expenses.</cds-content-item-copy
           >
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+          <cds-link-list slot="footer" type="vertical">
+            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
               Link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-block-headlines-item>
-        <dds-content-block-headlines-item>
-          <dds-content-block-headlines-heading>25%</dds-content-block-headlines-heading>
-          <dds-content-item-copy slot="copy"
+            </cds-link-list-item-cta>
+          </cds-link-list>
+        </cds-content-block-headlines-item>
+        <cds-content-block-headlines-item>
+          <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
+          <cds-content-item-copy slot="copy"
           >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-            faster.</dds-content-item-copy
+            faster.</cds-content-item-copy
           >
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+          <cds-link-list slot="footer" type="vertical">
+            <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
               Link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-block-headlines-item>
-      </dds-content-block-headlines>
+            </cds-link-list-item-cta>
+          </cds-link-list>
+        </cds-content-block-headlines-item>
+      </cds-content-block-headlines>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
index c27dafc9087..c878cd66319 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
@@ -14,70 +14,70 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-headlines:not(:defined) {
+      cds-content-block-headlines:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4 bx--no-gutter">
-          <dds-content-block-headlines>
-            <dds-content-block-heading>Aliquam condimentum</dds-content-block-heading>
-            <dds-content-block-copy
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4 cds--no-gutter">
+          <cds-content-block-headlines>
+            <cds-content-block-heading>Aliquam condimentum</cds-content-block-heading>
+            <cds-content-block-copy
               >Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-              hendrerit.</dds-content-block-copy
+              hendrerit.</cds-content-block-copy
             >
-            <dds-content-block-headlines-item>
-              <dds-content-block-headlines-heading>25%</dds-content-block-headlines-heading>
-              <dds-content-item-copy slot="copy"
+            <cds-content-block-headlines-item>
+              <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
+              <cds-content-item-copy slot="copy"
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-                faster.</dds-content-item-copy
+                faster.</cds-content-item-copy
               >
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              <cds-link-list slot="footer" type="vertical">
+                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-block-headlines-item>
-            <dds-content-block-headlines-item>
-              <dds-content-block-headlines-heading>25%</dds-content-block-headlines-heading>
-              <dds-content-item-copy slot="copy"
+                </cds-link-list-item-cta>
+              </cds-link-list>
+            </cds-content-block-headlines-item>
+            <cds-content-block-headlines-item>
+              <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
+              <cds-content-item-copy slot="copy"
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-                faster.</dds-content-item-copy
+                faster.</cds-content-item-copy
               >
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              <cds-link-list slot="footer" type="vertical">
+                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-block-headlines-item>
-            <dds-content-block-headlines-item>
-              <dds-content-block-headlines-heading>1.34M</dds-content-block-headlines-heading>
-              <dds-content-item-copy slot="copy"
-                >Save 1.34M per year by optimizing your time and IT expenses.</dds-content-item-copy
+                </cds-link-list-item-cta>
+              </cds-link-list>
+            </cds-content-block-headlines-item>
+            <cds-content-block-headlines-item>
+              <cds-content-block-headlines-heading>1.34M</cds-content-block-headlines-heading>
+              <cds-content-item-copy slot="copy"
+                >Save 1.34M per year by optimizing your time and IT expenses.</cds-content-item-copy
               >
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              <cds-link-list slot="footer" type="vertical">
+                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-block-headlines-item>
-            <dds-content-block-headlines-item>
-              <dds-content-block-headlines-heading>25%</dds-content-block-headlines-heading>
-              <dds-content-item-copy slot="copy"
+                </cds-link-list-item-cta>
+              </cds-link-list>
+            </cds-content-block-headlines-item>
+            <cds-content-block-headlines-item>
+              <cds-content-block-headlines-heading>25%</cds-content-block-headlines-heading>
+              <cds-content-item-copy slot="copy"
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
-                faster.</dds-content-item-copy
+                faster.</cds-content-item-copy
               >
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              <cds-link-list slot="footer" type="vertical">
+                <cds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-block-headlines-item>
-          </dds-content-block-headlines>
+                </cds-link-list-item-cta>
+              </cds-link-list>
+            </cds-content-block-headlines-item>
+          </cds-content-block-headlines>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-media/cdn.html
index 1f649101043..a9f347ec148 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-media/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-media/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-media:not(:defined) {
+    cds-content-block-media:not(:defined) {
       display: none;
     }
   </style>
@@ -23,59 +23,59 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/image-with-caption.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-      <dds-content-block-media>
-        <dds-content-block-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+      <cds-content-block-media>
+        <cds-content-block-heading>
           Curabitur malesuada varius mi eu posuere
-        </dds-content-block-heading>
-        <dds-content-block-copy size="lg">
+        </cds-content-block-heading>
+        <cds-content-block-copy size="lg">
           Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin,
           sodales nulla quis, consequat libero.
-        </dds-content-block-copy>
-        <dds-content-block-media-content>
-          <dds-content-group-heading>
+        </cds-content-block-copy>
+        <cds-content-block-media-content>
+          <cds-content-group-heading>
             Lorem ipsum dolor sit amet
-          </dds-content-group-heading>
-          <dds-image-with-caption
+          </cds-content-group-heading>
+          <cds-image
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             heading="Lorem ipsum"
           >
-            <dds-image-item
+            <cds-image-item
               media="(min-width: 672px)"
               srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
-            </dds-image-item>
-            <dds-image-item
+            </cds-image-item>
+            <cds-image-item
               media="(min-width: 400px)"
               srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
-            </dds-image-item>
-            <dds-image-item
+            </cds-image-item>
+            <cds-image-item
               media="(min-width: 320px)"
               srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             >
-            </dds-image-item>
-          </dds-image-with-caption>
-          <dds-content-item>
-            <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-            <dds-content-item-copy>
+            </cds-image-item>
+          </cds-image>
+          <cds-content-item>
+            <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+            <cds-content-item-copy>
               Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque
               diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
               tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
               sapien.
-            </dds-content-item-copy>
-          </dds-content-item>
-          <dds-card-link-cta cta-type="local" slot="footer" href="https://example.com">
+            </cds-content-item-copy>
+          </cds-content-item>
+          <cds-card-link-cta cta-type="local" slot="footer" href="https://example.com">
             <p>Lorem ipsum dolor sit amet</p>
-            <dds-card-cta-footer></dds-card-cta-footer>
-          </dds-card-link-cta>
-        </dds-content-block-media-content>
-      </dds-content-block-media>
+            <cds-card-cta-footer></cds-card-cta-footer>
+          </cds-card-link-cta>
+        </cds-content-block-media-content>
+      </cds-content-block-media>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-media/index.html b/packages/web-components/examples/codesandbox/components/content-block-media/index.html
index 94f0d205d25..f80922ed372 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-media/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-media/index.html
@@ -15,65 +15,65 @@
     <script src="src/index.js"></script>
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-media:not(:defined) {
+      cds-content-block-media:not(:defined) {
         display: none;
       }
     </style>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <dds-content-block-media>
-            <dds-content-block-heading>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+          <cds-content-block-media>
+            <cds-content-block-heading>
               Curabitur malesuada varius mi eu posuere
-            </dds-content-block-heading>
-            <dds-content-block-copy size="lg">
+            </cds-content-block-heading>
+            <cds-content-block-copy size="lg">
               Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin,
               sodales nulla quis, consequat libero.
-            </dds-content-block-copy>
-            <dds-content-block-media-content>
-              <dds-content-group-heading>
+            </cds-content-block-copy>
+            <cds-content-block-media-content>
+              <cds-content-group-heading>
                 Lorem ipsum dolor sit amet
-              </dds-content-group-heading>
-              <dds-image-with-caption
+              </cds-content-group-heading>
+              <cds-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 heading="Lorem ipsum"
               >
-                <dds-image-item
+                <cds-image-item
                   media="(min-width: 672px)"
                   srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
-                </dds-image-item>
-                <dds-image-item
+                </cds-image-item>
+                <cds-image-item
                   media="(min-width: 400px)"
                   srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
-                </dds-image-item>
-                <dds-image-item
+                </cds-image-item>
+                <cds-image-item
                   media="(min-width: 320px)"
                   srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 >
-                </dds-image-item>
-              </dds-image-with-caption>
-              <dds-content-item>
-                <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-                <dds-content-item-copy>
+                </cds-image-item>
+              </cds-image>
+              <cds-content-item>
+                <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+                <cds-content-item-copy>
                   Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque
                   diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
                   tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
                   sapien.
-                </dds-content-item-copy>
-              </dds-content-item>
-              <dds-card-link-cta cta-type="local" slot="footer" href="https://example.com">
-                <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-                <dds-card-cta-footer></dds-card-cta-footer>
-              </dds-card-link-cta>
-            </dds-content-block-media-content>
-          </dds-content-block-media>
+                </cds-content-item-copy>
+              </cds-content-item>
+              <cds-card-link-cta cta-type="local" slot="footer" href="https://example.com">
+                <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+                <cds-card-cta-footer></cds-card-cta-footer>
+              </cds-card-link-cta>
+            </cds-content-block-media-content>
+          </cds-content-block-media>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html
index 87782c4c7f7..3cf718e1e86 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-mixed/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-mixed:not(:defined) {
+    cds-content-block-mixed:not(:defined) {
       display: none;
     }
   </style>
@@ -25,27 +25,27 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-simple.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-      <dds-content-block-mixed>
-        <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-        <dds-content-block-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+      <cds-content-block-mixed>
+        <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
+        <cds-content-block-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </dds-content-block-copy>
+        </cds-content-block-copy>
 
-        <dds-content-group-cards>
-          <dds-content-group-heading>Lorem ipsum dolor sit amet</dds-content-group-heading>
-          <dds-content-group-cards-item href="www.ibm.com">
-            <dds-card-heading>
+        <cds-content-group-cards>
+          <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
+          <cds-content-group-cards-item href="www.ibm.com">
+            <cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-            </dds-card-heading>
+            </cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua.
             </p>
-            <dds-card-footer icon-placement="left">
+            <cds-card-footer icon-placement="left">
               <svg
                 slot="icon"
                 focusable="false"
@@ -59,17 +59,17 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-content-group-cards-item>
-          <dds-content-group-cards-item href="www.ibm.com">
-            <dds-card-heading>
+            </cds-card-footer>
+          </cds-content-group-cards-item>
+          <cds-content-group-cards-item href="www.ibm.com">
+            <cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-            </dds-card-heading>
+            </cds-card-heading>
             <p>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
               magna aliqua.
             </p>
-            <dds-card-footer icon-placement="left">
+            <cds-card-footer icon-placement="left">
               <svg
                 slot="icon"
                 focusable="false"
@@ -83,32 +83,32 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-footer>
-          </dds-content-group-cards-item>
-        </dds-content-group-cards>
+            </cds-card-footer>
+          </cds-content-group-cards-item>
+        </cds-content-group-cards>
 
-        <dds-content-group-pictograms>
-          <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-          <dds-content-block-copy size="sm"
+        <cds-content-group-pictograms>
+          <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+          <cds-content-block-copy size="sm"
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
             consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-            sollicitudin, sodales nulla quis, consequat libero.</dds-content-block-copy
+            sollicitudin, sodales nulla quis, consequat libero.</cds-content-block-copy
           >
-          <dds-pictogram-item>
+          <cds-pictogram-item>
             <svg
               slot="pictogram"
               focusable="false"
               preserveAspectRatio="xMidYMid meet"
               xmlns="http://www.w3.org/2000/svg"
               stroke="currentColor"
-              data-autoid="dds--pictogram-item__pictogram"
+              data-autoid="cds--pictogram-item__pictogram"
               aria-label="Pictogram description"
               width="48"
               height="48"
               viewBox="0 0 48 48"
               role="img"
-              class="bx--pictogram-item__pictogram"
+              class="cds--pictogram-item__pictogram"
             >
               <path
                 fill="none"
@@ -119,12 +119,12 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
               ></path>
             </svg>
-            <dds-content-item-heading>Aliquam condimentum interdum</dds-content-item-heading>
-            <dds-content-item-copy
+            <cds-content-item-heading>Aliquam condimentum interdum</cds-content-item-heading>
+            <cds-content-item-copy
             >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-              magna.</dds-content-item-copy
+              magna.</cds-content-item-copy
             >
-            <dds-link-with-icon href="https://www.ibm.com/" slot="footer">
+            <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
               Link text
               <svg
                 slot="icon"
@@ -138,43 +138,43 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-link-with-icon>
-          </dds-pictogram-item>
-        </dds-content-group-pictograms>
+            </cds-link-with-icon>
+          </cds-pictogram-item>
+        </cds-content-group-pictograms>
 
-        <dds-content-group-simple>
-          <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-          <dds-content-group-copy size="sm">
+        <cds-content-group-simple>
+          <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+          <cds-content-group-copy size="sm">
             Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
             hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
             consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
             sollicitudin, sodales nulla quis, consequat libero.
-          </dds-content-group-copy>
-          <dds-image
+          </cds-content-group-copy>
+          <cds-image
             slot="media"
             alt="Image alt text"
             default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
             heading="Curabitur malesuada varius mi eu posuere"
           >
-            <dds-image-item
+            <cds-image-item
               media="(min-width: 672px)"
               srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
             >
-            </dds-image-item>
-            <dds-image-item
+            </cds-image-item>
+            <cds-image-item
               media="(min-width: 400px)"
               srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
             >
-            </dds-image-item>
-            <dds-image-item
+            </cds-image-item>
+            <cds-image-item
               media="(min-width: 320px)"
               srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
             >
-            </dds-image-item>
-          </dds-image>
-          <dds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-            <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-            <dds-card-cta-footer>
+            </cds-image-item>
+          </cds-image>
+          <cds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+            <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+            <cds-card-cta-footer>
               <svg
                 slot="icon"
                 focusable="false"
@@ -187,10 +187,10 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-card-cta-footer>
-          </dds-card-link-cta>
-        </dds-content-group-simple>
-      </dds-content-block-mixed>
+            </cds-card-cta-footer>
+          </cds-card-link-cta>
+        </cds-content-group-simple>
+      </cds-content-block-mixed>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-mixed/index.html b/packages/web-components/examples/codesandbox/components/content-block-mixed/index.html
index 0055c6e96d2..3313ecc7ab6 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-mixed/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-mixed/index.html
@@ -15,33 +15,33 @@
     <script src="src/index.js"></script>
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-mixed:not(:defined) {
+      cds-content-block-mixed:not(:defined) {
         display: none;
       }
     </style>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <dds-content-block-mixed>
-            <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-            <dds-content-block-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+          <cds-content-block-mixed>
+            <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
+            <cds-content-block-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </dds-content-block-copy>
+            </cds-content-block-copy>
 
-            <dds-content-group-cards>
-              <dds-content-group-heading>Lorem ipsum dolor sit amet</dds-content-group-heading>
-              <dds-content-group-cards-item href="www.ibm.com">
-                <dds-card-heading>
+            <cds-content-group-cards>
+              <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
+              <cds-content-group-cards-item href="www.ibm.com">
+                <cds-card-heading>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                </dds-card-heading>
+                </cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                   magna aliqua.
                 </p>
-                <dds-card-footer icon-placement="left">
+                <cds-card-footer icon-placement="left">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -55,17 +55,17 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-footer>
-              </dds-content-group-cards-item>
-              <dds-content-group-cards-item href="www.ibm.com">
-                <dds-card-heading>
+                </cds-card-footer>
+              </cds-content-group-cards-item>
+              <cds-content-group-cards-item href="www.ibm.com">
+                <cds-card-heading>
                   Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-                </dds-card-heading>
+                </cds-card-heading>
                 <p>
                   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                   magna aliqua.
                 </p>
-                <dds-card-footer icon-placement="left">
+                <cds-card-footer icon-placement="left">
                   <svg
                     slot="icon"
                     focusable="false"
@@ -79,32 +79,32 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-footer>
-              </dds-content-group-cards-item>
-            </dds-content-group-cards>
+                </cds-card-footer>
+              </cds-content-group-cards-item>
+            </cds-content-group-cards>
 
-            <dds-content-group-pictograms>
-              <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-              <dds-content-block-copy size="sm"
+            <cds-content-group-pictograms>
+              <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+              <cds-content-block-copy size="sm"
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
                 consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-                sollicitudin, sodales nulla quis, consequat libero.</dds-content-block-copy
+                sollicitudin, sodales nulla quis, consequat libero.</cds-content-block-copy
               >
-              <dds-pictogram-item>
+              <cds-pictogram-item>
                 <svg
                   slot="pictogram"
                   focusable="false"
                   preserveAspectRatio="xMidYMid meet"
                   xmlns="http://www.w3.org/2000/svg"
                   stroke="currentColor"
-                  data-autoid="dds--pictogram-item__pictogram"
+                  data-autoid="cds--pictogram-item__pictogram"
                   aria-label="Pictogram description"
                   width="48"
                   height="48"
                   viewBox="0 0 48 48"
                   role="img"
-                  class="bx--pictogram-item__pictogram"
+                  class="cds--pictogram-item__pictogram"
                 >
                   <path
                     fill="none"
@@ -115,12 +115,12 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
                   ></path>
                 </svg>
-                <dds-content-item-heading>Aliquam condimentum interdum</dds-content-item-heading>
-                <dds-content-item-copy
+                <cds-content-item-heading>Aliquam condimentum interdum</cds-content-item-heading>
+                <cds-content-item-copy
                   >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-                  magna.</dds-content-item-copy
+                  magna.</cds-content-item-copy
                 >
-                <dds-link-with-icon href="https://www.ibm.com/" slot="footer">
+                <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
                   Link text
                   <svg
                     slot="icon"
@@ -134,43 +134,43 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-link-with-icon>
-              </dds-pictogram-item>
-            </dds-content-group-pictograms>
+                </cds-link-with-icon>
+              </cds-pictogram-item>
+            </cds-content-group-pictograms>
 
-            <dds-content-group-simple>
-              <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-              <dds-content-group-copy size="sm">
+            <cds-content-group-simple>
+              <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+              <cds-content-group-copy size="sm">
                 Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                 hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
                 consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
                 sollicitudin, sodales nulla quis, consequat libero.
-              </dds-content-group-copy>
-              <dds-image
+              </cds-content-group-copy>
+              <cds-image
                 slot="media"
                 alt="Image alt text"
                 default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
                 heading="Curabitur malesuada varius mi eu posuere"
               >
-                <dds-image-item
+                <cds-image-item
                   media="(min-width: 672px)"
                   srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
                 >
-                </dds-image-item>
-                <dds-image-item
+                </cds-image-item>
+                <cds-image-item
                   media="(min-width: 400px)"
                   srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
                 >
-                </dds-image-item>
-                <dds-image-item
+                </cds-image-item>
+                <cds-image-item
                   media="(min-width: 320px)"
                   srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
                 >
-                </dds-image-item>
-              </dds-image>
-              <dds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-                <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-                <dds-card-cta-footer>
+                </cds-image-item>
+              </cds-image>
+              <cds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+                <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+                <cds-card-cta-footer>
                   <svg
                     slot="icon"
                     focusable="false"
@@ -183,11 +183,11 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-card-cta-footer>
-              </dds-card-link-cta>
-              </dds-card-cta>
-            </dds-content-group-simple>
-          </dds-content-block-mixed>
+                </cds-card-cta-footer>
+              </cds-card-link-cta>
+              </cds-card-cta>
+            </cds-content-group-simple>
+          </cds-content-block-mixed>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html
index 42e00c73a2e..2bc4d73f202 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-segmented/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-segmented:not(:defined) {
+    cds-content-block-segmented:not(:defined) {
       display: none;
     }
   </style>
@@ -24,64 +24,64 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-      <dds-content-block-segmented>
-        <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-        <dds-content-block-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+      <cds-content-block-segmented>
+        <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
+        <cds-content-block-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </dds-content-block-copy>
-        <dds-image
+        </cds-content-block-copy>
+        <cds-image
           slot="media"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
           heading="Mauris iaculis eget dolor nec hendrerit."
         >
-        </dds-image>
-        <dds-content-block-segmented-item>
-          <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-          <dds-content-item-copy
+        </cds-image>
+        <cds-content-block-segmented-item>
+          <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
+          <cds-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
             ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
             quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
             sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</dds-content-item-copy
+            sapien.</cds-content-item-copy
           >
-          <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
+          <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+          >Lorem Ipsum dolor sit</cds-text-cta
           >
-        </dds-content-block-segmented-item>
-        <dds-content-block-segmented-item>
-          <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-          <dds-content-item-copy
+        </cds-content-block-segmented-item>
+        <cds-content-block-segmented-item>
+          <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
+          <cds-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
             ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
             quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
             sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</dds-content-item-copy
+            sapien.</cds-content-item-copy
           >
-          <dds-image
+          <cds-image
             slot="media"
             alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
             heading="Mauris iaculis eget dolor nec hendrerit."
           >
-          </dds-image>
-          <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
+          </cds-image>
+          <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+          >Lorem Ipsum dolor sit</cds-text-cta
           >
-        </dds-content-block-segmented-item>
-        <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
+        </cds-content-block-segmented-item>
+        <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
           Lorem ipsum dolor
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-cta>
-      </dds-content-block-segmented>
+          <cds-card-cta-footer></cds-card-cta-footer>
+        </cds-card-cta>
+      </cds-content-block-segmented>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html b/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
index 71658ab6007..10f3ca91800 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
@@ -14,71 +14,71 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-segmented:not(:defined) {
+      cds-content-block-segmented:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <dds-content-block-segmented>
-            <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-            <dds-content-block-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+          <cds-content-block-segmented>
+            <cds-content-block-heading>Lorem ipsum dolor sit amet</cds-content-block-heading>
+            <cds-content-block-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </dds-content-block-copy>
-            <dds-image
+            </cds-content-block-copy>
+            <cds-image
               slot="media"
               alt="Image alt text"
               default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               heading="Mauris iaculis eget dolor nec hendrerit."
             >
-            </dds-image>
-            <dds-content-block-segmented-item>
-              <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-              <dds-content-item-copy
+            </cds-image>
+            <cds-content-block-segmented-item>
+              <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
+              <cds-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
                 ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
                 quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
                 sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</dds-content-item-copy
+                sapien.</cds-content-item-copy
               >
-              <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-                >Lorem Ipsum dolor sit</dds-text-cta
+              <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+                >Lorem Ipsum dolor sit</cds-text-cta
               >
-            </dds-content-block-segmented-item>
-            <dds-content-block-segmented-item>
-              <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-              <dds-content-item-copy
+            </cds-content-block-segmented-item>
+            <cds-content-block-segmented-item>
+              <cds-content-group-heading>Lorem ipsum dolor sit amet.</cds-content-group-heading>
+              <cds-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem
                 ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
                 quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum
                 sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</dds-content-item-copy
+                sapien.</cds-content-item-copy
               >
-              <dds-image
+              <cds-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 heading="Mauris iaculis eget dolor nec hendrerit."
               >
-              </dds-image>
-              <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-                >Lorem Ipsum dolor sit</dds-text-cta
+              </cds-image>
+              <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
+                >Lorem Ipsum dolor sit</cds-text-cta
               >
-            </dds-content-block-segmented-item>
-            <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
+            </cds-content-block-segmented-item>
+            <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-card-cta>
-          </dds-content-block-segmented>
+              <cds-card-cta-footer></cds-card-cta-footer>
+            </cds-card-cta>
+          </cds-content-block-segmented>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html b/packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html
index a80f79b053e..50a41c80198 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-simple/cdn.html
@@ -12,41 +12,41 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block-simple:not(:defined) {
+    cds-content-block-simple:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-simple.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-      <dds-content-block-simple>
-        <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-        <dds-content-block-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+      <cds-content-block-simple>
+        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
+        <cds-content-block-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, *consequat* libero. Here are some common categories:
-        </dds-content-block-copy>
-        <dds-content-block-copy>
+        </cds-content-block-copy>
+        <cds-content-block-copy>
           Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris
           iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </dds-content-block-copy>
-        <dds-content-block-copy>
+        </cds-content-block-copy>
+        <cds-content-block-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
           hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        </dds-content-block-copy>
-        <dds-content-block-copy>
+        </cds-content-block-copy>
+        <cds-content-block-copy>
           - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-        </dds-content-block-copy>
-        <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
+        </cds-content-block-copy>
+        <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
           Lorem ipsum dolor
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-cta>
-      </dds-content-block-simple>
+          <cds-card-cta-footer></cds-card-cta-footer>
+        </cds-card-cta>
+      </cds-content-block-simple>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/index.html b/packages/web-components/examples/codesandbox/components/content-block-simple/index.html
index a048dfa2a2c..ae0313e9d1c 100644
--- a/packages/web-components/examples/codesandbox/components/content-block-simple/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block-simple/index.html
@@ -14,38 +14,38 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-block-simple:not(:defined) {
+      cds-content-block-simple:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <dds-content-block-simple>
-            <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-            <dds-content-block-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+          <cds-content-block-simple>
+            <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
+            <cds-content-block-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, *consequat* libero. Here are some common categories:
-            </dds-content-block-copy>
-            <dds-content-block-copy>
+            </cds-content-block-copy>
+            <cds-content-block-copy>
               Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit. Aenean et ultricies est. Mauris
               iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </dds-content-block-copy>
-            <dds-content-block-copy>
+            </cds-content-block-copy>
+            <cds-content-block-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
               hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </dds-content-block-copy>
-            <dds-content-block-copy>
+            </cds-content-block-copy>
+            <cds-content-block-copy>
               - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-            </dds-content-block-copy>
-            <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
+            </cds-content-block-copy>
+            <cds-card-cta slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-card-cta>
-          </dds-content-block-simple>
+              <cds-card-cta-footer></cds-card-cta-footer>
+            </cds-card-cta>
+          </cds-content-block-simple>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block/cdn.html b/packages/web-components/examples/codesandbox/components/content-block/cdn.html
index cfb84bf2a66..23b340572b6 100644
--- a/packages/web-components/examples/codesandbox/components/content-block/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-block/cdn.html
@@ -10,10 +10,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-block:not(:defined) {
+    cds-content-block:not(:defined) {
       display: none;
     }
   </style>
@@ -21,19 +21,19 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-link-cta.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-      <dds-content-block>
-        <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-        <dds-content-block-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+      <cds-content-block>
+        <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
+        <cds-content-block-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </dds-content-block-copy>
-        <dds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-          <dds-card-link-heading>cta copy</dds-card-link-heading>
-          <dds-card-cta-footer cta-type="local"></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-block>
+        </cds-content-block-copy>
+        <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
+          <cds-card-link-heading>cta copy</cds-card-link-heading>
+          <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
+        </cds-card-link-cta>
+      </cds-content-block>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-block/index.html b/packages/web-components/examples/codesandbox/components/content-block/index.html
index 5da6a3d9ad0..2636b917feb 100644
--- a/packages/web-components/examples/codesandbox/components/content-block/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-block/index.html
@@ -12,26 +12,26 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-content-group:not(:defined) {
+      cds-content-group:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <dds-content-block>
-            <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-            <dds-content-block-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+          <cds-content-block>
+            <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
+            <cds-content-block-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </dds-content-block-copy>
-            <dds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-              <dds-card-link-heading>cta copy</dds-card-link-heading>
-              <dds-card-cta-footer cta-type="local"></dds-card-cta-footer>
-            </dds-card-link-cta>
-          </dds-content-block>
+            </cds-content-block-copy>
+            <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
+              <cds-card-link-heading>cta copy</cds-card-link-heading>
+              <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
+            </cds-card-link-cta>
+          </cds-content-block>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/.gitignore b/packages/web-components/examples/codesandbox/components/content-group-banner/.gitignore
deleted file mode 100644
index 7d5b7a94f4d..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-banner/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/build
-/node_modules
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-banner/cdn.html
deleted file mode 100644
index 0757f55d92d..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-banner/cdn.html
+++ /dev/null
@@ -1,49 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
-  <style>
-    /* Suppress custom element until styles are loaded */
-    dds-content-group-banner:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-banner.min.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-      <dds-content-group-banner>
-        <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-        <dds-link-list type="vertical" slot="complementary">
-          <dds-link-list-item-cta
-            icon-placement="right"
-            href="https://www.ibm.com"
-            cta-type="local"
-          >
-            Link text
-          </dds-link-list-item-cta>
-          <dds-link-list-item-cta
-            icon-placement="right"
-            href="https://www.ibm.com"
-            cta-type="external"
-          >
-            External link text
-          </dds-link-list-item-cta>
-        </dds-link-list>
-      </dds-content-group-banner>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/index.html b/packages/web-components/examples/codesandbox/components/content-group-banner/index.html
deleted file mode 100644
index b66c2c99de4..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-banner/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <script src="src/index.js"></script>
-    <style type="text/css">
-      /* Suppress custom element until styles are loaded */
-      dds-content-group-banner:not(:defined) {
-        display: none;
-      }
-    </style>
-  </head>
-  <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          <dds-content-group-banner>
-            <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-            <dds-link-list type="vertical" slot="complementary">
-              <dds-link-list-item-cta
-                icon-placement="right"
-                href="https://www.ibm.com"
-                cta-type="local"
-              >
-                Link text
-              </dds-link-list-item-cta>
-              <dds-link-list-item-cta
-                icon-placement="right"
-                href="https://www.ibm.com"
-                cta-type="external"
-              >
-                External link text
-              </dds-link-list-item-cta>
-            </dds-link-list>
-          </dds-content-group-banner>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/package.json b/packages/web-components/examples/codesandbox/components/content-group-banner/package.json
deleted file mode 100644
index a8812425c51..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-banner/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-content-group-banner-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "carbon-components": "^10.36.0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2",
-    "sass": "^1.32.13"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-group-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/src/index.js b/packages/web-components/examples/codesandbox/components/content-group-banner/src/index.js
deleted file mode 100644
index be0367ebe7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-banner/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/content-group-banner/index.js';
-import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html
index 201b7dbaab2..ee131cbaa87 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-cards/cdn.html
@@ -10,31 +10,31 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-group-cards:not(:defined) {
+    cds-content-group-cards:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-cards.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-      <dds-content-group-cards>
-        <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-        <dds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dds-content-group-copy>
-        <dds-content-group-cards-item href="https://www.example.com">
-          <dds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+      <cds-content-group-cards>
+        <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+        <cds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cds-content-group-copy>
+        <cds-content-group-cards-item href="https://www.example.com">
+          <cds-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <cds-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -48,17 +48,17 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-        <dds-content-group-cards-item href="https://www.example.com">
-          <dds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+          </cds-card-footer>
+        </cds-content-group-cards-item>
+        <cds-content-group-cards-item href="https://www.example.com">
+          <cds-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <cds-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -72,17 +72,17 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-        <dds-content-group-cards-item href="https://www.example.com">
-          <dds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+          </cds-card-footer>
+        </cds-content-group-cards-item>
+        <cds-content-group-cards-item href="https://www.example.com">
+          <cds-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <cds-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -96,17 +96,17 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-        <dds-content-group-cards-item href="https://www.example.com">
-          <dds-card-heading
-          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+          </cds-card-footer>
+        </cds-content-group-cards-item>
+        <cds-content-group-cards-item href="https://www.example.com">
+          <cds-card-heading
+          >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
           >
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
             magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <cds-card-footer icon-placement="left">
             <svg
               slot="icon"
               focusable="false"
@@ -120,9 +120,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-      </dds-content-group-cards>
+          </cds-card-footer>
+        </cds-content-group-cards-item>
+      </cds-content-group-cards>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html b/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
index 74325135f58..156e682b647 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-cards/index.html
@@ -13,27 +13,27 @@
     <script src="src/index.js"></script>
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-content-group-cards:not(:defined) {
+      cds-content-group-cards:not(:defined) {
         display: none;
       }
     </style>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          <dds-content-group-cards>
-            <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-            <dds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dds-content-group-copy>
-            <dds-content-group-cards-item href="https://www.example.com">
-              <dds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+          <cds-content-group-cards>
+            <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+            <cds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</cds-content-group-copy>
+            <cds-content-group-cards-item href="https://www.example.com">
+              <cds-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <dds-card-footer icon-placement="left">
+              <cds-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -47,17 +47,17 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-content-group-cards-item>
-            <dds-content-group-cards-item href="https://www.example.com">
-              <dds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+              </cds-card-footer>
+            </cds-content-group-cards-item>
+            <cds-content-group-cards-item href="https://www.example.com">
+              <cds-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <dds-card-footer icon-placement="left">
+              <cds-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -71,17 +71,17 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-content-group-cards-item>
-            <dds-content-group-cards-item href="https://www.example.com">
-              <dds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+              </cds-card-footer>
+            </cds-content-group-cards-item>
+            <cds-content-group-cards-item href="https://www.example.com">
+              <cds-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <dds-card-footer icon-placement="left">
+              <cds-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -95,17 +95,17 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-content-group-cards-item>
-            <dds-content-group-cards-item href="https://www.example.com">
-              <dds-card-heading
-                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading
+              </cds-card-footer>
+            </cds-content-group-cards-item>
+            <cds-content-group-cards-item href="https://www.example.com">
+              <cds-card-heading
+                >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</cds-card-heading
               >
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
                 magna aliqua.
               </p>
-              <dds-card-footer icon-placement="left">
+              <cds-card-footer icon-placement="left">
                 <svg
                   slot="icon"
                   focusable="false"
@@ -119,9 +119,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-content-group-cards-item>
-          </dds-content-group-cards>
+              </cds-card-footer>
+            </cds-content-group-cards-item>
+          </cds-content-group-cards>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components/content-group-horizontal/.gitignore
deleted file mode 100644
index 7d5b7a94f4d..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/build
-/node_modules
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html
deleted file mode 100644
index 53d0bcb167d..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/cdn.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
-  <style>
-    /* Suppress custom element until styles are loaded */
-    dds-content-group-horizontal:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-horizontal.min.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-      <dds-content-group-horizontal>
-        <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-        <dds-content-item-horizontal>
-          <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-          <dds-content-item-heading slot="heading">Aliquam condimentum</dds-content-item-heading>
-          <dds-content-item-horizontal-copy
-          >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-            hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy
-          >
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-              Link text
-            </dds-link-list-item-cta>
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-              External link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-item-horizontal>
-      </dds-content-group-horizontal>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html
deleted file mode 100644
index 9740b3a297c..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html
+++ /dev/null
@@ -1,50 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <style>
-      /* Suppress custom element until styles are loaded */
-      dds-content-group-horizontal:not(:defined) {
-        display: none;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-  <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <dds-content-group-horizontal>
-            <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-            <dds-content-item-horizontal>
-              <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-              <dds-content-item-heading slot="heading">Aliquam condimentum</dds-content-item-heading>
-              <dds-content-item-horizontal-copy
-                >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-                hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy
-              >
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-                  Link text
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-                  External link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-item-horizontal>
-          </dds-content-group-horizontal>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/package.json b/packages/web-components/examples/codesandbox/components/content-group-horizontal/package.json
deleted file mode 100644
index ba8bee78130..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-content-group-horizontal-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "carbon-components": "^10.36.0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2",
-    "sass": "^1.32.13"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-group-horizontal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components/content-group-horizontal/src/index.js
deleted file mode 100644
index 45c08fa8602..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-group-horizontal/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/content-group-horizontal/index.js';
-import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html
index a779837b5cb..033dde306f3 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-pictograms/cdn.html
@@ -10,40 +10,40 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-group-pictograms:not(:defined) {
+    cds-content-group-pictograms:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-pictograms.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-      <dds-content-group-pictograms>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet</dds-content-group-heading>
-        <dds-content-group-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+      <cds-content-group-pictograms>
+        <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
+        <cds-content-group-copy>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nonporttitor libero, in venenatis magna. Lorem
           ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum
           dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </dds-content-group-copy>
-        <dds-pictogram-item>
+        </cds-content-group-copy>
+        <cds-pictogram-item>
           <svg
             slot="pictogram"
             focusable="false"
             preserveAspectRatio="xMidYMid meet"
             xmlns="http://www.w3.org/2000/svg"
             stroke="currentColor"
-            data-autoid="dds--pictogram-item__pictogram"
+            data-autoid="cds--pictogram-item__pictogram"
             aria-label="Pictogram description"
             width="48"
             height="48"
             viewBox="0 0 48 48"
             role="img"
-            class="bx--pictogram-item__pictogram"
+            class="cds--pictogram-item__pictogram"
           >
             <path
               fill="none"
@@ -54,13 +54,13 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
             ></path>
           </svg>
-          <dds-content-item-heading>
+          <cds-content-item-heading>
             Aliquam condimentum interdum
-          </dds-content-item-heading>
-          <dds-content-item-copy>
+          </cds-content-item-heading>
+          <cds-content-item-copy>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-          </dds-content-item-copy>
-          <dds-link-with-icon href="https://www.example.com" slot="footer">
+          </cds-content-item-copy>
+          <cds-link-with-icon href="https://www.example.com" slot="footer">
             Aliquam condimentum interdum
             <svg
               slot="icon"
@@ -75,9 +75,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-with-icon>
-        </dds-pictogram-item>
-      </dds-content-group-pictograms>
+          </cds-link-with-icon>
+        </cds-pictogram-item>
+      </cds-content-group-pictograms>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html b/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
index afdb0f01b7e..8330f4f3257 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
@@ -12,37 +12,37 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-content-group-pictograms:not(:defined) {
+      cds-content-group-pictograms:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <dds-content-group-pictograms>
-            <dds-content-group-heading>Lorem ipsum dolor sit amet</dds-content-group-heading>
-            <dds-content-group-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+          <cds-content-group-pictograms>
+            <cds-content-group-heading>Lorem ipsum dolor sit amet</cds-content-group-heading>
+            <cds-content-group-copy>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum nonporttitor libero, in venenatis magna. Lorem
               ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna. Lorem ipsum
               dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </dds-content-group-copy>
-            <dds-pictogram-item>
+            </cds-content-group-copy>
+            <cds-pictogram-item>
               <svg
                 slot="pictogram"
                 focusable="false"
                 preserveAspectRatio="xMidYMid meet"
                 xmlns="http://www.w3.org/2000/svg"
                 stroke="currentColor"
-                data-autoid="dds--pictogram-item__pictogram"
+                data-autoid="cds--pictogram-item__pictogram"
                 aria-label="Pictogram description"
                 width="48"
                 height="48"
                 viewBox="0 0 48 48"
                 role="img"
-                class="bx--pictogram-item__pictogram"
+                class="cds--pictogram-item__pictogram"
               >
                 <path
                   fill="none"
@@ -53,13 +53,13 @@
                   0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
                 ></path>
               </svg>
-              <dds-content-item-heading>
+              <cds-content-item-heading>
                 Aliquam condimentum interdum
-              </dds-content-item-heading>
-              <dds-content-item-copy>
+              </cds-content-item-heading>
+              <cds-content-item-copy>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-              </dds-content-item-copy>
-              <dds-link-with-icon href="https://www.example.com" slot="footer">
+              </cds-content-item-copy>
+              <cds-link-with-icon href="https://www.example.com" slot="footer">
                 Aliquam condimentum interdum
                 <svg
                   slot="icon"
@@ -74,9 +74,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-with-icon>
-            </dds-pictogram-item>
-          </dds-content-group-pictograms>
+              </cds-link-with-icon>
+            </cds-pictogram-item>
+          </cds-content-group-pictograms>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html b/packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html
index b8f6b500baf..25d328185a7 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-simple/cdn.html
@@ -10,54 +10,54 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-group-simple:not(:defined) {
+    cds-content-group-simple:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-simple.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-      <dds-content-group-simple>
-        <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-        <dds-content-group-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+      <cds-content-group-simple>
+        <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+        <cds-content-group-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </dds-content-group-copy>
-        <dds-content-item>
-          <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-          <dds-content-item-copy
+        </cds-content-group-copy>
+        <cds-content-item>
+          <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+          <cds-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</dds-content-item-copy
+            sapien.</cds-content-item-copy
           >
-        </dds-content-item>
-        <dds-content-item>
-          <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-          <dds-content-item-copy
+        </cds-content-item>
+        <cds-content-item>
+          <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+          <cds-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</dds-content-item-copy
+            sapien.</cds-content-item-copy
           >
-          <dds-content-item-copy
+          <cds-content-item-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
             In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
             bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-            sapien.</dds-content-item-copy
+            sapien.</cds-content-item-copy
           >
-          <dds-content-item-copy>
+          <cds-content-item-copy>
             - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-          </dds-content-item-copy>
-        </dds-content-item>
-        <dds-card-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+          </cds-content-item-copy>
+        </cds-content-item>
+        <cds-card-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
           Lorem ipsum dolor sit amet
-          <dds-card-cta-footer>
+          <cds-card-cta-footer>
             <svg
               slot="icon"
               focusable="false"
@@ -71,9 +71,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-card-cta-footer>
-        </dds-card-cta>
-      </dds-content-group-simple>
+          </cds-card-cta-footer>
+        </cds-card-cta>
+      </cds-content-group-simple>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group-simple/index.html b/packages/web-components/examples/codesandbox/components/content-group-simple/index.html
index 1f93cafd9c2..e013bc7634a 100644
--- a/packages/web-components/examples/codesandbox/components/content-group-simple/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-group-simple/index.html
@@ -12,51 +12,51 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-content-group-simple:not(:defined) {
+      cds-content-group-simple:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <dds-content-group-simple>
-            <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-            <dds-content-group-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+          <cds-content-group-simple>
+            <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+            <cds-content-group-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </dds-content-group-copy>
-            <dds-content-item>
-              <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-              <dds-content-item-copy
+            </cds-content-group-copy>
+            <cds-content-item>
+              <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+              <cds-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</dds-content-item-copy
+                sapien.</cds-content-item-copy
               >
-            </dds-content-item>
-            <dds-content-item>
-              <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-              <dds-content-item-copy
+            </cds-content-item>
+            <cds-content-item>
+              <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+              <cds-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</dds-content-item-copy
+                sapien.</cds-content-item-copy
               >
-              <dds-content-item-copy
+              <cds-content-item-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam.
                 In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt
                 bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim
-                sapien.</dds-content-item-copy
+                sapien.</cds-content-item-copy
               >
-              <dds-content-item-copy>
+              <cds-content-item-copy>
                 - [list item](https://www.ibm.com) - list item 1a 1. list item 2 1. list item 2a
-              </dds-content-item-copy>
-            </dds-content-item>
-            <dds-card-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+              </cds-content-item-copy>
+            </cds-content-item>
+            <cds-card-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
               Lorem ipsum dolor sit amet
-              <dds-card-cta-footer>
+              <cds-card-cta-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -70,9 +70,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-cta-footer>
-            </dds-card-cta>
-          </dds-content-group-simple>
+              </cds-card-cta-footer>
+            </cds-card-cta>
+          </cds-content-group-simple>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group/cdn.html b/packages/web-components/examples/codesandbox/components/content-group/cdn.html
index 81102b3755e..15530222768 100644
--- a/packages/web-components/examples/codesandbox/components/content-group/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-group/cdn.html
@@ -10,29 +10,29 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-group:not(:defined) {
+    cds-content-group:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-      <dds-content-group>
-        <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-        <dds-content-group-copy>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+      <cds-content-group>
+        <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+        <cds-content-group-copy>
           Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-        </dds-content-group-copy>
-        <dds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-          <dds-card-link-heading>cta copy</dds-card-link-heading>
-          <dds-card-cta-footer cta-type="local"></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-group>
+        </cds-content-group-copy>
+        <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
+          <cds-card-link-heading>cta copy</cds-card-link-heading>
+          <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
+        </cds-card-link-cta>
+      </cds-content-group>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-group/index.html b/packages/web-components/examples/codesandbox/components/content-group/index.html
index 67609c98b29..9508568544e 100644
--- a/packages/web-components/examples/codesandbox/components/content-group/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-group/index.html
@@ -12,26 +12,26 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-content-group:not(:defined) {
+      cds-content-group:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <dds-content-group>
-            <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-            <dds-content-group-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+          <cds-content-group>
+            <cds-content-group-heading>Curabitur malesuada varius mi eu posuere</cds-content-group-heading>
+            <cds-content-group-copy>
               Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </dds-content-group-copy>
-            <dds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-              <dds-card-link-heading>cta copy</dds-card-link-heading>
-              <dds-card-cta-footer cta-type="local"></dds-card-cta-footer>
-            </dds-card-link-cta>
-          </dds-content-group>
+            </cds-content-group-copy>
+            <cds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
+              <cds-card-link-heading>cta copy</cds-card-link-heading>
+              <cds-card-cta-footer cta-type="local"></cds-card-cta-footer>
+            </cds-card-link-cta>
+          </cds-content-group>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore b/packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore
deleted file mode 100644
index 7d5b7a94f4d..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.gitignore
+++ /dev/null
@@ -1,2 +0,0 @@
-/build
-/node_modules
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc b/packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc
deleted file mode 100644
index e3e73a6014b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/.sassrc
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "includePaths": ["node_modules", "../../node_modules"],
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html b/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html
deleted file mode 100644
index 24487ee1b17..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/cdn.html
+++ /dev/null
@@ -1,76 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
-  <style>
-    /* Suppress custom element until styles are loaded */
-    dds-content-item-horizontal:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-horizontal.min.js"></script>
-</head>
-<body>
-<div id="app">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-        <dds-content-item-horizontal>
-          <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-          <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-          <dds-content-item-horizontal-copy>
-            <dds-content-item-paragraph
-            >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
-              dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-paragraph
-            >
-          </dds-content-item-horizontal-copy>
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-              Link text
-            </dds-link-list-item-cta>
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-              External link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-item-horizontal>
-      </div>
-    </div>
-    <div class="bx--row">
-      <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-        <dds-content-item-horizontal-media-featured>
-          <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-          <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-          <dds-content-item-horizontal-copy>
-            <dds-content-item-paragraph>
-              Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-            </dds-content-item-paragraph>
-          </dds-content-item-horizontal-copy>
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-              Link text
-            </dds-link-list-item-cta>
-            <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-              External link text
-            </dds-link-list-item-cta>
-          </dds-link-list>
-          <dds-image
-            slot="media"
-            alt="image alt text"
-            default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-          </dds-image>
-        </dds-content-item-horizontal-media-featured>
-      </div>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
deleted file mode 100644
index 9a757d52362..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
+++ /dev/null
@@ -1,75 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <style>
-      /* Suppress custom element until styles are loaded */
-      dds-content-item-horizontal:not(:defined) {
-        display: none;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-  <body>
-    <div id="app">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-            <dds-content-item-horizontal>
-              <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-              <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-              <dds-content-item-horizontal-copy>
-                <dds-content-item-paragraph
-                  >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
-                  dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-paragraph
-                >
-              </dds-content-item-horizontal-copy>
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-                  Link text
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-                  External link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-item-horizontal>
-          </div>
-        </div>
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-            <dds-content-item-horizontal-media-featured>
-              <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-              <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-              <dds-content-item-horizontal-copy>
-                <dds-content-item-paragraph>
-                  Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-                </dds-content-item-paragraph>
-              </dds-content-item-horizontal-copy>
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-                  Link text
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-                  External link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-              <dds-image
-                slot="media"
-                alt="image alt text"
-                default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-              </dds-image>
-            </dds-content-item-horizontal-media-featured>
-          </div>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json b/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json
deleted file mode 100644
index 2fe46f91812..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-content-item-horizontal-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "carbon-components": "^10.36.0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2",
-    "sass": "^1.32.13"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js b/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js
deleted file mode 100644
index cba9c470fd0..00000000000
--- a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
-import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc b/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-group/.gitignore b/packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tag-group/.gitignore
rename to packages/web-components/examples/codesandbox/components/content-item-row/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/.sassrc b/packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-banner/.sassrc
rename to packages/web-components/examples/codesandbox/components/content-item-row/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
new file mode 100644
index 00000000000..7d8b099ea65
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/cdn.html
@@ -0,0 +1,76 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    c4d-content-item-row:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-row.min.js"></script>
+</head>
+<body>
+<div id="app">
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+        <c4d-content-item-row>
+          <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+          <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+          <c4d-content-item-row-copy>
+            <c4d-content-item-paragraph
+            >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              dolor nec hendrerit. Phasellus at elit sollicitudin.</c4d-content-item-paragraph
+            >
+          </c4d-content-item-row-copy>
+          <c4d-link-list slot="footer" type="vertical">
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              Link text
+            </c4d-link-list-item-cta>
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+              External link text
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+        </c4d-content-item-row>
+      </div>
+    </div>
+    <div class="cds--row">
+      <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+        <c4d-content-item-row-media-featured>
+          <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+          <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+          <c4d-content-item-row-copy>
+            <c4d-content-item-paragraph>
+              Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
+            </c4d-content-item-paragraph>
+          </c4d-content-item-row-copy>
+          <c4d-link-list slot="footer" type="vertical">
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              Link text
+            </c4d-link-list-item-cta>
+            <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+              External link text
+            </c4d-link-list-item-cta>
+          </c4d-link-list>
+          <c4d-image
+            slot="media"
+            alt="image alt text"
+            default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
+          </c4d-image>
+        </c4d-content-item-row-media-featured>
+      </div>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/index.html b/packages/web-components/examples/codesandbox/components/content-item-row/index.html
new file mode 100644
index 00000000000..80ae8630bdf
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/index.html
@@ -0,0 +1,77 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+
+    <style>
+      /* Suppress custom element until styles are loaded */
+      c4d-content-item-row:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script src="src/index.js"></script>
+  </head>
+  <body>
+    <div id="app">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+            <c4d-content-item-row>
+              <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-copy>
+                <c4d-content-item-paragraph
+                  >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  dolor nec hendrerit. Phasellus at elit sollicitudin.</c4d-content-item-paragraph
+                >
+              </c4d-content-item-row-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  Link text
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                  External link text
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row>
+          </div>
+        </div>
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+            <c4d-content-item-row-media-featured>
+              <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-copy>
+                <c4d-content-item-paragraph>
+                  Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
+                </c4d-content-item-paragraph>
+              </c4d-content-item-row-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  Link text
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                  External link text
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+              <c4d-image
+                slot="media"
+                alt="image alt text"
+                default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
+              </c4d-image>
+            </c4d-content-item-row-media-featured>
+          </div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/package.json b/packages/web-components/examples/codesandbox/components/content-item-row/package.json
new file mode 100644
index 00000000000..2b8d3dc18a8
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ibmdotcom-web-components-content-item-row-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build *.html --no-minify --public-url ./"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
+    "sass": "^1.32.13"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/ContentBlock/sandbox.config.json b/packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/ContentBlock/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/content-item-row/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
new file mode 100644
index 00000000000..a7ed26d4367
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.js
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * 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 '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
+import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-group-banner/src/index.scss b/packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-banner/src/index.scss
rename to packages/web-components/examples/codesandbox/components/content-item-row/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/content-item/cdn.html b/packages/web-components/examples/codesandbox/components/content-item/cdn.html
index 0d62d446618..04bd5c02a77 100644
--- a/packages/web-components/examples/codesandbox/components/content-item/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-item/cdn.html
@@ -10,10 +10,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-item-horizontal:not(:defined) {
+    c4d-content-item:not(:defined) {
       display: none;
     }
   </style>
@@ -21,14 +21,16 @@
 </head>
 <body>
 <div id="app">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-        <dds-content-item>
-          <dds-content-item-heading>Heading</dds-content-item-heading>
-          <dds-content-item-copy>Copy</dds-content-item-copy>
-          <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">CTA text</dds-text-cta>
-        </dds-content-item>
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-lg-8 cds--col-sm-4">
+        <c4d-content-item>
+          <c4d-content-item-heading>Heading</c4d-content-item-heading>
+          <c4d-content-item-copy>Copy</c4d-content-item-copy>
+          <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+            CTA text</c4d-link-with-icon
+          >
+        </c4d-content-item>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-item/index.html b/packages/web-components/examples/codesandbox/components/content-item/index.html
index 9c6a8a5630b..add51d0307f 100644
--- a/packages/web-components/examples/codesandbox/components/content-item/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-item/index.html
@@ -10,9 +10,10 @@
     <title>@carbon/ibmdotcom-web-components example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-content-item:not(:defined) {
+      c4d-content-item:not(:defined) {
         display: none;
       }
     </style>
@@ -20,14 +21,16 @@
   </head>
   <body>
     <div id="app">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-            <dds-content-item>
-              <dds-content-item-heading>Heading</dds-content-item-heading>
-              <dds-content-item-copy>Copy</dds-content-item-copy>
-              <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com"> CTA text</dds-text-cta>
-            </dds-content-item>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-8 cds--col-sm-4">
+            <c4d-content-item>
+              <c4d-content-item-heading>Heading</c4d-content-item-heading>
+              <c4d-content-item-copy>Copy</c4d-content-item-copy>
+              <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+                CTA text</c4d-link-with-icon
+              >
+            </c4d-content-item>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-section/cdn.html b/packages/web-components/examples/codesandbox/components/content-section/cdn.html
index 39b4e78c874..259ab3201c7 100644
--- a/packages/web-components/examples/codesandbox/components/content-section/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/content-section/cdn.html
@@ -10,10 +10,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-content-section:not(:defined) {
+    cds-content-section:not(:defined) {
       display: none;
     }
   </style>
@@ -22,14 +22,14 @@
 </head>
 <body>
 <div id="app">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-        <dds-content-section>
-          <dds-content-section-heading>Content section heading</dds-content-section-heading>
-          <dds-content-section-copy>Copy text</dds-content-section-copy>
-          <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</dds-text-cta>
-        </dds-content-section>
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+        <cds-content-section>
+          <cds-content-section-heading>Content section heading</cds-content-section-heading>
+          <cds-content-section-copy>Copy text</cds-content-section-copy>
+          <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</cds-text-cta>
+        </cds-content-section>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/content-section/index.html b/packages/web-components/examples/codesandbox/components/content-section/index.html
index ca2dc9efa0c..4502764b3aa 100644
--- a/packages/web-components/examples/codesandbox/components/content-section/index.html
+++ b/packages/web-components/examples/codesandbox/components/content-section/index.html
@@ -10,9 +10,10 @@
     <title>@carbon/ibmdotcom-web-components example</title>
     <meta charset="UTF-8" />
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-content-section:not(:defined) {
+      cds-content-section:not(:defined) {
         display: none;
       }
     </style>
@@ -20,14 +21,14 @@
   </head>
   <body>
     <div id="app">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-            <dds-content-section>
-              <dds-content-section-heading>Content section heading</dds-content-section-heading>
-              <dds-content-section-copy>Copy text</dds-content-section-copy>
-              <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</dds-text-cta>
-            </dds-content-section>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+            <cds-content-section>
+              <cds-content-section-heading>Content section heading</cds-content-section-heading>
+              <cds-content-section-copy>Copy text</cds-content-section-copy>
+              <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">Link action</cds-text-cta>
+            </cds-content-section>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/cdn.html b/packages/web-components/examples/codesandbox/components/cta-block/cdn.html
index 9f8c86b2b96..27ff5e373c1 100644
--- a/packages/web-components/examples/codesandbox/components/cta-block/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-block/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-cta-block:not(:defined) {
+    cds-cta-block:not(:defined) {
       display: none;
     }
   </style>
@@ -23,53 +23,53 @@
 </head>
 
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-      <dds-cta-block no-border>
-        <dds-content-block-heading>Take the next step</dds-content-block-heading>
-        <dds-content-block-copy
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+      <cds-cta-block no-border>
+        <cds-content-block-heading>Take the next step</cds-content-block-heading>
+        <cds-content-block-copy
         >Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your
-          needs.</dds-content-block-copy
+          needs.</cds-content-block-copy
         >
 
-        <dds-button-group slot="action" style="--dds-button-group--item-count:2">
-          <dds-button-group-item kind="tertiary" href="https://example.com">
+        <cds-button-group slot="action" style="--cds-button-group--item-count:2">
+          <cds-button-group-item kind="tertiary" href="https://example.com">
             Secondary Button
-          </dds-button-group-item>
-          <dds-button-group-item kind="primary" ref="https://example.com">
+          </cds-button-group-item>
+          <cds-button-group-item kind="primary" ref="https://example.com">
             Primary button
-          </dds-button-group-item>
-        </dds-button-group>
+          </cds-button-group-item>
+        </cds-button-group>
 
-        <dds-cta-block-item-row>
-          <dds-cta-block-item>
-            <dds-content-item-heading>Get connected</dds-content-item-heading>
-            <dds-content-item-copy
+        <cds-cta-block-item-row>
+          <cds-cta-block-item>
+            <cds-content-item-heading>Get connected</cds-content-item-heading>
+            <cds-content-item-copy
             >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
-            </dds-content-item-copy>
-            <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+            </cds-content-item-copy>
+            <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
             >Find a partner
-            </dds-text-cta>
-          </dds-cta-block-item>
+            </cds-text-cta>
+          </cds-cta-block-item>
 
-          <dds-cta-block-item>
-            <dds-content-item-heading>Learn how</dds-content-item-heading>
-            <dds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</dds-content-item-copy>
-            <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+          <cds-cta-block-item>
+            <cds-content-item-heading>Learn how</cds-content-item-heading>
+            <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
+            <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
             >Browse tutorials
-            </dds-text-cta>
-          </dds-cta-block-item>
+            </cds-text-cta>
+          </cds-cta-block-item>
 
-          <dds-cta-block-item>
-            <dds-content-item-heading>Learn how</dds-content-item-heading>
-            <dds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</dds-content-item-copy>
-            <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+          <cds-cta-block-item>
+            <cds-content-item-heading>Learn how</cds-content-item-heading>
+            <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
+            <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
             >Browse tutorials
-            </dds-text-cta>
-          </dds-cta-block-item>
-        </dds-cta-block-item-row>
-      </dds-cta-block>
+            </cds-text-cta>
+          </cds-cta-block-item>
+        </cds-cta-block-item-row>
+      </cds-cta-block>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-block/index.html b/packages/web-components/examples/codesandbox/components/cta-block/index.html
index b2be8089ba3..646f898fcd5 100644
--- a/packages/web-components/examples/codesandbox/components/cta-block/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-block/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-cta-block:not(:defined) {
+      cds-cta-block:not(:defined) {
         display: none;
       }
     </style>
@@ -22,53 +22,53 @@
   </head>
 
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-          <dds-cta-block no-border>
-            <dds-content-block-heading>Take the next step</dds-content-block-heading>
-            <dds-content-block-copy
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+          <cds-cta-block no-border>
+            <cds-content-block-heading>Take the next step</cds-content-block-heading>
+            <cds-content-block-copy
               >Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your
-              needs.</dds-content-block-copy
+              needs.</cds-content-block-copy
             >
 
-            <dds-button-group slot="action" style="--dds-button-group--item-count:2">
-              <dds-button-group-item kind="tertiary" href="https://example.com">
+            <cds-button-group slot="action" style="--cds-button-group--item-count:2">
+              <cds-button-group-item kind="tertiary" href="https://example.com">
                 Secondary Button
-              </dds-button-group-item>
-              <dds-button-group-item kind="primary" ref="https://example.com">
+              </cds-button-group-item>
+              <cds-button-group-item kind="primary" ref="https://example.com">
                 Primary button
-              </dds-button-group-item>
-            </dds-button-group>
+              </cds-button-group-item>
+            </cds-button-group>
 
-            <dds-cta-block-item-row>
-              <dds-cta-block-item>
-                <dds-content-item-heading>Get connected</dds-content-item-heading>
-                <dds-content-item-copy
+            <cds-cta-block-item-row>
+              <cds-cta-block-item>
+                <cds-content-item-heading>Get connected</cds-content-item-heading>
+                <cds-content-item-copy
                   >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
-                </dds-content-item-copy>
-                <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+                </cds-content-item-copy>
+                <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
                   >Find a partner
-                </dds-text-cta>
-              </dds-cta-block-item>
+                </cds-text-cta>
+              </cds-cta-block-item>
 
-              <dds-cta-block-item>
-                <dds-content-item-heading>Learn how</dds-content-item-heading>
-                <dds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</dds-content-item-copy>
-                <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+              <cds-cta-block-item>
+                <cds-content-item-heading>Learn how</cds-content-item-heading>
+                <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
+                <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
                   >Browse tutorials
-                </dds-text-cta>
-              </dds-cta-block-item>
+                </cds-text-cta>
+              </cds-cta-block-item>
 
-              <dds-cta-block-item>
-                <dds-content-item-heading>Learn how</dds-content-item-heading>
-                <dds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</dds-content-item-copy>
-                <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
+              <cds-cta-block-item>
+                <cds-content-item-heading>Learn how</cds-content-item-heading>
+                <cds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</cds-content-item-copy>
+                <cds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com"
                   >Browse tutorials
-                </dds-text-cta>
-              </dds-cta-block-item>
-            </dds-cta-block-item-row>
-          </dds-cta-block>
+                </cds-text-cta>
+              </cds-cta-block-item>
+            </cds-cta-block-item-row>
+          </cds-cta-block>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/cdn.html b/packages/web-components/examples/codesandbox/components/cta-button/cdn.html
index 5aa85dba7b0..9896916d825 100644
--- a/packages/web-components/examples/codesandbox/components/cta-button/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-button/cdn.html
@@ -15,13 +15,10 @@
       rel="stylesheet"
       href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
     />
-    <link
-      rel="stylesheet"
-      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"
-    />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-button-cta:not(:defined) {
+      cds-button-cta:not(:defined) {
         display: none;
       }
     </style>
@@ -31,16 +28,16 @@
     ></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12">
-          <dds-button-cta
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <cds-button-cta
             cta-type="local"
             kind="tertiary"
             href="https://www.example.com"
           >
             Button CTA Copy
-          </dds-button-cta>
+          </cds-button-cta>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html b/packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html
index afb19cdf123..25e6decfda5 100644
--- a/packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html
+++ b/packages/web-components/examples/codesandbox/components/cta-button/contact-methods.html
@@ -15,27 +15,24 @@
       rel="stylesheet"
       href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
     />
-    <link
-      rel="stylesheet"
-      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"
-    />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <script src="https://www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-button-cta:not(:defined) {
+      cds-button-cta:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12">
-          <dds-button-cta cta-type="call">Call</dds-button-cta>
-          <dds-button-cta cta-type="email">Email</dds-button-cta>
-          <dds-button-cta cta-type="chat">Chat</dds-button-cta>
-          <dds-button-cta cta-type="schedule">Schedule</dds-button-cta>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <cds-button-cta cta-type="call">Call</cds-button-cta>
+          <cds-button-cta cta-type="email">Email</cds-button-cta>
+          <cds-button-cta cta-type="chat">Chat</cds-button-cta>
+          <cds-button-cta cta-type="schedule">Schedule</cds-button-cta>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-button/index.html b/packages/web-components/examples/codesandbox/components/cta-button/index.html
index 7c62682796e..85eddc3e688 100644
--- a/packages/web-components/examples/codesandbox/components/cta-button/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-button/index.html
@@ -15,29 +15,23 @@
       rel="stylesheet"
       href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
     />
-    <link
-      rel="stylesheet"
-      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"
-    />
-    <style type="text/css">
-      /* Suppress custom element until styles are loaded */
-      dds-button-cta:not(:defined) {
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />cds-button-cta:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12">
-          <dds-button-cta
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <cds-button-cta
             cta-type="local"
             kind="tertiary"
             href="https://www.example.com"
           >
             Button CTA Copy
-          </dds-button-cta>
+          </cds-button-cta>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html b/packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html
index e46f522726b..33e125e6589 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-card-link/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-card-link-cta:not(:defined) {
+    cds-card-link-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -25,12 +24,12 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-link-cta.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-card-link-cta href="https://www.ibm.com/" cta-type="local">
-        <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-        <dds-card-cta-footer>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-card-link-cta href="https://www.ibm.com/" cta-type="local">
+        <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+        <cds-card-cta-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -45,8 +44,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-cta-footer>
-      </dds-card-link-cta>
+        </cds-card-cta-footer>
+      </cds-card-link-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card-link/index.html b/packages/web-components/examples/codesandbox/components/cta-card-link/index.html
index 2c4e21d7f57..2d914efc4ed 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card-link/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-card-link/index.html
@@ -13,23 +13,22 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-card-link-cta:not(:defined) {
+    cds-card-link-cta:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-4">
-      <dds-card-link-cta href="https://www.ibm.com/" cta-type="local">
-        <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-        <dds-card-cta-footer>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-4">
+      <cds-card-link-cta href="https://www.ibm.com/" cta-type="local">
+        <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+        <cds-card-cta-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -44,8 +43,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-cta-footer>
-      </dds-card-link-cta>
+        </cds-card-cta-footer>
+      </cds-card-link-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/cdn.html b/packages/web-components/examples/codesandbox/components/cta-card/cdn.html
index 2a840514753..9edf3f92a70 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-card/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-card-cta:not(:defined) {
+    cds-card-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -25,12 +24,12 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-cta.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-4">
-      <dds-card-cta href="https://www.ibm.com/" cta-type="local">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-4">
+      <cds-card-cta href="https://www.ibm.com/" cta-type="local">
         Lorem ipsum dolor sit amet
-        <dds-card-cta-footer>
+        <cds-card-cta-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -45,8 +44,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-cta-footer>
-      </dds-card-cta>
+        </cds-card-cta-footer>
+      </cds-card-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-card/index.html b/packages/web-components/examples/codesandbox/components/cta-card/index.html
index 52659c1e7a7..8c66ec01fbb 100644
--- a/packages/web-components/examples/codesandbox/components/cta-card/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-card/index.html
@@ -13,23 +13,22 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-card-cta:not(:defined) {
+    cds-card-cta:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-4">
-      <dds-card-cta href="https://www.ibm.com/" cta-type="local">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-4">
+      <cds-card-cta href="https://www.ibm.com/" cta-type="local">
         Lorem ipsum dolor sit amet
-        <dds-card-cta-footer>
+        <cds-card-cta-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -44,8 +43,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-card-cta-footer>
-      </dds-card-cta>
+        </cds-card-cta-footer>
+      </cds-card-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/cdn.html b/packages/web-components/examples/codesandbox/components/cta-feature/cdn.html
index 5e9eebd8ed3..07a89b52271 100644
--- a/packages/web-components/examples/codesandbox/components/cta-feature/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-feature/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-feature-cta:not(:defined) {
+    cds-feature-cta:not(:defined) {
       display: none;
     }
   </style>
@@ -25,17 +24,17 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-cta.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-feature-cta href="https://www.ibm.com/" cta-type="local">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-feature-cta href="https://www.ibm.com/" cta-type="local">
         Copy text
-        <dds-image
+        <cds-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
-        ></dds-image>
-        <dds-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
+        ></cds-image>
+        <cds-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
           <svg
             slot="icon"
             focusable="false"
@@ -49,8 +48,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-feature-cta-footer>
-      </dds-feature-cta>
+        </cds-feature-cta-footer>
+      </cds-feature-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-feature/index.html b/packages/web-components/examples/codesandbox/components/cta-feature/index.html
index bac22a2cd81..cafcae890d9 100644
--- a/packages/web-components/examples/codesandbox/components/cta-feature/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-feature/index.html
@@ -13,28 +13,27 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-feature-cta:not(:defined) {
+    cds-feature-cta:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-feature-cta href="https://www.ibm.com/" cta-type="local">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-feature-cta href="https://www.ibm.com/" cta-type="local">
         Copy text
-        <dds-image
+        <cds-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
-        ></dds-image>
-        <dds-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
+        ></cds-image>
+        <cds-feature-cta-footer cta-type="local" href="https://www.ibm.com/">
           <svg
             slot="icon"
             focusable="false"
@@ -48,8 +47,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-feature-cta-footer>
-      </dds-feature-cta>
+        </cds-feature-cta-footer>
+      </cds-feature-cta>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/cdn.html b/packages/web-components/examples/codesandbox/components/cta-section/cdn.html
index cb29b08136e..44e1ca8ec21 100644
--- a/packages/web-components/examples/codesandbox/components/cta-section/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-section/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-cta-section:not(:defined) {
+    cds-cta-section:not(:defined) {
       display: none;
     }
   </style>
@@ -23,21 +23,21 @@
 </head>
 
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-lg-12 bx--col-sm-4">
-      <dds-cta-section>
-        <dds-cta-block>
-          <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-          <dds-content-block-copy
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-12 cds--col-sm-4">
+      <cds-cta-section>
+        <cds-cta-block>
+          <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
+          <cds-content-block-copy
           >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-            magna.</dds-content-block-copy
+            magna.</cds-content-block-copy
           >
-          <dds-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
-          >Browse tutorials</dds-text-cta
+          <cds-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
+          >Browse tutorials</cds-text-cta
           >
-        </dds-cta-block>
-      </dds-cta-section>
+        </cds-cta-block>
+      </cds-cta-section>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-section/index.html b/packages/web-components/examples/codesandbox/components/cta-section/index.html
index 146612b39d8..fc08cde3f52 100644
--- a/packages/web-components/examples/codesandbox/components/cta-section/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-section/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-cta-section:not(:defined) {
+      cds-cta-section:not(:defined) {
         display: none;
       }
     </style>
@@ -22,21 +22,21 @@
   </head>
 
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-lg-12 bx--col-sm-4">
-          <dds-cta-section>
-            <dds-cta-block>
-              <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-              <dds-content-block-copy
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-12 cds--col-sm-4">
+          <cds-cta-section>
+            <cds-cta-block>
+              <cds-content-block-heading>Curabitur malesuada varius mi eu posuere</cds-content-block-heading>
+              <cds-content-block-copy
                 >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis
-                magna.</dds-content-block-copy
+                magna.</cds-content-block-copy
               >
-              <dds-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
-                >Browse tutorials</dds-text-cta
+              <cds-text-cta slot="action" cta-type="local" icon-placement="right" href="https://www.example.com"
+                >Browse tutorials</cds-text-cta
               >
-            </dds-cta-block>
-          </dds-cta-section>
+            </cds-cta-block>
+          </cds-cta-section>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/cdn.html b/packages/web-components/examples/codesandbox/components/cta-text/cdn.html
index 7ee4203e785..47811a77a49 100644
--- a/packages/web-components/examples/codesandbox/components/cta-text/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/cta-text/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-video-cta-container:not(:defined) {
+    cds-video-cta-container:not(:defined) {
       display: none;
     }
   </style>
@@ -27,12 +26,12 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-cta-container.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-video-cta-container>
-        <dds-text-cta cta-type="video" href="1_9h94wo6b"></dds-text-cta>
-      </dds-video-cta-container>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-video-cta-container>
+        <cds-text-cta cta-type="video" href="1_9h94wo6b"></cds-text-cta>
+      </cds-video-cta-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/cta-text/index.html b/packages/web-components/examples/codesandbox/components/cta-text/index.html
index 95dab668a45..ac4715bb78e 100644
--- a/packages/web-components/examples/codesandbox/components/cta-text/index.html
+++ b/packages/web-components/examples/codesandbox/components/cta-text/index.html
@@ -13,23 +13,22 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-video-cta-container:not(:defined) {
+    cds-video-cta-container:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-video-cta-container>
-        <dds-text-cta cta-type="video" href="1_9h94wo6b"></dds-text-cta>
-      </dds-video-cta-container>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-video-cta-container>
+        <cds-text-cta cta-type="video" href="1_9h94wo6b"></cds-text-cta>
+      </cds-video-cta-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html b/packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html
index 321bbe3234f..e72f3466384 100644
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/dotcom-shell/cdn.html
@@ -146,10 +146,10 @@
   <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
   <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-dotcom-shell-container:not(:defined) {
+    cds-dotcom-shell-container:not(:defined) {
       display: none;
     }
   </style>
@@ -157,11 +157,11 @@
   <script src="src/index-cdn.js"></script>
 </head>
 <body>
-<dds-dotcom-shell-container>
-  <main class="bx--content dds-ce-demo--ui-shell-content">
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--offset-lg-3 bx--col-lg-13">
+<cds-dotcom-shell-container>
+  <main class="cds--content cds-ce-demo--ui-shell-content">
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--offset-lg-3 cds--col-lg-13">
           <h2>
             Purpose and function
           </h2>
@@ -204,6 +204,6 @@ <h2>
       </div>
     </div>
   </main>
-</dds-dotcom-shell-container>
+</cds-dotcom-shell-container>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/index.html b/packages/web-components/examples/codesandbox/components/dotcom-shell/index.html
index 7b623d6c832..0cf2b22a3af 100644
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/index.html
+++ b/packages/web-components/examples/codesandbox/components/dotcom-shell/index.html
@@ -148,18 +148,18 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-dotcom-shell-container:not(:defined) {
+      cds-dotcom-shell-container:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <dds-dotcom-shell-container>
-      <main class="bx--content dds-ce-demo--ui-shell-content">
-        <div class="bx--grid">
-          <div class="bx--row">
-            <div class="bx--offset-lg-3 bx--col-lg-13">
+    <cds-dotcom-shell-container>
+      <main class="cds--content cds-ce-demo--ui-shell-content">
+        <div class="cds--grid">
+          <div class="cds--row">
+            <div class="cds--offset-lg-3 cds--col-lg-13">
               <h2>
                 Purpose and function
               </h2>
@@ -202,6 +202,6 @@ <h2>
           </div>
         </div>
       </main>
-    </dds-dotcom-shell-container>
+    </cds-dotcom-shell-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.scss b/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.scss
index 7f9b74aca69..9643a232fc4 100644
--- a/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.scss
+++ b/packages/web-components/examples/codesandbox/components/dotcom-shell/src/index.scss
@@ -17,12 +17,12 @@ $feature-flags: (
 @import 'carbon-components/scss/components/ui-shell/content';
 
 @media (min-width: 66rem) {
-  .bx--offset-lg-3 {
+  .cds--offset-lg-3 {
     margin-left: 0;
   }
 }
 
-.bx--content.dds-ce-demo--ui-shell-content {
+.cds--content.cds-ce-demo--ui-shell-content {
   h2 {
     margin: 30px 0;
 
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html b/packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html
index 66def580c1b..45a22a15a68 100644
--- a/packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/expressive-modal/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-expressive-modal:not(:defined), dds-button-expressive:not(:defined) {
+    c4d-expressive-modal:not(:defined), c4d-button:not(:defined) {
       display: none;
     }
   </style>
@@ -27,20 +26,20 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/expressive-modal.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-button-expressive id="open-modal-btn">Open modal
-      </dds-button-expressive>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-button-expressive id="open-modal-btn">Open modal
+      </cds-button-expressive>
     </div>
   </div>
 </div>
-<dds-expressive-modal id="modal">
-  <dds-expressive-modal-header>
-    <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-    <dds-expressive-modal-heading>Modal Title</dds-expressive-modal-heading>
-  </dds-expressive-modal-header>
-  <dds-expressive-modal-body>
+<c4d-expressive-modal id="modal">
+  <c4d-expressive-modal-header>
+    <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+    <c4d-expressive-modal-heading>Modal Title</c4d-expressive-modal-heading>
+  </c4d-expressive-modal-header>
+  <c4d-expressive-modal-body>
     Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus
     pharetra, purus et pretium posuere, ipsum
     risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh
@@ -50,9 +49,9 @@
     laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl
     dui, scelerisque et augue eget, pharetra
     commodo elit. In venenatis sapien eu nisl congue suscipit.
-  </dds-expressive-modal-body>
-  <dds-expressive-modal-footer>
-    <dds-button-expressive>
+  </c4d-expressive-modal-body>
+  <c4d-expressive-modal-footer>
+    <cds-button>
       Lorem ipsum dolor
       <svg
         slot="icon"
@@ -67,9 +66,9 @@
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-button-expressive>
-  </dds-expressive-modal-footer>
-</dds-expressive-modal>
+    </cds-button>
+  </c4d-expressive-modal-footer>
+</c4d-expressive-modal>
 </body>
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/expressive-modal/index.html b/packages/web-components/examples/codesandbox/components/expressive-modal/index.html
index 950e007524c..b8d5f89a880 100644
--- a/packages/web-components/examples/codesandbox/components/expressive-modal/index.html
+++ b/packages/web-components/examples/codesandbox/components/expressive-modal/index.html
@@ -13,31 +13,29 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     /* Suppress custom element until styles are loaded */
-    dds-expressive-modal:not(:defined), dds-button-expressive:not(:defined) {
+    c4d-expressive-modal:not(:defined), c4d-button:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-button-expressive id="open-modal-btn">Open modal
-      </dds-button-expressive>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <c4d-button id="open-modal-btn">Open modal
+      </c4d-button>
     </div>
   </div>
 </div>
-<dds-expressive-modal id="modal">
-  <dds-expressive-modal-header>
-    <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-    <dds-expressive-modal-heading>Modal Title</dds-expressive-modal-heading>
-  </dds-expressive-modal-header>
-  <dds-expressive-modal-body>
+<c4d-expressive-modal id="modal">
+  <c4d-expressive-modal-header>
+    <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+    <c4d-expressive-modal-heading>Modal Title</c4d-expressive-modal-heading>
+  </c4d-expressive-modal-header>
+  <c4d-expressive-modal-body>
     Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus
     pharetra, purus et pretium posuere, ipsum
     risus pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh
@@ -47,9 +45,9 @@
     laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed nisl
     dui, scelerisque et augue eget, pharetra
     commodo elit. In venenatis sapien eu nisl congue suscipit.
-  </dds-expressive-modal-body>
-  <dds-expressive-modal-footer>
-    <dds-button-expressive>
+  </c4d-expressive-modal-body>
+  <c4d-expressive-modal-footer>
+    <c4d-button>
       Lorem ipsum dolor
       <svg
         slot="icon"
@@ -64,9 +62,9 @@
         <path
           d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-button-expressive>
-  </dds-expressive-modal-footer>
-</dds-expressive-modal>
+    </c4d-button>
+  </c4d-expressive-modal-footer>
+</c4d-expressive-modal>
 </body>
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/cdn.html b/packages/web-components/examples/codesandbox/components/feature-card/cdn.html
index 33d1e5714f7..1ae36d1bf2f 100644
--- a/packages/web-components/examples/codesandbox/components/feature-card/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/feature-card/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-feature-card:not(:defined) {
+    cds-feature-card:not(:defined) {
       display: none;
     }
   </style>
@@ -23,18 +22,18 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-card.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-feature-card href="https://example.com">
-        <dds-image
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-feature-card href="https://example.com">
+        <cds-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </dds-image>
-        <dds-card-heading>Lorem ipsum dolor sit amet.</dds-card-heading>
-        <dds-feature-card-footer>
+        </cds-image>
+        <cds-card-heading>Lorem ipsum dolor sit amet.</cds-card-heading>
+        <cds-feature-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -48,8 +47,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-feature-card-footer>
-      </dds-feature-card>
+        </cds-feature-card-footer>
+      </cds-feature-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/feature-card/index.html b/packages/web-components/examples/codesandbox/components/feature-card/index.html
index 4d99946d049..2c4e95ed8e7 100644
--- a/packages/web-components/examples/codesandbox/components/feature-card/index.html
+++ b/packages/web-components/examples/codesandbox/components/feature-card/index.html
@@ -11,29 +11,28 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-feature-card:not(:defined) {
+    cds-feature-card:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-feature-card href="https://example.com">
-        <dds-image
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-feature-card href="https://example.com">
+        <cds-image
           slot="image"
           alt="Image alt text"
           default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </dds-image>
-        <dds-card-heading>Lorem ipsum dolor sit amet.</dds-card-heading>
-        <dds-feature-card-footer>
+        </cds-image>
+        <cds-card-heading>Lorem ipsum dolor sit amet.</cds-card-heading>
+        <cds-feature-card-footer>
           <svg
             slot="icon"
             focusable="false"
@@ -47,8 +46,8 @@
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-feature-card-footer>
-      </dds-feature-card>
+        </cds-feature-card-footer>
+      </cds-feature-card>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.babelrc b/packages/web-components/examples/codesandbox/components/feature-section/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/feature-section/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/.gitignore b/packages/web-components/examples/codesandbox/components/feature-section/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/feature-section/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/cdn.html b/packages/web-components/examples/codesandbox/components/feature-section/cdn.html
new file mode 100644
index 00000000000..7e779603ba3
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/feature-section/cdn.html
@@ -0,0 +1,73 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style type="text/css">
+    /* Suppress custom element until styles are loaded */
+    cds-feature-section:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module"
+          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-section.min.js"></script>
+</head>
+<body>
+  <c4d-feature-section media-alignment="right">
+    <c4d-image
+      slot="image"
+      default-src="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+      <c4d-image-item
+        media="(min-width: 1584px)"
+        srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 1056px)"
+        srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 672px)"
+        srcset="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 320px)"
+        srcset="https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 0px)"
+        srcset="https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+    </c4d-image>
+    <c4d-card-eyebrow>5 min activity</c4d-card-eyebrow>
+    <c4d-content-block-heading>Ready when you are</c4d-content-block-heading>
+    <c4d-content-item-paragraph slot="copy"
+      >We're flexible. We can work with you on a wide variety of engagements on a
+      project or consulting basis. And we're technology agnostic. Our experts work
+      with any vendor's technology, not just IBM's. You decide how you want to
+      work and where to focus our expertise.</c4d-content-item-paragraph
+    >
+  
+    <c4d-card
+      link
+      slot="footer"
+      href="https://example.com"
+      cta-type="local"
+      color-scheme="inverse">
+      <c4d-card-heading
+        >Try a free virtual business framing session with IBM
+        Garage</c4d-card-heading
+      >
+      <c4d-card-footer> </c4d-card-footer>
+    </c4d-card>
+  </c4d-feature-section>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/index.html b/packages/web-components/examples/codesandbox/components/feature-section/index.html
new file mode 100644
index 00000000000..d3e8f96d7c5
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/feature-section/index.html
@@ -0,0 +1,72 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style type="text/css">
+    /* Suppress custom element until styles are loaded */
+    cds-feature-section:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script src="src/index.js"></script>
+</head>
+<body>
+  <c4d-feature-section media-alignment="right">
+    <c4d-image
+      slot="image"
+      default-src="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+      <c4d-image-item
+        media="(min-width: 1584px)"
+        srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 1056px)"
+        srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 672px)"
+        srcset="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 320px)"
+        srcset="https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+      <c4d-image-item
+        media="(min-width: 0px)"
+        srcset="https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616">
+      </c4d-image-item>
+    </c4d-image>
+    <c4d-card-eyebrow>5 min activity</c4d-card-eyebrow>
+    <c4d-content-block-heading>Ready when you are</c4d-content-block-heading>
+    <c4d-content-item-paragraph slot="copy"
+      >We're flexible. We can work with you on a wide variety of engagements on a
+      project or consulting basis. And we're technology agnostic. Our experts work
+      with any vendor's technology, not just IBM's. You decide how you want to
+      work and where to focus our expertise.</c4d-content-item-paragraph
+    >
+  
+    <c4d-card
+      link
+      slot="footer"
+      href="https://example.com"
+      cta-type="local"
+      color-scheme="inverse">
+      <c4d-card-heading
+        >Try a free virtual business framing session with IBM
+        Garage</c4d-card-heading
+      >
+      <c4d-card-footer> </c4d-card-footer>
+    </c4d-card>
+  </c4d-feature-section>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/package.json b/packages/web-components/examples/codesandbox/components/feature-section/package.json
new file mode 100644
index 00000000000..26ac79d63f5
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/feature-section/package.json
@@ -0,0 +1,21 @@
+{
+  "name": "ibmdotcom-web-components-feature-section-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build *.html --no-minify --public-url ./"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockCards/sandbox.config.json b/packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/ContentBlockCards/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/feature-section/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/feature-section/src/index.js b/packages/web-components/examples/codesandbox/components/feature-section/src/index.js
new file mode 100644
index 00000000000..c9947588ec5
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/feature-section/src/index.js
@@ -0,0 +1,10 @@
+/**
+ * @license
+ *
+ * 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 '@carbon/ibmdotcom-web-components/es/components/feature-section/index.js';
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html b/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html
index e35497d9a16..afb4d459b53 100644
--- a/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/filter-panel/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-filter-panel:not(:defined) {
+    cds-filter-panel:not(:defined) {
       display: none;
     }
   </style>
@@ -23,52 +23,52 @@
 </head>
 
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-lg-4">
-      <dds-filter-panel-composite>
-        <dds-filter-panel-heading slot="heading">Filter</dds-filter-panel-heading>
-        <dds-filter-group>
-          <dds-filter-group-item title-text="Product types">
-            <dds-filter-panel-checkbox value="API">API</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Application">Application</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Data Set">Data Set</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Free Trial">Free Trial</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Hardware">Hardware</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Service">Service</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Service Assets">Service Assets</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Software">Software</dds-filter-panel-checkbox>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Technologies">
-            <dds-filter-panel-input-select header-value="Analytics" title="Analytics"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
-              <dds-filter-panel-input-select-item value="Machine Learning">Machine Learning</dds-filter-panel-input-select-item>
-              <dds-filter-panel-input-select-item value="Natural language processing">Natural language processing</dds-filter-panel-input-select-item>
-              <dds-filter-panel-input-select-item value="Speech recognition">Speech recognition</dds-filter-panel-input-select-item>
-            </dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Automation" title="Automation"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="IT management" title="IT management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Security" title="Security"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Software development" title="Software development"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Business needs">
-            <dds-filter-panel-input-select header-value="Business operations" title="Business operations"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Content Management" title="Content Management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Customer service" title="Customer service"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Finance" title="Finance"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Deployment types">
-            <dds-filter-panel-checkbox value="On-premisis">On-premisis</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="SaaS">SaaS</dds-filter-panel-checkbox>
-          </dds-filter-group-item>
-        </dds-filter-group>
-      </dds-filter-panel-composite>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-4">
+      <cds-filter-panel-composite>
+        <cds-filter-panel-heading slot="heading">Filter</cds-filter-panel-heading>
+        <cds-filter-group>
+          <cds-filter-group-item title="Product types">
+            <cds-filter-panel-checkbox value="API">API</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Application">Application</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Data Set">Data Set</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Free Trial">Free Trial</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Hardware">Hardware</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Service">Service</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Service Assets">Service Assets</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Software">Software</cds-filter-panel-checkbox>
+          </cds-filter-group-item>
+          <cds-filter-group-item title="Technologies">
+            <cds-filter-panel-input-select header-value="Analytics" title="Analytics"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
+              <cds-filter-panel-input-select-item value="Machine Learning">Machine Learning</cds-filter-panel-input-select-item>
+              <cds-filter-panel-input-select-item value="Natural language processing">Natural language processing</cds-filter-panel-input-select-item>
+              <cds-filter-panel-input-select-item value="Speech recognition">Speech recognition</cds-filter-panel-input-select-item>
+            </cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Automation" title="Automation"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="IT management" title="IT management"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Security" title="Security"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Software development" title="Software development"></cds-filter-panel-input-select>
+          </cds-filter-group-item>
+          <cds-filter-group-item title="Business needs">
+            <cds-filter-panel-input-select header-value="Business operations" title="Business operations"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Content Management" title="Content Management"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Customer service" title="Customer service"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Finance" title="Finance"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></cds-filter-panel-input-select>
+          </cds-filter-group-item>
+          <cds-filter-group-item title="Deployment types">
+            <cds-filter-panel-checkbox value="On-premisis">On-premisis</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="SaaS">SaaS</cds-filter-panel-checkbox>
+          </cds-filter-group-item>
+        </cds-filter-group>
+      </cds-filter-panel-composite>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/filter-panel/index.html b/packages/web-components/examples/codesandbox/components/filter-panel/index.html
index 33e100b27e7..3beb2e22ef3 100644
--- a/packages/web-components/examples/codesandbox/components/filter-panel/index.html
+++ b/packages/web-components/examples/codesandbox/components/filter-panel/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-filter-panel:not(:defined) {
+      cds-filter-panel:not(:defined) {
         display: none;
       }
     </style>
@@ -22,52 +22,52 @@
   </head>
 
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-lg-4">
-          <dds-filter-panel-composite>
-        <dds-filter-panel-heading slot="heading">Filter</dds-filter-panel-heading>
-        <dds-filter-group>
-          <dds-filter-group-item title-text="Product types">
-            <dds-filter-panel-checkbox value="API">API</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Application">Application</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Data Set">Data Set</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Free Trial">Free Trial</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Hardware">Hardware</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Service">Service</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Service Assets">Service Assets</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Software">Software</dds-filter-panel-checkbox>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Technologies">
-            <dds-filter-panel-input-select header-value="Analytics" title="Analytics"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
-              <dds-filter-panel-input-select-item value="Machine Learning">Machine Learning</dds-filter-panel-input-select-item>
-              <dds-filter-panel-input-select-item value="Natural language processing">Natural language processing</dds-filter-panel-input-select-item>
-              <dds-filter-panel-input-select-item value="Speech recognition">Speech recognition</dds-filter-panel-input-select-item>
-            </dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Automation" title="Automation"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="IT management" title="IT management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Security" title="Security"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Software development" title="Software development"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Business needs">
-            <dds-filter-panel-input-select header-value="Business operations" title="Business operations"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Content Management" title="Content Management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Customer service" title="Customer service"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Finance" title="Finance"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Deployment types">
-            <dds-filter-panel-checkbox value="On-premisis">On-premisis</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="SaaS">SaaS</dds-filter-panel-checkbox>
-          </dds-filter-group-item>
-        </dds-filter-group>
-      </dds-filter-panel-composite>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-4">
+          <cds-filter-panel-composite>
+        <cds-filter-panel-heading slot="heading">Filter</cds-filter-panel-heading>
+        <cds-filter-group>
+          <cds-filter-group-item title="Product types">
+            <cds-filter-panel-checkbox value="API">API</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Application">Application</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Data Set">Data Set</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Free Trial">Free Trial</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Hardware">Hardware</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Service">Service</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Service Assets">Service Assets</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="Software">Software</cds-filter-panel-checkbox>
+          </cds-filter-group-item>
+          <cds-filter-group-item title="Technologies">
+            <cds-filter-panel-input-select header-value="Analytics" title="Analytics"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
+              <cds-filter-panel-input-select-item value="Machine Learning">Machine Learning</cds-filter-panel-input-select-item>
+              <cds-filter-panel-input-select-item value="Natural language processing">Natural language processing</cds-filter-panel-input-select-item>
+              <cds-filter-panel-input-select-item value="Speech recognition">Speech recognition</cds-filter-panel-input-select-item>
+            </cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Automation" title="Automation"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="IT management" title="IT management"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Security" title="Security"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Software development" title="Software development"></cds-filter-panel-input-select>
+          </cds-filter-group-item>
+          <cds-filter-group-item title="Business needs">
+            <cds-filter-panel-input-select header-value="Business operations" title="Business operations"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Content Management" title="Content Management"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Customer service" title="Customer service"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Finance" title="Finance"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></cds-filter-panel-input-select>
+            <cds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></cds-filter-panel-input-select>
+          </cds-filter-group-item>
+          <cds-filter-group-item title="Deployment types">
+            <cds-filter-panel-checkbox value="On-premisis">On-premisis</cds-filter-panel-checkbox>
+            <cds-filter-panel-checkbox value="SaaS">SaaS</cds-filter-panel-checkbox>
+          </cds-filter-group-item>
+        </cds-filter-group>
+      </cds-filter-panel-composite>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html b/packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html
index 6d1ac8c2285..bb83d71bd6c 100644
--- a/packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/footer-language-only/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-footer-container:not(:defined) {
+    cds-footer-container:not(:defined) {
       display: none;
     }
   </style>
@@ -22,12 +22,12 @@
 </head>
 <body>
 <div style="padding-top: 200px;"></div>
-<dds-footer-container
+<cds-footer-container
   size="regular"
   language-selector-label="Choose a language"
   clear-selection-label="Clear language selection"
   selected-language="English"
-></dds-footer-container>
+></cds-footer-container>
 </body>
 <script>
   const languageList = [
@@ -35,6 +35,6 @@
     { id: 'nl', text: 'Dutch / Nederlands' },
     { id: 'en', text: 'English' },
   ];
-  document.querySelector("dds-footer-container").langList = languageList;
+  document.querySelector("cds-footer-container").langList = languageList;
 </script>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/footer-language-only/index.html b/packages/web-components/examples/codesandbox/components/footer-language-only/index.html
index c044feb98c5..0b26de9819d 100644
--- a/packages/web-components/examples/codesandbox/components/footer-language-only/index.html
+++ b/packages/web-components/examples/codesandbox/components/footer-language-only/index.html
@@ -16,12 +16,12 @@
 </head>
 <body>
 <div style="padding-top: 200px;"></div>
-<dds-footer-container
+<cds-footer-container
   size="regular"
   language-selector-label="Choose a language"
   clear-selection-label="Clear language selection"
   selected-language="English"
-></dds-footer-container>
+></cds-footer-container>
 </body>
 <script>
   const languageList = [
@@ -29,6 +29,6 @@
     { id: 'nl', text: 'Dutch / Nederlands' },
     { id: 'en', text: 'English' },
   ];
-  document.querySelector("dds-footer-container").langList = languageList;
+  document.querySelector("cds-footer-container").langList = languageList;
 </script>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/footer/cdn.html b/packages/web-components/examples/codesandbox/components/footer/cdn.html
index 875e2bf0aee..7a192800163 100644
--- a/packages/web-components/examples/codesandbox/components/footer/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/footer/cdn.html
@@ -148,13 +148,13 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-footer-container:not(:defined) {
+    cds-footer-container:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"></script>
 </head>
 <body>
-<dds-footer-container></dds-footer-container>
+<cds-footer-container></cds-footer-container>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/footer/index.html b/packages/web-components/examples/codesandbox/components/footer/index.html
index 76d75ab85b8..53e15bf3535 100644
--- a/packages/web-components/examples/codesandbox/components/footer/index.html
+++ b/packages/web-components/examples/codesandbox/components/footer/index.html
@@ -15,6 +15,6 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <dds-footer-container></dds-footer-container>
+    <cds-footer-container></cds-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/.babelrc b/packages/web-components/examples/codesandbox/components/global-banner/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/global-banner/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/.gitignore b/packages/web-components/examples/codesandbox/components/global-banner/.gitignore
new file mode 100644
index 00000000000..d94d6e13e94
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/global-banner/.gitignore
@@ -0,0 +1,22 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.cache
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/.sassrc b/packages/web-components/examples/codesandbox/components/global-banner/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/pictogram-item/.sassrc
rename to packages/web-components/examples/codesandbox/components/global-banner/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/cdn.html b/packages/web-components/examples/codesandbox/components/global-banner/cdn.html
new file mode 100644
index 00000000000..c6eef595140
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/global-banner/cdn.html
@@ -0,0 +1,34 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8"/>
+  <link rel="stylesheet"
+        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style type="text/css">
+    /* Suppress custom element until styles are loaded */
+    c4d-global-banner:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module"
+          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/global-banner.min.js"></script>
+</head>
+<body>
+	<c4d-global-banner image-width="4-col">
+    <c4d-global-banner-image default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
+    <c4d-global-banner-heading>Hybrid cloud and AI for smarter business</c4d-global-banner-heading>
+    <c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
+    <c4d-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
+      Register for Think. Free
+    </c4d-button>
+  </c4d-global-banner>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/index.html b/packages/web-components/examples/codesandbox/components/global-banner/index.html
new file mode 100644
index 00000000000..aa22f6c1170
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/global-banner/index.html
@@ -0,0 +1,27 @@
+<!--
+@license
+
+Copyright IBM Corp. 2020
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <script src="src/index.js"></script>
+  </head>
+  <body>
+    <c4d-global-banner image-width="4-col">
+      <c4d-global-banner-image default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></c4d-global-banner-image>
+      <c4d-global-banner-heading>Hybrid cloud and AI for smarter business</c4d-global-banner-heading>
+      <c4d-global-banner-copy>Las Vegas, June 15-18, 2025</c4d-global-banner-copy>
+      <c4d-button slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
+        Register for Think. Free
+      </c4d-button>
+    </c4d-global-banner>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/package.json b/packages/web-components/examples/codesandbox/components/global-banner/package.json
new file mode 100644
index 00000000000..4fddf69cd1d
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/global-banner/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ibmdotcom-web-components-global-banner-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build *.html --no-minify --public-url ./"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
+    "sass": "^1.32.13"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockHorizontal/sandbox.config.json b/packages/web-components/examples/codesandbox/components/global-banner/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/ContentBlockHorizontal/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/global-banner/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/global-banner/src/index.js b/packages/web-components/examples/codesandbox/components/global-banner/src/index.js
new file mode 100644
index 00000000000..fb8d00142f9
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/global-banner/src/index.js
@@ -0,0 +1,24 @@
+/**
+ * @license
+ *
+ * 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 '@carbon/ibmdotcom-web-components/es/components/global-banner/index.js';
+import './index.scss';
+
+window.digitalData = {
+  page: {
+    pageInfo: {
+      language: 'en-US',
+      ibm: {
+        country: 'US',
+        siteID: 'IBMTESTWWW',
+      },
+    },
+    isDataLayerReady: true,
+  },
+};
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/src/index.scss b/packages/web-components/examples/codesandbox/components/global-banner/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-horizontal/src/index.scss
rename to packages/web-components/examples/codesandbox/components/global-banner/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html b/packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html
index 41c717a992d..8b702a8d36b 100644
--- a/packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/horizontal-rule/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-horizontal-rule:not(:defined) {
+    cds-horizontal-rule:not(:defined) {
       display: none;
     }
   </style>
@@ -23,10 +22,10 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/horizontal-rule.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-hr size="fluid"></dds-hr>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-hr size="fluid"></cds-hr>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/horizontal-rule/index.html b/packages/web-components/examples/codesandbox/components/horizontal-rule/index.html
index 4a45f3a0c8f..bdd9c811036 100644
--- a/packages/web-components/examples/codesandbox/components/horizontal-rule/index.html
+++ b/packages/web-components/examples/codesandbox/components/horizontal-rule/index.html
@@ -11,21 +11,20 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-horizontal-rule:not(:defined) {
+    cds-horizontal-rule:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-hr size="fluid"></dds-hr>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-hr size="fluid"></cds-hr>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/image/cdn.html b/packages/web-components/examples/codesandbox/components/image/cdn.html
index 4249ba24e22..5aae45da80d 100644
--- a/packages/web-components/examples/codesandbox/components/image/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/image/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-image:not(:defined) {
+    cds-image:not(:defined) {
       display: none;
     }
   </style>
@@ -23,34 +22,34 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/image.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-image
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-image
         slot="image"
         alt="Image alt text"
         default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
       >
-        <dds-image-item
+        <cds-image-item
           media="(min-width: 1312px)"
           srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item
+        </cds-image-item>
+        <cds-image-item
           media="(min-width: 1056px)"
           srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item media="(min-width: 991px)"
+        </cds-image-item>
+        <cds-image-item media="(min-width: 991px)"
                         srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)"
+        </cds-image-item>
+        <cds-image-item media="(min-width: 672px)"
                         srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)"
+        </cds-image-item>
+        <cds-image-item media="(min-width: 320px)"
                         srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-        </dds-image-item>
-      </dds-image>
+        </cds-image-item>
+      </cds-image>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/image/index.html b/packages/web-components/examples/codesandbox/components/image/index.html
index 1645ef4de6e..c9ecd0eb54c 100644
--- a/packages/web-components/examples/codesandbox/components/image/index.html
+++ b/packages/web-components/examples/codesandbox/components/image/index.html
@@ -11,45 +11,43 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     /* Suppress custom element until styles are loaded */
-    dds-image:not(:defined) {
+    cds-image:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-image
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-image
         slot="image"
         alt="Image alt text"
         default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
       >
-        <dds-image-item
+        <cds-image-item
           media="(min-width: 1312px)"
           srcset="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item
+        </cds-image-item>
+        <cds-image-item
           media="(min-width: 1056px)"
           srcset="https://fpoimg.com/600x300?text=2:1&bg_color=ee5396&text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item media="(min-width: 991px)"
+        </cds-image-item>
+        <cds-image-item media="(min-width: 991px)"
                         srcset="https://fpoimg.com/600x600?text=1:1&bg_color=ee5396&text_color=161616">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)"
+        </cds-image-item>
+        <cds-image-item media="(min-width: 672px)"
                         srcset="https://fpoimg.com/400x200?text=2:1&bg_color=ee5396&text_color=161616">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)"
+        </cds-image-item>
+        <cds-image-item media="(min-width: 320px)"
                         srcset="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616">
-        </dds-image-item>
-      </dds-image>
+        </cds-image-item>
+      </cds-image>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/.babelrc b/packages/web-components/examples/codesandbox/components/in-page-banner/.babelrc
new file mode 100644
index 00000000000..74450eed94b
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/in-page-banner/.babelrc
@@ -0,0 +1,22 @@
+{
+  "presets": [
+    [
+      "@babel/preset-env",
+      {
+        "modules": false,
+        "targets": [
+          "last 1 version",
+          "Firefox ESR",
+          "not opera > 0",
+          "not op_mini > 0",
+          "not op_mob > 0",
+          "not android > 0",
+          "not edge > 0",
+          "not ie > 0",
+          "not ie_mob > 0"
+        ]
+      }
+    ]
+  ],
+  "plugins": [["@babel/plugin-transform-runtime", { "version": "7.3.0" }]]
+}
diff --git a/packages/web-components/examples/codesandbox/components-react/tag-link/.gitignore b/packages/web-components/examples/codesandbox/components/in-page-banner/.gitignore
similarity index 100%
rename from packages/web-components/examples/codesandbox/components-react/tag-link/.gitignore
rename to packages/web-components/examples/codesandbox/components/in-page-banner/.gitignore
diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/.sassrc b/packages/web-components/examples/codesandbox/components/in-page-banner/.sassrc
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-group-horizontal/.sassrc
rename to packages/web-components/examples/codesandbox/components/in-page-banner/.sassrc
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/cdn.html b/packages/web-components/examples/codesandbox/components/in-page-banner/cdn.html
new file mode 100644
index 00000000000..c5b635b3838
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/in-page-banner/cdn.html
@@ -0,0 +1,47 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+<head>
+  <title>@carbon/ibmdotcom-web-components example</title>
+  <meta charset="UTF-8" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
+  <style>
+    /* Suppress custom element until styles are loaded */
+    c4d-in-page-banner:not(:defined) {
+      display: none;
+    }
+  </style>
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/in-page-banner.min.js"></script>
+</head>
+<body>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-lg-8 cds--col-sm-cds--offset-lg-4">
+      <c4d-in-page-banner>
+        <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+        <c4d-link-list type="vertical" slot="complementary">
+          <c4d-link-list-item
+            icon-placement="right"
+            href="https://www.ibm.com"
+            cta-type="local">
+            Link text
+          </c4d-link-list-item>
+          <c4d-link-list-item
+            icon-placement="right"
+            href="https://www.ibm.com"
+            cta-type="local">
+            Link text
+          </c4d-link-list-item>
+        </c4d-link-list>
+      </c4d-in-page-banner>
+    </div>
+  </div>
+</div>
+</body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/index.html b/packages/web-components/examples/codesandbox/components/in-page-banner/index.html
new file mode 100644
index 00000000000..201f580fb33
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/in-page-banner/index.html
@@ -0,0 +1,46 @@
+<!--
+@license
+Copyright IBM Corp. 2020
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<html>
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <script src="src/index.js"></script>
+    <style type="text/css">
+      /* Suppress custom element until styles are loaded */
+      c4d-in-page-banner:not(:defined) {
+        display: none;
+      }
+    </style>
+  </head>
+  <body>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-8 cds--col-sm-4 cds--offset-lg-4">
+          <c4d-in-page-banner>
+            <c4d-content-group-heading>Curabitur malesuada varius mi eu posuere</c4d-content-group-heading>
+            <c4d-link-list type="vertical" slot="complementary">
+              <c4d-link-list-item
+                icon-placement="right"
+                href="https://www.ibm.com"
+                cta-type="local">
+                Link text
+              </c4d-link-list-item>
+              <c4d-link-list-item
+                icon-placement="right"
+                href="https://www.ibm.com"
+                cta-type="local">
+                Link text
+              </c4d-link-list-item>
+            </c4d-link-list>
+          </c4d-in-page-banner>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/package.json b/packages/web-components/examples/codesandbox/components/in-page-banner/package.json
new file mode 100644
index 00000000000..0252aea0272
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/in-page-banner/package.json
@@ -0,0 +1,23 @@
+{
+  "name": "ibmdotcom-web-components-in-page-banner-example",
+  "version": "0.1.0",
+  "private": true,
+  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
+  "license": "Apache-2",
+  "main": "index.html",
+  "scripts": {
+    "clean": "rimraf node_modules dist .cache",
+    "start": "parcel index.html --port=9000 --no-hmr",
+    "build": "parcel build *.html --no-minify --public-url ./"
+  },
+  "dependencies": {
+    "@carbon/ibmdotcom-web-components": "latest"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.0.0-0",
+    "carbon-components": "^10.36.0",
+    "parcel-bundler": "1.12.3",
+    "rimraf": "^3.0.2",
+    "sass": "^1.32.13"
+  }
+}
diff --git a/packages/react/examples/codesandbox/components/ContentBlockMedia/sandbox.config.json b/packages/web-components/examples/codesandbox/components/in-page-banner/sandbox.config.json
similarity index 100%
rename from packages/react/examples/codesandbox/components/ContentBlockMedia/sandbox.config.json
rename to packages/web-components/examples/codesandbox/components/in-page-banner/sandbox.config.json
diff --git a/packages/web-components/examples/codesandbox/components/in-page-banner/src/index.js b/packages/web-components/examples/codesandbox/components/in-page-banner/src/index.js
new file mode 100644
index 00000000000..5a3299dd6fb
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/in-page-banner/src/index.js
@@ -0,0 +1,11 @@
+/**
+ * @license
+ *
+ * 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 '@carbon/ibmdotcom-web-components/es/components/in-page-banner/index.js';
+import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss b/packages/web-components/examples/codesandbox/components/in-page-banner/src/index.scss
similarity index 100%
rename from packages/web-components/examples/codesandbox/components/content-item-horizontal/src/index.scss
rename to packages/web-components/examples/codesandbox/components/in-page-banner/src/index.scss
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html b/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html
index d74cfa8a73e..39c84cc21f1 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/leadspace-block/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-leadspace-block:not(:defined) {
+    c4d-leadspace-block:not(:defined) {
       display: none;
     }
   </style>
@@ -23,44 +23,43 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-list.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-      <dds-leadspace-block>
-        <dds-leadspace-block-heading>Continuous delivery</dds-leadspace-block-heading>
-        <dds-leadspace-block-content>
-          <dds-content-block-heading>Innovate like a startup and scale for the enterprise</dds-content-block-heading>
-          <dds-content-block-copy
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+      <c4d-leadspace-block>
+        <c4d-leadspace-heading type-style="fluid-heading-05">Continuous delivery</c4d-leadspace-heading>
+        <c4d-leadspace-block-content>
+          <c4d-content-block-copy
           >Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps.
             Build, test, and deploy code changes quickly, ensuring software is always ready for
-            deployment.</dds-content-block-copy
+            deployment.</c4d-content-block-copy
           >
-          <dds-leadspace-block-media slot="media">
-            <dds-image
+          <c4d-leadspace-block-media slot="media">
+            <c4d-image
               alt="Image alt text"
               default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             >
-              <dds-image-item
+              <c4d-image-item
                 media="(min-width: 672px)"
                 srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               >
-              </dds-image-item>
-              <dds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 400px)"
                 srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               >
-              </dds-image-item>
-              <dds-image-item
+              </c4d-image-item>
+              <c4d-image-item
                 media="(min-width: 320px)"
                 srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               >
-              </dds-image-item>
-            </dds-image>
-          </dds-leadspace-block-media>
-          <dds-link-list type="end">
-            <dds-link-list-heading>Featured products</dds-link-list-heading>
-            <dds-link-list-item href="https://example.com">
+              </c4d-image-item>
+            </c4d-image>
+          </c4d-leadspace-block-media>
+          <c4d-link-list type="end">
+            <c4d-link-list-heading>Featured products</c4d-link-list-heading>
+            <c4d-link-list-item href="https://example.com">
               Services
               <svg
                 focusable="false"
@@ -75,8 +74,8 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-link-list-item>
-            <dds-link-list-item href="https://example.com">
+            </c4d-link-list-item>
+            <c4d-link-list-item href="https://example.com">
               Analytics
               <svg
                 focusable="false"
@@ -91,8 +90,8 @@
               >
                 <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
               </svg>
-            </dds-link-list-item>
-            <dds-link-list-item href="https://example.com">
+            </c4d-link-list-item>
+            <c4d-link-list-item href="https://example.com">
               View all products
               <svg
                 focusable="false"
@@ -109,28 +108,13 @@
                   d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
                 ></path>
               </svg>
-            </dds-link-list-item>
-          </dds-link-list>
-          <dds-leadspace-block-cta>
-            <dds-button-group-item href="www.ibm.com" kind="primary">
-              Click here
-              <svg
-                focusable="false"
-                preserveAspectRatio="xMidYMid meet"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                aria-hidden="true"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-                slot="icon"
-              >
-                <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-              </svg>
-            </dds-button-group-item>
-          </dds-leadspace-block-cta>
-        </dds-leadspace-block-content>
-      </dds-leadspace-block>
+            </c4d-link-list-item>
+          </c4d-link-list>
+          <c4d-button href="https://example.com" cta-type="local">
+            Contact sales
+          </c4d-button>
+        </c4d-leadspace-block-content>
+      </c4d-leadspace-block>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html b/packages/web-components/examples/codesandbox/components/leadspace-block/index.html
index 2caa82fb4ae..6c854c02b54 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-block/index.html
+++ b/packages/web-components/examples/codesandbox/components/leadspace-block/index.html
@@ -14,51 +14,50 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-leadspace-block:not(:defined) {
+      c4d-leadspace-block:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
-          <dds-leadspace-block>
-            <dds-leadspace-block-heading>Continuous delivery</dds-leadspace-block-heading>
-            <dds-leadspace-block-content>
-              <dds-content-block-heading>Innovate like a startup and scale for the enterprise</dds-content-block-heading>
-              <dds-content-block-copy
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
+          <c4d-leadspace-block>
+            <c4d-leadspace-heading type-style="fluid-heading-05">Continuous delivery</c4d-leadspace-heading>
+            <c4d-leadspace-block-content>
+              <c4d-content-block-copy
                 >Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps.
                 Build, test, and deploy code changes quickly, ensuring software is always ready for
-                deployment.</dds-content-block-copy
+                deployment.</c4d-content-block-copy
               >
-              <dds-leadspace-block-media slot="media">
-                <dds-image
+              <c4d-leadspace-block-media slot="media">
+                <c4d-image
                   alt="Image alt text"
                   default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                   heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
                 >
-                  <dds-image-item
+                  <c4d-image-item
                     media="(min-width: 672px)"
                     srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                   >
-                  </dds-image-item>
-                  <dds-image-item
+                  </c4d-image-item>
+                  <c4d-image-item
                     media="(min-width: 400px)"
                     srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                   >
-                  </dds-image-item>
-                  <dds-image-item
+                  </c4d-image-item>
+                  <c4d-image-item
                     media="(min-width: 320px)"
                     srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                   >
-                  </dds-image-item>
-                </dds-image>
-              </dds-leadspace-block-media>
-              <dds-link-list type="end">
-                <dds-link-list-heading>Featured products</dds-link-list-heading>
-                <dds-link-list-item href="https://example.com">
+                  </c4d-image-item>
+                </c4d-image>
+              </c4d-leadspace-block-media>
+              <c4d-link-list type="end">
+                <c4d-link-list-heading>Featured products</c4d-link-list-heading>
+                <c4d-link-list-item href="https://example.com">
                   Services
                   <svg
                     focusable="false"
@@ -73,8 +72,8 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-link-list-item>
-                <dds-link-list-item href="https://example.com">
+                </c4d-link-list-item>
+                <c4d-link-list-item href="https://example.com">
                   Analytics
                   <svg
                     focusable="false"
@@ -89,8 +88,8 @@
                   >
                     <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-link-list-item>
-                <dds-link-list-item href="https://example.com">
+                </c4d-link-list-item>
+                <c4d-link-list-item href="https://example.com">
                   View all products
                   <svg
                     focusable="false"
@@ -107,28 +106,13 @@
                       d="M26 24v4H6V24H4v4H4a2 2 0 002 2H26a2 2 0 002-2h0V24zM26 14L24.59 12.59 17 20.17 17 2 15 2 15 20.17 7.41 12.59 6 14 16 24 26 14z"
                     ></path>
                   </svg>
-                </dds-link-list-item>
-              </dds-link-list>
-              <dds-leadspace-block-cta>
-                <dds-button-group-item href="www.ibm.com" kind="primary">
-                  Click here
-                  <svg
-                    focusable="false"
-                    preserveAspectRatio="xMidYMid meet"
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="currentColor"
-                    aria-hidden="true"
-                    width="20"
-                    height="20"
-                    viewBox="0 0 20 20"
-                    slot="icon"
-                  >
-                    <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-                  </svg>
-                </dds-button-group-item>
-              </dds-leadspace-block-cta>
-            </dds-leadspace-block-content>
-          </dds-leadspace-block>
+                </c4d-link-list-item>
+              </c4d-link-list>
+              <c4d-button href="https://example.com" cta-type="local">
+                Contact sales
+              </c4d-button>
+            </c4d-leadspace-block-content>
+          </c4d-leadspace-block>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html b/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html
index 142f1067aad..61a950130f0 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/leadspace-with-search/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-leadspace-with-search:not(:defined) {
+    cds-leadspace-with-search:not(:defined) {
       display: none;
     }
   </style>
@@ -23,25 +22,22 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace-with-search.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <dds-leadspace-with-search>
-        <dds-leadspace-with-search-heading>Find a product</dds-leadspace-with-search-heading>
-        <dds-leadspace-with-search-content>
-          <dds-leadspace-with-search-content-heading>Innovate like a startup, scale for the enterprise</dds-leadspace-with-search-content-heading>
-          <dds-leadspace-with-search-content-copy
-            >Automate your software release process with continuous
-            delivery (CD)—the most critical part of adopting DevOps.
-            Build, test, and deploy code changes quickly, ensuring
-            software is always ready for deployment.
-          </dds-leadspace-with-search-content-copy>
-        </dds-leadspace-with-search-content>
-        <dds-search-with-typeahead slot='search' leadspace-search><dds-search-with-typeahead/>
-        <dds-hr slot='hr'></dds-hr>
-      </dds-leadspace-with-search>
+      <c4d-leadspace-with-search>
+        <c4d-leadspace-heading>Find a product</cds-leadspace-heading>
+        <c4d-leadspace-with-search-copy
+        >Automate your software release process with continuous
+        delivery (CD)—the most critical part of adopting DevOps.
+        Build, test, and deploy code changes quickly, ensuring
+        software is always ready for deployment.
+      </cds-leadspace-with-search-copy>
+        <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
+        <c4d-hr slot='hr'></cds-hr>
+      </cds-leadspace-with-search>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html b/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html
index 737b5f1e450..0e11c5f5893 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html
+++ b/packages/web-components/examples/codesandbox/components/leadspace-with-search/index.html
@@ -15,23 +15,20 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12">
-          <dds-leadspace-with-search>
-            <dds-leadspace-with-search-heading>Find a product</dds-leadspace-with-search-heading>
-            <dds-leadspace-with-search-content>
-              <dds-leadspace-with-search-content-heading>Innovate like a startup, scale for the enterprise</dds-leadspace-with-search-content-heading>
-              <dds-leadspace-with-search-content-copy
-                >Automate your software release process with continuous
-                delivery (CD)—the most critical part of adopting DevOps.
-                Build, test, and deploy code changes quickly, ensuring
-                software is always ready for deployment.
-              </dds-leadspace-with-search-content-copy>
-            </dds-leadspace-with-search-content>
-            <dds-search-with-typeahead slot='search' leadspace-search><dds-search-with-typeahead/>
-            <dds-hr slot='hr'></dds-hr>
-          </dds-leadspace-with-search>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <c4d-leadspace-with-search>
+            <c4d-leadspace-heading>Find a product</cds-leadspace-heading>
+            <c4d-leadspace-with-search-copy
+            >Automate your software release process with continuous
+            delivery (CD)—the most critical part of adopting DevOps.
+            Build, test, and deploy code changes quickly, ensuring
+            software is always ready for deployment.
+          </cds-leadspace-with-search-copy>
+            <c4d-search-with-typeahead slot='search' leadspace-search><c4d-search-with-typeahead/>
+            <c4d-hr slot='hr'></cds-hr>
+          </cds-leadspace-with-search>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/cdn.html b/packages/web-components/examples/codesandbox/components/leadspace/cdn.html
index fc5644ec77c..d8c9746f31b 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/leadspace/cdn.html
@@ -15,13 +15,10 @@
       rel="stylesheet"
       href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"
     />
-    <link
-      rel="stylesheet"
-      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"
-    />
+    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-leadspace:not(:defined) {
+      cds-leadspace:not(:defined) {
         display: none;
       }
     </style>
@@ -35,19 +32,19 @@
     ></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-8 bx--col-lg-16">
-          <dds-leadspace
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-8 cds--col-lg-16">
+          <cds-leadspace
             size="medium"
             alt="Image text"
             default-src="https://picsum.photos/id/1076/1056/480"
           >
-            <dds-leadspace-heading>Lead space title</dds-leadspace-heading>
+            <cds-leadspace-heading>Lead space title</cds-leadspace-heading>
             Use this area for a short line of copy to support the title
 
-            <dds-button-group slot="action">
-              <dds-button-group-item href="https://example.com">
+            <cds-button-group slot="action">
+              <cds-button-group-item href="https://example.com">
                 Button 1
                 <svg
                   focusable="false"
@@ -64,8 +61,8 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </dds-button-group-item>
-              <dds-button-group-item href="https://example.com">
+              </cds-button-group-item>
+              <cds-button-group-item href="https://example.com">
                 Button 2
                 <svg
                   focusable="false"
@@ -82,37 +79,37 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </dds-button-group-item>
-            </dds-button-group>
+              </cds-button-group-item>
+            </cds-button-group>
 
-            <dds-background-media
+            <cds-background-media
               slot="image"
               alt="Image text"
               default-src="https://picsum.photos/id/1076/1056/480"
               opacity="100"
             >
-              <dds-image-item
+              <cds-image-item
                 media="(min-width: 1312px)"
                 srcset="https://picsum.photos/id/1076/1056/480"
               >
-              </dds-image-item>
-              <dds-image-item
+              </cds-image-item>
+              <cds-image-item
                 media="(min-width: 672px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </dds-image-item>
-              <dds-image-item
+              </cds-image-item>
+              <cds-image-item
                 media="(min-width: 320px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </dds-image-item>
-              <dds-image-item
+              </cds-image-item>
+              <cds-image-item
                 media="(min-width: 0px)"
                 srcset="https://picsum.photos/id/1076/320/370"
               >
-              </dds-image-item>
-            </dds-background-media>
-          </dds-leadspace>
+              </cds-image-item>
+            </cds-background-media>
+          </cds-leadspace>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/index.html b/packages/web-components/examples/codesandbox/components/leadspace/index.html
index 3c6fd676529..6b4c20b239b 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace/index.html
+++ b/packages/web-components/examples/codesandbox/components/leadspace/index.html
@@ -17,26 +17,26 @@
     />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-leadspace:not(:defined) {
+      cds-leadspace:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-8 bx--col-lg-16">
-          <dds-leadspace
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-8 cds--col-lg-16">
+          <cds-leadspace
             size="medium"
             alt="Image text"
             default-src="https://picsum.photos/id/1076/1056/480"
           >
-            <dds-leadspace-heading>Lead space title</dds-leadspace-heading>
+            <cds-leadspace-heading>Lead space title</cds-leadspace-heading>
             Use this area for a short line of copy to support the title
 
-            <dds-button-group slot="action">
-              <dds-button-group-item href="https://example.com">
+            <cds-button-group slot="action">
+              <cds-button-group-item href="https://example.com">
                 Button 1
                 <svg
                   focusable="false"
@@ -53,8 +53,8 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </dds-button-group-item>
-              <dds-button-group-item href="https://example.com">
+              </cds-button-group-item>
+              <cds-button-group-item href="https://example.com">
                 Button 2
                 <svg
                   focusable="false"
@@ -71,37 +71,37 @@
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
                   ></path>
                 </svg>
-              </dds-button-group-item>
-            </dds-button-group>
+              </cds-button-group-item>
+            </cds-button-group>
 
-            <dds-background-media
+            <cds-background-media
               slot="image"
               alt="Image text"
               default-src="https://picsum.photos/id/1076/1056/480"
               opacity="100"
             >
-              <dds-image-item
+              <cds-image-item
                 media="(min-width: 1312px)"
                 srcset="https://picsum.photos/id/1076/1056/480"
               >
-              </dds-image-item>
-              <dds-image-item
+              </cds-image-item>
+              <cds-image-item
                 media="(min-width: 672px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </dds-image-item>
-              <dds-image-item
+              </cds-image-item>
+              <cds-image-item
                 media="(min-width: 320px)"
                 srcset="https://picsum.photos/id/1076/672/400"
               >
-              </dds-image-item>
-              <dds-image-item
+              </cds-image-item>
+              <cds-image-item
                 media="(min-width: 0px)"
                 srcset="https://picsum.photos/id/1076/320/370"
               >
-              </dds-image-item>
-            </dds-background-media>
-          </dds-leadspace>
+              </cds-image-item>
+            </cds-background-media>
+          </cds-leadspace>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/leadspace/src/index.js b/packages/web-components/examples/codesandbox/components/leadspace/src/index.js
index 113aa755f43..727564f2548 100644
--- a/packages/web-components/examples/codesandbox/components/leadspace/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/leadspace/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021, 2023
+ * Copyright IBM Corp. 2021, 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.
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html b/packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html
index b1f61a5a7a0..d5879a354fe 100644
--- a/packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/leaving-ibm/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-leaving-ibm-container:not(:defined) {
+    cds-leaving-ibm-container:not(:defined) {
       display: none;
     }
   </style>
@@ -25,11 +24,11 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leaving-ibm.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-leaving-ibm-container open="true"
-                                 href="https://www.example.com/"></dds-leaving-ibm-container>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-leaving-ibm-container open="true"
+                                 href="https://www.example.com/"></cds-leaving-ibm-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/leaving-ibm/index.html b/packages/web-components/examples/codesandbox/components/leaving-ibm/index.html
index cbdb57cd4d9..9a1a64bf19f 100644
--- a/packages/web-components/examples/codesandbox/components/leaving-ibm/index.html
+++ b/packages/web-components/examples/codesandbox/components/leaving-ibm/index.html
@@ -14,13 +14,13 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-leaving-ibm-container:not(:defined) {
+      cds-leaving-ibm-container:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <dds-leaving-ibm-container open="true" href="https://www.example.com/"></dds-leaving-ibm-container>
+    <cds-leaving-ibm-container open="true" href="https://www.example.com/"></cds-leaving-ibm-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html b/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html
index 3d883f2b209..5963bd94dc7 100644
--- a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/cdn.html
@@ -14,7 +14,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-button-expressive:not(:defined), dds-lightbox-video-player-container:not(:defined) {
+    cds-button-expressive:not(:defined), cds-lightbox-video-player-container:not(:defined) {
       display: none;
     }
   </style>
@@ -23,9 +23,9 @@
 </head>
 <body>
 <div id="app">
-  <dds-button-expressive id="open-modal-btn">Open modal</dds-button-expressive>
+  <cds-button-expressive id="open-modal-btn">Open modal</cds-button-expressive>
 </div>
-<dds-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </dds-lightbox-video-player-container>
+<cds-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </cds-lightbox-video-player-container>
 
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html b/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html
index ef7f8709165..f1687e1e63d 100644
--- a/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html
+++ b/packages/web-components/examples/codesandbox/components/lightbox-media-viewer/index.html
@@ -14,7 +14,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-button-expressive:not(:defined), dds-lightbox-video-player-container:not(:defined) {
+      cds-button:not(:defined), cds-lightbox-video-player-container:not(:defined) {
         display: none;
       }
     </style>
@@ -22,9 +22,9 @@
   </head>
   <body>
     <div id="app">
-      <dds-button-expressive id="open-modal-btn">Open modal</dds-button-expressive>
+      <cds-button id="open-modal-btn">Open modal</cds-button>
     </div>
-    <dds-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </dds-lightbox-video-player-container>
+    <cds-lightbox-video-player-container id="my-video" video-id="1_9h94wo6b"> </cds-lightbox-video-player-container>
 
     <script type="text/javascript">
       document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/cdn.html b/packages/web-components/examples/codesandbox/components/link-list-section/cdn.html
index b1f44ecc031..5c5cff45c59 100644
--- a/packages/web-components/examples/codesandbox/components/link-list-section/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/link-list-section/cdn.html
@@ -12,23 +12,23 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-link-list-section:not(:defined) {
+    cds-link-list-section:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-list-section.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-8 bx--col-lg-12 bx--offset-lg-4">
-      <dds-link-list-section>
-        <dds-link-list-heading>Lorem ipsum dolor sit amet</dds-link-list-heading>
-        <dds-link-list>
-          <dds-link-list-item href="https://example.com">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-8 cds--col-lg-12 cds--offset-lg-4">
+      <cds-link-list-section>
+        <cds-link-list-heading>Lorem ipsum dolor sit amet</cds-link-list-heading>
+        <cds-link-list>
+          <cds-link-list-item href="https://example.com">
             Learn more about Kubernetes
             <svg
               slot="icon"
@@ -43,8 +43,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </cds-link-list-item>
+          <cds-link-list-item href="https://example.com">
             Containerization A Complete Guide
             <svg
               slot="icon"
@@ -59,8 +59,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </cds-link-list-item>
+          <cds-link-list-item href="https://example.com">
             Microservices and containers
             <svg
               slot="icon"
@@ -75,8 +75,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </cds-link-list-item>
+          <cds-link-list-item href="https://example.com">
             Learn more about Kubernetes
             <svg
               slot="icon"
@@ -91,8 +91,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </cds-link-list-item>
+          <cds-link-list-item href="https://example.com">
             Containerization A Complete Guide
             <svg
               slot="icon"
@@ -107,8 +107,8 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </cds-link-list-item>
+          <cds-link-list-item href="https://example.com">
             Microservices and containers
             <svg
               slot="icon"
@@ -123,9 +123,9 @@
             >
               <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
             </svg>
-          </dds-link-list-item>
-        </dds-link-list>
-      </dds-link-list-section>
+          </cds-link-list-item>
+        </cds-link-list>
+      </cds-link-list-section>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-list-section/index.html b/packages/web-components/examples/codesandbox/components/link-list-section/index.html
index 4bf908f7fd4..711d013dc7e 100644
--- a/packages/web-components/examples/codesandbox/components/link-list-section/index.html
+++ b/packages/web-components/examples/codesandbox/components/link-list-section/index.html
@@ -14,20 +14,20 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-link-list-section:not(:defined) {
+      cds-link-list-section:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-8 bx--col-lg-12 bx--offset-lg-4">
-          <dds-link-list-section>
-            <dds-link-list-heading>Lorem ipsum dolor sit amet</dds-link-list-heading>
-            <dds-link-list>
-              <dds-link-list-item href="https://example.com">
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-8 cds--col-lg-12 cds--offset-lg-4">
+          <cds-link-list-section>
+            <cds-link-list-heading>Lorem ipsum dolor sit amet</cds-link-list-heading>
+            <cds-link-list>
+              <cds-link-list-item href="https://example.com">
                 Learn more about Kubernetes
                 <svg
                   slot="icon"
@@ -42,8 +42,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </cds-link-list-item>
+              <cds-link-list-item href="https://example.com">
                 Containerization A Complete Guide
                 <svg
                   slot="icon"
@@ -58,8 +58,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </cds-link-list-item>
+              <cds-link-list-item href="https://example.com">
                 Microservices and containers
                 <svg
                   slot="icon"
@@ -74,8 +74,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </cds-link-list-item>
+              <cds-link-list-item href="https://example.com">
                 Learn more about Kubernetes
                 <svg
                   slot="icon"
@@ -90,8 +90,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </cds-link-list-item>
+              <cds-link-list-item href="https://example.com">
                 Containerization A Complete Guide
                 <svg
                   slot="icon"
@@ -106,8 +106,8 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </cds-link-list-item>
+              <cds-link-list-item href="https://example.com">
                 Microservices and containers
                 <svg
                   slot="icon"
@@ -122,9 +122,9 @@
                 >
                   <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-link-list-item>
-            </dds-link-list>
-          </dds-link-list-section>
+              </cds-link-list-item>
+            </cds-link-list>
+          </cds-link-list-section>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-list/cdn.html b/packages/web-components/examples/codesandbox/components/link-list/cdn.html
index 74a2815e8e4..c187065a2a2 100644
--- a/packages/web-components/examples/codesandbox/components/link-list/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/link-list/cdn.html
@@ -12,10 +12,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-link-list:not(:defined) {
+    cds-link-list:not(:defined) {
       display: none;
     }
   </style>
@@ -23,48 +23,60 @@
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-8 bx--col-lg-4 bx--offset-lg-4">
-      <dds-link-list type="default">
-        <dds-link-list-heading>Tutorial</dds-link-list-heading>
-        <dds-link-list-item-card href="https://example.com">
-          <p>Learn more about Kubernetes</p>
-          <dds-card-footer>
-            <svg
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              slot="icon"
-            >
-              <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-link-list-item-card>
-        <dds-link-list-item-card href="https://example.com">
-          <p>Containerization A Complete Guide</p>
-          <dds-card-footer>
-            <svg
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              fill="currentColor"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-              slot="icon"
-            >
-              <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </dds-card-footer>
-        </dds-link-list-item-card>
-      </dds-link-list>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-8 cds--col-lg-4 cds--offset-lg-4">
+      <c4d-link-list type="default">
+        <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+        <c4d-link-list-item href="https://example.com">
+          Learn more about Kubernetes
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            slot="icon"
+          >
+            <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          </svg>
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
+          Containerization A Complete Guide
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            slot="icon"
+          >
+            <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          </svg>
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
+          Microservices and containers
+          <svg
+            focusable="false"
+            preserveAspectRatio="xMidYMid meet"
+            xmlns="http://www.w3.org/2000/svg"
+            fill="currentColor"
+            aria-hidden="true"
+            width="20"
+            height="20"
+            viewBox="0 0 20 20"
+            slot="icon"
+          >
+            <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          </svg>
+        </c4d-link-list-item>
+      </c4d-link-list>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-list/index.html b/packages/web-components/examples/codesandbox/components/link-list/index.html
index ac3cb015457..5ce8821d8b4 100644
--- a/packages/web-components/examples/codesandbox/components/link-list/index.html
+++ b/packages/web-components/examples/codesandbox/components/link-list/index.html
@@ -14,55 +14,67 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-link-list:not(:defined) {
+      cds-link-list:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-8 bx--col-lg-4 bx--offset-lg-4">
-          <dds-link-list type="default">
-            <dds-link-list-heading>Tutorial</dds-link-list-heading>
-            <dds-link-list-item-card href="https://example.com">
-              <p>Learn more about Kubernetes</p>
-              <dds-card-footer>
-                <svg
-                  focusable="false"
-                  preserveAspectRatio="xMidYMid meet"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  slot="icon"
-                >
-                  <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-                </svg>
-              </dds-card-footer>
-            </dds-link-list-item-card>
-            <dds-link-list-item-card href="https://example.com">
-              <p>Containerization A Complete Guide</p>
-              <dds-card-footer>
-                <svg
-                  focusable="false"
-                  preserveAspectRatio="xMidYMid meet"
-                  xmlns="http://www.w3.org/2000/svg"
-                  fill="currentColor"
-                  aria-hidden="true"
-                  width="20"
-                  height="20"
-                  viewBox="0 0 20 20"
-                  slot="icon"
-                >
-                  <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-                </svg>
-              </dds-card-footer>
-            </dds-link-list-item-card>
-          </dds-link-list>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-8 cds--col-lg-4 cds--offset-lg-4">
+          <c4d-link-list type="default">
+            <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+            <c4d-link-list-item href="https://example.com">
+              Learn more about Kubernetes
+              <svg
+                focusable="false"
+                preserveAspectRatio="xMidYMid meet"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                aria-hidden="true"
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                slot="icon"
+              >
+                <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+              </svg>
+            </c4d-link-list-item>
+            <c4d-link-list-item href="https://example.com">
+              Containerization A Complete Guide
+              <svg
+                focusable="false"
+                preserveAspectRatio="xMidYMid meet"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                aria-hidden="true"
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                slot="icon"
+              >
+                <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+              </svg>
+            </c4d-link-list-item>
+            <c4d-link-list-item href="https://example.com">
+              Microservices and containers
+              <svg
+                focusable="false"
+                preserveAspectRatio="xMidYMid meet"
+                xmlns="http://www.w3.org/2000/svg"
+                fill="currentColor"
+                aria-hidden="true"
+                width="20"
+                height="20"
+                viewBox="0 0 20 20"
+                slot="icon"
+              >
+                <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+              </svg>
+            </c4d-link-list-item>
+          </c4d-link-list>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html b/packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html
index acae22008f3..0e1194ee1da 100644
--- a/packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/link-with-icon/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-link-with-icon:not(:defined) {
+    cds-link-with-icon:not(:defined) {
       display: none;
     }
   </style>
@@ -25,10 +24,10 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-with-icon.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-link-with-icon
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-link-with-icon
         href="https://www.ibm.com/standards/carbon">
         Link text
         <svg
@@ -44,7 +43,7 @@
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-link-with-icon>
+      </cds-link-with-icon>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/link-with-icon/index.html b/packages/web-components/examples/codesandbox/components/link-with-icon/index.html
index 7e93f95cd04..177c0d4c98f 100644
--- a/packages/web-components/examples/codesandbox/components/link-with-icon/index.html
+++ b/packages/web-components/examples/codesandbox/components/link-with-icon/index.html
@@ -13,21 +13,20 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-link-with-icon:not(:defined) {
+    cds-link-with-icon:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-link-with-icon
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-link-with-icon
         href="https://www.ibm.com/standards/carbon">
         Link text
         <svg
@@ -43,7 +42,7 @@
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-link-with-icon>
+      </cds-link-with-icon>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/cdn.html b/packages/web-components/examples/codesandbox/components/locale-modal/cdn.html
index 6edf565dc5d..95d39c4e96f 100644
--- a/packages/web-components/examples/codesandbox/components/locale-modal/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/locale-modal/cdn.html
@@ -147,11 +147,10 @@
   <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-button-expressive:not(:defined), dds-locale-modal-container:not(:defined) {
+    cds-button-expressive:not(:defined), cds-locale-modal-container:not(:defined) {
       display: none;
     }
   </style>
@@ -161,15 +160,15 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/button.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-button-expressive id="open-modal-btn">Open modal
-      </dds-button-expressive>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-button-expressive id="open-modal-btn">Open modal
+      </cds-button-expressive>
     </div>
   </div>
 </div>
-<dds-locale-modal-container id="modal"></dds-locale-modal-container>
+<cds-locale-modal-container id="modal"></cds-locale-modal-container>
 </body>
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/locale-modal/index.html b/packages/web-components/examples/codesandbox/components/locale-modal/index.html
index 0aa1c45a7c2..ffdc8d86f56 100644
--- a/packages/web-components/examples/codesandbox/components/locale-modal/index.html
+++ b/packages/web-components/examples/codesandbox/components/locale-modal/index.html
@@ -147,26 +147,25 @@
   <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-button-expressive:not(:defined), dds-locale-modal-container:not(:defined) {
+    cds-button-expressive:not(:defined), cds-locale-modal-container:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-button-expressive id="open-modal-btn">Open modal
-      </dds-button-expressive>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-button-expressive id="open-modal-btn">Open modal
+      </cds-button-expressive>
     </div>
   </div>
 </div>
-<dds-locale-modal-container id="modal"></dds-locale-modal-container>
+<cds-locale-modal-container id="modal"></cds-locale-modal-container>
 </body>
 <script type="text/javascript">
   document.getElementById('open-modal-btn').addEventListener('click', () => {
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/cdn.html b/packages/web-components/examples/codesandbox/components/logo-grid/cdn.html
index 3035ce410c8..da7d0dadfc1 100644
--- a/packages/web-components/examples/codesandbox/components/logo-grid/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/logo-grid/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-logo-grid:not(:defined) {
+    cds-logo-grid:not(:defined) {
       display: none;
     }
   </style>
@@ -25,50 +24,50 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/logo-grid.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-logo-grid logo-count="3" logo-ratio="2:1">
-        <dds-content-block-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-logo-grid logo-count="3" logo-ratio="2:1">
+        <cds-content-block-heading>
           This is a heading
-        </dds-content-block-heading>
-        <dds-logo-grid-item
+        </cds-content-block-heading>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-      </dds-logo-grid>
+        ></cds-logo-grid-item>
+      </cds-logo-grid>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/logo-grid/index.html b/packages/web-components/examples/codesandbox/components/logo-grid/index.html
index ac2a8282ab2..59c8ef12a64 100644
--- a/packages/web-components/examples/codesandbox/components/logo-grid/index.html
+++ b/packages/web-components/examples/codesandbox/components/logo-grid/index.html
@@ -13,61 +13,60 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-logo-grid:not(:defined) {
+    cds-logo-grid:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-logo-grid logo-count="3" logo-ratio="2:1">
-        <dds-content-block-heading>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-logo-grid logo-count="3" logo-ratio="2:1">
+        <cds-content-block-heading>
           This is a heading
-        </dds-content-block-heading>
-        <dds-logo-grid-item
+        </cds-content-block-heading>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-        <dds-logo-grid-item
+        ></cds-logo-grid-item>
+        <cds-logo-grid-item
           default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
           alt="Alt text"
-        ></dds-logo-grid-item>
-      </dds-logo-grid>
+        ></cds-logo-grid-item>
+      </cds-logo-grid>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html b/packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html
index 50bcc54eb45..a8888571a53 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html
+++ b/packages/web-components/examples/codesandbox/components/masthead-l1/cdn-rtl.html
@@ -12,11 +12,11 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <link rel="stylesheet" href="src/index.scss" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-masthead-composite:not(:defined) {
+    cds-masthead-composite:not(:defined) {
       display: none;
     }
   </style>
@@ -24,11 +24,11 @@
   <script type="module" src="src/index-cdn.js"></script>
 </head>
   <body>
-    <dds-masthead-composite></dds-masthead-composite>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--offset-lg-3 bx--col-lg-13">
+    <cds-masthead-composite></cds-masthead-composite>
+    <main class="cds--content cds-ce-demo--ui-shell-content">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--offset-lg-3 cds--col-lg-13">
             <h2>
               Purpose and function
             </h2>
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html b/packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html
index 6760799d572..4a580f36e96 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/masthead-l1/cdn.html
@@ -12,11 +12,11 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <link rel="stylesheet" href="src/index.scss" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-masthead-composite:not(:defined) {
+    cds-masthead-composite:not(:defined) {
       display: none;
     }
   </style>
@@ -24,11 +24,11 @@
   <script type="module" src="src/index-cdn.js"></script>
 </head>
   <body>
-    <dds-masthead-composite></dds-masthead-composite>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--offset-lg-3 bx--col-lg-13">
+    <cds-masthead-composite></cds-masthead-composite>
+    <main class="cds--content cds-ce-demo--ui-shell-content">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--offset-lg-3 cds--col-lg-13">
             <h2>
               Purpose and function
             </h2>
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/index.html b/packages/web-components/examples/codesandbox/components/masthead-l1/index.html
index 3eaa48b5154..22b2845a8b7 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/index.html
+++ b/packages/web-components/examples/codesandbox/components/masthead-l1/index.html
@@ -14,18 +14,18 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-masthead-composite:not(:defined) {
+      cds-masthead-composite:not(:defined) {
         display: none;
       }
     </style>
     <script type="module" src="src/index.js"></script>
   </head>
   <body>
-    <dds-masthead-composite></dds-masthead-composite>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--offset-lg-3 bx--col-lg-13">
+    <cds-masthead-composite></cds-masthead-composite>
+    <main class="cds--content cds-ce-demo--ui-shell-content">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--offset-lg-3 cds--col-lg-13">
             <h2>
               Purpose and function
             </h2>
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index-cdn.js b/packages/web-components/examples/codesandbox/components/masthead-l1/src/index-cdn.js
index a56096d8f75..d14717589dd 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index-cdn.js
+++ b/packages/web-components/examples/codesandbox/components/masthead-l1/src/index-cdn.js
@@ -59,4 +59,4 @@ const l1Data = {
   ],
 };
 
-document.querySelector('dds-masthead-composite').l1Data = l1Data;
+document.querySelector('cds-masthead-composite').l1Data = l1Data;
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.js b/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.js
index c8ce9ab5641..a77bbd22d98 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.js
@@ -62,4 +62,4 @@ const l1Data = {
   ],
 };
 
-document.querySelector('dds-masthead-composite').l1Data = l1Data;
+document.querySelector('cds-masthead-composite').l1Data = l1Data;
diff --git a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.scss b/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.scss
index ef898fdb19b..7e81870866f 100644
--- a/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.scss
+++ b/packages/web-components/examples/codesandbox/components/masthead-l1/src/index.scss
@@ -21,12 +21,12 @@ body {
 }
 
 @media (min-width: 66rem) {
-  .bx--offset-lg-3 {
+  .cds--offset-lg-3 {
     margin-left: 0;
   }
 }
 
-.bx--content.dds-ce-demo--ui-shell-content {
+.cds--content.cds-ce-demo--ui-shell-content {
   h2 {
     margin: 30px 0;
 
diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html b/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html
index a109ffb3f87..f0d04f50034 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html
+++ b/packages/web-components/examples/codesandbox/components/masthead/cdn-rtl.html
@@ -12,24 +12,31 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-masthead-container:not(:defined) {
+    cds-masthead-container:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/rtl/masthead.rtl.min.js"></script>
   <script src="src/index-cdn.js"></script>
+  <script src="src/ddo.js"></script>
+
+  <!-- IBM Tag Management and Site Analytics -->
+  <script src="//1.www.s81c.com/common/stats/ibm-common.js" async="async" defer></script>
+  <!-- IBM CMaaS -->
+  <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
+
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.rtl.min.js"></script>
 </head>
 <body>
-<dds-masthead-container id="masthead-container"></dds-masthead-container>
-<main class="bx--content dds-ce-demo--ui-shell-content">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--offset-lg-3 bx--col-lg-13">
+<cds-masthead-container id="masthead-container"></cds-masthead-container>
+<main class="cds--content cds-ce-demo--ui-shell-content">
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--offset-lg-3 cds--col-lg-13">
         <h2>
-          Purpose and function
+          L0/Masthead V2 using V2 Translations (RTL)
         </h2>
         <p>
           The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
@@ -67,7 +74,6 @@ <h2>
         </p>
       </div>
     </div>
-  </div>
-</main>
+  </main>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/masthead/cdn.html b/packages/web-components/examples/codesandbox/components/masthead/cdn.html
index 6858b66b2aa..bf4bfcda4f4 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/masthead/cdn.html
@@ -12,24 +12,31 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-masthead-container:not(:defined) {
+    cds-masthead-container:not(:defined) {
       display: none;
     }
   </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/masthead.min.js"></script>
   <script src="src/index-cdn.js"></script>
+  <script src="src/ddo.js"></script>
+
+  <!-- IBM Tag Management and Site Analytics -->
+  <script src="//1.www.s81c.com/common/stats/ibm-common.js" async="async" defer></script>
+  <!-- IBM CMaaS -->
+  <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
+
+  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.min.js"></script>
 </head>
 <body>
-<dds-masthead-container id="masthead-container"></dds-masthead-container>
-<main class="bx--content dds-ce-demo--ui-shell-content">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--offset-lg-3 bx--col-lg-13">
+<cds-masthead-container id="masthead-container"></cds-masthead-container>
+<main class="cds--content cds-ce-demo--ui-shell-content">
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--offset-lg-3 cds--col-lg-13">
         <h2>
-          Purpose and function
+          L0/Masthead V2 using V2 Translations (CDN)
         </h2>
         <p>
           The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
@@ -67,7 +74,6 @@ <h2>
         </p>
       </div>
     </div>
-  </div>
-</main>
+  </main>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/masthead/index.html b/packages/web-components/examples/codesandbox/components/masthead/index.html
index 7484a28007a..803b3692f0c 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/index.html
+++ b/packages/web-components/examples/codesandbox/components/masthead/index.html
@@ -14,20 +14,31 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-masthead-container:not(:defined) {
+      cds-masthead-container:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
+    <script src="src/ddo.js"></script>
+
+    <!-- IBM Tag Management and Site Analytics -->
+    <script src="//1.www.s81c.com/common/stats/ibm-common.js" async="async" defer></script>
+    <!-- IBM CMaaS -->
+    <script src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
   </head>
   <body>
-    <dds-masthead-container id="masthead-container"></dds-masthead-container>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--offset-lg-3 bx--col-lg-13">
+    <cds-masthead-container
+      id="masthead-container"
+      data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2"
+      auth-method="profile-api"
+      has-contact="true"
+    ></cds-masthead-container>
+    <main class="cds--content cds-ce-demo--ui-shell-content">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--offset-lg-3 cds--col-lg-13">
             <h2>
-              Purpose and function
+              L0/Masthead V2 using V2 Translations
             </h2>
             <p>
               The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation framework
diff --git a/packages/web-components/examples/codesandbox/components/masthead/package.json b/packages/web-components/examples/codesandbox/components/masthead/package.json
index cf8bb1caaa9..5ccb1e22b49 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/package.json
+++ b/packages/web-components/examples/codesandbox/components/masthead/package.json
@@ -11,7 +11,7 @@
     "build": "parcel build *.html --no-minify --public-url ./"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
+    "@carbon/ibmdotcom-web-components": "alpha"
   },
   "devDependencies": {
     "@babel/core": "^7.0.0-0",
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js b/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js
new file mode 100644
index 00000000000..5defe6e894e
--- /dev/null
+++ b/packages/web-components/examples/codesandbox/components/masthead/src/ddo.js
@@ -0,0 +1,50 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022
+ *
+ * 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 './index.scss';
+
+window.digitalData = {
+  page: {
+    category: {
+      primaryCategory: '',
+    },
+    pageInfo: {
+      effectiveDate: '06-14-2022',
+      expiryDate: '06-14-2026',
+      language: 'en-au',
+      publishDate: '06-14-2022',
+      publisher: 'IBM Corporation',
+      version: 'Carbon for IBM.com',
+      ibm: {
+        contentDelivery: 'HTML',
+        contentProducer: 'IBM Experience Engine-Digital',
+        country: 'au',
+        industry: 'zz',
+        owner: 'Corporate Webmaster/New York/IBM',
+        siteID: 'GLOBAL',
+        subject: 'IBM Experience Engine-Digital',
+        type: 'zz',
+        messaging: {
+          routing: {
+            focusArea: 'Miscellaneous - Cross IBM - ISV',
+            languageCode: 'en',
+            regionCode: 'AU',
+          },
+          translation: {
+            languageCode: 'en',
+            regionCode: 'AU',
+          },
+        },
+      },
+      hotjar: {
+        enable: false,
+      },
+    },
+  },
+};
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js b/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js
index 826b86921aa..9a5746b81d1 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js
+++ b/packages/web-components/examples/codesandbox/components/masthead/src/index-cdn.js
@@ -1,23 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2022
  *
  * 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 './index.scss';
-
-window.digitalData = {
-  page: {
-    pageInfo: {
-      language: 'en-US',
-      ibm: {
-        country: 'US',
-        siteID: 'IBMTESTWWW',
-      },
-    },
-    isDataLayerReady: true,
-  },
-};
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.js b/packages/web-components/examples/codesandbox/components/masthead/src/index.js
index 173fbed596a..fd05b3c7567 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/masthead/src/index.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * Copyright IBM Corp. 2020, 2022
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -16,16 +16,3 @@ import './index.scss';
  *
  * https://github.com/codesandbox/codesandbox-client/issues/4456
  */
-
-window.digitalData = {
-  page: {
-    pageInfo: {
-      language: 'en-US',
-      ibm: {
-        country: 'US',
-        siteID: 'IBMTESTWWW',
-      },
-    },
-    isDataLayerReady: true,
-  },
-};
diff --git a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss b/packages/web-components/examples/codesandbox/components/masthead/src/index.scss
index c081c586bee..2daeabaec27 100644
--- a/packages/web-components/examples/codesandbox/components/masthead/src/index.scss
+++ b/packages/web-components/examples/codesandbox/components/masthead/src/index.scss
@@ -1,7 +1,7 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2020
+// Copyright IBM Corp. 2020, 2022
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -20,13 +20,12 @@ body {
   padding: calc(#{$spacing-09} + #{mini-units(6)} + 1px) $spacing-09 $spacing-09 $spacing-09;
 }
 
-@media (min-width: 66rem) {
-  .bx--offset-lg-3 {
-    margin-left: 0;
+.cds--content.dds-ce-demo--ui-shell-content {
+  @media (min-width: 66rem) {
+    .cds--offset-lg-3 {
+      margin-left: 0;
+    }
   }
-}
-
-.bx--content.dds-ce-demo--ui-shell-content {
   h2 {
     margin: 30px 0;
 
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html b/packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html
deleted file mode 100644
index 222bac72954..00000000000
--- a/packages/web-components/examples/codesandbox/components/pictogram-item/cdn.html
+++ /dev/null
@@ -1,74 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-pictogram-item:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/pictogram-item.min.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-8 bx--col-lg-12 bx--offset-lg-3">
-      <dds-pictogram-item>
-        <svg
-          slot="pictogram"
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="currentColor"
-          data-autoid="dds--pictogram-item__pictogram"
-          aria-label="Pictogram description"
-          width="48"
-          height="48"
-          viewBox="0 0 48 48"
-          role="img"
-          class="bx--pictogram-item__pictogram"
-        >
-          <path
-            fill="none"
-            stroke-linejoin="round"
-            stroke-miterlimit="10"
-            stroke-width=".72"
-            d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
-          ></path>
-        </svg>
-        <dds-content-item-heading>Lorem ipsum dolor sit</dds-content-item-heading>
-        <dds-content-item-copy
-        >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ut enim ad minim veniam</dds-content-item-copy
-        >
-        <dds-link-with-icon slot="footer">
-          Lorem ipsum dolor
-          <svg
-            slot="icon"
-            focusable="false"
-            preserveAspectRatio="xMidYMid meet"
-            xmlns="http://www.w3.org/2000/svg"
-            aria-hidden="true"
-            width="20"
-            height="20"
-            viewBox="0 0 20 20"
-          >
-            <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-          </svg>
-        </dds-link-with-icon>
-      </dds-pictogram-item>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components/pictogram-item/index.html
deleted file mode 100644
index 32d84063ebe..00000000000
--- a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html
+++ /dev/null
@@ -1,73 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <style type="text/css">
-      /* Suppress custom element until styles are loaded */
-      dds-pictogram-item:not(:defined) {
-        display: none;
-      }
-    </style>
-    <script src="src/index.js"></script>
-  </head>
-  <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-8 bx--col-lg-12 bx--offset-lg-3">
-          <dds-pictogram-item>
-            <svg
-              slot="pictogram"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              stroke="currentColor"
-              data-autoid="dds--pictogram-item__pictogram"
-              aria-label="Pictogram description"
-              width="48"
-              height="48"
-              viewBox="0 0 48 48"
-              role="img"
-              class="bx--pictogram-item__pictogram"
-            >
-              <path
-                fill="none"
-                stroke-linejoin="round"
-                stroke-miterlimit="10"
-                stroke-width=".72"
-                d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
-              ></path>
-            </svg>
-            <dds-content-item-heading>Lorem ipsum dolor sit</dds-content-item-heading>
-            <dds-content-item-copy
-              >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-              aliqua. Ut enim ad minim veniam</dds-content-item-copy
-            >
-            <dds-link-with-icon slot="footer">
-              Lorem ipsum dolor
-              <svg
-                slot="icon"
-                focusable="false"
-                preserveAspectRatio="xMidYMid meet"
-                xmlns="http://www.w3.org/2000/svg"
-                aria-hidden="true"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-              >
-                <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-              </svg>
-            </dds-link-with-icon>
-          </dds-pictogram-item>
-        </div>
-      </div>
-    </div>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/package.json b/packages/web-components/examples/codesandbox/components/pictogram-item/package.json
deleted file mode 100644
index 98cec88a1c1..00000000000
--- a/packages/web-components/examples/codesandbox/components/pictogram-item/package.json
+++ /dev/null
@@ -1,24 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-pictogram-item-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.14.3",
-    "@babel/plugin-transform-runtime": "^7.14.3",
-    "carbon-components": "^10.36.0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2",
-    "sass": "^1.32.13"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json b/packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/pictogram-item/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js b/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js
deleted file mode 100644
index 25f6474410b..00000000000
--- a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.js
+++ /dev/null
@@ -1,11 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/pictogram-item/index.js';
-import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss b/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss
deleted file mode 100644
index 482728f8cc5..00000000000
--- a/packages/web-components/examples/codesandbox/components/pictogram-item/src/index.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// @license
-//
-// 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.
-//
-
-// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles
-$feature-flags: (
-  enable-css-custom-properties: true,
-  grid-columns-16: true,
-);
-
-@import 'carbon-components/scss/globals/grid/grid';
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html b/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html
index 6bec2a77ae7..a47f73533dc 100644
--- a/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/pricing-table/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-pricing-table:not(:defined) {
+    cds-pricing-table:not(:defined) {
       display: none;
     }
 
@@ -27,84 +26,84 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/pricing-table.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-pricing-table highlight-column="2" highlight-label="Featured">
-        <dds-pricing-table-head>
-          <dds-pricing-table-header-row>
-            <dds-pricing-table-header-cell type="simple">Optional table header</dds-pricing-table-header-cell>
-            <dds-pricing-table-header-cell>
-              <dds-pricing-table-header-cell-headline>Variation 1</dds-pricing-table-header-cell-headline>
-              <dds-pricing-table-header-cell-caption>Starting at $X.XX per user</dds-pricing-table-header-cell-caption>
-              <dds-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</dds-pricing-table-header-cell-tag>
-              <dds-pricing-table-header-cell-description>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-pricing-table highlight-column="2" highlight-label="Featured">
+        <cds-pricing-table-head>
+          <cds-pricing-table-header-row>
+            <cds-pricing-table-header-cell type="simple">Optional table header</cds-pricing-table-header-cell>
+            <cds-pricing-table-header-cell>
+              <cds-pricing-table-header-cell-headline>Variation 1</cds-pricing-table-header-cell-headline>
+              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
+              <cds-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</cds-pricing-table-header-cell-tag>
+              <cds-pricing-table-header-cell-description>
                 Lorem ipsum dolor sit amet consectetur.
                 <bx-unordered-list>
                   <bx-list-item>Lorem ipsum dolor</bx-list-item>
                   <bx-list-item>sit amet</bx-list-item>
                   <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
                 </bx-unordered-list>
-              </dds-pricing-table-header-cell-description>
-              <dds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</dds-pricing-table-header-cell-cta>
-            </dds-pricing-table-header-cell>
-            <dds-pricing-table-header-cell>
-              <dds-pricing-table-header-cell-headline>Variation 2</dds-pricing-table-header-cell-headline>
-              <dds-pricing-table-header-cell-caption>Starting at $X.XX per user</dds-pricing-table-header-cell-caption>
-              <dds-pricing-table-header-cell-description>
+              </cds-pricing-table-header-cell-description>
+              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
+            </cds-pricing-table-header-cell>
+            <cds-pricing-table-header-cell>
+              <cds-pricing-table-header-cell-headline>Variation 2</cds-pricing-table-header-cell-headline>
+              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
+              <cds-pricing-table-header-cell-description>
                 Lorem ipsum dolor sit amet consectetur.
                 <bx-unordered-list>
                   <bx-list-item>Lorem ipsum dolor</bx-list-item>
                   <bx-list-item>sit amet</bx-list-item>
                   <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
                 </bx-unordered-list>
-              </dds-pricing-table-header-cell-description>
-              <dds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</dds-pricing-table-header-cell-cta>
-            </dds-pricing-table-header-cell>
-          </dds-pricing-table-header-row>
-        </dds-pricing-table-head>
-        <dds-pricing-table-body>
-          <dds-pricing-table-row>
-            <dds-pricing-table-header-cell scope="row">Row 1</dds-pricing-table-header-cell>
-            <dds-pricing-table-cell icon="checkmark">
-              <dds-pricing-table-cell-annotation>
+              </cds-pricing-table-header-cell-description>
+              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
+            </cds-pricing-table-header-cell>
+          </cds-pricing-table-header-row>
+        </cds-pricing-table-head>
+        <cds-pricing-table-body>
+          <cds-pricing-table-row>
+            <cds-pricing-table-header-cell scope="row">Row 1</cds-pricing-table-header-cell>
+            <cds-pricing-table-cell icon="checkmark">
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-            <dds-pricing-table-cell>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+            <cds-pricing-table-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-              <dds-pricing-table-cell-annotation>
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-          </dds-pricing-table-row>
-          <dds-pricing-table-row>
-            <dds-pricing-table-header-cell scope="row">Row 2</dds-pricing-table-header-cell>
-            <dds-pricing-table-cell icon="checkmark">
-            </dds-pricing-table-cell>
-            <dds-pricing-table-cell>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+          </cds-pricing-table-row>
+          <cds-pricing-table-row>
+            <cds-pricing-table-header-cell scope="row">Row 2</cds-pricing-table-header-cell>
+            <cds-pricing-table-cell icon="checkmark">
+            </cds-pricing-table-cell>
+            <cds-pricing-table-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-pricing-table-cell>
-          </dds-pricing-table-row>
-          <dds-pricing-table-row>
-            <dds-pricing-table-header-cell scope="row">Row 3</dds-pricing-table-header-cell>
-            <dds-pricing-table-cell>
-              <dds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+          </cds-pricing-table-row>
+          <cds-pricing-table-row>
+            <cds-pricing-table-header-cell scope="row">Row 3</cds-pricing-table-header-cell>
+            <cds-pricing-table-cell>
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-            <dds-pricing-table-cell>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+            <cds-pricing-table-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-              <dds-pricing-table-cell-annotation>
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-          </dds-pricing-table-row>
-        </dds-pricing-table-body>
-      </dds-pricing-table>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+          </cds-pricing-table-row>
+        </cds-pricing-table-body>
+      </cds-pricing-table>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/pricing-table/index.html b/packages/web-components/examples/codesandbox/components/pricing-table/index.html
index fbbf5544033..8afd49b878f 100644
--- a/packages/web-components/examples/codesandbox/components/pricing-table/index.html
+++ b/packages/web-components/examples/codesandbox/components/pricing-table/index.html
@@ -11,11 +11,9 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
     /* Suppress custom element until styles are loaded */
-    dds-pricing-table:not(:defined) {
+    cds-pricing-table:not(:defined) {
       display: none;
     }
 
@@ -26,84 +24,84 @@
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-pricing-table highlight-column="2" highlight-label="Featured">
-        <dds-pricing-table-head>
-          <dds-pricing-table-header-row>
-            <dds-pricing-table-header-cell type="simple">Optional table header</dds-pricing-table-header-cell>
-            <dds-pricing-table-header-cell>
-              <dds-pricing-table-header-cell-headline>Variation 1</dds-pricing-table-header-cell-headline>
-              <dds-pricing-table-header-cell-caption>Starting at $X.XX per user</dds-pricing-table-header-cell-caption>
-              <dds-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</dds-pricing-table-header-cell-tag>
-              <dds-pricing-table-header-cell-description>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-pricing-table highlight-column="2" highlight-label="Featured">
+        <cds-pricing-table-head>
+          <cds-pricing-table-header-row>
+            <cds-pricing-table-header-cell type="simple">Optional table header</cds-pricing-table-header-cell>
+            <cds-pricing-table-header-cell>
+              <cds-pricing-table-header-cell-headline>Variation 1</cds-pricing-table-header-cell-headline>
+              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
+              <cds-pricing-table-header-cell-tag href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Merchandising</cds-pricing-table-header-cell-tag>
+              <cds-pricing-table-header-cell-description>
                 Lorem ipsum dolor sit amet consectetur.
                 <bx-unordered-list>
                   <bx-list-item>Lorem ipsum dolor</bx-list-item>
                   <bx-list-item>sit amet</bx-list-item>
                   <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
                 </bx-unordered-list>
-              </dds-pricing-table-header-cell-description>
-              <dds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</dds-pricing-table-header-cell-cta>
-            </dds-pricing-table-header-cell>
-            <dds-pricing-table-header-cell>
-              <dds-pricing-table-header-cell-headline>Variation 2</dds-pricing-table-header-cell-headline>
-              <dds-pricing-table-header-cell-caption>Starting at $X.XX per user</dds-pricing-table-header-cell-caption>
-              <dds-pricing-table-header-cell-description>
+              </cds-pricing-table-header-cell-description>
+              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
+            </cds-pricing-table-header-cell>
+            <cds-pricing-table-header-cell>
+              <cds-pricing-table-header-cell-headline>Variation 2</cds-pricing-table-header-cell-headline>
+              <cds-pricing-table-header-cell-caption>Starting at $X.XX per user</cds-pricing-table-header-cell-caption>
+              <cds-pricing-table-header-cell-description>
                 Lorem ipsum dolor sit amet consectetur.
                 <bx-unordered-list>
                   <bx-list-item>Lorem ipsum dolor</bx-list-item>
                   <bx-list-item>sit amet</bx-list-item>
                   <bx-list-item>consectetur retention adispiscing elit sed do eiusm Eiusmod tempor</bx-list-item>
                 </bx-unordered-list>
-              </dds-pricing-table-header-cell-description>
-              <dds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</dds-pricing-table-header-cell-cta>
-            </dds-pricing-table-header-cell>
-          </dds-pricing-table-header-row>
-        </dds-pricing-table-head>
-        <dds-pricing-table-body>
-          <dds-pricing-table-row>
-            <dds-pricing-table-header-cell scope="row">Row 1</dds-pricing-table-header-cell>
-            <dds-pricing-table-cell icon="checkmark">
-              <dds-pricing-table-cell-annotation>
+              </cds-pricing-table-header-cell-description>
+              <cds-pricing-table-header-cell-cta cta-type="local" href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/">Call to action</cds-pricing-table-header-cell-cta>
+            </cds-pricing-table-header-cell>
+          </cds-pricing-table-header-row>
+        </cds-pricing-table-head>
+        <cds-pricing-table-body>
+          <cds-pricing-table-row>
+            <cds-pricing-table-header-cell scope="row">Row 1</cds-pricing-table-header-cell>
+            <cds-pricing-table-cell icon="checkmark">
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-            <dds-pricing-table-cell>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+            <cds-pricing-table-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-              <dds-pricing-table-cell-annotation>
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-          </dds-pricing-table-row>
-          <dds-pricing-table-row>
-            <dds-pricing-table-header-cell scope="row">Row 2</dds-pricing-table-header-cell>
-            <dds-pricing-table-cell icon="checkmark">
-            </dds-pricing-table-cell>
-            <dds-pricing-table-cell>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+          </cds-pricing-table-row>
+          <cds-pricing-table-row>
+            <cds-pricing-table-header-cell scope="row">Row 2</cds-pricing-table-header-cell>
+            <cds-pricing-table-cell icon="checkmark">
+            </cds-pricing-table-cell>
+            <cds-pricing-table-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-pricing-table-cell>
-          </dds-pricing-table-row>
-          <dds-pricing-table-row>
-            <dds-pricing-table-header-cell scope="row">Row 3</dds-pricing-table-header-cell>
-            <dds-pricing-table-cell>
-              <dds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+          </cds-pricing-table-row>
+          <cds-pricing-table-row>
+            <cds-pricing-table-header-cell scope="row">Row 3</cds-pricing-table-header-cell>
+            <cds-pricing-table-cell>
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-            <dds-pricing-table-cell>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+            <cds-pricing-table-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-              <dds-pricing-table-cell-annotation>
+              <cds-pricing-table-cell-annotation>
                 Sed quis neque ultrices, convallis augue non, scelerisque massa.
-              </dds-pricing-table-cell-annotation>
-            </dds-pricing-table-cell>
-          </dds-pricing-table-row>
-        </dds-pricing-table-body>
-      </dds-pricing-table>
+              </cds-pricing-table-cell-annotation>
+            </cds-pricing-table-cell>
+          </cds-pricing-table-row>
+        </cds-pricing-table-body>
+      </cds-pricing-table>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/quote/cdn.html b/packages/web-components/examples/codesandbox/components/quote/cdn.html
index fbf660bafd8..9a36d3ba789 100644
--- a/packages/web-components/examples/codesandbox/components/quote/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/quote/cdn.html
@@ -12,32 +12,32 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-quote:not(:defined) {
+    cds-quote:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/quote.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-8 bx--col-lg-8 bx--offset-lg-4">
-      <dds-quote color-scheme="regular">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-8 cds--col-lg-8 cds--offset-lg-4">
+      <cds-quote color-scheme="regular">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem.
         Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.
-        <dds-quote-source-heading>
+        <cds-quote-source-heading>
           Lorem ipsum dolor sit amet
-        </dds-quote-source-heading>
-        <dds-quote-source-copy>
+        </cds-quote-source-heading>
+        <cds-quote-source-copy>
           consectetur adipiscing elit
-        </dds-quote-source-copy>
-        <dds-quote-source-bottom-copy>
+        </cds-quote-source-copy>
+        <cds-quote-source-bottom-copy>
           IBM Cloud
-        </dds-quote-source-bottom-copy>
-        <dds-link-with-icon slot="footer" href="https://example.com">
+        </cds-quote-source-bottom-copy>
+        <cds-link-with-icon slot="footer" href="https://example.com">
           Link with Icon
           <svg
             slot="icon"
@@ -52,8 +52,8 @@
           >
             <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
           </svg>
-        </dds-link-with-icon>
-      </dds-quote>
+        </cds-link-with-icon>
+      </cds-quote>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/quote/index.html b/packages/web-components/examples/codesandbox/components/quote/index.html
index 969a69d2275..d1d3aa45c74 100644
--- a/packages/web-components/examples/codesandbox/components/quote/index.html
+++ b/packages/web-components/examples/codesandbox/components/quote/index.html
@@ -15,38 +15,25 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-8 bx--col-lg-8 bx--offset-lg-4">
-          <dds-quote color-scheme="regular">
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-8 cds--col-lg-8 cds--offset-lg-4">
+          <c4d-quote color-scheme="regular">
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem.
             Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.
-            <dds-quote-source-heading>
+            <c4d-quote-source-heading>
               Lorem ipsum dolor sit amet
-            </dds-quote-source-heading>
-            <dds-quote-source-copy>
+            </c4d-quote-source-heading>
+            <c4d-quote-source-copy>
               consectetur adipiscing elit
-            </dds-quote-source-copy>
-            <dds-quote-source-bottom-copy>
+            </c4d-quote-source-copy>
+            <c4d-quote-source-bottom-copy>
               IBM Cloud
-            </dds-quote-source-bottom-copy>
-            <dds-quote-link-with-icon slot="footer" href="https://example.com">
+            </c4d-quote-source-bottom-copy>
+            <c4d-quote-link-with-icon slot="footer" href="https://example.com" cta-type="local">
               Link with Icon
-              <svg
-                slot="icon"
-                focusable="false"
-                preserveAspectRatio="xMidYMid meet"
-                xmlns="http://www.w3.org/2000/svg"
-                fill="currentColor"
-                aria-hidden="true"
-                width="20"
-                height="20"
-                viewBox="0 0 20 20"
-              >
-                <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-              </svg>
-            </dds-quote-link-with-icon>
-          </dds-quote>
+            </c4d-quote-link-with-icon>
+          </c4d-quote>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html b/packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html
index 26251b78e24..1dd49c352cc 100644
--- a/packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/scroll-animations/cdn.html
@@ -15,14 +15,14 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/scroll-animations.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-scroll-animations:not(:defined) {
+    cds-scroll-animations:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/scroll-animations.min.js"></script>
 </head>
 <body>
-<dds-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
+<cds-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
   <h1>Hello World! 👋</h1>
   <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
@@ -66,6 +66,6 @@ <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
   <h1>This is extra content so we can scroll!</h1>
-</dds-scroll-animations>
+</cds-scroll-animations>
 </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/scroll-animations/index.html b/packages/web-components/examples/codesandbox/components/scroll-animations/index.html
index a117352702b..2cfdc78410d 100644
--- a/packages/web-components/examples/codesandbox/components/scroll-animations/index.html
+++ b/packages/web-components/examples/codesandbox/components/scroll-animations/index.html
@@ -14,14 +14,14 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-scroll-animations:not(:defined) {
+      cds-scroll-animations:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <dds-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
+    <cds-scroll-animations animation="fade" selector-targets="h1" keep-animation="true">
       <h1>Hello World! 👋</h1>
       <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
@@ -65,6 +65,6 @@ <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
       <h1>This is extra content so we can scroll!</h1>
-    </dds-scroll-animations>
+    </cds-scroll-animations>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html b/packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html
index 1a7f34d534f..1c72d2339c1 100644
--- a/packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/search-with-typeahead/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-search-with-typeahead:not(:defined) {
+    cds-search-with-typeahead:not(:defined) {
       display: none;
     }
   </style>
@@ -23,13 +22,13 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/search-with-typeahead.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <dds-search-with-typeahead active>
-      </dds-search-with-typeahead>
+      <cds-search-with-typeahead active>
+      </cds-search-with-typeahead>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html b/packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html
index 1b90beb5c8c..75143d4c7aa 100644
--- a/packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html
+++ b/packages/web-components/examples/codesandbox/components/search-with-typeahead/index.html
@@ -15,10 +15,10 @@
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-12">
-          <dds-search-with-typeahead></dds-search-with-typeahead>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-12">
+          <cds-search-with-typeahead></cds-search-with-typeahead>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/cdn.html b/packages/web-components/examples/codesandbox/components/structured-list/cdn.html
index c082d46cccb..58971f426a4 100644
--- a/packages/web-components/examples/codesandbox/components/structured-list/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/structured-list/cdn.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-structured-list:not(:defined) {
+    cds-structured-list:not(:defined) {
       display: none;
     }
 
@@ -27,69 +26,69 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/structured-list.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-structured-list>
-        <dds-structured-list-head>
-          <dds-structured-list-header-row>
-            <dds-structured-list-header-cell>Column A</dds-structured-list-header-cell>
-            <dds-structured-list-header-cell>Column B</dds-structured-list-header-cell>
-            <dds-structured-list-header-cell>Column C</dds-structured-list-header-cell>
-            <dds-structured-list-header-cell>Column D</dds-structured-list-header-cell>
-          </dds-structured-list-header-row>
-        </dds-structured-list-head>
-        <dds-structured-list-body>
-          <dds-structured-list-row>
-            <dds-structured-list-cell tooltip="Tooltip text">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-structured-list>
+        <cds-structured-list-head>
+          <cds-structured-list-header-row>
+            <cds-structured-list-header-cell>Column A</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>Column B</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>Column C</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>Column D</cds-structured-list-header-cell>
+          </cds-structured-list-header-row>
+        </cds-structured-list-head>
+        <cds-structured-list-body>
+          <cds-structured-list-row>
+            <cds-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell icon="checkmark">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </dds-structured-list-cell>
-            <dds-structured-list-celltags="Tag 1, Secondary Tag, Other">
+            </cds-structured-list-cell>
+            <cds-structured-list-celltags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-celltags=>
-            <dds-structured-list-cell>
+            </cds-structured-list-celltags=>
+            <cds-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-cell tooltip="Tooltip text">
+            </cds-structured-list-cell>
+          </cds-structured-list-row>
+          <cds-structured-list-row>
+            <cds-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell icon="checkmark">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </dds-structured-list-cell>
-            <dds-structured-list-celltags="Tag 1, Secondary Tag, Other">
+            </cds-structured-list-cell>
+            <cds-structured-list-celltags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-celltags=>
-            <dds-structured-list-cell>
+            </cds-structured-list-celltags=>
+            <cds-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-cell tooltip="Tooltip text">
+            </cds-structured-list-cell>
+          </cds-structured-list-row>
+          <cds-structured-list-row>
+            <cds-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell icon="checkmark">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </dds-structured-list-cell>
-            <dds-structured-list-celltags="Tag 1, Secondary Tag, Other">
+            </cds-structured-list-cell>
+            <cds-structured-list-celltags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-celltags=>
-            <dds-structured-list-cell>
+            </cds-structured-list-celltags=>
+            <cds-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-        </dds-structured-list-body>
-      </dds-structured-list>
+            </cds-structured-list-cell>
+          </cds-structured-list-row>
+        </cds-structured-list-body>
+      </cds-structured-list>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/structured-list/index.html b/packages/web-components/examples/codesandbox/components/structured-list/index.html
index 2be9af111b1..414e5eb96c2 100644
--- a/packages/web-components/examples/codesandbox/components/structured-list/index.html
+++ b/packages/web-components/examples/codesandbox/components/structured-list/index.html
@@ -11,11 +11,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-structured-list:not(:defined) {
+    cds-structured-list:not(:defined) {
       display: none;
     }
 
@@ -26,69 +25,69 @@
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-structured-list>
-        <dds-structured-list-head>
-          <dds-structured-list-header-row>
-            <dds-structured-list-header-cell>Column A</dds-structured-list-header-cell>
-            <dds-structured-list-header-cell>Column B</dds-structured-list-header-cell>
-            <dds-structured-list-header-cell>Column C</dds-structured-list-header-cell>
-            <dds-structured-list-header-cell>Column D</dds-structured-list-header-cell>
-          </dds-structured-list-header-row>
-        </dds-structured-list-head>
-        <dds-structured-list-body>
-          <dds-structured-list-row>
-            <dds-structured-list-cell tooltip="Tooltip text">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
+      <cds-structured-list>
+        <cds-structured-list-head>
+          <cds-structured-list-header-row>
+            <cds-structured-list-header-cell>Column A</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>Column B</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>Column C</cds-structured-list-header-cell>
+            <cds-structured-list-header-cell>Column D</cds-structured-list-header-cell>
+          </cds-structured-list-header-row>
+        </cds-structured-list-head>
+        <cds-structured-list-body>
+          <cds-structured-list-row>
+            <cds-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell icon="checkmark">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell>
+            </cds-structured-list-cell>
+            <cds-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-cell tooltip="Tooltip text">
+            </cds-structured-list-cell>
+          </cds-structured-list-row>
+          <cds-structured-list-row>
+            <cds-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell icon="checkmark">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell>
+            </cds-structured-list-cell>
+            <cds-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-cell tooltip="Tooltip text">
+            </cds-structured-list-cell>
+          </cds-structured-list-row>
+          <cds-structured-list-row>
+            <cds-structured-list-cell tooltip="Tooltip text">
               Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell icon="checkmark">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell icon="checkmark">
               Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
+            </cds-structured-list-cell>
+            <cds-structured-list-cell tags="Tag 1, Secondary Tag, Other">
               Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-            <dds-structured-list-cell>
+            </cds-structured-list-cell>
+            <cds-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
               augue. Aenean posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-        </dds-structured-list-body>
-      </dds-structured-list>
+            </cds-structured-list-cell>
+          </cds-structured-list-row>
+        </cds-structured-list-body>
+      </cds-structured-list>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html b/packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html
index 5b035ab770e..03f9bcf94c8 100644
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/table-of-contents/cdn.html
@@ -13,13 +13,11 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <link rel="stylesheet"
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/table-of-contents.css"/>
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-table-of-contents:not(:defined) {
+    cds-table-of-contents:not(:defined) {
       display: none;
     }
 
@@ -32,11 +30,11 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/table-of-contents.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-8 bx--col-lg-16">
-      <dds-table-of-contents>
-        <div class="bx--tableofcontents__contents">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-8 cds--col-lg-16">
+      <cds-table-of-contents>
+        <div class="cds--tableofcontents__contents">
           <a name="1" data-title="Section - 1"></a>
           <h3>Section - 1</h3>
           <p>
@@ -184,7 +182,7 @@ <h3>Section - 7</h3>
             auctor augue.
           </p>
         </div>
-      </dds-table-of-contents>
+      </cds-table-of-contents>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/index.html b/packages/web-components/examples/codesandbox/components/table-of-contents/index.html
index c9e993a31a6..b5dc5d48924 100644
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/index.html
+++ b/packages/web-components/examples/codesandbox/components/table-of-contents/index.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-table-of-contents:not(:defined) {
+    cds-table-of-contents:not(:defined) {
       display: none;
     }
 
@@ -31,8 +30,8 @@
       padding: 2rem 0;
     }
 
-    dds-carousel {
-      --dds--carousel--overflow-hint-size: 0;
+    cds-carousel {
+      --cds--carousel--overflow-hint-size: 0;
       padding: 2rem 0;
     }
   </style>
@@ -44,11 +43,11 @@
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-8 bx--col-lg-16">
-      <dds-table-of-contents>
-        <div class="bx--tableofcontents__contents">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-8 cds--col-lg-16">
+      <cds-table-of-contents>
+        <div class="cds--tableofcontents__contents">
           <a name="1" data-title="Section - 1"></a>
           <h3>Section - 1</h3>
           <p>
@@ -70,12 +69,12 @@ <h3>Section - 1</h3>
             auctor augue.
           </p>
 
-          <dds-carousel>
-            <dds-card href="https://example.com">
-              <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+          <cds-carousel>
+            <cds-card href="https://example.com">
+              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est.
-              <dds-card-footer>
+              <cds-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -89,14 +88,14 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-card>
-            <dds-card href="https://example.com">
-              <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+              </cds-card-footer>
+            </cds-card>
+            <cds-card href="https://example.com">
+              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-              <dds-card-footer>
+              <cds-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -110,13 +109,13 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-card>
-            <dds-card href="https://example.com">
-              <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+              </cds-card-footer>
+            </cds-card>
+            <cds-card href="https://example.com">
+              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est.
-              <dds-card-footer>
+              <cds-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -130,14 +129,14 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-card>
-            <dds-card href="https://example.com">
-              <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+              </cds-card-footer>
+            </cds-card>
+            <cds-card href="https://example.com">
+              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est. Mauris iaculis eget dolor nec hendrerit.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-              <dds-card-footer>
+              <cds-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -151,13 +150,13 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-card>
-            <dds-card href="https://example.com">
-              <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+              </cds-card-footer>
+            </cds-card>
+            <cds-card href="https://example.com">
+              <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est.
-              <dds-card-footer>
+              <cds-card-footer>
                 <svg
                   slot="icon"
                   focusable="false"
@@ -171,9 +170,9 @@ <h3>Section - 1</h3>
                   <path
                     d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                 </svg>
-              </dds-card-footer>
-            </dds-card>
-          </dds-carousel>
+              </cds-card-footer>
+            </cds-card>
+          </cds-carousel>
 
           <a name="2" data-title="Section - 2"></a>
           <h3>Section - 2</h3>
@@ -196,9 +195,9 @@ <h3>Section - 2</h3>
             auctor augue.
           </p>
 
-          <dds-video-cta-container>
-            <dds-text-cta cta-type="video" href="1_9h94wo6b"></dds-text-cta>
-          </dds-video-cta-container>
+          <cds-video-cta-container>
+            <cds-text-cta cta-type="video" href="1_9h94wo6b"></cds-text-cta>
+          </cds-video-cta-container>
 
           <a name="3" data-title="Section - 3"></a>
           <h3>Section - 3</h3>
@@ -245,9 +244,9 @@ <h3>Section - 3</h3>
                 </li>
                 <li>Mauris elementum massa</li>
               </ul>
-              <dds-text-cta cta-type="local" href="#!" icon-placement="right">
+              <cds-text-cta cta-type="local" href="#!" icon-placement="right">
                 Call To Action
-              </dds-text-cta>
+              </cds-text-cta>
             </caem-accordion-item>
             <caem-accordion-item title-text="Accordion 2">
               <p>
@@ -280,7 +279,7 @@ <h3>Section - 4</h3>
             auctor augue.
           </p>
 
-          <dds-video-player-container video-id="1_9h94wo6b"></dds-video-player-container>
+          <cds-video-player-container video-id="1_9h94wo6b"></cds-video-player-container>
 
           <a name="5" data-title="Section - 5"></a>
           <h3>Section - 5</h3>
@@ -345,7 +344,7 @@ <h3>Section - 7</h3>
             auctor augue.
           </p>
         </div>
-      </dds-table-of-contents>
+      </cds-table-of-contents>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss b/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss
index 5d95f9e8720..eaed609a2ef 100644
--- a/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss
+++ b/packages/web-components/examples/codesandbox/components/table-of-contents/src/index.scss
@@ -21,6 +21,6 @@ body {
 }
 
 h3 {
-  padding-top: rem(16px);
-  padding-bottom: rem(32px);
+  padding-top: $spacing-05;
+  padding-bottom: $spacing-07;
 }
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html b/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
index 065c5e616a4..6ec6433a6c1 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/cdn.html
@@ -10,10 +10,10 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    dds-tabs-extended-media:not(:defined) {
+    c4d-tabs-extended-media:not(:defined) {
       display: none;
     }
   </style>
@@ -21,75 +21,75 @@
 </head>
 <body>
 <div id="app">
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-        <dds-tabs-extended-media>
-          <dds-content-section-heading>Section heading</dds-content-section-heading>
-          <dds-tab label="First tab">
-            <dds-content-item-horizontal-media align="left">
-              <dds-image
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+        <c4d-tabs-extended-media>
+          <c4d-content-section-heading>Section heading</c4d-content-section-heading>
+          <c4d-tab label="First tab">
+            <c4d-content-item-row-media align="left">
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-              </dds-image>
-              <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-              <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              </c4d-image>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                 dolor nec hendrerit. Phasellus at elit sollicitudin.
-              </dds-content-item-horizontal-media-copy>
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-media-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-item-horizontal-media>
-          </dds-tab>
-          <dds-tab label="Second tab">
-            <dds-content-item-horizontal-media align="left">
-              <dds-image
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row-media>
+          </c4d-tab>
+          <c4d-tab label="Second tab">
+            <c4d-content-item-row-media align="left">
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-              </dds-image>
-              <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-              <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              </c4d-image>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                 dolor nec hendrerit. Phasellus at elit sollicitudin.
-              </dds-content-item-horizontal-media-copy>
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-media-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-item-horizontal-media>
-          </dds-tab>
-          <dds-tab label="Third tab">
-            <dds-content-item-horizontal-media align="left">
-              <dds-image
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row-media>
+          </c4d-tab>
+          <c4d-tab label="Third tab">
+            <c4d-content-item-row-media align="left">
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-              </dds-image>
-              <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-              <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+              </c4d-image>
+              <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+              <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                 dolor nec hendrerit. Phasellus at elit sollicitudin.
-              </dds-content-item-horizontal-media-copy>
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+              </c4d-content-item-row-media-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                   External link text
-                </dds-link-list-item-cta>
-              </dds-link-list>
-            </dds-content-item-horizontal-media>
-          </dds-tab>
-        </dds-tabs-extended-media>
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+            </c4d-content-item-row-media>
+          </c4d-tab>
+        </c4d-tabs-extended-media>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html b/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
index e55e94abad0..e291908f59b 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/index.html
@@ -12,7 +12,7 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style>
       /* Suppress custom element until styles are loaded */
-      dds-tabs-extended-media:not(:defined) {
+      c4d-tabs-extended-media:not(:defined) {
         display: none;
       }
     </style>
@@ -20,127 +20,127 @@
   </head>
   <body>
     <div id="app">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-sm-4 bx--offset-lg-4">
-            <dds-tabs-extended-media>
-              <dds-content-section-heading>Section heading</dds-content-section-heading>
-              <dds-tab label="First tab">
-                <dds-content-item-horizontal-media align="left">
-                  <dds-image
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--col-sm-4 cds--offset-lg-4">
+            <c4d-tabs-extended-media>
+              <c4d-content-section-heading>Section heading</c4d-content-section-heading>
+              <c4d-tab label="First tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </dds-image>
-                  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-                  <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                       dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </dds-content-item-horizontal-media-copy>
-                  <dds-link-list slot="footer" type="vertical">
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </dds-link-list-item-cta>
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </dds-link-list-item-cta>
-                  </dds-link-list>
-                </dds-content-item-horizontal-media>
-              </dds-tab>
-              <dds-tab label="Second tab">
-                <dds-content-item-horizontal-media align="left">
-                  <dds-image
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Second tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </dds-image>
-                  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-                  <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                     dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </dds-content-item-horizontal-media-copy>
-                  <dds-link-list slot="footer" type="vertical">
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </dds-link-list-item-cta>
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </dds-link-list-item-cta>
-                  </dds-link-list>
-                </dds-content-item-horizontal-media>
-              </dds-tab>
-              <dds-tab label="Third tab">
-                <dds-content-item-horizontal-media align="left">
-                  <dds-image
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Third tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </dds-image>
-                  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-                  <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                     dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </dds-content-item-horizontal-media-copy>
-                  <dds-link-list slot="footer" type="vertical">
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </dds-link-list-item-cta>
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </dds-link-list-item-cta>
-                  </dds-link-list>
-                </dds-content-item-horizontal-media>
-              </dds-tab>
-              <dds-tab label="Fourth tab">
-                <dds-content-item-horizontal-media align="left">
-                  <dds-image
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Fourth tab">
+                <c4d-content-item-row-media align="left">
+                  <c4d-image
                     slot="media"
                     alt="Image alt text"
                     default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-                  </dds-image>
-                  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-                  <dds-content-item-horizontal-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
+                  </c4d-image>
+                  <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+                  <c4d-content-item-row-media-copy>Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing elit. Aenean et ultricies est. Mauris iaculis eget
                     dolor nec hendrerit. Phasellus at elit sollicitudin.
-                  </dds-content-item-horizontal-media-copy>
-                  <dds-link-list slot="footer" type="vertical">
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                       Link text
-                    </dds-link-list-item-cta>
-                    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
                       External link text
-                    </dds-link-list-item-cta>
-                  </dds-link-list>
-                </dds-content-item-horizontal-media>
-              </dds-tab>
-              <dds-tab label="Tab with video">
-                <dds-content-item-horizontal-media align="left">
-                  <dds-content-item-horizontal-media-video
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+              <c4d-tab label="Tab with video">
+                <c4d-content-item-row-media align="left">
+                  <c4d-content-item-row-media-video
                     video-id="1_9h94wo6b"
-                  ></dds-content-item-horizontal-media-video>
-                  <dds-content-item-heading
-                    >Aliquam condimentum</dds-content-item-heading
+                  ></c4d-content-item-row-media-video>
+                  <c4d-content-item-heading
+                    >Aliquam condimentum</c4d-content-item-heading
                   >
-                  <dds-content-item-horizontal-media-copy
+                  <c4d-content-item-row-media-copy
                     >Lorem ipsum dolor sit amet, <em>consectetur</em> adipiscing
                     elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
                     hendrerit. Phasellus at elit sollicitudin.
-                  </dds-content-item-horizontal-media-copy>
-                  <dds-link-list slot="footer" type="vertical">
-                    <dds-link-list-item-cta
+                  </c4d-content-item-row-media-copy>
+                  <c4d-link-list slot="footer" type="vertical">
+                    <c4d-link-list-item-cta
                       icon-placement="right"
                       href="https://www.ibm.com"
                       cta-type="local"
                     >
                       Link text
-                    </dds-link-list-item-cta>
-                    <dds-link-list-item-cta
+                    </c4d-link-list-item-cta>
+                    <c4d-link-list-item-cta
                       icon-placement="right"
                       href="https://www.ibm.com"
                       cta-type="external"
                     >
                       External link text
-                    </dds-link-list-item-cta>
-                  </dds-link-list>
-                </dds-content-item-horizontal-media>
-              </dds-tab>
-            </dds-tabs-extended-media>
+                    </c4d-link-list-item-cta>
+                  </c4d-link-list>
+                </c4d-content-item-row-media>
+              </c4d-tab>
+            </c4d-tabs-extended-media>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
index 09cf443aff8..c3fc8563ea9 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended-media/src/index.js
@@ -8,6 +8,6 @@
  */
 
 import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index.js';
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
 import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 import './index.scss';
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html b/packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html
index 619e6a300e6..9241686e9d2 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended/cdn.html
@@ -13,11 +13,10 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-tabs-extended:not(:defined) {
+    cds-tabs-extended:not(:defined) {
       display: none;
     }
   </style>
@@ -25,19 +24,19 @@
           src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tabs-extended.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <dds-tabs-extended>
-        <dds-tab label="First tab">
+      <cds-tabs-extended>
+        <cds-tab label="First tab">
           <p>Content for first tab goes here.</p>
-        </dds-tab>
-        <dds-tab label="Second tab">
+        </cds-tab>
+        <cds-tab label="Second tab">
           <p>Content for second tab goes here.</p>
-        </dds-tab>
-      </dds-tabs-extended>
+        </cds-tab>
+      </cds-tabs-extended>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/index.html b/packages/web-components/examples/codesandbox/components/tabs-extended/index.html
index 50a0fe049d6..2d405615c61 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/index.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended/index.html
@@ -13,30 +13,29 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-tabs-extended:not(:defined) {
+    cds-tabs-extended:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/index.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-12">
       <h1>Hello World! 👋</h1>
 
-      <dds-tabs-extended>
-        <dds-tab label="First tab">
+      <cds-tabs-extended>
+        <cds-tab label="First tab">
           <p>Content for first tab goes here.</p>
-        </dds-tab>
-        <dds-tab label="Second tab">
+        </cds-tab>
+        <cds-tab label="Second tab">
           <p>Content for second tab goes here.</p>
-        </dds-tab>
-      </dds-tabs-extended>
+        </cds-tab>
+      </cds-tabs-extended>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html b/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html
index aafedd73721..b7446b11658 100644
--- a/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html
+++ b/packages/web-components/examples/codesandbox/components/tabs-extended/with-cta-block-item-rows.html
@@ -13,332 +13,331 @@
   <meta charset="UTF-8"/>
   <link rel="stylesheet"
         href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-tabs-extended:not(:defined) {
+    cds-tabs-extended:not(:defined) {
       display: none;
     }
   </style>
   <script src="src/with-cta-block-item-rows.js" type="module"></script>
 </head>
 <body>
-  <div class="bx--grid">
-    <div class="bx--row">
-      <div class="bx--col-sm-4">
-        <dds-tabs-extended orientation="horizontal">
-          <dds-tab label="Relational">
-            <dds-cta-block>
-              <dds-content-block-copy size="md">
-                <dds-content-block-paragraph>
+  <div class="cds--grid">
+    <div class="cds--row">
+      <div class="cds--col-sm-4">
+        <cds-tabs-extended orientation="horizontal">
+          <cds-tab label="Relational">
+            <cds-cta-block>
+              <cds-content-block-copy size="md">
+                <cds-content-block-paragraph>
                   Use the relational database type for traditional applications such as enterprise resource planning, customer relationship management and e-commerce, along with ledger and audit forensics.
-                </dds-content-block-paragraph>
-              </dds-content-block-copy>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                </cds-content-block-paragraph>
+              </cds-content-block-copy>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     Db2
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/db2-on-cloud">
-                      <span class="bx--link-text">IBM Db2 on Cloud</span>
+                      <span class="cds--link-text">IBM Db2 on Cloud</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/db2-database">
-                      <span class="bx--link-text">IBM Db2 Database</span>
+                      <span class="cds--link-text">IBM Db2 Database</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     PostgreSQL
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/databases-for-postgresql">
-                      <span class="bx--link-text">IBM Cloud Databases for PostgreSQL</span>
+                      <span class="cds--link-text">IBM Cloud Databases for PostgreSQL</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     Enterprise DB
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/databases-for-enterprisedb">
-                      <span class="bx--link-text">IBM Cloud Databases for EnterpriseDB</span>
+                      <span class="cds--link-text">IBM Cloud Databases for EnterpriseDB</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/postgres-enterprise">
-                      <span class="bx--link-text">EDB Postgres Enterprise and Standard with IBM</span>
+                      <span class="cds--link-text">EDB Postgres Enterprise and Standard with IBM</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     MySQL
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/databases-for-mysql">
-                      <span class="bx--link-text">IBM Cloud Databases for MySQL</span>
+                      <span class="cds--link-text">IBM Cloud Databases for MySQL</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     SingleStore
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/singlestore">
-                      <span class="bx--link-text">SingleStore DB with IBM</span>
+                      <span class="cds--link-text">SingleStore DB with IBM</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-            </dds-cta-block>
-          </dds-tab>
-          <dds-tab label="Data warehouse">
-            <dds-cta-block>
-              <dds-content-block-copy size="md">
-                <dds-content-block-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+            </cds-cta-block>
+          </cds-tab>
+          <cds-tab label="Data warehouse">
+            <cds-cta-block>
+              <cds-content-block-copy size="md">
+                <cds-content-block-paragraph>
                   Use the data warehouse database type for analytical use cases such as data warehouses, data lakes and business intelligence.
-                </dds-content-block-paragraph>
-              </dds-content-block-copy>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                </cds-content-block-paragraph>
+              </cds-content-block-copy>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     Db2 Warehouse
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/db2-warehouse-on-cloud">
-                      <span class="bx--link-text">IBM Db2 Data Warehouse on Cloud</span>
+                      <span class="cds--link-text">IBM Db2 Data Warehouse on Cloud</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/db2-warehouse">
-                      <span class="bx--link-text">IBM Db2 Data Warehouse</span>
+                      <span class="cds--link-text">IBM Db2 Data Warehouse</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     Netezza
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/netezza">
-                      <span class="bx--link-text">IBM Netezza Performance Server</span>
+                      <span class="cds--link-text">IBM Netezza Performance Server</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-            </dds-cta-block>
-          </dds-tab>
-          <dds-tab label="Document">
-            <dds-cta-block>
-              <dds-content-block-copy size="md">
-                <dds-content-block-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+            </cds-cta-block>
+          </cds-tab>
+          <cds-tab label="Document">
+            <cds-cta-block>
+              <cds-content-block-copy size="md">
+                <cds-content-block-paragraph>
                   Use the document database type for content management, catalogs and user profiles, in addition to web and mobile apps.
-                </dds-content-block-paragraph>
-              </dds-content-block-copy>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                </cds-content-block-paragraph>
+              </cds-content-block-copy>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     MongoDB
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/databases-for-mongodb">
-                      <span class="bx--link-text">IBM Cloud Databases for MongoDB</span>
+                      <span class="cds--link-text">IBM Cloud Databases for MongoDB</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/mongodb-enterprise-advanced">
-                      <span class="bx--link-text">MongoDB Enterprise Advanced with IBM</span>
+                      <span class="cds--link-text">MongoDB Enterprise Advanced with IBM</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     IBM Cloudant
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/cloudant">
-                      <span class="bx--link-text">IBM Cloudant</span>
+                      <span class="cds--link-text">IBM Cloudant</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-            </dds-cta-block>
-          </dds-tab>
-          <dds-tab label="Key value">
-            <dds-cta-block>
-              <dds-content-block-copy size="md">
-                <dds-content-block-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+            </cds-cta-block>
+          </cds-tab>
+          <cds-tab label="Key value">
+            <cds-cta-block>
+              <cds-content-block-copy size="md">
+                <cds-content-block-paragraph>
                   Use the key value database type for distributed systems consensus.
-                </dds-content-block-paragraph>
-              </dds-content-block-copy>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                </cds-content-block-paragraph>
+              </cds-content-block-copy>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     etcd
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/databases-for-etcd">
-                      <span class="bx--link-text">IBM Databases for etcd</span>
+                      <span class="cds--link-text">IBM Databases for etcd</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-            </dds-cta-block>
-          </dds-tab>
-          <dds-tab label="Wide columnar">
-            <dds-cta-block>
-              <dds-content-block-copy size="md">
-                <dds-content-block-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+            </cds-cta-block>
+          </cds-tab>
+          <cds-tab label="Wide columnar">
+            <cds-cta-block>
+              <cds-content-block-copy size="md">
+                <cds-content-block-paragraph>
                   Use the wide columnar database type for high-scale industrial purposes, including logistics, transaction logging, equipment maintenance, fleet management and route optimization.
-                </dds-content-block-paragraph>
-              </dds-content-block-copy>
-              <dds-cta-block-item-row>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
+                </cds-content-block-paragraph>
+              </cds-content-block-copy>
+              <cds-cta-block-item-row>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
                     DataStax
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Cloud
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/cloud/databases-for-datastax?mhsrc=ibmsearch_a&amp;mhq=datastax">
-                      <span class="bx--link-text">IBM Cloud Databases for DataStax</span>
+                      <span class="cds--link-text">IBM Cloud Databases for DataStax</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-                <dds-cta-block-item>
-                  <dds-content-item-heading>
-                  </dds-content-item-heading>
-                  <dds-content-item-copy>
-                    <dds-content-item-paragraph>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+                <cds-cta-block-item>
+                  <cds-content-item-heading>
+                  </cds-content-item-heading>
+                  <cds-content-item-copy>
+                    <cds-content-item-paragraph>
                       Software
-                    </dds-content-item-paragraph>
-                  </dds-content-item-copy>
-                  <dds-video-cta-container>
+                    </cds-content-item-paragraph>
+                  </cds-content-item-copy>
+                  <cds-video-cta-container>
                     <a href="https://www.ibm.com/products/datastax-enterprise">
-                      <span class="bx--link-text">DataStax Enterprise with IBM</span>
+                      <span class="cds--link-text">DataStax Enterprise with IBM</span>
                       <span class="ibm_icon_arrowright_local"></span>
                     </a>
-                  </dds-video-cta-container>
-                </dds-cta-block-item>
-              </dds-cta-block-item-row>
-            </dds-cta-block>
-          </dds-tab>
-        </dds-tabs-extended>
+                  </cds-video-cta-container>
+                </cds-cta-block-item>
+              </cds-cta-block-item-row>
+            </cds-cta-block>
+          </cds-tab>
+        </cds-tabs-extended>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/cdn.html b/packages/web-components/examples/codesandbox/components/tag-group/cdn.html
deleted file mode 100644
index c132f56457d..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-group/cdn.html
+++ /dev/null
@@ -1,51 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-tag-group:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module"
-          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tag-group.min.js"></script>
-  <script type="module"
-          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tag-link.min.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <h1>Hello World! 👋</h1>
-
-      <dds-tag-group>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 1
-        </dds-tag-link>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 2
-        </dds-tag-link>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 3
-        </dds-tag-link>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 4
-        </dds-tag-link>
-      </dds-tag-group>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/index.html b/packages/web-components/examples/codesandbox/components/tag-group/index.html
deleted file mode 100644
index 6037541efd9..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-group/index.html
+++ /dev/null
@@ -1,48 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-tag-group:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script src="src/index.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <h1>Hello World! 👋</h1>
-
-      <dds-tag-group>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 1
-        </dds-tag-link>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 2
-        </dds-tag-link>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 3
-        </dds-tag-link>
-        <dds-tag-link href="https://www.example.com">
-          Copy Text 4
-        </dds-tag-link>
-      </dds-tag-group>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/package.json b/packages/web-components/examples/codesandbox/components/tag-group/package.json
deleted file mode 100644
index 1801f2d04d6..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-group/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-tag-group-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/sandbox.config.json b/packages/web-components/examples/codesandbox/components/tag-group/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-group/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/tag-group/src/index.js b/packages/web-components/examples/codesandbox/components/tag-group/src/index.js
deleted file mode 100644
index c55e17dd199..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-group/src/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/tag-group/index.js';
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/cdn.html b/packages/web-components/examples/codesandbox/components/tag-link/cdn.html
deleted file mode 100644
index 77058f132e7..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-link/cdn.html
+++ /dev/null
@@ -1,40 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-tag-link:not(:defined) {
-      display: none;
-    }
-
-    body {
-      padding: 2rem;
-    }
-  </style>
-  <script type="module"
-          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tag-link.min.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-tag-link href="https://www.example.com">
-        Copy Text
-      </dds-tag-link>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/index.html b/packages/web-components/examples/codesandbox/components/tag-link/index.html
deleted file mode 100644
index 8a219560e20..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-link/index.html
+++ /dev/null
@@ -1,39 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-tag-link:not(:defined) {
-      display: none;
-    }
-
-    body {
-      padding: 2rem;
-    }
-  </style>
-  <script src="src/index.js"></script>
-</head>
-<body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-12">
-      <dds-tag-link href="https://www.example.com">
-        Copy Text
-      </dds-tag-link>
-    </div>
-  </div>
-</div>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/package.json b/packages/web-components/examples/codesandbox/components/tag-link/package.json
deleted file mode 100644
index 7febbc47185..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-link/package.json
+++ /dev/null
@@ -1,21 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-tag-link-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/sandbox.config.json b/packages/web-components/examples/codesandbox/components/tag-link/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-link/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/tag-link/src/index.js b/packages/web-components/examples/codesandbox/components/tag-link/src/index.js
deleted file mode 100644
index 87723285ecc..00000000000
--- a/packages/web-components/examples/codesandbox/components/tag-link/src/index.js
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/tag-link/tag-link.js';
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/.sassrc b/packages/web-components/examples/codesandbox/components/universal-banner/.sassrc
deleted file mode 100644
index c0ad86448e3..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/.sassrc
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "includePaths": [
-    "node_modules", "../../node_modules"
-  ],
-}
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/cdn.html b/packages/web-components/examples/codesandbox/components/universal-banner/cdn.html
deleted file mode 100644
index b850f414c3a..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/cdn.html
+++ /dev/null
@@ -1,35 +0,0 @@
-<!--
-@license
-Copyright IBM Corp. 2020
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css"/>
-  <link rel="stylesheet"
-        href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css"/>
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-universal-banner:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script type="module"
-          src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/universal-banner.min.js"></script>
-</head>
-<body>
-	<dds-universal-banner image-width="4-col">
-	  <dds-universal-banner-image slot="image" default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></dds-universal-banner-image>
-		<dds-universal-banner-heading slot="heading">Hybrid cloud and AI for smarter business</dds-universal-banner-heading>
-		<dds-universal-banner-copy slot="copy">Las Vegas, June 15-18, 2025</dds-universal-banner-copy>
-		<dds-button-cta slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-			Register for Think. Free
-		</dds-button-cta>
-	</dds-universal-banner>
-</body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/index.html b/packages/web-components/examples/codesandbox/components/universal-banner/index.html
deleted file mode 100644
index 130b9c0d33b..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/index.html
+++ /dev/null
@@ -1,27 +0,0 @@
-<!--
-@license
-
-Copyright IBM Corp. 2020
-
-This source code is licensed under the Apache-2.0 license found in the
-LICENSE file in the root directory of this source tree.
--->
-
-<html>
-  <head>
-    <title>@carbon/ibmdotcom-web-components example</title>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-    <script src="src/index.js"></script>
-  </head>
-  <body>
-    <dds-universal-banner image-width="4-col">
-      <dds-universal-banner-image slot="image" default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></dds-universal-banner-image>
-      <dds-universal-banner-heading slot="heading">Hybrid cloud and AI for smarter business</dds-universal-banner-heading>
-      <dds-universal-banner-copy slot="copy">Las Vegas, June 15-18, 2025</dds-universal-banner-copy>
-      <dds-button-cta slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-        Register for Think. Free
-      </dds-button-cta>
-    </dds-universal-banner>
-  </body>
-</html>
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/package.json b/packages/web-components/examples/codesandbox/components/universal-banner/package.json
deleted file mode 100644
index acaa91d3065..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/package.json
+++ /dev/null
@@ -1,23 +0,0 @@
-{
-  "name": "ibmdotcom-web-components-universal-banner-example",
-  "version": "0.1.0",
-  "private": true,
-  "description": "Sample project for getting started with the Web Components from Carbon for IBM.com.",
-  "license": "Apache-2",
-  "main": "index.html",
-  "scripts": {
-    "clean": "rimraf node_modules dist .cache",
-    "start": "parcel index.html --port=9000 --no-hmr",
-    "build": "parcel build *.html --no-minify --public-url ./"
-  },
-  "dependencies": {
-    "@carbon/ibmdotcom-web-components": "latest"
-  },
-  "devDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "carbon-components": "^10.36.0",
-    "parcel-bundler": "1.12.3",
-    "rimraf": "^3.0.2",
-    "sass": "^1.32.13"
-  }
-}
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/sandbox.config.json b/packages/web-components/examples/codesandbox/components/universal-banner/sandbox.config.json
deleted file mode 100644
index a4df8557d7b..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/sandbox.config.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "template": "node"
-}
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/src/index.js b/packages/web-components/examples/codesandbox/components/universal-banner/src/index.js
deleted file mode 100644
index 82e0c5ba57c..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/src/index.js
+++ /dev/null
@@ -1,24 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-web-components/es/components/universal-banner/index.js';
-import './index.scss';
-
-window.digitalData = {
-  page: {
-    pageInfo: {
-      language: 'en-US',
-      ibm: {
-        country: 'US',
-        siteID: 'IBMTESTWWW',
-      },
-    },
-    isDataLayerReady: true,
-  },
-};
diff --git a/packages/web-components/examples/codesandbox/components/universal-banner/src/index.scss b/packages/web-components/examples/codesandbox/components/universal-banner/src/index.scss
deleted file mode 100644
index 482728f8cc5..00000000000
--- a/packages/web-components/examples/codesandbox/components/universal-banner/src/index.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// @license
-//
-// 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.
-//
-
-// `enable-css-custom-properties` and `grid-columns-16` feature flags are requirements for Carbon for IBM.com styles
-$feature-flags: (
-  enable-css-custom-properties: true,
-  grid-columns-16: true,
-);
-
-@import 'carbon-components/scss/globals/grid/grid';
diff --git a/packages/web-components/examples/codesandbox/components/video-player/cdn.html b/packages/web-components/examples/codesandbox/components/video-player/cdn.html
index 3867aa1fd63..c2ca4f3704b 100644
--- a/packages/web-components/examples/codesandbox/components/video-player/cdn.html
+++ b/packages/web-components/examples/codesandbox/components/video-player/cdn.html
@@ -12,20 +12,20 @@
   <title>@carbon/ibmdotcom-web-components example</title>
   <meta charset="UTF-8" />
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style type="text/css">
     /* Suppress custom element until styles are loaded */
-    dds-video-player-container:not(:defined) {
+    cds-video-player-container:not(:defined) {
       display: none;
     }
   </style>
   <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js"></script>
 </head>
 <body>
-<div class="bx--grid">
-  <div class="bx--row">
-    <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-      <dds-video-player-container video-id="1_9h94wo6b"></dds-video-player-container>
+<div class="cds--grid">
+  <div class="cds--row">
+    <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+      <cds-video-player-container video-id="1_9h94wo6b"></cds-video-player-container>
     </div>
   </div>
 </div>
diff --git a/packages/web-components/examples/codesandbox/components/video-player/index.html b/packages/web-components/examples/codesandbox/components/video-player/index.html
index 4fde3ec2213..cf0c976e4eb 100644
--- a/packages/web-components/examples/codesandbox/components/video-player/index.html
+++ b/packages/web-components/examples/codesandbox/components/video-player/index.html
@@ -14,17 +14,17 @@
     <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
     <style type="text/css">
       /* Suppress custom element until styles are loaded */
-      dds-video-player-container:not(:defined) {
+      cds-video-player-container:not(:defined) {
         display: none;
       }
     </style>
     <script src="src/index.js"></script>
   </head>
   <body>
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-lg-8 bx--offset-lg-4">
-          <dds-video-player-container video-id="1_9h94wo6b"></dds-video-player-container>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-sm-4 cds--col-lg-8 cds--offset-lg-4">
+          <cds-video-player-container video-id="1_9h94wo6b"></cds-video-player-container>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs
index 9003f5d0bfe..f8edc3643a4 100644
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs
+++ b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-handlebars/index.hbs
@@ -19,8 +19,8 @@ LICENSE file in the root directory of this source tree.
       import 'https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js';
 
       document.addEventListener('click', event => {
-        if (event.target.matches('dds-locale-button')) {
-          document.querySelector('dds-locale-modal').open = true;
+        if (event.target.matches('cds-locale-button')) {
+          document.querySelector('cds-locale-modal').open = true;
         }
       });
     </script>
@@ -83,46 +83,46 @@ LICENSE file in the root directory of this source tree.
     </style>
   </head>
   <body>
-    <dds-masthead>
-      <dds-masthead-menu-button></dds-masthead-menu-button>
-      <dds-masthead-logo></dds-masthead-logo>
-      <dds-top-nav menu-bar-label="IBM [Platform]">
+    <cds-masthead>
+      <cds-masthead-menu-button></cds-masthead-menu-button>
+      <cds-masthead-logo></cds-masthead-logo>
+      <cds-top-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <dds-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
+            <cds-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
               {{#each menuItems}}
-                <dds-top-nav-menu-item href="{{url}}" title="{{title}}"></dds-top-nav-menu-item>
+                <cds-top-nav-menu-item href="{{url}}" title="{{title}}"></cds-top-nav-menu-item>
               {{/each}}
-            </dds-top-nav-menu>
+            </cds-top-nav-menu>
           {{else}}
-            <dds-top-nav-item href="{{url}}" title="{{title}}"></dds-top-nav-item>
+            <cds-top-nav-item href="{{url}}" title="{{title}}"></cds-top-nav-item>
           {{/if}}
         {{/each}}
-      </dds-top-nav>
-      <dds-masthead-search-container></dds-masthead-search-container>
-      <dds-masthead-global-bar>
-        <dds-masthead-profile authenticated>
+      </cds-top-nav>
+      <cds-masthead-search-container></cds-masthead-search-container>
+      <cds-masthead-global-bar>
+        <cds-masthead-profile authenticated>
           {{#each profileItems}}
-            <dds-masthead-profile-item href="{{href}}">{{title}}</dds-masthead-profile-item>
+            <cds-masthead-profile-item href="{{href}}">{{title}}</cds-masthead-profile-item>
           {{/each}}
-        </dds-masthead-profile>
-      </dds-masthead-global-bar>
-      <dds-left-nav-overlay></dds-left-nav-overlay>
-      <dds-left-nav menu-bar-label="IBM [Platform]">
+        </cds-masthead-profile>
+      </cds-masthead-global-bar>
+      <cds-left-nav-overlay></cds-left-nav-overlay>
+      <cds-left-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <dds-left-nav-menu title="{{title}}">
+            <cds-left-nav-menu title="{{title}}">
               {{#each menuItems}}
-                <dds-left-nav-menu-item href="{{url}}" title="{{title}}"></dds-left-nav-menu-item>
+                <cds-left-nav-menu-item href="{{url}}" title="{{title}}"></cds-left-nav-menu-item>
               {{/each}}
-            </dds-left-nav-menu>
+            </cds-left-nav-menu>
           {{else}}
-            <dds-left-nav-item href="{{url}}" title="{{title}}"></dds-left-nav-item>
+            <cds-left-nav-item href="{{url}}" title="{{title}}"></cds-left-nav-item>
           {{/if}}
         {{/each}}
-      </dds-left-nav>
-    </dds-masthead>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
+      </cds-left-nav>
+    </cds-masthead>
+    <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
           <div class="bx--col-lg-13">
@@ -167,40 +167,40 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <dds-footer>
-      <dds-footer-logo slot="brand"></dds-footer-logo>
-      <dds-footer-nav>
+    <cds-footer>
+      <cds-footer-logo slot="brand"></cds-footer-logo>
+      <cds-footer-nav>
         {{#each footerLinks}}
-          <dds-footer-nav-group title-text="{{title}}">
+          <cds-footer-nav-group title-text="{{title}}">
             {{#each links}}
-              <dds-footer-nav-item href="{{url}}">{{title}}</dds-footer-nav-item>
+              <cds-footer-nav-item href="{{url}}">{{title}}</cds-footer-nav-item>
             {{/each}}
-          </dds-footer-nav-group>
+          </cds-footer-nav-group>
         {{/each}}
-      </dds-footer-nav>
-      <dds-locale-button slot="locale-button">{{langDisplay}}</dds-locale-button>
-      <dds-legal-nav slot="legal-nav">
+      </cds-footer-nav>
+      <cds-locale-button slot="locale-button">{{langDisplay}}</cds-locale-button>
+      <cds-legal-nav slot="legal-nav">
         {{#each legalLinks}}
-          <dds-legal-nav-item href="{{url}}">{{title}}</dds-legal-nav-item>
+          <cds-legal-nav-item href="{{url}}">{{title}}</cds-legal-nav-item>
         {{/each}}
-        <dds-legal-nav-cookie-preferences-placeholder></dds-legal-nav-cookie-preferences-placeholder>
-      </dds-legal-nav>
-    </dds-footer>
-    <dds-locale-modal
+        <cds-legal-nav-cookie-preferences-placeholder></cds-legal-nav-cookie-preferences-placeholder>
+      </cds-legal-nav>
+    </cds-footer>
+    <cds-locale-modal
       close-button-assistive-text="{{localeModal.modalClose}}"
       header-title="{{localeModal.headerTitle}}"
       lang-display="{{langDisplay}}"
     >
-      <dds-regions>
+      <cds-regions>
         {{#each regionList}}
           {{#if countryList}}
-            <dds-region-item name="{{name}}"></dds-region-item>
+            <cds-region-item name="{{name}}"></cds-region-item>
           {{else}}
-            <dds-region-item invalid name="{{name}}"></dds-region-item>
+            <cds-region-item invalid name="{{name}}"></cds-region-item>
           {{/if}}
         {{/each}}
-      </dds-regions>
-      <dds-locale-search
+      </cds-regions>
+      <cds-locale-search
         close-button-assistive-text="{{localeModal.searchClearText}}"
         label-text="{{localeModal.searchLabel}}"
         placeholder="{{localeModal.searchPlaceholder}}"
@@ -208,10 +208,10 @@ LICENSE file in the root directory of this source tree.
         unavailability-label-text="{{localeModal.unavailabilityText}}"
       >
         {{#each allCountryList}}
-          <dds-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
-          </dds-locale-item>
+          <cds-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
+          </cds-locale-item>
         {{/each}}
-      </dds-locale-search>
-    </dds-locale-modal>
+      </cds-locale-search>
+    </cds-locale-modal>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs
index e73e78629e5..cbe464eaa6f 100644
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs
+++ b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn-with-rtl/index.hbs
@@ -223,8 +223,8 @@ LICENSE file in the root directory of this source tree.
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en">
   </head>
   <body>
-    <dds-masthead-container></dds-masthead-container>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
+    <cds-masthead-container></cds-masthead-container>
+    <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
           <div class="bx--col-lg-13">
@@ -269,6 +269,6 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <dds-footer-container></dds-footer-container>
+    <cds-footer-container></cds-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html
index 84b7b68f074..49a5b29e9c2 100644
--- a/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html
+++ b/packages/web-components/examples/codesandbox/usage/dotcom-shell-cdn/index.html
@@ -211,7 +211,7 @@
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   </head>
   <body>
-    <dds-masthead-container></dds-masthead-container>
+    <cds-masthead-container></cds-masthead-container>
     <main>
       <h2>
         Purpose and function
@@ -249,6 +249,6 @@ <h2>
         section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the side-nav.
       </p>
     </main>
-    <dds-footer-container></dds-footer-container>
+    <cds-footer-container></cds-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
index 62d79e0c4c4..06e528fb8e2 100644
--- a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
+++ b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
@@ -25,7 +25,7 @@ LICENSE file in the root directory of this source tree.
   <div class="bx--grid">
     <div class="bx--row">
       <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4">
-        <dds-content-block-simple>
+        <cds-content-block-simple>
           <div class="bx--content-block__heading" slot="heading">Curabitur malesuada varius mi eu posuere</div>
           <div class="bx--content-item__copy">
             {{{{markdown}}}}
@@ -49,18 +49,18 @@ LICENSE file in the root directory of this source tree.
               1. list item 2a
             {{{{/markdown}}}}
           </div>
-          <dds-image slot="media" alt="Image alt text"
+          <cds-image slot="media" alt="Image alt text"
             default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-            <dds-image-item media="(min-width: 672px)"
+            <cds-image-item media="(min-width: 672px)"
               srcset="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-            </dds-image-item>
-            <dds-image-item media="(min-width: 400px)"
-              srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
-            <dds-image-item media="(min-width: 320px)"
-              srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
-          </dds-image>
-          <dds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local">Lorem ipsum dolor sit amet</dds-text-cta>
-        </dds-content-block-simple>
+            </cds-image-item>
+            <cds-image-item media="(min-width: 400px)"
+              srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
+            <cds-image-item media="(min-width: 320px)"
+              srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></cds-image-item>
+          </cds-image>
+          <cds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local">Lorem ipsum dolor sit amet</cds-text-cta>
+        </cds-content-block-simple>
       </div>
     </div>
   </div>
diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/package.json b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/package.json
index 4f12f75434a..3a25719ebe6 100644
--- a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/package.json
+++ b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/package.json
@@ -20,9 +20,9 @@
     "css-loader": "^4.3.0",
     "handlebars": "^4.7.7",
     "html-webpack-plugin": "^4.5.0",
-    "node-sass": "^4.14.0",
     "postcss": "^8.1.0",
     "postcss-loader": "^4.0.0",
+    "sass": "~1.62.0",
     "sass-loader": "^10.0.0",
     "style-loader": "^2.0.0",
     "webpack": "^4.0.0",
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/app.js b/packages/web-components/examples/codesandbox/usage/react-ssr/app.js
index d5079fd5930..21a481df981 100644
--- a/packages/web-components/examples/codesandbox/usage/react-ssr/app.js
+++ b/packages/web-components/examples/codesandbox/usage/react-ssr/app.js
@@ -32,7 +32,7 @@ app.get('/', async (req, res) => {
   setLanguage(`${code}-${region}`);
 
   // Loads translation data of the masthead navigation items from `@carbon/ibmdotcom-services`.
-  // Once it's done, the masthead navigation items is populated into `<DDSMastheadContainer>` from our Redux store
+  // Once it's done, the masthead navigation items is populated into `<C4DMastheadContainer>` from our Redux store
   await loadTranslation();
 
   const { devMiddleware } = res.locals.webpack;
diff --git a/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js b/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
index 0386e460ed8..bad17a0eae6 100644
--- a/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
+++ b/packages/web-components/examples/codesandbox/usage/react-ssr/src/views/App.js
@@ -9,13 +9,13 @@
 
 import React from 'react';
 import { Provider } from 'react-redux';
-import DDSLeavingIbmContainer, {
+import C4DLeavingIbmContainer, {
   store,
 } from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container.js';
 
 const App = () => (
   <Provider store={store}>
-    <DDSLeavingIbmContainer href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/" open />
+    <C4DLeavingIbmContainer href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/" open />
   </Provider>
 );
 
diff --git a/packages/web-components/examples/codesandbox/usage/v18/index.html b/packages/web-components/examples/codesandbox/usage/v18/index.html
index 11c8d71a392..680f42dfb52 100644
--- a/packages/web-components/examples/codesandbox/usage/v18/index.html
+++ b/packages/web-components/examples/codesandbox/usage/v18/index.html
@@ -47,7 +47,7 @@
   </head>
   <body id="ibm-com" class="ibm-type">
     <div id="ibm-top" class="ibm-landing-page">
-      <dds-masthead-container></dds-masthead-container>
+      <cds-masthead-container></cds-masthead-container>
       <div id="ibm-content-wrapper">
         <!-- HEADER WITH L1 NAVIGATION, LEADSPACE, TAB NAVIGATION -->
 
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-basic/index.html b/packages/web-components/examples/codesandbox/usage/webpack-basic/index.html
index b83f34349b7..9df94ee9338 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-basic/index.html
+++ b/packages/web-components/examples/codesandbox/usage/webpack-basic/index.html
@@ -209,7 +209,7 @@
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   </head>
   <body>
-    <dds-masthead-container></dds-masthead-container>
+    <cds-masthead-container></cds-masthead-container>
     <main>
       <h2>
         Purpose and function
@@ -247,6 +247,6 @@ <h2>
         section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the side-nav.
       </p>
     </main>
-    <dds-footer-container></dds-footer-container>
+    <cds-footer-container></cds-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs
index f0c6ebe8097..2363ad8a9f5 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs
+++ b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/index.hbs
@@ -22,46 +22,46 @@ LICENSE file in the root directory of this source tree.
     </style>
   </head>
   <body>
-    <dds-masthead>
-      <dds-masthead-menu-button></dds-masthead-menu-button>
-      <dds-masthead-logo></dds-masthead-logo>
-      <dds-top-nav menu-bar-label="IBM [Platform]">
+    <cds-masthead>
+      <cds-masthead-menu-button></cds-masthead-menu-button>
+      <cds-masthead-logo></cds-masthead-logo>
+      <cds-top-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <dds-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
+            <cds-top-nav-menu menu-label="{{title}}" trigger-content="{{title}}">
               {{#each menuItems}}
-                <dds-top-nav-menu-item href="{{url}}" title="{{title}}"></dds-top-nav-menu-item>
+                <cds-top-nav-menu-item href="{{url}}" title="{{title}}"></cds-top-nav-menu-item>
               {{/each}}
-            </dds-top-nav-menu>
+            </cds-top-nav-menu>
           {{else}}
-            <dds-top-nav-item href="{{url}}" title="{{title}}"></dds-top-nav-item>
+            <cds-top-nav-item href="{{url}}" title="{{title}}"></cds-top-nav-item>
           {{/if}}
         {{/each}}
-      </dds-top-nav>
-      <dds-masthead-search-container></dds-masthead-search-container>
-      <dds-masthead-global-bar>
-        <dds-masthead-profile authenticated>
+      </cds-top-nav>
+      <cds-masthead-search-container></cds-masthead-search-container>
+      <cds-masthead-global-bar>
+        <cds-masthead-profile authenticated>
           {{#each profileItems}}
-            <dds-masthead-profile-item href="{{href}}">{{title}}</dds-masthead-profile-item>
+            <cds-masthead-profile-item href="{{href}}">{{title}}</cds-masthead-profile-item>
           {{/each}}
-        </dds-masthead-profile>
-      </dds-masthead-global-bar>
-      <dds-left-nav-overlay></dds-left-nav-overlay>
-      <dds-left-nav menu-bar-label="IBM [Platform]">
+        </cds-masthead-profile>
+      </cds-masthead-global-bar>
+      <cds-left-nav-overlay></cds-left-nav-overlay>
+      <cds-left-nav menu-bar-label="IBM [Platform]">
         {{#each navLinks}}
           {{#if menuItems}}
-            <dds-left-nav-menu title="{{title}}">
+            <cds-left-nav-menu title="{{title}}">
               {{#each menuItems}}
-                <dds-left-nav-menu-item href="{{url}}" title="{{title}}"></dds-left-nav-menu-item>
+                <cds-left-nav-menu-item href="{{url}}" title="{{title}}"></cds-left-nav-menu-item>
               {{/each}}
-            </dds-left-nav-menu>
+            </cds-left-nav-menu>
           {{else}}
-            <dds-left-nav-item href="{{url}}" title="{{title}}"></dds-left-nav-item>
+            <cds-left-nav-item href="{{url}}" title="{{title}}"></cds-left-nav-item>
           {{/if}}
         {{/each}}
-      </dds-left-nav>
-    </dds-masthead>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
+      </cds-left-nav>
+    </cds-masthead>
+    <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
           <div class="bx--col-lg-13">
@@ -106,40 +106,40 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <dds-footer>
-      <dds-footer-logo slot="brand"></dds-footer-logo>
-      <dds-footer-nav>
+    <cds-footer>
+      <cds-footer-logo slot="brand"></cds-footer-logo>
+      <cds-footer-nav>
         {{#each footerLinks}}
-          <dds-footer-nav-group title-text="{{title}}">
+          <cds-footer-nav-group title-text="{{title}}">
             {{#each links}}
-              <dds-footer-nav-item href="{{url}}">{{title}}</dds-footer-nav-item>
+              <cds-footer-nav-item href="{{url}}">{{title}}</cds-footer-nav-item>
             {{/each}}
-          </dds-footer-nav-group>
+          </cds-footer-nav-group>
         {{/each}}
-      </dds-footer-nav>
-      <dds-locale-button slot="locale-button">{{langDisplay}}</dds-locale-button>
-      <dds-legal-nav slot="legal-nav">
+      </cds-footer-nav>
+      <cds-locale-button slot="locale-button">{{langDisplay}}</cds-locale-button>
+      <cds-legal-nav slot="legal-nav">
         {{#each legalLinks}}
-          <dds-legal-nav-item href="{{url}}">{{title}}</dds-legal-nav-item>
+          <cds-legal-nav-item href="{{url}}">{{title}}</cds-legal-nav-item>
         {{/each}}
-        <dds-legal-nav-cookie-preferences-placeholder></dds-legal-nav-cookie-preferences-placeholder>
-      </dds-legal-nav>
-    </dds-footer>
-    <dds-locale-modal
+        <cds-legal-nav-cookie-preferences-placeholder></cds-legal-nav-cookie-preferences-placeholder>
+      </cds-legal-nav>
+    </cds-footer>
+    <cds-locale-modal
       close-button-assistive-text="{{localeModal.modalClose}}"
       header-title="{{localeModal.headerTitle}}"
       lang-display="{{langDisplay}}"
     >
-      <dds-regions>
+      <cds-regions>
         {{#each regionList}}
           {{#if countryList}}
-            <dds-region-item name="{{name}}"></dds-region-item>
+            <cds-region-item name="{{name}}"></cds-region-item>
           {{else}}
-            <dds-region-item invalid name="{{name}}"></dds-region-item>
+            <cds-region-item invalid name="{{name}}"></cds-region-item>
           {{/if}}
         {{/each}}
-      </dds-regions>
-      <dds-locale-search
+      </cds-regions>
+      <cds-locale-search
         close-button-assistive-text="{{localeModal.searchClearText}}"
         label-text="{{localeModal.searchLabel}}"
         placeholder="{{localeModal.searchPlaceholder}}"
@@ -147,10 +147,10 @@ LICENSE file in the root directory of this source tree.
         unavailability-label-text="{{localeModal.unavailabilityText}}"
       >
         {{#each allCountryList}}
-          <dds-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
-          </dds-locale-item>
+          <cds-locale-item country="{{country}}" href="{{href}}" language="{{language}}" locale="{{locale}}" region="{{region}}">
+          </cds-locale-item>
         {{/each}}
-      </dds-locale-search>
-    </dds-locale-modal>
+      </cds-locale-search>
+    </cds-locale-modal>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.js b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.js
index 5fdfbb6b194..21882128eb5 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.js
+++ b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.js
@@ -12,7 +12,7 @@ import '@carbon/ibmdotcom-web-components/es/components/footer/footer-container.j
 import './index.scss';
 
 document.addEventListener('click', event => {
-  if (event.target.matches('dds-locale-button')) {
-    document.querySelector('dds-locale-modal').open = true;
+  if (event.target.matches('cds-locale-button')) {
+    document.querySelector('cds-locale-modal').open = true;
   }
 });
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.scss b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.scss
index 2dbed78aff0..d2d5464d957 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.scss
+++ b/packages/web-components/examples/codesandbox/usage/webpack-handlebars/src/index.scss
@@ -20,7 +20,7 @@ body {
   padding: calc(#{mini-units(6)} + 1px) 0 0 0;
 }
 
-.bx--content.dds-ce-demo--ui-shell-content {
+.bx--content.cds-ce-demo--ui-shell-content {
   h2 {
     margin: 30px 0;
 
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs b/packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs
index fa4461a798e..ca12fa23b91 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs
+++ b/packages/web-components/examples/codesandbox/usage/webpack-rtl/index.hbs
@@ -221,8 +221,8 @@ LICENSE file in the root directory of this source tree.
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en">
   </head>
   <body>
-    <dds-masthead-container></dds-masthead-container>
-    <main class="bx--content dds-ce-demo--ui-shell-content">
+    <cds-masthead-container></cds-masthead-container>
+    <main class="bx--content cds-ce-demo--ui-shell-content">
       <div class="bx--grid">
         <div class="bx--row">
           <div class="bx--col-lg-13">
@@ -268,6 +268,6 @@ LICENSE file in the root directory of this source tree.
         </div>
       </div>
     </main>
-    <dds-footer-container></dds-footer-container>
+    <cds-footer-container></cds-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/examples/codesandbox/usage/webpack-sass/index.html b/packages/web-components/examples/codesandbox/usage/webpack-sass/index.html
index 838f530d3d7..3c01697afca 100644
--- a/packages/web-components/examples/codesandbox/usage/webpack-sass/index.html
+++ b/packages/web-components/examples/codesandbox/usage/webpack-sass/index.html
@@ -149,7 +149,7 @@
     <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
   </head>
   <body>
-    <dds-masthead-container></dds-masthead-container>
+    <cds-masthead-container></cds-masthead-container>
     <main>
       <h2>
         Purpose and function
@@ -187,6 +187,6 @@ <h2>
         section. If tabs are needed on a page when using a side-nav, then the tabs are secondary in hierarchy to the side-nav.
       </p>
     </main>
-    <dds-footer-container></dds-footer-container>
+    <cds-footer-container></cds-footer-container>
   </body>
 </html>
diff --git a/packages/web-components/gulp-tasks/build/modules.js b/packages/web-components/gulp-tasks/build/modules.js
index 239563410c8..b2ab4a9a807 100644
--- a/packages/web-components/gulp-tasks/build/modules.js
+++ b/packages/web-components/gulp-tasks/build/modules.js
@@ -31,6 +31,6 @@ gulp.task(
     gulp.task('build:modules:react-types'),
     gulp.task('build:modules:scripts'),
     gulp.task('build:modules:scripts-node'),
-    gulp.task('build:modules:types')
+    gulp.task('build:modules:types'),
   )
 );
diff --git a/packages/web-components/gulp-tasks/build/modules/css.js b/packages/web-components/gulp-tasks/build/modules/css.js
index bfa045e2b36..9127b6841f9 100644
--- a/packages/web-components/gulp-tasks/build/modules/css.js
+++ b/packages/web-components/gulp-tasks/build/modules/css.js
@@ -15,7 +15,7 @@ const { promisify } = require('util');
 const asyncDone = require('async-done');
 const gulp = require('gulp');
 // This can be changed to `dart-sass` once Carbon V11 is used require('sass')
-const sass = require('gulp-sass')(require('node-sass'));
+const sass = require('gulp-sass')(require('sass'));
 const postcss = require('gulp-postcss');
 const prettier = require('gulp-prettier');
 const header = require('gulp-header');
@@ -52,7 +52,11 @@ const _cssStream = ({ banner, dir }) =>
     )
     .pipe(
       sass({
-        includePaths: ['node_modules', path.resolve(__dirname, '../../../../../node_modules')],
+        includePaths: [
+          path.resolve(__dirname, '../../../node_modules'),
+          path.resolve(__dirname, '../../../../../node_modules'),
+          path.resolve(__dirname, '../../../../../node_modules/@carbon/styles/node_modules'),
+        ],
       })
     )
     .pipe(
@@ -78,7 +82,7 @@ const _cssStream = ({ banner, dir }) =>
     .pipe(
       through2.obj((file, enc, done) => {
         file.contents = Buffer.from(`
-        import { css } from 'lit-element';
+        import { css } from 'lit';
         export default css([${JSON.stringify(String(file.contents))}]);
       `);
         file.path = replaceExtension(file.path, dir === 'rtl' ? '.rtl.css.js' : '.css.js');
diff --git a/packages/web-components/gulp-tasks/build/modules/icons.js b/packages/web-components/gulp-tasks/build/modules/icons.js
index 4302ae38180..197b41a4084 100644
--- a/packages/web-components/gulp-tasks/build/modules/icons.js
+++ b/packages/web-components/gulp-tasks/build/modules/icons.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -40,8 +40,8 @@ async function icons() {
         through2.obj(async (file, enc, done) => {
           const descriptor = await descriptorFromSVG(String(file.contents));
           file.contents = Buffer.from(`
-                import { svg } from 'lit-html';
-                import spread from '@carbon/web-components/es/globals/directives/spread.js';
+                import { svg } from 'lit';
+                import spread from '../internal/vendor/@carbon/web-components/globals/directives/spread.js';
                 const svgResultIBMdotcomIcon = ${createSVGResultFromIconDescriptor(descriptor)};
                 export default svgResultIBMdotcomIcon;
               `);
diff --git a/packages/web-components/gulp-tasks/build/sass-cdn.js b/packages/web-components/gulp-tasks/build/sass-cdn.js
index a7e4fc0fe32..66336fef72c 100644
--- a/packages/web-components/gulp-tasks/build/sass-cdn.js
+++ b/packages/web-components/gulp-tasks/build/sass-cdn.js
@@ -12,7 +12,7 @@
 const gulp = require('gulp');
 const rename = require('gulp-rename');
 // This can be changed to `dart-sass` once Carbon V11 is used require('sass')
-const sass = require('gulp-sass')(require('node-sass'));
+const sass = require('gulp-sass')(require('sass'));
 const config = require('../config');
 
 /**
diff --git a/packages/web-components/gulp-tasks/test.js b/packages/web-components/gulp-tasks/test.js
index 56746cd295c..86747381adc 100644
--- a/packages/web-components/gulp-tasks/test.js
+++ b/packages/web-components/gulp-tasks/test.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/package.json b/packages/web-components/package.json
index d268bccf54e..d1665f0226a 100644
--- a/packages/web-components/package.json
+++ b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "1.38.0",
+  "version": "2.0.0-rc.2",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -51,7 +51,7 @@
     "build:dist": "gulp build:dist",
     "build:sass:cdn": "gulp build:sass:cdn",
     "build-storybook": "cross-env NODE_OPTIONS=--openssl-legacy-provider build-storybook",
-    "build-storybook:experimental": "cross-env NODE_OPTIONS=--openssl-legacy-provider DDS_FLAGS_ALL=true build-storybook -o storybook-static-experimental",
+    "build-storybook:experimental": "cross-env NODE_OPTIONS=--openssl-legacy-provider C4D_FLAGS_ALL=true build-storybook -o storybook-static-experimental",
     "build-storybook:react": "gulp build:modules:react && node --openssl-legacy-provider --max-old-space-size=8192 node_modules/@storybook/react/bin/build.js -c .storybook/react -o storybook-static-react",
     "build-storybook:rtl": "cross-env NODE_OPTIONS=--openssl-legacy-provider STORYBOOK_USE_RTL=true build-storybook -o storybook-static-rtl",
     "ci-check": "yarn wca && yarn typecheck && yarn build && yarn test:unit",
@@ -60,6 +60,7 @@
     "doctoc": "doctoc --title '## Table of contents' docs && doctoc --title '## Table of contents' README.md",
     "postinstall": "carbon-telemetry collect --install",
     "start": "cross-env NODE_OPTIONS=--openssl-legacy-provider yarn storybook",
+    "start-dev": "./update-scss-paths.sh & yarn start",
     "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 9000",
     "storybook:react": "node --openssl-legacy-provider node_modules/@storybook/react/bin/index.js -p 9002 -c .storybook/react",
     "test": "yarn test:unit && yarn test:integration",
@@ -67,9 +68,9 @@
     "test:cdn-build:run": "npx -y http-server -c-1 tests/cdn-build/app --silent",
     "test:cdn-build:test": "npx -y start-server-and-test 'yarn test:cdn-build:run' 8080 'cypress run --config-file tests/cdn-build/cypress.json'",
     "test:e2e:build": "node ./tests/e2e/build/build-examples.js",
-    "test:e2e:run": "npx -y http-server -c-1 tests/e2e/dist --silent",
+    "test:e2e:run": "NODE_OPTIONS=--openssl-legacy-provider npx -y http-server -c-1 tests/e2e/dist --silent",
     "test:e2e:test": "NODE_OPTIONS=--openssl-legacy-provider npx -y start-server-and-test 'yarn test:e2e:run' 8080 'percy exec --config tests/e2e/.percy.json -- cypress run --config-file tests/e2e/cypress.json'",
-    "test:e2e:test:no-percy": "npx -y start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config-file tests/e2e/cypress.json'",
+    "test:e2e:test:no-percy": "NODE_OPTIONS=--openssl-legacy-provider npx -y start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config-file tests/e2e/cypress.json'",
     "test:e2e:test:no-percy:with-video": "npx -y start-server-and-test 'yarn test:e2e:run' 8080 'cypress run --config video=true,screenshotOnRunFailure=true --config-file tests/e2e/cypress.json'",
     "test:e2e-storybook:browserstack:canary": "browserstack-cypress run --cf tests/e2e-storybook/browserstack.json --ccf tests/e2e-storybook/cypress-canary.json --sync --build-name 'Web Components Storybook Canary'",
     "test:e2e-storybook:browserstack:next": "browserstack-cypress run --cf tests/e2e-storybook/browserstack.json --ccf tests/e2e-storybook/cypress-next.json --sync --build-name 'Web Components Storybook Next'",
@@ -84,21 +85,20 @@
     "test:unit": "cross-env NODE_OPTIONS=--openssl-legacy-provider gulp test:unit",
     "test:unit:updateSnapshot": "cross-env NODE_OPTIONS=--openssl-legacy-provider gulp test:unit --update-snapshot",
     "typecheck": "tsc --noEmit -p tsconfig.json",
-    "upgrade-carbon": "yarn upgrade-interactive carbon-components carbon-web-components @carbon/icon-helpers @carbon/icons --latest --exact",
+    "upgrade-carbon": "yarn upgrade-interactive @carbon/web-components @carbon/icon-helpers @carbon/icons --latest --exact",
     "visual-snapshot": "yarn build-storybook && percy storybook ./storybook-static",
     "wca": "web-component-analyzer analyze src --outFile custom-elements.json"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "1.53.0",
-    "@carbon/ibmdotcom-styles": "1.53.0",
-    "@carbon/ibmdotcom-utilities": "1.53.0",
-    "@carbon/layout": "10.37.2",
+    "@carbon/ibmdotcom-services": "2.0.0-rc.2",
+    "@carbon/ibmdotcom-styles": "2.0.0-rc.2",
+    "@carbon/ibmdotcom-utilities": "2.0.0-rc.2",
+    "@carbon/layout": "^11.20.0",
     "@carbon/motion": "^11.0.0",
+    "@carbon/styles": "^1.36.0",
     "@carbon/telemetry": "0.1.0",
-    "@carbon/web-components": "1.34.0",
-    "carbon-components": "10.58.12",
-    "lit-element": "^2.5.1",
-    "lit-html": "^1.4.1",
+    "@carbon/web-components": "2.0.1",
+    "lit": "^2.7.6",
     "lodash-es": "^4.17.21",
     "redux": "^4.0.0",
     "redux-logger": "^3.0.0",
@@ -132,8 +132,10 @@
     "@babel/traverse": "~7.23.0",
     "@carbon/ibmdotcom-services-store": "1.53.0",
     "@carbon/icon-helpers": "10.45.1",
-    "@carbon/icons": "10.48.2",
-    "@carbon/type": "10.45.3",
+    "@carbon/icons": "^11.23.0",
+    "@carbon/pictograms-react": "11.45.2",
+    "@carbon/react": "^1.36.0",
+    "@carbon/type": "^11.25.0",
     "@open-wc/semantic-dom-diff": "~0.18.0",
     "@percy-io/in-percy": "^0.1.11",
     "@percy/cli": "^1.8.1",
@@ -168,6 +170,7 @@
     "babel-plugin-template-html-minifier": "^4.1.0",
     "browserstack-cypress-cli": "^1.11.1",
     "cache-loader": "^4.1.0",
+    "carbon-icons": "^7.0.5",
     "chalk": "^4.1.1",
     "classnames": "2.3.2",
     "commander": "^11.1.0",
@@ -181,6 +184,7 @@
     "del": "^6.0.0",
     "doctoc": "^2.0.0",
     "dompurify": "^2.0.0",
+    "enzyme": "^3.11.0",
     "file-loader": "^6.2.0",
     "fs-extra": "^10.0.0",
     "gulp": "^4.0.2",
diff --git a/packages/web-components/src/component-mixins/callout/callout.scss b/packages/web-components/src/component-mixins/callout/callout.scss
index ebd93a6736e..8a0c8a17872 100644
--- a/packages/web-components/src/component-mixins/callout/callout.scss
+++ b/packages/web-components/src/component-mixins/callout/callout.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/internal/callout/callout';
+@use '@carbon/ibmdotcom-styles/scss/internal/callout';
diff --git a/packages/web-components/src/component-mixins/callout/callout.ts b/packages/web-components/src/component-mixins/callout/callout.ts
index 090e11a0044..5d29235f5b5 100644
--- a/packages/web-components/src/component-mixins/callout/callout.ts
+++ b/packages/web-components/src/component-mixins/callout/callout.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { Constructor } from '../../globals/defs';
 
 const { prefix } = settings;
@@ -15,10 +15,10 @@ const { prefix } = settings;
 /**
  * Callout.
  *
- * @mixin dds-callout
+ * @mixin c4d-callout
  */
-const DDSCalloutMixin = <T extends Constructor<HTMLElement>>(base: T) => {
-  return class extends base {
+const C4DCalloutMixin = <T extends Constructor<HTMLElement>>(base: T) => {
+  abstract class CalloutMixin extends base {
     render() {
       return html`
         <div class="${prefix}--callout__column">
@@ -32,7 +32,9 @@ const DDSCalloutMixin = <T extends Constructor<HTMLElement>>(base: T) => {
         </div>
       `;
     }
-  };
+  }
+
+  return CalloutMixin;
 };
 
-export default DDSCalloutMixin;
+export default C4DCalloutMixin;
diff --git a/packages/web-components/src/component-mixins/callout/defs.ts b/packages/web-components/src/component-mixins/callout/defs.ts
new file mode 100644
index 00000000000..a4591e15c8f
--- /dev/null
+++ b/packages/web-components/src/component-mixins/callout/defs.ts
@@ -0,0 +1,37 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * 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 enum COLOR_SCHEME {
+  /**
+   * Regular
+   */
+  REGULAR = 'regular',
+
+  /**
+   * Inverse
+   */
+  INVERSE = 'inverse',
+
+  /**
+   * Layer background
+   */
+  LAYER = 'layer',
+
+  /**
+   * Cyan background
+   */
+  CYAN = 'cyan',
+
+  /**
+   * Purple background
+   */
+  PURPLE = 'purple',
+}
+
+export default COLOR_SCHEME;
diff --git a/packages/web-components/src/component-mixins/cta/cta-v1.ts b/packages/web-components/src/component-mixins/cta/cta-v1.ts
new file mode 100644
index 00000000000..41ee6e95629
--- /dev/null
+++ b/packages/web-components/src/component-mixins/cta/cta-v1.ts
@@ -0,0 +1,210 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
+import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
+import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
+import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
+import Blog20 from '../../internal/vendor/@carbon/web-components/icons/blog/20.js';
+import DocumentPDF20 from '../../internal/vendor/@carbon/web-components/icons/document--pdf/20.js';
+import NewTab20 from '../../internal/vendor/@carbon/web-components/icons/new-tab/20.js';
+import Phone20 from '../../internal/vendor/@carbon/web-components/icons/phone/20.js';
+import Calendar20 from '../../internal/vendor/@carbon/web-components/icons/calendar/20.js';
+import Email20 from '../../internal/vendor/@carbon/web-components/icons/email/20.js';
+import Chat20 from '../../internal/vendor/@carbon/web-components/icons/chat/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { Constructor } from '../../globals/defs';
+import { CTA_TYPE } from '../../components/cta/defs';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Icons to use, keyed by CTA type.
+ */
+export const icons = {
+  [CTA_TYPE.LOCAL]: ArrowRight20,
+  [CTA_TYPE.DOWNLOAD]: Download20,
+  [CTA_TYPE.EXTERNAL]: Launch20,
+  [CTA_TYPE.NEW_TAB]: NewTab20,
+  [CTA_TYPE.JUMP]: ArrowDown20,
+  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.PDF]: DocumentPDF20,
+  [CTA_TYPE.BLOG]: Blog20,
+  [CTA_TYPE.EMAIL]: Email20,
+  [CTA_TYPE.SCHEDULE]: Calendar20,
+  [CTA_TYPE.CHAT]: Chat20,
+  [CTA_TYPE.CALL]: Phone20,
+};
+
+/**
+ * Aria Labels to use, keyed by CTA type.
+ */
+export const ariaLabels = {
+  [CTA_TYPE.LOCAL]: '',
+  [CTA_TYPE.DOWNLOAD]: ' - This link downloads a file',
+  [CTA_TYPE.EXTERNAL]: ' - This link opens in a new tab',
+  [CTA_TYPE.NEW_TAB]: ' - This link opens in a new tab',
+  [CTA_TYPE.JUMP]: '',
+  [CTA_TYPE.VIDEO]: ' - This link plays a video',
+  [CTA_TYPE.PDF]: ' - This link downloads a pdf',
+  [CTA_TYPE.BLOG]: '',
+};
+
+export const types = CTA_TYPE;
+
+/**
+ * @param Base The base class.
+ * @returns A mix-in implementing the logic of handling link for CTA.
+ */
+const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
+  abstract class CTAMixinImpl extends Base {
+    /**
+     * The `<a>`.
+     *
+     * @internal
+     */
+    abstract _linkNode;
+
+    /**
+     * Handles `click` event on the `<a>.
+     *
+     * @param event The event.
+     */
+    _handleClick(event: MouseEvent) {
+      const { disabled } = this;
+      if (disabled) {
+        event.preventDefault(); // Stop following the link
+        event.stopPropagation(); // Stop firing `onClick`
+      }
+    }
+
+    /**
+     * The CTA type.
+     */
+    abstract ctaType: CTA_TYPE;
+
+    /**
+     * `true` if the button should be disabled.
+     */
+    abstract disabled?: boolean;
+
+    /**
+     * The default file name.
+     */
+    abstract download?: string;
+
+    /**
+     * Link `href`.
+     */
+    abstract href?: string;
+
+    /**
+     * The link target.
+     */
+    abstract target?: string;
+
+    /**
+     * @returns The template for the icon.
+     */
+    _renderIcon() {
+      const { ctaType } = this;
+      return html`
+        <slot name="icon">
+          <span class="${prefix}--visually-hidden">${ariaLabels[ctaType]}</span>
+          ${icons[ctaType]?.({
+            class: `${c4dPrefix}--card__cta ${c4dPrefix}-ce--cta__icon`,
+          })}
+        </slot>
+      `;
+    }
+
+    /**
+     * Handles `.updated()` method of `lit-element`.
+     */
+    updated(changedProperties) {
+      // Declaring this mixin as it extends `LitElement` seems to cause a TS error
+      // @ts-ignore
+      super.updated(changedProperties);
+      const { ctaType, _linkNode: linkNode } = this;
+      if (
+        changedProperties.has('ctaType') ||
+        changedProperties.has('download')
+      ) {
+        const { download } = this;
+
+        const downloadTypes = [CTA_TYPE.DOWNLOAD, CTA_TYPE.PDF];
+
+        if (!downloadTypes.includes(ctaType) && download) {
+          // eslint-disable-next-line no-console
+          console.warn(
+            `\`download\` property used with a CTA data item besides \`type: download|pdf\` (\`type: ${ctaType}\`).`
+          );
+        }
+
+        const contactMethods = {
+          [CTA_TYPE.EMAIL]: 'email-link',
+          [CTA_TYPE.SCHEDULE]: 'scheduler-link',
+          [CTA_TYPE.CHAT]: 'chat-link',
+          [CTA_TYPE.CALL]: 'phone-link',
+        };
+
+        if (Object.keys(contactMethods).includes(ctaType)) {
+          linkNode.dataset.ibmContact = contactMethods[ctaType];
+        }
+      }
+      // TODO: See why `linkNode` can possibly be `null`
+      if (linkNode && linkNode.nodeName === 'A') {
+        if (changedProperties.has('ctaType') || changedProperties.has('href')) {
+          const { href } = this;
+          const hrefValue = ctaType !== CTA_TYPE.VIDEO ? href : '#';
+          // If this CTA is of video, uses the link as the action button
+          if (hrefValue == null) {
+            linkNode.removeAttribute('href');
+          } else {
+            linkNode.setAttribute('href', hrefValue);
+          }
+        }
+        if (
+          changedProperties.has('ctaType') ||
+          changedProperties.has('target')
+        ) {
+          // Default the target to `_blank` if this CTA is an external link and
+          // target is not already set
+          const { target } = this;
+
+          const newTabTypes = [CTA_TYPE.EXTERNAL, CTA_TYPE.NEW_TAB];
+
+          const targetInEffect =
+            newTabTypes.includes(ctaType) && !target ? '_blank' : target;
+
+          if (!targetInEffect) {
+            linkNode.removeAttribute('target');
+          } else {
+            linkNode.setAttribute('target', targetInEffect);
+          }
+        }
+        if (linkNode.hasAttribute('aria-label')) {
+          linkNode.setAttribute(
+            'aria-label',
+            linkNode.getAttribute('aria-label') +
+              (ctaType ? ariaLabels[ctaType] : '')
+          );
+        }
+      }
+    }
+  }
+
+  return CTAMixinImpl;
+};
+
+export type CTAMixinImpl = InstanceType<ReturnType<typeof CTAMixin>>;
+
+export default CTAMixin;
diff --git a/packages/web-components/src/component-mixins/cta/cta.ts b/packages/web-components/src/component-mixins/cta/cta.ts
index c7e483b582b..8aaa313a822 100644
--- a/packages/web-components/src/component-mixins/cta/cta.ts
+++ b/packages/web-components/src/component-mixins/cta/cta.ts
@@ -7,13 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
+import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
-import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
+import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js';
 import Blog20 from '../../internal/vendor/@carbon/web-components/icons/blog/20.js';
 import DocumentPDF20 from '../../internal/vendor/@carbon/web-components/icons/document--pdf/20.js';
 import NewTab20 from '../../internal/vendor/@carbon/web-components/icons/new-tab/20.js';
@@ -21,12 +22,15 @@ import Phone20 from '../../internal/vendor/@carbon/web-components/icons/phone/20
 import Calendar20 from '../../internal/vendor/@carbon/web-components/icons/calendar/20.js';
 import Email20 from '../../internal/vendor/@carbon/web-components/icons/email/20.js';
 import Chat20 from '../../internal/vendor/@carbon/web-components/icons/chat/20.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { Constructor } from '../../globals/defs';
 import { CTA_TYPE } from '../../components/cta/defs';
+import {
+  formatVideoCaption,
+  formatVideoDuration,
+} from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Icons to use, keyed by CTA type.
@@ -37,7 +41,7 @@ export const icons = {
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.NEW_TAB]: NewTab20,
   [CTA_TYPE.JUMP]: ArrowDown20,
-  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.VIDEO]: PlayFilledAlt20,
   [CTA_TYPE.PDF]: DocumentPDF20,
   [CTA_TYPE.BLOG]: Blog20,
   [CTA_TYPE.EMAIL]: Email20,
@@ -67,13 +71,13 @@ export const types = CTA_TYPE;
  * @returns A mix-in implementing the logic of handling link for CTA.
  */
 const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
-  abstract class CTAMixinImpl extends Base {
+  class CTAMixinImpl extends Base {
     /**
      * The `<a>`.
      *
      * @internal
      */
-    abstract _linkNode;
+    _linkNode;
 
     /**
      * Handles `click` event on the `<a>.
@@ -81,8 +85,28 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      * @param event The event.
      */
     _handleClick(event: MouseEvent) {
-      const { disabled } = this;
-      if (disabled) {
+      const { ctaType, disabled, href, videoDescription, videoName } = this;
+
+      if (ctaType === CTA_TYPE.VIDEO) {
+        event.preventDefault(); // Stop following the link
+      }
+      if (!disabled) {
+        const { eventRunAction } = this.constructor as typeof CTAMixinImpl;
+
+        this.dispatchEvent(
+          new CustomEvent(eventRunAction, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: {
+              href,
+              ctaType,
+              videoName,
+              videoDescription,
+            },
+          })
+        );
+      } else {
         event.preventDefault(); // Stop following the link
         event.stopPropagation(); // Stop firing `onClick`
       }
@@ -91,27 +115,76 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
     /**
      * The CTA type.
      */
-    abstract ctaType: CTA_TYPE;
+    @property({ attribute: 'cta-type', type: String, reflect: true })
+    ctaType: CTA_TYPE = CTA_TYPE.REGULAR;
 
     /**
      * `true` if the button should be disabled.
      */
-    abstract disabled?: boolean;
+    @property({ type: Boolean })
+    disabled?: boolean;
 
     /**
      * The default file name.
      */
-    abstract download?: string;
+    @property()
+    download?: string;
 
     /**
      * Link `href`.
      */
-    abstract href?: string;
+    @property()
+    href?: string;
 
     /**
      * The link target.
      */
-    abstract target?: string;
+    @property()
+    target?: string;
+
+    /**
+     * The formatter for the video caption, composed with the video name and the video duration.
+     * Should be changed upon the locale the UI is rendered with.
+     */
+    @property({ attribute: false })
+    formatVideoCaption = formatVideoCaption;
+
+    /**
+     * The formatter for the video duration.
+     * Should be changed upon the locale the UI is rendered with.
+     */
+    @property({ attribute: false })
+    formatVideoDuration = formatVideoDuration;
+
+    /**
+     * The video duration.
+     */
+    @property({ type: Number, attribute: 'video-duration', reflect: true })
+    videoDuration?: number;
+
+    /**
+     * The video name.
+     */
+    @property({ attribute: 'video-name', reflect: true })
+    videoName?: string;
+
+    /**
+     * The video description.
+     */
+    @property({ attribute: 'video-description', reflect: true })
+    videoDescription?: string;
+
+    /**
+     * The full formatted video title with duration
+     */
+    @property()
+    videoTitle;
+
+    /**
+     * The video thumbnail URL.
+     * Text CTA does not support video thumbnail, and this property should never be set.
+     */
+    videoThumbnailUrl?: never;
 
     /**
      * @returns The template for the icon.
@@ -120,9 +193,9 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
       const { ctaType } = this;
       return html`
         <slot name="icon">
-          <span class="bx--visually-hidden">${ariaLabels[ctaType]}</span>
+          <span class="${prefix}--visually-hidden">${ariaLabels[ctaType]}</span>
           ${icons[ctaType]?.({
-            class: `${prefix}--card__cta ${ddsPrefix}-ce--cta__icon`,
+            class: `${c4dPrefix}--card__cta ${c4dPrefix}-ce--cta__icon`,
           })}
         </slot>
       `;
@@ -135,7 +208,14 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
       // Declaring this mixin as it extends `LitElement` seems to cause a TS error
       // @ts-ignore
       super.updated(changedProperties);
-      const { ctaType, _linkNode: linkNode } = this;
+      const {
+        ctaType,
+        _linkNode: linkNode,
+        videoName,
+        videoDescription,
+        href,
+        videoDuration,
+      } = this;
       if (
         changedProperties.has('ctaType') ||
         changedProperties.has('download')
@@ -201,6 +281,71 @@ const CTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
           );
         }
       }
+
+      const { eventRequestVideoData } = this.constructor as typeof CTAMixinImpl;
+      if (changedProperties.has('ctaType') && ctaType === CTA_TYPE.VIDEO) {
+        if (typeof videoDuration === 'undefined') {
+          this.dispatchEvent(
+            new CustomEvent(eventRequestVideoData, {
+              bubbles: true,
+              cancelable: true,
+              composed: true,
+              detail: {
+                href,
+                videoName,
+                videoDescription,
+              },
+            })
+          );
+        }
+      }
+
+      if (
+        (changedProperties.has('videoName') &&
+          (videoName === null || videoName === 'null')) ||
+        changedProperties.has('videoDescription')
+      ) {
+        this.dispatchEvent(
+          new CustomEvent(eventRequestVideoData, {
+            bubbles: true,
+            cancelable: true,
+            composed: true,
+            detail: {
+              videoName,
+              videoDescription,
+              href,
+            },
+          })
+        );
+      }
+
+      if (ctaType === CTA_TYPE.VIDEO && this.offsetWidth > 0) {
+        this._updateVideoThumbnailUrl();
+      }
+    }
+
+    /**
+     * Updates video thumbnail url to match card width.
+     */
+    _updateVideoThumbnailUrl() {
+      this.videoThumbnailUrl = KalturaPlayerAPI.getThumbnailUrl({
+        mediaId: this.href,
+        width: String(this.offsetWidth),
+      });
+    }
+
+    /**
+     * The name of the custom event fired when there is a user gesture to run the action.
+     */
+    static get eventRequestVideoData() {
+      return `${c4dPrefix}-cta-request-video-data`;
+    }
+
+    /**
+     * The name of the custom event fired when there is a user gesture to run the action.
+     */
+    static get eventRunAction() {
+      return `${c4dPrefix}-cta-run-action`;
     }
   }
 
diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts
index adf5233e84e..eda1b70e95c 100644
--- a/packages/web-components/src/component-mixins/cta/video.ts
+++ b/packages/web-components/src/component-mixins/cta/video.ts
@@ -11,13 +11,13 @@ import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arro
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
-import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { Constructor } from '../../globals/defs';
 import { CTA_TYPE } from '../../components/cta/defs';
 import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Icons to use, keyed by CTA type.
@@ -27,7 +27,7 @@ export const icons = {
   [CTA_TYPE.DOWNLOAD]: Download20,
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.JUMP]: ArrowDown20,
-  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.VIDEO]: PlayFilledAlt20,
 };
 
 /**
@@ -182,14 +182,14 @@ const VideoCTAMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      * The name of the custom event fired when there is a user gesture to run the action.
      */
     static get eventRequestVideoData() {
-      return `${ddsPrefix}-cta-request-video-data`;
+      return `${c4dPrefix}-cta-request-video-data`;
     }
 
     /**
      * The name of the custom event fired when there is a user gesture to run the action.
      */
     static get eventRunAction() {
-      return `${ddsPrefix}-cta-run-action`;
+      return `${c4dPrefix}-cta-run-action`;
     }
   }
 
diff --git a/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts b/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts
index 5cbaa418e41..c4c363c3826 100644
--- a/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts
+++ b/packages/web-components/src/component-mixins/parent-visibility/parent-visibility.ts
@@ -1,17 +1,17 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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 ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { Constructor } from '../../globals/defs';
-import DDSTab from '../../components/tabs-extended/tab';
+import C4DTab from '../../components/tabs-extended/tab';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * @param Base The base class.
@@ -51,7 +51,7 @@ const ParentVisibilityMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
      */
     static get parentsThatHide() {
       return {
-        [`${ddsPrefix}-tab`]: DDSTab.eventTabSelected,
+        [`${c4dPrefix}-tab`]: C4DTab.eventTabSelected,
       };
     }
   }
diff --git a/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx b/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
index beed19d8be7..e9c2e12a96a 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/back-to-top/__stories__/README.stories.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
@@ -26,22 +31,26 @@ import '@carbon/ibmdotcom-web-components/es/components/back-to-top/index.js';
 
 ### HTML
 
-The `<dds-back-to-top>` component is set to position itself above `<dds-footer>` if it is present – it will not scroll into the footer. For easiest implementation place `<dds-back-to-top>` within the page's main content area.
+The `<cds-back-to-top>` component is set to position itself above `<cds-footer>`
+if it is present – it will not scroll into the footer. For easiest
+implementation place `<cds-back-to-top>` within the page's main content area.
 
 ```html
-<dds-back-to-top></dds-back-to-top>
+<cds-back-to-top></cds-back-to-top>
 ```
 
 ## Props
 
-<Props of="dds-back-to-top" />
+<Props of="cds-back-to-top" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<dds-back-to-top>`     | `data-autoid="dds--back-to-top"` | Component   |
+| `<cds-back-to-top>`     | `data-autoid="cds--back-to-top"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx b/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
index b0a35a894fa..1fc52b2d7d6 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/back-to-top/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/back-to-top/back-to-top';
 
@@ -22,7 +27,7 @@ import '@carbon/ibmdotcom-web-components/es/components/back-to-top/index.js';
 function App() {
   return (
     <main id="example-main-content">
-      <DDSBackToTop />
+      <C4DBackToTop />
     </main>
   );
 }
@@ -30,10 +35,12 @@ function App() {
 
 ### HTML
 
-The `<dds-back-to-top>` component is set to position itself above `<dds-footer>` if it is present – it will not scroll into the footer. For easiest implementation place `<dds-back-to-top>` within the page's main content area.
+The `<cds-back-to-top>` component is set to position itself above `<cds-footer>`
+if it is present – it will not scroll into the footer. For easiest
+implementation place `<cds-back-to-top>` within the page's main content area.
 
 ```html
-<dds-back-to-top></dds-back-to-top>
+<cds-back-to-top></cds-back-to-top>
 ```
 
 ## Props
@@ -42,10 +49,12 @@ The `<dds-back-to-top>` component is set to position itself above `<dds-footer>`
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<dds-back-to-top>`     | `data-autoid="dds--back-to-top"` | Component   |
+| `<cds-back-to-top>`     | `data-autoid="cds--back-to-top"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx
index 58da8126b1b..cb4ebd1a150 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx
+++ b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.react.tsx
@@ -11,21 +11,21 @@
 import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-import DDSBackToTop from '@carbon/ibmdotcom-web-components/es/components-react/back-to-top/back-to-top';
-import DDSLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
-import DDSLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DBackToTop from '@carbon/ibmdotcom-web-components/es/components-react/back-to-top/back-to-top';
+import C4DLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 /* eslint-disable max-len */
-import DDSContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import React from 'react';
 import readme from './README.stories.react.mdx';
@@ -119,76 +119,91 @@ bona sunt, inclinet, amari petere vellent. Phasellus laoreet lorem vel dolor tem
 export const Default = () => {
   return (
     <>
-      <DDSLeadspace type="centered">
-        <DDSLeadspaceHeading>Back to Top component demo</DDSLeadspaceHeading>
-        The Back to Top component is designed to appear after the user scrolls the distance equals to current screen height.
-        <DDSButtonGroup slot="action">
-          <DDSButtonGroupItem aria-label="Scroll down" data-target="#section-1" href="#section-1">
+      <C4DLeadspace type="centered">
+        <C4DLeadspaceHeading>Back to Top component demo</C4DLeadspaceHeading>
+        The Back to Top component is designed to appear after the user scrolls
+        the distance equals to current screen height.
+        <C4DButtonGroup slot="action">
+          <C4DButtonGroupItem
+            aria-label="Scroll down"
+            data-target="#section-1"
+            href="#section-1">
             Scroll down
             <ArrowDown20 slot="icon" />
-          </DDSButtonGroupItem>
-        </DDSButtonGroup>
-      </DDSLeadspace>
-      <div className="bx--col-sm-4 bx--col-lg-12 bx--offset-lg-4">
+          </C4DButtonGroupItem>
+        </C4DButtonGroup>
+      </C4DLeadspace>
+      <div className="cds--col-sm-4 cds--col-lg-12 cds--offset-lg-4">
         {/* eslint-disable-next-line jsx-a11y/anchor-is-valid, jsx-a11y/anchor-has-content  */}
         <a name="section-1"></a>
-        <DDSContentBlockSimple>
-          <DDSContentBlockHeading>Best for long pages with important navigational items on top</DDSContentBlockHeading>
-          <DDSContentBlockCopy size="sm">{copy}</DDSContentBlockCopy>
-          <DDSTextCTA cta-type="local" slot="footer" href="#" icon-placement="right">
+        <C4DContentBlockSimple>
+          <C4DContentBlockHeading>
+            Best for long pages with important navigational items on top
+          </C4DContentBlockHeading>
+          <C4DContentBlockCopy size="sm">{copy}</C4DContentBlockCopy>
+          <C4DTextCTA
+            cta-type="local"
+            slot="footer"
+            href="#"
+            icon-placement="right">
             Explore supply chain consulting services
-          </DDSTextCTA>
-        </DDSContentBlockSimple>
+          </C4DTextCTA>
+        </C4DContentBlockSimple>
       </div>
-      <DDSCTASection>
-        <DDSCTABlock _noBorder={true}>
-          <DDSContentBlockHeading>Welcome to the end of page</DDSContentBlockHeading>
-          <DDSContentBlockCopy>
-            To go back to the top of the page with one click, find the Back to top button at the lower right of this page.
-          </DDSContentBlockCopy>
-          <DDSButtonGroup slot="action">
-            <DDSButtonGroupItem href="#">
+      <C4DCTASection>
+        <C4DCTABlock _noBorder={true}>
+          <C4DContentBlockHeading>
+            Welcome to the end of page
+          </C4DContentBlockHeading>
+          <C4DContentBlockCopy>
+            To go back to the top of the page with one click, find the Back to
+            top button at the lower right of this page.
+          </C4DContentBlockCopy>
+          <C4DButtonGroup slot="action">
+            <C4DButtonGroupItem href="#">
               Try it on premises
               <ArrowRight20 slot="icon" />
-            </DDSButtonGroupItem>
-            <DDSButtonGroupItem href="#">
+            </C4DButtonGroupItem>
+            <C4DButtonGroupItem href="#">
               Try it on cloud
               <ArrowRight20 slot="icon" />
-            </DDSButtonGroupItem>
-          </DDSButtonGroup>
-          <DDSLinkList slot="link-list" type="end">
-            <DDSLinkListHeading>More ways to explore Linux servers</DDSLinkListHeading>
-            <DDSLinkListItem href="https://example.com">
+            </C4DButtonGroupItem>
+          </C4DButtonGroup>
+          <C4DLinkList slot="link-list" type="end">
+            <C4DLinkListHeading>
+              More ways to explore Linux servers
+            </C4DLinkListHeading>
+            <C4DLinkListItem href="https://example.com">
               Products <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Key concepts <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Analyst insights <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Blogs <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Client stories <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Events <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Latest Research <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Training <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-            <DDSLinkListItem href="https://example.com">
+            </C4DLinkListItem>
+            <C4DLinkListItem href="https://example.com">
               Partners <ArrowRight20 slot="icon" />
-            </DDSLinkListItem>
-          </DDSLinkList>
-        </DDSCTABlock>
-      </DDSCTASection>
-      <DDSBackToTop />
+            </C4DLinkListItem>
+          </C4DLinkList>
+        </C4DCTABlock>
+      </C4DCTASection>
+      <C4DBackToTop />
     </>
   );
 };
@@ -198,12 +213,12 @@ Default.story = {};
 export default {
   title: 'Components/Back to top',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
           <style type="text/css">{styles.cssText}</style>
-          <div className="bx--grid bx--grid--condensed">
-            <div className="bx--row">
+          <div className="cds--grid cds--grid--condensed">
+            <div className="cds--row">
               <div>{story()}</div>
             </div>
           </div>
diff --git a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.scss b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.scss
index 713ea4a87b2..8aaa3ef2dc6 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.scss
+++ b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.scss
@@ -5,30 +5,31 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents';
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block';
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-segmented/content-block-segmented';
-@import '@carbon/ibmdotcom-styles/scss/components/link-list/link-list';
-@import '@carbon/ibmdotcom-styles/scss/components/callout-with-media/callout-with-media';
-@import '@carbon/ibmdotcom-styles/scss/components/video-player/video-player';
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal';
-@import '@carbon/ibmdotcom-styles/scss/components/ctasection/ctasection';
-@import '@carbon/themes/scss/themes';
+@use '@carbon/ibmdotcom-styles/scss/components/tableofcontents';
+@use '@carbon/ibmdotcom-styles/scss/components/leadspace-block';
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-segmented';
+@use '@carbon/ibmdotcom-styles/scss/components/link-list';
+@use '@carbon/ibmdotcom-styles/scss/components/callout-with-media';
+@use '@carbon/ibmdotcom-styles/scss/components/video-player';
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-horizontal';
+@use '@carbon/ibmdotcom-styles/scss/components/cta-section';
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
 
 @media (min-width: 66rem) {
-  .bx--offset-lg-3 {
+  .cds--offset-lg-3 {
     margin-left: 0;
   }
 }
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-leadspace {
-  @include carbon--theme($carbon--theme--g100, true);
+cds-leadspace {
+  @include theme($g100, true);
 }
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-cta-section {
-  @include carbon--theme($carbon--theme--g10, true);
+cds-cta-section {
+  @include theme($g10, true);
 
-  background-color: $ui-background;
+  background-color: $background;
 }
diff --git a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.ts b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.ts
index bf66ecd01a9..a31674d5842 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.ts
+++ b/packages/web-components/src/components/back-to-top/__stories__/back-to-top.stories.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '../index';
 import '../../dotcom-shell/dotcom-shell-container';
 import readme from './README.stories.mdx';
@@ -19,10 +19,10 @@ export const Default = () => {
     <style>
       ${styles}
     </style>
-    <dds-dotcom-shell-container>
+    <c4d-dotcom-shell-container>
       ${StoryContent()}
-      <dds-back-to-top></dds-back-to-top>
-    </dds-dotcom-shell-container>
+      <c4d-back-to-top></c4d-back-to-top>
+    </c4d-dotcom-shell-container>
   `;
 };
 
diff --git a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts
index 1e2ab222aae..b427daedf89 100644
--- a/packages/web-components/src/components/back-to-top/__stories__/data/content.ts
+++ b/packages/web-components/src/components/back-to-top/__stories__/data/content.ts
@@ -5,8 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../../../leadspace/index';
 import '../../../content-block-simple/index';
 import '../../../content-group-simple/index';
@@ -15,6 +14,7 @@ import '../../../card-section-simple/index';
 import '../../../cta-section/index';
 import '../../../link-list/index';
 import '../../../cta/index';
+import '../../../cta/link-list-item-cta';
 import '../../../button/index';
 
 import ArrowRight20 from '../../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
@@ -30,24 +30,25 @@ communities as a way to stay at the forefront of development.`;
 // the purposes of checking the behavior of the back to top button.
 const FauxNextPage = html`
   <main>
-    <div class="bx--grid bx--grid--narrow">
-      <div class="bx--row">
-        <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-4">
-          <dds-content-block-simple complementary-style-scheme="with-border">
-            <dds-content-block-heading
+    <div class="cds--grid cds--grid--narrow">
+      <div class="cds--row">
+        <div
+          class="cds--col-sm-4 cds--col-md-8 cds--col-lg-12 cds--offset-lg-4">
+          <c4d-content-block-simple complementary-style-scheme="with-border">
+            <c4d-content-block-heading
               >Flexibility and control are the key to open source Linux
-              development</dds-content-block-heading
+              development</c4d-content-block-heading
             >
-            <dds-content-block-copy allowHTML="false" size="sm"
-              >${copy}</dds-content-block-copy
+            <c4d-content-block-copy allowHTML="false" size="sm"
+              >${copy}</c4d-content-block-copy
             >
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
               cta-type="local"
               href="https://example.com">
               Explore supply chain consulting services
-            </dds-text-cta>
-          </dds-content-block-simple>
+            </c4d-text-cta>
+          </c4d-content-block-simple>
         </div>
       </div>
     </div>
@@ -56,22 +57,22 @@ const FauxNextPage = html`
 
 export const StoryContent = () =>
   html`
-    <dds-leadspace
+    <c4d-leadspace
       size="medium"
       gradient-style-scheme=""
       alt="Image alt text"
       default-src="${leadspaceImg}"
-      data-autoid="dds--leadspace">
-      <dds-leadspace-heading role="heading" aria-level="1" slot="heading"
-        >Linux servers and operating systems</dds-leadspace-heading
+      data-autoid="c4d--leadspace">
+      <c4d-leadspace-heading role="heading" aria-level="1" slot="heading"
+        >Linux servers and operating systems</c4d-leadspace-heading
       >
       Optimize your IT infrastructure — on-premises and in the cloud — with the
       flexibility and control that comes with open source development
-      <dds-button-group
+      <c4d-button-group
         slot="action"
         role="list"
-        style="--dds--button-group--item-count:2;">
-        <dds-button-group-item
+        style="--c4d--button-group--item-count:2;">
+        <c4d-button-group-item
           aria-label=""
           href="https://example.com"
           role="listitem"
@@ -90,8 +91,8 @@ export const StoryContent = () =>
             slot="icon">
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path></svg
-        ></dds-button-group-item>
-        <dds-button-group-item
+        ></c4d-button-group-item>
+        <c4d-button-group-item
           aria-label=""
           href="https://example.com"
           role="listitem"
@@ -110,214 +111,217 @@ export const StoryContent = () =>
             slot="icon">
             <path
               d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path></svg
-        ></dds-button-group-item>
-      </dds-button-group>
-      <dds-leadspace-image
+        ></c4d-button-group-item>
+      </c4d-button-group>
+      <c4d-leadspace-image
         slot="image"
         alt="Image alt text"
         default-src="${leadspaceImg}"
-        data-autoid="dds--image">
-        <dds-image-item
+        data-autoid="c4d--image">
+        <c4d-image-item
           media="(min-width: 672px)"
-          srcset="${leadspaceImg}"></dds-image-item>
-        <dds-image-item
+          srcset="${leadspaceImg}"></c4d-image-item>
+        <c4d-image-item
           media="(min-width: 0)"
-          srcset="${leadspaceImg}"></dds-image-item>
-      </dds-leadspace-image>
-    </dds-leadspace>
+          srcset="${leadspaceImg}"></c4d-image-item>
+      </c4d-leadspace-image>
+    </c4d-leadspace>
     <main>
-      <div class="bx--grid bx--grid--narrow">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-4">
-            <dds-content-block-simple complementary-style-scheme="with-border">
-              <dds-content-block-heading
+      <div class="cds--grid cds--grid--narrow">
+        <div class="cds--row">
+          <div
+            class="cds--col-sm-4 cds--col-md-8 cds--col-lg-12 cds--offset-lg-4">
+            <c4d-content-block-simple complementary-style-scheme="with-border">
+              <c4d-content-block-heading
                 >Flexibility and control are the key to open source Linux
-                development</dds-content-block-heading
+                development</c4d-content-block-heading
               >
-              <dds-content-block-copy allowHTML="false" size="sm"
-                >${copy}</dds-content-block-copy
+              <c4d-content-block-copy allowHTML="false" size="sm"
+                >${copy}</c4d-content-block-copy
               >
-              <dds-text-cta
+              <c4d-text-cta
                 slot="footer"
                 cta-type="local"
                 href="https://example.com">
                 Explore supply chain consulting services
-              </dds-text-cta>
-            </dds-content-block-simple>
+              </c4d-text-cta>
+            </c4d-content-block-simple>
           </div>
         </div>
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-4">
-            <dds-content-block-simple>
-              <dds-content-block-heading
-                >What sets IBM Linux servers apart?</dds-content-block-heading
+        <div class="cds--row">
+          <div
+            class="cds--col-sm-4 cds--col-md-8 cds--col-lg-12 cds--offset-lg-4">
+            <c4d-content-block-simple>
+              <c4d-content-block-heading
+                >What sets IBM Linux servers apart?</c4d-content-block-heading
               >
-              <dds-link-list type="default" slot="complementary">
-                <dds-link-list-heading>Resources</dds-link-list-heading>
-                <dds-link-list-item-card-cta
+              <c4d-link-list type="default" slot="complementary">
+                <c4d-link-list-heading>Resources</c4d-link-list-heading>
+                <c4d-link-list-item-cta
                   href="https://example.com"
-                  cta-type="local">
+                  cta-type="local"
+                  type="default">
                   <p>Read the solution brief</p>
-                  <dds-card-cta-footer></dds-card-cta-footer>
-                </dds-link-list-item-card-cta>
-                <dds-link-list-item-card-cta
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta
                   href="https://example.com"
-                  cta-type="external">
+                  cta-type="external"
+                  type="default">
                   <p>What is LinuxOne?</p>
-                  <dds-card-cta-footer></dds-card-cta-footer>
-                </dds-link-list-item-card-cta>
-              </dds-link-list>
-              <dds-content-block-copy>
-                <dds-content-item>
-                  <dds-content-item-heading
-                    >Industry-leading performance</dds-content-item-heading
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+              <c4d-content-block-copy>
+                <c4d-content-item>
+                  <c4d-content-item-heading
+                    >Industry-leading performance</c4d-content-item-heading
                   >
-                  <dds-content-item-copy
+                  <c4d-content-item-copy
                     >Potential for 30% improvement in transactional response
                     time with fast data retrieval and queries, plus disk space
-                    compression.</dds-content-item-copy
+                    compression.</c4d-content-item-copy
                   >
-                </dds-content-item>
-                <dds-content-item>
-                  <dds-content-item-heading
-                    >Advanced protection</dds-content-item-heading
+                </c4d-content-item>
+                <c4d-content-item>
+                  <c4d-content-item-heading
+                    >Advanced protection</c4d-content-item-heading
                   >
-                  <dds-content-item-copy
+                  <c4d-content-item-copy
                     >Sophisticated authorization, encryption at rest and in
                     transit, and comprehensive security controls for managing
-                    GDPR compliance.</dds-content-item-copy
+                    GDPR compliance.</c4d-content-item-copy
                   >
-                </dds-content-item>
-                <dds-content-item>
-                  <dds-content-item-heading
-                    >Continuous availability</dds-content-item-heading
+                </c4d-content-item>
+                <c4d-content-item>
+                  <c4d-content-item-heading
+                    >Continuous availability</c4d-content-item-heading
                   >
-                  <dds-content-item-copy
+                  <c4d-content-item-copy
                     >Auto resynchronization and recovery plus clustering with
                     IBM pureScale® to keep your business running
-                    24x7.</dds-content-item-copy
+                    24x7.</c4d-content-item-copy
                   >
-                </dds-content-item>
-                <dds-content-item>
-                  <dds-content-item-heading
+                </c4d-content-item>
+                <c4d-content-item>
+                  <c4d-content-item-heading
                     >Automated administration and
-                    tooling</dds-content-item-heading
+                    tooling</c4d-content-item-heading
                   >
-                  <dds-content-item-copy
+                  <c4d-content-item-copy
                     >Automatic setup, optimization, diagnostics and management
                     of the database environment to save administration time and
-                    cut maintenance costs.</dds-content-item-copy
+                    cut maintenance costs.</c4d-content-item-copy
                   >
-                </dds-content-item>
-                <dds-content-item>
-                  <dds-content-item-heading
-                    >Multiple data types and languages</dds-content-item-heading
+                </c4d-content-item>
+                <c4d-content-item>
+                  <c4d-content-item-heading
+                    >Multiple data types and languages</c4d-content-item-heading
                   >
-                  <dds-content-item-copy
+                  <c4d-content-item-copy
                     >Integration with multiple platforms to build robust apps.
                     Supports NoSQL, pureXML, Graph and JSON, Java, .Net, Ruby,
-                    Python, Perl and more.</dds-content-item-copy
+                    Python, Perl and more.</c4d-content-item-copy
                   >
-                </dds-content-item>
-                <dds-content-item>
-                  <dds-content-item-heading>Scaling</dds-content-item-heading>
-                  <dds-content-item-copy
+                </c4d-content-item>
+                <c4d-content-item>
+                  <c4d-content-item-heading>Scaling</c4d-content-item-heading>
+                  <c4d-content-item-copy
                     >Elastic scaling of up to 128 machines in multicloud and
                     hybrid environments to reduce storage costs, plus data
-                    federation to eliminate data silos.</dds-content-item-copy
+                    federation to eliminate data silos.</c4d-content-item-copy
                   >
-                </dds-content-item>
-              </dds-content-block-copy>
-            </dds-content-block-simple>
+                </c4d-content-item>
+              </c4d-content-block-copy>
+            </c4d-content-block-simple>
           </div>
         </div>
       </div>
-      <div class="bx--grid bx--no-gutter">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-8 bx--offset-lg-4">
-            <dds-content-group-simple>
-              <dds-content-group-heading
-                >See how it works</dds-content-group-heading
+      <div class="cds--grid cds--no-gutter">
+        <div class="cds--row">
+          <div
+            class="cds--col-sm-4 cds--col-md-8 cds--col-lg-8 cds--offset-lg-4">
+            <c4d-content-group-simple>
+              <c4d-content-group-heading
+                >See how it works</c4d-content-group-heading
               >
-              <dds-feature-card href="https://example.com">
-                <dds-image
+              <c4d-feature-card href="https://example.com">
+                <c4d-image
                   slot="image"
                   alt="Feature card image"
-                  default-src="${imgLg1x1}"></dds-image>
-                <dds-card-heading
+                  default-src="${imgLg1x1}"></c4d-image>
+                <c4d-card-heading
                   >Discover how innovative companies are using open source
-                  technology to ignite collaboration</dds-card-heading
+                  technology to ignite collaboration</c4d-card-heading
                 >
-                <dds-feature-card-footer>
+                <c4d-feature-card-footer>
                   ${ArrowRight20({ slot: 'icon' })}
-                </dds-feature-card-footer>
-              </dds-feature-card>
-            </dds-content-group-simple>
+                </c4d-feature-card-footer>
+              </c4d-feature-card>
+            </c4d-content-group-simple>
           </div>
         </div>
       </div>
-      <div class="bx--grid bx--no-gutter">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-16">
-            <dds-card-section-simple>
-              <dds-content-section-heading
-                >Linux operating systems</dds-content-section-heading
+      <div class="cds--grid cds--no-gutter">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--col-md-8 cds--col-lg-16">
+            <c4d-card-section-simple>
+              <c4d-content-section-heading
+                >Linux operating systems</c4d-content-section-heading
               >
-              <dds-card-group>
-                <dds-card-group-item href="https://example.com">
-                  <dds-card-heading>Linux OS on mainframes</dds-card-heading>
+              <c4d-card-group>
+                <c4d-card-group-item href="https://example.com">
+                  <c4d-card-heading>Linux OS on mainframes</c4d-card-heading>
                   Linux on IBM mainframes lets you transform your application
                   and data portfolio with data privacy, security, and cyber
                   resiliency.
-                  <dds-card-cta-footer slot="footer">
+                  <c4d-card-cta-footer slot="footer">
                     ${ArrowRight20({ slot: 'icon' })}
-                  </dds-card-cta-footer>
-                </dds-card-group-item>
-                <dds-card-group-item href="https://example.com">
-                  <dds-card-heading>Linux OS on LinuxONE</dds-card-heading>
+                  </c4d-card-cta-footer>
+                </c4d-card-group-item>
+                <c4d-card-group-item href="https://example.com">
+                  <c4d-card-heading>Linux OS on LinuxONE</c4d-card-heading>
                   <p>
                     Transform your application and data portfolio with
                     innovative data privacy, security and cyber resiliency
                     capabilities, plus minimal downtime.
                   </p>
-                  <dds-card-cta-footer slot="footer">
+                  <c4d-card-cta-footer slot="footer">
                     ${ArrowRight20({ slot: 'icon' })}
-                  </dds-card-cta-footer>
-                </dds-card-group-item>
-                <dds-card-group-item href="https://example.com">
-                  <dds-card-heading>Linux OS on Power Systems</dds-card-heading>
+                  </c4d-card-cta-footer>
+                </c4d-card-group-item>
+                <c4d-card-group-item href="https://example.com">
+                  <c4d-card-heading>Linux OS on Power Systems</c4d-card-heading>
                   <p>
                     Process massive amounts of data quickly, efficiently and
                     cost-effectively on an open, scalable infrastructure with
                     built-in acceleration.
                   </p>
-                  <dds-card-cta-footer slot="footer">
+                  <c4d-card-cta-footer slot="footer">
                     ${ArrowRight20({ slot: 'icon' })}
-                  </dds-card-cta-footer>
-                </dds-card-group-item>
-              </dds-card-group>
-            </dds-card-section-simple>
+                  </c4d-card-cta-footer>
+                </c4d-card-group-item>
+              </c4d-card-group>
+            </c4d-card-section-simple>
           </div>
         </div>
       </div>
 
-      <div class="bx--grid bx--no-gutter">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-16">
-            <dds-cta-section>
-              <dds-cta-block no-border>
-                <dds-content-block-heading
-                  >Take the next step</dds-content-block-heading
+      <div class="cds--grid cds--no-gutter">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--col-md-8 cds--col-lg-16">
+            <c4d-cta-section>
+              <c4d-cta-block no-border>
+                <c4d-content-block-heading
+                  >Take the next step</c4d-content-block-heading
                 >
-                <dds-content-block-copy
+                <c4d-content-block-copy
                   >Get started with Linux servers and operating systems at the
-                  foundation of your IT infrastructure.</dds-content-block-copy
+                  foundation of your IT infrastructure.</c4d-content-block-copy
                 >
-                <dds-button-group
+                <c4d-button-group
                   slot="action"
                   role="list"
-                  style="--dds--button-group--item-count:2;">
-                  <dds-button-group-item
+                  style="--c4d--button-group--item-count:2;">
+                  <c4d-button-group-item
                     aria-label=""
                     href="https://example.com"
                     role="listitem"
@@ -336,8 +340,8 @@ export const StoryContent = () =>
                       slot="icon">
                       <path
                         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path></svg
-                  ></dds-button-group-item>
-                  <dds-button-group-item
+                  ></c4d-button-group-item>
+                  <c4d-button-group-item
                     aria-label=""
                     href="https://example.com"
                     role="listitem"
@@ -356,62 +360,63 @@ export const StoryContent = () =>
                       slot="icon">
                       <path
                         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path></svg
-                  ></dds-button-group-item>
-                </dds-button-group>
-                <dds-link-list slot="link-list" type="end">
-                  <dds-link-list-heading
-                    >More ways to explore Linux servers</dds-link-list-heading
+                  ></c4d-button-group-item>
+                </c4d-button-group>
+                <c4d-link-list slot="link-list" type="end">
+                  <c4d-link-list-heading
+                    >More ways to explore Linux servers</c4d-link-list-heading
                   >
-                  <dds-link-list-item href="https://example.com">
+                  <c4d-link-list-item href="https://example.com">
                     Products ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Blogs ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Latest research ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Key concepts ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Client stories ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Training ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Analyst insights ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Events ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                  <dds-link-list-item href="https://example.com">
+                  </c4d-link-list-item>
+                  <c4d-link-list-item href="https://example.com">
                     Partners ${ArrowRight20({ slot: 'icon' })}
-                  </dds-link-list-item>
-                </dds-link-list>
-              </dds-cta-block>
-            </dds-cta-section>
+                  </c4d-link-list-item>
+                </c4d-link-list>
+              </c4d-cta-block>
+            </c4d-cta-section>
           </div>
         </div>
       </div>
-      <div class="bx--grid bx--grid--narrow">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-4">
-            <dds-content-block-simple>
-              <dds-content-block-heading
+      <div class="cds--grid cds--grid--narrow">
+        <div class="cds--row">
+          <div
+            class="cds--col-sm-4 cds--col-md-8 cds--col-lg-12 cds--offset-lg-4">
+            <c4d-content-block-simple>
+              <c4d-content-block-heading
                 >Learn more by going to the next
-                page?</dds-content-block-heading
+                page?</c4d-content-block-heading
               >
-              <dds-content-block-copy>
-                <dds-button-expressive
+              <c4d-content-block-copy>
+                <c4d-button-expressive
                   kind="primary"
                   @click=${() => {
                     // @ts-ignore
                     const main: Element = document
-                      .querySelector('dds-dotcom-shell-container')
+                      .querySelector('c4d-dotcom-shell-container')
                       .querySelector('main');
-                    render(FauxNextPage, main);
+                    render(FauxNextPage, main as HTMLElement);
                   }}>
                   Next page
                   <svg
@@ -426,9 +431,9 @@ export const StoryContent = () =>
                     <path
                       d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
                   </svg>
-                </dds-button-expressive>
-              </dds-content-block-copy>
-            </dds-content-block-simple>
+                </c4d-button-expressive>
+              </c4d-content-block-copy>
+            </c4d-content-block-simple>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/src/components/back-to-top/back-to-top.scss b/packages/web-components/src/components/back-to-top/back-to-top.scss
index 7728496cc17..06bb5bd35fb 100644
--- a/packages/web-components/src/components/back-to-top/back-to-top.scss
+++ b/packages/web-components/src/components/back-to-top/back-to-top.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/back-to-top/back-to-top';
+@use '@carbon/ibmdotcom-styles/scss/components/back-to-top';
diff --git a/packages/web-components/src/components/back-to-top/back-to-top.ts b/packages/web-components/src/components/back-to-top/back-to-top.ts
index d840736caf0..c742e97296c 100644
--- a/packages/web-components/src/components/back-to-top/back-to-top.ts
+++ b/packages/web-components/src/components/back-to-top/back-to-top.ts
@@ -7,19 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
 import throttle from 'lodash-es/throttle.js';
 import UpToTop20 from '../../internal/vendor/@carbon/web-components/icons/up-to-top/20.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './back-to-top.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 interface Cancelable {
   cancel(): void;
 }
@@ -27,10 +26,10 @@ interface Cancelable {
 /**
  * Back to top
  *
- * @element dds-back-to-top
+ * @element c4d-back-to-top
  */
-@customElement(`${ddsPrefix}-back-to-top`)
-class DDSBackToTop extends HostListenerMixin(StableSelectorMixin(LitElement)) {
+@customElement(`${c4dPrefix}-back-to-top`)
+class C4DBackToTop extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   /**
    * The observer for the resize of the document body.
    */
@@ -179,11 +178,11 @@ class DDSBackToTop extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--back-to-top`;
+    return `${c4dPrefix}--back-to-top`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSBackToTop;
+export default C4DBackToTop;
diff --git a/packages/web-components/src/components/background-media/__stories__/README.stories.mdx b/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
index 1d6eca3c76b..1ffd07e4d0a 100644
--- a/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/background-media/__stories__/README.stories.mdx
@@ -32,51 +32,51 @@ import '@carbon/ibmdotcom-web-components/es/components/background-media/index.js
 #### With Background Image
 
 ```html
-<dds-background-media
+<cds-background-media
   gradient-direction="left-to-right"
   alt="Image alt text"
   default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  <dds-image-item
+  <cds-image-item
     media="(min-width: 1584px)"
     srcset="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item
+  </cds-image-item>
+  <cds-image-item
     media="(min-width: 1312px)"
     srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item
+  </cds-image-item>
+  <cds-image-item
     media="(min-width: 672px)"
     srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item
+  </cds-image-item>
+  <cds-image-item
     media="(min-width: 320px)"
     srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item
+  </cds-image-item>
+  <cds-image-item
     media="(min-width: 0px)"
     srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-</dds-background-media>
+  </cds-image-item>
+</cds-background-media>
 ```
 
 #### With Background Video
 
 ```html
-<dds-background-media
+<cds-background-media
   gradient-direction="left-to-right"
   alt="Image alt text"
   default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-  <dds-video-player-container
+  <cds-video-player-container
     playing-mode="inline"
-    video-id="1_9h94wo6b"
+    video-id="0_ibuqxqbe"
     background-mode="true">
-  </dds-video-player-container>
-</dds-background-media>
+  </cds-video-player-container>
+</cds-background-media>
 ```
 
 ## Props
 
-<Props of="dds-background-media" />
+<Props of="cds-background-media" />
 
 ## Stable selectors
 
@@ -86,6 +86,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<dds-background-media>` | `data-autoid="dds--background-media"` | Component   |
+| `<cds-background-media>` | `data-autoid="cds--background-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx
index c4f2c887c49..22c6a68e0bd 100644
--- a/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/background-media/__stories__/README.stories.react.mdx
@@ -24,42 +24,42 @@ Here's a quick example to get you started.
 #### With Background Image
 
 ```javascript
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 
 function App() {
   return (
-    <DDSBackgroundMedia
+    <C4DBackgroundMedia
       gradient-direction="left-to-right"
       mobile-position=""
       alt="Image alt text"
       default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-      <DDSImageItem
+      <C4DImageItem
         media="(min-width: 1584px)"
         srcset="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
         {' '}
-      </DDSImageItem>
-      <DDSImageItem
+      </C4DImageItem>
+      <C4DImageItem
         media="(min-width: 1312px)"
         srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
         {' '}
-      </DDSImageItem>
-      <DDSImageItem
+      </C4DImageItem>
+      <C4DImageItem
         media="(min-width: 672px)"
         srcset="https://fpoimg.com/1594x887?text=16:9&bg_color=ee5396&text_color=161616">
         {' '}
-      </DDSImageItem>
-      <DDSImageItem
+      </C4DImageItem>
+      <C4DImageItem
         media="(min-width: 320px)"
         srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
         {' '}
-      </DDSImageItem>
-      <DDSImageItem
+      </C4DImageItem>
+      <C4DImageItem
         media="(min-width: 0px)"
         srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
         {' '}
-      </DDSImageItem>
-    </DDSBackgroundMedia>
+      </C4DImageItem>
+    </C4DBackgroundMedia>
   );
 }
 ```
@@ -67,20 +67,20 @@ function App() {
 #### With Background Video
 
 ```javascript
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 
 function App() {
   return (
-    <DDSBackgroundMedia
+    <C4DBackgroundMedia
       gradient-direction="left-to-right"
       mobile-position=""
       alt="Image alt text"
       default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616">
-      <DDSVideoPlayerContainer
-        video-id="1_9h94wo6b"
-        background-mode="true"></DDSVideoPlayerContainer>
-    </DDSBackgroundMedia>
+      <C4DVideoPlayerContainer
+        video-id="0_ibuqxqbe"
+        background-mode="true"></C4DVideoPlayerContainer>
+    </C4DBackgroundMedia>
   );
 }
 ```
@@ -97,6 +97,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<dds-background-media>` | `data-autoid="dds--background-media"` | Component   |
+| `<cds-background-media>` | `data-autoid="cds--background-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/background-media/__stories__/background-media.stories.react.tsx b/packages/web-components/src/components/background-media/__stories__/background-media.stories.react.tsx
index 130ed02a0cb..458be28df74 100644
--- a/packages/web-components/src/components/background-media/__stories__/background-media.stories.react.tsx
+++ b/packages/web-components/src/components/background-media/__stories__/background-media.stories.react.tsx
@@ -12,9 +12,9 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 import imgMax from '../../../../../storybook-images/assets/leadspace/leadspaceMax.jpg';
 import imgLg16x9 from '../../../../../storybook-images/assets/leadspace/fpo--leadspace--16x9--1594x891--005.jpg';
 import imgSm4x3 from '../../../../../storybook-images/assets/leadspace/fpo--leadspace--4x3--480x360--005.jpg';
@@ -26,64 +26,72 @@ const gradientDirections = {
   [`Top to Bottom`]: GRADIENT_DIRECTION.TOP_TO_BOTTOM,
 };
 
-export const Default = args => {
-  const { alt, gradientDirection, backgroundOpacity } = args?.['dds-background-media'] ?? {};
+export const Default = (args) => {
+  const { alt, gradientDirection, backgroundOpacity } =
+    args?.['cds-background-media'] ?? {};
   return (
-    <DDSBackgroundMedia
+    <C4DBackgroundMedia
       gradient-direction={gradientDirection}
       mobile-position="bottom"
       alt={alt}
       default-src={imgMax}
       opacity={backgroundOpacity}>
-      <DDSImageItem media="(min-width: 1584px)" srcset={imgMax}>
+      <C4DImageItem media="(min-width: 1584px)" srcset={imgMax}>
         {' '}
-      </DDSImageItem>
-      <DDSImageItem media="(min-width: 1312px)" srcset={imgLg16x9}>
+      </C4DImageItem>
+      <C4DImageItem media="(min-width: 1312px)" srcset={imgLg16x9}>
         {' '}
-      </DDSImageItem>
-      <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9}>
+      </C4DImageItem>
+      <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9}>
         {' '}
-      </DDSImageItem>
-      <DDSImageItem media="(min-width: 320px)" srcset={imgSm4x3}>
+      </C4DImageItem>
+      <C4DImageItem media="(min-width: 320px)" srcset={imgSm4x3}>
         {' '}
-      </DDSImageItem>
-      <DDSImageItem media="(min-width: 0px)" srcset={imgSm4x3}>
+      </C4DImageItem>
+      <C4DImageItem media="(min-width: 0px)" srcset={imgSm4x3}>
         {' '}
-      </DDSImageItem>
-    </DDSBackgroundMedia>
+      </C4DImageItem>
+    </C4DBackgroundMedia>
   );
 };
 
-export const WithVideo = args => {
-  const { gradientDirection, backgroundOpacity } = args?.['dds-background-media'] ?? {};
+export const WithVideo = (args) => {
+  const { gradientDirection, backgroundOpacity } =
+    args?.['cds-background-media'] ?? {};
   return (
     <div style={{ height: '70vh' }}>
-      <DDSBackgroundMedia gradient-direction={gradientDirection} mobile-position="bottom" opacity={backgroundOpacity}>
-        <DDSVideoPlayerContainer video-id="1_9h94wo6b" background-mode="true"></DDSVideoPlayerContainer>
-      </DDSBackgroundMedia>
+      <C4DBackgroundMedia
+        gradient-direction={gradientDirection}
+        mobile-position="bottom"
+        opacity={backgroundOpacity}>
+        <C4DVideoPlayerContainer
+          video-id="0_ibuqxqbe"
+          background-mode="true"></C4DVideoPlayerContainer>
+      </C4DBackgroundMedia>
     </div>
   );
 };
 
-export const WithDefaultSource = args => {
-  const { alt, gradientDirection, backgroundOpacity } = args?.['dds-background-media'] ?? {};
+export const WithDefaultSource = (args) => {
+  const { alt, gradientDirection, backgroundOpacity } =
+    args?.['cds-background-media'] ?? {};
   return (
-    <DDSBackgroundMedia
+    <C4DBackgroundMedia
       gradient-direction={gradientDirection}
       mobile-position="bottom"
       alt={alt}
       default-src={imgMax}
-      opacity={backgroundOpacity}></DDSBackgroundMedia>
+      opacity={backgroundOpacity}></C4DBackgroundMedia>
   );
 };
 
 export default {
   title: 'Components/Background media',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--no-gutter">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-sm-4 cds--no-gutter">{story()}</div>
         </div>
       </div>
     ),
@@ -92,7 +100,7 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      'dds-background-media': () => ({
+      'cds-background-media': () => ({
         gradientDirection: select(
           'Gradient Direction (gradient-direction):',
           gradientDirections,
@@ -100,12 +108,16 @@ export default {
         ),
         alt: text('Image alt text (alt):', 'Image alt text'),
         defaultSrc: text('Default image (default-src)', imgMax),
-        backgroundOpacity: number('Background Opacity', 100, { range: true, min: 0, max: 100 }),
+        backgroundOpacity: number('Background Opacity', 100, {
+          range: true,
+          min: 0,
+          max: 100,
+        }),
       }),
     },
     propsSet: {
       default: {
-        'dds-background-media': {
+        'cds-background-media': {
           gradientDirection: 'left-to-right',
           alt: 'Image alt text',
           defaultSrc: imgMax,
diff --git a/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts b/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
index 2fa22f59973..712a6a32780 100644
--- a/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
+++ b/packages/web-components/src/components/background-media/__stories__/background-media.stories.ts
@@ -9,8 +9,8 @@
 
 import '../index';
 import '../../video-player/video-player-container';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { text, select, number } from '@storybook/addon-knobs';
 import imgMax from '../../../../../storybook-images/assets/leadspace/leadspaceMax.jpg';
 import imgLg16x9 from '../../../../../storybook-images/assets/leadspace/fpo--leadspace--16x9--1594x891--005.jpg';
@@ -25,53 +25,53 @@ const gradientDirections = {
 
 export const Default = (args) => {
   const { alt, gradientDirection, backgroundOpacity } =
-    args?.['dds-background-media'] ?? {};
+    args?.['c4d-background-media'] ?? {};
   return html`
-    <dds-background-media
-      gradient-direction="${ifNonNull(gradientDirection)}"
-      alt="${ifNonNull(alt)}"
+    <c4d-background-media
+      gradient-direction="${ifDefined(gradientDirection)}"
+      alt="${ifDefined(alt)}"
       default-src="${imgMax}"
-      opacity="${ifNonNull(backgroundOpacity)}">
-      <dds-image-item media="(min-width: 1584px)" srcset="${imgMax}">
-      </dds-image-item>
-      <dds-image-item media="(min-width: 1312px)" srcset="${imgLg16x9}">
-      </dds-image-item>
-      <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-      </dds-image-item>
-      <dds-image-item media="(min-width: 320px)" srcset="${imgSm4x3}">
-      </dds-image-item>
-      <dds-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
-      </dds-image-item>
-    </dds-background-media>
+      opacity="${ifDefined(backgroundOpacity)}">
+      <c4d-image-item media="(min-width: 1584px)" srcset="${imgMax}">
+      </c4d-image-item>
+      <c4d-image-item media="(min-width: 1312px)" srcset="${imgLg16x9}">
+      </c4d-image-item>
+      <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+      </c4d-image-item>
+      <c4d-image-item media="(min-width: 320px)" srcset="${imgSm4x3}">
+      </c4d-image-item>
+      <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
+      </c4d-image-item>
+    </c4d-background-media>
   `;
 };
 
 export const WithVideo = (args) => {
   const { gradientDirection, backgroundOpacity } =
-    args?.['dds-background-media'] ?? {};
+    args?.['c4d-background-media'] ?? {};
   return html`
     <div style="height: 70vh;">
-      <dds-background-media
-        gradient-direction="${ifNonNull(gradientDirection)}"
-        opacity="${ifNonNull(backgroundOpacity)}">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
-          background-mode="true"></dds-video-player-container>
-      </dds-background-media>
+      <c4d-background-media
+        gradient-direction="${ifDefined(gradientDirection)}"
+        opacity="${ifDefined(backgroundOpacity)}">
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"
+          background-mode="true"></c4d-video-player-container>
+      </c4d-background-media>
     </div>
   `;
 };
 
 export const WithDefaultSource = (args) => {
   const { alt, gradientDirection, backgroundOpacity } =
-    args?.['dds-background-media'] ?? {};
+    args?.['c4d-background-media'] ?? {};
   return html`
-    <dds-background-media
-      gradient-direction="${ifNonNull(gradientDirection)}"
-      alt="${ifNonNull(alt)}"
+    <c4d-background-media
+      gradient-direction="${ifDefined(gradientDirection)}"
+      alt="${ifDefined(alt)}"
       default-src="${imgMax}"
-      opacity="${ifNonNull(backgroundOpacity)}">
-    </dds-background-media>
+      opacity="${ifDefined(backgroundOpacity)}">
+    </c4d-background-media>
   `;
 };
 
@@ -79,9 +79,9 @@ export default {
   title: 'Components/Background media',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
@@ -90,7 +90,7 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      'dds-background-media': () => ({
+      'c4d-background-media': () => ({
         gradientDirection: select(
           'Gradient Direction (gradient-direction):',
           gradientDirections,
@@ -107,7 +107,7 @@ export default {
     },
     propsSet: {
       default: {
-        'dds-background-media': {
+        'c4d-background-media': {
           gradientDirection: 'left-to-right',
           alt: 'Image alt text',
           defaultSrc: imgMax,
diff --git a/packages/web-components/src/components/background-media/__tests__/background-media.test.ts b/packages/web-components/src/components/background-media/__tests__/background-media.test.ts
index 267c6e4cd8d..217e4c5e1b0 100644
--- a/packages/web-components/src/components/background-media/__tests__/background-media.test.ts
+++ b/packages/web-components/src/components/background-media/__tests__/background-media.test.ts
@@ -1,28 +1,28 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../index';
 import { Default } from '../__stories__/background-media.stories';
 
 const template = (props?) =>
   Default({
-    'dds-background-media': props,
+    'c4d-background-media': props,
   });
 
-describe('dds-background-media', function () {
+describe('c4d-background-media', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-background-media>`
+      await Promise.resolve(); // Update cycle for `<c4d-background-media>`
       expect(
-        document.body.querySelector('dds-background-media')
+        document.body.querySelector('c4d-background-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -36,9 +36,9 @@ describe('dds-background-media', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-background-media>`
+      await Promise.resolve(); // Update cycle for `<c4d-background-media>`
       expect(
-        document.body.querySelector('dds-background-media')
+        document.body.querySelector('c4d-background-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/background-media/background-media.scss b/packages/web-components/src/components/background-media/background-media.scss
index 6bf31c496b5..25f68e32a51 100644
--- a/packages/web-components/src/components/background-media/background-media.scss
+++ b/packages/web-components/src/components/background-media/background-media.scss
@@ -1,39 +1,8 @@
 //
-// Copyright IBM Corp. 2021, 2022
+// Copyright IBM Corp. 2021, 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/background-media/background-media';
-@import '@carbon/web-components/scss/components/tooltip/tooltip';
-
-.#{$prefix}--background-media--video {
-  aspect-ratio: 16 / 9; /* stylelint-disable-line property-no-unknown */
-  @include carbon--breakpoint(md) {
-    aspect-ratio: auto; /* stylelint-disable-line property-no-unknown */
-  }
-}
-
-.#{$prefix}--video-player__controls[hasTooltip] {
-  @include tooltip--trigger('definition', top);
-  @include tooltip--placement('definition', 'top', 'end');
-
-  position: absolute;
-  border: $spacing-01 solid transparent;
-  background-clip: padding-box;
-
-  &:focus {
-    border-color: $text-01;
-    outline: $spacing-01 solid $ui-background;
-  }
-}
-
-.#{$prefix}--background-media--container {
-  contain: layout;
-}
-
-.#{$prefix}--background-media--item {
-  height: 100%;
-}
+@use '@carbon/ibmdotcom-styles/scss/components/background-media';
diff --git a/packages/web-components/src/components/background-media/background-media.ts b/packages/web-components/src/components/background-media/background-media.ts
index dd9a9134cfc..cdb8cfde6a5 100644
--- a/packages/web-components/src/components/background-media/background-media.ts
+++ b/packages/web-components/src/components/background-media/background-media.ts
@@ -7,31 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
 import pauseIcon from '../../internal/vendor/@carbon/web-components/icons/pause--outline--filled/32.js';
 import playIcon from '../../internal/vendor/@carbon/web-components/icons/play--filled/32.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './background-media.scss';
 import { GRADIENT_DIRECTION, MOBILE_POSITION } from './defs';
-import DDSImage from '../image/image';
-import DDSVideoPlayer from '../video-player/video-player';
-import DDSVideoPlayerContainer from '../video-player/video-player-container';
-import DDSLeadSpace from '../leadspace/leadspace';
+import C4DImage from '../image/image';
+import C4DVideoPlayer from '../video-player/video-player';
+import C4DVideoPlayerContainer from '../video-player/video-player-container';
+import C4DLeadSpace from '../leadspace/leadspace';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Background media.
  *
- * @element dds-background-media
+ * @element c4d-background-media
  */
 
-@customElement(`${ddsPrefix}-background-media`)
-class DDSBackgroundMedia extends DDSImage {
+@customElement(`${c4dPrefix}-background-media`)
+class C4DBackgroundMedia extends C4DImage {
   /**
    * Returns a class-name based on the Gradient Direction type
    */
@@ -64,7 +63,7 @@ class DDSBackgroundMedia extends DDSImage {
   backgroundOpacity: number = 100;
 
   /**
-   * Set to true in _handleBackgroundMedia if all children are `dds-image-item`
+   * Set to true in _handleBackgroundMedia if all children are `c4d-image-item`
    */
   @property()
   containsOnlyImages = false;
@@ -76,7 +75,7 @@ class DDSBackgroundMedia extends DDSImage {
   gradientDirection = GRADIENT_DIRECTION.LEFT_TO_RIGHT;
 
   /**
-   * Option to hide gradient. Automatically set to yes if parent is dds-leadspace
+   * Option to hide gradient. Automatically set to yes if parent is c4d-leadspace
    */
   @property()
   gradientHidden: boolean = false;
@@ -105,20 +104,20 @@ class DDSBackgroundMedia extends DDSImage {
    * Internal storage of the video player comonent
    */
   @property()
-  videoPlayer: DDSVideoPlayer | null = null;
+  videoPlayer: C4DVideoPlayer | null = null;
 
   /**
-   * Conditionally runs super.render() if all children are `dds-image-item`
+   * Conditionally runs super.render() if all children are `c4d-image-item`
    */
   private _handleBackgroundMedia(event: Event) {
     const assignedElements = (
       event.target as HTMLSlotElement
     )?.assignedElements();
     const assignedImages = assignedElements.filter(
-      (el) => el.tagName === `${ddsPrefix}-image-item`.toUpperCase()
+      (el) => el.tagName === `${c4dPrefix}-image-item`.toUpperCase()
     );
     const assignedVideos = assignedElements.filter(
-      (el) => el.tagName === `${ddsPrefix}-video-player-container`.toUpperCase()
+      (el) => el.tagName === `${c4dPrefix}-video-player-container`.toUpperCase()
     );
 
     if (
@@ -131,8 +130,8 @@ class DDSBackgroundMedia extends DDSImage {
     if (assignedVideos.length) {
       const [video] = assignedVideos;
       this.videoId = video.getAttribute('video-id');
-      this.videoPlayer = video.querySelector(`${ddsPrefix}-video-player`);
-      this.videoIsPlaying = (video as DDSVideoPlayerContainer).isPlaying;
+      this.videoPlayer = video.querySelector(`${c4dPrefix}-video-player`);
+      this.videoIsPlaying = (video as C4DVideoPlayerContainer).isPlaying;
     }
   }
 
@@ -168,7 +167,7 @@ class DDSBackgroundMedia extends DDSImage {
   }
 
   /**
-   * Append the dds-background-media to the parent element where this component is being used.
+   * Append the c4d-background-media to the parent element where this component is being used.
    */
   updated() {
     // mobilePosition attribute deprecated
@@ -176,7 +175,7 @@ class DDSBackgroundMedia extends DDSImage {
       this.parentElement?.shadowRoot?.prepend(this);
     }
 
-    if (this.parentElement instanceof DDSLeadSpace) {
+    if (this.parentElement instanceof C4DLeadSpace) {
       this.gradientHidden = true;
     }
 
@@ -201,11 +200,11 @@ class DDSBackgroundMedia extends DDSImage {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--background-media`;
+    return `${c4dPrefix}--background-media`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSBackgroundMedia;
+export default C4DBackgroundMedia;
diff --git a/packages/web-components/src/components/button-group/__stories__/README.stories.mdx b/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
index b8bb7371ca5..bbf7c3957ae 100644
--- a/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/button-group/__stories__/README.stories.mdx
@@ -35,69 +35,39 @@ import '@carbon/web-components/es/icons/arrow--right/20.js';
 ### HTML
 
 ```html
-<dds-button-group>
-  <dds-button-group-item href="https://example.com">
+<c4d-button-group>
+  <c4d-button-group-item href="https://example.com" cta-type="local">
     Lorem ipsum
-    <svg
-      slot="icon"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-    >
-      <path
-        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-      ></path>
-    </svg>
-  </dds-button-group-item>
-  <dds-button-group-item href="https://example.com">
+  </c4d-button-group-item>
+  <c4d-button-group-item href="https://example.com" cta-type="local">
     Dolor sit amet
-    <svg
-      slot="icon"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-    >
-      <path
-        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-      ></path>
-    </svg>
-  </dds-button-group-item>
-</dds-button-group>
+  </c4d-button-group-item>
+</c4d-button-group>
 ```
 
 ### click handler example for web components
 
 ```html
-<dds-button-group>
-  <dds-button-group-item @click="${this._handleClick}"></dds-button-group-item>
-</dds-button-group>
+<c4d-button-group>
+  <c4d-button-group-item @click="${this._handleClick}"></c4d-button-group-item>
+</c4d-button-group>
 ```
 
 ### click handler example for HTML
 
 ```html
-<dds-button-group>
-  <dds-button-group-item onclick="handleClick()"></dds-button-group-item>
-</dds-button-group>
+<c4d-button-group>
+  <c4d-button-group-item onclick="handleClick()"></c4d-button-group-item>
+</c4d-button-group>
 ```
 
 ## Props
 
-<Props of="dds-button-group" />
+<Props of="c4d-button-group" />
 
-### `<dds-button-group-item>`
+### `<c4d-button-group-item>`
 
-<Props of="dds-button-group-item" />
+<Props of="c4d-button-group-item" />
 
 ## Stable selectors
 
@@ -107,7 +77,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<dds-button-group>`      | `data-autoid="dds--button-group"`      | Component   |
-| `<dds-button-group-item>` | `data-autoid="dds--button-group-item"` | Component   |
+| `<c4d-button-group>`      | `data-autoid="c4d--button-group"`      | Component   |
+| `<c4d-button-group-item>` | `data-autoid="c4d--button-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
index eaa752c120f..9b362a016e5 100644
--- a/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/button-group/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
 
@@ -17,22 +22,19 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
 
 function App() {
   return (
-    <DDSButtonGroup>
-      <DDSButtonGroupItem href="https://www.example.com">
-        <ArrowRight20 slot="icon" />
+    <C4DButtonGroup>
+      <C4DButtonGroupItem href="https://www.example.com" cta-type="local">
         Button 1
-      </DDSButtonGroupItem>
-      <DDSButtonGroupItem href="https://www.example.com">
-        <ArrowRight20 slot="icon" />
+      </C4DButtonGroupItem>
+      <C4DButtonGroupItem href="https://www.example.com"  cta-type="local">
         Button 2
-      </DDSButtonGroupItem>
-    </DDSButtonGroup>
+      </C4DButtonGroupItem>
+    </C4DButtonGroup>
   );
 }
 ```
@@ -43,11 +45,13 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<dds-button-group>`      | `data-autoid="dds--button-group"`      | Component   |
-| `<dds-button-group-item>` | `data-autoid="dds--button-group-item"` | Component   |
+| `<c4d-button-group>`      | `data-autoid="c4d--button-group"`      | Component   |
+| `<c4d-button-group-item>` | `data-autoid="c4d--button-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx b/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx
index 1405ddef3b8..5fb09f52e0b 100644
--- a/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx
+++ b/packages/web-components/src/components/button-group/__stories__/button-group.stories.react.tsx
@@ -9,41 +9,35 @@
 
 import { number, select, text } from '@storybook/addon-knobs';
 import React from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import ArrowDown20 from '@carbon/icons-react/es/arrow--down/20.js';
-import Pdf20 from '@carbon/icons-react/es/PDF/20.js';
+
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 import readme from './README.stories.react.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
-const iconMap = {
-  ArrowRight20: <ArrowRight20 slot="icon" />,
-  ArrowDown20: <ArrowDown20 slot="icon" />,
-  Pdf20: <Pdf20 slot="icon" />,
-};
+import {
+  hrefsForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
 
-const iconOptions = {
-  Default: null,
-  'Arrow Right': 'ArrowRight20',
-  'Arrow Down': 'ArrowDown20',
-  PDF: 'Pdf20',
-};
-
-export const Default = args => {
+export const Default = (args) => {
   const { buttons } = args?.ButtonGroup ?? {};
 
   return (
-    <DDSButtonGroup>
+    <C4DVideoCTAContainer>
+    <C4DButtonGroup>
       {buttons.map(elem => (
-        <DDSButtonGroupItem href={elem.href}>
-          {elem.renderIcon} {elem.copy}
-        </DDSButtonGroupItem>
+        <C4DButtonGroupItem href={hrefsForType[elem.ctaType]} cta-type={elem.ctaType}>
+          {elem.copy}
+        </C4DButtonGroupItem>
       ))}
-    </DDSButtonGroup>
+    </C4DButtonGroup>
+    </C4DVideoCTAContainer>
   );
 };
 
@@ -54,39 +48,28 @@ Default.story = {
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => ({
-          href: textNullable(`Link ${i + 1}`, `https://example.com`),
           copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
-          renderIcon: iconMap[select(`Icon ${i + 1}`, iconOptions, iconOptions.Default) ?? 0],
+          ctaType: select(
+            `CTA type (cta-type) ${i + 1}`,
+            typeOptions,
+            types[CTA_TYPE.LOCAL]
+          ),
         })),
       }),
     },
-    propsSet: {
-      default: {
-        ButtonGroup: {
-          buttons: [
-            {
-              href: 'https://example.com',
-              copy: 'Lorem Ipsum',
-            },
-            {
-              href: 'https://example.com',
-              copy: 'Lorem Ipsum',
-            },
-          ],
-        },
-      },
-    },
   },
 };
 
 export default {
   title: 'Components/Button group',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-sm-16 bx--col-md-6 bx--col-lg-16">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-sm-16 cds--col-md-6 cds--col-lg-16">
+              {story()}
+            </div>
           </div>
         </div>
       );
diff --git a/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts b/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
index c9766ea0b71..bd11324a587 100644
--- a/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
+++ b/packages/web-components/src/components/button-group/__stories__/button-group.stories.ts
@@ -8,39 +8,34 @@
  */
 
 import { number, select, text } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
-import Pdf20 from '../../../internal/vendor/@carbon/web-components/icons/PDF/20.js';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
 import '../index';
-import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
-const iconMap = {
-  ArrowRight20: ArrowRight20({ slot: 'icon' }),
-  ArrowDown20: ArrowDown20({ slot: 'icon' }),
-  Pdf20: Pdf20({ slot: 'icon' }),
-};
-
-const iconOptions = {
-  Default: null,
-  'Arrow Right': 'ArrowRight20',
-  'Arrow Down': 'ArrowDown20',
-  PDF: 'Pdf20',
-};
+import {
+  hrefsForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
 
 export const Default = (args) => {
   const { buttons } = args?.ButtonGroup ?? {};
   return html`
-    <dds-button-group>
-      ${buttons.map(
-        (elem) => html`
-          <dds-button-group-item href="${elem.href}"
-            >${elem.copy}${elem.renderIcon}</dds-button-group-item
-          >
-        `
-      )}
-    </dds-button-group>
+    <c4d-video-cta-container>
+      <c4d-button-group>
+        ${buttons.map(
+          (elem) => html`
+            <c4d-button-group-item
+              href="${hrefsForType[elem.ctaType]}"
+              cta-type="${elem.ctaType}"
+              download="IBM_Annual_Report_2019.pdf"
+              >${elem.copy}</c4d-button-group-item
+            >
+          `
+        )}
+      </c4d-button-group>
+    </c4d-video-cta-container>
   `;
 };
 
@@ -48,9 +43,11 @@ export default {
   title: 'Components/Button group',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-16 bx--col-md-6 bx--col-lg-16">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-sm-16 cds--col-md-6 cds--col-lg-16">
+            ${story()}
+          </div>
         </div>
       </div>
     `,
@@ -63,12 +60,12 @@ export default {
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => ({
-          href: textNullable(`Link ${i + 1}`, `https://example.com`),
           copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
-          renderIcon:
-            iconMap[
-              select(`Icon ${i + 1}`, iconOptions, iconOptions.Default) ?? 0
-            ],
+          ctaType: select(
+            `CTA type (cta-type) ${i + 1}`,
+            typeOptions,
+            types[CTA_TYPE.LOCAL]
+          ),
         })),
       }),
     },
@@ -77,11 +74,11 @@ export default {
         ButtonGroup: {
           buttons: [
             {
-              href: 'https://example.com',
+              ctaType: CTA_TYPE.LOCAL,
               copy: 'Lorem Ipsum',
             },
             {
-              href: 'https://example.com',
+              ctaType: CTA_TYPE.LOCAL,
               copy: 'Lorem Ipsum',
             },
           ],
diff --git a/packages/web-components/src/components/button-group/__tests__/button-group.test.ts b/packages/web-components/src/components/button-group/__tests__/button-group.test.ts
index edd4bc8e1b0..bf8bbd9c31b 100644
--- a/packages/web-components/src/components/button-group/__tests__/button-group.test.ts
+++ b/packages/web-components/src/components/button-group/__tests__/button-group.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render, html } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../button-group';
 import '../button-group-item';
 import { Default } from '../__stories__/button-group.stories';
@@ -30,25 +30,25 @@ const template = () =>
 
 const templateItem = () =>
   html`
-    <dds-button-group-item href="https://example.com">
+    <c4d-button-group-item href="https://example.com">
       Testing
-    </dds-button-group-item>
+    </c4d-button-group-item>
   `;
 
-describe('dds-button-group', function () {
-  it('renders dds-button-group properly', async function () {
+describe('c4d-button-group', function () {
+  it('renders c4d-button-group properly', async function () {
     render(template(), document.body);
-    await Promise.resolve(); // Update cycle for `<dds-button-group>`
-    expect(document.body.querySelector('dds-button-group')).toMatchSnapshot({
+    await Promise.resolve(); // Update cycle for `<c4d-button-group>`
+    expect(document.body.querySelector('c4d-button-group')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
 
-  it('renders dds-button-group-item properly', async function () {
+  it('renders c4d-button-group-item properly', async function () {
     render(templateItem(), document.body);
     await Promise.resolve();
     expect(
-      document.body.querySelector('dds-button-group-item')
+      document.body.querySelector('c4d-button-group-item')
     ).toMatchSnapshot({ mode: 'shadow' });
   });
 
diff --git a/packages/web-components/src/components/button-group/button-group-item.ts b/packages/web-components/src/components/button-group/button-group-item.ts
index b7b6528fe32..bd097cb3e0b 100644
--- a/packages/web-components/src/components/button-group/button-group-item.ts
+++ b/packages/web-components/src/components/button-group/button-group-item.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './button-group.scss';
-import DDSButtonExpressive from '../button/button';
+import C4DButton from '../button/button';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Button group item.
  *
- * @element dds-button-group-item
+ * @element c4d-button-group-item
  */
-@customElement(`${ddsPrefix}-button-group-item`)
-class DDSButtonGroupItem extends DDSButtonExpressive {
+@customElement(`${c4dPrefix}-button-group-item`)
+class C4DButtonGroupItem extends C4DButton {
   static get stableSelector() {
-    return `${ddsPrefix}--button-group-item`;
+    return `${c4dPrefix}--button-group-item`;
   }
 
   connectedCallback() {
@@ -35,4 +35,4 @@ class DDSButtonGroupItem extends DDSButtonExpressive {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSButtonGroupItem;
+export default C4DButtonGroupItem;
diff --git a/packages/web-components/src/components/button-group/button-group.scss b/packages/web-components/src/components/button-group/button-group.scss
index 2b4f2aafb31..4bf1b5ed615 100644
--- a/packages/web-components/src/components/button-group/button-group.scss
+++ b/packages/web-components/src/components/button-group/button-group.scss
@@ -1,13 +1,8 @@
 //
-// Copyright IBM Corp. 2020
+// 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 '@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup';
-
-:host(#{$dds-prefix}-button-group-item),
-:host(#{$dds-prefix}-button-cta) {
-  outline: none;
-}
+@use '@carbon/ibmdotcom-styles/scss/components/button-group';
diff --git a/packages/web-components/src/components/button-group/button-group.ts b/packages/web-components/src/components/button-group/button-group.ts
index a854b2601f3..7ce80afadb2 100644
--- a/packages/web-components/src/components/button-group/button-group.ts
+++ b/packages/web-components/src/components/button-group/button-group.ts
@@ -6,22 +6,23 @@
  * 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 { html, LitElement } from 'lit-element';
+
+import { LitElement, html } from 'lit';
 import { BUTTON_KIND } from '../../internal/vendor/@carbon/web-components/components/button/defs.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './button-group.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Button group.
  *
- * @element dds-button-group
+ * @element c4d-button-group
  */
-@customElement(`${ddsPrefix}-button-group`)
-class DDSButtonGroup extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-button-group`)
+class C4DButtonGroup extends StableSelectorMixin(LitElement) {
   /**
    * Handler for @slotchange, set the first button-group-item to kind tertiary and primary for the remaining ones
    *
@@ -33,13 +34,13 @@ class DDSButtonGroup extends StableSelectorMixin(LitElement) {
       .filter((elem) =>
         (elem as HTMLElement).matches !== undefined
           ? (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSButtonGroup).selectorItem
+              (this.constructor as typeof C4DButtonGroup).selectorItem
             ) ||
             (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSButtonGroup).selectorItemCTA
+              (this.constructor as typeof C4DButtonGroup).selectorItemCTA
             ) ||
             (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSButtonGroup).selectorItemDefaultCTA
+              (this.constructor as typeof C4DButtonGroup).selectorItemDefaultCTA
             )
           : false
       );
@@ -52,10 +53,10 @@ class DDSButtonGroup extends StableSelectorMixin(LitElement) {
     });
 
     const { customPropertyItemCount } = this
-      .constructor as typeof DDSButtonGroup;
+      .constructor as typeof C4DButtonGroup;
     this.style.setProperty(customPropertyItemCount, String(childItems.length));
 
-    const update = new CustomEvent(`${ddsPrefix}-button-group-update`, {
+    const update = new CustomEvent(`${c4dPrefix}-button-group-update`, {
       bubbles: true,
       cancelable: true,
       composed: true,
@@ -77,36 +78,36 @@ class DDSButtonGroup extends StableSelectorMixin(LitElement) {
    * The CSS custom property name for the live button group item count.
    */
   static get customPropertyItemCount() {
-    return `--${ddsPrefix}--button-group--item-count`;
+    return `--${c4dPrefix}--button-group--item-count`;
   }
 
   /**
    * A selector that will return the child items.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-button-group-item`;
+    return `${c4dPrefix}-button-group-item`;
   }
 
   /**
    * A selector that will return the child items.
    */
   static get selectorItemDefaultCTA() {
-    return `${ddsPrefix}-cta`;
+    return `${c4dPrefix}-cta`;
   }
 
   /**
    * A selector that will return the child items.
    */
   static get selectorItemCTA() {
-    return `${ddsPrefix}-button-cta`;
+    return `${c4dPrefix}-button-cta`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--button-group`;
+    return `${c4dPrefix}--button-group`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSButtonGroup;
+export default C4DButtonGroup;
diff --git a/packages/web-components/src/components/button/__stories__/README.stories.mdx b/packages/web-components/src/components/button/__stories__/README.stories.mdx
new file mode 100644
index 00000000000..db6483fef5e
--- /dev/null
+++ b/packages/web-components/src/components/button/__stories__/README.stories.mdx
@@ -0,0 +1,83 @@
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+
+# Button
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/button)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/button)
+
+## Getting started
+
+This component extends from
+[Carbon Web Component button](https://web-components.carbondesignsystem.com/?path=/docs/components-button--default).
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/button/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['button'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-button href="https://example.com">Example</cds-button>
+```
+
+### CTA features
+
+The `cta-type` attribute allows every type of CTA and icon available in the
+Carbon for IBM.com library. The default CTA style is `local`, which provides a
+basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the
+following:
+
+- local
+- jump
+- external
+- new tab
+- download
+- video
+- pdf
+- blog
+- email
+- schedule
+- chat
+- call
+
+Notes:
+
+- When using `video`, you need to pass the video ID as the `href` attribute.
+- The Button component will need to be wrapped within a
+  `cds-video-cta-container` components for videos to play.
+- Custom icons can replace the built-in ones within `cds-card-footer`, they only
+  need to be assigned to the `icon` slot.
+
+## Props
+
+<Props of="cds-button" />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector | Compatibility selector      | Description |
+| ----------------------- | --------------------------- | ----------- |
+| `<cds-button>`          | `data-autoid="cds--button"` | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button/__stories__/README.stories.react.mdx b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
new file mode 100644
index 00000000000..44d5e086eab
--- /dev/null
+++ b/packages/web-components/src/components/button/__stories__/README.stories.react.mdx
@@ -0,0 +1,67 @@
+import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+
+# Button
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/button)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS
+
+```javascript
+import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/index.js';
+
+function App() {
+  return (
+    <DDSButton href="https://example.com">Example</DDSButton>
+  );
+}
+```
+
+### CTA features
+
+The `cta-type` attribute allows every type of CTA and icon available in the Carbon for IBM.com library. 
+The default CTA style is `local`, which provides a basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the following:
+
+* local
+* jump
+* external
+* new tab
+* download
+* video
+* pdf
+* blog
+* email
+* schedule
+* chat
+* call
+
+Notes: 
+* When using `video`, you need to pass the video ID as the `href` attribute.
+* The Button component will need to be wrapped within a `DDSVideoCTAContainer` components for videos to play.
+* Custom icons can replace the built-in ones within `DDSCardFooter`, they only need to be assigned to the `icon` slot.
+
+
+## Props
+
+<Props of={PropTypesRef} />
+
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector   | Compatibility selector                 | Description |
+| ------------------------- | -------------------------------------- | ----------- |
+| `<dds-button>`      | `data-autoid="dds--button"`      | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/button/__stories__/button.stories.react.tsx b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx
new file mode 100644
index 00000000000..101e658ba42
--- /dev/null
+++ b/packages/web-components/src/components/button/__stories__/button.stories.react.tsx
@@ -0,0 +1,114 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { boolean, select } from '@storybook/addon-knobs';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import React from 'react';
+
+// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+// @ts-ignore
+import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import DDSButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import readme from './README.stories.react.mdx';
+import { CTA_TYPE } from '../../cta/defs';
+
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
+
+export const Default = args => {
+  const { copy, customVideoTitle, ctaType, disabled, download, href } =
+    args?.Button ?? {};
+
+  let videoCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const button = document.querySelector('dds-button') as any;
+    const duration = button?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = button?.videoTitle;
+    } else {
+      videoCopy = duration
+        ? `${customVideoTitle} (${duration})`
+        : customVideoTitle;
+    }
+  }
+
+  return (
+    <DDSVideoCTAContainer>
+      <DDSButton disabled={disabled || undefined} href={href} download={download} cta-type={ctaType}>
+        {videoCopy ?? copy}
+      </DDSButton>
+    </DDSVideoCTAContainer>
+  );
+};
+
+Default.story = {
+  parameters: {
+    knobs: {
+      Button: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Link text (unnamed slot)', 'Button text');
+        const download = ![CTA_TYPE.DOWNLOAD, CTA_TYPE.PDF].includes(ctaType)
+          ? undefined
+          : textNullable(
+              'Download target (download)',
+              'IBM_Annual_Report_2019.pdf'
+            );
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+        return {
+          ctaType,
+          copy,
+          customVideoTitle,
+          disabled: boolean('Disabled (disabled)', false),
+          download,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
+    },
+  },
+};
+
+export default {
+  title: 'Components/Button',
+  decorators: [
+    story => {
+      return (
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-sm-16 cds--col-md-6 cds--col-lg-16">{story()}</div>
+          </div>
+        </div>
+      );
+    },
+  ],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+  },
+};
diff --git a/packages/web-components/src/components/button/__stories__/button.stories.ts b/packages/web-components/src/components/button/__stories__/button.stories.ts
new file mode 100644
index 00000000000..44b97cc2e3f
--- /dev/null
+++ b/packages/web-components/src/components/button/__stories__/button.stories.ts
@@ -0,0 +1,105 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { boolean, select } from '@storybook/addon-knobs';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import readme from './README.stories.mdx';
+import { CTA_TYPE } from '../../cta/defs';
+
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
+
+export const Default = (args) => {
+  const { copy, customVideoTitle, ctaType, disabled, download, href } =
+    args?.Button ?? {};
+
+  let videoCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const button = document.querySelector('c4d-button') as any;
+    const duration = button?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = button?.videoTitle;
+    } else {
+      videoCopy = duration
+        ? `${customVideoTitle} (${duration})`
+        : customVideoTitle;
+    }
+  }
+
+  return html`
+    <c4d-video-cta-container>
+      <c4d-button
+        ?disabled="${disabled}"
+        href="${href}"
+        download=${download}
+        cta-type="${ctaType}">
+        ${videoCopy ?? copy}
+      </c4d-button>
+    </c4d-video-cta-container>
+  `;
+};
+
+export default {
+  title: 'Components/Button',
+  decorators: [(story) => html` <div class="cds--grid">${story()}</div> `],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+    knobs: {
+      Button: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Link text (unnamed slot)', 'Button text');
+        const download = ![CTA_TYPE.DOWNLOAD, CTA_TYPE.PDF].includes(ctaType)
+          ? undefined
+          : textNullable(
+              'Download target (download)',
+              'IBM_Annual_Report_2019.pdf'
+            );
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+        return {
+          ctaType,
+          copy,
+          customVideoTitle,
+          disabled: boolean('Disabled (disabled)', false),
+          download,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
+    },
+    propsSet: {
+      default: {
+        Button: {
+          copy: 'Button text',
+          disabled: false,
+          href: 'https://github.com/carbon-design-system/carbon-web-components',
+        },
+      },
+    },
+  },
+};
diff --git a/packages/web-components/src/components/button/button-expressive.ts b/packages/web-components/src/components/button/button-expressive.ts
new file mode 100644
index 00000000000..d9f5169713d
--- /dev/null
+++ b/packages/web-components/src/components/button/button-expressive.ts
@@ -0,0 +1,255 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
+import { BUTTON_ICON_LAYOUT, BUTTON_KIND, BUTTON_SIZE } from './defs';
+import styles from './button.scss';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+export { BUTTON_KIND, BUTTON_SIZE };
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Expressive button.
+ *
+ * @element c4d-button-expressive
+ * @csspart button The button.
+ */
+@customElement(`${c4dPrefix}-button-expressive`)
+class C4DButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
+  /**
+   * `true` if there is an icon.
+   */
+  @state()
+  protected _hasIcon = false;
+
+  /**
+   * `true` if there is a non-icon content.
+   */
+  @state()
+  protected _hasMainContent = false;
+
+  /**
+   * The CSS class list for the button/link node.
+   */
+  protected get _classes() {
+    const {
+      disabled,
+      kind,
+      size,
+      _hasIcon: hasIcon,
+      _hasMainContent: hasMainContent,
+    } = this;
+    return classMap({
+      [`${prefix}--btn`]: true,
+      [`${prefix}--btn--${kind}`]: kind,
+      [`${prefix}--btn--disabled`]: disabled,
+      [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,
+      [`${prefix}--btn--expressive`]: true,
+      [`${prefix}--btn--${size}`]: size,
+      [`${prefix}-ce--btn--has-icon`]: hasIcon,
+    });
+  }
+
+  /**
+   * Handles `click` event on the button.
+   */
+  protected _handleClick() {} // eslint-disable-line class-methods-use-this
+
+  /**
+   * Handles `slotchange` event.
+   */
+  protected _handleSlotChange({ target }: Event) {
+    const { name } = target as HTMLSlotElement;
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+    this[name === 'icon' ? '_hasIcon' : '_hasMainContent'] = hasContent;
+    this.requestUpdate();
+  }
+
+  /**
+   * @returns The disabled link content.
+   */
+  protected _renderDisabledLink() {
+    const { _classes: classes } = this;
+    return html`
+      <p id="button" part="button" class="${classes}">${this._renderInner()}</p>
+    `;
+  }
+
+  /**
+   * @returns The inner content.
+   */
+  protected _renderInner() {
+    const { _handleSlotChange: handleSlotChange } = this;
+    return html`
+      <slot @slotchange="${handleSlotChange}"></slot>
+      <p class="${prefix}--btn--hidden" aria-hidden="true">
+        <span>:</span> ${this.href}
+      </p>
+      <slot name="icon" @slotchange="${handleSlotChange}"></slot>
+    `;
+  }
+
+  /**
+   * `true` if the button should have input focus when the page loads.
+   */
+  @property({ type: Boolean, reflect: true })
+  autofocus = false;
+
+  /**
+   * `true` if the button should be disabled.
+   */
+  @property({ type: Boolean, reflect: true })
+  disabled = false;
+
+  /**
+   * The default file name, used if this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  download!: string;
+
+  /**
+   * Link `href`. If present, this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  href!: string;
+
+  /**
+   * The language of what `href` points to, if this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  hreflang!: string;
+
+  /**
+   * Button icon layout.
+   */
+  @property({ reflect: true, attribute: 'icon-layout' })
+  iconLayout = BUTTON_ICON_LAYOUT.REGULAR;
+
+  /**
+   * Button kind.
+   */
+  @property({ reflect: true })
+  kind = BUTTON_KIND.PRIMARY;
+
+  /**
+   * The a11y role for `<a>`.
+   */
+  @property({ attribute: 'link-role' })
+  linkRole = 'button';
+
+  /**
+   * URLs to ping, if this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  ping!: string;
+
+  /**
+   * The link type, if this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  rel!: string;
+
+  /**
+   * Button size.
+   */
+  @property({ reflect: true })
+  size = BUTTON_SIZE.REGULAR;
+
+  /**
+   * The link target, if this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  target!: string;
+
+  /**
+   * The default behavior if the button is rendered as `<button>`. MIME type of the `target`if this button is rendered as `<a>`.
+   */
+  @property({ reflect: true })
+  type!: string;
+
+  render() {
+    const {
+      autofocus,
+      disabled,
+      download,
+      href,
+      hreflang,
+      linkRole,
+      ping,
+      rel,
+      target,
+      type,
+      _classes: classes,
+      _handleClick: handleClick,
+    } = this;
+    if (href) {
+      return disabled
+        ? this._renderDisabledLink()
+        : html`
+            <a
+              id="button"
+              part="button"
+              role="${ifDefined(linkRole)}"
+              class="${classes}"
+              download="${ifDefined(download)}"
+              href="${ifDefined(href)}"
+              hreflang="${ifDefined(hreflang)}"
+              ping="${ifDefined(ping)}"
+              rel="${ifDefined(rel)}"
+              target="${ifDefined(target)}"
+              type="${ifDefined(type)}"
+              @click="${handleClick}">
+              ${this._renderInner()}
+            </a>
+          `;
+    }
+    return html`
+      <button
+        id="button"
+        part="button"
+        class="${classes}"
+        ?autofocus="${autofocus}"
+        ?disabled="${disabled}"
+        type="${ifDefined(type)}"
+        @click="${handleClick}">
+        ${this._renderInner()}
+      </button>
+    `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--button-expressive`;
+  }
+
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+console.warn(
+  `The c4d-button-expressive component has been deprecated in favor of the c4d-button component.
+	See migration guide for more information.`
+);
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DButtonExpressive;
diff --git a/packages/web-components/src/components/button/button.scss b/packages/web-components/src/components/button/button.scss
index 9503fbfd3ce..213a82edf53 100644
--- a/packages/web-components/src/components/button/button.scss
+++ b/packages/web-components/src/components/button/button.scss
@@ -5,28 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/web-components/scss/components/button/button';
-@import '../../globals/scss/box-sizing';
-
-:host(#{$dds-prefix}-button-expressive) {
-  @extend :host(#{$prefix}-btn);
-
-  .#{$prefix}--btn--hidden {
-    display: none;
-    visibility: hidden;
-
-    @media print {
-      display: inline-block;
-      visibility: visible;
-      font-weight: 200;
-      color: $gray-100;
-
-      span {
-        font-weight: 600;
-        margin-left: calc(-1 * #{$spacing-02});
-        margin-right: $spacing-02;
-      }
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/button/index' as *;
diff --git a/packages/web-components/src/components/button/button.ts b/packages/web-components/src/components/button/button.ts
index 1f43975ec42..1b185abd353 100644
--- a/packages/web-components/src/components/button/button.ts
+++ b/packages/web-components/src/components/button/button.ts
@@ -7,250 +7,154 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, state, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import { BUTTON_ICON_LAYOUT, BUTTON_KIND, BUTTON_SIZE } from './defs';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './button.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+import CTAMixin from '../../component-mixins/cta/cta';
+import CDSButton from '../../internal/vendor/@carbon/web-components/components/button/button.js';
 
-export { BUTTON_KIND, BUTTON_SIZE };
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+import { ariaLabels, icons } from '../../component-mixins/cta/cta';
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
- * Expressive button.
+ * Button.
  *
- * @element dds-button-expressive
- * @csspart button The button.
+ * @element c4d-button
+ * @csspart button.
  */
-@customElement(`${ddsPrefix}-button-expressive`)
-class DDSButtonExpressive extends FocusMixin(StableSelectorMixin(LitElement)) {
-  /**
-   * `true` if there is an icon.
-   */
-  @state()
-  protected _hasIcon = false;
+@customElement(`${c4dPrefix}-button`)
+// @ts-ignore
+class C4DButton extends CTAMixin(StableSelectorMixin(CDSButton)) {
+  @query('a')
+  _linkNode;
 
-  /**
-   * `true` if there is a non-icon content.
-   */
-  @state()
-  protected _hasMainContent = false;
+  @property()
+  iconDiv;
 
-  /**
-   * The CSS class list for the button/link node.
-   */
-  protected get _classes() {
-    const {
-      disabled,
-      kind,
-      size,
-      _hasIcon: hasIcon,
-      _hasMainContent: hasMainContent,
-    } = this;
-    return classMap({
-      [`${prefix}--btn`]: true,
-      [`${prefix}--btn--${kind}`]: kind,
-      [`${prefix}--btn--disabled`]: disabled,
-      [`${prefix}--btn--icon-only`]: hasIcon && !hasMainContent,
-      [`${prefix}--btn--expressive`]: true,
-      [`${prefix}--btn--${size}`]: size,
-      [`${prefix}-ce--btn--has-icon`]: hasIcon,
-    });
-  }
+  @property()
+  span;
 
   /**
-   * Handles `click` event on the button.
+   * `true` if expressive theme enabled.
    */
-  protected _handleClick() {} // eslint-disable-line class-methods-use-this
+  @property({ type: Boolean, reflect: true })
+  isExpressive = true;
 
-  /**
-   * Handles `slotchange` event.
-   */
-  protected _handleSlotChange({ target }: Event) {
-    const { name } = target as HTMLSlotElement;
-    const hasContent = (target as HTMLSlotElement)
-      .assignedNodes()
-      .some(
-        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
-      );
-    this[name === 'icon' ? '_hasIcon' : '_hasMainContent'] = hasContent;
-    this.requestUpdate();
+  _handleDisabledClick(event: Event) {
+    super._handleClick(event as any);
   }
 
   /**
-   * @returns The disabled link content.
+   * TODO: Due to the new render() logic coming from the CWC v2 button,
+   * this function is currently unused. We'd need to dynamically add it.
+   *
+   * @returns The icon for the print styles
    */
-  protected _renderDisabledLink() {
-    const { _classes: classes } = this;
+  _renderIconPrintStyles() {
     return html`
-      <p id="button" part="button" class="${classes}">${this._renderInner()}</p>
-    `;
-  }
-
-  /**
-   * @returns The inner content.
-   */
-  protected _renderInner() {
-    const { _handleSlotChange: handleSlotChange } = this;
-    return html`
-      <slot @slotchange="${handleSlotChange}"></slot>
       <p class="${prefix}--btn--hidden" aria-hidden="true">
         <span>:</span> ${this.href}
       </p>
-      <slot name="icon" @slotchange="${handleSlotChange}"></slot>
+      <slot name="icon"></slot>
     `;
   }
 
   /**
-   * `true` if the button should have input focus when the page loads.
-   */
-  @property({ type: Boolean, reflect: true })
-  autofocus = false;
-
-  /**
-   * `true` if the button should be disabled.
-   */
-  @property({ type: Boolean, reflect: true })
-  disabled = false;
-
-  /**
-   * The default file name, used if this button is rendered as `<a>`.
-   */
-  @property({ reflect: true })
-  download!: string;
-
-  /**
-   * Link `href`. If present, this button is rendered as `<a>`.
-   */
-  @property({ reflect: true })
-  href!: string;
-
-  /**
-   * The language of what `href` points to, if this button is rendered as `<a>`.
+   * @returns The template for the icon.
    */
-  @property({ reflect: true })
-  hreflang!: string;
-
-  /**
-   * Button icon layout.
-   */
-  @property({ reflect: true, attribute: 'icon-layout' })
-  iconLayout = BUTTON_ICON_LAYOUT.REGULAR;
-
-  /**
-   * Button kind.
-   */
-  @property({ reflect: true })
-  kind = BUTTON_KIND.PRIMARY;
-
-  /**
-   * The a11y role for `<a>`.
-   */
-  @property({ attribute: 'link-role' })
-  linkRole = 'button';
-
-  /**
-   * URLs to ping, if this button is rendered as `<a>`.
-   */
-  @property({ reflect: true })
-  ping!: string;
+  _renderButtonIcon() {
+    const { ctaType } = this;
+    return `
+        <span class="${prefix}--visually-hidden">${ariaLabels[ctaType]}</span>
+        ${icons[ctaType]?.()?.strings?.join()}
+      `;
+  }
 
   /**
-   * The link type, if this button is rendered as `<a>`.
-   */
-  @property({ reflect: true })
-  rel!: string;
+   * Handles button video title
+   *
+   * @param event The event.
+   */
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleVideoTitleUpdate = async (event) => {
+    if (event) {
+      const { videoDuration, videoName } = event.detail as any;
+      const { formatVideoDuration, formatVideoCaption } = this;
+      const formattedVideoDuration = formatVideoDuration({
+        duration: !videoDuration ? videoDuration : videoDuration * 1000,
+      });
+      this.videoDuration ? null : (this.videoDuration = formattedVideoDuration);
+
+      this.videoTitle = formatVideoCaption({
+        duration: formattedVideoDuration,
+        name: videoName,
+      });
+
+      if (this.textContent?.trim() === '') {
+        const title = document.createTextNode(this.videoTitle);
+        this.appendChild(title);
+      }
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    const { eventRequestAdditionalVideoData } = this
+      .constructor as typeof C4DButton;
+    document.addEventListener(
+      eventRequestAdditionalVideoData,
+      this._handleVideoTitleUpdate
+    );
+  }
 
-  /**
-   * Button size.
-   */
-  @property({ reflect: true })
-  size = BUTTON_SIZE.REGULAR;
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const { eventRequestAdditionalVideoData } = this
+      .constructor as typeof C4DButton;
+    document.removeEventListener(
+      eventRequestAdditionalVideoData,
+      this._handleVideoTitleUpdate
+    );
+  }
 
-  /**
-   * The link target, if this button is rendered as `<a>`.
-   */
-  @property({ reflect: true })
-  target!: string;
+  updated(changedProperties) {
+    super.updated(changedProperties);
 
-  /**
-   * The default behavior if the button is rendered as `<button>`. MIME type of the `target`if this button is rendered as `<a>`.
-   */
-  @property({ reflect: true })
-  type!: string;
+    if (changedProperties.has('ctaType')) {
+      if (!this.iconDiv) {
+        this.iconDiv = this.shadowRoot?.querySelector("slot[name='icon']");
+      }
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
+      const { iconDiv } = this;
 
-  render() {
-    const {
-      autofocus,
-      disabled,
-      download,
-      href,
-      hreflang,
-      linkRole,
-      ping,
-      rel,
-      target,
-      type,
-      _classes: classes,
-      _handleClick: handleClick,
-    } = this;
-    if (href) {
-      return disabled
-        ? this._renderDisabledLink()
-        : html`
-            <a
-              id="button"
-              part="button"
-              role="${ifNonNull(linkRole)}"
-              class="${classes}"
-              download="${ifNonNull(download)}"
-              href="${ifNonNull(href)}"
-              hreflang="${ifNonNull(hreflang)}"
-              ping="${ifNonNull(ping)}"
-              rel="${ifNonNull(rel)}"
-              target="${ifNonNull(target)}"
-              type="${ifNonNull(type)}"
-              @click="${handleClick}">
-              ${this._renderInner()}
-            </a>
-          `;
+      iconDiv.querySelector('svg')?.remove();
+      iconDiv.innerHTML = this._renderButtonIcon();
+      iconDiv
+        ?.querySelector('svg')
+        ?.classList.add(`${prefix}--card__cta`, `${c4dPrefix}-ce--cta__icon`);
     }
-    return html`
-      <button
-        id="button"
-        part="button"
-        class="${classes}"
-        ?autofocus="${autofocus}"
-        ?disabled="${disabled}"
-        type="${ifNonNull(type)}"
-        @click="${handleClick}">
-        ${this._renderInner()}
-      </button>
-    `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--button-expressive`;
+    return `${c4dPrefix}--button`;
+  }
+
+  /**
+   * The name of the custom event fired when there is a user gesture to run the action.
+   */
+  static get eventRequestAdditionalVideoData() {
+    return `${c4dPrefix}-cta-request-additional-video-data`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSButtonExpressive;
+export default C4DButton;
diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
index 604fcafc62b..65e1e90c933 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Callout Quote
 
 > 💡 Check our
@@ -27,34 +29,44 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-quote/index.js';
 
 <Description markdown={`${cdnCss()}`} />
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles.
+You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles//scss/globals/tokens/color-tokens' as
+  color-tokens;
+@include add-component-tokens(color-tokens.$color-tokens);
+```
+
 ### HTML
 
 ```html
-<dds-callout-quote mark-type="double-curved">
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus, posuere at est vitae, ornare rhoncus sem.
-  Suspendisse vitae tellus fermentum, hendrerit augue eu, placerat magna.
-  <dds-quote-source-heading>
+<cds-callout-quote mark-type="double-curved">
+  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus est purus,
+  posuere at est vitae, ornare rhoncus sem. Suspendisse vitae tellus fermentum,
+  hendrerit augue eu, placerat magna.
+  <cds-quote-source-heading>
     Lorem ipsum dolor sit amet
-  </dds-quote-source-heading>
-  <dds-quote-source-copy>
-    consectetur adipiscing elit
-  </dds-quote-source-copy>
-  <dds-quote-source-bottom-copy>
-    IBM Cloud
-  </dds-quote-source-bottom-copy>
-</dds-callout-quote>
+  </cds-quote-source-heading>
+  <cds-quote-source-copy> consectetur adipiscing elit </cds-quote-source-copy>
+  <cds-quote-source-bottom-copy> IBM Cloud </cds-quote-source-bottom-copy>
+</cds-callout-quote>
 ```
 
 ## Props
 
-<Props of="dds-callout-quote" />
+<Props of="cds-callout-quote" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<dds-callout-quote>`   | `data-autoid="dds--callout-quote"` | Component   |
+| `<cds-callout-quote>`   | `data-autoid="cds--callout-quote"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
index 995d03cb8e7..a54ffa1d8c4 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/callout-quote/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
 
@@ -17,36 +22,48 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
-import DDSCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
+import C4DCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 
 function App() {
   return (
-    <DDSCalloutQuote mark-type="double-curved">
+    <C4DCalloutQuote mark-type="double-curved">
       Bringing together the technology and expertise for a new way to create
-      <DDSQuoteSourceHeading>John Doe</DDSQuoteSourceHeading>
-      <DDSQuoteSourceCopy>Senior Vice President</DDSQuoteSourceCopy>
-      <DDSQuoteSourceBottomCopy>IBM Cloud</DDSQuoteSourceBottomCopy>
-      <DDSCalloutLinkWithIcon slot="footer" href="https://example.com">
-        Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-      </DDSCalloutLinkWithIcon>
-    </DDSCalloutQuote>
+      <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
+      <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>
+      <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
+      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+        Link with icon
+      </C4DCalloutLinkWithIcon>
+    </C4DCalloutQuote>
   );
 }
 ```
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles.
+You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles//scss/globals/tokens/color-tokens' as
+  color-tokens;
+@include add-component-tokens(color-tokens.$color-tokens);
+```
+
 ## Props
 
 <Props of={PropTypesRef} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<dds-callout-quote>`   | `data-autoid="dds--callout-quote"` | Component   |
+| `<cds-callout-quote>`   | `data-autoid="cds--callout-quote"` | Component   |
diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
index 81a8a603577..de6308f883b 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
+++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.react.tsx
@@ -9,19 +9,19 @@
 
 import React from 'react';
 import { select } from '@storybook/addon-knobs';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-import DDSCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
-import DDSCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
+import C4DCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import { QUOTE_TYPES } from '../../quote/quote';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import readme from './README.stories.react.mdx';
 
-const types = {
+const quoteTypes = {
   [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT,
   [`${QUOTE_TYPES.SINGLE_CURVED}`]: QUOTE_TYPES.SINGLE_CURVED,
   [`${QUOTE_TYPES.DOUBLE_ANGLE}`]: QUOTE_TYPES.DOUBLE_ANGLE,
@@ -31,19 +31,36 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
 export const Default = (args) => {
-  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
-    args?.CalloutQuote ?? {};
+  const {
+    copy,
+    quoteMark,
+    sourceHeading,
+    sourceCopy,
+    sourceBottomCopy,
+    colorScheme,
+  } = args?.CalloutQuote ?? {};
   return (
-    <DDSCalloutQuote mark-type={quoteMark}>
+    <C4DCalloutQuote mark-type={quoteMark} color-scheme={colorScheme}>
       {copy}
-      <DDSQuoteSourceHeading>{sourceHeading}</DDSQuoteSourceHeading>
-      <DDSQuoteSourceCopy>{sourceCopy}</DDSQuoteSourceCopy>
-      <DDSQuoteSourceBottomCopy>{sourceBottomCopy}</DDSQuoteSourceBottomCopy>
-      <DDSCalloutLinkWithIcon slot="footer" href="https://example.com">
-        Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-      </DDSCalloutLinkWithIcon>
-    </DDSCalloutQuote>
+      <C4DQuoteSourceHeading>{sourceHeading}</C4DQuoteSourceHeading>
+      <C4DQuoteSourceCopy>{sourceCopy}</C4DQuoteSourceCopy>
+      <C4DQuoteSourceBottomCopy>{sourceBottomCopy}</C4DQuoteSourceBottomCopy>
+      <C4DCalloutLinkWithIcon
+        slot="footer"
+        href="https://example.com"
+        cta-type="local">
+        Link with icon
+      </C4DCalloutLinkWithIcon>
+    </C4DCalloutQuote>
   );
 };
 
@@ -57,8 +74,8 @@ Default.story = {
         ),
         quoteMark: select(
           'Quote Mark (markType):',
-          types,
-          types['double-curved']
+          quoteTypes,
+          quoteTypes['double-curved']
         ),
         sourceHeading: textNullable(
           'Source heading (source-heading slot)',
@@ -72,6 +89,11 @@ Default.story = {
           'Source bottom copy (source-bottom-copy slot)',
           'IBM Cloud'
         ),
+        colorScheme: select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        ),
       }),
     },
     propsSet: {
@@ -92,9 +114,9 @@ export default {
   title: 'Components/Callout Quote',
   decorators: [
     (story) => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-11">{story()}</div>
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-11">{story()}</div>
         </div>
       </div>
     ),
diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
index aa972f41dfc..faef94a4c81 100644
--- a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
+++ b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
@@ -9,14 +9,14 @@
 
 import '../index';
 import '../callout-link-with-icon';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
 import { QUOTE_TYPES } from '../../quote/quote';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
-const types = {
+const quoteTypes = {
   [`${QUOTE_TYPES.DEFAULT}`]: QUOTE_TYPES.DEFAULT,
   [`${QUOTE_TYPES.SINGLE_CURVED}`]: QUOTE_TYPES.SINGLE_CURVED,
   [`${QUOTE_TYPES.DOUBLE_ANGLE}`]: QUOTE_TYPES.DOUBLE_ANGLE,
@@ -26,21 +26,38 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
 export const Default = (args) => {
-  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
-    args?.CalloutQuote ?? {};
+  const {
+    copy,
+    quoteMark,
+    sourceHeading,
+    sourceCopy,
+    sourceBottomCopy,
+    colorScheme,
+  } = args?.CalloutQuote ?? {};
   return html`
-    <dds-callout-quote mark-type="${quoteMark}">
+    <c4d-callout-quote mark-type="${quoteMark}" color-scheme="${colorScheme}">
       ${copy}
-      <dds-quote-source-heading> ${sourceHeading} </dds-quote-source-heading>
-      <dds-quote-source-copy> ${sourceCopy} </dds-quote-source-copy>
-      <dds-quote-source-bottom-copy>
+      <c4d-quote-source-heading> ${sourceHeading} </c4d-quote-source-heading>
+      <c4d-quote-source-copy> ${sourceCopy} </c4d-quote-source-copy>
+      <c4d-quote-source-bottom-copy>
         ${sourceBottomCopy}
-      </dds-quote-source-bottom-copy>
-      <dds-callout-link-with-icon slot="footer" href="https://example.com">
-        Link with icon ${ArrowRight20({ slot: 'icon' })}
-      </dds-callout-link-with-icon>
-    </dds-callout-quote>
+      </c4d-quote-source-bottom-copy>
+      <c4d-callout-link-with-icon
+        slot="footer"
+        href="https://example.com"
+        cta-type="local">
+        Link with icon
+      </c4d-callout-link-with-icon>
+    </c4d-callout-quote>
   `;
 };
 
@@ -48,9 +65,9 @@ export default {
   title: 'Components/Callout quote',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--offset-lg-4 bx--col-lg-12">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12">${story()}</div>
         </div>
       </div>
     `,
@@ -67,8 +84,8 @@ export default {
         ),
         quoteMark: select(
           'Quote Mark (markType):',
-          types,
-          types['double-curved']
+          quoteTypes,
+          quoteTypes['double-curved']
         ),
         sourceHeading: textNullable(
           'Source heading (source-heading slot)',
@@ -82,6 +99,11 @@ export default {
           'Source bottom copy (source-bottom-copy slot)',
           'IBM Cloud'
         ),
+        colorScheme: select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/callout-quote/__tests__/callout-quote.test.ts b/packages/web-components/src/components/callout-quote/__tests__/callout-quote.test.ts
index d4862d8a07e..004995c62fe 100644
--- a/packages/web-components/src/components/callout-quote/__tests__/callout-quote.test.ts
+++ b/packages/web-components/src/components/callout-quote/__tests__/callout-quote.test.ts
@@ -1,25 +1,25 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import { Default } from '../__stories__/callout-quote.stories';
 
 const template = (props?) =>
   Default({
-    'dds-callout-quote': props,
+    'c4d-callout-quote': props,
   });
 
-describe('dds-callout-quote', function () {
+describe('c4d-callout-quote', function () {
   it('Renders as expected', async function () {
     render(template(), document.body);
     await Promise.resolve();
-    expect(document.body.querySelector('dds-callout-quote')).toMatchSnapshot({
+    expect(document.body.querySelector('c4d-callout-quote')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
diff --git a/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts b/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts
index e19eee83621..fc472b13113 100644
--- a/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts
+++ b/packages/web-components/src/components/callout-quote/callout-link-with-icon.ts
@@ -6,23 +6,32 @@
  * 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 { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSLinkWithIcon from '../link-with-icon/link-with-icon';
+import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
+import { property } from 'lit/decorators.js';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import styles from './callout-quote.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Callout link with item
  *
- * @element dds-callout-link-with-icon
+ * @element c4d-callout-link-with-icon
  */
-@customElement(`${ddsPrefix}-callout-link-with-icon`)
-class DDSCalloutLinkWithIcon extends DDSLinkWithIcon {
+@customElement(`${c4dPrefix}-callout-link-with-icon`)
+class C4DCalloutLinkWithIcon extends C4DLinkWithIcon {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   static get stableSelector() {
-    return `${ddsPrefix}--callout-link-with-icon`;
+    return `${c4dPrefix}--callout-link-with-icon`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -34,4 +43,4 @@ class DDSCalloutLinkWithIcon extends DDSLinkWithIcon {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCalloutLinkWithIcon;
+export default C4DCalloutLinkWithIcon;
diff --git a/packages/web-components/src/components/callout-quote/callout-quote.scss b/packages/web-components/src/components/callout-quote/callout-quote.scss
index 2241171307e..1c2d6f41dd0 100644
--- a/packages/web-components/src/components/callout-quote/callout-quote.scss
+++ b/packages/web-components/src/components/callout-quote/callout-quote.scss
@@ -5,46 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/callout-quote/index';
-@import '@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon';
-
-:host(#{$dds-prefix}-callout-link-with-icon) {
-  @extend .#{$prefix}--link-with-icon;
-
-  display: inline-block;
-  a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
-    color: $inverse-link;
-    outline-color: $inverse-focus-ui;
-    &:hover {
-      color: $blue-40;
-    }
-    &:active {
-      color: $inverse-link;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-callout-quote) #{$dds-prefix}-hr {
-  margin: 1rem;
-  @include carbon--breakpoint('md') {
-    margin: 1rem 0;
-  }
-  @include carbon--breakpoint('lg') {
-    margin: 1rem 0.5rem;
-  }
-}
-
-:host(#{$dds-prefix}-callout-quote) {
-  .#{$prefix}--quote__wrapper {
-    margin-left: -$spacing-05;
-    margin-right: -$spacing-05;
-    @include carbon--breakpoint('md') {
-      margin-left: -$spacing-05;
-      margin-right: -$spacing-05;
-    }
-    @include carbon--breakpoint('sm') {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/callout-quote';
+@use '@carbon/ibmdotcom-styles/scss/components/link-with-icon';
diff --git a/packages/web-components/src/components/callout-quote/callout-quote.ts b/packages/web-components/src/components/callout-quote/callout-quote.ts
index d527af9e775..a745e59239a 100644
--- a/packages/web-components/src/components/callout-quote/callout-quote.ts
+++ b/packages/web-components/src/components/callout-quote/callout-quote.ts
@@ -7,27 +7,69 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-quote.scss';
-import DDSCalloutMixin from '../../component-mixins/callout/callout';
-import DDSQuote from '../quote/quote';
+import C4DCalloutMixin from '../../component-mixins/callout/callout';
+import C4DQuote from '../quote/quote';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import { property } from 'lit/decorators.js';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
+import C4DCalloutLinkWithIcon from './callout-link-with-icon';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
- * Callout Data.
+ * Callout Quote.
  *
- * @element dds-callout-data
+ * @element c4d-callout-quote
  */
-@customElement(`${ddsPrefix}-callout-quote`)
-class DDSCalloutQuote extends DDSCalloutMixin(DDSQuote) {
+@customElement(`${c4dPrefix}-callout-quote`)
+class C4DCalloutQuote extends C4DCalloutMixin(C4DQuote) {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const linkWithIcon = this.querySelector(
+      (this.constructor as typeof C4DCalloutQuote).selectorLinkWithIcon
+    );
+    linkWithIcon
+      ? ((linkWithIcon as C4DCalloutLinkWithIcon).colorScheme =
+          this.colorScheme)
+      : '';
+  }
+
+  render() {
+    return html`
+      <div class="${prefix}--callout__column">
+        <div class="${prefix}--callout__content">
+          <div class="${prefix}--quote__container">
+            <div class="${prefix}--quote__wrapper">
+              ${this._renderQuote()}${this._renderSource()}${this._renderFooter()}
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  /**
+   * A selector that will return the child link-with-icon.
+   */
+  static get selectorLinkWithIcon() {
+    return `${c4dPrefix}-callout-link-with-icon`;
+  }
+
   static get stableSelector() {
-    return `${ddsPrefix}--callout-quote`;
+    return `${c4dPrefix}--callout-quote`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCalloutQuote;
+export default C4DCalloutQuote;
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
index cca83fd7066..2566b64353e 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.mdx
@@ -1,12 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Callout with Media
 
 > 💡 Check our
@@ -15,7 +16,9 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 [![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/callout-with-media)
 
-**Note:** as of release v1.18.0 the copy in `DDSCalloutWithMedia` has been updated to use `DDSCalloutWithMediaCopy` and no longer using `DDSContentBlockCopy`
+**Note:** as of release v1.18.0 the copy in `C4DCalloutWithMedia` has been
+updated to use `C4DCalloutWithMediaCopy` and no longer using
+`C4DContentBlockCopy`
 
 ## Getting started
 
@@ -30,23 +33,41 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/index.
 import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callout-with-media-image.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['callout-with-media', 'callout-with-media-image'] })}`} />
+<Description
+  markdown={`${cdnJs({
+    components: ['callout-with-media', 'callout-with-media-image'],
+  })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles.
+You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles//scss/globals/tokens/color-tokens' as
+  color-tokens;
+@include add-component-tokens(color-tokens.$color-tokens);
+```
+
 ### HTML
 
 ```html
-<dds-callout-with-media>
-  <dds-content-block-heading>lorum ipsum dolor sit ameet</dds-content-block-heading>
-  <dds-callout-with-media-copy size="sm">lorum ipsum dolor sit ameet</dds-callout-with-media-copy>
-  <dds-callout-with-media-image
+<cds-callout-with-media>
+  <cds-content-block-heading
+    >lorum ipsum dolor sit ameet</cds-content-block-heading
+  >
+  <cds-callout-with-media-copy size="sm"
+    >lorum ipsum dolor sit ameet</cds-callout-with-media-copy
+  >
+  <cds-callout-with-media-image
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-  >
-  </dds-callout-with-media-image>
-</dds-callout-with-media>
+    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+  </cds-callout-with-media-image>
+</cds-callout-with-media>
 ```
 
 ## Callout with Media (Video)
@@ -58,47 +79,56 @@ import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/index.
 import '@carbon/ibmdotcom-web-components/es/components/callout-with-media/callout-with-media-video.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['callout-with-media','callout-with-media-video'] })}`} />
+<Description
+  markdown={`${cdnJs({
+    components: ['callout-with-media', 'callout-with-media-video'],
+  })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<dds-callout-with-media>
-  <dds-content-block-heading>lorum ipsum dolor sit ameet</dds-content-block-heading>
-  <dds-callout-with-media-copy size="sm">lorum ipsum dolor sit ameet</dds-callout-with-media-copy>
-  <dds-callout-with-media-video
+<cds-callout-with-media>
+  <cds-content-block-heading
+    >lorum ipsum dolor sit ameet</cds-content-block-heading
+  >
+  <cds-callout-with-media-copy size="sm"
+    >lorum ipsum dolor sit ameet</cds-callout-with-media-copy
+  >
+  <cds-callout-with-media-video
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-  >
-  </dds-callout-with-media-video>
-</dds-callout-with-media>
+    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+  </cds-callout-with-media-video>
+</cds-callout-with-media>
 ```
 
 ## Props
 
-<Props of="dds-content-block-simple" />
+<Props of="cds-content-block-simple" />
 
-### `<dds-callout-with-media-image>`
+### `<cds-callout-with-media-image>`
 
-<Props of="dds-callout-with-media-image" />
+<Props of="cds-callout-with-media-image" />
 
-### `<dds-callout-with-media-video>`
+### `<cds-callout-with-media-video>`
 
-<Props of="dds-callout-with-media-video" />
+<Props of="cds-callout-with-media-video" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-callout-with-media>`       | `data-autoid="dds--callout-with-media"`       | Component   |
-| `<dds-callout-with-media-copy>`  | `data-autoid="dds--callout-with-media-copy"`  | Component   |
-| `<dds-callout-with-media-image>` | `data-autoid="dds--callout-with-media-image"` | Component   |
-| `<dds-callout-with-media-video>` | `data-autoid="dds--callout-with-media-video"` | Component   |
+| `<cds-callout-with-media>`       | `data-autoid="cds--callout-with-media"`       | Component   |
+| `<cds-callout-with-media-copy>`  | `data-autoid="cds--callout-with-media-copy"`  | Component   |
+| `<cds-callout-with-media-image>` | `data-autoid="cds--callout-with-media-image"` | Component   |
+| `<cds-callout-with-media-video>` | `data-autoid="cds--callout-with-media-video"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
index 13b63916e35..33802b28484 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/README.stories.react.mdx
@@ -23,48 +23,59 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
-import DDSCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
+import C4DCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
+import C4DCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
 
 function App() {
   return (
-    <DDSCalloutWithMedia>
-      <DDSContentBlockHeading>
+    <C4DCalloutWithMedia>
+      <C4DContentBlockHeading>
         Curabitur malesuada varius mi eu posuere
-      </DDSContentBlockHeading>
-      <DDSCalloutWithMediaCopy size="sm">
+      </C4DContentBlockHeading>
+      <C4DCalloutWithMediaCopy size="sm">
         lorum ipsum dolor sit ameet
-      </DDSCalloutWithMediaCopy>
-      <DDSCalloutWithMediaImage
+      </C4DCalloutWithMediaCopy>
+      <C4DCalloutWithMediaImage
         alt="Image alt text"
         default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616"
-        heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></DDSCalloutWithMediaImage>
-    </DDSCalloutWithMedia>
+        heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></C4DCalloutWithMediaImage>
+    </C4DCalloutWithMedia>
   );
 }
 ```
 
+### SCSS
+
+Callout quote has specific tokens per theme that need to emitted in the styles.
+You can do this for example by adding the following:
+
+```css
+@use '@carbon/ibmdotcom-styles//scss/globals/tokens/color-tokens' as
+  color-tokens;
+@include add-component-tokens(color-tokens.$color-tokens);
+```
+
 ## Callout with Media (Video)
 
 ```javascript
-import DDSCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
-import DDSCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
+import C4DCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
+import C4DCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
 
 function App() {
   return (
-    <DDSCalloutWithMedia>
-      <DDSContentBlockHeading>
+    <C4DCalloutWithMedia>
+      <C4DContentBlockHeading>
         Curabitur malesuada varius mi eu posuere
-      </DDSContentBlockHeading>
-      <DDSCalloutWithMediaCopy size="sm">
+      </C4DContentBlockHeading>
+      <C4DCalloutWithMediaCopy size="sm">
         lorum ipsum dolor sit ameet
-      </DDSCalloutWithMediaCopy>
-      <DDSCalloutWithMediaVideo video-id="1_9h94wo6b"></DDSCalloutWithMediaVideo>
-    </DDSCalloutWithMedia>
+      </C4DCalloutWithMediaCopy>
+      <C4DCalloutWithMediaVideo video-id="0_ibuqxqbe"></C4DCalloutWithMediaVideo>
+    </C4DCalloutWithMedia>
   );
 }
 ```
@@ -73,7 +84,7 @@ function App() {
 
 <Props of={PropTypesRef} />
 
-### DDSCalloutWithMediaImage props
+### C4DCalloutWithMediaImage props
 
 <Props of={imageProps} />
 
@@ -85,9 +96,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-callout-with-media>`       | `data-autoid="dds--callout-with-media"`       | Component   |
-| `<dds-callout-with-media-copy>`  | `data-autoid="dds--callout-with-media-copy"`  | Component   |
-| `<dds-callout-with-media-image>` | `data-autoid="dds--callout-with-media-image"` | Component   |
-| `<dds-callout-with-media-video>` | `data-autoid="dds--callout-with-media-video"` | Component   |
+| `<cds-callout-with-media>`       | `data-autoid="cds--callout-with-media"`       | Component   |
+| `<cds-callout-with-media-copy>`  | `data-autoid="cds--callout-with-media-copy"`  | Component   |
+| `<cds-callout-with-media-image>` | `data-autoid="cds--callout-with-media-image"` | Component   |
+| `<cds-callout-with-media-video>` | `data-autoid="cds--callout-with-media-video"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx
index 458168f44ad..a2c7ecc96e2 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx
+++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.react.tsx
@@ -2,7 +2,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -13,43 +13,53 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
-import DDSCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
-import DDSCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
+import C4DCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
+import C4DCalloutWithMediaImage from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-image';
+import C4DCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
 import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
+
 const image = (
-  <DDSCalloutWithMediaImage
+  <C4DCalloutWithMediaImage
     alt="Image alt text"
     default-src={imgLg16x9}
-    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></DDSCalloutWithMediaImage>
+    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."></C4DCalloutWithMediaImage>
 );
 
 const video = (
-  <DDSCalloutWithMediaVideo video-id="1_9h94wo6b"></DDSCalloutWithMediaVideo>
+  <C4DCalloutWithMediaVideo video-id="1_9h94wo6b"></C4DCalloutWithMediaVideo>
 );
 
 export const Default = (args) => {
-  const { copy, heading, mediaType } = args?.CalloutWithMedia ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const { copy, heading, mediaType, colorScheme } = args?.CalloutWithMedia ?? {};
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent) {
     headingComponent.shadowRoot!.textContent = heading;
   }
 
   return (
-    <DDSCalloutWithMedia>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSCalloutWithMediaCopy size={CONTENT_BLOCK_COPY_SIZE.SMALL}>
+    <C4DCalloutWithMedia color-scheme={colorScheme}>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DCalloutWithMediaCopy size={CONTENT_BLOCK_COPY_SIZE.SMALL}>
         {copy}
-      </DDSCalloutWithMediaCopy>
+      </C4DCalloutWithMediaCopy>
       {mediaType === 'image' ? image : ``} {mediaType === 'video' ? video : ``}
-    </DDSCalloutWithMedia>
+    </C4DCalloutWithMedia>
   );
 };
 
@@ -57,9 +67,9 @@ export default {
   title: 'Components/Callout with media',
   decorators: [
     (story) => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-12 bx--no-gutter">{story()}</div>
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-12 cds--no-gutter">{story()}</div>
         </div>
       </div>
     ),
@@ -82,6 +92,11 @@ export default {
           Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
           nulla quis, *consequat* libero. Here are
           some common categories:`,
+          colorScheme: select(
+            'Color scheme:',
+            colorSchemeTypes,
+            COLOR_SCHEME.REGULAR
+          ),
       }),
     },
   },
diff --git a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
index 96a765da119..1810f2caaee 100644
--- a/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
+++ b/packages/web-components/src/components/callout-with-media/__stories__/callout-with-media.stories.ts
@@ -1,46 +1,54 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 '../index';
-import '../callout-with-media-image';
-import '../callout-with-media-video';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
 import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy';
+import { COLOR_SCHEME } from '../../../component-mixins/callout/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
 const image = html`
-  <dds-callout-with-media-image
+  <c4d-callout-with-media-image
     alt="Image alt text"
     default-src="${imgLg16x9}"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-  </dds-callout-with-media-image>
+  </c4d-callout-with-media-image>
 `;
 
 const video = html`
-  <dds-callout-with-media-video
-    video-id="0_uka1msg4"></dds-callout-with-media-video>
+  <c4d-callout-with-media-video
+    video-id="1_9h94wo6b"></c4d-callout-with-media-video>
 `;
 
 export const Default = (args) => {
-  const { copy, heading, mediaType } = args?.CalloutWithMedia ?? {};
+  const { copy, heading, mediaType, colorScheme } =
+    args?.CalloutWithMedia ?? {};
   return html`
-    <dds-callout-with-media>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-callout-with-media-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
-        >${copy}</dds-callout-with-media-copy
+    <c4d-callout-with-media color-scheme="${colorScheme}">
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-callout-with-media-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
+        >${copy}</c4d-callout-with-media-copy
       >
       ${mediaType === 'image' ? image : ``}
       ${mediaType === 'video' ? video : ``}
-    </dds-callout-with-media>
+    </c4d-callout-with-media>
   `;
 };
 
@@ -48,9 +56,9 @@ export default {
   title: 'Components/Callout with media',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
@@ -73,6 +81,11 @@ export default {
   Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
   nulla quis, *consequat* libero. Here are
   some common categories:`,
+        colorScheme: select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/callout-with-media/__tests__/callout-with-media.test.ts b/packages/web-components/src/components/callout-with-media/__tests__/callout-with-media.test.ts
index 25fda8407b8..2f31f5c5b54 100644
--- a/packages/web-components/src/components/callout-with-media/__tests__/callout-with-media.test.ts
+++ b/packages/web-components/src/components/callout-with-media/__tests__/callout-with-media.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../callout-with-media';
 import '../callout-with-media-image';
 import '../callout-with-media-video';
@@ -15,20 +15,20 @@ import '../callout-with-media-video';
 const template = (props?) => {
   const { heading, children } = props ?? {};
   return html`
-    <dds-callout-with-media>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+    <c4d-callout-with-media>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
       ${children}
-    </dds-callout-with-media>
+    </c4d-callout-with-media>
   `;
 };
 
-describe('dds-callout-with-media', function () {
+describe('c4d-callout-with-media', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-callout-with-media')
+        document.body.querySelector('c4d-callout-with-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -37,19 +37,19 @@ describe('dds-callout-with-media', function () {
         template({
           heading: 'heading-foo',
           children: html`
-            <dds-callout-with-media-copy>copy-foo</dds-callout-with-media-copy>
-            <dds-callout-with-media-image
+            <c4d-callout-with-media-copy>copy-foo</c4d-callout-with-media-copy>
+            <c4d-callout-with-media-image
               alt="Image alt text"
               default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
               heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-            </dds-callout-with-media-image>
+            </c4d-callout-with-media-image>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-callout-with-media')
+        document.body.querySelector('c4d-callout-with-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -58,16 +58,16 @@ describe('dds-callout-with-media', function () {
         template({
           heading: 'heading-foo',
           children: html`
-            <dds-callout-with-media-copy>copy-foo</dds-callout-with-media-copy>
-            <dds-callout-with-media-video
-              video-id="0_uka1msg4"></dds-callout-with-media-video>
+            <c4d-callout-with-media-copy>copy-foo</c4d-callout-with-media-copy>
+            <c4d-callout-with-media-video
+              video-id="0_uka1msg4"></c4d-callout-with-media-video>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-callout-with-media')
+        document.body.querySelector('c4d-callout-with-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts b/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts
index 6d5ce82507c..66992410252 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media-copy.ts
@@ -6,23 +6,31 @@
  * 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 { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import DDSContentBlockCopy from '../content-block/content-block-copy';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import styles from './callout-with-media.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The copy content of callout with media.
  *
- * @element dds-callout-with-media-copy
+ * @element c4d-callout-with-media-copy
  */
-@customElement(`${ddsPrefix}-callout-with-media-copy`)
-class DDSCalloutWithMediaCopy extends DDSContentBlockCopy {
+@customElement(`${c4dPrefix}-callout-with-media-copy`)
+class C4DCalloutWithMediaCopy extends DDSContentBlockCopy {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   static get stableSelector() {
-    return `${ddsPrefix}--callout-with-media-copy`;
+    return `${c4dPrefix}--callout-with-media-copy`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -34,4 +42,4 @@ class DDSCalloutWithMediaCopy extends DDSContentBlockCopy {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCalloutWithMediaCopy;
+export default C4DCalloutWithMediaCopy;
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts b/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts
index f5955e2bb9b..59ccd3579ab 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media-image.ts
@@ -7,21 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-with-media.scss';
-import DDSImage from '../image/image';
+import C4DImage from '../image/image';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Callout with media image.
  *
- * @element dds-callout-with-media-image
+ * @element c4d-callout-with-media-image
  */
-@customElement(`${ddsPrefix}-callout-with-media-image`)
-class DDSCalloutWithMediaImage extends DDSImage {
+@customElement(`${c4dPrefix}-callout-with-media-image`)
+class C4DCalloutWithMediaImage extends C4DImage {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   /**
    * The shadow slot this video container should be in.
    */
@@ -32,4 +39,4 @@ class DDSCalloutWithMediaImage extends DDSImage {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCalloutWithMediaImage;
+export default C4DCalloutWithMediaImage;
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts b/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts
index 68273ee0d34..6463fbd9a17 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media-video.ts
@@ -7,21 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-with-media.scss';
-import DDSVideoPlayerContainer from '../video-player/video-player-container';
+import C4DVideoPlayerContainer from '../video-player/video-player-container';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Callout with media video.
  *
- * @element dds-callout-with-media-video
+ * @element c4d-callout-with-media-video
  */
-@customElement(`${ddsPrefix}-callout-with-media-video`)
-class DDSCalloutWithMediaVideo extends DDSVideoPlayerContainer {
+@customElement(`${c4dPrefix}-callout-with-media-video`)
+class C4DCalloutWithMediaVideo extends C4DVideoPlayerContainer {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
   /**
    * The shadow slot this video container should be in.
    */
@@ -32,4 +39,4 @@ class DDSCalloutWithMediaVideo extends DDSVideoPlayerContainer {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCalloutWithMediaVideo;
+export default C4DCalloutWithMediaVideo;
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media.scss b/packages/web-components/src/components/callout-with-media/callout-with-media.scss
index 0394e17136c..747e518d8b3 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media.scss
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/callout-with-media/callout-with-media';
+@use '@carbon/ibmdotcom-styles/scss/components/callout-with-media';
diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media.ts b/packages/web-components/src/components/callout-with-media/callout-with-media.ts
index 9e42c544c09..11430709d59 100644
--- a/packages/web-components/src/components/callout-with-media/callout-with-media.ts
+++ b/packages/web-components/src/components/callout-with-media/callout-with-media.ts
@@ -7,30 +7,84 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './callout-with-media.scss';
-import DDSCalloutMixin from '../../component-mixins/callout/callout';
-import DDSContentBlock from '../content-block/content-block';
+import C4DCalloutMixin from '../../component-mixins/callout/callout';
+import C4DContentBlock from '../content-block/content-block';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import { property } from 'lit/decorators.js';
+import { COLOR_SCHEME } from '../../component-mixins/callout/defs';
+import C4DCalloutWithMediaCopy from './callout-with-media-copy';
+import C4DCalloutWithMediaImage from './callout-with-media-image';
+import C4DCalloutWithMediaVideo from './callout-with-media-video';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Callout Data.
  *
- * @element dds-callout-data
+ * @element c4d-callout-data
  */
-@customElement(`${ddsPrefix}-callout-with-media`)
-class DDSCalloutWithMedia extends DDSCalloutMixin(
-  StableSelectorMixin(DDSContentBlock)
+@customElement(`${c4dPrefix}-callout-with-media`)
+class C4DCalloutWithMedia extends C4DCalloutMixin(
+  StableSelectorMixin(C4DContentBlock)
 ) {
+  /**
+   * The color-scheme type.
+   */
+  @property({ reflect: true, attribute: 'color-scheme' })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    const copy = this.querySelector(
+      (this.constructor as typeof C4DCalloutWithMedia).selectorCopy
+    );
+    const image = this.querySelector(
+      (this.constructor as typeof C4DCalloutWithMedia).selectorImage
+    );
+    const video = this.querySelector(
+      (this.constructor as typeof C4DCalloutWithMedia).selectorVideo
+    );
+    copy
+      ? ((copy as C4DCalloutWithMediaCopy).colorScheme = this.colorScheme)
+      : '';
+    image
+      ? ((image as C4DCalloutWithMediaImage).colorScheme = this.colorScheme)
+      : '';
+    video
+      ? ((video as C4DCalloutWithMediaVideo).colorScheme = this.colorScheme)
+      : '';
+  }
+
+  /**
+   * A selector that will return the child image.
+   */
+  static get selectorImage() {
+    return `${c4dPrefix}-callout-with-media-image`;
+  }
+
+  /**
+   * A selector that will return the child video.
+   */
+  static get selectorVideo() {
+    return `${c4dPrefix}-callout-with-media-video`;
+  }
+
+  /**
+   * A selector that will return the child copy.
+   */
+  static get selectorCopy() {
+    return `${c4dPrefix}-callout-with-media-copy`;
+  }
+
   static get stableSelector() {
-    return `${ddsPrefix}--callout-with-media`;
+    return `${c4dPrefix}--callout-with-media`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCalloutWithMedia;
+export default C4DCalloutWithMedia;
diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
index ae6a48ba9a4..2d3c44d2f69 100644
--- a/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-group/__stories__/README.stories.mdx
@@ -1,8 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# Card Group
+# Card group
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-group)
@@ -29,134 +34,292 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
 ### HTML
 
 ```html
-<dds-card-group>
-  <dds-card-group-item cta-type="local" href="https://example.com">
-    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<c4d-card-group>
+  <c4d-card-group-item cta-type="local" href="https://example.com">
+    <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+      sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <dds-card-cta-footer slot="footer">
-    </dds-card-cta-footer>
-  </dds-card-group-item>
-  <dds-card-group-item cta-type="local" href="https://example.com" color-scheme="inverse">
-    <dds-card-heading>Top level card link</dds-card-heading>
-    <dds-card-cta-footer slot="footer" color-scheme="inverse">
-    </dds-card-cta-footer>
-  </dds-card-group-item>
-</dds-card-group>
+    <c4d-card-cta-footer slot="footer"> </c4d-card-cta-footer>
+  </c4d-card-group-item>
+  <c4d-card-group-item
+    cta-type="local"
+    href="https://example.com"
+    >
+    <c4d-card-heading>Top level card link</c4d-card-heading>
+    <c4d-card-cta-footer slot="footer">
+    </c4d-card-cta-footer>
+  </c4d-card-group-item>
+</c4d-card-group>
 ```
 
-### HTML (with Card in Card)
+### HTML (with Card pictogram)
 
 ```html
-<dds-card-in-card grid-mode="narrow" href="https://example.com">
-  <dds-card-in-card-image
-    slot="image"
-    alt="Image alt text"
-    default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"
-  >
-    <dds-image-item media="(min-width: 1312px)" srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 672px)" srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-  </dds-card-in-card-image>
-  <dds-card-eyebrow>Label</dds-card-eyebrow>
-  <dds-card-heading>Standard Bank Group prepares to embrace Africa’s AI opportunity</dds-card-heading>
-  <dds-card-cta-footer>
+
+<c4d-card-group>
+  <c4d-card-group-item
+    href="https://example.com"
+    pictogram-placement="bottom"
+    >
+    <c4d-card-heading>Aerospace and defence</c4d-card-heading>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
+      exercitation.
+    </p>
     <svg
-      slot="icon"
+      slot="pictogram"
       focusable="false"
       preserveAspectRatio="xMidYMid meet"
       xmlns="http://www.w3.org/2000/svg"
-      fill="currentColor"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
+      data-autoid="c4d--card__pictogram"
+      aria-label="Pictogram description"
+      width="48"
+      height="48"
+      viewBox="0 0 32 32"
+      role="img"
+      class="cds--card__pictogram">
+      <path
+        id="desktop_1_"
+        d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
+  c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
+  0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
+  18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
+    </svg>
+  </c4d-card-group-item>
+  <c4d-card-group-item
+    href="https://example.com"
+    pictogram-placement="bottom"
     >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+    <c4d-card-heading>Aerospace and defence</c4d-card-heading>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
+      exercitation.
+    </p>
+    <svg
+      slot="pictogram"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      data-autoid="c4d--card__pictogram"
+      aria-label="Pictogram description"
+      width="48"
+      height="48"
+      viewBox="0 0 32 32"
+      role="img"
+      class="cds--card__pictogram">
+      <path
+        id="desktop_1_"
+        d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
+  c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
+  0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
+  18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
     </svg>
-  </dds-card-cta-footer>
-</dds-card-in-card>
+  </c4d-card-group-item>
+  <c4d-card-group-item
+    href="https://example.com"
+    pictogram-placement="bottom"
+    >
+    <c4d-card-heading>Aerospace and defence</c4d-card-heading>
+    <p>
+      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+      aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
+      exercitation.
+    </p>
+    <svg
+      slot="pictogram"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      data-autoid="c4d--card__pictogram"
+      aria-label="Pictogram description"
+      width="48"
+      height="48"
+      viewBox="0 0 32 32"
+      role="img"
+      class="cds--card__pictogram">
+      <path
+        id="desktop_1_"
+        d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
+  c1.302,0,2.36,1.059,2.36,2.36v17c0,1.302-1.059,2.36-2.36,2.36H16.36v4.279H23V29.36z M1.36,19.36V22c0,
+  0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
+  18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
+    </svg>
+  </c4d-card-group-item>    
+</c4d-card-group>
+
+```
+
+### HTML (with Card static)
 
-<dds-card-group grid-mode="narrow">
-  <dds-card-group-item cta-type="local" href="https://example.com">
-    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+```html
+<c4d-card-group>
+  <c4d-card-group-item cta-type="local">
+    <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+      sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <dds-card-cta-footer slot="footer">
-    </dds-card-cta-footer>
-  </dds-card-group-item>
-</dds-card-group>
+    <c4d-card-cta-footer slot="footer"> </c4d-card-cta-footer>
+  </c4d-card-group-item>
+  <c4d-card-group-item
+    cta-type="local"
+    >
+    <c4d-card-heading>Top level card link</c4d-card-heading>
+    <c4d-card-cta-footer slot="footer">
+    </c4d-card-cta-footer>
+  </c4d-card-group-item>
+</c4d-card-group>
 ```
 
-### HTML (with Card Link)
+### HTML (with Card link)
 
 ```html
-<dds-card-group grid-mode="narrow">
-  <dds-card-group-card-link-item cta-type="local" href="https://example.com" pattern-background>
-    <dds-card-link-heading>IBM Developer - Card 01</dds-card-link-heading>
+<c4d-card-group grid-mode="narrow">
+  <c4d-card-group-item
+    link
+    cta-type="local"
+    href="https://example.com"
+    pattern-background>
+    <c4d-card-heading>IBM Developer - Card 01</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
-  </dds-card-group-card-link-item>
-
-  <dds-card-group-card-link-item cta-type="local" href="https://example.com" pattern-background>
-    <dds-card-link-heading>IBM Developer - Card 02</dds-card-link-heading>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
+  </c4d-card-group-card-link-item>
+
+  <c4d-card-group-item
+    link
+    cta-type="local"
+    href="https://example.com"
+    pattern-background>
+    <c4d-card-heading>IBM Developer - Card 02</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
-  </dds-card-group-card-link-item>
-
-  <dds-card-group-card-link-item cta-type="local" href="https://example.com" pattern-background>
-    <dds-card-link-heading>IBM Developer - Card 03</dds-card-link-heading>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
+  </c4d-card-group-item>
+
+  <c4d-card-group-item
+    link
+    cta-type="local"
+    href="https://example.com"
+    pattern-background>
+    <c4d-card-heading>IBM Developer - Card 03</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
-  </dds-card-group-card-link-item>
-</dds-card-group>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
+  </c4d-card-group-item>
+</c4d-card-group>
 ```
 
 ### HTML (with Mixed Media)
 
-In order to have video components, make sure to import `video-cta-container` and place `dds-card-group` within.
+In order to have video components, make sure to import `video-cta-container` and
+place `cds-card-group` within.
 
-To set the `dds-card-in-card` to play video, see more details [here](https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-card-in-card--default).
+To set the `cds-card-in-card` to play video, see more details
+[here](https://www.ibm.com/standards/carbon/web-components/?path=/docs/components-card-in-card--default).
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.js';
 ```
 
 ```html
-<dds-video-cta-container>
-  <dds-card-group>
-    <dds-card-group-item cta-type="video" href="1_9h94wo6b">
-      <dds-card-eyebrow>Topic</dds-card-eyebrow>
-      <dds-card-cta-footer cta-type="video" slot="footer" href="1_9h94wo6b"> </dds-card-cta-footer>
-    </dds-card-group-item>
-  </dds-card-group>
-</dds-video-cta-container>
+<c4d-video-cta-container>
+  <c4d-card-group>
+    <c4d-card-group-item cta-type="video" href="0_ibuqxqbe">
+      <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+      <c4d-card-footer cta-type="video" slot="footer" href="0_ibuqxqbe">
+      </c4d-card-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+</c4d-video-cta-container>
+```
+
+### HTML (with Card in Card)
+
+```html
+<c4d-card-in-card href="https://example.com">
+  <c4d-card-in-card-image
+    slot="image"
+    alt="Image alt text"
+    default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
+    <c4d-image-item
+      media="(min-width: 1312px)"
+      srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+    <c4d-image-item
+      media="(min-width: 672px)"
+      srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+    <c4d-image-item
+      media="(min-width: 320px)"
+      srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+  </c4d-card-in-card-image>
+  <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+  <c4d-card-heading
+    >Standard Bank Group prepares to embrace Africa’s AI
+    opportunity</c4d-card-heading
+  >
+  <c4d-card-footer>
+    <svg
+      slot="icon"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+    </svg>
+  </c4d-card-footer>
+</c4d-card-in-card>
+
+<c4d-card-group grid-mode="narrow">
+  <c4d-card-group-item cta-type="local" href="https://example.com">
+    <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+      sollicitudin, sodales nulla quis, consequat libero.
+    </p>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
+  </c4d-card-group-item>
+</c4d-card-group>
 ```
 
+### Grid mode
+
+There are three different options for the `grid-mode` property:
+
+* Default (32px gap)
+* Condensed (16px gap)
+* Collapsed (no gap)
+
 ## Props
 
-### `<dds-card-group>`
+### `<c4d-card-group>`
 
-<Props of="dds-card-group" />
+<Props of="cds-card-group" />
 
-### `<dds-card-group-item>`
+### `<c4d-card-group-item>`
 
-<Props of="dds-card-group-item" />
+<Props of="cds-card-group-item" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<dds-card-group>`      | `data-autoid="dds--card-group"`      | Component   |
-| `<dds-card-group-item>` | `data-autoid="dds--card-group-item"` | Component   |
+| `<c4d-card-group>`      | `data-autoid="cds--card-group"`      | Component   |
+| `<c4d-card-group-item>` | `data-autoid="cds--card-group-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx
index 8c9fde9e981..19484b34fc3 100644
--- a/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-group/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
 
@@ -17,139 +22,241 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
 
 function App() {
   return (
-    <DDSCardGroup>
-      <DDSCardGroupItem cta-type="local" href="https://example.com">
-        <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+    <C4DCardGroup>
+      <C4DCardGroupItem cta-type="local" href="https://example.com">
+        <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-          hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+          ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+          elit sollicitudin, sodales nulla quis, consequat libero.
         </p>
-        <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
-      </DDSCardGroupItem>
-      <DDSCardGroupItem cta-type="local" href="https://example.com">
-        <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+      <C4DCardGroupItem cta-type="local" href="https://example.com">
+        <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-          hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+          ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+          elit sollicitudin, sodales nulla quis, consequat libero.
         </p>
-        <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
-      </DDSCardGroupItem>
-    </DDSCardGroup>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+    </C4DCardGroup>
   );
 }
 ```
 
-### JS (with Card in Card)
+### JS (with Card pictogram)
 
 ```javascript
-import DDSCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card.js';
-import DDSCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image.js';
-import DDSCardInCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-footer.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js'
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
+import Desktop from '@carbon/pictograms-react/lib/desktop/index.js';
 
 function App() {
   return (
-  <DDSCardInCard grid-mode="narrow" href="https://example.com">
-    <DDSCardInCardImage slot="image" alt="Image alt text" defaultSrc="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-      <DDSImageItem media="(min-width: 1312px)" srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"> </DDSImageItem>
-      <DDSImageItem media="(min-width: 672px)" srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"> </DDSImageItem>
-      <DDSImageItem media="(min-width: 320px)" srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"> </DDSImageItem>
-    </DDSCardInCardImage>
-    <DDSCardEyebrow>Label</DDSCardEyebrow>
-    <DDSCardHeading>Standard Bank Group prepares to embrace Africa’s AI opportunity</DDSCardHeading>
-    <DDSCardCTAFooter>
-      <ArrowRight20 slot="icon"/>
-    </DDSCardCTAFooter>
-  </DDSCardInCard>
-  <DDSCardGroup>
-    <DDSCardGroupItem cta-type="local" href="https://example.com">
-      <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
-      <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-        ultricies est. Mauris iaculis eget dolor nec
-        hendrerit. Phasellus at elit sollicitudin, sodales nulla quis,
-        consequat
-        libero.
-      </p>
-      <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
-    </DDSCardGroupItem>
-  </DDSCardGroup>
+    <C4DCardGroup>
+      <C4DCardGroupItem cta-type="local" href="https://example.com">
+        <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+          ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+          elit sollicitudin, sodales nulla quis, consequat libero.
+        </p>
+        <Desktop slot="pictogram" width="48" height="48" />
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+      <C4DCardGroupItem cta-type="local" href="https://example.com">
+        <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+          ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+          elit sollicitudin, sodales nulla quis, consequat libero.
+        </p>
+        <Desktop slot="pictogram" width="48" height="48" />
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+    </C4DCardGroup>
   );
 }
 ```
 
-### JS (with Card Link)
+### JS (with Card static)
 
 ```javascript
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
-import DDSCardGroupCardLinkItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-card-link-item.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-link-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
 
 function App() {
   return (
-    <DDSCardGroup gridMode="narrow">
-      <DDSCardGroupCardLinkItem cta-type="local" href="https://example.com" pattern-background>
-        <DDSCardLinkHeading>IBM Developer - Card 01</DDSCardLinkHeading>
+    <C4DCardGroup>
+      <C4DCardGroupItem cta-type="local">
+        <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+          ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+          elit sollicitudin, sodales nulla quis, consequat libero.
+        </p>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+      <C4DCardGroupItem cta-type="local">
+        <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+          ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+          elit sollicitudin, sodales nulla quis, consequat libero.
+        </p>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+    </C4DCardGroup>
+  );
+}
+```
+
+### JS (with Card link)
+
+```javascript
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
+
+function App() {
+  return (
+    <C4DCardGroup gridMode="narrow">
+      <C4DCardGroupItem
+        link
+        cta-type="local"
+        href="https://example.com"
+        pattern-background>
+        <C4DCardHeading>IBM Developer - Card 01</C4DCardHeading>
+        <p>Learn, code and connect with your community</p>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>
+      <C4DCardGroupItem
+        link
+        cta-type="local"
+        href="https://example.com"
+        pattern-background>
+        <C4DCardHeading>IBM Developer - Card 02</C4DCardHeading>
         <p>Learn, code and connect with your community</p>
-        <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
-      </DDSCardGroupCardLinkItem>
-    </DDSCardGroup>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
+      </C4DCardGroupItem>      
+    </C4DCardGroup>
   );
 }
 ```
 
 ### JS (with Mixed Media)
 
-In order to have video components, make sure to import the `DDSVideoCTAContainer` and place `DDSCardGroup` within.
+In order to have video components, make sure to import the
+`C4DVideoCTAContainer` and place `C4DCardGroup` within.
 
-To set the `DDSCardInCard` to play video, see more details [here](https://www.ibm.com/standards/carbon/web-components/react/?path=/docs/components-card-in-card--default).
+To set the `C4DCardInCard` to play video, see more details
+[here](https://www.ibm.com/standards/carbon/web-components/react/?path=/docs/components-card-in-card--default).
 
 ```javascript
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-link-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
 
 function App() {
   return (
-    <DDSVideoCTAContainer>
-      <DDSCardGroup gridMode="narrow">
-        <DDSCardGroupItem cta-type="video" href="1_9h94wo6b">
-          <DDSCardEyebrow>Topic</DDSCardEyebrow>
-          <DDSCardCTAFooter cta-type="video" href="1_9h94wo6b" slot="footer"></DDSCardCTAFooter>
-        </DDSCardGroupItem>
-      </DDSCardGroup>
-    </DDSVideoCTAContainer>
+    <C4DVideoCTAContainer>
+      <C4DCardGroup gridMode="narrow">
+        <C4DCardGroupItem cta-type="video" href="0_ibuqxqbe">
+          <C4DCardEyebrow>Topic</C4DCardEyebrow>
+          <C4DCardFooter
+            cta-type="video"
+            href="0_ibuqxqbe"
+            slot="footer"></C4DCardFooter>
+        </C4DCardGroupItem>
+      </C4DCardGroup>
+    </C4DVideoCTAContainer>
   );
 }
 ```
 
+### JS (with Card in Card)
+
+```javascript
+import C4DCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card.js';
+import C4DCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image.js';
+import C4DCardInCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-footer.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js'
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group.js';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
+import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
+
+function App() {
+  return (
+  <C4DCardInCard grid-mode="narrow" href="https://example.com">
+    <C4DCardInCardImage slot="image" alt="Image alt text" defaultSrc="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
+      <C4DImageItem media="(min-width: 1312px)" srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616"> </C4DImageItem>
+      <C4DImageItem media="(min-width: 672px)" srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616"> </C4DImageItem>
+      <C4DImageItem media="(min-width: 320px)" srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"> </C4DImageItem>
+    </C4DCardInCardImage>
+    <C4DCardEyebrow>Label</C4DCardEyebrow>
+    <C4DCardHeading>Standard Bank Group prepares to embrace Africa’s AI opportunity</C4DCardHeading>
+    <C4DCardFooter>
+      <ArrowRight20 slot="icon"/>
+    </C4DCardFooter>
+  </C4DCardInCard>
+  <C4DCardGroup>
+    <C4DCardGroupItem cta-type="local" href="https://example.com">
+      <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec
+        hendrerit. Phasellus at elit sollicitudin, sodales nulla quis,
+        consequat
+        libero.
+      </p>
+      <C4DCardFooter slot="footer"></C4DCardFooter>
+    </C4DCardGroupItem>
+  </C4DCardGroup>
+  );
+}
+```
+
+### Grid mode
+
+There are three different options for the `grid-mode` property:
+
+* Default (32px gap)
+* Condensed (16px gap)
+* Collapsed (no gap)
+
+
 ## Props
 
 <Props of={PropTypesRef} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-card-group>`      | N/A                    | Component   |
-| `<dds-card-group-item>` | N/A                    | Component   |
+| `<cds-card-group>`      | N/A                    | Component   |
+| `<cds-card-group-item>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx b/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx
index f1f337360e8..541d85674f2 100644
--- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx
+++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.react.tsx
@@ -13,22 +13,20 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSCardCTAImage from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-image';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import DDSCardGroupCardLinkItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-card-link-item';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
-import DDSCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import { Tag } from 'carbon-components-react';
-
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardCTAImage from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-image';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+// @ts-ignore
+import C4DTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
+import C4DCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import Tag from '@carbon/web-components/es/components-react/tag/tag.js';
 import imgSm4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
 import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
 import imgXlg16x9 from '../../../../../storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
@@ -48,84 +46,82 @@ const phraseArray = [
 ];
 
 const cardsCol = {
-  '2 cards per row': 'dds-ce-demo-devenv--cards-in-row-2',
-  '3 cards per row (default)': 'dds-ce-demo-devenv--cards-in-row-3',
-  '4 cards per row': 'dds-ce-demo-devenv--cards-in-row-4',
+  '2 cards per row': 'cds-ce-demo-devenv--cards-in-row-2',
+  '3 cards per row (default)': 'cds-ce-demo-devenv--cards-in-row-3',
+  '4 cards per row': 'cds-ce-demo-devenv--cards-in-row-4',
 };
 
-const gridModes = {
-  [`Collapsed (1px)`]: GRID_MODE.COLLAPSED,
+const staticGridModes = {
   [`Narrow (16px)`]: GRID_MODE.NARROW,
-  [`Outlined cards (1px border)`]: GRID_MODE.BORDER,
+  [`Default (32px)`]: GRID_MODE.DEFAULT,
 };
 
-const setGridMode = {
-  'Card static': 'border',
-  'Card link': 'narrow',
+const gridModes = {
+  [`Condensed (1px)`]: GRID_MODE.CONDENSED,
+  [`Narrow (16px)`]: GRID_MODE.NARROW,
+  [`Default (32px)`]: GRID_MODE.DEFAULT,
 };
 
 const tagGroupContent = (
-  <DDSTagGroup>
+  <div>
     <Tag type="cool-gray">Systems w/TPS</Tag>
     <Tag type="cool-gray">Virtual</Tag>
-  </DDSTagGroup>
+  </div>
 );
 
 const textCTAContent = (
-  <DDSTextCTA slot="footer" cta-type="local" href="https://example.com">
+  <C4DTextCTA slot="footer" cta-type="local" href="https://example.com">
     Learn more
-  </DDSTextCTA>
+  </C4DTextCTA>
 );
 
 const imageContent = (
-  <DDSCardCTAImage slot="image" alt="Image alt text" defaultSrc={imgXlg4x3} />
+  <C4DCardCTAImage slot="image" alt="Image alt text" defaultSrc={imgXlg4x3} />
 );
 
 const cardsDiffLengthPhrase = (
   index,
   tagGroup,
   media,
-  gridMode,
   cardType,
   addCta
 ) => {
   const defaultCardGroupItem = (
-    <DDSCardGroupItem
+    <C4DCardGroupItem
       cta-type={cardType === 'Card static' ? '' : 'local'}
       href={cardType === 'Card static' ? '' : 'https://example.com'}
-      colorScheme={
-        cardType === 'Card static' || gridMode === 'border' ? 'light' : null
-      }>
+      >
       {media ? imageContent : ''}
-      <DDSCardEyebrow>Topic</DDSCardEyebrow>
-      <DDSCardHeading>
+      <C4DCardEyebrow>Topic</C4DCardEyebrow>
+      <C4DCardHeading>
         {index < 5 ? phraseArray[index] : 'Lorem ipsum dolor sit amet'}
-      </DDSCardHeading>
+      </C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.'
       </p>
       {tagGroup ? tagGroupContent : ''}
-      {cardType === 'Card static' && addCta ? (
-        textCTAContent
+      {cardType === 'Card static' ? ( addCta ?
+        textCTAContent : ''
       ) : (
-        <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
+        <C4DCardFooter slot="footer"></C4DCardFooter>
       )}
-    </DDSCardGroupItem>
+    </C4DCardGroupItem>
   );
 
   const videoCardGroupItem = (videoId = '1_9h94wo6b') => (
-    <DDSCardGroupItem
+    <C4DCardGroupItem
       cta-type="video"
       href={videoId}
-      color-scheme={gridMode === 'border' ? 'light' : null}>
-      <DDSCardEyebrow>Topic</DDSCardEyebrow>
+      >
+      <C4DCardEyebrow>Topic</C4DCardEyebrow>
+      <C4DCardHeading>Topic</C4DCardHeading>
       {tagGroup ? tagGroupContent : ''}
-      <DDSCardCTAFooter
+      <C4DCardFooter
         cta-type="video"
         href={videoId}
-        slot="footer"></DDSCardCTAFooter>
-    </DDSCardGroupItem>
+        slot="footer"></C4DCardFooter>
+    </C4DCardGroupItem>
   );
 
   const demoVideoIds = ['1_9h94wo6b', '0_ibuqxqbe', '1_6b6qjovy'];
@@ -139,105 +135,100 @@ const cardsDiffLengthPhrase = (
 const longHeadingCardGroupItem = (
   tagGroup,
   media,
-  gridMode,
   cardType,
   addCta
 ) => {
   return (
-    <DDSCardGroupItem
+    <C4DCardGroupItem
       cta-type={cardType === 'Card static' ? '' : 'local'}
       href={cardType === 'Card static' ? '' : 'https://example.com'}
-      colorScheme={
-        cardType === 'Card static' || gridMode === 'border' ? 'light' : null
-      }>
+      >
       {media ? imageContent : ''}
-      <DDSCardEyebrow>Topic</DDSCardEyebrow>
-      <DDSCardHeading>
+      <C4DCardEyebrow>Topic</C4DCardEyebrow>
+      <C4DCardHeading>
         Nunc convallis lobortis Nunc convallis lobortis Nunc convallis lobortis
-      </DDSCardHeading>
+      </C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
       {tagGroup ? tagGroupContent : ''}
-      {cardType === 'Card static' && addCta ? (
-        textCTAContent
-      ) : (
-        <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
+      {cardType === 'Card static' ? (addCta ? textCTAContent : '') 
+      : (
+        <C4DCardFooter slot="footer"></C4DCardFooter>
       )}
-    </DDSCardGroupItem>
+    </C4DCardGroupItem>
   );
 };
 
-const pictogramCard = (gridMode) => (
-  <DDSCardGroupItem
+const pictogramCard = () => (
+  <C4DCardGroupItem
     href="https://example.com"
-    pictogramPlacement="top"
-    colorScheme={gridMode === 'border' ? 'light' : null}>
-    <DDSCardHeading>Aerospace and defence</DDSCardHeading>
+    pictogramPlacement="bottom"
+    >
+    <C4DCardHeading>Aerospace and defence</C4DCardHeading>
     <p>
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
       aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
       exercitation.
     </p>
     <Desktop slot="pictogram" width="48" height="48" />
-  </DDSCardGroupItem>
+  </C4DCardGroupItem>
 );
 
 const cardLink = (
-  <DDSCardGroupCardLinkItem
+  <C4DCardGroupItem
+    link
     cta-type="local"
     href="https://example.com"
     pattern-background>
-    <DDSCardLinkHeading>IBM Developer</DDSCardLinkHeading>
+    <C4DCardHeading>IBM Developer</C4DCardHeading>
     <p>Learn, code and connect with your community</p>
-    <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
-  </DDSCardGroupCardLinkItem>
+    <C4DCardFooter slot="footer"></C4DCardFooter>
+  </C4DCardGroupItem>
 );
 
-const emptyCard = <DDSCardGroupItem empty></DDSCardGroupItem>;
-
 const cardInCardItems = (i, tagGroup, media, gridMode) => {
   if (media) {
     return i % 2 === 0 ? (
-      <DDSCardGroupItem
+      <C4DCardGroupItem
         cta-type="local"
         href="https://example.com"
         colorScheme={gridMode === 'border' ? 'light' : null}>
         {imageContent}
-        <DDSCardEyebrow>Label</DDSCardEyebrow>
-        <DDSCardHeading>
+        <C4DCardEyebrow>Label</C4DCardEyebrow>
+        <C4DCardHeading>
           The United Nations Environment Program works with IBM to reduce marine
           litter
-        </DDSCardHeading>
+        </C4DCardHeading>
         {tagGroup ? tagGroupContent : ''}
-        <DDSCardCTAFooter slot="footer" />
-      </DDSCardGroupItem>
+        <C4DCardFooter slot="footer" />
+      </C4DCardGroupItem>
     ) : (
-      <DDSCardGroupItem
+      <C4DCardGroupItem
         cta-type="video"
         href="1_9h94wo6b"
         colorScheme={gridMode === 'border' ? 'light' : null}>
-        <DDSCardEyebrow>Topic</DDSCardEyebrow>
+        <C4DCardEyebrow>Topic</C4DCardEyebrow>
         {tagGroup ? tagGroupContent : ''}
-        <DDSCardCTAFooter cta-type="video" slot="footer" href="1_9h94wo6b" />
-      </DDSCardGroupItem>
+        <C4DCardFooter cta-type="video" slot="footer" href="0_ibuqxqbe" />
+      </C4DCardGroupItem>
     );
   }
   return (
-    <DDSCardGroupItem
+    <C4DCardGroupItem
       cta-type="local"
       href="https://example.com"
-      colorScheme={gridMode === 'border' ? 'light' : null}>
-      <DDSCardEyebrow>Label</DDSCardEyebrow>
-      <DDSCardHeading>
+      >
+      <C4DCardEyebrow>Label</C4DCardEyebrow>
+      <C4DCardHeading>
         The United Nations Environment Program works with IBM to reduce marine
         litter
-      </DDSCardHeading>
+      </C4DCardHeading>
       {tagGroup ? tagGroupContent : ''}
-      <DDSCardCTAFooter slot="footer" />
-    </DDSCardGroupItem>
+      <C4DCardFooter slot="footer" />
+    </C4DCardGroupItem>
   );
 };
 
@@ -249,65 +240,60 @@ export const Default = (args) => {
     tagGroup,
     cardsPerRow,
     gridMode,
-    offset,
     cta,
     addCta,
   } = args?.CardGroup ?? {};
 
   const allCards: object[] = [];
 
-  if (offset === '1') {
-    allCards.push(emptyCard);
-  }
-
   if (cardType === 'Card - default') {
     allCards.push(
-      longHeadingCardGroupItem(tagGroup, media, gridMode, cardType, addCta)
+      longHeadingCardGroupItem(tagGroup, media, cardType, addCta)
     );
     for (let i = 1; i < cards; i++) {
       allCards.push(
-        cardsDiffLengthPhrase(i, tagGroup, media, gridMode, cardType, addCta)
+        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta)
       );
     }
     if (cta) {
       allCards.push(
-        <DDSCardGroupItem
+        <C4DCardGroupItem
           cta-type="local"
           href="https://example.com"
           colorScheme="inverse">
-          <DDSCardHeading>Top level card link</DDSCardHeading>
-          <DDSCardCTAFooter
+          <C4DCardHeading>Top level card link</C4DCardHeading>
+          <C4DCardFooter
             slot="footer"
-            color-scheme="inverse"></DDSCardCTAFooter>
-        </DDSCardGroupItem>
+            color-scheme="inverse"></C4DCardFooter>
+        </C4DCardGroupItem>
       );
     }
   }
 
   if (cardType === 'Card - pictogram') {
     for (let i = 0; i < cards; i++) {
-      allCards.push(pictogramCard(gridMode));
+      allCards.push(pictogramCard());
     }
   }
 
   if (cardType === 'Card static') {
     allCards.push(
-      longHeadingCardGroupItem(tagGroup, media, gridMode, cardType, addCta)
+      longHeadingCardGroupItem(tagGroup, media, cardType, addCta)
     );
     for (let i = 1; i < cards; i++) {
       allCards.push(
-        cardsDiffLengthPhrase(i, tagGroup, media, gridMode, cardType, addCta)
+        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta)
       );
     }
     if (cta) {
       allCards.push(
-        <DDSCardGroupItem
+        <C4DCardGroupItem
           cta-type="local"
           href="https://example.com"
-          colorScheme="inverse">
-          <DDSCardHeading>Top level card link</DDSCardHeading>
-          <DDSCardCTAFooter slot="footer" colorScheme="inverse" />
-        </DDSCardGroupItem>
+          >
+          <C4DCardHeading>Top level card link</C4DCardHeading>
+          <C4DCardFooter slot="footer"/>
+        </C4DCardGroupItem>
       );
     }
   }
@@ -321,13 +307,13 @@ export const Default = (args) => {
   const colCount = cardsPerRow[cardsPerRow.length - 1];
 
   return (
-    <DDSCardGroup
+    <C4DCardGroup
       cardsPerRow={colCount}
       class={cardsPerRow}
-      gridMode={setGridMode[cardType] || gridMode}
+      gridMode={gridMode}
       pictograms={cardType === 'Card - pictogram'}>
       {allCards}
-    </DDSCardGroup>
+    </C4DCardGroup>
   );
 };
 
@@ -358,10 +344,8 @@ Default.story = {
           cardsCol['3 cards per row (default)']
         );
         const gridMode =
-          cardType === 'Card static' || cardType === 'Card link'
-            ? ''
-            : select('Grid mode:', gridModes, gridModes['Collapsed (1px)']);
-        const offset = select('Offset:', ['0', '1'], '0');
+            cardType === 'Card static' ? select('Grid mode:', staticGridModes, staticGridModes['Default (32px)']) 
+          : select('Grid mode:', gridModes, gridModes['Default (32px)']);
         const cta = media ? '' : boolean('Add CTA card:', false);
         return {
           cardType,
@@ -371,7 +355,6 @@ Default.story = {
           cards,
           cardsPerRow,
           gridMode,
-          offset,
           cta,
         };
       },
@@ -387,24 +370,24 @@ export const withCardInCard = (args) => {
   }
   return (
     <>
-      <DDSCardInCard
+      <C4DCardInCard
         href="https://example.com"
         grid-mode={gridMode || undefined}>
-        <DDSCardInCardImage
+        <C4DCardInCardImage
           slot="image"
           alt="Image alt text"
           defaultSrc={imgSm4x3}>
-          <DDSImageItem media="(min-width: 1312px)" srcset={imgXlg16x9} />
-          <DDSImageItem media="(min-width: 672px)" srcset={imgMd16x9} />
-          <DDSImageItem media="(min-width: 320px)" srcset={imgSm4x3} />
-        </DDSCardInCardImage>
-        <DDSCardEyebrow>Label</DDSCardEyebrow>
-        <DDSCardHeading>
+          <C4DImageItem media="(min-width: 1312px)" srcset={imgXlg16x9} />
+          <C4DImageItem media="(min-width: 672px)" srcset={imgMd16x9} />
+          <C4DImageItem media="(min-width: 320px)" srcset={imgSm4x3} />
+        </C4DCardInCardImage>
+        <C4DCardEyebrow>Label</C4DCardEyebrow>
+        <C4DCardHeading>
           Standard Bank Group prepares to embrace Africa’s AI opportunity
-        </DDSCardHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardInCard>
-      <DDSCardGroup gridMode={gridMode || undefined}>{allCards}</DDSCardGroup>
+        </C4DCardHeading>
+        <C4DCardFooter></C4DCardFooter>
+      </C4DCardInCard>
+      <C4DCardGroup gridMode={gridMode || undefined}>{allCards}</C4DCardGroup>
     </>
   );
 };
@@ -432,10 +415,10 @@ export default {
       return (
         <>
           <style type="text/css">{styles.cssText}</style>
-          <div className="bx--grid">
-            <div className="bx--row">
-              <div className="bx--col-lg-12 bx--no-gutter">
-                <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <div className="cds--col-lg-12 cds--no-gutter">
+                <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
               </div>
             </div>
           </div>
diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss b/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss
index 802f12648b4..95d3ef1cadb 100644
--- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss
+++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.scss
@@ -5,27 +5,26 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-card-group.dds-ce-demo-devenv--cards-in-row-2 {
-  @include carbon--breakpoint(lg) {
-    --dds--card-group--cards-in-row: 2 !important; /* stylelint-disable-line declaration-no-important */
+cds-card-group.cds-ce-demo-devenv--cards-in-row-2 {
+  @include breakpoint(lg) {
+    --cds--card-group--cards-in-row: 2 !important; /* stylelint-disable-line declaration-no-important */
   }
 }
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-card-group.dds-ce-demo-devenv--cards-in-row-3 {
-  @include carbon--breakpoint(lg) {
-    --dds--card-group--cards-in-row: 3 !important; /* stylelint-disable-line declaration-no-important */
+cds-card-group.cds-ce-demo-devenv--cards-in-row-3 {
+  @include breakpoint(lg) {
+    --cds--card-group--cards-in-row: 3 !important; /* stylelint-disable-line declaration-no-important */
   }
 }
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-card-group.dds-ce-demo-devenv--cards-in-row-4 {
-  @include carbon--breakpoint(lg) {
-    --dds--card-group--cards-in-row: 4 !important; /* stylelint-disable-line declaration-no-important */
+cds-card-group.cds-ce-demo-devenv--cards-in-row-4 {
+  @include breakpoint(lg) {
+    --cds--card-group--cards-in-row: 4 !important; /* stylelint-disable-line declaration-no-important */
   }
 }
diff --git a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
index e5760feb979..98fcbd99ee3 100644
--- a/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
+++ b/packages/web-components/src/components/card-group/__stories__/card-group.stories.ts
@@ -7,14 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
 import '../../card/index';
 import '../../card-in-card/index';
 import '../index';
 import '../../cta/video-cta-container';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { select, number, boolean } from '@storybook/addon-knobs';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 // eslint-disable-next-line sort-imports
 import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
 import imgXlg16x9 from '../../../../../storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
@@ -34,86 +33,70 @@ const phraseArray = [
   'Disputando lorem covallis',
 ];
 
-const cardsCol = {
-  '2 cards per row': 'dds-ce-demo-devenv--cards-in-row-2',
-  '3 cards per row (default)': 'dds-ce-demo-devenv--cards-in-row-3',
-  '4 cards per row': 'dds-ce-demo-devenv--cards-in-row-4',
-};
-
 const gridModes = {
-  [`Collapsed (1px)`]: GRID_MODE.COLLAPSED,
+  [`Condensed (1px)`]: GRID_MODE.CONDENSED,
   [`Narrow (16px)`]: GRID_MODE.NARROW,
-  [`Outlined cards (1px border)`]: GRID_MODE.BORDER,
+  [`Default (32px)`]: GRID_MODE.DEFAULT,
 };
 
-const setGridMode = {
-  'Card static': 'border',
-  'Card link': 'narrow',
+const staticGridModes = {
+  [`Narrow (16px)`]: GRID_MODE.NARROW,
+  [`Default (32px)`]: GRID_MODE.DEFAULT,
 };
 
 const tagGroupContent = html`
-  <dds-tag-group>
-    <bx-tag type="cool-gray"> Systems w/TPS </bx-tag>
-    <bx-tag type="cool-gray"> Virtual </bx-tag>
-  </dds-tag-group>
+  <div>
+    <cds-tag type="cool-gray"> Systems w/TPS </cds-tag>
+    <cds-tag type="cool-gray"> Virtual </cds-tag>
+  </div>
 `;
 
 const textCTAContent = html`
-  <dds-text-cta slot="footer" cta-type="local" href="https://example.com">
+  <c4d-text-cta slot="footer" cta-type="local" href="https://example.com">
     Learn more
-  </dds-text-cta>
+  </c4d-text-cta>
 `;
 
 const imageContent = html`
-  <dds-card-cta-image
+  <c4d-image
     slot="image"
     alt="Image Alt Text"
-    default-src="${imgXlg4x3}"></dds-card-cta-image>
+    default-src="${imgXlg4x3}"></c4d-image>
 `;
 
-const cardsDiffLengthPhrase = (
-  index,
-  tagGroup,
-  media,
-  gridMode,
-  cardType,
-  addCta
-) => {
+const cardsDiffLengthPhrase = (index, tagGroup, media, cardType, addCta) => {
   const defaultCardGroupItem = html`
-    <dds-card-group-item
+    <c4d-card-group-item
       cta-type=${cardType === 'Card static' ? '' : 'local'}
-      href=${cardType === 'Card static' ? '' : 'https://example.com'}
-      color-scheme=${cardType === 'Card static' || gridMode === 'border'
-        ? 'light'
-        : null}>
+      href=${cardType === 'Card static' ? '' : 'https://example.com'}>
       ${media ? imageContent : ''}
-      <dds-card-eyebrow>Topic</dds-card-eyebrow>
-      <dds-card-heading
+      <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+      <c4d-card-heading
         >${index < 5
           ? phraseArray[index]
-          : 'Lorem ipsum dolor sit amet'}</dds-card-heading
+          : 'Lorem ipsum dolor sit amet'}</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.'
       </p>
       ${tagGroup ? tagGroupContent : ''}
-      ${cardType === 'Card static' && addCta
-        ? textCTAContent
-        : html` <dds-card-cta-footer slot="footer"></dds-card-cta-footer> `}
-    </dds-card-group-item>
+      ${cardType === 'Card static'
+        ? addCta
+          ? textCTAContent
+          : ''
+        : html` <c4d-card-footer slot="footer"></c4d-card-footer> `}
+    </c4d-card-group-item>
   `;
 
   const videoCardGroupItem = (videoId = '1_9h94wo6b') => html`
-    <dds-card-group-item
-      cta-type="video"
-      href="${videoId}"
-      color-scheme=${gridMode === 'border' ? 'light' : null}>
-      <dds-card-eyebrow>Topic</dds-card-eyebrow>
+    <c4d-card-group-item cta-type="video" href="${videoId}">
+      <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+      <c4d-card-heading></c4d-card-heading>
       ${tagGroup ? tagGroupContent : ''}
-      <dds-card-cta-footer cta-type="video" slot="footer" href="1_9h94wo6b">
-      </dds-card-cta-footer>
-    </dds-card-group-item>
+      <c4d-card-footer cta-type="video" slot="footer" href="${videoId}">
+      </c4d-card-footer>
+    </c4d-card-group-item>
   `;
 
   const demoVideoIds = ['1_9h94wo6b', '0_ibuqxqbe', '1_6b6qjovy'];
@@ -124,25 +107,16 @@ const cardsDiffLengthPhrase = (
     : defaultCardGroupItem;
 };
 
-const longHeadingCardGroupItem = (
-  tagGroup,
-  media,
-  gridMode,
-  cardType,
-  addCta
-) => {
+const longHeadingCardGroupItem = (tagGroup, media, cardType, addCta) => {
   return html`
-    <dds-card-group-item
+    <c4d-card-group-item
       cta-type=${cardType === 'Card static' ? '' : 'local'}
-      href=${cardType === 'Card static' ? '' : 'https://example.com'}
-      color-scheme=${cardType === 'Card static' || gridMode === 'border'
-        ? 'light'
-        : null}>
+      href=${cardType === 'Card static' ? '' : 'https://example.com'}>
       ${media ? imageContent : ''}
-      <dds-card-eyebrow>Topic</dds-card-eyebrow>
-      <dds-card-heading
+      <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+      <c4d-card-heading
         >Nunc convallis lobortis Nunc convallis lobortis Nunc convallis
-        lobortis</dds-card-heading
+        lobortis</c4d-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
@@ -150,19 +124,18 @@ const longHeadingCardGroupItem = (
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
       ${tagGroup ? tagGroupContent : ''}
-      ${cardType === 'Card static' && addCta
-        ? textCTAContent
-        : html` <dds-card-cta-footer slot="footer"></dds-card-cta-footer> `}
-    </dds-card-group-item>
+      ${cardType === 'Card static'
+        ? addCta
+          ? textCTAContent
+          : ''
+        : html` <c4d-card-footer slot="footer"></c4d-card-footer> `}
+    </c4d-card-group-item>
   `;
 };
 
-const pictogramCard = (gridMode) => html`
-  <dds-card-group-item
-    href="https://example.com"
-    pictogram-placement="top"
-    color-scheme=${gridMode === 'border' ? 'light' : null}>
-    <dds-card-heading>Aerospace and defence</dds-card-heading>
+const pictogramCard = () => html`
+  <c4d-card-group-item href="https://example.com" pictogram-placement="bottom">
+    <c4d-card-heading>Aerospace and defence</c4d-card-heading>
     <p>
       Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
       aliquip ex ea commodo consequat. Ut enim ad minim veniam, quis nostrud
@@ -173,13 +146,13 @@ const pictogramCard = (gridMode) => html`
       focusable="false"
       preserveAspectRatio="xMidYMid meet"
       xmlns="http://www.w3.org/2000/svg"
-      data-autoid="dds--card__pictogram"
+      data-autoid="c4d--card__pictogram"
       aria-label="Pictogram description"
       width="48"
       height="48"
       viewBox="0 0 32 32"
       role="img"
-      class="bx--card__pictogram">
+      class="cds--card__pictogram">
       <path
         id="desktop_1_"
         d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
@@ -187,114 +160,78 @@ const pictogramCard = (gridMode) => html`
   0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
   18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
     </svg>
-  </dds-card-group-item>
+  </c4d-card-group-item>
 `;
 
 const cardLink = html`
-  <dds-card-group-card-link-item
+  <c4d-card-group-item
+    link
     cta-type="local"
     href="https://example.com"
     pattern-background>
-    <dds-card-link-heading>IBM Developer</dds-card-link-heading>
+    <c4d-card-heading>IBM Developer</c4d-card-heading>
     <p>Learn, code and connect with your community</p>
-    <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
-  </dds-card-group-card-link-item>
+    <c4d-card-footer slot="footer"> </c4d-card-footer>
+  </c4d-card>
 `;
 
-const emptyCard = html` <dds-card-group-item empty></dds-card-group-item> `;
-
-const cardInCardItems = (i, tagGroup, media, gridMode) => {
+const cardInCardItems = (i, tagGroup, media) => {
   if (media) {
     return i % 2 === 0
       ? html`
-          <dds-card-group-item
-            cta-type="local"
-            href="https://example.com"
-            color-scheme=${gridMode === 'border' ? 'light' : null}>
+          <c4d-card-group-item cta-type="local" href="https://example.com">
             ${imageContent}
-            <dds-card-eyebrow>Label</dds-card-eyebrow>
-            <dds-card-heading
+            <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+            <c4d-card-heading
               >The United Nations Environment Program works with IBM to reduce
-              marine litter</dds-card-heading
+              marine litter</c4d-card-heading
             >
             ${tagGroup ? tagGroupContent : ''}
-            <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
-          </dds-card-group-item>
+            <c4d-card-footer slot="footer"> </c4d-card-footer>
+          </c4d-card-group-item>
         `
       : html`
-          <dds-card-group-item
-            cta-type="video"
-            href="1_9h94wo6b"
-            color-scheme=${gridMode === 'border' ? 'light' : null}>
-            <dds-card-eyebrow>Topic</dds-card-eyebrow>
+          <c4d-card-group-item cta-type="video" href="0_ibuqxqbe">
+            <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
             ${tagGroup ? tagGroupContent : ''}
-            <dds-card-cta-footer
-              cta-type="video"
-              slot="footer"
-              href="1_9h94wo6b">
-            </dds-card-cta-footer>
-          </dds-card-group-item>
+            <c4d-card-footer cta-type="video" slot="footer" href="0_ibuqxqbe">
+            </c4d-card-footer>
+          </c4d-card-group-item>
         `;
   }
   return html`
-    <dds-card-group-item
-      cta-type="local"
-      href="https://example.com"
-      color-scheme=${gridMode === 'border' ? 'light' : null}>
-      <dds-card-eyebrow>Label</dds-card-eyebrow>
-      <dds-card-heading
+    <c4d-card-group-item cta-type="local" href="https://example.com">
+      <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+      <c4d-card-heading
         >The United Nations Environment Program works with IBM to reduce marine
-        litter</dds-card-heading
+        litter</c4d-card-heading
       >
       ${tagGroup ? tagGroupContent : ''}
-      <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
-    </dds-card-group-item>
+      <c4d-card-footer slot="footer"> </c4d-card-footer>
+    </c4d-card-group-item>
   `;
 };
 
 export const Default = (args) => {
-  const {
-    cards,
-    cardType,
-    media,
-    tagGroup,
-    cardsPerRow,
-    gridMode,
-    offset,
-    cta,
-    addCta,
-  } = args?.CardGroup ?? {};
-
-  const classes = classMap({
-    [cardsPerRow]: cardsPerRow,
-  });
+  const { cards, cardType, media, tagGroup, gridMode, cta, addCta } =
+    args?.CardGroup ?? {};
 
   const allCards: object[] = [];
 
-  if (offset === '1') {
-    allCards.push(emptyCard);
-  }
-
   if (cardType === 'Card - default') {
-    allCards.push(
-      longHeadingCardGroupItem(tagGroup, media, gridMode, cardType, addCta)
-    );
+    allCards.push(longHeadingCardGroupItem(tagGroup, media, cardType, addCta));
     for (let i = 1; i < cards; i++) {
       allCards.push(
-        cardsDiffLengthPhrase(i, tagGroup, media, gridMode, cardType, addCta)
+        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta)
       );
     }
     if (cta) {
       allCards.push(
         html`
-          <dds-card-group-item
-            cta-type="local"
-            href="https://example.com"
-            color-scheme="inverse">
-            <dds-card-heading>Top level card link</dds-card-heading>
-            <dds-card-cta-footer slot="footer" color-scheme="inverse">
-            </dds-card-cta-footer>
-          </dds-card-group-item>
+          <c4d-card-group-item cta-type="local" href="https://example.com">
+            <c4d-card-heading>Top level card link</c4d-card-heading>
+            <c4d-card-footer slot="footer"> </c4d-card-footer>
+          </c4d-card-group-item>
         `
       );
     }
@@ -302,30 +239,24 @@ export const Default = (args) => {
 
   if (cardType === 'Card - pictogram') {
     for (let i = 0; i < cards; i++) {
-      allCards.push(pictogramCard(gridMode));
+      allCards.push(pictogramCard());
     }
   }
 
   if (cardType === 'Card static') {
-    allCards.push(
-      longHeadingCardGroupItem(tagGroup, media, gridMode, cardType, addCta)
-    );
+    allCards.push(longHeadingCardGroupItem(tagGroup, media, cardType, addCta));
     for (let i = 1; i < cards; i++) {
       allCards.push(
-        cardsDiffLengthPhrase(i, tagGroup, media, gridMode, cardType, addCta)
+        cardsDiffLengthPhrase(i, tagGroup, media, cardType, addCta)
       );
     }
     if (cta) {
       allCards.push(
         html`
-          <dds-card-group-item
-            cta-type="local"
-            href="https://example.com"
-            color-scheme="inverse">
-            <dds-card-heading>Top level card link</dds-card-heading>
-            <dds-card-cta-footer slot="footer" color-scheme="inverse">
-            </dds-card-cta-footer>
-          </dds-card-group-item>
+          <c4d-card-group-item cta-type="local" href="https://example.com">
+            <c4d-card-heading>Top level card link</c4d-card-heading>
+            <c4d-card-footer slot="footer"> </c4d-card-footer>
+          </c4d-card-group-item>
         `
       );
     }
@@ -337,16 +268,12 @@ export const Default = (args) => {
     }
   }
 
-  const colCount = cardsPerRow[cardsPerRow.length - 1];
-
   return html`
-    <dds-card-group
-      cards-per-row="${colCount}"
-      class="${classes}"
-      grid-mode=${setGridMode[cardType] || gridMode}
+    <c4d-card-group
+      grid-mode=${gridMode}
       ?pictograms=${cardType === 'Card - pictogram'}>
       ${allCards}
-    </dds-card-group>
+    </c4d-card-group>
   `;
 };
 
@@ -354,36 +281,36 @@ export const withCardInCard = (args) => {
   const { cards, tagGroup, media, gridMode } = args?.CardGroup ?? {};
   const allCards: object[] = [];
   for (let i = 0; i < cards; i++) {
-    allCards.push(cardInCardItems(i, tagGroup, media, gridMode));
+    allCards.push(cardInCardItems(i, tagGroup, media));
   }
   return html`
-    <dds-video-cta-container>
-      <dds-card-in-card
+    <c4d-video-cta-container>
+      <c4d-card-in-card
         href="https://example.com"
         cta-type="local"
-        grid-mode="${ifNonNull(gridMode)}">
-        <dds-card-in-card-image
+        grid-mode="${ifDefined(gridMode)}">
+        <c4d-card-in-card-image
           slot="image"
           alt="Image alt text"
           default-src="${imgSm4x3}">
-          <dds-image-item media="(min-width: 1312px)" srcset="${imgXlg16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 672px)" srcset="${imgMd16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)" srcset="${imgSm4x3}">
-          </dds-image-item>
-        </dds-card-in-card-image>
-        <dds-card-eyebrow>Label</dds-card-eyebrow>
-        <dds-card-heading
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)" srcset="${imgSm4x3}">
+          </c4d-image-item>
+        </c4d-card-in-card-image>
+        <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+        <c4d-card-heading
           >Standard Bank Group prepares to embrace Africa’s AI
-          opportunity</dds-card-heading
+          opportunity</c4d-card-heading
         >
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-in-card>
-      <dds-card-group grid-mode="${ifNonNull(gridMode)}">
+        <c4d-card-footer></c4d-card-footer>
+      </c4d-card-in-card>
+      <c4d-card-group grid-mode="${ifDefined(gridMode)}">
         ${allCards}
-      </dds-card-group>
-    </dds-video-cta-container>
+      </c4d-card-group>
+    </c4d-video-cta-container>
   `;
 };
 
@@ -420,10 +347,10 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">
-            <dds-video-cta-container> ${story()} </dds-video-cta-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">
+            <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
           </div>
         </div>
       </div>
@@ -450,16 +377,14 @@ export default {
         const addCta =
           cardType === 'Card static' ? boolean('Add CTA Links:', false) : '';
         const cards = number('Number of cards:', 5, { min: 2, max: 6 });
-        const cardsPerRow = select(
-          'Cards per row:',
-          cardsCol,
-          cardsCol['3 cards per row (default)']
-        );
         const gridMode =
-          cardType === 'Card static' || cardType === 'Card link'
-            ? ''
-            : select('Grid mode:', gridModes, gridModes['Collapsed (1px)']);
-        const offset = select('Offset:', ['0', '1'], '0');
+          cardType === 'Card static'
+            ? select(
+                'Grid mode:',
+                staticGridModes,
+                staticGridModes['Default (32px)']
+              )
+            : select('Grid mode:', gridModes, gridModes['Default (32px)']);
         const cta = media ? '' : boolean('Add CTA card:', false);
         return {
           cardType,
@@ -467,9 +392,7 @@ export default {
           tagGroup,
           addCta,
           cards,
-          cardsPerRow,
           gridMode,
-          offset,
           cta,
         };
       },
@@ -482,9 +405,7 @@ export default {
           tagGroup: false,
           addCta: false,
           cards: 5,
-          cardsPerRow: 'dds-ce-demo-devenv--cards-in-row-3',
           gridMode: 'collapsed',
-          offset: 0,
           cta: false,
         },
       },
diff --git a/packages/web-components/src/components/card-group/card-group-card-link-item.ts b/packages/web-components/src/components/card-group/card-group-card-link-item.ts
index 0583ac6e0be..8fab0c4fc17 100644
--- a/packages/web-components/src/components/card-group/card-group-card-link-item.ts
+++ b/packages/web-components/src/components/card-group/card-group-card-link-item.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSCardLinkCTA from '../cta/card-link-cta';
+import C4DCardLinkCTA from '../cta/card-link-cta';
 import styles from './card-group.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card Group Card Link item.
  *
- * @element dds-card-group-card-link-item
+ * @element c4d-card-group-card-link-item
  */
-@customElement(`${ddsPrefix}-card-group-card-link-item`)
-class DDSCardGroupCardLinkItem extends DDSCardLinkCTA {
+@customElement(`${c4dPrefix}-card-group-card-link-item`)
+class C4DCardGroupCardLinkItem extends C4DCardLinkCTA {
   /**
    * `true` if the card group is using border.
    */
@@ -41,18 +41,22 @@ class DDSCardGroupCardLinkItem extends DDSCardLinkCTA {
   patternBackground = false;
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-group-card-link-item`;
+    return `${c4dPrefix}--card-group-card-link-item`;
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-card-cta-footer`;
+    return `${c4dPrefix}-card-cta-footer`;
   }
 
   static styles = styles;
 }
 
+console.warn(
+  'The card-group-card-link-item component has been deprecated in favor of default card or with content-item. ' +
+    'See card-group documentation for more information.'
+);
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardGroupCardLinkItem;
+export default C4DCardGroupCardLinkItem;
diff --git a/packages/web-components/src/components/card-group/card-group-item.ts b/packages/web-components/src/components/card-group/card-group-item.ts
index 8e77a1690de..26e462adbe1 100644
--- a/packages/web-components/src/components/card-group/card-group-item.ts
+++ b/packages/web-components/src/components/card-group/card-group-item.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSCardCTA from '../cta/card-cta';
+import C4DCard from '../card/card';
 import styles from './card-group.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card Group item.
  *
- * @element dds-card-group-item
+ * @element c4d-card-group-item
  */
-@customElement(`${ddsPrefix}-card-group-item`)
-class DDSCardGroupItem extends DDSCardCTA {
+@customElement(`${c4dPrefix}-card-group-item`)
+class C4DCardGroupItem extends C4DCard {
   /**
    * `true` if the card group is using border.
    */
@@ -35,18 +35,28 @@ class DDSCardGroupItem extends DDSCardCTA {
   empty = false;
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-group-item`;
+    return `${c4dPrefix}--card-group-item`;
+  }
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('ctaType')) {
+      this.shadowRoot
+        ?.querySelector('c4d-image')
+        ?.setAttribute('card-group-item', '');
+    }
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-card-cta-footer`;
+    return `${c4dPrefix}-card-footer`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardGroupItem;
+export default C4DCardGroupItem;
diff --git a/packages/web-components/src/components/card-group/card-group.scss b/packages/web-components/src/components/card-group/card-group.scss
index a4a757889a4..4dd5f380cfe 100644
--- a/packages/web-components/src/components/card-group/card-group.scss
+++ b/packages/web-components/src/components/card-group/card-group.scss
@@ -1,48 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 '../card/card';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
-@import '@carbon/ibmdotcom-styles/scss/components/card-group/card-group';
-
-:host(#{$dds-prefix}-card-group) {
-  background: none;
-
-  ::slotted(#{$dds-prefix}-card-group-item) {
-    background-color: $decorative-01;
-  }
-
-  ::slotted(#{$dds-prefix}-card-group-card-link-item) {
-    @include carbon--breakpoint('md') {
-      padding-right: $carbon--spacing-05;
-    }
-  }
-
-  ::slotted(#{$dds-prefix}-card-group-item[empty]),
-  ::slotted(#{$dds-prefix}-card-group-card-link-item[empty]) {
-    background-color: transparent;
-    outline: none;
-  }
-}
-
-:host(#{$dds-prefix}-card-group)[grid-mode='border'] {
-  background: var(--#{$dds-prefix}--card-group-gradient, $decorative-01);
-
-  /* stylelint-disable-next-line selector-type-no-unknown */
-  #{$dds-prefix}-card-group-item[empty],
-  #{$dds-prefix}-card-group-card-link-item[empty] {
-    outline: none;
-  }
-
-  ::slotted(#{$dds-prefix}-card-group-item),
-  ::slotted(#{$dds-prefix}-card-group-card-link-item) {
-    background-color: transparent;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/card-group' as *;
diff --git a/packages/web-components/src/components/card-group/card-group.ts b/packages/web-components/src/components/card-group/card-group.ts
index 384cf42f17b..fb659a5b5be 100644
--- a/packages/web-components/src/components/card-group/card-group.ts
+++ b/packages/web-components/src/components/card-group/card-group.ts
@@ -7,11 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, state, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { baseFontSize, breakpoints } from '@carbon/layout';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';
 import { GRID_MODE } from './defs';
 import styles from './card-group.scss';
@@ -20,11 +18,7 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { GRID_MODE };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-const gridLgBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
-const gridMdBreakpoint = parseFloat(breakpoints.md.width) * baseFontSize;
+const { stablePrefix: c4dPrefix } = settings;
 
 // tag constants used for same height calculations
 const headingBottomMargin = 64;
@@ -32,10 +26,10 @@ const headingBottomMargin = 64;
 /**
  * Card Group.
  *
- * @element dds-card-group
+ * @element c4d-card-group
  */
-@customElement(`${ddsPrefix}-card-group`)
-class DDSCardGroup extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-card-group`)
+class C4DCardGroup extends StableSelectorMixin(LitElement) {
   /**
    * Array to hold the card-heading elements within child items.
    */
@@ -100,43 +94,45 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
       .assignedNodes()
       .filter((elem) =>
         (elem as HTMLElement).matches?.(
-          (this.constructor as typeof DDSCardGroup).selectorItem
+          (this.constructor as typeof C4DCardGroup).selectorItem
         )
       );
 
     // retrieve item heading, eyebrows, and footers to set same height
     if (this._childItems) {
       this._childItems.forEach((e) => {
+        if (!e.hasAttribute('href') && this.gridMode === GRID_MODE.CONDENSED) {
+          this.gridMode = GRID_MODE.DEFAULT;
+        }
         this._childItemEyebrows.push(
           (e as HTMLElement).querySelector(
-            (this.constructor as typeof DDSCardGroup).selectorItemEyebrow
+            (this.constructor as typeof C4DCardGroup).selectorItemEyebrow
           )
         );
         this._childItemParagraphs.push(
           (e as HTMLElement).querySelector(
-            (this.constructor as typeof DDSCardGroup).selectorItemParagraph
+            (this.constructor as typeof C4DCardGroup).selectorItemParagraph
           )
         );
         this._childItemTagGroup.push(
           (e as HTMLElement).querySelector(
-            (this.constructor as typeof DDSCardGroup).selectorItemTagGroup
+            (this.constructor as typeof C4DCardGroup).selectorItemTagGroup
           )
         );
         this._childItemHeadings.push(
           (e as HTMLElement).querySelector(
-            (this.constructor as typeof DDSCardGroup).selectorItemHeading
+            (this.constructor as typeof C4DCardGroup).selectorItemHeading
           )
         );
         this._childItemFooters.push(
           (e as HTMLElement).querySelector(
-            (this.constructor as typeof DDSCardGroup).selectorItemFooter
+            (this.constructor as typeof C4DCardGroup).selectorItemFooter
           )
         );
-        e.toggleAttribute('border', this.gridMode === 'border');
       });
 
       const { customPropertyCardsPerRow } = this
-        .constructor as typeof DDSCardGroup;
+        .constructor as typeof C4DCardGroup;
       this.style.setProperty(
         customPropertyCardsPerRow,
         String(this.cardsPerRow)
@@ -152,30 +148,11 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
    * The observer for the resize of the viewport, calls sameHeight utility function
    */
   private _resizeHandler = () => {
-    window.requestAnimationFrame(() => {
-      const documentWidth = this.ownerDocument!.documentElement.clientWidth;
-      let columnCount;
-      switch (true) {
-        case documentWidth < gridMdBreakpoint:
-          columnCount = 1;
-          break;
-        case documentWidth < gridLgBreakpoint:
-          columnCount = 2;
-          break;
-        default:
-          columnCount = this.cardsPerRow;
-      }
-      if (!this.pictograms) {
+    if (!this.pictograms) {
+      window.requestAnimationFrame(() => {
         this._setSameHeight();
-      }
-      if (this.gridMode !== GRID_MODE.NARROW) {
-        this._fillLastRowWithEmptyCards(columnCount);
-        this._borderAdjustments(columnCount);
-      } else {
-        this._removeEmptyCards();
-        this._resetBorders();
-      }
-    });
+      });
+    }
   };
 
   private _setSameHeight = () => {
@@ -214,8 +191,9 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
       // add tag group height to heading to the cards lacking tag group
       if (
         e &&
+        !e.parentElement.hasAttribute('link') &&
         !e.nextElementSibling?.matches(
-          (this.constructor as typeof DDSCardGroup).selectorItemTagGroup
+          (this.constructor as typeof C4DCardGroup).selectorItemTagGroup
         )
       ) {
         e.style.marginBottom = `${tagGroupHeight + headingBottomMargin}px`;
@@ -223,103 +201,6 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
     });
   };
 
-  private _borderAdjustments = (columnCount) => {
-    const isEmpty = (element) => element.hasAttribute('empty');
-    const inFirstColumn = (index) => (index + 1) % columnCount === 1;
-    const inLastColumn = (index) => (index + 1) % columnCount === 0;
-    const inFirstRow = (index) => index < columnCount;
-    const inLastRow = (index) =>
-      Math.floor(index / columnCount) ===
-      Math.floor((this._childItems.length - 1) / columnCount);
-
-    this._childItems.forEach((e, index) => {
-      const { gridMode } = this;
-      if (gridMode === GRID_MODE.COLLAPSED) {
-        e.toggleAttribute('border', false);
-        if (isEmpty(e)) {
-          e.style.paddingBottom = '0';
-          e.style.paddingRight = '0';
-        } else {
-          if (inFirstColumn(index)) {
-            e.style.paddingLeft = '0';
-          }
-          if (inLastColumn(index)) {
-            e.style.paddingRight = '0';
-            e.style.borderRight = `1px solid var(--cds-ui-background)`;
-          } else {
-            e.style.paddingRight = '1px';
-            e.style.borderRight = 'none';
-          }
-          if (inFirstRow(index)) {
-            e.style.paddingTop = '0';
-          }
-          if (inLastRow(index)) {
-            e.style.paddingBottom = '0';
-          } else {
-            e.style.paddingBottom = '1px';
-          }
-        }
-      }
-      if (gridMode === GRID_MODE.BORDER) {
-        e.toggleAttribute('border', true);
-        if (isEmpty(e)) {
-          e.style.paddingBottom = '1px';
-          e.style.paddingRight = '1px';
-        } else {
-          e.style.paddingTop = '0';
-          if (inFirstRow(index)) {
-            e.style.paddingTop = '1px';
-          }
-          if (inLastRow(index)) {
-            e.style.paddingBottom = '1px';
-          }
-          if (inFirstColumn(index)) {
-            e.style.paddingLeft = '1px';
-          } else {
-            e.style.paddingLeft = '0';
-          }
-          if (inLastColumn(index)) {
-            e.style.paddingRight = '1px';
-          }
-        }
-        // if one column and first item is empty then set top border for second item
-        if (columnCount === 1 && isEmpty(this._childItems[0]) && index === 1) {
-          e.style.paddingTop = '1px';
-        }
-      }
-    });
-  };
-
-  private _resetBorders = () => {
-    this._childItems.forEach((elem) => {
-      elem.toggleAttribute('border', false);
-      elem.style.paddingTop = '';
-      elem.style.paddingRight = '';
-      elem.style.paddingBottom = '';
-      elem.style.paddingLeft = '';
-    });
-  };
-
-  private _fillLastRowWithEmptyCards = (columnCount) => {
-    // remove all empty cards
-    this._removeEmptyCards();
-
-    // add empty cards
-    const emptyNeeded =
-      this.childElementCount % columnCount > 0 && columnCount > 1
-        ? columnCount - (this.childElementCount % columnCount)
-        : 0;
-    for (let i = 0; i < emptyNeeded; i++) {
-      const card = document.createElement('dds-card-group-item');
-      card.setAttribute('empty', '');
-      this.shadowRoot?.appendChild(card);
-    }
-  };
-
-  private _removeEmptyCards = () => {
-    this.shadowRoot?.querySelectorAll('[empty]').forEach((e) => e.remove());
-  };
-
   /**
    * The number of columns per row. Min 2, max 4, default 3. Applies to >=`lg` breakpoint only.
    */
@@ -334,7 +215,7 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
 
   /**
    * Number of cards per column.
-   * If `--dds--card-group--cards-in-row` CSS custom property is set to `<dds-card-group>`.
+   * If `--c4d--card-group--cards-in-row` CSS custom property is set to `<c4d-card-group>`.
    */
   @property({ type: Number, attribute: 'cards-per-row' })
   get cardsPerRow() {
@@ -350,10 +231,10 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
 
   /**
    * The Grid Mode for the component layout.
-   * Collapsed/1px (default) | Narrow/16px).
+   * Condensed (1px) | Narrow (16px) | Default(32px).
    */
   @property({ attribute: 'grid-mode', reflect: true })
-  gridMode = GRID_MODE.COLLAPSED;
+  gridMode = GRID_MODE.DEFAULT;
 
   /**
    * If using cards with pictogram.
@@ -374,6 +255,14 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
 
   firstUpdated() {
     super.connectedCallback();
+
+    if (
+      this.previousElementSibling?.matches?.(
+        (this.constructor as typeof C4DCardGroup).selectorCardInCard
+      )
+    ) {
+      this.setAttribute('with-card-in-card', '');
+    }
     this._cleanAndCreateObserverResize({ create: true });
   }
 
@@ -382,50 +271,46 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
   }
 
   render() {
-    const slotClasses = classMap({
-      [`${prefix}--card-group--narrow`]: this.gridMode === GRID_MODE.NARROW,
-      [`${prefix}--card-group--collapsed`]:
-        this.gridMode === GRID_MODE.COLLAPSED,
-      [`${prefix}--card-group--border`]: this.gridMode === GRID_MODE.BORDER,
-    });
-
-    return html`
-      <slot
-        @slotchange="${this._handleSlotChange}"
-        class="${slotClasses}"></slot>
-    `;
+    return html` <slot @slotchange="${this._handleSlotChange}"></slot> `;
   }
 
   /**
    * The CSS custom property name for the live button group item cout.
    */
   static get customPropertyCardsPerRow() {
-    return `--${ddsPrefix}--card-group--cards-in-row`;
+    return `--${c4dPrefix}--card-group--cards-in-row`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-group`;
+    return `${c4dPrefix}--card-group`;
+  }
+
+  /**
+   * A selector that will return the card-in-card selector
+   */
+  static get selectorCardInCard() {
+    return `${c4dPrefix}-card-in-card`;
   }
 
   /**
    * A selector that will return the card item.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-card-group-item`;
+    return `${c4dPrefix}-card-group-item`;
   }
 
   /**
    * A selector that will return the card item's eyebrow
    */
   static get selectorItemEyebrow() {
-    return `${ddsPrefix}-card-eyebrow`;
+    return `${c4dPrefix}-card-eyebrow`;
   }
 
   /**
    * A selector that will return the card item's tag group
    */
   static get selectorItemTagGroup() {
-    return `${ddsPrefix}-tag-group`;
+    return `div`;
   }
 
   /**
@@ -439,18 +324,18 @@ class DDSCardGroup extends StableSelectorMixin(LitElement) {
    * A selector that will return the card item's heading
    */
   static get selectorItemHeading() {
-    return `${ddsPrefix}-card-heading`;
+    return `${c4dPrefix}-card-heading`;
   }
 
   /**
    * A selector that will return the card item's footer
    */
   static get selectorItemFooter() {
-    return `${ddsPrefix}-card-cta-footer`;
+    return `${c4dPrefix}-card-cta-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardGroup;
+export default C4DCardGroup;
diff --git a/packages/web-components/src/components/card-group/defs.ts b/packages/web-components/src/components/card-group/defs.ts
index 126fb37f95b..6711002bf32 100644
--- a/packages/web-components/src/components/card-group/defs.ts
+++ b/packages/web-components/src/components/card-group/defs.ts
@@ -12,17 +12,17 @@
  */
 export enum GRID_MODE {
   /**
-   * Narrow 16px gutter
+   * Default grid with 32px gutter
    */
-  NARROW = 'narrow',
+  DEFAULT = 'default',
 
   /**
-   * Collapsed 1px gutter
+   * Narrow 16px gutter
    */
-  COLLAPSED = 'collapsed',
+  NARROW = 'narrow',
 
   /**
-   * 1px optional border
+   * Condensed 1px border
    */
-  BORDER = 'border',
+  CONDENSED = 'condensed',
 }
diff --git a/packages/web-components/src/components/card-group/index.ts b/packages/web-components/src/components/card-group/index.ts
index 5fa6feb78fe..fe32d1fec61 100644
--- a/packages/web-components/src/components/card-group/index.ts
+++ b/packages/web-components/src/components/card-group/index.ts
@@ -13,4 +13,3 @@ import './card-group-card-link-item';
 import '../cta/card-cta-footer';
 import '../card/index';
 import '../card-link/card-link-heading';
-import '../card-section-images/card-section-images';
diff --git a/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx b/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx
index 4cd3e459bb9..d9099bbf100 100644
--- a/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-in-card/__stories__/README.stories.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
@@ -26,22 +31,30 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
 ### HTML
 
 ```html
-<dds-card-in-card href="https://example.com">
-  <dds-card-in-card-image
+<cds-card-in-card href="https://example.com">
+  <cds-card-in-card-image
     slot="image"
     alt="Image alt text"
-    default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616"
+    default-src="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
+    <cds-image-item
+      media="(min-width: 1312px)"
+      srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
+      media="(min-width: 672px)"
+      srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
+      media="(min-width: 320px)"
+      srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+  </cds-card-in-card-image>
+  <cds-card-eyebrow>Label</cds-card-eyebrow>
+  <cds-card-heading
+    >Standard Bank Group prepares to embrace Africa’s AI
+    opportunity</cds-card-heading
   >
-    <dds-image-item media="(min-width: 1312px)" srcset="https://fpoimg.com/1312x738?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 672px)" srcset="https://fpoimg.com/960x540?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="https://fpoimg.com/480x360?text=4:3&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-  </dds-card-in-card-image>
-  <dds-card-eyebrow>Label</dds-card-eyebrow>
-  <dds-card-heading>Standard Bank Group prepares to embrace Africa’s AI opportunity</dds-card-heading>
-  <dds-card-cta-footer>
+  <cds-card-cta-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -51,38 +64,48 @@ import '@carbon/ibmdotcom-web-components/es/components/card-in-card/index.js';
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-card-cta-footer>
-</dds-card-in-card>
+  </cds-card-cta-footer>
+</cds-card-in-card>
 ```
 
-To render the video variation, make sure to wrap `card-in-card` with `video-cta-container`. However, if parent component (ie. `Card group`)
-already is wrapped in `video-cta-container`, there is no need to wrap the `card-in-card`.
+To render the video variation, make sure to wrap `card-in-card` with
+`video-cta-container`. However, if parent component (ie. `Card group`) already
+is wrapped in `video-cta-container`, there is no need to wrap the
+`card-in-card`.
 
-NOTE: The default video title can be overwritten by passing in the `video-name` attribute to `card-in-card`.
+NOTE: The default video title can be overwritten by passing in the `video-name`
+attribute to `card-in-card`.
 
 ```html
-<dds-video-cta-container>
-  <dds-card-in-card video-name="custom card title" href="1_9h94wo6b" cta-type="video">
-    <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
-    <dds-card-cta-footer cta-type="video" href="1_9h94wo6b"></dds-card-cta-footer>
-  </dds-card-in-card>
-</dds-video-cta-container>
+<cds-video-cta-container>
+  <cds-card-in-card
+    video-name="custom card title"
+    href="0_ibuqxqbe"
+    cta-type="video">
+    <cds-card-eyebrow>${eyebrow}</cds-card-eyebrow>
+    <cds-card-cta-footer
+      cta-type="video"
+      href="0_ibuqxqbe"></cds-card-cta-footer>
+  </cds-card-in-card>
+</cds-video-cta-container>
 ```
 
 ## Props
 
-<Props of="dds-card-in-card" />
+<Props of="cds-card-in-card" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<dds-card-in-card>`    | `data-autoid="dds--card-in-card"` | Component   |
+| `<cds-card-in-card>`    | `data-autoid="cds--card-in-card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx
index 8846e249228..cec529cb86c 100644
--- a/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-in-card/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
 
@@ -18,50 +23,64 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 
 function App() {
   return (
-    <DDSCardInCard href="https://example.com">
-      <DDSCardInCardImage slot="image" alt="Image alt text" default-src="https://picsum.photos/id/1076/480/360">
-        <DDSImageItem media="(min-width: 1312px)" srcset="https://picsum.photos/id/1076/1312/738"></DDSImageItem>
-        <DDSImageItem media="(min-width: 672px)" srcset="https://picsum.photos/id/1076/960/540"></DDSImageItem>
-        <DDSImageItem media="(min-width: 320px)" srcset="https://picsum.photos/id/1076/480/360"></DDSImageItem>
-      </DDSCardInCardImage>
-      <DDSCardEyebrow>Label</DDSCardEyebrow>
-      <DDSCardHeading>Standard Bank Group prepares to embrace Africa’s AI opportunity</DDSCardHeading>
-      <DDSCardCTAFooter>
+    <C4DCardInCard href="https://example.com">
+      <C4DCardInCardImage
+        slot="image"
+        alt="Image alt text"
+        default-src="https://picsum.photos/id/1076/480/360">
+        <C4DImageItem
+          media="(min-width: 1312px)"
+          srcset="https://picsum.photos/id/1076/1312/738"></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 672px)"
+          srcset="https://picsum.photos/id/1076/960/540"></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 320px)"
+          srcset="https://picsum.photos/id/1076/480/360"></C4DImageItem>
+      </C4DCardInCardImage>
+      <C4DCardEyebrow>Label</C4DCardEyebrow>
+      <C4DCardHeading>
+        Standard Bank Group prepares to embrace Africa’s AI opportunity
+      </C4DCardHeading>
+      <C4DCardCTAFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardInCard>
+      </C4DCardCTAFooter>
+    </C4DCardInCard>
   );
 }
 ```
 
-To render the video variation, make sure to wrap `DDSCardInCard` with `DDSVideoCTAContainer`. However, if parent component (ie. `Card group`)
-already is wrapped in `DDSVideoCTAContainer`, there is no need to wrap the `DDSCardInCard`.
+To render the video variation, make sure to wrap `C4DCardInCard` with
+`C4DVideoCTAContainer`. However, if parent component (ie. `Card group`) already
+is wrapped in `C4DVideoCTAContainer`, there is no need to wrap the
+`C4DCardInCard`.
 
-NOTE: The default video title can be overwritten by passing in the `video-name` attribute to `DDSCardInCard`.
+NOTE: The default video title can be overwritten by passing in the `video-name`
+attribute to `C4DCardInCard`.
 
 ```javascript
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-import DDSCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 
 function App() {
   return (
-    <DDSVideoCTAContainer>
-      <DDSCardInCard href="1_9h94wo6b" cta-type="video">
-        <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-        <DDSCardCTAFooter cta-type="video" href="1_9h94wo6b"></DDSCardCTAFooter>
-      </DDSCardInCard>
-    </DDSVideoCTAContainer>
+    <C4DVideoCTAContainer>
+      <C4DCardInCard href="0_ibuqxqbe" cta-type="video">
+        <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+        <C4DCardCTAFooter cta-type="video" href="0_ibuqxqbe"></C4DCardCTAFooter>
+      </C4DCardInCard>
+    </C4DVideoCTAContainer>
   );
 }
 ```
@@ -72,8 +91,10 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<dds-card-in-card>`    | `data-autoid="dds-card-in-card"` | Component   |
+| `<cds-card-in-card>`    | `data-autoid="cds-card-in-card"` | Component   |
diff --git a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.react.tsx b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.react.tsx
index 2147c55893c..eb913c1d044 100644
--- a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.react.tsx
+++ b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.react.tsx
@@ -9,56 +9,66 @@
 
 import React from 'react';
 import { boolean } from '@storybook/addon-knobs';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 // @ts-ignore
-import DDSCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
+import C4DCardInCard from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card';
 // @ts-ignore
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
 // @ts-ignore
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 // @ts-ignore
-import DDSCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
+import C4DCardInCardImage from '@carbon/ibmdotcom-web-components/es/components-react/card-in-card/card-in-card-image';
 // @ts-ignore
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 // @ts-ignore
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import imgXlg16x9 from '../../../../../storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/960/fpo--16x9--960x540--005.jpg';
 import imgSm4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
 import readme from './README.stories.react.mdx';
 
-export const Default = args => {
-  const { video, eyebrow, heading, defaultSrc, alt, href } = args?.CardInCard ?? {};
+export const Default = (args) => {
+  const { video, eyebrow, heading, defaultSrc, alt, href } =
+    args?.CardInCard ?? {};
 
   if (video) {
+    const card = document.querySelector('c4d-card') as any;
+    const videoCopy = card?.videoTitle;
     return (
-      <DDSVideoCTAContainer>
-        <DDSCardInCard href="1_9h94wo6b" cta-type="video">
-          <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-          <DDSCardCTAFooter cta-type="video" href="1_9h94wo6b"></DDSCardCTAFooter>
-        </DDSCardInCard>
-      </DDSVideoCTAContainer>
+      <C4DVideoCTAContainer>
+        <C4DCardInCard href="0_ibuqxqbe" cta-type="video">
+          <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+          <C4DCardHeading>{videoCopy ?? heading}</C4DCardHeading>
+          <C4DCardCTAFooter
+            cta-type="video"
+            href="0_ibuqxqbe"></C4DCardCTAFooter>
+        </C4DCardInCard>
+      </C4DVideoCTAContainer>
     );
   }
 
   return (
-    <DDSCardInCard href={href}>
-      <DDSCardInCardImage slot="image" alt={alt} default-src={defaultSrc}>
-        <DDSImageItem media="(min-width: 1312px)" srcset={imgXlg16x9}></DDSImageItem>
-        <DDSImageItem media="(min-width: 672px)" srcset={imgMd16x9}></DDSImageItem>
-        <DDSImageItem media="(min-width: 320px)" srcset={imgSm4x3}></DDSImageItem>
-      </DDSCardInCardImage>
-      <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-      <DDSCardHeading>{heading}</DDSCardHeading>
-      <DDSCardCTAFooter>
-        <ArrowRight20 slot="icon" />
-      </DDSCardCTAFooter>
-    </DDSCardInCard>
+    <C4DCardInCard href={href}>
+      <C4DCardInCardImage slot="image" alt={alt} default-src={defaultSrc} cta-type="local">
+        <C4DImageItem
+          media="(min-width: 1312px)"
+          srcset={imgXlg16x9}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 672px)"
+          srcset={imgMd16x9}></C4DImageItem>
+        <C4DImageItem
+          media="(min-width: 320px)"
+          srcset={imgSm4x3}></C4DImageItem>
+      </C4DCardInCardImage>
+      <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+      <C4DCardHeading>{heading}</C4DCardHeading>
+      <C4DCardCTAFooter>
+      </C4DCardCTAFooter>
+    </C4DCardInCard>
   );
 };
 
@@ -67,12 +77,21 @@ Default.story = {
     knobs: {
       CardInCard: () => {
         const video = boolean('video', false);
-        const alt = video ? undefined : textNullable('Image alt text (alt):', 'Image alt text');
-        const defaultSrc = video ? undefined : textNullable('Image src (defaultSrc):', imgSm4x3);
+        const alt = video
+          ? undefined
+          : textNullable('Image alt text (alt):', 'Image alt text');
+        const defaultSrc = video
+          ? undefined
+          : textNullable('Image src (defaultSrc):', imgSm4x3);
         const heading = video
           ? undefined
-          : textNullable('Card Heading (heading):', 'Standard Bank Group prepares to embrace Africa’s AI opportunity');
-        const href = video ? undefined : textNullable('Card Href (href):', 'https://example.com');
+          : textNullable(
+              'Card Heading (heading):',
+              'Standard Bank Group prepares to embrace Africa’s AI opportunity'
+            );
+        const href = video
+          ? undefined
+          : textNullable('Card Href (href):', 'https://example.com');
         return {
           video,
           alt,
@@ -89,10 +108,10 @@ Default.story = {
 export default {
   title: 'Components/Card in card',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-12 bx--no-gutter">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-12 cds--no-gutter">{story()}</div>
         </div>
       </div>
     ),
diff --git a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts
index 6c8d9590b31..f06075f5a49 100644
--- a/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts
+++ b/packages/web-components/src/components/card-in-card/__stories__/card-in-card.stories.ts
@@ -12,9 +12,8 @@ import '../../image/image';
 import '../index';
 import '../../cta/card-cta-footer';
 import '../../cta/video-cta-container';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { boolean } from '@storybook/addon-knobs';
 
 import imgXlg16x9 from '../../../../../storybook-images/assets/1312/fpo--16x9--1312x738--005.jpg';
@@ -26,38 +25,38 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
 
 export const Default = (args) => {
   const { video, eyebrow, heading, defaultSrc, alt, href } =
-    args?.['dds-card-in-card'] ?? {};
+    args?.['c4d-card-in-card'] ?? {};
   if (video) {
+    const card = document.querySelector('c4d-card') as any;
+    const videoCopy = card?.videoTitle;
+
     return html`
-      <dds-video-cta-container>
-        <dds-card-in-card href="1_9h94wo6b" cta-type="video">
-          <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
-          <dds-card-cta-footer
-            cta-type="video"
-            href="1_9h94wo6b"></dds-card-cta-footer>
-        </dds-card-in-card>
-      </dds-video-cta-container>
+      <c4d-video-cta-container>
+        <c4d-card-in-card href="0_ibuqxqbe" cta-type="video">
+          <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+          <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
+          <c4d-card-footer></c4d-card-footer>
+        </c4d-card-in-card>
+      </c4d-video-cta-container>
     `;
   }
   return html`
-    <dds-card-in-card href=${ifNonNull(href || undefined)}>
-      <dds-card-in-card-image
+    <c4d-card-in-card href=${ifDefined(href || undefined)} cta-type="local">
+      <c4d-card-in-card-image
         slot="image"
-        alt="${ifNonNull(alt)}"
-        default-src="${ifNonNull(defaultSrc)}">
-        <dds-image-item media="(min-width: 1312px)" srcset="${imgXlg16x9}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${imgMd16x9}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${imgSm4x3}">
-        </dds-image-item>
-      </dds-card-in-card-image>
-      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
-      <dds-card-heading>${heading}</dds-card-heading>
-      <dds-card-cta-footer>
-        ${ArrowRight20({ slot: 'icon' })}
-      </dds-card-cta-footer>
-    </dds-card-in-card>
+        alt="${ifDefined(alt)}"
+        default-src="${ifDefined(defaultSrc)}">
+        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg16x9}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd16x9}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)" srcset="${imgSm4x3}">
+        </c4d-image-item>
+      </c4d-card-in-card-image>
+      <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      <c4d-card-footer></c4d-card-footer>
+    </c4d-card-in-card>
   `;
 };
 
@@ -65,9 +64,9 @@ export default {
   title: 'Components/Card in card',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
@@ -76,7 +75,7 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      'dds-card-in-card': () => {
+      'c4d-card-in-card': () => {
         const video = boolean('video', false);
         const alt = video
           ? undefined
@@ -105,7 +104,7 @@ export default {
     },
     propsSet: {
       default: {
-        'dds-card-in-card': {
+        'c4d-card-in-card': {
           video: false,
           alt: 'Image alt text',
           defaultSrc: imgSm4x3,
diff --git a/packages/web-components/src/components/card-in-card/__tests__/card-in-card.test.ts b/packages/web-components/src/components/card-in-card/__tests__/card-in-card.test.ts
index 5bcef69c582..aa486bcc7af 100644
--- a/packages/web-components/src/components/card-in-card/__tests__/card-in-card.test.ts
+++ b/packages/web-components/src/components/card-in-card/__tests__/card-in-card.test.ts
@@ -1,27 +1,27 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../card-in-card';
 import { Default } from '../__stories__/card-in-card.stories';
 
 const template = (props?) =>
   Default({
-    'dds-card-in-card': props,
+    'c4d-card-in-card': props,
   });
 
-describe('dds-card-in-card', function () {
+describe('c4d-card-in-card', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-card-in-card>`
-      expect(document.body.querySelector('dds-card-in-card')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-card-in-card>`
+      expect(document.body.querySelector('c4d-card-in-card')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -38,8 +38,8 @@ describe('dds-card-in-card', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-card-in-card>`
-      expect(document.body.querySelector('dds-card-in-card')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-card-in-card>`
+      expect(document.body.querySelector('c4d-card-in-card')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/card-in-card/card-in-card-image.ts b/packages/web-components/src/components/card-in-card/card-in-card-image.ts
index 3dac3995faf..8662bf683d3 100644
--- a/packages/web-components/src/components/card-in-card/card-in-card-image.ts
+++ b/packages/web-components/src/components/card-in-card/card-in-card-image.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import DDSImage from '../image/image';
+import { css } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import C4DImage from '../image/image';
 import styles from './card-in-card.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card in Card Extends Image.
  *
- * @element dds-card-in-card-image
+ * @element c4d-card-in-card-image
  */
-@customElement(`${ddsPrefix}-card-in-card-image`)
-class DDSCardInCardImage extends DDSImage {
+@customElement(`${c4dPrefix}-card-in-card-image`)
+class C4DCardInCardImage extends C4DImage {
   // `styles` here is a `CSSResult` generated by custom WebPack loader
   static get styles() {
     return css`
@@ -31,4 +31,4 @@ class DDSCardInCardImage extends DDSImage {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardInCardImage;
+export default C4DCardInCardImage;
diff --git a/packages/web-components/src/components/card-in-card/card-in-card.scss b/packages/web-components/src/components/card-in-card/card-in-card.scss
index df5a3037bc0..a90c87cb9a9 100644
--- a/packages/web-components/src/components/card-in-card/card-in-card.scss
+++ b/packages/web-components/src/components/card-in-card/card-in-card.scss
@@ -6,10 +6,5 @@
  * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../card/card';
-@import '@carbon/ibmdotcom-styles/scss/components/card-in-card/card-in-card';
 
-:host(#{$dds-prefix}-card-in-card) {
-  display: block;
-}
+@use '@carbon/ibmdotcom-styles/scss/components/card-in-card';
diff --git a/packages/web-components/src/components/card-in-card/card-in-card.ts b/packages/web-components/src/components/card-in-card/card-in-card.ts
index 29ca08e5f71..ad8de8c2cfc 100644
--- a/packages/web-components/src/components/card-in-card/card-in-card.ts
+++ b/packages/web-components/src/components/card-in-card/card-in-card.ts
@@ -7,44 +7,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSCardCTA, { CTA_TYPE } from '../cta/card-cta';
+import { css, html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DCard from '../card/card';
+import { CTA_TYPE } from '../cta/card-cta';
 import './card-in-card-image';
 import styles from './card-in-card.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card in Card.
  *
- * @element dds-card-in-card
+ * @element c4d-card-in-card
  */
-@customElement(`${ddsPrefix}-card-in-card`)
-class DDSCardInCard extends StableSelectorMixin(DDSCardCTA) {
+@customElement(`${c4dPrefix}-card-in-card`)
+class C4DCardInCard extends StableSelectorMixin(C4DCard) {
   protected _renderImage() {
-    const {
-      ctaType,
-      videoName,
-      videoThumbnailUrl,
-      thumbnail,
-      _hasImage: hasImage,
-    } = this;
+    const { ctaType, videoName, videoThumbnailUrl, _hasImage: hasImage } = this;
     const image =
       hasImage || ctaType !== CTA_TYPE.VIDEO
         ? undefined
         : html`
-            <dds-card-in-card-image
-              alt="${ifNonNull(videoName)}"
-              default-src="${ifNonNull(thumbnail || videoThumbnailUrl)}">
-              ${PlayVideo({ slot: 'icon' })}
-            </dds-card-in-card-image>
+            <c4d-card-in-card-image
+              alt="${ifDefined(videoName)}"
+              default-src="${videoThumbnailUrl}">
+            </c4d-card-in-card-image>
           `;
     return html`
       <slot name="image" @slotchange="${this._handleSlotChange}"></slot>${image}
@@ -58,27 +49,14 @@ class DDSCardInCard extends StableSelectorMixin(DDSCardCTA) {
       linkNode.classList.add(`${prefix}--card-in-card`);
     }
 
-    const cardInCardImage = this.querySelector(
-      `${ddsPrefix}-card-in-card-image`
-    );
-    const cardInCardImageVideo = this.parentElement
-      ?.querySelector(`${ddsPrefix}-card-in-card`)
-      ?.shadowRoot?.querySelector('dds-card-in-card-image');
-
-    // fires the card cta footer when card image is clicked
-    if (cardInCardImage || cardInCardImageVideo) {
-      (
-        (cardInCardImage as HTMLElement) ||
-        (cardInCardImageVideo as HTMLElement)
-      ).onclick = () =>
-        this.querySelector(`${ddsPrefix}-card-cta-footer`)
-          ?.shadowRoot?.querySelector(`a`)
-          ?.click();
-    }
+    this.onclick = () =>
+      this.querySelector(`${c4dPrefix}-card-footer`)
+        ?.shadowRoot?.querySelector(`a`)
+        ?.click();
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-in-card`;
+    return `${c4dPrefix}--card-in-card`;
   }
 
   static get styles() {
@@ -89,4 +67,4 @@ class DDSCardInCard extends StableSelectorMixin(DDSCardCTA) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardInCard;
+export default C4DCardInCard;
diff --git a/packages/web-components/src/components/card-link/__stories__/README.stories.mdx b/packages/web-components/src/components/card-link/__stories__/README.stories.mdx
deleted file mode 100644
index cef9d74d91b..00000000000
--- a/packages/web-components/src/components/card-link/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-
-
-
-
-
-# Card Link
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-link)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-link)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/card-link/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['card-link'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<dds-card-link href="https://example.com">
-  <dds-card-link-heading>Heading text</dds-card-link-heading>
-  <p>Optional copy text</p>
-  <svg
-    slot="footer"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    aria-hidden="true"
-    width="20"
-    height="20"
-    viewBox="0 0 20 20"
-  >
-    <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-  </svg>
-</dds-card-link>
-```
-
-## Props
-
-<Props of="dds-card-link" />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector         | Compatibility selector                 | Description |
-| ------------------------------- | -------------------------------------- | ----------- |
-| `<dds-card-link>`               | `data-autoid="dds--card-link"`         | Component   |
-| `<dds-card-link-heading>`       | `data-autoid="dds--card-link-heading"` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx
deleted file mode 100644
index 970cda30480..00000000000
--- a/packages/web-components/src/components/card-link/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,51 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link';
-
-# Card Link
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-link)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/card-link)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS
-
-```javascript
-import DDSCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-
-function App() {
-  return (
-      <DDSCardLink href="https://example.com">
-        <DDSCardLinkHeading>Heading text</DDSCardLinkHeading>
-        <p>Optional copy text</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSCardLink>
-  );
-}
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector          | Compatibility selector | Description |
-| -------------------------------- | ---------------------- | ----------- |
-| `<dds-card-link>`                | N/A                    | Component   |
-| `<dds-card-link-heading>`        | N/A                    | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx b/packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx
deleted file mode 100644
index 8b76aeb6fe1..00000000000
--- a/packages/web-components/src/components/card-link/__stories__/card-link.stories.react.tsx
+++ /dev/null
@@ -1,64 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { boolean } from '@storybook/addon-knobs';
-import React from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import Error20 from '@carbon/icons-react/es/error/20.js';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-import DDSCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import readme from './README.stories.react.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-export const Default = args => {
-  const { disabled, href, heading, copy } = args?.CardLink ?? {};
-  return (
-    <DDSCardLink disabled={disabled} href={href || undefined}>
-      <DDSCardLinkHeading>{heading}</DDSCardLinkHeading>
-      {copy ? <p>{copy}</p> : ''}
-      <DDSCardFooter disabled={disabled}> {disabled ? <Error20 slot="icon" /> : <ArrowRight20 slot="icon" />} </DDSCardFooter>
-    </DDSCardLink>
-  );
-};
-
-Default.story = {
-  parameters: {
-    knobs: {
-      CardLink: () => ({
-        disabled: boolean('Disabled (disabled):', false),
-        href: textNullable('Card href (href):', 'https://example.com'),
-        heading: textNullable('Card heading (heading):', 'Explore AI use cases in all industries'),
-        copy: textNullable('Card copy (copy):', ''),
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Card link',
-  decorators: [
-    story => {
-      return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">{story()}</div>
-          </div>
-        </div>
-      );
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts b/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts
deleted file mode 100644
index f40725a14e7..00000000000
--- a/packages/web-components/src/components/card-link/__stories__/card-link.stories.ts
+++ /dev/null
@@ -1,71 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { boolean } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import Error20 from '../../../internal/vendor/@carbon/web-components/icons/error/20.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import readme from './README.stories.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-import '../index';
-
-export const Default = (args) => {
-  const { disabled, href, heading, copy } = args?.CardLink ?? {};
-  return html`
-    <dds-card-link ?disabled=${disabled} href=${ifNonNull(href || undefined)}>
-      <dds-card-link-heading>${heading}</dds-card-link-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
-      <dds-card-footer ?disabled=${disabled}>
-        ${disabled ? Error20({ slot: 'icon' }) : ArrowRight20({ slot: 'icon' })}
-      </dds-card-footer>
-    </dds-card-link>
-  `;
-};
-
-export default {
-  title: 'Components/Card link',
-  decorators: [
-    (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div
-            class="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
-            ${story()}
-          </div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      CardLink: () => ({
-        disabled: boolean('Disabled (disabled):', false),
-        href: textNullable('Card href (href):', 'https://example.com'),
-        heading: textNullable(
-          'Card heading (heading):',
-          'Explore AI use cases in all industries'
-        ),
-        copy: textNullable('Card copy (copy):', ''),
-      }),
-    },
-    propsSet: {
-      default: {
-        CardLink: {
-          disabled: false,
-          href: 'https://example.com',
-          heading: 'Explore AI use cases in all industries',
-          copy: '',
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/card-link/card-link-heading.ts b/packages/web-components/src/components/card-link/card-link-heading.ts
index a2ad1b35999..b7c18815ddf 100644
--- a/packages/web-components/src/components/card-link/card-link-heading.ts
+++ b/packages/web-components/src/components/card-link/card-link-heading.ts
@@ -7,26 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSCardHeading from '../card/card-heading';
+import C4DCardHeading from '../card/card-heading';
 import styles from './card-link.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card Link Heading.
  *
- * @element dds-card-link-heading
+ * @element c4d-card-link-heading
  */
-@customElement(`${ddsPrefix}-card-link-heading`)
-class DDSCardLinkHeading extends DDSCardHeading {
+@customElement(`${c4dPrefix}-card-link-heading`)
+class C4DCardLinkHeading extends C4DCardHeading {
   static get stableSelector() {
-    return `${ddsPrefix}--card-link-heading`;
+    return `${c4dPrefix}--card-link-heading`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardLinkHeading;
+export default C4DCardLinkHeading;
diff --git a/packages/web-components/src/components/card-link/card-link.scss b/packages/web-components/src/components/card-link/card-link.scss
index 74c436db742..c3d67d32305 100644
--- a/packages/web-components/src/components/card-link/card-link.scss
+++ b/packages/web-components/src/components/card-link/card-link.scss
@@ -1,20 +1,21 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/card';
+@use '@carbon/ibmdotcom-styles/scss/components/card-link';
 
-:host(#{$dds-prefix}-card-link),
-:host(#{$dds-prefix}-card-link-cta),
-:host(#{$dds-prefix}-link-list-item-card),
-:host(#{$dds-prefix}-link-list-item-card-cta) {
+:host(#{$c4d-prefix}-card-link),
+:host(#{$c4d-prefix}-card-link-cta) {
   max-width: rem(364px);
 
   .#{$prefix}--card__wrapper {
@@ -24,11 +25,11 @@
   }
 }
 
-:host(#{$dds-prefix}-card-link-cta) {
+:host(#{$c4d-prefix}-card-link-cta) {
   display: flex;
 }
 
-:host(#{$dds-prefix}-feature-section-card-link) {
+:host(#{$c4d-prefix}-feature-section-card-link) {
   .#{$prefix}--card {
     max-width: inherit;
   }
@@ -39,14 +40,3 @@
     }
   }
 }
-
-:host(#{$dds-prefix}-link-list-item-card),
-:host(#{$dds-prefix}-link-list-item-card-cta) {
-  ::slotted(#{$dds-prefix}-card-footer) {
-    margin-block: 2px;
-    margin-inline-start: 32px;
-    @include carbon--breakpoint('lg') {
-      margin-inline-start: 0;
-    }
-  }
-}
diff --git a/packages/web-components/src/components/card-link/card-link.ts b/packages/web-components/src/components/card-link/card-link.ts
index 295b4496c9b..2beca09a9f7 100644
--- a/packages/web-components/src/components/card-link/card-link.ts
+++ b/packages/web-components/src/components/card-link/card-link.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSCard from '../card/card';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DCard from '../card/card';
 import styles from './card-link.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card Link.
  *
- * @element dds-card-link
+ * @element c4d-card-link
  */
-@customElement(`${ddsPrefix}-card-link`)
-class DDSCardLink extends DDSCard {
+@customElement(`${c4dPrefix}-card-link`)
+class C4DCardLink extends C4DCard {
   /**
    * `true` to disable the card link.
    */
@@ -43,11 +41,16 @@ class DDSCardLink extends DDSCard {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-link`;
+    return `${c4dPrefix}--card-link`;
   }
 
   static styles = styles;
 }
 
+console.warn(
+  'The card-link component has been deprecated in favor of the card (link variant) component. ' +
+    'See card documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardLink;
+export default C4DCardLink;
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
index 07512b8caa1..8f2a3870a5f 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Card section — carousel
 
 ## Getting started
@@ -14,7 +16,7 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/index.js'
+import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/index.js';
 ```
 
 <Description markdown={`${cdnJs({ components: ['card-section-carousel'] })}`} />
@@ -24,16 +26,22 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
 ### HTML
 
 ```html
-<dds-card-section-carousel>
-  <dds-content-section-heading>Lorem ipsum dolor sit amet</dds-content-section-heading>
-  <dds-content-section-copy>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  </dds-content-section-copy>
-  <dds-carousel>
-    <dds-card href="https://example.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-      <dds-card-footer>
+<cds-card-section-carousel>
+  <cds-content-section-heading
+    >Lorem ipsum dolor sit amet</cds-content-section-heading
+  >
+  <cds-content-section-copy>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est.
+  </cds-content-section-copy>
+  <cds-carousel>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </p>
+      <cds-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -43,16 +51,19 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20"
-        >
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-footer>
-    </dds-card>
-    <dds-card href="https://example.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-      <dds-card-footer>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </p>
+      <cds-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -62,16 +73,19 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20"
-        >
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-footer>
-    </dds-card>
-    <dds-card href="https://example.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-      <dds-card-footer>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </p>
+      <cds-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -81,16 +95,19 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20"
-        >
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-footer>
-    </dds-card>
-    <dds-card href="https://example.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-      <dds-card-footer>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </p>
+      <cds-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -100,16 +117,19 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20"
-        >
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-footer>
-    </dds-card>
-    <dds-card href="https://example.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-      <dds-card-footer>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </p>
+      <cds-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -119,16 +139,19 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20"
-        >
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-footer>
-    </dds-card>
-    <dds-card href="https://example.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-      <dds-card-footer>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </p>
+      <cds-card-footer>
         <svg
           slot="footer"
           focusable="false"
@@ -138,30 +161,36 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-carousel/ind
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20"
-        >
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-footer>
-    </dds-card>
-  </dds-carousel>
-</dds-card-section-carousel>
+      </cds-card-footer>
+    </cds-card>
+  </cds-carousel>
+</cds-card-section-carousel>
 ```
 
 ## Carousel
 
-Check the [documentation](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/carousel/__stories__/README.stories.mdx) for `dds-carousel`.
+Check the
+[documentation](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/carousel/__stories__/README.stories.mdx)
+for `cds-carousel`.
 
 ## Card
 
-Check the [documentation](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/card/__stories__/README.stories.mdx) for `dds-card`.
+Check the
+[documentation](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/blob/main/packages/web-components/src/components/card/__stories__/README.stories.mdx)
+for `cds-card`.
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector       | Compatibility selector                    | Description |
-| ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-card-section-carousel>`   | `data-autoid="dds--card-section-carousel"`  | Component   |
+| Web Components selector       | Compatibility selector                     | Description |
+| ----------------------------- | ------------------------------------------ | ----------- |
+| `<cds-card-section-carousel>` | `data-autoid="cds--card-section-carousel"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
index df65096374b..caa78be235f 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/README.stories.react.mdx
@@ -1,11 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Card Section - Carousel
 
 ## Getting started
@@ -16,61 +18,74 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card.js';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
-import DDSContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy.js';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading.js';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon.js';
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel.js';
-import DDSCardSectionCarousel from '@carbon/ibmdotcom-web-components/es/components-react/card-section-carousel/card-section-carousel.js';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card.js';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading.js';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer.js';
+import C4DContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy.js';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading.js';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon.js';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel.js';
+import C4DCardSectionCarousel from '@carbon/ibmdotcom-web-components/es/components-react/card-section-carousel/card-section-carousel.js';
 
 function App() {
   return (
-    <DDSCardSectionCarousel>
-      <DDSContentSectionHeading>Lorem ipsum dolor sit amet</DDSContentSectionHeading>
-      <DDSContentSectionCopy>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-      </DDSContentSectionCopy>
-      <DDSLinkWithIcon slot="footer" href="https://www.ibm.com/standards/carbon">
+    <C4DCardSectionCarousel>
+      <C4DContentSectionHeading>
+        Lorem ipsum dolor sit amet
+      </C4DContentSectionHeading>
+      <C4DContentSectionCopy>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est.
+      </C4DContentSectionCopy>
+      <C4DLinkWithIcon
+        slot="footer"
+        href="https://www.ibm.com/standards/carbon">
         Link text
         <ArrowRight20 slot="icon" />
-      </DDSLinkWithIcon>
-      <DDSCarousel>
-        <DDSCard href="https://www.ibm.com/standards/carbon">
-          <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.</p>
-          <DDSCardFooter>
+      </C4DLinkWithIcon>
+      <C4DCarousel>
+        <C4DCard href="https://www.ibm.com/standards/carbon">
+          <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est.
+          </p>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSCard>
-        <DDSCard href="https://www.ibm.com/standards/carbon">
-          <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
-          <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.</p>
+          </C4DCardFooter>
+        </C4DCard>
+        <C4DCard href="https://www.ibm.com/standards/carbon">
+          <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit.
+          </p>
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-          <DDSCardFooter>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSCard>
-      </DDSCarousel>
-    </DDSCardSectionCarousel>
+          </C4DCardFooter>
+        </C4DCard>
+      </C4DCarousel>
+    </C4DCardSectionCarousel>
   );
 }
 ```
 
 ## Props
 
-### `<dds-carousel>`
+### `<cds-carousel>`
 
 <Props of={PropTypesRef} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector             | Compatibility selector                    | Description |
-| ----------------------------------- | ----------------------                    | ----------- |
-| `<dds-card-section-carousel>`        | data-autoid="dds--card-section-carousel"  | Component   |
-| `<dds-carousel>`                    | N/A                                       | Component   |
+| Web Components selector       | Compatibility selector                   | Description |
+| ----------------------------- | ---------------------------------------- | ----------- |
+| `<cds-card-section-carousel>` | data-autoid="cds--card-section-carousel" | Component   |
+| `<cds-carousel>`              | N/A                                      | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx
index d2265d1932f..199b44fea60 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.react.tsx
@@ -13,22 +13,22 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
 // eslint-disable-next-line max-len
-import DDSCardSectionCarousel from '@carbon/ibmdotcom-web-components/es/components-react/card-section-carousel/card-section-carousel';
+import C4DCardSectionCarousel from '@carbon/ibmdotcom-web-components/es/components-react/card-section-carousel/card-section-carousel';
 // @ts-ignore
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 // @ts-ignore
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 // @ts-ignore
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 // @ts-ignore
-import DDSContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
+import C4DContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
 // @ts-ignore
 // eslint-disable-next-line max-len
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
 // @ts-ignore
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 // @ts-ignore
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 import readme from './README.stories.react.mdx';
 import styles from './card-section-carousel.stories.scss';
 
@@ -46,37 +46,37 @@ const Card = ({
   heading = headingDefault,
   href = hrefDefault,
 } = {}) => (
-  <DDSCard href={href}>
-    <DDSCardHeading>{heading}</DDSCardHeading>
+  <C4DCard href={href}>
+    <C4DCardHeading>{heading}</C4DCardHeading>
     <p>{copy}</p>
-    <DDSCardFooter>
+    <C4DCardFooter>
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSCard>
+    </C4DCardFooter>
+  </C4DCard>
 );
 
 export const Default = () => {
   return (
-    <DDSCardSectionCarousel>
-      <DDSContentSectionHeading>
+    <C4DCardSectionCarousel>
+      <C4DContentSectionHeading>
         Lorem ipsum dolor sit amet
-      </DDSContentSectionHeading>
-      <DDSContentSectionCopy>
+      </C4DContentSectionHeading>
+      <C4DContentSectionCopy>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
-      </DDSContentSectionCopy>
-      <DDSLinkWithIcon slot="footer" href={hrefDefault}>
+      </C4DContentSectionCopy>
+      <C4DLinkWithIcon slot="footer" href={hrefDefault}>
         Link text
         <ArrowRight20 slot="icon" />
-      </DDSLinkWithIcon>
-      <DDSCarousel>
+      </C4DLinkWithIcon>
+      <C4DCarousel>
         <Card />
         <Card copy={copyOdd} />
         <Card />
         <Card copy={copyOdd} />
         <Card />
-      </DDSCarousel>
-    </DDSCardSectionCarousel>
+      </C4DCarousel>
+    </C4DCardSectionCarousel>
   );
 };
 
@@ -86,8 +86,8 @@ export default {
     (story) => (
       <>
         <style type="text/css">{styles.cssText}</style>
-        <div className="bx--grid">
-          <div className="bx--row grid-alignment">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row grid-alignment">{story()}</div>
         </div>
       </>
     ),
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.scss b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.scss
index e476cf9a758..5095d2c9d2a 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.scss
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.scss
@@ -6,11 +6,13 @@
  * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 .grid-alignment {
-  @include carbon--breakpoint('md') {
-    margin-right: -2rem;
+  @include breakpoint(md) {
+    margin-right: -$spacing-07;
   }
 }
diff --git a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
index 67a7c5d28db..7a4541bac49 100644
--- a/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
+++ b/packages/web-components/src/components/card-section-carousel/__stories__/card-section-carousel.stories.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import '../index';
 import styles from './card-section-carousel.stories.scss';
@@ -28,32 +28,32 @@ const Card = ({
   heading = headingDefault,
   href = hrefDefault,
 } = {}) => html`
-  <dds-card href="${ifNonNull(href)}">
-    <dds-card-heading>${heading}</dds-card-heading>
+  <c4d-card href="${ifDefined(href)}">
+    <c4d-card-heading>${heading}</c4d-card-heading>
     <p>${copy}</p>
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
-  </dds-card>
+    <c4d-card-footer> ${ArrowRight20({ slot: 'icon' })} </c4d-card-footer>
+  </c4d-card>
 `;
 
 export const Default = () => {
   return html`
-    <dds-card-section-carousel>
-      <dds-content-section-heading
-        >Lorem ipsum dolor sit amet</dds-content-section-heading
+    <c4d-card-section-carousel>
+      <c4d-content-section-heading
+        >Lorem ipsum dolor sit amet</c4d-content-section-heading
       >
-      <dds-content-section-copy
+      <c4d-content-section-copy
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est.
-      </dds-content-section-copy>
-      <dds-link-with-icon slot="footer" href="${ifNonNull(hrefDefault)}">
+      </c4d-content-section-copy>
+      <c4d-link-with-icon slot="footer" href="${ifDefined(hrefDefault)}">
         Link text ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-with-icon>
-      <dds-carousel>
+      </c4d-link-with-icon>
+      <c4d-carousel>
         ${Card()}${Card({ copy: copyOdd })}${Card()}${Card({
           copy: copyOdd,
         })}${Card()}
-      </dds-carousel>
-    </dds-card-section-carousel>
+      </c4d-carousel>
+    </c4d-card-section-carousel>
   `;
 };
 
@@ -64,8 +64,8 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row grid-alignment">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row grid-alignment">${story()}</div>
       </div>
     `,
   ],
diff --git a/packages/web-components/src/components/card-section-carousel/card-section-carousel.scss b/packages/web-components/src/components/card-section-carousel/card-section-carousel.scss
index 588cebc0932..1cdfa9b54e8 100644
--- a/packages/web-components/src/components/card-section-carousel/card-section-carousel.scss
+++ b/packages/web-components/src/components/card-section-carousel/card-section-carousel.scss
@@ -5,17 +5,19 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-card-section-carousel) {
-  @include carbon--breakpoint('lg') {
+:host(#{$c4d-prefix}-card-section-carousel) {
+  @include breakpoint(lg) {
     .#{$prefix}--content-section__body {
       max-width: 75%;
     }
   }
 
-  @include carbon--breakpoint('md') {
-    padding-right: 1rem;
+  @include breakpoint(md) {
+    padding-right: $spacing-05;
   }
 }
diff --git a/packages/web-components/src/components/card-section-carousel/card-section-carousel.ts b/packages/web-components/src/components/card-section-carousel/card-section-carousel.ts
index 4e486df00b3..ed100842444 100644
--- a/packages/web-components/src/components/card-section-carousel/card-section-carousel.ts
+++ b/packages/web-components/src/components/card-section-carousel/card-section-carousel.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './card-section-carousel.scss';
-import DDSContentSection from '../content-section/content-section';
+import C4DContentSection from '../content-section/content-section';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The Card Section Carousel pattern
  *
- * @element dds-card-section-carousel
+ * @element c4d-card-section-carousel
  */
-@customElement(`${ddsPrefix}-card-section-carousel`)
-class DDSCardSectionCarousel extends DDSContentSection {
+@customElement(`${c4dPrefix}-card-section-carousel`)
+class C4DCardSectionCarousel extends C4DContentSection {
   static get stableSelector() {
-    return `${ddsPrefix}--card-section-carousel`;
+    return `${c4dPrefix}--card-section-carousel`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -35,5 +34,10 @@ class DDSCardSectionCarousel extends DDSContentSection {
   }
 }
 
+console.warn(
+  'The card-section-carousel component has been deprecated in favor of the content-section/block component combined with carousel. ' +
+    'See content-section/block and carousel documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardSectionCarousel;
+export default C4DCardSectionCarousel;
diff --git a/packages/web-components/src/components/card-section-images/card-section-images.scss b/packages/web-components/src/components/card-section-images/card-section-images.scss
deleted file mode 100644
index b54b2d0c997..00000000000
--- a/packages/web-components/src/components/card-section-images/card-section-images.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-//
-// Copyright IBM Corp. 2020
-//
-// 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 '@carbon/ibmdotcom-styles/scss/components/card-section-images/card-section-images';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-
-:host(#{$dds-prefix}-card-section-images) {
-  display: block;
-
-  padding-top: 3rem;
-  padding-bottom: 10rem;
-
-  .#{$prefix}--content-section__children {
-    padding-left: 0;
-    padding-right: 0;
-  }
-}
diff --git a/packages/web-components/src/components/card-section-images/card-section-images.ts b/packages/web-components/src/components/card-section-images/card-section-images.ts
deleted file mode 100644
index 8c7232eba27..00000000000
--- a/packages/web-components/src/components/card-section-images/card-section-images.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-
-import styles from './card-section-images.scss';
-import DDSContentSection from '../content-section/content-section';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The Card Section Images pattern
- *
- * @element dds-card-section-images
- */
-@customElement(`${ddsPrefix}-card-section-images`)
-class DDSCardSectionImages extends StableSelectorMixin(DDSContentSection) {
-  static get stableSelector() {
-    return `${ddsPrefix}--card-section-images`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default deprecate(
-  /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-  DDSCardSectionImages,
-  'The dds-card-section-images component has been merged with the dds-card-section component ' +
-    'See dds-card-section documentation for more information.'
-);
diff --git a/packages/web-components/src/components/card-section-images/index.ts b/packages/web-components/src/components/card-section-images/index.ts
deleted file mode 100644
index f17e6b70afc..00000000000
--- a/packages/web-components/src/components/card-section-images/index.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * @license
- *
- * 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 './card-section-images';
-import '../card/card-eyebrow';
-import '../card/card-heading';
-import '../cta/card-cta-footer';
-import '../card-group/card-group';
-import '../card-group/card-group-item';
-import '../content-section/content-section';
-import '../content-section/content-section-heading';
diff --git a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx
index abbf1a08774..553ecbd9cb5 100644
--- a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.mdx
@@ -3,7 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<dds-card-section-offset>`
+# `<cds-card-section-offset>`
 
 > The Card Section - Offset pattern is an L shaped card group with a heading and
 > an optional CTA. 💡 Check our
@@ -29,33 +29,32 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
 ### HTML
 
 ```html
-<dds-card-section-offset>
-  <dds-background-media
+<cds-card-section-offset>
+  <cds-background-media
     gradient-direction="left-to-right"
     slot="image-top"
     alt="alt text"
     default-src="https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616">
-  </dds-background-media>
-  <dds-content-block-heading slot="heading">heading</dds-content-block-heading>
-  <dds-text-cta
+  </cds-background-media>
+  <cds-content-block-heading slot="heading">heading</cds-content-block-heading>
+  <cds-text-cta
     slot="action"
     cta-type="local"
     icon-placement="right"
     href="https://example.com">
     CTA copy
-  </dds-text-cta>
-  <dds-card-group slot="card-group" cards-per-row="2">
-    <dds-card-group-item empty></dds-card-group-item>
-    <dds-card-group-item href="https://example.com">
-      <dds-card-eyebrow>Label</dds-card-eyebrow>
-      <dds-card-heading
-        >Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading
+  </cds-text-cta>
+  <cds-card-group slot="card-group" cards-per-row="2">
+    <cds-card-group-item href="https://example.com">
+      <cds-card-eyebrow>Label</cds-card-eyebrow>
+      <cds-card-heading
+        >Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
         democritum ex. Illud ullum graecis
       </p>
-      <dds-card-cta-footer slot="footer">
+      <cds-card-cta-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -68,18 +67,18 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-    <dds-card-group-item href="https://example.com">
-      <dds-card-eyebrow>Label</dds-card-eyebrow>
-      <dds-card-heading
-        >Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+    <cds-card-group-item href="https://example.com">
+      <cds-card-eyebrow>Label</cds-card-eyebrow>
+      <cds-card-heading
+        >Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
         democritum ex. Illud ullum graecis
       </p>
-      <dds-card-cta-footer slot="footer">
+      <cds-card-cta-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -92,18 +91,18 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-    <dds-card-group-item href="https://example.com">
-      <dds-card-eyebrow>Label</dds-card-eyebrow>
-      <dds-card-heading
-        >Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+    <cds-card-group-item href="https://example.com">
+      <cds-card-eyebrow>Label</cds-card-eyebrow>
+      <cds-card-heading
+        >Lorem ipsum dolor sit amet, pro graeco tibique an</cds-card-heading
       >
       <p>
         Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
         democritum ex. Illud ullum graecis
       </p>
-      <dds-card-cta-footer slot="footer">
+      <cds-card-cta-footer slot="footer">
         <svg
           slot="icon"
           focusable="false"
@@ -116,15 +115,15 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-offset/index
           <path
             d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-  </dds-card-group>
-</dds-card-section-offset>
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+  </cds-card-group>
+</cds-card-section-offset>
 ```
 
 ## Props
 
-<Props of="dds-card-section-offset" />
+<Props of="cds-card-section-offset" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -135,6 +134,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector                   | Description |
 | --------------------------- | ---------------------------------------- | ----------- |
-| `<dds-card-section-offset>` | `data-autoid="dds--card-section-offset"` | Component   |
+| `<cds-card-section-offset>` | `data-autoid="cds--card-section-offset"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx
index b4a621e2f3e..63fb9bd27fa 100644
--- a/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-offset/__stories__/README.stories.react.mdx
@@ -22,77 +22,76 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardSectionOffset from '@carbon/ibmdotcom-web-components/es/components-react/card-section-offset/card-section-offset';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardSectionOffset from '@carbon/ibmdotcom-web-components/es/components-react/card-section-offset/card-section-offset';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 
 function App() {
   return (
-    <DDSCardSectionOffset>
-      <DDSBackgroundMedia
+    <C4DCardSectionOffset>
+      <C4DBackgroundMedia
         gradient-direction="left-to-right"
         slot="image"
         alt={'alt'}
         default-src={
           'https://fpoimg.com/1584x891?bg_color=ee5396&text_color=161616'
-        }></DDSBackgroundMedia>
-      <DDSContentBlockHeading slot="heading">Heading</DDSContentBlockHeading>
-      <DDSTextCTA
+        }></C4DBackgroundMedia>
+      <C4DContentBlockHeading slot="heading">Heading</C4DContentBlockHeading>
+      <C4DTextCTA
         slot="action"
         icon-placement="right"
         cta-type={'local'}
         href={'https://example.com'}>
         Copy
-      </DDSTextCTA>
-      <DDSCardGroup slot="card-group" cards-per-row="2">
-        <DDSCardGroupItem empty></DDSCardGroupItem>
-        <DDSCardGroupItem href="https://example.com">
-          <DDSCardEyebrow>Label</DDSCardEyebrow>
-          <DDSCardHeading>
+      </C4DTextCTA>
+      <C4DCardGroup slot="card-group" cards-per-row="2">
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardEyebrow>Label</C4DCardEyebrow>
+          <C4DCardHeading>
             Lorem ipsum dolor sit amet, pro graeco tibique an
-          </DDSCardHeading>
+          </C4DCardHeading>
           <p>
             Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
             democritum ex. Illud ullum graecis
           </p>
-          <DDSCardCTAFooter slot="footer">
+          <C4DCardCTAFooter slot="footer">
             <ArrowRight20 slot="icon" />
-          </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-        <DDSCardGroupItem href="https://example.com">
-          <DDSCardEyebrow>Label</DDSCardEyebrow>
-          <DDSCardHeading>
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardEyebrow>Label</C4DCardEyebrow>
+          <C4DCardHeading>
             Lorem ipsum dolor sit amet, pro graeco tibique an
-          </DDSCardHeading>
+          </C4DCardHeading>
           <p>
             Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
             democritum ex. Illud ullum graecis
           </p>
-          <DDSCardCTAFooter slot="footer">
+          <C4DCardCTAFooter slot="footer">
             <ArrowRight20 slot="icon" />
-          </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-        <DDSCardGroupItem href="https://example.com">
-          <DDSCardEyebrow>Label</DDSCardEyebrow>
-          <DDSCardHeading>
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardEyebrow>Label</C4DCardEyebrow>
+          <C4DCardHeading>
             Lorem ipsum dolor sit amet, pro graeco tibique an
-          </DDSCardHeading>
+          </C4DCardHeading>
           <p>
             Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
             democritum ex. Illud ullum graecis
           </p>
-          <DDSCardCTAFooter slot="footer">
+          <C4DCardCTAFooter slot="footer">
             <ArrowRight20 slot="icon" />
-          </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-      </DDSCardGroup>
-    </DDSCardSectionOffset>
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+      </C4DCardGroup>
+    </C4DCardSectionOffset>
   );
 }
 ```
@@ -109,6 +108,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector | Description |
 | --------------------------- | ---------------------- | ----------- |
-| `<dds-card-section-offset>` | N/A                    | Component   |
+| `<cds-card-section-offset>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx b/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx
index 38a70598d99..aa9c082743b 100644
--- a/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx
+++ b/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.react.tsx
@@ -12,16 +12,16 @@ import { select } from '@storybook/addon-knobs';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardSectionOffset from '@carbon/ibmdotcom-web-components/es/components-react/card-section-offset/card-section-offset';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardSectionOffset from '@carbon/ibmdotcom-web-components/es/components-react/card-section-offset/card-section-offset';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 import { CTA_TYPE } from '../../cta/defs';
 import image from '../../../../../storybook-images/assets/card-section-offset/background-media.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -37,8 +37,9 @@ const ctaTypes = {
 const hrefsForType = {
   [CTA_TYPE.LOCAL]: 'https://www.example.com',
   [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
-  [CTA_TYPE.DOWNLOAD]: 'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.DOWNLOAD]:
+    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
 };
 
 const knobNamesForType = {
@@ -49,44 +50,54 @@ const knobNamesForType = {
 };
 
 const defaultCardGroupItem = (
-  <DDSCardGroupItem href="https://example.com">
-    <DDSCardEyebrow>Label</DDSCardEyebrow>
-    <DDSCardHeading>Lorem ipsum dolor sit amet, pro graeco tibique an</DDSCardHeading>
-    <p>Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis democritum ex. Illud ullum graecis</p>
-    <DDSCardCTAFooter slot="footer">
+  <C4DCardGroupItem href="https://example.com">
+    <C4DCardEyebrow>Label</C4DCardEyebrow>
+    <C4DCardHeading>
+      Lorem ipsum dolor sit amet, pro graeco tibique an
+    </C4DCardHeading>
+    <p>
+      Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
+      democritum ex. Illud ullum graecis
+    </p>
+    <C4DCardCTAFooter slot="footer">
       <ArrowRight20 slot="icon" />
-    </DDSCardCTAFooter>
-  </DDSCardGroupItem>
+    </C4DCardCTAFooter>
+  </C4DCardGroupItem>
 );
 
-export const Default = args => {
-  const { heading, cards, ctaType, ctaCopy, download, href, alt, defaultSrc } = args?.CardSectionOffset ?? {};
+export const Default = (args) => {
+  const { heading, cards, ctaType, ctaCopy, download, href, alt, defaultSrc } =
+    args?.CardSectionOffset ?? {};
   return (
-    <DDSCardSectionOffset>
-      <DDSBackgroundMedia
+    <C4DCardSectionOffset>
+      <C4DBackgroundMedia
         gradient-direction="left-to-right"
         mobile-position="top"
         alt={alt}
-        default-src={defaultSrc}></DDSBackgroundMedia>
-      <DDSContentBlockHeading slot="heading">{heading}</DDSContentBlockHeading>
-      <DDSTextCTA slot="action" icon-placement="right" cta-type={ctaType} download={download} href={href}>
+        default-src={defaultSrc}></C4DBackgroundMedia>
+      <C4DContentBlockHeading slot="heading">{heading}</C4DContentBlockHeading>
+      <C4DTextCTA
+        slot="action"
+        icon-placement="right"
+        cta-type={ctaType}
+        download={download}
+        href={href}>
         {ctaCopy}
-      </DDSTextCTA>
-      <DDSCardGroup slot="card-group" cards-per-row="2">
-        <DDSCardGroupItem empty></DDSCardGroupItem>
+      </C4DTextCTA>
+      <C4DCardGroup slot="card-group" cards-per-row="2">
         {cards}
-      </DDSCardGroup>
-    </DDSCardSectionOffset>
+      </C4DCardGroup>
+    </C4DCardSectionOffset>
   );
 };
 
 export default {
   title: 'Components/Card section offset',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
         </div>
       </div>
     ),
@@ -97,15 +108,26 @@ export default {
     knobs: {
       CardSectionOffset: () => {
         const ctaType = select('CTA type (cta-type)', ctaTypes, CTA_TYPE.LOCAL);
-        const ctaCopy = ctaType === CTA_TYPE.VIDEO ? undefined : textNullable('Copy text', 'Lorem ipsum dolor sit amet');
+        const ctaCopy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Copy text', 'Lorem ipsum dolor sit amet');
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : textNullable('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable(
+                'Download target (download)',
+                'IBM_Annual_Report_2019.pdf'
+              );
         return {
           heading: 'Aliquam condimentum interdum',
           ctaCopy,
           ctaType,
           download,
-          href: textNullable(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
           cards: Array.from({
             length: 3,
           }).map(() => defaultCardGroupItem),
diff --git a/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.ts b/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.ts
index b6214d7cc28..aac7a819868 100644
--- a/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.ts
+++ b/packages/web-components/src/components/card-section-offset/__stories__/card-section-offset.stories.ts
@@ -7,12 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 import '../index';
+import { GRID_MODE } from '../../card-group/defs';
 import { CTA_TYPE } from '../../cta/defs';
 import image from '../../../../../storybook-images/assets/card-section-offset/background-media.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -29,7 +30,7 @@ const hrefsForType = {
   [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
   [CTA_TYPE.DOWNLOAD]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
 };
 
 const knobNamesForType = {
@@ -39,48 +40,66 @@ const knobNamesForType = {
   [CTA_TYPE.VIDEO]: 'Video ID (href)',
 };
 
+const gridModes = {
+  [`Condensed (1px)`]: GRID_MODE.CONDENSED,
+  [`Narrow (16px)`]: GRID_MODE.NARROW,
+  [`Default (32px)`]: GRID_MODE.DEFAULT,
+};
+
 const defaultCardGroupItem = html`
-  <dds-card-group-item href="https://example.com">
-    <dds-card-eyebrow>Label</dds-card-eyebrow>
-    <dds-card-heading
-      >Lorem ipsum dolor sit amet, pro graeco tibique an</dds-card-heading
+  <c4d-card-group-item href="https://example.com">
+    <c4d-card-eyebrow>Label</c4d-card-eyebrow>
+    <c4d-card-heading
+      >Lorem ipsum dolor sit amet, pro graeco tibique an</c4d-card-heading
     >
     <p>
       Lorem ipsum dolor sit amet, habeo iisque eum ex. Vel postea singulis
       democritum ex. Illud ullum graecis
     </p>
-    <dds-card-cta-footer slot="footer">
+    <c4d-card-cta-footer slot="footer">
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-cta-footer>
-  </dds-card-group-item>
+    </c4d-card-cta-footer>
+  </c4d-card-group-item>
 `;
 
 export const Default = (args) => {
-  const { heading, cards, ctaType, ctaCopy, download, href, alt, defaultSrc } =
-    args?.CardSectionOffset ?? {};
+  const {
+    heading,
+    cards,
+    ctaType,
+    ctaCopy,
+    download,
+    gridMode,
+    href,
+    alt,
+    defaultSrc,
+  } = args?.CardSectionOffset ?? {};
   return html`
-    <dds-card-section-offset>
-      <dds-background-media
+    <c4d-card-section-offset>
+      <c4d-background-media
         gradient-direction="left-to-right"
         slot="image-top"
-        alt="${ifNonNull(alt)}"
-        default-src="${ifNonNull(defaultSrc)}">
-      </dds-background-media>
-      <dds-content-block-heading slot="heading"
-        >${heading}</dds-content-block-heading
+        alt="${ifDefined(alt)}"
+        default-src="${ifDefined(defaultSrc)}">
+      </c4d-background-media>
+      <c4d-content-block-heading slot="heading"
+        >${heading}</c4d-content-block-heading
       >
-      <dds-text-cta
+      <c4d-text-cta
         slot="action"
         icon-placement="right"
-        cta-type="${ifNonNull(ctaType)}"
-        download="${ifNonNull(download)}"
-        href="${ifNonNull(href)}">
+        cta-type="${ifDefined(ctaType)}"
+        download="${ifDefined(download)}"
+        href="${ifDefined(href)}">
         ${ctaCopy}
-      </dds-text-cta>
-      <dds-card-group slot="card-group" cards-per-row="2">
-        <dds-card-group-item empty></dds-card-group-item>${cards}
-      </dds-card-group>
-    </dds-card-section-offset>
+      </c4d-text-cta>
+      <c4d-card-group
+        slot="card-group"
+        cards-per-row="2"
+        grid-mode="${gridMode}">
+        ${cards}
+      </c4d-card-group>
+    </c4d-card-section-offset>
   `;
 };
 
@@ -88,9 +107,9 @@ export default {
   title: 'Components/Card section offset',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <dds-video-cta-container> ${story()} </dds-video-cta-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
         </div>
       </div>
     `,
@@ -105,6 +124,11 @@ export default {
           ctaType === CTA_TYPE.VIDEO
             ? undefined
             : textNullable('Copy text', 'Lorem ipsum dolor sit amet');
+        const gridMode = select(
+          'Grid mode:',
+          gridModes,
+          gridModes['Default (32px)']
+        );
         const download =
           ctaType !== CTA_TYPE.DOWNLOAD
             ? undefined
@@ -117,6 +141,7 @@ export default {
           ctaCopy,
           ctaType,
           download,
+          gridMode,
           href: textNullable(
             knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
             hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
diff --git a/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts b/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts
index 1fd510bb93d..cbb89864e1f 100644
--- a/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts
+++ b/packages/web-components/src/components/card-section-offset/__tests__/card-section-offset.test.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 
 import '../card-section-offset';
@@ -15,21 +15,21 @@ import '../card-section-offset';
 const template = (props?) => {
   const { heading, cta, children } = props ?? {};
   return html`
-    <dds-card-section-offset>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+    <c4d-card-section-offset>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
       ${cta}
-      <dds-card-group>${children}</dds-card-group>
-    </dds-card-section-offset>
+      <c4d-card-group>${children}</c4d-card-group>
+    </c4d-card-section-offset>
   `;
 };
 
-describe('dds-card-section-offset', function () {
+describe('c4d-card-section-offset', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-card-section-offset')
+        document.body.querySelector('c4d-card-section-offset')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -38,46 +38,45 @@ describe('dds-card-section-offset', function () {
         template({
           heading: 'heading-foo',
           cta: html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="action"
               cta-type="local"
               icon-placement="right"
               href="https://example.com">
               CTA copy
-            </dds-text-cta>
+            </c4d-text-cta>
           `,
           cards: html`
-            <dds-card-group-item empty></dds-card-group-item>
-            <dds-card-group-item href="https://example.com">
-              <dds-card-eyebrow>Topic</dds-card-eyebrow>
-              <dds-card-heading>Natural Language Processing.</dds-card-heading>
-              <dds-card-cta-footer slot="footer">
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+              <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
+              <c4d-card-cta-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-cta-footer>
-            </dds-card-group-item>
-            <dds-card-group-item href="https://example.com">
-              <dds-card-eyebrow>Topic</dds-card-eyebrow>
-              <dds-card-heading>Natural Language Processing.</dds-card-heading>
-              <dds-card-footer slot="footer">
+              </c4d-card-cta-footer>
+            </c4d-card-group-item>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+              <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
+              <c4d-card-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-footer>
-            </dds-card-group-item>
-            <dds-card-group-item href="https://example.com">
-              <dds-card-eyebrow>Topic</dds-card-eyebrow>
-              <dds-card-heading>Natural Language Processing.</dds-card-heading>
-              <dds-card-cta-footer slot="footer">
+              </c4d-card-footer>
+            </c4d-card-group-item>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+              <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
+              <c4d-card-cta-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-cta-footer>
-            </dds-card-group-item>
+              </c4d-card-cta-footer>
+            </c4d-card-group-item>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-card-section-offset>`
+      await Promise.resolve(); // The update cycle of `<c4d-card-section-offset>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       expect(
-        document.body.querySelector('dds-card-section-offset')
+        document.body.querySelector('c4d-card-section-offset')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/card-section-offset/card-section-offset.scss b/packages/web-components/src/components/card-section-offset/card-section-offset.scss
index ff2b6f70427..276bc6c11d3 100644
--- a/packages/web-components/src/components/card-section-offset/card-section-offset.scss
+++ b/packages/web-components/src/components/card-section-offset/card-section-offset.scss
@@ -7,4 +7,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '@carbon/ibmdotcom-styles/scss/components/card-section-offset/card-section-offset';
+@use '@carbon/ibmdotcom-styles/scss/components/card-section-offset';
diff --git a/packages/web-components/src/components/card-section-offset/card-section-offset.ts b/packages/web-components/src/components/card-section-offset/card-section-offset.ts
index 6922624e05b..3330c246d73 100644
--- a/packages/web-components/src/components/card-section-offset/card-section-offset.ts
+++ b/packages/web-components/src/components/card-section-offset/card-section-offset.ts
@@ -7,44 +7,44 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './card-section-offset.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card section offset.
  *
- * @element dds-card-section-offset
+ * @element c4d-card-section-offset
  * @slot heading - The heading content.
  * @slot action - The text-cta content.
  * @slot card-group - The L shaped card group content.
  */
-@customElement(`${ddsPrefix}-card-section-offset`)
-class DDSCardSectionOffset extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-card-section-offset`)
+class C4DCardSectionOffset extends StableSelectorMixin(C4DContentBlock) {
   protected _handleSlotChangeCardGroup(event: Event) {
     const childItems = (event.target as HTMLSlotElement).assignedNodes();
 
     childItems.filter((elem) => {
       if (
         (elem as HTMLElement).matches(
-          (this.constructor as typeof DDSCardSectionOffset).cardGroupSelector
+          (this.constructor as typeof C4DCardSectionOffset).cardGroupSelector
         ) &&
-        (elem as HTMLElement).querySelectorAll(`${ddsPrefix}-card-group-item`)
-          .length === 4 &&
-        (elem as HTMLElement)
-          .querySelector(`${ddsPrefix}-card-group-item`)
-          ?.hasAttribute('empty')
+        (elem as HTMLElement).querySelectorAll(`${c4dPrefix}-card-group-item`)
+          .length === 3
       ) {
+        const emptyCard = document.createElement(
+          `${c4dPrefix}-card-group-item`
+        );
+        emptyCard.setAttribute('empty', '');
+        this.querySelector(`${c4dPrefix}-card-group`)?.prepend(emptyCard);
         return true;
       }
-      this.querySelector('dds-card-group')!.innerHTML = '';
+      this.querySelector(`${c4dPrefix}-card-group`)!.innerHTML = '';
       return false;
     });
   }
@@ -64,11 +64,11 @@ class DDSCardSectionOffset extends StableSelectorMixin(DDSContentBlock) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-section-offset`;
+    return `${c4dPrefix}--card-section-offset`;
   }
 
   static get cardGroupSelector() {
-    return `${ddsPrefix}-card-group`;
+    return `${c4dPrefix}-card-group`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -80,4 +80,4 @@ class DDSCardSectionOffset extends StableSelectorMixin(DDSContentBlock) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardSectionOffset;
+export default C4DCardSectionOffset;
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx
index 8dbc85f1f17..539a3609ff0 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.mdx
@@ -3,17 +3,13 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-card-section-simple>`
 
-
-
-
-# `<dds-card-section-simple>`
-
-> The Card Section - Simple pattern is a collection of cards presented in a section with a left-column header.
-> 💡 Check our
+> The Card Section - Simple pattern is a collection of cards presented in a
+> section with a left-column header. 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-simple)
 > example implementation.
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-simple)
+> [![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/card-section-simple)
 
 ## Getting started
 
@@ -32,50 +28,56 @@ import '@carbon/ibmdotcom-web-components/es/components/card-section-simple/index
 ### HTML
 
 ```html
-<dds-card-section-simple>
-  <dds-content-section-heading>Aliquam condimentum interdum</dds-content-section-heading>
-  <dds-card-group>
-    <dds-card-group-item href="https://example.com" cta-type="local">
-      <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<cds-card-section-simple>
+  <cds-content-section-heading
+    >Aliquam condimentum interdum</cds-content-section-heading
+  >
+  <cds-card-group>
+    <cds-card-group-item href="https://example.com" cta-type="local">
+      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <dds-card-cta-footer slot="footer">
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-  </dds-card-group>
-</dds-card-section-simple>
+      <cds-card-cta-footer slot="footer"> </cds-card-cta-footer>
+    </cds-card-group-item>
+  </cds-card-group>
+</cds-card-section-simple>
 ```
 
 ### HTML (with images)
 
 ```html
-<dds-card-section-simple heading="Aliquam condimentum interdum">
-  <dds-card-group>
-    <dds-card-group-item href="https://example.com" cta-type="local">
-      <dds-image slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
-      </dds-image>
-      <dds-card-eyebrow>Topic</dds-card-eyebrow>
-      <dds-card-heading>Natural Language Processing.</dds-card-heading>
-      <dds-card-cta-footer slot="footer">
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-  </dds-card-group>
-</dds-card-section-simple>
+<cds-card-section-simple heading="Aliquam condimentum interdum">
+  <cds-card-group>
+    <cds-card-group-item href="https://example.com" cta-type="local">
+      <cds-image
+        slot="image"
+        alt="Image alt text"
+        default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3">
+      </cds-image>
+      <cds-card-eyebrow>Topic</cds-card-eyebrow>
+      <cds-card-heading>Natural Language Processing.</cds-card-heading>
+      <cds-card-cta-footer slot="footer"> </cds-card-cta-footer>
+    </cds-card-group-item>
+  </cds-card-group>
+</cds-card-section-simple>
 ```
 
 ## Props
 
-<Props of="dds-card-section-simple" />
+<Props of="cds-card-section-simple" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector       | Compatibility selector                    | Description |
-| ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-card-section-simple>`   | `data-autoid="dds--card-section-simple"`  | Component   |
+| Web Components selector     | Compatibility selector                   | Description |
+| --------------------------- | ---------------------------------------- | ----------- |
+| `<cds-card-section-simple>` | `data-autoid="cds--card-section-simple"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx
index 654d5d9d99c..d5b2b9c9ee5 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card-section-simple/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
 
@@ -17,29 +22,31 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 
 function App() {
   return (
-    <DDSCardSectionSimple>
-      <DDSContentSectionHeading>Aliquam condimentum interdum</DDSContentSectionHeading>
-      <DDSCardGroup>
-        <DDSCardGroupItem href="https://example.com" cta-type="local">
-          <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+    <C4DCardSectionSimple>
+      <C4DContentSectionHeading>
+        Aliquam condimentum interdum
+      </C4DContentSectionHeading>
+      <C4DCardGroup>
+        <C4DCardGroupItem href="https://example.com" cta-type="local">
+          <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-            Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin, sodales nulla quis, consequat libero.
           </p>
-          <DDSCardCTAFooter slot="footer">
-          </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-      </DDSCardGroup>
-    </DDSCardSectionSimple>
+          <C4DCardCTAFooter slot="footer"></C4DCardCTAFooter>
+        </C4DCardGroupItem>
+      </C4DCardGroup>
+    </C4DCardSectionSimple>
   );
 }
 ```
@@ -47,29 +54,29 @@ function App() {
 ### JS (with images)
 
 ```javascript
-import DDSCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 
 function App() {
   return (
-    <DDSCardSectionSimple>
-      <DDSContentSectionHeading>Aliquam condimentum interdum</DDSContentSectionHeading>
-      <DDSCardGroup>
-        <DDSCardGroupItem href="https://example.com" cta-type="local">
-          <DDSImage slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3" />
-          <DDSCardEyebrow>Topic<DDSCardEyebrow/>
-          <DDSCardHeading>Natural Language Processing.</DDSCardHeading>
-          <DDSCardCTAFooter slot="footer">
-          </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-      </DDSCardGroup>
-    </DDSCardSectionSimple>
+    <C4DCardSectionSimple>
+      <C4DContentSectionHeading>Aliquam condimentum interdum</C4DContentSectionHeading>
+      <C4DCardGroup>
+        <C4DCardGroupItem href="https://example.com" cta-type="local">
+          <C4DImage slot="image" alt="Image alt text" default-src="https://dummyimage.com/1056x792/ee5396/161616&amp;text=4:3" />
+          <C4DCardEyebrow>Topic<C4DCardEyebrow/>
+          <C4DCardHeading>Natural Language Processing.</C4DCardHeading>
+          <C4DCardCTAFooter slot="footer">
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+      </C4DCardGroup>
+    </C4DCardSectionSimple>
   );
 }
 ```
@@ -80,10 +87,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<DDSCardSectionSimple>`       | N/A                    | Component   |
+| Web Components selector  | Compatibility selector | Description |
+| ------------------------ | ---------------------- | ----------- |
+| `<C4DCardSectionSimple>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.react.tsx b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.react.tsx
index 38d5ea59286..4613615a0b5 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.react.tsx
+++ b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.react.tsx
@@ -11,56 +11,66 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardSectionSimple from '@carbon/ibmdotcom-web-components/es/components-react/card-section-simple/card-section-simple';
 /* eslint-disable max-len */
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
 
 import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--005.jpg';
 
 import readme from './README.stories.react.mdx';
 
-const cardGroupItems = withImages => {
+const cardGroupItems = (withImages) => {
   return (
-    <DDSCardGroupItem href="https://example.com" cta-type="local">
-      {withImages ? <DDSImage slot="image" alt="Image alt text" default-src={imgLg4x3} /> : ''}
-      <DDSCardEyebrow>Topic</DDSCardEyebrow>
-      <DDSCardHeading>Natural Language Processing.</DDSCardHeading>
+    <C4DCardGroupItem href="https://example.com" cta-type="local">
+      {withImages ? (
+        <C4DImage slot="image" alt="Image alt text" default-src={imgLg4x3} />
+      ) : (
+        ''
+      )}
+      <C4DCardEyebrow>Topic</C4DCardEyebrow>
+      <C4DCardHeading>Natural Language Processing.</C4DCardHeading>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <DDSCardCTAFooter slot="footer"></DDSCardCTAFooter>
-    </DDSCardGroupItem>
+      <C4DCardCTAFooter slot="footer"></C4DCardCTAFooter>
+    </C4DCardGroupItem>
   );
 };
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading, withImages, withCTA } = args?.CardSectionSimple ?? {};
   const cards: object[] = [];
   for (let i = 0; i < 5; i++) {
     cards.push(cardGroupItems(withImages));
   }
   return (
-    <DDSCardSectionSimple>
-      <DDSContentSectionHeading>{heading || null}</DDSContentSectionHeading>
-      <DDSCardGroup>
+    <C4DCardSectionSimple>
+      <C4DContentSectionHeading>{heading || null}</C4DContentSectionHeading>
+      <C4DCardGroup>
         {cards}
         {withCTA ? (
-          <DDSCardGroupItem href="https://example.com" color-scheme="inverse" cta-type="local">
-            <DDSCardHeading>Top level card link</DDSCardHeading>
-            <DDSCardCTAFooter slot="footer" color-scheme="inverse"></DDSCardCTAFooter>
-          </DDSCardGroupItem>
+          <C4DCardGroupItem
+            href="https://example.com"
+            color-scheme="inverse"
+            cta-type="local">
+            <C4DCardHeading>Top level card link</C4DCardHeading>
+            <C4DCardCTAFooter
+              slot="footer"
+              color-scheme="inverse"></C4DCardCTAFooter>
+          </C4DCardGroupItem>
         ) : (
           ''
         )}
-      </DDSCardGroup>
-    </DDSCardSectionSimple>
+      </C4DCardGroup>
+    </C4DCardSectionSimple>
   );
 };
 
@@ -79,10 +89,10 @@ Default.story = {
 export default {
   title: 'Components/Card section simple',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">{story()}</div>
         </div>
       );
     },
diff --git a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts
index 5522be77cb4..099a0dbc5e4 100644
--- a/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts
+++ b/packages/web-components/src/components/card-section-simple/__stories__/card-section-simple.stories.ts
@@ -7,9 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { boolean } from '@storybook/addon-knobs';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import readme from './README.stories.mdx';
 import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--005.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -17,25 +17,25 @@ import '../index';
 
 const cardGroupItems = (withImages) => {
   return html`
-    <dds-card-group-item href="https://example.com" cta-type="local">
+    <c4d-card-group-item href="https://example.com" cta-type="local">
       ${withImages
         ? html`
-            <dds-image
+            <c4d-image
               slot="image"
               alt="Image alt text"
               default-src="${imgLg4x3}">
-            </dds-image>
+            </c4d-image>
           `
         : ''}
-      <dds-card-eyebrow>Topic</dds-card-eyebrow>
-      <dds-card-heading>Natural Language Processing.</dds-card-heading>
+      <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+      <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <dds-card-cta-footer slot="footer"></dds-card-cta-footer>
-    </dds-card-group-item>
+      <c4d-card-cta-footer slot="footer"></c4d-card-cta-footer>
+    </c4d-card-group-item>
   `;
 };
 
@@ -46,27 +46,27 @@ export const Default = (args) => {
     cards.push(cardGroupItems(withImages));
   }
   return html`
-    <dds-card-section-simple>
-      <dds-content-section-heading
-        >${ifNonNull(heading)}</dds-content-section-heading
+    <c4d-card-section-simple>
+      <c4d-content-section-heading
+        >${ifDefined(heading)}</c4d-content-section-heading
       >
-      <dds-card-group>
+      <c4d-card-group>
         ${cards}
         ${withCTA
           ? html`
-              <dds-card-group-item
+              <c4d-card-group-item
                 href="https://example.com"
                 color-scheme="inverse"
                 cta-type="local">
-                <dds-card-heading>Top level card link</dds-card-heading>
-                <dds-card-cta-footer
+                <c4d-card-heading>Top level card link</c4d-card-heading>
+                <c4d-card-cta-footer
                   slot="footer"
-                  color-scheme="inverse"></dds-card-cta-footer>
-              </dds-card-group-item>
+                  color-scheme="inverse"></c4d-card-cta-footer>
+              </c4d-card-group-item>
             `
           : ``}
-      </dds-card-group>
-    </dds-card-section-simple>
+      </c4d-card-group>
+    </c4d-card-section-simple>
   `;
 };
 
@@ -74,8 +74,8 @@ export default {
   title: 'Components/Card section simple',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">${story()}</div>
       </div>
     `,
   ],
diff --git a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts
index 338f13baa83..6ac2e7b2085 100644
--- a/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts
+++ b/packages/web-components/src/components/card-section-simple/__tests__/card-section-simple.test.ts
@@ -7,28 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../../card/card-heading';
 import '../card-section-simple';
 
 const template = (props?) => {
   const { heading, children } = props ?? {};
   return html`
-    <dds-card-section-simple heading=${ifNonNull(heading)}>
-      <dds-card-group>${children}</dds-card-group>
-    </dds-card-section-simple>
+    <c4d-card-section-simple heading=${ifDefined(heading)}>
+      <c4d-card-group>${children}</c4d-card-group>
+    </c4d-card-section-simple>
   `;
 };
 
-describe('dds-card-section-simple', function () {
+describe('c4d-card-section-simple', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-card-section-simple')
+        document.body.querySelector('c4d-card-section-simple')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -37,27 +37,27 @@ describe('dds-card-section-simple', function () {
         template({
           heading: 'heading-foo',
           cards: html`
-            <dds-card-group-item href="https://example.com">
-              <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                 et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                 Phasellus at elit sollicitudin, sodales nulla quis, consequat
                 libero.
               </p>
-              <dds-card-cta-footer slot="footer">
+              <c4d-card-cta-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-cta-footer>
-            </dds-card-group-item>
+              </c4d-card-cta-footer>
+            </c4d-card-group-item>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-card-section-simple>`
+      await Promise.resolve(); // The update cycle of `<c4d-card-section-simple>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       expect(
-        document.body.querySelector('dds-card-section-simple')
+        document.body.querySelector('c4d-card-section-simple')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/card-section-simple/card-section-simple.scss b/packages/web-components/src/components/card-section-simple/card-section-simple.scss
index 770f09829e0..309bee07bb6 100644
--- a/packages/web-components/src/components/card-section-simple/card-section-simple.scss
+++ b/packages/web-components/src/components/card-section-simple/card-section-simple.scss
@@ -5,14 +5,17 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/card-section-simple/card-section-simple';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/card-section-simple';
+@use '@carbon/ibmdotcom-styles/scss/components/layout';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-card-section-simple) {
+:host(#{$c4d-prefix}-card-section-simple) {
   display: block;
 
-  padding-top: 3rem;
-  padding-bottom: 10rem;
+  padding-top: $spacing-09;
+  padding-bottom: $spacing-13;
 
   .#{$prefix}--content-section__children {
     padding-left: 0;
diff --git a/packages/web-components/src/components/card-section-simple/card-section-simple.ts b/packages/web-components/src/components/card-section-simple/card-section-simple.ts
index 010860067af..12d59122e94 100644
--- a/packages/web-components/src/components/card-section-simple/card-section-simple.ts
+++ b/packages/web-components/src/components/card-section-simple/card-section-simple.ts
@@ -7,28 +7,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-
 import styles from './card-section-simple.scss';
-import DDSContentSection from '../content-section/content-section';
+import C4DContentSection from '../content-section/content-section';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The Card Section Simple pattern
  *
- * @element dds-card-section-simple
+ * @element c4d-card-section-simple
  */
-@customElement(`${ddsPrefix}-card-section-simple`)
-class DDSCardSectionSimple extends StableSelectorMixin(DDSContentSection) {
+@customElement(`${c4dPrefix}-card-section-simple`)
+class C4DCardSectionSimple extends StableSelectorMixin(C4DContentSection) {
   static get stableSelector() {
-    return `${ddsPrefix}--card-section-simple`;
+    return `${c4dPrefix}--card-section-simple`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  'The card-section-simple component has been deprecated in favor of the content-section/block component combined with card-group. ' +
+    'See content-section/block and card group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardSectionSimple;
+export default C4DCardSectionSimple;
diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx
index 1d698b559d2..d50050be92b 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
@@ -26,11 +31,10 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
 ### HTML
 
 ```html
-<dds-card href="https://example.com">
-  <dds-card-eyebrow>Eyebrow text</dds-card-eyebrow>
-  <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-  <dds-card-footer slot="footer">
-    Card CTA text
+<c4d-card href="https://example.com">
+  <c4d-card-eyebrow>Eyebrow text</c4d-card-eyebrow>
+  <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+  <c4d-card-footer slot="footer">
     <svg
       slot="icon"
       focusable="false"
@@ -40,23 +44,27 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-card-footer>
-</dds-card>
+  </c4d-card-footer>
+</c4d-card>
 ```
 
 ## Card with pictogram
 
-You can browse the [Carbon Pictogram library](https://www.carbondesignsystem.com/guidelines/pictograms/library/) to find a pictogram that fits your design.
-You can also check out the repo [here](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms)
+You can browse the
+[Carbon Pictogram library](https://www.carbondesignsystem.com/guidelines/pictograms/library/)
+to find a pictogram that fits your design. You can also check out the repo
+[here](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms)
 
 ```html
-<dds-card pictogram-placement="${pictogramPlacement}" href="https://example.com">
-  <dds-card-eyebrow>Eyebrow text</dds-card-eyebrow>
-  <dds-card-heading>Lorem ipsum dolor</dds-card-heading>
+<c4d-card
+  pictogram-placement="${pictogramPlacement}"
+  href="https://example.com">
+  <c4d-card-eyebrow>Eyebrow text</c4d-card-eyebrow>
+  <c4d-card-heading>Lorem ipsum dolor</c4d-card-heading>
   <p>Copy to be shown on hover if the pictogram placement is bottom</p>
   <svg
     slot="pictogram"
@@ -64,45 +72,40 @@ You can also check out the repo [here](https://github.com/carbon-design-system/c
     preserveAspectRatio="xMidYMid meet"
     xmlns="http://www.w3.org/2000/svg"
     stroke="currentColor"
-    data-autoid="dds--card__pictogram"
+    data-autoid="c4d--card__pictogram"
     aria-label="Pictogram description"
     width="48"
     height="48"
     viewBox="0 0 48 48"
     role="img"
-    class="bx--card__pictogram"
-  >
+    class="c4d--card__pictogram">
     <path
       fill="none"
       stroke-linejoin="round"
       stroke-miterlimit="10"
       stroke-width=".72"
-      d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
-    ></path>
+      d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"></path>
   </svg>
-</dds-card>
+</c4d-card>
 ```
 
 ## Card - static
 
-When there is no URL being passed to the `DDSCard`'s href attribute, the static variation will be rendered,
-where the card is no longer clickable and optional `Tag` elements can also be added.
+When there is no URL being passed to the `C4DCard`'s href attribute, the static
+variation will be rendered, where the card is no longer clickable and optional
+`Tag` elements can also be added.
 
 ```html
-<dds-card>
-  <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
+<c4d-card>
+  <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
   ${copy ? html`
   <p>${copy}</p>
   ` : ``}
-  <dds-tag-group>
-    <bx-tag>
-      Most popular
-    </bx-tag>
-    <bx-tag type="purple">
-      Enterprise
-    </bx-tag>
-  </dds-tag-group>
-  <dds-card-footer href="https://example.com" icon-placement="right">
+  <div>
+    <cds-tag> Most popular </cds-tag>
+    <cds-tag type="purple"> Enterprise </cds-tag>
+  </div>
+  <c4d-card-footer href="https://example.com" icon-placement="right">
     Card CTA text
     <svg
       slot="icon"
@@ -113,38 +116,45 @@ where the card is no longer clickable and optional `Tag` elements can also be ad
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-card-footer>
-</dds-card>
+  </c4d-card-footer>
+</c4d-card>
+```
+
+## Card - link
+
+```html
+<c4d-card link href="https://example.com">
+  <c4d-card-heading>Card link heading</c4d-card-heaing>
+  <c4d-card-footer></c4d-card-footer>
+</c4d-card>
 ```
 
 ## Card - logo
 
-If you need to use a Logo image for the Card component, use the Logo variant to ensure the Card
-properly accomodates to the Logo image.
+If you need to use a Logo image for the Card component, use the Logo variant to
+ensure the Card properly accomodates to the Logo image.
 
 ```html
-<dds-card border logo href="https://example.com">
-  <dds-image-logo
+<c4d-card logo href="https://example.com">
+  <c4d-image-logo
     slot="image"
     alt="Image logo alt text"
-    default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"
-  ></dds-image-logo>
-  <dds-card-eyebrow>Microsoft</dds-card-eyebrow>
-  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
-  <dds-tag-group>
-    <bx-tag>
-      Most popular
-    </bx-tag>
-    <bx-tag type="purple">
-      Enterprise
-    </bx-tag>
-  </dds-tag-group>
-  <dds-card-footer href="https://example.com"></dds-card-footer>
-</dds-card>
+    default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"></c4d-image-logo>
+  <c4d-card-eyebrow>Microsoft</c4d-card-eyebrow>
+  <p>
+    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
+    aliquip ex ea commodo consequat.
+  </p>
+  <div>
+    <cds-tag> Most popular </cds-tag>
+    <cds-tag type="purple"> Enterprise </cds-tag>
+  </div>
+  <c4d-card-footer href="https://example.com"></c4d-card-footer>
+</c4d-card>
 ```
 
 ## Light theme
@@ -152,30 +162,38 @@ properly accomodates to the Logo image.
 An optional light theme is available under `color-scheme`.
 
 ```html
-<dds-card color-scheme="light"></dds-card>
+<c4d-card color-scheme="light"></c4d-card>
+```
+
+## Tags
+
+If using tags within `dds-card` in tandem with the dark themes, make sure the
+proper styles are imported from `@carbon/styles` in your application.
+
+```
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
 ## Card with image
 
-To add image to the `dds-card`, import the `image` component and place `dds-image` within `dds-card`:
+To add image to the `c4d-card`, import the `image` component and place
+`c4d-image` within `c4d-card`:
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
 ```
 
 ```html
-<dds-card>
-  <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-  <dds-image slot="image" alt="alt text" default-src="../image.png"></dds-image>
-  <dds-tag-group>
-    <bx-tag>
-      Most popular
-    </bx-tag>
-    <bx-tag type="purple">
-      Enterprise
-    </bx-tag>
-  </dds-tag-group>
-  <dds-card-footer href="https://example.com" icon-placement="right">
+<c4d-card>
+  <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+  <c4d-image slot="image" alt="alt text" default-src="../image.png"></c4d-image>
+  <div>
+    <cds-tag> Most popular </cds-tag>
+    <cds-tag type="purple"> Enterprise </cds-tag>
+  </div>
+  <c4d-card-footer href="https://example.com" icon-placement="right">
     Card CTA text
     <svg
       slot="icon"
@@ -186,24 +204,61 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-card-footer>
-</dds-card>
+  </c4d-card-footer>
+</c4d-card>
 ```
 
+### CTA features
+
+The `cta-type` attribute allows every type of CTA and icon available in the
+Carbon for IBM.com library. The default CTA style is `local`, which provides a
+basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the
+following:
+
+- local
+- jump
+- external
+- new tab
+- download
+- video
+- pdf
+- blog
+- email
+- schedule
+- chat
+- call
+
+Notes for `video`:
+
+- You need to pass the video ID as the `href` attribute.
+- The Card component will need to be wrapped within a `c4d-video-cta-container`
+  components for videos to play.
+- If left empty, the `c4d-card-footer` can display the video duration. If not,
+  it will be overridden with custom text.
+
+General note:
+
+- Custom icons can replace the built-in ones within `c4d-card-footer`, they only
+  need to be assigned to the `icon` slot.
+
 ## Props
 
-<Props of="dds-card" />
+<Props of="c4d-card" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector    | Description |
 | ----------------------- | ------------------------- | ----------- |
-| `<dds-card>`            | `data-autoid="dds--card"` | Component   |
+| `<c4d-card>`            | `data-autoid="c4d--card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
index ea237c47e9c..db01e0e26a5 100644
--- a/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/card/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 
@@ -18,110 +23,130 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 
 function App() {
   return (
-    <DDSCard href="https://example.com">
-      <DDSCardEyebrow>Eyebrow text</DDSCardEyebrow>
-      <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
-      <DDSCardFooter>
-        Card CTA text
+    <C4DCard href="https://example.com">
+      <C4DCardEyebrow>Eyebrow text</C4DCardEyebrow>
+      <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
+      <C4DCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+      </C4DCardFooter>
+    </C4DCard>
   );
 }
 ```
 
 ## Card with pictogram
 
-You can browse the [Carbon Pictogram library](https://www.carbondesignsystem.com/guidelines/pictograms/library/) to find a pictogram that fits your design.
-You can also check out the repo [here](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms)
+You can browse the
+[Carbon Pictogram library](https://www.carbondesignsystem.com/guidelines/pictograms/library/)
+to find a pictogram that fits your design. You can also check out the repo
+[here](https://github.com/carbon-design-system/carbon/tree/main/packages/pictograms)
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 import Desktop from '@carbon/pictograms-react/lib/desktop/index.js';
 
 function App() {
   return (
-    <DDSCard pictogramPlacement="top" href="https://example.com">
-      <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
+    <C4DCard pictogramPlacement="top" href="https://example.com">
+      <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
       <p>copy text</p>
       <Desktop slot="pictogram" />
-    </DDSCard>
+    </C4DCard>
   );
 }
 ```
 
 ## Card - static
 
-When there is no URL being passed to the `DDSCard`'s href attribute, the static variation will be rendered,
-where the card is no longer clickable and optional `Tag` elements can also be added.
+When there is no URL being passed to the `C4DCard`'s href attribute, the static
+variation will be rendered, where the card is no longer clickable and optional
+`Tag` elements can also be added.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import { Tag } from 'carbon-components-react';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import { Tag } from '@carbon/react';
 
 function App() {
   return (
-    <DDSCard colorScheme="light" border>
-      <DDSCardEyebrow>Eyebrow text</DDSCardEyebrow>
-      <DDSCardHeading>Heading text</DDSCardHeading>
-      <DDSTagGroup>
+    <C4DCard colorScheme="light" border>
+      <C4DCardEyebrow>Eyebrow text</C4DCardEyebrow>
+      <C4DCardHeading>Heading text</C4DCardHeading>
+      <div>
         <Tag>Most popular</Tag>
         <Tag type="purple">Enterprise</Tag>
-      </DDSTagGroup>
-      <DDSCardFooter href="https://example.com">
+      </div>
+      <C4DCardFooter href="https://example.com">
         Card CTA text
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+      </C4DCardFooter>
+    </C4DCard>
+  );
+}
+```
+
+## Card - link
+
+```javascript
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+
+function App() {
+  return (
+    <C4DCard link href={href || undefined}>
+      <C4DCardHeading>Card link heading </C4DCardHeading>
+      <C4DCardFooter></C4DCardFooter>
+    </C4DCard>
   );
 }
 ```
 
 ## Card - logo
 
-If you need to use a Logo image for the Card component, use the Logo variant to ensure the Card
-properly accomodates to the Logo image.
+If you need to use a Logo image for the Card component, use the Logo variant to
+ensure the Card properly accomodates to the Logo image.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import { Tag } from 'carbon-components-react';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import { Tag } from '@carbon/react';
 
 function App() {
   return (
-    <DDSCard border logo href={href || undefined}>
-      <DDSImageLogo slot="image" alt={alt} default-src={defaultSrc}></DDSImageLogo>
-      {eyebrow ? <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow> : ''}
-      {heading ? <DDSCardHeading>{heading}</DDSCardHeading> : ''}
+    <C4DCard border logo href={href || undefined}>
+      <C4DImageLogo
+        slot="image"
+        alt={alt}
+        default-src={defaultSrc}></C4DImageLogo>
+      {eyebrow ? <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow> : ''}
+      {heading ? <C4DCardHeading>{heading}</C4DCardHeading> : ''}
       {copy ? <p>{copy}</p> : ``}
       {tagGroup ? (
-        <DDSTagGroup>
+        <div>
           <Tag>Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
-        </DDSTagGroup>
+        </div>
       ) : (
         ''
       )}
-      <DDSCardFooter></DDSCardFooter>
-    </DDSCard>
+      <C4DCardFooter></C4DCardFooter>
+    </C4DCard>
   );
 }
 ```
@@ -131,38 +156,49 @@ function App() {
 An optional light theme is available under `color-scheme`.
 
 ```javascript
-<DDSCard colorScheme='light'>
+<C4DCard colorScheme='light'>
+```
+
+## Tags
+
+If using tags within `dds-card` in tandem with the dark themes, make sure the
+proper styles are imported from `@carbon/styles` in your application.
+
+```
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include add-component-tokens(tag-tokens.$tag-tokens);
 ```
 
 ## Card with image
 
-To add image to the `DDSCard`, import the `DDSImage` component and place `DDSImage` within `DDSCard`:
+To add image to the `C4DCard`, import the `C4DImage` component and place
+`C4DImage` within `C4DCard`:
 
 ```javascript
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import { Tag } from 'carbon-components-react';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import { Tag } from '@carbon/react';
 
 function App() {
   return (
-    <DDSCard colorScheme="light">
-      <DDSImage slot="image" alt="alt text" defaultSrc="../image.png" />
-      <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-      <DDSCardHeading>{heading}</DDSCardHeading>
-      <DDSTagGroup>
+    <C4DCard colorScheme="light">
+      <C4DImage slot="image" alt="alt text" defaultSrc="../image.png" />
+      <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+      <C4DCardHeading>{heading}</C4DCardHeading>
+      <div>
         <Tag>Most popular</Tag>
         <Tag type="purple">Enterprise</Tag>
-      </DDSTagGroup>
-      <DDSCardFooter href="https://www.example.com">
+      </div>
+      <C4DCardFooter href="https://www.example.com">
         Sign up for the trial
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+      </C4DCardFooter>
+    </C4DCard>
   );
 }
 ```
@@ -173,11 +209,13 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<dds-card>`            | `data-autoid="dds--card"`         | Component   |
-| `<dds-card-eyebrow>`    | `data-autoid="dds--card-eyebrow"` | Component   |
-| `<dds-card-heading>`    | `data-autoid="dds--card-heading"` | Component   |
-| `<dds-card-footer>`     | `data-autoid="dds--card-footer"`  | Component   |
+| `<c4d-card>`            | `data-autoid="c4d--card"`         | Component   |
+| `<c4d-card-eyebrow>`    | `data-autoid="c4d--card-eyebrow"` | Component   |
+| `<c4d-card-heading>`    | `data-autoid="c4d--card-heading"` | Component   |
+| `<c4d-card-footer>`     | `data-autoid="c4d--card-footer"`  | Component   |
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
index 8093859dff4..e7271de0231 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
+++ b/packages/web-components/src/components/card/__stories__/card.stories.react.tsx
@@ -13,22 +13,35 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import Desktop from '@carbon/pictograms-react/lib/desktop/index.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/card/image-logo';
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import { Tag } from 'carbon-components-react';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/card/image-logo';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+
+import Tag from '@carbon/web-components/es/components-react/tag/tag.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.react.mdx';
 import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
 import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png';
 import { PICTOGRAM_PLACEMENT } from '../defs';
 
+import { CTA_TYPE } from '../../cta/defs';
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
+
 export const Default = (args) => {
   const {
+    aspectRatio,
+    ctaType,
+    disabled,
+    noPoster,
     image,
     href,
     alt,
@@ -37,68 +50,118 @@ export const Default = (args) => {
     eyebrow,
     tagGroup,
     copy,
-    footer,
     cardStyles,
+    customVideoTitle,
   } = args?.Card ?? {};
+  /* eslint-disable no-nested-ternary */
+
+  let videoCopy;
+  let videoFooterCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const card = document.querySelector('c4d-card') as any;
+    const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = card?.videoTitle;
+    } else {
+      videoCopy = customVideoTitle;
+    }
+
+    videoFooterCopy = duration;
+  }
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return (
-    /* eslint-disable no-nested-ternary */
-    <DDSCard
-      colorScheme={
-        cardStyles === 'Inverse card'
-          ? 'inverse'
-          : cardStyles === 'Outlined card'
-          ? 'light'
-          : ''
-      }
-      href={href || undefined}
-      border={cardStyles === 'Outlined card'}>
-      {image ? (
-        <DDSImage
-          slot="image"
-          alt={alt || undefined}
-          defaultSrc={defaultSrc || undefined}
-        />
-      ) : (
-        ''
-      )}
-      <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-      <DDSCardHeading>{heading}</DDSCardHeading>
-      {copy ? <p>{copy}</p> : ''}
-      {tagGroup ? (
-        <DDSTagGroup>
+    <C4DVideoCTAContainer>
+      <C4DCard
+        disabled={disabled || undefined}
+        aspect-ratio={aspectRatio}
+        no-poster={noPoster || undefined}
+        cta-type={ctaType}
+        color-scheme={cardStyles === 'Inverse card' ? 'inverse' : ''}
+        href={href || undefined}>
+        {image
+          ?
+            <C4DImage
+                slot="image"
+                alt={alt || undefined}
+                default-src={defaultSrc || undefined}></C4DImage>
+          : ``}
+        <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+        <C4DCardHeading>{videoCopy ?? heading}</C4DCardHeading>
+        {copy ? <p></p> : ``}
+        {tagGroup ? (
+        <div>
           <Tag type="green">Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
-        </DDSTagGroup>
+        </div>
       ) : (
         ''
       )}
-      <DDSCardFooter>
-        {footer}
-        <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+        {ctaType === CTA_TYPE.VIDEO
+          ? <C4DCardFooter> {videoFooterCopy} </C4DCardFooter>
+          : <C4DCardFooter></C4DCardFooter>}
+      </C4DCard>
+    </C4DVideoCTAContainer>
   );
 };
 
 Default.story = {
   parameters: {
+    ...readme.parameters,
     knobs: {
-      Card: () => ({
-        image: boolean('Add image:', false),
-        eyebrow: textNullable('Eyebrow:', 'Industry'),
-        heading: textNullable('Heading:', 'Aerospace and defence'),
-        copy: textNullable('Body copy:', ''),
-        alt: 'Image alt text',
-        defaultSrc: imgXlg4x3,
-        tagGroup: boolean('Add tags:', false),
-        href: 'https://example.com',
-        footer: textNullable('CTA:', 'Learn more'),
-        cardStyles: select(
-          'Card style:',
-          ['Outlined card', 'Inverse card', 'none'],
-          'none'
-        ),
-      }),
+      Card: () => {
+        const aspectRatio = select(
+          'Aspect ratio (aspect-ratio)',
+          ['1:1', '2:1', '3:2', '4:3', '16:9', '1:1'],
+          '2:1'
+        );
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Heading:', 'Aerospace and defence');
+
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+
+        const image =
+          ctaType === CTA_TYPE.VIDEO ? null : boolean('Add image:', false);
+        const noPoster =
+          ctaType === CTA_TYPE.VIDEO ? boolean('No poster:', false) : null;
+
+        return {
+          disabled: boolean('Disabled:', false),
+          aspectRatio,
+          customVideoTitle,
+          ctaType,
+          image,
+          noPoster,
+          eyebrow: textNullable('Eyebrow:', 'Industry'),
+          heading,
+          copy: textNullable('Body copy:', ''),
+          alt: 'Image alt text',
+          defaultSrc: imgXlg4x3,
+          tagGroup: boolean('Add tags:', false),
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+          cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
+        };
+      },
     },
   },
 };
@@ -112,29 +175,22 @@ export const Pictogram = (args) => {
   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
     args?.PictogramCard ?? {};
   return (
-    <DDSCard
+    <C4DCard
       pictogramPlacement={pictogramPlacement}
       href={href || undefined}
-      colorScheme={
-        cardStyles === 'Inverse card'
-          ? 'inverse'
-          : cardStyles === 'Outlined card'
-          ? 'light'
-          : ''
-      }
-      border={cardStyles === 'Outlined card'}>
-      <DDSCardHeading>{heading}</DDSCardHeading>
+      colorScheme={cardStyles === 'Inverse card' ? 'inverse' : ''}>
+      <C4DCardHeading>{heading}</C4DCardHeading>
       {copy ? <p>{copy}</p> : ''}
       {tagGroup ? (
-        <DDSTagGroup>
+        <div>
           <Tag>Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
-        </DDSTagGroup>
+        </div>
       ) : (
         ''
       )}
       <Desktop slot="pictogram" width="48" height="48" />
-    </DDSCard>
+    </C4DCard>
   );
 };
 
@@ -145,7 +201,7 @@ Pictogram.story = {
         const pictogramPlacement = select(
           'Pictogram position:',
           pictogramPlacements,
-          pictogramPlacements.top
+          pictogramPlacements.bottom
         );
         const copy = textNullable(
           'Body copy:',
@@ -156,11 +212,7 @@ Pictogram.story = {
           heading: textNullable('Heading:', 'Aerospace and defence'),
           copy,
           href: 'https://example.com',
-          cardStyles: select(
-            'Card style:',
-            ['Outlined card', 'Inverse card', 'none'],
-            'none'
-          ),
+          cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
         };
       },
     },
@@ -168,48 +220,37 @@ Pictogram.story = {
 };
 
 export const Static = (args) => {
-  const {
-    image,
-    alt,
-    defaultSrc,
-    outlinedCard,
-    eyebrow,
-    heading,
-    copy,
-    tagGroup,
-    cta,
-  } = args?.StaticCard ?? {};
+  const { image, alt, defaultSrc, eyebrow, heading, copy, tagGroup, cta } =
+    args?.StaticCard ?? {};
   return (
-    <DDSCard colorScheme={outlinedCard ? 'light' : ''} border={outlinedCard}>
-      {image ? (
-        <DDSImage
-          slot="image"
-          alt={alt || undefined}
-          defaultSrc={defaultSrc || undefined}
-        />
-      ) : (
-        ''
-      )}
-      <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-      <DDSCardHeading>{heading}</DDSCardHeading>
+    <C4DCard>
+      {image
+          ?
+            <C4DImage
+                slot="image"
+                alt={alt || undefined}
+                default-src={defaultSrc || undefined}></C4DImage>
+          : ``}
+      <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+      <C4DCardHeading>{heading}</C4DCardHeading>
       {copy ? <p>{copy}</p> : ''}
       {tagGroup ? (
-        <DDSTagGroup>
+        <div>
           <Tag type="green">Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
-        </DDSTagGroup>
+        </div>
       ) : (
         ''
       )}
       {cta ? (
-        <DDSCardFooter href="https://www.example.com">
+        <C4DCardFooter href="https://www.example.com">
           Sign up for the trial
           <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
+        </C4DCardFooter>
       ) : (
         ''
       )}
-    </DDSCard>
+    </C4DCard>
   );
 };
 
@@ -231,7 +272,6 @@ Static.story = {
         const ctaCopy = cta
           ? textNullable('CTA copy:', 'Sign up for the trial')
           : '';
-        const outlinedCard = boolean('Outlined card:', true);
         return {
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
@@ -242,7 +282,6 @@ Static.story = {
           tagGroup,
           cta,
           ctaCopy,
-          outlinedCard,
         };
       },
     },
@@ -253,27 +292,106 @@ export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
   return (
-    <DDSCard border logo href={href || undefined}>
-      <DDSImageLogo
+    <C4DCard logo href={href || undefined}>
+      <C4DImageLogo
         slot="image"
         alt={alt}
-        default-src={defaultSrc}></DDSImageLogo>
-      {eyebrow ? <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow> : ''}
-      {heading ? <DDSCardHeading>{heading}</DDSCardHeading> : ''}
+        default-src={defaultSrc}></C4DImageLogo>
+      {eyebrow ? <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow> : ''}
+      {heading ? <C4DCardHeading>{heading}</C4DCardHeading> : ''}
       {copy ? <p>{copy}</p> : ``}
       {tagGroup ? (
-        <DDSTagGroup>
+        <div>
           <Tag type="green">Most popular</Tag>
           <Tag type="purple">Enterprise</Tag>
-        </DDSTagGroup>
+        </div>
       ) : (
         ''
       )}
-      <DDSCardFooter></DDSCardFooter>
-    </DDSCard>
+      <C4DCardFooter></C4DCardFooter>
+    </C4DCard>
   );
 };
 
+export const Link = (args) => {
+  const { disabled, ctaType, href, heading, copy, customVideoTitle } =
+    args?.Card ?? {};
+
+  let videoCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const card = document.querySelector('c4d-card') as any;
+    const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = card?.videoTitle;
+    } else {
+      videoCopy = customVideoTitle;
+    }
+    
+    card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
+  }
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
+  return (
+    <C4DVideoCTAContainer>
+      <C4DCard
+        disabled={disabled || undefined}
+        link
+        no-poster={ctaType === CTA_TYPE.VIDEO}
+        cta-type={ctaType}
+        href={href || undefined}>
+        <C4DCardHeading>{videoCopy ?? heading}</C4DCardHeading>
+        {copy ? <p></p> : ``}
+        <C4DCardFooter></C4DCardFooter>
+      </C4DCard>
+    </C4DVideoCTAContainer>
+  );
+};
+
+Link.story = {
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      Card: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Heading:', 'Aerospace and defence');
+
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+
+        return {
+          disabled: boolean('Disabled: ', false),
+          customVideoTitle,
+          ctaType,
+          heading,
+          copy: textNullable('Body copy:', ''),
+          alt: 'Image alt text',
+          defaultSrc: imgXlg4x3,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
+    },
+  },
+};
+
 Logo.story = {
   parameters: {
     ...readme.parameters,
@@ -298,9 +416,9 @@ export default {
   title: 'Components/Card',
   decorators: [
     (story) => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-sm-4 cds--col-md-3 cds--col-lg-6 cds--col-xlg-4 cds--no-gutter">
             {story()}
           </div>
         </div>
diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index 459b9cc417b..11413a12617 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -8,28 +8,41 @@
  */
 
 import '../../image/image';
-import '../../tag-group/tag-group';
 import '../../../internal/vendor/@carbon/web-components/components/tag/tag.js';
 import '../index';
 import { boolean, select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import imgXlg4x3 from '../../../../../storybook-images/assets/1312/fpo--4x3--1312x984--003.jpg';
 import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png';
 import { PICTOGRAM_PLACEMENT } from '../defs';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
+import { CTA_TYPE } from '../../cta/defs';
+
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
+
 const tagGroupContent = html`
-  <dds-tag-group>
-    <bx-tag type="green"> Most popular </bx-tag>
-    <bx-tag type="purple"> Enterprise </bx-tag>
-  </dds-tag-group>
+  <div>
+    <cds-tag type="green"> Most popular </cds-tag
+    ><cds-tag type="purple"> Enterprise </cds-tag>
+    <div></div>
+  </div>
 `;
 
 export const Default = (args) => {
   const {
+    aspectRatio,
+    ctaType,
+    disabled,
+    noPoster,
     image,
     href,
     alt,
@@ -38,35 +51,58 @@ export const Default = (args) => {
     eyebrow,
     tagGroup,
     copy,
-    footer,
     cardStyles,
+    customVideoTitle,
   } = args?.Card ?? {};
   /* eslint-disable no-nested-ternary */
+
+  let videoCopy;
+  let videoFooterCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const card = document.querySelector('c4d-card') as any;
+    const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = card?.videoTitle;
+    } else {
+      videoCopy = customVideoTitle;
+    }
+
+    videoFooterCopy = duration;
+  }
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
-    <dds-card
-      color-scheme=${cardStyles === 'Inverse card'
-        ? 'inverse'
-        : cardStyles === 'Outlined card'
-        ? 'light'
-        : ''}
-      ?border=${cardStyles === 'Outlined card'}
-      href=${ifNonNull(href || undefined)}>
-      ${image
-        ? html`
-            <dds-image
-              slot="image"
-              alt="${ifNonNull(alt)}"
-              default-src="${ifNonNull(defaultSrc)}"></dds-image>
-          `
-        : ``}
-      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
-      <dds-card-heading>${heading}</dds-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
-      ${tagGroup ? html` ${tagGroupContent} ` : ``}
-      <dds-card-footer>
-        ${footer}${ArrowRight20({ slot: 'icon' })}
-      </dds-card-footer>
-    </dds-card>
+    <c4d-video-cta-container>
+      <c4d-card
+        ?disabled=${disabled}
+        aspect-ratio=${aspectRatio}
+        ?no-poster=${noPoster}
+        cta-type=${ctaType}
+        color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}
+        href=${ifDefined(href || undefined)}>
+        ${image
+          ? html`
+              <c4d-image
+                slot="image"
+                alt="${ifDefined(alt)}"
+                default-src="${ifDefined(defaultSrc)}"></c4d-image>
+            `
+          : ``}
+        <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+        <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
+        ${copy ? html`<p></p>` : ``}
+        ${tagGroup ? html` ${tagGroupContent} ` : ``}
+        ${ctaType === CTA_TYPE.VIDEO
+          ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `
+          : html`<c4d-card-footer></c4d-card-footer>`}
+      </c4d-card>
+    </c4d-video-cta-container>
   `;
 };
 
@@ -79,23 +115,53 @@ Default.story = {
   parameters: {
     ...readme.parameters,
     knobs: {
-      Card: () => ({
-        image: boolean('Add image:', false, 'Default'),
-        eyebrow: textNullable('Eyebrow:', 'Industry', 'Default'),
-        heading: textNullable('Heading:', 'Aerospace and defence', 'Default'),
-        copy: textNullable('Body copy:', '', 'Default'),
-        alt: 'Image alt text',
-        defaultSrc: imgXlg4x3,
-        tagGroup: boolean('Add tags:', false, 'Default'),
-        href: 'https://example.com',
-        footer: textNullable('CTA:', 'Learn more', 'Default'),
-        cardStyles: select(
-          'Card style:',
-          ['Outlined card', 'Inverse card', 'none'],
-          'none',
-          'Default'
-        ),
-      }),
+      Card: () => {
+        const aspectRatio = select(
+          'Aspect ratio (aspect-ratio)',
+          ['1:1', '2:1', '3:2', '4:3', '16:9', '1:1'],
+          '2:1'
+        );
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Heading:', 'Aerospace and defence');
+
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+
+        const image =
+          ctaType === CTA_TYPE.VIDEO ? null : boolean('Add image:', false);
+        const noPoster =
+          ctaType === CTA_TYPE.VIDEO ? boolean('No poster:', false) : null;
+
+        return {
+          disabled: boolean('Disabled:', false),
+          aspectRatio,
+          customVideoTitle,
+          ctaType,
+          image,
+          noPoster,
+          eyebrow: textNullable('Eyebrow:', 'Industry'),
+          heading,
+          copy: textNullable('Body copy:', ''),
+          alt: 'Image alt text',
+          defaultSrc: imgXlg4x3,
+          tagGroup: boolean('Add tags:', false),
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+          cardStyles: select('Card style:', ['Inverse card', 'none'], 'none'),
+        };
+      },
     },
     propsSet: {
       default: {
@@ -108,7 +174,6 @@ Default.story = {
           defaultSrc: imgXlg4x3,
           tagGroup: false,
           href: 'https://example.com',
-          footer: 'Learn more',
           cardStyles: 'none',
         },
       },
@@ -119,31 +184,31 @@ Default.story = {
 export const Pictogram = (args) => {
   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
     args?.PictogramCard ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
   return html`
-    <dds-card
+    <c4d-card
       pictogram-placement="${pictogramPlacement}"
-      href=${ifNonNull(href || undefined)}
-      color-scheme=${cardStyles === 'Inverse card'
-        ? 'inverse'
-        : cardStyles === 'Outlined card'
-        ? 'light'
-        : ''}
-      ?border=${cardStyles === 'Outlined card'}>
-      <dds-card-heading>${heading}</dds-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      href=${ifDefined(href || undefined)}
+      color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <svg
         slot="pictogram"
         focusable="false"
         preserveAspectRatio="xMidYMid meet"
         xmlns="http://www.w3.org/2000/svg"
-        data-autoid="dds--card__pictogram"
+        data-autoid="c4d--card__pictogram"
         aria-label="Pictogram description"
         width="48"
         height="48"
         viewBox="0 0 32 32"
         role="img"
-        class="bx--card__pictogram">
+        class="cds--card__pictogram">
         <path
           id="desktop_1_"
           d="M23,29.36H9v-0.72h6.64v-4.28H3c-1.301,0-2.36-1.059-2.36-2.36V5c0-1.301,1.059-2.36,2.36-2.36h26
@@ -151,7 +216,7 @@ export const Pictogram = (args) => {
           0.904,0.736,1.64,1.64,1.64h26c0.904,0,1.64-0.735,1.64-1.64v-2.64H1.36z M1.36,
           18.64h29.28V5c0-0.904-0.735-1.64-1.64-1.64H3C2.096,3.36,1.36,4.096,1.36,5V18.64z" />
       </svg>
-    </dds-card>
+    </c4d-card>
   `;
 };
 
@@ -163,7 +228,7 @@ Pictogram.story = {
         const pictogramPlacement = select(
           'Pictogram position:',
           pictogramPlacements,
-          pictogramPlacements.top,
+          pictogramPlacements.bottom,
           'pictogram'
         );
         const copy = textNullable(
@@ -183,7 +248,7 @@ Pictogram.story = {
           href: 'https://example.com',
           cardStyles: select(
             'Card style:',
-            ['Outlined card', 'Inverse card', 'none'],
+            ['Inverse card', 'none'],
             'none',
             'pictogram'
           ),
@@ -210,7 +275,6 @@ export const Static = (args) => {
     image,
     alt,
     defaultSrc,
-    outlinedCard,
     eyebrow,
     heading,
     copy,
@@ -218,30 +282,34 @@ export const Static = (args) => {
     cta,
     ctaCopy,
   } = args?.Card ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
-    <dds-card
-      color-scheme=${outlinedCard ? 'light' : ''}
-      ?border=${outlinedCard}>
+    <c4d-card>
       ${image
         ? html`
-            <dds-image
+            <c4d-image
               slot="image"
-              alt="${ifNonNull(alt)}"
-              default-src="${ifNonNull(defaultSrc)}"></dds-image>
+              alt="${ifDefined(alt)}"
+              default-src="${ifDefined(defaultSrc)}"></c4d-image>
           `
         : ``}
-      ${eyebrow ? html` <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow> ` : ``}
-      <dds-card-heading>${heading}</dds-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       ${cta
         ? html`
-            <dds-card-footer href="https://www.example.com">
+            <c4d-card-footer href="https://www.example.com">
               ${ctaCopy}${ArrowRight20({ slot: 'icon' })}
-            </dds-card-footer>
+            </c4d-card-footer>
           `
         : ``}
-    </dds-card>
+    </c4d-card>
   `;
 };
 
@@ -264,7 +332,6 @@ Static.story = {
         const ctaCopy = cta
           ? textNullable('CTA copy:', 'Sign up for the trial', 'static')
           : '';
-        const outlinedCard = boolean('Outlined card:', true, 'static');
         return {
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
@@ -275,7 +342,6 @@ Static.story = {
           tagGroup,
           cta,
           ctaCopy,
-          outlinedCard,
         };
       },
     },
@@ -291,29 +357,113 @@ Static.story = {
           tagGroup: false,
           cta: false,
           ctaCopy: 'Sign up for the trial',
-          outlinedCard: 'true',
         },
       },
     },
   },
 };
 
+export const Link = (args) => {
+  const { disabled, ctaType, href, heading, copy, customVideoTitle } =
+    args?.Card ?? {};
+
+  let videoCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const card = document.querySelector('c4d-card') as any;
+    const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+    if (!customVideoTitle) {
+      videoCopy = card?.videoTitle;
+    } else {
+      videoCopy = customVideoTitle;
+    }
+
+    card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
+  }
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
+  return html`
+    <c4d-video-cta-container>
+      <c4d-card
+        ?disabled=${disabled}
+        link
+        no-poster=${ctaType === CTA_TYPE.VIDEO}
+        cta-type=${ctaType}
+        href=${ifDefined(href || undefined)}>
+        <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
+        ${copy ? html` <p></p> ` : ``}
+        <c4d-card-footer></c4d-card-footer>
+      </c4d-card>
+    </c4d-video-cta-container>
+  `;
+};
+
+Link.story = {
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      Card: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Heading:', 'Aerospace and defence');
+
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? textNullable('Custom video title', 'Custom video title')
+            : null;
+
+        return {
+          disabled: boolean('Disabled: ', false),
+          customVideoTitle,
+          ctaType,
+          heading,
+          copy: textNullable('Body copy:', ''),
+          alt: 'Image alt text',
+          defaultSrc: imgXlg4x3,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
+    },
+  },
+};
+
 export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
-    <dds-card border logo href=${ifNonNull(href || undefined)}>
-      <dds-image-logo
+    <c4d-card logo href=${ifDefined(href || undefined)}>
+      <c4d-image-logo
         slot="image"
-        alt="${ifNonNull(alt)}"
-        default-src="${ifNonNull(defaultSrc)}"></dds-image-logo>
-      ${eyebrow ? html` <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow> ` : ``}
-      ${heading ? html` <dds-card-heading>${heading}</dds-card-heading> ` : ``}
-      ${copy ? html` <p>${copy}</p> ` : ``}
+        alt="${ifDefined(alt)}"
+        default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
+      ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
+      ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
 
-      <dds-card-footer></dds-card-footer>
-    </dds-card>
+      <c4d-card-footer></c4d-card-footer>
+    </c4d-card>
   `;
 };
 
@@ -356,10 +506,10 @@ export default {
   title: 'Components/Card',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
+      <div class="cds--grid">
+        <div class="cds--row">
           <div
-            class="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
+            class="cds--col-sm-4 cds--col-md-3 cds--col-lg-6 cds--col-xlg-4 cds--no-gutter">
             ${story()}
           </div>
         </div>
diff --git a/packages/web-components/src/components/card/__tests__/card.test.ts b/packages/web-components/src/components/card/__tests__/card.test.ts
index 53693aafd53..996ffd0ddaf 100644
--- a/packages/web-components/src/components/card/__tests__/card.test.ts
+++ b/packages/web-components/src/components/card/__tests__/card.test.ts
@@ -1,27 +1,27 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../card';
 import { Default } from '../__stories__/card.stories';
 
 const template = (props?) =>
   Default({
-    'dds-card': props,
+    'c4d-card': props,
   });
 
-describe('dds-card', function () {
+describe('c4d-card', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-card>`
-      expect(document.body.querySelector('dds-card')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-card>`
+      expect(document.body.querySelector('c4d-card')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -40,8 +40,8 @@ describe('dds-card', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-card>`
-      expect(document.body.querySelector('dds-card')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-card>`
+      expect(document.body.querySelector('c4d-card')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/card/card-eyebrow.ts b/packages/web-components/src/components/card/card-eyebrow.ts
index c3347870bee..fbcfccdba3b 100644
--- a/packages/web-components/src/components/card/card-eyebrow.ts
+++ b/packages/web-components/src/components/card/card-eyebrow.ts
@@ -6,21 +6,22 @@
  * 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 { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './card.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The eyebrow content of card.
  *
- * @element dds-card-eyebrow
+ * @element c4d-card-eyebrow
  */
-@customElement(`${ddsPrefix}-card-eyebrow`)
-class DDSCardEyebrow extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-card-eyebrow`)
+class C4DCardEyebrow extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this card eyebrow should be in.
    */
@@ -32,7 +33,7 @@ class DDSCardEyebrow extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-eyebrow`;
+    return `${c4dPrefix}--card-eyebrow`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -40,4 +41,4 @@ class DDSCardEyebrow extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardEyebrow;
+export default C4DCardEyebrow;
diff --git a/packages/web-components/src/components/card/card-footer.ts b/packages/web-components/src/components/card/card-footer.ts
index 254dd1cdc22..0a548787f9d 100644
--- a/packages/web-components/src/components/card/card-footer.ts
+++ b/packages/web-components/src/components/card/card-footer.ts
@@ -7,30 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, query, TemplateResult } from 'lit-element';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
-import DDSLinkWithIcon, {
-  ICON_PLACEMENT,
-} from '../link-with-icon/link-with-icon';
-import { BASIC_COLOR_SCHEME } from '../../globals/defs';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
+import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
+import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js';
 import styles from './card.scss';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card footer.
  *
- * @element dds-card-footer
+ * @element c4d-card-footer
  */
-@customElement(`${ddsPrefix}-card-footer`)
-class DDSCardFooter extends DDSLinkWithIcon {
+@customElement(`${c4dPrefix}-card-footer`)
+class C4DCardFooter extends C4DLinkWithIcon {
   /**
-   * The non-link container node, used when the link of parent `<dds-card>` should be used.
+   * The non-link container node, used when the link of parent `<c4d-card>` should be used.
    */
-  @query(`.${ddsPrefix}-ce--card__footer--static`)
+  @query(`.${c4dPrefix}-ce--card__footer--static`)
   private _staticNode?: HTMLSpanElement;
 
   /**
@@ -40,7 +37,7 @@ class DDSCardFooter extends DDSLinkWithIcon {
   protected _hasCopy = false;
 
   /**
-   * `true` if the link of parent `<dds-card>` should be used.
+   * `true` if the link of parent `<c4d-card>` should be used.
    */
   protected get _shouldUseParentLink() {
     const { href, parentHref } = this;
@@ -65,7 +62,7 @@ class DDSCardFooter extends DDSLinkWithIcon {
   /**
    * @returns The main content.
    */
-  protected _renderContent(): TemplateResult | string | void {
+  _renderContent() {
     const { _hasCopy: hasCopy } = this;
     return html`
       <span ?hidden="${!hasCopy}" class="${prefix}--card__cta__copy">
@@ -74,10 +71,10 @@ class DDSCardFooter extends DDSLinkWithIcon {
     `;
   }
 
-  protected _renderInner() {
-    return this.iconPlacement === ICON_PLACEMENT.LEFT
-      ? html` ${this._renderIcon()}${this._renderContent()} `
-      : html` ${this._renderContent()}${this._renderIcon()} `;
+  _renderInner() {
+    return html`
+      ${this._renderContent()} ${this.disabled ? Error20() : this._renderIcon()}
+    `;
   }
 
   /**
@@ -90,11 +87,11 @@ class DDSCardFooter extends DDSLinkWithIcon {
    * The color scheme.
    */
   @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = BASIC_COLOR_SCHEME.REGULAR;
+  colorScheme = '';
 
   /**
-   * The `href` in parent `<dds-card>`.
-   * `<dds-card>` sets this automatically.
+   * The `href` in parent `<c4d-card>`.
+   * `<c4d-card>` sets this automatically.
    */
   @property({ attribute: 'parent-href', reflect: true })
   parentHref?: string;
@@ -106,13 +103,13 @@ class DDSCardFooter extends DDSLinkWithIcon {
   iconInline = true;
 
   /**
-   * The slot in parent `<dds-card>`.
+   * The slot in parent `<c4d-card>`.
    */
   @property({ reflect: true })
   slot = 'footer';
 
-  updated() {
-    super.updated();
+  updated(changedProperties) {
+    super.updated(changedProperties);
 
     if (!this._hasCopy) {
       this.shadowRoot
@@ -125,31 +122,22 @@ class DDSCardFooter extends DDSLinkWithIcon {
       this.shadowRoot?.querySelector(`a`)?.removeAttribute('aria-label');
     }
 
-    const {
-      iconInline,
-      iconPlacement,
-      _staticNode: staticNode,
-      _linkNode: linkNode,
-    } = this;
+    const { iconInline, _staticNode: staticNode, _linkNode: linkNode } = this;
     const targetNode = linkNode ?? staticNode;
     targetNode!.classList.add(`${prefix}--card__footer`);
-    targetNode!.classList.add(`${ddsPrefix}-ce--card__footer`);
-    targetNode!.classList.toggle(
-      `${prefix}--card__footer__icon-left`,
-      iconPlacement === ICON_PLACEMENT.LEFT
-    );
+    targetNode!.classList.add(`${c4dPrefix}-ce--card__footer`);
 
-    if (iconInline && iconPlacement === ICON_PLACEMENT.RIGHT) {
+    if (iconInline) {
       targetNode!.classList.add(`${prefix}--link-with-icon--inline-icon`);
     }
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-footer`;
+    return `${c4dPrefix}--card-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardFooter;
+export default C4DCardFooter;
diff --git a/packages/web-components/src/components/card/card-heading.ts b/packages/web-components/src/components/card/card-heading.ts
index 48b268b7e41..65fd08399c8 100644
--- a/packages/web-components/src/components/card/card-heading.ts
+++ b/packages/web-components/src/components/card/card-heading.ts
@@ -6,21 +6,22 @@
  * 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 { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './card.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content of card.
  *
- * @element dds-card-heading
+ * @element c4d-card-heading
  */
-@customElement(`${ddsPrefix}-card-heading`)
-class DDSCardHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-card-heading`)
+class C4DCardHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this card heading should be in.
    */
@@ -42,7 +43,7 @@ class DDSCardHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-heading`;
+    return `${c4dPrefix}--card-heading`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -50,4 +51,4 @@ class DDSCardHeading extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardHeading;
+export default C4DCardHeading;
diff --git a/packages/web-components/src/components/card/card.scss b/packages/web-components/src/components/card/card.scss
index 5a01f0bff8e..db3301cc69e 100644
--- a/packages/web-components/src/components/card/card.scss
+++ b/packages/web-components/src/components/card/card.scss
@@ -5,42 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon';
-
-:host(#{$dds-prefix}-card-footer),
-:host(#{$dds-prefix}-card-cta-footer) {
-  align-self: flex-start;
-  max-width: 90%;
-
-  @include carbon--breakpoint('md') {
-    max-width: calc(100% - #{$layout-03});
-  }
-
-  .#{$dds-prefix}-ce--card__footer--static {
-    color: $link-01;
-  }
-
-  &[color-scheme='inverse'] .#{$dds-prefix}-ce--card__footer--static {
-    color: $inverse-link;
-  }
-
-  &[color-scheme='inverse']
-    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-    svg,
-    ::slotted(svg[slot='icon']) {
-      color: $inverse-link;
-    }
-  }
-
-  &:hover {
-    ::slotted(svg[slot='icon']),
-    .#{$prefix}--card__cta__copy {
-      color: $hover-primary-text;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-card-footer[href])::after {
-  position: relative;
-}
+@use '@carbon/ibmdotcom-styles/scss/components/card';
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index d33c8b7a626..3990eb26d7b 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -7,20 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, TemplateResult, query } from 'lit-element';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import { TemplateResult, html, LitElement } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import markdownToHtml from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/markdownToHtml/markdownToHtml.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { BASIC_COLOR_SCHEME } from '../../globals/defs';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSCardFooter from './card-footer';
+import C4DCardFooter from './card-footer';
 import styles from './card.scss';
 import { PICTOGRAM_PLACEMENT } from './defs';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+import { CTA_TYPE } from '../cta/defs';
+
+import CTAMixin from '../../component-mixins/cta/cta';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
@@ -33,14 +37,20 @@ const slotExistencePropertyNames = {
 /**
  * Card.
  *
- * @element dds-card
+ * @element c4d-card
  * @slot eyebrow - The eyebrow content.
  * @slot heading - The heading content.
  * @slot image - The image content.
  * @slot footer - The footer content.
  */
-@customElement(`${ddsPrefix}-card`)
-class DDSCard extends StableSelectorMixin(BXLink) {
+@customElement(`${c4dPrefix}-card`)
+class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
+  /**
+   * `true` if there is copy content.
+   */
+  @property({ attribute: 'cta-type' })
+  ctaType;
+
   /**
    * `true` if there is image content.
    */
@@ -59,6 +69,9 @@ class DDSCard extends StableSelectorMixin(BXLink) {
   @state()
   protected _hasPictogram = false;
 
+  @property({ attribute: 'no-poster', type: Boolean })
+  noPoster;
+
   /**
    * Handles `slotchange` event.
    */
@@ -74,7 +87,29 @@ class DDSCard extends StableSelectorMixin(BXLink) {
    */
   // eslint-disable-next-line class-methods-use-this
   protected _renderHeading(): TemplateResult | string | void {
-    return html` <slot name="heading"></slot> `;
+    const {
+      ctaType,
+      videoName,
+      formatVideoCaption: formatVideoCaptionInEffect,
+    } = this;
+    if (ctaType !== CTA_TYPE.VIDEO) {
+      return html`<slot name="heading"></slot>`;
+    }
+    const caption = formatVideoCaptionInEffect({ name: videoName });
+
+    this.dispatchEvent(
+      new CustomEvent(
+        (this.constructor as typeof C4DCard).eventVideoTitleUpdated,
+        {
+          bubbles: true,
+          composed: true,
+        }
+      )
+    );
+    return html`
+      <slot name="heading"></slot
+      ><c4d-card-heading>${caption}</c4d-card-heading>
+    `;
   }
 
   /**
@@ -89,12 +124,27 @@ class DDSCard extends StableSelectorMixin(BXLink) {
     `;
   }
 
-  /**
-   * @returns The image content.
-   */
   protected _renderImage(): TemplateResult | string | void {
+    const {
+      ctaType,
+      videoName,
+      videoThumbnailUrl,
+      _hasImage: hasImage,
+      noPoster,
+    } = this;
+
+    const image =
+      hasImage || ctaType !== CTA_TYPE.VIDEO || noPoster
+        ? undefined
+        : html`
+            <c4d-image
+              class="${prefix}--card__video-thumbnail"
+              alt="${videoName}"
+              default-src="${videoThumbnailUrl}">
+            </c4d-image>
+          `;
     return html`
-      <slot name="image" @slotchange="${this._handleSlotChange}"></slot>
+      <slot name="image" @slotchange="${this._handleSlotChange}"></slot>${image}
     `;
   }
 
@@ -112,17 +162,14 @@ class DDSCard extends StableSelectorMixin(BXLink) {
    * @returns The inner content.
    */
   protected _renderInner() {
-    const {
-      _handleSlotChange: handleSlotChange,
-      _hasPictogram: hasPictogram,
-      _hasCopy: hasCopy,
-    } = this;
+    const { _handleSlotChange: handleSlotChange, _hasPictogram: hasPictogram } =
+      this;
     return html`
       ${this._renderImage()}
       <div
         class="${prefix}--card__wrapper ${hasPictogram
           ? `${prefix}--card__pictogram`
-          : ''} ${hasPictogram && hasCopy ? `${prefix}--card__motion` : ''}">
+          : ''}">
         <div class="${prefix}--card__content">
           ${hasPictogram ? '' : html` <slot name="eyebrow"></slot> `}
           ${this.pictogramPlacement === PICTOGRAM_PLACEMENT.TOP
@@ -160,20 +207,14 @@ class DDSCard extends StableSelectorMixin(BXLink) {
     `;
   }
 
-  /**
-   * An optional 1px border surrounding the component.
-   */
-  @property({ type: Boolean, reflect: true })
-  border = false;
-
   /**
    * The color scheme.
    * A typical use case of using another color scheme of card is having a "CTA" purpose of card at the last in card group.
    *
-   * Color scheme options are: "inverse" and "light"
+   * Color scheme options are: "inverse" and "regular"
    */
   @property({ attribute: 'color-scheme', reflect: true })
-  colorScheme = BASIC_COLOR_SCHEME.REGULAR;
+  colorScheme = '';
 
   /**
    * Link `href`.
@@ -185,7 +226,13 @@ class DDSCard extends StableSelectorMixin(BXLink) {
    * Pictogram placement
    */
   @property({ attribute: 'pictogram-placement', reflect: true })
-  pictogramPlacement = '';
+  pictogramPlacement = PICTOGRAM_PLACEMENT.BOTTOM;
+
+  /**
+   * Whether or not to apply the link style.
+   */
+  @property({ type: Boolean, reflect: true })
+  link = false;
 
   /**
    * Whether or not to apply the logo style.
@@ -193,32 +240,72 @@ class DDSCard extends StableSelectorMixin(BXLink) {
   @property({ type: Boolean, reflect: true })
   logo = false;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus: false,
-    });
-  }
-
   @query('div')
-  protected _linkNode?: HTMLDivElement | HTMLParagraphElement;
+  _linkNode;
 
   updated(changedProperties) {
     super.updated(changedProperties);
-    const { colorScheme, href, _linkNode: linkNode } = this;
+    const { colorScheme, disabled, href, _linkNode: linkNode, ctaType } = this;
+
+    if (
+      changedProperties.has('ctaType') ||
+      changedProperties.has('disabled') ||
+      changedProperties.has('formatCaption') ||
+      changedProperties.has('formatDuration') ||
+      changedProperties.has('videoDuration') ||
+      changedProperties.has('videoName')
+    ) {
+      const {
+        ctaType,
+        videoDuration,
+        videoName,
+        videoDescription,
+        formatVideoCaption: formatVideoCaptionInEffect,
+        formatVideoDuration: formatVideoDurationInEffect,
+      } = this;
+      const footer = this.querySelector(`${c4dPrefix}-card-footer`);
+
+      const headingText = this.querySelector(
+        `${c4dPrefix}-card-heading`
+      )?.textContent;
+      const copyText = this.textContent;
+      if (footer) {
+        const ariaTitle = videoName || headingText || copyText;
+        let ariaDuration = '';
+        if (videoDuration !== undefined) {
+          ariaDuration = `, DURATION ${videoDuration}`;
+        }
+        (footer as C4DCardFooter).disabled = disabled;
+        (footer as C4DCardFooter).altAriaLabel = `${ariaTitle}${ariaDuration}`;
+        (footer as C4DCardFooter).ctaType = ctaType;
+        (footer as C4DCardFooter).videoDuration = videoDuration;
+        (footer as C4DCardFooter).videoName = videoName;
+        (footer as C4DCardFooter).videoDescription = videoDescription;
+        if (formatVideoCaptionInEffect) {
+          (footer as C4DCardFooter).formatVideoCaption =
+            formatVideoCaptionInEffect;
+        }
+        if (formatVideoDurationInEffect) {
+          (footer as C4DCardFooter).formatVideoDuration =
+            formatVideoDurationInEffect;
+        }
+      }
+    }
+
     if (changedProperties.has('colorScheme') || changedProperties.has('href')) {
       const headingText = this.querySelector(
-        `${ddsPrefix}-card-heading`
+        `${c4dPrefix}-card-heading`
       )?.textContent;
       const copyText = this.textContent;
       const footer = this.querySelector(
-        (this.constructor as typeof DDSCard).selectorFooter
+        (this.constructor as typeof C4DCard).selectorFooter
       );
       if (footer && href) {
-        (footer as DDSCardFooter).colorScheme = colorScheme;
-        (footer as DDSCardFooter).parentHref = href;
-        (footer as DDSCardFooter).href = href;
-        (footer as DDSCardFooter).altAriaLabel = headingText || copyText;
+        (footer as C4DCardFooter).colorScheme = colorScheme;
+        (footer as C4DCardFooter).parentHref = href;
+        (footer as C4DCardFooter).ctaType = ctaType;
+        (footer as C4DCardFooter).href = href;
+        (footer as C4DCardFooter).altAriaLabel = headingText || copyText;
       }
     }
     if (linkNode) {
@@ -230,10 +317,17 @@ class DDSCard extends StableSelectorMixin(BXLink) {
         `${prefix}--card--inverse`,
         colorScheme === BASIC_COLOR_SCHEME.INVERSE
       );
+      linkNode.classList.toggle(
+        `${prefix}--link--disabled`,
+        Boolean(this.disabled)
+      );
     }
 
     if (this._hasPictogram) {
       this.onclick = () => window.open(this.href, '_self');
+      this.setAttribute('pictogram', '');
+    } else {
+      this.removeAttribute('pictogram');
     }
 
     const copyElement = this.querySelector('p');
@@ -245,35 +339,106 @@ class DDSCard extends StableSelectorMixin(BXLink) {
     }
   }
 
+  /**
+   * Handles card with video heading and applies the set same height function.
+   *
+   * @param event The event.
+   */
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleVideoTitleUpdate = async (event) => {
+    if (event && this.ctaType === CTA_TYPE.VIDEO) {
+      const { videoDuration, videoName } = event.detail as any;
+      const { formatVideoDuration, formatVideoCaption } = this;
+      const formattedVideoDuration = formatVideoDuration({
+        duration: !videoDuration ? videoDuration : videoDuration * 1000,
+      });
+      this.videoDuration ? null : (this.videoDuration = formattedVideoDuration);
+
+      this.videoTitle = formatVideoCaption({
+        name: videoName,
+      });
+
+      const heading = this.querySelector(`${c4dPrefix}-card-heading`);
+      const footer = this.querySelector(`${c4dPrefix}-card-footer`);
+
+      if (heading?.textContent?.trim() === '') {
+        const title = document.createTextNode(this.videoTitle);
+        heading?.appendChild(title);
+      }
+
+      if (footer?.textContent?.trim() === '') {
+        const title = document.createTextNode(formattedVideoDuration);
+        footer?.appendChild(title);
+      }
+    }
+  };
+
+  connectedCallback() {
+    super.connectedCallback();
+    const { eventRequestAdditionalVideoData } = this
+      .constructor as typeof C4DCard;
+    document.addEventListener(
+      eventRequestAdditionalVideoData,
+      this._handleVideoTitleUpdate
+    );
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    const { eventRequestAdditionalVideoData } = this
+      .constructor as typeof C4DCard;
+    document.removeEventListener(
+      eventRequestAdditionalVideoData,
+      this._handleVideoTitleUpdate
+    );
+  }
   render() {
     return this._hasPictogram
       ? html`
           <div
             tabindex="0"
-            aria-label="${this.querySelector(`${ddsPrefix}-card-heading`)
+            aria-label="${this.querySelector(`${c4dPrefix}-card-heading`)
               ?.textContent || ''}"
             aria-live="polite"
             aria-describedby="${prefix}--card__copy"
             role="button">
-            ${this._renderInner()}
+            ${this._renderInner()} ${ArrowRight20()}
           </div>
         `
       : html` <div>${this._renderInner()}</div> `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card`;
+    return `${c4dPrefix}--card`;
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-card-footer`;
+    return `${c4dPrefix}-card-footer`;
+  }
+
+  /**
+   * The name of the custom event fired when there is a user gesture to run the action.
+   */
+  static get eventRequestAdditionalVideoData() {
+    return `${c4dPrefix}-cta-request-additional-video-data`;
+  }
+
+  /**
+   * The name of the custom event fired when the video title is updated
+   */
+  static get eventVideoTitleUpdated() {
+    return `${c4dPrefix}-card-video-title-updated`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCard;
+export default C4DCard;
diff --git a/packages/web-components/src/components/card/image-logo.ts b/packages/web-components/src/components/card/image-logo.ts
index 9b5a39601b1..a4f9c6ccccc 100644
--- a/packages/web-components/src/components/card/image-logo.ts
+++ b/packages/web-components/src/components/card/image-logo.ts
@@ -6,24 +6,24 @@
  * 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 { css } from 'lit-element';
+import { css } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
-import DDSImage from '../image/image';
+import C4DImage from '../image/image';
 import styles from '../image/image.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Image logo.
  *
- * @element dds-image-logo
+ * @element c4d-image-logo
  */
 
-@customElement(`${ddsPrefix}-image-logo`)
-class DDSImageLogo extends DDSImage {
+@customElement(`${c4dPrefix}-image-logo`)
+class C4DImageLogo extends C4DImage {
   static get stableSelector() {
-    return `${ddsPrefix}-image-logo`;
+    return `${c4dPrefix}-image-logo`;
   }
 
   static get styles() {
@@ -34,4 +34,4 @@ class DDSImageLogo extends DDSImage {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSImageLogo;
+export default C4DImageLogo;
diff --git a/packages/web-components/src/components/card/index.ts b/packages/web-components/src/components/card/index.ts
index 2befa622f06..31260a525b3 100644
--- a/packages/web-components/src/components/card/index.ts
+++ b/packages/web-components/src/components/card/index.ts
@@ -12,4 +12,3 @@ import './card-eyebrow';
 import './card-footer';
 import './card-heading';
 import './image-logo';
-import '../tag-group/index';
diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
index 2c7a7a6b049..2054fd7bb1d 100644
--- a/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/carousel/__stories__/README.stories.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
@@ -30,93 +35,84 @@ import '@carbon/ibmdotcom-web-components/es/components/card/index.js';
 ### HTML
 
 ```html
-<dds-carousel>
-  <dds-card href="https://www.ibm.com/standards/carbon">
-    <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-    <dds-card-footer>
-      <svg
-        slot="icon"
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-      </svg>
-    </dds-card-footer>
-  </dds-card>
-  <dds-card href="https://www.ibm.com/standards/carbon">
-    <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-    <dds-card-footer>
-      <svg
-        slot="icon"
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        aria-hidden="true"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-      </svg>
-    </dds-card-footer>
-  </dds-card>
-</dds-carousel>
+<c4d-carousel>
+  <c4d-card href="https://www.ibm.com/standards/carbon" cta-type="local">
+    <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est.
+    <c4d-card-footer>
+    </c4d-card-footer>
+  </c4d-card>
+  <c4d-card href="https://www.ibm.com/standards/carbon" cta-type="local">
+    <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
+    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin, sodales nulla quis, consequat libero.</p>
+    <c4d-card-footer>
+    </c4d-card-footer>
+  </c4d-card>
+</c4d-carousel>
 ```
 
 ### SCSS
 
-While `<dds-carousel>` has `page-size` attribute, `<dds-carousel>` also looks at `--dds--carousel--page-size` CSS custom property to determine the number of cards per page.
-This is useful for setting different number of cards for different breakpoints.
+While `<c4d-carousel>` has `page-size` attribute, `<c4d-carousel>` also looks at
+`--c4d--carousel--page-size` CSS custom property to determine the number of
+cards per page. This is useful for setting different number of cards for
+different breakpoints.
 
 ```scss
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
+@use '@carbon/styles/scss/breakpoint';
 
-dds-carousel {
-  --dds--carousel--page-size: 1;
+c4d-carousel {
+  --c4d--carousel--page-size: 1;
 
-  @include carbon--breakpoint(md) {
-    --dds--carousel--page-size: 2;
+  @include breakpoint(md) {
+    --c4d--carousel--page-size: 2;
   }
 
-  @include carbon--breakpoint(lg) {
-    --dds--carousel--page-size: 3;
+  @include breakpoint(lg) {
+    --c4d--carousel--page-size: 3;
   }
 }
 ```
 
-Another CSS custom property `<dds-carousel>` looks at is `--dds--carousel--overflow-hint-size`. If `0rem` is set there, the first card at the next page as a hint of page overflow will be hidden.
+Another CSS custom property `<c4d-carousel>` looks at is
+`--c4d--carousel--overflow-hint-size`. If `0rem` is set there, the first card at
+the next page as a hint of page overflow will be hidden.
 
 ## Accessibility Notes
 
 ### Carousel labeling
 
-The carousel allows content within the `title` slot to be used as the accessible aria label for the `region` role. Even if a design does not call for the modal to have content in the title slot, it is _required_ for accessibility. The title can be visually hidden using the `.bx--visually-hidden` or `.bx--assistive-text` classes. This will prevent the text from rendering on the screen, but will still be announced to assistive technology users. If no value is provided for the `title` slot, a generic title of "carousel" will be announced.
+The carousel allows content within the `title` slot to be used as the accessible
+aria label for the `region` role. Even if a design does not call for the modal
+to have content in the title slot, it is _required_ for accessibility. The title
+can be visually hidden using the `.cds--visually-hidden` or
+`.cds--assistive-text` classes. This will prevent the text from rendering on the
+screen, but will still be announced to assistive technology users. If no value
+is provided for the `title` slot, a generic title of "carousel" will be
+announced.
 
 ```html
-<dds-carousel>
-  <span class="bx--visually-hidden" slot="title">Carousel label text</span>
+<c4d-carousel>
+  <span class="cds--visually-hidden" slot="title">Carousel label text</span>
   ...
-</dds-carousel>
+</c4d-carousel>
 ```
 
 ## Props
 
-<Props of="dds-carousel" />
+<Props of="c4d-carousel" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-carousel>`        | N/A                    | Component   |
+| `<c4d-carousel>`        | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
index 2b51d75db1b..c092aa76ea0 100644
--- a/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/carousel/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 
@@ -17,55 +22,58 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/index';
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/index';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/index';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/index';
 
 function App() {
   return (
-    <DDSCarousel>
-      <DDSCard href="https://www.ibm.com/standards/carbon">
-        <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSCard>
-      <DDSCard href="https://www.ibm.com/standards/carbon">
-        <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSCard>
-    </DDSCarousel>
+    <C4DCarousel>
+      <C4DCard href="https://www.ibm.com/standards/carbon" cta-type="local">
+        <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+        est.</p>
+        <C4DCardFooter>
+        </C4DCardFooter>
+      </C4DCard>
+      <C4DCard href="https://www.ibm.com/standards/carbon" cta-type="local">
+        <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
+        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+        est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin,
+        sodales nulla quis, consequat libero.</p>
+        <C4DCardFooter>
+        </C4DCardFooter>
+      </C4DCard>
+    </C4DCarousel>
   );
 }
 ```
 
 ### SCSS
 
-While `<dds-carousel>` has `page-size` attribute, `<dds-carousel>` also looks at `--dds--carousel--page-size` CSS custom property to determine the number of cards per page.
-This is useful for setting different number of cards for different breakpoints.
+While `<c4d-carousel>` has `page-size` attribute, `<c4d-carousel>` also looks at
+`--c4d--carousel--page-size` CSS custom property to determine the number of
+cards per page. This is useful for setting different number of cards for
+different breakpoints.
 
 ```scss
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
+@use '@carbon/styles/scss/breakpoint';
 
-dds-carousel {
-  --dds--carousel--page-size: 1;
+c4d-carousel {
+  --c4d--carousel--page-size: 1;
 
-  @include carbon--breakpoint(md) {
-    --dds--carousel--page-size: 2;
+  @include breakpoint(md) {
+    --c4d--carousel--page-size: 2;
   }
 
-  @include carbon--breakpoint(lg) {
-    --dds--carousel--page-size: 3;
+  @include breakpoint(lg) {
+    --c4d--carousel--page-size: 3;
   }
 }
 ```
 
-Another CSS custom property `<dds-carousel>` looks at is `--dds--carousel--overflow-hint-size`. If `0rem` is set there, the first card at the next page as a hint of page overflow will be hidden.
+Another CSS custom property `<c4d-carousel>` looks at is
+`--c4d--carousel--overflow-hint-size`. If `0rem` is set there, the first card at
+the next page as a hint of page overflow will be hidden.
 
 ## Props
 
@@ -73,10 +81,12 @@ Another CSS custom property `<dds-carousel>` looks at is `--dds--carousel--overf
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-carousel>`        | N/A                    | Component   |
+| `<c4d-carousel>`        | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx b/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx
index 432972b69d9..d47188f948e 100644
--- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx
+++ b/packages/web-components/src/components/carousel/__stories__/carousel.stories.react.tsx
@@ -8,22 +8,25 @@
  */
 
 import React from 'react';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 // @ts-ignore
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
 // @ts-ignore
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 // @ts-ignore
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 // @ts-ignore
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+// @ts-ignore
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
+import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--004.jpg';
 
+import styles from './carousel.stories.scss';
 import readme from './README.stories.react.mdx';
 
 const hrefDefault = 'https://www.ibm.com/standards/carbon';
@@ -41,52 +44,77 @@ const Card = ({
   href = hrefDefault,
   image = undefined,
 } = {}) => (
-  <DDSCard href={href}>
-    <DDSCardHeading>{heading}</DDSCardHeading>
+  <C4DCard href={href} cta-type="local">
+    <C4DCardHeading>{heading}</C4DCardHeading>
+    <p>{copy}</p>
+    {image ? (
+      <C4DImage slot="image" alt="example image" default-src={image} />
+    ) : (
+      ''
+    )}
+    <C4DCardFooter></C4DCardFooter>
+  </C4DCard>
+);
+
+const CardWithLongHeading = ({
+  copy = copyDefault,
+  heading = headingDefault,
+  href = hrefDefault,
+  image = false,
+} = {}) => (
+  <C4DCard href={href} cta-type="local">
+    <C4DCardHeading>{heading}</C4DCardHeading>
     <p>{copy}</p>
     {image ? (
-      <DDSImage slot="image" alt="example image" defaultSrc={image} />
+      <C4DImage slot="image" alt="example image" defaultSrc={image} />
     ) : (
       ''
     )}
-    <DDSCardFooter>
-      <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSCard>
+    <C4DCardFooter></C4DCardFooter>
+  </C4DCard>
+);
+
+
+const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => (
+  <C4DVideoCTAContainer>
+    <C4DCard href={href} cta-type="video">
+      <p>{copy}</p>
+      <C4DCardFooter></C4DCardFooter>
+    </C4DCard>
+  </C4DVideoCTAContainer>
 );
 
 export const Default = () => {
-  return (
-    <DDSCarousel>
-      <Card />
-      <Card copy={copyOdd} />
-      <Card />
-      <Card copy={copyOdd} />
-      <Card />
-    </DDSCarousel>
-  );
+      return ( <>{Card()}{Card({copy: copyOdd})}{CardWithLongHeading()}{Card({copy: copyOdd})}{Card()}</> );
 };
 
 export const CardsWithImages = () => {
-  return (
-    <DDSCarousel>
-      <Card image={imgLg2x1} />
-      <Card copy={copyOdd} image={imgLg2x1} />
-      <Card image={imgLg2x1} />
-      <Card copy={copyOdd} image={imgLg2x1} />
-      <Card image={imgLg2x1} />
-    </DDSCarousel>
-  );
-};
+  return ( <>{Card({image: imgLg2x1})}{Card({image: imgLg2x1, copy: copyOdd})}{Card({image: imgLg2x1})}{Card({image: imgLg2x1, copy: copyOdd})}{Card({image: imgLg2x1})}</> );
+}
+
+export const CardsWithVideos = () => {
+  return ( <>{CardWithVideo({href: '0_ibuqxqbe'})}{CardWithVideo({href: '0_ibuqxqbe'})}{CardWithVideo({href: '0_ibuqxqbe'})}{CardWithVideo({href: '0_ibuqxqbe'})}</> );
+}
+
+export const CardsWithMedia = () => {
+  return (<>{Card({image: imgLg4x3})}{CardWithVideo({href: '0_ibuqxqbe'})}{Card({image: imgLg4x3})}{CardWithVideo({href: '0_ibuqxqbe'})}{Card({image: imgLg4x3})}{CardWithVideo({href: '0_ibuqxqbe'})}</>)
+}
 
 export default {
   title: 'Components/Carousel',
   decorators: [
     (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">{story()}</div>
-        </div>
+        <>
+          <style type="text/css">{styles.cssText}</style>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <C4DCarousel>
+                {story()}
+              </C4DCarousel>
+              </div>
+          </div>
+        </>
       );
     },
   ],
diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.scss b/packages/web-components/src/components/carousel/__stories__/carousel.stories.scss
index 9cf1c4f44e8..49c2d871dd2 100644
--- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.scss
+++ b/packages/web-components/src/components/carousel/__stories__/carousel.stories.scss
@@ -7,11 +7,11 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
+@use '@carbon/styles/scss/breakpoint' as *;
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-carousel {
-  @include carbon--breakpoint('lg') {
-    --dds--carousel--page-size: 4;
+cds-carousel {
+  @include breakpoint(lg) {
+    --cds--carousel--page-size: 4;
   }
 }
diff --git a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
index aa36b2e499b..1ee5813f73f 100644
--- a/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
+++ b/packages/web-components/src/components/carousel/__stories__/carousel.stories.ts
@@ -7,13 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html } from 'lit-element';
+import { html } from 'lit';
 // Below path will be there when an application installs `carbon-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../../card/index';
 import '../../cta/index';
 import '../../image/index';
@@ -39,19 +37,19 @@ const Card = ({
   href = hrefDefault,
   image = undefined,
 } = {}) => html`
-  <dds-card href="${ifNonNull(href)}">
-    <dds-card-heading>${heading}</dds-card-heading>
+  <c4d-card href="${ifDefined(href)}" cta-type="local">
+    <c4d-card-heading>${heading}</c4d-card-heading>
     <p>${copy}</p>
     ${image
       ? html`
-          <dds-image
+          <c4d-image
             slot="image"
             alt="example image"
-            default-src="${image}"></dds-image>
+            default-src="${image}"></c4d-image>
         `
       : null}
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
-  </dds-card>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
 `;
 
 const CardWithLongHeading = ({
@@ -60,119 +58,71 @@ const CardWithLongHeading = ({
   href = hrefDefault,
   image = undefined,
 } = {}) => html`
-  <dds-card href="${ifNonNull(href)}">
-    <dds-card-heading>${heading} ${heading}</dds-card-heading>
+  <c4d-card href="${ifDefined(href)}" cta-type="local">
+    <c4d-card-heading>${heading}</c4d-card-heading>
     <p>${copy}</p>
     ${image
       ? html`
-          <dds-image
+          <c4d-image
             slot="image"
             alt="example image"
-            default-src="${image}"></dds-image>
+            default-src="${image}"></c4d-image>
         `
       : null}
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
-  </dds-card>
+    <c4d-card-footer></c4d-card-footer>
+  </c4d-card>
 `;
 
 const CardWithVideo = ({ copy = copyDefault, href = hrefDefault } = {}) => html`
-  <dds-video-cta-container>
-    <dds-card-cta cta-type="video" href="${href}">
+  <c4d-video-cta-container>
+    <c4d-card cta-type="video" href="${href}">
       <p>${copy}</p>
-      <dds-card-cta-footer href="${href}">
-        ${ArrowRight20({ slot: 'icon' })}
-      </dds-card-cta-footer>
-    </dds-card-cta>
-  </dds-video-cta-container>
+      <c4d-card-footer> </c4d-card-footer>
+    </c4d-card>
+  </c4d-video-cta-container>
 `;
 
-export const Default = (args) => {
-  const { cardSize } = args?.Carousel ?? {};
-  const classes = classMap({
-    [cardSize]: cardSize,
-  });
+export const Default = () => {
   return html`
-    <dds-carousel class="${classes}">
-      <span class="bx--visually-hidden" slot="title"
-        >Carousel (Storybook Sample)</span
-      >
-      ${Card()}${Card({ copy: copyOdd })}${CardWithLongHeading()}${Card({
-        copy: copyOdd,
-      })}${Card()}
-    </dds-carousel>
+    ${Card()}${Card({ copy: copyOdd })}${CardWithLongHeading()}${Card({
+      copy: copyOdd,
+    })}${Card()}
   `;
+  // }
 };
 
-export const CardsWithImages = (args) => {
-  const { cardSize } = args?.Carousel ?? {};
-  const classes = classMap({
-    [cardSize]: cardSize,
-  });
+export const CardsWithImages = () => {
   return html`
-    <dds-carousel class="${classes}">
-      ${Card({ image: imgLg2x1 })}${Card({
-        copy: copyOdd,
-        image: imgLg2x1,
-      })}${Card({ image: imgLg2x1 })}${Card({
-        copy: copyOdd,
-        image: imgLg2x1,
-      })}${Card({ image: imgLg2x1 })}
-    </dds-carousel>
+    ${Card({ image: imgLg2x1 })}${Card({
+      image: imgLg2x1,
+      copy: copyOdd,
+    })}${Card({ image: imgLg2x1 })}${Card({
+      image: imgLg2x1,
+      copy: copyOdd,
+    })}${Card({ image: imgLg2x1 })}
   `;
 };
 
-export const CardsWithVideos = (args) => {
-  const { cardSize } = args?.Carousel ?? {};
-  const classes = classMap({
-    [cardSize]: cardSize,
-  });
+export const CardsWithVideos = () => {
   return html`
-    <dds-carousel class="${classes}">
-      ${CardWithVideo({ href: '1_9h94wo6b' })}
-      ${CardWithVideo({ href: '0_ibuqxqbe' })}
-      ${CardWithVideo({ href: '1_9h94wo6b' })}
-      ${CardWithVideo({ href: '0_ibuqxqbe' })}
-      ${CardWithVideo({ href: '1_9h94wo6b' })}
-      ${CardWithVideo({ href: '0_ibuqxqbe' })}
-    </dds-carousel>
+    ${CardWithVideo({ href: '0_ibuqxqbe' })}${CardWithVideo({
+      href: '0_ibuqxqbe',
+    })}${CardWithVideo({ href: '0_ibuqxqbe' })}${CardWithVideo({
+      href: '0_ibuqxqbe',
+    })}
   `;
 };
 
-export const CardsWithMedia = (args) => {
-  const { cardSize } = args?.Carousel ?? {};
-  const classes = classMap({
-    [cardSize]: cardSize,
-  });
+export const CardsWithMedia = () => {
   return html`
-    <dds-carousel class="${classes}">
-      ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })}
-      ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '1_9h94wo6b' })}
-      ${Card({ image: imgLg4x3 })} ${CardWithVideo({ href: '0_ibuqxqbe' })}
-    </dds-carousel>
+    ${Card({ image: imgLg4x3 })}${CardWithVideo({
+      href: '0_ibuqxqbe',
+    })}${Card({ image: imgLg4x3 })}${CardWithVideo({
+      href: '0_ibuqxqbe',
+    })}${Card({ image: imgLg4x3 })}${CardWithVideo({ href: '0_ibuqxqbe' })}
   `;
 };
 
-CardsWithImages.story = {
-  name: 'Cards with images',
-};
-
-CardsWithVideos.story = {
-  name: 'Cards with videos',
-  parameters: {
-    ...readme.parameters,
-    percy: {
-      skip: true,
-    },
-  },
-};
-
-CardsWithMedia.story = {
-  name: 'Cards with Media',
-  parameters: {
-    ...readme.parameters,
-  },
-};
-
 export default {
   title: 'Components/Carousel',
   decorators: [
@@ -181,8 +131,10 @@ export default {
         <style>
           ${styles}
         </style>
-        <div class="bx--grid">
-          <div class="bx--row">${story()}</div>
+        <div class="cds--grid">
+          <div class="cds--row">
+            <c4d-carousel>${story()}</c4d-carousel>
+          </div>
         </div>
       `;
     },
@@ -194,6 +146,7 @@ export default {
       default: {
         Carousel: {
           cardSize: 4,
+          mediaType: 'none',
         },
       },
     },
diff --git a/packages/web-components/src/components/carousel/__tests__/carousel.test.ts b/packages/web-components/src/components/carousel/__tests__/carousel.test.ts
index 5242e9a2665..fa3d7cc80a8 100644
--- a/packages/web-components/src/components/carousel/__tests__/carousel.test.ts
+++ b/packages/web-components/src/components/carousel/__tests__/carousel.test.ts
@@ -7,26 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import MockResizeObserver from '../../../../tests/utils/mock-resize-observer';
-import DDSCarousel from '../carousel';
+import C4DCarousel from '../carousel';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../carousel';
 
 const template = (props?) => {
   const { formatStatus, pageSize, start, children } = props ?? {};
   return html`
-    <dds-carousel
-      .formatStatus="${ifNonNull(formatStatus)}"
-      page-size="${ifNonNull(pageSize)}"
-      start="${ifNonNull(start)}">
+    <c4d-carousel
+      .formatStatus="${ifDefined(formatStatus)}"
+      page-size="${ifDefined(pageSize)}"
+      start="${ifDefined(start)}">
       ${children}
-    </dds-carousel>
+    </c4d-carousel>
   `;
 };
 
-describe('dds-carousel', function () {
+describe('c4d-carousel', function () {
   let pageSize = 3;
   const origComputedStyle = window.getComputedStyle;
   // TODO: Wait for `.d.ts` update to support `ResizeObserver`
@@ -37,7 +37,7 @@ describe('dds-carousel', function () {
       const origResult = origComputedStyle.call(window, elem);
       return {
         getPropertyValue(name) {
-          return name !== '--dds-carousel-page-size'
+          return name !== '--c4d-carousel-page-size'
             ? origResult.getPropertyValue(name)
             : pageSize;
         },
@@ -50,10 +50,10 @@ describe('dds-carousel', function () {
   describe('Rendering', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
-      expect(document.body.querySelector('dds-carousel')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-carousel')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -61,8 +61,8 @@ describe('dds-carousel', function () {
     it('should set the scroll position', async function () {
       render(template({ pageSize: 2, start: 1 }), document.body);
       await Promise.resolve();
-      const carousel = document.querySelector('dds-carousel') as DDSCarousel;
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      const carousel = document.querySelector('c4d-carousel') as C4DCarousel;
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       (carousel as any)._contentsBaseWidth = 700;
       (carousel as any)._gap = 100;
@@ -70,7 +70,7 @@ describe('dds-carousel', function () {
       expect(
         (
           carousel!.shadowRoot!.querySelector(
-            '.bx--carousel__scroll-contents'
+            '.cds--carousel__scroll-contents'
           ) as HTMLElement
         ).style.insetInlineStart
       ).toBe('-400px');
@@ -79,7 +79,7 @@ describe('dds-carousel', function () {
     it('should enable/disable the previous button based on the starting position', async function () {
       render(template({ start: 0 }), document.body);
       await Promise.resolve();
-      const carousel = document.querySelector('dds-carousel') as DDSCarousel;
+      const carousel = document.querySelector('c4d-carousel') as C4DCarousel;
       expect(
         (
           carousel!.shadowRoot!.querySelector(
@@ -113,10 +113,10 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
-      const carousel = document.querySelector('dds-carousel') as DDSCarousel;
+      const carousel = document.querySelector('c4d-carousel') as C4DCarousel;
       expect(
         (
           carousel!.shadowRoot!.querySelector(
@@ -150,14 +150,14 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       const navigation = carousel!.shadowRoot!.querySelector(
-        '.bx--carousel__navigation'
+        '.cds--carousel__navigation'
       );
       expect(navigation!.textContent!.trim()).toBe('1 / 2');
       carousel.start = 1;
@@ -185,14 +185,14 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       const navigation = carousel!.shadowRoot!.querySelector(
-        '.bx--carousel__navigation'
+        '.cds--carousel__navigation'
       );
       expect(navigation!.textContent!.trim()).toBe('1 in 2');
       carousel.start = 3;
@@ -218,12 +218,12 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       (
         carousel!.shadowRoot!.querySelector(
           '[part="prev-button"]'
@@ -248,12 +248,12 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       (
         carousel!.shadowRoot!.querySelector(
           '[part="prev-button"]'
@@ -278,12 +278,12 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       (
         carousel!.shadowRoot!.querySelector(
           '[part="next-button"]'
@@ -308,12 +308,12 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       (
         carousel!.shadowRoot!.querySelector(
           '[part="next-button"]'
@@ -338,12 +338,12 @@ describe('dds-carousel', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-carousel>`
+      await Promise.resolve(); // Update cycle for `<c4d-carousel>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       const carousel = document.body.querySelector(
-        'dds-carousel'
-      ) as DDSCarousel;
+        'c4d-carousel'
+      ) as C4DCarousel;
       (
         carousel!.shadowRoot!.querySelector(
           '[part="next-button"]'
@@ -361,7 +361,7 @@ describe('dds-carousel', function () {
       MockResizeObserver.run(document.documentElement, {});
       await Promise.resolve();
       expect(
-        (document.body.querySelector('dds-carousel') as DDSCarousel).pageSize
+        (document.body.querySelector('c4d-carousel') as C4DCarousel).pageSize
       ).toBe(2);
     });
 
@@ -376,17 +376,17 @@ describe('dds-carousel', function () {
         document.body
       );
       await Promise.resolve();
-      const carousel = document.querySelector('dds-carousel') as DDSCarousel;
+      const carousel = document.querySelector('c4d-carousel') as C4DCarousel;
       pageSize = 2;
       spyOnProperty(
         carousel.shadowRoot!.querySelector(
-          '.bx--carousel__scroll-contents'
+          '.cds--carousel__scroll-contents'
         ) as Element,
         'scrollWidth'
       ).and.returnValue(700);
       MockResizeObserver.run(document.documentElement, {});
       MockResizeObserver.run(
-        carousel.shadowRoot!.querySelector('.bx--carousel__scroll-contents')!,
+        carousel.shadowRoot!.querySelector('.cds--carousel__scroll-contents')!,
         { width: 700 }
       );
       await Promise.resolve();
diff --git a/packages/web-components/src/components/carousel/carousel.scss b/packages/web-components/src/components/carousel/carousel.scss
index c836288b9c0..7b72b340142 100644
--- a/packages/web-components/src/components/carousel/carousel.scss
+++ b/packages/web-components/src/components/carousel/carousel.scss
@@ -7,5 +7,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/carousel/carousel';
+@use '@carbon/ibmdotcom-styles/scss/components/carousel';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
diff --git a/packages/web-components/src/components/carousel/carousel.ts b/packages/web-components/src/components/carousel/carousel.ts
index 0ab5eae5ac6..af5e4f3272f 100644
--- a/packages/web-components/src/components/carousel/carousel.ts
+++ b/packages/web-components/src/components/carousel/carousel.ts
@@ -6,27 +6,24 @@
  * 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 { html, property, state, query, LitElement } from 'lit-element';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-import { classMap } from 'lit-html/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { customElement, property, query, state } from 'lit/decorators.js';
 import 'wicg-inert';
-import settings from 'carbon-components/es/globals/js/settings.js';
 import { slow01 } from '@carbon/motion';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { classMap } from 'lit/directives/class-map.js';
 import CaretLeft20 from '../../internal/vendor/@carbon/web-components/icons/caret--left/20.js';
 import CaretRight20 from '../../internal/vendor/@carbon/web-components/icons/caret--right/20.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import { selectorTabbable } from '../../internal/vendor/@carbon/web-components/globals/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';
 import styles from './carousel.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSExpressiveModal from '../expressive-modal/expressive-modal';
+import C4DExpressiveModal from '../expressive-modal/expressive-modal';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 const MAX_GESTURE_DURATION = 300; // max time allowed to do swipe
 const MIN_DISTANCE_TRAVELLED = 75; // min distance traveled to be considered swipe
@@ -40,12 +37,12 @@ const minIntersectionRatio = 0.75;
 /**
  * Carousel.
  *
- * @element dds-carousel
+ * @element c4d-carousel
  * @csspart prev-button The button to go to the previous page.
  * @csspart next-button The button to go to the next page.
  */
-@customElement(`${ddsPrefix}-carousel`)
-class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
+@customElement(`${c4dPrefix}-carousel`)
+class C4DCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   /**
    * The scrolling container node.
    */
@@ -174,7 +171,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 
   /**
    * The page size that is automatically calculated upon viewport size
-   * via `--dds--carousel--page-size` CSS custom property.
+   * via `--c4d--carousel--page-size` CSS custom property.
    * If `page-size` attribute is set, this value is ignored.
    */
   @state()
@@ -417,10 +414,10 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
         .filter((elem) =>
           (elem as HTMLElement).matches !== undefined
             ? (elem as HTMLElement).matches(
-                (this.constructor as typeof DDSCarousel).selectorItem
+                (this.constructor as typeof C4DCarousel).selectorItem
               ) ||
               (elem as HTMLElement).matches(
-                (this.constructor as typeof DDSCarousel)
+                (this.constructor as typeof C4DCarousel)
                   .selectorItemVideoCTAContainer
               )
             : false
@@ -428,32 +425,34 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
         .forEach((e) => {
           this._childItemEyebrows.push(
             (e as HTMLElement).querySelector(
-              (this.constructor as typeof DDSCarousel).selectorItemEyebrow
+              (this.constructor as typeof C4DCarousel).selectorItemEyebrow
             )
           );
           this._childItemParagraphs.push(
             (e as HTMLElement).querySelector(
-              (this.constructor as typeof DDSCarousel).selectorItemParagraph
+              (this.constructor as typeof C4DCarousel).selectorItemParagraph
             )
           );
           this._childItemTagGroup.push(
             (e as HTMLElement).querySelector(
-              (this.constructor as typeof DDSCarousel).selectorItemTagGroup
+              (this.constructor as typeof C4DCarousel).selectorItemTagGroup
             )
           );
+
           this._childItemHeadings.push(
             (e as HTMLElement).querySelector(
-              (this.constructor as typeof DDSCarousel).selectorItemHeading
+              (this.constructor as typeof C4DCarousel).selectorItemHeading
             )
           );
 
+          // gets card cta-type="video" headings
           this._childItemHeadings.push(
             (e as HTMLElement)
               .querySelector(
-                (this.constructor as typeof DDSCarousel).selectorItemCardCTA
+                (this.constructor as typeof C4DCarousel).selectorItem
               )
               ?.shadowRoot?.querySelector(
-                (this.constructor as typeof DDSCarousel).selectorItemHeading
+                (this.constructor as typeof C4DCarousel).selectorItemHeading
               )
           );
 
@@ -463,7 +462,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 
           this._childItemFooters.push(
             (e as HTMLElement).querySelector(
-              (this.constructor as typeof DDSCarousel).selectorItemFooter
+              (this.constructor as typeof C4DCarousel).selectorItemFooter
             )
           );
         });
@@ -485,7 +484,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
    * The observer for the resize of the viewport.
    */
   private _observeResizeRoot = () => {
-    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;
+    const { customPropertyPageSize } = this.constructor as typeof C4DCarousel;
     const { _contentsNode: contentsNode } = this;
     const { defaultView: w } = this.ownerDocument!;
     this._pageSizeAuto = Number(
@@ -514,6 +513,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
       this._childItemEyebrows.filter((item) => item !== null),
       'sm'
     );
+
     sameHeight(
       this._childItemHeadings.filter((item) => item !== null),
       'sm'
@@ -544,7 +544,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
       if (
         e &&
         !e.nextElementSibling?.matches(
-          (this.constructor as typeof DDSCarousel).selectorItemTagGroup
+          (this.constructor as typeof C4DCarousel).selectorItemTagGroup
         )
       ) {
         e.style.marginBottom = `${tagGroupHeight + headingBottomMargin}px`;
@@ -597,7 +597,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 
   get focusableElements() {
     const { selectorTabbable: selectorTabbableForCarousel } = this
-      .constructor as typeof DDSExpressiveModal;
+      .constructor as typeof C4DExpressiveModal;
     return [
       ...Array.from(
         (this.shadowRoot?.querySelectorAll(
@@ -630,8 +630,8 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 
   /**
    * Number of items per page.
-   * If `--dds--carousel--page-size` CSS custom property is set to `<div class="bx--carousel__scroll-container">`
-   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from `--dds--carousel--page-size`.
+   * If `--c4d--carousel--page-size` CSS custom property is set to `<div class="cds--carousel__scroll-container">`
+   * or its ancestor (e.g. the host `<c4d-carousel>`), this is set automatically from `--c4d--carousel--page-size`.
    */
   @property({ type: Number, attribute: 'page-size' })
   get pageSize() {
@@ -672,8 +672,8 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
     this._cleanAndCreateObserverIntersection({ create: true });
 
     const containingModal = this.closest(
-      `${ddsPrefix}-expressive-modal`
-    ) as DDSExpressiveModal | null;
+      `${c4dPrefix}-expressive-modal`
+    ) as C4DExpressiveModal | null;
     if (containingModal) {
       containingModal.hasFocusableElements.push(this);
       this.setAttribute('in-modal', '');
@@ -707,7 +707,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   }
 
   render() {
-    const { customPropertyPageSize } = this.constructor as typeof DDSCarousel;
+    const { customPropertyPageSize } = this.constructor as typeof C4DCarousel;
     const {
       nextButtonText,
       _defaultNextButtonText: defaultNextButtonText,
@@ -734,12 +734,12 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
       [`${prefix}--carousel__scroll-contents`]: true,
       [`${prefix}--carousel__scroll-contents--scrolling`]: isScrolling,
     });
-    // Use another div from the host `<dds-carousel>` to reflect private state
+    // Use another div from the host `<c4d-carousel>` to reflect private state
     return html`
       <div role="region" aria-labelledby="carousel-title">
         <div id="carousel-title">
           <slot name="title">
-            <span class="bx--visually-hidden">Carousel</span>
+            <span class="cds--visually-hidden">Carousel</span>
           </slot>
         </div>
         <div
@@ -747,7 +747,7 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
           @scroll="${handleScrollFocus}"
           @touchstart="${handleTouchStartEvent}"
           @touchend="${handleTouchEndEvent}"
-          style="${ifNonNull(
+          style="${ifDefined(
             pageSizeExplicit == null
               ? null
               : `${customPropertyPageSize}: ${pageSizeExplicit}`
@@ -790,53 +790,53 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 
   /**
    * The CSS custom property name for the live page size.
-   * If the CSS custom property is set to `<div class="bx--carousel__scroll-container">`
-   * or its ancestor (e.g. the host `<dds-carousel>`), this is set automatically from the CSS custom property.
+   * If the CSS custom property is set to `<div class="cds--carousel__scroll-container">`
+   * or its ancestor (e.g. the host `<c4d-carousel>`), this is set automatically from the CSS custom property.
    */
   static get customPropertyPageSize() {
-    return `--${ddsPrefix}--carousel--page-size`;
+    return `--${c4dPrefix}--carousel--page-size`;
   }
 
   /**
    * The name of the custom event fired when the video title is updated
    */
   static get eventVideoTitleUpdated() {
-    return `${ddsPrefix}-card-cta-video-title-updated`;
+    return `${c4dPrefix}-card-video-title-updated`;
   }
 
   /**
    * The selector for the card component
    */
   static get selectorItem() {
-    return `${ddsPrefix}-card`;
+    return `${c4dPrefix}-card`;
   }
 
-  /**
-   * The selector for the card cta
-   */
-  static get selectorItemCardCTA() {
-    return `${ddsPrefix}-card-cta`;
-  }
+  // /**
+  //  * The selector for the card cta
+  //  */
+  // static get selectorItemCardCTA() {
+  //   return `${c4dPrefix}-card`;
+  // }
 
   /**
    * The selector for the video cta container
    */
   static get selectorItemVideoCTAContainer() {
-    return `${ddsPrefix}-video-cta-container`;
+    return `${c4dPrefix}-video-cta-container`;
   }
 
   /**
    * A selector that will return the card item's eyebrow
    */
   static get selectorItemEyebrow() {
-    return `${ddsPrefix}-card-eyebrow`;
+    return `${c4dPrefix}-card-eyebrow`;
   }
 
   /**
    * A selector that will return the card item's tag group
    */
   static get selectorItemTagGroup() {
-    return `${ddsPrefix}-tag-group`;
+    return `div`;
   }
 
   /**
@@ -850,18 +850,18 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
    * A selector that will return the card item's heading
    */
   static get selectorItemHeading() {
-    return `${ddsPrefix}-card-heading`;
+    return `${c4dPrefix}-card-heading`;
   }
 
   /**
    * A selector that will return the card item's footer
    */
   static get selectorItemFooter() {
-    return `${ddsPrefix}-card-cta-footer`;
+    return `${c4dPrefix}-card-footer`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--carousel`;
+    return `${c4dPrefix}--carousel`;
   }
 
   /**
@@ -877,4 +877,4 @@ class DDSCarousel extends HostListenerMixin(StableSelectorMixin(LitElement)) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCarousel;
+export default C4DCarousel;
diff --git a/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx
index e69b8db225c..8c3c3bf8b5d 100644
--- a/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-card-static/__stories__/README.stories.mdx
@@ -3,9 +3,9 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<dds-content-block-card-static>`
+# `<cds-content-block-card-static>`
 
-> The Content Block - Card Static pattern is a variant of `<dds-content-block>`,
+> The Content Block - Card Static pattern is a variant of `<cds-content-block>`,
 > and includes a card group, a single content item, and ends with a CTA.
 
 > 💡 Check our
@@ -20,7 +20,7 @@ This component is currently behind a feature flag, in order to use it you'll
 need to add the following into your `.env` file.
 
 ```
-  DDS_CONTENT_BLOCK_CARD_STATIC=true
+  C4D_CONTENT_BLOCK_CARD_STATIC=true
 ```
 
 ## Getting started
@@ -49,52 +49,52 @@ import Chat20 from '@carbon/web-components/es/icons/chat/20.js';
 ### HTML
 
 ```html
-<dds-content-block-card-static>
-  <dds-content-block-heading>Ways to buy</dds-content-block-heading>
-  <dds-card-group>
-    <dds-card-group-item>
-      <dds-card-heading>Nunc convallis</dds-card-heading>
-      <dds-tag-group>
-        <bx-tag>Most popular</bx-tag>
-      </dds-tag-group>
+<cds-content-block-card-static>
+  <cds-content-block-heading>Ways to buy</cds-content-block-heading>
+  <cds-card-group>
+    <cds-card-group-item>
+      <cds-card-heading>Nunc convallis</cds-card-heading>
+      <div>
+        <cds-tag>Most popular</cds-tag>
+      </div>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-    </dds-card-group-item>
-    <dds-card-group-item>
-      <dds-card-heading>Nunc convallis</dds-card-heading>
+    </cds-card-group-item>
+    <cds-card-group-item>
+      <cds-card-heading>Nunc convallis</cds-card-heading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-    </dds-card-group-item>
-  </dds-card-group>
-  <dds-content-item>
-    <dds-content-item-heading
-      >Lorem ipsum dolor si amett</dds-content-item-heading
+    </cds-card-group-item>
+  </cds-card-group>
+  <cds-content-item>
+    <cds-content-item-heading
+      >Lorem ipsum dolor si amett</cds-content-item-heading
     >
-    <dds-content-item-copy
+    <cds-content-item-copy
       >Contact us for a customized quote, discounted pricing, and financing
       options - or get started with a free trial today
-    </dds-content-item-copy>
-  </dds-content-item>
-  <dds-button-group slot="footer">
-    <dds-button-group-item href="https://example.com">
+    </cds-content-item-copy>
+  </cds-content-item>
+  <cds-button-group slot="footer">
+    <cds-button-group-item href="https://example.com">
       Contact us ${Chat20({ slot: 'icon' })}
-    </dds-button-group-item>
-    <dds-button-group-item href="https://example.com">
+    </cds-button-group-item>
+    <cds-button-group-item href="https://example.com">
       Free trial ${ArrowRight20({ slot: 'icon' })}
-    </dds-button-group-item>
-  </dds-button-group>
-</dds-content-block-card-static>
+    </cds-button-group-item>
+  </cds-button-group>
+</cds-content-block-card-static>
 ```
 
 ## Props
 
-<Props of="dds-content-block-card-static" />
+<Props of="cds-content-block-card-static" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -105,6 +105,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector           | Compatibility selector                         | Description |
 | --------------------------------- | ---------------------------------------------- | ----------- |
-| `<dds-content-block-card-static>` | `data-autoid="dds--content-block-card-static"` | Component   |
+| `<cds-content-block-card-static>` | `data-autoid="cds--content-block-card-static"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-card-static/__stories__/content-block-card-static.stories.ts b/packages/web-components/src/components/content-block-card-static/__stories__/content-block-card-static.stories.ts
index d5c0b8ffe97..9e7497a7bae 100644
--- a/packages/web-components/src/components/content-block-card-static/__stories__/content-block-card-static.stories.ts
+++ b/packages/web-components/src/components/content-block-card-static/__stories__/content-block-card-static.stories.ts
@@ -8,7 +8,7 @@
  */
 
 import '../index';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import Chat20 from '../../../internal/vendor/@carbon/web-components/icons/chat/20.js';
 // eslint-disable-next-line sort-imports
@@ -16,56 +16,56 @@ import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
 const longHeadingCardGroupItem = html`
-  <dds-card-group-item>
-    <dds-card-heading
+  <c4d-card-group-item>
+    <c4d-card-heading
       >Nunc convallis lobortis Nunc convallis lobortis Nunc convallis
-      lobortis</dds-card-heading
+      lobortis</c4d-card-heading
     >
-    <dds-tag-group>
-      <bx-tag>Most popular</bx-tag>
-    </dds-tag-group>
+    <div>
+      <cds-tag>Most popular</cds-tag>
+    </div>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-  </dds-card-group-item>
+  </c4d-card-group-item>
 `;
 
 const cardGroupItem = html`
-  <dds-card-group-item cta-type="local">
-    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+  <c4d-card-group-item cta-type="local">
+    <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-  </dds-card-group-item>
+  </c4d-card-group-item>
 `;
 
 export const Default = (args) => {
   const { heading, itemHeading, itemCopy, href } =
     args?.ContentBlockCards ?? {};
   return html`
-    <dds-content-block-card-static>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group grid-mode="border">
+    <c4d-content-block-card-static>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-card-group grid-mode="border">
         ${longHeadingCardGroupItem} ${cardGroupItem} ${cardGroupItem}
         ${cardGroupItem} ${cardGroupItem}
-      </dds-card-group>
-      <dds-content-item>
-        <dds-content-item-heading>${itemHeading}</dds-content-item-heading>
-        <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-      </dds-content-item>
-      <dds-button-group slot="footer">
-        <dds-button-group-item href="${href}">
+      </c4d-card-group>
+      <c4d-content-item>
+        <c4d-content-item-heading>${itemHeading}</c4d-content-item-heading>
+        <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+      </c4d-content-item>
+      <c4d-button-group slot="footer">
+        <c4d-button-group-item href="${href}">
           Contact us ${Chat20({ slot: 'icon' })}
-        </dds-button-group-item>
-        <dds-button-group-item href="${href}">
+        </c4d-button-group-item>
+        <c4d-button-group-item href="${href}">
           Free trial ${ArrowRight20({ slot: 'icon' })}
-        </dds-button-group-item>
-      </dds-button-group>
-    </dds-content-block-card-static>
+        </c4d-button-group-item>
+      </c4d-button-group>
+    </c4d-content-block-card-static>
   `;
 };
 
@@ -73,9 +73,9 @@ export default {
   title: '',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/content-block-card-static/__tests__/content-block-card-static.test.ts b/packages/web-components/src/components/content-block-card-static/__tests__/content-block-card-static.test.ts
index a300978b49d..328df103dfd 100644
--- a/packages/web-components/src/components/content-block-card-static/__tests__/content-block-card-static.test.ts
+++ b/packages/web-components/src/components/content-block-card-static/__tests__/content-block-card-static.test.ts
@@ -7,37 +7,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import '../index';
 
 const template = (props?) => {
   const { heading, cards, contentItemHeading, contentItemCopy } = props ?? {};
   return html`
-    <dds-content-block-card-static>
-      <dds-card-group-item>${heading}</dds-card-group-item>
-      <dds-card-group>${cards}</dds-card-group>
-      <dds-content-item>
-        <dds-content-item-heading
-          >${contentItemHeading}</dds-content-item-heading
+    <c4d-content-block-card-static>
+      <c4d-card-group-item>${heading}</c4d-card-group-item>
+      <c4d-card-group>${cards}</c4d-card-group>
+      <c4d-content-item>
+        <c4d-content-item-heading
+          >${contentItemHeading}</c4d-content-item-heading
         >
-        <dds-content-item-copy>${contentItemCopy}</dds-content-item-copy>
-      </dds-content-item>
-      <dds-button-group>
-        <dds-button-group-item>Button 1</dds-button-group-item>
-        <dds-button-group-item>Buuton 2</dds-button-group-item>
-      </dds-button-group>
-    </dds-content-block-card-static>
+        <c4d-content-item-copy>${contentItemCopy}</c4d-content-item-copy>
+      </c4d-content-item>
+      <c4d-button-group>
+        <c4d-button-group-item>Button 1</c4d-button-group-item>
+        <c4d-button-group-item>Buuton 2</c4d-button-group-item>
+      </c4d-button-group>
+    </c4d-content-block-card-static>
   `;
 };
 
-describe('dds-content-block-card-static', function () {
+describe('c4d-content-block-card-static', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-card-static')
+        document.body.querySelector('c4d-content-block-card-static')
       ).toMatchSnapshot();
     });
 
@@ -46,18 +46,18 @@ describe('dds-content-block-card-static', function () {
         template({
           heading: 'heading-foo',
           cards: html`
-            <dds-card-group-item href="https://example.com">
-              <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                 et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                 Phasellus at elit sollicitudin, sodales nulla quis, consequat
                 libero.
               </p>
-              <dds-card-cta-footer slot="footer">
+              <c4d-card-cta-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-cta-footer>
-            </dds-card-group-item>
+              </c4d-card-cta-footer>
+            </c4d-card-group-item>
           `,
           contentItemHeading: 'Lorem ipsum',
           contentItemCopy: 'ipsum dolor sit amet',
@@ -66,7 +66,7 @@ describe('dds-content-block-card-static', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-card-static')
+        document.body.querySelector('c4d-content-block-card-static')
       ).toMatchSnapshot();
     });
   });
diff --git a/packages/web-components/src/components/content-block-card-static/content-block-card-static.scss b/packages/web-components/src/components/content-block-card-static/content-block-card-static.scss
index 31b67b0e3d0..4218bd5bb63 100644
--- a/packages/web-components/src/components/content-block-card-static/content-block-card-static.scss
+++ b/packages/web-components/src/components/content-block-card-static/content-block-card-static.scss
@@ -5,41 +5,42 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-content-block-card-static) {
+:host(#{$c4d-prefix}-content-block-card-static) {
   display: block;
   margin-bottom: $spacing-10;
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint(md) {
     margin-bottom: $spacing-12;
   }
 
-  @include carbon--breakpoint('max') {
+  @include breakpoint(max) {
     margin-bottom: $spacing-13;
   }
 
-  ::slotted(#{$dds-prefix}-content-block-heading) {
+  ::slotted(#{$c4d-prefix}-content-block-heading) {
     margin-top: $spacing-07;
 
-    @include carbon--breakpoint('max') {
+    @include breakpoint(max) {
       margin-top: $spacing-10;
     }
   }
 
-  ::slotted(#{$dds-prefix}-content-item) {
+  ::slotted(#{$c4d-prefix}-content-item) {
     margin-top: $spacing-10;
     margin-left: $spacing-05;
     margin-bottom: $spacing-07;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-bottom: $spacing-09;
     }
   }
 
   ::slotted([slot='footer']) {
     width: auto;
-    margin-top: -$carbon--spacing-05;
+    margin-top: -$spacing-05;
   }
 }
diff --git a/packages/web-components/src/components/content-block-card-static/content-block-card-static.ts b/packages/web-components/src/components/content-block-card-static/content-block-card-static.ts
index 09023ab994f..804d1d4d936 100644
--- a/packages/web-components/src/components/content-block-card-static/content-block-card-static.ts
+++ b/packages/web-components/src/components/content-block-card-static/content-block-card-static.ts
@@ -1,31 +1,34 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-card-static.scss';
-import { DDS_CONTENT_BLOCK_CARD_STATIC } from '../../globals/internal/feature-flags';
+import { C4D_CONTENT_BLOCK_CARD_STATIC } from '../../globals/internal/feature-flags';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content block variation which includes a static card group.
  *
- * @element dds-content-block-card-static
+ * @element c4d-content-block-card-static
  */
-class DDSContentBlockCardStatic extends StableSelectorMixin(DDSContentBlock) {
+class C4DContentBlockCardStatic extends StableSelectorMixin(C4DContentBlock) {
   updated() {
-    this.querySelector('dds-card-group')?.setAttribute('grid-mode', 'border');
+    this.querySelector(`${c4dPrefix}-card-group`)?.setAttribute(
+      'grid-mode',
+      'border'
+    );
     const cardGroupItems = this.querySelectorAll(
-      (this.constructor as typeof DDSContentBlockCardStatic).selectorCardItem
+      (this.constructor as typeof C4DContentBlockCardStatic).selectorCardItem
     );
     cardGroupItems.forEach((e) => {
       (e as HTMLElement).setAttribute('color-scheme', 'light');
@@ -33,11 +36,11 @@ class DDSContentBlockCardStatic extends StableSelectorMixin(DDSContentBlock) {
   }
 
   static get selectorCardItem() {
-    return `${ddsPrefix}-card-group-item`;
+    return `${c4dPrefix}-card-group-item`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-card-static`;
+    return `${c4dPrefix}--content-block-card-static`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -50,15 +53,15 @@ class DDSContentBlockCardStatic extends StableSelectorMixin(DDSContentBlock) {
 
 // Define the new element
 if (
-  DDS_CONTENT_BLOCK_CARD_STATIC &&
-  !customElements.get(`${ddsPrefix}-content-block-card-static`)
+  C4D_CONTENT_BLOCK_CARD_STATIC &&
+  !customElements.get(`${c4dPrefix}-content-block-card-static`)
 ) {
   customElements.define(
-    `${ddsPrefix}-content-block-card-static`,
-    DDSContentBlockCardStatic
+    `${c4dPrefix}-content-block-card-static`,
+    C4DContentBlockCardStatic
   );
 }
 
-export default !DDS_CONTENT_BLOCK_CARD_STATIC
+export default !C4D_CONTENT_BLOCK_CARD_STATIC
   ? undefined
-  : DDSContentBlockCardStatic;
+  : C4DContentBlockCardStatic;
diff --git a/packages/web-components/src/components/content-block-card-static/index.ts b/packages/web-components/src/components/content-block-card-static/index.ts
index 4a531c97c9a..5d55b4d144f 100644
--- a/packages/web-components/src/components/content-block-card-static/index.ts
+++ b/packages/web-components/src/components/content-block-card-static/index.ts
@@ -14,4 +14,3 @@ import '../content-item/index';
 import '../content-block/content-block-heading';
 import '../cta/card-cta-footer';
 import '../cta/video-cta-container';
-import '../tag-group/tag-group';
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx
index 1c225162e5c..50236d53b55 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.mdx
@@ -3,13 +3,9 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-content-block-cards>`
 
-
-
-
-# `<dds-content-block-cards>`
-
-> The Content Block - Cards pattern is a variant of `<dds-content-block>`, and
+> The Content Block - Cards pattern is a variant of `<cds-content-block>`, and
 > includes a heading, a group of cards with media options, and ends with a CTA.
 
 > 💡 Check our
@@ -35,68 +31,113 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-cards/index
 ### HTML
 
 ```html
-<dds-content-block-cards>
-  <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-  <dds-card-group slot="content">
-    <dds-card-group-item href="https://example.com">
-      <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+<cds-content-block-cards>
+  <cds-content-block-heading
+    >Lorem ipsum dolor sit amet</cds-content-block-heading
+  >
+  <cds-card-group slot="content">
+    <cds-card-group-item href="https://example.com">
+      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <dds-card-cta-footer slot="footer">
-        <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      <cds-card-cta-footer slot="footer">
+        <svg
+          slot="icon"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-    <dds-card-group-item href="https://example.com">
-      <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+    <cds-card-group-item href="https://example.com">
+      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <dds-card-cta-footer slot="footer">
-        <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      <cds-card-cta-footer slot="footer">
+        <svg
+          slot="icon"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-    <dds-card-group-item href="https://example.com">
-      <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+    <cds-card-group-item href="https://example.com">
+      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <dds-card-cta-footer slot="footer">
-        <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
-          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      <cds-card-cta-footer slot="footer">
+        <svg
+          slot="icon"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
-      </dds-card-cta-footer>
-    </dds-card-group-item>
-  </dds-card-group>
-  <dds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com">
-    <dds-card-link-heading>Lorem ipsum dolor sit ametttt</dds-card-link-heading>
-    <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+  </cds-card-group>
+  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com">
+    <cds-card-link-heading>Lorem ipsum dolor sit ametttt</cds-card-link-heading>
+    <svg
+      slot="footer"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-card-link-cta>
-</dds-content-block-cards>
+  </cds-card-link-cta>
+</cds-content-block-cards>
 ```
 
 ## Props
 
-<Props of="dds-content-block-cards" />
+<Props of="cds-content-block-cards" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                       | Description |
 | ----------------------------- | -------------------------------------------- | ----------- |
-| `<dds-content-block-cards>`   | `data-autoid="dds--content-block-cards"`     | Component   |
-| `<dds-content-block-heading>` | `data-autoid="dds--content-block__heading"f` | Component   |
-
-
+| `<cds-content-block-cards>`   | `data-autoid="cds--content-block-cards"`     | Component   |
+| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"f` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx
index 758addce13b..09f5b3b7fe8 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-cards/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
 
@@ -17,61 +22,67 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 function App() {
   return (
-  <DDSContentBlockCards>
-    <DDSContentBlockHeading>Lorem ipsum dolor sit amet</DDSContentBlockHeading>
-    <DDSCardGroup>
-        <DDSCardGroupItem href="https://example.com">
-            <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-                hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </p>
-            <DDSCardCTAFooter>
-                <ArrowRight20 slot='icon' />
-            </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-        <DDSCardGroupItem href="https://example.com">
-            <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-                hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </p>
-            <DDSCardCTAFooter>
-                <ArrowRight20 slot='icon' />
-            </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-        <DDSCardGroupItem href="https://example.com">
-            <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-                hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </p>
-            <DDSCardCTAFooter>
-                <ArrowRight20 slot='icon' />
-            </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-        <DDSCardGroupItem href="https://example.com">
-            <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
-            <p>
-                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-                hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-            </p>
-            <DDSCardCTAFooter>
-                <ArrowRight20 slot='icon' />
-            </DDSCardCTAFooter>
-        </DDSCardGroupItem>
-    </DDSCardGroup>
-  </DDSContentBlockCards>
+    <C4DContentBlockCards>
+      <C4DContentBlockHeading>
+        Lorem ipsum dolor sit amet
+      </C4DContentBlockHeading>
+      <C4DCardGroup>
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin, sodales nulla quis, consequat libero.
+          </p>
+          <C4DCardCTAFooter>
+            <ArrowRight20 slot="icon" />
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin, sodales nulla quis, consequat libero.
+          </p>
+          <C4DCardCTAFooter>
+            <ArrowRight20 slot="icon" />
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin, sodales nulla quis, consequat libero.
+          </p>
+          <C4DCardCTAFooter>
+            <ArrowRight20 slot="icon" />
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+        <C4DCardGroupItem href="https://example.com">
+          <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin, sodales nulla quis, consequat libero.
+          </p>
+          <C4DCardCTAFooter>
+            <ArrowRight20 slot="icon" />
+          </C4DCardCTAFooter>
+        </C4DCardGroupItem>
+      </C4DCardGroup>
+    </C4DContentBlockCards>
   );
 }
 ```
@@ -82,11 +93,13 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                       | Description |
 | ----------------------------- | -------------------------------------------- | ----------- |
-| `<dds-content-block-cards>`   | `data-autoid="dds--content-block-cards"`     | Component   |
-| `<dds-content-block-heading>` | `data-autoid="dds--content-block__heading"f` | Component   |
+| `<cds-content-block-cards>`   | `data-autoid="cds--content-block-cards"`     | Component   |
+| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"f` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.react.tsx b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.react.tsx
index cf02fbb429c..24a3a5aa920 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.react.tsx
@@ -12,17 +12,17 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 import { CTA_TYPE } from '../../cta/defs';
 import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--004.jpg';
@@ -35,61 +35,76 @@ const ctaTypes = {
 };
 
 const cardGroupItem = (
-  <DDSCardGroupItem cta-type="local" href="https://example.com">
-    <DDSCardHeading>Nunc convallis lobortis</DDSCardHeading>
+  <C4DCardGroupItem cta-type="local" href="https://example.com">
+    <C4DCardHeading>Nunc convallis lobortis</C4DCardHeading>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+      sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <DDSCardCTAFooter></DDSCardCTAFooter>
-  </DDSCardGroupItem>
+    <C4DCardCTAFooter></C4DCardCTAFooter>
+  </C4DCardGroupItem>
 );
 
 const cardGroupItemWithImages = (
-  <DDSCardGroupItem cta-type="local" href="https://example.com">
-    <DDSImage slot="image" alt="Image alt text" default-src={imgLg4x3}></DDSImage>
-    <DDSCardEyebrow>Topic</DDSCardEyebrow>
-    <DDSCardHeading>Natural Language Processing</DDSCardHeading>
-    <DDSCardCTAFooter></DDSCardCTAFooter>
-  </DDSCardGroupItem>
+  <C4DCardGroupItem cta-type="local" href="https://example.com">
+    <C4DImage
+      slot="image"
+      alt="Image alt text"
+      default-src={imgLg4x3}></C4DImage>
+    <C4DCardEyebrow>Topic</C4DCardEyebrow>
+    <C4DCardHeading>Natural Language Processing</C4DCardHeading>
+    <C4DCardCTAFooter></C4DCardCTAFooter>
+  </C4DCardGroupItem>
 );
 
 const cardGroupItemWithVideos = (
-  <DDSCardGroupItem cta-type="video" href="1_9h94wo6b">
-    <DDSCardCTAFooter cta-type="video" slot="footer" href="1_9h94wo6b"></DDSCardCTAFooter>
-  </DDSCardGroupItem>
+  <C4DCardGroupItem cta-type="video" href="0_ibuqxqbe">
+    <C4DCardCTAFooter
+      cta-type="video"
+      slot="footer"
+      href="0_ibuqxqbe"></C4DCardCTAFooter>
+  </C4DCardGroupItem>
 );
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading, ctaCopy, ctaType, href } = args?.ContentBlockCards ?? {};
   return (
-    <DDSContentBlockCards>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSCardGroup>
-        {cardGroupItem} {cardGroupItem} {cardGroupItem} {cardGroupItem} {cardGroupItem}
-      </DDSCardGroup>
-      <DDSCardLinkCTA slot="footer" cta-type={ctaType || null} href={href || null}>
-        <DDSCardLinkHeading>{ctaCopy}</DDSCardLinkHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentBlockCards>
+    <C4DContentBlockCards>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DCardGroup>
+        {cardGroupItem} {cardGroupItem} {cardGroupItem} {cardGroupItem}{' '}
+        {cardGroupItem}
+      </C4DCardGroup>
+      <C4DCardLinkCTA
+        slot="footer"
+        cta-type={ctaType || null}
+        href={href || null}>
+        <C4DCardLinkHeading>{ctaCopy}</C4DCardLinkHeading>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardLinkCTA>
+    </C4DContentBlockCards>
   );
 };
 
-export const withImages = args => {
+export const withImages = (args) => {
   const { heading, ctaCopy, ctaType, href } = args?.ContentBlockCards ?? {};
   return (
-    <DDSContentBlockCards>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSCardGroup>
-        {cardGroupItemWithImages} {cardGroupItemWithImages} {cardGroupItemWithImages} {cardGroupItemWithImages}
+    <C4DContentBlockCards>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DCardGroup>
+        {cardGroupItemWithImages} {cardGroupItemWithImages}{' '}
+        {cardGroupItemWithImages} {cardGroupItemWithImages}
         {cardGroupItemWithImages}
-      </DDSCardGroup>
-      <DDSCardLinkCTA slot="footer" cta-type={ctaType || null} href={href || null}>
-        <DDSCardLinkHeading>{ctaCopy}</DDSCardLinkHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentBlockCards>
+      </C4DCardGroup>
+      <C4DCardLinkCTA
+        slot="footer"
+        cta-type={ctaType || null}
+        href={href || null}>
+        <C4DCardLinkHeading>{ctaCopy}</C4DCardLinkHeading>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardLinkCTA>
+    </C4DContentBlockCards>
   );
 };
 
@@ -97,20 +112,24 @@ withImages.story = {
   name: 'With images',
 };
 
-export const withVideos = args => {
+export const withVideos = (args) => {
   const { heading, ctaCopy, ctaType, href } = args?.ContentBlockCards ?? {};
   return (
-    <DDSContentBlockCards>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSCardGroup>
-        {cardGroupItemWithVideos} {cardGroupItemWithVideos} {cardGroupItemWithVideos} {cardGroupItemWithVideos}
+    <C4DContentBlockCards>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DCardGroup>
+        {cardGroupItemWithVideos} {cardGroupItemWithVideos}{' '}
+        {cardGroupItemWithVideos} {cardGroupItemWithVideos}
         {cardGroupItemWithVideos}
-      </DDSCardGroup>
-      <DDSCardLinkCTA slot="footer" cta-type={ctaType || null} href={href || null}>
-        <DDSCardLinkHeading>{ctaCopy}</DDSCardLinkHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentBlockCards>
+      </C4DCardGroup>
+      <C4DCardLinkCTA
+        slot="footer"
+        cta-type={ctaType || null}
+        href={href || null}>
+        <C4DCardLinkHeading>{ctaCopy}</C4DCardLinkHeading>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardLinkCTA>
+    </C4DContentBlockCards>
   );
 };
 
@@ -126,12 +145,12 @@ withVideos.story = {
 export default {
   title: 'Components/Content block cards',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-lg-12 bx--no-gutter">
-              <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-lg-12 cds--no-gutter">
+              <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
             </div>
           </div>
         </div>
diff --git a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
index be9709e152f..d1ea9262a14 100644
--- a/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
+++ b/packages/web-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
@@ -8,8 +8,8 @@
  */
 
 import '../index';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 // eslint-disable-next-line sort-imports
 import { CTA_TYPE } from '../../cta/defs';
@@ -24,76 +24,76 @@ const ctaTypes = {
 };
 
 const cardGroupItem = html`
-  <dds-card-group-item cta-type="local" href="https://example.com">
-    <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+  <c4d-card-group-item cta-type="local" href="https://example.com">
+    <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
     </p>
-    <dds-card-cta-footer></dds-card-cta-footer>
-  </dds-card-group-item>
+    <c4d-card-cta-footer></c4d-card-cta-footer>
+  </c4d-card-group-item>
 `;
 
 const cardGroupItemWithImages = html`
-  <dds-card-group-item cta-type="local" href="https://example.com">
-    <dds-image
+  <c4d-card-group-item cta-type="local" href="https://example.com">
+    <c4d-image
       slot="image"
       alt="Image alt text"
       default-src="${imgLg4x3}"
     >
-    </dds-image>
-    <dds-card-eyebrow>Topic</dds-card-eyebrow>
-    <dds-card-heading>Natural Language Processing.</dds-card-heading>
-    <dds-card-cta-footer><dds-card-cta-footer>
-  </dds-card-group-item>
+    </c4d-image>
+    <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+    <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
+    <c4d-card-cta-footer><c4d-card-cta-footer>
+  </c4d-card-group-item>
 `;
 
 const cardGroupItemWithVideos = html`
-  <dds-card-group-item cta-type="video" href="1_9h94wo6b">
-    <dds-card-cta-footer cta-type="video" slot="footer" href="1_9h94wo6b">
-    </dds-card-cta-footer>
-  </dds-card-group-item>
+  <c4d-card-group-item cta-type="video" href="0_ibuqxqbe">
+    <c4d-card-cta-footer cta-type="video" slot="footer" href="0_ibuqxqbe">
+    </c4d-card-cta-footer>
+  </c4d-card-group-item>
 `;
 
 export const Default = (args) => {
   const { heading, ctaCopy, ctaType, href } = args?.ContentBlockCards ?? {};
   return html`
-    <dds-content-block-cards>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group>
+    <c4d-content-block-cards>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-card-group>
         ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem}
         ${cardGroupItem}
-      </dds-card-group>
-      <dds-card-link-cta
+      </c4d-card-group>
+      <c4d-card-link-cta
         slot="footer"
-        cta-type="${ifNonNull(ctaType)}"
-        href="${ifNonNull(href)}">
-        <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-block-cards>
+        cta-type="${ifDefined(ctaType)}"
+        href="${ifDefined(href)}">
+        <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+        <c4d-card-cta-footer></c4d-card-cta-footer>
+      </c4d-card-link-cta>
+    </c4d-content-block-cards>
   `;
 };
 
 export const withImages = (args) => {
   const { heading, ctaCopy, ctaType, href } = args?.ContentBlockCards ?? {};
   return html`
-    <dds-content-block-cards>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group>
+    <c4d-content-block-cards>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-card-group>
         ${cardGroupItemWithImages} ${cardGroupItemWithImages}
         ${cardGroupItemWithImages} ${cardGroupItemWithImages}
         ${cardGroupItemWithImages}
-      </dds-card-group>
-      <dds-card-link-cta
+      </c4d-card-group>
+      <c4d-card-link-cta
         slot="footer"
-        cta-type="${ifNonNull(ctaType)}"
-        href="${ifNonNull(href)}">
-        <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-block-cards>
+        cta-type="${ifDefined(ctaType)}"
+        href="${ifDefined(href)}">
+        <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+        <c4d-card-cta-footer></c4d-card-cta-footer>
+      </c4d-card-link-cta>
+    </c4d-content-block-cards>
   `;
 };
 
@@ -104,21 +104,21 @@ withImages.story = {
 export const withVideos = (args) => {
   const { heading, ctaCopy, ctaType, href } = args?.ContentBlockCards ?? {};
   return html`
-    <dds-content-block-cards>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group>
+    <c4d-content-block-cards>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-card-group>
         ${cardGroupItemWithVideos} ${cardGroupItemWithVideos}
         ${cardGroupItemWithVideos} ${cardGroupItemWithVideos}
         ${cardGroupItemWithVideos}
-      </dds-card-group>
-      <dds-card-link-cta
+      </c4d-card-group>
+      <c4d-card-link-cta
         slot="footer"
-        cta-type="${ifNonNull(ctaType)}"
-        href="${ifNonNull(href)}">
-        <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-block-cards>
+        cta-type="${ifDefined(ctaType)}"
+        href="${ifDefined(href)}">
+        <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+        <c4d-card-cta-footer></c4d-card-cta-footer>
+      </c4d-card-link-cta>
+    </c4d-content-block-cards>
   `;
 };
 
@@ -135,10 +135,10 @@ export default {
   title: 'Components/Content block cards',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">
-            <dds-video-cta-container> ${story()} </dds-video-cta-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">
+            <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
index c1eb70b722c..e6ce316e3f7 100644
--- a/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
+++ b/packages/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
@@ -7,36 +7,36 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../../card/card-heading';
 import '../content-block-cards';
 
 const template = (props?) => {
   const { heading, children, ctaType, href } = props ?? {};
   return html`
-    <dds-content-block-cards>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-card-group>${children}</dds-card-group>
-      <dds-card-cta
+    <c4d-content-block-cards>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-card-group>${children}</c4d-card-group>
+      <c4d-card-cta
         slot="footer"
-        cta-type="${ifNonNull(ctaType)}"
-        href="${ifNonNull(href)}">
+        cta-type="${ifDefined(ctaType)}"
+        href="${ifDefined(href)}">
         <p>ctaCopy-foo</p>
         ${ArrowRight20({ slot: 'footer' })}
-      </dds-card-cta>
-    </dds-content-block-cards>
+      </c4d-card-cta>
+    </c4d-content-block-cards>
   `;
 };
 
-describe('dds-content-block-cards', function () {
+describe('c4d-content-block-cards', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-cards')
+        document.body.querySelector('c4d-content-block-cards')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -45,25 +45,25 @@ describe('dds-content-block-cards', function () {
         template({
           heading: 'heading-foo',
           cards: html`
-            <dds-card-group-item href="https://example.com">
-              <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
+            <c4d-card-group-item href="https://example.com">
+              <c4d-card-heading>Nunc convallis lobortis</c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
                 et ultricies est. Mauris iaculis eget dolor nec hendrerit.
                 Phasellus at elit sollicitudin, sodales nulla quis, consequat
                 libero.
               </p>
-              <dds-card-cta-footer slot="footer">
+              <c4d-card-cta-footer slot="footer">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-cta-footer>
-            </dds-card-group-item>
+              </c4d-card-cta-footer>
+            </c4d-card-group-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-cards')
+        document.body.querySelector('c4d-content-block-cards')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.scss b/packages/web-components/src/components/content-block-cards/content-block-cards.scss
index 017621d5cf1..b72d2e207c2 100644
--- a/packages/web-components/src/components/content-block-cards/content-block-cards.scss
+++ b/packages/web-components/src/components/content-block-cards/content-block-cards.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-cards/content-block-cards';
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-cards';
diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.ts b/packages/web-components/src/components/content-block-cards/content-block-cards.ts
index 603f5bd1f81..9494ee29c01 100644
--- a/packages/web-components/src/components/content-block-cards/content-block-cards.ts
+++ b/packages/web-components/src/components/content-block-cards/content-block-cards.ts
@@ -7,25 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Part } from 'lit-html';
-import { css } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, Part } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-cards.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content block cards.
  *
- * @element dds-content-block-cards
+ * @element c4d-content-block-cards
  */
-@customElement(`${ddsPrefix}-content-block-cards`)
-class DDSContentBlockCards extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-content-block-cards`)
+class C4DContentBlockCards extends StableSelectorMixin(C4DContentBlock) {
   /**
    * The CSS class list for the container (grid) node.
    */
@@ -35,7 +32,7 @@ class DDSContentBlockCards extends StableSelectorMixin(DDSContentBlock) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-cards`;
+    return `${c4dPrefix}--content-block-cards`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -46,5 +43,10 @@ class DDSContentBlockCards extends StableSelectorMixin(DDSContentBlock) {
   }
 }
 
+console.warn(
+  'The content-block-cards component has been deprecated in favor of the content-section/block and card-group component. ' +
+    'See content-section/block and card-group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockCards;
+export default C4DContentBlockCards;
diff --git a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx
index 88735963c84..653f972b622 100755
--- a/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-headlines/__stories__/README.stories.mdx
@@ -3,11 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
-# `<dds-content-block-headlines>`
+# `<cds-content-block-headlines>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-headlines)
@@ -25,98 +21,96 @@ Here's a quick example to get you started.
 import '@carbon/ibmdotcom-web-components/es/components/content-block-headlines/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['content-block-headlines'] })}`} />
+<Description
+  markdown={`${cdnJs({ components: ['content-block-headlines'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<dds-content-block-headlines>
-  <dds-content-block-heading>Aliquam condimentum<</dds-content-block-heading>
-  <dds-content-block-copy
+<cds-content-block-headlines>
+  <cds-content-block-heading>Aliquam condimentum<</cds-content-block-heading>
+  <cds-content-block-copy
     >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
     ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-    sollicitudin.</dds-content-block-copy
+    sollicitudin.</cds-content-block-copy
   >
-  <dds-content-block-headlines-item slot="content">
-    <dds-content-block-headlines-heading
-      >25%</dds-content-block-headlines-heading
+  <cds-content-block-headlines-item slot="content">
+    <cds-content-block-headlines-heading
+      >25%</cds-content-block-headlines-heading
     >
-    <dds-content-item-copy slot="copy"
+    <cds-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</dds-content-item-copy
+      multicloud environment up to 25 percent faster.</cds-content-item-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <cds-link-list slot="footer" type="vertical">
+      <cds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
-        cta-type="local"
-      >
+        cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-block-headlines-item>
-  <dds-content-block-headlines-item slot="content">
-    <dds-content-block-headlines-heading
-      >25%</dds-content-block-headlines-heading
+      </cds-link-list-item-cta>
+    </cds-link-list>
+  </cds-content-block-headlines-item>
+  <cds-content-block-headlines-item slot="content">
+    <cds-content-block-headlines-heading
+      >25%</cds-content-block-headlines-heading
     >
-    <dds-content-item-copy slot="copy"
+    <cds-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</dds-content-item-copy
+      multicloud environment up to 25 percent faster.</cds-content-item-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <cds-link-list slot="footer" type="vertical">
+      <cds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
-        cta-type="local"
-      >
+        cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-block-headlines-item>
-  <dds-content-block-headlines-item slot="content">
-    <dds-content-block-headlines-heading
-      >1.34M</dds-content-block-headlines-heading
+      </cds-link-list-item-cta>
+    </cds-link-list>
+  </cds-content-block-headlines-item>
+  <cds-content-block-headlines-item slot="content">
+    <cds-content-block-headlines-heading
+      >1.34M</cds-content-block-headlines-heading
     >
-    <dds-content-item-copy slot="copy"
+    <cds-content-item-copy slot="copy"
       >Save 1.34M per year by optimizing your time and IT
-      expenses.</dds-content-item-copy
+      expenses.</cds-content-item-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <cds-link-list slot="footer" type="vertical">
+      <cds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
-        cta-type="local"
-      >
+        cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-block-headlines-item>
-  <dds-content-block-headlines-item slot="content">
-    <dds-content-block-headlines-heading
-      >25%</dds-content-block-headlines-heading
+      </cds-link-list-item-cta>
+    </cds-link-list>
+  </cds-content-block-headlines-item>
+  <cds-content-block-headlines-item slot="content">
+    <cds-content-block-headlines-heading
+      >25%</cds-content-block-headlines-heading
     >
-    <dds-content-item-copy slot="copy"
+    <cds-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</dds-content-item-copy
+      multicloud environment up to 25 percent faster.</cds-content-item-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <cds-link-list slot="footer" type="vertical">
+      <cds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
-        cta-type="local"
-      >
+        cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-block-headlines-item>
-</dds-content-block-headlines>
+      </cds-link-list-item-cta>
+    </cds-link-list>
+  </cds-content-block-headlines-item>
+</cds-content-block-headlines>
 ```
 
 ## Props
 
-<Props of="dds-content-block-headlines" />
+<Props of="cds-content-block-headlines" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -127,7 +121,7 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<dds-content-block-headlines>`      | `data-autoid="dds--content-block-headlines"`      | Component   |
-| `<dds-content-block-headlines-item>` | `data-autoid="dds--content-block-headlines-item"` | Component   |
+| `<cds-content-block-headlines>`      | `data-autoid="cds--content-block-headlines"`      | Component   |
+| `<cds-content-block-headlines-item>` | `data-autoid="cds--content-block-headlines-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts b/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
index 415ba45152e..66c1c90f249 100755
--- a/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
+++ b/packages/web-components/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
@@ -1,69 +1,69 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../index';
 
 const contentItemRow1 = html`
-  <dds-content-block-headlines-item>
-    <dds-content-block-headlines-heading
-      >25%</dds-content-block-headlines-heading
+  <c4d-content-block-headlines-item>
+    <c4d-content-block-headlines-heading
+      >25%</c4d-content-block-headlines-heading
     >
-    <dds-content-item-copy slot="copy"
+    <c4d-content-item-copy slot="copy"
       >Modernize mission-critical applications and infrastructure in a hybrid
-      multicloud environment up to 25 percent faster.</dds-content-item-copy
+      multicloud environment up to 25 percent faster.</c4d-content-item-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <c4d-link-list slot="footer" type="vertical">
+      <c4d-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
         cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-block-headlines-item>
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-block-headlines-item>
 `;
 
 const contentItemRow2 = html`
-  <dds-content-block-headlines-item>
-    <dds-content-block-headlines-heading
-      >1.34M</dds-content-block-headlines-heading
+  <c4d-content-block-headlines-item>
+    <c4d-content-block-headlines-heading
+      >1.34M</c4d-content-block-headlines-heading
     >
-    <dds-content-item-copy slot="copy"
+    <c4d-content-item-copy slot="copy"
       >Save 1.34M per year by optimizing your time and IT
-      expenses.</dds-content-item-copy
+      expenses.</c4d-content-item-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <c4d-link-list slot="footer" type="vertical">
+      <c4d-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
         cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-block-headlines-item>
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-block-headlines-item>
 `;
 
 export const Default = (args) => {
   const { heading, copy } = args?.ContentBlockHeadlines ?? {};
   return html`
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--col-lg-12 bx--no-gutter">
-          <dds-content-block-headlines>
-            <dds-content-block-heading>${heading}</dds-content-block-heading>
-            <dds-content-block-copy>${copy}</dds-content-block-copy>
+    <div class="cds--grid">
+      <div class="cds--row">
+        <div class="cds--col-lg-12 cds--no-gutter">
+          <c4d-content-block-headlines>
+            <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+            <c4d-content-block-copy>${copy}</c4d-content-block-copy>
             ${contentItemRow1} ${contentItemRow1} ${contentItemRow2}
             ${contentItemRow1}
-          </dds-content-block-headlines>
+          </c4d-content-block-headlines>
         </div>
       </div>
     </div>
@@ -75,7 +75,7 @@ export default {
   decorators: [
     (story) => html`
       <div
-        class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--content-block-headlines">
+        class="c4d-ce-demo-devenv--simple-grid c4d-ce-demo-devenv--simple-grid--content-block-headlines">
         ${story()}
       </div>
     `,
diff --git a/packages/web-components/src/components/content-block-headlines/__tests__/content-block-headlines.test.ts b/packages/web-components/src/components/content-block-headlines/__tests__/content-block-headlines.test.ts
index a570250f599..12479bc62f3 100755
--- a/packages/web-components/src/components/content-block-headlines/__tests__/content-block-headlines.test.ts
+++ b/packages/web-components/src/components/content-block-headlines/__tests__/content-block-headlines.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../../content-item/content-item-copy';
 import '../content-block-headlines';
 import '../content-block-headlines-item';
@@ -15,17 +15,17 @@ import '../content-block-headlines-item';
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-content-block-headlines> ${children} </dds-content-block-headlines>
+    <c4d-content-block-headlines> ${children} </c4d-content-block-headlines>
   `;
 };
 
-describe('dds-content-block-headlines', function () {
+describe('c4d-content-block-headlines', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-headlines')
+        document.body.querySelector('c4d-content-block-headlines')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines-heading.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines-heading.ts
index 1c4abf14590..e39ded47cc8 100644
--- a/packages/web-components/src/components/content-block-headlines/content-block-headlines-heading.ts
+++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines-heading.ts
@@ -7,23 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentItemHeading from '../content-item/content-item-heading';
+import C4DContentItemHeading from '../content-item/content-item-heading';
 import styles from './content-block-headlines.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content in content item.
  *
- * @element dds-content-block-headlines-heading
+ * @element c4d-content-block-headlines-heading
  */
-@customElement(`${ddsPrefix}-content-block-headlines-heading`)
-class DDSContentBlockHeadlinesHeading extends StableSelectorMixin(
-  DDSContentItemHeading
+@customElement(`${c4dPrefix}-content-block-headlines-heading`)
+class C4DContentBlockHeadlinesHeading extends StableSelectorMixin(
+  C4DContentItemHeading
 ) {
   /**
    * The shadow slot this logo UI should be in.
@@ -36,10 +37,10 @@ class DDSContentBlockHeadlinesHeading extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-headlines__heading`;
+    return `${c4dPrefix}--content-block-headlines__heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSContentBlockHeadlinesHeading;
+export default C4DContentBlockHeadlinesHeading;
diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts
index f9b1684840d..fcafd77896d 100755
--- a/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts
+++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines-item.ts
@@ -7,28 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentItem from '../content-item/content-item';
+import C4DContentItem from '../content-item/content-item';
 import styles from './content-block-headlines.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content Block Headlines item
  *
- * @element dds-content-block-headlines-item
+ * @element c4d-content-block-headlines-item
  */
-@customElement(`${ddsPrefix}-content-block-headlines-item`)
-class DDSContentBlockHeadlinesItem extends StableSelectorMixin(DDSContentItem) {
+@customElement(`${c4dPrefix}-content-block-headlines-item`)
+class C4DContentBlockHeadlinesItem extends StableSelectorMixin(C4DContentItem) {
   render() {
     return html`
-      <h4 class="bx--content-block-headlines__heading">
+      <h4 class="cds--content-block-headlines__heading">
         <slot name="heading"></slot>
       </h4>
-      <p class="bx--content-block-headlines__copy"><slot name="copy"></slot></p>
+      <p class="cds--content-block-headlines__copy">
+        <slot name="copy"></slot>
+      </p>
       <slot name="footer"></slot>
     `;
   }
@@ -41,8 +43,8 @@ class DDSContentBlockHeadlinesItem extends StableSelectorMixin(DDSContentItem) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-headlines-item`;
+    return `${c4dPrefix}--content-block-headlines-item`;
   }
 }
 
-export default DDSContentBlockHeadlinesItem;
+export default C4DContentBlockHeadlinesItem;
diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss b/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss
index dff5fc445a1..6d74f705deb 100755
--- a/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss
+++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss
@@ -5,9 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-headlines/content-block-headlines';
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-headlines';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-content-block-headlines-item) {
+:host(#{$c4d-prefix}-content-block-headlines-item) {
   display: flex;
   flex-direction: column;
   ::slotted([slot='footer']) {
diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts
index 1ad09c53fb8..72bafb4f390 100755
--- a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts
+++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts
@@ -7,30 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Part } from 'lit-html';
-import { css, html, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html, TemplateResult } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-headlines.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content Block Headlines
  *
- * @element dds-content-block-headlines
+ * @element c4d-content-block-headlines
  */
-@customElement(`${ddsPrefix}-content-block-headlines`)
-class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-content-block-headlines`)
+class C4DContentBlockHeadlines extends StableSelectorMixin(C4DContentBlock) {
   /**
    * The CSS class list for the container (grid) node.
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _getContainerClasses(): string | ((part: Part) => void) {
+  protected _getContainerClasses() {
     return `${prefix}--content-layout ${prefix}--content-layout--with-headlines ${prefix}--layout--border`;
   }
 
@@ -47,7 +44,7 @@ class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-headlines`;
+    return `${c4dPrefix}--content-block-headlines`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -58,4 +55,4 @@ class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) {
   }
 }
 
-export default DDSContentBlockHeadlines;
+export default C4DContentBlockHeadlines;
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
index 7cf96d54ecb..115d911fdbd 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.mdx
@@ -3,14 +3,10 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
-# `<dds-content-block-horizontal>`
+# `<cds-content-block-horizontal>`
 
 > The Content Block - Horizontal block pattern contains a collection of
-> `<dds-content-item-horizontal>` content items.
+> `<cds-content-item-row>` content items.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-horizontal)
@@ -28,55 +24,64 @@ Here's a quick example to get you started.
 import '@carbon/ibmdotcom-web-components/es/components/content-block-horizontal/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['content-block-horizontal'] })}`} />
+<Description
+  markdown={`${cdnJs({ components: ['content-block-horizontal'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-   <dds-content-block-horizontal>
-      <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
-      <dds-content-item-horizontal>
-        <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-        <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-        <dds-content-item-horizontal-copy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy>
-        <dds-link-list slot="footer" type="vertical">
-          <dds-link-list-item-cta
-            icon-placement="right"
-            href="https://www.ibm.com"
-            cta-type="local"
-          >
-            Link text
-          </dds-link-list-item-cta>
-          <dds-link-list-item-cta
-            icon-placement="right"
-            href="https://www.ibm.com"
-            cta-type="external"
-          >
-            External link text
-          </dds-link-list-item-cta>
-        </dds-link-list>
-      </dds-content-item-horizontal>
-    </dds-content-block-horizontal>
+<cds-content-block-horizontal>
+  <cds-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
+  >
+  <cds-content-item-row>
+    <cds-content-item-row-eyebrow
+      >Lorem ipsum</cds-content-item-row-eyebrow
+    >
+    <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
+    <cds-content-item-row-copy
+      >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+      ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+      sollicitudin.</cds-content-item-row-copy
+    >
+    <cds-link-list slot="footer" type="vertical">
+      <cds-link-list-item-cta
+        icon-placement="right"
+        href="https://www.ibm.com"
+        cta-type="local">
+        Link text
+      </cds-link-list-item-cta>
+      <cds-link-list-item-cta
+        icon-placement="right"
+        href="https://www.ibm.com"
+        cta-type="external">
+        External link text
+      </cds-link-list-item-cta>
+    </cds-link-list>
+  </cds-content-item-row>
+</cds-content-block-horizontal>
 ```
 
 ## Props
 
-<Props of="dds-content-block-horizontal" />
+<Props of="cds-content-block-horizontal" />
 
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector                 | Compatibility selector                            | Description |
-| --------------------------------------- | ------------------------------------------------- | ----------- |
-| `<dds-content-block-horizontal>`        | `data-autoid="dds--content-block-simple"`         | Component   |
-| `<dds-content-block-heading>`           | `data-autoid="dds--content-block__heading"`       | Component   |
-| `<dds-content-item-horizontal>`         | `data-autoid="dds--content-item-horizontal"`      | Component   |
-| `<dds-content-item-horizontal-copy>`    | `data-autoid="dds--content-item-horizontal-copy"` | Component   |
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
+| Web Components selector              | Compatibility selector                            | Description |
+| ------------------------------------ | ------------------------------------------------- | ----------- |
+| `<cds-content-block-horizontal>`     | `data-autoid="cds--content-block-simple"`         | Component   |
+| `<cds-content-block-heading>`        | `data-autoid="cds--content-block__heading"`       | Component   |
+| `<cds-content-item-row>`      | `data-autoid="cds--content-item-row"`      | Component   |
+| `<cds-content-item-row-copy>` | `data-autoid="cds--content-item-row-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
index b77cfcf8229..8b958115da5 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/README.stories.react.mdx
@@ -22,44 +22,44 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 function App() {
   return (
-    <DDSContentBlockHorizontal>
-      <DDSContentBlockHeading>
+    <C4DContentBlockHorizontal>
+      <C4DContentBlockHeading>
         Lorem ipsum dolor sit amet
-      </DDSContentBlockHeading>
-      <DDSContentItemHorizontal>
-        <DDSContentItemHorizontalEyebrow>
+      </C4DContentBlockHeading>
+      <C4DContentItemRow>
+        <C4DContentItemRowEyebrow>
           Lorem ipsum
-        </DDSContentItemHorizontalEyebrow>
-        <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-        <DDSContentItemHorizontalCopy>{copy}</DDSContentItemHorizontalCopy>
-        <DDSLinkList slot="footer" type="vertical">
-          <DDSLinkListItemCTA
+        </C4DContentItemRowEyebrow>
+        <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+        <C4DContentItemRowCopy>{copy}</C4DContentItemRowCopy>
+        <C4DLinkList slot="footer" type="vertical">
+          <C4DLinkListItemCTA
             icon-placement="right"
             href="https://www.ibm.com"
             cta-type="local">
             Link text
-          </DDSLinkListItemCTA>
-          <DDSLinkListItemCTA
+          </C4DLinkListItemCTA>
+          <C4DLinkListItemCTA
             icon-placement="right"
             href="https://www.ibm.com"
             cta-type="external">
             External link text
-          </DDSLinkListItemCTA>
-        </DDSLinkList>
-      </DDSContentItemHorizontal>
-    </DDSContentBlockHorizontal>
+          </C4DLinkListItemCTA>
+        </C4DLinkList>
+      </C4DContentItemRow>
+    </C4DContentBlockHorizontal>
   );
 }
 ```
@@ -76,9 +76,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<dds-content-block-horizontal>`     | `data-autoid="dds--content-block-simple"`         | Component   |
-| `<dds-content-block-heading>`        | `data-autoid="dds--content-block__heading"`       | Component   |
-| `<dds-content-item-horizontal>`      | `data-autoid="dds--content-item-horizontal"`      | Component   |
-| `<dds-content-item-horizontal-copy>` | `data-autoid="dds--content-item-horizontal-copy"` | Component   |
+| `<cds-content-block-horizontal>`     | `data-autoid="cds--content-block-simple"`         | Component   |
+| `<cds-content-block-heading>`        | `data-autoid="cds--content-block__heading"`       | Component   |
+| `<cds-content-item-row>`      | `data-autoid="cds--content-item-row"`      | Component   |
+| `<cds-content-item-row-copy>` | `data-autoid="cds--content-item-row-copy"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
index 41bce598b1f..18fe807110b 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.react.tsx
@@ -13,15 +13,15 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
+import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
 
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -32,44 +32,52 @@ const copy =
   'Phasellus at elit sollicitudin.';
 
 const linkListItem = (
-  <DDSContentItemHorizontal>
-    <DDSContentItemHorizontalEyebrow>Lorem ipsum</DDSContentItemHorizontalEyebrow>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalCopy>{copy}</DDSContentItemHorizontalCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+  <C4DContentItemRow>
+    <C4DContentItemRowEyebrow>
+      Lorem ipsum
+    </C4DContentItemRowEyebrow>
+    <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+    <C4DContentItemRowCopy>{copy}</C4DContentItemRowCopy>
+    <C4DLinkList slot="footer" type="vertical">
+      <C4DLinkListItemCTA
+        icon-placement="right"
+        href="https://www.ibm.com"
+        cta-type="local">
         Link text
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA
+        icon-placement="right"
+        href="https://www.ibm.com"
+        cta-type="external">
         External link text
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentItemHorizontal>
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
+  </C4DContentItemRow>
 );
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading, border } = args?.ContentBlockHorizontal ?? {};
-  const headingElement = document.querySelector('dds-content-block-heading');
+  const headingElement = document.querySelector('cds-content-block-heading');
 
   if (headingElement) {
     headingElement.shadowRoot!.textContent = heading;
   }
 
   return (
-    <DDSContentBlockHorizontal border={border}>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
+    <C4DContentBlockHorizontal border={border}>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
       {linkListItem} {linkListItem} {linkListItem}
-    </DDSContentBlockHorizontal>
+    </C4DContentBlockHorizontal>
   );
 };
 
 export default {
   title: 'Components/Content block horizontal',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-12 bx--no-gutter">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-12 cds--no-gutter">{story()}</div>
         </div>
       </div>
     ),
diff --git a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
index 3535fb43e8b..776b615a804 100644
--- a/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
+++ b/packages/web-components/src/components/content-block-horizontal/__stories__/content-block-horizontal.stories.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
 import { boolean } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -19,37 +19,35 @@ const copy =
   'Phasellus at elit sollicitudin.';
 
 const linkListItem = html`
-  <dds-content-item-horizontal>
-    <dds-content-item-horizontal-eyebrow
-      >Lorem ipsum</dds-content-item-horizontal-eyebrow
-    >
-    <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-    <dds-content-item-horizontal-copy>${copy}</dds-content-item-horizontal-copy>
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+  <c4d-content-item-row>
+    <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+    <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+    <c4d-content-item-row-copy>${copy}</c4d-content-item-row-copy>
+    <c4d-link-list slot="footer" type="vertical">
+      <c4d-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
         cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-      <dds-link-list-item-cta
+      </c4d-link-list-item-cta>
+      <c4d-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
         cta-type="external">
         External link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-item-horizontal>
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-item-row>
 `;
 
 export const Default = (args) => {
   const { heading, border } = args?.ContentBlockHorizontal ?? {};
 
   return html`
-    <dds-content-block-horizontal ?border=${border}>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
+    <c4d-content-block-horizontal ?border=${border}>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
       ${linkListItem} ${linkListItem} ${linkListItem}
-    </dds-content-block-horizontal>
+    </c4d-content-block-horizontal>
   `;
 };
 
@@ -57,9 +55,9 @@ export default {
   title: 'Components/Content block horizontal',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
index b06dcdf6f6b..53a6e189308 100644
--- a/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
+++ b/packages/web-components/src/components/content-block-horizontal/__tests__/content-block-horizontal.test.ts
@@ -1,16 +1,16 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import '../../content-item-horizontal/content-item-horizontal';
-import '../../content-item-horizontal/content-item-horizontal-copy';
-import '../../content-item-horizontal/content-item-horizontal-eyebrow';
+import { html, render } from 'lit/html.js';
+import '../../content-item-row/content-item-row';
+import '../../content-item-row/content-item-row-copy';
+import '../../content-item-row/content-item-row-eyebrow';
 import '../content-block-horizontal';
 import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
 import { CTA_TYPE } from '../../cta/defs';
@@ -18,17 +18,17 @@ import { CTA_TYPE } from '../../cta/defs';
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-content-block-horizontal> ${children} </dds-content-block-horizontal>
+    <c4d-content-block-horizontal> ${children} </c4d-content-block-horizontal>
   `;
 };
 
-describe('dds-content-block-horizontal', function () {
+describe('c4d-content-block-horizontal', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-horizontal')
+        document.body.querySelector('c4d-content-block-horizontal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -36,34 +36,34 @@ describe('dds-content-block-horizontal', function () {
       render(
         template({
           children: html`
-            <dds-content-item-horizontal>
-              <dds-content-item-horizontal-eyebrow>eyebrow-foo</dds-content-item-horizontal-eyebrow>
-              <dds-content-item-heading>heading-foo</dds-content-item-heading>
-              <dds-content-item-horizontal-copy>copy-foo</dds-content-item-horizontal-copy>
-              <dds-link-list slot="footer" type="vertical">
-                <dds-link-list-item-cta
+            <c4d-content-item-row>
+              <c4d-content-item-row-eyebrow>eyebrow-foo</c4d-content-item-row-eyebrow>
+              <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
+              <c4d-content-item-row-copy>copy-foo</c4d-content-item-row-copy>
+              <c4d-link-list slot="footer" type="vertical">
+                <c4d-link-list-item-cta
                   icon-placement="${ICON_PLACEMENT.RIGHT}"
                   href="https://www.ibm.com"
                   cta-type="${CTA_TYPE.LOCAL}"
                 >
                   cta-copy-foo
-                </dds-link-list-item-cta>
-                <dds-link-list-item-cta
+                </c4d-link-list-item-cta>
+                <c4d-link-list-item-cta
                   icon-placement="${ICON_PLACEMENT.RIGHT}"
                   href="https://www.ibm.com"
                   cta-type="${CTA_TYPE.EXTERNAL}"
                 >
                   cta-copy-foo
-                </dds-link-list-item-cta>
-              </dds-link-list>
-             </content-item-horizontal>
+                </c4d-link-list-item-cta>
+              </c4d-link-list>
+             </content-item-row>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-horizontal')
+        document.body.querySelector('c4d-content-block-horizontal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.scss b/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.scss
index 09a387356cf..9d82e184fc6 100644
--- a/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.scss
+++ b/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.scss
@@ -5,5 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-horizontal/content-block-horizontal';
-@import '../../../../styles/scss/components/content-block-horizontal/content-block-horizontal';
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-horizontal';
diff --git a/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.ts b/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.ts
index 81be74b8dc5..bad0f776974 100644
--- a/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.ts
+++ b/packages/web-components/src/components/content-block-horizontal/content-block-horizontal.ts
@@ -7,33 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, html, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSContentGroup from '../content-group/content-group';
+import C4DContentGroup from '../content-group/content-group';
 import '../horizontal-rule/horizontal-rule';
 import styles from './content-block-horizontal.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Horizontal version of content group.
  *
- * @element dds-content-block-horizontal
+ * @element c4d-content-block-horizontal
  */
-@customElement(`${ddsPrefix}-content-block-horizontal`)
-class DDSContentBlockHorizontal extends DDSContentGroup {
+@customElement(`${c4dPrefix}-content-block-horizontal`)
+class C4DContentBlockHorizontal extends C4DContentGroup {
   @property({ type: Boolean, reflect: true, attribute: 'border' })
   border = false;
 
   render() {
     return html`
-      ${super.render()} ${this.border ? html` <dds-hr></dds-hr> ` : ''}
+      ${super.render()} ${this.border ? html` <c4d-hr></c4d-hr> ` : ''}
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-horizontal`;
+    return `${c4dPrefix}--content-block-horizontal`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -44,5 +45,10 @@ class DDSContentBlockHorizontal extends DDSContentGroup {
   }
 }
 
+console.warn(
+  'The content-block-horizontal component has been deprecated in favor of the content-section/block and content item horizontal component. ' +
+    'See content-section/block and content item horizontal documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockHorizontal;
+export default C4DContentBlockHorizontal;
diff --git a/packages/web-components/src/components/content-block-horizontal/index.ts b/packages/web-components/src/components/content-block-horizontal/index.ts
index 19573b3c64c..e7a8801faeb 100644
--- a/packages/web-components/src/components/content-block-horizontal/index.ts
+++ b/packages/web-components/src/components/content-block-horizontal/index.ts
@@ -10,4 +10,4 @@
 import './content-block-horizontal';
 import '../content-block/content-block-heading';
 import '../content-block/content-block-complementary';
-import '../content-item-horizontal/index';
+import '../content-item-row/index';
diff --git a/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx
index 9f8f734bd9f..188a4b731c6 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-media/__stories__/README.stories.mdx
@@ -1,11 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Content Block Media
 
 > 💡 Check our
@@ -25,7 +26,6 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-media/index
 
 // with image
 import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
-
 ```
 
 <Description markdown={`${cdnJs({ components: ['content-block-media'] })}`} />
@@ -35,55 +35,59 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
 ### HTML
 
 ```html
-<dds-content-block-media>
-  <dds-content-block-heading>
+<cds-content-block-media>
+  <cds-content-block-heading>
     Curabitur malesuada varius mi eu posuere
-  </dds-content-block-heading>
-  <dds-content-block-copy size="lg">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
-    consequat libero.
-  </dds-content-block-copy>
-  <dds-content-block-media-content>
-    <dds-content-group-heading>
+  </cds-content-block-heading>
+  <cds-content-block-copy size="lg">
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit
+    sollicitudin, sodales nulla quis, consequat libero.
+  </cds-content-block-copy>
+  <cds-content-block-media-content>
+    <cds-content-group-heading>
       Lorem ipsum dolor sit amet
-    </dds-content-group-heading>
-    <dds-image
+    </cds-content-group-heading>
+    <cds-image
       slot="media"
       alt="Image alt text"
       default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-      heading="Lorem ipsum"
-    >
-      <dds-image-item
+      heading="Lorem ipsum">
+      <cds-image-item
         media="(min-width: 672px)"
-        srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-      >
-      </dds-image-item>
-      <dds-image-item
+        srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
+      </cds-image-item>
+      <cds-image-item
         media="(min-width: 400px)"
-        srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-      >
-      </dds-image-item>
-      <dds-image-item
+        srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
+      </cds-image-item>
+      <cds-image-item
         media="(min-width: 320px)"
-        srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+        srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
+      </cds-image-item>
+    </cds-image>
+    <cds-content-item>
+      <cds-content-item-heading
+        >Lorem ipsum dolor sit amet.</cds-content-item-heading
       >
-      </dds-image-item>
-    </dds-image>
-    <dds-content-item>
-      <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-      <dds-content-item-copy>
-        Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
-        quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
-        Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-      </dds-content-item-copy>
-    </dds-content-item>
-    <dds-card-link-cta slot="footer" href="https://example.com" cta-type="local">
-      <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-      <dds-card-cta-footer></dds-card-cta-footer>
-    </dds-card-link-cta>
-  </dds-content-block-media-content>
-</dds-content-block-media>
+      <cds-content-item-copy>
+        Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed
+        interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus
+        efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
+        tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis.
+        Donec quis pretium odio, in dignissim sapien.
+      </cds-content-item-copy>
+    </cds-content-item>
+    <cds-card-link-cta
+      slot="footer"
+      href="https://example.com"
+      cta-type="local">
+      <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+      <cds-card-cta-footer></cds-card-cta-footer>
+    </cds-card-link-cta>
+  </cds-content-block-media-content>
+</cds-content-block-media>
 ```
 
 ## With Aside Content
@@ -103,78 +107,78 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<dds-content-block-media complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-    <dds-content-block-heading>
+<cds-content-block-media complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+    <cds-content-block-heading>
       Curabitur malesuada varius mi eu posuere
-    </dds-content-block-heading>
-    <dds-content-block-copy size="lg">
+    </cds-content-block-heading>
+    <cds-content-block-copy size="lg">
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
       Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
       consequat libero.
-    </dds-content-block-copy>
-    <dds-content-block-media-content>
-      <dds-content-group-heading>
+    </cds-content-block-copy>
+    <cds-content-block-media-content>
+      <cds-content-group-heading>
         Lorem ipsum dolor sit amet
-      </dds-content-group-heading>
-      <dds-image
+      </cds-content-group-heading>
+      <cds-image
         slot="media"
         alt="Image alt text"
         default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         heading="Lorem ipsum"
       >
-        <dds-image-item
+        <cds-image-item
           media="(min-width: 672px)"
           srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item
+        </cds-image-item>
+        <cds-image-item
           media="(min-width: 400px)"
           srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item
+        </cds-image-item>
+        <cds-image-item
           media="(min-width: 320px)"
           srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </dds-image-item>
-      </dds-image>
-      <dds-content-item>
-        <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-        <dds-content-item-copy>
+        </cds-image-item>
+      </cds-image>
+      <cds-content-item>
+        <cds-content-item-heading>Lorem ipsum dolor sit amet.</cds-content-item-heading>
+        <cds-content-item-copy>
           Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
           quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
           Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-        </dds-content-item-copy>
-      </dds-content-item>
-      <dds-card-link-cta slot="footer" href="https://example.com" cta-type="local">
-        <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-footer>
-      </dds-card-link>
-    </dds-content-block-media-content>
-
-    <dds-link-list type="default" slot="complementary">
-        <dds-link-list-heading>Lorem Ipsum</dds-link-list-heading>
-        <dds-link-list-item-card-cta href="https://example.com" cta-type="local">
+        </cds-content-item-copy>
+      </cds-content-item>
+      <cds-card-link-cta slot="footer" href="https://example.com" cta-type="local">
+        <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+        <cds-card-cta-footer></cds-card-footer>
+      </cds-card-link>
+    </cds-content-block-media-content>
+
+    <cds-link-list type="default" slot="complementary">
+        <cds-link-list-heading>Lorem Ipsum</cds-link-list-heading>
+        <cds-link-list-item-cta href="https://example.com" cta-type="local" type="default">
           <p>Lorem Ipsum</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-        <dds-link-list-item-card-cta href="https://example.com" cta-type="local">
+
+        </cds-link-list-item-cta>
+        <cds-link-list-item-cta href="https://example.com" cta-type="local" type="default">
           <p>Lorem Ipsum</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-    </dds-link-list>
-</dds-content-block-media>
+
+        </cds-link-list-item-cta>
+    </cds-link-list>
+</cds-content-block-media>
 ```
 
 ## Props
 
-<Props of="dds-content-block-media" />
+<Props of="cds-content-block-media" />
 
 ## Stable selectors
 
-| Name                                 | Description                                        |
-| ------------------------------------ | -------------------------------------------------- |
-| `dds--content-block-media`                | Content block media wrapper element.                    |
-| `dds--content-block-media-content`   | Content item for Content block media               |
+| Name                               | Description                          |
+| ---------------------------------- | ------------------------------------ |
+| `cds--content-block-media`         | Content block media wrapper element. |
+| `cds--content-block-media-content` | Content item for Content block media |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx
index a25d839ebde..314aad026ab 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-media/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media';
 
@@ -17,60 +22,75 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content.js';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content.js';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
 
 function App() {
   return (
-  <DDSContentBlockMedia>
-    <DDSContentBlockHeading>Curabitur malesuada varius mi eu posuere</DDSContentBlockHeading>
-    <DDSContentBlockCopy size="lg">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
-    consequat libero.
-    </DDSContentBlockCopy>
-    <DDSContentBlockMediaContent>
-      <DDSContentGroupHeading>Lorem ipsum dolor sit amet</DDSContentGroupHeading>
-      <DDSImage
-        slot="media"
-        alt="Image alt text"
-        defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-        heading="Lorem ipsum">
-        <DDSImageItem
-          media="(min-width: 672px)"
-          srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        <DDSImageItem
-          media="(min-width: 400px)"
-          srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        <DDSImageItem
-          media="(min-width: 320px)"
-          srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-      </DDSImage>
-      <DDSContentItem>
-        <DDSContentItemHeading>Lorem ipsum dolor sit amet.</DDSContentItemHeading>
-        <DDSContentItemCopy>
-          Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
-          quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
-          Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-        </DDSContentItemCopy>
-      </DDSContentItem>
-      <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-        <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-        <DDSCardCTAFooter/>
-      </DDSCardLinkCTA>
-    </DDSContentBlockMediaContent>
-  </DDSContentBlockMedia>
+    <C4DContentBlockMedia>
+      <C4DContentBlockHeading>
+        Curabitur malesuada varius mi eu posuere
+      </C4DContentBlockHeading>
+      <C4DContentBlockCopy size="lg">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
+      </C4DContentBlockCopy>
+      <C4DContentBlockMediaContent>
+        <C4DContentGroupHeading>
+          Lorem ipsum dolor sit amet
+        </C4DContentGroupHeading>
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          heading="Lorem ipsum">
+          <C4DImageItem
+            media="(min-width: 672px)"
+            srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+          <C4DImageItem
+            media="(min-width: 400px)"
+            srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+          <C4DImageItem
+            media="(min-width: 320px)"
+            srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+        </C4DImage>
+        <C4DContentItem>
+          <C4DContentItemHeading>
+            Lorem ipsum dolor sit amet.
+          </C4DContentItemHeading>
+          <C4DContentItemCopy>
+            Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus
+            sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris
+            finibus efficitur quis ut arcu. Praesent purus turpis, venenatis
+            eget odio et, tincidunt bibendum sem. Curabitur pretium elit non
+            blandit lobortis. Donec quis pretium odio, in dignissim sapien.
+          </C4DContentItemCopy>
+        </C4DContentItem>
+        <C4DCardLinkCTA
+          slot="footer"
+          href="https://example.com"
+          cta-type="local">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter />
+        </C4DCardLinkCTA>
+      </C4DContentBlockMediaContent>
+    </C4DContentBlockMedia>
   );
 }
 ```
@@ -78,67 +98,82 @@ function App() {
 ### JS (with aside content)
 
 ```javascript
-import DDSContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content.js';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
-import DDSImageWithCaption from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content.js';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DImageWithCaption from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
 
 function App() {
   return (
-  <DDSContentBlockMedia>
-    <DDSContentBlockHeading>Curabitur malesuada varius mi eu posuere</DDSContentBlockHeading>
-    <DDSContentBlockCopy size="lg">
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
-    consequat libero.
-    </DDSContentBlockCopy>
-    <DDSContentBlockMediaContent>
-      <DDSContentGroupHeading>Lorem ipsum dolor sit amet</DDSContentGroupHeading>
-      <DDSImageWithCaption
-        slot="media"
-        alt="Image alt text"
-        defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-        heading="Lorem ipsum">
-        <DDSImageItem
-          media="(min-width: 672px)"
-          srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        <DDSImageItem
-          media="(min-width: 400px)"
-          srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        <DDSImageItem
-          media="(min-width: 320px)"
-          srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-      </DDSImageWithCaption>
-      <DDSContentItem>
-        <DDSContentItemHeading>Lorem ipsum dolor sit amet.</DDSContentItemHeading>
-        <DDSContentItemCopy>
-          Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
-          quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
-          Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.
-        </DDSContentItemCopy>
-      </DDSContentItem>
-      <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-        <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-        <DDSCardCTAFooter/>
-      </DDSCardLinkCTA>
-    </DDSContentBlockMediaContent>
-    <DDSLinkList type="default" slot="complementary">
-      <DDSLinkListHeading>Lorem Ipsum</DDSLinkListHeading>
-      <DDSLinkListItemCardCTA href="https://example.com" cta-type="local">
-        <p>Lorem Ipsum</p>
-        <DDSCardCTAFooter/>
-      </DDSLinkListItemCardCTA>
-    </DDSLinkList>
-  </DDSContentBlockMedia>
+    <C4DContentBlockMedia>
+      <C4DContentBlockHeading>
+        Curabitur malesuada varius mi eu posuere
+      </C4DContentBlockHeading>
+      <C4DContentBlockCopy size="lg">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
+      </C4DContentBlockCopy>
+      <C4DContentBlockMediaContent>
+        <C4DContentGroupHeading>
+          Lorem ipsum dolor sit amet
+        </C4DContentGroupHeading>
+        <C4DImageWithCaption
+          slot="media"
+          alt="Image alt text"
+          defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          heading="Lorem ipsum">
+          <C4DImageItem
+            media="(min-width: 672px)"
+            srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+          <C4DImageItem
+            media="(min-width: 400px)"
+            srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+          <C4DImageItem
+            media="(min-width: 320px)"
+            srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+        </C4DImageWithCaption>
+        <C4DContentItem>
+          <C4DContentItemHeading>
+            Lorem ipsum dolor sit amet.
+          </C4DContentItemHeading>
+          <C4DContentItemCopy>
+            Lorem ipsum dolor sit amet, *consectetur* adipiscing elit. Vivamus
+            sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris
+            finibus efficitur quis ut arcu. Praesent purus turpis, venenatis
+            eget odio et, tincidunt bibendum sem. Curabitur pretium elit non
+            blandit lobortis. Donec quis pretium odio, in dignissim sapien.
+          </C4DContentItemCopy>
+        </C4DContentItem>
+        <C4DCardLinkCTA
+          slot="footer"
+          href="https://example.com"
+          cta-type="local">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter />
+        </C4DCardLinkCTA>
+      </C4DContentBlockMediaContent>
+      <C4DLinkList type="default" slot="complementary">
+        <C4DLinkListHeading>Lorem Ipsum</C4DLinkListHeading>
+        <C4DLinkListItemCardCTA href="https://example.com" cta-type="local">
+          <p>Lorem Ipsum</p>
+          <C4DCardCTAFooter />
+        </C4DLinkListItemCardCTA>
+      </C4DLinkList>
+    </C4DContentBlockMedia>
   );
 }
 ```
@@ -149,11 +184,13 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-content-block-media>`        | N/A                    | Component   |
-| `<dds-content-block-media-content>`        | N/A                    | Component   |
+| Web Components selector             | Compatibility selector | Description |
+| ----------------------------------- | ---------------------- | ----------- |
+| `<cds-content-block-media>`         | N/A                    | Component   |
+| `<cds-content-block-media-content>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.react.tsx b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.react.tsx
index edb2dce143c..eb831a914d7 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.react.tsx
@@ -12,26 +12,26 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
 // eslint-disable-next-line max-len
-import DDSContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItemCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-card-cta';
+import C4DContentBlockMediaContent from '@carbon/ibmdotcom-web-components/es/components-react/content-block-media/content-block-media-content';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 
 import readme from './README.stories.react.mdx';
 import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/defs';
@@ -96,158 +96,217 @@ const linkListItems = [
   'Explore AI use cases in all industries',
 ];
 
-export const Default = args => {
-  const { blockHeading, simpleGroupHeading, featureCard, complementaryStyleScheme } = args?.ContentBlockMedia ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+export const Default = (args) => {
+  const {
+    blockHeading,
+    simpleGroupHeading,
+    featureCard,
+    complementaryStyleScheme,
+  } = args?.ContentBlockMedia ?? {};
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent.shadowRoot!.textContent = blockHeading;
   }
 
   return (
-    <DDSContentBlockMedia complementary-style-scheme={complementaryStyleScheme || undefined}>
-      <DDSContentBlockHeading>{blockHeading}</DDSContentBlockHeading>
-      <DDSContentBlockCopy size="md">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
-        consequat libero.
-      </DDSContentBlockCopy>
-      <DDSContentBlockMediaContent>
-        <DDSContentGroupHeading>{simpleGroupHeading}</DDSContentGroupHeading>
-        <DDSImage slot="media" alt="Image alt text" defaultSrc={imgLg16x9} heading="Lorem ipsum">
-          <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-          <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-          <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-        </DDSImage>
+    <C4DContentBlockMedia
+      complementary-style-scheme={complementaryStyleScheme || undefined}>
+      <C4DContentBlockHeading>{blockHeading}</C4DContentBlockHeading>
+      <C4DContentBlockCopy size="md">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
+      </C4DContentBlockCopy>
+      <C4DContentBlockMediaContent>
+        <C4DContentGroupHeading>{simpleGroupHeading}</C4DContentGroupHeading>
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          defaultSrc={imgLg16x9}
+          heading="Lorem ipsum">
+          <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+          <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+          <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+        </C4DImage>
         {items.map(({ heading: itemHeading, copy: itemCopy }) => (
-          <DDSContentItem>
-            <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-            <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-          </DDSContentItem>
+          <C4DContentItem>
+            <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+            <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+          </C4DContentItem>
         ))}
-        <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-          <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      </DDSContentBlockMediaContent>
-      <DDSContentBlockMediaContent>
-        <DDSContentGroupHeading>{simpleGroupHeading}</DDSContentGroupHeading>
-        <DDSImage slot="media" alt="Image alt text" defaultSrc={imgLg16x9} heading="Lorem ipsum">
-          <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-          <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-          <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-        </DDSImage>
+        <C4DCardLinkCTA
+          slot="footer"
+          href="https://example.com"
+          cta-type="local">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentBlockMediaContent>
+      <C4DContentBlockMediaContent>
+        <C4DContentGroupHeading>{simpleGroupHeading}</C4DContentGroupHeading>
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          defaultSrc={imgLg16x9}
+          heading="Lorem ipsum">
+          <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+          <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+          <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+        </C4DImage>
         {items.map(({ heading: itemHeading, copy: itemCopy }) => (
-          <DDSContentItem>
-            <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-            <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-          </DDSContentItem>
+          <C4DContentItem>
+            <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+            <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+          </C4DContentItem>
         ))}
-        <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-          <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      </DDSContentBlockMediaContent>
-      <DDSContentBlockMediaContent>
+        <C4DCardLinkCTA
+          slot="footer"
+          href="https://example.com"
+          cta-type="local">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentBlockMediaContent>
+      <C4DContentBlockMediaContent>
         {featureCard === 'CTA' ? (
-          <DDSFeatureCTA href="https://example.com" cta-type="local">
-            <DDSImage slot="image" alt="Feature card image" default-src={imgLg1x1} />
-            <DDSCardHeading>Consectetur adipisicing elit</DDSCardHeading>
-            <DDSFeatureCTAFooter></DDSFeatureCTAFooter>
-          </DDSFeatureCTA>
+          <C4DFeatureCTA href="https://example.com" cta-type="local">
+            <C4DImage
+              slot="image"
+              alt="Feature card image"
+              default-src={imgLg1x1}
+            />
+            <C4DCardHeading>Consectetur adipisicing elit</C4DCardHeading>
+            <C4DFeatureCTAFooter></C4DFeatureCTAFooter>
+          </C4DFeatureCTA>
         ) : (
           ''
         )}
-      </DDSContentBlockMediaContent>
-    </DDSContentBlockMedia>
+      </C4DContentBlockMediaContent>
+    </C4DContentBlockMedia>
   );
 };
 
-export const withLinkList = args => {
-  const { blockHeading, simpleGroupHeading, featureCard, linkListHeading, complementaryStyleScheme, totalLinks } =
-    args?.ContentBlockMedia ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+export const withLinkList = (args) => {
+  const {
+    blockHeading,
+    simpleGroupHeading,
+    featureCard,
+    linkListHeading,
+    complementaryStyleScheme,
+    totalLinks,
+  } = args?.ContentBlockMedia ?? {};
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent.shadowRoot!.textContent = blockHeading;
   }
 
   return (
-    <DDSContentBlockMedia complementary-style-scheme={complementaryStyleScheme || undefined}>
-      <DDSContentBlockHeading>{blockHeading}</DDSContentBlockHeading>
-      <DDSContentBlockCopy size="md">
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at elit sollicitudin, sodales nulla quis,
-        consequat libero.
-      </DDSContentBlockCopy>
-      <DDSContentBlockMediaContent>
-        <DDSContentGroupHeading>{simpleGroupHeading}</DDSContentGroupHeading>
-        <DDSImage slot="media" alt="Image alt text" defaultSrc={imgLg16x9} heading="Lorem ipsum">
-          <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-          <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-          <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-        </DDSImage>
+    <C4DContentBlockMedia
+      complementary-style-scheme={complementaryStyleScheme || undefined}>
+      <C4DContentBlockHeading>{blockHeading}</C4DContentBlockHeading>
+      <C4DContentBlockCopy size="md">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
+      </C4DContentBlockCopy>
+      <C4DContentBlockMediaContent>
+        <C4DContentGroupHeading>{simpleGroupHeading}</C4DContentGroupHeading>
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          defaultSrc={imgLg16x9}
+          heading="Lorem ipsum">
+          <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+          <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+          <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+        </C4DImage>
         {items.map(({ heading: itemHeading, copy: itemCopy }) => (
-          <DDSContentItem>
-            <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-            <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-          </DDSContentItem>
+          <C4DContentItem>
+            <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+            <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+          </C4DContentItem>
         ))}
-        <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-          <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      </DDSContentBlockMediaContent>
-      <DDSContentBlockMediaContent>
-        <DDSContentGroupHeading>{simpleGroupHeading}</DDSContentGroupHeading>
-        <DDSImage slot="media" alt="Image alt text" defaultSrc={imgLg16x9} heading="Lorem ipsum">
-          <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-          <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-          <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-        </DDSImage>
+        <C4DCardLinkCTA
+          slot="footer"
+          href="https://example.com"
+          cta-type="local">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentBlockMediaContent>
+      <C4DContentBlockMediaContent>
+        <C4DContentGroupHeading>{simpleGroupHeading}</C4DContentGroupHeading>
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          defaultSrc={imgLg16x9}
+          heading="Lorem ipsum">
+          <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+          <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+          <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+        </C4DImage>
         {items.map(({ heading: itemHeading, copy: itemCopy }) => (
-          <DDSContentItem>
-            <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-            <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-          </DDSContentItem>
+          <C4DContentItem>
+            <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+            <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+          </C4DContentItem>
         ))}
-        <DDSCardLinkCTA slot="footer" href="https://example.com" cta-type="local">
-          <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      </DDSContentBlockMediaContent>
-      <DDSContentBlockMediaContent>
+        <C4DCardLinkCTA
+          slot="footer"
+          href="https://example.com"
+          cta-type="local">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentBlockMediaContent>
+      <C4DContentBlockMediaContent>
         {featureCard === 'CTA' ? (
-          <DDSFeatureCTA href="https://example.com" cta-type="local">
-            <DDSImage slot="image" alt="Feature card image" default-src={imgLg1x1} />
-            <DDSCardHeading>Consectetur adipisicing elit</DDSCardHeading>
-            <DDSFeatureCTAFooter></DDSFeatureCTAFooter>
-          </DDSFeatureCTA>
+          <C4DFeatureCTA href="https://example.com" cta-type="local">
+            <C4DImage
+              slot="image"
+              alt="Feature card image"
+              default-src={imgLg1x1}
+            />
+            <C4DCardHeading>Consectetur adipisicing elit</C4DCardHeading>
+            <C4DFeatureCTAFooter></C4DFeatureCTAFooter>
+          </C4DFeatureCTA>
         ) : (
           ''
         )}
-      </DDSContentBlockMediaContent>
-      <DDSLinkList type="default" slot="complementary">
-        <DDSLinkListHeading>{linkListHeading}</DDSLinkListHeading>
-        {linkListItems.slice(0, totalLinks).map(linkListCopy => (
-          <DDSLinkListItemCardCTA href="https://example.com" cta-type="local">
+      </C4DContentBlockMediaContent>
+      <C4DLinkList type="default" slot="complementary">
+        <C4DLinkListHeading>{linkListHeading}</C4DLinkListHeading>
+        {linkListItems.slice(0, totalLinks).map((linkListCopy) => (
+          <C4DLinkListItemCTA
+            href="https://example.com"
+            cta-type="local"
+            type="default">
             <p>{linkListCopy}</p>
-            <DDSCardCTAFooter></DDSCardCTAFooter>
-          </DDSLinkListItemCardCTA>
+          </C4DLinkListItemCTA>
         ))}
-      </DDSLinkList>
-    </DDSContentBlockMedia>
+      </C4DLinkList>
+    </C4DContentBlockMedia>
   );
 };
 
 withLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
       ContentBlockMedia: () => ({
-        blockHeading: text('Heading (required)', 'Curabitur malesuada varius mi eu posuere'),
-        simpleGroupHeading: text('Simple Group Heading (required)', 'Lorem ipsum dolor sit amet'),
+        blockHeading: text(
+          'Heading (required)',
+          'Curabitur malesuada varius mi eu posuere'
+        ),
+        simpleGroupHeading: text(
+          'Simple Group Heading (required)',
+          'Lorem ipsum dolor sit amet'
+        ),
         featureCard: select('FeatureCard (optional)', ['CTA', 'none'], 'CTA'),
         linkListHeading: text('Link list heading (heading)', 'Tutorials'),
         totalLinks: select('Number of links', [2, 3, 4], 2),
@@ -266,9 +325,11 @@ export default {
   decorators: [
     (story, { parameters }) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className={`${parameters.gridContentClasses} bx--no-gutter`}>{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className={`${parameters.gridContentClasses} cds--no-gutter`}>
+              {story()}
+            </div>
           </div>
         </div>
       );
@@ -276,12 +337,18 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-8',
+    gridContentClasses: 'cds--col-lg-8',
     hasStoryPadding: true,
     knobs: {
       ContentBlockMedia: () => ({
-        blockHeading: text('Heading (required)', 'Curabitur malesuada varius mi eu posuere'),
-        simpleGroupHeading: text('Simple Group Heading (required)', 'Lorem ipsum dolor sit amet'),
+        blockHeading: text(
+          'Heading (required)',
+          'Curabitur malesuada varius mi eu posuere'
+        ),
+        simpleGroupHeading: text(
+          'Simple Group Heading (required)',
+          'Lorem ipsum dolor sit amet'
+        ),
         featureCard: select('FeatureCard (optional)', ['CTA', 'none'], 'CTA'),
         complementaryStyleScheme: select(
           'Container bottom border',
diff --git a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts
index 256d5b83e5d..d80e1a91ad2 100644
--- a/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts
+++ b/packages/web-components/src/components/content-block-media/__stories__/content-block-media.stories.ts
@@ -11,8 +11,8 @@ import '../index';
 import '../../cta/index';
 import '../../link-list/link-list';
 import '../../link-list/link-list-heading';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';
@@ -86,104 +86,104 @@ export const Default = (args) => {
     complementaryStyleScheme,
   } = args?.ContentBlockMedia ?? {};
   return html`
-    <dds-content-block-media
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading> ${blockHeading} </dds-content-block-heading>
-      <dds-content-block-copy size="md"
+    <c4d-content-block-media
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading> ${blockHeading} </c4d-content-block-heading>
+      <c4d-content-block-copy size="md"
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
-      </dds-content-block-copy>
-      <dds-content-block-media-content>
-        <dds-content-group-heading>
+      </c4d-content-block-copy>
+      <c4d-content-block-media-content>
+        <c4d-content-group-heading>
           ${simpleGroupHeading}
-        </dds-content-group-heading>
-        <dds-image
+        </c4d-content-group-heading>
+        <c4d-image
           slot="media"
           alt="Image alt text"
           default-src="${imgLg16x9}"
           heading="Lorem ipsum">
-          <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-          </dds-image-item>
-        </dds-image>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+          </c4d-image-item>
+        </c4d-image>
         ${items.map(
           ({ heading: itemHeading, copy: itemCopy }) => html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >${itemHeading}</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >${itemHeading}</c4d-content-item-heading
               >
-              <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-            </dds-content-item>
+              <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+            </c4d-content-item>
           `
         )}
-        <dds-card-link-cta
+        <c4d-card-link-cta
           slot="footer"
           href="https://example.com"
           cta-type="local">
-          <dds-card-link-heading
-            >Lorem ipsum dolor sit amet</dds-card-link-heading
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-block-media-content>
-      <dds-content-block-media-content>
-        <dds-content-group-heading>
+          <c4d-card-cta-footer></c4d-card-cta-footer>
+        </c4d-card-link-cta>
+      </c4d-content-block-media-content>
+      <c4d-content-block-media-content>
+        <c4d-content-group-heading>
           ${simpleGroupHeading}
-        </dds-content-group-heading>
-        <dds-image
+        </c4d-content-group-heading>
+        <c4d-image
           slot="media"
           alt="Image alt text"
           default-src="${imgLg16x9}"
           heading="Lorem ipsum">
-          <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-          </dds-image-item>
-        </dds-image>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+          </c4d-image-item>
+        </c4d-image>
         ${items.map(
           ({ heading: itemHeading, copy: itemCopy }) => html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >${itemHeading}</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >${itemHeading}</c4d-content-item-heading
               >
-              <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-            </dds-content-item>
+              <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+            </c4d-content-item>
           `
         )}
-        <dds-card-link-cta
+        <c4d-card-link-cta
           slot="footer"
           href="https://example.com"
           cta-type="local">
-          <dds-card-link-heading
-            >Lorem ipsum dolor sit amet</dds-card-link-heading
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-block-media-content>
-      <dds-content-block-media-content>
+          <c4d-card-cta-footer></c4d-card-cta-footer>
+        </c4d-card-link-cta>
+      </c4d-content-block-media-content>
+      <c4d-content-block-media-content>
         ${featureCard === 'CTA'
           ? html`
-              <dds-feature-cta href="https://example.com" cta-type="local">
-                <dds-image
+              <c4d-feature-cta href="https://example.com" cta-type="local">
+                <c4d-image
                   slot="image"
                   alt="Feature card image"
-                  default-src="${imgLg1x1}"></dds-image>
-                <dds-card-heading
-                  >Consectetur adipisicing elit</dds-card-heading
+                  default-src="${imgLg1x1}"></c4d-image>
+                <c4d-card-heading
+                  >Consectetur adipisicing elit</c4d-card-heading
                 >
-                <dds-feature-cta-footer></dds-feature-cta-footer>
-              </dds-feature-cta>
+                <c4d-feature-cta-footer></c4d-feature-cta-footer>
+              </c4d-feature-cta>
             `
           : ``}
-      </dds-content-block-media-content>
-    </dds-content-block-media>
+      </c4d-content-block-media-content>
+    </c4d-content-block-media>
   `;
 };
 
@@ -197,124 +197,124 @@ export const withLinkList = (args) => {
     totalLinks,
   } = args?.ContentBlockMedia ?? {};
   return html`
-    <dds-content-block-media
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading> ${blockHeading} </dds-content-block-heading>
-      <dds-content-block-copy size="md"
+    <c4d-content-block-media
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading> ${blockHeading} </c4d-content-block-heading>
+      <c4d-content-block-copy size="md"
         >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
         ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero. Phasellus at
         elit sollicitudin, sodales nulla quis, consequat libero.
-      </dds-content-block-copy>
-      <dds-content-block-media-content>
-        <dds-content-group-heading>
+      </c4d-content-block-copy>
+      <c4d-content-block-media-content>
+        <c4d-content-group-heading>
           ${simpleGroupHeading}
-        </dds-content-group-heading>
-        <dds-image
+        </c4d-content-group-heading>
+        <c4d-image
           slot="media"
           alt="Image alt text"
           default-src="${imgLg16x9}"
           heading="Lorem ipsum">
-          <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-          </dds-image-item>
-        </dds-image>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+          </c4d-image-item>
+        </c4d-image>
         ${items.map(
           ({ heading: itemHeading, copy: itemCopy }) => html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >${itemHeading}</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >${itemHeading}</c4d-content-item-heading
               >
-              <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-            </dds-content-item>
+              <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+            </c4d-content-item>
           `
         )}
-        <dds-card-link-cta
+        <c4d-card-link-cta
           slot="footer"
           href="https://example.com"
           cta-type="local">
-          <dds-card-link-heading
-            >Lorem ipsum dolor sit amet</dds-card-link-heading
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-block-media-content>
-      <dds-content-block-media-content>
-        <dds-content-group-heading>
+          <c4d-card-cta-footer></c4d-card-cta-footer>
+        </c4d-card-link-cta>
+      </c4d-content-block-media-content>
+      <c4d-content-block-media-content>
+        <c4d-content-group-heading>
           Lorem ipsum dolor sit amet
-        </dds-content-group-heading>
-        <dds-image
+        </c4d-content-group-heading>
+        <c4d-image
           slot="media"
           alt="Image alt text"
           default-src="${imgLg16x9}"
           heading="Lorem ipsum">
-          <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-          </dds-image-item>
-          <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-          </dds-image-item>
-        </dds-image>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+          </c4d-image-item>
+        </c4d-image>
         ${items.map(
           ({ heading: itemHeading, copy: itemCopy }) => html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >${itemHeading}</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >${itemHeading}</c4d-content-item-heading
               >
-              <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-            </dds-content-item>
+              <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+            </c4d-content-item>
           `
         )}
-        <dds-card-link-cta
+        <c4d-card-link-cta
           slot="footer"
           href="https://example.com"
           cta-type="local">
-          <dds-card-link-heading
-            >Lorem ipsum dolor sit amet</dds-card-link-heading
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-block-media-content>
-      <dds-content-block-media-content>
+          <c4d-card-cta-footer></c4d-card-cta-footer>
+        </c4d-card-link-cta>
+      </c4d-content-block-media-content>
+      <c4d-content-block-media-content>
         ${featureCard === 'CTA'
           ? html`
-              <dds-feature-cta href="https://example.com" cta-type="local">
-                <dds-image
+              <c4d-feature-cta href="https://example.com" cta-type="local">
+                <c4d-image
                   slot="image"
                   alt="Feature card image"
-                  default-src="${imgLg1x1}"></dds-image>
-                <dds-card-heading
-                  >Consectetur adipisicing elit</dds-card-heading
+                  default-src="${imgLg1x1}"></c4d-image>
+                <c4d-card-heading
+                  >Consectetur adipisicing elit</c4d-card-heading
                 >
-                <dds-feature-cta-footer> </dds-feature-cta-footer>
-              </dds-feature-cta>
+                <c4d-feature-cta-footer> </c4d-feature-cta-footer>
+              </c4d-feature-cta>
             `
           : ``}
-      </dds-content-block-media-content>
-      <dds-link-list type="default" slot="complementary">
-        <dds-link-list-heading>${linkListHeading}</dds-link-list-heading>
+      </c4d-content-block-media-content>
+      <c4d-link-list type="default" slot="complementary">
+        <c4d-link-list-heading>${linkListHeading}</c4d-link-list-heading>
         ${linkListItems.slice(0, totalLinks).map(
           (linkListCopy) => html`
-            <dds-link-list-item-card-cta
+            <c4d-link-list-item-cta
               href="https://example.com"
-              cta-type="local">
+              cta-type="local"
+              type="default">
               <p>${linkListCopy}</p>
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-link-list-item-card-cta>
+            </c4d-link-list-item-cta>
           `
         )}
-      </dds-link-list>
-    </dds-content-block-media>
+      </c4d-link-list>
+    </c4d-content-block-media>
   `;
 };
 
 withLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
       ContentBlockMedia: () => ({
         blockHeading: textNullable(
@@ -357,9 +357,9 @@ export default {
   title: 'Components/Content block media',
   decorators: [
     (story, { parameters }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="${parameters.gridContentClasses} bx--no-gutter">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="${parameters.gridContentClasses} cds--no-gutter">
             ${story()}
           </div>
         </div>
@@ -368,7 +368,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-8',
+    gridContentClasses: 'cds--col-lg-8',
     hasStoryPadding: true,
     knobs: {
       ContentBlockMedia: () => ({
diff --git a/packages/web-components/src/components/content-block-media/__tests__/content-block-media.test.ts b/packages/web-components/src/components/content-block-media/__tests__/content-block-media.test.ts
index fc8530e1763..5a4e444e9f4 100644
--- a/packages/web-components/src/components/content-block-media/__tests__/content-block-media.test.ts
+++ b/packages/web-components/src/components/content-block-media/__tests__/content-block-media.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../content-block-media';
 import '../content-block-media-content';
 import '../../content-item/content-item';
@@ -17,17 +17,17 @@ import '../../content-item/content-item-copy';
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-content-block-media> ${children} </dds-content-block-media>
+    <c4d-content-block-media> ${children} </c4d-content-block-media>
   `;
 };
 
-describe('dds-content-block-media', function () {
+describe('c4d-content-block-media', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-media')
+        document.body.querySelector('c4d-content-block-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -35,63 +35,63 @@ describe('dds-content-block-media', function () {
       render(
         template({
           children: html`
-            <dds-content-block-heading>
+            <c4d-content-block-heading>
               Curabitur malesuada varius mi eu posuere
-            </dds-content-block-heading>
-            <dds-content-block-paragraph>
+            </c4d-content-block-heading>
+            <c4d-content-block-paragraph>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
               ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus
               at elit sollicitudin, sodales nulla quis, consequat libero.
               Phasellus at elit sollicitudin, sodales nulla quis, consequat
               libero.
-            </dds-content-block-paragraph>
-            <dds-content-block-media-content>
-              <dds-content-group-heading>
+            </c4d-content-block-paragraph>
+            <c4d-content-block-media-content>
+              <c4d-content-group-heading>
                 Lorem ipsum dolor sit amet
-              </dds-content-group-heading>
-              <dds-image
+              </c4d-content-group-heading>
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
                 heading="Lorem ipsum">
-                <dds-image-item
+                <c4d-image-item
                   media="(min-width: 672px)"
                   srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-                </dds-image-item>
-                <dds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 400px)"
                   srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-                </dds-image-item>
-                <dds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 320px)"
                   srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616">
-                </dds-image-item>
-              </dds-image>
-              <dds-content-item>
-                <dds-content-item-heading
-                  >Lorem ipsum dolor sit amet.</dds-content-item-heading
+                </c4d-image-item>
+              </c4d-image>
+              <c4d-content-item>
+                <c4d-content-item-heading
+                  >Lorem ipsum dolor sit amet.</c4d-content-item-heading
                 >
-                <dds-content-item-copy>
+                <c4d-content-item-copy>
                   Lorem ipsum dolor sit amet, *consectetur* adipiscing elit.
                   Vivamus sed interdum tortor. Sed id pellentesque diam. In ut
                   quam id mauris finibus efficitur quis ut arcu. Praesent purus
                   turpis, venenatis eget odio et, tincidunt bibendum sem.
                   Curabitur pretium elit non blandit lobortis. Donec quis
                   pretium odio, in dignissim sapien.
-                </dds-content-item-copy>
-              </dds-content-item>
-              <dds-card-link slot="footer" href="https://example.com">
+                </c4d-content-item-copy>
+              </c4d-content-item>
+              <c4d-card-link slot="footer" href="https://example.com">
                 <p>Lorem ipsum dolor sit amet</p>
-                <dds-card-footer></dds-card-footer>
-              </dds-card-link>
-            </dds-content-block-media-content>
+                <c4d-card-footer></c4d-card-footer>
+              </c4d-card-link>
+            </c4d-content-block-media-content>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-content-block-media>`
+      await Promise.resolve(); // The update cycle of `<c4d-content-block-media>`
       expect(
-        document.body.querySelector('dds-content-block-media')
+        document.body.querySelector('c4d-content-block-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-block-media/content-block-media-content.ts b/packages/web-components/src/components/content-block-media/content-block-media-content.ts
index 6a3bcc44921..598c26dc612 100644
--- a/packages/web-components/src/components/content-block-media/content-block-media-content.ts
+++ b/packages/web-components/src/components/content-block-media/content-block-media-content.ts
@@ -7,27 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html, TemplateResult } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-block-media.scss';
-import DDSContentGroup from '../content-group/content-group';
+import C4DContentGroup from '../content-group/content-group';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content block media.
  *
- * @element dds-content-block-media-content
+ * @element c4d-content-block-media-content
  */
-@customElement(`${ddsPrefix}-content-block-media-content`)
-class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroup) {
+@customElement(`${c4dPrefix}-content-block-media-content`)
+class C4DContentBlockMediaContent extends StableSelectorMixin(C4DContentGroup) {
   protected _renderInnerBody(): TemplateResult | string | void {
     const { _hasContent: hasContent, _hasMedia: hasMedia } = this;
-    // Moves media content out of `<div class="bx--content-block__children">`
+    // Moves media content out of `<div class="cds--content-block__children">`
     return html`
       ${this._renderMedia()}
       <div
@@ -39,7 +37,7 @@ class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroup) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-media-content`;
+    return `${c4dPrefix}--content-block-media-content`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -50,5 +48,10 @@ class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroup) {
   }
 }
 
+console.warn(
+  'The content-block-media-content component has been deprecated in favor of the content-section/block content component. ' +
+    'See content-section/block documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockMediaContent;
+export default C4DContentBlockMediaContent;
diff --git a/packages/web-components/src/components/content-block-media/content-block-media.scss b/packages/web-components/src/components/content-block-media/content-block-media.scss
index bf9c577638c..9bf29915d0d 100644
--- a/packages/web-components/src/components/content-block-media/content-block-media.scss
+++ b/packages/web-components/src/components/content-block-media/content-block-media.scss
@@ -5,32 +5,36 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-media/index';
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-simple/content-group-simple';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-media';
+@use '@carbon/ibmdotcom-styles/scss/components/content-group-simple';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-content-block-media),
-:host(#{$dds-prefix}-content-block-media-content) {
+:host(#{$c4d-prefix}-content-block-media),
+:host(#{$c4d-prefix}-content-block-media-content) {
   display: block;
 }
 
-:host(#{$dds-prefix}-content-block-media-content) {
-  @extend :host(#{$dds-prefix}-content-group-simple);
+:host(#{$c4d-prefix}-content-block-media-content) {
+  @extend :host(#{$c4d-prefix}-content-group-simple);
 
-  &::slotted(#{$dds-prefix}-card-link) {
-    margin-left: -1rem;
-    margin-right: -1rem;
+  &::slotted(#{$c4d-prefix}-card-link) {
+    margin-left: -$spacing-05;
+    margin-right: -$spacing-05;
     display: block;
   }
 
-  ::slotted(#{$dds-prefix}-content-block-complementary) {
-    @include carbon--breakpoint-down('lg') {
-      margin: $layout-05 0;
+  ::slotted(#{$c4d-prefix}-content-block-complementary) {
+    @include breakpoint-down(lg) {
+      margin: $spacing-10 0;
     }
   }
 
   ::slotted(*) {
-    margin-left: $carbon--spacing-05;
-    margin-right: $carbon--spacing-05;
+    margin-left: $spacing-05;
+    margin-right: $spacing-05;
   }
 
   ::slotted([slot='media']) {
diff --git a/packages/web-components/src/components/content-block-media/content-block-media.ts b/packages/web-components/src/components/content-block-media/content-block-media.ts
index afb22e7ecf6..bfc43cc933d 100644
--- a/packages/web-components/src/components/content-block-media/content-block-media.ts
+++ b/packages/web-components/src/components/content-block-media/content-block-media.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-media.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content block media.
  *
- * @element dds-content-block-media
+ * @element c4d-content-block-media
  */
-@customElement(`${ddsPrefix}-content-block-media`)
-class DDSContentBlockMedia extends DDSContentBlock {
+@customElement(`${c4dPrefix}-content-block-media`)
+class C4DContentBlockMedia extends C4DContentBlock {
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-media`;
+    return `${c4dPrefix}--content-block-media`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -34,5 +34,10 @@ class DDSContentBlockMedia extends DDSContentBlock {
   }
 }
 
+console.warn(
+  'The content-block-media component has been deprecated in favor of the content-section/block and repeated video-player/image components. ' +
+    'See content-section/block, video-player, and image documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockMedia;
+export default C4DContentBlockMedia;
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx
index f442751c5a1..833cfbf8959 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.mdx
@@ -3,10 +3,6 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Content Block Mixed
 
 > 💡 Check our
@@ -37,95 +33,125 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-simple/inde
 ### HTML
 
 ```html
-<dds-content-block-mixed>
-  <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
-  <dds-content-block-copy>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-  </dds-content-block-copy>
-
-  <dds-content-group-cards>
-    <dds-content-group-heading>Content group heading</dds-content-group-heading>
-    <dds-content-group-cards-item href="www.ibm.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-      <dds-card-footer>
-        <svg slot="icon" ...>
-          ...
-        </svg>
-      </dds-card-footer>
-    </dds-content-group-cards-item>
-    <dds-content-group-cards-item href="www.ibm.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-      <dds-card-footer icon-placement="left">
-        <svg slot="icon" ...>
-          ...
-        </svg>
-      </dds-card-footer>
-    </dds-content-group-cards-item>
-  </dds-content-group-cards>
-
-  <dds-content-group-pictograms>
-    <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-    <dds-content-group-copy>Lorem ipsum *dolor* sit amet</dds-content-group-copy>
-    <dds-pictogram-item>
-      <svg slot="pictogram"...>
-        ...
-      </svg>
-      <dds-content-item-heading>Lorem ipsum dolor sit amet</dds-content-item-heading>
-      <dds-content-item-copy>Lorem ipsum dolor sit amet</dds-content-item-copy>
-      <dds-link-with-icon href="https://www.ibm.com/" slot="footer">
+<cds-content-block-mixed>
+  <cds-content-block-heading
+    >Lorem ipsum dolor sit amet</cds-content-block-heading
+  >
+  <cds-content-block-copy>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin, sodales nulla quis, consequat libero.
+  </cds-content-block-copy>
+
+  <cds-content-group-cards>
+    <cds-content-group-heading>Content group heading</cds-content-group-heading>
+    <cds-content-group-cards-item href="www.ibm.com">
+      <cds-card-heading
+        >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt</cds-card-heading
+      >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <cds-card-footer>
+        <svg slot="icon" ...>...</svg>
+      </cds-card-footer>
+    </cds-content-group-cards-item>
+    <cds-content-group-cards-item href="www.ibm.com">
+      <cds-card-heading
+        >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+        eiusmod tempor incididunt</cds-card-heading
+      >
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua.
+      </p>
+      <cds-card-footer icon-placement="left">
+        <svg slot="icon" ...>...</svg>
+      </cds-card-footer>
+    </cds-content-group-cards-item>
+  </cds-content-group-cards>
+
+  <cds-content-group-pictograms>
+    <cds-content-group-heading
+      >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+    >
+    <cds-content-group-copy
+      >Lorem ipsum *dolor* sit amet</cds-content-group-copy
+    >
+    <cds-pictogram-item>
+      <svg slot="pictogram" ...>...</svg>
+      <cds-content-item-heading
+        >Lorem ipsum dolor sit amet</cds-content-item-heading
+      >
+      <cds-content-item-copy>Lorem ipsum dolor sit amet</cds-content-item-copy>
+      <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
         Link text
-        <svg slot="icon" ...>
-          ...
-        </svg>
-      </dds-link-with-icon>
-    </dds-pictogram-item>
-  </dds-content-group-pictograms>
-
-  <dds-content-group-simple>
-    <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-    <dds-content-group-copy>Lorem ipsum *dolor* sit amet</dds-content-group-copy>
-    <dds-image
+        <svg slot="icon" ...>...</svg>
+      </cds-link-with-icon>
+    </cds-pictogram-item>
+  </cds-content-group-pictograms>
+
+  <cds-content-group-simple>
+    <cds-content-group-heading
+      >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+    >
+    <cds-content-group-copy
+      >Lorem ipsum *dolor* sit amet</cds-content-group-copy
+    >
+    <cds-image
       slot="media"
       alt="Image alt text"
       default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-      heading="Curabitur malesuada varius mi eu posuere"
-    >
-      <dds-image-item media="(min-width: 672px)" srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-      </dds-image-item>
-      <dds-image-item media="(min-width: 400px)" srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-      </dds-image-item>
-      <dds-image-item media="(min-width: 320px)" srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-      </dds-image-item>
-    </dds-image>
-    <dds-content-item copy="Lorem ipsum *dolor* sit amet">
-      <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-    </dds-content-item>
-    <dds-content-item copy="Lorem ipsum *dolor* sit amet">
-      <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-    </dds-content-item>
-    <dds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-      <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-      <dds-card-cta-footer>
-      </dds-card-cta-footer>
-    </dds-card-link-cta>
-  </dds-content-group-simple>
-</dds-content-block-mixed>
+      heading="Curabitur malesuada varius mi eu posuere">
+      <cds-image-item
+        media="(min-width: 672px)"
+        srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+      </cds-image-item>
+      <cds-image-item
+        media="(min-width: 400px)"
+        srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
+      </cds-image-item>
+      <cds-image-item
+        media="(min-width: 320px)"
+        srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
+      </cds-image-item>
+    </cds-image>
+    <cds-content-item copy="Lorem ipsum *dolor* sit amet">
+      <cds-content-item-heading
+        >Lorem ipsum dolor sit amet.</cds-content-item-heading
+      >
+    </cds-content-item>
+    <cds-content-item copy="Lorem ipsum *dolor* sit amet">
+      <cds-content-item-heading
+        >Lorem ipsum dolor sit amet.</cds-content-item-heading
+      >
+    </cds-content-item>
+    <cds-card-link-cta
+      slot="footer"
+      href="https://www.ibm.com/"
+      cta-type="local">
+      <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+      <cds-card-cta-footer> </cds-card-cta-footer>
+    </cds-card-link-cta>
+  </cds-content-group-simple>
+</cds-content-block-mixed>
 ```
 
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                      | Description |
 | ----------------------------- | ------------------------------------------- | ----------- |
-| `<dds-content-block-mixed>`   | `data-autoid="dds--content-block-mixed"`    | Component   |
-| `<dds-content-block-copy>`    | `data-autoid="dds--content-block__copy"`    | Component   |
-| `<dds-content-block-heading>` | `data-autoid="dds--content-block__heading"` | Component   |
-| `<dds-content-item-copy>`     | `data-autoid="dds--content-item__copy"`     | Component   |
+| `<cds-content-block-mixed>`   | `data-autoid="cds--content-block-mixed"`    | Component   |
+| `<cds-content-block-copy>`    | `data-autoid="cds--content-block__copy"`    | Component   |
+| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"` | Component   |
+| `<cds-content-item-copy>`     | `data-autoid="cds--content-item__copy"`     | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx
index 46c46e8587e..2f46e79499a 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed';
 
@@ -17,99 +22,117 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSContentBlockMixed from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentBlockMixed from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
+import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import TouchScreen from '@carbon/pictograms-react/es/touch--screen/index.js';
 
 function App() {
   return (
-  <DDSContentBlockMixed>
-    <DDSContentBlockHeading>Lorem ipsum dolor sit amet</DDSContentBlockHeading>
-    <DDSContentBlockCopy>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</DDSContentBlockCopy>
-    <DDSContentGroupCards>
-      <DDSContentGroupHeading>Content group heading</DDSContentGroupHeading>
-      <DDSContentGroupCardsItem href="www.ibm.com">
-        <DDSCardHeading>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-        </DDSCardHeading>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua.
-        </p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSContentGroupCardsItem>
-      <DDSContentGroupCardsItem href="www.ibm.com">
-        <DDSCardHeading>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-        </DDSCardHeading>
-        <p>
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua.
-        </p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSContentGroupCardsItem>
-    </DDSContentGroupCards>
-    <DDSContentGroupPictograms>
-      <DDSContentGroupHeading>Curabitur malesuada varius mi eu posuere</DDSContentGroupHeading>
-      <DDSContentGroupCopy>Lorem ipsum *dolor* sit amet</DDSContentGroupCopy>
-        <DDSPictogramItem>
+    <C4DContentBlockMixed>
+      <C4DContentBlockHeading>
+        Lorem ipsum dolor sit amet
+      </C4DContentBlockHeading>
+      <C4DContentBlockCopy>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
+      </C4DContentBlockCopy>
+      <C4DContentGroupCards>
+        <C4DContentGroupHeading>Content group heading</C4DContentGroupHeading>
+        <C4DContentGroupCardsItem href="www.ibm.com">
+          <C4DCardHeading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <C4DCardFooter>
+            <ArrowRight20 slot="icon" />
+          </C4DCardFooter>
+        </C4DContentGroupCardsItem>
+        <C4DContentGroupCardsItem href="www.ibm.com">
+          <C4DCardHeading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </C4DCardHeading>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
+          </p>
+          <C4DCardFooter>
+            <ArrowRight20 slot="icon" />
+          </C4DCardFooter>
+        </C4DContentGroupCardsItem>
+      </C4DContentGroupCards>
+      <C4DContentGroupPictograms>
+        <C4DContentGroupHeading>
+          Curabitur malesuada varius mi eu posuere
+        </C4DContentGroupHeading>
+        <C4DContentGroupCopy>Lorem ipsum *dolor* sit amet</C4DContentGroupCopy>
+        <C4DPictogramItem>
           <TouchScreen slot="pictogram" />
-          <DDSContentItemHeading>Lorem ipsum dolor sit amet</DDSContentItemHeading>
-          <DDSContentItemCopy>Lorem ipsum dolor sit amet</DDSContentItemCopy>
-          <DDSLinkWithIcon href="https://www.ibm.com/" slot="footer">
+          <C4DContentItemHeading>
+            Lorem ipsum dolor sit amet
+          </C4DContentItemHeading>
+          <C4DContentItemCopy>Lorem ipsum dolor sit amet</C4DContentItemCopy>
+          <C4DLinkWithIcon href="https://www.ibm.com/" slot="footer">
             Link text <ArrowRight20 slot="icon" />
-          </DDSLinkWithIcon>
-        </DDSPictogramItem>
-    </DDSContentGroupPictograms>
-    <DDSContentGroupSimple>
-      <DDSContentGroupHeading>Curabitur malesuada varius mi eu posuere</DDSContentGroupHeading>
-      <DDSContentGroupCopy>Lorem ipsum *dolor* sit amet</DDSContentGroupCopy>
-      <DDSImage
-        slot="media"
-        alt="Image alt text"
-        defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-        heading="Curabitur malesuada varius mi eu posuere">
-        <DDSImageItem
-          media="(min-width: 672px)"
-          srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        <DDSImageItem
-          media="(min-width: 400px)"
-          srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        <DDSImageItem
-          media="(min-width: 320px)"
-          srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-      </DDSImage>
-      <DDSCardLinkCTA slot="footer" ctaType="local" href="https://example.com">
-        <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentGroupSimple>
-  </DDSContentBlockMixed>
+          </C4DLinkWithIcon>
+        </C4DPictogramItem>
+      </C4DContentGroupPictograms>
+      <C4DContentGroupSimple>
+        <C4DContentGroupHeading>
+          Curabitur malesuada varius mi eu posuere
+        </C4DContentGroupHeading>
+        <C4DContentGroupCopy>Lorem ipsum *dolor* sit amet</C4DContentGroupCopy>
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          defaultSrc="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          heading="Curabitur malesuada varius mi eu posuere">
+          <C4DImageItem
+            media="(min-width: 672px)"
+            srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+          <C4DImageItem
+            media="(min-width: 400px)"
+            srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+          <C4DImageItem
+            media="(min-width: 320px)"
+            srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+          />
+        </C4DImage>
+        <C4DCardLinkCTA
+          slot="footer"
+          ctaType="local"
+          href="https://example.com">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentGroupSimple>
+    </C4DContentBlockMixed>
   );
 }
 ```
@@ -120,10 +143,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-content-block-mixed>`        | N/A                    | Component   |
+| Web Components selector     | Compatibility selector | Description |
+| --------------------------- | ---------------------- | ----------- |
+| `<cds-content-block-mixed>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx
index 4cfdad93a93..4db450d2cf9 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.react.tsx
@@ -12,32 +12,32 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSContentBlockMixed from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentBlockMixed from '@carbon/ibmdotcom-web-components/es/components-react/content-block-mixed/content-block-mixed';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
 // eslint-disable-next-line max-len
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 // eslint-disable-next-line max-len
-import DDSContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
+import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 // eslint-disable-next-line max-len
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItemCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-card-cta';
+import C4DContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import TouchScreen from '@carbon/pictograms-react/es/touch--screen/index.js';
 
@@ -84,165 +84,200 @@ const ctaTypes = {
 const complementaryStyleSchemes = {
   'Regular style scheme': null,
   // eslint-disable-next-line max-len
-  [`With border (${CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER})`]: CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER,
+  [`With border (${CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER})`]:
+    CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER,
 };
 
 const image = ({ heading: imageHeading } = { heading: undefined }) => (
-  <DDSImage slot="media" alt="Image alt text" defaultSrc={imgLg16x9} heading={imageHeading}>
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage
+    slot="media"
+    alt="Image alt text"
+    defaultSrc={imgLg16x9}
+    heading={imageHeading}>
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
-export const Default = args => {
-  const { heading, copy: groupCopy, cardsGroupHeading, ctaType } = args?.ContentBlockMixed ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+export const Default = (args) => {
+  const {
+    heading,
+    copy: groupCopy,
+    cardsGroupHeading,
+    ctaType,
+  } = args?.ContentBlockMixed ?? {};
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent.shadowRoot!.textContent = heading;
   }
 
   return (
-    <DDSContentBlockMixed>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{groupCopy}</DDSContentBlockCopy>
-      <DDSContentGroupCards>
-        <DDSContentGroupHeading>{cardsGroupHeading}</DDSContentGroupHeading>
-        <DDSContentGroupCardsItem href="www.ibm.com">
-          <DDSCardHeading>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-          </DDSCardHeading>
+    <C4DContentBlockMixed>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{groupCopy}</C4DContentBlockCopy>
+      <C4DContentGroupCards>
+        <C4DContentGroupHeading>{cardsGroupHeading}</C4DContentGroupHeading>
+        <C4DContentGroupCardsItem href="www.ibm.com">
+          <C4DCardHeading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </C4DCardHeading>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <DDSCardFooter>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSContentGroupCardsItem>
-        <DDSContentGroupCardsItem href="www.ibm.com">
-          <DDSCardHeading>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-          </DDSCardHeading>
+          </C4DCardFooter>
+        </C4DContentGroupCardsItem>
+        <C4DContentGroupCardsItem href="www.ibm.com">
+          <C4DCardHeading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </C4DCardHeading>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <DDSCardFooter>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSContentGroupCardsItem>
-      </DDSContentGroupCards>
-      <DDSContentGroupPictograms>
-        <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-        <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
-        {pictogramsItems.map(({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => (
-          <DDSPictogramItem>
-            <TouchScreen slot="pictogram" />
-            <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-            <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-            <DDSLinkWithIcon href={linkWithIcon.href} slot="footer">
-              {linkWithIcon.copy} <ArrowRight20 slot="icon" />
-            </DDSLinkWithIcon>
-          </DDSPictogramItem>
-        ))}
-      </DDSContentGroupPictograms>
-      <DDSContentGroupSimple>
-        <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-        <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
+          </C4DCardFooter>
+        </C4DContentGroupCardsItem>
+      </C4DContentGroupCards>
+      <C4DContentGroupPictograms>
+        <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+        <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
+        {pictogramsItems.map(
+          ({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => (
+            <C4DPictogramItem>
+              <TouchScreen slot="pictogram" />
+              <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+              <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+              <C4DLinkWithIcon href={linkWithIcon.href} slot="footer">
+                {linkWithIcon.copy} <ArrowRight20 slot="icon" />
+              </C4DLinkWithIcon>
+            </C4DPictogramItem>
+          )
+        )}
+      </C4DContentGroupPictograms>
+      <C4DContentGroupSimple>
+        <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+        <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
         {image({ heading })}
-        <DDSCardLinkCTA slot="footer" ctaType={ctaType} href="https://example.com">
-          <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      </DDSContentGroupSimple>
-    </DDSContentBlockMixed>
+        <C4DCardLinkCTA
+          slot="footer"
+          ctaType={ctaType}
+          href="https://example.com">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentGroupSimple>
+    </C4DContentBlockMixed>
   );
 };
 
-export const withLinkList = args => {
-  const { heading, copy: groupCopy, cardsGroupHeading, complementaryStyleScheme, ctaType, linkListHeading } =
-    args?.ContentBlockMixed ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+export const withLinkList = (args) => {
+  const {
+    heading,
+    copy: groupCopy,
+    cardsGroupHeading,
+    complementaryStyleScheme,
+    ctaType,
+    linkListHeading,
+  } = args?.ContentBlockMixed ?? {};
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent.shadowRoot!.textContent = heading;
   }
 
   return (
-    <DDSContentBlockMixed complementary-style-scheme={complementaryStyleScheme || undefined}>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{groupCopy}</DDSContentBlockCopy>
-      <DDSContentGroupCards>
-        <DDSContentGroupHeading>{cardsGroupHeading}</DDSContentGroupHeading>
-        <DDSContentGroupCardsItem href="www.ibm.com">
-          <DDSCardHeading>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-          </DDSCardHeading>
+    <C4DContentBlockMixed
+      complementary-style-scheme={complementaryStyleScheme || undefined}>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{groupCopy}</C4DContentBlockCopy>
+      <C4DContentGroupCards>
+        <C4DContentGroupHeading>{cardsGroupHeading}</C4DContentGroupHeading>
+        <C4DContentGroupCardsItem href="www.ibm.com">
+          <C4DCardHeading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </C4DCardHeading>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <DDSCardFooter>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSContentGroupCardsItem>
-        <DDSContentGroupCardsItem href="www.ibm.com">
-          <DDSCardHeading>
-            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-          </DDSCardHeading>
+          </C4DCardFooter>
+        </C4DContentGroupCardsItem>
+        <C4DContentGroupCardsItem href="www.ibm.com">
+          <C4DCardHeading>
+            Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
+            eiusmod tempor incididunt
+          </C4DCardHeading>
           <p>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-            aliqua.
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+            eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <DDSCardFooter>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSContentGroupCardsItem>
-      </DDSContentGroupCards>
-      <DDSContentGroupPictograms>
-        <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-        <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
-        {pictogramsItems.map(({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => (
-          <DDSPictogramItem>
-            <TouchScreen slot="pictogram" />
-            <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-            <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-            <DDSLinkWithIcon href={linkWithIcon.href} slot="footer">
-              {linkWithIcon.copy} <ArrowRight20 slot="icon" />
-            </DDSLinkWithIcon>
-          </DDSPictogramItem>
-        ))}
-      </DDSContentGroupPictograms>
-      <DDSContentGroupSimple>
-        <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-        <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
+          </C4DCardFooter>
+        </C4DContentGroupCardsItem>
+      </C4DContentGroupCards>
+      <C4DContentGroupPictograms>
+        <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+        <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
+        {pictogramsItems.map(
+          ({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => (
+            <C4DPictogramItem>
+              <TouchScreen slot="pictogram" />
+              <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+              <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+              <C4DLinkWithIcon href={linkWithIcon.href} slot="footer">
+                {linkWithIcon.copy} <ArrowRight20 slot="icon" />
+              </C4DLinkWithIcon>
+            </C4DPictogramItem>
+          )
+        )}
+      </C4DContentGroupPictograms>
+      <C4DContentGroupSimple>
+        <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+        <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
         {image({ heading })}
-        <DDSCardLinkCTA slot="footer" ctaType={ctaType} href="https://example.com">
-          <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      </DDSContentGroupSimple>
-      <DDSLinkList type="default" slot="complementary">
-        <DDSLinkListHeading>{linkListHeading}</DDSLinkListHeading>
-        <DDSLinkListItemCardCTA href="https://example.com" cta-type="local">
+        <C4DCardLinkCTA
+          slot="footer"
+          ctaType={ctaType}
+          href="https://example.com">
+          <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
+      </C4DContentGroupSimple>
+      <C4DLinkList type="default" slot="complementary">
+        <C4DLinkListHeading>{linkListHeading}</C4DLinkListHeading>
+        <C4DLinkListItemCTA
+          href="https://example.com"
+          cta-type="local"
+          type="default">
           <p>Containerization A Complete Guide</p>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSLinkListItemCardCTA>
-        <DDSLinkListItemCardCTA href="https://example.com" cta-type="external">
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA
+          href="https://example.com"
+          cta-type="external"
+          type="default">
           <p>Why should you use microservices and containers</p>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSLinkListItemCardCTA>
-      </DDSLinkList>
-    </DDSContentBlockMixed>
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+    </C4DContentBlockMixed>
   );
 };
 
 withLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
       ContentBlockMixed: () => ({
         heading: text('Heading (heading)', 'Lorem ipsum dolor sit amet'),
@@ -253,7 +288,10 @@ withLinkList.story = {
           Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
           `,
-        cardsGroupHeading: text('Cards group heading (heading)', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+        cardsGroupHeading: text(
+          'Cards group heading (heading)',
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+        ),
         ctaType: select('CTA type (cta-type)', ctaTypes, CTA_TYPE.LOCAL),
         linkListHeading: text('Link list heading (heading)', 'Tutorials'),
         complementaryStyleScheme: select(
@@ -271,9 +309,11 @@ export default {
   decorators: [
     (story, { parameters }) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className={`${parameters.gridContentClasses} bx--no-gutter`}>{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className={`${parameters.gridContentClasses} cds--no-gutter`}>
+              {story()}
+            </div>
           </div>
         </div>
       );
@@ -281,7 +321,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-8',
+    gridContentClasses: 'cds--col-lg-8',
     hasStoryPadding: true,
     knobs: {
       ContentBlockMixed: () => ({
@@ -293,7 +333,10 @@ export default {
           Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
           `,
-        cardsGroupHeading: text('Cards group heading (heading)', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit'),
+        cardsGroupHeading: text(
+          'Cards group heading (heading)',
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit'
+        ),
         ctaType: select('CTA type (cta-type)', ctaTypes, CTA_TYPE.LOCAL),
       }),
     },
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.scss b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.scss
index 2ed321dddcc..b8425744b75 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.scss
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.scss
@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/theme-tokens';
+@use '@carbon/styles/scss/theme' as *;
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-pictogram-item svg g {
-  stroke: $text-01;
+cds-pictogram-item svg g {
+  stroke: $text-primary;
 }
diff --git a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
index bac9e62704a..6e2089629b2 100644
--- a/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
+++ b/packages/web-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
@@ -14,8 +14,8 @@ import '../../content-group-cards/index';
 import '../../content-group-pictograms/index';
 import '../../content-group-simple/index';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--001.jpg';
@@ -67,18 +67,18 @@ const complementaryStyleSchemes = {
 };
 
 const image = ({ heading: imageHeading } = { heading: undefined }) => html`
-  <dds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="${imgLg16x9}"
-    heading="${ifNonNull(imageHeading)}">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
+    heading="${ifDefined(imageHeading)}">
+    <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+    </c4d-image-item>
+  </c4d-image>
 `;
 
 export default {
@@ -88,9 +88,9 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="${parameters.gridContentClasses} bx--no-gutter">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="${parameters.gridContentClasses} cds--no-gutter">
             ${story()}
           </div>
         </div>
@@ -99,7 +99,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-8',
+    gridContentClasses: 'cds--col-lg-8',
     hasStoryPadding: true,
     knobs: {
       ContentBlockMixed: () => ({
@@ -149,46 +149,46 @@ export const Default = (args) => {
     ctaType,
   } = args?.ContentBlockMixed ?? {};
   return html`
-    <dds-content-block-mixed>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-content-block-copy>${groupCopy}</dds-content-block-copy>
-      <dds-content-group-cards>
-        <dds-content-group-heading
-          >${cardsGroupHeading}</dds-content-group-heading
+    <c4d-content-block-mixed>
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-content-block-copy>${groupCopy}</c4d-content-block-copy>
+      <c4d-content-group-cards>
+        <c4d-content-group-heading
+          >${cardsGroupHeading}</c4d-content-group-heading
         >
-        <dds-content-group-cards-item href="www.ibm.com">
-          <dds-card-heading>
+        <c4d-content-group-cards-item href="www.ibm.com">
+          <c4d-card-heading>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
             eiusmod tempor incididunt
-          </dds-card-heading>
+          </c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             ${ArrowRight20({ slot: 'icon' })}
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-        <dds-content-group-cards-item href="www.ibm.com">
-          <dds-card-heading>
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+        <c4d-content-group-cards-item href="www.ibm.com">
+          <c4d-card-heading>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
             eiusmod tempor incididunt
-          </dds-card-heading>
+          </c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             ${ArrowRight20({ slot: 'icon' })}
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-      </dds-content-group-cards>
-      <dds-content-group-pictograms>
-        <dds-content-group-heading>${heading}</dds-content-group-heading>
-        <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+      </c4d-content-group-cards>
+      <c4d-content-group-pictograms>
+        <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+        <c4d-content-group-copy>${groupCopy}</c4d-content-group-copy>
         ${pictogramsItems.map(
           ({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => html`
-            <dds-pictogram-item>
+            <c4d-pictogram-item>
               <svg
                 version="1.1"
                 slot="pictogram"
@@ -213,32 +213,32 @@ export const Default = (args) => {
                 </g>
                 <g></g>
               </svg>
-              <dds-content-item-heading
-                >${itemHeading}</dds-content-item-heading
+              <c4d-content-item-heading
+                >${itemHeading}</c4d-content-item-heading
               >
-              <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
+              <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+              <c4d-link-with-icon href="${linkWithIcon.href}" slot="footer">
                 ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-with-icon>
-            </dds-pictogram-item>
+              </c4d-link-with-icon>
+            </c4d-pictogram-item>
           `
         )}
-      </dds-content-group-pictograms>
-      <dds-content-group-simple>
-        <dds-content-group-heading>${heading}</dds-content-group-heading>
-        <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
+      </c4d-content-group-pictograms>
+      <c4d-content-group-simple>
+        <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+        <c4d-content-group-copy>${groupCopy}</c4d-content-group-copy>
         ${image({ heading })}
-        <dds-card-link-cta
+        <c4d-card-link-cta
           slot="footer"
           cta-type=${ctaType}
           href="https://example.com">
-          <dds-card-link-heading
-            >Lorem ipsum dolor sit amet</dds-card-link-heading
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-group-simple>
-    </dds-content-block-mixed>
+          <c4d-card-cta-footer></c4d-card-cta-footer>
+        </c4d-card-link-cta>
+      </c4d-content-group-simple>
+    </c4d-content-block-mixed>
   `;
 };
 
@@ -252,47 +252,47 @@ export const WithLinkList = (args) => {
     linkListHeading,
   } = args?.ContentBlockMixed ?? {};
   return html`
-    <dds-content-block-mixed
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-content-block-copy>${groupCopy}</dds-content-block-copy>
-      <dds-content-group-cards>
-        <dds-content-group-heading
-          >${cardsGroupHeading}</dds-content-group-heading
+    <c4d-content-block-mixed
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-content-block-copy>${groupCopy}</c4d-content-block-copy>
+      <c4d-content-group-cards>
+        <c4d-content-group-heading
+          >${cardsGroupHeading}</c4d-content-group-heading
         >
-        <dds-content-group-cards-item href="www.ibm.com">
-          <dds-card-heading>
+        <c4d-content-group-cards-item href="www.ibm.com">
+          <c4d-card-heading>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
             eiusmod tempor incididunt
-          </dds-card-heading>
+          </c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             ${ArrowRight20({ slot: 'icon' })}
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-        <dds-content-group-cards-item href="www.ibm.com">
-          <dds-card-heading>
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+        <c4d-content-group-cards-item href="www.ibm.com">
+          <c4d-card-heading>
             Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
             eiusmod tempor incididunt
-          </dds-card-heading>
+          </c4d-card-heading>
           <p>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
             eiusmod tempor incididunt ut labore et dolore magna aliqua.
           </p>
-          <dds-card-footer icon-placement="left">
+          <c4d-card-footer icon-placement="left">
             ${ArrowRight20({ slot: 'icon' })}
-          </dds-card-footer>
-        </dds-content-group-cards-item>
-      </dds-content-group-cards>
-      <dds-content-group-pictograms>
-        <dds-content-group-heading>${heading}</dds-content-group-heading>
-        <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
+          </c4d-card-footer>
+        </c4d-content-group-cards-item>
+      </c4d-content-group-cards>
+      <c4d-content-group-pictograms>
+        <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+        <c4d-content-group-copy>${groupCopy}</c4d-content-group-copy>
         ${pictogramsItems.map(
           ({ heading: itemHeading, copy: itemCopy, linkWithIcon }) => html`
-            <dds-pictogram-item>
+            <c4d-pictogram-item>
               <svg
                 version="1.1"
                 slot="pictogram"
@@ -319,52 +319,52 @@ export const WithLinkList = (args) => {
                 </g>
                 <g"></g>
               </svg>
-              <dds-content-item-heading>${itemHeading}</dds-content-item-heading>
-              <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
+              <c4d-content-item-heading>${itemHeading}</c4d-content-item-heading>
+              <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+              <c4d-link-with-icon href="${linkWithIcon.href}" slot="footer">
                 ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-with-icon>
-            </dds-pictogram-item>
+              </c4d-link-with-icon>
+            </c4d-pictogram-item>
           `
         )}
-      </dds-content-group-pictograms>
-      <dds-content-group-simple>
-        <dds-content-group-heading>${heading}</dds-content-group-heading>
-        <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
+      </c4d-content-group-pictograms>
+      <c4d-content-group-simple>
+        <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+        <c4d-content-group-copy>${groupCopy}</c4d-content-group-copy>
         ${image({ heading })}
-        <dds-card-link-cta
+        <c4d-card-link-cta
           slot="footer"
           cta-type=${ctaType}
           href="https://example.com">
-          <dds-card-link-heading
-            >Lorem ipsum dolor sit amet</dds-card-link-heading
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-card-link-cta>
-      </dds-content-group-simple>
-      <dds-link-list type="default" slot="complementary">
-        <dds-link-list-heading>${linkListHeading}</dds-link-list-heading>
-        <dds-link-list-item-card-cta
+          <c4d-card-cta-footer></c4d-card-cta-footer>
+        </c4d-card-link-cta>
+      </c4d-content-group-simple>
+      <c4d-link-list type="default" slot="complementary">
+        <c4d-link-list-heading>${linkListHeading}</c4d-link-list-heading>
+        <c4d-link-list-item-cta
           href="https://example.com"
-          cta-type="local">
+          cta-type="local"
+          type="default">
           <p>Containerization A Complete Guide</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-        <dds-link-list-item-card-cta
+        </c4d-link-list-item-cta>
+        <c4d-link-list-item-cta
           href="https://example.com"
-          cta-type="external">
+          cta-type="external"
+          type="default">
           <p>Why should you use microservices and containers</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-      </dds-link-list>
-    </dds-content-block-mixed>
+        </c4d-link-list-item-cta>
+      </c4d-link-list>
+    </c4d-content-block-mixed>
   `;
 };
 
 WithLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
       ContentBlockMixed: () => ({
         heading: textNullable(
diff --git a/packages/web-components/src/components/content-block-mixed/content-block-mixed.scss b/packages/web-components/src/components/content-block-mixed/content-block-mixed.scss
index cca62fda6de..58fa2711ac1 100644
--- a/packages/web-components/src/components/content-block-mixed/content-block-mixed.scss
+++ b/packages/web-components/src/components/content-block-mixed/content-block-mixed.scss
@@ -5,5 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-mixed/index';
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-mixed';
diff --git a/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts b/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts
index 6a6f8990a63..dd01c86dc4e 100644
--- a/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts
+++ b/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-mixed.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content block mixed
  *
- * @element dds-content-block-mixed
+ * @element c4d-content-block-mixed
  */
-@customElement(`${ddsPrefix}-content-block-mixed`)
-class DDSContentBlockMixed extends DDSContentBlock {
+@customElement(`${c4dPrefix}-content-block-mixed`)
+class C4DContentBlockMixed extends C4DContentBlock {
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-mixed`;
+    return `${c4dPrefix}--content-block-mixed`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WepPack loader
@@ -34,5 +34,10 @@ class DDSContentBlockMixed extends DDSContentBlock {
   }
 }
 
+console.warn(
+  'The content-block-mixed component has been deprecated in favor of the content-section/block, video-player/image, pictogram-items, and other content-group components. ' +
+    'See content-block/section documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockMixed;
+export default C4DContentBlockMixed;
diff --git a/packages/web-components/src/components/content-block-mixed/index.ts b/packages/web-components/src/components/content-block-mixed/index.ts
index 151eb4de8f6..2f2de33629f 100644
--- a/packages/web-components/src/components/content-block-mixed/index.ts
+++ b/packages/web-components/src/components/content-block-mixed/index.ts
@@ -16,6 +16,5 @@ import '../content-group/content-group-copy';
 import '../content-item/index';
 import '../cta/card-link-cta';
 import '../image/image';
-import '../image-with-caption/image-with-caption';
 import '../link-list/index';
 import '../pictogram-item/index';
diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx
index b6df8db16c1..099dfd8aa2f 100644
--- a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.mdx
@@ -3,14 +3,10 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-content-block-segmented>`
 
-
-
-
-# `<dds-content-block-segmented>`
-
-> The Content Block - Segmented pattern is a variant of `<dds-content-block>`, and
-> includes media, two content group items, and ends with a CTA.
+> The Content Block - Segmented pattern is a variant of `<cds-content-block>`,
+> and includes media, two content group items, and ends with a CTA.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block-segmented)
@@ -28,45 +24,83 @@ Here's a quick example to get you started.
 import '@carbon/ibmdotcom-web-components/es/components/content-block-segmented/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['content-block-segmented'] })}`} />
+<Description
+  markdown={`${cdnJs({ components: ['content-block-segmented'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-    <dds-content-block-segmented>
-      <dds-content-block-heading>heading</dds-content-block-heading>
-      <dds-content-block-copy>copy</dds-content-block-copy>
-      <dds-image
-        slot="media"
-        alt="Image alt text"
-        default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-        heading="Mauris iaculis eget dolor nec hendrerit."
-      >
-      </dds-image>
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-        <dds-content-item-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com">Lorem Ipsum dolor sit</dds-text-cta>
-      </dds-content-block-segmented-item>
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-        <dds-content-item-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.</dds-content-item-copy>
-        <dds-image
-          slot="media"
-          alt="Image alt text"
-          default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-          heading="Mauris iaculis eget dolor nec hendrerit."
-        >
-        </dds-image>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com">Lorem Ipsum dolor sit</dds-text-cta>
-      </dds-content-block-segmented-item>
-      <dds-card-link-cta slot="footer" cta-type="local" href="https://example.com">
-        <dds-card-link-heading>Lorem ipsum dolor</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-block-segmented>
+<cds-content-block-segmented>
+  <cds-content-block-heading>heading</cds-content-block-heading>
+  <cds-content-block-copy>copy</cds-content-block-copy>
+  <cds-image
+    slot="media"
+    alt="Image alt text"
+    default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+    heading="Mauris iaculis eget dolor nec hendrerit.">
+  </cds-image>
+  <cds-content-block-segmented-item>
+    <cds-content-group-heading
+      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+    >
+    <cds-content-item-copy
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed
+      interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus
+      efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
+      tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec
+      quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id
+      pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu.
+      Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
+      Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in
+      dignissim sapien.</cds-content-item-copy
+    >
+    <cds-text-cta
+      slot="footer"
+      cta-type="local"
+      icon-placement="right"
+      href="https://example.com"
+      >Lorem Ipsum dolor sit</cds-text-cta
+    >
+  </cds-content-block-segmented-item>
+  <cds-content-block-segmented-item>
+    <cds-content-group-heading
+      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+    >
+    <cds-content-item-copy
+      >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed
+      interdum tortor. Sed id pellentesque diam. In ut quam id mauris finibus
+      efficitur quis ut arcu. Praesent purus turpis, venenatis eget odio et,
+      tincidunt bibendum sem. Curabitur pretium elit non blandit lobortis. Donec
+      quis pretium odio, in dignissim sapien. Lorem ipsum dolor sit amet,
+      consectetur adipiscing elit. Vivamus sed interdum tortor. Sed id
+      pellentesque diam. In ut quam id mauris finibus efficitur quis ut arcu.
+      Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
+      Curabitur pretium elit non blandit lobortis. Donec quis pretium odio, in
+      dignissim sapien.</cds-content-item-copy
+    >
+    <cds-image
+      slot="media"
+      alt="Image alt text"
+      default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+      heading="Mauris iaculis eget dolor nec hendrerit.">
+    </cds-image>
+    <cds-text-cta
+      slot="footer"
+      cta-type="local"
+      icon-placement="right"
+      href="https://example.com"
+      >Lorem Ipsum dolor sit</cds-text-cta
+    >
+  </cds-content-block-segmented-item>
+  <cds-card-link-cta slot="footer" cta-type="local" href="https://example.com">
+    <cds-card-link-heading>Lorem ipsum dolor</cds-card-link-heading>
+    <cds-card-cta-footer></cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-block-segmented>
 ```
 
 ## With Video
@@ -83,42 +117,60 @@ import '@carbon/ibmdotcom-web-components/es/components/video-player/video-player
 ### HTML
 
 ```html
-    <dds-content-block-segmented complementary-style-scheme="with-border">
-      <dds-content-block-heading>Lorem ipsum dolor sit amet.</dds-content-block-heading>
-      <dds-content-block-copy>Lorem ipsum dolor sit amet</dds-content-block-copy>
-
-      <dds-video-player-container slot="media" video-id="0_uka1msg4"></dds-video-player-container>
-
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-        <dds-content-item-copy>copy</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
-        >
-      </dds-content-block-segmented-item>
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-        <dds-content-item-copy>copy</dds-content-item-copy>
-        <dds-image
-          slot="media"
-          alt="Image alt text"
-          default-src="image.jpg"
-          heading="Mauris iaculis eget dolor nec hendrerit."
-        >
-          <dds-image-item media="(min-width: 672px)" srcset="image-large.jpg"> </dds-image-item>
-          <dds-image-item media="(min-width: 400px)" srcset="image-medium.jpg"> </dds-image-item>
-          <dds-image-item media="(min-width: 320px)" srcset="image-small.jpg"> </dds-image-item>
-        </dds-image>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
-        >
-      </dds-content-block-segmented-item>
-
-      <dds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-        <dds-card-link-heading>Lorem ipsum dolor</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-block-segmented>
+<cds-content-block-segmented complementary-style-scheme="with-border">
+  <cds-content-block-heading
+    >Lorem ipsum dolor sit amet.</cds-content-block-heading
+  >
+  <cds-content-block-copy>Lorem ipsum dolor sit amet</cds-content-block-copy>
+
+  <cds-video-player-container
+    slot="media"
+    video-id="0_uka1msg4"></cds-video-player-container>
+
+  <cds-content-block-segmented-item>
+    <cds-content-group-heading
+      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+    >
+    <cds-content-item-copy>copy</cds-content-item-copy>
+    <cds-text-cta
+      slot="footer"
+      cta-type="local"
+      icon-placement="right"
+      href="https://example.com"
+      >Lorem Ipsum dolor sit</cds-text-cta
+    >
+  </cds-content-block-segmented-item>
+  <cds-content-block-segmented-item>
+    <cds-content-group-heading
+      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+    >
+    <cds-content-item-copy>copy</cds-content-item-copy>
+    <cds-image
+      slot="media"
+      alt="Image alt text"
+      default-src="image.jpg"
+      heading="Mauris iaculis eget dolor nec hendrerit.">
+      <cds-image-item media="(min-width: 672px)" srcset="image-large.jpg">
+      </cds-image-item>
+      <cds-image-item media="(min-width: 400px)" srcset="image-medium.jpg">
+      </cds-image-item>
+      <cds-image-item media="(min-width: 320px)" srcset="image-small.jpg">
+      </cds-image-item>
+    </cds-image>
+    <cds-text-cta
+      slot="footer"
+      cta-type="local"
+      icon-placement="right"
+      href="https://example.com"
+      >Lorem Ipsum dolor sit</cds-text-cta
+    >
+  </cds-content-block-segmented-item>
+
+  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <cds-card-link-heading>Lorem ipsum dolor</cds-card-link-heading>
+    <cds-card-cta-footer></cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-block-segmented>
 ```
 
 ## With Aside Items
@@ -135,64 +187,82 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-    <dds-content-block-segmented complementary-style-scheme="with-border">
-      <dds-content-block-heading>Lorem ipsum dolor sit amet.</dds-content-block-heading>
-      <dds-content-block-copy>Lorem ipsum dolor sit amet</dds-content-block-copy>
-
-      <dds-image
-        slot="media"
-        alt="Image alt text"
-        default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-        heading="Mauris iaculis eget dolor nec hendrerit."
-      >
-      </dds-image>
-
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-        <dds-content-item-copy>copy</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
-        >
-      </dds-content-block-segmented-item>
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading>Lorem ipsum dolor sit amet.</dds-content-group-heading>
-        <dds-content-item-copy>copy</dds-content-item-copy>
-        ${image}
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
-        >
-      </dds-content-block-segmented-item>
-      <dds-link-list type="default" slot="complementary">
-        <dds-link-list-heading>Lorem Ipsum</dds-link-list-heading>
-        <dds-link-list-item-card-cta href="https://example.com" cta-type="local">
-          <p>Containerization A Complete Guide</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-        <dds-link-list-item-card-cta href="https://example.com" cta-type="external">
-          <p>Why should you use microservices and containers</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-      </dds-link-list>
-      <dds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-        <dds-card-link-heading>Lorem ipsum dolor</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-block-segmented>
+<cds-content-block-segmented complementary-style-scheme="with-border">
+  <cds-content-block-heading
+    >Lorem ipsum dolor sit amet.</cds-content-block-heading
+  >
+  <cds-content-block-copy>Lorem ipsum dolor sit amet</cds-content-block-copy>
+
+  <cds-image
+    slot="media"
+    alt="Image alt text"
+    default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+    heading="Mauris iaculis eget dolor nec hendrerit.">
+  </cds-image>
+
+  <cds-content-block-segmented-item>
+    <cds-content-group-heading
+      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+    >
+    <cds-content-item-copy>copy</cds-content-item-copy>
+    <cds-text-cta
+      slot="footer"
+      cta-type="local"
+      icon-placement="right"
+      href="https://example.com"
+      >Lorem Ipsum dolor sit</cds-text-cta
+    >
+  </cds-content-block-segmented-item>
+  <cds-content-block-segmented-item>
+    <cds-content-group-heading
+      >Lorem ipsum dolor sit amet.</cds-content-group-heading
+    >
+    <cds-content-item-copy>copy</cds-content-item-copy>
+    ${image}
+    <cds-text-cta
+      slot="footer"
+      cta-type="local"
+      icon-placement="right"
+      href="https://example.com"
+      >Lorem Ipsum dolor sit</cds-text-cta
+    >
+  </cds-content-block-segmented-item>
+  <cds-link-list type="default" slot="complementary">
+    <cds-link-list-heading>Lorem Ipsum</cds-link-list-heading>
+    <cds-link-list-item-cta
+      href="https://example.com"
+      cta-type="local"
+      type="default">
+      <p>Containerization A Complete Guide</p>
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      href="https://example.com"
+      cta-type="external"
+      type="default">
+      <p>Why should you use microservices and containers</p>
+    </cds-link-list-item-cta>
+  </cds-link-list>
+  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <cds-card-link-heading>Lorem ipsum dolor</cds-card-link-heading>
+    <cds-card-cta-footer></cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-block-segmented>
 ```
 
-
 ## Props
 
-<Props of="dds-content-block-segmented" />
+<Props of="cds-content-block-segmented" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector               | Compatibility selector                              | Description |
-| ------------------------------------- | --------------------------------------------------- | ----------- |
-| `<dds-content-block-segmented>`       | `data-autoid="dds--content-block-segmented"`        | Component   |
-| `<dds-content-block-segmented-item>`  | `data-autoid="dds--content-block-segmented-item"`   | Component   |
+| Web Components selector              | Compatibility selector                            | Description |
+| ------------------------------------ | ------------------------------------------------- | ----------- |
+| `<cds-content-block-segmented>`      | `data-autoid="cds--content-block-segmented"`      | Component   |
+| `<cds-content-block-segmented-item>` | `data-autoid="cds--content-block-segmented-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx
index 697d586eb22..ef7ce296df0 100644
--- a/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-segmented/__stories__/README.stories.react.mdx
@@ -4,8 +4,8 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 
 # Content block segmented
 
-> The Content Block - Segmented pattern is a variant of `<dds-content-block>`, and
-> includes media, two content group items, and ends with a CTA.
+> The Content Block - Segmented pattern is a variant of `<cds-content-block>`,
+> and includes media, two content group items, and ends with a CTA.
 >
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-block-segmented)
@@ -20,18 +20,18 @@ Here's a quick example to get you started.
 ### JS
 
 ```js
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 // eslint-disable-next-line max-len
-import DDSContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
+import C4DContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
 // eslint-disable-next-line max-len
-import DDSContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
+import C4DContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
@@ -39,11 +39,15 @@ import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320
 import './index.css';
 
 const image = (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Mauris iaculis eget dolor nec hendrerit.">
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage
+    slot="media"
+    alt="Image alt text"
+    default-src={imgLg16x9}
+    heading="Mauris iaculis eget dolor nec hendrerit.">
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
 const contentItemCopy =
@@ -57,40 +61,64 @@ const contentItemCopy =
   'turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium ' +
   'elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.';
 
-const video = <DDSVideoPlayerContainer slot="media" video-id="0_uka1msg4"></DDSVideoPlayerContainer>;
+const video = (
+  <C4DVideoPlayerContainer
+    slot="media"
+    video-id="0_uka1msg4"></C4DVideoPlayerContainer>
+);
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-8 bx--no-gutter">
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-lg-8 cds--no-gutter">
         (
-        <DDSContentBlockSegmented>
-          <DDSContentBlockHeading>Lorem ipsum dolor sit amet.</DDSContentBlockHeading>
-          <DDSContentBlockCopy>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-            hendrerit. Phasellus at elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum dolor sit amet,
-            consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-          </DDSContentBlockCopy>
+        <C4DContentBlockSegmented>
+          <C4DContentBlockHeading>
+            Lorem ipsum dolor sit amet.
+          </C4DContentBlockHeading>
+          <C4DContentBlockCopy>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin, sodales nulla quis, consequat libero. Lorem ipsum
+            dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+            est. Mauris iaculis eget dolor nec hendrerit.
+          </C4DContentBlockCopy>
           {image}
-          <DDSContentBlockSegmentedItem>
-            <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-            <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+          <C4DContentBlockSegmentedItem>
+            <C4DContentGroupHeading>
+              Lorem ipsum dolor sit amet.
+            </C4DContentGroupHeading>
+            <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://example.com">
               Lorem Ipsum dolor sit
-            </DDSTextCTA>
-          </DDSContentBlockSegmentedItem>
-          <DDSContentBlockSegmentedItem>
-            <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-            <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
+            </C4DTextCTA>
+          </C4DContentBlockSegmentedItem>
+          <C4DContentBlockSegmentedItem>
+            <C4DContentGroupHeading>
+              Lorem ipsum dolor sit amet.
+            </C4DContentGroupHeading>
+            <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
             {video}
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://example.com">
               Lorem Ipsum dolor sit
-            </DDSTextCTA>
-          </DDSContentBlockSegmentedItem>
-          <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">
+            </C4DTextCTA>
+          </C4DContentBlockSegmentedItem>
+          <C4DTextCTA
+            slot="footer"
+            cta-type="local"
+            icon-placement="right"
+            href="https://www.example.com">
             Lorem ipsum dolor
-          </DDSTextCTA>
-        </DDSContentBlockSegmented>
+          </C4DTextCTA>
+        </C4DContentBlockSegmented>
         )
       </div>
     </div>
@@ -104,11 +132,13 @@ const App = () => (
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector              | Compatibility selector                            | Description |
 | ------------------------------------ | ------------------------------------------------- | ----------- |
-| `<dds-content-block-segmented>`      | `data-autoid="dds--content-block-segmented"`      | Component   |
-| `<dds-content-block-segmented-item>` | `data-autoid="dds--content-block-segmented-item"` | Component   |
+| `<cds-content-block-segmented>`      | `data-autoid="cds--content-block-segmented"`      | Component   |
+| `<cds-content-block-segmented-item>` | `data-autoid="cds--content-block-segmented-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.react.tsx b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.react.tsx
index ce62dc4fcf2..cfd74895d16 100644
--- a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.react.tsx
@@ -8,24 +8,24 @@
  */
 
 import React from 'react';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 // eslint-disable-next-line max-len
-import DDSContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
+import C4DContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
 // eslint-disable-next-line max-len
-import DDSContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItemCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-card-cta';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
+import C4DContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
 import { select, text } from '@storybook/addon-knobs';
 import readme from './README.stories.react.mdx';
 
@@ -59,11 +59,15 @@ const complementaryStyleSchemes = {
 };
 
 const image = (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Mauris iaculis eget dolor nec hendrerit.">
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage
+    slot="media"
+    alt="Image alt text"
+    default-src={imgLg16x9}
+    heading="Mauris iaculis eget dolor nec hendrerit.">
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
 const contentItemCopy =
@@ -77,7 +81,11 @@ const contentItemCopy =
   'turpis, venenatis eget odio et, tincidunt bibendum sem. Curabitur pretium ' +
   'elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.';
 
-const video = <DDSVideoPlayerContainer slot="media" video-id="0_uka1msg4"></DDSVideoPlayerContainer>;
+const video = (
+  <C4DVideoPlayerContainer
+    slot="media"
+    video-id="0_uka1msg4"></C4DVideoPlayerContainer>
+);
 
 const linkListItems = [
   'Containerization A Complete Guide',
@@ -86,104 +94,151 @@ const linkListItems = [
   'Explore AI use cases in all industries',
 ];
 
-export const Default = args => {
-  const { heading, copy, ctaStyle, ctaType, complementaryStyleScheme } = args?.ContentBlockSegmented ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+export const Default = (args) => {
+  const { heading, copy, ctaStyle, ctaType, complementaryStyleScheme } =
+    args?.ContentBlockSegmented ?? {};
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent && headingComponent.shadowRoot) {
     headingComponent.shadowRoot.textContent = heading;
   }
 
   return (
-    <DDSContentBlockSegmented complementary-style-scheme={complementaryStyleScheme}>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
+    <C4DContentBlockSegmented
+      complementary-style-scheme={complementaryStyleScheme}>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
       {image}
-      <DDSContentBlockSegmentedItem>
-        <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-        <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+      <C4DContentBlockSegmentedItem>
+        <C4DContentGroupHeading>
+          Lorem ipsum dolor sit amet.
+        </C4DContentGroupHeading>
+        <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://example.com">
           Lorem Ipsum dolor sit
-        </DDSTextCTA>
-      </DDSContentBlockSegmentedItem>
-      <DDSContentBlockSegmentedItem>
-        <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-        <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
+        </C4DTextCTA>
+      </C4DContentBlockSegmentedItem>
+      <C4DContentBlockSegmentedItem>
+        <C4DContentGroupHeading>
+          Lorem ipsum dolor sit amet.
+        </C4DContentGroupHeading>
+        <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
         {video}
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://example.com">
           Lorem Ipsum dolor sit
-        </DDSTextCTA>
-      </DDSContentBlockSegmentedItem>
+        </C4DTextCTA>
+      </C4DContentBlockSegmentedItem>
       {ctaStyle === 'text' ? (
-        <DDSTextCTA slot="footer" cta-type={ctaType} icon-placement="right" href={hrefsForType[ctaType]}>
+        <C4DTextCTA
+          slot="footer"
+          cta-type={ctaType}
+          icon-placement="right"
+          href={hrefsForType[ctaType]}>
           Lorem ipsum dolor
-        </DDSTextCTA>
+        </C4DTextCTA>
       ) : (
-        <DDSCardLinkCTA slot="footer" cta-type={ctaType} href={hrefsForType[ctaType]}>
-          <DDSCardLinkHeading>Lorem ipsum dolor</DDSCardLinkHeading>
-          <DDSCardCTAFooter />
-        </DDSCardLinkCTA>
+        <C4DCardLinkCTA
+          slot="footer"
+          cta-type={ctaType}
+          href={hrefsForType[ctaType]}>
+          <C4DCardLinkHeading>Lorem ipsum dolor</C4DCardLinkHeading>
+          <C4DCardCTAFooter />
+        </C4DCardLinkCTA>
       )}
-    </DDSContentBlockSegmented>
+    </C4DContentBlockSegmented>
   );
 };
 
-export const withLinkList = args => {
-  const { blockHeading, heading, copy, ctaStyle, ctaType, complementaryStyleScheme, totalLinks } =
-    args?.ContentBlockSegmented ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+export const withLinkList = (args) => {
+  const {
+    blockHeading,
+    heading,
+    copy,
+    ctaStyle,
+    ctaType,
+    complementaryStyleScheme,
+    totalLinks,
+  } = args?.ContentBlockSegmented ?? {};
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent && headingComponent.shadowRoot) {
     headingComponent.shadowRoot.textContent = blockHeading;
   }
 
   return (
-    <DDSContentBlockSegmented complementary-style-scheme={complementaryStyleScheme}>
-      <DDSContentBlockHeading>{blockHeading}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
+    <C4DContentBlockSegmented
+      complementary-style-scheme={complementaryStyleScheme}>
+      <C4DContentBlockHeading>{blockHeading}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
       {image}
-      <DDSContentBlockSegmentedItem>
-        <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-        <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+      <C4DContentBlockSegmentedItem>
+        <C4DContentGroupHeading>
+          Lorem ipsum dolor sit amet.
+        </C4DContentGroupHeading>
+        <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://example.com">
           Lorem Ipsum dolor sit
-        </DDSTextCTA>
-      </DDSContentBlockSegmentedItem>
-      <DDSContentBlockSegmentedItem>
-        <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-        <DDSContentItemCopy>{contentItemCopy}</DDSContentItemCopy>
+        </C4DTextCTA>
+      </C4DContentBlockSegmentedItem>
+      <C4DContentBlockSegmentedItem>
+        <C4DContentGroupHeading>
+          Lorem ipsum dolor sit amet.
+        </C4DContentGroupHeading>
+        <C4DContentItemCopy>{contentItemCopy}</C4DContentItemCopy>
         {image}
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://example.com">
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://example.com">
           Lorem Ipsum dolor sit
-        </DDSTextCTA>
-      </DDSContentBlockSegmentedItem>
-      <DDSLinkList type="default" slot="complementary">
-        <DDSLinkListHeading>{heading}</DDSLinkListHeading>
-        {linkListItems.slice(0, totalLinks).map(linkListCopy => (
-          <DDSLinkListItemCardCTA href="https://example.com" cta-type="local">
+        </C4DTextCTA>
+      </C4DContentBlockSegmentedItem>
+      <C4DLinkList type="default" slot="complementary">
+        <C4DLinkListHeading>{heading}</C4DLinkListHeading>
+        {linkListItems.slice(0, totalLinks).map((linkListCopy) => (
+          <C4DLinkListItemCTA href="https://example.com" cta-type="local">
             <p>{linkListCopy}</p>
-            <DDSCardCTAFooter />
-          </DDSLinkListItemCardCTA>
+          </C4DLinkListItemCTA>
         ))}
-      </DDSLinkList>
+      </C4DLinkList>
       {ctaStyle === 'text' ? (
-        <DDSTextCTA slot="footer" cta-type={ctaType} icon-placement="right" href={hrefsForType[ctaType]}>
+        <C4DTextCTA
+          slot="footer"
+          cta-type={ctaType}
+          icon-placement="right"
+          href={hrefsForType[ctaType]}>
           Lorem ipsum dolor
-        </DDSTextCTA>
+        </C4DTextCTA>
       ) : (
-        <DDSCardLinkCTA slot="footer" cta-type={ctaType} href={hrefsForType[ctaType]}>
-          <DDSCardLinkHeading>Lorem ipsum dolor</DDSCardLinkHeading>
-          <DDSCardCTAFooter />
-        </DDSCardLinkCTA>
+        <C4DCardLinkCTA
+          slot="footer"
+          cta-type={ctaType}
+          href={hrefsForType[ctaType]}>
+          <C4DCardLinkHeading>Lorem ipsum dolor</C4DCardLinkHeading>
+          <C4DCardCTAFooter />
+        </C4DCardLinkCTA>
       )}
-    </DDSContentBlockSegmented>
+    </C4DContentBlockSegmented>
   );
 };
 
 withLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
       ContentBlockSegmented: () => ({
         blockHeading: text('Heading (required)', 'Lorem ipsum dolor sit amet.'),
@@ -229,16 +284,18 @@ export default {
   title: 'Components/Content block segmented',
   decorators: [
     (story, { parameters }) => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className={`bx--no-gutter ${parameters.gridContentClasses}`}>{story()}</div>
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className={`cds--no-gutter ${parameters.gridContentClasses}`}>
+            {story()}
+          </div>
         </div>
       </div>
     ),
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-8',
+    gridContentClasses: 'cds--col-lg-8',
     hasStoryPadding: true,
     knobs: {
       ContentBlockSegmented: () => ({
diff --git a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts
index 4bce4333e96..a006a019af7 100644
--- a/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts
+++ b/packages/web-components/src/components/content-block-segmented/__stories__/content-block-segmented.stories.ts
@@ -11,8 +11,8 @@ import '../index';
 import '../../video-player/video-player-container';
 import '../../link-list/index';
 import '../../cta/index';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 // eslint-disable-next-line sort-imports
 import { CTA_STYLE, CTA_TYPE } from '../../cta/defs';
@@ -46,18 +46,18 @@ const complementaryStyleSchemes = {
   'With border': CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER,
 };
 const image = html`
-  <dds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="${imgLg16x9}"
     heading="Mauris iaculis eget dolor nec hendrerit.">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
+    <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+    </c4d-image-item>
+  </c4d-image>
 `;
 
 const contentItemCopy =
@@ -72,9 +72,9 @@ const contentItemCopy =
   'elit non blandit lobortis. Donec quis pretium odio, in dignissim sapien.';
 
 const video = html`
-  <dds-video-player-container
+  <c4d-video-player-container
     slot="media"
-    video-id="0_uka1msg4"></dds-video-player-container>
+    video-id="0_uka1msg4"></c4d-video-player-container>
 `;
 
 const linkListItems = [
@@ -87,65 +87,65 @@ const linkListItems = [
 export const Default = (args) => {
   const { heading, copy, ctaStyle, ctaType, complementaryStyleScheme } =
     args?.ContentBlockSegmented ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent && headingComponent.shadowRoot) {
     headingComponent.shadowRoot.textContent = heading;
   }
 
   return html`
-    <dds-content-block-segmented
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-content-block-copy>${copy}</dds-content-block-copy>
+    <c4d-content-block-segmented
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+      <c4d-content-block-copy>${copy}</c4d-content-block-copy>
       ${image}
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading
-          >Lorem ipsum dolor sit amet.</dds-content-group-heading
+      <c4d-content-block-segmented-item>
+        <c4d-content-group-heading
+          >Lorem ipsum dolor sit amet.</c4d-content-group-heading
         >
-        <dds-content-item-copy>${contentItemCopy}</dds-content-item-copy>
-        <dds-text-cta
+        <c4d-content-item-copy>${contentItemCopy}</c4d-content-item-copy>
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
+          >Lorem Ipsum dolor sit</c4d-text-cta
         >
-      </dds-content-block-segmented-item>
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading
-          >Lorem ipsum dolor sit amet.</dds-content-group-heading
+      </c4d-content-block-segmented-item>
+      <c4d-content-block-segmented-item>
+        <c4d-content-group-heading
+          >Lorem ipsum dolor sit amet.</c4d-content-group-heading
         >
-        <dds-content-item-copy>${contentItemCopy}</dds-content-item-copy>
+        <c4d-content-item-copy>${contentItemCopy}</c4d-content-item-copy>
         ${video}
-        <dds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
+          >Lorem Ipsum dolor sit</c4d-text-cta
         >
-      </dds-content-block-segmented-item>
+      </c4d-content-block-segmented-item>
       ${ctaStyle === 'text'
         ? html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
               cta-type=${ctaType}
               icon-placement="right"
               href=${hrefsForType[ctaType]}
-              >Lorem ipsum dolor</dds-text-cta
+              >Lorem ipsum dolor</c4d-text-cta
             >
           `
         : html`
-            <dds-card-link-cta
+            <c4d-card-link-cta
               slot="footer"
               cta-type=${ctaType}
               href=${hrefsForType[ctaType]}>
-              <dds-card-link-heading>Lorem ipsum dolor</dds-card-link-heading>
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-card-link-cta>
+              <c4d-card-link-heading>Lorem ipsum dolor</c4d-card-link-heading>
+              <c4d-card-cta-footer></c4d-card-cta-footer>
+            </c4d-card-link-cta>
           `}
-    </dds-content-block-segmented>
+    </c4d-content-block-segmented>
   `;
 };
 
@@ -159,85 +159,85 @@ export const withLinkList = (args) => {
     complementaryStyleScheme,
     totalLinks,
   } = args?.ContentBlockSegmented ?? {};
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent && headingComponent.shadowRoot) {
     headingComponent.shadowRoot.textContent = blockHeading;
   }
 
   return html`
-    <dds-content-block-segmented
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading>${blockHeading}</dds-content-block-heading>
-      <dds-content-block-copy>${copy}</dds-content-block-copy>
+    <c4d-content-block-segmented
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading>${blockHeading}</c4d-content-block-heading>
+      <c4d-content-block-copy>${copy}</c4d-content-block-copy>
       ${image}
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading
-          >Lorem ipsum dolor sit amet.</dds-content-group-heading
+      <c4d-content-block-segmented-item>
+        <c4d-content-group-heading
+          >Lorem ipsum dolor sit amet.</c4d-content-group-heading
         >
-        <dds-content-item-copy>${contentItemCopy}</dds-content-item-copy>
-        <dds-text-cta
+        <c4d-content-item-copy>${contentItemCopy}</c4d-content-item-copy>
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
+          >Lorem Ipsum dolor sit</c4d-text-cta
         >
-      </dds-content-block-segmented-item>
-      <dds-content-block-segmented-item>
-        <dds-content-group-heading
-          >Lorem ipsum dolor sit amet.</dds-content-group-heading
+      </c4d-content-block-segmented-item>
+      <c4d-content-block-segmented-item>
+        <c4d-content-group-heading
+          >Lorem ipsum dolor sit amet.</c4d-content-group-heading
         >
-        <dds-content-item-copy>${contentItemCopy}</dds-content-item-copy>
+        <c4d-content-item-copy>${contentItemCopy}</c4d-content-item-copy>
         ${image}
-        <dds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="https://example.com"
-          >Lorem Ipsum dolor sit</dds-text-cta
+          >Lorem Ipsum dolor sit</c4d-text-cta
         >
-      </dds-content-block-segmented-item>
-      <dds-link-list type="default" slot="complementary">
-        <dds-link-list-heading>${heading}</dds-link-list-heading>
+      </c4d-content-block-segmented-item>
+      <c4d-link-list type="default" slot="complementary">
+        <c4d-link-list-heading>${heading}</c4d-link-list-heading>
         ${linkListItems.slice(0, totalLinks).map(
           (linkListCopy) => html`
-            <dds-link-list-item-card-cta
+            <c4d-link-list-item-cta
               href="https://example.com"
-              cta-type="local">
+              cta-type="local"
+              type="default">
               <p>${linkListCopy}</p>
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-link-list-item-card-cta>
+            </c4d-link-list-item-cta>
           `
         )}
-      </dds-link-list>
+      </c4d-link-list>
       ${ctaStyle === 'text'
         ? html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
               cta-type=${ctaType}
               icon-placement="right"
               href=${hrefsForType[ctaType]}
-              >Lorem ipsum dolor</dds-text-cta
+              >Lorem ipsum dolor</c4d-text-cta
             >
           `
         : html`
-            <dds-card-link-cta
+            <c4d-card-link-cta
               slot="footer"
               cta-type=${ctaType}
               href=${hrefsForType[ctaType]}>
-              <dds-card-link-heading>Lorem ipsum dolor</dds-card-link-heading>
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-card-link-cta>
+              <c4d-card-link-heading>Lorem ipsum dolor</c4d-card-link-heading>
+              <c4d-card-cta-footer></c4d-card-cta-footer>
+            </c4d-card-link-cta>
           `}
-    </dds-content-block-segmented>
+    </c4d-content-block-segmented>
   `;
 };
 
 withLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
     knobs: {
       ContentBlockSegmented: () => ({
         blockHeading: textNullable(
@@ -286,9 +286,9 @@ export default {
   title: 'Components/Content block segmented',
   decorators: [
     (story, { parameters }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--no-gutter ${parameters.gridContentClasses}">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--no-gutter ${parameters.gridContentClasses}">
             ${story()}
           </div>
         </div>
@@ -297,7 +297,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-8',
+    gridContentClasses: 'cds--col-lg-8',
     hasStoryPadding: true,
     knobs: {
       ContentBlockSegmented: () => ({
diff --git a/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts b/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts
index 6397c1fe7f6..a1af23cd0c0 100644
--- a/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts
+++ b/packages/web-components/src/components/content-block-segmented/__tests__/content-block-segmented.test.ts
@@ -1,43 +1,43 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../content-block-segmented';
 import '../content-block-segmented-item';
 
 const image = html`
-  <dds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
     heading="Mauris iaculis eget dolor nec hendrerit.">
-  </dds-image>
+  </c4d-image>
 `;
 
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-content-block-segmented>
-      <dds-content-block-heading>heading-foo</dds-content-block-heading>
-      <dds-content-block-copy>copy-foo</dds-content-block-copy>
+    <c4d-content-block-segmented>
+      <c4d-content-block-heading>heading-foo</c4d-content-block-heading>
+      <c4d-content-block-copy>copy-foo</c4d-content-block-copy>
       ${children}
-    </dds-content-block-segmented>
+    </c4d-content-block-segmented>
   `;
 };
 
-describe('dds-content-block-segmented', function () {
+describe('c4d-content-block-segmented', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-segmented')
+        document.body.querySelector('c4d-content-block-segmented')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -46,22 +46,22 @@ describe('dds-content-block-segmented', function () {
         template({
           children: html`
             ${image}
-            <dds-content-block-segmented-item>
-            </dds-content-block-segmented-item>
-            <dds-content-block-complementary> </dds-content-block-complementary>
-            <dds-card-cta
+            <c4d-content-block-segmented-item>
+            </c4d-content-block-segmented-item>
+            <c4d-content-block-complementary> </c4d-content-block-complementary>
+            <c4d-card-cta
               slot="footer"
               cta-type="local"
               href="https://example.com">
               Lorem ipsum dolor
-            </dds-card-cta>
+            </c4d-card-cta>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-segmented')
+        document.body.querySelector('c4d-content-block-segmented')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts b/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts
index fc54c86ae87..641944f2d9d 100644
--- a/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts
+++ b/packages/web-components/src/components/content-block-segmented/content-block-segmented-item.ts
@@ -7,25 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, html, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html, TemplateResult } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentGroup from '../content-group/content-group';
+import C4DContentGroup from '../content-group/content-group';
 import styles from './content-block-segmented.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content block segmented item.
  *
- * @element dds-content-block-segmented-item
+ * @element c4d-content-block-segmented-item
  */
-@customElement(`${ddsPrefix}-content-block-segmented-item`)
-class DDSContentBlockSegmentedItem extends StableSelectorMixin(
-  DDSContentGroup
+@customElement(`${c4dPrefix}-content-block-segmented-item`)
+class C4DContentBlockSegmentedItem extends StableSelectorMixin(
+  C4DContentGroup
 ) {
   protected _renderInnerBody(): TemplateResult | string | void {
     return html` ${this._renderContent()}${this._renderMedia()} `;
@@ -43,7 +41,7 @@ class DDSContentBlockSegmentedItem extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-segmented-item`;
+    return `${c4dPrefix}--content-block-segmented-item`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -54,5 +52,10 @@ class DDSContentBlockSegmentedItem extends StableSelectorMixin(
   }
 }
 
+console.warn(
+  'The content-block-segmented-item component has been deprecated in favor of the content-block component. ' +
+    'See content-block documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockSegmentedItem;
+export default C4DContentBlockSegmentedItem;
diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented.scss b/packages/web-components/src/components/content-block-segmented/content-block-segmented.scss
index 0f9e1acb0af..dcdbfaa0bd7 100644
--- a/packages/web-components/src/components/content-block-segmented/content-block-segmented.scss
+++ b/packages/web-components/src/components/content-block-segmented/content-block-segmented.scss
@@ -5,13 +5,17 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-segmented/content-block-segmented';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-segmented';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-content-block-segmented) {
+:host(#{$c4d-prefix}-content-block-segmented) {
   ::slotted(:not([slot])) {
     display: block;
-    margin-top: $carbon--layout-05;
-    margin-bottom: $carbon--layout-05;
+    margin-top: $spacing-10;
+    margin-bottom: $spacing-10;
   }
 
   ::slotted(:not([slot]):last-of-type) {
@@ -22,32 +26,32 @@
     margin-top: 0;
   }
 
-  ::slotted(#{$dds-prefix}-content-block-complementary) {
-    @include carbon--breakpoint-down('lg') {
-      margin: $layout-05 0;
+  ::slotted(#{$c4d-prefix}-content-block-complementary) {
+    @include breakpoint-down(lg) {
+      margin: $spacing-10 0;
     }
   }
 }
 
-:host(#{$dds-prefix}-content-block-segmented-item) ::slotted(*) {
-  margin-left: $carbon--spacing-05;
-  margin-right: $carbon--spacing-05;
+:host(#{$c4d-prefix}-content-block-segmented-item) ::slotted(*) {
+  margin-left: $spacing-05;
+  margin-right: $spacing-05;
 }
 
 // TODO: Consider applying this rule in general
-:host(#{$dds-prefix}-content-block-segmented-item) {
-  ::slotted(#{$dds-prefix}-content-item-copy) {
-    @include carbon--breakpoint('md') {
-      width: calc((100% - 2 * #{$carbon--spacing-05}) * 0.9);
+:host(#{$c4d-prefix}-content-block-segmented-item) {
+  ::slotted(#{$c4d-prefix}-content-item-copy) {
+    @include breakpoint(md) {
+      width: calc((100% - 2 * #{$spacing-05}) * 0.9);
     }
   }
 
   ::slotted([slot='footer']) {
-    margin-top: $carbon--spacing-07;
+    margin-top: $spacing-07;
   }
 }
 
-.#{$dds-prefix}-ce--content-layout--with-adjacent-heading-content
+.#{$c4d-prefix}-ce--content-layout--with-adjacent-heading-content
   ::slotted([slot='heading']) {
   // In this condition, given the heading content and child content are in different grid area, both margins will be in effect.
   // Uses the margin of child content and cancels one of the heading to get the right margin.
diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts
index d1a8d8b39ad..1900699d3f3 100644
--- a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts
+++ b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts
@@ -7,28 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Part } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, css } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentBlock, {
+import { classMap } from 'lit/directives/class-map.js';
+import { css, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentBlock, {
   CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME,
 } from '../content-block/content-block';
 import styles from './content-block-segmented.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Simple version of content block.
  *
- * @element dds-content-block-segmented
+ * @element c4d-content-block-segmented
  */
-@customElement(`${ddsPrefix}-content-block-segmented`)
-class DDSContentBlockSegmented extends DDSContentBlock {
-  protected _getContainerClasses(): string | ((part: Part) => void) {
+@customElement(`${c4dPrefix}-content-block-segmented`)
+class C4DContentBlockSegmented extends C4DContentBlock {
+  protected _getContainerClasses() {
     const {
       complementaryStyleScheme,
       _hasComplementary: hasComplementary,
@@ -40,7 +37,7 @@ class DDSContentBlockSegmented extends DDSContentBlock {
     return classMap({
       [`${prefix}--content-layout`]: true,
       [`${prefix}--content-layout--with-complementary`]: hasComplementary,
-      [`${ddsPrefix}-ce--content-layout--with-adjacent-heading-content`]:
+      [`${c4dPrefix}-ce--content-layout--with-adjacent-heading-content`]:
         hasHeading && hasContent && !hasCopy && !hasMedia,
       [`${prefix}--layout--border`]:
         complementaryStyleScheme ===
@@ -53,7 +50,7 @@ class DDSContentBlockSegmented extends DDSContentBlock {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-segmented`;
+    return `${c4dPrefix}--content-block-segmented`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -64,5 +61,10 @@ class DDSContentBlockSegmented extends DDSContentBlock {
   }
 }
 
+console.warn(
+  'The content-block-segmented component has been deprecated in favor of the content-section/block and a variety of group components. ' +
+    'See content-section/block documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockSegmented;
+export default C4DContentBlockSegmented;
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx
index cde32fb2c3d..08490605e84 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.mdx
@@ -3,9 +3,9 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<dds-content-block-simple>`
+# `<cds-content-block-simple>`
 
-> The Content Block - Simple pattern is a variant of `<dds-content-block>`, and
+> The Content Block - Simple pattern is a variant of `<cds-content-block>`, and
 > includes a single content item, optional media (image), and ends with a CTA.
 
 > 💡 Check our
@@ -36,38 +36,34 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/text-cta.js';
 ### HTML
 
 ```html
-<dds-content-block-simple>
-  <dds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</dds-content-block-heading
+<cds-content-block-simple>
+  <cds-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
   >
-  <dds-content-block-copy size="sm"
-    >Lorem ipsum *dolor* sit amet</dds-content-block-copy
+  <cds-content-block-copy size="sm"
+    >Lorem ipsum *dolor* sit amet</cds-content-block-copy
   >
-  <dds-image
+  <cds-image
     slot="media"
     alt="Image alt text"
-    default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-  >
-    <dds-image-item
+    default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    <cds-image-item
       media="(min-width: 672px)"
-      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-    <dds-image-item
+      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
       media="(min-width: 400px)"
-      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-    <dds-image-item
+      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
       media="(min-width: 320px)"
-      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-  </dds-image>
-  <dds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
-    >Lorem ipsum dolor sit amet</dds-text-cta
+      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+  </cds-image>
+  <cds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
+    >Lorem ipsum dolor sit amet</cds-text-cta
   >
-</dds-content-block-simple>
+</cds-content-block-simple>
 ```
 
 ## With Card Link CTA
@@ -85,37 +81,33 @@ import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
 ### HTML
 
 ```html
-<dds-content-block-simple>
-  <dds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</dds-content-block-heading
+<cds-content-block-simple>
+  <cds-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
   >
-  <dds-content-block-copy size="sm"
-    >Lorem ipsum *dolor* sit amet</dds-content-block-copy
+  <cds-content-block-copy size="sm"
+    >Lorem ipsum *dolor* sit amet</cds-content-block-copy
   >
-  <dds-image
+  <cds-image
     slot="media"
     alt="Image alt text"
-    default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-  >
-    <dds-image-item
+    default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    <cds-image-item
       media="(min-width: 672px)"
-      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-    <dds-image-item
+      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
       media="(min-width: 400px)"
-      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-    <dds-image-item
+      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
       media="(min-width: 320px)"
-      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-  </dds-image>
-  <dds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
-    <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-    <dds-card-cta-footer>
+      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+  </cds-image>
+  <cds-card-link-cta slot="footer" cta-type="local" href="https://www.ibm.com/">
+    <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+    <cds-card-cta-footer>
       <svg
         slot="icon"
         focusable="false"
@@ -125,15 +117,13 @@ import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
+        viewBox="0 0 20 20">
         <path
-          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"
-        ></path>
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-card-cta-footer>
-  </dds-card-link-cta>
-</dds-content-block-simple>
+    </cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-block-simple>
 ```
 
 ## With Link List
@@ -147,63 +137,63 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-simple/inde
 import '@carbon/ibmdotcom-web-components/es/components/cta/text-cta.js';
 
 // with link list
-import '@carbon/ibmdotcom-web-components/es/components/cta/link-list-item-card-cta.js';
+import '@carbon/ibmdotcom-web-components/es/components/cta/link-list-item-cta.js';
 import '@carbon/ibmdotcom-web-components/es/components/link-list/index';
 ```
 
 ### HTML
 
 ```html
-<dds-content-block-simple>
-  <dds-content-block-heading
-    >Curabitur malesuada varius mi eu posuere</dds-content-block-heading
+<cds-content-block-simple>
+  <cds-content-block-heading
+    >Curabitur malesuada varius mi eu posuere</cds-content-block-heading
   >
-  <dds-content-block-copy size="sm"
-    >Lorem ipsum *dolor* sit amet</dds-content-block-copy
+  <cds-content-block-copy size="sm"
+    >Lorem ipsum *dolor* sit amet</cds-content-block-copy
   >
-  <dds-image
+  <cds-image
     slot="media"
     alt="Image alt text"
-    default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-  >
-    <dds-image-item
+    default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    <cds-image-item
       media="(min-width: 672px)"
-      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-    <dds-image-item
+      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
       media="(min-width: 400px)"
-      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-    <dds-image-item
+      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
       media="(min-width: 320px)"
-      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"
-    >
-    </dds-image-item>
-  </dds-image>
-
-  <dds-link-list type="default" slot="complementary">
-    <dds-link-list-heading>Tutorial</dds-link-list-heading>
-    <dds-link-list-item-card-cta href="${ifNonNull(href)}" cta-type="local">
+      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+  </cds-image>
+
+  <cds-link-list type="default" slot="complementary">
+    <cds-link-list-heading>Tutorial</cds-link-list-heading>
+    <cds-link-list-item-cta
+      href="${ifDefined(href)}"
+      cta-type="local"
+      type="default">
       <p>Containerization A Complete Guide</p>
-      <dds-card-cta-footer></dds-card-cta-footer>
-    </dds-link-list-item-card-cta>
-    <dds-link-list-item-card-cta href="${ifNonNull(href)}" cta-type="external">
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      href="${ifDefined(href)}"
+      cta-type="external"
+      type="default">
       <p>Why should you use microservices and containers</p>
-      <dds-card-cta-footer></dds-card-cta-footer>
-    </dds-link-list-item-card-cta>
-  </dds-link-list>
+    </cds-link-list-item-cta>
+  </cds-link-list>
 
-  <dds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
-    >Lorem ipsum dolor sit amet</dds-text-cta
+  <cds-text-cta slot="footer" href="https://www.ibm.com/" cta-type="local"
+    >Lorem ipsum dolor sit amet</cds-text-cta
   >
-</dds-content-block-simple>
+</cds-content-block-simple>
 ```
 
 ## Props
 
-<Props of="dds-content-block-simple" />
+<Props of="cds-content-block-simple" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -214,8 +204,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                      | Description |
 | ----------------------------- | ------------------------------------------- | ----------- |
-| `<dds-content-block-simple>`  | `data-autoid="dds--content-block-simple"`   | Component   |
-| `<dds-content-block-copy>`    | `data-autoid="dds--content-block__copy"`    | Component   |
-| `<dds-content-block-heading>` | `data-autoid="dds--content-block__heading"` | Component   |
+| `<cds-content-block-simple>`  | `data-autoid="cds--content-block-simple"`   | Component   |
+| `<cds-content-block-copy>`    | `data-autoid="cds--content-block__copy"`    | Component   |
+| `<cds-content-block-heading>` | `data-autoid="cds--content-block__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx
index 075d5f0fdcc..8715654ff25 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block-simple/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
 
@@ -22,13 +27,17 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block-simple/inde
 function App() {
   return (
     <main id="example-main-content">
-      <DDSContentBlockSimple>
-        <DDSContentBlockHeading>Heading</DDSContentBlockHeading>
-        <DDSContentBlockCopy size="sm">Content copy</DDSContentBlockCopy>
-          <DDSTextCTA cta-type={ctaType} slot="footer" href="#" icon-placement="right">
-            Text CTA
-          </DDSTextCTA>
-      </DDSContentBlockSimple>
+      <C4DContentBlockSimple>
+        <C4DContentBlockHeading>Heading</C4DContentBlockHeading>
+        <C4DContentBlockCopy size="sm">Content copy</C4DContentBlockCopy>
+        <C4DTextCTA
+          cta-type={ctaType}
+          slot="footer"
+          href="#"
+          icon-placement="right">
+          Text CTA
+        </C4DTextCTA>
+      </C4DContentBlockSimple>
     </main>
   );
 }
@@ -36,11 +45,11 @@ function App() {
 
 ### HTML
 
-> The Content Block - Simple pattern is a variant of `<dds-content-block>`, and
+> The Content Block - Simple pattern is a variant of `<cds-content-block>`, and
 > includes a single content item, optional media (image), and ends with a CTA.
 
 ```html
-<dds-content-block-simple></dds-content-block-simple>
+<cds-content-block-simple></cds-content-block-simple>
 ```
 
 ## Props
@@ -49,10 +58,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector           | Description |
-| ----------------------- | -------------------------------- | ----------- |
-| `<dds-content-block-simple>`     | `data-autoid="dds--content-block-simple"` | Component   |
+| Web Components selector      | Compatibility selector                    | Description |
+| ---------------------------- | ----------------------------------------- | ----------- |
+| `<cds-content-block-simple>` | `data-autoid="cds--content-block-simple"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx
index 124fe4a552b..8942cea8e99 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx
+++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.react.tsx
@@ -13,13 +13,13 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 /* eslint-disable max-len */
-import DDSContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 import { CONTENT_BLOCK_COPY_SIZE } from '../../content-block/content-block-copy';
 import { CTA_STYLE, CTA_TYPE } from '../../cta/defs';
 import readme from './README.stories.react.mdx';
@@ -56,26 +56,35 @@ const ctaStyles = {
   [`Text (${CTA_STYLE.TEXT})`]: CTA_STYLE.TEXT,
 };
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading, ctaStyle, ctaType } = args?.ContentBlockSimple ?? {};
   return (
     <>
-      <DDSContentBlockSimple>
-        <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-        <DDSContentBlockCopy size={CONTENT_BLOCK_COPY_SIZE.SMALL}>{copy}</DDSContentBlockCopy>
+      <C4DContentBlockSimple>
+        <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+        <C4DContentBlockCopy size={CONTENT_BLOCK_COPY_SIZE.SMALL}>
+          {copy}
+        </C4DContentBlockCopy>
         {ctaStyle === 'card' ? (
-          <DDSCardLink cta-type={ctaType} slot="footer" href="https://example.com">
-            <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-            <DDSCardFooter>
+          <C4DCardLink
+            cta-type={ctaType}
+            slot="footer"
+            href="https://example.com">
+            <C4DCardLinkHeading>Lorem ipsum dolor sit amet</C4DCardLinkHeading>
+            <C4DCardFooter>
               <ArrowRight20 slot="icon" />
-            </DDSCardFooter>
-          </DDSCardLink>
+            </C4DCardFooter>
+          </C4DCardLink>
         ) : (
-          <DDSTextCTA cta-type={ctaType} slot="footer" href="#" icon-placement="right">
+          <C4DTextCTA
+            cta-type={ctaType}
+            slot="footer"
+            href="#"
+            icon-placement="right">
             Lorem ipsum dolor sit amet
-          </DDSTextCTA>
+          </C4DTextCTA>
         )}
-      </DDSContentBlockSimple>
+      </C4DContentBlockSimple>
     </>
   );
 };
@@ -84,7 +93,10 @@ Default.story = {
   parameters: {
     knobs: {
       ContentBlockSimple: () => ({
-        heading: text('Heading (required)', 'Curabitur malesuada varius mi eu posuere'),
+        heading: text(
+          'Heading (required)',
+          'Curabitur malesuada varius mi eu posuere'
+        ),
         copy,
         ctaStyle: select('CTA style', ctaStyles, CTA_STYLE.TEXT),
         ctaType: select('CTA type (cta-type)', ctaTypes, CTA_TYPE.LOCAL),
@@ -96,11 +108,11 @@ Default.story = {
 export default {
   title: 'Components/Content block simple',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--no-gutter bx--col-lg-12">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--no-gutter cds--col-lg-12">{story()}</div>
           </div>
         </div>
       );
diff --git a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
index 687556969bf..e6774eb47dc 100644
--- a/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
+++ b/packages/web-components/src/components/content-block-simple/__stories__/content-block-simple.stories.ts
@@ -10,8 +10,8 @@
 import '../index';
 import '../../cta/index';
 import '../../link-list/index';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
@@ -64,14 +64,14 @@ const copy = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean
 `;
 
 const image = html`
-  <dds-image slot="media" alt="Image alt text" default-src="${imgLg16x9}">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
+  <c4d-image slot="media" alt="Image alt text" default-src="${imgLg16x9}">
+    <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+    </c4d-image-item>
+  </c4d-image>
 `;
 
 export const Default = (args) => {
@@ -80,37 +80,37 @@ export const Default = (args) => {
   const ctaCopy = 'Lorem ipsum dolor sit amet';
   const href = 'https://www.example.com';
   return html`
-    <dds-content-block-simple
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
-      <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
-        >${copy}</dds-content-block-copy
+    <c4d-content-block-simple
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading><h2>${heading}</h2></c4d-content-block-heading>
+      <c4d-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
+        >${copy}</c4d-content-block-copy
       >
       ${ctaStyle === 'card-link'
         ? html`
-            <dds-card-link-cta
+            <c4d-card-link-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
-              href="${ifNonNull(href)}">
-              <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-              <dds-card-cta-footer>
+              cta-type="${ifDefined(ctaType)}"
+              href="${ifDefined(href)}">
+              <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+              <c4d-card-cta-footer>
                 ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''}
                 ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''}
                 ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''}
-              </dds-card-cta-footer>
-            </dds-card-link-cta>
+              </c4d-card-cta-footer>
+            </c4d-card-link-cta>
           `
         : html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
+              cta-type="${ifDefined(ctaType)}"
               icon-placement="right"
-              href="${ifNonNull(href)}"
+              href="${ifDefined(href)}"
               @click="${onClick}">
               ${ctaCopy}
-            </dds-text-cta>
+            </c4d-text-cta>
           `}
-    </dds-content-block-simple>
+    </c4d-content-block-simple>
   `;
 };
 
@@ -120,38 +120,38 @@ export const WithImage = (args) => {
   const ctaCopy = 'Lorem ipsum dolor sit amet';
   const href = 'https://www.example.com';
   return html`
-    <dds-content-block-simple
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
+    <c4d-content-block-simple
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading><h2>${heading}</h2></c4d-content-block-heading>
       ${image}
-      <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
-        >${copy}</dds-content-block-copy
+      <c4d-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
+        >${copy}</c4d-content-block-copy
       >
       ${ctaStyle === 'card-link'
         ? html`
-            <dds-card-link-cta
+            <c4d-card-link-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
-              href="${ifNonNull(href)}">
-              <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-              <dds-card-cta-footer>
+              cta-type="${ifDefined(ctaType)}"
+              href="${ifDefined(href)}">
+              <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+              <c4d-card-cta-footer>
                 ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''}
                 ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''}
                 ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''}
-              </dds-card-cta-footer>
-            </dds-card-link-cta>
+              </c4d-card-cta-footer>
+            </c4d-card-link-cta>
           `
         : html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
+              cta-type="${ifDefined(ctaType)}"
               icon-placement="right"
-              href="${ifNonNull(href)}"
+              href="${ifDefined(href)}"
               @click="${onClick}">
               ${ctaCopy}
-            </dds-text-cta>
+            </c4d-text-cta>
           `}
-    </dds-content-block-simple>
+    </c4d-content-block-simple>
   `;
 };
 
@@ -165,47 +165,47 @@ export const WithVideo = (args) => {
   const ctaCopy = 'Lorem ipsum dolor sit amet';
   const href = 'https://www.example.com';
   return html`
-    <dds-content-block-simple
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
-      <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
-        >${copy}</dds-content-block-copy
+    <c4d-content-block-simple
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading><h2>${heading}</h2></c4d-content-block-heading>
+      <c4d-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
+        >${copy}</c4d-content-block-copy
       >
-      <dds-video-player-container
+      <c4d-video-player-container
         slot="media"
-        video-id="1_9h94wo6b"></dds-video-player-container>
+        video-id="0_ibuqxqbe"></c4d-video-player-container>
       ${ctaStyle === 'card-link'
         ? html`
-            <dds-card-link-cta
+            <c4d-card-link-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
-              href="${ifNonNull(href)}">
-              <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-              <dds-card-cta-footer>
+              cta-type="${ifDefined(ctaType)}"
+              href="${ifDefined(href)}">
+              <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+              <c4d-card-cta-footer>
                 ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''}
                 ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''}
                 ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''}
-              </dds-card-cta-footer>
-            </dds-card-link-cta>
+              </c4d-card-cta-footer>
+            </c4d-card-link-cta>
           `
         : html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
+              cta-type="${ifDefined(ctaType)}"
               icon-placement="right"
-              href="${ifNonNull(href)}"
+              href="${ifDefined(href)}"
               @click="${onClick}">
               ${ctaCopy}
-            </dds-text-cta>
+            </c4d-text-cta>
           `}
-    </dds-content-block-simple>
+    </c4d-content-block-simple>
   `;
 };
 
 WithVideo.story = {
   name: 'With video',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
   },
 };
 
@@ -215,58 +215,60 @@ export const WithLinkList = (args) => {
   const ctaCopy = 'Lorem ipsum dolor sit amet';
   const href = 'https://www.example.com';
   return html`
-    <dds-content-block-simple
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
-      <dds-content-block-heading><h2>${heading}</h2></dds-content-block-heading>
-      <dds-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
-        >${copy}</dds-content-block-copy
+    <c4d-content-block-simple
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
+      <c4d-content-block-heading><h2>${heading}</h2></c4d-content-block-heading>
+      <c4d-content-block-copy size="${CONTENT_BLOCK_COPY_SIZE.SMALL}"
+        >${copy}</c4d-content-block-copy
       >
       ${image}
-      <dds-link-list type="default" slot="complementary">
-        <dds-link-list-heading>Tutorial</dds-link-list-heading>
-        <dds-link-list-item-card-cta href="${ifNonNull(href)}" cta-type="local">
+      <c4d-link-list type="default" slot="complementary">
+        <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+        <c4d-link-list-item-cta
+          href="${ifDefined(href)}"
+          cta-type="local"
+          type="default">
           <p>Containerization A Complete Guide</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-        <dds-link-list-item-card-cta
-          href="${ifNonNull(href)}"
-          cta-type="external">
+        </c4d-link-list-item-cta>
+        <c4d-link-list-item-cta
+          href="${ifDefined(href)}"
+          cta-type="external"
+          type="default">
           <p>Why should you use microservices and containers</p>
-          <dds-card-cta-footer></dds-card-cta-footer>
-        </dds-link-list-item-card-cta>
-      </dds-link-list>
+        </c4d-link-list-item-cta>
+      </c4d-link-list>
       ${ctaStyle === 'card-link'
         ? html`
-            <dds-card-link-cta
+            <c4d-card-link-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
-              href="${ifNonNull(href)}">
-              <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-              <dds-card-cta-footer>
+              cta-type="${ifDefined(ctaType)}"
+              href="${ifDefined(href)}">
+              <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+              <c4d-card-cta-footer>
                 ${ctaType === 'local' ? ArrowRight20({ slot: 'icon' }) : ''}
                 ${ctaType === 'jump' ? ArrowDown20({ slot: 'icon' }) : ''}
                 ${ctaType === 'external' ? Launch20({ slot: 'icon' }) : ''}
-              </dds-card-cta-footer>
-            </dds-card-link-cta>
+              </c4d-card-cta-footer>
+            </c4d-card-link-cta>
           `
         : html`
-            <dds-text-cta
+            <c4d-text-cta
               slot="footer"
-              cta-type="${ifNonNull(ctaType)}"
+              cta-type="${ifDefined(ctaType)}"
               icon-placement="right"
-              href="${ifNonNull(href)}"
+              href="${ifDefined(href)}"
               @click="${onClick}">
               ${ctaCopy}
-            </dds-text-cta>
+            </c4d-text-cta>
           `}
-    </dds-content-block-simple>
+    </c4d-content-block-simple>
   `;
 };
 
 WithLinkList.story = {
   name: 'With link list',
   parameters: {
-    gridContentClasses: 'bx--col-lg-12',
+    gridContentClasses: 'cds--col-lg-12',
   },
 };
 
@@ -274,9 +276,9 @@ export default {
   title: 'Components/Content block simple',
   decorators: [
     (story, { parameters }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--no-gutter ${parameters.gridContentClasses}">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--no-gutter ${parameters.gridContentClasses}">
             ${story()}
           </div>
         </div>
@@ -285,7 +287,7 @@ export default {
   ],
   parameters: {
     ...readme.parameters,
-    gridContentClasses: 'bx--col-lg-9',
+    gridContentClasses: 'cds--col-lg-9',
     hasStoryPadding: true,
     knobs: {
       ContentBlockSimple: () => ({
diff --git a/packages/web-components/src/components/content-block-simple/__tests__/content-block-simple.test.ts b/packages/web-components/src/components/content-block-simple/__tests__/content-block-simple.test.ts
index 20052ee958c..2ac1a1e4c16 100644
--- a/packages/web-components/src/components/content-block-simple/__tests__/content-block-simple.test.ts
+++ b/packages/web-components/src/components/content-block-simple/__tests__/content-block-simple.test.ts
@@ -7,28 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../../content-block/content-block';
 import '../content-block-simple';
 
 const template = (props?) => {
   const { complementaryStyleScheme, children } = props ?? {};
   return html`
-    <dds-content-block-simple
-      complementary-style-scheme="${ifNonNull(complementaryStyleScheme)}">
+    <c4d-content-block-simple
+      complementary-style-scheme="${ifDefined(complementaryStyleScheme)}">
       ${children}
-    </dds-content-block-simple>
+    </c4d-content-block-simple>
   `;
 };
 
-describe('dds-content-block-simple', function () {
+describe('c4d-content-block-simple', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-block-simple')
+        document.body.querySelector('c4d-content-block-simple')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -41,11 +41,11 @@ describe('dds-content-block-simple', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-content-block-simple>`
+      await Promise.resolve(); // The update cycle of `<c4d-content-block-simple>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       expect(
-        document.body.querySelector('dds-content-block-simple')
+        document.body.querySelector('c4d-content-block-simple')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-block-simple/content-block-simple.scss b/packages/web-components/src/components/content-block-simple/content-block-simple.scss
index ef381f36a0c..5cc4454b010 100644
--- a/packages/web-components/src/components/content-block-simple/content-block-simple.scss
+++ b/packages/web-components/src/components/content-block-simple/content-block-simple.scss
@@ -5,29 +5,29 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/components/content-block-simple/content-block-simple';
-@import '@carbon/ibmdotcom-styles/scss/components/image/image';
-@import '@carbon/ibmdotcom-styles/scss/components/video-player/video-player';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/content-block-simple';
+@use '@carbon/ibmdotcom-styles/scss/components/image';
+@use '@carbon/ibmdotcom-styles/scss/components/video-player';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-content-block-simple) {
+:host(#{$c4d-prefix}-content-block-simple) {
   display: block;
 
-  ::slotted(#{$dds-prefix}-content-block-complementary) {
-    @include carbon--breakpoint-down('lg') {
-      margin: $layout-05 0;
+  ::slotted(#{$c4d-prefix}-content-block-complementary) {
+    @include breakpoint-down(lg) {
+      margin: $spacing-10 0;
     }
   }
 
-  ::slotted(#{$dds-prefix}-card-cta[slot]),
-  ::slotted(#{$dds-prefix}-card-link-cta[slot]) {
+  ::slotted(#{$c4d-prefix}-card-cta[slot]),
+  ::slotted(#{$c4d-prefix}-card-link-cta[slot]) {
     width: auto;
   }
 
-  ::slotted(#{$dds-prefix}-card-cta),
-  ::slotted(#{$dds-prefix}-card-link-cta) {
+  ::slotted(#{$c4d-prefix}-card-cta),
+  ::slotted(#{$c4d-prefix}-card-link-cta) {
     width: auto;
     max-width: 320px;
   }
diff --git a/packages/web-components/src/components/content-block-simple/content-block-simple.ts b/packages/web-components/src/components/content-block-simple/content-block-simple.ts
index 775511033f7..5233b75c3d3 100644
--- a/packages/web-components/src/components/content-block-simple/content-block-simple.ts
+++ b/packages/web-components/src/components/content-block-simple/content-block-simple.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './content-block-simple.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Simple version of content block.
  *
- * @element dds-content-block-simple
+ * @element c4d-content-block-simple
  */
-@customElement(`${ddsPrefix}-content-block-simple`)
-class DDSContentBlockSimple extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-content-block-simple`)
+class C4DContentBlockSimple extends StableSelectorMixin(C4DContentBlock) {
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-simple`;
+    return `${c4dPrefix}--content-block-simple`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -35,5 +35,10 @@ class DDSContentBlockSimple extends StableSelectorMixin(DDSContentBlock) {
   }
 }
 
+console.warn(
+  'The content-block-simple component has been deprecated in favor of the content-section/block component. ' +
+    'See content-section/block documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockSimple;
+export default C4DContentBlockSimple;
diff --git a/packages/web-components/src/components/content-block/__stories__/README.stories.mdx b/packages/web-components/src/components/content-block/__stories__/README.stories.mdx
index 18210941eb9..a5856403eec 100644
--- a/packages/web-components/src/components/content-block/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-block/__stories__/README.stories.mdx
@@ -3,7 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<dds-content-block>`
+# `<cds-content-block>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-block)
@@ -27,30 +27,35 @@ import '@carbon/ibmdotcom-web-components/es/components/content-block/index.js';
 ### HTML
 
 ```html
-<dds-content-block>
-  <dds-content-block-heading>Heading text</dds-content-block-heading>
-  <dds-content-block-copy>Copy test</dds-content-block-copy>
-  <dds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-    <dds-card-link-heading>cta copy</dds-card-link-heading>
-    <dds-card-cta-footer></dds-card-cta-footer>
-  </dds-card-link-cta>
-</dds-content-block>
+<cds-content-block>
+  <cds-content-block-heading>Heading text</cds-content-block-heading>
+  <cds-content-block-copy>Copy test</cds-content-block-copy>
+  <cds-card-link-cta
+    slot="footer"
+    cta-type="local"
+    href="https://www.example.com">
+    <cds-card-link-heading>cta copy</cds-card-link-heading>
+    <cds-card-cta-footer></cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-block>
 ```
 
 ## Props
 
-<Props of="dds-content-block" />
+<Props of="cds-content-block" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector             | Compatibility selector                            | Description |
 | ----------------------------------- | ------------------------------------------------- | ----------- |
-| `<dds-content-block>`               | `data-autoid="dds--content-block"`                | Component   |
-| `<dds-content-block-copy>`          | `data-autoid="dds--content-block__copy"`          | Component   |
-| `<dds-content-block-heading>`       | `data-autoid="dds--content-block__heading"`       | Component   |
-| `<dds-content-block-complementary>` | `data-autoid="dds--content-block__complementary"` | Component   |
+| `<cds-content-block>`               | `data-autoid="cds--content-block"`                | Component   |
+| `<cds-content-block-copy>`          | `data-autoid="cds--content-block__copy"`          | Component   |
+| `<cds-content-block-heading>`       | `data-autoid="cds--content-block__heading"`       | Component   |
+| `<cds-content-block-complementary>` | `data-autoid="cds--content-block__complementary"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx
index 83da6395a82..a43b07bbb47 100644
--- a/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-block/__stories__/README.stories.react.mdx
@@ -22,23 +22,23 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSContentBlock from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentBlock from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block.js';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 
 function App() {
   return (
-    <DDSContentBlock>
-      <DDSContentBlockHeading>Heading text</DDSContentBlockHeading>
-      <DDSContentBlockCopy>Copy test</DDSContentBlockCopy>
-      <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-        <DDSCardLinkHeading>cta copy</DDSCardLinkCTA>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentBlock>
+    <C4DContentBlock>
+      <C4DContentBlockHeading>Heading text</C4DContentBlockHeading>
+      <C4DContentBlockCopy>Copy test</C4DContentBlockCopy>
+      <C4DCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
+        <C4DCardLinkHeading>cta copy</C4DCardLinkCTA>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardLinkCTA>
+    </C4DContentBlock>
   );
 }
 ```
@@ -55,9 +55,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector             | Compatibility selector                            | Description |
 | ----------------------------------- | ------------------------------------------------- | ----------- |
-| `<dds-content-block>`               | `data-autoid="dds--content-block"`                | Component   |
-| `<dds-content-block-copy>`          | `data-autoid="dds--content-block__copy"`          | Component   |
-| `<dds-content-block-heading>`       | `data-autoid="dds--content-block__heading"`       | Component   |
-| `<dds-content-block-complementary>` | `data-autoid="dds--content-block__complementary"` | Component   |
+| `<cds-content-block>`               | `data-autoid="cds--content-block"`                | Component   |
+| `<cds-content-block-copy>`          | `data-autoid="cds--content-block__copy"`          | Component   |
+| `<cds-content-block-heading>`       | `data-autoid="cds--content-block__heading"`       | Component   |
+| `<cds-content-block-complementary>` | `data-autoid="cds--content-block__complementary"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-block/__stories__/content-block.stories.react.tsx b/packages/web-components/src/components/content-block/__stories__/content-block.stories.react.tsx
deleted file mode 100644
index d14452b5d2d..00000000000
--- a/packages/web-components/src/components/content-block/__stories__/content-block.stories.react.tsx
+++ /dev/null
@@ -1,206 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { boolean, optionsKnob } from '@storybook/addon-knobs';
-import React from 'react';
-
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-
-// @ts-ignore
-import DDSContentBlock from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-// eslint-disable-next-line max-len
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListCard from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item-card';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';
-import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg';
-
-import readme from './README.stories.react.mdx';
-import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../defs';
-
-const itemsHeading = 'Lorem ipsum dolor sit amet.';
-
-const copyWithList = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-  Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-  Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit.
-  Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    - list item 1a
-  1. list item 2
-    1. list item 2a
-`;
-
-const itemsCopy = `Lorem ipsum dolor sit amet, *consectetur* adipiscing elit.
-  Vivamus sed interdum tortor. Sed id pellentesque diam.
-  In ut quam id mauris finibus efficitur quis ut arcu.
-  Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
-  Curabitur pretium elit non blandit lobortis.
-  Donec quis pretium odio, in dignissim sapien.`;
-
-const image = (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Lorem ipsum dolor sit amet.">
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9}>
-      {' '}
-    </DDSImageItem>
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9}>
-      {' '}
-    </DDSImageItem>
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9}>
-      {' '}
-    </DDSImageItem>
-  </DDSImage>
-);
-
-const items = [
-  {
-    itemsHeading,
-    itemsCopy,
-  },
-  {
-    itemsHeading,
-    itemsCopy: copyWithList,
-  },
-  {
-    itemsHeading,
-    itemsCopy,
-  },
-];
-
-export const Default = args => {
-  const { heading, copy, showCopy, addChildren, showCTA, border, aside } = args?.ContentBlock ?? {};
-  return (
-    <DDSContentBlock complementaryStyleScheme={border ? CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER : ''}>
-      {heading ? <DDSContentBlockHeading>What is the latest news in artificial intelligence?</DDSContentBlockHeading> : ''}
-      {showCopy ? <DDSContentBlockCopy>{copy}</DDSContentBlockCopy> : ''}
-      {addChildren.includes('Content group simple') ? (
-        <DDSContentGroupSimple>
-          <DDSContentGroupHeading>Natural language processing (NLP)</DDSContentGroupHeading>
-          <DDSContentGroupCopy>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-          </DDSContentGroupCopy>
-          {image}
-          {items.map(({ itemsHeading: itemHeading, itemsCopy: itemCopy }) => (
-            <DDSContentItem>
-              <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-              <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-            </DDSContentItem>
-          ))}
-        </DDSContentGroupSimple>
-      ) : (
-        ''
-      )}
-
-      {showCTA ? (
-        <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-          <DDSCardLinkHeading>Learn more about natural langauge processing</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
-      ) : (
-        ''
-      )}
-      {aside ? (
-        <DDSLinkList type="default" slot="complementary">
-          <DDSLinkListHeading>Tutorials</DDSLinkListHeading>
-
-          <DDSLinkListCard href="https://example.com">
-            <p>Learn more about Kubernetes</p>
-            <DDSCardFooter>
-              <ArrowRight20 slot="icon" />
-            </DDSCardFooter>
-          </DDSLinkListCard>
-
-          <DDSLinkListCard href="https://example.com">
-            <p>Containerziation A Complete Guide</p>
-            <DDSCardFooter>
-              <ArrowRight20 slot="icon" />
-            </DDSCardFooter>
-          </DDSLinkListCard>
-        </DDSLinkList>
-      ) : (
-        ''
-      )}
-    </DDSContentBlock>
-  );
-};
-
-export default {
-  title: 'Components/Content block',
-  decorators: [
-    story => {
-      return <>{story()}</>;
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      ContentBlock: () => ({
-        heading: boolean('Heading:', true),
-        showCopy: boolean('Copy:', true),
-        copy:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at,' +
-          ' molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et' +
-          ' magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ' +
-          'ligula, vitae finibus ante aliquet a.',
-
-        aside: boolean('Aside:', false),
-        addChildren: optionsKnob(
-          'Add children:',
-          {
-            'Content group simple': 'Content group simple',
-          },
-          '',
-          { display: 'multi-select' }
-        ),
-        showCTA: boolean('CTA:', true),
-        border: boolean('Border:', false),
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentBlock: {
-          heading: true,
-          showCopy: true,
-          copy:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at,' +
-            ' molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et' +
-            ' magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ' +
-            'ligula, vitae finibus ante aliquet a.',
-          aside: false,
-          addChildren: '',
-          showCTA: true,
-          border: false,
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/content-block/__stories__/content-block.stories.ts b/packages/web-components/src/components/content-block/__stories__/content-block.stories.ts
deleted file mode 100644
index 8f787fdcca9..00000000000
--- a/packages/web-components/src/components/content-block/__stories__/content-block.stories.ts
+++ /dev/null
@@ -1,215 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import '../index';
-import '../../cta/index';
-import '../../card-link/index';
-import { html } from 'lit-element';
-import { boolean, optionsKnob } from '@storybook/addon-knobs';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../content-block';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';
-import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--002.jpg';
-import readme from './README.stories.mdx';
-
-const itemsHeading = 'Lorem ipsum dolor sit amet.';
-
-const copyWithList = `Lorem ipsum *dolor* sit amet, consectetur adipiscing elit. Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin, sodales
-  nulla quis, *consequat* libero. Here are
-  some common categories:
-  Lorem ipsum dolor sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-  Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-  Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-  Aenean et ultricies est.
-  Mauris iaculis eget dolor nec hendrerit.
-  Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-
-  - [list item](https://www.ibm.com)
-    - list item 1a
-  1. list item 2
-    1. list item 2a
-`;
-
-const itemsCopy = `Lorem ipsum dolor sit amet, *consectetur* adipiscing elit.
-  Vivamus sed interdum tortor. Sed id pellentesque diam.
-  In ut quam id mauris finibus efficitur quis ut arcu.
-  Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
-  Curabitur pretium elit non blandit lobortis.
-  Donec quis pretium odio, in dignissim sapien.`;
-
-const items = [
-  {
-    itemsHeading,
-    itemsCopy,
-  },
-  {
-    itemsHeading,
-    itemsCopy: copyWithList,
-  },
-  {
-    itemsHeading,
-    itemsCopy,
-  },
-];
-
-const image = html`
-  <dds-image
-    slot="media"
-    alt="Image alt text"
-    default-src="${imgLg16x9}"
-    heading="Lorem ipsum dolor sit amet.">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
-`;
-
-export const Default = (args) => {
-  const { heading, copy, showCopy, addChildren, showCTA, border, aside } =
-    args?.ContentBlock ?? {};
-  return html`
-    <dds-content-block
-      complementary-style-scheme="${border
-        ? CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER
-        : ''}">
-      ${heading
-        ? html`
-            <dds-content-block-heading
-              >What is the latest news in artificial
-              intelligence?</dds-content-block-heading
-            >
-          `
-        : ''}
-      ${showCopy
-        ? html` <dds-content-block-copy>${copy}</dds-content-block-copy> `
-        : ``}
-      ${addChildren.includes('Content group simple')
-        ? html`
-            <dds-content-group-simple>
-              <dds-content-group-heading
-                >Natural language processing (NLP)</dds-content-group-heading
-              >
-              <dds-content-group-copy
-                >Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-                Vestibulum non porttitor libero, in venenatis
-                magna.</dds-content-group-copy
-              >
-              ${image}
-              ${items.map(
-                ({ itemsHeading: itemHeading, itemsCopy: itemCopy }) => html`
-                  <dds-content-item>
-                    <dds-content-item-heading
-                      >${itemHeading}</dds-content-item-heading
-                    >
-                    <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-                  </dds-content-item>
-                `
-              )}
-            </dds-content-group-simple>
-          `
-        : ``}
-      ${showCTA
-        ? html`
-            <dds-card-link-cta
-              slot="footer"
-              cta-type="local"
-              href="https://www.example.com">
-              <dds-card-link-heading
-                >Learn more about natual language
-                processing</dds-card-link-heading
-              >
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-card-link-cta>
-          `
-        : ``}
-      ${aside
-        ? html`
-            <dds-link-list type="default" slot="complementary">
-              <dds-link-list-heading>Tutorials</dds-link-list-heading>
-              <dds-link-list-item-card href="https://example.com">
-                <p>Learn more about Kubernetes</p>
-                <dds-card-footer>
-                  ${ArrowRight20({ slot: 'icon' })}
-                </dds-card-footer>
-              </dds-link-list-item-card>
-              <dds-link-list-item-card href="https://example.com">
-                <p>Containerization A Complete Guide</p>
-                <dds-card-footer>
-                  ${ArrowRight20({ slot: 'icon' })}
-                </dds-card-footer>
-              </dds-link-list-item-card>
-            </dds-link-list>
-          `
-        : ``}
-    </dds-content-block>
-  `;
-};
-
-export default {
-  title: 'Components/Content block',
-  decorators: [
-    (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      ContentBlock: () => ({
-        heading: boolean('Heading:', true),
-        showCopy: boolean('Copy:', true),
-        copy:
-          'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at,' +
-          ' molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et' +
-          ' magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ' +
-          'ligula, vitae finibus ante aliquet a.',
-
-        aside: boolean('Aside:', false),
-        addChildren: optionsKnob(
-          'Add children:',
-          {
-            'Content group simple': 'Content group simple',
-          },
-          '',
-          { display: 'multi-select' }
-        ),
-        showCTA: boolean('CTA:', true),
-        border: boolean('Border:', false),
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentBlock: {
-          heading: true,
-          showCopy: true,
-          copy:
-            'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quam ante, mattis id pellentesque at,' +
-            ' molestie et ipsum. Proin sodales est hendrerit maximus malesuada. Orci varius natoque penatibus et' +
-            ' magnis dis parturient montes, nascetur ridiculus mus. Etiam at arcu ligula. Praesent faucibus est ' +
-            'ligula, vitae finibus ante aliquet a.',
-          aside: false,
-          addChildren: '',
-          showCTA: true,
-          border: false,
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/content-block/content-block-complementary.ts b/packages/web-components/src/components/content-block/content-block-complementary.ts
index c839e8df054..a0936a37849 100644
--- a/packages/web-components/src/components/content-block/content-block-complementary.ts
+++ b/packages/web-components/src/components/content-block/content-block-complementary.ts
@@ -7,20 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './content-block.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The complementary content in content block.
  *
- * @element dds-content-block-complementary
+ * @element c4d-content-block-complementary
  */
-@customElement(`${ddsPrefix}-content-block-complementary`)
-class DDSContentBlockComplementary extends LitElement {
+@customElement(`${c4dPrefix}-content-block-complementary`)
+class C4DContentBlockComplementary extends LitElement {
   /**
    * The shadow slot this logo UI should be in.
    */
@@ -42,4 +43,4 @@ class DDSContentBlockComplementary extends LitElement {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockComplementary;
+export default C4DContentBlockComplementary;
diff --git a/packages/web-components/src/components/content-block/content-block-copy.ts b/packages/web-components/src/components/content-block/content-block-copy.ts
index cec25767288..a9320b8c7bb 100644
--- a/packages/web-components/src/components/content-block/content-block-copy.ts
+++ b/packages/web-components/src/components/content-block/content-block-copy.ts
@@ -7,10 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSMarkdown from '../markdown/markdown';
+import C4DMarkdown from '../markdown/markdown';
 import { CONTENT_BLOCK_COPY_SIZE } from './defs';
 import './content-block-paragraph';
 import styles from './content-block.scss';
@@ -18,25 +19,31 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CONTENT_BLOCK_COPY_SIZE };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The copy content of content block.
  *
- * @element dds-content-block-copy
+ * @element c4d-content-block-copy
  */
-@customElement(`${ddsPrefix}-content-block-copy`)
-class DDSContentBlockCopy extends StableSelectorMixin(DDSMarkdown) {
+@customElement(`${c4dPrefix}-content-block-copy`)
+class C4DContentBlockCopy extends StableSelectorMixin(C4DMarkdown) {
   protected get _customTags() {
     const tags = new Set(super._customTags);
-    tags.add(`${ddsPrefix}-content-block-paragraph`);
+    tags.add(`${c4dPrefix}-content-block-paragraph`);
     return tags;
   }
 
   protected get _renderer() {
+    this.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        this.removeChild(node);
+      }
+    });
+
     return Object.assign(super._renderer, {
       paragraph(text) {
-        return `<${ddsPrefix}-content-block-paragraph>${text}</${ddsPrefix}-content-block-paragraph>`;
+        return `<${c4dPrefix}-content-block-paragraph>${text}</${c4dPrefix}-content-block-paragraph>`;
       },
     });
   }
@@ -55,7 +62,7 @@ class DDSContentBlockCopy extends StableSelectorMixin(DDSMarkdown) {
   slot = 'copy';
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block__copy`;
+    return `${c4dPrefix}--content-block__copy`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -67,4 +74,4 @@ class DDSContentBlockCopy extends StableSelectorMixin(DDSMarkdown) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockCopy;
+export default C4DContentBlockCopy;
diff --git a/packages/web-components/src/components/content-block/content-block-heading.ts b/packages/web-components/src/components/content-block/content-block-heading.ts
index 24651e59089..c73c743b74d 100644
--- a/packages/web-components/src/components/content-block/content-block-heading.ts
+++ b/packages/web-components/src/components/content-block/content-block-heading.ts
@@ -7,23 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement, state } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import { stripHTML } from '@carbon/ibmdotcom-utilities/es/utilities/stripHTML/index.js';
-import { render } from 'lit-html';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { render } from 'lit/html.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-block.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content in content block.
  *
- * @element dds-content-block-heading
+ * @element c4d-content-block-heading
  */
-@customElement(`${ddsPrefix}-content-block-heading`)
-class DDSContentBlockHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-block-heading`)
+class C4DContentBlockHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this logo UI should be in.
    */
@@ -53,11 +54,11 @@ class DDSContentBlockHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block__heading`;
+    return `${c4dPrefix}--content-block__heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlockHeading;
+export default C4DContentBlockHeading;
diff --git a/packages/web-components/src/components/content-block/content-block-paragraph.ts b/packages/web-components/src/components/content-block/content-block-paragraph.ts
index a42d49cb09c..1e44a1b6a76 100644
--- a/packages/web-components/src/components/content-block/content-block-paragraph.ts
+++ b/packages/web-components/src/components/content-block/content-block-paragraph.ts
@@ -7,30 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './content-block.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The paragraph content in content block.
  *
- * @element dds-content-block-paragraph
+ * @element c4d-content-block-paragraph
  */
-@customElement(`${ddsPrefix}-content-block-paragraph`)
-class DDSContentBlockParagraph extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-block-paragraph`)
+class C4DContentBlockParagraph extends StableSelectorMixin(LitElement) {
   render() {
     return html` <slot></slot> `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-block-paragraph`;
+    return `${c4dPrefix}--content-block-paragraph`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSContentBlockParagraph;
+export default C4DContentBlockParagraph;
diff --git a/packages/web-components/src/components/content-block/content-block.scss b/packages/web-components/src/components/content-block/content-block.scss
index 5a222ad864a..51a38599648 100644
--- a/packages/web-components/src/components/content-block/content-block.scss
+++ b/packages/web-components/src/components/content-block/content-block.scss
@@ -1,59 +1,62 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-item/content-item';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-@import '@carbon/ibmdotcom-styles/scss/components/card-group/card-group';
-
-:host(#{$dds-prefix}-content-block),
-:host(#{$dds-prefix}-callout-with-media-copy),
-:host(#{$dds-prefix}-content-block-copy),
-:host(#{$dds-prefix}-content-block-heading),
-:host(#{$dds-prefix}-content-block-complementary),
-:host(#{$dds-prefix}-content-block-paragraph) {
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-block';
+@use '@carbon/ibmdotcom-styles/scss/internal/content-item';
+@use '@carbon/ibmdotcom-styles/scss/components/layout';
+@use '@carbon/ibmdotcom-styles/scss/components/card-group';
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/content-width' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+:host(#{$c4d-prefix}-content-block),
+:host(#{$c4d-prefix}-callout-with-media-copy),
+:host(#{$c4d-prefix}-content-block-copy),
+:host(#{$c4d-prefix}-content-block-heading),
+:host(#{$c4d-prefix}-content-block-complementary),
+:host(#{$c4d-prefix}-content-block-paragraph) {
   display: block;
 }
 
 // TODO: Consider applying this rule in general
-:host(#{$dds-prefix}-content-block-simple),
-:host(#{$dds-prefix}-content-block-segmented) {
-  ::slotted(#{$dds-prefix}-callout-with-media-copy),
-  ::slotted(#{$dds-prefix}-content-block-copy) {
-    @include carbon--breakpoint('md') {
-      width: calc((100% - 2 * #{$carbon--spacing-05}) * 0.9);
+:host(#{$c4d-prefix}-content-block-simple),
+:host(#{$c4d-prefix}-content-block-segmented) {
+  ::slotted(#{$c4d-prefix}-callout-with-media-copy),
+  ::slotted(#{$c4d-prefix}-content-block-copy) {
+    @include breakpoint(md) {
+      width: calc((100% - 2 * #{$spacing-05}) * 0.9);
     }
   }
 }
 
-:host(#{$dds-prefix}-callout-with-media-copy[size='sm']),
-:host(#{$dds-prefix}-content-block-copy[size='sm']) {
+:host(#{$c4d-prefix}-callout-with-media-copy[size='sm']),
+:host(#{$c4d-prefix}-content-block-copy[size='sm']) {
   width: auto;
   max-width: none;
 
-  @include carbon--breakpoint(md) {
+  @include breakpoint(md) {
     @include content-width;
   }
 
-  ::slotted(#{$dds-prefix}-content-block-paragraph) {
-    @include carbon--type-style('body-long-02');
+  ::slotted(#{$c4d-prefix}-content-block-paragraph) {
+    @include type-style('body-02');
 
-    margin-bottom: $carbon--spacing-06;
+    margin-bottom: $spacing-06;
   }
 }
 
-.#{$dds-prefix}--content-block-footer {
-  @extend :host(#{$dds-prefix}-card-group);
+.#{$c4d-prefix}--content-block-footer {
+  @extend :host(#{$c4d-prefix}-card-group);
 }
 
-// TODO: Apply `dds--make-col(2, 3)` to React version, too, so we can merge the style to React version
-.#{$dds-prefix}-ce--content-block__col {
-  @include dds--make-col(2, 3);
+// TODO: Apply `cds--make-col(2, 3)` to React version, too, so we can merge the style to React version
+.#{$c4d-prefix}-ce--content-block__col {
+  @include make-col(2, 3);
 }
diff --git a/packages/web-components/src/components/content-block/content-block.ts b/packages/web-components/src/components/content-block/content-block.ts
index c3a7f2de0c1..53dc27f9efa 100644
--- a/packages/web-components/src/components/content-block/content-block.ts
+++ b/packages/web-components/src/components/content-block/content-block.ts
@@ -7,11 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Part } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, state, LitElement, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { html, LitElement, TemplateResult } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from './defs';
 import styles from './content-block.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -19,8 +18,7 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
@@ -44,8 +42,8 @@ const slotExistencePropertyNames = {
  * @slot complementary - The complementary (aside) content.
  * @abstract
  */
-@customElement(`${ddsPrefix}-content-block`)
-class DDSContentBlock extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-block`)
+class C4DContentBlock extends StableSelectorMixin(LitElement) {
   /**
    * `true` if there is complementary content.
    */
@@ -85,7 +83,7 @@ class DDSContentBlock extends StableSelectorMixin(LitElement) {
   /**
    * The CSS class list for the container (grid) node.
    */
-  protected _getContainerClasses(): string | ((part: Part) => void) {
+  protected _getContainerClasses() {
     const { complementaryStyleScheme, _hasComplementary: hasComplementary } =
       this;
     return classMap({
@@ -162,7 +160,7 @@ class DDSContentBlock extends StableSelectorMixin(LitElement) {
 
     // if card-group exists, ensure the card link footer item matches width of card-group-item
     const cardGroup = this.querySelector(
-      (this.constructor as typeof DDSContentBlock).selectorCardGroup
+      (this.constructor as typeof C4DContentBlock).selectorCardGroup
     );
     const cardGroupStyle = cardGroup?.getAttribute('style');
 
@@ -171,7 +169,7 @@ class DDSContentBlock extends StableSelectorMixin(LitElement) {
         ?hidden="${!hasFooter}"
         class="${cardGroup &&
         hasFooter &&
-        `${ddsPrefix}--content-block-footer`}"
+        `${c4dPrefix}--content-block-footer`}"
         style="${cardGroupStyle}">
         <slot name="footer" @slotchange="${handleSlotChange}"></slot>
       </div>
@@ -231,11 +229,11 @@ class DDSContentBlock extends StableSelectorMixin(LitElement) {
    * A selector that will return the card-group element
    */
   static get selectorCardGroup() {
-    return `${ddsPrefix}-card-group`;
+    return `${c4dPrefix}-card-group`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentBlock;
+export default C4DContentBlock;
diff --git a/packages/web-components/src/components/content-group-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-banner/__stories__/README.stories.mdx
deleted file mode 100644
index 9b2dec87345..00000000000
--- a/packages/web-components/src/components/content-group-banner/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,72 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import markdownContents from '../../../../docs/markdown-contents.md';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-
-
-
-
-
-# `Content group banner`
-
-> The Content Group – a banner like pattern that is a variant of `<dds-content-group>`, and
-> includes a heading and link list CTAs.
->
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-banner)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-banner)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-group-banner/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['content-group-banner'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<dds-content-group-banner>
-  <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-  <dds-link-list type="vertical" slot="complementary">
-    <dds-link-list-item-cta
-      icon-placement="right"
-      href="https://www.ibm.com"
-      cta-type="local"
-    >
-      Link text
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta
-      icon-placement="right"
-      href="https://www.ibm.com"
-      cta-type="external"
-    >
-      External link text
-    </dds-link-list-item-cta>
-  </dds-link-list>
-</dds-content-group-banner>
-```
-
-## Props
-
-<Props of="dds-content-group-banner" />
-<Description markdown={markdownContents} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector       | Compatibility selector                    | Description |
-| ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-content-group-banner>`  | `data-autoid="dds--content-group-banner"` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-banner/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-banner/__stories__/README.stories.react.mdx
deleted file mode 100644
index acf16b6810f..00000000000
--- a/packages/web-components/src/components/content-group-banner/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,54 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-group-banner/content-group-banner';
-
-# Content Group Banner
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-banner)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-banner)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS
-
-```javascript
-import DDSContentGroupBanner from '@carbon/ibmdotcom-web-components/es/components-react/content-group-banner/content-group-banner';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-
-function App() {
-  return (
-  <DDSContentGroupBanner>
-    <DDSContentGroupHeading>Curabitur malesuada varius mi eu posuere</DDSContentGroupHeading>
-    <DDSLinkList type="vertical" slot="complementary">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Link text
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        External link text
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentGroupBanner>
-  );
-}
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-content-group-banner>`        | N/A                    | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-banner/__stories__/content-group-banner.stories.react.tsx b/packages/web-components/src/components/content-group-banner/__stories__/content-group-banner.stories.react.tsx
deleted file mode 100644
index b8629572be9..00000000000
--- a/packages/web-components/src/components/content-group-banner/__stories__/content-group-banner.stories.react.tsx
+++ /dev/null
@@ -1,124 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { select } from '@storybook/addon-knobs';
-import React from 'react';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-/* eslint-disable max-len */
-import DDSContentGroupBanner from '@carbon/ibmdotcom-web-components/es/components-react/content-group-banner/content-group-banner';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import readme from './README.stories.react.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-import { CTA_TYPE } from '../../cta/defs';
-
-const hrefsForType = {
-  [CTA_TYPE.LOCAL]: 'https://www.example.com',
-  [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
-  [CTA_TYPE.DOWNLOAD]: 'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
-};
-
-const knobNamesForType = {
-  [CTA_TYPE.LOCAL]: 'Content link href (href)',
-  [CTA_TYPE.EXTERNAL]: 'Content link href (href)',
-  [CTA_TYPE.DOWNLOAD]: 'Download link href (href)',
-  [CTA_TYPE.VIDEO]: 'Video ID (href)',
-};
-
-const types = {
-  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
-  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
-  [`Download (${CTA_TYPE.DOWNLOAD})`]: CTA_TYPE.DOWNLOAD,
-  [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
-};
-
-export const Default = args => {
-  const { heading, iconPlacement, ctaType, href, download } = args?.ContentGroupBanner ?? {};
-  return !ctaType ? (
-    <DDSContentGroupBanner>
-      <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-      <DDSLinkList type="vertical" slot="complementary">
-        <DDSLinkListItem icon-placement={iconPlacement} href="https://www.example.com">
-          Learn more about Kubernetes <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem icon-placement={iconPlacement} href="https://www.example.com">
-          Containerization A Complete Guide <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-    </DDSContentGroupBanner>
-  ) : (
-    <DDSContentGroupBanner>
-      <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-      <DDSLinkList type="vertical" slot="complementary">
-        <DDSLinkListItemCTA
-          icon-placement={iconPlacement}
-          href={href || undefined}
-          cta-type={ctaType || undefined}
-          download={download || undefined}>
-          Learn more about Kubernetes
-        </DDSLinkListItemCTA>
-        <DDSLinkListItemCTA
-          icon-placement={iconPlacement}
-          href={href || undefined}
-          cta-type={ctaType || undefined}
-          download={download || undefined}>
-          Containerization A Complete Guide
-        </DDSLinkListItemCTA>
-      </DDSLinkList>
-    </DDSContentGroupBanner>
-  );
-};
-
-Default.story = {
-  parameters: {
-    knobs: {
-      ContentGroupBanner: () => {
-        const heading = textNullable('Heading (heading)', 'Accelerate application development efforts with IBM Product Name');
-        const ctaType = select('CTA type (cta-type)', types, null);
-        const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : textNullable('Download target (download)', 'IBM_Annual_Report_2019.pdf');
-        return {
-          heading,
-          ctaType,
-          download,
-          href: textNullable(knobNamesForType[ctaType ?? CTA_TYPE.LOCAL], hrefsForType[ctaType ?? CTA_TYPE.LOCAL]),
-        };
-      },
-    },
-  },
-};
-
-export default {
-  title: 'Components/Content group banner',
-  decorators: [
-    story => {
-      return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-md-6 bx--col-lg-12 bx--no-gutter">
-              <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
-            </div>
-          </div>
-        </div>
-      );
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/content-group-banner/__stories__/content-group-banner.stories.ts b/packages/web-components/src/components/content-group-banner/__stories__/content-group-banner.stories.ts
deleted file mode 100644
index 2227b05980c..00000000000
--- a/packages/web-components/src/components/content-group-banner/__stories__/content-group-banner.stories.ts
+++ /dev/null
@@ -1,148 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import { select } from '@storybook/addon-knobs';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-import '../index';
-// eslint-disable-next-line sort-imports
-import readme from './README.stories.mdx';
-import { CTA_TYPE } from '../../cta/defs';
-import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
-
-const hrefsForType = {
-  [CTA_TYPE.LOCAL]: 'https://www.example.com',
-  [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
-  [CTA_TYPE.DOWNLOAD]:
-    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
-};
-
-const knobNamesForType = {
-  [CTA_TYPE.LOCAL]: 'Content link href (href)',
-  [CTA_TYPE.EXTERNAL]: 'Content link href (href)',
-  [CTA_TYPE.DOWNLOAD]: 'Download link href (href)',
-  [CTA_TYPE.VIDEO]: 'Video ID (href)',
-};
-
-const types = {
-  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
-  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
-  [`Download (${CTA_TYPE.DOWNLOAD})`]: CTA_TYPE.DOWNLOAD,
-  [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
-};
-
-export const Default = (args) => {
-  const {
-    heading,
-    ctaType,
-    download,
-    href,
-    iconPlacement = ICON_PLACEMENT.RIGHT,
-  } = args?.ContentGroupBanner ?? {};
-  return !ctaType
-    ? html`
-        <dds-content-group-banner>
-          <dds-content-group-heading>${heading}</dds-content-group-heading>
-
-          <dds-link-list type="vertical" slot="complementary">
-            <dds-link-list-item
-              icon-placement="${iconPlacement}"
-              href="https://example.com">
-              Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-            </dds-link-list-item>
-            <dds-link-list-item
-              icon-placement="${iconPlacement}"
-              href="https://example.com">
-              Containerization A Complete Guide
-              ${ArrowRight20({ slot: 'icon' })}
-            </dds-link-list-item>
-          </dds-link-list>
-        </dds-content-group-banner>
-      `
-    : html`
-        <dds-content-group-banner>
-          <dds-content-group-heading>${heading}</dds-content-group-heading>
-
-          <dds-link-list type="vertical" slot="complementary">
-            <dds-link-list-item-cta
-              icon-placement="${iconPlacement}"
-              href="${ifNonNull(href)}"
-              cta-type="${ifNonNull(ctaType)}"
-              download="${ifNonNull(download)}">
-              Learn more about Kubernetes
-            </dds-link-list-item-cta>
-            <dds-link-list-item-cta
-              icon-placement="${iconPlacement}"
-              href="${ifNonNull(href)}"
-              cta-type="${ifNonNull(ctaType)}"
-              download="${ifNonNull(download)}">
-              Containerization A Complete Guide
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-group-banner>
-      `;
-};
-
-export default {
-  title: 'Components/Content group banner',
-  decorators: [
-    (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-md-6 bx--col-lg-12 bx--no-gutter">
-            <dds-video-cta-container> ${story()} </dds-video-cta-container>
-          </div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      ContentGroupBanner: () => {
-        const heading = textNullable(
-          'Heading (heading)',
-          'Accelerate application development efforts with IBM Product Name'
-        );
-        const ctaType = select('CTA type (cta-type)', types, null);
-        const download =
-          ctaType !== CTA_TYPE.DOWNLOAD
-            ? undefined
-            : textNullable(
-                'Download target (download)',
-                'IBM_Annual_Report_2019.pdf'
-              );
-        return {
-          heading,
-          ctaType,
-          download,
-          href: textNullable(
-            knobNamesForType[ctaType ?? CTA_TYPE.LOCAL],
-            hrefsForType[ctaType ?? CTA_TYPE.LOCAL]
-          ),
-        };
-      },
-    },
-    propsSet: {
-      default: {
-        ContentGroupBanner: {
-          heading:
-            'Accelerate application development efforts with IBM Product Name',
-          ctaType: null,
-          download: undefined,
-          href: 'https://www.example.com',
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/content-group-banner/__tests__/content-group-banner.test.ts b/packages/web-components/src/components/content-group-banner/__tests__/content-group-banner.test.ts
deleted file mode 100644
index 40c7aaae07b..00000000000
--- a/packages/web-components/src/components/content-group-banner/__tests__/content-group-banner.test.ts
+++ /dev/null
@@ -1,67 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { html, render } from 'lit-html';
-import '../../content-group/content-group-heading';
-import '../../cta/link-list-item-cta';
-import '../../link-list/link-list';
-import '../content-group-banner';
-import { CTA_TYPE } from '../../cta/defs';
-
-const template = (props?) => {
-  const { children } = props ?? {};
-  return html`
-    <dds-content-group-banner> ${children} </dds-content-group-banner>
-  `;
-};
-
-describe('dds-content-group-banner', function () {
-  describe('Misc attributes', function () {
-    it('should render with minimum attributes', async function () {
-      render(template(), document.body);
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-group-banner')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        template({
-          children: html`
-            <dds-content-group-heading>heading-foo</dds-content-group-heading>
-            <dds-link-list slot="footer" type="vertical">
-              <dds-link-list-item-cta
-                icon-placement="right"
-                href="https://www.ibm.com"
-                cta-type="${CTA_TYPE.LOCAL}">
-                cta-copy-foo
-              </dds-link-list-item-cta>
-              <dds-link-list-item-cta
-                icon-placement="right"
-                href="https://www.ibm.com"
-                cta-type="${CTA_TYPE.EXTERNAL}">
-                cta-copy-foo
-              </dds-link-list-item-cta>
-            </dds-link-list>
-          `,
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-group-banner')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  afterEach(async function () {
-    await render(undefined!, document.body);
-  });
-});
diff --git a/packages/web-components/src/components/content-group-banner/content-group-banner.scss b/packages/web-components/src/components/content-group-banner/content-group-banner.scss
deleted file mode 100644
index bd86fbfa2d1..00000000000
--- a/packages/web-components/src/components/content-group-banner/content-group-banner.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-//
-// 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 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-banner/content-group-banner';
-
-:host(#{$dds-prefix}-content-group-banner) {
-  display: block;
-}
diff --git a/packages/web-components/src/components/content-group-banner/content-group-banner.ts b/packages/web-components/src/components/content-group-banner/content-group-banner.ts
deleted file mode 100644
index 65747e7c08d..00000000000
--- a/packages/web-components/src/components/content-group-banner/content-group-banner.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentGroup from '../content-group/content-group';
-import styles from './content-group-banner.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Content Group - Banner.
- *
- * @element dds-content-group-banner
- */
-@customElement(`${ddsPrefix}-content-group-banner`)
-class DDSContentGroupBanner extends StableSelectorMixin(DDSContentGroup) {
-  static get stableSelector() {
-    return `${ddsPrefix}--content-group-banner`;
-  }
-
-  // `styles` here is a `CSSResult` generated by custom WebPack loader
-  static get styles() {
-    return css`
-      ${super.styles}${styles}
-    `;
-  }
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupBanner;
diff --git a/packages/web-components/src/components/content-group-banner/index.ts b/packages/web-components/src/components/content-group-banner/index.ts
deleted file mode 100644
index e78fb170e6c..00000000000
--- a/packages/web-components/src/components/content-group-banner/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @license
- *
- * 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 './content-group-banner';
-import '../content-group/content-group-heading';
-import '../cta/link-list-item-cta';
-import '../cta/video-cta-container';
-import '../link-list/index';
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
index 99916cc3a8f..f98978d579c 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.mdx
@@ -2,12 +2,9 @@ import { Props, Description } from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-content-group-cards>`
 
-
-
-# `<dds-content-group-cards>`
-
-> The Content Group – Cards pattern is a variant of `<dds-content-group>`, and
+> The Content Group – Cards pattern is a variant of `<cds-content-group>`, and
 > includes a heading, copy, and card items.
 >
 > 💡 Check our
@@ -33,43 +30,55 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-cards/index
 ### HTML
 
 ```html
-  <dds-content-group-cards>
-    <dds-content-group-heading>${heading}</dds-content-group-heading>
-    <dds-content-group-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</dds-content-group-copy>
-    <dds-content-group-cards-item href="www.ibm.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-      <dds-card-footer icon-placement="left">
-        <svg slot="icon" ...>
-          ...
-        </svg>
-      </dds-card-footer>
-    </dds-content-group-cards-item>
-    <dds-content-group-cards-item href="www.ibm.com">
-      <dds-card-heading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</dds-card-heading>
-      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
-      <dds-card-footer icon-placement="left">
-        <svg slot="icon" ...>
-          ...
-        </svg>
-      </dds-card-footer>
-    </dds-content-group-cards-item>
-  </dds-content-group-cards>
+<cds-content-group-cards>
+  <cds-content-group-heading>${heading}</cds-content-group-heading>
+  <cds-content-group-copy
+    >Lorem ipsum dolor sit amet, consectetur adipiscing
+    elit.</cds-content-group-copy
+  >
+  <cds-content-group-cards-item href="www.ibm.com">
+    <cds-card-heading
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt</cds-card-heading
+    >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <cds-card-footer icon-placement="left">
+      <svg slot="icon" ...>...</svg>
+    </cds-card-footer>
+  </cds-content-group-cards-item>
+  <cds-content-group-cards-item href="www.ibm.com">
+    <cds-card-heading
+      >Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt</cds-card-heading
+    >
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </p>
+    <cds-card-footer icon-placement="left">
+      <svg slot="icon" ...>...</svg>
+    </cds-card-footer>
+  </cds-content-group-cards-item>
+</cds-content-group-cards>
 ```
 
 ## Props
 
-<Props of="dds-content-group-cards" />
+<Props of="cds-content-group-cards" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector          | Compatibility selector                          | Description |
-| -------------------------------- | ----------------------------------------------- | ----------- |
-| `<dds-content-group-cards>`      | `data-autoid="dds--content-group-cards"`        | Component   |
-| `<dds-content-group-heading>`    | `data-autoid="dds--content-group__title"`       | Component   |
-| `<dds-content-group-cards-item>` | `data-autoid="dds--content-group-cards-item"`   | Component   |
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
+| Web Components selector          | Compatibility selector                        | Description |
+| -------------------------------- | --------------------------------------------- | ----------- |
+| `<cds-content-group-cards>`      | `data-autoid="cds--content-group-cards"`      | Component   |
+| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__title"`     | Component   |
+| `<cds-content-group-cards-item>` | `data-autoid="cds--content-group-cards-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx
index b20403b8f49..3ed92fd3444 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group-cards/__stories__/README.stories.react.mdx
@@ -4,7 +4,7 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 
 # Content Group Cards
 
-> The Content Group – Cards pattern is a variant of `DDSContentGroup`, and
+> The Content Group – Cards pattern is a variant of `C4DContentGroup`, and
 > includes a heading, copy, and card items.
 >
 > 💡 Check our
@@ -20,52 +20,52 @@ Here's a quick example to get you started.
 ### JS
 
 ```js
-import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20';
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
 
 const card1 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </DDSCardHeading>
+    </C4DCardHeading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <DDSCardFooter icon-placement="left">
+    <C4DCardFooter icon-placement="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 const card2 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </DDSCardHeading>
+    </C4DCardHeading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-    <DDSCardFooter icon-placement="left">
+    <C4DCardFooter icon-placement="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 const App = () => (
-  <DDSContentGroupCards>
-    <DDSContentGroupHeading>Lorem ipsum dolor sit amet.</DDSContentGroupHeading>
-    <DDSContentGroupCopy>
+  <C4DContentGroupCards>
+    <C4DContentGroupHeading>Lorem ipsum dolor sit amet.</C4DContentGroupHeading>
+    <C4DContentGroupCopy>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-    </DDSContentGroupCopy>
+    </C4DContentGroupCopy>
     {card1}
     {card2}
     {card1}
     {card2}
-  </DDSContentGroupCards>
+  </C4DContentGroupCards>
 );
 ```
 
@@ -81,8 +81,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-content-group-cards>`      | `data-autoid="dds--content-group-cards"`      | Component   |
-| `<dds-content-group-heading>`    | `data-autoid="dds--content-group__title"`     | Component   |
-| `<dds-content-group-cards-item>` | `data-autoid="dds--content-group-cards-item"` | Component   |
+| `<cds-content-group-cards>`      | `data-autoid="cds--content-group-cards"`      | Component   |
+| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__title"`     | Component   |
+| `<cds-content-group-cards-item>` | `data-autoid="cds--content-group-cards-item"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx
index a132ee55649..a667fedaf69 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx
+++ b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.react.tsx
@@ -10,57 +10,64 @@
 import React from 'react';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // eslint-disable-next-line max-len
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DContentGroupCards from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
 import { text } from '@storybook/addon-knobs';
 import readme from './README.stories.react.mdx';
 
 const card1 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt
+    </C4DCardHeading>
     <p>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <DDSCardFooter icon-placement="left">
+    <C4DCardFooter icon-placement="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 const card2 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt</DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>
+      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
+      tempor incididunt
+    </C4DCardHeading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-    <DDSCardFooter icon-placement="left">
+    <C4DCardFooter icon-placement="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading, copy } = args?.ContentGroupCards ?? {};
   return (
-    <DDSContentGroupCards>
-      <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-      <DDSContentGroupCopy>{copy}</DDSContentGroupCopy>
+    <C4DContentGroupCards>
+      <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+      <C4DContentGroupCopy>{copy}</C4DContentGroupCopy>
       {card1}
       {card2}
       {card1}
       {card2}
-    </DDSContentGroupCards>
+    </C4DContentGroupCards>
   );
 };
 
 export default {
   title: 'Components/Content group cards',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-8 bx--no-gutter">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-8 cds--no-gutter">{story()}</div>
         </div>
       </div>
     ),
@@ -71,7 +78,10 @@ export default {
     knobs: {
       ContentGroupCards: () => ({
         heading: text('Heading (heading):', 'Lorem ipsum dolor sit amet.'),
-        copy: text('Copy (copy):', 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'),
+        copy: text(
+          'Copy (copy):',
+          'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts
index d7cfd30624d..99aa776babf 100644
--- a/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts
+++ b/packages/web-components/src/components/content-group-cards/__stories__/content-group-cards.stories.ts
@@ -7,49 +7,49 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../index';
 
 const card1 = html`
-  <dds-content-group-cards-item href="https://www.example.com">
-    <dds-card-heading>
+  <c4d-content-group-cards-item href="https://www.example.com">
+    <c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </dds-card-heading>
+    </c4d-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <dds-card-footer icon-placement="left">
+    <c4d-card-footer icon-placement="left">
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-footer>
-  </dds-content-group-cards-item>
+    </c4d-card-footer>
+  </c4d-content-group-cards-item>
 `;
 
 const card2 = html`
-  <dds-content-group-cards-item href="https://www.example.com">
-    <dds-card-heading>
+  <c4d-content-group-cards-item href="https://www.example.com">
+    <c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </dds-card-heading>
+    </c4d-card-heading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-    <dds-card-footer icon-placement="left">
+    <c4d-card-footer icon-placement="left">
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-footer>
-  </dds-content-group-cards-item>
+    </c4d-card-footer>
+  </c4d-content-group-cards-item>
 `;
 
 export const Default = (args) => {
   const { heading, copy } = args?.ContentGroupCards ?? {};
   return html`
-    <dds-content-group-cards>
-      <dds-content-group-heading>${heading}</dds-content-group-heading>
-      <dds-content-group-copy>${copy}</dds-content-group-copy>
+    <c4d-content-group-cards>
+      <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+      <c4d-content-group-copy>${copy}</c4d-content-group-copy>
       ${card1}${card2}${card1}${card2}
-    </dds-content-group-cards>
+    </c4d-content-group-cards>
   `;
 };
 
@@ -57,9 +57,9 @@ export default {
   title: 'Components/Content group cards',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-8 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-8 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts b/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts
index dca98a6d424..86ba62a8fc5 100644
--- a/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts
+++ b/packages/web-components/src/components/content-group-cards/__tests__/content-group-cards.test.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import '../../card/card-heading';
 import '../content-group-cards';
@@ -16,17 +16,17 @@ import '../content-group-cards-item';
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-content-group-cards> ${children} </dds-content-group-cards>
+    <c4d-content-group-cards> ${children} </c4d-content-group-cards>
   `;
 };
 
-describe('dds-content-group-cards', function () {
+describe('c4d-content-group-cards', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-group-cards')
+        document.body.querySelector('c4d-content-group-cards')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -34,28 +34,28 @@ describe('dds-content-group-cards', function () {
       render(
         template({
           children: html`
-            <dds-content-group-heading>heading-foo</dds-content-group-heading>
+            <c4d-content-group-heading>heading-foo</c4d-content-group-heading>
             <p>copy-foo</p>
-            <dds-content-group-cards-item href="https://www.example.com">
-              <dds-card-heading>
+            <c4d-content-group-cards-item href="https://www.example.com">
+              <c4d-card-heading>
                 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
                 eiusmod tempor incididunt
-              </dds-card-heading>
+              </c4d-card-heading>
               <p>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
                 eiusmod tempor incididunt ut labore et dolore magna aliqua.
               </p>
-              <dds-card-footer icon-placement="left">
+              <c4d-card-footer icon-placement="left">
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-footer>
-            </dds-content-group-cards-item>
+              </c4d-card-footer>
+            </c4d-content-group-cards-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-group-cards')
+        document.body.querySelector('c4d-content-group-cards')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts b/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts
index b11cff9f73d..82ac25141e4 100644
--- a/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts
+++ b/packages/web-components/src/components/content-group-cards/content-group-cards-item.ts
@@ -7,27 +7,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSCard from '../card/card';
+import C4DCard from '../card/card';
 import styles from './content-group-cards.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content Group Card item.
  *
- * @element dds-content-group-card-item
+ * @element c4d-content-group-card-item
  */
-@customElement(`${ddsPrefix}-content-group-cards-item`)
-class DDSContentGroupCardsItem extends StableSelectorMixin(DDSCard) {
+@customElement(`${c4dPrefix}-content-group-cards-item`)
+class C4DContentGroupCardsItem extends StableSelectorMixin(C4DCard) {
   static get stableSelector() {
-    return `${ddsPrefix}--content-group-cards-item`;
+    return `${c4dPrefix}--content-group-cards-item`;
   }
 
   static styles = styles;
 }
 
+console.warn(
+  'The content-group-cards-item component has been deprecated in favor of the content-section/block and the card group component. ' +
+    'See content-section/block and card-group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupCardsItem;
+export default C4DContentGroupCardsItem;
diff --git a/packages/web-components/src/components/content-group-cards/content-group-cards.scss b/packages/web-components/src/components/content-group-cards/content-group-cards.scss
index 071a0b27068..fe7ef0023e8 100644
--- a/packages/web-components/src/components/content-group-cards/content-group-cards.scss
+++ b/packages/web-components/src/components/content-group-cards/content-group-cards.scss
@@ -5,5 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-cards/content-group-cards';
+@use '@carbon/ibmdotcom-styles/scss/components/card';
+@use '@carbon/ibmdotcom-styles/scss/components/content-group-cards';
diff --git a/packages/web-components/src/components/content-group-cards/content-group-cards.ts b/packages/web-components/src/components/content-group-cards/content-group-cards.ts
index d2911ff1d32..6c38cc1c7fb 100644
--- a/packages/web-components/src/components/content-group-cards/content-group-cards.ts
+++ b/packages/web-components/src/components/content-group-cards/content-group-cards.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentGroup from '../content-group/content-group';
+import { css, html, TemplateResult } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentGroup from '../content-group/content-group';
 import styles from './content-group-cards.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content group cards.
  *
- * @element dds-content-group-cards
+ * @element c4d-content-group-cards
  */
-@customElement(`${ddsPrefix}-content-group-cards`)
-class DDSContentGroupCards extends DDSContentGroup {
+@customElement(`${c4dPrefix}-content-group-cards`)
+class C4DContentGroupCards extends C4DContentGroup {
   protected _renderInnerBody(): TemplateResult | string | void {
     const { _hasContent: hasContent, _hasMedia: hasMedia } = this;
     return html`
@@ -41,7 +39,7 @@ class DDSContentGroupCards extends DDSContentGroup {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-group-cards`;
+    return `${c4dPrefix}--content-group-cards`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -52,5 +50,10 @@ class DDSContentGroupCards extends DDSContentGroup {
   }
 }
 
+console.warn(
+  'The content-group-cards component has been deprecated in favor of the content-section/block and the card group component. ' +
+    'See content-section/block and card-group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupCards;
+export default C4DContentGroupCards;
diff --git a/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts b/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts
deleted file mode 100644
index 2894937f497..00000000000
--- a/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import DDSContentBlockHorizontal from '../content-block-horizontal/content-block-horizontal';
-
-import '../horizontal-rule/horizontal-rule';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Horizontal version of content group.
- *
- * @element dds-content-block-horizontal
- */
-@customElement(`${ddsPrefix}-content-group-horizontal`)
-class DDSContentGroupHorizontal extends DDSContentBlockHorizontal {
-  static get stableSelector() {
-    return `${ddsPrefix}--content-group-horizontal`;
-  }
-}
-export default deprecate(
-  DDSContentGroupHorizontal,
-  'The content-group-horizontal component has been deprecated in favor of the content-block-horizontal component. ' +
-    'See content-block-horizontal documentation for more information.'
-);
diff --git a/packages/web-components/src/components/content-group-horizontal/index.ts b/packages/web-components/src/components/content-group-horizontal/index.ts
deleted file mode 100644
index 234ce40318c..00000000000
--- a/packages/web-components/src/components/content-group-horizontal/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/**
- * @license
- *
- * 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 './content-group-horizontal';
-import '../content-block/content-block-heading';
-import '../content-block/content-block-complementary';
-import '../content-item-horizontal/index';
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx
index 6bc842d6693..2e6933fa872 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.mdx
@@ -3,12 +3,9 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-content-group-pictograms>`
 
-
-
-# `<dds-content-group-pictograms>`
-
-> The Content Group – Pictograms pattern is a variant of `<dds-content-group>`,
+> The Content Group – Pictograms pattern is a variant of `<cds-content-group>`,
 > and includes a heading, copy and
 > [Pictogram Items](http://www.ibm.com/standards/carbon/web-components/?path=/story/components-pictogram-item--default)
 > 💡 Check our
@@ -25,30 +22,32 @@ Here's a quick example to get you started.
 import '@carbon/ibmdotcom-web-components/es/components/content-group-pictograms/index.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['content-group-pictograms'] })}`} />
+<Description
+  markdown={`${cdnJs({ components: ['content-group-pictograms'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<dds-content-group-pictograms>
-  <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-  <dds-content-group-copy>Lorem ipsum *dolor* sit amet</dds-content-group-copy>
-  <dds-pictogram-item>
-    <svg slot="pictogram" ...>
-      ...
-    </svg>
-    <dds-content-item-heading>Lorem ipsum dolor sit amet</dds-content-item-heading>
-    <dds-content-item-copy>Lorem ipsum dolor sit amet</dds-content-item-copy>
-    <dds-link-with-icon href="https://www.ibm.com/" slot="footer">
+<cds-content-group-pictograms>
+  <cds-content-group-heading
+    >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+  >
+  <cds-content-group-copy>Lorem ipsum *dolor* sit amet</cds-content-group-copy>
+  <cds-pictogram-item>
+    <svg slot="pictogram" ...>...</svg>
+    <cds-content-item-heading
+      >Lorem ipsum dolor sit amet</cds-content-item-heading
+    >
+    <cds-content-item-copy>Lorem ipsum dolor sit amet</cds-content-item-copy>
+    <cds-link-with-icon href="https://www.ibm.com/" slot="footer">
       Link text
-      <svg slot="icon" ...>
-        ...
-      </svg>
-    </dds-link-with-icon>
-  </dds-pictogram-item>
-</dds-content-group-pictograms>
+      <svg slot="icon" ...>...</svg>
+    </cds-link-with-icon>
+  </cds-pictogram-item>
+</cds-content-group-pictograms>
 ```
 
 ## Stable selectors
@@ -59,9 +58,9 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                    | Description |
 | -------------------------------- | ----------------------------------------- | ----------- |
-| `<dds-content-group-pictograms>` | `data-autoid="dds--content-group-simple"` | Component   |
-| `<dds-content-group-copy>`       | `data-autoid="dds--content-group__copy"`  | Component   |
-| `<dds-content-group-heading>`    | `data-autoid="dds--content-group__title"` | Component   |
-| `<dds-content-item-copy>`        | `data-autoid="dds--content-item__copy"`   | Component   |
+| `<cds-content-group-pictograms>` | `data-autoid="cds--content-group-simple"` | Component   |
+| `<cds-content-group-copy>`       | `data-autoid="cds--content-group__copy"`  | Component   |
+| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__title"` | Component   |
+| `<cds-content-item-copy>`        | `data-autoid="cds--content-item__copy"`   | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx
index 0f39f04a429..b8ce6ec476f 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group-pictograms/__stories__/README.stories.react.mdx
@@ -4,7 +4,7 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 
 # Content Group Pictograms
 
-> The Content Group – Pictograms pattern is a variant of `DDSContentGroup`, and
+> The Content Group – Pictograms pattern is a variant of `C4DContentGroup`, and
 > includes a heading, copy, and pictogram items.
 >
 > 💡 Check our
@@ -20,15 +20,15 @@ Here's a quick example to get you started.
 ### JS
 
 ```js
-import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20';
+import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
 // eslint-disable-next-line max-len
-import DDSContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
+import C4DContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
 import './index.css';
 
 const pictogramsItems = [
@@ -59,23 +59,23 @@ const pictogramsItems = [
 ];
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">
-        <DDSContentGroupPictograms>
-          <DDSContentGroupHeading>{groupHeading}</DDSContentGroupHeading>
-          <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-sm-4 cds--col-lg-8 cds--no-gutter">
+        <C4DContentGroupPictograms>
+          <C4DContentGroupHeading>{groupHeading}</C4DContentGroupHeading>
+          <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
           {pictogramsItems.map(({ heading, copy, linkWithIcon }) => (
-            <DDSPictogramItem>
+            <C4DPictogramItem>
               <Pictogram slot="pictogram" />
-              <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-              <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-              <DDSLinkWithIcon href={linkWithIcon.href} slot="footer">
+              <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+              <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+              <C4DLinkWithIcon href={linkWithIcon.href} slot="footer">
                 {linkWithIcon.copy} <ArrowRight20 slot="icon" />
-              </DDSLinkWithIcon>
-            </DDSPictogramItem>
+              </C4DLinkWithIcon>
+            </C4DPictogramItem>
           ))}
-        </DDSContentGroupPictograms>
+        </C4DContentGroupPictograms>
       </div>
     </div>
   </div>
@@ -94,12 +94,12 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector          | Compatibility selector                        | Description |
 | -------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-content-group-pictograms>` | `data-autoid="dds--content-group-pictograms"` | Component   |
-| `<dds-content-group-heading>`    | `data-autoid="dds--content-group__heading"`   | Component   |
-| `<dds-content-group-copy>`       | `data-autoid="dds--content-group__copy"`      | Component   |
-| `<dds-pictogram-item>`           | `data-autoid="dds--pictogram-item"`           | Component   |
-| `<dds-content-item-heading>`     | `data-autoid="dds--content-item__heading"`    | Component   |
-| `<dds-content-item-copy>`        | `data-autoid="dds--content-item__copy"`       | Component   |
-| `<dds-link-with-icon>`           | `data-autoid="dds--link-with-icon"`           | Component   |
+| `<cds-content-group-pictograms>` | `data-autoid="cds--content-group-pictograms"` | Component   |
+| `<cds-content-group-heading>`    | `data-autoid="cds--content-group__heading"`   | Component   |
+| `<cds-content-group-copy>`       | `data-autoid="cds--content-group__copy"`      | Component   |
+| `<cds-pictogram-item>`           | `data-autoid="cds--pictogram-item"`           | Component   |
+| `<cds-content-item-heading>`     | `data-autoid="cds--content-item__heading"`    | Component   |
+| `<cds-content-item-copy>`        | `data-autoid="cds--content-item__copy"`       | Component   |
+| `<cds-link-with-icon>`           | `data-autoid="cds--link-with-icon"`           | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx
index 2dfda3cc3e9..38804edd5e9 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx
+++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.react.tsx
@@ -9,13 +9,13 @@
 
 import React from 'react';
 // eslint-disable-next-line max-len
-import DDSContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
+import C4DContentGroupPictograms from '@carbon/ibmdotcom-web-components/es/components-react/content-group-pictograms/content-group-pictograms';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import { TouchScreen, Pattern, Touch } from '@carbon/pictograms-react';
 import { boolean, number, select, text } from '@storybook/addon-knobs';
@@ -33,7 +33,7 @@ const pictograms = {
  * @param {string} sel string that defines the returning pictogram
  * @returns {*} JSX pictogram component
  */
-const selectPictogram = sel => {
+const selectPictogram = (sel) => {
   switch (sel) {
     case 'TouchScreen':
       return TouchScreen;
@@ -52,7 +52,7 @@ const selectPictogram = sel => {
  * @param {boolean} item defines if cta will be rendered
  * @returns {*} if true returns cta data, if false, returns null
  */
-const toggleCTA = item => {
+const toggleCTA = (item) => {
   if (item) {
     return {
       type: 'local',
@@ -83,16 +83,29 @@ export default {
   },
 };
 
-export const Default = args => {
-  const { heading: groupHeading, copy: groupCopy, pictogramCount: length } = args?.ContentGroupPictograms ?? {};
+export const Default = (args) => {
+  const {
+    heading: groupHeading,
+    copy: groupCopy,
+    pictogramCount: length,
+  } = args?.ContentGroupPictograms ?? {};
   const pictogramItems = Array.from({ length }).map((_, i) => ({
-    heading: text(`Item ${i + 1} Heading (items.heading)`, 'Aliquam condimentum interdum'),
+    heading: text(
+      `Item ${i + 1} Heading (items.heading)`,
+      'Aliquam condimentum interdum'
+    ),
     copy: text(
       `Item ${i + 1} Copy (items.copy)`,
       'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.'
     ),
     cta: toggleCTA(boolean(`Item ${i + 1} CTA (items.cta)`, true)),
-    Pictogram: selectPictogram(select(`Item ${i + 1} Pictogram (pictogram)`, pictograms, pictograms.TouchScreen)),
+    Pictogram: selectPictogram(
+      select(
+        `Item ${i + 1} Pictogram (pictogram)`,
+        pictograms,
+        pictograms.TouchScreen
+      )
+    ),
     linkWithIcon: {
       href: 'https://www.example.com',
       copy: 'Lorem ipsum dolor sit amet',
@@ -100,25 +113,27 @@ export const Default = args => {
   }));
 
   return (
-    <div className="bx--grid">
-      <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">
-          <DDSContentGroupPictograms>
-            <DDSContentGroupHeading>{groupHeading}</DDSContentGroupHeading>
-            <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
-            {pictogramItems.map(({ heading, copy, Pictogram, cta, linkWithIcon }) => (
-              <DDSPictogramItem>
-                <Pictogram slot="pictogram" />
-                <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-                <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-                {cta && (
-                  <DDSLinkWithIcon href={linkWithIcon.href} slot="footer">
-                    {linkWithIcon.copy} <ArrowRight20 slot="icon" />
-                  </DDSLinkWithIcon>
-                )}
-              </DDSPictogramItem>
-            ))}
-          </DDSContentGroupPictograms>
+    <div className="cds--grid">
+      <div className="cds--row">
+        <div className="cds--col-sm-4 cds--col-lg-8 cds--no-gutter">
+          <C4DContentGroupPictograms>
+            <C4DContentGroupHeading>{groupHeading}</C4DContentGroupHeading>
+            <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
+            {pictogramItems.map(
+              ({ heading, copy, Pictogram, cta, linkWithIcon }) => (
+                <C4DPictogramItem>
+                  <Pictogram slot="pictogram" />
+                  <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+                  <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+                  {cta && (
+                    <C4DLinkWithIcon href={linkWithIcon.href} slot="footer">
+                      {linkWithIcon.copy} <ArrowRight20 slot="icon" />
+                    </C4DLinkWithIcon>
+                  )}
+                </C4DPictogramItem>
+              )
+            )}
+          </C4DContentGroupPictograms>
         </div>
       </div>
     </div>
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.scss b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.scss
index 2ed321dddcc..b8425744b75 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.scss
+++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.scss
@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/theme-tokens';
+@use '@carbon/styles/scss/theme' as *;
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-pictogram-item svg g {
-  stroke: $text-01;
+cds-pictogram-item svg g {
+  stroke: $text-primary;
 }
diff --git a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts
index 3773b85b3c1..5a48daa0e99 100644
--- a/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts
+++ b/packages/web-components/src/components/content-group-pictograms/__stories__/content-group-pictograms.stories.ts
@@ -9,8 +9,7 @@
  */
 
 import '../index';
-import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import styles from './content-group-pictograms.stories.scss';
@@ -49,9 +48,9 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-8 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-8 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
@@ -87,45 +86,50 @@ export const Default = (args) => {
   const { heading: groupHeading, copy: groupCopy } =
     args?.ContentGroupPictograms ?? {};
   return html`
-    <dds-content-group-pictograms>
-      <dds-content-group-heading>${groupHeading}</dds-content-group-heading>
-      <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
-      ${pictogramsItems.map(
-        ({ heading, copy, linkWithIcon }) => html`
-          <dds-pictogram-item>
-            <svg
-              version="1.1"
-              slot="pictogram"
-              xmlns="http://www.w3.org/2000/svg"
-              xmlns:xlink="http://www.w3.org/1999/xlink"
-              x="0px"
-              y="0px"
-              width="64"
-              height="64"
-              viewBox="8 8 32 32"
-              xml:space="preserve">
-              <title></title>
-              <g>
+    <c4d-content-group-pictograms>
+      <c4d-content-group-heading>${groupHeading}</c4d-content-group-heading>
+      <c4d-content-group-copy>${groupCopy}</c4d-content-group-copy>
+      <div>
+        ${pictogramsItems.map(
+          ({ heading, copy, linkWithIcon }) => html`
+            <c4d-content-item horizontal>
+              <svg
+                version="1.1"
+                slot="media"
+                xmlns="http://www.w3.org/2000/svg"
+                xmlns:xlink="http://www.w3.org/1999/xlink"
+                stroke="currentColor"
+                x="0px"
+                y="0px"
+                width="64"
+                height="64"
+                viewBox="8 8 32 32"
+                xml:space="preserve">
                 <g>
-                  <path
-                    style="fill:none;stroke-width:0.72;stroke-linejoin:round;stroke-miterlimit:10;"
-                    d="M15,29H9V10h25v19h-7
+                  <g>
+                    <path
+                      style="fill:none;stroke-width:0.72;stroke-linejoin:round;stroke-miterlimit:10;"
+                      d="M15,29H9V10h25v19h-7
                     M34,26h-7 M15,26H9 M30,29v8h9V21h-5 M30,34h9 M20.998,27.621c0-0.573-0.447-1.037-0.998-1.037s-0.998,0.464-0.998,1.037v2.378
                     l-0.005-6.962c0-0.573-0.447-1.037-0.998-1.037S17,22.464,17,23.037v5.882v4.924C17,36.139,18.792,38,21.002,38
                     S25,36.121,25,33.842v-5.04c0-0.573-0.447-1.037-0.998-1.037s-0.998,0.464-0.998,1.037v1.196l-0.005-1.935
                     c0-0.573-0.447-1.037-0.998-1.037s-1.002,0.464-1.002,1.037l0.004,1.935L20.998,27.621z" />
+                  </g>
                 </g>
-              </g>
-              <g></g>
-            </svg>
-            <dds-content-item-heading>${heading}</dds-content-item-heading>
-            <dds-content-item-copy>${copy}</dds-content-item-copy>
-            <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
-              ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
-            </dds-link-with-icon>
-          </dds-pictogram-item>
-        `
-      )}
-    </dds-content-group-pictograms>
+                <g></g>
+              </svg>
+              <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+              <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+              <c4d-link-with-icon
+                href="${linkWithIcon.href}"
+                slot="footer"
+                cta-type="local">
+                ${linkWithIcon.copy}
+              </c4d-link-with-icon>
+            </c4d-content-item>
+          `
+        )}
+      </div>
+    </c4d-content-group-pictograms>
   `;
 };
diff --git a/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.scss b/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.scss
index f334cf34bd4..776fe46fdba 100644
--- a/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.scss
+++ b/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.scss
@@ -5,11 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-pictograms/content-group-pictograms';
+@use '@carbon/styles/scss/breakpoint';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/content-group-pictograms';
 
-:host(#{$dds-prefix}-content-group-pictograms) {
+:host(#{$c4d-prefix}-content-group-pictograms) {
   display: block;
 }
diff --git a/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts b/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts
index 278bb2402bd..daa762d0f22 100644
--- a/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts
+++ b/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSContentGroup from '../content-group/content-group';
+import C4DContentGroup from '../content-group/content-group';
 import styles from './content-group-pictograms.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content group with pictograms
  *
- * @element dds-content-group-pictogram
+ * @element c4d-content-group-pictogram
  */
 
-@customElement(`${ddsPrefix}-content-group-pictograms`)
-class DDSContentGroupPictograms extends DDSContentGroup {
+@customElement(`${c4dPrefix}-content-group-pictograms`)
+class C4DContentGroupPictograms extends C4DContentGroup {
   static get stableSelector() {
-    return `${ddsPrefix}--content-group-pictograms`;
+    return `${c4dPrefix}--content-group-pictograms`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -35,5 +35,10 @@ class DDSContentGroupPictograms extends DDSContentGroup {
   }
 }
 
+console.warn(
+  'The content-group-pictograms component has been deprecated in favor of the content-section/block and content-item (pictogram variant) components. ' +
+    'See content-section/block and content-item documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupPictograms;
+export default C4DContentGroupPictograms;
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx
index 140a1c4801b..fc9576652dd 100644
--- a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.mdx
@@ -3,15 +3,11 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-content-group-simple>`
 
-
-
-
-# `<dds-content-group-simple>`
-
-> The Content Group – Simple pattern is a variant of `<dds-content-group>`, and
-> includes a heading, content items, optional media (image or video), and ends with a CTA.
-> 💡 Check our
+> The Content Group – Simple pattern is a variant of `<cds-content-group>`, and
+> includes a heading, content items, optional media (image or video), and ends
+> with a CTA. 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group-simple)
 > example implementation.
 
@@ -34,52 +30,63 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group-simple/inde
 ### HTML
 
 ```html
-<dds-content-group-simple>
-  <dds-content-group-heading>Curabitur malesuada varius mi eu posuere</dds-content-group-heading>
-  <dds-content-group-copy>Lorem ipsum *dolor* sit amet</dds-content-group-copy>
-  <dds-image
+<cds-content-group-simple>
+  <cds-content-group-heading
+    >Curabitur malesuada varius mi eu posuere</cds-content-group-heading
+  >
+  <cds-content-group-copy>Lorem ipsum *dolor* sit amet</cds-content-group-copy>
+  <cds-image
     slot="media"
     alt="Image alt text"
     default-src="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"
-    heading="Curabitur malesuada varius mi eu posuere"
-  >
-    <dds-image-item media="(min-width: 672px)" srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
-    </dds-image-item>
-  </dds-image>
-  <dds-content-item copy="Lorem ipsum *dolor* sit amet">
-    <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-  </dds-content-item>
-  <dds-content-item copy="Lorem ipsum *dolor* sit amet">
-    <dds-content-item-heading>Lorem ipsum dolor sit amet.</dds-content-item-heading>
-  </dds-content-item>
-  <dds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
-    <dds-card-link-heading>Lorem ipsum dolor sit amet</dds-card-link-heading>
-    <dds-card-cta-footer>
-      <svg slot="icon" ...>
-        ...
-      </svg>
-    </dds-card-cta-footer>
-  </dds-card-link-cta>
-</dds-content-group-simple>
+    heading="Curabitur malesuada varius mi eu posuere">
+    <cds-image-item
+      media="(min-width: 672px)"
+      srcset="http://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
+      media="(min-width: 400px)"
+      srcset="http://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+    <cds-image-item
+      media="(min-width: 320px)"
+      srcset="http://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616">
+    </cds-image-item>
+  </cds-image>
+  <cds-content-item copy="Lorem ipsum *dolor* sit amet">
+    <cds-content-item-heading
+      >Lorem ipsum dolor sit amet.</cds-content-item-heading
+    >
+  </cds-content-item>
+  <cds-content-item copy="Lorem ipsum *dolor* sit amet">
+    <cds-content-item-heading
+      >Lorem ipsum dolor sit amet.</cds-content-item-heading
+    >
+  </cds-content-item>
+  <cds-card-link-cta slot="footer" href="https://www.ibm.com/" cta-type="local">
+    <cds-card-link-heading>Lorem ipsum dolor sit amet</cds-card-link-heading>
+    <cds-card-cta-footer>
+      <svg slot="icon" ...>...</svg>
+    </cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-group-simple>
 ```
 
 ## Props
 
-<Props of="dds-content-group-simple" />
+<Props of="cds-content-group-simple" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-content-group-simple>`  | `data-autoid="dds--content-group-simple"` | Component   |
-| `<dds-content-group-copy>`    | `data-autoid="dds--content-group__copy"`  | Component   |
-| `<dds-content-group-heading>` | `data-autoid="dds--content-group__title"` | Component   |
+| `<cds-content-group-simple>`  | `data-autoid="cds--content-group-simple"` | Component   |
+| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
+| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx
index f3faddf85b0..2e597d23db0 100644
--- a/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group-simple/__stories__/README.stories.react.mdx
@@ -4,8 +4,9 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 
 # Content Group Simple
 
-> The Content Group – Simple pattern is a variant of `<dds-content-group>`, and
-> includes a heading, content items, optional media (image or video), and ends with a CTA.
+> The Content Group – Simple pattern is a variant of `<cds-content-group>`, and
+> includes a heading, content items, optional media (image or video), and ends
+> with a CTA.
 >
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-group-simple)
@@ -20,19 +21,19 @@ Here's a quick example to get you started.
 ### JS
 
 ```js
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy.js';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy.js';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
 // eslint-disable-next-line max-len
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container.js';
+import C4DContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container.js';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
@@ -81,38 +82,51 @@ const items = [
 ];
 
 const image = ({ heading: imageHeading } = { heading: undefined }) => (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading={imageHeading}>
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage
+    slot="media"
+    alt="Image alt text"
+    default-src={imgLg16x9}
+    heading={imageHeading}>
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
 const App = () => (
-  <div className="bx--grid">
-    <div className="bx--row">
-      <div className="bx--col-lg-12 bx--no-gutter">
-        <DDSVideoCTAContainer>
-          <DDSContentGroupSimple>
-            <DDSContentGroupHeading>'Curabitur malesuada varius mi eu posuere'</DDSContentGroupHeading>
-            <DDSContentGroupCopy>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-            </DDSContentGroupCopy>
+  <div className="cds--grid">
+    <div className="cds--row">
+      <div className="cds--col-lg-12 cds--no-gutter">
+        <C4DVideoCTAContainer>
+          <C4DContentGroupSimple>
+            <C4DContentGroupHeading>
+              'Curabitur malesuada varius mi eu posuere'
+            </C4DContentGroupHeading>
+            <C4DContentGroupCopy>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+              Vestibulum non porttitor libero, in venenatis magna.
+            </C4DContentGroupCopy>
             {image({ heading: 'Curabitur malesuada varius mi eu posuere' })}
             {items.map(({ heading: itemHeading }) => (
-              <DDSContentItem>
-                <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-                <DDSContentItemCopy>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
-                </DDSContentItemCopy>
-              </DDSContentItem>
+              <C4DContentItem>
+                <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+                <C4DContentItemCopy>
+                  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                  Vestibulum non porttitor libero, in venenatis magna.
+                </C4DContentItemCopy>
+              </C4DContentItem>
             ))}
-            <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-              <DDSCardLinkHeading>Lorem ipsum dolor sit amet</DDSCardLinkHeading>
-              <DDSCardCTAFooter></DDSCardCTAFooter>
-            </DDSCardLinkCTA>
-          </DDSContentGroupSimple>
-        </DDSVideoCTAContainer>
+            <C4DCardLinkCTA
+              slot="footer"
+              cta-type="local"
+              href="https://www.example.com">
+              <C4DCardLinkHeading>
+                Lorem ipsum dolor sit amet
+              </C4DCardLinkHeading>
+              <C4DCardCTAFooter></C4DCardCTAFooter>
+            </C4DCardLinkCTA>
+          </C4DContentGroupSimple>
+        </C4DVideoCTAContainer>
       </div>
     </div>
   </div>
@@ -125,12 +139,14 @@ const App = () => (
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-content-group-simple>`  | `data-autoid="dds--content-group-simple"` | Component   |
-| `<dds-content-group-copy>`    | `data-autoid="dds--content-group__copy"`  | Component   |
-| `<dds-content-group-heading>` | `data-autoid="dds--content-group__title"` | Component   |
+| `<cds-content-group-simple>`  | `data-autoid="cds--content-group-simple"` | Component   |
+| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
+| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.react.tsx b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.react.tsx
index 6548a5d4ed3..1b4e97128f2 100644
--- a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.react.tsx
+++ b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.react.tsx
@@ -8,20 +8,20 @@
  */
 
 import React from 'react';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy.js';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer.js';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy.js';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading.js';
 // eslint-disable-next-line max-len
-import DDSContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container.js';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
+import C4DContentGroupSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-group-simple/content-group-simple';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item.js';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container.js';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container.js';
 import { select, text } from '@storybook/addon-knobs';
 import readme from './README.stories.react.mdx';
 import { CTA_TYPE } from '../../cta/defs';
@@ -35,8 +35,9 @@ const hrefsForType = {
   [CTA_TYPE.LOCAL]: 'https://www.example.com',
   [CTA_TYPE.JUMP]: '#example',
   [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
-  [CTA_TYPE.DOWNLOAD]: 'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.DOWNLOAD]:
+    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
 };
 
 const knobNamesForType = {
@@ -105,44 +106,58 @@ const items = [
 ];
 
 const image = ({ heading: imageHeading } = { heading: undefined }) => (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading={imageHeading}>
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage
+    slot="media"
+    alt="Image alt text"
+    default-src={imgLg16x9}
+    heading={imageHeading}>
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
 );
 
-export const Default = args => {
-  const { copy: groupCopy, heading: groupHeading, mediaType } = args?.ContentGroupSimple ?? {};
+export const Default = (args) => {
+  const {
+    copy: groupCopy,
+    heading: groupHeading,
+    mediaType,
+  } = args?.ContentGroupSimple ?? {};
   const { copy: ctaCopy, ctaType, href } = args?.CardCTA ?? {};
   return (
-    <DDSContentGroupSimple>
-      <DDSContentGroupHeading>{groupHeading}</DDSContentGroupHeading>
-      <DDSContentGroupCopy>{groupCopy}</DDSContentGroupCopy>
+    <C4DContentGroupSimple>
+      <C4DContentGroupHeading>{groupHeading}</C4DContentGroupHeading>
+      <C4DContentGroupCopy>{groupCopy}</C4DContentGroupCopy>
       {mediaType === 'Image' ? image({ heading: groupHeading }) : ``}
-      {mediaType === 'Video' ? <DDSVideoPlayerContainer slot="media" video-id="1_9h94wo6b"></DDSVideoPlayerContainer> : ``}
+      {mediaType === 'Video' ? (
+        <C4DVideoPlayerContainer
+          slot="media"
+          video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
+      ) : (
+        ``
+      )}
       {items.map(({ heading: itemHeading, copy: itemCopy }) => (
-        <DDSContentItem>
-          <DDSContentItemHeading>{itemHeading}</DDSContentItemHeading>
-          <DDSContentItemCopy>{itemCopy}</DDSContentItemCopy>
-        </DDSContentItem>
+        <C4DContentItem>
+          <C4DContentItemHeading>{itemHeading}</C4DContentItemHeading>
+          <C4DContentItemCopy>{itemCopy}</C4DContentItemCopy>
+        </C4DContentItem>
       ))}
-      <DDSCardLinkCTA slot="footer" cta-type={ctaType} href={href}>
-        <DDSCardLinkHeading>{ctaCopy}</DDSCardLinkHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentGroupSimple>
+      <C4DCardLinkCTA slot="footer" cta-type={ctaType} href={href}>
+        <C4DCardLinkHeading>{ctaCopy}</C4DCardLinkHeading>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardLinkCTA>
+    </C4DContentGroupSimple>
   );
 };
 
 export default {
   title: 'Components/Content group simple',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-12 bx--no-gutter">
-            <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-12 cds--no-gutter">
+            <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
           </div>
         </div>
       </div>
@@ -154,7 +169,10 @@ export default {
     knobs: {
       ContentGroupSimple: () => ({
         copy: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.',
-        heading: text('Heading (heading)', 'Curabitur malesuada varius mi eu posuere'),
+        heading: text(
+          'Heading (heading)',
+          'Curabitur malesuada varius mi eu posuere'
+        ),
         mediaType: select('With media', mediaTypes, MEDIA_TYPE.IMAGE),
       }),
       CardCTA: () => {
@@ -162,7 +180,10 @@ export default {
         return {
           copy: text('Copy text (copy)', 'Lorem ipsum dolor sit amet'),
           ctaType,
-          href: text(knobNamesForType[ctaType ?? CTA_TYPE.LOCAL], hrefsForType[ctaType ?? CTA_TYPE.LOCAL]),
+          href: text(
+            knobNamesForType[ctaType ?? CTA_TYPE.LOCAL],
+            hrefsForType[ctaType ?? CTA_TYPE.LOCAL]
+          ),
         };
       },
     },
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts
index e57c1700e9a..22c6aa4af16 100644
--- a/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts
+++ b/packages/web-components/src/components/content-group-simple/__stories__/content-group-simple.stories.ts
@@ -9,8 +9,8 @@
 
 import '../index';
 import '../../cta/index';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 // eslint-disable-next-line sort-imports
 import { CTA_TYPE } from '../../cta/defs';
@@ -28,7 +28,7 @@ const hrefsForType = {
   [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
   [CTA_TYPE.DOWNLOAD]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
 };
 
 const knobNamesForType = {
@@ -97,18 +97,18 @@ const items = [
 ];
 
 const image = ({ heading: imageHeading } = { heading: undefined }) => html`
-  <dds-image
+  <c4d-image
     slot="media"
     alt="Image alt text"
     default-src="${imgLg16x9}"
-    heading="${ifNonNull(imageHeading)}">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
+    heading="${ifDefined(imageHeading)}">
+    <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+    </c4d-image-item>
+  </c4d-image>
 `;
 
 export const Default = (args) => {
@@ -119,33 +119,33 @@ export const Default = (args) => {
   } = args?.ContentGroupSimple ?? {};
   const { copy: ctaCopy, ctaType, href } = args?.CardCTA ?? {};
   return html`
-    <dds-content-group-simple>
-      <dds-content-group-heading>${groupHeading}</dds-content-group-heading>
-      <dds-content-group-copy>${groupCopy}</dds-content-group-copy>
+    <c4d-content-group-simple>
+      <c4d-content-group-heading>${groupHeading}</c4d-content-group-heading>
+      <c4d-content-group-copy>${groupCopy}</c4d-content-group-copy>
       ${mediaType === 'Image' ? image({ heading: groupHeading }) : ``}
       ${mediaType === 'Video'
         ? html`
-            <dds-video-player-container
+            <c4d-video-player-container
               slot="media"
-              video-id="1_9h94wo6b"></dds-video-player-container>
+              video-id="0_ibuqxqbe"></c4d-video-player-container>
           `
         : ``}
       ${items.map(
         ({ heading: itemHeading, copy: itemCopy }) => html`
-          <dds-content-item>
-            <dds-content-item-heading>${itemHeading}</dds-content-item-heading>
-            <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-          </dds-content-item>
+          <c4d-content-item>
+            <c4d-content-item-heading>${itemHeading}</c4d-content-item-heading>
+            <c4d-content-item-copy>${itemCopy}</c4d-content-item-copy>
+          </c4d-content-item>
         `
       )}
-      <dds-card-link-cta
+      <c4d-card-link-cta
         slot="footer"
-        cta-type="${ifNonNull(ctaType)}"
-        href="${ifNonNull(href)}">
-        <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-        <dds-card-cta-footer></dds-card-cta-footer>
-      </dds-card-link-cta>
-    </dds-content-group-simple>
+        cta-type="${ifDefined(ctaType)}"
+        href="${ifDefined(href)}">
+        <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+        <c4d-card-cta-footer></c4d-card-cta-footer>
+      </c4d-card-link-cta>
+    </c4d-content-group-simple>
   `;
 };
 
@@ -153,10 +153,10 @@ export default {
   title: 'Components/Content group simple',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">
-            <dds-video-cta-container> ${story()} </dds-video-cta-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">
+            <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/src/components/content-group-simple/__stories__/data/ContentGroupSimple.knobs.js b/packages/web-components/src/components/content-group-simple/__stories__/data/ContentGroupSimple.knobs.js
index 73503d21a7f..63d4bc40eb9 100755
--- a/packages/web-components/src/components/content-group-simple/__stories__/data/ContentGroupSimple.knobs.js
+++ b/packages/web-components/src/components/content-group-simple/__stories__/data/ContentGroupSimple.knobs.js
@@ -56,7 +56,7 @@ const ContentGroupSimpleKnobs = {
       },
     },
     video: {
-      videoId: '1_9h94wo6b',
+      videoId: '0_ibuqxqbe',
       showCaption: true,
     },
   },
diff --git a/packages/web-components/src/components/content-group-simple/__tests__/content-group-simple.test.ts b/packages/web-components/src/components/content-group-simple/__tests__/content-group-simple.test.ts
index 77af75d1e5d..0bef3a16f44 100644
--- a/packages/web-components/src/components/content-group-simple/__tests__/content-group-simple.test.ts
+++ b/packages/web-components/src/components/content-group-simple/__tests__/content-group-simple.test.ts
@@ -1,29 +1,29 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../content-group-simple';
 
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-content-group-simple> ${children} </dds-content-group-simple>
+    <c4d-content-group-simple> ${children} </c4d-content-group-simple>
   `;
 };
 
-describe('dds-content-group-simple', function () {
+describe('c4d-content-group-simple', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-content-group-simple')
+        document.body.querySelector('c4d-content-group-simple')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -34,11 +34,11 @@ describe('dds-content-group-simple', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-content-group-simple>`
+      await Promise.resolve(); // The update cycle of `<c4d-content-group-simple>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
       expect(
-        document.body.querySelector('dds-content-group-simple')
+        document.body.querySelector('c4d-content-group-simple')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.scss b/packages/web-components/src/components/content-group-simple/content-group-simple.scss
index a2e0f31c436..2a3e663b356 100644
--- a/packages/web-components/src/components/content-group-simple/content-group-simple.scss
+++ b/packages/web-components/src/components/content-group-simple/content-group-simple.scss
@@ -1,21 +1,20 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// 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 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-@import '@carbon/ibmdotcom-styles/scss/components/content-group-simple/content-group-simple';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-block';
+@use '@carbon/ibmdotcom-styles/scss/components/content-group-simple';
 
-:host(#{$dds-prefix}-content-group-simple) {
+:host(#{$c4d-prefix}-content-group-simple) {
   display: block;
 
-  // TODO: Define the padding on `<dds-content-item>` by default
-  ::slotted(#{$dds-prefix}-content-item) {
+  // TODO: Define the padding on `<cds-content-item>` by default
+  ::slotted(#{$c4d-prefix}-content-item) {
     margin-left: $spacing-05;
     margin-right: $spacing-05;
   }
diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.ts b/packages/web-components/src/components/content-group-simple/content-group-simple.ts
index 4d23b034eb0..42c54f9e89a 100644
--- a/packages/web-components/src/components/content-group-simple/content-group-simple.ts
+++ b/packages/web-components/src/components/content-group-simple/content-group-simple.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentGroup from '../content-group/content-group';
+import C4DContentGroup from '../content-group/content-group';
 import styles from './content-group-simple.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Simple version of content group.
  *
- * @element dds-content-group-simple
+ * @element c4d-content-group-simple
  */
-@customElement(`${ddsPrefix}-content-group-simple`)
-class DDSContentGroupSimple extends StableSelectorMixin(DDSContentGroup) {
+@customElement(`${c4dPrefix}-content-group-simple`)
+class C4DContentGroupSimple extends StableSelectorMixin(C4DContentGroup) {
   static get stableSelector() {
-    return `${ddsPrefix}--content-group-simple`;
+    return `${c4dPrefix}--content-group-simple`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -35,5 +35,10 @@ class DDSContentGroupSimple extends StableSelectorMixin(DDSContentGroup) {
   }
 }
 
+console.warn(
+  'The content-group-simple component has been deprecated in favor of the content-group, image, and content-item components. ' +
+    'See content-group, image, and content-item documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupSimple;
+export default C4DContentGroupSimple;
diff --git a/packages/web-components/src/components/content-group/__stories__/README.stories.mdx b/packages/web-components/src/components/content-group/__stories__/README.stories.mdx
index b04927d69bd..0d16a53f219 100644
--- a/packages/web-components/src/components/content-group/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-group/__stories__/README.stories.mdx
@@ -3,11 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
-# `<dds-content-group>`
+# `<cds-content-group>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-group)
@@ -32,29 +28,34 @@ import '@carbon/ibmdotcom-web-components/es/components/content-group/index.js';
 ### HTML
 
 ```html
-<dds-content-group>
-  <dds-content-group-heading>Heading text</dds-content-group-heading>
-  <dds-content-group-copy>Copy test</dds-content-group-copy>
-  <dds-card-link-cta slot="footer" cta-type="local" href="https://www.example.com">
-    <dds-card-link-heading>cta copy}</dds-card-link-heading>
-    <dds-card-cta-footer></dds-card-cta-footer>
-  </dds-card-link-cta>
-</dds-content-group>
+<cds-content-group>
+  <cds-content-group-heading>Heading text</cds-content-group-heading>
+  <cds-content-group-copy>Copy test</cds-content-group-copy>
+  <cds-card-link-cta
+    slot="footer"
+    cta-type="local"
+    href="https://www.example.com">
+    <cds-card-link-heading>cta copy}</cds-card-link-heading>
+    <cds-card-cta-footer></cds-card-cta-footer>
+  </cds-card-link-cta>
+</cds-content-group>
 ```
 
 ## Props
 
-<Props of="dds-content-group" />
+<Props of="cds-content-group" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-content-group>`  | `data-autoid="dds--content-group-simple"` | Component   |
-| `<dds-content-group-copy>`    | `data-autoid="dds--content-group__copy"`  | Component   |
-| `<dds-content-group-heading>` | `data-autoid="dds--content-group__title"` | Component   |
+| `<cds-content-group>`         | `data-autoid="cds--content-group-simple"` | Component   |
+| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
+| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx
index 5c60a318202..a6911026920 100644
--- a/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-group/__stories__/README.stories.react.mdx
@@ -22,28 +22,28 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSContentGroup from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentGroup from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
 
 function App() {
   return (
-    <DDSContentGroup>
-      <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-      <DDSContentGroupCopy>{copy}</DDSContentGroupCopy>
-      <DDSCardLinkCTA
+    <C4DContentGroup>
+      <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+      <C4DContentGroupCopy>{copy}</C4DContentGroupCopy>
+      <C4DCardLinkCTA
         slot="footer"
         cta-type="local"
         href="https://www.example.com">
-        <DDSCardLinkHeading>
+        <C4DCardLinkHeading>
           Learn more about natural language processing
-        </DDSCardLinkHeading>
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardLinkCTA>
-    </DDSContentGroup>
+        </C4DCardLinkHeading>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardLinkCTA>
+    </C4DContentGroup>
   );
 }
 ```
@@ -60,8 +60,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-content-group>`         | `data-autoid="dds--content-group-simple"` | Component   |
-| `<dds-content-group-copy>`    | `data-autoid="dds--content-group__copy"`  | Component   |
-| `<dds-content-group-heading>` | `data-autoid="dds--content-group__title"` | Component   |
+| `<cds-content-group>`         | `data-autoid="cds--content-group-simple"` | Component   |
+| `<cds-content-group-copy>`    | `data-autoid="cds--content-group__copy"`  | Component   |
+| `<cds-content-group-heading>` | `data-autoid="cds--content-group__title"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-group/__stories__/content-group.stories.react.tsx b/packages/web-components/src/components/content-group/__stories__/content-group.stories.react.tsx
index 75aad5faf45..b559611ad50 100644
--- a/packages/web-components/src/components/content-group/__stories__/content-group.stories.react.tsx
+++ b/packages/web-components/src/components/content-group/__stories__/content-group.stories.react.tsx
@@ -12,20 +12,20 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSContentGroup from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DContentGroup from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentGroupCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-copy';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--002.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--002.jpg';
@@ -35,91 +35,118 @@ import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
 const image = (
-  <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Lorem ipsum dolor sit amet.">
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9}>
+  <C4DImage
+    slot="media"
+    alt="Image alt text"
+    default-src={imgLg16x9}
+    heading="Lorem ipsum dolor sit amet.">
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9}>
       {' '}
-    </DDSImageItem>
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9}>
+    </C4DImageItem>
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9}>
       {' '}
-    </DDSImageItem>
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9}>
+    </C4DImageItem>
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9}>
       {' '}
-    </DDSImageItem>
-  </DDSImage>
+    </C4DImageItem>
+  </C4DImage>
 );
 
-export const Default = args => {
-  const { heading, copy, showCopy, addChildren, cta } = args?.ContentGroup ?? {};
+export const Default = (args) => {
+  const { heading, copy, showCopy, addChildren, cta } =
+    args?.ContentGroup ?? {};
   return (
-    <DDSContentGroup>
-      <DDSContentGroupHeading>{heading}</DDSContentGroupHeading>
-      {showCopy ? <DDSContentGroupCopy>{copy}</DDSContentGroupCopy> : ''}
+    <C4DContentGroup>
+      <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+      {showCopy ? <C4DContentGroupCopy>{copy}</C4DContentGroupCopy> : ''}
       {addChildren.includes('Content item simple') ? (
-        <DDSContentItem>
-          <DDSContentItemHeading>Natural language understanding</DDSContentItemHeading>
-          <DDSContentItemCopy>
-            This are of NLP takes "real world" text and applies a symbolic system for a machine to interpret its meaning, using
-            formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic
-            tools.
-          </DDSContentItemCopy>
-        </DDSContentItem>
+        <C4DContentItem>
+          <C4DContentItemHeading>
+            Natural language understanding
+          </C4DContentItemHeading>
+          <C4DContentItemCopy>
+            This are of NLP takes "real world" text and applies a symbolic
+            system for a machine to interpret its meaning, using formal logic;
+            structures that describe the various relationships between concepts
+            (ontologies); and other semantic tools.
+          </C4DContentItemCopy>
+        </C4DContentItem>
       ) : (
         ''
       )}
       {addChildren.includes('Content item with image') ? (
-        <DDSContentItem>
+        <C4DContentItem>
           {image}
-          <DDSContentItemHeading>Natural language understanding</DDSContentItemHeading>
-          <DDSContentItemCopy>
-            This are of NLP takes "real world" text and applies a symbolic system for a machine to interpret its meaning, using
-            formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic
-            tools.
-          </DDSContentItemCopy>
-          <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+          <C4DContentItemHeading>
+            Natural language understanding
+          </C4DContentItemHeading>
+          <C4DContentItemCopy>
+            This are of NLP takes "real world" text and applies a symbolic
+            system for a machine to interpret its meaning, using formal logic;
+            structures that describe the various relationships between concepts
+            (ontologies); and other semantic tools.
+          </C4DContentItemCopy>
+          <C4DTextCTA
+            slot="footer"
+            cta-type="local"
+            href="https://www.example.com">
             Read more about NLP
-          </DDSTextCTA>
-        </DDSContentItem>
+          </C4DTextCTA>
+        </C4DContentItem>
       ) : (
         ''
       )}
       {addChildren.includes('Content item with video') ? (
-        <DDSContentItem>
-          <DDSContentItemHeading>Natural language understanding</DDSContentItemHeading>
-          <DDSVideoPlayerContainer slot="media" video-id="1_9h94wo6b"></DDSVideoPlayerContainer>
-          <DDSContentItemCopy>
-            This are of NLP takes "real world" text and applies a symbolic system for a machine to interpret its meaning, using
-            formal logic; structures that describe the various relationships between concepts (ontologies); and other semantic
-            tools.
-          </DDSContentItemCopy>
-          <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+        <C4DContentItem>
+          <C4DContentItemHeading>
+            Natural language understanding
+          </C4DContentItemHeading>
+          <C4DVideoPlayerContainer
+            slot="media"
+            video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
+          <C4DContentItemCopy>
+            This are of NLP takes "real world" text and applies a symbolic
+            system for a machine to interpret its meaning, using formal logic;
+            structures that describe the various relationships between concepts
+            (ontologies); and other semantic tools.
+          </C4DContentItemCopy>
+          <C4DTextCTA
+            slot="footer"
+            cta-type="local"
+            href="https://www.example.com">
             Read more about NLP
-          </DDSTextCTA>
-        </DDSContentItem>
+          </C4DTextCTA>
+        </C4DContentItem>
       ) : (
         ''
       )}
       {cta ? (
-        <DDSCardLinkCTA slot="footer" cta-type="local" href="https://www.example.com">
-          <DDSCardLinkHeading>Learn more about natural language processing</DDSCardLinkHeading>
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardLinkCTA>
+        <C4DCardLinkCTA
+          slot="footer"
+          cta-type="local"
+          href="https://www.example.com">
+          <C4DCardLinkHeading>
+            Learn more about natural language processing
+          </C4DCardLinkHeading>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardLinkCTA>
       ) : (
         ''
       )}
-    </DDSContentGroup>
+    </C4DContentGroup>
   );
 };
 
 export default {
   title: 'Components/Content group',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
-          <div className="bx--grid">
-            <div className="bx--row">
-              <div className="bx--col-lg-12 bx--no-gutter">
-                <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <div className="cds--col-lg-12 cds--no-gutter">
+                <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
               </div>
             </div>
           </div>
diff --git a/packages/web-components/src/components/content-group/__stories__/content-group.stories.ts b/packages/web-components/src/components/content-group/__stories__/content-group.stories.ts
index f41f108713f..4aa2032d224 100644
--- a/packages/web-components/src/components/content-group/__stories__/content-group.stories.ts
+++ b/packages/web-components/src/components/content-group/__stories__/content-group.stories.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -11,7 +11,7 @@ import '../index';
 import '../../content-item/index';
 import '../../cta/text-cta';
 import '../../image/index';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { boolean, optionsKnob } from '@storybook/addon-knobs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
@@ -23,107 +23,107 @@ export const Default = (args) => {
   const { heading, showCopy, copy, cta, addChildren } =
     args?.ContentGroup ?? {};
   return html`
-    <dds-content-group>
-      <dds-content-group-heading>${heading}</dds-content-group-heading>
+    <c4d-content-group>
+      <c4d-content-group-heading>${heading}</c4d-content-group-heading>
       ${showCopy
-        ? html` <dds-content-group-copy>${copy}</dds-content-group-copy> `
+        ? html` <c4d-content-group-copy>${copy}</c4d-content-group-copy> `
         : ''}
       ${addChildren.includes('Content item simple')
         ? html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >Natural language understanding</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >Natural language understanding</c4d-content-item-heading
               >
-              <dds-content-item-copy
+              <c4d-content-item-copy
                 >This area of NLP takes "real world" text and applies a symbolic
                 system for a machine to interpret its meaning, using formal
                 logic; structures that describe the various relationships
                 between concepts (ontologies); and other semantic
-                tools.</dds-content-item-copy
+                tools.</c4d-content-item-copy
               >
-            </dds-content-item>
+            </c4d-content-item>
           `
         : ``}
       ${addChildren.includes('Content item with image')
         ? html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >Natural language understanding</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >Natural language understanding</c4d-content-item-heading
               >
-              <dds-image
+              <c4d-image
                 slot="media"
                 alt="Image alt text"
                 default-src="${imgLg16x9}"
                 heading="Image caption text">
-                <dds-image-item
+                <c4d-image-item
                   media="(min-width: 672px)"
                   srcset="${imgLg16x9}">
-                </dds-image-item>
-                <dds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 400px)"
                   srcset="${imgMd16x9}">
-                </dds-image-item>
-                <dds-image-item
+                </c4d-image-item>
+                <c4d-image-item
                   media="(min-width: 320px)"
                   srcset="${imgSm16x9}">
-                </dds-image-item>
-              </dds-image>
-              <dds-content-item-copy
+                </c4d-image-item>
+              </c4d-image>
+              <c4d-content-item-copy
                 >This area of NLP takes "real world" text and applies a symbolic
                 system for a machine to interpret its meaning, using formal
                 logic; structures that describe the various relationships
                 between concepts (ontologies); and other semantic
-                tools.</dds-content-item-copy
+                tools.</c4d-content-item-copy
               >
-              <dds-text-cta
+              <c4d-text-cta
                 slot="footer"
                 cta-type="local"
                 href="https://www.example.com">
                 Read more about NLP
-              </dds-text-cta>
-            </dds-content-item>
+              </c4d-text-cta>
+            </c4d-content-item>
           `
         : ``}
       ${addChildren.includes('Content item with video')
         ? html`
-            <dds-content-item>
-              <dds-content-item-heading
-                >Natural language understanding</dds-content-item-heading
+            <c4d-content-item>
+              <c4d-content-item-heading
+                >Natural language understanding</c4d-content-item-heading
               >
-              <dds-video-player-container
+              <c4d-video-player-container
                 slot="media"
-                video-id="1_9h94wo6b"></dds-video-player-container>
-              <dds-content-item-copy
+                video-id="0_ibuqxqbe"></c4d-video-player-container>
+              <c4d-content-item-copy
                 >This area of NLP takes "real world" text and applies a symbolic
                 system for a machine to interpret its meaning, using formal
                 logic; structures that describe the various relationships
                 between concepts (ontologies); and other semantic
-                tools.</dds-content-item-copy
+                tools.</c4d-content-item-copy
               >
-              <dds-text-cta
+              <c4d-text-cta
                 slot="footer"
                 cta-type="local"
                 href="https://www.example.com">
                 Read more about NLP
-              </dds-text-cta>
-            </dds-content-item>
+              </c4d-text-cta>
+            </c4d-content-item>
           `
         : ``}
       ${cta
         ? html`
-            <dds-card-link-cta
+            <c4d-card
               slot="footer"
               cta-type="local"
               href="https://www.example.com">
-              <dds-card-link-heading
+              <c4d-card-link-heading
                 >Learn more about natual language
-                processing</dds-card-link-heading
+                processing</c4d-card-link-heading
               >
-              <dds-card-cta-footer></dds-card-cta-footer>
-            </dds-card-link-cta>
+              <c4d-card-footer></c4d-card-footer>
+            </c4d-card>
           `
         : ''}
-    </dds-content-group>
+    </c4d-content-group>
   `;
 };
 
@@ -131,10 +131,10 @@ export default {
   title: 'Components/Content group',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">
-            <dds-video-cta-container> ${story()} </dds-video-cta-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">
+            <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/src/components/content-group/content-group-copy.ts b/packages/web-components/src/components/content-group/content-group-copy.ts
index 46b74326e10..c4332d0f907 100644
--- a/packages/web-components/src/components/content-group/content-group-copy.ts
+++ b/packages/web-components/src/components/content-group/content-group-copy.ts
@@ -7,37 +7,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSMarkdown from '../markdown/markdown';
+import C4DMarkdown from '../markdown/markdown';
 import './content-group-paragraph';
 import styles from './content-group.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The copy content in content group.
  *
- * @element dds-content-group-copy
+ * @element c4d-content-group-copy
  */
-@customElement(`${ddsPrefix}-content-group-copy`)
-class DDSContentGroupCopy extends StableSelectorMixin(DDSMarkdown) {
+@customElement(`${c4dPrefix}-content-group-copy`)
+class C4DContentGroupCopy extends StableSelectorMixin(C4DMarkdown) {
   protected get _customTags() {
     const tags = new Set(super._customTags);
-    tags.add(`${ddsPrefix}-content-group-paragraph`);
+    tags.add(`${c4dPrefix}-content-group-paragraph`);
     return tags;
   }
 
   protected get _renderer() {
     return Object.assign(super._renderer, {
       paragraph(text) {
-        return `<${ddsPrefix}-content-group-paragraph>${text}</${ddsPrefix}-content-group-paragraph>`;
+        return `<${c4dPrefix}-content-group-paragraph>${text}</${c4dPrefix}-content-group-paragraph>`;
       },
     });
   }
 
+  firstUpdated() {
+    this.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        this.removeChild(node);
+      }
+    });
+  }
+
   /**
    * The shadow slot this copy content should be in.
    */
@@ -45,11 +53,11 @@ class DDSContentGroupCopy extends StableSelectorMixin(DDSMarkdown) {
   slot = 'copy';
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-group__copy`;
+    return `${c4dPrefix}--content-group__copy`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupCopy;
+export default C4DContentGroupCopy;
diff --git a/packages/web-components/src/components/content-group/content-group-heading.ts b/packages/web-components/src/components/content-group/content-group-heading.ts
index 11d281b3e82..9f238151566 100644
--- a/packages/web-components/src/components/content-group/content-group-heading.ts
+++ b/packages/web-components/src/components/content-group/content-group-heading.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-group.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content in content group.
  *
- * @element dds-content-group-heading
+ * @element c4d-content-group-heading
  */
-@customElement(`${ddsPrefix}-content-group-heading`)
-class DDSContentGroupHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-group-heading`)
+class C4DContentGroupHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this logo UI should be in.
    */
@@ -43,11 +44,11 @@ class DDSContentGroupHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-group__heading`;
+    return `${c4dPrefix}--content-group__heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupHeading;
+export default C4DContentGroupHeading;
diff --git a/packages/web-components/src/components/content-group/content-group-paragraph.ts b/packages/web-components/src/components/content-group/content-group-paragraph.ts
index 83f39e09b4d..b4bc4a903a0 100644
--- a/packages/web-components/src/components/content-group/content-group-paragraph.ts
+++ b/packages/web-components/src/components/content-group/content-group-paragraph.ts
@@ -7,31 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './content-group.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The paragraph content in content group.
  *
- * @element dds-content-group-paragraph
+ * @element c4d-content-group-paragraph
  */
-@customElement(`${ddsPrefix}-content-group-paragraph`)
-class DDSContentGroupParagraph extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-group-paragraph`)
+class C4DContentGroupParagraph extends StableSelectorMixin(LitElement) {
   render() {
     return html` <slot></slot> `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-group-paragraph`;
+    return `${c4dPrefix}--content-group-paragraph`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroupParagraph;
+export default C4DContentGroupParagraph;
diff --git a/packages/web-components/src/components/content-group/content-group.scss b/packages/web-components/src/components/content-group/content-group.scss
index 67d092c3be3..30574744b42 100644
--- a/packages/web-components/src/components/content-group/content-group.scss
+++ b/packages/web-components/src/components/content-group/content-group.scss
@@ -1,23 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2021
+// 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 'carbon-components/scss/globals/scss/vars';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/type/styles';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-group/content-group';
-
-:host(#{$dds-prefix}-content-group),
-:host(#{$dds-prefix}-content-group-copy),
-:host(#{$dds-prefix}-content-group-paragraph) {
-  display: block;
-}
-
-:host(#{$dds-prefix}-content-group-copy) {
-  @include carbon--type-style('body-long-02');
-}
+@use '@carbon/ibmdotcom-styles/scss/components/content-group';
diff --git a/packages/web-components/src/components/content-group/content-group.ts b/packages/web-components/src/components/content-group/content-group.ts
index 2fe4b00922e..c5d0e3b8329 100644
--- a/packages/web-components/src/components/content-group/content-group.ts
+++ b/packages/web-components/src/components/content-group/content-group.ts
@@ -7,32 +7,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, TemplateResult } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentBlock from '../content-block/content-block';
+import { TemplateResult, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentBlock from '../content-block/content-block';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-group.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Content group.
  *
  * @abstract
  */
-@customElement(`${ddsPrefix}-content-group`)
-class DDSContentGroup extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-content-group`)
+class C4DContentGroup extends StableSelectorMixin(C4DContentBlock) {
   protected _renderInnerBody(): TemplateResult | string | void {
     return html` ${this._renderMedia()}${this._renderContent()} `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-group`;
+    return `${c4dPrefix}--content-group`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentGroup;
+export default C4DContentGroup;
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx
deleted file mode 100644
index 611eb3a9cc2..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import markdownContents from '../../../../docs/markdown-contents.md';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-
-
-
-
-
-# `<dds-content-item-horizontal>`
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-horizontal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['content-item-horizontal'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<dds-content-item-horizontal>
-  <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-  <dds-content-item-horizontal-copy
-    >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy
-  >
-  <dds-link-list slot="footer" type="vertical">
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-      Learn more
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-      Microservices and containers
-    </dds-link-list-item-cta>
-  </dds-link-list>
-</dds-content-item-horizontal>
-```
-
-### HTML (with thumbnail)
-
-```html
-<dds-content-item-horizontal thumbnail>
-  <dds-content-item-heading>
-    Aliquam condimentum
-  </dds-content-item-heading>
-  <dds-content-item-horizontal-thumbnail-copy>
-    Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-    Phasellus at elit sollicitudin.
-  </dds-content-item-horizontal-thumbnail-copy>
-  <dds-link-list slot="footer" type="vertical">
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-      Learn more
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-      Microservices and containers
-    </dds-link-list-item-cta>
-  </dds-link-list>
-  <dds-image slot="thumbnail" alt="Alt text" default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"></dds-image>
-</dds-content-item-horizontal>
-```
-
-## With Media (image)
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
-
-// with Image
-import '@carbon/ibmdotcom-web-components/es/components/image/image';
-```
-
-### HTML
-
-```html
-<dds-content-item-horizontal-media align="right">
-  <dds-image slot="media" alt="Alt text" default-src="image.jpg"></dds-image>
-  <dds-content-item-heading>Lorem Ipsum</dds-content-item-heading>
-  <dds-content-item-horizontal-media-copy>Lorem Ipsum</dds-content-item-horizontal-media-copy>
-  <dds-link-list slot="footer" type="vertical">
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-      Learn more
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-      Microservices and containers
-    </dds-link-list-item-cta>
-  </dds-link-list>
-</dds-content-item-horizontal-media>
-```
-
-## With Media (video)
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
-
-// with Video
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video';
-```
-
-### HTML
-
-```html
-<dds-content-item-horizontal-media align="right">
-  <dds-content-item-horizontal-media-video video-id="1_9h94wo6b"></dds-content-item-horizontal-media-video>
-  <dds-content-item-heading>Lorem Ipsum</dds-content-item-heading>
-  <dds-content-item-horizontal-media-copy>Lorem Ipsum</dds-content-item-horizontal-media-copy>
-  <dds-link-list slot="footer" type="vertical">
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-      Learn more
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-      Microservices and containers
-    </dds-link-list-item-cta>
-  </dds-link-list>
-</dds-content-item-horizontal-media>
-```
-
-## With Featured Media (image)
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
-
-// with Image
-import '@carbon/ibmdotcom-web-components/es/components/image/image';
-```
-
-### HTML
-
-```html
-<dds-content-item-horizontal-media-featured>
-  <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-  <dds-content-item-horizontal-media-copy>
-    Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-  </dds-content-item-horizontal-media-copy>
-  <dds-link-list slot="footer" type="vertical">
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-      Learn more
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-      Microservices and containers
-    </dds-link-list-item-cta>
-  </dds-link-list>
-  <dds-image slot="media" alt="Alt text" default-src="image.jpg"></dds-image>
-</dds-content-item-horizontal-media-featured>
-```
-
-## With Featured Media (video)
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/index.js';
-
-// with Video
-import '@carbon/ibmdotcom-web-components/es/components/content-item-horizontal/content-item-horizontal-media-video';
-```
-
-### HTML
-
-```html
-<dds-content-item-horizontal-media-featured>
-  <dds-content-item-horizontal-eyebrow>Lorem ipsum</dds-content-item-horizontal-eyebrow>
-  <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-  <dds-content-item-horizontal-media-copy>
-    Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-  </dds-content-item-horizontal-media-copy>
-  <dds-link-list slot="footer" type="vertical">
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
-      Learn more
-    </dds-link-list-item-cta>
-    <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
-      Microservices and containers
-    </dds-link-list-item-cta>
-  </dds-link-list>
-  <dds-content-item-horizontal-media-video video-id="1_9h94wo6b"></dds-content-item-horizontal-media-video>
-</dds-content-item-horizontal-media-featured>
-```
-
-## Props
-
-<Props of="dds-content-item-horizontal" />
-<Description markdown={markdownContents} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector               | Compatibility selector                             | Description |
-| ------------------------------------- | -------------------------------------------------- | ----------- |
-| `<dds-content-item-horizontal>`       | `data-autoid="dds--content-item-horizontal"`       | Component   |
-| `<dds-content-item-horizontal-media>` | `data-autoid="dds--content-item-horizontal-media"` | Component   |
-| `<dds-content-item-heading>`          | `data-autoid="dds--content-item-heading"`          | Component   |
-| `<dds-content-item-horizontal-copy>`  | `data-autoid="dds--content-item-horizontal-copy"`  | Component   |
-| `<dds-link-list>`                     | `data-autoid="dds--link-list"`                     | Component   |
-| `<dds-link-list-item-cta>`            | `data-autoid="dds--link-list-item-cta"`            | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx
deleted file mode 100644
index f6abbb517b2..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,222 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-
-# Content Item Horizontal
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-horizontal)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS
-
-```javascript
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-
-function App() {
-  return (
-  <DDSContentItemHorizontal>
-    <DDSContentItemHorizontalEyebrow>Lorem ipsum</DDSContentItemHorizontalEyebrow>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalCopy
-      >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin.</DDSContentItemHorizontalCopy
-    >
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentItemHorizontal>
-  );
-}
-```
-### JS (with thumbnail)
-
-```javascript
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import DDSContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-
-function App() {
-  return (
-  <DDSContentItemHorizontal thumbnail>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalThumbnailCopy
-      >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-      Phasellus at elit sollicitudin.</DDSContentItemHorizontalThumbnailCopy
-    >
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-    <DDSImage slot="thumbnail" alt="Alt text" default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616" />
-  </DDSContentItemHorizontal>
-  );
-}
-```
-
-### JS (with media - image)
-
-```javascript
-import DDSContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-
-function App() {
-  return (
-  <DDSContentItemHorizontalMedia align="right">
-    <DDSImage slot="media" alt="Alt text" default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616" />
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalMediaCopy>Lorem Ipsum</DDSContentItemHorizontalMediaCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentItemHorizontalMedia>
-  );
-}
-```
-
-### JS (with media - video)
-
-```javascript
-import DDSContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-import DDSContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-
-function App() {
-  return (
-  <DDSContentItemHorizontalMedia align="right">
-    <DDSContentItemHorizontalMediaVideo video-id="1_9h94wo6b"></DDSContentItemHorizontalMediaVideo>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalMediaCopy>Lorem Ipsum</DDSContentItemHorizontalMediaCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentItemHorizontalMedia>
-  );
-}
-```
-
-### JS (with featured media - image)
-
-```javascript
-import DDSContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-
-function App() {
-  return (
-  <DDSContentItemHorizontalMediaFeatured>
-    <DDSContentItemHorizontalEyebrow>Lorem ipsum</DDSContentItemHorizontalEyebrow>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalMediaCopy>
-        Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-    </DDSContentItemHorizontalMediaCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-    <DDSImage slot="media" alt="Alt text" default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616" />
-  </DDSContentItemHorizontalMedia>
-  );
-}
-```
-
-### JS (with featured media - video)
-
-```javascript
-import DDSContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-import DDSContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-
-function App() {
-  return (
-  <DDSContentItemHorizontalMediaFeatured>
-    <DDSContentItemHorizontalEyebrow>Lorem ipsum</DDSContentItemHorizontalEyebrow>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalMediaCopy>
-        Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
-    </DDSContentItemHorizontalMediaCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
-        Microservices and containers
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  <DDSContentItemHorizontalMediaVideo video-id="1_9h94wo6b"></DDSContentItemHorizontalMediaVideo>
-  </DDSContentItemHorizontalMedia>
-  );
-}
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector               | Compatibility selector                                                     | Description |
-| ------------------------------------- | -------------------------------------------------------------------------- | ----------- |
-| `<dds-content-item-horizontal>`                      | `data-autoid="dds--content-item-horizontal"`                | Component   |
-| `<dds-content-item-horizontal-copy>`                 | `data-autoid="dds--content-item-horizontal-copy"`           | Component   |
-| `<dds-content-item-horizontal-eyebrow>`              | `data-autoid="dds--content-item-horizontal-eyebrow"`        | Component   |
-| `<dds-content-item-horizontal-media>`                | `data-autoid="dds--content-item-horizontal-media"`          | Component   |
-| `<dds-content-item-horizontal-media-copy>`           | `data-autoid="dds--content-item-horizontal-media-copy"`     | Component   |
-| `<dds-content-item-horizontal-media-video>`          | `data-autoid="dds--content-item-horizontal-media-video"`    | Component   |
-| `<dds-content-item-horizontal-media-featured>`       | `data-autoid="dds--content-item-horizontal-media-featured"` | Component   |
-| `<dds-content-item-horizontal-thumbnail-copy>`       | `data-autoid="dds--content-item-horizontal-thumbnail-copy"` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx b/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx
deleted file mode 100644
index c688a201a81..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.react.tsx
+++ /dev/null
@@ -1,233 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { select } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-featured';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSContentItemHorizontalThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-thumbnail-copy';
-// @ts-ignore
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-// @ts-ignore
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-// @ts-ignore
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-
-import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs';
-import readme from './README.stories.react.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--004.jpg';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
-
-const mediaAlign = {
-  [`Left`]: MEDIA_ALIGN.LEFT,
-  [`Right`]: MEDIA_ALIGN.RIGHT,
-};
-
-const mediaType = {
-  [`Image`]: MEDIA_TYPE.IMAGE,
-  [`Video`]: MEDIA_TYPE.VIDEO,
-};
-
-const bodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Aenean et ultricies est.
-`;
-
-const shortBodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.`;
-
-const bodyCopyWithFeaturedMedia = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
-ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
-dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
-id est laborum.`;
-
-export const Default = args => {
-  const { eyebrow, heading, copy, withMedia } = args?.ContentItemHorizontal ?? {};
-
-  return (
-    <DDSContentItemHorizontal>
-      <DDSContentItemHorizontalEyebrow>{eyebrow}</DDSContentItemHorizontalEyebrow>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemHorizontalCopy>{copy}</DDSContentItemHorizontalCopy>
-      <DDSTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSTextCTA>
-      {withMedia === MEDIA_TYPE.IMAGE ? <DDSImage slot="media" alt="image alt text" default-src={imgLg16x9}></DDSImage> : ''}
-      {withMedia === MEDIA_TYPE.VIDEO ? (
-        <DDSContentItemHorizontalMediaVideo video-id="1_9h94wo6b"></DDSContentItemHorizontalMediaVideo>
-      ) : (
-        ''
-      )}
-    </DDSContentItemHorizontal>
-  );
-};
-
-Default.story = {
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12 bx--no-gutter',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
-        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
-        withMedia: select('Media type', { ...mediaType, None: null }, null),
-        copy: bodyCopy,
-      }),
-    },
-  },
-};
-
-export const withThumbnail = args => {
-  const { alt, heading, copy } = args?.ContentItemHorizontal ?? {};
-  return (
-    <DDSContentItemHorizontal thumbnail>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemHorizontalThumbnailCopy>{copy}</DDSContentItemHorizontalThumbnailCopy>
-      <DDSTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSTextCTA>
-      <DDSImage slot="thumbnail" alt={alt || undefined} default-src={imgMd4x3}></DDSImage>
-    </DDSContentItemHorizontal>
-  );
-};
-
-withThumbnail.story = {
-  name: 'With thumbnail',
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12 bx--no-gutter',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
-        copy: shortBodyCopy,
-        alt: textNullable('Image alt text', 'Image alt text'),
-      }),
-    },
-  },
-};
-
-export const withMedia = args => {
-  const { align, type, alt, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
-  return (
-    <DDSContentItemHorizontalMedia align={align}>
-      {type === MEDIA_TYPE.IMAGE ? <DDSImage slot="media" alt={alt || undefined} default-src={imgLg16x9}></DDSImage> : ''}
-      {type === MEDIA_TYPE.VIDEO ? (
-        <DDSContentItemHorizontalMediaVideo video-id="1_9h94wo6b"></DDSContentItemHorizontalMediaVideo>
-      ) : (
-        ''
-      )}
-      <DDSContentItemHorizontalEyebrow>{eyebrow}</DDSContentItemHorizontalEyebrow>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemHorizontalMediaCopy>{copy}</DDSContentItemHorizontalMediaCopy>
-      <DDSTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSTextCTA>
-    </DDSContentItemHorizontalMedia>
-  );
-};
-
-withMedia.story = {
-  name: 'With media',
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12 bx--no-gutter',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
-        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
-        alt: textNullable('Image alt text', 'Image alt text'),
-        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
-        eyebrow: textNullable('Eyebrow label:', 'Lorem Ipsum'),
-        copy: shortBodyCopy,
-      }),
-    },
-  },
-};
-
-export const withFeaturedMedia = args => {
-  const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
-  return (
-    <DDSContentItemHorizontalMediaFeatured>
-      {type === MEDIA_TYPE.IMAGE ? (
-        <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9} heading="Lorem ipsum dolor sit amet"></DDSImage>
-      ) : (
-        ''
-      )}
-      {type === MEDIA_TYPE.VIDEO ? (
-        <DDSContentItemHorizontalMediaVideo video-id="1_9h94wo6b"></DDSContentItemHorizontalMediaVideo>
-      ) : (
-        ''
-      )}
-      <DDSContentItemHorizontalEyebrow>{eyebrow}</DDSContentItemHorizontalEyebrow>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemHorizontalMediaCopy>{copy}</DDSContentItemHorizontalMediaCopy>
-      <DDSTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
-        Learn more
-      </DDSTextCTA>
-    </DDSContentItemHorizontalMediaFeatured>
-  );
-};
-
-withFeaturedMedia.story = {
-  name: 'With featured media',
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
-        eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
-        heading: textNullable('Heading:', 'Aliquam condimentum'),
-        copy: bodyCopyWithFeaturedMedia,
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Content item horizontal',
-  decorators: [
-    (story, { parameters }) => {
-      return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className={parameters.gridContentClasses}>{story()}</div>
-          </div>
-        </div>
-      );
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts b/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts
deleted file mode 100644
index 588c9abb25f..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/__stories__/content-item-horizontal.stories.ts
+++ /dev/null
@@ -1,282 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import { select } from '@storybook/addon-knobs';
-import readme from './README.stories.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-import '../index';
-import '../content-item-horizontal-media-video';
-import '../../image/image';
-import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
-import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--004.jpg';
-
-const mediaAlign = {
-  [`Left`]: MEDIA_ALIGN.LEFT,
-  [`Right`]: MEDIA_ALIGN.RIGHT,
-};
-
-const mediaType = {
-  [`Image`]: MEDIA_TYPE.IMAGE,
-  [`Video`]: MEDIA_TYPE.VIDEO,
-};
-
-const bodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
-Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-Aenean et ultricies est.
-`;
-
-const shortBodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.`;
-
-const bodyCopyWithFeaturedMedia = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
-Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
-sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation 
-ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum 
-dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim 
-id est laborum.`;
-
-export const Default = (args) => {
-  const { eyebrow, heading, copy, withMedia } =
-    args?.ContentItemHorizontal ?? {};
-  return html`
-    <dds-content-item-horizontal>
-      <dds-content-item-horizontal-eyebrow
-        >${eyebrow}</dds-content-item-horizontal-eyebrow
-      >
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-horizontal-copy
-        >${copy}</dds-content-item-horizontal-copy
-      >
-      <dds-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
-        >Learn more</dds-text-cta
-      >
-
-      ${withMedia === MEDIA_TYPE.IMAGE
-        ? html`
-            <dds-image
-              slot="media"
-              alt="image alt text"
-              default-src="${imgLg16x9}"></dds-image>
-          `
-        : null}
-      ${withMedia === MEDIA_TYPE.VIDEO
-        ? html`
-            <dds-content-item-horizontal-media-video
-              video-id="1_9h94wo6b"></dds-content-item-horizontal-media-video>
-          `
-        : null}
-    </dds-content-item-horizontal>
-  `;
-};
-
-export const WithThumbnail = (args) => {
-  const { alt, heading, copy } = args?.ContentItemHorizontal ?? {};
-  return html`
-    <dds-content-item-horizontal thumbnail>
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-horizontal-thumbnail-copy
-        >${copy}</dds-content-item-horizontal-thumbnail-copy
-      >
-      <dds-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
-        >Learn more</dds-text-cta
-      >
-      <dds-image
-        slot="thumbnail"
-        alt="${ifNonNull(alt)}"
-        default-src="${imgMd4x3}"></dds-image>
-    </dds-content-item-horizontal>
-  `;
-};
-
-export const WithMedia = (args) => {
-  const { align, type, alt, heading, eyebrow, copy } =
-    args?.ContentItemHorizontal ?? {};
-  return html`
-    <dds-content-item-horizontal-media align="${align}">
-      ${type === MEDIA_TYPE.IMAGE
-        ? html`
-            <dds-image
-              slot="media"
-              alt="${ifNonNull(alt)}"
-              default-src="${imgLg16x9}"></dds-image>
-          `
-        : null}
-      ${type === MEDIA_TYPE.VIDEO
-        ? html`
-            <dds-content-item-horizontal-media-video
-              video-id="1_9h94wo6b"></dds-content-item-horizontal-media-video>
-          `
-        : null}
-      <dds-content-item-horizontal-eyebrow
-        >${eyebrow}</dds-content-item-horizontal-eyebrow
-      >
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-horizontal-media-copy
-        >${copy}</dds-content-item-horizontal-media-copy
-      >
-      <dds-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
-        >Learn more</dds-text-cta
-      >
-    </dds-content-item-horizontal-media>
-  `;
-};
-
-export const WithMediaFeatured = (args) => {
-  const { type, heading, eyebrow, copy } = args?.ContentItemHorizontal ?? {};
-  return html`
-    <dds-content-item-horizontal-media-featured>
-      ${type === MEDIA_TYPE.IMAGE
-        ? html`
-            <dds-image
-              slot="media"
-              alt="Image alt text"
-              default-src="${imgLg16x9}"
-              heading="Lorem ipsum dolor sit amet">
-            </dds-image>
-          `
-        : null}
-      ${type === MEDIA_TYPE.VIDEO
-        ? html`
-            <dds-content-item-horizontal-media-video
-              video-id="1_9h94wo6b"></dds-content-item-horizontal-media-video>
-          `
-        : null}
-      <dds-content-item-horizontal-eyebrow
-        >${eyebrow}</dds-content-item-horizontal-eyebrow
-      >
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-horizontal-media-copy
-        >${copy}</dds-content-item-horizontal-media-copy
-      >
-      <dds-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
-        >Learn more</dds-text-cta
-      >
-    </dds-content-item-horizontal-media-featured>
-  `;
-};
-
-Default.story = {
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12 bx--no-gutter',
-  },
-};
-
-WithThumbnail.story = {
-  name: 'With thumbnail',
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12 bx--no-gutter',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
-        copy: shortBodyCopy,
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentItemHorizontal: {
-          heading: 'Aliquam condimentum',
-          copy: shortBodyCopy,
-        },
-      },
-    },
-  },
-};
-
-WithMedia.story = {
-  name: 'With media',
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12 bx--no-gutter',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
-        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
-        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
-        eyebrow: textNullable('Eyebrow label:', 'Lorem Ipsum'),
-        copy: shortBodyCopy,
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentItemHorizontal: {
-          align: 'right',
-          type: 'image',
-          alt: 'Image alt text',
-          heading: 'Aliquam condimentum',
-          eyebrow: 'Lorem Ipsum',
-          copy: shortBodyCopy,
-        },
-      },
-    },
-  },
-};
-
-WithMediaFeatured.story = {
-  name: 'With featured media',
-  parameters: {
-    gridContentClasses: 'bx--col-lg-12',
-    knobs: {
-      ContentItemHorizontal: () => ({
-        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
-        eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
-        heading: textNullable('Heading:', 'Aliquam condimentum'),
-        copy: bodyCopyWithFeaturedMedia,
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentItemHorizontal: {
-          type: 'image',
-          alt: 'Image alt text',
-          heading: 'Aliquam condimentum',
-          eyebrow: 'Lorem Ipsum',
-          copy: bodyCopyWithFeaturedMedia,
-        },
-      },
-    },
-  },
-};
-
-export default {
-  title: 'Components/Content item horizontal',
-  decorators: [
-    (story, { parameters }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="${parameters.gridContentClasses}">${story()}</div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      ContentItemHorizontal: () => ({
-        eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
-        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
-        withMedia: select('Media type', { ...mediaType, None: null }, null),
-        copy: bodyCopy,
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentItemHorizontal: {
-          eyebrow: 'Lorem ipsum',
-          heading: 'Aliquam condimentum',
-          copy: bodyCopy,
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts b/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts
deleted file mode 100644
index d462bd9799c..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/__tests__/content-item-horizontal.test.ts
+++ /dev/null
@@ -1,226 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { html, render } from 'lit-html';
-import '../../content-item/content-item-heading';
-import '../../link-list/link-list';
-import '../../cta/link-list-item-cta';
-import '../content-item-horizontal';
-import '../content-item-horizontal-copy';
-import '../content-item-horizontal-eyebrow';
-import '../content-item-horizontal-thumbnail-copy';
-import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
-import { CTA_TYPE } from '../../cta/defs';
-
-const DefaultTemplate = (props?) => {
-  const { children } = props ?? {};
-  return html`
-    <dds-content-item-horizontal> ${children} </dds-content-item-horizontal>
-  `;
-};
-
-const WithMediaTemplate = (props?) => {
-  const { children } = props ?? {};
-  return html`
-    <dds-content-item-horizontal-media>
-      ${children}
-    </dds-content-item-horizontal-media>
-  `;
-};
-
-const WithFeaturedMediaTemplate = (props?) => {
-  const { children } = props ?? {};
-  return html`
-    <dds-content-item-horizontal-media-featured>
-      ${children}
-    </dds-content-item-horizontal-media-featured>
-  `;
-};
-
-const WithThumbnailTemplate = (props?) => {
-  const { children } = props ?? {};
-  return html`
-    <dds-content-item-horizontal thumbnail>
-      ${children}
-    </dds-content-item-horizontal>
-  `;
-};
-
-describe('dds-content-item-horizontal', function () {
-  describe('Misc attributes - Default', function () {
-    it('should render with minimum attributes', async function () {
-      render(DefaultTemplate(), document.body);
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-item-horizontal')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        DefaultTemplate({
-          copy: 'copy-foo',
-          children: html`
-            <dds-content-item-horizontal-eyebrow
-              >eyebrow-foo</dds-content-item-horizontal-eyebrow
-            >
-            <dds-content-item-heading>heading-foo</dds-content-item-heading>
-            <dds-content-item-horizontal-copy
-              >copy-foo</dds-content-item-horizontal-copy
-            >
-            <dds-link-list slot="footer" type="vertical">
-              <dds-link-list-item-cta
-                icon-placement="${ICON_PLACEMENT.RIGHT}"
-                href="https://www.ibm.com"
-                cta-type="${CTA_TYPE.LOCAL}">
-                cta-copy-foo
-              </dds-link-list-item-cta>
-              <dds-link-list-item-cta
-                icon-placement="${ICON_PLACEMENT.RIGHT}"
-                href="https://www.ibm.com"
-                cta-type="${CTA_TYPE.EXTERNAL}">
-                cta-copy-foo
-              </dds-link-list-item-cta>
-            </dds-link-list>
-          `,
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-item-horizontal')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  describe('Misc attributes - WithMedia', function () {
-    it('should render with minimum attributes', async function () {
-      render(WithMediaTemplate(), document.body);
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-item-horizontal-media')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        WithMediaTemplate({
-          children: html`
-            <dds-image slot="media" alt="image" default-src=""></dds-image>
-            <dds-content-item-heading>heading-foo</dds-content-item-heading>
-            <dds-content-item-horizontal-media-copy
-              >copy-foo</dds-content-item-horizontal-media-copy
-            >
-            <dds-link-list slot="footer" type="vertical">
-              <dds-link-list-item-cta
-                icon-placement="right"
-                href="www.ibm.com"
-                cta-type="local">
-                cta-copy
-              </dds-link-list-item-cta>
-            </dds-link-list>
-          `,
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-item-horizontal-media')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  describe('Misc attributes - WithFeaturedMedia', function () {
-    it('should render with minimum attributes', async function () {
-      render(WithFeaturedMediaTemplate(), document.body);
-      await Promise.resolve();
-      expect(
-        document.body.querySelector(
-          'dds-content-item-horizontal-media-featured'
-        )
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        WithFeaturedMediaTemplate({
-          children: html`
-            <dds-content-item-horizontal-eyebrow
-              >eyebrow-foo</dds-content-item-horizontal-eyebrow
-            >
-            <dds-content-item-heading>heading-foo</dds-content-item-heading>
-            <dds-content-item-horizontal-media-copy
-              >copy-foo</dds-content-item-horizontal-media-copy
-            >
-            <dds-link-list slot="footer" type="vertical">
-              <dds-link-list-item-cta
-                icon-placement="right"
-                href="www.ibm.com"
-                cta-type="local">
-                cta-copy
-              </dds-link-list-item-cta>
-            </dds-link-list>
-            <dds-image slot="media" alt="image" default-src=""></dds-image>
-          `,
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(
-        document.body.querySelector(
-          'dds-content-item-horizontal-media-featured'
-        )
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  describe('Misc attributes - WithThumbnail', function () {
-    it('should render with minimum attributes', async function () {
-      render(WithThumbnailTemplate(), document.body);
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-item-horizontal')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        WithThumbnailTemplate({
-          children: html`
-            <dds-content-item-heading>heading-foo</dds-content-item-heading>
-            <dds-content-item-horizontal-thumbnail-copy
-              >copy-foo</dds-content-item-horizontal-thumbnail-copy
-            >
-            <dds-link-list slot="footer" type="vertical">
-              <dds-link-list-item-cta
-                icon-placement="${ICON_PLACEMENT.RIGHT}"
-                href="www.ibm.com"
-                cta-type="local">
-                cta-copy
-              </dds-link-list-item-cta>
-            </dds-link-list>
-            <dds-image
-              slot="thumbnail"
-              alt="thumbnail-image"
-              default-src=""></dds-image>
-          `,
-        }),
-        document.body
-      );
-      await Promise.resolve();
-      expect(
-        document.body.querySelector('dds-content-item-horizontal')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  afterEach(async function () {
-    await render(undefined!, document.body);
-  });
-});
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts
deleted file mode 100644
index 6ea470e8bdf..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-copy.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentItemCopy from '../content-item/content-item-copy';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The copy content of content item horizontal.
- *
- * @element dds-content-item-horizontal-copy
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-copy`)
-class DDSContentItemHorizontalCopy extends StableSelectorMixin(
-  DDSContentItemCopy
-) {
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal-copy`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts
deleted file mode 100644
index 5b378234291..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-eyebrow.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './content-item-horizontal.scss';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The eyebrow content of content item horizontal.
- *
- * @element dds-content-item-horizontal-eyebrow
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-eyebrow`)
-class DDSContentItemHorizontalEyebrow extends StableSelectorMixin(LitElement) {
-  /**
-   * The shadow slot this eyebrow content should be in.
-   */
-  @property({ reflect: true })
-  slot = 'eyebrow';
-
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal-eyebrow`;
-  }
-
-  // `styles` here is a `CSSResult` generated by custom WebPack loader
-  static styles = styles;
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalEyebrow;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts
deleted file mode 100644
index 0c55e063aa4..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-copy.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentItemCopy from '../content-item/content-item-copy';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal-media.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The copy content of content item horizontal with media.
- *
- * @element dds-content-item-horizontal-media-copy
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-media-copy`)
-class DDSContentItemHorizontalMediaCopy extends StableSelectorMixin(
-  DDSContentItemCopy
-) {
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal-media-copy`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalMediaCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts
deleted file mode 100644
index fb012c3538c..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-featured.ts
+++ /dev/null
@@ -1,53 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal-media.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * A component to present content in a horizontal orientation with featured
- * media beneath.
- *
- * @element dds-content-item-horizontal-media-featured
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-media-featured`)
-class DDSContentItemHorizontalMediaFeatured extends DDSContentItem {
-  render() {
-    return html`
-      <div class="${prefix}--content-item-horizontal__row">
-        <div class="${prefix}--content-item-horizontal__col">
-          <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
-          <slot name="heading"></slot>
-        </div>
-        <div class="${prefix}--content-item-horizontal__col">
-          ${this._renderBody()} ${this._renderFooter()}
-        </div>
-      </div>
-      <div class="${prefix}--content-item-horizontal__row">
-        <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
-      </div>
-    `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}-content-item-horizontal-media-featured`;
-  }
-
-  static styles = styles;
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalMediaFeatured;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts
deleted file mode 100644
index b105c6eb4a8..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media-video.ts
+++ /dev/null
@@ -1,43 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSVideoPlayerContainer from '../video-player/video-player-container';
-import styles from './content-item-horizontal-media.scss';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The video content in horizontal content item with media.
- *
- * @element dds-content-item-horizontal-media-video
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-media-video`)
-class DDSContentItemHorizontalMediaVideo extends DDSVideoPlayerContainer {
-  /**
-   * The shadow slot this video should be in.
-   */
-  @property({ reflect: true })
-  slot = 'media';
-
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal-media-video`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalMediaVideo;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss
deleted file mode 100644
index d9f09a68be4..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// 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 '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal-media/content-item-horizontal-media';
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts
deleted file mode 100644
index c8c90fe5b46..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-media.ts
+++ /dev/null
@@ -1,104 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, state, property, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { baseFontSize, breakpoints } from '@carbon/layout';
-import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal-media.scss';
-
-import { MEDIA_ALIGN } from './defs';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-const breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
-
-/**
- * A component to present content in a horizontal orientation with media.
- *
- * @element dds-content-item-horizontal-media
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-media`)
-class DDSContentItemHorizontalMedia extends HostListenerMixin(DDSContentItem) {
-  /**
-   * Defines the alignment of the media: `left` or `right`
-   */
-  @property({ reflect: true })
-  align = MEDIA_ALIGN.RIGHT;
-
-  /**
-   * Identifies whether the window width is below the breakpoint or not.
-   */
-  @state()
-  _isOneColumn: boolean = window.innerWidth < breakpoint;
-
-  @HostListener('window:resize')
-  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
-  private _handleWindowResize = (): void => {
-    this._isOneColumn = window.innerWidth < breakpoint;
-  };
-
-  /**
-   * @returns The text column content.
-   */
-  protected _renderTextCol(): TemplateResult | string | void {
-    return html`
-      <div class="${prefix}--content-item-horizontal__col">
-        <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
-        <slot name="heading"></slot>
-        ${this._renderBody()} ${this._renderFooter()}
-      </div>
-    `;
-  }
-
-  /**
-   * @returns The component content in the appropriate tabbing order.
-   */
-  protected _renderContent(): TemplateResult | string | void {
-    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;
-
-    return alignedRight
-      ? html`
-          ${this._renderTextCol()}
-          <div class="${prefix}--content-item-horizontal__col">
-            <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
-          </div>
-        `
-      : html`
-          <div class="${prefix}--content-item-horizontal__col">
-            <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
-          </div>
-          ${this._renderTextCol()}
-        `;
-  }
-
-  render() {
-    return html`
-      <div
-        class="${prefix}--content-item-horizontal__row ${prefix}--content-item-horizontal-media__align-${this
-          .align}">
-        ${this._renderContent()}
-      </div>
-    `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal-media`;
-  }
-
-  static styles = styles;
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalMedia;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-thumbnail-copy.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-thumbnail-copy.ts
deleted file mode 100644
index 328430b1636..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal-thumbnail-copy.ts
+++ /dev/null
@@ -1,40 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentItemCopy from '../content-item/content-item-copy';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './content-item-horizontal.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The copy content of content item horizontal with thumbnail.
- *
- * @element dds-content-item-horizontal-thumbnail-copy
- */
-@customElement(`${ddsPrefix}-content-item-horizontal-thumbnail-copy`)
-class DDSContentItemHorizontalThumbnailCopy extends StableSelectorMixin(
-  DDSContentItemCopy
-) {
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal-thumbnail-copy`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontalThumbnailCopy;
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
deleted file mode 100644
index 665e433b4f2..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-//
-// 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 '@carbon/ibmdotcom-styles/scss/components/content-item-horizontal/content-item-horizontal';
-
-:host(#{$dds-prefix}-content-item-horizontal-eyebrow) {
-  display: block;
-}
diff --git a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts b/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts
deleted file mode 100644
index e5317a7661a..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/content-item-horizontal.ts
+++ /dev/null
@@ -1,80 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentItem from '../content-item/content-item';
-import styles from './content-item-horizontal.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * A component to present a content in a horizontal orientation.
- *
- * @element dds-content-item-horizontal
- */
-@customElement(`${ddsPrefix}-content-item-horizontal`)
-class DDSContentItemHorizontal extends DDSContentItem {
-  /**
-   * Determines whether to render the thumbnail variant
-   */
-  @property({ type: Boolean })
-  thumbnail = false;
-
-  /**
-   * @returns The body content.
-   */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderMedia(): TemplateResult | string | void {
-    return html` <slot name="media"></slot> `;
-  }
-
-  render() {
-    return html`
-      ${!this.thumbnail
-        ? html`
-            <div class="${prefix}--content-item-horizontal__heading-wrapper">
-              <slot
-                name="eyebrow"
-                @slotchange="${this._handleSlotChange}"></slot>
-              <slot name="heading"></slot>
-            </div>
-            <div class="${prefix}--content-item-horizontal__content-wrapper">
-              ${this._renderBody()}${this._renderFooter()}${this._renderMedia()}
-            </div>
-          `
-        : html`
-            <div class="${prefix}--content-item-horizontal__body-wrapper">
-              <div class="${prefix}--content-item-horizontal__heading-wrapper">
-                <slot name="heading"></slot>
-              </div>
-              <div class="${prefix}--content-item-horizontal__content-wrapper">
-                ${this._renderBody()}${this._renderFooter()}
-              </div>
-            </div>
-            <div class="${prefix}--content-item-horizontal__col--2">
-              <slot name="thumbnail" @slotchange="${this._handleSlotChange}">
-              </slot>
-            </div>
-          `}
-    `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--content-item-horizontal`;
-  }
-
-  static styles = styles;
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHorizontal;
diff --git a/packages/web-components/src/components/content-item-horizontal/defs.ts b/packages/web-components/src/components/content-item-horizontal/defs.ts
deleted file mode 100644
index 08ef39566c5..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/defs.ts
+++ /dev/null
@@ -1,38 +0,0 @@
-/**
- * @license
- *
- * 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.
- */
-
-/**
- * Media align.
- */
-export enum MEDIA_ALIGN {
-  /**
-   * Content item horizontal media align left
-   */
-  LEFT = 'left',
-
-  /**
-   * Content item horizontal media align right
-   */
-  RIGHT = 'right',
-}
-
-/**
- * Media type.
- */
-export enum MEDIA_TYPE {
-  /**
-   * Content item horizontal media type image
-   */
-  IMAGE = 'image',
-
-  /**
-   * Content item horizontal media type video
-   */
-  VIDEO = 'video',
-}
diff --git a/packages/web-components/src/components/content-item-horizontal/index.ts b/packages/web-components/src/components/content-item-horizontal/index.ts
deleted file mode 100644
index 8a29626cac0..00000000000
--- a/packages/web-components/src/components/content-item-horizontal/index.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 './content-item-horizontal';
-import './content-item-horizontal-copy';
-import './content-item-horizontal-eyebrow';
-import './content-item-horizontal-media';
-import './content-item-horizontal-media-copy';
-import './content-item-horizontal-media-video';
-import './content-item-horizontal-thumbnail-copy';
-import './content-item-horizontal-media-featured';
-import '../content-item/content-item-heading';
-import '../cta/index';
-import '../link-list/link-list';
diff --git a/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
new file mode 100644
index 00000000000..66fe0b1d98f
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.mdx
@@ -0,0 +1,271 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import markdownContents from '../../../../docs/markdown-contents.md';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+
+# `<cds-content-item-row>`
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item-row)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
+```
+
+<Description
+  markdown={`${cdnJs({ components: ['content-item-row'] })}`}
+/>
+
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<cds-content-item-row>
+  <cds-content-item-row-eyebrow
+    >Lorem ipsum</cds-content-item-row-eyebrow
+  >
+  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
+  <cds-content-item-row-copy
+    >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+    ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin.</cds-content-item-row-copy
+  >
+  <cds-link-list slot="footer" type="vertical">
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Learn more
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="external">
+      Microservices and containers
+    </cds-link-list-item-cta>
+  </cds-link-list>
+</cds-content-item-row>
+```
+
+### HTML (with thumbnail)
+
+```html
+<cds-content-item-row thumbnail>
+  <cds-content-item-heading> Aliquam condimentum </cds-content-item-heading>
+  <cds-content-item-row-thumbnail-copy>
+    Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+    ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin.
+  </cds-content-item-row-thumbnail-copy>
+  <cds-link-list slot="footer" type="vertical">
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Learn more
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="external">
+      Microservices and containers
+    </cds-link-list-item-cta>
+  </cds-link-list>
+  <cds-image
+    slot="thumbnail"
+    alt="Alt text"
+    default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"></cds-image>
+</cds-content-item-row>
+```
+
+## With Media (image)
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
+
+// with Image
+import '@carbon/ibmdotcom-web-components/es/components/image/image';
+```
+
+### HTML
+
+```html
+<cds-content-item-row-media align="right">
+  <cds-image slot="media" alt="Alt text" default-src="image.jpg"></cds-image>
+  <cds-content-item-heading>Lorem Ipsum</cds-content-item-heading>
+  <cds-content-item-row-media-copy
+    >Lorem Ipsum</cds-content-item-row-media-copy
+  >
+  <cds-link-list slot="footer" type="vertical">
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Learn more
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="external">
+      Microservices and containers
+    </cds-link-list-item-cta>
+  </cds-link-list>
+</cds-content-item-row-media>
+```
+
+## With Media (video)
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
+
+// with Video
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video';
+```
+
+### HTML
+
+```html
+<cds-content-item-row-media align="right">
+  <cds-content-item-row-media-video
+    video-id="0_ibuqxqbe"></cds-content-item-row-media-video>
+  <cds-content-item-heading>Lorem Ipsum</cds-content-item-heading>
+  <cds-content-item-row-media-copy
+    >Lorem Ipsum</cds-content-item-row-media-copy
+  >
+  <cds-link-list slot="footer" type="vertical">
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Learn more
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="external">
+      Microservices and containers
+    </cds-link-list-item-cta>
+  </cds-link-list>
+</cds-content-item-row-media>
+```
+
+## With Featured Media (image)
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
+
+// with Image
+import '@carbon/ibmdotcom-web-components/es/components/image/image';
+```
+
+### HTML
+
+```html
+<cds-content-item-row-media-featured>
+  <cds-content-item-row-eyebrow
+    >Lorem ipsum</cds-content-item-row-eyebrow
+  >
+  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
+  <cds-content-item-row-media-copy>
+    Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+    ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin.
+  </cds-content-item-row-media-copy>
+  <cds-link-list slot="footer" type="vertical">
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Learn more
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="external">
+      Microservices and containers
+    </cds-link-list-item-cta>
+  </cds-link-list>
+  <cds-image slot="media" alt="Alt text" default-src="image.jpg"></cds-image>
+</cds-content-item-row-media-featured>
+```
+
+## With Featured Media (video)
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/index.js';
+
+// with Video
+import '@carbon/ibmdotcom-web-components/es/components/content-item-row/content-item-row-media-video';
+```
+
+### HTML
+
+```html
+<cds-content-item-row-media-featured>
+  <cds-content-item-row-eyebrow
+    >Lorem ipsum</cds-content-item-row-eyebrow
+  >
+  <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
+  <cds-content-item-row-media-copy>
+    Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+    ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
+    sollicitudin.
+  </cds-content-item-row-media-copy>
+  <cds-link-list slot="footer" type="vertical">
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Learn more
+    </cds-link-list-item-cta>
+    <cds-link-list-item-cta
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="external">
+      Microservices and containers
+    </cds-link-list-item-cta>
+  </cds-link-list>
+  <cds-content-item-row-media-video
+    video-id="0_ibuqxqbe"></cds-content-item-row-media-video>
+</cds-content-item-row-media-featured>
+```
+
+## Props
+
+<Props of="cds-content-item-row" />
+<Description markdown={markdownContents} />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector               | Compatibility selector                             | Description |
+| ------------------------------------- | -------------------------------------------------- | ----------- |
+| `<cds-content-item-row>`       | `data-autoid="cds--content-item-row"`       | Component   |
+| `<cds-content-item-row-media>` | `data-autoid="cds--content-item-row-media"` | Component   |
+| `<cds-content-item-heading>`          | `data-autoid="cds--content-item-heading"`          | Component   |
+| `<cds-content-item-row-copy>`  | `data-autoid="cds--content-item-row-copy"`  | Component   |
+| `<cds-link-list>`                     | `data-autoid="cds--link-list"`                     | Component   |
+| `<cds-link-list-item-cta>`            | `data-autoid="cds--link-list-item-cta"`            | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
new file mode 100644
index 00000000000..33560804674
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/__stories__/README.stories.react.mdx
@@ -0,0 +1,271 @@
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+
+# Content Item Row
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/content-item-row)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS
+
+```javascript
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+
+function App() {
+  return (
+    <C4DContentItemRow>
+      <C4DContentItemRowEyebrow>
+        Lorem ipsum
+      </C4DContentItemRowEyebrow>
+      <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+      <C4DContentItemRowCopy>
+        Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin.
+      </C4DContentItemRowCopy>
+      <C4DLinkList slot="footer" type="vertical">
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
+          Learn more
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="external">
+          Microservices and containers
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+    </C4DContentItemRow>
+  );
+}
+```
+
+### JS (with thumbnail)
+
+```javascript
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+
+function App() {
+  return (
+    <C4DContentItemRow thumbnail>
+      <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+      <C4DContentItemRowThumbnailCopy>
+        Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin.
+      </C4DContentItemRowThumbnailCopy>
+      <C4DLinkList slot="footer" type="vertical">
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
+          Learn more
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="external">
+          Microservices and containers
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+      <C4DImage
+        slot="thumbnail"
+        alt="Alt text"
+        default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"
+      />
+    </C4DContentItemRow>
+  );
+}
+```
+
+### JS (with media - image)
+
+```javascript
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+
+function App() {
+  return (
+    <C4DContentItemRowMedia align="right">
+      <C4DImage
+        slot="media"
+        alt="Alt text"
+        default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"
+      />
+      <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+      <C4DContentItemRowMediaCopy>
+        Lorem Ipsum
+      </C4DContentItemRowMediaCopy>
+      <C4DLinkList slot="footer" type="vertical">
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
+          Learn more
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="external">
+          Microservices and containers
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+    </C4DContentItemRowMedia>
+  );
+}
+```
+
+### JS (with media - video)
+
+```javascript
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+
+function App() {
+  return (
+    <C4DContentItemRowMedia align="right">
+      <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
+      <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+      <C4DContentItemRowMediaCopy>
+        Lorem Ipsum
+      </C4DContentItemRowMediaCopy>
+      <C4DLinkList slot="footer" type="vertical">
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
+          Learn more
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="external">
+          Microservices and containers
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+    </C4DContentItemRowMedia>
+  );
+}
+```
+
+### JS (with featured media - image)
+
+```javascript
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+
+function App() {
+  return (
+  <C4DContentItemRowMediaFeatured>
+    <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
+    <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+    <C4DContentItemRowMediaCopy>
+        Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
+    </C4DContentItemRowMediaCopy>
+    <C4DLinkList slot="footer" type="vertical">
+      <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+        Microservices and containers
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
+    <C4DImage slot="media" alt="Alt text" default-src="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616" />
+  </C4DContentItemRowMedia>
+  );
+}
+```
+
+### JS (with featured media - video)
+
+```javascript
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+
+function App() {
+  return (
+  <C4DContentItemRowMediaFeatured>
+    <C4DContentItemRowEyebrow>Lorem ipsum</C4DContentItemRowEyebrow>
+    <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+    <C4DContentItemRowMediaCopy>
+        Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.
+    </C4DContentItemRowMediaCopy>
+    <C4DLinkList slot="footer" type="vertical">
+      <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+        Microservices and containers
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
+  <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
+  </C4DContentItemRowMedia>
+  );
+}
+```
+
+## Props
+
+<Props of={PropTypesRef} />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector                        | Compatibility selector                                      | Description |
+| ---------------------------------------------- | ----------------------------------------------------------- | ----------- |
+| `<cds-content-item-row>`                | `data-autoid="cds--content-item-row"`                | Component   |
+| `<cds-content-item-row-copy>`           | `data-autoid="cds--content-item-row-copy"`           | Component   |
+| `<cds-content-item-row-eyebrow>`        | `data-autoid="cds--content-item-row-eyebrow"`        | Component   |
+| `<cds-content-item-row-media>`          | `data-autoid="cds--content-item-row-media"`          | Component   |
+| `<cds-content-item-row-media-copy>`     | `data-autoid="cds--content-item-row-media-copy"`     | Component   |
+| `<cds-content-item-row-media-video>`    | `data-autoid="cds--content-item-row-media-video"`    | Component   |
+| `<cds-content-item-row-media-featured>` | `data-autoid="cds--content-item-row-media-featured"` | Component   |
+| `<cds-content-item-row-thumbnail-copy>` | `data-autoid="cds--content-item-row-thumbnail-copy"` | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
new file mode 100644
index 00000000000..a24bf2efd7b
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.react.tsx
@@ -0,0 +1,268 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { select } from '@storybook/addon-knobs';
+// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowMediaFeatured from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-featured';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DContentItemRowThumbnailCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-thumbnail-copy';
+// @ts-ignore
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+// @ts-ignore
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+// @ts-ignore
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+
+import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs';
+import readme from './README.stories.react.mdx';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--004.jpg';
+import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
+
+const mediaAlign = {
+  [`Left`]: MEDIA_ALIGN.LEFT,
+  [`Right`]: MEDIA_ALIGN.RIGHT,
+};
+
+const mediaType = {
+  [`Image`]: MEDIA_TYPE.IMAGE,
+  [`Video`]: MEDIA_TYPE.VIDEO,
+};
+
+const bodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
+Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Aenean et ultricies est.
+`;
+
+const shortBodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
+Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.`;
+
+const bodyCopyWithFeaturedMedia = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
+Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+id est laborum.`;
+
+export const Default = (args) => {
+  const { eyebrow, heading, copy, withMedia } =
+    args?.ContentItemRow ?? {};
+
+  return (
+    <C4DContentItemRow>
+      <C4DContentItemRowEyebrow>
+        {eyebrow}
+      </C4DContentItemRowEyebrow>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemRowCopy>{copy}</C4DContentItemRowCopy>
+      <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DTextCTA>
+      {withMedia === MEDIA_TYPE.IMAGE ? (
+        <C4DImage
+          slot="media"
+          alt="image alt text"
+          default-src={imgLg16x9}></C4DImage>
+      ) : (
+        ''
+      )}
+      {withMedia === MEDIA_TYPE.VIDEO ? (
+        <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
+      ) : (
+        ''
+      )}
+    </C4DContentItemRow>
+  );
+};
+
+Default.story = {
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
+        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
+        withMedia: select('Media type', { ...mediaType, None: null }, null),
+        copy: bodyCopy,
+      }),
+    },
+  },
+};
+
+export const withThumbnail = (args) => {
+  const { alt, heading, copy } = args?.ContentItemRow ?? {};
+  return (
+    <C4DContentItemRow thumbnail>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemRowThumbnailCopy>
+        {copy}
+      </C4DContentItemRowThumbnailCopy>
+      <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DTextCTA>
+      <C4DImage
+        slot="thumbnail"
+        alt={alt || undefined}
+        default-src={imgMd4x3}></C4DImage>
+    </C4DContentItemRow>
+  );
+};
+
+withThumbnail.story = {
+  name: 'With thumbnail',
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
+        copy: shortBodyCopy,
+        alt: textNullable('Image alt text', 'Image alt text'),
+      }),
+    },
+  },
+};
+
+export const withMedia = (args) => {
+  const { align, type, alt, heading, eyebrow, copy } =
+    args?.ContentItemRow ?? {};
+  return (
+    <C4DContentItemRowMedia align={align}>
+      {type === MEDIA_TYPE.IMAGE ? (
+        <C4DImage
+          slot="media"
+          alt={alt || undefined}
+          default-src={imgLg16x9}></C4DImage>
+      ) : (
+        ''
+      )}
+      {type === MEDIA_TYPE.VIDEO ? (
+        <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
+      ) : (
+        ''
+      )}
+      <C4DContentItemRowEyebrow>
+        {eyebrow}
+      </C4DContentItemRowEyebrow>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemRowMediaCopy>
+        {copy}
+      </C4DContentItemRowMediaCopy>
+      <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DTextCTA>
+    </C4DContentItemRowMedia>
+  );
+};
+
+withMedia.story = {
+  name: 'With media',
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
+        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
+        alt: textNullable('Image alt text', 'Image alt text'),
+        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
+        eyebrow: textNullable('Eyebrow label:', 'Lorem Ipsum'),
+        copy: shortBodyCopy,
+      }),
+    },
+  },
+};
+
+export const withFeaturedMedia = (args) => {
+  const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {};
+  return (
+    <C4DContentItemRowMediaFeatured>
+      {type === MEDIA_TYPE.IMAGE ? (
+        <C4DImage
+          slot="media"
+          alt="Image alt text"
+          default-src={imgLg16x9}
+          heading="Lorem ipsum dolor sit amet"></C4DImage>
+      ) : (
+        ''
+      )}
+      {type === MEDIA_TYPE.VIDEO ? (
+        <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
+      ) : (
+        ''
+      )}
+      <C4DContentItemRowEyebrow>
+        {eyebrow}
+      </C4DContentItemRowEyebrow>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemRowMediaCopy>
+        {copy}
+      </C4DContentItemRowMediaCopy>
+      <C4DTextCTA slot="footer" href="https://www.ibm.com" cta-type="local">
+        Learn more
+      </C4DTextCTA>
+    </C4DContentItemRowMediaFeatured>
+  );
+};
+
+withFeaturedMedia.story = {
+  name: 'With featured media',
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
+        eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
+        heading: textNullable('Heading:', 'Aliquam condimentum'),
+        copy: bodyCopyWithFeaturedMedia,
+      }),
+    },
+  },
+};
+
+export default {
+  title: 'Components/Content item row',
+  decorators: [
+    (story, { parameters }) => {
+      return (
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className={parameters.gridContentClasses}>{story()}</div>
+          </div>
+        </div>
+      );
+    },
+  ],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+  },
+};
diff --git a/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
new file mode 100644
index 00000000000..46c5aa88341
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/__stories__/content-item-row.stories.ts
@@ -0,0 +1,269 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { select } from '@storybook/addon-knobs';
+import readme from './README.stories.mdx';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../index';
+import '../content-item-row-media-video';
+import '../../image/image';
+import { MEDIA_ALIGN, MEDIA_TYPE } from '../defs';
+import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
+import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--004.jpg';
+
+const mediaAlign = {
+  [`Left`]: MEDIA_ALIGN.LEFT,
+  [`Right`]: MEDIA_ALIGN.RIGHT,
+};
+
+const mediaType = {
+  [`Image`]: MEDIA_TYPE.IMAGE,
+  [`Video`]: MEDIA_TYPE.VIDEO,
+};
+
+const bodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
+Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
+Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+Aenean et ultricies est.
+`;
+
+const shortBodyCopy = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
+Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.`;
+
+const bodyCopyWithFeaturedMedia = `Lorem ipsum *dolor* sit amet, [consectetur adipiscing](https://www.ibm.com) elit.
+Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
+ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum
+dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
+id est laborum.`;
+
+export const Default = (args) => {
+  const { eyebrow, heading, copy, withMedia } = args?.ContentItemRow ?? {};
+  return html`
+    <c4d-content-item-row>
+      <c4d-content-item-row-eyebrow>${eyebrow}</c4d-content-item-row-eyebrow>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-row-copy>${copy}</c4d-content-item-row-copy>
+      <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
+        >Learn more</c4d-text-cta
+      >
+
+      ${withMedia === MEDIA_TYPE.IMAGE
+        ? html`
+            <c4d-image
+              slot="media"
+              alt="image alt text"
+              default-src="${imgLg16x9}"></c4d-image>
+          `
+        : null}
+      ${withMedia === MEDIA_TYPE.VIDEO
+        ? html`
+            <c4d-content-item-row-media-video
+              video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
+          `
+        : null}
+    </c4d-content-item-row>
+  `;
+};
+
+export const WithThumbnail = (args) => {
+  const { alt, heading, copy } = args?.ContentItemRow ?? {};
+  return html`
+    <c4d-content-item-row thumbnail>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-row-thumbnail-copy
+        >${copy}</c4d-content-item-row-thumbnail-copy
+      >
+      <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
+        >Learn more</c4d-text-cta
+      >
+      <c4d-image
+        slot="thumbnail"
+        alt="${ifDefined(alt)}"
+        default-src="${imgMd4x3}"></c4d-image>
+    </c4d-content-item-row>
+  `;
+};
+
+export const WithMedia = (args) => {
+  const { align, type, alt, heading, eyebrow, copy } =
+    args?.ContentItemRow ?? {};
+  return html`
+    <c4d-content-item-row-media align="${align}">
+      ${type === MEDIA_TYPE.IMAGE
+        ? html`
+            <c4d-image
+              slot="media"
+              alt="${ifDefined(alt)}"
+              default-src="${imgLg16x9}"></c4d-image>
+          `
+        : null}
+      ${type === MEDIA_TYPE.VIDEO
+        ? html`
+            <c4d-content-item-row-media-video
+              video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
+          `
+        : null}
+      <c4d-content-item-row-eyebrow>${eyebrow}</c4d-content-item-row-eyebrow>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-row-media-copy>${copy}</c4d-content-item-row-media-copy>
+      <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
+        >Learn more</c4d-text-cta
+      >
+    </c4d-content-item-row-media>
+  `;
+};
+
+export const WithMediaFeatured = (args) => {
+  const { type, heading, eyebrow, copy } = args?.ContentItemRow ?? {};
+  return html`
+    <c4d-content-item-row-media-featured>
+      ${type === MEDIA_TYPE.IMAGE
+        ? html`
+            <c4d-image
+              slot="media"
+              alt="Image alt text"
+              default-src="${imgLg16x9}"
+              heading="Lorem ipsum dolor sit amet">
+            </c4d-image>
+          `
+        : null}
+      ${type === MEDIA_TYPE.VIDEO
+        ? html`
+            <c4d-content-item-row-media-video
+              video-id="0_ibuqxqbe"></c4d-content-item-row-media-video>
+          `
+        : null}
+      <c4d-content-item-row-eyebrow>${eyebrow}</c4d-content-item-row-eyebrow>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-row-media-copy>${copy}</c4d-content-item-row-media-copy>
+      <c4d-text-cta slot="footer" href="https://www.ibm.com" cta-type="local"
+        >Learn more</c4d-text-cta
+      >
+    </c4d-content-item-row-media-featured>
+  `;
+};
+
+Default.story = {
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+  },
+};
+
+WithThumbnail.story = {
+  name: 'With thumbnail',
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
+        copy: shortBodyCopy,
+      }),
+    },
+    propsSet: {
+      default: {
+        ContentItemRow: {
+          heading: 'Aliquam condimentum',
+          copy: shortBodyCopy,
+        },
+      },
+    },
+  },
+};
+
+WithMedia.story = {
+  name: 'With media',
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        align: select('Alignment', mediaAlign, MEDIA_ALIGN.RIGHT),
+        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
+        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
+        eyebrow: textNullable('Eyebrow label:', 'Lorem Ipsum'),
+        copy: shortBodyCopy,
+      }),
+    },
+    propsSet: {
+      default: {
+        ContentItemRow: {
+          align: 'right',
+          type: 'image',
+          alt: 'Image alt text',
+          heading: 'Aliquam condimentum',
+          eyebrow: 'Lorem Ipsum',
+          copy: shortBodyCopy,
+        },
+      },
+    },
+  },
+};
+
+WithMediaFeatured.story = {
+  name: 'With featured media',
+  parameters: {
+    gridContentClasses: 'cds--col-lg-12',
+    knobs: {
+      ContentItemRow: () => ({
+        type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
+        eyebrow: textNullable('Eyebrow:', 'Lorem Ipsum'),
+        heading: textNullable('Heading:', 'Aliquam condimentum'),
+        copy: bodyCopyWithFeaturedMedia,
+      }),
+    },
+    propsSet: {
+      default: {
+        ContentItemRow: {
+          type: 'image',
+          alt: 'Image alt text',
+          heading: 'Aliquam condimentum',
+          eyebrow: 'Lorem Ipsum',
+          copy: bodyCopyWithFeaturedMedia,
+        },
+      },
+    },
+  },
+};
+
+export default {
+  title: 'Components/Content item row',
+  decorators: [
+    (story, { parameters }) => html`
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="${parameters.gridContentClasses}">${story()}</div>
+        </div>
+      </div>
+    `,
+  ],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+    knobs: {
+      ContentItemRow: () => ({
+        eyebrow: textNullable('Eyebrow (eyebrow):', 'Lorem ipsum'),
+        heading: textNullable('Heading (heading):', 'Aliquam condimentum'),
+        withMedia: select('Media type', { ...mediaType, None: null }, null),
+        copy: bodyCopy,
+      }),
+    },
+    propsSet: {
+      default: {
+        ContentItemRow: {
+          eyebrow: 'Lorem ipsum',
+          heading: 'Aliquam condimentum',
+          copy: bodyCopy,
+        },
+      },
+    },
+  },
+};
diff --git a/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
new file mode 100644
index 00000000000..b291793cf7b
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/__tests__/content-item-horizontal.test.ts
@@ -0,0 +1,214 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, render } from 'lit/html.js';
+import '../../content-item/content-item-heading';
+import '../../link-list/link-list';
+import '../../cta/link-list-item-cta';
+import '../content-item-row';
+import '../content-item-row-copy';
+import '../content-item-row-eyebrow';
+import '../content-item-row-thumbnail-copy';
+import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
+import { CTA_TYPE } from '../../cta/defs';
+
+const DefaultTemplate = (props?) => {
+  const { children } = props ?? {};
+  return html` <c4d-content-item-row> ${children} </c4d-content-item-row> `;
+};
+
+const WithMediaTemplate = (props?) => {
+  const { children } = props ?? {};
+  return html`
+    <c4d-content-item-row-media> ${children} </c4d-content-item-row-media>
+  `;
+};
+
+const WithFeaturedMediaTemplate = (props?) => {
+  const { children } = props ?? {};
+  return html`
+    <c4d-content-item-row-media-featured>
+      ${children}
+    </c4d-content-item-row-media-featured>
+  `;
+};
+
+const WithThumbnailTemplate = (props?) => {
+  const { children } = props ?? {};
+  return html`
+    <c4d-content-item-row thumbnail> ${children} </c4d-content-item-row>
+  `;
+};
+
+describe('c4d-content-item-row', function () {
+  describe('Misc attributes - Default', function () {
+    it('should render with minimum attributes', async function () {
+      render(DefaultTemplate(), document.body);
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+
+    it('should render with various attributes', async function () {
+      render(
+        DefaultTemplate({
+          copy: 'copy-foo',
+          children: html`
+            <c4d-content-item-row-eyebrow
+              >eyebrow-foo</c4d-content-item-row-eyebrow
+            >
+            <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
+            <c4d-content-item-row-copy>copy-foo</c4d-content-item-row-copy>
+            <c4d-link-list slot="footer" type="vertical">
+              <c4d-link-list-item-cta
+                icon-placement="${ICON_PLACEMENT.RIGHT}"
+                href="https://www.ibm.com"
+                cta-type="${CTA_TYPE.LOCAL}">
+                cta-copy-foo
+              </c4d-link-list-item-cta>
+              <c4d-link-list-item-cta
+                icon-placement="${ICON_PLACEMENT.RIGHT}"
+                href="https://www.ibm.com"
+                cta-type="${CTA_TYPE.EXTERNAL}">
+                cta-copy-foo
+              </c4d-link-list-item-cta>
+            </c4d-link-list>
+          `,
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+  });
+
+  describe('Misc attributes - WithMedia', function () {
+    it('should render with minimum attributes', async function () {
+      render(WithMediaTemplate(), document.body);
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row-media')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+
+    it('should render with various attributes', async function () {
+      render(
+        WithMediaTemplate({
+          children: html`
+            <c4d-image slot="media" alt="image" default-src=""></c4d-image>
+            <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
+            <c4d-content-item-row-media-copy
+              >copy-foo</c4d-content-item-row-media-copy
+            >
+            <c4d-link-list slot="footer" type="vertical">
+              <c4d-link-list-item-cta
+                icon-placement="right"
+                href="www.ibm.com"
+                cta-type="local">
+                cta-copy
+              </c4d-link-list-item-cta>
+            </c4d-link-list>
+          `,
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row-media')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+  });
+
+  describe('Misc attributes - WithFeaturedMedia', function () {
+    it('should render with minimum attributes', async function () {
+      render(WithFeaturedMediaTemplate(), document.body);
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row-media-featured')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+
+    it('should render with various attributes', async function () {
+      render(
+        WithFeaturedMediaTemplate({
+          children: html`
+            <c4d-content-item-row-eyebrow
+              >eyebrow-foo</c4d-content-item-row-eyebrow
+            >
+            <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
+            <c4d-content-item-row-media-copy
+              >copy-foo</c4d-content-item-row-media-copy
+            >
+            <c4d-link-list slot="footer" type="vertical">
+              <c4d-link-list-item-cta
+                icon-placement="right"
+                href="www.ibm.com"
+                cta-type="local">
+                cta-copy
+              </c4d-link-list-item-cta>
+            </c4d-link-list>
+            <c4d-image slot="media" alt="image" default-src=""></c4d-image>
+          `,
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row-media-featured')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+  });
+
+  describe('Misc attributes - WithThumbnail', function () {
+    it('should render with minimum attributes', async function () {
+      render(WithThumbnailTemplate(), document.body);
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+
+    it('should render with various attributes', async function () {
+      render(
+        WithThumbnailTemplate({
+          children: html`
+            <c4d-content-item-heading>heading-foo</c4d-content-item-heading>
+            <c4d-content-item-row-thumbnail-copy
+              >copy-foo</c4d-content-item-row-thumbnail-copy
+            >
+            <c4d-link-list slot="footer" type="vertical">
+              <c4d-link-list-item-cta
+                icon-placement="${ICON_PLACEMENT.RIGHT}"
+                href="www.ibm.com"
+                cta-type="local">
+                cta-copy
+              </c4d-link-list-item-cta>
+            </c4d-link-list>
+            <c4d-image
+              slot="thumbnail"
+              alt="thumbnail-image"
+              default-src=""></c4d-image>
+          `,
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(
+        document.body.querySelector('c4d-content-item-row')
+      ).toMatchSnapshot({ mode: 'shadow' });
+    });
+  });
+
+  afterEach(async function () {
+    await render(undefined!, document.body);
+  });
+});
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-copy.ts
new file mode 100644
index 00000000000..b4b1bb28b4d
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-copy.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentItemCopy from '../content-item/content-item-copy';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import styles from './content-item-row.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The copy content of content item row.
+ *
+ * @element c4d-content-item-row-copy
+ */
+@customElement(`${c4dPrefix}-content-item-row-copy`)
+class C4DContentItemRowCopy extends StableSelectorMixin(C4DContentItemCopy) {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row-copy`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowCopy;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
new file mode 100644
index 00000000000..28afc47219d
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-eyebrow.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './content-item-row.scss';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The eyebrow content of content item row.
+ *
+ * @element c4d-content-item-row-eyebrow
+ */
+@customElement(`${c4dPrefix}-content-item-row-eyebrow`)
+class C4DContentItemRowEyebrow extends StableSelectorMixin(LitElement) {
+  /**
+   * The shadow slot this eyebrow content should be in.
+   */
+  @property({ reflect: true })
+  slot = 'eyebrow';
+
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row-eyebrow`;
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowEyebrow;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
new file mode 100644
index 00000000000..3b334dbeff7
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-copy.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentItemCopy from '../content-item/content-item-copy';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import styles from './content-item-row-media.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The copy content of content item row with media.
+ *
+ * @element c4d-content-item-row-media-copy
+ */
+@customElement(`${c4dPrefix}-content-item-row-media-copy`)
+class C4DContentItemRowMediaCopy extends StableSelectorMixin(
+  C4DContentItemCopy
+) {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row-media-copy`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowMediaCopy;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
new file mode 100644
index 00000000000..ed343121bd1
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-featured.ts
@@ -0,0 +1,51 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentItem from '../content-item/content-item';
+import styles from './content-item-row-media.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * A component to present content in a row orientation with featured
+ * media beneath.
+ *
+ * @element c4d-content-item-row-media-featured
+ */
+@customElement(`${c4dPrefix}-content-item-row-media-featured`)
+class C4DContentItemRowMediaFeatured extends C4DContentItem {
+  render() {
+    return html`
+      <div class="${prefix}--content-item-row__row">
+        <div class="${prefix}--content-item-row__col">
+          <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
+          <slot name="heading"></slot>
+        </div>
+        <div class="${prefix}--content-item-row__col">
+          ${this._renderBody()} ${this._renderFooter()}
+        </div>
+      </div>
+      <div class="${prefix}--content-item-row__row">
+        <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}-content-item-row-media-featured`;
+  }
+
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowMediaFeatured;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
new file mode 100644
index 00000000000..a150f1a9a01
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media-video.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import C4DVideoPlayerContainer from '../video-player/video-player-container';
+import styles from './content-item-row-media.scss';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The video content in row content item with media.
+ *
+ * @element c4d-content-item-row-media-video
+ */
+@customElement(`${c4dPrefix}-content-item-row-media-video`)
+class C4DContentItemRowMediaVideo extends C4DVideoPlayerContainer {
+  /**
+   * The shadow slot this video should be in.
+   */
+  @property({ reflect: true })
+  slot = 'media';
+
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row-media-video`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowMediaVideo;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-media.scss b/packages/web-components/src/components/content-item-row/content-item-row-media.scss
new file mode 100644
index 00000000000..cbf48f7c148
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media.scss
@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use '@carbon/ibmdotcom-styles/scss/components/content-item-row-media';
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-media.ts b/packages/web-components/src/components/content-item-row/content-item-row-media.ts
new file mode 100644
index 00000000000..394987bb517
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-media.ts
@@ -0,0 +1,103 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { TemplateResult, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { baseFontSize, breakpoints } from '@carbon/layout';
+import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
+import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings.js';
+import C4DContentItem from '../content-item/content-item';
+import styles from './content-item-row-media.scss';
+
+import { MEDIA_ALIGN } from './defs';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+const breakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
+
+/**
+ * A component to present content in a row orientation with media.
+ *
+ * @element c4d-content-item-row-media
+ */
+@customElement(`${c4dPrefix}-content-item-row-media`)
+class C4DContentItemRowMedia extends HostListenerMixin(C4DContentItem) {
+  /**
+   * Defines the alignment of the media: `left` or `right`
+   */
+  @property({ reflect: true })
+  align = MEDIA_ALIGN.RIGHT;
+
+  /**
+   * Identifies whether the window width is below the breakpoint or not.
+   */
+  @state()
+  _isOneColumn: boolean = window.innerWidth < breakpoint;
+
+  @HostListener('window:resize')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  private _handleWindowResize = (): void => {
+    this._isOneColumn = window.innerWidth < breakpoint;
+  };
+
+  /**
+   * @returns The text column content.
+   */
+  protected _renderTextCol(): TemplateResult | string | void {
+    return html`
+      <div class="${prefix}--content-item-row__col">
+        <slot name="eyebrow" @slotchange="${this._handleSlotChange}"></slot>
+        <slot name="heading"></slot>
+        ${this._renderBody()} ${this._renderFooter()}
+      </div>
+    `;
+  }
+
+  /**
+   * @returns The component content in the appropriate tabbing order.
+   */
+  protected _renderContent(): TemplateResult | string | void {
+    const alignedRight = this._isOneColumn || this.align === MEDIA_ALIGN.RIGHT;
+
+    return alignedRight
+      ? html`
+          ${this._renderTextCol()}
+          <div class="${prefix}--content-item-row__col">
+            <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+        `
+      : html`
+          <div class="${prefix}--content-item-row__col">
+            <slot name="media" @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+          ${this._renderTextCol()}
+        `;
+  }
+
+  render() {
+    return html`
+      <div
+        class="${prefix}--content-item-row__row ${prefix}--content-item-row-media__align-${this
+          .align}">
+        ${this._renderContent()}
+      </div>
+    `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row-media`;
+  }
+
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowMedia;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts b/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts
new file mode 100644
index 00000000000..7b3570f61b5
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row-thumbnail-copy.ts
@@ -0,0 +1,40 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentItemCopy from '../content-item/content-item-copy';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import styles from './content-item-row.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The copy content of content item row with thumbnail.
+ *
+ * @element c4d-content-item-row-thumbnail-copy
+ */
+@customElement(`${c4dPrefix}-content-item-row-thumbnail-copy`)
+class C4DContentItemRowThumbnailCopy extends StableSelectorMixin(
+  C4DContentItemCopy
+) {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row-thumbnail-copy`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRowThumbnailCopy;
diff --git a/packages/web-components/src/components/content-item-row/content-item-row.scss b/packages/web-components/src/components/content-item-row/content-item-row.scss
new file mode 100644
index 00000000000..0d8aa302f01
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row.scss
@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use '@carbon/ibmdotcom-styles/scss/components/content-item-row';
diff --git a/packages/web-components/src/components/content-item-row/content-item-row.ts b/packages/web-components/src/components/content-item-row/content-item-row.ts
new file mode 100644
index 00000000000..183bc2407ed
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/content-item-row.ts
@@ -0,0 +1,79 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { TemplateResult, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentItem from '../content-item/content-item';
+import styles from './content-item-row.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * A component to present a content in a row orientation.
+ *
+ * @element c4d-content-item-row
+ */
+@customElement(`${c4dPrefix}-content-item-row`)
+class C4DContentItemRow extends C4DContentItem {
+  /**
+   * Determines whether to render the thumbnail variant
+   */
+  @property({ type: Boolean })
+  thumbnail = false;
+
+  /**
+   * @returns The body content.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderMedia(): TemplateResult | string | void {
+    return html` <slot name="media"></slot> `;
+  }
+
+  render() {
+    return html`
+      ${!this.thumbnail
+        ? html`
+            <div class="${prefix}--content-item-row__heading-wrapper">
+              <slot
+                name="eyebrow"
+                @slotchange="${this._handleSlotChange}"></slot>
+              <slot name="heading"></slot>
+            </div>
+            <div class="${prefix}--content-item-row__content-wrapper">
+              ${this._renderBody()}${this._renderFooter()}${this._renderMedia()}
+            </div>
+          `
+        : html`
+            <div class="${prefix}--content-item-row__body-wrapper">
+              <div class="${prefix}--content-item-row__heading-wrapper">
+                <slot name="heading"></slot>
+              </div>
+              <div class="${prefix}--content-item-row__content-wrapper">
+                ${this._renderBody()}${this._renderFooter()}
+              </div>
+            </div>
+            <div class="${prefix}--content-item-row__col--2">
+              <slot name="thumbnail" @slotchange="${this._handleSlotChange}">
+              </slot>
+            </div>
+          `}
+    `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--content-item-row`;
+  }
+
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DContentItemRow;
diff --git a/packages/web-components/src/components/content-item-row/defs.ts b/packages/web-components/src/components/content-item-row/defs.ts
new file mode 100644
index 00000000000..3aee6c7ec1d
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/defs.ts
@@ -0,0 +1,38 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+
+/**
+ * Media align.
+ */
+export enum MEDIA_ALIGN {
+  /**
+   * Content item row media align left
+   */
+  LEFT = 'left',
+
+  /**
+   * Content item row media align right
+   */
+  RIGHT = 'right',
+}
+
+/**
+ * Media type.
+ */
+export enum MEDIA_TYPE {
+  /**
+   * Content item row media type image
+   */
+  IMAGE = 'image',
+
+  /**
+   * Content item row media type video
+   */
+  VIDEO = 'video',
+}
diff --git a/packages/web-components/src/components/content-item-row/index.ts b/packages/web-components/src/components/content-item-row/index.ts
new file mode 100644
index 00000000000..9b88e3270fd
--- /dev/null
+++ b/packages/web-components/src/components/content-item-row/index.ts
@@ -0,0 +1,20 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 './content-item-row';
+import './content-item-row-copy';
+import './content-item-row-eyebrow';
+import './content-item-row-media';
+import './content-item-row-media-copy';
+import './content-item-row-media-video';
+import './content-item-row-thumbnail-copy';
+import './content-item-row-media-featured';
+import '../content-item/content-item-heading';
+import '../cta/index';
+import '../link-list/link-list';
diff --git a/packages/web-components/src/components/content-item/__stories__/README.stories.mdx b/packages/web-components/src/components/content-item/__stories__/README.stories.mdx
index 745bd08952e..96f60ce1b68 100644
--- a/packages/web-components/src/components/content-item/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-item/__stories__/README.stories.mdx
@@ -3,11 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
-# `<dds-content-item>`
+# `<c4d-content-item>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-item)
@@ -32,26 +28,157 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/index.js';
 ### HTML
 
 ```html
-<dds-content-item>
-  <dds-content-item-heading>Heading</dds-content-item-heading>
-  <dds-content-item-copy>Copy</dds-content-item-copy>
-  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com"> CTA text</dds-text-cta>
-</dds-content-item>
+<c4d-content-item>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
+```
+
+### HTML (with statistics)
+
+```html
+<c4d-content-item>
+  <span slot="statistics">10%</span>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
+```
+
+### HTML (with pictogram)
+
+```html
+<c4d-content-item>
+  <svg
+  slot="media"
+  focusable="false"
+  preserveAspectRatio="xMidYMid meet"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke="currentColor"
+  data-autoid="c4d--pictogram-item__pictogram"
+  aria-label="Pictogram description"
+  width="48"
+  height="48"
+  viewBox="0 0 48 48"
+  role="img"
+  class="cds--pictogram-item__pictogram">
+  <path
+    fill="none"
+    stroke-linejoin="round"
+    stroke-miterlimit="10"
+    stroke-width="1.10581"
+    d="M 44.211009,36.137939 H 3.7889912 c -1.7101623,0 -3.10938596,-1.365518
+          -3.10938596,-3.034485 V 7.3103341 c 0,-1.6689666 1.39922366,-3.0344847 3.10938596,-3.0344847 H 44.211009 c 1.710162,0
+          3.109386,1.3655181 3.109386,3.0344847 V 33.103454 c 0,1.668967 -1.399224,3.034485 -3.109386,3.034485 z m
+          -31.09386,7.586212 H 34.882851 M 24,36.137939 v 7.586212 M 0.67960524,28.551727 H 47.320395" />
+</svg>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
+```
+### JS (with media)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/video-player/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['content-item'] })}`} />
+
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<c4d-content-item>
+  <c4d-image
+    slot="media"
+    alt="Alt image text"
+    default-src="../image.png">
+  </c4d-image>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
+<c4d-content-item>
+  <c4d-video-player-container
+    slot="media"
+    video-id="0_ibuqxqbe"
+    hide-caption>
+  </c4d-video-player-container>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
+```
+
+### JS (with logo)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/content-item/index.js';
+import '@carbon/ibmdotcom-web-components/es/components/image/image-logo.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['content-item'] })}`} />
+
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<c4d-content-item>
+  <c4d-image-logo
+    slot="image"
+    alt="Image logo alt text"
+    default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"></c4d-image-logo>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
+<c4d-content-item>
+  <c4d-video-player-container
+    slot="media"
+    video-id="0_ibuqxqbe"
+    hide-caption>
+  </c4d-video-player-container>
+  <c4d-content-item-heading>Heading</c4d-content-item-heading>
+  <c4d-content-item-copy>Copy</c4d-content-item-copy>
+  <c4d-link-with-icon slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</c4d-link-with-icon
+  >
+</c4d-content-item>
 ```
 
 ## Props
 
-<Props of="dds-content-item" />
+<Props of="c4d-content-item" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector      | Compatibility selector                     | Description |
 | ---------------------------- | ------------------------------------------ | ----------- |
-| `<dds-content-item>`         | `data-autoid="dds--content-item"`          | Component   |
-| `<dds-content-item-copy>`    | `data-autoid="dds--content-item__copy"`    | Component   |
-| `<dds-content-item-heading>` | `data-autoid="dds--content-item__heading"` | Component   |
+| `<c4d-content-item>`         | `data-autoid="c4d--content-item"`          | Component   |
+| `<c4d-content-item-copy>`    | `data-autoid="c4d--content-item__copy"`    | Component   |
+| `<c4d-content-item-heading>` | `data-autoid="c4d--content-item__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx
index 374c88c798b..765c1cb3911 100644
--- a/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-item/__stories__/README.stories.react.mdx
@@ -23,25 +23,147 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 
 const App = () => (
-  <DDSContentItem>
-    <DDSContentItemHeading>Heading</DDSContentItemHeading>
-    <DDSContentItemCopy>Copy</DDSContentItemCopy>
-    <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+  <C4DContentItem>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
       CTA text
-    </DDSTextCTA>
-  </DDSContentItem>
+    </C4DLinkWithIcon>
+  </C4DContentItem>
+);
+```
+
+### JS (with statistics)
+
+```javascript
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+
+const App = () => (
+  <C4DContentItem>
+    <span slot="statistics">10%</span>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
+      CTA text
+    </C4DLinkWithIcon>
+  </C4DContentItem>
+);
+```
+
+### JS (with pictogram)
+
+```javascript
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+
+const App = () => (
+  <C4DContentItem>
+    <svg
+      slot="media"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      stroke="currentColor"
+      data-autoid="c4d--pictogram-item__pictogram"
+      aria-label="Pictogram description"
+      width="48"
+      height="48"
+      viewBox="0 0 48 48"
+      role="img"
+      class="cds--pictogram-item__pictogram">
+      <path
+        fill="none"
+        stroke-linejoin="round"
+        stroke-miterlimit="10"
+        stroke-width="1.10581"
+        d="M 44.211009,36.137939 H 3.7889912 c -1.7101623,0 -3.10938596,-1.365518
+              -3.10938596,-3.034485 V 7.3103341 c 0,-1.6689666 1.39922366,-3.0344847 3.10938596,-3.0344847 H 44.211009 c 1.710162,0
+              3.109386,1.3655181 3.109386,3.0344847 V 33.103454 c 0,1.668967 -1.399224,3.034485 -3.109386,3.034485 z m
+              -31.09386,7.586212 H 34.882851 M 24,36.137939 v 7.586212 M 0.67960524,28.551727 H 47.320395" />
+    </svg>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
+      CTA text
+    </C4DLinkWithIcon>
+  </C4DContentItem>
+);
+```
+
+### JS (with media)
+
+```javascript
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/index';
+
+const App = () => (
+  <C4DContentItem>
+    <C4DImage
+      slot="media"
+      alt="Alt image text"
+      default-src="../image.png"></C4DImage>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
+      CTA text
+    </C4DLinkWithIcon>
+  </C4DContentItem>
+  <C4DContentItem>
+    <C4DVideoPlayerContainer
+      slot="media"
+      video-id="0_ibuqxqbe"
+      hide-caption></C4DVideoPlayerContainer>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
+      CTA text
+    </C4DLinkWithIcon>
+  </C4DContentItem>
+);
+```
+
+### JS (with logo)
+
+```javascript
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/image/image-logo';
+
+const App = () => (
+  <C4DContentItem>
+    <C4DImageLogo
+      slot="media"
+      alt="Image logo alt text"
+      default-src="https://fpoimg.com/320x160?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageLogo>
+    <C4DContentItemHeading>Heading</C4DContentItemHeading>
+    <C4DContentItemCopy>Copy</C4DContentItemCopy>
+    <C4DLinkWithIcon slot="footer" cta-type="local" href="https://www.example.com">
+      CTA text
+    </C4DLinkWithIcon>
+  </C4DContentItem>
 );
 ```
 
 ## Props
 
-<Props of="dds-content-item" />
+<Props of="c4d-content-item" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -52,8 +174,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector      | Compatibility selector                     | Description |
 | ---------------------------- | ------------------------------------------ | ----------- |
-| `<dds-content-item>`         | `data-autoid="dds--content-item"`          | Component   |
-| `<dds-content-item-copy>`    | `data-autoid="dds--content-item__copy"`    | Component   |
-| `<dds-content-item-heading>` | `data-autoid="dds--content-item__heading"` | Component   |
+| `<c4d-content-item>`         | `data-autoid="c4d--content-item"`          | Component   |
+| `<c4d-content-item-copy>`    | `data-autoid="c4d--content-item__copy"`    | Component   |
+| `<c4d-content-item-heading>` | `data-autoid="c4d--content-item__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx b/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx
index 42b7fa4d333..be391ccc880 100644
--- a/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx
+++ b/packages/web-components/src/components/content-item/__stories__/content-item.stories.react.tsx
@@ -12,57 +12,188 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DContentItem from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DImageLogo from '@carbon/ibmdotcom-web-components/es/components-react/card/image-logo';
+
+import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--001.jpg';
+import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png';
 
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.react.mdx';
 
-export const Default = args => {
-  const { heading, media, copy, showCopy, ctaStyle, ctaCopy } = args?.ContentItem ?? {};
+const contentItemTypeOptions = {
+  Text: 'text',
+  Statistics: 'statistics',
+  Pictogram: 'pictogram',
+  Media: 'media',
+  Logo: 'logo',
+};
+
+const app = 
+<svg 
+  //@ts-ignore
+  slot="media"
+  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
+      <defs>
+        <linearGradient
+          id="A"
+          x1="646.29"
+          x2="659.58"
+          y1="1117.53"
+          y2="1135.58"
+          gradientTransform="matrix(.83118 .556 .27244 -.40728 -841.69 103.15)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.3"></stop>
+          <stop offset="1" stopOpacity="0"></stop>
+        </linearGradient>
+        <linearGradient
+          id="B"
+          x1="-925.17"
+          x2="-914.09"
+          y1="-1066.96"
+          y2="-1051.91"
+          gradientTransform="rotate(146.22 -537.793 -106.967) scale(1 .49)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.3"></stop>
+          <stop offset="0.9" stopOpacity="0"></stop>
+        </linearGradient>
+        <linearGradient
+          id="C"
+          x1="-6341.42"
+          x2="-6328.12"
+          y1="19700.69"
+          y2="19718.74"
+          gradientTransform="rotate(-146.22 -1683.193 -5807.885) scale(1 -.49)"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.32"></stop>
+          <stop offset="0.35" stopOpacity="0.8"></stop>
+          <stop offset="0.7" stopOpacity="0"></stop>
+        </linearGradient>
+        <mask
+          id="D"
+          width="32"
+          height="32"
+          x="0"
+          y="0"
+          maskUnits="userSpaceOnUse"
+        >
+          <g strokeWidth="0">
+            <path
+              fill="#fff"
+              d="M16 1C12.07 1 8.3 2.53 5.5 5.29l1.4 1.43C9.33 4.33 12.59 3 16 3.01c.98 0 1.93.11 2.84.32-3.4.92-5.92 4.03-5.92 7.72a7.95 7.95 0 00.33 2.25c-.71-.21-1.45-.31-2.19-.31-3.7 0-6.82 2.53-7.73 5.96-.23-.96-.34-1.94-.35-2.93 0-2.12.49-4.13 1.46-6L2.67 9.1a15.02 15.02 0 00-1.69 6.92c0 8.27 6.73 15 15 15 3.95 0 7.68-1.52 10.5-4.29l-1.4-1.43a12.904 12.904 0 01-9.1 3.71 12.98 12.98 0 01-9.31-3.94 5.98 5.98 0 01-1.62-4.09c0-3.31 2.69-6 6-6 3.32 0 6 2.7 6 6.01a5.67 5.67 0 01-.1 1.09l1.97.37a7.98 7.98 0 00-.19-3.73 8.1 8.1 0 002.19.31c3.71 0 6.83-2.54 7.73-5.97.22.95.34 1.93.34 2.94 0 2.12-.49 4.13-1.46 5.99l1.77.92a15.02 15.02 0 001.69-6.92c0-8.27-6.73-15-15-15zm4.93 16.03c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"
+            ></path>
+            <path fill="url(#A)" d="M8 9L0 0h16l2.31 3.3L8 9z"></path>
+            <path fill="url(#B)" d="M12 31l4.39-9L6 21 2 31h10z"></path>
+            <path fill="url(#C)" d="M24 23l8 9H16l-2.3-3.31L24 23z"></path>
+            <path d="M16 31h-4.28L15 22h2l-1 9z"></path>
+          </g>
+        </mask>
+        <linearGradient
+          id="E"
+          x1="0"
+          x2="32"
+          y1="32"
+          y2="0"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop offset="0.1" stopColor="#a56eff"></stop>
+          <stop offset="0.9" stopColor="#0f62fe"></stop>
+        </linearGradient>
+      </defs>
+      <g mask="url(#D)">
+        <path fill="url(#E)" d="M0 0h32v32H0V0z"></path>
+      </g>
+      <g fill="#001d6c">
+        <circle cx="6" cy="6" r="2"></circle>
+        <circle cx="26" cy="26" r="2"></circle>
+        <path d="M16 31c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.65 0-3 1.35-3 3s1.35 3 3 3 3-1.35 3-3-1.35-3-3-3z"></path>
+      </g>
+    </svg>
+const pictogram = <svg
+ // @ts-ignore
+  slot="media"
+  xmlns="http://www.w3.org/2000/svg"
+  width="48"
+  height="48"
+  stroke="currentColor"
+  ariaLabel="Pictogram description"
+  className="cds--pictogram-item__pictogram"
+  data-autoid="c4d--pictogram-item__pictogram"
+  viewBox="0 0 48 48"
+>
+  <path
+    fill="none"
+    strokeLinejoin="round"
+    strokeMiterlimit="10"
+    strokeWidth="1.106"
+    d="M44.211 36.138H3.789c-1.71 0-3.11-1.366-3.11-3.035V7.31c0-1.669 1.4-3.034 3.11-3.034h40.422c1.71 0 3.11 1.365 3.11 3.034v25.793c0 1.67-1.4 3.035-3.11 3.035zm-31.094 7.586h21.766M24 36.138v7.586M.68 28.552h46.64"
+  ></path>
+</svg>;
+
+export const Default = (args) => {
+  const {
+    type,
+    heading,
+    horizontal,
+    mediaType,
+    pictogramType,
+    copy,
+    showCopy,
+    ctaCopy,
+  } = args?.ContentItem ?? {};
   return (
-    <DDSContentItem>
-      {media === 'image' ? (
-        <DDSImage slot="media" alt="Alt image text" default-src={imgLg16x9} heading="Image caption text"></DDSImage>
-      ) : (
-        ''
-      )}
-      {media === 'video' ? <DDSVideoPlayerContainer slot="media" video-id="1_9h94wo6b"></DDSVideoPlayerContainer> : ''}
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      {showCopy ? <DDSContentItemCopy>{copy}</DDSContentItemCopy> : ''}
-      {ctaStyle === 'text' ? (
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">
-          {ctaCopy}
-        </DDSTextCTA>
-      ) : (
-        ''
-      )}
-      {ctaStyle === 'button' ? (
-        <DDSButtonCTA slot="footer" cta-type="local" href="https://www.example.com">
+    <C4DContentItem horizontal={horizontal || undefined}>
+      {type === 'statistics' ? <span slot="statistics">10%</span> : ``}
+      {type === 'pictogram' ? pictogramType === 'pictogram'
+        ? pictogram
+        : pictogramType === 'app icon'
+        ? app
+        : ``
+        : ``}
+      {type === 'media'
+        ? mediaType === 'image'
+          ? (
+        <C4DImage
+          slot="media"
+          alt="Alt image text"
+          default-src={imgLg1x1}></C4DImage>
+      ) : mediaType === 'video' ? (
+        <C4DVideoPlayerContainer
+          slot="media"
+          video-id="0_ibuqxqbe" hide-caption></C4DVideoPlayerContainer>
+      ) : `` : ``}
+      {type === 'logo' ? (
+        <C4DImageLogo alt="Microsoft logo" slot="media" default-src={logoMicrosoft2x1}></C4DImageLogo>
+        ) : ``}
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      {showCopy ? <C4DContentItemCopy>{copy}</C4DContentItemCopy> : ''}
+        <C4DLinkWithIcon
+          slot="footer"
+          cta-type="local"
+          href="https://www.example.com">
           {ctaCopy}
-        </DDSButtonCTA>
-      ) : (
-        ''
-      )}
-    </DDSContentItem>
+        </C4DLinkWithIcon>
+    </C4DContentItem>
   );
 };
 
 export default {
   title: 'Components/Content item',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
-          <div className="bx--grid">
-            <div className="bx--row">
-              <div className="bx--col-sm-4 bx--col-lg-10">{story()}</div>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <div className="cds--col-sm-4 cds--col-lg-8">{story()}</div>
             </div>
           </div>
         </>
@@ -73,31 +204,37 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      ContentItem: () => ({
-        heading: textNullable('Heading:', 'Natural language understanding'),
-        media: select('Media type:', ['none', 'image', 'video'], 'none'),
-        showCopy: boolean('Copy:', true),
-        copy:
-          'This area of NLP takes "real world" text and applies a symbolic ' +
-          'system for a machine to interpret its meaning, using formal logic; structures ' +
-          'that describe the various relationships between concepts (ontologies); and other semantic tools.',
-        ctaStyle: select('CTA style:', ['text', 'button'], 'text'),
-        ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'),
-      }),
-    },
-    propsSet: {
-      default: {
-        ContentItem: {
-          heading: 'Natural language understanding',
-          media: 'none',
-          showCopy: true,
+      ContentItem: () => {
+        const type = select(
+          'Content item type',
+          contentItemTypeOptions,
+          contentItemTypeOptions.Text
+        );
+        const mediaType =
+          type === 'media'
+            ? select('Media type:', ['image', 'video'], 'image')
+            : '';
+        const pictogramType =
+          type === 'pictogram'
+            ? select('Pictogram type', ['pictogram', 'app icon'], 'pictogram')
+            : '';
+        const horizontal =
+          type === 'pictogram' || mediaType === 'image'
+            ? boolean('Horizontal', false)
+            : '';
+        return {
+          type,
+          mediaType,
+          pictogramType,
+          horizontal,
+          heading: textNullable('Heading:', 'Natural language understanding'),
+          showCopy: boolean('Copy:', true),
           copy:
             'This area of NLP takes "real world" text and applies a symbolic ' +
             'system for a machine to interpret its meaning, using formal logic; structures ' +
             'that describe the various relationships between concepts (ontologies); and other semantic tools.',
-          ctaStyle: 'text',
-          ctaCopy: 'Learn more about NLP',
-        },
+          ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'),
+        };
       },
     },
   },
diff --git a/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts b/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts
index b9610dce160..33840356bf1 100644
--- a/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts
+++ b/packages/web-components/src/components/content-item/__stories__/content-item.stories.ts
@@ -1,66 +1,184 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
 import '../index';
 import { select, boolean } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
+import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--001.jpg';
+import logoMicrosoft2x1 from '../../../../../storybook-images/assets/logos/logo-microsoft--2x1.png';
+
+const contentItemTypeOptions = {
+  Text: 'text',
+  Statistics: 'statistics',
+  Pictogram: 'pictogram',
+  Media: 'media',
+  Logo: 'logo',
+};
+
+const app = html`
+  <svg
+    slot="media"
+    xmlns="http://www.w3.org/2000/svg"
+    xmlns:v="https://vecta.io/nano"
+    viewBox="0 0 32 32">
+    <defs>
+      <linearGradient
+        id="A"
+        x1="646.29"
+        y1="1117.53"
+        x2="659.58"
+        y2="1135.58"
+        gradientTransform="translate(-841.69 103.15) rotate(33.78) scale(1 -.49)"
+        gradientUnits="userSpaceOnUse">
+        <stop offset=".3" />
+        <stop offset="1" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="B"
+        x1="-925.17"
+        y1="-1066.96"
+        x2="-914.09"
+        y2="-1051.91"
+        gradientTransform="translate(-1044.27 103.14) rotate(146.22) scale(1 .49)"
+        gradientUnits="userSpaceOnUse">
+        <stop offset=".3" />
+        <stop offset=".9" stop-opacity="0" />
+      </linearGradient>
+      <linearGradient
+        id="C"
+        x1="-6341.42"
+        y1="19700.69"
+        x2="-6328.12"
+        y2="19718.74"
+        gradientTransform="translate(146.99 -11571.14) rotate(-146.22) scale(1 -.49)"
+        gradientUnits="userSpaceOnUse">
+        <stop offset=".32" />
+        <stop offset=".35" stop-opacity=".8" />
+        <stop offset=".7" stop-opacity="0" />
+      </linearGradient>
+      <mask
+        id="D"
+        x="0"
+        y="0"
+        width="32"
+        height="32"
+        maskUnits="userSpaceOnUse">
+        <g stroke-width="0">
+          <path
+            d="M16 1C12.07 1 8.3 2.53 5.5 5.29l1.4 1.43C9.33 4.33 12.59 3 16 3.01c.98 0 1.93.11 2.84.32-3.4.92-5.92 4.03-5.92 7.72a7.95 7.95 0 0 0 .33 2.25c-.71-.21-1.45-.31-2.19-.31-3.7 0-6.82 2.53-7.73 5.96-.23-.96-.34-1.94-.35-2.93 0-2.12.49-4.13 1.46-6L2.67 9.1a15.02 15.02 0 0 0-1.69 6.92c0 8.27 6.73 15 15 15 3.95 0 7.68-1.52 10.5-4.29l-1.4-1.43c-2.43 2.39-5.69 3.72-9.1 3.71a12.98 12.98 0 0 1-9.31-3.94 5.98 5.98 0 0 1-1.62-4.09c0-3.31 2.69-6 6-6 3.32 0 6 2.7 6 6.01a5.67 5.67 0 0 1-.1 1.09l1.97.37a7.98 7.98 0 0 0-.19-3.73 8.1 8.1 0 0 0 2.19.31c3.71 0 6.83-2.54 7.73-5.97.22.95.34 1.93.34 2.94 0 2.12-.49 4.13-1.46 5.99l1.77.92a15.02 15.02 0 0 0 1.69-6.92c0-8.27-6.73-15-15-15zm4.93 16.03c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"
+            fill="#fff" />
+          <path d="M8 9L0 0h16l2.31 3.3L8 9z" fill="url(#A)" />
+          <path d="M12 31l4.39-9L6 21 2 31h10z" fill="url(#B)" />
+          <path d="M24 23l8 9H16l-2.3-3.31L24 23z" fill="url(#C)" />
+          <path d="M16 31h-4.28L15 22h2l-1 9z" />
+        </g>
+      </mask>
+      <linearGradient
+        id="E"
+        x1="0"
+        y1="32"
+        x2="32"
+        y2="0"
+        gradientUnits="userSpaceOnUse">
+        <stop offset=".1" stop-color="#a56eff" />
+        <stop offset=".9" stop-color="#0f62fe" />
+      </linearGradient>
+    </defs>
+    <g mask="url(#D)"><path d="m0,0h32v32H0V0Z" fill="url(#E)" /></g>
+    <g fill="#001d6c">
+      <circle cx="6" cy="6" r="2" />
+      <circle cx="26" cy="26" r="2" />
+      <path
+        d="m16,31c-2.76,0-5-2.24-5-5s2.24-5,5-5,5,2.24,5,5-2.24,5-5,5Zm0-8c-1.65,0-3,1.35-3,3s1.35,3,3,3,3-1.35,3-3-1.35-3-3-3Z" />
+    </g>
+  </svg>
+`;
+
+const pictogram = html` <svg
+  slot="media"
+  focusable="false"
+  preserveAspectRatio="xMidYMid meet"
+  xmlns="http://www.w3.org/2000/svg"
+  stroke="currentColor"
+  data-autoid="c4d--pictogram-item__pictogram"
+  aria-label="Pictogram description"
+  width="48"
+  height="48"
+  viewBox="0 0 48 48"
+  role="img"
+  class="cds--pictogram-item__pictogram">
+  <path
+    fill="none"
+    stroke-linejoin="round"
+    stroke-miterlimit="10"
+    stroke-width="1.10581"
+    d="M 44.211009,36.137939 H 3.7889912 c -1.7101623,0 -3.10938596,-1.365518
+          -3.10938596,-3.034485 V 7.3103341 c 0,-1.6689666 1.39922366,-3.0344847 3.10938596,-3.0344847 H 44.211009 c 1.710162,0
+          3.109386,1.3655181 3.109386,3.0344847 V 33.103454 c 0,1.668967 -1.399224,3.034485 -3.109386,3.034485 z m
+          -31.09386,7.586212 H 34.882851 M 24,36.137939 v 7.586212 M 0.67960524,28.551727 H 47.320395" />
+</svg>`;
 
 export const Default = (args) => {
-  const { heading, media, copy, showCopy, ctaStyle, ctaCopy } =
-    args?.ContentItem ?? {};
+  const {
+    type,
+    heading,
+    horizontal,
+    mediaType,
+    pictogramType,
+    copy,
+    showCopy,
+    ctaCopy,
+  } = args?.ContentItem ?? {};
   return html`
-    <dds-content-item>
-      ${media === 'image'
-        ? html`
-            <dds-image
-              slot="media"
-              alt="Alt image text"
-              default-src="${imgLg16x9}"
-              heading="Image caption text"></dds-image>
-          `
+    <c4d-content-item ?horizontal=${horizontal}>
+      ${type === 'statistics' ? html`<span slot="statistics">10%</span>` : ``}
+      ${type === 'pictogram'
+        ? pictogramType === 'pictogram'
+          ? pictogram
+          : pictogramType === 'app icon'
+          ? app
+          : ``
         : ``}
-      ${media === 'video'
-        ? html`
-            <dds-video-player-container
+      ${type === 'media'
+        ? mediaType === 'image'
+          ? html`
+              <c4d-image
+                slot="media"
+                alt="Alt image text"
+                default-src="${imgLg1x1}"></c4d-image>
+            `
+          : mediaType === 'video'
+          ? html`<c4d-video-player-container
               slot="media"
-              video-id="1_9h94wo6b"></dds-video-player-container>
-          `
-        : ''}
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      ${showCopy
-        ? html` <dds-content-item-copy>${copy}</dds-content-item-copy> `
+              video-id="0_ibuqxqbe"
+              hide-caption></c4d-video-player-container>`
+          : ``
         : ``}
-      ${ctaStyle === 'text'
-        ? html`
-            <dds-text-cta
-              slot="footer"
-              cta-type="local"
-              icon-placement="right"
-              href="https://www.example.com"
-              >${ctaCopy}</dds-text-cta
-            >
-          `
+      ${type === 'logo'
+        ? html` <c4d-image-logo
+            alt="Microsoft logo"
+            slot="media"
+            default-src="${logoMicrosoft2x1}"></c4d-image-logo>`
         : ``}
-      ${ctaStyle === 'button'
-        ? html`
-            <dds-button-cta
-              slot="footer"
-              cta-type="local"
-              href="https://www.example.com"
-              >${ctaCopy}</dds-button-cta
-            >
-          `
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      ${showCopy
+        ? html` <c4d-content-item-copy>${copy}</c4d-content-item-copy> `
         : ``}
-    </dds-content-item>
+      <c4d-link-with-icon
+        slot="footer"
+        cta-type="local"
+        href="https://www.example.com"
+        >${ctaCopy}</c4d-link-with-icon
+      >
+    </c4d-content-item>
   `;
 };
 
@@ -68,10 +186,10 @@ export default {
   title: 'Components/Content item',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-lg-10">
-            <dds-video-container> ${story()} </dds-video-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--col-lg-8">
+            <c4d-video-container> ${story()} </c4d-video-container>
           </div>
         </div>
       </div>
@@ -81,17 +199,38 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      ContentItem: () => ({
-        heading: textNullable('Heading:', 'Natural language understanding'),
-        media: select('Media type:', ['none', 'image', 'video'], 'none'),
-        showCopy: boolean('Copy:', true),
-        copy:
-          'This area of NLP takes "real world" text and applies a symbolic ' +
-          'system for a machine to interpret its meaning, using formal logic; structures ' +
-          'that describe the various relationships between concepts (ontologies); and other semantic tools.',
-        ctaStyle: select('CTA style:', ['text', 'button'], 'text'),
-        ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'),
-      }),
+      ContentItem: () => {
+        const type = select(
+          'Content item type',
+          contentItemTypeOptions,
+          contentItemTypeOptions.Text
+        );
+        const mediaType =
+          type === 'media'
+            ? select('Media type:', ['image', 'video'], 'image')
+            : '';
+        const pictogramType =
+          type === 'pictogram'
+            ? select('Pictogram type', ['pictogram', 'app icon'], 'pictogram')
+            : '';
+        const horizontal =
+          type === 'pictogram' || mediaType === 'image'
+            ? boolean('Horizontal', false)
+            : '';
+        return {
+          type,
+          mediaType,
+          pictogramType,
+          horizontal,
+          heading: textNullable('Heading:', 'Natural language understanding'),
+          showCopy: boolean('Copy:', true),
+          copy:
+            'This area of NLP takes "real world" text and applies a symbolic ' +
+            'system for a machine to interpret its meaning, using formal logic; structures ' +
+            'that describe the various relationships between concepts (ontologies); and other semantic tools.',
+          ctaCopy: textNullable('CTA copy:', 'Learn more about NLP'),
+        };
+      },
     },
     propsSet: {
       default: {
diff --git a/packages/web-components/src/components/content-item/__tests__/content-item.test.ts b/packages/web-components/src/components/content-item/__tests__/content-item.test.ts
index 8c30105a869..85ecdae97de 100644
--- a/packages/web-components/src/components/content-item/__tests__/content-item.test.ts
+++ b/packages/web-components/src/components/content-item/__tests__/content-item.test.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { BASIC_COLOR_SCHEME } from '../../../globals/defs';
 import '../content-item';
 import '../content-item-copy';
@@ -16,18 +16,18 @@ import '../content-item-copy';
 const template = (props?) => {
   const { colorScheme, children } = props ?? {};
   return html`
-    <dds-content-item color-scheme="${ifNonNull(colorScheme)}">
+    <c4d-content-item color-scheme="${ifDefined(colorScheme)}">
       ${children}
-    </dds-content-item>
+    </c4d-content-item>
   `;
 };
 
-describe('dds-content-item', function () {
+describe('c4d-content-item', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-content-item')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-content-item')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -37,20 +37,20 @@ describe('dds-content-item', function () {
         template({
           colorScheme: BASIC_COLOR_SCHEME.INVERSE,
           children: html`
-            <dds-video-player
+            <c4d-video-player
               slot="media"
               duration="90"
-              name="name-foo"></dds-video-player>
-            <dds-content-item-copy>copy-foo</dds-content-item-copy>
-            <dds-text-cta slot="footer" cta-type="local">copy-foo</dds-text-cta>
+              name="name-foo"></c4d-video-player>
+            <c4d-content-item-copy>copy-foo</c4d-content-item-copy>
+            <c4d-text-cta slot="footer" cta-type="local">copy-foo</c4d-text-cta>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-content-item>`
+      await Promise.resolve(); // The update cycle of `<c4d-content-item>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
-      expect(document.body.querySelector('dds-content-item')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-content-item')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/content-item/content-item-copy.ts b/packages/web-components/src/components/content-item/content-item-copy.ts
index 605a35bde8e..da9d837c13e 100644
--- a/packages/web-components/src/components/content-item/content-item-copy.ts
+++ b/packages/web-components/src/components/content-item/content-item-copy.ts
@@ -6,39 +6,45 @@
  * 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 { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSMarkdown from '../markdown/markdown';
+import C4DMarkdown from '../markdown/markdown';
 import './content-item-paragraph';
 import styles from './content-item.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The copy content of content item.
  *
- * @element dds-content-item-copy
+ * @element c4d-content-item-copy
  */
-@customElement(`${ddsPrefix}-content-item-copy`)
-class DDSContentItemCopy extends StableSelectorMixin(DDSMarkdown) {
+@customElement(`${c4dPrefix}-content-item-copy`)
+class C4DContentItemCopy extends StableSelectorMixin(C4DMarkdown) {
   protected get _customTags() {
     const tags = new Set(super._customTags);
-    tags.add(`${ddsPrefix}-content-item-paragraph`);
+    tags.add(`${c4dPrefix}-content-item-paragraph`);
     return tags;
   }
 
   protected get _renderer() {
+    this.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        this.removeChild(node);
+      }
+    });
+
     return Object.assign(super._renderer, {
       paragraph(text) {
-        return `<${ddsPrefix}-content-item-paragraph>${text}</${ddsPrefix}-content-item-paragraph>`;
+        return `<${c4dPrefix}-content-item-paragraph>${text}</${c4dPrefix}-content-item-paragraph>`;
       },
     });
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-item__copy`;
+    return `${c4dPrefix}--content-item__copy`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -50,4 +56,4 @@ class DDSContentItemCopy extends StableSelectorMixin(DDSMarkdown) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemCopy;
+export default C4DContentItemCopy;
diff --git a/packages/web-components/src/components/content-item/content-item-heading.ts b/packages/web-components/src/components/content-item/content-item-heading.ts
index e6c34e9674b..ed1659a58d3 100644
--- a/packages/web-components/src/components/content-item/content-item-heading.ts
+++ b/packages/web-components/src/components/content-item/content-item-heading.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-item.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content in content item.
  *
- * @element dds-content-item-heading
+ * @element c4d-content-item-heading
  */
-@customElement(`${ddsPrefix}-content-item-heading`)
-class DDSContentItemHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-item-heading`)
+class C4DContentItemHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this logo UI should be in.
    */
@@ -43,11 +44,11 @@ class DDSContentItemHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-item__heading`;
+    return `${c4dPrefix}--content-item__heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemHeading;
+export default C4DContentItemHeading;
diff --git a/packages/web-components/src/components/content-item/content-item-paragraph.ts b/packages/web-components/src/components/content-item/content-item-paragraph.ts
index 319cb303085..1e59522504a 100644
--- a/packages/web-components/src/components/content-item/content-item-paragraph.ts
+++ b/packages/web-components/src/components/content-item/content-item-paragraph.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './content-item.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The paragraph content in content item.
  *
- * @element dds-content-item-paragraph
+ * @element c4d-content-item-paragraph
  */
-@customElement(`${ddsPrefix}-content-item-paragraph`)
-class DDSContentItemParagraph extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-item-paragraph`)
+class C4DContentItemParagraph extends StableSelectorMixin(LitElement) {
   static get stableSelector() {
-    return `${ddsPrefix}--content-item-paragraph`;
+    return `${c4dPrefix}--content-item-paragraph`;
   }
 
   render() {
@@ -34,4 +34,4 @@ class DDSContentItemParagraph extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItemParagraph;
+export default C4DContentItemParagraph;
diff --git a/packages/web-components/src/components/content-item/content-item.scss b/packages/web-components/src/components/content-item/content-item.scss
index 47325bee689..271343008a5 100644
--- a/packages/web-components/src/components/content-item/content-item.scss
+++ b/packages/web-components/src/components/content-item/content-item.scss
@@ -1,24 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-item/content-item';
-
-:host(#{$dds-prefix}-content-item-copy),
-:host(#{$dds-prefix}-content-item-paragraph) {
-  display: block;
-}
-
-:host(#{$dds-prefix}-content-item) ::slotted(#{$dds-prefix}-image),
-:host(#{$dds-prefix}-content-item)
-  ::slotted(#{$dds-prefix}-video-player-container) {
-  display: block;
-  margin-top: 1rem;
-  margin-bottom: 2rem;
-}
+@use '@carbon/ibmdotcom-styles/scss/internal/content-item';
diff --git a/packages/web-components/src/components/content-item/content-item.ts b/packages/web-components/src/components/content-item/content-item.ts
index be0f0553c75..f34d6a35875 100644
--- a/packages/web-components/src/components/content-item/content-item.ts
+++ b/packages/web-components/src/components/content-item/content-item.ts
@@ -7,39 +7,61 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, state, LitElement, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html, LitElement, TemplateResult } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property, state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-item.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
  */
 const slotExistencePropertyNames = {
+  media: '_hasMedia',
+  statistic: '_hasStatistic',
   footer: '_hasFooter',
 };
 
 /**
  * Content item.
  *
- * @element dds-content-item
+ * @element c4d-content-item
  * @slot media - The media content.
  * @slot heading - The heading content.
  * @slot footer - The footer (CTA) content.
  */
-@customElement(`${ddsPrefix}-content-item`)
-class DDSContentItem extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-item`)
+class C4DContentItem extends StableSelectorMixin(LitElement) {
+  /**
+   * `true` if there are CTA statistic in the content item area.
+   */
+  @state()
+  protected _hasLogo = false;
+  /**
+   * `true` if there are CTA media in the content item area.
+   */
+  @state()
+  protected _hasMedia = false;
+
+  /**
+   * `true` if there are CTA statistic in the content item area.
+   */
+  @state()
+  protected _hasStatistic = false;
+
   /**
    * `true` if there is a footer content.
    */
   @state()
   _hasFooter = false;
 
+  @property({ type: Boolean })
+  horizontal = false;
+
   /**
    * Handles `slotchange` event.
    *
@@ -47,31 +69,49 @@ class DDSContentItem extends StableSelectorMixin(LitElement) {
    */
   protected _handleSlotChange({ target }: Event) {
     const { name } = target as HTMLSlotElement;
-    const content = (target as HTMLSlotElement)
+    const hasContent = (target as HTMLSlotElement)
       .assignedNodes()
-      .filter((elem) =>
-        (elem as HTMLElement).matches !== undefined
-          ? (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSContentItem).selectorTextCTA
-            ) ||
-            (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSContentItem).selectorButtonCTA
-            ) ||
-            (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSContentItem).selectorButtonGroup
-            ) ||
-            (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSContentItem).selectorLinkWithIcon
-            ) ||
-            (elem as HTMLElement).matches(
-              (this.constructor as typeof DDSContentItem).selectorLinkList
-            )
-          : false
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
       );
-    const hasContent = content?.some(
-      (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
-    );
-    this[slotExistencePropertyNames[name] || '_hasCopy'] = hasContent;
+    this[slotExistencePropertyNames[name] || '_hasStatistic'] = hasContent;
+    if (
+      (
+        (target as HTMLSlotElement).assignedNodes()[0] as HTMLElement
+      )?.matches?.(
+        (this.constructor as typeof C4DContentItem).selectorImageLogo
+      )
+    ) {
+      this._hasLogo = true;
+    } else this._hasLogo = false;
+  }
+
+  /**
+   * @returns The statistic content items
+   */
+  protected _renderStatistic(): TemplateResult | string | void {
+    const { _hasStatistic: hasStatistic, _handleSlotChange: handleSlotChange } =
+      this;
+    return html`
+      <div
+        ?hidden="${!hasStatistic}"
+        class="${c4dPrefix}--content-item__statitics">
+        <slot name="statistics" @slotchange="${handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+
+  /**
+   * @returns The media content items
+   */
+  protected _renderMedia(): TemplateResult | string | void {
+    const { _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this;
+
+    return html`
+      <div ?hidden="${!hasMedia}" class="${c4dPrefix}--content-item__media">
+        <slot name="media" @slotchange="${handleSlotChange}"></slot>
+      </div>
+    `;
   }
 
   /**
@@ -95,41 +135,33 @@ class DDSContentItem extends StableSelectorMixin(LitElement) {
   }
 
   render() {
+    const { horizontal, _hasStatistic: hasStatistic, _hasLogo: hasLogo } = this;
+    const horizontalClass = classMap({
+      [`${c4dPrefix}--content-item__horizontal`]:
+        horizontal && !hasStatistic && !hasLogo,
+    });
+
     return html`
-      <slot name="heading"></slot>
-      <div>
-        <slot name="media"></slot>
+      <div class="${horizontalClass}">
+        ${this._renderStatistic()} ${this._renderMedia()}
+        <div>
+          <slot name="heading"></slot>
+          ${this._renderBody()}${this._renderFooter()}
+        </div>
       </div>
-      ${this._renderBody()}${this._renderFooter()}
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-item`;
-  }
-
-  static get selectorTextCTA() {
-    return `${ddsPrefix}-text-cta`;
-  }
-
-  static get selectorButtonCTA() {
-    return `${ddsPrefix}-button-cta`;
-  }
-
-  static get selectorLinkList() {
-    return `${ddsPrefix}-link-list`;
-  }
-
-  static get selectorLinkWithIcon() {
-    return `${ddsPrefix}-link-with-icon`;
+    return `${c4dPrefix}--content-item`;
   }
 
-  static get selectorButtonGroup() {
-    return `${ddsPrefix}-button-group`;
+  static get selectorImageLogo() {
+    return `${c4dPrefix}-image-logo`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentItem;
+export default C4DContentItem;
diff --git a/packages/web-components/src/components/content-item/index.ts b/packages/web-components/src/components/content-item/index.ts
index 87e6faba823..08bb5b98c1c 100644
--- a/packages/web-components/src/components/content-item/index.ts
+++ b/packages/web-components/src/components/content-item/index.ts
@@ -10,6 +10,4 @@
 import './content-item';
 import './content-item-copy';
 import './content-item-heading';
-import './content-item-paragraph';
-import '../cta/text-cta';
-import '../cta/button-cta';
+import '../link-with-icon/index';
diff --git a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx
index dafa6eb0254..d50104d36a2 100644
--- a/packages/web-components/src/components/content-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/content-section/__stories__/README.stories.mdx
@@ -3,7 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-# `<dds-content-section>`
+# `<cds-content-section>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/content-section)
@@ -28,13 +28,13 @@ import '@carbon/ibmdotcom-web-components/es/components/content-section/index.js'
 ### HTML
 
 ```html
-<dds-content-section>
-  <dds-content-section-heading>Heading</dds-content-section-heading>
-  <dds-content-section-copy>Copy</dds-content-section-copy>
-  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</dds-text-cta
+<cds-content-section>
+  <cds-content-section-heading>Heading</cds-content-section-heading>
+  <cds-content-section-copy>Copy</cds-content-section-copy>
+  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</cds-text-cta
   >
-</dds-content-section>
+</cds-content-section>
 ```
 
 As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated
@@ -44,72 +44,279 @@ components that are compatible with the `Content section` component are:
 
 ### Content block simple
 
-Note: With `Content block simple`, the `children-custom-class` attribute will need to be provided with proper grid class as shown below in order for the component to render correctly within the grid.
+Note: With `Content block simple`, the `children-custom-class` attribute will
+need to be provided with proper grid class as shown below in order for the
+component to render correctly within the grid.
 
 ```html
-<dds-content-section children-custom-class="bx--col-lg-16 bx--no-gutter">
-  <dds-content-section-heading>Heading</dds-content-section-heading>
-  <dds-content-section-copy>Copy</dds-content-section-copy>
-  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</dds-text-cta
+<cds-content-section children-custom-class="cds--col-lg-16 cds--no-gutter">
+  <cds-content-section-heading>Heading</cds-content-section-heading>
+  <cds-content-section-copy>Copy</cds-content-section-copy>
+  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</cds-text-cta
   >
-  <dds-content-block-simple>
-    <dds-content-block-heading>Content block simple heading</dds-content-block-heading>
-    <dds-content-block-copy size="sm">Content block simple copy</dds-content-block-copy>
-    <dds-video-player-container
+  <cds-content-block-simple>
+    <cds-content-block-heading
+      >Content block simple heading</cds-content-block-heading
+    >
+    <cds-content-block-copy size="sm"
+      >Content block simple copy</cds-content-block-copy
+    >
+    <cds-video-player-container
       slot="media"
-      video-id="1_9h94wo6b"></dds-video-player-container>
-    <dds-text-cta slot="footer" cta-type="jump" href="https://www.ibm.com"
-      >Jump to AI ethics and trust</dds-text-cta
+      video-id="0_ibuqxqbe"></cds-video-player-container>
+    <cds-text-cta slot="footer" cta-type="jump" href="https://www.ibm.com"
+      >Jump to AI ethics and trust</cds-text-cta
     >
-  </dds-content-block-simple>
-</dds-content-section>
+  </cds-content-block-simple>
+</cds-content-section>
+```
+
+### Card group
+
+```html
+<cds-content-section>
+  <cds-content-section-heading>Heading</cds-content-section-heading>
+  <cds-content-section-copy>Copy</cds-content-section-copy>
+  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</cds-text-cta
+  >
+  <cds-card-group>
+    <cds-card-group-item href="https://example.com" cta-type="local">
+      <cds-card-heading>Nunc convallis lobortis</cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin, sodales nulla quis, consequat libero.
+      </p>
+      <cds-card-cta-footer slot="footer"> </cds-card-cta-footer>
+    </cds-card-group-item>
+  </cds-card-group>
+</cds-content-section>
+```
+
+### Carousel
+
+```html
+<cds-content-section>
+  <cds-content-section-heading>Heading</cds-content-section-heading>
+  <cds-content-section-copy>Copy</cds-content-section-copy>
+  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</cds-text-cta
+  >
+  <cds-content-section-heading
+    >Lorem ipsum dolor sit amet</cds-content-section-heading
+  >
+  <cds-content-section-copy>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est.
+  </cds-content-section-copy>
+  <cds-carousel>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est.
+      <cds-card-footer>
+        <svg
+          slot="footer"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        </svg>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est.
+      <cds-card-footer>
+        <svg
+          slot="footer"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        </svg>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est.
+      <cds-card-footer>
+        <svg
+          slot="footer"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        </svg>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est.
+      <cds-card-footer>
+        <svg
+          slot="footer"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        </svg>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est.
+      <cds-card-footer>
+        <svg
+          slot="footer"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        </svg>
+      </cds-card-footer>
+    </cds-card>
+    <cds-card href="https://example.com">
+      <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
+      ultricies est.
+      <cds-card-footer>
+        <svg
+          slot="footer"
+          focusable="false"
+          preserveAspectRatio="xMidYMid meet"
+          xmlns="http://www.w3.org/2000/svg"
+          fill="currentColor"
+          aria-hidden="true"
+          width="20"
+          height="20"
+          viewBox="0 0 20 20">
+          <path
+            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        </svg>
+      </cds-card-footer>
+    </cds-card>
+  </cds-carousel>
+</cds-content-section>
 ```
 
+### Link list
+
+```html
+<cds-content-section>
+  <cds-content-section-heading>Heading</cds-content-section-heading>
+  <cds-content-section-copy>Copy</cds-content-section-copy>
+  <cds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
+    CTA text</cds-text-cta
+  >
+  <cds-content-section-heading
+    >Lorem ipsum dolor sit amet</cds-content-section-heading
+  >
+  <cds-content-section-copy>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
+    est.
+  </cds-content-section-copy>
+  <cds-link-list>
+    <cds-link-list-item href="https://example.com">
+      Learn more about Kubernetes and automating deployment ${ArrowRight20({
+      slot: 'icon' })}
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
+      Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
+      Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
+      Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
+      Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
+      Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+    </cds-link-list-item>
+  </cds-link-list>
+</cds-content-section>
+```
+
+As part of the ongoing upgrade to Carbon for IBM.com v2, we have consolidated some of the other `Content section` variants under a single one.
+Some of the components that are compatible with the `Content section` component are: `Card group`, `Carousel`, `Link list`.
+
 ### Card group
 
 ```html
+
 <dds-content-section>
   <dds-content-section-heading>Heading</dds-content-section-heading>
   <dds-content-section-copy>Copy</dds-content-section-copy>
-  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</dds-text-cta
-  >
+  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com"> CTA text</dds-text-cta>
   <dds-card-group>
     <dds-card-group-item href="https://example.com" cta-type="local">
       <dds-card-heading>Nunc convallis lobortis</dds-card-heading>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
-        elit sollicitudin, sodales nulla quis, consequat libero.
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+        Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.
       </p>
-      <dds-card-cta-footer slot="footer"> </dds-card-cta-footer>
+      <dds-card-cta-footer slot="footer">
+      </dds-card-cta-footer>
     </dds-card-group-item>
-  </dds-card-group>
+  </dds-card-group>  
 </dds-content-section>
 ```
 
 ### Carousel
 
 ```html
+
 <dds-content-section>
   <dds-content-section-heading>Heading</dds-content-section-heading>
   <dds-content-section-copy>Copy</dds-content-section-copy>
-  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</dds-text-cta
-  >
-  <dds-content-section-heading
-    >Lorem ipsum dolor sit amet</dds-content-section-heading
-  >
+  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com"> CTA text</dds-text-cta>
+  <dds-content-section-heading>Lorem ipsum dolor sit amet</dds-content-section-heading>
   <dds-content-section-copy>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
-    est.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
   </dds-content-section-copy>
   <dds-carousel>
     <dds-card href="https://example.com">
       <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-      ultricies est.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       <dds-card-footer>
         <svg
           slot="footer"
@@ -120,16 +327,15 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20">
-          <path
-            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20"
+        >
+          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
       </dds-card-footer>
     </dds-card>
     <dds-card href="https://example.com">
       <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-      ultricies est.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       <dds-card-footer>
         <svg
           slot="footer"
@@ -140,16 +346,15 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20">
-          <path
-            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20"
+        >
+          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
       </dds-card-footer>
     </dds-card>
     <dds-card href="https://example.com">
       <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-      ultricies est.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       <dds-card-footer>
         <svg
           slot="footer"
@@ -160,16 +365,15 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20">
-          <path
-            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20"
+        >
+          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
       </dds-card-footer>
     </dds-card>
     <dds-card href="https://example.com">
       <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-      ultricies est.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       <dds-card-footer>
         <svg
           slot="footer"
@@ -180,16 +384,15 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20">
-          <path
-            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20"
+        >
+          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
       </dds-card-footer>
     </dds-card>
     <dds-card href="https://example.com">
       <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-      ultricies est.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       <dds-card-footer>
         <svg
           slot="footer"
@@ -200,16 +403,15 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20">
-          <path
-            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20"
+        >
+          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
       </dds-card-footer>
     </dds-card>
     <dds-card href="https://example.com">
       <dds-card-heading>Lorem ipsum dolor sit amet</dds-card-heading>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
-      ultricies est.
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
       <dds-card-footer>
         <svg
           slot="footer"
@@ -220,9 +422,9 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
           aria-hidden="true"
           width="20"
           height="20"
-          viewBox="0 0 20 20">
-          <path
-            d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+          viewBox="0 0 20 20"
+        >
+          <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
         </svg>
       </dds-card-footer>
     </dds-card>
@@ -236,20 +438,14 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
 <dds-content-section>
   <dds-content-section-heading>Heading</dds-content-section-heading>
   <dds-content-section-copy>Copy</dds-content-section-copy>
-  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com">
-    CTA text</dds-text-cta
-  >
-  <dds-content-section-heading
-    >Lorem ipsum dolor sit amet</dds-content-section-heading
-  >
+  <dds-text-cta slot="footer" cta-type="local" href="https://www.example.com"> CTA text</dds-text-cta>
+  <dds-content-section-heading>Lorem ipsum dolor sit amet</dds-content-section-heading>
   <dds-content-section-copy>
-    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies
-    est.
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.
   </dds-content-section-copy>
   <dds-link-list>
     <dds-link-list-item href="https://example.com">
-      Learn more about Kubernetes and automating deployment ${ArrowRight20({
-      slot: 'icon' })}
+      Learn more about Kubernetes and automating deployment ${ArrowRight20({ slot: 'icon' })}
     </dds-link-list-item>
     <dds-link-list-item href="https://example.com">
       Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
@@ -266,13 +462,13 @@ Note: With `Content block simple`, the `children-custom-class` attribute will ne
     <dds-link-list-item href="https://example.com">
       Microservices and containers ${ArrowRight20({ slot: 'icon' })}
     </dds-link-list-item>
-  </dds-link-list>
+  </dds-link-list>  
 </dds-content-section>
 ```
 
 ## Props
 
-<Props of="dds-content-section" />
+<Props of="cds-content-section" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
@@ -283,8 +479,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector         | Compatibility selector                        | Description |
 | ------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-content-section>`         | `data-autoid="dds--content-section"`          | Component   |
-| `<dds-content-section-copy>`    | `data-autoid="dds--content-section__copy"`    | Component   |
-| `<dds-content-section-heading>` | `data-autoid="dds--content-section__heading"` | Component   |
+| `<cds-content-section>`         | `data-autoid="cds--content-section"`          | Component   |
+| `<cds-content-section-copy>`    | `data-autoid="cds--content-section__copy"`    | Component   |
+| `<cds-content-section-heading>` | `data-autoid="cds--content-section__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx
index 174896e852c..fcaa3b05c23 100644
--- a/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/content-section/__stories__/README.stories.react.mdx
@@ -22,20 +22,20 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 
 function App() {
   return (
-    <DDSContentSection>
-      <DDSContentSectionHeading>{heading}</DDSContentSectionHeading>
-      <DDSContentSectionCopy>{copy}</DDSContentSectionCopy>
-      <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+    <C4DContentSection>
+      <C4DContentSectionHeading>{heading}</C4DContentSectionHeading>
+      <C4DContentSectionCopy>{copy}</C4DContentSectionCopy>
+      <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
         Link action
-      </DDSTextCTA>
-    </DDSContentSection>
+      </C4DTextCTA>
+    </C4DContentSection>
   );
 }
 ```
@@ -52,176 +52,176 @@ to be provided with proper grid class as shown below in order for the component
 to render correctly within the grid.
 
 ```html
-<DDSContentSection childrenCustomClass="bx--col-lg-16 bx--no-gutter">
-  <DDSContentSectionHeading>{heading}</DDSContentSectionHeading>
-  <DDSContentSectionCopy>{copy}</DDSContentSectionCopy>
-  <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+<C4DContentSection childrenCustomClass="cds--col-lg-16 cds--no-gutter">
+  <C4DContentSectionHeading>{heading}</C4DContentSectionHeading>
+  <C4DContentSectionCopy>{copy}</C4DContentSectionCopy>
+  <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
     Link action
-  </DDSTextCTA>
-  <DDSContentBlockSimple>
-    <DDSContentBlockHeading>
+  </C4DTextCTA>
+  <C4DContentBlockSimple>
+    <C4DContentBlockHeading>
       Content block simple heading
-    </DDSContentBlockHeading>
-    <DDSContentBlockCopy size="sm">
+    </C4DContentBlockHeading>
+    <C4DContentBlockCopy size="sm">
       Content block simple copy
-    </DDSContentBlockCopy>
-    <DDSVideoPlayerContainer
+    </C4DContentBlockCopy>
+    <C4DVideoPlayerContainer
       slot="media"
-      video-id="1_9h94wo6b"></DDSVideoPlayerContainer>
-    <DDSTextCTA slot="footer" cta-type="jump" href="https://www.ibm.com">
+      video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
+    <C4DTextCTA slot="footer" cta-type="jump" href="https://www.ibm.com">
       Content block simple CTA
-    </DDSTextCTA>
-  </DDSContentBlockSimple>
-</DDSContentSection>
+    </C4DTextCTA>
+  </C4DContentBlockSimple>
+</C4DContentSection>
 ```
 
 ### Card group
 
 ```html
-<DDSContentSection>
-  <DDSContentSectionHeading>{heading}</DDSContentSectionHeading>
-  <DDSContentSectionCopy>{copy}</DDSContentSectionCopy>
-  <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+<C4DContentSection>
+  <C4DContentSectionHeading>{heading}</C4DContentSectionHeading>
+  <C4DContentSectionCopy>{copy}</C4DContentSectionCopy>
+  <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
     Link action
-  </DDSTextCTA>
-  <DDSCardGroup>
-    <DDSContentGroupCardsItem href="https://www.example.com">
-      <DDSCardHeading>
+  </C4DTextCTA>
+  <C4DCardGroup>
+    <C4DContentGroupCardsItem href="https://www.example.com">
+      <C4DCardHeading>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt
-      </DDSCardHeading>
+      </C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua.
       </p>
-      <DDSCardFooter icon-placemenet="left">
+      <C4DCardFooter icon-placemenet="left">
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSContentGroupCardsItem>
-    <DDSContentGroupCardsItem href="https://www.example.com">
-      <DDSCardHeading>
+      </C4DCardFooter>
+    </C4DContentGroupCardsItem>
+    <C4DContentGroupCardsItem href="https://www.example.com">
+      <C4DCardHeading>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt
-      </DDSCardHeading>
+      </C4DCardHeading>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-      <DDSCardFooter icon-placemenet="left">
+      <C4DCardFooter icon-placemenet="left">
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSContentGroupCardsItem>
-    <DDSContentGroupCardsItem href="https://www.example.com">
-      <DDSCardHeading>
+      </C4DCardFooter>
+    </C4DContentGroupCardsItem>
+    <C4DContentGroupCardsItem href="https://www.example.com">
+      <C4DCardHeading>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt
-      </DDSCardHeading>
+      </C4DCardHeading>
       <p>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
         tempor incididunt ut labore et dolore magna aliqua.
       </p>
-      <DDSCardFooter icon-placemenet="left">
+      <C4DCardFooter icon-placemenet="left">
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSContentGroupCardsItem>
-    <DDSContentGroupCardsItem href="https://www.example.com">
-      <DDSCardHeading>
+      </C4DCardFooter>
+    </C4DContentGroupCardsItem>
+    <C4DContentGroupCardsItem href="https://www.example.com">
+      <C4DCardHeading>
         Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
         tempor incididunt
-      </DDSCardHeading>
+      </C4DCardHeading>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-      <DDSCardFooter icon-placemenet="left">
+      <C4DCardFooter icon-placemenet="left">
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSContentGroupCardsItem>
-  </DDSCardGroup>
-</DDSContentSection>
+      </C4DCardFooter>
+    </C4DContentGroupCardsItem>
+  </C4DCardGroup>
+</C4DContentSection>
 ```
 
 ### Carousel
 
 ```html
-<DDSContentSection>
-  <DDSContentSectionHeading>{heading}</DDSContentSectionHeading>
-  <DDSContentSectionCopy>{copy}</DDSContentSectionCopy>
-  <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+<C4DContentSection>
+  <C4DContentSectionHeading>{heading}</C4DContentSectionHeading>
+  <C4DContentSectionCopy>{copy}</C4DContentSectionCopy>
+  <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
     Link action
-  </DDSTextCTA>
-  <DDSCarousel>
-    <DDSCard href="https://www.ibm.com/standards/carbon">
-      <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
+  </C4DTextCTA>
+  <C4DCarousel>
+    <C4DCard href="https://www.ibm.com/standards/carbon">
+      <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
-      <DDSCardFooter>
+      <C4DCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+      </C4DCardFooter>
+    </C4DCard>
 
-    <DDSCard href="https://www.ibm.com/standards/carbon">
-      <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
+    <C4DCard href="https://www.ibm.com/standards/carbon">
+      <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
       Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin,
       sodales nulla quis, consequat libero.
-      <DDSCardFooter>
+      <C4DCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+      </C4DCardFooter>
+    </C4DCard>
 
-    <DDSCard href="https://www.ibm.com/standards/carbon">
-      <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
+    <C4DCard href="https://www.ibm.com/standards/carbon">
+      <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est.Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin, sodales nulla quis, consequat libero.
-      <DDSCardFooter>
+      <C4DCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
+      </C4DCardFooter>
+    </C4DCard>
 
-    <DDSCard href="https://www.ibm.com/standards/carbon">
-      <DDSCardHeading>Lorem ipsum dolor sit amet</DDSCardHeading>
+    <C4DCard href="https://www.ibm.com/standards/carbon">
+      <C4DCardHeading>Lorem ipsum dolor sit amet</C4DCardHeading>
       Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin,
       sodales nulla quis, consequat libero.
-      <DDSCardFooter>
+      <C4DCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSCardFooter>
-    </DDSCard>
-  </DDSCarousel>
-</DDSContentSection>
+      </C4DCardFooter>
+    </C4DCard>
+  </C4DCarousel>
+</C4DContentSection>
 ```
 
 ### Link list
 
 ```html
-<DDSContentSection>
-  <DDSContentSectionHeading>{heading}</DDSContentSectionHeading>
-  <DDSContentSectionCopy>{copy}</DDSContentSectionCopy>
-  <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+<C4DContentSection>
+  <C4DContentSectionHeading>{heading}</C4DContentSectionHeading>
+  <C4DContentSectionCopy>{copy}</C4DContentSectionCopy>
+  <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
     Link action
-  </DDSTextCTA>
-  <DDSLinkList>
-    <DDSLinkListItem href="https://example.com">
+  </C4DTextCTA>
+  <C4DLinkList>
+    <C4DLinkListItem href="https://example.com">
       Learn more about Kubernetes and automating deployment
       <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       Containerization A Complete Guide
       <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       Microservices and container
       <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       Learn more about Kubernetes and automating deployment
       <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       Containerization A Complete Guide
       <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       Microservices and container
       <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-  </DDSLinkList>
-</DDSContentSection>
+    </C4DLinkListItem>
+  </C4DLinkList>
+</C4DContentSection>
 ```
 
 ## Props
@@ -236,8 +236,8 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector         | Compatibility selector                        | Description |
 | ------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-content-section>`         | `data-autoid="dds--content-section"`          | Component   |
-| `<dds-content-section-copy>`    | `data-autoid="dds--content-section__copy"`    | Component   |
-| `<dds-content-section-heading>` | `data-autoid="dds--content-section__heading"` | Component   |
+| `<cds-content-section>`         | `data-autoid="cds--content-section"`          | Component   |
+| `<cds-content-section-copy>`    | `data-autoid="cds--content-section__copy"`    | Component   |
+| `<cds-content-section-heading>` | `data-autoid="cds--content-section__heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx b/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx
index 88239efe27a..cadd51fce6f 100644
--- a/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx
+++ b/packages/web-components/src/components/content-section/__stories__/content-section.stories.react.tsx
@@ -14,23 +14,23 @@ import React from 'react';
 /* eslint-disable max-len */
 // @ts-ignore
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
-import DDSCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
-import DDSContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DContentGroupCardsItem from '@carbon/ibmdotcom-web-components/es/components-react/content-group-cards/content-group-cards-item';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockSimple from '@carbon/ibmdotcom-web-components/es/components-react/content-block-simple/content-block-simple';
+import C4DContentSection from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DContentSectionCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-copy';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -45,32 +45,32 @@ For example: optical scan of documents (to create a text file out of an image of
 `;
 
 const card1 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </DDSCardHeading>
+    </C4DCardHeading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <DDSCardFooter icon-placemenet="left">
+    <C4DCardFooter icon-placemenet="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 
 const card2 = (
-  <DDSContentGroupCardsItem href="https://www.example.com">
-    <DDSCardHeading>
+  <C4DContentGroupCardsItem href="https://www.example.com">
+    <C4DCardHeading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </DDSCardHeading>
+    </C4DCardHeading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-    <DDSCardFooter icon-placemenet="left">
+    <C4DCardFooter icon-placemenet="left">
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSContentGroupCardsItem>
+    </C4DCardFooter>
+  </C4DContentGroupCardsItem>
 );
 
 const hrefDefault = 'https://www.ibm.com/standards/carbon';
@@ -87,97 +87,97 @@ const Card = ({
   heading = headingDefault,
   href = hrefDefault,
 } = {}) => (
-  <DDSCard href={href}>
-    <DDSCardHeading>{heading}</DDSCardHeading>
+  <C4DCard href={href}>
+    <C4DCardHeading>{heading}</C4DCardHeading>
     {copy}
-    <DDSCardFooter>
+    <C4DCardFooter>
       <ArrowRight20 slot="icon" />
-    </DDSCardFooter>
-  </DDSCard>
+    </C4DCardFooter>
+  </C4DCard>
 );
 
 export const Default = (args) => {
   const { heading, copy, addChildren } = args?.ContentSection ?? {};
   const classes = addChildren.includes('Content block simple')
-    ? 'bx--col-lg-16 bx--no-gutter'
+    ? 'cds--col-lg-16 cds--no-gutter'
     : '';
   return (
-    <DDSContentSection childrenCustomClass={classes}>
-      <DDSContentSectionHeading>{heading}</DDSContentSectionHeading>
-      <DDSContentSectionCopy>{copy}</DDSContentSectionCopy>
+    <C4DContentSection childrenCustomClass={classes}>
+      <C4DContentSectionHeading>{heading}</C4DContentSectionHeading>
+      <C4DContentSectionCopy>{copy}</C4DContentSectionCopy>
       {addChildren.includes('Content block simple') ? (
-        <DDSContentBlockSimple>
-          <DDSContentBlockHeading>
+        <C4DContentBlockSimple>
+          <C4DContentBlockHeading>
             What's the latest news in artificial intelligence?
-          </DDSContentBlockHeading>
-          <DDSContentBlockCopy size="sm">{blockCopy}</DDSContentBlockCopy>
-          <DDSVideoPlayerContainer
+          </C4DContentBlockHeading>
+          <C4DContentBlockCopy size="sm">{blockCopy}</C4DContentBlockCopy>
+          <C4DVideoPlayerContainer
             slot="media"
-            video-id="1_9h94wo6b"></DDSVideoPlayerContainer>
-          <DDSTextCTA slot="footer" cta-type="jump" href="https://www.ibm.com">
+            video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
+          <C4DTextCTA slot="footer" cta-type="jump" href="https://www.ibm.com">
             Jump to AI ethics and trust
-          </DDSTextCTA>
-        </DDSContentBlockSimple>
+          </C4DTextCTA>
+        </C4DContentBlockSimple>
       ) : (
         ''
       )}
       {addChildren.includes('Card group') ? (
-        <DDSCardGroup>
+        <C4DCardGroup>
           {card1}
           {card2}
           {card1}
           {card2}
-        </DDSCardGroup>
+        </C4DCardGroup>
       ) : (
         ''
       )}
       {addChildren.includes('Link list') ? (
-        <DDSLinkList>
-          <DDSLinkListItem href="https://example.com">
+        <C4DLinkList>
+          <C4DLinkListItem href="https://example.com">
             Learn more about Kubernetes and automating deployment
             <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Containerization A Complete Guide
             <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Microservices and container
             <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Learn more about Kubernetes and automating deployment
             <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Containerization A Complete Guide
             <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Microservices and container
             <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-        </DDSLinkList>
+          </C4DLinkListItem>
+        </C4DLinkList>
       ) : (
         ''
       )}
 
       {addChildren.includes('Carousel') ? (
-        <DDSCarousel>
+        <C4DCarousel>
           {Card()}
           {Card({ copy: copyOdd })}
           {Card()}
           {Card({ copy: copyOdd })}
           {Card()}
-        </DDSCarousel>
+        </C4DCarousel>
       ) : (
         ''
       )}
 
-      <DDSTextCTA slot="footer" cta-type="local" href="https://www.example.com">
+      <C4DTextCTA slot="footer" cta-type="local" href="https://www.example.com">
         Link action
-      </DDSTextCTA>
-    </DDSContentSection>
+      </C4DTextCTA>
+    </C4DContentSection>
   );
 };
 
@@ -187,10 +187,10 @@ export default {
     (story) => {
       return (
         <>
-          <div className="bx--grid">
-            <div className="bx--row">
-              <div className="bx--col-lg-16 bx--no-gutter">
-                <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <div className="cds--col-lg-16 cds--no-gutter">
+                <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
               </div>
             </div>
           </div>
diff --git a/packages/web-components/src/components/content-section/__stories__/content-section.stories.ts b/packages/web-components/src/components/content-section/__stories__/content-section.stories.ts
index 836b5171d85..7f4a767195c 100644
--- a/packages/web-components/src/components/content-section/__stories__/content-section.stories.ts
+++ b/packages/web-components/src/components/content-section/__stories__/content-section.stories.ts
@@ -7,15 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { optionsKnob } from '@storybook/addon-knobs';
+import '../index';
 import '../../card-group/index';
 import '../../carousel/index';
 import '../../content-group-cards/index';
 import '../../content-block-simple/index';
-import '../index';
 import '../../cta/text-cta';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -31,32 +31,32 @@ For example: optical scan of documents (to create a text file out of an image of
 `;
 
 const card1 = html`
-  <dds-content-group-cards-item href="https://www.example.com">
-    <dds-card-heading>
+  <c4d-content-group-cards-item href="https://www.example.com">
+    <c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </dds-card-heading>
+    </c4d-card-heading>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
       tempor incididunt ut labore et dolore magna aliqua.
     </p>
-    <dds-card-footer icon-placement="left">
+    <c4d-card-footer icon-placement="left">
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-footer>
-  </dds-content-group-cards-item>
+    </c4d-card-footer>
+  </c4d-content-group-cards-item>
 `;
 
 const card2 = html`
-  <dds-content-group-cards-item href="https://www.example.com">
-    <dds-card-heading>
+  <c4d-content-group-cards-item href="https://www.example.com">
+    <c4d-card-heading>
       Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
       tempor incididunt
-    </dds-card-heading>
+    </c4d-card-heading>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
-    <dds-card-footer icon-placement="left">
+    <c4d-card-footer icon-placement="left">
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-footer>
-  </dds-content-group-cards-item>
+    </c4d-card-footer>
+  </c4d-content-group-cards-item>
 `;
 
 const hrefDefault = 'https://www.ibm.com/standards/carbon';
@@ -73,94 +73,94 @@ const Card = ({
   heading = headingDefault,
   href = hrefDefault,
 } = {}) => html`
-  <dds-card href="${ifNonNull(href)}">
-    <dds-card-heading>${heading}</dds-card-heading>
+  <c4d-card href="${ifDefined(href)}">
+    <c4d-card-heading>${heading}</c4d-card-heading>
     ${copy}
-    <dds-card-footer> ${ArrowRight20({ slot: 'icon' })} </dds-card-footer>
-  </dds-card>
+    <c4d-card-footer> ${ArrowRight20({ slot: 'icon' })} </c4d-card-footer>
+  </c4d-card>
 `;
 
 export const Default = (args) => {
   const { heading, copy, addChildren } = args?.ContentSection ?? {};
   const classes = addChildren.includes('Content block simple')
-    ? 'bx--col-lg-16 bx--no-gutter'
+    ? 'cds--col-lg-16 cds--no-gutter'
     : '';
   return html`
-    <dds-content-section children-custom-class="${classes}">
-      <dds-content-section-heading
-        >${ifNonNull(heading)}</dds-content-section-heading
+    <c4d-content-section children-custom-class="${classes}">
+      <c4d-content-section-heading
+        >${ifDefined(heading)}</c4d-content-section-heading
       >
-      <dds-content-section-copy>${ifNonNull(copy)}</dds-content-section-copy>
+      <c4d-content-section-copy>${ifDefined(copy)}</c4d-content-section-copy>
       ${addChildren.includes('Content block simple')
         ? html`
-            <dds-content-block-simple>
-              <dds-content-block-heading
+            <c4d-content-block-simple>
+              <c4d-content-block-heading
                 >What’s the latest news in artificial
-                intelligence?</dds-content-block-heading
+                intelligence?</c4d-content-block-heading
               >
-              <dds-content-block-copy size="sm"
-                >${blockCopy}</dds-content-block-copy
+              <c4d-content-block-copy size="sm"
+                >${blockCopy}</c4d-content-block-copy
               >
-              <dds-video-player-container
+              <c4d-video-player-container
                 slot="media"
-                video-id="1_9h94wo6b"></dds-video-player-container>
-              <dds-text-cta
+                video-id="0_ibuqxqbe"></c4d-video-player-container>
+              <c4d-text-cta
                 slot="footer"
                 cta-type="jump"
                 href="https://www.ibm.com"
-                >Jump to AI ethics and trust</dds-text-cta
+                >Jump to AI ethics and trust</c4d-text-cta
               >
-            </dds-content-block-simple>
+            </c4d-content-block-simple>
           `
         : ``}
       ${addChildren.includes('Card group')
         ? html`
-            <dds-card-group> ${card1}${card2}${card1}${card2} </dds-card-group>
+            <c4d-card-group> ${card1}${card2}${card1}${card2} </c4d-card-group>
           `
         : ``}
       ${addChildren.includes('Link list')
         ? html`
-            <dds-link-list>
-              <dds-link-list-item href="https://example.com">
+            <c4d-link-list>
+              <c4d-link-list-item href="https://example.com">
                 Learn more about Kubernetes and automating deployment
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Containerization A Complete Guide
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Containerization A Complete Guide
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item href="https://example.com">
+              </c4d-link-list-item>
+              <c4d-link-list-item href="https://example.com">
                 Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-              </dds-link-list-item>
-            </dds-link-list>
+              </c4d-link-list-item>
+            </c4d-link-list>
           `
         : ``}
       ${addChildren.includes('Carousel')
         ? html`
-            <dds-carousel>
+            <c4d-carousel>
               ${Card()}${Card({ copy: copyOdd })}${Card()}${Card({
                 copy: copyOdd,
               })}${Card()}
-            </dds-carousel>
+            </c4d-carousel>
           `
         : ''}
-      <dds-text-cta
+      <c4d-text-cta
         slot="footer"
         cta-type="local"
         href="https://www.example.com"
-        >Link action</dds-text-cta
+        >Link action</c4d-text-cta
       >
-    </dds-content-section>
+    </c4d-content-section>
   `;
 };
 
@@ -168,10 +168,10 @@ export default {
   title: 'Components/Content section',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-16 bx--no-gutter">
-            <dds-video-container> ${story()} </dds-video-container>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-16 cds--no-gutter">
+            <c4d-video-container> ${story()} </c4d-video-container>
           </div>
         </div>
       </div>
diff --git a/packages/web-components/src/components/content-section/__tests__/content-section.test.ts b/packages/web-components/src/components/content-section/__tests__/content-section.test.ts
index 82307ca7005..b42135d7fb6 100644
--- a/packages/web-components/src/components/content-section/__tests__/content-section.test.ts
+++ b/packages/web-components/src/components/content-section/__tests__/content-section.test.ts
@@ -1,31 +1,31 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../content-section';
 import '../content-section-heading';
 import '../content-section.scss';
 
 const template = () => html`
-  <dds-content-section>
-    <dds-content-section-heading
-      >Natural Language Processing.</dds-content-section-heading
+  <c4d-content-section>
+    <c4d-content-section-heading
+      >Natural Language Processing.</c4d-content-section-heading
     >
     <p>This is a test.</p>
-  </dds-content-section>
+  </c4d-content-section>
 `;
 
-describe('dds-content-section', function () {
+describe('c4d-content-section', function () {
   it('renders properly', async function () {
     await render(template(), document.body);
     await Promise.resolve();
-    expect(document.body.querySelector('dds-content-section')).toMatchSnapshot({
+    expect(document.body.querySelector('c4d-content-section')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
diff --git a/packages/web-components/src/components/content-section/content-section-copy.ts b/packages/web-components/src/components/content-section/content-section-copy.ts
index 881b63272a1..4ac88a36436 100644
--- a/packages/web-components/src/components/content-section/content-section-copy.ts
+++ b/packages/web-components/src/components/content-section/content-section-copy.ts
@@ -7,22 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './content-section.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSMarkdown from '../markdown/markdown';
+import C4DMarkdown from '../markdown/markdown';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Copy content in content section.
  *
- * @element dds-content-section-copy
+ * @element c4d-content-section-copy
  */
-@customElement(`${ddsPrefix}-content-section-copy`)
-class DDSContentSectionCopy extends StableSelectorMixin(DDSMarkdown) {
+@customElement(`${c4dPrefix}-content-section-copy`)
+class C4DContentSectionCopy extends StableSelectorMixin(C4DMarkdown) {
   @property({ reflect: true })
   slot = 'copy';
 
@@ -32,14 +33,20 @@ class DDSContentSectionCopy extends StableSelectorMixin(DDSMarkdown) {
 
   firstUpdated() {
     this.querySelector('p')?.setAttribute('style', 'all:unset;');
+
+    this.childNodes.forEach((node) => {
+      if (node.nodeType === Node.TEXT_NODE) {
+        this.removeChild(node);
+      }
+    });
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-section-copy`;
+    return `${c4dPrefix}--content-section-copy`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentSectionCopy;
+export default C4DContentSectionCopy;
diff --git a/packages/web-components/src/components/content-section/content-section-heading.ts b/packages/web-components/src/components/content-section/content-section-heading.ts
index 10f651db5c3..59d7408897f 100644
--- a/packages/web-components/src/components/content-section/content-section-heading.ts
+++ b/packages/web-components/src/components/content-section/content-section-heading.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './content-section.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Heading in content section.
  *
- * @element dds-content-section-heading
+ * @element c4d-content-section-heading
  */
-@customElement(`${ddsPrefix}-content-section-heading`)
-class DDSContentSectionHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-section-heading`)
+class C4DContentSectionHeading extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'heading';
 
@@ -40,11 +41,11 @@ class DDSContentSectionHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-section-heading`;
+    return `${c4dPrefix}--content-section-heading`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentSectionHeading;
+export default C4DContentSectionHeading;
diff --git a/packages/web-components/src/components/content-section/content-section.scss b/packages/web-components/src/components/content-section/content-section.scss
index d84311414d7..4b1a725a4f1 100644
--- a/packages/web-components/src/components/content-section/content-section.scss
+++ b/packages/web-components/src/components/content-section/content-section.scss
@@ -5,30 +5,33 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-section/content-section';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-section';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-content-section),
-:host(#{$dds-prefix}-card-section-carousel),
-:host(#{$dds-prefix}-content-section-heading),
-:host(#{$dds-prefix}-content-section-copy) {
+:host(#{$c4d-prefix}-content-section),
+:host(#{$c4d-prefix}-card-section-carousel),
+:host(#{$c4d-prefix}-content-section-heading),
+:host(#{$c4d-prefix}-content-section-copy) {
   display: block;
   overflow-x: hidden;
 }
 
-:host(#{$dds-prefix}-content-section) {
+:host(#{$c4d-prefix}-content-section) {
   &[with-link-list] {
     .#{$prefix}--content-section__body {
       padding: 0 $spacing-05;
     }
   }
 
-  ::slotted(#{$dds-prefix}-content-block-simple) {
+  ::slotted(#{$c4d-prefix}-content-block-simple) {
     padding-bottom: $spacing-10;
   }
 
-  ::slotted(#{$dds-prefix}-link-list) {
-    @include carbon--breakpoint-down(md) {
+  ::slotted(#{$c4d-prefix}-link-list) {
+    @include breakpoint-down(md) {
       display: block;
       margin: 0 $spacing-05;
     }
diff --git a/packages/web-components/src/components/content-section/content-section.ts b/packages/web-components/src/components/content-section/content-section.ts
index f1275512fce..0425d5bf6b0 100644
--- a/packages/web-components/src/components/content-section/content-section.ts
+++ b/packages/web-components/src/components/content-section/content-section.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './content-section.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The Content Section component for use with cardSection
  *
- * @element dds-content-section
+ * @element c4d-content-section
  * @slot heading - Section heading
  */
-@customElement(`${ddsPrefix}-content-section`)
-class DDSContentSection extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-content-section`)
+class C4DContentSection extends StableSelectorMixin(LitElement) {
   /**
    * An optional custom class for children.
    */
@@ -46,7 +45,7 @@ class DDSContentSection extends StableSelectorMixin(LitElement) {
     childItems.forEach((elem) => {
       if (
         (elem as HTMLElement).matches(
-          (this.constructor as typeof DDSContentSection).linkListSelector
+          (this.constructor as typeof C4DContentSection).linkListSelector
         )
       ) {
         (elem as HTMLElement).setAttribute('type', 'end');
@@ -74,23 +73,23 @@ class DDSContentSection extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--content-section`;
+    return `${c4dPrefix}--content-section`;
   }
 
   static get cardGroupSelector() {
-    return `${ddsPrefix}-card-group`;
+    return `${c4dPrefix}-card-group`;
   }
 
   static get linkListSelector() {
-    return `${ddsPrefix}-link-list`;
+    return `${c4dPrefix}-link-list`;
   }
 
   static get carouselSelector() {
-    return `${ddsPrefix}-carousel`;
+    return `${c4dPrefix}-carousel`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSContentSection;
+export default C4DContentSection;
diff --git a/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx b/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx
index d5eddad91e3..de54996fe25 100644
--- a/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/cta-block/__stories__/README.stories.mdx
@@ -3,11 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
-# `<dds-cta-block>`
+# `<cds-cta-block>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-block)
@@ -34,96 +30,121 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<dds-cta-block no-border>
-  <dds-content-block-heading>DDS Content Block Heading</dds-content-block-heading>
-  <dds-content-block-copy>DDS Content Block Copy</dds-content-block-copy>
-
-  <dds-button-group slot="action">
-    <dds-button-group-item href="https://example.com">
+<cds-cta-block no-border>
+  <cds-content-block-heading
+    >C4D Content Block Heading</cds-content-block-heading
+  >
+  <cds-content-block-copy>C4D Content Block Copy</cds-content-block-copy>
+
+  <cds-button-group slot="action">
+    <cds-button-group-item href="https://example.com">
       Secondary Button
-    </dds-button-group-item>
-    <dds-button-group-item ref="https://example.com">
+    </cds-button-group-item>
+    <cds-button-group-item ref="https://example.com">
       Primary button
-    </dds-button-group-item>
-  </dds-button-group>
-
-  <dds-cta-block-item-row>
-    <dds-cta-block-item>
-      <dds-content-item-heading>Get connected</dds-content-item-heading>
-      <dds-content-item-copy
-        >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.</dds-content-item-copy
+    </cds-button-group-item>
+  </cds-button-group>
+
+  <cds-cta-block-item-row>
+    <cds-cta-block-item>
+      <cds-content-item-heading>Get connected</cds-content-item-heading>
+      <cds-content-item-copy
+        >IBM DevOps partners have a wide range of expertise. Find one to build
+        that right solution for you.</cds-content-item-copy
+      >
+      <cds-text-cta
+        slot="footer"
+        cta-type="local"
+        icon-placement="right"
+        href="example.com"
+        >Find a partner</cds-text-cta
       >
-      <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Find a partner</dds-text-cta>
-    </dds-cta-block-item>
-
-    <dds-cta-block-item>
-      <dds-content-item-heading>Learn how</dds-content-item-heading>
-      <dds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</dds-content-item-copy>
-      <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</dds-text-cta>
-    </dds-cta-block-item>
-
-    <dds-cta-block-item>
-      <dds-content-item-heading>Learn how</dds-content-item-heading>
-      <dds-content-item-copy>Dig into more self-directed larning about DevOps methodologies.</dds-content-item-copy>
-      <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</dds-text-cta>
-    </dds-cta-block-item>
-  </dds-cta-block-item-row>
-</dds-cta-block>
+    </cds-cta-block-item>
+
+    <cds-cta-block-item>
+      <cds-content-item-heading>Learn how</cds-content-item-heading>
+      <cds-content-item-copy
+        >Dig into more self-directed larning about DevOps
+        methodologies.</cds-content-item-copy
+      >
+      <cds-text-cta
+        slot="footer"
+        cta-type="local"
+        icon-placement="right"
+        href="example.com"
+        >Browse tutorials</cds-text-cta
+      >
+    </cds-cta-block-item>
+
+    <cds-cta-block-item>
+      <cds-content-item-heading>Learn how</cds-content-item-heading>
+      <cds-content-item-copy
+        >Dig into more self-directed larning about DevOps
+        methodologies.</cds-content-item-copy
+      >
+      <cds-text-cta
+        slot="footer"
+        cta-type="local"
+        icon-placement="right"
+        href="example.com"
+        >Browse tutorials</cds-text-cta
+      >
+    </cds-cta-block-item>
+  </cds-cta-block-item-row>
+</cds-cta-block>
 ```
 
 ### With link list
 
 ```html
-<dds-cta-block>
-  <dds-content-block-heading>DDS Content Block Heading</dds-content-block-heading>
-  <dds-content-block-copy>DDS Content Block Copy</dds-content-block-copy>
-
-  <dds-button-group slot="action">
-    <dds-button-group-item target="${target}" href="https://example.com">
+<cds-cta-block>
+  <cds-content-block-heading
+    >C4D Content Block Heading</cds-content-block-heading
+  >
+  <cds-content-block-copy>C4D Content Block Copy</cds-content-block-copy>
+
+  <cds-button-group slot="action">
+    <cds-button-group-item target="${target}" href="https://example.com">
       Secondary Button
-    </dds-button-group-item>
-    <dds-button-group-item target="${target}" href="https://example.com">
+    </cds-button-group-item>
+    <cds-button-group-item target="${target}" href="https://example.com">
       Primary button
-    </dds-button-group-item>
-  </dds-button-group>
-
-  <dds-link-list slot="link-list" type="end">
-    <dds-link-list-heading>More ways to explore DevOps</dds-link-list-heading>
-    <dds-link-list-item href="https://example.com">
-      Events
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
-      Blogs
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-button-group-item>
+  </cds-button-group>
+
+  <cds-link-list slot="link-list" type="end">
+    <cds-link-list-heading>More ways to explore DevOps</cds-link-list-heading>
+    <cds-link-list-item href="https://example.com"> Events </cds-link-list-item>
+    <cds-link-list-item href="https://example.com"> Blogs </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Training
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Developer resources
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Research
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
-      News
-    </dds-link-list-item>
-  </dds-link-list>
-</dds-cta-block>
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com"> News </cds-link-list-item>
+  </cds-link-list>
+</cds-cta-block>
 ```
 
 ## Props
 
-<Props of="dds-cta-block" />
+<Props of="cds-cta-block" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector    | Compatibility selector              | Description |
 | -------------------------- | ----------------------------------- | ----------- |
-| `<dds-cta-block>`          | `data-autoid="dds--cta-block"`      | Component   |
-| `<dds-cta-block-item>`     | `data-autoid="dds--cta-block-item"` | Component   |
-| `<dds-cta-block-item-row>` | `data-autoid="dds--cta-block-row"`  | Component   |
+| `<cds-cta-block>`          | `data-autoid="cds--cta-block"`      | Component   |
+| `<cds-cta-block-item>`     | `data-autoid="cds--cta-block-item"` | Component   |
+| `<cds-cta-block-item-row>` | `data-autoid="cds--cta-block-row"`  | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx
index 2e5b2bcbde2..a3a1ad803fc 100644
--- a/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/cta-block/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
 
@@ -17,53 +22,77 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
-import DDSCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
+import C4DCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
 
 function App() {
   return (
-  <DDSCTABlock no-border>
-    <DDSContentBlockHeading>DDS Content Block Heading</DDSContentBlockHeading>
-    <DDSContentBlockCopy>DDS Content Block Copy</DDSContentBlockCopy>
-
-    <DDSButtonGroup slot="action">
-      <DDSButtonGroupItem href="https://example.com">
-        Secondary Button
-      </DDSButtonGroupItem>
-      <DDSButtonGroupItem ref="https://example.com">
-        Primary button
-      </DDSButtonGroupItem>
-    </DDSButtonGroup>
-
-    <DDSCTABlockItemRow>
-      <DDSCTABlockItem>
-        <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-        <DDSContentItemCopy>IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.
-        </DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">Find a partner</DDSTextCTA>
-      </DDSCTABlockItem>
-
-      <DDSCTABlockItem>
-        <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-        <DDSContentItemCopy>Dig into more self-directed larning about DevOps methodologies.</DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</DDSTextCTA>
-      </DDSCTABlockItem>
-
-      <DDSCTABlockItem>
-        <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-        <DDSContentItemCopy>Dig into more self-directed larning about DevOps methodologies.</DDSContentItemCopy>
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</DDSTextCTA>
-      </DDSCTABlockItem>
-    </DDSCTABlockItemRow>
-  </DDSCTABlock>
+    <C4DCTABlock no-border>
+      <C4DContentBlockHeading>C4D Content Block Heading</C4DContentBlockHeading>
+      <C4DContentBlockCopy>C4D Content Block Copy</C4DContentBlockCopy>
+
+      <C4DButtonGroup slot="action">
+        <C4DButtonGroupItem href="https://example.com">
+          Secondary Button
+        </C4DButtonGroupItem>
+        <C4DButtonGroupItem ref="https://example.com">
+          Primary button
+        </C4DButtonGroupItem>
+      </C4DButtonGroup>
+
+      <C4DCTABlockItemRow>
+        <C4DCTABlockItem>
+          <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+          <C4DContentItemCopy>
+            IBM DevOps partners have a wide range of expertise. Find one to
+            build that right solution for you.
+          </C4DContentItemCopy>
+          <C4DTextCTA
+            slot="footer"
+            cta-type="local"
+            icon-placement="right"
+            href="example.com">
+            Find a partner
+          </C4DTextCTA>
+        </C4DCTABlockItem>
+
+        <C4DCTABlockItem>
+          <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+          <C4DContentItemCopy>
+            Dig into more self-directed larning about DevOps methodologies.
+          </C4DContentItemCopy>
+          <C4DTextCTA
+            slot="footer"
+            cta-type="local"
+            icon-placement="right"
+            href="example.com">
+            Browse tutorials
+          </C4DTextCTA>
+        </C4DCTABlockItem>
+
+        <C4DCTABlockItem>
+          <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+          <C4DContentItemCopy>
+            Dig into more self-directed larning about DevOps methodologies.
+          </C4DContentItemCopy>
+          <C4DTextCTA
+            slot="footer"
+            cta-type="local"
+            icon-placement="right"
+            href="example.com">
+            Browse tutorials
+          </C4DTextCTA>
+        </C4DCTABlockItem>
+      </C4DCTABlockItemRow>
+    </C4DCTABlock>
   );
 }
 ```
@@ -74,12 +103,14 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector    | Compatibility selector              | Description |
 | -------------------------- | ----------------------------------- | ----------- |
-| `<dds-cta-block>`          | `data-autoid="dds--cta-block"`      | Component   |
-| `<dds-cta-block-item>`     | `data-autoid="dds--cta-block-item"` | Component   |
-| `<dds-cta-block-item-row>` | `data-autoid="dds--cta-block-row"`  | Component   |
+| `<cds-cta-block>`          | `data-autoid="cds--cta-block"`      | Component   |
+| `<cds-cta-block-item>`     | `data-autoid="cds--cta-block-item"` | Component   |
+| `<cds-cta-block-item-row>` | `data-autoid="cds--cta-block-row"`  | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx
index 39feacbc888..75c76666c53 100644
--- a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx
+++ b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.react.tsx
@@ -15,22 +15,22 @@ import Launch20 from '@carbon/icons-react/es/launch/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
-import DDSCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import DDSTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
-import DDSTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
+import C4DCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
+import C4DTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
 
 import content from '../../cta-section/__stories__/content';
 
@@ -48,25 +48,31 @@ const iconOptions = {
 };
 
 const renderCTA = {
-  text: renderIcon => (
-    <DDSTextCTA slot="action" cta-type={renderIcon === iconMap.Launch20 ? 'external' : 'local'} href="https://example.com">
+  text: (renderIcon) => (
+    <C4DTextCTA
+      slot="action"
+      cta-type={renderIcon === iconMap.Launch20 ? 'external' : 'local'}
+      href="https://example.com">
       CTA text link
-    </DDSTextCTA>
+    </C4DTextCTA>
   ),
-  button: renderIcon => (
-    <DDSButtonCTA slot="action" cta-type={renderIcon === iconMap.Launch20 ? 'external' : 'local'} href="https://example.com">
+  button: (renderIcon) => (
+    <C4DButtonCTA
+      slot="action"
+      cta-type={renderIcon === iconMap.Launch20 ? 'external' : 'local'}
+      href="https://example.com">
       CTA text link
-    </DDSButtonCTA>
+    </C4DButtonCTA>
   ),
   buttonGroup: (renderIcon, target) => (
-    <DDSButtonGroup slot="action">
-      <DDSButtonGroupItem target={target} href="https://example.com">
+    <C4DButtonGroup slot="action">
+      <C4DButtonGroupItem target={target} href="https://example.com">
         Secondary Button {renderIcon}
-      </DDSButtonGroupItem>
-      <DDSButtonGroupItem target={target} href="https://example.com">
+      </C4DButtonGroupItem>
+      <C4DButtonGroupItem target={target} href="https://example.com">
         Primary Button {renderIcon}
-      </DDSButtonGroupItem>
-    </DDSButtonGroup>
+      </C4DButtonGroupItem>
+    </C4DButtonGroup>
   ),
 };
 
@@ -77,58 +83,64 @@ const ctaTypeOptions = {
 };
 
 const contentItemTextCTA = ({ heading, copy, links }) => (
-  <DDSCTABlockItem>
-    <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-    <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-    {links.map(elem => (
-      <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href={elem.href}>
+  <C4DCTABlockItem>
+    <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+    <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+    {links.map((elem) => (
+      <C4DTextCTA
+        slot="footer"
+        cta-type="local"
+        icon-placement="right"
+        href={elem.href}>
         {elem.copy}
-      </DDSTextCTA>
+      </C4DTextCTA>
     ))}
-  </DDSCTABlockItem>
+  </C4DCTABlockItem>
 );
 
 const renderItems = (item, count) => (
-  <DDSCTABlockItemRow no-border>{count.map((_, index) => item({ ...content[index] }))}</DDSCTABlockItemRow>
+  <C4DCTABlockItemRow no-border>
+    {count.map((_, index) => item({ ...content[index] }))}
+  </C4DCTABlockItemRow>
 );
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading, border, copy, renderIcon, cta } = args?.CTABlock ?? {};
   const target = renderIcon === iconMap.Launch20 ? '_blank' : '';
 
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent!.shadowRoot!.innerHTML = heading;
   }
 
   return (
-    <DDSCTABlock no-border={!border || null}>
-      <DDSContentBlockHeading>{heading || null}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
+    <C4DCTABlock no-border={!border || null}>
+      <C4DContentBlockHeading>{heading || null}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
       {renderCTA[cta](renderIcon, target)}
-    </DDSCTABlock>
+    </C4DCTABlock>
   );
 };
 
-export const WithContentItems = args => {
+export const WithContentItems = (args) => {
   const { heading, border, copy, renderIcon, cta } = args?.CTABlock ?? {};
   const { contentItemType, contentItemCount } = args?.WithContentItems ?? {};
   const target = renderIcon === iconMap.Launch20 ? '_blank' : '';
 
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent!.shadowRoot!.innerHTML = heading;
   }
 
   return (
-    <DDSCTABlock no-border={!border || null}>
-      <DDSContentBlockHeading>{heading || null}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{copy || null}</DDSContentBlockCopy>
+    <C4DCTABlock no-border={!border || null}>
+      <C4DContentBlockHeading>{heading || null}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{copy || null}</C4DContentBlockCopy>
       {renderCTA[cta](renderIcon, target)}
       {renderItems(contentItemType, contentItemCount)}
-    </DDSCTABlock>
+    </C4DCTABlock>
   );
 };
 
@@ -146,44 +158,44 @@ WithContentItems.story = {
   },
 };
 
-export const WithLinkList = args => {
+export const WithLinkList = (args) => {
   const { border, heading, copy, renderIcon, cta } = args?.CTABlock ?? {};
   const target = renderIcon === iconMap.Launch20 ? '_blank' : '';
 
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('cds-content-block-heading');
 
   if (headingComponent) {
     headingComponent!.shadowRoot!.innerHTML = heading;
   }
 
   return (
-    <DDSCTABlock no-border={!border || null}>
-      <DDSContentBlockHeading>{heading || null}</DDSContentBlockHeading>
-      <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
+    <C4DCTABlock no-border={!border || null}>
+      <C4DContentBlockHeading>{heading || null}</C4DContentBlockHeading>
+      <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
       {renderCTA[cta](renderIcon, target)}
 
-      <DDSLinkList slot="link-list" type="end">
-        <DDSLinkListHeading>More ways to explore DevOps</DDSLinkListHeading>
-        <DDSLinkListItem href="https://example.com">
+      <C4DLinkList slot="link-list" type="end">
+        <C4DLinkListHeading>More ways to explore DevOps</C4DLinkListHeading>
+        <C4DLinkListItem href="https://example.com">
           Events <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Blogs <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Training <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Developer resources <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Research <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           News <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-    </DDSCTABlock>
+        </C4DLinkListItem>
+      </C4DLinkList>
+    </C4DCTABlock>
   );
 };
 
@@ -191,30 +203,30 @@ WithLinkList.story = {
   name: 'With link list',
 };
 
-export const WithinTabs = args => {
+export const WithinTabs = (args) => {
   const { contentItemType, contentItemCount } = args?.WithinTabs ?? {};
 
   return (
-    <DDSTabsExtended orientation="horizontal">
-      <DDSTab label="Tab 1" selected>
-        <DDSCTABlock>
-          <DDSContentBlockHeading>Tab 1</DDSContentBlockHeading>
+    <C4DTabsExtended orientation="horizontal">
+      <C4DTab label="Tab 1" selected>
+        <C4DCTABlock>
+          <C4DContentBlockHeading>Tab 1</C4DContentBlockHeading>
           {renderItems(contentItemType, contentItemCount)}
-        </DDSCTABlock>
-      </DDSTab>
-      <DDSTab label="Tab 2">
-        <DDSCTABlock>
-          <DDSContentBlockHeading>Tab 2</DDSContentBlockHeading>
+        </C4DCTABlock>
+      </C4DTab>
+      <C4DTab label="Tab 2">
+        <C4DCTABlock>
+          <C4DContentBlockHeading>Tab 2</C4DContentBlockHeading>
           {renderItems(contentItemType, contentItemCount)}
-        </DDSCTABlock>
-      </DDSTab>
-      <DDSTab label="Tab 3">
-        <DDSCTABlock>
-          <DDSContentBlockHeading>Tab 3</DDSContentBlockHeading>
+        </C4DCTABlock>
+      </C4DTab>
+      <C4DTab label="Tab 3">
+        <C4DCTABlock>
+          <C4DContentBlockHeading>Tab 3</C4DContentBlockHeading>
           {renderItems(contentItemType, contentItemCount)}
-        </DDSCTABlock>
-      </DDSTab>
-    </DDSTabsExtended>
+        </C4DCTABlock>
+      </C4DTab>
+    </C4DTabsExtended>
   );
 };
 
@@ -236,13 +248,13 @@ WithinTabs.story = {
 export default {
   title: 'Components/CTA block',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
           <style type="text/css">{styles.cssText}</style>
-          <div className="bx--grid">
-            <div className="bx--row">
-              <div className="bx--col-lg-12 bx--no-gutter">{story()}</div>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <div className="cds--col-lg-12 cds--no-gutter">{story()}</div>
             </div>
           </div>
         </>
@@ -258,7 +270,8 @@ export default {
         border: boolean('Border', false),
         copy: 'Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.',
         cta: select('CTA type', ctaTypeOptions, ctaTypeOptions['Button group']),
-        renderIcon: iconMap[select(`Icon`, iconOptions, iconOptions['Arrow Right']) ?? 0],
+        renderIcon:
+          iconMap[select(`Icon`, iconOptions, iconOptions['Arrow Right']) ?? 0],
       }),
     },
   },
diff --git a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.scss b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.scss
index 5ce06ed0ed9..d900ef3436f 100644
--- a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.scss
+++ b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.scss
@@ -6,11 +6,13 @@
  * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
 
-.bx--no-gutter {
-  @include carbon--breakpoint-down('md') {
-    padding-right: 1rem;
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+.cds--no-gutter {
+  @include breakpoint-down(md) {
+    padding-right: $spacing-05;
   }
 }
diff --git a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.ts b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.ts
index 2f596df5383..499ea625fe7 100644
--- a/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.ts
+++ b/packages/web-components/src/components/cta-block/__stories__/cta-block.stories.ts
@@ -10,8 +10,8 @@
 import { boolean, number, select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import Launch20 from '../../../internal/vendor/@carbon/web-components/icons/launch/20';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import readme from './README.stories.mdx';
 import styles from './cta-block.stories.scss';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -33,30 +33,30 @@ const iconOptions = {
 
 const renderCTA = {
   text: (renderIcon) => html`
-    <dds-text-cta
+    <c4d-text-cta
       slot="action"
       cta-type=${renderIcon === iconMap.Launch20 ? 'external' : 'local'}
       href="https://example.com"
-      >CTA text link</dds-text-cta
+      >CTA text link</c4d-text-cta
     >
   `,
   button: (renderIcon) => html`
-    <dds-button-cta
+    <c4d-button-cta
       slot="action"
       cta-type=${renderIcon === iconMap.Launch20 ? 'external' : 'local'}
       href="https://example.com"
-      >CTA Button link</dds-button-cta
+      >CTA Button link</c4d-button-cta
     >
   `,
   buttonGroup: (renderIcon, target) => html`
-    <dds-button-group slot="action">
-      <dds-button-group-item target="${target}" href="https://example.com">
+    <c4d-button-group slot="action">
+      <c4d-button-group-item target="${target}" href="https://example.com">
         Secondary Button ${renderIcon}
-      </dds-button-group-item>
-      <dds-button-group-item target="${target}" href="https://example.com">
+      </c4d-button-group-item>
+      <c4d-button-group-item target="${target}" href="https://example.com">
         Primary button ${renderIcon}
-      </dds-button-group-item>
-    </dds-button-group>
+      </c4d-button-group-item>
+    </c4d-button-group>
   `,
 };
 
@@ -67,29 +67,29 @@ const ctaTypeOptions = {
 };
 
 const contentItemTextCTA = ({ heading, copy, links }) => html`
-  <dds-cta-block-item>
-    <dds-content-item-heading>${heading}</dds-content-item-heading>
-    <dds-content-item-copy>${copy}</dds-content-item-copy>
+  <c4d-cta-block-item>
+    <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+    <c4d-content-item-copy>${copy}</c4d-content-item-copy>
     ${links.map(
       (elem) =>
         html`
-          <dds-text-cta
+          <c4d-text-cta
             slot="footer"
             cta-type="local"
             icon-placement="right"
             href="${elem.href}"
-            >${elem.copy}</dds-text-cta
+            >${elem.copy}</c4d-text-cta
           >
         `
     )}
-  </dds-cta-block-item>
+  </c4d-cta-block-item>
 `;
 
 const renderItems = (item, count) => {
   return html`
-    <dds-cta-block-item-row no-border>
+    <c4d-cta-block-item-row no-border>
       ${count.map((_, index) => item({ ...content[index] }))}
-    </dds-cta-block-item-row>
+    </c4d-cta-block-item-row>
   `;
 };
 
@@ -97,20 +97,20 @@ export const Default = (args) => {
   const { heading, border, copy, renderIcon, cta } = args?.CTABlock ?? {};
   const target = renderIcon === iconMap.Launch20 ? '_blank' : '';
 
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent) {
     headingComponent!.shadowRoot!.innerHTML = heading;
   }
 
   return html`
-    <dds-cta-block ?no-border=${!border}>
-      <dds-content-block-heading
-        >${ifNonNull(heading)}</dds-content-block-heading
+    <c4d-cta-block ?no-border=${!border}>
+      <c4d-content-block-heading
+        >${ifDefined(heading)}</c4d-content-block-heading
       >
-      <dds-content-block-copy>${copy}</dds-content-block-copy>
+      <c4d-content-block-copy>${copy}</c4d-content-block-copy>
       ${renderCTA[cta](renderIcon, target)}
-    </dds-cta-block>
+    </c4d-cta-block>
   `;
 };
 
@@ -119,21 +119,21 @@ export const WithContentItems = (args) => {
   const { contentItemType, contentItemCount } = args?.WithContentItems ?? {};
   const target = renderIcon === iconMap.Launch20 ? '_blank' : '';
 
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent) {
     headingComponent!.shadowRoot!.innerHTML = heading;
   }
 
   return html`
-    <dds-cta-block ?no-border=${!border}>
-      <dds-content-block-heading
-        >${ifNonNull(heading)}</dds-content-block-heading
+    <c4d-cta-block ?no-border=${!border}>
+      <c4d-content-block-heading
+        >${ifDefined(heading)}</c4d-content-block-heading
       >
-      <dds-content-block-copy>${ifNonNull(copy)}</dds-content-block-copy>
+      <c4d-content-block-copy>${ifDefined(copy)}</c4d-content-block-copy>
       ${renderCTA[cta](renderIcon, target)}
       ${renderItems(contentItemType, contentItemCount)}
-    </dds-cta-block>
+    </c4d-cta-block>
   `;
 };
 
@@ -163,45 +163,45 @@ export const WithLinkList = (args) => {
   const { border, heading, copy, renderIcon, cta } = args?.CTABlock ?? {};
   const target = renderIcon === iconMap.Launch20 ? '_blank' : '';
 
-  const headingComponent = document.querySelector('dds-content-block-heading');
+  const headingComponent = document.querySelector('c4d-content-block-heading');
 
   if (headingComponent) {
     headingComponent!.shadowRoot!.innerHTML = heading;
   }
 
   return html`
-    <dds-cta-block ?no-border=${!border}>
-      <dds-content-block-heading
-        >${ifNonNull(heading)}</dds-content-block-heading
+    <c4d-cta-block ?no-border=${!border}>
+      <c4d-content-block-heading
+        >${ifDefined(heading)}</c4d-content-block-heading
       >
-      <dds-content-block-copy>${ifNonNull(copy)}</dds-content-block-copy>
+      <c4d-content-block-copy>${ifDefined(copy)}</c4d-content-block-copy>
 
       ${renderCTA[cta](renderIcon, target)}
 
-      <dds-link-list slot="link-list" type="end">
-        <dds-link-list-heading
-          >More ways to explore DevOps</dds-link-list-heading
+      <c4d-link-list slot="link-list" type="end">
+        <c4d-link-list-heading
+          >More ways to explore DevOps</c4d-link-list-heading
         >
-        <dds-link-list-item href="https://example.com">
+        <c4d-link-list-item href="https://example.com">
           Events ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Blogs ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Training ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Developer resources ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Research ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           News ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-      </dds-link-list>
-    </dds-cta-block>
+        </c4d-link-list-item>
+      </c4d-link-list>
+    </c4d-cta-block>
   `;
 };
 
@@ -213,26 +213,26 @@ export const WithinTabs = (args) => {
   const { contentItemType, contentItemCount } = args?.WithinTabs ?? {};
 
   return html`
-    <dds-tabs-extended orientation="horizontal">
-      <dds-tab label="Tab 1" selected>
-        <dds-cta-block>
-          <dds-content-block-heading>Tab 1</dds-content-block-heading>
+    <c4d-tabs-extended orientation="horizontal">
+      <c4d-tab label="Tab 1" selected>
+        <c4d-cta-block>
+          <c4d-content-block-heading>Tab 1</c4d-content-block-heading>
           ${renderItems(contentItemType, contentItemCount)}
-        </dds-cta-block>
-      </dds-tab>
-      <dds-tab label="Tab 2">
-        <dds-cta-block>
-          <dds-content-block-heading>Tab 2</dds-content-block-heading>
+        </c4d-cta-block>
+      </c4d-tab>
+      <c4d-tab label="Tab 2">
+        <c4d-cta-block>
+          <c4d-content-block-heading>Tab 2</c4d-content-block-heading>
           ${renderItems(contentItemType, contentItemCount)}
-        </dds-cta-block>
-      </dds-tab>
-      <dds-tab label="Tab 3">
-        <dds-cta-block>
-          <dds-content-block-heading>Tab 3</dds-content-block-heading>
+        </c4d-cta-block>
+      </c4d-tab>
+      <c4d-tab label="Tab 3">
+        <c4d-cta-block>
+          <c4d-content-block-heading>Tab 3</c4d-content-block-heading>
           ${renderItems(contentItemType, contentItemCount)}
-        </dds-cta-block>
-      </dds-tab>
-    </dds-tabs-extended>
+        </c4d-cta-block>
+      </c4d-tab>
+    </c4d-tabs-extended>
   `;
 };
 
@@ -266,9 +266,9 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--no-gutter">${story()}</div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/cta-block/__tests__/cta-block.test.ts b/packages/web-components/src/components/cta-block/__tests__/cta-block.test.ts
index b94675b1c69..4002fcbff7a 100644
--- a/packages/web-components/src/components/cta-block/__tests__/cta-block.test.ts
+++ b/packages/web-components/src/components/cta-block/__tests__/cta-block.test.ts
@@ -7,29 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../cta-block';
 
 const template = (props?) => {
   const { copy, heading, children } = props ?? {};
   return html`
-    <dds-cta-block>
-      <dds-content-block-heading
-        >${ifNonNull(heading)}</dds-content-block-heading
+    <c4d-cta-block>
+      <c4d-content-block-heading
+        >${ifDefined(heading)}</c4d-content-block-heading
       >
-      <dds-cta-block-copy>${ifNonNull(copy)}</dds-cta-block-copy>
+      <c4d-cta-block-copy>${ifDefined(copy)}</c4d-cta-block-copy>
       ${children}
-    </dds-cta-block>
+    </c4d-cta-block>
   `;
 };
 
-describe('dds-cta-block', function () {
+describe('c4d-cta-block', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-cta-block')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-cta-block')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -46,10 +46,10 @@ describe('dds-cta-block', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle of `<dds-cta-section>`
+      await Promise.resolve(); // The update cycle of `<c4d-cta-section>`
       await Promise.resolve(); // The update cycle that fires `slotchange` event
       await Promise.resolve(); // The update cycle that updates content upon `slotchange` event
-      expect(document.body.querySelector('dds-cta-block')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-cta-block')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/cta-block/cta-block-item-row.ts b/packages/web-components/src/components/cta-block/cta-block-item-row.ts
index 0bcf79b1cf7..afcd261e63a 100644
--- a/packages/web-components/src/components/cta-block/cta-block-item-row.ts
+++ b/packages/web-components/src/components/cta-block/cta-block-item-row.ts
@@ -7,9 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, state, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import ParentVisibilityMixin from '../../component-mixins/parent-visibility/parent-visibility';
@@ -17,17 +17,16 @@ import ParentVisibilityMixin from '../../component-mixins/parent-visibility/pare
 import styles from './cta-block.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The CTA BLOCK ITEM ROW component
  *
- * @element dds-cta-block-item-row
+ * @element c4d-cta-block-item-row
  * @slot .
  */
-@customElement(`${ddsPrefix}-cta-block-item-row`)
-class DDSCTABlockItemRow extends ParentVisibilityMixin(
+@customElement(`${c4dPrefix}-cta-block-item-row`)
+class C4DCTABlockItemRow extends ParentVisibilityMixin(
   StableSelectorMixin(LitElement)
 ) {
   /** Defines if the bottom border is rendered */
@@ -107,7 +106,7 @@ class DDSCTABlockItemRow extends ParentVisibilityMixin(
   protected _handleSlotChange(event: Event) {
     const { target } = event;
     const { selectorItem, selectorItemHeading, selectorItemCopy } = this
-      .constructor as typeof DDSCTABlockItemRow;
+      .constructor as typeof C4DCTABlockItemRow;
 
     const childItems = (target as HTMLSlotElement)
       .assignedNodes()
@@ -159,32 +158,37 @@ class DDSCTABlockItemRow extends ParentVisibilityMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--cta-block-item-row`;
+    return `${c4dPrefix}--cta-block-item-row`;
   }
 
   /**
    * A selector that will return the CTA Section item
    */
   static get selectorItem() {
-    return `${ddsPrefix}-cta-block-item`;
+    return `${c4dPrefix}-cta-block-item`;
   }
 
   /**
    * A selector that will return the CTA Section item's heading
    */
   static get selectorItemHeading() {
-    return `${ddsPrefix}-content-item-heading`;
+    return `${c4dPrefix}-content-item-heading`;
   }
 
   /**
    * A selector that will return the CTA Section item's copy
    */
   static get selectorItemCopy() {
-    return `${ddsPrefix}-content-item-copy`;
+    return `${c4dPrefix}-content-item-copy`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  'The cta-block-item-row component has been deprecated in favor of the content-section/block and content-item components. ' +
+    'See content-section/block and content-items documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCTABlockItemRow;
+export default C4DCTABlockItemRow;
diff --git a/packages/web-components/src/components/cta-block/cta-block-item.ts b/packages/web-components/src/components/cta-block/cta-block-item.ts
index 795b716d188..31abe865af4 100644
--- a/packages/web-components/src/components/cta-block/cta-block-item.ts
+++ b/packages/web-components/src/components/cta-block/cta-block-item.ts
@@ -7,17 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, css, state, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html, TemplateResult } from 'lit';
+import { state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentItem from '../content-item/content-item';
+import C4DContentItem from '../content-item/content-item';
 
 import styles from './cta-block.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
@@ -31,15 +30,15 @@ const slotExistencePropertyNames = {
 /**
  * The CTA BLOCK ITEM component
  *
- * @element dds-cta-block-item
+ * @element c4d-cta-block-item
  * @slot statistics
  * @slot media
  * @slot heading
  * @slot .
  * @slot footer
  */
-@customElement(`${ddsPrefix}-cta-block-item`)
-class DDSCTABlockItem extends StableSelectorMixin(DDSContentItem) {
+@customElement(`${c4dPrefix}-cta-block-item`)
+class C4DCTABlockItem extends StableSelectorMixin(C4DContentItem) {
   /**
    * `true` if there are CTA media in the content item area.
    */
@@ -61,12 +60,6 @@ class DDSCTABlockItem extends StableSelectorMixin(DDSContentItem) {
     const { name } = target as HTMLSlotElement;
     const hasContent = (target as HTMLSlotElement)
       .assignedNodes()
-      .filter(
-        (elem) =>
-          !(elem as HTMLElement).matches?.(
-            (this.constructor as typeof DDSCTABlockItem).selectorButtonGroup
-          )
-      )
       .some(
         (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
       );
@@ -110,7 +103,7 @@ class DDSCTABlockItem extends StableSelectorMixin(DDSContentItem) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--cta-block-item`;
+    return `${c4dPrefix}--cta-block-item`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -121,5 +114,10 @@ class DDSCTABlockItem extends StableSelectorMixin(DDSContentItem) {
   }
 }
 
+console.warn(
+  'The cta-block-item component has been deprecated in favor of the content-section/block and content-item components. ' +
+    'See content-section/block and content-items documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCTABlockItem;
+export default C4DCTABlockItem;
diff --git a/packages/web-components/src/components/cta-block/cta-block.scss b/packages/web-components/src/components/cta-block/cta-block.scss
index 5e7420ae1ab..81e062a54b0 100644
--- a/packages/web-components/src/components/cta-block/cta-block.scss
+++ b/packages/web-components/src/components/cta-block/cta-block.scss
@@ -5,30 +5,36 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/cta-block/index';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-
-:host(#{$dds-prefix}-cta-block) {
-  @include cta-block--pattern;
-
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/themes' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/cta-block';
+@use '@carbon/ibmdotcom-styles/scss/components/layout';
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+
+:host(#{$c4d-prefix}-cta-block) {
   display: block;
 
   .#{$prefix}--content-layout {
-    @include carbon--breakpoint('sm') {
-      padding-left: $carbon--layout-01;
-      padding-right: $carbon--layout-01;
+    @include breakpoint(sm) {
+      padding-left: $spacing-05;
+      padding-right: $spacing-05;
     }
 
-    @include carbon--breakpoint('md') {
-      padding-bottom: $carbon--layout-03;
+    @include breakpoint(md) {
+      padding-bottom: $spacing-07;
     }
 
-    @include carbon--breakpoint('lg') {
-      padding-bottom: $carbon--layout-06;
+    @include breakpoint(lg) {
+      padding-bottom: $spacing-12;
     }
 
     &.#{$prefix}--content-layout--border {
-      border-bottom: 1px solid $ui-04;
+      border-bottom: 1px solid $border-strong-01;
     }
 
     ::slotted([slot]) {
@@ -37,12 +43,12 @@
     }
   }
 
-  ::slotted(#{$dds-prefix}-content-block-heading) {
-    @include dds--make-col(8, 12);
+  ::slotted(#{$c4d-prefix}-content-block-heading) {
+    @include make-col(8, 12);
 
     margin-left: 0;
     padding-left: 0;
-    margin-block-end: $carbon--spacing-07;
+    margin-block-end: $spacing-07;
   }
 
   .#{$prefix}--content-layout__body--tight {
@@ -50,86 +56,86 @@
     .#{$prefix}--helper-wrapper {
       margin-block-start: 0;
 
-      @include carbon--breakpoint('md') {
-        margin-block-start: $carbon--spacing-07;
+      @include breakpoint(md) {
+        margin-block-start: $spacing-07;
       }
     }
   }
 
-  ::slotted(#{$dds-prefix}-content-block-copy) {
-    @include dds--make-col(8, 12);
-    @include carbon--type-style('expressive-heading-03', true);
+  ::slotted(#{$c4d-prefix}-content-block-copy) {
+    @include make-col(8, 12);
+    @include type-style('fluid-heading-03', true);
 
     max-width: 640px;
     padding-left: 0;
 
-    @include carbon--breakpoint('sm') {
+    @include breakpoint(sm) {
       width: 100%;
     }
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       width: 90%;
     }
   }
 
-  ::slotted(#{$dds-prefix}-button-group[slot='action']) {
+  ::slotted(#{$c4d-prefix}-button-group[slot='action']) {
     margin-block-end: 0;
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       margin-block-start: 0;
     }
   }
 
-  ::slotted(#{$dds-prefix}-button-group:last-child) {
+  ::slotted(#{$c4d-prefix}-button-group:last-child) {
     margin-block-end: 0;
   }
 
   .#{$prefix}--content-layout__link-list {
-    margin-block-start: $carbon--spacing-07;
+    margin-block-start: $spacing-07;
 
-    @include carbon--breakpoint('md') {
-      margin-block-start: $carbon--spacing-10;
+    @include breakpoint(md) {
+      margin-block-start: $spacing-10;
     }
   }
 
-  ::slotted(#{$dds-prefix}-link-list) {
+  ::slotted(#{$c4d-prefix}-link-list) {
     display: block;
     padding-bottom: 0;
 
-    @include carbon--breakpoint('md') {
-      margin-block-end: $carbon--layout-03;
+    @include breakpoint(md) {
+      margin-block-end: $spacing-07;
     }
   }
 
   .#{$prefix}--helper-wrapper {
-    margin-top: $carbon--spacing-10;
+    margin-top: $spacing-10;
   }
 }
 
-:host(#{$dds-prefix}-cta-section-item-heading) {
-  @include carbon--type-style('expressive-heading-02', true);
+:host(#{$c4d-prefix}-cta-section-item-heading) {
+  @include type-style('heading-02', true);
 
   display: block;
   width: 100%;
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint(md) {
     width: 90%;
   }
 }
 
-:host(#{$dds-prefix}-cta-block-item-row) {
+:host(#{$c4d-prefix}-cta-block-item-row) {
   width: 100%;
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: auto;
-  row-gap: $carbon--spacing-07;
+  row-gap: $spacing-07;
   position: relative;
 
   // Hide last row's items' bottom border
   &::after {
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       content: '';
-      background-color: $ui-background;
+      background-color: $background;
       height: 3px;
       position: absolute;
       bottom: -1px;
@@ -139,73 +145,73 @@
     }
   }
 
-  ::slotted(#{$dds-prefix}-cta-block-item) {
-    border-bottom: 1px solid $ui-03;
+  ::slotted(#{$c4d-prefix}-cta-block-item) {
+    border-bottom: 1px solid $border-subtle-01;
   }
 
-  ::slotted(#{$dds-prefix}-cta-block-item:last-of-type) {
-    @include carbon--breakpoint-down('md') {
+  ::slotted(#{$c4d-prefix}-cta-block-item:last-of-type) {
+    @include breakpoint-down(md) {
       border: 0;
       padding-bottom: 0;
     }
   }
 
-  @include carbon--breakpoint('md') {
+  @include breakpoint(md) {
     grid-template-columns: repeat(2, 1fr);
   }
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint(lg) {
     grid-template-columns: repeat(3, 1fr);
   }
 }
 
-.#{$dds-prefix}-ce--cta-block__col {
-  @include dds--make-col(2, 3);
+.#{$c4d-prefix}-ce--cta-block__col {
+  @include make-col(2, 3);
 }
 
-:host(#{$dds-prefix}-cta-block-item) {
-  @include carbon--make-col-ready;
+:host(#{$c4d-prefix}-cta-block-item) {
+  @include make-col-ready;
 
   width: 100%;
   margin-top: 0;
   margin-bottom: 0;
-  padding-bottom: $carbon--spacing-07;
+  padding-bottom: $spacing-07;
   position: relative;
   display: flex;
   flex-direction: column;
 
-  ::slotted(#{$dds-prefix}-text-cta) {
+  ::slotted(#{$c4d-prefix}-text-cta) {
     margin-left: 0;
-    margin-bottom: $carbon--spacing-03;
+    margin-bottom: $spacing-03;
   }
 
-  ::slotted(#{$dds-prefix}-text-cta:last-child) {
+  ::slotted(#{$c4d-prefix}-text-cta:last-child) {
     margin-bottom: 0;
   }
 
   ::slotted(svg) {
     display: block;
-    height: rem(80px);
-    width: rem(80px);
+    height: $spacing-11;
+    width: $spacing-11;
   }
 
   .#{$prefix}--cta-block-item__statitics {
-    @include carbon--type-style('display-02', true);
+    @include type-style('fluid-display-02', true);
 
     ::slotted(*[slot='statitics']) {
-      margin-bottom: $carbon--layout-03;
+      margin-bottom: $spacing-07;
     }
   }
 
   .#{$prefix}--cta-block-item__media {
-    margin-bottom: $carbon--layout-03;
+    margin-bottom: $spacing-07;
   }
 
   .#{$prefix}--content-item__cta {
     margin-top: 0;
   }
 
-  ::slotted(#{$dds-prefix}-image-logo) {
+  ::slotted(#{$c4d-prefix}-image-logo) {
     /* stylelint-disable */
     aspect-ratio: var(--logo-ratio);
     /* stylelint-enable */
diff --git a/packages/web-components/src/components/cta-block/cta-block.ts b/packages/web-components/src/components/cta-block/cta-block.ts
index 58a00ae7abd..580b851a7b4 100644
--- a/packages/web-components/src/components/cta-block/cta-block.ts
+++ b/packages/web-components/src/components/cta-block/cta-block.ts
@@ -7,18 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, state, property, TemplateResult } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { TemplateResult, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
 import styles from './cta-block.scss';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
@@ -31,12 +30,12 @@ const slotExistencePropertyNames = {
 /**
  * The CTA BLOCK pattern
  *
- * @element dds-cta-block
+ * @element c4d-cta-block
  * @slot heading - The text heading.
  * @slot action - The CTA Buttons.
  */
-@customElement(`${ddsPrefix}-cta-block`)
-class DDSCTABlock extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-cta-block`)
+class C4DCTABlock extends StableSelectorMixin(C4DContentBlock) {
   @property({ type: Boolean, attribute: 'no-border', reflect: true })
   _noBorder = false;
 
@@ -164,7 +163,7 @@ class DDSCTABlock extends StableSelectorMixin(DDSContentBlock) {
    * @returns The main content.
    */
   protected _renderInnerBody(): TemplateResult | string | void {
-    // Note: The media content in `<dds-cta-section>` is not supported at the time of writing this code
+    // Note: The media content in `<c4d-cta-section>` is not supported at the time of writing this code
     return html`
       ${this._renderActions()}${this._renderLinkList()}${this._renderContent()}
     `;
@@ -186,11 +185,16 @@ class DDSCTABlock extends StableSelectorMixin(DDSContentBlock) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--cta-block`;
+    return `${c4dPrefix}--cta-block`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  'The cta-block component has been deprecated in favor of the content-section/block and content-item components. ' +
+    'See content-section/block and content-items documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCTABlock;
+export default C4DCTABlock;
diff --git a/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx b/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx
index 8a7e51ad5d1..95f46a836d5 100644
--- a/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/cta-section/__stories__/README.stories.mdx
@@ -3,11 +3,7 @@ import markdownContents from '../../../../docs/markdown-contents.md';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
-# `<dds-cta-section>`
+# `<cds-cta-section>`
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta-section)
@@ -16,7 +12,9 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 ## Breaking Changes
 
-As of `Carbon for IBM.com Web Components v1.3.0`, the API for `<dds-cta-section>` has changed. Be sure to update to the latest version of CTA Section if upgrading from a previous version.
+As of `Carbon for IBM.com Web Components v1.3.0`, the API for
+`<cds-cta-section>` has changed. Be sure to update to the latest version of CTA
+Section if upgrading from a previous version.
 
 ## Getting started
 
@@ -42,42 +40,82 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
 ### HTML
 
 ```html
-<dds-cta-section>
-  <dds-content-section-heading>Related products and services</dds-content-section-heading>
+<cds-cta-section>
+  <cds-content-section-heading
+    >Related products and services</cds-content-section-heading
+  >
 
-  <dds-cta-block>
-    <dds-content-block-heading>DDS Content Block Heading</dds-content-block-heading>
-    <dds-content-block-copy>DDS Content Block Copy</dds-content-block-copy>
-    <dds-text-cta slot="action" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</dds-text-cta>
+  <cds-cta-block>
+    <cds-content-block-heading
+      >C4D Content Block Heading</cds-content-block-heading
+    >
+    <cds-content-block-copy>C4D Content Block Copy</cds-content-block-copy>
+    <cds-text-cta
+      slot="action"
+      cta-type="local"
+      icon-placement="right"
+      href="example.com"
+      >Browse tutorials</cds-text-cta
+    >
 
-    <dds-cta-block-item-row no-border>
-      <dds-cta-block-item>
+    <cds-cta-block-item-row no-border>
+      <cds-cta-block-item>
         <span slot="statistics">10%</span>
-        <dds-content-item-heading>Get connected</dds-content-item-heading>
-        <dds-content-item-copy
-          >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for
-          you.</dds-content-item-copy
+        <cds-content-item-heading>Get connected</cds-content-item-heading>
+        <cds-content-item-copy
+          >IBM DevOps partners have a wide range of expertise. Find one to build
+          that right solution for you.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://www.example.com"
+          >Find a partner</cds-text-cta
         >
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Find a partner</dds-text-cta>
-      </dds-cta-block-item>
+      </cds-cta-block-item>
 
-      <dds-cta-block-item>
+      <cds-cta-block-item>
         <span slot="statistics">11%</span>
-        <dds-content-item-heading>Learn how</dds-content-item-heading>
-        <dds-content-item-copy>Dig into more self-directed learning about DevOps methodologies.</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</dds-text-cta>
-      </dds-cta-block-item>
+        <cds-content-item-heading>Learn how</cds-content-item-heading>
+        <cds-content-item-copy
+          >Dig into more self-directed learning about DevOps
+          methodologies.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://www.example.com"
+          >Browse tutorials</cds-text-cta
+        >
+      </cds-cta-block-item>
 
-      <dds-cta-block-item>
+      <cds-cta-block-item>
         <span slot="statistics">12%</span>
-        <dds-content-item-heading>Learn how</dds-content-item-heading>
-        <dds-content-item-copy>Dig into more self-directed learning about DevOps methodologies.</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</dds-text-cta>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</dds-text-cta>
-      </dds-cta-block-item>
-    </dds-cta-block-item-row>
-    <dds-cta-block-item-row>
-      <dds-cta-block-item>
+        <cds-content-item-heading>Learn how</cds-content-item-heading>
+        <cds-content-item-copy
+          >Dig into more self-directed learning about DevOps
+          methodologies.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://www.example.com"
+          >Browse tutorials</cds-text-cta
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://www.example.com"
+          >Browse tutorials</cds-text-cta
+        >
+      </cds-cta-block-item>
+    </cds-cta-block-item-row>
+    <cds-cta-block-item-row>
+      <cds-cta-block-item>
         <svg
           slot="media"
           focusable="false"
@@ -85,8 +123,7 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
           xmlns="http://www.w3.org/2000/svg"
           aria-label="Pictogram description"
           viewBox="0 0 32 32"
-          role="img"
-        >
+          role="img">
           <path
             d="M13.5 7.36H7v-.72h6.5v.72zm0 8.28H7v.72h6.5v-.72zM7
           25.36h6.5v-.72H7v.72zM30.36 7v9a.36.36 0 01-.36.36h-3.64V19a.36.36
@@ -100,18 +137,23 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
           0 01.36.36zm-4.72-2.64H6.36v5.28h19.28V4.36zM6.36
           27.64h19.28v-5.28H6.36v5.28zm19.28-14.28H6.36v5.28h19.28v-5.28zM24
           7a.5.5 0 10-1 0 .5.5 0 001 0zm0 9a.5.5
-          0 10-1 0 .5.5 0 001 0zm0 9a.5.5 0 10-1 0 .5.5 0 001 0z"
-          />
+          0 10-1 0 .5.5 0 001 0zm0 9a.5.5 0 10-1 0 .5.5 0 001 0z" />
           <path fill="none" d="M0 0h32v32H0z" />
         </svg>
-        <dds-content-item-heading>Get connected</dds-content-item-heading>
-        <dds-content-item-copy
-          >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for
-          you.</dds-content-item-copy
-        >
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Find a partner</dds-text-cta>
-      </dds-cta-block-item>
-      <dds-cta-block-item>
+        <cds-content-item-heading>Get connected</cds-content-item-heading>
+        <cds-content-item-copy
+          >IBM DevOps partners have a wide range of expertise. Find one to build
+          that right solution for you.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="https://www.example.com"
+          >Find a partner</cds-text-cta
+        >
+      </cds-cta-block-item>
+      <cds-cta-block-item>
         <svg
           slot="media"
           focusable="false"
@@ -119,8 +161,7 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
           xmlns="http://www.w3.org/2000/svg"
           aria-label="Pictogram description"
           viewBox="0 0 32 32"
-          role="img"
-        >
+          role="img">
           <path
             d="M13.5 7.36H7v-.72h6.5v.72zm0 8.28H7v.72h6.5v-.72zM7
           25.36h6.5v-.72H7v.72zM30.36 7v9a.36.36 0 01-.36.36h-3.64V19a.36.36
@@ -134,61 +175,91 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
           0 01.36.36zm-4.72-2.64H6.36v5.28h19.28V4.36zM6.36
           27.64h19.28v-5.28H6.36v5.28zm19.28-14.28H6.36v5.28h19.28v-5.28zM24
           7a.5.5 0 10-1 0 .5.5 0 001 0zm0 9a.5.5
-          0 10-1 0 .5.5 0 001 0zm0 9a.5.5 0 10-1 0 .5.5 0 001 0z"
-          />
+          0 10-1 0 .5.5 0 001 0zm0 9a.5.5 0 10-1 0 .5.5 0 001 0z" />
           <path fill="none" d="M0 0h32v32H0z" />
         </svg>
-        <dds-content-item-heading>Learn how</dds-content-item-heading>
-        <dds-content-item-copy>Dig into more self-directed learning about DevOps methodologies.</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</dds-text-cta>
-      </dds-cta-block-item>
-    </dds-cta-block-item-row>
-    <dds-cta-block-item-row no-border>
-      <dds-cta-block-item>
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
+        <cds-content-item-heading>Learn how</cds-content-item-heading>
+        <cds-content-item-copy
+          >Dig into more self-directed learning about DevOps
+          methodologies.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="example.com"
+          >Browse tutorials</cds-text-cta
+        >
+      </cds-cta-block-item>
+    </cds-cta-block-item-row>
+    <cds-cta-block-item-row no-border>
+      <cds-cta-block-item>
+        <cds-video-player-container
+          video-id="0_ibuqxqbe"
           aspect-ratio="4x3"
           playing-mode="lightbox"
           slot="media"
-          hide-caption
-        ></dds-video-player-container>
-        <dds-content-item-heading>Get connected</dds-content-item-heading>
-        <dds-content-item-copy
-          >IBM DevOps partners have a wide range of expertise. Find one to build that right solution for
-          you.</dds-content-item-copy
-        >
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Find a partner</dds-text-cta>
-      </dds-cta-block-item>
-      <dds-cta-block-item>
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
+          hide-caption></cds-video-player-container>
+        <cds-content-item-heading>Get connected</cds-content-item-heading>
+        <cds-content-item-copy
+          >IBM DevOps partners have a wide range of expertise. Find one to build
+          that right solution for you.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="example.com"
+          >Find a partner</cds-text-cta
+        >
+      </cds-cta-block-item>
+      <cds-cta-block-item>
+        <cds-video-player-container
+          video-id="0_ibuqxqbe"
           aspect-ratio="4x3"
           playing-mode="lightbox"
           slot="media"
-          hide-caption
-        ></dds-video-player-container>
-        <dds-lightbox-video-player-container playing-mode="lightbox"></dds-lightbox-video-player-container>
-        <dds-content-item-heading>Learn how</dds-content-item-heading>
-        <dds-content-item-copy>Dig into more self-directed learning about DevOps methodologies.</dds-content-item-copy>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</dds-text-cta>
-        <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="example.com">Browse tutorials</dds-text-cta>
-      </dds-cta-block-item>
-    </dds-cta-block-item-row>
-  </dds-cta-block>
-</dds-cta-section>
+          hide-caption></cds-video-player-container>
+        <cds-lightbox-video-player-container
+          playing-mode="lightbox"></cds-lightbox-video-player-container>
+        <cds-content-item-heading>Learn how</cds-content-item-heading>
+        <cds-content-item-copy
+          >Dig into more self-directed learning about DevOps
+          methodologies.</cds-content-item-copy
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="example.com"
+          >Browse tutorials</cds-text-cta
+        >
+        <cds-text-cta
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href="example.com"
+          >Browse tutorials</cds-text-cta
+        >
+      </cds-cta-block-item>
+    </cds-cta-block-item-row>
+  </cds-cta-block>
+</cds-cta-section>
 ```
 
 ## Props
 
-<Props of="dds-cta-section" />
+<Props of="cds-cta-section" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector           | Description |
 | ----------------------- | -------------------------------- | ----------- |
-| `<dds-cta-section>`     | `data-autoid="dds--cta-section"` | Component   |
+| `<cds-cta-section>`     | `data-autoid="cds--cta-section"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx
index 4140d984054..255337f6262 100644
--- a/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/cta-section/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
 
@@ -17,79 +22,172 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section.js';
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
-import DDSCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
+import C4DCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section.js';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
+import C4DCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
 import Desktop from '@carbon/pictograms-react/es/desktop/index.js';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 
 function App() {
   return (
-    <DDSCTASection>
-      <DDSContentSectionHeading>Related products and services</DDSContentSectionHeading>
-      <DDSCTABlock>
-        <DDSContentBlockHeading>DDS Content Block Heading</DDSContentBlockHeading>
-        <DDSContentBlockCopy>DDS Content Block Copy</DDSContentBlockCopy>
-        <DDSTextCTA slot="action" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</DDSTextCTA>
-        <DDSCTABlockItemRow _noBorder>
-          <DDSCTABlockItem>
+    <C4DCTASection>
+      <C4DContentSectionHeading>
+        Related products and services
+      </C4DContentSectionHeading>
+      <C4DCTABlock>
+        <C4DContentBlockHeading>
+          C4D Content Block Heading
+        </C4DContentBlockHeading>
+        <C4DContentBlockCopy>C4D Content Block Copy</C4DContentBlockCopy>
+        <C4DTextCTA
+          slot="action"
+          cta-type="local"
+          icon-placement="right"
+          href="https://www.example.com">
+          Browse tutorials
+        </C4DTextCTA>
+        <C4DCTABlockItemRow _noBorder>
+          <C4DCTABlockItem>
             <span slot="statistics">10%</span>
-            <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-            <DDSContentItemCopy>IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Find a partner</DDSTextCTA>
-          </DDSCTABlockItem>
-          <DDSCTABlockItem>
+            <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              IBM DevOps partners have a wide range of expertise. Find one to
+              build that right solution for you.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Find a partner
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+          <C4DCTABlockItem>
             <span slot="statistics">11%</span>
-            <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-            <DDSContentItemCopy>Dig into more self-directed learning about DevOps methodologies.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Find a partner</DDSTextCTA>
-          </DDSCTABlockItem>
-          <DDSCTABlockItem>
+            <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              Dig into more self-directed learning about DevOps methodologies.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Find a partner
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+          <C4DCTABlockItem>
             <span slot="statistics">12%</span>
-            <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-            <DDSContentItemCopy>Dig into more self-directed learning about DevOps methodologies.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</DDSTextCTA>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Brows tutorials</DDSTextCTA>
-          </DDSCTABlockItem>
-        </DDSCTABlockItemRow>
-        <DDSCTABlockItemRow>
-          <DDSCTABlockItem>
-            <Desktop slot="media" width="48" height="48" viewBox="0 0 48 48"/>
-            <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-            <DDSContentItemCopy>IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Find a partner</DDSTextCTA>
-          </DDSCTABlockItem>
-          <DDSCTABlockItem>
-            <Desktop slot="media" width="48" height="48" viewBox="0 0 48 48"/>
-            <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-            <DDSContentItemCopy>Dig into more self-directed learning about DevOps methodologies.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</DDSTextCTA>
-          </DDSCTABlockItem>
-        </DDSCTABlockItemRow>
-        <DDSCTABlockItemRow _noBorder>
-          <DDSCTABlockItem>
-            <DDSVideoPlayerContainer video-id="1_9h94wo6b" aspect-ratio="4x3" playing-mode="lightbox" slot="media" hide-caption/>
-            <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-            <DDSContentItemCopy>IBM DevOps partners have a wide range of expertise. Find one to build that right solution for you.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Find a partner</DDSTextCTA>
-          </DDSCTABlockItem>
-          <DDSCTABlockItem>
-            <DDSVideoPlayerContainer video-id="1_9h94wo6b" aspect-ratio="4x3" playing-mode="lightbox" slot="media" hide-caption/>
-            <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-            <DDSContentItemCopy>Dig into more self-directed learning about DevOps methodologies.</DDSContentItemCopy>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</DDSTextCTA>
-            <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href="https://www.example.com">Browse tutorials</DDSTextCTA>
-          </DDSCTABlockItem>
-        </DDSCTABlockItemRow>
-      </DDSCTABlock>
-    </DDSCTASection>
+            <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              Dig into more self-directed learning about DevOps methodologies.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Browse tutorials
+            </C4DTextCTA>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Brows tutorials
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+        </C4DCTABlockItemRow>
+        <C4DCTABlockItemRow>
+          <C4DCTABlockItem>
+            <Desktop slot="media" width="48" height="48" viewBox="0 0 48 48" />
+            <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              IBM DevOps partners have a wide range of expertise. Find one to
+              build that right solution for you.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Find a partner
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+          <C4DCTABlockItem>
+            <Desktop slot="media" width="48" height="48" viewBox="0 0 48 48" />
+            <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              Dig into more self-directed learning about DevOps methodologies.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Browse tutorials
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+        </C4DCTABlockItemRow>
+        <C4DCTABlockItemRow _noBorder>
+          <C4DCTABlockItem>
+            <C4DVideoPlayerContainer
+              video-id="0_ibuqxqbe"
+              aspect-ratio="4x3"
+              playing-mode="lightbox"
+              slot="media"
+              hide-caption
+            />
+            <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              IBM DevOps partners have a wide range of expertise. Find one to
+              build that right solution for you.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Find a partner
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+          <C4DCTABlockItem>
+            <C4DVideoPlayerContainer
+              video-id="0_ibuqxqbe"
+              aspect-ratio="4x3"
+              playing-mode="lightbox"
+              slot="media"
+              hide-caption
+            />
+            <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+            <C4DContentItemCopy>
+              Dig into more self-directed learning about DevOps methodologies.
+            </C4DContentItemCopy>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Browse tutorials
+            </C4DTextCTA>
+            <C4DTextCTA
+              slot="footer"
+              cta-type="local"
+              icon-placement="right"
+              href="https://www.example.com">
+              Browse tutorials
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+        </C4DCTABlockItemRow>
+      </C4DCTABlock>
+    </C4DCTASection>
   );
 }
 ```
@@ -100,10 +198,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-cta-section>`        | N/A                    | Component   |
+| `<cds-cta-section>`     | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx
index faf57f7039d..6a445003897 100644
--- a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx
+++ b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.react.tsx
@@ -12,24 +12,24 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DCTASection from '@carbon/ibmdotcom-web-components/es/components-react/cta-section/cta-section';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 /* eslint-disable max-len */
-import DDSLightboxVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-video-player-container';
+import C4DLightboxVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-video-player-container';
 /* eslint-disable max-len */
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
-import DDSCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
-import DDSCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
+import C4DCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
 import Desktop from '@carbon/pictograms-react/es/desktop/index.js';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 import readme from './README.stories.react.mdx';
@@ -37,57 +37,83 @@ import content from './content';
 
 const contentItemTypeMap = {
   text: ({ heading, copy, links }) => (
-    <DDSCTABlockItem>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-      {links.map(elem => (
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href={elem.href}>
+    <C4DCTABlockItem>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+      {links.map((elem) => (
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href={elem.href}>
           {elem.copy}
-        </DDSTextCTA>
+        </C4DTextCTA>
       ))}
-    </DDSCTABlockItem>
+    </C4DCTABlockItem>
   ),
   statistics: ({ heading, copy, links }) => (
-    <DDSCTABlockItem>
+    <C4DCTABlockItem>
       <span slot="statistics">10%</span>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-      {links.map(elem => (
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href={elem.href}>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+      {links.map((elem) => (
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href={elem.href}>
           {elem.copy}
-        </DDSTextCTA>
+        </C4DTextCTA>
       ))}
-    </DDSCTABlockItem>
+    </C4DCTABlockItem>
   ),
   pictogram: ({ heading, copy, links }) => (
-    <DDSCTABlockItem>
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-      {links.map(elem => (
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href={elem.href}>
+    <C4DCTABlockItem>
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+      {links.map((elem) => (
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href={elem.href}>
           {elem.copy}
-        </DDSTextCTA>
+        </C4DTextCTA>
       ))}
       <Desktop slot="media" width="80" height="80" viewBox="0 0 32 32" />
-    </DDSCTABlockItem>
+    </C4DCTABlockItem>
   ),
   media: ({ heading, copy, links }) => (
-    <DDSCTABlockItem>
-      <DDSVideoPlayerContainer video-id="1_9h94wo6b" aspect-ratio="4x3" slot="media" hide-caption playing-mode="lightbox" />
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-      {links.map(elem => (
-        <DDSTextCTA slot="footer" cta-type="local" icon-placement="right" href={elem.href}>
+    <C4DCTABlockItem>
+      <C4DVideoPlayerContainer
+        video-id="0_ibuqxqbe"
+        aspect-ratio="4x3"
+        slot="media"
+        hide-caption
+        playing-mode="lightbox"
+      />
+      <C4DContentItemHeading>{heading}</C4DContentItemHeading>
+      <C4DContentItemCopy>{copy}</C4DContentItemCopy>
+      {links.map((elem) => (
+        <C4DTextCTA
+          slot="footer"
+          cta-type="local"
+          icon-placement="right"
+          href={elem.href}>
           {elem.copy}
-        </DDSTextCTA>
+        </C4DTextCTA>
       ))}
-    </DDSCTABlockItem>
+    </C4DCTABlockItem>
   ),
 };
 
 const renderItems = (item, count) => {
   if (count.length < 4) {
-    return <DDSCTABlockItemRow _noBorder>{count.map((_, index) => item({ ...content[index] }))}</DDSCTABlockItemRow>;
+    return (
+      <C4DCTABlockItemRow _noBorder>
+        {count.map((_, index) => item({ ...content[index] }))}
+      </C4DCTABlockItemRow>
+    );
   }
 
   const itemArray = count;
@@ -95,8 +121,12 @@ const renderItems = (item, count) => {
 
   return (
     <>
-      <DDSCTABlockItemRow>{itemArray.map((_, index) => item({ ...content[index] }))}</DDSCTABlockItemRow>
-      <DDSCTABlockItemRow _noBorder>{spliced.map((_, index) => item({ ...content[index] }))}</DDSCTABlockItemRow>
+      <C4DCTABlockItemRow>
+        {itemArray.map((_, index) => item({ ...content[index] }))}
+      </C4DCTABlockItemRow>
+      <C4DCTABlockItemRow _noBorder>
+        {spliced.map((_, index) => item({ ...content[index] }))}
+      </C4DCTABlockItemRow>
     </>
   );
 };
@@ -108,21 +138,25 @@ const contentItemTypeOptions = {
   Media: 'media',
 };
 
-export const Simple = args => {
+export const Simple = (args) => {
   const { heading, copy, border } = args?.CTASection ?? {};
 
   return (
     <>
-      <DDSCTASection>
-        <DDSCTABlock _noBorder={!border}>
-          <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-          <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
-          <DDSTextCTA slot="action" cta-type="local" icon-placement="right" href="example.com">
+      <C4DCTASection>
+        <C4DCTABlock _noBorder={!border}>
+          <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+          <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
+          <C4DTextCTA
+            slot="action"
+            cta-type="local"
+            icon-placement="right"
+            href="example.com">
             Browse tutorials
-          </DDSTextCTA>
-        </DDSCTABlock>
-      </DDSCTASection>
-      <DDSLightboxVideoPlayerContainer></DDSLightboxVideoPlayerContainer>
+          </C4DTextCTA>
+        </C4DCTABlock>
+      </C4DCTASection>
+      <C4DLightboxVideoPlayerContainer></C4DLightboxVideoPlayerContainer>
     </>
   );
 };
@@ -139,24 +173,32 @@ Simple.story = {
   },
 };
 
-export const WithContentItems = args => {
+export const WithContentItems = (args) => {
   const { heading, copy, border } = args?.CTASection ?? {};
   const { contentItemType, contentItemCount } = args?.WithContentItems ?? {};
 
   return (
     <>
-      <DDSCTASection>
-        <DDSContentSectionHeading>Related products and services</DDSContentSectionHeading>
-        <DDSCTABlock _noBorder={!border}>
-          <DDSContentBlockHeading>{heading || undefined}</DDSContentBlockHeading>
-          <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
-          <DDSTextCTA slot="action" cta-type="local" icon-placement="right" href="example.com">
+      <C4DCTASection>
+        <C4DContentSectionHeading>
+          Related products and services
+        </C4DContentSectionHeading>
+        <C4DCTABlock _noBorder={!border}>
+          <C4DContentBlockHeading>
+            {heading || undefined}
+          </C4DContentBlockHeading>
+          <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
+          <C4DTextCTA
+            slot="action"
+            cta-type="local"
+            icon-placement="right"
+            href="example.com">
             Browse tutorials
-          </DDSTextCTA>
+          </C4DTextCTA>
           {renderItems(contentItemType, contentItemCount)}
-        </DDSCTABlock>
-      </DDSCTASection>
-      <DDSLightboxVideoPlayerContainer></DDSLightboxVideoPlayerContainer>
+        </C4DCTABlock>
+      </C4DCTASection>
+      <C4DLightboxVideoPlayerContainer></C4DLightboxVideoPlayerContainer>
     </>
   );
 };
@@ -172,7 +214,13 @@ WithContentItems.story = {
       }),
       WithContentItems: () => ({
         contentItemType:
-          contentItemTypeMap[select(`Content item type`, contentItemTypeOptions, contentItemTypeOptions.Text) ?? 0],
+          contentItemTypeMap[
+            select(
+              `Content item type`,
+              contentItemTypeOptions,
+              contentItemTypeOptions.Text
+            ) ?? 0
+          ],
         contentItemCount: Array.from({
           length: number('Number of content items', 3, { min: 2, max: 6 }),
         }),
@@ -181,41 +229,47 @@ WithContentItems.story = {
   },
 };
 
-export const WithLinkList = args => {
+export const WithLinkList = (args) => {
   const { heading, copy, border } = args?.CTASection ?? {};
 
   return (
-    <DDSCTASection>
-      <DDSContentSectionHeading>Related products and services</DDSContentSectionHeading>
-      <DDSCTABlock _noBorder={!border}>
-        <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-        <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
-        <DDSTextCTA slot="action" cta-type="local" icon-placement="right" href="example.com">
+    <C4DCTASection>
+      <C4DContentSectionHeading>
+        Related products and services
+      </C4DContentSectionHeading>
+      <C4DCTABlock _noBorder={!border}>
+        <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+        <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
+        <C4DTextCTA
+          slot="action"
+          cta-type="local"
+          icon-placement="right"
+          href="example.com">
           Browse tutorials
-        </DDSTextCTA>
-        <DDSLinkList slot="link-list" type="end">
-          <DDSLinkListHeading>More ways to explore DevOps</DDSLinkListHeading>
-          <DDSLinkListItem href="https://example.com">
+        </C4DTextCTA>
+        <C4DLinkList slot="link-list" type="end">
+          <C4DLinkListHeading>More ways to explore DevOps</C4DLinkListHeading>
+          <C4DLinkListItem href="https://example.com">
             Events <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Blogs <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Training <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Developer resources <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             Research <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             News <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-        </DDSLinkList>
-      </DDSCTABlock>
-    </DDSCTASection>
+          </C4DLinkListItem>
+        </C4DLinkList>
+      </C4DCTABlock>
+    </C4DCTASection>
   );
 };
 
@@ -235,7 +289,7 @@ WithLinkList.story = {
 export default {
   title: 'Components/CTA section',
   decorators: [
-    story => {
+    (story) => {
       return <>{story()}</>;
     },
   ],
diff --git a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts
index a6a2d683ef3..d100eaaed91 100644
--- a/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts
+++ b/packages/web-components/src/components/cta-section/__stories__/cta-section.stories.ts
@@ -9,8 +9,8 @@
 
 import { select, number, boolean } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../../link-list/index';
@@ -24,57 +24,55 @@ import content from './content';
 
 const contentItemTypeMap = {
   text: ({ heading, copy, links }) => html`
-    <dds-cta-block-item>
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
+    <c4d-content-item>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-copy>${copy}</c4d-content-item-copy>
       ${links.map(
         (elem) =>
           html`
-            <dds-text-cta
+            <c4d-link-with-icon
               slot="footer"
               cta-type="local"
-              icon-placement="right"
               href="${elem.href}"
-              >${elem.copy}</dds-text-cta
+              >${elem.copy}</c4d-link-with-icon
             >
           `
       )}
-    </dds-cta-block-item>
+    </c4d-content-item>
   `,
   statistics: ({ heading, copy, links }) => html`
-    <dds-cta-block-item>
+    <c4d-content-item>
       <span slot="statistics">10%</span>
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-copy>${copy}</c4d-content-item-copy>
       ${links.map(
         (elem) =>
           html`
-            <dds-text-cta
+            <c4d-link-with-icon
               slot="footer"
               cta-type="local"
-              icon-placement="right"
               href="${elem.href}"
-              >${elem.copy}</dds-text-cta
+              >${elem.copy}</c4d-link-with-icon
             >
           `
       )}
-    </dds-cta-block-item>
+    </c4d-content-item>
   `,
   pictogram: ({ heading, copy, links }) => html`
-    <dds-cta-block-item>
+    <c4d-content-item>
       <svg
         slot="media"
         focusable="false"
         preserveAspectRatio="xMidYMid meet"
         xmlns="http://www.w3.org/2000/svg"
         stroke="currentColor"
-        data-autoid="dds--pictogram-item__pictogram"
+        data-autoid="c4d--pictogram-item__pictogram"
         aria-label="Pictogram description"
         width="48"
         height="48"
         viewBox="0 0 48 48"
         role="img"
-        class="bx--pictogram-item__pictogram">
+        class="cds--pictogram-item__pictogram">
         <path
           fill="none"
           stroke-linejoin="round"
@@ -85,68 +83,65 @@ const contentItemTypeMap = {
           3.109386,1.3655181 3.109386,3.0344847 V 33.103454 c 0,1.668967 -1.399224,3.034485 -3.109386,3.034485 z m
           -31.09386,7.586212 H 34.882851 M 24,36.137939 v 7.586212 M 0.67960524,28.551727 H 47.320395" />
       </svg>
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-copy>${copy}</c4d-content-item-copy>
       ${links.map(
         (elem) =>
           html`
-            <dds-text-cta
+            <c4d-link-with-icon
               slot="footer"
               cta-type="local"
-              icon-placement="right"
               href="${elem.href}"
-              >${elem.copy}</dds-text-cta
+              >${elem.copy}</c4d-link-with-icon
             >
           `
       )}
-    </dds-cta-block-item>
+    </c4d-content-item>
   `,
   media: ({ heading, copy, links }) => html`
-    <dds-cta-block-item>
-      <dds-video-player-container
-        video-id="1_9h94wo6b"
+    <c4d-content-item>
+      <c4d-video-player-container
+        video-id="0_ibuqxqbe"
         aspect-ratio="4x3"
         slot="media"
         hide-caption
         playing-mode="lightbox">
-      </dds-video-player-container>
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
+      </c4d-video-player-container>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-copy>${copy}</c4d-content-item-copy>
       ${links.map(
         (elem) =>
           html`
-            <dds-text-cta
+            <c4d-link-with-icon
               slot="footer"
               cta-type="local"
-              icon-placement="right"
               href="${elem.href}"
-              >${elem.copy}</dds-text-cta
+              >${elem.copy}</c4d-link-with-icon
             >
           `
       )}
-    </dds-cta-block-item>
+    </c4d-content-item>
   `,
   logo: ({ heading, copy, links }) => html`
-    <dds-cta-block-item>
-      <dds-image-logo
+    <c4d-content-item>
+      <c4d-image-logo
         alt="Microsoft logo"
         slot="media"
-        default-src="${logoMicrosoft2x1}"></dds-image-logo>
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
+        default-src="${logoMicrosoft2x1}"></c4d-image-logo>
+      <c4d-content-item-heading>${heading}</c4d-content-item-heading>
+      <c4d-content-item-copy>${copy}</c4d-content-item-copy>
       ${links.map(
         (elem) =>
           html`
-            <dds-text-cta
+            <c4d-link-with-icon
               slot="footer"
               cta-type="local"
-              icon-placement="right"
               href="${elem.href}"
-              >${elem.copy}</dds-text-cta
+              >${elem.copy}</c4d-link-with-icon
             >
           `
       )}
-    </dds-cta-block-item>
+    </c4d-content-item>
   `,
 };
 
@@ -160,9 +155,9 @@ const contentItemTypeOptions = {
 
 const renderItems = (item, count) => {
   return html`
-    <dds-cta-block-item-row>
+    <c4d-cta-block-item-row>
       ${count.map((_, index) => item({ ...content[index] }))}
-    </dds-cta-block-item-row>
+    </c4d-cta-block-item-row>
   `;
 };
 
@@ -170,32 +165,32 @@ export const Simple = (args) => {
   const { heading, copy, showText, showCta, border } = args?.CTASection ?? {};
 
   return html`
-    <dds-cta-section>
-      <dds-cta-block ?no-border="${!border}">
-        <dds-content-block-heading
-          >${ifNonNull(heading)}</dds-content-block-heading
+    <c4d-cta-section>
+      <c4d-cta-block ?no-border="${!border}">
+        <c4d-content-block-heading
+          >${ifDefined(heading)}</c4d-content-block-heading
         >
         ${showText
           ? html`
-              <dds-content-block-copy
-                >${ifNonNull(copy)}</dds-content-block-copy
+              <c4d-content-block-copy
+                >${ifDefined(copy)}</c4d-content-block-copy
               >
             `
           : ''}
         ${showCta
           ? html`
-              <dds-text-cta
+              <c4d-text-cta
                 slot="action"
                 cta-type="local"
                 icon-placement="right"
                 href="example.com"
-                >Browse tutorials</dds-text-cta
+                >Browse tutorials</c4d-text-cta
               >
             `
           : ''}
-      </dds-cta-block>
-    </dds-cta-section>
-    <dds-lightbox-video-player-container></dds-lightbox-video-player-container>
+      </c4d-cta-block>
+    </c4d-cta-section>
+    <c4d-lightbox-video-player-container></c4d-lightbox-video-player-container>
   `;
 };
 
@@ -207,36 +202,36 @@ export const WithContentItems = (args) => {
   const contentItem = contentItemTypeMap[contentItemType];
 
   return html`
-    <dds-cta-section logo-ratio="${ifNonNull(logoAspectRatio)}">
-      <dds-content-section-heading
-        >Related products and services</dds-content-section-heading
+    <c4d-cta-section logo-ratio="${ifDefined(logoAspectRatio)}">
+      <c4d-content-section-heading
+        >Related products and services</c4d-content-section-heading
       >
-      <dds-cta-block ?no-border="${!border}">
-        <dds-content-block-heading
-          >${ifNonNull(heading)}</dds-content-block-heading
+      <c4d-cta-block ?no-border="${!border}">
+        <c4d-content-block-heading
+          >${ifDefined(heading)}</c4d-content-block-heading
         >
         ${showText
           ? html`
-              <dds-content-block-copy
-                >${ifNonNull(copy)}</dds-content-block-copy
+              <c4d-content-block-copy
+                >${ifDefined(copy)}</c4d-content-block-copy
               >
             `
           : ''}
         ${showCta
           ? html`
-              <dds-text-cta
+              <c4d-text-cta
                 slot="action"
                 cta-type="local"
                 icon-placement="right"
                 href="example.com"
-                >Browse tutorials</dds-text-cta
+                >Browse tutorials</c4d-text-cta
               >
             `
           : ''}
-        ${renderItems(contentItem, contentItemCount)}
-      </dds-cta-block>
-    </dds-cta-section>
-    <dds-lightbox-video-player-container></dds-lightbox-video-player-container>
+        <div>${renderItems(contentItem, contentItemCount)}</div>
+      </c4d-cta-block>
+    </c4d-cta-section>
+    <c4d-lightbox-video-player-container></c4d-lightbox-video-player-container>
   `;
 };
 
@@ -279,57 +274,57 @@ export const WithLinkList = (args) => {
   const { heading, copy, showText, showCta, border } = args?.CTASection ?? {};
 
   return html`
-    <dds-cta-section>
-      <dds-content-section-heading
-        >Related products and services</dds-content-section-heading
+    <c4d-cta-section>
+      <c4d-content-section-heading
+        >Related products and services</c4d-content-section-heading
       >
-      <dds-cta-block ?no-border="${!border}">
-        <dds-content-block-heading
-          >${ifNonNull(heading)}</dds-content-block-heading
+      <c4d-cta-block ?no-border="${!border}">
+        <c4d-content-block-heading
+          >${ifDefined(heading)}</c4d-content-block-heading
         >
         ${showText
           ? html`
-              <dds-content-block-copy
-                >${ifNonNull(copy)}</dds-content-block-copy
+              <c4d-content-block-copy
+                >${ifDefined(copy)}</c4d-content-block-copy
               >
             `
           : ''}
         ${showCta
           ? html`
-              <dds-text-cta
+              <c4d-text-cta
                 slot="action"
                 cta-type="local"
                 icon-placement="right"
                 href="example.com"
-                >Browse tutorials</dds-text-cta
+                >Browse tutorials</c4d-text-cta
               >
             `
           : ''}
-        <dds-link-list slot="link-list" type="end">
-          <dds-link-list-heading
-            >More ways to explore DevOps</dds-link-list-heading
+        <c4d-link-list slot="link-list" type="end">
+          <c4d-link-list-heading
+            >More ways to explore DevOps</c4d-link-list-heading
           >
-          <dds-link-list-item href="https://example.com">
+          <c4d-link-list-item href="https://example.com">
             Events ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Blogs ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Training ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Developer resources ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             Research ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
             News ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-        </dds-link-list>
-      </dds-cta-block>
-    </dds-cta-section>
+          </c4d-link-list-item>
+        </c4d-link-list>
+      </c4d-cta-block>
+    </c4d-cta-section>
   `;
 };
 
diff --git a/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts b/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts
index f94c1771630..dbc4e8d54f6 100644
--- a/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts
+++ b/packages/web-components/src/components/cta-section/__tests__/cta-section.test.ts
@@ -1,20 +1,20 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import { Simple } from '../__stories__/cta-section.stories';
 
-describe('dds-cta-block', function () {
+describe('c4d-cta-block', function () {
   it('Renders Default', async function () {
     render(Simple({ parameters: {} }), document.body);
     await Promise.resolve();
-    expect(document.body.querySelector('dds-cta-block')).toMatchSnapshot({
+    expect(document.body.querySelector('c4d-cta-block')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
diff --git a/packages/web-components/src/components/cta-section/cta-section.scss b/packages/web-components/src/components/cta-section/cta-section.scss
index 70ccb9a4419..3ed1eb2aca4 100644
--- a/packages/web-components/src/components/cta-section/cta-section.scss
+++ b/packages/web-components/src/components/cta-section/cta-section.scss
@@ -5,22 +5,26 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-section/content-section';
-@import '@carbon/ibmdotcom-styles/scss/globals/utils/hang';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-section';
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/hang' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-cta-section) {
+:host(#{$c4d-prefix}-cta-section) {
   display: block;
-  background-color: $ui-background;
+  background-color: $background;
 
   .#{$prefix}--content-section {
     @include hang;
 
     padding-top: 0;
-    padding-left: $carbon--spacing-06;
-    padding-bottom: $carbon--layout-04;
+    padding-left: $spacing-06;
+    padding-bottom: $spacing-09;
 
-    @include carbon--breakpoint('sm') {
+    @include breakpoint(sm) {
       padding-left: 0;
     }
   }
@@ -28,15 +32,15 @@
   .#{$prefix}--content-section__leading {
     padding-bottom: 0;
 
-    @include carbon--breakpoint('md') {
-      margin-top: $carbon--layout-04;
+    @include breakpoint(md) {
+      margin-top: $spacing-09;
       padding: $spacing-05;
       padding-bottom: 0;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       padding-left: $spacing-05;
-      margin-bottom: $carbon--layout-04;
+      margin-bottom: $spacing-09;
     }
   }
 
@@ -44,19 +48,19 @@
     padding-top: $spacing-09;
   }
 
-  ::slotted(#{$dds-prefix}-content-section-heading) {
+  ::slotted(#{$c4d-prefix}-content-section-heading) {
     margin-bottom: $spacing-07;
 
-    @include carbon--breakpoint('md') {
+    @include breakpoint(md) {
       margin-bottom: $spacing-06;
     }
   }
 
-  ::slotted(#{$dds-prefix}-cta-block) {
+  ::slotted(#{$c4d-prefix}-cta-block) {
     padding-top: 0;
 
-    @include carbon--breakpoint('md') {
-      padding-top: $carbon--layout-04;
+    @include breakpoint(md) {
+      padding-top: $spacing-09;
     }
   }
 }
diff --git a/packages/web-components/src/components/cta-section/cta-section.ts b/packages/web-components/src/components/cta-section/cta-section.ts
index 0418f6458ca..b8d7ff7cfcc 100644
--- a/packages/web-components/src/components/cta-section/cta-section.ts
+++ b/packages/web-components/src/components/cta-section/cta-section.ts
@@ -7,23 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, property } from 'lit-element';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
 import parseAspectRatio from '@carbon/ibmdotcom-utilities/es/utilities/parseAspectRatio/parseAspectRatio.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './cta-section.scss';
-import DDSContentSection from '../content-section/content-section';
+import C4DContentSection from '../content-section/content-section';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The CTA SECTION pattern
  *
- * @element dds-cta-section
+ * @element c4d-cta-section
  */
-@customElement(`${ddsPrefix}-cta-section`)
-class DDSCTASection extends StableSelectorMixin(DDSContentSection) {
+@customElement(`${c4dPrefix}-cta-section`)
+class C4DCTASection extends StableSelectorMixin(C4DContentSection) {
   @property({ attribute: 'logo-ratio' })
   logoRatio?;
 
@@ -40,7 +41,7 @@ class DDSCTASection extends StableSelectorMixin(DDSContentSection) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--cta-section`;
+    return `${c4dPrefix}--cta-section`;
   }
 
   static get styles() {
@@ -50,5 +51,10 @@ class DDSCTASection extends StableSelectorMixin(DDSContentSection) {
   }
 }
 
+console.warn(
+  'The cta-section component has been deprecated in favor of the content-section/block and content-item components. ' +
+    'See content-section/block amd content-item documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCTASection;
+export default C4DCTASection;
diff --git a/packages/web-components/src/components/cta/__stories__/README.stories.mdx b/packages/web-components/src/components/cta/__stories__/README.stories.mdx
index f30fe4a2210..1a13b9b8b45 100644
--- a/packages/web-components/src/components/cta/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/cta/__stories__/README.stories.mdx
@@ -1,11 +1,15 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import '../text-cta';
 import '../card-cta';
 import '../feature-cta';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
 # CTA
 
 > The CTA component is used to select from various CTA link types – text, cards,
@@ -14,16 +18,18 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 ## Getting started
 
-The CTA contains every style and type of CTA available in the Carbon for IBM.com library. 
-The default CTA style is `text`, which provides a basic Link with icon component.
+The CTA contains every style and type of CTA available in the Carbon for IBM.com
+library. The default CTA style is `text`, which provides a basic Link with icon
+component.
 
-In order to use the desired component, modify the `cta-style` attribute to one of the following:
+In order to use the desired component, modify the `cta-style` attribute to one
+of the following:
 
-* `text`
-* `button`
-* `card`
-* `card-link`
-* `feature`
+- `text`
+- `button`
+- `card`
+- `card-link`
+- `feature`
 
 ### JS (via import)
 
@@ -48,14 +54,14 @@ CTA Text is the most basic version of CTA, presented as a simple link.
 ### HTML
 
 ```html
-<dds-cta cta-style='text' href="https://www.ibm.com/" cta-type="local">
+<cds-cta cta-style="text" href="https://www.ibm.com/" cta-type="local">
   Copy text
-</dds-cta>
+</cds-cta>
 ```
 
 ### Props
 
-<Props of="dds-text-cta" />
+<Props of="cds-text-cta" />
 
 ## `Button`
 
@@ -70,14 +76,18 @@ CTA Button is a version of CTA presented as a button.
 ### HTML
 
 ```html
-<dds-cta cta-style='button' cta-type="local" kind="tertiary" href="https://www.example.com">
+<cds-cta
+  cta-style="button"
+  cta-type="local"
+  kind="tertiary"
+  href="https://www.example.com">
   Button CTA Copy
-</dds-cta>
+</cds-cta>
 ```
 
 ### Props
 
-<Props of="dds-button-cta" />
+<Props of="cds-button-cta" />
 
 ## Card CTA
 
@@ -92,9 +102,9 @@ CTA Card is a version of CTA presented as a card.
 ### HTML
 
 ```html
-<dds-cta cta-style='card' href="https://www.ibm.com/" cta-type="local">
+<cds-cta cta-style="card" href="https://www.ibm.com/" cta-type="local">
   Copy text
-  <dds-card-cta-footer>
+  <cds-card-cta-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -104,18 +114,17 @@ CTA Card is a version of CTA presented as a card.
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
+      viewBox="0 0 20 20">
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-card-cta-footer>
-</dds-cta>
+  </cds-card-cta-footer>
+</cds-cta>
 ```
 
 ### Props
 
-<Props of="dds-card-cta" />
+<Props of="cds-card-cta" />
 
 ## Card link CTA
 
@@ -130,31 +139,29 @@ Card link CTA is a version of CTA presented as a card.
 ### HTML
 
 ```html
-<dds-cta cta-style='card-link' href="https://www.ibm.com/" cta-type="local">
-  <dds-card-link-heading>Heading text</dds-card-link-heading>
-    <dds-card-cta-footer>
-      <svg
-        slot="icon"
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        aria-hidden="true"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-      >
-        <path
-          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-      </svg>
-    </dds-card-cta-footer>
-</dds-cta>
+<cds-cta cta-style="card-link" href="https://www.ibm.com/" cta-type="local">
+  <cds-card-link-heading>Heading text</cds-card-link-heading>
+  <cds-card-cta-footer>
+    <svg
+      slot="icon"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+    </svg>
+  </cds-card-cta-footer>
+</cds-cta>
 ```
 
 ### Props
 
-<Props of="dds-card-link-cta" />
-
+<Props of="cds-card-link-cta" />
 
 ## Feature card CTA
 
@@ -169,15 +176,14 @@ Feature card CTA is a version of CTA presented as a feature card.
 ### HTML
 
 ```html
-<dds-cta cta-style='feature' href="https://www.ibm.com/" cta-type="local">
-  <dds-card-heading>This is a heading</dds-card-heading>
-  <dds-image
+<cds-cta cta-style="feature" href="https://www.ibm.com/" cta-type="local">
+  <cds-card-heading>This is a heading</cds-card-heading>
+  <cds-image
     slot="image"
     alt="Image alt text"
-    default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
-  >
-  </dds-image>
-  <dds-feature-cta-footer>
+    default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616">
+  </cds-image>
+  <cds-feature-cta-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -187,47 +193,55 @@ Feature card CTA is a version of CTA presented as a feature card.
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
+      viewBox="0 0 20 20">
       <path
         d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-feature-cta-footer>
-</dds-cta>
+  </cds-feature-cta-footer>
+</cds-cta>
 ```
 
-The Feature Card for CTA can also use the 'large' variation, but be sure to at least include an eyebrow and heading.
-
+The Feature Card for CTA can also use the 'large' variation, but be sure to at
+least include an eyebrow and heading.
 
 ```html
-<dds-cta cta-style='feature' size='large' href="https://www.ibm.com/" cta-type="local">
-  <dds-card-eyebrow>This is an eyebrow</dds-card-eyebrow>
-  <dds-card-heading>This is a heading</dds-card-heading>
-  <dds-image
+<cds-cta
+  cta-style="feature"
+  size="large"
+  href="https://www.ibm.com/"
+  cta-type="local">
+  <cds-card-eyebrow>This is an eyebrow</cds-card-eyebrow>
+  <cds-card-heading>This is a heading</cds-card-heading>
+  <cds-image
     slot="image"
     alt="Image alt text"
-    default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
-  >
-  </dds-image>
-</dds-cta>
+    default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616">
+  </cds-image>
+</cds-cta>
 ```
 
 ### Props
 
-<Props of="dds-feature-cta" />
+<Props of="cds-feature-cta" />
 
 ## Using a video player
 
-The `<dds-video-cta-container>` component lets you integrate `<dds-text-cta>`/`<dds-button-cta>`/`<dds-card-cta>`/`<dds-feature-cta>` with video player quickly.
-Only one `<dds-video-cta-container>` has to be put in application.
-Ensure that `<dds-video-cta-container>` contains all `<dds-text-cta>`/`<dds-button-cta>`/`<dds-card-cta>`/`<dds-feature-cta>`:
+The `<cds-video-cta-container>` component lets you integrate
+`<cds-text-cta>`/`<cds-button-cta>`/`<cds-card-cta>`/`<cds-feature-cta>` with
+video player quickly. Only one `<cds-video-cta-container>` has to be put in
+application. Ensure that `<cds-video-cta-container>` contains all
+`<cds-text-cta>`/`<cds-button-cta>`/`<cds-card-cta>`/`<cds-feature-cta>`:
 
 ## Using contact methods
 
-The various cta components allow the `type` attributes `email`, `schedule`, `chat`, and `call`, to perform their respective contact methods, but requires importing the contact module.
+The various cta components allow the `type` attributes `email`, `schedule`,
+`chat`, and `call`, to perform their respective contact methods, but requires
+importing the contact module.
 
 ```html
-<script src="https://www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js" defer></script>
+<script
+  src="https://www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js"
+  defer></script>
 ```
 
 ### JS (via import)
@@ -236,16 +250,18 @@ The various cta components allow the `type` attributes `email`, `schedule`, `cha
 import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['cta','video-cta-container'] })}`} />
+<Description
+  markdown={`${cdnJs({ components: ['cta', 'video-cta-container'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<dds-video-cta-container>
-  <dds-cta cta-style='text' cta-type="video" href="1_9h94wo6b"></dds-cta>
-</dds-video-cta-container>
+<cds-video-cta-container>
+  <cds-cta cta-style="text" cta-type="video" href="0_ibuqxqbe"></cds-cta>
+</cds-video-cta-container>
 ```
 
 > 💡 Check our
@@ -254,10 +270,10 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
 
 [![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/cta/text)
 
-### `dds-cta-run-action` customization
+### `cds-cta-run-action` customization
 
 For more flexible solution that is better tailored to your application's needs,
-CTA components fire `dds-cta-run-action` custom event when user clicks on a CTA
+CTA components fire `cds-cta-run-action` custom event when user clicks on a CTA
 with `type="video"`. Application code can take care of creating/putting our
 video player component and working with our video player service API to put the
 video data into the video player component:
@@ -270,21 +286,21 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
 
 ...
 
-document.addEventListener('dds-cta-run-action', async event => {
+document.addEventListener('cds-cta-run-action', async event => {
   const videoId = event.detail.href;
   const lightboxId = `lightbox-${videoId}`;
   let lightboxElem = document.getElementById(lightboxId);
   if (!lightboxElem) {
-    lightboxElem = document.createElement('dds-expressive-modal');
+    lightboxElem = document.createElement('cds-expressive-modal');
     lightboxElem.size = 'full-width';
     lightboxElem.innerHTML = `
-      <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-      <dds-lightbox-video-player id="lightbox-video-player-${videoId}"></dds-lightbox-video-player>
+      <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+      <cds-lightbox-video-player id="lightbox-video-player-${videoId}"></cds-lightbox-video-player>
     `;
     document.body.appendChild(lightboxElem);
     const videoTarget = document.createElement('div');
     videoTarget.id = `video-target-${videoId}`;
-    videoTarget.className = 'bx--video-player__video';
+    videoTarget.className = 'cds--video-player__video';
     const videoPlayer = document.getElementById(`lightbox-video-player-${videoId}`);
     videoPlayer.appendChild(videoTarget);
     const [videoData] = await Promise.all([
diff --git a/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx b/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx
index ae89089453e..aa5d52b9533 100644
--- a/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/cta/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef as TextCTAProps } from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
 import { PropTypesRef as ButtonCTAProps } from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
@@ -14,9 +19,9 @@ import { PropTypesRef as FeatureCTAProps } from '@carbon/ibmdotcom-web-component
 
 ## Getting started
 
-## `<DDSTextCTA>`
+## `<C4DTextCTA>`
 
-`DDSTextCTA` is the most basic version of CTA, presented as a simple link.
+`C4DTextCTA` is the most basic version of CTA, presented as a simple link.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-text)
@@ -27,13 +32,13 @@ import { PropTypesRef as FeatureCTAProps } from '@carbon/ibmdotcom-web-component
 ### JS
 
 ```javascript
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta.js';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta.js';
 
 function App() {
   return (
-  <DDSTextCTA href="https://www.ibm.com/" cta-type="local">
-    Copy text
-  </DDSTextCTA>
+    <C4DTextCTA href="https://www.ibm.com/" cta-type="local">
+      Copy text
+    </C4DTextCTA>
   );
 }
 ```
@@ -42,9 +47,9 @@ function App() {
 
 <Props of={TextCTAProps} />
 
-## `<DDSButtonCTA>`
+## `<C4DButtonCTA>`
 
-`DDSButtonCTA` is a version of CTA presented as a button.
+`C4DButtonCTA` is a version of CTA presented as a button.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-button)
@@ -55,13 +60,16 @@ function App() {
 ### JS
 
 ```javascript
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta.js';
+import C4DButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta.js';
 
 function App() {
   return (
-  <DDSButtonCTA cta-type="local" kind="tertiary" href="https://www.example.com">
-    Button CTA Copy
-  </DDSButtonCTA>
+    <C4DButtonCTA
+      cta-type="local"
+      kind="tertiary"
+      href="https://www.example.com">
+      Button CTA Copy
+    </C4DButtonCTA>
   );
 }
 ```
@@ -70,9 +78,9 @@ function App() {
 
 <Props of={ButtonCTAProps} />
 
-## `<DDSCardCTA>`
+## `<C4DCardCTA>`
 
-`DDSCardCTA` is a version of CTA presented as a card.
+`C4DCardCTA` is a version of CTA presented as a card.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-card)
@@ -83,18 +91,18 @@ function App() {
 ### JS
 
 ```javascript
-import DDSCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 function App() {
   return (
-  <DDSCardCTA cta-type="local" href="https://www.example.com">
-    Card CTA Copy
-    <DDSCardCTAFooter>
-      <ArrowRight20 slot="icon" />
-    </DDSCardCTAFooter>
-  </DDSCardCTA>
+    <C4DCardCTA cta-type="local" href="https://www.example.com">
+      Card CTA Copy
+      <C4DCardCTAFooter>
+        <ArrowRight20 slot="icon" />
+      </C4DCardCTAFooter>
+    </C4DCardCTA>
   );
 }
 ```
@@ -103,9 +111,9 @@ function App() {
 
 <Props of={CardCTAProps} />
 
-## `<DDSCardLinkCTA>`
+## `<C4DCardLinkCTA>`
 
-`DDSCardLinkCTA` is a version of CTA presented as a card.
+`C4DCardLinkCTA` is a version of CTA presented as a card.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-card-link)
@@ -116,19 +124,19 @@ function App() {
 ### JS
 
 ```javascript
-import DDSCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardLinkCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-link-cta.js';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading.js';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 function App() {
   return (
-  <DDSCardLinkCTA href="https://www.ibm.com/" cta-type="local">
-    <DDSCardLinkHeading>Heading text</DDSCardLinkHeading>
-    <DDSCardCTAFooter>
-      <ArrowRight20 slot="icon" />
-    </DDSCardCTAFooter>
-  </DDSCardLinkCTA>
+    <C4DCardLinkCTA href="https://www.ibm.com/" cta-type="local">
+      <C4DCardLinkHeading>Heading text</C4DCardLinkHeading>
+      <C4DCardCTAFooter>
+        <ArrowRight20 slot="icon" />
+      </C4DCardCTAFooter>
+    </C4DCardLinkCTA>
   );
 }
 ```
@@ -137,9 +145,9 @@ function App() {
 
 <Props of={CardLinkCTAProps} />
 
-## `<DDSFeatureCTA>`
+## `<C4DFeatureCTA>`
 
-`DDSFeatureCTA` is a version of CTA presented as a feature card.
+`C4DFeatureCTA` is a version of CTA presented as a feature card.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/cta-feature)
@@ -150,50 +158,55 @@ function App() {
 ### JS
 
 ```javascript
-import DDSFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
-import DDSFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
+import C4DFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 function App() {
   return (
-  <DDSFeatureCTA cta-type="local" href="https://www.example.com">
-    <DDSCardHeading>Feature CTA Copy</DDSCardHeading>
-    <DDSImage slot="image"
-              alt="Image alt text"
-              default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616" />
-    <DDSFeatureCTAFooter>
-      <ArrowRight20 slot="icon" />
-    </DDSFeatureCTAFooter>
-  </DDSFeatureCTA>
+    <C4DFeatureCTA cta-type="local" href="https://www.example.com">
+      <C4DCardHeading>Feature CTA Copy</C4DCardHeading>
+      <C4DImage
+        slot="image"
+        alt="Image alt text"
+        default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
+      />
+      <C4DFeatureCTAFooter>
+        <ArrowRight20 slot="icon" />
+      </C4DFeatureCTAFooter>
+    </C4DFeatureCTA>
   );
 }
 ```
 
-The Feature Card for CTA can also use the 'large' variation, but be sure to at least include an eyebrow and heading.
+The Feature Card for CTA can also use the 'large' variation, but be sure to at
+least include an eyebrow and heading.
 
 ### JS
 
 ```javascript
-import DDSFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
-import DDSFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DFeatureCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta';
+import C4DFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 
 function App() {
   return (
-  <DDSFeatureCTA size="large" cta-type="local" href="https://www.example.com">
-    <DDSCardHeading>Feature CTA Copy</DDSCardHeading>
-    <DDSImage slot="image"
-              alt="Image alt text"
-              default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616" />
-    <DDSFeatureCTAFooter>
-      <ArrowRight20 slot="icon" />
-    </DDSFeatureCTAFooter>
-  </DDSFeatureCTA>
+    <C4DFeatureCTA size="large" cta-type="local" href="https://www.example.com">
+      <C4DCardHeading>Feature CTA Copy</C4DCardHeading>
+      <C4DImage
+        slot="image"
+        alt="Image alt text"
+        default-src="https://fpoimg.com/672x672?text=1:1&bg_color=ee5396&text_color=161616"
+      />
+      <C4DFeatureCTAFooter>
+        <ArrowRight20 slot="icon" />
+      </C4DFeatureCTAFooter>
+    </C4DFeatureCTA>
   );
 }
 ```
@@ -204,29 +217,31 @@ function App() {
 
 ## Using a video player
 
-The `<DDSVideoCTAContainer>` component lets you integrate `<DDSTextCTA>`/`<DDSButtonCTA>`/`<DDSCardCTA>`/`<DDSFeatureCTA>` with video player quickly.
-Only one `<DDSVideoCTAContainer>` has to be put in application.
-Ensure that `<DDSVideoCTAContainer>` contains all `<DDSTextCTA>`/`<DDSButtonCTA>`/`<DDSCardCTA>`/`<DDSFeatureCTA>`:
+The `<C4DVideoCTAContainer>` component lets you integrate
+`<C4DTextCTA>`/`<C4DButtonCTA>`/`<C4DCardCTA>`/`<C4DFeatureCTA>` with video
+player quickly. Only one `<C4DVideoCTAContainer>` has to be put in application.
+Ensure that `<C4DVideoCTAContainer>` contains all
+`<C4DTextCTA>`/`<C4DButtonCTA>`/`<C4DCardCTA>`/`<C4DFeatureCTA>`:
 
 ### JS
 
 ```javascript
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta.js';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta.js';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 function App() {
   return (
-  <DDSVideoCTAContainer>
-    <DDSTextCTA cta-type="video" href="1_9h94wo6b"></DDSTextCTA>
-  </DDSVideoCTAContainer>
+    <C4DVideoCTAContainer>
+      <C4DTextCTA cta-type="video" href="0_ibuqxqbe"></C4DTextCTA>
+    </C4DVideoCTAContainer>
   );
 }
 ```
 
-### `dds-cta-run-action` customization
+### `cds-cta-run-action` customization
 
 For more flexible solution that is better tailored to your application's needs,
-CTA components fire `dds-cta-run-action` custom event when user clicks on a CTA
+CTA components fire `cds-cta-run-action` custom event when user clicks on a CTA
 with `type="video"`. Application code can take care of creating/putting our
 video player component and working with our video player service API to put the
 video data into the video player component:
@@ -239,21 +254,21 @@ import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lig
 
 ...
 
-document.addEventListener('dds-cta-run-action', async event => {
+document.addEventListener('cds-cta-run-action', async event => {
   const videoId = event.detail.href;
   const lightboxId = `lightbox-${videoId}`;
   let lightboxElem = document.getElementById(lightboxId);
   if (!lightboxElem) {
-    lightboxElem = document.createElement('dds-expressive-modal');
+    lightboxElem = document.createElement('cds-expressive-modal');
     lightboxElem.size = 'full-width';
     lightboxElem.innerHTML = `
-      <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-      <dds-lightbox-video-player id="lightbox-video-player-${videoId}"></dds-lightbox-video-player>
+      <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+      <cds-lightbox-video-player id="lightbox-video-player-${videoId}"></cds-lightbox-video-player>
     `;
     document.body.appendChild(lightboxElem);
     const videoTarget = document.createElement('div');
     videoTarget.id = `video-target-${videoId}`;
-    videoTarget.className = 'bx--video-player__video';
+    videoTarget.className = 'cds--video-player__video';
     const videoPlayer = document.getElementById(`lightbox-video-player-${videoId}`);
     videoPlayer.appendChild(videoTarget);
     const [videoData] = await Promise.all([
@@ -271,21 +286,22 @@ document.addEventListener('dds-cta-run-action', async event => {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-button-cta>`        | N/A                    | Component   |
-| `<dds-card-cta>`        | N/A                    | Component   |
-| `<dds-card-cta-footer>`        | N/A                    | Component   |
-| `<dds-card-cta-image>`        | N/A                    | Component   |
-| `<dds-card-link-cta>`        | N/A                    | Component   |
-| `<dds-feature-cta>`        | N/A                    | Component   |
-| `<dds-feature-cta-footer>`        | N/A                    | Component   |
-| `<dds-link-list-item-card-cta>`        | N/A                    | Component   |
-| `<dds-link-list-item-cta>`        | N/A                    | Component   |
-| `<dds-text-cta>`        | N/A                    | Component   |
-| `<dds-video-cta-composite>`        | N/A                    | Component   |
-| `<dds-video-cta-container>`        | N/A                    | Component   |
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector     | Compatibility selector | Description |
+| --------------------------- | ---------------------- | ----------- |
+| `<cds-button-cta>`          | N/A                    | Component   |
+| `<cds-card-cta>`            | N/A                    | Component   |
+| `<cds-card-cta-footer>`     | N/A                    | Component   |
+| `<cds-card-cta-image>`      | N/A                    | Component   |
+| `<cds-card-link-cta>`       | N/A                    | Component   |
+| `<cds-feature-cta>`         | N/A                    | Component   |
+| `<cds-feature-cta-footer>`  | N/A                    | Component   |
+| `<cds-link-list-item-cta>`  | N/A                    | Component   |
+| `<cds-text-cta>`            | N/A                    | Component   |
+| `<cds-video-cta-composite>` | N/A                    | Component   |
+| `<cds-video-cta-container>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx b/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx
index ff38520c8b9..0a69787d36b 100644
--- a/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx
+++ b/packages/web-components/src/components/cta/__stories__/cta.stories.react.tsx
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -13,26 +13,39 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCTAHead from '@carbon/ibmdotcom-web-components/es/components-react/cta/cta';
-import DDSFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCTAHead from '@carbon/ibmdotcom-web-components/es/components-react/cta/cta';
+import C4DFeatureCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/feature-cta-footer';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 import readme from './README.stories.react.mdx';
-import { hrefsForType, knobNamesForType, footerKnobNamesForType, typeOptions, types } from './ctaTypeConfig';
+import {
+  hrefsForType,
+  knobNamesForType,
+  footerKnobNamesForType,
+  typeOptions,
+  types,
+} from './ctaTypeConfig';
 import { CTA_TYPE } from '../defs';
 import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--001.jpg';
 
 let duration;
 
-export const Text = args => {
-  const { copy, ctaType, download, href, customVideoTitle, customVideoDescription } = args?.TextCTA ?? {};
+export const Text = (args) => {
+  const {
+    copy,
+    ctaType,
+    download,
+    href,
+    customVideoTitle,
+    customVideoDescription,
+  } = args?.TextCTA ?? {};
 
-  const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+  const childCta = document.querySelector('cds-cta')?.shadowRoot!.children[0];
   childCta?.setAttribute('href', href);
 
   if (ctaType === 'video' && childCta) {
@@ -50,7 +63,7 @@ export const Text = args => {
   }
 
   return (
-    <DDSCTAHead
+    <C4DCTAHead
       cta-style="text"
       cta-type={ctaType || undefined}
       video-name={customVideoTitle || undefined}
@@ -58,23 +71,40 @@ export const Text = args => {
       download={download || undefined}
       href={href || undefined}>
       {copy || customVideoTitle}
-    </DDSCTAHead>
+    </C4DCTAHead>
   );
 };
 
 Text.story = {
   parameters: {
-    gridContentClasses: 'bx--col-sm-4 bx--col-lg-8',
+    gridContentClasses: 'cds--col-sm-4 cds--col-lg-8',
     knobs: {
       TextCTA: () => {
-        const ctaType = select('CTA type (cta-type)', typeOptions, types[CTA_TYPE.LOCAL]);
-        const copy = ctaType === CTA_TYPE.VIDEO ? undefined : text('Copy (copy):', 'Lorem ipsum dolor sit amet');
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : text('Copy (copy):', 'Lorem ipsum dolor sit amet');
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
-        const customVideoTitle = ctaType === CTA_TYPE.VIDEO ? text('Custom video title', 'Custom video title') : null;
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? text('Custom video title', 'Custom video title')
+            : null;
 
         const customVideoDescription =
-          ctaType === CTA_TYPE.VIDEO ? text('Custom video description', 'This is a custom video description') : null;
+          ctaType === CTA_TYPE.VIDEO
+            ? text(
+                'Custom video description',
+                'This is a custom video description'
+              )
+            : null;
 
         return {
           copy,
@@ -82,29 +112,41 @@ Text.story = {
           download,
           customVideoTitle,
           customVideoDescription,
-          href: text(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          href: text(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
         };
       },
     },
   },
 };
 
-export const Button = args => {
-  const { copy, ctaType, download, href, customVideoTitle, customVideoDescription } = args?.ButtonCTA ?? {};
+export const Button = (args) => {
+  const {
+    copy,
+    ctaType,
+    download,
+    href,
+    customVideoTitle,
+    customVideoDescription,
+  } = args?.ButtonCTA ?? {};
 
-  const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+  const childCta = document.querySelector('cds-cta')?.shadowRoot!.children[0];
   childCta?.setAttribute('href', href);
 
   if (ctaType === 'video' && childCta) {
-    duration ? null : (duration = childCta.textContent!.match(/\((.*)\)/)?.pop());
+    duration
+      ? null
+      : (duration = childCta.textContent!.match(/\((.*)\)/)?.pop());
     childCta && duration
       ? (childCta.textContent = `${customVideoTitle} (${duration})`)
       : ((childCta as HTMLElement).innerText = customVideoTitle);
   }
 
   return (
-    <DDSButtonGroup>
-      <DDSCTAHead
+    <C4DButtonGroup>
+      <C4DCTAHead
         cta-style="button"
         cta-type={ctaType || undefined}
         video-name={customVideoTitle || undefined}
@@ -112,27 +154,48 @@ export const Button = args => {
         download={download || undefined}
         href={href || undefined}>
         {copy}
-      </DDSCTAHead>
-      <DDSCTAHead cta-style="button" cta-type={ctaType || undefined} download={download || undefined} href={href || undefined}>
+      </C4DCTAHead>
+      <C4DCTAHead
+        cta-style="button"
+        cta-type={ctaType || undefined}
+        download={download || undefined}
+        href={href || undefined}>
         {copy}
-      </DDSCTAHead>
-    </DDSButtonGroup>
+      </C4DCTAHead>
+    </C4DButtonGroup>
   );
 };
 
 Button.story = {
   parameters: {
-    gridContentClasses: 'bx--col-sm-4 bx--col-lg-8',
+    gridContentClasses: 'cds--col-sm-4 cds--col-lg-8',
     knobs: {
       ButtonCTA: () => {
-        const ctaType = select('CTA type (cta-type)', typeOptions, types[CTA_TYPE.LOCAL]);
-        const copy = ctaType === CTA_TYPE.VIDEO ? undefined : text('Copy (copy):', 'Lorem ipsum dolor sit amet');
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : text('Copy (copy):', 'Lorem ipsum dolor sit amet');
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
-        const customVideoTitle = ctaType === CTA_TYPE.VIDEO ? text('Custom video title', 'Custom video title') : null;
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? text('Custom video title', 'Custom video title')
+            : null;
 
         const customVideoDescription =
-          ctaType === CTA_TYPE.VIDEO ? text('Custom video description', 'This is a custom video description') : null;
+          ctaType === CTA_TYPE.VIDEO
+            ? text(
+                'Custom video description',
+                'This is a custom video description'
+              )
+            : null;
 
         return {
           copy,
@@ -140,14 +203,17 @@ Button.story = {
           download,
           customVideoTitle,
           customVideoDescription,
-          href: text(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          href: text(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
         };
       },
     },
   },
 };
 
-export const Card = args => {
+export const Card = (args) => {
   const {
     heading,
     copy,
@@ -162,24 +228,29 @@ export const Card = args => {
     thumbnail,
   } = args?.CardCTA ?? {};
 
-  const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+  const childCta = document.querySelector('cds-cta')?.shadowRoot!.children[0];
   childCta?.setAttribute('href', href);
 
   if (ctaType === 'video') {
     const headingComponent =
-      childCta?.shadowRoot?.querySelector('dds-card-heading') || childCta?.querySelector('dds-card-heading');
-    headingComponent && !duration ? (duration = headingComponent?.textContent!.match(/\((.*)\)/)?.pop()) : null;
+      childCta?.shadowRoot?.querySelector('cds-card-heading') ||
+      childCta?.querySelector('cds-card-heading');
+    headingComponent && !duration
+      ? (duration = headingComponent?.textContent!.match(/\((.*)\)/)?.pop())
+      : null;
 
     if (headingComponent?.textContent) {
       duration
         ? (headingComponent!.textContent = `${customVideoTitle} (${duration})`)
         : (headingComponent!.textContent = customVideoTitle);
     }
-    childCta && noPoster ? childCta?.setAttribute('no-poster', '') : childCta?.removeAttribute('no-poster');
+    childCta && noPoster
+      ? childCta?.setAttribute('no-poster', '')
+      : childCta?.removeAttribute('no-poster');
   }
 
   return (
-    <DDSCTAHead
+    <C4DCTAHead
       cta-style="card"
       cta-type={ctaType || undefined}
       video-name={customVideoTitle || undefined}
@@ -188,52 +259,83 @@ export const Card = args => {
       href={href || undefined}
       noPoster={noPoster}
       thumbnail={thumbnail || undefined}>
-      <DDSCardHeading>{heading || customVideoTitle}</DDSCardHeading>
+      <C4DCardHeading>{heading || customVideoTitle}</C4DCardHeading>
       {ctaType !== 'video' ? copy : ''}
-      <DDSCardCTAFooter
+      <C4DCardCTAFooter
         cta-type={ctaType || undefined}
         video-name={customVideoTitle || undefined}
         video-description={customVideoDescription || undefined}
         download={footerDownload || undefined}
-        href={footerHref || undefined}></DDSCardCTAFooter>
-    </DDSCTAHead>
+        href={footerHref || undefined}></C4DCardCTAFooter>
+    </C4DCTAHead>
   );
 };
 
 Card.story = {
   parameters: {
-    gridContentClasses: 'bx--col-sm-4 bx--col-lg-4 bx--no-gutter',
+    gridContentClasses: 'cds--col-sm-4 cds--col-lg-4 cds--no-gutter',
     knobs: {
       CardCTA: () => {
         const { ctaType } = Text.story.parameters.knobs.TextCTA();
-        const noPoster = ctaType === CTA_TYPE.VIDEO ? boolean('No Video Poster', false) : null;
-        const heading = ctaType === CTA_TYPE.VIDEO ? null : text('Heading (heading):', 'Explore AI use cases in all industries');
-        const thumbnail = ctaType === CTA_TYPE.VIDEO ? text('Custom thumbnail (thumbnail):', '') : null;
+        const noPoster =
+          ctaType === CTA_TYPE.VIDEO ? boolean('No Video Poster', false) : null;
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? null
+            : text(
+                'Heading (heading):',
+                'Explore AI use cases in all industries'
+              );
+        const thumbnail =
+          ctaType === CTA_TYPE.VIDEO
+            ? text('Custom thumbnail (thumbnail):', '')
+            : null;
         return {
           ...Text.story.parameters.knobs.TextCTA(),
           heading,
           thumbnail,
           footerCopy: text('Footer copy text', ''),
-          footerHref: text(footerKnobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          footerHref: text(
+            footerKnobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
           noPoster,
-          download: ctaType !== CTA_TYPE.DOWNLOAD ? undefined : text('Download target (download)', 'IBM_Annual_Report_2019.pdf'),
+          download:
+            ctaType !== CTA_TYPE.DOWNLOAD
+              ? undefined
+              : text(
+                  'Download target (download)',
+                  'IBM_Annual_Report_2019.pdf'
+                ),
         };
       },
     },
   },
 };
 
-export const CardLink = args => {
-  const { heading, copy, ctaType, download, footerDownload, href, footerHref, customVideoTitle, customVideoDescription } =
-    args?.CardCTA ?? {};
+export const CardLink = (args) => {
+  const {
+    heading,
+    copy,
+    ctaType,
+    download,
+    footerDownload,
+    href,
+    footerHref,
+    customVideoTitle,
+    customVideoDescription,
+  } = args?.CardCTA ?? {};
 
-  const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+  const childCta = document.querySelector('cds-cta')?.shadowRoot!.children[0];
   childCta?.setAttribute('href', href);
 
   if (ctaType === 'video') {
     const headingComponent =
-      childCta?.shadowRoot?.querySelector('dds-card-link-heading') || childCta?.querySelector('dds-card-link-heading');
-    headingComponent && !duration ? (duration = headingComponent?.textContent!.match(/\((.*)\)/)?.pop()) : null;
+      childCta?.shadowRoot?.querySelector('cds-card-link-heading') ||
+      childCta?.querySelector('cds-card-link-heading');
+    headingComponent && !duration
+      ? (duration = headingComponent?.textContent!.match(/\((.*)\)/)?.pop())
+      : null;
 
     if (headingComponent?.textContent) {
       duration
@@ -243,38 +345,62 @@ export const CardLink = args => {
   }
 
   return (
-    <DDSCTAHead
+    <C4DCTAHead
       cta-style="card-link"
       cta-type={ctaType || undefined}
       video-name={customVideoTitle || undefined}
       video-description={customVideoDescription || undefined}
       download={download || undefined}
       href={href || undefined}>
-      <DDSCardLinkHeading> {ctaType !== 'video' ? heading : ''}</DDSCardLinkHeading>
+      <C4DCardLinkHeading>
+        {' '}
+        {ctaType !== 'video' ? heading : ''}
+      </C4DCardLinkHeading>
       {copy ? <p>{copy}</p> : ''}
-      <DDSCardCTAFooter
+      <C4DCardCTAFooter
         cta-type={ctaType || undefined}
         video-name={customVideoTitle || undefined}
         video-description={customVideoDescription || undefined}
         download={footerDownload || undefined}
-        href={footerHref || undefined}></DDSCardCTAFooter>
-    </DDSCTAHead>
+        href={footerHref || undefined}></C4DCardCTAFooter>
+    </C4DCTAHead>
   );
 };
 
 CardLink.story = {
   parameters: {
-    gridContentClasses: 'bx--col-sm-4 bx--col-lg-4 bx--no-gutter',
+    gridContentClasses: 'cds--col-sm-4 cds--col-lg-4 cds--no-gutter',
     knobs: {
       CardCTA: () => {
-        const ctaType = select('CTA type (cta-type)', typeOptions, types[CTA_TYPE.LOCAL]);
-        const copy = ctaType === CTA_TYPE.VIDEO ? undefined : text('Copy (copy):', '');
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO ? undefined : text('Copy (copy):', '');
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
-        const heading = ctaType === CTA_TYPE.VIDEO ? null : text('Heading (heading):', 'Explore AI use cases in all industries');
-        const customVideoTitle = ctaType === CTA_TYPE.VIDEO ? text('Custom video title', 'Custom video title') : null;
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? null
+            : text(
+                'Heading (heading):',
+                'Explore AI use cases in all industries'
+              );
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? text('Custom video title', 'Custom video title')
+            : null;
         const customVideoDescription =
-          ctaType === CTA_TYPE.VIDEO ? text('Custom video description', 'This is a custom video description') : null;
+          ctaType === CTA_TYPE.VIDEO
+            ? text(
+                'Custom video description',
+                'This is a custom video description'
+              )
+            : null;
         return {
           heading,
           copy,
@@ -282,28 +408,50 @@ CardLink.story = {
           download,
           customVideoTitle,
           customVideoDescription,
-          href: text(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          href: text(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
           footerCopy: text('Footer copy text', ''),
-          footerHref: text(footerKnobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          footerHref: text(
+            footerKnobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
           footerDownload:
-            ctaType !== CTA_TYPE.DOWNLOAD ? undefined : text('Download target (download)', 'IBM_Annual_Report_2019.pdf'),
+            ctaType !== CTA_TYPE.DOWNLOAD
+              ? undefined
+              : text(
+                  'Download target (download)',
+                  'IBM_Annual_Report_2019.pdf'
+                ),
         };
       },
     },
   },
 };
 
-export const Feature = args => {
-  const { heading, ctaType, download, href, customVideoTitle, customVideoDescription } = args?.FeatureCTA ?? {};
-  const { download: footerDownload, href: footerHref } = args?.FeatureCTAFooter ?? {};
+export const Feature = (args) => {
+  const {
+    heading,
+    ctaType,
+    download,
+    href,
+    customVideoTitle,
+    customVideoDescription,
+  } = args?.FeatureCTA ?? {};
+  const { download: footerDownload, href: footerHref } =
+    args?.FeatureCTAFooter ?? {};
 
-  const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+  const childCta = document.querySelector('cds-cta')?.shadowRoot!.children[0];
   childCta?.setAttribute('href', href);
 
   if (ctaType === 'video') {
     const headingComponent =
-      childCta?.shadowRoot?.querySelector('dds-card-heading') || childCta?.querySelector('dds-card-heading');
-    headingComponent && !duration ? (duration = headingComponent?.textContent!.match(/\((.*)\)/)?.pop()) : null;
+      childCta?.shadowRoot?.querySelector('cds-card-heading') ||
+      childCta?.querySelector('cds-card-heading');
+    headingComponent && !duration
+      ? (duration = headingComponent?.textContent!.match(/\((.*)\)/)?.pop())
+      : null;
 
     if (headingComponent?.textContent) {
       duration
@@ -313,38 +461,51 @@ export const Feature = args => {
   }
 
   return (
-    <DDSCTAHead
+    <C4DCTAHead
       cta-style="feature"
       cta-type={ctaType || undefined}
       video-name={customVideoTitle || undefined}
       video-description={customVideoDescription || undefined}
       download={download || undefined}
       href={href || undefined}>
-      <DDSCardHeading>{heading}</DDSCardHeading>
-      <DDSImage slot="image" alt="Image alt text" default-src={imgLg1x1} />
-      <DDSFeatureCTAFooter
+      <C4DCardHeading>{heading}</C4DCardHeading>
+      <C4DImage slot="image" alt="Image alt text" default-src={imgLg1x1} />
+      <C4DFeatureCTAFooter
         cta-type={ctaType || undefined}
         video-name={customVideoTitle || undefined}
         video-description={customVideoDescription || undefined}
         download={footerDownload || undefined}
         href={footerHref || undefined}
       />
-    </DDSCTAHead>
+    </C4DCTAHead>
   );
 };
 
 Feature.story = {
   parameters: {
-    gridContentClasses: 'bx--col-sm-4 bx--col-lg-8',
+    gridContentClasses: 'cds--col-sm-4 cds--col-lg-8',
     knobs: {
       FeatureCTA: () => {
         const ctaType = select('CTA type:', typeOptions, types[CTA_TYPE.LOCAL]);
-        const heading = ctaType === CTA_TYPE.VIDEO ? undefined : text('Heading', 'Explore AI uses cases in all industries');
+        const heading =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : text('Heading', 'Explore AI uses cases in all industries');
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
-        const customVideoTitle = ctaType === CTA_TYPE.VIDEO ? text('Custom video title', 'Custom video title') : null;
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : text('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+        const customVideoTitle =
+          ctaType === CTA_TYPE.VIDEO
+            ? text('Custom video title', 'Custom video title')
+            : null;
         const customVideoDescription =
-          ctaType === CTA_TYPE.VIDEO ? text('Custom video description', 'This is a custom video description') : null;
+          ctaType === CTA_TYPE.VIDEO
+            ? text(
+                'Custom video description',
+                'This is a custom video description'
+              )
+            : null;
         return {
           heading,
           ctaType,
@@ -363,10 +524,10 @@ export default {
   decorators: [
     (story, { parameters }) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
+        <div className="cds--grid">
+          <div className="cds--row">
             <div className={parameters.gridContentClasses}>
-              <DDSVideoCTAContainer>{story()}</DDSVideoCTAContainer>
+              <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
             </div>
           </div>
         </div>
diff --git a/packages/web-components/src/components/cta/__stories__/cta.stories.ts b/packages/web-components/src/components/cta/__stories__/cta.stories.ts
index 1a56c18e974..ccfdbacc7c8 100644
--- a/packages/web-components/src/components/cta/__stories__/cta.stories.ts
+++ b/packages/web-components/src/components/cta/__stories__/cta.stories.ts
@@ -17,8 +17,8 @@ import '../feature-cta-footer';
 import '../text-cta';
 import '../cta';
 import '../../button-group/index';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select, boolean } from '@storybook/addon-knobs';
 import { icons as ctaIcons } from '../../../component-mixins/cta/cta';
 // eslint-disable-next-line sort-imports
@@ -58,12 +58,12 @@ export const Default = (args) => {
   // due to the shadow DOM nesting, modifying storybook knobs won't retrigger some DOM updates
   // these are for demo purposes only
   if (ctaType === 'video') {
-    const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+    const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0];
 
     if (ctaStyle === 'card' || ctaStyle === 'feature') {
       const headingComponent =
-        childCta?.shadowRoot?.querySelector('dds-card-heading') ||
-        childCta?.querySelector('dds-card-heading');
+        childCta?.shadowRoot?.querySelector('c4d-card-heading') ||
+        childCta?.querySelector('c4d-card-heading');
       headingComponent && !duration
         ? (duration = headingComponent!.textContent!.match(/\((.*)\)/)?.pop())
         : null;
@@ -100,103 +100,103 @@ export const Default = (args) => {
     }
   }
 
-  const childCta = document.querySelector('dds-cta')?.shadowRoot!.children[0];
+  const childCta = document.querySelector('c4d-cta')?.shadowRoot!.children[0];
   childCta?.setAttribute('href', href);
 
   return html`
     ${ctaStyle === 'button'
       ? html`
-          <dds-button-group>
-            <dds-cta
+          <c4d-button-group>
+            <c4d-cta
               cta-style="button"
-              cta-type="${ifNonNull(ctaType)}"
-              video-name="${ifNonNull(customVideoTitle)}"
-              video-description="${ifNonNull(customVideoDescription)}"
-              download="${ifNonNull(download)}"
-              href="${ifNonNull(href)}">
+              cta-type="${ifDefined(ctaType)}"
+              video-name="${ifDefined(customVideoTitle)}"
+              video-description="${ifDefined(customVideoDescription)}"
+              download="${ifDefined(download)}"
+              href="${ifDefined(href)}">
               ${copy}
-            </dds-cta>
-            <dds-cta
+            </c4d-cta>
+            <c4d-cta
               cta-style="button"
-              cta-type="${ifNonNull(ctaType)}"
-              href="${ifNonNull(href)}"
-              >${copy}</dds-cta
+              cta-type="${ifDefined(ctaType)}"
+              href="${ifDefined(href)}"
+              >${copy}</c4d-cta
             >
-          </dds-button-group>
+          </c4d-button-group>
         `
       : html`
-          <dds-cta
-            cta-style="${ifNonNull(ctaStyle)}"
-            cta-type="${ifNonNull(ctaType)}"
-            video-name="${ifNonNull(customVideoTitle)}"
-            video-description="${ifNonNull(customVideoDescription)}"
-            download="${ifNonNull(download)}"
+          <c4d-cta
+            cta-style="${ifDefined(ctaStyle)}"
+            cta-type="${ifDefined(ctaType)}"
+            video-name="${ifDefined(customVideoTitle)}"
+            video-description="${ifDefined(customVideoDescription)}"
+            download="${ifDefined(download)}"
             ?no-poster=${noPoster}
-            thumbnail="${ifNonNull(thumbnail)}"
-            href="${ifNonNull(href)}">
+            thumbnail="${ifDefined(thumbnail)}"
+            href="${ifDefined(href)}">
             ${ctaStyle !== 'card' ? copy : ''}
             ${ctaStyle === 'card'
               ? html`
                   ${ctaType !== 'video'
-                    ? html` <dds-card-heading>${heading}</dds-card-heading> `
+                    ? html` <c4d-card-heading>${heading}</c4d-card-heading> `
                     : ''}
                   ${ctaType !== 'video' ? copy : ''}
-                  <dds-card-cta-footer
-                    cta-type="${ifNonNull(ctaType)}"
-                    download="${ifNonNull(footerDownload)}"
-                    video-name="${ifNonNull(customVideoTitle)}"
-                    video-description="${ifNonNull(customVideoDescription)}"
-                    href="${ifNonNull(footerHref)}">
+                  <c4d-card-cta-footer
+                    cta-type="${ifDefined(ctaType)}"
+                    download="${ifDefined(footerDownload)}"
+                    video-name="${ifDefined(customVideoTitle)}"
+                    video-description="${ifDefined(customVideoDescription)}"
+                    href="${ifDefined(footerHref)}">
                     ${footerCopy || ctaIcons[ctaType]({ slot: 'icon' })}
-                  </dds-card-cta-footer>
+                  </c4d-card-cta-footer>
                 `
               : ''}
             ${ctaStyle === 'feature'
               ? html`
                   ${ctaType !== 'video'
-                    ? html` <dds-card-heading>${heading}</dds-card-heading> `
+                    ? html` <c4d-card-heading>${heading}</c4d-card-heading> `
                     : ''}
                   ${ctaType !== CTA_TYPE.VIDEO || customThumbnail
                     ? html`
-                        <dds-image
+                        <c4d-image
                           slot="image"
                           alt="Image alt text"
                           default-src="${imgLg1x1}">
-                        </dds-image>
+                        </c4d-image>
                       `
                     : ''}
-                  <dds-feature-cta-footer
-                    cta-type="${ifNonNull(ctaType)}"
-                    download="${ifNonNull(footerDownload)}"
-                    video-name="${ifNonNull(customVideoTitle)}"
-                    video-description="${ifNonNull(customVideoDescription)}"
-                    href="${ifNonNull(footerHref)}">
+                  <c4d-feature-cta-footer
+                    cta-type="${ifDefined(ctaType)}"
+                    download="${ifDefined(footerDownload)}"
+                    video-name="${ifDefined(customVideoTitle)}"
+                    video-description="${ifDefined(customVideoDescription)}"
+                    href="${ifDefined(footerHref)}">
                     ${footerCopy || ctaIcons[ctaType]({ slot: 'icon' })}
-                  </dds-feature-cta-footer>
+                  </c4d-feature-cta-footer>
                 `
               : ''}
             ${ctaStyle === 'card-link'
               ? html`
-                  <dds-card-link-heading>${heading}</dds-card-link-heading>
+                  <c4d-card-link-heading>${heading}</c4d-card-link-heading>
                   ${copy}
-                  <dds-card-cta-footer
-                    cta-type="${ifNonNull(ctaType)}"
-                    download="${ifNonNull(footerDownload)}"
-                    video-name="${ifNonNull(customVideoTitle)}"
-                    video-description="${ifNonNull(customVideoDescription)}"
-                    href="${ifNonNull(footerHref)}">
+                  <c4d-card-cta-footer
+                    cta-type="${ifDefined(ctaType)}"
+                    download="${ifDefined(footerDownload)}"
+                    video-name="${ifDefined(customVideoTitle)}"
+                    video-description="${ifDefined(customVideoDescription)}"
+                    href="${ifDefined(footerHref)}">
                     ${footerCopy || ctaIcons[ctaType]({ slot: 'icon' })}
-                  </dds-card-cta-footer>
+                  </c4d-card-cta-footer>
                 `
               : ''}
-          </dds-cta>
+          </c4d-cta>
         `}
   `;
 };
 
 Default.story = {
   parameters: {
-    gridContentClasses: 'bx--col-sm-4 bx--col-lg-8',
+    gridContentClasses: 'cds--col-sm-4 cds--col-lg-8',
     knobs: {
       DefaultCTA: () => {
         const ctaStyle = select(
@@ -311,10 +311,10 @@ export default {
   decorators: [
     (story, { parameters }) => {
       return html`
-        <div class="bx--grid">
-          <div class="bx--row">
+        <div class="cds--grid">
+          <div class="cds--row">
             <div class="${parameters.gridContentClasses}">
-              <dds-video-cta-container> ${story()} </dds-video-cta-container>
+              <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
             </div>
           </div>
         </div>
diff --git a/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js b/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js
index 8dc4e1179cb..9ced19197f5 100644
--- a/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js
+++ b/packages/web-components/src/components/cta/__stories__/ctaTypeConfig.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -17,7 +17,7 @@ export const hrefsForType = {
   [CTA_TYPE.NEW_TAB]: 'https://www.example.com',
   [CTA_TYPE.DOWNLOAD]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
   [CTA_TYPE.PDF]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
   [CTA_TYPE.BLOG]: 'https://www.example.com',
diff --git a/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts b/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts
index ef497162890..97160e08428 100644
--- a/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts
+++ b/packages/web-components/src/components/cta/__tests__/card-cta-footer.test.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { CTA_TYPE } from '../defs';
 import '../card-cta-footer';
 
@@ -21,23 +21,23 @@ const template = (props?) => {
     children,
   } = props ?? {};
   return html`
-    <dds-card-cta-footer
+    <c4d-card-cta-footer
       cta-type="${ifDefined(ctaType)}"
       video-duration="${ifDefined(videoDuration)}"
       .formatVideoCaption="${ifDefined(formatVideoCaption)}"
       .formatVideoDuration="${ifDefined(formatVideoDuration)}">
       ${children}
-    </dds-card-cta-footer>
+    </c4d-card-cta-footer>
   `;
 };
 
-describe('dds-card-cta-footer', function () {
+describe('c4d-card-cta-footer', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-card-cta-footer')
+        document.body.querySelector('c4d-card-cta-footer')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -55,7 +55,7 @@ describe('dds-card-cta-footer', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-card-cta-footer')
+        document.body.querySelector('c4d-card-cta-footer')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -76,8 +76,8 @@ describe('dds-card-cta-footer', function () {
       await Promise.resolve(); // Update cycle for rendering upon `slotchange` event
       expect(
         document.body
-          .querySelector('dds-card-cta-footer')!
-          .shadowRoot!.querySelector('.bx--card__cta__copy')!
+          .querySelector('c4d-card-cta-footer')!
+          .shadowRoot!.querySelector('.cds--card__cta__copy')!
           .textContent!.trim()
       ).toBe('');
     });
diff --git a/packages/web-components/src/components/cta/__tests__/card-cta.test.ts b/packages/web-components/src/components/cta/__tests__/card-cta.test.ts
index 06fded37710..39b2dc13097 100644
--- a/packages/web-components/src/components/cta/__tests__/card-cta.test.ts
+++ b/packages/web-components/src/components/cta/__tests__/card-cta.test.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { CTA_TYPE } from '../defs';
 import '../card-cta';
 import '../card-cta-footer';
@@ -24,7 +24,7 @@ const template = (props?) => {
     children,
   } = props ?? {};
   return html`
-    <dds-card-cta
+    <c4d-card-cta
       cta-type="${ifDefined(ctaType)}"
       video-duration="${ifDefined(videoDuration)}"
       video-name="${ifDefined(videoName)}"
@@ -32,16 +32,16 @@ const template = (props?) => {
       .formatVideoCaption="${ifDefined(formatVideoCaption)}"
       .formatVideoDuration="${ifDefined(formatVideoDuration)}">
       ${children}
-    </dds-card-cta>
+    </c4d-card-cta>
   `;
 };
 
-describe('dds-card-cta', function () {
+describe('c4d-card-cta', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-card-cta')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-card-cta')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -58,7 +58,7 @@ describe('dds-card-cta', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('dds-card-cta')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-card-cta')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -73,14 +73,14 @@ describe('dds-card-cta', function () {
           // Should yeild to `undefined` in `name` part given card footer doesn't render the video name
           formatVideoCaption: ({ name, duration }) => `${name}-${duration}`,
           formatVideoDuration: ({ duration }) => duration,
-          children: html` <dds-card-cta-footer></dds-card-cta-footer> `,
+          children: html` <c4d-card-cta-footer></c4d-card-cta-footer> `,
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-card-cta>`
-      await Promise.resolve(); // Update cycle for `<dds-card-cta-footer>` upon property forwarding
+      await Promise.resolve(); // Update cycle for `<c4d-card-cta>`
+      await Promise.resolve(); // Update cycle for `<c4d-card-cta-footer>` upon property forwarding
       expect(
-        document.body.querySelector('dds-card-cta-footer')
+        document.body.querySelector('c4d-card-cta-footer')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -100,8 +100,8 @@ describe('dds-card-cta', function () {
       await Promise.resolve(); // Update cycle for rendering upon `slotchange` event
       expect(
         document.body
-          .querySelector('dds-card-cta')!
-          .shadowRoot!.querySelector('.bx--card__copy')!
+          .querySelector('c4d-card-cta')!
+          .shadowRoot!.querySelector('.cds--card__copy')!
           .textContent!.trim()
       ).toBe('');
     });
@@ -112,7 +112,7 @@ describe('dds-card-cta', function () {
           ctaType: CTA_TYPE.VIDEO,
           videoName: 'video-name-foo',
           children: html`
-            <dds-image slot="image" alt="image-alt-foo"></dds-image>
+            <c4d-image slot="image" alt="image-alt-foo"></c4d-image>
           `,
         }),
         document.body
@@ -122,8 +122,8 @@ describe('dds-card-cta', function () {
       await Promise.resolve(); // Update cycle for rendering upon `slotchange` event
       expect(
         document.body
-          .querySelector('dds-card-cta')!
-          .shadowRoot!.querySelector('dds-image[alt="video-name-foo"]')
+          .querySelector('c4d-card-cta')!
+          .shadowRoot!.querySelector('c4d-image[alt="video-name-foo"]')
       ).toBeNull();
     });
   });
diff --git a/packages/web-components/src/components/cta/__tests__/feature-cta.test.ts b/packages/web-components/src/components/cta/__tests__/feature-cta.test.ts
index 267877b2d76..daaab5ab6f1 100644
--- a/packages/web-components/src/components/cta/__tests__/feature-cta.test.ts
+++ b/packages/web-components/src/components/cta/__tests__/feature-cta.test.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { CTA_TYPE } from '../defs';
 import '../feature-cta';
 import '../../card/card-heading';
@@ -25,25 +25,25 @@ const template = (props?) => {
     children,
   } = props ?? {};
   return html`
-    <dds-feature-cta
+    <c4d-feature-cta
       cta-type="${ifDefined(ctaType)}"
       video-duration="${ifDefined(videoDuration)}"
       video-name="${ifDefined(videoName)}"
       video-thumbnail-url="${ifDefined(videoThumbnailUrl)}"
       .formatVideoCaption="${ifDefined(formatVideoCaption)}"
       .formatVideoDuration="${ifDefined(formatVideoDuration)}">
-      <dds-card-heading>${heading}</dds-card-heading>
+      <c4d-card-heading>${heading}</c4d-card-heading>
       ${children}
-    </dds-feature-cta>
+    </c4d-feature-cta>
   `;
 };
 
-describe('dds-feature-cta', function () {
+describe('c4d-feature-cta', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-feature-cta')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-feature-cta')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -61,7 +61,7 @@ describe('dds-feature-cta', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('dds-feature-cta')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-feature-cta')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -83,8 +83,8 @@ describe('dds-feature-cta', function () {
       await Promise.resolve(); // Update cycle for rendering upon `slotchange` event
       expect(
         document.body
-          .querySelector('dds-feature-cta')!
-          .querySelector('dds-card-heading')!
+          .querySelector('c4d-feature-cta')!
+          .querySelector('c4d-card-heading')!
           .textContent!.trim()
       ).toBe('video-name-foo');
     });
@@ -95,7 +95,7 @@ describe('dds-feature-cta', function () {
           ctaType: CTA_TYPE.VIDEO,
           videoName: 'video-name-foo',
           children: html`
-            <dds-image slot="image" alt="image-alt-foo"></dds-image>
+            <c4d-image slot="image" alt="image-alt-foo"></c4d-image>
           `,
         }),
         document.body
@@ -105,14 +105,14 @@ describe('dds-feature-cta', function () {
       await Promise.resolve(); // Update cycle for rendering upon `slotchange` event
       expect(
         document.body
-          .querySelector('dds-feature-cta')!
-          .shadowRoot!.querySelector('dds-image[alt="video-name-foo"]')
+          .querySelector('c4d-feature-cta')!
+          .shadowRoot!.querySelector('c4d-image[alt="video-name-foo"]')
           ?.getBoundingClientRect().height
       ).toBe(0);
       expect(
         document.body
-          .querySelector('dds-feature-cta')!
-          .querySelector('dds-image[alt="image-alt-foo"]')
+          .querySelector('c4d-feature-cta')!
+          .querySelector('c4d-image[alt="image-alt-foo"]')
           ?.getBoundingClientRect().height
       ).not.toEqual(0);
     });
diff --git a/packages/web-components/src/components/cta/__tests__/text-cta.test.ts b/packages/web-components/src/components/cta/__tests__/text-cta.test.ts
index e6a046e1dfb..fb32b8450aa 100644
--- a/packages/web-components/src/components/cta/__tests__/text-cta.test.ts
+++ b/packages/web-components/src/components/cta/__tests__/text-cta.test.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { CTA_TYPE } from '../defs';
 import '../text-cta';
 
@@ -24,7 +24,7 @@ const template = (props?) => {
     children,
   } = props ?? {};
   return html`
-    <dds-text-cta
+    <c4d-text-cta
       cta-type="${ifDefined(ctaType)}"
       target="${ifDefined(target)}"
       video-duration="${ifDefined(videoDuration)}"
@@ -33,16 +33,16 @@ const template = (props?) => {
       .formatVideoCaption="${ifDefined(formatVideoCaption)}"
       .formatVideoDuration="${ifDefined(formatVideoDuration)}">
       ${children}
-    </dds-text-cta>
+    </c4d-text-cta>
   `;
 };
 
-describe('dds-text-cta', function () {
+describe('c4d-text-cta', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-text-cta')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-text-cta')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -60,7 +60,7 @@ describe('dds-text-cta', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('dds-text-cta')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-text-cta')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/cta/__tests__/video-cta-composite.test.ts b/packages/web-components/src/components/cta/__tests__/video-cta-composite.test.ts
index 2b36e7d690b..32492c9577e 100644
--- a/packages/web-components/src/components/cta/__tests__/video-cta-composite.test.ts
+++ b/packages/web-components/src/components/cta/__tests__/video-cta-composite.test.ts
@@ -1,23 +1,23 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer.js';
-import DDSExpressiveModal from '../../expressive-modal/expressive-modal';
-import DDSLightboxVideoPlayerComposite from '../../lightbox-media-viewer/lightbox-video-player-composite';
+import C4DExpressiveModal from '../../expressive-modal/expressive-modal';
+import C4DLightboxVideoPlayerComposite from '../../lightbox-media-viewer/lightbox-video-player-composite';
 import '../video-cta-composite';
 
 const template = () => html`
-  <dds-video-cta-composite></dds-video-cta-composite>
+  <c4d-video-cta-composite></c4d-video-cta-composite>
 `;
 
-describe('dds-video-cta-composite', function () {
+describe('c4d-video-cta-composite', function () {
   describe('Handling video type', function () {
     beforeEach(function () {
       spyOn(KalturaPlayerAPI, 'api').and.returnValue(Promise.resolve({}));
@@ -30,7 +30,7 @@ describe('dds-video-cta-composite', function () {
       render(template(), document.body);
       await Promise.resolve();
       const { modalRenderRoot } = document.querySelector(
-        'dds-video-cta-composite'
+        'c4d-video-cta-composite'
       ) as any;
       expect(modalRenderRoot).toMatchSnapshot();
     });
@@ -39,44 +39,44 @@ describe('dds-video-cta-composite', function () {
       render(template(), document.body);
       await Promise.resolve();
       const videoCTAComposite = document.querySelector(
-        'dds-video-cta-composite'
+        'c4d-video-cta-composite'
       );
       videoCTAComposite!.dispatchEvent(
-        new CustomEvent('dds-cta-run-action', {
-          detail: { ctaType: 'video', href: '1_9h94wo6b' },
+        new CustomEvent('c4d-cta-run-action', {
+          detail: { ctaType: 'video', href: '0_ibuqxqbe' },
         })
       );
-      await Promise.resolve(); // Update cycle for `<dds-video-cta-composite>`
-      await Promise.resolve(); // Update cycle for `<dds-lightbox-video-player-composite>`
+      await Promise.resolve(); // Update cycle for `<c4d-video-cta-composite>`
+      await Promise.resolve(); // Update cycle for `<c4d-lightbox-video-player-composite>`
       const { modalRenderRoot } = document.querySelector(
-        'dds-video-cta-composite'
+        'c4d-video-cta-composite'
       ) as any;
       const lightboxVideoPlayerComposite = modalRenderRoot!.querySelector(
-        'dds-lightbox-video-player-composite'
-      ) as DDSLightboxVideoPlayerComposite;
+        'c4d-lightbox-video-player-composite'
+      ) as C4DLightboxVideoPlayerComposite;
       const lightboxRenderRoot =
         lightboxVideoPlayerComposite.modalRenderRoot as Element;
       expect(
         (
           lightboxRenderRoot.querySelector(
-            'dds-expressive-modal'
-          ) as DDSExpressiveModal
+            'c4d-expressive-modal'
+          ) as C4DExpressiveModal
         ).open
       ).toBe(true);
       const { videoId: videoIdInVideoPlayerCompositeOpen } =
         lightboxVideoPlayerComposite;
-      expect(videoIdInVideoPlayerCompositeOpen).toBe('1_9h94wo6b');
+      expect(videoIdInVideoPlayerCompositeOpen).toBe('0_ibuqxqbe');
       (
         lightboxRenderRoot.querySelector(
-          'dds-expressive-modal-close-button'
+          'c4d-expressive-modal-close-button'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       expect(
         (
           lightboxRenderRoot.querySelector(
-            'dds-expressive-modal'
-          ) as DDSExpressiveModal
+            'c4d-expressive-modal'
+          ) as C4DExpressiveModal
         ).open
       ).toBe(false);
       const { videoId: videoIdInVideoPlayerCompositeClosed } =
diff --git a/packages/web-components/src/components/cta/button-cta.ts b/packages/web-components/src/components/cta/button-cta.ts
index 3c0b6b77209..047e4017cdc 100644
--- a/packages/web-components/src/components/cta/button-cta.ts
+++ b/packages/web-components/src/components/cta/button-cta.ts
@@ -6,15 +6,17 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @ts-nocheck
 
-import { html, property, query } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSButtonGroupItem from '../button-group/button-group-item';
-import CTAMixin from '../../component-mixins/cta/cta';
+import C4DButtonGroupItem from '../button-group/button-group-item';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
@@ -22,15 +24,15 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CTA_TYPE };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Button CTA.
  *
- * @element dds-button-cta
+ * @element c4d-button-cta
  */
-@customElement(`${ddsPrefix}-button-cta`)
-class DDSButtonCTA extends VideoCTAMixin(CTAMixin(DDSButtonGroupItem)) {
+@customElement(`${c4dPrefix}-button-cta`)
+class C4DButtonCTA extends VideoCTAMixin(CTAMixin(C4DButtonGroupItem)) {
   /**
    * The button that may work as a link.
    *
@@ -115,11 +117,16 @@ class DDSButtonCTA extends VideoCTAMixin(CTAMixin(DDSButtonGroupItem)) {
   videoThumbnailUrl?: never;
 
   static get stableSelector() {
-    return `${ddsPrefix}--button-cta`;
+    return `${c4dPrefix}--button-cta`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  `The c4d-buton-cta component has been deprecated. All its features have been absorbed into
+  the base c4d-button component. See migration guide for more information.`
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSButtonCTA;
+export default C4DButtonCTA;
diff --git a/packages/web-components/src/components/cta/card-cta-footer.ts b/packages/web-components/src/components/cta/card-cta-footer.ts
index ce1216eb928..fa61670086d 100644
--- a/packages/web-components/src/components/cta/card-cta-footer.ts
+++ b/packages/web-components/src/components/cta/card-cta-footer.ts
@@ -6,31 +6,31 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @ts-nocheck
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSCardFooter from '../card/card-footer';
-import CTAMixin from '../../component-mixins/cta/cta';
+import C4DCardFooter from '../card/card-footer';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card CTA footer.
  *
- * @element dds-card-cta-footer
+ * @element c4d-card-cta-footer
  */
-@customElement(`${ddsPrefix}-card-cta-footer`)
-class DDSCardCTAFooter extends VideoCTAMixin(CTAMixin(DDSCardFooter)) {
+@customElement(`${c4dPrefix}-card-cta-footer`)
+class C4DCardCTAFooter extends VideoCTAMixin(CTAMixin(C4DCardFooter)) {
   protected _renderContent() {
     const { ctaType, _hasCopy: hasCopy } = this;
     if (ctaType !== CTA_TYPE.VIDEO) {
@@ -93,12 +93,6 @@ class DDSCardCTAFooter extends VideoCTAMixin(CTAMixin(DDSCardFooter)) {
    */
   videoName?: string;
 
-  /**
-   * This property is set to "link-list" when parent is of link-list-card-cta.
-   */
-  @property({ reflect: true })
-  mode?: string;
-
   /**
    * The video custom description.
    */
@@ -106,18 +100,15 @@ class DDSCardCTAFooter extends VideoCTAMixin(CTAMixin(DDSCardFooter)) {
   videoDescription?: string;
 
   connectedCallback() {
-    if (this.parentElement?.matches(`${ddsPrefix}-link-list-item-card-cta`)) {
-      this.mode = 'link-list';
-    }
     super.connectedCallback();
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-cta-footer`;
+    return `${c4dPrefix}--card-cta-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardCTAFooter;
+export default C4DCardCTAFooter;
diff --git a/packages/web-components/src/components/cta/card-cta-image.ts b/packages/web-components/src/components/cta/card-cta-image.ts
index a94d532f556..00076c9873c 100644
--- a/packages/web-components/src/components/cta/card-cta-image.ts
+++ b/packages/web-components/src/components/cta/card-cta-image.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import DDSImage from '../image/image';
+import { css } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import C4DImage from '../image/image';
 import styles from './cta.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card CTA Image.
  *
- * @element dds-card-cta-image
+ * @element c4d-card-cta-image
  */
-@customElement(`${ddsPrefix}-card-cta-image`)
-class DDSCardCTAImage extends DDSImage {
+@customElement(`${c4dPrefix}-card-cta-image`)
+class C4DCardCTAImage extends C4DImage {
   // `styles` here is a `CSSResult` generated by custom WebPack loader
   static get styles() {
     return css`
@@ -31,4 +31,4 @@ class DDSCardCTAImage extends DDSImage {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardCTAImage;
+export default C4DCardCTAImage;
diff --git a/packages/web-components/src/components/cta/card-cta.ts b/packages/web-components/src/components/cta/card-cta.ts
index e306d28f6cb..62792dc24ea 100644
--- a/packages/web-components/src/components/cta/card-cta.ts
+++ b/packages/web-components/src/components/cta/card-cta.ts
@@ -6,23 +6,24 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @ts-nocheck
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer';
-import DDSCard from '../card/card';
+import C4DCard from '../card/card';
 import '../card/card-heading';
 import './card-cta-image';
-import CTAMixin from '../../component-mixins/cta/cta';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
-import DDSCardCTAFooter from './card-cta-footer';
+import C4DCardCTAFooter from './card-cta-footer';
 import './card-cta-footer';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
@@ -30,16 +31,15 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CTA_TYPE };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card CTA.
  *
- * @element dds-card-cta
+ * @element c4d-card-cta
  */
-@customElement(`${ddsPrefix}-card-cta`)
-class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
+@customElement(`${c4dPrefix}-card-cta`)
+class C4DCardCTA extends VideoCTAMixin(CTAMixin(C4DCard)) {
   protected _renderHeading() {
     const {
       ctaType,
@@ -53,18 +53,17 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
 
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof DDSCardCTA).eventVideoTitleUpdated,
+        (this.constructor as typeof C4DCardCTA).eventVideoTitleUpdated,
         {
           bubbles: true,
           composed: true,
         }
       )
     );
-
-    const heading = this.querySelector('dds-card-heading')
-      ? html``
-      : html` <dds-card-heading>${caption}</dds-card-heading> `;
-    return html` <slot name="heading"></slot>${heading} `;
+    return html`
+      <slot name="heading"></slot
+      ><c4d-card-heading>${caption}</c4d-card-heading>
+    `;
   }
 
   protected _renderImage() {
@@ -80,12 +79,12 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
       hasImage || ctaType !== CTA_TYPE.VIDEO || noPoster
         ? undefined
         : html`
-            <dds-card-cta-image
+            <c4d-card-cta-image
               class="${prefix}--card__video-thumbnail"
-              alt="${ifNonNull(videoName)}"
-              default-src="${ifNonNull(thumbnail || videoThumbnailUrl)}">
+              alt="${ifDefined(videoName)}"
+              default-src="${ifDefined(thumbnail || videoThumbnailUrl)}">
               ${PlayVideo({ slot: 'icon' })}
-            </dds-card-cta-image>
+            </c4d-card-cta-image>
           `;
     return html`
       <slot name="image" @slotchange="${this._handleSlotChange}"></slot>${image}
@@ -151,7 +150,7 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
   updated(changedProperties) {
     super.updated(changedProperties);
     const footer = this.querySelector(
-      (this.constructor as typeof DDSCardCTA).selectorFooter
+      (this.constructor as typeof C4DCardCTA).selectorFooter
     );
     if (
       changedProperties.has('ctaType') ||
@@ -169,7 +168,7 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
         formatVideoDuration: formatVideoDurationInEffect,
       } = this;
       const headingText = this.querySelector(
-        `${ddsPrefix}-card-heading`
+        `${c4dPrefix}-card-heading`
       )?.textContent;
       const copyText = this.textContent;
       if (footer) {
@@ -182,18 +181,18 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
           )}`;
         }
         (
-          footer as DDSCardCTAFooter
+          footer as C4DCardCTAFooter
         ).altAriaLabel = `${ariaTitle}${ariaDuration}`;
-        (footer as DDSCardCTAFooter).ctaType = ctaType;
-        (footer as DDSCardCTAFooter).videoDuration = videoDuration;
-        (footer as DDSCardCTAFooter).videoName = videoName;
-        (footer as DDSCardCTAFooter).videoDescription = videoDescription;
+        (footer as C4DCardCTAFooter).ctaType = ctaType;
+        (footer as C4DCardCTAFooter).videoDuration = videoDuration;
+        (footer as C4DCardCTAFooter).videoName = videoName;
+        (footer as C4DCardCTAFooter).videoDescription = videoDescription;
         if (formatVideoCaptionInEffect) {
-          (footer as DDSCardCTAFooter).formatVideoCaption =
+          (footer as C4DCardCTAFooter).formatVideoCaption =
             formatVideoCaptionInEffect;
         }
         if (formatVideoDurationInEffect) {
-          (footer as DDSCardCTAFooter).formatVideoDuration =
+          (footer as C4DCardCTAFooter).formatVideoDuration =
             formatVideoDurationInEffect;
         }
       }
@@ -201,25 +200,30 @@ class DDSCardCTA extends VideoCTAMixin(CTAMixin(DDSCard)) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-cta`;
+    return `${c4dPrefix}--card-cta`;
   }
 
   /**
    * The name of the custom event fired when the video title is updated
    */
   static get eventVideoTitleUpdated() {
-    return `${ddsPrefix}-card-cta-video-title-updated`;
+    return `${c4dPrefix}-card-cta-video-title-updated`;
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-card-cta-footer`;
+    return `${c4dPrefix}-card-cta-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  `The c4d-card-cta component has been deprecated. All its features have been absorbed into
+  the base c4d-card component. See migration guide for more information.`
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardCTA;
+export default C4DCardCTA;
diff --git a/packages/web-components/src/components/cta/card-link-cta.ts b/packages/web-components/src/components/cta/card-link-cta.ts
index 2bed35b0e63..d18c54eeef7 100644
--- a/packages/web-components/src/components/cta/card-link-cta.ts
+++ b/packages/web-components/src/components/cta/card-link-cta.ts
@@ -6,18 +6,20 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @ts-nocheck
 
-import { html, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSCardLink from '../card-link/card-link';
+import C4DCardLink from '../card-link/card-link';
 import '../card-link/card-link-heading';
-import CTAMixin from '../../component-mixins/cta/cta';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
-import DDSCardCTAFooter from './card-cta-footer';
+import C4DCardCTAFooter from './card-cta-footer';
 import './card-cta-footer';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
@@ -25,15 +27,15 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CTA_TYPE };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Card CTA.
  *
- * @element dds-card-cta
+ * @element c4d-card-cta
  */
-@customElement(`${ddsPrefix}-card-link-cta`)
-class DDSCardLinkCTA extends VideoCTAMixin(CTAMixin(DDSCardLink)) {
+@customElement(`${c4dPrefix}-card-link-cta`)
+class C4DCardLinkCTA extends VideoCTAMixin(CTAMixin(C4DCardLink)) {
   protected _renderHeading() {
     const {
       ctaType,
@@ -46,7 +48,7 @@ class DDSCardLinkCTA extends VideoCTAMixin(CTAMixin(DDSCardLink)) {
     const caption = formatVideoCaptionInEffect({ name: videoName });
     return html`
       <slot name="heading"></slot
-      ><dds-card-link-heading>${caption}</dds-card-link-heading>
+      ><c4d-card-link-heading>${caption}</c4d-card-link-heading>
     `;
   }
 
@@ -97,7 +99,7 @@ class DDSCardLinkCTA extends VideoCTAMixin(CTAMixin(DDSCardLink)) {
   updated(changedProperties) {
     super.updated(changedProperties);
     const footer = this.querySelector(
-      (this.constructor as typeof DDSCardLinkCTA).selectorFooter
+      (this.constructor as typeof C4DCardLinkCTA).selectorFooter
     );
     if (
       changedProperties.has('ctaType') ||
@@ -115,22 +117,22 @@ class DDSCardLinkCTA extends VideoCTAMixin(CTAMixin(DDSCardLink)) {
         formatVideoDuration: formatVideoDurationInEffect,
       } = this;
       const headingText = this.querySelector(
-        `${ddsPrefix}-card-link-heading`
+        `${c4dPrefix}-card-link-heading`
       )?.textContent;
       const copyText = this.textContent;
       if (footer) {
-        (footer as DDSCardCTAFooter).altAriaLabel =
+        (footer as C4DCardCTAFooter).altAriaLabel =
           videoName || headingText || copyText;
-        (footer as DDSCardCTAFooter).ctaType = ctaType;
-        (footer as DDSCardCTAFooter).videoDuration = videoDuration;
-        (footer as DDSCardCTAFooter).videoName = videoName;
-        (footer as DDSCardCTAFooter).videoDescription = videoDescription;
+        (footer as C4DCardCTAFooter).ctaType = ctaType;
+        (footer as C4DCardCTAFooter).videoDuration = videoDuration;
+        (footer as C4DCardCTAFooter).videoName = videoName;
+        (footer as C4DCardCTAFooter).videoDescription = videoDescription;
         if (formatVideoCaptionInEffect) {
-          (footer as DDSCardCTAFooter).formatVideoCaption =
+          (footer as C4DCardCTAFooter).formatVideoCaption =
             formatVideoCaptionInEffect;
         }
         if (formatVideoDurationInEffect) {
-          (footer as DDSCardCTAFooter).formatVideoDuration =
+          (footer as C4DCardCTAFooter).formatVideoDuration =
             formatVideoDurationInEffect;
         }
       }
@@ -138,18 +140,18 @@ class DDSCardLinkCTA extends VideoCTAMixin(CTAMixin(DDSCardLink)) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--card-link-cta`;
+    return `${c4dPrefix}--card-link-cta`;
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-card-cta-footer`;
+    return `${c4dPrefix}-card-cta-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCardLinkCTA;
+export default C4DCardLinkCTA;
diff --git a/packages/web-components/src/components/cta/cta.scss b/packages/web-components/src/components/cta/cta.scss
index 15689b1f3e8..a117bf096bb 100644
--- a/packages/web-components/src/components/cta/cta.scss
+++ b/packages/web-components/src/components/cta/cta.scss
@@ -5,22 +5,23 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../button-group/button-group';
-@import '../link-with-icon/link-with-icon';
-@import '../feature-card/feature-card'; /* Covers regular card style, too */
-@import '../card-link/card-link.scss';
+@use '@carbon/styles/scss/spacing' as *;
+@use '../button-group/button-group';
+@use '../link-with-icon/link-with-icon';
+@use '../feature-card/feature-card'; /* Covers regular card style, too */
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-.#{$dds-prefix}-ce--cta__icon {
+.#{$c4d-prefix}-ce--cta__icon {
   flex-shrink: 0;
 }
 
-:host(#{$dds-prefix}-button-cta) .#{$dds-prefix}-ce--cta__icon {
+:host(#{$c4d-prefix}-button-cta) .#{$c4d-prefix}-ce--cta__icon {
   position: absolute;
-  right: 1rem;
+  right: $spacing-05;
   top: 50%;
   transform: translateY(-50%);
 }
 
-:host(#{$dds-prefix}-cta) {
+:host(#{$c4d-prefix}-cta) {
   display: block;
 }
diff --git a/packages/web-components/src/components/cta/cta.ts b/packages/web-components/src/components/cta/cta.ts
index 970bbef96ea..a2aa99ea28b 100644
--- a/packages/web-components/src/components/cta/cta.ts
+++ b/packages/web-components/src/components/cta/cta.ts
@@ -7,8 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, html, LitElement } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import styles from './cta.scss';
@@ -20,15 +21,15 @@ import {
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * CTA component
  *
- * @element dds-cta
+ * @element c4d-cta
  */
-@customElement(`${ddsPrefix}-cta`)
-class DDSCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
+@customElement(`${c4dPrefix}-cta`)
+class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   @property({ attribute: 'cta-style' })
   ctaStyle = 'text';
 
@@ -85,7 +86,7 @@ class DDSCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
         });
 
         const ctaComponent = this.shadowRoot!.querySelector(
-          `dds-${this.ctaStyle}-cta`
+          `c4d-${this.ctaStyle}-cta`
         );
         const spanElement = ctaComponent?.shadowRoot!.querySelector('span');
 
@@ -94,8 +95,8 @@ class DDSCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
           : (ctaComponent!.textContent = heading);
       } else {
         const footer = this.shadowRoot
-          ?.querySelector(`${ddsPrefix}-${this.ctaStyle}-cta`)
-          ?.querySelector(`${ddsPrefix}-${this.ctaStyle}-cta-footer`);
+          ?.querySelector(`${c4dPrefix}-${this.ctaStyle}-cta`)
+          ?.querySelector(`${c4dPrefix}-${this.ctaStyle}-cta-footer`);
         footer?.textContent ? null : (footer!.textContent = this.videoDuration);
       }
     }
@@ -110,7 +111,7 @@ class DDSCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleButtonGroupupdate = async (event: FocusEvent) => {
     if (event) {
-      const button = this.shadowRoot?.querySelector(`${ddsPrefix}-button-cta`)!;
+      const button = this.shadowRoot?.querySelector(`${c4dPrefix}-button-cta`)!;
       if (this.ctaStyle === 'button' && button && this.getAttribute('kind')) {
         button.setAttribute('kind', this?.getAttribute('kind')!);
       }
@@ -120,19 +121,19 @@ class DDSCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   render() {
     return html`
       ${this.ctaStyle === 'feature'
-        ? html` <dds-feature-cta></dds-feature-cta> `
+        ? html` <c4d-feature-cta></c4d-feature-cta> `
         : ``}
       ${this.ctaStyle === 'card'
-        ? html` <dds-card-cta><slot></slot></dds-card-cta> `
+        ? html` <c4d-card-cta><slot></slot></c4d-card-cta> `
         : ``}
       ${this.ctaStyle === 'card-link'
-        ? html` <dds-card-link-cta><slot></slot></dds-card-link-cta> `
+        ? html` <c4d-card-link-cta><slot></slot></c4d-card-link-cta> `
         : ``}
       ${this.ctaStyle === 'text'
-        ? html` <dds-text-cta><slot></slot></dds-text-cta> `
+        ? html` <c4d-text-cta><slot></slot></c4d-text-cta> `
         : ``}
       ${this.ctaStyle === 'button'
-        ? html` <dds-button-cta><slot></slot></dds-button-cta> `
+        ? html` <c4d-button-cta><slot></slot></c4d-button-cta> `
         : ``}
     `;
   }
@@ -141,22 +142,27 @@ class DDSCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
    * The name of the custom event fired when there is a user gesture to run the action.
    */
   static get eventRequestAdditionalVideoData() {
-    return `${ddsPrefix}-cta-request-additional-video-data`;
+    return `${c4dPrefix}-cta-request-additional-video-data`;
   }
 
   /**
    * The name of the custom event fired when there is a user gesture to run the action.
    */
   static get eventUpdateButtonGroup() {
-    return `${ddsPrefix}-button-group-update`;
+    return `${c4dPrefix}-button-group-update`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-cta`;
+    return `${c4dPrefix}-cta`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  `The c4d-cta component has been deprecated in favor of the c4d-card, c4d-feature-card, c4d-link-with-icon,
+  and c4d-button-group. See migration guide for more information.`
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSCTAHead;
+export default C4DCTAHead;
diff --git a/packages/web-components/src/components/cta/defs.ts b/packages/web-components/src/components/cta/defs.ts
index 1a44455ff09..622d228db27 100644
--- a/packages/web-components/src/components/cta/defs.ts
+++ b/packages/web-components/src/components/cta/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -12,27 +12,27 @@
  */
 export enum CTA_STYLE {
   /**
-   * Text CTA that uses `<dds-link-with-icon>`.
+   * Text CTA that uses `<c4d-link-with-icon>`.
    */
   TEXT = 'text',
 
   /**
-   * Button CTA that uses `<dds-button>`.
+   * Button CTA that uses `<c4d-button>`.
    */
   BUTTON = 'button',
 
   /**
-   * Card CTA that uses `<dds-card>`.
+   * Card CTA that uses `<c4d-card>`.
    */
   CARD = 'card',
 
   /**
-   * Card CTA that uses `<dds-card-link>`.
+   * Card CTA that uses `<c4d-card-link>`.
    */
   CARDLINK = 'card-link',
 
   /**
-   * Feature CTA that uses `<dds-feature-card>`.
+   * Feature CTA that uses `<c4d-feature-card>`.
    */
   FEATURE = 'feature',
 }
diff --git a/packages/web-components/src/components/cta/feature-cta-footer.ts b/packages/web-components/src/components/cta/feature-cta-footer.ts
index 02f0139423b..b1906367883 100644
--- a/packages/web-components/src/components/cta/feature-cta-footer.ts
+++ b/packages/web-components/src/components/cta/feature-cta-footer.ts
@@ -6,30 +6,31 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @ts-nocheck
 
-import { property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSFeatureCardFooter from '../feature-card/feature-card-footer';
-import CTAMixin from '../../component-mixins/cta/cta';
+import C4DFeatureCardFooter from '../feature-card/feature-card-footer';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Feature CTA footer.
  *
- * @element dds-feature-cta-footer
+ * @element c4d-feature-cta-footer
  */
-@customElement(`${ddsPrefix}-feature-cta-footer`)
-class DDSFeatureCTAFooter extends VideoCTAMixin(
-  CTAMixin(DDSFeatureCardFooter)
+@customElement(`${c4dPrefix}-feature-cta-footer`)
+class C4DFeatureCTAFooter extends VideoCTAMixin(
+  CTAMixin(C4DFeatureCardFooter)
 ) {
   /**
    * The formatter for the video caption, composed with the video name and the video duration.
@@ -79,4 +80,4 @@ class DDSFeatureCTAFooter extends VideoCTAMixin(
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFeatureCTAFooter;
+export default C4DFeatureCTAFooter;
diff --git a/packages/web-components/src/components/cta/feature-cta.ts b/packages/web-components/src/components/cta/feature-cta.ts
index e925fd83715..573f0ccb375 100644
--- a/packages/web-components/src/components/cta/feature-cta.ts
+++ b/packages/web-components/src/components/cta/feature-cta.ts
@@ -6,20 +6,21 @@
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
+// @ts-nocheck
 
-import { property, html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSFeatureCard from '../feature-card/feature-card';
-import CTAMixin from '../../component-mixins/cta/cta';
+import C4DFeatureCard from '../feature-card/feature-card';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
-import DDSFeatureCTAFooter from './feature-cta-footer';
+import C4DFeatureCTAFooter from './feature-cta-footer';
 import './feature-cta-footer';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
@@ -31,16 +32,15 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CTA_TYPE };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Feature CTA.
  *
- * @element dds-feature-cta
+ * @element c4d-feature-cta
  */
-@customElement(`${ddsPrefix}-feature-cta`)
-class DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {
+@customElement(`${c4dPrefix}-feature-cta`)
+class C4DFeatureCTA extends VideoCTAMixin(CTAMixin(C4DFeatureCard)) {
   protected _renderCopy() {
     const {
       ctaType,
@@ -74,12 +74,12 @@ class DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {
       ctaType !== CTA_TYPE.VIDEO || noPoster
         ? undefined
         : html`
-            <dds-image
-              alt="${ifNonNull(videoName)}"
-              default-src="${ifNonNull(thumbnail || videoThumbnailUrl)}"
+            <c4d-image
+              alt="${ifDefined(videoName)}"
+              default-src="${ifDefined(thumbnail || videoThumbnailUrl)}"
               slot="image">
               ${PlayVideo({ slot: 'icon' })}
-            </dds-image>
+            </c4d-image>
           `;
     return noPoster
       ? undefined
@@ -153,7 +153,7 @@ class DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {
 
   updated(changedProperties) {
     super.updated(changedProperties);
-    const { selectorFooter } = this.constructor as typeof DDSFeatureCTA;
+    const { selectorFooter } = this.constructor as typeof C4DFeatureCTA;
     if (
       changedProperties.has('ctaType') ||
       changedProperties.has('videoName') ||
@@ -162,20 +162,21 @@ class DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {
       const { ctaType, videoName, videoDescription } = this;
       const footer = this.querySelector(selectorFooter);
       if (footer) {
-        (footer as DDSFeatureCTAFooter).ctaType = ctaType;
-        (footer as DDSFeatureCTAFooter).altAriaLabel =
+        (footer as C4DFeatureCTAFooter).ctaType = ctaType;
+        (footer as C4DFeatureCTAFooter).altAriaLabel =
           this.videoName || this.captionHeading;
-        (footer as DDSFeatureCTAFooter).videoName = videoName;
-        (footer as DDSFeatureCTAFooter).videoDescription = videoDescription;
+        (footer as C4DFeatureCTAFooter).videoName = videoName;
+        (footer as C4DFeatureCTAFooter).videoDescription = videoDescription;
       }
     }
+    if (changedProperties.has('captionHeading')) {
+      const heading = this.querySelector(
+        (this.constructor as typeof C4DFeatureCTA).selectorHeading
+      ) as HTMLElement;
 
-    const heading = this.querySelector(
-      (this.constructor as typeof DDSFeatureCTA).selectorHeading
-    ) as HTMLElement;
-
-    if (changedProperties.has('captionHeading') && heading) {
-      heading!.innerText = this.captionHeading;
+      if (heading) {
+        heading!.innerText = this.captionHeading;
+      }
     }
   }
 
@@ -183,22 +184,27 @@ class DDSFeatureCTA extends VideoCTAMixin(CTAMixin(DDSFeatureCard)) {
    * A selector that will return the child heading.
    */
   static get selectorHeading() {
-    return `${ddsPrefix}-card-heading`;
+    return `${c4dPrefix}-card-heading`;
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-feature-cta-footer`;
+    return `${c4dPrefix}-feature-cta-footer`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--feature-cta`;
+    return `${c4dPrefix}--feature-cta`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  `The c4d-feature-cta component has been deprecated. All its features have been absorbed into
+  the base c4d-feature-card component. See migration guide for more information.`
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFeatureCTA;
+export default C4DFeatureCTA;
diff --git a/packages/web-components/src/components/cta/index.ts b/packages/web-components/src/components/cta/index.ts
index 4a4cbbe7c5d..89c4eb8c084 100644
--- a/packages/web-components/src/components/cta/index.ts
+++ b/packages/web-components/src/components/cta/index.ts
@@ -12,6 +12,5 @@ import './card-cta';
 import './card-link-cta';
 import './feature-cta';
 import './text-cta';
-import './link-list-item-card-cta';
 import './link-list-item-cta';
 import './video-cta-container';
diff --git a/packages/web-components/src/components/cta/link-list-item-card-cta.ts b/packages/web-components/src/components/cta/link-list-item-card-cta.ts
deleted file mode 100644
index 28ca5090ec7..00000000000
--- a/packages/web-components/src/components/cta/link-list-item-card-cta.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSCardCTA from './card-cta';
-import styles from '../link-list/link-list.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Link list item card CTA.
- *
- * @element dds-link-list-item-card-cta
- */
-@customElement(`${ddsPrefix}-link-list-item-card-cta`)
-class DDSLinkListItemCardCTA extends DDSCardCTA {
-  protected _renderImage() {
-    // Link list doesn't show video thumbnail in card
-    return html`
-      <slot name="image" @slotchange="${this._handleSlotChange}"></slot>
-    `;
-  }
-
-  connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'listitem');
-    }
-    super.connectedCallback();
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--link-list-item-card-cta`;
-  }
-
-  // `styles` here is a `CSSResult` generated by custom WebPack loader
-  static get styles() {
-    return css`
-      ${super.styles}${styles}
-    `;
-  }
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkListItemCardCTA;
diff --git a/packages/web-components/src/components/cta/link-list-item-cta.ts b/packages/web-components/src/components/cta/link-list-item-cta.ts
index 2ce2bc2cd44..d4681e89799 100644
--- a/packages/web-components/src/components/cta/link-list-item-cta.ts
+++ b/packages/web-components/src/components/cta/link-list-item-cta.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSTextCTA from './text-cta';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DTextCTA from './text-cta';
 import styles from '../link-list/link-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Link list item CTA.
  *
- * @element dds-link-list-item-cta
+ * @element c4d-link-list-item-cta
  */
-@customElement(`${ddsPrefix}-link-list-item-cta`)
-class DDSLinkListItemCTA extends DDSTextCTA {
+@customElement(`${c4dPrefix}-link-list-item-cta`)
+class C4DLinkListItemCTA extends C4DTextCTA {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'listitem');
@@ -30,7 +30,7 @@ class DDSLinkListItemCTA extends DDSTextCTA {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--link-list-item-cta`;
+    return `${c4dPrefix}--link-list-item-cta`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -42,4 +42,4 @@ class DDSLinkListItemCTA extends DDSTextCTA {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkListItemCTA;
+export default C4DLinkListItemCTA;
diff --git a/packages/web-components/src/components/cta/text-cta.ts b/packages/web-components/src/components/cta/text-cta.ts
index 27b8f2a8aab..47a8a008f7b 100644
--- a/packages/web-components/src/components/cta/text-cta.ts
+++ b/packages/web-components/src/components/cta/text-cta.ts
@@ -7,14 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSLinkWithIcon from '../link-with-icon/link-with-icon';
-import CTAMixin from '../../component-mixins/cta/cta';
+import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
+import CTAMixin from '../../component-mixins/cta/cta-v1';
 import VideoCTAMixin from '../../component-mixins/cta/video';
 import { CTA_TYPE } from './defs';
 import styles from './cta.scss';
@@ -22,15 +23,16 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { CTA_TYPE };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Text CTA.
  *
- * @element dds-text-cta
+ * @element c4d-text-cta
  */
-@customElement(`${ddsPrefix}-text-cta`)
-class DDSTextCTA extends VideoCTAMixin(CTAMixin(DDSLinkWithIcon)) {
+@customElement(`${c4dPrefix}-text-cta`)
+// @ts-ignore
+class C4DTextCTA extends VideoCTAMixin(CTAMixin(C4DLinkWithIcon)) {
   /**
    * `true` if there is a non-empty default slot content.
    */
@@ -122,11 +124,16 @@ class DDSTextCTA extends VideoCTAMixin(CTAMixin(DDSLinkWithIcon)) {
   videoThumbnailUrl?: never;
 
   static get stableSelector() {
-    return `${ddsPrefix}--text-cta`;
+    return `${c4dPrefix}--text-cta`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  `The c4d-feature-cta component has been deprecated. All its features have been absorbed into
+  the base c4d-feature-card component. See migration guide for more information.`
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTextCTA;
+export default C4DTextCTA;
diff --git a/packages/web-components/src/components/cta/video-cta-composite.scss b/packages/web-components/src/components/cta/video-cta-composite.scss
index d5114ccbbe8..1f25fd95008 100644
--- a/packages/web-components/src/components/cta/video-cta-composite.scss
+++ b/packages/web-components/src/components/cta/video-cta-composite.scss
@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-video-cta-composite),
-:host(#{$dds-prefix}-video-cta-container) {
+:host(#{$c4d-prefix}-video-cta-composite),
+:host(#{$c4d-prefix}-video-cta-container) {
   display: block;
 }
diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts
index 82c40f0d78d..95f33aa799e 100644
--- a/packages/web-components/src/components/cta/video-cta-composite.ts
+++ b/packages/web-components/src/components/cta/video-cta-composite.ts
@@ -7,32 +7,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, LitElement } from 'lit-element';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import on from '../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import ModalRenderMixin from '../../globals/mixins/modal-render';
 import { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';
 import Handle from '../../globals/internal/handle';
-import DDSLightboxVideoPlayerComposite from '../lightbox-media-viewer/lightbox-video-player-composite';
+import C4DLightboxVideoPlayerComposite from '../lightbox-media-viewer/lightbox-video-player-composite';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../lightbox-media-viewer/lightbox-video-player-composite';
 import { CTA_TYPE } from './defs';
-import { VideoCTAMixinImpl } from '../../component-mixins/cta/video';
+import { CTAMixinImpl } from '../../component-mixins/cta/cta';
 import styles from './video-cta-composite.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Component that handles video CTAs in app.
  *
- * @element dds-video-cta-composite
+ * @element c4d-video-cta-composite
  */
-@customElement(`${ddsPrefix}-video-cta-composite`)
-class DDSVideoCTAComposite extends ModalRenderMixin(
+@customElement(`${c4dPrefix}-video-cta-composite`)
+class C4DVideoCTAComposite extends ModalRenderMixin(
   HostListenerMixin(LitElement)
 ) {
   /**
@@ -69,7 +70,7 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
   private _videoDescription?: string;
 
   /**
-   * The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.
+   * The handle for the listener of `${c4dPrefix}-expressive-modal-closed` event.
    */
   private _hCloseModal: Handle | null = null;
 
@@ -81,7 +82,7 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
   };
 
   /**
-   * Handles `${ddsPrefix}-cta-request-video-data` event.
+   * Handles `${c4dPrefix}-cta-request-video-data` event.
    *
    * @param event The event.
    */
@@ -94,15 +95,14 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
       const { duration, name } = videoData;
       const videoName = customVideoName || name;
 
-      if (event.target as VideoCTAMixinImpl) {
-        (event.target as VideoCTAMixinImpl).videoName =
-          videoName || customVideoName;
-        (event.target as VideoCTAMixinImpl).videoDescription = videoDescription;
-        (event.target as VideoCTAMixinImpl).videoDuration = duration;
+      if (event.target as CTAMixinImpl) {
+        (event.target as CTAMixinImpl).videoName = videoName || customVideoName;
+        (event.target as CTAMixinImpl).videoDescription = videoDescription;
+        (event.target as CTAMixinImpl).videoDuration = duration;
       }
 
       const videoInfo = new CustomEvent(
-        `${ddsPrefix}-cta-request-additional-video-data`,
+        `${c4dPrefix}-cta-request-additional-video-data`,
         {
           bubbles: true,
           cancelable: true,
@@ -119,7 +119,7 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
   }
 
   /**
-   * Handles `${ddsPrefix}-cta-run-action` event.
+   * Handles `${c4dPrefix}-cta-run-action` event.
    *
    * @param event The event.
    */
@@ -139,12 +139,12 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
    */
   protected get _videoPlayer() {
     const { selectorVideoPlayer, selectorLightboxVideoPlayerComposite } = this
-      .constructor as typeof DDSVideoCTAComposite;
+      .constructor as typeof C4DVideoCTAComposite;
     const lightbox = (this.modalRenderRoot as Element)?.querySelector(
       selectorLightboxVideoPlayerComposite
     );
     return (
-      (lightbox as DDSLightboxVideoPlayerComposite)?.modalRenderRoot as Element
+      (lightbox as C4DLightboxVideoPlayerComposite)?.modalRenderRoot as Element
     )?.querySelector(selectorVideoPlayer);
   }
 
@@ -171,16 +171,16 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
     super.updated(changedProperties);
     if (!this._hCloseModal) {
       const { selectorLightboxVideoPlayerComposite } = this
-        .constructor as typeof DDSVideoCTAComposite;
+        .constructor as typeof C4DVideoCTAComposite;
       const videoPlayerComposite = (
         this.modalRenderRoot as Element
       ).querySelector(
         selectorLightboxVideoPlayerComposite
-      ) as DDSLightboxVideoPlayerComposite;
+      ) as C4DLightboxVideoPlayerComposite;
       // Manually hooks the event listeners on the modal render root to make the event names configurable
       this._hCloseModal = on(
         videoPlayerComposite.modalRenderRoot,
-        (this.constructor as typeof DDSVideoCTAComposite).eventCloseLightbox,
+        (this.constructor as typeof C4DVideoCTAComposite).eventCloseLightbox,
         this._handleCloseVideoPlayer as EventListener
       );
     }
@@ -199,16 +199,16 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
       _videoDescription: videoDescription,
     } = this;
     return html`
-      <dds-lightbox-video-player-composite
+      <c4d-lightbox-video-player-composite
         ?open="${Boolean(activeVideoId)}"
         video-cta-lightbox="true"
-        custom-video-name="${ifNonNull(videoName)}"
-        custom-video-description="${ifNonNull(videoDescription)}"
-        video-id="${ifNonNull(activeVideoId)}"
-        .embeddedVideos="${ifNonNull(embeddedVideos)}"
-        .mediaData="${ifNonNull(mediaData)}"
-        ._embedMedia="${ifNonNull(embedMedia)}">
-      </dds-lightbox-video-player-composite>
+        custom-video-name="${ifDefined(videoName)}"
+        custom-video-description="${ifDefined(videoDescription)}"
+        video-id="${ifDefined(activeVideoId)}"
+        .embeddedVideos="${ifDefined(embeddedVideos)}"
+        .mediaData="${ifDefined(mediaData)}"
+        ._embedMedia="${ifDefined(embedMedia)}">
+      </c4d-lightbox-video-player-composite>
     `;
   }
 
@@ -220,46 +220,39 @@ class DDSVideoCTAComposite extends ModalRenderMixin(
    * A selector selecting the video player component.
    */
   static get selectorVideoPlayer() {
-    return `${ddsPrefix}-lightbox-video-player`;
+    return `${c4dPrefix}-lightbox-video-player`;
   }
 
   /**
    * A selector selecting the video player composite component.
    */
   static get selectorLightboxVideoPlayerComposite() {
-    return `${ddsPrefix}-lightbox-video-player-composite`;
+    return `${c4dPrefix}-lightbox-video-player-composite`;
   }
 
   /**
    * The name of the custom event fired after the lightbox is closed upon a user gesture.
    */
   static get eventCloseLightbox() {
-    return `${ddsPrefix}-expressive-modal-closed`;
-  }
-
-  /**
-   * The name of the custom event fired when there is a user gesture to run the action.
-   */
-  static get eventRequestAdditionalVideoData() {
-    return `${ddsPrefix}-cta-request-additional-video-data`;
+    return `${c4dPrefix}-expressive-modal-closed`;
   }
 
   /**
    * The name of the custom event fired when there is a user gesture to run the action.
    */
   static get eventRequestVideoData() {
-    return `${ddsPrefix}-cta-request-video-data`;
+    return `${c4dPrefix}-cta-request-video-data`;
   }
 
   /**
    * The name of the custom event fired when there is a user gesture to run the action.
    */
   static get eventRunAction() {
-    return `${ddsPrefix}-cta-run-action`;
+    return `${c4dPrefix}-cta-run-action`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSVideoCTAComposite;
+export default C4DVideoCTAComposite;
diff --git a/packages/web-components/src/components/cta/video-cta-container.ts b/packages/web-components/src/components/cta/video-cta-container.ts
index f73eed62a69..8ef767d2317 100644
--- a/packages/web-components/src/components/cta/video-cta-container.ts
+++ b/packages/web-components/src/components/cta/video-cta-container.ts
@@ -8,7 +8,7 @@
  */
 
 import { ActionCreatorsMapObject, Store } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import {
   MediaData,
   MediaPlayerAPIState,
@@ -17,18 +17,18 @@ import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store'
 import { loadMediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPI';
 import { MediaPlayerAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPI.d';
 import {
-  DDSVideoPlayerContainerMixin,
+  C4DVideoPlayerContainerMixin,
   mapStateToProps,
   mapDispatchToProps,
 } from '../video-player/video-player-container';
 import ConnectMixin from '../../globals/mixins/connect';
-import DDSVideoCTAComposite from './video-cta-composite';
+import C4DVideoCTAComposite from './video-cta-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux state used for `<dds-cta-container>`.
+ * The Redux state used for `<c4d-cta-container>`.
  */
 export interface VideoCTAContainerState {
   /**
@@ -38,7 +38,7 @@ export interface VideoCTAContainerState {
 }
 
 /**
- * The properties for `<dds-cta-container>` from Redux state.
+ * The properties for `<c4d-cta-container>` from Redux state.
  */
 export interface VideoCTAContainerStateProps {
   /**
@@ -48,17 +48,17 @@ export interface VideoCTAContainerStateProps {
 }
 
 /**
- * The Redux actions used for `<dds-cta-container>.
+ * The Redux actions used for `<c4d-cta-container>.
  */
 export type CTAContainerActions = ReturnType<typeof loadMediaData>;
 
 /**
  * Container component for CTA.
  *
- * @element dds-cta-container
+ * @element c4d-cta-container
  */
-@customElement(`${ddsPrefix}-video-cta-container`)
-class DDSVideoCTAContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-video-cta-container`)
+class C4DVideoCTAContainer extends ConnectMixin<
   VideoCTAContainerState,
   MediaPlayerAPIActions,
   VideoCTAContainerStateProps,
@@ -67,7 +67,7 @@ class DDSVideoCTAContainer extends ConnectMixin<
   store as Store<VideoCTAContainerState, MediaPlayerAPIActions>,
   mapStateToProps,
   mapDispatchToProps
-)(DDSVideoPlayerContainerMixin(DDSVideoCTAComposite)) {}
+)(C4DVideoPlayerContainerMixin(C4DVideoCTAComposite)) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSVideoCTAContainer;
+export default C4DVideoCTAContainer;
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx
index 495aa1c7fc4..557c8223955 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Dotcom Shell
 
 > 💡 Check our
@@ -17,7 +19,8 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 ### Quick start
 
-`<dds-dotcom-shell-container>` automatically renders contents of dotcom shell from default service data.
+`<cds-dotcom-shell-container>` automatically renders contents of dotcom shell
+from default service data.
 
 ### JS (via import)
 
@@ -32,23 +35,25 @@ import '@carbon/ibmdotcom-web-components/es/components/dotcom-shell/index.js';
 ### HTML
 
 ```html
-<dds-dotcom-shell-container>
+<cds-dotcom-shell-container>
   <main>(The main content)</main>
-</dds-dotcom-shell-container>
+</cds-dotcom-shell-container>
 ```
 
 ## Props
 
-### `<dds-dotcom-shell-container>`/`<dds-dotcom-shell-composite>`
+### `<cds-dotcom-shell-container>`/`<cds-dotcom-shell-composite>`
 
-<Props of="dds-dotcom-shell-composite" />
+<Props of="cds-dotcom-shell-composite" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<dds-dotcom-shell>`    | `data-autoid="dds--dotcom-shell"` | Component   |
+| `<cds-dotcom-shell>`    | `data-autoid="cds--dotcom-shell"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx
index f6b9e3aedc7..91216247b39 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell';
 
@@ -17,13 +22,13 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSDotcomShellContainer from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell-container';
+import C4DDotcomShellContainer from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell-container';
 
 function App() {
   return (
-    <DDSDotcomShellContainer>
+    <C4DDotcomShellContainer>
       <main>(The main content)</main>
-    </DDSDotcomShellContainer>
+    </C4DDotcomShellContainer>
   );
 }
 ```
@@ -34,10 +39,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-dotcom-shell>`    | `data-autoid="dds--dotcom-shell"` | Component   |
+| Web Components selector | Compatibility selector            | Description |
+| ----------------------- | --------------------------------- | ----------- |
+| `<cds-dotcom-shell>`    | `data-autoid="cds--dotcom-shell"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
index 8efc9c92816..df30feebcc1 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.react.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable max-len */
 /**
- * Copyright IBM Corp. 2016, 2022
+ * Copyright IBM Corp. 2016, 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.
@@ -8,68 +8,63 @@
 
 import React from 'react';
 
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
-import DDSContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
-import DDSContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
-import DDSTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
-import DDSContentItemHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal';
-import DDSContentItemHorizontalEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-eyebrow';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
-import DDSContentItemHorizontalCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-copy';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
-import DDSUniversalBanner from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner';
-import DDSUniversalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-image';
-import DDSUniversalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-heading';
-import DDSUniversalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-copy';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import DDSCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
-import DDSLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
-import DDSLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading';
-import DDSLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content';
-import DDSLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading';
-import DDSLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy';
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
-import DDSLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block';
-import DDSLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading';
-import DDSLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
-import DDSLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta';
-import DDSFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
-import DDSFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
-import DDSCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta';
-import DDSCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
-import DDSCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
-import DDSCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
-import DDSContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
-import DDSLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
-import DDSLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
-import DDSContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
-import DDSCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
-import DDSCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
-import DDSCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
-import DDSCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
-import DDSCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
-import DDSCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
-import DDSTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DContentBlockSegmented from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented';
+import C4DContentBlockSegmentedItem from '@carbon/ibmdotcom-web-components/es/components-react/content-block-segmented/content-block-segmented-item';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy';
+import C4DTextCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/text-cta';
+import C4DContentItemRow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row';
+import C4DContentItemRowEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-eyebrow';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemRowCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-copy';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
+import C4DGlobalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-image';
+import C4DGlobalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-heading';
+import C4DGlobalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-copy';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DCardGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group-item';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
+import C4DLeadspaceWithSearchCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-copy';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
+import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block';
+import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
+import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
+import C4DCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta';
+import C4DCalloutWithMedia from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media';
+import C4DCalloutWithMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-copy';
+import C4DCalloutWithMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/callout-with-media/callout-with-media-video';
+import C4DContentBlockHorizontal from '@carbon/ibmdotcom-web-components/es/components-react/content-block-horizontal/content-block-horizontal';
+import C4DLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
+import C4DLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
+import C4DContentBlockCards from '@carbon/ibmdotcom-web-components/es/components-react/content-block-cards/content-block-cards';
+import C4DCardGroup from '@carbon/ibmdotcom-web-components/es/components-react/card-group/card-group';
+import C4DCalloutQuote from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-quote';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DCalloutLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/callout-quote/callout-link-with-icon';
+import C4DCTABlock from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block';
+import C4DCTABlockItemRow from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item-row';
+import C4DCTABlockItem from '@carbon/ibmdotcom-web-components/es/components-react/cta-block/cta-block-item';
+import C4DTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
 
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import logosGroup from '../../../logo-grid/__stories__/data/logos.js';
@@ -84,363 +79,334 @@ import imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--
 import leadspaceImg from '../../../../../../storybook-images/assets/leadspace/fpo--leadspace--1584x560--002.jpg';
 
 export const image = (
-  <DDSImage
+  <C4DImage
     alt="Image alt text"
     default-src={imgLg16x9}
-    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-  >
-    <DDSImageItem media="min-width: 672px" srcset={imgLg16x9}></DDSImageItem>
-    <DDSImageItem media="min-width: 400px" srcset={imgMd16x9}></DDSImageItem>
-    <DDSImageItem media="min-width: 320px" srcset={imgSm16x9}></DDSImageItem>
-  </DDSImage>
+    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+    <C4DImageItem media="min-width: 672px" srcset={imgLg16x9}></C4DImageItem>
+    <C4DImageItem media="min-width: 400px" srcset={imgMd16x9}></C4DImageItem>
+    <C4DImageItem media="min-width: 320px" srcset={imgSm16x9}></C4DImageItem>
+  </C4DImage>
 );
 
 export const contentBlockSegmentedItems = (
   <>
-    <DDSContentBlockSegmentedItem>
-      <DDSContentGroupHeading>
+    <C4DContentBlockSegmentedItem>
+      <C4DContentGroupHeading>
         A scelerisque purus semper eget duis at tellus.{' '}
-      </DDSContentGroupHeading>
-      <DDSContentItemCopy>
+      </C4DContentGroupHeading>
+      <C4DContentItemCopy>
         Elementum nibh tellus molestie nunc non. Habitant morbi tristique
         senectus et netus et malesuada fames.
-      </DDSContentItemCopy>
-      <DDSTextCTA
+      </C4DContentItemCopy>
+      <C4DTextCTA
         slot="footer"
         cta-type="local"
         icon-placement="right"
-        href="https://example.com"
-      >
+        href="https://example.com">
         Lorem Ipsum dolor sit
-      </DDSTextCTA>
-    </DDSContentBlockSegmentedItem>
+      </C4DTextCTA>
+    </C4DContentBlockSegmentedItem>
 
-    <DDSContentBlockSegmentedItem>
-      <DDSContentGroupHeading>
+    <C4DContentBlockSegmentedItem>
+      <C4DContentGroupHeading>
         A scelerisque purus semper eget duis at tellus.{' '}
-      </DDSContentGroupHeading>
-      <DDSContentItemCopy>
+      </C4DContentGroupHeading>
+      <C4DContentItemCopy>
         Elementum nibh tellus molestie nunc non. Habitant morbi tristique
         senectus et netus et malesuada fames.
-      </DDSContentItemCopy>
-    </DDSContentBlockSegmentedItem>
+      </C4DContentItemCopy>
+    </C4DContentBlockSegmentedItem>
   </>
 );
 
 export const contentBlockSegmentedItemsWithImage = (
-  <DDSContentBlockSegmentedItem>
-    <DDSContentGroupHeading>
+  <C4DContentBlockSegmentedItem>
+    <C4DContentGroupHeading>
       A scelerisque purus semper eget duis at tellus.{' '}
-    </DDSContentGroupHeading>
-    <DDSContentItemCopy>
+    </C4DContentGroupHeading>
+    <C4DContentItemCopy>
       Elementum nibh tellus molestie nunc non. Habitant morbi tristique senectus
       et netus et malesuada fames.
-    </DDSContentItemCopy>
+    </C4DContentItemCopy>
     {image}
-    <DDSTextCTA
+    <C4DTextCTA
       slot="footer"
       cta-type="local"
       icon-placement="right"
-      href="https://example.com"
-    >
+      href="https://example.com">
       Lorem Ipsum dolor sit
-    </DDSTextCTA>
-  </DDSContentBlockSegmentedItem>
+    </C4DTextCTA>
+  </C4DContentBlockSegmentedItem>
 );
 
 export const contentItemHorizontal = (
-  <DDSContentItemHorizontal>
-    <DDSContentItemHorizontalEyebrow>
+  <C4DContentItemRow>
+    <C4DContentItemRowEyebrow>
       Lorem ipsum
-    </DDSContentItemHorizontalEyebrow>
-    <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-    <DDSContentItemHorizontalCopy>
+    </C4DContentItemRowEyebrow>
+    <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+    <C4DContentItemRowCopy>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
       sollicitudin.
-    </DDSContentItemHorizontalCopy>
-    <DDSLinkList slot="footer" type="vertical">
-      <DDSLinkListItemCTA
+    </C4DContentItemRowCopy>
+    <C4DLinkList slot="footer" type="vertical">
+      <C4DLinkListItemCTA
         icon-placement="right"
         href="https://www.ibm.com"
-        cta-type="local"
-      >
+        cta-type="local">
         Link text
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA
         icon-placement="right"
         href="https://www.ibm.com"
-        cta-type="external"
-      >
+        cta-type="external">
         External link text
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  </DDSContentItemHorizontal>
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
+  </C4DContentItemRow>
 );
 
-export const universalBanner = (srcImage) => (
-  <DDSUniversalBanner image-width="4-col">
-    <DDSUniversalBannerImage
+export const globalBanner = (srcImage) => (
+  <C4DGlobalBanner image-width="4-col">
+    <C4DGlobalBannerImage
       slot="image"
-      default-src={srcImage}
-    ></DDSUniversalBannerImage>
-    <DDSUniversalBannerHeading slot="heading">
+      default-src={srcImage}></C4DGlobalBannerImage>
+    <C4DGlobalBannerHeading slot="heading">
       heading
-    </DDSUniversalBannerHeading>
-    <DDSUniversalBannerCopy slot="copy">copy</DDSUniversalBannerCopy>
-    <DDSButtonCTA
+    </C4DGlobalBannerHeading>
+    <C4DGlobalBannerCopy slot="copy">copy</C4DGlobalBannerCopy>
+    <C4DButton
       slot="cta"
       cta-type="local"
       kind="tertiary"
-      href="https://www.example.com"
-    >
+      href="https://www.example.com">
       cta copy
-    </DDSButtonCTA>
-  </DDSUniversalBanner>
+    </C4DButton>
+  </C4DGlobalBanner>
 );
 
 export const cardGroupItems = (
-  <DDSCardGroupItem href="https://example.com">
-    <DDSImage
+  <C4DCardGroupItem href="https://example.com">
+    <C4DImage
       slot="image"
       alt="Image alt text"
-      default-src={imgXlg4x3}
-    ></DDSImage>
-    <DDSCardEyebrow>Topic</DDSCardEyebrow>
-    <DDSCardHeading>Natural Language Processing.</DDSCardHeading>
-    <DDSCardCTAFooter></DDSCardCTAFooter>
-  </DDSCardGroupItem>
+      default-src={imgXlg4x3}></C4DImage>
+    <C4DCardEyebrow>Topic</C4DCardEyebrow>
+    <C4DCardHeading>Natural Language Processing.</C4DCardHeading>
+    <C4DCardCTAFooter></C4DCardCTAFooter>
+  </C4DCardGroupItem>
 );
 
 export const contentLeadspace = (
-  <DDSLeadspace
+  <C4DLeadspace
     size="medium"
     gradient-style-scheme="true"
     alt=""
-    default-src={leadspaceImg}
-  >
-    <DDSLeadspaceHeading>Leadspace Title</DDSLeadspaceHeading>
+    default-src={leadspaceImg}>
+    <C4DLeadspaceHeading>Leadspace Title</C4DLeadspaceHeading>
     Use this area for a short line of copy to support the title
-    <DDSButtonGroup slot="action">
-      <DDSButtonGroupItem aria-label="" href="">
+    <C4DButtonGroup slot="action">
+      <C4DButtonGroupItem aria-label="" href="">
         test
-      </DDSButtonGroupItem>
-    </DDSButtonGroup>
-    <DDSImage slot="image" class="bx--image" alt="" default-src={leadspaceImg}>
-      <DDSImageItem
+      </C4DButtonGroupItem>
+    </C4DButtonGroup>
+    <C4DImage slot="image" class="cds--image" alt="" default-src={leadspaceImg}>
+      <C4DImageItem
         media="(min-width: 672px)"
-        srcset={leadspaceImg}
-      ></DDSImageItem>
-      <DDSImageItem media="(min-width: 0)" srcset={leadspaceImg}></DDSImageItem>
-    </DDSImage>
-  </DDSLeadspace>
+        srcset={leadspaceImg}></C4DImageItem>
+      <C4DImageItem media="(min-width: 0)" srcset={leadspaceImg}></C4DImageItem>
+    </C4DImage>
+  </C4DLeadspace>
 );
 
 export const contentLeadspaceSearch = (
-  <DDSLeadspaceWithSearch adjacent-theme="white-and-g10" scroll-behavior>
-    <DDSLeadspaceWithSearchHeading>
-      Find a product
-    </DDSLeadspaceWithSearchHeading>
-    <DDSLeadspaceWithSearchContent>
-      <DDSLeadspaceWithSearchContentHeading>
-        Innovate like a startup, scale for the enterprise
-      </DDSLeadspaceWithSearchContentHeading>
-      <DDSLeadspaceWithSearchContentCopy>
-        Automate your software release process with continuous delivery (CD)—the
-        most critical part of adopting DevOps. Build, test, and deploy code
-        changes quickly, ensuring software is always ready for deployment.
-      </DDSLeadspaceWithSearchContentCopy>
-    </DDSLeadspaceWithSearchContent>
-    <DDSSearchWithTypeahead
+  <C4DLeadspaceWithSearch adjacent-theme="white-and-g10" scroll-behavior>
+    <C4DLeadspaceHeading>
+      Find a product - Innovate like a startup, scale for the enterprise
+    </C4DLeadspaceHeading>
+    <C4DLeadspaceWithSearchCopy>
+      Automate your software release process with continuous delivery (CD)—the
+      most critical part of adopting DevOps. Build, test, and deploy code
+      changes quickly, ensuring software is always ready for deployment.
+    </C4DLeadspaceWithSearchCopy>
+    <C4DSearchWithTypeahead
       slot="search"
       leadspace-search
       active
-      should-remain-open
-    ></DDSSearchWithTypeahead>
-  </DDSLeadspaceWithSearch>
+      should-remain-open></C4DSearchWithTypeahead>
+  </C4DLeadspaceWithSearch>
 );
 
 export const tocContent = (
   <>
-    <DDSLeadspaceBlock name="1" data-title="Lorem ipsum dolor sit amet">
-      <DDSLeadspaceBlockHeading>
+    <C4DLeadspaceBlock name="1" data-title="Lorem ipsum dolor sit amet">
+      <C4DLeadspaceHeading>
         Lorem ipsum dolor sit amet
-      </DDSLeadspaceBlockHeading>
-      <DDSLeadspaceBlockContent>
-        <DDSContentBlockHeading>
-          Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-        </DDSContentBlockHeading>
-        <DDSContentBlockCopy slot="copy">
+      </C4DLeadspaceHeading>
+      <C4DLeadspaceBlockContent>
+        <C4DContentBlockCopy slot="copy">
           Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
           nisi ut aliquip ex ea commodo consequat.
-        </DDSContentBlockCopy>
-        <DDSLeadspaceBlockMedia slot="media">
-          <DDSVideoPlayerContainer video-id="1_9h94wo6b"></DDSVideoPlayerContainer>
-        </DDSLeadspaceBlockMedia>
-        <DDSLinkList type="end">
-          <DDSLinkListHeading>Featured products</DDSLinkListHeading>
-          <DDSLinkListItem href="https://example.com">
+        </C4DContentBlockCopy>
+        <C4DLeadspaceBlockMedia>
+          <C4DVideoPlayerContainer video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
+        </C4DLeadspaceBlockMedia>
+        <C4DLinkList type="end">
+          <C4DLinkListHeading>Featured products</C4DLinkListHeading>
+          <C4DLinkListItem href="https://example.com">
             IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             UrbanCode <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-          <DDSLinkListItem href="https://example.com">
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
             View all products <ArrowRight20 slot="icon" />
-          </DDSLinkListItem>
-        </DDSLinkList>
-        <DDSLeadspaceBlockCTA>
-          <DDSButtonGroupItem href="www.ibm.com">
-            Contact sales <ArrowRight20 slot="icon" />
-          </DDSButtonGroupItem>
-        </DDSLeadspaceBlockCTA>
-      </DDSLeadspaceBlockContent>
-    </DDSLeadspaceBlock>
-
-    <DDSContentBlockSegmented
+          </C4DLinkListItem>
+        </C4DLinkList>
+        <C4DButton href="https://example.com" cta-type="local">
+          Contact sales
+        </C4DButton>
+      </C4DLeadspaceBlockContent>
+    </C4DLeadspaceBlock>
+
+    <C4DContentBlockSegmented
       name="2"
-      data-title="Pharetra pharetra massa massa ultricies mi quis."
-    >
-      <DDSContentBlockHeading>
+      data-title="Pharetra pharetra massa massa ultricies mi quis.">
+      <C4DContentBlockHeading>
         Pharetra pharetra massa massa ultricies mi quis.
-      </DDSContentBlockHeading>
+      </C4DContentBlockHeading>
       {Array.from([1, 2]).map(() => contentBlockSegmentedItems)}
-    </DDSContentBlockSegmented>
-    <DDSFeatureCard size="large" href="https://example.com">
-      <DDSImage slot="image" alt="Image alt text" default-src={imgLg1x1}>
-        <DDSImageItem
+    </C4DContentBlockSegmented>
+    <C4DFeatureCard size="large" href="https://example.com">
+      <C4DImage slot="image" alt="Image alt text" default-src={imgLg1x1}>
+        <C4DImageItem
           media="(min-width: 991px)"
-          srcset={imgLg1x1}
-        ></DDSImageItem>
-      </DDSImage>
-      <DDSCardEyebrow>scelerisque purus</DDSCardEyebrow>
-      <DDSCardHeading>Elementum nibh tellus molestie nunc?</DDSCardHeading>
+          srcset={imgLg1x1}></C4DImageItem>
+      </C4DImage>
+      <C4DCardEyebrow>scelerisque purus</C4DCardEyebrow>
+      <C4DCardHeading>Elementum nibh tellus molestie nunc?</C4DCardHeading>
       <p>
         Habitant morbi tristique senectus et netus et malesuada fames. Habitant
         morbu tristique.
       </p>
-      <DDSFeatureCardFooter>
+      <C4DFeatureCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSFeatureCardFooter>
-    </DDSFeatureCard>
+      </C4DFeatureCardFooter>
+    </C4DFeatureCard>
 
-    <DDSContentBlockSegmented
+    <C4DContentBlockSegmented
       name="3"
-      data-title="Elementum nibh tellus molestie nunc non."
-    >
-      <DDSContentBlockHeading>
+      data-title="Elementum nibh tellus molestie nunc non.">
+      <C4DContentBlockHeading>
         Elementum nibh tellus molestie nunc non.
-      </DDSContentBlockHeading>
+      </C4DContentBlockHeading>
       {Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}
-      <DDSCardCTA slot="footer" cta-type="local" href="https://example.com">
+      <C4DCardCTA slot="footer" cta-type="local" href="https://example.com">
         Lorem ipsum dolor
-        <DDSCardCTAFooter></DDSCardCTAFooter>
-      </DDSCardCTA>
-    </DDSContentBlockSegmented>
+        <C4DCardCTAFooter></C4DCardCTAFooter>
+      </C4DCardCTA>
+    </C4DContentBlockSegmented>
 
-    <DDSCalloutWithMedia>
-      <DDSContentBlockHeading slot="heading">
+    <C4DCalloutWithMedia>
+      <C4DContentBlockHeading slot="heading">
         Mauris ultrices eros in cursus
-      </DDSContentBlockHeading>
-      <DDSCalloutWithMediaCopy size="sm">
+      </C4DContentBlockHeading>
+      <C4DCalloutWithMediaCopy size="sm">
         Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada
         proin libero nunc consequat. In est ante in nibh mauris cursus mattis.
         Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est
         velit egestas dui.
-      </DDSCalloutWithMediaCopy>
-      <DDSCalloutWithMediaVideo video-id="1_9h94wo6b"></DDSCalloutWithMediaVideo>
-    </DDSCalloutWithMedia>
+      </C4DCalloutWithMediaCopy>
+      <C4DCalloutWithMediaVideo video-id="0_ibuqxqbe"></C4DCalloutWithMediaVideo>
+    </C4DCalloutWithMedia>
 
-    <DDSContentBlockHorizontal name="4" data-title="Tincidunt ornare massa">
-      <DDSContentBlockHeading>Tincidunt ornare massa</DDSContentBlockHeading>
+    <C4DContentBlockHorizontal name="4" data-title="Tincidunt ornare massa">
+      <C4DContentBlockHeading>Tincidunt ornare massa</C4DContentBlockHeading>
       {Array.from([1, 2]).map(() => contentItemHorizontal)}
-    </DDSContentBlockHorizontal>
+    </C4DContentBlockHorizontal>
 
-    <DDSLogoGrid
+    <C4DLogoGrid
       name="5"
       data-title="Lobortis elementum nibh tellus"
-      hide-border="true"
-    >
-      <DDSContentBlockHeading>
+      hide-border="true">
+      <C4DContentBlockHeading>
         Lobortis elementum nibh tellus
-      </DDSContentBlockHeading>
+      </C4DContentBlockHeading>
       {logosGroup &&
         logosGroup.map((elem) => (
-          <DDSLogoGridItem
+          <C4DLogoGridItem
             default-src={elem.imgSrc}
-            alt={elem.altText}
-          ></DDSLogoGridItem>
+            alt={elem.altText}></C4DLogoGridItem>
         ))}
-    </DDSLogoGrid>
+    </C4DLogoGrid>
 
-    <DDSContentBlockCards name="6" data-title="Aliquam condimentum interdum">
-      <DDSContentBlockHeading>
+    <C4DContentBlockCards name="6" data-title="Aliquam condimentum interdum">
+      <C4DContentBlockHeading>
         Aliquam condimentum interdum
-      </DDSContentBlockHeading>
-      <DDSCardGroup>
+      </C4DContentBlockHeading>
+      <C4DCardGroup>
         {Array.from([1, 2, 3]).map(() => cardGroupItems)}
-      </DDSCardGroup>
-    </DDSContentBlockCards>
-    <DDSCalloutQuote>
+      </C4DCardGroup>
+    </C4DContentBlockCards>
+    <C4DCalloutQuote>
       Duis aute irure dolor in reprehenderit
-      <DDSQuoteSourceHeading>Lorem ipsum dolor sit amet</DDSQuoteSourceHeading>
-      <DDSQuoteSourceCopy>consectetur adipiscing elit</DDSQuoteSourceCopy>
-      <DDSQuoteSourceBottomCopy>IBM Cloud</DDSQuoteSourceBottomCopy>
-      <DDSCalloutLinkWithIcon slot="footer" href="https://example.com">
-        Link with Icon <ArrowRight20 slot="icon" />
-      </DDSCalloutLinkWithIcon>
-    </DDSCalloutQuote>
-
-    <DDSCTABlock
+      <C4DQuoteSourceHeading>Lorem ipsum dolor sit amet</C4DQuoteSourceHeading>
+      <C4DQuoteSourceCopy>consectetur adipiscing elit</C4DQuoteSourceCopy>
+      <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
+      <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+        Link with Icon
+      </C4DCalloutLinkWithIcon>
+    </C4DCalloutQuote>
+
+    <C4DCTABlock
       name="7"
       data-title="Duis aute irure dolor in reprehenderit"
-      no-border
-    >
-      <DDSContentBlockHeading>Take the next step</DDSContentBlockHeading>
-      <DDSContentBlockCopy>
+      no-border>
+      <C4DContentBlockHeading>Take the next step</C4DContentBlockHeading>
+      <C4DContentBlockCopy>
         Want to discuss your options with a DevOps expert? <br />
         Contact our sales team to evaluate your needs.
-      </DDSContentBlockCopy>
-      <DDSButtonGroup slot="action">
-        <DDSButtonGroupItem href="https://example.com">
+      </C4DContentBlockCopy>
+      <C4DButtonGroup slot="action">
+        <C4DButtonGroupItem href="https://example.com">
           Secondary Button <ArrowRight20 slot="icon" />
-        </DDSButtonGroupItem>
-        <DDSButtonGroupItem href="https://example.com">
+        </C4DButtonGroupItem>
+        <C4DButtonGroupItem href="https://example.com">
           Primary button <ArrowRight20 slot="icon" />
-        </DDSButtonGroupItem>
-      </DDSButtonGroup>
-      <DDSCTABlockItemRow no-border>
-        <DDSCTABlockItem>
-          <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-          <DDSContentItemCopy>
+        </C4DButtonGroupItem>
+      </C4DButtonGroup>
+      <C4DCTABlockItemRow no-border>
+        <C4DCTABlockItem>
+          <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+          <C4DContentItemCopy>
             IBM DevOps partners have a wide range of expertise. Find one to
             build the right solution for you.
-          </DDSContentItemCopy>
-          <DDSTextCTA
+          </C4DContentItemCopy>
+          <C4DTextCTA
             slot="footer"
             cta-type="local"
             icon-placement="right"
-            href="example.com"
-          >
+            href="example.com">
             Find a partner
-          </DDSTextCTA>
-        </DDSCTABlockItem>
-        <DDSCTABlockItem>
-          <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-          <DDSContentItemCopy>
+          </C4DTextCTA>
+        </C4DCTABlockItem>
+        <C4DCTABlockItem>
+          <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+          <C4DContentItemCopy>
             IBM DevOps partners have a wide range of expertise
-          </DDSContentItemCopy>
-          <DDSTextCTA
+          </C4DContentItemCopy>
+          <C4DTextCTA
             slot="footer"
             cta-type="local"
             icon-placement="right"
-            href="example.com"
-          >
+            href="example.com">
             Browse tutorials
-          </DDSTextCTA>
-        </DDSCTABlockItem>
-      </DDSCTABlockItemRow>
-    </DDSCTABlock>
+          </C4DTextCTA>
+        </C4DCTABlockItem>
+      </C4DCTABlockItemRow>
+    </C4DCTABlock>
   </>
 );
 
@@ -452,8 +418,8 @@ export const StoryContent = (
   }
 ) => {
   const mainClasses = [
-    'bx--content',
-    'dds-ce-demo-devenv--ui-shell-content',
+    'cds--content',
+    'cds-ce-demo-devenv--ui-shell-content',
     config?.l1 ? 'has-l1' : null,
     config?.leadspace ? 'has-leadspace' : null,
   ]
@@ -464,15 +430,15 @@ export const StoryContent = (
     <div className={mainClasses}>
       {config?.leadspace ? contentLeadspace : null}
       {config?.tocLayout === TOC_TYPES.HORIZONTAL ? (
-        <DDSTableOfContents stickyOffset={48} toc-layout={config.tocLayout}>
-          <div className="bx--row">
-            <div className="bx--col-lg-12">{tocContent}</div>
+        <C4DTableOfContents stickyOffset={48} toc-layout={config.tocLayout}>
+          <div className="cds--row">
+            <div className="cds--col-lg-12">{tocContent}</div>
           </div>
-        </DDSTableOfContents>
+        </C4DTableOfContents>
       ) : (
-        <DDSTableOfContents stickyOffset={48} toc-layout={config.tocLayout}>
+        <C4DTableOfContents stickyOffset={48} toc-layout={config.tocLayout}>
           {tocContent}
-        </DDSTableOfContents>
+        </C4DTableOfContents>
       )}
     </div>
   );
@@ -480,149 +446,144 @@ export const StoryContent = (
 
 export const StoryContentNoToC = () => (
   <div
-    className="dds-ce-demo-devenv--ui-shell-content"
-    style={{ paddingRight: '1rem' }}
-  >
-    <div className="bx--grid bx--col-lg-8">
+    className="cds-ce-demo-devenv--ui-shell-content"
+    style={{ paddingRight: '1rem' }}>
+    <div className="cds--gridcdsds--col-lg-8">
       {contentLeadspaceSearch}
 
-      <DDSContentBlockSegmented>
-        <DDSContentBlockHeading>
+      <C4DContentBlockSegmented>
+        <C4DContentBlockHeading>
           Pharetra pharetra massa massa ultricies mi quis.
-        </DDSContentBlockHeading>
+        </C4DContentBlockHeading>
         {Array.from([1, 2]).map(() => contentBlockSegmentedItems)}
-      </DDSContentBlockSegmented>
+      </C4DContentBlockSegmented>
 
-      <DDSFeatureCard size="large" href="https://example.com">
-        <DDSImage slot="image" alt="Image alt text" default-src={imgLg1x1}>
-          <DDSImageItem
+      <C4DFeatureCard size="large" href="https://example.com">
+        <C4DImage slot="image" alt="Image alt text" default-src={imgLg1x1}>
+          <C4DImageItem
             media="(min-width: 991px)"
-            srcset={imgLg1x1}
-          ></DDSImageItem>
-        </DDSImage>
-        <DDSCardEyebrow>scelerisque purus</DDSCardEyebrow>
-        <DDSCardHeading>Elementum nibh tellus molestie nunc?</DDSCardHeading>
+            srcset={imgLg1x1}></C4DImageItem>
+        </C4DImage>
+        <C4DCardEyebrow>scelerisque purus</C4DCardEyebrow>
+        <C4DCardHeading>Elementum nibh tellus molestie nunc?</C4DCardHeading>
         <p>
           Habitant morbi tristique senectus et netus et malesuada fames.
           Habitant morbu tristique.
         </p>
-        <DDSFeatureCardFooter>
+        <C4DFeatureCardFooter>
           <ArrowRight20 slot="icon" />
-        </DDSFeatureCardFooter>
-      </DDSFeatureCard>
+        </C4DFeatureCardFooter>
+      </C4DFeatureCard>
 
-      <DDSContentBlockSegmented>
-        <DDSContentBlockHeading>
+      <C4DContentBlockSegmented>
+        <C4DContentBlockHeading>
           Elementum nibh tellus molestie nunc non.
-        </DDSContentBlockHeading>
+        </C4DContentBlockHeading>
         {Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}
-        <DDSCardCTA slot="footer" cta-type="local" href="https://example.com">
+        <C4DCardCTA slot="footer" cta-type="local" href="https://example.com">
           Lorem ipsum dolor
-          <DDSCardCTAFooter></DDSCardCTAFooter>
-        </DDSCardCTA>
-      </DDSContentBlockSegmented>
+          <C4DCardCTAFooter></C4DCardCTAFooter>
+        </C4DCardCTA>
+      </C4DContentBlockSegmented>
 
-      <DDSCalloutWithMedia>
-        <DDSContentBlockHeading slot="heading">
+      <C4DCalloutWithMedia>
+        <C4DContentBlockHeading slot="heading">
           Mauris ultrices eros in cursus
-        </DDSContentBlockHeading>
-        <DDSCalloutWithMediaCopy size="sm">
+        </C4DContentBlockHeading>
+        <C4DCalloutWithMediaCopy size="sm">
           Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada
           proin libero nunc consequat. In est ante in nibh mauris cursus mattis.
           Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat
           est velit egestas dui.
-        </DDSCalloutWithMediaCopy>
-        <DDSCalloutWithMediaVideo video-id="1_9h94wo6b"></DDSCalloutWithMediaVideo>
-      </DDSCalloutWithMedia>
+        </C4DCalloutWithMediaCopy>
+        <C4DCalloutWithMediaVideo video-id="0_ibuqxqbe"></C4DCalloutWithMediaVideo>
+      </C4DCalloutWithMedia>
 
-      <DDSContentBlockHorizontal>
-        <DDSContentBlockHeading>Tincidunt ornare massa</DDSContentBlockHeading>
+      <C4DContentBlockHorizontal>
+        <C4DContentBlockHeading>Tincidunt ornare massa</C4DContentBlockHeading>
         {Array.from([1, 2]).map(() => contentItemHorizontal)}
-      </DDSContentBlockHorizontal>
+      </C4DContentBlockHorizontal>
 
-      <DDSLogoGrid hide-border="true">
-        <DDSContentBlockHeading>
+      <C4DLogoGrid hide-border="true">
+        <C4DContentBlockHeading>
           Lobortis elementum nibh tellus
-        </DDSContentBlockHeading>
+        </C4DContentBlockHeading>
         {logosGroup &&
           logosGroup.map((elem) => (
-            <DDSLogoGridItem
+            <C4DLogoGridItem
               default-src={elem.imgSrc}
-              alt={elem.altText}
-            ></DDSLogoGridItem>
+              alt={elem.altText}></C4DLogoGridItem>
           ))}
-      </DDSLogoGrid>
+      </C4DLogoGrid>
 
-      <DDSContentBlockCards>
-        <DDSContentBlockHeading>
+      <C4DContentBlockCards>
+        <C4DContentBlockHeading>
           Aliquam condimentum interdum
-        </DDSContentBlockHeading>
-        <DDSCardGroup>
+        </C4DContentBlockHeading>
+        <C4DCardGroup>
           {Array.from([1, 2, 3]).map(() => cardGroupItems)}
-        </DDSCardGroup>
-      </DDSContentBlockCards>
+        </C4DCardGroup>
+      </C4DContentBlockCards>
 
-      <DDSCalloutQuote>
+      <C4DCalloutQuote>
         Duis aute irure dolor in reprehenderit
-        <DDSQuoteSourceHeading>
+        <C4DQuoteSourceHeading>
           Lorem ipsum dolor sit amet
-        </DDSQuoteSourceHeading>
-        <DDSQuoteSourceCopy>consectetur adipiscing elit</DDSQuoteSourceCopy>
-        <DDSQuoteSourceBottomCopy>IBM Cloud</DDSQuoteSourceBottomCopy>
-        <DDSCalloutLinkWithIcon slot="footer" href="https://example.com">
-          Link with Icon <ArrowRight20 slot="icon" />
-        </DDSCalloutLinkWithIcon>
-      </DDSCalloutQuote>
-
-      <DDSCTABlock no-border>
-        <DDSContentBlockHeading>Take the next step</DDSContentBlockHeading>
-        <DDSContentBlockCopy>
+        </C4DQuoteSourceHeading>
+        <C4DQuoteSourceCopy>consectetur adipiscing elit</C4DQuoteSourceCopy>
+        <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
+        <C4DCalloutLinkWithIcon slot="footer" href="https://example.com" cta-type="local">
+          Link with Icon
+        </C4DCalloutLinkWithIcon>
+      </C4DCalloutQuote>
+
+      <C4DCTABlock no-border>
+        <C4DContentBlockHeading>Take the next step</C4DContentBlockHeading>
+        <C4DContentBlockCopy>
           Want to discuss your options with a DevOps expert? <br />
           Contact our sales team to evaluate your needs.
-        </DDSContentBlockCopy>
+        </C4DContentBlockCopy>
 
-        <DDSButtonGroup slot="action">
-          <DDSButtonGroupItem href="https://example.com">
+        <C4DButtonGroup slot="action">
+          <C4DButtonGroupItem href="https://example.com">
             Secondary Button <ArrowRight20 slot="icon" />
-          </DDSButtonGroupItem>
-          <DDSButtonGroupItem href="https://example.com">
+          </C4DButtonGroupItem>
+          <C4DButtonGroupItem href="https://example.com">
             Primary button <ArrowRight20 slot="icon" />
-          </DDSButtonGroupItem>
-        </DDSButtonGroup>
+          </C4DButtonGroupItem>
+        </C4DButtonGroup>
 
-        <DDSCTABlockItemRow no-border>
-          <DDSCTABlockItem>
-            <DDSContentItemHeading>Get connected</DDSContentItemHeading>
-            <DDSContentItemCopy>
+        <C4DCTABlockItemRow no-border>
+          <C4DCTABlockItem>
+            <C4DContentItemHeading>Get connected</C4DContentItemHeading>
+            <C4DContentItemCopy>
               IBM DevOps partners have a wide range of expertise. Find one to
               build the right solution for you.
-            </DDSContentItemCopy>
-            <DDSTextCTA
+            </C4DContentItemCopy>
+            <C4DTextCTA
               slot="footer"
               cta-type="local"
               icon-placement="right"
-              href="example.com"
-            >
+              href="example.com">
               Find a partner
-            </DDSTextCTA>
-          </DDSCTABlockItem>
+            </C4DTextCTA>
+          </C4DCTABlockItem>
 
-          <DDSCTABlockItem>
-            <DDSContentItemHeading>Learn how</DDSContentItemHeading>
-            <DDSContentItemCopy>
+          <C4DCTABlockItem>
+            <C4DContentItemHeading>Learn how</C4DContentItemHeading>
+            <C4DContentItemCopy>
               IBM DevOps partners have a wide range of expertise
-            </DDSContentItemCopy>
-            <DDSTextCTA
+            </C4DContentItemCopy>
+            <C4DTextCTA
               slot="footer"
               cta-type="local"
               icon-placement="right"
-              href="example.com"
-            >
+              href="example.com">
               Browse tutorials
-            </DDSTextCTA>
-          </DDSCTABlockItem>
-        </DDSCTABlockItemRow>
-      </DDSCTABlock>
+            </C4DTextCTA>
+          </C4DCTABlockItem>
+        </C4DCTABlockItemRow>
+      </C4DCTABlock>
     </div>
   </div>
 );
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
index 92cc0d16900..8af52cb945e 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/data/content.ts
@@ -6,7 +6,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import logosGroup from '../../../logo-grid/__stories__/data/logos.js';
 import { TOC_TYPES } from '../../../table-of-contents/defs';
@@ -16,7 +16,7 @@ import '../../../cta/index';
 import '../../../card-group/index';
 import '../../../content-block/index';
 import '../../../content-block-segmented/index';
-import '../../../content-item-horizontal/index';
+import '../../../content-item-row/index';
 import '../../../leadspace/index';
 import '../../../image/index';
 import '../../../leadspace-block/index';
@@ -36,359 +36,350 @@ import imgXlg4x3 from '../../../../../../storybook-images/assets/1312/fpo--4x3--
 import leadspaceImg from '../../../../../../storybook-images/assets/leadspace/fpo--leadspace--1584x560--002.jpg';
 
 export const image = html`
-  <dds-image
+  <c4d-image
     alt="Image alt text"
     default-src="${imgLg16x9}"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
+    <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+    </c4d-image-item>
+  </c4d-image>
 `;
 
 export const contentBlockSegmentedItems = html`
-  <dds-content-block-segmented-item>
-    <dds-content-group-heading
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
       >A scelerisque purus semper eget duis at tellus.
-    </dds-content-group-heading>
-    <dds-content-item-copy
+    </c4d-content-group-heading>
+    <c4d-content-item-copy
       >Elementum nibh tellus molestie nunc non. Habitant morbi tristique
       senectus et netus et malesuada fames.
-    </dds-content-item-copy>
-    <dds-text-cta
+    </c4d-content-item-copy>
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</dds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </dds-content-block-segmented-item>
+  </c4d-content-block-segmented-item>
 
-  <dds-content-block-segmented-item>
-    <dds-content-group-heading
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
       >A scelerisque purus semper eget duis at tellus.
-    </dds-content-group-heading>
-    <dds-content-item-copy
+    </c4d-content-group-heading>
+    <c4d-content-item-copy
       >Elementum nibh tellus molestie nunc non. Habitant morbi tristique
       senectus et netus et malesuada fames.
-    </dds-content-item-copy>
-  </dds-content-block-segmented-item>
+    </c4d-content-item-copy>
+  </c4d-content-block-segmented-item>
 `;
 
 export const contentBlockSegmentedItemsWithImage = html`
-  <dds-content-block-segmented-item>
-    <dds-content-group-heading
+  <c4d-content-block-segmented-item>
+    <c4d-content-group-heading
       >A scelerisque purus semper eget duis at tellus.
-    </dds-content-group-heading>
-    <dds-content-item-copy
+    </c4d-content-group-heading>
+    <c4d-content-item-copy
       >Elementum nibh tellus molestie nunc non. Habitant morbi tristique
       senectus et netus et malesuada fames.
-    </dds-content-item-copy>
+    </c4d-content-item-copy>
     ${image}
-    <dds-text-cta
+    <c4d-text-cta
       slot="footer"
       cta-type="local"
       icon-placement="right"
       href="https://example.com"
-      >Lorem Ipsum dolor sit</dds-text-cta
+      >Lorem Ipsum dolor sit</c4d-text-cta
     >
-  </dds-content-block-segmented-item>
+  </c4d-content-block-segmented-item>
 `;
 
 export const contentItemHorizontal = html`
-  <dds-content-item-horizontal>
-    <dds-content-item-horizontal-eyebrow
-      >Lorem ipsum</dds-content-item-horizontal-eyebrow
-    >
-    <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-    <dds-content-item-horizontal-copy
+  <c4d-content-item-row>
+    <c4d-content-item-row-eyebrow>Lorem ipsum</c4d-content-item-row-eyebrow>
+    <c4d-content-item-heading>Aliquam condimentum</c4d-content-item-heading>
+    <c4d-content-item-row-copy
       >Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
       ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit
-      sollicitudin.</dds-content-item-horizontal-copy
+      sollicitudin.</c4d-content-item-row-copy
     >
-    <dds-link-list slot="footer" type="vertical">
-      <dds-link-list-item-cta
+    <c4d-link-list slot="footer" type="vertical">
+      <c4d-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
         cta-type="local">
         Link text
-      </dds-link-list-item-cta>
-      <dds-link-list-item-cta
+      </c4d-link-list-item-cta>
+      <c4d-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
         cta-type="external">
         External link text
-      </dds-link-list-item-cta>
-    </dds-link-list>
-  </dds-content-item-horizontal>
+      </c4d-link-list-item-cta>
+    </c4d-link-list>
+  </c4d-content-item-row>
 `;
 
-export const universalBanner = (srcImage) => html`
-  <dds-universal-banner image-width="4-col">
-    <dds-universal-banner-image
+export const globalBanner = (srcImage) => html`
+  <c4d-global-banner image-width="4-col">
+    <c4d-global-banner-image
       slot="image"
-      default-src="${srcImage}"></dds-universal-banner-image>
-    <dds-universal-banner-heading slot="heading"
-      >heading</dds-universal-banner-heading
+      default-src="${srcImage}"></c4d-global-banner-image>
+    <c4d-global-banner-heading slot="heading"
+      >heading</c4d-global-banner-heading
     >
-    <dds-universal-banner-copy slot="copy">copy</dds-universal-banner-copy>
-    <dds-button-cta
+    <c4d-global-banner-copy slot="copy">copy</c4d-global-banner-copy>
+    <c4d-button
       slot="cta"
       cta-type="local"
       kind="tertiary"
       href="https://www.example.com">
       cta copy
-    </dds-button-cta>
-  </dds-universal-banner>
+    </c4d-button>
+  </c4d-global-banner>
 `;
 
 export const cardGroupItems = html`
-  <dds-card-group-item href="https://example.com">
-    <dds-image slot="image" alt="Image alt text" default-src="${imgXlg4x3}">
-    </dds-image>
-    <dds-card-eyebrow>Topic</dds-card-eyebrow>
-    <dds-card-heading>Natural Language Processing.</dds-card-heading>
-    <dds-card-cta-footer slot="footer">
+  <c4d-card-group-item href="https://example.com">
+    <c4d-image slot="image" alt="Image alt text" default-src="${imgXlg4x3}">
+    </c4d-image>
+    <c4d-card-eyebrow>Topic</c4d-card-eyebrow>
+    <c4d-card-heading>Natural Language Processing.</c4d-card-heading>
+    <c4d-card-cta-footer slot="footer">
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-card-cta-footer>
-  </dds-card-group-item>
+    </c4d-card-cta-footer>
+  </c4d-card-group-item>
 `;
 
 export const contentLeadspace = html`
-  <dds-leadspace
+  <c4d-leadspace
     size="medium"
     gradient-style-scheme="true"
     alt=""
     default-src="${leadspaceImg}">
-    <dds-leadspace-heading>Leadspace Title</dds-leadspace-heading>
+    <c4d-leadspace-heading>Leadspace Title</c4d-leadspace-heading>
     Use this area for a short line of copy to support the title
-    <dds-button-group slot="action">
-      <dds-button-group-item aria-label="" href="">test</dds-button-group-item>
-    </dds-button-group>
-    <dds-image
+    <c4d-button-group slot="action">
+      <c4d-button-group-item aria-label="" href="">test</c4d-button-group-item>
+    </c4d-button-group>
+    <c4d-image
       slot="image"
-      class="bx--image"
+      class="cds--image"
       alt=""
       default-src="${leadspaceImg}">
-      <dds-image-item
+      <c4d-image-item
         media="(min-width: 672px)"
-        srcset="${leadspaceImg}"></dds-image-item>
-      <dds-image-item
+        srcset="${leadspaceImg}"></c4d-image-item>
+      <c4d-image-item
         media="(min-width: 0)"
-        srcset="${leadspaceImg}"></dds-image-item>
-    </dds-image>
-  </dds-leadspace>
+        srcset="${leadspaceImg}"></c4d-image-item>
+    </c4d-image>
+  </c4d-leadspace>
 `;
 
 export const contentLeadspaceSearch = html`
-  <dds-leadspace-with-search adjacent-theme="white-and-g10" scroll-behavior>
-    <dds-leadspace-with-search-heading
-      >Find a product</dds-leadspace-with-search-heading
+  <c4d-leadspace-with-search
+    adjacent-theme="white-and-g10"
+    sticky-search
+    scroll-behavior>
+    <c4d-leadspace-heading highlight="Find a product -"
+      >Find a product - Innovate like a startup, scale for the
+      enterprise</c4d-leadspace-heading
     >
-    <dds-leadspace-with-search-content>
-      <dds-leadspace-with-search-content-heading
-        >Innovate like a startup, scale for the
-        enterprise</dds-leadspace-with-search-content-heading
-      >
-      <dds-leadspace-with-search-content-copy>
-        Automate your software release process with continuous delivery (CD)—the
-        most critical part of adopting DevOps. Build, test, and deploy code
-        changes quickly, ensuring software is always ready for deployment.
-      </dds-leadspace-with-search-content-copy>
-    </dds-leadspace-with-search-content>
-    <dds-search-with-typeahead
+    <c4d-leadspace-with-search-copy>
+      Automate your software release process with continuous delivery (CD)—the
+      most critical part of adopting DevOps. Build, test, and deploy code
+      changes quickly, ensuring software is always ready for deployment.
+    </c4d-leadspace-with-search-copy>
+    <c4d-search-with-typeahead
       slot="search"
       leadspace-search
       active
-      should-remain-open></dds-search-with-typeahead>
-  </dds-leadspace-with-search>
+      should-remain-open></c4d-search-with-typeahead>
+  </c4d-leadspace-with-search>
 `;
 
 export const tocContent = html`
   <a name="1" data-title="Lorem ipsum dolor sit amet"></a>
-  <dds-leadspace-block>
-    <dds-leadspace-block-heading
-      >Lorem ipsum dolor sit amet</dds-leadspace-block-heading
+  <c4d-leadspace-block border>
+    <c4d-leadspace-heading
+      >Lorem ipsum dolor sit amet</c4d-leadspace-heading
     >
-    <dds-leadspace-block-content>
-      <dds-content-block-heading>
-        Consectetur adipiscing elit, sed do eiusmod tempor incididunt ut.
-      </dds-content-block-heading>
-      <dds-content-block-copy slot="copy"
+    <c4d-leadspace-block-content>
+      <c4d-content-block-copy slot="copy"
         >Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
         ut aliquip ex ea commodo consequat.
-      </dds-content-block-copy>
-      <dds-leadspace-block-media slot="media">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"></dds-video-player-container>
-      </dds-leadspace-block-media>
-      <dds-link-list type="end">
-        <dds-link-list-heading>Featured products</dds-link-list-heading>
-        <dds-link-list-item href="https://example.com">
+      </c4d-content-block-copy>
+      <c4d-leadspace-block-media>
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"></c4d-video-player-container>
+      </c4d-leadspace-block-media>
+      <c4d-link-list type="end">
+        <c4d-link-list-heading>Featured products</c4d-link-list-heading>
+        <c4d-link-list-item href="https://example.com">
           IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           UrbanCode ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           View all products ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-      </dds-link-list>
-      <dds-leadspace-block-cta>
-        <dds-button-group-item href="www.ibm.com"
-          >Contact sales
-          ${ArrowRight20({
-            slot: 'icon',
-          })}</dds-button-group-item
-        >
-      </dds-leadspace-block-cta>
-    </dds-leadspace-block-content>
-  </dds-leadspace-block>
+        </c4d-link-list-item>
+      </c4d-link-list>
+      <c4d>
+      <c4d-button href="https://example.com" cta-type="local">
+        Contact sales
+      </c4d-button>
+    </c4d-leadspace-block-content>
+  </c4d-leadspace-block>
 
   <a name="2" data-title="Pharetra pharetra massa massa ultricies mi quis."></a>
-  <dds-content-block-segmented>
-    <dds-content-block-heading
+  <c4d-content-block-segmented>
+    <c4d-content-block-heading
       >Pharetra pharetra massa massa ultricies mi
-      quis.</dds-content-block-heading
+      quis.</c4d-content-block-heading
     >
     ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)}
-  </dds-content-block-segmented>
-  <dds-feature-card size="large" href="https://example.com">
-    <dds-image slot="image" alt="Image alt text" default-src="${imgLg1x1}">
-      <dds-image-item
+  </c4d-content-block-segmented>
+  <c4d-feature-card size="large" href="https://example.com">
+    <c4d-image slot="image" alt="Image alt text" default-src="${imgLg1x1}">
+      <c4d-image-item
         media="(min-width: 991px)"
-        srcset="${imgLg1x1}"></dds-image-item>
-    </dds-image>
-    <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>
-    <dds-card-heading>Elementum nibh tellus molestie nunc?</dds-card-heading>
+        srcset="${imgLg1x1}"></c4d-image-item>
+    </c4d-image>
+    <c4d-card-eyebrow>scelerisque purus</c4d-card-eyebrow>
+    <c4d-card-heading>Elementum nibh tellus molestie nunc?</c4d-card-heading>
     <p>
       Habitant morbi tristique senectus et netus et malesuada fames. Habitant
       morbu tristique.
     </p>
-    <dds-feature-card-footer>
+    <c4d-feature-card-footer>
       ${ArrowRight20({ slot: 'icon' })}
-    </dds-feature-card-footer>
-  </dds-feature-card>
+    </c4d-feature-card-footer>
+  </c4d-feature-card>
 
   <a name="3" data-title="Elementum nibh tellus molestie nunc non."></a>
-  <dds-content-block-segmented>
-    <dds-content-block-heading
+  <c4d-content-block-segmented>
+    <c4d-content-block-heading
       >Elementum nibh tellus molestie nunc non.
-    </dds-content-block-heading>
+    </c4d-content-block-heading>
     ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}
-    <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
+    <c4d-card-cta slot="footer" cta-type="local" href="https://example.com">
       Lorem ipsum dolor
-      <dds-card-cta-footer></dds-card-cta-footer>
-    </dds-card-cta>
-  </dds-content-block-segmented>
+      <c4d-card-cta-footer></c4d-card-cta-footer>
+    </c4d-card-cta>
+  </c4d-content-block-segmented>
 
-  <dds-callout-with-media>
-    <dds-content-block-heading slot="heading"
-      >Mauris ultrices eros in cursus</dds-content-block-heading
+  <c4d-callout-with-media>
+    <c4d-content-block-heading
+      >Mauris ultrices eros in cursus</c4d-content-block-heading
     >
-    <dds-callout-with-media-copy size="sm"
+    <c4d-callout-with-media-copy size="sm"
       >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper malesuada
       proin libero nunc consequat. In est ante in nibh mauris cursus mattis.
       Turpis tincidunt id aliquet risus feugiat in. Vel facilisis volutpat est
       velit egestas dui.
-    </dds-callout-with-media-copy>
-    <dds-callout-with-media-video
-      video-id="1_9h94wo6b"></dds-callout-with-media-video>
-  </dds-callout-with-media>
+    </c4d-callout-with-media-copy>
+    <c4d-callout-with-media-video
+      video-id="0_ibuqxqbe"></c4d-callout-with-media-video>
+  </c4d-callout-with-media>
 
   <a name="4" data-title="Tincidunt ornare massa"></a>
-  <dds-content-block-horizontal>
-    <dds-content-block-heading
-      >Tincidunt ornare massa</dds-content-block-heading
+  <c4d-content-block-horizontal>
+    <c4d-content-block-heading
+      >Tincidunt ornare massa</c4d-content-block-heading
     >
     ${Array.from([1, 2]).map(() => contentItemHorizontal)}
-  </dds-content-block-horizontal>
+  </c4d-content-block-horizontal>
 
   <a name="5" data-title="Lobortis elementum nibh tellus"></a>
-  <dds-logo-grid ?hide-border="true">
-    <dds-content-block-heading
-      >Lobortis elementum nibh tellus</dds-content-block-heading
+  <c4d-logo-grid ?hide-border="true">
+    <c4d-content-block-heading
+      >Lobortis elementum nibh tellus</c4d-content-block-heading
     >
-    ${logosGroup &&
-    logosGroup.map(
-      (elem) => html`
-        <dds-logo-grid-item
-          default-src="${elem.imgSrc}"
-          alt="${elem.altText}"></dds-logo-grid-item>
-      `
-    )}
-  </dds-logo-grid>
+    ${
+      logosGroup &&
+      logosGroup.map(
+        (elem) => html`
+          <c4d-logo-grid-item
+            default-src="${elem.imgSrc}"
+            alt="${elem.altText}"></c4d-logo-grid-item>
+        `
+      )
+    }
+  </c4d-logo-grid>
 
   <a name="6" data-title="Aliquam condimentum interdum"></a>
-  <dds-content-block-cards>
-    <dds-content-block-heading
-      >Aliquam condimentum interdum</dds-content-block-heading
+  <c4d-content-block-cards>
+    <c4d-content-block-heading
+      >Aliquam condimentum interdum</c4d-content-block-heading
     >
-    <dds-card-group>
+    <c4d-card-group>
       ${Array.from([1, 2, 3]).map(() => cardGroupItems)}
-    </dds-card-group>
-  </dds-content-block-cards>
-  <dds-callout-quote>
+    </c4d-card-group>
+  </c4d-content-block-cards>
+  <c4d-callout-quote>
     Duis aute irure dolor in reprehenderit
-    <dds-quote-source-heading>
+    <c4d-quote-source-heading>
       Lorem ipsum dolor sit amet
-    </dds-quote-source-heading>
-    <dds-quote-source-copy> consectetur adipiscing elit </dds-quote-source-copy>
-    <dds-quote-source-bottom-copy> IBM Cloud </dds-quote-source-bottom-copy>
-    <dds-callout-link-with-icon slot="footer" href="https://example.com">
-      Link with Icon ${ArrowRight20({ slot: 'icon' })}
-    </dds-callout-link-with-icon>
-  </dds-callout-quote>
+    </c4d-quote-source-heading>
+    <c4d-quote-source-copy> consectetur adipiscing elit </c4d-quote-source-copy>
+    <c4d-quote-source-bottom-copy> IBM Cloud </c4d-quote-source-bottom-copy>
+    <c4d-callout-link-with-icon slot="footer" href="https://example.com" cta-type="local">
+      Link with Icon
+    </c4d-callout-link-with-icon>
+  </c4d-callout-quote>
 
   <a name="7" data-title="Duis aute irure dolor in reprehenderit"></a>
-  <dds-cta-block no-border>
-    <dds-content-block-heading>Take the next step</dds-content-block-heading>
-    <dds-content-block-copy
+  <c4d-cta-block no-border>
+    <c4d-content-block-heading>Take the next step</c4d-content-block-heading>
+    <c4d-content-block-copy
       >Want to discuss your options with a DevOps expert? <br />
-      Contact our sales team to evaluate your needs.</dds-content-block-copy
+      Contact our sales team to evaluate your needs.</c4d-content-block-copy
     >
-    <dds-button-group slot="action">
-      <dds-button-group-item href="https://example.com">
+    <c4d-button-group slot="action">
+      <c4d-button-group-item href="https://example.com">
         Secondary Button ${ArrowRight20({ slot: 'icon' })}
-      </dds-button-group-item>
-      <dds-button-group-item href="https://example.com">
+      </c4d-button-group-item>
+      <c4d-button-group-item href="https://example.com">
         Primary button ${ArrowRight20({ slot: 'icon' })}
-      </dds-button-group-item>
-    </dds-button-group>
-    <dds-cta-block-item-row no-border>
-      <dds-cta-block-item>
-        <dds-content-item-heading>Get connected</dds-content-item-heading>
-        <dds-content-item-copy
+      </c4d-button-group-item>
+    </c4d-button-group>
+    <c4d-cta-block-item-row no-border>
+      <c4d-cta-block-item>
+        <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+        <c4d-content-item-copy
           >IBM DevOps partners have a wide range of expertise. Find one to build
-          the right solution for you.</dds-content-item-copy
+          the right solution for you.</c4d-content-item-copy
         >
-        <dds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="example.com">
           Find a partner
-        </dds-text-cta>
-      </dds-cta-block-item>
-      <dds-cta-block-item>
-        <dds-content-item-heading>Learn how</dds-content-item-heading>
-        <dds-content-item-copy
+        </c4d-text-cta>
+      </c4d-cta-block-item>
+      <c4d-cta-block-item>
+        <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+        <c4d-content-item-copy
           >IBM DevOps partners have a wide range of
-          expertise</dds-content-item-copy
+          expertise</c4d-content-item-copy
         >
-        <dds-text-cta
+        <c4d-text-cta
           slot="footer"
           cta-type="local"
           icon-placement="right"
           href="example.com">
           Browse tutorials
-        </dds-text-cta>
-      </dds-cta-block-item>
-    </dds-cta-block-item-row>
-  </dds-cta-block>
+        </c4d-text-cta>
+      </c4d-cta-block-item>
+    </c4d-cta-block-item-row>
+  </c4d-cta-block>
 `;
 
 export const StoryContent = (
@@ -399,8 +390,8 @@ export const StoryContent = (
   }
 ) => {
   const mainClasses = [
-    'bx--content',
-    'dds-ce-demo-devenv--ui-shell-content',
+    'cds--content',
+    'c4d-ce-demo-devenv--ui-shell-content',
     config?.l1 ? 'has-l1' : null,
     config?.leadspace ? 'has-leadspace' : null,
   ]
@@ -412,20 +403,20 @@ export const StoryContent = (
       ${config?.leadspace ? contentLeadspace : null}
       ${config?.tocLayout === TOC_TYPES.HORIZONTAL
         ? html`
-            <dds-table-of-contents
+            <c4d-table-of-contents
               stickyOffset="48"
               toc-layout=${config.tocLayout}>
-              <div class="bx--row">
-                <div class="bx--col-lg-12">${tocContent}</div>
+              <div class="cds--row">
+                <div class="cds--col-lg-12">${tocContent}</div>
               </div>
-            </dds-table-of-contents>
+            </c4d-table-of-contents>
           `
         : html`
-            <dds-table-of-contents
+            <c4d-table-of-contents
               stickyOffset="48"
               toc-layout=${config.tocLayout}>
               ${tocContent}
-            </dds-table-of-contents>
+            </c4d-table-of-contents>
           `}
     </div>
   `;
@@ -434,166 +425,169 @@ export const StoryContent = (
 export const StoryContentNoToC = () =>
   html`
     <div
-      class="dds-ce-demo-devenv--ui-shell-content"
+      class="c4d-ce-demo-devenv--ui-shell-content"
       style="padding-right:1rem">
-      <div class="bx--grid bx--col-lg-8">
+      <div class="cds--grid cds--col-lg-8">
         ${contentLeadspaceSearch}
 
-        <dds-content-block-segmented>
-          <dds-content-block-heading
+        <c4d-content-block-segmented>
+          <c4d-content-block-heading
             >Pharetra pharetra massa massa ultricies mi
-            quis.</dds-content-block-heading
+            quis.</c4d-content-block-heading
           >
           ${Array.from([1, 2]).map(() => contentBlockSegmentedItems)}
-        </dds-content-block-segmented>
+        </c4d-content-block-segmented>
 
-        <dds-feature-card size="large" href="https://example.com">
-          <dds-image
+        <c4d-feature-card size="large" href="https://example.com">
+          <c4d-image
             slot="image"
             alt="Image alt text"
             default-src="${imgLg1x1}">
-            <dds-image-item
+            <c4d-image-item
               media="(min-width: 991px)"
-              srcset="${imgLg1x1}"></dds-image-item>
-          </dds-image>
-          <dds-card-eyebrow>scelerisque purus</dds-card-eyebrow>
-          <dds-card-heading
-            >Elementum nibh tellus molestie nunc?</dds-card-heading
+              srcset="${imgLg1x1}"></c4d-image-item>
+          </c4d-image>
+          <c4d-card-eyebrow>scelerisque purus</c4d-card-eyebrow>
+          <c4d-card-heading
+            >Elementum nibh tellus molestie nunc?</c4d-card-heading
           >
           <p>
             Habitant morbi tristique senectus et netus et malesuada fames.
             Habitant morbu tristique.
           </p>
-          <dds-feature-card-footer>
+          <c4d-feature-card-footer>
             ${ArrowRight20({ slot: 'icon' })}
-          </dds-feature-card-footer>
-        </dds-feature-card>
+          </c4d-feature-card-footer>
+        </c4d-feature-card>
 
-        <dds-content-block-segmented>
-          <dds-content-block-heading
+        <c4d-content-block-segmented>
+          <c4d-content-block-heading
             >Elementum nibh tellus molestie nunc non.
-          </dds-content-block-heading>
+          </c4d-content-block-heading>
           ${Array.from([1, 2]).map(() => contentBlockSegmentedItemsWithImage)}
-          <dds-card-cta
+          <c4d-card-cta
             slot="footer"
             cta-type="local"
             href="https://example.com">
             Lorem ipsum dolor
-            <dds-card-cta-footer></dds-card-cta-footer>
-          </dds-card-cta>
-        </dds-content-block-segmented>
+            <c4d-card-cta-footer></c4d-card-cta-footer>
+          </c4d-card-cta>
+        </c4d-content-block-segmented>
 
-        <dds-callout-with-media>
-          <dds-content-block-heading slot="heading"
-            >Mauris ultrices eros in cursus</dds-content-block-heading
+        <c4d-callout-with-media>
+          <c4d-content-block-heading slot="heading"
+            >Mauris ultrices eros in cursus</c4d-content-block-heading
           >
-          <dds-callout-with-media-copy size="sm"
+          <c4d-callout-with-media-copy size="sm"
             >Porttitor eget dolor morbi non arcu. Et ligula ullamcorper
             malesuada proin libero nunc consequat. In est ante in nibh mauris
             cursus mattis. Turpis tincidunt id aliquet risus feugiat in. Vel
             facilisis volutpat est velit egestas dui.
-          </dds-callout-with-media-copy>
-          <dds-callout-with-media-video
-            video-id="1_9h94wo6b"></dds-callout-with-media-video>
-        </dds-callout-with-media>
-
-        <dds-content-block-horizontal>
-          <dds-content-block-heading
-            >Tincidunt ornare massa</dds-content-block-heading
+          </c4d-callout-with-media-copy>
+          <c4d-callout-with-media-video
+            video-id="0_ibuqxqbe"></c4d-callout-with-media-video>
+        </c4d-callout-with-media>
+
+        <c4d-content-block-horizontal>
+          <c4d-content-block-heading
+            >Tincidunt ornare massa</c4d-content-block-heading
           >
           ${Array.from([1, 2]).map(() => contentItemHorizontal)}
-        </dds-content-block-horizontal>
+        </c4d-content-block-horizontal>
 
-        <dds-logo-grid ?hide-border="true">
-          <dds-content-block-heading
-            >Lobortis elementum nibh tellus</dds-content-block-heading
+        <c4d-logo-grid ?hide-border="true">
+          <c4d-content-block-heading
+            >Lobortis elementum nibh tellus</c4d-content-block-heading
           >
           ${logosGroup &&
           logosGroup.map(
             (elem) => html`
-              <dds-logo-grid-item
+              <c4d-logo-grid-item
                 default-src="${elem.imgSrc}"
-                alt="${elem.altText}"></dds-logo-grid-item>
+                alt="${elem.altText}"></c4d-logo-grid-item>
             `
           )}
-        </dds-logo-grid>
+        </c4d-logo-grid>
 
-        <dds-content-block-cards>
-          <dds-content-block-heading
-            >Aliquam condimentum interdum</dds-content-block-heading
+        <c4d-content-block-cards>
+          <c4d-content-block-heading
+            >Aliquam condimentum interdum</c4d-content-block-heading
           >
-          <dds-card-group>
+          <c4d-card-group>
             ${Array.from([1, 2, 3]).map(() => cardGroupItems)}
-          </dds-card-group>
-        </dds-content-block-cards>
+          </c4d-card-group>
+        </c4d-content-block-cards>
 
-        <dds-callout-quote>
+        <c4d-callout-quote>
           Duis aute irure dolor in reprehenderit
-          <dds-quote-source-heading>
+          <c4d-quote-source-heading>
             Lorem ipsum dolor sit amet
-          </dds-quote-source-heading>
-          <dds-quote-source-copy>
+          </c4d-quote-source-heading>
+          <c4d-quote-source-copy>
             consectetur adipiscing elit
-          </dds-quote-source-copy>
-          <dds-quote-source-bottom-copy>
+          </c4d-quote-source-copy>
+          <c4d-quote-source-bottom-copy>
             IBM Cloud
-          </dds-quote-source-bottom-copy>
-          <dds-callout-link-with-icon slot="footer" href="https://example.com">
-            Link with Icon ${ArrowRight20({ slot: 'icon' })}
-          </dds-callout-link-with-icon>
-        </dds-callout-quote>
-
-        <dds-cta-block no-border>
-          <dds-content-block-heading
-            >Take the next step</dds-content-block-heading
+          </c4d-quote-source-bottom-copy>
+          <c4d-callout-link-with-icon
+            slot="footer"
+            href="https://example.com"
+            cta-type="local">
+            Link with Icon
+          </c4d-callout-link-with-icon>
+        </c4d-callout-quote>
+
+        <c4d-cta-block no-border>
+          <c4d-content-block-heading
+            >Take the next step</c4d-content-block-heading
           >
-          <dds-content-block-copy
+          <c4d-content-block-copy
             >Want to discuss your options with a DevOps expert? <br />
             Contact our sales team to evaluate your
-            needs.</dds-content-block-copy
+            needs.</c4d-content-block-copy
           >
 
-          <dds-button-group slot="action">
-            <dds-button-group-item href="https://example.com">
+          <c4d-button-group slot="action">
+            <c4d-button-group-item href="https://example.com">
               Secondary Button ${ArrowRight20({ slot: 'icon' })}
-            </dds-button-group-item>
-            <dds-button-group-item href="https://example.com">
+            </c4d-button-group-item>
+            <c4d-button-group-item href="https://example.com">
               Primary button ${ArrowRight20({ slot: 'icon' })}
-            </dds-button-group-item>
-          </dds-button-group>
+            </c4d-button-group-item>
+          </c4d-button-group>
 
-          <dds-cta-block-item-row no-border>
-            <dds-cta-block-item>
-              <dds-content-item-heading>Get connected</dds-content-item-heading>
-              <dds-content-item-copy
+          <c4d-cta-block-item-row no-border>
+            <c4d-cta-block-item>
+              <c4d-content-item-heading>Get connected</c4d-content-item-heading>
+              <c4d-content-item-copy
                 >IBM DevOps partners have a wide range of expertise. Find one to
-                build the right solution for you.</dds-content-item-copy
+                build the right solution for you.</c4d-content-item-copy
               >
-              <dds-text-cta
+              <c4d-text-cta
                 slot="footer"
                 cta-type="local"
                 icon-placement="right"
                 href="example.com">
                 Find a partner
-              </dds-text-cta>
-            </dds-cta-block-item>
+              </c4d-text-cta>
+            </c4d-cta-block-item>
 
-            <dds-cta-block-item>
-              <dds-content-item-heading>Learn how</dds-content-item-heading>
-              <dds-content-item-copy
+            <c4d-cta-block-item>
+              <c4d-content-item-heading>Learn how</c4d-content-item-heading>
+              <c4d-content-item-copy
                 >IBM DevOps partners have a wide range of
-                expertise</dds-content-item-copy
+                expertise</c4d-content-item-copy
               >
-              <dds-text-cta
+              <c4d-text-cta
                 slot="footer"
                 cta-type="local"
                 icon-placement="right"
                 href="example.com">
                 Browse tutorials
-              </dds-text-cta>
-            </dds-cta-block-item>
-          </dds-cta-block-item-row>
-        </dds-cta-block>
+              </c4d-text-cta>
+            </c4d-cta-block-item>
+          </c4d-cta-block-item-row>
+        </c4d-cta-block>
       </div>
     </div>
   `;
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.react.tsx b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.react.tsx
index 8ba85254a97..91e742508a6 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.react.tsx
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.react.tsx
@@ -1,49 +1,52 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { text, select, boolean, object } from '@storybook/addon-knobs';
-import on from 'carbon-components/es/globals/js/misc/on.js';
+import on from '../../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
 import React from 'react';
 
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSDotcomShellContainer from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell-container';
-import DDSUniversalBanner from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner';
+import C4DDotcomShellContainer from '@carbon/ibmdotcom-web-components/es/components-react/dotcom-shell/dotcom-shell-container';
+import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
 // eslint-disable-next-line max-len
-import DDSUniversalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-image';
+import C4DGlobalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-image';
 // eslint-disable-next-line max-len
-import DDSUniversalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-heading';
-import DDSUniversalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-copy';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import DDSMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
-import DDSLeftNav from '../../masthead/left-nav';
+import C4DGlobalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-heading';
+import C4DGlobalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-copy';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
+import C4DLeftNav from '../../masthead/left-nav';
 
 import readme from './README.stories.react.mdx';
 import {
   StoryContent,
   StoryContentNoToC,
-  universalBanner as StoryUniversalBanner,
+  globalBanner as StoryGlobalBanner,
   tocContent,
   contentLeadspaceSearch,
 } from './data/content.react';
-import { l1Data } from '../../masthead/__stories__/links';
+import { mastheadL1Data as l1Data } from '../../masthead/__stories__/links';
 import mockLangList from '../../footer/__stories__/language-list';
 import { FOOTER_SIZE } from '../../footer/footer';
 import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
 import { TOC_TYPES } from '../../table-of-contents/defs';
 
 // eslint-disable-next-line sort-imports
-import img4Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg';
-import img8Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg';
+import img4Col from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-image.jpg';
+import img8Col from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-image.jpg';
 import mastheadStyles from '../../masthead/__stories__/masthead.stories.scss';
-import { authenticatedProfileItems, unauthenticatedProfileItems } from '../../masthead/__stories__/profile-items';
+import {
+  authenticatedProfileItems,
+  unauthenticatedProfileItems,
+} from '../../masthead/__stories__/profile-items';
 
 const userStatuses = {
   authenticated: 'test.user@ibm.com',
@@ -78,9 +81,14 @@ const images = {
 /**
  * Menu items knob data
  */
-const menuItems = ['Products & Solutions', 'Services & Consulting', 'Learn & Support', 'Explore more'];
-
-export const Default = args => {
+const menuItems = [
+  'Products & Solutions',
+  'Services & Consulting',
+  'Learn & Support',
+  'Explore more',
+];
+
+export const Default = (args) => {
   const {
     platform,
     hasProfile,
@@ -100,7 +108,7 @@ export const Default = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -117,12 +125,12 @@ export const Default = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
 
-export const DefaultFooterLanguageOnly = args => {
+export const DefaultFooterLanguageOnly = (args) => {
   const {
     platform,
     hasProfile,
@@ -141,7 +149,7 @@ export const DefaultFooterLanguageOnly = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -161,7 +169,7 @@ export const DefaultFooterLanguageOnly = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -171,14 +179,17 @@ DefaultFooterLanguageOnly.story = {
   parameters: {
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
         langList: object('langlist', mockLangList),
       }),
     },
   },
 };
 
-export const searchOpenOnload = args => {
+export const searchOpenOnload = (args) => {
   const {
     platform,
     hasProfile,
@@ -197,7 +208,7 @@ export const searchOpenOnload = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         activate-search="true"
         platform={platform || null}
         platform-url={platformData.url || null}
@@ -216,7 +227,7 @@ export const searchOpenOnload = args => {
         unauthenticatedProfileItems={unauthenticatedProfileItems || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -225,7 +236,7 @@ searchOpenOnload.story = {
   name: 'Search open onload',
 };
 
-export const withPlatform = args => {
+export const withPlatform = (args) => {
   const {
     hasProfile,
     userStatus,
@@ -243,7 +254,7 @@ export const withPlatform = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platformData.name || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -261,7 +272,7 @@ export const withPlatform = args => {
         unauthenticatedProfileItems={unauthenticatedProfileItems || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -273,15 +284,25 @@ withPlatform.story = {
       MastheadComposite: () => ({
         hasProfile: boolean('show the profile functionality (profile)', true),
         hasSearch: boolean('show the search functionality (search)', true),
-        searchPlaceholder: text('search placeholder (searchPlaceholder)', 'Search all of IBM'),
-        selectedMenuItem: text('selected menu item (selected-menu-item)', 'Services & Consulting'),
-        userStatus: select('The user authenticated status (user-status)', userStatuses, userStatuses.unauthenticated),
+        searchPlaceholder: text(
+          'search placeholder (searchPlaceholder)',
+          'Search all of IBM'
+        ),
+        selectedMenuItem: text(
+          'selected menu item (selected-menu-item)',
+          'Services & Consulting'
+        ),
+        userStatus: select(
+          'The user authenticated status (user-status)',
+          userStatuses,
+          userStatuses.unauthenticated
+        ),
       }),
     },
   },
 };
 
-export const withShortFooter = args => {
+export const withShortFooter = (args) => {
   const {
     platform,
     hasProfile,
@@ -300,7 +321,7 @@ export const withShortFooter = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -317,7 +338,7 @@ export const withShortFooter = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -326,7 +347,7 @@ withShortFooter.story = {
   name: 'With short footer',
 };
 
-export const withShortFooterLanguageOnly = args => {
+export const withShortFooterLanguageOnly = (args) => {
   const {
     platform,
     hasProfile,
@@ -347,7 +368,7 @@ export const withShortFooterLanguageOnly = args => {
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
 
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -368,7 +389,7 @@ export const withShortFooterLanguageOnly = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -378,14 +399,17 @@ withShortFooterLanguageOnly.story = {
   parameters: {
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
         langList: object('langlist', mockLangList),
       }),
     },
   },
 };
 
-export const withMicroFooter = args => {
+export const withMicroFooter = (args) => {
   const {
     platform,
     hasProfile,
@@ -404,7 +428,7 @@ export const withMicroFooter = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -421,7 +445,7 @@ export const withMicroFooter = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -430,7 +454,7 @@ withMicroFooter.story = {
   name: 'With micro footer',
 };
 
-export const withMicroFooterLanguageOnly = args => {
+export const withMicroFooterLanguageOnly = (args) => {
   const {
     platform,
     hasProfile,
@@ -450,7 +474,7 @@ export const withMicroFooterLanguageOnly = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -471,7 +495,7 @@ export const withMicroFooterLanguageOnly = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -481,14 +505,17 @@ withMicroFooterLanguageOnly.story = {
   parameters: {
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
         langList: object('langlist', mockLangList),
       }),
     },
   },
 };
 
-export const withL1 = args => {
+export const withL1 = (args) => {
   const {
     hasProfile,
     userStatus,
@@ -512,7 +539,7 @@ export const withL1 = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         language={language || null}
         lang-display={langDisplay || null}
         user-status={userStatus || null}
@@ -527,7 +554,7 @@ export const withL1 = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent(contentConfig)}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -537,17 +564,30 @@ withL1.story = {
   parameters: {
     knobs: {
       DotcomShell: () => ({
-        hasProfile: boolean('show the profile functionality (has-profile)', true),
+        hasProfile: boolean(
+          'show the profile functionality (has-profile)',
+          true
+        ),
         hasSearch: boolean('show the search functionality (has-search)', true),
-        searchPlaceholder: text('search placeholder (searchPlaceholder)', 'Search all of IBM'),
-        selectedMenuItem: text('selected menu item (selected-menu-item)', 'Services & Consulting'),
-        userStatus: select('The user authenticated status (user-status)', userStatuses, userStatuses.unauthenticated),
+        searchPlaceholder: text(
+          'search placeholder (searchPlaceholder)',
+          'Search all of IBM'
+        ),
+        selectedMenuItem: text(
+          'selected menu item (selected-menu-item)',
+          'Services & Consulting'
+        ),
+        userStatus: select(
+          'The user authenticated status (user-status)',
+          userStatuses,
+          userStatuses.unauthenticated
+        ),
       }),
     },
   },
 };
 
-export const WithHorizontalTOC = args => {
+export const WithHorizontalTOC = (args) => {
   const {
     platform,
     hasProfile,
@@ -572,7 +612,7 @@ export const WithHorizontalTOC = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -589,7 +629,7 @@ export const WithHorizontalTOC = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent(contentConfig)}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -601,7 +641,7 @@ WithHorizontalTOC.story = {
   },
 };
 
-export const WithLeadspaceSearch = args => {
+export const WithLeadspaceSearch = (args) => {
   const {
     platform,
     hasProfile,
@@ -621,7 +661,7 @@ export const WithLeadspaceSearch = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSDotcomShellContainer
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -638,7 +678,7 @@ export const WithLeadspaceSearch = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContentNoToC()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
@@ -651,7 +691,7 @@ WithLeadspaceSearch.story = {
   },
 };
 
-export const WithUniversalBanner = args => {
+export const WithGlobalBanner = (args) => {
   const {
     platform,
     hasProfile,
@@ -673,8 +713,8 @@ export const WithUniversalBanner = args => {
     ctaCopy,
   } = args?.DotcomShell ?? {};
 
-  const bannerHeading = document.querySelector('dds-universal-banner-heading');
-  const bannerCopy = document.querySelector('dds-universal-banner-copy');
+  const bannerHeading = document.querySelector('cds-global-banner-heading');
+  const bannerCopy = document.querySelector('cds-global-banner-copy');
 
   if (bannerHeading) {
     bannerHeading!.shadowRoot!.textContent = heading;
@@ -686,15 +726,23 @@ export const WithUniversalBanner = args => {
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      <DDSUniversalBanner image-width={imageWidth}>
-        <DDSUniversalBannerImage slot="image" default-src={images[imageWidth]}></DDSUniversalBannerImage>
-        <DDSUniversalBannerHeading slot="heading">{heading}</DDSUniversalBannerHeading>
-        <DDSUniversalBannerCopy slot="copy">{copy}</DDSUniversalBannerCopy>
-        <DDSButtonCTA slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
+      <C4DGlobalBanner image-width={imageWidth}>
+        <C4DGlobalBannerImage
+          slot="image"
+          default-src={images[imageWidth]}></C4DGlobalBannerImage>
+        <C4DGlobalBannerHeading slot="heading">
+          {heading}
+        </C4DGlobalBannerHeading>
+        <C4DGlobalBannerCopy slot="copy">{copy}</C4DGlobalBannerCopy>
+        <C4DButton
+          slot="cta"
+          cta-type="local"
+          kind="tertiary"
+          href="https://www.example.com">
           {ctaCopy}
-        </DDSButtonCTA>
-      </DDSUniversalBanner>
-      <DDSDotcomShellContainer
+        </C4DButton>
+      </C4DGlobalBanner>
+      <C4DDotcomShellContainer
         platform={platform || null}
         platform-url={platformData.url || null}
         language={language || null}
@@ -711,47 +759,89 @@ export const WithUniversalBanner = args => {
         has-search={hasSearch || null}
         disable-locale-button={disableLocaleButton || null}>
         {StoryContent()}
-      </DDSDotcomShellContainer>
+      </C4DDotcomShellContainer>
     </>
   );
 };
 
-WithUniversalBanner.story = {
-  name: 'With Universal banner',
+WithGlobalBanner.story = {
+  name: 'With Global banner',
   parameters: {
     knobs: {
       DotcomShell: () => ({
-        hasProfile: boolean('show the profile functionality (has-profile)', true),
+        hasProfile: boolean(
+          'show the profile functionality (has-profile)',
+          true
+        ),
         hasSearch: boolean('show the search functionality (has-search)', true),
-        searchPlaceholder: text('search placeholder (searchPlaceholder)', 'Search all of IBM'),
-        selectedMenuItem: text('selected menu item (selected-menu-item)', 'Services & Consulting'),
-        userStatus: select('The user authenticated status (user-status)', userStatuses, userStatuses.unauthenticated),
-        heading: text('Universal banner heading:', 'Hybrid cloud and AI for smarter business'),
-        copy: text('Universal banner copy (optional):', 'Las Vegas, June 15-18, 2025'),
-        ctaCopy: text('Universal banner CTA copy:', 'Register for Think. Free'),
-        imageWidth: select('Universal banner image width:', imageWidthOptions, '4-col'),
+        searchPlaceholder: text(
+          'search placeholder (searchPlaceholder)',
+          'Search all of IBM'
+        ),
+        selectedMenuItem: text(
+          'selected menu item (selected-menu-item)',
+          'Services & Consulting'
+        ),
+        userStatus: select(
+          'The user authenticated status (user-status)',
+          userStatuses,
+          userStatuses.unauthenticated
+        ),
+        heading: text(
+          'Global banner heading:',
+          'Hybrid cloud and AI for smarter business'
+        ),
+        copy: text(
+          'Global banner copy (optional):',
+          'Las Vegas, June 15-18, 2025'
+        ),
+        ctaCopy: text('Global banner CTA copy:', 'Register for Think. Free'),
+        imageWidth: select(
+          'Global banner image width:',
+          imageWidthOptions,
+          '4-col'
+        ),
       }),
     },
   },
 };
 
-export const WithoutShell = args => {
-  const { masthead, universalBanner, leadspaceSearch, tocLayout } = args?.DotcomShell ?? {};
+export const WithoutShell = (args) => {
+  const { masthead, globalBanner, leadspaceSearch, tocLayout } =
+    args?.DotcomShell ?? {};
 
   return (
     <>
       <style type="text/css">{mastheadStyles.cssText}</style>
-      {universalBanner ? StoryUniversalBanner(images['4-col']) : ''}
+      {globalBanner ? StoryGlobalBanner(images['4-col']) : ''}
       {masthead === 'L0' ? (
-        <DDSMastheadContainer id="masthead-container"></DDSMastheadContainer>
+        <C4DMastheadContainer id="masthead-container"></C4DMastheadContainer>
       ) : (
-        <DDSMastheadContainer id="masthead-container" l1Data={l1Data}></DDSMastheadContainer>
+        <C4DMastheadContainer
+          id="masthead-container"
+          l1Data={l1Data}></C4DMastheadContainer>
       )}
-      <main className="bx--content dds-ce-demo--ui-shell-content">
-        {leadspaceSearch ? <div className="bx--grid bx--col-lg-8">{contentLeadspaceSearch}</div> : ''}
-        {tocLayout === 'none' ? <div className="bx--grid bx--col-lg-8">{tocContent}</div> : ''}
+      <main className="cds--content cds-ce-demo--ui-shell-content">
+        {leadspaceSearch ? (
+          <div className="cds--grid cds--col-lg-8">
+            {contentLeadspaceSearch}
+          </div>
+        ) : (
+          ''
+        )}
+        {tocLayout === 'none' ? (
+          <div className="cds--grid cds--col-lg-8">{tocContent}</div>
+        ) : (
+          ''
+        )}
         {tocLayout === null ? StoryContent() : ''}
-        {tocLayout === 'horizontal' ? StoryContent({ l1: false, leadspace: true, tocLayout: TOC_TYPES.HORIZONTAL }) : ''}
+        {tocLayout === 'horizontal'
+          ? StoryContent({
+              l1: false,
+              leadspace: true,
+              tocLayout: TOC_TYPES.HORIZONTAL,
+            })
+          : ''}
       </main>
     </>
   );
@@ -763,9 +853,13 @@ WithoutShell.story = {
     knobs: {
       DotcomShell: () => ({
         masthead: select('Masthead Version', ['L0', 'L1'], 'L0'),
-        universalBanner: boolean('Has Universal Banner', false),
+        globalBanner: boolean('Has Global Banner', false),
         leadspaceSearch: boolean('Has Leadspace With Search', false),
-        tocLayout: select('Table of Contents Layout', { Vertical: null, Horizontal: 'horizontal', None: 'none' }, null),
+        tocLayout: select(
+          'Table of Contents Layout',
+          { Vertical: null, Horizontal: 'horizontal', None: 'none' },
+          null
+        ),
       }),
     },
   },
@@ -774,12 +868,12 @@ WithoutShell.story = {
 export default {
   title: 'Components/Dotcom shell',
   decorators: [
-    story => {
+    (story) => {
       if (!(window as any)._hPageShow) {
         (window as any)._hPageShow = on(window, 'pageshow', () => {
-          const leftNav = document.querySelector('dds-left-nav');
+          const leftNav = document.querySelector('cds-left-nav');
           if (leftNav) {
-            (leftNav as DDSLeftNav).expanded = false;
+            (leftNav as C4DLeftNav).expanded = false;
           }
         });
       }
@@ -791,14 +885,36 @@ export default {
     knobs: {
       escapeHTML: false,
       DotcomShell: () => ({
-        platform: select('Platform (platform)', { none: null, platform: platformData.name }, null),
+        platform: select(
+          'Platform (platform)',
+          { none: null, platform: platformData.name },
+          null
+        ),
         hasProfile: boolean('Show profile in masthead (profile)', true),
         hasSearch: boolean('Show search in masthead (search)', true),
-        searchPlaceholder: text('Search placeholder (searchPlaceholder)', 'Search all of IBM'),
-        selectedMenuItem: select('Selected menu item (selected-menu-item)', menuItems, menuItems[1]),
-        userStatus: select('User authentication (user-status)', userStatuses, userStatuses.unauthenticated),
-        disableLocaleButton: boolean('Locale button (disable-locale-button)', false),
-        footerSize: select('Footer size (footer-size)', footerSizes, FOOTER_SIZE.REGULAR),
+        searchPlaceholder: text(
+          'Search placeholder (searchPlaceholder)',
+          'Search all of IBM'
+        ),
+        selectedMenuItem: select(
+          'Selected menu item (selected-menu-item)',
+          menuItems,
+          menuItems[1]
+        ),
+        userStatus: select(
+          'User authentication (user-status)',
+          userStatuses,
+          userStatuses.unauthenticated
+        ),
+        disableLocaleButton: boolean(
+          'Locale button (disable-locale-button)',
+          false
+        ),
+        footerSize: select(
+          'Footer size (footer-size)',
+          footerSizes,
+          FOOTER_SIZE.REGULAR
+        ),
       }),
     },
   },
diff --git a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
index 465cb7d9cd7..bc162dc82fb 100644
--- a/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
+++ b/packages/web-components/src/components/dotcom-shell/__stories__/dotcom-shell.stories.ts
@@ -7,13 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { boolean, select, object } from '@storybook/addon-knobs';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import on from '../../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import inPercy from '@percy-io/in-percy';
 import textNullable from '../../../../.storybook/knob-text-nullable';
-import DDSLeftNav from '../../masthead/left-nav';
+import c4dLeftNav from '../../masthead/left-nav';
 import '../dotcom-shell-container';
 import {
   authenticatedProfileItems,
@@ -21,7 +21,10 @@ import {
 } from '../../masthead/__stories__/profile-items';
 import mastheadStyles from '../../masthead/__stories__/masthead.stories.scss';
 import { FOOTER_SIZE } from '../../footer/footer';
-import mastheadLinks, { l1Data } from '../../masthead/__stories__/links';
+import {
+  mastheadLinksV2 as l0Data,
+  mastheadL1Data as l1Data,
+} from '../../masthead/__stories__/links';
 import mockLangList from '../../footer/__stories__/language-list';
 import mockFooterLinks from '../../footer/__stories__/links';
 import mockLegalLinks from '../../footer/__stories__/legal-links';
@@ -30,7 +33,7 @@ import readme from './README.stories.mdx';
 import {
   StoryContent,
   StoryContentNoToC,
-  universalBanner as StoryUniversalBanner,
+  globalBanner as StoryGlobalBanner,
   tocContent,
   contentLeadspaceSearch,
 } from './data/content';
@@ -38,8 +41,8 @@ import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotc
 import { TOC_TYPES } from '../../table-of-contents/defs';
 
 // eslint-disable-next-line sort-imports
-import img4Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg';
-import img8Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg';
+import img4Col from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-image.jpg';
+import img8Col from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-image.jpg';
 
 const userStatuses = {
   authenticated: 'test.user@ibm.com',
@@ -105,48 +108,47 @@ export const Default = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -174,54 +176,53 @@ export const DefaultFooterLanguageOnly = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            user-status="${ifNonNull(userStatus)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            user-status="${ifDefined(userStatus)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
             .langList="${langList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            user-status="${ifNonNull(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            user-status="${ifDefined(userStatus)}"
             .langList="${langList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -271,52 +272,51 @@ export const searchOpenOnload = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
+          <c4d-dotcom-shell-composite
             activate-search="true"
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            user-status="${ifNonNull(userStatus)}"
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
+          <c4d-dotcom-shell-container
             activate-search="true"
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
             .langList="${mockLangList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -347,46 +347,45 @@ export const withPlatform = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
+          <c4d-dotcom-shell-composite
             platform=${platformData.name}
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            user-status="${ifNonNull(userStatus)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
+          <c4d-dotcom-shell-container
             platform=${platformData.name}
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            user-status="${ifNonNull(userStatus)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -450,48 +449,47 @@ export const withShortFooter = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="short"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="short"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -525,56 +523,55 @@ export const withShortFooterLanguageOnly = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="short"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
             .langList="${langList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="short"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
             .langList="${langList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -624,48 +621,47 @@ export const withMicroFooter = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="micro"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="micro"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -696,56 +692,55 @@ export const withMicroFooterLanguageOnly = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="micro"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
             .langList="${langList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
             footer-size="micro"
             language-selector-label="Choose a language"
             clear-selection-label="Clear language selection"
             selected-language="English"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            user-status="${ifNonNull(userStatus)}"
+            user-status="${ifDefined(userStatus)}"
             .langList="${langList}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -800,44 +795,43 @@ export const withL1 = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            user-status="${ifNonNull(userStatus)}"
+          <c4d-dotcom-shell-composite
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .l1Data="${l1Data}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent(contentConfig)}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            user-status="${ifNonNull(userStatus)}"
+          <c4d-dotcom-shell-container
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            user-status="${ifDefined(userStatus)}"
             searchPlaceHolder="${searchPlaceholder}"
             selected-menu-item="${selectedMenuItem}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .l1Data="${l1Data}"
-            .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent(contentConfig)}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -910,48 +904,47 @@ export const WithHorizontalTOC = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent(contentConfig)}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent(contentConfig)}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -987,48 +980,47 @@ export const WithLeadspaceSearch = (args) => {
   return html`
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContentNoToC()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContentNoToC()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
@@ -1041,7 +1033,7 @@ WithLeadspaceSearch.story = {
   },
 };
 
-export const WithUniversalBanner = (args) => {
+export const WithGlobalBanner = (args) => {
   const {
     platform,
     hasProfile,
@@ -1064,8 +1056,8 @@ export const WithUniversalBanner = (args) => {
   } = args?.DotcomShell ?? {};
   const { useMock } = args?.Other ?? {};
 
-  const bannerHeading = document.querySelector('dds-universal-banner-heading');
-  const bannerCopy = document.querySelector('dds-universal-banner-copy');
+  const bannerHeading = document.querySelector('c4d-global-banner-heading');
+  const bannerCopy = document.querySelector('c4d-global-banner-copy');
 
   if (bannerHeading) {
     bannerHeading!.shadowRoot!.textContent = heading;
@@ -1079,72 +1071,71 @@ export const WithUniversalBanner = (args) => {
     <style>
       ${mastheadStyles}
     </style>
-    <dds-universal-banner image-width="${imageWidth}">
-      <dds-universal-banner-image
+    <c4d-global-banner image-width="${imageWidth}">
+      <c4d-global-banner-image
         slot="image"
-        default-src="${images[imageWidth]}"></dds-universal-banner-image>
-      <dds-universal-banner-heading slot="heading"
-        >${heading}</dds-universal-banner-heading
+        default-src="${images[imageWidth]}"></c4d-global-banner-image>
+      <c4d-global-banner-heading slot="heading"
+        >${heading}</c4d-global-banner-heading
       >
-      <dds-universal-banner-copy slot="copy">${copy}</dds-universal-banner-copy>
-      <dds-button-cta
+      <c4d-global-banner-copy slot="copy">${copy}</c4d-global-banner-copy>
+      <c4d-button
         slot="cta"
         cta-type="local"
         kind="tertiary"
         href="https://www.example.com">
         ${ctaCopy}
-      </dds-button-cta>
-    </dds-universal-banner>
+      </c4d-button>
+    </c4d-global-banner>
     ${useMock
       ? html`
-          <dds-dotcom-shell-composite
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
+          <c4d-dotcom-shell-composite
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-composite>
+          </c4d-dotcom-shell-composite>
         `
       : html`
-          <dds-dotcom-shell-container
-            platform="${ifNonNull(platform)}"
-            platform-url="${ifNonNull(platformData.url)}"
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            footer-size="${ifNonNull(footerSize)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .localeList="${ifNonNull(localeList)}"
-            .footerLinks="${ifNonNull(footerLinks)}"
-            .navLinks="${navLinks}"
+          <c4d-dotcom-shell-container
+            platform="${ifDefined(platform)}"
+            platform-url="${ifDefined(platformData.url)}"
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            footer-size="${ifDefined(footerSize)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .localeList="${ifDefined(localeList)}"
+            .footerLinks="${ifDefined(footerLinks)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             ?disable-locale-button="${disableLocaleButton}">
             ${StoryContent()}
-          </dds-dotcom-shell-container>
+          </c4d-dotcom-shell-container>
         `}
   `;
 };
 
-WithUniversalBanner.story = {
-  name: 'With Universal banner',
+WithGlobalBanner.story = {
+  name: 'With Global banner',
   parameters: {
     knobs: {
       DotcomShell: () => ({
@@ -1167,19 +1158,19 @@ WithUniversalBanner.story = {
           userStatuses.unauthenticated
         ),
         heading: textNullable(
-          'Universal banner heading:',
+          'Global banner heading:',
           'Hybrid cloud and AI for smarter business'
         ),
         copy: textNullable(
-          'Universal banner copy (optional):',
+          'Global banner copy (optional):',
           'Las Vegas, June 15-18, 2025'
         ),
         ctaCopy: textNullable(
-          'Universal banner CTA copy:',
+          'Global banner CTA copy:',
           'Register for Think. Free'
         ),
         imageWidth: select(
-          'Universal banner image width:',
+          'Global banner image width:',
           imageWidthOptions,
           '4-col'
         ),
@@ -1207,32 +1198,32 @@ WithUniversalBanner.story = {
 };
 
 export const WithoutShell = (args) => {
-  const { masthead, universalBanner, leadspaceSearch, tocLayout } =
+  const { masthead, globalBanner, leadspaceSearch, tocLayout } =
     args?.DotcomShell ?? {};
 
   return html`
     <style>
       ${mastheadStyles}
     </style>
-    ${universalBanner ? StoryUniversalBanner(images['4-col']) : ''}
+    ${globalBanner ? StoryGlobalBanner(images['4-col']) : ''}
     ${masthead === 'L0'
       ? html`
-          <dds-masthead-container
-            id="masthead-container"></dds-masthead-container>
+          <c4d-masthead-container
+            id="masthead-container"></c4d-masthead-container>
         `
       : html`
-          <dds-masthead-container
+          <c4d-masthead-container
             id="masthead-container"
-            .l1Data="${l1Data}"></dds-masthead-container>
+            .l1Data="${l1Data}"></c4d-masthead-container>
         `}
-    <main class="bx--content dds-ce-demo--ui-shell-content">
+    <main class="cds--content c4d-ce-demo--ui-shell-content">
       ${leadspaceSearch
         ? html`
-            <div class="bx--grid bx--col-lg-8">${contentLeadspaceSearch}</div>
+            <div class="cds--grid cds--col-lg-8">${contentLeadspaceSearch}</div>
           `
         : ''}
       ${tocLayout === 'none'
-        ? html` <div class="bx--grid bx--col-lg-8">${tocContent}</div> `
+        ? html` <div class="cds--grid cds--col-lg-8">${tocContent}</div> `
         : ''}
       ${tocLayout === null ? StoryContent() : ''}
       ${tocLayout === 'horizontal'
@@ -1252,7 +1243,7 @@ WithoutShell.story = {
     knobs: {
       DotcomShell: () => ({
         masthead: select('Masthead Version', ['L0', 'L1'], 'L0'),
-        universalBanner: boolean('Has Universal Banner', false),
+        globalBanner: boolean('Has Global Banner', false),
         leadspaceSearch: boolean('Has Leadspace With Search', false),
         tocLayout: select(
           'Table of Contents Layout',
@@ -1278,13 +1269,31 @@ export default {
     (story) => {
       if (!(window as any)._hPageShow) {
         (window as any)._hPageShow = on(window, 'pageshow', () => {
-          const leftNav = document.querySelector('dds-left-nav');
+          const leftNav = document.querySelector('c4d-left-nav');
           if (leftNav) {
-            (leftNav as DDSLeftNav).expanded = false;
+            (leftNav as c4dLeftNav).expanded = false;
           }
         });
       }
-      return story();
+      return html`
+        ${story()}
+        <script>
+          window.digitalData.page.pageInfo.ibm.contactModuleConfiguration = {
+            contactInformationBundleKey: {
+              focusArea: 'Cloud - Automation - All',
+              languageCode: 'en',
+              regionCode: 'US',
+            },
+            contactModuleTranslationKey: {
+              languageCode: 'en',
+              regionCode: 'US',
+            },
+          };
+        </script>
+        <script
+          src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js"
+          defer></script>
+      `;
     },
   ],
   parameters: {
@@ -1325,12 +1334,12 @@ export default {
       }),
     },
     props: (() => {
-      // Lets `<dds-masthead-container>` load the nav links and lets `<dds-footer-container>` load the footer links
+      // Lets `<c4d-masthead-container>` load the nav links and lets `<c4d-footer-container>` load the footer links
       const useMock =
         inPercy() || new URLSearchParams(window.location.search).has('mock');
       return {
         DotcomShell: {
-          navLinks: !useMock ? undefined : mastheadLinks,
+          navLinks: !useMock ? undefined : l0Data,
           langDisplay: !useMock ? undefined : 'United States - English',
           legalLinks: !useMock ? undefined : mockLegalLinks,
           links: !useMock ? undefined : mockFooterLinks,
diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.scss b/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.scss
deleted file mode 100644
index c98619dbfbd..00000000000
--- a/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2020
-//
-// 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-
-:host(#{$dds-prefix}-dotcom-shell-container),
-:host(#{$dds-prefix}-dotcom-shell-composite) {
-  display: contents;
-}
diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts b/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts
index dac6b3e811a..c3c82bb666c 100644
--- a/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts
+++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell-composite.ts
@@ -8,15 +8,16 @@
  */
 
 import pickBy from 'lodash-es/pickBy.js';
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { globalInit } from '../../internal/vendor/@carbon/ibmdotcom-services/services/global/global';
 import { LocaleList } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/localeAPI.d';
 import {
   BasicLink,
   BasicLinkSet,
   MastheadL1,
-  MastheadLink,
+  L0MenuItem,
   MastheadProfileItem,
   Translation,
 } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d';
@@ -24,18 +25,18 @@ import { UNAUTHENTICATED_STATUS } from '../../internal/vendor/@carbon/ibmdotcom-
 import { FOOTER_SIZE } from '../footer/footer';
 import '../footer/footer-composite';
 import './dotcom-shell';
-import styles from './dotcom-shell-composite.scss';
+import styles from './dotcom-shell.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * Component that rendres dotcom shell from links, etc. data.
+ * Component that renders dotcom shell from links, etc. data.
  *
- * @element dds-dotcom-shell-composite
+ * @element c4d-dotcom-shell-composite
  */
-@customElement(`${ddsPrefix}-dotcom-shell-composite`)
-class DDSDotcomShellComposite extends LitElement {
+@customElement(`${c4dPrefix}-dotcom-shell-composite`)
+class C4DDotcomShellComposite extends LitElement {
   /**
    * The render target of the footer contents.
    */
@@ -56,7 +57,7 @@ class DDSDotcomShellComposite extends LitElement {
    */
   private _createFooterRenderRoot() {
     const footer = this.ownerDocument!.createElement(
-      `${ddsPrefix}-footer-composite`
+      `${c4dPrefix}-footer-composite`
     );
     this.parentNode?.insertBefore(footer, this.nextSibling);
     return footer;
@@ -67,7 +68,7 @@ class DDSDotcomShellComposite extends LitElement {
    */
   private _createMastheadRenderRoot() {
     const masthead = this.ownerDocument!.createElement(
-      `${ddsPrefix}-masthead-composite`
+      `${c4dPrefix}-masthead-composite`
     );
     this.parentNode?.insertBefore(masthead, this);
     return masthead;
@@ -121,7 +122,7 @@ class DDSDotcomShellComposite extends LitElement {
   hasSearch = true;
 
   /**
-   * `true` if there is a universal banner.
+   * `true` if there is a global banner.
    */
   @property({ type: Boolean, attribute: 'has-banner' })
   hasBanner = false;
@@ -320,7 +321,7 @@ class DDSDotcomShellComposite extends LitElement {
    * but if you need an alternate way of integration (e.g. rendering Web Components tags in server-side) this property helps.
    */
   @property({ attribute: false })
-  navLinks?: MastheadLink[];
+  navLinks?: L0MenuItem[];
 
   /**
    * The parameters passed to the search-with-typeahead for search scope
@@ -459,14 +460,16 @@ class DDSDotcomShellComposite extends LitElement {
   updated(changedProperties) {
     super.updated(changedProperties);
 
-    // moving universal banner outside of dotcom shell if placed within
-    if (this.querySelector('dds-universal-banner')) {
+    // moving global banner outside of dotcom shell if placed within
+    if (this.querySelector(`${c4dPrefix}-global-banner`)) {
       this.ownerDocument
-        .querySelector('dds-masthead-composite')
-        ?.before(this.querySelector('dds-universal-banner') as HTMLElement);
+        .querySelector(`${c4dPrefix}-masthead-composite`)
+        ?.before(
+          this.querySelector(`${c4dPrefix}-global-banner`) as HTMLElement
+        );
     }
 
-    if (this.ownerDocument.querySelector('dds-universal-banner')) {
+    if (this.ownerDocument.querySelector(`${c4dPrefix}-global-banner`)) {
       this.hasBanner = true;
       this._masthead?.setAttribute('with-banner', '');
     }
@@ -474,9 +477,9 @@ class DDSDotcomShellComposite extends LitElement {
 
   render() {
     return html`
-      <dds-dotcom-shell>
+      <c4d-dotcom-shell>
         <slot></slot>
-      </dds-dotcom-shell>
+      </c4d-dotcom-shell>
     `;
   }
 
@@ -484,4 +487,4 @@ class DDSDotcomShellComposite extends LitElement {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSDotcomShellComposite;
+export default C4DDotcomShellComposite;
diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts b/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts
index 56a5fd042c7..e499f1bdbfd 100644
--- a/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts
+++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell-container.ts
@@ -8,7 +8,7 @@
  */
 
 import { ActionCreatorsMapObject, Dispatch, Store } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import ConnectMixin from '../../globals/mixins/connect';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import { LocaleAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI.d';
@@ -29,27 +29,27 @@ import {
   mapStateToProps as mapStateToPropsMasthead,
   mapDispatchToProps as mapDispatchToPropsMasthead,
 } from '../masthead/masthead-container';
-import DDSDotcomShellComposite from './dotcom-shell-composite';
+import C4DDotcomShellComposite from './dotcom-shell-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux state used for `<dds-dotcom-shell-container>`.
+ * The Redux state used for `<c4d-dotcom-shell-container>`.
  */
 export interface DotcomShellContainerState
   extends MastheadContainerState,
     FooterContainerState {}
 
 /**
- * The properties for `<dds-dotcom-shell-container>` from Redux state.
+ * The properties for `<c4d-dotcom-shell-container>` from Redux state.
  */
 export interface DotcomShellContainerStateProps
   extends MastheadContainerStateProps,
     FooterContainerStateProps {}
 
 /**
- * The Redux actions used for `<dds-dotcom-shell-container>`.
+ * The Redux actions used for `<c4d-dotcom-shell-container>`.
  */
 export type DotcomShellContainerActions =
   | MastheadContainerActions
@@ -57,7 +57,7 @@ export type DotcomShellContainerActions =
 
 /**
  * @param state The Redux state for dotcom shell.
- * @returns The converted version of the given state, tailored for `<dds-dotcomshell-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-dotcomshell-container>`.
  */
 export function mapStateToProps(
   state: MastheadContainerState & FooterContainerState
@@ -74,7 +74,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-dotcomshell-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-dotcomshell-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(
   dispatch: Dispatch<LocaleAPIActions | TranslateAPIActions | ProfileAPIActions>
@@ -88,10 +88,10 @@ export function mapDispatchToProps(
 /**
  * Container component for dotcom shell.
  *
- * @element dds-dotcom-shell-container
+ * @element c4d-dotcom-shell-container
  */
-@customElement(`${ddsPrefix}-dotcom-shell-container`)
-class DDSDotcomShellContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-dotcom-shell-container`)
+class C4DDotcomShellContainer extends ConnectMixin<
   DotcomShellContainerState,
   LocaleAPIActions | TranslateAPIActions | ProfileAPIActions | SearchAPIActions,
   DotcomShellContainerStateProps,
@@ -106,7 +106,7 @@ class DDSDotcomShellContainer extends ConnectMixin<
   >,
   mapStateToProps,
   mapDispatchToProps
-)(DDSDotcomShellComposite) {}
+)(C4DDotcomShellComposite) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSDotcomShellContainer;
+export default C4DDotcomShellContainer;
diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell.scss b/packages/web-components/src/components/dotcom-shell/dotcom-shell.scss
index 7664c40cff5..96e77392eb0 100644
--- a/packages/web-components/src/components/dotcom-shell/dotcom-shell.scss
+++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/dotcom-shell/dotcom-shell';
+@use '@carbon/ibmdotcom-styles/scss/components/dotcom-shell';
diff --git a/packages/web-components/src/components/dotcom-shell/dotcom-shell.ts b/packages/web-components/src/components/dotcom-shell/dotcom-shell.ts
index c6ea22cd850..834ded9e9c3 100644
--- a/packages/web-components/src/components/dotcom-shell/dotcom-shell.ts
+++ b/packages/web-components/src/components/dotcom-shell/dotcom-shell.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './dotcom-shell.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Dotcom shell.
  *
- * @element dds-dotcom-shell
+ * @element c4d-dotcom-shell
  */
-@customElement(`${ddsPrefix}-dotcom-shell`)
-class DDSDotcomShell extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-dotcom-shell`)
+class C4DDotcomShell extends StableSelectorMixin(LitElement) {
   render() {
     return html`
       <div class="${prefix}--dotcom-shell__content">
@@ -33,11 +31,11 @@ class DDSDotcomShell extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--dotcom-shell`;
+    return `${c4dPrefix}--dotcom-shell`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSDotcomShell;
+export default C4DDotcomShell;
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx
index 2c496c98aff..d5886df86b4 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.mdx
@@ -1,14 +1,15 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Expressive modal
 
-> The `<dds-expressive-modal>` component is based on
+> The `<cds-expressive-modal>` component is based on
 > [Carbon's Modal component](https://custom-elements.carbondesignsystem.com/?path=/story/components-modal--default-story)
 > with slight styling updates to increase readability and reduce strain.
 
@@ -35,20 +36,23 @@ import '@carbon/ibmdotcom-web-components/es/components/expressive-modal/index.js
 ### HTML
 
 ```html
-<dds-expressive-modal open>
-  <dds-expressive-modal-header>
-    <dds-expressive-modal-close-button role="button"></dds-expressive-modal-close-button>
-    <dds-expressive-modal-heading>Modal Title</dds-expressive-modal-heading>
-  </dds-expressive-modal-header>
-  <dds-expressive-modal-body>
-    Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus pharetra, purus et pretium posuere, ipsum risus
-    pulvinar leo, non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros. Fusce sollicitudin sit
-    amet quam eu fringilla. Donec tincidunt ut nisi vitae pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis
-    ante convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis sapien
-    eu nisl congue suscipit.
-  </dds-expressive-modal-body>
-  <dds-expressive-modal-footer slot="footer">
-    <dds-button-expressive kind="primary">
+<cds-expressive-modal open>
+  <cds-expressive-modal-header>
+    <cds-expressive-modal-close-button
+      role="button"></cds-expressive-modal-close-button>
+    <cds-expressive-modal-heading>Modal Title</cds-expressive-modal-heading>
+  </cds-expressive-modal-header>
+  <cds-expressive-modal-body>
+    Quisque felis odio, egestas vel tempus iaculis, interdum vel eros. Phasellus
+    pharetra, purus et pretium posuere, ipsum risus pulvinar leo, non rutrum
+    tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec tincidunt eros.
+    Fusce sollicitudin sit amet quam eu fringilla. Donec tincidunt ut nisi vitae
+    pharetra. Curabitur imperdiet ante sit amet mi laoreet, vitae facilisis ante
+    convallis. Aenean quis dapibus augue. Sed nisl dui, scelerisque et augue
+    eget, pharetra commodo elit. In venenatis sapien eu nisl congue suscipit.
+  </cds-expressive-modal-body>
+  <cds-expressive-modal-footer slot="footer">
+    <cds-button kind="primary">
       Lorem ipsum dolor
       <svg
         slot="icon"
@@ -58,38 +62,42 @@ import '@carbon/ibmdotcom-web-components/es/components/expressive-modal/index.js
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-button-expressive>
-  </dds-expressive-modal-footer>
-</dds-expressive-modal>
+    </cds-button>
+  </cds-expressive-modal-footer>
+</cds-expressive-modal>
 ```
 
 ## Accessibility Notes
 
 ### Dialog labeling
 
-The expressive modal anticipates content within the `header` slot to be used as the accessible aria label for the dialog box. Even if a design does not call for the modal to have content in the title slot, it is _required_ for accessibility. The header can be visually hidden using the `.bx--visually-hidden` or `.bx--assistive-text` classes. This will prevent the text from rendering on the screen, but will still be announced to assistive technology users.
+The expressive modal anticipates content within the `header` slot to be used as
+the accessible aria label for the dialog box. Even if a design does not call for
+the modal to have content in the title slot, it is _required_ for accessibility.
+The header can be visually hidden using the `.cds--visually-hidden` or
+`.cds--assistive-text` classes. This will prevent the text from rendering on the
+screen, but will still be announced to assistive technology users.
 
 ```html
-<dds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-  <span class="bx--visually-hidden" slot="header">Dialog box label text</span>
+<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+  <span class="cds--visually-hidden" slot="header">Dialog box label text</span>
   ...
-</dds-expressive-modal>
+</cds-expressive-modal>
 ```
 
 ## Opening/closing modal from code
 
-Opening/closing modal from code can be done by changing `open` attribute/property. For example we have HTML like this:
+Opening/closing modal from code can be done by changing `open`
+attribute/property. For example we have HTML like this:
 
 ```html
-<dds-button-expressive id="my-btn">Open modal</dds-button-expressive>
-<dds-expressive-modal id="my-modal">
-  ...
-</dds-expressive-modal>
+<cds-button id="my-btn">Open modal</cds-button>
+<cds-expressive-modal id="my-modal"> ... </cds-expressive-modal>
 ```
 
 We can make the button open the modal by:
@@ -102,26 +110,29 @@ document.getElementById('my-btn').addEventListener('click', () => {
 
 ## Props
 
-### `<dds-expressive-modal>`
+### `<cds-expressive-modal>`
 
-**Note**: The events with `bx-` prefix and `size` attribute/property came from deriving `<bx-modal>`, but _not_ used in `<dds-expressive-modal>`.
+**Note**: The events with `cds-` prefix and `size` attribute/property came from
+deriving `<cds-modal>`, but _not_ used in `<cds-expressive-modal>`.
 
-<Props of="dds-expressive-modal" />
+<Props of="cds-expressive-modal" />
 
-### `<dds-expressive-modal-header>`
+### `<cds-expressive-modal-header>`
 
-<Props of="dds-expressive-modal-header" />
+<Props of="cds-expressive-modal-header" />
 
-### `<dds-expressive-modal-footer>`
+### `<cds-expressive-modal-footer>`
 
-<Props of="dds-expressive-modal-footer" />
+<Props of="cds-expressive-modal-footer" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<dds-expressive-modal>` | `data-autoid="dds--expressive-modal"` | Component   |
+| `<cds-expressive-modal>` | `data-autoid="cds--expressive-modal"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx
index b658d6acd03..5495159cce6 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/expressive-modal/__stories__/README.stories.react.mdx
@@ -23,22 +23,22 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
-import DDSExpressiveModalHeader from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-header';
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
-import DDSExpressiveModalHeading from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-heading';
-import DDSExpressiveModalBody from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-body';
-import DDSExpressiveModalFooter from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-footer';
-import DDSButtonExpressive from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
+import C4DExpressiveModalHeader from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-header';
+import C4DExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
+import C4DExpressiveModalHeading from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-heading';
+import C4DExpressiveModalBody from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-body';
+import C4DExpressiveModalFooter from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-footer';
+import C4DButtonExpressive from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
 
 function App() {
   return (
-    <DDSExpressiveModal open={true}>
-      <DDSExpressiveModalHeader>
-        <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-        <DDSExpressiveModalHeading>Modal Title</DDSExpressiveModalHeading>
-      </DDSExpressiveModalHeader>
-      <DDSExpressiveModalBody>
+    <C4DExpressiveModal open={true}>
+      <C4DExpressiveModalHeader>
+        <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+        <C4DExpressiveModalHeading>Modal Title</C4DExpressiveModalHeading>
+      </C4DExpressiveModalHeader>
+      <C4DExpressiveModalBody>
         Quisque felis odio, egestas vel tempus iaculis, interdum vel eros.
         Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo,
         non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec
@@ -47,13 +47,13 @@ function App() {
         laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed
         nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis
         sapien eu nisl congue suscipit.
-      </DDSExpressiveModalBody>
-      <DDSExpressiveModalFooter>
-        <DDSButtonExpressive>
+      </C4DExpressiveModalBody>
+      <C4DExpressiveModalFooter>
+        <C4DButtonExpressive>
           Lorem ipsum dolor <ArrowRight20 slot="icon" />
-        </DDSButtonExpressive>
-      </DDSExpressiveModalFooter>
-    </DDSExpressiveModal>
+        </C4DButtonExpressive>
+      </C4DExpressiveModalFooter>
+    </C4DExpressiveModal>
   );
 }
 ```
@@ -64,10 +64,10 @@ Opening/closing modal from code can be done by changing `open`
 attribute/property.
 
 ```javascript
-<DDSButtonExpressive id="my-btn">Open modal</DDSButtonExpressive>
-<dds-expressive-modal id="my-modal">
+<C4DButtonExpressive id="my-btn">Open modal</C4DButtonExpressive>
+<cds-expressive-modal id="my-modal">
   ...
-</dds-expressive-modal>
+</cds-expressive-modal>
 ```
 
 We can make the button open the modal by:
@@ -90,6 +90,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<dds-expressive-modal>` | `data-autoid="dds--expressive-modal"` | Component   |
+| `<cds-expressive-modal>` | `data-autoid="cds--expressive-modal"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx
index 45b866a5297..40d71f1cd1a 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx
+++ b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.react.tsx
@@ -14,13 +14,13 @@ import React from 'react';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // @ts-ignore
 /* eslint-disable max-len */
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
-import DDSExpressiveModalHeader from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-header';
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
-import DDSExpressiveModalHeading from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-heading';
-import DDSExpressiveModalBody from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-body';
-import DDSExpressiveModalFooter from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-footer';
-import DDSButtonExpressive from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DExpressiveModal from '../../../../es/components-react/expressive-modal/expressive-modal.js';
+import C4DExpressiveModalHeader from '../../../../es/components-react/expressive-modal/expressive-modal-header.js';
+import C4DExpressiveModalCloseButton from '../../../../es/components-react/expressive-modal/expressive-modal-close-button.js';
+import C4DExpressiveModalHeading from '../../../../es/components-react/expressive-modal/expressive-modal-heading.js';
+import C4DExpressiveModalBody from '../../../../es/components-react/expressive-modal/expressive-modal-body.js';
+import C4DExpressiveModalFooter from '../../../../es/components-react/expressive-modal/expressive-modal-footer.js';
+import C4DButton from '../../../../es/components-react/button/button.js';
 import { action } from '@storybook/addon-actions';
 import { EXPRESSIVE_MODAL_SIZE } from '../defs';
 import readme from './README.stories.react.mdx';
@@ -43,16 +43,16 @@ export const Default = (args) => {
     }
   };
   return (
-    <DDSExpressiveModal
+    <C4DExpressiveModal
       open={open}
       expressive-size={size}
       onBeforeClose={handleBeforeClose}
       onClosed={onClose}>
-      <DDSExpressiveModalHeader>
-        <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-        <DDSExpressiveModalHeading>Modal Title</DDSExpressiveModalHeading>
-      </DDSExpressiveModalHeader>
-      <DDSExpressiveModalBody>
+      <C4DExpressiveModalHeader>
+        <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+        <C4DExpressiveModalHeading>Modal Title</C4DExpressiveModalHeading>
+      </C4DExpressiveModalHeader>
+      <C4DExpressiveModalBody>
         Quisque felis odio, egestas vel tempus iaculis, interdum vel eros.
         Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo,
         non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec
@@ -61,13 +61,13 @@ export const Default = (args) => {
         laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed
         nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis
         sapien eu nisl congue suscipit.
-      </DDSExpressiveModalBody>
-      <DDSExpressiveModalFooter>
-        <DDSButtonExpressive href="https://www.example.com">
+      </C4DExpressiveModalBody>
+      <C4DExpressiveModalFooter>
+        <C4DButton href="https://www.example.com">
           {buttonContent} <ArrowRight20 slot="icon" />
-        </DDSButtonExpressive>
-      </DDSExpressiveModalFooter>
-    </DDSExpressiveModal>
+        </C4DButton>
+      </C4DExpressiveModalFooter>
+    </C4DExpressiveModal>
   );
 };
 
@@ -79,12 +79,12 @@ export default {
       Modal: () => ({
         open: boolean('Open (open)', true),
         disableClose: boolean(
-          'Disable user-initiated close action (Call event.preventDefault() in dds-expressive-modal-beingclosed event)',
+          'Disable user-initiated close action (Call event.preventDefault() in cds-expressive-modal-beingclosed event)',
           false
         ),
         size: select('Modal size (size)', sizes, null),
-        onBeforeClose: action('dds-expressive-modal-beingclosed'),
-        onClose: action('dds-expressive-modal-closed'),
+        onBeforeClose: action('cds-expressive-modal-beingclosed'),
+        onClose: action('cds-expressive-modal-closed'),
       }),
       Other: () => ({
         buttonContent: textNullable('Button content', 'Lorem ipsum dolor'),
@@ -96,8 +96,8 @@ export default {
           open: true,
           disableClose: false,
           size: null,
-          onBeforeClose: 'dds-expressive-modal-beingclosed',
-          onClose: 'dds-expressive-modal-closed',
+          onBeforeClose: 'cds-expressive-modal-beingclosed',
+          onClose: 'cds-expressive-modal-closed',
         },
         Other: {
           buttonContent: 'Lorem ipsum dolor',
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.scss b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.scss
index 2add2313dae..849df1a166d 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.scss
+++ b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.scss
@@ -6,7 +6,7 @@
 //
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-.sbdocs-preview dds-expressive-modal {
+.sbdocs-preview cds-expressive-modal {
   width: 100%;
   height: 100%;
 }
diff --git a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.ts b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.ts
index 390c0ab5c62..b9ac9c922ab 100644
--- a/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.ts
+++ b/packages/web-components/src/components/expressive-modal/__stories__/expressive-modal.stories.ts
@@ -7,16 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import '../../../internal/vendor/@carbon/web-components/components/button/button.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import { EXPRESSIVE_MODAL_SIZE } from '../defs';
 import '../index';
-import '../../button/button';
 import styles from './expressive-modal.stories.scss';
 import readme from './README.stories.mdx';
 
@@ -40,16 +38,16 @@ export const Default = (args) => {
     <style>
       ${styles}
     </style>
-    <dds-expressive-modal
+    <c4d-expressive-modal
       ?open="${open}"
-      expressive-size="${ifNonNull(size)}"
-      @dds-expressive-modal-beingclosed="${handleBeforeClose}"
-      @dds-expressive-modal-closed="${onClose}">
-      <dds-expressive-modal-header>
-        <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-        <dds-expressive-modal-heading>Modal Title</dds-expressive-modal-heading>
-      </dds-expressive-modal-header>
-      <dds-expressive-modal-body>
+      expressive-size="${ifDefined(size)}"
+      @c4d-expressive-modal-beingclosed="${handleBeforeClose}"
+      @c4d-expressive-modal-closed="${onClose}">
+      <c4d-expressive-modal-header>
+        <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+        <c4d-expressive-modal-heading>Modal Title</c4d-expressive-modal-heading>
+      </c4d-expressive-modal-header>
+      <c4d-expressive-modal-body>
         Quisque felis odio, egestas vel tempus iaculis, interdum vel eros.
         Phasellus pharetra, purus et pretium posuere, ipsum risus pulvinar leo,
         non rutrum tortor risus vitae quam. Nulla sed nibh felis. Maecenas nec
@@ -58,13 +56,13 @@ export const Default = (args) => {
         laoreet, vitae facilisis ante convallis. Aenean quis dapibus augue. Sed
         nisl dui, scelerisque et augue eget, pharetra commodo elit. In venenatis
         sapien eu nisl congue suscipit.
-      </dds-expressive-modal-body>
-      <dds-expressive-modal-footer>
-        <dds-button-expressive href="https://www.example.com">
+      </c4d-expressive-modal-body>
+      <c4d-expressive-modal-footer>
+        <c4d-button href="https://www.example.com">
           ${buttonContent}${ArrowRight20({ slot: 'icon' })}
-        </dds-button-expressive>
-      </dds-expressive-modal-footer>
-    </dds-expressive-modal>
+        </c4d-button>
+      </c4d-expressive-modal-footer>
+    </c4d-expressive-modal>
   `;
 };
 
@@ -76,12 +74,12 @@ export default {
       Modal: () => ({
         open: boolean('Open (open)', true),
         disableClose: boolean(
-          'Disable user-initiated close action (Call event.preventDefault() in dds-expressive-modal-beingclosed event)',
+          'Disable user-initiated close action (Call event.preventDefault() in c4d-expressive-modal-beingclosed event)',
           false
         ),
         size: select('Modal size (size)', sizes, null),
-        onBeforeClose: action('dds-expressive-modal-beingclosed'),
-        onClose: action('dds-expressive-modal-closed'),
+        onBeforeClose: action('c4d-expressive-modal-beingclosed'),
+        onClose: action('c4d-expressive-modal-closed'),
       }),
       Other: () => ({
         buttonContent: textNullable('Button content', 'Lorem ipsum dolor'),
@@ -93,8 +91,8 @@ export default {
           open: true,
           disableClose: false,
           size: null,
-          onBeforeClose: 'dds-expressive-modal-beingclosed',
-          onClose: 'dds-expressive-modal-closed',
+          onBeforeClose: 'c4d-expressive-modal-beingclosed',
+          onClose: 'c4d-expressive-modal-closed',
         },
         Other: {
           buttonContent: 'Lorem ipsum dolor',
diff --git a/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.steps.js b/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.steps.js
index c346df98212..71414bbcbee 100644
--- a/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.steps.js
+++ b/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.steps.js
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-describe('dds-expressive-modal', () => {
+describe('cds-expressive-modal', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-expressive-modal--default`
@@ -15,9 +15,9 @@ describe('dds-expressive-modal', () => {
   });
 
   it('should have modal closable', async () => {
-    await page.click('dds-expressive-modal-close-button button');
+    await page.click('cds-expressive-modal-close-button button');
     await expect(page).toHaveSelector(
-      'dds-expressive-modal .bx--modal-container',
+      'cds-expressive-modal .cds--modal-container',
       { state: 'hidden' }
     );
   });
diff --git a/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.test.ts b/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.test.ts
index 5609a4cfb09..fb1ee7b15a5 100644
--- a/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.test.ts
+++ b/packages/web-components/src/components/expressive-modal/__tests__/expressive-modal.test.ts
@@ -7,11 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import EventManager from '../../../../tests/utils/event-manager';
-import DDSExpressiveModal from '../expressive-modal';
+import C4DExpressiveModal from '../expressive-modal';
 import '../../../internal/vendor/@carbon/web-components/components/button/button';
-import BXModalCloseButton from '../../../internal/vendor/@carbon/web-components/components/modal/modal-close-button';
+import CDSModalCloseButton from '../../../internal/vendor/@carbon/web-components/components/modal/modal-close-button';
 import { EXPRESSIVE_MODAL_SIZE } from '../defs';
 import { Default } from '../__stories__/expressive-modal.stories';
 
@@ -20,7 +20,7 @@ const template = (props?) =>
     Modal: props,
   });
 
-describe('dds-expressive-modal', function () {
+describe('c4d-expressive-modal', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
@@ -31,7 +31,7 @@ describe('dds-expressive-modal', function () {
       await Promise.resolve(); // Update cycle for `_hasBody`
       await Promise.resolve(); // Update cycle for `_hasFooter`
       expect(
-        document.body.querySelector('dds-expressive-modal')
+        document.body.querySelector('c4d-expressive-modal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -48,7 +48,7 @@ describe('dds-expressive-modal', function () {
       await Promise.resolve(); // Update cycle for `_hasBody`
       await Promise.resolve(); // Update cycle for `_hasFooter`
       expect(
-        document.body.querySelector('dds-expressive-modal')
+        document.body.querySelector('c4d-expressive-modal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -57,9 +57,9 @@ describe('dds-expressive-modal', function () {
     it('should render with header only', async function () {
       render(
         html`
-          <dds-expressive-modal>
-            <dds-expressive-modal-header></dds-expressive-modal-header>
-          </dds-expressive-modal>
+          <c4d-expressive-modal>
+            <c4d-expressive-modal-header></c4d-expressive-modal-header>
+          </c4d-expressive-modal>
         `,
         document.body
       );
@@ -68,17 +68,17 @@ describe('dds-expressive-modal', function () {
       await Promise.resolve(); // Update cycle for `_hasBody`
       await Promise.resolve(); // Update cycle for `_hasFooter`
       expect(
-        document.body.querySelector('dds-expressive-modal')
+        document.body.querySelector('c4d-expressive-modal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
     it('should render with header and body only', async function () {
       render(
         html`
-          <dds-expressive-modal>
-            <dds-expressive-modal-header></dds-expressive-modal-header>
-            <dds-expressive-modal-body></dds-expressive-modal-body>
-          </dds-expressive-modal>
+          <c4d-expressive-modal>
+            <c4d-expressive-modal-header></c4d-expressive-modal-header>
+            <c4d-expressive-modal-body></c4d-expressive-modal-body>
+          </c4d-expressive-modal>
         `,
         document.body
       );
@@ -87,17 +87,17 @@ describe('dds-expressive-modal', function () {
       await Promise.resolve(); // Update cycle for `_hasBody`
       await Promise.resolve(); // Update cycle for `_hasFooter`
       expect(
-        document.body.querySelector('dds-expressive-modal')
+        document.body.querySelector('c4d-expressive-modal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
     it('should render with header and footer only', async function () {
       render(
         html`
-          <dds-expressive-modal>
-            <dds-expressive-modal-header></dds-expressive-modal-header>
-            <dds-expressive-modal-footer></dds-expressive-modal-footer>
-          </dds-expressive-modal>
+          <c4d-expressive-modal>
+            <c4d-expressive-modal-header></c4d-expressive-modal-header>
+            <c4d-expressive-modal-footer></c4d-expressive-modal-footer>
+          </c4d-expressive-modal>
         `,
         document.body
       );
@@ -106,36 +106,36 @@ describe('dds-expressive-modal', function () {
       await Promise.resolve(); // Update cycle for `_hasBody`
       await Promise.resolve(); // Update cycle for `_hasFooter`
       expect(
-        document.body.querySelector('dds-expressive-modal')
+        document.body.querySelector('c4d-expressive-modal')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
 
-  describe('Showing/hiding', function () {
+  xdescribe('Showing/hiding', function () {
     it('Should support using Carbon core primary button in footer as the primary focus element', async function () {
       render(
         html`
-          <dds-expressive-modal>
+          <c4d-expressive-modal>
             <input type="text" />
-            <dds-expressive-modal-footer
-              ><bx-btn kind="primary"></bx-btn
-            ></dds-expressive-modal-footer>
-          </dds-expressive-modal>
+            <c4d-expressive-modal-footer
+              ><cds-btn kind="primary"></cds-btn
+            ></c4d-expressive-modal-footer>
+          </c4d-expressive-modal>
         `,
         document.body
       );
       await Promise.resolve();
       const modal = document.querySelector(
-        'dds-expressive-modal'
-      ) as DDSExpressiveModal;
+        'c4d-expressive-modal'
+      ) as C4DExpressiveModal;
       const input = modal.querySelector('input') as HTMLInputElement;
-      const button = modal.querySelector('bx-btn') as HTMLButtonElement;
+      const button = modal.querySelector('cds-btn') as HTMLButtonElement;
       spyOn(modal as any, '_waitForTransitionEnd').and.callFake(() => {});
       spyOn(input, 'focus');
       spyOn(button, 'focus');
       modal.open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<bx-modal>`
-      await Promise.resolve(); // `update()` in `<bx-modal>` waits for child nodes' update cycles to run
+      await Promise.resolve(); // For triggering the update cycle of `<cds-modal>`
+      await Promise.resolve(); // `update()` in `<cds-modal>` waits for child nodes' update cycles to run
       expect(input.focus).not.toHaveBeenCalled();
       expect(button.focus).toHaveBeenCalled();
     });
@@ -143,29 +143,27 @@ describe('dds-expressive-modal', function () {
     it('Should support using primary button in footer as the primary focus element', async function () {
       render(
         html`
-          <dds-expressive-modal>
+          <c4d-expressive-modal>
             <input type="text" />
-            <dds-expressive-modal-footer
-              ><dds-button-expressive kind="primary"></dds-button-expressive
-            ></dds-expressive-modal-footer>
-          </dds-expressive-modal>
+            <c4d-expressive-modal-footer
+              ><c4d-button kind="primary"></c4d-button
+            ></c4d-expressive-modal-footer>
+          </c4d-expressive-modal>
         `,
         document.body
       );
       await Promise.resolve();
       const modal = document.querySelector(
-        'dds-expressive-modal'
-      ) as DDSExpressiveModal;
+        'c4d-expressive-modal'
+      ) as C4DExpressiveModal;
       const input = modal.querySelector('input') as HTMLInputElement;
-      const button = modal.querySelector(
-        'dds-button-expressive'
-      ) as HTMLButtonElement;
+      const button = modal.querySelector('c4d-button') as HTMLButtonElement;
       spyOn(modal as any, '_waitForTransitionEnd').and.callFake(() => {});
       spyOn(input, 'focus');
       spyOn(button, 'focus');
       modal.open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<dds-expressive-modal>`
-      await Promise.resolve(); // `update()` in `<dds-expressive-modal>` waits for child nodes' update cycles to run
+      await Promise.resolve(); // For triggering the update cycle of `<c4d-expressive-modal>`
+      await Promise.resolve(); // `update()` in `<c4d-expressive-modal>` waits for child nodes' update cycles to run
       expect(input.focus).not.toHaveBeenCalled();
       expect(button.focus).toHaveBeenCalled();
     });
@@ -173,25 +171,25 @@ describe('dds-expressive-modal', function () {
     it('Should support specifying the primary focus element', async function () {
       render(
         html`
-          <dds-expressive-modal>
+          <c4d-expressive-modal>
             <input type="text" />
             <button data-modal-primary-focus></button>
-          </dds-expressive-modal>
+          </c4d-expressive-modal>
         `,
         document.body
       );
       await Promise.resolve();
       const modal = document.querySelector(
-        'dds-expressive-modal'
-      ) as DDSExpressiveModal;
+        'c4d-expressive-modal'
+      ) as C4DExpressiveModal;
       const input = modal.querySelector('input') as HTMLInputElement;
       const button = modal.querySelector('button') as HTMLButtonElement;
       spyOn(modal as any, '_waitForTransitionEnd').and.callFake(() => {});
       spyOn(input, 'focus');
       spyOn(button, 'focus');
       modal.open = true;
-      await Promise.resolve(); // For triggering the update cycle of `<dds-expressive-modal>`
-      await Promise.resolve(); // `update()` in `<dds-expressive-modal>` waits for child nodes' update cycles to run
+      await Promise.resolve(); // For triggering the update cycle of `<c4d-expressive-modal>`
+      await Promise.resolve(); // `update()` in `<c4d-expressive-modal>` waits for child nodes' update cycles to run
       expect(input.focus).not.toHaveBeenCalled();
       expect(button.focus).toHaveBeenCalled();
     });
@@ -199,19 +197,19 @@ describe('dds-expressive-modal', function () {
     it('Should support Carbon core close button', async function () {
       render(
         html`
-          <dds-expressive-modal open
-            ><bx-modal-close-button></bx-modal-close-button
-          ></dds-expressive-modal>
+          <c4d-expressive-modal open
+            ><cds-modal-close-button></cds-modal-close-button
+          ></c4d-expressive-modal>
         `,
         document.body
       );
       await Promise.resolve();
       (
-        document.querySelector('bx-modal-close-button') as BXModalCloseButton
+        document.querySelector('cds-modal-close-button') as CDSModalCloseButton
       ).click();
       await Promise.resolve();
       expect(
-        (document.querySelector('dds-expressive-modal') as DDSExpressiveModal)
+        (document.querySelector('c4d-expressive-modal') as C4DExpressiveModal)
           .open
       ).toBeFalsy();
     });
@@ -219,21 +217,21 @@ describe('dds-expressive-modal', function () {
     it('Should support close button', async function () {
       render(
         html`
-          <dds-expressive-modal open
-            ><dds-expressive-modal-close-button></dds-expressive-modal-close-button
-          ></dds-expressive-modal>
+          <c4d-expressive-modal open
+            ><c4d-expressive-modal-close-button></c4d-expressive-modal-close-button
+          ></c4d-expressive-modal>
         `,
         document.body
       );
       await Promise.resolve();
       (
         document.querySelector(
-          'dds-expressive-modal-close-button'
+          'c4d-expressive-modal-close-button'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       expect(
-        (document.querySelector('dds-expressive-modal') as DDSExpressiveModal)
+        (document.querySelector('c4d-expressive-modal') as C4DExpressiveModal)
           .open
       ).toBeFalsy();
     });
@@ -241,9 +239,9 @@ describe('dds-expressive-modal', function () {
     it('Should support custom close button', async function () {
       render(
         html`
-          <dds-expressive-modal open
+          <c4d-expressive-modal open
             ><button data-modal-close></button
-          ></dds-expressive-modal>
+          ></c4d-expressive-modal>
         `,
         document.body
       );
@@ -251,7 +249,7 @@ describe('dds-expressive-modal', function () {
       (document.querySelector('[data-modal-close]') as HTMLElement).click();
       await Promise.resolve();
       expect(
-        (document.querySelector('dds-expressive-modal') as DDSExpressiveModal)
+        (document.querySelector('c4d-expressive-modal') as C4DExpressiveModal)
           .open
       ).toBeFalsy();
     });
@@ -263,17 +261,17 @@ describe('dds-expressive-modal', function () {
     beforeEach(async function () {
       render(template({ open: true }), document.body);
       await Promise.resolve();
-      elem = document.querySelector('dds-expressive-modal');
+      elem = document.querySelector('c4d-expressive-modal');
     });
 
     it('Should close the modal', async function () {
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'dds-expressive-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'dds-expressive-modal-closed', spyAfterClosed);
+      events.on(elem!, 'c4d-expressive-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'c4d-expressive-modal-closed', spyAfterClosed);
       elem!.click();
       await Promise.resolve();
-      expect((elem as DDSExpressiveModal).open).toBeFalsy();
+      expect((elem as C4DExpressiveModal).open).toBeFalsy();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
       const eventDataBeforeHidden = spyBeforeClosed.calls.argsFor(0)[0].detail;
@@ -285,11 +283,11 @@ describe('dds-expressive-modal', function () {
     it('Should provide a way to prevent the modal from being closed', async function () {
       const spyBeforeClosed = jasmine.createSpy('before closed');
       const spyAfterClosed = jasmine.createSpy('after closed');
-      events.on(elem!, 'dds-expressive-modal-beingclosed', spyBeforeClosed);
-      events.on(elem!, 'dds-expressive-modal-closed', spyAfterClosed);
+      events.on(elem!, 'c4d-expressive-modal-beingclosed', spyBeforeClosed);
+      events.on(elem!, 'c4d-expressive-modal-closed', spyAfterClosed);
       elem!.click();
       await Promise.resolve();
-      expect((elem as DDSExpressiveModal).open).toBeFalsy();
+      expect((elem as C4DExpressiveModal).open).toBeFalsy();
       expect(spyBeforeClosed).toHaveBeenCalled();
       expect(spyAfterClosed).toHaveBeenCalled();
       const eventDataBeforeHidden = spyBeforeClosed.calls.argsFor(0)[0].detail;
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal-body.ts b/packages/web-components/src/components/expressive-modal/expressive-modal-body.ts
index d1b6383e9d9..441614491e2 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal-body.ts
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal-body.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXModalBody from '../../internal/vendor/@carbon/web-components/components/modal/modal-body.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSModalBody from '../../internal/vendor/@carbon/web-components/components/modal/modal-body.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './expressive-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Expressive modal body.
  *
- * @element dds-expressive-modal-body
+ * @element c4d-expressive-modal-body
  */
-@customElement(`${ddsPrefix}-expressive-modal-body`)
-class DDSExpressiveModalBody extends StableSelectorMixin(BXModalBody) {
+@customElement(`${c4dPrefix}-expressive-modal-body`)
+class C4DExpressiveModalBody extends StableSelectorMixin(CDSModalBody) {
   static get stableSelector() {
-    return `${ddsPrefix}--expressive-modal-body`;
+    return `${c4dPrefix}--expressive-modal-body`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSExpressiveModalBody;
+export default C4DExpressiveModalBody;
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal-close-button.ts b/packages/web-components/src/components/expressive-modal/expressive-modal-close-button.ts
index f48b136d077..99e9ef39ffd 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal-close-button.ts
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal-close-button.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXModalCloseButton from '../../internal/vendor/@carbon/web-components/components/modal/modal-close-button.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import CDSModalCloseButton from '../../internal/vendor/@carbon/web-components/components/modal/modal-close-button.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { EXPRESSIVE_MODAL_SIZE } from './defs';
 import styles from './expressive-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Expressive modal close button.
  *
- * @element dds-expressive-modal-close-button
+ * @element c4d-expressive-modal-close-button
  */
-@customElement(`${ddsPrefix}-expressive-modal-close-button`)
-class DDSExpressiveModalCloseButton extends StableSelectorMixin(
-  BXModalCloseButton
+@customElement(`${c4dPrefix}-expressive-modal-close-button`)
+class C4DExpressiveModalCloseButton extends StableSelectorMixin(
+  CDSModalCloseButton
 ) {
   /**
    * The size variant.
@@ -33,11 +33,11 @@ class DDSExpressiveModalCloseButton extends StableSelectorMixin(
   size = EXPRESSIVE_MODAL_SIZE.REGULAR;
 
   static get stableSelector() {
-    return `${ddsPrefix}--expressive-modal-close-button`;
+    return `${c4dPrefix}--expressive-modal-close-button`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSExpressiveModalCloseButton;
+export default C4DExpressiveModalCloseButton;
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal-footer.ts b/packages/web-components/src/components/expressive-modal/expressive-modal-footer.ts
index 99c5ca12d04..154ee34d25a 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal-footer.ts
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal-footer.ts
@@ -7,34 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXModalFooter from '../../internal/vendor/@carbon/web-components/components/modal/modal-footer.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import CDSModalFooter from '../../internal/vendor/@carbon/web-components/components/modal/modal-footer.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './expressive-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Expressive modal footer.
  *
- * @element dds-expressive-modal-footer
+ * @element c4d-expressive-modal-footer
  */
-@customElement(`${ddsPrefix}-expressive-modal-footer`)
-class DDSExpressiveModalFooter extends StableSelectorMixin(BXModalFooter) {
+@customElement(`${c4dPrefix}-expressive-modal-footer`)
+class C4DExpressiveModalFooter extends StableSelectorMixin(CDSModalFooter) {
   /**
-   * The slot in parent `<dds-modal>`.
+   * The slot in parent `<c4d-modal>`.
    */
   @property({ reflect: true })
   slot = 'footer';
 
   static get stableSelector() {
-    return `${ddsPrefix}--expressive-modal-footer`;
+    return `${c4dPrefix}--expressive-modal-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSExpressiveModalFooter;
+export default C4DExpressiveModalFooter;
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal-header.ts b/packages/web-components/src/components/expressive-modal/expressive-modal-header.ts
index 9b24c6b5077..b4756032bde 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal-header.ts
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal-header.ts
@@ -7,31 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXModalHeader from '../../internal/vendor/@carbon/web-components/components/modal/modal-header.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import CDSModalHeader from '../../internal/vendor/@carbon/web-components/components/modal/modal-header.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './expressive-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Expressive modal header.
  *
- * @element dds-expressive-modal-header
+ * @element c4d-expressive-modal-header
  */
-@customElement(`${ddsPrefix}-expressive-modal-header`)
-class DDSExpressiveModalHeader extends StableSelectorMixin(BXModalHeader) {
+@customElement(`${c4dPrefix}-expressive-modal-header`)
+class C4DExpressiveModalHeader extends StableSelectorMixin(CDSModalHeader) {
   @property({ reflect: true })
   slot = 'header';
 
   static get stableSelector() {
-    return `${ddsPrefix}--expressive-modal-header`;
+    return `${c4dPrefix}--expressive-modal-header`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSExpressiveModalHeader;
+export default C4DExpressiveModalHeader;
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal-heading.ts b/packages/web-components/src/components/expressive-modal/expressive-modal-heading.ts
index 9480914bd0b..963c101f965 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal-heading.ts
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal-heading.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXModalHeading from '../../internal/vendor/@carbon/web-components/components/modal/modal-heading.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSModalHeading from '../../internal/vendor/@carbon/web-components/components/modal/modal-heading.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './expressive-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Expressive modal heading.
  *
- * @element dds-expressive-modal-heading
+ * @element c4d-expressive-modal-heading
  */
-@customElement(`${ddsPrefix}-expressive-modal-heading`)
-class DDSExpressiveModalHeading extends StableSelectorMixin(BXModalHeading) {
+@customElement(`${c4dPrefix}-expressive-modal-heading`)
+class C4DExpressiveModalHeading extends StableSelectorMixin(CDSModalHeading) {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'heading');
@@ -33,11 +33,11 @@ class DDSExpressiveModalHeading extends StableSelectorMixin(BXModalHeading) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--expressive-modal-heading`;
+    return `${c4dPrefix}--expressive-modal-heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSExpressiveModalHeading;
+export default C4DExpressiveModalHeading;
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.scss b/packages/web-components/src/components/expressive-modal/expressive-modal.scss
index 954cfe218ad..9302639a3ba 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal.scss
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal.scss
@@ -1,82 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/expressive-modal/expressive-modal';
-@import '@carbon/web-components/scss/components/modal/modal';
-@import '../../globals/scss/box-sizing';
-
-:host(#{$dds-prefix}-expressive-modal) {
-  @extend :host(#{$prefix}-modal);
-
-  &[open] {
-    @extend :host(#{$prefix}-modal[open]);
-  }
-
-  &[expressive-size='full-width'] {
-    .#{$prefix}--modal-container {
-      max-height: none;
-
-      @include carbon--breakpoint('md') {
-        width: calc(100% - 2rem);
-        height: calc(100% - 2rem);
-      }
-
-      .#{$prefix}--modal-content {
-        padding: 0;
-      }
-    }
-  }
-
-  .#{$prefix}--modal-container {
-    grid-template-rows: 1fr;
-  }
-
-  .#{$prefix}--modal-content {
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-  }
-
-  .#{$dds-prefix}-ce--modal__header--with-body {
-    margin-bottom: $spacing-05;
-  }
-
-  .#{$dds-prefix}-ce--modal__body {
-    width: 100%;
-  }
-
-  .#{$dds-prefix}-ce--modal__body--with-footer {
-    margin-bottom: $spacing-09;
-  }
-}
-
-:host(#{$dds-prefix}-expressive-modal-header),
-:host(#{$dds-prefix}-expressive-modal-heading),
-:host(#{$dds-prefix}-expressive-modal-footer) {
-  display: block;
-}
-
-:host(#{$dds-prefix}-expressive-modal-header) {
-  padding: 0;
-}
-
-:host(#{$dds-prefix}-expressive-modal-close-button) {
-  display: inline;
-}
-
-:host(#{$dds-prefix}-expressive-modal-body),
-:host(#{$dds-prefix}-lightbox-media-viewer-body) {
-  @include carbon--type-style('body-long-02');
-}
-
-:host(#{$dds-prefix}-expressive-modal)[mode='lightbox'] {
-  .#{$prefix}--modal-container {
-    @include carbon--breakpoint-down('md') {
-      padding: 0 $spacing-05;
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/expressive-modal';
diff --git a/packages/web-components/src/components/expressive-modal/expressive-modal.ts b/packages/web-components/src/components/expressive-modal/expressive-modal.ts
index e338897673f..c7f92e48149 100644
--- a/packages/web-components/src/components/expressive-modal/expressive-modal.ts
+++ b/packages/web-components/src/components/expressive-modal/expressive-modal.ts
@@ -7,32 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  html,
-  LitElement,
-  property,
-  query,
-  state,
-  SVGTemplateResult,
-  TemplateResult,
-} from 'lit-element';
+import { html, LitElement, SVGTemplateResult, TemplateResult } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import { EXPRESSIVE_MODAL_MODE, EXPRESSIVE_MODAL_SIZE } from './defs';
-
-import { classMap } from 'lit-html/directives/class-map.js';
-import DDSCarousel from '../carousel/carousel';
-import DDSExpressiveModalCloseButton from './expressive-modal-close-button';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import C4DCarousel from '../carousel/carousel';
+import C4DExpressiveModalCloseButton from './expressive-modal-close-button';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import on from 'carbon-components/es/globals/js/misc/on.js';
+import on from '../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
 import { selectorTabbable } from '../../internal/vendor/@carbon/web-components/globals/settings.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './expressive-modal.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /* eslint-disable no-bitwise */
 const PRECEDING =
@@ -65,16 +55,16 @@ const slotExistencePropertyNames = {
 /**
  * Expressive modal.
  *
- * @element dds-expressive-modal
- * @fires dds-expressive-modal-beingclosed
+ * @element c4d-expressive-modal
+ * @fires c4d-expressive-modal-beingclosed
  *   The custom event fired before this modal is being closed upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of closing this modal.
- * @fires dds-expressive-modal-closed - The custom event fired after this modal is closed upon a user gesture.
+ * @fires c4d-expressive-modal-closed - The custom event fired after this modal is closed upon a user gesture.
  * @slot header - The header content.
  * @slot footer - The footer content.
  */
-@customElement(`${ddsPrefix}-expressive-modal`)
-class DDSExpressiveModal extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-expressive-modal`)
+class C4DExpressiveModal extends StableSelectorMixin(
   HostListenerMixin(LitElement)
 ) {
   /**
@@ -103,14 +93,14 @@ class DDSExpressiveModal extends StableSelectorMixin(
   /**
    * Collection of elements to search for focusable elements.
    */
-  hasFocusableElements: [DDSExpressiveModal | DDSCarousel] = [this];
+  hasFocusableElements: [C4DExpressiveModal | C4DCarousel] = [this];
 
   /**
    * Returns all focusable elements within this component and its shadowroot
    */
   get focusableElements() {
     const { selectorCloseButton, selectorTabbable: selectorTabbableForModal } =
-      this.constructor as typeof DDSExpressiveModal;
+      this.constructor as typeof C4DExpressiveModal;
     return [
       ...Array.from(
         (this.shadowRoot?.querySelectorAll(
@@ -127,7 +117,6 @@ class DDSExpressiveModal extends StableSelectorMixin(
 
   get _focusableElements() {
     const { hasFocusableElements } = this;
-
     const focusableElements: [HTMLElement?] = [];
 
     hasFocusableElements.forEach((el) => {
@@ -168,7 +157,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
   @query(`.${prefix}--modal-content`)
   modalContent?: HTMLDivElement;
 
-  @query(`.${ddsPrefix}-ce--modal__body`)
+  @query(`.${c4dPrefix}-ce--modal__body`)
   modalBody?: HTMLDivElement;
 
   // TODO: Wait for `.d.ts` update to support `ResizeObserver`
@@ -197,7 +186,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
    * @param event The event.
    */
   protected _handleFocusIn = ({ target, relatedTarget }) => {
-    const { tryFocusElems } = this.constructor as typeof DDSExpressiveModal;
+    const { tryFocusElems } = this.constructor as typeof C4DExpressiveModal;
     let focusFromWithin = false;
     if (target && relatedTarget) {
       const comparedToThis = this.compareDocumentPosition(relatedTarget);
@@ -239,7 +228,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
     // If no target/relatedTarget, focus has entered/left the window. Do nothing.
     if (!target || !relatedTarget) return;
 
-    const { tryFocusElems } = this.constructor as typeof DDSExpressiveModal;
+    const { tryFocusElems } = this.constructor as typeof C4DExpressiveModal;
     const { _focusableElements: focusableElements } = this;
 
     // See if element gaining focus is inside `this` or `this.shadowRoot`.
@@ -276,7 +265,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
   private _handleClickContainer(event: MouseEvent) {
     if (
       (event.target as Element).matches(
-        (this.constructor as typeof DDSExpressiveModal).selectorCloseButton
+        (this.constructor as typeof C4DExpressiveModal).selectorCloseButton
       )
     ) {
       this._handleUserInitiatedClose(event.target);
@@ -295,10 +284,10 @@ class DDSExpressiveModal extends StableSelectorMixin(
         if (node.nodeType === Node.TEXT_NODE && node!.textContent!.trim()) {
           return true;
         }
-        // Allow only element nodes that don't have a .bx--visually-hidden
+        // Allow only element nodes that don't have a .cds--visually-hidden
         // class.
         if (node instanceof Element) {
-          return !node.classList.contains('bx--visually-hidden');
+          return !node.classList.contains('cds--visually-hidden');
         }
         // No opinion on other cases.
         return true;
@@ -322,7 +311,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
         },
       };
       const { eventBeforeClose, eventClose } = this
-        .constructor as typeof DDSExpressiveModal;
+        .constructor as typeof C4DExpressiveModal;
       if (this.dispatchEvent(new CustomEvent(eventBeforeClose, init))) {
         this.open = false;
         this.dispatchEvent(new CustomEvent(eventClose, init));
@@ -364,11 +353,11 @@ class DDSExpressiveModal extends StableSelectorMixin(
       _hasFooter: hasFooter,
     } = this;
     const headerClasses = classMap({
-      [`${ddsPrefix}-ce--modal__header--with-body`]:
+      [`${c4dPrefix}-ce--modal__header--with-body`]:
         hasHeader && (hasBody || hasFooter),
     });
     return html`
-      <div id="${ddsPrefix}--modal-header" class="${headerClasses}">
+      <div id="${prefix}--modal-header" class="${headerClasses}">
         <slot name="header"></slot>
       </div>
     `;
@@ -380,8 +369,8 @@ class DDSExpressiveModal extends StableSelectorMixin(
   protected _renderBody(): TemplateResult | SVGTemplateResult | void {
     const { _hasBody: hasBody, _hasFooter: hasFooter } = this;
     const bodyClasses = classMap({
-      [`${ddsPrefix}-ce--modal__body`]: true,
-      [`${ddsPrefix}-ce--modal__body--with-footer`]: hasBody && hasFooter,
+      [`${c4dPrefix}-ce--modal__body`]: true,
+      [`${c4dPrefix}-ce--modal__body--with-footer`]: hasBody && hasFooter,
     });
     return html` <div class="${bodyClasses}"><slot></slot></div> `;
   }
@@ -446,7 +435,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
         class="${containerClasses}"
         tabindex="-1"
         role="dialog"
-        aria-labelledby="${ddsPrefix}--modal-header"
+        aria-labelledby="${c4dPrefix}--modal-header"
         @click="${handleClickContainer}"
         @slotchange="${handleSlotChange}">
         <div class="${prefix}--modal-content">
@@ -471,12 +460,12 @@ class DDSExpressiveModal extends StableSelectorMixin(
   async updated(changedProperties) {
     const { _focusableElements: focusableElements, size } = this;
     const { selectorCloseButton, tryFocusElems } = this
-      .constructor as typeof DDSExpressiveModal;
+      .constructor as typeof C4DExpressiveModal;
 
     if (changedProperties.has('size')) {
       const closeButton = this.querySelector(selectorCloseButton);
       if (closeButton) {
-        (closeButton as DDSExpressiveModalCloseButton).size = size;
+        (closeButton as C4DExpressiveModalCloseButton).size = size;
       }
     }
     if (changedProperties.has('open')) {
@@ -486,11 +475,11 @@ class DDSExpressiveModal extends StableSelectorMixin(
         this._launcher = this.ownerDocument!.activeElement;
         await this._waitForTransitionEnd();
         const primaryFocusNode = this.querySelector(
-          (this.constructor as typeof DDSExpressiveModal).selectorPrimaryFocus
+          (this.constructor as typeof C4DExpressiveModal).selectorPrimaryFocus
         );
         if (primaryFocusNode) {
-          // For cases where a `carbon-web-components` component (e.g. `<bx-btn>`) being `primaryFocusNode`,
-          // where its first update/render cycle that makes it focusable happens after `<bx-modal>`'s first update/render cycle
+          // For cases where a `carbon-web-components` component (e.g. `<cds-btn>`) being `primaryFocusNode`,
+          // where its first update/render cycle that makes it focusable happens after `<cds-modal>`'s first update/render cycle
           (primaryFocusNode as HTMLElement).focus();
         } else {
           tryFocusElems(focusableElements as [HTMLElement], true, this);
@@ -512,7 +501,7 @@ class DDSExpressiveModal extends StableSelectorMixin(
    * A selector selecting buttons that should close this modal.
    */
   static get selectorCloseButton() {
-    return `[data-modal-close],${prefix}-modal-close-button,${ddsPrefix}-expressive-modal-close-button`;
+    return `[data-modal-close],${prefix}-modal-close-button,${c4dPrefix}-expressive-modal-close-button`;
   }
 
   /**
@@ -521,9 +510,9 @@ class DDSExpressiveModal extends StableSelectorMixin(
   static get selectorTabbable() {
     return `
       ${selectorTabbable},
-      ${ddsPrefix}-button-expressive,
-      ${ddsPrefix}-expressive-modal,
-      ${ddsPrefix}-expressive-modal-close-button
+      ${c4dPrefix}-button,
+      ${c4dPrefix}-expressive-modal,
+      ${c4dPrefix}-expressive-modal-close-button
     `;
   }
 
@@ -533,13 +522,12 @@ class DDSExpressiveModal extends StableSelectorMixin(
   static get selectorPrimaryFocus() {
     return `
       [data-modal-primary-focus],
-      ${ddsPrefix}-expressive-modal-footer ${prefix}-btn[kind="primary"],
-      ${ddsPrefix}-expressive-modal-footer ${ddsPrefix}-button-expressive[kind="primary"]
+      ${c4dPrefix}-expressive-modal-footer ${c4dPrefix}-button[kind="primary"],
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--expressive-modal`;
+    return `${c4dPrefix}--expressive-modal`;
   }
 
   /**
@@ -547,14 +535,14 @@ class DDSExpressiveModal extends StableSelectorMixin(
    * Cancellation of this event stops the user-initiated action of closing this modal.
    */
   static get eventBeforeClose() {
-    return `${ddsPrefix}-expressive-modal-beingclosed`;
+    return `${c4dPrefix}-expressive-modal-beingclosed`;
   }
 
   /**
    * The name of the custom event fired after this modal is closed upon a user gesture.
    */
   static get eventClose() {
-    return `${ddsPrefix}-expressive-modal-closed`;
+    return `${c4dPrefix}-expressive-modal-closed`;
   }
 
   /**
@@ -607,4 +595,4 @@ class DDSExpressiveModal extends StableSelectorMixin(
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSExpressiveModal;
+export default C4DExpressiveModal;
diff --git a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large-footer.ts b/packages/web-components/src/components/feature-card-block-large/feature-card-block-large-footer.ts
deleted file mode 100644
index c726bbfc7b4..00000000000
--- a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large-footer.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSFeatureCardFooter from '../feature-card/feature-card-footer';
-import styles from './feature-card-block-large.scss';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Feature card block large footer.
- *
- * @element dds-feature-card-block-large-footer
- */
-@customElement(`${ddsPrefix}-feature-card-block-large-footer`)
-class DDSFeatureCardBlockLargeFooter extends DDSFeatureCardFooter {
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default DDSFeatureCardBlockLargeFooter;
diff --git a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.scss b/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.scss
deleted file mode 100644
index b90fad3abce..00000000000
--- a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card-block-large/feature-card-block-large';
-@import '../feature-card/feature-card';
-
-:host(#{$dds-prefix}-feature-card-block-large) {
-  display: block;
-}
-
-:host(#{$dds-prefix}-feature-card-block-large-footer) {
-  display: flex;
-  justify-content: flex-start;
-}
diff --git a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts b/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts
deleted file mode 100644
index edadf31919e..00000000000
--- a/packages/web-components/src/components/feature-card-block-large/feature-card-block-large.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import DDSFeatureCard from '../feature-card/feature-card';
-import '../image/image';
-import styles from './feature-card-block-large.scss';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Feature Card Block Large.
- *
- * @element dds-feature-card-block-large
- */
-@customElement(`${ddsPrefix}-feature-card-block-large`)
-class DDSFeatureCardBlockLarge extends StableSelectorMixin(DDSFeatureCard) {
-  render() {
-    return html`
-      <div class="${prefix}--feature-card-block-large__container">
-        ${super.render()}
-      </div>
-    `;
-  }
-
-  updated(changedProperties) {
-    super.updated(changedProperties);
-    const { _linkNode: linkNode } = this;
-    if (linkNode) {
-      linkNode.classList.remove(`${prefix}--feature-card`);
-      linkNode.classList.add(`${prefix}--feature-card-block-large`);
-    }
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--feature-card-block-large`;
-  }
-
-  static styles = styles;
-}
-
-export default deprecate(
-  DDSFeatureCardBlockLarge,
-  `The FeatureCardBlockLarge component has been deprecated in favor of the FeatureCard component. ` +
-    `See FeatureCard's size attribute documentation for more information.`
-);
diff --git a/packages/web-components/src/components/feature-card-block-large/index.ts b/packages/web-components/src/components/feature-card-block-large/index.ts
deleted file mode 100644
index 32e02a53861..00000000000
--- a/packages/web-components/src/components/feature-card-block-large/index.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-/**
- * @license
- *
- * 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 './feature-card-block-large';
-import './feature-card-block-large-footer';
-import '../card/card-eyebrow';
-import '../card/card-heading';
-import '../image/image';
diff --git a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium-block-heading.ts b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium-block-heading.ts
deleted file mode 100644
index e5f94df5514..00000000000
--- a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium-block-heading.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import styles from './feature-card-block-medium.scss';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The block heading content of feature card block medium.
- *
- * @element dds-feature-card-block-medium-block-heading
- */
-@customElement(`${ddsPrefix}-feature-card-block-medium-block-heading`)
-class DDSFeatureCardBlockMediumBlockHeading extends LitElement {
-  /**
-   * The shadow slot this block heading should be in.
-   */
-  @property({ reflect: true })
-  slot = 'block-heading';
-
-  connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'heading');
-    }
-    if (!this.hasAttribute('aria-level')) {
-      this.setAttribute('aria-level', '3');
-    }
-    super.connectedCallback();
-  }
-
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  // `styles` here is a `CSSResult` generated by custom WebPack loader
-  static styles = styles;
-}
-
-export default DDSFeatureCardBlockMediumBlockHeading;
diff --git a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.scss b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.scss
deleted file mode 100644
index 2c42ec8f088..00000000000
--- a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.scss
+++ /dev/null
@@ -1,21 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card';
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card-block-medium/feature-card-block-medium';
-@import '../feature-card/feature-card.scss';
-
-:host(#{$dds-prefix}-feature-card-block-medium) {
-  display: block;
-
-  @include carbon--breakpoint-down('md') {
-    padding-top: 0;
-  }
-}
diff --git a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts b/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts
deleted file mode 100644
index ffcd15db5ca..00000000000
--- a/packages/web-components/src/components/feature-card-block-medium/feature-card-block-medium.ts
+++ /dev/null
@@ -1,61 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import DDSFeatureCard from '../feature-card/feature-card';
-import styles from './feature-card-block-medium.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Feature Card Block Medium
- *
- * @element dds-feature-card-block-medium
- * @slot block-heading - The block heading content.
- */
-@customElement(`${ddsPrefix}-feature-card-block-medium`)
-class DDSFeatureCardBlockMedium extends DDSFeatureCard {
-  protected _renderInner() {
-    return html` ${this._renderImage()}${super._renderInner()} `;
-  }
-
-  /**
-   * @returns The copy content.
-   */
-  protected _renderCopy() {
-    return html` <slot @slotchange="${this._handleSlotChange}"></slot> `;
-  }
-
-  render() {
-    return html`
-      <slot name="block-heading"></slot>
-      <div
-        class="${prefix}--feature-card"
-        data-autoid="${ddsPrefix}--feature-card">
-        ${super.render()}
-      </div>
-    `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--feature-card-block-medium`;
-  }
-
-  static styles = styles;
-}
-export default deprecate(
-  DDSFeatureCardBlockMedium,
-  `The FeatureCardBlockMedium component has been deprecated in favor of the FeatureCard component. ` +
-    `See FeatureCard's size attribute documentation for more information.`
-);
diff --git a/packages/web-components/src/components/feature-card-block-medium/index.ts b/packages/web-components/src/components/feature-card-block-medium/index.ts
deleted file mode 100644
index 953baea5df2..00000000000
--- a/packages/web-components/src/components/feature-card-block-medium/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @license
- *
- * 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 './feature-card-block-medium';
-import './feature-card-block-medium-block-heading';
-import '../card/card-eyebrow';
-import '../card/card-heading';
-import '../image/image';
-import '../feature-card/feature-card-footer';
diff --git a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
index 698ecc3e9e0..874df8d5a9e 100644
--- a/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/feature-card/__stories__/README.stories.mdx
@@ -1,11 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Feature Card
 
 > 💡 Check our
@@ -31,10 +32,10 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card/index.js';
 ### HTML
 
 ```html
-<dds-feature-card href="https://example.com">
+<cds-feature-card href="https://example.com">
   <img />
-  <dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
-  <dds-feature-card-footer>
+  <cds-card-heading>Explore AI use cases in all industries</cds-card-heading>
+  <cds-feature-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -44,23 +45,27 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-card/index.js';
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-feature-card-footer>
-</dds-feature-card>
+  </cds-feature-card-footer>
+</cds-feature-card>
 ```
 
-Here's an example using the Feature Card Large variant (previously known as `FeatureCardBlockLarge`)
+Here's an example using the Feature Card Large variant (previously known as
+`FeatureCardBlockLarge`)
 
 ```html
-<dds-feature-card size='large' href="https://example.com">
+<cds-feature-card size="large" href="https://example.com">
   <img />
-  <dds-card-eyebrow>This is an eyebrow</dds-card-eyebrow>
-  <dds-card-heading>Explore AI use cases in all industries</dds-card-heading>
-  <dds-card-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</dds-card-copy>
-  <dds-feature-card-footer>
+  <cds-card-eyebrow>This is an eyebrow</cds-card-eyebrow>
+  <cds-card-heading>Explore AI use cases in all industries</cds-card-heading>
+  <cds-card-copy
+    >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+    tempor incididunt ut labore et dolore magna aliqua.</cds-card-copy
+  >
+  <cds-feature-card-footer>
     <svg
       slot="icon"
       focusable="false"
@@ -70,24 +75,56 @@ Here's an example using the Feature Card Large variant (previously known as `Fea
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-feature-card-footer>
-</dds-feature-card>
+  </cds-feature-card-footer>
+</cds-feature-card>
 ```
 
+### CTA features
+
+The `cta-type` attribute allows every type of CTA and icon available in the
+Carbon for IBM.com library. The default CTA style is `local`, which provides a
+basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the
+following:
+
+- local
+- jump
+- external
+- new tab
+- download
+- video
+- pdf
+- blog
+- email
+- schedule
+- chat
+- call
+
+Notes:
+
+- When using `video`, you need to pass the video ID as the `href` attribute.
+- The Feature Card component will need to be wrapped within a
+  `cds-video-cta-container` components for videos to play.
+- Custom icons can replace the built-in ones within `cds-card-footer`, they only
+  need to be assigned to the `icon` slot.
+
 ## Props
 
-<Props of="dds-feature-card" />
+<Props of="cds-feature-card" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<dds-feature-card>`    | `data-autoid="dds--feature-card"` | Component   |
+| `<cds-feature-card>`    | `data-autoid="cds--feature-card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx b/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx
index e18913a370f..b20a8bd1f0a 100644
--- a/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/feature-card/__stories__/README.stories.react.mdx
@@ -23,21 +23,21 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
-import DDSFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
+import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 import mediumImgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
 
 function App() {
   return (
-    <DDSFeatureCard href="https://www.example.com">
-      <DDSImage alt="Image alt text" defaultSrc={mediumImgLg1x1} slot="image" />
-      <DDSCardHeading>Feature card heading</DDSCardHeading>
-      <DDSFeatureCardFooter>
+    <C4DFeatureCard href="https://www.example.com">
+      <C4DImage alt="Image alt text" defaultSrc={mediumImgLg1x1} slot="image" />
+      <C4DCardHeading>Feature card heading</C4DCardHeading>
+      <C4DFeatureCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSFeatureCardFooter>
-    </DDSFeatureCard>
+      </C4DFeatureCardFooter>
+    </C4DFeatureCard>
   );
 }
 ```
@@ -54,6 +54,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector            | Description |
 | ----------------------- | --------------------------------- | ----------- |
-| `<dds-feature-card>`    | `data-autoid="dds--feature-card"` | Component   |
+| `<cds-feature-card>`    | `data-autoid="cds--feature-card"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx
index 21edb044cc3..692b16f85e5 100644
--- a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx
+++ b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.react.tsx
@@ -12,12 +12,12 @@ import React from 'react';
 
 // @ts-ignore
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
-import DDSFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
+import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 import mediumImgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
 import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
 import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--002.jpg';
@@ -27,47 +27,50 @@ import imgXlg2x1 from '../../../../../storybook-images/assets/1312/fpo--2x1--131
 
 import readme from './README.stories.react.mdx';
 
-export const Medium = args => {
+export const Medium = (args) => {
   const { heading, href } = args?.FeatureCard ?? {};
   return (
-    <DDSFeatureCard href={href}>
-      <DDSImage alt="Image alt text" defaultSrc={mediumImgLg1x1} slot="image" />
-      <DDSCardHeading>{heading}</DDSCardHeading>
-      <DDSFeatureCardFooter>
+    <C4DFeatureCard href={href}>
+      <C4DImage alt="Image alt text" defaultSrc={mediumImgLg1x1} slot="image" />
+      <C4DCardHeading>{heading}</C4DCardHeading>
+      <C4DFeatureCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSFeatureCardFooter>
-    </DDSFeatureCard>
+      </C4DFeatureCardFooter>
+    </C4DFeatureCard>
   );
 };
 
-export const Large = args => {
+export const Large = (args) => {
   const { copy, eyebrow, heading, href } = args?.FeatureCard ?? {};
   return (
-    <DDSFeatureCard href={href} size="large">
-      <DDSImage alt="Image alt text" defaultSrc={imgLg1x1} slot="image">
-        <DDSImageItem media="(min-width: 1312px)" srcset={imgMax2x1} />
-        <DDSImageItem media="(min-width: 1056px)" srcset={imgXlg2x1} />
-        <DDSImageItem media="(min-width: 991px)" srcset={imgXlg2x1} />
-        <DDSImageItem media="(min-width: 672px)" srcset={imgLg2x1} />
-        <DDSImageItem media="(min-width: 0px)" srcset={imgSm2x1} />
-      </DDSImage>
-      <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-      <DDSCardHeading>{heading}</DDSCardHeading>
+    <C4DFeatureCard href={href} size="large">
+      <C4DImage alt="Image alt text" defaultSrc={imgLg1x1} slot="image">
+        <C4DImageItem media="(min-width: 1312px)" srcset={imgMax2x1} />
+        <C4DImageItem media="(min-width: 1056px)" srcset={imgXlg2x1} />
+        <C4DImageItem media="(min-width: 991px)" srcset={imgXlg2x1} />
+        <C4DImageItem media="(min-width: 672px)" srcset={imgLg2x1} />
+        <C4DImageItem media="(min-width: 0px)" srcset={imgSm2x1} />
+      </C4DImage>
+      <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+      <C4DCardHeading>{heading}</C4DCardHeading>
       <p>{copy}</p>
-      <DDSFeatureCardFooter>
+      <C4DFeatureCardFooter>
         <ArrowRight20 slot="icon" />
-      </DDSFeatureCardFooter>
-    </DDSFeatureCard>
+      </C4DFeatureCardFooter>
+    </C4DFeatureCard>
   );
 };
 
 Medium.story = {
   parameters: {
     ...readme.parameters,
-    storyGrid: 'bx--col-sm-4 bx--col-lg-8',
+    storyGrid: 'cds-col-sm-4 cds--col-lg-8',
     knobs: {
       FeatureCard: () => ({
-        heading: text('Heading (heading)', 'Explore AI use cases in all industries'),
+        heading: text(
+          'Heading (heading)',
+          'Explore AI use cases in all industries'
+        ),
         href: text('Href (href)', 'https://www.example.com'),
       }),
     },
@@ -77,14 +80,17 @@ Medium.story = {
 Large.story = {
   parameters: {
     ...readme.parameters,
-    storyGrid: 'bx--col-sm-4 bx--col-lg-12',
+    storyGrid: 'cds-col-sm-4 cds--col-lg-12',
     knobs: {
       FeatureCard: () => ({
         copy: text(
           'Copy (copy)',
           'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.'
         ),
-        heading: text('Heading (heading)', 'Explore AI use cases in all industries'),
+        heading: text(
+          'Heading (heading)',
+          'Explore AI use cases in all industries'
+        ),
         href: text('Href (href)', 'https://www.example.com'),
         eyebrow: text('Eyebrow (eyebrow)', 'This is an eyebrow'),
       }),
@@ -97,8 +103,8 @@ export default {
   decorators: [
     (story, { parameters }) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
+        <div className="cds-grid">
+          <div className="cds-row">
             <div className={parameters.storyGrid}>{story()}</div>
           </div>
         </div>
diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
index 99805a58634..541f8e6b05b 100644
--- a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
+++ b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
@@ -10,68 +10,98 @@
 import '../../card/index';
 import '../../image/image';
 import '../index';
-
+import { BASIC_COLOR_SCHEME } from '../../../globals/defs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import mediumImgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
-
+import { html } from 'lit';
+import { select } from '@storybook/addon-knobs';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import mediumImgSm4x3 from '../../../../../storybook-images/assets/320/fpo--4x3--320x160--004.jpg';
+import imgSm4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
+import imgMd1x1 from '../../../../../storybook-images/assets/480/fpo--1x1--480x480--005.jpg';
 import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
-import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--002.jpg';
-import imgMax2x1 from '../../../../../storybook-images/assets/1584/fpo--2x1--1312x656--002.jpg';
-import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--002.jpg';
-import imgXlg2x1 from '../../../../../storybook-images/assets/1312/fpo--2x1--1312x656--002.jpg';
+import imgXlg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg';
+import imgMax1x1 from '../../../../../storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+
+const { stablePrefix: c4dPrefix, prefix } = settings;
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
+const colorSchemeMap = {
+  Regular: BASIC_COLOR_SCHEME.REGULAR,
+  Inverse: BASIC_COLOR_SCHEME.INVERSE,
+};
+
 export const Medium = (args) => {
-  const { heading, href } = args?.['dds-feature-card'] ?? {};
+  const { heading, href, colorScheme } =
+    args?.[`${c4dPrefix}-feature-card`] ?? {};
   return html`
-    <dds-feature-card href=${ifNonNull(href || undefined)}>
-      <dds-image
-        slot="image"
-        alt="Image alt text"
-        default-src="${mediumImgLg1x1}"></dds-image>
-      <dds-card-heading>${heading}</dds-card-heading>
-      <dds-feature-card-footer>
+    <c4d-feature-card
+      href=${ifDefined(href || undefined)}
+      color-scheme=${colorSchemeMap[colorScheme]}>
+      <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
+        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
+        </c4d-image-item>
+      </c4d-image>
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      <c4d-feature-card-footer>
         ${ArrowRight20({ slot: 'icon' })}
-      </dds-feature-card-footer>
-    </dds-feature-card>
+      </c4d-feature-card-footer>
+    </c4d-feature-card>
   `;
 };
 
 export const Large = (args) => {
-  const { eyebrow, heading, copy, href } = args?.['dds-feature-card'] ?? {};
+  const { eyebrow, heading, copy, href, colorScheme } =
+    args?.[`${c4dPrefix}-feature-card`] ?? {};
+
+  const copyComponent = document
+    .querySelector(`${c4dPrefix}-feature-card`)
+    ?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
   return html`
-    <dds-feature-card size="large" href=${ifNonNull(href || undefined)}>
-      <dds-image slot="image" default-src="${ifNonNull(imgLg1x1)}">
-        <dds-image-item media="(min-width: 1312px)" srcset="${imgMax2x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 1056px)" srcset="${imgXlg2x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 991px)" srcset="${imgXlg2x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${imgLg2x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${imgSm2x1}">
-        </dds-image-item>
-      </dds-image>
-      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
-      <dds-card-heading>${heading}</dds-card-heading>
-      <p>${copy}</p>
-      <dds-feature-card-footer>
+    <c4d-feature-card
+      size="large"
+      href=${ifDefined(href || undefined)}
+      color-scheme=${colorSchemeMap[colorScheme]}>
+      <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
+        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
+        </c4d-image-item>
+      </c4d-image>
+      <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+      <c4d-card-heading>${heading}</c4d-card-heading>
+      ${copy && html`<p></p>`}
+      <c4d-feature-card-footer>
         ${ArrowRight20({ slot: 'icon' })}
-      </dds-feature-card-footer>
-    </dds-feature-card>
+      </c4d-feature-card-footer>
+    </c4d-feature-card>
   `;
 };
 
 Large.story = {
   parameters: {
-    storyGrid: 'bx--col-lg-12',
+    storyGrid: `${prefix}--col-lg-12`,
     knobs: {
-      'dds-feature-card': () => ({
+      [`${c4dPrefix}-feature-card`]: () => ({
         eyebrow: textNullable(
           'Card Eyebrow (required) (eyebrow):',
           'This is an eyebrow'
@@ -82,19 +112,18 @@ Large.story = {
         ),
         copy: textNullable(
           'Card copy (copy):',
-          `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua.`
+          `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.`
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
+        colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
       }),
     },
     propsSet: {
       default: {
-        'dds-feature-card': {
+        [`${c4dPrefix}-feature-card`]: {
           eyebrow: 'This is an eyebrow',
           heading: 'Explore AI use cases in all industries',
-          copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
-          dolore magna aliqua.`,
+          copy: `Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.`,
           href: 'https://example.com',
         },
       },
@@ -106,29 +135,32 @@ export default {
   title: 'Components/Feature card',
   decorators: [
     (story, { parameters }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 ${parameters.storyGrid}">${story()}</div>
+      <div class="${prefix}--grid">
+        <div class="${prefix}--row">
+          <div class="${prefix}--col-sm-4 ${parameters.storyGrid}">
+            ${story()}
+          </div>
         </div>
       </div>
     `,
   ],
   parameters: {
     ...readme.parameters,
-    storyGrid: 'bx--col-lg-8 bx--no-gutter"',
+    storyGrid: `${prefix}--col-lg-8`,
     hasStoryPadding: true,
     knobs: {
-      'dds-feature-card': () => ({
+      [`${c4dPrefix}-feature-card`]: () => ({
         heading: textNullable(
           'Card Heading (heading):',
           'Explore AI use cases in all industries'
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
+        colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
       }),
     },
     propsSet: {
       default: {
-        'dds-feature-card': {
+        [`${c4dPrefix}-feature-card`]: {
           heading: 'Explore AI use cases in all industries',
           href: 'https://example.com',
         },
diff --git a/packages/web-components/src/components/feature-card/__tests__/feature-card.test.ts b/packages/web-components/src/components/feature-card/__tests__/feature-card.test.ts
index 8a5a7ad7cda..a02ff71ee76 100644
--- a/packages/web-components/src/components/feature-card/__tests__/feature-card.test.ts
+++ b/packages/web-components/src/components/feature-card/__tests__/feature-card.test.ts
@@ -1,27 +1,27 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../feature-card';
 import { Medium } from '../__stories__/feature-card.stories';
 
 const template = (props?) =>
   Medium({
-    'dds-feature-card': props,
+    'c4d-feature-card': props,
   });
 
-describe('dds-feature-card', function () {
+describe('c4d-feature-card', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-feature-card>`
-      expect(document.body.querySelector('dds-feature-card')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-feature-card>`
+      expect(document.body.querySelector('c4d-feature-card')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -37,8 +37,8 @@ describe('dds-feature-card', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-feature-card>`
-      expect(document.body.querySelector('dds-feature-card')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-feature-card>`
+      expect(document.body.querySelector('c4d-feature-card')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/feature-card/feature-card-footer.ts b/packages/web-components/src/components/feature-card/feature-card-footer.ts
index b579f8709a0..6f75a31fff4 100644
--- a/packages/web-components/src/components/feature-card/feature-card-footer.ts
+++ b/packages/web-components/src/components/feature-card/feature-card-footer.ts
@@ -7,24 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSCardFooter from '../card/card-footer';
+import C4DCardFooter from '../card/card-footer';
 import styles from './feature-card.scss';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Feature card footer.
  *
- * @element dds-feature-card-footer
+ * @element c4d-feature-card-footer
  */
-@customElement(`${ddsPrefix}-feature-card-footer`)
-class DDSFeatureCardFooter extends DDSCardFooter {
-  updated() {
-    super.updated();
+@customElement(`${c4dPrefix}-feature-card-footer`)
+class C4DFeatureCardFooter extends C4DCardFooter {
+  updated(changedProperties) {
+    super.updated(changedProperties);
     const { _linkNode: linkNode } = this;
     if (linkNode) {
       linkNode.classList.remove(`${prefix}--link-with-icon`);
@@ -35,4 +33,4 @@ class DDSFeatureCardFooter extends DDSCardFooter {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFeatureCardFooter;
+export default C4DFeatureCardFooter;
diff --git a/packages/web-components/src/components/feature-card/feature-card.scss b/packages/web-components/src/components/feature-card/feature-card.scss
index 99249e6290a..9e228795d7c 100644
--- a/packages/web-components/src/components/feature-card/feature-card.scss
+++ b/packages/web-components/src/components/feature-card/feature-card.scss
@@ -6,69 +6,5 @@
  * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/feature-card/feature-card';
-@import '../card/card.scss';
 
-:host(#{$dds-prefix}-feature-card),
-:host(#{$dds-prefix}-feature-cta) {
-  display: block;
-  outline: none;
-  ::slotted(#{$dds-prefix}-card-heading) {
-    color: $inverse-01;
-  }
-
-  @include carbon--breakpoint-down('md') {
-    .#{$prefix}--card__wrapper {
-      display: block;
-      min-height: 0;
-      height: auto;
-
-      .#{$prefix}--card__content {
-        height: 100%;
-        padding: $carbon--spacing-05;
-      }
-    }
-
-    .#{$prefix}--card--link {
-      display: block;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-feature-card[size='large']) {
-  &:hover {
-    .#{$prefix}--card__wrapper {
-      background-color: $inverse-hover-ui;
-    }
-  }
-
-  ::slotted(#{$dds-prefix}-feature-card-footer) {
-    display: flex;
-    justify-content: flex-start;
-
-    @include carbon--breakpoint('xlg') {
-      justify-content: flex-end;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-feature-card-footer),
-:host(#{$dds-prefix}-feature-cta-footer) {
-  display: flex;
-  justify-content: flex-start;
-
-  @include carbon--breakpoint('md') {
-    justify-content: flex-end;
-  }
-
-  &[size='large'] {
-    .dds-ce--card__footer ::slotted(svg[slot='icon']) {
-      @include carbon--breakpoint('max') {
-        width: $carbon--spacing-10;
-        height: $carbon--spacing-10;
-      }
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/feature-card';
diff --git a/packages/web-components/src/components/feature-card/feature-card.ts b/packages/web-components/src/components/feature-card/feature-card.ts
index 432c294c2dc..9c58271ce10 100644
--- a/packages/web-components/src/components/feature-card/feature-card.ts
+++ b/packages/web-components/src/components/feature-card/feature-card.ts
@@ -7,25 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSCard from '../card/card';
+import C4DCard from '../card/card';
 import '../image/image';
 import styles from './feature-card.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Feature Card.
  *
- * @element dds-feature-card
+ * @element c4d-feature-card
  */
-@customElement(`${ddsPrefix}-feature-card`)
-class DDSFeatureCard extends StableSelectorMixin(DDSCard) {
+@customElement(`${c4dPrefix}-feature-card`)
+class C4DFeatureCard extends StableSelectorMixin(C4DCard) {
   /**
    * The size property to render either Medium (default) or Large Feature Card variants.
    */
@@ -42,18 +40,18 @@ class DDSFeatureCard extends StableSelectorMixin(DDSCard) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--feature-card`;
+    return `${c4dPrefix}--feature-card`;
   }
 
   /**
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-feature-card-footer`;
+    return `${c4dPrefix}-feature-card-footer`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFeatureCard;
+export default C4DFeatureCard;
diff --git a/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx b/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx
index d231e73c4f0..d9c45f8df73 100644
--- a/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/feature-section/__stories__/README.stories.mdx
@@ -1,8 +1,19 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 
 # Feature Section
 
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-section)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/feature-section)
+
 ## Getting started
 
 Here's a quick example to get you started.
@@ -16,36 +27,67 @@ import '@carbon/ibmdotcom-web-components/es/components/feature-section/index.js'
 ### HTML
 
 ```html
-<dds-feature-section media-alignment="right">
-  <dds-image slot="image" default-src="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
-    <dds-image-item media="(min-width: 1584px)" srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616"> </dds-image-item>
-    <dds-image-item media="(min-width: 1056px)" srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616"> </dds-image-item>
-    <dds-image-item media="(min-width: 672px)" srcset="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616"> </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616"> </dds-image-item>
-    <dds-image-item media="(min-width: 0px)" srcset="https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616"> </dds-image-item>
-  </dds-image>
-  <dds-card-eyebrow>5 min activity</dds-card-eyebrow>
-  <dds-content-block-heading>Ready when you are</dds-content-block-heading>
-  <dds-content-item-paragraph slot="copy">We're flexible. We can work with you on a wide variety of engagements on a project or consulting basis. And we're technology agnostic. Our experts work with any vendor's technology, not just IBM's. You decide how you want to work and where to focus our expertise.</dds-content-item-paragraph>
-
-  <dds-feature-section-card-link slot="footer" href="https://example.com" cta-type="local" color-scheme="inverse">
-    <dds-card-link-heading>Try a free virtual business framing session with IBM Garage</dds-card-link-heading>
-    <dds-card-cta-footer color-scheme="inverse">
-    </dds-card-cta-footer>
-  </dds-feature-section-card-link>
-</dds-feature-section>
+<c4d-feature-section media-alignment="right">
+  <c4d-image
+    slot="image"
+    default-src="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+    <c4d-image-item
+      media="(min-width: 1584px)"
+      srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+    <c4d-image-item
+      media="(min-width: 1056px)"
+      srcset="https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+    <c4d-image-item
+      media="(min-width: 672px)"
+      srcset="https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+    <c4d-image-item
+      media="(min-width: 320px)"
+      srcset="https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+    <c4d-image-item
+      media="(min-width: 0px)"
+      srcset="https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616">
+    </c4d-image-item>
+  </c4d-image>
+  <c4d-card-eyebrow>5 min activity</c4d-card-eyebrow>
+  <c4d-content-block-heading>Ready when you are</c4d-content-block-heading>
+  <c4d-content-item-paragraph slot="copy"
+    >We're flexible. We can work with you on a wide variety of engagements on a
+    project or consulting basis. And we're technology agnostic. Our experts work
+    with any vendor's technology, not just IBM's. You decide how you want to
+    work and where to focus our expertise.</c4d-content-item-paragraph
+  >
+
+  <c4d-card
+    link
+    slot="footer"
+    href="https://example.com"
+    cta-type="local"
+    color-scheme="inverse">
+    <c4d-card-heading
+      >Try a free virtual business framing session with IBM
+      Garage</c4d-card-heading
+    >
+    <c4d-card-footer> </c4d-card-footer>
+  </c4d-card>
+</c4d-feature-section>
 ```
 
 ## Props
 
-<Props of="dds-feature-section" />
+<Props of="c4d-feature-section" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector            | Description |
-| ----------------------- | --------------------------------- | ----------- |
-| `<dds-feature-section>`    | `data-autoid="dds--feature-section"` | Component   |
+| Web Components selector | Compatibility selector               | Description |
+| ----------------------- | ------------------------------------ | ----------- |
+| `<c4d-feature-section>` | `data-autoid="c4d--feature-section"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx
index 3786e7d1611..78f60f365e6 100644
--- a/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/feature-section/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
 
@@ -17,36 +22,36 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js';
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
-import DDSFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
-import DDSFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section.js';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
+import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 
 function App() {
   return (
-  <DDSFeatureSection media-alignment={'left'}>
-      <DDSImage slot="image" default-src={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}>
-        <DDSImageItem media="(min-width: 1312px)" srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-        <DDSImageItem media="(min-width: 672px)" srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-        <DDSImageItem media="(min-width: 320px)" srcset={'https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-        <DDSImageItem media="(min-width: 320px)" srcset={'https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-        <DDSImageItem media="(min-width: 320px)" srcset={'https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616'}></DDSImageItem>
-      </DDSImage>
-      <DDSCardEyebrow>5 min activity</DDSCardEyebrow>
-      <DDSContentBlockHeading>Ready when you are</DDSContentBlockHeading>
-      <DDSContentItemParagraph slot="copy">Copy example</DDSContentItemParagraph>
+  <C4DFeatureSection media-alignment={'left'}>
+      <C4DImage slot="image" default-src={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}>
+        <C4DImageItem media="(min-width: 1312px)" srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem media="(min-width: 672px)" srcset={'https://fpoimg.com/1584x1584?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem media="(min-width: 320px)" srcset={'https://fpoimg.com/960x720?text=4:3&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem media="(min-width: 320px)" srcset={'https://fpoimg.com/720x720?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+        <C4DImageItem media="(min-width: 320px)" srcset={'https://fpoimg.com/320x320?text=1:1&bg_color=ee5396&text_color=161616'}></C4DImageItem>
+      </C4DImage>
+      <C4DCardEyebrow>5 min activity</C4DCardEyebrow>
+      <C4DContentBlockHeading>Ready when you are</C4DContentBlockHeading>
+      <C4DContentItemParagraph slot="copy">Copy example</C4DContentItemParagraph>
 
-      <DDSFeatureSectionCardLink slot="footer" href={'https://example.com'} cta-type={'local'} color-scheme="inverse">
-        <DDSCardLinkHeading>Try a free virtual business framing session with IBM Garage</DDSCardLinkHeading>
-        <DDSCardCTAFooter color-scheme="inverse"> </DDSCardCTAFooter>
-      </DDSFeatureSectionCardLink>
-    </DDSFeatureSection>;
+      <C4DCard link slot="footer" href={'https://example.com'} cta-type={'local'} color-scheme="inverse">
+        <C4DCardHeading>Try a free virtual business framing session with IBM Garage</C4DCardHeading>
+        <C4DCardFooter color-scheme="inverse"> </C4DCardFooter>
+      </C4DCard>
+    </C4DFeatureSection>
   );
 }
 ```
@@ -57,10 +62,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-feature-section>`        | N/A                    | Component   |
+| `<c4d-feature-section>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
index de55836e517..cf334974bc0 100644
--- a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
+++ b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.react.tsx
@@ -12,78 +12,130 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
-import DDSFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
-// eslint-disable-next-line max-len
-import DDSFeatureSectionCardLink from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section-card-link';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DCardEyebrow from '@carbon/ibmdotcom-web-components/es/components-react/card/card-eyebrow';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DContentItemParagraph from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-paragraph';
+import C4DFeatureSection from '@carbon/ibmdotcom-web-components/es/components-react/feature-section/feature-section';
+import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 
 import imgXlg1x1 from '../../../../../storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
 import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg';
 import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg';
 import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
 import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
-import { MEDIA_ALIGNMENT } from '../defs';
 import { CTA_TYPE } from '../../cta/defs';
+import { COLOR_SCHEME } from '../defs';
 
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.react.mdx';
 
-const mediaAlignment = {
-  [`Left`]: MEDIA_ALIGNMENT.LEFT,
-  [`Right`]: MEDIA_ALIGNMENT.RIGHT,
-};
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
 
-const types = {
-  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
-  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
 };
 
-export const Default = args => {
-  const { alt, eyebrow, heading, copy, href, ctaType, mediaAlign, defaultSrc } = args?.FeatureSection ?? {};
+export const Default = (args) => {
+  const { alt, colorScheme, eyebrow, heading, copy, href, ctaType, defaultSrc } =
+    args?.FeatureSection ?? {};
+    let videoFooterCopy;
+
+    if (ctaType === CTA_TYPE.VIDEO) {
+      const card = document.querySelector('c4d-card') as any;
+      const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
+
+      videoFooterCopy = duration;
+    }
   return (
-    <DDSFeatureSection media-alignment={mediaAlign}>
-      <DDSImage slot="image" default-src={defaultSrc} alt={alt}>
-        <DDSImageItem media="(min-width: 1584px)" srcset={imgXlg1x1}></DDSImageItem>
-        <DDSImageItem media="(min-width: 1056px)" srcset={imgLg1x1}></DDSImageItem>
-        <DDSImageItem media="(min-width: 672px)" srcset={imgMd4x3}></DDSImageItem>
-        <DDSImageItem media="(min-width: 320px)" srcset={imgSm1x1}></DDSImageItem>
-        <DDSImageItem media="(min-width: 0px)" srcset={imgXs1x1}></DDSImageItem>
-      </DDSImage>
-      <DDSCardEyebrow>{eyebrow}</DDSCardEyebrow>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      <DDSContentItemParagraph slot="copy">{copy}</DDSContentItemParagraph>
+    <C4DVideoCTAContainer>
+      <C4DFeatureSection color-scheme={colorScheme}>
+        <C4DImage slot="image" default-src={defaultSrc} alt={alt}>
+          <C4DImageItem
+            media="(min-width: 1584px)"
+            srcset={imgXlg1x1}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width: 1056px)"
+            srcset={imgLg1x1}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width: 672px)"
+            srcset={imgMd4x3}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width: 320px)"
+            srcset={imgSm1x1}></C4DImageItem>
+          <C4DImageItem media="(min-width: 0px)" srcset={imgXs1x1}></C4DImageItem>
+        </C4DImage>
+        <C4DCardEyebrow>{eyebrow}</C4DCardEyebrow>
+        <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+        <C4DContentItemParagraph slot="copy">{copy}</C4DContentItemParagraph>
 
-      <DDSFeatureSectionCardLink slot="footer" href={href} cta-type={ctaType} color-scheme="inverse">
-        <DDSCardLinkHeading>Try a free virtual business framing session with IBM Garage</DDSCardLinkHeading>
-        <DDSCardCTAFooter color-scheme="inverse"> </DDSCardCTAFooter>
-      </DDSFeatureSectionCardLink>
-    </DDSFeatureSection>
+        <C4DCard
+          link
+          slot="footer"
+          href={href}
+          cta-type={ctaType}>
+          <C4DCardHeading>
+            Try a free virtual business framing session with IBM Garage
+          </C4DCardHeading>
+          {ctaType === CTA_TYPE.VIDEO
+            ? <C4DCardFooter> {videoFooterCopy} </C4DCardFooter>
+            : <C4DCardFooter></C4DCardFooter>}
+        </C4DCard>
+      </C4DFeatureSection>
+    </C4DVideoCTAContainer>
   );
 };
 
 Default.story = {
   parameters: {
     knobs: {
-      FeatureSection: () => ({
-        mediaAlign: select('Media Alignment', mediaAlignment, MEDIA_ALIGNMENT.RIGHT),
-        eyebrow: textNullable('Card Eyebrow (optional)(eyebrow):', '5 min activity'),
-        heading: textNullable('Card Heading (required)(heading):', 'Ready when you are'),
-        copy: textNullable(
-          'Card copy (optional)(copy):',
-          `Were flexible. We can work with you on a wide variety of engagements on a project
+      FeatureSection: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+
+        return {
+          colorScheme: select(
+            'Color scheme:',
+            colorSchemeTypes,
+            COLOR_SCHEME.REGULAR
+          ),
+          eyebrow: textNullable(
+            'Card Eyebrow (optional)(eyebrow):',
+            '5 min activity'
+          ),
+          heading: textNullable(
+            'Card Heading (required)(heading):',
+            'Ready when you are'
+          ),
+          copy: textNullable(
+            'Card copy (optional)(copy):',
+            `Were flexible. We can work with you on a wide variety of engagements on a project
           or consulting basis. And were technology agnostic. Our experts work with any vendors technology, not just IBMs.
           You decide how you want to work and where to focus our expertise.`
-        ),
-        alt: textNullable('Image Alt Text (alt):', 'Image alt text'),
-        ctaType: select('CTA type (cta-type)', types, CTA_TYPE.LOCAL),
-        href: textNullable('CTA Href (href):', 'https://example.com'),
-      }),
+          ),
+          alt: textNullable('Image Alt Text (alt):', 'Image alt text'),
+          ctaType,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
     },
   },
 };
@@ -91,7 +143,7 @@ Default.story = {
 export default {
   title: 'Components/Feature section',
   decorators: [
-    story => {
+    (story) => {
       return <>{story()}</>;
     },
   ],
diff --git a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
index 69abc849d63..0c1f9b4d5b1 100644
--- a/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
+++ b/packages/web-components/src/components/feature-section/__stories__/feature-section.stories.ts
@@ -9,8 +9,8 @@
 
 import '../index';
 
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 
 import imgXlg1x1 from '../../../../../storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
@@ -18,57 +18,76 @@ import imgLg1x1 from '../../../../../storybook-images/assets/1312/fpo--1x1--1312
 import imgMd4x3 from '../../../../../storybook-images/assets/960/fpo--4x3--960x720--002.jpg';
 import imgSm1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--002.jpg';
 import imgXs1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--002.jpg';
-import { MEDIA_ALIGNMENT } from '../defs';
 import { CTA_TYPE } from '../../cta/defs';
+import { COLOR_SCHEME } from '../defs';
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
-const mediaAlignment = {
-  [`Left`]: MEDIA_ALIGNMENT.LEFT,
-  [`Right`]: MEDIA_ALIGNMENT.RIGHT,
-};
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
 
-const types = {
-  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
-  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.INVERSE}`]: COLOR_SCHEME.INVERSE,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
 };
 
 export const Default = (args) => {
-  const { alt, mediaAlign, eyebrow, heading, copy, href, ctaType } =
-    args?.['dds-feature-section'] ?? {};
-  return html`
-    <dds-feature-section media-alignment="${mediaAlign}">
-      <dds-image slot="image" default-src="${ifNonNull(imgLg1x1)}" alt="${alt}">
-        <dds-image-item media="(min-width: 1584px)" srcset="${imgXlg1x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 1056px)" srcset="${imgLg1x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${imgMd4x3}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${imgSm1x1}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${imgXs1x1}">
-        </dds-image-item>
-      </dds-image>
-      <dds-card-eyebrow>${eyebrow}</dds-card-eyebrow>
-      <dds-content-block-heading>${heading}</dds-content-block-heading>
-      <dds-content-item-paragraph slot="copy"
-        >${copy}</dds-content-item-paragraph
-      >
+  const { alt, colorScheme, eyebrow, heading, copy, href, ctaType } =
+    args?.['c4d-feature-section'] ?? {};
+  let videoFooterCopy;
+
+  if (ctaType === CTA_TYPE.VIDEO) {
+    const card = document.querySelector('c4d-card') as any;
+    const duration = card?.videoTitle?.match(/\((.*)\)/)?.pop();
 
-      <dds-feature-section-card-link
-        slot="footer"
-        href="${href}"
-        cta-type="${ifNonNull(ctaType)}"
-        color-scheme="inverse">
-        <dds-card-link-heading
-          >Try a free virtual business framing session with IBM
-          Garage</dds-card-link-heading
+    videoFooterCopy = duration;
+  }
+  return html`
+    <c4d-video-cta-container>
+      <c4d-feature-section color-scheme="${colorScheme}">
+        <c4d-image
+          slot="image"
+          default-src="${ifDefined(imgLg1x1)}"
+          alt="${alt}">
+          <c4d-image-item media="(min-width: 1584px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd4x3}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 320px)" srcset="${imgSm1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${imgXs1x1}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+        <c4d-content-block-heading>${heading}</c4d-content-block-heading>
+        <c4d-content-item-paragraph slot="copy"
+          >${copy}</c4d-content-item-paragraph
         >
-        <dds-card-cta-footer color-scheme="inverse"> </dds-card-cta-footer>
-      </dds-feature-section-card-link>
-    </dds-feature-section>
+        <c4d-card
+          link
+          slot="footer"
+          no-poster=${ctaType === CTA_TYPE.VIDEO}
+          cta-type=${ctaType}
+          href=${ifDefined(href || undefined)}>
+          <c4d-card-heading
+            >Try a free virtual business framing session with IBM
+            Garage</c4d-card-heading
+          >
+          ${ctaType === CTA_TYPE.VIDEO
+            ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `
+            : html`<c4d-card-footer></c4d-card-footer>`}
+        </c4d-card>
+      </c4d-feature-section>
+    </c4d-video-cta-container>
   `;
 };
 
@@ -79,34 +98,45 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      'dds-feature-section': () => ({
-        mediaAlign: select(
-          'Media Alignment',
-          mediaAlignment,
-          MEDIA_ALIGNMENT.RIGHT
-        ),
-        eyebrow: textNullable(
-          'Card Eyebrow (optional)(eyebrow):',
-          '5 min activity'
-        ),
-        heading: textNullable(
-          'Card Heading (required)(heading):',
-          'Ready when you are'
-        ),
-        copy: textNullable(
-          'Card copy (optional)(copy):',
-          `Were flexible. We can work with you on a wide variety of engagements on a project
+      'c4d-feature-section': () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+
+        return {
+          colorScheme: select(
+            'Color scheme:',
+            colorSchemeTypes,
+            COLOR_SCHEME.REGULAR
+          ),
+          eyebrow: textNullable(
+            'Card Eyebrow (optional)(eyebrow):',
+            '5 min activity'
+          ),
+          heading: textNullable(
+            'Card Heading (required)(heading):',
+            'Ready when you are'
+          ),
+          copy: textNullable(
+            'Card copy (optional)(copy):',
+            `Were flexible. We can work with you on a wide variety of engagements on a project
           or consulting basis. And were technology agnostic. Our experts work with any vendors technology, not just IBMs.
           You decide how you want to work and where to focus our expertise.`
-        ),
-        alt: textNullable('Image Alt Text (alt):', 'Image alt text'),
-        ctaType: select('CTA type (cta-type)', types, CTA_TYPE.LOCAL),
-        href: textNullable('CTA Href (href):', 'https://example.com'),
-      }),
+          ),
+          alt: textNullable('Image Alt Text (alt):', 'Image alt text'),
+          ctaType,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+        };
+      },
     },
     propsSet: {
       default: {
-        'dds-feature-section': {
+        'c4d-feature-section': {
           mediaAlign: 'right',
           eyebrow: '5 min activity',
           heading: 'Ready when you are',
diff --git a/packages/web-components/src/components/feature-section/__tests__/feature-section.test.ts b/packages/web-components/src/components/feature-section/__tests__/feature-section.test.ts
index 5308b7f79de..5c6ac875b1c 100644
--- a/packages/web-components/src/components/feature-section/__tests__/feature-section.test.ts
+++ b/packages/web-components/src/components/feature-section/__tests__/feature-section.test.ts
@@ -1,28 +1,28 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../feature-section';
 import { Default } from '../__stories__/feature-section.stories';
 
 const template = (props?) =>
   Default({
-    'dds-feature-section': props,
+    'c4d-feature-section': props,
   });
 
-describe('dds-feature-section', function () {
+describe('c4d-feature-section', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-feature-section>`
+      await Promise.resolve(); // Update cycle for `<c4d-feature-section>`
       expect(
-        document.body.querySelector('dds-feature-section')
+        document.body.querySelector('c4d-feature-section')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -38,9 +38,9 @@ describe('dds-feature-section', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-feature-section>`
+      await Promise.resolve(); // Update cycle for `<c4d-feature-section>`
       expect(
-        document.body.querySelector('dds-feature-section')
+        document.body.querySelector('c4d-feature-section')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/feature-section/defs.ts b/packages/web-components/src/components/feature-section/defs.ts
index a4016a30369..b20740765cc 100644
--- a/packages/web-components/src/components/feature-section/defs.ts
+++ b/packages/web-components/src/components/feature-section/defs.ts
@@ -8,16 +8,26 @@
  */
 
 /**
- * Type of the Media Alignment
+ * Type of color scheme
  */
-export enum MEDIA_ALIGNMENT {
+export enum COLOR_SCHEME {
   /**
-   * Right alignment
+   * Regular color scheme
    */
-  RIGHT = 'right',
+  REGULAR = 'regular',
 
   /**
-   * Left alignment
+   * Inverse color scheme
    */
-  LEFT = 'left',
+  INVERSE = 'inverse',
+
+  /**
+   * Cyan color scheme
+   */
+  CYAN = 'cyan',
+
+  /**
+   * Purple color scheme
+   */
+  PURPLE = 'purple',
 }
diff --git a/packages/web-components/src/components/feature-section/feature-section-card-link.ts b/packages/web-components/src/components/feature-section/feature-section-card-link.ts
index 4dd2ed1dc3d..23b6cd63f5d 100644
--- a/packages/web-components/src/components/feature-section/feature-section-card-link.ts
+++ b/packages/web-components/src/components/feature-section/feature-section-card-link.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSCardCTA from '../cta/card-cta';
+import C4DCardCTA from '../cta/card-cta';
 import styles from './feature-section.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Feature Section Card Link.
  *
- * @element dds-feature-section-card-link
+ * @element c4d-feature-section-card-link
  */
-@customElement(`${ddsPrefix}-feature-section-card-link`)
-class DDSFeatureSectionCardLink extends DDSCardCTA {
+@customElement(`${c4dPrefix}-feature-section-card-link`)
+class C4DFeatureSectionCardLink extends C4DCardCTA {
   static get stableSelector() {
-    return `${ddsPrefix}--feature-section-card-link`;
+    return `${c4dPrefix}--feature-section-card-link`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -34,5 +34,10 @@ class DDSFeatureSectionCardLink extends DDSCardCTA {
   }
 }
 
+console.warn(
+  'The feature-section-card-link component has been deprecated in favor of the card (link variant) component. ' +
+    'See card documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFeatureSectionCardLink;
+export default C4DFeatureSectionCardLink;
diff --git a/packages/web-components/src/components/feature-section/feature-section.scss b/packages/web-components/src/components/feature-section/feature-section.scss
index 1dc1811639e..d483a4e07c4 100644
--- a/packages/web-components/src/components/feature-section/feature-section.scss
+++ b/packages/web-components/src/components/feature-section/feature-section.scss
@@ -6,21 +6,5 @@
  * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/card/index';
-@import '@carbon/ibmdotcom-styles/scss/components/feature-section/feature-section';
 
-:host(#{$dds-prefix}-feature-section) {
-  display: block;
-  outline: none;
-
-  &[media-alignment='left'] {
-    .#{$prefix}--card-link,
-    ::slotted(#{$dds-prefix}-feature-section-card-link) {
-      @include carbon--breakpoint-down('lg') {
-        position: relative;
-        right: 0;
-      }
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/feature-section';
diff --git a/packages/web-components/src/components/feature-section/feature-section.ts b/packages/web-components/src/components/feature-section/feature-section.ts
index 8b14fcd99cf..b310b36e0b8 100644
--- a/packages/web-components/src/components/feature-section/feature-section.ts
+++ b/packages/web-components/src/components/feature-section/feature-section.ts
@@ -7,88 +7,60 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSFeatureCard from '../feature-card/feature-card';
+import { css, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DFeatureCard from '../feature-card/feature-card';
 import '../image/image';
 import styles from './feature-section.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { MEDIA_ALIGNMENT } from './defs';
+import { COLOR_SCHEME } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Feature Section.
  *
- * @element dds-feature-section
+ * @element c4d-feature-section
  */
-@customElement(`${ddsPrefix}-feature-section`)
-class DDSFeatureSection extends StableSelectorMixin(DDSFeatureCard) {
+@customElement(`${c4dPrefix}-feature-section`)
+class C4DFeatureSection extends StableSelectorMixin(C4DFeatureCard) {
   /**
-   * Media Alignment (right (default) | left)
+   * Color scheme type (regular (default) | inverse | cyan | purple )
    */
-  @property({ attribute: 'media-alignment', reflect: true })
-  mediaAlignment = MEDIA_ALIGNMENT.RIGHT;
+  @property({ attribute: 'color-scheme', reflect: true })
+  colorScheme = COLOR_SCHEME.REGULAR;
 
   render() {
     return html`
-      ${this.mediaAlignment === MEDIA_ALIGNMENT.LEFT
-        ? html`
-            <div class="${prefix}--grid ${prefix}--feature-section">
-              <div class="${prefix}--row ${prefix}--feature-section__container">
+      <div class="${prefix}--grid ${prefix}--feature-section">
+        <div class="${prefix}--row ${prefix}--feature-section__container">
+          <div
+            class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
+            <div class="${prefix}--grid">
+              <div class="${prefix}--row">
                 <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
-                  <slot name="image"></slot>
-                </div>
-                <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
-                  <div class="${prefix}--grid">
-                    <div class="${prefix}--row">
-                      <div
-                        class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
-                        <slot name="eyebrow"></slot>
-                        <slot name="heading"></slot>
-                        <slot name="copy"></slot>
-                      </div>
-                    </div>
-                  </div>
-                  <slot name="footer"></slot>
-                </div>
-              </div>
-            </div>
-          `
-        : html`
-            <div class="${prefix}--grid ${prefix}--feature-section">
-              <div class="${prefix}--row ${prefix}--feature-section__container">
-                <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__body">
-                  <div class="${prefix}--grid">
-                    <div class="${prefix}--row">
-                      <div
-                        class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
-                        <slot name="eyebrow"></slot>
-                        <slot name="heading"></slot>
-                        <slot name="copy"></slot>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div
-                  class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
-                  <slot name="image"></slot>
-                  <slot name="footer"></slot>
+                  class="${prefix}--col-sm-4 ${prefix}--col-md-6 ${prefix}--col-lg-12">
+                  <slot name="eyebrow"></slot>
+                  <slot name="heading"></slot>
+                  <slot name="copy"></slot>
                 </div>
               </div>
             </div>
-          `}
+          </div>
+          <div
+            class="${prefix}--col-sm-4 ${prefix}--col-md-8 ${prefix}--col-lg-8 ${prefix}--feature-section__image">
+            <slot name="image"></slot>
+            <slot name="footer"></slot>
+          </div>
+        </div>
+      </div>
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--feature-section`;
+    return `${c4dPrefix}--feature-section`;
   }
 
   static get styles() {
@@ -99,4 +71,4 @@ class DDSFeatureSection extends StableSelectorMixin(DDSFeatureCard) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFeatureSection;
+export default C4DFeatureSection;
diff --git a/packages/web-components/src/components/feature-section/index.ts b/packages/web-components/src/components/feature-section/index.ts
index 3261336b9f6..c5e8ebe9da9 100644
--- a/packages/web-components/src/components/feature-section/index.ts
+++ b/packages/web-components/src/components/feature-section/index.ts
@@ -8,8 +8,7 @@
  */
 
 import './feature-section';
-import './feature-section-card-link';
-import '../card/card-eyebrow';
-import '../card-link/card-link-heading';
 import '../content-block/content-block-heading';
 import '../content-item/content-item-paragraph';
+import '../image/index';
+import '../card/index';
diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
index 62503d694e5..5fe512d8c6a 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.mdx
@@ -1,12 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import '../index';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Filter Panel
 
 > 💡 Check our
@@ -23,7 +24,6 @@ Here's a quick example to get you started.
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js';
-
 ```
 
 <Description markdown={`${cdnJs({ components: ['filter-panel'] })}`} />
@@ -33,92 +33,147 @@ import '@carbon/ibmdotcom-web-components/es/components/filter-panel/index.js';
 ### HTML
 
 ```html
-      <dds-filter-panel-composite>
-        <dds-filter-panel-heading slot="heading">Filter</dds-filter-panel-heading>
-        <dds-filter-group>
-          <dds-filter-group-item title-text="Product types">
-            <dds-filter-panel-checkbox value="API">API</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Application">Application</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Data Set">Data Set</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Free Trial">Free Trial</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Hardware">Hardware</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Service">Service</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Service Assets">Service Assets</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="Software">Software</dds-filter-panel-checkbox>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Technologies">
-            <dds-filter-panel-input-select header-value="Analytics" title="Analytics"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Artificial intelligence" title="Artificial intelligence">
-              <dds-filter-panel-input-select-item value="Machine Learning">Machine Learning</dds-filter-panel-input-select-item>
-              <dds-filter-panel-input-select-item value="Natural language processing">Natural language processing</dds-filter-panel-input-select-item>
-              <dds-filter-panel-input-select-item value="Speech recognition">Speech recognition</dds-filter-panel-input-select-item>
-            </dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Automation" title="Automation"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Blockchain" title="Blockchain"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Cloud computing" title="Cloud computing"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="IT infrastructure" title="IT infrastructure"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="IT management" title="IT management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Mobile technologys" title="Mobile technology"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Security" title="Security"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Software development" title="Software development"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Business needs">
-            <dds-filter-panel-input-select header-value="Business operations" title="Business operations"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Content Management" title="Content Management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Customer service" title="Customer service"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Finance" title="Finance"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Marketing and sales" title="Marketing and sales"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select header-value="Supply chain management" title="Supply chain management"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Deployment types">
-            <dds-filter-panel-checkbox value="On-premises">On-premises</dds-filter-panel-checkbox>
-            <dds-filter-panel-checkbox value="SaaS">SaaS</dds-filter-panel-checkbox>
-          </dds-filter-group-item>
-        </dds-filter-group>
-      </dds-filter-panel-composite>
+<cds-filter-panel-composite>
+  <cds-filter-panel-heading slot="heading">Filter</cds-filter-panel-heading>
+  <cds-filter-group>
+    <cds-filter-group-item title="Product types">
+      <cds-filter-panel-checkbox value="API">API</cds-filter-panel-checkbox>
+      <cds-filter-panel-checkbox value="Application"
+        >Application</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="Data Set"
+        >Data Set</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="Free Trial"
+        >Free Trial</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="Hardware"
+        >Hardware</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="Service"
+        >Service</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="Service Assets"
+        >Service Assets</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="Software"
+        >Software</cds-filter-panel-checkbox
+      >
+    </cds-filter-group-item>
+    <cds-filter-group-item title="Technologies">
+      <cds-filter-panel-input-select
+        header-value="Analytics"
+        title="Analytics"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Artificial intelligence"
+        title="Artificial intelligence">
+        <cds-filter-panel-input-select-item value="Machine Learning"
+          >Machine Learning</cds-filter-panel-input-select-item
+        >
+        <cds-filter-panel-input-select-item value="Natural language processing"
+          >Natural language processing</cds-filter-panel-input-select-item
+        >
+        <cds-filter-panel-input-select-item value="Speech recognition"
+          >Speech recognition</cds-filter-panel-input-select-item
+        >
+      </cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Automation"
+        title="Automation"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Blockchain"
+        title="Blockchain"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Cloud computing"
+        title="Cloud computing"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="IT infrastructure"
+        title="IT infrastructure"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="IT management"
+        title="IT management"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Mobile technologys"
+        title="Mobile technology"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Security"
+        title="Security"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Software development"
+        title="Software development"></cds-filter-panel-input-select>
+    </cds-filter-group-item>
+    <cds-filter-group-item title="Business needs">
+      <cds-filter-panel-input-select
+        header-value="Business operations"
+        title="Business operations"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Content Management"
+        title="Content Management"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Customer service"
+        title="Customer service"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Finance"
+        title="Finance"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Marketing and sales"
+        title="Marketing and sales"></cds-filter-panel-input-select>
+      <cds-filter-panel-input-select
+        header-value="Supply chain management"
+        title="Supply chain management"></cds-filter-panel-input-select>
+    </cds-filter-group-item>
+    <cds-filter-group-item title="Deployment types">
+      <cds-filter-panel-checkbox value="On-premises"
+        >On-premises</cds-filter-panel-checkbox
+      >
+      <cds-filter-panel-checkbox value="SaaS">SaaS</cds-filter-panel-checkbox>
+    </cds-filter-group-item>
+  </cds-filter-group>
+</cds-filter-panel-composite>
 ```
 
-## `<dds-filter-panel-composite>` attributes and properties
+## `<cds-filter-panel-composite>` attributes and properties
 
-<Props of="dds-filter-panel-composite" />
+<Props of="cds-filter-panel-composite" />
 
-## `<dds-filter-group-item>` attributes and properties
+## `<cds-filter-group-item>` attributes and properties
 
-<Props of="dds-filter-group-item" />
+<Props of="cds-filter-group-item" />
 
-## `<dds-filter-panel-checkbox>` attributes and properties
+## `<cds-filter-panel-checkbox>` attributes and properties
 
-<Props of="dds-filter-panel-checkbox" />
+<Props of="cds-filter-panel-checkbox" />
 
-## `<dds-filter-panel-heading>` attributes and properties
+## `<cds-filter-panel-heading>` attributes and properties
 
-<Props of="dds-filter-panel-heading" />
+<Props of="cds-filter-panel-heading" />
 
-## `<dds-filter-panel-input-select-item>` attributes and properties
+## `<cds-filter-panel-input-select-item>` attributes and properties
 
-<Props of="dds-filter-panel-input-select-item" />
+<Props of="cds-filter-panel-input-select-item" />
 
-## `<dds-filter-panel-input-select>` attributes and properties
+## `<cds-filter-panel-input-select>` attributes and properties
 
-<Props of="dds-filter-panel-input-select" />
+<Props of="cds-filter-panel-input-select" />
 
-## `<dds-filter-panel-modal>` attributes and properties
+## `<cds-filter-panel-modal>` attributes and properties
 
-<Props of="dds-filter-panel-modal" />
+<Props of="cds-filter-panel-modal" />
 
-## `<dds-filter-panel>` attributes and properties
+## `<cds-filter-panel>` attributes and properties
 
-<Props of="dds-filter-panel" />
+<Props of="cds-filter-panel" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector         | Description |
-| ----------------------- | ------------------------------ | ----------- |
-| `<dds-filter-panel>`                 | `data-autoid="dds--filter-panel"` | Component   |
-| `<dds-filter-panel-modal>`           | `data-autoid="dds--filter-panel-modal"` | Component   |
-| `<dds-filter-panel-composite>`       | `data-autoid="dds--filter-panel-composite"` | Component   |
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
+| Web Components selector        | Compatibility selector                      | Description |
+| ------------------------------ | ------------------------------------------- | ----------- |
+| `<cds-filter-panel>`           | `data-autoid="cds--filter-panel"`           | Component   |
+| `<cds-filter-panel-modal>`     | `data-autoid="cds--filter-panel-modal"`     | Component   |
+| `<cds-filter-panel-composite>` | `data-autoid="cds--filter-panel-composite"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
index 29d5be498e1..924823811d8 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/filter-panel/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef as FilterPanelProps } from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel';
 import { PropTypesRef as FilterPanelInputSelectProps } from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
@@ -20,110 +25,141 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
-import DDSFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
-import DDSFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
-import DDSFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
-import DDSFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
-import DDSFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
-import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+import C4DFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
+import C4DFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
+import C4DFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
+import C4DFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
+import C4DFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
+import C4DFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import C4DFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
 
 function App() {
   return (
-    <DDSFilterPanelComposite>
-      <DDSFilterPanelHeading slot="heading">Filter</DDSFilterPanelHeading>
-      <DDSFilterGroup>
-        <DDSFilterGroupItem title-text="Product types">
-          <DDSFilterPanelCheckbox value="API">API</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Application">Application</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Data Set">Data Set</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Free Trial">Free Trial</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Hardware">Hardware</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Service">Service</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Service Assets">Service Assets</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="Software">Software</DDSFilterPanelCheckbox>
-        </DDSFilterGroupItem>
-        <DDSFilterGroupItem title-text="Technologies">
-          <DDSFilterPanelInputSelect header-value="Analytics" title="Analytics"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="Artificial intelligence" title="Artificial intelligence">
-            <DDSFilterPanelInputSelectItem value="Machine Learning">Machine Learning</DDSFilterPanelInputSelectItem>
-            <DDSFilterPanelInputSelectItem value="Natural language processing"
-              >Natural language processing
-            </DDSFilterPanelInputSelectItem>
-            <DDSFilterPanelInputSelectItem value="Speech recognition"
-              >Speech recognition
-            </DDSFilterPanelInputSelectItem>
-          </DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="Automation" title="Automation"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="Blockchain" title="Blockchain"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="Cloud computing" title="Cloud computing"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+    <C4DFilterPanelComposite>
+      <C4DFilterPanelHeading slot="heading">Filter</C4DFilterPanelHeading>
+      <C4DFilterGroup>
+        <C4DFilterGroupItem title="Product types">
+          <C4DFilterPanelCheckbox value="API">API</C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Application">
+            Application
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Data Set">
+            Data Set
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Free Trial">
+            Free Trial
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Hardware">
+            Hardware
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Service">
+            Service
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Service Assets">
+            Service Assets
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="Software">
+            Software
+          </C4DFilterPanelCheckbox>
+        </C4DFilterGroupItem>
+        <C4DFilterGroupItem title="Technologies">
+          <C4DFilterPanelInputSelect
+            header-value="Analytics"
+            title="Analytics"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="Artificial intelligence"
+            title="Artificial intelligence">
+            <C4DFilterPanelInputSelectItem value="Machine Learning">
+              Machine Learning
+            </C4DFilterPanelInputSelectItem>
+            <C4DFilterPanelInputSelectItem value="Natural language processing">
+              Natural language processing
+            </C4DFilterPanelInputSelectItem>
+            <C4DFilterPanelInputSelectItem value="Speech recognition">
+              Speech recognition
+            </C4DFilterPanelInputSelectItem>
+          </C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="Automation"
+            title="Automation"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="Blockchain"
+            title="Blockchain"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="Cloud computing"
+            title="Cloud computing"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="IT infrastructure"
-            title="IT infrastructure"
-          ></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="IT management" title="IT management"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+            title="IT infrastructure"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="IT management"
+            title="IT management"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="Mobile technologys"
-            title="Mobile technology"
-          ></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="Security" title="Security"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+            title="Mobile technology"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="Security"
+            title="Security"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="Software development"
-            title="Software development"
-          ></DDSFilterPanelInputSelect>
-        </DDSFilterGroupItem>
-        <DDSFilterGroupItem title-text="Business needs">
-          <DDSFilterPanelInputSelect
+            title="Software development"></C4DFilterPanelInputSelect>
+        </C4DFilterGroupItem>
+        <C4DFilterGroupItem title="Business needs">
+          <C4DFilterPanelInputSelect
             header-value="Business operations"
-            title="Business operations"
-          ></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+            title="Business operations"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="Content Management"
-            title="Content Management"
-          ></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+            title="Content Management"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="Customer service"
-            title="Customer service"
-          ></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect header-value="Finance" title="Finance"></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+            title="Customer service"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
+            header-value="Finance"
+            title="Finance"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="Marketing and sales"
-            title="Marketing and sales"
-          ></DDSFilterPanelInputSelect>
-          <DDSFilterPanelInputSelect
+            title="Marketing and sales"></C4DFilterPanelInputSelect>
+          <C4DFilterPanelInputSelect
             header-value="Supply chain management"
-            title="Supply chain management"
-          ></DDSFilterPanelInputSelect>
-        </DDSFilterGroupItem>
-        <DDSFilterGroupItem title-text="Deployment types">
-          <DDSFilterPanelCheckbox value="On-premises">On-premises</DDSFilterPanelCheckbox>
-          <DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
-        </DDSFilterGroupItem>
-      </DDSFilterGroup>
-    </DDSFilterPanelComposite>
+            title="Supply chain management"></C4DFilterPanelInputSelect>
+        </C4DFilterGroupItem>
+        <C4DFilterGroupItem title="Deployment types">
+          <C4DFilterPanelCheckbox value="On-premises">
+            On-premises
+          </C4DFilterPanelCheckbox>
+          <C4DFilterPanelCheckbox value="SaaS">SaaS</C4DFilterPanelCheckbox>
+        </C4DFilterGroupItem>
+      </C4DFilterGroup>
+    </C4DFilterPanelComposite>
   );
 }
 ```
 
 ## Props
 
-# DDSFilterPanel
+# C4DFilterPanel
+
 <Props of={FilterPanelProps} />
 
-# DDSFilterPanelInputSelect
+# C4DFilterPanelInputSelect
+
 <Props of={FilterPanelInputSelectProps} />
 
-# DDSFilterPanelInputSelectItem
+# C4DFilterPanelInputSelectItem
+
 <Props of={FilterPanelInputSelectItemProps} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector         | Description |
-| ----------------------- | ------------------------------ | ----------- |
-| `<dds-filter-panel>`                 | `data-autoid="dds--filter-panel"` | Component   |
-| `<dds-filter-panel-modal>`           | `data-autoid="dds--filter-panel-modal"` | Component   |
-| `<dds-filter-panel-composite>`       | `data-autoid="dds--filter-panel-composite"` | Component   |
+| Web Components selector        | Compatibility selector                      | Description |
+| ------------------------------ | ------------------------------------------- | ----------- |
+| `<cds-filter-panel>`           | `data-autoid="cds--filter-panel"`           | Component   |
+| `<cds-filter-panel-modal>`     | `data-autoid="cds--filter-panel-modal"`     | Component   |
+| `<cds-filter-panel-composite>` | `data-autoid="cds--filter-panel-composite"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx
index 8e2bc0a07ae..f600e8f7f4a 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx
+++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.react.tsx
@@ -12,14 +12,14 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
-import DDSFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
-import DDSFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
-import DDSFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
-import DDSFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
+import C4DFilterGroup from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group';
+import C4DFilterGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-group-item';
+import C4DFilterPanelCheckbox from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-checkbox';
+import C4DFilterPanelComposite from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-composite';
+import C4DFilterPanelHeading from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-heading';
 /* eslint-disable max-len */
-import DDSFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
-import DDSFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
+import C4DFilterPanelInputSelect from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select';
+import C4DFilterPanelInputSelectItem from '@carbon/ibmdotcom-web-components/es/components-react/filter-panel/filter-panel-input-select-item';
 /* eslint-enable max-len */
 
 import readme from './README.stories.react.mdx';
@@ -31,110 +31,110 @@ export const Default = (args) => {
     <>
       <div
         className={`grid-alignment ${
-          gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'
+          gridKnobs === '3 columns' ? 'cds--col-lg-3' : 'cds--col-lg-4'
         }`}
         style={{ paddingRight: '1rem' }}>
-        <DDSFilterPanelComposite>
-          <DDSFilterPanelHeading slot="heading">
+        <C4DFilterPanelComposite>
+          <C4DFilterPanelHeading slot="heading">
             {heading}
-          </DDSFilterPanelHeading>
-          <DDSFilterGroup>
-            <DDSFilterGroupItem title-text="Product types">
-              <DDSFilterPanelCheckbox value="API" checked>
+          </C4DFilterPanelHeading>
+          <C4DFilterGroup>
+            <C4DFilterGroupItem title="Product types">
+              <C4DFilterPanelCheckbox value="API" checked>
                 API
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Application" checked>
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Application" checked>
                 Application
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Data Set" checked>
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Data Set" checked>
                 Data Set
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Free Trial">
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Free Trial">
                 Free Trial
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Hardware">
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Hardware">
                 Hardware
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Service">
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Service">
                 Service
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Service Assets">
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Service Assets">
                 Service Assets
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="Software">
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="Software">
                 Software
-              </DDSFilterPanelCheckbox>
-            </DDSFilterGroupItem>
-            <DDSFilterGroupItem title-text="Technologies">
-              <DDSFilterPanelInputSelect
+              </C4DFilterPanelCheckbox>
+            </C4DFilterGroupItem>
+            <C4DFilterGroupItem title="Technologies">
+              <C4DFilterPanelInputSelect
                 header-value="Analytics"
-                title="Analytics"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Analytics"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Artificial intelligence"
                 title="Artificial intelligence">
-                <DDSFilterPanelInputSelectItem value="Machine Learning">
+                <C4DFilterPanelInputSelectItem value="Machine Learning">
                   Machine Learning
-                </DDSFilterPanelInputSelectItem>
-                <DDSFilterPanelInputSelectItem value="Natural language processing">
+                </C4DFilterPanelInputSelectItem>
+                <C4DFilterPanelInputSelectItem value="Natural language processing">
                   Natural language processing
-                </DDSFilterPanelInputSelectItem>
-                <DDSFilterPanelInputSelectItem value="Speech recognition">
+                </C4DFilterPanelInputSelectItem>
+                <C4DFilterPanelInputSelectItem value="Speech recognition">
                   Speech recognition
-                </DDSFilterPanelInputSelectItem>
-              </DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                </C4DFilterPanelInputSelectItem>
+              </C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Automation"
-                title="Automation"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Automation"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Blockchain"
-                title="Blockchain"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Blockchain"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Cloud computing"
-                title="Cloud computing"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Cloud computing"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="IT infrastructure"
-                title="IT infrastructure"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="IT infrastructure"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="IT management"
-                title="IT management"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="IT management"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Mobile technologys"
-                title="Mobile technology"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Mobile technology"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Security"
-                title="Security"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Security"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Software development"
-                title="Software development"></DDSFilterPanelInputSelect>
-            </DDSFilterGroupItem>
-            <DDSFilterGroupItem title-text="Business needs">
-              <DDSFilterPanelInputSelect
+                title="Software development"></C4DFilterPanelInputSelect>
+            </C4DFilterGroupItem>
+            <C4DFilterGroupItem title="Business needs">
+              <C4DFilterPanelInputSelect
                 header-value="Business operations"
-                title="Business operations"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Business operations"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Content Management"
-                title="Content Management"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Content Management"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Customer service"
-                title="Customer service"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Customer service"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Finance"
-                title="Finance"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Finance"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Marketing and sales"
-                title="Marketing and sales"></DDSFilterPanelInputSelect>
-              <DDSFilterPanelInputSelect
+                title="Marketing and sales"></C4DFilterPanelInputSelect>
+              <C4DFilterPanelInputSelect
                 header-value="Supply chain management"
-                title="Supply chain management"></DDSFilterPanelInputSelect>
-            </DDSFilterGroupItem>
-            <DDSFilterGroupItem title-text="Deployment types">
-              <DDSFilterPanelCheckbox value="On-premises">
+                title="Supply chain management"></C4DFilterPanelInputSelect>
+            </C4DFilterGroupItem>
+            <C4DFilterGroupItem title="Deployment types">
+              <C4DFilterPanelCheckbox value="On-premises">
                 On-premises
-              </DDSFilterPanelCheckbox>
-              <DDSFilterPanelCheckbox value="SaaS">SaaS</DDSFilterPanelCheckbox>
-            </DDSFilterGroupItem>
-          </DDSFilterGroup>
-        </DDSFilterPanelComposite>
+              </C4DFilterPanelCheckbox>
+              <C4DFilterPanelCheckbox value="SaaS">SaaS</C4DFilterPanelCheckbox>
+            </C4DFilterGroupItem>
+          </C4DFilterGroup>
+        </C4DFilterPanelComposite>
       </div>
     </>
   );
@@ -144,8 +144,8 @@ export default {
   title: 'Components/Filter panel',
   decorators: [
     (story) => (
-      <div className="bx--grid bx--grid--condensed">
-        <div className="bx--row">{story()}</div>
+      <div className="cds--grid cds--grid--condensed">
+        <div className="cds--row">{story()}</div>
       </div>
     ),
   ],
diff --git a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
index 61a835455c1..9bfa03e07eb 100644
--- a/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
+++ b/packages/web-components/src/components/filter-panel/__stories__/filter-panel.stories.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { text, select, number } from '@storybook/addon-knobs';
 import '../index';
 import readme from './README.stories.mdx';
@@ -19,143 +19,143 @@ export const Default = (args) => {
     ? parseInt(args?.FilterPanel?.selectedItems)
     : 0;
 
-  const filterPanelHeading = document.querySelector('dds-filter-panel-heading');
+  const filterPanelHeading = document.querySelector('c4d-filter-panel-heading');
   if (filterPanelHeading) {
     filterPanelHeading!.textContent = heading;
   }
 
   return html`
     <div
-      class="${gridKnobs === '3 columns' ? 'bx--col-lg-3' : 'bx--col-lg-4'}"
+      class="${gridKnobs === '3 columns' ? 'cds--col-lg-3' : 'cds--col-lg-4'}"
       style="padding-right: 1rem;">
-      <dds-filter-panel-composite>
-        <dds-filter-panel-heading slot="heading"
-          >${heading}</dds-filter-panel-heading
+      <c4d-filter-panel-composite>
+        <c4d-filter-panel-heading slot="heading"
+          >${heading}</c4d-filter-panel-heading
         >
-        <dds-filter-group>
-          <dds-filter-group-item
-            title-text="Product types"
+        <c4d-filter-group>
+          <c4d-filter-group-item
+            title="Product types"
             filter-cutoff="${filterCutoff}"
             max-filters="${maxFilters}"
             view-all-text="${viewAllText}">
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 1}
               value="API"
-              >API</dds-filter-panel-checkbox
+              >API</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 2}
               value="Application"
-              >Application</dds-filter-panel-checkbox
+              >Application</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 3}
               value="Data Set"
-              >Data Set</dds-filter-panel-checkbox
+              >Data Set</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 4}
               value="Free Trial"
-              >Free Trial</dds-filter-panel-checkbox
+              >Free Trial</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 5}
               value="Hardware"
-              >Hardware</dds-filter-panel-checkbox
+              >Hardware</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 6}
               value="Service"
-              >Service</dds-filter-panel-checkbox
+              >Service</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 7}
               value="Service Assets"
-              >Service Assets</dds-filter-panel-checkbox
+              >Service Assets</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 8}
               value="Software"
-              >Software</dds-filter-panel-checkbox
+              >Software</c4d-filter-panel-checkbox
             >
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Technologies">
-            <dds-filter-panel-input-select
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Technologies">
+            <c4d-filter-panel-input-select
               header-value="Analytics"
-              title="Analytics"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Analytics"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Artificial intelligence"
               title="Artificial intelligence">
-              <dds-filter-panel-input-select-item value="Machine Learning"
-                >Machine Learning</dds-filter-panel-input-select-item
+              <c4d-filter-panel-input-select-item value="Machine Learning"
+                >Machine Learning</c4d-filter-panel-input-select-item
               >
-              <dds-filter-panel-input-select-item
+              <c4d-filter-panel-input-select-item
                 value="Natural language processing"
-                >Natural language processing</dds-filter-panel-input-select-item
+                >Natural language processing</c4d-filter-panel-input-select-item
               >
-              <dds-filter-panel-input-select-item value="Speech recognition"
-                >Speech recognition</dds-filter-panel-input-select-item
+              <c4d-filter-panel-input-select-item value="Speech recognition"
+                >Speech recognition</c4d-filter-panel-input-select-item
               >
-            </dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+            </c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Automation"
-              title="Automation"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Automation"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Blockchain"
-              title="Blockchain"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Blockchain"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Cloud computing"
-              title="Cloud computing"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Cloud computing"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="IT infrastructure"
-              title="IT infrastructure"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="IT infrastructure"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="IT management"
-              title="IT management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="IT management"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Mobile technologys"
-              title="Mobile technology"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Mobile technology"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Security"
-              title="Security"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Security"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Software development"
-              title="Software development"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Business needs">
-            <dds-filter-panel-input-select
+              title="Software development"></c4d-filter-panel-input-select>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Business needs">
+            <c4d-filter-panel-input-select
               header-value="Business operations"
-              title="Business operations"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Business operations"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Content Management"
-              title="Content Management"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Content Management"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Customer service"
-              title="Customer service"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Customer service"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Finance"
-              title="Finance"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Finance"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Marketing and sales"
-              title="Marketing and sales"></dds-filter-panel-input-select>
-            <dds-filter-panel-input-select
+              title="Marketing and sales"></c4d-filter-panel-input-select>
+            <c4d-filter-panel-input-select
               header-value="Supply chain management"
-              title="Supply chain management"></dds-filter-panel-input-select>
-          </dds-filter-group-item>
-          <dds-filter-group-item title-text="Deployment types">
-            <dds-filter-panel-checkbox
+              title="Supply chain management"></c4d-filter-panel-input-select>
+          </c4d-filter-group-item>
+          <c4d-filter-group-item title="Deployment types">
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 9}
               value="On-premises"
-              >On-premises</dds-filter-panel-checkbox
+              >On-premises</c4d-filter-panel-checkbox
             >
-            <dds-filter-panel-checkbox
+            <c4d-filter-panel-checkbox
               ?checked=${selectedItems >= 10}
               value="SaaS"
-              >SaaS</dds-filter-panel-checkbox
+              >SaaS</c4d-filter-panel-checkbox
             >
-          </dds-filter-group-item>
-        </dds-filter-group>
-      </dds-filter-panel-composite>
+          </c4d-filter-group-item>
+        </c4d-filter-group>
+      </c4d-filter-panel-composite>
     </div>
   `;
 };
@@ -165,8 +165,8 @@ export default {
   decorators: [
     (story) =>
       html`
-        <div class="bx--grid bx--grid--condensed">
-          <div class="bx--row">${story()}</div>
+        <div class="cds--grid cds--grid--condensed">
+          <div class="cds--row">${story()}</div>
         </div>
       `,
   ],
diff --git a/packages/web-components/src/components/filter-panel/__tests__/filter-panel.test.ts b/packages/web-components/src/components/filter-panel/__tests__/filter-panel.test.ts
index f886986bcae..c5780a76207 100644
--- a/packages/web-components/src/components/filter-panel/__tests__/filter-panel.test.ts
+++ b/packages/web-components/src/components/filter-panel/__tests__/filter-panel.test.ts
@@ -1,32 +1,32 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../filter-panel-composite';
 import { Default } from '../__stories__/filter-panel.stories';
 
 const template = (props?) =>
   Default({
-    'dds-filter-panel-composite': props,
+    'c4d-filter-panel-composite': props,
   });
 
-describe('dds-filter-panel-composite', function () {
+describe('c4d-filter-panel-composite', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-filter-panel>`
+      await Promise.resolve(); // Update cycle for `<c4d-filter-panel>`
       expect(
-        document.body.querySelector('dds-filter-panel-composite')
+        document.body.querySelector('c4d-filter-panel-composite')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
-    it('should render with various attributes', async function () {
+    xit('should render with various attributes', async function () {
       render(
         template({
           heading: 'Filter',
@@ -34,9 +34,9 @@ describe('dds-filter-panel-composite', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-filter-panel>`
+      await Promise.resolve(); // Update cycle for `<c4d-filter-panel>`
       expect(
-        document.body.querySelector('dds-filter-panel-composite')
+        document.body.querySelector('c4d-filter-panel-composite')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/filter-panel/filter-group-item.ts b/packages/web-components/src/components/filter-panel/filter-group-item.ts
index ae50c585ac1..995f9bd2ff2 100644
--- a/packages/web-components/src/components/filter-panel/filter-group-item.ts
+++ b/packages/web-components/src/components/filter-panel/filter-group-item.ts
@@ -7,35 +7,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, query, state } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import BXAccordionItem from '../../internal/vendor/@carbon/web-components/components/accordion/accordion-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property, query, state } from 'lit/decorators.js';
+import CDSAccordionItem from '../../internal/vendor/@carbon/web-components/components/accordion/accordion-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './filter-panel.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSFilterPanelComposite from './filter-panel-composite';
-import DDSFilterPanelCheckbox from './filter-panel-checkbox';
-import DDSFilterPanelInputSelectItem from './filter-panel-input-select-item';
-import DDSFilterPanelInputSelect from './filter-panel-input-select';
+import C4DFilterPanelComposite from './filter-panel-composite';
+import C4DFilterPanelCheckbox from './filter-panel-checkbox';
+import C4DFilterPanelInputSelectItem from './filter-panel-input-select-item';
+import C4DFilterPanelInputSelect from './filter-panel-input-select';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
-const viewAllClassName = `${ddsPrefix}-filter-group-item__view-all`;
+const viewAllClassName = `${c4dPrefix}-filter-group-item__view-all`;
 
 /**
- * DDSFilterGroupItem renders each individual accordion
+ * C4DFilterGroupItem renders each individual accordion
  *
- * @element dds-filter-group-item
+ * @element c4d-filter-group-item
  */
-@customElement(`${ddsPrefix}-filter-group-item`)
-class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
+@customElement(`${c4dPrefix}-filter-group-item`)
+class C4DFilterGroupItem extends StableSelectorMixin(CDSAccordionItem) {
   /**
-   * Extends BXAccordionItem component
+   * Extends CDSAccordionItem component
    */
   static get stableSelector() {
-    return `${ddsPrefix}--filter-group-item`;
+    return `${c4dPrefix}--filter-group-item`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -95,12 +93,12 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
     let result: boolean = false;
 
     [...children].slice(filterCutoff, children.length).forEach((elem) => {
-      if (elem instanceof DDSFilterPanelCheckbox) {
+      if (elem instanceof C4DFilterPanelCheckbox) {
         if (elem.checked) result = true;
       }
       if (
-        elem instanceof DDSFilterPanelInputSelectItem ||
-        elem instanceof DDSFilterPanelInputSelect
+        elem instanceof C4DFilterPanelInputSelectItem ||
+        elem instanceof C4DFilterPanelInputSelect
       ) {
         if (elem.selected) result = true;
       }
@@ -161,14 +159,14 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
    * filter group has all options revealed.
    */
   protected _dispatchViewAllEvent(removed: boolean): void {
-    const { eventViewAll } = this.constructor as typeof DDSFilterGroupItem;
+    const { eventViewAll } = this.constructor as typeof C4DFilterGroupItem;
     this.dispatchEvent(
       new CustomEvent(eventViewAll, {
         bubbles: true,
         cancelable: true,
         composed: true,
         detail: {
-          id: this.titleText,
+          id: this.title,
           value: removed,
         },
       })
@@ -180,10 +178,10 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
    * internal value if no cache is found.
    */
   protected _getCachedViewAllValue(): boolean {
-    const { allRevealed, titleText } = this;
+    const { allRevealed, title } = this;
     let result: boolean = allRevealed;
 
-    const filterPanel = this.closest('dds-filter-panel');
+    const filterPanel = this.closest('c4d-filter-panel');
     if (filterPanel !== null) {
       // Indicates this is composite's duplicated content.
       let parentHost: Element | undefined;
@@ -191,9 +189,9 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
       if (parent instanceof ShadowRoot) {
         parentHost = parent.host;
       }
-      if (parentHost instanceof DDSFilterPanelComposite) {
+      if (parentHost instanceof C4DFilterPanelComposite) {
         const match = parentHost._filterGroupsAllRevealed.find((entry) => {
-          return entry.id === titleText;
+          return entry.id === title;
         });
         if (match !== undefined) {
           result = match.value;
@@ -244,9 +242,9 @@ class DDSFilterGroupItem extends StableSelectorMixin(BXAccordionItem) {
    * The name of the event that fires when the view all button is toggled.
    */
   static get eventViewAll() {
-    return `${ddsPrefix}-filter-group-view-all-toggle`;
+    return `${c4dPrefix}-filter-group-view-all-toggle`;
   }
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterGroupItem;
+export default C4DFilterGroupItem;
diff --git a/packages/web-components/src/components/filter-panel/filter-group.ts b/packages/web-components/src/components/filter-panel/filter-group.ts
index 0064085111d..d4385b1b28e 100644
--- a/packages/web-components/src/components/filter-panel/filter-group.ts
+++ b/packages/web-components/src/components/filter-panel/filter-group.ts
@@ -7,31 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXAccordion from '../../internal/vendor/@carbon/web-components/components/accordion/accordion.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSAccordion from '../../internal/vendor/@carbon/web-components/components/accordion/accordion.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import './filter-panel-input-select';
 import styles from './filter-panel.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Filter group renders the entire accordion group.
  *
- * @element dds-filter-group
+ * @element c4d-filter-group
  */
-@customElement(`${ddsPrefix}-filter-group`)
-class DDSFilterGroup extends StableSelectorMixin(BXAccordion) {
+@customElement(`${c4dPrefix}-filter-group`)
+class C4DFilterGroup extends StableSelectorMixin(CDSAccordion) {
   /**
-   * Extends BXAccordion component
+   * Extends CDSAccordion component
    */
   static get stableSelector() {
-    return `${ddsPrefix}-filter-group`;
+    return `${c4dPrefix}-filter-group`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterGroup;
+export default C4DFilterGroup;
diff --git a/packages/web-components/src/components/filter-panel/filter-modal-button.ts b/packages/web-components/src/components/filter-panel/filter-modal-button.ts
index 2a7e04be00b..66ca41f7046 100644
--- a/packages/web-components/src/components/filter-panel/filter-modal-button.ts
+++ b/packages/web-components/src/components/filter-panel/filter-modal-button.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXModalFooterButton from '../../internal/vendor/@carbon/web-components/components/modal/modal-footer-button.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSModalFooterButton from '../../internal/vendor/@carbon/web-components/components/modal/modal-footer-button.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * Extends the BXModalFooterButton.
+ * Extends the CDSModalFooterButton.
  *
- * @element dds-filter-modal-footer-button
+ * @element c4d-filter-modal-footer-button
  */
-@customElement(`${ddsPrefix}-filter-modal-footer-button`)
-class DDSFilterModalButton extends StableSelectorMixin(BXModalFooterButton) {
+@customElement(`${c4dPrefix}-filter-modal-footer-button`)
+class C4DFilterModalButton extends StableSelectorMixin(CDSModalFooterButton) {
   static get stableSelector() {
-    return `${ddsPrefix}-filter-modal-footer-button`;
+    return `${c4dPrefix}-filter-modal-footer-button`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterModalButton;
+export default C4DFilterModalButton;
diff --git a/packages/web-components/src/components/filter-panel/filter-modal-footer.ts b/packages/web-components/src/components/filter-panel/filter-modal-footer.ts
index f421d7317b9..c6b8cb0d958 100644
--- a/packages/web-components/src/components/filter-panel/filter-modal-footer.ts
+++ b/packages/web-components/src/components/filter-panel/filter-modal-footer.ts
@@ -7,28 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXModalFooter from '../../internal/vendor/@carbon/web-components/components/modal/modal-footer.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSModalFooter from '../../internal/vendor/@carbon/web-components/components/modal/modal-footer.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import './filter-panel-input-select';
 import styles from './filter-panel.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * extends the BXModalFooter
+ * extends the CDSModalFooter
  *
- * @element dds-filter-modal-footer
+ * @element c4d-filter-modal-footer
  */
-@customElement(`${ddsPrefix}-filter-modal-footer`)
-class DDSFilterModalFooter extends StableSelectorMixin(BXModalFooter) {
+@customElement(`${c4dPrefix}-filter-modal-footer`)
+class C4DFilterModalFooter extends StableSelectorMixin(CDSModalFooter) {
   static get stableSelector() {
-    return `${ddsPrefix}-filter-modal-footer`;
+    return `${c4dPrefix}-filter-modal-footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterModalFooter;
+export default C4DFilterModalFooter;
diff --git a/packages/web-components/src/components/filter-panel/filter-modal-heading.ts b/packages/web-components/src/components/filter-panel/filter-modal-heading.ts
index 2b5bec3b514..58f37fb688d 100644
--- a/packages/web-components/src/components/filter-panel/filter-modal-heading.ts
+++ b/packages/web-components/src/components/filter-panel/filter-modal-heading.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXModalHeading from '../../internal/vendor/@carbon/web-components/components/modal/modal-heading.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSModalHeading from '../../internal/vendor/@carbon/web-components/components/modal/modal-heading.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * Extends the BXModalHeading
+ * Extends the CDSModalHeading
  *
- * @element dds-filter-modal-heading
+ * @element c4d-filter-modal-heading
  */
-@customElement(`${ddsPrefix}-filter-modal-heading`)
-class DDSFilterModalHeading extends StableSelectorMixin(BXModalHeading) {
+@customElement(`${c4dPrefix}-filter-modal-heading`)
+class C4DFilterModalHeading extends StableSelectorMixin(CDSModalHeading) {
   static get stableSelector() {
-    return `${ddsPrefix}-filter-modal-heading`;
+    return `${c4dPrefix}-filter-modal-heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterModalHeading;
+export default C4DFilterModalHeading;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts b/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts
index 414b8f1af12..09eb683f18d 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-checkbox.ts
@@ -7,25 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXCheckbox from '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox';
+import CDSCheckbox from '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import '../../internal/vendor/@carbon/web-components/components/modal/modal';
 import styles from './filter-panel.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Filter Panel Checkbox
  *
- * @element dds-filter-panel-checkbox
- * @fires dds-checkbox-select - The custom event fired after this changebox changes its checked state.
+ * @element c4d-filter-panel-checkbox
+ * @fires c4d-checkbox-select - The custom event fired after this changebox changes its checked state.
  */
-@customElement(`${ddsPrefix}-filter-panel-checkbox`)
-class DDSFilterPanelCheckbox extends FocusMixin(
-  StableSelectorMixin(BXCheckbox)
+@customElement(`${c4dPrefix}-filter-panel-checkbox`)
+class C4DFilterPanelCheckbox extends FocusMixin(
+  StableSelectorMixin(CDSCheckbox)
 ) {
   /**
    * Handles `click` event on the `<input>` in the shadow DOM.
@@ -34,7 +34,7 @@ class DDSFilterPanelCheckbox extends FocusMixin(
     const { checked, indeterminate } = this._checkboxNode;
     this.checked = checked;
     this.indeterminate = indeterminate;
-    const { eventChange } = this.constructor as typeof BXCheckbox;
+    const { eventChange } = this.constructor as typeof CDSCheckbox;
     this.dispatchEvent(
       new CustomEvent(eventChange, {
         bubbles: true,
@@ -50,15 +50,15 @@ class DDSFilterPanelCheckbox extends FocusMixin(
    * The name of the event that fires upon checkbox is selected
    */
   static get eventChange() {
-    return `${ddsPrefix}-checkbox-select`;
+    return `${c4dPrefix}-checkbox-select`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-filter-panel-checkbox`;
+    return `${c4dPrefix}-filter-panel-checkbox`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanelCheckbox;
+export default C4DFilterPanelCheckbox;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts
index fd92a060673..43cfd051279 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-composite.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-composite.ts
@@ -7,45 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  html,
-  LitElement,
-  property,
-  state,
-  TemplateResult,
-  query,
-} from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html, LitElement, TemplateResult } from 'lit';
+import { property, state, query } from 'lit/decorators.js';
 import Filter from '../../internal/vendor/@carbon/web-components/icons/filter/16.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import './filter-group';
 import './filter-panel';
 import './filter-panel-modal';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
 import '../../internal/vendor/@carbon/web-components/components/checkbox/checkbox.js';
-import DDSFilterGroupItem from './filter-group-item';
-import DDSFilterPanelCheckbox from './filter-panel-checkbox';
-import DDSFilterPanelInputSelect from './filter-panel-input-select';
-import DDSFilterPanelInputSelectItem from './filter-panel-input-select-item';
+import '../../internal/vendor/@carbon/web-components/components/button/button.js';
+import C4DFilterGroupItem from './filter-group-item';
+import C4DFilterPanelCheckbox from './filter-panel-checkbox';
+import C4DFilterPanelInputSelect from './filter-panel-input-select';
+import C4DFilterPanelInputSelectItem from './filter-panel-input-select-item';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 import MediaQueryMixin, {
   MQBreakpoints,
   MQDirs,
 } from '../../component-mixins/media-query/media-query';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Filter panel composite
  *
- * @element dds-filter-panel-composite
+ * @element c4d-filter-panel-composite
  */
-@customElement(`${ddsPrefix}-filter-panel-composite`)
-class DDSFilterPanelComposite extends MediaQueryMixin(
+@customElement(`${c4dPrefix}-filter-panel-composite`)
+class C4DFilterPanelComposite extends MediaQueryMixin(
   HostListenerMixin(StableSelectorMixin(LitElement)),
   { [MQBreakpoints.LG]: MQDirs.MAX }
 ) {
@@ -59,10 +52,10 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
   protected _handleInputSelectItemStateChange = (event: CustomEvent) => {
     const { value, lastValue, headerValue } = event.detail;
 
-    const { stableSelector } = DDSFilterPanelInputSelectItem;
+    const { stableSelector } = C4DFilterPanelInputSelectItem;
     this._focusElement = `${stableSelector}[value="${value}"]`;
 
-    // Remove the DDSInputSelect (header) value from list to add an inner child instead.
+    // remove the C4DInputSelect (header) value from list to add an inner child instead
     this._selectedValues = this._selectedValues.filter(
       (e) => e !== headerValue
     );
@@ -93,25 +86,25 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
   protected _handleCheckboxStateChange = (event: CustomEvent) => {
     const { value } = event.detail;
 
-    // Toggle checkbox in filter panel modal.
-    this.querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`).forEach((e) => {
+    // toggle checkbox in filter panel modal
+    this.querySelectorAll(`${c4dPrefix}-filter-panel-checkbox`).forEach((e) => {
       if (e.getAttribute('value') === value) {
         e.toggleAttribute('checked');
-        e.closest(`${ddsPrefix}-filter-group-item`)?.setAttribute('open', '');
+        e.closest(`${c4dPrefix}-filter-group-item`)?.setAttribute('open', '');
 
-        const { stableSelector } = DDSFilterPanelCheckbox;
+        const { stableSelector } = C4DFilterPanelCheckbox;
         this._focusElement = `${stableSelector}[value="${value}"]`;
       }
     });
 
     const filterGroupItems = this.querySelectorAll(
-      `${ddsPrefix}-filter-group-item`
+      `${c4dPrefix}-filter-group-item`
     );
     this.shadowRoot
-      ?.querySelectorAll(`${ddsPrefix}-filter-group-item`)
+      ?.querySelectorAll(`${c4dPrefix}-filter-group-item`)
       .forEach((filterGroupItem, index) => {
-        if ((filterGroupItem as DDSFilterGroupItem).open) {
-          (filterGroupItems[index] as DDSFilterGroupItem).open = true;
+        if ((filterGroupItem as C4DFilterGroupItem).open) {
+          (filterGroupItems[index] as C4DFilterGroupItem).open = true;
         }
       });
 
@@ -163,20 +156,20 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
   protected _handleInputSelectStateChange = (event: CustomEvent) => {
     const { headerValue } = event.detail;
 
-    const { stableSelector } = DDSFilterPanelInputSelect;
+    const { stableSelector } = C4DFilterPanelInputSelect;
     this._focusElement = `${stableSelector}[header-value="${headerValue}"]`;
 
-    // Toggle checkbox in filter panel modal.
-    this.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`).forEach(
+    // toggle checkbox in filter panel modal
+    this.querySelectorAll(`${c4dPrefix}-filter-panel-input-select`).forEach(
       (e) => {
         // Capture the element counterpart in Filter Panel Modal.
         if (e.getAttribute('header-value') === headerValue) {
-          const currentGroup = e.closest(`${ddsPrefix}-filter-group-item`);
+          const currentGroup = e.closest(`${c4dPrefix}-filter-group-item`);
           currentGroup?.setAttribute('open', '');
 
           // Clears all other sibling items in the Filter Group
           currentGroup
-            ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)
+            ?.querySelectorAll(`${c4dPrefix}-filter-panel-input-select`)
             .forEach((inputSelect) => {
               if (inputSelect === e) return;
               this._selectedValues = this._selectedValues.filter(
@@ -225,18 +218,18 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
     // Handles clear when clearing from the static filter panel modal.
     this._contents.forEach((group) => {
       group
-        .querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`)
+        .querySelectorAll(`${c4dPrefix}-filter-panel-checkbox`)
         .forEach((e) => {
           e.removeAttribute('checked');
         });
       group
-        .querySelectorAll(`${ddsPrefix}-filter-panel-input-select-item`)
+        .querySelectorAll(`${c4dPrefix}-filter-panel-input-select-item`)
         .forEach((e) => {
           e.removeAttribute('selected');
           e.removeAttribute('is-open');
         });
       group
-        .querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)
+        .querySelectorAll(`${c4dPrefix}-filter-panel-input-select`)
         .forEach((e) => {
           e.removeAttribute('selected');
           e.removeAttribute('is-open');
@@ -245,18 +238,18 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
 
     // handles clear when clearing from the filter panel static
     this.shadowRoot
-      ?.querySelectorAll(`${ddsPrefix}-filter-panel-checkbox`)
+      ?.querySelectorAll(`${c4dPrefix}-filter-panel-checkbox`)
       .forEach((e) => {
         e.removeAttribute('checked');
       });
     this.shadowRoot
-      ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select-item`)
+      ?.querySelectorAll(`${c4dPrefix}-filter-panel-input-select-item`)
       .forEach((e) => {
         e.removeAttribute('selected');
         e.removeAttribute('is-open');
       });
     this.shadowRoot
-      ?.querySelectorAll(`${ddsPrefix}-filter-panel-input-select`)
+      ?.querySelectorAll(`${c4dPrefix}-filter-panel-input-select`)
       .forEach((e) => {
         e.removeAttribute('selected');
         e.removeAttribute('is-open');
@@ -354,13 +347,13 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
         (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
       );
     // Calculate initial this._selectedValues. Look at the first node, which is
-    // expected to be <dds-filter-group>.
+    // expected to be <c4d-filter-group>.
     if (this._contents[0] instanceof Element) {
       const items = Array.from(
         this._contents[0].querySelectorAll(
-          `${ddsPrefix}-filter-panel-checkbox[checked],
-            ${ddsPrefix}-filter-panel-input-select[selected],
-            ${ddsPrefix}-filter-panel-input-select-item[selected]`
+          `${c4dPrefix}-filter-panel-checkbox[checked],
+            ${c4dPrefix}-filter-panel-input-select[selected],
+            ${c4dPrefix}-filter-panel-input-select-item[selected]`
         )
       );
       this._selectedValues = items
@@ -417,20 +410,19 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    * content to then be stored in `this._heading` and `this._contents`.
    */
   protected _renderModal = (): TemplateResult => html`
-    <dds-filter-panel-modal
+    <c4d-filter-panel-modal
       ?open=${this.openFilterModal}
       heading="${this._getComposedHeadingFilterCount()}"
       ?has-selections="${this._selectedValues.length}">
       <slot @slotchange="${this._handleSlotChange}"></slot>
-    </dds-filter-panel-modal>
+    </c4d-filter-panel-modal>
   `;
 
   protected _renderMobile = (): TemplateResult => html`
-    <button class="bx--filter-button" @click=${this._openModal}>
-      <div class="${prefix}--filter__modal__button">
-        ${this._getComposedHeadingFilterCount()} ${Filter()}
-      </div>
-    </button>
+    <cds-button kind="tertiary" @click=${this._openModal}>
+      ${this._getComposedHeadingFilterCount()} ${Filter({ slot: 'icon' })}
+    </cds-button>
+
     ${this._renderModal()}
   `;
 
@@ -438,11 +430,11 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    * Renders copies of slotted elements into the desktop presentation.
    */
   protected _renderDesktop = (): TemplateResult => html`
-    <dds-filter-panel
+    <c4d-filter-panel
       heading="${this._getComposedHeadingFilterCount()}"
       ?has-selections="${this._selectedValues.length}">
       <slot @slotchange="${this._handleSlotChange}"></slot>
-    </dds-filter-panel>
+    </c4d-filter-panel>
   `;
 
   render() {
@@ -478,7 +470,7 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    */
 
   static get eventCheckboxSelect() {
-    return `${ddsPrefix}-checkbox-select`;
+    return `${c4dPrefix}-checkbox-select`;
   }
 
   /**
@@ -486,7 +478,7 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    */
 
   static get eventInputSelectItem() {
-    return `${ddsPrefix}-filter-panel-input-select`;
+    return `${c4dPrefix}-filter-panel-input-select`;
   }
 
   /**
@@ -495,7 +487,7 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    */
 
   static get eventFilterGroupViewAllToggle() {
-    return `${ddsPrefix}-filter-group-view-all-toggle`;
+    return `${c4dPrefix}-filter-group-view-all-toggle`;
   }
 
   /**
@@ -511,7 +503,7 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    */
 
   static get eventInputSelect() {
-    return `${ddsPrefix}-filter-panel-input-select-title`;
+    return `${c4dPrefix}-filter-panel-input-select-title`;
   }
 
   /**
@@ -519,7 +511,7 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    */
 
   static get eventSelectionClear() {
-    return `${ddsPrefix}-selection-clear`;
+    return `${c4dPrefix}-selection-clear`;
   }
 
   /**
@@ -527,15 +519,15 @@ class DDSFilterPanelComposite extends MediaQueryMixin(
    */
 
   static get eventHeadingChange() {
-    return `${ddsPrefix}-filter-panel-heading-change`;
+    return `${c4dPrefix}-filter-panel-heading-change`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-filter-panel-composite`;
+    return `${c4dPrefix}-filter-panel-composite`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanelComposite;
+export default C4DFilterPanelComposite;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-heading.ts b/packages/web-components/src/components/filter-panel/filter-panel-heading.ts
index 4982d463f2d..e7841b58457 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-heading.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-heading.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './filter-panel.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content of filter panel.
  *
- * @element dds-filter-panel-heading
+ * @element c4d-filter-panel-heading
  */
-@customElement(`${ddsPrefix}-filter-panel-heading`)
-class DDSFilterPanelHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-filter-panel-heading`)
+class C4DFilterPanelHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this heading content should be in.
    */
@@ -39,7 +40,7 @@ class DDSFilterPanelHeading extends StableSelectorMixin(LitElement) {
   }
 
   protected _handleSlotChange = () => {
-    const { eventChange } = this.constructor as typeof DDSFilterPanelHeading;
+    const { eventChange } = this.constructor as typeof C4DFilterPanelHeading;
     this.dispatchEvent(
       new CustomEvent(eventChange, {
         bubbles: true,
@@ -54,14 +55,14 @@ class DDSFilterPanelHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--filter-panel-heading`;
+    return `${c4dPrefix}--filter-panel-heading`;
   }
 
   /**
    * The event name when this element changes.
    */
   static get eventChange() {
-    return `${ddsPrefix}-filter-panel-heading-change`;
+    return `${c4dPrefix}-filter-panel-heading-change`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -69,4 +70,4 @@ class DDSFilterPanelHeading extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanelHeading;
+export default C4DFilterPanelHeading;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts b/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts
index 4c29ceb73a9..b9f52f18ec0 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-input-select-item.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Close from '../../internal/vendor/@carbon/web-components/icons/close/16.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The input select inner dropdown.
  *
- * @element dds-filter-panel-input-select-item
+ * @element c4d-filter-panel-input-select-item
  */
-@customElement(`${ddsPrefix}-filter-panel-input-select-item`)
-class DDSFilterPanelInputSelectItem extends FocusMixin(
+@customElement(`${c4dPrefix}-filter-panel-input-select-item`)
+class C4DFilterPanelInputSelectItem extends FocusMixin(
   StableSelectorMixin(LitElement)
 ) {
   /**
@@ -92,11 +91,11 @@ class DDSFilterPanelInputSelectItem extends FocusMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-filter-panel-input-select-item`;
+    return `${c4dPrefix}-filter-panel-input-select-item`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanelInputSelectItem;
+export default C4DFilterPanelInputSelectItem;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts
index eae94e82da6..e46126b677f 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-input-select.ts
@@ -7,26 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Close from '../../internal/vendor/@carbon/web-components/icons/close/16.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
-import DDSFilterPanelInputSelectItem from './filter-panel-input-select-item';
+import C4DFilterPanelInputSelectItem from './filter-panel-input-select-item';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The container of the input select.
  *
- * @element dds-filter-panel-input-select
+ * @element c4d-filter-panel-input-select
  */
-@customElement(`${ddsPrefix}-filter-panel-input-select`)
-class DDSFilterPanelInputSelect extends FocusMixin(
+@customElement(`${c4dPrefix}-filter-panel-input-select`)
+class C4DFilterPanelInputSelect extends FocusMixin(
   StableSelectorMixin(LitElement)
 ) {
   @property()
@@ -63,7 +62,7 @@ class DDSFilterPanelInputSelect extends FocusMixin(
   lastValue: any;
 
   static get selectorItem() {
-    return `${ddsPrefix}-filter-panel-input-select-item`;
+    return `${c4dPrefix}-filter-panel-input-select-item`;
   }
 
   /**
@@ -73,10 +72,10 @@ class DDSFilterPanelInputSelect extends FocusMixin(
    */
   protected _handleClickInner(event) {
     const { eventContentStateChange } = this
-      .constructor as typeof DDSFilterPanelInputSelect;
+      .constructor as typeof C4DFilterPanelInputSelect;
     const selected = (event.target as Element).closest(
-      (this.constructor as typeof DDSFilterPanelInputSelect).selectorItem
-    ) as DDSFilterPanelInputSelectItem;
+      (this.constructor as typeof C4DFilterPanelInputSelect).selectorItem
+    ) as C4DFilterPanelInputSelectItem;
     if (selected.hasAttribute('selected')) {
       selected.removeAttribute('selected');
     } else {
@@ -145,7 +144,7 @@ class DDSFilterPanelInputSelect extends FocusMixin(
    */
   protected _handleClickHeader() {
     const { eventInputSelect } = this
-      .constructor as typeof DDSFilterPanelInputSelect;
+      .constructor as typeof C4DFilterPanelInputSelect;
     this.isOpen = !this.isOpen;
     this.selected = !this.selected;
     this.dispatchEvent(
@@ -183,6 +182,11 @@ class DDSFilterPanelInputSelect extends FocusMixin(
         ?.querySelector(`.${prefix}--input-container__heading`)
         ?.setAttribute('aria-expanded', String(Boolean(this.isOpen)));
     }
+    if (this._items.length) {
+      this.shadowRoot
+        ?.querySelector(`.${prefix}--input-container__heading`)
+        ?.setAttribute('aria-expanded', String(Boolean(this.isOpen)));
+    }
   }
 
   render() {
@@ -219,22 +223,22 @@ class DDSFilterPanelInputSelect extends FocusMixin(
    * The name of the custom event fired upon selecting the title
    */
   static get eventInputSelect() {
-    return `${ddsPrefix}-filter-panel-input-select-title`;
+    return `${c4dPrefix}-filter-panel-input-select-title`;
   }
 
   /**
    * The name of the custom event fired after the search content is changed upon a user gesture.
    */
   static get eventContentStateChange() {
-    return `${ddsPrefix}-filter-panel-input-select`;
+    return `${c4dPrefix}-filter-panel-input-select`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-filter-panel-input-select`;
+    return `${c4dPrefix}-filter-panel-input-select`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanelInputSelect;
+export default C4DFilterPanelInputSelect;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
index c8e9b887890..ef451880487 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel-modal.ts
@@ -7,14 +7,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import './filter-group';
 import './filter-modal-button';
 import './filter-modal-heading';
-import DDSExpressiveModal from '../expressive-modal/expressive-modal';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DExpressiveModal from '../expressive-modal/expressive-modal';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import './filter-modal-footer';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
@@ -23,17 +23,16 @@ import '../../internal/vendor/@carbon/web-components/components/modal/modal-clos
 import '../../internal/vendor/@carbon/web-components/components/modal/modal-header.js';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Renders the filter panel modal
  *
- * @element dds-filter-panel-modal
+ * @element c4d-filter-panel-modal
  */
-@customElement(`${ddsPrefix}-filter-panel-modal`)
-class DDSFilterPanelModal extends HostListenerMixin(
-  StableSelectorMixin(DDSExpressiveModal)
+@customElement(`${c4dPrefix}-filter-panel-modal`)
+class C4DFilterPanelModal extends HostListenerMixin(
+  StableSelectorMixin(C4DExpressiveModal)
 ) {
   /**
    * Renders the selected values.
@@ -49,7 +48,7 @@ class DDSFilterPanelModal extends HostListenerMixin(
    */
   protected _handleClear() {
     const { eventSelectionClear } = this
-      .constructor as typeof DDSFilterPanelModal;
+      .constructor as typeof C4DFilterPanelModal;
     this.dispatchEvent(
       new CustomEvent(eventSelectionClear, {
         bubbles: true,
@@ -91,7 +90,7 @@ class DDSFilterPanelModal extends HostListenerMixin(
       if (
         this.dispatchEvent(
           new CustomEvent(
-            (this.constructor as typeof DDSExpressiveModal).eventBeforeClose,
+            (this.constructor as typeof C4DExpressiveModal).eventBeforeClose,
             init
           )
         )
@@ -99,7 +98,7 @@ class DDSFilterPanelModal extends HostListenerMixin(
         this.open = false;
         this.dispatchEvent(
           new CustomEvent(
-            (this.constructor as typeof DDSExpressiveModal).eventClose,
+            (this.constructor as typeof C4DExpressiveModal).eventClose,
             init
           )
         );
@@ -117,26 +116,27 @@ class DDSFilterPanelModal extends HostListenerMixin(
         @focusin="${handleFocusIn}">
         START
       </button>
-      <section class="${prefix}--filter-panel__section bx--modal-container">
-        <bx-modal-header>
-          <bx-modal-close-button
-            @click=${this._handleUserClose}></bx-modal-close-button>
-          <dds-filter-modal-heading>${this.heading}</dds-filter-modal-heading>
-        </bx-modal-header>
+      <section
+        class="${prefix}--filter-panel__section ${prefix}--modal-container">
+        <cds-modal-header>
+          <cds-modal-close-button
+            @click=${this._handleUserClose}></cds-modal-close-button>
+          <c4d-filter-modal-heading>${this.heading}</c4d-filter-modal-heading>
+        </cds-modal-header>
         <div class="${prefix}--modal-body"><slot></slot></div>
-        <dds-filter-modal-footer>
-          <dds-filter-modal-footer-button
+        <c4d-filter-modal-footer>
+          <c4d-filter-modal-footer-button
             ?disabled="${!this.hasSelections}"
             @click=${this._handleClear}
-            kind="tertiary"
-            >Clear</dds-filter-modal-footer-button
+            kind="secondary"
+            >Clear</c4d-filter-modal-footer-button
           >
-          <dds-filter-modal-footer-button
+          <c4d-filter-modal-footer-button
             @click=${this._handleUserClose}
             kind="primary"
-            >See Results</dds-filter-modal-footer-button
+            >See Results</c4d-filter-modal-footer-button
           >
-        </dds-filter-modal-footer>
+        </c4d-filter-modal-footer>
       </section>
       <button
         id="end-sentinel"
@@ -159,7 +159,7 @@ class DDSFilterPanelModal extends HostListenerMixin(
    */
 
   static get eventSelectionClear() {
-    return `${ddsPrefix}-selection-clear`;
+    return `${c4dPrefix}-selection-clear`;
   }
 
   /**
@@ -167,15 +167,15 @@ class DDSFilterPanelModal extends HostListenerMixin(
    */
 
   static get selectorHeading() {
-    return `${ddsPrefix}-filter-panel-heading`;
+    return `${c4dPrefix}-filter-panel-heading`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-filter-panel-modal`;
+    return `${c4dPrefix}-filter-panel-modal`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanelModal;
+export default C4DFilterPanelModal;
diff --git a/packages/web-components/src/components/filter-panel/filter-panel.scss b/packages/web-components/src/components/filter-panel/filter-panel.scss
index 9b3fb64a41f..5f686f836f8 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel.scss
+++ b/packages/web-components/src/components/filter-panel/filter-panel.scss
@@ -1,115 +1,10 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 '@carbon/ibmdotcom-styles/scss/components/filter-panel/filter-panel';
-@import '@carbon/web-components/scss/components/modal/modal';
-
-:host(#{$dds-prefix}-filter-panel-modal) {
-  @extend :host(#{$prefix}-modal);
-
-  left: 0;
-
-  @include carbon--breakpoint('lg') {
-    display: none;
-  }
-
-  &[open] {
-    @extend :host(#{$prefix}-modal[open]);
-    @include carbon--breakpoint('lg') {
-      display: none;
-    }
-  }
-
-  &[expressive-size='full-width'] {
-    .#{$prefix}--modal-container {
-      max-height: none;
-
-      @include carbon--breakpoint('lg') {
-        width: calc(100% - 2rem);
-        height: calc(100% - 2rem);
-      }
-
-      .#{$prefix}--modal-content {
-        margin: $layout-04 $layout-03;
-        padding: 0;
-      }
-    }
-  }
-  .#{$prefix}--filter-panel__section.#{$prefix}--modal-container {
-    overflow: initial;
-    @include carbon--breakpoint('md') {
-      height: 80%;
-      width: 60%;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-filter-group-item) {
-  .#{$dds-prefix}-filter-group-item__view-all {
-    width: 100%;
-    padding: $spacing-03 $spacing-05;
-    text-align: left;
-    cursor: pointer;
-
-    &:focus-visible {
-      outline: none;
-      border-color: $focus;
-      box-shadow: inset 0 0 0 $button-outline-width $focus,
-        inset 0 0 0 $button-border-width $ui-background;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-filter-modal-footer-button) {
-  @extend :host(#{$prefix}-modal-footer-button);
-
-  outline: 0;
-
-  &[kind='tertiary'] {
-    background-color: $interactive-02;
-    color: $text-04;
-  }
-
-  &[disabled] {
-    background-color: $disabled-02;
-    color: $disabled-03;
-  }
-
-  .#{$prefix}--btn {
-    @include carbon--type-style('body-short-01');
-
-    max-width: none;
-    width: 100%;
-    border: none;
-    height: rem(64px);
-  }
-
-  .#{$prefix}--btn--tertiary {
-    color: $text-04;
-
-    &:hover {
-      background-color: $hover-secondary;
-    }
-
-    &[disabled] {
-      color: $disabled-03;
-
-      &:hover {
-        background-color: transparent;
-      }
-    }
-  }
-
-  .#{$prefix}--btn.#{$prefix}--btn--primary:focus {
-    box-shadow: inset 0 0 0 $button-outline-width $focus,
-      inset 0 0 0 $button-border-width $ui-background;
-    border: 1px solid $focus;
-    inset: $text-04;
-  }
-}
+@use '../../../../styles/scss/components/filter-panel';
diff --git a/packages/web-components/src/components/filter-panel/filter-panel.ts b/packages/web-components/src/components/filter-panel/filter-panel.ts
index 755809b229e..346bdefbd25 100644
--- a/packages/web-components/src/components/filter-panel/filter-panel.ts
+++ b/packages/web-components/src/components/filter-panel/filter-panel.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Reset from '../../internal/vendor/@carbon/web-components/icons/reset/16.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './filter-panel.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The filter panel.
  *
- * @element dds-filter-panel
+ * @element c4d-filter-panel
  */
-@customElement(`${ddsPrefix}-filter-panel`)
-class DDSFilterPanel extends HostListenerMixin(
+@customElement(`${c4dPrefix}-filter-panel`)
+class C4DFilterPanel extends HostListenerMixin(
   StableSelectorMixin(LitElement)
 ) {
   /**
@@ -38,7 +37,7 @@ class DDSFilterPanel extends HostListenerMixin(
    * Handles `click` event on the `<input>` in the shadow DOM.
    */
   protected _handleClear() {
-    const { eventSelectionClear } = this.constructor as typeof DDSFilterPanel;
+    const { eventSelectionClear } = this.constructor as typeof C4DFilterPanel;
     this.dispatchEvent(
       new CustomEvent(eventSelectionClear, {
         bubbles: true,
@@ -93,15 +92,15 @@ class DDSFilterPanel extends HostListenerMixin(
    */
 
   static get eventSelectionClear() {
-    return `${ddsPrefix}-selection-clear`;
+    return `${c4dPrefix}-selection-clear`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}-filter-panel`;
+    return `${c4dPrefix}-filter-panel`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFilterPanel;
+export default C4DFilterPanel;
diff --git a/packages/web-components/src/components/footer/__stories__/README.stories.mdx b/packages/web-components/src/components/footer/__stories__/README.stories.mdx
index 6615744d242..95665e35fca 100644
--- a/packages/web-components/src/components/footer/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/footer/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Footer
 
 > The footer component is a required navigational pattern for IBM.com that
@@ -26,7 +28,9 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 ### Quick start
 
-`<dds-footer-container>` automatically renders contents of footer from default service data. If you want change in services/data integration, etc., see ["Customizing data integration" section](#customizing-data-integration) below.
+`<cds-footer-container>` automatically renders contents of footer from default
+service data. If you want change in services/data integration, etc., see
+["Customizing data integration" section](#customizing-data-integration) below.
 
 ### JS (via import)
 
@@ -41,29 +45,31 @@ import '@carbon/ibmdotcom-web-components/es/components/footer/index';
 ### HTML
 
 ```html
-<dds-footer-container></dds-footer-container>
+<cds-footer-container></cds-footer-container>
 ```
 
-> 💡 You can get size variants of footer with `size="short"` or `size="micro"` attribute.
+> 💡 You can get size variants of footer with `size="short"` or `size="micro"`
+> attribute.
 
+#### Attributes and properties `<cds-footer-container>`
 
-#### Attributes and properties `<dds-footer-container>`
-
-<Props of="dds-footer-composite" />
+<Props of="cds-footer-composite" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector  | Compatibility selector                 | Description |
-| ------------------------ | -------------------------------------- | ----------- |
-| `<dds-footer>`           | `data-autoid="dds--footer"`            | Component   |
-| `<dds-footer-nav>`       | `data-autoid="dds--footer-nav"`        | Component   |
-| `<dds-footer-nav-group>` | `data-autoid="dds--footer-nav-group"`  | Component   |
-| `<dds-footer-logo>`      | `data-autoid="dds--footer-logo"`       | Component   |
-| `<dds-locale-button>`    | `data-autoid="dds--footer-locale-btn"` | Interactive |
-| `<dds-legal-nav>`        | `data-autoid="dds--legal-nav"`         | Component   |
-| `<dds-legal-nav-cookie-preferences-placeholder>` | `data-autoid="dds--privacy-cp"`        | Component   |
+| Web Components selector                          | Compatibility selector                 | Description |
+| ------------------------------------------------ | -------------------------------------- | ----------- |
+| `<cds-footer>`                                   | `data-autoid="cds--footer"`            | Component   |
+| `<cds-footer-nav>`                               | `data-autoid="cds--footer-nav"`        | Component   |
+| `<cds-footer-nav-group>`                         | `data-autoid="cds--footer-nav-group"`  | Component   |
+| `<cds-footer-logo>`                              | `data-autoid="cds--footer-logo"`       | Component   |
+| `<cds-locale-button>`                            | `data-autoid="cds--footer-locale-btn"` | Interactive |
+| `<cds-legal-nav>`                                | `data-autoid="cds--legal-nav"`         | Component   |
+| `<cds-legal-nav-cookie-preferences-placeholder>` | `data-autoid="cds--privacy-cp"`        | Component   |
 
 ### Language selector
 
@@ -72,21 +78,20 @@ button/selector.
 
 The following attributes are needed:
 
-| Attribute                | Description                            |
-| ------------------------ | -------------------------------------- |
-| `language-selector-label`| `The input box placeholder`            |
-| `selected-language`      | `The initial selected language`        |
-| `langList`               | `Object containing available languages`|
+| Attribute                 | Description                             |
+| ------------------------- | --------------------------------------- |
+| `language-selector-label` | `The input box placeholder`             |
+| `selected-language`       | `The initial selected language`         |
+| `langList`                | `Object containing available languages` |
 
 Example implementation:
 
 ```html
-<dds-footer-container
-      size="regular"
-      language-selector-label="Choose a language"
-      clear-selection-label="Clear language selection"
-      selected-language="English"
-    ></dds-footer-container>
+<cds-footer-container
+  size="regular"
+  language-selector-label="Choose a language"
+  clear-selection-label="Clear language selection"
+  selected-language="English"></cds-footer-container>
 ```
 
 ```javascript
@@ -95,6 +100,7 @@ const languageList = [
   { id: 'nl', text: 'Dutch / Nederlands' },
   { id: 'en', text: 'English' },
 ];
-document.querySelector("dds-footer-container").langList = languageList;
+document.querySelector('cds-footer-container').langList = languageList;
 ```
+
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx b/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx
index c9a4c9d9ab8..02eb1526235 100644
--- a/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/footer/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-composite';
 
@@ -17,16 +22,16 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSFooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
+import C4DFooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
 
 function App() {
   return (
-    <DDSFooterContainer
+    <C4DFooterContainer
       lang-display='United States - English'
       language-selector-label='Choose a language'
       clear-selection-label='Clear language selection'
       selected-language='English'
-    ></DDSFooterContainer>;
+    ></C4DFooterContainer>;
   );
 }
 ```
@@ -37,10 +42,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector                | Description |
 | ------------------------ | ------------------------------------- | ----------- |
-| `<dds-footer-composite>` | `data-autoid="dds--footer-composite"` | Component   |
+| `<cds-footer-composite>` | `data-autoid="cds--footer-composite"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/footer/__stories__/adjunct-links.ts b/packages/web-components/src/components/footer/__stories__/adjunct-links.ts
index f246ae6b1ec..b28a1a7dcfa 100644
--- a/packages/web-components/src/components/footer/__stories__/adjunct-links.ts
+++ b/packages/web-components/src/components/footer/__stories__/adjunct-links.ts
@@ -11,11 +11,11 @@ import { BasicLink } from '../../../internal/vendor/@carbon/ibmdotcom-services-s
 
 const adjunctLinks: BasicLink[] = [
   {
-    title: 'See the updated Terms of Use. Learn more.',
+    title: 'Updated terms of use',
     url: 'https://www.example.com',
   },
   {
-    title: 'Read Learning Technologies Privacy.',
+    title: 'React learning technologies',
     url: 'https://www.example.com',
   },
 ];
diff --git a/packages/web-components/src/components/footer/__stories__/footer.stories.react.tsx b/packages/web-components/src/components/footer/__stories__/footer.stories.react.tsx
index 2553ec1e739..4af72f72008 100644
--- a/packages/web-components/src/components/footer/__stories__/footer.stories.react.tsx
+++ b/packages/web-components/src/components/footer/__stories__/footer.stories.react.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSFooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
+import C4DFooterContainer from '@carbon/ibmdotcom-web-components/es/components-react/footer/footer-container';
 import mockLangList from './language-list';
 import mockLinks from './links';
 import mockLegalLinks from './legal-links';
@@ -24,7 +24,7 @@ import { FOOTER_SIZE } from '../footer';
 
 import readme from './README.stories.react.mdx';
 
-export const base = args => {
+export const base = (args) => {
   const {
     langDisplay,
     language,
@@ -40,7 +40,7 @@ export const base = args => {
     adjunctLinks,
   } = args?.FooterComposite ?? {};
   return (
-    <DDSFooterContainer
+    <C4DFooterContainer
       language={language}
       lang-display={langDisplay}
       size={size}
@@ -52,11 +52,13 @@ export const base = args => {
       language-selector-label={languageSelectorLabel}
       clear-selection-label={clearSelectionLabel}
       selected-language={selectedLanguage}
-      disable-locale-button={disableLocaleButton !== true && null}></DDSFooterContainer>
+      disable-locale-button={
+        disableLocaleButton !== true && null
+      }></C4DFooterContainer>
   );
 };
 
-export const Default = args => {
+export const Default = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.REGULAR,
@@ -66,7 +68,7 @@ export const Default = args => {
   return base(args);
 };
 
-export const defaultWithAdjunctLegalLinks = args => {
+export const defaultWithAdjunctLegalLinks = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     disableLocaleButton: false,
@@ -93,7 +95,7 @@ defaultWithAdjunctLegalLinks.story = {
   },
 };
 
-export const defaultLanguageOnly = args => {
+export const defaultLanguageOnly = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.REGULAR,
@@ -110,7 +112,10 @@ defaultLanguageOnly.story = {
   parameters: {
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
         langList: object('language dropdown items (langList)', mockLangList),
       }),
     },
@@ -125,7 +130,7 @@ defaultLanguageOnly.story = {
   },
 };
 
-export const short = args => {
+export const short = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.SHORT,
@@ -135,7 +140,7 @@ export const short = args => {
   return base(args);
 };
 
-export const shortWithAdjunctLegalLinks = args => {
+export const shortWithAdjunctLegalLinks = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.SHORT,
@@ -161,7 +166,7 @@ shortWithAdjunctLegalLinks.story = {
   },
 };
 
-export const shortLanguageOnly = args => {
+export const shortLanguageOnly = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.SHORT,
@@ -178,7 +183,10 @@ shortLanguageOnly.story = {
   parameters: {
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
         langList: object('language dropdown items (langList)', mockLangList),
       }),
     },
@@ -193,7 +201,7 @@ shortLanguageOnly.story = {
   },
 };
 
-export const micro = args => {
+export const micro = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.MICRO,
@@ -202,7 +210,7 @@ export const micro = args => {
   return base(args);
 };
 
-export const microLanguageOnly = args => {
+export const microLanguageOnly = (args) => {
   args.FooterComposite = {
     ...(args.FooterComposite || {}),
     size: FOOTER_SIZE.MICRO,
@@ -218,7 +226,10 @@ microLanguageOnly.story = {
   parameters: {
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
         langList: object('language dropdown items (langList)', mockLangList),
       }),
     },
@@ -236,7 +247,7 @@ microLanguageOnly.story = {
 export default {
   title: 'Components/Footer',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
           <style>{styles.cssText}</style>
@@ -250,7 +261,10 @@ export default {
     hasStoryPadding: true,
     knobs: {
       FooterComposite: () => ({
-        disableLocaleButton: boolean('hide the locale button (disable-locale-button)', false),
+        disableLocaleButton: boolean(
+          'hide the locale button (disable-locale-button)',
+          false
+        ),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/footer/__stories__/footer.stories.scss b/packages/web-components/src/components/footer/__stories__/footer.stories.scss
index 35db5271ee3..e4368b2240e 100644
--- a/packages/web-components/src/components/footer/__stories__/footer.stories.scss
+++ b/packages/web-components/src/components/footer/__stories__/footer.stories.scss
@@ -4,18 +4,19 @@
 // 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-dds-footer-container {
+c4d-footer-container {
   display: flex;
   align-items: flex-end;
   min-height: 100vh;
 }
 
 .default-language-only {
-  @include carbon--breakpoint(lg) {
+  @include breakpoint(lg) {
     padding-top: 15rem;
   }
 }
diff --git a/packages/web-components/src/components/footer/__stories__/footer.stories.ts b/packages/web-components/src/components/footer/__stories__/footer.stories.ts
index b3fff72bdd2..653abfd0e80 100644
--- a/packages/web-components/src/components/footer/__stories__/footer.stories.ts
+++ b/packages/web-components/src/components/footer/__stories__/footer.stories.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { boolean, object } from '@storybook/addon-knobs';
 import inPercy from '@percy-io/in-percy';
 import { FOOTER_SIZE } from '../footer';
@@ -45,36 +45,36 @@ export const base = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-footer-composite
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            size="${ifNonNull(size)}"
-            .langList="${ifNonNull(langList)}"
-            .adjunctLinks="${ifNonNull(adjunctLinks)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .links="${ifNonNull(links)}"
-            .localeList="${ifNonNull(localeList)}"
-            language-selector-label="${ifNonNull(languageSelectorLabel)}"
-            clear-selection-label="${ifNonNull(clearSelectionLabel)}"
-            selected-language="${ifNonNull(selectedLanguage)}"
+          <c4d-footer-composite
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            size="${ifDefined(size)}"
+            .langList="${ifDefined(langList)}"
+            .adjunctLinks="${ifDefined(adjunctLinks)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .links="${ifDefined(links)}"
+            .localeList="${ifDefined(localeList)}"
+            language-selector-label="${ifDefined(languageSelectorLabel)}"
+            clear-selection-label="${ifDefined(clearSelectionLabel)}"
+            selected-language="${ifDefined(selectedLanguage)}"
             ?disable-locale-button="${disableLocaleButton}">
-          </dds-footer-composite>
+          </c4d-footer-composite>
         `
       : html`
-          <dds-footer-container
-            language="${ifNonNull(language)}"
-            lang-display="${ifNonNull(langDisplay)}"
-            size="${ifNonNull(size)}"
-            .langList="${ifNonNull(langList)}"
-            .adjunctLinks="${ifNonNull(adjunctLinks)}"
-            .legalLinks="${ifNonNull(legalLinks)}"
-            .links="${ifNonNull(links)}"
-            .localeList="${ifNonNull(localeList)}"
-            language-selector-label="${ifNonNull(languageSelectorLabel)}"
-            clear-selection-label="${ifNonNull(clearSelectionLabel)}"
-            selected-language="${ifNonNull(selectedLanguage)}"
+          <c4d-footer-container
+            language="${ifDefined(language)}"
+            lang-display="${ifDefined(langDisplay)}"
+            size="${ifDefined(size)}"
+            .langList="${ifDefined(langList)}"
+            .adjunctLinks="${ifDefined(adjunctLinks)}"
+            .legalLinks="${ifDefined(legalLinks)}"
+            .links="${ifDefined(links)}"
+            .localeList="${ifDefined(localeList)}"
+            language-selector-label="${ifDefined(languageSelectorLabel)}"
+            clear-selection-label="${ifDefined(clearSelectionLabel)}"
+            selected-language="${ifDefined(selectedLanguage)}"
             ?disable-locale-button="${disableLocaleButton}">
-          </dds-footer-container>
+          </c4d-footer-container>
         `}
   `;
 };
@@ -277,7 +277,7 @@ export default {
       }),
     },
     props: (() => {
-      // Lets `<dds-footer-container>` load the footer links
+      // Lets `<c4d-footer-container>` load the footer links
       const useMock =
         inPercy() || new URLSearchParams(window.location.search).has('mock');
       return {
diff --git a/packages/web-components/src/components/footer/__tests__/footer-composite.test.ts b/packages/web-components/src/components/footer/__tests__/footer-composite.test.ts
index 920faebbfe3..fb61cbc9c86 100644
--- a/packages/web-components/src/components/footer/__tests__/footer-composite.test.ts
+++ b/packages/web-components/src/components/footer/__tests__/footer-composite.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import { forEach } from '../../../globals/internal/collection-helpers';
 import { LocaleList } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/localeAPI.d';
 import {
@@ -131,15 +131,15 @@ const setupLinkAlternate = (set: boolean = true) => {
   }
 };
 
-describe('dds-footer-composite', function () {
+xdescribe('c4d-footer-composite', function () {
   describe('Misc attributes', function () {
     it('should render minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.querySelector('dds-footer-composite')).toMatchSnapshot();
+      expect(document.querySelector('c4d-footer-composite')).toMatchSnapshot();
     });
 
-    it('should render various attributes', async function () {
+    xit('should render various attributes', async function () {
       setupLinkAlternate();
       render(
         template({
@@ -153,7 +153,7 @@ describe('dds-footer-composite', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.querySelector('dds-footer-composite')).toMatchSnapshot();
+      expect(document.querySelector('c4d-footer-composite')).toMatchSnapshot();
     });
   });
 
diff --git a/packages/web-components/src/components/footer/__tests__/footer-logo.test.ts b/packages/web-components/src/components/footer/__tests__/footer-logo.test.ts
index 4be72c9f8af..53fcc354ee2 100644
--- a/packages/web-components/src/components/footer/__tests__/footer-logo.test.ts
+++ b/packages/web-components/src/components/footer/__tests__/footer-logo.test.ts
@@ -7,29 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../footer-logo';
 
 const template = (props?) => {
   const { href } = props ?? {};
-  return html` <dds-footer-logo href="${ifNonNull(href)}"></dds-footer-logo> `;
+  return html` <c4d-footer-logo href="${ifDefined(href)}"></c4d-footer-logo> `;
 };
 
-describe('dds-footer-logo', function () {
+describe('c4d-footer-logo', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-footer-logo>`
-      expect(document.body.querySelector('dds-footer-logo')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-footer-logo>`
+      expect(document.body.querySelector('c4d-footer-logo')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
     it('should render with various attributes', async function () {
       render(template({ href: 'https://cloud.ibm.com/' }), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-footer-logo>`
-      expect(document.body.querySelector('dds-footer-logo')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-footer-logo>`
+      expect(document.body.querySelector('c4d-footer-logo')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/footer/__tests__/footer-nav-group.test.ts b/packages/web-components/src/components/footer/__tests__/footer-nav-group.test.ts
index b08a9c890ba..02cb6ee2dc9 100644
--- a/packages/web-components/src/components/footer/__tests__/footer-nav-group.test.ts
+++ b/packages/web-components/src/components/footer/__tests__/footer-nav-group.test.ts
@@ -7,11 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import EventManager from '../../../../tests/utils/event-manager';
 import MockMediaQueryList from '../../../../tests/utils/mock-media-query-list';
-import DDSFooterNavGroup from '../footer-nav-group';
+import C4DFooterNavGroup from '../footer-nav-group';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../footer-nav-group';
 import '../footer-nav-item';
@@ -19,22 +19,22 @@ import '../footer-nav-item';
 const template = (props?) => {
   const { open, titleText } = props ?? {};
   return html`
-    <dds-footer-nav-group ?open="${open}" title-text="${ifNonNull(titleText)}">
-      <dds-footer-nav-item ?open="${open}"></dds-footer-nav-item>
-    </dds-footer-nav-group>
+    <c4d-footer-nav-group ?open="${open}" title-text="${ifDefined(titleText)}">
+      <c4d-footer-nav-item ?open="${open}"></c4d-footer-nav-item>
+    </c4d-footer-nav-group>
   `;
 };
 
-describe('dds-footer-nav-group', function () {
+describe('c4d-footer-nav-group', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
     it('should render with minimum attributes for narrow screen', async function () {
       spyOn(window, 'matchMedia').and.returnValue(new MockMediaQueryList(true));
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-footer-nav-group>`
+      await Promise.resolve(); // Update cycle for `<c4d-footer-nav-group>`
       expect(
-        document.body.querySelector('dds-footer-nav-group')
+        document.body.querySelector('c4d-footer-nav-group')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -43,9 +43,9 @@ describe('dds-footer-nav-group', function () {
         new MockMediaQueryList(false)
       );
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-footer-nav-group>`
+      await Promise.resolve(); // Update cycle for `<c4d-footer-nav-group>`
       expect(
-        document.body.querySelector('dds-footer-nav-group')
+        document.body.querySelector('c4d-footer-nav-group')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -55,9 +55,9 @@ describe('dds-footer-nav-group', function () {
         template({ open: true, titleText: 'title-text-foo' }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-footer-nav-group>`
+      await Promise.resolve(); // Update cycle for `<c4d-footer-nav-group>`
       expect(
-        document.body.querySelector('dds-footer-nav-group')
+        document.body.querySelector('c4d-footer-nav-group')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -69,21 +69,21 @@ describe('dds-footer-nav-group', function () {
         template({ open: true, titleText: 'title-text-foo' }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-footer-nav-group>`
+      await Promise.resolve(); // Update cycle for `<c4d-footer-nav-group>`
       expect(
-        document.body.querySelector('dds-footer-nav-group')
+        document.body.querySelector('c4d-footer-nav-group')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
 
   describe('Toggling', function () {
-    let group: DDSFooterNavGroup | null;
+    let group: C4DFooterNavGroup | null;
 
     beforeEach(async function () {
       spyOn(window, 'matchMedia').and.returnValue(new MockMediaQueryList(true));
       render(template(), document.body);
       await Promise.resolve();
-      group = document.body.querySelector('dds-footer-nav-group');
+      group = document.body.querySelector('c4d-footer-nav-group');
     });
 
     it('Should open and close the item', async function () {
@@ -99,7 +99,7 @@ describe('dds-footer-nav-group', function () {
     it('Should have ESC key close the item', async function () {
       render(template({ open: true }), document.body);
       await Promise.resolve();
-      group = document.body.querySelector('dds-footer-nav-group');
+      group = document.body.querySelector('c4d-footer-nav-group');
 
       const event = new CustomEvent('keydown', {
         bubbles: true,
@@ -115,7 +115,7 @@ describe('dds-footer-nav-group', function () {
     it('Should have legacy ESC key close the item', async function () {
       render(template({ open: true }), document.body);
       await Promise.resolve();
-      group = document.body.querySelector('dds-footer-nav-group');
+      group = document.body.querySelector('c4d-footer-nav-group');
 
       const event = new CustomEvent('keydown', {
         bubbles: true,
@@ -128,25 +128,25 @@ describe('dds-footer-nav-group', function () {
       expect(group!.open).toBe(false);
     });
 
-    it('Should fire dds-footer-nav-group-beingtoggled/dds-footer-nav-group-toggled events upon opening', async function () {
+    it('Should fire c4d-footer-nav-group-beingtoggled/c4d-footer-nav-group-toggled events upon opening', async function () {
       const spyBeforeToggle = jasmine.createSpy('before toggle');
       const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(group!, 'dds-footer-nav-group-beingtoggled', spyBeforeToggle);
-      events.on(group!, 'dds-footer-nav-group-toggled', spyAfterToggle);
+      events.on(group!, 'c4d-footer-nav-group-beingtoggled', spyBeforeToggle);
+      events.on(group!, 'c4d-footer-nav-group-toggled', spyAfterToggle);
       group!.shadowRoot!.querySelector('button')!.click();
       await Promise.resolve();
       expect(spyBeforeToggle).toHaveBeenCalled();
       expect(spyAfterToggle).toHaveBeenCalled();
     });
 
-    it('Should fire dds-footer-nav-group-beingtoggled/dds-footer-nav-group-toggled events upon closing', async function () {
+    it('Should fire c4d-footer-nav-group-beingtoggled/c4d-footer-nav-group-toggled events upon closing', async function () {
       render(template({ open: true }), document.body);
       await Promise.resolve();
-      group = document.body.querySelector('dds-footer-nav-group');
+      group = document.body.querySelector('c4d-footer-nav-group');
       const spyBeforeToggle = jasmine.createSpy('before toggle');
       const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(group!, 'dds-footer-nav-group-beingtoggled', spyBeforeToggle);
-      events.on(group!, 'dds-footer-nav-group-toggled', spyAfterToggle);
+      events.on(group!, 'c4d-footer-nav-group-beingtoggled', spyBeforeToggle);
+      events.on(group!, 'c4d-footer-nav-group-toggled', spyAfterToggle);
       const event = new CustomEvent('keydown', {
         bubbles: true,
         composed: true,
@@ -161,10 +161,10 @@ describe('dds-footer-nav-group', function () {
 
     it('Should support preventing footer nav group from being opened upon user gesture', async function () {
       const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(group!, 'dds-footer-nav-group-beingtoggled', (event) => {
+      events.on(group!, 'c4d-footer-nav-group-beingtoggled', (event) => {
         event.preventDefault();
       });
-      events.on(group!, 'dds-footer-nav-group-toggled', spyAfterToggle);
+      events.on(group!, 'c4d-footer-nav-group-toggled', spyAfterToggle);
       group!.shadowRoot!.querySelector('button')!.click();
       await Promise.resolve();
       expect(spyAfterToggle).not.toHaveBeenCalled();
@@ -173,12 +173,12 @@ describe('dds-footer-nav-group', function () {
     it('Should support preventing footer nav group from being closed upon user gesture', async function () {
       render(template({ open: true }), document.body);
       await Promise.resolve();
-      group = document.body.querySelector('dds-footer-nav-group');
+      group = document.body.querySelector('c4d-footer-nav-group');
       const spyAfterToggle = jasmine.createSpy('after toggle');
-      events.on(group!, 'dds-footer-nav-group-beingtoggled', (event) => {
+      events.on(group!, 'c4d-footer-nav-group-beingtoggled', (event) => {
         event.preventDefault();
       });
-      events.on(group!, 'dds-footer-nav-group-toggled', spyAfterToggle);
+      events.on(group!, 'c4d-footer-nav-group-toggled', spyAfterToggle);
       const event = new CustomEvent('keydown', {
         bubbles: true,
         composed: true,
diff --git a/packages/web-components/src/components/footer/__tests__/footer-nav-item.test.ts b/packages/web-components/src/components/footer/__tests__/footer-nav-item.test.ts
index 5535fa7067d..0daa2267d9a 100644
--- a/packages/web-components/src/components/footer/__tests__/footer-nav-item.test.ts
+++ b/packages/web-components/src/components/footer/__tests__/footer-nav-item.test.ts
@@ -7,33 +7,33 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../footer-nav-item';
 
 const template = (props?) => {
   const { titleText } = props ?? {};
   return html`
-    <dds-footer-nav-item
-      title-text="${ifNonNull(titleText)}"></dds-footer-nav-item>
+    <c4d-footer-nav-item
+      title-text="${ifDefined(titleText)}"></c4d-footer-nav-item>
   `;
 };
 
-describe('dds-footer-nav-item', function () {
+describe('c4d-footer-nav-item', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-footer-nav-item>`
+      await Promise.resolve(); // Update cycle for `<c4d-footer-nav-item>`
       expect(
-        document.body.querySelector('dds-footer-nav-item')
+        document.body.querySelector('c4d-footer-nav-item')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
     it('should render with various attributes', async function () {
       render(template({ titleText: 'title-text-foo' }), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-footer-nav-item>`
+      await Promise.resolve(); // Update cycle for `<c4d-footer-nav-item>`
       expect(
-        document.body.querySelector('dds-footer-nav-item')
+        document.body.querySelector('c4d-footer-nav-item')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/footer/combo-box.ts b/packages/web-components/src/components/footer/combo-box.ts
index 3c271ed9fec..7fc293d79b6 100644
--- a/packages/web-components/src/components/footer/combo-box.ts
+++ b/packages/web-components/src/components/footer/combo-box.ts
@@ -7,14 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { TemplateResult } from 'lit-html';
-import { html, property, query } from 'lit-element';
-import BXComboBoxItem from '../../internal/vendor/@carbon/web-components/components/combo-box/combo-box-item.js';
+import { TemplateResult, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import CDSComboBoxItem from '../../internal/vendor/@carbon/web-components/components/combo-box/combo-box-item.js';
 import Close16 from '../../internal/vendor/@carbon/web-components/icons/close/16.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
-import DDSDropdown, { DROPDOWN_KEYBOARD_ACTION } from './dropdown';
+import C4DDropdown, { DROPDOWN_KEYBOARD_ACTION } from './dropdown';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
 export {
@@ -23,24 +22,23 @@ export {
   DROPDOWN_TYPE,
 } from './dropdown';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Combo box.
  *
- * @element dds-combo-box
- * @fires bx-combo-box-beingselected
+ * @element c4d-combo-box
+ * @fires cds-combo-box-beingselected
  *   The custom event fired before a combo box item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-combo-box-beingtoggled
+ * @fires cds-combo-box-beingtoggled
  *   The custom event fired before the open state of this combo box is toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated toggling.
- * @fires bx-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.
- * @fires bx-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.
+ * @fires cds-combo-box-selected - The custom event fired after a combo box item is selected upon a user gesture.
+ * @fires cds-combo-box-toggled - The custom event fired after the open state of this combo box is toggled upon a user gesture.
  */
-@customElement(`${ddsPrefix}-combo-box`)
-class DDSComboBox extends DDSDropdown {
+@customElement(`${c4dPrefix}-combo-box`)
+class C4DComboBox extends C4DDropdown {
   /**
    * The text content that should be set to the `<input>` for filtering.
    */
@@ -80,7 +78,7 @@ class DDSComboBox extends DDSDropdown {
    * @returns `true` if the given combo box item matches the given query text.
    */
   protected _defaultItemMatches(
-    item: BXComboBoxItem,
+    item: CDSComboBoxItem,
     queryText: string
   ): boolean {
     return (
@@ -94,13 +92,13 @@ class DDSComboBox extends DDSDropdown {
    */
   protected _handleInput() {
     const items = this.querySelectorAll(
-      (this.constructor as typeof DDSComboBox).selectorItem
+      (this.constructor as typeof C4DComboBox).selectorItem
     );
     const index = !this._filterInputNode.value
       ? -1
       : findIndex(items, this._testItemWithQueryText, this);
     forEach(items, (item, i) => {
-      (item as BXComboBoxItem).highlighted = i === index;
+      (item as CDSComboBoxItem).highlighted = i === index;
     });
     const { _filterInputNode: filterInput } = this;
     this._filterInputValue = !filterInput ? '' : filterInput.value;
@@ -118,7 +116,7 @@ class DDSComboBox extends DDSDropdown {
 
   protected _handleKeypressInner(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof DDSDropdown).getAction(key);
+    const action = (this.constructor as typeof C4DDropdown).getAction(key);
     const { TRIGGERING } = DROPDOWN_KEYBOARD_ACTION;
     if (
       this._selectionButtonNode?.contains(event.target as Node) &&
@@ -137,10 +135,10 @@ class DDSComboBox extends DDSDropdown {
   protected _handleUserInitiatedClearInput() {
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof DDSComboBox).selectorItem
+        (this.constructor as typeof C4DComboBox).selectorItem
       ),
       (item) => {
-        (item as BXComboBoxItem).highlighted = false;
+        (item as CDSComboBoxItem).highlighted = false;
       }
     );
     this._filterInputValue = '';
@@ -149,7 +147,7 @@ class DDSComboBox extends DDSDropdown {
     this.requestUpdate();
   }
 
-  protected _handleUserInitiatedSelectItem(item?: BXComboBoxItem) {
+  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {
     if (item && !this._selectionShouldChange(item)) {
       // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,
       // given we want to update the `<input>` and close the dropdown even if selection doesn't update.
@@ -166,10 +164,10 @@ class DDSComboBox extends DDSDropdown {
     super._handleUserInitiatedSelectItem(item);
   }
 
-  protected _renderTriggerContent(): TemplateResult {
+  protected _renderLabel(): TemplateResult {
     const {
       disabled,
-      triggerContent,
+      label,
       _filterInputValue: filterInputValue,
       _handleInput: handleInput,
     } = this;
@@ -178,7 +176,7 @@ class DDSComboBox extends DDSDropdown {
         id="trigger-label"
         class="${prefix}--text-input"
         ?disabled=${disabled}
-        placeholder="${triggerContent}"
+        placeholder="${label}"
         .value=${filterInputValue}
         role="combobox"
         aria-expanded="${this.open}"
@@ -189,7 +187,7 @@ class DDSComboBox extends DDSDropdown {
     `;
   }
 
-  protected _renderFollowingTriggerContent(): TemplateResult | void {
+  protected _renderFollowingLabel(): TemplateResult | void {
     const { clearSelectionLabel, _filterInputValue: filterInputValue } = this;
     return filterInputValue.length === 0
       ? undefined
@@ -215,7 +213,7 @@ class DDSComboBox extends DDSDropdown {
    * The custom item matching callback.
    */
   @property({ attribute: false })
-  itemMatches!: (item: BXComboBoxItem, queryText: string) => boolean;
+  itemMatches!: (item: CDSComboBoxItem, queryText: string) => boolean;
 
   shouldUpdate(changedProperties) {
     super.shouldUpdate(changedProperties);
@@ -289,4 +287,4 @@ class DDSComboBox extends DDSDropdown {
   }
 }
 
-export default DDSComboBox;
+export default C4DComboBox;
diff --git a/packages/web-components/src/components/footer/defs.ts b/packages/web-components/src/components/footer/defs.ts
index 274432fe02d..01bc78c7caf 100644
--- a/packages/web-components/src/components/footer/defs.ts
+++ b/packages/web-components/src/components/footer/defs.ts
@@ -47,41 +47,6 @@ export enum LANGUAGE_SELECTOR_STYLE_SCHEME {
   BLENDED = 'blended',
 }
 
-/**
- * Navigation direction, associated with key symbols.
- */
-export const NAVIGATION_DIRECTION = {
-  Up: -1,
-  ArrowUp: -1,
-  Down: 1,
-  ArrowDown: 1,
-};
-
-/**
- * The keyboard action categories for dropdown.
- */
-export enum DROPDOWN_KEYBOARD_ACTION {
-  /**
-   * Not doing any action.
-   */
-  NONE = 'none',
-
-  /**
-   * Keyboard action to close menu.
-   */
-  CLOSING = 'closing',
-
-  /**
-   * Keyboard action to navigate back/forward.
-   */
-  NAVIGATING = 'navigating',
-
-  /**
-   * Keyboard action to open/close menu on the trigger button or select/deselect a menu item.
-   */
-  TRIGGERING = 'triggering',
-}
-
 /**
  * Dropdown size.
  */
@@ -97,27 +62,12 @@ export enum DROPDOWN_SIZE {
   SMALL = 'sm',
 
   /**
-   * Extra large size.
+   * Large size.
    */
-  EXTRA_LARGE = 'xl',
+  LARGE = 'lg',
 
   /**
    * Micro size.
    */
   MICRO = 'micro',
 }
-
-/**
- * Dropdown types.
- */
-export enum DROPDOWN_TYPE {
-  /**
-   * Regular type.
-   */
-  REGULAR = '',
-
-  /**
-   * Inline type.
-   */
-  INLINE = 'inline',
-}
diff --git a/packages/web-components/src/components/footer/dropdown.ts b/packages/web-components/src/components/footer/dropdown.ts
index 5b3216e9c66..c0afefed996 100644
--- a/packages/web-components/src/components/footer/dropdown.ts
+++ b/packages/web-components/src/components/footer/dropdown.ts
@@ -7,22 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { html, query, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import BXDropdown from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown.js';
-import BXDropdownItem from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown-item.js';
-import ChevronDown16 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/16.js';
-import WarningFilled16 from '../../internal/vendor/@carbon/web-components/icons/warning--filled/16.js';
-import {
-  DROPDOWN_COLOR_SCHEME,
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import CDSDropdown, {
   DROPDOWN_KEYBOARD_ACTION,
-  DROPDOWN_SIZE,
   DROPDOWN_TYPE,
   NAVIGATION_DIRECTION,
-} from './defs';
+} from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown.js';
+import CDSDropdownItem from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown-item.js';
+import ChevronDown16 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/16.js';
+import WarningFilled16 from '../../internal/vendor/@carbon/web-components/icons/warning--filled/16.js';
+import { DROPDOWN_COLOR_SCHEME, DROPDOWN_SIZE } from './defs';
 import { forEach, indexOf } from '../../globals/internal/collection-helpers';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
@@ -34,29 +32,28 @@ export {
   NAVIGATION_DIRECTION,
 };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Dropdown.
  *
- * @element dds-dropdown
+ * @element c4d-dropdown
  * @csspart label-text The label text.
  * @csspart helper-text The helper text.
  * @csspart trigger-button The trigger button.
  * @csspart menu-body The menu body.
  * @csspart validity-message The validity message.
- * @fires bx-dropdown-beingselected
+ * @fires cds-dropdown-beingselected
  *   The custom event fired before a dropdown item is selected upon a user gesture.
  *   Cancellation of this event stops changing the user-initiated selection.
- * @fires bx-dropdown-beingtoggled
+ * @fires cds-dropdown-beingtoggled
  *   The custom event fired before the open state of this dropdown is toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated toggling.
- * @fires bx-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.
- * @fires bx-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.
+ * @fires cds-dropdown-selected - The custom event fired after a dropdown item is selected upon a user gesture.
+ * @fires cds-dropdown-toggled - The custom event fired after the open state of this dropdown is toggled upon a user gesture.
  */
-@customElement(`${ddsPrefix}-dropdown`)
-class DDSDropdown extends BXDropdown {
+@customElement(`${c4dPrefix}-dropdown`)
+class C4DDropdown extends CDSDropdown {
   /**
    * The `<input` node in ComboBox, used to get value.
    */
@@ -78,7 +75,7 @@ class DDSDropdown extends BXDropdown {
    * @param direction `-1` to navigate backward, `1` to navigate forward.
    */
   protected _navigate(direction: number) {
-    const constructor = this.constructor as typeof BXDropdown;
+    const constructor = this.constructor as typeof CDSDropdown;
     const items = this.querySelectorAll(constructor.selectorItem);
     const highlightedItem = this.querySelector(
       constructor.selectorItemHighlighted
@@ -92,7 +89,7 @@ class DDSDropdown extends BXDropdown {
       nextIndex = 0;
     }
     forEach(items, (item, i) => {
-      (item as BXDropdownItem).highlighted = i === nextIndex;
+      (item as CDSDropdownItem).highlighted = i === nextIndex;
     });
 
     const nextItem = items[nextIndex];
@@ -113,11 +110,10 @@ class DDSDropdown extends BXDropdown {
 
   render() {
     const {
-      colorScheme,
       disabled,
       helperText,
       invalid,
-      labelText,
+      titleText,
       open,
       toggleLabelClosed,
       toggleLabelOpen,
@@ -132,16 +128,15 @@ class DDSDropdown extends BXDropdown {
       _handleSlotchangeHelperText: handleSlotchangeHelperText,
       _handleSlotchangeLabelText: handleSlotchangeLabelText,
       _slotHelperTextNode: slotHelperTextNode,
-      _slotLabelTextNode: slotLabelTextNode,
+      _slotTitleTextNode: slotTitleTextNode,
     } = this;
     const inline = type === DROPDOWN_TYPE.INLINE;
     const selectedItemsCount = this.querySelectorAll(
-      (this.constructor as typeof DDSDropdown).selectorItemSelected
+      (this.constructor as typeof C4DDropdown).selectorItemSelected
     ).length;
     const classes = classMap({
       [`${prefix}--dropdown`]: true,
       [`${prefix}--list-box`]: true,
-      [`${prefix}--list-box--${colorScheme}`]: colorScheme,
       [`${prefix}--list-box--disabled`]: disabled,
       [`${prefix}--list-box--inline`]: inline,
       [`${prefix}--list-box--expanded`]: open,
@@ -168,9 +163,9 @@ class DDSDropdown extends BXDropdown {
     const hasHelperText =
       helperText ||
       (slotHelperTextNode && slotHelperTextNode.assignedNodes().length > 0);
-    const hasLabelText =
-      labelText ||
-      (slotLabelTextNode && slotLabelTextNode.assignedNodes().length > 0);
+    const hasTitleText =
+      titleText ||
+      (slotTitleTextNode && slotTitleTextNode.assignedNodes().length > 0);
     const helper = !invalid
       ? html`
           <div
@@ -209,9 +204,9 @@ class DDSDropdown extends BXDropdown {
       <label
         part="label-text"
         class="${labelClasses}"
-        ?hidden="${!hasLabelText}">
+        ?hidden="${!hasTitleText}">
         <slot name="label-text" @slotchange="${handleSlotchangeLabelText}"
-          >${labelText}</slot
+          >${hasTitleText}</slot
         >
       </label>
       <div
@@ -231,7 +226,7 @@ class DDSDropdown extends BXDropdown {
           aria-haspopup="listbox"
           aria-owns="menu-body"
           aria-controls="menu-body">
-          ${this._renderPrecedingTriggerContent()}${this._renderTriggerContent()}${this._renderFollowingTriggerContent()}
+          ${this._renderPrecedingLabel()}${this._renderLabel()}${this._renderFollowingLabel()}
           <div class="${iconContainerClasses}">
             ${ChevronDown16({ 'aria-label': toggleLabel })}
           </div>
@@ -251,4 +246,4 @@ class DDSDropdown extends BXDropdown {
   }
 }
 
-export default DDSDropdown;
+export default C4DDropdown;
diff --git a/packages/web-components/src/components/footer/footer-composite.ts b/packages/web-components/src/components/footer/footer-composite.ts
index 60459d55603..9e9982c0ea3 100644
--- a/packages/web-components/src/components/footer/footer-composite.ts
+++ b/packages/web-components/src/components/footer/footer-composite.ts
@@ -7,12 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, LitElement } from 'lit-element';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import LocaleAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/Locale/Locale';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import MediaQueryMixin, {
   MQBreakpoints,
   MQDirs,
@@ -47,7 +48,7 @@ import '../../internal/vendor/@carbon/web-components/components/select/select-it
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 import { moderate02 } from '@carbon/motion';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 // Delay matches the CSS animation timing for fadein/out of modal.
 const delay = parseInt(moderate02, 10);
@@ -55,10 +56,10 @@ const delay = parseInt(moderate02, 10);
 /**
  * Component that rendres footer from inks data.
  *
- * @element dds-footer-composite
+ * @element c4d-footer-composite
  */
-@customElement(`${ddsPrefix}-footer-composite`)
-class DDSFooterComposite extends MediaQueryMixin(
+@customElement(`${c4dPrefix}-footer-composite`)
+class C4DFooterComposite extends MediaQueryMixin(
   ModalRenderMixin(HybridRenderMixin(HostListenerMixin(LitElement))),
   { [MQBreakpoints.LG]: MQDirs.MAX }
 ) {
@@ -67,12 +68,14 @@ class DDSFooterComposite extends MediaQueryMixin(
    */
   private async _handleClickLocaleButton() {
     this.openLocaleModal = true;
+
     // Set 'open' attribute after modal is in dom so CSS can fade it in.
-    await this.updateComplete;
-    const composite = this.modalRenderRoot?.querySelector(
-      'dds-locale-modal-composite'
-    );
-    composite?.setAttribute('open', '');
+    this.updateComplete.then(() => {
+      const composite = this.modalRenderRoot?.querySelector(
+        `${c4dPrefix}-locale-modal-composite`
+      );
+      composite?.setAttribute('open', '');
+    });
   }
 
   @state()
@@ -83,7 +86,7 @@ class DDSFooterComposite extends MediaQueryMixin(
   }
 
   /**
-   * Handles `dds-expressive-modal-closed` event on the locale modal.
+   * Handles `c4d-expressive-modal-closed` event on the locale modal.
    */
   @HostListener('document:eventCloseModal')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
@@ -204,15 +207,15 @@ class DDSFooterComposite extends MediaQueryMixin(
   localeList?: LocaleList;
 
   /**
-   * `true` to open the locale modal.
+   * @inheritdoc
    */
-  @property({ type: Boolean, attribute: 'open-locale-modal' })
-  openLocaleModal;
+  modalTriggerProps = ['openLocaleModal', 'localeList'];
 
   /**
-   * @inheritdoc
+   * `true` to open the locale modal.
    */
-  modalTriggerProps = ['openLocaleModal', 'localeList'];
+  @property({ type: Boolean, attribute: 'open-locale-modal' })
+  openLocaleModal;
 
   /**
    * Footer size.
@@ -265,13 +268,13 @@ class DDSFooterComposite extends MediaQueryMixin(
     } = this;
     return openLocaleModal
       ? html`
-          <dds-locale-modal-composite
-            lang-display="${ifNonNull(langDisplay)}"
-            language="${ifNonNull(language)}"
-            .collatorCountryName="${ifNonNull(collatorCountryName)}"
-            .localeList="${ifNonNull(localeList)}"
-            ._loadLocaleList="${ifNonNull(loadLocaleList)}">
-          </dds-locale-modal-composite>
+          <c4d-locale-modal-composite
+            lang-display="${ifDefined(langDisplay)}"
+            language="${ifDefined(language)}"
+            .collatorCountryName="${ifDefined(collatorCountryName)}"
+            .localeList="${ifDefined(localeList)}"
+            ._loadLocaleList="${ifDefined(loadLocaleList)}">
+          </c4d-locale-modal-composite>
         `
       : html``;
   }
@@ -286,30 +289,28 @@ class DDSFooterComposite extends MediaQueryMixin(
       size,
     } = this;
     const dropdownSize =
-      size === FOOTER_SIZE.MICRO
-        ? DROPDOWN_SIZE.MICRO
-        : DROPDOWN_SIZE.EXTRA_LARGE;
+      size === FOOTER_SIZE.MICRO ? DROPDOWN_SIZE.MICRO : DROPDOWN_SIZE.LARGE;
     return isMobile
       ? html`
-          <dds-language-selector-mobile
+          <c4d-language-selector-mobile
             size="${dropdownSize}"
             slot="${slot}"
             value="${selectedLanguage}"
             placeholder="${selectedLanguage}">
             ${langList?.map(
               (language) => html`
-                <bx-select-item
-                  label="${ifNonNull(language.text)}"
-                  value="${ifNonNull(language.text)}"
-                  lang="${ifNonNull(language.id)}"
-                  >${ifNonNull(language.text)}</bx-select-item
+                <cds-select-item
+                  label="${ifDefined(language.text)}"
+                  value="${ifDefined(language.text)}"
+                  lang="${ifDefined(language.id)}"
+                  >${ifDefined(language.text)}</cds-select-item
                 >
               `
             )}
-          </dds-language-selector-mobile>
+          </c4d-language-selector-mobile>
         `
       : html`
-          <dds-language-selector-desktop
+          <c4d-language-selector-desktop
             size="${dropdownSize}"
             slot="${slot}"
             trigger-content="${languageSelectorLabel}"
@@ -318,14 +319,14 @@ class DDSFooterComposite extends MediaQueryMixin(
             clear-selection-label="${clearSelectionLabel}">
             ${langList?.map(
               (language) => html`
-                <bx-combo-box-item
-                  value="${ifNonNull(language.text)}"
-                  lang="${ifNonNull(language.id)}"
-                  >${ifNonNull(language.text)}</bx-combo-box-item
+                <cds-combo-box-item
+                  value="${ifDefined(language.text)}"
+                  lang="${ifDefined(language.id)}"
+                  >${ifDefined(language.text)}</cds-combo-box-item
                 >
               `
             )}
-          </dds-language-selector-desktop>
+          </c4d-language-selector-desktop>
         `;
   }
 
@@ -337,12 +338,12 @@ class DDSFooterComposite extends MediaQueryMixin(
       size,
     } = this;
     return html`
-      <dds-locale-button
-        buttonLabel="${ifNonNull(buttonLabel)}"
+      <c4d-locale-button
+        buttonLabel="${ifDefined(buttonLabel)}"
         size="${size}"
         slot="${slot}"
         @click="${handleClickLocaleButton}"
-        >${langDisplay}</dds-locale-button
+        >${langDisplay}</c4d-locale-button
       >
     `;
   }
@@ -357,63 +358,77 @@ class DDSFooterComposite extends MediaQueryMixin(
       adjunctLinks,
     } = this;
     return html`
-      <dds-footer
-        size="${ifNonNull(size)}"
-        ?disable-locale-button="${ifNonNull(disableLocaleButton)}">
-        <dds-footer-logo></dds-footer-logo>
-        <dds-footer-nav
-          ?disable-locale-button="${ifNonNull(disableLocaleButton)}">
-          ${links?.map(
-            ({ title: groupTitle, links: groupLinks }) => html`
-              <dds-footer-nav-group title-text="${ifNonNull(groupTitle)}">
-                ${groupLinks?.map(
-                  ({ title, url }) => html`
-                    <dds-footer-nav-item href="${ifNonNull(url)}"
-                      >${title}</dds-footer-nav-item
-                    >
-                  `
-                )}
-              </dds-footer-nav-group>
-            `
-          )}
-        </dds-footer-nav>
-        ${size !== FOOTER_SIZE.MICRO && !langList && !disableLocaleButton
+      <c4d-footer
+        size="${ifDefined(size)}"
+        ?disable-locale-button="${ifDefined(disableLocaleButton)}">
+        <c4d-footer-logo></c4d-footer-logo>
+        ${size !== FOOTER_SIZE.MICRO && size !== FOOTER_SIZE.SHORT
+          ? html` <c4d-footer-nav
+              ?disable-locale-button="${ifDefined(disableLocaleButton)}">
+              ${links?.map(
+                ({ title: groupTitle, links: groupLinks }) => html`
+                  <c4d-footer-nav-group title-text="${ifDefined(groupTitle)}">
+                    ${groupLinks?.map(
+                      ({ title, url }) => html`
+                        <c4d-footer-nav-item href="${ifDefined(url)}"
+                          >${title}</c4d-footer-nav-item
+                        >
+                      `
+                    )}
+                  </c4d-footer-nav-group>
+                `
+              )}
+              ${!langList && !disableLocaleButton
+                ? this.renderLocaleButton()
+                : ``}
+              ${langList && !disableLocaleButton
+                ? this.renderLanguageSelector()
+                : ``}
+            </c4d-footer-nav>`
+          : ``}
+        ${(size === FOOTER_SIZE.SHORT || size === FOOTER_SIZE.MICRO) &&
+        !langList &&
+        !disableLocaleButton
           ? this.renderLocaleButton()
           : ``}
-        ${size !== FOOTER_SIZE.MICRO && langList && !disableLocaleButton
+        ${(size === FOOTER_SIZE.SHORT || size === FOOTER_SIZE.MICRO) &&
+        langList &&
+        !disableLocaleButton
           ? this.renderLanguageSelector()
           : ``}
-        <dds-legal-nav size="${ifNonNull(size)}">
+
+        <c4d-legal-nav size="${ifDefined(size)}">
+          <c4d-footer-logo size="${ifDefined(size)}"></c4d-footer-logo>
           ${legalLinks?.map(
             ({ title, url, titleEnglish }) => html`
-              <dds-legal-nav-item
-                autoid="${ifNonNull(titleEnglish)}"
-                href="${ifNonNull(url)}"
-                >${title}</dds-legal-nav-item
+              <c4d-legal-nav-item
+                autoid="${ifDefined(titleEnglish)}"
+                href="${ifDefined(url)}"
+                >${title}</c4d-legal-nav-item
               >
             `
           )}
           ${size !== FOOTER_SIZE.MICRO
             ? adjunctLinks?.map(
                 ({ title, url, titleEnglish }) => html`
-                  <dds-legal-nav-item
-                    autoid="${ifNonNull(titleEnglish)}"
-                    href="${ifNonNull(url)}"
+                  <c4d-legal-nav-item
+                    autoid="${ifDefined(titleEnglish)}"
+                    href="${ifDefined(url)}"
                     slot="adjunct-links">
                     ${title}
-                  </dds-legal-nav-item>
+                  </c4d-legal-nav-item>
                 `
               )
             : ``}
-          <dds-legal-nav-cookie-preferences-placeholder></dds-legal-nav-cookie-preferences-placeholder>
+          <c4d-legal-nav-cookie-preferences-placeholder></c4d-legal-nav-cookie-preferences-placeholder>
           ${size === FOOTER_SIZE.MICRO && !langList && !disableLocaleButton
             ? this.renderLocaleButton('locale')
             : ``}
           ${size === FOOTER_SIZE.MICRO && langList && !disableLocaleButton
             ? this.renderLanguageSelector('locale')
             : ``}
-        </dds-legal-nav>
-      </dds-footer>
+        </c4d-legal-nav>
+      </c4d-footer>
     `;
   }
 
@@ -425,9 +440,9 @@ class DDSFooterComposite extends MediaQueryMixin(
    * The name of the custom event fired after this modal is closed upon a user gesture.
    */
   static get eventCloseModal() {
-    return `${ddsPrefix}-expressive-modal-closed`;
+    return `${c4dPrefix}-expressive-modal-closed`;
   }
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFooterComposite;
+export default C4DFooterComposite;
diff --git a/packages/web-components/src/components/footer/footer-container.ts b/packages/web-components/src/components/footer/footer-container.ts
index f4c7d5ecc8c..feea23fd346 100644
--- a/packages/web-components/src/components/footer/footer-container.ts
+++ b/packages/web-components/src/components/footer/footer-container.ts
@@ -14,7 +14,7 @@ import {
   Store,
   bindActionCreators,
 } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import ConnectMixin from '../../globals/mixins/connect';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import { LocaleAPIState } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/localeAPI.d';
@@ -40,13 +40,13 @@ import {
   LocaleModalContainerStateProps,
   LocaleModalContainerActions,
 } from '../locale-modal/locale-modal-container';
-import DDSFooterComposite from './footer-composite';
+import C4DFooterComposite from './footer-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux actions used for `<dds-footer-container>`.
+ * The Redux actions used for `<c4d-footer-container>`.
  */
 export type FooterContainerActions =
   | LocaleModalContainerActions
@@ -56,7 +56,7 @@ export type FooterContainerActions =
   | ReturnType<typeof setTranslation>;
 
 /**
- * The Redux state used for `<dds-footer-container>`.
+ * The Redux state used for `<c4d-footer-container>`.
  */
 export interface FooterContainerState extends LocaleModalContainerState {
   /**
@@ -71,7 +71,7 @@ export interface FooterContainerState extends LocaleModalContainerState {
 }
 
 /**
- * The properties for `<dds-footer-container>` from Redux state.
+ * The properties for `<c4d-footer-container>` from Redux state.
  */
 export interface FooterContainerStateProps
   extends LocaleModalContainerStateProps {
@@ -88,7 +88,7 @@ export interface FooterContainerStateProps
 
 /**
  * @param state The Redux state for masthead.
- * @returns The converted version of the given state, tailored for `<dds-footer-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-footer-container>`.
  */
 export function mapStateToProps(
   state: FooterContainerState
@@ -108,7 +108,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-footer-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-footer-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(
   dispatch: Dispatch<LocaleAPIActions | TranslateAPIActions>
@@ -132,10 +132,10 @@ export function mapDispatchToProps(
 /**
  * Container component for masthead.
  *
- * @element dds-footer-container
+ * @element c4d-footer-container
  */
-@customElement(`${ddsPrefix}-footer-container`)
-class DDSFooterContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-footer-container`)
+class C4DFooterContainer extends ConnectMixin<
   FooterContainerState,
   LocaleAPIActions | TranslateAPIActions,
   FooterContainerStateProps,
@@ -144,7 +144,7 @@ class DDSFooterContainer extends ConnectMixin<
   store as Store<FooterContainerState, LocaleAPIActions | TranslateAPIActions>,
   mapStateToProps,
   mapDispatchToProps
-)(DDSFooterComposite) {}
+)(C4DFooterComposite) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSFooterContainer;
+export default C4DFooterContainer;
diff --git a/packages/web-components/src/components/footer/footer-logo.ts b/packages/web-components/src/components/footer/footer-logo.ts
index e7532d35d3e..753bfdc8819 100644
--- a/packages/web-components/src/components/footer/footer-logo.ts
+++ b/packages/web-components/src/components/footer/footer-logo.ts
@@ -7,70 +7,70 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, svg, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html, LitElement } from 'lit';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import { property } from 'lit/decorators.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import IBM8BarLogoH65White from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h65-white.svg';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import IBM8BarLogoH23White from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h23-white.svg';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import { FOOTER_SIZE } from './footer';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The IBM logo UI in footer.
  *
- * @element dds-footer-logo
+ * @element c4d-footer-logo
  */
-@customElement(`${ddsPrefix}-footer-logo`)
-class DDSFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) {
+@customElement(`${c4dPrefix}-footer-logo`)
+class C4DFooterLogo extends StableSelectorMixin(FocusMixin(LitElement)) {
   /**
    * Link `href`.
    */
   @property()
   href = 'https://www.ibm.com/';
 
+  /**
+   * Size property used for applying classes
+   */
+  @property()
+  size = FOOTER_SIZE.REGULAR;
+
   /**
    * The shadow slot this logo UI should be in.
    */
   @property({ reflect: true })
   slot = 'brand';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
-    const { href } = this;
+    const { href, size } = this;
     return html`
       <a
-        class="${prefix}--footer-logo__link"
+        class="${c4dPrefix}--footer-logo__link"
         aria-label="IBM logo"
-        href="${ifNonNull(href)}">
-        ${IBM8BarLogoH65White({
-          class: `${prefix}--footer-logo__logo`,
-          role: 'img',
-          'aria-labelledby': 'footer-logo',
-          children: svg`<title id="footer-logo">IBM Logo</title>`,
-        })}
+        href="${ifDefined(href)}">
+        ${size !== FOOTER_SIZE.MICRO
+          ? unsafeSVG(IBM8BarLogoH65White)
+          : unsafeSVG(IBM8BarLogoH23White)}
         <slot></slot>
       </a>
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--footer-logo`;
+    return `${c4dPrefix}--footer-logo`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSFooterLogo;
+export default C4DFooterLogo;
diff --git a/packages/web-components/src/components/footer/footer-nav-group.ts b/packages/web-components/src/components/footer/footer-nav-group.ts
index d2d7f57a0a3..819ba2de111 100644
--- a/packages/web-components/src/components/footer/footer-nav-group.ts
+++ b/packages/web-components/src/components/footer/footer-nav-group.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import ChevronRight16 from '../../internal/vendor/@carbon/web-components/icons/chevron--right/16.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import MediaQueryMixin, {
   MQBreakpoints,
   MQDirs,
@@ -19,17 +19,16 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Footer nav group.
  *
- * @element dds-footer-nav-group
+ * @element c4d-footer-nav-group
  * @slot title - The title content.
  */
-@customElement(`${ddsPrefix}-footer-nav-group`)
-class DDSFooterNavGroup extends MediaQueryMixin(
+@customElement(`${c4dPrefix}-footer-nav-group`)
+class C4DFooterNavGroup extends MediaQueryMixin(
   StableSelectorMixin(LitElement),
   {
     [MQBreakpoints.MD]: MQDirs.MAX,
@@ -49,7 +48,7 @@ class DDSFooterNavGroup extends MediaQueryMixin(
    */
   private _handleUserInitiatedToggle(open = !this.open) {
     const { eventBeforeToggle, eventToggle } = this
-      .constructor as typeof DDSFooterNavGroup;
+      .constructor as typeof C4DFooterNavGroup;
     const init = {
       bubbles: true,
       cancelable: true,
@@ -146,21 +145,21 @@ class DDSFooterNavGroup extends MediaQueryMixin(
    * Cancellation of this event stops the user-initiated action of toggling this accordion item.
    */
   static get eventBeforeToggle() {
-    return `${ddsPrefix}-footer-nav-group-beingtoggled`;
+    return `${c4dPrefix}-footer-nav-group-beingtoggled`;
   }
 
   /**
    * The name of the custom event fired after this accordion item is toggled upon a user gesture.
    */
   static get eventToggle() {
-    return `${ddsPrefix}-footer-nav-group-toggled`;
+    return `${c4dPrefix}-footer-nav-group-toggled`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--footer-nav-group`;
+    return `${c4dPrefix}--footer-nav-group`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSFooterNavGroup;
+export default C4DFooterNavGroup;
diff --git a/packages/web-components/src/components/footer/footer-nav-item.ts b/packages/web-components/src/components/footer/footer-nav-item.ts
index dffb57c491b..186a4c194dc 100644
--- a/packages/web-components/src/components/footer/footer-nav-item.ts
+++ b/packages/web-components/src/components/footer/footer-nav-item.ts
@@ -7,23 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Footer nav item.
  *
- * @element dds-footer-nav-item
+ * @element c4d-footer-nav-item
  */
-@customElement(`${ddsPrefix}-footer-nav-item`)
-class DDSFooterNavItem extends BXLink {
+@customElement(`${c4dPrefix}-footer-nav-item`)
+class C4DFooterNavItem extends CDSLink {
   protected _renderInner() {
     const { titleText } = this;
     return html` <slot>${titleText}</slot> `;
@@ -52,4 +51,4 @@ class DDSFooterNavItem extends BXLink {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSFooterNavItem;
+export default C4DFooterNavItem;
diff --git a/packages/web-components/src/components/footer/footer-nav.ts b/packages/web-components/src/components/footer/footer-nav.ts
index 3b3ee6ece21..4e93250a8b1 100644
--- a/packages/web-components/src/components/footer/footer-nav.ts
+++ b/packages/web-components/src/components/footer/footer-nav.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Footer nav.
  *
- * @element dds-footer-nav
+ * @element c4d-footer-nav
  */
-@customElement(`${ddsPrefix}-footer-nav`)
-class DDSFooterNav extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-footer-nav`)
+class C4DFooterNav extends StableSelectorMixin(LitElement) {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'navigation');
@@ -52,15 +51,17 @@ class DDSFooterNav extends StableSelectorMixin(LitElement) {
     return html`
       <ul class=${classMap(classes)}>
         <slot></slot>
+        <slot name="locale-button"></slot>
+        <slot name="language-selector"></slot>
       </ul>
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--footer-nav`;
+    return `${c4dPrefix}--footer-nav`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSFooterNav;
+export default C4DFooterNav;
diff --git a/packages/web-components/src/components/footer/footer.scss b/packages/web-components/src/components/footer/footer.scss
index 440378fb042..de27e28943f 100644
--- a/packages/web-components/src/components/footer/footer.scss
+++ b/packages/web-components/src/components/footer/footer.scss
@@ -5,390 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/mixins';
-@import 'carbon-components/scss/globals/scss/vars';
-@import 'carbon-components/scss/components/accordion/accordion';
-@import 'carbon-components/scss/components/combo-box/combo-box';
-@import 'carbon-components/scss/components/select/select';
-@import 'carbon-components/scss/components/form/form';
-@import 'carbon-components/scss/components/text-input/text-input';
-@import 'carbon-components/scss/components/link/link';
-
-@import '../../../../styles/scss/globals/vars';
-@import '../../../../styles/scss/components/footer/footer';
-@import '../../../../styles/scss/components/footer/footer-logo';
-@import '../../../../styles/scss/components/footer/footer-nav';
-@import '../../../../styles/scss/components/footer/footer-nav-group';
-@import '../../../../styles/scss/components/footer/legal-nav';
-@import '../../../../styles/scss/components/footer/locale-button';
-
-:host(#{$dds-prefix}-footer),
-:host(#{$dds-prefix}-legal-nav) {
-  display: block;
-  .#{$prefix}--adjunct-links__container {
-    list-style: none;
-    padding: $spacing-09 0 $spacing-05 $spacing-05;
-    @include carbon--breakpoint-down('md') {
-      @include carbon--make-container;
-    }
-    .#{$prefix}--adjunct-links__row {
-      margin-right: 0;
-      @include carbon--make-row;
-      .#{$prefix}--adjunct-links__col {
-        ::slotted(#{$dds-prefix}-legal-nav-item) {
-          padding-top: 0;
-          padding-bottom: $spacing-03;
-        }
-
-        @include carbon--make-col(4, 4);
-        @include carbon--breakpoint('md') {
-          @include carbon--make-col(4, 8);
-        }
-        @include carbon--breakpoint('lg') {
-          padding-right: $spacing-05;
-          @include carbon--make-col(4, 12);
-        }
-      }
-    }
-  }
-  .#{$prefix}--adjunct-links__container--hidden {
-    display: none;
-  }
-}
-
-:host(#{$dds-prefix}-footer).#{$prefix}--adjunct-links__container
-  .#{$prefix}--adjunct-links__row
-  .#{$prefix}--adjunct-links__col,
-:host(dds-legal-nav)
-  .#{$prefix}--adjunct-links__container
-  .#{$prefix}--adjunct-links__row
-  .#{$prefix}--adjunct-links__col {
-  padding-right: $spacing-05;
-  @include carbon--breakpoint('md') {
-    padding-right: $spacing-07;
-  }
-}
-
-:host(#{$dds-prefix}-footer-nav-group[open]) {
-  @extend .#{$prefix}--accordion__item--active;
-}
-
-:host(#{$dds-prefix}-footer-nav-item),
-:host(#{$dds-prefix}-legal-nav-item),
-:host(#{$dds-prefix}-legal-nav-cookie-preferences-placeholder) {
-  display: list-item;
-  outline: none;
-}
-
-:host(#{$dds-prefix}-footer-nav-group[open]) .#{$prefix}--accordion__content {
-  display: block;
-  padding-top: 0;
-}
-
-:host(#{$dds-prefix}-footer-nav-group) {
-  .#{$prefix}--accordion__heading {
-    border-top: 1px solid $ui-03;
-    padding: 0;
-    align-items: center;
-    min-height: $carbon--spacing-09;
-  }
-}
-
-:host(#{$dds-prefix}-locale-button) {
-  outline: none;
-
-  .#{$prefix}--btn {
-    // Forces the style of text + icon button style
-    padding-right: 12px;
-  }
-}
-
-// The style of legal nav deviates from the one of React, so we can make the markup simpler.
-// FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
-:host(#{$dds-prefix}-legal-nav):not([size='micro']) {
-  .#{$prefix}--legal-nav__list {
-    padding-bottom: 0;
-    padding-top: 0;
-
-    @include carbon--breakpoint('md') {
-      padding-top: carbon--mini-units(1);
-    }
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col-offset(4, 16);
-    }
-
-    > ul {
-      width: 100%;
-      padding-right: $spacing-05;
-      @include carbon--breakpoint('md') {
-        display: block;
-        column-count: 2;
-        column-gap: $carbon--grid-gutter;
-      }
-
-      @include carbon--breakpoint('lg') {
-        column-count: 3;
-      }
-    }
-  }
-}
-
-:host(#{$dds-prefix}-footer[size='micro']) {
-  ::slotted(#{$dds-prefix}-footer-nav),
-  ::slotted(#{$dds-prefix}-footer-logo) {
-    display: none;
-  }
-}
-
-:host(#{$dds-prefix}-legal-nav[size='micro']) {
-  ::slotted(#{$dds-prefix}-legal-nav-item),
-  ::slotted(#{$dds-prefix}-legal-nav-cookie-preferences-placeholder) {
-    display: flex;
-    align-items: center;
-    padding: 0;
-    min-height: 3rem;
-  }
-
-  .#{$prefix}--adjunct-links__container {
-    display: none;
-  }
-
-  .#{$prefix}--legal-nav {
-    display: block;
-    border-top: 0;
-  }
-
-  // The style of legal nav deviates from the one of React, so we can make the markup simpler.
-  // FIXME: Once the style is stabilized, change the markup of React, too, so we can share the style
-  .#{$prefix}--legal-nav__list {
-    width: 100%;
-
-    > ul {
-      border-top: 1px solid $ui-03;
-      padding: 0 1rem;
-
-      @include carbon--breakpoint('md') {
-        display: flex;
-        column-count: inherit;
-      }
-
-      @include carbon--breakpoint('lg') {
-        border-top: none;
-      }
-    }
-  }
-}
-
-:host(#{$dds-prefix}-locale-button[size='micro']) {
-  margin: 0;
-  flex-shrink: 1;
-  padding: 0;
-
-  @include carbon--breakpoint('md') {
-    margin-left: 50%;
-  }
-  @include carbon--breakpoint('lg') {
-    margin-left: 0;
-  }
-
-  .#{$prefix}--btn {
-    padding-top: $carbon--spacing-04;
-    padding-bottom: $carbon--spacing-04;
-  }
-
-  .#{$prefix}--locale-btn {
-    max-width: 100%;
-  }
-
-  .#{$prefix}--btn--tertiary {
-    background-color: $ui-background;
-    margin: 0;
-    border: none;
-    @include carbon--type-style('body-short-01');
-    @include carbon--breakpoint('md') {
-      align-self: flex-end;
-      border-left: 1px solid $ui-03;
-    }
-
-    @include carbon--breakpoint('lg') {
-      margin: 0 (-$carbon--spacing-05) 0 0;
-    }
-
-    &:hover,
-    &:focus {
-      background-color: $hover-ui;
-      color: $text-01;
-    }
-
-    .#{$prefix}--btn--tertiary,
-    .#{$prefix}--list-box,
-    .#{$prefix}--select-input {
-      background-color: $ui-background;
-      max-width: 100%;
-
-      &:hover {
-        background-color: $hover-ui;
-      }
-
-      &:active {
-        background-color: $active-ui;
-      }
-    }
-
-    .#{$prefix}--select {
-      max-width: 100%;
-    }
-
-    .#{$prefix}--text-input,
-    .#{$prefix}--list-box,
-    .#{$prefix}--select-input {
-      border-bottom: none;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-language-selector-desktop),
-:host(#{$dds-prefix}-language-selector-mobile) {
-  position: relative;
-  outline: none;
-  margin-top: $spacing-09;
-  margin-bottom: $spacing-09;
-  max-height: $carbon--spacing-09;
-  padding: 0 $carbon--spacing-05;
-  @include carbon--make-col(4, 4);
-
-  .#{$prefix}--list-box__field {
-    background-color: $ui-01;
-  }
-
-  .#{$prefix}--combo-box {
-    bottom: $carbon--spacing-05;
-  }
-
-  .#{$prefix}--list-box__menu {
-    position: absolute;
-    top: auto;
-    bottom: rem(47px);
-    max-height: 13.5rem;
-  }
-
-  .#{$prefix}--text-input {
-    @include carbon--type-style('body-short-01');
-  }
-
-  @include carbon--breakpoint('md') {
-    margin-top: 0;
-    padding: 0;
-    @include carbon--make-col(4, 8);
-    @include carbon--make-col-offset(2, 8);
-  }
-
-  @include carbon--breakpoint('lg') {
-    @include carbon--make-col(4, 16);
-    @include carbon--make-col-offset(10, 16);
-
-    order: 1;
-    min-width: carbon--mini-units(27);
-  }
-}
-
-:host(#{$dds-prefix}-language-selector-desktop) {
-  .#{$prefix}--list-box__menu-icon {
-    right: $spacing-04;
-  }
-
-  .#{$prefix}--list-box__selection {
-    right: 2.25rem;
-  }
-
-  .#{$prefix}--label-visually-hidden {
-    visibility: hidden;
-    height: 0;
-  }
-}
-
-:host(#{$dds-prefix}-language-selector-desktop[size='micro']) {
-  margin: 0;
-  padding: 0;
-  border-left: 1px solid $ui-03;
-  align-self: flex-end;
-  margin-bottom: 0;
-  width: 100%;
-
-  .#{$prefix}--dropdown {
-    background-color: $ui-background;
-    max-height: $carbon--spacing-09;
-    height: $carbon--spacing-09;
-
-    .#{$prefix}--list-box__field {
-      height: inherit;
-      background-color: $ui-background;
-    }
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--list-box__menu {
-    bottom: rem(48px);
-  }
-
-  .#{$prefix}--dropdown,
-  .#{$prefix}--text-input {
-    border-bottom: none;
-  }
-
-  @include carbon--breakpoint('sm') {
-    .#{$prefix}--select-input__wrapper {
-      height: 100%;
-    }
-
-    .#{$prefix}--select-input {
-      height: 100%;
-      background-color: $ui-background;
-      border-bottom: none;
-
-      &:hover {
-        background-color: $hover-ui;
-      }
-    }
-  }
-
-  @include carbon--breakpoint('md') {
-    max-width: 50%;
-    border-left: 1px solid $ui-03;
-  }
-}
-
-:host(#{$dds-prefix}-language-selector-mobile[size='micro']) {
-  align-self: flex-end;
-  border-left: 1px solid $ui-03;
-  width: 100%;
-  margin: 0;
-  padding: 0;
-
-  .#{$prefix}--select-input {
-    height: 100%;
-    background-color: $ui-background;
-    border-bottom: none;
-    width: 100%;
-    max-width: 100%;
-
-    &:hover {
-      background-color: $hover-ui;
-    }
-  }
-
-  @include carbon--breakpoint('md') {
-    max-width: 50%;
-  }
-}
-
-:host(#{$dds-prefix}-language-selector-mobile) {
-  .#{$prefix}--select-input__wrapper {
-    height: $carbon--spacing-09;
-    margin-top: -#{$carbon--spacing-05};
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/footer';
diff --git a/packages/web-components/src/components/footer/footer.ts b/packages/web-components/src/components/footer/footer.ts
index dfecbceb269..970230bd2bc 100644
--- a/packages/web-components/src/components/footer/footer.ts
+++ b/packages/web-components/src/components/footer/footer.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { FOOTER_SIZE } from './defs';
 import styles from './footer.scss';
@@ -18,19 +18,18 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { FOOTER_SIZE };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The top-level element in footer.
  *
- * @element dds-footer
+ * @element c4d-footer
  * @slot brand - The brand content.
  * @slot legal-nav - The legal nav content.
  * @slot locale-button - The locale button content.
  */
-@customElement(`${ddsPrefix}-footer`)
-class DDSFooter extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-footer`)
+class C4DFooter extends StableSelectorMixin(LitElement) {
   /**
    * Footer size.
    */
@@ -68,9 +67,9 @@ class DDSFooter extends StableSelectorMixin(LitElement) {
               <slot name="brand"></slot>
               <slot name="locale-button"></slot>
               <slot name="language-selector"></slot>
+              <slot></slot>
             </div>
           </div>
-          <slot></slot>
         </div>
       </section>
       <slot name="legal-nav"></slot>
@@ -78,10 +77,10 @@ class DDSFooter extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--footer`;
+    return `${c4dPrefix}--footer`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSFooter;
+export default C4DFooter;
diff --git a/packages/web-components/src/components/footer/language-selector-desktop.ts b/packages/web-components/src/components/footer/language-selector-desktop.ts
index 60928ffb5c8..5ae6c656bc5 100644
--- a/packages/web-components/src/components/footer/language-selector-desktop.ts
+++ b/packages/web-components/src/components/footer/language-selector-desktop.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, query, state } from 'lit-element';
+import { property, query, state } from 'lit/decorators.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import BXComboBoxItem from '../../internal/vendor/@carbon/web-components/components/combo-box/combo-box-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSComboBoxItem from '../../internal/vendor/@carbon/web-components/components/combo-box/combo-box-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { LANGUAGE_SELECTOR_STYLE_SCHEME } from './defs';
-import DDSComboBox from './combo-box';
+import C4DComboBox from './combo-box';
 import styles from './footer.scss';
 import { findIndex, forEach } from '../../globals/internal/collection-helpers';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Language selector component - desktop.
  * The API for language selection is still subject to change.
  *
- * @element dds-language-selector-desktop
+ * @element c4d-language-selector-desktop
  */
-@customElement(`${ddsPrefix}-language-selector-desktop`)
-class DDSLanguageSelectorDesktop extends HostListenerMixin(DDSComboBox) {
+@customElement(`${c4dPrefix}-language-selector-desktop`)
+class C4DLanguageSelectorDesktop extends HostListenerMixin(C4DComboBox) {
   /**
    * Property that saves the last valid language to use on reset cases.
    */
@@ -61,14 +61,14 @@ class DDSLanguageSelectorDesktop extends HostListenerMixin(DDSComboBox) {
    */
   protected _handleInput() {
     const items = this.querySelectorAll(
-      (this.constructor as typeof DDSComboBox).selectorItem
+      (this.constructor as typeof C4DComboBox).selectorItem
     );
     const index = !this._filterInputNode.value
       ? -1
       : findIndex(items, this._testItemWithQueryText, this);
     forEach(items, (item, i) => {
       if (i === index) item.scrollIntoView();
-      (item as BXComboBoxItem).highlighted = i === index;
+      (item as CDSComboBoxItem).highlighted = i === index;
     });
     const { _filterInputNode: filterInput } = this;
     this._filterInputValue = !filterInput ? '' : filterInput.value;
@@ -83,11 +83,11 @@ class DDSLanguageSelectorDesktop extends HostListenerMixin(DDSComboBox) {
   protected _handleUserInitiatedClearInput() {
     forEach(
       this.querySelectorAll(
-        (this.constructor as typeof DDSComboBox).selectorItem
+        (this.constructor as typeof C4DComboBox).selectorItem
       ),
       (item) => {
-        (item as BXComboBoxItem).highlighted = false;
-        (item as BXComboBoxItem).selected = false;
+        (item as CDSComboBoxItem).highlighted = false;
+        (item as CDSComboBoxItem).selected = false;
       }
     );
     this._lastValidLang = this._filterInputValue;
@@ -102,7 +102,7 @@ class DDSLanguageSelectorDesktop extends HostListenerMixin(DDSComboBox) {
    *
    * @param item that was selected
    */
-  protected _handleUserInitiatedSelectItem(item?: BXComboBoxItem) {
+  protected _handleUserInitiatedSelectItem(item?: CDSComboBoxItem) {
     if (item && !this._selectionShouldChange(item)) {
       // Escape hatch for `shouldUpdate()` logic that updates `._filterInputValue()` when selection changes,
       // given we want to update the `<input>` and close the dropdown even if selection doesn't update.
@@ -117,7 +117,7 @@ class DDSLanguageSelectorDesktop extends HostListenerMixin(DDSComboBox) {
       this.requestUpdate();
     }
     this._lastValidLang = item?.textContent as string;
-    (item as BXComboBoxItem).selected = true;
+    (item as CDSComboBoxItem).selected = true;
     super._handleUserInitiatedSelectItem(item);
   }
 
@@ -143,4 +143,4 @@ class DDSLanguageSelectorDesktop extends HostListenerMixin(DDSComboBox) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLanguageSelectorDesktop;
+export default C4DLanguageSelectorDesktop;
diff --git a/packages/web-components/src/components/footer/language-selector-mobile.ts b/packages/web-components/src/components/footer/language-selector-mobile.ts
index 3a82bd7e056..b9f5cd4bc59 100644
--- a/packages/web-components/src/components/footer/language-selector-mobile.ts
+++ b/packages/web-components/src/components/footer/language-selector-mobile.ts
@@ -7,22 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXSelect from '../../internal/vendor/@carbon/web-components/components/select/select.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import CDSSelect from '../../internal/vendor/@carbon/web-components/components/select/select.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Language selector component - mobile version.
  * The API for language selection is still subject to change.
  *
- * @element dds-language-selector-mobile
+ * @element c4d-language-selector-mobile
  */
-@customElement(`${ddsPrefix}-language-selector-mobile`)
-class DDSLanguageSelectorMobile extends BXSelect {
+@customElement(`${c4dPrefix}-language-selector-mobile`)
+class C4DLanguageSelectorMobile extends CDSSelect {
   /**
    * The shadow slot this language-selector should be in.
    */
@@ -32,4 +32,4 @@ class DDSLanguageSelectorMobile extends BXSelect {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLanguageSelectorMobile;
+export default C4DLanguageSelectorMobile;
diff --git a/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts b/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts
index 7cb576dbf7a..da92138dd34 100644
--- a/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts
+++ b/packages/web-components/src/components/footer/legal-nav-cookie-preferences-placeholder.ts
@@ -7,25 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { state } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Legal nav item, working as a placeholder for cookie perference link.
  *
- * @element dds-legal-nav-cookie-preferences-placeholder
+ * @element c4d-legal-nav-cookie-preferences-placeholder
  */
-@customElement(`${ddsPrefix}-legal-nav-cookie-preferences-placeholder`)
-class DDSLegalNavCookiePreferencesPlaceholder extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-legal-nav-cookie-preferences-placeholder`)
+class C4DLegalNavCookiePreferencesPlaceholder extends StableSelectorMixin(
   LitElement
 ) {
+  /**
+   * `true` if there is cookie content.
+   */
+  @state()
+  protected _hasCookies = false;
+
   /**
    * Handles `slotchange` event.
    */
@@ -44,15 +49,20 @@ class DDSLegalNavCookiePreferencesPlaceholder extends StableSelectorMixin(
   }
 
   render() {
-    const { _handleSlotChange: handleSlotchange } = this;
-    return html` <slot @slotchange="${handleSlotchange}"></slot> `;
+    const { _handleSlotChange: handleSlotchange, _hasCookies: hasCookies } =
+      this;
+    return html`
+      <div ?hidden="${!hasCookies}">
+        <slot @slotchange="${handleSlotchange}"></slot>
+      </div>
+    `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--privacy-cp`;
+    return `${c4dPrefix}--privacy-cp`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLegalNavCookiePreferencesPlaceholder;
+export default C4DLegalNavCookiePreferencesPlaceholder;
diff --git a/packages/web-components/src/components/footer/legal-nav-item.ts b/packages/web-components/src/components/footer/legal-nav-item.ts
index e183c7bf571..3d8937947c7 100644
--- a/packages/web-components/src/components/footer/legal-nav-item.ts
+++ b/packages/web-components/src/components/footer/legal-nav-item.ts
@@ -7,22 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSFooterNavItem from './footer-nav-item';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DFooterNavItem from './footer-nav-item';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Legal nav item.
  *
- * @element dds-legal-nav-item
+ * @element c4d-legal-nav-item
  */
-@customElement(`${ddsPrefix}-legal-nav-item`)
-class DDSLegalNavItem extends DDSFooterNavItem {
+@customElement(`${c4dPrefix}-legal-nav-item`)
+class C4DLegalNavItem extends C4DFooterNavItem {
   /**
    * autoid text.
    */
@@ -39,10 +37,10 @@ class DDSLegalNavItem extends DDSFooterNavItem {
       linkNode.classList.add(`${prefix}--footer__link`);
       linkNode.setAttribute(
         'data-autoid',
-        `${ddsPrefix}--footer-legal-nav__link-${dataTitle}`
+        `${c4dPrefix}--footer-legal-nav__link-${dataTitle}`
       );
     }
   }
 }
 
-export default DDSLegalNavItem;
+export default C4DLegalNavItem;
diff --git a/packages/web-components/src/components/footer/legal-nav.ts b/packages/web-components/src/components/footer/legal-nav.ts
index c4c51c22f4a..97040524f4b 100644
--- a/packages/web-components/src/components/footer/legal-nav.ts
+++ b/packages/web-components/src/components/footer/legal-nav.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, query, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { FOOTER_SIZE } from './footer';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Legal nav.
  *
- * @element dds-legal-nav
+ * @element c4d-legal-nav
  */
-@customElement(`${ddsPrefix}-legal-nav`)
-class DDSLegalNav extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-legal-nav`)
+class C4DLegalNav extends StableSelectorMixin(LitElement) {
   /**
    * Size property used for applying classes
    */
@@ -35,7 +34,7 @@ class DDSLegalNav extends StableSelectorMixin(LitElement) {
   /**
    * The adjunct links container
    */
-  @query(`.${prefix}--adjunct-links__container`)
+  @query(`.${c4dPrefix}--adjunct-links__container`)
   private _adjunctLinksContainer?: HTMLDivElement;
 
   /**
@@ -49,8 +48,8 @@ class DDSLegalNav extends StableSelectorMixin(LitElement) {
    */
   protected _getTypeClass() {
     return classMap({
-      [`${prefix}--legal-nav__list`]: true,
-      [`${prefix}--legal-nav__micro`]: this.size === FOOTER_SIZE.MICRO,
+      [`${c4dPrefix}--legal-nav__list`]: true,
+      [`${c4dPrefix}--legal-nav__micro`]: this.size === FOOTER_SIZE.MICRO,
     });
   }
 
@@ -68,23 +67,35 @@ class DDSLegalNav extends StableSelectorMixin(LitElement) {
   }
 
   render() {
-    return html`
-      <nav class="${prefix}--legal-nav">
-        <div class="${this._getTypeClass()}">
-          <ul>
-            <slot></slot>
-          </ul>
-          <div class="${prefix}--adjunct-links__container">
-            <div class="${prefix}--adjunct-links__row">
-              <div class="${prefix}--adjunct-links__col">
+    return this.size !== FOOTER_SIZE.MICRO
+      ? html`
+          <nav class="${c4dPrefix}--legal-nav">
+            <div class="${this._getTypeClass()}">
+              <ul>
+                <slot></slot>
+              </ul>
+              <slot name="locale"></slot>
+            </div>
+            <div class="${c4dPrefix}--adjunct-links__container">
+              <ul>
                 <slot name="adjunct-links"></slot>
+              </ul>
+            </div>
+          </nav>
+        `
+      : html`
+          <nav class="${c4dPrefix}--legal-nav">
+            <div class="${this._getTypeClass()}">
+              <div>
+                <slot name="brand"></slot>
+                <ul>
+                  <slot></slot>
+                </ul>
               </div>
+              <slot name="locale"></slot>
             </div>
-          </div>
-          <slot name="locale"></slot>
-        </div>
-      </nav>
-    `;
+          </nav>
+        `;
   }
 
   firstUpdated() {
@@ -102,10 +113,10 @@ class DDSLegalNav extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--footer-legal-nav`;
+    return `${c4dPrefix}--footer-legal-nav`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLegalNav;
+export default C4DLegalNav;
diff --git a/packages/web-components/src/components/footer/locale-button.ts b/packages/web-components/src/components/footer/locale-button.ts
index 6dd63260d8b..76c19eff27a 100644
--- a/packages/web-components/src/components/footer/locale-button.ts
+++ b/packages/web-components/src/components/footer/locale-button.ts
@@ -7,27 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import EarthFilled16 from '../../internal/vendor/@carbon/web-components/icons/earth--filled/16.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { FOOTER_SIZE } from './footer';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './footer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Locale button.
  *
- * @element dds-locale-button
+ * @element c4d-locale-button
  */
-@customElement(`${ddsPrefix}-locale-button`)
-class DDSLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
+@customElement(`${c4dPrefix}-locale-button`)
+class C4DLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
   /**
    * Button label for accessibility.
    */
@@ -46,22 +45,13 @@ class DDSLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
   @property({ reflect: true })
   slot = 'locale-button';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const { buttonLabel } = this;
     return html`
       <button
         id="button"
-        class="${prefix}--btn ${prefix}--btn--tertiary ${prefix}--locale-btn"
-        aria-label="${ifNonNull(buttonLabel)}">
+        class="${prefix}--btn ${prefix}--btn--tertiary ${c4dPrefix}--locale-btn"
+        aria-label="${ifDefined(buttonLabel)}">
         <slot></slot>
         ${EarthFilled16()}
       </button>
@@ -69,10 +59,14 @@ class DDSLocaleButton extends StableSelectorMixin(FocusMixin(LitElement)) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--locale-btn`;
+    return `${c4dPrefix}--locale-btn`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLocaleButton;
+export default C4DLocaleButton;
diff --git a/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
new file mode 100644
index 00000000000..b2c2004ff67
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/__stories__/README.stories.mdx
@@ -0,0 +1,130 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+import '../index';
+
+# Global banner
+
+A Global banner is the only component allowed to show up above the Masthead,
+and should be used exclusively for global and critical announcements (e.g. THINK
+global event, COVID 19 messages etc).
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/global-banner)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/global-banner)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+## Example using imports
+
+### JS
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/global-banner/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['global-banner'] })}`} />
+
+<Description markdown={`${cdnCss()}`} />
+
+## Example HTML
+
+This will render a basic global banner containing a heading, copy text, and a
+button CTA at the top of the page, sitting above the masthead.
+
+The component should be placed before the Dotcom shell, but in case it is placed
+within, it can move itself to the proper place automatically.
+
+```html
+<cds-global-banner>
+  <cds-global-banner-heading
+    >Hybrid cloud and AI for smarter business</cds-global-banner-heading
+  >
+  <cds-global-banner-copy
+    >Las Vegas, June 15-18, 2025</cds-global-banner-copy
+  >
+  <cds-button
+    slot="cta"
+    cta-type="local"
+    kind="tertiary"
+    href="https://www.example.com">
+    Register for Think. Free
+  </cds-button>
+</cds-global-banner>
+```
+
+## Example HTML - With image
+
+This example renders the banner with the aforementioned elements and an image.
+
+Add the `image-width` attribute into the global banner and set it to either
+`4-col` or `8-col`. Note that if an image is added without the attribute being
+manually added, it will default to `4-col`.
+
+It is important to create an image asset that best fits the component to ensure
+a proper aspect ratio.
+
+```html
+<cds-global-banner image-width="4-col">
+  <cds-global-banner-image
+    slot="image"
+    default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></cds-global-banner-image>
+  <cds-global-banner-heading slot="heading"
+    >Hybrid cloud and AI for smarter business</cds-global-banner-heading
+  >
+  <cds-global-banner-copy slot="copy"
+    >Las Vegas, June 15-18, 2025</cds-global-banner-copy
+  >
+  <cds-button-cta
+    slot="cta"
+    cta-type="local"
+    kind="tertiary"
+    href="https://www.example.com">
+    Register for Think. Free
+  </cds-button-cta>
+</cds-global-banner>
+```
+
+In case you'd like to change images depending on the breakpoint, you can use the
+`cds-image-item` component as such:
+
+```html
+<cds-global-banner-image
+  default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  <cds-image-item
+    media="(min-width:672px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-width:400px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-width:320px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+</cds-global-banner-image>
+```
+
+## Props
+
+<Props of="cds-global-banner" />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector          | Compatibility selector                        | Description |
+| -------------------------------- | --------------------------------------------- | ----------- |
+| `<cds-global-banner>`         | `data-autoid="cds--global-banner"`         | Component   |
+| `<cds-global-banner-heading>` | `data-autoid="cds--global-banner-heading"` | Component   |
+| `<cds-global-banner-copy>`    | `data-autoid="cds--global-banner-copy"`    | Component   |
+| `<cds-global-banner-image>`   | `data-autoid="cds--global-banner-image"`   | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx b/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx
new file mode 100644
index 00000000000..3994246111e
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/__stories__/README.stories.react.mdx
@@ -0,0 +1,136 @@
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
+
+# Global banner
+
+A Global banner is the only component allowed to show up above the Masthead,
+and should be used exclusively for global and critical announcements (e.g. THINK
+global event, COVID 19 messages etc).
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/global-banner)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/global-banner)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+This will render a basic global banner containing a heading, copy text, and a
+button CTA at the top of the page, sitting above the masthead.
+
+The component should be placed before the Dotcom shell, but in case it is placed
+within, it can move itself to the proper place automatically.
+
+### JS
+
+```javascript
+import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
+import C4DGlobalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-heading';
+import C4DGlobalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-copy';
+import C4DGlobalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-image';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+
+function App() {
+  return (
+    <C4DGlobalBanner>
+      <C4DGlobalBannerHeading>
+        Hybrid cloud and AI for smarter business
+      </C4DGlobalBannerHeading>
+      <C4DGlobalBannerCopy>
+        Las Vegas, June 15-18, 2025
+      </C4DGlobalBannerCopy>
+      <C4DButton
+        slot="cta"
+        cta-type="local"
+        kind="tertiary"
+        href="https://www.example.com">
+        Register for Think. Free
+      </C4DButton>
+    </C4DGlobalBanner>
+  );
+}
+```
+
+## Example - With image
+
+This example renders the banner with the aforementioned elements and an image.
+
+Add the `image-width` attribute into the global banner and set it to either
+`4-col` or `8-col`. Note that if an image is added without the attribute being
+manually added, it will default to `4-col`.
+
+It is important to create an image asset that best fits the component to ensure
+a proper aspect ratio.
+
+```javascript
+function App() {
+  return (
+    <C4DGlobalBanner image-width="4-col">
+      <C4DGlobalBannerImage
+        default-src={
+          'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616'
+        }></C4DGlobalBannerImage>
+      <C4DGlobalBannerHeading slot="heading">
+        Hybrid cloud and AI for smarter business
+      </C4DGlobalBannerHeading>
+      <C4DGlobalBannerCopy slot="copy">
+        Las Vegas, June 15-18, 2025
+      </C4DGlobalBannerCopy>
+      <C4DButtonCTA
+        slot="cta"
+        cta-type="local"
+        kind="tertiary"
+        href="https://www.example.com">
+        Register for Think. Free
+      </C4DButtonCTA>
+    </C4DGlobalBanner>
+  );
+}
+```
+
+In case you'd like to change images depending on the breakpoint, you can use the
+`C4DImageItem` component as such:
+
+```javascript
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+
+<C4DGlobalBannerImage
+  default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  <C4DImageItem
+    media="(min-width:672px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+  <C4DImageItem
+    media="(min-width:400px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+  <C4DImageItem
+    media="(min-width:320px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+</C4DGlobalBannerImage>;
+```
+
+## Props
+
+<Props of={PropTypesRef} />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector          | Compatibility selector                        | Description |
+| -------------------------------- | --------------------------------------------- | ----------- |
+| `<cds-global-banner>`         | `data-autoid="cds--global-banner"`         | Component   |
+| `<cds-global-banner-heading>` | `data-autoid="cds--global-banner-heading"` | Component   |
+| `<cds-global-banner-copy>`    | `data-autoid="cds--global-banner-copy"`    | Component   |
+| `<cds-global-banner-image>`   | `data-autoid="cds--global-banner-image"`   | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.react.tsx b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.react.tsx
new file mode 100644
index 00000000000..8bd34cc67d1
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.react.tsx
@@ -0,0 +1,136 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { select, text } from '@storybook/addon-knobs';
+// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+/* eslint-disable max-len */
+// @ts-ignore
+import C4DGlobalBanner from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner';
+import C4DGlobalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-heading';
+import C4DGlobalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-copy';
+import C4DGlobalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/global-banner/global-banner-image';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+/* eslint-enable max-len */
+import readme from './README.stories.react.mdx';
+
+// eslint-disable-next-line sort-imports
+import img4Col from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-image.jpg';
+import img8Col from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-image.jpg';
+import img4ColLg from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-lg.jpg';
+import img8ColLg from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-lg.jpg';
+import img4ColXlg from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-xlg.jpg';
+import img8ColXlg from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg';
+
+// import StoryContent from '../../back-to-top/__stories__/data/content';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+
+const imageWidthOptions = {
+  [`4 Columns`]: `4-col`,
+  [`8 Columns`]: `8-col`,
+  [`None`]: '',
+};
+
+const images = {
+  '4-col': img4Col,
+  '8-col': img8Col,
+};
+
+const srcsets = {
+  '4-col': [img4ColLg, img4ColXlg, img4Col],
+  '8-col': [img8ColLg, img8ColXlg, img8Col],
+};
+
+export const Default = (args) => {
+  const { heading, copy, ctaCopy, imageWidth } = args?.GlobalBanner ?? {};
+
+  const bannerHeading = document.querySelector('cds-global-banner-heading');
+  const bannerCopy = document.querySelector('c4d-global-banner-copy');
+
+  if (bannerHeading) {
+    bannerHeading!.shadowRoot!.textContent = heading;
+  }
+
+  if (bannerCopy) {
+    bannerCopy!.shadowRoot!.textContent = copy;
+  }
+
+  const srcset = srcsets[imageWidth];
+
+  return (
+    <C4DGlobalBanner image-width={imageWidth}>
+      {imageWidth ? (
+        <C4DGlobalBannerImage default-src={images[imageWidth]}>
+          <C4DImageItem
+            media="(min-width:1584px)"
+            srcset={srcset[2]}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width:1056px)"
+            srcset={srcset[1]}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width:1312px)"
+            srcset={srcset[0]}></C4DImageItem>
+        </C4DGlobalBannerImage>
+      ) : (
+        ''
+      )}
+      <C4DGlobalBannerHeading>
+        {heading}
+      </C4DGlobalBannerHeading>
+      <C4DGlobalBannerCopy></C4DGlobalBannerCopy>
+      <C4DButton
+        slot="cta"
+        cta-type="local"
+        kind="tertiary"
+        href="https://www.example.com">
+        {ctaCopy}
+      </C4DButton>
+    </C4DGlobalBanner>
+  );
+};
+
+Default.story = {
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      GlobalBanner: () => ({
+        heading: textNullable(
+          'Heading:',
+          'Hybrid cloud and AI for smarter business'
+        ),
+        copy: text('Copy (optional):', 'Las Vegas, June 15-18, 2025'),
+        ctaCopy: textNullable('CTA copy:', 'Register for Think. Free'),
+        imageWidth: select('Image width:', imageWidthOptions, '4-col'),
+      }),
+    },
+  },
+};
+
+export default {
+  title: 'Components/Global banner',
+  decorators: [
+    (story) => {
+      return story();
+    },
+  ],
+  parameters: {
+    ...readme.parameters,
+  },
+  propsSet: {
+    default: {
+      GlobalBanner: {
+        heading: 'Hybrid cloud and AI for smarter business',
+        copy: 'Las Vegas, June 15-18, 2025',
+        ctaCopy: 'Register for Think. Free',
+        imageWidth: '4-col',
+      },
+    },
+  },
+};
diff --git a/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts
new file mode 100644
index 00000000000..450deb9c6a8
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/__stories__/global-banner.stories.ts
@@ -0,0 +1,122 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { select, text } from '@storybook/addon-knobs';
+import '../index';
+import readme from './README.stories.mdx';
+
+// eslint-disable-next-line sort-imports
+import img4Col from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-image.jpg';
+import img8Col from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-image.jpg';
+import img4ColLg from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-lg.jpg';
+import img8ColLg from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-lg.jpg';
+import img4ColXlg from '../../../../../storybook-images/assets/global-banner/global-banner-4-col-xlg.jpg';
+import img8ColXlg from '../../../../../storybook-images/assets/global-banner/global-banner-8-col-xlg.jpg';
+
+// import StoryContent from '../../back-to-top/__stories__/data/content';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+
+const imageWidthOptions = {
+  [`4 Columns`]: `4-col`,
+  [`8 Columns`]: `8-col`,
+  [`None`]: '',
+};
+
+const images = {
+  '4-col': img4Col,
+  '8-col': img8Col,
+};
+
+const srcsets = {
+  '4-col': [img4ColLg, img4ColXlg, img4Col],
+  '8-col': [img8ColLg, img8ColXlg, img8Col],
+};
+
+export const Default = (args) => {
+  const { heading, copy, ctaCopy, imageWidth } = args?.GlobalBanner ?? {};
+
+  const bannerHeading = document.querySelector('c4d-global-banner-heading');
+  const bannerCopy = document.querySelector('c4d-global-banner-copy');
+
+  if (bannerHeading) {
+    bannerHeading!.shadowRoot!.textContent = heading;
+  }
+
+  if (bannerCopy) {
+    bannerCopy!.shadowRoot!.textContent = copy;
+  }
+
+  const srcset = srcsets[imageWidth];
+
+  return html`
+    <c4d-global-banner image-width="${imageWidth}">
+      ${imageWidth
+        ? html`
+            <c4d-global-banner-image default-src="${images[imageWidth]}">
+              <c4d-image-item media="(min-width: 1584px)" srcset="${srcset[2]}">
+              </c4d-image-item>
+              <c4d-image-item media="(min-width: 1056px)" srcset="${srcset[1]}">
+              </c4d-image-item>
+              <c4d-image-item media="(min-width: 1312px)" srcset="${srcset[0]}">
+              </c4d-image-item>
+            </c4d-global-banner-image>
+          `
+        : ``}
+      <c4d-global-banner-heading>${heading}</c4d-global-banner-heading>
+      <c4d-global-banner-copy></c4d-global-banner-copy>
+      <c4d-button
+        slot="cta"
+        cta-type="local"
+        kind="tertiary"
+        href="https://www.example.com">
+        ${ctaCopy}
+      </c4d-button>
+    </c4d-global-banner>
+  `;
+};
+
+Default.story = {
+  parameters: {
+    ...readme.parameters,
+    knobs: {
+      GlobalBanner: () => ({
+        heading: textNullable(
+          'Heading:',
+          'Hybrid cloud and AI for smarter business'
+        ),
+        copy: text('Copy (optional):', 'Las Vegas, June 15-18, 2025'),
+        ctaCopy: textNullable('CTA copy:', 'Register for Think. Free'),
+        imageWidth: select('Image width:', imageWidthOptions, '4-col'),
+      }),
+    },
+  },
+};
+
+export default {
+  title: 'Components/Global banner',
+  decorators: [
+    (story) => {
+      return html` ${story()} `;
+    },
+  ],
+  parameters: {
+    ...readme.parameters,
+  },
+  propsSet: {
+    default: {
+      globalBanner: {
+        heading: 'Hybrid cloud and AI for smarter business',
+        copy: 'Las Vegas, June 15-18, 2025',
+        ctaCopy: 'Register for Think. Free',
+        imageWidth: '4-col',
+      },
+    },
+  },
+};
diff --git a/packages/web-components/src/components/global-banner/global-banner-copy.ts b/packages/web-components/src/components/global-banner/global-banner-copy.ts
new file mode 100644
index 00000000000..d7e17f2627c
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/global-banner-copy.ts
@@ -0,0 +1,46 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './global-banner.scss';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import C4DMarkdown from '../markdown/markdown';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The paragraph content in the global banner
+ *
+ * @element c4d-global-banner-copy
+ */
+@customElement(`${c4dPrefix}-global-banner-copy`)
+class C4DGlobalBannerCopy extends StableSelectorMixin(C4DMarkdown) {
+  @property({ reflect: true })
+  slot = 'copy';
+
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  firstUpdated() {
+    this.querySelector('p')?.setAttribute('style', 'all:unset;');
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}-global-banner-copy`;
+  }
+
+  static styles = styles;
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DGlobalBannerCopy;
diff --git a/packages/web-components/src/components/global-banner/global-banner-heading.ts b/packages/web-components/src/components/global-banner/global-banner-heading.ts
new file mode 100644
index 00000000000..7836abcdef0
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/global-banner-heading.ts
@@ -0,0 +1,64 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { stripHTML } from '@carbon/ibmdotcom-utilities/es/utilities/stripHTML/index.js';
+import { render } from 'lit/html.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import styles from './global-banner.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The heading content in global banner
+ *
+ * @element c4d-global-banner-heading
+ */
+@customElement(`${c4dPrefix}-global-banner-heading`)
+class C4DGlobalBannerHeading extends StableSelectorMixin(LitElement) {
+  /**
+   * The shadow slot this logo UI should be in.
+   */
+  @property({ reflect: true })
+  slot = 'heading';
+
+  @state()
+  content = '';
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'heading');
+    }
+    if (!this.hasAttribute('aria-level')) {
+      this.setAttribute('aria-level', '2');
+    }
+    super.connectedCallback();
+  }
+
+  firstUpdated() {
+    this.content = stripHTML(this.innerHTML);
+    render(html` ${this.content} `, this);
+  }
+
+  render() {
+    return html` ${this.content} `;
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}-global-banner-heading`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DGlobalBannerHeading;
diff --git a/packages/web-components/src/components/global-banner/global-banner-image.ts b/packages/web-components/src/components/global-banner/global-banner-image.ts
new file mode 100644
index 00000000000..7e55b574aa2
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/global-banner-image.ts
@@ -0,0 +1,44 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import C4DImage from '../image/image';
+import styles from './global-banner.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Global banner image.
+ *
+ * @element c4d-global-banner-image
+ */
+
+@customElement(`${c4dPrefix}-global-banner-image`)
+class C4DGlobalBannerImage extends C4DImage {
+  /**
+   * The shadow slot the image should go in
+   */
+  @property({ reflect: true })
+  slot = 'image';
+
+  static get stableSelector() {
+    return `${c4dPrefix}-global-banner-image`;
+  }
+
+  static get styles() {
+    return css`
+      ${super.styles}${styles}
+    `;
+  }
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DGlobalBannerImage;
diff --git a/packages/web-components/src/components/global-banner/global-banner.scss b/packages/web-components/src/components/global-banner/global-banner.scss
new file mode 100644
index 00000000000..2318e7f164e
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/global-banner.scss
@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use '@carbon/ibmdotcom-styles/scss/components/global-banner';
diff --git a/packages/web-components/src/components/global-banner/global-banner.ts b/packages/web-components/src/components/global-banner/global-banner.ts
new file mode 100644
index 00000000000..f3368582eda
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/global-banner.ts
@@ -0,0 +1,199 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2019, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { baseFontSize, breakpoints } from '@carbon/layout';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import styles from './global-banner.scss';
+import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader';
+import C4DButton from '../button/button';
+import { icons as ctaIcons } from '../../component-mixins/cta/cta';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const gridLgBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Global banner
+ *
+ * @element c4d-global-banner
+ */
+@customElement(`${c4dPrefix}-global-banner`)
+class C4DGlobalBanner extends StableSelectorMixin(LitElement) {
+  /**
+   * Saves the button CTA's href to use in link-with-icon for the small breakpoint
+   */
+  @property()
+  buttonHref;
+
+  /**
+   * Saves the button CTA's type to properly set the icon at `sm` and `md` breakpoints.
+   */
+  @property()
+  ctaType;
+
+  /**
+   * `true` if there is an image.
+   */
+  @property({ attribute: 'has-image', reflect: true, type: Boolean })
+  hasImage = false;
+
+  /**
+   * Grid media options to display image.
+   * Available options are either '4-col' or '8-col'.
+   */
+  @property({ attribute: 'image-width', reflect: true, type: String })
+  imageWidth;
+
+  private _breakpoint?: MediaQueryList;
+
+  @property({ type: Boolean })
+  private _shouldRenderAsLink = false;
+
+  @query(`.${prefix}--global-banner-layout-container`)
+  private _linkWrapper;
+
+  /**
+   * Handles `slotchange` event on the cta `<slot>`.
+   */
+  protected _handleImageSlotChange({ target }: Event) {
+    this.hasImage = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
+
+    if (this.hasImage && !this.imageWidth) {
+      this.imageWidth = '4-col';
+    }
+  }
+
+  /**
+   * Handles `slotchange` event on the cta `<slot>`.
+   */
+  protected _handleButtonSlotChange({ target }: Event) {
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .filter((elem) =>
+        (elem as HTMLElement).matches?.(
+          (this.constructor as typeof C4DGlobalBanner).ctaButton
+        )
+      );
+
+    this.buttonHref = (hasContent[0] as HTMLElement)?.getAttribute('href');
+    this.ctaType = (hasContent[0] as C4DButton)?.ctaType;
+  }
+
+  protected _handleResize() {
+    const { _breakpoint: breakpoint } = this;
+    this._shouldRenderAsLink = !breakpoint!.matches;
+  }
+
+  firstUpdated() {
+    StickyHeader.global.banner = this;
+
+    this._breakpoint = window.matchMedia(`(min-width: ${gridLgBreakpoint}px)`);
+    this._breakpoint.addEventListener('change', this._handleResize.bind(this));
+    this._handleResize();
+  }
+
+  connectedCallback() {
+    if (!this.hasAttribute('role')) {
+      this.setAttribute('role', 'banner');
+    }
+    super.connectedCallback();
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('_shouldRenderAsLink')) {
+      const { _shouldRenderAsLink: shouldRenderAsLink, ctaType } = this;
+
+      if (shouldRenderAsLink && ctaType === 'external') {
+        setTimeout(() => {
+          this._linkWrapper.setAttribute('target', '_blank');
+        }, 0);
+      }
+    }
+  }
+
+  /**
+   * Renders shadow dom within a static div
+   */
+  _renderAsStatic() {
+    return html`
+      <div class="${prefix}--global-banner-layout-container">
+        ${this._renderInnerContents()}
+      </div>
+    `;
+  }
+
+  _renderAsLink() {
+    return html`
+      <a
+        href="${this.buttonHref}"
+        class="${prefix}--global-banner-layout-container">
+        ${this._renderInnerContents()}
+      </a>
+    `;
+  }
+
+  _renderIcon() {
+    return html` ${ctaIcons[this.ctaType]()} `;
+  }
+
+  _renderInnerContents() {
+    return html`
+      <div class="${prefix}--global-banner-content-wrapper">
+        <div
+          ?hidden="${!this.hasImage}"
+          class="${prefix}--global-banner-image-container">
+          <slot
+            name="image"
+            @slotchange="${this._handleImageSlotChange}"></slot>
+        </div>
+
+        <div class="${prefix}--global-banner-text-container">
+          <slot name="heading"></slot>
+          <slot name="copy"></slot>
+        </div>
+
+        <div class="${prefix}--global-banner-cta-container">
+          <slot name="cta" @slotchange="${this._handleButtonSlotChange}"></slot>
+        </div>
+
+        <div class="${prefix}--global-banner-icon">
+          ${this.ctaType ? this._renderIcon() : ''}
+        </div>
+      </div>
+    `;
+  }
+
+  render() {
+    return html`
+      ${this._shouldRenderAsLink
+        ? this._renderAsLink()
+        : this._renderAsStatic()}
+    `;
+  }
+
+  /**
+   * A selector that will return the CTA button
+   */
+  static get ctaButton() {
+    return `${c4dPrefix}-button`;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DGlobalBanner;
diff --git a/packages/web-components/src/components/global-banner/index.ts b/packages/web-components/src/components/global-banner/index.ts
new file mode 100644
index 00000000000..0c9d98c02f7
--- /dev/null
+++ b/packages/web-components/src/components/global-banner/index.ts
@@ -0,0 +1,15 @@
+/**
+ * @license
+ *
+ * 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 './global-banner';
+import './global-banner-heading';
+import './global-banner-copy';
+import './global-banner-image';
+import '../button/index';
+import '../link-with-icon/index';
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
index 5de00ff3ae0..98a7b7a970e 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.mdx
@@ -1,12 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import '../horizontal-rule';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
-
 # Horizontal Rule
 
 > 💡 Check our
@@ -32,19 +33,21 @@ import '@carbon/ibmdotcom-web-components/es/components/horizontal-rule/index.js'
 ### HTML
 
 ```html
-<dds-hr></dds-hr>
+<cds-hr></cds-hr>
 ```
 
 ## Props
 
-<Props of="dds-hr" />
+<Props of="cds-hr" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector  | Description |
 | ----------------------- | ----------------------- | ----------- |
-| `<dds-hr>`              | `data-autoid="dds--hr"` | Component   |
+| `<cds-hr>`              | `data-autoid="cds--hr"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx
index 8031de8b455..66dfe9a0a3c 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
 
@@ -17,11 +22,11 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
 
 function App() {
   return (
-    <DDSHorizontalRule></DDSHorizontalRule>;
+    <C4DHorizontalRule></C4DHorizontalRule>;
   );
 }
 ```
@@ -32,10 +37,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector  | Description |
 | ----------------------- | ----------------------- | ----------- |
-| `<dds-hr>`              | `data-autoid="dds--hr"` | Component   |
+| `<cds-hr>`              | `data-autoid="cds--hr"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx
index ef990add622..c983ba01e78 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.react.tsx
@@ -12,7 +12,7 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
 import readme from './README.stories.react.mdx';
 
 const types = {
@@ -28,9 +28,8 @@ const sizes = {
 };
 
 const contrasts = {
-  'low-contrast': 'low-contrast',
-  'medium-contrast': undefined,
-  'high-contrast': 'high-contrast',
+  'strong': 'strong',
+  'subtle': 'subtle',
 };
 
 const weights = {
@@ -38,9 +37,15 @@ const weights = {
   thick: 'thick',
 };
 
-export const Default = args => {
+export const Default = (args) => {
   const { type, size, contrast, weight } = args?.HorizontalRule ?? {};
-  return <DDSHorizontalRule type={type} size={size} contrast={contrast} weight={weight}></DDSHorizontalRule>;
+  return (
+    <C4DHorizontalRule
+      type={type}
+      size={size}
+      contrast={contrast}
+      weight={weight}></C4DHorizontalRule>
+  );
 };
 
 Default.story = {
@@ -49,7 +54,7 @@ Default.story = {
       HorizontalRule: () => ({
         type: select('Type (type):', types, types.solid),
         size: select('Size (size):', sizes, sizes.fluid),
-        contrast: select('Contrast (contrast):', contrasts, contrasts['medium-contrast']),
+        contrast: select('Contrast (contrast):', contrasts, contrasts['strong']),
         weight: select('Weight (weight):', weights, weights.thin),
       }),
     },
@@ -58,7 +63,7 @@ Default.story = {
         HorizontalRule: {
           type: types.solid,
           size: sizes.fluid,
-          contrast: contrasts['medium-contrast'],
+          contrast: contrasts['strong'],
           weight: weights.thin,
         },
       },
@@ -69,11 +74,11 @@ Default.story = {
 export default {
   title: 'Components/Horizontal Rule',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid bx--grid--condensed">
-          <div className="bx--row">
-            <div className="bx--col-lg-12">
+        <div className="cds-grid cds--grid--condensed">
+          <div className="cds-row">
+            <div className="cds-col-lg-12">
               <h2>Horizontal Rule</h2>
               {story()}
             </div>
diff --git a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
index ad73501c847..26ed2a88a0f 100644
--- a/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
+++ b/packages/web-components/src/components/horizontal-rule/__stories__/horizontal-rule.stories.ts
@@ -8,20 +8,20 @@
  */
 
 import { select } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../horizontal-rule';
 import readme from './README.stories.mdx';
 
 export const Default = (args) => {
   const { type, size, contrast, weight } = args?.HorizontalRule ?? {};
   return html`
-    <dds-hr
-      type="${ifNonNull(type)}"
-      size="${ifNonNull(size)}"
-      contrast="${ifNonNull(contrast)}"
-      weight="${ifNonNull(weight)}">
-    </dds-hr>
+    <c4d-hr
+      type="${ifDefined(type)}"
+      size="${ifDefined(size)}"
+      contrast="${ifDefined(contrast)}"
+      weight="${ifDefined(weight)}">
+    </c4d-hr>
   `;
 };
 
@@ -38,9 +38,8 @@ const sizes = {
 };
 
 const contrasts = {
-  'low-contrast': 'low-contrast',
-  'medium-contrast': undefined,
-  'high-contrast': 'high-contrast',
+  strong: 'strong',
+  subtle: 'subtle',
 };
 
 const weights = {
@@ -52,9 +51,9 @@ export default {
   title: 'Components/Horizontal rule',
   decorators: [
     (story) => html`
-      <div class="bx--grid bx--grid--condensed">
-        <div class="bx--row">
-          <div class="bx--col-lg-12">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12">
             <h2>Horizontal Rule</h2>
             ${story()}
           </div>
@@ -72,7 +71,7 @@ export default {
         contrast: select(
           'Contrast (contrast):',
           contrasts,
-          contrasts['medium-contrast']
+          contrasts['strong']
         ),
         weight: select('Weight (weight):', weights, weights.thin),
       }),
@@ -82,7 +81,7 @@ export default {
         HorizontalRule: {
           type: types.solid,
           size: sizes.fluid,
-          contrast: contrasts['medium-contrast'],
+          contrast: contrasts['strong'],
           weight: weights.thin,
         },
       },
diff --git a/packages/web-components/src/components/horizontal-rule/__tests__/horizontal-rule.test.ts b/packages/web-components/src/components/horizontal-rule/__tests__/horizontal-rule.test.ts
index ab5af81cd9e..ef954114544 100644
--- a/packages/web-components/src/components/horizontal-rule/__tests__/horizontal-rule.test.ts
+++ b/packages/web-components/src/components/horizontal-rule/__tests__/horizontal-rule.test.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../horizontal-rule';
 
 const template = (props?) => {
   const { type, size, weight, contrast } = props ?? {};
   return html`
-    <dds-hr
-      size="${ifNonNull(size)}"
-      type="${ifNonNull(type)}"
-      weight="${ifNonNull(weight)}"
-      contrast="${ifNonNull(contrast)}"></dds-hr>
+    <c4d-hr
+      size="${ifDefined(size)}"
+      type="${ifDefined(type)}"
+      weight="${ifDefined(weight)}"
+      contrast="${ifDefined(contrast)}"></c4d-hr>
   `;
 };
 
-describe('dds-hr', function () {
+describe('c4d-hr', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-hr>`
-      expect(document.body.querySelector('dds-hr')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-hr>`
+      expect(document.body.querySelector('c4d-hr')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -37,8 +37,8 @@ describe('dds-hr', function () {
         template({ size: 'small', type: 'solid', weight: 'thin' }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-hr>`
-      expect(document.body.querySelector('dds-hr')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-hr>`
+      expect(document.body.querySelector('c4d-hr')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -52,8 +52,8 @@ describe('dds-hr', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-hr>`
-      expect(document.body.querySelector('dds-hr')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-hr>`
+      expect(document.body.querySelector('c4d-hr')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/horizontal-rule/defs.ts b/packages/web-components/src/components/horizontal-rule/defs.ts
index 2ce2b9d3455..ee197f989cd 100644
--- a/packages/web-components/src/components/horizontal-rule/defs.ts
+++ b/packages/web-components/src/components/horizontal-rule/defs.ts
@@ -52,19 +52,14 @@ export enum HR_SIZE {
  */
 export enum HR_CONTRAST {
   /**
-   * medium-contrast of hr
+   * subtle contrast of hr
    */
-  MEDIUM_CONTRAST = 'medium-contrast',
+  SUBTLE = 'subtle',
 
   /**
-   * low-contrast of hr
+   * strong default contrast of hr
    */
-  LOW_CONTRAST = 'low-contrast',
-
-  /**
-   * high-contrast of hr
-   */
-  HIGH_CONTRAST = 'high-contrast',
+  STRONG = 'strong',
 }
 
 /**
diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss b/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss
index 213b4cc4d87..e36fdd3ccb2 100644
--- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss
+++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.scss
@@ -5,9 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/horizontalrule/horizontalrule';
-
-:host(#{$dds-prefix}-hr) {
-  display: block;
-}
+@use '@carbon/ibmdotcom-styles/scss/components/horizontal-rule';
diff --git a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts
index f341da9a584..9d3092072e5 100644
--- a/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts
+++ b/packages/web-components/src/components/horizontal-rule/horizontal-rule.ts
@@ -7,8 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, LitElement } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { HR_TYPE, HR_SIZE, HR_CONTRAST, HR_WEIGHT } from './defs';
 import styles from './horizontal-rule.scss';
@@ -16,15 +17,15 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { HR_TYPE, HR_SIZE, HR_CONTRAST, HR_WEIGHT };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Horizontal Rule
  *
- * @element dds-hr
+ * @element c4d-hr
  */
-@customElement(`${ddsPrefix}-hr`)
-class DDSHorizontalRule extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-hr`)
+class C4DHorizontalRule extends StableSelectorMixin(LitElement) {
   /**
    * Style of the HR (solid (default) | dashed)
    */
@@ -40,10 +41,10 @@ class DDSHorizontalRule extends StableSelectorMixin(LitElement) {
 
   /**
    * Contrast of the HR
-   * (medium-contrast (default) | low-contrast | high-contrast)
+   * 'strong' (default) | subtle)
    */
   @property({ attribute: 'contrast', reflect: true })
-  contrast = HR_CONTRAST.MEDIUM_CONTRAST;
+  contrast = HR_CONTRAST.STRONG;
 
   /**
    * Weight of the HR
@@ -60,11 +61,11 @@ class DDSHorizontalRule extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--hr`;
+    return `${c4dPrefix}--hr`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSHorizontalRule;
+export default C4DHorizontalRule;
diff --git a/packages/web-components/src/components/image-with-caption/image-with-caption.scss b/packages/web-components/src/components/image-with-caption/image-with-caption.scss
deleted file mode 100644
index 8bc57f48086..00000000000
--- a/packages/web-components/src/components/image-with-caption/image-with-caption.scss
+++ /dev/null
@@ -1,12 +0,0 @@
-//
-// Copyright IBM Corp. 2020
-//
-// 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 '@carbon/ibmdotcom-styles/scss/components/image-with-caption/image-with-caption';
-
-:host(#{$dds-prefix}-image-with-caption) {
-  outline: none;
-}
diff --git a/packages/web-components/src/components/image-with-caption/image-with-caption.ts b/packages/web-components/src/components/image-with-caption/image-with-caption.ts
deleted file mode 100644
index 5839ba37959..00000000000
--- a/packages/web-components/src/components/image-with-caption/image-with-caption.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import '../expressive-modal/expressive-modal';
-import '../expressive-modal/expressive-modal-close-button';
-import '../image/image';
-import '../lightbox-media-viewer/lightbox-image-viewer';
-import '../button/button';
-import ZoomIn20 from '../../internal/vendor/@carbon/web-components/icons/zoom--in/20.js';
-import deprecate from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/deprecate/deprecate';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './image-with-caption.scss';
-import ModalRenderMixin from '../../globals/mixins/modal-render';
-import Handle from '../../globals/internal/handle';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Image With Caption
- *
- * @element dds-image-with-caption
- */
-
-@customElement(`${ddsPrefix}-image-with-caption`)
-class DDSImageWithCaption extends StableSelectorMixin(
-  ModalRenderMixin(FocusMixin(LitElement))
-) {
-  /**
-   * `true` handles re-opening after model is closed
-   *
-   * @private
-   */
-  private _handleClick() {
-    this.open = true;
-  }
-
-  /**
-   * The handler of `${ddsPrefix}-expressive-modal-closed` event from `<dds-expressive-modal>`.
-   */
-  private _handleCloseModal = () => {
-    this.open = false;
-  };
-
-  /**
-   * The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.
-   */
-  private _hCloseModal: Handle | null = null;
-
-  /**
-   * The lightbox.
-   */
-  @property({ type: Boolean, reflect: true })
-  lightbox = false;
-
-  /**
-   * The image source.
-   */
-  @property({ reflect: true, attribute: 'default-src' })
-  defaultSrc = '';
-
-  /**
-   * The alt text.
-   */
-  @property({ reflect: true })
-  alt = '';
-
-  /**
-   * The heading.
-   */
-  @property({ reflect: true })
-  heading = '';
-
-  @property({ attribute: 'launch-lightbox-button-assistive-text' })
-  launchLightboxButtonAssistiveText = 'launch light box media viewer';
-
-  /**
-   * The description.
-   */
-  @property({ reflect: true })
-  copy = '';
-
-  /**
-   * `true` if the modal should be open.
-   */
-  @property({ type: Boolean, reflect: true })
-  open = false;
-
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    this.modalRenderRoot = this.createModalRenderRoot(); // Creates modal render root up-front to hook the event listener
-    // Manually hooks the event listeners on the modal render root to make the event names configurable
-    this._hCloseModal = on(
-      this.modalRenderRoot,
-      (this.constructor as typeof DDSImageWithCaption).eventCloseModal,
-      this._handleCloseModal as EventListener
-    );
-  }
-
-  disconnectedCallback() {
-    if (this._hCloseModal) {
-      this._hCloseModal = this._hCloseModal.release();
-    }
-    super.disconnectedCallback();
-  }
-
-  render() {
-    const {
-      alt,
-      defaultSrc,
-      heading,
-      launchLightboxButtonAssistiveText,
-      lightbox,
-      _handleClick: handleClick,
-    } = this;
-    return html`
-      ${lightbox
-        ? html`
-            <button
-              class="${prefix}--image-with-caption__image"
-              aria-label="${ifNonNull(launchLightboxButtonAssistiveText)}"
-              @click="${handleClick}">
-              <dds-image
-                alt="${ifNonNull(alt)}"
-                default-src="${ifNonNull(defaultSrc)}"
-                ><slot></slot
-              ></dds-image>
-              <div class="${prefix}--image-with-caption__zoom-button">
-                ${ZoomIn20()}
-              </div>
-            </button>
-          `
-        : html`
-            <dds-image
-              alt="${ifNonNull(alt)}"
-              default-src="${ifNonNull(defaultSrc)}"
-              ><slot></slot
-            ></dds-image>
-          `}
-      <p class="${prefix}--image__caption">${heading}</p>
-    `;
-  }
-
-  renderModal() {
-    const { alt, copy, defaultSrc, heading, lightbox, open } = this;
-    return !lightbox
-      ? undefined
-      : html`
-          <dds-expressive-modal ?open="${open}" expressive-size="full-width">
-            <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-            <dds-lightbox-image-viewer
-              alt="${ifNonNull(alt)}"
-              default-src="${ifNonNull(defaultSrc)}"
-              description="${ifNonNull(copy)}"
-              title="${ifNonNull(heading)}">
-            </dds-lightbox-image-viewer>
-          </dds-expressive-modal>
-        `;
-  }
-
-  /**
-   * The name of the custom event fired after the modal is closed upon a user gesture.
-   */
-  static get eventCloseModal() {
-    return `${ddsPrefix}-expressive-modal-closed`;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--image-with-caption`;
-  }
-
-  static styles = styles;
-}
-
-export default deprecate(
-  /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-  DDSImageWithCaption,
-  'The dds-image-with-caption component has been merged with the dds-image component ' +
-    'See dds-image documentation for more information.'
-);
diff --git a/packages/web-components/src/components/image-with-caption/index.ts b/packages/web-components/src/components/image-with-caption/index.ts
deleted file mode 100644
index 0e190c22f05..00000000000
--- a/packages/web-components/src/components/image-with-caption/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-/**
- * @license
- *
- * 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 './image-with-caption';
diff --git a/packages/web-components/src/components/image/__stories__/README.stories.mdx b/packages/web-components/src/components/image/__stories__/README.stories.mdx
index cd92d63b140..944d34b397d 100644
--- a/packages/web-components/src/components/image/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/image/__stories__/README.stories.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
@@ -10,8 +15,8 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 > The Image component leverages the image component, the lightbox media viewer
 > and can also display a caption for the image
 
-> Image items are used to change how the image behaves at different screen sizes.
-> Below you'll find an example with and without media query behaviors.
+> Image items are used to change how the image behaves at different screen
+> sizes. Below you'll find an example with and without media query behaviors.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/image)
@@ -35,77 +40,113 @@ import '@carbon/ibmdotcom-web-components/es/components/image/index.js';
 
 ```html
 // Example without media queries
-<dds-image alt="Image alt text">
-  <dds-image-item srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"> </dds-image-item>
-</dds-image>
+<cds-image alt="Image alt text">
+  <cds-image-item
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+</cds-image>
 
 // Example with media queries
-<dds-image alt="Image alt text">
-  <dds-image-item media="(min-wiidth:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-</dds-image>
+<cds-image alt="Image alt text">
+  <cds-image-item
+    media="(min-wiidth:672px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:400px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:320px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+</cds-image>
 ```
 
 ## Image with caption
 
-As of Carbon for IBM.com v1.35.0, the caption functionality found in Image with caption has been merged within the basic Image component.
-Simply adding a `heading` attribute will display the caption underneath the image component.
+As of Carbon for IBM.com v1.35.0, the caption functionality found in Image with
+caption has been merged within the basic Image component. Simply adding a
+`heading` attribute will display the caption underneath the image component.
 
 ```html
-<dds-image alt="Image alt text" heading="This is a heading">
-  <dds-image-item media="(min-wiidth:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-</dds-image>
+<cds-image alt="Image alt text" heading="This is a heading">
+  <cds-image-item
+    media="(min-wiidth:672px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:400px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:320px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+</cds-image>
 ```
 
 ## Opening image in Lightbox media viewer
 
-Likewise, the lightbox functionality from Image with caption can be used with the basic Image component.
-Simply adding the `lightbox` attribute boolean will ensure the user can click on the image and launch the media viewer in a lightbox modal.
+Likewise, the lightbox functionality from Image with caption can be used with
+the basic Image component. Simply adding the `lightbox` attribute boolean will
+ensure the user can click on the image and launch the media viewer in a lightbox
+modal.
 
 ```html
-<dds-image alt="Image alt text" lightbox="true">
-  <dds-image-item media="(min-wiidth:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-</dds-image>
+<cds-image alt="Image alt text" lightbox="true">
+  <cds-image-item
+    media="(min-wiidth:672px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:400px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:320px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+</cds-image>
 ```
 
-A heading and copy can be added so that it can be displayed underneath the image in the lighbox media viewer upon clicking the original image.
+A heading and copy can be added so that it can be displayed underneath the image
+in the lighbox media viewer upon clicking the original image.
 
 ```html
-<dds-image alt="Image alt text" lightbox="true" heading="This is a heading" copy="This is a copy">
-  <dds-image-item media="(min-wiidth:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-  <dds-image-item media="(min-wiidth:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-  </dds-image-item>
-</dds-image>
+<cds-image
+  alt="Image alt text"
+  lightbox="true"
+  heading="This is a heading"
+  copy="This is a copy">
+  <cds-image-item
+    media="(min-wiidth:672px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:400px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+  <cds-image-item
+    media="(min-wiidth:320px)"
+    srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
+  </cds-image-item>
+</cds-image>
 ```
 
 ## Props
 
-<Props of="dds-image" />
+<Props of="cds-image" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector          | Description |
 | ----------------------- | ------------------------------- | ----------- |
-| `<dds-image>`           | `data-autoid="dds--image"`      | Component   |
-| `<dds-image-item>`      | `data-autoid="dds--image-item"` | Interactive |
+| `<cds-image>`           | `data-autoid="cds--image"`      | Component   |
+| `<cds-image-item>`      | `data-autoid="cds--image-item"` | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/image/__stories__/README.stories.react.mdx b/packages/web-components/src/components/image/__stories__/README.stories.react.mdx
index 4c7b9fffeeb..c3de151b777 100644
--- a/packages/web-components/src/components/image/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/image/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef as ImageProps } from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 
@@ -17,76 +22,96 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
 
 function App() {
   return (
-  <DDSImage alt="Image alt text">
-    <DDSImageItem media="(min-width:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-  </DDSImage>
+    <C4DImage alt="Image alt text">
+      <C4DImageItem
+        media="(min-width:672px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:400px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:320px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+    </C4DImage>
   );
 }
 ```
 
 ## Image with caption
 
-As of Carbon for IBM.com v1.35.0, the caption functionality found in Image with caption has been merged within the basic Image component.
-Simply adding a `heading` attribute will display the caption underneath the image component.
+As of Carbon for IBM.com v1.35.0, the caption functionality found in Image with
+caption has been merged within the basic Image component. Simply adding a
+`heading` attribute will display the caption underneath the image component.
 
 ```javascript
 function App() {
   return (
-  <DDSImage alt="Image alt text" heading={"This is a heading"}>
-    <DDSImageItem media="(min-width:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-  </DDSImage>
+    <C4DImage alt="Image alt text" heading={'This is a heading'}>
+      <C4DImageItem
+        media="(min-width:672px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:400px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:320px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+    </C4DImage>
   );
 }
 ```
 
 ## Opening image in Lightbox media viewer
 
-Likewise, the lightbox functionality from Image with caption can be used with the basic Image component.
-Simply adding the `lightbox` attribute boolean will ensure the user can click on the image and launch the media viewer in a lightbox modal.
+Likewise, the lightbox functionality from Image with caption can be used with
+the basic Image component. Simply adding the `lightbox` attribute boolean will
+ensure the user can click on the image and launch the media viewer in a lightbox
+modal.
 
 ```javascript
 function App() {
   return (
-  <DDSImage alt="Image alt text" lightbox={true}>
-    <DDSImageItem media="(min-width:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-  </DDSImage>
+    <C4DImage alt="Image alt text" lightbox={true}>
+      <C4DImageItem
+        media="(min-width:672px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:400px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:320px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+    </C4DImage>
   );
 }
 ```
 
-A heading and copy can be added so that it can be displayed underneath the image in the lighbox media viewer upon clicking the original image.
+A heading and copy can be added so that it can be displayed underneath the image
+in the lighbox media viewer upon clicking the original image.
 
 ```javascript
 function App() {
   return (
-  <DDSImage alt="Image alt text" lightbox={true} heading={"This is a heading"} copy={"This is a copy"}>
-    <DDSImageItem media="(min-width:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-    <DDSImageItem media="(min-width:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-    </DDSImageItem>
-  </DDSImage>
+    <C4DImage
+      alt="Image alt text"
+      lightbox={true}
+      heading={'This is a heading'}
+      copy={'This is a copy'}>
+      <C4DImageItem
+        media="(min-width:672px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:400px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+      <C4DImageItem
+        media="(min-width:320px)"
+        srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></C4DImageItem>
+    </C4DImage>
   );
 }
 ```
@@ -97,11 +122,13 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-image>`        | N/A                    | Component   |
-| `<dds-image-item>`        | N/A                    | Component   |
+| `<cds-image>`           | N/A                    | Component   |
+| `<cds-image-item>`      | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/image/__stories__/image.stories.react.tsx b/packages/web-components/src/components/image/__stories__/image.stories.react.tsx
index cab6097a27b..c5a610530a6 100644
--- a/packages/web-components/src/components/image/__stories__/image.stories.react.tsx
+++ b/packages/web-components/src/components/image/__stories__/image.stories.react.tsx
@@ -12,64 +12,125 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 
 import readme from './README.stories.react.mdx';
-import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
-import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--005.jpg';
+import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
+import imgLg3x2 from '../../../../../storybook-images/assets/720/fpo--3x2--720x480--005.jpg';
+import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--005.jpg';
+import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--005.jpg';
+import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
 import imgMd2x1 from '../../../../../storybook-images/assets/480/fpo--2x1--480x240--005.jpg';
+import imgMd3x2 from '../../../../../storybook-images/assets/480/fpo--3x2--480x320--005.jpg';
+import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
+import imgMd1x1 from '../../../../../storybook-images/assets/480/fpo--1x1--480x480--005.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
-import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
+import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--005.jpg';
+import imgSm3x2 from '../../../../../storybook-images/assets/320/fpo--3x2--320x213--005.jpg';
+import imgSm4x3 from '../../../../../storybook-images/assets/320/fpo--4x3--320x160--004.jpg';
+import imgSm1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--005.jpg';
+import chartSvg from './chart-svg.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import { LIGHTBOX_CONTRAST } from '../image';
+
+const contrasts = {
+  light: LIGHTBOX_CONTRAST.LIGHT,
+  dark: LIGHTBOX_CONTRAST.DARK,
+};
 
 const images = {
   '2:1': imgLg2x1,
   '16:9': imgLg16x9,
+  '3:2': imgLg3x2,
+  '4:3': imgLg4x3,
+  '1:1': imgLg1x1,
+  'SVG (transparent background)': chartSvg,
 };
 
 const srcsets = {
   '2:1': [imgSm2x1, imgMd2x1, imgLg2x1],
   '16:9': [imgSm16x9, imgMd16x9, imgLg16x9],
+  '3:2': [imgSm3x2, imgMd3x2, imgLg3x2],
+  '4x3': [imgSm4x3, imgMd4x3, imgLg4x3],
+  '1x1': [imgSm1x1, imgMd1x1, imgLg1x1],
 };
 
-export const Default = args => {
-  const { alt, defaultSrc, heading, copy, border, lightbox } = args?.Image ?? {};
-  // TODO: See if we can fix unwanted `&` to `&amp` conversion upon changing the select knob
-  const srcset = srcsets[defaultSrc?.replace(/&amp;/, '&')];
+export const Default = (args) => {
+  const {
+    alt,
+    defaultSrc,
+    heading,
+    copy,
+    border,
+    lightbox,
+    lightboxContrast,
+    longDescription,
+  } = args?.Image ?? {};
+
+  const ratio = String(
+    Object.keys(images).find((key) => images[key] === defaultSrc)
+  );
+  const srcset = srcsets[ratio];
+
   return (
-    <DDSImage
+    <C4DImage
       alt={alt || undefined}
-      defaultSrc={defaultSrc || undefined}
-      border={border}
+      default-src={defaultSrc || undefined}
+      border={border || undefined}
       heading={heading || undefined}
       copy={copy || undefined}
-      lightbox={lightbox}>
-      {!srcset ? (
-        undefined
+      lightbox={lightbox || undefined}
+      lightbox-contrast={lightboxContrast}>
+      {!longDescription ? (
+        ''
       ) : (
+        <div slot="long-description">{longDescription}</div>
+      )}
+      {!srcset ? undefined : (
         <>
-          <DDSImageItem media="(min-width: 672px)" srcset={srcset[2]} />
-          <DDSImageItem media="(min-width: 400px)" srcset={srcset[1]} />
-          <DDSImageItem media="(min-width: 320px)" srcset={srcset[0]} />
+          <C4DImageItem media="(min-width: 672px)" srcset={srcset[2]} />
+          <C4DImageItem media="(min-width: 400px)" srcset={srcset[1]} />
+          <C4DImageItem media="(min-width: 320px)" srcset={srcset[0]} />
         </>
       )}
-    </DDSImage>
+    </C4DImage>
   );
 };
 
 Default.story = {
   parameters: {
     knobs: {
-      Image: () => ({
-        alt: textNullable('Alt text', 'Image alt text'),
-        defaultSrc: select('Default image (default-src)', images, imgLg2x1),
-        lightbox: boolean('Lightbox (lightbox)', false),
-        border: boolean('Border', false),
-        copy: textNullable('Copy (copy)', 'Lorem ipsum dolor sit amet'),
-        heading: textNullable('Heading (heading)', ''),
-      }),
+      Image: () => {
+        const alt = textNullable('Alt text', 'Image alt text');
+        const defaultSrc = select(
+          'Default image (default-src)',
+          images,
+          imgLg2x1
+        );
+        const border = boolean('Border', false);
+        const copy = textNullable('Copy (copy)', 'Lorem ipsum dolor sit amet');
+        const heading = textNullable('Heading (heading)', 'This is a caption');
+        const longDescription = textNullable(
+          'Long Description',
+          'Optional long descriptive text that is visually hidden to help screen reader users.'
+        );
+        const lightbox = boolean('Lightbox (lightbox)', false);
+        const lightboxContrast = lightbox
+          ? select('Lightbox contrast', contrasts, LIGHTBOX_CONTRAST.LIGHT)
+          : '';
+        return {
+          alt,
+          defaultSrc,
+          border,
+          copy,
+          heading,
+          longDescription,
+          lightbox,
+          lightboxContrast,
+        };
+      },
     },
   },
 };
@@ -77,11 +138,11 @@ Default.story = {
 export default {
   title: 'Components/Image',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-sm-4 bx--col-lg-8">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-sm-4 cds--col-lg-8">{story()}</div>
           </div>
         </div>
       );
diff --git a/packages/web-components/src/components/image/__stories__/image.stories.ts b/packages/web-components/src/components/image/__stories__/image.stories.ts
index fb020dff0ee..d6341850c0c 100644
--- a/packages/web-components/src/components/image/__stories__/image.stories.ts
+++ b/packages/web-components/src/components/image/__stories__/image.stories.ts
@@ -8,58 +8,88 @@
  */
 
 import '../image';
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select, boolean } from '@storybook/addon-knobs';
 // eslint-disable-next-line sort-imports
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--005.jpg';
 import imgLg2x1 from '../../../../../storybook-images/assets/720/fpo--2x1--720x360--005.jpg';
+import imgLg3x2 from '../../../../../storybook-images/assets/720/fpo--3x2--720x480--005.jpg';
+import imgLg4x3 from '../../../../../storybook-images/assets/720/fpo--4x3--720x540--005.jpg';
+import imgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--005.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--005.jpg';
 import imgMd2x1 from '../../../../../storybook-images/assets/480/fpo--2x1--480x240--005.jpg';
+import imgMd3x2 from '../../../../../storybook-images/assets/480/fpo--3x2--480x320--005.jpg';
+import imgMd4x3 from '../../../../../storybook-images/assets/480/fpo--4x3--480x360--005.jpg';
+import imgMd1x1 from '../../../../../storybook-images/assets/480/fpo--1x1--480x480--005.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--005.jpg';
 import imgSm2x1 from '../../../../../storybook-images/assets/320/fpo--2x1--320x160--005.jpg';
+import imgSm3x2 from '../../../../../storybook-images/assets/320/fpo--3x2--320x213--005.jpg';
+import imgSm4x3 from '../../../../../storybook-images/assets/320/fpo--4x3--320x160--004.jpg';
+import imgSm1x1 from '../../../../../storybook-images/assets/320/fpo--1x1--320x320--005.jpg';
 import chartSvg from './chart-svg.js';
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import { LIGHTBOX_CONTRAST } from '../image';
+
+const contrasts = {
+  light: LIGHTBOX_CONTRAST.LIGHT,
+  dark: LIGHTBOX_CONTRAST.DARK,
+};
 
 const images = {
   '2:1': imgLg2x1,
   '16:9': imgLg16x9,
+  '3:2': imgLg3x2,
+  '4:3': imgLg4x3,
+  '1:1': imgLg1x1,
   'SVG (transparent background)': chartSvg,
 };
 
 const srcsets = {
   '2:1': [imgSm2x1, imgMd2x1, imgLg2x1],
   '16:9': [imgSm16x9, imgMd16x9, imgLg16x9],
+  '3:2': [imgSm3x2, imgMd3x2, imgLg3x2],
+  '4x3': [imgSm4x3, imgMd4x3, imgLg4x3],
+  '1x1': [imgSm1x1, imgMd1x1, imgLg1x1],
 };
 
 export const Default = (args) => {
-  const { alt, defaultSrc, heading, copy, border, lightbox, longDescription } =
-    args?.['dds-image'] ?? {};
+  const {
+    alt,
+    defaultSrc,
+    heading,
+    copy,
+    border,
+    lightbox,
+    lightboxContrast,
+    longDescription,
+  } = args?.['c4d-image'] ?? {};
   // TODO: See if we can fix unwanted `&` to `&amp` conversion upon changing the select knob
   const srcset = srcsets[defaultSrc?.replace(/&amp;/, '&')];
   return html`
-    <dds-image
-      alt="${ifNonNull(alt)}"
-      heading="${ifNonNull(heading)}"
-      default-src="${ifNonNull(defaultSrc)}"
+    <c4d-image
+      alt="${ifDefined(alt)}"
+      heading="${ifDefined(heading)}"
+      default-src="${ifDefined(defaultSrc)}"
       ?border=${border}
       ?lightbox="${lightbox}"
-      copy="${ifNonNull(copy)}">
+      lightbox-contrast="${lightboxContrast}"
+      copy="${ifDefined(copy)}">
       ${!longDescription
         ? undefined
         : html` <div slot="long-description">${longDescription}</div> `}
       ${!srcset
         ? undefined
         : html`
-            <dds-image-item media="(min-width: 672px)" srcset="${srcset[2]}">
-            </dds-image-item>
-            <dds-image-item media="(min-width: 400px)" srcset="${srcset[1]}">
-            </dds-image-item>
-            <dds-image-item media="(min-width: 320px)" srcset="${srcset[0]}">
-            </dds-image-item>
+            <c4d-image-item media="(min-width: 672px)" srcset="${srcset[2]}">
+            </c4d-image-item>
+            <c4d-image-item media="(min-width: 400px)" srcset="${srcset[1]}">
+            </c4d-image-item>
+            <c4d-image-item media="(min-width: 320px)" srcset="${srcset[0]}">
+            </c4d-image-item>
           `}
-    </dds-image>
+    </c4d-image>
   `;
 };
 
@@ -68,9 +98,9 @@ export default {
   decorators: [
     (story) =>
       html`
-        <div class="bx--grid">
-          <div class="bx--row">
-            <div class="bx--col-sm-4 bx--col-lg-8">${story()}</div>
+        <div class="cds--grid">
+          <div class="cds--row">
+            <div class="cds--col-sm-4 cds--col-lg-8">${story()}</div>
           </div>
         </div>
       `,
@@ -79,22 +109,39 @@ export default {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      'dds-image': () => ({
-        alt: textNullable('Alt text', 'Image alt text'),
-        defaultSrc: select('Default image (default-src)', images, imgLg2x1),
-        lightbox: boolean('Lightbox (lightbox)', false),
-        border: boolean('Border', false),
-        copy: textNullable('Copy (copy)', 'Lorem ipsum dolor sit amet'),
-        heading: textNullable('Heading (heading)', 'This is a caption'),
-        longDescription: textNullable(
+      'c4d-image': () => {
+        const alt = textNullable('Alt text', 'Image alt text');
+        const defaultSrc = select(
+          'Default image (default-src)',
+          images,
+          imgLg2x1
+        );
+        const border = boolean('Border', false);
+        const copy = textNullable('Copy (copy)', 'Lorem ipsum dolor sit amet');
+        const heading = textNullable('Heading (heading)', 'This is a caption');
+        const longDescription = textNullable(
           'Long Description',
           'Optional long descriptive text that is visually hidden to help screen reader users.'
-        ),
-      }),
+        );
+        const lightbox = boolean('Lightbox (lightbox)', false);
+        const lightboxContrast = lightbox
+          ? select('Lightbox contrast', contrasts, LIGHTBOX_CONTRAST.LIGHT)
+          : '';
+        return {
+          alt,
+          defaultSrc,
+          border,
+          copy,
+          heading,
+          longDescription,
+          lightbox,
+          lightboxContrast,
+        };
+      },
     },
     propsSet: {
       default: {
-        'dds-image': {
+        'c4d-image': {
           alt: 'Image alt text',
           defaultSrc: imgLg2x1,
           border: false,
diff --git a/packages/web-components/src/components/image/__tests__/image.test.ts b/packages/web-components/src/components/image/__tests__/image.test.ts
index f5689d4b0c6..68e13689b4f 100644
--- a/packages/web-components/src/components/image/__tests__/image.test.ts
+++ b/packages/web-components/src/components/image/__tests__/image.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../image';
 import { Default } from '../__stories__/image.stories';
 
@@ -16,12 +16,12 @@ const template = (props?) =>
     image: props,
   });
 
-describe('dds-image', function () {
+describe('c4d-image', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-image>`
-      expect(document.body.querySelector('dds-image')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-image>`
+      expect(document.body.querySelector('c4d-image')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -35,8 +35,8 @@ describe('dds-image', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-image>`
-      expect(document.body.querySelector('dds-image')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-image>`
+      expect(document.body.querySelector('c4d-image')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/image/defs.ts b/packages/web-components/src/components/image/defs.ts
new file mode 100644
index 00000000000..936a2bf3299
--- /dev/null
+++ b/packages/web-components/src/components/image/defs.ts
@@ -0,0 +1,23 @@
+/**
+ * @license
+ *
+ * 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.
+ */
+
+/**
+ * Image lightbox contrast
+ */
+export enum LIGHTBOX_CONTRAST {
+  /**
+   * Light (default).
+   */
+  LIGHT = 'light',
+
+  /**
+   * Dark.
+   */
+  DARK = 'dark',
+}
diff --git a/packages/web-components/src/components/image/image-item.ts b/packages/web-components/src/components/image/image-item.ts
index 0ff10aeecce..78c03a0bcbb 100644
--- a/packages/web-components/src/components/image/image-item.ts
+++ b/packages/web-components/src/components/image/image-item.ts
@@ -6,28 +6,28 @@
  * 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 { LitElement } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './image.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Image item.
  *
- * @element dds-image-item
+ * @element c4d-image-item
  */
 
-@customElement(`${ddsPrefix}-image-item`)
-class DDSImageItem extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-image-item`)
+class C4DImageItem extends StableSelectorMixin(LitElement) {
   static get stableSelector() {
-    return `${ddsPrefix}-image-item`;
+    return `${c4dPrefix}-image-item`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSImageItem;
+export default C4DImageItem;
diff --git a/packages/web-components/src/components/image/image.scss b/packages/web-components/src/components/image/image.scss
index eaef9d36815..5d081a7b38b 100644
--- a/packages/web-components/src/components/image/image.scss
+++ b/packages/web-components/src/components/image/image.scss
@@ -5,32 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/utils/ratio-base';
-@import '@carbon/ibmdotcom-styles/scss/components/image/image';
-@import '@carbon/ibmdotcom-styles/scss/components/image-with-caption/image-with-caption';
-
-:host(#{$dds-prefix}-card-cta-image),
-:host(#{$dds-prefix}-image) {
-  @extend .#{$prefix}--image;
-
-  display: block;
-
-  ::slotted(svg[slot='icon']) {
-    @extend .#{$prefix}--image__icon;
-  }
-}
-
-:host(#{$dds-prefix}-image-item) {
-  display: none;
-}
-
-:host(#{$dds-prefix}-card-cta-image) {
-  @include ratio-base(4, 3, true);
-
-  .#{$prefix}--image__img {
-    position: absolute;
-    height: 100%;
-    top: 0;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/image';
diff --git a/packages/web-components/src/components/image/image.ts b/packages/web-components/src/components/image/image.ts
index 29f63e7c43c..b9290187f95 100644
--- a/packages/web-components/src/components/image/image.ts
+++ b/packages/web-components/src/components/image/image.ts
@@ -7,40 +7,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement, state } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import on from '../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
 import '../expressive-modal/expressive-modal';
 import '../expressive-modal/expressive-modal-close-button';
 import '../lightbox-media-viewer/lightbox-image-viewer';
 import '../button/button';
-import ZoomIn20 from '../../internal/vendor/@carbon/web-components/icons/zoom--in/20.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LIGHTBOX_CONTRAST } from './defs';
+import Maximize20 from '../../internal/vendor/@carbon/web-components/icons/maximize/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './image.scss';
 import ModalRenderMixin from '../../globals/mixins/modal-render';
 import Handle from '../../globals/internal/handle';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
+
+export { LIGHTBOX_CONTRAST };
 
 /**
  * Image.
  *
- * @element dds-image
+ * @element c4d-image
  * @slot long-description - The long description content.
  * @slot icon - The icon content.
  */
-@customElement(`${ddsPrefix}-image`)
-class DDSImage extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-image`)
+class C4DImage extends StableSelectorMixin(
   ModalRenderMixin(FocusMixin(LitElement))
 ) {
   /**
-   * The image data, harvested from `<dds-image-item>`.
+   * The image data, harvested from `<c4d-image-item>`.
    */
   @state()
   private _images: HTMLElement[] = [];
@@ -49,10 +51,10 @@ class DDSImage extends StableSelectorMixin(
    * Handles `slotchange` event.
    */
   private _handleSlotChange({ target }: Event) {
-    const { selectorItem } = this.constructor as typeof DDSImage;
+    const { selectorItem } = this.constructor as typeof C4DImage;
     this._images = (target as HTMLSlotElement)
       .assignedNodes()
-      // Supports `<dds-image><slot></slot></dds-image>` rendered in shadow DOM
+      // Supports `<c4d-image><slot></slot></c4d-image>` rendered in shadow DOM
       .reduce((acc, node) => {
         if ((node as Element).tagName === 'SLOT') {
           acc.push(...(node as HTMLSlotElement).assignedNodes());
@@ -78,14 +80,14 @@ class DDSImage extends StableSelectorMixin(
   }
 
   /**
-   * The handler of `${ddsPrefix}-expressive-modal-closed` event from `<dds-expressive-modal>`.
+   * The handler of `${c4dPrefix}-expressive-modal-closed` event from `<c4d-expressive-modal>`.
    */
   private _handleCloseModal = () => {
     this.open = false;
   };
 
   /**
-   * The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.
+   * The handle for the listener of `${c4dPrefix}-expressive-modal-closed` event.
    */
   private _hCloseModal: Handle | null = null;
 
@@ -107,6 +109,18 @@ class DDSImage extends StableSelectorMixin(
   @property({ type: Boolean, reflect: true })
   border = false;
 
+  /**
+   * Whether or not it's a video thumbnail in a card group item.
+   */
+  @property({ type: Boolean, reflect: true, attribute: 'card-group-item' })
+  cardGroupItem = false;
+
+  /**
+   * The lightbox contrast option.
+   */
+  @property({ attribute: 'lightbox-contrast' })
+  lightboxContrast = LIGHTBOX_CONTRAST.LIGHT;
+
   /**
    * The lightbox.
    */
@@ -134,22 +148,13 @@ class DDSImage extends StableSelectorMixin(
   @property({ type: Boolean, reflect: true })
   open = false;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   connectedCallback() {
     super.connectedCallback();
     this.modalRenderRoot = this.createModalRenderRoot(); // Creates modal render root up-front to hook the event listener
     // Manually hooks the event listeners on the modal render root to make the event names configurable
     this._hCloseModal = on(
       this.modalRenderRoot,
-      (this.constructor as typeof DDSImage).eventCloseModal,
+      (this.constructor as typeof C4DImage).eventCloseModal,
       this._handleCloseModal as EventListener
     );
   }
@@ -166,12 +171,13 @@ class DDSImage extends StableSelectorMixin(
       alt,
       border,
       defaultSrc,
+      lightbox,
       _images: images,
       _handleSlotChange: handleSlotChange,
     } = this;
     const imgClasses = classMap({
-      [`${prefix}--image__img`]: true,
-      [`${prefix}--image__img--border`]: border,
+      [`${c4dPrefix}--image__img`]: true,
+      [`${c4dPrefix}--image__img--border`]: border && !lightbox,
     });
 
     return html`
@@ -191,7 +197,7 @@ class DDSImage extends StableSelectorMixin(
           part="image"
           loading="lazy" />
       </picture>
-      <div id="long-description" class="${prefix}--image__longdescription">
+      <div id="long-description" class="${c4dPrefix}--image__longdescription">
         <slot name="long-description"></slot>
       </div>
       <slot name="icon"></slot>
@@ -203,15 +209,15 @@ class DDSImage extends StableSelectorMixin(
     return !lightbox
       ? undefined
       : html`
-          <dds-expressive-modal ?open="${open}" expressive-size="full-width">
-            <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-            <dds-lightbox-image-viewer
-              alt="${ifNonNull(alt)}"
-              default-src="${ifNonNull(defaultSrc)}"
-              description="${ifNonNull(copy)}"
-              title="${ifNonNull(heading)}">
-            </dds-lightbox-image-viewer>
-          </dds-expressive-modal>
+          <c4d-expressive-modal ?open="${open}" expressive-size="full-width">
+            <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+            <c4d-lightbox-image-viewer
+              alt="${ifDefined(alt)}"
+              default-src="${ifDefined(defaultSrc)}"
+              description="${ifDefined(copy)}"
+              title="${ifDefined(heading)}">
+            </c4d-lightbox-image-viewer>
+          </c4d-expressive-modal>
         `;
   }
 
@@ -226,19 +232,19 @@ class DDSImage extends StableSelectorMixin(
       ${lightbox
         ? html`
             <button
-              class="${prefix}--image-with-caption__image"
-              aria-label="${ifNonNull(launchLightboxButtonAssistiveText)}"
+              class="${c4dPrefix}--image-with-caption__image"
+              aria-label="${ifDefined(launchLightboxButtonAssistiveText)}"
               @click="${handleClick}">
               ${this.renderImage()}
-              <div class="${prefix}--image-with-caption__zoom-button">
-                ${ZoomIn20()}
+              <div class="${c4dPrefix}--image-with-caption__zoom-button">
+                ${Maximize20()}
               </div>
             </button>
           `
         : html` ${this.renderImage()} `}
       ${heading
         ? html`
-            <p id="image-caption" class="${prefix}--image__caption">
+            <p id="image-caption" class="${c4dPrefix}--image__caption">
               ${heading}
             </p>
           `
@@ -250,22 +256,26 @@ class DDSImage extends StableSelectorMixin(
    * The name of the custom event fired after the modal is closed upon a user gesture.
    */
   static get eventCloseModal() {
-    return `${ddsPrefix}-expressive-modal-closed`;
+    return `${c4dPrefix}-expressive-modal-closed`;
   }
 
   /**
    * A selector that will return image items.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-image-item`;
+    return `${c4dPrefix}-image-item`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--image`;
+    return `${c4dPrefix}--image`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSImage;
+export default C4DImage;
diff --git a/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx
new file mode 100644
index 00000000000..aa9c4d9bbb8
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.mdx
@@ -0,0 +1,70 @@
+import { Props, Description } from '@storybook/addon-docs/blocks';
+import markdownContents from '../../../../docs/markdown-contents.md';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
+
+# `In page banner`
+
+> The In Page Banner is a variant of `<c4d-content-group>`, and includes a
+> heading and link list CTAs.
+>
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/in-page-banner)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/in-page-banner)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS (via import)
+
+```javascript
+import '@carbon/ibmdotcom-web-components/es/components/in-page-banner/index.js';
+```
+
+<Description markdown={`${cdnJs({ components: ['in-page-banner'] })}`} />
+
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<c4d-in-page-banner>
+  <c4d-content-group-heading
+    >Curabitur malesuada varius mi eu posuere</c4d-content-group-heading
+  >
+  <c4d-link-list type="vertical" slot="complementary">
+    <c4d-link-list-item
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Link text
+    </c4d-link-list-item>
+    <c4d-link-list-item
+      icon-placement="right"
+      href="https://www.ibm.com"
+      cta-type="local">
+      Link text
+    </c4d-link-list-item>
+  </c4d-link-list>
+</c4d-in-page-banner>
+```
+
+## Props
+
+<Props of="c4d-in-page-banner" />
+<Description markdown={markdownContents} />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector | Compatibility selector              | Description |
+| ----------------------- | ----------------------------------- | ----------- |
+| `<c4d-in-page-banner>`  | `data-autoid="c4d--in-page-banner"` | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx
new file mode 100644
index 00000000000..827818c024f
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/__stories__/README.stories.react.mdx
@@ -0,0 +1,69 @@
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
+import contributing from '../../../../../../docs/contributing-license.md';
+import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/in-page-banner/in-page-banner';
+
+# In Page Banner
+
+> 💡 Check our
+> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/in-page-banner)
+> example implementation.
+
+[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/in-page-banner)
+
+## Getting started
+
+Here's a quick example to get you started.
+
+### JS
+
+```javascript
+import C4DInPageBanner from '@carbon/ibmdotcom-web-components/es/components-react/in-page-banner/in-page-banner';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+
+function App() {
+  return (
+    <C4DInPageBanner>
+      <C4DContentGroupHeading>
+        Curabitur malesuada varius mi eu posuere
+      </C4DContentGroupHeading>
+      <C4DLinkList type="vertical" slot="complementary">
+        <C4DLinkListItem
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
+          Link text
+        </C4DLinkListItem>
+        <C4DLinkListItem
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
+          Link text
+        </C4DLinkListItem>
+      </C4DLinkList>
+    </C4DInPageBanner>
+  );
+}
+```
+
+## Props
+
+<Props of={PropTypesRef} />
+
+## Stable selectors
+
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector | Compatibility selector | Description |
+| ----------------------- | ---------------------- | ----------- |
+| `<cds-in-page-banner>`  | N/A                    | Component   |
+
+<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/in-page-banner/__stories__/in-page-banner.stories.react.tsx b/packages/web-components/src/components/in-page-banner/__stories__/in-page-banner.stories.react.tsx
new file mode 100644
index 00000000000..f3e7f83180b
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/__stories__/in-page-banner.stories.react.tsx
@@ -0,0 +1,141 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 { select } from '@storybook/addon-knobs';
+import React from 'react';
+// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
+// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
+// @ts-ignore
+/* eslint-disable max-len */
+import C4DInPageBanner from '@carbon/ibmdotcom-web-components/es/components-react/in-page-banner/in-page-banner';
+import C4DContentGroupHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-group/content-group-heading';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+
+import readme from './README.stories.react.mdx';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
+import { COLOR_SCHEME } from '../defs';
+
+const hrefsForType = {
+  [CTA_TYPE.LOCAL]: 'https://www.example.com',
+  [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
+  [CTA_TYPE.DOWNLOAD]:
+    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
+};
+
+const knobNamesForType = {
+  [CTA_TYPE.LOCAL]: 'Content link href (href)',
+  [CTA_TYPE.EXTERNAL]: 'Content link href (href)',
+  [CTA_TYPE.DOWNLOAD]: 'Download link href (href)',
+  [CTA_TYPE.VIDEO]: 'Video ID (href)',
+};
+
+const types = {
+  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
+  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
+  [`Download (${CTA_TYPE.DOWNLOAD})`]: CTA_TYPE.DOWNLOAD,
+  [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
+};
+
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
+export const Default = (args) => {
+  const { heading, iconPlacement, ctaType, colorScheme, href, download } =
+    args?.InPageBanner ?? {};
+  return (
+    <C4DInPageBanner color-scheme={colorScheme}>
+      <C4DContentGroupHeading>{heading}</C4DContentGroupHeading>
+      <C4DLinkList type="vertical" slot="complementary">
+        <C4DLinkListItem
+          icon-placement={iconPlacement}
+          href={href || undefined}
+          cta-type={ctaType || undefined}
+          download={download || undefined}>
+          Learn more about Kubernetes
+        </C4DLinkListItem>
+        <C4DLinkListItem
+          icon-placement={iconPlacement}
+          href={href || undefined}
+          cta-type={ctaType || undefined}
+          download={download || undefined}>
+          Containerization A Complete Guide
+        </C4DLinkListItem>
+      </C4DLinkList>
+    </C4DInPageBanner>
+  );
+};
+
+Default.story = {
+  parameters: {
+    knobs: {
+      InPageBanner: () => {
+        const heading = textNullable(
+          'Heading (heading)',
+          'Accelerate application development efforts with IBM Product Name'
+        );
+        const ctaType = select(
+          'CTA type (cta-type)',
+          types,
+          types['Local (local)']
+        );
+        const download =
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable(
+                'Download target (download)',
+                'IBM_Annual_Report_2019.pdf'
+              );
+        const colorScheme = select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        );
+        return {
+          heading,
+          colorScheme,
+          ctaType,
+          download,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.LOCAL],
+            hrefsForType[ctaType ?? CTA_TYPE.LOCAL]
+          ),
+        };
+      },
+    },
+  },
+};
+
+export default {
+  title: 'Components/In page banner',
+  decorators: [
+    (story) => {
+      return (
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-md-6 cds--col-lg-12 cds--no-gutter">
+              <C4DVideoCTAContainer>{story()}</C4DVideoCTAContainer>
+            </div>
+          </div>
+        </div>
+      );
+    },
+  ],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+  },
+};
diff --git a/packages/web-components/src/components/in-page-banner/__stories__/in-page-banner.stories.ts b/packages/web-components/src/components/in-page-banner/__stories__/in-page-banner.stories.ts
new file mode 100644
index 00000000000..deb9d77aca7
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/__stories__/in-page-banner.stories.ts
@@ -0,0 +1,146 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { select } from '@storybook/addon-knobs';
+import textNullable from '../../../../.storybook/knob-text-nullable';
+import '../index';
+// eslint-disable-next-line sort-imports
+import readme from './README.stories.mdx';
+import { CTA_TYPE } from '../../cta/defs';
+import { COLOR_SCHEME } from '../defs';
+import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
+
+const hrefsForType = {
+  [CTA_TYPE.LOCAL]: 'https://www.example.com',
+  [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
+  [CTA_TYPE.DOWNLOAD]:
+    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
+};
+
+const knobNamesForType = {
+  [CTA_TYPE.LOCAL]: 'Content link href (href)',
+  [CTA_TYPE.EXTERNAL]: 'Content link href (href)',
+  [CTA_TYPE.DOWNLOAD]: 'Download link href (href)',
+  [CTA_TYPE.VIDEO]: 'Video ID (href)',
+};
+
+const types = {
+  [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
+  [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
+  [`Download (${CTA_TYPE.DOWNLOAD})`]: CTA_TYPE.DOWNLOAD,
+  [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
+};
+
+const colorSchemeTypes = {
+  [`${COLOR_SCHEME.REGULAR}`]: COLOR_SCHEME.REGULAR,
+  [`${COLOR_SCHEME.LAYER}`]: COLOR_SCHEME.LAYER,
+  [`${COLOR_SCHEME.PURPLE}`]: COLOR_SCHEME.PURPLE,
+  [`${COLOR_SCHEME.CYAN}`]: COLOR_SCHEME.CYAN,
+};
+
+export const Default = (args) => {
+  const {
+    heading,
+    colorScheme,
+    ctaType,
+    download,
+    href,
+    iconPlacement = ICON_PLACEMENT.RIGHT,
+  } = args?.InPageBanner ?? {};
+  return html`
+    <c4d-in-page-banner color-scheme="${colorScheme}">
+      <c4d-content-group-heading>${heading}</c4d-content-group-heading>
+
+      <c4d-link-list type="vertical" slot="complementary">
+        <c4d-link-list-item
+          icon-placement="${iconPlacement}"
+          cta-type="${ifDefined(ctaType)}"
+          download="${ifDefined(download)}"
+          href="${ifDefined(href)}">
+          Learn more about Kubernetes
+        </c4d-link-list-item>
+        <c4d-link-list-item
+          cta-type="${ifDefined(ctaType)}"
+          icon-placement="${iconPlacement}"
+          download="${ifDefined(download)}"
+          href="${ifDefined(href)}">
+          Containerization A Complete Guide
+        </c4d-link-list-item>
+      </c4d-link-list>
+    </c4d-in-page-banner>
+  `;
+};
+
+export default {
+  title: 'Components/In page banner',
+  decorators: [
+    (story) => html`
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-md-6 cds--col-lg-12 cds--no-gutter">
+            <c4d-video-cta-container> ${story()} </c4d-video-cta-container>
+          </div>
+        </div>
+      </div>
+    `,
+  ],
+  parameters: {
+    ...readme.parameters,
+    hasStoryPadding: true,
+    knobs: {
+      InPageBanner: () => {
+        const heading = textNullable(
+          'Heading (heading)',
+          'Accelerate application development efforts with IBM Product Name'
+        );
+        const ctaType = select(
+          'CTA type (cta-type)',
+          types,
+          types['Local (local)']
+        );
+        const download =
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable(
+                'Download target (download)',
+                'IBM_Annual_Report_2019.pdf'
+              );
+        const colorScheme = select(
+          'Color scheme:',
+          colorSchemeTypes,
+          COLOR_SCHEME.REGULAR
+        );
+        return {
+          heading,
+          colorScheme,
+          ctaType,
+          download,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.LOCAL],
+            hrefsForType[ctaType ?? CTA_TYPE.LOCAL]
+          ),
+        };
+      },
+    },
+    propsSet: {
+      default: {
+        InPageBanner: {
+          heading:
+            'Accelerate application development efforts with IBM Product Name',
+          ctaType: null,
+          download: undefined,
+          href: 'https://www.example.com',
+        },
+      },
+    },
+  },
+};
diff --git a/packages/web-components/src/components/in-page-banner/__tests__/in-page-banner.test.ts b/packages/web-components/src/components/in-page-banner/__tests__/in-page-banner.test.ts
new file mode 100644
index 00000000000..117f968d4c7
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/__tests__/in-page-banner.test.ts
@@ -0,0 +1,65 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { html, render } from 'lit/html.js';
+import '../../content-group/content-group-heading';
+import '../../cta/link-list-item-cta';
+import '../../link-list/link-list';
+import '../in-page-banner';
+import { CTA_TYPE } from '../../cta/defs';
+
+const template = (props?) => {
+  const { children } = props ?? {};
+  return html` <c4d-in-page-banner> ${children} </c4d-in-page-banner> `;
+};
+
+describe('c4d-in-page-banner', function () {
+  describe('Misc attributes', function () {
+    it('should render with minimum attributes', async function () {
+      render(template(), document.body);
+      await Promise.resolve();
+      expect(document.body.querySelector('c4d-in-page-banner')).toMatchSnapshot(
+        { mode: 'shadow' }
+      );
+    });
+
+    it('should render with various attributes', async function () {
+      render(
+        template({
+          children: html`
+            <c4d-content-group-heading>heading-foo</c4d-content-group-heading>
+            <c4d-link-list slot="footer" type="vertical">
+              <c4d-link-list-item-cta
+                icon-placement="right"
+                href="https://www.ibm.com"
+                cta-type="${CTA_TYPE.LOCAL}">
+                cta-copy-foo
+              </c4d-link-list-item-cta>
+              <c4d-link-list-item-cta
+                icon-placement="right"
+                href="https://www.ibm.com"
+                cta-type="${CTA_TYPE.EXTERNAL}">
+                cta-copy-foo
+              </c4d-link-list-item-cta>
+            </c4d-link-list>
+          `,
+        }),
+        document.body
+      );
+      await Promise.resolve();
+      expect(document.body.querySelector('c4d-in-page-banner')).toMatchSnapshot(
+        { mode: 'shadow' }
+      );
+    });
+  });
+
+  afterEach(async function () {
+    await render(undefined!, document.body);
+  });
+});
diff --git a/packages/web-components/src/components/in-page-banner/defs.ts b/packages/web-components/src/components/in-page-banner/defs.ts
new file mode 100644
index 00000000000..89e09c00c65
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/defs.ts
@@ -0,0 +1,33 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 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.
+ */
+
+/**
+ * Type of color scheme
+ */
+export enum COLOR_SCHEME {
+  /**
+   * Regular color scheme
+   */
+  REGULAR = 'regular',
+
+  /**
+   * Layer color scheme
+   */
+  LAYER = 'layer',
+
+  /**
+   * Cyan color scheme
+   */
+  CYAN = 'cyan',
+
+  /**
+   * Purple color scheme
+   */
+  PURPLE = 'purple',
+}
diff --git a/packages/web-components/src/components/in-page-banner/in-page-banner.scss b/packages/web-components/src/components/in-page-banner/in-page-banner.scss
new file mode 100644
index 00000000000..c94f55a4883
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/in-page-banner.scss
@@ -0,0 +1,8 @@
+//
+// 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.
+//
+
+@use '@carbon/ibmdotcom-styles/scss/components/in-page-banner';
diff --git a/packages/web-components/src/components/in-page-banner/in-page-banner.ts b/packages/web-components/src/components/in-page-banner/in-page-banner.ts
new file mode 100644
index 00000000000..dd35755b029
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/in-page-banner.ts
@@ -0,0 +1,47 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import C4DContentGroup from '../content-group/content-group';
+import styles from './in-page-banner.scss';
+import { COLOR_SCHEME } from './defs';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * In Page Banner.
+ *
+ * @element c4d-in-page-banner
+ */
+@customElement(`${c4dPrefix}-in-page-banner`)
+class C4DInPageBanner extends StableSelectorMixin(C4DContentGroup) {
+  /**
+   * Color scheme type (regular (default) | layer | cyan | purple )
+   */
+  @property({ attribute: 'color-scheme', reflect: true })
+  colorScheme = COLOR_SCHEME.REGULAR;
+
+  static get stableSelector() {
+    return `${c4dPrefix}--in-page-banner`;
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get styles() {
+    return css`
+      ${super.styles}${styles}
+    `;
+  }
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DInPageBanner;
diff --git a/packages/web-components/src/components/in-page-banner/index.ts b/packages/web-components/src/components/in-page-banner/index.ts
new file mode 100644
index 00000000000..d3e53caa294
--- /dev/null
+++ b/packages/web-components/src/components/in-page-banner/index.ts
@@ -0,0 +1,13 @@
+/**
+ * @license
+ *
+ * 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 './in-page-banner';
+import '../content-group/content-group-heading';
+import '../cta/video-cta-container';
+import '../link-list/index';
diff --git a/packages/web-components/src/components/layout/__stories__/README.stories.mdx b/packages/web-components/src/components/layout/__stories__/README.stories.mdx
deleted file mode 100644
index 2387ab57150..00000000000
--- a/packages/web-components/src/components/layout/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-# Layout
-
-> The Layout style mixins and classes are to be utilized within IBM.com for
-> various abstract layout configurations.
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/react/examples/codesandbox/components/Layout)
-> example implementation.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/grid/scss/grid.scss';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-```
-
-##### HTML
-
-```html
-<div class="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-  <div class="bx--row">
-    <div class="bx--layout-1-3">
-      <div class="bx--layout--sticky" style="top:50px;">
-        <h3>Column 1 (layout 1-3)</h3>
-        <p style="padding-bottom:1rem;">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ac turpis egestas maecenas pharetra convallis posuere.
-        </p>
-      </div>
-    </div>
-    <div class="bx--layout-2-3">
-      <div>
-        <h3>Column 2</h3>
-        <p style="padding-bottom:1rem;">
-          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-          aliqua. Ac turpis egestas maecenas pharetra convallis posuere.
-        </p>
-      </div>
-    </div>
-  </div>
-</div>
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--layout` class.
-
-| Class                                                              | Description             |
-| ------------------------------------------------------------------ | ----------------------- |
-| `.bx--layout--top-layout-01` to `.bx--layout--top-layout-07`       | Top spacing modifier    |
-| `.bx--layout--bottom-layout-01` to `.bx--layout--bottom-layout-07` | Bottom spacing modifier |
-| `.bx--layout--border`                                              | Border modifier         |
-| `.bx--layout--sticky`                                              | Sticky column modifier  |
-| `.bx--layout-2-3`                                                  | 2-3 column modifier     |
-| `.bx--layout-1-3`                                                  | 1-3 column modifier     |
diff --git a/packages/web-components/src/components/layout/__stories__/README.stories.react.mdx b/packages/web-components/src/components/layout/__stories__/README.stories.react.mdx
deleted file mode 100644
index af71dc8f38a..00000000000
--- a/packages/web-components/src/components/layout/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,60 +0,0 @@
-# Layout
-
-> The Layout style mixins and classes are to be utilized within IBM.com for
-> various abstract layout configurations.
-
-## Getting started
-
-Here's a quick example to get you started.
-
-##### CSS
-
-```css
-// yourapplication.scss
-@import '@carbon/grid/scss/grid.scss';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-```
-
-##### JS
-
-```js
-function App() {
-  return (
-    <div className="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-      <div className="bx--row">
-        <div className="bx--layout-1-3">
-          <div className="bx--layout--sticky" style={{ top: '50px' }}>
-            <h3>Column 1 (layout 1-3)</h3>
-            <p style={{ 'padding-bottom': '1rem' }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-              aliqua. Ac turpis egestas maecenas pharetra convallis posuere.
-            </p>
-          </div>
-        </div>
-        <div className="bx--layout-2-3">
-          <div>
-            <h3>Column 2</h3>
-            <p style={{ 'padding-bottom': '1rem' }}>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
-              aliqua. Ac turpis egestas maecenas pharetra convallis posuere.
-            </p>
-          </div>
-        </div>
-      </div>
-    </div>
-  );
-}
-```
-
-#### Modifiers
-
-Use these modifiers with `.bx--layout` class.
-
-| Class                                                              | Description             |
-| ------------------------------------------------------------------ | ----------------------- |
-| `.bx--layout--top-layout-01` to `.bx--layout--top-layout-07`       | Top spacing modifier    |
-| `.bx--layout--bottom-layout-01` to `.bx--layout--bottom-layout-07` | Bottom spacing modifier |
-| `.bx--layout--border`                                              | Border modifier         |
-| `.bx--layout--sticky`                                              | Sticky column modifier  |
-| `.bx--layout-2-3`                                                  | 2-3 column modifier     |
-| `.bx--layout-1-3`                                                  | 1-3 column modifier     |
diff --git a/packages/web-components/src/components/layout/__stories__/layout.stories.react.tsx b/packages/web-components/src/components/layout/__stories__/layout.stories.react.tsx
deleted file mode 100644
index 8497241818c..00000000000
--- a/packages/web-components/src/components/layout/__stories__/layout.stories.react.tsx
+++ /dev/null
@@ -1,115 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 styles from '../../../../../styles/scss/components/layout/_layout.scss';
-import list from '../../../../../styles/scss/components/list/_list.scss';
-import readme from './README.stories.react.mdx';
-
-export const Default = () => (
-  <>
-    <style type="text/css">
-      {styles.cssText}
-      {list.cssText}
-    </style>
-    <div style={{ width: '100%' }} className="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-      <div className="bx--row bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-        <div className="bx--col-lg-12">
-          <div>
-            <div className="bx--row">
-              <div className="bx--layout-2-3">
-                <h3>Column 2-3</h3>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                  magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed
-                  libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies
-                  ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec
-                  ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                  magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed
-                  libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies
-                  ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec
-                  ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-                </p>
-              </div>
-              <div className="bx--layout-1-3">
-                <h3>layout 1-3</h3>
-                <ul className="bx--list--unordered">
-                  <li className="bx--list__item">item 1</li>
-                  <li className="bx--list__item">item 2</li>
-                  <li className="bx--list__item">item 3</li>
-                  <li className="bx--list__item">item 4</li>
-                  <li className="bx--list__item">item 5</li>
-                  <li className="bx--list__item">item 6</li>
-                  <li className="bx--list__item">item 7</li>
-                </ul>
-                <p>
-                  A pellentesque sit amet porttitor. Sed euismod nisi porta lorem. Pellentesque dignissim enim sit amet venenatis
-                  urna cursus eget nunc. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div className="bx--row">
-        <div className="bx--col-lg-12">
-          <div>
-            <div className="bx--row">
-              <div className="bx--layout-1-3">
-                <h3>layout 1-3</h3>
-                <ul className="bx--list--unordered">
-                  <li className="bx--list__item">item 1</li>
-                  <li className="bx--list__item">item 2</li>
-                  <li className="bx--list__item">item 3</li>
-                  <li className="bx--list__item">item 4</li>
-                  <li className="bx--list__item">item 5</li>
-                  <li className="bx--list__item">item 6</li>
-                  <li className="bx--list__item">item 7</li>
-                </ul>
-                <p>
-                  A pellentesque sit amet porttitor. Sed euismod nisi porta lorem. Pellentesque dignissim enim sit amet venenatis
-                  urna urna urna cursus eget nunc. Eu lobortis elementum nibh tellus molestie nunc non blandit massa.
-                </p>
-              </div>
-              <div className="bx--layout-2-3">
-                <h3>layout 2-3</h3>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                  magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed
-                  libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies
-                  ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec
-                  ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
-                  magna aliqua. Ac turpis egestas maecenas pharetra convallis posuere. Ultrices dui sapien eget mi proin sed
-                  libero enim. Elementum facilisis leo vel fringilla. Sed tempus urna et pharetra pharetra massa massa ultricies
-                  ridiculus mus mauris vitae ultricies leo integer. Eget mauris pharetra et ultrices. Urna neque viverra justo nec
-                  ultrices dui sapien. Augue eget arcu dictum varius duis. Eget mauris pharetra et ultrices neque ornare aenean.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </>
-);
-
-export default {
-  title: 'Components/Layout',
-  decorators: [story => story()],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/layout/__stories__/layout.stories.ts b/packages/web-components/src/components/layout/__stories__/layout.stories.ts
deleted file mode 100644
index 5d04b64941f..00000000000
--- a/packages/web-components/src/components/layout/__stories__/layout.stories.ts
+++ /dev/null
@@ -1,146 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { html } from 'lit-element';
-import styles from '../../../../../styles/scss/components/layout/_layout.scss';
-import list from '../../../../../styles/scss/components/list/_list.scss';
-import readme from './README.stories.mdx';
-
-export const Default = () => {
-  return html`
-    <div
-      style="width:100%"
-      class="bx--grid bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-      <div
-        class="bx--row bx--layout--top-layout-03 bx--layout--bottom-layout-06">
-        <div class="bx--col-lg-12">
-          <div>
-            <div class="bx--row">
-              <div class="bx--layout-2-3">
-                <h3>Column 2-3</h3>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ac turpis egestas maecenas pharetra convallis posuere.
-                  Ultrices dui sapien eget mi proin sed libero enim. Elementum
-                  facilisis leo vel fringilla. Sed tempus urna et pharetra
-                  pharetra massa massa ultricies ridiculus mus mauris vitae
-                  ultricies leo integer. Eget mauris pharetra et ultrices. Urna
-                  neque viverra justo nec ultrices dui sapien. Augue eget arcu
-                  dictum varius duis. Eget mauris pharetra et ultrices neque
-                  ornare aenean.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ac turpis egestas maecenas pharetra convallis posuere.
-                  Ultrices dui sapien eget mi proin sed libero enim. Elementum
-                  facilisis leo vel fringilla. Sed tempus urna et pharetra
-                  pharetra massa massa ultricies ridiculus mus mauris vitae
-                  ultricies leo integer. Eget mauris pharetra et ultrices. Urna
-                  neque viverra justo nec ultrices dui sapien. Augue eget arcu
-                  dictum varius duis. Eget mauris pharetra et ultrices neque
-                  ornare aenean.
-                </p>
-              </div>
-              <div class="bx--layout-1-3">
-                <h3>layout 1-3</h3>
-                <ul class="bx--list--unordered">
-                  <li class="bx--list__item">item 1</li>
-                  <li class="bx--list__item">item 2</li>
-                  <li class="bx--list__item">item 3</li>
-                  <li class="bx--list__item">item 4</li>
-                  <li class="bx--list__item">item 5</li>
-                  <li class="bx--list__item">item 6</li>
-                  <li class="bx--list__item">item 7</li>
-                </ul>
-                <p>
-                  A pellentesque sit amet porttitor. Sed euismod nisi porta
-                  lorem. Pellentesque dignissim enim sit amet venenatis urna
-                  cursus eget nunc. Eu lobortis elementum nibh tellus molestie
-                  nunc non blandit massa.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <div class="bx--row">
-        <div class="bx--col-lg-12">
-          <div>
-            <div class="bx--row">
-              <div class="bx--layout-1-3">
-                <h3>layout 1-3</h3>
-                <ul class="bx--list--unordered">
-                  <li class="bx--list__item">item 1</li>
-                  <li class="bx--list__item">item 2</li>
-                  <li class="bx--list__item">item 3</li>
-                  <li class="bx--list__item">item 4</li>
-                  <li class="bx--list__item">item 5</li>
-                  <li class="bx--list__item">item 6</li>
-                  <li class="bx--list__item">item 7</li>
-                </ul>
-                <p>
-                  A pellentesque sit amet porttitor. Sed euismod nisi porta
-                  lorem. Pellentesque dignissim enim sit amet venenatis urna
-                  urna urna cursus eget nunc. Eu lobortis elementum nibh tellus
-                  molestie nunc non blandit massa.
-                </p>
-              </div>
-              <div class="bx--layout-2-3">
-                <h3>layout 2-3</h3>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ac turpis egestas maecenas pharetra convallis posuere.
-                  Ultrices dui sapien eget mi proin sed libero enim. Elementum
-                  facilisis leo vel fringilla. Sed tempus urna et pharetra
-                  pharetra massa massa ultricies ridiculus mus mauris vitae
-                  ultricies leo integer. Eget mauris pharetra et ultrices. Urna
-                  neque viverra justo nec ultrices dui sapien. Augue eget arcu
-                  dictum varius duis. Eget mauris pharetra et ultrices neque
-                  ornare aenean.
-                </p>
-                <p>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed
-                  do eiusmod tempor incididunt ut labore et dolore magna aliqua.
-                  Ac turpis egestas maecenas pharetra convallis posuere.
-                  Ultrices dui sapien eget mi proin sed libero enim. Elementum
-                  facilisis leo vel fringilla. Sed tempus urna et pharetra
-                  pharetra massa massa ultricies ridiculus mus mauris vitae
-                  ultricies leo integer. Eget mauris pharetra et ultrices. Urna
-                  neque viverra justo nec ultrices dui sapien. Augue eget arcu
-                  dictum varius duis. Eget mauris pharetra et ultrices neque
-                  ornare aenean.
-                </p>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  `;
-};
-
-export default {
-  title: 'Components/Layout',
-  decorators: [
-    (story) => html`
-      ${story()}
-      <style>
-        ${styles}
-        ${list}
-      </style>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
index 5756a5eaf67..f08460e7ce5 100644
--- a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # LeadSpace Block
 
 > 💡 Check our
@@ -29,101 +31,112 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index';
 import '@carbon/ibmdotcom-web-components/es/components/video-player/video-player-container';
 ```
 
-<Description markdown={`${cdnJs({ components: ['leadspace-block','link-list','video-player-container'] })}`} />
+<Description
+  markdown={`${cdnJs({
+    components: ['leadspace-block', 'link-list', 'video-player-container'],
+  })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<dds-leadspace-block>
-  <dds-leadspace-block-heading>LeadSpace Block Title</dds-leadspace-block-heading>
-  <dds-leadspace-block-content>
-    <dds-content-block-heading>LeadSpace Block Heading</dds-content-block-heading>
-    <dds-content-block-copy>LeadSpace Block Copy</dds-content-block-copy>
-    <dds-leadspace-block-media slot="media">
-      <dds-image
+<c4d-leadspace-block border>
+  <c4d-leadspace-heading highlight="intelligent IT operations type-style="fluid-heading-05">Infuse your AIOps platform with intelligent IT operations</c4d-leadspace-heading>
+  <c4d-leadspace-block-content>
+    <c4d-content-block-copy>
+      Automate your software release process with continuous delivery (CD)—the most
+      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
+      ensuring software is always ready for deployment.
+    </c4d-content-block-copy>
+    <c4d-leadspace-block-media>
+      <c4d-image
         alt="Image alt text"
         default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       >
-        <dds-image-item
+        <c4d-image-item
           media="(min-width: 672px)"
           srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item
+        </c4d-image-item>
+        <c4d-image-item
           media="(min-width: 400px)"
           srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </dds-image-item>
-        <dds-image-item
+        </c4d-image-item>
+        <c4d-image-item
           media="(min-width: 320px)"
           srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
         >
-        </dds-image-item>
-      </dds-image>
-    </dds-leadspace-block-media>
-    <dds-link-list type="end">
-      <dds-link-list-heading>Featured products</dds-link-list-heading>
-      <dds-link-list-item href="https://example.com">
+        </c4d-image-item>
+      </c4d-image>
+    </c4d-leadspace-block-media>
+    <c4d-link-list type="end">
+      <c4d-link-list-heading>Featured products</c4d-link-list-heading>
+      <c4d-link-list-item href="https://example.com">
         Services ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-      <dds-link-list-item href="https://example.com">
+      </c4d-link-list-item>
+      <c4d-link-list-item href="https://example.com">
         Analytics ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-      <dds-link-list-item href="https://example.com">
+      </c4d-link-list-item>
+      <c4d-link-list-item href="https://example.com">
         View all products ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-list-item>
-    </dds-link-list>
-    <dds-leadspace-block-cta>
-      <dds-button-group-item href="www.ibm.com">Click here ${ArrowRight20({ slot: 'icon' })}</dds-button-group-item>
-    </dds-button-group>
-  </dds-leadspace-block-cta>
-</dds-leadspace-block>
+      </c4d-link-list-item>
+    </c4d-link-list>
+    <c4d-button cta-type="local" href="https://example.com">
+      Contact sales
+    </c4d-button>
+  </c4d-leadspace-block-content>
+</c4d-leadspace-block>
 ```
 
 ### HTML (with video)
 
 ```html
-<dds-leadspace-block>
-  <dds-leadspace-block-heading>${title}</dds-leadspace-block-heading>
-  <dds-leadspace-block-content>
-    <dds-content-block-heading>${heading}</dds-content-block-heading>
-    <dds-content-block-copy>${copy}</dds-content-block-copy>
-    <dds-leadspace-block-media slot="media">
-        <dds-video-player-container video-id="1_9h94wo6b"></dds-video-player-container>
-    </dds-leadspace-block-media>
-    <dds-link-list type="end">
-        <dds-link-list-heading>Featured products</dds-link-list-heading>
-        <dds-link-list-item href="https://example.com">
-            Services ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
-            Analytics ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
-            View all products ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-    </dds-link-list>
-    <dds-leadspace-block-cta>
-        <dds-button-group-item href="www.ibm.com">Contact sales ${ArrowRight20({ slot: 'icon' })}</dds-button-group-item>
-    </dds-leadspace-block-cta>
-  </dds-leadspace-block-content>
-</dds-leadspace-block>
+<c4d-leadspace-block border>
+  <c4d-leadspace-heading highlight="intelligent IT operations" type-style="fluid-heading-05">Infuse your AIOps platform with intelligent IT operations</c4d-leadspace-heading>
+  <c4d-leadspace-block-content>
+    <c4d-content-block-copy>
+      Automate your software release process with continuous delivery (CD)—the most
+      critical part of adopting DevOps. Build, test, and deploy code changes quickly,
+      ensuring software is always ready for deployment.
+    </c4d-content-block-copy>
+    <c4d-leadspace-block-media>
+      <c4d-video-player-container video-id="0_ibuqxqbe"></c4d-video-player-container>
+    </c4d-leadspace-block-media>
+    <c4d-link-list type="end">
+      <c4d-link-list-heading>Featured products</c4d-link-list-heading>
+      <c4d-link-list-item href="https://example.com">
+        Services ${ArrowRight20({ slot: 'icon' })}
+      </c4d-link-list-item>
+      <c4d-link-list-item href="https://example.com">
+        Analytics ${ArrowRight20({ slot: 'icon' })}
+      </c4d-link-list-item>
+      <c4d-link-list-item href="https://example.com">
+        View all products ${ArrowRight20({ slot: 'icon' })}
+      </c4d-link-list-item>
+    </c4d-link-list>
+    <c4d-button cta-type="local" href="https://example.com">
+      Contact sales
+    </c4d-button>
+  </c4d-leadspace-block>
 ```
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                     | Description |
 | ----------------------------- | ------------------------------------------ | ----------- |
-| `<dds-leadspace-block>`       | `data-autoid="dds--leadspace-block"`       | Component   |
-| `<dds-leadspace-block-media>` | `data-autoid="dds--leadspace-block-media"` | Interactive |
-| `<dds-leadspace-block-cta>`   | `data-autoid="dds--leadspace-block-cta"`   | Interactive |
+| `<c4d-leadspace-block>`       | `data-autoid="c4d--leadspace-block"`       | Component   |
+| `<c4d-leadspace-block-media>` | `data-autoid="c4d--leadspace-block-media"` | Interactive |
+| `<c4d-leadspace-block-cta>`   | `data-autoid="c4d--leadspace-block-cta"`   | Interactive |
 
 ## Props
 
-<Props of="dds-leadspace-block" />
+<Props of="c4d-leadspace-block" />
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx
index 71415adaf99..1c78499019f 100644
--- a/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leadspace-block/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block';
 
@@ -17,59 +22,66 @@ Here's a quick example to get you started.
 ### JS (with image)
 
 ```javascript
-import DDSLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js';
-import DDSLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading.js';
-import DDSLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js';
-import DDSLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta.js';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item.js';
+import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading.js';
+import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image.js';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item.js';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button.js';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import Download20 from '@carbon/icons-react/es/download/20.js';
 
 function App() {
   return (
-  <DDSLeadspaceBlock>
-    <DDSLeadspaceBlockHeading>Lead Space Block Title</DDSLeadspaceBlockHeading>
-    <DDSLeadspaceBlockContent>
-      <DDSContentBlockHeading>Content Block Heading</DDSContentBlockHeading>
-      <DDSContentBlockCopy>Content Block Copy</DDSContentBlockCopy>
-      <DDSLeadspaceBlockMedia slot="media">
-        <DDSImage
-          alt="Image alt text"
-          default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
-          heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
-        >
-          <DDSImageItem media="(min-width: 672px)" srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-          <DDSImageItem media="(min-width: 400px)" srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-          <DDSImageItem media="(min-width: 320px)" srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"/>
-        </DDSImage>
-      </DDSLeadspaceBlockMedia>
-      <DDSLinkList type="end">
-        <DDSLinkListHeading>Featured products</DDSLinkListHeading>
-        <DDSLinkListItem href="https://example.com">
-          IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
-          UrbanCode <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
-          View all products <Download20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-      <DDSLeadspaceBlockCTA>
-        <DDSButtonGroupItem href="www.ibm.com">
-          Contact sales <ArrowRight20 slot="icon" />
-        </DDSButtonGroupItem>
-      </DDSLeadspaceBlockCTA>
-    </DDSLeadspaceBlockContent>
-  </DDSLeadspaceBlock>
+    <C4DLeadspaceBlock border>
+      <C4DLeadspaceHeading highlight="intelligent IT operations" type-style="fluid-heading-05">Infuse your AIOps platform with intelligent IT operations</C4DLeadspaceHeading>
+      <C4DLeadspaceBlockContent>
+        <C4DContentBlockCopy>
+          Automate your software release process with continuous delivery (CD)—the most
+          critical part of adopting DevOps. Build, test, and deploy code changes quickly,
+          ensuring software is always ready for deployment.
+        </C4DContentBlockCopy>
+        <C4DLeadspaceBlockMedia>
+          <C4DImage
+            alt="Image alt text"
+            default-src="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+            heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+            <C4DImageItem
+              media="(min-width: 672px)"
+              srcset="https://fpoimg.com/672x378?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+            />
+            <C4DImageItem
+              media="(min-width: 400px)"
+              srcset="https://fpoimg.com/400x225?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+            />
+            <C4DImageItem
+              media="(min-width: 320px)"
+              srcset="https://fpoimg.com/320x180?text=16:9&amp;bg_color=ee5396&amp;text_color=161616"
+            />
+          </C4DImage>
+        </C4DLeadspaceBlockMedia>
+        <C4DLinkList type="end">
+          <C4DLinkListHeading>Featured products</C4DLinkListHeading>
+          <C4DLinkListItem href="https://example.com">
+            IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
+            UrbanCode <ArrowRight20 slot="icon" />
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
+            View all products <Download20 slot="icon" />
+          </C4DLinkListItem>
+        </C4DLinkList>
+        <C4DButton cta-type="local" href="https://example.com">
+          Contact sales
+        </C4DButton>
+      </C4DLeadspaceBlockContent>
+    </C4DLeadspaceBlock>
   );
 }
 ```
@@ -77,50 +89,49 @@ function App() {
 ### JS (with video)
 
 ```javascript
-import DDSLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js';
-import DDSLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading.js';
-import DDSLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading.js';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
-import DDSLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js';
-import DDSLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta.js';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item.js';
+import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block.js';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading.js';
+import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content.js';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy.js';
+import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media.js';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list.js';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading.js';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item.js';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button.js';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import Download20 from '@carbon/icons-react/es/download/20.js';
 
 function App() {
   return (
-  <DDSLeadspaceBlock>
-    <DDSLeadspaceBlockHeading>Lead Space Block Title</DDSLeadspaceBlockHeading>
-    <DDSLeadspaceBlockContent>
-      <DDSContentBlockHeading>Content Block Heading</DDSContentBlockHeading>
-      <DDSContentBlockCopy>Content Block Copy</DDSContentBlockCopy>
-      <DDSLeadspaceBlockMedia slot="media">
-        <DDSVideoPlayerContainer video-id="1_9h94wo6b"></DDSVideoPlayerContainer>
-      </DDSLeadspaceBlockMedia>
-      <DDSLinkList type="end">
-        <DDSLinkListHeading>Featured products</DDSLinkListHeading>
-        <DDSLinkListItem href="https://example.com">
-          IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
-          UrbanCode <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
-          View all products <Download20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-      <DDSLeadspaceBlockCTA>
-        <DDSButtonGroupItem href="www.ibm.com">
-          Contact sales <ArrowRight20 slot="icon" />
-        </DDSButtonGroupItem>
-      </DDSLeadspaceBlockCTA>
-    </DDSLeadspaceBlockContent>
-  </DDSLeadspaceBlock>
+    <C4DLeadspaceBlock border>
+      <C4DLeadspaceHeading highlight="intelligent IT operations" type-style="fluid-heading-05">Infuse your AIOps platform with intelligent IT operations</C4DLeadspaceHeading>
+      <C4DLeadspaceBlockContent>
+        <C4DContentBlockCopy>
+          Automate your software release process with continuous delivery (CD)—the most
+          critical part of adopting DevOps. Build, test, and deploy code changes quickly,
+          ensuring software is always ready for deployment.
+        </C4DContentBlockCopy>
+        <C4DLeadspaceBlockMedia>
+          <C4DVideoPlayerContainer video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
+        </C4DLeadspaceBlockMedia>
+        <C4DLinkList type="end">
+          <C4DLinkListHeading>Featured products</C4DLinkListHeading>
+          <C4DLinkListItem href="https://example.com">
+            IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
+            UrbanCode <ArrowRight20 slot="icon" />
+          </C4DLinkListItem>
+          <C4DLinkListItem href="https://example.com">
+            View all products <Download20 slot="icon" />
+          </C4DLinkListItem>
+        </C4DLinkList>
+        <C4DButton cta-type="local" href="https://example.com">
+          Contact sales
+        </C4DButton>
+      </C4DLeadspaceBlockContent>
+    </C4DLeadspaceBlock>
   );
 }
 ```
@@ -131,14 +142,16 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-leadspace-block>`        | N/A                    | Component   |
-| `<dds-leadspace-block-content>`        | N/A                    | Component   |
-| `<dds-leadspace-block-cta>`        | N/A                    | Component   |
-| `<dds-leadspace-block-heading>`        | N/A                    | Component   |
-| `<dds-leadspace-block-media>`        | N/A                    | Component   |
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector         | Compatibility selector | Description |
+| ------------------------------- | ---------------------- | ----------- |
+| `<c4d-leadspace-block>`         | N/A                    | Component   |
+| `<c4d-leadspace-block-content>` | N/A                    | Component   |
+| `<c4d-leadspace-heading>`       | N/A                    | Component   |
+| `<c4d-button>`                  | N/A                    | Component   |
+| `<c4d-leadspace-block-media>`   | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx
index 2b3718e590f..0facffb4f60 100644
--- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx
+++ b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.react.tsx
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { text } from '@storybook/addon-knobs';
+import { text, boolean, select } from '@storybook/addon-knobs';
 import React from 'react';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import Download20 from '@carbon/icons-react/es/download/20.js';
@@ -15,103 +15,90 @@ import Download20 from '@carbon/icons-react/es/download/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block';
+import C4DLeadspaceBlock from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block';
 // eslint-disable-next-line max-len
-import DDSLeadspaceBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-heading';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
 // eslint-disable-next-line max-len
-import DDSLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
-import DDSLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media';
-import DDSLeadspaceBlockCTA from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-cta';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DLeadspaceBlockContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-content';
+import C4DContentBlockCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-copy';
+import C4DLeadspaceBlockMedia from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-block/leadspace-block-media';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DButton from '@carbon/ibmdotcom-web-components/es/components-react/button/button';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
 
 import readme from './README.stories.react.mdx';
-import styles from './leadspace-block.stories.scss';
 
 const image = (
-  <DDSImage alt="Image alt text" default-src={imgLg16x9} heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-    <DDSImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
-    <DDSImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
-    <DDSImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
-  </DDSImage>
+  <C4DImage
+    alt="Image alt text"
+    default-src={imgLg16x9}
+    heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
+    <C4DImageItem media="(min-width: 672px)" srcset={imgLg16x9} />
+    <C4DImageItem media="(min-width: 400px)" srcset={imgMd16x9} />
+    <C4DImageItem media="(min-width: 320px)" srcset={imgSm16x9} />
+  </C4DImage>
+);
+
+const video = (
+  <C4DVideoPlayerContainer video-id="0_ibuqxqbe"></C4DVideoPlayerContainer>
 );
 
 const linkList = (
-  <DDSLinkList type="end">
-    <DDSLinkListHeading>Featured products</DDSLinkListHeading>
-    <DDSLinkListItem href="https://example.com">
+  <C4DLinkList type="end">
+    <C4DLinkListHeading>Featured products</C4DLinkListHeading>
+    <C4DLinkListItem href="https://example.com">
       IBM Cloud Continuous Delivery <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       UrbanCode <ArrowRight20 slot="icon" />
-    </DDSLinkListItem>
-    <DDSLinkListItem href="https://example.com">
+    </C4DLinkListItem>
+    <C4DLinkListItem href="https://example.com">
       View all products <Download20 slot="icon" />
-    </DDSLinkListItem>
-  </DDSLinkList>
+    </C4DLinkListItem>
+  </C4DLinkList>
 );
 
 const buttonCTA = (
-  <DDSLeadspaceBlockCTA>
-    <DDSButtonGroupItem href="www.ibm.com">
-      Contact sales <ArrowRight20 slot="icon" />
-    </DDSButtonGroupItem>
-  </DDSLeadspaceBlockCTA>
+  <C4DButton cta-type="local" href="https://example.com">
+    Contact sales
+  </C4DButton>
 );
 
-export const Default = args => {
-  const { title, heading, copy } = args?.LeadSpaceBlock ?? {};
-  return (
-    <DDSLeadspaceBlock>
-      <DDSLeadspaceBlockHeading>{title}</DDSLeadspaceBlockHeading>
-      <DDSLeadspaceBlockContent>
-        <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-        <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
-        <DDSLeadspaceBlockMedia slot="media">{image}</DDSLeadspaceBlockMedia>
-        {linkList} {buttonCTA}
-      </DDSLeadspaceBlockContent>
-    </DDSLeadspaceBlock>
-  );
-};
-
-export const withVideo = args => {
-  const { title, heading, copy } = args?.LeadSpaceBlock ?? {};
+export const Default = (args) => {
+  const { title, copy, media, border, highlight } = args?.LeadSpaceBlock ?? {};
   return (
-    <DDSLeadspaceBlock>
-      <DDSLeadspaceBlockHeading>{title}</DDSLeadspaceBlockHeading>
-      <DDSLeadspaceBlockContent>
-        <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-        <DDSContentBlockCopy>{copy}</DDSContentBlockCopy>
-        <DDSLeadspaceBlockMedia slot="media">
-          <DDSVideoPlayerContainer video-id="1_9h94wo6b"></DDSVideoPlayerContainer>
-        </DDSLeadspaceBlockMedia>
+    <C4DLeadspaceBlock border={border || undefined}>
+      <C4DLeadspaceHeading highlight={highlight} type-style="fluid-heading-05">{title}</C4DLeadspaceHeading>
+      <C4DLeadspaceBlockContent>
+        <C4DContentBlockCopy>{copy}</C4DContentBlockCopy>
+        {media !== 'none' ?
+        <C4DLeadspaceBlockMedia>
+          {media === 'image' ? image : media === 'video' ? video : ''}
+        </C4DLeadspaceBlockMedia>
+        : ``}
         {linkList} {buttonCTA}
-      </DDSLeadspaceBlockContent>
-    </DDSLeadspaceBlock>
+      </C4DLeadspaceBlockContent>
+    </C4DLeadspaceBlock>
   );
 };
 
 export default {
   title: 'Components/Lead space block',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
-          <style type="text/css">{styles.cssText}</style>
-          <div className="bx--grid">
-            <div className="bx--row">
-              <div className="bx--col-lg-9 bx--no-gutter">{story()}</div>
+          <div className="cds--grid">
+            <div className="cds--row">
+              <div className="cds--col-lg-8">{story()}</div>
             </div>
           </div>
         </>
@@ -123,11 +110,13 @@ export default {
     hasStoryPadding: true,
     knobs: {
       LeadSpaceBlock: () => ({
-        title: text('title (title)', 'Continuous delivery'),
-        heading: text('heading (required):', 'Innovate like a startup and scale for the enterprise '),
+        title: text('title (title)', 'Infuse your AIOps platform with intelligent IT operations'),
+        highlight: text('Highlight:', 'intelligent IT operations'),
         copy: `Automate your software release process with continuous delivery (CD)—the most
             critical part of adopting DevOps. Build, test, and deploy code changes quickly,
             ensuring software is always ready for deployment.`,
+        media: select('Media:', ['none', 'image', 'video'], 'image'),
+        border: boolean('Border:', true)
       }),
     },
   },
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.scss b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.scss
deleted file mode 100644
index ae9b87095dc..00000000000
--- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.scss
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * @license
- *
- * 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/imports';
-
-.bx--no-gutter {
-  @include carbon--breakpoint('md') {
-    padding: 0 1rem;
-  }
-}
diff --git a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts
index aac08420917..af8c05d4ba1 100644
--- a/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts
+++ b/packages/web-components/src/components/leadspace-block/__stories__/leadspace-block.stories.ts
@@ -7,107 +7,90 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { text } from '@storybook/addon-knobs';
+import { html } from 'lit';
+import { text, boolean, select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import Download20 from '../../../internal/vendor/@carbon/web-components/icons/download/20';
 
 import '../index';
 import '../../link-list/index';
 import '../../video-player/video-player-container';
+import '../../button/button';
 import imgSm16x9 from '../../../../../storybook-images/assets/320/fpo--16x9--320x180--004.jpg';
 import imgMd16x9 from '../../../../../storybook-images/assets/480/fpo--16x9--480x270--004.jpg';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--004.jpg';
 
 import readme from './README.stories.mdx';
-import styles from './leadspace-block.stories.scss';
 
 const image = html`
-  <dds-image
+  <c4d-image
     alt="Image alt text"
     default-src="${imgLg16x9}"
     heading="Lorem ipsum dolor sit amet, consectetur adipiscing elit.">
-    <dds-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
-    </dds-image-item>
-    <dds-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
-    </dds-image-item>
-  </dds-image>
+    <c4d-image-item media="(min-width: 672px)" srcset="${imgLg16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 400px)" srcset="${imgMd16x9}">
+    </c4d-image-item>
+    <c4d-image-item media="(min-width: 320px)" srcset="${imgSm16x9}">
+    </c4d-image-item>
+  </c4d-image>
+`;
+
+const video = html`
+  <c4d-video-player-container
+    video-id="0_ibuqxqbe"></c4d-video-player-container>
 `;
 
 const linkList = html`
-  <dds-link-list type="end">
-    <dds-link-list-heading>Featured products</dds-link-list-heading>
-    <dds-link-list-item href="https://example.com">
+  <c4d-link-list>
+    <c4d-link-list-heading>Featured products</c4d-link-list-heading>
+    <c4d-link-list-item href="https://example.com">
       IBM Cloud Continuous Delivery ${ArrowRight20({ slot: 'icon' })}
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       UrbanCode ${ArrowRight20({ slot: 'icon' })}
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </c4d-link-list-item>
+    <c4d-link-list-item href="https://example.com">
       View all products ${Download20({ slot: 'icon' })}
-    </dds-link-list-item>
-  </dds-link-list>
+    </c4d-link-list-item>
+  </c4d-link-list>
 `;
 
 const buttonCTA = html`
-  <dds-leadspace-block-cta>
-    <dds-button-group-item href="www.ibm.com"
-      >Contact sales ${ArrowRight20({ slot: 'icon' })}</dds-button-group-item
-    >
-  </dds-leadspace-block-cta>
+  <c4d-button cta-type="local" href="https://example.com">
+    Contact sales
+  </c4d-button>
 `;
 
 export const Default = (args) => {
-  const { title, heading, copy } = args?.LeadSpaceBlock ?? {};
+  const { title, copy, media, border, highlight } = args?.LeadSpaceBlock ?? {};
   return html`
-    <dds-leadspace-block>
-      <dds-leadspace-block-heading>${title}</dds-leadspace-block-heading>
-      <dds-leadspace-block-content>
-        <dds-content-block-heading>${heading}</dds-content-block-heading>
-        <dds-content-block-copy>${copy}</dds-content-block-copy>
-        <dds-leadspace-block-media slot="media"
-          >${image}</dds-leadspace-block-media
-        >
+    <c4d-leadspace-block ?border=${border}>
+      <c4d-leadspace-heading
+        highlight="${highlight}"
+        type-style="fluid-heading-05"
+        >${title}</c4d-leadspace-heading
+      >
+      <c4d-leadspace-block-content>
+        <c4d-content-block-copy>${copy}</c4d-content-block-copy>
+        ${media !== 'none'
+          ? html` <c4d-leadspace-block-media>
+              ${media === 'image' ? image : media === 'video' ? video : ''}
+            </c4d-leadspace-block-media>`
+          : ``}
         ${linkList} ${buttonCTA}
-      </dds-leadspace-block-content>
-    </dds-leadspace-block>
+      </c4d-leadspace-block-content>
+    </c4d-leadspace-block>
   `;
 };
 
-export const WithVideo = (args) => {
-  const { title, heading, copy } = args?.LeadSpaceBlock ?? {};
-  return html`
-    <dds-leadspace-block>
-      <dds-leadspace-block-heading>${title}</dds-leadspace-block-heading>
-      <dds-leadspace-block-content>
-        <dds-content-block-heading>${heading}</dds-content-block-heading>
-        <dds-content-block-copy>${copy}</dds-content-block-copy>
-        <dds-leadspace-block-media slot="media"
-          ><dds-video-player-container
-            video-id="1_9h94wo6b"></dds-video-player-container
-        ></dds-leadspace-block-media>
-        ${linkList} ${buttonCTA}
-      </dds-leadspace-block-content>
-    </dds-leadspace-block>
-  `;
-};
-
-WithVideo.story = {
-  name: 'With video',
-};
-
 export default {
   title: 'Components/Lead space block',
   decorators: [
     (story) => html`
-      <style>
-        ${styles}
-      </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-9 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-8">${story()}</div>
         </div>
       </div>
     `,
@@ -117,14 +100,16 @@ export default {
     hasStoryPadding: true,
     knobs: {
       LeadSpaceBlock: () => ({
-        title: text('title (title)', 'Continuous delivery'),
-        heading: text(
-          'heading (required):',
-          'Innovate like a startup and scale for the enterprise '
+        title: text(
+          'title (title)',
+          'Infuse your AIOps platform with intelligent IT operations'
         ),
+        highlight: text('Highlight:', 'intelligent IT operations'),
         copy: `Automate your software release process with continuous delivery (CD)—the most
             critical part of adopting DevOps. Build, test, and deploy code changes quickly,
             ensuring software is always ready for deployment.`,
+        media: select('Media:', ['none', 'image', 'video'], 'image'),
+        border: boolean('Border:', true),
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/leadspace-block/__tests__/leadspace-block.test.ts b/packages/web-components/src/components/leadspace-block/__tests__/leadspace-block.test.ts
index 0ae9553ec14..11982437aa8 100644
--- a/packages/web-components/src/components/leadspace-block/__tests__/leadspace-block.test.ts
+++ b/packages/web-components/src/components/leadspace-block/__tests__/leadspace-block.test.ts
@@ -1,33 +1,28 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../leadspace-block';
-import { Default, WithVideo } from '../__stories__/leadspace-block.stories';
+import { Default } from '../__stories__/leadspace-block.stories';
 
 const DefaultTemplate = (props?) =>
   Default({
     LeadSpaceBlock: props,
   });
 
-const WithVideoTemplate = (props?) =>
-  WithVideo({
-    LeadSpaceBlock: props,
-  });
-
-describe('dds-leadspace-block', function () {
+describe('c4d-leadspace-block', function () {
   describe('Misc attributes - Default', function () {
     it('should render with minimum attributes', async function () {
       render(DefaultTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace-block>`
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace-block>`
       expect(
-        document.body.querySelector('dds-leadspace-block')
+        document.body.querySelector('c4d-leadspace-block')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -40,34 +35,9 @@ describe('dds-leadspace-block', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace-block>`
-      expect(
-        document.body.querySelector('dds-leadspace-block')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-  });
-
-  describe('Misc attributes - WithVideo', function () {
-    it('should render with minimum attributes', async function () {
-      render(WithVideoTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace-block>`
-      expect(
-        document.body.querySelector('dds-leadspace-block')
-      ).toMatchSnapshot({ mode: 'shadow' });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        WithVideoTemplate({
-          title: 'leadspace-block title',
-          heading: 'leadspace-block heading',
-          copy: 'leadspace-block copy',
-        }),
-        document.body
-      );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace-block>`
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace-block>`
       expect(
-        document.body.querySelector('dds-leadspace-block')
+        document.body.querySelector('c4d-leadspace-block')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/leadspace-block/index.ts b/packages/web-components/src/components/leadspace-block/index.ts
index 01a3ae1ad00..30a7f7d1b76 100644
--- a/packages/web-components/src/components/leadspace-block/index.ts
+++ b/packages/web-components/src/components/leadspace-block/index.ts
@@ -8,10 +8,9 @@
  */
 
 import './leadspace-block';
-import './leadspace-block-heading';
+import '../leadspace/leadspace-heading';
 import './leadspace-block-media';
 import './leadspace-block-content';
-import './leadspace-block-cta';
 import '../button-group/index';
 import '../content-block/content-block-heading';
 import '../content-block/content-block-copy';
diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts
index 7b5fe37a8c6..bdceeb314a9 100644
--- a/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts
+++ b/packages/web-components/src/components/leadspace-block/leadspace-block-content.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, html, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSContentBlock from '../content-block/content-block';
+import { css, html, TemplateResult } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DContentBlock from '../content-block/content-block';
 import styles from './leadspace-block.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * LeadSpace Block content Component.
  *
- * @element dds-leadspace-block-content
+ * @element c4d-leadspace-block-content
  */
-@customElement(`${ddsPrefix}-leadspace-block-content`)
-class DDSLeadSpaceBlockContent extends DDSContentBlock {
+@customElement(`${c4dPrefix}-leadspace-block-content`)
+class C4DLeadSpaceBlockContent extends C4DContentBlock {
   protected _renderInnerBody(): TemplateResult | string | void {
     const { _hasContent: hasContent, _hasMedia: hasMedia } = this;
     return html`
@@ -40,7 +38,7 @@ class DDSLeadSpaceBlockContent extends DDSContentBlock {
      * ensure link list heading is aria level 3 so that the headings in
      * leadspace block are hierarchical for accessibility purposes
      */
-    const linkListHeading = this.querySelector('dds-link-list-heading');
+    const linkListHeading = this.querySelector('c4d-link-list-heading');
     if (linkListHeading) {
       linkListHeading.setAttribute('aria-level', '3');
     }
@@ -55,7 +53,7 @@ class DDSLeadSpaceBlockContent extends DDSContentBlock {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace-block-content`;
+    return `${c4dPrefix}--leadspace-block-content`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -67,4 +65,4 @@ class DDSLeadSpaceBlockContent extends DDSContentBlock {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadSpaceBlockContent;
+export default C4DLeadSpaceBlockContent;
diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-cta.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-cta.ts
deleted file mode 100644
index 50042a36469..00000000000
--- a/packages/web-components/src/components/leadspace-block/leadspace-block-cta.ts
+++ /dev/null
@@ -1,33 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSButtonGroup from '../button-group/button-group';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './leadspace-block.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * LeadSpace Block cta.
- *
- * @element dds-leadspace-block-cta
- */
-@customElement(`${ddsPrefix}-leadspace-block-cta`)
-class DDSLeadSpaceBlockCTA extends StableSelectorMixin(DDSButtonGroup) {
-  static get stableSelector() {
-    return `${ddsPrefix}--leadspace-block__cta`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadSpaceBlockCTA;
diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts
index 1c7c51c8385..bc818877a41 100644
--- a/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts
+++ b/packages/web-components/src/components/leadspace-block/leadspace-block-heading.ts
@@ -7,29 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSLeadspaceHeading from '../leadspace/leadspace-heading';
+import C4DLeadspaceHeading from '../leadspace/leadspace-heading';
 import styles from './leadspace-block.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Heading content in leadspace block.
  *
- * @element dds-leadspace-block-heading
+ * @element c4d-leadspace-block-heading
  */
-@customElement(`${ddsPrefix}-leadspace-block-heading`)
-class DDSLeadspaceBlockHeading extends StableSelectorMixin(
-  DDSLeadspaceHeading
+@customElement(`${c4dPrefix}-leadspace-block-heading`)
+class C4DLeadspaceBlockHeading extends StableSelectorMixin(
+  C4DLeadspaceHeading
 ) {
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace-block__heading`;
+    return `${c4dPrefix}--leadspace-block__heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  'The leadspace-block-heading component has been deprecated in favor of leadspace-heading. ' +
+    'See leadspace-block documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceBlockHeading;
+export default C4DLeadspaceBlockHeading;
diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts b/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts
index 191fa6a4c91..00e48befb90 100644
--- a/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts
+++ b/packages/web-components/src/components/leadspace-block/leadspace-block-media.ts
@@ -7,31 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace-block.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * LeadSpace Block Media Component.
  *
- * @element dds-leadspace-block-media
+ * @element c4d-leadspace-block-media
  */
-@customElement(`${ddsPrefix}-leadspace-block-media`)
-class DDSLeadSpaceBlockMedia extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-leadspace-block-media`)
+class C4DLeadSpaceBlockMedia extends StableSelectorMixin(LitElement) {
+  /**
+   * The shadow slot the media should be in.
+   */
+  @property({ reflect: true })
+  slot = 'media';
+
   render() {
     return html` <slot></slot> `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace-block__media`;
+    return `${c4dPrefix}--leadspace-block__media`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadSpaceBlockMedia;
+export default C4DLeadSpaceBlockMedia;
diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block.scss b/packages/web-components/src/components/leadspace-block/leadspace-block.scss
index 25930672047..a7dc8470bc8 100644
--- a/packages/web-components/src/components/leadspace-block/leadspace-block.scss
+++ b/packages/web-components/src/components/leadspace-block/leadspace-block.scss
@@ -5,32 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-// `<dds-leadspace-block-cta>` inherits `<dds-button-group>`
-@import '@carbon/ibmdotcom-styles/scss/components/buttongroup/buttongroup';
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace-block/leadspace-block';
-
-:host(#{$dds-prefix}-leadspace-with-search-heading),
-:host(#{$dds-prefix}-leadspace-block-heading) {
-  display: block;
-}
-
-:host(#{$dds-prefix}-leadspace-with-search-content),
-:host(#{$dds-prefix}-leadspace-block-content) {
-  ::slotted(*) {
-    margin-left: $carbon--spacing-05;
-    margin-right: $carbon--spacing-05;
-    @include carbon--breakpoint('md') {
-      margin-left: 0;
-      margin-right: 0;
-    }
-  }
-}
-
-.#{$prefix}--content-layout {
-  @include carbon--breakpoint('md') {
-    ::slotted([slot]) {
-      margin-left: 0;
-    }
-  }
-}
+@use '../../../../styles/scss/components/leadspace-block';
diff --git a/packages/web-components/src/components/leadspace-block/leadspace-block.ts b/packages/web-components/src/components/leadspace-block/leadspace-block.ts
index bcadf4eb744..fdda700159b 100644
--- a/packages/web-components/src/components/leadspace-block/leadspace-block.ts
+++ b/packages/web-components/src/components/leadspace-block/leadspace-block.ts
@@ -7,16 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { state, html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import '../horizontal-rule/horizontal-rule';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace-block.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The table mapping slot name with the private property name that indicates the existence of the slot content.
@@ -28,16 +27,22 @@ const slotExistencePropertyNames = {
 /**
  * LeadSpace Block Component.
  *
- * @element dds-leadspace-block
+ * @element c4d-leadspace-block
  */
-@customElement(`${ddsPrefix}-leadspace-block`)
-class DDSLeadSpaceBlock extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-leadspace-block`)
+class C4DLeadSpaceBlock extends StableSelectorMixin(LitElement) {
   /**
    * `true` if there is a title.
    */
   @state()
   protected _hasTitle = false;
 
+  /**
+   * `true` if there is a border.
+   */
+  @property({ type: Boolean })
+  border = false;
+
   /**
    * Handles `slotchange` event.
    *
@@ -72,18 +77,18 @@ class DDSLeadSpaceBlock extends StableSelectorMixin(LitElement) {
         ${this._renderHeading()}
         <div class="${prefix}--content-layout__body">
           <slot></slot>
-          <dds-hr></dds-hr>
+          ${this.border ? html`<c4d-hr></c4d-hr>` : ``}
         </div>
       </div>
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace-block`;
+    return `${c4dPrefix}--leadspace-block`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadSpaceBlock;
+export default C4DLeadSpaceBlock;
diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx
index 7a69424e1c4..243594a370c 100644
--- a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.mdx
@@ -32,60 +32,52 @@ import '@carbon/ibmdotcom-web-components/es/components/leadspace-with-search/ind
 ### HTML
 
 ```html
-<dds-leadspace-with-search>
-  <dds-leadspace-with-search-heading>Find a product</dds-leadspace-with-search-heading>
-  <dds-leadspace-with-search-content>
-    <dds-leadspace-with-search-content-heading>Innovate like a startup, scale for the enterprise</dds-leadspace-with-search-content-heading>
-    <dds-leadspace-with-search-content-copy
+<cds-leadspace-with-search>
+  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
+    <cds-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </dds-leadspace-with-search-content-copy>
-  </dds-leadspace-with-search-content>
-  <dds-search-with-typeahead slot='search' leadspace-search><dds-search-with-typeahead/>
-  <dds-hr slot='hr'></dds-hr>
-</dds-leadspace-with-search>
+    </cds-leadspace-with-search-copy>
+  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
+  <cds-hr slot='hr'></cds-hr>
+</cds-leadspace-with-search>
 ```
 
 ### HTML - With Image
 
 ```html
-<dds-leadspace-with-search>
-  <dds-background-media
-    gradient-direction="left-to-right"
-    default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616"
-    slot='image'
-  >
-  </dds-background-media>
-  <dds-leadspace-with-search-heading>Find a product</dds-leadspace-with-search-heading>
-  <dds-leadspace-with-search-content>
-    <dds-leadspace-with-search-content-heading>Innovate like a startup, scale for the enterprise</dds-leadspace-with-search-content-heading>
-    <dds-leadspace-with-search-content-copy
+<cds-leadspace-with-search>
+  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
+    <cds-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </dds-leadspace-with-search-content-copy>
-  </dds-leadspace-with-search-content>
-  <dds-search-with-typeahead slot='search' leadspace-search><dds-search-with-typeahead/>
-  <dds-hr slot='hr'></dds-hr>
-</dds-leadspace-with-search>
+    </cds-leadspace-with-search-copy>
+  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
+  <cds-hr slot='hr'></cds-hr>
+</cds-leadspace-with-search>
 ```
 
 ## Adjacent Themes
 
-This component has four adjacent theme combinations which can be used to display
-different theming between the two parts of the component, the "top" and the
-"bottom" of the component. In other words, this component can be "divided" into
-two halves, the "top" contains the heading, subheading, and paragraph elements
-to display information, whereas the "bottom" part contains the Search With
-Typeahead component.
+This component offers two options of adjacent themes, it can either be:
 
-By applying these different themes, you may have the "top" part have the default
-"White" theme, while the bottom has the "Gray 10" theme, for example. Feel free
-to play around with the knobs to choose which option would work best for your
-page.
+* Monotheme
+* Dual theme
+
+The "dual-theme" attribute can be used to display different theming between the two
+parts of the component, the "top" and the "bottom" of the component.
+
+In other words, this component can be "divided" into two halves, the "top" contains
+the heading and paragraph elements to display information, whereas the "bottom" part
+contains the Search With Typeahead component.
+
+The coloring would change depending on the current set theme of either the page or the inline 
+theme of the container. The top half would be the current theme, while the bottom half would
+be other theme of the current contrast. 
 
 There are four adjacent theme combinations that are available in this component
 are the following:
@@ -98,26 +90,17 @@ are the following:
 ### HTML Example
 
 ```html
-<dds-leadspace-with-search adjacent-theme='white-and-g10'>
-  <dds-background-media
-    gradient-direction="left-to-right"
-    default-src="https://fpoimg.com/1584x560?&bg_color=ee5396&text_color=161616"
-    slot='image'
-  >
-  </dds-background-media>
-  <dds-leadspace-with-search-heading>Find a product</dds-leadspace-with-search-heading>
-  <dds-leadspace-with-search-content>
-    <dds-leadspace-with-search-content-heading>Innovate like a startup, scale for the enterprise</dds-leadspace-with-search-content-heading>
-    <dds-leadspace-with-search-content-copy
+<cds-leadspace-with-search adjacent-theme='dual-theme'>
+  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
+    <cds-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </dds-leadspace-with-search-content-copy>
-  </dds-leadspace-with-search-content>
-  <dds-search-with-typeahead slot='search' leadspace-search><dds-search-with-typeahead/>
-  <dds-hr slot='hr'></dds-hr>
-</dds-leadspace-with-search>
+    </cds-leadspace-with-search-copy>
+  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
+  <cds-hr slot='hr'></cds-hr>
+</cds-leadspace-with-search>
 ```
 
 ## Horizontal rule use
@@ -130,8 +113,8 @@ In other words, the horizontal rule should only be included as a slotted element
 if, for example, the page content has the `g100` theme _and_ the
 `Leadspace with search` **also** uses `g100`.
 
-When using adjacent themes, the theme applied **must** be `g90-and-g100`, as the
-latter theme must match the page content theme.
+When using adjacent themes, the theme applied **must** be `g90`, as the
+bottom theme must match the page content theme.
 
 Using the horizontal rule for other cases in which the themes are not matching
 is not advisable.
@@ -142,27 +125,24 @@ When including the `Leadspace with search` component within the `Dotcom Shell`
 component, an optional scroll behavior option is available. If enabled, the
 search container will remain fixed on top of the page as the user scrolls.
 
-To enable, add the `scroll-behavior` attribute to `Leadspace with search`
+To enable, add the `scroll-behavior` and `sticky-search` attributes to `Leadspace with search`
 
 ### HTML Example
 
 ```html
-<dds-dotcom-shell-container>
-<dds-leadspace-with-search adjacent-theme='white-and-g10' scroll-behavior>
-  <dds-leadspace-with-search-heading>Find a product</dds-leadspace-with-search-heading>
-  <dds-leadspace-with-search-content>
-    <dds-leadspace-with-search-content-heading>Innovate like a startup, scale for the enterprise</dds-leadspace-with-search-content-heading>
-    <dds-leadspace-with-search-content-copy
+<cds-dotcom-shell-container>
+<cds-leadspace-with-search adjacent-theme='dual-theme' sticky-search scroll-behavior>
+  <cds-leadspace-heading>Find a product</cds-leadspace-heading>
+    <cds-leadspace-with-search-copy
       >Automate your software release process with continuous
       delivery (CD)—the most critical part of adopting DevOps.
       Build, test, and deploy code changes quickly, ensuring
       software is always ready for deployment.
-    </dds-leadspace-with-search-content-copy>
-  </dds-leadspace-with-search-content>
-  <dds-search-with-typeahead slot='search' leadspace-search><dds-search-with-typeahead/>
-  <dds-hr slot='hr'></dds-hr>
-</dds-leadspace-with-search>
-</dds-dotcom-shell-container>
+    </cds-leadspace-with-search-copy>
+  <cds-search-with-typeahead slot='search' leadspace-search><cds-search-with-typeahead/>
+  <cds-hr slot='hr'></cds-hr>
+</cds-leadspace-with-search>
+</cds-dotcom-shell-container>
 ```
 
 ## Stable selectors
@@ -173,13 +153,13 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                       | Compatibility selector                                     | Description |
 | --------------------------------------------- | ---------------------------------------------------------- | ----------- |
-| `<dds-leadspace-with-search>`                 | `data-autoid="dds--leadspace-with-search"`                 | Component   |
-| `<dds-leadspace-with-search-content>`         | `data-autoid="dds--leadspace-with-search__content"`        | Component   |
-| `<dds-leadspace-with-search-heading>`         | `data-autoid="dds--leadspace-with-search__heading"`        | Component   |
-| `<dds-leadspace-with-search-content-copy>`    | `data-autoid="dds--leadspace-with-search-content-copy"`    | Component   |
-| `<dds-leadspace-with-search-content-heading>` | `data-autoid="dds--leadspace-with-search-content-heading"` | Component   |
+| `<cds-leadspace-with-search>`                 | `data-autoid="cds--leadspace-with-search"`                 | Component   |
+| `<cds-leadspace-with-search-content>`         | `data-autoid="cds--leadspace-with-search__content"`        | Component   |
+| `<cds-leadspace-with-search-heading>`         | `data-autoid="cds--leadspace-with-search__heading"`        | Component   |
+| `<cds-leadspace-with-search-content-copy>`    | `data-autoid="cds--leadspace-with-search-content-copy"`    | Component   |
+| `<cds-leadspace-with-search-content-heading>` | `data-autoid="cds--leadspace-with-search-content-heading"` | Component   |
 
 ## Props
 
-<Props of="dds-leadspace-with-search" />
+<Props of="cds-leadspace-with-search" />
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx
index 95ca7bc1c1c..6f9ebb27c34 100644
--- a/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leadspace-with-search/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
 
@@ -17,28 +22,30 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search.js';
-import DDSLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading';
-import DDSLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content';
-import DDSLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading';
-import DDSLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy';
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
+import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search.js';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DLeadspaceWithSearchCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-copy';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
 
 function App() {
   return (
-    <DDSLeadspaceWithSearch>
-      <DDSLeadspaceWithSearchHeading>Find a product</DDSLeadspaceWithSearchHeading>
-            <DDSLeadspaceWithSearchContent>
-              <DDSLeadspaceWithSearchContentHeading>Innovate like a startup, scale for the enterprise</DDSLeadspaceWithSearchContentHeading>
-              <DDSLeadspaceWithSearchContentCopy>
-                Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build,
-                test, and deploy code changes quickly, ensuring software is always ready for deployment.
-              </DDSLeadspaceWithSearchContentCopy>
-            </DDSLeadspaceWithSearchContent>
-      <DDSSearchWithTypeahead slot='search' leadspace-search></DDSSearchWithTypeahead>
-      <DDSHorizontalRule slot='hr'></DDSHorizontalRule>
-    </DDSLeadspaceWithSearch>
+    <C4DLeadspaceWithSearch>
+      <C4DLeadspaceHeading>
+        Find a product
+      </C4DLeadspaceHeading>
+        <C4DLeadspaceWithSearchCopy>
+          Automate your software release process with continuous delivery
+          (CD)—the most critical part of adopting DevOps. Build, test, and
+          deploy code changes quickly, ensuring software is always ready for
+          deployment.
+        </C4DLeadspaceWithSearchCopy>
+      </C4DLeadspaceWithSearchContent>
+      <C4DSearchWithTypeahead
+        slot="search"
+        leadspace-search></C4DSearchWithTypeahead>
+      <C4DHorizontalRule slot="hr"></C4DHorizontalRule>
+    </C4DLeadspaceWithSearch>
   );
 }
 ```
@@ -49,14 +56,16 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                       | Compatibility selector                                     | Description |
 | --------------------------------------------- | ---------------------------------------------------------- | ----------- |
-| `<dds-leadspace-with-search>`                 | `data-autoid="dds--leadspace-with-search"`                 | Component   |
-| `<dds-leadspace-with-search-content>`         | `data-autoid="dds--leadspace-with-search__content"`        | Component   |
-| `<dds-leadspace-with-search-heading>`         | `data-autoid="dds--leadspace-with-search__heading"`        | Component   |
-| `<dds-leadspace-with-search-content-copy>`    | `data-autoid="dds--leadspace-with-search-content-copy"`    | Component   |
-| `<dds-leadspace-with-search-content-heading>` | `data-autoid="dds--leadspace-with-search-content-heading"` | Component   |
+| `<cds-leadspace-with-search>`                 | `data-autoid="cds--leadspace-with-search"`                 | Component   |
+| `<cds-leadspace-with-search-content>`         | `data-autoid="cds--leadspace-with-search__content"`        | Component   |
+| `<cds-leadspace-with-search-heading>`         | `data-autoid="cds--leadspace-with-search__heading"`        | Component   |
+| `<cds-leadspace-with-search-content-copy>`    | `data-autoid="cds--leadspace-with-search-content-copy"`    | Component   |
+| `<cds-leadspace-with-search-content-heading>` | `data-autoid="cds--leadspace-with-search-content-heading"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.react.tsx b/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.react.tsx
index f4a37df86a1..9946d58b1c8 100644
--- a/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.react.tsx
+++ b/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.react.tsx
@@ -6,91 +6,81 @@
  * 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 { select } from '@storybook/addon-knobs';
+import { select, text } from '@storybook/addon-knobs';
 import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 /* eslint-disable max-len */
 // @ts-ignore
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
-import DDSLeadspaceWithSearchHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-heading';
-import DDSLeadspaceWithSearchContent from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content';
-import DDSLeadspaceWithSearchContentHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-heading';
-import DDSLeadspaceWithSearchContentCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-content-copy';
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DLeadspaceWithSearch from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DLeadspaceWithSearchCopy from '@carbon/ibmdotcom-web-components/es/components-react/leadspace-with-search/leadspace-with-search-copy';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
 /* eslint-enable max-len */
-import { ADJACENT_THEMES } from '../defs';
+import { ADJACENT_THEMES, DUAL_THEMES } from '../defs';
 import readme from './README.stories.react.mdx';
 
-import image from '../../../../../storybook-images/assets/card-section-offset/background-media.jpg';
-
 const adjacentThemes = {
-  'White/Gray 10': ADJACENT_THEMES.WHITE_AND_G10,
-  'Gray 10/White': ADJACENT_THEMES.G10_AND_WHITE,
-  'Gray 90/Gray 100': ADJACENT_THEMES.G90_AND_G100,
-  'Gray 100/Gray 90': ADJACENT_THEMES.G100_AND_G90,
-  Monotheme: '',
+  'Dual theme': ADJACENT_THEMES.DUAL_THEME,
+  'Monotheme': ADJACENT_THEMES.MONOTHEME,
 };
 
+const subheading = `Innovate faster, reduce operational cost and transform 
+IT operations (ITOps) across a changing landscape with an AIOps platform that 
+delivers visibility into performance data and dependencies across environments.`
+
 // observing the Storybook theme attribute change
+// Normally it would work without this, but the component won't 
+// re-render unless we do this.
 const htmlElement = document.documentElement;
 let currentTheme = '';
 // eslint-disable-next-line func-names
-const observer = new MutationObserver(mutations => {
-  mutations.forEach(mutation => {
+const observer = new MutationObserver((mutations) => {
+  mutations.forEach((mutation) => {
     if (mutation.type === 'attributes') {
-      currentTheme = htmlElement.getAttribute(mutation.attributeName!) as string;
+      currentTheme = htmlElement.getAttribute(
+        mutation.attributeName!
+      ) as string;
+
+      let dualTheme;
+
+      for (const key in DUAL_THEMES) {
+        if (DUAL_THEMES[key].startsWith(currentTheme)) {
+          dualTheme = DUAL_THEMES[key];
+          break;
+        }
+      }    
+      const leadspace = document.querySelector('c4d-leadspace-with-search');
+      leadspace?.setAttribute('dual-theme', dualTheme as string);
     }
   });
 });
 observer.observe(htmlElement, { attributes: true });
 
-export const Default = args => {
-  const { theme } = args?.LeadspaceWithSearch ?? {};
-  const secondTheme = theme.split('-')[2];
-  return (
-    <DDSLeadspaceWithSearch adjacent-theme={theme}>
-      <DDSLeadspaceWithSearchHeading>Find a product</DDSLeadspaceWithSearchHeading>
-      <DDSLeadspaceWithSearchContent>
-        <DDSLeadspaceWithSearchContentHeading>
-          Innovate like a startup, scale for the enterprise
-        </DDSLeadspaceWithSearchContentHeading>
-        <DDSLeadspaceWithSearchContentCopy>
-          Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build,
-          test, and deploy code changes quickly, ensuring software is always ready for deployment.
-        </DDSLeadspaceWithSearchContentCopy>
-      </DDSLeadspaceWithSearchContent>
-      <DDSSearchWithTypeahead slot="search" leadspace-search></DDSSearchWithTypeahead>
-      <DDSHorizontalRule slot="hr" style={{ display: currentTheme === secondTheme ? 'none' : '' }}></DDSHorizontalRule>
-    </DDSLeadspaceWithSearch>
-  );
-};
+export const Default = (args) => {
+  const { theme, heading, highlight, subheading } =
+    args?.LeadspaceWithSearch ?? {};
+    const secondTheme = document.querySelector('c4d-leadspace-with-search')?.getAttribute('dual-theme')!.split('-')[2];
+    return (
+    <C4DLeadspaceWithSearch adjacent-theme={theme}>
+      <C4DLeadspaceHeading highlight={highlight}>
+        {heading}
+      </C4DLeadspaceHeading>
 
-export const WithImage = args => {
-  const { theme } = args?.LeadspaceWithSearch ?? {};
-  const secondTheme = theme.split('-')[2];
-  return (
-    <DDSLeadspaceWithSearch adjacent-theme={theme}>
-      <DDSBackgroundMedia
-        gradient-direction="left-to-right"
-        mobile-position="bottom"
-        default-src={image}
-        slot="image"></DDSBackgroundMedia>
-      <DDSLeadspaceWithSearchHeading>Find a product</DDSLeadspaceWithSearchHeading>
-      <DDSLeadspaceWithSearchContent>
-        <DDSLeadspaceWithSearchContentHeading>
-          Innovate like a startup, scale for the enterprise
-        </DDSLeadspaceWithSearchContentHeading>
-        <DDSLeadspaceWithSearchContentCopy>
-          Automate your software release process with continuous delivery (CD)—the most critical part of adopting DevOps. Build,
-          test, and deploy code changes quickly, ensuring software is always ready for deployment.
-        </DDSLeadspaceWithSearchContentCopy>
-      </DDSLeadspaceWithSearchContent>
-      <DDSSearchWithTypeahead slot="search" leadspace-search></DDSSearchWithTypeahead>
-      <DDSHorizontalRule slot="hr" style={{ display: currentTheme === secondTheme ? 'none' : '' }}></DDSHorizontalRule>
-    </DDSLeadspaceWithSearch>
+        <C4DLeadspaceWithSearchCopy>
+          {subheading}
+        </C4DLeadspaceWithSearchCopy>
+      <C4DSearchWithTypeahead
+        slot="search"
+        leadspace-search></C4DSearchWithTypeahead>
+      <C4DHorizontalRule
+        slot="hr"
+        style={{
+          display: currentTheme === secondTheme ? 'none' : '',
+        }}></C4DHorizontalRule>
+    </C4DLeadspaceWithSearch>
   );
 };
 
@@ -101,16 +91,21 @@ export default {
     hasStoryPadding: true,
     knobs: {
       LeadspaceWithSearch: () => ({
+        heading: text('Heading:', 'Find a product - Innovate like a startup, scale for the enterprise'),
+        highlight: text('Highlight:', 'Find a product -'),
+        subheading: text('Subheading:', subheading),
         theme: select(`Adjacent theme`, adjacentThemes, adjacentThemes.Monotheme),
       }),
     },
   },
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-lg-8 bx--offset-lg-4 bx--no-gutter">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-lg-8 cds--offset-lg-4 cds--no-gutter">
+              {story()}
+            </div>
           </div>
         </div>
       );
diff --git a/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts b/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts
index 797f9043207..fc768fa0312 100644
--- a/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts
+++ b/packages/web-components/src/components/leadspace-with-search/__stories__/leadspace-with-search.stories.ts
@@ -1,28 +1,30 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { select, text } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
-import { ADJACENT_THEMES } from '../defs';
+import { ADJACENT_THEMES, DUAL_THEMES } from '../defs';
 import '../index';
-import image from '../../../../../storybook-images/assets/card-section-offset/background-media.jpg';
 
 const adjacentThemes = {
-  'White/Gray 10': ADJACENT_THEMES.WHITE_AND_G10,
-  'Gray 10/White': ADJACENT_THEMES.G10_AND_WHITE,
-  'Gray 90/Gray 100': ADJACENT_THEMES.G90_AND_G100,
-  'Gray 100/Gray 90': ADJACENT_THEMES.G100_AND_G90,
-  Monotheme: '',
+  'Dual theme': ADJACENT_THEMES.DUAL_THEME,
+  Monotheme: ADJACENT_THEMES.MONOTHEME,
 };
 
+const subheading = `Innovate faster, reduce operational cost and transform 
+IT operations (ITOps) across a changing landscape with an AIOps platform that 
+delivers visibility into performance data and dependencies across environments.`;
+
 // observing the Storybook theme attribute change
+// Normally it would work without this, but the component won't
+// re-render unless we do this.
 const htmlElement = document.documentElement;
 let currentTheme = '';
 // eslint-disable-next-line func-names
@@ -32,111 +34,57 @@ const observer = new MutationObserver((mutations) => {
       currentTheme = htmlElement.getAttribute(
         mutation.attributeName!
       ) as string;
+
+      let dualTheme;
+
+      for (const key in DUAL_THEMES) {
+        if (DUAL_THEMES[key].startsWith(currentTheme)) {
+          dualTheme = DUAL_THEMES[key];
+          break;
+        }
+      }
+      const leadspace = document.querySelector('c4d-leadspace-with-search');
+      leadspace?.setAttribute('dual-theme', dualTheme as string);
     }
   });
 });
 observer.observe(htmlElement, { attributes: true });
 
 export const Default = (args) => {
-  const { theme, heading, subheading, paragraph } =
-    args?.LeadspaceWithSearch ?? {};
-  const secondTheme = theme.split('-')[2];
-  const subheadingComponent = document.querySelector(
-    'dds-leadspace-with-search-content-heading'
-  );
-
-  if (subheadingComponent) {
-    subheadingComponent!.shadowRoot!.innerHTML = subheading;
-  }
-  return html`
-    <dds-leadspace-with-search adjacent-theme="${theme}">
-      <dds-leadspace-with-search-heading
-        >${heading}</dds-leadspace-with-search-heading
-      >
-      <dds-leadspace-with-search-content>
-        <dds-leadspace-with-search-content-heading
-          >${subheading}</dds-leadspace-with-search-content-heading
-        >
-        <dds-leadspace-with-search-content-copy
-          style="${!paragraph ? 'display: none' : ''}"
-          >${paragraph}
-        </dds-leadspace-with-search-content-copy>
-      </dds-leadspace-with-search-content>
-      <dds-search-with-typeahead
-        slot="search"
-        leadspace-search></dds-search-with-typeahead>
-      <dds-hr
-        slot="hr"
-        style="${currentTheme === secondTheme ? 'display: none' : ''}"></dds-hr>
-    </dds-leadspace-with-search>
-  `;
-};
-
-export const WithImage = (args) => {
-  const { theme, heading, subheading, paragraph } =
+  const { theme, heading, highlight, subheading } =
     args?.LeadspaceWithSearch ?? {};
-  const secondTheme = theme.split('-')[2];
-
-  const subheadingComponent = document.querySelector(
-    'dds-leadspace-with-search-content-heading'
-  );
 
-  if (subheadingComponent) {
-    subheadingComponent!.shadowRoot!.innerHTML = subheading;
-  }
+  const secondTheme = document
+    .querySelector('c4d-leadspace-with-search')
+    ?.getAttribute('dual-theme')!
+    .split('-')[2];
 
   return html`
-    <dds-leadspace-with-search adjacent-theme="${theme}">
-      <dds-background-media
-        gradient-direction="left-to-right"
-        default-src="${image}"
-        slot="image">
-      </dds-background-media>
-      <dds-leadspace-with-search-heading
-        >${heading}</dds-leadspace-with-search-heading
+    <c4d-leadspace-with-search adjacent-theme="${theme}">
+      <c4d-leadspace-heading highlight=${highlight}
+        >${heading}</c4d-leadspace-heading
       >
-      <dds-leadspace-with-search-content>
-        <dds-leadspace-with-search-content-heading
-          >${subheading}</dds-leadspace-with-search-content-heading
-        >
-        <dds-leadspace-with-search-content-copy
-          style="${!paragraph ? 'display: none' : ''}"
-          >${paragraph}
-        </dds-leadspace-with-search-content-copy>
-      </dds-leadspace-with-search-content>
-      <dds-search-with-typeahead
+      <c4d-leadspace-with-search-copy
+        style="${!subheading ? 'display: none' : ''}"
+        >${subheading}
+      </c4d-leadspace-with-search-copy>
+      <c4d-search-with-typeahead
         slot="search"
-        leadspace-search></dds-search-with-typeahead>
-      <dds-hr
+        leadspace-search></c4d-search-with-typeahead>
+      <c4d-hr
         slot="hr"
-        style="${currentTheme === secondTheme ? 'display: none' : ''}"></dds-hr>
-    </dds-leadspace-with-search>
+        style="${currentTheme === secondTheme ? 'display: none' : ''}"></c4d-hr>
+    </c4d-leadspace-with-search>
   `;
 };
 
-WithImage.story = {
-  name: 'With image',
-  parameters: {
-    propsSet: {
-      default: {
-        LeadspaceWithSearch: {
-          heading: 'Find a product',
-          subheading: 'Innovate like a startup, scale for the enterprise',
-          paragraph: '',
-          theme: adjacentThemes.Monotheme,
-        },
-      },
-    },
-  },
-};
-
 export default {
   title: 'Components/Lead space search',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-8 bx--offset-lg-4 bx--no-gutter">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-8 cds--offset-lg-4 cds--no-gutter">
             ${story()}
           </div>
         </div>
@@ -148,15 +96,17 @@ export default {
     hasStoryPadding: true,
     knobs: {
       LeadspaceWithSearch: () => ({
-        heading: text('Heading:', 'Find a product'),
-        subheading: text(
-          'Subheading',
-          'Innovate like a startup, scale for the enterprise'
+        heading: text(
+          'Heading:',
+          'Find a product - Innovate like a startup, scale for the enterprise'
+        ),
+        highlight: text('Highlight:', 'Find a product -'),
+        subheading: text('Subheading:', subheading),
+        theme: select(
+          `Adjacent theme`,
+          adjacentThemes,
+          adjacentThemes.Monotheme
         ),
-        paragraph: text('Paragraph:', ''),
-        theme:
-          select(`Adjacent theme`, adjacentThemes, adjacentThemes.Monotheme) ??
-          0,
       }),
     },
     propsSet: {
diff --git a/packages/web-components/src/components/leadspace-with-search/defs.ts b/packages/web-components/src/components/leadspace-with-search/defs.ts
index 3fc6198fc01..512f8b8cc93 100644
--- a/packages/web-components/src/components/leadspace-with-search/defs.ts
+++ b/packages/web-components/src/components/leadspace-with-search/defs.ts
@@ -8,9 +8,9 @@
  */
 
 /**
- * Gradient Direction
+ * Dual themes
  */
-export enum ADJACENT_THEMES {
+export enum DUAL_THEMES {
   /**
    * White and Gray 10
    */
@@ -36,3 +36,18 @@ export enum ADJACENT_THEMES {
    */
   MONOTHEME = '',
 }
+
+/**
+ * Adjacent themes
+ */
+export enum ADJACENT_THEMES {
+  /**
+   * Default theme
+   */
+  MONOTHEME = '',
+
+  /**
+   * Dual theme
+   */
+  DUAL_THEME = 'dual-theme',
+}
diff --git a/packages/web-components/src/components/leadspace-with-search/index.ts b/packages/web-components/src/components/leadspace-with-search/index.ts
index 6490f48a246..debd17092c6 100644
--- a/packages/web-components/src/components/leadspace-with-search/index.ts
+++ b/packages/web-components/src/components/leadspace-with-search/index.ts
@@ -9,9 +9,6 @@
 
 import '../background-media/index';
 import './leadspace-with-search';
-import './leadspace-with-search-heading';
-import './leadspace-with-search-content';
-import './leadspace-with-search-content-heading';
-import './leadspace-with-search-content-copy';
+import './leadspace-with-search-copy';
 import '../search-with-typeahead/index';
 import '../horizontal-rule/index';
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-copy.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-copy.ts
deleted file mode 100644
index 35fa0ee3304..00000000000
--- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-copy.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { css, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './leadspace-with-search.scss';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentBlockParagraph from '../content-block/content-block-paragraph';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Copy in the content section of Leadspace with search
- *
- * @element dds-leadspace-with-search-content-copy
- */
-@customElement(`${ddsPrefix}-leadspace-with-search-content-copy`)
-class DDSLeadspaceWithSearchContentCopy extends StableSelectorMixin(
-  DDSContentBlockParagraph
-) {
-  /**
-   * The shadow slot the content should be in.
-   */
-  @property({ reflect: true })
-  slot = 'copy';
-
-  static get stableSelector() {
-    return `${ddsPrefix}--leadspace-with-search-content-copy`;
-  }
-
-  // `styles` here is a `CSSResult` generated by custom WebPack loader
-  static get styles() {
-    return css`
-      ${super.styles}${styles}
-    `;
-  }
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceWithSearchContentCopy;
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-heading.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-heading.ts
deleted file mode 100644
index fd9549c524e..00000000000
--- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content-heading.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './leadspace-with-search.scss';
-import DDSContentBlockHeading from '../content-block/content-block-heading';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Heading in the content section of Leadspace with search
- *
- * @element dds-leadspace-with-search-content-heading
- */
-@customElement(`${ddsPrefix}-leadspace-with-search-content-heading`)
-class DDSLeadspaceWithSearchContentHeading extends StableSelectorMixin(
-  DDSContentBlockHeading
-) {
-  static get stableSelector() {
-    return `${ddsPrefix}--leadspace-with-search-content-heading`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceWithSearchContentHeading;
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content.ts
deleted file mode 100644
index 33c1ef5d850..00000000000
--- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-content.ts
+++ /dev/null
@@ -1,42 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSLeadspaceBlockContent from '../leadspace-block/leadspace-block-content';
-import styles from './leadspace-with-search.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Content in Leadspace with search.
- *
- * @element dds-leadspace-block-content
- */
-@customElement(`${ddsPrefix}-leadspace-with-search-content`)
-class DDSLeadspaceWithSearchContent extends StableSelectorMixin(
-  DDSLeadspaceBlockContent
-) {
-  /**
-   * The shadow slot the content should be in.
-   */
-  @property({ reflect: true })
-  slot = 'content';
-
-  static get stableSelector() {
-    return `${ddsPrefix}--leadspace-with-search__content`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceWithSearchContent;
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-copy.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-copy.ts
new file mode 100644
index 00000000000..e33576fd6ba
--- /dev/null
+++ b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-copy.ts
@@ -0,0 +1,48 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './leadspace-with-search.scss';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
+import C4DContentBlockParagraph from '../content-block/content-block-paragraph';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Copy in the content section of Leadspace with search
+ *
+ * @element c4d-leadspace-with-search-copy
+ */
+@customElement(`${c4dPrefix}-leadspace-with-search-copy`)
+class C4DLeadspaceWithSearchCopy extends StableSelectorMixin(
+  C4DContentBlockParagraph
+) {
+  /**
+   * The shadow slot the content should be in.
+   */
+  @property({ reflect: true })
+  slot = 'copy';
+
+  static get stableSelector() {
+    return `${c4dPrefix}--leadspace-with-search-content-copy`;
+  }
+
+  // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get styles() {
+    return css`
+      ${super.styles}${styles}
+    `;
+  }
+}
+
+/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
+export default C4DLeadspaceWithSearchCopy;
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-heading.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-heading.ts
deleted file mode 100644
index 6653d3ce935..00000000000
--- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search-heading.ts
+++ /dev/null
@@ -1,35 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSLeadspaceBlockHeading from '../leadspace-block/leadspace-block-heading';
-import styles from './leadspace-with-search.scss';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Heading in Leadspace with search.
- *
- * @element dds-leadspace-with-search-heading
- */
-@customElement(`${ddsPrefix}-leadspace-with-search-heading`)
-class DDSLeadspaceWithSearchHeading extends StableSelectorMixin(
-  DDSLeadspaceBlockHeading
-) {
-  static get stableSelector() {
-    return `${ddsPrefix}--leadspace-with-search__heading`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceWithSearchHeading;
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.scss b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.scss
index afb23caf660..f5d81d32753 100644
--- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.scss
+++ b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.scss
@@ -5,4 +5,4 @@
 * LICENSE file in the root directory of this source tree.
 */
 
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace-with-search/index';
+@use '@carbon/ibmdotcom-styles/scss/components/leadspace-with-search';
diff --git a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts
index 366cd528fdb..acec4d064a9 100644
--- a/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts
+++ b/packages/web-components/src/components/leadspace-with-search/leadspace-with-search.ts
@@ -7,40 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, html, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import '../horizontal-rule/horizontal-rule';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace-with-search.scss';
-import { ADJACENT_THEMES } from './defs';
+import { ADJACENT_THEMES, DUAL_THEMES } from './defs';
 import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+import { themes } from '@carbon/themes';
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Leadspace with Search
  *
- * @element dds-leadspace-with-search
+ * @element c4d-leadspace-with-search
  */
-@customElement(`${ddsPrefix}-leadspace-with-search`)
-class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
-  /**
-   *
-   */
-  @property()
-  _contents: any[] = [];
-
-  /**
-   * `true` if there is an image.
-   */
-  @property({ attribute: 'has-image', reflect: true, type: Boolean })
-  protected _hasImage = false;
-
+@customElement(`${c4dPrefix}-leadspace-with-search`)
+class C4DLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
   /**
    * sets the heading for sticky search
    */
@@ -53,6 +39,17 @@ class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
   @property({ attribute: 'scroll-behavior', reflect: true, type: Boolean })
   protected _scrollBehavior = false;
 
+  /**
+   * The adjacent theme.
+   *
+   * Options are:
+   * "monotheme",
+   * "dual-theme"
+   *
+   */
+  @property({ attribute: 'adjacent-theme', reflect: true })
+  adjacentTheme = ADJACENT_THEMES.MONOTHEME;
+
   /**
    * The adjacent theme.
    *
@@ -62,8 +59,8 @@ class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
    * "g90-and-g100",
    * "g100-and-g90"
    */
-  @property({ attribute: 'adjacent-theme', reflect: true })
-  theme = ADJACENT_THEMES.MONOTHEME;
+  @property({ attribute: 'dual-theme', reflect: true })
+  dualTheme = DUAL_THEMES.MONOTHEME;
 
   /**
    * Handles `slotchange` event.
@@ -73,26 +70,7 @@ class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
   protected _handleHeadingSlotChange({ target }: Event) {
     this._heading = (
       (target as HTMLSlotElement).assignedNodes()[0] as HTMLElement
-    ).innerText;
-  }
-
-  /**
-   * Handles `slotchange` event.
-   *
-   * @param event The event.
-   */
-  protected _handleImageSlotChange({ target }: Event) {
-    this._hasImage = (target as HTMLSlotElement)
-      .assignedNodes()
-      .some(
-        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
-      );
-
-    this._contents = (target as HTMLSlotElement)
-      .assignedNodes()
-      .filter(
-        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
-      );
+    ).querySelector('h1')?.innerText!;
   }
 
   /**
@@ -101,13 +79,38 @@ class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
   protected _getSearchClass() {
     return classMap({
       [`${prefix}--search-container`]: true,
-      [`${prefix}--search-container-adjacent-theme`]:
-        this.theme !== ADJACENT_THEMES.MONOTHEME || this._hasImage,
+      [`${prefix}--search-container-dual-theme`]:
+        this.adjacentTheme === ADJACENT_THEMES.DUAL_THEME,
     });
   }
 
   protected firstUpdated() {
     StickyHeader.global.leadspaceWithSearch = this;
+
+    this.querySelector(`${c4dPrefix}-leadspace-heading`)?.setAttribute(
+      'type-style',
+      'fluid-heading-05'
+    );
+  }
+
+  updated() {
+    const currentBackground = window
+      .getComputedStyle(this)
+      .getPropertyValue('--cds-background');
+    const currentTheme = Object.keys(themes).find(
+      (colorName) => themes[colorName].background === currentBackground
+    );
+
+    if (this.adjacentTheme === ADJACENT_THEMES.DUAL_THEME) {
+      for (const key in DUAL_THEMES) {
+        if (DUAL_THEMES[key].startsWith(currentTheme)) {
+          this.dualTheme = DUAL_THEMES[key];
+          break;
+        }
+      }
+    } else {
+      this.dualTheme = '' as any;
+    }
   }
 
   render() {
@@ -117,8 +120,7 @@ class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
           name="heading"
           @slotchange=${this._handleHeadingSlotChange}></slot>
         <div class="${prefix}--content-layout__body">
-          <slot name="content"></slot>
-          <slot @slotchange=${this._handleImageSlotChange} name="image"></slot>
+          <slot name="copy"></slot>
         </div>
       </div>
       <div class="${this._getSearchClass()}">
@@ -128,18 +130,15 @@ class DDSLeadspaceWithSearch extends StableSelectorMixin(LitElement) {
         </div>
       </div>
       <slot name="hr"></slot>
-      ${this._contents.map((e) => {
-        return html` ${unsafeHTML((e as HTMLElement).outerHTML)} `;
-      })}
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace-with-search`;
+    return `${c4dPrefix}--leadspace-with-search`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceWithSearch;
+export default C4DLeadspaceWithSearch;
diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
index 9d76201323d..8dcdc26de8d 100644
--- a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
@@ -36,32 +36,32 @@ import ArrowRight20 from '@carbon/web-components/es/icons/arrow--right/20.js';
 ### HTML
 
 ```html
-<dds-leadspace alt="alt text" default-src="www.example.com">
-  <dds-leadspace-heading>LeadSpace title</dds-leadspace-heading>
+<c4d-leadspace alt="alt text" default-src="www.example.com">
+  <c4d-leadspace-heading>LeadSpace title</c4d-leadspace-heading>
   LeadSpace copy
-  <dds-button-group slot="action">
-    <dds-button-group-item href="www.example.com">
+  <c4d-button-group slot="action">
+    <c4d-button-group-item href="www.example.com">
       Button 1
       <svg ...>...</svg>
-    </dds-button-group-item>
-    <dds-button-group-item href="www.example.com">
+    </c4d-button-group-item>
+    <c4d-button-group-item href="www.example.com">
       Button 2
       <svg ...>...</svg>
-    </dds-button-group-item>
-  </dds-button-group>
-  <dds-background-media
+    </c4d-button-group-item>
+  </c4d-button-group>
+  <c4d-background-media
     slot="image"
     opacity="100"
     alt="alt text"
     default-src="https://picsum.photos/id/1076/1056/480">
-    <dds-image-item
+    <c4d-image-item
       media="(min-width: 672px)"
-      srcset="https://picsum.photos/id/1076/672/400"></dds-image-item>
-    <dds-image-item
+      srcset="https://picsum.photos/id/1076/672/400"></c4d-image-item>
+    <c4d-image-item
       media="(min-width: 0)"
-      srcset="https://picsum.photos/id/1076/320/370"></dds-image-item>
-  </dds-background-media>
-</dds-leadspace>
+      srcset="https://picsum.photos/id/1076/320/370"></c4d-image-item>
+  </c4d-background-media>
+</c4d-leadspace>
 ```
 
 ## Using a background video
@@ -71,25 +71,25 @@ It is possible to display a video instead of an image. To do so, use the
 such:
 
 ```html
-<dds-leadspace>
-  <dds-leadspace-heading>LeadSpace title</dds-leadspace-heading>
+<c4d-leadspace>
+  <c4d-leadspace-heading>LeadSpace title</c4d-leadspace-heading>
   Leadspace copy
-  <dds-button-group slot="action">
-    <dds-button-group-item href="www.example.com">
+  <c4d-button-group slot="action">
+    <c4d-button-group-item href="www.example.com">
       Button 1
       <svg ...>...</svg>
-    </dds-button-group-item>
-    <dds-button-group-item href="www.example.com">
+    </c4d-button-group-item>
+    <c4d-button-group-item href="www.example.com">
       Button 2
       <svg ...>...</svg>
-    </dds-button-group-item>
-  </dds-button-group>
-  <dds-background-media slot="image" opacity="100">
-    <dds-video-player-container
+    </c4d-button-group-item>
+  </c4d-button-group>
+  <c4d-background-media slot="image" opacity="100">
+    <c4d-video-player-container
       video-id="1_9h94wo6b"
-      background-mode="true"></dds-video-player-container>
-  </dds-background-media>
-</dds-leadspace>
+      background-mode="true"></c4d-video-player-container>
+  </c4d-background-media>
+</c4d-leadspace>
 ```
 
 ## Using video player CTA button
@@ -101,39 +101,72 @@ the Leadspace reserves the "action" slot for its CTAs, make sure to include
 `slot='action'` as an attribute to `video-cta-container`:
 
 ```html
-<dds-leadspace alt="alt text" default-src="www.example.com">
-  <dds-leadspace-heading>LeadSpace title</dds-leadspace-heading>
+<c4d-leadspace alt="alt text" default-src="www.example.com">
+  <c4d-leadspace-heading>LeadSpace title</c4d-leadspace-heading>
   LeadSpace copy
-  <dds-video-cta-container slot="action">
-    <dds-button-group slot="action">
-      <dds-button-cta cta-type="video" href="1_9h94wo6b">
+  <c4d-video-cta-container slot="action">
+    <c4d-button-group slot="action">
+      <c4d-button-group-item cta-type="video" href="1_9h94wo6b">
         Button 1
         <svg ...>...</svg>
-      </dds-button-cta>
-      <dds-button-group-item href="www.example.com">
+      </c4d-button-group-item>
+      <c4d-button-group-item href="www.example.com">
         Button 2
         <svg ...>...</svg>
-      </dds-button-group-item>
-    </dds-button-group>
-  </dds-video-cta-container>
-  <dds-background-media
+      </c4d-button-group-item>
+    </c4d-button-group>
+  </c4d-video-cta-container>
+  <c4d-background-media
     slot="image"
     opacity="100"
     alt="alt text"
     default-src="https://picsum.photos/id/1076/1056/480">
-    <dds-image-item
+    <c4d-image-item
       media="(min-width: 672px)"
-      srcset="https://picsum.photos/id/1076/672/400"></dds-image-item>
-    <dds-image-item
+      srcset="https://picsum.photos/id/1076/672/400"></c4d-image-item>
+    <c4d-image-item
       media="(min-width: 0)"
-      srcset="https://picsum.photos/id/1076/320/370"></dds-image-item>
-  </dds-background-media>
-</dds-leadspace>
+      srcset="https://picsum.photos/id/1076/320/370"></c4d-image-item>
+  </c4d-background-media>
+</c4d-leadspace>
 ```
 
+## Leadspace heading
+
+The heading component has two attributes that can be used.
+
+### Highlight
+You can use the `highlight` attribute to highlight a specific word or phrase in your heading.
+
+```html
+<c4d-leadspace alt="alt text" default-src="www.example.com">
+  <c4d-leadspace-heading highlight="important">LeadSpace title with an important word</c4d-leadspace-heading>
+  LeadSpace copy
+</c4d-leadspace>
+```
+
+In the previous example the word "important" will be highlighted.
+
+### Type style
+
+With the `type-style` attribute, you can modify the type of the heading.
+
+There are two options:
+* display-01 (default)
+* fluid-heading-05
+
+```html
+<c4d-leadspace alt="alt text" default-src="www.example.com">
+  <c4d-leadspace-heading type-style="fluid-heading-05">LeadSpace title</c4d-leadspace-heading>
+  LeadSpace copy
+</c4d-leadspace>
+```
+
+Note: The `short` variation of the leadspace can only have `fluid-heading-05` as its type heading.
+
 ## Props
 
-<Props of="dds-leadspace" />
+<Props of="c4d-leadspace" />
 
 ## Stable selectors
 
@@ -143,6 +176,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector         | Description |
 | ----------------------- | ------------------------------ | ----------- |
-| `<dds-leadspace>`       | `data-autoid="dds--leadspace"` | Component   |
+| `<c4d-leadspace>`       | `data-autoid="c4d--leadspace"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx
index 702362f9495..148d04a86e5 100644
--- a/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leadspace/__stories__/README.stories.react.mdx
@@ -23,43 +23,43 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
-import DDSLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 
 function App() {
   return (
-    <DDSLeadspace size="tall">
-      <DDSLeadspaceHeading>Heading can go on two lines max</DDSLeadspaceHeading>
+    <C4DLeadspace size="tall">
+      <C4DLeadspaceHeading>Heading can go on two lines max</C4DLeadspaceHeading>
       Use this area for a short line of copy to support the title
-      <DDSButtonGroup slot="action">
-        <DDSButtonGroupItem href="https://www.example.com">
+      <C4DButtonGroup slot="action">
+        <C4DButtonGroupItem href="https://www.example.com">
           <ArrowRight20 slot="icon" />
           Button 1
-        </DDSButtonGroupItem>
-        <DDSButtonGroupItem href="https://www.example.com">
+        </C4DButtonGroupItem>
+        <C4DButtonGroupItem href="https://www.example.com">
           <ArrowRight20 slot="icon" />
           Button 2
-        </DDSButtonGroupItem>
-      </DDSButtonGroup>
-      <DDSBackgroundMedia
+        </C4DButtonGroupItem>
+      </C4DButtonGroup>
+      <C4DBackgroundMedia
         slot="image"
         default-src="https://picsum.photos/id/1076/1056/480"
         alt="Image alt text"
         opacity="100">
-        <DDSImageItem
+        <C4DImageItem
           media="(min-width: 672px)"
-          srcset="https://picsum.photos/id/1076/672/400"></DDSImageItem>
-        <DDSImageItem
+          srcset="https://picsum.photos/id/1076/672/400"></C4DImageItem>
+        <C4DImageItem
           media="(min-width: 0)"
-          srcset="https://picsum.photos/id/1076/320/370"></DDSImageItem>
-      </DDSBackgroundMedia>
-    </DDSLeadspace>
+          srcset="https://picsum.photos/id/1076/320/370"></C4DImageItem>
+      </C4DBackgroundMedia>
+    </C4DLeadspace>
   );
 }
 ```
@@ -73,25 +73,25 @@ such:
 ```javascript
 function App() {
   return (
-    <DDSLeadspace size="tall">
-      <DDSLeadspaceHeading>Heading can go on two lines max</DDSLeadspaceHeading>
+    <C4DLeadspace size="tall">
+      <C4DLeadspaceHeading>Heading can go on two lines max</C4DLeadspaceHeading>
       Use this area for a short line of copy to support the title
-      <DDSButtonGroup slot="action">
-        <DDSButtonGroupItem href="https://www.example.com">
+      <C4DButtonGroup slot="action">
+        <C4DButtonGroupItem href="https://www.example.com">
           <ArrowRight20 slot="icon" />
           Button 1
-        </DDSButtonGroupItem>
-        <DDSButtonGroupItem href="https://www.example.com">
+        </C4DButtonGroupItem>
+        <C4DButtonGroupItem href="https://www.example.com">
           <ArrowRight20 slot="icon" />
           Button 2
-        </DDSButtonGroupItem>
-      </DDSButtonGroup>
-      <DDSBackgroundMedia slot="image" alt="Image alt text" opacity="100">
-        <DDSVideoPlayerContainer
-          video-id="1_9h94wo6b"
-          background-mode="true"></DDSVideoPlayerContainer>
-      </DDSBackgroundMedia>
-    </DDSLeadspace>
+        </C4DButtonGroupItem>
+      </C4DButtonGroup>
+      <C4DBackgroundMedia slot="image" alt="Image alt text" opacity="100">
+        <C4DVideoPlayerContainer
+          video-id="0_ibuqxqbe"
+          background-mode="true"></C4DVideoPlayerContainer>
+      </C4DBackgroundMedia>
+    </C4DLeadspace>
   );
 }
 ```
@@ -107,38 +107,78 @@ the Leadspace reserves the "action" slot for its CTAs, make sure to include
 ```javascript
 function App() {
   return (
-    <DDSLeadspace size="tall">
-      <DDSLeadspaceHeading>Heading can go on two lines max</DDSLeadspaceHeading>
+    <C4DLeadspace size="tall">
+      <C4DLeadspaceHeading>Heading can go on two lines max</C4DLeadspaceHeading>
       Use this area for a short line of copy to support the title
-      <DDSVideoCTAContainer slot="action">
-        <DDSButtonGroup slot="action">
-          <DDSButtonCTA cta-type="video" href="1_9h94wo6b">
+      <C4DVideoCTAContainer slot="action">
+        <C4DButtonGroup slot="action">
+          <C4DButtonGroupItem cta-type="video" href="1_9h94wo6b">
             <ArrowRight20 slot="icon" />
             Button 1
-          </DDSButtonCTA>
-          <DDSButtonGroupItem href="https://www.example.com">
+          </C4DButtonCTA>
+          <C4DButtonGroupItem href="https://www.example.com">
             <ArrowRight20 slot="icon" />
             Button 2
-          </DDSButtonGroupItem>
-        </DDSButtonGroup>
-      </DDSVideoCTAContainer>
-      <DDSBackgroundMedia
+          </C4DButtonGroupItem>
+        </C4DButtonGroup>
+      </C4DVideoCTAContainer>
+      <C4DBackgroundMedia
         slot="image"
         default-src="https://picsum.photos/id/1076/1056/480"
         alt="Image alt text"
         opacity="100">
-        <DDSImageItem
+        <C4DImageItem
           media="(min-width: 672px)"
-          srcset="https://picsum.photos/id/1076/672/400"></DDSImageItem>
-        <DDSImageItem
+          srcset="https://picsum.photos/id/1076/672/400"></C4DImageItem>
+        <C4DImageItem
           media="(min-width: 0)"
-          srcset="https://picsum.photos/id/1076/320/370"></DDSImageItem>
-      </DDSBackgroundMedia>
-    </DDSLeadspace>
+          srcset="https://picsum.photos/id/1076/320/370"></C4DImageItem>
+      </C4DBackgroundMedia>
+    </C4DLeadspace>
   );
 }
 ```
 
+## Leadspace heading
+
+The heading component has two attributes that can be used.
+
+### Highlight
+You can use the `highlight` attribute to highlight a specific word or phrase in your heading.
+
+```javascript
+function App() {
+  return (
+    <C4DLeadspace>
+      <C4DLeadspaceHeading highlight="important">Leadspace with an important word</C4DLeadspaceHeading>
+      Leadspace copy
+    </C4DLeadspace>
+  );
+}
+```
+
+In the previous example the word "important" will be highlighted.
+
+### Type style
+
+With the `type-style` attribute, you can modify the type of the heading.
+
+There are two options:
+* display-01 (default)
+* fluid-heading-05
+
+```javascript
+function App() {
+  return (
+    <C4DLeadspace>
+      <C4DLeadspaceHeading type-style="fluid-heading-05">Heading</C4DLeadspaceHeading>
+      Leadspace copy
+    </C4DLeadspace>
+  );
+}
+```
+
+Note: The `short` variation of the leadspace can only have `fluid-heading-05` as its type heading.
 ## Props
 
 <Props of={PropTypesRef} />
@@ -151,6 +191,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector         | Description |
 | ----------------------- | ------------------------------ | ----------- |
-| `<dds-leadspace>`       | `data-autoid="dds--leadspace"` | Component   |
+| `<c4d-leadspace>`       | `data-autoid="c4d--leadspace"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx
index 9644a322f9d..d8395337e04 100644
--- a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx
+++ b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.react.tsx
@@ -15,60 +15,66 @@ import Pdf20 from '@carbon/icons-react/es/PDF/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
+import C4DLeadspace from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace';
 // @ts-ignore
-import DDSLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
+import C4DLeadspaceHeading from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/leadspace-heading';
 // @ts-ignore
-import DDSBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
+import C4DBackgroundMedia from '@carbon/ibmdotcom-web-components/es/components-react/background-media/background-media';
 // @ts-ignore
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
 // @ts-ignore
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
 // @ts-ignore
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
+import C4DImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
 // @ts-ignore
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link';
+import C4DBreadcrumbLink from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/breadcrumb-link';
 // @ts-ignore
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
+import C4DBreadcrumbItem from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/breadcrumb-item';
 // @ts-ignore
-import DDSBreadcrumbLink from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/breadcrumb-link';
+import C4DBreadcrumb from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/breadcrumb';
 // @ts-ignore
-import DDSBreadcrumbItem from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/breadcrumb-item';
-// @ts-ignore
-import DDSBreadcrumb from '@carbon/ibmdotcom-web-components/es/components-react/leadspace/breadcrumb';
-// @ts-ignore
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import CDSTag from '@carbon/web-components/es/components-react/tag/tag';
 
 import leadspaceImg from '../../../../../storybook-images/assets/leadspace/leadspaceMax.jpg';
 import readme from './README.stories.react.mdx';
 import { LEADSPACE_SIZE } from '../defs';
 
-const navigationOptions = ['with Tag group (using Tag link)', 'with Breadcrumbs', 'none'];
+const navigationOptions = [
+  'with a group of Tags',
+  'with Breadcrumbs',
+  'none',
+];
+
+const typeStyleOptions = {
+  'Display 01': 'display-01',
+  'Fluid heading 05': 'fluid-heading-05',
+};
 
 const navigationWithTagGroup = (
-  <DDSTagGroup slot="navigation">
-    <DDSTagLink href={'https://example.com'}>Marketing Analytics</DDSTagLink>
-    <DDSTagLink href={'https://example.com'}>Cloud</DDSTagLink>
-  </DDSTagGroup>
+  <div slot="navigation">
+    <CDSTag href={'https://example.com'}>Marketing Analytics</CDSTag>
+    <CDSTag href={'https://example.com'}>Cloud</CDSTag>
+  </div>
 );
 
 const navigationWithBreadcrumbs = (
-  <DDSBreadcrumb slot="navigation">
-    <DDSBreadcrumbItem>
-      <DDSBreadcrumbLink href="/#">Breadcrumb 1</DDSBreadcrumbLink>
-    </DDSBreadcrumbItem>
-    <DDSBreadcrumbItem>
-      <DDSBreadcrumbLink href="/#">Breadcrumb 2</DDSBreadcrumbLink>
-    </DDSBreadcrumbItem>
-    <DDSBreadcrumbItem>
-      <DDSBreadcrumbLink href="/#" aria-current="page">
+  <C4DBreadcrumb slot="navigation">
+    <C4DBreadcrumbItem>
+      <C4DBreadcrumbLink href="/#">Breadcrumb 1</C4DBreadcrumbLink>
+    </C4DBreadcrumbItem>
+    <C4DBreadcrumbItem>
+      <C4DBreadcrumbLink href="/#">Breadcrumb 2</C4DBreadcrumbLink>
+    </C4DBreadcrumbItem>
+    <C4DBreadcrumbItem>
+      <C4DBreadcrumbLink href="/#" aria-current="page">
         Breadcrumb 3
-      </DDSBreadcrumbLink>
-    </DDSBreadcrumbItem>
-  </DDSBreadcrumb>
+      </C4DBreadcrumbLink>
+    </C4DBreadcrumbItem>
+  </C4DBreadcrumb>
 );
 
-const getAriaLabel = type => {
+const getAriaLabel = (type) => {
   switch (type) {
     case 'ArrowDown20':
       return 'anchor link';
@@ -92,59 +98,91 @@ const iconOptions = {
   PDF: 'Pdf20',
 };
 
-const Default = args => {
-  const { alt, buttons, copy, defaultSrc, hasImage, hasVideo, navElements, size, title, type } = args?.Leadspace ?? {};
+const Default = (args) => {
+  const {
+    alt,
+    buttons,
+    copy,
+    defaultSrc,
+    hasImage,
+    hasVideo,
+    navElements,
+    size,
+    title,
+    type,
+    highlight, typeStyle 
+  } = args?.Leadspace ?? {};
   return (
-    <DDSLeadspace size={size} type={type} {...(hasImage ? { alt } : {})}>
+    <C4DLeadspace size={size} type={type} {...(hasImage ? { alt } : {})}>
       {navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       {navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <DDSLeadspaceHeading>{title}</DDSLeadspaceHeading>
+      <C4DLeadspaceHeading highlight={highlight} type-style={typeStyle}>{title}</C4DLeadspaceHeading>
       {copy}
-      <DDSButtonGroup slot="action">
-        {buttons.map(elem => {
+      <C4DButtonGroup slot="action">
+        {buttons.map((elem) => {
           return (
-            <DDSButtonGroupItem aria-label={elem.label} href={elem.href}>
+            <C4DButtonGroupItem aria-label={elem.label} href={elem.href}>
               {elem.copy}
               {elem.renderIcon}
-            </DDSButtonGroupItem>
+            </C4DButtonGroupItem>
           );
         })}
-      </DDSButtonGroup>
+      </C4DButtonGroup>
       {hasImage && (
-        <DDSBackgroundMedia default-src={defaultSrc} alt={alt} opacity="100">
-          <DDSImageItem media="(min-width: 672px)" srcset={leadspaceImg}></DDSImageItem>
-          <DDSImageItem media="(min-width: 0)" srcset={leadspaceImg}></DDSImageItem>
-        </DDSBackgroundMedia>
+        <C4DBackgroundMedia default-src={defaultSrc} alt={alt} opacity="100">
+          <C4DImageItem
+            media="(min-width: 672px)"
+            srcset={leadspaceImg}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width: 0)"
+            srcset={leadspaceImg}></C4DImageItem>
+        </C4DBackgroundMedia>
       )}
       {hasVideo && (
-        <DDSBackgroundMedia mobilePosition="bottom" opacity="100">
-          <DDSVideoPlayerContainer video-id="1_9h94wo6b" background-mode="true"></DDSVideoPlayerContainer>
-        </DDSBackgroundMedia>
+        <C4DBackgroundMedia mobilePosition="bottom" opacity="100">
+          <C4DVideoPlayerContainer
+            video-id="0_ibuqxqbe"
+            background-mode="true"></C4DVideoPlayerContainer>
+        </C4DBackgroundMedia>
       )}
-    </DDSLeadspace>
+    </C4DLeadspace>
   );
 };
 
-export const Tall = context => Default(context);
+export const Tall = (context) => Default(context);
 Tall.story = {
   parameters: {
     knobs: {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.NONE,
         hasImage: false,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
             renderIcon: iconMap[icon],
             label: getAriaLabel(icon),
+            typeStyle: select(
+              'Type style',
+              typeStyleOptions,
+              'display-01'
+            ),
           };
         }),
       }),
@@ -152,7 +190,7 @@ Tall.story = {
   },
 };
 
-export const TallWithImage = context => Default(context);
+export const TallWithImage = (context) => Default(context);
 TallWithImage.story = {
   name: 'Tall with image',
   parameters: {
@@ -160,19 +198,33 @@ TallWithImage.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.NONE,
         hasImage: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
             renderIcon: iconMap[icon],
             label: getAriaLabel(icon),
+            typeStyle: select(
+              'Type style',
+              typeStyleOptions,
+              'display-01'
+            ),
           };
         }),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
@@ -181,7 +233,7 @@ TallWithImage.story = {
   },
 };
 
-export const TallWithVideo = context => Default(context);
+export const TallWithVideo = (context) => Default(context);
 TallWithVideo.story = {
   name: 'Tall with video',
   parameters: {
@@ -189,19 +241,33 @@ TallWithVideo.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.NONE,
         hasVideo: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
             renderIcon: iconMap[icon],
             label: getAriaLabel(icon),
+            typeStyle: select(
+              'Type style',
+              typeStyleOptions,
+              'display-01'
+            ),
           };
         }),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
@@ -210,26 +276,40 @@ TallWithVideo.story = {
   },
 };
 
-export const Medium = context => Default(context);
+export const Medium = (context) => Default(context);
 
 Medium.story = {
   parameters: {
     knobs: {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.MEDIUM,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
             renderIcon: iconMap[icon],
             label: getAriaLabel(icon),
+            typeStyle: select(
+              'Type style',
+              typeStyleOptions,
+              'display-01'
+            ),
           };
         }),
       }),
@@ -237,7 +317,7 @@ Medium.story = {
   },
 };
 
-export const MediumWithImage = context => Default(context);
+export const MediumWithImage = (context) => Default(context);
 
 MediumWithImage.story = {
   name: 'Medium with image',
@@ -246,14 +326,23 @@ MediumWithImage.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.MEDIUM,
         hasImage: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
@@ -262,12 +351,17 @@ MediumWithImage.story = {
           };
         }),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
+        typeStyle: select(
+          'Type style',
+          typeStyleOptions,
+          'display-01'
+        ),
       }),
     },
   },
 };
 
-export const MediumWithVideo = context => Default(context);
+export const MediumWithVideo = (context) => Default(context);
 
 MediumWithVideo.story = {
   name: 'Medium with video',
@@ -276,14 +370,23 @@ MediumWithVideo.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.MEDIUM,
         hasVideo: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
@@ -292,30 +395,51 @@ MediumWithVideo.story = {
           };
         }),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
+        typeStyle: select(
+          'Type style',
+          typeStyleOptions,
+          'display-01'
+        ),
       }),
     },
   },
 };
 
-export const Short = args => {
-  const { alt, defaultSrc, hasImage, hasVideo, navElements, size, title, type } = args?.Leadspace ?? {};
+export const Short = (args) => {
+  const {
+    alt,
+    defaultSrc,
+    hasImage,
+    hasVideo,
+    navElements,
+    size,
+    title,
+    type,
+    highlight, typeStyle 
+  } = args?.Leadspace ?? {};
   return (
-    <DDSLeadspace size={size} type={type} {...(hasImage ? { alt } : {})}>
+    <C4DLeadspace size={size} type={type} {...(hasImage ? { alt } : {})}>
       {navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       {navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <DDSLeadspaceHeading>{title}</DDSLeadspaceHeading>
+      <C4DLeadspaceHeading highlight={highlight} type-style={typeStyle}>{title}</C4DLeadspaceHeading>
       {hasImage && (
-        <DDSBackgroundMedia default-src={defaultSrc} alt={alt} opacity="100">
-          <DDSImageItem media="(min-width: 672px)" srcset={leadspaceImg}></DDSImageItem>
-          <DDSImageItem media="(min-width: 0)" srcset={leadspaceImg}></DDSImageItem>
-        </DDSBackgroundMedia>
+        <C4DBackgroundMedia default-src={defaultSrc} alt={alt} opacity="100">
+          <C4DImageItem
+            media="(min-width: 672px)"
+            srcset={leadspaceImg}></C4DImageItem>
+          <C4DImageItem
+            media="(min-width: 0)"
+            srcset={leadspaceImg}></C4DImageItem>
+        </C4DBackgroundMedia>
       )}
       {hasVideo && (
-        <DDSBackgroundMedia mobilePosition="bottom" opacity="100">
-          <DDSVideoPlayerContainer video-id="1_9h94wo6b" background-mode="true"></DDSVideoPlayerContainer>
-        </DDSBackgroundMedia>
+        <C4DBackgroundMedia mobilePosition="bottom" opacity="100">
+          <C4DVideoPlayerContainer
+            video-id="0_ibuqxqbe"
+            background-mode="true"></C4DVideoPlayerContainer>
+        </C4DBackgroundMedia>
       )}
-    </DDSLeadspace>
+    </C4DLeadspace>
   );
 };
 
@@ -324,14 +448,21 @@ Short.story = {
     knobs: {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.SHORT,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
-        title: text('title (title)', 'A short headline can go on multiple lines in this leadspace'),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
+        title: text(
+          'title (title)',
+          'A short headline can go on multiple lines in this leadspace'
+        ),
       }),
     },
   },
 };
 
-export const ShortWithImage = context => Short(context);
+export const ShortWithImage = (context) => Short(context);
 
 ShortWithImage.story = {
   name: 'Short with image',
@@ -340,16 +471,28 @@ ShortWithImage.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.SHORT,
         hasImage: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
-        title: text('title (title)', 'A short headline can go on multiple lines in this leadspace'),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
+        title: text(
+          'title (title)',
+          'A short headline can go on multiple lines in this leadspace'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
+        typeStyle: select(
+          'Type style',
+          typeStyleOptions,
+          'display-01'
+        ),
       }),
     },
   },
 };
 
-export const ShortWithVideo = context => Short(context);
+export const ShortWithVideo = (context) => Short(context);
 
 ShortWithVideo.story = {
   name: 'Short with video',
@@ -358,10 +501,22 @@ ShortWithVideo.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.SHORT,
         hasVideo: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
-        title: text('title (title)', 'A short headline can go on multiple lines in this leadspace'),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
+        title: text(
+          'title (title)',
+          'A short headline can go on multiple lines in this leadspace'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
+        typeStyle: select(
+          'Type style',
+          typeStyleOptions,
+          'display-01'
+        ),
       }),
     },
   },
@@ -454,26 +609,40 @@ CenteredWithVideo.story = {
   },
 };
 
-export const Super = context => Tall(context);
+export const Super = (context) => Tall(context);
 
 Super.story = {
   parameters: {
     knobs: {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.SUPER,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
             renderIcon: iconMap[icon],
             label: getAriaLabel(icon),
+            typeStyle: select(
+              'Type style',
+              typeStyleOptions,
+              'display-01'
+            ),
           };
         }),
       }),
@@ -481,7 +650,7 @@ Super.story = {
   },
 };
 
-export const SuperWithImage = context => Tall(context);
+export const SuperWithImage = (context) => Tall(context);
 
 SuperWithImage.story = {
   name: 'Super with image',
@@ -490,14 +659,23 @@ SuperWithImage.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.SUPER,
         hasImage: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
@@ -505,13 +683,18 @@ SuperWithImage.story = {
             label: getAriaLabel(icon),
           };
         }),
+        typeStyle: select(
+          'Type style',
+          typeStyleOptions,
+          'display-01'
+        ),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
       }),
     },
   },
 };
 
-export const SuperWithVideo = context => Tall(context);
+export const SuperWithVideo = (context) => Tall(context);
 
 SuperWithVideo.story = {
   name: 'Super with video',
@@ -520,14 +703,23 @@ SuperWithVideo.story = {
       Leadspace: () => ({
         size: LEADSPACE_SIZE.SUPER,
         hasVideo: true,
-        navElements: select('navigation elements (optional)', navigationOptions, navigationOptions[2]),
+        navElements: select(
+          'navigation elements (optional)',
+          navigationOptions,
+          navigationOptions[2]
+        ),
         title: text('title (title)', 'Heading can go on two lines max'),
-        copy: text('copy (copy)', 'Use this area for a short line of copy to support the title'),
+        copy: text(
+          'copy (copy)',
+          'Use this area for a short line of copy to support the title'
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         buttons: Array.from({
           length: number('Number of buttons', 2, {}),
         }).map((_, i) => {
-          const icon = select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ?? 0;
+          const icon =
+            select(`Icon ${i + 1}`, iconOptions, iconOptions['Arrow Right']) ??
+            0;
           return {
             href: text(`Link ${i + 1}`, `https://example.com`),
             copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
@@ -536,6 +728,11 @@ SuperWithVideo.story = {
           };
         }),
         defaultSrc: text('Default image (defaultSrc)', leadspaceImg),
+        typeStyle: select(
+          'Type style',
+          typeStyleOptions,
+          'display-01'
+        ),
       }),
     },
   },
@@ -544,8 +741,8 @@ SuperWithVideo.story = {
 export default {
   title: 'Components/Leadspace',
   decorators: [
-    story => {
-      return <div className="bx--grid bx--no-gutter">{story()}</div>;
+    (story) => {
+      return <div className="cds--grid cds--no-gutter">{story()}</div>;
     },
   ],
   parameters: {
diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
index 8e5f1322e96..218bed8d98c 100644
--- a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
+++ b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
@@ -8,11 +8,11 @@
  */
 
 import { text, select, number } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import ArrowDown20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--down/20.js';
 import Pdf20 from '../../../internal/vendor/@carbon/web-components/icons/PDF/20.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../index';
@@ -24,60 +24,65 @@ import readme from './README.stories.mdx';
 import leadspaceImg from '../../../../../storybook-images/assets/leadspace/leadspaceMax.jpg';
 import { LEADSPACE_SIZE } from '../defs';
 
-const navigationOptions = [
-  'with Tag group (using Tag link)',
-  'with Breadcrumbs',
-  'none',
-];
+const navigationOptions = ['with a group of Tags', 'with Breadcrumbs', 'none'];
 
 const gradientOptions = {
   'With Gradient': 'with-gradient',
   'No Gradient': '',
 };
 
+const typeStyleOptions = {
+  'Display 01': 'display-01',
+  'Fluid heading 05': 'fluid-heading-05',
+};
+
 const navigationWithTagGroup = html`
-  <dds-tag-group slot="navigation">
-    <dds-tag-link href="https://example.com">Marketing Analytics</dds-tag-link>
-    <dds-tag-link href="https://example.com">Cloud</dds-tag-link>
-  </dds-tag-group>
+  <div slot="navigation">
+    <cds-tag href="https://example.com">Marketing Analytics</cds-tag>
+    <cds-tag href="https://example.com">Cloud</cds-tag>
+  </div>
 `;
 
 const navigationWithBreadcrumbs = html`
-  <dds-breadcrumb slot="navigation">
-    <dds-breadcrumb-item>
-      <dds-breadcrumb-link href="/#">Breadcrumb 1</dds-breadcrumb-link>
-    </dds-breadcrumb-item>
-    <dds-breadcrumb-item>
-      <dds-breadcrumb-link href="/#">Breadcrumb 2</dds-breadcrumb-link>
-    </dds-breadcrumb-item>
-    <dds-breadcrumb-item>
-      <dds-breadcrumb-link href="/#" aria-current="page"
-        >Breadcrumb 3</dds-breadcrumb-link
+  <c4d-breadcrumb slot="navigation">
+    <c4d-breadcrumb-item>
+      <c4d-breadcrumb-link href="/#">Breadcrumb 1</c4d-breadcrumb-link>
+    </c4d-breadcrumb-item>
+    <c4d-breadcrumb-item>
+      <c4d-breadcrumb-link href="/#">Breadcrumb 2</c4d-breadcrumb-link>
+    </c4d-breadcrumb-item>
+    <c4d-breadcrumb-item>
+      <c4d-breadcrumb-link href="/#" aria-current="page"
+        >Breadcrumb 3</c4d-breadcrumb-link
       >
-    </dds-breadcrumb-item>
-  </dds-breadcrumb>
+    </c4d-breadcrumb-item>
+  </c4d-breadcrumb>
 `;
 
 export const Super = (args) => {
-  const { title, copy, buttons, navElements } = args?.LeadSpace ?? {};
+  const { title, copy, buttons, navElements, highlight, typeStyle } =
+    args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace size="${LEADSPACE_SIZE.SUPER}">
+    <c4d-leadspace size="${LEADSPACE_SIZE.SUPER}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-    </dds-leadspace>
+      </c4d-button-group>
+    </c4d-leadspace>
   `;
 };
 
@@ -90,44 +95,49 @@ export const SuperWithImage = (args) => {
     copy,
     buttons,
     navElements,
+    highlight,
+    typeStyle,
   } = args?.LeadSpace ?? {};
   const image = defaultSrc || leadspaceImg;
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.SUPER}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media
+      </c4d-button-group>
+      <c4d-background-media
         slot="image"
-        alt="${ifNonNull(alt)}"
+        alt="${ifDefined(alt)}"
         default-src="${defaultSrc}"
         opacity="100">
-        <dds-image-item media="(min-width: 1312px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${image}">
-        </dds-image-item>
-      </dds-background-media>
-    </dds-leadspace>
+        <c4d-image-item media="(min-width: 1312px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${image}">
+        </c4d-image-item>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -144,34 +154,39 @@ export const SuperWithVideo = (args) => {
     copy,
     buttons,
     navElements,
+    highlight,
+    typeStyle,
   } = args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.SUPER}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media slot="image" opacity="100">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
-          background-mode="true"></dds-video-player-container>
-      </dds-background-media>
-    </dds-leadspace>
+      </c4d-button-group>
+      <c4d-background-media slot="image" opacity="100">
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"
+          background-mode="true"></c4d-video-player-container>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -180,25 +195,29 @@ SuperWithVideo.story = {
 };
 
 export const Tall = (args) => {
-  const { title, copy, buttons, navElements } = args?.LeadSpace ?? {};
+  const { title, copy, buttons, navElements, highlight, typeStyle } =
+    args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace size="${LEADSPACE_SIZE.TALL}">
+    <c4d-leadspace size="${LEADSPACE_SIZE.TALL}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-    </dds-leadspace>
+      </c4d-button-group>
+    </c4d-leadspace>
   `;
 };
 
@@ -211,44 +230,49 @@ export const TallWithImage = (args) => {
     copy,
     buttons,
     navElements,
+    highlight,
+    typeStyle,
   } = args?.LeadSpace ?? {};
   const image = defaultSrc || leadspaceImg;
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.TALL}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media
+      </c4d-button-group>
+      <c4d-background-media
         slot="image"
-        alt="${ifNonNull(alt)}"
+        alt="${ifDefined(alt)}"
         default-src="${defaultSrc}"
         opacity="100">
-        <dds-image-item media="(min-width: 1312px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${image}">
-        </dds-image-item>
-      </dds-background-media>
-    </dds-leadspace>
+        <c4d-image-item media="(min-width: 1312px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${image}">
+        </c4d-image-item>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -265,34 +289,39 @@ export const TallWithVideo = (args) => {
     copy,
     buttons,
     navElements,
+    highlight,
+    typeStyle,
   } = args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.TALL}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media slot="image" opacity="100">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
-          background-mode="true"></dds-video-player-container>
-      </dds-background-media>
-    </dds-leadspace>
+      </c4d-button-group>
+      <c4d-background-media slot="image" opacity="100">
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"
+          background-mode="true"></c4d-video-player-container>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -301,25 +330,29 @@ TallWithVideo.story = {
 };
 
 export const Medium = (args) => {
-  const { title, copy, buttons, navElements } = args?.LeadSpace ?? {};
+  const { title, copy, buttons, navElements, highlight, typeStyle } =
+    args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace size="${LEADSPACE_SIZE.MEDIUM}">
+    <c4d-leadspace size="${LEADSPACE_SIZE.MEDIUM}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-    </dds-leadspace>
+      </c4d-button-group>
+    </c4d-leadspace>
   `;
 };
 
@@ -332,44 +365,49 @@ export const MediumWithImage = (args) => {
     copy,
     buttons,
     navElements,
+    highlight,
+    typeStyle,
   } = args?.LeadSpace ?? {};
   const image = defaultSrc || leadspaceImg;
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.MEDIUM}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media
+      </c4d-button-group>
+      <c4d-background-media
         slot="image"
-        alt="${ifNonNull(alt)}"
+        alt="${ifDefined(alt)}"
         default-src="${defaultSrc}"
         opacity="100">
-        <dds-image-item media="(min-width: 1312px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${image}">
-        </dds-image-item>
-      </dds-background-media>
-    </dds-leadspace>
+        <c4d-image-item media="(min-width: 1312px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${image}">
+        </c4d-image-item>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -386,34 +424,39 @@ export const MediumWithVideo = (args) => {
     copy,
     buttons,
     navElements,
+    highlight,
+    typeStyle,
   } = args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.MEDIUM}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
+              cta-type="local"
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media slot="image" opacity="100">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
-          background-mode="true"></dds-video-player-container>
-      </dds-background-media>
-    </dds-leadspace>
+      </c4d-button-group>
+      <c4d-background-media slot="image" opacity="100">
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"
+          background-mode="true"></c4d-video-player-container>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -422,13 +465,15 @@ MediumWithVideo.story = {
 };
 
 export const Short = (args) => {
-  const { title, navElements } = args?.LeadSpace ?? {};
+  const { title, navElements, highlight, typeStyle } = args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace size="${LEADSPACE_SIZE.SHORT}">
+    <c4d-leadspace size="${LEADSPACE_SIZE.SHORT}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-    </dds-leadspace>
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+    </c4d-leadspace>
   `;
 };
 
@@ -451,7 +496,7 @@ Short.story = {
       default: {
         LeadSpace: {
           navElements: navigationOptions[2],
-          title: 'Heading can go on two lines max',
+          title: 'Heading can go to two lines max',
         },
       },
     },
@@ -459,33 +504,42 @@ Short.story = {
 };
 
 export const ShortWithImage = (args) => {
-  const { alt, defaultSrc, gradientStyleScheme, title, navElements } =
-    args?.LeadSpace ?? {};
+  const {
+    alt,
+    defaultSrc,
+    gradientStyleScheme,
+    title,
+    navElements,
+    highlight,
+    typeStyle,
+  } = args?.LeadSpace ?? {};
   const image = defaultSrc || leadspaceImg;
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.SHORT}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      <dds-background-media
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      <c4d-background-media
         slot="image"
-        alt="${ifNonNull(alt)}"
+        alt="${ifDefined(alt)}"
         default-src="${defaultSrc}"
         opacity="100">
-        <dds-image-item media="(min-width: 1312px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${image}">
-        </dds-image-item>
-      </dds-background-media>
-    </dds-leadspace>
+        <c4d-image-item media="(min-width: 1312px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${image}">
+        </c4d-image-item>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -521,23 +575,32 @@ ShortWithImage.story = {
 };
 
 export const ShortWithVideo = (args) => {
-  const { alt, defaultSrc, gradientStyleScheme, title, navElements } =
-    args?.LeadSpace ?? {};
+  const {
+    alt,
+    defaultSrc,
+    gradientStyleScheme,
+    title,
+    navElements,
+    highlight,
+    typeStyle,
+  } = args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.SHORT}"
-      gradient-style-scheme="${ifNonNull(gradientStyleScheme)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}">
+      gradient-style-scheme="${ifDefined(gradientStyleScheme)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      <dds-background-media slot="image" opacity="100">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
-          background-mode="true"></dds-video-player-container>
-      </dds-background-media>
-    </dds-leadspace>
+      <c4d-leadspace-heading type-style="${typeStyle}" highlight=${highlight}
+        >${ifDefined(title)}</c4d-leadspace-heading
+      >
+      <c4d-background-media slot="image" opacity="100">
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"
+          background-mode="true"></c4d-video-player-container>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -548,23 +611,23 @@ ShortWithVideo.story = {
 export const Centered = (args) => {
   const { title, copy, buttons, navElements } = args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace size="${LEADSPACE_SIZE.NONE}" type="centered">
+    <c4d-leadspace size="${LEADSPACE_SIZE.NONE}" type="centered">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading>${ifDefined(title)}</c4d-leadspace-heading>
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}${elem.renderIcon}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-    </dds-leadspace>
+      </c4d-button-group>
+    </c4d-leadspace>
   `;
 };
 
@@ -573,42 +636,42 @@ export const CenteredWithImage = (args) => {
     args?.LeadSpace ?? {};
   const image = defaultSrc || leadspaceImg;
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.NONE}"
-      ?gradient="${ifNonNull(gradient)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}"
+      ?gradient="${ifDefined(gradient)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}"
       type="centered">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading>${ifDefined(title)}</c4d-leadspace-heading>
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}${elem.renderIcon}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media
+      </c4d-button-group>
+      <c4d-background-media
         slot="image"
-        alt="${ifNonNull(alt)}"
+        alt="${ifDefined(alt)}"
         default-src="${defaultSrc}"
         opacity="100">
-        <dds-image-item media="(min-width: 1312px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 672px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 320px)" srcset="${image}">
-        </dds-image-item>
-        <dds-image-item media="(min-width: 0px)" srcset="${image}">
-        </dds-image-item>
-      </dds-background-media>
-    </dds-leadspace>
+        <c4d-image-item media="(min-width: 1312px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 672px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 320px)" srcset="${image}">
+        </c4d-image-item>
+        <c4d-image-item media="(min-width: 0px)" srcset="${image}">
+        </c4d-image-item>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -620,33 +683,33 @@ export const CenteredWithVideo = (args) => {
   const { alt, defaultSrc, gradient, title, copy, buttons, navElements } =
     args?.LeadSpace ?? {};
   return html`
-    <dds-leadspace
+    <c4d-leadspace
       size="${LEADSPACE_SIZE.NONE}"
-      ?gradient="${ifNonNull(gradient)}"
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}"
+      ?gradient="${ifDefined(gradient)}"
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}"
       type="centered">
       ${navElements === navigationOptions[0] ? navigationWithTagGroup : ``}
       ${navElements === navigationOptions[1] ? navigationWithBreadcrumbs : ``}
-      <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
-      ${ifNonNull(copy)}
-      <dds-button-group slot="action">
+      <c4d-leadspace-heading>${ifDefined(title)}</c4d-leadspace-heading>
+      ${ifDefined(copy)}
+      <c4d-button-group slot="action">
         ${buttons.map((elem) => {
           return html`
-            <dds-button-group-item
+            <c4d-button-group-item
               aria-label="${elem.label}"
               href="${elem.href}"
-              >${elem.copy}${elem.renderIcon}</dds-button-group-item
+              >${elem.copy}${elem.renderIcon}</c4d-button-group-item
             >
           `;
         })}
-      </dds-button-group>
-      <dds-background-media slot="image" opacity="100">
-        <dds-video-player-container
-          video-id="1_9h94wo6b"
-          background-mode="true"></dds-video-player-container>
-      </dds-background-media>
-    </dds-leadspace>
+      </c4d-button-group>
+      <c4d-background-media slot="image" opacity="100">
+        <c4d-video-player-container
+          video-id="0_ibuqxqbe"
+          background-mode="true"></c4d-video-player-container>
+      </c4d-background-media>
+    </c4d-leadspace>
   `;
 };
 
@@ -681,7 +744,7 @@ const iconOptions = {
 export default {
   title: 'Components/Lead space',
   decorators: [
-    (story) => html` <div class="bx--grid bx--no-gutter">${story()}</div> `,
+    (story) => html` <div class="cds--grid cds--no-gutter">${story()}</div> `,
   ],
   parameters: {
     ...readme.parameters,
@@ -694,7 +757,7 @@ export default {
           navigationOptions,
           navigationOptions[2]
         ),
-        title: text('title (title):', 'Heading can go on two lines max'),
+        title: text('title (title):', 'Heading can go to two lines max'),
         copy: text(
           'copy (copy):',
           'Use this area for a short line of copy to support the title'
@@ -707,16 +770,21 @@ export default {
             0;
           return {
             href: textNullable(`Link ${i + 1}`, `https://example.com`),
-            copy: text(`Button ${i + 1}`, `Button ${i + 1}`),
+            copy: text(
+              `Button ${i + 1}`,
+              `${i % 2 == 0 ? 'Primary action' : 'Secondary Action'}`
+            ),
             renderIcon: iconMap[icon],
             label: getAriaLabel(icon),
           };
         }),
+        highlight: text('Highlight:', ''),
         gradientStyleScheme: select(
           'Gradient (gradient-style-scheme)',
           gradientOptions,
           'with-gradient'
         ),
+        typeStyle: select('Type style', typeStyleOptions, 'display-01'),
         alt: text('Image alt text (alt):', 'Image alt text'),
         defaultSrc: text('Default image (defaultSrc):', leadspaceImg),
       }),
@@ -725,18 +793,18 @@ export default {
       default: {
         LeadSpace: {
           navElements: navigationOptions[2],
-          title: 'Heading can go on two lines max',
+          title: 'Heading can go to two lines max',
           copy: 'Use this area for a short line of copy to support the title',
           buttons: [
             {
               href: 'https://example.com',
-              copy: 'Button 1',
+              copy: 'Primary action',
               renderIcon: iconOptions['Arrow Right'],
               label: '',
             },
             {
               href: 'https://example.com',
-              copy: 'Button 2',
+              copy: 'Secondary action',
               renderIcon: iconOptions['Arrow Right'],
               label: '',
             },
diff --git a/packages/web-components/src/components/leadspace/__tests__/leadspace.test.ts b/packages/web-components/src/components/leadspace/__tests__/leadspace.test.ts
index b26c86d7de9..dd0163c49ec 100644
--- a/packages/web-components/src/components/leadspace/__tests__/leadspace.test.ts
+++ b/packages/web-components/src/components/leadspace/__tests__/leadspace.test.ts
@@ -1,19 +1,17 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../leadspace';
 import {
   Tall,
   TallWithImage,
-  Centered,
-  CenteredWithImage,
   Medium,
   MediumWithImage,
 } from '../__stories__/leadspace.stories';
@@ -52,40 +50,6 @@ const TallWithImageTemplate = (props?) =>
     },
   });
 
-const CenteredTemplate = (props?) =>
-  Centered({
-    LeadSpace: {
-      ...props,
-      buttons: [
-        {
-          href: 'https://example.com',
-          copy: 'button 1',
-        },
-        {
-          href: 'https://example.com',
-          copy: 'button 2',
-        },
-      ],
-    },
-  });
-
-const CenteredWithImageTemplate = (props?) =>
-  CenteredWithImage({
-    LeadSpace: {
-      ...props,
-      buttons: [
-        {
-          href: 'https://example.com',
-          copy: 'button 1',
-        },
-        {
-          href: 'https://example.com',
-          copy: 'button 2',
-        },
-      ],
-    },
-  });
-
 const MediumTemplate = (props?) =>
   Medium({
     LeadSpace: {
@@ -120,12 +84,12 @@ const MediumWithImageTemplate = (props?) =>
     },
   });
 
-describe('dds-leadspace', function () {
+describe('c4d-leadspace', function () {
   describe('Misc attributes - TallWithNoImage', function () {
     it('should render with minimum attributes', async function () {
       render(TallTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -139,8 +103,8 @@ describe('dds-leadspace', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -149,8 +113,8 @@ describe('dds-leadspace', function () {
   describe('Misc attributes - TallWithImage', function () {
     it('should render with minimum attributes', async function () {
       render(TallWithImageTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -167,89 +131,8 @@ describe('dds-leadspace', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-  });
-
-  describe('Misc attributes - Centered', function () {
-    it('should render with minimum attributes', async function () {
-      render(CenteredTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        CenteredTemplate({
-          title: 'Lead space title',
-          copy: 'Use this area for a short line of copy to support the title',
-          gradient: true,
-        }),
-        document.body
-      );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-  });
-
-  describe('Misc attributes - CenteredWithImage', function () {
-    it('should render with minimum attributes', async function () {
-      render(CenteredWithImageTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        CenteredWithImageTemplate({
-          title: 'Lead space title',
-          copy: 'Use this area for a short line of copy to support the title',
-          gradient: true,
-          alt: 'alt text',
-          defaultSrc:
-            'http://fpoimg.com/1056x480?bg_color=ee5396&text_color=161616',
-        }),
-        document.body
-      );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-  });
-
-  describe('Misc attributes - CenteredWithImage', function () {
-    it('should render with minimum attributes', async function () {
-      render(CenteredWithImageTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        CenteredWithImageTemplate({
-          title: 'Lead space title',
-          copy: 'Use this area for a short line of copy to support the title',
-          gradient: true,
-          alt: 'alt text',
-          defaultSrc:
-            'http://fpoimg.com/1056x480?bg_color=ee5396&text_color=161616',
-        }),
-        document.body
-      );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -258,8 +141,8 @@ describe('dds-leadspace', function () {
   describe('Misc attributes - Medium', function () {
     it('should render with minimum attributes', async function () {
       render(MediumTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -273,8 +156,8 @@ describe('dds-leadspace', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -283,8 +166,8 @@ describe('dds-leadspace', function () {
   describe('Misc attributes - MediumWithImage', function () {
     it('should render with minimum attributes', async function () {
       render(MediumWithImageTemplate(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -301,8 +184,8 @@ describe('dds-leadspace', function () {
         }),
         document.body
       );
-      await Promise.resolve(); // Update cycle for `<dds-leadspace>`
-      expect(document.body.querySelector('dds-leadspace')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-leadspace>`
+      expect(document.body.querySelector('c4d-leadspace')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/leadspace/breadcrumb-item.ts b/packages/web-components/src/components/leadspace/breadcrumb-item.ts
index a18fec1bcb0..7a1f22ac4cd 100644
--- a/packages/web-components/src/components/leadspace/breadcrumb-item.ts
+++ b/packages/web-components/src/components/leadspace/breadcrumb-item.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXBreadcrumbItem from '../../internal/vendor/@carbon/web-components/components/breadcrumb/breadcrumb-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSBreadcrumbItem from '../../internal/vendor/@carbon/web-components/components/breadcrumb/breadcrumb-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Breadcrumb item.
  *
- * @element dds-breadcrumb-item
+ * @element c4d-breadcrumb-item
  */
-@customElement(`${ddsPrefix}-breadcrumb-item`)
-class DDSBreadcrumbItem extends StableSelectorMixin(BXBreadcrumbItem) {
+@customElement(`${c4dPrefix}-breadcrumb-item`)
+class C4DBreadcrumbItem extends StableSelectorMixin(CDSBreadcrumbItem) {
   // `styles` here is a `CSSResult` generated by custom WebPack loader
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSBreadcrumbItem;
+export default C4DBreadcrumbItem;
diff --git a/packages/web-components/src/components/leadspace/breadcrumb-link.ts b/packages/web-components/src/components/leadspace/breadcrumb-link.ts
index 8d3bfa25b86..4b02eeddc99 100644
--- a/packages/web-components/src/components/leadspace/breadcrumb-link.ts
+++ b/packages/web-components/src/components/leadspace/breadcrumb-link.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXBreadcrumbLink from '../../internal/vendor/@carbon/web-components/components/breadcrumb/breadcrumb-link.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSBreadcrumbLink from '../../internal/vendor/@carbon/web-components/components/breadcrumb/breadcrumb-link.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Breadcrumb link.
  *
- * @element dds-breadcrumb-link
+ * @element c4d-breadcrumb-link
  */
-@customElement(`${ddsPrefix}-breadcrumb-link`)
-class DDSBreadcrumbLink extends StableSelectorMixin(BXBreadcrumbLink) {
+@customElement(`${c4dPrefix}-breadcrumb-link`)
+class C4DBreadcrumbLink extends StableSelectorMixin(CDSBreadcrumbLink) {
   // `styles` here is a `CSSResult` generated by custom WebPack loader
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSBreadcrumbLink;
+export default C4DBreadcrumbLink;
diff --git a/packages/web-components/src/components/leadspace/breadcrumb.ts b/packages/web-components/src/components/leadspace/breadcrumb.ts
index 363e9c98615..43490be2687 100644
--- a/packages/web-components/src/components/leadspace/breadcrumb.ts
+++ b/packages/web-components/src/components/leadspace/breadcrumb.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXBreadcrumb from '../../internal/vendor/@carbon/web-components/components/breadcrumb/breadcrumb.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSBreadcrumb from '../../internal/vendor/@carbon/web-components/components/breadcrumb/breadcrumb.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Breadcrumb.
  *
- * @element dds-breadcrumb
+ * @element c4d-breadcrumb
  */
-@customElement(`${ddsPrefix}-breadcrumb`)
-class DDSBreadcrumb extends StableSelectorMixin(BXBreadcrumb) {
+@customElement(`${c4dPrefix}-breadcrumb`)
+class C4DBreadcrumb extends StableSelectorMixin(CDSBreadcrumb) {
   // `styles` here is a `CSSResult` generated by custom WebPack loader
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSBreadcrumb;
+export default C4DBreadcrumb;
diff --git a/packages/web-components/src/components/leadspace/index.ts b/packages/web-components/src/components/leadspace/index.ts
index 9deaa728931..0d415578554 100644
--- a/packages/web-components/src/components/leadspace/index.ts
+++ b/packages/web-components/src/components/leadspace/index.ts
@@ -16,5 +16,3 @@ import '../image/image-item';
 import './leadspace';
 import './leadspace-heading';
 import './leadspace-image';
-import '../tag-group/tag-group';
-import '../tag-link/tag-link';
diff --git a/packages/web-components/src/components/leadspace/leadspace-heading.ts b/packages/web-components/src/components/leadspace/leadspace-heading.ts
index af0008ad0b5..7b98d5150cd 100644
--- a/packages/web-components/src/components/leadspace/leadspace-heading.ts
+++ b/packages/web-components/src/components/leadspace/leadspace-heading.ts
@@ -7,31 +7,42 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, LitElement } from 'lit-element';
-import { stripHTML } from '@carbon/ibmdotcom-utilities/es/utilities/stripHTML/index.js';
-import { render } from 'lit-html';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './leadspace.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content of leadspace.
  *
- * @element dds-leadspace-heading
+ * @element c4d-leadspace-heading
  */
-@customElement(`${ddsPrefix}-leadspace-heading`)
-class DDSLeadspaceHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-leadspace-heading`)
+class C4DLeadspaceHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this heading content should be in.
    */
   @property({ reflect: true })
   slot = 'heading';
 
-  @state()
-  content = '';
+  /**
+   * The shadow slot this heading content should be in.
+   */
+  @property({ reflect: true })
+  highlight = '';
+
+  /**
+   * The type style that can be used for the heading.
+   */
+  @property({ reflect: true, attribute: 'type-style' })
+  typeStyle = 'display-01';
+
+  @property()
+  content;
 
   connectedCallback() {
     if (!this.hasAttribute('role')) {
@@ -43,9 +54,27 @@ class DDSLeadspaceHeading extends StableSelectorMixin(LitElement) {
     super.connectedCallback();
   }
 
-  firstUpdated() {
-    this.content = stripHTML(this.innerHTML);
-    render(html`<h1>${this.content}</h1>`, this);
+  updated(changedProperties) {
+    const textContent = this.innerText;
+    const h1 = document.createElement('h1');
+    h1.textContent = textContent;
+
+    if (changedProperties.has('highlight') && this.highlight) {
+      const index = textContent!.indexOf(this.highlight);
+
+      if (index !== -1) {
+        const beforeSubstring = textContent!.substring(0, index);
+        const modifiedText = document.createElement('span');
+        modifiedText.textContent = this.highlight;
+        const afterSubstring = textContent!.substring(
+          index + this.highlight.length
+        );
+
+        this.replaceChildren(beforeSubstring, modifiedText, afterSubstring, h1);
+      }
+    } else {
+      this.replaceChildren(textContent, h1);
+    }
   }
 
   render() {
@@ -53,7 +82,7 @@ class DDSLeadspaceHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace-heading`;
+    return `${c4dPrefix}--leadspace-heading`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -61,4 +90,4 @@ class DDSLeadspaceHeading extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceHeading;
+export default C4DLeadspaceHeading;
diff --git a/packages/web-components/src/components/leadspace/leadspace-image.ts b/packages/web-components/src/components/leadspace/leadspace-image.ts
index e4df548f6e0..4dd82e6f5c9 100644
--- a/packages/web-components/src/components/leadspace/leadspace-image.ts
+++ b/packages/web-components/src/components/leadspace/leadspace-image.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSImage from '../image/image';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DImage from '../image/image';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leadspace.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 /**
  * Custom leadspace image.
  *
- * @element dds-leadspace-image
+ * @element c4d-leadspace-image
  */
-@customElement(`${ddsPrefix}-leadspace-image`)
-class DDSLeadspaceImage extends StableSelectorMixin(DDSImage) {
+@customElement(`${c4dPrefix}-leadspace-image`)
+class C4DLeadspaceImage extends StableSelectorMixin(C4DImage) {
   static get stableSelector() {
-    return `${ddsPrefix}--image`;
+    return `${c4dPrefix}--image`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -35,4 +35,4 @@ class DDSLeadspaceImage extends StableSelectorMixin(DDSImage) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadspaceImage;
+export default C4DLeadspaceImage;
diff --git a/packages/web-components/src/components/leadspace/leadspace.scss b/packages/web-components/src/components/leadspace/leadspace.scss
index e417ecfc935..112f661c846 100644
--- a/packages/web-components/src/components/leadspace/leadspace.scss
+++ b/packages/web-components/src/components/leadspace/leadspace.scss
@@ -5,75 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/leadspace/leadspace';
-@import '@carbon/web-components/scss/components/breadcrumb/breadcrumb';
-
-:host(#{$dds-prefix}-leadspace) {
-  display: block;
-  position: relative;
-
-  &::before {
-    content: '';
-    opacity: 0;
-    position: absolute;
-    width: 100%;
-    height: 100%;
-    z-index: -1;
-    background: linear-gradient(270deg, #c6c6c6, #a8a8a8);
-    background-size: 100% 100%;
-    animation: loadingAnimation 2000ms ease infinite;
-    transition: all 800ms cubic-bezier(0.4, 0.14, 0.3, 1);
-  }
-
-  &[loading] {
-    &::before {
-      z-index: 5;
-      opacity: 1;
-    }
-  }
-
-  ::slotted(#{$dds-prefix}-background-media) {
-    height: auto;
-    aspect-ratio: 4 / 3; /* stylelint-disable-line property-no-unknown */
-
-    @include carbon--breakpoint(lg) {
-      position: absolute;
-      inset: 0;
-      height: 100%;
-      aspect-ratio: auto; /* stylelint-disable-line property-no-unknown */
-    }
-  }
-}
-
-:host(#{$dds-prefix}-breadcrumb) {
-  @extend :host(#{$prefix}-breadcrumb);
-
-  padding-bottom: $spacing-05;
-}
-
-:host(#{$dds-prefix}-breadcrumb-item) {
-  @extend :host(#{$prefix}-breadcrumb-item);
-
-  display: inline;
-}
-
-:host(#{$dds-prefix}-breadcrumb-item:last-of-type)::after {
-  @extend :host(#{$prefix}-breadcrumb-item:last-of-type)::after;
-}
-
-:host(#{$dds-prefix}-breadcrumb-link) {
-  @extend :host(#{$prefix}-breadcrumb-link);
-}
-
-@keyframes loadingAnimation {
-  0% {
-    background-position: 0% 50%;
-  }
-  50% {
-    background-position: 100% 50%;
-  }
-  100% {
-    background-position: 0% 50%;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/leadspace';
+@use '../../../../carbon-web-components/src/components/breadcrumb/breadcrumb';
diff --git a/packages/web-components/src/components/leadspace/leadspace.ts b/packages/web-components/src/components/leadspace/leadspace.ts
index bfd8be0ed72..5a0467dd179 100644
--- a/packages/web-components/src/components/leadspace/leadspace.ts
+++ b/packages/web-components/src/components/leadspace/leadspace.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, svg, property, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html, LitElement, svg } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import {
   LEADSPACE_TYPE,
   LEADSPACE_GRADIENT_STYLE_SCHEME,
@@ -22,21 +22,20 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { LEADSPACE_TYPE, LEADSPACE_GRADIENT_STYLE_SCHEME, LEADSPACE_SIZE };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The LeadSpace component.
  *
- * @element dds-leadspace
+ * @element c4d-leadspace
  * @slot action The action (CTA) content.
  * @slot image The image content.
  * @csspart section The first DOM node inside the shadow-root
  */
-@customElement(`${ddsPrefix}-leadspace`)
-class DDSLeadSpace extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-leadspace`)
+class C4DLeadSpace extends StableSelectorMixin(LitElement) {
   /**
-   * Handler for @slotchange, ensure that the only element being rendered is DDSTagGroup
+   * Handler for @slotchange, ensure that the only element being rendered is C4DTagGroup
    *
    * @private
    */
@@ -46,8 +45,8 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
     childItems.filter(
       (elem) =>
         (elem as HTMLElement).matches?.(
-          (this.constructor as typeof DDSLeadSpace).tagGroupSelector
-        ) || (this.constructor as typeof DDSLeadSpace).breadcrumbSelector
+          (this.constructor as typeof C4DLeadSpace).tagGroupSelector
+        ) || (this.constructor as typeof C4DLeadSpace).breadcrumbSelector
     );
   }
 
@@ -56,8 +55,8 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
    */
   protected _getGradientClass() {
     return classMap({
-      [`${prefix}--leadspace--gradient`]: this.defaultSrc,
-      [`${prefix}--leadspace__overlay`]: true,
+      [`${c4dPrefix}--leadspace--gradient`]: this.defaultSrc,
+      [`${c4dPrefix}--leadspace__overlay`]: true,
     });
   }
 
@@ -66,11 +65,13 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
    */
   protected _getTypeClass() {
     return classMap({
-      [`${prefix}--leadspace--centered`]: this.type === LEADSPACE_TYPE.CENTERED,
-      [`${prefix}--leadspace--centered__image`]:
+      [`${c4dPrefix}--leadspace--centered`]:
+        this.type === LEADSPACE_TYPE.CENTERED,
+      [`${c4dPrefix}--leadspace--centered__image`]:
         this.type === LEADSPACE_TYPE.CENTERED && this.defaultSrc,
-      [`${prefix}--leadspace--productive`]: this.type === LEADSPACE_TYPE.SMALL,
-      [`${prefix}--leadspace__section`]: true,
+      [`${c4dPrefix}--leadspace--productive`]:
+        this.type === LEADSPACE_TYPE.SMALL,
+      [`${c4dPrefix}--leadspace__section`]: true,
     });
   }
 
@@ -80,10 +81,10 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
   protected _renderCopy() {
     const { copy } = this;
     return html`
-      <div class="${prefix}--leadspace__row">
+      <div class="${c4dPrefix}--leadspace__row">
         <p
-          data-autoid="${ddsPrefix}--leadspace__desc"
-          class="${prefix}--leadspace__desc">
+          data-autoid="${c4dPrefix}--leadspace__desc"
+          class="${c4dPrefix}--leadspace__desc">
           <slot>${copy}</slot>
         </p>
       </div>
@@ -143,33 +144,40 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
   firstUpdated() {
     Array.from(this.children).forEach((child) => {
       if (
-        (child.tagName === 'DDS-BACKGROUND-MEDIA' ||
-          child.tagName === 'DDS-LEADSPACE-IMAGE') &&
+        (child.tagName === 'C4D-BACKGROUND-MEDIA' ||
+          child.tagName === 'C4D-LEADSPACE-IMAGE') &&
         child.slot === ''
       ) {
         child.slot = 'image';
       }
     });
+
+    if (this.size === 'short') {
+      this.querySelector('c4d-leadspace-heading')?.setAttribute(
+        'type-style',
+        'fluid-heading-05'
+      );
+    }
   }
 
   render() {
     const { gradientStyleScheme, type, size } = this;
     return html`
       <section class="${this._getTypeClass()}" part="section">
-        <div class="${prefix}--leadspace__container">
+        <div class="${c4dPrefix}--leadspace__container">
           <div class="${this._getGradientClass()}">
             ${gradientStyleScheme === LEADSPACE_GRADIENT_STYLE_SCHEME.NONE
               ? undefined
               : svg`
                 <svg
-                  class="${prefix}--leadspace__gradient"
+                  class="${c4dPrefix}--leadspace__gradient"
                   viewBox="0 0 100 100"
                   preserveAspectRatio="none"
                   xmlns="http://www.w3.org/2000/svg"
                   xmlns:xlink="http://www.w3.org/1999/xlink"
                 >
                   <defs>
-                    <linearGradient id="stops" class="${prefix}--leadspace__gradient__stops" gradientTransform="${
+                    <linearGradient id="stops" class="${c4dPrefix}--leadspace__gradient__stops" gradientTransform="${
                   type === LEADSPACE_TYPE.CENTERED ? 'rotate(90)' : ''
                 }">
                       ${
@@ -189,11 +197,11 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
                       }
                     </linearGradient>
                   </defs>
-                  <rect class="${prefix}--leadspace__gradient__rect" width="100" height="100" />
+                  <rect class="${c4dPrefix}--leadspace__gradient__rect" width="100" height="100" />
                 </svg>
               `}
-            <div class="${prefix}--leadspace--content__container">
-              <div class="${prefix}--leadspace__row">
+            <div class="${c4dPrefix}--leadspace--content__container">
+              <div class="${c4dPrefix}--leadspace__row">
                 <slot
                   name="navigation"
                   @slotchange="${this._handleSlotChange}"></slot>
@@ -201,9 +209,9 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
               </div>
               ${size !== LEADSPACE_SIZE.SHORT
                 ? html`
-                    <div class="${prefix}--leadspace__content">
+                    <div class="${c4dPrefix}--leadspace__content">
                       ${this._renderCopy()}
-                      <div class="${prefix}--leadspace__action">
+                      <div class="${c4dPrefix}--leadspace__action">
                         <slot name="action"></slot>
                       </div>
                     </div>
@@ -222,19 +230,19 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
   }
 
   static get headingSelector() {
-    return `${ddsPrefix}-leadspace-heading`;
+    return `${c4dPrefix}-leadspace-heading`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leadspace`;
+    return `${c4dPrefix}--leadspace`;
   }
 
   static get tagGroupSelector() {
-    return `${ddsPrefix}-tag-group`;
+    return `div`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeadSpace;
+export default C4DLeadSpace;
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx
index e8bb84e408b..739dfd95b9e 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.mdx
@@ -1,9 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
 # Leaving IBM
 
 > 💡 Check our
@@ -30,28 +33,35 @@ import '@carbon/ibmdotcom-web-components/es/components/leaving-ibm/index';
 
 ```html
 <!-- Add component to document -->
-<dds-leaving-ibm-container></dds-leaving-ibm-container>
+<cds-leaving-ibm-container></cds-leaving-ibm-container>
 
 ...
 
 <!-- Trigger modal on click -->
-<dds-link-with-icon href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/" data-leaving-ibm>
+<cds-link-with-icon
+  href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
+  data-leaving-ibm>
   Learn more about the Carbon Design System
-</dds-link-with-icon>
+</cds-link-with-icon>
 ```
 
-> 💡 Give your link the `data-leaving-ibm` attribute to trigger the modal on click. Alternatively, you can use the [custom events available to the modal](https://web-components.carbondesignsystem.com/?path=/docs/components-modal--default#bx-modal-attributes-and-properties) to create custom triggering behavior.
+> 💡 Give your link the `data-leaving-ibm` attribute to trigger the modal on
+> click. Alternatively, you can use the
+> [custom events available to the modal](https://web-components.carbondesignsystem.com/?path=/docs/components-modal--default#cds-modal-attributes-and-properties)
+> to create custom triggering behavior.
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<dds-leaving-ibm-modal>` | `data-autoid="dds--leaving-ibm-modal"` | Component   |
-| `dds--leaving-ibm-cta`    | `data-autoid="dds--leaving-ibm-cta"`   | Interactive |
+| `<cds-leaving-ibm-modal>` | `data-autoid="cds--leaving-ibm-modal"` | Component   |
+| `cds--leaving-ibm-cta`    | `data-autoid="cds--leaving-ibm-cta"`   | Interactive |
 
 ## Props
 
-<Props of="dds-leaving-ibm-composite" />
+<Props of="cds-leaving-ibm-composite" />
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx
index b5526d94204..a613d7aeabd 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-composite.js';
 
@@ -16,44 +21,50 @@ Here's a quick example to get you started.
 
 ### JS
 
-> 💡 `Provider` is only in the context of the example, and can be swapped out with other implementations based on the application setup.
+> 💡 `Provider` is only in the context of the example, and can be swapped out
+> with other implementations based on the application setup.
 
 ```javascript
-import DDSLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 import Launch20 from '@carbon/icons-react/es/launch/20';
 
 function App() {
   return (
     // Add component to
-    <DDSLeavingIBMContainer />
+    <C4DLeavingIBMContainer />
 
     ...
 
     // Trigger modal on click
-    <DDSLinkWithIcon iconPlacement="right" href={href} data-leaving-ibm>
+    <C4DLinkWithIcon iconPlacement="right" href={href} data-leaving-ibm>
       Learn more about the Carbon Design System
       <Launch20 slot="icon" />
-    </DDSLinkWithIcon>
+    </C4DLinkWithIcon>
   );
 }
 ```
 
-> 💡 Give your link the `data-leaving-ibm` attribute to trigger the modal on click. Alternatively, you can use the [custom events available to the modal](https://web-components.carbondesignsystem.com/?path=/docs/components-modal--default#bx-modal-attributes-and-properties) to create custom triggering behavior.
+> 💡 Give your link the `data-leaving-ibm` attribute to trigger the modal on
+> click. Alternatively, you can use the
+> [custom events available to the modal](https://web-components.carbondesignsystem.com/?path=/docs/components-modal--default#cds-modal-attributes-and-properties)
+> to create custom triggering behavior.
 
 ## Props
 
-### `<DDSLeavingIbmComposite>`
+### `<C4DLeavingIbmComposite>`
 
 <Props of={PropTypesRef} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector                 | Description |
 | ------------------------- | -------------------------------------- | ----------- |
-| `<dds-leaving-ibm-modal>` | `data-autoid="dds--leaving-ibm-modal"` | Component   |
-| `dds--leaving-ibm-cta`    | `data-autoid="dds--leaving-ibm-cta"`   | Interactive |
+| `<cds-leaving-ibm-modal>` | `data-autoid="cds--leaving-ibm-modal"` | Component   |
+| `cds--leaving-ibm-cta`    | `data-autoid="cds--leaving-ibm-cta"`   | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx
index 93ffeb799a6..6837556166a 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.react.tsx
@@ -12,58 +12,62 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
-import DDSButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
-import DDSCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
-import DDSFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
-import DDSFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DButtonGroup from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group';
+import C4DButtonGroupItem from '@carbon/ibmdotcom-web-components/es/components-react/button-group/button-group-item';
+import C4DCardLink from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
+import C4DFeatureCard from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card';
+import C4DFeatureCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/feature-card/feature-card-footer';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
 import Launch20 from '@carbon/icons-react/es/launch/20';
-import DDSLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container';
+import C4DLeavingIBMContainer from '@carbon/ibmdotcom-web-components/es/components-react/leaving-ibm/leaving-ibm-container';
 import mediumImgLg1x1 from '../../../../../storybook-images/assets/720/fpo--1x1--720x720--004.jpg';
 import readme from './README.stories.react.mdx';
 import styles from './leaving-ibm.stories.scss';
 
-export const Default = args => {
+export const Default = (args) => {
   const { href, ctaText, ctaType } = args?.LeavingIBM ?? {};
   return (
     <>
-      <DDSLeavingIBMContainer />
+      <C4DLeavingIBMContainer />
       {ctaType === 'Link' ? (
-        <DDSLinkWithIcon iconPlacement="right" href={href} data-leaving-ibm>
+        <C4DLinkWithIcon iconPlacement="right" href={href} data-leaving-ibm>
           {ctaText}
           <Launch20 slot="icon" />
-        </DDSLinkWithIcon>
+        </C4DLinkWithIcon>
       ) : null}
       {ctaType === 'Button' ? (
-        <DDSButtonGroup>
-          <DDSButtonGroupItem href={href} data-leaving-ibm>
+        <C4DButtonGroup>
+          <C4DButtonGroupItem href={href} data-leaving-ibm>
             {ctaText}
             <Launch20 slot="icon" />
-          </DDSButtonGroupItem>
-        </DDSButtonGroup>
+          </C4DButtonGroupItem>
+        </C4DButtonGroup>
       ) : null}
       {ctaType === 'Card' ? (
-        <DDSCardLink href={href} data-leaving-ibm>
-          <DDSCardLinkHeading>{ctaText}</DDSCardLinkHeading>
+        <C4DCardLink href={href} data-leaving-ibm>
+          <C4DCardLinkHeading>{ctaText}</C4DCardLinkHeading>
           <p>Lorem ipsum dolor sit</p>
-          <DDSCardFooter>
+          <C4DCardFooter>
             <Launch20 slot="icon" />
-          </DDSCardFooter>
-        </DDSCardLink>
+          </C4DCardFooter>
+        </C4DCardLink>
       ) : null}
       {ctaType === 'Feature Card' ? (
-        <DDSFeatureCard href={href} data-leaving-ibm>
-          <DDSImage slot="image" alt="Image alt text" default-src={mediumImgLg1x1} />
-          <DDSCardHeading>{ctaText}</DDSCardHeading>
-          <DDSFeatureCardFooter>
+        <C4DFeatureCard href={href} data-leaving-ibm>
+          <C4DImage
+            slot="image"
+            alt="Image alt text"
+            default-src={mediumImgLg1x1}
+          />
+          <C4DCardHeading>{ctaText}</C4DCardHeading>
+          <C4DFeatureCardFooter>
             <Launch20 slot="icon" />
-          </DDSFeatureCardFooter>
-        </DDSFeatureCard>
+          </C4DFeatureCardFooter>
+        </C4DFeatureCard>
       ) : null}
     </>
   );
@@ -76,7 +80,10 @@ Default.story = {
     knobs: {
       LeavingIBM: () => ({
         ctaText: text('CTA text', 'Learn more about Carbon'),
-        href: text('href (href)', 'https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/'),
+        href: text(
+          'href (href)',
+          'https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/'
+        ),
         ctaType: select('CTA type:', ctaTypes, ctaTypes[0]),
       }),
     },
@@ -86,12 +93,14 @@ Default.story = {
 export default {
   title: 'Components/Leaving IBM',
   decorators: [
-    story => (
+    (story) => (
       <>
         <style type="text/css">{styles.cssText}</style>
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-sm-4 cds--col-lg-8 cds--no-gutter">
+              {story()}
+            </div>
           </div>
         </div>
       </>
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.scss b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.scss
index 6753d62b986..1a956c3a031 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.scss
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.scss
@@ -5,6 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-.dds-ce-demo-devenv--container {
+.cds-ce-demo-devenv--container {
   padding: 0;
 }
diff --git a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.ts b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.ts
index 8296b207274..da73c530d84 100644
--- a/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.ts
+++ b/packages/web-components/src/components/leaving-ibm/__stories__/leaving-ibm.stories.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { text, select } from '@storybook/addon-knobs';
 import Launch20 from '../../../internal/vendor/@carbon/web-components/icons/launch/20.js';
 import styles from './leaving-ibm.stories.scss';
@@ -22,48 +22,48 @@ import readme from './README.stories.mdx';
 export const Default = (args) => {
   const { href, ctaText, ctaType } = args?.['leaving-ibm'] ?? {};
   return html`
-    <dds-leaving-ibm-container></dds-leaving-ibm-container>
+    <c4d-leaving-ibm-container></c4d-leaving-ibm-container>
 
     ${ctaType === 'Link'
       ? html`
-          <dds-link-with-icon
+          <c4d-link-with-icon
             icon-placement="right"
             href="${href}"
             data-leaving-ibm>
             ${ctaText}${Launch20({ slot: 'icon' })}
-          </dds-link-with-icon>
+          </c4d-link-with-icon>
         `
       : null}
     ${ctaType === 'Button'
       ? html`
-          <dds-button-group>
-            <dds-button-group-item href="${href}" data-leaving-ibm>
+          <c4d-button-group>
+            <c4d-button-group-item href="${href}" data-leaving-ibm>
               ${ctaText}${Launch20({ slot: 'icon' })}
-            </dds-button-group-item>
-          </dds-button-group>
+            </c4d-button-group-item>
+          </c4d-button-group>
         `
       : null}
     ${ctaType === 'Card'
       ? html`
-          <dds-card-link href="${href}" data-leaving-ibm>
-            <dds-card-link-heading>${ctaText}</dds-card-link-heading>
+          <c4d-card-link href="${href}" data-leaving-ibm>
+            <c4d-card-link-heading>${ctaText}</c4d-card-link-heading>
             <p>Lorem ipsum dolor sit</p>
-            <dds-card-footer> ${Launch20({ slot: 'icon' })} </dds-card-footer>
-          </dds-card-link>
+            <c4d-card-footer> ${Launch20({ slot: 'icon' })} </c4d-card-footer>
+          </c4d-card-link>
         `
       : null}
     ${ctaType === 'Feature Card'
       ? html`
-          <dds-feature-card href="${href}" data-leaving-ibm>
-            <dds-image
+          <c4d-feature-card href="${href}" data-leaving-ibm>
+            <c4d-image
               slot="image"
               alt="Image alt text"
-              default-src="${mediumImgLg1x1}"></dds-image>
-            <dds-card-heading>${ctaText}</dds-card-heading>
-            <dds-feature-card-footer>
+              default-src="${mediumImgLg1x1}"></c4d-image>
+            <c4d-card-heading>${ctaText}</c4d-card-heading>
+            <c4d-feature-card-footer>
               ${Launch20({ slot: 'icon' })}
-            </dds-feature-card-footer>
-          </dds-feature-card>
+            </c4d-feature-card-footer>
+          </c4d-feature-card>
         `
       : null}
   `;
@@ -78,9 +78,11 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--col-lg-8 cds--no-gutter">
+            ${story()}
+          </div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm-composite.test.ts b/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm-composite.test.ts
index a127c6874f6..9c45e4c7605 100644
--- a/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm-composite.test.ts
+++ b/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm-composite.test.ts
@@ -1,25 +1,25 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
-import DDSLeavingIbmComposite from '../leaving-ibm-composite';
+import { html, render } from 'lit/html.js';
+import C4DLeavingIbmComposite from '../leaving-ibm-composite';
 import '../leaving-ibm-composite';
 
 const template = (props?) => {
   const { open, href } = props ?? {};
   return html`
-    <dds-leaving-ibm-composite ?open=${open} href="${href}">
-    </dds-leaving-ibm-composite>
+    <c4d-leaving-ibm-composite ?open=${open} href="${href}">
+    </c4d-leaving-ibm-composite>
   `;
 };
 
-describe('dds-leaving-ibm-composite', function () {
+describe('c4d-leaving-ibm-composite', function () {
   it('should render modal body', async function () {
     render(
       template({ open: true, href: 'http://www.example.com' }),
@@ -29,8 +29,8 @@ describe('dds-leaving-ibm-composite', function () {
 
     expect(
       document.querySelector(
-        'dds-leaving-ibm-composite'
-      ) as DDSLeavingIbmComposite
+        'c4d-leaving-ibm-composite'
+      ) as C4DLeavingIbmComposite
     ).toMatchSnapshot();
   });
 
diff --git a/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm.steps.js b/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm.steps.js
index 7b16003a5c0..3e748be1d59 100644
--- a/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm.steps.js
+++ b/packages/web-components/src/components/leaving-ibm/__tests__/leaving-ibm.steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('dds-leaving-ibm-*', () => {
+describe('cds-leaving-ibm-*', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}iframe.html?id=components-leaving-ibm--default`
@@ -15,9 +15,9 @@ describe('dds-leaving-ibm-*', () => {
   });
 
   it('should have modal closable', async () => {
-    await page.click('bx-modal-close-button button');
+    await page.click('cds-modal-close-button button');
     await expect(page).toHaveSelector(
-      'dds-leaving-ibm-modal .bx--modal-container',
+      'cds-leaving-ibm-modal .cds--modal-container',
       { state: 'hidden' }
     );
   });
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts
index d13c5351953..ca17e5763f0 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-composite.ts
@@ -7,11 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import BXModal from '../../internal/vendor/@carbon/web-components/components/modal/modal.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSModal from '../../internal/vendor/@carbon/web-components/components/modal/modal.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import {
   LeavingIBMLabels,
   Translation,
@@ -28,15 +29,15 @@ import '../../internal/vendor/@carbon/web-components/components/button/button.js
 import styles from './leaving-ibm.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Component that renders leaving IBM modal component.
  *
- * @element dds-leaving-ibm-composite
+ * @element c4d-leaving-ibm-composite
  */
-@customElement(`${ddsPrefix}-leaving-ibm-composite`)
-class DDSLeavingIbmComposite extends HostListenerMixin(
+@customElement(`${c4dPrefix}-leaving-ibm-composite`)
+class C4DLeavingIbmComposite extends HostListenerMixin(
   ModalRenderMixin(LitElement)
 ) {
   /**
@@ -90,7 +91,7 @@ class DDSLeavingIbmComposite extends HostListenerMixin(
   @HostListener('document:click')
   protected _handleDocumentClick = (event: PointerEvent): void => {
     const { attributeLeaving } = this
-      .constructor as typeof DDSLeavingIbmComposite;
+      .constructor as typeof C4DLeavingIbmComposite;
     if (!this.open) {
       const { target } = event;
       const linkTarget =
@@ -114,7 +115,7 @@ class DDSLeavingIbmComposite extends HostListenerMixin(
     }
   };
 
-  @HostListener(`document:${BXModal.eventClose}`)
+  @HostListener(`document:${CDSModal.eventClose}`)
   protected handleEventClose = (): void => {
     this.open = false;
     this.href = '';
@@ -140,28 +141,28 @@ class DDSLeavingIbmComposite extends HostListenerMixin(
   renderModal() {
     const { open, leavingIbmCopy, leavingIbmButtonLabel, href } = this;
     return html`
-      <dds-leaving-ibm-modal ?open="${open}">
-        <bx-modal-header>
-          <bx-modal-close-button></bx-modal-close-button>
-          <dds-leaving-ibm-modal-heading
-            >${leavingIbmCopy?.LEAVING001}</dds-leaving-ibm-modal-heading
+      <c4d-leaving-ibm-modal ?open="${open}">
+        <cds-modal-header>
+          <cds-modal-close-button></cds-modal-close-button>
+          <c4d-leaving-ibm-modal-heading
+            >${leavingIbmCopy?.LEAVING001}</c4d-leaving-ibm-modal-heading
           >
-        </bx-modal-header>
-        <dds-leaving-ibm-modal-body href="${href}">
+        </cds-modal-header>
+        <c4d-leaving-ibm-modal-body href="${href}">
           <p>${leavingIbmCopy?.LEAVING002}</p>
-          <dds-leaving-ibm-modal-supplemental
-            >${leavingIbmCopy?.LEAVING003}</dds-leaving-ibm-modal-supplemental
+          <c4d-leaving-ibm-modal-supplemental
+            >${leavingIbmCopy?.LEAVING003}</c4d-leaving-ibm-modal-supplemental
           >
-        </dds-leaving-ibm-modal-body>
-        <bx-modal-footer>
-          <bx-btn
-            data-autoid="${ddsPrefix}--leaving-ibm-cta"
+        </c4d-leaving-ibm-modal-body>
+        <cds-modal-footer>
+          <cds-button
+            data-autoid="${c4dPrefix}--leaving-ibm-cta"
             href="${href}"
             kind="primary"
-            >${leavingIbmButtonLabel}</bx-btn
+            >${leavingIbmButtonLabel}</cds-button
           >
-        </bx-modal-footer>
-      </dds-leaving-ibm-modal>
+        </cds-modal-footer>
+      </c4d-leaving-ibm-modal>
     `;
   }
 
@@ -176,4 +177,4 @@ class DDSLeavingIbmComposite extends HostListenerMixin(
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeavingIbmComposite;
+export default C4DLeavingIbmComposite;
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-connect.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-connect.ts
index 5accae1d9e8..ef86db16779 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-connect.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-connect.ts
@@ -19,7 +19,7 @@ import { TranslateAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-ser
 import { setLanguage } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI';
 
 /**
- * The Redux state used for `<dds-leaving-ibm-container>`.
+ * The Redux state used for `<c4d-leaving-ibm-container>`.
  */
 export interface LeavingIbmContainerState {
   /**
@@ -34,7 +34,7 @@ export interface LeavingIbmContainerState {
 }
 
 /**
- * The properties for `<dds-leaving-ibm-container>` from Redux state.
+ * The properties for `<c4d-leaving-ibm-container>` from Redux state.
  */
 export interface LeavingIbmContainerStateProps {
   /**
@@ -49,7 +49,7 @@ export interface LeavingIbmContainerStateProps {
 }
 
 /**
- * The Redux actions used for `<dds-leaving-ibm-container>`.
+ * The Redux actions used for `<c4d-leaving-ibm-container>`.
  */
 export type LeavingIbmContainerActions =
   | ReturnType<typeof setLanguage>
@@ -57,7 +57,7 @@ export type LeavingIbmContainerActions =
 
 /**
  * @param state The Redux state for leaving ibm component.
- * @returns The converted version of the given state, tailored for `<dds-leaving-ibm-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-leaving-ibm-container>`.
  */
 export function mapStateToProps(
   state: LeavingIbmContainerState
@@ -75,7 +75,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-masthead-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-masthead-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(dispatch: Dispatch<TranslateAPIActions>) {
   return bindActionCreators<
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-container.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-container.ts
index 644f9f6c653..8ee3ee58a63 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-container.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-container.ts
@@ -8,7 +8,7 @@
  */
 
 import { ActionCreatorsMapObject, Store } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import { LocaleAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI.d';
 import { TranslateAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/translateAPI.d';
@@ -20,18 +20,18 @@ import {
   LeavingIbmContainerStateProps,
   LeavingIbmContainerActions,
 } from './leaving-ibm-connect';
-import DDSLeavingIbmComposite from './leaving-ibm-composite';
+import C4DLeavingIbmComposite from './leaving-ibm-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Container component for masthead search.
  *
- * @element dds-leaving-ibm-container
+ * @element c4d-leaving-ibm-container
  */
-@customElement(`${ddsPrefix}-leaving-ibm-container`)
-class DDSLeavingIbmContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-leaving-ibm-container`)
+class C4DLeavingIbmContainer extends ConnectMixin<
   LeavingIbmContainerState,
   LocaleAPIActions | TranslateAPIActions,
   LeavingIbmContainerStateProps,
@@ -43,7 +43,7 @@ class DDSLeavingIbmContainer extends ConnectMixin<
   >,
   mapStateToProps,
   mapDispatchToProps
-)(DDSLeavingIbmComposite) {}
+)(C4DLeavingIbmComposite) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeavingIbmContainer;
+export default C4DLeavingIbmContainer;
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts
index 2ce3016ef2e..4073269c684 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-body.ts
@@ -7,24 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import BXModalBody from '../../internal/vendor/@carbon/web-components/components/modal/modal-body.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSModalBody from '../../internal/vendor/@carbon/web-components/components/modal/modal-body.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import styles from './leaving-ibm.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Leaving IBM Modal body.
  *
- * @element dds-leaving-ibm-modal-body
+ * @element c4d-leaving-ibm-modal-body
  */
-@customElement(`${ddsPrefix}-leaving-ibm-modal-body`)
-class DDSLeavingIbmModalBody extends StableSelectorMixin(BXModalBody) {
+@customElement(`${c4dPrefix}-leaving-ibm-modal-body`)
+class C4DLeavingIbmModalBody extends StableSelectorMixin(CDSModalBody) {
   /**
    * external url triggering the leaving ibm modal.
    */
@@ -36,18 +37,18 @@ class DDSLeavingIbmModalBody extends StableSelectorMixin(BXModalBody) {
     return html`
       <p><slot></slot></p>
       <slot name="supplemental"></slot>
-      <bx-link size="lg" href="${ifNonNull(href)}"
-        >${!href ? href : new URL(href).hostname}</bx-link
+      <cds-link size="lg" href="${ifDefined(href)}"
+        >${!href ? href : new URL(href).hostname}</cds-link
       >
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leaving-ibm-modal-body`;
+    return `${c4dPrefix}--leaving-ibm-modal-body`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeavingIbmModalBody;
+export default C4DLeavingIbmModalBody;
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-heading.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-heading.ts
index c223ce4b12f..c2c491501c7 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-heading.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-heading.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXModalHeading from '../../internal/vendor/@carbon/web-components/components/modal/modal-heading.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSModalHeading from '../../internal/vendor/@carbon/web-components/components/modal/modal-heading.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './leaving-ibm.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Leaving Ibm modal heading.
  *
- * @element dds-leaving-ibm-modal-heading
+ * @element c4d-leaving-ibm-modal-heading
  */
-@customElement(`${ddsPrefix}-leaving-ibm-modal-heading`)
-class DDSLeavingIbmModalHeading extends StableSelectorMixin(BXModalHeading) {
+@customElement(`${c4dPrefix}-leaving-ibm-modal-heading`)
+class C4DLeavingIbmModalHeading extends StableSelectorMixin(CDSModalHeading) {
   connectedCallback() {
     if (!this.hasAttribute('role')) {
       this.setAttribute('role', 'heading');
@@ -33,11 +33,11 @@ class DDSLeavingIbmModalHeading extends StableSelectorMixin(BXModalHeading) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leaving-ibm-modal-heading`;
+    return `${c4dPrefix}--leaving-ibm-modal-heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeavingIbmModalHeading;
+export default C4DLeavingIbmModalHeading;
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts
index 70d65c1759f..5b62e10134b 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal-supplemental.ts
@@ -6,21 +6,22 @@
  * 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 { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './leaving-ibm.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The supplemental content of leaving IBM modal.
  *
- * @element dds-leaving-ibm-modal-supplemental
+ * @element c4d-leaving-ibm-modal-supplemental
  */
-@customElement(`${ddsPrefix}-leaving-ibm-modal-supplemental`)
-class DDSLeavingIbmModalSupplemental extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-leaving-ibm-modal-supplemental`)
+class C4DLeavingIbmModalSupplemental extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this supplemental content should be in.
    */
@@ -32,7 +33,7 @@ class DDSLeavingIbmModalSupplemental extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--leaving-ibm-modal-supplemental`;
+    return `${c4dPrefix}--leaving-ibm-modal-supplemental`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -40,4 +41,4 @@ class DDSLeavingIbmModalSupplemental extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeavingIbmModalSupplemental;
+export default C4DLeavingIbmModalSupplemental;
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal.ts b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal.ts
index d5798a87753..777e336bbc1 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal.ts
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm-modal.ts
@@ -7,29 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXModal, {
+import { property } from 'lit/decorators.js';
+import CDSModal, {
   MODAL_SIZE,
 } from '../../internal/vendor/@carbon/web-components/components/modal/modal.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './leaving-ibm.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Leaving IBM Modal.
  *
- * @element dds-leaving-ibm-modal
+ * @element c4d-leaving-ibm-modal
  */
-@customElement(`${ddsPrefix}-leaving-ibm-modal`)
-class DDSLeavingIbmModal extends StableSelectorMixin(BXModal) {
+@customElement(`${c4dPrefix}-leaving-ibm-modal`)
+class C4DLeavingIbmModal extends StableSelectorMixin(CDSModal) {
   /**
    * The unique ID for ID ref.
    */
-  private _uniqueId = `__${ddsPrefix}-leaving-ibm-modal__${Math.random()
+  private _uniqueId = `__${c4dPrefix}-leaving-ibm-modal__${Math.random()
     .toString(36)
     .slice(2)}`;
 
@@ -41,7 +41,7 @@ class DDSLeavingIbmModal extends StableSelectorMixin(BXModal) {
   @HostListener('shadowRoot:slotchange')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleSlotChange = (event: Event) => {
-    const { selectorHeading } = this.constructor as typeof DDSLeavingIbmModal;
+    const { selectorHeading } = this.constructor as typeof C4DLeavingIbmModal;
     if (!this.hasAttribute('aria-labelledby')) {
       const headingNode = (event.target as HTMLSlotElement)
         .assignedNodes()
@@ -84,15 +84,15 @@ class DDSLeavingIbmModal extends StableSelectorMixin(BXModal) {
    * A selector selecting the heading.
    */
   static get selectorHeading() {
-    return `${ddsPrefix}-leaving-ibm-modal-heading`;
+    return `${c4dPrefix}-leaving-ibm-modal-heading`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 
   static get stableSelector() {
-    return `${ddsPrefix}--leaving-ibm-modal`;
+    return `${c4dPrefix}--leaving-ibm-modal`;
   }
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLeavingIbmModal;
+export default C4DLeavingIbmModal;
diff --git a/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss b/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss
index 71c50e1c4f0..0a852af8de0 100644
--- a/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss
+++ b/packages/web-components/src/components/leaving-ibm/leaving-ibm.scss
@@ -1,46 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/web-components/scss/components/modal/modal';
-
-:host(#{$dds-prefix}-leaving-ibm-composite),
-:host(#{$dds-prefix}-leaving-ibm-container) {
-  width: 100%;
-}
-
-:host(#{$dds-prefix}-leaving-ibm-modal) {
-  @extend :host(#{$prefix}-modal);
-
-  max-height: 100%;
-
-  &[open] {
-    @extend :host(#{$prefix}-modal[open]);
-  }
-}
-
-:host(#{$dds-prefix}-leaving-ibm-modal-heading) {
-  @include carbon--type-style('expressive-heading-04');
-}
-
-:host(#{$dds-prefix}-leaving-ibm-modal-body) {
-  @extend :host(#{$prefix}-modal-body);
-
-  padding-right: 20%;
-
-  ::slotted(#{$dds-prefix}-leaving-ibm-modal-supplemental),
-  ::slotted(slot[name='supplemental']) {
-    display: block;
-    margin-top: $spacing-07;
-    color: $text-02;
-    @include carbon--type-style('label-02');
-  }
-
-  > p {
-    padding-right: 0;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/leaving-ibm';
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx
index cf06e612c88..168aa97dd1d 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.mdx
@@ -1,11 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import '../lightbox-video-player';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Lightbox Media Viewer
 
 > This launches a modal containing an image or video, and a description
@@ -30,17 +32,19 @@ document.getElementById('my-lightbox').open = true;
 
 ### Dialog labeling
 
-The expressive modal anticipates content within the `header` slot to be used as the accessible aria label for the dialog box. Even if a design does not call for the modal to have content in the title slot, it is _required_ for accessibility. The header can be visually hidden using the `.bx--visually-hidden` or `.bx--assistive-text` classes. This will prevent the text from rendering on the screen, but will still be announced to assistive technology users.
+The expressive modal anticipates content within the `header` slot to be used as
+the accessible aria label for the dialog box. Even if a design does not call for
+the modal to have content in the title slot, it is _required_ for accessibility.
+The header can be visually hidden using the `.cds--visually-hidden` or
+`.cds--assistive-text` classes. This will prevent the text from rendering on the
+screen, but will still be announced to assistive technology users.
 
 ```html
-<dds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-  <span class="bx--visually-hidden" slot="header">Dialog box label text</span>
-  <dds-lightbox-media-viewer
-    ...
-  >
-  </dds-lightbox-media-viewer>
-</dds-expressive-modal>
+<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+  <span class="cds--visually-hidden" slot="header">Dialog box label text</span>
+  <cds-lightbox-media-viewer ...> </cds-lightbox-media-viewer>
+</cds-expressive-modal>
 ```
 
 ## Using Images
@@ -48,16 +52,15 @@ The expressive modal anticipates content within the `header` slot to be used as
 ### HTML
 
 ```html
-<dds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-  <dds-lightbox-media-viewer
+<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+  <cds-lightbox-media-viewer
     alt="Image alt text"
     default-src="https://fpoimg.com/1280x720?text=16:9&bg_color=ee5396&text_color=161616"
     description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit."
-    title="Curabitur malesuada varius mi eu posuere"
-  >
-  </dds-lightbox-media-viewer>
-</dds-expressive-modal>
+    title="Curabitur malesuada varius mi eu posuere">
+  </cds-lightbox-media-viewer>
+</cds-expressive-modal>
 ```
 
 ## Using Videos
@@ -65,10 +68,12 @@ The expressive modal anticipates content within the `header` slot to be used as
 ### HTML
 
 ```html
-<dds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-  <dds-lightbox-media-viewer id="my-video" video-id="1_9h94wo6b"></dds-lightbox-media-viewer>
-</dds-expressive-modal>
+<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+  <cds-lightbox-media-viewer
+    id="my-video"
+    video-id="0_ibuqxqbe"></cds-lightbox-media-viewer>
+</cds-expressive-modal>
 ```
 
 ## Viewing multiple images/videos
@@ -76,31 +81,33 @@ The expressive modal anticipates content within the `header` slot to be used as
 ### HTML
 
 ```html
-<dds-expressive-modal id="my-lightbox" expressive-size="full-width">
-  <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-  <dds-carousel>
-    <dds-lightbox-media-viewer ... ></dds-lightbox-media-viewer>
-    <dds-lightbox-media-viewer ... ></dds-lightbox-media-viewer>
-    <dds-lightbox-media-viewer ... ></dds-lightbox-media-viewer>
-    <dds-lightbox-media-viewer ... ></dds-lightbox-media-viewer>
-  </dds-carousel>
-</dds-expressive-modal>
+<cds-expressive-modal id="my-lightbox" expressive-size="full-width">
+  <cds-expressive-modal-close-button></cds-expressive-modal-close-button>
+  <cds-carousel>
+    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
+    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
+    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
+    <cds-lightbox-media-viewer ...></cds-lightbox-media-viewer>
+  </cds-carousel>
+</cds-expressive-modal>
 ```
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                                | Compatibility selector                                     | Description |
 | ------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
-| `<dds-expressive-modal>`                               | `data-autoid="dds--expressive-modal"`                      | Component   |
-| `::part(title)` in `<dds-lightbox-media-viewer>`       | `data-autoid="dds--Lightbox-media-viewer__content__title"` | Interactive |
-| `::part(description)` in `<dds-lightbox-media-viewer>` | `data-autoid="dds--Lightbox-media-viewer__content__desc"`  | Interactive |
+| `<cds-expressive-modal>`                               | `data-autoid="cds--expressive-modal"`                      | Component   |
+| `::part(title)` in `<cds-lightbox-media-viewer>`       | `data-autoid="cds--Lightbox-media-viewer__content__title"` | Interactive |
+| `::part(description)` in `<cds-lightbox-media-viewer>` | `data-autoid="cds--Lightbox-media-viewer__content__desc"`  | Interactive |
 
 ## Under the Hood
 
-### `<dds-lightbox-media-viewer>`
+### `<cds-lightbox-media-viewer>`
 
-<Props of="dds-lightbox-media-viewer" />
+<Props of="cds-lightbox-media-viewer" />
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx
index 6affbe6724f..aeb208de41f 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
 
@@ -17,22 +22,20 @@ Here's a quick example to get you started.
 ### JS (with images)
 
 ```javascript
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
-import DDSLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
+import C4DExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
+import C4DExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
+import C4DLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
 
 function App() {
   return (
-  <DDSExpressiveModal id="my-lightbox" expressive-size="full-width">
-    <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-    <DDSLightboxMediaViewer
-      alt="Image alt text"
-      default-src="https://fpoimg.com/1280x720?text=16:9&bg_color=ee5396&text_color=161616"
-      description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit."
-      title="Curabitur malesuada varius mi eu posuere"
-    >
-    </DDSLightboxMediaViewer>
-  </DDSExpressiveModal>
+    <C4DExpressiveModal id="my-lightbox" expressive-size="full-width">
+      <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+      <C4DLightboxMediaViewer
+        alt="Image alt text"
+        default-src="https://fpoimg.com/1280x720?text=16:9&bg_color=ee5396&text_color=161616"
+        description="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et ultricies est.Mauris iaculis eget dolor nec hendrerit."
+        title="Curabitur malesuada varius mi eu posuere"></C4DLightboxMediaViewer>
+    </C4DExpressiveModal>
   );
 }
 ```
@@ -40,16 +43,18 @@ function App() {
 ### JS (with videos)
 
 ```javascript
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
-import DDSLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
+import C4DExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
+import C4DExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
+import C4DLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
 
 function App() {
   return (
-  <DDSExpressiveModal id="my-lightbox" expressive-size="full-width">
-    <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-    <DDSLightboxMediaViewer id="my-video" video-id="1_9h94wo6b"></DDSLightboxMediaViewer>
-  </DDSExpressiveModal>
+    <C4DExpressiveModal id="my-lightbox" expressive-size="full-width">
+      <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+      <C4DLightboxMediaViewer
+        id="my-video"
+        video-id="0_ibuqxqbe"></C4DLightboxMediaViewer>
+    </C4DExpressiveModal>
   );
 }
 ```
@@ -57,22 +62,22 @@ function App() {
 ### JS (multiple images/videos)
 
 ```javascript
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
-import DDSLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
+import C4DExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
+import C4DExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
+import C4DLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 
 function App() {
   return (
-  <DDSExpressiveModal id="my-lightbox" expressive-size="full-width">
-    <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-    <DDSCarousel>
-      <DDSLightboxMediaViewer ... ></DDSLightboxMediaViewer>
-      <DDSLightboxMediaViewer ... ></DDSLightboxMediaViewer>
-      <DDSLightboxMediaViewer ... ></DDSLightboxMediaViewer>
-      <DDSLightboxMediaViewer ... ></DDSLightboxMediaViewer>
-    </DDSCarousel>
-  </DDSExpressiveModal>
+  <C4DExpressiveModal id="my-lightbox" expressive-size="full-width">
+    <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+    <C4DCarousel>
+      <C4DLightboxMediaViewer ... ></C4DLightboxMediaViewer>
+      <C4DLightboxMediaViewer ... ></C4DLightboxMediaViewer>
+      <C4DLightboxMediaViewer ... ></C4DLightboxMediaViewer>
+      <C4DLightboxMediaViewer ... ></C4DLightboxMediaViewer>
+    </C4DCarousel>
+  </C4DExpressiveModal>
   );
 }
 ```
@@ -83,12 +88,14 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                                | Compatibility selector                                     | Description |
 | ------------------------------------------------------ | ---------------------------------------------------------- | ----------- |
-| `<dds-expressive-modal>`                               | `data-autoid="dds--expressive-modal"`                      | Component   |
-| `::part(title)` in `<dds-lightbox-media-viewer>`       | `data-autoid="dds--Lightbox-media-viewer__content__title"` | Interactive |
-| `::part(description)` in `<dds-lightbox-media-viewer>` | `data-autoid="dds--Lightbox-media-viewer__content__desc"`  | Interactive |
+| `<cds-expressive-modal>`                               | `data-autoid="cds--expressive-modal"`                      | Component   |
+| `::part(title)` in `<cds-lightbox-media-viewer>`       | `data-autoid="cds--Lightbox-media-viewer__content__title"` | Interactive |
+| `::part(description)` in `<cds-lightbox-media-viewer>` | `data-autoid="cds--Lightbox-media-viewer__content__desc"`  | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.react.tsx b/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.react.tsx
index 469660f7de4..0412de950d9 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.react.tsx
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.react.tsx
@@ -13,12 +13,12 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
+import C4DExpressiveModal from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal';
 // eslint-disable-next-line max-len
-import DDSExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
+import C4DExpressiveModalCloseButton from '@carbon/ibmdotcom-web-components/es/components-react/expressive-modal/expressive-modal-close-button';
 // eslint-disable-next-line max-len
-import DDSLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
-import DDSCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
+import C4DLightboxMediaViewer from '@carbon/ibmdotcom-web-components/es/components-react/lightbox-media-viewer/lightbox-media-viewer';
+import C4DCarousel from '@carbon/ibmdotcom-web-components/es/components-react/carousel/carousel';
 
 import styles from './lightbox-media-viewer.stories.scss';
 import readme from './README.stories.react.mdx';
@@ -38,12 +38,13 @@ const images = {
 
 const videos = {
   none: null,
-  'Speed of AI Test Video': '1_9h94wo6b',
+  'Speed of AI Test Video': '0_ibuqxqbe',
 };
 
-export const Default = args => {
+export const Default = (args) => {
   const { open, disableClose, onBeforeClose, onClose } = args?.Modal ?? {};
-  const { alt, defaultSrc, description, title, hideCaption, videoId } = args?.LightboxMedia ?? {};
+  const { alt, defaultSrc, description, title, hideCaption, videoId } =
+    args?.LightboxMedia ?? {};
   const handleBeforeClose = (event: CustomEvent) => {
     onBeforeClose?.(event);
     if (disableClose) {
@@ -53,21 +54,21 @@ export const Default = args => {
   return (
     <>
       <style type="text/css">{styles.cssText}</style>
-      <DDSExpressiveModal
+      <C4DExpressiveModal
         expressive-size="full-width"
         mode="lightbox"
         open={open}
-        dds-expressive-modal-beingclosed={handleBeforeClose}
-        dds-expressive-modal-closed={onClose}>
-        <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-        <DDSLightboxMediaViewer
+        cds-expressive-modal-beingclosed={handleBeforeClose}
+        cds-expressive-modal-closed={onClose}>
+        <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+        <C4DLightboxMediaViewer
           alt={alt || null}
           default-src={defaultSrc || null}
           description={description || null}
           title={title || null}
           video-id={videoId || null}
-          hideCaption={hideCaption}></DDSLightboxMediaViewer>
-      </DDSExpressiveModal>
+          hideCaption={hideCaption}></C4DLightboxMediaViewer>
+      </C4DExpressiveModal>
     </>
   );
 };
@@ -76,11 +77,18 @@ Default.story = {
   parameters: {
     knobs: {
       LightboxMedia: () => ({
-        defaultSrc: select('Image (default-src)', images, images['1312 x 656 (2:1)']),
+        defaultSrc: select(
+          'Image (default-src)',
+          images,
+          images['1312 x 656 (2:1)']
+        ),
         alt: text('Image alt text (alt)', 'Image alt text'),
         videoId: select('Video ID (video-id)', videos, videos.none),
         hideCaption: boolean('hide caption (hide-caption)', false),
-        title: text('Title (title)', 'Curabitur malesuada varius mi eu posuere'),
+        title: text(
+          'Title (title)',
+          'Curabitur malesuada varius mi eu posuere'
+        ),
         description: text(
           'Description (description)',
           `
@@ -103,17 +111,17 @@ export default {
       Modal: () => ({
         open: boolean('Open (open)', true),
         disableClose: boolean(
-          'Disable user-initiated close action (Call event.preventDefault() in dds-expressive-modal-beingclosed event)',
+          'Disable user-initiated close action (Call event.preventDefault() in cds-expressive-modal-beingclosed event)',
           false
         ),
-        onBeforeClose: action('dds-expressive-modal-beingclosed'),
-        onClose: action('dds-expressive-modal-closed'),
+        onBeforeClose: action('cds-expressive-modal-beingclosed'),
+        onClose: action('cds-expressive-modal-closed'),
       }),
     },
   },
 };
 
-export const WithCarousel = args => {
+export const WithCarousel = (args) => {
   const { open, disableClose, onBeforeClose, onClose } = args?.Modal ?? {};
   const handleBeforeClose = (event: CustomEvent) => {
     onBeforeClose?.(event);
@@ -124,23 +132,23 @@ export const WithCarousel = args => {
   return (
     <>
       <style type="text/css">{styles.cssText}</style>
-      <DDSExpressiveModal
+      <C4DExpressiveModal
         expressive-size="full-width"
         mode="lightbox"
         open={open}
-        dds-expressive-modal-beingclosed={handleBeforeClose}
-        dds-expressive-modal-closed={onClose}>
-        <DDSExpressiveModalCloseButton></DDSExpressiveModalCloseButton>
-        <DDSCarousel page-size="1">
-          <DDSLightboxMediaViewer
+        cds-expressive-modal-beingclosed={handleBeforeClose}
+        cds-expressive-modal-closed={onClose}>
+        <C4DExpressiveModalCloseButton></C4DExpressiveModalCloseButton>
+        <C4DCarousel page-size="1">
+          <C4DLightboxMediaViewer
             video-id={videos['Speed of AI Test Video']}
             title="Praesent at erat."
             description="
             Lorem ipsum dolor sit amet, consectetur adipiscing elit.
             Praesent at erat eu lectus elementum hendrerit sed sed lacus.
             Morbi feugiat tortor purus, id pretium elit scelerisque id.
-            Donec dignissim ac purus id faucibus."></DDSLightboxMediaViewer>
-          <DDSLightboxMediaViewer
+            Donec dignissim ac purus id faucibus."></C4DLightboxMediaViewer>
+          <C4DLightboxMediaViewer
             default-src={images['1312 x 738 (16:9)']}
             alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             title="Donec dignissim ac purus id faucibus."
@@ -148,37 +156,37 @@ export const WithCarousel = args => {
               Proin ut leo condimentum, consequat risus quis, mattis lacus. Donec malesuada convallis erat ut luctus.
               Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
               Vivamus non ultricies libero. Fusce scelerisque sit amet ex finibus scelerisque.
-            "></DDSLightboxMediaViewer>
-          <DDSLightboxMediaViewer
+            "></C4DLightboxMediaViewer>
+          <C4DLightboxMediaViewer
             default-src={images['1312 x 738 (16:9)']}
             alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             title="Donec malesuada convallis."
             description="
             In ac luctus mauris. Sed egestas neque nec lorem pharetra congue. Vestibulum quis mi ac nibh dictum vulputate.
             Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo massa.
-          "></DDSLightboxMediaViewer>
-          <DDSLightboxMediaViewer
+          "></C4DLightboxMediaViewer>
+          <C4DLightboxMediaViewer
             default-src={images['1312 x 738 (16:9)']}
             alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             title="Fusce scelerisque sit amet ex finibus"
             description="
               Integer interdum facilisis lacus quis lobortis. Mauris vestibulum rhoncus libero nec dictum. Maecenas mi ipsum,
-              ornare at sem in, cursus vestibulum mauris. Proin suscipit leo sit amet ipsum hendrerit viverra. 
-              Sed a varius sapien. Nam sit amet felis congue, porttitor turpis at, gravida dolor. Lorem ipsum dolor sit amet, 
-              consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia 
+              ornare at sem in, cursus vestibulum mauris. Proin suscipit leo sit amet ipsum hendrerit viverra.
+              Sed a varius sapien. Nam sit amet felis congue, porttitor turpis at, gravida dolor. Lorem ipsum dolor sit amet,
+              consectetur adipiscing elit. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
               curae; Curabitur tempor ante magna, sit amet pulvinar odio vehicula in. Vivamus placerat aliquam sem vitae mattis.
-              Etiam eget tempor ante, convallis tempor dui. Proin sodales congue dictum. Proin arcu nisl, ultricies eu dolor ut, 
-              posuere placerat arcu. Fusce placerat purus vel libero consectetur, id fringilla ex egestas. Vestibulum ante ipsum 
+              Etiam eget tempor ante, convallis tempor dui. Proin sodales congue dictum. Proin arcu nisl, ultricies eu dolor ut,
+              posuere placerat arcu. Fusce placerat purus vel libero consectetur, id fringilla ex egestas. Vestibulum ante ipsum
               primis in faucibus orci luctus et ultrices posuere cubilia curae; In sodales faucibus mi vel ultricies.
-            "></DDSLightboxMediaViewer>
-          <DDSLightboxMediaViewer
+            "></C4DLightboxMediaViewer>
+          <C4DLightboxMediaViewer
             default-src={images['1312 x 738 (16:9)']}
             alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
             title="In ac luctus mauris."
-            description="Aenean vel sem velit. Mauris malesuada eleifend leo vel interdum. In eu aliquet lacus, 
-            eu feugiat turpis."></DDSLightboxMediaViewer>
-        </DDSCarousel>
-      </DDSExpressiveModal>
+            description="Aenean vel sem velit. Mauris malesuada eleifend leo vel interdum. In eu aliquet lacus,
+            eu feugiat turpis."></C4DLightboxMediaViewer>
+        </C4DCarousel>
+      </C4DExpressiveModal>
     </>
   );
 };
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.scss b/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.scss
index b56d70cc4d0..608d79a8939 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.scss
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.scss
@@ -6,11 +6,11 @@
 //
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-.sbdocs-preview dds-expressive-modal {
+.sbdocs-preview cds-expressive-modal {
   width: 100%;
   height: 100%;
 }
 
-.dds-ce-demo-devenv--grid--stretch {
+.cds-ce-demo-devenv--grid--stretch {
   width: 100%;
 }
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.ts b/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.ts
index c1e10c67a6c..74cc2ea26f6 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/__stories__/lightbox-media-viewer.stories.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../../../internal/vendor/@carbon/web-components/components/modal/modal-close-button.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import '../index';
@@ -34,7 +34,7 @@ const images = {
 
 const videos = {
   none: null,
-  'Speed of AI Test Video': '1_9h94wo6b',
+  'Speed of AI Test Video': '0_ibuqxqbe',
 };
 
 export const Default = (args) => {
@@ -51,22 +51,22 @@ export const Default = (args) => {
     <style>
       ${styles}
     </style>
-    <dds-expressive-modal
+    <c4d-expressive-modal
       expressive-size="full-width"
       mode="lightbox"
       ?open="${open}"
-      @dds-expressive-modal-beingclosed="${handleBeforeClose}"
-      @dds-expressive-modal-closed="${onClose}">
-      <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-      <dds-lightbox-media-viewer
-        alt="${ifNonNull(alt)}"
-        default-src="${ifNonNull(defaultSrc)}"
-        description="${ifNonNull(description)}"
-        title="${ifNonNull(title)}"
-        video-id="${ifNonNull(videoId)}"
-        ?hideCaption="${ifNonNull(hideCaption)}">
-      </dds-lightbox-media-viewer>
-    </dds-expressive-modal>
+      @c4d-expressive-modal-beingclosed="${handleBeforeClose}"
+      @c4d-expressive-modal-closed="${onClose}">
+      <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+      <c4d-lightbox-media-viewer
+        alt="${ifDefined(alt)}"
+        default-src="${ifDefined(defaultSrc)}"
+        description="${ifDefined(description)}"
+        title="${ifDefined(title)}"
+        video-id="${ifDefined(videoId)}"
+        ?hideCaption="${ifDefined(hideCaption)}">
+      </c4d-lightbox-media-viewer>
+    </c4d-expressive-modal>
   `;
 };
 
@@ -108,7 +108,7 @@ Default.story = {
           `,
           title: 'Curabitur malesuada varius mi eu posuere',
           hideCaption: false,
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
           customVideoName: 'Custom video name',
           customVideoDescription: 'This is a custom video description',
         },
@@ -129,25 +129,25 @@ export const WithCarousel = (args) => {
     <style>
       ${styles}
     </style>
-    <dds-expressive-modal
+    <c4d-expressive-modal
       expressive-size="full-width"
       mode="lightbox"
       ?open="${open}"
-      @dds-expressive-modal-beingclosed="${handleBeforeClose}"
-      @dds-expressive-modal-closed="${onClose}">
-      <span slot="header" class="bx--visually-hidden"
+      @c4d-expressive-modal-beingclosed="${handleBeforeClose}"
+      @c4d-expressive-modal-closed="${onClose}">
+      <span slot="header" class="cds--visually-hidden"
         >Lightbox modal with carousel</span
       >
-      <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-      <dds-carousel page-size="1">
-        <dds-lightbox-media-viewer
+      <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+      <c4d-carousel page-size="1">
+        <c4d-lightbox-media-viewer
           video-id="${videos['Speed of AI Test Video']}"
           title="Praesent at erat."
           description="
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent at erat eu lectus elementum hendrerit sed sed lacus.
             Morbi feugiat tortor purus, id pretium elit scelerisque id. Donec dignissim ac purus id faucibus.
-          "></dds-lightbox-media-viewer>
-        <dds-lightbox-media-viewer
+          "></c4d-lightbox-media-viewer>
+        <c4d-lightbox-media-viewer
           default-src="${images['1312 x 738 (16:9)']}"
           alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           title="Donec dignissim ac purus id faucibus."
@@ -155,16 +155,16 @@ export const WithCarousel = (args) => {
             Proin ut leo condimentum, consequat risus quis, mattis lacus. Donec malesuada convallis erat ut luctus.
             Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
             Vivamus non ultricies libero. Fusce scelerisque sit amet ex finibus scelerisque.
-          "></dds-lightbox-media-viewer>
-        <dds-lightbox-media-viewer
+          "></c4d-lightbox-media-viewer>
+        <c4d-lightbox-media-viewer
           default-src="${images['1312 x 738 (16:9)']}"
           alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           title="Donec malesuada convallis."
           description="
             In ac luctus mauris. Sed egestas neque nec lorem pharetra congue. Vestibulum quis mi ac nibh dictum vulputate.
             Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed et justo massa.
-          "></dds-lightbox-media-viewer>
-        <dds-lightbox-media-viewer
+          "></c4d-lightbox-media-viewer>
+        <c4d-lightbox-media-viewer
           default-src="${images['1312 x 738 (16:9)']}"
           alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           title="Fusce scelerisque sit amet ex finibus"
@@ -177,14 +177,14 @@ export const WithCarousel = (args) => {
             convallis tempor dui. Proin sodales congue dictum. Proin arcu nisl, ultricies eu dolor ut, posuere placerat arcu.
             Fusce placerat purus vel libero consectetur, id fringilla ex egestas. Vestibulum ante ipsum primis in faucibus orci
             luctus et ultrices posuere cubilia curae; In sodales faucibus mi vel ultricies.
-          "></dds-lightbox-media-viewer>
-        <dds-lightbox-media-viewer
+          "></c4d-lightbox-media-viewer>
+        <c4d-lightbox-media-viewer
           default-src="${images['1312 x 738 (16:9)']}"
           alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
           title="In ac luctus mauris."
-          description="Aenean vel sem velit. Mauris malesuada eleifend leo vel interdum. In eu aliquet lacus, eu feugiat turpis."></dds-lightbox-media-viewer>
-      </dds-carousel>
-    </dds-expressive-modal>
+          description="Aenean vel sem velit. Mauris malesuada eleifend leo vel interdum. In eu aliquet lacus, eu feugiat turpis."></c4d-lightbox-media-viewer>
+      </c4d-carousel>
+    </c4d-expressive-modal>
   `;
 };
 
@@ -201,11 +201,11 @@ export default {
       Modal: () => ({
         open: boolean('Open (open)', true),
         disableClose: boolean(
-          'Disable user-initiated close action (Call event.preventDefault() in dds-expressive-modal-beingclosed event)',
+          'Disable user-initiated close action (Call event.preventDefault() in c4d-expressive-modal-beingclosed event)',
           false
         ),
-        onBeforeClose: action('dds-expressive-modal-beingclosed'),
-        onClose: action('dds-expressive-modal-closed'),
+        onBeforeClose: action('c4d-expressive-modal-beingclosed'),
+        onClose: action('c4d-expressive-modal-closed'),
       }),
     },
     propsSet: {
@@ -213,8 +213,8 @@ export default {
         Modal: {
           open: true,
           disableClose: false,
-          onBeforeClose: 'dds-expressive-modal-beingclosed',
-          onClose: 'dds-expressive-modal-closed',
+          onBeforeClose: 'c4d-expressive-modal-beingclosed',
+          onClose: 'c4d-expressive-modal-closed',
         },
       },
     },
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-image-viewer.test.ts b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-image-viewer.test.ts
index 63b9159d9b9..3c9e156c8cf 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-image-viewer.test.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-image-viewer.test.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../lightbox-image-viewer';
 
 const template = (props?) => {
   const { alt, defaultSrc, description, title } = props ?? {};
   return html`
-    <dds-lightbox-image-viewer
-      alt="${ifNonNull(alt)}"
-      default-src="${ifNonNull(defaultSrc)}"
-      description="${ifNonNull(description)}"
-      title="${ifNonNull(title)}">
-    </dds-lightbox-image-viewer>
+    <c4d-lightbox-image-viewer
+      alt="${ifDefined(alt)}"
+      default-src="${ifDefined(defaultSrc)}"
+      description="${ifDefined(description)}"
+      title="${ifDefined(title)}">
+    </c4d-lightbox-image-viewer>
   `;
 };
 
-describe('dds-lightbox-image-viewer', function () {
+describe('c4d-lightbox-image-viewer', function () {
   it('should render with minimum attributes', async function () {
     render(template(), document.body);
     await Promise.resolve();
-    expect(document.querySelector('dds-lightbox-image-viewer')).toMatchSnapshot(
+    expect(document.querySelector('c4d-lightbox-image-viewer')).toMatchSnapshot(
       { mode: 'shadow' }
     );
   });
@@ -43,7 +43,7 @@ describe('dds-lightbox-image-viewer', function () {
       document.body
     );
     await Promise.resolve();
-    expect(document.querySelector('dds-lightbox-image-viewer')).toMatchSnapshot(
+    expect(document.querySelector('c4d-lightbox-image-viewer')).toMatchSnapshot(
       { mode: 'shadow' }
     );
   });
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-media-viewer.steps.js b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-media-viewer.steps.js
index beec534cb7c..c9a502b3866 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-media-viewer.steps.js
+++ b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-media-viewer.steps.js
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-describe('dds-lightbox-media-viewer-*', () => {
+describe('cds-lightbox-media-viewer-*', () => {
   beforeAll(async () => {
     await page.goto(
       `http://localhost:${process.env.PORT}/iframe.html?id=components-lightbox-media-viewer--embedded-video-player`
@@ -15,9 +15,9 @@ describe('dds-lightbox-media-viewer-*', () => {
   });
 
   it('should have modal closable', async () => {
-    await page.click('dds-expressive-modal-close-button button');
+    await page.click('cds-expressive-modal-close-button button');
     await expect(page).toHaveSelector(
-      'dds-expressive-modal .bx--modal-container',
+      'cds-expressive-modal .cds--modal-container',
       { state: 'hidden' }
     );
   });
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player-composite.test.ts b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player-composite.test.ts
index 59761fdbc14..4b8d37ee3cf 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player-composite.test.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player-composite.test.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import DDSLightboxVideoPlayer from '../lightbox-video-player';
-import DDSLightboxVideoPlayerComposite from '../lightbox-video-player-composite';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import C4DLightboxVideoPlayer from '../lightbox-video-player';
+import C4DLightboxVideoPlayerComposite from '../lightbox-video-player-composite';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../lightbox-video-player-composite';
 
@@ -24,18 +24,18 @@ const template = (props?) => {
     mediaData,
   } = props ?? {};
   return html`
-    <dds-lightbox-video-player-composite
+    <c4d-lightbox-video-player-composite
       ?hide-caption="${hideCaption}"
-      video-id="${ifNonNull(videoId)}"
-      .embeddedVideos="${ifNonNull(embeddedVideos)}"
-      .formatCaption="${ifNonNull(formatCaption)}"
-      .formatDuration="${ifNonNull(formatDuration)}"
-      .mediaData="${ifNonNull(mediaData)}">
-    </dds-lightbox-video-player-composite>
+      video-id="${ifDefined(videoId)}"
+      .embeddedVideos="${ifDefined(embeddedVideos)}"
+      .formatCaption="${ifDefined(formatCaption)}"
+      .formatDuration="${ifDefined(formatDuration)}"
+      .mediaData="${ifDefined(mediaData)}">
+    </c4d-lightbox-video-player-composite>
   `;
 };
 
-describe('dds-lightbox-video-player-composite', function () {
+describe('c4d-lightbox-video-player-composite', function () {
   it('should send props to video player', async function () {
     const formatCaption = () => {};
     const formatDuration = () => {};
@@ -46,11 +46,11 @@ describe('dds-lightbox-video-player-composite', function () {
     await Promise.resolve(); // Micro-task cycle for `VideoPlayer`
     await Promise.resolve(); // Update cycle to render with `VideoPlayer` results
     const videoPlayerComposite = document.querySelector(
-      'dds-lightbox-video-player-composite'
-    ) as DDSLightboxVideoPlayerComposite;
+      'c4d-lightbox-video-player-composite'
+    ) as C4DLightboxVideoPlayerComposite;
     const videoPlayer = (
       videoPlayerComposite.modalRenderRoot as Element
-    ).querySelector('dds-lightbox-video-player') as DDSLightboxVideoPlayer;
+    ).querySelector('c4d-lightbox-video-player') as C4DLightboxVideoPlayer;
     expect(videoPlayer.formatCaption).toBe(formatCaption);
     expect(videoPlayer.formatDuration).toBe(formatDuration);
   });
@@ -69,8 +69,8 @@ describe('dds-lightbox-video-player-composite', function () {
     expect(
       (
         document.querySelector(
-          'dds-lightbox-video-player-composite'
-        ) as DDSLightboxVideoPlayerComposite
+          'c4d-lightbox-video-player-composite'
+        ) as C4DLightboxVideoPlayerComposite
       ).modalRenderRoot
     ).toMatchSnapshot();
   });
@@ -79,12 +79,12 @@ describe('dds-lightbox-video-player-composite', function () {
     render(template({ videoId: 'video-id-bar' }), document.body);
     await Promise.resolve();
     const lightboxVideoPlayerComposite = document.querySelector(
-      'dds-lightbox-video-player-composite'
-    ) as DDSLightboxVideoPlayerComposite;
+      'c4d-lightbox-video-player-composite'
+    ) as C4DLightboxVideoPlayerComposite;
     const modalRenderRoot = (
-      lightboxVideoPlayerComposite as DDSLightboxVideoPlayerComposite
+      lightboxVideoPlayerComposite as C4DLightboxVideoPlayerComposite
     ).modalRenderRoot as Element;
-    modalRenderRoot.querySelector('dds-lightbox-video-player')!.innerHTML = `
+    modalRenderRoot.querySelector('c4d-lightbox-video-player')!.innerHTML = `
       <div data-video-id="video-id-foo"></div>
       <div data-video-id="video-id-bar"></div>
       <div data-video-id="video-id-baz"></div>
@@ -108,7 +108,7 @@ describe('dds-lightbox-video-player-composite', function () {
     };
     await Promise.resolve();
     (lightboxVideoPlayerComposite.modalRenderRoot as Element).dispatchEvent(
-      new CustomEvent('dds-expressive-modal-closed', { bubbles: true })
+      new CustomEvent('c4d-expressive-modal-closed', { bubbles: true })
     );
     expect((embeddedVideoFoo as any).sendNotification).not.toHaveBeenCalled();
     expect((embeddedVideoBar as any).sendNotification).toHaveBeenCalledWith(
diff --git a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player.test.ts b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player.test.ts
index cd818d5649a..5f1091e6655 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player.test.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/__tests__/lightbox-video-player.test.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../lightbox-video-player';
 
 const template = (props?) => {
@@ -21,22 +21,22 @@ const template = (props?) => {
     name,
   } = props ?? {};
   return html`
-    <dds-lightbox-video-player
-      description="${ifNonNull(description)}"
-      duration="${ifNonNull(duration)}"
+    <c4d-lightbox-video-player
+      description="${ifDefined(description)}"
+      duration="${ifDefined(duration)}"
       ?hide-caption="${hideCaption}"
-      name="${ifNonNull(name)}"
-      .formatCaption="${ifNonNull(formatCaption)}"
-      .formatDuration="${ifNonNull(formatDuration)}">
-    </dds-lightbox-video-player>
+      name="${ifDefined(name)}"
+      .formatCaption="${ifDefined(formatCaption)}"
+      .formatDuration="${ifDefined(formatDuration)}">
+    </c4d-lightbox-video-player>
   `;
 };
 
-describe('dds-lightbox-video-player', function () {
+describe('c4d-lightbox-video-player', function () {
   it('should render with minimum attributes', async function () {
     render(template(), document.body);
     await Promise.resolve();
-    expect(document.querySelector('dds-lightbox-video-player')).toMatchSnapshot(
+    expect(document.querySelector('c4d-lightbox-video-player')).toMatchSnapshot(
       { mode: 'shadow' }
     );
   });
@@ -51,7 +51,7 @@ describe('dds-lightbox-video-player', function () {
       document.body
     );
     await Promise.resolve();
-    expect(document.querySelector('dds-lightbox-video-player')).toMatchSnapshot(
+    expect(document.querySelector('c4d-lightbox-video-player')).toMatchSnapshot(
       { mode: 'shadow' }
     );
   });
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-image-viewer.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-image-viewer.ts
index 94fc595476d..763d41bff32 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-image-viewer.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-image-viewer.ts
@@ -7,27 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSLightboxMediaViewerBody from './lightbox-media-viewer-body';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';
 import '../expressive-modal/expressive-modal';
 import '../expressive-modal/expressive-modal-close-button';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The image content of lightbox media viewer.
  *
- * @element dds-lightbox-image-viewer
+ * @element c4d-lightbox-image-viewer
  * @slot title - The title content.
  * @slot description - The description content.
  */
-@customElement(`${ddsPrefix}-lightbox-image-viewer`)
-class DDSLightboxImageViewer extends DDSLightboxMediaViewerBody {
+@customElement(`${c4dPrefix}-lightbox-image-viewer`)
+class C4DLightboxImageViewer extends C4DLightboxMediaViewerBody {
   _renderDescription() {
     const { description } = this;
     return html` <slot name="description">${description}</slot> `;
@@ -38,9 +37,9 @@ class DDSLightboxImageViewer extends DDSLightboxMediaViewerBody {
     const { alt, defaultSrc } = this;
     return html`
       <img
-        class="${prefix}--image__img"
-        alt="${ifNonNull(alt)}"
-        src="${ifNonNull(defaultSrc)}"
+        class="${c4dPrefix}--image__img"
+        alt="${ifDefined(alt)}"
+        src="${ifDefined(defaultSrc)}"
         loading="lazy" />
     `;
   }
@@ -76,4 +75,4 @@ class DDSLightboxImageViewer extends DDSLightboxMediaViewerBody {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLightboxImageViewer;
+export default C4DLightboxImageViewer;
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer-body.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer-body.ts
index 7af0286ba25..66a6145a528 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer-body.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer-body.ts
@@ -7,19 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html, LitElement, TemplateResult } from 'lit';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './lightbox-media-viewer.scss';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Media viewer modal body.
  */
-abstract class DDSLightboxMediaViewerBody extends FocusMixin(LitElement) {
+abstract class C4DLightboxMediaViewerBody extends FocusMixin(LitElement) {
   /**
    * @returns The description content.
    */
@@ -37,25 +35,23 @@ abstract class DDSLightboxMediaViewerBody extends FocusMixin(LitElement) {
 
   render() {
     return html`
-      <div class="${prefix}--lightbox-media-viewer__container">
-        <div class="${prefix}--lightbox-media-viewer__row">
-          <div
-            class="${prefix}--lightbox-media-viewer__media ${prefix}--no-gutter">
+      <div class="${c4dPrefix}--lightbox-media-viewer__container">
+        <div class="${c4dPrefix}--lightbox-media-viewer__row">
+          <div class="${c4dPrefix}--lightbox-media-viewer__media">
             ${this._renderMedia()}
           </div>
-          <div
-            class="${prefix}--lightbox-media-viewer__media-description ${prefix}--no-gutter">
-            <div class="${prefix}--lightbox-media-viewer__content">
+          <div class="${c4dPrefix}--lightbox-media-viewer__media-description">
+            <div class="${c4dPrefix}--lightbox-media-viewer__content">
               <div
                 part="title"
-                class="${prefix}--lightbox-media-viewer__content__title"
-                data-autoid="${ddsPrefix}--lightbox-media-viewer__content__title">
+                class="${c4dPrefix}--lightbox-media-viewer__content__title"
+                data-autoid="${c4dPrefix}--lightbox-media-viewer__content__title">
                 ${this._renderTitle()}
               </div>
               <div
                 part="description"
-                class="${prefix}--lightbox-media-viewer__content__desc"
-                data-autoid="${ddsPrefix}--lightbox-media-viewer__content__desc">
+                class="${c4dPrefix}--lightbox-media-viewer__content__desc"
+                data-autoid="${c4dPrefix}--lightbox-media-viewer__content__desc">
                 ${this._renderDescription()}
               </div>
             </div>
@@ -69,4 +65,4 @@ abstract class DDSLightboxMediaViewerBody extends FocusMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLightboxMediaViewerBody;
+export default C4DLightboxMediaViewerBody;
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.scss b/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.scss
index d8bea74b59a..b0978ef8be6 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.scss
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.scss
@@ -5,24 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/lightbox-media-viewer/lightbox-media-viewer';
-@import '@carbon/ibmdotcom-styles/scss/components/video-player/video-player';
-@import '../expressive-modal/expressive-modal';
-
-:host(#{$dds-prefix}-lightbox-image-viewer),
-:host(#{$dds-prefix}-lightbox-video-player) {
-  @extend :host(#{$dds-prefix}-expressive-modal-body);
-  @extend .#{$prefix}--lightbox-media-viewer;
-}
-
-:host(#{$dds-prefix}-lightbox-video-player) .#{$prefix}--video-player {
-  width: 100%;
-
-  ::slotted(.#{$prefix}--video-player__video) {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/lightbox-media-viewer';
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts
index d8348273fa3..76891d875bd 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-media-viewer.ts
@@ -7,27 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, query } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSLightboxMediaViewerBody from './lightbox-media-viewer-body';
-import DDSVideoPlayerContainer from '../video-player/video-player-container';
-import DDSCarousel from '../carousel/carousel';
-import DDSExpressiveModal from '../expressive-modal/expressive-modal';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';
+import C4DVideoPlayerContainer from '../video-player/video-player-container';
+import C4DCarousel from '../carousel/carousel';
+import C4DExpressiveModal from '../expressive-modal/expressive-modal';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The image content of lightbox media viewer.
  *
- * @element dds-lightbox-image-viewer
+ * @element c4d-lightbox-image-viewer
  * @slot title - The title content.
  * @slot description - The description content.
  */
-@customElement(`${ddsPrefix}-lightbox-media-viewer`)
-class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
+@customElement(`${c4dPrefix}-lightbox-media-viewer`)
+class C4DLightboxMediaViewer extends C4DLightboxMediaViewerBody {
   _renderDescription() {
     const { description } = this;
     return html` <slot name="description">${description}</slot> `;
@@ -48,17 +47,17 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
 
   private _mediaItem?: HTMLElement;
 
-  @query(`.${prefix}--lightbox-media-viewer__media`)
+  @query(`.${c4dPrefix}--lightbox-media-viewer__media`)
   private _mediaWindow!: HTMLDivElement;
 
-  private _containingCarousel?: DDSCarousel;
+  private _containingCarousel?: C4DCarousel;
 
-  private _containingModal?: DDSExpressiveModal;
+  private _containingModal?: C4DExpressiveModal;
 
   private _handleSlotChange(event: Event) {
     const { _containingModal: containingModal } = this;
     const [media] = (event.target as HTMLSlotElement).assignedNodes();
-    this._mediaItem = media as HTMLImageElement | DDSVideoPlayerContainer;
+    this._mediaItem = media as HTMLImageElement | C4DVideoPlayerContainer;
 
     // Disconnect & delete intersection observer
     if (this._intersectionObserver instanceof IntersectionObserver) {
@@ -69,13 +68,13 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
     // Remove modal closed listeners from the containing modal
     if (containingModal && this._boundModalClosedHandler) {
       containingModal.removeEventListener(
-        DDSExpressiveModal.eventBeforeClose,
+        C4DExpressiveModal.eventBeforeClose,
         this._boundModalClosedHandler
       );
       this._boundModalClosedHandler = undefined;
     }
 
-    if (media instanceof DDSVideoPlayerContainer) {
+    if (media instanceof C4DVideoPlayerContainer) {
       const {
         _mediaWindow: mediaWindow,
         _containingCarousel: containingCarousel,
@@ -98,7 +97,7 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
         this._boundModalClosedHandler = this._handleModalClosed.bind(this);
 
         containingModal.addEventListener(
-          DDSExpressiveModal.eventBeforeClose,
+          C4DExpressiveModal.eventBeforeClose,
           this._boundModalClosedHandler
         );
       }
@@ -122,7 +121,7 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
   private _pauseVideo() {
     const { _mediaItem: mediaItem } = this;
 
-    if (mediaItem instanceof DDSVideoPlayerContainer) {
+    if (mediaItem instanceof C4DVideoPlayerContainer) {
       mediaItem.pauseAllVideos();
     }
   }
@@ -133,9 +132,9 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
     super.connectedCallback();
 
     this._containingCarousel =
-      (this.closest(`${ddsPrefix}-carousel`) as DDSCarousel) || undefined;
+      (this.closest(`${c4dPrefix}-carousel`) as C4DCarousel) || undefined;
     this._containingModal =
-      (this.closest(`${ddsPrefix}-expressive-modal`) as DDSExpressiveModal) ||
+      (this.closest(`${c4dPrefix}-expressive-modal`) as C4DExpressiveModal) ||
       undefined;
   }
 
@@ -143,20 +142,20 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
     if (this.videoId) {
       const { videoId, caption, hideCaption, thumbnail } = this;
       this.innerHTML = `
-        <dds-video-player-container
+        <c4d-video-player-container
           playing-mode="inline"
           video-id="${videoId}"
           caption="${caption}"
           ?hide-caption="${hideCaption}"
           thumbnail="${thumbnail}"
           slot="media"
-        ></dds-video-player-container>
+        ></c4d-video-player-container>
       `;
     } else {
       const { alt, defaultSrc } = this;
       this.innerHTML = `
         <img
-          class="${prefix}--image__img"
+          class="${c4dPrefix}--image__img"
           alt="${alt}"
           src="${defaultSrc}"
           loading="lazy"
@@ -209,9 +208,9 @@ class DDSLightboxMediaViewer extends DDSLightboxMediaViewerBody {
    * Cancellation of this event stops the user-initiated action of closing this modal.
    */
   static get eventBeforeModalClose() {
-    return `${ddsPrefix}-expressive-modal-beingclosed`;
+    return `${c4dPrefix}-expressive-modal-beingclosed`;
   }
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLightboxMediaViewer;
+export default C4DLightboxMediaViewer;
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.scss b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.scss
deleted file mode 100644
index 62c08807563..00000000000
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-//
-// Copyright IBM Corp. 2020
-//
-// 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-
-:host(#{$dds-prefix}-lightbox-video-player-container),
-:host(#{$dds-prefix}-lightbox-video-player-composite) {
-  display: contents;
-}
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts
index 392c69b12be..e82dac031d7 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-composite.ts
@@ -7,15 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import on from '../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';
 import ModalRenderMixin from '../../globals/mixins/modal-render';
 import Handle from '../../globals/internal/handle';
-import DDSVideoPlayerComposite from '../video-player/video-player-composite';
+import C4DVideoPlayerComposite from '../video-player/video-player-composite';
 import '../expressive-modal/expressive-modal';
 import '../expressive-modal/expressive-modal-close-button';
 import {
@@ -23,22 +24,22 @@ import {
   VIDEO_PLAYER_PLAYING_MODE,
 } from '../video-player/video-player';
 import './lightbox-video-player';
-import styles from './lightbox-video-player-composite.scss';
+import styles from './lightbox-media-viewer.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Component that renders lightbox media viewer for video from its metadata, etc.
  *
- * @element dds-lightbox-video-player-composite
+ * @element c4d-lightbox-video-player-composite
  */
-@customElement(`${ddsPrefix}-lightbox-video-player-composite`)
-class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
-  DDSVideoPlayerComposite
+@customElement(`${c4dPrefix}-lightbox-video-player-composite`)
+class C4DLightboxVideoPlayerComposite extends ModalRenderMixin(
+  C4DVideoPlayerComposite
 ) {
   /**
-   * The handle for the listener of `${ddsPrefix}-expressive-modal-closed` event.
+   * The handle for the listener of `${c4dPrefix}-expressive-modal-closed` event.
    */
   private _hCloseModal: Handle | null = null;
 
@@ -67,7 +68,7 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
     }
 
     const { selectorEmbeddedVideoContainer } = this
-      .constructor as typeof DDSLightboxVideoPlayerComposite;
+      .constructor as typeof C4DLightboxVideoPlayerComposite;
 
     const elems = Array.prototype.slice.call(
       videoPlayer?.querySelectorAll(selectorEmbeddedVideoContainer)
@@ -82,7 +83,7 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
   };
 
   /**
-   * The handler of `${ddsPrefix}-expressive-modal-closed` event from `<dds-expressive-modal>`.
+   * The handler of `${c4dPrefix}-expressive-modal-closed` event from `<c4d-expressive-modal>`.
    */
   private _handleCloseModal = () => {
     const { embeddedVideos = {}, videoId } = this;
@@ -126,7 +127,7 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
    */
   protected get _videoPlayer() {
     const { selectorVideoPlayer } = this
-      .constructor as typeof DDSLightboxVideoPlayerComposite;
+      .constructor as typeof C4DLightboxVideoPlayerComposite;
     return (this.modalRenderRoot as Element)?.querySelector?.(
       selectorVideoPlayer
     );
@@ -162,7 +163,7 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
     // Manually hooks the event listeners on the modal render root to make the event names configurable
     this._hCloseModal = on(
       this.modalRenderRoot,
-      (this.constructor as typeof DDSLightboxVideoPlayerComposite)
+      (this.constructor as typeof C4DLightboxVideoPlayerComposite)
         .eventCloseModal,
       this._handleCloseModal as EventListener
     );
@@ -192,7 +193,7 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
   renderLightDOM() {
     // In this class we render that in modal instead of in light DOM.
     // Overriding `.renderLightDOM()` here
-    // to prevent the parent `<dds-video-player-composite>` from rendering `<dds-video-player>` in light DOM.
+    // to prevent the parent `<c4d-video-player-composite>` from rendering `<c4d-video-player>` in light DOM.
     return html``;
   }
 
@@ -212,20 +213,20 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
     const videoName = customVideoName || name;
     const videoDescription = customVideoDescription || description;
     return html`
-      <dds-expressive-modal
+      <c4d-expressive-modal
         ?open="${open}"
         expressive-size="full-width"
         mode="lightbox">
-        <dds-expressive-modal-close-button></dds-expressive-modal-close-button>
-        <dds-lightbox-video-player
-          description="${ifNonNull(videoDescription)}"
-          duration="${ifNonNull(duration)}"
-          name="${ifNonNull(videoName)}"
+        <c4d-expressive-modal-close-button></c4d-expressive-modal-close-button>
+        <c4d-lightbox-video-player
+          description="${ifDefined(videoDescription)}"
+          duration="${ifDefined(duration)}"
+          name="${ifDefined(videoName)}"
           ?hide-caption="${hideCaption}"
-          .formatCaption="${ifNonNull(formatCaption)}"
-          .formatDuration="${ifNonNull(formatDuration)}">
-        </dds-lightbox-video-player>
-      </dds-expressive-modal>
+          .formatCaption="${ifDefined(formatCaption)}"
+          .formatDuration="${ifDefined(formatDuration)}">
+        </c4d-lightbox-video-player>
+      </c4d-expressive-modal>
     `;
   }
 
@@ -233,14 +234,14 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
    * A selector selecting the video player component.
    */
   static get selectorVideoPlayer() {
-    return `${ddsPrefix}-lightbox-video-player`;
+    return `${c4dPrefix}-lightbox-video-player`;
   }
 
   /**
    * The name of the custom event fired after the modal is closed upon a user gesture.
    */
   static get eventCloseModal() {
-    return `${ddsPrefix}-expressive-modal-closed`;
+    return `${c4dPrefix}-expressive-modal-closed`;
   }
 
   /**
@@ -254,4 +255,4 @@ class DDSLightboxVideoPlayerComposite extends ModalRenderMixin(
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLightboxVideoPlayerComposite;
+export default C4DLightboxVideoPlayerComposite;
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-container.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-container.ts
index 43180d9920a..274ee77f350 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-container.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player-container.ts
@@ -8,7 +8,7 @@
  */
 
 import { ActionCreatorsMapObject, Store } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import { MediaPlayerAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/kalturaPlayerAPI.d';
 import ConnectMixin from '../../globals/mixins/connect';
@@ -16,22 +16,22 @@ import {
   VideoPlayerContainerState,
   VideoPlayerContainerStateProps,
   VideoPlayerActions,
-  DDSVideoPlayerContainerMixin,
+  C4DVideoPlayerContainerMixin,
   mapStateToProps,
   mapDispatchToProps,
 } from '../video-player/video-player-container';
-import DDSLightboxVideoPlayerComposite from './lightbox-video-player-composite';
+import C4DLightboxVideoPlayerComposite from './lightbox-video-player-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Container component for lightbox media viewer, works with video data.
  *
- * @element dds-lightbox-video-player-container
+ * @element c4d-lightbox-video-player-container
  */
-@customElement(`${ddsPrefix}-lightbox-video-player-container`)
-class DDSLightboxVideoPlayerContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-lightbox-video-player-container`)
+class C4DLightboxVideoPlayerContainer extends ConnectMixin<
   VideoPlayerContainerState,
   MediaPlayerAPIActions,
   VideoPlayerContainerStateProps,
@@ -40,7 +40,7 @@ class DDSLightboxVideoPlayerContainer extends ConnectMixin<
   store as Store<VideoPlayerContainerState, MediaPlayerAPIActions>,
   mapStateToProps,
   mapDispatchToProps
-)(DDSVideoPlayerContainerMixin(DDSLightboxVideoPlayerComposite)) {}
+)(C4DVideoPlayerContainerMixin(C4DLightboxVideoPlayerComposite)) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLightboxVideoPlayerContainer;
+export default C4DLightboxVideoPlayerContainer;
diff --git a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player.ts b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player.ts
index 8717bc0a99b..ebaa2005cc0 100644
--- a/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player.ts
+++ b/packages/web-components/src/components/lightbox-media-viewer/lightbox-video-player.ts
@@ -7,29 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import removeHtmlTagEntities from '@carbon/ibmdotcom-utilities/es/utilities/removeHtmlTagEntities/removeHtmlTagEntities.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import DDSLightboxMediaViewerBody from './lightbox-media-viewer-body';
+import C4DLightboxMediaViewerBody from './lightbox-media-viewer-body';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The video content of lightbox media viewer.
  *
- * @element dds-lightbox-video-player
+ * @element c4d-lightbox-video-player
  * @slot title - The title content.
  * @slot description - The description content.
  */
-@customElement(`${ddsPrefix}-lightbox-video-player`)
-class DDSLightboxVideoPlayer extends DDSLightboxMediaViewerBody {
+@customElement(`${c4dPrefix}-lightbox-video-player`)
+class C4DLightboxVideoPlayer extends C4DLightboxMediaViewerBody {
   _renderDescription() {
     const { description } = this;
     return html`
@@ -40,8 +39,8 @@ class DDSLightboxVideoPlayer extends DDSLightboxMediaViewerBody {
   // eslint-disable-next-line class-methods-use-this
   _renderMedia() {
     return html`
-      <div class="${prefix}--video-player">
-        <div class="${prefix}--video-player__video-container">
+      <div class="${c4dPrefix}--video-player">
+        <div class="${c4dPrefix}--video-player__video-container">
           <slot></slot>
         </div>
       </div>
@@ -109,4 +108,4 @@ class DDSLightboxVideoPlayer extends DDSLightboxMediaViewerBody {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLightboxVideoPlayer;
+export default C4DLightboxVideoPlayer;
diff --git a/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx b/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx
index 630e5545174..ac5ccb9eb73 100644
--- a/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/link-list-section/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Link List Section
 
 > 💡 Check our
@@ -30,10 +32,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
 ### HTML
 
 ```html
-<dds-link-list-section>
-  <dds-content-section-heading>Lorem ipsum dolor sit amet</dds-content-section-heading>
-  <dds-link-list>
-    <dds-link-list-item href="https://example.com">
+<cds-link-list-section>
+  <cds-content-section-heading
+    >Lorem ipsum dolor sit amet</cds-content-section-heading
+  >
+  <cds-link-list>
+    <cds-link-list-item href="https://example.com">
       Learn more about Kubernetes
       <svg
         slot="footer"
@@ -44,12 +48,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Containerization A Complete Guide
       <svg
         slot="footer"
@@ -60,12 +64,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Microservices and containers
       <svg
         slot="footer"
@@ -76,12 +80,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Learn more about Kubernetes
       <svg
         slot="footer"
@@ -92,12 +96,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Containerization A Complete Guide
       <svg
         slot="footer"
@@ -108,12 +112,12 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-link-list-item>
-    <dds-link-list-item href="https://example.com">
+    </cds-link-list-item>
+    <cds-link-list-item href="https://example.com">
       Microservices and containers
       <svg
         slot="footer"
@@ -124,25 +128,27 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list-section/index.j
         aria-hidden="true"
         width="20"
         height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+        viewBox="0 0 20 20">
+        <path
+          d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
       </svg>
-    </dds-link-list-item>
-  </dds-link-list>
-</dds-link-list-section>
+    </cds-link-list-item>
+  </cds-link-list>
+</cds-link-list-section>
 ```
 
 ## Props
 
-<Props of="dds-content-section" />
+<Props of="cds-content-section" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector               | Description |
 | ------------------------- | ------------------------------------ | ----------- |
-| `<dds-link-list-section>` | data-autoid="dds--link-list-section" | Component   |
+| `<cds-link-list-section>` | data-autoid="cds--link-list-section" | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx b/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx
index 116cc1d4d7d..143b1ac2488 100644
--- a/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/link-list-section/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
 
@@ -18,36 +23,37 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSLinkListSection from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DLinkListSection from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 
 function App() {
   return (
-    <DDSLinkListSection>
-      <DDSLinkListHeading>Link list section heading</DDSLinkListHeading>
-      <DDSLinkList>
-        <DDSLinkListItem href="https://example.com">
-          Learn more about Kubernetes and automating deployment <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+    <C4DLinkListSection>
+      <C4DLinkListHeading>Link list section heading</C4DLinkListHeading>
+      <C4DLinkList>
+        <C4DLinkListItem href="https://example.com">
+          Learn more about Kubernetes and automating deployment{' '}
+          <ArrowRight20 slot="icon" />
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Containerization A Complete Guide <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Microservices and containers <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Learn more about Kubernetes <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Containerization A Complete Guide <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Microservices and containers <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-    </DDSLinkListSection>
+        </C4DLinkListItem>
+      </C4DLinkList>
+    </C4DLinkListSection>
   );
 }
 ```
@@ -58,10 +64,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector  | Compatibility selector | Description |
 | ------------------------ | ---------------------- | ----------- |
-| `<dds-link-list-section` | N/A                    | Component   |
+| `<cds-link-list-section` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx b/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx
index 813cb2546b9..0919ec46f63 100644
--- a/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx
+++ b/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.react.tsx
@@ -12,43 +12,44 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSLinkListSection from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
+import C4DLinkListSection from '@carbon/ibmdotcom-web-components/es/components-react/link-list-section/link-list-section';
 // @ts-ignore
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 // @ts-ignore
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
 // @ts-ignore
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 
 import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
-export const Default = args => {
+export const Default = (args) => {
   const { heading } = args?.LinkListSection ?? {};
   return (
-    <DDSLinkListSection>
-      <DDSLinkListHeading>{heading}</DDSLinkListHeading>
-      <DDSLinkList>
-        <DDSLinkListItem href="https://example.com">
-          Learn more about Kubernetes and automating deployment <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+    <C4DLinkListSection>
+      <C4DLinkListHeading>{heading}</C4DLinkListHeading>
+      <C4DLinkList>
+        <C4DLinkListItem href="https://example.com">
+          Learn more about Kubernetes and automating deployment{' '}
+          <ArrowRight20 slot="icon" />
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Containerization A Complete Guide <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Microservices and containers <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Learn more about Kubernetes <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Containerization A Complete Guide <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-        <DDSLinkListItem href="https://example.com">
+        </C4DLinkListItem>
+        <C4DLinkListItem href="https://example.com">
           Microservices and containers <ArrowRight20 slot="icon" />
-        </DDSLinkListItem>
-      </DDSLinkList>
-    </DDSLinkListSection>
+        </C4DLinkListItem>
+      </C4DLinkList>
+    </C4DLinkListSection>
   );
 };
 
@@ -59,7 +60,10 @@ export default {
     hasStoryPadding: true,
     knobs: {
       LinkListSection: () => {
-        const heading = textNullable('Link list section heading:', 'Lorem ipsum dolor sit amet');
+        const heading = textNullable(
+          'Link list section heading:',
+          'Lorem ipsum dolor sit amet'
+        );
         return {
           heading,
         };
diff --git a/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.ts b/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.ts
index 4305125b26f..b00fb15b62c 100644
--- a/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.ts
+++ b/packages/web-components/src/components/link-list-section/__stories__/link-list-section.stories.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import { html } from 'lit';
+import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
 import '../index';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.mdx';
@@ -16,30 +16,30 @@ import readme from './README.stories.mdx';
 export const Default = (args) => {
   const { heading } = args?.LinkListSection ?? {};
   return html`
-    <dds-link-list-section>
-      <dds-link-list-heading>${heading}</dds-link-list-heading>
-      <dds-link-list>
-        <dds-link-list-item href="https://example.com">
+    <c4d-link-list-section>
+      <c4d-link-list-heading>${heading}</c4d-link-list-heading>
+      <c4d-link-list>
+        <c4d-link-list-item href="https://example.com">
           Learn more about Kubernetes and automating deployment
           ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-        <dds-link-list-item href="https://example.com">
+        </c4d-link-list-item>
+        <c4d-link-list-item href="https://example.com">
           Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-        </dds-link-list-item>
-      </dds-link-list>
-    </dds-link-list-section>
+        </c4d-link-list-item>
+      </c4d-link-list>
+    </c4d-link-list-section>
   `;
 };
 
diff --git a/packages/web-components/src/components/link-list-section/__tests__/link-list-section.test.ts b/packages/web-components/src/components/link-list-section/__tests__/link-list-section.test.ts
index 90ff7f990f5..f8a28d5e4c4 100644
--- a/packages/web-components/src/components/link-list-section/__tests__/link-list-section.test.ts
+++ b/packages/web-components/src/components/link-list-section/__tests__/link-list-section.test.ts
@@ -1,21 +1,21 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import { Default } from '../__stories__/link-list-section.stories';
 
-describe('dds-link-list-section', function () {
+describe('c4d-link-list-section', function () {
   it('Renders properly', async function () {
     render(Default({ parameters: {} }), document.body);
     await Promise.resolve();
     expect(
-      document.body.querySelector('dds-link-list-section')
+      document.body.querySelector('c4d-link-list-section')
     ).toMatchSnapshot({ mode: 'shadow' });
   });
 
diff --git a/packages/web-components/src/components/link-list-section/link-list-section.scss b/packages/web-components/src/components/link-list-section/link-list-section.scss
index 6bfe9e002e1..5db0e278394 100644
--- a/packages/web-components/src/components/link-list-section/link-list-section.scss
+++ b/packages/web-components/src/components/link-list-section/link-list-section.scss
@@ -1,29 +1,10 @@
-//
-// 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 '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-section/content-section';
-
-:host(#{$dds-prefix}-link-list-section) {
-  display: block;
-
-  .#{$prefix}--content-section__left {
-    padding-top: 0;
-  }
-
-  .#{$prefix}--content-section__children {
-    margin-top: 0;
-
-    @include carbon--breakpoint('lg') {
-      @include carbon--make-col(8, 16);
-    }
-  }
-
-  ::slotted(#{$dds-prefix}-content-section-heading) {
-    margin-bottom: 0;
-  }
-}
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2022
+ *
+ * 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 '@carbon/ibmdotcom-styles/scss/components/link-list-section';
diff --git a/packages/web-components/src/components/link-list-section/link-list-section.ts b/packages/web-components/src/components/link-list-section/link-list-section.ts
index 15c79ccb83a..6f8c4b3fd1f 100644
--- a/packages/web-components/src/components/link-list-section/link-list-section.ts
+++ b/packages/web-components/src/components/link-list-section/link-list-section.ts
@@ -6,32 +6,30 @@
  * 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 { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './link-list-section.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSContentSection from '../content-section/content-section';
+import C4DContentSection from '../content-section/content-section';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Link list.
  *
- * @element dds-link-list
+ * @element c4d-link-list
  * @slot heading - The heading content.
  */
-@customElement(`${ddsPrefix}-link-list-section`)
-class DDSLinkListSection extends StableSelectorMixin(DDSContentSection) {
+@customElement(`${c4dPrefix}-link-list-section`)
+class C4DLinkListSection extends StableSelectorMixin(C4DContentSection) {
   _handleSlotChange = (event: Event) => {
     const slot = (event.target as HTMLSlotElement)
       .assignedElements()
       .filter(
         (elem) =>
           elem.localName ===
-          (this.constructor as typeof DDSLinkListSection).linkListSelector
+          (this.constructor as typeof C4DLinkListSection).linkListSelector
       )[0];
     if (
       slot &&
@@ -58,15 +56,20 @@ class DDSLinkListSection extends StableSelectorMixin(DDSContentSection) {
   }
 
   static get linkListSelector() {
-    return `${ddsPrefix}-link-list`;
+    return `${c4dPrefix}-link-list`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 
   static get stableSelector() {
-    return `${ddsPrefix}--link-list-section`;
+    return `${c4dPrefix}--link-list-section`;
   }
 }
 
+console.warn(
+  'The link-list-section component has been deprecated in favor of the content-section/block and link-list end of section variant components. ' +
+    'See content-section/block and link-list documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkListSection;
+export default C4DLinkListSection;
diff --git a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
index 044bee5786a..04fbc5d4a7c 100644
--- a/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/link-list/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Link List
 
 > 💡 Check our
@@ -30,39 +32,39 @@ import '@carbon/ibmdotcom-web-components/es/components/link-list/index.js';
 ### HTML
 
 ```html
-<dds-link-list>
-  <dds-link-list-heading>Tutorial</dds-link-list-heading>
-  <dds-link-list-item-card href="https://example.com">
+<cds-link-list>
+  <cds-link-list-heading>Tutorial</cds-link-list-heading>
+  <cds-link-list-item href="https://example.com">
     <p>Copy text</p>
-    <dds-card-footer>
-      <svg
-        slot="icon"
-        focusable="false"
-        preserveAspectRatio="xMidYMid meet"
-        xmlns="http://www.w3.org/2000/svg"
-        fill="currentColor"
-        aria-hidden="true"
-        width="20"
-        height="20"
-        viewBox="0 0 20 20"
-      >
-        <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-      </svg>
-    </dds-card-footer>
-  </dds-link-list-item-card>
-</dds-link-list>
+    <svg
+      slot="icon"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      aria-hidden="true"
+      width="20"
+      height="20"
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+    </svg>
+  </cds-link-list-item>
+</cds-link-list>
 ```
 
 ## Props
 
-<Props of="dds-link-list" />
+<Props of="cds-link-list" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector       | Description |
 | ----------------------- | ---------------------------- | ----------- |
-| `<dds-link-list>`       | data-autoid="dds--link-list" | Component   |
+| `<cds-link-list>`       | data-autoid="cds--link-list" | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx b/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx
index eab78340e68..69e3deec1b7 100644
--- a/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/link-list/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 
@@ -18,58 +23,51 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
-import DDSLinkListItemCard from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item-card';
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 
 function App() {
   return (
-    <DDSLinkList type="default">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCard href="https://example.com">
+    <C4DLinkList type="default">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItem href="https://example.com">
         <p>Learn more about Kubernetes</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLinkListItemCard>
-      <DDSLinkListItemCard href="https://example.com">
+        <ArrowRight20 slot="icon" />
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com">
         <p>Containerization A Complete Guide</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLinkListItemCard>
-    </DDSLinkList>
+        <ArrowRight20 slot="icon" />
+      </C4DLinkListItem>
+    </C4DLinkList>
   );
 }
 ```
 
 ## Using video CTA type
 
-If using the video CTA type in `Link list` component, make sure wrap the component within the `DDSVideoCTAContainer`.
+If using the video CTA type in `Link list` component, make sure wrap the
+component within the `C4DVideoCTAContainer`.
 
 ```javascript
 function App() {
   return (
-    <DDSVideoCTAContainer>
-      <DDSLinkList type="default">
-        <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-        <DDSLinkListItemCard href="https://example.com">
+    <C4DVideoCTAContainer>
+      <C4DLinkList type="default">
+        <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+        <C4DLinkListItemCTA href="https://example.com">
           <p>Learn more about Kubernetes</p>
-          <DDSCardFooter>
-            <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSLinkListItemCard>
-        <DDSLinkListItemCard href="https://example.com">
+          <ArrowRight20 slot="icon" />
+        </C4DLinkListItemCTA>
+        <C4DLinkListItemCTA href="https://example.com">
           <p>Containerization A Complete Guide</p>
-          <DDSCardFooter>
-            <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSLinkListItemCard>
-      </DDSLinkList>
-    </DDSVideoCTAContainer>
+          <ArrowRight20 slot="icon" />
+        </C4DLinkListItemCTA>
+      </C4DLinkList>
+    </C4DVideoCTAContainer>
   );
 }
 ```
@@ -80,10 +78,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector         | Description |
 | ----------------------- | ------------------------------ | ----------- |
-| `<dds-link-list>`       | `data-autoid="dds--link-list"` | Component   |
+| `<cds-link-list>`       | `data-autoid="cds--link-list"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx b/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx
index 8dd9348a7a4..f3cf17fb5dc 100644
--- a/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx
+++ b/packages/web-components/src/components/link-list/__stories__/link-list.stories.react.tsx
@@ -13,23 +13,19 @@ import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 // @ts-ignore
-import DDSLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
+import C4DLinkListHeading from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-heading';
 // @ts-ignore
-import DDSLinkListItemCard from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item-card';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 // @ts-ignore
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 // @ts-ignore
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
 // @ts-ignore
-import DDSLinkListItemCardCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-card-cta';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 // @ts-ignore
-import DDSVideoCTAContainer from '@carbon/ibmdotcom-web-components/es/components-react/cta/video-cta-container';
-// @ts-ignore
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-// @ts-ignore
-import DDSCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
+import C4DCardCTAFooter from '@carbon/ibmdotcom-web-components/es/components-react/cta/card-cta-footer';
 
 import { CTA_TYPE } from '../../cta/defs';
 import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
@@ -41,8 +37,9 @@ const hrefsForType = {
   [CTA_TYPE.LOCAL]: 'https://www.example.com',
   [CTA_TYPE.JUMP]: '#example',
   [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
-  [CTA_TYPE.DOWNLOAD]: 'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.DOWNLOAD]:
+    'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
 };
 
 const knobNamesForType = {
@@ -55,7 +52,6 @@ const knobNamesForType = {
 };
 
 const types = {
-  None: null,
   [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
   [`Jump (${CTA_TYPE.JUMP})`]: CTA_TYPE.JUMP,
   [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
@@ -63,58 +59,68 @@ const types = {
   [`Video (${CTA_TYPE.VIDEO})`]: CTA_TYPE.VIDEO,
 };
 
-export const Default = args => {
+export const Default = (args) => {
   const { ctaType, download, href } = args?.LinkListItem ?? {};
   return !ctaType ? (
-    <DDSLinkList type="default">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCard href="https://example.com">
+    <C4DLinkList type="default">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItem href="https://example.com" type="default">
         <p>Learn more about Kubernetes</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLinkListItemCard>
-      <DDSLinkListItemCard href="https://example.com">
+        <ArrowRight20 slot="icon" />
+      </C4DLinkListItem>
+      <C4DLinkListItem href="https://example.com" type="default">
         <p>Containerization A Complete Guide</p>
-        <DDSCardFooter>
-          <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLinkListItemCard>
-    </DDSLinkList>
+        <ArrowRight20 slot="icon" />
+      </C4DLinkListItem>
+    </C4DLinkList>
   ) : (
-    <DDSLinkList type="default">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCardCTA href={href} cta-type={ctaType} download={download}>
+    <C4DLinkList type="default">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItemCTA
+        href={href}
+        cta-type={ctaType}
+        download={download}
+        type="default">
         {ctaType !== CTA_TYPE.VIDEO && <p>Learn more about Kubernetes</p>}
-        <DDSCardCTAFooter />
-      </DDSLinkListItemCardCTA>
-      <DDSLinkListItemCardCTA href={href} cta-type={ctaType} download={download}>
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA
+        href={href}
+        cta-type={ctaType}
+        download={download}
+        type="default">
         {ctaType !== CTA_TYPE.VIDEO && <p>Containerization A Complete Guide</p>}
-        <DDSCardCTAFooter />
-      </DDSLinkListItemCardCTA>
-    </DDSLinkList>
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
   );
 };
 
 Default.story = {
   parameters: {
-    colLgClass: 'bx--col-lg-3',
+    colLgClass: 'cds--col-lg-3',
     knobs: {
       LinkListItem: () => {
-        const ctaType = select('CTA type (cta-type)', types, null);
+        const ctaType = select('CTA type (cta-type)', types, CTA_TYPE.LOCAL);
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : textNullable('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable(
+                'Download target (download)',
+                'IBM_Annual_Report_2019.pdf'
+              );
         return {
           ctaType,
           download,
-          href: textNullable(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
         };
       },
     },
     propsSet: {
       default: {
         LinkListItem: {
-          ctaType: null,
+          ctaType: CTA_TYPE.LOCAL,
           download: undefined,
           href: 'https://www.example.com',
         },
@@ -123,50 +129,75 @@ Default.story = {
   },
 };
 
-export const Horizontal = args => {
-  const { ctaType, download, href, iconPlacement = ICON_PLACEMENT.RIGHT } = args?.LinkListItem ?? {};
+export const Horizontal = (args) => {
+  const {
+    ctaType,
+    download,
+    href,
+    iconPlacement = ICON_PLACEMENT.RIGHT,
+  } = args?.LinkListItem ?? {};
   return !ctaType ? (
-    <DDSLinkList type="horizontal">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItem icon-placement={iconPlacement} href="https://example.com">
+    <C4DLinkList type="horizontal">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItem
+        icon-placement={iconPlacement}
+        href="https://example.com">
         Learn more about Kubernetes <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem icon-placement={iconPlacement} href="https://example.com">
+      </C4DLinkListItem>
+      <C4DLinkListItem
+        icon-placement={iconPlacement}
+        href="https://example.com">
         Containerization A Complete Guide <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-    </DDSLinkList>
+      </C4DLinkListItem>
+    </C4DLinkList>
   ) : (
-    <DDSLinkList type="horizontal">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCTA icon-placement={iconPlacement} href={href} cta-type={ctaType} download={download}>
+    <C4DLinkList type="horizontal">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItemCTA
+        icon-placement={iconPlacement}
+        href={href}
+        cta-type={ctaType}
+        download={download}>
         {ctaType !== CTA_TYPE.VIDEO && 'Learn more about Kubernetes'}
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement={iconPlacement} href={href} cta-type={ctaType} download={download}>
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA
+        icon-placement={iconPlacement}
+        href={href}
+        cta-type={ctaType}
+        download={download}>
         {ctaType !== CTA_TYPE.VIDEO && 'Containerization A Complete Guide'}
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
   );
 };
 
 Horizontal.story = {
   parameters: {
-    colLgClass: 'bx--col-lg-10',
+    colLgClass: 'cds--col-lg-10',
     knobs: {
       LinkListItem: () => {
-        const ctaType = select('CTA type (cta-type)', types, null);
+        const ctaType = select('CTA type (cta-type)', types, CTA_TYPE.LOCAL);
         const download =
-          ctaType !== CTA_TYPE.DOWNLOAD ? undefined : textNullable('Download target (download)', 'IBM_Annual_Report_2019.pdf');
+          ctaType !== CTA_TYPE.DOWNLOAD
+            ? undefined
+            : textNullable(
+                'Download target (download)',
+                'IBM_Annual_Report_2019.pdf'
+              );
         return {
           ctaType,
           download,
-          href: textNullable(knobNamesForType[ctaType ?? CTA_TYPE.REGULAR], hrefsForType[ctaType ?? CTA_TYPE.REGULAR]),
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
         };
       },
     },
     propsSet: {
       default: {
         LinkListItem: {
-          ctaType: null,
+          ctaType: CTA_TYPE.LOCAL,
           download: undefined,
           href: 'https://www.example.com',
         },
@@ -175,87 +206,60 @@ Horizontal.story = {
   },
 };
 
-export const Vertical = args => {
-  const { ctaType, download, href, iconPlacement = ICON_PLACEMENT.RIGHT } = args?.LinkListItem ?? {};
+export const Vertical = (args) => {
+  const {
+    ctaType,
+    download,
+    href,
+    iconPlacement = ICON_PLACEMENT.RIGHT,
+  } = args?.LinkListItem ?? {};
   return !ctaType ? (
-    <DDSLinkList type="vertical">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItem icon-placement={iconPlacement} href="https://example.com">
-        Learn more about Kubernetes <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem icon-placement={iconPlacement} href="https://example.com">
-        Containerization A Complete Guide <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-    </DDSLinkList>
+    <C4DLinkList type="vertical">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItem
+        icon-placement={iconPlacement}
+        href="https://example.com">
+        <p>
+          Learn more about Kubernetes <ArrowRight20 slot="icon" />
+        </p>
+      </C4DLinkListItem>
+      <C4DLinkListItem
+        icon-placement={iconPlacement}
+        href="https://example.com">
+        <p>
+          Containerization A Complete Guide <ArrowRight20 slot="icon" />
+        </p>
+      </C4DLinkListItem>
+    </C4DLinkList>
   ) : (
-    <DDSLinkList type="vertical">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCTA icon-placement={iconPlacement} href={href} cta-type={ctaType} download={download}>
+    <C4DLinkList type="vertical">
+      <C4DLinkListHeading>Tutorial</C4DLinkListHeading>
+      <C4DLinkListItemCTA
+        icon-placement={iconPlacement}
+        href={href}
+        cta-type={ctaType}
+        download={download}>
         {ctaType !== CTA_TYPE.VIDEO && 'Learn more about Kubernetes'}
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA icon-placement={iconPlacement} href={href} cta-type={ctaType} download={download}>
+      </C4DLinkListItemCTA>
+      <C4DLinkListItemCTA
+        icon-placement={iconPlacement}
+        href={href}
+        cta-type={ctaType}
+        download={download}>
         {ctaType !== CTA_TYPE.VIDEO && 'Containerization A Complete Guide'}
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
+      </C4DLinkListItemCTA>
+    </C4DLinkList>
   );
 };
 
 Vertical.story = {
   parameters: {
-    colLgClass: 'bx--col-lg-4',
+    colLgClass: 'cds--col-lg-4',
     knobs: Horizontal.story.parameters.knobs,
     propsSet: {
       default: {
         LinkListItem: {
-          ctaType: null,
-          download: undefined,
-          href: 'https://www.example.com',
-        },
-      },
-    },
-  },
-};
-
-export const EndOfSection = args => {
-  const { ctaType, download, href } = args?.LinkListItem ?? {};
-  return !ctaType ? (
-    <DDSLinkList type="end">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItem href="https://example.com">
-        Learn more about Kubernetes <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
-        Containerization A Complete Guide <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-      <DDSLinkListItem href="https://example.com">
-        Microservices and containers <ArrowRight20 slot="icon" />
-      </DDSLinkListItem>
-    </DDSLinkList>
-  ) : (
-    <DDSLinkList type="vertical">
-      <DDSLinkListHeading>Tutorial</DDSLinkListHeading>
-      <DDSLinkListItemCTA href={href} cta-type={ctaType} download={download}>
-        {ctaType !== CTA_TYPE.VIDEO && 'Learn more about Kubernetes'}
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA href={href} cta-type={ctaType} download={download}>
-        {ctaType !== CTA_TYPE.VIDEO && 'Containerization A Complete Guide'}
-      </DDSLinkListItemCTA>
-      <DDSLinkListItemCTA href={href} cta-type={ctaType} download={download}>
-        {ctaType !== CTA_TYPE.VIDEO && 'Microservices and containers'}
-      </DDSLinkListItemCTA>
-    </DDSLinkList>
-  );
-};
-
-EndOfSection.story = {
-  name: 'End of section',
-  parameters: {
-    colLgClass: 'bx--col-lg-6',
-    knobs: Default.story.parameters.knobs,
-    propsSet: {
-      default: {
-        LinkListItem: {
-          ctaType: null,
+          ctaType: CTA_TYPE.LOCAL,
           download: undefined,
           href: 'https://www.example.com',
         },
@@ -274,11 +278,11 @@ export default {
     (story, { parameters }) => {
       const { colLgClass } = parameters;
       return (
-        <DDSVideoCTAContainer class="bx--grid">
-          <div className="bx--row">
-            <div className={`${colLgClass} bx--col-sm-4`}>{story()}</div>
+        <C4DVideoCTAContainer class="cds--grid">
+          <div className="cds--row">
+            <div className={`${colLgClass} cds--col-sm-4`}>{story()}</div>
           </div>
-        </DDSVideoCTAContainer>
+        </C4DVideoCTAContainer>
       );
     },
   ],
diff --git a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
index f7e4e711429..a475098bf5a 100644
--- a/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
+++ b/packages/web-components/src/components/link-list/__stories__/link-list.stories.ts
@@ -7,16 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { select } from '@storybook/addon-knobs';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import { CTA_TYPE } from '../../cta/defs';
 import { ICON_PLACEMENT } from '../../link-with-icon/link-with-icon';
 import '../../cta/video-cta-container';
 import '../../cta/link-list-item-cta';
-import '../../cta/link-list-item-card-cta';
 import '../../card/card-footer';
 import '../index';
 import readme from './README.stories.mdx';
@@ -28,7 +27,7 @@ const hrefsForType = {
   [CTA_TYPE.EXTERNAL]: 'https://www.example.com',
   [CTA_TYPE.DOWNLOAD]:
     'https://www.ibm.com/annualreport/assets/downloads/IBM_Annual_Report_2019.pdf',
-  [CTA_TYPE.VIDEO]: '1_9h94wo6b',
+  [CTA_TYPE.VIDEO]: '0_ibuqxqbe',
 };
 
 const knobNamesForType = {
@@ -41,7 +40,6 @@ const knobNamesForType = {
 };
 
 const types = {
-  None: null,
   [`Local (${CTA_TYPE.LOCAL})`]: CTA_TYPE.LOCAL,
   [`Jump (${CTA_TYPE.JUMP})`]: CTA_TYPE.JUMP,
   [`External (${CTA_TYPE.EXTERNAL})`]: CTA_TYPE.EXTERNAL,
@@ -53,50 +51,56 @@ export const Default = (args) => {
   const { ctaType, download, href } = args?.LinkListItem ?? {};
   return !ctaType
     ? html`
-        <dds-link-list type="default">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item-card href="https://example.com">
-            <p>Learn more about Kubernetes</p>
-            <dds-card-footer>
-              ${ArrowRight20({ slot: 'icon' })}
-            </dds-card-footer>
-          </dds-link-list-item-card>
-          <dds-link-list-item-card href="https://example.com">
-            <p>Containerization A Complete Guide</p>
-            <dds-card-footer>
-              ${ArrowRight20({ slot: 'icon' })}
-            </dds-card-footer>
-          </dds-link-list-item-card>
-        </dds-link-list>
+        <c4d-link-list type="default">
+          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+          <c4d-link-list-item href="https://example.com">
+            Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
+            Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
+          </c4d-link-list-item>
+          <c4d-link-list-item href="https://example.com">
+            Microservices and containers ${ArrowRight20({ slot: 'icon' })}
+          </c4d-link-list-item>
+        </c4d-link-list>
       `
     : html`
-        <dds-link-list type="default">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item-card-cta
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
+        <c4d-link-list type="default">
+          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+          <c4d-link-list-item-cta
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="default">
             ${ctaType !== CTA_TYPE.VIDEO
-              ? html` <p>Learn more about Kubernetes</p> `
+              ? html` Learn more about Kubernetes `
               : null}
-            <dds-card-cta-footer></dds-card-cta-footer>
-          </dds-link-list-item-card-cta>
-          <dds-link-list-item-card-cta
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
+          </c4d-link-list-item-cta>
+          <c4d-link-list-item-cta
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="default">
             ${ctaType !== CTA_TYPE.VIDEO
-              ? html` <p>Containerization A Complete Guide</p> `
+              ? html` Containerization A Complete Guide `
               : null}
-            <dds-card-cta-footer></dds-card-cta-footer>
-          </dds-link-list-item-card-cta>
-        </dds-link-list>
+          </c4d-link-list-item-cta>
+          <c4d-link-list-item-cta
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="default">
+            ${ctaType !== CTA_TYPE.VIDEO
+              ? html` Microservices and containers `
+              : null}
+          </c4d-link-list-item-cta>
+        </c4d-link-list>
       `;
 };
 
 Default.story = {
   parameters: {
-    colLgClass: 'bx--col-lg-3',
+    colLgClass: 'cds--col-lg-6',
     knobs: {
       LinkListItem: () => {
         const ctaType = select('CTA type (cta-type)', types, null);
@@ -138,48 +142,52 @@ export const Horizontal = (args) => {
   } = args?.LinkListItem ?? {};
   return !ctaType
     ? html`
-        <dds-link-list type="horizontal">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item
+        <c4d-link-list type="horizontal">
+          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+          <c4d-link-list-item
             icon-placement="${iconPlacement}"
-            href="https://example.com">
+            href="https://example.com"
+            type="horizontal">
             Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item
+          </c4d-link-list-item>
+          <c4d-link-list-item
             icon-placement="${iconPlacement}"
-            href="https://example.com">
+            href="https://example.com"
+            type="horizontal">
             Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-        </dds-link-list>
+          </c4d-link-list-item>
+        </c4d-link-list>
       `
     : html`
-        <dds-link-list type="horizontal">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item-cta
+        <c4d-link-list type="horizontal">
+          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+          <c4d-link-list-item-cta
             icon-placement="${iconPlacement}"
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="horizontal">
             ${ctaType !== CTA_TYPE.VIDEO
               ? html` Learn more about Kubernetes `
               : null}
-          </dds-link-list-item-cta>
-          <dds-link-list-item-cta
+          </c4d-link-list-item-cta>
+          <c4d-link-list-item-cta
             icon-placement="${iconPlacement}"
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="horizontal">
             ${ctaType !== CTA_TYPE.VIDEO
               ? html` Containerization A Complete Guide `
               : null}
-          </dds-link-list-item-cta>
-        </dds-link-list>
+          </c4d-link-list-item-cta>
+        </c4d-link-list>
       `;
 };
 
 Horizontal.story = {
   parameters: {
-    colLgClass: 'bx--col-lg-10',
+    colLgClass: 'cds--col-lg-10',
     knobs: {
       LinkListItem: () => {
         const ctaType = select('CTA type (cta-type)', types, null);
@@ -221,48 +229,52 @@ export const Vertical = (args) => {
   } = args?.LinkListItem ?? {};
   return !ctaType
     ? html`
-        <dds-link-list type="vertical">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item
+        <c4d-link-list type="vertical">
+          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+          <c4d-link-list-item
             icon-placement="${iconPlacement}"
-            href="https://example.com">
+            href="https://example.com"
+            type="horizontal">
             Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item
+          </c4d-link-list-item>
+          <c4d-link-list-item
             icon-placement="${iconPlacement}"
-            href="https://example.com">
+            href="https://example.com"
+            type="horizontal">
             Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-        </dds-link-list>
+          </c4d-link-list-item>
+        </c4d-link-list>
       `
     : html`
-        <dds-link-list type="vertical">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item-cta
+        <c4d-link-list type="vertical">
+          <c4d-link-list-heading>Tutorial</c4d-link-list-heading>
+          <c4d-link-list-item-cta
             icon-placement="${iconPlacement}"
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="horizontal">
             ${ctaType !== CTA_TYPE.VIDEO
               ? html` Learn more about Kubernetes `
               : null}
-          </dds-link-list-item-cta>
-          <dds-link-list-item-cta
+          </c4d-link-list-item-cta>
+          <c4d-link-list-item-cta
             icon-placement="${iconPlacement}"
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
+            href="${ifDefined(href)}"
+            cta-type="${ifDefined(ctaType)}"
+            download="${ifDefined(download)}"
+            type="horizontal">
             ${ctaType !== CTA_TYPE.VIDEO
               ? html` Containerization A Complete Guide `
               : null}
-          </dds-link-list-item-cta>
-        </dds-link-list>
+          </c4d-link-list-item-cta>
+        </c4d-link-list>
       `;
 };
 
 Vertical.story = {
   parameters: {
-    colLgClass: 'bx--col-lg-4',
+    colLgClass: 'cds--col-lg-4',
     knobs: Horizontal.story.parameters.knobs,
     propsSet: {
       default: {
@@ -276,71 +288,6 @@ Vertical.story = {
   },
 };
 
-export const EndOfSection = (args) => {
-  const { ctaType, download, href } = args?.LinkListItem ?? {};
-  return !ctaType
-    ? html`
-        <dds-link-list type="end">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item href="https://example.com">
-            Learn more about Kubernetes ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
-            Containerization A Complete Guide ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-          <dds-link-list-item href="https://example.com">
-            Microservices and containers ${ArrowRight20({ slot: 'icon' })}
-          </dds-link-list-item>
-        </dds-link-list>
-      `
-    : html`
-        <dds-link-list type="end">
-          <dds-link-list-heading>Tutorial</dds-link-list-heading>
-          <dds-link-list-item-cta
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Learn more about Kubernetes `
-              : null}
-          </dds-link-list-item-cta>
-          <dds-link-list-item-cta
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Containerization A Complete Guide `
-              : null}
-          </dds-link-list-item-cta>
-          <dds-link-list-item-cta
-            href="${ifNonNull(href)}"
-            cta-type="${ifNonNull(ctaType)}"
-            download="${ifNonNull(download)}">
-            ${ctaType !== CTA_TYPE.VIDEO
-              ? html` Microservices and containers `
-              : null}
-          </dds-link-list-item-cta>
-        </dds-link-list>
-      `;
-};
-
-EndOfSection.story = {
-  name: 'End of section',
-  parameters: {
-    colLgClass: 'bx--col-lg-6',
-    knobs: Default.story.parameters.knobs,
-    propsSet: {
-      default: {
-        LinkListItem: {
-          ctaType: null,
-          download: undefined,
-          href: 'https://www.example.com',
-        },
-      },
-    },
-  },
-};
-
 export default {
   title: 'Components/Link list',
   parameters: {
@@ -351,11 +298,11 @@ export default {
     (story, { parameters }) => {
       const { colLgClass } = parameters;
       return html`
-        <dds-video-cta-container class="bx--grid">
-          <div class="bx--row">
-            <div class="bx--col-sm-4 ${colLgClass}">${story()}</div>
+        <c4d-video-cta-container class="cds--grid">
+          <div class="cds--row">
+            <div class="cds--col-sm-4 ${colLgClass}">${story()}</div>
           </div>
-        </dds-video-cta-container>
+        </c4d-video-cta-container>
       `;
     },
   ],
diff --git a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
index 21c4ef54c0e..1add7b93921 100644
--- a/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
+++ b/packages/web-components/src/components/link-list/__tests__/link-list.test.ts
@@ -1,25 +1,24 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import {
   Default,
   Horizontal,
   Vertical,
-  EndOfSection,
 } from '../__stories__/link-list.stories';
 
-describe('dds-link-list', function () {
+describe('c4d-link-list', function () {
   it('Renders Default', async function () {
     render(Default({ parameters: {} }), document.body);
     await Promise.resolve();
-    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({
+    expect(document.body.querySelector('c4d-link-list')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
@@ -29,7 +28,7 @@ describe('dds-link-list', function () {
       Horizontal({
         parameters: {
           props: {
-            'dds-link-list': {
+            'c4d-link-list': {
               iconPlacement: 'left',
             },
           },
@@ -38,7 +37,7 @@ describe('dds-link-list', function () {
       document.body
     );
     await Promise.resolve();
-    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({
+    expect(document.body.querySelector('c4d-link-list')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
@@ -48,7 +47,7 @@ describe('dds-link-list', function () {
       Vertical({
         parameters: {
           props: {
-            'dds-link-list': {
+            'c4d-link-list': {
               iconPlacement: 'left',
             },
           },
@@ -57,15 +56,7 @@ describe('dds-link-list', function () {
       document.body
     );
     await Promise.resolve();
-    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({
-      mode: 'shadow',
-    });
-  });
-
-  it('Renders End of section', async function () {
-    render(EndOfSection({ parameters: {} }), document.body);
-    await Promise.resolve();
-    expect(document.body.querySelector('dds-link-list')).toMatchSnapshot({
+    expect(document.body.querySelector('c4d-link-list')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
diff --git a/packages/web-components/src/components/link-list/defs.ts b/packages/web-components/src/components/link-list/defs.ts
index 4d9c7a57248..66257a25936 100644
--- a/packages/web-components/src/components/link-list/defs.ts
+++ b/packages/web-components/src/components/link-list/defs.ts
@@ -33,7 +33,7 @@ export enum LINK_LIST_TYPE {
 }
 
 /**
- * Link list item type. Should mirror `LINK_LIST_TYPE` of parent `<dds-link-list>`.
+ * Link list item type. Should mirror `LINK_LIST_TYPE` of parent `<c4d-link-list>`.
  */
 export enum LINK_LIST_ITEM_TYPE {
   /**
@@ -42,7 +42,7 @@ export enum LINK_LIST_ITEM_TYPE {
   DEFAULT = 'default',
 
   /**
-   * End of Section variant - End
+   * End of section
    */
   END = 'end',
 }
diff --git a/packages/web-components/src/components/link-list/index.ts b/packages/web-components/src/components/link-list/index.ts
index cd55a41ecae..6f4c0561565 100644
--- a/packages/web-components/src/components/link-list/index.ts
+++ b/packages/web-components/src/components/link-list/index.ts
@@ -9,5 +9,4 @@
 
 import './link-list';
 import './link-list-heading';
-import './link-list-item-card';
 import './link-list-item';
diff --git a/packages/web-components/src/components/link-list/link-list-heading.ts b/packages/web-components/src/components/link-list/link-list-heading.ts
index b06ec5ef5e9..c0daf87f95c 100644
--- a/packages/web-components/src/components/link-list/link-list-heading.ts
+++ b/packages/web-components/src/components/link-list/link-list-heading.ts
@@ -6,21 +6,22 @@
  * 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 { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './link-list.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The heading content of link list.
  *
- * @element dds-link-list-heading
+ * @element c4d-link-list-heading
  */
-@customElement(`${ddsPrefix}-link-list-heading`)
-class DDSLinkListHeading extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-link-list-heading`)
+class C4DLinkListHeading extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this link list heading should be in.
    */
@@ -42,7 +43,7 @@ class DDSLinkListHeading extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--link-list-heading`;
+    return `${c4dPrefix}--link-list-heading`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -50,4 +51,4 @@ class DDSLinkListHeading extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkListHeading;
+export default C4DLinkListHeading;
diff --git a/packages/web-components/src/components/link-list/link-list-item-card.ts b/packages/web-components/src/components/link-list/link-list-item-card.ts
deleted file mode 100644
index bfa8ebb6a53..00000000000
--- a/packages/web-components/src/components/link-list/link-list-item-card.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSCardLink from '../card-link/card-link';
-import styles from './link-list.scss';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Link list item.
- *
- * @element dds-link-list-item-card
- */
-@customElement(`${ddsPrefix}-link-list-item-card`)
-class DDSLinkListItem extends DDSCardLink {
-  connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'listitem');
-    }
-    super.connectedCallback();
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}--link-list-item-card`;
-  }
-
-  // `styles` here is a `CSSResult` generated by custom WebPack loader
-  static get styles() {
-    return css`
-      ${super.styles}${styles}
-    `;
-  }
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkListItem;
diff --git a/packages/web-components/src/components/link-list/link-list-item.ts b/packages/web-components/src/components/link-list/link-list-item.ts
index 49fc927cba9..c97a16632b2 100644
--- a/packages/web-components/src/components/link-list/link-list-item.ts
+++ b/packages/web-components/src/components/link-list/link-list-item.ts
@@ -7,23 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSLinkWithIcon from '../link-with-icon/link-with-icon';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
 import styles from './link-list.scss';
 
 import { LINK_LIST_ITEM_TYPE } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Link list item.
  *
- * @element dds-link-list-item
+ * @element c4d-link-list-item
  */
-@customElement(`${ddsPrefix}-link-list-item`)
-class DDSLinkListItem extends DDSLinkWithIcon {
+@customElement(`${c4dPrefix}-link-list-item`)
+class C4DLinkListItem extends C4DLinkWithIcon {
   /**
    * Defines the style of the link-list-item: `default` or `end`
    */
@@ -44,7 +45,7 @@ class DDSLinkListItem extends DDSLinkWithIcon {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--link-list-item`;
+    return `${c4dPrefix}--link-list-item`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -56,4 +57,4 @@ class DDSLinkListItem extends DDSLinkWithIcon {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkListItem;
+export default C4DLinkListItem;
diff --git a/packages/web-components/src/components/link-list/link-list.scss b/packages/web-components/src/components/link-list/link-list.scss
index 1a70c242126..6cea2da53c7 100644
--- a/packages/web-components/src/components/link-list/link-list.scss
+++ b/packages/web-components/src/components/link-list/link-list.scss
@@ -7,150 +7,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/link-list/index';
-@import '../../globals/scss/box-sizing';
-@import '../../../../styles/scss/globals/utils/hang';
-
-:host(#{$dds-prefix}-link-list-heading),
-:host(#{$dds-prefix}-link-list-item) {
-  display: block;
-
-  .#{$prefix}--link {
-    cursor: pointer;
-  }
-}
-
-:host(#{$dds-prefix}-link-list-item) {
-  &:focus {
-    outline: none;
-  }
-}
-
-:host(#{$dds-prefix}-link-list-item-card) .#{$prefix}--link:focus {
-  outline: 2px solid $focus;
-  outline-offset: -2px;
-}
-
-:host(#{$dds-prefix}-link-list-item)
-  .bx--link-with-icon__icon-left
-  ::slotted(svg[slot='icon']),
-:host(#{$dds-prefix}-link-list-item-cta)
-  .bx--link-with-icon__icon-left
-  ::slotted(svg[slot='icon']) {
-  min-width: 20px;
-  min-height: 20px;
-}
-
-:host(#{$dds-prefix}-link-list-item)[type='end'],
-:host(#{$dds-prefix}-link-list-item-cta)[type='end'] {
-  outline: none;
-
-  &:hover {
-    .#{$prefix}--link {
-      text-decoration: none;
-      background: $hover-ui;
-    }
-  }
-
-  .#{$prefix}--link {
-    // TODO: See if there is a better solution than an internal custom property
-    padding: var(--#{$dds-prefix}--link-list-item--anchor-padding, 0);
-    display: flex;
-  }
-}
-
-:host(#{$dds-prefix}-link-list):last-of-type {
-  padding-bottom: $carbon--layout-05;
-}
-
-:host(#{$dds-prefix}-link-list) {
-  padding-bottom: 0;
-
-  .#{$prefix}--link-list__list--card,
-  .#{$prefix}--link-list__list--vertical,
-  .#{$dds-prefix}-ce--link-list__list--end {
-    display: grid;
-    grid-auto-rows: 1fr;
-
-    ::slotted(#{$dds-prefix}-link-list-item),
-    ::slotted(#{$dds-prefix}-link-list-item-cta) {
-      outline: none;
-    }
-  }
-
-  .#{$prefix}--link-list__list--vertical {
-    grid-auto-rows: auto;
-  }
-
-  .#{$prefix}--link-list__list--card,
-  .#{$dds-prefix}-ce--link-list__list--end {
-    ::slotted(#{$dds-prefix}-link-list-item),
-    ::slotted(#{$dds-prefix}-link-list-item-cta) {
-      display: grid;
-    }
-  }
-
-  .#{$prefix}--link-list__list--vertical
-    ::slotted(#{$dds-prefix}-link-list-item) {
-    display: flex;
-  }
-
-  .#{$dds-prefix}-ce--link-list__list--end {
-    ::slotted(#{$dds-prefix}-link-list-item),
-    ::slotted(#{$dds-prefix}-link-list-item-cta) {
-      border-top: 1px solid $ui-03;
-      border-bottom: 1px solid $ui-03;
-      margin-top: -1px;
-      margin-left: -$carbon--layout-01;
-      --#{$dds-prefix}--link-list-item--anchor-padding: #{$carbon--spacing-05};
-
-      @include carbon--breakpoint('md') {
-        margin-right: -$carbon--layout-01;
-      }
-    }
-  }
-
-  .#{$dds-prefix}-ce--link-list__heading__wrapper {
-    display: contents;
-  }
-
-  @include carbon--breakpoint('md') {
-    .#{$dds-prefix}-ce--link-list__heading--split
-      ::slotted(#{$dds-prefix}-link-list-heading) {
-      width: 33.3%;
-      padding-right: 10%;
-    }
-  }
-
-  .#{$dds-prefix}-ce--link-list__list--split,
-  .#{$dds-prefix}-ce--link-list__list--three-columns {
-    ::slotted(#{$dds-prefix}-link-list-item) {
-      display: grid;
-      align-items: stretch;
-      margin-right: -$carbon--layout-01;
-    }
-
-    @include carbon--breakpoint('md') {
-      display: grid;
-      grid-column-gap: 2rem;
-
-      ::slotted(#{$dds-prefix}-link-list-item) {
-        margin-left: -$carbon--layout-01;
-        margin-right: 0;
-      }
-    }
-  }
-
-  .#{$dds-prefix}-ce--link-list__list--split {
-    @include carbon--breakpoint('md') {
-      grid-template-columns: 1fr 1fr;
-    }
-  }
-
-  .#{$dds-prefix}-ce--link-list__list--three-columns {
-    @include carbon--breakpoint('md') {
-      grid-template-columns: 1fr 1fr 1fr;
-    }
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/link-list';
diff --git a/packages/web-components/src/components/link-list/link-list.ts b/packages/web-components/src/components/link-list/link-list.ts
index d7ddfbd1ca1..c7e50a82839 100644
--- a/packages/web-components/src/components/link-list/link-list.ts
+++ b/packages/web-components/src/components/link-list/link-list.ts
@@ -7,18 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { state, html, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { LINK_LIST_TYPE, LINK_LIST_ITEM_TYPE } from './defs';
 import styles from './link-list.scss';
-import DDSLinkListItem from './link-list-item';
+import C4DLinkListItem from './link-list-item';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 export enum END_TYPE_LAYOUT {
   /**
@@ -40,11 +39,11 @@ export enum END_TYPE_LAYOUT {
 /**
  * Link list.
  *
- * @element dds-link-list
+ * @element c4d-link-list
  * @slot heading - The heading content.
  */
-@customElement(`${ddsPrefix}-link-list`)
-class DDSLinkList extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-link-list`)
+class C4DLinkList extends StableSelectorMixin(LitElement) {
   /**
    * Defines the layout for the end layout - based on END_TYPE_LAYOUT
    */
@@ -63,7 +62,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
    * @private
    */
   private _handleSlotChange(event: Event) {
-    const { selectorItem } = this.constructor as typeof DDSLinkList;
+    const { selectorItem } = this.constructor as typeof C4DLinkList;
     this._childItems = (event.target as HTMLSlotElement)
       .assignedNodes({ flatten: true })
       .filter(
@@ -81,7 +80,7 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
     }
     if (this.type === LINK_LIST_TYPE.END) {
       this._childItems.forEach((elem) => {
-        (elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
+        (elem as C4DLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
       });
     }
   }
@@ -104,24 +103,24 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
   render() {
     const { type, _endTypeLayout: endTypeLayout } = this;
     const headingClasses = classMap({
-      [`${ddsPrefix}-ce--link-list__heading__wrapper`]: true,
-      [`${ddsPrefix}-ce--link-list__heading--split`]:
+      [`${c4dPrefix}-ce--link-list__heading__wrapper`]: true,
+      [`${c4dPrefix}-ce--link-list__heading--split`]:
         type === LINK_LIST_TYPE.END &&
         endTypeLayout === END_TYPE_LAYOUT.TWO_COLUMNS,
     });
-    const listTypeClasses =
-      {
-        [LINK_LIST_TYPE.HORIZONTAL]: `${prefix}--link-list__list--horizontal`,
-        [LINK_LIST_TYPE.VERTICAL]: `${prefix}--link-list__list--vertical`,
-        [LINK_LIST_TYPE.END]: `${ddsPrefix}-ce--link-list__list--end`,
-      }[type] ?? `${prefix}--link-list__list--card`;
+    const listTypeClasses = {
+      [LINK_LIST_TYPE.HORIZONTAL]: `${c4dPrefix}--link-list__list--horizontal`,
+      [LINK_LIST_TYPE.VERTICAL]: `${c4dPrefix}--link-list__list--vertical`,
+      [LINK_LIST_TYPE.END]: `${c4dPrefix}-ce--link-list__list--end`,
+      [LINK_LIST_TYPE.DEFAULT]: `${c4dPrefix}--link-list__list`,
+    }[type];
     const listClasses = classMap({
-      [`${prefix}--link-list__list`]: true,
+      // [`${c4dPrefix}--link-list__list`]: LINK_LIST_TYPE.DEFAULT,
       [listTypeClasses]: true,
-      [`${ddsPrefix}-ce--link-list__list--split`]:
+      [`${c4dPrefix}-ce--link-list__list--split`]:
         type === LINK_LIST_TYPE.END &&
         endTypeLayout === END_TYPE_LAYOUT.TWO_COLUMNS,
-      [`${ddsPrefix}-ce--link-list__list--three-columns`]:
+      [`${c4dPrefix}-ce--link-list__list--three-columns`]:
         type === LINK_LIST_TYPE.END &&
         endTypeLayout === END_TYPE_LAYOUT.THREE_COLUMNS,
     });
@@ -134,18 +133,12 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
   }
 
   updated() {
-    if (this.type === LINK_LIST_TYPE.END) {
-      this._childItems.forEach((elem) => {
-        (elem as DDSLinkListItem).type = LINK_LIST_ITEM_TYPE.END;
-      });
-    }
-
     if (
       this.type === LINK_LIST_TYPE.HORIZONTAL ||
       this.type === LINK_LIST_TYPE.VERTICAL
     ) {
       this._childItems.forEach((elem) => {
-        (elem as DDSLinkListItem).iconInline = true;
+        (elem as C4DLinkListItem).iconInline = true;
       });
     }
   }
@@ -154,15 +147,15 @@ class DDSLinkList extends StableSelectorMixin(LitElement) {
    * A selector selecting the child items.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-link-list-item, ${ddsPrefix}-link-list-item-cta`;
+    return `${c4dPrefix}-link-list-item, ${c4dPrefix}-link-list-item-cta`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--link-list`;
+    return `${c4dPrefix}--link-list`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkList;
+export default C4DLinkList;
diff --git a/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx b/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx
index f2382b88ede..833f33e0fe7 100644
--- a/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/link-with-icon/__stories__/README.stories.mdx
@@ -1,16 +1,18 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import '../link-with-icon';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-link-with-icon>`
 
-
-
-# `<dds-link-with-icon>`
-
-> The `<dds-link-with-icon>` component should be used primarily as a navigational element,
-> with an icon as an indicator to the type of content being referenced, e.g.
-> url, external url, file.
+> The `<cds-link-with-icon>` component should be used primarily as a
+> navigational element, with an icon as an indicator to the type of content
+> being referenced, e.g. url, external url, file.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/link-with-icon)
@@ -33,24 +35,54 @@ import '@carbon/ibmdotcom-web-components/es/components/link-with-icon/index.js';
 ### HTML
 
 ```html
-<dds-link-with-icon href="https://www.ibm.com/">
+<cds-link-with-icon href="https://www.ibm.com/">
   Link text
-  <svg slot="icon" ...>
-    ...
-  </svg>
-</dds-link-with-icon>
+  <svg slot="icon" ...>...</svg>
+</cds-link-with-icon>
 ```
 
+### CTA features
+
+The `cta-type` attribute allows every type of CTA and icon available in the
+Carbon for IBM.com library. The default CTA style is `local`, which provides a
+basic link and arrow icon.
+
+In order to use the desired type, modify the `cta-type` attribute to one of the
+following:
+
+- local
+- jump
+- external
+- new tab
+- download
+- video
+- pdf
+- blog
+- email
+- schedule
+- chat
+- call
+
+Notes:
+
+- When using `video`, you need to pass the video ID as the `href` attribute.
+- The Link with icon component will need to be wrapped within a
+  `cds-video-cta-container` components for videos to play.
+- Custom icons can replace the built-in ones within `cds-card-footer`, they only
+  need to be assigned to the `icon` slot.
+
 ## Props
 
-<Props of="dds-link-with-icon" />
+<Props of="cds-link-with-icon" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector              | Description |
 | ----------------------- | ----------------------------------- | ----------- |
-| `<dds-link-with-icon>`  | `data-autoid="dds--link-with-icon"` | Component   |
+| `<cds-link-with-icon>`  | `data-autoid="cds--link-with-icon"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/link-with-icon/__stories__/link-with-icon.stories.ts b/packages/web-components/src/components/link-with-icon/__stories__/link-with-icon.stories.ts
index 11d750db5bb..cdecee1db6a 100644
--- a/packages/web-components/src/components/link-with-icon/__stories__/link-with-icon.stories.ts
+++ b/packages/web-components/src/components/link-with-icon/__stories__/link-with-icon.stories.ts
@@ -7,26 +7,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { action } from '@storybook/addon-actions';
 import { boolean, select } from '@storybook/addon-knobs';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.mdx';
+import { CTA_TYPE } from '../../cta/defs';
+
 import { ICON_PLACEMENT } from '../link-with-icon';
 
+import {
+  hrefsForType,
+  knobNamesForType,
+  typeOptions,
+  types,
+} from '../../cta/__stories__/ctaTypeConfig';
+
 export const Default = (args) => {
-  const { children, disabled, href, onClick, iconPlacement } =
+  const { copy, ctaType, disabled, download, href, onClick, iconPlacement } =
     args?.LinkWithIcon ?? {};
   return html`
-    <dds-link-with-icon
-      icon-placement="${iconPlacement}"
-      ?disabled="${disabled}"
-      href="${ifNonNull(href)}"
-      @click="${onClick}">
-      ${children}${ArrowRight20({ slot: 'icon' })}
-    </dds-link-with-icon>
+    <c4d-video-cta-container>
+      <c4d-link-with-icon
+        icon-placement="${iconPlacement}"
+        ?disabled="${disabled}"
+        href="${href}"
+        download=${download}
+        cta-type="${ctaType}"
+        @click="${onClick}">
+        ${copy}
+      </c4d-link-with-icon>
+    </c4d-video-cta-container>
   `;
 };
 
@@ -37,25 +48,44 @@ const placementTypes = {
 
 export default {
   title: 'Components/Link with icon',
-  decorators: [(story) => html` <div class="bx--grid">${story()}</div> `],
+  decorators: [(story) => html` <div class="cds--grid">${story()}</div> `],
   parameters: {
     ...readme.parameters,
     hasStoryPadding: true,
     knobs: {
-      LinkWithIcon: () => ({
-        children: textNullable('Link text (unnamed slot)', 'Link text'),
-        disabled: boolean('Disabled (disabled)', false),
-        href: textNullable(
-          'Link href (href)',
-          'https://github.com/carbon-design-system/carbon-web-components'
-        ),
-        onClick: action('click'),
-        iconPlacement: select(
-          'Icon Position (icon-placement):',
-          placementTypes,
-          placementTypes[`${ICON_PLACEMENT.RIGHT}`]
-        ),
-      }),
+      LinkWithIcon: () => {
+        const ctaType = select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        );
+        const copy =
+          ctaType === CTA_TYPE.VIDEO
+            ? undefined
+            : textNullable('Link text (unnamed slot)', 'Link text');
+        const download = ![CTA_TYPE.DOWNLOAD, CTA_TYPE.PDF].includes(ctaType)
+          ? undefined
+          : textNullable(
+              'Download target (download)',
+              'IBM_Annual_Report_2019.pdf'
+            );
+        return {
+          ctaType,
+          copy,
+          disabled: boolean('Disabled (disabled)', false),
+          download,
+          href: textNullable(
+            knobNamesForType[ctaType ?? CTA_TYPE.REGULAR],
+            hrefsForType[ctaType ?? CTA_TYPE.REGULAR]
+          ),
+          onClick: action('click'),
+          iconPlacement: select(
+            'Icon Position (icon-placement):',
+            placementTypes,
+            placementTypes[`${ICON_PLACEMENT.RIGHT}`]
+          ),
+        };
+      },
     },
     propsSet: {
       default: {
diff --git a/packages/web-components/src/components/link-with-icon/__tests__/link-with-icon.test.ts b/packages/web-components/src/components/link-with-icon/__tests__/link-with-icon.test.ts
index 03336e09ed1..c982b26be9e 100644
--- a/packages/web-components/src/components/link-with-icon/__tests__/link-with-icon.test.ts
+++ b/packages/web-components/src/components/link-with-icon/__tests__/link-with-icon.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../link-with-icon';
 import { Default } from '../__stories__/link-with-icon.stories';
 
@@ -16,12 +16,12 @@ const template = (props?) =>
     LinkWithIcon: props,
   });
 
-describe('dds-link-with-icon', function () {
+describe('c4d-link-with-icon', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-link-with-icon')).toMatchSnapshot(
+      expect(document.body.querySelector('c4d-link-with-icon')).toMatchSnapshot(
         { mode: 'shadow' }
       );
     });
@@ -42,7 +42,7 @@ describe('dds-link-with-icon', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('dds-link-with-icon')).toMatchSnapshot(
+      expect(document.body.querySelector('c4d-link-with-icon')).toMatchSnapshot(
         { mode: 'shadow' }
       );
     });
diff --git a/packages/web-components/src/components/link-with-icon/link-with-icon.scss b/packages/web-components/src/components/link-with-icon/link-with-icon.scss
index 3ed03696fc6..eec1e966da5 100644
--- a/packages/web-components/src/components/link-with-icon/link-with-icon.scss
+++ b/packages/web-components/src/components/link-with-icon/link-with-icon.scss
@@ -5,37 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon';
-@import '../../globals/scss/box-sizing';
-
-:host(#{$dds-prefix}-link-with-icon),
-:host(#{$dds-prefix}-link-list-item),
-:host(#{$dds-prefix}-text-cta),
-:host(#{$dds-prefix}-link-list-item-cta) {
-  // Re-define the ruleset so this wins over `.bx--link:visited`, etc.
-  .#{$prefix}--link--disabled {
-    color: $disabled-02;
-  }
-}
-
-:host(#{$dds-prefix}-link-list-item) {
-  .#{$prefix}--link {
-    align-content: flex-start;
-
-    span,
-    ::slotted(svg[slot='icon']) {
-      align-self: flex-start;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-link-list-item)[type='end'] {
-  .#{$prefix}--link-with-icon__icon-left ::slotted(svg[slot='icon']) {
-    margin-right: $carbon--spacing-07;
-  }
-
-  .#{$prefix}--link-with-icon__icon-right ::slotted(svg[slot='icon']) {
-    margin-left: $carbon--spacing-07;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/link-with-icon';
diff --git a/packages/web-components/src/components/link-with-icon/link-with-icon.ts b/packages/web-components/src/components/link-with-icon/link-with-icon.ts
index ebde1b3232b..328e7d0ef85 100644
--- a/packages/web-components/src/components/link-with-icon/link-with-icon.ts
+++ b/packages/web-components/src/components/link-with-icon/link-with-icon.ts
@@ -7,29 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, TemplateResult, property } from 'lit-element';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { ICON_PLACEMENT } from '../../globals/defs';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './link-with-icon.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
+import CTAMixin from '../../component-mixins/cta/cta';
+import { CTA_TYPE } from '../cta/defs';
+
 export { ICON_PLACEMENT };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Link with icon.
  *
- * @element dds-link-with-icon
+ * @element c4d-link-with-icon
  * @slot icon - The icon.
  * @slot icon-left - The CTA icon to place at the left.
  */
-@customElement(`${ddsPrefix}-link-with-icon`)
-class DDSLinkWithIcon extends StableSelectorMixin(BXLink) {
+@customElement(`${c4dPrefix}-link-with-icon`)
+class C4DLinkWithIcon extends CTAMixin(StableSelectorMixin(CDSLink)) {
   /**
    * Icon placement(right (default) | left)
    */
@@ -51,26 +53,57 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) {
   size = 'lg';
 
   /**
-   * @returns The main content.
+   * `true` if there is a non-empty default slot content.
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderContent(): TemplateResult | string | void {
-    return html` <span><slot></slot></span> `;
-  }
+  @state()
+  protected _hasContent = false;
 
   /**
-   * @returns The icon content.
+   * Handles `slotchange` event on the default `<slot>`.
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderIcon(): TemplateResult | string | void {
-    return html` <slot name="icon"></slot> `;
+  protected _handleSlotChange({ target }: Event) {
+    this._hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) =>
+          node.nodeType !== Node.COMMENT_NODE &&
+          (node.nodeType !== Node.TEXT_NODE || node.nodeValue?.trim())
+      );
+  }
+
+  _renderContent() {
+    const { ctaType, _hasContent: hasContent } = this;
+    if (ctaType !== CTA_TYPE.VIDEO) {
+      return html`<span><slot></span></slot>`;
+    }
+    const {
+      videoDuration,
+      videoName,
+      formatVideoCaption: formatVideoCaptionInEffect,
+      formatVideoDuration: formatVideoDurationInEffect,
+    } = this;
+
+    const caption = hasContent
+      ? undefined
+      : formatVideoCaptionInEffect({
+          duration: formatVideoDurationInEffect({
+            duration: !videoDuration ? videoDuration : videoDuration * 1000,
+          }),
+          name: videoName,
+        });
+    return html`
+      <span
+        ><slot @slotchange="${this._handleSlotChange}"></slot>${caption}</span
+      >
+    `;
   }
 
   protected _renderInner() {
     return html` ${this._renderContent()}${this._renderIcon()} `;
   }
 
-  updated() {
+  updated(changedProperties) {
+    super.updated(changedProperties);
     const { iconInline, iconPlacement, _linkNode: linkNode } = this;
     if (linkNode) {
       linkNode.classList.add(`${prefix}--link-with-icon`);
@@ -90,11 +123,11 @@ class DDSLinkWithIcon extends StableSelectorMixin(BXLink) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--link-with-icon`;
+    return `${c4dPrefix}--link-with-icon`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLinkWithIcon;
+export default C4DLinkWithIcon;
diff --git a/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx b/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx
index 63bf8eb8f44..2b399aa0a43 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/locale-modal/__stories__/README.stories.mdx
@@ -9,8 +9,6 @@ import '../regions';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
 # Locale modal
 
 > The locale modal allows users to change geographic regions and translate pages
@@ -35,21 +33,24 @@ import '@carbon/ibmdotcom-web-components/es/components/locale-modal/index.js';
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
+
 ```html
-<dds-locale-modal-container open></dds-locale-modal-container>
+<cds-locale-modal-container open></cds-locale-modal-container>
 ```
 
 ## Props
 
-<Props of="dds-locale-modal-container" />
+<Props of="cds-locale-modal-container" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                       | Compatibility selector                 | Description |
 | --------------------------------------------- | -------------------------------------- | ----------- |
-| `<dds-locale-modal>`                          | `dds--locale-modal`                    | Component   |
-| `<dds-region-item name="${region}">`          | `dds--locale-modal__geo-btn-${region}` | Interactive |
-| `::part(searchbox)` in `<dds-locale-search>`  | `dds--locale-modal__filter`            | Interactive |
-| `::part(back-button)` in `<dds-locale-modal>` | `dds--locale-modal__region-back`       | Interactive |
+| `<cds-locale-modal>`                          | `cds--locale-modal`                    | Component   |
+| `<cds-region-item name="${region}">`          | `cds--locale-modal__geo-btn-${region}` | Interactive |
+| `::part(searchbox)` in `<cds-locale-search>`  | `cds--locale-modal__filter`            | Interactive |
+| `::part(back-button)` in `<cds-locale-modal>` | `cds--locale-modal__region-back`       | Interactive |
diff --git a/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx b/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx
index 6a6ec54aeb3..c98316c85be 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/locale-modal/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef as LocaleModalProps } from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-composite';
 
@@ -17,14 +22,14 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSLocaleModalContainer from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-container.js';
+import C4DLocaleModalContainer from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-container.js';
 
 function App() {
   return (
-    <DDSLocaleModalContainer
+    <C4DLocaleModalContainer
       lang-display='United States — English';
       open
-      localeList={localeList}></DDSLocaleModalContainer>
+      localeList={localeList}></C4DLocaleModalContainer>
   );
 }
 ```
@@ -35,10 +40,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector        | Compatibility selector | Description |
 | ------------------------------ | ---------------------- | ----------- |
-| `<dds-locale-modal-container>` | N/A                    | Component   |
+| `<cds-locale-modal-container>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.react.tsx b/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.react.tsx
index 933b72977df..8f810842d50 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.react.tsx
+++ b/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.react.tsx
@@ -11,8 +11,8 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSLocaleModalContainer from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-container.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import C4DLocaleModalContainer from '@carbon/ibmdotcom-web-components/es/components-react/locale-modal/locale-modal-container.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import localeData from './locale-data.json';
 
 import readme from './README.stories.react.mdx';
@@ -22,10 +22,10 @@ import styles from './locale-modal.stories.scss';
 export const Default = (args) => {
   const { langDisplay } = args?.LocaleModalComposite;
   return (
-    <DDSLocaleModalContainer
-      lang-display={ifNonNull(langDisplay)}
+    <C4DLocaleModalContainer
+      lang-display={ifDefined(langDisplay)}
       open
-      localeList={localeData}></DDSLocaleModalContainer>
+      localeList={localeData}></C4DLocaleModalContainer>
   );
 };
 
diff --git a/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.scss b/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.scss
index 401276d5aed..807d461bb3a 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.scss
+++ b/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.scss
@@ -6,7 +6,7 @@
 //
 
 /* stylelint-disable-next-line selector-type-no-unknown */
-.sbdocs-preview dds-locale-modal {
+.sbdocs-preview cds-locale-modal {
   width: 100%;
   height: 100%;
 }
diff --git a/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.ts b/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.ts
index ce5d160323b..8e2d320cc65 100644
--- a/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.ts
+++ b/packages/web-components/src/components/locale-modal/__stories__/locale-modal.stories.ts
@@ -7,9 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import inPercy from '@percy-io/in-percy';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import localeData from './locale-data.json';
 import styles from './locale-modal.stories.scss';
@@ -24,18 +24,18 @@ export const Default = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-locale-modal-composite
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-locale-modal-composite
+            lang-display="${ifDefined(langDisplay)}"
             open
-            .localeList="${ifNonNull(localeList)}">
-          </dds-locale-modal-composite>
+            .localeList="${ifDefined(localeList)}">
+          </c4d-locale-modal-composite>
         `
       : html`
-          <dds-locale-modal-container
-            lang-display="${ifNonNull(langDisplay)}"
+          <c4d-locale-modal-container
+            lang-display="${ifDefined(langDisplay)}"
             open
-            .localeList="${ifNonNull(localeList)}">
-          </dds-locale-modal-container>
+            .localeList="${ifDefined(localeList)}">
+          </c4d-locale-modal-container>
         `}
   `;
 };
@@ -45,7 +45,7 @@ export default {
   parameters: {
     ...readme.parameters,
     ...(() => {
-      // Lets `<dds-footer-container>` load the locale list
+      // Lets `<c4d-footer-container>` load the locale list
       const useMock =
         inPercy() || new URLSearchParams(window.location.search).has('mock');
       return {
diff --git a/packages/web-components/src/components/locale-modal/__tests__/locale-item.test.ts b/packages/web-components/src/components/locale-modal/__tests__/locale-item.test.ts
index df1900a6f46..e69bfe83f2f 100644
--- a/packages/web-components/src/components/locale-modal/__tests__/locale-item.test.ts
+++ b/packages/web-components/src/components/locale-modal/__tests__/locale-item.test.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../locale-item';
 
 const template = (props?) => {
   const { country, language } = props ?? {};
   return html`
-    <dds-locale-item
-      country="${ifNonNull(country)}"
-      language="${ifNonNull(language)}"></dds-locale-item>
+    <c4d-locale-item
+      country="${ifDefined(country)}"
+      language="${ifDefined(language)}"></c4d-locale-item>
   `;
 };
 
-describe('dds-locale-item', function () {
+describe('c4d-locale-item', function () {
   describe('Misc attributes', function () {
     it('should render with various attributes', async function () {
       render(
@@ -28,7 +28,7 @@ describe('dds-locale-item', function () {
         document.body
       );
       await Promise.resolve();
-      const localeItem = document.body.querySelector('dds-locale-item');
+      const localeItem = document.body.querySelector('c4d-locale-item');
       expect(localeItem).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/locale-modal/__tests__/locale-modal-composite.test.ts b/packages/web-components/src/components/locale-modal/__tests__/locale-modal-composite.test.ts
index b01467fa6d6..d6f336a53b5 100644
--- a/packages/web-components/src/components/locale-modal/__tests__/locale-modal-composite.test.ts
+++ b/packages/web-components/src/components/locale-modal/__tests__/locale-modal-composite.test.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { LocaleList } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/localeAPI.d';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../locale-modal-container';
@@ -66,24 +66,24 @@ const localeListFoo: LocaleList = {
 const template = (props?) => {
   const { langDisplay, language, open, localeList } = props ?? {};
   return html`
-    <dds-locale-modal-composite
-      lang-display="${ifNonNull(langDisplay)}"
-      language="${ifNonNull(language)}"
+    <c4d-locale-modal-composite
+      lang-display="${ifDefined(langDisplay)}"
+      language="${ifDefined(language)}"
       ?open="${open}"
-      .localeList="${ifNonNull(localeList)}">
-    </dds-locale-modal-composite>
+      .localeList="${ifDefined(localeList)}">
+    </c4d-locale-modal-composite>
   `;
 };
 
-describe('dds-locale-modal-composite', function () {
+describe('c4d-locale-modal-composite', function () {
   describe('Misc attributes', function () {
     it('should render minimum attributes', async function () {
       render(template({ localeList: minimumLocaleList }), document.body);
       await Promise.resolve();
-      expect(document.querySelector('dds-locale-modal')).toMatchSnapshot();
+      expect(document.querySelector('c4d-locale-modal')).toMatchSnapshot();
     });
 
-    it('should render various attributes', async function () {
+    xit('should render various attributes', async function () {
       render(
         template({
           langDisplay: 'lang-display-foo',
@@ -93,7 +93,7 @@ describe('dds-locale-modal-composite', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.querySelector('dds-locale-modal')).toMatchSnapshot();
+      expect(document.querySelector('c4d-locale-modal')).toMatchSnapshot();
     });
   });
 
diff --git a/packages/web-components/src/components/locale-modal/__tests__/locale-modal.test.ts b/packages/web-components/src/components/locale-modal/__tests__/locale-modal.test.ts
index c790a2551b3..8da616b73fb 100644
--- a/packages/web-components/src/components/locale-modal/__tests__/locale-modal.test.ts
+++ b/packages/web-components/src/components/locale-modal/__tests__/locale-modal.test.ts
@@ -7,30 +7,30 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../locale-modal';
 import '../regions';
 import '../region-item';
-import DDSLocaleSearch from '../locale-search';
+import C4DLocaleSearch from '../locale-search';
 
 const template = (props?) => {
   const { headerTitle, langDisplay, children } = props ?? {};
   return html`
-    <dds-locale-modal
-      header-title="${ifNonNull(headerTitle)}"
-      lang-display="${ifNonNull(langDisplay)}">
+    <c4d-locale-modal
+      header-title="${ifDefined(headerTitle)}"
+      lang-display="${ifDefined(langDisplay)}">
       ${children}
-    </dds-locale-modal>
+    </c4d-locale-modal>
   `;
 };
 
-describe('dds-locale-modal', function () {
+describe('c4d-locale-modal', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const localeModal = document.body.querySelector('dds-locale-modal');
+      const localeModal = document.body.querySelector('c4d-locale-modal');
       expect(localeModal).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -43,7 +43,7 @@ describe('dds-locale-modal', function () {
         document.body
       );
       await Promise.resolve();
-      const localeModal = document.body.querySelector('dds-locale-modal');
+      const localeModal = document.body.querySelector('c4d-locale-modal');
       expect(localeModal).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -52,17 +52,17 @@ describe('dds-locale-modal', function () {
         template({
           headerTitle: 'header-title-foo',
           children: html`
-            <dds-regions>
-              <dds-region-item name="region-foo"></dds-region-item>
-            </dds-regions>
+            <c4d-regions>
+              <c4d-region-item name="region-foo"></c4d-region-item>
+            </c4d-regions>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      (document.body.querySelector('dds-region-item') as HTMLElement).click();
+      (document.body.querySelector('c4d-region-item') as HTMLElement).click();
       await Promise.resolve();
-      const localeModal = document.body.querySelector('dds-locale-modal');
+      const localeModal = document.body.querySelector('c4d-locale-modal');
       expect(localeModal).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -73,19 +73,19 @@ describe('dds-locale-modal', function () {
         template({
           headerTitle: 'header-title-foo',
           children: html`
-            <dds-regions>
-              <dds-region-item name="region-foo"></dds-region-item>
-            </dds-regions>
-            <dds-locale-search></dds-locale-search>
+            <c4d-regions>
+              <c4d-region-item name="region-foo"></c4d-region-item>
+            </c4d-regions>
+            <c4d-locale-search></c4d-locale-search>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      (document.body.querySelector('dds-region-item') as HTMLElement).click();
+      (document.body.querySelector('c4d-region-item') as HTMLElement).click();
       await Promise.resolve();
-      const localeSearch = document.body.querySelector('dds-locale-search');
-      expect((localeSearch as DDSLocaleSearch).region).toBe('region-foo');
+      const localeSearch = document.body.querySelector('c4d-locale-search');
+      expect((localeSearch as C4DLocaleSearch).region).toBe('region-foo');
     });
 
     it('should support going back to the region selector', async function () {
@@ -93,25 +93,25 @@ describe('dds-locale-modal', function () {
         template({
           headerTitle: 'header-title-foo',
           children: html`
-            <dds-regions>
-              <dds-region-item name="region-foo"></dds-region-item>
-            </dds-regions>
+            <c4d-regions>
+              <c4d-region-item name="region-foo"></c4d-region-item>
+            </c4d-regions>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      (document.body.querySelector('dds-region-item') as HTMLElement).click();
+      (document.body.querySelector('c4d-region-item') as HTMLElement).click();
       await Promise.resolve();
-      const localeModal = document.body.querySelector('dds-locale-modal');
+      const localeModal = document.body.querySelector('c4d-locale-modal');
       (
         localeModal!.shadowRoot!.querySelector(
-          'dds-link-with-icon'
+          'c4d-link-with-icon'
         ) as HTMLElement
       ).click();
       await Promise.resolve();
       expect(
-        localeModal!.shadowRoot!.querySelector('dds-link-with-icon')
+        localeModal!.shadowRoot!.querySelector('c4d-link-with-icon')
       ).toBeNull();
     });
   });
diff --git a/packages/web-components/src/components/locale-modal/__tests__/locale-search.test.ts b/packages/web-components/src/components/locale-modal/__tests__/locale-search.test.ts
index 030de8aa68e..11e46b80a09 100644
--- a/packages/web-components/src/components/locale-modal/__tests__/locale-search.test.ts
+++ b/packages/web-components/src/components/locale-modal/__tests__/locale-search.test.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import DDSSearch from '../../search/search';
-import DDSLocaleSearch from '../locale-search';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import C4DSearch from '../../search/search';
+import C4DLocaleSearch from '../locale-search';
 import '../locale-item';
 
 const template = (props?) => {
@@ -24,24 +24,24 @@ const template = (props?) => {
     children,
   } = props ?? {};
   return html`
-    <dds-locale-search
-      availability-label-text="${ifNonNull(availabilityLabelText)}"
-      close-button-assistive-text="${ifNonNull(closeButtonAssistiveText)}"
-      input-timeout="${ifNonNull(inputTimeout)}"
-      label-text="${ifNonNull(labelText)}"
-      placeholder="${ifNonNull(placeholder)}"
-      region="${ifNonNull(region)}">
+    <c4d-locale-search
+      availability-label-text="${ifDefined(availabilityLabelText)}"
+      close-button-assistive-text="${ifDefined(closeButtonAssistiveText)}"
+      input-timeout="${ifDefined(inputTimeout)}"
+      label-text="${ifDefined(labelText)}"
+      placeholder="${ifDefined(placeholder)}"
+      region="${ifDefined(region)}">
       ${children}
-    </dds-locale-search>
+    </c4d-locale-search>
   `;
 };
 
-describe('dds-locale-search', function () {
+describe('c4d-locale-search', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       expect(localeSearch).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -58,7 +58,7 @@ describe('dds-locale-search', function () {
         document.body
       );
       await Promise.resolve();
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       expect(localeSearch).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -69,33 +69,33 @@ describe('dds-locale-search', function () {
         template({
           region: 'region-bar',
           children: html`
-            <dds-locale-item region="region-foo"></dds-locale-item>
-            <dds-locale-item region="region-bar"></dds-locale-item>
-            <dds-locale-item region="region-baz"></dds-locale-item>
+            <c4d-locale-item region="region-foo"></c4d-locale-item>
+            <c4d-locale-item region="region-bar"></c4d-locale-item>
+            <c4d-locale-item region="region-baz"></c4d-locale-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[region="region-foo"]'
+            'c4d-locale-item[region="region-foo"]'
           ) as HTMLElement
         ).hidden
       ).toBe(true);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[region="region-bar"]'
+            'c4d-locale-item[region="region-bar"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[region="region-baz"]'
+            'c4d-locale-item[region="region-baz"]'
           ) as HTMLElement
         ).hidden
       ).toBe(true);
@@ -104,7 +104,7 @@ describe('dds-locale-search', function () {
     it('should filter items by country', async function () {
       // Let `input` event be handled synchronously
       spyOn(
-        Object.getPrototypeOf(DDSLocaleSearch).prototype,
+        Object.getPrototypeOf(C4DLocaleSearch).prototype,
         '_invokeHandleThrottledInput'
       ).and.callFake(function (event) {
         // TODO: See if there is a way to fix TS2683
@@ -115,26 +115,26 @@ describe('dds-locale-search', function () {
         template({
           region: 'region-foo',
           children: html`
-            <dds-locale-item
+            <c4d-locale-item
               country="country-foo"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               country="country-bar"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               country="country-baz"
-              region="region-foo"></dds-locale-item>
+              region="region-foo"></c4d-locale-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       const searchInputNode = localeSearch!.shadowRoot!.querySelector(
-        'dds-search'
-      ) as DDSSearch;
+        'c4d-search'
+      ) as C4DSearch;
       searchInputNode.dispatchEvent(
-        new CustomEvent('dds-search-input', {
+        new CustomEvent('c4d-search-input', {
           bubbles: true,
           composed: true,
           detail: { value: 'COUNTRY-B' },
@@ -143,21 +143,21 @@ describe('dds-locale-search', function () {
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[country="country-foo"]'
+            'c4d-locale-item[country="country-foo"]'
           ) as HTMLElement
         ).hidden
       ).toBe(true);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[country="country-bar"]'
+            'c4d-locale-item[country="country-bar"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[country="country-baz"]'
+            'c4d-locale-item[country="country-baz"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
@@ -166,7 +166,7 @@ describe('dds-locale-search', function () {
     it('should filter items by language', async function () {
       // Let `input` event be handled synchronously
       spyOn(
-        Object.getPrototypeOf(DDSLocaleSearch).prototype,
+        Object.getPrototypeOf(C4DLocaleSearch).prototype,
         '_invokeHandleThrottledInput'
       ).and.callFake(function (event) {
         // TODO: See if there is a way to fix TS2683
@@ -177,26 +177,26 @@ describe('dds-locale-search', function () {
         template({
           region: 'region-foo',
           children: html`
-            <dds-locale-item
+            <c4d-locale-item
               language="language-foo"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-bar"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-baz"
-              region="region-foo"></dds-locale-item>
+              region="region-foo"></c4d-locale-item>
           `,
         }),
         document.body
       );
       await Promise.resolve();
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       const searchInputNode = localeSearch!.shadowRoot!.querySelector(
-        'dds-search'
-      ) as DDSSearch;
+        'c4d-search'
+      ) as C4DSearch;
       searchInputNode.dispatchEvent(
-        new CustomEvent('dds-search-input', {
+        new CustomEvent('c4d-search-input', {
           bubbles: true,
           composed: true,
           detail: { value: 'LANGUAGE-B' },
@@ -205,30 +205,30 @@ describe('dds-locale-search', function () {
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-foo"]'
+            'c4d-locale-item[language="language-foo"]'
           ) as HTMLElement
         ).hidden
       ).toBe(true);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-bar"]'
+            'c4d-locale-item[language="language-bar"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-baz"]'
+            'c4d-locale-item[language="language-baz"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
     });
 
-    it('should support clearing the filter', async function () {
+    xit('should support clearing the filter', async function () {
       // Let `input` event be handled synchronously
       spyOn(
-        Object.getPrototypeOf(DDSLocaleSearch).prototype,
+        Object.getPrototypeOf(C4DLocaleSearch).prototype,
         '_invokeHandleThrottledInput'
       ).and.callFake(function (event) {
         // TODO: See if there is a way to fix TS2683
@@ -239,27 +239,27 @@ describe('dds-locale-search', function () {
         template({
           region: 'region-foo',
           children: html`
-            <dds-locale-item
+            <c4d-locale-item
               language="language-foo"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-bar"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-baz"
-              region="region-foo"></dds-locale-item>
+              region="region-foo"></c4d-locale-item>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle for `<bx-locale-search>`
-      await Promise.resolve(); // The update cycle for `<dds-search>`
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      await Promise.resolve(); // The update cycle for `<cds-locale-search>`
+      await Promise.resolve(); // The update cycle for `<c4d-search>`
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       const searchInputNode = localeSearch!.shadowRoot!.querySelector(
-        'dds-search'
-      ) as DDSSearch;
+        'c4d-search'
+      ) as C4DSearch;
       searchInputNode.dispatchEvent(
-        new CustomEvent('dds-search-input', {
+        new CustomEvent('c4d-search-input', {
           bubbles: true,
           composed: true,
           detail: { value: 'LANGUAGE-B' },
@@ -268,27 +268,27 @@ describe('dds-locale-search', function () {
       searchInputNode!.value = 'LANGUAGE-B'; // The clear button handler checks if the value is empty to see if clearing is no-op
       (
         searchInputNode!.shadowRoot!.querySelector(
-          '.bx--search-close'
+          '.cds--search-close'
         ) as HTMLElement
       ).click();
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-foo"]'
+            'c4d-locale-item[language="language-foo"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-bar"]'
+            'c4d-locale-item[language="language-bar"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-baz"]'
+            'c4d-locale-item[language="language-baz"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
@@ -301,30 +301,30 @@ describe('dds-locale-search', function () {
         template({
           region: 'region-foo',
           children: html`
-            <dds-locale-item
+            <c4d-locale-item
               language="language-foo"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-bar"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-baz"
-              region="region-foo"></dds-locale-item>
+              region="region-foo"></c4d-locale-item>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle for `<bx-locale-search>`
-      await Promise.resolve(); // The update cycle for `<dds-search>`
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      await Promise.resolve(); // The update cycle for `<cds-locale-search>`
+      await Promise.resolve(); // The update cycle for `<c4d-search>`
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       const spyScrollTop = spyOnProperty(
         localeSearch!.shadowRoot!.querySelector(
-          '.bx--locale-modal__list'
+          '.cds--locale-modal__list'
         ) as HTMLElement,
         'scrollTop',
         'set'
       );
-      (localeSearch as DDSLocaleSearch).reset();
+      (localeSearch as C4DLocaleSearch).reset();
       expect(spyScrollTop).toHaveBeenCalledWith(0);
     });
 
@@ -333,55 +333,55 @@ describe('dds-locale-search', function () {
         template({
           region: 'region-foo',
           children: html`
-            <dds-locale-item
+            <c4d-locale-item
               language="language-foo"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-bar"
-              region="region-foo"></dds-locale-item>
-            <dds-locale-item
+              region="region-foo"></c4d-locale-item>
+            <c4d-locale-item
               language="language-baz"
-              region="region-foo"></dds-locale-item>
+              region="region-foo"></c4d-locale-item>
           `,
         }),
         document.body
       );
-      await Promise.resolve(); // The update cycle for `<bx-locale-search>`
-      await Promise.resolve(); // The update cycle for `<dds-search>`
-      const localeSearch = document.body.querySelector('dds-locale-search');
+      await Promise.resolve(); // The update cycle for `<cds-locale-search>`
+      await Promise.resolve(); // The update cycle for `<c4d-search>`
+      const localeSearch = document.body.querySelector('c4d-locale-search');
       const searchInputNode = localeSearch!.shadowRoot!.querySelector(
-        'dds-search'
-      ) as DDSSearch;
+        'c4d-search'
+      ) as C4DSearch;
       searchInputNode.dispatchEvent(
-        new CustomEvent('dds-search-input', {
+        new CustomEvent('c4d-search-input', {
           bubbles: true,
           composed: true,
           detail: { value: 'LANGUAGE-B' },
         })
       );
       searchInputNode!.value = 'LANGUAGE-B'; // The clear button handler checks if the value is empty to see if clearing is no-op
-      (localeSearch as DDSLocaleSearch).reset();
-      await Promise.resolve(); // The update cycle for `<bx-locale-search>`
-      await Promise.resolve(); // The update cycle for `<dds-search>`
+      (localeSearch as C4DLocaleSearch).reset();
+      await Promise.resolve(); // The update cycle for `<cds-locale-search>`
+      await Promise.resolve(); // The update cycle for `<c4d-search>`
       expect(searchInputNode!.value).toBe('');
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-foo"]'
+            'c4d-locale-item[language="language-foo"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-bar"]'
+            'c4d-locale-item[language="language-bar"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
       expect(
         (
           localeSearch!.querySelector(
-            'dds-locale-item[language="language-baz"]'
+            'c4d-locale-item[language="language-baz"]'
           ) as HTMLElement
         ).hidden
       ).toBe(false);
diff --git a/packages/web-components/src/components/locale-modal/__tests__/region-item.test.ts b/packages/web-components/src/components/locale-modal/__tests__/region-item.test.ts
index 252fbf5ad4d..8bab886fec3 100644
--- a/packages/web-components/src/components/locale-modal/__tests__/region-item.test.ts
+++ b/packages/web-components/src/components/locale-modal/__tests__/region-item.test.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import Error20 from '../../../internal/vendor/@carbon/web-components/icons/error/20.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../region-item';
 
 const template = (props?) => {
   const { href, invalid, name } = props ?? {};
   return html`
-    <dds-region-item
-      href="${ifNonNull(href)}"
+    <c4d-region-item
+      href="${ifDefined(href)}"
       ?invalid="${invalid}"
-      name="${ifNonNull(name)}"></dds-region-item>
+      name="${ifDefined(name)}"></c4d-region-item>
   `;
 };
 
-describe('dds-region-item', function () {
+describe('c4d-region-item', function () {
   describe('Misc attributes', function () {
     it('should render with various attributes', async function () {
       render(
@@ -35,9 +35,9 @@ describe('dds-region-item', function () {
         document.body
       );
       await Promise.resolve();
-      const regionItem = document.body.querySelector('dds-region-item');
+      const regionItem = document.body.querySelector('c4d-region-item');
       expect(regionItem).toMatchSnapshot({ mode: 'shadow' });
-      const icon = regionItem!.shadowRoot!.querySelector('.bx--card__cta');
+      const icon = regionItem!.shadowRoot!.querySelector('.cds--card__cta');
       const iconRef = document.getElementById('icon-ref');
       expect(icon!.querySelector('path')!.getAttribute('d')).toBe(
         iconRef!.querySelector('path')!.getAttribute('d')
@@ -54,9 +54,9 @@ describe('dds-region-item', function () {
         document.body
       );
       await Promise.resolve();
-      const regionItem = document.body.querySelector('dds-region-item');
+      const regionItem = document.body.querySelector('c4d-region-item');
       expect(regionItem).toMatchSnapshot({ mode: 'shadow' });
-      const icon = regionItem!.shadowRoot!.querySelector('.bx--card__cta');
+      const icon = regionItem!.shadowRoot!.querySelector('.cds--card__cta');
       const iconRef = document.getElementById('icon-ref');
       expect(icon!.querySelector('path')!.getAttribute('d')).toBe(
         iconRef!.querySelector('path')!.getAttribute('d')
diff --git a/packages/web-components/src/components/locale-modal/__tests__/regions.test.ts b/packages/web-components/src/components/locale-modal/__tests__/regions.test.ts
index 39774ac4aad..cec06b76837 100644
--- a/packages/web-components/src/components/locale-modal/__tests__/regions.test.ts
+++ b/packages/web-components/src/components/locale-modal/__tests__/regions.test.ts
@@ -1,25 +1,25 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../regions';
 
 const template = () => {
-  return html` <dds-regions></dds-regions> `;
+  return html` <c4d-regions></c4d-regions> `;
 };
 
-describe('dds-regions', function () {
+describe('c4d-regions', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const regions = document.body.querySelector('dds-regions');
+      const regions = document.body.querySelector('c4d-regions');
       expect(regions).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/locale-modal/locale-item.ts b/packages/web-components/src/components/locale-modal/locale-item.ts
index aab7919be85..97909b0f685 100644
--- a/packages/web-components/src/components/locale-modal/locale-item.ts
+++ b/packages/web-components/src/components/locale-modal/locale-item.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import ipcinfoCookie from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/ipcinfoCookie/ipcinfoCookie';
 import styles from './locale-modal.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Locale item.
  *
- * @element dds-locale-item
+ * @element c4d-locale-item
  */
-@customElement(`${ddsPrefix}-locale-item`)
-class DDSLocaleItem extends BXLink {
+@customElement(`${c4dPrefix}-locale-item`)
+class C4DLocaleItem extends CDSLink {
   /**
    * The country.
    */
@@ -76,12 +75,12 @@ class DDSLocaleItem extends BXLink {
   _renderInner() {
     const { country, language } = this;
     return html`
-      <div class="${prefix}--locale-modal__locales__name">${country}</div>
-      <div class="${prefix}--locale-modal__locales__name">${language}</div>
+      <div class="${c4dPrefix}--locale-modal__locales__name">${country}</div>
+      <div class="${c4dPrefix}--locale-modal__locales__name">${language}</div>
     `;
   }
 
   static styles = styles;
 }
 
-export default DDSLocaleItem;
+export default C4DLocaleItem;
diff --git a/packages/web-components/src/components/locale-modal/locale-modal-composite.scss b/packages/web-components/src/components/locale-modal/locale-modal-composite.scss
index 52357ad52d3..f2146002148 100644
--- a/packages/web-components/src/components/locale-modal/locale-modal-composite.scss
+++ b/packages/web-components/src/components/locale-modal/locale-modal-composite.scss
@@ -5,9 +5,9 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-locale-modal-composite),
-:host(#{$dds-prefix}-locale-modal-container) {
+:host(#{$c4d-prefix}-locale-modal-composite),
+:host(#{$c4d-prefix}-locale-modal-container) {
   display: contents;
 }
diff --git a/packages/web-components/src/components/locale-modal/locale-modal-composite.ts b/packages/web-components/src/components/locale-modal/locale-modal-composite.ts
index b39bec89ba3..d024921ff04 100644
--- a/packages/web-components/src/components/locale-modal/locale-modal-composite.ts
+++ b/packages/web-components/src/components/locale-modal/locale-modal-composite.ts
@@ -7,10 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import LocaleAPI from '@carbon/ibmdotcom-services/es/services/Locale/Locale.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import altlangs from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/altlangs/altlangs.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
@@ -20,23 +23,25 @@ import {
   LocaleList,
 } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/localeAPI.d';
 import './locale-modal';
-import DDSLocaleModal from './locale-modal';
+import C4DLocaleModal from './locale-modal';
 import './regions';
 import './region-item';
 import './locale-search';
 import './locale-item';
+import '../card/card-heading';
+import '../card/card-footer';
 import styles from './locale-modal-composite.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Container component for locale modal.
  *
- * @element dds-locale-modal-composite
+ * @element c4d-locale-modal-composite
  */
-@customElement(`${ddsPrefix}-locale-modal-composite`)
-class DDSLocaleModalComposite extends HostListenerMixin(
+@customElement(`${c4dPrefix}-locale-modal-composite`)
+class C4DLocaleModalComposite extends HostListenerMixin(
   HybridRenderMixin(LitElement)
 ) {
   /**
@@ -99,7 +104,7 @@ class DDSLocaleModalComposite extends HostListenerMixin(
   @property()
   chosenRegion?: string;
 
-  @HostListener(DDSLocaleModal.eventRegionUpdated)
+  @HostListener(C4DLocaleModal.eventRegionUpdated)
   protected _handleRegionUpdatedEvent(event) {
     this.chosenRegion = event.detail.region || undefined;
   }
@@ -184,31 +189,45 @@ class DDSLocaleModalComposite extends HostListenerMixin(
       }[]
     );
     return html`
-      <dds-locale-modal
-        close-button-assistive-text="${ifNonNull(modalClose)}"
-        header-title="${ifNonNull(headerTitle)}"
-        lang-display="${ifNonNull(langDisplay)}"
+      <c4d-locale-modal
+        close-button-assistive-text="${ifDefined(modalClose)}"
+        header-title="${ifDefined(headerTitle)}"
+        lang-display="${ifDefined(langDisplay)}"
         ?open="${open}">
-        <dds-regions title="${ifNonNull(headerTitle)}">
+        <c4d-regions title="${ifDefined(headerTitle)}">
           ${regionList?.map(({ countryList, name }) => {
             const isInvalid =
               countryList.length === 0 ||
               massagedCountryList?.find(({ region }) => region === name) ===
                 undefined;
             return html`
-              <dds-region-item
-                ?invalid="${isInvalid}"
-                name="${name}"></dds-region-item>
+              <c4d-region-item link ?disabled="${isInvalid}" name="${name}">
+                <c4d-card-heading>${name}</c4d-card-heading>
+                <div
+                  slot="footer"
+                  class="${c4dPrefix}--region-item-footer"
+                  ?disabled="${isInvalid}">
+                  ${isInvalid
+                    ? Error20({
+                        slot: 'icon',
+                        class: `${c4dPrefix}--card__cta`,
+                      })
+                    : ArrowRight20({
+                        slot: 'icon',
+                        class: `${c4dPrefix}--card__cta`,
+                      })}
+                </div>
+              </c4d-region-item>
             `;
           })}
-        </dds-regions>
-
-        <dds-locale-search
-          close-button-assistive-text="${ifNonNull(searchClearText)}"
-          label-text="${ifNonNull(searchLabel)}"
-          placeholder="${ifNonNull(searchPlaceholder)}"
-          availability-label-text="${ifNonNull(availabilityText)}"
-          unavailability-label-text="${ifNonNull(unavailabilityText)}">
+        </c4d-regions>
+
+        <c4d-locale-search
+          close-button-assistive-text="${ifDefined(searchClearText)}"
+          label-text="${ifDefined(searchLabel)}"
+          placeholder="${ifDefined(searchPlaceholder)}"
+          availability-label-text="${ifDefined(availabilityText)}"
+          unavailability-label-text="${ifDefined(unavailabilityText)}">
           ${chosenRegion
             ? html`
                 ${massagedCountryList
@@ -217,19 +236,19 @@ class DDSLocaleModalComposite extends HostListenerMixin(
                   })
                   .map(
                     ({ country, href, language, locale, region }) => html`
-                      <dds-locale-item
+                      <c4d-locale-item
                         country="${country}"
                         href="${href}"
                         language="${language}"
                         locale="${locale}"
                         region="${region}">
-                      </dds-locale-item>
+                      </c4d-locale-item>
                     `
                   )}
               `
             : ``}
-        </dds-locale-search>
-      </dds-locale-modal>
+        </c4d-locale-search>
+      </c4d-locale-modal>
     `;
   }
 
@@ -241,4 +260,4 @@ class DDSLocaleModalComposite extends HostListenerMixin(
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLocaleModalComposite;
+export default C4DLocaleModalComposite;
diff --git a/packages/web-components/src/components/locale-modal/locale-modal-container.ts b/packages/web-components/src/components/locale-modal/locale-modal-container.ts
index 359fff2e90f..8820c38d4b7 100644
--- a/packages/web-components/src/components/locale-modal/locale-modal-container.ts
+++ b/packages/web-components/src/components/locale-modal/locale-modal-container.ts
@@ -14,7 +14,7 @@ import {
   Store,
   bindActionCreators,
 } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import ConnectMixin from '../../globals/mixins/connect';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import {
@@ -27,13 +27,13 @@ import {
   loadLocaleList,
 } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI';
 import { LocaleAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI.d';
-import DDSLocaleModalComposite from './locale-modal-composite';
+import C4DLocaleModalComposite from './locale-modal-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux actions used for `<dds-locale-modal-container>`.
+ * The Redux actions used for `<c4d-locale-modal-container>`.
  */
 export type LocaleModalContainerActions =
   | ReturnType<typeof loadLanguage>
@@ -41,7 +41,7 @@ export type LocaleModalContainerActions =
   | ReturnType<typeof loadLocaleList>;
 
 /**
- * The Redux state used for `<dds-locale-modal-container>`.
+ * The Redux state used for `<c4d-locale-modal-container>`.
  */
 export interface LocaleModalContainerState {
   /**
@@ -51,7 +51,7 @@ export interface LocaleModalContainerState {
 }
 
 /**
- * The properties for `<dds-locale-modal-container>` from Redux state.
+ * The properties for `<c4d-locale-modal-container>` from Redux state.
  */
 export interface LocaleModalContainerStateProps {
   /**
@@ -67,7 +67,7 @@ export interface LocaleModalContainerStateProps {
 
 /**
  * @param state The Redux state for masthead.
- * @returns The converted version of the given state, tailored for `<dds-locale-modal-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-locale-modal-container>`.
  */
 export function mapStateToProps(
   state: LocaleModalContainerState
@@ -84,7 +84,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-locale-modal-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-locale-modal-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(dispatch: Dispatch<LocaleAPIActions>) {
   return bindActionCreators<
@@ -103,10 +103,10 @@ export function mapDispatchToProps(dispatch: Dispatch<LocaleAPIActions>) {
 /**
  * Container component for masthead.
  *
- * @element dds-locale-modal-container
+ * @element c4d-locale-modal-container
  */
-@customElement(`${ddsPrefix}-locale-modal-container`)
-class DDSLocaleModalContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-locale-modal-container`)
+class C4DLocaleModalContainer extends ConnectMixin<
   LocaleModalContainerState,
   LocaleAPIActions,
   LocaleModalContainerStateProps,
@@ -115,7 +115,7 @@ class DDSLocaleModalContainer extends ConnectMixin<
   store as Store<LocaleModalContainerState, LocaleAPIActions>,
   mapStateToProps,
   mapDispatchToProps
-)(DDSLocaleModalComposite) {}
+)(C4DLocaleModalComposite) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLocaleModalContainer;
+export default C4DLocaleModalContainer;
diff --git a/packages/web-components/src/components/locale-modal/locale-modal.scss b/packages/web-components/src/components/locale-modal/locale-modal.scss
index 7a1164dbe5e..ea5317fa1f9 100644
--- a/packages/web-components/src/components/locale-modal/locale-modal.scss
+++ b/packages/web-components/src/components/locale-modal/locale-modal.scss
@@ -1,101 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// Copyright IBM Corp. 2020, 2022, 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 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/grid/_inlined/mixins';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/card-link/card-link';
-@import '@carbon/ibmdotcom-styles/scss/components/locale-modal/locale-modal';
-@import '../../globals/scss/box-sizing';
-@import '../expressive-modal/expressive-modal';
-
-:host(#{$dds-prefix}-locale-modal) {
-  @extend :host(#{$dds-prefix}-expressive-modal);
-
-  #{$dds-prefix}-expressive-modal-header {
-    padding: 0 20% 0 $spacing-05;
-    margin-bottom: $carbon--spacing-03;
-  }
-
-  .#{$prefix}--modal-container {
-    padding: $spacing-05;
-  }
-
-  .#{$prefix}--modal-content {
-    padding-right: 0;
-  }
-
-  .#{$prefix}--locale-modal {
-    margin-bottom: 0;
-    &.#{$prefix}--modal-content {
-      padding-top: $carbon--spacing-03;
-      margin-top: $carbon--spacing-07;
-
-      @include carbon--breakpoint('lg', $carbon--grid-breakpoints) {
-        margin-top: auto;
-      }
-    }
-  }
-}
-
-:host(#{$dds-prefix}-locale-modal) #{$dds-prefix}-expressive-modal-heading {
-  width: fit-content;
-}
-
-:host(#{$dds-prefix}-locale-search) {
-  padding-top: $carbon--spacing-03;
-}
-
-:host(#{$dds-prefix}-region-item) {
-  @include carbon--breakpoint('sm', $carbon--grid-breakpoints) {
-    @include carbon--make-col(
-      4,
-      map-get(map-get($carbon--grid-breakpoints, 'sm'), 'columns')
-    );
-  }
-
-  @include carbon--breakpoint('md', $carbon--grid-breakpoints) {
-    @include carbon--make-col(
-      8,
-      map-get(map-get($carbon--grid-breakpoints, 'md'), 'columns')
-    );
-  }
-
-  @include carbon--breakpoint('lg', $carbon--grid-breakpoints) {
-    @include carbon--make-col(
-      8,
-      map-get(map-get($carbon--grid-breakpoints, 'lg'), 'columns')
-    );
-  }
-
-  @include carbon--breakpoint('xlg', $carbon--grid-breakpoints) {
-    @include carbon--make-col(
-      8,
-      map-get(map-get($carbon--grid-breakpoints, 'xlg'), 'columns')
-    );
-  }
-
-  .#{$prefix}--link {
-    @extend .#{$prefix}--tile;
-    @extend .#{$prefix}--tile--clickable;
-    @extend .#{$prefix}--card;
-
-    align-items: stretch;
-    text-align: inherit;
-
-    &:hover.#{$prefix}--link--disabled {
-      display: flex;
-    }
-
-    .#{$prefix}--card__wrapper .bx--card__footer svg {
-      color: $ui-05;
-    }
-  }
-
-  &[disabled] .#{$prefix}--link {
-    @extend .#{$prefix}--card__CTA--disabled;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/locale-modal';
diff --git a/packages/web-components/src/components/locale-modal/locale-modal.ts b/packages/web-components/src/components/locale-modal/locale-modal.ts
index 294f5d27924..9c52cf6b563 100644
--- a/packages/web-components/src/components/locale-modal/locale-modal.ts
+++ b/packages/web-components/src/components/locale-modal/locale-modal.ts
@@ -7,38 +7,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
 import ArrowLeft20 from '../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import EarthFilled16 from '../../internal/vendor/@carbon/web-components/icons/earth--filled/16.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { selectorTabbable } from '../../internal/vendor/@carbon/web-components/globals/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSExpressiveModal from '../expressive-modal/expressive-modal';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DExpressiveModal from '../expressive-modal/expressive-modal';
 import '../expressive-modal/expressive-modal-header';
 import '../expressive-modal/expressive-modal-heading';
 import '../expressive-modal/expressive-modal-close-button';
-import DDSLocaleSearch from './locale-search';
-import DDSRegionItem from './region-item';
+import C4DLocaleSearch from './locale-search';
+import C4DRegionItem from './region-item';
 import styles from './locale-modal.scss';
 import { ICON_PLACEMENT } from '../link-with-icon/link-with-icon';
 import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Locale modal.
  *
- * @element dds-locale-modal
+ * @element c4d-locale-modal
  * @slot regions-selector - The area for the regions selector.
  * @slot locales-selector - The area for the locales selector.
  */
-@customElement(`${ddsPrefix}-locale-modal`)
-// `BXModal` extends `HostListenerMixin`
-class DDSLocaleModal extends DDSExpressiveModal {
+@customElement(`${c4dPrefix}-locale-modal`)
+// `CDSModal` extends `HostListenerMixin`
+class C4DLocaleModal extends C4DExpressiveModal {
   /**
    * The current region.
    */
@@ -59,8 +58,8 @@ class DDSLocaleModal extends DDSExpressiveModal {
    * @param event The event.
    */
   private _handleClickRegionSelector(event: MouseEvent) {
-    const { invalid, name } = event.target as DDSRegionItem;
-    if (!invalid) {
+    const { disabled, name } = event.target as C4DRegionItem;
+    if (!disabled) {
       this._currentRegion = name;
     }
   }
@@ -75,7 +74,7 @@ class DDSLocaleModal extends DDSExpressiveModal {
    * Sets focus on primary selectable element.
    */
   private async _setPrimaryFocus() {
-    const { selectorPrimaryFocus } = DDSLocaleModal;
+    const { selectorPrimaryFocus } = C4DLocaleModal;
     const focusTarget = this.querySelector(selectorPrimaryFocus);
     if (focusTarget) {
       (focusTarget as HTMLElement).tabIndex = 0;
@@ -87,11 +86,11 @@ class DDSLocaleModal extends DDSExpressiveModal {
    * Sets focus on locale selector search.
    */
   private async _setSearchFocus() {
-    const { selectorLocaleSearch } = DDSLocaleModal;
+    const { selectorLocaleSearch } = C4DLocaleModal;
     await this.updateComplete;
     const localeSearch = this.querySelector(selectorLocaleSearch);
     if (localeSearch) {
-      (localeSearch as DDSLocaleSearch).reset();
+      (localeSearch as C4DLocaleSearch).reset();
       (localeSearch as HTMLElement).focus();
     }
   }
@@ -106,14 +105,14 @@ class DDSLocaleModal extends DDSExpressiveModal {
       html`
         <p class="${prefix}--modal-header__label ${prefix}--type-delta">
           ${langDisplay}${EarthFilled16({
-            class: `${prefix}--locale-modal__label-globe`,
+            class: `${c4dPrefix}--locale-modal__label-globe`,
           })}
         </p>
       `}
       ${langDisplay &&
       headerTitle &&
       html`
-        <p class="bx--modal-header__heading bx--type-beta">${headerTitle}</p>
+        <p class="cds--modal-header__heading cds--type-beta">${headerTitle}</p>
       `}
     `;
   }
@@ -128,16 +127,16 @@ class DDSLocaleModal extends DDSExpressiveModal {
       _handleClickBackButton: handleClickBackButton,
     } = this;
     return html`
-      <dds-link-with-icon
+      <c4d-link-with-icon
         icon-placement="${ICON_PLACEMENT.LEFT}"
         href="#"
         @click="${handleClickBackButton}">
         ${headerTitle}${ArrowLeft20({
           slot: 'icon',
-          class: `${prefix}--locale-modal__label-arrow`,
+          class: `${c4dPrefix}--locale-modal__label-arrow`,
         })}
-      </dds-link-with-icon>
-      <p class="bx--modal-header__heading bx--type-beta" tabindex="0">
+      </c4d-link-with-icon>
+      <p class="cds--modal-header__heading cds--type-beta" tabindex="0">
         ${currentRegion}
       </p>
     `;
@@ -160,7 +159,7 @@ class DDSLocaleModal extends DDSExpressiveModal {
     const { _handleClickRegionSelector: handleClickRegionSelector } = this;
     return html`
       <div
-        class="${prefix}--modal-content ${prefix}--locale-modal"
+        class="${prefix}--modal-content ${c4dPrefix}--locale-modal"
         @click="${handleClickRegionSelector}">
         <slot name="regions-selector"></slot>
       </div>
@@ -178,15 +177,15 @@ class DDSLocaleModal extends DDSExpressiveModal {
   protected _renderHeader() {
     const { closeButtonAssistiveText } = this;
     return html`
-      <div id="${ddsPrefix}--modal-header">
-        <dds-expressive-modal-header>
-          <dds-expressive-modal-close-button
-            assistive-text="${ifNonNull(closeButtonAssistiveText)}">
-          </dds-expressive-modal-close-button>
-          <dds-expressive-modal-heading
-            >${this._renderHeading()}</dds-expressive-modal-heading
+      <div id="${prefix}--modal-header">
+        <c4d-expressive-modal-header>
+          <c4d-expressive-modal-close-button
+            assistive-text="${ifDefined(closeButtonAssistiveText)}">
+          </c4d-expressive-modal-close-button>
+          <c4d-expressive-modal-heading
+            >${this._renderHeading()}</c4d-expressive-modal-heading
           >
-        </dds-expressive-modal-header>
+        </c4d-expressive-modal-header>
       </div>
     `;
   }
@@ -226,7 +225,7 @@ class DDSLocaleModal extends DDSExpressiveModal {
       // Allow listening components to update their state.
       this.dispatchEvent(
         new CustomEvent(
-          (this.constructor as typeof DDSLocaleModal).eventRegionUpdated,
+          (this.constructor as typeof C4DLocaleModal).eventRegionUpdated,
           {
             bubbles: true,
             composed: true,
@@ -240,10 +239,10 @@ class DDSLocaleModal extends DDSExpressiveModal {
 
       // Pass state to search element.
       const { selectorLocaleSearch } = this
-        .constructor as typeof DDSLocaleModal;
+        .constructor as typeof C4DLocaleModal;
       const localeSearch = this.querySelector(selectorLocaleSearch);
       if (localeSearch) {
-        (localeSearch as DDSLocaleSearch).region = this._currentRegion ?? '';
+        (localeSearch as C4DLocaleSearch).region = this._currentRegion ?? '';
       }
 
       // Set element focus.
@@ -252,14 +251,14 @@ class DDSLocaleModal extends DDSExpressiveModal {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--locale-modal`;
+    return `${c4dPrefix}--locale-modal`;
   }
 
   /**
    * A selector selecting the locale search UI.
    */
   static get selectorLocaleSearch() {
-    return `${ddsPrefix}-locale-search`;
+    return `${c4dPrefix}-locale-search`;
   }
 
   /**
@@ -268,7 +267,7 @@ class DDSLocaleModal extends DDSExpressiveModal {
   static get selectorPrimaryFocus() {
     return `
       [data-modal-primary-focus],
-      ${ddsPrefix}-region-item
+      ${c4dPrefix}-region-item
     `;
   }
 
@@ -278,11 +277,11 @@ class DDSLocaleModal extends DDSExpressiveModal {
   static get selectorTabbable() {
     return `
       ${selectorTabbable},
-      ${ddsPrefix}-expressive-modal,
-      ${ddsPrefix}-expressive-modal-close-button,
-      ${ddsPrefix}-region-item,
-      ${ddsPrefix}-search,
-      ${ddsPrefix}-locale-item
+      ${c4dPrefix}-expressive-modal,
+      ${c4dPrefix}-expressive-modal-close-button,
+      ${c4dPrefix}-region-item,
+      ${prefix}-search,
+      ${c4dPrefix}-locale-item
     `;
   }
 
@@ -290,10 +289,10 @@ class DDSLocaleModal extends DDSExpressiveModal {
    * Name for event fired when a region is selected.
    */
   static get eventRegionUpdated() {
-    return `${ddsPrefix}-locale-modal-region-updated`;
+    return `${c4dPrefix}-locale-modal-region-updated`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLocaleModal;
+export default C4DLocaleModal;
diff --git a/packages/web-components/src/components/locale-modal/locale-search.ts b/packages/web-components/src/components/locale-modal/locale-search.ts
index e4efa51f626..0ed8968ba53 100644
--- a/packages/web-components/src/components/locale-modal/locale-search.ts
+++ b/packages/web-components/src/components/locale-modal/locale-search.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, state, query, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { INPUT_SIZE } from '../../internal/vendor/@carbon/web-components/components/input/input.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
+import { INPUT_SIZE } from '../../internal/vendor/@carbon/web-components/components/text-input/text-input.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import ThrottedInputMixin from '../../globals/mixins/throttled-input';
 import { forEach } from '../../globals/internal/collection-helpers';
-import DDSSearch, { SEARCH_COLOR_SCHEME } from '../search/search';
-import DDSLocaleItem from './locale-item';
+import CDSSearch from '../../internal/vendor/@carbon/web-components/components/search/search.js';
+import '../../internal/vendor/@carbon/web-components/components/search/search.js';
+import C4DLocaleItem from './locale-item';
 import styles from './locale-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * @param target The strings to find the given `searchText` within.
@@ -40,16 +40,16 @@ function search(target?: (string | void)[], searchText?: string) {
 /**
  * Locale search box.
  *
- * @element dds-locale-search
+ * @element c4d-locale-search
  */
-@customElement(`${ddsPrefix}-locale-search`)
-class DDSLocaleSearch extends ThrottedInputMixin(
+@customElement(`${c4dPrefix}-locale-search`)
+class C4DLocaleSearch extends ThrottedInputMixin(
   StableSelectorMixin(LitElement)
 ) {
   /**
    * The container for the locale list.
    */
-  @query(`.${prefix}--locale-modal__list`)
+  @query(`.${c4dPrefix}--locale-modal__list`)
   private _listNode?: HTMLElement;
 
   /**
@@ -61,8 +61,8 @@ class DDSLocaleSearch extends ThrottedInputMixin(
   /**
    * The search box.
    */
-  @query(`${ddsPrefix}-search`)
-  private _searchNode?: DDSSearch;
+  @query(`${prefix}-search`)
+  private _searchNode?: CDSSearch;
 
   @query('[aria-live]')
   private _liveRegion?: HTMLDivElement;
@@ -73,11 +73,11 @@ class DDSLocaleSearch extends ThrottedInputMixin(
    * @param searchText The search text.
    */
   private _updateSearchResults(searchText: string) {
-    const { selectorItem } = this.constructor as typeof DDSLocaleSearch;
+    const { selectorItem } = this.constructor as typeof C4DLocaleSearch;
     const { region: currentRegion, _liveRegion: liveRegion } = this;
     let count = 0;
     forEach(this.querySelectorAll(selectorItem), (item) => {
-      const { country, language, region } = item as DDSLocaleItem;
+      const { country, language, region } = item as C4DLocaleItem;
       const matches =
         region === currentRegion && search([country, language], searchText);
       if (matches) {
@@ -154,7 +154,7 @@ class DDSLocaleSearch extends ThrottedInputMixin(
     if (this.shadowRoot!.delegatesFocus) {
       super.focus();
     } else {
-      const { selectorTabable } = this.constructor as typeof DDSLocaleSearch;
+      const { selectorTabable } = this.constructor as typeof C4DLocaleSearch;
       const delegateTarget = this.shadowRoot!.querySelector(selectorTabable);
       if (delegateTarget) {
         (delegateTarget as HTMLElement).focus();
@@ -187,11 +187,11 @@ class DDSLocaleSearch extends ThrottedInputMixin(
 
   updated(changedProperties) {
     if (changedProperties.has('region')) {
-      const { selectorItem } = this.constructor as typeof DDSLocaleSearch;
+      const { selectorItem } = this.constructor as typeof C4DLocaleSearch;
       const { region } = this;
       forEach(this.querySelectorAll(selectorItem), (item) => {
         (item as HTMLElement).hidden =
-          (item as DDSLocaleItem).region !== region;
+          (item as C4DLocaleItem).region !== region;
       });
     }
   }
@@ -206,25 +206,24 @@ class DDSLocaleSearch extends ThrottedInputMixin(
       _hasAvailableItem: hasAvailableItem,
     } = this;
     return html`
-      <div class="${prefix}--locale-modal__filter">
-        <div class="${prefix}--locale-modal__search">
-          <dds-search
+      <div class="${c4dPrefix}--locale-modal__filter">
+        <div class="${c4dPrefix}--locale-modal__search">
+          <cds-search
             part="searchbox"
             close-button-assistive-text="${closeButtonAssistiveText}"
-            color-scheme="${SEARCH_COLOR_SCHEME.REGULAR}"
             label-text="${labelText}"
             placeholder="${placeholder}"
-            size="${INPUT_SIZE.EXTRA_LARGE}"
-            data-autoid="${ddsPrefix}--locale-modal__filter">
-          </dds-search>
+            size="${INPUT_SIZE.LARGE}"
+            data-autoid="${c4dPrefix}--locale-modal__filter">
+          </cds-search>
           <div class="${prefix}--visually-hidden" aria-live="polite"></div>
-          <p class="${prefix}--locale-modal__search-text">
+          <p class="${c4dPrefix}--locale-modal__search-text">
             ${hasAvailableItem
               ? availabilityLabelText
               : unavailabilityLabelText}
           </p>
         </div>
-        <div class="${prefix}--locale-modal__list" role="list">
+        <div class="${c4dPrefix}--locale-modal__list" role="list">
           <slot></slot>
         </div>
       </div>
@@ -232,31 +231,31 @@ class DDSLocaleSearch extends ThrottedInputMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--locale-search`;
+    return `${c4dPrefix}--locale-search`;
   }
 
   /**
    * A selector selecting the locale item,
    */
   static get selectorTabable() {
-    return `${ddsPrefix}-search`;
+    return `${prefix}-search`;
   }
 
   /**
    * A selector selecting the locale items.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-locale-item`;
+    return `${c4dPrefix}-locale-item`;
   }
 
   /**
    * The event that represents the user input gesture.
    */
   static get eventInput() {
-    return `${ddsPrefix}-search-input`;
+    return `${prefix}-search-input`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLocaleSearch;
+export default C4DLocaleSearch;
diff --git a/packages/web-components/src/components/locale-modal/region-item.ts b/packages/web-components/src/components/locale-modal/region-item.ts
index 0287e47af2e..4b7e83eadda 100644
--- a/packages/web-components/src/components/locale-modal/region-item.ts
+++ b/packages/web-components/src/components/locale-modal/region-item.ts
@@ -7,30 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
-import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html, css } from 'lit';
+import { classMap } from 'lit/directives/class-map.js';
+import { property } from 'lit/decorators.js';
+import C4DCard from '../card/card';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './locale-modal.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Region item.
  *
- * @element dds-region-item
+ * @element c4d-region-item
  */
-@customElement(`${ddsPrefix}-region-item`)
-class DDSRegionItem extends BXLink {
+@customElement(`${c4dPrefix}-region-item`)
+class C4DRegionItem extends C4DCard {
   /**
    * `true` if this region has no countries.
    */
   @property({ type: Boolean })
-  invalid = false;
+  disabled = false;
 
   /**
    * The region name.
@@ -38,66 +36,48 @@ class DDSRegionItem extends BXLink {
   @property({ reflect: true })
   name = '';
 
+  protected _cardClasses = classMap({
+    [`${prefix}--tile`]: true,
+    [`${prefix}--card`]: true,
+    [`${prefix}--tile--clickable`]: true,
+    [`${prefix}--card--link`]: true,
+  });
+
   /**
    * @returns The disabled link content.
    */
   protected _renderDisabledLink() {
-    const { _classes: classes } = this;
+    const { _classes: classes, _cardClasses: cardClasses } = this;
     return html`
       <button id="link" class="${classes}" disabled type="button">
-        ${this._renderInner()}
+        <div class="${cardClasses}">${this._renderInner()}</div>
       </button>
     `;
   }
 
-  /**
-   * @returns The link content.
-   */
-  protected _renderLink() {
-    const { _classes: classes } = this;
-    return html`
-      <button id="link" class="${classes}" type="button">
-        ${this._renderInner()}
-      </button>
-    `;
-  }
-
-  /**
-   * @returns The inner content.
-   */
-  _renderInner() {
-    const { invalid, name } = this;
-    return html`
-      <div class="${prefix}--card__wrapper">
-        <div class="${prefix}--card__content">
-          <h3 class="${prefix}--card__heading">
-            <slot>${name}</slot>
-          </h3>
-          <div class="${prefix}--card__footer">
-            ${(invalid ? Error20 : ArrowRight20)({
-              class: `${prefix}--card__cta`,
-            })}
-          </div>
-        </div>
-      </div>
-    `;
-  }
-
-  shouldUpdate(changedProperties) {
-    if (changedProperties.has('invalid')) {
-      this.disabled = this.invalid;
-    }
-    return true;
+  render() {
+    const { _classes: classes, disabled, _cardClasses: cardClasses } = this;
+    return disabled
+      ? this._renderDisabledLink()
+      : html`
+          <button id="link" class="${classes}" type="button">
+            <div class="${cardClasses}">${this._renderInner()}</div>
+          </button>
+        `;
   }
 
   updated(changedProperties) {
     if (changedProperties.has('name')) {
       const { name } = this;
-      this.dataset.autoId = `${ddsPrefix}--locale-modal__geo-btn-${name}`;
+      this.dataset.autoId = `${c4dPrefix}--locale-modal__geo-btn-${name}`;
     }
   }
 
-  static styles = styles;
+  static get styles() {
+    return css`
+      ${super.styles}${styles}
+    `;
+  }
 }
 
-export default DDSRegionItem;
+export default C4DRegionItem;
diff --git a/packages/web-components/src/components/locale-modal/regions.ts b/packages/web-components/src/components/locale-modal/regions.ts
index d4d48256445..2c6d28b2f3b 100644
--- a/packages/web-components/src/components/locale-modal/regions.ts
+++ b/packages/web-components/src/components/locale-modal/regions.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import '../../internal/vendor/@carbon/web-components/components/search/search.js';
 import styles from './locale-modal.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The regions selector in locale modal.
  *
- * @element dds-regions
+ * @element c4d-regions
  */
-@customElement(`${ddsPrefix}-regions`)
-class DDSRegions extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-regions`)
+class C4DRegions extends StableSelectorMixin(LitElement) {
   /**
    * The shadow slot this regions selector should be in.
    */
@@ -32,18 +31,14 @@ class DDSRegions extends StableSelectorMixin(LitElement) {
   slot = 'regions-selector';
 
   render() {
-    return html`
-      <div class="${prefix}--row">
-        <slot></slot>
-      </div>
-    `;
+    return html` <slot></slot> `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--regions`;
+    return `${c4dPrefix}--regions`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSRegions;
+export default C4DRegions;
diff --git a/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx b/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx
index fc046b41cce..080d1bde8b3 100644
--- a/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/logo-grid/__stories__/README.stories.mdx
@@ -1,11 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
-import DDSLogoGrid from '../logo-grid';
+import C4DLogoGrid from '../logo-grid';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Logo Grid
 
 > 💡 Check our
@@ -31,16 +33,13 @@ import '@carbon/ibmdotcom-web-components/es/components/logo-grid/index.js';
 ### HTML
 
 ```html
-<dds-logo-grid>
-  <dds-content-block-heading>
-    Our customers
-  </dds-content-block-heading>
-  <dds-logo-grid-item
+<cds-logo-grid>
+  <cds-content-block-heading> Our customers </cds-content-block-heading>
+  <cds-logo-grid-item
     default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
-    alt=""
-  ></dds-logo-grid-item>
-  <dds-logo-grid-link href="https://example.com">
-    <dds-card-link-heading>Lorem Ipsum</dds-card-link-heading>
+    alt=""></cds-logo-grid-item>
+  <cds-logo-grid-link href="https://example.com">
+    <cds-card-link-heading>Lorem Ipsum</cds-card-link-heading>
     <svg
       slot="footer"
       focusable="false"
@@ -50,26 +49,28 @@ import '@carbon/ibmdotcom-web-components/es/components/logo-grid/index.js';
       aria-hidden="true"
       width="20"
       height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
+      viewBox="0 0 20 20">
+      <path
+        d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
     </svg>
-  </dds-logo-grid-link>
-</dds-logo-grid>
+  </cds-logo-grid-link>
+</cds-logo-grid>
 ```
 
 ## Props
 
-<Props of="dds-logo-grid" />
+<Props of="cds-logo-grid" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector              | Description                     |
 | ----------------------- | ----------------------------------- | ------------------------------- |
-| `<dds-logo-grid>`       | `data-autoid="dds--logo-grid"`      | Logo Grid main component        |
-| `<dds-logo-link>`       | `data-autoid="dds--logo-grid-link"` | Logo Grid bottom link component |
-| `<dds-logo-item>`       | `data-autoid="dds--logo-grid-item"` | Logo Grid item component        |
+| `<cds-logo-grid>`       | `data-autoid="cds--logo-grid"`      | Logo Grid main component        |
+| `<cds-logo-link>`       | `data-autoid="cds--logo-grid-link"` | Logo Grid bottom link component |
+| `<cds-logo-item>`       | `data-autoid="cds--logo-grid-item"` | Logo Grid item component        |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx b/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx
index 251c2bf2089..7960d9b8c6f 100644
--- a/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/logo-grid/__stories__/README.stories.react.mdx
@@ -23,27 +23,27 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
-import DDSLogoGridLink from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-link';
-import DDSLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
+import C4DLogoGridLink from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-link';
+import C4DLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
 
 function App() {
   return (
-    <DDSLogoGrid>
-      <DDSContentBlockHeading>Our customers</DDSContentBlockHeading>
-      <DDSLogoGridItem
+    <C4DLogoGrid>
+      <C4DContentBlockHeading>Our customers</C4DContentBlockHeading>
+      <C4DLogoGridItem
         default-src="https://fpoimg.com/288x216?text=Example%20Logo&bg_color=ee5396&text_color=161616"
-        alt=""></DDSLogoGridItem>
-      <DDSLogoGridLink href="https://example.com">
-        <DDSCardLinkHeading>Lorem ipsum</DDSCardLinkHeading>
-        <DDSCardFooter>
+        alt=""></C4DLogoGridItem>
+      <C4DLogoGridLink href="https://example.com">
+        <C4DCardLinkHeading>Lorem ipsum</C4DCardLinkHeading>
+        <C4DCardFooter>
           <ArrowRight20 slot="icon" />
-        </DDSCardFooter>
-      </DDSLogoGridLink>
-    </DDSLogoGrid>
+        </C4DCardFooter>
+      </C4DLogoGridLink>
+    </C4DLogoGrid>
   );
 }
 ```
@@ -60,6 +60,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-logo-grid>`       | N/A                    | Component   |
+| `<cds-logo-grid>`       | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx
index 09168df5a61..097b44e5eb8 100644
--- a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx
+++ b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.react.tsx
@@ -13,21 +13,30 @@ import React from 'react';
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
-import DDSCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
-import DDSContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
-import DDSLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
-import DDSLogoGridLink from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-link';
-import DDSLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
+import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
+import C4DCardLinkHeading from '@carbon/ibmdotcom-web-components/es/components-react/card-link/card-link-heading';
+import C4DContentBlockHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-block/content-block-heading';
+import C4DLogoGrid from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid';
+import C4DLogoGridLink from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-link';
+import C4DLogoGridItem from '@carbon/ibmdotcom-web-components/es/components-react/logo-grid/logo-grid-item';
 
 import logos from './data/logos.js';
 import readme from './README.stories.react.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
-export const Default = args => {
-  const { heading, logoCount, logoRatio, logosGroup, hideBorder, showCta, ctaCopy, ctaHref } = args?.LogoGrid ?? {};
+export const Default = (args) => {
+  const {
+    heading,
+    logoCount,
+    logoRatio,
+    logosGroup,
+    hideBorder,
+    showCta,
+    ctaCopy,
+    ctaHref,
+  } = args?.LogoGrid ?? {};
 
-  const logoGrid = document.querySelector('dds-logo-grid');
+  const logoGrid = document.querySelector('cds-logo-grid');
 
   if (logoGrid && hideBorder) {
     logoGrid.setAttribute('hide-border', hideBorder);
@@ -36,30 +45,37 @@ export const Default = args => {
   }
 
   return (
-    <DDSLogoGrid logo-count={logoCount} logo-ratio={logoRatio}>
-      <DDSContentBlockHeading>{heading}</DDSContentBlockHeading>
-      {logosGroup && logosGroup.map(elem => <DDSLogoGridItem default-src={elem.imgSrc} alt={elem.altText}></DDSLogoGridItem>)}
+    <C4DLogoGrid logo-count={logoCount} logo-ratio={logoRatio}>
+      <C4DContentBlockHeading>{heading}</C4DContentBlockHeading>
+      {logosGroup &&
+        logosGroup.map((elem) => (
+          <C4DLogoGridItem
+            default-src={elem.imgSrc}
+            alt={elem.altText}></C4DLogoGridItem>
+        ))}
       {showCta ? (
-        <DDSLogoGridLink href={ctaHref}>
-          <DDSCardLinkHeading>{ctaCopy}</DDSCardLinkHeading>
-          <DDSCardFooter>
+        <C4DLogoGridLink href={ctaHref}>
+          <C4DCardLinkHeading>{ctaCopy}</C4DCardLinkHeading>
+          <C4DCardFooter>
             <ArrowRight20 slot="icon" />
-          </DDSCardFooter>
-        </DDSLogoGridLink>
+          </C4DCardFooter>
+        </C4DLogoGridLink>
       ) : (
         ''
       )}
-    </DDSLogoGrid>
+    </C4DLogoGrid>
   );
 };
 
 export default {
   title: 'Components/Logo grid',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-md-8 bx--col-lg-12">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-sm-4 cds--col-md-8 cds--col-lg-12">
+            {story()}
+          </div>
         </div>
       </div>
     ),
@@ -70,10 +86,21 @@ export default {
     knobs: {
       LogoGrid: () => ({
         heading: textNullable('Heading (heading)', 'Our customers'),
-        logoCount: select('Column count (logoCount)', { 'Default (3)': '3', '4': '4' }, '3'),
-        logoRatio: select('Logo aspect ratio (logoRatio)', { 'Default (4:3)': '4:3', '16:9': '16:9', '2:1': '2:1' }, '4:3'),
+        logoCount: select(
+          'Column count (logoCount)',
+          { 'Default (3)': '3', '4': '4' },
+          '3'
+        ),
+        logoRatio: select(
+          'Logo aspect ratio (logoRatio)',
+          { 'Default (4:3)': '4:3', '16:9': '16:9', '2:1': '2:1' },
+          '4:3'
+        ),
         logosGroup: logos,
-        hideBorder: boolean('Hide border (hideBorder): Hide the bottom border', false),
+        hideBorder: boolean(
+          'Hide border (hideBorder): Hide the bottom border',
+          false
+        ),
         showCta: boolean('Display CTA:', false),
         ctaCopy: text('CTA Copy (ctaCopy)', 'Lorem ipsum dolor sit amet'),
         ctaHref: text('CTA Href (ctaHref):', 'http://local.url.com/'),
diff --git a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts
index aa3fb1575fc..28d0a808e0d 100644
--- a/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts
+++ b/packages/web-components/src/components/logo-grid/__stories__/logo-grid.stories.ts
@@ -14,7 +14,7 @@ import '../logo-grid-link';
 import '../../card-link/card-link-heading';
 import '../../card/card-footer';
 import { boolean, text, select } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import logos from './data/logos.js';
 import readme from './README.stories.mdx';
@@ -33,30 +33,30 @@ export const Default = (args) => {
   } = args?.LogoGrid ?? {};
 
   return html`
-    <dds-logo-grid
+    <c4d-logo-grid
       ?hide-border="${hideBorder}"
       logo-count="${logoCount}"
       logo-ratio="${logoRatio}">
-      <dds-content-block-heading> ${heading} </dds-content-block-heading>
+      <c4d-content-block-heading> ${heading} </c4d-content-block-heading>
       ${logosGroup &&
       logosGroup.map(
         (elem) => html`
-          <dds-logo-grid-item
+          <c4d-logo-grid-item
             default-src="${elem.imgSrc}"
-            alt="${elem.altText}"></dds-logo-grid-item>
+            alt="${elem.altText}"></c4d-logo-grid-item>
         `
       )}
       ${showCta
         ? html`
-            <dds-logo-grid-link href="${ctaHref}">
-              <dds-card-link-heading>${ctaCopy}</dds-card-link-heading>
-              <dds-card-footer>
+            <c4d-logo-grid-link href="${ctaHref}">
+              <c4d-card-link-heading>${ctaCopy}</c4d-card-link-heading>
+              <c4d-card-footer>
                 ${ArrowRight20({ slot: 'icon' })}
-              </dds-card-footer>
-            </dds-logo-grid-link>
+              </c4d-card-footer>
+            </c4d-logo-grid-link>
           `
         : ''}
-    </dds-logo-grid>
+    </c4d-logo-grid>
   `;
 };
 
@@ -64,9 +64,11 @@ export default {
   title: 'Components/Logo grid',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--col-md-8 cds--col-lg-12">
+            ${story()}
+          </div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/logo-grid/__tests__/logo-grid.test.ts b/packages/web-components/src/components/logo-grid/__tests__/logo-grid.test.ts
index a6a074bd7ab..f41b458ae32 100644
--- a/packages/web-components/src/components/logo-grid/__tests__/logo-grid.test.ts
+++ b/packages/web-components/src/components/logo-grid/__tests__/logo-grid.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../logo-grid';
 import '../logo-grid-item';
 import { Default } from '../__stories__/logo-grid.stories';
@@ -17,11 +17,11 @@ const template = (props?) =>
     LogoGrid: { hideBorder: true, ...props },
   });
 
-describe('dds-logo-grid', function () {
-  it('renders dds-logo-grid properly', async function () {
+describe('c4d-logo-grid', function () {
+  it('renders c4d-logo-grid properly', async function () {
     render(template(), document.body);
-    await Promise.resolve(); // Update cycle for `<dds-button-group>`
-    expect(document.body.querySelector('dds-logo-grid')).toMatchSnapshot({
+    await Promise.resolve(); // Update cycle for `<c4d-button-group>`
+    expect(document.body.querySelector('c4d-logo-grid')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
diff --git a/packages/web-components/src/components/logo-grid/logo-grid-item.ts b/packages/web-components/src/components/logo-grid/logo-grid-item.ts
index 3455ec61dce..0c1f7f4d5ae 100644
--- a/packages/web-components/src/components/logo-grid/logo-grid-item.ts
+++ b/packages/web-components/src/components/logo-grid/logo-grid-item.ts
@@ -6,32 +6,37 @@
  * 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 { html } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './logo-grid.scss';
-import DDSImage from '../image/image';
+import C4DImage from '../image/image';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Logo-grid-item.
  *
- * @element dds-logo-grid-item
+ * @element c4d-logo-grid-item
  */
-@customElement(`${ddsPrefix}-logo-grid-item`)
-class DDSLogoGridItem extends StableSelectorMixin(DDSImage) {
+@customElement(`${c4dPrefix}-logo-grid-item`)
+class C4DLogoGridItem extends StableSelectorMixin(C4DImage) {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 
   static get stableSelector() {
-    return `${ddsPrefix}--logo-grid-item`;
+    return `${c4dPrefix}--logo-grid-item`;
   }
 
   render() {
-    return html` <div class="bx--logo-grid__logo">${super.render()}</div> `;
+    return html` <div class="cds--logo-grid__logo">${super.render()}</div> `;
   }
 }
 
+console.warn(
+  'The logo-grid-item component has been deprecated in favor of the content-section/block and image-group component. ' + //TODO confirm new image-group or images in grid
+    'See content-section/block and image-group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLogoGridItem;
+export default C4DLogoGridItem;
diff --git a/packages/web-components/src/components/logo-grid/logo-grid-link.ts b/packages/web-components/src/components/logo-grid/logo-grid-link.ts
index 1d850287d87..ca2e8411ddc 100644
--- a/packages/web-components/src/components/logo-grid/logo-grid-link.ts
+++ b/packages/web-components/src/components/logo-grid/logo-grid-link.ts
@@ -6,22 +6,23 @@
  * 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 { css, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './logo-grid.scss';
-import DDSCardLink from '../card-link/card-link';
+import C4DCardLink from '../card-link/card-link';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Logo-grid-link.
  *
- * @element dds-logo-grid-link
+ * @element c4d-logo-grid-link
  */
-@customElement(`${ddsPrefix}-logo-grid-link`)
-class DDSLogoGridLink extends StableSelectorMixin(DDSCardLink) {
+@customElement(`${c4dPrefix}-logo-grid-link`)
+class C4DLogoGridLink extends StableSelectorMixin(C4DCardLink) {
   /**
    * The shadow slot this link should be in.
    */
@@ -29,7 +30,7 @@ class DDSLogoGridLink extends StableSelectorMixin(DDSCardLink) {
   slot = 'footer';
 
   static get stableSelector() {
-    return `${ddsPrefix}--logo-grid-link`;
+    return `${c4dPrefix}--logo-grid-link`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -40,5 +41,10 @@ class DDSLogoGridLink extends StableSelectorMixin(DDSCardLink) {
   }
 }
 
+console.warn(
+  'The logo-grid-link component has been deprecated in favor of the content-section/block and image-group component. ' + //TODO confirm new image-group or images in grid
+    'See content-section/block and image-group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLogoGridLink;
+export default C4DLogoGridLink;
diff --git a/packages/web-components/src/components/logo-grid/logo-grid.scss b/packages/web-components/src/components/logo-grid/logo-grid.scss
index c8d5eb70aad..2d701d0c20f 100644
--- a/packages/web-components/src/components/logo-grid/logo-grid.scss
+++ b/packages/web-components/src/components/logo-grid/logo-grid.scss
@@ -7,6 +7,4 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/components/logo-grid/logo-grid';
+@use '@carbon/ibmdotcom-styles/scss/components/logo-grid';
diff --git a/packages/web-components/src/components/logo-grid/logo-grid.ts b/packages/web-components/src/components/logo-grid/logo-grid.ts
index 5dd1647d6a0..77442241aa5 100644
--- a/packages/web-components/src/components/logo-grid/logo-grid.ts
+++ b/packages/web-components/src/components/logo-grid/logo-grid.ts
@@ -6,28 +6,27 @@
  * 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 { css, html, property, TemplateResult } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css, html, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import parseAspectRatio from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/parseAspectRatio/parseAspectRatio';
-import DDSContentBlock from '../content-block/content-block';
+import C4DContentBlock from '../content-block/content-block';
 import '../horizontal-rule/horizontal-rule';
 import '../content-block/content-block-heading';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './logo-grid.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Logo grid.
  *
- * @element dds-logo-grid
+ * @element c4d-logo-grid
  */
-@customElement(`${ddsPrefix}-logo-grid`)
-class DDSLogoGrid extends StableSelectorMixin(DDSContentBlock) {
+@customElement(`${c4dPrefix}-logo-grid`)
+class C4DLogoGrid extends StableSelectorMixin(C4DContentBlock) {
   protected _renderInnerBody() {
     const { _hasContent: hasContent, _hasMedia: hasMedia, logoCount } = this;
 
@@ -104,12 +103,12 @@ class DDSLogoGrid extends StableSelectorMixin(DDSContentBlock) {
         <slot name="heading"></slot>
         ${this._renderBody()}
       </div>
-      ${!this.hideBorder ? html` <dds-hr></dds-hr> ` : ``}
+      ${!this.hideBorder ? html` <c4d-hr></c4d-hr> ` : ``}
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--logo-grid`;
+    return `${c4dPrefix}--logo-grid`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -120,5 +119,10 @@ class DDSLogoGrid extends StableSelectorMixin(DDSContentBlock) {
   }
 }
 
+console.warn(
+  'The logo-grid component has been deprecated in favor of the content-section/block and image-group component. ' + //TODO confirm new image-group or images in grid
+    'See content-section/block and image-group documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSLogoGrid;
+export default C4DLogoGrid;
diff --git a/packages/web-components/src/components/markdown/markdown.scss b/packages/web-components/src/components/markdown/markdown.scss
index bd74b36bdc9..cd5ee70b5b7 100644
--- a/packages/web-components/src/components/markdown/markdown.scss
+++ b/packages/web-components/src/components/markdown/markdown.scss
@@ -7,11 +7,11 @@
 
 $css--reset: false !default;
 
-@import 'carbon-components/scss/globals/scss/css--reset';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-:host(#{$dds-prefix}-markdown) {
-  p {
-    @include reset;
-  }
+:host(#{$c4d-prefix}-markdown) {
+  // shouldn't be needed
+  // p {
+  //   @include reset;
+  // }
 }
diff --git a/packages/web-components/src/components/markdown/markdown.ts b/packages/web-components/src/components/markdown/markdown.ts
index 680c377def4..35e8c096f26 100644
--- a/packages/web-components/src/components/markdown/markdown.ts
+++ b/packages/web-components/src/components/markdown/markdown.ts
@@ -7,29 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render } from 'lit-html';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html.js';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import { LitElement, html, render } from 'lit';
+import { property } from 'lit/decorators.js';
 import '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import '../../internal/vendor/@carbon/web-components/components/list/ordered-list.js';
 import '../../internal/vendor/@carbon/web-components/components/list/unordered-list.js';
 import '../../internal/vendor/@carbon/web-components/components/list/list-item.js';
 import markdownToHtml from '@carbon/ibmdotcom-utilities/es/utilities/markdownToHtml/markdownToHtml.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './markdown.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Markdown content.
  *
- * @element dds-markdown
+ * @element c4d-markdown
  */
-@customElement(`${ddsPrefix}-markdown`)
-class DDSMarkdown extends LitElement {
+@customElement(`${c4dPrefix}-markdown`)
+class C4DMarkdown extends LitElement {
   /**
    * `true` if the first rendering has happened.
    */
@@ -94,11 +92,14 @@ class DDSMarkdown extends LitElement {
         )}
       `;
       this._hasRendered = true;
-      render(lightDOMTemplateResult, this, { eventContext: this });
+      this.innerText = ''; // avoid text rendering twice
+      render(lightDOMTemplateResult, this);
     }
-    this.querySelectorAll('bx-ordered-list, bx-unordered-list').forEach((e) => {
-      e.setAttribute('isExpressive', '');
-    });
+    this.querySelectorAll('cds-ordered-list, cds-unordered-list').forEach(
+      (e) => {
+        e.setAttribute('isExpressive', '');
+      }
+    );
   }
 
   render() {
@@ -108,4 +109,4 @@ class DDSMarkdown extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSMarkdown;
+export default C4DMarkdown;
diff --git a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx
index c70fd0e3ae3..bcf4169f66b 100644
--- a/packages/web-components/src/components/masthead/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/masthead/__stories__/README.stories.mdx
@@ -31,24 +31,62 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
 ### JS (via import)
 
-```javascript
+````javascript
 import '@carbon/ibmdotcom-web-components/es/components/masthead/masthead-container.js';
+```<Description markdown={`\${cdnJs({ components: ['masthead'] })}`} />
+<Description markdown={`${cdnCss()}`} />
+
+### HTML
+
+```html
+<c4d-masthead-container></c4d-masthead-container>
+````
+
+#### Adopting Masthead v2 with new data endpoint
+
+###### JS (via CDN):
+
+```html
+// Alpha tag using changes from the feature branch (feat/masthead-v2)
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.min.js"></script>
 ```
 
-<Description markdown={`${cdnJs({ components: ['masthead'] })}`} />
+###### Markup:
 
-<Description markdown={`${cdnCss()}`} />
+```html
+<c4d-masthead-container
+  data-endpoint="/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2"
+  auth-method="profile-api"
+  has-contact="false"></c4d-masthead-container>
+```
 
-### HTML
+#### Adopting Masthead v2 with Cloud data endpoint
+
+###### JS (via CDN):
 
 ```html
-<dds-masthead-container></dds-masthead-container>
+// Alpha tag using changes from the feature branch (feat/masthead-v2)
+<script
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v2/alpha/masthead.min.js"></script>
+```
+
+###### Markup:
+
+```html
+<c4d-masthead-container
+  data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead"
+  platform="Cloud"
+  auth-method="cookie"
+  has-contact="true"></c4d-masthead-container>
 ```
 
 #### Setting Platform
 
 ```html
-<dds-masthead-container platform="Lorem Ipsum"></dds-masthead-container>
+<c4d-masthead-container platform="Lorem Ipsum"></c4d-masthead-container>
 ```
 
 #### Setting Platform URL
@@ -59,9 +97,9 @@ specific URL for each locale. This property has to be set via javascript.
 ###### Setting a single platform URL:
 
 ```html
-<dds-masthead-container
+<c4d-masthead-container
   platform="Lorem Ipsum"
-  id="masthead-container"></dds-masthead-container>
+  id="masthead-container"></c4d-masthead-container>
 ```
 
 ```javascript
@@ -91,9 +129,9 @@ document.getElementById('masthead-container').platformUrl = urlObject;
 ```
 
 ```html
-<dds-masthead-container
+<c4d-masthead-container
   platform="Lorem Ipsum"
-  id="masthead-container"></dds-masthead-container>
+  id="masthead-container"></c4d-masthead-container>
 ```
 
 #### Custom Navigation
@@ -108,8 +146,9 @@ document.getElementById('masthead-container').customNavLinks = links;
 
 #### Using L1 nav
 
-To use L1 nav, set `l1Data` prop. `l1Data` prop should be an object that
-contains the navigation data of L1 nav:
+To use L1 nav, set `l1Data` prop. `l1Data` prop should be a MastheadL1 object,
+as defined in packages/services-store/src/actions/translateAPI.ts that contains
+the navigation data of L1 nav:
 
 ```javascipt
 const l1Data = {
@@ -117,21 +156,22 @@ const l1Data = {
     name: 'Stock Charts',
     url: 'https://example.com/',
   },
-  menuItems: (The nav links),
+  menuItems: [...],
+  actions: {...},
 }
 ```
 
 ```html
-<dds-masthead-container id="masthead-container"></dds-masthead-container>
+<c4d-masthead-container id="masthead-container"></c4d-masthead-container>
 ```
 
 To set a custom endpoint for the translation service to fetch from, set either
-the `data-endpoint` attribute like below or `DDS_TRANSLATION_ENDPOINT`
+the `data-endpoint` attribute like below or `C4D_TRANSLATION_ENDPOINT`
 environment variable.
 
 ```html
-<dds-masthead-container
-  data-endpoint="/custom-endpoint"></dds-masthead-container>
+<c4d-masthead-container
+  data-endpoint="/custom-endpoint"></c4d-masthead-container>
 ```
 
 ### Setting the active menu item
@@ -153,6 +193,24 @@ been set.
 If no other menu items are marked active and the optional `platformUrl` property
 has been set, the platform link will be marked active.
 
+### Understanding the different authentication method types
+
+The `<c4d-masthead-container>` and `<c4d-masthead-composite>` components both
+expose the `auth-method` property which allows the adopters to define the
+authentication method based on their content ecosystems and renders the ultity
+menu items (located on the top right-hand area) based on the defined auth
+method. See below for more context on each available value.
+
+- `auth-method="profile-api"` - The default authentication method used on the
+  global masthead to display links to the MyIBM profile.
+- `auth-method="cookie"` - This authentication method checks for the cookie name
+  value return from the `cloud.ibm.com` console application (eg.
+  `com.ibm.cloud.iam.LoggedIn.prod`) and see if it returns `1` or `0`. This
+  method is designed and intended for "Cloud" web segment usage only.
+- `auth-method="docs-api"` - This authentication method checks against the
+  console API user login response. This method is designed and intended for
+  Cloud Docs (https://cloud.ibm.com) team usage only.
+
 ## Using custom search with typeahead API
 
 Using a search API other than the default provided from IBM Search is supported.
@@ -161,7 +219,7 @@ First, add the `custom-typeahead-api` attribute into the masthead and set it to
 `true`.
 
 ```html
-<dds-masthead-container custom-typeahead-api="true"></dds-masthead-container>
+<c4d-masthead-container custom-typeahead-api="true"></c4d-masthead-container>
 ```
 
 As an example, we will be using the IBM Docs API to fetch the data, retrieving
@@ -181,17 +239,17 @@ async function customTypeaheadApiFunction(searchVal) {
 ```
 
 To query the current masthead search input, we need to create an event listener
-to listen for the `dds-search-with-typeahead-input` event. Once captured, we
+to listen for the `c4d-search-with-typeahead-input` event. Once captured, we
 need to call our asynchronous function to fetch the custom API results based on
 the query. Once the results are retrieved, a new custom event
-`dds-custom-typeahead-api-results` needs to be dispatched containing the results
+`c4d-custom-typeahead-api-results` needs to be dispatched containing the results
 for the component to render the search suggestions.
 
 ```javascript
-document.addEventListener('dds-search-with-typeahead-input', async (e) => {
+document.addEventListener('c4d-search-with-typeahead-input', async (e) => {
   const results = await customTypeaheadApiFunction(e.detail.value);
   document.dispatchEvent(
-    new CustomEvent('dds-custom-typeahead-api-results', { detail: results })
+    new CustomEvent('c4d-custom-typeahead-api-results', { detail: results })
   );
 });
 ```
@@ -227,8 +285,8 @@ async function customTypeaheadApiFunction(searchVal) {
 }
 ```
 
-As mentioned above, the two events `dds-search-with-typeahead-input` and
-`dds-custom-typeahead-api-results` must be handled for suggestions to be
+As mentioned above, the two events `c4d-search-with-typeahead-input` and
+`c4d-custom-typeahead-api-results` must be handled for suggestions to be
 rendered -- the same code for the event listener can be reused.
 
 #### Note
@@ -304,14 +362,14 @@ This array will be passed into the `scopeParameters` property. If using
 the `.`), in order for the array to be processed properly in the component.
 
 ```html
-<dds-masthead-composite
-  .scopeParameters="${scopeParameters}"></dds-masthead-composite>
+<c4d-masthead-composite
+  .scopeParameters="${scopeParameters}"></c4d-masthead-composite>
 ```
 
 Alternatively, JavaScript can be used to insert it into the component.
 
 ```javascript
-document.querySelector('dds-masthead-composite').scopeParameters =
+document.querySelector('c4d-masthead-composite').scopeParameters =
   scopeParameters;
 ```
 
@@ -321,24 +379,24 @@ scope.
 
 ```javascript
 const placeholderFormatter = ({ scopeValue }) => `Buscar en ${scopeValue}`;
-document.querySelector('dds-search-with-typeahead').placeholderFormatter =
+document.querySelector('c4d-search-with-typeahead').placeholderFormatter =
   placeholderFormatter;
 ```
 
 ## Props
 
-### `<dds-masthead-container>`/`<dds-masthead-composite>`
+### `<c4d-masthead-container>`/`<c4d-masthead-composite>`
 
-<Props of="dds-masthead-composite" />
+<Props of="c4d-masthead-composite" />
 
 For Cloud-specific version of masthead-container,
-`<dds-cloud-masthead-container>`, we support two user authentication methods,
+`<c4d-cloud-masthead-container>`, we support two user authentication methods,
 via cookie or api. To select between the two, provide the `auth-method` prop
 with a value of either 'cookie' or 'api'.
 
 ```html
-<dds-cloud-masthead-container
-  auth-method="cookie"></dds-cloud-masthead-container>
+<c4d-cloud-masthead-container
+  auth-method="cookie"></c4d-cloud-masthead-container>
 ```
 
 ## Stable selectors
@@ -347,16 +405,16 @@ See
 [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
 to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector                                                                   | Compatibility selector                                                   | Description |
-| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
-| `<dds-masthead>`                                                                          | `data-autoid="dds--masthead"`                                            | Component   |
-| `<dds-masthead-menu-button>`                                                              | `data-autoid="dds--masthead__hamburger"`                                 | Interactive |
-| `<dds-top-nav-name>`                                                                      | `data-autoid="dds--masthead__platform-name"`                             | Interactive |
-| `<dds-top-nav>`                                                                           | `data-autoid="dds--masthead__l0-nav"`                                    | Component   |
-| `<dds-top-nav-menu trigger-content="${item}">` and `<dds-top-nav-item title="${item}">`   | `data-autoid="dds--masthead__l0-nav--nav${item}"`                        | Interactive |
-| `<dds-top-nav-menu-item title="${item}">`                                                 | `data-autoid="dds--masthead__l0-nav--subnav-col${item}-item${item}"`     | Interactive |
-| `<dds-left-nav>`                                                                          | `data-autoid="dds--masthead__l0-sidenav"`                                | Component   |
-| `<dds-left-nav-menu trigger-content="${item}">` and `<dds-left-nav-item title="${item}">` | `data-autoid="dds--masthead__l0-sidenav--nav${item}"`                    | Interactive |
-| `<dds-left-nav-menu-item title="${item}">`                                                | `data-autoid="dds--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive |
+| Web Components selector                                                                 | Compatibility selector                                                   | Description |
+| --------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
+| `<c4d-masthead>`                                                                        | `data-autoid="c4d--masthead"`                                            | Component   |
+| `<c4d-masthead-menu-button>`                                                            | `data-autoid="c4d--masthead__hamburger"`                                 | Interactive |
+| `<c4d-top-nav-name>`                                                                    | `data-autoid="c4d--masthead__platform-name"`                             | Interactive |
+| `<c4d-top-nav>`                                                                         | `data-autoid="c4d--masthead__l0-nav"`                                    | Component   |
+| `<c4d-top-nav-menu trigger-content="${item}">` and `<c4d-top-nav-item title="${item}">` | `data-autoid="c4d--masthead__l0-nav--nav${item}"`                        | Interactive |
+| `<c4d-top-nav-menu-item title="${item}">`                                               | `data-autoid="c4d--masthead__l0-nav--subnav-col${item}-item${item}"`     | Interactive |
+| `<c4d-left-nav>`                                                                        | `data-autoid="c4d--masthead__l0-sidenav"`                                | Component   |
+| `<c4d-left-nav-menu trigger-content="${item}">`                                         | `data-autoid="c4d--masthead__l0-sidenav--nav${item}"`                    | Interactive |
+| `<c4d-left-nav-menu-item title="${item}">`                                              | `data-autoid="c4d--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx b/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx
index dd3d18ac283..3c701ac40ca 100644
--- a/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/masthead/__stories__/README.stories.react.mdx
@@ -32,10 +32,10 @@ import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-rea
 ### JS
 
 ```javascript
-import DDSMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container.js';
+import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container.js';
 
 function App() {
-  return <DDSMastheadContainer></DDSMastheadContainer>;
+  return <C4DMastheadContainer></C4DMastheadContainer>;
 }
 ```
 
@@ -43,7 +43,7 @@ function App() {
 
 ```javascript
 function App() {
-  return <DDSMastheadContainer platform="Lorem ipsum"></DDSMastheadContainer>;
+  return <C4DMastheadContainer platform="Lorem ipsum"></C4DMastheadContainer>;
 }
 ```
 
@@ -57,9 +57,9 @@ specific URL for each locale. This property has to be set via javascript.
 ```javascript
 function App() {
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       platform="Lorem ipsum"
-      id="masthead-container"></DDSMastheadContainer>
+      id="masthead-container"></C4DMastheadContainer>
   );
 }
 ```
@@ -93,9 +93,9 @@ document.getElementById('masthead-container').platformUrl = urlObject;
 ```javascript
 function App() {
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       platform="Lorem ipsum"
-      id="masthead-container"></DDSMastheadContainer>
+      id="masthead-container"></C4DMastheadContainer>
   );
 }
 ```
@@ -127,18 +127,18 @@ const l1Data = {
 
 ```javascript
 function App() {
-  return <DDSMastheadContainer id="masthead-container"></DDSMastheadContainer>;
+  return <C4DMastheadContainer id="masthead-container"></C4DMastheadContainer>;
 }
 ```
 
 To set a custom endpoint for the translation service to fetch from, set either
-the `data-endpoint` attribute like below or `DDS_TRANSLATION_ENDPOINT`
+the `data-endpoint` attribute like below or `C4D_TRANSLATION_ENDPOINT`
 environment variable.
 
 ```javascript
 function App() {
   return (
-    <DDSMastheadContainer data-endpoint="/custom-endpoint"></DDSMastheadContainer>
+    <C4DMastheadContainer data-endpoint="/custom-endpoint"></C4DMastheadContainer>
   );
 }
 ```
@@ -172,7 +172,7 @@ First, add the `custom-typeahead-api` attribute into the masthead and set it to
 ```javascript
 function App() {
   return (
-    <DDSMastheadContainer custom-typeahead-api="true"></DDSMastheadContainer>
+    <C4DMastheadContainer custom-typeahead-api="true"></C4DMastheadContainer>
   );
 }
 
@@ -189,17 +189,17 @@ async function customTypeaheadApiFunction(searchVal) {
 ```
 
 To query the current masthead search input, we need to create an event listener
-to listen for the `dds-search-with-typeahead-input` event. Once captured, we
+to listen for the `cds-search-with-typeahead-input` event. Once captured, we
 need to call our asynchronous function to fetch the custom API results based on
 the query. Once the results are retrieved, a new custom event
-`dds-custom-typeahead-api-results` needs to be dispatched containing the results
+`cds-custom-typeahead-api-results` needs to be dispatched containing the results
 for the component to render the search suggestions.
 
 ```javascript
-document.addEventListener('dds-search-with-typeahead-input', async (e) => {
+document.addEventListener('cds-search-with-typeahead-input', async (e) => {
   const results = await customTypeaheadApiFunction(e.detail.value);
   document.dispatchEvent(
-    new CustomEvent('dds-custom-typeahead-api-results', { detail: results })
+    new CustomEvent('cds-custom-typeahead-api-results', { detail: results })
   );
 });
 ```
@@ -235,8 +235,8 @@ async function customTypeaheadApiFunction(searchVal) {
 }
 ```
 
-As mentioned above, the two events `dds-search-with-typeahead-input` and
-`dds-custom-typeahead-api-results` must be handled for suggestions to be
+As mentioned above, the two events `cds-search-with-typeahead-input` and
+`cds-custom-typeahead-api-results` must be handled for suggestions to be
 rendered -- the same code for the event listener can be reused.
 
 #### Note
@@ -314,8 +314,8 @@ the `.`), in order for the array to be processed properly in the component.
 ```javascript
 function App() {
   return (
-    <DDSMastheadContainer
-      scopeParameters={scopeParameters}></DDSMastheadContainer>
+    <C4DMastheadContainer
+      scopeParameters={scopeParameters}></C4DMastheadContainer>
   );
 }
 ```
@@ -323,7 +323,7 @@ function App() {
 Alternatively, JavaScript can be used to insert it into the component.
 
 ```javascript
-document.querySelector('dds-masthead-composite').scopeParameters =
+document.querySelector('cds-masthead-composite').scopeParameters =
   scopeParameters;
 ```
 
@@ -333,7 +333,7 @@ scope.
 
 ```javascript
 const placeholderFormatter = ({ scopeValue }) => `Buscar en ${scopeValue}`;
-document.querySelector('dds-search-with-typeahead').placeholderFormatter =
+document.querySelector('cds-search-with-typeahead').placeholderFormatter =
   placeholderFormatter;
 ```
 
@@ -341,16 +341,16 @@ document.querySelector('dds-search-with-typeahead').placeholderFormatter =
 
 <Props of={PropTypesRef} />
 
-[dds-masthead-container props](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/?path=/docs/components-masthead--with-alternate-logo-and-tooltip#props)
+[cds-masthead-container props](https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/?path=/docs/components-masthead--with-alternate-logo-and-tooltip#props)
 
 For Cloud-specific version of masthead-container,
-`<dds-cloud-masthead-container>`, we support two user authentication methods,
+`<cds-cloud-masthead-container>`, we support two user authentication methods,
 via cookie or api. To select between the two, provide the `auth-method` prop
 with a value of either 'cookie' or 'api'.
 
 ```javascript
 function App() {
-  return <DDSMastheadContainer auth-method="cookie"></DDSMastheadContainer>;
+  return <C4DMastheadContainer auth-method="cookie"></C4DMastheadContainer>;
 }
 ```
 
@@ -362,14 +362,14 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector                                                                   | Compatibility selector                                                   | Description |
 | ----------------------------------------------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
-| `<dds-masthead>`                                                                          | `data-autoid="dds--masthead"`                                            | Component   |
-| `<dds-masthead-menu-button>`                                                              | `data-autoid="dds--masthead__hamburger"`                                 | Interactive |
-| `<dds-top-nav-name>`                                                                      | `data-autoid="dds--masthead__platform-name"`                             | Interactive |
-| `<dds-top-nav>`                                                                           | `data-autoid="dds--masthead__l0-nav"`                                    | Component   |
-| `<dds-top-nav-menu trigger-content="${item}">` and `<dds-top-nav-item title="${item}">`   | `data-autoid="dds--masthead__l0-nav--nav${item}"`                        | Interactive |
-| `<dds-top-nav-menu-item title="${item}">`                                                 | `data-autoid="dds--masthead__l0-nav--subnav-col${item}-item${item}"`     | Interactive |
-| `<dds-left-nav>`                                                                          | `data-autoid="dds--masthead__l0-sidenav"`                                | Component   |
-| `<dds-left-nav-menu trigger-content="${item}">` and `<dds-left-nav-item title="${item}">` | `data-autoid="dds--masthead__l0-sidenav--nav${item}"`                    | Interactive |
-| `<dds-left-nav-menu-item title="${item}">`                                                | `data-autoid="dds--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive |
+| `<cds-masthead>`                                                                          | `data-autoid="cds--masthead"`                                            | Component   |
+| `<cds-masthead-menu-button>`                                                              | `data-autoid="cds--masthead__hamburger"`                                 | Interactive |
+| `<cds-top-nav-name>`                                                                      | `data-autoid="cds--masthead__platform-name"`                             | Interactive |
+| `<cds-top-nav>`                                                                           | `data-autoid="cds--masthead__l0-nav"`                                    | Component   |
+| `<cds-top-nav-menu trigger-content="${item}">` and `<cds-top-nav-item title="${item}">`   | `data-autoid="cds--masthead__l0-nav--nav${item}"`                        | Interactive |
+| `<cds-top-nav-menu-item title="${item}">`                                                 | `data-autoid="cds--masthead__l0-nav--subnav-col${item}-item${item}"`     | Interactive |
+| `<cds-left-nav>`                                                                          | `data-autoid="cds--masthead__l0-sidenav"`                                | Component   |
+| `<cds-left-nav-menu trigger-content="${item}">`                                           | `data-autoid="cds--masthead__l0-sidenav--nav${item}"`                    | Interactive |
+| `<cds-left-nav-menu-item title="${item}">`                                                | `data-autoid="cds--masthead__l0-sidenav--subnav-col${item}-item${item}"` | Interactive |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts
index 997fdd0a96c..af4742631a8 100644
--- a/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts
+++ b/packages/web-components/src/components/masthead/__stories__/cloud-masthead.stories.ts
@@ -7,12 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { select } from '@storybook/addon-knobs';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import on from '../../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import inPercy from '@percy-io/in-percy';
-import DDSLeftNav from '../left-nav';
+import c4dLeftNav from '../left-nav';
 import '../masthead-container';
 import '../cloud/cloud-masthead-container';
 import styles from './masthead.stories.scss';
@@ -66,37 +66,37 @@ export const Default = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-cloud-masthead-composite
+          <c4d-cloud-masthead-composite
             platform="Cloud"
-            .platformUrl="${ifNonNull(platformData.url)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
+            .platformUrl="${ifDefined(platformData.url)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
             has-contact="${hasContact}"
             auth-method="${authMethod}"
-            redirect-path="${ifNonNull(redirectPath)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+            redirect-path="${ifDefined(redirectPath)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
             has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             .navLinks="${navLinks}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
-            )}"></dds-cloud-masthead-composite>
+            )}"></c4d-cloud-masthead-composite>
         `
       : html`
-          <dds-cloud-masthead-container
+          <c4d-cloud-masthead-container
             platform="Cloud"
-            .platformUrl="${ifNonNull(urlObject)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
+            .platformUrl="${ifDefined(urlObject)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
             has-contact="${hasContact}"
             auth-method="${authMethod}"
-            redirect-path="${ifNonNull(redirectPath)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
+            redirect-path="${ifDefined(redirectPath)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
             .navLinks="${navLinks}"
             has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
-            data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead"></dds-cloud-masthead-container>
+            data-endpoint="/common/carbon-for-ibm-dotcom/translations/cloud-masthead"></c4d-cloud-masthead-container>
         `}
   `;
 };
@@ -107,9 +107,9 @@ export default {
     (story) => {
       if (!(window as any)._hPageShow) {
         (window as any)._hPageShow = on(window, 'pageshow', () => {
-          const leftNav = document.querySelector('dds-left-nav');
+          const leftNav = document.querySelector('c4d-left-nav');
           if (leftNav) {
-            (leftNav as DDSLeftNav).expanded = false;
+            (leftNav as c4dLeftNav).expanded = false;
           }
         });
       }
@@ -148,7 +148,7 @@ export default {
       }),
     },
     props: (() => {
-      // Lets `<dds-cloud-masthead-container>` load the nav links
+      // Lets `<c4d-cloud-masthead-container>` load the nav links
       const useMock =
         inPercy() || new URLSearchParams(window.location.search).has('mock');
       return {
diff --git a/packages/web-components/src/components/masthead/__stories__/links.ts b/packages/web-components/src/components/masthead/__stories__/links.ts
index 0cfdae0da15..45716770aa3 100644
--- a/packages/web-components/src/components/masthead/__stories__/links.ts
+++ b/packages/web-components/src/components/masthead/__stories__/links.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -11,6 +11,7 @@ import {
   MastheadLink,
   MastheadL1,
   MastheadLogoData,
+  L0MenuItem,
 } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d';
 
 /* eslint-disable max-len */
@@ -19,22 +20,22 @@ import {
  * Alternate logo
  */
 const logoData: MastheadLogoData = {
-  svg: `<svg width="81px" height="33px" viewBox="0 0 81 33" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink">
+  svg: `<svg width='81px' height='33px' viewBox='0 0 81 33' xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink'>
   <title>Artboard</title>
   <defs>
-      <path d="M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z" id="path-1"></path>
+      <path d='M67.716,0.0192 L66.982,2.1532 L80.733,2.1532 L80.733,0.0192 L67.716,0.0192 Z M44.624,0.0192 L44.625,2.1532 L58.392,2.1532 L57.64,0.0192 L44.624,0.0192 Z M17.011,0.0192 L17.011,2.1532 L39.738,2.1532 C38.216,0.8282 36.189,0.0192 33.961,0.0192 L33.961,0.0192 L17.011,0.0192 Z M0.019,2.1532 L14.887,2.1532 L14.887,0.0192 L0.019,0.0192 L0.019,2.1532 Z M66.246,4.2862 L65.479,6.4192 L80.733,6.4192 L80.733,4.2862 L66.246,4.2862 Z M44.624,4.2862 L44.625,6.4192 L59.87,6.4192 L59.132,4.2862 L44.624,4.2862 Z M17.011,4.2862 L17.011,6.4192 L41.863,6.4192 C41.672,5.6612 41.365,4.9442 40.97,4.2862 L40.97,4.2862 L17.011,4.2862 Z M0.019,6.4192 L14.887,6.4192 L14.887,4.2862 L0.019,4.2862 L0.019,6.4192 Z M64.761,8.5532 L64.009,10.6862 L76.485,10.6862 L76.485,8.5532 L64.761,8.5532 Z M48.872,8.5532 L48.872,10.6862 L61.354,10.6862 L60.602,8.5532 L48.872,8.5532 Z M34.004,8.5532 L34.004,10.6862 L41.565,10.6862 C41.756,10.0052 41.863,9.2912 41.863,8.5532 L41.863,8.5532 L34.004,8.5532 Z M21.259,10.6862 L27.632,10.6862 L27.632,8.5532 L21.259,8.5532 L21.259,10.6862 Z M4.267,10.6862 L10.639,10.6862 L10.639,8.5532 L4.267,8.5532 L4.267,10.6862 Z M63.273,12.8192 L62.679,14.5432 L62.084,12.8192 L48.872,12.8192 L48.872,14.9532 L55.244,14.9532 L55.244,12.9912 L55.945,14.9532 L69.39,14.9532 L70.113,12.9912 L70.113,14.9532 L76.485,14.9532 L76.485,12.8192 L63.273,12.8192 Z M21.259,12.8192 L21.259,14.9532 L38.953,14.9532 C39.685,14.3502 40.316,13.6292 40.801,12.8192 L40.801,12.8192 L21.259,12.8192 Z M4.267,14.9532 L10.639,14.9532 L10.639,12.8192 L4.267,12.8192 L4.267,14.9532 Z M70.113,19.2182 L76.485,19.2182 L76.485,17.0852 L70.113,17.0852 L70.113,19.2182 Z M56.82,17.0862 L57.644,19.2182 L67.691,19.2182 L68.522,17.0862 L56.82,17.0862 Z M48.872,19.2182 L55.244,19.2182 L55.244,17.0852 L48.872,17.0852 L48.872,19.2182 Z M21.259,17.0862 L21.259,19.2182 L40.801,19.2182 C40.316,18.4092 39.685,17.6882 38.953,17.0862 L38.953,17.0862 L21.259,17.0862 Z M4.267,19.2182 L10.639,19.2182 L10.639,17.0852 L4.267,17.0852 L4.267,19.2182 Z M70.113,23.4852 L76.485,23.4852 L76.485,21.3522 L70.113,21.3522 L70.113,23.4852 Z M58.494,21.3522 L59.334,23.4852 L66.023,23.4852 L66.857,21.3522 L58.494,21.3522 Z M48.872,23.4852 L55.244,23.4852 L55.244,21.3522 L48.872,21.3522 L48.872,23.4852 Z M34.004,21.3522 L34.004,23.4852 L41.863,23.4852 C41.863,22.7472 41.756,22.0322 41.565,21.3522 L41.565,21.3522 L34.004,21.3522 Z M21.259,23.4852 L27.632,23.4852 L27.632,21.3522 L21.259,21.3522 L21.259,23.4852 Z M4.267,23.4852 L10.639,23.4852 L10.639,21.3522 L4.267,21.3522 L4.267,23.4852 Z M70.113,27.7522 L80.733,27.7522 L80.733,25.6192 L70.113,25.6192 L70.113,27.7522 Z M60.169,25.6192 L61.001,27.7522 L64.363,27.7522 L65.191,25.6192 L60.169,25.6192 Z M44.624,27.7522 L55.244,27.7522 L55.244,25.6192 L44.624,25.6192 L44.624,27.7522 Z M17.011,25.6192 L17.011,27.7522 L40.97,27.7522 C41.365,27.0932 41.672,26.3772 41.863,25.6192 L41.863,25.6192 L17.011,25.6192 Z M0.019,27.7522 L14.887,27.7522 L14.887,25.6192 L0.019,25.6192 L0.019,27.7522 Z M70.113,32.0192 L80.733,32.0192 L80.733,29.8852 L70.113,29.8852 L70.113,32.0192 Z M61.833,29.8852 L62.676,32.0192 L63.53,29.8852 L61.833,29.8852 Z M44.624,32.0192 L55.244,32.0192 L55.244,29.8852 L44.624,29.8852 L44.624,32.0192 Z M17.011,29.8852 L17.011,32.0192 L33.961,32.0192 C36.205,32.0192 38.216,31.2102 39.738,29.8852 L39.738,29.8852 L17.011,29.8852 Z M0.019,32.0192 L14.887,32.0192 L14.887,29.8852 L0.019,29.8852 L0.019,32.0192 Z' id='path-1'></path>
   </defs>
-  <g id="Artboard" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-      <g id="Group-7">
-          <mask id="mask-2" fill="white">
-              <use xlink:href="#path-1"></use>
+  <g id='Artboard' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd'>
+      <g id='Group-7'>
+          <mask id='mask-2' fill='white'>
+              <use xlink:href='#path-1'></use>
           </mask>
-          <g id="Clip-2"></g>
-          <polygon id="Fill-1" fill="#EC1D24" mask="url(#mask-2)" points="-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998"></polygon>
-          <polygon id="Fill-3" fill="#2E3092" mask="url(#mask-2)" points="-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998"></polygon>
-          <polygon id="Fill-4" fill="#2E3092" mask="url(#mask-2)" points="-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222"></polygon>
-          <polygon id="Fill-5" fill="#00A550" mask="url(#mask-2)" points="-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562"></polygon>
-          <polygon id="Fill-6" fill="#FFF100" mask="url(#mask-2)" points="-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892"></polygon>
+          <g id='Clip-2'></g>
+          <polygon id='Fill-1' fill='#EC1D24' mask='url(#mask-2)' points='-1 33.0382 86.8 33.0382 86.8 -0.9998 -1 -0.9998'></polygon>
+          <polygon id='Fill-3' fill='#2E3092' mask='url(#mask-2)' points='-1 3.3942 86.8 3.3942 86.8 -0.9998 -1 -0.9998'></polygon>
+          <polygon id='Fill-4' fill='#2E3092' mask='url(#mask-2)' points='-1 11.8162 86.8 11.8162 86.8 7.4222 -1 7.4222'></polygon>
+          <polygon id='Fill-5' fill='#00A550' mask='url(#mask-2)' points='-1 20.3502 86.8 20.3502 86.8 15.9562 -1 15.9562'></polygon>
+          <polygon id='Fill-6' fill='#FFF100' mask='url(#mask-2)' points='-1 28.8832 86.8 28.8832 86.8 24.4892 -1 24.4892'></polygon>
       </g>
   </g>
   </svg>`,
@@ -43,417 +44,428 @@ const logoData: MastheadLogoData = {
   allowlist: [],
   end: 'May 5, 2021 0:00:01',
   path: '/',
-  href: 'https://www.example.com/not-default-href',
+  href: 'https://www.example.com/custom-href',
 };
 
 /**
- * Dotcom shell MastheadL1 Data
+ * MastheadL1 Data
  */
-const l1Data: MastheadL1 = {
-  title: 'Stock Charts',
-  url: 'https://example.com',
+const mastheadL1Data: MastheadL1 = {
+  title: 'L1 section name',
+  url: 'https://www.ibm.com/analytics',
   menuItems: [
     {
-      title: 'Lorem ipsum dolor sit amet',
-      titleEnglish: 'Lorem ipsum dolor sit amet',
-      url: '',
-      hasMenu: true,
-      hasMegapanel: false,
-      menuSections: [
-        {
-          heading: 'Explore',
-          menuItems: [
-            {
-              title: 'Link 1',
-              url: '',
-              megapanelContent: {
-                headingTitle: '',
-                headingUrl: '',
-                description: '',
-                quickLinks: {
-                  title: 'Title',
-                  links: [
-                    {
-                      title: 'Subnav 1',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 2',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 3',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 4',
-                      url: '',
-                    },
-                  ],
-                },
-                feature: {
-                  heading: '',
-                  imageUrl: '',
-                  linkTitle: '',
-                  linkUrl: '',
-                },
+      title: 'Single Column',
+      titleEnglish: 'Single Column',
+      submenu: {
+        columns: 1,
+        menuSections: [
+          {
+            span: 1,
+            items: [
+              {
+                title: 'Link item (A1)',
+                url: 'https://example.com',
               },
+              {
+                title: 'Link item (A2)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (A3)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (A4)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+        ],
+      },
+    },
+    {
+      title: 'Two Column',
+      submenu: {
+        columns: 2,
+        announcement:
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+        footer: {
+          title: 'View all lorem ipsum (B)',
+          url: 'https://example.com',
+        },
+        menuSections: [
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2 (B1)',
+              url: 'https://example.com',
             },
-            {
-              title: 'Menu dropdown item with extra long text',
-              url: '',
+            items: [
+              {
+                title: 'Link item (B1)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (B2)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (B3)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2 (B2)',
             },
-          ],
-        },
-      ],
+            items: [
+              {
+                title: 'Link item (B4)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (B5)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (B6)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+        ],
+      },
     },
     {
-      title: 'Consectetur adipiscing elit',
-      titleEnglish: 'Consectetur adipiscing elit',
-      url: '',
-      hasMenu: true,
-      menuSections: [
-        {
-          heading: '',
-          menuItems: [
-            {
-              title: 'Link 2',
-              url: '',
-              megapanelContent: {
-                headingTitle: 'Services',
-                headingUrl:
-                  'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn',
-                description:
-                  'Reimagine your business, designing and building the platforms necessary for growth',
-                quickLinks: {
-                  title: 'Quicklinks',
-                  links: [
-                    {
-                      title: 'Subnav 1',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 2',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 3',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 4',
-                      url: '',
-                    },
-                  ],
-                },
-                feature: {
-                  heading: 'IBM Services, your Digital Reinvention â„¢ partner',
-                  imageUrl:
-                    'https://www.ibm.com/images/portal/U609055Q90660U49/windmills.jpg',
-                  linkTitle:
-                    'Explore all our business consulting and technology services',
-                  linkUrl:
-                    'https://www.ibm.com/services?lnk=hpmse_ts&lnk2=learn',
-                },
+      title: 'Three Column',
+      submenu: {
+        columns: 3,
+        announcement:
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+        menuSections: [
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2',
+              description:
+                'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+            },
+            items: [
+              {
+                title: 'Link item (C1)',
+                url: 'https://example.com',
               },
+              {
+                title: 'Link item (C2)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2',
             },
-            {
-              title: 'Financing',
-              url: 'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn',
-              megapanelContent: {
-                headingTitle: 'Financing',
-                headingUrl:
-                  'https://www.ibm.com/financing?lnk=hpmse_fin&lnk2=learn',
-                description: 'Funding options that fit your business',
-                quickLinks: {
-                  title: 'Quicklinks',
-                  links: [
-                    {
-                      title: 'Subnav 1',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 2',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 3',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 4',
-                      url: '',
-                    },
-                  ],
-                },
-                feature: {
-                  heading:
-                    'Cloud financing strategies that work for your business',
-                  imageUrl:
-                    'https://www.ibm.com/images/portal/F774737R30303N19/Skyline-Card-cloud-feature380x160.jpg?1=1',
-                  linkTitle:
-                    'Committed to cloud? Make the most of your cash flow.',
-                  linkUrl:
-                    'https://www.ibm.com/financing/solutions/cloud-financing?lnk=hpmse_fin&lnk2=learn',
-                },
+            items: [
+              {
+                title: 'Link item (C3)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (C4)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
               },
+              {
+                title: 'Link item (C5)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (C6)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+            ],
+          },
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2',
             },
-          ],
-        },
-      ],
-    },
-    {
-      title: 'Nulla quis sem at nibh elementum imperdiet',
-      titleEnglish: 'Nulla quis sem at nibh elementum imperdiet',
-      url: 'https://www.ibm.com/industries?lnk=min',
-      hasMenu: false,
-      hasMegapanel: false,
-      menuSections: [],
+            items: [
+              {
+                title: 'Link item  (C7)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (C8)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (C9)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (C10)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (C11)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+        ],
+      },
     },
     {
-      title: 'Fusce nec tellus sed augue semper porta',
-      titleEnglish: 'Fusce nec tellus sed augue semper porta',
-      url: '',
-      hasMenu: true,
-      hasMegapanel: false,
-      menuSections: [
-        {
-          heading: '',
-          menuItems: [
-            {
-              title: 'IBM Developer',
-              url: 'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn',
-              megapanelContent: {
-                headingTitle: 'IBM Developer',
-                headingUrl:
-                  'https://developer.ibm.com/?lnk=hpmdev_dw&lnk2=learn',
-                description: '',
-                quickLinks: {
-                  title: 'Quicklinks',
-                  links: [
-                    {
-                      title: 'Subnav 1',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 2',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 3',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 4',
-                      url: '',
-                    },
-                  ],
-                },
-                feature: {
-                  heading: 'IBM Developer newsletters',
-                  imageUrl:
-                    'https://1.dam.s81c.com/m/5908c17b26b9dd19/original/news-ibmdevnewsletters-600x245.jpg',
-                  linkTitle:
-                    'Technical info on popular software development topics, including AI, Blockchain, Java and more',
-                  linkUrl:
-                    'https://developer.ibm.com/newsletters/?lnk=hpmdev_dw&lnk2=learn',
-                },
-              },
+      title: 'Three Column',
+      submenu: {
+        columns: 3,
+        announcement:
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+        menuSections: [
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Narrow 1',
+              description:
+                'Description text lorem ipsum dolor sit amet commondo ligua eaget',
             },
-            {
-              title: 'Blockchain',
-              url: 'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
-              megapanelContent: {
-                headingTitle: 'Blockchain',
-                headingUrl:
-                  'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
-                description: '',
-                quickLinks: {
-                  title: 'Quicklinks',
-                  links: [
-                    {
-                      title: 'Subnav 1',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 2',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 3',
-                      url: '',
-                    },
-                    {
-                      title: 'Subnav 4',
-                      url: '',
-                    },
-                  ],
-                },
-                feature: {
-                  heading: 'Blockchain 101',
-                  imageUrl:
-                    'https://www.ibm.com/images/portal/E174255N41814O86/Blockchain2_600x245.jpg?1=3',
-                  linkTitle:
-                    'Build a kick-starter blockchain network and start coding with the IBM Blockchain Platform Starter Plan',
-                  linkUrl:
-                    'https://developer.ibm.com/tutorials/cl-ibm-blockchain-101-quick-start-guide-for-developers-bluemix-trs/?lnk=hpmdev_dw&lnk2=learn',
-                },
+            items: [
+              {
+                title: 'Link item (D1)',
+                url: 'https://example.com',
               },
+              {
+                title: 'Link item (D2)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+          {
+            span: 2,
+            heading: {
+              headingLevel: 2,
+              title: 'Wide 1',
             },
-            {
-              title: 'Containers',
-              url: 'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn',
-              megapanelContent: {
-                headingTitle: 'Containers',
-                headingUrl:
-                  'https://developer.ibm.com/technologies/containers/?lnk=hpmdev_dw&lnk2=learn',
-                description: '',
-                quickLinks: {
-                  title: 'Quicklinks',
-                  links: [
-                    {
-                      title: 'Code patterns',
-                      url: 'https://developer.ibm.com/patterns/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                    {
-                      title: 'Tutorials',
-                      url: 'https://developer.ibm.com/tutorials/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                    {
-                      title: 'Events',
-                      url: 'https://developer.ibm.com/events/category/containers/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                  ],
-                },
-                feature: {
-                  heading: 'Make sense of Kubernetes',
-                  imageUrl:
-                    'https://www.ibm.com/images/portal/E693054G76296P64/Kubernetes-Pythomn_600x245.jpg?1=2',
-                  linkTitle:
-                    'Deploy a simple Python application with Kubernetes',
-                  linkUrl:
-                    'https://developer.ibm.com/tutorials/scalable-python-app-with-kubernetes/?lnk=hpmdev_dw&lnk2=learn',
-                },
+            items: [
+              {
+                title: 'Link item (D3)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D4)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D5)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D6)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D7)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D8)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D9)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D10)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
               },
+            ],
+          },
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Narrow 2',
+              description:
+                'Description text lorem ipsum dolor sit amet commondo ligua eaget',
             },
-            {
-              title: 'Analytics',
-              url: 'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn',
-              megapanelContent: {
-                headingTitle: 'Analytics',
-                headingUrl:
-                  'https://developer.ibm.com/technologies/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                description: '',
-                quickLinks: {
-                  title: 'Quicklinks',
-                  links: [
-                    {
-                      title: 'Code patterns',
-                      url: 'https://developer.ibm.com/patterns/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                    {
-                      title: 'Tutorials',
-                      url: 'https://developer.ibm.com/tutorials/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                    {
-                      title: 'Events',
-                      url: 'https://developer.ibm.com/events/category/analytics/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                    {
-                      title: 'Developer community',
-                      url: 'https://developer.ibm.com/watson/?lnk=hpmdev_dw&lnk2=learn',
-                    },
-                  ],
-                },
-                feature: {
-                  heading: 'Train your data no matter where it lives',
-                  imageUrl:
-                    'https://1.dam.s81c.com/m/76c0ed6f3e6386c1/original/Train-data_600x245.jpg',
-                  linkTitle:
-                    'Easily and securely connect to your data source for initial model training and continuous learning',
-                  linkUrl:
-                    'https://developer.ibm.com/announcements/training-machine-learning-models-in-watson-studio?lnk=hpmdev_dw&lnk2=learn',
-                },
+            items: [
+              {
+                title: 'Link item (D11)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (D12)',
+                url: 'https://example.com',
               },
+            ],
+          },
+          {
+            span: 2,
+            heading: {
+              headingLevel: 2,
+              title: 'Wide 2',
             },
-          ],
-        },
-      ],
-    },
-    {
-      title: 'Sed cursus ante dapibus diam',
-      titleEnglish: 'Sed cursus ante dapibus diam',
-      url: 'https://www.ibm.com/support/home/?lnk=msu_usen',
-      hasMenu: false,
-      hasMegapanel: false,
-      menuSections: [],
-    },
-  ],
-};
-
-/**
- * MastheadL1 Data
- */
-const mastheadL1Data: MastheadL1 = {
-  title: 'Analytics',
-  url: 'https://www.ibm.com/analytics',
-  menuItems: [
-    {
-      title: 'Products',
-      titleEnglish: 'Products',
-      url: 'https://www.ibm.com/analytics/products',
-    },
-    {
-      title: 'Solutions',
-      titleEnglish: 'Solutions',
-      url: 'https://www.ibm.com/analytics/solutions',
+            items: [
+              {
+                title: 'Link item (D13)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D14)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D15)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D16)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D17)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D18)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D19)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              {
+                title: 'Link item (D20)',
+                url: 'https://example.com',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+            ],
+          },
+        ],
+      },
     },
     {
-      title: 'Services',
-      titleEnglish: 'Services',
-      url: 'https://www.ibm.com/industries?lnk=min',
+      title: 'Plain Link',
+      url: 'https://example.com',
     },
     {
-      title: 'Learn',
-      titleEnglish: 'Learn',
-      menuSections: [
-        {
-          menuItems: [
-            {
-              title: 'Blogs',
-              url: 'https://www.ibm.com/blogs/journey-to-ai/',
-            },
-            {
-              title: 'Client stories',
-              url: 'https://www.ibm.com/analytics/client-stories',
-            },
-            {
-              title: 'Communities',
-              url: 'https://www.ibm.com/analytics/communities',
-            },
-          ],
+      title: 'Two Column',
+      submenu: {
+        columns: 2,
+        announcement:
+          '<strong>Lorem ipsum:</strong> Full announcement may be linked or only a portion as an <a href="#">inline link</a>',
+        footer: {
+          title: 'View all lorem ipsum (E)',
+          url: 'https://example.com',
         },
-      ],
-    },
-    {
-      title: 'Explore more',
-      titleEnglish: 'Explore more',
-      menuSections: [
-        {
-          menuItems: [
-            {
-              title: 'Product support',
-              url: 'https://www.ibm.com/analytics/support',
+        menuSections: [
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2 (E1)',
+              url: 'https://example.com',
             },
-            {
-              title: 'Expert gallery',
-              url: 'https://developer.ibm.com/technologies/blockchain/?lnk=hpmdev_dw&lnk2=learn',
+            items: [
+              {
+                title: 'Link item (E1)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (E2)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (E3)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+          {
+            span: 1,
+            heading: {
+              headingLevel: 2,
+              title: 'Heading level 2',
             },
-          ],
-        },
-      ],
+            items: [
+              {
+                title: 'Link item (E4)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (E5)',
+                url: 'https://example.com',
+              },
+              {
+                title: 'Link item (E6)',
+                url: 'https://example.com',
+              },
+            ],
+          },
+        ],
+      },
     },
   ],
+  actions: {
+    login: {
+      title: 'Log in',
+      url: 'https://example.com',
+    },
+    cta: {
+      title: 'Optional CTA',
+      url: 'https://example.com',
+    },
+  },
 };
 
 /**
@@ -461,1486 +473,4986 @@ const mastheadL1Data: MastheadL1 = {
  */
 const mastheadLinks: MastheadLink[] = [
   {
-    title: 'Products & Solutions',
-    titleEnglish: 'Products & Solutions',
+    title: 'Products',
+    titleEnglish: 'Products',
     url: '',
     hasMenu: true,
     hasMegapanel: true,
+    megamenuLayout: 'tab',
     menuSections: [
       {
         heading: '',
         menuItems: [
           {
-            title: 'Top products & platforms',
-            titleEnglish: 'Top products & platforms',
-            url: 'https://www.ibm.com/products?lnk=hpmps_bupr&lnk2=link',
+            title: 'Featured',
+            titleEnglish: 'Featured',
+            url: 'https://www.ibm.com/placeholder',
             highlighted: true,
             megapanelContent: {
-              headingTitle: 'Top products & platforms',
-              headingUrl: 'https://www.ibm.com/products?lnk=hpmps_bupr',
-              description: '',
+              headingTitle: 'Featured',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit. ',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Db2',
-                    titleEnglish: 'Db2',
-                    url: 'https://www.ibm.com/analytics/db2?lnk=hpmps_bupr&lnk2=learn',
-                  },
-                  {
-                    title: 'Hybrid Cloud',
-                    titleEnglish: 'Hybrid Cloud',
-                    url: 'https://www.ibm.com/cloud/hybrid?lnk=hpmps_bupr&lnk2=learn',
-                  },
-                  {
-                    title: 'IBM Cloud',
-                    titleEnglish: 'IBM Cloud',
-                    url: 'https://www.ibm.com/cloud?lnk=hpmps_bupr&lnk2=learn',
-                  },
-                  {
-                    title: 'IBM Security',
-                    titleEnglish: 'IBM Security',
-                    url: 'https://www.ibm.com/security?lnk=hpmps_bupr&lnk2=learn',
-                  },
-                  {
-                    title: 'IBM Sterling',
-                    titleEnglish: 'IBM Sterling',
-                    url: 'https://www.ibm.com/supply-chain/sterling?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Cloud Pak for Data',
+                    titleEnglish: 'IBM Cloud Pak for Data',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
                   },
                   {
-                    title: 'IBM Z',
-                    titleEnglish: 'IBM Z',
-                    url: 'https://www.ibm.com/it-infrastructure/z?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Cloud Pak for Security',
+                    titleEnglish: 'IBM Cloud Pak for Security',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
                   },
                   {
-                    title: 'Red Hat',
-                    titleEnglish: 'Red Hat',
-                    url: 'https://www.ibm.com/cloud/redhat?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Cloud Pak for Business Automation',
+                    titleEnglish: 'IBM Cloud Pak for Business Automation',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Operations management software with AI insights',
                   },
                   {
-                    title: 'SPSS Statistics',
-                    titleEnglish: 'SPSS Statistics',
-                    url: 'https://www.ibm.com/products/spss-statistics?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Cloud Pak for Integration',
+                    titleEnglish: 'IBM Cloud Pak for Integration',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools to connect all of your apps, data and events',
                   },
                   {
-                    title: 'The Weather Company',
-                    titleEnglish: 'The Weather Company',
-                    url: 'https://www.ibm.com/weather?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Cloud Pak for Network Automation',
+                    titleEnglish: 'IBM Cloud Pak for Network Automation',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Management software for telco network operations',
                   },
                   {
-                    title: 'Watson',
-                    titleEnglish: 'Watson',
-                    url: 'https://www.ibm.com/watson?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Cloud',
+                    titleEnglish: 'IBM Cloud',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'WebSphere',
-                    titleEnglish: 'WebSphere',
-                    url: 'https://www.ibm.com/cloud/websphere-application-platform/?lnk=hpmps_bupr&lnk2=learn',
+                    title: 'IBM Z',
+                    titleEnglish: 'IBM Z',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/7b8ce832a78108d5/original/megamenu-pictogram-top-products-and-services.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Industries',
-            titleEnglish: 'Industries',
-            url: 'https://www.ibm.com/industries?lnk=hpmps_buin&lnk2=link',
+            title: 'Analytics',
+            titleEnglish: 'Analytics',
+            url: 'https://www.ibm.com/placeholder',
             highlighted: true,
             megapanelContent: {
-              headingTitle: 'Industries',
-              headingUrl: 'https://www.ibm.com/industries?lnk=hpmps_buin',
-              description: '',
+              headingTitle: 'Analytics',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description: 'Aggregate and analyze large datasets',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Banking & financial markets',
-                    titleEnglish: 'Banking & financial markets',
-                    url: 'https://www.ibm.com/industries/banking-financial-markets?lnk=hpmps_buin&lnk2=learn',
-                  },
-                  {
-                    title: 'Energy & utilities',
-                    titleEnglish: 'Energy & utilities',
-                    url: 'https://www.ibm.com/industries/energy?lnk=hpmps_buin&lnk2=learn',
+                    title: 'IBM Cloud Pak for Data',
+                    titleEnglish: 'IBM Cloud Pak for Data',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
                   },
                   {
-                    title: 'Government - US Federal',
-                    titleEnglish: 'Government - US Federal',
-                    url: 'https://www.ibm.com/industries/federal?lnk=hpmps_buin&lnk2=learn',
+                    title: 'Business Analytics Enterprise',
+                    titleEnglish: 'Business Analytics Enterprise',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Healthcare',
-                    titleEnglish: 'Healthcare',
-                    url: 'https://www.ibm.com/industries/healthcare?lnk=hpmps_buin&lnk2=learn',
+                    title: 'Cognos',
+                    titleEnglish: 'Cognos',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Insurance',
-                    titleEnglish: 'Insurance',
-                    url: 'https://www.ibm.com/industries/insurance?lnk=hpmps_buin&lnk2=learn',
+                    title: 'SPSS',
+                    titleEnglish: 'SPSS',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Manufacturing',
-                    titleEnglish: 'Manufacturing',
-                    url: 'https://www.ibm.com/industries/manufacturing?lnk=hpmps_buin&lnk2=learn',
+                    title: 'cplex',
+                    titleEnglish: 'cplex',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Retail & consumer products',
-                    titleEnglish: 'Retail & consumer products',
-                    url: 'https://www.ibm.com/industries/retail-consumer-products?lnk=hpmps_buin&lnk2=learn',
+                    title: 'Netezza',
+                    titleEnglish: 'Netezza',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Telco, media & entertainment',
-                    titleEnglish: 'Telco, media & entertainment',
-                    url: 'https://www.ibm.com/industries/telecom-media-entertainment?lnk=hpmps_buin&lnk2=learn',
+                    title: 'Watson Studio',
+                    titleEnglish: 'Watson Studio',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'IDE to build, run and manage AI models',
                   },
                   {
-                    title: 'Travel & transportation',
-                    titleEnglish: 'Travel & transportation',
-                    url: 'https://www.ibm.com/industries/travel-transportation?lnk=hpmps_buin&lnk2=learn',
+                    title: 'Planning Analytics',
+                    titleEnglish: 'Planning Analytics',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'View all Industries',
-                    titleEnglish: 'View all Industries',
-                    url: 'https://www.ibm.com/industries?lnk=hpmps_buin&lnk2=learn',
+                    title: 'Watson Discovery',
+                    titleEnglish: 'Watson Discovery',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Search and analytics engine that adapts to custom domains',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/6cad5af285e48a89/original/megamenu-pictogram-industries.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Artificial intelligence',
-            titleEnglish: 'Artificial intelligence',
-            url: 'https://www.ibm.com/artificial-intelligence?lnk=hpmps_buai&lnk2=link',
+            title: 'Business Automation',
+            titleEnglish: 'Business Automation',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Artificial intelligence',
-              headingUrl:
-                'https://www.ibm.com/artificial-intelligence?lnk=hpmps_buai',
-              description: '',
+              headingTitle: 'Business Automation',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Customer service',
-                    titleEnglish: 'Customer service',
-                    url: 'https://www.ibm.com/watson/ai-customer-service?lnk=hpmps_buai&lnk2=learn',
+                    title: 'IBM Cloud Pak for Business Automation',
+                    titleEnglish: 'IBM Cloud Pak for Business Automation',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Operations management software with AI insights',
                   },
                   {
-                    title: 'Deep learning',
-                    titleEnglish: 'Deep learning',
-                    url: 'https://www.ibm.com/cloud/deep-learning?lnk=hpmps_buai&lnk2=learn',
+                    title: 'Watson Orchestrate',
+                    titleEnglish: 'Watson Orchestrate',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Image recognition',
-                    titleEnglish: 'Image recognition',
-                    url: 'https://www.ibm.com/cloud/watson-visual-recognition?lnk=hpmps_buai&lnk2=learn',
+                    title: 'IBM RPA',
+                    titleEnglish: 'IBM RPA',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Platforms & APIs',
-                    titleEnglish: 'Platforms & APIs',
-                    url: 'https://www.ibm.com/watson/products-services?lnk=hpmps_buai&lnk2=learn',
+                    title: 'BlueWorks Live',
+                    titleEnglish: 'BlueWorks Live',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'View all AI products',
-                    titleEnglish: 'View all AI products',
-                    url: 'https://www.ibm.com/us-en/products/category/technology/cognitive-computing-and-AI?lnk=hpmps_buai&lnk2=learn',
+                    title: 'IBM Operational Decision Manager',
+                    titleEnglish: 'IBM Operational Decision Manager',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/3ed6517e90739279/original/megamenu-pictogram-artificial-intelligence.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Automation',
-            titleEnglish: 'Automation',
-            url: 'https://www.ibm.com/automation?lnk=hpmps_buau&lnk2=link',
+            title: 'AI & ML',
+            titleEnglish: 'AI & ML',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Automation',
-              headingUrl: 'https://www.ibm.com/automation?lnk=hpmps_buau',
-              description: '',
+              headingTitle: 'AI & ML',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Use Watson’s AI or build your own machine learning models',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Business process automation',
-                    titleEnglish: 'Business process automation',
-                    url: 'https://www.ibm.com/automation/services?lnk=hpmps_buau&lnk2=learn',
+                    title: 'IBM Cloud Pak for Data',
+                    titleEnglish: 'IBM Cloud Pak for Data',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
+                  },
+                  {
+                    title: 'Watson Discovery',
+                    titleEnglish: 'Watson Discovery',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Search and analytics engine that adapts to custom domains',
+                  },
+                  {
+                    title: 'Spech to Text',
+                    titleEnglish: 'Spech to Text',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'API for real-time speech recognition and transcription',
+                  },
+                  {
+                    title: 'Text to Speech',
+                    titleEnglish: 'Text to Speech',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'API for real-time text to speech conversion',
+                  },
+                  {
+                    title: 'IBM Cloud Pak for Data',
+                    titleEnglish: 'IBM Cloud Pak for Data',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
+                  },
+                  {
+                    title: 'IBM Cloud Pak for AIOps',
+                    titleEnglish: 'IBM Cloud Pak for AIOps',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'DevOps management tool with AI analysis and recommendations',
                   },
                   {
-                    title: 'Business process mapping',
-                    titleEnglish: 'Business process mapping',
-                    url: 'https://www.ibm.com/automation/process-mapping?lnk=hpmps_buau&lnk2=learn',
+                    title: 'IBM Watson Natural Language Understanding',
+                    titleEnglish: 'IBM Watson Natural Language Understanding',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'API for text analysis and metadata extraction',
                   },
                   {
-                    title: 'Business rules management',
-                    titleEnglish: 'Business rules management',
-                    url: 'https://www.ibm.com/automation/enterprise-content-management?lnk=hpmps_buau&lnk2=learn',
+                    title: 'Watson Studio',
+                    titleEnglish: 'Watson Studio',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'IDE to build, run and manage AI models',
                   },
                   {
-                    title: 'Data capture',
-                    titleEnglish: 'Data capture',
-                    url: 'https://www.ibm.com/automation/data-capture?lnk=hpmps_buau&lnk2=learn',
+                    title: 'IBM Watson Knowledge Catalog',
+                    titleEnglish: 'IBM Watson Knowledge Catalog',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'SaaS for AI data management',
                   },
                   {
-                    title: 'View all Automation products',
-                    titleEnglish: 'View all Automation products',
-                    url: 'https://www.ibm.com/automation/platform?lnk=hpmps_buau&lnk2=learn',
+                    title: 'Watson Assistant',
+                    titleEnglish: 'Watson Assistant',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/15598df3a3519f7f/original/megamenu-pictogram-business-automation.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Blockchain',
-            titleEnglish: 'Blockchain',
-            url: 'https://www.ibm.com/blockchain?lnk=hpmps_bubc&lnk2=link',
+            title: 'Compute & Servers',
+            titleEnglish: 'Compute & Servers',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Blockchain',
-              headingUrl: 'https://www.ibm.com/blockchain?lnk=hpmps_bubc',
-              description: '',
+              headingTitle: 'Compute & Servers',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description: 'Run workloads on cloud infrastrcture',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Blockchain platform',
-                    titleEnglish: 'Blockchain platform',
-                    url: 'https://www.ibm.com/blockchain/platform?lnk=hpmps_bubc&lnk2=learn',
-                  },
-                  {
-                    title: 'Transparent supply',
-                    titleEnglish: 'Transparent supply',
-                    url: 'https://www.ibm.com/blockchain/solutions/transparent-supply?lnk=hpmps_bubc&lnk2=learn',
+                    title: 'IBM Z',
+                    titleEnglish: 'IBM Z',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Blockchain for supplier management',
-                    titleEnglish: 'Blockchain for supplier management',
-                    url: 'https://www.ibm.com/blockchain/solutions/trust-your-supplier?lnk=hpmps_bubc&lnk2=learn',
+                    title: 'Power',
+                    titleEnglish: 'Power',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Blockchain for trade finance',
-                    titleEnglish: 'Blockchain for trade finance',
-                    url: 'https://www.ibm.com/blockchain/solutions/trade-finance?lnk=hpmps_bubc&lnk2=learn',
+                    title: 'Spectrum Computing',
+                    titleEnglish: 'Spectrum Computing',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Blockchain for supply chain',
-                    titleEnglish: 'Blockchain for supply chain',
-                    url: 'https://www.ibm.com/blockchain/industries/supply-chain?lnk=hpmps_bubc&lnk2=learn',
+                    title: 'LinuxONE',
+                    titleEnglish: 'LinuxONE',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Blockchain for food',
-                    titleEnglish: 'Blockchain for food',
-                    url: 'https://www.ibm.com/blockchain/solutions/food-trust?lnk=hpmps_bubc&lnk2=learn',
+                    title: 'IBM Cloud Bare Metal Servers',
+                    titleEnglish: 'IBM Cloud Bare Metal Servers',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'View all Blockchain products',
-                    titleEnglish: 'View all Blockchain products',
-                    url: 'https://www.ibm.com/us-en/products/category/technology/blockchain?lnk=hpmps_bubc&lnk2=learn',
+                    title: 'IBM Cloud Virtual Servers',
+                    titleEnglish: 'IBM Cloud Virtual Servers',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/75dc99f23dced53/original/megamenu-pictogram-blockchain.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Business operations',
-            titleEnglish: 'Business operations',
-            url: 'https://www.ibm.com/business-operations?lnk=hpmps_buop&lnk2=link',
+            title: 'Database',
+            titleEnglish: 'Database',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Business operations',
-              headingUrl:
-                'https://www.ibm.com/business-operations?lnk=hpmps_buop',
-              description: '',
+              headingTitle: 'Database',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description: 'Store, query and analyze structured data',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Enterprise asset management',
-                    titleEnglish: 'Enterprise asset management',
-                    url: 'https://www.ibm.com/business-operations/enterprise-asset-management?lnk=hpmps_buop&lnk2=learn',
+                    title: 'IBM Cloud Pak for Data',
+                    titleEnglish: 'IBM Cloud Pak for Data',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
+                  },
+                  {
+                    title: 'IBM Informix on Cloud',
+                    titleEnglish: 'IBM Informix on Cloud',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed DB for time series, spatial, NoSQL and SQL data',
                   },
                   {
-                    title: 'Facilities management',
-                    titleEnglish: 'Facilities management',
-                    url: 'https://www.ibm.com/business-operations/facilities-management/integrated-workplace-management-system?lnk=hpmps_buop&lnk2=learn',
+                    title: 'IBM Cloudant',
+                    titleEnglish: 'IBM Cloudant',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed PCI-compliant JSON document store on CouchDB',
                   },
                   {
-                    title: 'Systems engineering',
-                    titleEnglish: 'Systems engineering',
-                    url: 'https://www.ibm.com/business-operations/systems-engineering?lnk=hpmps_buop&lnk2=learn',
+                    title: 'IBM Cloud Database',
+                    titleEnglish: 'IBM Cloud Database',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Weather Business Solutions',
-                    titleEnglish: 'Weather Business Solutions',
-                    url: 'https://www.ibm.com/weather/industries?lnk=hpmps_buop&lnk2=learn',
+                    title: 'IBM Cloud Hyper Protect DbaaS',
+                    titleEnglish: 'IBM Cloud Hyper Protect DbaaS',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed PostgreSQL and MongoDB for sensitive data',
                   },
                   {
-                    title: 'View all Business operations products',
-                    titleEnglish: 'View all Business operations products',
-                    url: 'https://www.ibm.com/us-en/products/category/business/business-operations?lnk=hpmps_buop&lnk2=learn',
+                    title: 'IMS',
+                    titleEnglish: 'IMS',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
+                  },
+                  {
+                    title: 'Db2',
+                    titleEnglish: 'Db2',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5e600deb01c4ebd3/original/megamenu-pictogram-business-operations.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Cloud computing',
-            titleEnglish: 'Cloud computing',
-            url: 'https://www.ibm.com/cloud?lnk=hpmps_bucl&lnk2=link',
+            title: 'DevOps',
+            titleEnglish: 'DevOps',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Cloud computing',
-              headingUrl: 'https://www.ibm.com/cloud?lnk=hpmps_bucl',
-              description: '',
+              headingTitle: 'DevOps',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Manage infrastructure, environments and deployments',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Containers',
-                    titleEnglish: 'Containers',
-                    url: 'https://www.ibm.com/cloud/container-service/?lnk=hpmps_bucl&lnk2=learn',
-                  },
-                  {
-                    title: 'Databases',
-                    titleEnglish: 'Databases',
-                    url: 'https://www.ibm.com/cloud/databases?lnk=hpmps_bucl&lnk2=learn',
+                    title: 'IBM Cloud Pak for AIOps',
+                    titleEnglish: 'IBM Cloud Pak for AIOps',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'DevOps',
-                    titleEnglish: 'DevOps',
-                    url: 'https://www.ibm.com/cloud/devops?lnk=hpmps_bucl&lnk2=learn',
+                    title: 'IBM Cloud Continuous Delivery',
+                    titleEnglish: 'IBM Cloud Continuous Delivery',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'UI and CLI based DevOps workflows based on Tekton Pipelines',
                   },
                   {
-                    title: 'Hybrid Cloud',
-                    titleEnglish: 'Hybrid Cloud',
-                    url: 'https://www.ibm.com/cloud/hybrid?lnk=hpmps_bucl&lnk2=learn',
+                    title: 'IBM Cloud Schematics',
+                    titleEnglish: 'IBM Cloud Schematics',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed service to provision resources with terraform templates',
                   },
                   {
-                    title: 'View all Cloud computing products',
-                    titleEnglish: 'View all Cloud computing products',
-                    url: 'https://www.ibm.com/us-en/products/category/technology/cloud-computing?lnk=hpmps_bucl&lnk2=learn',
+                    title: 'UrbanCode',
+                    titleEnglish: 'UrbanCode',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/1f27aeccb7d68054/original/megamenu-pictogram-cloud-computing.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Data & Analytics',
-            titleEnglish: 'Data & Analytics',
-            url: 'https://www.ibm.com/analytics?lnk=hpmps_buda&lnk2=link',
+            title: 'IT Automation',
+            titleEnglish: 'IT Automation',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Data & Analytics',
-              headingUrl: 'https://www.ibm.com/analytics?lnk=hpmps_buda',
-              description: '',
+              headingTitle: 'IT Automation',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Data Management',
-                    titleEnglish: 'Data Management',
-                    url: 'https://www.ibm.com/analytics/data-management?lnk=hpmps_buda&lnk2=learn',
-                  },
-                  {
-                    title: 'Business intelligence',
-                    titleEnglish: 'Business intelligence',
-                    url: 'https://www.ibm.com/analytics/business-intelligence?lnk=hpmps_buda&lnk2=learn',
-                  },
-                  {
-                    title: 'Data governance',
-                    titleEnglish: 'Data governance',
-                    url: 'https://www.ibm.com/analytics/data-governance?lnk=hpmps_buda&lnk2=learn',
+                    title: 'IBM Cloud Pak for AIOps',
+                    titleEnglish: 'IBM Cloud Pak for AIOps',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Data science',
-                    titleEnglish: 'Data science',
-                    url: 'https://www.ibm.com/analytics/data-science-business-analytics?lnk=hpmps_buda&lnk2=learn',
+                    title: 'IBM Turbonomic',
+                    titleEnglish: 'IBM Turbonomic',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Software to automate application resource management and optimize costs',
                   },
                   {
-                    title: 'View all Data & Analytics products',
-                    titleEnglish: 'View all Data & Analytics products',
-                    url: 'https://www.ibm.com/us-en/products/category/technology/analytics?lnk=hpmps_buda&lnk2=learn',
+                    title: 'IBM Instana',
+                    titleEnglish: 'IBM Instana',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/6d9bf0fd66e54f9a/original/megamenu-pictogram-data-analytics.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'IT infrastructure',
-            titleEnglish: 'IT infrastructure',
-            url: 'https://www.ibm.com/it-infrastructure?lnk=hpmps_buit&lnk2=link',
+            title: 'Middleware',
+            titleEnglish: 'Middleware',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'IT infrastructure',
-              headingUrl:
-                'https://www.ibm.com/it-infrastructure?lnk=hpmps_buit',
-              description: '',
+              headingTitle: 'Middleware',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Data storage',
-                    titleEnglish: 'Data storage',
-                    url: 'https://www.ibm.com/it-infrastructure/storage?lnk=hpmps_buit&lnk2=learn',
+                    title: 'IBM Cloud Pak for Integration',
+                    titleEnglish: 'IBM Cloud Pak for Integration',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools to connect all of your apps, data and events',
                   },
                   {
-                    title: 'Enterprise servers',
-                    titleEnglish: 'Enterprise servers',
-                    url: 'https://www.ibm.com/it-infrastructure/servers?lnk=hpmps_buit&lnk2=learn',
+                    title: 'MQ',
+                    titleEnglish: 'MQ',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'Managed message broker',
                   },
                   {
-                    title: 'Hybrid cloud infrastructure',
-                    titleEnglish: 'Hybrid cloud infrastructure',
-                    url: 'https://www.ibm.com/it-infrastructure/solutions/hybrid-cloud?lnk=hpmps_buit&lnk2=learn',
+                    title: 'DataPower',
+                    titleEnglish: 'DataPower',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Secure infrastructure',
-                    titleEnglish: 'Secure infrastructure',
-                    url: 'https://www.ibm.com/it-infrastructure/solutions/security?lnk=hpmps_buit&lnk2=learn',
+                    title: 'API Connect',
+                    titleEnglish: 'API Connect',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Mainframes',
-                    titleEnglish: 'Mainframes',
-                    url: 'https://www.ibm.com/it-infrastructure/servers/mainframes?lnk=hpmps_buit&lnk2=learn',
+                    title: 'App Connect',
+                    titleEnglish: 'App Connect',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'View all IT infrastructure products',
-                    titleEnglish: 'View all IT infrastructure products',
-                    url: 'https://www.ibm.com/us-en/products/category/technology/IT-infrastructure?lnk=hpmps_buit&lnk2=learn',
+                    title: 'Event Streams',
+                    titleEnglish: 'Event Streams',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'Aspera',
+                    titleEnglish: 'Aspera',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'WebSphere Application Server',
+                    titleEnglish: 'WebSphere Application Server',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'Runtime and SDK for Java applications',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/18758c6b890d488e/original/megamenu-pictogram-IT-infrastructure.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Security',
-            titleEnglish: 'Security',
-            url: 'https://www.ibm.com/security?lnk=hpmps_buse&lnk2=link',
+            title: 'Networking',
+            titleEnglish: 'Networking',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Security',
-              headingUrl: 'https://www.ibm.com/security?lnk=hpmps_buse',
-              description: '',
+              headingTitle: 'Networking',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Data security',
-                    titleEnglish: 'Data security',
-                    url: 'https://www.ibm.com/security/data-security?lnk=hpmps_buse&lnk2=learn',
+                    title: 'Cloud Pak for Network Automation',
+                    titleEnglish: 'Cloud Pak for Network Automation',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Management software for telco network operations',
                   },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Operating Systems',
+            titleEnglish: 'Operating Systems',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
+            megapanelContent: {
+              headingTitle: 'Operating Systems',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
                   {
-                    title: 'Identity & access management',
-                    titleEnglish: 'Identity & access management',
-                    url: 'https://www.ibm.com/security/identity-access-management?lnk=hpmps_buse&lnk2=learn',
+                    title: 'z/OS',
+                    titleEnglish: 'z/OS',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Security information & event management',
-                    titleEnglish: 'Security information & event management',
-                    url: 'https://www.ibm.com/security/security-intelligence?lnk=hpmps_buse&lnk2=learn',
+                    title: 'z/VSE',
+                    titleEnglish: 'z/VSE',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Security orchestration, automation & response',
-                    titleEnglish:
-                      'Security orchestration, automation & response',
-                    url: 'https://www.ibm.com/security/intelligent-orchestration?lnk=hpmps_buse',
+                    title: 'z/TPF',
+                    titleEnglish: 'z/TPF',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'View all Security products',
-                    titleEnglish: 'View all Security products',
-                    url: 'https://www.ibm.com/us-en/products/category/technology/security?lnk=hpmps_buse&lnk2=learn?lnk=hpmps_buse&lnk2=learn',
+                    title: 'IBM i',
+                    titleEnglish: 'IBM i',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/335f1d6485cede0/original/megamenu-pictogram-security.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Supply chain',
-            titleEnglish: 'Supply chain',
-            url: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc&lnk2=link',
+            title: 'Operations',
+            titleEnglish: 'Operations',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Supply chain',
-              headingUrl: 'https://www.ibm.com/supply-chain?lnk=hpmps_busc',
-              description: '',
+              headingTitle: 'Operations',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Supply chain visibility',
-                    titleEnglish: 'Supply chain visibility',
-                    url: 'https://www.ibm.com/supply-chain/visibility?lnk=hpmps_busc&lnk2=learn',
+                    title: 'Maximo',
+                    titleEnglish: 'Maximo',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'IBM Environmental Intelligence Suite',
+                    titleEnglish: 'IBM Environmental Intelligence Suite',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Supplier collaboration',
-                    titleEnglish: 'Supplier collaboration',
-                    url: 'https://www.ibm.com/supply-chain/supplier-collaboration-solutions?lnk=hpmps_busc&lnk2=learn',
+                    title: 'Tririga',
+                    titleEnglish: 'Tririga',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Business process improvement',
-                    titleEnglish: 'Business process improvement',
-                    url: 'https://www.ibm.com/supply-chain/process-improvement-solutions?lnk=hpmps_busc&lnk2=learn',
+                    title: 'IBM Sterling',
+                    titleEnglish: 'IBM Sterling',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Order management and fulfillment',
-                    titleEnglish: 'Order management and fulfillment',
-                    url: 'https://www.ibm.com/supply-chain/order-management-software?lnk=hpmps_busc&lnk2=learn',
+                    title: 'Supply Chain Intelligence Suite',
+                    titleEnglish: 'Supply Chain Intelligence Suite',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'View all Supply Chain products',
-                    titleEnglish: 'View all Supply Chain products',
-                    url: 'https://www.ibm.com/supply-chain/products?lnk=hpmps_busc&lnk2=learn',
+                    title: 'IBM Engineering Lifecycle Management',
+                    titleEnglish: 'IBM Engineering Lifecycle Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/53c30e47cbfc167/original/megamenu-pictogram-supply-chain.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Payment plans for Products & Solutions',
-            titleEnglish: 'Payment plans for Products & Solutions',
-            url: 'https://www.ibm.com/financing?lnk=hpmps_bufi&lnk2=link',
+            title: 'Quantum',
+            titleEnglish: 'Quantum',
+            url: 'https://www.ibm.com/placeholder',
             highlighted: true,
+            megapanelContent: {
+              headingTitle: 'Quantum',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'IBM Quantum Systems',
+                    titleEnglish: 'IBM Quantum Systems',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'Qiskit runtime',
+                    titleEnglish: 'Qiskit runtime',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'IBM Quantum Safe',
+                    titleEnglish: 'IBM Quantum Safe',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
           },
           {
-            title: 'View all products',
-            titleEnglish: 'View all products',
-            url: 'https://www.ibm.com/products?lnk=hpmps_buall&lnk2=link',
-            megaPanelViewAll: true,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Consulting & Services',
-    titleEnglish: 'Consulting & Services',
-    url: '',
-    hasMenu: true,
-    hasMegapanel: true,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'Business process services',
-            titleEnglish: 'Business process services',
-            url: 'https://www.ibm.com/services/process?lnk=hpmsc_bups&lnk2=link',
+            title: 'Storage',
+            titleEnglish: 'Storage',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Business process services',
-              headingUrl: 'https://www.ibm.com/services/process?lnk=hpmsc_bups',
-              description: '',
+              headingTitle: 'Storage',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Artificial intelligence services',
-                    titleEnglish: 'Artificial intelligence services',
-                    url: 'https://www.ibm.com/services/artificial-intelligence?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'Spectrum',
+                    titleEnglish: 'Spectrum',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Software for backup & recovery, SDS and analytics.',
                   },
                   {
-                    title: 'Automation',
-                    titleEnglish: 'Automation',
-                    url: 'https://www.ibm.com/automation/services?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'FlashSystem',
+                    titleEnglish: 'FlashSystem',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Hybrid and all flash arrays for Block (SAN) storage',
                   },
                   {
-                    title: 'Big data & data platform',
-                    titleEnglish: 'Big data & data platform',
-                    url: 'https://www.ibm.com/services/big-data-services?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'DS8900F',
+                    titleEnglish: 'DS8900F',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'Storage for IBM Z and IBM Power Systems',
                   },
                   {
-                    title: 'Business process outsourcing',
-                    titleEnglish: 'Business process outsourcing',
-                    url: 'https://www.ibm.com/services/process/outsourcing?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'Elastic Scale Storage',
+                    titleEnglish: 'Elastic Scale Storage',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'Distributed file storage for big data and AI',
                   },
                   {
-                    title: 'Edge consulting',
-                    titleEnglish: 'Edge consulting',
-                    url: 'https://www.ibm.com/services/process/edge-services?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'Cloud Object Storage (On-premises)',
+                    titleEnglish: 'Cloud Object Storage (On-premises)',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'Hyperscale object storage in the data center',
                   },
                   {
-                    title: 'Finance transformation',
-                    titleEnglish: 'Finance transformation',
-                    url: 'https://www.ibm.com/services/process/finance?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'SAN Volume Controller',
+                    titleEnglish: 'SAN Volume Controller',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Storage virtualization for large scale workloads',
                   },
                   {
-                    title: 'IoT consulting',
-                    titleEnglish: 'IoT consulting',
-                    url: 'https://www.ibm.com/services/process/iot-consulting?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'SAN B-Type Switches',
+                    titleEnglish: 'SAN B-Type Switches',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Support end-to-end NVMe with Gen 7 Fibre Channel',
                   },
                   {
-                    title: 'Procurement & strategic sourcing',
-                    titleEnglish: 'Procurement & strategic sourcing',
-                    url: 'https://www.ibm.com/services/process/procurement?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'SAN C-Type Switches',
+                    titleEnglish: 'SAN C-Type Switches',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'High-performance, multiprotocal storage networking',
                   },
                   {
-                    title: 'Risk consulting & fraud management',
-                    titleEnglish: 'Risk consulting & fraud management',
-                    url: 'https://www.ibm.com/services/process/risk?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'Tape System',
+                    titleEnglish: 'Tape System',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description: 'Tape libraries, cartridges and media',
                   },
                   {
-                    title: 'Supply chain',
-                    titleEnglish: 'Supply chain',
-                    url: 'https://www.ibm.com/services/process/supply-chain?lnk=hpmsc_bups&lnk2=learn',
+                    title: 'Cloud File Storage',
+                    titleEnglish: 'Cloud File Storage',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Flash-backed, durable, fast and flexible NFS-based file storage',
+                  },
+                  {
+                    title: 'Cloud Block Storage',
+                    titleEnglish: 'Cloud Block Storage',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Flash-backed, local disk performance with SAN persistence and durability',
+                  },
+                  {
+                    title: 'Cloud Object Storage',
+                    titleEnglish: 'Cloud Object Storage',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Flexible, cost-effective and scalable cloud storage for unstructured data',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/79a6c3cde7dd0665/original/megamenu-pictogram-business-process-service.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Design & business strategy',
-            titleEnglish: 'Design & business strategy',
-            url: 'https://www.ibm.com/services/ibmix/?lnk=hpmsc_budbs&lnk2=link',
+            title: 'Security & Identity',
+            titleEnglish: 'Security & Identity',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Design & business strategy',
-              headingUrl: 'https://www.ibm.com/services/ibmix/?lnk=hpmsc_bubs',
-              description: '',
+              headingTitle: 'Security & Identity',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Digital strategy',
-                    titleEnglish: 'Digital strategy',
-                    url: 'https://www.ibm.com/services/business/digital?lnk=hpmsc_bubs&lnk2=learn',
+                    title: 'Trusteer',
+                    titleEnglish: 'Trusteer',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Experience strategy',
-                    titleEnglish: 'Experience strategy',
-                    url: 'https://www.ibm.com/services/ibmix/experience-strategy?lnk=hpmsc_bubs&lnk2=learn',
+                    title: 'Randori',
+                    titleEnglish: 'Randori',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    target: 'external',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Marketing platforms',
-                    titleEnglish: 'Marketing platforms',
-                    url: 'https://www.ibm.com/services/ibmix/marketing-platforms?lnk=hpmsc_bubs&lnk2=learn',
+                    title: 'Verify',
+                    titleEnglish: 'Verify',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Salesforce consulting',
-                    titleEnglish: 'Salesforce consulting',
-                    url: 'https://www.ibm.com/services/salesforce?lnk=hpmsc_bubs&lnk2=learn',
+                    title: 'OpenPages with Watson',
+                    titleEnglish: 'OpenPages with Watson',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'QRadar SIEM',
+                    titleEnglish: 'QRadar SIEM',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Verify Privilege',
+                    titleEnglish: 'Verify Privilege',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'MaaS360',
+                    titleEnglish: 'MaaS360',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'QRadar SOAR',
+                    titleEnglish: 'QRadar SOAR',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'zSecure',
+                    titleEnglish: 'zSecure',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Guardium',
+                    titleEnglish: 'Guardium',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'QRadar XDR Connect',
+                    titleEnglish: 'QRadar XDR Connect',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'IBM Cloud Pak for Security',
+                    titleEnglish: 'IBM Cloud Pak for Security',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
+                  },
+                  {
+                    title: 'ReaQta',
+                    titleEnglish: 'ReaQta',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/1b7522c50ea39ca/original/megamenu-pictogram-design-business-strategy.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Hybrid multicloud services',
-            titleEnglish: 'Hybrid multicloud services',
-            url: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs?lnk=hpmsc_buhs',
+            title: 'View all products',
+            titleEnglish: 'View all products',
+            url: 'https://www.ibm.com/products?lnk=hpmps_buall',
+            megaPanelViewAll: true,
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Solutions',
+    titleEnglish: 'Solutions',
+    url: '',
+    hasMenu: true,
+    hasMegapanel: true,
+    megamenuLayout: 'tab',
+    menuSections: [
+      {
+        heading: '',
+        menuItems: [
+          {
+            title: 'Automation',
+            titleEnglish: 'Automation',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Hybrid multicloud services',
-              headingUrl: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs',
-              description: '',
+              headingTitle: 'Automation',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Business continuity & resiliency',
-                    titleEnglish: 'Business continuity & resiliency',
-                    url: 'https://www.ibm.com/services/business-continuity?lnk=hpmsc_buhs&lnk2=learn',
+                    title: 'Workflow',
+                    titleEnglish: 'Workflow',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Cloud services',
-                    titleEnglish: 'Cloud services',
-                    url: 'https://www.ibm.com/services/cloud?lnk=hpmsc_buhs&lnk2=learn',
+                    title: 'Enterprise Content Management',
+                    titleEnglish: 'Enterprise Content Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Network',
-                    titleEnglish: 'Network',
-                    url: 'https://www.ibm.com/services/network?lnk=hpmsc_buhs&lnk2=learn',
+                    title: 'Decision Management',
+                    titleEnglish: 'Decision Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
                   },
                   {
-                    title: 'Workplace services',
-                    titleEnglish: 'Workplace services',
-                    url: 'https://www.ibm.com/services/digital-workplace?lnk=hpmsc_buhs&lnk2=learn',
+                    title: 'Application Performance Management',
+                    titleEnglish: 'Application Performance Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5daa9dce872913ea/original/megamenu-pictogram-hybrid-multi-cloud-services.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Talent & transformation',
-            titleEnglish: 'Talent & transformation',
-            url: 'https://www.ibm.com/talent-management?lnk=hpmsc_buta&lnk2=link',
+            title: 'Data & AI',
+            titleEnglish: 'Data & AI',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Talent & transformation',
-              headingUrl:
-                'https://www.ibm.com/talent-management?lnk=hpmsc_buta',
-              description: '',
+              headingTitle: 'Data & AI',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description: 'Aggregate and analyze large datasets',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'HR transformation',
-                    titleEnglish: 'HR transformation',
-                    url: 'https://www.ibm.com/services/process/talent/human-resources?lnk=hpmsc_buta&lnk2=learn',
+                    title: 'Data Fabric',
+                    titleEnglish: 'Data Fabric',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'AI',
+                    titleEnglish: 'AI',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Master Data Management',
+                    titleEnglish: 'Master Data Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
+                  },
+                  {
+                    title: 'Data Lake',
+                    titleEnglish: 'Data Lake',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
+                  },
+                  {
+                    title: 'Data Warehouse',
+                    titleEnglish: 'Data Warehouse',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed PostgreSQL and MongoDB for sensitive data',
+                  },
+                  {
+                    title: 'Customer Care',
+                    titleEnglish: 'Customer Care',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools to connect all of your apps, data and events',
+                  },
+                  {
+                    title: 'Data Science',
+                    titleEnglish: 'Data Science',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Operations management software with AI insights',
+                  },
+                  {
+                    title: 'Data Management',
+                    titleEnglish: 'Data Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Management software for telco network operations',
                   },
                   {
-                    title: 'Talent acquisition',
-                    titleEnglish: 'Talent acquisition',
-                    url: 'https://www.ibm.com/talent-management/talent-acquisition?lnk=hpmsc_buta&lnk2=learn',
+                    title: 'Data Quality',
+                    titleEnglish: 'Data Quality',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Search and analytics engine that adapts to custom domains',
                   },
                   {
-                    title: 'Talent development',
-                    titleEnglish: 'Talent development',
-                    url: 'https://www.ibm.com/services/process/talent/development?lnk=hpmsc_buta&lnk2=learn',
+                    title: 'Data Ops',
+                    titleEnglish: 'Data Ops',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/69e350b141e12bd5/original/megamenu-pictogram-talent-and-transformation.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Application services',
-            titleEnglish: 'Application services',
-            url: 'https://www.ibm.com/services/applications?lnk=hpmsc_buas&lnk2=link',
+            title: 'Hybrid Cloud',
+            titleEnglish: 'Hybrid Cloud',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Application services',
-              headingUrl:
-                'https://www.ibm.com/services/applications?lnk=hpmsc_buas',
-              description: '',
+              headingTitle: 'Hybrid Cloud',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Application development',
-                    titleEnglish: 'Application development',
-                    url: 'https://www.ibm.com/services/applications/development?lnk=hpmsc_buas&lnk2=learn',
+                    title: 'Public Cloud',
+                    titleEnglish: 'Public Cloud',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Application Modernization',
-                    titleEnglish: 'Application Modernization',
-                    url: 'https://www.ibm.com/services/cloud/modernize-applications?lnk=hpmsc_buas&lnk2=learn',
+                    title: 'Private Cloud',
+                    titleEnglish: 'Private Cloud',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Enterprise application management',
-                    titleEnglish: 'Enterprise application management',
-                    url: 'https://www.ibm.com/services/cloud/enterprise-application-management?lnk=hpmsc_buas&lnk2=learn',
+                    title: 'Edge Computing',
+                    titleEnglish: 'Edge Computing',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Enterprise applications strategy',
-                    titleEnglish: 'Enterprise applications strategy',
-                    url: 'https://www.ibm.com/services/applications/enterprise?lnk=hpmsc_buas&lnk2=learn',
+                    title: 'Hybrid Cloud Storage',
+                    titleEnglish: 'Hybrid Cloud Storage',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'Hybrid Cloud Management',
+                    titleEnglish: 'Hybrid Cloud Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/2b7c180c68557dcb/original/megamenu-pictogram-application-services.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Security services',
-            titleEnglish: 'Security services',
-            url: 'https://www.ibm.com/security/services?lnk=hpmsc_buse&lnk2=link',
+            title: 'Infrastructure',
+            titleEnglish: 'Infrastructure',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Security services',
-              headingUrl:
-                'https://www.ibm.com/security/services?lnk=hpmsc_buse',
-              description: '',
+              headingTitle: 'Infrastructure',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Application security',
-                    titleEnglish: 'Application security',
-                    url: 'https://www.ibm.com/security/services/application-security-services?lnk=hpmsc_buse&lnk2=learn',
+                    title: 'HPC',
+                    titleEnglish: 'HPC',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Cloud security',
-                    titleEnglish: 'Cloud security',
-                    url: 'https://www.ibm.com/security/services/cloud-security-services?lnk=hpmsc_buse&lnk2=learn',
+                    title: 'Cloud Hosting',
+                    titleEnglish: 'Cloud Hosting',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Data security',
-                    titleEnglish: 'Data security',
-                    url: 'https://www.ibm.com/security/services/data-security?lnk=hpmsc_buse&lnk2=learn',
+                    title: 'IT Modernization',
+                    titleEnglish: 'IT Modernization',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Tools for data analysis, organization and management',
                   },
                   {
-                    title: 'Identity & access management',
-                    titleEnglish: 'Identity & access management',
-                    url: 'https://www.ibm.com/security/services/identity-access-management?lnk=hpmsc_buse&lnk2=learn',
+                    title: 'Data protection',
+                    titleEnglish: 'Data protection',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
                   },
                   {
-                    title: 'Managed security',
-                    titleEnglish: 'Managed security',
-                    url: 'https://www.ibm.com/security/services/managed-security-services?lnk=hpmsc_buse&lnk2=learn',
+                    title: 'Confidential Computing',
+                    titleEnglish: 'Confidential Computing',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed PostgreSQL and MongoDB for sensitive data',
                   },
                   {
-                    title: 'Security governance',
-                    titleEnglish: 'Security governance',
-                    url: 'https://www.ibm.com/security/services/security-governance?lnk=hpmsc_buse&lnk2=learn',
+                    title: 'Backup and Recovery',
+                    titleEnglish: 'Backup and Recovery',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Archivex',
+                    titleEnglish: 'Archivex',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/6ecec25a8489cf82/original/megamenu-pictogram-security-services.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Services for tech support',
-            titleEnglish: 'Services for tech support',
-            url: 'https://www.ibm.com/services/technology-support?lnk=hpmsc_busv&lnk2=link',
+            title: 'Industry',
+            titleEnglish: 'Industry',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Services for tech support',
-              headingUrl:
-                'https://www.ibm.com/services/technology-support?lnk=hpmsc_busv',
-              description: '',
+              headingTitle: 'Industry',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Open source',
-                    titleEnglish: 'Open source',
-                    url: 'https://www.ibm.com/services/technology-support/open-source?lnk=hpmsc_busv&lnk2=learn',
+                    title: 'Aerospace',
+                    titleEnglish: 'Aerospace',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Third party & multivendor',
-                    titleEnglish: 'Third party & multivendor',
-                    url: 'https://www.ibm.com/services/technology-support/multivendor-it?lnk=hpmsc_busv&lnk2=learn',
+                    title: 'Airline industry',
+                    titleEnglish: 'Airline industry',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'IBM warranties and maintenance',
-                    titleEnglish: 'IBM warranties and maintenance',
-                    url: 'https://www.ibm.com/services/technology-support/hardware-software?lnk=hpmsc_busv&lnk2=learn',
+                    title: 'Automotive',
+                    titleEnglish: 'Automotive',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
-                ],
-              },
-              feature: {
-                heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/7056e2b83b04133e/original/megamenu-pictogram-services-for-tech-support.png',
-                linkTitle: '',
-                linkUrl: '',
-              },
-            },
-          },
-          {
-            title: 'Payment plans for Services & Consulting',
-            titleEnglish: 'Payment plans for Services & Consulting',
-            url: 'https://www.ibm.com/financing/solutions/it-services-financing?lnk=hpmsc_bufi&lnk2=link',
-          },
-          {
-            title: 'View all services',
-            titleEnglish: 'View all services',
-            url: 'https://www.ibm.com/services?lnk=hpmsc_buall&lnk2=link',
-            megaPanelViewAll: true,
-          },
-        ],
-      },
-    ],
-  },
-  {
-    title: 'Learn & Support',
-    titleEnglish: 'Learn & Support',
-    url: '',
-    hasMenu: true,
-    hasMegapanel: true,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'Support',
-            titleEnglish: 'Support',
-            url: 'https://www.ibm.com/support?lnk=hpmls_busu&lnk2=link',
-            megapanelContent: {
-              headingTitle: 'Support',
-              headingUrl: 'https://www.ibm.com/support?lnk=hpmls_busu',
-              description: '',
-              quickLinks: {
-                title: '',
-                links: [
                   {
-                    title: 'IBM Support',
-                    titleEnglish: 'IBM Support',
-                    url: 'https://www.ibm.com/support?lnk=hpmls_busu&lnk2=learn',
+                    title: 'Banking and finance',
+                    titleEnglish: 'Banking and finance',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'IBM Cloud Support',
-                    titleEnglish: 'IBM Cloud Support',
-                    url: 'https://www.ibm.com/cloud/support?lnk=hpmls_busu&lnk2=learn',
+                    title: 'Consumer goods',
+                    titleEnglish: 'Consumer goods',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'IBM Developer',
-                    titleEnglish: 'IBM Developer',
-                    url: 'https://developer.ibm.com/?lnk=hpmls_busu&lnk2=learn',
+                    title: 'Education',
+                    titleEnglish: 'Education',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'IBM Community',
-                    titleEnglish: 'IBM Community',
-                    url: 'https://community.ibm.com/community/user/home?lnk=hpmls_busu&lnk2=learn',
+                    title: 'Electronics industry',
+                    titleEnglish: 'Electronics industry',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Energy and utilities',
+                    titleEnglish: 'Energy and utilities',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Federal',
+                    titleEnglish: 'Federal',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Financial services',
+                    titleEnglish: 'Financial services',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Freight and logistics industry',
+                    titleEnglish: 'Freight and logistics industry',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Government',
+                    titleEnglish: 'Government',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Healthcare',
+                    titleEnglish: 'Healthcare',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Hotel industry',
+                    titleEnglish: 'Hotel industry',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Insurance',
+                    titleEnglish: 'Insurance',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Life sciences',
+                    titleEnglish: 'Life sciences',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Manufacturing',
+                    titleEnglish: 'Manufacturing',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Media and entertainment',
+                    titleEnglish: 'Media and entertainment',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Documentation',
-            titleEnglish: 'Documentation',
-            url: 'https://www.ibm.com/support/knowledgecenter/?lnk=hpmls_budc&lnk2=link',
+            title: 'Partners & Applications',
+            titleEnglish: 'Partners & Applications',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Documentation',
-              headingUrl:
-                'https://www.ibm.com/support/knowledgecenter/?lnk=hpmls_budc',
-              description: '',
+              headingTitle: 'Partners & Applications',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'All product documentation',
-                    titleEnglish: 'All product documentation',
-                    url: 'https://www.ibm.com/support/knowledgecenter?lnk=hpmls_budc&lnk2=learn',
+                    title: 'SAP',
+                    titleEnglish: 'SAP',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'For products on IBM Cloud',
-                    titleEnglish: 'For products on IBM Cloud',
-                    url: 'https://cloud.ibm.com/docs?lnk=hpmls_budc&lnk2=learn',
+                    title: 'VMware',
+                    titleEnglish: 'VMware',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'AWS',
+                    titleEnglish: 'AWS',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'GCP',
+                    titleEnglish: 'GCP',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Azure',
+                    titleEnglish: 'Azure',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Salesforce',
+                    titleEnglish: 'Salesforce',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Adobe',
+                    titleEnglish: 'Adobe',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'For use cases (IBM Redbooks)',
-                    titleEnglish: 'For use cases (IBM Redbooks)',
-                    url: 'http://www.redbooks.ibm.com/?lnk=hpmls_budc&lnk2=learn',
+                    title: 'Nvidia',
+                    titleEnglish: 'Nvidia',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Developer education',
-            titleEnglish: 'Developer education',
-            url: 'https://developer.ibm.com/?lnk=hpmls_bude&lnk2=link',
+            title: 'Security',
+            titleEnglish: 'Security',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Developer education',
-              headingUrl: 'https://developer.ibm.com/?lnk=hpmls_bude',
-              description: '',
+              headingTitle: 'Security',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Code patterns',
-                    titleEnglish: 'Code patterns',
-                    url: 'https://developer.ibm.com/patterns/?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Zero Trust',
+                    titleEnglish: 'Zero Trust',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Developer community',
-                    titleEnglish: 'Developer community',
-                    url: 'https://developer.ibm.com/community/?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Data Security',
+                    titleEnglish: 'Data Security',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
                   },
                   {
-                    title: 'Developer events',
-                    titleEnglish: 'Developer events',
-                    url: 'https://developer.ibm.com/events/?lnk=hpmls_bude&lnk2=learn',
+                    title: 'XDR',
+                    titleEnglish: 'XDR',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Open Source @ IBM',
-                    titleEnglish: 'Open Source @ IBM',
-                    url: 'https://ibm.com/opensource?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Data Security',
+                    titleEnglish: 'Data Security',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Security auditing, reporting, analysis and governance',
                   },
                   {
-                    title: 'Technical articles',
-                    titleEnglish: 'Technical articles',
-                    url: 'https://developer.ibm.com/articles?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Cloud Security',
+                    titleEnglish: 'Cloud Security',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Managed PostgreSQL and MongoDB for sensitive data',
                   },
                   {
-                    title: 'Tutorials',
-                    titleEnglish: 'Tutorials',
-                    url: 'https://developer.ibm.com/tutorials/?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Security Services',
+                    titleEnglish: 'Security Services',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Videos',
-                    titleEnglish: 'Videos',
-                    url: 'https://developer.ibm.com/videos?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Ransomware',
+                    titleEnglish: 'Ransomware',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Operations management software with AI insights',
                   },
                   {
-                    title: 'View more Developer education',
-                    titleEnglish: 'View more Developer education',
-                    url: 'https://developer.ibm.com/?lnk=hpmls_bude&lnk2=learn',
+                    title: 'Insider Threat',
+                    titleEnglish: 'Insider Threat',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Management software for telco network operations',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Training',
-            titleEnglish: 'Training',
-            url: 'https://www.ibm.com/training/?lnk=hpmls_butr&lnk2=link',
+            title: 'Supply Chain',
+            titleEnglish: 'Supply Chain',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Training',
-              headingUrl: 'https://www.ibm.com/training/?lnk=hpmls_butr',
-              description: '',
+              headingTitle: 'Supply Chain',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Courses',
-                    titleEnglish: 'Courses',
-                    url: 'https://www.ibm.com/training/search?q=course&lnk=hpmls_butr&lnk2=learn',
+                    title: 'Visibility',
+                    titleEnglish: 'Visibility',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Learning journeys',
-                    titleEnglish: 'Learning journeys',
-                    url: 'https://www.ibm.com/training/journeys?lnk=hpmls_butr&lnk2=learn',
+                    title: 'EDI',
+                    titleEnglish: 'EDI',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Professional certifications',
-                    titleEnglish: 'Professional certifications',
-                    url: 'https://www.ibm.com/certify?lnk=hpmls_butr&lnk2=learn',
+                    title: 'Blockchain',
+                    titleEnglish: 'Blockchain',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Digital learning subscriptions',
-                    titleEnglish: 'Digital learning subscriptions',
-                    url: 'https://www.ibm.com/training/subscriptions?lnk=hpmls_butr&lnk2=learn',
+                    title: 'Data Exchange',
+                    titleEnglish: 'Data Exchange',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Supply Chain Services',
+                    titleEnglish: 'Supply Chain Services',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Sustainable Supply Chains',
+                    titleEnglish: 'Sustainable Supply Chains',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
           {
-            title: 'Resources',
-            titleEnglish: 'Resources',
-            url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure&lnk2=link',
+            title: 'Sustainability',
+            titleEnglish: 'Sustainability',
+            url: 'https://www.ibm.com/placeholder',
+            highlighted: true,
             megapanelContent: {
-              headingTitle: 'Resources',
-              headingUrl: 'https://www.ibm.com/blogs/?lnk=hpmls_bure',
-              description: '',
+              headingTitle: 'Sustainability',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Blogs',
-                    titleEnglish: 'Blogs',
-                    url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure&lnk2=learn',
+                    title: 'Asset Management',
+                    titleEnglish: 'Asset Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Operations management software with AI insights',
                   },
                   {
-                    title: 'Case studies',
-                    titleEnglish: 'Case studies',
-                    url: 'https://www.ibm.com/case-studies?lnk=hpmls_bure&lnk2=learn',
+                    title: 'Facilities Management',
+                    titleEnglish: 'Facilities Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'Events',
-                    titleEnglish: 'Events',
-                    url: 'http://www.ibm.com/events?lnk=hpmls_bure&lnk2=learn',
+                    title: 'Carbon Peformance Engine',
+                    titleEnglish: 'Carbon Peformance Engine',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                   {
-                    title: 'IBM Institute for Business Value',
-                    titleEnglish: 'IBM Institute for Business Value',
-                    url: 'https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure&lnk2=learn',
+                    title: 'Regenerative Agriculture',
+                    titleEnglish: 'Regenerative Agriculture',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'Renewables Forecasting',
+                    titleEnglish: 'Renewables Forecasting',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'Vegetation Management',
+                    titleEnglish: 'Vegetation Management',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'IT Sustainability',
+                    titleEnglish: 'IT Sustainability',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'Sustainable Supply Chains',
+                    titleEnglish: 'Sustainable Supply Chains',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                  },
+                  {
+                    title: 'ESG Reporting',
+                    titleEnglish: 'ESG Reporting',
+                    highlightedLink: false,
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
           },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Consulting',
+    titleEnglish: 'Consulting',
+    url: '',
+    hasMenu: true,
+    hasMegapanel: true,
+    megamenuLayout: 'tab',
+    menuSections: [
+      {
+        heading: '',
+        menuItems: [
           {
-            title: 'What is...',
-            titleEnglish: 'What is...',
-            url: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi&lnk2=link',
+            title: 'Overview',
+            titleEnglish: 'Overview',
+            url: 'https://www.ibm.com/consulting?lnk=hpmco&lnk2=link',
             megapanelContent: {
-              headingTitle: 'What is...',
-              headingUrl: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi',
-              description: '',
+              headingTitle: 'IBM Consulting',
+              headingUrl: 'https://www.ibm.com/consulting?lnk=hpmco&lnk2=link',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
               quickLinks: {
                 title: '',
                 links: [
                   {
-                    title: 'Artificial intelligence',
-                    titleEnglish: 'Artificial intelligence',
-                    url: 'https://www.ibm.com/cloud/learn/artificial-intelligence?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'IBM iX',
+                    titleEnglish: 'IBM iX',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Automation',
-                    titleEnglish: 'Automation',
-                    url: 'https://www.ibm.com/topics/automation?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Garage',
+                    titleEnglish: 'Garage',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Blockchain',
-                    titleEnglish: 'Blockchain',
-                    url: 'https://www.ibm.com/blockchain/what-is-blockchain?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'X-Force',
+                    titleEnglish: 'X-Force',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Business intelligence',
-                    titleEnglish: 'Business intelligence',
-                    url: 'https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'TSS',
+                    titleEnglish: 'TSS',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Cloud computing',
-                    titleEnglish: 'Cloud computing',
-                    url: 'https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Lab Services',
+                    titleEnglish: 'Lab Services',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Cybersecurity',
-                    titleEnglish: 'Cybersecurity',
-                    url: 'https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Investments',
+                    titleEnglish: 'Investments',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'DevOps',
-                    titleEnglish: 'DevOps',
-                    url: 'https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Announcements',
+                    titleEnglish: 'Announcements',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Client Success',
+                    titleEnglish: 'Client Success',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Careers',
+                    titleEnglish: 'Careers',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Cloud',
+            titleEnglish: 'Cloud',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Cloud',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Cloud Strategy',
+                    titleEnglish: 'Cloud Strategy',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
                     title: 'Hybrid Cloud',
                     titleEnglish: 'Hybrid Cloud',
-                    url: 'https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Kubernetes',
-                    titleEnglish: 'Kubernetes',
-                    url: 'https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Cloud Migration',
+                    titleEnglish: 'Cloud Migration',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Quantum computing',
-                    titleEnglish: 'Quantum computing',
-                    url: 'https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing/?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Multicloud',
+                    titleEnglish: 'Multicloud',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                   {
-                    title: 'Supply chain',
-                    titleEnglish: 'Supply chain',
-                    url: 'https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi&lnk2=learn',
+                    title: 'Cloud Architecture',
+                    titleEnglish: 'Cloud Architecture',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Managed Cloud Services',
+                    titleEnglish: 'Managed Cloud Services',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
                   },
                 ],
               },
               feature: {
                 heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png',
+                imageUrl: '',
                 linkTitle: '',
                 linkUrl: '',
               },
             },
-          },
-        ],
-      },
-    ],
+          },
+          {
+            title: 'Data & Apps',
+            titleEnglish: 'Data & Apps',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Data & Apps',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Data and Analytics',
+                    titleEnglish: 'Data and Analytics',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'AI',
+                    titleEnglish: 'AI',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Application Services',
+                    titleEnglish: 'Application Services',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Application Development',
+                    titleEnglish: 'Application Development',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Application Modernization',
+                    titleEnglish: 'Application Modernization',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Mobile',
+                    titleEnglish: 'Mobile',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Application Security',
+                    titleEnglish: 'Application Security',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Experience',
+            titleEnglish: 'Experience',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Experience',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Customer Experience',
+                    titleEnglish: 'Customer Experience',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'E-commerce',
+                    titleEnglish: 'E-commerce',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Payments',
+                    titleEnglish: 'Payments',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Operations',
+            titleEnglish: 'Operations',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Operations',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Outsourcing',
+                    titleEnglish: 'Outsourcing',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Procurement & Strategic Sourcing',
+                    titleEnglish: 'Procurement & Strategic Sourcing',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Supply Chain',
+                    titleEnglish: 'Supply Chain',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Finance',
+                    titleEnglish: 'Finance',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Marketing',
+                    titleEnglish: 'Marketing',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Talent',
+                    titleEnglish: 'Talent',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Finance',
+                    titleEnglish: 'Finance',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Business Process Reengineering',
+                    titleEnglish: 'Business Process Reengineering',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Security',
+            titleEnglish: 'Security',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Security',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Security Strategy',
+                    titleEnglish: 'Security Strategy',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Cloud',
+                    titleEnglish: 'Cloud',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Threat managment',
+                    titleEnglish: 'Threat managment',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'GRC',
+                    titleEnglish: 'GRC',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Data',
+                    titleEnglish: 'Data',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Threat intelligence',
+                    titleEnglish: 'Threat intelligence',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Risk Management',
+                    titleEnglish: 'Risk Management',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Applications',
+                    titleEnglish: 'Applications',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Virtual SOC',
+                    titleEnglish: 'Virtual SOC',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Offensive Security Services',
+                    titleEnglish: 'Offensive Security Services',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Identity and Access',
+                    titleEnglish: 'Identity and Access',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Managed Detection and Response',
+                    titleEnglish: 'Managed Detection and Response',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Penetration Testing',
+                    titleEnglish: 'Penetration Testing',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Managed Security Services',
+                    titleEnglish: 'Managed Security Services',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Adversary Simulation',
+                    titleEnglish: 'Adversary Simulation',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Managed Infrastructure and Endpoint Security',
+                    titleEnglish:
+                      'Managed Infrastructure and Endpoint Security',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Strategy',
+            titleEnglish: 'Strategy',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Strategy',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Business Strategy',
+                    titleEnglish: 'Business Strategy',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Sustainability',
+                    titleEnglish: 'Sustainability',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'GRC',
+                    titleEnglish: 'GRC',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Risk Management',
+                    titleEnglish: 'Risk Management',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Partners',
+            titleEnglish: 'Partners',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Partners',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'SAP',
+                    titleEnglish: 'SAP',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Adobe',
+                    titleEnglish: 'Adobe',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'AWS',
+                    titleEnglish: 'AWS',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Red Hat',
+                    titleEnglish: 'Red Hat',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'SalesForce',
+                    titleEnglish: 'SalesForce',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'ServiceNow',
+                    titleEnglish: 'ServiceNow',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Microsoft',
+                    titleEnglish: 'Microsoft',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Workday',
+                    titleEnglish: 'Workday',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Celonis',
+                    titleEnglish: 'Celonis',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Oracle',
+                    titleEnglish: 'Oracle',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Insights',
+            titleEnglish: 'Insights',
+            url: 'https://www.ibm.com/placeholder',
+            megapanelContent: {
+              headingTitle: 'Insights',
+              headingUrl: 'https://www.ibm.com/placeholder',
+              description:
+                'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'IBV',
+                    titleEnglish: 'IBV',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Cost of a Data Breach',
+                    titleEnglish: 'Cost of a Data Breach',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'X-Force Threat Intelligence',
+                    titleEnglish: 'X-Force Threat Intelligence',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Hybrid Cloud Insight',
+                    titleEnglish: 'Hybrid Cloud Insight',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'AI Insight',
+                    titleEnglish: 'AI Insight',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Sustainability Insight',
+                    titleEnglish: 'Sustainability Insight',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Customer Experience Insight',
+                    titleEnglish: 'Customer Experience Insight',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                  {
+                    title: 'Supply Chain Insight',
+                    titleEnglish: 'Supply Chain Insight',
+                    url: 'https://www.ibm.com/placeholder',
+                    description:
+                      'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'Support',
+    titleEnglish: 'Support',
+    url: '',
+    hasMenu: true,
+    hasMegapanel: true,
+    megamenuLayout: 'list',
+    menuSections: [
+      {
+        heading: '',
+        menuItems: [
+          {
+            title: 'What is...',
+            titleEnglish: 'What is...',
+            url: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi',
+            megapanelContent: {
+              headingTitle: 'What is...',
+              headingUrl: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Artificial intelligence',
+                    titleEnglish: 'Artificial intelligence',
+                    url: 'https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Automation',
+                    titleEnglish: 'Automation',
+                    url: 'https://www.ibm.com/topics/automation?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Blockchain',
+                    titleEnglish: 'Blockchain',
+                    url: 'https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Business intelligence',
+                    titleEnglish: 'Business intelligence',
+                    url: 'https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Chatbots',
+                    titleEnglish: 'Chatbots',
+                    url: 'https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Cloud computing',
+                    titleEnglish: 'Cloud computing',
+                    url: 'https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Containerization',
+                    titleEnglish: 'Containerization',
+                    url: 'https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Cybersecurity',
+                    titleEnglish: 'Cybersecurity',
+                    url: 'https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Databases',
+                    titleEnglish: 'Databases',
+                    url: 'https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'DevOps',
+                    titleEnglish: 'DevOps',
+                    url: 'https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Hybrid Cloud',
+                    titleEnglish: 'Hybrid Cloud',
+                    url: 'https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Kubernetes',
+                    titleEnglish: 'Kubernetes',
+                    url: 'https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Quantum computing',
+                    titleEnglish: 'Quantum computing',
+                    url: 'https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi',
+                  },
+                  {
+                    title: 'Supply chain',
+                    titleEnglish: 'Supply chain',
+                    url: 'https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/581adf40f2b008ec/original/megamenu-pictogram-what-is-_.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Training',
+            titleEnglish: 'Training',
+            url: 'https://www.ibm.com/training/?lnk=hpmls_butr',
+            megapanelContent: {
+              headingTitle: 'Training',
+              headingUrl: 'https://www.ibm.com/training/?lnk=hpmls_butr',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Courses',
+                    titleEnglish: 'Courses',
+                    url: 'https://www.ibm.com/training/search?q=course&lnk=hpmls_butr',
+                  },
+                  {
+                    title: 'Learning journeys',
+                    titleEnglish: 'Learning journeys',
+                    url: 'https://www.ibm.com/training/journeys?lnk=hpmls_butr',
+                  },
+                  {
+                    title: 'Professional certifications',
+                    titleEnglish: 'Professional certifications',
+                    url: 'https://www.ibm.com/certify?lnk=hpmls_butr',
+                  },
+                  {
+                    title: 'Digital learning subscriptions',
+                    titleEnglish: 'Digital learning subscriptions',
+                    url: 'https://www.ibm.com/training/subscriptions?lnk=hpmls_butr',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/5540e5627aeb2568/original/megamenu-pictogram-training.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Developer education',
+            titleEnglish: 'Developer education',
+            url: 'https://developer.ibm.com/?lnk=hpmls_bude',
+            megapanelContent: {
+              headingTitle: 'Developer education',
+              headingUrl: 'https://developer.ibm.com/?lnk=hpmls_bude',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Code patterns',
+                    titleEnglish: 'Code patterns',
+                    url: 'https://developer.ibm.com/patterns/?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'Developer community',
+                    titleEnglish: 'Developer community',
+                    url: 'https://developer.ibm.com/community/?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'Developer events',
+                    titleEnglish: 'Developer events',
+                    url: 'https://developer.ibm.com/events/?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'Open Source @ IBM',
+                    titleEnglish: 'Open Source @ IBM',
+                    url: 'https://ibm.com/opensource?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'Technical articles',
+                    titleEnglish: 'Technical articles',
+                    url: 'https://developer.ibm.com/articles?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'Tutorials',
+                    titleEnglish: 'Tutorials',
+                    url: 'https://developer.ibm.com/tutorials/?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'Videos',
+                    titleEnglish: 'Videos',
+                    url: 'https://developer.ibm.com/videos?lnk=hpmls_bude',
+                  },
+                  {
+                    title: 'View more Developer education',
+                    titleEnglish: 'View more Developer education',
+                    url: 'https://developer.ibm.com/?lnk=hpmls_bude',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/1e651d0f7b539774/original/megamenu-pictogram-developer-education.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Documentation',
+            titleEnglish: 'Documentation',
+            url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc',
+            megapanelContent: {
+              headingTitle: 'Documentation',
+              headingUrl: 'https://www.ibm.com/docs/en?lnk=hpmls_budc',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'All product documentation',
+                    titleEnglish: 'All product documentation',
+                    url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc',
+                  },
+                  {
+                    title: 'For products on IBM Cloud',
+                    titleEnglish: 'For products on IBM Cloud',
+                    url: 'https://cloud.ibm.com/docs?lnk=hpmls_budc',
+                  },
+                  {
+                    title: 'For use cases — IBM Redbooks',
+                    titleEnglish: 'For use cases — IBM Redbooks',
+                    url: 'https://www.redbooks.ibm.com/?lnk=hpmls_budc',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/49d529fab45bb565/original/megamenu-pictogram-documentation.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Community',
+            titleEnglish: 'Community',
+            url: '',
+            megapanelContent: {
+              headingTitle: 'Community',
+              headingUrl: '',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'IBM Developer',
+                    titleEnglish: 'IBM Developer',
+                    url: 'https://developer.ibm.com/?lnk=hpmls_buco',
+                  },
+                  {
+                    title: 'IBM Community',
+                    titleEnglish: 'IBM Community',
+                    url: 'https://community.ibm.com/community/user/home?lnk=hpmls_buco',
+                  },
+                  {
+                    title: 'Support forums',
+                    titleEnglish: 'Support forums',
+                    url: 'https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Resources',
+            titleEnglish: 'Resources',
+            url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure',
+            megapanelContent: {
+              headingTitle: 'Resources',
+              headingUrl: 'https://www.ibm.com/blogs/?lnk=hpmls_bure',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Blogs & thought leadership',
+                    titleEnglish: 'Blogs & thought leadership',
+                    url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure',
+                  },
+                  {
+                    title: 'Case studies & client stories',
+                    titleEnglish: 'Case studies & client stories',
+                    url: 'https://www.ibm.com/case-studies?lnk=hpmls_bure',
+                  },
+                  {
+                    title: 'Upcoming events & webinars',
+                    titleEnglish: 'Upcoming events & webinars',
+                    url: 'https://www.ibm.com/events?lnk=hpmls_bure',
+                  },
+                  {
+                    title: 'IBM Institute for Business Value',
+                    titleEnglish: 'IBM Institute for Business Value',
+                    url: 'https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure',
+                  },
+                  {
+                    title: 'Licensing & compliance',
+                    titleEnglish: 'Licensing & compliance',
+                    url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmls_bure',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/164ef3660bad78a8/original/megamenu-pictogram-resources.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Support',
+            titleEnglish: 'Support',
+            url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu',
+            megapanelContent: {
+              headingTitle: 'Support',
+              headingUrl: 'https://www.ibm.com/mysupport?lnk=hpmls_busu',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Download fixes, updates & drivers',
+                    titleEnglish: 'Download fixes, updates & drivers',
+                    url: 'https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu',
+                  },
+                  {
+                    title: 'Download licensed software - Passport Advantage',
+                    titleEnglish:
+                      'Download licensed software - Passport Advantage',
+                    url: 'https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu',
+                  },
+                  {
+                    title: 'View your cases',
+                    titleEnglish: 'View your cases',
+                    url: 'https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu',
+                  },
+                  {
+                    title: 'Open a case',
+                    titleEnglish: 'Open a case',
+                    url: 'https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu',
+                  },
+                  {
+                    title: 'View available support plans',
+                    titleEnglish: 'View available support plans',
+                    url: 'https://www.ibm.com/support/offerings?lnk=hpmls_busu',
+                  },
+                  {
+                    title: 'View more on Support',
+                    titleEnglish: 'View more on Support',
+                    url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/5b1abed637b01b55/original/megamenu-pictogram-support.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'Cloud platform support',
+            titleEnglish: 'Cloud platform support',
+            url: 'https://www.ibm.com/cloud/support?lnk=hpmls_bucl',
+          },
+          {
+            title: 'Newsletter subscriptions',
+            titleEnglish: 'Newsletter subscriptions',
+            url: 'https://www.ibm.com/subscribe/',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    title: 'More',
+    titleEnglish: 'More',
+    url: '',
+    hasMenu: true,
+    hasMegapanel: true,
+    megamenuLayout: 'list',
+    menuSections: [
+      {
+        heading: '',
+        menuItems: [
+          {
+            title: 'Partner with us',
+            titleEnglish: 'Partners',
+            url: 'https://www.ibm.com/partners?lnk=hpmex_bupa',
+            megapanelContent: {
+              headingTitle: 'Partner with us',
+              headingUrl: 'https://www.ibm.com/partners?lnk=hpmex_bupa',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'PartnerWorld',
+                    titleEnglish: 'Partner with us — PartnerWorld',
+                    url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa',
+                  },
+                  {
+                    title: 'Our strategic partnerships',
+                    titleEnglish: 'Our strategic partnerships',
+                    url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa',
+                  },
+                  {
+                    title: 'Flexible payment plans',
+                    titleEnglish: 'Flexible payment plans',
+                    url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'IBM Research',
+            titleEnglish: 'IBM Research',
+            url: 'https://research.ibm.com?lnk=hpmex_bure',
+            megapanelContent: {
+              headingTitle: 'IBM Research',
+              headingUrl: 'https://research.ibm.com?lnk=hpmex_bure',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Blog',
+                    titleEnglish: 'Blog',
+                    url: 'https://research.ibm.com/blog?lnk=hpmex_bure',
+                  },
+                  {
+                    title: 'Publications',
+                    titleEnglish: 'Publications',
+                    url: 'https://research.ibm.com/publications?lnk=hpmex_bure',
+                  },
+                  {
+                    title: 'Teams',
+                    titleEnglish: 'Teams',
+                    url: 'https://research.ibm.com/teams?lnk=hpmex_bure',
+                  },
+                  {
+                    title: 'Collaborate with us',
+                    titleEnglish: 'Collaborate with us',
+                    url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'About IBM',
+            titleEnglish: 'About IBM',
+            url: 'https://www.ibm.com/about?lnk=hpmex_buab',
+            megapanelContent: {
+              headingTitle: 'About IBM',
+              headingUrl: 'https://www.ibm.com/about?lnk=hpmex_buab',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Annual report',
+                    titleEnglish: 'Annual report',
+                    url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Career opportunities',
+                    titleEnglish: 'Career opportunities',
+                    url: 'https://www.ibm.com/employment/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Corporate social responsibility',
+                    titleEnglish: 'Corporate social responsibility',
+                    url: 'https://www.ibm.org?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Diversity & inclusion',
+                    titleEnglish: 'Diversity & inclusion',
+                    url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Industry analyst reports',
+                    titleEnglish: 'Industry analyst reports',
+                    url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Investor relations',
+                    titleEnglish: 'Investor relations',
+                    url: 'https://www.ibm.com/investor/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Licensing & compliance',
+                    titleEnglish: 'Licensing & compliance',
+                    url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'News & announcements',
+                    titleEnglish: 'News & announcements',
+                    url: 'https://newsroom.ibm.com?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Thought leadership',
+                    titleEnglish: 'Thought leadership',
+                    url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab',
+                  },
+                  {
+                    title: 'Security, privacy & trust',
+                    titleEnglish: 'Security, privacy & trust',
+                    url: 'https://www.ibm.com/trust?lnk=hpmex_buab',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl:
+                  'https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+          {
+            title: 'COVID-19',
+            titleEnglish: 'COVID-19',
+            url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
+            megapanelContent: {
+              headingTitle: 'COVID-19',
+              headingUrl: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
+              description: '',
+              quickLinks: {
+                title: '',
+                links: [
+                  {
+                    title: 'Business solutions',
+                    titleEnglish: 'Business solutions',
+                    url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco',
+                  },
+                  {
+                    title: 'Action guide',
+                    titleEnglish: 'Action guide',
+                    url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco',
+                  },
+                ],
+              },
+              feature: {
+                heading: '',
+                imageUrl: '',
+                linkTitle: '',
+                linkUrl: '',
+              },
+            },
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const mastheadLinksV2: L0MenuItem[] = [
+  {
+    title: 'Faceted Megamenu',
+    titleEnglish: 'Faceted Megamenu',
+    url: '',
+    submenu: {
+      sections: [
+        {
+          heading: {
+            title: 'All Descriptions',
+            titleEnglish: 'All Descriptions',
+            url: 'https://www.ibm.com/placeholder',
+            description: 'Descriptions for each heading and link.',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'IBM Cloud Pak for Security',
+                  titleEnglish: 'IBM Cloud Pak for Security',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Security auditing, reporting, analysis and governance',
+                },
+                {
+                  title: 'IBM Cloud Pak for Business Automation',
+                  titleEnglish: 'IBM Cloud Pak for Business Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Operations management software with AI insights',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Integration',
+                  titleEnglish: 'IBM Cloud Pak for Integration',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools to connect all of your apps, data and events',
+                },
+                {
+                  title: 'IBM Cloud Pak for Network Automation',
+                  titleEnglish: 'IBM Cloud Pak for Network Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Management software for telco network operations',
+                },
+                {
+                  title: 'IBM Cloud',
+                  titleEnglish: 'IBM Cloud',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'IBM Z',
+                  titleEnglish: 'IBM Z',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+              ],
+            },
+          ],
+          viewAll: {
+            title: 'Demo Tab View All',
+            titleEnglish: 'Demo Tab View All',
+            url: 'https://www.example.com',
+          },
+        },
+        {
+          heading: {
+            title: 'No Heading 1 Description',
+            titleEnglish: 'No Heading 1 Description',
+            url: 'https://www.ibm.com/placeholder',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'Watson Discovery',
+                  titleEnglish: 'Watson Discovery',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Search and analytics engine that adapts to custom domains',
+                },
+                {
+                  title: 'Spech to Text',
+                  titleEnglish: 'Spech to Text',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'API for real-time speech recognition and transcription',
+                },
+                {
+                  title: 'Text to Speech',
+                  titleEnglish: 'Text to Speech',
+                  url: 'https://www.ibm.com/placeholder',
+                  description: 'API for real-time text to speech conversion',
+                },
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'IBM Cloud Pak for AIOps',
+                  titleEnglish: 'IBM Cloud Pak for AIOps',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'DevOps management tool with AI analysis and recommendations',
+                },
+                {
+                  title: 'IBM Watson Natural Language Understanding',
+                  titleEnglish: 'IBM Watson Natural Language Understanding',
+                  url: 'https://www.ibm.com/placeholder',
+                  description: 'API for text analysis and metadata extraction',
+                },
+                {
+                  title: 'Watson Studio',
+                  titleEnglish: 'Watson Studio',
+                  url: 'https://www.ibm.com/placeholder',
+                  description: 'IDE to build, run and manage AI models',
+                },
+                {
+                  title: 'IBM Watson Knowledge Catalog',
+                  titleEnglish: 'IBM Watson Knowledge Catalog',
+                  url: 'https://www.ibm.com/placeholder',
+                  description: 'SaaS for AI data management',
+                },
+                {
+                  title: 'Watson Assistant',
+                  titleEnglish: 'Watson Assistant',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'No Heading 2 Descriptions',
+            titleEnglish: 'No Heading 2 Descriptions',
+            url: 'https://www.ibm.com/placeholder',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'Business Analytics Enterprise',
+                  titleEnglish: 'Business Analytics Enterprise',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                },
+                {
+                  title: 'Cognos',
+                  titleEnglish: 'Cognos',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'SPSS',
+                  titleEnglish: 'SPSS',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'cplex',
+                  titleEnglish: 'cplex',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'Netezza',
+                  titleEnglish: 'Netezza',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'Watson Studio',
+                  titleEnglish: 'Watson Studio',
+                  url: 'https://www.ibm.com/placeholder',
+                  description: 'IDE to build, run and manage AI models',
+                },
+                {
+                  title: 'Planning Analytics',
+                  titleEnglish: 'Planning Analytics',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'Watson Discovery',
+                  titleEnglish: 'Watson Discovery',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Search and analytics engine that adapts to custom domains',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'No Heading Descriptions',
+            titleEnglish: 'No Heading Descriptions',
+            url: 'https://www.ibm.com/placeholder',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'IBM Informix on Cloud',
+                  titleEnglish: 'IBM Informix on Cloud',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Managed DB for time series, spatial, NoSQL and SQL data',
+                },
+                {
+                  title: 'IBM Cloudant',
+                  titleEnglish: 'IBM Cloudant',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Managed PCI-compliant JSON document store on CouchDB',
+                },
+                {
+                  title: 'IBM Cloud Database',
+                  titleEnglish: 'IBM Cloud Database',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'IBM Cloud Hyper Protect DbaaS',
+                  titleEnglish: 'IBM Cloud Hyper Protect DbaaS',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Managed PostgreSQL and MongoDB for sensitive data',
+                },
+                {
+                  title: 'IMS',
+                  titleEnglish: 'IMS',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'Db2',
+                  titleEnglish: 'Db2',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Sed ut perspiciatis unde omnis iste natus error sit voluptatem ac',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'No Link Descriptions',
+            titleEnglish: 'Compute & Servers',
+            url: 'https://www.ibm.com/placeholder',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'IBM Z',
+                  titleEnglish: 'IBM Z',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Power',
+                  titleEnglish: 'Power',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Spectrum Computing',
+                  titleEnglish: 'Spectrum Computing',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'LinuxONE',
+                  titleEnglish: 'LinuxONE',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Bare Metal Servers',
+                  titleEnglish: 'IBM Cloud Bare Metal Servers',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Virtual Servers',
+                  titleEnglish: 'IBM Cloud Virtual Servers',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'Only Heading 1 Description',
+            titleEnglish: 'Only Heading 1 Description',
+            url: 'https://www.ibm.com/placeholder',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for AIOps',
+                  titleEnglish: 'IBM Cloud Pak for AIOps',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Continuous Delivery',
+                  titleEnglish: 'IBM Cloud Continuous Delivery',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Schematics',
+                  titleEnglish: 'IBM Cloud Schematics',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'UrbanCode',
+                  titleEnglish: 'UrbanCode',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'Only Heading 2 Descriptions',
+            titleEnglish: 'Only Heading 2 Descriptions',
+            url: 'https://www.ibm.com/placeholder',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for AIOps',
+                  titleEnglish: 'IBM Cloud Pak for AIOps',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Turbonomic',
+                  titleEnglish: 'IBM Turbonomic',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Instana',
+                  titleEnglish: 'IBM Instana',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'No Descriptions',
+            titleEnglish: 'No Descriptions',
+            url: 'https://www.ibm.com/placeholder',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Business Automation',
+                  titleEnglish: 'IBM Cloud Pak for Business Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Watson Orchestrate',
+                  titleEnglish: 'Watson Orchestrate',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM RPA',
+                  titleEnglish: 'IBM RPA',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'BlueWorks Live',
+                  titleEnglish: 'BlueWorks Live',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Operational Decision Manager',
+                  titleEnglish: 'IBM Operational Decision Manager',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'No Heading 2s',
+            titleEnglish: 'No Heading 2s',
+            url: 'https://www.ibm.com/placeholder',
+            description: 'Descriptions for each heading and link.',
+          },
+          groups: [
+            {
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools for data analysis, organization and management',
+                },
+                {
+                  title: 'IBM Cloud Pak for Security',
+                  titleEnglish: 'IBM Cloud Pak for Security',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Security auditing, reporting, analysis and governance',
+                },
+                {
+                  title: 'IBM Cloud Pak for Business Automation',
+                  titleEnglish: 'IBM Cloud Pak for Business Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Operations management software with AI insights',
+                },
+              ],
+            },
+            {
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Integration',
+                  titleEnglish: 'IBM Cloud Pak for Integration',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Tools to connect all of your apps, data and events',
+                },
+                {
+                  title: 'IBM Cloud Pak for Network Automation',
+                  titleEnglish: 'IBM Cloud Pak for Network Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Management software for telco network operations',
+                },
+                {
+                  title: 'IBM Cloud',
+                  titleEnglish: 'IBM Cloud',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+                {
+                  title: 'IBM Z',
+                  titleEnglish: 'IBM Z',
+                  url: 'https://www.ibm.com/placeholder',
+                  description:
+                    'Description text Lorem ipsum dolor sit amet, consectetuer adipiscing elit.',
+                },
+              ],
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'Multiple Groups in Column',
+            titleEnglish: 'Multiple Groups in Column',
+            url: 'https://www.ibm.com/placeholder',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Pak for Security',
+                  titleEnglish: 'IBM Cloud Pak for Security',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Pak for Business Automation',
+                  titleEnglish: 'IBM Cloud Pak for Business Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Integration',
+                  titleEnglish: 'IBM Cloud Pak for Integration',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Pak for Network Automation',
+                  titleEnglish: 'IBM Cloud Pak for Network Automation',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud',
+                  titleEnglish: 'IBM Cloud',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Z',
+                  titleEnglish: 'IBM Z',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Watson Discovery',
+                  titleEnglish: 'Watson Discovery',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Spech to Text',
+                  titleEnglish: 'Spech to Text',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Text to Speech',
+                  titleEnglish: 'Text to Speech',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Cloud Pak for AIOps',
+                  titleEnglish: 'IBM Cloud Pak for AIOps',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Watson Natural Language Understanding',
+                  titleEnglish: 'IBM Watson Natural Language Understanding',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Watson Studio',
+                  titleEnglish: 'Watson Studio',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'IBM Watson Knowledge Catalog',
+                  titleEnglish: 'IBM Watson Knowledge Catalog',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Watson Assistant',
+                  titleEnglish: 'Watson Assistant',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'Heading Level 2',
+                titleEnglish: 'Heading Level 2',
+                url: '',
+              },
+              links: [
+                {
+                  title: 'IBM Cloud Pak for Data',
+                  titleEnglish: 'IBM Cloud Pak for Data',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Business Analytics Enterprise',
+                  titleEnglish: 'Business Analytics Enterprise',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Cognos',
+                  titleEnglish: 'Cognos',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'SPSS',
+                  titleEnglish: 'SPSS',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'cplex',
+                  titleEnglish: 'cplex',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Netezza',
+                  titleEnglish: 'Netezza',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Watson Studio',
+                  titleEnglish: 'Watson Studio',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Planning Analytics',
+                  titleEnglish: 'Planning Analytics',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+                {
+                  title: 'Watson Discovery',
+                  titleEnglish: 'Watson Discovery',
+                  url: 'https://www.ibm.com/placeholder',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      viewAll: {
+        title: 'View all items',
+        titleEnglish: 'View all items',
+        url: 'https://www.ibm.com/products?lnk=hpmps_buall',
+      },
+    },
+  },
+  {
+    title: 'Simple Megamenu',
+    titleEnglish: 'Simple Megamenu',
+    url: '',
+    submenu: {
+      sections: [
+        {
+          groups: [
+            {
+              heading: {
+                title: 'Partner with us',
+                titleEnglish: 'Partners',
+                url: 'https://www.ibm.com/partners?lnk=hpmex_bupa',
+              },
+              links: [
+                {
+                  title: 'PartnerWorld',
+                  titleEnglish: 'Partner with us — PartnerWorld',
+                  url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa',
+                },
+                {
+                  title: 'Our strategic partnerships',
+                  titleEnglish: 'Our strategic partnerships',
+                  url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa',
+                },
+                {
+                  title: 'Flexible payment plans',
+                  titleEnglish: 'Flexible payment plans',
+                  url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'IBM Research',
+                titleEnglish: 'IBM Research',
+                url: 'https://research.ibm.com?lnk=hpmex_bure',
+              },
+              links: [
+                {
+                  title: 'Blog',
+                  titleEnglish: 'Blog',
+                  url: 'https://research.ibm.com/blog?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Publications',
+                  titleEnglish: 'Publications',
+                  url: 'https://research.ibm.com/publications?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Teams',
+                  titleEnglish: 'Teams',
+                  url: 'https://research.ibm.com/teams?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Collaborate with us',
+                  titleEnglish: 'Collaborate with us',
+                  url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'About IBM',
+                titleEnglish: 'About IBM',
+                url: 'https://www.ibm.com/about?lnk=hpmex_buab',
+              },
+              links: [
+                {
+                  title: 'Annual report',
+                  titleEnglish: 'Annual report',
+                  url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Career opportunities',
+                  titleEnglish: 'Career opportunities',
+                  url: 'https://www.ibm.com/employment/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Corporate social responsibility',
+                  titleEnglish: 'Corporate social responsibility',
+                  url: 'https://www.ibm.org?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Diversity & inclusion',
+                  titleEnglish: 'Diversity & inclusion',
+                  url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Industry analyst reports',
+                  titleEnglish: 'Industry analyst reports',
+                  url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Investor relations',
+                  titleEnglish: 'Investor relations',
+                  url: 'https://www.ibm.com/investor/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Licensing & compliance',
+                  titleEnglish: 'Licensing & compliance',
+                  url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'News & announcements',
+                  titleEnglish: 'News & announcements',
+                  url: 'https://newsroom.ibm.com?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Thought leadership',
+                  titleEnglish: 'Thought leadership',
+                  url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Security, privacy & trust',
+                  titleEnglish: 'Security, privacy & trust',
+                  url: 'https://www.ibm.com/trust?lnk=hpmex_buab',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'COVID-19',
+                titleEnglish: 'COVID-19',
+                url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
+              },
+              links: [
+                {
+                  title: 'Business solutions',
+                  titleEnglish: 'Business solutions',
+                  url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco',
+                },
+                {
+                  title: 'Action guide',
+                  titleEnglish: 'Action guide',
+                  url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+      viewAll: {
+        title: 'View all items',
+        titleEnglish: 'View all items',
+        url: 'https://www.ibm.com/products?lnk=hpmps_buall',
+      },
+    },
+  },
+  {
+    title: 'Simple Megamenu (Heading 1)',
+    titleEnglish: 'Simple Megamenu (Heading 1)',
+    url: '',
+    submenu: {
+      sections: [
+        {
+          heading: {
+            title: 'Heading 1',
+            titleEnglish: 'Heading 1',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'Partner with us',
+                titleEnglish: 'Partners',
+                url: 'https://www.ibm.com/partners?lnk=hpmex_bupa',
+              },
+              links: [
+                {
+                  title: 'PartnerWorld',
+                  titleEnglish: 'Partner with us — PartnerWorld',
+                  url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa',
+                },
+                {
+                  title: 'Our strategic partnerships',
+                  titleEnglish: 'Our strategic partnerships',
+                  url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa',
+                },
+                {
+                  title: 'Flexible payment plans',
+                  titleEnglish: 'Flexible payment plans',
+                  url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'IBM Research',
+                titleEnglish: 'IBM Research',
+                url: 'https://research.ibm.com?lnk=hpmex_bure',
+              },
+              links: [
+                {
+                  title: 'Blog',
+                  titleEnglish: 'Blog',
+                  url: 'https://research.ibm.com/blog?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Publications',
+                  titleEnglish: 'Publications',
+                  url: 'https://research.ibm.com/publications?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Teams',
+                  titleEnglish: 'Teams',
+                  url: 'https://research.ibm.com/teams?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Collaborate with us',
+                  titleEnglish: 'Collaborate with us',
+                  url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'About IBM',
+                titleEnglish: 'About IBM',
+                url: 'https://www.ibm.com/about?lnk=hpmex_buab',
+              },
+              links: [
+                {
+                  title: 'Annual report',
+                  titleEnglish: 'Annual report',
+                  url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Career opportunities',
+                  titleEnglish: 'Career opportunities',
+                  url: 'https://www.ibm.com/employment/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Corporate social responsibility',
+                  titleEnglish: 'Corporate social responsibility',
+                  url: 'https://www.ibm.org?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Diversity & inclusion',
+                  titleEnglish: 'Diversity & inclusion',
+                  url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Industry analyst reports',
+                  titleEnglish: 'Industry analyst reports',
+                  url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Investor relations',
+                  titleEnglish: 'Investor relations',
+                  url: 'https://www.ibm.com/investor/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Licensing & compliance',
+                  titleEnglish: 'Licensing & compliance',
+                  url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'News & announcements',
+                  titleEnglish: 'News & announcements',
+                  url: 'https://newsroom.ibm.com?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Thought leadership',
+                  titleEnglish: 'Thought leadership',
+                  url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Security, privacy & trust',
+                  titleEnglish: 'Security, privacy & trust',
+                  url: 'https://www.ibm.com/trust?lnk=hpmex_buab',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'COVID-19',
+                titleEnglish: 'COVID-19',
+                url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
+              },
+              links: [
+                {
+                  title: 'Business solutions',
+                  titleEnglish: 'Business solutions',
+                  url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco',
+                },
+                {
+                  title: 'Action guide',
+                  titleEnglish: 'Action guide',
+                  url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    title: 'Simple Megamenu (Heading Descriptions)',
+    titleEnglish: 'Simple Megamenu (Heading Descriptions)',
+    url: '',
+    submenu: {
+      sections: [
+        {
+          groups: [
+            {
+              heading: {
+                title: 'Partner with us',
+                titleEnglish: 'Partners',
+                url: 'https://www.ibm.com/partners?lnk=hpmex_bupa',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'PartnerWorld',
+                  titleEnglish: 'Partner with us — PartnerWorld',
+                  url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa',
+                },
+                {
+                  title: 'Our strategic partnerships',
+                  titleEnglish: 'Our strategic partnerships',
+                  url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa',
+                },
+                {
+                  title: 'Flexible payment plans',
+                  titleEnglish: 'Flexible payment plans',
+                  url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'IBM Research',
+                titleEnglish: 'IBM Research',
+                url: 'https://research.ibm.com?lnk=hpmex_bure',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'Blog',
+                  titleEnglish: 'Blog',
+                  url: 'https://research.ibm.com/blog?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Publications',
+                  titleEnglish: 'Publications',
+                  url: 'https://research.ibm.com/publications?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Teams',
+                  titleEnglish: 'Teams',
+                  url: 'https://research.ibm.com/teams?lnk=hpmex_bure',
+                },
+                {
+                  title: 'Collaborate with us',
+                  titleEnglish: 'Collaborate with us',
+                  url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'About IBM',
+                titleEnglish: 'About IBM',
+                url: 'https://www.ibm.com/about?lnk=hpmex_buab',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'Annual report',
+                  titleEnglish: 'Annual report',
+                  url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Career opportunities',
+                  titleEnglish: 'Career opportunities',
+                  url: 'https://www.ibm.com/employment/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Corporate social responsibility',
+                  titleEnglish: 'Corporate social responsibility',
+                  url: 'https://www.ibm.org?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Diversity & inclusion',
+                  titleEnglish: 'Diversity & inclusion',
+                  url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Industry analyst reports',
+                  titleEnglish: 'Industry analyst reports',
+                  url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Investor relations',
+                  titleEnglish: 'Investor relations',
+                  url: 'https://www.ibm.com/investor/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Licensing & compliance',
+                  titleEnglish: 'Licensing & compliance',
+                  url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'News & announcements',
+                  titleEnglish: 'News & announcements',
+                  url: 'https://newsroom.ibm.com?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Thought leadership',
+                  titleEnglish: 'Thought leadership',
+                  url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab',
+                },
+                {
+                  title: 'Security, privacy & trust',
+                  titleEnglish: 'Security, privacy & trust',
+                  url: 'https://www.ibm.com/trust?lnk=hpmex_buab',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'COVID-19',
+                titleEnglish: 'COVID-19',
+                url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
+                description:
+                  'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+              },
+              links: [
+                {
+                  title: 'Business solutions',
+                  titleEnglish: 'Business solutions',
+                  url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco',
+                },
+                {
+                  title: 'Action guide',
+                  titleEnglish: 'Action guide',
+                  url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
+  },
+  {
+    title: 'Simple Megamenu (Link Descriptions)',
+    titleEnglish: 'Simple Megamenu (Link Descriptions)',
+    url: '',
+    submenu: {
+      sections: [
+        {
+          groups: [
+            {
+              heading: {
+                title: 'Partner with us',
+                titleEnglish: 'Partners',
+                url: 'https://www.ibm.com/partners?lnk=hpmex_bupa',
+              },
+              links: [
+                {
+                  title: 'PartnerWorld',
+                  titleEnglish: 'Partner with us — PartnerWorld',
+                  url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Our strategic partnerships',
+                  titleEnglish: 'Our strategic partnerships',
+                  url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Flexible payment plans',
+                  titleEnglish: 'Flexible payment plans',
+                  url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'IBM Research',
+                titleEnglish: 'IBM Research',
+                url: 'https://research.ibm.com?lnk=hpmex_bure',
+              },
+              links: [
+                {
+                  title: 'Blog',
+                  titleEnglish: 'Blog',
+                  url: 'https://research.ibm.com/blog?lnk=hpmex_bure',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Publications',
+                  titleEnglish: 'Publications',
+                  url: 'https://research.ibm.com/publications?lnk=hpmex_bure',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Teams',
+                  titleEnglish: 'Teams',
+                  url: 'https://research.ibm.com/teams?lnk=hpmex_bure',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Collaborate with us',
+                  titleEnglish: 'Collaborate with us',
+                  url: 'https://research.ibm.com/collaborate?lnk=hpmex_bure',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'About IBM',
+                titleEnglish: 'About IBM',
+                url: 'https://www.ibm.com/about?lnk=hpmex_buab',
+              },
+              links: [
+                {
+                  title: 'Annual report',
+                  titleEnglish: 'Annual report',
+                  url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Career opportunities',
+                  titleEnglish: 'Career opportunities',
+                  url: 'https://www.ibm.com/employment/?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Corporate social responsibility',
+                  titleEnglish: 'Corporate social responsibility',
+                  url: 'https://www.ibm.org?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Diversity & inclusion',
+                  titleEnglish: 'Diversity & inclusion',
+                  url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Industry analyst reports',
+                  titleEnglish: 'Industry analyst reports',
+                  url: 'https://www.ibm.com/reports/analyst/?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Investor relations',
+                  titleEnglish: 'Investor relations',
+                  url: 'https://www.ibm.com/investor/?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Licensing & compliance',
+                  titleEnglish: 'Licensing & compliance',
+                  url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'News & announcements',
+                  titleEnglish: 'News & announcements',
+                  url: 'https://newsroom.ibm.com?lnk=hpmex_buab',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'COVID-19',
+                titleEnglish: 'COVID-19',
+                url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
+              },
+              links: [
+                {
+                  title: 'Business solutions',
+                  titleEnglish: 'Business solutions',
+                  url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+                {
+                  title: 'Action guide',
+                  titleEnglish: 'Action guide',
+                  url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco',
+                  description:
+                    'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    },
   },
   {
-    title: 'Explore more',
-    titleEnglish: 'Explore more',
+    title: 'Simple Megamenu (Featured)',
+    titleEnglish: 'Simple Megamenu (Featured)',
     url: '',
-    hasMenu: true,
-    hasMegapanel: true,
-    menuSections: [
-      {
-        heading: '',
-        menuItems: [
-          {
-            title: 'Partners',
-            titleEnglish: 'Partners',
-            url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa&lnk2=link',
-            megapanelContent: {
-              headingTitle: 'Partners',
-              headingUrl:
-                'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa',
-              description: '',
-              quickLinks: {
-                title: '',
-                links: [
-                  {
-                    title: 'Partner with us (PartnerWorld)',
-                    titleEnglish: 'Partner with us (PartnerWorld)',
-                    url: 'https://www.ibm.com/partnerworld/public?lnk=hpmex_bupa&lnk2=learn',
-                  },
-                  {
-                    title: 'Our strategic partnerships',
-                    titleEnglish: 'Our strategic partnerships',
-                    url: 'https://www.ibm.com/alliances?lnk=hpmex_bupa&lnk2=learn',
-                  },
-                  {
-                    title: 'Payment plans for IBM Partners',
-                    titleEnglish: 'Payment plans for IBM Partners',
-                    url: 'https://www.ibm.com/partnerworld/financing?lnk=hpmex_bupa&lnk2=learn',
-                  },
-                ],
-              },
-              feature: {
-                heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/4075a8633a1137d/original/megamenu-pictogram-partners.png',
-                linkTitle: '',
-                linkUrl: '',
-              },
+    submenu: {
+      highlights: [
+        {
+          heading: {
+            title: 'Training',
+            titleEnglish: 'Training',
+            url: 'https://www.ibm.com/training/?lnk=hpmls_butr',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          links: [
+            {
+              title: 'Courses',
+              titleEnglish: 'Courses',
+              url: 'https://www.ibm.com/training/search?q=course&lnk=hpmls_butr',
+            },
+            {
+              title: 'Learning journeys',
+              titleEnglish: 'Learning journeys',
+              url: 'https://www.ibm.com/training/journeys?lnk=hpmls_butr',
+            },
+            {
+              title: 'Professional certifications',
+              titleEnglish: 'Professional certifications',
+              url: 'https://www.ibm.com/certify?lnk=hpmls_butr',
+            },
+            {
+              title: 'Digital learning subscriptions',
+              titleEnglish: 'Digital learning subscriptions',
+              url: 'https://www.ibm.com/training/subscriptions?lnk=hpmls_butr',
+            },
+          ],
+        },
+        {
+          heading: {
+            title: 'Community',
+            titleEnglish: 'Community',
+            url: '',
+            description: '',
+          },
+          links: [
+            {
+              title: 'IBM Developer',
+              titleEnglish: 'IBM Developer',
+              url: 'https://developer.ibm.com/?lnk=hpmls_buco',
+            },
+            {
+              title: 'IBM Community',
+              titleEnglish: 'IBM Community',
+              url: 'https://community.ibm.com/community/user/home?lnk=hpmls_buco',
+            },
+            {
+              title: 'Support forums',
+              titleEnglish: 'Support forums',
+              url: 'https://www.ibm.com/mysupport/s/forumshome?lnk=hpmls_buco',
             },
+          ],
+        },
+        {
+          heading: {
+            title: 'Resources',
+            titleEnglish: 'Resources',
+            url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure',
+            description: '',
           },
-          {
-            title: 'IBM Research',
-            titleEnglish: 'IBM Research',
-            url: 'https://www.research.ibm.com/?lnk=hpmex_bure&lnk2=link',
-            megapanelContent: {
-              headingTitle: 'IBM Research',
-              headingUrl: 'https://www.research.ibm.com/?lnk=hpmex_bure',
-              description: '',
-              quickLinks: {
-                title: '',
-                links: [
-                  {
-                    title: 'Research areas',
-                    titleEnglish: 'Research areas',
-                    url: 'https://www.research.ibm.com/?lnk=hpmex_bure&lnk2=learn',
-                  },
-                  {
-                    title: 'Researcher directory',
-                    titleEnglish: 'Researcher directory',
-                    url: 'https://researcher.watson.ibm.com/researcher/people.php?lnk=hpmex_bure&lnk2=learn',
-                  },
-                  {
-                    title: 'Patents',
-                    titleEnglish: 'Patents',
-                    url: 'https://www.research.ibm.com/patents/?lnk=hpmex_bure&lnk2=learn',
-                  },
-                  {
-                    title: 'Work with us',
-                    titleEnglish: 'Work with us',
-                    url: 'https://www.research.ibm.com/frontiers/?lnk=hpmex_bure&lnk2=learn',
-                  },
-                ],
+          links: [
+            {
+              title: 'Blogs & thought leadership',
+              titleEnglish: 'Blogs & thought leadership',
+              url: 'https://www.ibm.com/blogs/?lnk=hpmls_bure',
+            },
+            {
+              title: 'Case studies & client stories',
+              titleEnglish: 'Case studies & client stories',
+              url: 'https://www.ibm.com/case-studies?lnk=hpmls_bure',
+            },
+            {
+              title: 'Upcoming events & webinars',
+              titleEnglish: 'Upcoming events & webinars',
+              url: 'https://www.ibm.com/events?lnk=hpmls_bure',
+            },
+            {
+              title: 'IBM Institute for Business Value',
+              titleEnglish: 'IBM Institute for Business Value',
+              url: 'https://www.ibm.com/thought-leadership/institute-business-value?lnk=hpmls_bure',
+            },
+            {
+              title: 'Licensing & compliance',
+              titleEnglish: 'Licensing & compliance',
+              url: 'https://www.ibm.com/about/software-licensing/?lnk=hpmls_bure',
+            },
+          ],
+        },
+      ],
+      sections: [
+        {
+          heading: {
+            title: 'Heading',
+            titleEnglish: 'Heading',
+            url: 'https://www.example.com',
+            description:
+              'Description text lorem ipsum dolor sit amet commondo ligua eaget',
+          },
+          groups: [
+            {
+              heading: {
+                title: 'What is...',
+                titleEnglish: 'What is...',
+                url: 'https://www.ibm.com/cloud/learn?lnk=hpmls_buwi',
               },
-              feature: {
-                heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/5e05b0b234bc3846/original/megamenu-pictogram-ibm-research.png',
-                linkTitle: '',
-                linkUrl: '',
+              links: [
+                {
+                  title: 'Artificial intelligence',
+                  titleEnglish: 'Artificial intelligence',
+                  url: 'https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Automation',
+                  titleEnglish: 'Automation',
+                  url: 'https://www.ibm.com/topics/automation?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Blockchain',
+                  titleEnglish: 'Blockchain',
+                  url: 'https://www.ibm.com/topics/what-is-blockchain?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Business intelligence',
+                  titleEnglish: 'Business intelligence',
+                  url: 'https://www.ibm.com/topics/business-intelligence?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Chatbots',
+                  titleEnglish: 'Chatbots',
+                  url: 'https://www.ibm.com/cloud/learn/chatbots-explained?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Cloud computing',
+                  titleEnglish: 'Cloud computing',
+                  url: 'https://www.ibm.com/cloud/learn/cloud-computing?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Containerization',
+                  titleEnglish: 'Containerization',
+                  url: 'https://www.ibm.com/cloud/container-service?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Cybersecurity',
+                  titleEnglish: 'Cybersecurity',
+                  url: 'https://www.ibm.com/topics/cybersecurity?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Databases',
+                  titleEnglish: 'Databases',
+                  url: 'https://www.ibm.com/cloud/learn/database?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'DevOps',
+                  titleEnglish: 'DevOps',
+                  url: 'https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Hybrid Cloud',
+                  titleEnglish: 'Hybrid Cloud',
+                  url: 'https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Kubernetes',
+                  titleEnglish: 'Kubernetes',
+                  url: 'https://www.ibm.com/cloud/learn/kubernetes?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Quantum computing',
+                  titleEnglish: 'Quantum computing',
+                  url: 'https://www.ibm.com/quantum-computing/learn/what-is-quantum-computing?lnk=hpmls_buwi',
+                },
+                {
+                  title: 'Supply chain',
+                  titleEnglish: 'Supply chain',
+                  url: 'https://www.ibm.com/topics/supply-chain-management?lnk=hpmls_buwi',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'Developer education',
+                titleEnglish: 'Developer education',
+                url: 'https://developer.ibm.com/?lnk=hpmls_bude',
+                description: '',
               },
+              links: [
+                {
+                  title: 'Code patterns',
+                  titleEnglish: 'Code patterns',
+                  url: 'https://developer.ibm.com/patterns/?lnk=hpmls_bude',
+                },
+                {
+                  title: 'Developer community',
+                  titleEnglish: 'Developer community',
+                  url: 'https://developer.ibm.com/community/?lnk=hpmls_bude',
+                },
+                {
+                  title: 'Developer events',
+                  titleEnglish: 'Developer events',
+                  url: 'https://developer.ibm.com/events/?lnk=hpmls_bude',
+                },
+                {
+                  title: 'Open Source @ IBM',
+                  titleEnglish: 'Open Source @ IBM',
+                  url: 'https://ibm.com/opensource?lnk=hpmls_bude',
+                },
+                {
+                  title: 'Technical articles',
+                  titleEnglish: 'Technical articles',
+                  url: 'https://developer.ibm.com/articles?lnk=hpmls_bude',
+                },
+                {
+                  title: 'Tutorials',
+                  titleEnglish: 'Tutorials',
+                  url: 'https://developer.ibm.com/tutorials/?lnk=hpmls_bude',
+                },
+                {
+                  title: 'Videos',
+                  titleEnglish: 'Videos',
+                  url: 'https://developer.ibm.com/videos?lnk=hpmls_bude',
+                },
+                {
+                  title: 'View more Developer education',
+                  titleEnglish: 'View more Developer education',
+                  url: 'https://developer.ibm.com/?lnk=hpmls_bude',
+                },
+              ],
             },
-          },
-          {
-            title: 'About IBM',
-            titleEnglish: 'About IBM',
-            url: 'https://www.ibm.com/about?lnk=hpmex_buab',
-            megapanelContent: {
-              headingTitle: 'About IBM',
-              headingUrl: 'https://www.ibm.com/about?lnk=hpmex_buab',
-              description: '',
-              quickLinks: {
-                title: '',
-                links: [
-                  {
-                    title: 'Annual report',
-                    titleEnglish: 'Annual report',
-                    url: 'https://www.ibm.com/annualreport/?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'Career opportunities',
-                    titleEnglish: 'Career opportunities',
-                    url: 'https://www.ibm.com/employment/?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'Corporate social responsibility',
-                    titleEnglish: 'Corporate social responsibility',
-                    url: 'https://www.IBM.org?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'Diversity & inclusion',
-                    titleEnglish: 'Diversity & inclusion',
-                    url: 'https://www.ibm.com/employment/inclusion/?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'Investor relations',
-                    titleEnglish: 'Investor relations',
-                    url: 'https://www.ibm.com/investor/?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'News & announcements',
-                    titleEnglish: 'News & announcements',
-                    url: 'http://newsroom.ibm.com?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'Thought leadership',
-                    titleEnglish: 'Thought leadership',
-                    url: 'https://www.ibm.com/thought-leadership/?lnk=hpmex_buab&lnk2=learn',
-                  },
-                  {
-                    title: 'Security, privacy & trust',
-                    titleEnglish: 'Security, privacy & trust',
-                    url: 'https://www.ibm.com/trust?lnk=hpmex_buab&lnk2=learn',
-                  },
-                ],
+            {
+              heading: {
+                title: 'Documentation',
+                titleEnglish: 'Documentation',
+                url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc',
+                description: '',
               },
-              feature: {
-                heading: '',
-                imageUrl:
-                  'https://1.dam.s81c.com/m/220eb8ea8345a4d6/original/megamenu-pictogram-about-ibm.png',
-                linkTitle: '',
-                linkUrl: '',
+              links: [
+                {
+                  title: 'All product documentation',
+                  titleEnglish: 'All product documentation',
+                  url: 'https://www.ibm.com/docs/en?lnk=hpmls_budc',
+                },
+                {
+                  title: 'For products on IBM Cloud',
+                  titleEnglish: 'For products on IBM Cloud',
+                  url: 'https://cloud.ibm.com/docs?lnk=hpmls_budc',
+                },
+                {
+                  title: 'For use cases — IBM Redbooks',
+                  titleEnglish: 'For use cases — IBM Redbooks',
+                  url: 'https://www.redbooks.ibm.com/?lnk=hpmls_budc',
+                },
+              ],
+            },
+            {
+              heading: {
+                title: 'Support',
+                titleEnglish: 'Support',
+                url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu',
+                description: '',
               },
+              links: [
+                {
+                  title: 'Download fixes, updates & drivers',
+                  titleEnglish: 'Download fixes, updates & drivers',
+                  url: 'https://www.ibm.com/support/fixcentral/?lnk=hpmls_busu',
+                },
+                {
+                  title: 'Download licensed software - Passport Advantage',
+                  titleEnglish:
+                    'Download licensed software - Passport Advantage',
+                  url: 'https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=hpmls_busu',
+                },
+                {
+                  title: 'View your cases',
+                  titleEnglish: 'View your cases',
+                  url: 'https://www.ibm.com/mysupport/s/my-cases?lnk=hpmls_busu',
+                },
+                {
+                  title: 'Open a case',
+                  titleEnglish: 'Open a case',
+                  url: 'https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=hpmls_busu',
+                },
+                {
+                  title: 'View available support plans',
+                  titleEnglish: 'View available support plans',
+                  url: 'https://www.ibm.com/support/offerings?lnk=hpmls_busu',
+                },
+                {
+                  title: 'View more on Support',
+                  titleEnglish: 'View more on Support',
+                  url: 'https://www.ibm.com/mysupport?lnk=hpmls_busu&lnk2=all',
+                },
+              ],
             },
-          },
-          {
-            title: 'COVID-19',
-            titleEnglish: 'COVID-19',
-            url: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco&lnk2=link',
-            megapanelContent: {
-              headingTitle: 'COVID-19',
-              headingUrl: 'https://www.ibm.com/impact/covid-19?lnk=hpmex_buco',
-              description: '',
-              quickLinks: {
-                title: '',
-                links: [
-                  {
-                    title: 'Business solutions',
-                    titleEnglish: 'Business solutions',
-                    url: 'https://www.ibm.com/impact/covid-19/business-solutions?lnk=hpmex_buco&lnk2=learn',
-                  },
-                  {
-                    title: 'Action guide',
-                    titleEnglish: 'Action guide',
-                    url: 'https://www.ibm.com/thought-leadership/institute-business-value/report/covid-19-action-guide?lnk=hpmex_buco&lnk2=learn',
-                  },
-                  {
-                    title: 'News',
-                    titleEnglish: 'News',
-                    url: 'https://newsroom.ibm.com/COVID-19?lnk=hpmex_buco&lnk2=learn',
-                  },
-                ],
+            {
+              heading: {
+                title: 'Cloud platform support',
+                titleEnglish: 'Cloud platform support',
+                url: 'https://www.ibm.com/cloud/support?lnk=hpmls_bucl',
               },
-              feature: {
-                heading: '',
-                imageUrl: '',
-                linkTitle: '',
-                linkUrl: '',
+            },
+            {
+              heading: {
+                title: 'Newsletter subscriptions',
+                titleEnglish: 'Newsletter subscriptions',
+                url: 'https://www.ibm.com/subscribe/',
               },
             },
-          },
-        ],
+          ],
+        },
+      ],
+      viewAll: {
+        title: 'View all',
+        titleEnglish: 'View all',
+        url: 'https://www.example.com',
+      },
+    },
+  },
+  {
+    title: 'Basic Submenu',
+    titleEnglish: 'Simple Submenu',
+    url: '',
+    submenu: [
+      {
+        title: 'Subitem 1',
+        titleEnglish: 'Subitem 1',
+        url: 'https://www.example.com',
+      },
+      {
+        title: 'Subitem 2',
+        titleEnglish: 'Subitem 2',
+        url: 'https://www.example.com',
       },
     ],
   },
+  {
+    title: 'Basic Link',
+    titleEnglish: 'Demo Simple',
+    url: 'https://www.example.com',
+  },
 ];
 
 /**
@@ -2571,5 +6083,11 @@ const customLinks: MastheadLink[] = [
 
 /* eslint-enable max-len */
 
-export { mastheadLinks, customLinks, l1Data, logoData, mastheadL1Data };
+export {
+  mastheadLinks,
+  customLinks,
+  logoData,
+  mastheadL1Data,
+  mastheadLinksV2,
+};
 export default mastheadLinks;
diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx b/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx
index d299c21fa6c..90f647f3500 100644
--- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx
+++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.react.tsx
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -12,9 +12,9 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
+import C4DMastheadContainer from '@carbon/ibmdotcom-web-components/es/components-react/masthead/masthead-container';
 import { mastheadL1Data, logoData } from './links';
-import { DDS_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags';
+import { C4D_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags';
 import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
 
 import readme from './README.stories.react.mdx';
@@ -85,37 +85,37 @@ export const Default = (args) => {
   if (!hasSearch) {
     setTimeout(() => {
       document
-        .querySelector('dds-masthead-container')
+        .querySelector('cds-masthead-container')
         ?.removeAttribute('has-search');
     }, 1000);
   }
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       selected-menu-item={selectedMenuItem}
       user-status={userStatus}
       searchPlaceholder={searchPlaceholder}
       navLinks={navLinks}
       has-profile={hasProfile}
       has-search={hasSearch}
-      custom-profile-login={customProfileLogin}></DDSMastheadContainer>
+      custom-profile-login={customProfileLogin}></C4DMastheadContainer>
   );
 };
 
 export const WithCustomTypeahead = () => {
   document.documentElement.addEventListener(
-    'dds-search-with-typeahead-input',
+    'cds-search-with-typeahead-input',
     async (e) => {
       const results = await customTypeaheadApiFunction(
         (e as CustomEvent).detail.value
       );
       document.dispatchEvent(
-        new CustomEvent('dds-custom-typeahead-api-results', { detail: results })
+        new CustomEvent('cds-custom-typeahead-api-results', { detail: results })
       );
     }
   );
 
   return (
-    <DDSMastheadContainer custom-typeahead-api={true}></DDSMastheadContainer>
+    <C4DMastheadContainer custom-typeahead-api={true}></C4DMastheadContainer>
   );
 };
 
@@ -132,9 +132,9 @@ export const searchOpenOnload = (args) => {
   const { searchPlaceholder } = args?.MastheadComposite ?? {};
 
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       activate-search="true"
-      searchPlaceholder={searchPlaceholder}></DDSMastheadContainer>
+      searchPlaceholder={searchPlaceholder}></C4DMastheadContainer>
   );
 };
 
@@ -156,9 +156,9 @@ export const withPlatform = (args) => {
   const { platform, platformUrl } = args?.WithPlatform ?? {};
 
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       platform={platform}
-      platformUrl={platformUrl}></DDSMastheadContainer>
+      platformUrl={platformUrl}></C4DMastheadContainer>
   );
 };
 
@@ -181,9 +181,9 @@ withPlatform.story = {
 export const withL1 = (args) => {
   const { selectedMenuItem } = args?.MastheadComposite ?? {};
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       selected-menu-item={selectedMenuItem}
-      l1Data={mastheadL1Data}></DDSMastheadContainer>
+      l1Data={mastheadL1Data}></C4DMastheadContainer>
   );
 };
 
@@ -205,10 +205,10 @@ export const withAlternateLogoAndTooltip = (args) => {
   const { mastheadLogo } = args?.MastheadComposite ?? {};
 
   return (
-    <DDSMastheadContainer
+    <C4DMastheadContainer
       logoData={
         mastheadLogo === 'alternateWithTooltip' ? logoData : null
-      }></DDSMastheadContainer>
+      }></C4DMastheadContainer>
   );
 };
 
@@ -232,8 +232,8 @@ withAlternateLogoAndTooltip.story = {
 
 export const WithScopedSearch = () => {
   return (
-    <DDSMastheadContainer
-      scopeParameters={scopeParameters}></DDSMastheadContainer>
+    <C4DMastheadContainer
+      scopeParameters={scopeParameters}></C4DMastheadContainer>
   );
 };
 
@@ -282,7 +282,7 @@ export default {
           userStatuses.unauthenticated
         ),
         customProfileLogin:
-          DDS_CUSTOM_PROFILE_LOGIN &&
+          C4D_CUSTOM_PROFILE_LOGIN &&
           textNullable(
             'custom profile login url (customProfileLogin)',
             'https://www.example.com/'
diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.scss b/packages/web-components/src/components/masthead/__stories__/masthead.stories.scss
index 9b54ebe817e..40f29e58f8b 100644
--- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.scss
+++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.scss
@@ -5,27 +5,19 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
-@import 'carbon-components/scss/components/ui-shell/functions';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/spacing' as *;
 
-.dds-ce-demo-devenv--container {
-  padding-top: calc(#{mini-units(6)} + 3rem + 1px);
-
-  // Ref: https://github.com/carbon-design-system/carbon/blob/v10.10.0/packages/components/src/components/ui-shell/_side-nav.scss#L82
-  will-change: margin-left;
-  transition: margin-left 0.11s cubic-bezier(0.2, 0, 1, 0.9);
-}
-
-@include carbon--breakpoint-down(lg) {
-  .bx--offset-lg-3 {
+@include breakpoint-down(lg) {
+  .cds--offset-lg-3 {
     margin-left: 0;
   }
 }
 
-.bx--content {
-  padding: 6rem 0 2rem;
+.cds--content {
+  padding: $spacing-12 0 $spacing-07;
 
-  @include carbon--breakpoint-down(lg) {
+  @include breakpoint-down(lg) {
     padding-top: 0;
   }
 
@@ -34,16 +26,16 @@
   }
 
   &.has-l1 {
-    @include carbon--breakpoint-down(lg) {
-      padding-top: 3rem;
+    @include breakpoint-down(lg) {
+      padding-top: $spacing-09;
     }
   }
 
   &.has-leadspace.has-l1 {
-    padding-top: 3rem;
+    padding-top: $spacing-09;
   }
 
-  &.dds-ce-demo-devenv--ui-shell-content {
+  &.cds-ce-demo-devenv--ui-shell-content {
     h2 {
       margin: 30px 0;
 
diff --git a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts
index 8a1aa94b1a9..f1bd3502861 100644
--- a/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts
+++ b/packages/web-components/src/components/masthead/__stories__/masthead.stories.ts
@@ -7,22 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import { select } from '@storybook/addon-knobs';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import inPercy from '@percy-io/in-percy';
+import { html } from 'lit';
+import { select, boolean } from '@storybook/addon-knobs';
+import on from '../../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import ifNonEmpty from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js';
 import textNullable from '../../../../.storybook/knob-text-nullable';
-import DDSLeftNav from '../left-nav';
+import c4dLeftNav from '../left-nav';
 import '../masthead-container';
 import styles from './masthead.stories.scss';
-import { mastheadLinks as links, mastheadL1Data, logoData } from './links';
-import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { mastheadLinksV2 as links, mastheadL1Data, logoData } from './links';
+import {
+  UNAUTHENTICATED_STATUS,
+  MASTHEAD_AUTH_METHOD,
+} from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
 import {
   authenticatedProfileItems,
   unauthenticatedProfileItems,
 } from './profile-items';
-import { DDS_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags';
+import { C4D_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags';
 import readme from './README.stories.mdx';
 
 const userStatuses = {
@@ -59,6 +62,12 @@ const scopeParameters = [
   },
 ];
 
+const dataEndpoints = {
+  cloud: '/common/carbon-for-ibm-dotcom/translations/cloud-masthead',
+  v2: '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2',
+  'v2.1': '/common/carbon-for-ibm-dotcom/translations/masthead-footer/v2.1',
+};
+
 async function customTypeaheadApiFunction(searchVal) {
   return fetch(
     `https://ibm.com/docs/api/v1/suggest?query=${searchVal}&lang=undefined&categories=&limit=6`
@@ -81,52 +90,105 @@ export const Default = (args) => {
     customProfileLogin,
     hasProfile,
     hasSearch,
+    hasContact,
     selectedMenuItem,
     searchPlaceholder,
     userStatus,
+    authMethod,
+    useMock,
   } = args?.MastheadComposite ?? {};
-  const { useMock } = args?.Other ?? {};
   return html`
     <style>
       ${styles}
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+          <c4d-masthead-composite
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
             has-profile="${hasProfile}"
             has-search="${hasSearch}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            has-contact="${hasContact}"
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
               unauthenticatedProfileItems
             )}"
-            custom-profile-login="${customProfileLogin}"></dds-masthead-composite>
+            custom-profile-login="${customProfileLogin}"
+            auth-method="${MASTHEAD_AUTH_METHOD.DEFAULT}"></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
+            selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
+            user-status="${ifNonEmpty(userStatus)}"
+            searchPlaceholder="${ifNonEmpty(searchPlaceholder)}"
             has-profile="${hasProfile}"
             has-search="${hasSearch}"
-            custom-profile-login="${customProfileLogin}"></dds-masthead-container>
+            has-contact="${hasContact}"
+            custom-profile-login="${customProfileLogin}"
+            auth-method="${authMethod}"></c4d-masthead-container>
+        `}
+  `;
+};
+
+export const withCloudData = (args) => {
+  const {
+    customProfileLogin,
+    hasSearch,
+    selectedMenuItem,
+    searchPlaceholder,
+    useMock,
+  } = args?.MastheadComposite ?? {};
+
+  return html`
+    <style>
+      ${styles}
+    </style>
+    ${useMock
+      ? html`
+          <c4d-masthead-composite
+            platform="Cloud"
+            .platformUrl="https://www.ibm.com/cloud"
+            selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
+            searchPlaceholder="${ifNonEmpty(searchPlaceholder)}"
+            has-search="${hasSearch}"
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
+            custom-profile-login="${customProfileLogin}"
+            auth-method="${MASTHEAD_AUTH_METHOD.COOKIE}"></c4d-masthead-composite>
+        `
+      : html`
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['cloud']}"
+            platform="Cloud"
+            .platformUrl="https://www.ibm.com/cloud"
+            selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
+            searchPlaceholder="${ifNonEmpty(searchPlaceholder)}"
+            has-search="${hasSearch}"
+            custom-profile-login="${customProfileLogin}"
+            auth-method="${MASTHEAD_AUTH_METHOD.COOKIE}"></c4d-masthead-container>
         `}
   `;
 };
 
 export const WithCustomTypeahead = (args) => {
-  const { useMock } = args?.Other ?? {};
+  const { useMock } = args?.MastheadComposite ?? {};
 
   document.documentElement.addEventListener(
-    'dds-search-with-typeahead-input',
+    'c4d-search-with-typeahead-input',
     async (e) => {
       const results = await customTypeaheadApiFunction(
         (e as CustomEvent).detail.value
       );
       document.dispatchEvent(
-        new CustomEvent('dds-custom-typeahead-api-results', { detail: results })
+        new CustomEvent('c4d-custom-typeahead-api-results', { detail: results })
       );
     }
   );
@@ -137,12 +199,20 @@ export const WithCustomTypeahead = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
-            ?custom-typeahead-api=${true}></dds-masthead-composite>
+          <c4d-masthead-composite
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
+            ?custom-typeahead-api=${true}></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
-            ?custom-typeahead-api=${true}></dds-masthead-container>
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
+            ?custom-typeahead-api=${true}></c4d-masthead-container>
         `}
   `;
 };
@@ -168,26 +238,33 @@ WithCustomTypeahead.story = {
 };
 
 export const searchOpenOnload = (args) => {
-  const { searchPlaceholder } = args?.MastheadComposite ?? {};
-  const { useMock } = args?.Other ?? {};
+  const { searchPlaceholder, useMock } = args?.MastheadComposite ?? {};
   return html`
     <style>
       ${styles}
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
+          <c4d-masthead-composite
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
             activate-search="true"
-            searchPlaceholder="${ifNonNull(
+            searchPlaceholder="${ifDefined(
               searchPlaceholder
-            )}"></dds-masthead-composite>
+            )}"></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
             activate-search="true"
-            searchPlaceholder="${ifNonNull(
+            searchPlaceholder="${ifDefined(
               searchPlaceholder
-            )}"></dds-masthead-container>
+            )}"></c4d-masthead-container>
         `}
   `;
 };
@@ -207,22 +284,29 @@ searchOpenOnload.story = {
 };
 
 export const withPlatform = (args) => {
-  const { platform, platformUrl } = args?.WithPlatform ?? {};
-  const { useMock } = args?.Other ?? {};
+  const { platform, platformUrl, useMock } = args?.WithPlatform ?? {};
   return html`
     <style>
       ${styles}
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
-            platform="${ifNonNull(platform)}"
-            .platformUrl="${ifNonNull(platformUrl)}"></dds-masthead-composite>
+          <c4d-masthead-composite
+            platform="${ifNonEmpty(platform)}"
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
+            .platformUrl="${ifNonEmpty(platformUrl)}"></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
-            platform="${ifNonNull(platform)}"
-            .platformUrl="${ifNonNull(platformUrl)}"></dds-masthead-container>
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
+            platform="${ifNonEmpty(platform)}"
+            .platformUrl="${ifNonEmpty(platformUrl)}"></c4d-masthead-container>
         `}
   `;
 };
@@ -238,11 +322,13 @@ withPlatform.story = {
           'platform url (platformUrl)',
           'https://www.ibm.com'
         ),
+        useMock: boolean('use mock nav data (use-mock)', false),
       }),
     },
     propsSet: {
       default: {
         MastheadComposite: {
+          platform: 'Platform',
           hasProfile: 'true',
           hasSearch: 'true',
           searchPlaceHolder: 'Search all of IBM',
@@ -255,26 +341,36 @@ withPlatform.story = {
 };
 
 export const withL1 = (args) => {
-  const { selectedMenuItem } = args?.MastheadComposite ?? {};
-  const { useMock } = args?.Other ?? {};
+  const { selectedMenuItem, selectedMenuItemL1, useMock } =
+    args?.MastheadComposite ?? {};
   return html`
     <style>
       ${styles}
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
+          <c4d-masthead-composite
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
             .l1Data="${mastheadL1Data}"
-            selected-menu-item="${ifNonNull(
-              selectedMenuItem
-            )}"></dds-masthead-composite>
+            selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
+            selected-menu-item-l1="${ifNonEmpty(
+              selectedMenuItemL1
+            )}"></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
             .l1Data="${mastheadL1Data}"
-            selected-menu-item="${ifNonNull(
-              selectedMenuItem
-            )}"></dds-masthead-container>
+            selected-menu-item="${ifNonEmpty(selectedMenuItem)}"
+            selected-menu-item-l1="${ifNonEmpty(
+              selectedMenuItemL1
+            )}"></c4d-masthead-container>
         `}
   `;
 };
@@ -285,9 +381,14 @@ withL1.story = {
     knobs: {
       MastheadComposite: () => ({
         selectedMenuItem: textNullable(
-          'selected menu item (selected-menu-item)',
-          'Products'
+          'selected menu item in L0 (selected-menu-item)',
+          'Consulting'
+        ),
+        selectedMenuItemL1: textNullable(
+          'selected menu item in L1 (selected-menu-item-l1)',
+          ''
         ),
+        useMock: boolean('use mock nav data (use-mock)', false),
       }),
     },
     propsSet: {
@@ -305,24 +406,31 @@ withL1.story = {
 };
 
 export const withAlternateLogoAndTooltip = (args) => {
-  const { mastheadLogo } = args?.MastheadComposite ?? {};
-  const { useMock } = args?.Other ?? {};
+  const { mastheadLogo, useMock } = args?.MastheadComposite ?? {};
   return html`
     <style>
       ${styles}
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
+          <c4d-masthead-composite
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
             .logoData="${mastheadLogo === 'alternateWithTooltip'
               ? logoData
-              : null}"></dds-masthead-composite>
+              : null}"></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
             .logoData="${mastheadLogo === 'alternateWithTooltip'
               ? logoData
-              : null}"></dds-masthead-container>
+              : null}"></c4d-masthead-container>
         `}
   `;
 };
@@ -357,21 +465,28 @@ withAlternateLogoAndTooltip.story = {
   },
 };
 
-export const WithScopedSearch = ({ parameters }) => {
-  const { useMock } = parameters?.props?.Other ?? {};
-
+export const WithScopedSearch = (args) => {
+  const { useMock } = args?.MastheadComposite ?? {};
   return html`
     <style>
       ${styles}
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
-            .scopeParameters=${scopeParameters}></dds-masthead-composite>
+          <c4d-masthead-composite
+            .navLinks="${links}"
+            .authenticatedProfileItems="${ifNonEmpty(
+              authenticatedProfileItems
+            )}"
+            .unauthenticatedProfileItems="${ifNonEmpty(
+              unauthenticatedProfileItems
+            )}"
+            .scopeParameters=${scopeParameters}></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
-            .scopeParameters=${scopeParameters}></dds-masthead-container>
+          <c4d-masthead-container
+            data-endpoint="${dataEndpoints['v2.1']}"
+            .scopeParameters=${scopeParameters}></c4d-masthead-container>
         `}
   `;
 };
@@ -402,13 +517,31 @@ export default {
     (story) => {
       if (!(window as any)._hPageShow) {
         (window as any)._hPageShow = on(window, 'pageshow', () => {
-          const leftNav = document.querySelector('dds-left-nav');
+          const leftNav = document.querySelector('c4d-left-nav');
           if (leftNav) {
-            (leftNav as DDSLeftNav).expanded = false;
+            (leftNav as c4dLeftNav).expanded = false;
           }
         });
       }
-      return story();
+      return html`
+        ${story()}
+        <script>
+          window.digitalData.page.pageInfo.ibm.contactModuleConfiguration = {
+            contactInformationBundleKey: {
+              focusArea: 'Cloud - Automation - All',
+              languageCode: 'en',
+              regionCode: 'US',
+            },
+            contactModuleTranslationKey: {
+              languageCode: 'en',
+              regionCode: 'US',
+            },
+          };
+        </script>
+        <script
+          src="//www.ibm.com/common/digitaladvisor/cm-app/latest/cm-app.min.js"
+          defer></script>
+      `;
     },
   ],
   parameters: {
@@ -416,6 +549,7 @@ export default {
     knobs: {
       escapeHTML: false,
       MastheadComposite: () => ({
+        platform: textNullable('platform name (platform)', ''),
         hasProfile: select(
           'show the profile functionality (has-profile)',
           ['true', 'false'],
@@ -426,13 +560,18 @@ export default {
           ['true', 'false'],
           'true'
         ),
+        hasContact: select(
+          'Contact us button visibility (has-contact)',
+          ['true', 'false'],
+          'true'
+        ),
         searchPlaceholder: textNullable(
           'search placeholder (searchPlaceholder)',
           'Search all of IBM'
         ),
         selectedMenuItem: textNullable(
           'selected menu item (selected-menu-item)',
-          'Consulting & Services'
+          'Consulting'
         ),
         userStatus: select(
           'The user authenticated status (user-status)',
@@ -440,26 +579,14 @@ export default {
           userStatuses.unauthenticated
         ),
         customProfileLogin:
-          DDS_CUSTOM_PROFILE_LOGIN &&
+          C4D_CUSTOM_PROFILE_LOGIN &&
           textNullable(
             'custom profile login url (customProfileLogin)',
             'https://www.example.com/'
           ),
+        useMock: boolean('use mock nav data (use-mock)', false),
       }),
     },
-    props: (() => {
-      // Lets `<dds-masthead-container>` load the nav links
-      const useMock =
-        inPercy() || new URLSearchParams(window.location.search).has('mock');
-      return {
-        MastheadComposite: {
-          navLinks: !useMock ? undefined : links,
-        },
-        Other: {
-          useMock,
-        },
-      };
-    })(),
     propsSet: {
       default: {
         MastheadComposite: {
@@ -470,7 +597,7 @@ export default {
           selectedMenuItem: 'Services & Consulting',
           userStatus: userStatuses.unauthenticated,
           customProfileLogin: 'https://www.example.com/',
-          navLinks: links,
+          useMockData: false,
         },
       },
     },
diff --git a/packages/web-components/src/components/masthead/__stories__/profile-items.ts b/packages/web-components/src/components/masthead/__stories__/profile-items.ts
index 90799143079..dcca0efdc56 100644
--- a/packages/web-components/src/components/masthead/__stories__/profile-items.ts
+++ b/packages/web-components/src/components/masthead/__stories__/profile-items.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -42,6 +42,11 @@ export const authenticatedProfileItems: MastheadProfileItem[] = [
  * The default nav items for unauthenticated state.
  */
 export const unauthenticatedProfileItems: MastheadProfileItem[] = [
+  {
+    id: 'myibm',
+    title: 'My IBM',
+    url: 'https://myibm.ibm.com/?lnk=mmi',
+  },
   {
     id: 'signin',
     title: 'Log in',
diff --git a/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts b/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts
index a37595f02a2..1994f060b52 100644
--- a/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts
+++ b/packages/web-components/src/components/masthead/__stories__/scoped-search-masthead.stories.ts
@@ -7,13 +7,13 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { boolean, select } from '@storybook/addon-knobs';
-import on from 'carbon-components/es/globals/js/misc/on.js';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import on from '../../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import inPercy from '@percy-io/in-percy';
 import textNullable from '../../../../.storybook/knob-text-nullable';
-import DDSLeftNav from '../left-nav';
+import c4dLeftNav from '../left-nav';
 import '../masthead-container';
 import styles from './masthead.stories.scss';
 import { mastheadLinks as links } from './links';
@@ -22,7 +22,7 @@ import {
   authenticatedProfileItems,
   unauthenticatedProfileItems,
 } from './profile-items';
-import { DDS_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags';
+import { C4D_CUSTOM_PROFILE_LOGIN } from '../../../globals/internal/feature-flags';
 import readme from './README.stories.mdx';
 
 const userStatuses = {
@@ -76,34 +76,34 @@ export const Default = (args) => {
     </style>
     ${useMock
       ? html`
-          <dds-masthead-composite
-            platform="${ifNonNull(platform)}"
-            .platformUrl="${ifNonNull(platformData.url)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-            .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+          <c4d-masthead-composite
+            platform="${ifDefined(platform)}"
+            .platformUrl="${ifDefined(platformData.url)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
+            .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             .navLinks="${navLinks}"
-            .unauthenticatedProfileItems="${ifNonNull(
+            .unauthenticatedProfileItems="${ifDefined(
               unauthenticatedProfileItems
             )}"
             custom-profile-login="${customProfileLogin}"
-            .scopeParameters=${scopeParameters}></dds-masthead-composite>
+            .scopeParameters=${scopeParameters}></c4d-masthead-composite>
         `
       : html`
-          <dds-masthead-container
-            platform="${ifNonNull(platform)}"
-            .platformUrl="${ifNonNull(platformData.url)}"
-            selected-menu-item="${ifNonNull(selectedMenuItem)}"
-            user-status="${ifNonNull(userStatus)}"
-            searchPlaceholder="${ifNonNull(searchPlaceholder)}"
+          <c4d-masthead-container
+            platform="${ifDefined(platform)}"
+            .platformUrl="${ifDefined(platformData.url)}"
+            selected-menu-item="${ifDefined(selectedMenuItem)}"
+            user-status="${ifDefined(userStatus)}"
+            searchPlaceholder="${ifDefined(searchPlaceholder)}"
             .navLinks="${navLinks}"
             ?has-profile="${hasProfile}"
             ?has-search="${hasSearch}"
             custom-profile-login="${customProfileLogin}"
-            .scopeParameters=${scopeParameters}></dds-masthead-container>
+            .scopeParameters=${scopeParameters}></c4d-masthead-container>
         `}
   `;
 };
@@ -114,9 +114,9 @@ export default {
     (story) => {
       if (!(window as any)._hPageShow) {
         (window as any)._hPageShow = on(window, 'pageshow', () => {
-          const leftNav = document.querySelector('dds-left-nav');
+          const leftNav = document.querySelector('c4d-left-nav');
           if (leftNav) {
-            (leftNav as DDSLeftNav).expanded = false;
+            (leftNav as c4dLeftNav).expanded = false;
           }
         });
       }
@@ -151,7 +151,7 @@ export default {
           userStatuses.unauthenticated
         ),
         customProfileLogin:
-          DDS_CUSTOM_PROFILE_LOGIN &&
+          C4D_CUSTOM_PROFILE_LOGIN &&
           textNullable(
             'custom profile login url (customProfileLogin)',
             'https://www.example.com/'
@@ -159,7 +159,7 @@ export default {
       }),
     },
     props: (() => {
-      // Lets `<dds-masthead-container>` load the nav links
+      // Lets `<c4d-masthead-container>` load the nav links
       const useMock =
         inPercy() || new URLSearchParams(window.location.search).has('mock');
       return {
diff --git a/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts b/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts
index 8706fa36c46..4484b8b5a4c 100644
--- a/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/cloud-masthead-composite.test.ts
@@ -1,47 +1,51 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 
-describe('dds-cloud-masthead-composite', function () {
+describe('c4d-cloud-masthead-composite', function () {
   describe('Rendering Cloud-specific global bar', function () {
     it('should not render cloud profile when unauthenticated', async function () {
       render(
         html`
-          <dds-cloud-masthead-composite
-            user-status="anonymous"></dds-cloud-masthead-composite>
+          <c4d-cloud-masthead-composite
+            user-status="anonymous"></c4d-cloud-masthead-composite>
         `,
         document.body
       );
       await Promise.resolve();
       const cloudMastheadComposite = document.body.querySelector(
-        'dds-cloud-masthead-composite'
+        'c4d-cloud-masthead-composite'
       );
       expect(
-        cloudMastheadComposite!.querySelector('dds-cloud-masthead-profile')
+        cloudMastheadComposite?.shadowRoot?.querySelector(
+          'c4d-cloud-masthead-profile'
+        )
       ).toBeNull();
     });
 
     it('should render cloud profile when authenticated', async function () {
       render(
         html`
-          <dds-cloud-masthead-composite
-            user-status="authenticated"></dds-cloud-masthead-composite>
+          <c4d-cloud-masthead-composite
+            user-status="authenticated"></c4d-cloud-masthead-composite>
         `,
         document.body
       );
       await Promise.resolve();
       const cloudMastheadComposite = document.body.querySelector(
-        'dds-cloud-masthead-composite'
+        'c4d-cloud-masthead-composite'
       );
       expect(
-        cloudMastheadComposite!.querySelector('dds-cloud-masthead-profile')
+        cloudMastheadComposite?.shadowRoot?.querySelector(
+          'c4d-cloud-masthead-profile'
+        )
       ).not.toBeNull();
     });
   });
diff --git a/packages/web-components/src/components/masthead/__tests__/left-nav-menu.test.ts b/packages/web-components/src/components/masthead/__tests__/left-nav-menu.test.ts
index 642a5538a7d..95e7f887e0a 100644
--- a/packages/web-components/src/components/masthead/__tests__/left-nav-menu.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/left-nav-menu.test.ts
@@ -7,27 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../left-nav-menu';
 
 const template = (props?) => {
   const { backButtonText, expanded, title } = props ?? {};
   return html`
-    <dds-left-nav-menu
-      back-button-text="${ifNonNull(backButtonText)}"
+    <c4d-left-nav-menu
+      back-button-text="${ifDefined(backButtonText)}"
       ?expanded="${expanded}"
-      title="${ifNonNull(title)}">
-    </dds-left-nav-menu>
+      title="${ifDefined(title)}">
+    </c4d-left-nav-menu>
   `;
 };
 
-describe('dds-left-nav-menu', function () {
+describe('c4d-left-nav-menu', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      const leftNavMenu = document.body.querySelector('dds-left-nav-menu');
+      const leftNavMenu = document.body.querySelector('c4d-left-nav-menu');
       expect(leftNavMenu).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -41,7 +41,7 @@ describe('dds-left-nav-menu', function () {
         document.body
       );
       await Promise.resolve();
-      const leftNavMenu = document.body.querySelector('dds-left-nav-menu');
+      const leftNavMenu = document.body.querySelector('c4d-left-nav-menu');
       expect(leftNavMenu).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/masthead/__tests__/left-nav.test.ts b/packages/web-components/src/components/masthead/__tests__/left-nav.test.ts
index 4c1ab712b6d..bfba0abacfe 100644
--- a/packages/web-components/src/components/masthead/__tests__/left-nav.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/left-nav.test.ts
@@ -7,23 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { SIDE_NAV_USAGE_MODE } from '../../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav.js';
 import '../left-nav';
-import DDSLeftNavOverlay from '../left-nav-overlay';
+import C4DLeftNavOverlay from '../left-nav-overlay';
 
 const template = (props?) => {
   const { expanded, usageMode } = props ?? {};
   return html`
-    <dds-left-nav
+    <c4d-left-nav
       ?expanded="${expanded}"
-      usage-mode="${ifNonNull(usageMode)}"></dds-left-nav>
-    <dds-left-nav-overlay></dds-left-nav-overlay>
+      usage-mode="${ifDefined(usageMode)}"></c4d-left-nav>
+    <c4d-left-nav-overlay></c4d-left-nav-overlay>
   `;
 };
 
-describe('dds-left-nav', function () {
+describe('c4d-left-nav', function () {
   describe('Toggling', function () {
     it('should hide the overlay if not expanded', async function () {
       render(template(), document.body);
@@ -31,8 +31,8 @@ describe('dds-left-nav', function () {
       expect(
         (
           document.body.querySelector(
-            'dds-left-nav-overlay'
-          ) as DDSLeftNavOverlay
+            'c4d-left-nav-overlay'
+          ) as C4DLeftNavOverlay
         ).active
       ).toBe(false);
     });
@@ -43,8 +43,8 @@ describe('dds-left-nav', function () {
       expect(
         (
           document.body.querySelector(
-            'dds-left-nav-overlay'
-          ) as DDSLeftNavOverlay
+            'c4d-left-nav-overlay'
+          ) as C4DLeftNavOverlay
         ).active
       ).toBe(true);
     });
@@ -58,7 +58,7 @@ describe('dds-left-nav', function () {
       await Promise.resolve();
       // eslint-disable-next-line no-console
       expect(console.warn).toHaveBeenCalledWith(
-        'dds-left-nav supports only `header-nav` for its `usage-mode` attribute or `usageMode` property. The value is ignored:',
+        'c4d-left-nav supports only `header-nav` for its `usage-mode` attribute or `usageMode` property. The value is ignored:',
         SIDE_NAV_USAGE_MODE.REGULAR
       );
     });
diff --git a/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts b/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts
index 97401711a2f..5e260271550 100644
--- a/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/masthead-composite.test.ts
@@ -7,11 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import EventManager from '../../../../tests/utils/event-manager';
-import { MastheadLink } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d';
-import DDSMastheadComposite from '../masthead-composite';
+import C4DMastheadComposite from '../masthead-composite';
 import {
   authenticatedProfileItems,
   unauthenticatedProfileItems,
@@ -20,37 +19,17 @@ import {
 const template = (props?) => {
   const { language, userStatus, navLinks } = props ?? {};
   return html`
-    <dds-masthead-composite
-      language="${ifNonNull(language)}"
-      user-status="${ifNonNull(userStatus)}"
-      .authenticatedProfileItems="${ifNonNull(authenticatedProfileItems)}"
+    <c4d-masthead-composite
+      language="${ifDefined(language)}"
+      user-status="${ifDefined(userStatus)}"
+      .authenticatedProfileItems="${ifDefined(authenticatedProfileItems)}"
       .navLinks="${navLinks}"
-      .unauthenticatedProfileItems="${ifNonNull(unauthenticatedProfileItems)}">
-    </dds-masthead-composite>
+      .unauthenticatedProfileItems="${ifDefined(unauthenticatedProfileItems)}">
+    </c4d-masthead-composite>
   `;
 };
 
-const navLinksFoo: MastheadLink[] = [
-  {
-    title: 'item-title-foo',
-    url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/foo',
-  },
-  {
-    title: 'menu-title-foo',
-    menuSections: [
-      {
-        menuItems: [
-          {
-            title: 'menu-item-title-bar',
-            url: 'https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar',
-          },
-        ],
-      },
-    ],
-  },
-];
-
-describe('dds-masthead-composite', function () {
+describe('cds-masthead-composite', function () {
   const events = new EventManager();
 
   describe('Rendering global bar', function () {
@@ -58,10 +37,10 @@ describe('dds-masthead-composite', function () {
       render(template(), document.body);
       await Promise.resolve();
       const mastheadComposite = document.body.querySelector(
-        'dds-masthead-composite'
+        'c4d-masthead-composite'
       );
       expect(
-        mastheadComposite!.querySelector('dds-masthead-global-bar')
+        mastheadComposite?.shadowRoot?.querySelector('c4d-masthead-global-bar')
       ).toMatchSnapshot();
     });
 
@@ -69,10 +48,10 @@ describe('dds-masthead-composite', function () {
       render(template({ userStatus: 'test.user@ibm.com' }), document.body);
       await Promise.resolve();
       const mastheadComposite = document.body.querySelector(
-        'dds-masthead-composite'
+        'c4d-masthead-composite'
       );
       expect(
-        mastheadComposite!.querySelector('dds-masthead-global-bar')
+        mastheadComposite?.shadowRoot?.querySelector('c4d-masthead-global-bar')
       ).toMatchSnapshot();
     });
   });
@@ -82,45 +61,22 @@ describe('dds-masthead-composite', function () {
       render(template(), document.body);
       await Promise.resolve();
       const mastheadComposite = document.body.querySelector(
-        'dds-masthead-composite'
+        'c4d-masthead-composite'
       );
-      expect(mastheadComposite!.querySelector('dds-top-nav')).toBeNull();
-      expect(
-        mastheadComposite!.querySelector('dds-left-nav')!.children.length
-      ).toBe(0);
-    });
-
-    it('should render the given nav items to the top', async function () {
-      render(template({ navLinks: navLinksFoo }), document.body);
-      await Promise.resolve();
-      expect(
-        document.body
-          .querySelector('dds-masthead-composite')!
-          .querySelector('dds-top-nav')
-      ).toMatchSnapshot();
-    });
-
-    it('should render the given nav items to the left', async function () {
-      render(template({ navLinks: navLinksFoo }), document.body);
-      await Promise.resolve();
-      expect(
-        document.body
-          .querySelector('dds-masthead-composite')!
-          .querySelector('dds-left-nav')
-      ).toMatchSnapshot();
+      expect(mastheadComposite!.querySelector('cds-top-nav')).toBeNull();
     });
   });
 
   describe('Determining the nav/search language', function () {
     it('should use the given language', async function () {
-      DDSMastheadComposite.prototype._setLanguage = jasmine.createSpy();
+      C4DMastheadComposite.prototype._setLanguage = jasmine.createSpy();
       render(template({ language: 'ko-KR' }), document.body);
       await Promise.resolve();
-      expect(DDSMastheadComposite.prototype._setLanguage).toHaveBeenCalled();
+      expect(C4DMastheadComposite.prototype._setLanguage).toHaveBeenCalled();
     });
 
     afterEach(function () {
-      DDSMastheadComposite.prototype._setLanguage = undefined;
+      C4DMastheadComposite.prototype._setLanguage = undefined;
     });
   });
 
diff --git a/packages/web-components/src/components/masthead/__tests__/masthead-logo.test.ts b/packages/web-components/src/components/masthead/__tests__/masthead-logo.test.ts
index 636e853f7a7..7d3af9a718c 100644
--- a/packages/web-components/src/components/masthead/__tests__/masthead-logo.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/masthead-logo.test.ts
@@ -7,31 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import '../masthead-logo';
 
 const template = (props?) => {
   const { href } = props ?? {};
   return html`
-    <dds-masthead-logo href="${ifNonNull(href)}"></dds-masthead-logo>
+    <c4d-masthead-logo href="${ifDefined(href)}"></c4d-masthead-logo>
   `;
 };
 
-describe('dds-masthead-logo', function () {
+describe('c4d-masthead-logo', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-masthead-logo>`
-      expect(document.body.querySelector('dds-masthead-logo')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-masthead-logo>`
+      expect(document.body.querySelector('c4d-masthead-logo')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
 
     it('should render with various attributes', async function () {
       render(template({ href: 'https://cloud.ibm.com/' }), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-masthead-logo>`
-      expect(document.body.querySelector('dds-masthead-logo')).toMatchSnapshot({
+      await Promise.resolve(); // Update cycle for `<c4d-masthead-logo>`
+      expect(document.body.querySelector('c4d-masthead-logo')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/masthead/__tests__/masthead-profile.test.ts b/packages/web-components/src/components/masthead/__tests__/masthead-profile.test.ts
index 17216eec776..f6420a20371 100644
--- a/packages/web-components/src/components/masthead/__tests__/masthead-profile.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/masthead-profile.test.ts
@@ -7,29 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import User20 from '../../../internal/vendor/@carbon/web-components/icons/user/20.js';
 import UserOnline20 from '../../../internal/vendor/@carbon/web-components/icons/user--online/20.js';
-import DDSMastheadProfile from '../masthead-profile';
+import C4DMastheadProfile from '../masthead-profile';
 
 const template = (props?) => {
   const { authenticated, expanded, menuLabel } = props ?? {};
   return html`
-    <dds-masthead-profile
+    <c4d-masthead-profile
       ?authenticated="${authenticated}"
       ?expanded="${expanded}"
-      menu-label="${ifNonNull(menuLabel)}"></dds-masthead-profile>
+      menu-label="${ifDefined(menuLabel)}"></c4d-masthead-profile>
   `;
 };
 
-describe('dds-masthead-profile', function () {
+describe('c4d-masthead-profile', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-masthead-profile')
+        document.body.querySelector('c4d-masthead-profile')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -40,7 +40,7 @@ describe('dds-masthead-profile', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-masthead-profile')
+        document.body.querySelector('c4d-masthead-profile')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -50,10 +50,10 @@ describe('dds-masthead-profile', function () {
       render(html` ${template()}${User20({ id: 'icon-ref' })} `, document.body);
       await Promise.resolve();
       const mastheadProfile = document.body.querySelector(
-        'dds-masthead-profile'
-      ) as DDSMastheadProfile;
+        'c4d-masthead-profile'
+      ) as C4DMastheadProfile;
       const icon = mastheadProfile.shadowRoot!.querySelector(
-        '.bx--header__menu-title svg'
+        '.cds--header__menu-title svg'
       );
       const iconRef = document.getElementById('icon-ref');
       expect(icon!.querySelector('path')!.getAttribute('d')).toBe(
@@ -72,10 +72,10 @@ describe('dds-masthead-profile', function () {
       );
       await Promise.resolve();
       const mastheadProfile = document.body.querySelector(
-        'dds-masthead-profile'
-      ) as DDSMastheadProfile;
+        'c4d-masthead-profile'
+      ) as C4DMastheadProfile;
       const icon = mastheadProfile.shadowRoot!.querySelector(
-        '.bx--header__menu-title svg'
+        '.cds--header__menu-title svg'
       );
       const iconRef = document.getElementById('icon-ref');
       expect(icon!.querySelector('path')!.getAttribute('d')).toBe(
@@ -89,10 +89,10 @@ describe('dds-masthead-profile', function () {
       render(template(), document.body);
       await Promise.resolve();
       const mastheadProfile = document.body.querySelector(
-        'dds-masthead-profile'
-      ) as DDSMastheadProfile;
+        'c4d-masthead-profile'
+      ) as C4DMastheadProfile;
       const trigger = mastheadProfile.shadowRoot!.querySelector(
-        '.bx--header__menu-title'
+        '.cds--header__menu-title'
       ) as HTMLElement;
       trigger.click();
       await Promise.resolve();
@@ -108,10 +108,10 @@ describe('dds-masthead-profile', function () {
       render(template({ expanded: true }), document.body);
       await Promise.resolve();
       const mastheadProfile = document.body.querySelector(
-        'dds-masthead-profile'
-      ) as DDSMastheadProfile;
+        'c4d-masthead-profile'
+      ) as C4DMastheadProfile;
       const trigger = mastheadProfile.shadowRoot!.querySelector(
-        '.bx--header__menu-title'
+        '.cds--header__menu-title'
       ) as HTMLElement;
       spyOn(trigger, 'focus');
       const event = new CustomEvent('keydown', {
@@ -133,10 +133,10 @@ describe('dds-masthead-profile', function () {
       render(template({ expanded: true }), document.body);
       await Promise.resolve();
       const mastheadProfile = document.body.querySelector(
-        'dds-masthead-profile'
-      ) as DDSMastheadProfile;
+        'c4d-masthead-profile'
+      ) as C4DMastheadProfile;
       const trigger = mastheadProfile.shadowRoot!.querySelector(
-        '.bx--header__menu-title'
+        '.cds--header__menu-title'
       ) as HTMLElement;
       spyOn(trigger, 'focus');
       mastheadProfile.dispatchEvent(
diff --git a/packages/web-components/src/components/masthead/__tests__/masthead.steps.js b/packages/web-components/src/components/masthead/__tests__/masthead.steps.js
index cce8e21bd0f..a6427b810eb 100644
--- a/packages/web-components/src/components/masthead/__tests__/masthead.steps.js
+++ b/packages/web-components/src/components/masthead/__tests__/masthead.steps.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
  */
 
-describe('dds-masthead-*', () => {
+describe('cds-masthead-*', () => {
   describe('With wide screen', () => {
     beforeEach(async () => {
       await page.setViewportSize({ width: 1280, height: 720 });
@@ -18,7 +18,7 @@ describe('dds-masthead-*', () => {
 
     it('should support clicking the logo', async () => {
       const promiseNavigation = page.waitForNavigation();
-      await page.click('dds-masthead-logo');
+      await page.click('cds-masthead-logo');
       await promiseNavigation;
       expect(await page.evaluate(() => window.location.href)).toMatch(
         'https://www.ibm.com'
@@ -26,9 +26,9 @@ describe('dds-masthead-*', () => {
     });
 
     it('should support navigating in profile menu', async () => {
-      await page.click('dds-masthead-profile');
+      await page.click('cds-masthead-profile');
       const promiseNavigation = page.waitForNavigation();
-      await page.click('dds-masthead-profile-item[href*="authorize"]');
+      await page.click('cds-masthead-profile-item[href*="authorize"]');
       await promiseNavigation;
       expect(await page.evaluate(() => window.location.href)).toMatch(
         'https://idaas.iam.ibm.com'
@@ -36,9 +36,9 @@ describe('dds-masthead-*', () => {
     });
 
     it('should support navigating in top nav menu', async () => {
-      await page.click('dds-megamenu-top-nav-menu:first-of-type');
+      await page.click('cds-megamenu-top-nav-menu:first-of-type');
       const promiseNavigation = page.waitForNavigation();
-      await page.click('dds-megamenu-link-with-icon:first-of-type');
+      await page.click('cds-megamenu-link-with-icon:first-of-type');
       await promiseNavigation;
       expect(await page.evaluate(() => window.location.href)).toMatch(
         'https://www.ibm.com'
@@ -46,14 +46,14 @@ describe('dds-masthead-*', () => {
     });
 
     it('should support showing/hiding the search box', async () => {
-      await page.click('dds-masthead-search button[part="open-button"]');
+      await page.click('cds-masthead-search button[part="open-button"]');
       await expect(page).toHaveSelector(
-        'dds-masthead-search input[part="search-input"]',
+        'cds-masthead-search input[part="search-input"]',
         { state: 'visible' }
       );
-      await page.click('dds-masthead-search button[part="close-button"]');
+      await page.click('cds-masthead-search button[part="close-button"]');
       await expect(page).toHaveSelector(
-        'dds-masthead-search input[part="search-input"]',
+        'cds-masthead-search input[part="search-input"]',
         { state: 'hidden' }
       );
     });
@@ -68,10 +68,10 @@ describe('dds-masthead-*', () => {
     });
 
     it('should support navigating in left nav menu', async () => {
-      await page.click('dds-masthead-menu-button');
-      await page.click('dds-left-nav-menu[title*="Products"]');
-      await page.click('dds-left-nav-menu[title="Industries"]');
-      await page.click('dds-left-nav-menu-item[title="Healthcare"]');
+      await page.click('cds-masthead-menu-button');
+      await page.click('cds-left-nav-menu[title*="Products"]');
+      await page.click('cds-left-nav-menu[title="Industries"]');
+      await page.click('cds-left-nav-menu-item[title="Healthcare"]');
       expect(await page.evaluate(() => window.location.href)).toMatch(
         'https://www.ibm.com/industries/healthcare'
       );
diff --git a/packages/web-components/src/components/masthead/__tests__/megamenu-top-nav-menu.test.ts b/packages/web-components/src/components/masthead/__tests__/megamenu-top-nav-menu.test.ts
index 6f952abd336..afceb6a6655 100644
--- a/packages/web-components/src/components/masthead/__tests__/megamenu-top-nav-menu.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/megamenu-top-nav-menu.test.ts
@@ -1,26 +1,26 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../megamenu-top-nav-menu';
-import DDSMegaMenuOverlay from '../megamenu-overlay';
+import C4DMegaMenuOverlay from '../megamenu-overlay';
 
 const template = (props?) => {
   const { expanded } = props ?? {};
   return html`
-    <dds-megamenu-top-nav-menu
-      ?expanded="${expanded}"></dds-megamenu-top-nav-menu>
-    <dds-megamenu-overlay></dds-megamenu-overlay>
+    <c4d-megamenu-top-nav-menu
+      ?expanded="${expanded}"></c4d-megamenu-top-nav-menu>
+    <c4d-megamenu-overlay></c4d-megamenu-overlay>
   `;
 };
 
-describe('dds-megamenu-top-nav-menu', function () {
+xdescribe('c4d-megamenu-top-nav-menu', function () {
   describe('Toggling', function () {
     it('should hide the overlay if not expanded', async function () {
       render(template(), document.body);
@@ -28,20 +28,20 @@ describe('dds-megamenu-top-nav-menu', function () {
       expect(
         (
           document.body.querySelector(
-            'dds-megamenu-overlay'
-          ) as DDSMegaMenuOverlay
+            'c4d-megamenu-overlay'
+          ) as C4DMegaMenuOverlay
         ).active
       ).toBe(false);
     });
 
-    it('should show the overlay if expanded', async function () {
+    xit('should show the overlay if expanded', async function () {
       render(template({ expanded: true }), document.body);
       await Promise.resolve();
       expect(
         (
           document.body.querySelector(
-            'dds-megamenu-overlay'
-          ) as DDSMegaMenuOverlay
+            'c4d-megamenu-overlay'
+          ) as C4DMegaMenuOverlay
         ).active
       ).toBe(true);
     });
diff --git a/packages/web-components/src/components/masthead/__tests__/top-nav.test.ts b/packages/web-components/src/components/masthead/__tests__/top-nav.test.ts
index b171b430386..ab8de840ab4 100644
--- a/packages/web-components/src/components/masthead/__tests__/top-nav.test.ts
+++ b/packages/web-components/src/components/masthead/__tests__/top-nav.test.ts
@@ -1,70 +1,70 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import MockIntersectionObserver from '../../../../tests/utils/mock-intersection-observer';
 import '../top-nav';
 
 const template = ({ width = 215 }: { width?: number } = {}) => {
   return html`
     <style>
-      dds-top-nav {
+      c4d-top-nav {
         display: flex;
         width: ${width}px;
         height: 1rem;
         background-color: blue; /* For debugging */
       }
 
-      dds-top-nav::part(nav) {
+      c4d-top-nav::part(nav) {
         /* Forces the nav being shown */
         display: block;
         /* Removes the padding for simpler test */
         padding: 0;
       }
 
-      dds-top-nav::part(prev-button),
-      dds-top-nav::part(next-button) {
+      c4d-top-nav::part(prev-button),
+      c4d-top-nav::part(next-button) {
         display: block;
       }
 
-      .dds-ce--test--scroll-content {
+      .c4d-ce--test--scroll-content {
         width: 100px;
         flex-grow: 0;
         flex-shrink: 0;
       }
 
-      .dds-ce--test--scroll-content--odd {
+      .c4d-ce--test--scroll-content--odd {
         width: 75px;
       }
     </style>
-    <dds-top-nav>
+    <c4d-top-nav>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--even"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--even"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--odd"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--odd"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--even"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--even"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--odd"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--odd"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--even"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--even"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--odd"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--odd"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--even"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--even"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--odd"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--odd"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--even"></div>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--even"></div>
       <div
-        class="dds-ce--test--scroll-content dds-ce--test--scroll-content--odd"></div>
-    </dds-top-nav>
+        class="c4d-ce--test--scroll-content c4d-ce--test--scroll-content--odd"></div>
+    </c4d-top-nav>
   `;
 };
 
@@ -76,7 +76,7 @@ async function pause(timespan = 0) {
   });
 }
 
-describe('dds-top-nav', function () {
+describe('c4d-top-nav', function () {
   let origIntersectionObserver;
 
   beforeEach(function () {
@@ -85,14 +85,14 @@ describe('dds-top-nav', function () {
       MockIntersectionObserver as unknown as typeof IntersectionObserver;
   });
 
-  describe('Navigating to right', function () {
+  xdescribe('Navigating to right', function () {
     it('should go to the next page', async function () {
       render(template(), document.body);
       await Promise.resolve(); // Update cycle for the component
       await Promise.resolve(); // The cycle where `slotchange` event is called
-      const topNav = document.querySelector('dds-top-nav');
+      const topNav = document.querySelector('c4d-top-nav');
       const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-right'
+        '.cds-sub-content-right'
       );
       MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
       await Promise.resolve();
@@ -103,7 +103,7 @@ describe('dds-top-nav', function () {
       await Promise.resolve();
       await pause(250); // Let DOM update, transition to end.
       const offsetElement = topNav!.shadowRoot!.querySelector(
-        '.bx--header__nav-content'
+        '.cds-header__nav-content'
       ) as HTMLElement;
       expect(window.getComputedStyle(offsetElement).insetInlineStart).toBe(
         '-167px'
@@ -114,9 +114,9 @@ describe('dds-top-nav', function () {
       render(template({ width: 200 }), document.body);
       await Promise.resolve(); // Update cycle for the component
       await Promise.resolve(); // The cycle where `slotchange` event is called
-      const topNav = document.querySelector('dds-top-nav');
+      const topNav = document.querySelector('c4d-top-nav');
       const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-right'
+        '.cds-sub-content-right'
       );
       MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
       await Promise.resolve();
@@ -127,7 +127,7 @@ describe('dds-top-nav', function () {
       await Promise.resolve();
       await pause(250); // Let DOM update, transition to end.
       const offsetElement = topNav!.shadowRoot!.querySelector(
-        '.bx--header__nav-content'
+        '.cds-header__nav-content'
       ) as HTMLElement;
       expect(window.getComputedStyle(offsetElement).insetInlineStart).toBe(
         '-92px'
@@ -138,15 +138,15 @@ describe('dds-top-nav', function () {
     //   render(template(), document.body);
     //   await Promise.resolve(); // Update cycle for the component
     //   await Promise.resolve(); // The cycle where `slotchange` event is called
-    //   const topNav = document.querySelector('dds-top-nav');
-    //   const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector('.bx--sub-content-right');
+    //   const topNav = document.querySelector('c4d-top-nav');
+    //   const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector('.cds-sub-content-right');
     //   MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
     //   await Promise.resolve();
     //   (topNav as any)._currentScrollPosition = 565;
     //   (topNav!.shadowRoot!.querySelector('[part="next-button"]') as HTMLElement).click();
     //   await Promise.resolve();
     //   await pause(250); // Let DOM update, transition to end.
-    //   const offsetElement = topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement;
+    //   const offsetElement = topNav!.shadowRoot!.querySelector('.cds-header__nav-content') as HTMLElement;
     //   const offsetStyle = window.getComputedStyle(offsetElement).insetInlineStart;
     //   expect(offsetStyle).toBe('-565px');
     // });
@@ -155,34 +155,34 @@ describe('dds-top-nav', function () {
     //   render(template(), document.body);
     //   await Promise.resolve(); // Update cycle for the component
     //   await Promise.resolve(); // The cycle where `slotchange` event is called
-    //   const topNav = document.querySelector('dds-top-nav');
-    //   const intersectionLeftSentinelNode = topNav!.shadowRoot!.querySelector('.bx--sub-content-left');
+    //   const topNav = document.querySelector('c4d-top-nav');
+    //   const intersectionLeftSentinelNode = topNav!.shadowRoot!.querySelector('.cds-sub-content-left');
     //   MockIntersectionObserver.run(intersectionLeftSentinelNode!, false);
-    //   const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector('.bx--sub-content-right');
+    //   const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector('.cds-sub-content-right');
     //   MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
     //   await Promise.resolve();
     //   (topNav as any)._currentScrollPosition = 690;
     //   (topNav!.shadowRoot!.querySelector('[part="next-button"]') as HTMLElement).click();
     //   await Promise.resolve();
     //   await pause(250); // Let DOM update, transition to end.
-    //   const offsetElement = topNav!.shadowRoot!.querySelector('.bx--header__nav-content') as HTMLElement;
+    //   const offsetElement = topNav!.shadowRoot!.querySelector('.cds-header__nav-content') as HTMLElement;
     //   const offsetStyle = window.getComputedStyle(offsetElement).insetInlineStart;
     //   expect(offsetStyle).toBe('-690px');
     // });
   });
 
-  describe('Navigating to left', function () {
+  xdescribe('Navigating to left', function () {
     it('should go to the next page', async function () {
       render(template({ width: 255 }), document.body);
       await Promise.resolve(); // Update cycle for the component
       await Promise.resolve(); // The cycle where `slotchange` event is called
-      const topNav = document.querySelector('dds-top-nav');
+      const topNav = document.querySelector('c4d-top-nav');
       const intersectionLeftSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-left'
+        '.cds-sub-content-left'
       );
       MockIntersectionObserver.run(intersectionLeftSentinelNode!, false);
       const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-right'
+        '.cds-sub-content-right'
       );
       MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
       await Promise.resolve();
@@ -193,7 +193,7 @@ describe('dds-top-nav', function () {
       await Promise.resolve();
       await pause(250); // Let DOM update, transition to end.
       const offsetElement = topNav!.shadowRoot!.querySelector(
-        '.bx--header__nav-content'
+        '.cds-header__nav-content'
       ) as HTMLElement;
       const offsetStyle =
         window.getComputedStyle(offsetElement).insetInlineStart;
@@ -204,13 +204,13 @@ describe('dds-top-nav', function () {
       render(template({ width: 200 }), document.body);
       await Promise.resolve(); // Update cycle for the component
       await Promise.resolve(); // The cycle where `slotchange` event is called
-      const topNav = document.querySelector('dds-top-nav');
+      const topNav = document.querySelector('c4d-top-nav');
       const intersectionLeftSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-left'
+        '.cds-sub-content-left'
       );
       MockIntersectionObserver.run(intersectionLeftSentinelNode!, false);
       const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-right'
+        '.cds-sub-content-right'
       );
       MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
       await Promise.resolve();
@@ -223,7 +223,7 @@ describe('dds-top-nav', function () {
       // Given the 4th item should be the right-most, the left position should be `350px - (200px - 80px)`
       await pause(250); // Let DOM update, transition to end.
       const offsetElement = topNav!.shadowRoot!.querySelector(
-        '.bx--header__nav-content'
+        '.cds-header__nav-content'
       ) as HTMLElement;
       const offsetStyle =
         window.getComputedStyle(offsetElement).insetInlineStart;
@@ -234,9 +234,9 @@ describe('dds-top-nav', function () {
       render(template(), document.body);
       await Promise.resolve(); // Update cycle for the component
       await Promise.resolve(); // The cycle where `slotchange` event is called
-      const topNav = document.querySelector('dds-top-nav');
+      const topNav = document.querySelector('c4d-top-nav');
       const intersectionLeftSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-left'
+        '.cds-sub-content-left'
       );
       MockIntersectionObserver.run(intersectionLeftSentinelNode!, false);
       await Promise.resolve();
@@ -247,7 +247,7 @@ describe('dds-top-nav', function () {
       await Promise.resolve();
       await pause(250); // Let DOM update, transition to end.
       const offsetElement = topNav!.shadowRoot!.querySelector(
-        '.bx--header__nav-content'
+        '.cds-header__nav-content'
       ) as HTMLElement;
       const offsetStyle =
         window.getComputedStyle(offsetElement).insetInlineStart;
@@ -258,13 +258,13 @@ describe('dds-top-nav', function () {
       render(template(), document.body);
       await Promise.resolve(); // Update cycle for the component
       await Promise.resolve(); // The cycle where `slotchange` event is called
-      const topNav = document.querySelector('dds-top-nav');
+      const topNav = document.querySelector('c4d-top-nav');
       const intersectionLeftSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-left'
+        '.cds-sub-content-left'
       );
       MockIntersectionObserver.run(intersectionLeftSentinelNode!, false);
       const intersectionRightSentinelNode = topNav!.shadowRoot!.querySelector(
-        '.bx--sub-content-right'
+        '.cds-sub-content-right'
       );
       MockIntersectionObserver.run(intersectionRightSentinelNode!, false);
       await Promise.resolve();
@@ -278,7 +278,7 @@ describe('dds-top-nav', function () {
       await Promise.resolve();
       await pause(250); // Let DOM update, transition to end.
       const offsetElement = topNav!.shadowRoot!.querySelector(
-        '.bx--header__nav-content'
+        '.cds-header__nav-content'
       ) as HTMLElement;
       const offsetStyle =
         window.getComputedStyle(offsetElement).insetInlineStart;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts b/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts
index 7bb581fda37..de40ec7f238 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-button-cta.ts
@@ -7,24 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { CTA_TYPE } from '../../cta/defs';
-import DDSButtonExpressive from '../../button/button';
+import C4DButtonExpressive from '../../button/button';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
 export { CTA_TYPE };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud Button CTA.
  *
- * @element dds-cloud-button-cta
+ * @element c4d-cloud-button-cta
  */
-@customElement(`${ddsPrefix}-cloud-button-cta`)
-class DDSCloudButtonCTA extends DDSButtonExpressive {
+@customElement(`${c4dPrefix}-cloud-button-cta`)
+class C4DCloudButtonCTA extends C4DButtonExpressive {
   static styles = styles;
 }
 
-export default DDSCloudButtonCTA;
+export default C4DCloudButtonCTA;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts b/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts
index 44c06b34933..b4405f36553 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-left-nav-item.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXSideNavLink from '../../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-link.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSSideNavLink from '../../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-link.js';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud-specific masthead left nav item.
  *
- * @element dds-cloud-left-nav-item
+ * @element c4d-cloud-left-nav-item
  */
-@customElement(`${ddsPrefix}-cloud-left-nav-item`)
-class DDSCloudLeftNavItem extends BXSideNavLink {
+@customElement(`${c4dPrefix}-cloud-left-nav-item`)
+class C4DCloudLeftNavItem extends CDSSideNavLink {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudLeftNavItem;
+export default C4DCloudLeftNavItem;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
index 1e47c3c05ed..91bdc27d1de 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead-composite.ts
@@ -7,9 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { globalInit } from '../../../internal/vendor/@carbon/ibmdotcom-services/services/global/global';
 import './cloud-button-cta';
 import './cloud-left-nav-item';
@@ -29,13 +30,14 @@ import {
   MastheadProfileItem,
 } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d';
 import { UNAUTHENTICATED_STATUS } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/cloudAccountAuthAPI';
+import { MASTHEAD_AUTH_METHOD } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
 import styles from './cloud-masthead.scss';
-import DDSMastheadComposite, {
+import C4DMastheadComposite, {
   NAV_ITEMS_RENDER_TARGET,
 } from '../masthead-composite';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 // Magic Number: 960px matches masthead.scss's `$breakpoint--desktop-nav`.
 const layoutBreakpoint = window.matchMedia(`(max-width: 959px)`);
@@ -43,11 +45,11 @@ const layoutBreakpoint = window.matchMedia(`(max-width: 959px)`);
 /**
  * Component that renders masthead from links, etc. data.
  *
- * @element dds-cloud-masthead-composite
+ * @element c4d-cloud-masthead-composite
  */
 
-@customElement(`${ddsPrefix}-cloud-masthead-composite`)
-class DDSCloudMastheadComposite extends DDSMastheadComposite {
+@customElement(`${c4dPrefix}-cloud-masthead-composite`)
+class C4DCloudMastheadComposite extends C4DMastheadComposite {
   /**
    * The placeholder for `loadUserStatus()` Redux action that will be mixed in.
    *
@@ -83,7 +85,7 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
    * The selected authentication method, either 'cookie' or 'api'.
    */
   @property({ attribute: 'auth-method' })
-  authMethod = 'cookie';
+  authMethod = MASTHEAD_AUTH_METHOD.COOKIE;
 
   /**
    * The user authentication status.
@@ -123,24 +125,24 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
     });
 
     return html`
-      <dds-cloud-megamenu>
-        <dds-cloud-megamenu-left-navigation
-          view-all-href="${ifNonNull(viewAllLink?.url)}"
-          view-all-title="${ifNonNull(viewAllLink?.title)}">
-          <dds-cloud-megamenu-tabs value="${sortedMenuItems[0]?.title}">
+      <c4d-cloud-megamenu>
+        <c4d-cloud-megamenu-left-navigation
+          view-all-href="${ifDefined(viewAllLink?.url)}"
+          view-all-title="${ifDefined(viewAllLink?.title)}">
+          <c4d-cloud-megamenu-tabs value="${sortedMenuItems[0]?.title}">
             ${sortedMenuItems.map((item) => {
               return html`
-                <dds-cloud-megamenu-tab
+                <c4d-cloud-megamenu-tab
                   id="tab-${item.itemKey}"
                   target="panel-${item.itemKey}"
                   value="${item.title}"
-                  >${item.title}</dds-cloud-megamenu-tab
+                  >${item.title}</c4d-cloud-megamenu-tab
                 >
               `;
             })}
-          </dds-cloud-megamenu-tabs>
-        </dds-cloud-megamenu-left-navigation>
-        <dds-cloud-megamenu-right-navigation>
+          </c4d-cloud-megamenu-tabs>
+        </c4d-cloud-megamenu-left-navigation>
+        <c4d-cloud-megamenu-right-navigation>
           ${sortedMenuItems.map((item) => {
             return html`
               <div
@@ -148,29 +150,29 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
                 role="tabpanel"
                 aria-labelledby="tab-${item.itemKey}"
                 hidden>
-                <dds-cloud-megamenu-category-heading
+                <c4d-cloud-megamenu-category-heading
                   href="${item.megapanelContent?.headingUrl}"
                   title="${item.megapanelContent?.headingTitle}"
                   >${item.megapanelContent
-                    ?.description}</dds-cloud-megamenu-category-heading
+                    ?.description}</c4d-cloud-megamenu-category-heading
                 >
-                <dds-cloud-megamenu-category-link-group>
+                <c4d-cloud-megamenu-category-link-group>
                   ${item?.megapanelContent?.quickLinks?.links.map(
                     (link) =>
                       html`
-                        <dds-cloud-megamenu-category-link
+                        <c4d-cloud-megamenu-category-link
                           href="${link.url}"
                           title="${link.title}"
-                          >${link.description}</dds-cloud-megamenu-category-link
+                          >${link.description}</c4d-cloud-megamenu-category-link
                         >
                       `
                   )}
-                </dds-cloud-megamenu-category-link-group>
+                </c4d-cloud-megamenu-category-link-group>
               </div>
             `;
           })}
-        </dds-cloud-megamenu-right-navigation>
-      </dds-cloud-megamenu>
+        </c4d-cloud-megamenu-right-navigation>
+      </c4d-cloud-megamenu>
     `;
   }
 
@@ -213,31 +215,31 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
     const items = menuItems.map((elem) => {
       if (elem.menu) {
         return html`
-          <dds-left-nav-menu
+          <c4d-left-nav-menu
             ?last-highlighted=${elem.lastHighlightedItem}
             panel-id=${elem.panelId}
             ?active="${elem.selected}"
             title="${elem.title}"
             data-autoid="${elem.autoid}">
-          </dds-left-nav-menu>
+          </c4d-left-nav-menu>
         `;
       }
 
       return html`
-        <dds-left-nav-menu-item
+        <c4d-left-nav-menu-item
           ?last-highlighted=${elem.lastHighlightedItem}
           ?active="${elem.selected}"
           href="${elem.url}"
           title="${elem.title}"
-          data-autoid="${elem.autoid}"></dds-left-nav-menu-item>
+          data-autoid="${elem.autoid}"></c4d-left-nav-menu-item>
       `;
     });
 
     if (heading) {
       items.unshift(
         html`
-          <dds-left-nav-menu-category-heading
-            >${heading}</dds-left-nav-menu-category-heading
+          <c4d-left-nav-menu-category-heading
+            >${heading}</c4d-left-nav-menu-category-heading
           >
         `
       );
@@ -251,17 +253,17 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
             : html`
                 ${profileItems?.map((item) => {
                   return html`
-                    <dds-cloud-left-nav-item
+                    <c4d-cloud-left-nav-item
                       href="${item.url}"
-                      title="${item.title}"></dds-cloud-left-nav-item>
+                      title="${item.title}"></c4d-cloud-left-nav-item>
                   `;
                 })}
               `}
           ${ctaButtons?.map((item) => {
             return html`
-              <dds-cloud-left-nav-item
+              <c4d-cloud-left-nav-item
                 href="${item.url}"
-                title="${item.title}"></dds-cloud-left-nav-item>
+                title="${item.title}"></c4d-cloud-left-nav-item>
             `;
           })}
         `
@@ -269,14 +271,14 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
     }
 
     return html`
-      <dds-left-nav-menu-section
+      <c4d-left-nav-menu-section
         section-id="${sectionId}"
-        ?is-submenu=${ifNonNull(isSubmenu)}
-        title=${ifNonNull(sectionTitle)}
-        titleUrl=${ifNonNull(sectionUrl)}
-        ?show-back-button=${ifNonNull(showBackButton)}>
+        ?is-submenu=${ifDefined(isSubmenu)}
+        title=${ifDefined(sectionTitle)}
+        titleUrl=${ifDefined(sectionUrl)}
+        ?show-back-button=${ifDefined(showBackButton)}>
         ${items}
-      </dds-left-nav-menu-section>
+      </c4d-left-nav-menu-section>
     `;
   }
 
@@ -316,7 +318,6 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
       language,
       openSearchDropdown,
       searchPlaceholder,
-      selectedMenuItem,
       unauthenticatedProfileItems,
       unauthenticatedCtaButtons,
       userStatus,
@@ -345,156 +346,154 @@ class DDSCloudMastheadComposite extends DDSMastheadComposite {
     return html`
       ${isMobileVersion
         ? html`
-            <dds-left-nav-overlay cloud></dds-left-nav-overlay>
-            <dds-left-nav cloud>
+            <c4d-left-nav-overlay cloud></c4d-left-nav-overlay>
+            <c4d-left-nav cloud>
               ${!platform
                 ? undefined
                 : html`
-                    <dds-left-nav-name href="${ifNonNull(platformAltUrl)}"
-                      >${platform}</dds-left-nav-name
+                    <c4d-left-nav-name href="${ifDefined(platformAltUrl)}"
+                      >${platform}</c4d-left-nav-name
                     >
                   `}
               ${this._renderNavItems({
-                selectedMenuItem,
                 target: NAV_ITEMS_RENDER_TARGET.LEFT_NAV,
                 hasL1: !!l1Data,
               })}
-            </dds-left-nav>
+            </c4d-left-nav>
           `
         : ''}
-      <dds-masthead aria-label="${ifNonNull(mastheadAssistiveText)}">
+      <c4d-masthead aria-label="${ifDefined(mastheadAssistiveText)}">
         ${isMobileVersion
           ? html`
-              <dds-masthead-menu-button
+              <c4d-masthead-menu-button
                 cloud
-                button-label-active="${ifNonNull(
+                button-label-active="${ifDefined(
                   menuButtonAssistiveTextActive
                 )}"
-                button-label-inactive="${ifNonNull(
+                button-label-inactive="${ifDefined(
                   menuButtonAssistiveTextInactive
                 )}">
-              </dds-masthead-menu-button>
+              </c4d-masthead-menu-button>
             `
           : ''}
         ${this._renderLogo()}
         ${!platform
           ? undefined
           : html`
-              <dds-cloud-top-nav-name href="${ifNonNull(platformAltUrl)}"
-                >${platform}</dds-cloud-top-nav-name
+              <c4d-cloud-top-nav-name href="${ifDefined(platformAltUrl)}"
+                >${platform}</c4d-cloud-top-nav-name
               >
             `}
         ${l1Data
           ? undefined
           : !isMobileVersion
           ? html`
-              <dds-top-nav
+              <c4d-top-nav
                 cloud
-                menu-bar-label="${ifNonNull(menuBarAssistiveText)}">
+                menu-bar-label="${ifDefined(menuBarAssistiveText)}">
                 ${this._renderNavItems({
-                  selectedMenuItem,
                   target: NAV_ITEMS_RENDER_TARGET.TOP_NAV,
                   hasL1: false,
                 })}
-              </dds-top-nav>
+              </c4d-top-nav>
             `
           : undefined}
-        <dds-search-with-typeahead
+        <c4d-search-with-typeahead
           ?active="${activateSearch}"
           input-timeout="${inputTimeout}"
-          language="${ifNonNull(language)}"
+          language="${ifDefined(language)}"
           ?open="${openSearchDropdown}"
-          placeholder="${ifNonNull(
+          placeholder="${ifDefined(
             searchPlaceholder
-          )}"></dds-search-with-typeahead>
+          )}"></c4d-search-with-typeahead>
         ${authenticated
           ? html`
-              <dds-cloud-masthead-global-bar>
-                <dds-cloud-masthead-profile>
+              <c4d-cloud-masthead-global-bar>
+                <c4d-cloud-masthead-profile>
                   ${profileItems?.map(
                     ({ title, url }) =>
                       html`
-                        <dds-cloud-button-cta
-                          href="${ifNonNull(url)}"
+                        <c4d-cloud-button-cta
+                          href="${ifDefined(url)}"
                           kind="ghost"
-                          >${title}</dds-cloud-button-cta
+                          >${title}</c4d-cloud-button-cta
                         >
                       `
                   )}
-                </dds-cloud-masthead-profile>
+                </c4d-cloud-masthead-profile>
                 ${hasContact === 'false'
                   ? ''
                   : html`
-                      <dds-cloud-button-cta
+                      <c4d-cloud-button-cta
                         kind="ghost"
                         data-ibm-contact="contact-link"
                         ><span
                           >${contactUsButton?.title}</span
-                        ></dds-cloud-button-cta
+                        ></c4d-cloud-button-cta
                       >
                     `}
                 ${ctaButtons?.map(
                   ({ title, url }) =>
                     html`
-                      <dds-cloud-button-cta
-                        href="${ifNonNull(url)}"
+                      <c4d-cloud-button-cta
+                        href="${ifDefined(url)}"
                         class="console"
                         kind="ghost"
-                        >${title}</dds-cloud-button-cta
+                        >${title}</c4d-cloud-button-cta
                       >
                     `
                 )}
-              </dds-cloud-masthead-global-bar>
+              </c4d-cloud-masthead-global-bar>
             `
           : html`
-              <dds-cloud-masthead-global-bar>
+              <c4d-cloud-masthead-global-bar>
                 ${hasContact === 'false'
                   ? ''
                   : html`
-                      <dds-cloud-button-cta
+                      <c4d-cloud-button-cta
                         kind="ghost"
                         data-ibm-contact="contact-link"
                         ><span
                           >${contactUsButton?.title}</span
-                        ></dds-cloud-button-cta
+                        ></c4d-cloud-button-cta
                       >
                     `}
                 ${profileItems?.map(
                   ({ title, url }) =>
                     html`
-                      <dds-cloud-button-cta
+                      <c4d-cloud-button-cta
                         href="${url === 'https://cloud.ibm.com/login' &&
                         this.redirectPath
-                          ? ifNonNull(
+                          ? ifDefined(
                               `${url}?redirect=${encodeURIComponent(
                                 this.redirectPath
                               )}`
                             )
-                          : ifNonNull(url)}"
+                          : ifDefined(url)}"
                         kind="ghost"
-                        >${title}</dds-cloud-button-cta
+                        >${title}</c4d-cloud-button-cta
                       >
                     `
                 )}
                 ${ctaButtons?.map(
                   ({ title, url }) =>
                     html`
-                      <dds-cloud-button-cta
-                        href="${ifNonNull(url)}"
+                      <c4d-cloud-button-cta
+                        href="${ifDefined(url)}"
                         kind="primary"
-                        >${title}</dds-cloud-button-cta
+                        >${title}</c4d-cloud-button-cta
                       >
                     `
                 )}
-              </dds-cloud-masthead-global-bar>
+              </c4d-cloud-masthead-global-bar>
             `}
-        ${!l1Data ? undefined : this._renderL1({ selectedMenuItem })}
-        <dds-megamenu-overlay></dds-megamenu-overlay>
-      </dds-masthead>
+        ${!l1Data ? undefined : this._renderL1()}
+        <c4d-megamenu-overlay></c4d-megamenu-overlay>
+      </c4d-masthead>
     `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMastheadComposite;
+export default C4DCloudMastheadComposite;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts
index 3bc36217b97..bdee02caac1 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead-container.ts
@@ -13,7 +13,7 @@ import {
   Store,
   bindActionCreators,
 } from 'redux';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { CloudAccountAuthAPIState } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/types/cloudAccountAuthAPI.d';
 import store from '../../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import { LocaleAPIActions } from '../../../internal/vendor/@carbon/ibmdotcom-services-store/actions/localeAPI.d';
@@ -31,13 +31,13 @@ import {
   MastheadContainerState,
   MastheadContainerStateProps,
 } from '../masthead-container';
-import DDSCloudMastheadComposite from './cloud-masthead-composite';
+import C4DCloudMastheadComposite from './cloud-masthead-composite';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux state used for `<dds-cloud-masthead-container>`
+ * The Redux state used for `<c4d-cloud-masthead-container>`
  */
 export interface CloudMastheadContainerState
   extends Omit<MastheadContainerState, 'profileAPI'> {
@@ -48,7 +48,7 @@ export interface CloudMastheadContainerState
 }
 
 /**
- * The Redux actions used for `<dds-cloud-masthead-container>.
+ * The Redux actions used for `<c4d-cloud-masthead-container>.
  */
 export type CloudMastheadContainerActions =
   | ReturnType<typeof loadLanguage>
@@ -58,7 +58,7 @@ export type CloudMastheadContainerActions =
 
 /**
  * @param state The Redux state for masthead.
- * @returns The converted version of the given state, tailored for `<dds-cloud-masthead-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-cloud-masthead-container>`.
  */
 export function mapStateToProps(
   state: CloudMastheadContainerState
@@ -99,7 +99,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-cloud-masthead-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-cloud-masthead-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(
   dispatch: Dispatch<
@@ -122,10 +122,10 @@ export function mapDispatchToProps(
 /**
  * Container component for Cloud masthead.
  *
- * @element dds-cloud-masthead-container
+ * @element c4d-cloud-masthead-container
  */
-@customElement(`${ddsPrefix}-cloud-masthead-container`)
-class DDSCloudMastheadContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-cloud-masthead-container`)
+class C4DCloudMastheadContainer extends ConnectMixin<
   CloudMastheadContainerState,
   LocaleAPIActions | TranslateAPIActions | CloudAccountAuthAPIActions,
   MastheadContainerStateProps,
@@ -137,6 +137,6 @@ class DDSCloudMastheadContainer extends ConnectMixin<
   >,
   mapStateToProps,
   mapDispatchToProps
-)(DDSCloudMastheadComposite) {}
+)(C4DCloudMastheadComposite) {}
 
-export default DDSCloudMastheadContainer;
+export default C4DCloudMastheadContainer;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts
index 828e04e0053..c01503024b7 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead-global-bar.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
-import DDSMastheadGlobalBar from '../masthead-global-bar';
+import C4DMastheadGlobalBar from '../masthead-global-bar';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The action bar in Cloud masthead.
  *
- * @element dds-cloud-masthead-global-bar
+ * @element c4d-cloud-masthead-global-bar
  */
-@customElement(`${ddsPrefix}-cloud-masthead-global-bar`)
-class DDSCloudMastheadGlobalBar extends DDSMastheadGlobalBar {
+@customElement(`${c4dPrefix}-cloud-masthead-global-bar`)
+class C4DCloudMastheadGlobalBar extends C4DMastheadGlobalBar {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMastheadGlobalBar;
+export default C4DCloudMastheadGlobalBar;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts b/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts
index e2da02df7a2..db14d600469 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead-profile.ts
@@ -7,25 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html } from 'lit';
 import User20 from '../../../internal/vendor/@carbon/web-components/icons/user/20.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
-import DDSMastheadProfile from '../masthead-profile';
+import C4DMastheadProfile from '../masthead-profile';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The Cloud-specific profile menu UI in the masthead.
  *
- * @element dds-cloud-masthead-profile
+ * @element c4d-cloud-masthead-profile
  */
-@customElement(`${ddsPrefix}-cloud-masthead-profile`)
-class DDSCloudMastheadProfile extends DDSMastheadProfile {
+@customElement(`${c4dPrefix}-cloud-masthead-profile`)
+class C4DCloudMastheadProfile extends C4DMastheadProfile {
   render() {
     const {
       expanded,
@@ -53,4 +51,4 @@ class DDSCloudMastheadProfile extends DDSMastheadProfile {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMastheadProfile;
+export default C4DCloudMastheadProfile;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss b/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss
index 7caa2ffaff7..c86ffb7e3c7 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss
+++ b/packages/web-components/src/components/masthead/cloud/cloud-masthead.scss
@@ -5,80 +5,89 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '../masthead.scss';
-@import '../../cta/cta.scss';
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
+@use '../masthead';
+@use '../../cta/cta';
+@use '@carbon/ibmdotcom-styles/scss/globals/utils/flex-grid' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
 // Cloud Masthead.
 
-:host(#{$dds-prefix}-cloud-masthead-container),
-#{$dds-prefix}-cloud-masthead-container {
+:host(#{$c4d-prefix}-cloud-masthead-container),
+#{$c4d-prefix}-cloud-masthead-container {
   position: relative;
 }
 
-:host(#{$dds-prefix}-cloud-masthead-global-bar) {
-  @extend :host(#{$dds-prefix}-masthead-global-bar);
+:host(#{$c4d-prefix}-cloud-masthead-global-bar) {
+  @extend :host(#{$c4d-prefix}-masthead-global-bar);
 
-  background-color: $ui-background;
+  background-color: $background;
   flex: none;
   z-index: 0;
 }
 
-:host(#{$dds-prefix}-cloud-masthead-global-bar)
-  ::slotted(#{$dds-prefix}-cloud-button-cta) {
-  @include carbon--breakpoint-down('md') {
+:host(#{$c4d-prefix}-cloud-masthead-global-bar)
+  ::slotted(#{$c4d-prefix}-cloud-button-cta) {
+  @include breakpoint-down(md) {
     display: none;
   }
 }
 
-:host(#{$dds-prefix}-cloud-button-cta) {
-  @extend :host(#{$dds-prefix}-button-cta);
+:host(#{$c4d-prefix}-cloud-button-cta) {
+  @extend :host(#{$c4d-prefix}-button-cta);
 
   margin: 0;
   padding-right: 0;
 
   &.console .#{$prefix}--btn--ghost {
     border-left: 1px solid $button-separator;
-    color: $link-02;
+    color: $link-secondary;
   }
 
   .#{$prefix}--btn {
-    padding: calc(0.875rem - 3px) carbon--rem(15px);
+    padding: calc(0.875rem - 3px) rem(15px);
   }
 
   .#{$prefix}--btn--ghost {
-    color: $text-02;
+    color: $text-secondary;
 
     &:hover,
     &:focus {
-      color: $text-01;
+      color: $text-primary;
     }
   }
 }
 
-:host(#{$dds-prefix}-cloud-top-nav-name) {
+:host(#{$c4d-prefix}-cloud-top-nav-name) {
   outline: none;
   position: relative;
   z-index: 1;
-  background-color: $ui-background;
+  background-color: $background;
 
   a.#{$prefix}--header__name {
     margin-left: 0;
 
     @include masthead-top-nav-name;
 
-    @include carbon--breakpoint-down(800px) {
+    @include breakpoint-down(800px) {
       display: flex;
       position: absolute;
       top: 0;
       left: 0;
     }
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       margin-left: 0;
     }
 
-    @include carbon--breakpoint('xlg') {
-      margin-left: $carbon--spacing-05;
+    @include breakpoint(xlg) {
+      margin-left: $spacing-05;
       position: relative;
     }
   }
@@ -86,7 +95,7 @@
 
 // Cloud Megamenu.
 
-:host(#{$dds-prefix}-cloud-megamenu),
+:host(#{$c4d-prefix}-cloud-megamenu),
 .#{$prefix}--masthead__megamenu {
   position: relative;
 
@@ -95,10 +104,10 @@
     position: fixed;
     bottom: 0;
     width: 100%;
-    height: carbon--rem(48px);
+    height: $spacing-09;
     background: linear-gradient(
       rgba(255, 255, 255, 0.001),
-      $ui-background
+      $background
     ); /* transparent keyword is broken in Safari */
   }
 
@@ -110,31 +119,31 @@
 
   .#{$prefix}--masthead__megamenu__container--row {
     // Override flex-direction: column set in _masthead-megamenu.scss.
-    @include carbon--breakpoint-between(960px, 1055px) {
+    @include breakpoint-between(960px, 1055px) {
       flex-direction: inherit;
     }
   }
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-left-navigation) {
-  @include carbon--make-col(4, 16);
+:host(#{$c4d-prefix}-cloud-megamenu-left-navigation) {
+  @include make-col(4, 16);
 
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  border-right: carbon--rem(1px) solid $ui-03;
+  border-right: rem(1px) solid $border-subtle-01;
 
-  @include carbon--breakpoint('md') {
-    min-height: carbon--rem(580px);
+  @include breakpoint(md) {
+    min-height: rem(580px);
   }
 
-  @include carbon--breakpoint('xlg') {
-    min-height: carbon--rem(475px);
+  @include breakpoint(xlg) {
+    min-height: rem(475px);
   }
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-right-navigation) {
-  @include carbon--make-col(12, 16);
+:host(#{$c4d-prefix}-cloud-megamenu-right-navigation) {
+  @include make-col(12, 16);
 
   display: flex;
   flex-direction: column;
@@ -142,64 +151,64 @@
   margin-bottom: $spacing-07;
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-tabs) {
+:host(#{$c4d-prefix}-cloud-megamenu-tabs) {
   display: flex;
   flex-direction: column;
-  margin-top: carbon--rem(18px);
-  margin-bottom: carbon--rem(18px);
+  margin-top: rem(18px);
+  margin-bottom: rem(18px);
 
   .#{$prefix}--tabs-trigger {
     display: none;
   }
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-tab) {
+:host(#{$c4d-prefix}-cloud-megamenu-tab) {
   outline: 0;
 
   button {
-    @include carbon--type-style(body-short-01);
+    @include type-style(body-short-01);
 
-    color: $text-02;
+    color: $text-secondary;
     width: 100%;
     border: none;
     text-align: left;
-    padding: carbon--rem(6px) $spacing-05;
-    background-color: $ui-background;
+    padding: rem(6px) $spacing-05;
+    background-color: $background;
     cursor: pointer;
 
     &:hover,
     &:focus {
-      color: $text-01;
+      color: $text-primary;
     }
 
     &:hover {
-      background-color: $hover-ui;
+      background-color: $background-hover;
     }
 
     &:focus {
-      outline: carbon--rem(2px) solid $focus;
-      outline-offset: carbon--rem(-2px);
+      outline: $spacing-01 solid $focus;
+      outline-offset: rem(-#{$spacing-01});
     }
   }
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-tab)[selected] button {
-  background-color: $selected-ui;
-  color: $text-01;
+:host(#{$c4d-prefix}-cloud-megamenu-tab)[selected] button {
+  background-color: $background-selected;
+  color: $text-primary;
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-category-link-group) {
+:host(#{$c4d-prefix}-cloud-megamenu-category-link-group) {
   display: flex;
   flex-flow: wrap;
   justify-content: flex-start;
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-category-link) {
+:host(#{$c4d-prefix}-cloud-megamenu-category-link) {
   width: 100%;
   max-width: 50%;
   outline: 0;
 
-  @include carbon--breakpoint('xlg') {
+  @include breakpoint(xlg) {
     max-width: 33.33%;
   }
 
@@ -209,42 +218,42 @@
     height: 100%;
 
     p {
-      @include carbon--type-style('expressive-heading-01');
+      @include type-style('heading-01');
 
-      color: $text-01;
+      color: $text-primary;
     }
 
     span {
-      @include carbon--type-style(body-short-01);
+      @include type-style(body-short-01);
 
-      color: $text-02;
+      color: $text-secondary;
       display: block;
       width: 90%;
     }
 
     &:hover {
       text-decoration: none;
-      background-color: $hover-ui;
+      background-color: $background-hover;
 
       span {
-        color: $text-01;
+        color: $text-primary;
       }
     }
 
     &:focus {
-      outline: carbon--rem(2px) solid $focus;
-      outline-offset: carbon--rem(-2px);
+      outline: $spacing-01 solid $focus;
+      outline-offset: rem(-#{$spacing-01});
     }
   }
 }
 
-:host(#{$dds-prefix}-cloud-megamenu-category-heading) {
+:host(#{$c4d-prefix}-cloud-megamenu-category-heading) {
   display: block;
   padding: 0 $spacing-05;
   margin-bottom: $spacing-07;
   width: 66.66%;
 
-  @include carbon--breakpoint('lg') {
+  @include breakpoint(lg) {
     width: auto;
   }
 
@@ -253,14 +262,14 @@
     margin-bottom: $spacing-03;
 
     a {
-      color: $text-01;
+      color: $text-primary;
       text-decoration: none;
       align-self: center;
 
       svg {
         margin: 0 $spacing-03;
         padding-top: $spacing-02;
-        fill: $icon-01;
+        fill: $icon-primary;
 
         /* stylelint-disable-next-line comment-whitespace-inside */
         /* !rtl:raw:
@@ -273,58 +282,58 @@
       }
 
       &:focus {
-        outline: carbon--rem(2px) solid $focus;
-        outline-offset: carbon--rem(-2px);
+        outline: $spacing-01 solid $focus;
+        outline-offset: rem(-#{$spacing-01});
       }
     }
   }
 
   span {
     display: block;
-    @include carbon--type-style(body-short-01);
+    @include type-style(body-short-01);
 
-    color: $text-02;
+    color: $text-secondary;
 
-    @include carbon--breakpoint('lg') {
+    @include breakpoint(lg) {
       width: 40%;
     }
   }
 }
 
-:host(#{$dds-prefix}-cloud-left-nav-item) {
-  @extend :host(#{$dds-prefix}-left-nav-item);
+:host(#{$c4d-prefix}-cloud-left-nav-item) {
+  @extend :host(#{$c4d-prefix}-left-nav-item);
 
   a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
-    color: $text-02;
+    color: $text-secondary;
 
     &:hover,
     &:focus {
-      color: $text-01;
+      color: $text-primary;
     }
   }
 
   &:last-child {
     a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
-      color: $link-01;
+      color: $link-primary;
 
       &:hover,
       &:focus {
-        color: $link-02;
+        color: $link-secondary;
       }
     }
   }
 }
 
-:host(#{$dds-prefix}-cloud-masthead-profile)
+:host(#{$c4d-prefix}-cloud-masthead-profile)
   .#{$prefix}--header__menu-title[aria-expanded='true']
   + .#{$prefix}--header__menu {
-  @include carbon--breakpoint-down('md') {
+  @include breakpoint-down(md) {
     width: 100vw;
   }
 }
 
-:host(#{$dds-prefix}-cloud-masthead-profile) a.#{$prefix}--header__menu-item {
+:host(#{$c4d-prefix}-cloud-masthead-profile) a.#{$prefix}--header__menu-item {
   svg {
-    fill: $icon-02;
+    fill: $icon-secondary;
   }
 }
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts
index ac4ce2cc638..6f76ded7831 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-heading.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import ArrowRight32 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/32.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud MegaMenu Category Heading.
  *
- * @element dds-cloud-megamenu-category-heading
+ * @element c4d-cloud-megamenu-category-heading
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-category-heading`)
-class DDSCloudMegaMenuCategoryHeading extends LitElement {
+@customElement(`${c4dPrefix}-cloud-megamenu-category-heading`)
+class C4DCloudMegaMenuCategoryHeading extends LitElement {
   /**
    * href.
    */
@@ -44,4 +45,4 @@ class DDSCloudMegaMenuCategoryHeading extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMegaMenuCategoryHeading;
+export default C4DCloudMegaMenuCategoryHeading;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts
index a057a58c5ac..699fe4b4a22 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link-group.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './cloud-masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud Megamenu category link group
  *
- * @element dds-cloud-megamenu-category-link-group
+ * @element c4d-cloud-megamenu-category-link-group
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-category-link-group`)
-class DDSCloudMegaMenuCategoryLinkGroup extends LitElement {
+@customElement(`${c4dPrefix}-cloud-megamenu-category-link-group`)
+class C4DCloudMegaMenuCategoryLinkGroup extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
@@ -28,4 +28,4 @@ class DDSCloudMegaMenuCategoryLinkGroup extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMegaMenuCategoryLinkGroup;
+export default C4DCloudMegaMenuCategoryLinkGroup;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts
index c9c298baf14..be75ba2cb85 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-category-link.ts
@@ -7,21 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import BXLink from '../../../internal/vendor/@carbon/web-components/components/link/link.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSLink from '../../../internal/vendor/@carbon/web-components/components/link/link.js';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud MegaMenu category link
  *
- * @element dds-cloud-megamenu-category-link
+ * @element c4d-cloud-megamenu-category-link
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-category-link`)
-class DDSCloudMegaMenuCateoryLink extends BXLink {
+@customElement(`${c4dPrefix}-cloud-megamenu-category-link`)
+class C4DCloudMegaMenuCateoryLink extends CDSLink {
   /**
    * link title.
    */
@@ -42,4 +43,4 @@ class DDSCloudMegaMenuCateoryLink extends BXLink {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMegaMenuCateoryLink;
+export default C4DCloudMegaMenuCateoryLink;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts
index bd15a281032..1fe862fdae5 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-left-navigation.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSMegaMenuRightNavigation from '../megamenu-right-navigation';
+import C4DMegaMenuRightNavigation from '../megamenu-right-navigation';
 import styles from './cloud-masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud Megamenu Left Navigation Section.
  *
- * @element dds-cloud-megamenu-left-navigation
+ * @element c4d-cloud-megamenu-left-navigation
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-left-navigation`)
-class DDSCloudMegaMenuLeftNavigation extends DDSMegaMenuRightNavigation {
+@customElement(`${c4dPrefix}-cloud-megamenu-left-navigation`)
+class C4DCloudMegaMenuLeftNavigation extends C4DMegaMenuRightNavigation {
   static styles = styles;
 }
 
-export default DDSCloudMegaMenuLeftNavigation;
+export default C4DCloudMegaMenuLeftNavigation;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts
index 177028a43b9..4a11c709dc0 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-right-navigation.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSMegaMenuLeftNavigation from '../megamenu-left-navigation';
+import C4DMegaMenuLeftNavigation from '../megamenu-left-navigation';
 import styles from './cloud-masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud Megamenu Right Navigation Section.
  *
- * @element dds-cloud-megamenu-right-navigation
+ * @element c4d-cloud-megamenu-right-navigation
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-right-navigation`)
-class DDSCloudMegaMenuRightNavigation extends DDSMegaMenuLeftNavigation {
+@customElement(`${c4dPrefix}-cloud-megamenu-right-navigation`)
+class C4DCloudMegaMenuRightNavigation extends C4DMegaMenuLeftNavigation {
   static styles = styles;
 }
 
-export default DDSCloudMegaMenuRightNavigation;
+export default C4DCloudMegaMenuRightNavigation;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts
index d73a9a8cc01..9755d1deda7 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tab.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import BXTab from '../../../internal/vendor/@carbon/web-components/components/tabs/tab.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import CDSTab from '../../../internal/vendor/@carbon/web-components/components/tabs/tab.js';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud Megamenu Tab.
  *
- * @element dds-cloud-megamenu-tab
+ * @element c4d-cloud-megamenu-tab
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-tab`)
-class DDSCloudMegaMenuTab extends BXTab {
+@customElement(`${c4dPrefix}-cloud-megamenu-tab`)
+class C4DCloudMegaMenuTab extends CDSTab {
   render() {
     const { disabled, selected } = this;
     return html`
@@ -40,4 +38,4 @@ class DDSCloudMegaMenuTab extends BXTab {
   static styles = styles;
 }
 
-export default DDSCloudMegaMenuTab;
+export default C4DCloudMegaMenuTab;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts
index 8cc8cdf8d8d..08fec50dc20 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu-tabs.ts
@@ -7,35 +7,35 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXTabs from '../../../internal/vendor/@carbon/web-components/components/tabs/tabs.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSTabs from '../../../internal/vendor/@carbon/web-components/components/tabs/tabs.js';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud Megamenu Tabs.
  *
- * @element dds-cloud-megamenu-tabs
+ * @element c4d-cloud-megamenu-tabs
  */
-@customElement(`${ddsPrefix}-cloud-megamenu-tabs`)
-class DDSCloudMegaMenuTabs extends BXTabs {
+@customElement(`${c4dPrefix}-cloud-megamenu-tabs`)
+class C4DCloudMegaMenuTabs extends CDSTabs {
   /**
    * A selector that will return megamenu tabs.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-cloud-megamenu-tab`;
+    return `${c4dPrefix}-cloud-megamenu-tab`;
   }
 
   /**
    * A selector that will return selected items.
    */
   static get selectorItemSelected() {
-    return `${ddsPrefix}-cloud-megamenu-tab[selected]`;
+    return `${c4dPrefix}-cloud-megamenu-tab[selected]`;
   }
 
   static styles = styles;
 }
 
-export default DDSCloudMegaMenuTabs;
+export default C4DCloudMegaMenuTabs;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts b/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts
index ff338a1ee13..efcebe81eee 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-megamenu.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSMegaMenu from '../megamenu';
+import { html } from 'lit';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DMegaMenu from '../megamenu';
 import styles from './cloud-masthead.scss';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud MegaMenu.
  *
- * @element dds-cloud-megamenu
+ * @element c4d-cloud-megamenu
  */
-@customElement(`${ddsPrefix}-cloud-megamenu`)
-class DDSCloudMegaMenu extends DDSMegaMenu {
+@customElement(`${c4dPrefix}-cloud-megamenu`)
+class C4DCloudMegaMenu extends C4DMegaMenu {
   render() {
     return html`
       <div class="${prefix}--masthead__megamenu__container">
@@ -35,10 +33,10 @@ class DDSCloudMegaMenu extends DDSMegaMenu {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__megamenu`;
+    return `${c4dPrefix}--masthead__megamenu`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSCloudMegaMenu;
+export default C4DCloudMegaMenu;
diff --git a/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts b/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts
index 516f8ce899c..031ebeb3d29 100644
--- a/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts
+++ b/packages/web-components/src/components/masthead/cloud/cloud-top-nav-name.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSTopNavName from '../top-nav-name';
+import C4DTopNavName from '../top-nav-name';
 import styles from './cloud-masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Cloud's brand name UI in top nav.
  *
- * @element dds-cloud-top-nav-name
+ * @element c4d-cloud-top-nav-name
  */
-@customElement(`${ddsPrefix}-cloud-top-nav-name`)
-class DDSCloudTopNavName extends DDSTopNavName {
+@customElement(`${c4dPrefix}-cloud-top-nav-name`)
+class C4DCloudTopNavName extends C4DTopNavName {
   static styles = styles;
 }
 
-export default DDSCloudTopNavName;
+export default C4DCloudTopNavName;
diff --git a/packages/web-components/src/components/masthead/defs.ts b/packages/web-components/src/components/masthead/defs.ts
index 2b29581410b..8082f0a9bd9 100644
--- a/packages/web-components/src/components/masthead/defs.ts
+++ b/packages/web-components/src/components/masthead/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2021
+ * 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.
@@ -36,6 +36,21 @@ export enum MEGAMENU_LINK_WITH_ICON_STYLE_SCHEME {
  * The style scheme for the right navigation.
  */
 export enum MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME {
+  /**
+   * Right navigation spans full width of megamenu.
+   */
+  FULL = 'full',
+
+  /**
+   * Megamenu has a sidebar (e.g. tabbed layout).
+   */
+  HAS_SIDEBAR = 'has-sidebar',
+}
+
+/**
+ * The style scheme for the right navigation.
+ */
+export enum LEGACY_MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME {
   /**
    * Regular style.
    */
@@ -45,4 +60,17 @@ export enum MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME {
    * For left (highlighted) section layout.
    */
   LEFT_SECTION = 'left-section',
+
+  /**
+   * For tabbed megamenus.
+   */
+  TAB = 'tab',
+}
+
+/**
+ * The layout options for rendering a megamenu
+ */
+export enum MEGAMENU_LAYOUT_SCHEME {
+  TAB = 'tab',
+  LIST = 'list',
 }
diff --git a/packages/web-components/src/components/masthead/left-nav-cta-item.ts b/packages/web-components/src/components/masthead/left-nav-cta-item.ts
new file mode 100644
index 00000000000..827604f8471
--- /dev/null
+++ b/packages/web-components/src/components/masthead/left-nav-cta-item.ts
@@ -0,0 +1,41 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022, 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 { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
+import BXSideNavMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-menu-item.js';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Masthead left nav CTA item.
+ *
+ * @element c4d-left-nav-cta-item
+ */
+@customElement(`${c4dPrefix}-left-nav-cta-item`)
+class C4DLeftNavCtaItem extends BXSideNavMenuItem {
+  render() {
+    const { href, title } = this;
+    return html`
+      <a part="link" class="${prefix}--side-nav__link" href="${href}">
+        <div part="title" class="${prefix}--side-nav__link-text">
+          <span><slot>${title}</slot></span>
+          ${ArrowRight16()}
+        </div>
+      </a>
+    `;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default C4DLeftNavCtaItem;
diff --git a/packages/web-components/src/components/masthead/left-nav-item.ts b/packages/web-components/src/components/masthead/left-nav-item.ts
deleted file mode 100644
index 00b57fe2390..00000000000
--- a/packages/web-components/src/components/masthead/left-nav-item.ts
+++ /dev/null
@@ -1,27 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import BXSideNavLink from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-link.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './masthead.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Masthead left nav item.
- *
- * @element dds-left-nav-item
- */
-@customElement(`${ddsPrefix}-left-nav-item`)
-class DDSLeftNavItem extends BXSideNavLink {
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-export default DDSLeftNavItem;
diff --git a/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts b/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
index fae44852e78..c7591e8aac6 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu-category-heading.ts
@@ -7,25 +7,77 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu Category Group Description.
  *
- * @element dds-megamenu-category-group-desc
+ * @element c4d-megamenu-category-group-desc
  */
-@customElement(`${ddsPrefix}-left-nav-menu-category-heading`)
-class DDSLeftNavMenuCategoryHeading extends LitElement {
+@customElement(`${c4dPrefix}-left-nav-menu-category-heading`)
+class C4DLeftNavMenuCategoryHeading extends LitElement {
+  @property({ attribute: 'title' })
+  headingText?: string;
+
+  @property({ attribute: 'url' })
+  url?: string;
+
+  @state()
+  boostSize?: boolean;
+
+  updated(changedProperties) {
+    if (changedProperties.has('boostSize')) {
+      this.classList.toggle(
+        `${prefix}--left-nav-menu-category__heading-large`,
+        this.boostSize
+      );
+    }
+  }
+
+  _renderHeading() {
+    const { headingText, url } = this;
+
+    const headingClasses = {
+      [`${prefix}--side-nav__menu-section-title`]: this.boostSize || false,
+      [`${prefix}--side-nav__heading-title`]: !url,
+    };
+
+    return url
+      ? html`
+          <h2 class="${classMap(headingClasses)}">
+            <a
+              href="${url}"
+              class="${prefix}--side-nav__heading-title"
+              data-attribute1="headerNav"
+              data-attribute2="FlatHdline"
+              data-attribute3="${headingText}">
+              ${headingText}${ArrowRight20()}
+            </a>
+          </h2>
+        `
+      : html` <h2 class="${classMap(headingClasses)}">${headingText}</h2> `;
+  }
+
   render() {
-    return html` <slot></slot> `;
+    return html`
+      <div class="${prefix}--side-nav__heading">
+        ${this._renderHeading()}
+        <div class="${prefix}--side-nav__heading-description">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLeftNavMenuCategoryHeading;
+export default C4DLeftNavMenuCategoryHeading;
diff --git a/packages/web-components/src/components/masthead/left-nav-menu-item.ts b/packages/web-components/src/components/masthead/left-nav-menu-item.ts
index e5706d7796e..30ecad0e9f8 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu-item.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu-item.ts
@@ -7,40 +7,82 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import BXSideNavMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-menu-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
+import CDSSideNavMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav-menu-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead left nav submenu item.
  *
- * @element dds-left-nav-menu-item
+ * @element c4d-left-nav-menu-item
  */
-@customElement(`${ddsPrefix}-left-nav-menu-item`)
-class DDSLeftNavMenuItem extends BXSideNavMenuItem {
+@customElement(`${c4dPrefix}-left-nav-menu-item`)
+class C4DLeftNavMenuItem extends CDSSideNavMenuItem {
+  @property({ attribute: 'is-heading' })
+  isHeading?: boolean;
+
+  @property({ attribute: 'is-view-all' })
+  isViewAll?: boolean;
+
+  updated(changedProperties) {
+    super.updated(changedProperties);
+
+    if (changedProperties.has('isHeading')) {
+      this.classList.toggle(
+        `${prefix}--side-nav__group-header`,
+        this.isHeading
+      );
+    }
+
+    if (changedProperties.has('isViewAll')) {
+      this.classList.toggle(
+        `${prefix}--side-nav__group-view-all`,
+        this.isViewAll
+      );
+    }
+  }
+
   render() {
-    const { active, href, title } = this;
-    const classes = classMap({
+    const { active, href, title, isHeading, isViewAll } = this;
+
+    const linkClasses = classMap({
       [`${prefix}--side-nav__link`]: true,
       [`${prefix}--side-nav__link--current`]: active,
     });
-    return html`
-      <a tabindex="-1" part="link" class="${classes}" href="${href}">
-        <span part="title" class="${prefix}--side-nav__link-text">
-          <slot>${title}</slot>
-        </span>
-      </a>
-    `;
+
+    return href
+      ? html`
+          <a
+            tabindex="-1"
+            part="link"
+            class="${linkClasses}"
+            href="${href}"
+            data-attribute1="headerNav"
+            data-attribute2="FlatItem"
+            data-attribute3="${title}">
+            <span part="title" class="${prefix}--side-nav__link-text">
+              <slot>${title}</slot>
+              ${isHeading || isViewAll ? ArrowRight16() : ''}
+            </span>
+          </a>
+        `
+      : html`
+          <span part="link" class="${linkClasses}">
+            <span part="title" class="${prefix}--side-nav__link-text">
+              <slot>${title}</slot>
+            </span>
+          </span>
+        `;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLeftNavMenuItem;
+export default C4DLeftNavMenuItem;
diff --git a/packages/web-components/src/components/masthead/left-nav-menu-section.ts b/packages/web-components/src/components/masthead/left-nav-menu-section.ts
index 10bf174a57d..c56d7f51271 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu-section.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu-section.ts
@@ -7,34 +7,32 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import ChevronLeft20 from '../../internal/vendor/@carbon/web-components/icons/chevron--left/20.js';
-import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import ChevronLeft16 from '../../internal/vendor/@carbon/web-components/icons/chevron--left/16.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
 import { selectorTabbable } from '../../internal/vendor/@carbon/web-components/globals/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { forEach } from '../../globals/internal/collection-helpers';
 import styles from './masthead.scss';
-import DDSLeftNav from './left-nav';
+import C4DLeftNav from './left-nav';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead left nav menu section.
  *
- * @element dds-left-nav-menu-section
- * @fires dds-left-nav-menu-beingtoggled
+ * @element c4d-left-nav-menu-section
+ * @fires c4d-left-nav-menu-beingtoggled
  *   The custom event fired before this side nav menu is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
- * @fires dds-left-nav-menu-toggled The custom event fired after this side nav menu is toggled upon a user gesture.
+ * @fires c4d-left-nav-menu-toggled The custom event fired after this side nav menu is toggled upon a user gesture.
  */
-@customElement(`${ddsPrefix}-left-nav-menu-section`)
-class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
+@customElement(`${c4dPrefix}-left-nav-menu-section`)
+class C4DLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
   /**
    * Set aria-hidden property.
    */
@@ -90,7 +88,7 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
   titleUrl = '';
 
   private async _requestLeftNavMenuSectionUpdate() {
-    const { eventToggle } = this.constructor as typeof DDSLeftNavMenuSection;
+    const { eventToggle } = this.constructor as typeof C4DLeftNavMenuSection;
     return new Promise((resolve: Function): void => {
       this.dispatchEvent(
         new CustomEvent(eventToggle, {
@@ -114,7 +112,7 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
    * Handler for the `click` event on the back button.
    */
   private _handleClickBack() {
-    const { eventToggle } = this.constructor as typeof DDSLeftNavMenuSection;
+    const { eventToggle } = this.constructor as typeof C4DLeftNavMenuSection;
     const id = this.sectionId.split(', ');
     let panelId = '';
     /**
@@ -184,7 +182,7 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
 
     if (changedProperties.has('expanded')) {
       const { selectorNavMenu, selectorNavItem } = this
-        .constructor as typeof DDSLeftNavMenuSection;
+        .constructor as typeof C4DLeftNavMenuSection;
       const { expanded, isSubmenu } = this;
 
       if (expanded) {
@@ -217,12 +215,12 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
         } else {
           // set focus to first menu item of section
           tabbable = (this.getRootNode() as ShadowRoot).querySelector(
-            DDSLeftNav.selectorNavItems
+            C4DLeftNav.selectorNavItems
           );
         }
 
         if (tabbable) {
-          document.addEventListener(
+          this.addEventListener(
             'transitionend',
             () => {
               (tabbable as HTMLElement).focus();
@@ -266,8 +264,6 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
   render() {
     const {
       backButtonText,
-      title,
-      titleUrl,
       _handleClickBack: handleClickBack,
       showBackBtn,
     } = this;
@@ -283,32 +279,12 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
                   tabindex="-1"
                   @click="${handleClickBack}">
                   <span class="${prefix}--side-nav__link-text"
-                    >${ChevronLeft20()}${backButtonText}</span
+                    >${ChevronLeft16()}${backButtonText}</span
                   >
                 </button>
               </li>
             `
           : undefined}
-        ${title && !titleUrl
-          ? html`
-              <li class="${prefix}--masthead__side-nav--submemu-title">
-                ${title}
-              </li>
-            `
-          : undefined}
-        ${title && titleUrl
-          ? html`
-              <a
-                class="${prefix}--masthead__side-nav--submemu-title"
-                href=${titleUrl}>
-                <span>${title}</span>
-                <div
-                  class="${prefix}--masthead__side-nav--submemu-section-title__icon">
-                  ${ArrowRight20()}
-                </div>
-              </a>
-            `
-          : undefined}
         <slot></slot>
       </ul>
     `;
@@ -318,21 +294,21 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
    * The name of the custom event fired after this side nav menu is toggled upon a user gesture.
    */
   static get eventToggle() {
-    return `${ddsPrefix}-left-nav-menu-toggled`;
+    return `${c4dPrefix}-left-nav-menu-toggled`;
   }
 
   /**
    * A selector that will return the nav menus.
    */
   static get selectorNavMenu() {
-    return `${ddsPrefix}-left-nav-menu`;
+    return `${c4dPrefix}-left-nav-menu`;
   }
 
   /**
    * A selector that will return the menu items.
    */
   static get selectorNavItem() {
-    return `${ddsPrefix}-left-nav-menu-item`;
+    return `${c4dPrefix}-left-nav-menu-item`;
   }
 
   /**
@@ -341,13 +317,12 @@ class DDSLeftNavMenuSection extends HostListenerMixin(FocusMixin(LitElement)) {
   static get selectorTabbable() {
     return [
       selectorTabbable,
-      `${ddsPrefix}-left-nav-item`,
-      `${ddsPrefix}-left-nav-menu`,
-      `${ddsPrefix}-left-nav-menu-item`,
+      `${c4dPrefix}-left-nav-menu`,
+      `${c4dPrefix}-left-nav-menu-item`,
     ].join(',');
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLeftNavMenuSection;
+export default C4DLeftNavMenuSection;
diff --git a/packages/web-components/src/components/masthead/left-nav-menu.ts b/packages/web-components/src/components/masthead/left-nav-menu.ts
index f6ab8739d60..b2f4c2c922f 100644
--- a/packages/web-components/src/components/masthead/left-nav-menu.ts
+++ b/packages/web-components/src/components/masthead/left-nav-menu.ts
@@ -7,29 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ChevronDown20 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/20.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import ChevronDown16 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/16.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead left nav submenu.
  *
- * @element dds-left-nav-menu
- * @fires dds-left-nav-menu-beingtoggled
+ * @element c4d-left-nav-menu
+ * @fires c4d-left-nav-menu-beingtoggled
  *   The custom event fired before this side nav menu is being toggled upon a user gesture.
  *   Cancellation of this event stops the user-initiated action of toggling this side nav menu.
- * @fires dds-left-nav-menu-toggled The custom event fired after this side nav menu is toggled upon a user gesture.
+ * @fires c4d-left-nav-menu-toggled The custom event fired after this side nav menu is toggled upon a user gesture.
  */
-@customElement(`${ddsPrefix}-left-nav-menu`)
-class DDSLeftNavMenu extends FocusMixin(LitElement) {
+@customElement(`${c4dPrefix}-left-nav-menu`)
+class C4DLeftNavMenu extends FocusMixin(LitElement) {
   /**
    * Handles user-initiated toggle request of this side nav menu.
    *
@@ -40,7 +39,7 @@ class DDSLeftNavMenu extends FocusMixin(LitElement) {
     panelId = this.panelId
   ) {
     const { eventBeforeToggle, eventToggle } = this
-      .constructor as typeof DDSLeftNavMenu;
+      .constructor as typeof C4DLeftNavMenu;
     const init = {
       bubbles: true,
       cancelable: true,
@@ -106,20 +105,26 @@ class DDSLeftNavMenu extends FocusMixin(LitElement) {
       [`${prefix}--side-nav__submenu`]: true,
       [`${prefix}--masthead__side-nav--submemu--selected`]: active,
     });
+
+    const isSubitem = this.parentElement?.hasAttribute('is-submenu') || false;
+
     return html`
       <div class="${prefix}--side-nav__item">
         <button
           type="button"
           aria-haspopup="true"
           tabindex="-1"
-          aria-expanded="${String(Boolean(expanded))}"
+          aria-expanded="${expanded}"
           class="${buttonClasses}"
-          @click=${handleClickExpando}>
+          @click=${handleClickExpando}
+          data-attribute1="headerNav"
+          data-attribute2="${isSubitem ? 'TabHdline' : 'L0'}"
+          data-attribute3="${title}">
           <div class="${prefix}--side-nav__submenu-content">
             <span class="${prefix}--side-nav__submenu-title">${title}</span>
             <div
               class="${prefix}--side-nav__icon ${prefix}--side-nav__icon--small ${prefix}--side-nav__submenu-chevron">
-              ${ChevronDown20()}
+              ${ChevronDown16()}
             </div>
           </div>
         </button>
@@ -132,17 +137,17 @@ class DDSLeftNavMenu extends FocusMixin(LitElement) {
    * Cancellation of this event stops the user-initiated action of toggling this side nav menu.
    */
   static get eventBeforeToggle() {
-    return `${ddsPrefix}-left-nav-menu-beingtoggled`;
+    return `${c4dPrefix}-left-nav-menu-beingtoggled`;
   }
 
   /**
    * The name of the custom event fired after this side nav menu is toggled upon a user gesture.
    */
   static get eventToggle() {
-    return `${ddsPrefix}-left-nav-menu-toggled`;
+    return `${c4dPrefix}-left-nav-menu-toggled`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLeftNavMenu;
+export default C4DLeftNavMenu;
diff --git a/packages/web-components/src/components/masthead/left-nav-name.ts b/packages/web-components/src/components/masthead/left-nav-name.ts
index 600396b0790..67eea9312e3 100644
--- a/packages/web-components/src/components/masthead/left-nav-name.ts
+++ b/packages/web-components/src/components/masthead/left-nav-name.ts
@@ -7,25 +7,24 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import BXHeaderName from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-name.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import CDSHeaderName from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-name.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
-import DDSLeftNav from './left-nav';
+import C4DLeftNav from './left-nav';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The brand name UI in left nav.
  *
- * @element dds-left-nav-name
+ * @element c4d-left-nav-name
  */
-@customElement(`${ddsPrefix}-left-nav-name`)
-class DDSLeftNavName extends BXHeaderName {
+@customElement(`${c4dPrefix}-left-nav-name`)
+class C4DLeftNavName extends CDSHeaderName {
   /**
    * Set slot name property.
    */
@@ -34,7 +33,7 @@ class DDSLeftNavName extends BXHeaderName {
 
   connectedCallback() {
     super.connectedCallback();
-    if (this.parentElement instanceof DDSLeftNav) {
+    if (this.parentElement instanceof C4DLeftNav) {
       this.slot = 'platform-id';
     }
   }
@@ -50,7 +49,7 @@ class DDSLeftNavName extends BXHeaderName {
     return html`
       <a
         class="${prefix}--side-nav__submenu ${prefix}--side-nav__submenu-platform"
-        href="${ifNonNull(href)}">
+        href="${ifDefined(href)}">
         ${namePrefixPart}
         <slot></slot>
       </a>
@@ -60,4 +59,4 @@ class DDSLeftNavName extends BXHeaderName {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLeftNavName;
+export default C4DLeftNavName;
diff --git a/packages/web-components/src/components/masthead/left-nav-overlay.ts b/packages/web-components/src/components/masthead/left-nav-overlay.ts
index 80e8bfba42e..240943a6df8 100644
--- a/packages/web-components/src/components/masthead/left-nav-overlay.ts
+++ b/packages/web-components/src/components/masthead/left-nav-overlay.ts
@@ -7,20 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Left nav overlay.
  *
- * @element dds-left-nav-overlay
+ * @element c4d-left-nav-overlay
  */
-@customElement(`${ddsPrefix}-left-nav-overlay`)
-class DDSLeftNavOverlay extends LitElement {
+@customElement(`${c4dPrefix}-left-nav-overlay`)
+class C4DLeftNavOverlay extends LitElement {
   /**
    * `true` if this overlay should represent its active state.
    */
@@ -41,4 +42,4 @@ class DDSLeftNavOverlay extends LitElement {
   static styles = styles;
 }
 
-export default DDSLeftNavOverlay;
+export default C4DLeftNavOverlay;
diff --git a/packages/web-components/src/components/masthead/left-nav.ts b/packages/web-components/src/components/masthead/left-nav.ts
index 0c20ee60b78..fb0e4463670 100644
--- a/packages/web-components/src/components/masthead/left-nav.ts
+++ b/packages/web-components/src/components/masthead/left-nav.ts
@@ -8,25 +8,24 @@
  */
 
 import findLast from 'lodash-es/findLast.js';
-import { html, query, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import { selectorTabbable } from '../../internal/vendor/@carbon/web-components/globals/settings.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import BXSideNav, {
+import CDSSideNav, {
   SIDE_NAV_USAGE_MODE,
 } from '../../internal/vendor/@carbon/web-components/components/ui-shell/side-nav.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import focuswrap from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/focuswrap/focuswrap';
 import { find, forEach } from '../../globals/internal/collection-helpers';
 import Handle from '../../globals/internal/handle';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSLeftNavOverlay from './left-nav-overlay';
+import C4DLeftNavOverlay from './left-nav-overlay';
 import styles from './masthead.scss';
-import DDSLeftNavMenuSection from './left-nav-menu-section';
+import C4DLeftNavMenuSection from './left-nav-menu-section';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 // eslint-disable-next-line no-bitwise
 const PRECEDING =
@@ -38,10 +37,10 @@ const FOLLOWING =
 /**
  * Masthead left nav.
  *
- * @element dds-left-nav
+ * @element c4d-left-nav
  */
-@customElement(`${ddsPrefix}-left-nav`)
-class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
+@customElement(`${c4dPrefix}-left-nav`)
+class C4DLeftNav extends StableSelectorMixin(CDSSideNav) {
   /**
    * The handle for focus wrapping.
    */
@@ -63,14 +62,14 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
   private _importedSideNav = false;
 
   /**
-   * Handles `dds-request-focus-wrap` event on the document.
+   * Handles `c4d-request-focus-wrap` event on the document.
    *
    * @param event The event.
    */
-  @HostListener('document:dds-request-focus-wrap')
+  @HostListener('document:c4d-request-focus-wrap')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleRequestMenuButtonFocusWrap = (event: CustomEvent) => {
-    const { selectorButtonToggle } = this.constructor as typeof DDSLeftNav;
+    const { selectorButtonToggle } = this.constructor as typeof C4DLeftNav;
     /**
      * If focus leaves this element, send focus to the menu toggle.
      * Else if focus leaves the menu toggle, bring it back to this element.
@@ -82,12 +81,15 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
       if (toggle) {
         (toggle as HTMLElement).focus();
       }
-    } else if ((event.target as HTMLElement).matches?.(selectorButtonToggle)) {
+    } else if (
+      (event.composedPath()[1] as HTMLElement).tagName ===
+      selectorButtonToggle.toUpperCase()
+    ) {
       const { comparisonResult } = event.detail;
       const {
         selectorExpandedMenuSection,
         selectorTabbable: selectorTabbableForLeftnav,
-      } = this.constructor as typeof DDSLeftNav;
+      } = this.constructor as typeof C4DLeftNav;
       const expandedMenuSection = this.querySelector(
         selectorExpandedMenuSection
       );
@@ -137,17 +139,16 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
   };
 
   private _handleClickOut(event: MouseEvent) {
-    const { target } = event;
-    const { selectorButtonToggle } = this.constructor as typeof DDSLeftNav;
+    const { selectorButtonToggle } = this.constructor as typeof C4DLeftNav;
     const toggleButton: HTMLElement | null = (
       this.getRootNode() as Document
     ).querySelector(selectorButtonToggle);
 
+    // TODO: check why `target` returns `c4d-masthead-container` (parent) in Lit v2
     if (
       this.expanded &&
-      target instanceof Element &&
-      target.closest(selectorButtonToggle) === null &&
-      target.closest(this.tagName) === null
+      (event.composedPath()[0] as HTMLElement).tagName ===
+        'C4D-LEFT-NAV-OVERLAY'
     ) {
       this.expanded = false;
       toggleButton?.focus();
@@ -157,7 +158,7 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
   @HostListener('keydown')
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleKeydown(event: KeyboardEvent) {
-    const { selectorButtonToggle } = this.constructor as typeof DDSLeftNav;
+    const { selectorButtonToggle } = this.constructor as typeof C4DLeftNav;
     const toggleButton: HTMLElement | null = (
       this.getRootNode() as Document
     ).querySelector(selectorButtonToggle);
@@ -169,10 +170,10 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
 
   @HostListener('parentRoot:eventToggle')
   protected _handleContentStateChangeDocument = (event: CustomEvent) => {
-    const { selectorMenuSections } = this.constructor as typeof DDSLeftNav;
+    const { selectorMenuSections } = this.constructor as typeof C4DLeftNav;
     const { panelId }: { panelId: string } = event.detail;
 
-    const menuSections: DDSLeftNavMenuSection[] = Array.from(
+    const menuSections: C4DLeftNavMenuSection[] = Array.from(
       this.querySelectorAll(selectorMenuSections)
     );
     const expandedSection = menuSections
@@ -229,7 +230,7 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
     ) {
       // eslint-disable-next-line no-console
       console.warn(
-        'dds-left-nav supports only `header-nav` for its `usage-mode` attribute or `usageMode` property. The value is ignored:',
+        'c4d-left-nav supports only `header-nav` for its `usage-mode` attribute or `usageMode` property. The value is ignored:',
         usageMode
       );
     }
@@ -237,10 +238,10 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
       const doc = this.getRootNode() as Document;
       forEach(
         doc.querySelectorAll(
-          (this.constructor as typeof DDSLeftNav).selectorOverlay
+          (this.constructor as typeof C4DLeftNav).selectorOverlay
         ),
         (item) => {
-          (item as DDSLeftNavOverlay).active = this.expanded;
+          (item as C4DLeftNavOverlay).active = this.expanded;
         }
       );
       const {
@@ -251,13 +252,14 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
 
       const masthead: HTMLElement | null | undefined = doc
         ?.querySelector(
-          `${ddsPrefix}-cloud-masthead-container,
-          ${ddsPrefix}-cloud-masthead-composite,
-          ${ddsPrefix}-masthead-container,
-          ${ddsPrefix}-masthead-composite`
+          `${c4dPrefix}-cloud-masthead-container,
+          ${c4dPrefix}-cloud-masthead-composite,
+          ${c4dPrefix}-masthead-container,
+          ${c4dPrefix}-masthead-composite`
         )
-        ?.querySelector(`${ddsPrefix}-masthead`);
+        ?.querySelector(`${c4dPrefix}-masthead`);
       if (expanded && !this._importedSideNav) {
+        import('./left-nav-cta-item');
         import('./left-nav-name');
         import('./left-nav-menu');
         import('./left-nav-menu-section');
@@ -271,14 +273,19 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
           startSentinelNode,
           endSentinelNode,
         ]);
-        document.body.style.overflow = 'hidden';
+
+        if (doc.body?.style) {
+          doc.body.style.overflow = `hidden`;
+        }
 
         // TODO: remove this logic once masthead can account for banners.
         // set masthead position to `fixed` when left-nav is open for cloud-mastead
-        masthead.style.position = 'fixed';
+        if (masthead) {
+          masthead!.style.position = 'fixed';
+        }
       } else {
         const { selectorMenuSections, selectorFirstMenuSection } = this
-          .constructor as typeof DDSLeftNav;
+          .constructor as typeof C4DLeftNav;
 
         // TODO: remove this logic once masthead can account for banners.
         // remove set position from mastead when left-nav is closed for cloud-mastead
@@ -288,16 +295,16 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
         }
 
         this.querySelectorAll(selectorMenuSections).forEach(
-          (ddsLeftNavMenuSection) => {
-            (ddsLeftNavMenuSection as DDSLeftNavMenuSection).expanded = false;
-            (ddsLeftNavMenuSection as DDSLeftNavMenuSection).transition = false;
+          (c4dLeftNavMenuSection) => {
+            (c4dLeftNavMenuSection as C4DLeftNavMenuSection).expanded = false;
+            (c4dLeftNavMenuSection as C4DLeftNavMenuSection).transition = false;
           }
         );
 
         // reset to first menu section
         this.querySelectorAll(selectorFirstMenuSection).forEach(
-          (ddsLeftNavMenuSection) => {
-            (ddsLeftNavMenuSection as DDSLeftNavMenuSection).expanded = true;
+          (c4dLeftNavMenuSection) => {
+            (c4dLeftNavMenuSection as C4DLeftNavMenuSection).expanded = true;
           }
         );
 
@@ -337,7 +344,7 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
    * A selector that will return the toggle buttons.
    */
   static get selectorButtonToggle() {
-    return `${ddsPrefix}-masthead-menu-button`;
+    return `${c4dPrefix}-masthead-menu-button`;
   }
 
   /**
@@ -345,10 +352,9 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
    */
   static get selectorNavItems() {
     return [
-      `${ddsPrefix}-left-nav-item`,
-      `${ddsPrefix}-left-nav-menu`,
-      `${ddsPrefix}-left-nav-menu-item`,
-      `${ddsPrefix}-left-nav-name`,
+      `${c4dPrefix}-left-nav-menu`,
+      `${c4dPrefix}-left-nav-menu-item`,
+      `${c4dPrefix}-left-nav-name`,
     ].join(', ');
   }
 
@@ -356,21 +362,21 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
    * A selector that will return menu sections.
    */
   static get selectorMenuSections() {
-    return `${ddsPrefix}-left-nav-menu-section`;
+    return `${c4dPrefix}-left-nav-menu-section`;
   }
 
   /**
    * A selector that will return expanded menu section.
    */
   static get selectorExpandedMenuSection() {
-    return `${ddsPrefix}-left-nav-menu-section[expanded]`;
+    return `${c4dPrefix}-left-nav-menu-section[expanded]`;
   }
 
   /**
    * A selector that will return first main visible menu section.
    */
   static get selectorFirstMenuSection() {
-    return `${ddsPrefix}-left-nav-menu-section[section-id='-1, -1']`;
+    return `${c4dPrefix}-left-nav-menu-section[section-id='-1, -1']`;
   }
 
   /**
@@ -379,10 +385,9 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
   static get selectorTabbable() {
     return [
       selectorTabbable,
-      `${ddsPrefix}-left-nav-item`,
-      `${ddsPrefix}-left-nav-menu`,
-      `${ddsPrefix}-left-nav-menu-item`,
-      `${ddsPrefix}-left-nav-name`,
+      `${c4dPrefix}-left-nav-menu`,
+      `${c4dPrefix}-left-nav-menu-item`,
+      `${c4dPrefix}-left-nav-name`,
     ].join(', ');
   }
 
@@ -390,21 +395,21 @@ class DDSLeftNav extends StableSelectorMixin(BXSideNav) {
    * A selector that will return the overlays.
    */
   static get selectorOverlay() {
-    return `${ddsPrefix}-left-nav-overlay`;
+    return `${c4dPrefix}-left-nav-overlay`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__l0-sidenav`;
+    return `${c4dPrefix}--masthead__l0-sidenav`;
   }
 
   /**
    * The name of the custom event fired after this side nav menu is toggled upon a user gesture.
    */
   static get eventToggle() {
-    return `${ddsPrefix}-left-nav-menu-toggled`;
+    return `${c4dPrefix}-left-nav-menu-toggled`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSLeftNav;
+export default C4DLeftNav;
diff --git a/packages/web-components/src/components/masthead/masthead-breakpoint.ts b/packages/web-components/src/components/masthead/masthead-breakpoint.ts
new file mode 100644
index 00000000000..9bb6680f8f0
--- /dev/null
+++ b/packages/web-components/src/components/masthead/masthead-breakpoint.ts
@@ -0,0 +1,13 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+// Magic Number: 799px matches masthead.scss's `$breakpoint--desktop-nav`.
+const mastheadBreakpoint = window.matchMedia(`(max-width: 799px)`);
+
+export default mastheadBreakpoint;
diff --git a/packages/web-components/src/components/masthead/masthead-button-cta.ts b/packages/web-components/src/components/masthead/masthead-button-cta.ts
new file mode 100644
index 00000000000..0ff6e3c0a0a
--- /dev/null
+++ b/packages/web-components/src/components/masthead/masthead-button-cta.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022, 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 BXButton from '../../internal/vendor/@carbon/web-components/components/button/button';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { CTA_TYPE } from '../cta/defs';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+
+export { CTA_TYPE };
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Masthead Button CTA.
+ *
+ * @element c4d--masthead-button-cta
+ */
+@customElement(`${c4dPrefix}-masthead-button-cta`)
+class C4DMastheadButtonCTA extends BXButton {
+  static styles = styles;
+
+  connectedCallback() {
+    super.connectedCallback();
+  }
+}
+
+export default C4DMastheadButtonCTA;
diff --git a/packages/web-components/src/components/masthead/masthead-composite.ts b/packages/web-components/src/components/masthead/masthead-composite.ts
index 85bf9c9a9d3..eebad67d9fd 100644
--- a/packages/web-components/src/components/masthead/masthead-composite.ts
+++ b/packages/web-components/src/components/masthead/masthead-composite.ts
@@ -7,37 +7,51 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement, TemplateResult } from 'lit-element';
-import { nothing, render } from 'lit-html';
-import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
+import { LitElement, html, TemplateResult } from 'lit';
+import { state, property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import { unsafeSVG } from 'lit-html/directives/unsafe-svg.js';
+import ifNonEmpty from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import root from 'window-or-global';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
+import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { globalInit } from '../../internal/vendor/@carbon/ibmdotcom-services/services/global/global';
 import MastheadLogoAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/MastheadLogo/MastheadLogo';
 import {
+  BasicLink,
   MastheadL1,
-  MastheadLink,
   MastheadLogoData,
-  MastheadMenuItem,
   MastheadProfileItem,
   Translation,
+  L0MenuItem,
+  L0Megamenu,
+  Megapanel,
+  MegapanelLinkGroup,
+  L1MenuItem,
 } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d';
-import { UNAUTHENTICATED_STATUS } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
+import {
+  UNAUTHENTICATED_STATUS,
+  CLOUD_UNAUTHENTICATED_STATUS,
+  MASTHEAD_AUTH_METHOD,
+} from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI';
 import { MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME } from './megamenu-right-navigation';
-import { DDS_CUSTOM_PROFILE_LOGIN } from '../../globals/internal/feature-flags';
-import DDSMastheadLogo from './masthead-logo';
+import { C4D_CUSTOM_PROFILE_LOGIN } from '../../globals/internal/feature-flags';
+import C4DMastheadLogo from './masthead-logo';
+import C4DMegaMenuTabs from './megamenu-tabs';
+import C4DMegamenuTopNavMenu from './megamenu-top-nav-menu';
 import './masthead';
+import './masthead-button-cta';
 import './masthead-l1';
 import './masthead-l1-name';
 import './masthead-menu-button';
+import './masthead-contact';
 import './masthead-global-bar';
 import './masthead-profile';
 import './masthead-profile-item';
 import './megamenu';
+import './megamenu-heading';
 import './megamenu-top-nav-menu';
 import './skip-to-content';
 import './top-nav';
@@ -50,9 +64,11 @@ import './left-nav';
 import '../search-with-typeahead/search-with-typeahead';
 import '../search-with-typeahead/search-with-typeahead-item';
 import styles from './masthead.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+import { MEGAMENU_LAYOUT_SCHEME } from './defs';
+import layoutBreakpoint from './masthead-breakpoint';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Rendering target for masthead navigation items.
@@ -69,190 +85,320 @@ export enum NAV_ITEMS_RENDER_TARGET {
   LEFT_NAV = 'left-nav',
 }
 
+/**
+ * Globally-scoped Contact Module variable.
+ *
+ * @see https://github.ibm.com/live-advisor/cm-app
+ */
+export interface CMApp {
+  version: string;
+  ready: boolean;
+  init: Function;
+  refresh: Function;
+  register: Function;
+  deregister: Function;
+  fireEvent: Function;
+  update: Function;
+  props: {
+    eventHandlers: any;
+    events: CustomEvent[];
+    getLoadedBundle: Function;
+  };
+}
+
 /**
  * Component that renders masthead from links, etc. data.
  *
- * @element dds-masthead-composite
+ * @element c4d-masthead-composite
  */
-@customElement(`${ddsPrefix}-masthead-composite`)
-class DDSMastheadComposite extends HostListenerMixin(LitElement) {
+@customElement(`${c4dPrefix}-masthead-composite`)
+class C4DMastheadComposite extends HostListenerMixin(LitElement) {
   /**
-   * Renders L1 menu based on l1Data
+   * Renders L1 menu based on l1Data & screen width.
    *
-   * @param [options] The options.
-   * @param [options.selectedMenuItem] The selected nav item.
-   * @returns The L1 nav.
+   * @returns {TemplateResult | undefined} The L1 nav.
    */
-  protected _renderL1({
-    selectedMenuItem,
-  }: { selectedMenuItem?: string } = {}) {
+  protected _renderL1() {
     if (!this.l1Data) return undefined;
-    const { url, title } = this.l1Data;
-    const isSelected = !this._hasAutoSelectedItems && !selectedMenuItem;
+
     return html`
-      <dds-masthead-l1 slot="masthead-l1">
-        ${!title
-          ? undefined
-          : html`
-              <dds-masthead-l1-name
-                title="${title}"
-                aria-selected="${isSelected}"
-                url="${url}"></dds-masthead-l1-name>
-            `}
-        <dds-top-nav-l1 selected-menu-item=${selectedMenuItem}
-          >${this._renderNavItems({
-            selectedMenuItem,
-            target: NAV_ITEMS_RENDER_TARGET.TOP_NAV,
-            hasL1: true,
-          })}</dds-top-nav-l1
-        >
-      </dds-masthead-l1>
+      <c4d-masthead-l1
+        slot="masthead-l1"
+        .l1Data=${this.l1Data}
+        selected-menu-item=${this.selectedMenuItemL1 || ''}>
+      </c4d-masthead-l1>
     `;
   }
 
   /**
    * Renders masthead logo
    *
+   * @returns TemplateResult
    */
   protected _renderLogo() {
     if (!this.logoData) {
       return html`
-        <dds-masthead-logo
-          ?hide-logo="${this.activateSearch}"></dds-masthead-logo>
+        <c4d-masthead-logo
+          ?hide-logo="${this.activateSearch}"></c4d-masthead-logo>
       `;
     }
     const useAlternateLogo = MastheadLogoAPI.setMastheadLogo(this.logoData);
     const { tooltip, svg, href } = this.logoData;
     return html`
-      <dds-masthead-logo
+      <c4d-masthead-logo
         ?hide-logo="${this.activateSearch}"
         ?hasTooltip="${tooltip}"
-        aria-label="${ifNonNull(tooltip)}"
-        href="${href || DDSMastheadLogo.hrefDefault}"
-        >${useAlternateLogo ? unsafeSVG(svg) : nothing}</dds-masthead-logo
+        aria-label="${ifDefined(tooltip)}"
+        href="${href || C4DMastheadLogo.hrefDefault}"
+        >${useAlternateLogo ? unsafeSVG(svg) : ''}</c4d-masthead-logo
       >
     `;
   }
 
   /**
-   * Sorts highlighted and regular menu items in separate arrays
-   * and returns view all link
+   * Render MegaMenu content
    *
-   * @param sections menu section data object
+   * @param menu megamenu data object
+   * @param _parentKey parent key
+   * @param layout layout selection to render the megamenu with
+   * @returns TemplateResult
    */
   // eslint-disable-next-line class-methods-use-this
-  protected _getHighlightedMenuItems(sections) {
-    const highlightedItems: MastheadMenuItem[] = [];
-    let viewAllLink;
-    const menu: MastheadMenuItem[] = [];
-
-    sections[0]?.menuItems?.forEach((item: MastheadMenuItem) => {
-      if (item.highlighted) return highlightedItems.push(item);
-      if (item.megaPanelViewAll) {
-        viewAllLink = item;
-        return viewAllLink;
-      }
-      return menu.push(item);
+  protected _renderMegaMenu(
+    menu: L0Megamenu,
+    _parentKey,
+    layout: MEGAMENU_LAYOUT_SCHEME = MEGAMENU_LAYOUT_SCHEME.LIST
+  ): TemplateResult {
+    const { _megamenuRenderMap } = this;
+    if (_megamenuRenderMap.has(layout)) {
+      return (_megamenuRenderMap.get(layout) as Function)(menu, _parentKey);
+    }
+    return this._renderMegaMenuListing(menu, _parentKey);
+  }
+
+  /**
+   *  Render MegaMenu content in tabbed layout.
+   *
+   * @param menu megamenu data object
+   * @param _parentKey key that identifies parent nav item
+   * @returns TemplateResult
+   */
+  protected _renderMegaMenuTabbed(menu: L0Megamenu, _parentKey) {
+    const { viewAll, sections } = menu;
+    type menuItem = Megapanel & { itemKey: String };
+    const sortedMenuItems: menuItem[] = [];
+    sections.forEach((section, i) => {
+      return sortedMenuItems.push({
+        ...section,
+        itemKey: `${_parentKey}-${i}`,
+      });
     });
 
-    return { viewAllLink, highlightedItems, menu };
+    const activeMenuItem = this._activeMegamenuTabKey
+      ? sortedMenuItems.find(
+          (item) => item.itemKey === this._activeMegamenuTabKey
+        )
+      : sortedMenuItems[0];
+
+    return html`
+      <c4d-megamenu layout="${MEGAMENU_LAYOUT_SCHEME.TAB}">
+        <c4d-megamenu-left-navigation>
+          <c4d-megamenu-tabs
+            value="${ifNonEmpty(activeMenuItem?.heading?.title)}">
+            ${sortedMenuItems.map((item) => {
+              return item?.heading?.title
+                ? html`
+                    <c4d-megamenu-tab
+                      id="tab-${item.itemKey}"
+                      target="panel-${item.itemKey}"
+                      value="${item.heading.title}">
+                      ${item.heading.title}
+                    </c4d-megamenu-tab>
+                  `
+                : '';
+            })}
+          </c4d-megamenu-tabs>
+          ${viewAll?.url && viewAll?.title
+            ? html`
+                <c4d-megamenu-link-with-icon
+                  href="${viewAll.url}"
+                  part="view-all view-all-left"
+                  slot="view-all">
+                  <span>${viewAll.title}</span>${ArrowRight16({ slot: 'icon' })}
+                </c4d-megamenu-link-with-icon>
+              `
+            : null}
+        </c4d-megamenu-left-navigation>
+        ${this._renderMegamenuTabPanel(activeMenuItem)}
+      </c4d-megamenu>
+    `;
+  }
+
+  protected _renderMegamenuTabPanel(menuItem) {
+    const { itemKey, groups, heading, viewAll: itemViewAll } = menuItem;
+    return html`
+      <div
+        id="panel-${itemKey}"
+        role="tabpanel"
+        aria-labelledby="tab-${itemKey}">
+        <c4d-megamenu-right-navigation
+          class="${c4dPrefix}--masthead__tabpanel-child"
+          style-scheme="${MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.HAS_SIDEBAR}">
+          ${heading?.title
+            ? html`
+                <c4d-megamenu-heading
+                  href="${ifNonEmpty(heading?.url)}"
+                  title="${heading?.title}"
+                  slot="heading">
+                  ${heading?.description}
+                </c4d-megamenu-heading>
+              `
+            : ''}
+          ${groups
+            ? groups.map((group, i) =>
+                this._renderMegapanelLinkGroup(group, {
+                  autoid: `panel-${itemKey}-${i}`,
+                })
+              )
+            : ''}
+          ${itemViewAll?.url && itemViewAll?.title
+            ? html`
+                <c4d-megamenu-link-with-icon
+                  href="${itemViewAll.url}"
+                  part="view-all view-all-right"
+                  slot="view-all">
+                  <span>${itemViewAll.title}</span>${ArrowRight16({
+                    slot: 'icon',
+                  })}
+                </c4d-megamenu-link-with-icon>
+              `
+            : null}
+        </c4d-megamenu-right-navigation>
+      </div>
+    `;
   }
 
   /**
-   *  Render MegaMenu content
+   * Render MegaMenu content in listing layout.
    *
-   * @param sections menu section data object
-   * @param _parentKey parent menu key (used for the cloud-masthead-composite component)
+   * @param menu megamenu data object
+   * @param _parentKey key that identifies parent nav item
+   * @returns TemplateResult
    */
   // eslint-disable-next-line
-  protected _renderMegaMenu(sections, _parentKey) {
-    const { viewAllLink, highlightedItems, menu } =
-      this._getHighlightedMenuItems(sections);
-    const hasHighlights = highlightedItems.length !== 0;
+  protected _renderMegaMenuListing(menu: L0Megamenu, _parentKey) {
+    const megapanel = menu.sections[0];
+    const { heading } = megapanel;
+    const { viewAll, highlights } = menu;
+
     return html`
-      <dds-megamenu>
-        ${hasHighlights
+      <c4d-megamenu layout="${MEGAMENU_LAYOUT_SCHEME.LIST}">
+        ${highlights
           ? html`
-              <dds-megamenu-left-navigation>
-                ${sections[0]?.heading &&
-                html`
-                  <dds-megamenu-category-group-copy
-                    >${sections[0]?.heading}</dds-megamenu-category-group-copy
-                  >
-                `}
-                ${highlightedItems.map((item, i) => {
-                  const autoid = `${ddsPrefix}--masthead__l0-nav-list${i}`;
-                  return html`
-                    <dds-megamenu-category-group
-                      data-autoid="${autoid}"
-                      href="${item.url}"
-                      title="${item.title}">
-                      <dds-megamenu-category-group-copy
-                        >${item.megapanelContent
-                          ?.description}</dds-megamenu-category-group-copy
-                      >
-                      ${item.megapanelContent?.quickLinks?.links.map(
-                        ({ title, url, highlightedLink }, key) => {
-                          return html`
-                            ${highlightedLink
-                              ? html`
-                                  <dds-megamenu-link-with-icon
-                                    data-autoid="${autoid}-item${key}"
-                                    href="${url}"
-                                    style-scheme="category-sublink"
-                                    title="${title}">
-                                    <span>${title}</span>${ArrowRight16({
-                                      slot: 'icon',
-                                    })}
-                                  </dds-megamenu-link-with-icon>
-                                `
-                              : html`
-                                  <dds-megamenu-category-link
-                                    data-autoid="${autoid}-item${key}"
-                                    title="${title}"
-                                    href="${url}">
-                                  </dds-megamenu-category-link>
-                                `}
-                          `;
-                        }
-                      )}
-                    </dds-megamenu-category-group>
-                  `;
-                })}
-              </dds-megamenu-left-navigation>
+              <c4d-megamenu-left-navigation>
+                ${highlights.map((group, i) =>
+                  this._renderMegapanelLinkGroup(group, {
+                    headingLevel: 2,
+                    autoid: `${c4dPrefix}--masthead__l0-nav-list${i}`,
+                  })
+                )}
+              </c4d-megamenu-left-navigation>
+            `
+          : null}
+        <c4d-megamenu-right-navigation
+          style-scheme="${highlights
+            ? MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.HAS_SIDEBAR
+            : MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.FULL}">
+          ${heading && !highlights
+            ? html`
+                <c4d-megamenu-heading
+                  href="${ifNonEmpty(heading.url)}"
+                  title="${ifNonEmpty(heading.title)}"
+                  slot="heading">
+                  ${heading.description}
+                </c4d-megamenu-heading>
+              `
+            : ''}
+          ${megapanel.groups.map((group, i) =>
+            this._renderMegapanelLinkGroup(group, {
+              headingLevel: heading ? 3 : 2,
+              autoid: `${c4dPrefix}--masthead__l0-nav-list${
+                i + (highlights ? highlights.length : 0)
+              }`,
+            })
+          )}
+          ${viewAll?.url && viewAll?.title
+            ? html`
+                <c4d-megamenu-link-with-icon
+                  href="${viewAll.url}"
+                  part="view-all view-all-right"
+                  slot="view-all">
+                  <span>${viewAll.title}</span>${ArrowRight16({ slot: 'icon' })}
+                </c4d-megamenu-link-with-icon>
+              `
+            : null}
+        </c4d-megamenu-right-navigation>
+        ${viewAll?.url && viewAll?.title
+          ? html`
+              <c4d-megamenu-link-with-icon
+                href="${viewAll.url}"
+                part="view-all view-all-bottom">
+                <span>${viewAll.title}</span>${ArrowRight16({ slot: 'icon' })}
+              </c4d-megamenu-link-with-icon>
             `
           : null}
-        <dds-megamenu-right-navigation
-          style-scheme="${hasHighlights
-            ? MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.LEFT_SECTION
-            : MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.REGULAR}"
-          view-all-href="${ifNonNull(viewAllLink?.url)}"
-          view-all-title="${ifNonNull(viewAllLink?.title)}">
-          ${menu.map((item, j) => {
-            const autoid = `${ddsPrefix}--masthead__l0-nav-list${
-              j + highlightedItems.length
-            }`;
+      </c4d-megamenu>
+    `;
+  }
+
+  /**
+   * Render a Megapanel link group.
+   *
+   * @param group megamenu link group
+   * @returns TemplateResult
+   */
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderMegapanelLinkGroup(
+    group: MegapanelLinkGroup,
+    options: { headingLevel?: Number; autoid?: String } = { headingLevel: 3 }
+  ) {
+    const { links, heading } = group;
+    const { headingLevel, autoid } = options;
+    return html`
+      <c4d-megamenu-category-group data-autoid="${ifNonEmpty(autoid)}">
+        ${heading?.title
+          ? html`
+              <c4d-megamenu-category-heading
+                title="${heading.title}"
+                href="${ifNonEmpty(heading?.url)}"
+                slot="heading"
+                heading-level="${ifNonEmpty(headingLevel)}">
+                ${heading?.description}
+              </c4d-megamenu-category-heading>
+            `
+          : ''}
+        ${links &&
+        links.map((link, i) => {
+          const linkAutoId = autoid ? `${autoid}-item${i}` : null;
+          if (link?.description) {
             return html`
-              <dds-megamenu-category-group
-                data-autoid="${autoid}"
-                href="${item.url}"
-                title="${item.title}">
-                ${item.megapanelContent?.quickLinks?.links.map(
-                  ({ title, url }, key) => {
-                    return html`
-                      <dds-megamenu-category-link
-                        data-autoid="${autoid}-item${key}"
-                        title="${title}"
-                        href="${url}">
-                      </dds-megamenu-category-link>
-                    `;
-                  }
-                )}
-              </dds-megamenu-category-group>
+              <c4d-megamenu-category-link
+                title="${link?.title}"
+                href="${ifNonEmpty(link?.url)}"
+                data-autoid="${ifNonEmpty(linkAutoId)}">
+                ${link?.description}
+              </c4d-megamenu-category-link>
             `;
-          })}
-        </dds-megamenu-right-navigation>
-      </dds-megamenu>
+          }
+          return html`
+            <c4d-megamenu-category-link
+              href="${ifNonEmpty(link?.url)}"
+              data-autoid="${ifNonEmpty(linkAutoId)}">
+              ${link?.title}
+            </c4d-megamenu-category-link>
+          `;
+        })}
+      </c4d-megamenu-category-group>
     `;
   }
 
@@ -260,6 +406,7 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    * Renders the left nav menus sections
    *
    * @param object heading heading of menu section
+   * @param object.ctas cta items
    * @param object.menuItems menu items
    * @param object.heading heading heading of menu section
    * @param object.isSubmenu determines whether menu section is a submenu section
@@ -270,8 +417,9 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    */
   // eslint-disable-next-line class-methods-use-this
   protected _renderLeftNavMenuSections({
+    ctas,
     menuItems,
-    heading = '',
+    heading,
     isSubmenu = false,
     showBackButton = false,
     sectionTitle = '',
@@ -281,45 +429,70 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
     const items = menuItems.map((elem) => {
       if (elem.menu) {
         return html`
-          <dds-left-nav-menu
+          <c4d-left-nav-menu
             ?last-highlighted=${elem.lastHighlightedItem}
             panel-id=${elem.panelId}
             ?active="${elem.selected}"
             title="${elem.title}"
             data-autoid="${elem.autoid}">
-          </dds-left-nav-menu>
+          </c4d-left-nav-menu>
         `;
       }
 
       return html`
-        <dds-left-nav-menu-item
+        <c4d-left-nav-menu-item
           ?last-highlighted=${elem.lastHighlightedItem}
           ?active="${elem.selected}"
           href="${elem.url}"
           title="${elem.title}"
-          data-autoid="${elem.autoid}"></dds-left-nav-menu-item>
+          data-autoid="${elem.autoid}"
+          .isHeading=${elem.isHeading ?? false}
+          .isViewAll=${elem.isViewAll ?? false}></c4d-left-nav-menu-item>
       `;
     });
 
     if (heading) {
-      items.unshift(
-        html`
-          <dds-left-nav-menu-category-heading
-            >${heading}</dds-left-nav-menu-category-heading
-          >
-        `
-      );
+      if (typeof heading === 'string') {
+        items.unshift(
+          html`
+            <c4d-left-nav-menu-category-heading
+              title="${heading}"></c4d-left-nav-menu-category-heading>
+          `
+        );
+      } else {
+        const { title, description, url } = heading;
+        items.unshift(
+          html`
+            <c4d-left-nav-menu-category-heading
+              .boostSize=${true}
+              title="${title}"
+              url="${ifDefined(url)}">
+              ${description ?? ''}
+            </c4d-left-nav-menu-category-heading>
+          `
+        );
+      }
+    }
+
+    if (ctas) {
+      ctas.forEach((cta) => {
+        items.push(html`
+          <c4d-left-nav-cta-item href="${ifNonEmpty(cta.url)}">
+            ${cta.title}
+          </c4d-left-nav-cta-item>
+        `);
+      });
     }
 
     return html`
-      <dds-left-nav-menu-section
+      <c4d-left-nav-menu-section
         section-id="${sectionId}"
-        ?is-submenu=${ifNonNull(isSubmenu)}
-        title=${ifNonNull(sectionTitle)}
-        titleUrl=${ifNonNull(sectionUrl)}
-        ?show-back-button=${ifNonNull(showBackButton)}>
+        ?is-submenu=${ifDefined(isSubmenu)}
+        title=${ifDefined(sectionTitle)}
+        titleUrl=${ifDefined(sectionUrl)}
+        ?show-back-button=${ifDefined(showBackButton)}>
         ${items}
-      </dds-left-nav-menu-section>
+      </c4d-left-nav-menu-section>
     `;
   }
 
@@ -330,6 +503,7 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    */
   // eslint-disable-next-line class-methods-use-this
   protected _selectedLeftNavItems() {
+    const { currentUrlPath } = this;
     let matchFound = false;
     const selectedItems = { level0: '', level1: '', level2: '' };
 
@@ -339,7 +513,6 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
       ],
       key = '',
       parentItemUrl = '',
-      currentUrlPath = '',
     }) => {
       if (!matchFound) {
         if (parentItemUrl === currentUrlPath) {
@@ -379,302 +552,486 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    * Renders the left nav menus
    *
    * @param menuItems The options.
-   * @param selectedMenuItem The selected menu item
    * @param autoid Base autoid to be applied to the menu items
-   * @param currentUrlPath current url path
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _renderLeftNav(
-    menuItems,
-    selectedMenuItem,
-    autoid,
-    currentUrlPath
-  ) {
+  protected _renderLeftNav(menuItems: L0MenuItem[], autoid) {
+    const { ctaButtons } = this;
     const menu: any[] = [];
-    const selectedItemUrl = this._selectedLeftNavItems();
-    const level0Items = menuItems.map((elem, i) => {
-      if (elem.menuSections) {
-        const level1Items: {
-          title: string;
-          panelId: string;
-          autoid: string;
-          lastHighlightedItem: boolean;
-          url?: string;
-          menu: boolean;
-          selected: boolean;
-        }[] = [];
-
-        let menuElems = elem.menuSections[0]?.menuItems;
-        let highlightedItems: MastheadMenuItem[] = [];
-
-        if (elem.hasMegapanel) {
-          const {
-            viewAllLink,
-            highlightedItems: hightlighted,
-            menu: nonHighlightedMenuItems,
-          } = this._getHighlightedMenuItems(elem.menuSections);
-          highlightedItems = hightlighted;
-          menuElems = hightlighted.concat(nonHighlightedMenuItems);
-          if (viewAllLink) {
-            menuElems.push(viewAllLink);
-          }
+    const level0Items = menuItems.map((elem: L0MenuItem, i) => {
+      // Instantiate bucket for first level submenus.
+      const level1Items: {
+        title: string;
+        panelId: string;
+        autoid: string;
+        lastHighlightedItem: boolean;
+        url?: string;
+        menu: boolean;
+        selected: boolean;
+        isHeading?: boolean;
+        isViewAll?: boolean;
+        heading?: string;
+        description?: string;
+      }[] = [];
+
+      // If it's a "simple" menu, no megapanels.
+      if (elem?.submenu instanceof Array) {
+        elem.submenu.forEach((link, j) => {
+          level1Items.push({
+            title: link.title,
+            url: link.url,
+            autoid: `${autoid}--sidenav--nav${i}-list${j}`,
+            lastHighlightedItem: false,
+            panelId: `${i}, ${j}`,
+            menu: false,
+            selected: false,
+          });
+        });
+
+        if (level1Items.length !== 0) {
+          menu.push(
+            this._renderLeftNavMenuSections({
+              ctas: undefined,
+              menuItems: level1Items,
+              isSubmenu: true,
+              showBackButton: true,
+              sectionTitle: elem.title,
+              sectionUrl: elem.url,
+              sectionId: `${i}, -1`,
+              heading: elem.title,
+            })
+          );
         }
+      }
 
-        const selectedItems = selectedItemUrl({
-          menu: menuElems,
-          key: i,
-          parentItemUrl: elem.url,
-          currentUrlPath,
-        });
+      // If it's a megapanel.
+      const submenu = elem.submenu as L0Megamenu;
+      if (submenu?.sections) {
+        // Check if other types of links exist.
+        const highlightedItems = submenu?.highlights || [];
+        const viewAll = submenu?.viewAll;
+
+        // 1. Add highlighted items to top of menu.
+        if (highlightedItems.length !== 0) {
+          highlightedItems.forEach((highlight: MegapanelLinkGroup, j) => {
+            const { heading, links } = highlight;
+            const lastHighlighted = j + 1 === highlightedItems.length;
+
+            if (heading) {
+              level1Items.push({
+                title: heading.title,
+                url: heading.url,
+                autoid: `${autoid}--sidenav--nav${i}-list${j}`,
+                lastHighlightedItem: lastHighlighted,
+                panelId: `${i}, ${j}`,
+                menu: false,
+                selected: false,
+                isHeading: true,
+              });
+            }
+            if (links) {
+              links.forEach((link, k) => {
+                level1Items.push({
+                  title: link.title,
+                  url: link.url,
+                  autoid: `${autoid}--sidenav--nav${i}-list${j}-item${k}`,
+                  lastHighlightedItem: lastHighlighted,
+                  panelId: `${i}, ${j}`,
+                  menu: false,
+                  selected: false,
+                });
+              });
+            }
+          });
+        }
 
-        // render level 1 menu sections
-        menuElems?.map((item, k) => {
-          const level2Items: {
-            title: string;
-            url?: string;
-            autoid: string;
-            selected: boolean;
-          }[] = [];
-
-          const lastHighlighted = k + 1 === highlightedItems.length;
-
-          // render level 2 menu sections
-          item.megapanelContent?.quickLinks?.links.map((submenu, j) => {
-            return level2Items.push({
-              title: submenu.title,
-              url: submenu.url,
-              autoid: `${autoid}--sidenav--nav${i}-list${k}-item${j}`,
-              selected: !selectedMenuItem
-                ? selectedItems?.level2 === `${i}-${k}-${j}`
-                : selectedMenuItem === submenu.titleEnglish,
+        /**
+         * 2. Add megamenu links to menu.
+         *
+         * `sections`' length implies a tabbed or listing megamenu, which must
+         * be handled in different ways and have slightly different content
+         * requirements.
+         */
+        if (submenu.sections.length > 1) {
+          submenu.sections.map((item: Megapanel, j) => {
+            const { heading, groups } = item;
+            const lastHighlighted = j + 1 === highlightedItems.length;
+            const level2Items: {
+              title: string;
+              url?: string;
+              autoid: string;
+              selected: boolean;
+              isHeading?: boolean;
+            }[] = [];
+
+            groups.forEach((linkGroup: MegapanelLinkGroup, k) => {
+              const { heading: groupHeading, links } = linkGroup;
+
+              if (groupHeading) {
+                level2Items.push({
+                  title: groupHeading.title,
+                  url: groupHeading.url,
+                  autoid: `${autoid}--sidenav--nav${i}-list${j}-heading${k}`,
+                  selected: false,
+                  isHeading: true,
+                });
+              }
+              if (links) {
+                links.forEach((link, l) => {
+                  level2Items.push({
+                    title: link.title,
+                    url: link.url,
+                    autoid: `${autoid}--sidenav--nav${i}-list${j}-heading${k}-item${l}`,
+                    selected: false,
+                  });
+                });
+              }
+            });
+
+            if (level2Items.length !== 0) {
+              menu.push(
+                this._renderLeftNavMenuSections({
+                  ctas: undefined,
+                  menuItems: level2Items,
+                  isSubmenu: true,
+                  showBackButton: true,
+                  sectionTitle: heading?.title,
+                  sectionUrl: heading?.url,
+                  sectionId: `${i}, ${j}`,
+                  heading,
+                })
+              );
+            }
+
+            return level1Items.push({
+              title: (heading as BasicLink).title, // headings are required in tabbed layout
+              url: heading?.url,
+              autoid: `${autoid}--sidenav--nav${i}-list${j}`,
+              lastHighlightedItem: lastHighlighted,
+              panelId: `${i}, ${j}`,
+              selected: false,
+              menu: groups && groups.length !== 0,
             });
           });
+        } else {
+          submenu.sections[0].groups.forEach((group: MegapanelLinkGroup, j) => {
+            const { heading, links } = group;
+            const lastHighlighted = j + 1 === highlightedItems.length;
+
+            if (heading) {
+              level1Items.push({
+                title: heading.title,
+                url: heading.url,
+                lastHighlightedItem: lastHighlighted,
+                panelId: `${i}, ${j}`,
+                autoid: `${autoid}--sidenav--nav${i}-list${j}`,
+                menu: false,
+                selected: false,
+                isHeading: true,
+              });
+            }
 
-          if (level2Items.length !== 0) {
-            menu.push(
-              this._renderLeftNavMenuSections({
-                menuItems: level2Items,
-                isSubmenu: true,
-                showBackButton: true,
-                sectionTitle: item.title,
-                sectionUrl: item.url,
-                sectionId: `${i}, ${k}`,
-              })
-            );
-          }
+            if (links) {
+              links.forEach((link, k) => {
+                level1Items.push({
+                  title: link.title,
+                  url: link.url,
+                  lastHighlightedItem: lastHighlighted,
+                  panelId: `${i}, ${j}, ${k}`,
+                  autoid: `${autoid}--sidenav--nav${i}-list${j}-item${k}`,
+                  menu: false,
+                  selected: false,
+                });
+              });
+            }
+          });
+        }
 
-          return level1Items.push({
-            title: item.title,
-            autoid: `${autoid}--sidenav--nav${i}-list${k}`,
-            lastHighlightedItem: lastHighlighted,
-            url: item.url,
-            panelId: `${i}, ${k}`,
-            selected: !selectedMenuItem
-              ? selectedItems?.level1 === `${i}-${k}`
-              : selectedMenuItem === item.titleEnglish,
-            menu:
-              item.megapanelContent?.quickLinks?.links &&
-              item.megapanelContent?.quickLinks?.links.length !== 0,
+        // 3. Add view all link to bottom of menu.
+        if (viewAll) {
+          level1Items.push({
+            title: viewAll.title,
+            url: viewAll.url,
+            lastHighlightedItem: false,
+            panelId: `${i}`,
+            autoid: `${autoid}--sidenav--nav${i}-list${level1Items.length}`,
+            menu: false,
+            selected: false,
+            isViewAll: true,
           });
-        });
+        }
 
         if (level1Items.length !== 0) {
+          const isNotFaceted = submenu.sections.length === 1;
+          const megapanelHeading = submenu.sections[0].heading;
+
+          const heading =
+            isNotFaceted && !!megapanelHeading ? megapanelHeading : elem.title;
+
           menu.push(
             this._renderLeftNavMenuSections({
+              ctas: undefined,
               menuItems: level1Items,
-              heading: elem.menuSections[0]?.heading,
               isSubmenu: true,
               showBackButton: true,
               sectionTitle: elem.title,
               sectionUrl: elem.url,
               sectionId: `${i}, -1`,
+              heading,
             })
           );
         }
       }
 
-      const selectedItems = selectedItemUrl({
-        key: i,
-        parentItemUrl: elem.url,
-        currentUrlPath,
-      });
-
       return {
         title: elem.title,
         titleEnglish: elem.titleEnglish,
-        menu: elem.menuSections && elem.menuSections.length !== 0,
-        url: elem.url,
+        url: elem?.url,
+        menu: Boolean(elem?.submenu),
         panelId: `${i}, -1`,
         autoid: `${autoid}--sidenav--nav${i}`,
-        selected: !selectedMenuItem
-          ? selectedItems?.level0 === `${i}`
-          : selectedMenuItem === elem.titleEnglish,
+        selected: false,
       };
     });
 
     return html`
       ${this._renderLeftNavMenuSections({
+        ctas: ctaButtons,
         menuItems: level0Items,
         sectionId: '-1, -1',
+        heading: false,
       })}
       ${menu}
     `;
   }
 
   /**
-   * checks if there is a child item in the menu section that matches current url and returns true for first valid result
+   * Checks if there is a child item in the menu section that matches current
+   * url and returns true for first valid result.
    *
-   * @returns function that returns true or false
+   * @param menuItem a top level L0 menu item
+   * @returns boolean
    */
-  // eslint-disable-next-line class-methods-use-this
-  protected _childLinkChecker() {
+  protected _isActiveMenuItem(menuItem: L0MenuItem) {
+    const { currentUrlPath } = this;
+    const { submenu } = menuItem;
     let matchFound = false;
 
-    return (sections, currentUrlPath) => {
-      if (!matchFound) {
-        if (sections.length) {
-          const { menuItems } = sections[0];
-
-          for (let i = 0; i < menuItems.length; i++) {
-            if (
-              menuItems[i]?.url === currentUrlPath ||
-              menuItems[i]?.megapanelContent?.quickLinks?.links?.filter(
-                (link) => link.url === currentUrlPath
-              ).length
-            ) {
-              matchFound = true;
-            }
-          }
+    if (!submenu) {
+      matchFound = menuItem?.url === currentUrlPath;
+    } else if (submenu instanceof Array) {
+      matchFound = Boolean(
+        (submenu as BasicLink[]).find((link) => link.url === currentUrlPath)
+      );
+    } else if (submenu.sections) {
+      const { highlights, viewAll, sections } = submenu;
+      const flattenedLinks: BasicLink[] = [];
+      const flattenLinkGroup = (group: MegapanelLinkGroup): BasicLink[] => {
+        const links: BasicLink[] = [];
+        if (group.heading) {
+          links.push(group.heading);
+        }
+        if (group.links) {
+          group.links.forEach((link) => {
+            links.push(link);
+          });
         }
+        return links;
+      };
 
-        return matchFound;
+      // Flatten all data into array of BasicLinks.
+      if (highlights) {
+        highlights.forEach((highlight) => {
+          flattenedLinks.push(...flattenLinkGroup(highlight));
+        });
+      }
+      if (sections.length > 0) {
+        sections.forEach((section) => {
+          if (section.heading) {
+            flattenedLinks.push(section.heading);
+          }
+          section.groups.forEach((group) => {
+            flattenedLinks.push(...flattenLinkGroup(group));
+          });
+        });
+      }
+      if (viewAll) {
+        flattenedLinks.push(viewAll);
       }
 
-      return false;
-    };
+      // Check flattened list for matching URL.
+      matchFound = Boolean(
+        flattenedLinks.find((link) => link.url === currentUrlPath)
+      );
+    }
+
+    return matchFound;
   }
 
   /**
    * @param options The options.
    * @param [options.selectedMenuItem] The selected nav item.
    * @param options.target The target of rendering navigation items.
+   * @param options.hasL1 If an L1 menu is present
    * @returns The nav items.
    */
   protected _renderNavItems({
-    selectedMenuItem,
     target,
     hasL1,
   }: {
-    selectedMenuItem?: string;
     target: NAV_ITEMS_RENDER_TARGET;
     hasL1: boolean;
   }) {
-    const currentUrlPath = root.location?.href;
-    const hasChildLink = this._childLinkChecker();
     const { navLinks, customNavLinks, l1Data } = this;
-    let menu: MastheadLink[] | undefined = customNavLinks || navLinks;
-    const autoid = `${ddsPrefix}--masthead__${l1Data?.menuItems ? 'l1' : 'l0'}`;
+    let menu: L0MenuItem[] | L1MenuItem[] | undefined =
+      customNavLinks || navLinks;
+    const autoid = `${c4dPrefix}--masthead__${l1Data?.menuItems ? 'l1' : 'l0'}`;
+
     if (hasL1) {
       menu = l1Data?.menuItems;
     }
 
     if (target === NAV_ITEMS_RENDER_TARGET.TOP_NAV) {
-      return !menu
+      return !navLinks
         ? undefined
-        : menu.map((link, i) => {
-            const { menuSections = [], title, titleEnglish, url } = link;
-            let selected;
+        : menu?.map((link, i) => {
+            return this._renderNavItem(link, i, autoid);
+          });
+    }
 
-            if (selectedMenuItem) {
-              selected = selectedMenuItem && titleEnglish === selectedMenuItem;
-            } else {
-              selected = hasChildLink(menuSections, currentUrlPath);
-            }
+    return !navLinks ? undefined : this._renderLeftNav(navLinks, autoid);
+  }
 
-            let sections;
-            if (link.hasMegapanel) {
-              sections = this.megamenuSet[i] = this._renderMegaMenu(
-                menuSections,
-                i
-              );
-            } else {
-              sections = menuSections
-                // eslint-disable-next-line no-use-before-define
-                .reduce(
-                  (acc: typeof menuItems, { menuItems }) =>
-                    acc.concat(menuItems),
-                  []
-                )
-                .map(
-                  ({ title: menuItemTitle, url: menuItemUrl }, j) =>
-                    html`
-                      <dds-top-nav-menu-item
-                        ?active="${selectedMenuItem
-                          ? selected
-                          : menuItemUrl === currentUrlPath}"
-                        href="${menuItemUrl}"
-                        title="${menuItemTitle}"
-                        data-autoid="${autoid}-nav--subnav-col${i}-item${j}"></dds-top-nav-menu-item>
-                    `
-                );
-            }
-            if (sections.length === 0) {
-              return html`
-                <dds-top-nav-item
+  /**
+   * Renders a nav item.
+   *
+   * @param item The item to render
+   * @param i The index of the item in a series
+   * @param autoid The unique id to assign to the item
+   * @returns A template fragment representing a nav item.
+   */
+  protected _renderNavItem(item: L0MenuItem, i, autoid): TemplateResult {
+    const { selectedMenuItem, currentUrlPath, _activeMegamenuIndex } = this;
+    const { submenu, title, titleEnglish, url } = item;
+    let selected;
+
+    if (selectedMenuItem) {
+      selected =
+        titleEnglish?.trim()?.toLowerCase() ===
+        selectedMenuItem?.trim()?.toLowerCase();
+    } else {
+      selected = this._isActiveMenuItem(item);
+    }
+
+    if (submenu instanceof Array) {
+      return html`
+        <c4d-top-nav-menu
+          ?active="${selected}"
+          menu-label="${title}"
+          trigger-content="${title}"
+          data-autoid="${autoid}-nav--nav${i}">
+          ${submenu.map(
+            ({ title: linkTitle, url: linkUrl }, j) =>
+              html`
+                <c4d-top-nav-menu-item
                   ?active="${selectedMenuItem
                     ? selected
-                    : url === currentUrlPath}"
-                  href="${url}"
-                  title="${title}"
-                  data-autoid="${autoid}-nav--nav${i}"></dds-top-nav-item>
-              `;
-            }
-            if (link.hasMegapanel) {
-              return html`
-                <dds-megamenu-top-nav-menu
-                  ?active="${selected}"
-                  menu-label="${title}"
-                  trigger-content="${title}"
-                  data-autoid="${autoid}-nav--nav${i}">
-                </dds-megamenu-top-nav-menu>
-              `;
-            }
-            return html`
-              <dds-top-nav-menu
-                ?active="${selected}"
-                menu-label="${title}"
-                trigger-content="${title}"
-                data-autoid="${autoid}-nav--nav${i}">
-                ${sections}
-              </dds-top-nav-menu>
-            `;
-          });
+                    : linkUrl === currentUrlPath}"
+                  href="${ifDefined(linkUrl)}"
+                  title="${linkTitle}"
+                  data-autoid="${autoid}-nav--subnav-col${i}-item${j}"></c4d-top-nav-menu-item>
+              `
+          )}
+        </c4d-top-nav-menu>
+      `;
+    }
+
+    if (submenu?.sections) {
+      const layout =
+        submenu.sections.length > 1
+          ? MEGAMENU_LAYOUT_SCHEME.TAB
+          : MEGAMENU_LAYOUT_SCHEME.LIST;
+
+      // Render nav menu, but only render megamenu if it is active.
+      return html`
+        <c4d-megamenu-top-nav-menu
+          ?active="${selected}"
+          menu-label="${title}"
+          trigger-content="${title}"
+          data-autoid="${autoid}-nav--nav${i}"
+          .menuIndex=${i}>
+          ${_activeMegamenuIndex === i
+            ? this._renderMegaMenu(submenu, i, layout)
+            : null}
+        </c4d-megamenu-top-nav-menu>
+      `;
     }
 
-    return !menu
-      ? undefined
-      : this._renderLeftNav(menu, selectedMenuItem, autoid, currentUrlPath);
+    // Fallback render as simple link.
+    return html`
+      <c4d-top-nav-item
+        ?active="${selectedMenuItem ? selected : url === currentUrlPath}"
+        href="${ifDefined(url)}"
+        title="${title}"
+        data-autoid="${autoid}-nav--nav${i}"></c4d-top-nav-item>
+    `;
   }
 
   /**
-   * Handles the rendering of the megamenu once it is active
+   * Sets the active megamenu upon user interaction.
    *
    * @param event The event.
    */
-  @HostListener('eventMegamenuActive')
+  @HostListener(C4DMegamenuTopNavMenu.eventMegaMenuToggled)
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   protected _loadMegamenu = (event: CustomEvent) => {
     const {
-      target,
-      detail: { active, resolveFn },
+      detail: { active, resolveFn, index: menuIndex },
     } = event;
-    const { autoid } = (target as HTMLElement).dataset;
-    const index = autoid?.slice(-1);
-    const currentMenu = this.megamenuSet[index!];
-    render(active ? currentMenu : nothing, target as HTMLElement);
+
+    // Open a megamenu by updating state to trigger a re-render. This also closes
+    // any previously opened megamenu.
+    if (active && menuIndex !== undefined) {
+      this._activeMegamenuIndex = menuIndex;
+    }
+
+    // If clicking the same nav item to close megamenu, reset state to prune its
+    // markup from the DOM.
+    if (!active && menuIndex === this._activeMegamenuIndex) {
+      this._activeMegamenuIndex = undefined;
+    }
+
+    // Reset active tab when closing any megamenu.
+    if (!active && this._activeMegamenuTabKey) {
+      this._activeMegamenuTabKey = undefined;
+    }
+
     resolveFn();
   };
 
+  /**
+   * Sets the active megamenu tabpanel upon user interaction.
+   *
+   * @param event The event.
+   */
+  @HostListener(C4DMegaMenuTabs.eventBeforeSelect)
+  protected _loadMegamenuTabPanel(event) {
+    const { detail } = event;
+    const panelId = detail.item.id.split('tab-')[1];
+    this._activeMegamenuTabKey = panelId;
+  }
+
+  /**
+   * Stores a reference of the globally-scoped CM_APP object within the masthead.
+   */
+  @HostListener('document:cm-app-ready')
+  // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
+  protected _getContactModuleReference = () => {
+    // @ts-ignore: CM_APP will definitely exist if this event is fired
+    this.contactModuleApp = window.CM_APP;
+  };
+
+  contactModuleApp?: CMApp;
+
   /**
    * Whether or not a nav item has automatically been designated as "selected".
    *
@@ -682,6 +1039,11 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    */
   _hasAutoSelectedItems = false;
 
+  /**
+   * Whether the nav should load as `left-nav` or `top-nav`
+   */
+  _isMobileVersion = layoutBreakpoint.matches;
+
   /**
    * The placeholder for `loadTranslation()` Redux action that will be mixed in.
    *
@@ -697,7 +1059,7 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    *
    * @internal
    */
-  _loadUserStatus?: () => void;
+  _loadUserStatus?: (authMethod?: string) => void;
 
   /**
    * The placeholder for `setLanguage()` Redux action that will be mixed in.
@@ -706,6 +1068,28 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    */
   _setLanguage?: (language: string) => void;
 
+  /**
+   * Map of megamenu layout options to corresponding render methods.
+   *
+   * @internal
+   */
+  _megamenuRenderMap = new Map([
+    [MEGAMENU_LAYOUT_SCHEME.LIST, this._renderMegaMenuListing.bind(this)],
+    [MEGAMENU_LAYOUT_SCHEME.TAB, this._renderMegaMenuTabbed.bind(this)],
+  ]);
+
+  /**
+   * The index of a megamenu that should be visible.
+   */
+  @state()
+  _activeMegamenuIndex?: number;
+
+  /**
+   * The index of a megamenu's tabpanel that should be visible.
+   */
+  @state()
+  _activeMegamenuTabKey?: string;
+
   /**
    * `true` if there is a profile.
    */
@@ -736,6 +1120,18 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
   @property({ attribute: false })
   authenticatedProfileItems?: MastheadProfileItem[];
 
+  /**
+   * The cta buttons for authenticated state.
+   */
+  @property({ attribute: false })
+  authenticatedCtaButtons?: MastheadProfileItem[];
+
+  /**
+   * Text for Contact us button
+   */
+  @property({ attribute: false })
+  contactUsButton?: MastheadProfileItem;
+
   /**
    * The platform name.
    */
@@ -748,20 +1144,15 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
   @property({ attribute: false })
   platformUrl?;
 
-  /**
-   * The brand name.
-   *
-   * @deprecated brandName use platform instead
-   */
-  @property({ attribute: 'brand-name' })
-  brandName!: string;
-
   /**
    * The search results to show in the UI.
    */
   @property({ attribute: false })
   currentSearchResults: string[] = [];
 
+  @property({ attribute: false })
+  currentUrlPath?: string = root.location?.href;
+
   /**
    * The custom profile login link.
    */
@@ -780,12 +1171,6 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
   @property({ attribute: 'masthead-assistive-text' })
   mastheadAssistiveText!: string;
 
-  /**
-   * The array containing all the megamenus to be loaded in.
-   */
-  @property()
-  megamenuSet: TemplateResult[] = [];
-
   /**
    * The `aria-label` attribute for the menu bar UI.
    */
@@ -828,6 +1213,12 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
   @property({ attribute: 'selected-menu-item' })
   selectedMenuItem!: string;
 
+  /**
+   * The English title of the selected nav item in the L1.
+   */
+  @property({ attribute: 'selected-menu-item-l1' })
+  selectedMenuItemL1!: string;
+
   /**
    * The profile items for unauthenticated state.
    */
@@ -835,7 +1226,13 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
   unauthenticatedProfileItems?: MastheadProfileItem[];
 
   /**
-   * Specify translation endpoint if not using default dds endpoint.
+   * The cta buttons for authenticated state.
+   */
+  @property({ attribute: false })
+  unauthenticatedCtaButtons?: MastheadProfileItem[];
+
+  /**
+   * Specify translation endpoint if not using default c4d endpoint.
    */
   @property({ attribute: 'data-endpoint' })
   dataEndpoint?: string;
@@ -856,7 +1253,7 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
    * The navigation links.
    */
   @property({ attribute: false })
-  navLinks?: MastheadLink[];
+  navLinks?: L0MenuItem[];
 
   /**
    * Logo data
@@ -882,21 +1279,50 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
   @property()
   searchPlaceholder?: string;
 
+  /**
+   * `true` if Contact us should be shown.
+   */
+  @property({ type: String, reflect: true, attribute: 'has-contact' })
+  hasContact = 'true';
+
+  /**
+   * The selected authentication method, either `profile-api` (default), `cookie`, or `docs-api`.
+   */
+  @property({ attribute: 'auth-method' })
+  authMethod = MASTHEAD_AUTH_METHOD.DEFAULT;
+
   /**
    * Custom navigation links
    */
   @property()
-  customNavLinks?: MastheadLink[];
+  customNavLinks?: L0MenuItem[];
 
   /**
    * The user authentication status.
    */
   @property({ attribute: 'user-status' })
-  userStatus = UNAUTHENTICATED_STATUS;
+  userStatus =
+    this.authMethod === MASTHEAD_AUTH_METHOD.DEFAULT
+      ? UNAUTHENTICATED_STATUS
+      : CLOUD_UNAUTHENTICATED_STATUS;
+
+  get userIsAuthenticated(): boolean {
+    const { userStatus } = this;
+    return (
+      userStatus !== UNAUTHENTICATED_STATUS &&
+      userStatus !== CLOUD_UNAUTHENTICATED_STATUS
+    );
+  }
 
-  createRenderRoot() {
-    // We render child elements of `<dds-masthead-container>` by ourselves
-    return this;
+  get ctaButtons(): MastheadProfileItem[] | undefined {
+    const {
+      userIsAuthenticated,
+      authenticatedCtaButtons,
+      unauthenticatedCtaButtons,
+    } = this;
+    return userIsAuthenticated
+      ? authenticatedCtaButtons
+      : unauthenticatedCtaButtons;
   }
 
   firstUpdated() {
@@ -907,33 +1333,39 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
     }
     this._loadTranslation?.(language, dataEndpoint).catch(() => {}); // The error is logged in the Redux store
     if (this.userStatus === UNAUTHENTICATED_STATUS) {
-      this._loadUserStatus?.();
+      this._loadUserStatus?.(this.authMethod);
     }
 
+    // This is a temp fix until we figure out why we can't set styles to the :host(c4d-masthead-container) in stylesheets
     this.style.zIndex = '900';
+
+    // Allows conditional rendering of left/top navs.
+    layoutBreakpoint.addEventListener('change', () => {
+      this._isMobileVersion = layoutBreakpoint.matches;
+      this.requestUpdate();
+    });
   }
 
   updated(changedProperties) {
-    if (changedProperties.has('language')) {
+    if (
+      changedProperties.has('language') ||
+      changedProperties.has('dataEndpoint')
+    ) {
       const { language, dataEndpoint } = this;
       if (language) {
         this._setLanguage?.(language);
         this._loadTranslation?.(language, dataEndpoint).catch(() => {}); // The error is logged in the Redux store
       }
     }
-    if (changedProperties.has('brandName')) {
-      this.platform = this.brandName;
-      // eslint-disable-next-line no-console
-      console.warn(
-        '`brand-name` will be deprecated in the future use `platform` instead.'
-      );
-    }
   }
 
   render() {
     const {
+      _isMobileVersion: isMobileVersion,
       activateSearch,
       authenticatedProfileItems,
+      ctaButtons,
+      contactUsButton,
       currentSearchResults,
       customTypeaheadAPI,
       customProfileLogin,
@@ -941,6 +1373,7 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
       platformUrl,
       hasProfile,
       inputTimeout,
+      userIsAuthenticated,
       mastheadAssistiveText,
       menuBarAssistiveText,
       menuButtonAssistiveTextActive,
@@ -956,13 +1389,16 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
       skipToContentText,
       skipToContentHref,
       unauthenticatedProfileItems,
-      userStatus,
       l1Data,
+      hasContact,
     } = this;
-    const authenticated = userStatus !== UNAUTHENTICATED_STATUS;
 
     let profileItems;
-    if (DDS_CUSTOM_PROFILE_LOGIN && customProfileLogin && !authenticated) {
+    if (
+      C4D_CUSTOM_PROFILE_LOGIN &&
+      customProfileLogin &&
+      !userIsAuthenticated
+    ) {
       profileItems = unauthenticatedProfileItems?.map((item) => {
         if (item?.id === 'signin') {
           return { ...item, url: customProfileLogin };
@@ -970,7 +1406,7 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
         return item;
       });
     } else {
-      profileItems = authenticated
+      profileItems = userIsAuthenticated
         ? authenticatedProfileItems
         : unauthenticatedProfileItems;
     }
@@ -988,108 +1424,128 @@ class DDSMastheadComposite extends HostListenerMixin(LitElement) {
     }
 
     return html`
-      <dds-left-nav-overlay></dds-left-nav-overlay>
-      <dds-left-nav>
-        ${!platform
-          ? undefined
-          : html`
-              <dds-left-nav-name href="${ifNonNull(platformAltUrl)}"
-                >${platform}</dds-left-nav-name
-              >
-            `}
-        ${!l1Data?.title
-          ? undefined
-          : html`
-              <dds-left-nav-name href="${ifNonNull(l1Data.url)}"
-                >${l1Data.title}</dds-left-nav-name
-              >
-            `}
-        ${this._renderNavItems({
-          selectedMenuItem,
-          target: NAV_ITEMS_RENDER_TARGET.LEFT_NAV,
-          hasL1: !!l1Data,
-        })}
-      </dds-left-nav>
-      <dds-masthead aria-label="${ifNonNull(mastheadAssistiveText)}">
-        <dds-skip-to-content
+      ${isMobileVersion
+        ? html`
+            <c4d-left-nav-overlay></c4d-left-nav-overlay>
+            <c4d-left-nav>
+              ${!platform
+                ? undefined
+                : html`
+                    <c4d-left-nav-name href="${ifNonEmpty(platformAltUrl)}"
+                      >${platform}</c4d-left-nav-name
+                    >
+                  `}
+              ${this._renderNavItems({
+                target: NAV_ITEMS_RENDER_TARGET.LEFT_NAV,
+                hasL1: !!l1Data,
+              })}
+            </c4d-left-nav>
+          `
+        : ''}
+      <c4d-masthead
+        ?has-l1=${this.l1Data}
+        aria-label="${ifNonEmpty(mastheadAssistiveText)}">
+        <c4d-skip-to-content
           href="${skipToContentHref}"
-          link-assistive-text="${skipToContentText}"></dds-skip-to-content>
-        <dds-masthead-menu-button
-          button-label-active="${ifNonNull(menuButtonAssistiveTextActive)}"
-          button-label-inactive="${ifNonNull(menuButtonAssistiveTextInactive)}"
-          ?hide-menu-button="${activateSearch}">
-        </dds-masthead-menu-button>
+          link-assistive-text="${skipToContentText}"></c4d-skip-to-content>
 
+        ${isMobileVersion
+          ? html`
+              <c4d-masthead-menu-button
+                button-label-active="${ifNonEmpty(
+                  menuButtonAssistiveTextActive
+                )}"
+                button-label-inactive="${ifNonEmpty(
+                  menuButtonAssistiveTextInactive
+                )}"
+                ?hide-menu-button="${activateSearch}">
+              </c4d-masthead-menu-button>
+            `
+          : ''}
         ${this._renderLogo()}
         ${!platform || l1Data
           ? undefined
           : html`
-              <dds-top-nav-name href="${ifNonNull(platformAltUrl)}"
-                >${platform}</dds-top-nav-name
+              <c4d-top-nav-name href="${ifDefined(platformAltUrl)}"
+                >${platform}</c4d-top-nav-name
               >
             `}
-        ${(!l1Data &&
-          (navLinks || customNavLinks) &&
-          html`
-            <dds-top-nav
-              selected-menu-item=${selectedMenuItem}
-              menu-bar-label="${ifNonNull(menuBarAssistiveText)}"
-              ?hideNav="${activateSearch}">
-              ${this._renderNavItems({
-                selectedMenuItem,
-                target: NAV_ITEMS_RENDER_TARGET.TOP_NAV,
-                hasL1: false,
-              })}
-            </dds-top-nav>
-          `) ||
-        undefined}
+        ${(navLinks || customNavLinks) && !isMobileVersion
+          ? html`
+              <c4d-top-nav
+                selected-menu-item=${selectedMenuItem}
+                menu-bar-label="${ifNonEmpty(menuBarAssistiveText)}"
+                ?hideNav="${activateSearch}">
+                ${this._renderNavItems({
+                  target: NAV_ITEMS_RENDER_TARGET.TOP_NAV,
+                  hasL1: false,
+                })}
+              </c4d-top-nav>
+            `
+          : ''}
         ${hasSearch === 'false'
           ? ''
           : html`
-              <dds-search-with-typeahead
+              <c4d-search-with-typeahead
                 ?active="${activateSearch}"
                 input-timeout="${inputTimeout}"
-                language="${ifNonNull(language)}"
+                language="${ifDefined(language)}"
                 ?open="${openSearchDropdown}"
                 ?searchOpenOnload="${activateSearch}"
-                placeholder="${ifNonNull(searchPlaceholder)}"
-                .currentSearchResults="${ifNonNull(currentSearchResults)}"
-                ?custom-typeahead-api="${ifNonNull(customTypeaheadAPI)}"
-                .scopeParameters="${ifNonNull(
+                placeholder="${ifDefined(searchPlaceholder)}"
+                .currentSearchResults="${ifDefined(currentSearchResults)}"
+                ?custom-typeahead-api="${ifDefined(customTypeaheadAPI)}"
+                .scopeParameters="${ifDefined(
                   scopeParameters
-                )}"></dds-search-with-typeahead>
+                )}"></c4d-search-with-typeahead>
             `}
-        <dds-masthead-global-bar ?has-search-active=${activateSearch}>
+        <c4d-masthead-global-bar ?has-search-active=${activateSearch}>
+          ${hasContact === 'false'
+            ? ''
+            : html`
+                <c4d-masthead-contact
+                  data-ibm-contact="contact-link"
+                  trigger-label="${ifDefined(
+                    contactUsButton?.title
+                  )}"></c4d-masthead-contact>
+              `}
           ${hasProfile === 'false'
             ? ''
             : html`
-                <dds-masthead-profile ?authenticated="${authenticated}">
+                <c4d-masthead-profile ?authenticated="${userIsAuthenticated}">
                   ${profileItems?.map(
                     ({ title, url }) =>
                       html`
-                        <dds-masthead-profile-item href="${ifNonNull(url)}"
-                          >${title}</dds-masthead-profile-item
+                        <c4d-masthead-profile-item href="${ifDefined(url)}"
+                          >${title}</c4d-masthead-profile-item
                         >
                       `
                   )}
-                </dds-masthead-profile>
+                </c4d-masthead-profile>
               `}
-        </dds-masthead-global-bar>
-        ${!l1Data ? undefined : this._renderL1({ selectedMenuItem })}
-        <dds-megamenu-overlay></dds-megamenu-overlay>
-      </dds-masthead>
+          ${ctaButtons?.map(
+            ({ title, url }) =>
+              html`
+                <c4d-masthead-button-cta href="${ifNonEmpty(url)}" kind="ghost">
+                  ${title}
+                </c4d-masthead-button-cta>
+              `
+          )}
+        </c4d-masthead-global-bar>
+        ${!l1Data ? undefined : this._renderL1()}
+        <c4d-megamenu-overlay></c4d-megamenu-overlay>
+      </c4d-masthead>
     `;
   }
 
-  /**
-   * The name of the custom event fired when a top nav menu is clicked
-   */
-  static get eventMegamenuActive() {
-    return `${ddsPrefix}-megamenu-top-nav-menu-toggle`;
-  }
+  // @TODO: check if needed after merge
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSMastheadComposite;
+export default C4DMastheadComposite;
diff --git a/packages/web-components/src/components/masthead/masthead-contact.ts b/packages/web-components/src/components/masthead/masthead-contact.ts
new file mode 100644
index 00000000000..d8073d81aa9
--- /dev/null
+++ b/packages/web-components/src/components/masthead/masthead-contact.ts
@@ -0,0 +1,71 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022, 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 { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import Chat20 from '../../internal/vendor/@carbon/web-components/icons/chat/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './masthead.scss';
+import C4DMastheadProfile from './masthead-profile';
+import C4DMastheadContainer from './masthead-container';
+import { CMApp } from './masthead-composite';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+/**
+ * The contact button UI in the masthead.
+ *
+ * @element c4d-masthead-contact
+ */
+@customElement(`${c4dPrefix}-masthead-contact`)
+class C4DMastheadContact extends C4DMastheadProfile {
+  /**
+   * The `aria-label` attribute for the trigger button.
+   */
+  @property({ attribute: 'trigger-label' })
+  triggerLabel = 'Contact';
+
+  render() {
+    const { triggerLabel, _handleClick: handleClick } = this;
+    return html`
+      <a
+        href="javascript:void 0"
+        class="${prefix}--header__menu-item ${prefix}--header__menu-title"
+        aria-label="${ifDefined(triggerLabel)}"
+        @click=${handleClick}>
+        ${Chat20()}
+      </a>
+    `;
+  }
+
+  updated(changedProperties) {
+    if (changedProperties.has('expanded')) {
+      if (!this.expanded) {
+        const mastheadContainer = this.closest(
+          `${c4dPrefix}-masthead-container`
+        ) as C4DMastheadContainer;
+
+        /**
+         * This is a workaround to minimize the chat module. Currently no minimize methods exist.
+         *
+         * @see https://github.ibm.com/live-advisor/cm-app
+         */
+        if (mastheadContainer?.contactModuleApp) {
+          (mastheadContainer.contactModuleApp as CMApp).init();
+        }
+      }
+    }
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default C4DMastheadContact;
diff --git a/packages/web-components/src/components/masthead/masthead-container.ts b/packages/web-components/src/components/masthead/masthead-container.ts
index a60a9d20599..31857ae7a63 100644
--- a/packages/web-components/src/components/masthead/masthead-container.ts
+++ b/packages/web-components/src/components/masthead/masthead-container.ts
@@ -14,10 +14,10 @@ import {
   Store,
   bindActionCreators,
 } from 'redux';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { LocaleAPIState } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/localeAPI.d';
 import {
-  MastheadLink,
+  L0MenuItem,
   TranslateAPIState,
 } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI.d';
 import { ProfileAPIState } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/profileAPI.d';
@@ -33,13 +33,13 @@ import { loadUserStatus } from '../../internal/vendor/@carbon/ibmdotcom-services
 import { ProfileAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-services-store/actions/profileAPI.d';
 import ConnectMixin from '../../globals/mixins/connect';
 
-import DDSMastheadComposite from './masthead-composite';
+import C4DMastheadComposite from './masthead-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux state used for `<dds-masthead-container>`.
+ * The Redux state used for `<c4d-masthead-container>`.
  */
 export interface MastheadContainerState {
   /**
@@ -59,13 +59,13 @@ export interface MastheadContainerState {
 }
 
 /**
- * The properties for `<dds-masthead-container>` from Redux state.
+ * The properties for `<c4d-masthead-container>` from Redux state.
  */
 export interface MastheadContainerStateProps {
   /**
    * The nav links.
    */
-  navLinks?: MastheadLink[];
+  navLinks?: L0MenuItem[];
 
   /**
    * The user authentication status.
@@ -74,7 +74,7 @@ export interface MastheadContainerStateProps {
 }
 
 /**
- * The Redux actions used for `<dds-masthead-container>.
+ * The Redux actions used for `<c4d-masthead-container>.
  */
 export type MastheadContainerActions =
   | ReturnType<typeof loadLanguage>
@@ -84,7 +84,7 @@ export type MastheadContainerActions =
 
 /**
  * @param state The Redux state for masthead.
- * @returns The converted version of the given state, tailored for `<dds-masthead-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-masthead-container>`.
  */
 export function mapStateToProps(
   state: MastheadContainerState
@@ -95,15 +95,24 @@ export function mapStateToProps(
   const { request } = profileAPI ?? {};
   return pickBy(
     {
-      authenticatedProfileItems: !language
-        ? undefined
-        : translations?.[language]?.profileMenu.signedin,
       navLinks: !language
         ? undefined
         : translations?.[language]?.mastheadNav?.links,
+      authenticatedProfileItems: !language
+        ? undefined
+        : translations?.[language]?.profileMenu.signedin,
       unauthenticatedProfileItems: !language
         ? undefined
         : translations?.[language]?.profileMenu.signedout,
+      authenticatedCtaButtons: !language
+        ? undefined
+        : translations?.[language]?.masthead?.profileMenu.signedin.ctaButtons,
+      unauthenticatedCtaButtons: !language
+        ? undefined
+        : translations?.[language]?.masthead?.profileMenu.signedout.ctaButtons,
+      contactUsButton: !language
+        ? undefined
+        : translations?.[language]?.masthead?.contact,
       logoData: !language
         ? undefined
         : translations?.[language]?.masthead?.logo,
@@ -116,7 +125,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-masthead-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-masthead-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(
   dispatch: Dispatch<LocaleAPIActions | TranslateAPIActions | ProfileAPIActions>
@@ -138,10 +147,10 @@ export function mapDispatchToProps(
 /**
  * Container component for masthead.
  *
- * @element dds-masthead-container
+ * @element c4d-masthead-container
  */
-@customElement(`${ddsPrefix}-masthead-container`)
-class DDSMastheadContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-masthead-container`)
+class C4DMastheadContainer extends ConnectMixin<
   MastheadContainerState,
   LocaleAPIActions | TranslateAPIActions | ProfileAPIActions,
   MastheadContainerStateProps,
@@ -153,7 +162,7 @@ class DDSMastheadContainer extends ConnectMixin<
   >,
   mapStateToProps,
   mapDispatchToProps
-)(DDSMastheadComposite) {}
+)(C4DMastheadComposite) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSMastheadContainer;
+export default C4DMastheadContainer;
diff --git a/packages/web-components/src/components/masthead/masthead-global-bar.ts b/packages/web-components/src/components/masthead/masthead-global-bar.ts
index 4c2f28c5b30..82236c379a4 100644
--- a/packages/web-components/src/components/masthead/masthead-global-bar.ts
+++ b/packages/web-components/src/components/masthead/masthead-global-bar.ts
@@ -7,25 +7,26 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, LitElement } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The action bar in masthead.
  *
- * @element dds-masthead-global-bar
+ * @element c4d-masthead-global-bar
  */
-@customElement(`${ddsPrefix}-masthead-global-bar`)
-class DDSMastheadGlobalBar extends FocusMixin(
+@customElement(`${c4dPrefix}-masthead-global-bar`)
+class C4DMastheadGlobalBar extends FocusMixin(
   HostListenerMixin(StableSelectorMixin(LitElement))
 ) {
   /**
@@ -56,8 +57,8 @@ class DDSMastheadGlobalBar extends FocusMixin(
   render() {
     const { _hasSearchActive: hasSearchActive } = this;
     const classes = classMap({
-      [`${ddsPrefix}-ce--header__global__container`]: true,
-      [`${ddsPrefix}-ce--header__global__container--has-search-active`]:
+      [`${c4dPrefix}-ce--header__global__container`]: true,
+      [`${c4dPrefix}-ce--header__global__container--has-search-active`]:
         hasSearchActive,
     });
     return html` <div class="${classes}"><slot></slot></div> `;
@@ -67,14 +68,14 @@ class DDSMastheadGlobalBar extends FocusMixin(
    * The name of the custom event fired after the seach is toggled.
    */
   static get eventToggleSearch() {
-    return `${ddsPrefix}-search-with-typeahead-toggled`;
+    return `${c4dPrefix}-search-with-typeahead-toggled`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead-global-bar`;
+    return `${c4dPrefix}--masthead-global-bar`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMastheadGlobalBar;
+export default C4DMastheadGlobalBar;
diff --git a/packages/web-components/src/components/masthead/masthead-l1-name.ts b/packages/web-components/src/components/masthead/masthead-l1-name.ts
index 36aebb83510..4feaebd4220 100644
--- a/packages/web-components/src/components/masthead/masthead-l1-name.ts
+++ b/packages/web-components/src/components/masthead/masthead-l1-name.ts
@@ -7,23 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead.
  *
- * @element dds-masthead-l1-name
+ * @element c4d-masthead-l1-name
  */
-@customElement(`${ddsPrefix}-masthead-l1-name`)
-class DDSMastheadL1Name extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-masthead-l1-name`)
+class C4DMastheadL1Name extends StableSelectorMixin(LitElement) {
   /**
    * slot name for this component in the masthead l1
    */
@@ -45,10 +44,10 @@ class DDSMastheadL1Name extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__l1-name`;
+    return `${c4dPrefix}--masthead__l1-name`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMastheadL1Name;
+export default C4DMastheadL1Name;
diff --git a/packages/web-components/src/components/masthead/masthead-l1.scss b/packages/web-components/src/components/masthead/masthead-l1.scss
new file mode 100644
index 00000000000..a1b3e09ca03
--- /dev/null
+++ b/packages/web-components/src/components/masthead/masthead-l1.scss
@@ -0,0 +1,11 @@
+//
+// 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.
+//
+
+@use '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-l1' as *;
+@use '@carbon/styles/scss/reset' as *;
+
+@include masthead-l1;
diff --git a/packages/web-components/src/components/masthead/masthead-l1.ts b/packages/web-components/src/components/masthead/masthead-l1.ts
index fcf2f2fca5a..9f5a1baf155 100644
--- a/packages/web-components/src/components/masthead/masthead-l1.ts
+++ b/packages/web-components/src/components/masthead/masthead-l1.ts
@@ -7,40 +7,952 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { TemplateResult as _TemplateResult, html, LitElement } from 'lit';
+import { property, query, queryAll, state } from 'lit/decorators.js';
+import root from 'window-or-global';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './masthead.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import styles from './masthead-l1.scss';
+import {
+  L1MenuItem as _L1MenuItem,
+  L1SubmenuSection as _L1SubmenuSection,
+  L1SubmenuSectionHeading,
+  MastheadL1,
+} from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/translateAPI';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
+import ChevronDown16 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/16.js';
+import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16';
+import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import CaretLeft20 from '../../internal/vendor/@carbon/web-components/icons/caret--left/20.js';
+import CaretRight20 from '../../internal/vendor/@carbon/web-components/icons/caret--right/20.js';
+import { classMap } from 'lit/directives/class-map.js';
+import layoutBreakpoint from './masthead-breakpoint';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
+
+function handleDropdownClose(event: FocusEvent | KeyboardEvent) {
+  const { currentTarget } = event;
+  const target = currentTarget as HTMLElement | null;
+  const openDropdowns = Array.from(target?.querySelectorAll('.is-open') ?? []);
+
+  if (openDropdowns.length) {
+    switch (event.type) {
+      case 'keydown': {
+        const { code } = event as KeyboardEvent;
+        if (code === 'Escape') {
+          openDropdowns.forEach((el) => {
+            el.classList.remove('is-open');
+          });
+
+          (target?.firstElementChild as HTMLElement)?.focus();
+        }
+        break;
+      }
+      case 'focusout': {
+        const { relatedTarget } = event as FocusEvent;
+        const hasUnknownTargets = !relatedTarget || !currentTarget;
+        let focusHasEscaped = false;
+
+        if (!hasUnknownTargets) {
+          const comparison = (relatedTarget as Node).compareDocumentPosition(
+            currentTarget as Node
+          );
+
+          focusHasEscaped =
+            !(comparison & 8) && // relatedTarget is not ancestor of currentTarget
+            relatedTarget !== currentTarget;
+        }
+
+        if (hasUnknownTargets || focusHasEscaped) {
+          openDropdowns.forEach((el) => {
+            el.classList.remove('is-open');
+          });
+        }
+
+        break;
+      }
+      default:
+        break;
+    }
+  }
+}
 
 /**
  * Masthead.
  *
- * @element dds-masthead-l1
+ * @element c4d-masthead-l1
  * @slot brand - The left hand area.
  * @slot nav - The nav content.
  * @slot profile - The right hand area.
  */
-@customElement(`${ddsPrefix}-masthead-l1`)
-class DDSMastheadL1 extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-masthead-l1`)
+class C4DMastheadL1 extends StableSelectorMixin(LitElement) {
+  /**
+   * The L1 menu data, passed from the masthead-composite.
+   */
+  @property()
+  l1Data?: MastheadL1;
+
+  /**
+   * The URL path of the current document root.
+   */
+  @property()
+  currentUrlPath?: string = root.location?.href;
+
+  /**
+   * The English title of the selected nav item.
+   */
+  @property({ attribute: 'selected-menu-item' })
+  selectedMenuItem?: string;
+
+  /**
+   * Whether the current viewport is below 800px or not
+   */
+  @state()
+  isMobileVersion = layoutBreakpoint.matches;
+
+  /**
+   * Elements that are currently selected.
+   */
+  @state()
+  selectedElements: Element[] = [];
+
+  /**
+   * The translated label for the overview links visible on mobile
+   */
+  @property({ attribute: 'overview-text' })
+  overviewText = 'Overview';
+
+  /**
+   * The writing direction of the page
+   */
+  @property()
+  direction = '';
+
+  /**
+   * The x-scrolling element wrapping the L1 top-level items
+   */
+  @query(`.${prefix}--masthead__l1-menu-container-inner`)
+  menuContainerInner?: HTMLElement;
+
+  @query(`.${prefix}--masthead__l1-menu`)
+  menu?: HTMLElement;
+
+  /**
+   * The first top-level menu items
+   */
+  @query(`.${prefix}--masthead__l1-menu > *:first-child`)
+  menuFirstItem?: HTMLElement;
+
+  /**
+   * The last top-level menu items
+   */
+  @query(`.${prefix}--masthead__l1-menu > *:last-child`)
+  menuLastItem?: HTMLElement;
+
+  /**
+   * The buttons that scroll the top-level menu items
+   */
+  @queryAll(`.${prefix}--masthead__l1-menu-container-scroller`)
+  menuScrollerButtons?: NodeListOf<HTMLButtonElement>;
+
+  /**
+   * Resize Observer responsible for show/hiding the scrolling buttons.
+   */
+  protected scrollObserver?: ResizeObserver;
+
+  /**
+   * Prevents resize observer from blocking main thread.
+   */
+  protected scrollObserverThrottler?: NodeJS.Timeout;
+
+  /**
+   * ResizeObserver callback method
+   */
+  protected toggleScrollButtons() {
+    // Resize events happen rapidly. We need to throttle this functionality.
+    if (!this.scrollObserverThrottler) {
+      const {
+        menu,
+        menuContainerInner,
+        menuFirstItem,
+        menuLastItem,
+        menuScrollerButtons,
+      } = this;
+
+      // Only act if all the needed elements are present.
+      if (
+        menuFirstItem &&
+        menuLastItem &&
+        menuContainerInner &&
+        menuScrollerButtons
+      ) {
+        // Find first & last items, calculate width between outer boundaries.
+        const firstItemBox = menuFirstItem.getBoundingClientRect();
+        const lastItemBox = menuLastItem.getBoundingClientRect();
+        const menuLeft = Math.min(firstItemBox.left, lastItemBox.left);
+        const menuRight = Math.max(firstItemBox.right, lastItemBox.right);
+        const menuWidth = menuRight - menuLeft;
+        const containerWidth =
+          menuContainerInner?.getBoundingClientRect().width;
+
+        // If we overflow the container, show buttons.
+        if (menuWidth > containerWidth) {
+          menuScrollerButtons.forEach((button) => {
+            button.removeAttribute('hidden');
+          });
+
+          if (menu?.style.translate) {
+            const currentScroll = parseInt(menu.style.translate);
+            const maxScroll = containerWidth - menuWidth;
+
+            menu.style.translate = `${Math.max(currentScroll, maxScroll)}px`;
+          }
+        }
+        // If we don't, hide the buttons.
+        else {
+          menuScrollerButtons.forEach((button) => {
+            button.setAttribute('hidden', '');
+          });
+
+          // Remove any translations we've used to mimic scrolling.
+          if (menu) {
+            menu.style.translate = '';
+          }
+        }
+      }
+
+      // Prevent this functionality from running again until the time threshold has passed.
+      this.scrollObserverThrottler = setTimeout(() => {
+        this.scrollObserverThrottler = undefined;
+      }, 100);
+    }
+  }
+
+  /**
+   * Creates resize observer on load/update when above mobile breakpoint.
+   */
+  protected _createScrollObserver() {
+    const { menuContainerInner, toggleScrollButtons } = this;
+    this.scrollObserver = new ResizeObserver(toggleScrollButtons.bind(this));
+
+    if (menuContainerInner) {
+      this.scrollObserver.observe(menuContainerInner);
+    }
+  }
+
+  /**
+   * Scrolls the menu inner container on click.
+   *
+   * @param event The button click
+   */
+  protected _scrollL1TopNav(event: PointerEvent) {
+    const { currentTarget } = event;
+    const { menuContainerInner, menu, direction } = this;
+
+    if (!menu || !menuContainerInner) {
+      return;
+    }
+
+    // Valid translations will exist between 0 and a some negative value.
+    const minTranslationValue =
+      (menu.clientWidth - menuContainerInner.clientWidth) * -1;
+    const maxTranslationValue = 0;
+
+    // Use a 1/-1 multiplier to account for correct button
+    let buttonDirMultiplier;
+    switch ((currentTarget as HTMLElement).id) {
+      // "Next" button should pull menu toward 0
+      case 'scroll-next':
+        buttonDirMultiplier = -1;
+        break;
+      // "Prev" button should push menu away from 0
+      case 'scroll-prev':
+        buttonDirMultiplier = 1;
+        break;
+      default:
+        buttonDirMultiplier = 0;
+        break;
+    }
+
+    // Use a 1/-1 multiplier to account for writing direction
+    let writingDirMultiplier;
+    switch (direction) {
+      // LTR is inline with x-axis
+      case 'ltr':
+        writingDirMultiplier = 1;
+        break;
+      // RTL must invert x-axis
+      case 'rtl':
+        writingDirMultiplier = -1;
+        break;
+      default:
+        writingDirMultiplier = 0;
+        break;
+    }
+
+    // Get current translation value
+    const computedScroll = parseInt(window.getComputedStyle(menu).translate);
+    const currentScroll = !Number.isNaN(computedScroll) ? computedScroll : 0;
+
+    // Adjust translation value by adding/subtracting the width of the visible menu
+    const newScroll =
+      currentScroll +
+      menuContainerInner.clientWidth *
+        buttonDirMultiplier *
+        writingDirMultiplier;
+
+    // Cap the value to avoid over-translation to either side
+    const cappedValue = Math.max(
+      minTranslationValue,
+      Math.min(maxTranslationValue, newScroll)
+    );
+
+    menu.style.translate = `${cappedValue}px`;
+  }
+
+  /**
+   * Renders L1 for desktop screensizes
+   *
+   * @returns {_TemplateResult} L1 for desktop screensizes
+   */
+  protected _renderL1TopNav() {
+    const { l1Data, direction, _scrollL1TopNav: scrollL1TopNav } = this;
+    const { url, title, actions, menuItems } = l1Data ?? {};
+    const { cta, login } = actions ?? {};
+
+    return html`
+      <div
+        class="${prefix}--masthead__l1-menu-container-mask ${prefix}--masthead__l1-menu-container-mask--start"></div>
+      ${!title || !url
+        ? undefined
+        : html`
+            <div class="${prefix}--masthead__background-wrapper">
+              <a class="${prefix}--masthead__l1-title" href="${url}"
+                >${title}</a
+              >
+            </div>
+          `}
+      <div class="${prefix}--masthead__l1-menu-container-outer">
+        <button
+          class="${prefix}--masthead__l1-menu-container-scroller"
+          id="scroll-prev"
+          @click=${scrollL1TopNav}>
+          <div class="${prefix}--masthead__l1-menu-container-scroller-inner">
+            ${direction === 'ltr' ? CaretLeft20() : CaretRight20()}
+          </div>
+        </button>
+        <div class="${prefix}--masthead__l1-menu-container-inner">
+          <ul class="${prefix}--masthead__l1-menu">
+            ${(menuItems ?? []).map((menuItem) =>
+              this._renderL1TopNavDropDowns(menuItem)
+            )}
+          </ul>
+        </div>
+        <button
+          class="${prefix}--masthead__l1-menu-container-scroller"
+          id="scroll-next"
+          @click=${scrollL1TopNav}>
+          <div class="${prefix}--masthead__l1-menu-container-scroller-inner">
+            ${direction === 'ltr' ? CaretRight20() : CaretLeft20()}
+          </div>
+        </button>
+      </div>
+      ${login && login.url && login.title
+        ? html`
+            <div class="${prefix}--masthead__background-wrapper">
+              <a
+                class="${prefix}--masthead__l1-login"
+                href="${ifDefined(login.url)}"
+                >${login.title}</a
+              >
+            </div>
+          `
+        : ''}
+      ${cta && cta.url && cta.title
+        ? html`
+            <a class="${prefix}--masthead__l1-cta" href="${ifDefined(cta.url)}"
+              >${cta.title}</a
+            >
+          `
+        : ''}
+      <div
+        class="${prefix}--masthead__l1-menu-container-mask ${prefix}--masthead__l1-menu-container-mask--end"></div>
+    `;
+  }
+
+  /**
+   * Renders L1MenuItems with subsections containing announcements, headings, links, and footers.
+   *
+   * @param {_L1MenuItem} menuItem Array of menu items containing subnavs
+   * @returns {_TemplateResult} rendered output
+   */
+  protected _renderL1TopNavDropDowns(menuItem) {
+    const {
+      _toggleSubsection: toggleSubsection,
+      _handleTopNavFocusIn: handleTopNavFocusIn,
+    } = this;
+    const { title, url, submenu } = menuItem;
+
+    if (!submenu && url) {
+      return html`
+        <li>
+          <a
+            class="${prefix}--masthead__l1-item"
+            href="${url}"
+            @focusin=${handleTopNavFocusIn}
+            >${title}</a
+          >
+        </li>
+      `;
+    } else if (!submenu) {
+      return html`
+        <li>
+          <span
+            class="${prefix}--masthead__l1-item"
+            @focusin=${handleTopNavFocusIn}
+            >${title}</span
+          >
+        </li>
+      `;
+    }
+
+    const { announcement, menuSections, footer, columns } = submenu ?? {};
+
+    // 3-column dropdown has option for 33/66 split.
+    const hasWideColumn =
+      columns === 3 ? menuSections.some((section) => section.span > 1) : false;
+
+    // Split can be 33/66 or 66/33.
+    const wideColumnFirst = menuSections[0].span > 1;
+
+    const wideColumns = menuSections.filter((section) => section.span > 1);
+    const normalColumns = menuSections.filter((section) => !(section.span > 1));
+    const dropdownClasses = classMap({
+      [`${prefix}--masthead__l1-dropdown-links`]: true,
+      [`${prefix}--masthead__l1-dropdown--has-column-wide`]: hasWideColumn,
+    });
+
+    return html`
+      <li
+        @focusout=${handleDropdownClose}
+        @keydown=${handleDropdownClose}
+        tabindex="-1">
+        <button
+          class="${prefix}--masthead__l1-item"
+          @click=${toggleSubsection}
+          @focusin=${handleTopNavFocusIn}>
+          ${title}${ChevronDown16()}
+        </button>
+        <div
+          class="${prefix}--masthead__l1-dropdown ${prefix}--masthead__l1-dropdown__${columns}-col">
+          ${announcement
+            ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
+                ${unsafeHTML(announcement)}
+              </div>`
+            : ''}
+          <div class="${dropdownClasses}">
+            ${hasWideColumn && wideColumnFirst
+              ? this._renderL1DropdownSections(wideColumns, hasWideColumn, true)
+              : ''}
+            ${this._renderL1DropdownSections(
+              normalColumns,
+              hasWideColumn,
+              false
+            )}
+            ${hasWideColumn && !wideColumnFirst
+              ? this._renderL1DropdownSections(wideColumns, hasWideColumn, true)
+              : ''}
+          </div>
+          ${footer
+            ? html`<a
+                class="${prefix}--masthead__l1-dropdown-viewall"
+                href="${footer.url}"
+                >${footer.title}${ArrowRight16()}</a
+              >`
+            : ''}
+        </div>
+      </li>
+    `;
+  }
+
+  /**
+   *
+   * @param {_L1SubmenuSection[]} sections the sections to render.
+   * @param {boolean} hasWide if this column will be rendered as or next to a wide column.
+   * @param {boolean} isWide if this column will be rendered as a wide column.
+   * @returns rendered markup
+   */
+  protected _renderL1DropdownSections(sections, hasWide, isWide) {
+    const renderedSections = sections.map((section) => {
+      const { heading, items } = section;
+
+      return html`
+        <div class="${prefix}--masthead__l1-dropdown-section">
+          ${heading ? html`${this._renderL1SubSectionHeading(heading)}` : ''}
+          ${items
+            ? html` <ul class="${prefix}--masthead__l1-dropdown-menu-items">
+                ${items.map((item) => {
+                  const { title, url, description } = item;
+
+                  const linkContents = description
+                    ? html`
+                        <span
+                          class="${prefix}--masthead__l1-dropdown-item-title"
+                          >${title}</span
+                        >
+                        <span
+                          class="${prefix}--masthead__l1-dropdown-item-description"
+                          >${description}</span
+                        >
+                      `
+                    : html` ${title} `;
+
+                  return html`
+                    <li>
+                      <a
+                        class="${prefix}--masthead__l1-dropdown-item"
+                        href="${url}">
+                        ${linkContents}
+                      </a>
+                    </li>
+                  `;
+                })}
+              </ul>`
+            : ''}
+        </div>
+      `;
+    });
+
+    const classes = classMap({
+      [`${prefix}--masthead__l1-dropdown-column-narrow`]: hasWide && !isWide,
+      [`${prefix}--masthead__l1-dropdown-column-wide`]: hasWide && isWide,
+    });
+    return hasWide
+      ? html`<div class=${classes}>${renderedSections}</div>`
+      : html`${renderedSections}`;
+  }
+
+  /**
+   * Renders L1 for mobile screensizes.
+   *
+   * @returns {_TemplateResult} L1 for mobile screensizes.
+   */
+  protected _renderL1MobileNav() {
+    const { l1Data, overviewText } = this;
+    const { url, title, actions, menuItems } = l1Data ?? {};
+    const { cta, login } = actions ?? {};
+
+    const { _toggleSubsection: toggleSubsection } = this;
+
+    return html`
+      <button class="${prefix}--masthead__l1-title" @click=${toggleSubsection}>
+        ${title}${ChevronDown16()}
+      </button>
+      <ul class="${prefix}--masthead__l1-dropdown">
+        ${url
+          ? html` <li>
+              <a class="${prefix}--masthead__l1-dropdown-item" href="${url}">
+                ${overviewText}
+              </a>
+            </li>`
+          : ''}
+        ${menuItems?.map((menuItem) => this._renderL1MobileSubnav(menuItem))}
+        ${login && login.url && login.title
+          ? html` <li>
+              <a
+                class="${prefix}--masthead__l1-dropdown-login"
+                href="${ifDefined(login.url)}">
+                ${login.title}${ArrowRight16()}
+              </a>
+            </li>`
+          : ''}
+        ${cta && cta.url && cta.title
+          ? html`<li>
+              <a
+                class="${prefix}--masthead__l1-dropdown-cta"
+                href="${ifDefined(cta.url)}">
+                ${cta.title}${ArrowRight16()}
+              </a>
+            </li>`
+          : ''}
+      </ul>
+    `;
+  }
+
+  /**
+   * Renders L1MenuItems with subsections containing announcements, headings, links, and footers.
+   *
+   * @param {_L1MenuItem} menuItem Array of menu items containing subnavs
+   * @returns {_TemplateResult} rendered output
+   */
+  protected _renderL1MobileSubnav(menuItem) {
+    const { _toggleSubsection: toggleSubsection } = this;
+    const { title, url, submenu } = menuItem;
+
+    if (!submenu && url) {
+      return html`
+        <li>
+          <a class="${prefix}--masthead__l1-dropdown-item" href="${url}"
+            >${title}</a
+          >
+        </li>
+      `;
+    } else if (!submenu) {
+      return html`
+        <li>
+          <span class="${prefix}--masthead__l1-dropdown-item">${title}</span>
+        </li>
+      `;
+    }
+
+    const { announcement, menuSections, footer } = submenu ?? {};
+
+    return html`
+      <li>
+        <button
+          class="${prefix}--masthead__l1-dropdown-item"
+          @click=${toggleSubsection}>
+          ${title}${ChevronDown16()}
+        </button>
+        <div class="${prefix}--masthead__l1-dropdown-subsection">
+          ${announcement
+            ? html`<div class="${prefix}--masthead__l1-dropdown-announcement">
+                ${unsafeHTML(announcement)}
+              </div>`
+            : ''}
+          ${menuSections
+            ? menuSections.map((section) => {
+                const { heading, items } = section;
+
+                return html`
+                  ${heading
+                    ? html`${this._renderL1SubSectionHeading(heading)}`
+                    : ''}
+                  ${items
+                    ? html` <ul>
+                        ${items.map((item) => {
+                          const { title, url } = item;
+
+                          return html` <li>
+                            <a
+                              class="${prefix}--masthead__l1-dropdown-item"
+                              href="${url}">
+                              ${title}
+                            </a>
+                          </li>`;
+                        })}
+                      </ul>`
+                    : ''}
+                `;
+              })
+            : ''}
+          ${footer
+            ? html`
+                <a
+                  class="${prefix}--masthead__l1-dropdown-viewall"
+                  href="${footer.url}"
+                >
+                  ${footer.title}${ArrowRight16()}
+                </li>`
+            : ''}
+        </div>
+      </li>
+    `;
+  }
+
+  /**
+   * Toggles the mobile navigation subsection.
+   *
+   * @param {PointerEvent} event The click event from the user
+   */
+  protected _toggleSubsection(event: PointerEvent) {
+    const { isMobileVersion } = this;
+    const { currentTarget } = event;
+    const button = currentTarget as HTMLElement;
+    const dropdown = button.nextElementSibling as HTMLElement;
+    const isOpen = dropdown.classList.contains('is-open');
+
+    if (!isMobileVersion && dropdown && !isOpen) {
+      // Get Button & Dropdown locations & widths
+      const buttonRect = button.getBoundingClientRect().toJSON();
+      const dropdownRect = dropdown.getBoundingClientRect().toJSON();
+      const viewportWidth = window.innerWidth;
+      const isLTR =
+        window.getComputedStyle(this).direction.toUpperCase() === 'LTR';
+      const dirMultiplier = isLTR ? -1 : 1;
+
+      // Set logical bounding client rect properties
+      buttonRect.inlineStart = isLTR
+        ? buttonRect.left
+        : viewportWidth - buttonRect.right;
+      buttonRect.inlineEnd = isLTR
+        ? buttonRect.right
+        : viewportWidth - buttonRect.left;
+      dropdownRect.inlineStart = isLTR
+        ? dropdownRect.left
+        : viewportWidth - dropdownRect.right;
+      dropdownRect.inlineEnd = isLTR
+        ? dropdownRect.right
+        : viewportWidth - dropdownRect.left;
+
+      // What would the left/right boundaries be if we centered the dropdown?
+      const startBoundaryIfCentered = (viewportWidth - dropdownRect.width) / 2;
+      const endBoundaryIfCentered =
+        startBoundaryIfCentered + dropdownRect.width;
+
+      // If start-aligning to button doesn't overflow viewport.
+      if (buttonRect.inlineStart + dropdownRect.width < viewportWidth) {
+        // Do nothing, the styles are fine.
+      }
+
+      // If center-aligning to viewport fully intersects with button.
+      else if (
+        startBoundaryIfCentered < buttonRect.inlineStart &&
+        endBoundaryIfCentered > buttonRect.inlineEnd
+      ) {
+        const translationAmount =
+          (buttonRect.inlineStart - startBoundaryIfCentered) * dirMultiplier;
+        dropdown.style.translate = `${translationAmount}px`;
+      }
+
+      // Fallback: right align to button.
+      else {
+        const translationAmount =
+          (dropdownRect.width - buttonRect.width) * dirMultiplier;
+        dropdown.style.translate = `${translationAmount}px`;
+      }
+
+      // Ensure dropdown doesn't overflow viewport vertically.
+      const viewportHeight = window.innerHeight;
+      const maxHeight = viewportHeight - dropdownRect.top;
+      dropdown.style.maxHeight = `calc(${maxHeight}px - 4rem)`;
+    }
+
+    button.classList.toggle('is-open', !isOpen);
+    dropdown.classList.toggle('is-open', !isOpen);
+  }
+
+  /**
+   * "Scrolls" the top nav in cases where elements are focused but not fully visible.
+   *
+   * @param event The focus event
+   */
+  protected _handleTopNavFocusIn(event: FocusEvent) {
+    const { menuContainerInner, menu } = this;
+    const { target } = event;
+
+    const containerBox = menuContainerInner!.getBoundingClientRect();
+    const buttonBox = (target as HTMLElement).getBoundingClientRect();
+
+    const leftOverflow = Math.max(containerBox.left - buttonBox.left, 0);
+    const rightOverflow = Math.max(buttonBox.right - containerBox.right, 0);
+
+    if (leftOverflow || rightOverflow) {
+      const computedScroll = parseInt(window.getComputedStyle(menu!).translate);
+      const currentScroll = !Number.isNaN(computedScroll) ? computedScroll : 0;
+      let newScroll = currentScroll;
+
+      if (rightOverflow) {
+        newScroll = currentScroll - rightOverflow;
+      }
+
+      if (leftOverflow) {
+        newScroll = currentScroll + leftOverflow;
+      }
+
+      menu!.style.translate = `${newScroll}px`;
+    }
+  }
+
+  /**
+   * Sets active menu item styles.
+   */
+  protected _handleSelectedMenuItem() {
+    const { selectedMenuItem, currentUrlPath } = this;
+
+    const menuItems = Array.from(
+      (this.shadowRoot as ShadowRoot).querySelectorAll(
+        `.${prefix}--masthead__l1-item, .${prefix}--masthead__l1-dropdown-item`
+      )
+    );
+    const allLinks = Array.from(
+      (this.shadowRoot as ShadowRoot).querySelectorAll('a')
+    );
+
+    // Reset all selected elements.
+    Array.from(
+      (this.shadowRoot as ShadowRoot).querySelectorAll('[active]')
+    ).forEach((el) => el?.removeAttribute('active'));
+    this.selectedElements = [];
+
+    // Check for manually set selected item.
+    if (selectedMenuItem) {
+      this.selectedElements = [...menuItems, ...allLinks].filter(
+        (el) =>
+          el.textContent?.trim()?.toLowerCase() ===
+          selectedMenuItem.trim().toLowerCase()
+      );
+    }
+    // Fall back to automated selection based on URL.
+    else {
+      this.selectedElements = allLinks.filter(
+        (el) => el.href === currentUrlPath
+      );
+    }
+
+    if (this.selectedElements.length) {
+      // Set active on nearest menu item.
+      this.selectedElements.forEach((element) => {
+        const parentMenuItem = element.closest(
+          `.${prefix}--masthead__l1-dropdown, .${prefix}--masthead__l1-dropdown-subsection`
+        )?.previousElementSibling;
+
+        // Set on parent item as long as it's not the dropdown toggle.
+        if (
+          parentMenuItem &&
+          !parentMenuItem?.classList?.contains(`bx--masthead__l1-title`)
+        ) {
+          parentMenuItem?.setAttribute('active', '');
+        } else {
+          element.setAttribute('active', '');
+        }
+      });
+    } else {
+      // Should default to active section name if no menu links are selected.
+      const l1Title = this.shadowRoot?.querySelector(
+        `.${prefix}--masthead__l1-title`
+      ) as Element;
+      l1Title.setAttribute('active', '');
+      this.selectedElements.push(l1Title);
+    }
+  }
+
+  /**
+   * Renders a heading object in the proper <H#> element.
+   *
+   * @param heading The heading object to be rendered.
+   * @returns {_TemplateResult} Rendered heading.
+   */
+  protected _renderL1SubSectionHeading(heading: L1SubmenuSectionHeading) {
+    const { isMobileVersion } = this;
+
+    const headingDesc =
+      !isMobileVersion && heading.description
+        ? html`<span class="${prefix}--masthead__l1-dropdown-heading-desc"
+            >${heading.description}</span
+          >`
+        : '';
+
+    const headingContent = heading.url
+      ? html`
+          <a
+            class="${prefix}--masthead__l1-dropdown-item"
+            href="${heading.url}">
+            ${heading.title}${isMobileVersion ? ArrowRight16() : ArrowRight20()}
+          </a>
+        `
+      : html` ${heading.title} `;
+
+    const headingClasses = classMap({
+      [`${prefix}--masthead__l1-dropdown-heading`]: true,
+      [`${prefix}--masthead__l1-dropdown-heading--no-link`]:
+        Boolean(heading.url) === false,
+    });
+
+    let renderedHeading = headingContent;
+    switch (heading.headingLevel) {
+      case 2:
+        renderedHeading = html`
+          <h2 class=${headingClasses}>${headingContent}</h2>
+          ${headingDesc}
+        `;
+        break;
+      case 3:
+        renderedHeading = html`
+          <h3 class=${headingClasses}>${headingContent}</h3>
+          ${headingDesc}
+        `;
+        break;
+      case 4:
+        renderedHeading = html`
+          <h4 class=${headingClasses}>${headingContent}</h4>
+          ${headingDesc}
+        `;
+        break;
+      case 5:
+        renderedHeading = html`
+          <h5 class=${headingClasses}>${headingContent}</h5>
+          ${headingDesc}
+        `;
+        break;
+      case 6:
+        renderedHeading = html`
+          <h6 class=${headingClasses}>${headingContent}</h6>
+          ${headingDesc}
+        `;
+        break;
+      default:
+        renderedHeading = headingContent;
+    }
+
+    return renderedHeading;
+  }
+
+  protected firstUpdated() {
+    this.style.setProperty(
+      '--scrollbarWidth',
+      window.innerWidth - document.documentElement.clientWidth + 'px'
+    );
+
+    // Allows component conditions on breakpoint change
+    layoutBreakpoint.addEventListener('change', () => {
+      this.isMobileVersion = layoutBreakpoint.matches;
+    });
+
+    if (this.isMobileVersion) {
+      this._createScrollObserver();
+    }
+
+    this.direction = window.getComputedStyle(this).direction;
+  }
+
+  protected updated(changedProperties) {
+    if (changedProperties.has('selectedMenuItem')) {
+      this._handleSelectedMenuItem();
+    }
+    if (changedProperties.has('isMobileVersion')) {
+      if (this.isMobileVersion) {
+        // Stop observing, delete the observer.
+        this.scrollObserver?.disconnect();
+        this.scrollObserver = undefined;
+      } else {
+        // Creat observer, start observing.
+        this._createScrollObserver();
+      }
+
+      this._handleSelectedMenuItem();
+    }
+  }
+
   render() {
+    const { isMobileVersion } = this;
     return html`
       <div class="${prefix}--masthead__l1-inner-container">
-        <slot name="name"></slot>
-        <slot></slot>
+        ${isMobileVersion
+          ? html` ${this._renderL1MobileNav()} `
+          : html` ${this._renderL1TopNav()} `}
       </div>
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__l1`;
+    return `${c4dPrefix}--masthead__l1`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMastheadL1;
+export default C4DMastheadL1;
diff --git a/packages/web-components/src/components/masthead/masthead-logo.ts b/packages/web-components/src/components/masthead/masthead-logo.ts
index c209d548d24..f9c3df14460 100644
--- a/packages/web-components/src/components/masthead/masthead-logo.ts
+++ b/packages/web-components/src/components/masthead/masthead-logo.ts
@@ -7,29 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, state, property } from 'lit-element';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import { html } from 'lit';
+import { property, state } from 'lit/decorators.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
 import IBM8BarLogoH23 from '@carbon/ibmdotcom-styles/icons/svg/IBM-8bar-logo--h23.svg';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The IBM logo UI in masthead.
  *
- * @element dds-masthead-logo
+ * @element c4d-masthead-logo
  */
-@customElement(`${ddsPrefix}-masthead-logo`)
-class DDSMastheadLogo extends FocusMixin(
-  HostListenerMixin(StableSelectorMixin(BXLink))
+@customElement(`${c4dPrefix}-masthead-logo`)
+class C4DMastheadLogo extends FocusMixin(
+  HostListenerMixin(StableSelectorMixin(CDSLink))
 ) {
   /**
    * Search bar opened flag.
@@ -60,7 +60,7 @@ class DDSMastheadLogo extends FocusMixin(
    * Link `href`.
    */
   @property()
-  href = (this.constructor as typeof DDSMastheadLogo).hrefDefault;
+  href = (this.constructor as typeof C4DMastheadLogo).hrefDefault;
 
   /**
    * The shadow slot this logo UI should be in.
@@ -70,7 +70,7 @@ class DDSMastheadLogo extends FocusMixin(
 
   // eslint-disable-next-line class-methods-use-this
   protected _renderInner() {
-    return html` <slot>${IBM8BarLogoH23()}</slot> `;
+    return html` <slot>${unsafeSVG(IBM8BarLogoH23)}</slot> `;
   }
 
   updated(changedProperties) {
@@ -83,7 +83,7 @@ class DDSMastheadLogo extends FocusMixin(
       linkNode.setAttribute('aria-label', 'IBM logo');
       linkNode.classList.remove(`${prefix}--link`);
       linkNode.classList.toggle(
-        `${ddsPrefix}-ce--header__logo--has-search-active`,
+        `${c4dPrefix}-ce--header__logo--has-search-active`,
         this._hasSearchActive
       );
     }
@@ -100,14 +100,14 @@ class DDSMastheadLogo extends FocusMixin(
    * The name of the custom event fired after the seach is toggled.
    */
   static get eventToggleSearch() {
-    return `${ddsPrefix}-search-with-typeahead-toggled`;
+    return `${c4dPrefix}-search-with-typeahead-toggled`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead-logo`;
+    return `${c4dPrefix}--masthead-logo`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMastheadLogo;
+export default C4DMastheadLogo;
diff --git a/packages/web-components/src/components/masthead/masthead-menu-button.ts b/packages/web-components/src/components/masthead/masthead-menu-button.ts
index 45862a8b4dd..a0e2b80422f 100644
--- a/packages/web-components/src/components/masthead/masthead-menu-button.ts
+++ b/packages/web-components/src/components/masthead/masthead-menu-button.ts
@@ -7,28 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, state, property, query } from 'lit-element';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import BXHeaderMenuButton from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu-button.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSHeaderMenuButton from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu-button.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import focuswrap from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/focuswrap/focuswrap';
 import Handle from '../../globals/internal/handle';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Toggle button for masthead left nav.
  *
- * @element dds-masthead-menu-button
+ * @element c4d-masthead-menu-button
  */
-@customElement(`${ddsPrefix}-masthead-menu-button`)
-class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
+@customElement(`${c4dPrefix}-masthead-menu-button`)
+class C4DMastheadMenuButton extends HostListenerMixin(CDSHeaderMenuButton) {
   /**
    * The handle for focus wrapping.
    */
@@ -129,8 +128,8 @@ class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
       _renderSentinel: renderSentinel,
     } = this;
     const classes = classMap({
-      [`${ddsPrefix}-ce--header__menu-trigger__container`]: true,
-      [`${ddsPrefix}-ce--header__menu-trigger__container--has-search-active`]:
+      [`${c4dPrefix}-ce--header__menu-trigger__container`]: true,
+      [`${c4dPrefix}-ce--header__menu-trigger__container--has-search-active`]:
         hasSearchActive,
     });
     const startSentinel = active ? renderSentinel('start') : '';
@@ -146,10 +145,10 @@ class DDSMastheadMenuButton extends HostListenerMixin(BXHeaderMenuButton) {
    * The name of the custom event fired after the seach is toggled.
    */
   static get eventToggleSearch() {
-    return `${ddsPrefix}-search-with-typeahead-toggled`;
+    return `${c4dPrefix}-search-with-typeahead-toggled`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMastheadMenuButton;
+export default C4DMastheadMenuButton;
diff --git a/packages/web-components/src/components/masthead/masthead-profile-item.ts b/packages/web-components/src/components/masthead/masthead-profile-item.ts
index 8b200794277..142fa4e6431 100644
--- a/packages/web-components/src/components/masthead/masthead-profile-item.ts
+++ b/packages/web-components/src/components/masthead/masthead-profile-item.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXHeaderMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSHeaderMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Profile menu item in masthead.
  *
- * @element dds-masthead-profile-item
+ * @element c4d-masthead-profile-item
  */
-@customElement(`${ddsPrefix}-masthead-profile-item`)
-class DDSMastheadProfileItem extends BXHeaderMenuItem {
+@customElement(`${c4dPrefix}-masthead-profile-item`)
+class C4DMastheadProfileItem extends CDSHeaderMenuItem {
   static styles = styles;
 
   firstUpdated() {
@@ -30,4 +30,4 @@ class DDSMastheadProfileItem extends BXHeaderMenuItem {
   }
 }
 
-export default DDSMastheadProfileItem;
+export default C4DMastheadProfileItem;
diff --git a/packages/web-components/src/components/masthead/masthead-profile.ts b/packages/web-components/src/components/masthead/masthead-profile.ts
index 7e64852e5eb..fa24b92f651 100644
--- a/packages/web-components/src/components/masthead/masthead-profile.ts
+++ b/packages/web-components/src/components/masthead/masthead-profile.ts
@@ -7,29 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import { html, property, query, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { LitElement, html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import User20 from '../../internal/vendor/@carbon/web-components/icons/user/20.js';
 import UserOnline20 from '../../internal/vendor/@carbon/web-components/icons/user--online/20.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The profile menu UI in the masthead.
  *
- * @element dds-masthead-profile
+ * @element c4d-masthead-profile
  */
-@customElement(`${ddsPrefix}-masthead-profile`)
-class DDSMastheadProfile extends HostListenerMixin(
+@customElement(`${c4dPrefix}-masthead-profile`)
+class C4DMastheadProfile extends HostListenerMixin(
   FocusMixin(StableSelectorMixin(LitElement))
 ) {
   /**
@@ -103,15 +102,6 @@ class DDSMastheadProfile extends HostListenerMixin(
   @property({ attribute: 'trigger-label' })
   triggerLabel = 'User profile';
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const {
       authenticated,
@@ -138,10 +128,14 @@ class DDSMastheadProfile extends HostListenerMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead-profile`;
+    return `${c4dPrefix}--masthead-profile`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMastheadProfile;
+export default C4DMastheadProfile;
diff --git a/packages/web-components/src/components/masthead/masthead.scss b/packages/web-components/src/components/masthead/masthead.scss
index dd69a4fed66..a1e57f360b2 100644
--- a/packages/web-components/src/components/masthead/masthead.scss
+++ b/packages/web-components/src/components/masthead/masthead.scss
@@ -5,45 +5,107 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/components/ui-shell/header';
-@import 'carbon-components/scss/components/ui-shell/side-nav';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead';
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-leftnav';
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-top-nav-name';
-@import '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead/search-with-typeahead';
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-l1';
-@import '@carbon/web-components/scss/components/tooltip/tooltip';
-@import '@carbon/web-components/scss/components/ui-shell/header';
-@import '@carbon/web-components/scss/components/ui-shell/side-nav';
-@import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-megamenu';
-@import '../../globals/scss/box-sizing';
-
-:host(#{$dds-prefix}-masthead-menu-button) {
-  @extend :host(#{$prefix}-header-menu-button);
+@use '@carbon/styles/scss/breakpoint' as *;
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/motion' as *;
+@use '@carbon/styles/scss/reset' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/styles/scss/type' as *;
+@use '@carbon/styles/scss/utilities' as *;
+@use '@carbon/styles/scss/components/button/tokens' as *;
+@use '@carbon/styles/scss/components/tooltip/tooltip' as *;
+@use '@carbon/styles/scss/components/ui-shell/header' as *;
+@use '@carbon/styles/scss/components/ui-shell/side-nav' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/masthead' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead/' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/web-components/scss/components/tooltip/tooltip' as *;
+@use '@carbon/web-components/scss/components/ui-shell/header' as *;
+@use '@carbon/web-components/scss/components/ui-shell/side-nav' as *;
+@use '../cta/cta.scss' as *;
+
+// Magic Number: 799px matches masthead-composite's `layoutBreakpoint`.
+$breakpoint--desktop-nav: 799px;
+
+:host(#{$c4d-prefix}-masthead-container),
+#{$c4d-prefix}-masthead-container {
+  position: relative;
+}
 
+:host(#{$c4d-prefix}-masthead-menu-button) {
+  // @extend :host(#{$prefix}-header-menu-button);
   position: relative;
-  width: mini-units(6);
-  height: mini-units(6);
+  width: $spacing-09;
+  height: $spacing-09;
 
   &[hide-menu-button] {
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       display: none;
     }
   }
 
-  .#{$dds-prefix}-ce--header__menu-trigger__container {
+  .#{$c4d-prefix}-ce--header__menu-trigger__container {
     display: contents;
   }
 
-  .#{$dds-prefix}-ce--header__menu-trigger__container--has-search-active {
-    @include carbon--breakpoint-down('md') {
+  .#{$c4d-prefix}-ce--header__menu-trigger__container--has-search-active {
+    @include breakpoint-down(md) {
       display: none;
     }
   }
 }
 
-:host(#{$dds-prefix}-masthead-logo) {
+:host(#{$c4d-prefix}-masthead-button-cta) {
+  @extend :host(#{$c4d-prefix}-button-cta);
+
+  margin: 0;
+  padding-inline-end: 0;
+
+  &.console .#{$prefix}--btn--ghost {
+    border-left: 1px solid $button-separator;
+    color: $link-secondary;
+  }
+
+  &:first-of-type {
+    .#{$prefix}--btn--ghost::before {
+      @include breakpoint-up(800px) {
+        content: '';
+        display: block;
+        position: absolute;
+        left: 0;
+        top: 50%;
+        transform: translateY(-50%);
+        height: rem(24px);
+        width: rem(1px);
+        background-color: $button-separator;
+      }
+    }
+  }
+
+  .#{$prefix}--btn {
+    padding: calc(0.875rem - 3px) rem(15px);
+  }
+
+  .#{$prefix}--btn--ghost {
+    color: $link-primary;
+    @include type-style('body-short-02');
+
+    &:hover,
+    &:focus {
+      color: $link-secondary;
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-masthead-global-bar)
+  ::slotted(#{$c4d-prefix}-masthead-button-cta) {
+  @include breakpoint-down('md') {
+    display: none;
+  }
+}
+
+:host(#{$c4d-prefix}-masthead-logo) {
   @extend :host(#{$prefix}-header-name);
   @include masthead-logo;
 
@@ -57,8 +119,8 @@
     height: 23px;
   }
 
-  .#{$dds-prefix}-ce--header__logo--has-search-active {
-    @include carbon--breakpoint-down('md') {
+  .#{$c4d-prefix}-ce--header__logo--has-search-active {
+    @include breakpoint-down(md) {
       display: none;
     }
   }
@@ -70,62 +132,96 @@
   }
 }
 
-:host(#{$dds-prefix}-top-nav-name) {
+:host(#{$c4d-prefix}-top-nav-name) {
   outline: none;
+  position: relative;
   z-index: 1;
-  background: $ui-background;
+  background: $background;
 
   a.#{$prefix}--header__name {
     @include masthead-top-nav-name;
+
+    margin-left: 0;
+
+    @include breakpoint-down($breakpoint--desktop-nav) {
+      display: flex;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    @include breakpoint-up('lg') {
+      margin-left: 0;
+    }
+
+    @include breakpoint-up('xlg') {
+      margin-left: $spacing-05;
+      position: relative;
+    }
   }
 }
 
-:host(#{$dds-prefix}-masthead-search) {
+:host(#{$c4d-prefix}-masthead-search) {
   outline: none;
 
-  .#{$dds-prefix}-ce--masthead__search__list {
+  .#{$c4d-prefix}-ce--masthead__search__list {
     height: 0;
     overflow: hidden;
   }
 
-  &[open] .#{$dds-prefix}-ce--masthead__search__list {
+  &[open] .#{$c4d-prefix}-ce--masthead__search__list {
     height: auto;
   }
 }
 
-:host(#{$dds-prefix}-masthead-search-item) {
+:host(#{$c4d-prefix}-masthead-search-item) {
   @extend .react-autosuggest__suggestion;
 
-  font-size: $carbon--spacing-05;
+  font-size: $spacing-05;
 }
 
-:host(#{$dds-prefix}-masthead-global-bar) {
+:host(#{$c4d-prefix}-masthead-global-bar) {
   @extend .#{$prefix}--header__global;
 
+  background-color: $background;
+  flex: none;
+  z-index: 0;
+  display: flex;
+  height: 100%;
+
+  ::slotted(#{$c4d-prefix}-button-cta) {
+    @include breakpoint-down('md') {
+      display: none;
+    }
+  }
+
   &[has-search-active] {
-    @include carbon--breakpoint-down('md') {
+    @include breakpoint-down(md) {
       display: none;
     }
   }
 
-  .#{$dds-prefix}-ce--header__global__container {
+  .#{$c4d-prefix}-ce--header__global__container {
     display: contents;
   }
 
-  .#{$dds-prefix}-ce--header__global__container--has-search-active {
-    @include carbon--breakpoint-down('md') {
+  .#{$c4d-prefix}-ce--header__global__container--has-search-active {
+    @include breakpoint-down(md) {
       display: none;
     }
   }
 }
 
-:host(#{$dds-prefix}-masthead-profile),
-:host(#{$dds-prefix}-cloud-masthead-profile) {
-  background-color: $ui-background;
+:host(#{$c4d-prefix}-masthead-profile),
+:host(#{$c4d-prefix}-masthead-contact),
+:host(#{$c4d-prefix}-cloud-masthead-profile) {
+  background-color: $background;
   width: $spacing-09;
+
   a.#{$prefix}--header__menu-item {
     @include masthead-top-nav-link;
 
+    color: $icon-primary;
     justify-content: center;
     padding: 0;
   }
@@ -134,24 +230,24 @@
     + .#{$prefix}--header__menu {
       left: auto;
       right: 0;
-      width: rem(160px);
+      width: $spacing-13;
     }
   }
 }
 
-:host(#{$dds-prefix}-top-nav),
-:host(#{$dds-prefix}-top-nav-l1) {
+:host(#{$c4d-prefix}-top-nav),
+:host(#{$c4d-prefix}-top-nav-l1) {
   display: none;
-  background-color: $ui-background;
+  background-color: $background;
 
-  @include carbon--breakpoint(800px) {
+  @include breakpoint-up($breakpoint--desktop-nav) {
     flex: 1;
     display: flex;
     align-items: stretch;
   }
 
   .#{$prefix}--header__nav {
-    @include carbon--breakpoint(800px) {
+    @include breakpoint-up($breakpoint--desktop-nav) {
       display: block;
       position: absolute;
     }
@@ -161,7 +257,7 @@
     padding-left: 0;
   }
 
-  .#{$dds-prefix}-ce--header__nav-content-container {
+  .#{$c4d-prefix}-ce--header__nav-content-container {
     flex: 1;
     position: relative;
   }
@@ -171,6 +267,7 @@
     bottom: 0;
     z-index: 1;
     position: relative;
+    background-color: $background;
   }
 
   .#{$prefix}--header__nav-caret-right-container {
@@ -194,87 +291,66 @@
   .#{$prefix}--header__nav-caret-right {
     position: relative;
     // 40px caret width & 8px gradient
-    height: 48px;
+    height: $spacing-09;
   }
 
-  .#{$dds-prefix}-ce--header__nav-caret-container--hidden {
+  .#{$c4d-prefix}-ce--header__nav-caret-container--hidden {
     position: absolute;
     visibility: hidden;
   }
 }
 
-:host(#{$dds-prefix}-top-nav)[cloud],
-:host(#{$dds-prefix}-top-nav-l1)[cloud] {
-  @include carbon--breakpoint(800px) {
-    display: none;
-  }
-
-  @include carbon--breakpoint(960px) {
-    flex: 1;
-    display: flex;
-    align-items: stretch;
-  }
-
-  .#{$prefix}--header__nav {
-    @include carbon--breakpoint(800px) {
-      display: none;
-    }
-
-    @include carbon--breakpoint(960px) {
-      display: block;
-      position: absolute;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-top-nav-l1) {
+:host(#{$c4d-prefix}-top-nav-l1) {
   overflow: visible;
 }
 
-:host(#{$dds-prefix}-top-nav-item) {
-  @extend :host(#{$prefix}-header-nav-item);
-}
-
-:host(#{$dds-prefix}-top-nav-menu),
-:host(#{$dds-prefix}-megamenu-top-nav-menu),
-:host(#{$dds-prefix}-masthead-profile),
-:host(#{$dds-prefix}-cloud-masthead-profile) {
-  @extend :host(#{$prefix}-header-menu);
+:host(#{$c4d-prefix}-top-nav-menu),
+:host(#{$c4d-prefix}-megamenu-top-nav-menu),
+:host(#{$c4d-prefix}-masthead-profile),
+:host(#{$c4d-prefix}-masthead-contact),
+:host(#{$c4d-prefix}-cloud-masthead-profile) {
+  // @extend :host(#{$prefix}-header-menu);
+  position: relative;
 
   .#{$prefix}--header__menu-title[aria-expanded='true'] {
-    background-color: $ui-01;
+    background-color: $layer-01;
     z-index: 0;
   }
 }
 
-:host(#{$dds-prefix}-top-nav-menu),
-:host(#{$dds-prefix}-masthead-profile),
-:host(#{$dds-prefix}-cloud-masthead-profile) {
+:host(#{$c4d-prefix}-top-nav-menu),
+:host(#{$c4d-prefix}-masthead-profile),
+:host(#{$c4d-prefix}-masthead-contact),
+:host(#{$c4d-prefix}-cloud-masthead-profile) {
   .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
-    background-color: $ui-background;
-    box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.3);
+    background-color: $background;
+    box-shadow: 0 $spacing-01 6px 0 rgba(0, 0, 0, 0.3);
     bottom: -1px;
+
+    @include breakpoint-down('md') {
+      width: 100vw;
+    }
   }
 }
 
-:host(#{$dds-prefix}-top-nav-menu-item),
-:host(#{$dds-prefix}-masthead-profile-item) {
-  @extend :host(#{$prefix}-header-menu-item);
+:host(#{$c4d-prefix}-top-nav-menu-item),
+:host(#{$c4d-prefix}-masthead-profile-item) {
+  // @extend :host(#{$prefix}-header-menu-item);
   @include masthead-top-nav-menu-item;
 
   a.#{$prefix}--header__menu-item {
     height: 100%;
+    background-color: transparent;
   }
 }
 
-:host(#{$dds-prefix}-top-nav-item),
-:host(#{$dds-prefix}-top-nav-menu),
-:host(#{$dds-prefix}-megamenu-top-nav-menu),
-:host(#{$dds-prefix}-top-nav-menu-item),
-:host(#{$dds-prefix}-masthead-profile-item) {
+:host(#{$c4d-prefix}-top-nav-item),
+:host(#{$c4d-prefix}-top-nav-menu),
+:host(#{$c4d-prefix}-megamenu-top-nav-menu),
+:host(#{$c4d-prefix}-top-nav-menu-item),
+:host(#{$c4d-prefix}-masthead-profile-item) {
   .#{$prefix}--header__menu-arrow {
-    fill: $text-01;
     width: 20px;
     height: 20px;
   }
@@ -282,34 +358,35 @@
   a.#{$prefix}--header__menu-item {
     @include masthead-top-nav-link;
 
+    svg {
+      fill: $icon-secondary;
+    }
+
     &:hover {
-      color: $text-01;
+      color: $text-primary;
     }
   }
 }
 
-:host(#{$dds-prefix}-megamenu-top-nav-menu) {
+:host(#{$c4d-prefix}-megamenu-top-nav-menu) {
   .#{$prefix}--header__menu-title[aria-expanded='true']
     + .#{$prefix}--header__menu {
     bottom: auto;
     height: auto;
-    max-height: calc(
-      100vh - var(--cds-spacing-09, 3rem) - var(--cds-layout-05, 4rem)
-    );
     min-height: 0;
   }
 }
 
-:host(#{$dds-prefix}-left-nav) {
-  @extend :host(#{$prefix}-side-nav);
+:host(#{$c4d-prefix}-left-nav) {
+  @extend .#{$prefix}--side-nav;
 
   display: block;
   overflow: hidden;
-  margin-top: calc(#{mini-units(6)} + 1px);
-  height: calc(100% - #{mini-units(6)} - 1px);
+  margin-top: calc(#{$spacing-09} + 1px);
+  height: calc(100% - #{$spacing-09} - 1px);
   width: 16rem;
 
-  @include carbon--breakpoint-down(md) {
+  @include breakpoint-down(md) {
     width: 100vw;
     max-width: 100vw;
   }
@@ -319,8 +396,8 @@
     inset-inline-start: -100vw;
     visibility: hidden;
     /* stylelint-disable-next-line  time-min-milliseconds */
-    transition: visibility 1ms motion(exit, productive) $duration--fast-02,
-      left $duration--fast-02 motion(exit, productive) 1ms;
+    transition: visibility 1ms motion(exit, productive) $duration-fast-02,
+      left $duration-fast-02 motion(exit, productive) 1ms;
   }
 
   &[expanded][usage-mode='header-nav'],
@@ -330,7 +407,7 @@
     visibility: visible;
     /* stylelint-disable-next-line time-min-milliseconds */
     transition: visibility 1ms motion(exit, productive) 0ms,
-      inset-inline-start $duration--fast-02 motion(exit, productive) 1ms;
+      inset-inline-start $duration-fast-02 motion(exit, productive) 1ms;
   }
 
   .#{$prefix}--side-nav__wrapper {
@@ -350,100 +427,116 @@
     position: relative;
   }
 
-  ::slotted(#{$dds-prefix}-left-nav-menu-section) {
+  ::slotted(#{$c4d-prefix}-left-nav-menu-section) {
     overflow: hidden;
     height: auto;
   }
 }
 
-:host(#{$dds-prefix}-masthead-menu-button),
-:host(#{$dds-prefix}-left-nav) {
-  @include carbon--breakpoint('md') {
+:host(#{$c4d-prefix}-masthead-menu-button),
+:host(#{$c4d-prefix}-left-nav) {
+  @include breakpoint(md) {
     display: block;
   }
-
-  @include carbon--breakpoint(800px) {
-    display: none;
-  }
 }
 
-:host(#{$dds-prefix}-masthead-menu-button)[cloud],
-:host(#{$dds-prefix}-left-nav)[cloud] {
-  @include carbon--breakpoint('md') {
-    display: block;
-  }
-
-  @include carbon--breakpoint(960px) {
-    display: none;
-  }
-}
-
-:host(#{$dds-prefix}-left-nav-name) {
+:host(#{$c4d-prefix}-left-nav-name) {
   .#{$prefix}--side-nav__submenu-platform {
     display: flex;
     align-items: center;
-    height: carbon--mini-units(6);
-    padding: 0 mini-units(2);
-    border-bottom: 1px solid $ui-04;
+    height: $spacing-09;
+    padding: 0 $spacing-05;
+    border-bottom: 1px solid $border-strong-01;
     text-decoration: none;
-    color: $text-01;
+    color: $text-primary;
     flex-direction: row;
 
     &::after {
       content: none;
     }
 
-    @include carbon--type-style(expressive-heading-02, true);
+    @include type-style(heading-02, true);
   }
 }
 
-:host(#{$dds-prefix}-left-nav-items) {
-  @extend :host(#{$prefix}-side-nav-items);
-}
-
-:host(#{$dds-prefix}-left-nav-item) {
+:host(#{$c4d-prefix}-left-nav-item) {
   @extend :host(#{$prefix}-side-nav-link);
-}
 
-:host(#{$dds-prefix}-left-nav-menu) {
-  @extend :host(#{$prefix}-side-nav-menu);
+  a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
+    color: $text-secondary;
+
+    &:hover,
+    &:focus {
+      color: $text-primary;
+    }
+  }
+
+  &:last-child {
+    a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
+      color: $link-primary;
+
+      &:hover,
+      &:focus {
+        color: $link-secondary;
+      }
+    }
+  }
 }
 
-:host(#{$dds-prefix}-left-nav-menu-item) {
+:host(#{$c4d-prefix}-left-nav-menu-item),
+:host(#{$c4d-prefix}-left-nav-cta-item) {
   @extend :host(#{$prefix}-side-nav-menu-item);
 }
 
-:host(#{$dds-prefix}-left-nav-item-highlighted) a.#{$prefix}--side-nav__link,
-:host(#{$dds-prefix}-left-nav-menu-item-highlighted)
+:host(#{$c4d-prefix}-left-nav-cta-item) {
+  @include breakpoint-up(md) {
+    display: none;
+  }
+
+  a.#{$prefix}--side-nav__link .#{$prefix}--side-nav__link-text {
+    @include type-style(body-short-02, true);
+
+    color: $link-primary;
+    display: flex;
+    justify-content: space-between;
+
+    > svg {
+      flex-shrink: 0;
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-left-nav-item-highlighted) a.#{$prefix}--side-nav__link,
+:host(#{$c4d-prefix}-left-nav-menu-item-highlighted)
   a.#{$prefix}--side-nav__link,
-:host(#{$dds-prefix}-left-nav-item) a.#{$prefix}--side-nav__link,
-:host(#{$dds-prefix}-left-nav-menu-item) a.#{$prefix}--side-nav__link {
+:host(#{$c4d-prefix}-left-nav-item) a.#{$prefix}--side-nav__link,
+:host(#{$c4d-prefix}-left-nav-menu-item) a.#{$prefix}--side-nav__link {
   display: flex;
   flex-direction: column;
   justify-content: center;
-  padding-left: $carbon--spacing-05;
-  height: carbon--mini-units(6);
+  padding-left: $spacing-05;
+  height: $spacing-09;
   width: 100%;
 }
 
-:host(#{$dds-prefix}-left-nav-item),
-:host(#{$dds-prefix}-left-nav-menu),
-:host(#{$dds-prefix}-left-nav-menu-item) {
+:host(#{$c4d-prefix}-left-nav-item),
+:host(#{$c4d-prefix}-left-nav-menu),
+:host(#{$c4d-prefix}-left-nav-menu-item) {
   .#{$prefix}--side-nav__link:hover {
-    background-color: $shell-side-nav-bg-04;
-    color: $ibm-color__gray-100;
+    background-color: $background-hover;
+    color: $text-primary;
   }
 }
 
-:host(#{$dds-prefix}-left-nav-menu),
-:host(#{$dds-prefix}-left-nav-menu-item),
-:host(#{$dds-prefix}-left-nav-menu-section) {
+:host(#{$c4d-prefix}-left-nav-menu),
+:host(#{$c4d-prefix}-left-nav-menu-item),
+:host(#{$c4d-prefix}-left-nav-menu-section) {
   .#{$prefix}--side-nav__link,
   .#{$prefix}--side-nav__submenu,
   a.#{$prefix}--side-nav__link,
   .#{$prefix}--side-nav__submenu .#{$prefix}--side-nav__submenu-content {
     height: auto;
-    min-height: carbon--mini-units(6);
+    min-height: $spacing-09;
   }
 
   .#{$prefix}--side-nav__submenu-title,
@@ -461,61 +554,266 @@
   height: 100vh;
   background-color: rgba(22, 22, 22, 0.5);
   opacity: 1;
-  transition: opacity $transition--expansion $carbon--standard-easing,
-    background-color $transition--expansion $carbon--standard-easing;
+  transition: opacity $transition-expansion $standard-easing,
+    background-color $transition-expansion $standard-easing;
 
   // Makes the trigger button work without making it floated. In this way, we don't have to adjust the position of the logo
   top: 0;
   left: 0;
   z-index: calc(#{z('header')} - 1);
   clip-path: polygon(
-      mini-units(6) 0,
+      $spacing-09 0,
       100% 0,
       100% 100%,
       0 100%,
-      0 calc(#{mini-units(6)} + 1px),
-      mini-units(6) calc(#{mini-units(6)} + 1px)
+      0 calc(#{$spacing-09} + 1px),
+      $spacing-09 calc(#{$spacing-09} + 1px)
     )
-    #{'/*!rtl:polygon(0 0, calc(100% - ' + mini-units(6) + ') 0, calc(100% - ' +
-    mini-units(6) + ') calc(' + mini-units(6) + ' + 1px), 100% calc(' +
-    mini-units(6) + ' + 1px), 100% 100%, 0 100%)*/'};
+    #{'/*!rtl:polygon(0 0, calc(100% - ' + $spacing-09 + ') 0, calc(100% - ' +
+    $spacing-09 + ') calc(' + $spacing-09 + ' + 1px), 100% calc(' + $spacing-09 +
+    ' + 1px), 100% 100%, 0 100%)*/'};
 }
 
-:host(#{$dds-prefix}-left-nav-overlay) {
-  @extend .#{$prefix}--side-nav__overlay;
-
-  &[active] {
-    @include carbon--breakpoint-down(800px) {
-      @include left-nav-overlay;
-    }
-  }
-}
+:host(#{$c4d-prefix}-left-nav-overlay) {
+  // @extend .#{$prefix}--side-nav__overlay;
 
-:host(#{$dds-prefix}-left-nav-overlay)[cloud] {
   &[active] {
-    @include carbon--breakpoint-down(960px) {
+    @include breakpoint-down($breakpoint--desktop-nav) {
       @include left-nav-overlay;
     }
   }
 }
 
-:host(#{$dds-prefix}-left-nav-overlay[dir='rtl']) {
+:host(#{$c4d-prefix}-left-nav-overlay[dir='rtl']) {
   clip-path: polygon(
     0 0,
-    calc(100% - #{mini-units(6)}) 0,
-    calc(100% - #{mini-units(6)}) calc(#{mini-units(6)} + 1px),
-    100% calc(#{mini-units(6)} + 1px),
+    calc(100% - #{$spacing-09}) 0,
+    calc(100% - #{$spacing-09}) calc(#{$spacing-09} + 1px),
+    100% calc(#{$spacing-09} + 1px),
     100% 100%,
     0 100%
   );
 }
 
-:host(#{$dds-prefix}-megamenu-link-with-icon):focus,
-:host(#{$dds-prefix}-megamenu-category-link):focus {
+:host(#{$c4d-prefix}-megamenu-link-with-icon):focus,
+:host(#{$c4d-prefix}-megamenu-category-link):focus {
   outline: none;
 }
 
-:host(#{$dds-prefix}-masthead-search-composite),
-:host(#{$dds-prefix}-masthead-search-container) {
+:host(#{$c4d-prefix}-masthead-search-composite),
+:host(#{$c4d-prefix}-masthead-search-container) {
   display: contents;
 }
+
+:host(#{$c4d-prefix}-megamenu),
+.#{$prefix}--masthead__megamenu {
+  position: relative;
+
+  &[overflowing]::after {
+    content: '';
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: rem(48px);
+    background: linear-gradient(transparent, $background);
+    pointer-events: none;
+  }
+
+  .#{$prefix}--masthead__megamenu__container {
+    width: 100%;
+    height: 100%;
+    overflow-x: hidden;
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu[layout='tab']) {
+  ::slotted(#{$c4d-prefix}-megamenu-left-navigation) {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-tabs) {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: $spacing-05;
+
+  .#{$prefix}--tabs-trigger {
+    display: none;
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-tab) {
+  outline: 0;
+
+  button {
+    @include type-style(body-long-01);
+
+    color: $text-secondary;
+    width: 100%;
+    border: none;
+    text-align: left;
+    padding: rem(6px) $spacing-05;
+    background-color: $background;
+    cursor: pointer;
+
+    &:hover,
+    &:focus {
+      color: $text-primary;
+    }
+
+    &:hover {
+      background-color: $background-hover;
+    }
+
+    &:focus {
+      outline: rem(2px) solid $focus;
+      outline-offset: rem(-2px);
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-tab)[selected] button {
+  background-color: $background-selected;
+  color: $text-primary;
+}
+
+:host(#{$c4d-prefix}-megamenu-category-link-group) {
+  display: flex;
+  flex-flow: wrap;
+  justify-content: flex-start;
+}
+
+:host(#{$c4d-prefix}-megamenu-category-link) {
+  a:has([part='link-heading']) {
+    padding: $spacing-04 $spacing-05;
+    height: 100%;
+
+    > span {
+      display: block;
+      max-width: rem(272px);
+    }
+
+    &:active,
+    &:hover {
+      svg {
+        fill: $icon-primary;
+      }
+    }
+  }
+
+  [part='link-heading'] {
+    @include type-style('expressive-heading-01');
+
+    svg {
+      margin-inline-start: $spacing-03;
+      padding-block-start: $spacing-01;
+      /* shrink SVG with padding to match font-size */
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-heading),
+:host(#{$c4d-prefix}-megamenu-category-heading) {
+  display: block;
+  padding: 0 $spacing-05;
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    display: inline-block;
+    color: $text-primary;
+    margin-block: 0;
+
+    a {
+      color: inherit;
+      text-decoration: none;
+      align-self: center;
+      display: flex;
+
+      &:hover {
+        text-decoration: underline;
+      }
+
+      &:focus {
+        outline: rem(2px) solid $focus;
+        outline-offset: rem(-2px);
+      }
+    }
+
+    svg {
+      position: relative;
+      margin: 0 $spacing-03;
+      fill: $icon-primary;
+      flex-shrink: 0;
+
+      /* stylelint-disable-next-line comment-whitespace-inside */
+      /*!rtl:raw:
+        transform: scaleX(-1);
+        */
+    }
+
+    &[data-has-href]:active,
+    &[data-has-href]:hover {
+      a,
+      ~ span {
+        color: $text-primary;
+      }
+
+      svg {
+        fill: $icon-primary;
+      }
+    }
+  }
+
+  > span {
+    @include type-style(body-short-01);
+
+    display: block;
+    margin-top: $spacing-03;
+    color: $text-secondary;
+
+    &[data-has-content] {
+      margin-bottom: $spacing-06;
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-heading) {
+  margin-bottom: $spacing-06;
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include type-style(heading-05, true);
+
+    svg {
+      top: $spacing-03;
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-category-heading) {
+  margin-bottom: $spacing-05;
+
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    @include type-style(heading-03, true);
+
+    svg {
+      top: $spacing-02;
+    }
+  }
+}
+
+:host(#{$c4d-prefix}-megamenu-category-heading.has-content) {
+  margin-bottom: $spacing-06;
+}
diff --git a/packages/web-components/src/components/masthead/masthead.ts b/packages/web-components/src/components/masthead/masthead.ts
index 3d135429d27..bed226dee3a 100644
--- a/packages/web-components/src/components/masthead/masthead.ts
+++ b/packages/web-components/src/components/masthead/masthead.ts
@@ -7,31 +7,45 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './masthead.scss';
 import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead.
  *
- * @element dds-masthead
+ * @element c4d-masthead
  * @slot brand - The left hand area.
  * @slot nav - The nav content.
  * @slot profile - The right hand area.
  */
-@customElement(`${ddsPrefix}-masthead`)
-class DDSMasthead extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-masthead`)
+class C4DMasthead extends StableSelectorMixin(LitElement) {
   firstUpdated() {
     StickyHeader.global.masthead = this;
   }
 
+  /**
+   * Re-initializes masthead component with StickyHeader class in case of L1 addition/removal.
+   */
+  handleL1Change({ target }) {
+    const L1Navs = (target as HTMLSlotElement)
+      .assignedElements()
+      .filter(
+        (element) =>
+          element.tagName.toLowerCase() === `${c4dPrefix}-masthead-l1`
+      );
+
+    if (L1Navs.length) {
+      StickyHeader.global.masthead = this;
+    }
+  }
+
   render() {
     return html`
       <div class="${prefix}--masthead__l0">
@@ -46,16 +60,16 @@ class DDSMasthead extends StableSelectorMixin(LitElement) {
           <slot name="profile"></slot>
         </div>
       </div>
-      <slot name="masthead-l1"></slot>
+      <slot name="masthead-l1" @slotchange=${this.handleL1Change}></slot>
     `;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead`;
+    return `${c4dPrefix}--masthead`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSMasthead;
+export default C4DMasthead;
diff --git a/packages/web-components/src/components/masthead/megamenu-category-group-copy.ts b/packages/web-components/src/components/masthead/megamenu-category-group-copy.ts
index 2d3ed930e3e..352a58b0068 100644
--- a/packages/web-components/src/components/masthead/megamenu-category-group-copy.ts
+++ b/packages/web-components/src/components/masthead/megamenu-category-group-copy.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu Category Group Description.
  *
- * @element dds-megamenu-category-group-desc
+ * @element c4d-megamenu-category-group-desc
  */
-@customElement(`${ddsPrefix}-megamenu-category-group-copy`)
-class DDSMegaMenuCategoryGroupCopy extends LitElement {
+@customElement(`${c4dPrefix}-megamenu-category-group-copy`)
+class C4DMegaMenuCategoryGroupCopy extends LitElement {
   render() {
     return html` <slot></slot> `;
   }
@@ -28,4 +28,4 @@ class DDSMegaMenuCategoryGroupCopy extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMegaMenuCategoryGroupCopy;
+export default C4DMegaMenuCategoryGroupCopy;
diff --git a/packages/web-components/src/components/masthead/megamenu-category-group.ts b/packages/web-components/src/components/masthead/megamenu-category-group.ts
index 9805ddd3ca5..627e2fef741 100644
--- a/packages/web-components/src/components/masthead/megamenu-category-group.ts
+++ b/packages/web-components/src/components/masthead/megamenu-category-group.ts
@@ -7,25 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import './megamenu-link-with-icon';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu category group
  *
- * @element dds-megamenu-category-group
+ * @element c4d-megamenu-category-group
  */
-@customElement(`${ddsPrefix}-megamenu-category-group`)
-class DDSMegaMenuCategoryGroup extends LitElement {
+@customElement(`${c4dPrefix}-megamenu-category-group`)
+class C4DMegaMenuCategoryGroup extends LitElement {
   /**
    * href for the category group title
    */
@@ -39,25 +36,16 @@ class DDSMegaMenuCategoryGroup extends LitElement {
   title = '';
 
   render() {
-    const { href, title } = this;
     return html`
       <div class="${prefix}--masthead__megamenu__category-group-shield">
-        <div class="${prefix}--masthead__megamenu__category-group-content">
-          ${href
-            ? html`
-                <dds-megamenu-link-with-icon
-                  href="${ifNonNull(href)}"
-                  style-scheme="category-headline"
-                  title="${title}">
-                  <span>${title}</span>${ArrowRight16({ slot: 'icon' })}
-                </dds-megamenu-link-with-icon>
-              `
-            : html`
-                <div class="${prefix}--masthead__megamenu__category-headline">
-                  <p>${title}</p>
-                </div>
-              `}
-          <slot></slot>
+        <div
+          class="${prefix}--masthead__megamenu__category-group-content-wrapper">
+          <div class="${prefix}--masthead__megamenu__category-group-heading">
+            <slot name="heading"></slot>
+          </div>
+          <div class="${prefix}--masthead__megamenu__category-group-content">
+            <slot></slot>
+          </div>
         </div>
       </div>
     `;
@@ -66,4 +54,4 @@ class DDSMegaMenuCategoryGroup extends LitElement {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMegaMenuCategoryGroup;
+export default C4DMegaMenuCategoryGroup;
diff --git a/packages/web-components/src/components/masthead/megamenu-category-heading.ts b/packages/web-components/src/components/masthead/megamenu-category-heading.ts
new file mode 100644
index 00000000000..e3d2b92a14e
--- /dev/null
+++ b/packages/web-components/src/components/masthead/megamenu-category-heading.ts
@@ -0,0 +1,34 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022, 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 { property } from 'lit/decorators.js';
+import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DMegaMenuHeading from './megamenu-heading';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * MegaMenu Category Heading.
+ *
+ * @element c4d-megamenu-category-heading
+ */
+@customElement(`${c4dPrefix}-megamenu-category-heading`)
+class C4DMegaMenuCategoryHeading extends C4DMegaMenuHeading {
+  protected _arrowIcon = ArrowRight20();
+
+  @property({ reflect: true, type: Number, attribute: 'heading-level' })
+  headingLevel = 3;
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default C4DMegaMenuCategoryHeading;
diff --git a/packages/web-components/src/components/masthead/megamenu-category-link-group.ts b/packages/web-components/src/components/masthead/megamenu-category-link-group.ts
new file mode 100644
index 00000000000..d1e17e61b79
--- /dev/null
+++ b/packages/web-components/src/components/masthead/megamenu-category-link-group.ts
@@ -0,0 +1,31 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020, 2023
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Cloud Megamenu category link group
+ *
+ * @element c4d-megamenu-category-link-group
+ */
+@customElement(`${c4dPrefix}-megamenu-category-link-group`)
+class C4DMegaMenuCategoryLinkGroup extends LitElement {
+  render() {
+    return html` <slot></slot> `;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default C4DMegaMenuCategoryLinkGroup;
diff --git a/packages/web-components/src/components/masthead/megamenu-category-link.ts b/packages/web-components/src/components/masthead/megamenu-category-link.ts
index 792ec63132f..4a3ed643b1b 100644
--- a/packages/web-components/src/components/masthead/megamenu-category-link.ts
+++ b/packages/web-components/src/components/masthead/megamenu-category-link.ts
@@ -7,38 +7,114 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import ifNonEmpty from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-empty.js';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import Launch16 from '../../internal/vendor/@carbon/web-components/icons/launch/16.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DMegaMenu from './megamenu';
+import { MEGAMENU_LAYOUT_SCHEME } from './defs';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu category sublink
  *
- * @element dds-megamenu-category-link
+ * @element c4d-megamenu-category-link
  */
-@customElement(`${ddsPrefix}-megamenu-category-link`)
-class DDSMegaMenuCateoryLink extends BXLink {
+@customElement(`${c4dPrefix}-megamenu-category-link`)
+class C4DMegaMenuCategoryLink extends CDSLink {
+  @property({ reflect: true })
+  layout?: MEGAMENU_LAYOUT_SCHEME;
+
   /**
    * link title.
    */
   @property({ reflect: true })
   title = '';
 
+  /**
+   * Maps target value to icons.
+   */
+  protected _targetMap = new Map([['external', Launch16()]]);
+
+  /**
+   * Renders an icon based on target value.
+   */
+  protected _renderIcon() {
+    const { target, _targetMap } = this;
+    return _targetMap.has(target) ? _targetMap.get(target) : undefined;
+  }
+
   /**
    * @returns The inner content.
    */
   protected _renderInner() {
     const { title } = this;
     return html`
-      <span>${title}</pan>
+      ${title
+        ? html`
+            <div part="link-heading">
+              <span>${title}${this._renderIcon()}</span>
+              <slot name="icon" @slotchange="${this._handleSlotChange}"></slot>
+            </div>
+          `
+        : ''}
+      <span part="link-description">
+        <slot></slot>
+      </span>
+    `;
+  }
+
+  protected _renderLink() {
+    const {
+      download,
+      href,
+      hreflang,
+      linkRole,
+      ping,
+      rel,
+      target,
+      title,
+      type,
+      _classes: classes,
+      _handleClick: handleClick,
+    } = this;
+    return html`
+      <a
+        id="link"
+        class="${classes}"
+        part="link"
+        role="${ifNonEmpty(linkRole)}"
+        download="${ifNonEmpty(download)}"
+        href="${ifNonEmpty(href)}"
+        hreflang="${ifNonEmpty(hreflang)}"
+        ping="${ifNonEmpty(ping)}"
+        rel="${ifNonEmpty(rel)}"
+        target="${ifNonEmpty(target)}"
+        type="${ifNonEmpty(type)}"
+        @click="${ifNonEmpty(handleClick)}"
+        data-attribute1="headerNav"
+        data-attribute2="FlatItem"
+        data-attribute3="${title}">
+        ${this._renderInner()}
+      </a>
     `;
   }
 
+  connectedCallback(): void {
+    const megamenu = this.closest(
+      `[data-autoid="${C4DMegaMenu.stableSelector}"`
+    );
+    this.layout = megamenu?.getAttribute('layout') as MEGAMENU_LAYOUT_SCHEME;
+
+    super.connectedCallback();
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMegaMenuCateoryLink;
+export default C4DMegaMenuCategoryLink;
diff --git a/packages/web-components/src/components/masthead/megamenu-heading.ts b/packages/web-components/src/components/masthead/megamenu-heading.ts
new file mode 100644
index 00000000000..5c71cc6a295
--- /dev/null
+++ b/packages/web-components/src/components/masthead/megamenu-heading.ts
@@ -0,0 +1,128 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2022, 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 { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import ArrowRight24 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/24.js';
+import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * MegaMenu Heading.
+ *
+ * @element c4d-megamenu-heading
+ */
+@customElement(`${c4dPrefix}-megamenu-heading`)
+class C4DMegaMenuHeading extends HostListenerMixin(LitElement) {
+  /**
+   * Megamenu heading href.
+   */
+  @property({ reflect: true })
+  href = '';
+
+  /**
+   * Megamenu heading text.
+   */
+  @property({ reflect: true })
+  title = '';
+
+  @property({ reflect: true, type: Number, attribute: 'heading-level' })
+  headingLevel = 2;
+
+  /**
+   * Arrow icon to use when presented as link.
+   */
+  protected _arrowIcon = ArrowRight24();
+
+  /**
+   * Render heading as link.
+   */
+  protected renderLink() {
+    const { _arrowIcon } = this;
+    return html`
+      <a
+        href="${this.href}"
+        data-attribute1="headerNav"
+        data-attribute2="FlatHdline"
+        data-attribute3="${this.title}">
+        ${this.title} ${_arrowIcon}
+      </a>
+    `;
+  }
+
+  /**
+   * Render heading as plain text.
+   */
+  protected renderPlain() {
+    return html` ${this.title} `;
+  }
+
+  /**
+   * Render heading markup.
+   */
+  protected renderHeading() {
+    const { headingLevel } = this;
+    const hasHref = Boolean(this.href);
+    switch (headingLevel) {
+      case 3:
+        return html`
+          <h3 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h3>
+        `;
+      case 4:
+        return html`
+          <h4 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h4>
+        `;
+      case 5:
+        return html`
+          <h5 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h5>
+        `;
+      case 6:
+        return html`
+          <h6 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h6>
+        `;
+      default:
+        return html`
+          <h2 ?data-has-href="${hasHref}">${this.renderHeadingInner()}</h2>
+        `;
+    }
+  }
+
+  /**
+   * Render inner heading contents as link or plain text.
+   */
+  protected renderHeadingInner() {
+    return this.href ? this.renderLink() : this.renderPlain();
+  }
+
+  protected _handleSlotChange(event) {
+    const hasContent =
+      (event.target as HTMLSlotElement)
+        .assignedNodes()
+        .filter((child) => child?.textContent?.trim()).length > 0;
+
+    this.classList.toggle('has-content', hasContent);
+  }
+
+  render() {
+    return html`
+      ${this.renderHeading()}
+      <span>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+      </span>
+    `;
+  }
+
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+}
+
+export default C4DMegaMenuHeading;
diff --git a/packages/web-components/src/components/masthead/megamenu-left-navigation.ts b/packages/web-components/src/components/masthead/megamenu-left-navigation.ts
index 7f1e35ba45e..87fbe998ac0 100644
--- a/packages/web-components/src/components/masthead/megamenu-left-navigation.ts
+++ b/packages/web-components/src/components/masthead/megamenu-left-navigation.ts
@@ -7,25 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import C4DMegaMenuRightNavigation from './megamenu-right-navigation';
 import styles from './masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu left navigation (highlighted) section.
  *
- * @element dds-megamenu-left-navigation
+ * @element c4d-megamenu-left-navigation
  */
-@customElement(`${ddsPrefix}-megamenu-left-navigation`)
-class DDSMegaMenuLeftNavigation extends LitElement {
-  render() {
-    return html` <slot></slot> `;
+@customElement(`${c4dPrefix}-megamenu-left-navigation`)
+class C4DMegaMenuLeftNavigation extends C4DMegaMenuRightNavigation {
+  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+
+  static get onlyChildClassName() {
+    return '';
   }
 
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
+  static get stableSelector() {
+    return `${c4dPrefix}--masthead__megamenu-left-navigation`;
+  }
 }
 
-export default DDSMegaMenuLeftNavigation;
+export default C4DMegaMenuLeftNavigation;
diff --git a/packages/web-components/src/components/masthead/megamenu-link-with-icon.ts b/packages/web-components/src/components/masthead/megamenu-link-with-icon.ts
index 103f916ac1e..f76c5d9ba06 100644
--- a/packages/web-components/src/components/masthead/megamenu-link-with-icon.ts
+++ b/packages/web-components/src/components/masthead/megamenu-link-with-icon.ts
@@ -7,24 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, property } from 'lit-element';
-import BXLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSLink from '../../internal/vendor/@carbon/web-components/components/link/link.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { MEGAMENU_LINK_WITH_ICON_STYLE_SCHEME } from './defs';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
 export { MEGAMENU_LINK_WITH_ICON_STYLE_SCHEME };
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Megamenu link with icon.
  *
- * @element dds-megamenu-link-with-icon
+ * @element c4d-megamenu-link-with-icon
  */
-@customElement(`${ddsPrefix}-megamenu-link-with-icon`)
-class DDSMegaMenuLinkWithIcon extends BXLink {
+@customElement(`${c4dPrefix}-megamenu-link-with-icon`)
+class C4DMegaMenuLinkWithIcon extends CDSLink {
   /**
    * link title.
    */
@@ -39,4 +40,4 @@ class DDSMegaMenuLinkWithIcon extends BXLink {
   }
 }
 
-export default DDSMegaMenuLinkWithIcon;
+export default C4DMegaMenuLinkWithIcon;
diff --git a/packages/web-components/src/components/masthead/megamenu-overlay.ts b/packages/web-components/src/components/masthead/megamenu-overlay.ts
index 5f0e3f03e2c..6e967401032 100644
--- a/packages/web-components/src/components/masthead/megamenu-overlay.ts
+++ b/packages/web-components/src/components/masthead/megamenu-overlay.ts
@@ -7,20 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './masthead.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Megamenu overlay.
  *
- * @element dds-megamenu-overlay
+ * @element c4d-megamenu-overlay
  */
-@customElement(`${ddsPrefix}-megamenu-overlay`)
-class DDSMegaMenuOverlay extends LitElement {
+@customElement(`${c4dPrefix}-megamenu-overlay`)
+class C4DMegaMenuOverlay extends LitElement {
   /**
    * `true` if this overlay should represent its active state.
    */
@@ -34,4 +35,4 @@ class DDSMegaMenuOverlay extends LitElement {
   static styles = styles;
 }
 
-export default DDSMegaMenuOverlay;
+export default C4DMegaMenuOverlay;
diff --git a/packages/web-components/src/components/masthead/megamenu-right-navigation.ts b/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
index 0a352a0ef9f..6229e6ec6bc 100644
--- a/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
+++ b/packages/web-components/src/components/masthead/megamenu-right-navigation.ts
@@ -7,11 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import ArrowRight16 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/16.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME } from './defs';
 import styles from './masthead.scss';
 import './megamenu-link-with-icon';
@@ -19,65 +19,97 @@ import { carbonElement as customElement } from '../../internal/vendor/@carbon/we
 
 export { MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu right navigation section
  *
- * @element dds-megamenu-right-navigation
+ * @element c4d-megamenu-right-navigation
  */
-@customElement(`${ddsPrefix}-megamenu-right-navigation`)
-class DDSMegaMenuRightNavigation extends LitElement {
+@customElement(`${c4dPrefix}-megamenu-right-navigation`)
+class C4DMegaMenuRightNavigation extends StableSelectorMixin(LitElement) {
   /**
    * `true` to render left (highlighted) section layout.
    */
   @property({ reflect: true, attribute: 'style-scheme' })
-  styleScheme = MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.REGULAR;
+  styleScheme = MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.FULL;
 
-  /**
-   * view all link href.
-   */
-  @property({ attribute: 'view-all-href', reflect: true })
-  viewAllHref = '';
-
-  /**
-   * view all link title.
-   */
-  @property({ attribute: 'view-all-title', reflect: true })
-  viewAllTitle = '';
+  @property({ attribute: 'data-child-count', reflect: true })
+  childCount: Number | undefined;
 
   /**
    * Returns a class-name(s) for megamenu container
    */
   protected _getClassNames() {
     return classMap({
-      [`${prefix}--masthead__megamenu--hasHighlights`]:
-        this.styleScheme ===
-        MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.LEFT_SECTION,
-      [`${prefix}--masthead__megamenu--hasViewAllLink`]: this.viewAllHref,
-      [`${prefix}--masthead__megamenu__categories`]: true,
+      [`${prefix}--masthead__megamenu-container`]: true,
+      [`${prefix}--masthead__megamenu-container--has-sidebar`]:
+        this.styleScheme === MEGAMENU_RIGHT_NAVIGATION_STYLE_SCHEME.HAS_SIDEBAR,
     });
   }
 
+  /**
+   * Handles default slot content changes.
+   *
+   * @param event Event
+   */
+  protected _handleSlotChange(event: Event) {
+    const { onlyChildClassName } = this
+      .constructor as typeof C4DMegaMenuRightNavigation;
+    const children = (event.target as HTMLSlotElement).assignedElements();
+    this.childCount = children.length;
+
+    // Supports alternative layout for single items.
+    if (children.length === 1 && onlyChildClassName) {
+      children[0].classList.add(onlyChildClassName);
+    } else if (children[0].classList.contains(onlyChildClassName)) {
+      children[0].classList.remove(onlyChildClassName);
+    }
+  }
+
+  updated() {
+    const hasViewAll =
+      (
+        this.shadowRoot?.querySelector(
+          'slot[name="view-all"]'
+        ) as HTMLSlotElement
+      ).assignedElements().length > 0;
+    this.shadowRoot
+      ?.querySelector(`.${prefix}--masthead__megamenu-container`)
+      ?.classList.toggle(
+        `${prefix}--masthead__megamenu-container--has-view-all-link`,
+        hasViewAll
+      );
+  }
+
   render() {
     return html`
       <div class="${this._getClassNames()}">
-        <slot></slot>
+        <div class="${prefix}--masthead__megamenu-container-inner">
+          <div class="${prefix}--masthead__megamenu__heading">
+            <slot name="heading"></slot>
+          </div>
+          <div class="${prefix}--masthead__megamenu__categories">
+            <slot @slotchange="${this._handleSlotChange}"></slot>
+          </div>
+        </div>
+        <div class="${prefix}--masthead__megamenu__view-all">
+          <span class="${prefix}--masthead__megamenu__view-all__border"></span>
+          <slot name="view-all"></slot>
+        </div>
       </div>
-      ${this.viewAllHref &&
-      html`
-        <dds-megamenu-link-with-icon
-          href="${this.viewAllHref}"
-          style-scheme="view-all"
-          part="view-all">
-          <span>${this.viewAllTitle}</span>${ArrowRight16({ slot: 'icon' })}
-        </dds-megamenu-link-with-icon>
-      `}
     `;
   }
 
+  static get onlyChildClassName() {
+    return 'only-child';
+  }
+
+  static get stableSelector() {
+    return `${c4dPrefix}--masthead__megamenu-right-navigation`;
+  }
+
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMegaMenuRightNavigation;
+export default C4DMegaMenuRightNavigation;
diff --git a/packages/web-components/src/components/masthead/megamenu-tab.ts b/packages/web-components/src/components/masthead/megamenu-tab.ts
new file mode 100644
index 00000000000..1e76ae09fd5
--- /dev/null
+++ b/packages/web-components/src/components/masthead/megamenu-tab.ts
@@ -0,0 +1,46 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSTab from '../../internal/vendor/@carbon/web-components/components/tabs/tab';
+import c4dSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { prefix } = settings;
+const { stablePrefix: c4dPrefix } = c4dSettings;
+
+/**
+ * Megamenu Tab.
+ *
+ * @element c4d-megamenu-tab
+ */
+@customElement(`${c4dPrefix}-megamenu-tab`)
+class C4DMegaMenuTab extends CDSTab {
+  render() {
+    const { disabled, selected, value } = this;
+    return html`
+      <button
+        class="${prefix}--tabs__nav-link"
+        role="tab"
+        ?disabled="${disabled}"
+        aria-selected="${Boolean(selected)}"
+        data-attribute1="headerNav"
+        data-attribute2="TabHdline"
+        data-attribute3="${value}">
+        <slot></slot>
+      </button>
+    `;
+  }
+
+  static styles = styles;
+}
+
+export default C4DMegaMenuTab;
diff --git a/packages/web-components/src/components/masthead/megamenu-tabs.ts b/packages/web-components/src/components/masthead/megamenu-tabs.ts
new file mode 100644
index 00000000000..7e3b6d375f8
--- /dev/null
+++ b/packages/web-components/src/components/masthead/megamenu-tabs.ts
@@ -0,0 +1,76 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2021, 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 CDSTabs from '../../internal/vendor/@carbon/web-components/components/tabs/tabs';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import styles from './masthead.scss';
+import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+
+const { stablePrefix: c4dPrefix } = settings;
+
+/**
+ * Megamenu Tabs.
+ *
+ * @element c4d-megamenu-tabs
+ */
+@customElement(`${c4dPrefix}-megamenu-tabs`)
+class C4DMegaMenuTabs extends CDSTabs {
+  protected _disableIntersectionObservers = true;
+
+  /**
+   * @inheritdoc
+   */
+  // eslint-disable-next-line class-methods-use-this
+  protected renderPreviousButton() {
+    // Button is not desirable for our vertical tabs display.
+    return null;
+  }
+
+  /**
+   * @inheritdoc
+   */
+  // eslint-disable-next-line class-methods-use-this
+  protected renderNextButton() {
+    // Button is not desirable for our vertical tabs display.
+    return null;
+  }
+
+  /**
+   * A selector that will return megamenu tabs.
+   */
+  static get selectorItem() {
+    return `${c4dPrefix}-megamenu-tab`;
+  }
+
+  /**
+   * A selector that will return enabled tab items.
+   */
+  static get selectorItemEnabled() {
+    return `${c4dPrefix}-megamenu-tab:not([disabled])`;
+  }
+
+  /**
+   * A selector that will return selected items.
+   */
+  static get selectorItemSelected() {
+    return `${c4dPrefix}-megamenu-tab[selected]`;
+  }
+
+  /**
+   * The name of the custom event fired before a tab is selected upon a user gesture.
+   * Cancellation of this event stops changing the user-initiated selection.
+   */
+  static get eventBeforeSelect() {
+    return `${c4dPrefix}-megamenu-tabs-beingselected`;
+  }
+
+  static styles = styles;
+}
+
+export default C4DMegaMenuTabs;
diff --git a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
index d5c307e3dde..6f18acc12bb 100644
--- a/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
+++ b/packages/web-components/src/components/masthead/megamenu-top-nav-menu.ts
@@ -7,32 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, query, state } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import { forEach } from '../../globals/internal/collection-helpers';
-import DDSMegaMenu from './megamenu';
-import DDSTopNav from './top-nav';
-import DDSTopNavMenu from './top-nav-menu';
-import DDSMegaMenuOverlay from './megamenu-overlay';
+import { query, state, property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DMegaMenu from './megamenu';
+import C4DTopNav from './top-nav';
+import C4DTopNavMenu from './top-nav-menu';
+import C4DMegaMenuOverlay from './megamenu-overlay';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Megamenu top nav menu.
  *
- * @element dds-megamenu-top-nav-menu
+ * @element c4d-megamenu-top-nav-menu
  */
-@customElement(`${ddsPrefix}-megamenu-top-nav-menu`)
-class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
+@customElement(`${c4dPrefix}-megamenu-top-nav-menu`)
+class C4DMegaMenuTopNavMenu extends C4DTopNavMenu {
   /**
    * The megamenu component
    */
   @property()
-  megaMenu!: DDSMegaMenu;
+  megaMenu!: C4DMegaMenu;
 
   /**
    * The menu ul node.
@@ -48,6 +45,11 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
     this.ownerDocument!.defaultView!.innerWidth -
     this.ownerDocument!.body.offsetWidth;
 
+  /**
+   * Identifier for this menu's position in a series.
+   */
+  menuIndex: number | undefined;
+
   /**
    * The observer for the resize of the viewport.
    */
@@ -80,7 +82,7 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
     // A workaround for Safari bug where `100vw` in Shadow DOM causes delayed rendering
     // https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/4493
     const { customPropertyViewportWidth } = this
-      .constructor as typeof DDSMegaMenuTopNavMenu;
+      .constructor as typeof C4DMegaMenuTopNavMenu;
 
     this.style.setProperty(
       customPropertyViewportWidth,
@@ -90,13 +92,16 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
 
   private async _requestMegaMenuRenderUpdate() {
     return new Promise((resolve: Function): void => {
+      const { eventMegaMenuToggled } = this
+        .constructor as typeof C4DMegaMenuTopNavMenu;
       this.dispatchEvent(
-        new CustomEvent('dds-megamenu-top-nav-menu-toggle', {
+        new CustomEvent(eventMegaMenuToggled, {
           bubbles: true,
           cancelable: true,
           composed: true,
           detail: {
             active: this.expanded,
+            index: this.menuIndex,
             resolveFn: resolve,
           },
         })
@@ -108,6 +113,26 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
     });
   }
 
+  private _setAnalyticsAttributes() {
+    const { _topMenuItem: trigger } = this;
+
+    trigger!.setAttribute('data-attribute1', 'headerNav');
+    trigger!.setAttribute('data-attribute2', 'L0');
+    trigger!.setAttribute('data-attribute3', this.menuLabel);
+  }
+
+  /**
+   * Sets inline styles on an element to accommodate any scrollbars that push it
+   * out of Carbon grid alignment.
+   *
+   * @private
+   */
+  private _handleScrollbarOffset(element: HTMLElement) {
+    element.style.marginInlineEnd = this.expanded
+      ? `${this._scrollBarWidth}px`
+      : `0px`;
+  }
+
   connectedCallback() {
     super.connectedCallback();
     this._cleanAndCreateObserverResize({ create: true });
@@ -121,6 +146,7 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
   firstUpdated() {
     this._menuNode.removeAttribute('role');
     this._cleanAndCreateObserverResize({ create: true });
+    this._setAnalyticsAttributes();
 
     if (this.hasAttribute('role') && this.getAttribute('role') === 'listitem') {
       this.removeAttribute('role');
@@ -130,76 +156,54 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
   async updated(changedProperties) {
     super.updated(changedProperties);
     if (changedProperties.has('expanded')) {
-      const doc = this.getRootNode() as Document;
-      forEach(
-        doc.querySelectorAll(
-          (this.constructor as typeof DDSMegaMenuTopNavMenu).selectorOverlay
-        ),
-        (item) => {
-          (item as DDSMegaMenuOverlay).active = this.expanded;
-        }
-      );
+      const doc = this.ownerDocument;
+      const rootNode = this.getRootNode() as ShadowRoot;
+      const masthead = rootNode.querySelector('c4d-masthead');
 
-      // add the scrollbar width as right-margin to prevent content from shifting when
-      // scrollbar disappears on megamenu expand
-      const masthead: HTMLElement | null = doc.querySelector('dds-masthead');
+      // Find overlay and update its state.
+      const overlays = rootNode.querySelectorAll(
+        (this.constructor as typeof C4DMegaMenuTopNavMenu).selectorOverlay
+      );
+      overlays.forEach((item) => {
+        (item as C4DMegaMenuOverlay).active = this.expanded;
+      });
 
-      // determine whether to apply margin-right on expand as HC has extra masthead styling
-      const cloudMasthead: HTMLElement | null | undefined = doc
-        .querySelector('dds-cloud-masthead-container')
-        ?.querySelector('dds-masthead');
+      // Collect elements that should have offsets applied to accommodate any
+      // scrollbars when they appear in the layout.
+      const elementsToAdjust = [
+        doc.body,
+        masthead?.shadowRoot?.querySelector(`.${prefix}--masthead__l0`),
+        masthead?.querySelector(`${c4dPrefix}-masthead-l1`),
+      ].filter((element) => element instanceof HTMLElement) as HTMLElement[];
 
       if (this.expanded) {
         // Import needed subcomponents on first expansion
-        if (!(this.parentElement as DDSTopNav).importedMegamenu) {
+        if (!(this.parentElement as C4DTopNav)?.importedMegamenu) {
           await import('./megamenu-left-navigation');
           await import('./megamenu-category-link');
+          await import('./megamenu-category-link-group');
           await import('./megamenu-category-group');
           await import('./megamenu-category-group-copy');
+          await import('./megamenu-category-heading');
           await import('./megamenu-link-with-icon');
           await import('./megamenu-overlay');
-          (this.parentElement as DDSTopNav).importedMegamenu = true;
+          await import('./megamenu-tab');
+          await import('./megamenu-tabs');
+          (this.parentElement as C4DTopNav).importedMegamenu = true;
         }
 
         // Ask masthead-composite to render megamenu.
         // Pause further execution until the render is complete.
         await this._requestMegaMenuRenderUpdate();
 
-        document.body.style.marginInlineStart = `${this._scrollBarWidth}px`;
-        document.body.style.overflow = 'hidden';
-        forEach(
-          doc.querySelectorAll(
-            (this.constructor as typeof DDSMegaMenuTopNavMenu).selectorOverlay
-          ),
-          (item) => {
-            (item as DDSMegaMenuOverlay).active = this.expanded;
-          }
-        );
+        // Lock document to prevent scrolling while menu is open.
+        doc.body.style.overflow = `hidden`;
 
-        if (cloudMasthead) {
-          if (
-            doc.body.classList.contains('ibm-masthead-sticky') &&
-            doc.body.classList.contains('ibm-masthead-sticky-showing')
-          ) {
-            cloudMasthead.style.marginInlineEnd = `${this._scrollBarWidth}px`;
-          }
-        } else if (masthead) {
-          masthead.style.marginInlineEnd = `${this._scrollBarWidth}px`;
-        }
+        // Set scrollbar adjustments.
+        elementsToAdjust.forEach((element) =>
+          this._handleScrollbarOffset(element)
+        );
       } else {
-        document.body.style.marginInlineStart = '0px';
-        document.body.style.overflow = '';
-        if (cloudMasthead) {
-          if (
-            doc.body.classList.contains('ibm-masthead-sticky') &&
-            doc.body.classList.contains('ibm-masthead-sticky-showing')
-          ) {
-            cloudMasthead.style.marginInlineEnd = '0px';
-          }
-        } else if (masthead) {
-          masthead.style.marginInlineEnd = '0px';
-        }
-
         /**
          * Return focus to topMenuItem only when expanded explicitly equals false.
          * On load, when expanded is undefined, avoid taking control of focus.
@@ -223,25 +227,44 @@ class DDSMegaMenuTopNavMenu extends DDSTopNavMenu {
         setTimeout(() => {
           this._requestMegaMenuRenderUpdate();
         }, 500);
+
+        // Unlock document to enable scrolling once menu is closed.
+        doc.body.style.overflow = '';
+
+        // Unset scrollbar adjustments.
+        elementsToAdjust.forEach((element) =>
+          this._handleScrollbarOffset(element)
+        );
       }
     }
+
+    if (changedProperties.has('menuLabel')) {
+      this._setAnalyticsAttributes();
+    }
   }
 
   /**
    * The CSS custom property name for the live viewport width.
    */
   static get customPropertyViewportWidth() {
-    return `--${ddsPrefix}-ce--viewport-width`;
+    return `--${c4dPrefix}-ce--viewport-width`;
   }
 
   /**
    * A selector that will return the overlays.
    */
   static get selectorOverlay() {
-    return `${ddsPrefix}-megamenu-overlay`;
+    return `${c4dPrefix}-megamenu-overlay`;
+  }
+
+  /**
+   * The custom event name for when a megamenu is toggled.
+   */
+  static get eventMegaMenuToggled() {
+    return `${c4dPrefix}-megamenu-top-nav-menu-toggle`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMegaMenuTopNavMenu;
+export default C4DMegaMenuTopNavMenu;
diff --git a/packages/web-components/src/components/masthead/megamenu.ts b/packages/web-components/src/components/masthead/megamenu.ts
index 8db20466d75..30fc8245689 100644
--- a/packages/web-components/src/components/masthead/megamenu.ts
+++ b/packages/web-components/src/components/masthead/megamenu.ts
@@ -7,38 +7,116 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import { MEGAMENU_LAYOUT_SCHEME } from './defs';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * MegaMenu
  *
- * @element dds-megamenu
+ * @element c4d-megamenu
  */
-@customElement(`${ddsPrefix}-megamenu`)
-class DDSMegaMenu extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-megamenu`)
+class C4DMegaMenu extends StableSelectorMixin(LitElement) {
+  @property({ reflect: true })
+  layout?: MEGAMENU_LAYOUT_SCHEME;
+
+  @property({ reflect: true, type: Boolean })
+  overflowing = false;
+
+  protected mutationObserver = new MutationObserver(
+    this._setOverflowing.bind(this)
+  );
+
+  protected resizeObserver = new ResizeObserver(
+    this._setOverflowing.bind(this)
+  );
+
+  /**
+   * Determine if any navigation columns are taller than megamenu.
+   */
+  protected _setOverflowing() {
+    const { navLeftSelector, navRightSelector, navColumnInnerSelector } = this
+      .constructor as typeof C4DMegaMenu;
+    const navColumns = this.querySelectorAll(`
+      ${navLeftSelector},
+      ${
+        this.layout === MEGAMENU_LAYOUT_SCHEME.TAB
+          ? `[role="tabpanel"] > ${navRightSelector}`
+          : navRightSelector
+      }
+    `);
+    const columnHeights: Array<number | undefined> = [];
+    navColumns.forEach((column) => {
+      const height = navColumnInnerSelector
+        ? column.shadowRoot?.querySelector(navColumnInnerSelector)?.scrollHeight
+        : column.scrollHeight;
+      columnHeights.push(height);
+    });
+    this.overflowing = columnHeights.some((height) =>
+      height ? height > this.scrollHeight : false
+    );
+  }
+
+  connectedCallback() {
+    const sharedOptions = {
+      childList: true,
+      subtree: true,
+      attributes: true,
+    };
+    const options =
+      this.layout === MEGAMENU_LAYOUT_SCHEME.TAB
+        ? {
+            ...sharedOptions,
+            attributeFilter: ['selected'],
+          }
+        : sharedOptions;
+    this.mutationObserver.observe(this, options);
+    this.resizeObserver.observe(this);
+    super.connectedCallback();
+  }
+
+  disconnectedCallback() {
+    this.mutationObserver.disconnect();
+    this.resizeObserver.disconnect();
+    super.disconnectedCallback();
+  }
+
   render() {
     return html`
       <div class="${prefix}--masthead__megamenu__container">
-        <div class="${prefix}--masthead__megamenu__container--row">
+        <div
+          class="${prefix}--masthead__megamenu__container--row ${prefix}--masthead__megamenu__container--row--${this
+            .layout}">
           <slot></slot>
         </div>
       </div>
     `;
   }
 
+  static get navLeftSelector() {
+    return `${c4dPrefix}-megamenu-left-navigation`;
+  }
+
+  static get navRightSelector() {
+    return `${c4dPrefix}-megamenu-right-navigation`;
+  }
+
+  static get navColumnInnerSelector() {
+    return `.${prefix}--masthead__megamenu-container-inner`;
+  }
+
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__megamenu`;
+    return `${c4dPrefix}--masthead__megamenu`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSMegaMenu;
+export default C4DMegaMenu;
diff --git a/packages/web-components/src/components/masthead/skip-to-content.ts b/packages/web-components/src/components/masthead/skip-to-content.ts
index 3f4bafe2993..c03fbca5575 100644
--- a/packages/web-components/src/components/masthead/skip-to-content.ts
+++ b/packages/web-components/src/components/masthead/skip-to-content.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXSkipToContent from '../../internal/vendor/@carbon/web-components/components/skip-to-content/skip-to-content.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import CDSSkipToContent from '../../internal/vendor/@carbon/web-components/components/skip-to-content/skip-to-content.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Skip to content button in masthead.
  *
- * @element dds-masthead-skip-to-content
+ * @element c4d-masthead-skip-to-content
  */
-@customElement(`${ddsPrefix}-skip-to-content`)
-class DDSSkipToContent extends BXSkipToContent {
+@customElement(`${c4dPrefix}-skip-to-content`)
+class C4DSkipToContent extends CDSSkipToContent {
   /**
    * The shadow slot this logo UI should be in.
    */
@@ -31,4 +31,4 @@ class DDSSkipToContent extends BXSkipToContent {
   static styles = styles;
 }
 
-export default DDSSkipToContent;
+export default C4DSkipToContent;
diff --git a/packages/web-components/src/components/masthead/top-nav-item.ts b/packages/web-components/src/components/masthead/top-nav-item.ts
index 2ad2a07bc51..d82a1e8f5d3 100644
--- a/packages/web-components/src/components/masthead/top-nav-item.ts
+++ b/packages/web-components/src/components/masthead/top-nav-item.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, query } from 'lit-element';
-import BXHeaderNavItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-nav-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property, query } from 'lit/decorators.js';
+import CDSHeaderNavItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-nav-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead top nav item.
  *
- * @element dds-top-nav-item
+ * @element c4d-top-nav-item
  */
-@customElement(`${ddsPrefix}-top-nav-item`)
-class DDSTopNavItem extends BXHeaderNavItem {
+@customElement(`${c4dPrefix}-top-nav-item`)
+class C4DTopNavItem extends CDSHeaderNavItem {
   /**
    * The `<a>`.
    */
@@ -57,4 +57,4 @@ class DDSTopNavItem extends BXHeaderNavItem {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSTopNavItem;
+export default C4DTopNavItem;
diff --git a/packages/web-components/src/components/masthead/top-nav-l1.ts b/packages/web-components/src/components/masthead/top-nav-l1.ts
index 49d573f6a24..455ed3820da 100644
--- a/packages/web-components/src/components/masthead/top-nav-l1.ts
+++ b/packages/web-components/src/components/masthead/top-nav-l1.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSTopNav from './top-nav';
+import C4DTopNav from './top-nav';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead top nav for L1.
  *
- * @element dds-top-nav-l1
+ * @element c4d-top-nav-l1
  */
-@customElement(`${ddsPrefix}-top-nav-l1`)
-class DDSTopNavL1 extends DDSTopNav {
+@customElement(`${c4dPrefix}-top-nav-l1`)
+class C4DTopNavL1 extends C4DTopNav {
   // eslint-disable-next-line class-methods-use-this
   protected _handleSearchToggle = () => {
     // Do nothing
@@ -33,8 +33,8 @@ class DDSTopNavL1 extends DDSTopNav {
   hideDivider = true;
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__l1-nav`;
+    return `${c4dPrefix}--masthead__l1-nav`;
   }
 }
 
-export default DDSTopNavL1;
+export default C4DTopNavL1;
diff --git a/packages/web-components/src/components/masthead/top-nav-menu-item.ts b/packages/web-components/src/components/masthead/top-nav-menu-item.ts
index c914fb9faf0..02b56379885 100644
--- a/packages/web-components/src/components/masthead/top-nav-menu-item.ts
+++ b/packages/web-components/src/components/masthead/top-nav-menu-item.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXHeaderMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu-item.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSHeaderMenuItem from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu-item.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead top nav submenu item.
  *
- * @element dds-top-nav-menu-item
+ * @element c4d-top-nav-menu-item
  */
-@customElement(`${ddsPrefix}-top-nav-menu-item`)
-class DDSTopNavMenuItem extends BXHeaderMenuItem {
+@customElement(`${c4dPrefix}-top-nav-menu-item`)
+class C4DTopNavMenuItem extends CDSHeaderMenuItem {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 
   firstUpdated() {
@@ -30,4 +30,4 @@ class DDSTopNavMenuItem extends BXHeaderMenuItem {
   }
 }
 
-export default DDSTopNavMenuItem;
+export default C4DTopNavMenuItem;
diff --git a/packages/web-components/src/components/masthead/top-nav-menu.ts b/packages/web-components/src/components/masthead/top-nav-menu.ts
index a3f29c420e5..cdb3772d05b 100644
--- a/packages/web-components/src/components/masthead/top-nav-menu.ts
+++ b/packages/web-components/src/components/masthead/top-nav-menu.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import BXHeaderMenu from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import CDSHeaderMenu from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-menu.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Masthead top nav submenu.
  *
- * @element dds-top-nav-menu
+ * @element c4d-top-nav-menu
  */
-@customElement(`${ddsPrefix}-top-nav-menu`)
-class DDSTopNavMenu extends BXHeaderMenu {
+@customElement(`${c4dPrefix}-top-nav-menu`)
+class C4DTopNavMenu extends CDSHeaderMenu {
   /**
    * `true` if this submenu should be in its active state.
    */
@@ -50,4 +50,4 @@ class DDSTopNavMenu extends BXHeaderMenu {
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSTopNavMenu;
+export default C4DTopNavMenu;
diff --git a/packages/web-components/src/components/masthead/top-nav-name.ts b/packages/web-components/src/components/masthead/top-nav-name.ts
index 722f5136dd3..9087c8bfae9 100644
--- a/packages/web-components/src/components/masthead/top-nav-name.ts
+++ b/packages/web-components/src/components/masthead/top-nav-name.ts
@@ -7,39 +7,37 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSMastheadTopNav from './top-nav';
-import DDSLeftNavName from './left-nav-name';
+import { html } from 'lit';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DMastheadTopNav from './top-nav';
+import C4DLeftNavName from './left-nav-name';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * The brand name UI in top nav.
  *
- * @element dds-top-nav-name
+ * @element c4d-top-nav-name
  */
-@customElement(`${ddsPrefix}-top-nav-name`)
-class DDSTopNavName extends DDSLeftNavName {
+@customElement(`${c4dPrefix}-top-nav-name`)
+class C4DTopNavName extends C4DLeftNavName {
   connectedCallback() {
     super.connectedCallback();
-    const { selectorTopNav } = this.constructor as typeof DDSTopNavName;
+    const { selectorTopNav } = this.constructor as typeof C4DTopNavName;
     const { nextElementSibling } = this;
     if (nextElementSibling && nextElementSibling.matches(selectorTopNav)) {
-      (nextElementSibling as DDSMastheadTopNav).hideDivider = true;
+      (nextElementSibling as C4DMastheadTopNav).hideDivider = true;
     }
   }
 
   disconnectedCallback() {
-    const { selectorTopNav } = this.constructor as typeof DDSTopNavName;
+    const { selectorTopNav } = this.constructor as typeof C4DTopNavName;
     const { nextElementSibling } = this;
     if (nextElementSibling && nextElementSibling.matches(selectorTopNav)) {
-      (nextElementSibling as DDSMastheadTopNav).hideDivider = false;
+      (nextElementSibling as C4DMastheadTopNav).hideDivider = false;
     }
     super.disconnectedCallback();
   }
@@ -53,7 +51,7 @@ class DDSTopNavName extends DDSLeftNavName {
           >&nbsp;
         `;
     return html`
-      <a class="${prefix}--header__name" href="${ifNonNull(href)}"
+      <a class="${prefix}--header__name" href="${ifDefined(href)}"
         >${namePrefixPart}<slot></slot
       ></a>
     `;
@@ -63,14 +61,14 @@ class DDSTopNavName extends DDSLeftNavName {
    * A selector that will return the nav bar.
    */
   static get selectorTopNav() {
-    return `${ddsPrefix}-top-nav`;
+    return `${c4dPrefix}-top-nav`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__platform-name`;
+    return `${c4dPrefix}--masthead__platform-name`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSTopNavName;
+export default C4DTopNavName;
diff --git a/packages/web-components/src/components/masthead/top-nav.ts b/packages/web-components/src/components/masthead/top-nav.ts
index 00c24aac825..f9c62b8a9d1 100644
--- a/packages/web-components/src/components/masthead/top-nav.ts
+++ b/packages/web-components/src/components/masthead/top-nav.ts
@@ -7,22 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, state, query } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property, query, state } from 'lit/decorators.js';
 import CaretLeft20 from '../../internal/vendor/@carbon/web-components/icons/caret--left/20.js';
 import CaretRight20 from '../../internal/vendor/@carbon/web-components/icons/caret--right/20.js';
-import BXHeaderNav from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-nav.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import CDSHeaderNav from '../../internal/vendor/@carbon/web-components/components/ui-shell/header-nav.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './masthead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 // button gradient width size
 const buttonGradientWidth = 8;
@@ -49,14 +48,14 @@ function findLastIndex<T>(
 /**
  * Masthead top nav.
  *
- * @element dds-top-nav
+ * @element c4d-top-nav
  * @csspart nav The element containing the menu bar.
  * @csspart menubar The menu bar.
  * @csspart prev-button The button to go to the previous page.
  * @csspart next-button The button to go to the next page.
  */
-@customElement(`${ddsPrefix}-top-nav`)
-class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
+@customElement(`${c4dPrefix}-top-nav`)
+class C4DTopNav extends StableSelectorMixin(HostListenerMixin(CDSHeaderNav)) {
   /**
    * The left-hand paginator button.
    */
@@ -78,7 +77,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
   /**
    * The scrolling container.
    */
-  @query(`.${ddsPrefix}-ce--header__nav-content-container`)
+  @query(`.${c4dPrefix}-ce--header__nav-content-container`)
   private _contentContainerNode?: HTMLElement;
 
   /**
@@ -203,7 +202,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
     this._childItems = (event.target as HTMLSlotElement)
       .assignedNodes()
       .filter((elem) =>
-        (elem as HTMLElement).matches?.('dds-megamenu-top-nav-menu')
+        (elem as HTMLElement).matches?.('c4d-megamenu-top-nav-menu')
       );
     this._paginateRight({ onLoad: true });
   }
@@ -441,6 +440,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
         if (event.shiftKey) {
           if (
             target.previousElementSibling &&
+            target.previousElementSibling.parentElement === this &&
             target.previousElementSibling.getBoundingClientRect().left -
               navNode!.getBoundingClientRect().left <
               currentScrollPosition
@@ -449,6 +449,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
           }
         } else if (
           target.nextElementSibling &&
+          target.nextElementSibling.parentElement === this &&
           Math.floor(
             target.nextElementSibling.getBoundingClientRect().right -
               navNode!.getBoundingClientRect().left
@@ -527,12 +528,12 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
     } = this;
     const caretLeftContainerClasses = classMap({
       [`${prefix}--header__nav-caret-left-container`]: true,
-      [`${ddsPrefix}-ce--header__nav-caret-container--hidden`]:
+      [`${c4dPrefix}-ce--header__nav-caret-container--hidden`]:
         isIntersectionLeftTrackerInContent,
     });
     const caretRightContainerClasses = classMap({
       [`${prefix}--header__nav-caret-right-container`]: true,
-      [`${ddsPrefix}-ce--header__nav-caret-container--hidden`]:
+      [`${c4dPrefix}-ce--header__nav-caret-container--hidden`]:
         isIntersectionRightTrackerInContent,
     });
 
@@ -553,14 +554,14 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
                     ${CaretLeft20()}
                   </button>
                 </div>
-                <div class="${ddsPrefix}-ce--header__nav-content-container">
+                <div class="${c4dPrefix}-ce--header__nav-content-container">
                   <div class="${prefix}--header__nav-content">
                     <nav part="nav" class="${prefix}--header__nav">
                       <div class="${prefix}--sub-content-right"></div>
                       <div
                         part="menubar"
                         class="${prefix}--header__menu-bar"
-                        aria-label="${ifNonNull(this.menuBarLabel)}">
+                        aria-label="${ifDefined(this.menuBarLabel)}">
                         <slot
                           @slotchange=${handleSlotChange}
                           @keydown="${handleOnKeyDown}"></slot>
@@ -593,7 +594,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
                   </button>
                   <div class="${prefix}--header__nav-caret-left-gradient"></div>
                 </div>
-                <div class="${ddsPrefix}-ce--header__nav-content-container">
+                <div class="${c4dPrefix}-ce--header__nav-content-container">
                   <div class="${prefix}--header__nav-content">
                     <nav
                       part="nav"
@@ -603,7 +604,7 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
                       <div
                         part="menubar"
                         class="${prefix}--header__menu-bar"
-                        aria-label="${ifNonNull(this.menuBarLabel)}">
+                        aria-label="${ifDefined(this.menuBarLabel)}">
                         <slot
                           @slotchange=${handleSlotChange}
                           @keydown="${handleOnKeyDown}"></slot>
@@ -629,17 +630,17 @@ class DDSTopNav extends StableSelectorMixin(HostListenerMixin(BXHeaderNav)) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--masthead__l0-nav`;
+    return `${c4dPrefix}--masthead__l0-nav`;
   }
 
   /**
    * The name of the custom event fired after the search is toggled.
    */
   static get eventToggleSearch() {
-    return `${ddsPrefix}-search-with-typeahead-toggled`; // TODO hook up the new event
+    return `${c4dPrefix}-search-with-typeahead-toggled`; // TODO hook up the new event
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader.
 }
 
-export default DDSTopNav;
+export default C4DTopNav;
diff --git a/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx b/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
index 107b457703c..d16c346585c 100644
--- a/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/notice-choice/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Notice Choice
 
 > 💡 Check our
@@ -18,11 +20,13 @@ import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 Here's a quick example to get you started.
 
 ### JS (via import)
+
 Note that, please always use the latest version.
 
 ```javascript
 import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
 ```
+
 <Description markdown={`${cdnJs({ components: ['notice-choice'] })}`} />
 
 <Description markdown={`${cdnCss()}`} />
@@ -30,38 +34,43 @@ import '@carbon/ibmdotcom-web-components/es/components/notice-choice/index.js';
 ### HTML
 
 ```html
-<dds-notice-choice
-    language="en"
-    country="US"
-    question-choices="1,2"
-    state="CA"
-    email=""
-    terms-condition-link=""
-    bpid-legal-text=""
-    enable-all-opt-in=""
-    default-values=""
-    >
-</dds-notice-choice>
+<c4d-notice-choice
+  language="en"
+  country="US"
+  question-choices="1,2"
+  state="CA"
+  email=""
+  terms-condition-link=""
+  bpid-legal-text=""
+  enable-all-opt-in=""
+  default-values="">
+</c4d-notice-choice>
 ```
+
 ## Custom Event
-This event will return the field name and value. The values need to be sent to MRS.
-For more info, check > [W3 Publisher](https://w3.ibm.com/w3publisher/urx/notice-and-choice)
+
+This event will return the field name and value. The values need to be sent to
+MRS. For more info, check >
+[W3 Publisher](https://w3.ibm.com/w3publisher/urx/notice-and-choice)
 
 ```javascript
-document.addEventListener('dds-notice-choice-change', (event) =>{
-    this.handleInputChange(event.detail.field, event.detail.value)
+document.addEventListener('cds-notice-choice-change', (event) => {
+  this.handleInputChange(event.detail.field, event.detail.value);
 });
 ```
+
 ## Props
 
-<Props of="dds-notice-choice" />
+<Props of="cds-notice-choice" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector         | Compatibility selector                 | Description |
-| ------------------------------- | -------------------------------------- | ----------- |
-| `<dds-notice-choice>`           | `data-autoid="dds--notice-choice"`     | Component   |
+| Web Components selector | Compatibility selector             | Description |
+| ----------------------- | ---------------------------------- | ----------- |
+| `<cds-notice-choice>`   | `data-autoid="cds--notice-choice"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
index 5fec717ca8d..37881704a5d 100644
--- a/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
+++ b/packages/web-components/src/components/notice-choice/__stories__/notice-choice.stories.ts
@@ -10,9 +10,8 @@
 import '../index';
 
 import { select, text } from '@storybook/addon-knobs';
-
 import { action } from '@storybook/addon-actions';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
 
 const questionChoices = {
@@ -78,7 +77,7 @@ const props = () => ({
     'https://www.ibm.com/legal'
   ),
   bpidLegalText: text('BPID Legal Text', ''),
-  onChange: action('dds-notice-choice-change'),
+  onChange: action('c4d-notice-choice-change'),
   hideErrorMessages: select('Hide Error Messages', hideErrorMessages, 'false'),
   showLegalNotice: select('Show Legal Notice', showLegalNotices, 'true'),
 });
@@ -99,7 +98,7 @@ export const Default = (args) => {
     hiddenPhone,
   } = args?.NoticeChoice ?? {};
   return html`
-    <dds-notice-choice
+    <c4d-notice-choice
       language="${language}"
       country="${country}"
       question-choices="${questionchoices}"
@@ -112,17 +111,18 @@ export const Default = (args) => {
       bpid-legal-text="${bpidLegalText}"
       .hiddenEmail="${hiddenEmail}"
       .hiddenPhone="${hiddenPhone}"
-      @dds-notice-choice-change=${onChange}></dds-notice-choice>
+      @c4d-notice-choice-change=${onChange}></c4d-notice-choice>
   `;
 };
 
 export default {
-  title: 'Components/Notice Choice',
+  title: 'IBM components/Notice Choice',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-md-8 bx--col-lg-12 bx--offset-lg-2">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div
+            class="cds--col-sm-4 cds--col-md-8 cds--col-lg-12 cds--offset-lg-2">
             ${story()}
           </div>
         </div>
@@ -139,7 +139,7 @@ export default {
       default: {
         NoticeChoice: {
           'question-choices': [1, 2],
-          onChange: 'dds-notice-choice-change',
+          onChange: 'c4d-notice-choice-change',
         },
       },
     },
diff --git a/packages/web-components/src/components/notice-choice/notice-choice.scss b/packages/web-components/src/components/notice-choice/notice-choice.scss
index 36686623225..29cb281ff95 100644
--- a/packages/web-components/src/components/notice-choice/notice-choice.scss
+++ b/packages/web-components/src/components/notice-choice/notice-choice.scss
@@ -8,5 +8,5 @@
  */
 
 $css--plex: true !default;
-@import 'carbon-components/scss/components/checkbox/checkbox';
-@import '../../../../styles/scss/components/notice-choice/notice-choice';
+@use '@carbon/styles/scss/components/checkbox';
+@use '@carbon/ibmdotcom-styles/scss/components/notice-choice';
diff --git a/packages/web-components/src/components/notice-choice/notice-choice.ts b/packages/web-components/src/components/notice-choice/notice-choice.ts
index 382b7fcce49..2c64a55c4d8 100644
--- a/packages/web-components/src/components/notice-choice/notice-choice.ts
+++ b/packages/web-components/src/components/notice-choice/notice-choice.ts
@@ -8,7 +8,8 @@
  */
 
 import { checkPreferencesv3, loadContent } from './services';
-import { html, LitElement, property, TemplateResult } from 'lit-element';
+import { TemplateResult, html, LitElement } from 'lit';
+import { property } from 'lit/decorators.js';
 import {
   emailRegExp,
   pwsValueMap,
@@ -17,26 +18,24 @@ import {
   specialCountryBasedText,
 } from './utils';
 import countrySettings from './country-settings';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import settings from 'carbon-components/es/globals/js/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './notice-choice.scss';
-import { unsafeHTML } from 'lit-html/directives/unsafe-html';
+import { unsafeHTML } from 'lit/directives/unsafe-html.js';
 import { worldWideContent } from './world-wide-content';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Notice Choice
  *
- * @element dds-notice-choice
- * @fires dds-notice-choice-change
+ * @element c4d-notice-choice
+ * @fires c4d-notice-choice-change
  * The custom event fired when default choice loaded or user change some preferences.
  * The field and value should be taken from the detail object and send it to MRS.
  */
-@customElement(`dds-notice-choice`)
+@customElement(`c4d-notice-choice`)
 class NoticeChoice extends StableSelectorMixin(LitElement) {
   /**
    * properties for passed attributes.
@@ -343,7 +342,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
     );
   }
   static get stableSelector() {
-    return `${ddsPrefix}--notice-choice`;
+    return `${c4dPrefix}--notice-choice`;
   }
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
   checkBoxLegalChange($event: any) {
@@ -426,7 +425,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
   checkBoxTemplate(checkbox, checked, hiddenBox) {
     this._onChange(`${hiddenBox.id}_VALUE`, `NC_HIDDEN_${hiddenBox.value}`);
     return html`<span>
-      <div class="${prefix}--form-item bx--checkbox-wrapper">
+      <div class="${prefix}--form-item cds--checkbox-wrapper">
         <input
           type="checkbox"
           class="${prefix}--checkbox"
@@ -538,7 +537,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       );
     }
     return html`<section class="${prefix}--nc">
-    <p part='ncHeading' id="ncHeading" class="${ddsPrefix}--nc__pre-text">${
+    <p part='ncHeading' id="ncHeading" class="${c4dPrefix}--nc__pre-text">${
       this.showLegalNotice ? this.countryBasedLegalNotice() : ''
     } ${this.preTextTemplate()} </p>
       <div part='${prefix}--checkbox-group' class="${prefix}--checkbox-group">
@@ -691,7 +690,7 @@ class NoticeChoice extends StableSelectorMixin(LitElement) {
       },
     };
     this.dispatchEvent(
-      new CustomEvent(`${ddsPrefix}-notice-choice-change`, init)
+      new CustomEvent(`${c4dPrefix}-notice-choice-change`, init)
     );
   }
 }
diff --git a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx
deleted file mode 100644
index 1da950e45be..00000000000
--- a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import markdownContents from '../../../../docs/markdown-contents.md';
-import'../pictogram-item';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-
-
-
-
-# Pictogram Item
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/pictogram-item)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/pictogram-item)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/pictogram-item/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['pictogram-item'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<dds-pictogram-item>
-  <svg slot="pictogram" focusable="false" preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description" width="48" height="48"
-    viewBox="0 0 48 48" role="img" class="bx--pictogram-item__pictogram">
-    <path fill="none" stroke-linejoin="round" stroke-miterlimit="10" stroke-width=".72"
-      d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30">
-    </path>
-  </svg>
-  <dds-content-item-heading>Lorem ipsum dolor sit</dds-content-item-heading>
-  <dds-content-item-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</dds-content-item-copy>
-  <dds-link-with-icon slot="footer">
-    Lorem ipsum dolor
-    <svg
-      slot="icon"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-      >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
-  </dds-link-with-icon>
-</dds-pictogram-item>
-```
-
-<Description markdown={markdownContents} />
-
-## Props
-
-<Props of="dds-pictogram-item" />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector      | Compatibility selector                 | Description |
-| ---------------------------- | -------------------------------------- | ----------- |
-| `<dds-pictogram-item>`       | data-autoid="dds--pictogram-item" | Component   |
-
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx b/packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx
deleted file mode 100644
index 27971bb60cb..00000000000
--- a/packages/web-components/src/components/pictogram-item/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,73 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-
-# Pictogram Item
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/pictogram-item)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/pictogram-item)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS
-
-```javascript
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-
-function App() {
-  return (
-    <DDSPictogramItem>
-        <svg
-          slot="pictogram"
-          focusable="false"
-          preserveAspectRatio="xMidYMid meet"
-          xmlns="http://www.w3.org/2000/svg"
-          stroke="currentColor"
-          data-autoid="dds--pictogram-item__pictogram"
-          aria-label="Pictogram description"
-          width="64"
-          height="64"
-          viewBox="8 8 32 32"
-          role="img"
-          class="bx--pictogram-item__pictogram">
-          <path
-            fill="none"
-            stroke-linejoin="round"
-            stroke-miterlimit="10"
-            stroke-width=".72"
-            d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
-            0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30">
-          </path>
-        </svg>
-      <DDSContentItemHeading>Example heading</DDSContentItemHeading>
-      <DDSContentItemCopy>Example item copy</DDSContentItemCopy>
-      <DDSLinkWithIcon href="www.ibm.com" slot="footer">
-        Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-      </DDSLinkWithIcon>
-    </DDSPictogramItem>
-  );
-}
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector              | Description |
-| ----------------------- | ----------------------------------- | ----------- |
-| `<dds-pictogram-item>`  | `data-autoid="dds--pictogram-item"` | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx
deleted file mode 100644
index e8d0702888e..00000000000
--- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.react.tsx
+++ /dev/null
@@ -1,236 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { select } from '@storybook/addon-knobs';
-import React from 'react';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-import DDSPictogramItem from '@carbon/ibmdotcom-web-components/es/components-react/pictogram-item/pictogram-item';
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading.js';
-import DDSContentItemCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-copy.js';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import { COLOR_OPTIONS } from '../defs';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-import readme from './README.stories.react.mdx';
-
-/* eslint-disable max-len, no-mixed-spaces-and-tabs */
-const Desktop = (
-  <svg
-    // @ts-ignore
-    slot="pictogram"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description"
-    width="64"
-    height="64"
-    viewBox="8 8 32 32"
-    role="img"
-    class="bx--pictogram-item__pictogram"
-  >
-    <path
-      fill="none"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      stroke-width=".72"
-      d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
-  0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"
-    ></path>
-  </svg>
-);
-
-const Pattern = (
-  <svg
-    slot="pictogram"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description"
-    width="64"
-    height="64"
-    viewBox="0 0 32 32"
-    role="img"
-    class="bx--pictogram-item__pictogram"
-    // @ts-ignore
-    style={{ enableBackground: 'new 0 0 32 32' }}
-  >
-    <path
-      id="pattern_1_"
-      d="M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3
-	    c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16
-	    C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13
-	    c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1
-      c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8
-      c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6
-      c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3
-      c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36
-      V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2
-      c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36
-      H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1
-      c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36
-      c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z
-      M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2
-      c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1
-      c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1
-      c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3
-      c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z
-      M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1
-      C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1
-      c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8
-      c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8
-      v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z"
-    />
-    <rect
-      id="_Transparent_Rectangle"
-      style={{ fill: 'none' }}
-      width="32"
-      height="32"
-    />
-  </svg>
-);
-
-const Touch = (
-  // @ts-ignore
-  <svg
-    // @ts-ignore
-    slot="pictogram"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description"
-    width="64"
-    height="64"
-    viewBox="0 0 32 32"
-    role="img"
-    class="bx--pictogram-item__pictogram"
-  >
-    <path
-      id="touch_1_"
-      d="M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444
-	c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269
-	c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0
-	c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01
-	C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357
-	c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7
-	c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337
-	c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192
-	c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729
-	C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729
-	l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64
-	c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z"
-    />
-    <rect
-      id="_Transparent_Rectangle"
-      style={{ fill: 'none' }}
-      width="32"
-      height="32"
-    />
-  </svg>
-);
-/* eslint-enable max-len */
-
-/**
- * Returns the pictogram based on the storybook knob value
- *
- * @param {string} sel string that defines the returning pictogram
- * @returns {*} Pictogram SVG markup
- */
-const selectPictogram = (sel) => {
-  switch (sel) {
-    case 'Desktop':
-      return Desktop;
-    case 'Pattern':
-      return Pattern;
-    case 'Touch':
-      return Touch;
-    default:
-      return '';
-  }
-};
-
-const pictograms = {
-  Desktop: 'Desktop',
-  Touch: 'Touch',
-  Pattern: 'Pattern',
-};
-
-const pictogramColors = {
-  'Text color (default)': COLOR_OPTIONS.DEFAULT,
-  Blue: COLOR_OPTIONS.BLUE,
-};
-
-export const Default = (args) => {
-  const { heading, copy, href, linkCopy, pictogram, pictogramColor } =
-    args?.PictogramItem ?? {};
-  return (
-    <DDSPictogramItem color={pictogramColor}>
-      {pictogram?.src}
-      <DDSContentItemHeading>{heading}</DDSContentItemHeading>
-      <DDSContentItemCopy>{copy}</DDSContentItemCopy>
-      <DDSLinkWithIcon href={href} slot="footer">
-        {linkCopy} <ArrowRight20 slot="icon"></ArrowRight20>
-      </DDSLinkWithIcon>
-    </DDSPictogramItem>
-  );
-};
-
-Default.story = {
-  parameters: {
-    knobs: {
-      PictogramItem: () => ({
-        heading: textNullable('Heading (heading):', 'Lorem ipsum dolor sit'),
-        copy:
-          'Lorem ipsum dolor sit amet, ' +
-          'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
-          'Ut enim ad minim veniam\n',
-        href: textNullable('Link with Icon href:', 'https://example.com'),
-        linkCopy: textNullable('Link with Icon copy:', 'Lorem ipsum dolor'),
-        pictogram: {
-          src: selectPictogram(
-            select('Pictogram (required)', pictograms, pictograms.Desktop)
-          ),
-          'aria-label': textNullable('Aria-label:', 'Pictogram description'),
-        },
-        pictogramColor: select(
-          'Pictogram color:',
-          pictogramColors,
-          COLOR_OPTIONS.DEFAULT
-        ),
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Pictogram item',
-  decorators: [
-    (story) => {
-      return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">
-              {story()}
-            </div>
-          </div>
-        </div>
-      );
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss
deleted file mode 100644
index 6753d62b986..00000000000
--- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-//
-// Copyright IBM Corp. 2020
-//
-// This source code is licensed under the Apache-2.0 license found in the
-// LICENSE file in the root directory of this source tree.
-//
-
-.dds-ce-demo-devenv--container {
-  padding: 0;
-}
diff --git a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts b/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts
deleted file mode 100644
index 820d5281aba..00000000000
--- a/packages/web-components/src/components/pictogram-item/__stories__/pictogram-item.stories.ts
+++ /dev/null
@@ -1,230 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import '../index';
-import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import { select } from '@storybook/addon-knobs';
-import styles from './pictogram-item.stories.scss';
-import { COLOR_OPTIONS } from '../defs';
-import readme from './README.stories.mdx';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-/* eslint-disable max-len */
-const Desktop = html`
-  <svg
-    slot="pictogram"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    stroke="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description"
-    width="64"
-    height="64"
-    viewBox="8 8 32 32"
-    role="img"
-    class="bx--pictogram-item__pictogram">
-    <path
-      fill="none"
-      stroke-linejoin="round"
-      stroke-miterlimit="10"
-      stroke-width=".72"
-      d="M37,32 H11c-1.1,0-2-0.9-2-2V13c0-1.1,0.9-2,2-2h26c1.1,
-  0,2,0.9,2,2v17C39,31.1,38.1,32,37,32z M17,37h14 M24,32v5 M9,27h30"></path>
-  </svg>
-`;
-const Pattern = html`
-  <svg
-    slot="pictogram"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description"
-    width="64"
-    height="64"
-    viewBox="0 0 32 32"
-    role="img"
-    class="bx--pictogram-item__pictogram"
-    style="enable-background:new 0 0 32 32;">
-    <path
-      id="pattern_1_"
-      d="M29,31.36H13c-1.301,0-2.36-1.059-2.36-2.36v-7.64H3c-1.301,0-2.36-1.059-2.36-2.36V3
-	    c0-1.301,1.059-2.36,2.36-2.36h16c1.302,0,2.36,1.059,2.36,2.36v7.64H29c1.302,0,2.36,1.059,2.36,2.36v16
-	    C31.36,30.302,30.302,31.36,29,31.36z M11.36,21.36V29c0,0.904,0.736,1.64,1.64,1.64h16c0.904,0,1.64-0.735,1.64-1.64V13
-	    c0-0.904-0.735-1.64-1.64-1.64h-7.64V19c0,1.302-1.059,2.36-2.36,2.36H11.36z M19,18.36c-0.353,0-0.64,0.287-0.64,0.64v1
-      c0,0.353,0.287,0.64,0.64,0.64c0.904,0,1.64-0.735,1.64-1.64c0-0.353-0.287-0.64-0.64-0.64H19z M11,20.64h6.8
-      c-0.102-0.19-0.16-0.408-0.16-0.64v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.059,0.64,0.16v-7.6
-          c-0.19,0.103-0.408,0.16-0.64,0.16h-1c-0.75,0-1.36-0.61-1.36-1.36V8c0-0.75,0.61-1.36,1.36-1.36h1c0.231,0,0.449,0.058,0.64,0.16V3
-      c0-0.904-0.735-1.64-1.64-1.64h-3.8c0.103,0.191,0.16,0.409,0.16,0.64v1c0,0.75-0.61,1.36-1.36,1.36h-1c-0.75,0-1.36-0.61-1.36-1.36
-      V2c0-0.231,0.058-0.449,0.16-0.64H4.2C4.302,1.551,4.36,1.769,4.36,2v1c0,0.75-0.61,1.36-1.36,1.36H2
-      c-0.231,0-0.449-0.058-0.64-0.16v7.6c0.191-0.103,0.409-0.16,0.64-0.16h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.75-0.61,1.36-1.36,1.36
-      H2c-0.231,0-0.449-0.058-0.64-0.16V19c0,0.904,0.736,1.64,1.64,1.64h3.8C6.697,20.45,6.64,20.232,6.64,20v-1
-      c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1c0,0.231-0.058,0.449-0.16,0.64H11z M8,18.36
-      c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H8z
-      M1.36,14c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H2
-      c-0.353,0-0.64,0.287-0.64,0.64V14z M19,7.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1
-      c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H19z M13,1.36c-0.353,0-0.64,0.287-0.64,0.64v1
-      c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64H13z M1.36,3
-      c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V2c0-0.353-0.287-0.64-0.64-0.64C2.096,1.36,1.36,2.096,1.36,3z
-      M14,15.36h-1c-0.75,0-1.36-0.61-1.36-1.36v-1c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1
-      C15.36,14.75,14.75,15.36,14,15.36z M13,12.36c-0.353,0-0.64,0.287-0.64,0.64v1c0,0.353,0.287,0.64,0.64,0.64h1
-      c0.353,0,0.64-0.287,0.64-0.64v-1c0-0.353-0.287-0.64-0.64-0.64H13z M9,10.36H8c-0.75,0-1.36-0.61-1.36-1.36V8
-      c0-0.75,0.61-1.36,1.36-1.36h1c0.75,0,1.36,0.61,1.36,1.36v1C10.36,9.75,9.75,10.36,9,10.36z M8,7.36C7.647,7.36,7.36,7.647,7.36,8
-      v1c0,0.353,0.287,0.64,0.64,0.64h1c0.353,0,0.64-0.287,0.64-0.64V8c0-0.353-0.287-0.64-0.64-0.64H8z" />
-    <rect
-      id="_Transparent_Rectangle"
-      style="fill:none;"
-      width="32"
-      height="32" />
-  </svg>
-`;
-const Touch = html`
-  <svg
-    slot="pictogram"
-    focusable="false"
-    preserveAspectRatio="xMidYMid meet"
-    xmlns="http://www.w3.org/2000/svg"
-    fill="currentColor"
-    data-autoid="dds--pictogram-item__pictogram"
-    aria-label="Pictogram description"
-    width="64"
-    height="64"
-    viewBox="0 0 32 32"
-    role="img"
-    class="bx--pictogram-item__pictogram">
-    <path
-      id="touch_1_"
-      d="M19.77,31.36c-5.067,0-7.409-2.218-10.404-5.602c-0.844-0.953-3.435-3.76-3.435-3.76L5.43,21.444
-	c-1.217-1.339-1.79-2.018-1.79-2.459c0-0.541,0.374-1.022,1.052-1.357c1.188-0.586,3.129-0.646,4.319,0.269
-	c0.895,0.688,2.677,2.611,3.629,3.663V7c0-1.388,0.968-2.357,2.354-2.36c0,0,0,0,0.001,0c0,0,0.001,0,0.003,0
-	c0.001,0,0.002,0,0.003,0C16.391,4.643,17.36,5.612,17.36,7v7.64h6.552c2.536,0,4.448,1.778,4.448,4.136v4.01
-	C28.36,27.239,27.319,31.36,19.77,31.36z M6.465,21.516c0.002,0.002,2.595,2.811,3.44,3.767c2.865,3.236,5.099,5.357,9.865,5.357
-	c6.532,0,7.87-3.14,7.87-7.854v-4.01c0-1.948-1.603-3.417-3.728-3.417H17c-0.199,0-0.36-0.161-0.36-0.36V7
-	c0-0.98-0.66-1.639-1.642-1.64C14.019,5.361,13.36,6.02,13.36,7v15.5c0,0.149-0.092,0.283-0.232,0.337
-	c-0.139,0.054-0.298,0.015-0.397-0.099c-0.03-0.033-2.983-3.368-4.158-4.271c-0.925-0.709-2.589-0.673-3.562-0.192
-	c-0.413,0.203-0.65,0.463-0.65,0.711c0.057,0.274,1.063,1.38,1.603,1.975L6.465,21.516z M10.755,11.729
-	C9.407,10.535,8.634,8.811,8.634,7c0-3.507,2.853-6.36,6.36-6.36s6.36,2.853,6.36,6.36c0,1.811-0.773,3.534-2.121,4.729
-	l-0.479-0.539c1.194-1.058,1.879-2.585,1.879-4.19c0-3.11-2.529-5.64-5.64-5.64c-3.11,0-5.64,2.53-5.64,5.64
-	c0,1.605,0.685,3.133,1.879,4.19L10.755,11.729z" />
-    <rect
-      id="_Transparent_Rectangle"
-      style="fill:none;"
-      width="32"
-      height="32" />
-  </svg>
-`;
-/* eslint-enable max-len */
-
-/**
- * Returns the pictogram based on the storybook knob value
- *
- * @param {string} sel string that defines the returning pictogram
- * @returns {*} Pictogram SVG markup
- */
-const selectPictogram = (sel) => {
-  switch (sel) {
-    case 'Desktop':
-      return Desktop;
-    case 'Pattern':
-      return Pattern;
-    case 'Touch':
-      return Touch;
-    default:
-      return '';
-  }
-};
-
-const pictograms = {
-  Desktop: 'Desktop',
-  Touch: 'Touch',
-  Pattern: 'Pattern',
-};
-
-const pictogramColors = {
-  'Text color (default)': COLOR_OPTIONS.DEFAULT,
-  Blue: COLOR_OPTIONS.BLUE,
-};
-
-export const Default = (args) => {
-  const { heading, copy, href, linkCopy, pictogram, pictogramColor } =
-    args?.PictogramItem ?? {};
-  return html`
-    <dds-pictogram-item color="${pictogramColor}">
-      ${pictogram?.src}
-      <dds-content-item-heading>${heading}</dds-content-item-heading>
-      <dds-content-item-copy>${copy}</dds-content-item-copy>
-      <dds-link-with-icon href="${href}" slot="footer">
-        ${linkCopy} ${ArrowRight20({ slot: 'icon' })}
-      </dds-link-with-icon>
-    </dds-pictogram-item>
-  `;
-};
-
-export default {
-  title: 'Components/Pictogram item',
-  decorators: [
-    (story) => html`
-      <style>
-        ${styles}
-      </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-lg-8 bx--no-gutter">${story()}</div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      PictogramItem: () => ({
-        heading: textNullable('Heading (heading):', 'Lorem ipsum dolor sit'),
-        copy:
-          'Lorem ipsum dolor sit amet, ' +
-          'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
-          'Ut enim ad minim veniam\n',
-        href: textNullable('Link with Icon href:', 'https://example.com'),
-        linkCopy: textNullable('Link with Icon copy:', 'Lorem ipsum dolor'),
-        pictogram: {
-          src: selectPictogram(
-            select('Pictogram (required)', pictograms, pictograms.Desktop)
-          ),
-          'aria-label': textNullable('Aria-label:', 'Pictogram description'),
-        },
-        pictogramColor: select(
-          'Pictogram color:',
-          pictogramColors,
-          COLOR_OPTIONS.DEFAULT
-        ),
-      }),
-    },
-    propsSet: {
-      default: {
-        PictogramItem: {
-          heading: 'Lorem ipsum dolor sit',
-          copy:
-            'Lorem ipsum dolor sit amet, ' +
-            'consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. ' +
-            'Ut enim ad minim veniam\n',
-          href: 'https://example.com',
-          linkCopy: 'Lorem ipsum dolor',
-          pictogram: {
-            src: pictograms.Desktop,
-            'aria-label': 'Pictogram description',
-          },
-          pictogramColor: COLOR_OPTIONS.DEFAULT,
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts b/packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts
deleted file mode 100644
index 1a927569d06..00000000000
--- a/packages/web-components/src/components/pictogram-item/__tests__/pictogram-item.test.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { render } from 'lit-html';
-import '../pictogram-item';
-import { Default } from '../__stories__/pictogram-item.stories';
-
-const template = (props?) =>
-  Default({
-    PictogramItem: props,
-  });
-
-describe('dds-pictogram-item', function () {
-  it('Renders as expected', async function () {
-    render(template(), document.body);
-    await Promise.resolve();
-    expect(document.body.querySelector('dds-pictogram-item')).toMatchSnapshot({
-      mode: 'shadow',
-    });
-  });
-  afterEach(async function () {
-    await render(undefined!, document.body);
-  });
-});
diff --git a/packages/web-components/src/components/pictogram-item/pictogram-item.scss b/packages/web-components/src/components/pictogram-item/pictogram-item.scss
index 3d93dcb8b9e..835899f6927 100644
--- a/packages/web-components/src/components/pictogram-item/pictogram-item.scss
+++ b/packages/web-components/src/components/pictogram-item/pictogram-item.scss
@@ -5,12 +5,10 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/internal/content-item/content-item';
-@import '@carbon/ibmdotcom-styles/scss/components/pictogram-item/pictogram-item';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/ibmdotcom-styles/scss/internal/content-item';
+@use '@carbon/ibmdotcom-styles/scss/components/pictogram-item';
 
-:host(#{$dds-prefix}-pictogram-item) {
+:host(#{$c4d-prefix}-pictogram-item) {
   display: block;
 }
diff --git a/packages/web-components/src/components/pictogram-item/pictogram-item.ts b/packages/web-components/src/components/pictogram-item/pictogram-item.ts
index a279c4eee73..f26cf46926d 100644
--- a/packages/web-components/src/components/pictogram-item/pictogram-item.ts
+++ b/packages/web-components/src/components/pictogram-item/pictogram-item.ts
@@ -7,28 +7,27 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { COLOR_OPTIONS } from './defs';
-import DDSContentItem from '../content-item/content-item';
+import C4DContentItem from '../content-item/content-item';
 import styles from './pictogram-item.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Pictogram item.
  *
- * @element dds-pictogram-item
+ * @element c4d-pictogram-item
  * @slot pictogram - The pictogram content.
  * @slot heading - The heading content.
  * @slot footer - The footer (CTA) content.
  */
-@customElement(`${ddsPrefix}-pictogram-item`)
-class DDSPictogramItem extends StableSelectorMixin(DDSContentItem) {
+@customElement(`${c4dPrefix}-pictogram-item`)
+class C4DPictogramItem extends StableSelectorMixin(C4DContentItem) {
   /**
    * The pictogram color.
    *
@@ -53,11 +52,16 @@ class DDSPictogramItem extends StableSelectorMixin(DDSContentItem) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pictogram-item`;
+    return `${c4dPrefix}--pictogram-item`;
   }
 
   static styles = styles;
 }
 
+console.warn(
+  'The pictogram-item component has been deprecated in favor of the content-item (pictogram variation) component. ' +
+    'See content-item documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSPictogramItem;
+export default C4DPictogramItem;
diff --git a/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx b/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx
index 952fcf92720..8963323edc5 100644
--- a/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/pricing-table/__stories__/README.stories.mdx
@@ -27,121 +27,121 @@ import '@carbon/ibmdotcom-web-components/es/components/pricing-table/index.js';
 ### HTML
 
 ```html
-<dds-pricing-table highlight-column="2" highlight-label="Featured">
-  <dds-pricing-table-head>
-    <dds-pricing-table-header-row>
-      <dds-pricing-table-header-cell type="simple"
-        >Optional table header</dds-pricing-table-header-cell
+<cds-pricing-table highlight-column="2" highlight-label="Featured">
+  <cds-pricing-table-head>
+    <cds-pricing-table-header-row>
+      <cds-pricing-table-header-cell type="simple"
+        >Optional table header</cds-pricing-table-header-cell
       >
-      <dds-pricing-table-header-cell>
-        <dds-pricing-table-header-cell-headline
-          >Variation 1</dds-pricing-table-header-cell-headline
+      <cds-pricing-table-header-cell>
+        <cds-pricing-table-header-cell-headline
+          >Variation 1</cds-pricing-table-header-cell-headline
         >
-        <dds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</dds-pricing-table-header-cell-caption
+        <cds-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</cds-pricing-table-header-cell-caption
         >
-        <dds-pricing-table-header-cell-tag
+        <cds-pricing-table-header-cell-tag
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Merchandising</dds-pricing-table-header-cell-tag
+          >Merchandising</cds-pricing-table-header-cell-tag
         >
-        <dds-pricing-table-header-cell-description>
+        <cds-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <bx-unordered-list>
-            <bx-list-item>Lorem ipsum dolor</bx-list-item>
-            <bx-list-item>sit amet</bx-list-item>
-            <bx-list-item
+          <cds-unordered-list>
+            <cds-list-item>Lorem ipsum dolor</cds-list-item>
+            <cds-list-item>sit amet</cds-list-item>
+            <cds-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</bx-list-item
+              tempor</cds-list-item
             >
-          </bx-unordered-list>
-        </dds-pricing-table-header-cell-description>
-        <dds-pricing-table-header-cell-cta
+          </cds-unordered-list>
+        </cds-pricing-table-header-cell-description>
+        <cds-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</dds-pricing-table-header-cell-cta
+          >Call to action</cds-pricing-table-header-cell-cta
         >
-      </dds-pricing-table-header-cell>
-      <dds-pricing-table-header-cell>
-        <dds-pricing-table-header-cell-headline
-          >Variation 2</dds-pricing-table-header-cell-headline
+      </cds-pricing-table-header-cell>
+      <cds-pricing-table-header-cell>
+        <cds-pricing-table-header-cell-headline
+          >Variation 2</cds-pricing-table-header-cell-headline
         >
-        <dds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</dds-pricing-table-header-cell-caption
+        <cds-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</cds-pricing-table-header-cell-caption
         >
-        <dds-pricing-table-header-cell-description>
+        <cds-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <bx-unordered-list>
-            <bx-list-item>Lorem ipsum dolor</bx-list-item>
-            <bx-list-item>sit amet</bx-list-item>
-            <bx-list-item
+          <cds-unordered-list>
+            <cds-list-item>Lorem ipsum dolor</cds-list-item>
+            <cds-list-item>sit amet</cds-list-item>
+            <cds-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</bx-list-item
+              tempor</cds-list-item
             >
-          </bx-unordered-list>
-        </dds-pricing-table-header-cell-description>
-        <dds-pricing-table-header-cell-cta
+          </cds-unordered-list>
+        </cds-pricing-table-header-cell-description>
+        <cds-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</dds-pricing-table-header-cell-cta
+          >Call to action</cds-pricing-table-header-cell-cta
         >
-      </dds-pricing-table-header-cell>
-    </dds-pricing-table-header-row>
-  </dds-pricing-table-head>
-  <dds-pricing-table-body>
-    <dds-pricing-table-row>
-      <dds-pricing-table-header-cell scope="row"
-        >Row 1</dds-pricing-table-header-cell
+      </cds-pricing-table-header-cell>
+    </cds-pricing-table-header-row>
+  </cds-pricing-table-head>
+  <cds-pricing-table-body>
+    <cds-pricing-table-row>
+      <cds-pricing-table-header-cell scope="row"
+        >Row 1</cds-pricing-table-header-cell
       >
-      <dds-pricing-table-cell icon="checkmark">
-        <dds-pricing-table-cell-annotation>
+      <cds-pricing-table-cell icon="checkmark">
+        <cds-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </dds-pricing-table-cell-annotation>
-      </dds-pricing-table-cell>
-      <dds-pricing-table-cell>
+        </cds-pricing-table-cell-annotation>
+      </cds-pricing-table-cell>
+      <cds-pricing-table-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-        <dds-pricing-table-cell-annotation>
+        <cds-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </dds-pricing-table-cell-annotation>
-      </dds-pricing-table-cell>
-    </dds-pricing-table-row>
-    <dds-pricing-table-row>
-      <dds-pricing-table-header-cell scope="row"
-        >Row 2</dds-pricing-table-header-cell
+        </cds-pricing-table-cell-annotation>
+      </cds-pricing-table-cell>
+    </cds-pricing-table-row>
+    <cds-pricing-table-row>
+      <cds-pricing-table-header-cell scope="row"
+        >Row 2</cds-pricing-table-header-cell
       >
-      <dds-pricing-table-cell icon="checkmark"> </dds-pricing-table-cell>
-      <dds-pricing-table-cell>
+      <cds-pricing-table-cell icon="checkmark"> </cds-pricing-table-cell>
+      <cds-pricing-table-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </dds-pricing-table-cell>
-    </dds-pricing-table-row>
-    <dds-pricing-table-row>
-      <dds-pricing-table-header-cell scope="row"
-        >Row 3</dds-pricing-table-header-cell
+      </cds-pricing-table-cell>
+    </cds-pricing-table-row>
+    <cds-pricing-table-row>
+      <cds-pricing-table-header-cell scope="row"
+        >Row 3</cds-pricing-table-header-cell
       >
-      <dds-pricing-table-cell>
-        <dds-pricing-table-cell-annotation>
+      <cds-pricing-table-cell>
+        <cds-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </dds-pricing-table-cell-annotation>
-      </dds-pricing-table-cell>
-      <dds-pricing-table-cell>
+        </cds-pricing-table-cell-annotation>
+      </cds-pricing-table-cell>
+      <cds-pricing-table-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-        <dds-pricing-table-cell-annotation>
+        <cds-pricing-table-cell-annotation>
           Sed quis neque ultrices, convallis augue non, scelerisque massa.
-        </dds-pricing-table-cell-annotation>
-      </dds-pricing-table-cell>
-    </dds-pricing-table-row>
-  </dds-pricing-table-body>
-</dds-pricing-table>
+        </cds-pricing-table-cell-annotation>
+      </cds-pricing-table-cell>
+    </cds-pricing-table-row>
+  </cds-pricing-table-body>
+</cds-pricing-table>
 ```
 
 ## Props
 
-<Props of="dds-pricing-table" />
+<Props of="cds-pricing-table" />
 
 ## Stable selectors
 
@@ -151,6 +151,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<dds-pricing-table>`   | `data-autoid="dds--pricing-table"` | Component   |
+| `<cds-pricing-table>`   | `data-autoid="cds--pricing-table"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss
index ce6e55032bf..91743ac46c1 100644
--- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss
+++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
diff --git a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts
index 14ce5d9f6e4..b5a4c15bd08 100644
--- a/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts
+++ b/packages/web-components/src/components/pricing-table/__stories__/pricing-table.stories.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, TemplateResult } from 'lit-element';
+import { TemplateResult, html } from 'lit';
 import { number, text } from '@storybook/addon-knobs';
 import readme from './README.stories.mdx';
 import '../index';
@@ -25,90 +25,90 @@ enum CELL_TYPES {
 const renderHeaderCell = (iterator: number): TemplateResult => {
   const cellVariations = [
     html`
-      <dds-pricing-table-header-cell>
-        <dds-pricing-table-header-cell-headline
-          >Variation ${iterator}</dds-pricing-table-header-cell-headline
+      <c4d-pricing-table-header-cell>
+        <c4d-pricing-table-header-cell-headline
+          >Variation ${iterator}</c4d-pricing-table-header-cell-headline
         >
-        <dds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</dds-pricing-table-header-cell-caption
+        <c4d-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</c4d-pricing-table-header-cell-caption
         >
-        <dds-pricing-table-header-cell-tag
+        <c4d-pricing-table-header-cell-tag
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Merchandising offer</dds-pricing-table-header-cell-tag
+          >Merchandising offer</c4d-pricing-table-header-cell-tag
         >
-        <dds-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <bx-unordered-list>
-            <bx-list-item>Lorem ipsum dolor</bx-list-item>
-            <bx-list-item>sit amet</bx-list-item>
-            <bx-list-item
+          <cds-unordered-list>
+            <cds-list-item>Lorem ipsum dolor</cds-list-item>
+            <cds-list-item>sit amet</cds-list-item>
+            <cds-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</bx-list-item
+              tempor</cds-list-item
             >
-          </bx-unordered-list>
-        </dds-pricing-table-header-cell-description>
-        <dds-pricing-table-header-cell-cta
+          </cds-unordered-list>
+        </c4d-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</dds-pricing-table-header-cell-cta
+          >Call to action</c4d-pricing-table-header-cell-cta
         >
-      </dds-pricing-table-header-cell>
+      </c4d-pricing-table-header-cell>
     `,
     html`
-      <dds-pricing-table-header-cell>
-        <dds-pricing-table-header-cell-headline
-          >Variation ${iterator}</dds-pricing-table-header-cell-headline
+      <c4d-pricing-table-header-cell>
+        <c4d-pricing-table-header-cell-headline
+          >Variation ${iterator}</c4d-pricing-table-header-cell-headline
         >
-        <dds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</dds-pricing-table-header-cell-caption
+        <c4d-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</c4d-pricing-table-header-cell-caption
         >
-        <dds-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <bx-unordered-list>
-            <bx-list-item>Lorem ipsum dolor</bx-list-item>
-            <bx-list-item>sit amet</bx-list-item>
-            <bx-list-item
+          <cds-unordered-list>
+            <cds-list-item>Lorem ipsum dolor</cds-list-item>
+            <cds-list-item>sit amet</cds-list-item>
+            <cds-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</bx-list-item
+              tempor</cds-list-item
             >
-          </bx-unordered-list>
-        </dds-pricing-table-header-cell-description>
-        <dds-pricing-table-header-cell-cta
+          </cds-unordered-list>
+        </c4d-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</dds-pricing-table-header-cell-cta
+          >Call to action</c4d-pricing-table-header-cell-cta
         >
-      </dds-pricing-table-header-cell>
+      </c4d-pricing-table-header-cell>
     `,
     html`
-      <dds-pricing-table-header-cell>
-        <dds-pricing-table-header-cell-headline
-          >Variation ${iterator}</dds-pricing-table-header-cell-headline
+      <c4d-pricing-table-header-cell>
+        <c4d-pricing-table-header-cell-headline
+          >Variation ${iterator}</c4d-pricing-table-header-cell-headline
         >
-        <dds-pricing-table-header-cell-caption
-          >Starting at $X.XX per user</dds-pricing-table-header-cell-caption
+        <c4d-pricing-table-header-cell-caption
+          >Starting at $X.XX per user</c4d-pricing-table-header-cell-caption
         >
-        <dds-pricing-table-header-cell-tag
+        <c4d-pricing-table-header-cell-tag
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Secondary tag</dds-pricing-table-header-cell-tag
+          >Secondary tag</c4d-pricing-table-header-cell-tag
         >
-        <dds-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-description>
           Lorem ipsum dolor sit amet consectetur.
-          <bx-unordered-list>
-            <bx-list-item>Lorem ipsum dolor</bx-list-item>
-            <bx-list-item>sit amet</bx-list-item>
-            <bx-list-item
+          <cds-unordered-list>
+            <cds-list-item>Lorem ipsum dolor</cds-list-item>
+            <cds-list-item>sit amet</cds-list-item>
+            <cds-list-item
               >consectetur retention adispiscing elit sed do eiusm Eiusmod
-              tempor</bx-list-item
+              tempor</cds-list-item
             >
-          </bx-unordered-list>
-        </dds-pricing-table-header-cell-description>
-        <dds-pricing-table-header-cell-cta
+          </cds-unordered-list>
+        </c4d-pricing-table-header-cell-description>
+        <c4d-pricing-table-header-cell-cta
           cta-type="local"
           href="https://www.carbondesignsystem.com/all-about-carbon/what-is-carbon/"
-          >Call to action</dds-pricing-table-header-cell-cta
+          >Call to action</c4d-pricing-table-header-cell-cta
         >
-      </dds-pricing-table-header-cell>
+      </c4d-pricing-table-header-cell>
     `,
   ];
   return cellVariations[(iterator - 1) % cellVariations.length];
@@ -119,11 +119,11 @@ const renderHead = (
   heading: string = ''
 ): TemplateResult => {
   return html`
-    <dds-pricing-table-head>
-      <dds-pricing-table-header-row>
-        <dds-pricing-table-header-cell
+    <c4d-pricing-table-head>
+      <c4d-pricing-table-header-row>
+        <c4d-pricing-table-header-cell
           type="${PRICING_TABLE_HEADER_CELL_TYPES.SIMPLE}"
-          >${heading}</dds-pricing-table-header-cell
+          >${heading}</c4d-pricing-table-header-cell
         >
         ${(() => {
           const cells: TemplateResult[] = [];
@@ -132,8 +132,8 @@ const renderHead = (
           }
           return cells;
         })()}
-      </dds-pricing-table-header-row>
-    </dds-pricing-table-head>
+      </c4d-pricing-table-header-row>
+    </c4d-pricing-table-head>
   `;
 };
 
@@ -144,31 +144,31 @@ const renderBodyCell = (
   switch (type) {
     case CELL_TYPES.TEXT:
       return html`
-        <dds-pricing-table-cell>
+        <c4d-pricing-table-cell>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
           magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
           sem vel euismod dignissim.
-          <dds-pricing-table-cell-annotation>
+          <c4d-pricing-table-cell-annotation>
             Sed quis neque ultrices, convallis augue non, scelerisque massa.
-          </dds-pricing-table-cell-annotation>
-        </dds-pricing-table-cell>
+          </c4d-pricing-table-cell-annotation>
+        </c4d-pricing-table-cell>
       `;
     case CELL_TYPES.ICON:
       return html`
-        <dds-pricing-table-cell icon="checkmark">
+        <c4d-pricing-table-cell icon="checkmark">
           ${iconText}
-          <dds-pricing-table-cell-annotation>
+          <c4d-pricing-table-cell-annotation>
             Sed quis neque ultrices, convallis augue non, scelerisque massa.
-          </dds-pricing-table-cell-annotation>
-        </dds-pricing-table-cell>
+          </c4d-pricing-table-cell-annotation>
+        </c4d-pricing-table-cell>
       `;
     default:
       return html`
-        <dds-pricing-table-cell>
-          <dds-pricing-table-cell-annotation>
+        <c4d-pricing-table-cell>
+          <c4d-pricing-table-cell-annotation>
             Sed quis neque ultrices, convallis augue non, scelerisque massa.
-          </dds-pricing-table-cell-annotation>
-        </dds-pricing-table-cell>
+          </c4d-pricing-table-cell-annotation>
+        </c4d-pricing-table-cell>
       `;
   }
 };
@@ -180,22 +180,22 @@ const renderBodyRow = (
   rowHeaders: boolean = true,
   iconText: string = ''
 ): TemplateResult => html`
-  <dds-pricing-table-row>
+  <c4d-pricing-table-row>
     ${(() => {
       const cells: TemplateResult[] = [
         html`
           ${rowHeaders
             ? html`
-                <dds-pricing-table-header-cell scope="row"
-                  >Row ${rowNum}</dds-pricing-table-header-cell
+                <c4d-pricing-table-header-cell scope="row"
+                  >Row ${rowNum}</c4d-pricing-table-header-cell
                 >
               `
             : html`
-                <dds-pricing-table-cell
+                <c4d-pricing-table-cell
                   >Row ${rowNum} Lorem ipsum dolor sit amet, consectetur
                   adipiscing elit. Nunc dui magna, finibus id tortor sed,
                   aliquet bibendum augue. Aenean posuere sem vel euismod
-                  dignissim.</dds-pricing-table-cell
+                  dignissim.</c4d-pricing-table-cell
                 >
               `}
         `,
@@ -205,7 +205,7 @@ const renderBodyRow = (
       }
       return cells;
     })()}
-  </dds-pricing-table-row>
+  </c4d-pricing-table-row>
 `;
 
 export const Default = (args) => {
@@ -229,7 +229,7 @@ export const Default = (args) => {
         padding-bottom: 250px;
       }
     </style>
-    <dds-pricing-table
+    <c4d-pricing-table
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
@@ -237,12 +237,12 @@ export const Default = (args) => {
       highlight-column="${highlightCol}"
       highlight-label="${highlightLabel}">
       ${renderHead(columnCount, heading)}
-      <dds-pricing-table-body>
+      <c4d-pricing-table-body>
         ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
         ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
         ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
-      </dds-pricing-table-body>
-    </dds-pricing-table>
+      </c4d-pricing-table-body>
+    </c4d-pricing-table>
   `;
 };
 
@@ -259,7 +259,7 @@ export const WithoutRowHeaders = (args) => {
     iconText,
   } = args?.PricingTable ?? {};
   return html`
-    <dds-pricing-table
+    <c4d-pricing-table
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
@@ -267,12 +267,12 @@ export const WithoutRowHeaders = (args) => {
       highlight-column="${highlightCol}"
       highlight-label="${highlightLabel}">
       ${renderHead(columnCount, heading)}
-      <dds-pricing-table-body>
+      <c4d-pricing-table-body>
         ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, false, iconText)}
         ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY, false)}
         ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT, false)}
-      </dds-pricing-table-body>
-    </dds-pricing-table>
+      </c4d-pricing-table-body>
+    </c4d-pricing-table>
   `;
 };
 if (WithoutRowHeaders) {
@@ -295,7 +295,7 @@ export const WithSubheaders = (args) => {
     iconText,
   } = args?.PricingTable ?? {};
   return html`
-    <dds-pricing-table
+    <c4d-pricing-table
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
@@ -303,24 +303,24 @@ export const WithSubheaders = (args) => {
       highlight-column="${highlightCol}"
       highlight-label="${highlightLabel}">
       ${renderHead(columnCount, heading)}
-      <dds-pricing-table-body>
-        <dds-pricing-table-group title="Group 1">
+      <c4d-pricing-table-body>
+        <c4d-pricing-table-group title="Group 1">
           ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
           ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
           ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
-        </dds-pricing-table-group>
-        <dds-pricing-table-group title="Group 2">
+        </c4d-pricing-table-group>
+        <c4d-pricing-table-group title="Group 2">
           ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
           ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
           ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
-        </dds-pricing-table-group>
-        <dds-pricing-table-group title="Group 3">
+        </c4d-pricing-table-group>
+        <c4d-pricing-table-group title="Group 3">
           ${renderBodyRow(columnCount, 1, CELL_TYPES.ICON, true, iconText)}
           ${renderBodyRow(columnCount, 2, CELL_TYPES.EMPTY)}
           ${renderBodyRow(columnCount, 3, CELL_TYPES.TEXT)}
-        </dds-pricing-table-group>
-      </dds-pricing-table-body>
-    </dds-pricing-table>
+        </c4d-pricing-table-group>
+      </c4d-pricing-table-body>
+    </c4d-pricing-table>
   `;
 };
 if (WithSubheaders) {
@@ -370,9 +370,9 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-16">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-16">${story()}</div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-annotation-toggle.ts b/packages/web-components/src/components/pricing-table/pricing-table-annotation-toggle.ts
index 2fbca2ee577..16a78863cc1 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-annotation-toggle.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-annotation-toggle.ts
@@ -7,19 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import ChevronDown16 from '../../internal/vendor/@carbon/web-components/icons/chevron--down/16.js';
 import Close16 from '../../internal/vendor/@carbon/web-components/icons/close/16.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
-import DDSPricingTableRow from './pricing-table-row';
+import C4DPricingTableRow from './pricing-table-row';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-annotation-toggle`)
-class DDSPricingTableAnnotationToggle extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-pricing-table-annotation-toggle`)
+class C4DPricingTableAnnotationToggle extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'toggle';
 
@@ -27,7 +28,7 @@ class DDSPricingTableAnnotationToggle extends StableSelectorMixin(LitElement) {
   toggled: boolean = false;
 
   @property()
-  parentRow: DDSPricingTableRow | null = null;
+  parentRow: C4DPricingTableRow | null = null;
 
   private _handleClick = () => {
     const newVal = !this.toggled;
@@ -46,7 +47,7 @@ class DDSPricingTableAnnotationToggle extends StableSelectorMixin(LitElement) {
   };
 
   connectedCallback(): void {
-    this.parentRow = this.closest(`${ddsPrefix}-pricing-table-row`);
+    this.parentRow = this.closest(`${c4dPrefix}-pricing-table-row`);
     super.connectedCallback();
   }
 
@@ -64,10 +65,10 @@ class DDSPricingTableAnnotationToggle extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-annotation-toggle`;
+    return `${c4dPrefix}--pricing-table-annotation-toggle`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableAnnotationToggle;
+export default C4DPricingTableAnnotationToggle;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-body.ts b/packages/web-components/src/components/pricing-table/pricing-table-body.ts
index 0a07cd504a0..2594d159baf 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-body.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-body.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredListBody from '../structured-list/structured-list-body';
+import C4DStructuredListBody from '../structured-list/structured-list-body';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-body`)
-class DDSPricingTableBody extends StableSelectorMixin(DDSStructuredListBody) {
+@customElement(`${c4dPrefix}-pricing-table-body`)
+class C4DPricingTableBody extends StableSelectorMixin(C4DStructuredListBody) {
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-body`;
+    return `${c4dPrefix}--pricing-table-body`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableBody;
+export default C4DPricingTableBody;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-cell-annotation.ts b/packages/web-components/src/components/pricing-table/pricing-table-cell-annotation.ts
index 33056dbcb1d..f8b3f53daf0 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-cell-annotation.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-cell-annotation.ts
@@ -7,16 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, property, html } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-cell-annotation`)
-class DDSPricingTableCellAnnotation extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-pricing-table-cell-annotation`)
+class C4DPricingTableCellAnnotation extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'annotation';
 
@@ -25,10 +26,10 @@ class DDSPricingTableCellAnnotation extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-cell-annotation`;
+    return `${c4dPrefix}--pricing-table-cell-annotation`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableCellAnnotation;
+export default C4DPricingTableCellAnnotation;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-cell.ts b/packages/web-components/src/components/pricing-table/pricing-table-cell.ts
index 9035776bab9..e3c136faf40 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-cell.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-cell.ts
@@ -7,27 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredListCell from '../structured-list/structured-list-cell';
-import DDSPricingTableGroup from './pricing-table-group';
+import C4DStructuredListCell from '../structured-list/structured-list-cell';
+import C4DPricingTableGroup from './pricing-table-group';
 import styles from './pricing-table.scss';
-import DDSPricingTableCellAnnotation from './pricing-table-cell-annotation';
+import C4DPricingTableCellAnnotation from './pricing-table-cell-annotation';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-cell`)
-class DDSPricingTableCell extends StableSelectorMixin(
-  HostListenerMixin(DDSStructuredListCell)
+@customElement(`${c4dPrefix}-pricing-table-cell`)
+class C4DPricingTableCell extends StableSelectorMixin(
+  HostListenerMixin(C4DStructuredListCell)
 ) {
-  _parentGroup: DDSPricingTableGroup | null = this.closest(
-    `${ddsPrefix}-pricing-table-group`
+  _parentGroup: C4DPricingTableGroup | null = this.closest(
+    `${c4dPrefix}-pricing-table-group`
   );
 
   @HostListener('document:event-toggle-annotations')
@@ -58,7 +56,7 @@ class DDSPricingTableCell extends StableSelectorMixin(
     // sometimes appear as inside the default slot. Also filter out empty
     // text nodes.
     const slotContents = (defaultSlot?.assignedNodes() || []).filter((node) => {
-      const isAnnotation = node instanceof DDSPricingTableCellAnnotation;
+      const isAnnotation = node instanceof C4DPricingTableCellAnnotation;
       const isEmpty = node.textContent?.trim() === '';
 
       return !isAnnotation && !isEmpty;
@@ -82,10 +80,10 @@ class DDSPricingTableCell extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-cell`;
+    return `${c4dPrefix}--pricing-table-cell`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableCell;
+export default C4DPricingTableCell;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-group.ts b/packages/web-components/src/components/pricing-table/pricing-table-group.ts
index 54811f2ad0d..b6c4660b714 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-group.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-group.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredListGroup from '../structured-list/structured-list-group';
+import C4DStructuredListGroup from '../structured-list/structured-list-group';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-group`)
-class DDSPricingTableGroup extends StableSelectorMixin(DDSStructuredListGroup) {
+@customElement(`${c4dPrefix}-pricing-table-group`)
+class C4DPricingTableGroup extends StableSelectorMixin(C4DStructuredListGroup) {
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-group`;
+    return `${c4dPrefix}--pricing-table-group`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableGroup;
+export default C4DPricingTableGroup;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-head.ts b/packages/web-components/src/components/pricing-table/pricing-table-head.ts
index a127eb3166a..d4f0ae261c4 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-head.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-head.ts
@@ -7,22 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {} from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredListHead from '../structured-list/structured-list-head';
+import C4DStructuredListHead from '../structured-list/structured-list-head';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-head`)
-class DDSPricingTableHead extends StableSelectorMixin(DDSStructuredListHead) {
+@customElement(`${c4dPrefix}-pricing-table-head`)
+class C4DPricingTableHead extends StableSelectorMixin(C4DStructuredListHead) {
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-head`;
+    return `${c4dPrefix}--pricing-table-head`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHead;
+export default C4DPricingTableHead;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-caption.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-caption.ts
index 5a8eda3aabf..ffaf915fdc3 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-caption.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-caption.ts
@@ -7,16 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-cell-caption`)
-class DDSPricingTableHeaderCellCaption extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-pricing-table-header-cell-caption`)
+class C4DPricingTableHeaderCellCaption extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'caption';
 
@@ -25,10 +26,10 @@ class DDSPricingTableHeaderCellCaption extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-cell-caption`;
+    return `${c4dPrefix}--pricing-table-header-cell-caption`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderCellCaption;
+export default C4DPricingTableHeaderCellCaption;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts
index 9e9b0b6a27e..2e76df60d5b 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-cta.ts
@@ -7,18 +7,18 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import DDSButtonCTA from '../cta/button-cta';
-import { BUTTON_KIND } from '../button/button';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import C4DButton from '../cta/button-cta';
+import { BUTTON_KIND } from '../../internal/vendor/@carbon/web-components/components/button/button';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-cell-cta`)
-class DDSPricingTableHeaderCellCta extends StableSelectorMixin(DDSButtonCTA) {
+@customElement(`${c4dPrefix}-pricing-table-header-cell-cta`)
+class C4DPricingTableHeaderCellCta extends StableSelectorMixin(C4DButton) {
   @property({ reflect: true })
   slot = 'cta';
 
@@ -28,10 +28,10 @@ class DDSPricingTableHeaderCellCta extends StableSelectorMixin(DDSButtonCTA) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-cell-cta`;
+    return `${c4dPrefix}--pricing-table-header-cell-cta`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderCellCta;
+export default C4DPricingTableHeaderCellCta;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-description.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-description.ts
index 1ab98447bd7..fda4f358268 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-description.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-description.ts
@@ -7,16 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-cell-description`)
-class DDSPricingTableHeaderCellDescription extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-pricing-table-header-cell-description`)
+class C4DPricingTableHeaderCellDescription extends StableSelectorMixin(
   LitElement
 ) {
   render() {
@@ -24,10 +24,10 @@ class DDSPricingTableHeaderCellDescription extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-cell-description`;
+    return `${c4dPrefix}--pricing-table-header-cell-description`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderCellDescription;
+export default C4DPricingTableHeaderCellDescription;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-headline.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-headline.ts
index 513be9f1cf6..c36452d00ef 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-headline.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-headline.ts
@@ -7,16 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-cell-headline`)
-class DDSPricingTableHeaderCellHeadline extends StableSelectorMixin(
+@customElement(`${c4dPrefix}-pricing-table-header-cell-headline`)
+class C4DPricingTableHeaderCellHeadline extends StableSelectorMixin(
   LitElement
 ) {
   @property({ reflect: true })
@@ -27,10 +28,10 @@ class DDSPricingTableHeaderCellHeadline extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-cell-headline`;
+    return `${c4dPrefix}--pricing-table-header-cell-headline`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderCellHeadline;
+export default C4DPricingTableHeaderCellHeadline;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-tag.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-tag.ts
index db5abef2e18..9ecfb5d3751 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell-tag.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell-tag.ts
@@ -7,25 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSTagLink from '../tag-link/tag-link';
+import C4DTagLink from '../tag-link/tag-link';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-cell-tag`)
-class DDSPricingTableHeaderCellTag extends StableSelectorMixin(DDSTagLink) {
+@customElement(`${c4dPrefix}-pricing-table-header-cell-tag`)
+class C4DPricingTableHeaderCellTag extends StableSelectorMixin(C4DTagLink) {
   @property({ reflect: true })
   slot = 'tag';
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-cell-tag`;
+    return `${c4dPrefix}--pricing-table-header-cell-tag`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderCellTag;
+export default C4DPricingTableHeaderCellTag;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-cell.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-cell.ts
index 5f8d1bb1d93..2cd897b705e 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-cell.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-cell.ts
@@ -7,21 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredListHeaderCell from '../structured-list/structured-list-header-cell';
+import C4DStructuredListHeaderCell from '../structured-list/structured-list-header-cell';
 import styles from './pricing-table.scss';
 import { PRICING_TABLE_HEADER_CELL_TYPES } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-cell`)
-class DDSPricingTableHeaderCell extends StableSelectorMixin(
-  DDSStructuredListHeaderCell
+@customElement(`${c4dPrefix}-pricing-table-header-cell`)
+class C4DPricingTableHeaderCell extends StableSelectorMixin(
+  C4DStructuredListHeaderCell
 ) {
   @property({ reflect: true })
   type: PRICING_TABLE_HEADER_CELL_TYPES =
@@ -30,7 +29,7 @@ class DDSPricingTableHeaderCell extends StableSelectorMixin(
   render() {
     const { type } = this;
     const { tagWrapperSelector } = this
-      .constructor as typeof DDSPricingTableHeaderCell;
+      .constructor as typeof C4DPricingTableHeaderCell;
 
     return type === PRICING_TABLE_HEADER_CELL_TYPES.COMPLEX
       ? html`
@@ -68,10 +67,10 @@ class DDSPricingTableHeaderCell extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-cell`;
+    return `${c4dPrefix}--pricing-table-header-cell`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderCell;
+export default C4DPricingTableHeaderCell;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-header-row.ts b/packages/web-components/src/components/pricing-table/pricing-table-header-row.ts
index 2c7cea23c13..956dbad5bd1 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-header-row.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-header-row.ts
@@ -7,22 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import sameHeight from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/sameHeight/sameHeight';
-import DDSStructuredListHeaderRow from '../structured-list/structured-list-header-row';
-import DDSPricingTableHeaderCell from './pricing-table-header-cell';
+import C4DStructuredListHeaderRow from '../structured-list/structured-list-header-row';
+import C4DPricingTableHeaderCell from './pricing-table-header-cell';
 import styles from './pricing-table.scss';
 import { setColumnWidth } from './utils';
 import { PRICING_TABLE_HEADER_CELL_TYPES } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-header-row`)
-class DDSPricingTableHeaderRow extends StableSelectorMixin(
-  DDSStructuredListHeaderRow
+@customElement(`${c4dPrefix}-pricing-table-header-row`)
+class C4DPricingTableHeaderRow extends StableSelectorMixin(
+  C4DStructuredListHeaderRow
 ) {
   /**
    * Array full of tag wrapper elements within header cells.
@@ -40,7 +40,7 @@ class DDSPricingTableHeaderRow extends StableSelectorMixin(
 
     // Find cells that are eligible to have tags within them.
     const validCells = e.target.assignedNodes().filter((node) => {
-      if (node instanceof DDSPricingTableHeaderCell) {
+      if (node instanceof C4DPricingTableHeaderCell) {
         return node.type === PRICING_TABLE_HEADER_CELL_TYPES.COMPLEX;
       }
       return false;
@@ -51,7 +51,7 @@ class DDSPricingTableHeaderRow extends StableSelectorMixin(
     this._tagWrappers = validCells.reduce((acc, cell) => {
       if (cell.length !== 0) {
         const tag = cell.shadowRoot.querySelector(
-          `.${DDSPricingTableHeaderCell.tagWrapperSelector}`
+          `.${C4DPricingTableHeaderCell.tagWrapperSelector}`
         );
         if (tag) acc.push(tag);
       }
@@ -61,7 +61,7 @@ class DDSPricingTableHeaderRow extends StableSelectorMixin(
     this._setSameHeight();
 
     const { eventSlotChange } = this
-      .constructor as typeof DDSPricingTableHeaderRow;
+      .constructor as typeof C4DPricingTableHeaderRow;
     this.dispatchEvent(
       new CustomEvent(eventSlotChange, {
         bubbles: true,
@@ -84,14 +84,14 @@ class DDSPricingTableHeaderRow extends StableSelectorMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-header-row`;
+    return `${c4dPrefix}--pricing-table-header-row`;
   }
 
   static get eventSlotChange() {
-    return `${ddsPrefix}-pricing-table-header-row-slot-change`;
+    return `${c4dPrefix}-pricing-table-header-row-slot-change`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHeaderRow;
+export default C4DPricingTableHeaderRow;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-highlight-label.ts b/packages/web-components/src/components/pricing-table/pricing-table-highlight-label.ts
index 3dfd918355d..12d825d29ed 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-highlight-label.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-highlight-label.ts
@@ -7,16 +7,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './pricing-table.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-highlight-label`)
-class DDSPricingTableHighlightLabel extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-pricing-table-highlight-label`)
+class C4DPricingTableHighlightLabel extends StableSelectorMixin(LitElement) {
   @property({ reflect: true })
   slot = 'highlight-label';
 
@@ -25,10 +26,10 @@ class DDSPricingTableHighlightLabel extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-highlight-label`;
+    return `${c4dPrefix}--pricing-table-highlight-label`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableHighlightLabel;
+export default C4DPricingTableHighlightLabel;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table-row.ts b/packages/web-components/src/components/pricing-table/pricing-table-row.ts
index d89e30907e4..1caacf5dd21 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table-row.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table-row.ts
@@ -7,18 +7,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredListRow from '../structured-list/structured-list-row';
+import C4DStructuredListRow from '../structured-list/structured-list-row';
 import styles from './pricing-table.scss';
 import { setColumnWidth } from './utils';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table-row`)
-class DDSPricingTableRow extends StableSelectorMixin(DDSStructuredListRow) {
+@customElement(`${c4dPrefix}-pricing-table-row`)
+class C4DPricingTableRow extends StableSelectorMixin(C4DStructuredListRow) {
   @property()
   hasAnnotations: boolean = false;
 
@@ -30,7 +31,7 @@ class DDSPricingTableRow extends StableSelectorMixin(DDSStructuredListRow) {
     let hasAnnotations = false;
     Array.from(this.children).forEach((cell) => {
       const annotation = cell.querySelector(
-        `${ddsPrefix}-pricing-table-cell-annotation`
+        `${c4dPrefix}-pricing-table-cell-annotation`
       );
       if (annotation) hasAnnotations = true;
     });
@@ -43,7 +44,7 @@ class DDSPricingTableRow extends StableSelectorMixin(DDSStructuredListRow) {
 
     if (this.hasAnnotations) {
       const toggle = this.ownerDocument.createElement(
-        'dds-pricing-table-annotation-toggle'
+        'c4d-pricing-table-annotation-toggle'
       );
       this.children[0].append(toggle);
     }
@@ -56,10 +57,10 @@ class DDSPricingTableRow extends StableSelectorMixin(DDSStructuredListRow) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table-row`;
+    return `${c4dPrefix}--pricing-table-row`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTableRow;
+export default C4DPricingTableRow;
diff --git a/packages/web-components/src/components/pricing-table/pricing-table.scss b/packages/web-components/src/components/pricing-table/pricing-table.scss
index 3cfa9d82adc..e9c4a40b7c0 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table.scss
+++ b/packages/web-components/src/components/pricing-table/pricing-table.scss
@@ -5,6 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/pricing-table/pricing-table';
-
-@include pricing-table;
+@use '@carbon/ibmdotcom-styles/scss/components/pricing-table';
diff --git a/packages/web-components/src/components/pricing-table/pricing-table.ts b/packages/web-components/src/components/pricing-table/pricing-table.ts
index b86a1d754eb..2e7abe79ca2 100644
--- a/packages/web-components/src/components/pricing-table/pricing-table.ts
+++ b/packages/web-components/src/components/pricing-table/pricing-table.ts
@@ -7,26 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { property, html } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredList from '../structured-list/structured-list';
+import C4DStructuredList from '../structured-list/structured-list';
 import styles from './pricing-table.scss';
-import DDSPricingTableHeaderCell from './pricing-table-header-cell';
-import DDSPricingTableHighlightLabel from './pricing-table-highlight-label';
-import DDSPricingTableHead from './pricing-table-head';
-import DDSPricingTableHeaderRow from './pricing-table-header-row';
+import C4DPricingTableHeaderCell from './pricing-table-header-cell';
+import C4DPricingTableHighlightLabel from './pricing-table-highlight-label';
+import C4DPricingTableHead from './pricing-table-head';
+import C4DPricingTableHeaderRow from './pricing-table-header-row';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
-@customElement(`${ddsPrefix}-pricing-table`)
-class DDSPricingTable extends HostListenerMixin(
-  StableSelectorMixin(DDSStructuredList)
+@customElement(`${c4dPrefix}-pricing-table`)
+class C4DPricingTable extends HostListenerMixin(
+  StableSelectorMixin(C4DStructuredList)
 ) {
   @property({ reflect: true, attribute: 'highlight-column' })
   highlightColumn?: number;
@@ -41,19 +40,19 @@ class DDSPricingTable extends HostListenerMixin(
   highlightGap: number = 0;
 
   /**
-   * This table's DDSPricingTableHead node.
+   * This table's C4DPricingTableHead node.
    */
-  public head?: DDSPricingTableHead;
+  public head?: C4DPricingTableHead;
 
   /**
-   * This table's DDSPricingTableHeaderRow node.
+   * This table's C4DPricingTableHeaderRow node.
    */
-  public headerRow?: DDSPricingTableHeaderRow;
+  public headerRow?: C4DPricingTableHeaderRow;
 
   /**
-   * This table's DDSPricingTableHeaderCell nodes.
+   * This table's C4DPricingTableHeaderCell nodes.
    */
-  public headerCells?: DDSPricingTableHeaderCell[];
+  public headerCells?: C4DPricingTableHeaderCell[];
 
   /**
    * Collect and store references to current header elements.
@@ -63,27 +62,27 @@ class DDSPricingTable extends HostListenerMixin(
     this.headerRow = undefined;
     this.headerCells = undefined;
 
-    const head = this.querySelector(`${ddsPrefix}-pricing-table-head`);
-    if (head instanceof DDSPricingTableHead) {
+    const head = this.querySelector(`${c4dPrefix}-pricing-table-head`);
+    if (head instanceof C4DPricingTableHead) {
       this.head = head;
     }
 
     const headerRow = head?.querySelector(
-      `${ddsPrefix}-pricing-table-header-row`
+      `${c4dPrefix}-pricing-table-header-row`
     );
-    if (headerRow instanceof DDSPricingTableHeaderRow) {
+    if (headerRow instanceof C4DPricingTableHeaderRow) {
       this.headerRow = headerRow;
       this.headerCells = Array.from(
         headerRow.children
-      ) as DDSPricingTableHeaderCell[];
+      ) as C4DPricingTableHeaderCell[];
     }
   }
 
-  protected _renderHighlightLabel(): DDSPricingTableHighlightLabel {
+  protected _renderHighlightLabel(): C4DPricingTableHighlightLabel {
     const { highlightLabel } = this;
     const element = this.ownerDocument.createElement(
-      `${ddsPrefix}-pricing-table-highlight-label`
-    ) as DDSPricingTableHighlightLabel;
+      `${c4dPrefix}-pricing-table-highlight-label`
+    ) as C4DPricingTableHighlightLabel;
     element.innerText = highlightLabel || '';
     return element;
   }
@@ -93,7 +92,7 @@ class DDSPricingTable extends HostListenerMixin(
     cells.forEach((cell) => {
       cell.classList.remove(highlightClass);
       cell
-        .querySelector(`${ddsPrefix}-pricing-table-highlight-label`)
+        .querySelector(`${c4dPrefix}-pricing-table-highlight-label`)
         ?.remove();
       this.style.marginTop = '';
     });
@@ -104,7 +103,7 @@ class DDSPricingTable extends HostListenerMixin(
     cells.forEach((cell) => cell.classList.add(highlightClass));
     if (highlightLabel) {
       const firstCell = cells[0];
-      if (firstCell instanceof DDSPricingTableHeaderCell) {
+      if (firstCell instanceof C4DPricingTableHeaderCell) {
         firstCell.prepend(this._renderHighlightLabel());
       }
       this._setHighlightGap();
@@ -113,9 +112,9 @@ class DDSPricingTable extends HostListenerMixin(
 
   protected _setHighlightGap(): void {
     const wrapper =
-      this.shadowRoot?.getElementById(DDSStructuredList.wrapperId) || this;
+      this.shadowRoot?.getElementById(C4DStructuredList.wrapperId) || this;
     (async () => {
-      return this.querySelector(`${ddsPrefix}-pricing-table-highlight-label`);
+      return this.querySelector(`${c4dPrefix}-pricing-table-highlight-label`);
     })()
       .then((value) => {
         this.highlightGap = value?.getBoundingClientRect().height || 0;
@@ -145,13 +144,13 @@ class DDSPricingTable extends HostListenerMixin(
     if (highlightColumn) {
       this._unhighlightCells(
         this.querySelectorAll(`
-        ${ddsPrefix}-pricing-table-cell,
-        ${ddsPrefix}-pricing-table-header-cell`)
+        ${c4dPrefix}-pricing-table-cell,
+        ${c4dPrefix}-pricing-table-header-cell`)
       );
       this._highlightCells(
         this.querySelectorAll(`
-        ${ddsPrefix}-pricing-table-cell:nth-child(${highlightColumn}),
-        ${ddsPrefix}-pricing-table-header-cell:nth-child(${highlightColumn})
+        ${c4dPrefix}-pricing-table-cell:nth-child(${highlightColumn}),
+        ${c4dPrefix}-pricing-table-header-cell:nth-child(${highlightColumn})
       `)
       );
     }
@@ -173,7 +172,7 @@ class DDSPricingTable extends HostListenerMixin(
   }
 
   renderInner() {
-    const { sentinelClass } = this.constructor as typeof DDSPricingTable;
+    const { sentinelClass } = this.constructor as typeof C4DPricingTable;
 
     return html`
       <section id="section" class="${`${prefix}--structured-list`}">
@@ -185,25 +184,25 @@ class DDSPricingTable extends HostListenerMixin(
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--pricing-table`;
+    return `${c4dPrefix}--pricing-table`;
   }
 
   /**
    * The name of the custom event captured when the header row's slot changes.
    */
   static get eventHeaderRowSlotchange() {
-    return DDSPricingTableHeaderRow.eventSlotChange;
+    return C4DPricingTableHeaderRow.eventSlotChange;
   }
 
   static get sentinelClass() {
-    return `${ddsPrefix}-pricing-table-sentinel`;
+    return `${c4dPrefix}-pricing-table-sentinel`;
   }
 
   static get cellSelector() {
-    return `${ddsPrefix}-pricing-table-cell, ${ddsPrefix}-pricing-table-header-cell`;
+    return `${c4dPrefix}-pricing-table-cell, ${c4dPrefix}-pricing-table-header-cell`;
   }
 
   static styles = styles;
 }
 
-export default DDSPricingTable;
+export default C4DPricingTable;
diff --git a/packages/web-components/src/components/pricing-table/utils.ts b/packages/web-components/src/components/pricing-table/utils.ts
index 7a338195183..bfb8461c8a1 100644
--- a/packages/web-components/src/components/pricing-table/utils.ts
+++ b/packages/web-components/src/components/pricing-table/utils.ts
@@ -1,21 +1,21 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2022
+ * Copyright IBM Corp. 2022, 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 DDSPricingTableHeaderRow from './pricing-table-header-row';
-import DDSPricingTableRow from './pricing-table-row';
+import C4DPricingTableHeaderRow from './pricing-table-header-row';
+import C4DPricingTableRow from './pricing-table-row';
 
 /**
  * Sets a CSS custom property on the given row that indicates the default
  * number of columns each of that row's cells row should span.
  */
 export const setColumnWidth = (
-  row: DDSPricingTableHeaderRow | DDSPricingTableRow
+  row: C4DPricingTableHeaderRow | C4DPricingTableRow
 ) => {
   const columnCount = row.children.length;
   let defaultColumnWidth: string;
diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.mdx
index 4e3ecc2c486..09b1285dbdb 100644
--- a/packages/web-components/src/components/quote/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/quote/__stories__/README.stories.mdx
@@ -1,11 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import '../quote';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Quote
 
 > 💡 Check our
@@ -31,45 +33,35 @@ import '@carbon/ibmdotcom-web-components/es/components/quote/index.js';
 ### HTML
 
 ```html
-<dds-quote inverse mark-type="double-curved">
+<c4d-quote inverse mark-type="double-curved">
   This is the main quote
-  <dds-quote-source-heading>
+  <c4d-quote-source-heading>
     This is the first line of source
-  </dds-quote-source-heading>
-  <dds-quote-source-copy>
+  </c4d-quote-source-heading>
+  <c4d-quote-source-copy>
     This is the second line of source
-  </dds-quote-source-copy>
-  <dds-quote-source-bottom-copy>
+  </c4d-quote-source-copy>
+  <c4d-quote-source-bottom-copy>
     This is the third line of source
-  </dds-quote-source-bottom-copy>
-  <dds-quote-link-with-icon slot="footer" href="https://example.com">
+  </c4d-quote-source-bottom-copy>
+  <c4d-link-with-icon slot="footer" href="https://example.com" cta-type="local">
     Link with Icon
-    <svg
-      slot="icon"
-      focusable="false"
-      preserveAspectRatio="xMidYMid meet"
-      xmlns="http://www.w3.org/2000/svg"
-      aria-hidden="true"
-      width="20"
-      height="20"
-      viewBox="0 0 20 20"
-    >
-      <path d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-    </svg>
-  </dds-quote-link-with-icon>
-</dds-quote>
+  </c4d-link-with-icon>
+</c4d-quote>
 ```
 
 ## Props
 
-<Props of="dds-quote" />
+<Props of="c4d-quote" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector     | Description |
 | ----------------------- | -------------------------- | ----------- |
-| `<dds-quote>`           | `data-autoid="dds--quote"` | Component   |
+| `<c4d-quote>`           | `data-autoid="c4d--quote"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx b/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx
index 41b94a54193..e329eefa908 100644
--- a/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/quote/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
 
@@ -18,23 +23,23 @@ Here's a quick example to get you started.
 
 ```javascript
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
-import DDSQuote from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DQuote from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 
 function App() {
   return (
-    <DDSQuote color-scheme="regular" mark-type="double-curved">
+    <C4DQuote mark-type="double-curved">
       Bringing together the technology and expertise for a new way to create
-      <DDSQuoteSourceHeading>John Doe</DDSQuoteSourceHeading>
-      <DDSQuoteSourceCopy>Senior Vice President</DDSQuoteSourceCopy>
-      <DDSQuoteSourceBottomCopy>IBM Cloud</DDSQuoteSourceBottomCopy>
-      <DDSLinkWithIcon slot="footer" href="https://example.com">
+      <C4DQuoteSourceHeading>John Doe</C4DQuoteSourceHeading>
+      <C4DQuoteSourceCopy>Senior Vice President</C4DQuoteSourceCopy>
+      <C4DQuoteSourceBottomCopy>IBM Cloud</C4DQuoteSourceBottomCopy>
+      <C4DLinkWithIcon slot="footer" href="https://example.com">
         Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-      </DDSLinkWithIcon>
-    </DDSQuote>
+      </C4DLinkWithIcon>
+    </C4DQuote>
   );
 }
 ```
@@ -45,8 +50,10 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector     | Description |
 | ----------------------- | -------------------------- | ----------- |
-| `<dds-quote>`           | `data-autoid="dds--quote"` | Component   |
+| `<cds-quote>`           | `data-autoid="cds--quote"` | Component   |
diff --git a/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx b/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx
index 9118973cae2..e813b6c3703 100644
--- a/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx
+++ b/packages/web-components/src/components/quote/__stories__/quote.stories.react.tsx
@@ -12,13 +12,13 @@ import { select } from '@storybook/addon-knobs';
 import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-import DDSQuote from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
-import DDSLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
-import DDSQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
-import DDSQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
-import DDSQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
+import C4DQuote from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote';
+import C4DLinkWithIcon from '@carbon/ibmdotcom-web-components/es/components-react/link-with-icon/link-with-icon';
+import C4DQuoteSourceHeading from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-heading';
+import C4DQuoteSourceCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-copy';
+import C4DQuoteSourceBottomCopy from '@carbon/ibmdotcom-web-components/es/components-react/quote/quote-source-bottom-copy';
 import textNullable from '../../../../.storybook/knob-text-nullable';
-import { QUOTE_TYPES, QUOTE_COLOR_SCHEMES } from '../quote';
+import { QUOTE_TYPES } from '../quote';
 import readme from './README.stories.react.mdx';
 
 const types = {
@@ -31,30 +31,19 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
-const colorSchemes = {
-  [`${QUOTE_COLOR_SCHEMES.REGULAR}`]: QUOTE_COLOR_SCHEMES.REGULAR,
-  [`${QUOTE_COLOR_SCHEMES.INVERSE}`]: QUOTE_COLOR_SCHEMES.INVERSE,
-};
-
 export const Default = (args) => {
-  const {
-    copy,
-    quoteMark,
-    sourceHeading,
-    sourceCopy,
-    sourceBottomCopy,
-    colorScheme,
-  } = args?.Quote ?? {};
+  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
+    args?.Quote ?? {};
   return (
-    <DDSQuote color-scheme={colorScheme} mark-type={quoteMark}>
+    <C4DQuote mark-type={quoteMark}>
       {copy}
-      <DDSQuoteSourceHeading>{sourceHeading}</DDSQuoteSourceHeading>
-      <DDSQuoteSourceCopy>{sourceCopy}</DDSQuoteSourceCopy>
-      <DDSQuoteSourceBottomCopy>{sourceBottomCopy}</DDSQuoteSourceBottomCopy>
-      <DDSLinkWithIcon slot="footer" href="https://example.com">
+      <C4DQuoteSourceHeading>{sourceHeading}</C4DQuoteSourceHeading>
+      <C4DQuoteSourceCopy>{sourceCopy}</C4DQuoteSourceCopy>
+      <C4DQuoteSourceBottomCopy>{sourceBottomCopy}</C4DQuoteSourceBottomCopy>
+      <C4DLinkWithIcon slot="footer" href="https://example.com">
         Link with icon <ArrowRight20 slot="icon"></ArrowRight20>
-      </DDSLinkWithIcon>
-    </DDSQuote>
+      </C4DLinkWithIcon>
+    </C4DQuote>
   );
 };
 
@@ -83,11 +72,6 @@ Default.story = {
           'Source bottom copy (source-bottom-copy slot)',
           'IBM Cloud'
         ),
-        colorScheme: select(
-          'Color Scheme (color-scheme)',
-          colorSchemes,
-          colorSchemes.regular
-        ),
       }),
     },
     propsSet: {
@@ -108,9 +92,9 @@ export default {
   title: 'Components/Quote',
   decorators: [
     (story) => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-10">{story()}</div>
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-10">{story()}</div>
         </div>
       </div>
     ),
diff --git a/packages/web-components/src/components/quote/__stories__/quote.stories.ts b/packages/web-components/src/components/quote/__stories__/quote.stories.ts
index 6433597426d..045daf22358 100644
--- a/packages/web-components/src/components/quote/__stories__/quote.stories.ts
+++ b/packages/web-components/src/components/quote/__stories__/quote.stories.ts
@@ -8,9 +8,9 @@
  */
 
 import { select } from '@storybook/addon-knobs';
-import { html } from 'lit-element';
+import { html } from 'lit';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
-import { QUOTE_TYPES, QUOTE_COLOR_SCHEMES } from '../quote';
+import { QUOTE_TYPES } from '../quote';
 import '../index';
 import '../quote-link-with-icon';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -18,26 +18,20 @@ import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.mdx';
 
 export const Default = (args) => {
-  const {
-    copy,
-    quoteMark,
-    sourceHeading,
-    sourceCopy,
-    sourceBottomCopy,
-    colorScheme,
-  } = args?.Quote ?? {};
+  const { copy, quoteMark, sourceHeading, sourceCopy, sourceBottomCopy } =
+    args?.Quote ?? {};
   return html`
-    <dds-quote color-scheme="${colorScheme}" mark-type="${quoteMark}">
+    <c4d-quote mark-type="${quoteMark}">
       ${copy}
-      <dds-quote-source-heading> ${sourceHeading} </dds-quote-source-heading>
-      <dds-quote-source-copy> ${sourceCopy} </dds-quote-source-copy>
-      <dds-quote-source-bottom-copy>
+      <c4d-quote-source-heading> ${sourceHeading} </c4d-quote-source-heading>
+      <c4d-quote-source-copy> ${sourceCopy} </c4d-quote-source-copy>
+      <c4d-quote-source-bottom-copy>
         ${sourceBottomCopy}
-      </dds-quote-source-bottom-copy>
-      <dds-quote-link-with-icon slot="footer" href="https://example.com">
+      </c4d-quote-source-bottom-copy>
+      <c4d-quote-link-with-icon slot="footer" href="https://example.com">
         Link with Icon ${ArrowRight20({ slot: 'icon' })}
-      </dds-quote-link-with-icon>
-    </dds-quote>
+      </c4d-quote-link-with-icon>
+    </c4d-quote>
   `;
 };
 
@@ -51,18 +45,13 @@ const types = {
   [`${QUOTE_TYPES.CORNER_BRACKET}`]: QUOTE_TYPES.CORNER_BRACKET,
 };
 
-const colorSchemes = {
-  [`${QUOTE_COLOR_SCHEMES.REGULAR}`]: QUOTE_COLOR_SCHEMES.REGULAR,
-  [`${QUOTE_COLOR_SCHEMES.INVERSE}`]: QUOTE_COLOR_SCHEMES.INVERSE,
-};
-
 export default {
   title: 'Components/Quote',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-11">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-11">${story()}</div>
         </div>
       </div>
     `,
@@ -94,11 +83,6 @@ export default {
           'Source bottom copy (source-bottom-copy slot)',
           'IBM Cloud'
         ),
-        colorScheme: select(
-          'Color Scheme (color-scheme)',
-          colorSchemes,
-          colorSchemes.regular
-        ),
       }),
     },
     propsSet: {
@@ -111,7 +95,6 @@ export default {
           sourceHeading: 'Lorem ipsum dolor sit amet',
           sourceCopy: 'consectetur adipiscing elit',
           sourceBottomCopy: 'IBM Cloud',
-          colorScheme: 'regular',
         },
       },
     },
diff --git a/packages/web-components/src/components/quote/__tests__/quote.test.ts b/packages/web-components/src/components/quote/__tests__/quote.test.ts
index 19143bfcf54..1f7cac56c05 100644
--- a/packages/web-components/src/components/quote/__tests__/quote.test.ts
+++ b/packages/web-components/src/components/quote/__tests__/quote.test.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 import '../quote';
 import { Default } from '../__stories__/quote.stories';
 
@@ -16,11 +16,11 @@ const template = (props?) =>
     LinkWithIcon: props,
   });
 
-describe('dds-quote', function () {
-  it('renders dds-quote properly', async function () {
+describe('c4d-quote', function () {
+  it('renders c4d-quote properly', async function () {
     render(template(), document.body);
-    await Promise.resolve(); // Update cycle for `<dds-button-group>`
-    expect(document.body.querySelector('dds-quote')).toMatchSnapshot({
+    await Promise.resolve(); // Update cycle for `<c4d-button-group>`
+    expect(document.body.querySelector('c4d-quote')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
diff --git a/packages/web-components/src/components/quote/defs.ts b/packages/web-components/src/components/quote/defs.ts
index 1a62e9fa7af..c274d838a78 100644
--- a/packages/web-components/src/components/quote/defs.ts
+++ b/packages/web-components/src/components/quote/defs.ts
@@ -38,15 +38,3 @@ export enum QUOTE_TYPES {
    */
   CORNER_BRACKET = 'corner-bracket',
 }
-
-export enum QUOTE_COLOR_SCHEMES {
-  /**
-   * Regular Scheme
-   */
-  REGULAR = 'regular',
-
-  /**
-   * Inverse Scheme
-   */
-  INVERSE = 'inverse',
-}
diff --git a/packages/web-components/src/components/quote/quote-link-with-icon.ts b/packages/web-components/src/components/quote/quote-link-with-icon.ts
index afc99a59668..4c766e1ba96 100644
--- a/packages/web-components/src/components/quote/quote-link-with-icon.ts
+++ b/packages/web-components/src/components/quote/quote-link-with-icon.ts
@@ -6,23 +6,23 @@
  * 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 { css } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { css } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSLinkWithIcon from '../link-with-icon/link-with-icon';
+import C4DLinkWithIcon from '../link-with-icon/link-with-icon';
 import styles from './quote.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Quote link with item
  *
- * @element dds-quote-link-with-icon
+ * @element c4d-quote-link-with-icon
  */
-@customElement(`${ddsPrefix}-quote-link-with-icon`)
-class DDSQuoteLinkWithIcon extends DDSLinkWithIcon {
+@customElement(`${c4dPrefix}-quote-link-with-icon`)
+class C4DQuoteLinkWithIcon extends C4DLinkWithIcon {
   static get stableSelector() {
-    return `${ddsPrefix}--quote-link-with-icon`;
+    return `${c4dPrefix}--quote-link-with-icon`;
   }
 
   // `styles` here is a `CSSResult` generated by custom WebPack loader
@@ -34,4 +34,4 @@ class DDSQuoteLinkWithIcon extends DDSLinkWithIcon {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSQuoteLinkWithIcon;
+export default C4DQuoteLinkWithIcon;
diff --git a/packages/web-components/src/components/quote/quote-source-bottom-copy.ts b/packages/web-components/src/components/quote/quote-source-bottom-copy.ts
index ab59b25b552..0dc68392f72 100644
--- a/packages/web-components/src/components/quote/quote-source-bottom-copy.ts
+++ b/packages/web-components/src/components/quote/quote-source-bottom-copy.ts
@@ -7,20 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './quote.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The source bottom copy content of quote.
  *
- * @element dds-quote-source-bottom-copy
+ * @element c4d-quote-source-bottom-copy
  */
-@customElement(`${ddsPrefix}-quote-source-bottom-copy`)
-class DDSQuoteSourceBottomCopy extends LitElement {
+@customElement(`${c4dPrefix}-quote-source-bottom-copy`)
+class C4DQuoteSourceBottomCopy extends LitElement {
   /**
    * The shadow slot this source bottom copy content should be in.
    */
@@ -36,4 +37,4 @@ class DDSQuoteSourceBottomCopy extends LitElement {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSQuoteSourceBottomCopy;
+export default C4DQuoteSourceBottomCopy;
diff --git a/packages/web-components/src/components/quote/quote-source-copy.ts b/packages/web-components/src/components/quote/quote-source-copy.ts
index 49c3118e0e4..614552b36ae 100644
--- a/packages/web-components/src/components/quote/quote-source-copy.ts
+++ b/packages/web-components/src/components/quote/quote-source-copy.ts
@@ -7,20 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './quote.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The source copy content of quote.
  *
- * @element dds-quote-source-copy
+ * @element c4d-quote-source-copy
  */
-@customElement(`${ddsPrefix}-quote-source-copy`)
-class DDSQuoteSourceCopy extends LitElement {
+@customElement(`${c4dPrefix}-quote-source-copy`)
+class C4DQuoteSourceCopy extends LitElement {
   /**
    * The shadow slot this source copy content should be in.
    */
@@ -36,4 +37,4 @@ class DDSQuoteSourceCopy extends LitElement {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSQuoteSourceCopy;
+export default C4DQuoteSourceCopy;
diff --git a/packages/web-components/src/components/quote/quote-source-heading.ts b/packages/web-components/src/components/quote/quote-source-heading.ts
index 343d121acc2..61dd65b6f96 100644
--- a/packages/web-components/src/components/quote/quote-source-heading.ts
+++ b/packages/web-components/src/components/quote/quote-source-heading.ts
@@ -7,20 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 import styles from './quote.scss';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * The source heading content of quote.
  *
- * @element dds-quote-source-heading
+ * @element c4d-quote-source-heading
  */
-@customElement(`${ddsPrefix}-quote-source-heading`)
-class DDSQuoteSourceHeading extends LitElement {
+@customElement(`${c4dPrefix}-quote-source-heading`)
+class C4DQuoteSourceHeading extends LitElement {
   /**
    * The shadow slot this source copy content should be in.
    */
@@ -36,4 +37,4 @@ class DDSQuoteSourceHeading extends LitElement {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSQuoteSourceHeading;
+export default C4DQuoteSourceHeading;
diff --git a/packages/web-components/src/components/quote/quote.scss b/packages/web-components/src/components/quote/quote.scss
index d4007132e52..6dc18fc078f 100644
--- a/packages/web-components/src/components/quote/quote.scss
+++ b/packages/web-components/src/components/quote/quote.scss
@@ -5,39 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/quote/quote';
-@import '@carbon/ibmdotcom-styles/scss/components/link-with-icon/link-with-icon';
-
-:host(#{$dds-prefix}-quote-source-bottom-copy),
-:host(#{$dds-prefix}-quote-source-copy),
-:host(#{$dds-prefix}-quote-source-heading) {
-  display: block;
-}
-
-:host(#{$dds-prefix}-quote) #{$dds-prefix}-hr {
-  margin: 1rem;
-  @include carbon--breakpoint('md') {
-    margin: 1rem 0;
-  }
-  @include carbon--breakpoint('lg') {
-    margin: 1rem 0.5rem;
-  }
-}
-
-:host(#{$dds-prefix}-quote-link-with-icon) {
-  @extend .#{$prefix}--link-with-icon;
-
-  display: inline-block;
-}
-
-:host-context(#{$dds-prefix}-quote[color-scheme='inverse'])
-  a.#{$prefix}--link-with-icon.#{$prefix}--link.#{$prefix}--link-with-icon__icon-right {
-  color: $inverse-link;
-  outline-color: $inverse-focus-ui;
-  &:hover {
-    color: $blue-40;
-  }
-  &:active {
-    color: $inverse-link;
-  }
-}
+@use '@carbon/ibmdotcom-styles/scss/components/quote';
+@use '@carbon/ibmdotcom-styles/scss/components/link-with-icon';
diff --git a/packages/web-components/src/components/quote/quote.ts b/packages/web-components/src/components/quote/quote.ts
index 40f318d27a2..35c11c4eeae 100644
--- a/packages/web-components/src/components/quote/quote.ts
+++ b/packages/web-components/src/components/quote/quote.ts
@@ -6,19 +6,18 @@
  * 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 { html, LitElement, property } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import styles from './quote.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import { QUOTE_TYPES, QUOTE_COLOR_SCHEMES } from './defs';
+import { QUOTE_TYPES } from './defs';
 import '../horizontal-rule/horizontal-rule';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-export { QUOTE_TYPES, QUOTE_COLOR_SCHEMES };
+export { QUOTE_TYPES };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 const slotExistencePropertyNames = {
   'source-heading': '_hasSourceHeading',
@@ -30,15 +29,15 @@ const slotExistencePropertyNames = {
 /**
  * Quote.
  *
- * @element dds-quote
+ * @element c4d-quote
  * @slot copy - The copy content.
  * @slot footer - The footer (CTA) content.
  * @slot source-heading - The heading content of the quote source.
  * @slot source-copy - The copy content of the quote source.
  * @slot source-bottom-copy - The copy content of the quote source placed at the bottom.
  */
-@customElement(`${ddsPrefix}-quote`)
-class DDSQuote extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-quote`)
+class C4DQuote extends StableSelectorMixin(LitElement) {
   /**
    * Defines rendered quote mark style
    * styles:
@@ -52,12 +51,6 @@ class DDSQuote extends StableSelectorMixin(LitElement) {
   @property({ reflect: true, attribute: 'mark-type' })
   markType = QUOTE_TYPES.DEFAULT;
 
-  /**
-   * Defines if the inverse class is included
-   */
-  @property({ reflect: true, attribute: 'color-scheme' })
-  colorScheme = QUOTE_COLOR_SCHEMES.REGULAR;
-
   /**
    * `true` if there is source heading.
    */
@@ -165,27 +158,13 @@ class DDSQuote extends StableSelectorMixin(LitElement) {
     const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this;
     return html`
       <div ?hidden="${!hasFooter}" class="${prefix}--quote__footer">
-        <dds-hr></dds-hr>
+        <c4d-hr></c4d-hr>
         <slot name="footer" @slotchange="${handleSlotChange}"></slot>
       </div>
     `;
   }
 
   render() {
-    if (this.colorScheme === QUOTE_COLOR_SCHEMES.INVERSE) {
-      return html`
-        <div class="${prefix}--callout__column">
-          <div class="${prefix}--callout__content">
-            <div class="${prefix}--quote__container">
-              <div class="${prefix}--quote__wrapper">
-                ${this._renderQuote()}${this._renderSource()}${this._renderFooter()}
-              </div>
-            </div>
-          </div>
-        </div>
-      `;
-    }
-
     return html`
       <div class="${prefix}--quote__container">
         <div class="${prefix}--quote__wrapper">
@@ -196,11 +175,11 @@ class DDSQuote extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--quote`;
+    return `${c4dPrefix}--quote`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSQuote;
+export default C4DQuote;
diff --git a/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx b/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx
index e9f5ec7f7b4..0bbba19bcca 100644
--- a/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/scroll-animations/__stories__/README.stories.mdx
@@ -1,6 +1,15 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
-import { cdnJs, cdnCss, cdnCssAdditional } from '../../../globals/internal/storybook-cdn';
+import {
+  cdnJs,
+  cdnCss,
+  cdnCssAdditional,
+} from '../../../globals/internal/storybook-cdn';
 
 # Fade In Out
 
@@ -15,10 +24,12 @@ import { cdnJs, cdnCss, cdnCssAdditional } from '../../../globals/internal/story
 ## Getting started
 
 ### Quick start
+
 ##### (Note: Animation effect won't be noticeable unless the page is long enough to scroll through)
 
-In order to use the `<dds-scroll-animations>` component, it needs to be wrapped around the elements that need to be targeted,
-passing in a querystring containing the exact identifiers to control which elements it should target.
+In order to use the `<cds-scroll-animations>` component, it needs to be wrapped
+around the elements that need to be targeted, passing in a querystring
+containing the exact identifiers to control which elements it should target.
 
 Here's a simple example to get started:
 
@@ -27,63 +38,68 @@ Here's a simple example to get started:
 ### JS
 
 ```javascript
-import '@carbon/ibmdotcom-web-components/es/components/scroll-animations/index.js'
+import '@carbon/ibmdotcom-web-components/es/components/scroll-animations/index.js';
 ```
 
 ### SCSS
+
 ```scss
-@import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+@use '@carbon/ibmdotcom-styles/scss/components/scroll-into-view';
 ```
 
 ## Example using CDN
 
 <Description markdown={`${cdnJs({ components: ['scroll-animations'] })}`} />
 
-<Description markdown={`${cdnCssAdditional({ components: ['scroll-animations'] })}`} />
+<Description
+  markdown={`${cdnCssAdditional({ components: ['scroll-animations'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ## Example HTML
 
 ```html
-<dds-scroll-animations animation='fade' selector-targets='.targeted-class'>
-  <div class='targeted-class'>
+<cds-scroll-animations animation="fade" selector-targets=".targeted-class">
+  <div class="targeted-class">
     <p>This content will fade in upon scrolled into view.</p>
   </div>
 
   <div>
     <p>This content is not included in the selector, it will not fade.</p>
   </div>
-</dds-scroll-animations>
+</cds-scroll-animations>
 ```
 
 ### Customizing Delay
 
-An optional custom delay can be set within targeted class in the application's CSS code as such:
+An optional custom delay can be set within targeted class in the application's
+CSS code as such:
 
 ```css
 .targeted-class {
-  --dds--fade-in-out-delay: 250ms;
+  --cds--fade-in-out-delay: 250ms;
 }
 ```
 
 ### Animation Effects
 
-There are currently nine effects that can be applied in the component.
-To use a specific animation effect, pass one of the following to the `animation` attribute (e.g. `animation='slide-left'`):
+There are currently nine effects that can be applied in the component. To use a
+specific animation effect, pass one of the following to the `animation`
+attribute (e.g. `animation='slide-left'`):
 
-* `fade`
-* `slide-up`
-* `slide-up-right`
-* `slide-right`
-* `slide-down-right`
-* `slide-down`
-* `slide-down-left`
-* `slide-left`
-* `slide-up-left`
+- `fade`
+- `slide-up`
+- `slide-up-right`
+- `slide-right`
+- `slide-down-right`
+- `slide-down`
+- `slide-down-left`
+- `slide-left`
+- `slide-up-left`
 
 ## Props
 
-<Props of="dds-scroll-animations" />
+<Props of="cds-scroll-animations" />
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.scss b/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.scss
index 27bf24a64b7..0104f7fbb0e 100644
--- a/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.scss
+++ b/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.scss
@@ -6,24 +6,24 @@
  */
 
 /* stylelint-disable selector-type-no-unknown, selector-pseudo-element-no-unknown */
-dds-logo-grid-item,
-dds-card-group-item,
-dds-cta-section-item {
+c4d-logo-grid-item,
+c4d-card-group-item,
+c4d-cta-section-item {
   &:nth-of-type(3n) {
-    --dds--fade-in-out-delay: 0;
+    --c4d--fade-in-out-delay: 0;
   }
   &:nth-of-type(3n + 1) {
-    --dds--fade-in-out-delay: 250ms;
+    --c4d--fade-in-out-delay: 250ms;
   }
   &:nth-of-type(3n + 2) {
-    --dds--fade-in-out-delay: 500ms;
+    --c4d--fade-in-out-delay: 500ms;
   }
   &:nth-of-type(3n + 3) {
-    --dds--fade-in-out-delay: 750ms;
+    --c4d--fade-in-out-delay: 750ms;
   }
 }
 
-dds-table-of-contents::part(table) {
+c4d-table-of-contents::part(table) {
   top: 0;
 }
 /* stylelint-enable selector-type-no-unknown, selector-pseudo-element-no-unknown */
diff --git a/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts b/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
index 6d325586abd..ecd1bb70d0c 100644
--- a/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
+++ b/packages/web-components/src/components/scroll-animations/__stories__/scroll-animations.stories.ts
@@ -1,42 +1,41 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
-import fadeStyles from '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+import { html } from 'lit';
+import fadeStyles from '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_index.scss';
 import fadeOptions from './scroll-animations.stories.scss';
 import '../scroll-animations';
 import readme from './README.stories.mdx';
 import { StoryContent } from '../../dotcom-shell/__stories__/data/content';
 
-const selectorTargets = `dds-content-block-heading,
-   dds-content-block-copy,
-   dds-video-player-container,
-   dds-link-list,
-   dds-leadspace-block-cta,
-   dds-content-group-heading,
-   dds-content-item-copy,
-   dds-text-cta,
-   dds-feature-card-block-large,
-   dds-image,
-   .bx--image__img,
-   dds-image,
-   dds-card-cta,
-   dds-callout-with-media,
-   dds-content-item-horizontal,
-   dds-logo-grid-item,
-   .bx--card__CTA,
-   dds-card-group-item,
-   dds-callout-quote,
-   dds-video-player,
-   dds-cta-section-copy,
-   dds-button-group,
-   dds-cta-section-item
+const selectorTargets = `c4d-content-block-heading,
+   c4d-content-block-copy,
+   c4d-video-player-container,
+   c4d-link-list,
+   c4d-leadspace-block-cta,
+   c4d-content-group-heading,
+   c4d-content-item-copy,
+   c4d-text-cta,
+   c4d-image,
+   .cds--image__img,
+   c4d-image,
+   c4d-card-cta,
+   c4d-callout-with-media,
+   c4d-content-item-row,
+   c4d-logo-grid-item,
+   .cds--card__CTA,
+   c4d-card-group-item,
+   c4d-callout-quote,
+   c4d-video-player,
+   c4d-cta-section-copy,
+   c4d-button-group,
+   c4d-cta-section-item
 `;
 
 export const FadeOnce = () => {
@@ -45,11 +44,11 @@ export const FadeOnce = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="fade"
       selector-targets="${selectorTargets}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -63,12 +62,12 @@ export const FadeWithContinuousAnimations = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="fade"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -82,12 +81,12 @@ export const SlideUp = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-up"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -101,12 +100,12 @@ export const SlideUpRight = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-up-right"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -120,12 +119,12 @@ export const SlideRight = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-right"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -139,12 +138,12 @@ export const SlideDownRight = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-down-right"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -158,12 +157,12 @@ export const SlideDown = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-down"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -177,12 +176,12 @@ export const SlideDownLeft = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-down-left"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -196,12 +195,12 @@ export const SlideLeft = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-left"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -215,12 +214,12 @@ export const SlideUpLeft = () => {
       ${fadeStyles.cssText}
       ${fadeOptions.cssText}
     </style>
-    <dds-scroll-animations
+    <c4d-scroll-animations
       animation="slide-up-left"
       selector-targets="${selectorTargets}"
       keep-animation="${true}">
       ${StoryContent()}
-    </dds-scroll-animations>
+    </c4d-scroll-animations>
   `;
 };
 
@@ -239,7 +238,7 @@ export default {
   },
   decorators: [
     (story) => html`
-      <div class="bx--grid" style="padding: 0">${story()}</div>
+      <div class="cds--grid" style="padding: 0">${story()}</div>
     `,
   ],
 };
diff --git a/packages/web-components/src/components/scroll-animations/scroll-animations-cdn.scss b/packages/web-components/src/components/scroll-animations/scroll-animations-cdn.scss
index 41cfbcd0dd0..3931f2d646b 100644
--- a/packages/web-components/src/components/scroll-animations/scroll-animations-cdn.scss
+++ b/packages/web-components/src/components/scroll-animations/scroll-animations-cdn.scss
@@ -6,4 +6,4 @@
 //
 
 // This import is used for generating the CDN artifact
-@import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/scroll-into-view';
+@use '@carbon/ibmdotcom-styles/scss/components/scroll-into-view';
diff --git a/packages/web-components/src/components/scroll-animations/scroll-animations.ts b/packages/web-components/src/components/scroll-animations/scroll-animations.ts
index 78c2ef3de22..5981c268733 100644
--- a/packages/web-components/src/components/scroll-animations/scroll-animations.ts
+++ b/packages/web-components/src/components/scroll-animations/scroll-animations.ts
@@ -7,17 +7,16 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
 import { breakpoints } from '@carbon/layout';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { forEach } from '../../globals/internal/collection-helpers';
 import { ANIMATION_TYPE } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Amount of columns used for calculation.
@@ -29,7 +28,7 @@ const colSpan = 3;
  * Function component that handles fade or slide transition for selected elements.
  *
  * @example
- * import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_scroll-into-view.scss';
+ * import '@carbon/ibmdotcom-styles/scss/components/scroll-into-view/_index.scss';
  * import '@carbon/ibmdotcom-web-components/es/components/scroll-animations/scroll-animations.js';
  *
  * As an example, the function can be called to target all instances of the
@@ -38,24 +37,24 @@ const colSpan = 3;
  * const list = '${prefix}--content-block, ${prefix}--content-group';
  *
  * For default values of 400ms and 'one and done' play:
- * <dds-scroll-animations selectorTargets="${selectorTargets}">
+ * <c4d-scroll-animations selectorTargets="${selectorTargets}">
  *  // some content
- * </dds-scroll-animations>
+ * </c4d-scroll-animations>
  *
  * With 'continuous play' option:
- * <dds-scroll-animations selector-targets="${selectorTargets}" keep-animation="true">
+ * <c4d-scroll-animations selector-targets="${selectorTargets}" keep-animation="true">
  *   // some content
- * </dds-scroll-animations>
+ * </c4d-scroll-animations>
  *
  * For custom delay time, set within targeted class in the application's CSS code as such:
  *
  * .${prefix}--content-block {
- *   --#{$dds-prefix}--scroll-animations-delay: 250ms;
+ *   --#{$c4d-prefix}--scroll-animations-delay: 250ms;
  * }
- * @element dds-scroll-animations
+ * @element c4d-scroll-animations
  */
-@customElement(`${ddsPrefix}-scroll-animations`)
-class DDSScrollAnimations extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-scroll-animations`)
+class C4DScrollAnimations extends StableSelectorMixin(LitElement) {
   /**
    * Intersection Observer that watches outer viewport.
    *
@@ -330,8 +329,8 @@ class DDSScrollAnimations extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--scroll-animations`;
+    return `${c4dPrefix}--scroll-animations`;
   }
 }
 
-export default DDSScrollAnimations;
+export default C4DScrollAnimations;
diff --git a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx
index 20f50102708..2c2b13e9ac6 100644
--- a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.mdx
@@ -5,7 +5,8 @@ import '../index';
 
 # Search with Typeahead
 
-> Search with Typeahead provides built-in search functionality that returns search suggestions depending on input.
+> Search with Typeahead provides built-in search functionality that returns
+> search suggestions depending on input.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/search-with-typeahead)
@@ -30,36 +31,48 @@ import '@carbon/ibmdotcom-web-components/es/components/search-with-typeahead/ind
 <Description markdown={`${cdnCss()}`} />
 
 ## Example HTML
-This will render a search button that can be clicked on to expand the input bar to take the full width of the container.
-Upon focusout or clicking the close button, the search bar will contract back to its single search button, ready to be activated again.
+
+This will render a search button that can be clicked on to expand the input bar
+to take the full width of the container. Upon focusout or clicking the close
+button, the search bar will contract back to its single search button, ready to
+be activated again.
+
 ```html
-<dds-search-with-typeahead></search-with-typeahead>
+<cds-search-with-typeahead></search-with-typeahead>
 ```
 
 ### Search Open On Load
-This will ensure the search input is active from the moment it renders on the page. The close functionality will still apply upon focusing out
-or clicking the close button.
+
+This will ensure the search input is active from the moment it renders on the
+page. The close functionality will still apply upon focusing out or clicking the
+close button.
+
 ```html
-<dds-search-with-typeahead active></search-with-typeahead>
+<cds-search-with-typeahead active></search-with-typeahead>
 ```
 
 ### Search Should Remain Open
-This will ensure the component will always stay open, no matter if its focused out or close button is clicked. You can combine the previous attribute
-with this one to ensure it will always be open.
+
+This will ensure the component will always stay open, no matter if its focused
+out or close button is clicked. You can combine the previous attribute with this
+one to ensure it will always be open.
+
 ```html
-<dds-search-with-typeahead should-remain-open></search-with-typeahead>
+<cds-search-with-typeahead should-remain-open></search-with-typeahead>
 ```
 
 ## Slots
 
-<Props of="dds-search-with-typeahead" />
+<Props of="cds-search-with-typeahead" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                     | Description |
 | ----------------------------- | ------------------------------------------ | ----------- |
-| `<dds-search-with-typeahead>` | `data-autoid="dds--search-with-typeahead"` | Component   |
+| `<cds-search-with-typeahead>` | `data-autoid="cds--search-with-typeahead"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx
index d4ec39d5507..0e4f687fa23 100644
--- a/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/search-with-typeahead/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
 
@@ -17,21 +22,22 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead.js';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead.js';
 
 function App() {
-  return (
-  <DDSSearchWithTypeahead></DDSSearchWithTypeahead>
-  );
+  return <C4DSearchWithTypeahead></C4DSearchWithTypeahead>;
 }
 ```
 
-To have the Search open on load, and always be active, you can render the app as follows:
-```javascript
+To have the Search open on load, and always be active, you can render the app as
+follows:
 
+```javascript
 function App() {
   return (
-		<DDSSearchWithTypeahead should-remain-open={true} active={true}></DDSSearchWithTypeahead>
+    <C4DSearchWithTypeahead
+      should-remain-open={true}
+      active={true}></C4DSearchWithTypeahead>
   );
 }
 ```
@@ -42,10 +48,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector       | Compatibility selector                    | Description |
 | ----------------------------- | ----------------------------------------- | ----------- |
-| `<dds-search-with-typeahead>` | `data-autoid="dds--search-with-typeahead` | Component   |
+| `<cds-search-with-typeahead>` | `data-autoid="cds--search-with-typeahead` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.react.tsx b/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.react.tsx
index 5aeffa87f1c..788c6ec852f 100644
--- a/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.react.tsx
+++ b/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.react.tsx
@@ -11,17 +11,17 @@ import React from 'react';
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 /* eslint-disable max-len */
 // @ts-ignore
-import DDSSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
+import C4DSearchWithTypeahead from '@carbon/ibmdotcom-web-components/es/components-react/search-with-typeahead/search-with-typeahead';
 /* eslint-enable max-len */
 import readme from './README.stories.react.mdx';
 import styles from '../../carousel/__stories__/carousel.stories.scss';
 
 export const Default = () => {
-  return <DDSSearchWithTypeahead></DDSSearchWithTypeahead>;
+  return <C4DSearchWithTypeahead></C4DSearchWithTypeahead>;
 };
 
 export const Alternate = () => {
-  return <DDSSearchWithTypeahead leadspace-search></DDSSearchWithTypeahead>;
+  return <C4DSearchWithTypeahead leadspace-search></C4DSearchWithTypeahead>;
 };
 
 Default.story = {};
@@ -29,12 +29,12 @@ Default.story = {};
 export default {
   title: 'Components/Search with typeahead',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
           <style>{styles.cssText}</style>
-          <div className="bx--grid">
-            <div className="bx--row">{story()}</div>
+          <div className="cds--grid">
+            <div className="cds--row">{story()}</div>
           </div>
         </>
       );
diff --git a/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.ts b/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.ts
index 8c8a858bfdc..92a0927300b 100644
--- a/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.ts
+++ b/packages/web-components/src/components/search-with-typeahead/__stories__/search-with-typeahead.stories.ts
@@ -1,23 +1,23 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
 import '../index';
 import readme from './README.stories.mdx';
 import styles from '../../carousel/__stories__/carousel.stories.scss';
 
 export const Default = () => html`
-  <dds-search-with-typeahead> </dds-search-with-typeahead>
+  <c4d-search-with-typeahead> </c4d-search-with-typeahead>
 `;
 
 export const Alternate = () => html`
-  <dds-search-with-typeahead leadspace-search> </dds-search-with-typeahead>
+  <c4d-search-with-typeahead leadspace-search> </c4d-search-with-typeahead>
 `;
 
 export default {
@@ -28,8 +28,8 @@ export default {
         <style>
           ${styles}
         </style>
-        <div class="bx--grid">
-          <div class="bx--row">${story()}</div>
+        <div class="cds--grid">
+          <div class="cds--row">${story()}</div>
         </div>
       `;
     },
diff --git a/packages/web-components/src/components/search-with-typeahead/__tests__/search-with-typeahead.test.ts b/packages/web-components/src/components/search-with-typeahead/__tests__/search-with-typeahead.test.ts
index 9dcb055e44b..fa43d02958a 100644
--- a/packages/web-components/src/components/search-with-typeahead/__tests__/search-with-typeahead.test.ts
+++ b/packages/web-components/src/components/search-with-typeahead/__tests__/search-with-typeahead.test.ts
@@ -7,11 +7,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import { find } from '../../../globals/internal/collection-helpers';
 import EventManager from '../../../../tests/utils/event-manager';
-import DDSSearchWithTypeahead from '../search-with-typeahead';
+import C4DSearchWithTypeahead from '../search-with-typeahead';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../search-with-typeahead';
 import '../search-with-typeahead-item';
@@ -28,26 +28,26 @@ const template = (props?) => {
     redirectUrl,
   } = props ?? {};
   return html`
-    <dds-search-with-typeahead
+    <c4d-search-with-typeahead
       ?active="${active}"
-      close-search-button-assistive-text="${ifNonNull(
+      close-search-button-assistive-text="${ifDefined(
         closeSearchButtonAssistiveText
       )}"
-      language=${ifNonNull(language)}
+      language=${ifDefined(language)}
       ?open="${open}"
-      open-search-button-assistive-text="${ifNonNull(
+      open-search-button-assistive-text="${ifDefined(
         openSearchButtonAssistiveText
       )}"
-      perform-search-button-assistive-text="${ifNonNull(
+      perform-search-button-assistive-text="${ifDefined(
         performSearchButtonAssistiveText
       )}"
-      searchPlaceholder="${ifNonNull(searchPlaceholder)}"
-      redirect-url="${ifNonNull(redirectUrl)}">
-    </dds-search-with-typeahead>
+      searchPlaceholder="${ifDefined(searchPlaceholder)}"
+      redirect-url="${ifDefined(redirectUrl)}">
+    </c4d-search-with-typeahead>
   `;
 };
 
-describe('dds-search-with-typeahead', function () {
+describe('c4d-search-with-typeahead', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
@@ -55,7 +55,7 @@ describe('dds-search-with-typeahead', function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-search-with-typeahead')
+        document.body.querySelector('c4d-search-with-typeahead')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -69,7 +69,7 @@ describe('dds-search-with-typeahead', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-search-with-typeahead')
+        document.body.querySelector('c4d-search-with-typeahead')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -90,7 +90,7 @@ describe('dds-search-with-typeahead', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-search-with-typeahead')
+        document.body.querySelector('c4d-search-with-typeahead')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
@@ -100,21 +100,21 @@ describe('dds-search-with-typeahead', function () {
       render(template(), document.body);
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       (
         search.shadowRoot!.querySelector(
-          '.bx--header__search--search'
+          '.cds--header__search--search'
         ) as HTMLElement
       ).click();
       expect(search.active).toBe(true);
       await Promise.resolve();
       // The `<input>` for the search box isn't rendered unless it's activated
       const searchInputNode = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       ) as HTMLInputElement;
       spyOn(searchInputNode, 'focus');
-      await Promise.resolve(); // `.updateComplete()` in `<dds-search-with-typeahead>` seems to take two rounds of micro-tasks
+      await Promise.resolve(); // `.updateComplete()` in `<c4d-search-with-typeahead>` seems to take two rounds of micro-tasks
       expect(searchInputNode.focus).toHaveBeenCalled();
     });
 
@@ -122,25 +122,25 @@ describe('dds-search-with-typeahead', function () {
       render(template({ active: true }), document.body);
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       const searchButtonNode = search.shadowRoot!.querySelector(
-        '.bx--header__search--search'
+        '.cds--header__search--search'
       ) as HTMLButtonElement;
       const searchInputNode = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       ) as HTMLInputElement;
       searchInputNode.value = 'search-input-node-value-foo';
       spyOn(searchButtonNode, 'focus');
       (
         search.shadowRoot!.querySelector(
-          '.bx--header__search--close'
+          '.cds--header__search--close'
         ) as HTMLElement
       ).click();
       expect(searchInputNode.value).toBe('');
       expect(search.active).toBe(false);
       await Promise.resolve();
-      await Promise.resolve(); // `.updateComplete()` in `<dds-search-with-typeahead>` seems to take two rounds of micro-tasks
+      await Promise.resolve(); // `.updateComplete()` in `<c4d-search-with-typeahead>` seems to take two rounds of micro-tasks
       expect(searchButtonNode.focus).toHaveBeenCalled();
     });
   });
@@ -157,16 +157,16 @@ describe('dds-search-with-typeahead', function () {
       );
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       spyOn(search as any, '_redirect');
       const searchInputNode = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       ) as HTMLInputElement;
       searchInputNode.value = 'search-query-foo';
       (
         search.shadowRoot!.querySelector(
-          '.bx--header__search--search'
+          '.cds--header__search--search'
         ) as HTMLElement
       ).click();
       expect((search as any)._redirect).toHaveBeenCalledWith(
@@ -184,10 +184,10 @@ describe('dds-search-with-typeahead', function () {
       );
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       const input = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       );
       spyOn(search as any, '_redirect');
       (input as HTMLInputElement).value = 'test';
@@ -200,7 +200,7 @@ describe('dds-search-with-typeahead', function () {
       await new Promise((r) => setTimeout(r, 2500));
       (
         search.shadowRoot!.querySelector(
-          'dds-search-with-typeahead-item'
+          'c4d-search-with-typeahead-item'
         ) as HTMLElement
       )?.click();
       expect((search as any)._redirect).toHaveBeenCalledWith(
@@ -212,25 +212,25 @@ describe('dds-search-with-typeahead', function () {
       render(template({ active: true }), document.body);
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       spyOn(search as any, '_redirect');
       let redirectUrlInEvent;
       events.on(
         search,
-        'dds-search-with-typeahead-beingredirected',
+        'c4d-search-with-typeahead-beingredirected',
         (event) => {
           event.preventDefault();
           redirectUrlInEvent = event.detail.redirectUrl;
         }
       );
       const searchInputNode = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       ) as HTMLInputElement;
       searchInputNode.value = 'search-query-foo';
       (
         search.shadowRoot!.querySelector(
-          '.bx--header__search--search'
+          '.cds--header__search--search'
         ) as HTMLElement
       ).click();
       expect(redirectUrlInEvent).toBe(
@@ -248,10 +248,10 @@ describe('dds-search-with-typeahead', function () {
       );
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       const input = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       );
       (input as HTMLInputElement).value = 'test';
       input?.dispatchEvent(
@@ -274,8 +274,8 @@ describe('dds-search-with-typeahead', function () {
       render(template({ active: true }), document.body);
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       spyOn(search as any, '_redirect');
       const event = new CustomEvent('submit', {
         bubbles: true,
@@ -292,10 +292,10 @@ describe('dds-search-with-typeahead', function () {
       render(template({ active: true }), document.body);
       await Promise.resolve();
       const search = document.body.querySelector(
-        'dds-search-with-typeahead'
-      ) as DDSSearchWithTypeahead;
+        'c4d-search-with-typeahead'
+      ) as C4DSearchWithTypeahead;
       const input = search.shadowRoot!.querySelector(
-        '.bx--header__search--input'
+        '.cds--header__search--input'
       );
       (input as HTMLInputElement).value = 'tes';
       input?.dispatchEvent(
@@ -306,14 +306,14 @@ describe('dds-search-with-typeahead', function () {
       );
       await new Promise((r) => setTimeout(r, 2500));
       const searchItem = search.shadowRoot!.querySelector(
-        'dds-search-with-typeahead-item'
+        'c4d-search-with-typeahead-item'
       );
       const highlightedContent = searchItem!.shadowRoot!.querySelector(
-        '.dds-ce--search-with-typeahead-item__highlighted'
+        '.c4d-ce--search-with-typeahead-item__highlighted'
       );
       expect(highlightedContent!.textContent).toBe('tes');
       const textNode = find(
-        searchItem!.shadowRoot!.querySelector('.bx--container-class')!
+        searchItem!.shadowRoot!.querySelector('.cds--container-class')!
           .childNodes,
         ({ nodeType, nodeValue }) =>
           nodeType === Node.TEXT_NODE && !/^\s*$/.test(nodeValue ?? '')
diff --git a/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown-mobile.ts b/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown-mobile.ts
index f995ccc69bb..4a1f25f8172 100644
--- a/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown-mobile.ts
+++ b/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown-mobile.ts
@@ -7,31 +7,29 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
 import Filter20 from '../../internal/vendor/@carbon/web-components/icons/filter/20.js';
-import { property, html } from 'lit-element';
-import BXSelect from '../../internal/vendor/@carbon/web-components/components/select/select.js';
-import { INPUT_SIZE } from '../../internal/vendor/@carbon/web-components/components/input/input.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import CDSSelect from '../../internal/vendor/@carbon/web-components/components/select/select.js';
+import { INPUT_SIZE } from '../../internal/vendor/@carbon/web-components/components/text-input/text-input.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { filter } from '../../globals/internal/collection-helpers';
 import styles from './search-with-typeahead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Scoped search dropdown - mobile version.
  * The dropdown to scope the search suggestions in mobile
  *
- * @element dds-scoped-search-dropdown-mobile
+ * @element c4d-scoped-search-dropdown-mobile
  * @internal
  */
-@customElement(`${ddsPrefix}-scoped-search-dropdown-mobile`)
-class DDSScopedSearchDropdownMobile extends BXSelect {
+@customElement(`${c4dPrefix}-scoped-search-dropdown-mobile`)
+class C4DScopedSearchDropdownMobile extends CDSSelect {
   /**
    * The `value` for placeholder `<option>`.
    */
@@ -47,7 +45,7 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
   private _handleInputMobile({ target }: Event) {
     const { value } = target as HTMLSelectElement;
     this.value = value;
-    const { eventSelect } = this.constructor as typeof BXSelect;
+    const { eventSelect } = this.constructor as typeof CDSSelect;
     this.dispatchEvent(
       new CustomEvent(eventSelect, {
         bubbles: true,
@@ -65,8 +63,8 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
    */
   private _renderItemsMobile(element) {
     const { selectorItem, selectorLeafItem } = this
-      .constructor as typeof BXSelect;
-    // Harvests attributes from `<bx-select-item>` and `<bx-select-item-group>`.
+      .constructor as typeof CDSSelect;
+    // Harvests attributes from `<cds-select-item>` and `<cds-select-item-group>`.
     // Does not use properties to avoid delay in attribute to property mapping, which runs in custom element reaction cycle:
     // https://html.spec.whatwg.org/multipage/custom-elements.html#custom-element-reactions
     return html`
@@ -86,9 +84,9 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
               <option
                 class="${prefix}--select-option"
                 ?disabled="${disabled}"
-                label="${ifNonNull(label ?? textContent)}"
+                label="${ifDefined(label ?? textContent)}"
                 ?selected="${selected}"
-                value="${ifNonNull(value)}">
+                value="${ifDefined(value)}">
                 ${textContent}
               </option>
             `
@@ -96,7 +94,7 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
               <optgroup
                 class="${prefix}--select-optgroup"
                 ?disabled="${disabled}"
-                label="${ifNonNull(label)}">
+                label="${ifDefined(label)}">
                 ${this._renderItemsMobile(item)}
               </optgroup>
             `;
@@ -120,7 +118,7 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
       labelText,
       placeholder,
       size,
-      validityMessage,
+      invalidText,
       value,
       _placeholderItemValueMobile: placeholderItemValue,
       _handleInputMobile: handleInput,
@@ -149,7 +147,7 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
         `
       : html`
           <div class="${prefix}--form-requirement" id="validity-message">
-            <slot name="validity-message"> ${validityMessage} </slot>
+            <slot name="validity-message"> ${invalidText} </slot>
           </div>
         `;
 
@@ -191,4 +189,4 @@ class DDSScopedSearchDropdownMobile extends BXSelect {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSScopedSearchDropdownMobile;
+export default C4DScopedSearchDropdownMobile;
diff --git a/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown.ts b/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown.ts
index 51eef7f01ac..a55f86f34db 100644
--- a/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown.ts
+++ b/packages/web-components/src/components/search-with-typeahead/scoped-search-dropdown.ts
@@ -7,10 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import {} from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import DDSDropdown from '../footer/dropdown';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import C4DDropdown from '../footer/dropdown';
 import styles from './search-with-typeahead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
@@ -20,17 +18,16 @@ export {
   DROPDOWN_TYPE,
 } from '../footer/dropdown';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Dropdown component to change search scope.
  *
- * @element dds-scoped-search-dropdown
- * @fires bx-select-selected - The custom event fired after the the dropdown value is changed upon a user gesture.
+ * @element c4d-scoped-search-dropdown
+ * @fires cds-select-selected - The custom event fired after the the dropdown value is changed upon a user gesture.
  */
-@customElement(`${ddsPrefix}-scoped-search-dropdown`)
-class DDSScopedSearchDropdown extends DDSDropdown {
+@customElement(`${c4dPrefix}-scoped-search-dropdown`)
+class C4DScopedSearchDropdown extends C4DDropdown {
   /**
    * Handles user-initiated selection of a dropdown item
    *
@@ -45,7 +42,7 @@ class DDSScopedSearchDropdown extends DDSDropdown {
           appId: item.value,
         },
       };
-      const constructor = this.constructor as typeof DDSScopedSearchDropdown;
+      const constructor = this.constructor as typeof C4DScopedSearchDropdown;
       const beforeSelectEvent = new CustomEvent(constructor.eventBeforeSelect, {
         ...init,
         cancelable: true,
@@ -69,4 +66,4 @@ class DDSScopedSearchDropdown extends DDSDropdown {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSScopedSearchDropdown;
+export default C4DScopedSearchDropdown;
diff --git a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead-item.ts b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead-item.ts
index fd88eb3d3bc..11b5de2c53e 100644
--- a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead-item.ts
+++ b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead-item.ts
@@ -7,23 +7,22 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, LitElement, TemplateResult } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { classMap } from 'lit/directives/class-map.js';
+import { html, LitElement, TemplateResult } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './search-with-typeahead.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Search result item in masthead.
  *
- * @element dds-search-with-typeahead-item
+ * @element c4d-search-with-typeahead-item
  */
-@customElement(`${ddsPrefix}-search-with-typeahead-item`)
-class DDSSearchWithTypeaheadItem extends LitElement {
+@customElement(`${c4dPrefix}-search-with-typeahead-item`)
+class C4DSearchWithTypeaheadItem extends LitElement {
   /**
    * The the search result to be shown.
    */
@@ -37,7 +36,7 @@ class DDSSearchWithTypeaheadItem extends LitElement {
 
   /**
    * `true` if this dropdown item should be highlighted.
-   * If `true`, parent `<dds-search-with-typeahead>` selects/deselects this dropdown item upon keyboard interaction.
+   * If `true`, parent `<c4d-search-with-typeahead>` selects/deselects this dropdown item upon keyboard interaction.
    *
    * @private
    */
@@ -78,7 +77,7 @@ class DDSSearchWithTypeaheadItem extends LitElement {
         }
 
         const highlightedResult = html`
-          <span class="${ddsPrefix}-ce--search-with-typeahead-item__highlighted"
+          <span class="${c4dPrefix}-ce--search-with-typeahead-item__highlighted"
             >${searchQueryString}</span
           >
         `;
@@ -118,4 +117,4 @@ class DDSSearchWithTypeaheadItem extends LitElement {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSSearchWithTypeaheadItem;
+export default C4DSearchWithTypeaheadItem;
diff --git a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.scss b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.scss
index f520970a08b..0397f9cbf7a 100644
--- a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.scss
+++ b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead/search-with-typeahead';
+@use '@carbon/ibmdotcom-styles/scss/components/search-with-typeahead';
diff --git a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts
index d7166bc2937..4e1d8fb0829 100644
--- a/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts
+++ b/packages/web-components/src/components/search-with-typeahead/search-with-typeahead.ts
@@ -7,20 +7,20 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { html, property, query } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { html } from 'lit';
+import { property, query } from 'lit/decorators.js';
 import Close20 from '../../internal/vendor/@carbon/web-components/icons/close/20.js';
 import Search20 from '../../internal/vendor/@carbon/web-components/icons/search/20.js';
-import BXDropdown, {
+import CDSDropdown, {
   DROPDOWN_KEYBOARD_ACTION,
 } from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown.js';
-import BXDropdownItem from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown-item.js';
+import CDSDropdownItem from '../../internal/vendor/@carbon/web-components/components/dropdown/dropdown-item.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
 import { baseFontSize, breakpoints } from '@carbon/layout';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import SearchTypeaheadAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/SearchTypeahead/SearchTypeahead';
 import { forEach, indexOf } from '../../globals/internal/collection-helpers';
 import styles from './search-with-typeahead.scss';
@@ -28,28 +28,27 @@ import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import './search-with-typeahead-item';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 const gridBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
 
 /**
  * Search with Typeahead
  *
- * @element dds-search-with-typeahead
+ * @element c4d-search-with-typeahead
  * @csspart open-button The button to show the search box.
  * @csspart close-button The button to hide the search box.
  * @csspart search-input The input box for search.
- * @fires dds-search-with-typeahead-beingredirected
+ * @fires c4d-search-with-typeahead-beingredirected
  *   The custom event fired before the page is being redirected to the search result page.
  *   Cancellation of this event stops the user-initiated action of redirection.
- * @fires dds-search-with-typeahead-input
+ * @fires c4d-search-with-typeahead-input
  *   The name of the custom event fired after the search content is changed upon a user gesture.
- * @fires dds-search-with-typeahead-toggled
+ * @fires c4d-search-with-typeahead-toggled
  *   The name of the custom event fired after this search box is toggled upon a user gesture.
  */
-@customElement(`${ddsPrefix}-search-with-typeahead`)
-class DDSSearchWithTypeahead extends HostListenerMixin(
-  StableSelectorMixin(BXDropdown)
+@customElement(`${c4dPrefix}-search-with-typeahead`)
+class C4DSearchWithTypeahead extends HostListenerMixin(
+  StableSelectorMixin(CDSDropdown)
 ) {
   // eslint-disable-next-line class-methods-use-this
   async getResults(searchQuery) {
@@ -161,7 +160,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    */
   protected _handleClickInner(event: MouseEvent) {
     if (
-      (event.target as HTMLElement).closest('.bx--header__search--input') ===
+      (event.target as HTMLElement).closest('.cds--header__search--input') ===
       event.target
     ) {
       this._handleUserInitiatedToggle();
@@ -172,8 +171,8 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
       }
     } else {
       const item = (event.target as Element).closest(
-        (this.constructor as typeof BXDropdown).selectorItem
-      ) as BXDropdownItem;
+        (this.constructor as typeof CDSDropdown).selectorItem
+      ) as CDSDropdownItem;
       if (this.shadowRoot!.contains(item) && !item.hasAttribute('groupTitle')) {
         this._handleUserInitiatedSelectItem(item);
       }
@@ -211,7 +210,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
     }
     const { _searchInputNode: searchInputNode } = this;
     const { eventInput, eventToggle } = this
-      .constructor as typeof DDSSearchWithTypeahead;
+      .constructor as typeof C4DSearchWithTypeahead;
     if (!active && searchInputNode.value) {
       searchInputNode.value = '';
       this.dispatchEvent(
@@ -253,7 +252,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    */
   private _handleKeyInput(event: KeyboardEvent) {
     if (
-      (this.constructor as typeof DDSSearchWithTypeahead).getAction(
+      (this.constructor as typeof C4DSearchWithTypeahead).getAction(
         event.key
       ) === DROPDOWN_KEYBOARD_ACTION.NONE
     ) {
@@ -273,7 +272,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
     targetHref,
   }: { targetQuery?: string; targetHref?: string } = {}) {
     const { eventBeforeRedirect, eventInput } = this
-      .constructor as typeof DDSSearchWithTypeahead;
+      .constructor as typeof C4DSearchWithTypeahead;
     const { language, redirectUrl } = this;
     const [primary, country] = language.split('-');
     const tokens = redirectUrl.split('?');
@@ -382,9 +381,13 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
     this.removeAttribute('unfocused');
 
     const items = this.shadowRoot!.querySelectorAll(
-      (this.constructor as typeof BXDropdown).selectorItem
+      (this.constructor as typeof CDSDropdown).selectorItem
     );
     items.forEach((e) => {
+      if (this.leadspaceSearch) {
+        e.setAttribute('alternate', '');
+      }
+
       if (e.hasAttribute('highlighted')) {
         this.setAttribute('unfocused', '');
       }
@@ -392,7 +395,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
 
     this.dispatchEvent(
       new CustomEvent(
-        (this.constructor as typeof DDSSearchWithTypeahead).eventInput,
+        (this.constructor as typeof C4DSearchWithTypeahead).eventInput,
         {
           bubbles: true,
           composed: true,
@@ -427,7 +430,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
     ) {
       const scopeBarWidth = (
         this.shadowRoot?.querySelector(
-          'dds-scoped-search-dropdown'
+          'c4d-scoped-search-dropdown'
         ) as HTMLElement
       ).offsetWidth;
       (this._searchSuggestions?.parentElement as HTMLElement)?.setAttribute(
@@ -449,11 +452,11 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    */
   private _handleSubmit(event: Event) {
     const { eventBeforeRedirect } = this
-      .constructor as typeof DDSSearchWithTypeahead;
-    const { selectorItemHighlighted } = this.constructor as typeof BXDropdown;
+      .constructor as typeof C4DSearchWithTypeahead;
+    const { selectorItemHighlighted } = this.constructor as typeof CDSDropdown;
     const highlightedItem = this.shadowRoot!.querySelector(
       selectorItemHighlighted
-    ) as BXDropdownItem;
+    ) as CDSDropdownItem;
     if (highlightedItem || !this._searchInputNode.value) {
       event.preventDefault();
     }
@@ -473,7 +476,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
     }
   }
 
-  protected _handleUserInitiatedSelectItem(item?: BXDropdownItem) {
+  protected _handleUserInitiatedSelectItem(item?: CDSDropdownItem) {
     if (item) {
       this._searchInputNode.value = (item as unknown as any).text;
       this._handleUserInitiatedRedirect({
@@ -488,7 +491,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    */
   protected _handleKeypressInner(event: KeyboardEvent) {
     const { key } = event;
-    const action = (this.constructor as typeof BXDropdown).getAction(key);
+    const action = (this.constructor as typeof CDSDropdown).getAction(key);
     if (!this.open) {
       switch (action) {
         case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
@@ -501,10 +504,10 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
       switch (action) {
         case DROPDOWN_KEYBOARD_ACTION.TRIGGERING:
           {
-            const constructor = this.constructor as typeof BXDropdown;
+            const constructor = this.constructor as typeof CDSDropdown;
             const highlightedItem = this.shadowRoot!.querySelector(
               constructor.selectorItemHighlighted
-            ) as BXDropdownItem;
+            ) as CDSDropdownItem;
             if (highlightedItem) {
               this._handleUserInitiatedSelectItem(highlightedItem);
             } else {
@@ -533,7 +536,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    * @param direction `-1` to navigate backward, `1` to navigate forward.
    */
   protected _navigate(direction: number) {
-    const constructor = this.constructor as typeof DDSSearchWithTypeahead;
+    const constructor = this.constructor as typeof C4DSearchWithTypeahead;
     const items = this.shadowRoot!.querySelectorAll(constructor.selectorItem);
     const highlightedItem = this.shadowRoot!.querySelector(
       constructor.selectorItemHighlighted
@@ -552,7 +555,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
       nextIndex = 0;
     }
     forEach(items, (item, i) => {
-      (item as BXDropdownItem).highlighted = i === nextIndex;
+      (item as CDSDropdownItem).highlighted = i === nextIndex;
     });
 
     this.setAttribute('unfocused', '');
@@ -591,7 +594,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
         autocomplete="off"
         aria-controls="result-list"
         aria-autocomplete="list"
-        aria-label="${ifNonNull(searchLabel)}"
+        aria-label="${ifDefined(searchLabel)}"
         @input="${handleInput}"
         @keydown="${handleKeyInput}"
         @keypress="${handleKeyInput}" />
@@ -605,8 +608,8 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    */
   protected _handleClickItem(event: MouseEvent) {
     const item = (event.target as Element).closest(
-      (this.constructor as typeof BXDropdown).selectorItem
-    ) as BXDropdownItem;
+      (this.constructor as typeof CDSDropdown).selectorItem
+    ) as CDSDropdownItem;
     if (this.shadowRoot!.contains(item)) {
       this._handleUserInitiatedSelectItem(item);
     }
@@ -659,40 +662,38 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
                 value="${this.scopeLabel}" />
             `
           : ''}
-
         <div
           role="combobox"
           class="${classes}"
           aria-haspopup="listbox"
           aria-owns="result-list"
           aria-expanded="${Boolean(this.active)}"
-          aria-label="${ifNonNull(searchLabel)}"
+          aria-label="${ifDefined(searchLabel)}"
           @click=${handleClickInner}
           @keydown="${handleKeydownInner}"
           @keypress="${handleKeypressInner}">
           ${this.scopeParameters
             ? html`
-                <dds-scoped-search-dropdown value="${this.appId}">
+                <c4d-scoped-search-dropdown value="${this.appId}">
                   ${this.scopeParameters.map(
                     (scope) => html`
-                      <bx-dropdown-item value="${scope.appId}"
-                        >${scope.name}</bx-dropdown-item
+                      <cds-dropdown-item value="${scope.appId}"
+                        >${scope.name}</cds-dropdown-item
                       >
                     `
                   )}
-                </dds-scoped-search-dropdown>
-
-                <dds-scoped-search-dropdown-mobile value="${this.appId}">
+                </c4d-scoped-search-dropdown>
+                <c4d-scoped-search-dropdown-mobile value="${this.appId}">
                   ${this.scopeParameters.map(
                     (scope) => html`
-                      <bx-select-item
+                      <cds-select-item
                         label="${scope.name}"
                         value="${scope.appId}"
-                        >${scope.name}</bx-select-item
+                        >${scope.name}</cds-select-item
                       >
                     `
                   )}
-                </dds-scoped-search-dropdown-mobile>
+                </c4d-scoped-search-dropdown-mobile>
               `
             : ``}
           ${this._renderTriggerContent()}
@@ -703,28 +704,28 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
                   class="react-autosuggest__suggestions-container">
                   <ul
                     role="listbox"
-                    class="${ddsPrefix}-ce__search__list react-autosuggest__suggestions-list">
+                    class="${c4dPrefix}-ce__search__list react-autosuggest__suggestions-list">
                     ${this.searchResults &&
                     this.searchResults.map(
                       (item) =>
                         html`
-                          <dds-search-with-typeahead-item
-                            text="${item}"></dds-search-with-typeahead-item>
+                          <c4d-search-with-typeahead-item
+                            text="${item}"></c4d-search-with-typeahead-item>
                         `
                     )}
                     ${this.groupedResults &&
                     this.groupedResults.map(
                       (group) =>
                         html`
-                          <dds-search-with-typeahead-item
+                          <c4d-search-with-typeahead-item
                             groupTitle
-                            text="${group.title}"></dds-search-with-typeahead-item>
+                            text="${group.title}"></c4d-search-with-typeahead-item>
                           ${group.items.map(
                             (item) =>
                               html`
-                                <dds-search-with-typeahead-item
+                                <c4d-search-with-typeahead-item
                                   text="${item.name}"
-                                  href="${item.href}"></dds-search-with-typeahead-item>
+                                  href="${item.href}"></c4d-search-with-typeahead-item>
                               `
                           )}
                         `
@@ -850,7 +851,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
   updated(changedProperties) {
     if (changedProperties.has('searchResults')) {
       const titleElements = this.shadowRoot?.querySelectorAll(
-        'dds-search-with-typeahead-item[groupTitle]'
+        'c4d-search-with-typeahead-item[groupTitle]'
       );
       titleElements?.forEach((e) => {
         e.previousElementSibling?.setAttribute('lastBeforeGroup', '');
@@ -865,7 +866,7 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
       ) {
         const scopeBarWidth = (
           this.shadowRoot?.querySelector(
-            'dds-scoped-search-dropdown'
+            'c4d-scoped-search-dropdown'
           ) as HTMLElement
         ).offsetWidth;
         (this._searchSuggestions?.parentElement as HTMLElement)?.setAttribute(
@@ -955,14 +956,14 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
               class="react-autosuggest__suggestions-container">
               <ul
                 role="listbox"
-                class="${ddsPrefix}-ce__search__list react-autosuggest__suggestions-list">
+                class="${c4dPrefix}-ce__search__list react-autosuggest__suggestions-list">
                 ${this.searchResults &&
                 this.searchResults.map(
                   (item) =>
                     html`
-                      <dds-search-with-typeahead-item
+                      <c4d-search-with-typeahead-item
                         text="${item}"
-                        @click=${handleClickItem}></dds-search-with-typeahead-item>
+                        @click=${handleClickItem}></c4d-search-with-typeahead-item>
                     `
                 )}
               </ul>
@@ -975,14 +976,14 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    * A selector that will return highlighted search result items.
    */
   static get selectorItemHighlighted() {
-    return `${ddsPrefix}-search-with-typeahead-item[highlighted]`;
+    return `${c4dPrefix}-search-with-typeahead-item[highlighted]`;
   }
 
   /**
    * A selector that will return search result items.
    */
   static get selectorItem() {
-    return `${ddsPrefix}-search-with-typeahead-item`;
+    return `${c4dPrefix}-search-with-typeahead-item`;
   }
 
   /**
@@ -990,14 +991,14 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    * Cancellation of this event stops the user-initiated action of redirection.
    */
   static get eventBeforeRedirect() {
-    return `${ddsPrefix}-search-with-typeahead-beingredirected`;
+    return `${c4dPrefix}-search-with-typeahead-beingredirected`;
   }
 
   /**
    * The name of the custom event fired after the search content is changed upon a user gesture.
    */
   static get eventInput() {
-    return `${ddsPrefix}-search-with-typeahead-input`;
+    return `${c4dPrefix}-search-with-typeahead-input`;
   }
 
   /**
@@ -1011,22 +1012,22 @@ class DDSSearchWithTypeahead extends HostListenerMixin(
    * The name of the custom event captured to retrieve the custom typeahead API results.
    */
   static get eventCustomResults() {
-    return `${ddsPrefix}-custom-typeahead-api-results`;
+    return `${c4dPrefix}-custom-typeahead-api-results`;
   }
 
   /**
    * The name of the custom event fired after this search box is toggled upon a user gesture.
    */
   static get eventToggle() {
-    return `${ddsPrefix}-search-with-typeahead-toggled`;
+    return `${c4dPrefix}-search-with-typeahead-toggled`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--search-with-typeahead`;
+    return `${c4dPrefix}--search-with-typeahead`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSSearchWithTypeahead;
+export default C4DSearchWithTypeahead;
diff --git a/packages/web-components/src/components/search/search.scss b/packages/web-components/src/components/search/search.scss
index 6e7c1cb1233..e2b8549c198 100644
--- a/packages/web-components/src/components/search/search.scss
+++ b/packages/web-components/src/components/search/search.scss
@@ -1,27 +1,29 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 '@carbon/web-components/scss/components/search/search';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-
-:host(#{$dds-prefix}-search) {
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/theme' as *;
+@use '@carbon/web-components/src/components/search/search' as *;
+// @use '@carbon/styles/scss/components/search/search';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+//
+:host(#{$c4d-prefix}-search) {
   @extend :host(#{$prefix}-search);
 
   &[size='sm'] {
     @extend .#{$prefix}--search--sm;
   }
 
-  &[size='lg'] {
-    @extend .#{$prefix}--search--lg;
+  &[size='md'] {
+    @extend .#{$prefix}--search--md;
   }
 
-  &[size='xl'] {
-    @extend .#{$prefix}--search--xl;
+  &[size='lg'] {
+    @extend .#{$prefix}--search--lg;
   }
 
   &[color-scheme='light'] {
@@ -36,6 +38,6 @@
    * while this replacement color passes testing.
    */
   ::placeholder {
-    color: $text-02;
+    color: $text-secondary;
   }
 }
diff --git a/packages/web-components/src/components/search/search.ts b/packages/web-components/src/components/search/search.ts
index dbfa391adb1..2326ca518a3 100644
--- a/packages/web-components/src/components/search/search.ts
+++ b/packages/web-components/src/components/search/search.ts
@@ -7,31 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {} from 'lit-element';
-import BXSearch from '../../internal/vendor/@carbon/web-components/components/search/search.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import {} from 'lit';
+import CDSSearch from '../../internal/vendor/@carbon/web-components/components/search/search.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './search.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-export { SEARCH_COLOR_SCHEME } from '../../internal/vendor/@carbon/web-components/components/search/search.js';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Expressive search.
  *
- * @element dds-search
+ * @element c4d-search
  */
-@customElement(`${ddsPrefix}-search`)
-class DDSSearch extends BXSearch {
+@customElement(`${c4dPrefix}-search`)
+class C4DSearch extends CDSSearch {
   /**
    * The name of the custom event fired after the search content is changed upon a user gesture.
    */
   static get eventInput() {
-    return `${ddsPrefix}-search-input`;
+    return `${prefix}-search-input`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
-export default DDSSearch;
+console.warn(
+  'The c4d-search component has been deprecated in favor of the @carbon/web-components search component. ' +
+    'See @carbon/web-components search component documentation for more information.'
+);
+
+export default C4DSearch;
diff --git a/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx b/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx
index ec6056a0695..48555b9256c 100644
--- a/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/structured-list/__stories__/README.stories.mdx
@@ -28,55 +28,55 @@ import '@carbon/ibmdotcom-web-components/es/components/structured-list/index.js'
 ### HTML
 
 ```html
-<dds-structured-list>
-  <dds-structured-list-head>
-    <dds-structured-list-header-row>
-      <dds-structured-list-header-cell
-        >Column A</dds-structured-list-header-cell
+<cds-structured-list>
+  <cds-structured-list-head>
+    <cds-structured-list-header-row>
+      <cds-structured-list-header-cell
+        >Column A</cds-structured-list-header-cell
       >
-      <dds-structured-list-header-cell
-        >Column B</dds-structured-list-header-cell
+      <cds-structured-list-header-cell
+        >Column B</cds-structured-list-header-cell
       >
-      <dds-structured-list-header-cell
-        >Column C</dds-structured-list-header-cell
+      <cds-structured-list-header-cell
+        >Column C</cds-structured-list-header-cell
       >
-    </dds-structured-list-header-row>
-  </dds-structured-list-head>
-  <dds-structured-list-body>
-    <dds-structured-list-row>
-      <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-      <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-      <dds-structured-list-cell>
+    </cds-structured-list-header-row>
+  </cds-structured-list-head>
+  <cds-structured-list-body>
+    <cds-structured-list-row>
+      <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+      <cds-structured-list-cell>Row 1</cds-structured-list-cell>
+      <cds-structured-list-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </dds-structured-list-cell>
-    </dds-structured-list-row>
-    <dds-structured-list-row>
-      <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-      <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-      <dds-structured-list-cell>
+      </cds-structured-list-cell>
+    </cds-structured-list-row>
+    <cds-structured-list-row>
+      <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+      <cds-structured-list-cell>Row 2</cds-structured-list-cell>
+      <cds-structured-list-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </dds-structured-list-cell>
-    </dds-structured-list-row>
-    <dds-structured-list-row>
-      <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-      <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-      <dds-structured-list-cell>
+      </cds-structured-list-cell>
+    </cds-structured-list-row>
+    <cds-structured-list-row>
+      <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+      <cds-structured-list-cell>Row 3</cds-structured-list-cell>
+      <cds-structured-list-cell>
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna,
         finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel
         euismod dignissim.
-      </dds-structured-list-cell>
-    </dds-structured-list-row>
-  </dds-structured-list-body>
-</dds-structured-list>
+      </cds-structured-list-cell>
+    </cds-structured-list-row>
+  </cds-structured-list-body>
+</cds-structured-list>
 ```
 
 ## Props
 
-<Props of="dds-structured-list" />
+<Props of="cds-structured-list" />
 
 ## Stable selectors
 
@@ -86,6 +86,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<dds-structured-list>` | `data-autoid="dds--structured-list"` | Component   |
+| `<cds-structured-list>` | `data-autoid="cds--structured-list"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx b/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx
index 82f2b5d3b8c..850519cbf51 100644
--- a/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/structured-list/__stories__/README.stories.react.mdx
@@ -17,70 +17,70 @@ Here's a quick example to get you started.
 ### JS (via import)
 
 ```javascript
-import DDSStructuredList from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list';
-import DDSStructuredListHead from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-head';
-import DDSStructuredListHeaderRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-row';
-import DDSStructuredListHeaderCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-cell';
-import DDSStructuredListBody from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-body';
-import DDSStructuredListGroup from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-group';
-import DDSStructuredListRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-row';
-import DDSStructuredListCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-cell';
+import C4DStructuredList from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list';
+import C4DStructuredListHead from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-head';
+import C4DStructuredListHeaderRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-row';
+import C4DStructuredListHeaderCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-cell';
+import C4DStructuredListBody from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-body';
+import C4DStructuredListGroup from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-group';
+import C4DStructuredListRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-row';
+import C4DStructuredListCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-cell';
 
 function App = () => (
-  <DDSStructuredList>
-    <DDSStructuredListHead>
-      <DDSStructuredListHeaderRow>
-        <DDSStructuredListHeaderCell>Column A</DDSStructuredListHeaderCell>
-        <DDSStructuredListHeaderCell>Column B</DDSStructuredListHeaderCell>
-        <DDSStructuredListHeaderCell>Column C</DDSStructuredListHeaderCell>
-        <DDSStructuredListHeaderCell>Column D</DDSStructuredListHeaderCell>
-      </DDSStructuredListHeaderRow>
-    </DDSStructuredListHead>
-    <DDSStructuredListBody>
-      <DDSStructuredListGroup title="Group 1">
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-          <DDSStructuredListCell>
+  <C4DStructuredList>
+    <C4DStructuredListHead>
+      <C4DStructuredListHeaderRow>
+        <C4DStructuredListHeaderCell>Column A</C4DStructuredListHeaderCell>
+        <C4DStructuredListHeaderCell>Column B</C4DStructuredListHeaderCell>
+        <C4DStructuredListHeaderCell>Column C</C4DStructuredListHeaderCell>
+        <C4DStructuredListHeaderCell>Column D</C4DStructuredListHeaderCell>
+      </C4DStructuredListHeaderRow>
+    </C4DStructuredListHead>
+    <C4DStructuredListBody>
+      <C4DStructuredListGroup title="Group 1">
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListGroup>
-      <DDSStructuredListGroup title="Group 2">
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListGroup>
+      <C4DStructuredListGroup title="Group 2">
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListGroup>
-      <DDSStructuredListGroup title="Group 3">
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListGroup>
+      <C4DStructuredListGroup title="Group 3">
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListGroup>
-    </DDSStructuredListBody>
-  </DDSStructuredList>
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListGroup>
+    </C4DStructuredListBody>
+  </C4DStructuredList>
 );
 ```
 
@@ -96,6 +96,6 @@ to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector               | Description |
 | ----------------------- | ------------------------------------ | ----------- |
-| `<dds-structured-list>` | `data-autoid="dds--structured-list"` | Component   |
+| `<cds-structured-list>` | `data-autoid="cds--structured-list"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.react.tsx b/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.react.tsx
index 62de107afd4..e88fd206a5a 100644
--- a/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.react.tsx
+++ b/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.react.tsx
@@ -9,113 +9,128 @@
 
 import React from 'react';
 
-import DDSStructuredList from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list';
-import DDSStructuredListHead from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-head';
+import C4DStructuredList from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list';
+import C4DStructuredListHead from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-head';
 /* eslint-disable max-len */
-import DDSStructuredListHeaderRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-row';
-import DDSStructuredListHeaderCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-cell';
+import C4DStructuredListHeaderRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-row';
+import C4DStructuredListHeaderCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-header-cell';
 /* eslint-enable max-len */
-import DDSStructuredListBody from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-body';
-import DDSStructuredListGroup from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-group';
-import DDSStructuredListRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-row';
-import DDSStructuredListCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-cell';
+import C4DStructuredListBody from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-body';
+import C4DStructuredListGroup from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-group';
+import C4DStructuredListRow from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-row';
+import C4DStructuredListCell from '@carbon/ibmdotcom-web-components/es/components-react/structured-list/structured-list-cell';
 
 import textNullable from '../../../../.storybook/knob-text-nullable';
 import readme from './README.stories.react.mdx';
 
-export const Default = args => {
+export const Default = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return (
-    <DDSStructuredList
+    <C4DStructuredList
       col-span-1={colSpan1 ?? ''}
       col-span-2={colSpan2 ?? ''}
       col-span-3={colSpan3 ?? ''}
       col-span-4={colSpan4 ?? ''}>
-      <DDSStructuredListHead>
-        <DDSStructuredListHeaderRow>
-          <DDSStructuredListHeaderCell>Column A</DDSStructuredListHeaderCell>
-          <DDSStructuredListHeaderCell>Column B</DDSStructuredListHeaderCell>
-          <DDSStructuredListHeaderCell>Column C</DDSStructuredListHeaderCell>
-          <DDSStructuredListHeaderCell>Column D</DDSStructuredListHeaderCell>
-        </DDSStructuredListHeaderRow>
-      </DDSStructuredListHead>
-      <DDSStructuredListBody>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-          <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-          <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-          <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListBody>
-    </DDSStructuredList>
+      <C4DStructuredListHead>
+        <C4DStructuredListHeaderRow>
+          <C4DStructuredListHeaderCell>Column A</C4DStructuredListHeaderCell>
+          <C4DStructuredListHeaderCell>Column B</C4DStructuredListHeaderCell>
+          <C4DStructuredListHeaderCell>Column C</C4DStructuredListHeaderCell>
+          <C4DStructuredListHeaderCell>Column D</C4DStructuredListHeaderCell>
+        </C4DStructuredListHeaderRow>
+      </C4DStructuredListHead>
+      <C4DStructuredListBody>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+          <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+          <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+          <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListBody>
+    </C4DStructuredList>
   );
 };
 
-export const WithRowHeaders = args => {
+export const WithRowHeaders = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return (
-    <DDSStructuredList
+    <C4DStructuredList
       col-span-1={colSpan1 ?? ''}
       col-span-2={colSpan2 ?? ''}
       col-span-3={colSpan3 ?? ''}
       col-span-4={colSpan4 ?? ''}>
-      <DDSStructuredListBody>
-        <DDSStructuredListRow>
-          <DDSStructuredListHeaderCell scope="row">Row 1</DDSStructuredListHeaderCell>
-          <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListHeaderCell scope="row">Row 2</DDSStructuredListHeaderCell>
-          <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListHeaderCell scope="row">Row 3</DDSStructuredListHeaderCell>
-          <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-            augue. Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListBody>
-    </DDSStructuredList>
+      <C4DStructuredListBody>
+        <C4DStructuredListRow>
+          <C4DStructuredListHeaderCell scope="row">
+            Row 1
+          </C4DStructuredListHeaderCell>
+          <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListHeaderCell scope="row">
+            Row 2
+          </C4DStructuredListHeaderCell>
+          <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListHeaderCell scope="row">
+            Row 3
+          </C4DStructuredListHeaderCell>
+          <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListBody>
+    </C4DStructuredList>
   );
 };
 
@@ -123,95 +138,122 @@ WithRowHeaders.story = {
   name: 'With row headers',
 };
 
-export const WithSubheaders = args => {
+export const WithSubheaders = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return (
-    <DDSStructuredList
+    <C4DStructuredList
       col-span-1={colSpan1 ?? ''}
       col-span-2={colSpan2 ?? ''}
       col-span-3={colSpan3 ?? ''}
       col-span-4={colSpan4 ?? ''}>
-      <DDSStructuredListBody>
-        <DDSStructuredListGroup title="Group 1">
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 1</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 2</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 3</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-        </DDSStructuredListGroup>
-        <DDSStructuredListGroup title="Group 2">
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 1</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 2</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 3</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-        </DDSStructuredListGroup>
-        <DDSStructuredListGroup title="Group 3">
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 1</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 1</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 2</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 2</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-          <DDSStructuredListRow>
-            <DDSStructuredListHeaderCell scope="row">Row 3</DDSStructuredListHeaderCell>
-            <DDSStructuredListCell>Row 3</DDSStructuredListCell>
-            <DDSStructuredListCell>
-              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed, aliquet bibendum
-              augue. Aenean posuere sem vel euismod dignissim.
-            </DDSStructuredListCell>
-          </DDSStructuredListRow>
-        </DDSStructuredListGroup>
-      </DDSStructuredListBody>
-    </DDSStructuredList>
+      <C4DStructuredListBody>
+        <C4DStructuredListGroup title="Group 1">
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 1
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 2
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 3
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+        </C4DStructuredListGroup>
+        <C4DStructuredListGroup title="Group 2">
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 1
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 2
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 3
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+        </C4DStructuredListGroup>
+        <C4DStructuredListGroup title="Group 3">
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 1
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 1</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 2
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 2</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+          <C4DStructuredListRow>
+            <C4DStructuredListHeaderCell scope="row">
+              Row 3
+            </C4DStructuredListHeaderCell>
+            <C4DStructuredListCell>Row 3</C4DStructuredListCell>
+            <C4DStructuredListCell>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+              magna, finibus id tortor sed, aliquet bibendum augue. Aenean
+              posuere sem vel euismod dignissim.
+            </C4DStructuredListCell>
+          </C4DStructuredListRow>
+        </C4DStructuredListGroup>
+      </C4DStructuredListBody>
+    </C4DStructuredList>
   );
 };
 
@@ -219,37 +261,46 @@ WithSubheaders.story = {
   name: 'With subheaders',
 };
 
-export const WithComplexContent = args => {
+export const WithComplexContent = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return (
-    <DDSStructuredList
+    <C4DStructuredList
       col-span-1={colSpan1 ?? ''}
       col-span-2={colSpan2 ?? ''}
       col-span-3={colSpan3 ?? ''}
       col-span-4={colSpan4 ?? ''}>
-      <DDSStructuredListHead>
-        <DDSStructuredListHeaderRow>
-          <DDSStructuredListHeaderCell>Product Name</DDSStructuredListHeaderCell>
-        </DDSStructuredListHeaderRow>
-      </DDSStructuredListHead>
-      <DDSStructuredListBody>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell tooltip="Tooltip text">Cell with tooltip</DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell icon="checkmark">Cell with icon</DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell tags="Merchandising Offer, Secondary Tag, Other">Cell with tags</DDSStructuredListCell>
-        </DDSStructuredListRow>
-        <DDSStructuredListRow>
-          <DDSStructuredListCell>
-            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui magna, finibus id tortor sed,aliquet bibendum augue.
-            Aenean posuere sem vel euismod dignissim.
-          </DDSStructuredListCell>
-        </DDSStructuredListRow>
-      </DDSStructuredListBody>
-    </DDSStructuredList>
+      <C4DStructuredListHead>
+        <C4DStructuredListHeaderRow>
+          <C4DStructuredListHeaderCell>
+            Product Name
+          </C4DStructuredListHeaderCell>
+        </C4DStructuredListHeaderRow>
+      </C4DStructuredListHead>
+      <C4DStructuredListBody>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell tooltip="Tooltip text">
+            Cell with tooltip
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell icon="checkmark">
+            Cell with icon
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell tags="Merchandising Offer, Secondary Tag, Other">
+            Cell with tags
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+        <C4DStructuredListRow>
+          <C4DStructuredListCell>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
+            magna, finibus id tortor sed,aliquet bibendum augue. Aenean posuere
+            sem vel euismod dignissim.
+          </C4DStructuredListCell>
+        </C4DStructuredListRow>
+      </C4DStructuredListBody>
+    </C4DStructuredList>
   );
 };
 
@@ -271,10 +322,10 @@ export default {
     },
   },
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-lg-16">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-lg-16">{story()}</div>
         </div>
       </div>
     ),
diff --git a/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.ts b/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.ts
index 65676f01732..0be5eade9a8 100644
--- a/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.ts
+++ b/packages/web-components/src/components/structured-list/__stories__/structured-list.stories.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import readme from './README.stories.mdx';
 import '../index';
 import textNullable from '../../../../.storybook/knob-text-nullable';
@@ -21,119 +21,119 @@ export const Default = (args) => {
         overflow-x: hidden;
       }
     </style>
-    <dds-structured-list
+    <c4d-structured-list
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
       col-span-4="${colSpan4 ?? ''}">
-      <dds-structured-list-head>
-        <dds-structured-list-header-row>
-          <dds-structured-list-header-cell
-            >Column A</dds-structured-list-header-cell
+      <c4d-structured-list-head>
+        <c4d-structured-list-header-row>
+          <c4d-structured-list-header-cell
+            >Column A</c4d-structured-list-header-cell
           >
-          <dds-structured-list-header-cell
-            >Column B</dds-structured-list-header-cell
+          <c4d-structured-list-header-cell
+            >Column B</c4d-structured-list-header-cell
           >
-          <dds-structured-list-header-cell
-            >Column C</dds-structured-list-header-cell
+          <c4d-structured-list-header-cell
+            >Column C</c4d-structured-list-header-cell
           >
-          <dds-structured-list-header-cell
-            >Column D</dds-structured-list-header-cell
+          <c4d-structured-list-header-cell
+            >Column D</c4d-structured-list-header-cell
           >
-        </dds-structured-list-header-row>
-      </dds-structured-list-head>
-      <dds-structured-list-body>
-        <dds-structured-list-row>
-          <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-          <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-          <dds-structured-list-cell>
+        </c4d-structured-list-header-row>
+      </c4d-structured-list-head>
+      <c4d-structured-list-body>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+          <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-          <dds-structured-list-cell>
+          </c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-          <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-          <dds-structured-list-cell>
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+          <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-          <dds-structured-list-cell>
+          </c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-          <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-          <dds-structured-list-cell>
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+          <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-          <dds-structured-list-cell>
+          </c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-      </dds-structured-list-body>
-    </dds-structured-list>
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+      </c4d-structured-list-body>
+    </c4d-structured-list>
   `;
 };
 
 export const WithRowHeaders = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return html`
-    <dds-structured-list
+    <c4d-structured-list
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
       col-span-4="${colSpan4 ?? ''}">
-      <dds-structured-list-body>
-        <dds-structured-list-row>
-          <dds-structured-list-header-cell scope="row"
-            >Row 1</dds-structured-list-header-cell
+      <c4d-structured-list-body>
+        <c4d-structured-list-row>
+          <c4d-structured-list-header-cell scope="row"
+            >Row 1</c4d-structured-list-header-cell
           >
-          <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-          <dds-structured-list-cell>
+          <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-header-cell scope="row"
-            >Row 2</dds-structured-list-header-cell
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-header-cell scope="row"
+            >Row 2</c4d-structured-list-header-cell
           >
-          <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-          <dds-structured-list-cell>
+          <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-header-cell scope="row"
-            >Row 3</dds-structured-list-header-cell
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-header-cell scope="row"
+            >Row 3</c4d-structured-list-header-cell
           >
-          <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-          <dds-structured-list-cell>
+          <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed, aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-      </dds-structured-list-body>
-    </dds-structured-list>
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+      </c4d-structured-list-body>
+    </c4d-structured-list>
   `;
 };
 
@@ -144,120 +144,120 @@ WithRowHeaders.story = {
 export const WithSubheaders = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return html`
-    <dds-structured-list
+    <c4d-structured-list
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
       col-span-4="${colSpan4 ?? ''}">
-      <dds-structured-list-body>
-        <dds-structured-list-group title="Group 1">
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 1</dds-structured-list-header-cell
+      <c4d-structured-list-body>
+        <c4d-structured-list-group title="Group 1">
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 1</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 2</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 2</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 3</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 3</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-        </dds-structured-list-group>
-        <dds-structured-list-group
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+        </c4d-structured-list-group>
+        <c4d-structured-list-group
           title="Group 2 Lorem ipsum dolor sit amet consectetur, adipiscing elit vestibulum tempus dis, varius dignissim et aliquam.">
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 1</dds-structured-list-header-cell
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 1</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 2</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 2</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 3</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 3</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-        </dds-structured-list-group>
-        <dds-structured-list-group title="Group 3">
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 1</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+        </c4d-structured-list-group>
+        <c4d-structured-list-group title="Group 3">
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 1</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 1</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 1</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 2</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 2</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 2</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 2</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-          <dds-structured-list-row>
-            <dds-structured-list-header-cell scope="row"
-              >Row 3</dds-structured-list-header-cell
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+          <c4d-structured-list-row>
+            <c4d-structured-list-header-cell scope="row"
+              >Row 3</c4d-structured-list-header-cell
             >
-            <dds-structured-list-cell>Row 3</dds-structured-list-cell>
-            <dds-structured-list-cell>
+            <c4d-structured-list-cell>Row 3</c4d-structured-list-cell>
+            <c4d-structured-list-cell>
               Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
               magna, finibus id tortor sed, aliquet bibendum augue. Aenean
               posuere sem vel euismod dignissim.
-            </dds-structured-list-cell>
-          </dds-structured-list-row>
-        </dds-structured-list-group>
-      </dds-structured-list-body>
-    </dds-structured-list>
+            </c4d-structured-list-cell>
+          </c4d-structured-list-row>
+        </c4d-structured-list-group>
+      </c4d-structured-list-body>
+    </c4d-structured-list>
   `;
 };
 
@@ -268,43 +268,43 @@ WithSubheaders.story = {
 export const WithComplexContent = (args) => {
   const { colSpan1, colSpan2, colSpan3, colSpan4 } = args?.StructuredList ?? {};
   return html`
-    <dds-structured-list
+    <c4d-structured-list
       col-span-1="${colSpan1 ?? ''}"
       col-span-2="${colSpan2 ?? ''}"
       col-span-3="${colSpan3 ?? ''}"
       col-span-4="${colSpan4 ?? ''}">
-      <dds-structured-list-head>
-        <dds-structured-list-header-row>
-          <dds-structured-list-header-cell
-            >Product Name</dds-structured-list-header-cell
+      <c4d-structured-list-head>
+        <c4d-structured-list-header-row>
+          <c4d-structured-list-header-cell
+            >Product Name</c4d-structured-list-header-cell
           >
-        </dds-structured-list-header-row>
-      </dds-structured-list-head>
-      <dds-structured-list-body>
-        <dds-structured-list-row>
-          <dds-structured-list-cell tooltip="Tooltip text">
+        </c4d-structured-list-header-row>
+      </c4d-structured-list-head>
+      <c4d-structured-list-body>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell tooltip="Tooltip text">
             Cell with tooltip
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-cell icon="checkmark">
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-cell
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell icon="checkmark">
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell
             tags="Merchandising Offer, Secondary Tag, Other">
             Cell with tags
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-        <dds-structured-list-row>
-          <dds-structured-list-cell>
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+        <c4d-structured-list-row>
+          <c4d-structured-list-cell>
             Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc dui
             magna, finibus id tortor sed,aliquet bibendum augue. Aenean posuere
             sem vel euismod dignissim.
-          </dds-structured-list-cell>
-        </dds-structured-list-row>
-      </dds-structured-list-body>
-    </dds-structured-list>
+          </c4d-structured-list-cell>
+        </c4d-structured-list-row>
+      </c4d-structured-list-body>
+    </c4d-structured-list>
   `;
 };
 
@@ -327,9 +327,9 @@ export default {
   },
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-16">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-16">${story()}</div>
         </div>
       </div>
     `,
diff --git a/packages/web-components/src/components/structured-list/structured-list-body.ts b/packages/web-components/src/components/structured-list/structured-list-body.ts
index f3af4c5cf18..0f036888b0d 100644
--- a/packages/web-components/src/components/structured-list/structured-list-body.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-body.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXStructuredListBody from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-body.js';
-import {} from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSStructuredListBody from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-body.js';
+import {} from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListBody
  *
- * @element dds-structured-list-body
+ * @element c4d-structured-list-body
  */
-@customElement(`${ddsPrefix}-structured-list-body`)
-class DDSStructuredListBody extends BXStructuredListBody {
+@customElement(`${c4dPrefix}-structured-list-body`)
+class C4DStructuredListBody extends CDSStructuredListBody {
   connectedCallback() {
     super.connectedCallback();
   }
@@ -30,4 +30,4 @@ class DDSStructuredListBody extends BXStructuredListBody {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListBody;
+export default C4DStructuredListBody;
diff --git a/packages/web-components/src/components/structured-list/structured-list-cell.ts b/packages/web-components/src/components/structured-list/structured-list-cell.ts
index 9ab1e65ac17..1e88e97c590 100644
--- a/packages/web-components/src/components/structured-list/structured-list-cell.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-cell.ts
@@ -7,29 +7,28 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXStructuredListCell from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-cell.js';
-import { property, html } from 'lit-element';
+import CDSStructuredListCell from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-cell.js';
+import { html } from 'lit';
+import { property } from 'lit/decorators.js';
 import Info16 from '../../internal/vendor/@carbon/web-components/icons/information/16.js';
 import Checkmark20 from '../../internal/vendor/@carbon/web-components/icons/checkmark/20.js';
 import Error20 from '../../internal/vendor/@carbon/web-components/icons/error/20.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import DDSStructuredListGroup from './structured-list-group';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import C4DStructuredListGroup from './structured-list-group';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
-import settings from 'carbon-components/es/globals/js/settings';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListCell
  *
- * @element dds-structured-list-cell
+ * @element c4d-structured-list-cell
  */
-@customElement(`${ddsPrefix}-structured-list-cell`)
-class DDSStructuredListCell extends BXStructuredListCell {
-  parentGroup: DDSStructuredListGroup | null = this.closest(
-    `${ddsPrefix}-structured-list-group`
+@customElement(`${c4dPrefix}-structured-list-cell`)
+class C4DStructuredListCell extends CDSStructuredListCell {
+  parentGroup: C4DStructuredListGroup | null = this.closest(
+    `${c4dPrefix}-structured-list-group`
   );
 
   @property({ attribute: 'aria-label', reflect: true })
@@ -70,7 +69,8 @@ class DDSStructuredListCell extends BXStructuredListCell {
       ${tags!
         .split(',')
         .map(
-          (tag) => html` <bx-tag size="sm" type="green">${tag.trim()}</bx-tag> `
+          (tag) =>
+            html` <cds-tag size="sm" type="green">${tag.trim()}</cds-tag> `
         )}
     `;
   }
@@ -79,12 +79,12 @@ class DDSStructuredListCell extends BXStructuredListCell {
     const { tooltipText: tooltip } = this;
 
     return html`
-      <bx-tooltip-icon
+      <cds-tooltip-icon
         alignment="start"
         body-text="${tooltip}"
         direction="right">
         ${Info16()}
-      </bx-tooltip-icon>
+      </cds-tooltip-icon>
     `;
   }
 
@@ -110,4 +110,4 @@ class DDSStructuredListCell extends BXStructuredListCell {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListCell;
+export default C4DStructuredListCell;
diff --git a/packages/web-components/src/components/structured-list/structured-list-group.ts b/packages/web-components/src/components/structured-list/structured-list-group.ts
index d5348a2bd8b..fdd52f09f51 100644
--- a/packages/web-components/src/components/structured-list/structured-list-group.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-group.ts
@@ -7,24 +7,25 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSStructuredList from './structured-list';
+import C4DStructuredList from './structured-list';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListGroup
  *
- * @element dds-structured-list-group
+ * @element c4d-structured-list-group
  */
-@customElement(`${ddsPrefix}-structured-list-group`)
-class DDSStructuredListGroup extends StableSelectorMixin(LitElement) {
-  _parentTable: DDSStructuredList | null = this.closest(
-    `${ddsPrefix}-structured-list`
+@customElement(`${c4dPrefix}-structured-list-group`)
+class C4DStructuredListGroup extends StableSelectorMixin(LitElement) {
+  _parentTable: C4DStructuredList | null = this.closest(
+    `${c4dPrefix}-structured-list`
   );
 
   @property({ attribute: 'title' })
@@ -54,4 +55,4 @@ class DDSStructuredListGroup extends StableSelectorMixin(LitElement) {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListGroup;
+export default C4DStructuredListGroup;
diff --git a/packages/web-components/src/components/structured-list/structured-list-head.ts b/packages/web-components/src/components/structured-list/structured-list-head.ts
index b4563b51c4c..6fd5ac95dd5 100644
--- a/packages/web-components/src/components/structured-list/structured-list-head.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-head.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXStructuredListHead from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-head.js';
-import {} from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSStructuredListHead from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-head.js';
+import {} from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListHead
  *
- * @element dds-structured-list-head
+ * @element c4d-structured-list-head
  */
-@customElement(`${ddsPrefix}-structured-list-head`)
-class DDSStructuredListHead extends BXStructuredListHead {
+@customElement(`${c4dPrefix}-structured-list-head`)
+class C4DStructuredListHead extends CDSStructuredListHead {
   connectedCallback() {
     super.connectedCallback();
   }
@@ -30,4 +30,4 @@ class DDSStructuredListHead extends BXStructuredListHead {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListHead;
+export default C4DStructuredListHead;
diff --git a/packages/web-components/src/components/structured-list/structured-list-header-cell.ts b/packages/web-components/src/components/structured-list/structured-list-header-cell.ts
index 011eac4154a..1fc75756af2 100644
--- a/packages/web-components/src/components/structured-list/structured-list-header-cell.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-header-cell.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXStructuredListHeaderCell from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-header-cell.js';
-import {} from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSStructuredListHeaderCell from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-header-cell.js';
+import {} from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListHeaderCell
  *
- * @element dds-structured-list-header-cell
+ * @element c4d-structured-list-header-cell
  */
-@customElement(`${ddsPrefix}-structured-list-header-cell`)
-class DDSStructuredListHeaderCell extends BXStructuredListHeaderCell {
+@customElement(`${c4dPrefix}-structured-list-header-cell`)
+class C4DStructuredListHeaderCell extends CDSStructuredListHeaderCell {
   connectedCallback() {
     super.connectedCallback();
   }
@@ -30,4 +30,4 @@ class DDSStructuredListHeaderCell extends BXStructuredListHeaderCell {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListHeaderCell;
+export default C4DStructuredListHeaderCell;
diff --git a/packages/web-components/src/components/structured-list/structured-list-header-row.ts b/packages/web-components/src/components/structured-list/structured-list-header-row.ts
index eaf2a9ff5a2..83ba105c74b 100644
--- a/packages/web-components/src/components/structured-list/structured-list-header-row.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-header-row.ts
@@ -7,21 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXStructuredListHeaderRow from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-header-row.js';
-import {} from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSStructuredListHeaderRow from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-header-row.js';
+import {} from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListHeaderRow
  *
- * @element dds-structured-list-header-row
+ * @element c4d-structured-list-header-row
  */
-@customElement(`${ddsPrefix}-structured-list-header-row`)
-class DDSStructuredListHeaderRow extends BXStructuredListHeaderRow {
+@customElement(`${c4dPrefix}-structured-list-header-row`)
+class C4DStructuredListHeaderRow extends CDSStructuredListHeaderRow {
   connectedCallback() {
     super.connectedCallback();
   }
@@ -30,4 +30,4 @@ class DDSStructuredListHeaderRow extends BXStructuredListHeaderRow {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListHeaderRow;
+export default C4DStructuredListHeaderRow;
diff --git a/packages/web-components/src/components/structured-list/structured-list-row.ts b/packages/web-components/src/components/structured-list/structured-list-row.ts
index 8e070e30827..00c24ef0f98 100644
--- a/packages/web-components/src/components/structured-list/structured-list-row.ts
+++ b/packages/web-components/src/components/structured-list/structured-list-row.ts
@@ -7,22 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import BXStructuredListRow from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-row.js';
-import {} from 'lit-element';
-import { html } from 'lit-html';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import CDSStructuredListRow from '../../internal/vendor/@carbon/web-components/components/structured-list/structured-list-row.js';
+import { html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredListRow
  *
- * @element dds-structured-list-row
+ * @element c4d-structured-list-row
  */
-@customElement(`${ddsPrefix}-structured-list-row`)
-class DDSStructuredListRow extends BXStructuredListRow {
+@customElement(`${c4dPrefix}-structured-list-row`)
+class C4DStructuredListRow extends CDSStructuredListRow {
   connectedCallback() {
     super.connectedCallback();
   }
@@ -40,4 +39,4 @@ class DDSStructuredListRow extends BXStructuredListRow {
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredListRow;
+export default C4DStructuredListRow;
diff --git a/packages/web-components/src/components/structured-list/structured-list.scss b/packages/web-components/src/components/structured-list/structured-list.scss
index 8643623264f..86d92775154 100644
--- a/packages/web-components/src/components/structured-list/structured-list.scss
+++ b/packages/web-components/src/components/structured-list/structured-list.scss
@@ -5,6 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/structured-list/structured-list';
-
-@include structured-list;
+@use '@carbon/ibmdotcom-styles/scss/components/structured-list';
diff --git a/packages/web-components/src/components/structured-list/structured-list.ts b/packages/web-components/src/components/structured-list/structured-list.ts
index e7d79e96e07..b5df392b566 100644
--- a/packages/web-components/src/components/structured-list/structured-list.ts
+++ b/packages/web-components/src/components/structured-list/structured-list.ts
@@ -7,23 +7,21 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { LitElement, html } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './structured-list.scss';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * StructuredList
  *
- * @element dds-structured-list
+ * @element c4d-structured-list
  */
-@customElement(`${ddsPrefix}-structured-list`)
-class DDSStructuredList extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-structured-list`)
+class C4DStructuredList extends StableSelectorMixin(LitElement) {
   private _listMutationObserver = new MutationObserver(
     this._setColumnSpans.bind(this)
   );
@@ -43,7 +41,7 @@ class DDSStructuredList extends StableSelectorMixin(LitElement) {
 
   protected _resetIntersectionObserver() {
     this._scrollObserver.disconnect();
-    const { cellSelector } = this.constructor as typeof DDSStructuredList;
+    const { cellSelector } = this.constructor as typeof C4DStructuredList;
     this.querySelectorAll(cellSelector).forEach((cell) => {
       this._scrollObserver.observe(cell);
     });
@@ -113,7 +111,7 @@ class DDSStructuredList extends StableSelectorMixin(LitElement) {
   }
 
   protected renderInner() {
-    const { wrapperId } = this.constructor as typeof DDSStructuredList;
+    const { wrapperId } = this.constructor as typeof C4DStructuredList;
     return html`
       <section id="${wrapperId}" class="${prefix}--structured-list">
         <slot></slot>
@@ -126,11 +124,11 @@ class DDSStructuredList extends StableSelectorMixin(LitElement) {
   }
 
   static get cellSelector() {
-    return `${ddsPrefix}-structured-list-cell, ${ddsPrefix}-structured-list-header-cell`;
+    return `${c4dPrefix}-structured-list-cell, ${c4dPrefix}-structured-list-header-cell`;
   }
 
   static styles = styles;
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSStructuredList;
+export default C4DStructuredList;
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx
index 3a9f660f28d..ebb8fdb1fd4 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.mdx
@@ -1,10 +1,12 @@
 import { Props, Description } from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
-import { cdnJs, cdnCss, cdnCssAdditional } from '../../../globals/internal/storybook-cdn';
+import {
+  cdnJs,
+  cdnCss,
+  cdnCssAdditional,
+} from '../../../globals/internal/storybook-cdn';
 
-
-
-# `<dds-table-of-contents>`
+# `<cds-table-of-contents>`
 
 > Table of contents display pre-defined sections of the page and provide a
 > convenient way to navigate to those sections. It also sticks to the top of the
@@ -20,7 +22,9 @@ import { cdnJs, cdnCss, cdnCssAdditional } from '../../../globals/internal/story
 
 Here's a quick example to get you started.
 
-> 💡 `bx--tableofcontents__contents` class in the content `<div>` ensures the `<h3>` is visible by navigating to a hashbang URL (e.g. `https://yoursite.com/yourpage#2`).
+> 💡 `cds--tableofcontents__contents` class in the content `<div>` ensures the
+> `<h3>` is visible by navigating to a hashbang URL (e.g.
+> `https://yoursite.com/yourpage#2`).
 
 ## Example using imports
 
@@ -33,8 +37,8 @@ import '@carbon/ibmdotcom-web-components/es/components/table-of-contents/index.j
 ### SCSS
 
 ```scss
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars';
+@use '@carbon/ibmdotcom-styles/scss/components/tableofcontents';
 
 body {
   scroll-behaviour: smooth;
@@ -42,21 +46,24 @@ body {
 }
 ```
 
-> 💡 `scroll-behaviour: smooth` ensures that scrolling triggered by `table-of-contents` is smooth.
+> 💡 `scroll-behaviour: smooth` ensures that scrolling triggered by
+> `table-of-contents` is smooth.
 
 ## Example using CDN
 
 <Description markdown={`${cdnJs({ components: ['table-of-contents'] })}`} />
 
-<Description markdown={`${cdnCssAdditional({ components: ['table-of-contents'] })}`} />
+<Description
+  markdown={`${cdnCssAdditional({ components: ['table-of-contents'] })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ## Example HTML
 
 ```html
-<dds-table-of-contents>
-  <div class="bx--tableofcontents__contents">
+<cds-table-of-contents>
+  <div class="cds--tableofcontents__contents">
     <a name="1" data-title="Section - 1"></a>
     <h3>Section - 1</h3>
     <p>Section 1 content</p>
@@ -67,14 +74,14 @@ body {
     <h3>Section - 3</h3>
     <p>Section 3 content</p>
   </div>
-</dds-table-of-contents>
+</cds-table-of-contents>
 ```
 
 ### Horizontal variation
 
 ```html
-<dds-table-of-contents toc-layout="horizontal">
-  <div class="bx--tableofcontents-horizontal__contents">
+<cds-table-of-contents toc-layout="horizontal">
+  <div class="cds--tableofcontents-horizontal__contents">
     <a name="1" data-title="Section - 1"></a>
     <h3>Section - 1</h3>
     <p>Section 1 content</p>
@@ -85,51 +92,56 @@ body {
     <h3>Section - 3</h3>
     <p>Section 3 content</p>
   </div>
-</dds-table-of-contents>
+</cds-table-of-contents>
 ```
 
 ## Harvesting the table of contents
 
-`<dds-table-of-contents>` automatically harvests the table of contents by looking for elements with the `name` attribute.
-The titles in the table of contents are harvested from the text content in the element by default.
-You can add `data-title` attribute to the elements to change the titles.
+`<cds-table-of-contents>` automatically harvests the table of contents by
+looking for elements with the `name` attribute. The titles in the table of
+contents are harvested from the text content in the element by default. You can
+add `data-title` attribute to the elements to change the titles.
 
 ## Adjusting the position of `<select>` box
 
-`<dds-table-of-contents>` uses `<select>` as the table if the browser viewport has narrow width.
-It sticks at the very top by default, but you can adjust the position via CSS.
-This is useful e.g. when you use `<dds-table-of-contents>` with ibm.com masthead.
+`<cds-table-of-contents>` uses `<select>` as the table if the browser viewport
+has narrow width. It sticks at the very top by default, but you can adjust the
+position via CSS. This is useful e.g. when you use `<cds-table-of-contents>`
+with ibm.com masthead.
 
 ```css
-dds-table-of-contents::part(table) {
+cds-table-of-contents::part(table) {
   top: 3rem;
 }
 ```
 
 ## Reharvest the table of contents
 
-Use a dispatched event to trigger a reharvesting of the anchor tags within the Table of Contents.
+Use a dispatched event to trigger a reharvesting of the anchor tags within the
+Table of Contents.
 
 ```js
 document.dispatchEvent(
-  new CustomEvent('dds-table-of-contents-reharvest', {
+  new CustomEvent('cds-table-of-contents-reharvest', {
     bubbles: true,
     cancelable: true,
-    composed: true
+    composed: true,
   })
 );
 ```
 
 ## Slots
 
-<Props of="dds-table-of-contents" />
+<Props of="cds-table-of-contents" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector   | Compatibility selector               | Description |
 | ------------------------- | ------------------------------------ | ----------- |
-| `<dds-table-of-contents>` | `data-autoid="dds--tableofcontents"` | Component   |
+| `<cds-table-of-contents>` | `data-autoid="cds--tableofcontents"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx
index 3a34e5e3e80..13ea9d0b54f 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/table-of-contents/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
 
@@ -17,23 +22,23 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents.js';
+import C4DTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents.js';
 
 function App() {
   return (
-  <DDSTableOfContents>
-    <div class="bx--tableofcontents__contents">
-      <a name="1" data-title="Section - 1"></a>
-      <h3>Section - 1</h3>
-      <p>Section 1 content</p>
-      <a name="2" data-title="Section - 2"></a>
-      <h3>Section - 2</h3>
-      <p>Section 2 content</p>
-      <a name="3" data-title="Section - 3"></a>
-      <h3>Section - 3</h3>
-      <p>Section 3 content</p>
-    </div>
-  </DDSTableOfContents>
+    <C4DTableOfContents>
+      <div class="cds--tableofcontents__contents">
+        <a name="1" data-title="Section - 1"></a>
+        <h3>Section - 1</h3>
+        <p>Section 1 content</p>
+        <a name="2" data-title="Section - 2"></a>
+        <h3>Section - 2</h3>
+        <p>Section 2 content</p>
+        <a name="3" data-title="Section - 3"></a>
+        <h3>Section - 3</h3>
+        <p>Section 3 content</p>
+      </div>
+    </C4DTableOfContents>
   );
 }
 ```
@@ -43,37 +48,39 @@ function App() {
 ```javascript
 function App() {
   return (
-  <DDSTableOfContents layout={'horizontal'}>
-    <div class="bx--tableofcontents__contents">
-      <a name="1" data-title="Section - 1"></a>
-      <h3>Section - 1</h3>
-      <p>Section 1 content</p>
-      <a name="2" data-title="Section - 2"></a>
-      <h3>Section - 2</h3>
-      <p>Section 2 content</p>
-      <a name="3" data-title="Section - 3"></a>
-      <h3>Section - 3</h3>
-      <p>Section 3 content</p>
-    </div>
-  </DDSTableOfContents>
+    <C4DTableOfContents layout={'horizontal'}>
+      <div class="cds--tableofcontents__contents">
+        <a name="1" data-title="Section - 1"></a>
+        <h3>Section - 1</h3>
+        <p>Section 1 content</p>
+        <a name="2" data-title="Section - 2"></a>
+        <h3>Section - 2</h3>
+        <p>Section 2 content</p>
+        <a name="3" data-title="Section - 3"></a>
+        <h3>Section - 3</h3>
+        <p>Section 3 content</p>
+      </div>
+    </C4DTableOfContents>
   );
 }
 ```
 
 ## Harvesting the table of contents
 
-`<dds-table-of-contents>` automatically harvests the table of contents by looking for `<a>`s with their `name` attribute.
-The titles in the table of contents are harvested from the text content in `<a>` by default.
-You can add `data-title` attribute to the `<a>`s to change the titles.
+`<cds-table-of-contents>` automatically harvests the table of contents by
+looking for `<a>`s with their `name` attribute. The titles in the table of
+contents are harvested from the text content in `<a>` by default. You can add
+`data-title` attribute to the `<a>`s to change the titles.
 
 ## Adjusting the position of `<select>` box
 
-`<dds-table-of-contents>` uses `<select>` as the table if the browser viewport has narrow width.
-It sticks at the very top by default, but you can adjust the position via CSS.
-This is useful e.g. when you use `<dds-table-of-contents>` with ibm.com masthead.
+`<cds-table-of-contents>` uses `<select>` as the table if the browser viewport
+has narrow width. It sticks at the very top by default, but you can adjust the
+position via CSS. This is useful e.g. when you use `<cds-table-of-contents>`
+with ibm.com masthead.
 
 ```css
-dds-table-of-contents::part(table) {
+cds-table-of-contents::part(table) {
   top: 3rem;
 }
 ```
@@ -84,10 +91,12 @@ dds-table-of-contents::part(table) {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-table-of-contents>`        | N/A                    | Component   |
+| Web Components selector   | Compatibility selector | Description |
+| ------------------------- | ---------------------- | ----------- |
+| `<cds-table-of-contents>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/content.ts b/packages/web-components/src/components/table-of-contents/__stories__/content.ts
index aad22be3ae5..263c7a601f2 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/content.ts
+++ b/packages/web-components/src/components/table-of-contents/__stories__/content.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html } from 'lit-element';
+import { html } from 'lit';
 
 export const headings = [
   'Forward thinkers',
@@ -24,7 +24,7 @@ export const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. C
 const generateCopySections = (n) => Array(n).map(() => html` <p>${LOREM}</p> `);
 
 const content = ({ contentClass, items }) => html`
-  <div class="${contentClass} dds-ce-demo--table-of-contents">
+  <div class="${contentClass} c4d-ce-demo--table-of-contents">
     ${items.map(
       ({ heading, copy }, i) =>
         html`
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.react.tsx b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.react.tsx
index 9df2963c6ec..76aa0995a88 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.react.tsx
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.react.tsx
@@ -11,56 +11,58 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
+import C4DHorizontalRule from '@carbon/ibmdotcom-web-components/es/components-react/horizontal-rule/horizontal-rule';
 import { boolean, select, text } from '@storybook/addon-knobs';
 // @ts-ignore
-import DDSTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
-import DDSLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
+import C4DTableOfContents from '@carbon/ibmdotcom-web-components/es/components-react/table-of-contents/table-of-contents';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkListItem from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list-item';
 import ArrowLeft20 from '@carbon/icons-react/es/arrow--left/20.js';
 import content, { headings, LOREM } from './wrapper-content';
 import readme from './README.stories.react.mdx';
 import styles from './table-of-contents.stories.scss';
 import { ICON_PLACEMENT } from '../../../globals/defs';
 
-export const Default = args => {
+export const Default = (args) => {
   const { numberOfItems: items, withHeadingContent } = args?.Other ?? {};
   return (
     <>
-      <DDSTableOfContents>
+      <C4DTableOfContents>
         {withHeadingContent && (
           <>
-            <DDSLinkList slot="heading" type="vertical">
-              <DDSLinkListItem
+            <C4DLinkList slot="heading" type="vertical">
+              <C4DLinkListItem
                 iconPlacement={ICON_PLACEMENT.LEFT}
                 href="https://github.com/carbon-design-system/carbon-web-components">
                 DevOps <ArrowLeft20 slot="icon" />
-              </DDSLinkListItem>
-              <DDSLinkListItem
+              </C4DLinkListItem>
+              <C4DLinkListItem
                 iconPlacement={ICON_PLACEMENT.LEFT}
                 href="https://github.com/carbon-design-system/carbon-web-components">
                 Automation <ArrowLeft20 slot="icon" />
-              </DDSLinkListItem>
-              <DDSLinkListItem
+              </C4DLinkListItem>
+              <C4DLinkListItem
                 iconPlacement={ICON_PLACEMENT.LEFT}
                 href="https://github.com/carbon-design-system/carbon-web-components">
                 Development <ArrowLeft20 slot="icon" />
-              </DDSLinkListItem>
-            </DDSLinkList>
-            <DDSHorizontalRule slot="menu-rule"></DDSHorizontalRule>
+              </C4DLinkListItem>
+            </C4DLinkList>
+            <C4DHorizontalRule slot="menu-rule"></C4DHorizontalRule>
           </>
         )}
         {content({ items })}
-      </DDSTableOfContents>
+      </C4DTableOfContents>
     </>
   );
 };
 
-export const Horizontal = args => {
+export const Horizontal = (args) => {
   const { numberOfItems: items } = args?.Other ?? {};
   return (
     <>
-      <DDSTableOfContents layout={'horizontal'}>{content({ items })}</DDSTableOfContents>
+      <C4DTableOfContents layout={'horizontal'}>
+        {content({ items })}
+      </C4DTableOfContents>
     </>
   );
 };
@@ -73,7 +75,10 @@ Horizontal.story = {
         numberOfItems: Array.from({
           length: select('Number of items', [5, 6, 7, 8], 5),
         }).map((_, i) => ({
-          heading: text(`Section ${i + 1} heading`, headings[i % headings.length]),
+          heading: text(
+            `Section ${i + 1} heading`,
+            headings[i % headings.length]
+          ),
           copy: text(`Section ${i + 1} copy`, `${LOREM}\n`.repeat(3).trim()),
         })),
       }),
@@ -84,11 +89,11 @@ Horizontal.story = {
 export default {
   title: 'Components/Table of contents',
   decorators: [
-    story => {
+    (story) => {
       return (
         <>
           <style type="text/css">{styles.cssText}</style>
-          <div className="bx--grid" style={{ padding: '0' }}>
+          <div className="cds--grid" style={{ padding: '0' }}>
             {story()}
           </div>
         </>
@@ -104,7 +109,10 @@ export default {
         numberOfItems: Array.from({
           length: select('Number of items', [5, 6, 7, 8], 5),
         }).map((_, i) => ({
-          heading: text(`Section ${i + 1} heading`, headings[i % headings.length]),
+          heading: text(
+            `Section ${i + 1} heading`,
+            headings[i % headings.length]
+          ),
           copy: text(`Section ${i + 1} copy`, `${LOREM}\n`.repeat(3).trim()),
         })),
       }),
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
index b283bf4ab15..f40079ef495 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.scss
@@ -5,17 +5,14 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/colors/colors';
-@import 'carbon-components/scss/globals/scss/typography';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents';
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
 
-.dds-ce-demo--table-of-contents {
-  padding-top: 2rem;
-  padding-bottom: 3rem;
+.#{$c4d-prefix}-ce-demo--table-of-contents {
+  padding: 0 $spacing-05;
 
   h3 {
-    padding-top: rem(32px);
-    padding-bottom: rem(32px);
+    padding-top: $spacing-07;
+    padding-bottom: $spacing-07;
   }
 }
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.ts b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.ts
index db20bcc07d4..fa1de55137a 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.ts
+++ b/packages/web-components/src/components/table-of-contents/__stories__/table-of-contents.stories.ts
@@ -7,8 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { nothing } from 'lit-html';
-import { html } from 'lit-element';
+import { html, nothing } from 'lit';
 import { boolean, select, text } from '@storybook/addon-knobs';
 import ArrowLeft20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--left/20.js';
 import '../table-of-contents';
@@ -24,47 +23,47 @@ import { ICON_PLACEMENT } from '../../../globals/defs';
 export const Default = (args) => {
   const { numberOfItems: items, withHeadingContent } = args?.Other ?? {};
   return html`
-    <dds-table-of-contents>
+    <c4d-table-of-contents>
       ${withHeadingContent
         ? html`
-            <dds-link-list type="vertical" slot="heading">
-              <dds-link-list-item
+            <c4d-link-list type="vertical" slot="heading">
+              <c4d-link-list-item
                 icon-placement="${ICON_PLACEMENT.LEFT}"
                 href="https://github.com/carbon-design-system/carbon-web-components">
                 DevOps${ArrowLeft20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item
+              </c4d-link-list-item>
+              <c4d-link-list-item
                 icon-placement="${ICON_PLACEMENT.LEFT}"
                 href="https://github.com/carbon-design-system/carbon-web-components">
                 Automation${ArrowLeft20({ slot: 'icon' })}
-              </dds-link-list-item>
-              <dds-link-list-item
+              </c4d-link-list-item>
+              <c4d-link-list-item
                 icon-placement="${ICON_PLACEMENT.LEFT}"
                 href="https://github.com/carbon-design-system/carbon-web-components">
                 Development${ArrowLeft20({ slot: 'icon' })}
-              </dds-link-list-item>
-            </dds-link-list>
-            <dds-hr slot="menu-rule"></dds-hr>
+              </c4d-link-list-item>
+            </c4d-link-list>
+            <c4d-hr slot="menu-rule"></c4d-hr>
           `
         : nothing}
-      ${content({ contentClass: 'bx--tableofcontents__contents', items })}
-    </dds-table-of-contents>
+      ${content({ contentClass: 'cds--tableofcontents__contents', items })}
+    </c4d-table-of-contents>
   `;
 };
 
 export const Horizontal = (args) => {
   const { numberOfItems: items } = args?.Other ?? {};
   return html`
-    <dds-table-of-contents toc-layout="${TOC_TYPES.HORIZONTAL}">
-      <div class="bx--row">
-        <div class="bx--col-lg-12">
+    <c4d-table-of-contents toc-layout="${TOC_TYPES.HORIZONTAL}">
+      <div class="cds--row">
+        <div class="cds--col-lg-12">
           ${content({
-            contentClass: 'bx--tableofcontents-horizontal__contents',
+            contentClass: 'cds--tableofcontents-horizontal__contents',
             items,
           })}
         </div>
       </div>
-    </dds-table-of-contents>
+    </c4d-table-of-contents>
   `;
 };
 
@@ -107,7 +106,7 @@ export default {
       <style>
         ${styles}
       </style>
-      <div class="bx--grid" style="padding: 0">${story()}</div>
+      <div class="cds--grid" style="padding: 0">${story()}</div>
     `,
   ],
   parameters: {
diff --git a/packages/web-components/src/components/table-of-contents/__stories__/wrapper-content.tsx b/packages/web-components/src/components/table-of-contents/__stories__/wrapper-content.tsx
index 128cd856c6a..ae0e1ebe6f3 100644
--- a/packages/web-components/src/components/table-of-contents/__stories__/wrapper-content.tsx
+++ b/packages/web-components/src/components/table-of-contents/__stories__/wrapper-content.tsx
@@ -23,17 +23,20 @@ export const headings = [
 export const LOREM = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras molestie condimentum consectetur. Nulla tristique lacinia elit, at elementum dui gravida non. Mauris et nisl semper, elementum quam non, lacinia purus. Vivamus aliquam vitae sapien volutpat efficitur. Curabitur sagittis neque facilisis magna posuere consectetur. Praesent fermentum sodales facilisis. Mauris a efficitur sem. Aliquam vehicula sapien libero, a viverra felis scelerisque vel. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec fringilla dui tellus, a pretium diam vehicula et. Etiam non vulputate augue. Morbi laoreet diam dapibus sapien pellentesque tristique. Morbi id nibh metus. Integer non scelerisque
 nisl.`;
 
-const generateCopySections = (n: Number) => [...Array(n)].map(() => <p>{LOREM}</p>);
+const generateCopySections = (n: Number) =>
+  [...Array(n)].map(() => <p>{LOREM}</p>);
 
 const content = ({ items }: { items: Array }) => (
-  <div className="bx--tableofcontents__contents dds-ce-demo--table-of-contents">
+  <div className="cds--tableofcontents__contents cds-ce-demo--table-of-contents">
     {items?.map(({ heading, copy }, i: Number) => (
       <>
         {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
         <a name={i}>
           <h3>{heading}</h3>
         </a>
-        {copy ? copy.split('\n').map((section: String) => <p>{section}</p>) : generateCopySections(3)}
+        {copy
+          ? copy.split('\n').map((section: String) => <p>{section}</p>)
+          : generateCopySections(3)}
       </>
     ))}
   </div>
diff --git a/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js b/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js
index 836bcad5401..ca55d917ee6 100644
--- a/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js
+++ b/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.steps.js
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-describe('dds-table-of-contents', () => {
+describe('cds-table-of-contents', () => {
   describe('With wide screen', () => {
     describe('Without heading content', function () {
       beforeEach(async () => {
@@ -19,7 +19,7 @@ describe('dds-table-of-contents', () => {
 
       it('should hide the heading container unless it has its content', async () => {
         await expect(page).toHaveSelector(
-          'dds-table-of-contents .bx--tableofcontents__desktop__children',
+          'cds-table-of-contents .cds--tableofcontents__desktop__children',
           { state: 'hidden' }
         );
       });
@@ -35,7 +35,7 @@ describe('dds-table-of-contents', () => {
 
       it('should show the heading container', async () => {
         await expect(page).toHaveSelector(
-          'dds-table-of-contents .bx--tableofcontents__desktop__children',
+          'cds-table-of-contents .cds--tableofcontents__desktop__children',
           { state: 'visible' }
         );
       });
@@ -53,7 +53,7 @@ describe('dds-table-of-contents', () => {
 
       it('should hide the heading container unless it has its content', async () => {
         await expect(page).toHaveSelector(
-          'dds-table-of-contents .bx--tableofcontents__children__mobile',
+          'cds-table-of-contents .cds--tableofcontents__children__mobile',
           { state: 'hidden' }
         );
       });
@@ -69,7 +69,7 @@ describe('dds-table-of-contents', () => {
 
       it('should show the heading container', async () => {
         await expect(page).toHaveSelector(
-          'dds-table-of-contents .bx--tableofcontents__children__mobile',
+          'cds-table-of-contents .cds--tableofcontents__children__mobile',
           { state: 'visible' }
         );
       });
diff --git a/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.test.ts b/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.test.ts
index 79aef861e23..19acac52382 100644
--- a/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.test.ts
+++ b/packages/web-components/src/components/table-of-contents/__tests__/table-of-contents.test.ts
@@ -1,25 +1,25 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import EventManager from '../../../../tests/utils/event-manager';
 import MockResizeObserver from '../../../../tests/utils/mock-resize-observer';
-import DDSTableOfContents from '../table-of-contents';
+import C4DTableOfContents from '../table-of-contents';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../table-of-contents';
 
 const template = (props?) => {
   const { children } = props ?? {};
-  return html` <dds-table-of-contents>${children}</dds-table-of-contents> `;
+  return html` <c4d-table-of-contents>${children}</c4d-table-of-contents> `;
 };
 
-describe('dds-table-of-contents', function () {
+describe('c4d-table-of-contents', function () {
   const events = new EventManager();
 
   describe('Misc attributes', function () {
@@ -36,7 +36,7 @@ describe('dds-table-of-contents', function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-table-of-contents')
+        document.body.querySelector('c4d-table-of-contents')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -44,11 +44,11 @@ describe('dds-table-of-contents', function () {
       render(
         template({
           children: html`
-            <dds-image
+            <c4d-image
               slot="heading"
               alt="Alt text"
-              default-src="https://fpoimg.com/672x672?text=1:1&amp;bg_color=ee5396&amp;text_color=161616"></dds-image>
-            <dds-horizontal-rule slot="menu-rule"></dds-horizontal-rule>
+              default-src="https://fpoimg.com/672x672?text=1:1&amp;bg_color=ee5396&amp;text_color=161616"></c4d-image>
+            <c4d-horizontal-rule slot="menu-rule"></c4d-horizontal-rule>
           `,
         }),
         document.body
@@ -57,7 +57,7 @@ describe('dds-table-of-contents', function () {
       await Promise.resolve(); // The cycle where `slotchange` event is called
       await Promise.resolve(); // Updating cycle upon `slotchange`
       expect(
-        document.body.querySelector('dds-table-of-contents')
+        document.body.querySelector('c4d-table-of-contents')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -65,22 +65,22 @@ describe('dds-table-of-contents', function () {
       render(
         template({
           children: html`
-            <dds-image
+            <c4d-image
               slot="heading"
               alt="Alt text"
-              default-src="https://fpoimg.com/672x672?text=1:1&amp;bg_color=ee5396&amp;text_color=161616"></dds-image>
-            <dds-horizontal-rule slot="menu-rule"></dds-horizontal-rule>
+              default-src="https://fpoimg.com/672x672?text=1:1&amp;bg_color=ee5396&amp;text_color=161616"></c4d-image>
+            <c4d-horizontal-rule slot="menu-rule"></c4d-horizontal-rule>
           `,
         }),
         document.body
       );
       await Promise.resolve(); // Update cycle for the component
       const tableOfContents = document.querySelector(
-        'dds-table-of-contents'
-      ) as DDSTableOfContents;
+        'c4d-table-of-contents'
+      ) as C4DTableOfContents;
       MockResizeObserver.run(
         tableOfContents!.shadowRoot!.querySelector(
-          '.bx--tableofcontents__mobile'
+          '.cds--tableofcontents__mobile'
         )!,
         { height: 32 }
       );
@@ -88,7 +88,7 @@ describe('dds-table-of-contents', function () {
       await Promise.resolve(); // The cycle where `slotchange` event is called
       await Promise.resolve(); // Updating cycle upon `slotchange`
       expect(
-        document.body.querySelector('dds-table-of-contents')
+        document.body.querySelector('c4d-table-of-contents')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -116,7 +116,7 @@ describe('dds-table-of-contents', function () {
       expect(
         Array.prototype.map.call(
           document.body
-            .querySelector('dds-table-of-contents')!
+            .querySelector('c4d-table-of-contents')!
             .shadowRoot!.querySelectorAll('a[data-target]'),
           (elem) => ({
             target: elem.dataset.target,
@@ -162,7 +162,7 @@ describe('dds-table-of-contents', function () {
       expect(
         Array.prototype.map.call(
           document.body
-            .querySelector('dds-table-of-contents')!
+            .querySelector('c4d-table-of-contents')!
             .shadowRoot!.querySelectorAll('a[data-target]'),
           (elem) => ({
             target: elem.dataset.target,
@@ -206,8 +206,8 @@ describe('dds-table-of-contents', function () {
       await Promise.resolve(); // The cycle where `slotchange` event is called
       await Promise.resolve(); // Updating upon harvesting `<a>`s
       const tableOfContents = document.querySelector(
-        'dds-table-of-contents'
-      ) as DDSTableOfContents;
+        'c4d-table-of-contents'
+      ) as C4DTableOfContents;
       spyOn(tableOfContents as any, '_handleUserInitiatedJump');
       (
         tableOfContents!.shadowRoot!.querySelector(
@@ -234,11 +234,11 @@ describe('dds-table-of-contents', function () {
       await Promise.resolve(); // The cycle where `slotchange` event is called
       await Promise.resolve(); // Updating upon harvesting `<a>`s
       const tableOfContents = document.querySelector(
-        'dds-table-of-contents'
-      ) as DDSTableOfContents;
+        'c4d-table-of-contents'
+      ) as C4DTableOfContents;
       spyOn(tableOfContents as any, '_handleUserInitiatedJump');
       const select = tableOfContents!.shadowRoot!.querySelector(
-        '.bx--tableofcontents__mobile__select'
+        '.cds--tableofcontents__mobile__select'
       ) as HTMLSelectElement;
       select.value = '2';
       select.dispatchEvent(new CustomEvent('change', { bubbles: true }));
diff --git a/packages/web-components/src/components/table-of-contents/table-of-contents-cdn.scss b/packages/web-components/src/components/table-of-contents/table-of-contents-cdn.scss
index 01e3e81fd52..56b6653ad5e 100644
--- a/packages/web-components/src/components/table-of-contents/table-of-contents-cdn.scss
+++ b/packages/web-components/src/components/table-of-contents/table-of-contents-cdn.scss
@@ -6,8 +6,8 @@
 //
 
 // This import is used for generating the CDN artifact
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/tableofcontents';
 
 body {
   /* stylelint-disable-next-line */
diff --git a/packages/web-components/src/components/table-of-contents/table-of-contents.scss b/packages/web-components/src/components/table-of-contents/table-of-contents.scss
index 1e327149e99..58362105203 100644
--- a/packages/web-components/src/components/table-of-contents/table-of-contents.scss
+++ b/packages/web-components/src/components/table-of-contents/table-of-contents.scss
@@ -1,103 +1,8 @@
 //
-// Copyright IBM Corp. 2020, 2022
+// 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 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/components/tableofcontents/tableofcontents';
-@import '@carbon/ibmdotcom-styles/scss/components/layout/layout';
-
-:host(#{$dds-prefix}-table-of-contents[toc-layout='horizontal'])
-  .#{$prefix}--tableofcontents__navbar {
-  @include carbon--breakpoint('lg') {
-    &::before {
-      border-bottom: 1px solid $ui-04;
-      content: '';
-      background-color: $ui-01;
-      position: absolute;
-      top: 0;
-      height: 48px;
-      left: calc(-50vw + 50%);
-      right: 100%;
-      z-index: 1;
-    }
-
-    &::after {
-      border-bottom: 1px solid $ui-04;
-      content: '';
-      background-color: $ui-01;
-      position: absolute;
-      top: 0;
-      height: 48px;
-      left: 100%;
-      right: calc(-50vw + 50%);
-      z-index: 1;
-    }
-  }
-}
-
-:host(#{$dds-prefix}-table-of-contents[toc-layout='horizontal'])
-  .#{$prefix}--tableofcontents__desktop-container {
-  @include carbon--breakpoint('lg') {
-    position: relative;
-    overflow: hidden;
-    height: 48px;
-  }
-}
-
-:host(#{$dds-prefix}-table-of-contents[toc-layout='horizontal'])
-  .#{$prefix}--tableofcontents__mobile {
-  margin: 0;
-}
-
-:host(#{$dds-prefix}-table-of-contents[toc-layout='horizontal'])
-  .#{$prefix}--tableofcontents__content {
-  max-width: none;
-  flex: 1;
-}
-
-.#{$dds-prefix}-ce--table-of-contents__container {
-  // TODO: Make the layout CSS grid-based so we can remove this ruleset
-  ::slotted(#{$dds-prefix}-content-block-simple),
-  ::slotted(#{$dds-prefix}-content-block-segmented) {
-    margin-left: calc(-1 * #{$carbon--spacing-05});
-    margin-right: calc(-1 * #{$carbon--spacing-05});
-  }
-}
-
-.#{$prefix}--toc__navbar-caret-left-container,
-.#{$prefix}--toc__navbar-caret-right-container {
-  bottom: 0;
-  z-index: 1;
-  position: absolute;
-  display: none;
-
-  @include carbon--breakpoint('lg') {
-    display: block;
-  }
-}
-
-.#{$prefix}--toc__navbar-caret-right-container {
-  right: -1rem;
-  z-index: 2;
-}
-
-.#{$prefix}--toc__navbar-caret-left-container {
-  left: -1rem;
-}
-
-.#{$prefix}--toc__navbar-caret-left,
-.#{$prefix}--toc__navbar-caret-right {
-  position: relative;
-  // 40px caret width & 8px gradient
-  height: 48px;
-}
-
-.#{$dds-prefix}-ce--toc__navbar-caret-container--hidden {
-  position: absolute;
-  visibility: hidden;
-}
+@use '@carbon/ibmdotcom-styles/scss/components/tableofcontents';
diff --git a/packages/web-components/src/components/table-of-contents/table-of-contents.ts b/packages/web-components/src/components/table-of-contents/table-of-contents.ts
index e3d3dd37e0f..548773d6abc 100644
--- a/packages/web-components/src/components/table-of-contents/table-of-contents.ts
+++ b/packages/web-components/src/components/table-of-contents/table-of-contents.ts
@@ -7,40 +7,31 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { nothing } from 'lit-html';
-import { classMap } from 'lit-html/directives/class-map.js';
-import { ifDefined } from 'lit-html/directives/if-defined.js';
-import {
-  html,
-  property,
-  state,
-  query,
-  queryAll,
-  LitElement,
-} from 'lit-element';
-import CaretLeft20 from '../../internal/vendor/@carbon/web-components/icons/caret--left/20.js';
-import CaretRight20 from '../../internal/vendor/@carbon/web-components/icons/caret--right/20.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { baseFontSize, breakpoints } from '@carbon/layout';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { html, LitElement } from 'lit';
+import { property, query, queryAll, state } from 'lit/decorators.js';
+import ChevronLeft20 from '../../internal/vendor/@carbon/web-components/icons/chevron--left/20.js';
+import ChevronRight20 from '../../internal/vendor/@carbon/web-components/icons/chevron--right/20.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import TableOfContents20 from '../../internal/vendor/@carbon/web-components/icons/table-of-contents/20.js';
 import throttle from 'lodash-es/throttle.js';
 import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './table-of-contents.scss';
 import { TOC_TYPES } from './defs';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
+import MediaQueryMixin, {
+  MQBreakpoints,
+  MQDirs,
+} from '../../component-mixins/media-query/media-query';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 // total button width - grid offset
 const buttonWidthOffset = 32;
 
-const gridLgBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
-
 interface Cancelable {
   cancel(): void;
 }
@@ -67,22 +58,16 @@ function findLastIndex<T>(
 /**
  * Table of contents.
  *
- * @element dds-table-of-contents
+ * @element c4d-table-of-contents
  * @csspart table - The table UI.
  * @slot heading - The heading content.
  * @slot menu-rule - The menu rule.
  */
-@customElement(`${ddsPrefix}-table-of-contents`)
-class DDSTableOfContents extends HostListenerMixin(
-  StableSelectorMixin(LitElement)
+@customElement(`${c4dPrefix}-table-of-contents`)
+class C4DTableOfContents extends MediaQueryMixin(
+  HostListenerMixin(StableSelectorMixin(LitElement)),
+  { [MQBreakpoints.LG]: MQDirs.MAX }
 ) {
-  /**
-   * The formatter for the aria label text for the mobile ToC.
-   * Should be changed upon the locale the component is rendered with.
-   */
-  @property({ attribute: false })
-  ariaLabelFormatter = 'Table of contents';
-
   /**
    * Defines TOC type, "" for default, `horizontal` for horizontal variant.
    */
@@ -121,12 +106,6 @@ class DDSTableOfContents extends HostListenerMixin(
   @state()
   private _hasHeading = false;
 
-  /**
-   * `true` if mobile container is visible.
-   */
-  @state()
-  private _hasMobileContainerVisible = false;
-
   /**
    * The observer for the intersection of left-side content edge.
    */
@@ -135,7 +114,7 @@ class DDSTableOfContents extends HostListenerMixin(
   /**
    * The scrolling content.
    */
-  @query(`.${prefix}--tableofcontents__desktop`)
+  @query(`.${prefix}--tableofcontents`)
   private _contentNode?: HTMLElement;
 
   /**
@@ -151,29 +130,20 @@ class DDSTableOfContents extends HostListenerMixin(
    */
   @query(`.${prefix}--sub-content-right`)
   private _intersectionRightSentinelNode?: HTMLElement;
-
-  @queryAll(`.${prefix}--tableofcontents__desktop__item`)
+  @queryAll(`.${prefix}--tableofcontents__item`)
   private _itemNodes?: HTMLElement[] = [];
 
+  @query(`.${prefix}--tableofcontents__content`)
+  private _contentDiv?: HTMLElement;
+
   @query(`.${prefix}--tableofcontents__navbar`)
   private _navBar?: HTMLElement;
 
   /**
-   * The container for the mobile UI.
+   * Whether we're viewing smaller or larger window.
    */
-  @query(`.${prefix}--tableofcontents__mobile`)
-  private _mobileContainerNode?: HTMLElement;
-
-  /**
-   * The `<select>` for the mobile UI.
-   */
-  @query(`.${prefix}--tableofcontents__mobile__select`)
-  private _mobileSelectNode?: HTMLSelectElement;
-
-  /**
-   * The observer for the resize of the mobile container.
-   */
-  private _observerResizeMobileContainer: any | null = null; // TODO: Wait for `.d.ts` update to support `ResizeObserver`
+  @state()
+  _isMobile = this.carbonBreakpoints.lg.matches;
 
   /**
    * The target elements matching `[name]` harvested from the document.
@@ -185,7 +155,7 @@ class DDSTableOfContents extends HostListenerMixin(
    * The Element.tagName values that should never be used as a TOC target.
    * Typically added here because these elements have their own `[name]` attribute.
    */
-  private _tagNamesToAvoid = [`${ddsPrefix}-video-player`];
+  private _tagNamesToAvoid = [`${c4dPrefix}-video-player`];
 
   /**
    * The name of an attribute that will prevent the DOM element and any elements
@@ -206,79 +176,56 @@ class DDSTableOfContents extends HostListenerMixin(
   private _throttleScroll: (((event: Event) => void) & Cancelable) | null =
     null;
 
-  /**
-   * Cleans-up and creats the resize observer for the mobile container.
-   *
-   * @param [options] The options.
-   * @param [options.create] `true` to create the new resize observer.
-   */
-  private _cleanAndCreateObserverResizeMobileContainer({
-    create,
-  }: { create?: boolean } = {}) {
-    const { _mobileContainerNode: mobileContainerNode } = this;
-    if (mobileContainerNode) {
-      if (this._observerResizeMobileContainer) {
-        this._observerResizeMobileContainer.disconnect();
-        this._observerResizeMobileContainer = null;
-      }
-      if (create) {
-        // TODO: Wait for `.d.ts` update to support `ResizeObserver`
-        // @ts-ignore
-        this._observerResizeMobileContainer = new ResizeObserver(
-          this._observeResizeMobileContainer
-        );
-        this._observerResizeMobileContainer.observe(mobileContainerNode);
-      }
-    }
-  }
-
-  /**
-   * Handles `change` event on mobile `<select>`.
-   *
-   * @param event The event.
-   */
-  private _handleChangeSelect(event: Event) {
-    this._handleUserInitiatedJump((event.target as HTMLSelectElement).value);
-  }
-
   /**
    * Handles `click` event on a menu item.
    *
    * @param event The event.
    */
   private _handleClickItem(event: MouseEvent) {
-    const { selectorDesktopItem } = this
-      .constructor as typeof DDSTableOfContents;
+    const { selectorItem } = this.constructor as typeof C4DTableOfContents;
     const target = event.target as HTMLAnchorElement;
-    if (target.matches?.(selectorDesktopItem)) {
+    if (target.matches?.(selectorItem)) {
       this._handleUserInitiatedJump(target.dataset.target!);
       event.preventDefault();
     }
   }
 
   /**
-   * Handles `click` event on a TOC navigation item.
+   * Handles `keyboard` event on a TOC navigation item.
    *
    * @param event The event.
    */
   private _handleOnKeyDown(event: KeyboardEvent) {
-    const { selectorDesktopItem } = this
-      .constructor as typeof DDSTableOfContents;
+    const { selectorItem } = this.constructor as typeof C4DTableOfContents;
     const target = event.target as HTMLAnchorElement;
     const { _pageIsRTL: pageIsRTL } = this;
-    if (target.matches?.(selectorDesktopItem)) {
+    const paginateAccessibile =
+      this.layout === TOC_TYPES.HORIZONTAL || this._isMobile;
+
+    if (target.matches?.(selectorItem)) {
       if (pageIsRTL) {
-        if (event.key === 'Tab') {
-          if (event.shiftKey) {
-            if (
-              target.parentElement?.previousElementSibling &&
-              target.parentElement?.previousElementSibling.getBoundingClientRect()
-                .right >
-                this._navBar!.getBoundingClientRect().right - buttonWidthOffset
-            ) {
-              this._paginateLeft();
-            }
-          } else if (
+        if (event.key === 'ArrowLeft') {
+          (
+            target.parentElement?.nextElementSibling
+              ?.children[0] as HTMLAnchorElement
+          )?.focus();
+          if (
+            paginateAccessibile &&
+            target.parentElement?.previousElementSibling &&
+            target.parentElement?.previousElementSibling.getBoundingClientRect()
+              .right >
+              this._navBar!.getBoundingClientRect().right - buttonWidthOffset
+          ) {
+            this._paginateLeft();
+          }
+        }
+        if (event.key === 'ArrowRight') {
+          (
+            target.parentElement?.previousElementSibling
+              ?.children[0] as HTMLAnchorElement
+          )?.focus();
+          if (
+            paginateAccessibile &&
             target.parentElement?.nextElementSibling &&
             target.parentElement?.nextElementSibling.getBoundingClientRect()
               .left <
@@ -287,9 +234,14 @@ class DDSTableOfContents extends HostListenerMixin(
             this._paginateRight();
           }
         }
-      } else if (event.key === 'Tab') {
-        if (event.shiftKey) {
+      } else {
+        if (event.key === 'ArrowLeft') {
+          (
+            target.parentElement?.previousElementSibling
+              ?.children[0] as HTMLAnchorElement
+          )?.focus();
           if (
+            paginateAccessibile &&
             target.parentElement?.previousElementSibling &&
             target.parentElement?.previousElementSibling!.getBoundingClientRect()
               .left <
@@ -297,13 +249,21 @@ class DDSTableOfContents extends HostListenerMixin(
           ) {
             this._paginateLeft();
           }
-        } else if (
-          target.parentElement?.nextElementSibling &&
-          target.parentElement?.nextElementSibling!.getBoundingClientRect()
-            .right >
-            this._navBar!.getBoundingClientRect().right - buttonWidthOffset
-        ) {
-          this._paginateRight();
+        }
+        if (event.key === 'ArrowRight') {
+          (
+            target.parentElement?.nextElementSibling
+              ?.children[0] as HTMLAnchorElement
+          )?.focus();
+          if (
+            paginateAccessibile &&
+            target.parentElement?.nextElementSibling &&
+            target.parentElement?.nextElementSibling!.getBoundingClientRect()
+              .right >
+              this._navBar!.getBoundingClientRect().right - buttonWidthOffset
+          ) {
+            this._paginateRight();
+          }
         }
       }
     }
@@ -373,7 +333,7 @@ class DDSTableOfContents extends HostListenerMixin(
       _tagNamesToAvoid: tagNamesToAvoid,
       _disableTargetAttribute: disableTargetAttribute,
     } = this;
-    const { selectorTarget } = this.constructor as typeof DDSTableOfContents;
+    const { selectorTarget } = this.constructor as typeof C4DTableOfContents;
     this._targets = nodes.reduce((acc, node) => {
       if (node instanceof HTMLElement) {
         const descendants = node.querySelectorAll(
@@ -443,12 +403,8 @@ class DDSTableOfContents extends HostListenerMixin(
   private _handleUserInitiatedJump(target: string) {
     const elem = this.querySelector(`[name="${target}"]`);
     const masthead: HTMLElement | null = this.ownerDocument.querySelector(
-      `${ddsPrefix}-masthead`
+      `${c4dPrefix}-masthead`
     );
-    const mobilePadding =
-      window.innerWidth < gridLgBreakpoint
-        ? this._mobileContainerNode?.offsetHeight
-        : 0;
 
     if (elem instanceof HTMLElement) {
       const currentY = window.scrollY;
@@ -457,7 +413,16 @@ class DDSTableOfContents extends HostListenerMixin(
       if (currentY > elem.offsetTop && masthead) {
         targetY = elem.offsetTop - masthead.offsetHeight;
       } else {
-        targetY = elem.offsetTop - mobilePadding!;
+        targetY =
+          elem.offsetTop -
+          parseInt(
+            window.getComputedStyle(elem).getPropertyValue('padding-top')
+          ) -
+          parseInt(
+            window
+              .getComputedStyle(this._contentDiv!)
+              .getPropertyValue('padding-top')
+          );
       }
 
       window.scrollTo({
@@ -544,7 +509,7 @@ class DDSTableOfContents extends HostListenerMixin(
       _itemNodes: itemNodes,
       _pageIsRTL: pageIsRTL,
     } = this;
-    // If the right-side intersection sentinel is in the view, it means that right-side caret button is hidden.
+    // If the right-side intersection sentinel is in the view, it means that right-side chevron button is hidden.
     // Given scrolling to left makes it shown,
     // `contentContainerNode!.offsetWidth` will shrink as we scroll and we need to adjust for it.
     const elems = Array.prototype.slice.call(itemNodes);
@@ -580,8 +545,8 @@ class DDSTableOfContents extends HostListenerMixin(
             currentScrollPosition -
             navBar!.getBoundingClientRect().right +
             buttonWidthOffset;
-          // If the new scroll position is less than the width of the left caret button,
-          // it means that hiding the left caret button reveals the whole of the left-most nav item.
+          // If the new scroll position is less than the width of the left chevron button,
+          // it means that hiding the left chevron button reveals the whole of the left-most nav item.
           // Snaps the left-most nav item to the left edge of nav container in this case.
           this._currentScrollPosition =
             newScrollPosition <= 0 ? 0 : newScrollPosition;
@@ -646,16 +611,9 @@ class DDSTableOfContents extends HostListenerMixin(
     }
   }
 
-  /**
-   * Handles resize of mobile container.
-   *
-   * @param records The resize records.
-   */
-  private _observeResizeMobileContainer = (records) => {
-    const entry = records[records.length - 1];
-    const { height } = entry.contentRect;
-    this._hasMobileContainerVisible = height > 0;
-  };
+  mediaQueryCallbackMaxLG() {
+    this._isMobile = this.carbonBreakpoints.lg.matches;
+  }
 
   /**
    * The current 0px offset from the top of page.
@@ -677,7 +635,7 @@ class DDSTableOfContents extends HostListenerMixin(
   /**
    * The trigger reharvest listener.
    */
-  @HostListener(`document:${ddsPrefix}-table-of-contents-reharvest`)
+  @HostListener(`document:${c4dPrefix}-table-of-contents-reharvest`)
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _retriggerHarvest = () => {
     this._targets = Array.from(this.querySelectorAll('[name]'));
@@ -685,7 +643,6 @@ class DDSTableOfContents extends HostListenerMixin(
 
   connectedCallback() {
     super.connectedCallback();
-    this._cleanAndCreateObserverResizeMobileContainer({ create: true });
     this._cleanAndCreateIntersectionObserverContainer({ create: true });
     if (!this._throttleScroll) {
       this._throttleScroll = throttle(this._handleOnScroll, 250);
@@ -694,7 +651,6 @@ class DDSTableOfContents extends HostListenerMixin(
   }
 
   disconnectedCallback() {
-    this._cleanAndCreateObserverResizeMobileContainer();
     this._cleanAndCreateIntersectionObserverContainer();
     this._contentMutationObserver.disconnect();
     if (this._throttleScroll) {
@@ -705,35 +661,23 @@ class DDSTableOfContents extends HostListenerMixin(
   }
 
   firstUpdated() {
-    this._cleanAndCreateObserverResizeMobileContainer({ create: true });
+    super.firstUpdated();
     this._cleanAndCreateIntersectionObserverContainer({ create: true });
 
     StickyHeader.global.tableOfContents = this;
   }
 
-  updated(changedProperties) {
-    if (changedProperties.has('_currentTarget')) {
-      const {
-        _currentTarget: currentTarget,
-        _mobileSelectNode: mobileSelectNode,
-      } = this;
-      // Ensures setting the `value` after rendering child `<option>`s when there is a change in `value`,
-      // given reflecting `value` requires child `<option>`s being there beforehand
-      mobileSelectNode!.value = currentTarget?.getAttribute('name') ?? '';
-    }
-  }
-
   render() {
     const {
+      layout,
       stickyOffset,
       _currentTarget: currentTarget,
       _currentScrollPosition: currentScrollPosition,
       _hasHeading: hasHeading,
-      _hasMobileContainerVisible: hasMobileContainerVisible,
       _isIntersectionLeftTrackerInContent: isIntersectionLeftTrackerInContent,
       _isIntersectionRightTrackerInContent: isIntersectionRightTrackerInContent,
+      _isMobile: isMobile,
       _targets: targets,
-      _handleChangeSelect: handleChangeSelect,
       _handleClickItem: handleClickItem,
       _handleOnKeyDown: handleOnKeyDown,
       _handleSlotChange: handleSlotChange,
@@ -744,28 +688,28 @@ class DDSTableOfContents extends HostListenerMixin(
     } = this;
 
     const containerClasses = classMap({
-      [`${ddsPrefix}-ce--table-of-contents__container`]:
-        this.layout === TOC_TYPES.DEFAULT,
-      [`${ddsPrefix}-ce--table-of-contents-horizontal__container`]:
-        this.layout === TOC_TYPES.HORIZONTAL,
+      [`${c4dPrefix}-ce--table-of-contents__container`]:
+        layout === TOC_TYPES.DEFAULT && !isMobile,
+      [`${c4dPrefix}-ce--table-of-contents-horizontal__container`]:
+        layout === TOC_TYPES.HORIZONTAL || isMobile,
     });
 
     const navigationClasses = classMap({
       [`${prefix}--tableofcontents__sidebar`]:
-        this.layout === TOC_TYPES.DEFAULT,
+        layout === TOC_TYPES.DEFAULT && !isMobile,
       [`${prefix}--tableofcontents__navbar`]:
-        this.layout === TOC_TYPES.HORIZONTAL,
+        layout === TOC_TYPES.HORIZONTAL || isMobile,
     });
 
-    const caretLeftContainerClasses = classMap({
-      [`${prefix}--toc__navbar-caret-left-container`]: true,
-      [`${ddsPrefix}-ce--toc__navbar-caret-container--hidden`]:
+    const chevronLeftContainerClasses = classMap({
+      [`${prefix}--toc__navbar-chevron-left-container`]: true,
+      [`${c4dPrefix}-ce--toc__navbar-chevron-container--hidden`]:
         isIntersectionLeftTrackerInContent,
     });
 
-    const caretRightContainerClasses = classMap({
-      [`${prefix}--toc__navbar-caret-right-container`]: true,
-      [`${ddsPrefix}-ce--toc__navbar-caret-container--hidden`]:
+    const chevronRightContainerClasses = classMap({
+      [`${prefix}--toc__navbar-chevron-right-container`]: true,
+      [`${c4dPrefix}-ce--toc__navbar-chevron-container--hidden`]:
         isIntersectionRightTrackerInContent,
     });
 
@@ -782,9 +726,8 @@ class DDSTableOfContents extends HostListenerMixin(
                 ).trim();
                 const selected = item === currentTarget;
                 const itemClasses = classMap({
-                  [`${prefix}--tableofcontents__desktop__item`]: true,
-                  [`${prefix}--tableofcontents__desktop__item--active`]:
-                    selected,
+                  [`${prefix}--tableofcontents__item`]: true,
+                  [`${prefix}--tableofcontents__item--active`]: selected,
                 });
                 return html`
                   <li
@@ -807,61 +750,52 @@ class DDSTableOfContents extends HostListenerMixin(
         : ``}
       <div class="${containerClasses}">
         <div part="table" class="${navigationClasses}">
-          ${hasMobileContainerVisible
-            ? nothing
+          ${isMobile
+            ? ''
             : html`
                 <div
                   ?hidden="${!hasHeading}"
-                  class="${prefix}--tableofcontents__desktop__children">
+                  class="${prefix}--tableofcontents__children">
                   <slot
                     name="heading"
                     @slotchange="${handleSlotChangeHeading}"></slot>
                   <slot name="menu-rule"></slot>
                 </div>
               `}
-          <div class="${prefix}--tableofcontents__mobile-top"></div>
-          ${this.layout === 'horizontal'
+          ${layout === 'horizontal' || isMobile
             ? html`
                 ${pageIsRTL
                   ? html`
-                      <div class="${caretRightContainerClasses}">
-                        <div
-                          class="${prefix}--toc__navbar-caret-right-gradient"></div>
-                        <button
-                          part="next-button"
-                          tabindex="-1"
-                          aria-hidden="true"
-                          class="${prefix}--toc__navbar-caret-right"
-                          @click="${paginateRight}">
-                          ${CaretLeft20()}
-                        </button>
-                      </div>
+                      <button
+                        part="prev-button"
+                        tabindex="-1"
+                        aria-hidden="true"
+                        class="${chevronRightContainerClasses}"
+                        @click="${paginateLeft}">
+                        ${ChevronLeft20()}
+                      </button>
                     `
                   : html`
-                      <div class="${caretLeftContainerClasses}">
-                        <button
-                          part="prev-button"
-                          tabindex="-1"
-                          aria-hidden="true"
-                          class="${prefix}--toc__navbar-caret-left"
-                          @click="${paginateLeft}">
-                          ${CaretLeft20()}
-                        </button>
-                        <div
-                          class="${prefix}--toc__navbar-caret-left-gradient"></div>
-                      </div>
+                      <button
+                        part="prev-button"
+                        tabindex="-1"
+                        aria-hidden="true"
+                        class="${chevronLeftContainerClasses}"
+                        @click="${paginateLeft}">
+                        ${ChevronLeft20()}
+                      </button>
                     `}
               `
             : ``}
           <div
-            class="${ddsPrefix}-ce--table-of-contents__items-container"
+            class="${c4dPrefix}-ce--table-of-contents__items-container"
             style="position: sticky; top: ${stickyOffset &&
             this.layout !== TOC_TYPES.HORIZONTAL
               ? `${stickyOffset}px`
               : 0}">
-            <div class="${prefix}--tableofcontents__desktop-container">
+            <div class="${prefix}--tableofcontents-container">
               <div
-                class="${prefix}--tableofcontents__desktop"
+                class="${prefix}--tableofcontents"
                 style="${pageIsRTL
                   ? 'right'
                   : 'left'}: -${currentScrollPosition}px">
@@ -878,9 +812,8 @@ class DDSTableOfContents extends HostListenerMixin(
                     ).trim();
                     const selected = item === currentTarget;
                     const itemClasses = classMap({
-                      [`${prefix}--tableofcontents__desktop__item`]: true,
-                      [`${prefix}--tableofcontents__desktop__item--active`]:
-                        selected,
+                      [`${prefix}--tableofcontents__item`]: true,
+                      [`${prefix}--tableofcontents__item--active`]: selected,
                     });
                     return html`
                       <li
@@ -892,7 +825,8 @@ class DDSTableOfContents extends HostListenerMixin(
                             !selected ? undefined : 'location'
                           )}"
                           data-target="${name!}"
-                          href="#${name}">
+                          href="#${name}"
+                          tabindex="${selected ? 0 : -1}">
                           ${title}
                         </a>
                       </li>
@@ -904,79 +838,47 @@ class DDSTableOfContents extends HostListenerMixin(
                   : html` <div class="${prefix}--sub-content-right"></div> `}
               </div>
             </div>
-            <div class="${prefix}--tableofcontents__mobile">
-              <div class="${prefix}--tableofcontents__mobile__select__wrapper">
-                <select
-                  aria-label="${this.ariaLabelFormatter}"
-                  class="${prefix}--tableofcontents__mobile__select"
-                  @change="${handleChangeSelect}">
-                  ${targets.map((item) => {
-                    const name = item.getAttribute('name');
-                    const title = (
-                      item.dataset.title ??
-                      item.textContent ??
-                      ''
-                    ).trim();
-                    return html`
-                      <option
-                        class="${prefix}--tableofcontents__mobile__select__option"
-                        value="${name!}">
-                        ${title}
-                      </option>
-                    `;
-                  })}
-                </select>
-                ${TableOfContents20({
-                  class: `${prefix}--tableofcontents__mobile__select__icon`,
-                })}
-              </div>
-            </div>
           </div>
-          ${this.layout === 'horizontal'
+
+          ${this.layout === 'horizontal' || isMobile
             ? html`
                 ${pageIsRTL
                   ? html`
-                      <div class="${caretLeftContainerClasses}">
-                        <button
-                          part="prev-button"
-                          tabindex="-1"
-                          aria-hidden="true"
-                          class="${prefix}--toc__navbar-caret-left"
-                          @click="${paginateLeft}">
-                          ${CaretRight20()}
-                        </button>
-                        <div
-                          class="${prefix}--toc__navbar-caret-left-gradient"></div>
-                      </div>
+                      <button
+                        part="next-button"
+                        tabindex="-1"
+                        aria-hidden="true"
+                        class="${chevronLeftContainerClasses}"
+                        @click="${paginateRight}">
+                        ${ChevronRight20()}
+                      </button>
                     `
                   : html`
-                      <div class="${caretRightContainerClasses}">
-                        <div
-                          class="${prefix}--toc__navbar-caret-right-gradient"></div>
-                        <button
-                          part="next-button"
-                          tabindex="-1"
-                          aria-hidden="true"
-                          class="${prefix}--toc__navbar-caret-right"
-                          @click="${paginateRight}">
-                          ${CaretRight20()}
-                        </button>
-                      </div>
+                      <button
+                        part="next-button"
+                        tabindex="-1"
+                        aria-hidden="true"
+                        class="${chevronRightContainerClasses}"
+                        @click="${paginateRight}">
+                        ${ChevronRight20()}
+                      </button>
                     `}
               `
             : ``}
         </div>
+
         <div class="${prefix}--tableofcontents__content">
           <div class="${prefix}--tableofcontents__content-wrapper">
-            ${!hasMobileContainerVisible
-              ? undefined
+            ${!isMobile
+              ? ''
               : html`
                   <div
                     ?hidden="${!hasHeading}"
-                    class="${prefix}--tableofcontents__children__mobile">
+                    class="${prefix}--tableofcontents__children">
                     <slot
                       name="heading"
                       @slotchange="${handleSlotChangeHeading}"></slot>
+                    <slot name="menu-rule"></slot>
                   </div>
                 `}
             <slot @slotchange="${handleSlotChange}"></slot>
@@ -987,10 +889,10 @@ class DDSTableOfContents extends HostListenerMixin(
   }
 
   /**
-   * The selector that selects the desktop link items.
+   * The selector that selects the link items.
    */
-  static get selectorDesktopItem() {
-    return `.${prefix}--tableofcontents__desktop__item a`;
+  static get selectorItem() {
+    return `.${prefix}--tableofcontents__item a`;
   }
 
   /**
@@ -999,11 +901,11 @@ class DDSTableOfContents extends HostListenerMixin(
   static selectorTarget = '[name]';
 
   static get stableSelector() {
-    return `${ddsPrefix}--table-of-contents`;
+    return `${c4dPrefix}--table-of-contents`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTableOfContents;
+export default C4DTableOfContents;
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx
index 95a845abcc0..2a695c8af88 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.mdx
@@ -3,11 +3,9 @@ import contributing from '../../../../../../docs/contributing-license.md';
 import markdownContents from '../../../../docs/markdown-contents.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-tabs-extended-media>`
 
-
-# `<dds-tabs-extended-media>`
-
-> The Tabs extended with media - Tabbed collection of `<dds-tab>` content items.
+> The Tabs extended with media - Tabbed collection of `<cds-tab>` content items.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tabs-extended-media)
@@ -32,46 +30,54 @@ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended-media/index
 ### HTML
 
 ```html
-<dds-tabs-extended-media>
-  <dds-content-section-heading>Section heading</dds-content-section-heading>
-  <dds-tab label="First tab">
-    <dds-content-item-horizontal-media align="right">
-      <dds-image
+<cds-tabs-extended-media>
+  <cds-content-section-heading>Section heading</cds-content-section-heading>
+  <cds-tab label="First tab">
+    <cds-content-item-row-media align="right">
+      <cds-image
         slot="media"
         alt="Lorem ipsum"
-        default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"
-      ></dds-image>
-      <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
-      <dds-content-item-horizontal-copy
-        >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-        hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy
+        default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></cds-image>
+      <cds-content-item-heading>Aliquam condimentum</cds-content-item-heading>
+      <cds-content-item-row-copy
+        >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+        ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+        elit sollicitudin.</cds-content-item-row-copy
       >
-      <dds-link-list slot="footer" type="vertical">
-        <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
+      <cds-link-list slot="footer" type="vertical">
+        <cds-link-list-item-cta
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="local">
           Learn more
-        </dds-link-list-item-cta>
-        <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="external">
+        </cds-link-list-item-cta>
+        <cds-link-list-item-cta
+          icon-placement="right"
+          href="https://www.ibm.com"
+          cta-type="external">
           Microservices and containers
-        </dds-link-list-item-cta>
-      </dds-link-list>
-    </dds-content-item-horizontal-media>
-  </dds-tab>
-</dds-tabs-extended-media>
+        </cds-link-list-item-cta>
+      </cds-link-list>
+    </cds-content-item-row-media>
+  </cds-tab>
+</cds-tabs-extended-media>
 ```
 
 ## Props
 
-### `<dds-tab>`
+### `<cds-tab>`
 
-<Props of="dds-tab" />
+<Props of="cds-tab" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector       | Compatibility selector                   | Description |
-| ----------------------------- | ---------------------------------------- | ----------- |
-| `<dds-tabs-extended-media>`   | `data-autoid="dds--tabs-extended-media"` | Component   |
+| Web Components selector     | Compatibility selector                   | Description |
+| --------------------------- | ---------------------------------------- | ----------- |
+| `<cds-tabs-extended-media>` | `data-autoid="cds--tabs-extended-media"` | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx
index 7014f61b978..ce5e4f68203 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media';
 
@@ -17,77 +22,125 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSTabsExtendedMedia from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media.js';
+import C4DTabsExtendedMedia from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media.js';
 
 function App() {
   return (
-    <DDSTabsExtendedMedia>
-      <DDSContentSectionHeading>Section heading</DDSContentSectionHeading>
-      <DDSTab label="First tab">
-        <DDSContentItemHorizontalMedia align="left">
-          <DDSImage slot="media" alt="Image alt text" default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-          <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-          <DDSContentItemHorizontalMediaCopy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-            Phasellus at elit sollicitudin.</DDSContentItemHorizontalMediaCopy>
-          <DDSLinkList slot="footer" type="vertical">
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+    <C4DTabsExtendedMedia>
+      <C4DContentSectionHeading>Section heading</C4DContentSectionHeading>
+      <C4DTab label="First tab">
+        <C4DContentItemRowMedia align="left">
+          <C4DImage
+            slot="media"
+            alt="Image alt text"
+            default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+          <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+          <C4DContentItemRowMediaCopy>
+            Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin.
+          </C4DContentItemRowMediaCopy>
+          <C4DLinkList slot="footer" type="vertical">
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="local">
               Learn more
-            </DDSLinkListItemCTA>
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </C4DLinkListItemCTA>
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="external">
               Microservices and containers
-            </DDSLinkListItemCTA>
-          </DDSLinkList>
-        </DDSContentItemHorizontalMedia>
-      </DDSTab>
-      <DDSTab label="Second tab">
-        <DDSContentItemHorizontalMedia align="left">
-          <DDSImage slot="media" alt="Image alt text" default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-          <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-          <DDSContentItemHorizontalMediaCopy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-            Phasellus at elit sollicitudin.</DDSContentItemHorizontalMediaCopy>
-          <DDSLinkList slot="footer" type="vertical">
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+            </C4DLinkListItemCTA>
+          </C4DLinkList>
+        </C4DContentItemRowMedia>
+      </C4DTab>
+      <C4DTab label="Second tab">
+        <C4DContentItemRowMedia align="left">
+          <C4DImage
+            slot="media"
+            alt="Image alt text"
+            default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+          <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+          <C4DContentItemRowMediaCopy>
+            Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin.
+          </C4DContentItemRowMediaCopy>
+          <C4DLinkList slot="footer" type="vertical">
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="local">
               Learn more
-            </DDSLinkListItemCTA>
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </C4DLinkListItemCTA>
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="external">
               Microservices and containers
-            </DDSLinkListItemCTA>
-          </DDSLinkList>
-        </DDSContentItemHorizontalMedia>
-      </DDSTab>
-      <DDSTab label="Third tab">
-        <DDSContentItemHorizontalMedia align="left">
-          <DDSImage slot="media" alt="Image alt text" default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-          <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-          <DDSContentItemHorizontalMediaCopy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-            Phasellus at elit sollicitudin.</DDSContentItemHorizontalMediaCopy>
-          <DDSLinkList slot="footer" type="vertical">
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+            </C4DLinkListItemCTA>
+          </C4DLinkList>
+        </C4DContentItemRowMedia>
+      </C4DTab>
+      <C4DTab label="Third tab">
+        <C4DContentItemRowMedia align="left">
+          <C4DImage
+            slot="media"
+            alt="Image alt text"
+            default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+          <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+          <C4DContentItemRowMediaCopy>
+            Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin.
+          </C4DContentItemRowMediaCopy>
+          <C4DLinkList slot="footer" type="vertical">
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="local">
               Learn more
-            </DDSLinkListItemCTA>
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </C4DLinkListItemCTA>
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="external">
               Microservices and containers
-            </DDSLinkListItemCTA>
-          </DDSLinkList>
-        </DDSContentItemHorizontalMedia>
-      </DDSTab>
-      <DDSTab label="Fourth tab">
-        <DDSContentItemHorizontalMedia align="left">
-          <DDSImage slot="media" alt="Image alt text" default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></DDSImage>
-          <DDSContentItemHeading>Aliquam condimentum</DDSContentItemHeading>
-          <DDSContentItemHorizontalMediaCopy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit.
-            Phasellus at elit sollicitudin.</DDSContentItemHorizontalMediaCopy>
-          <DDSLinkList slot="footer" type="vertical">
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+            </C4DLinkListItemCTA>
+          </C4DLinkList>
+        </C4DContentItemRowMedia>
+      </C4DTab>
+      <C4DTab label="Fourth tab">
+        <C4DContentItemRowMedia align="left">
+          <C4DImage
+            slot="media"
+            alt="Image alt text"
+            default-src="https://fpoimg.com/672x378?text=16:9&bg_color=ee5396&text_color=161616"></C4DImage>
+          <C4DContentItemHeading>Aliquam condimentum</C4DContentItemHeading>
+          <C4DContentItemRowMediaCopy>
+            Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin.
+          </C4DContentItemRowMediaCopy>
+          <C4DLinkList slot="footer" type="vertical">
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="local">
               Learn more
-            </DDSLinkListItemCTA>
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </C4DLinkListItemCTA>
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="external">
               Microservices and containers
-            </DDSLinkListItemCTA>
-          </DDSLinkList>
-        </DDSContentItemHorizontalMedia>
-      </DDSTab>
-    </DDSTabsExtendedMedia>
+            </C4DLinkListItemCTA>
+          </C4DLinkList>
+        </C4DContentItemRowMedia>
+      </C4DTab>
+    </C4DTabsExtendedMedia>
   );
 }
 ```
@@ -98,10 +151,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
-| Web Components selector            | Compatibility selector | Description |
-| ---------------------------------- | ---------------------- | ----------- |
-| `<dds-tabs-extended-media>`        | N/A                    | Component   |
+| Web Components selector     | Compatibility selector | Description |
+| --------------------------- | ---------------------- | ----------- |
+| `<cds-tabs-extended-media>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx
index 4feb337fb97..fc09e030880 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.react.tsx
@@ -11,32 +11,32 @@ import { select, boolean } from '@storybook/addon-knobs';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSTabsExtendedMedia from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media';
+import C4DTabsExtendedMedia from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended-media/tabs-extended-media';
 // @ts-ignore
-import DDSTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
+import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
 /* eslint-disable max-len */
 // @ts-ignore
-import DDSContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
+import C4DContentSectionHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-section/content-section-heading';
 /* eslint-disable max-len */
 // @ts-ignore
-import DDSContentItemHorizontalMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media';
+import C4DContentItemRowMedia from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media';
 /* eslint-disable max-len */
 // @ts-ignore
-import DDSContentItemHorizontalMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-copy';
+import C4DContentItemRowMediaCopy from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-copy';
 /* eslint-disable max-len */
 // @ts-ignore
-import DDSContentItemHorizontalMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-horizontal/content-item-horizontal-media-video';
+import C4DContentItemRowMediaVideo from '@carbon/ibmdotcom-web-components/es/components-react/content-item-row/content-item-row-media-video';
 // @ts-ignore
-import DDSContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
+import C4DContentItemHeading from '@carbon/ibmdotcom-web-components/es/components-react/content-item/content-item-heading';
 // @ts-ignore
-import DDSLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
+import C4DLinkList from '@carbon/ibmdotcom-web-components/es/components-react/link-list/link-list';
 // @ts-ignore
-import DDSLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
+import C4DLinkListItemCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/link-list-item-cta';
 // @ts-ignore
-import DDSImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
+import C4DImage from '@carbon/ibmdotcom-web-components/es/components-react/image/image';
 
 import readme from './README.stories.react.mdx';
-import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-horizontal/defs';
+import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-row/defs';
 import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
 import textNullable from '../../../../.storybook/knob-text-nullable';
 
@@ -50,42 +50,59 @@ const mediaType = {
   [`Video`]: MEDIA_TYPE.VIDEO,
 };
 
-export const Default = args => {
-  const { sectionHeading, sectionHeadingText, align, type } = args?.TabsExtendedMedia ?? {};
+export const Default = (args) => {
+  const { sectionHeading, sectionHeadingText, align, type } =
+    args?.TabsExtendedMedia ?? {};
   const tabs: any[] = [];
 
   for (let i = 1; i < 5; i++) {
     tabs.push(
-      <DDSTab label={`Tab ${i}`}>
-        <DDSContentItemHorizontalMedia align={align}>
-          {type === MEDIA_TYPE.IMAGE ? <DDSImage slot="media" alt="Image alt text" default-src={imgLg16x9}></DDSImage> : ``}
+      <C4DTab label={`Tab ${i}`}>
+        <C4DContentItemRowMedia align={align}>
+          {type === MEDIA_TYPE.IMAGE ? (
+            <C4DImage
+              slot="media"
+              alt="Image alt text"
+              default-src={imgLg16x9}></C4DImage>
+          ) : (
+            ``
+          )}
           {type === MEDIA_TYPE.VIDEO ? (
-            <DDSContentItemHorizontalMediaVideo video-id="1_9h94wo6b"></DDSContentItemHorizontalMediaVideo>
+            <C4DContentItemRowMediaVideo video-id="0_ibuqxqbe"></C4DContentItemRowMediaVideo>
           ) : (
             ``
           )}
-          <DDSContentItemHeading>Tab heading {i}</DDSContentItemHeading>
-          <DDSContentItemHorizontalMediaCopy>
-            Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec
-            hendrerit. Phasellus at elit sollicitudin.
-          </DDSContentItemHorizontalMediaCopy>
-          <DDSLinkList slot="footer" type="vertical">
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="local">
+          <C4DContentItemHeading>Tab heading {i}</C4DContentItemHeading>
+          <C4DContentItemRowMediaCopy>
+            Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et
+            ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at
+            elit sollicitudin.
+          </C4DContentItemRowMediaCopy>
+          <C4DLinkList slot="footer" type="vertical">
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="local">
               CTA {i}
-            </DDSLinkListItemCTA>
-            <DDSLinkListItemCTA icon-placement="right" href="https://www.ibm.com" cta-type="external">
+            </C4DLinkListItemCTA>
+            <C4DLinkListItemCTA
+              icon-placement="right"
+              href="https://www.ibm.com"
+              cta-type="external">
               Microservices and containers
-            </DDSLinkListItemCTA>
-          </DDSLinkList>
-        </DDSContentItemHorizontalMedia>
-      </DDSTab>
+            </C4DLinkListItemCTA>
+          </C4DLinkList>
+        </C4DContentItemRowMedia>
+      </C4DTab>
     );
   }
   return (
-    <DDSTabsExtendedMedia section-heading={sectionHeading}>
-      <DDSContentSectionHeading>{sectionHeadingText || undefined}</DDSContentSectionHeading>
+    <C4DTabsExtendedMedia section-heading={sectionHeading}>
+      <C4DContentSectionHeading>
+        {sectionHeadingText || undefined}
+      </C4DContentSectionHeading>
       {tabs}
-    </DDSTabsExtendedMedia>
+    </C4DTabsExtendedMedia>
   );
 };
 
@@ -94,7 +111,8 @@ Default.story = {
     knobs: {
       TabsExtendedMedia: () => {
         const sectionHeading = boolean('Section heading', true);
-        const sectionHeadingText = sectionHeading && textNullable('Heading', 'Section heading');
+        const sectionHeadingText =
+          sectionHeading && textNullable('Heading', 'Section heading');
         return {
           sectionHeading,
           sectionHeadingText,
@@ -111,9 +129,14 @@ export default {
   decorators: [
     (story, args) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className={`${args?.TabsExtendedMedia?.sectionHeading ? `bx--col-lg-16` : `bx--col-lg-12`} bx--no-gutter`}>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div
+              className={`${
+                args?.TabsExtendedMedia?.sectionHeading
+                  ? `cds--col-lg-16`
+                  : `cds--col-lg-12`
+              } cds--no-gutter`}>
               {story()}
             </div>
           </div>
diff --git a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts
index e63981d4ee3..13cb7135dce 100644
--- a/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts
+++ b/packages/web-components/src/components/tabs-extended-media/__stories__/tabs-extended-media.stories.ts
@@ -7,122 +7,157 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import { boolean, select } from '@storybook/addon-knobs';
-import readme from './README.stories.mdx';
+import { html } from 'lit';
 import '../index';
-import '../../content-item-horizontal/index';
-import '../../image/index';
-import { MEDIA_ALIGN, MEDIA_TYPE } from '../../content-item-horizontal/defs';
-import imgLg16x9 from '../../../../../storybook-images/assets/720/fpo--16x9--720x405--001.jpg';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-const mediaAlign = {
-  [`Left`]: MEDIA_ALIGN.LEFT,
-  [`Right`]: MEDIA_ALIGN.RIGHT,
-};
+import '../../content-block-media/index';
+import '../../card-group/index';
+import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
+import { TABS_TYPE } from '../../tabs-extended/defs';
+import readme from './README.stories.mdx';
+import styles from '../../tabs-extended/__stories__/tabs-extended-stories.scss';
+import { prefix } from '../../../internal/vendor/@carbon/web-components/globals/settings';
 
-const mediaType = {
-  [`Image`]: MEDIA_TYPE.IMAGE,
-  [`Video`]: MEDIA_TYPE.VIDEO,
-};
+const copy = `Lorem ipsum dolor sit amet, *consectetur* adipiscing elit.
+  Vivamus sed interdum tortor. Sed id pellentesque diam.
+  In ut quam id mauris finibus efficitur quis ut arcu.
+  Praesent purus turpis, venenatis eget odio et, tincidunt bibendum sem.
+  Curabitur pretium elit non blandit lobortis.
+  Donec quis pretium odio, in dignissim sapien.`;
 
-export const Default = (args) => {
-  const { sectionHeading, sectionHeadingText, align, type } =
-    args?.TabsExtendedWithMedia ?? {};
-  const tabs: any[] = [];
+export const Default = () => html`
+  <style>
+    ${styles}
+  </style>
+  <c4d-tabs-extended-media value="first">
+    <c4d-tab id="tab-first" target="panel-first" value="first">
+      First tab with long text
+    </c4d-tab>
+    <c4d-tab id="tab-second" target="panel-second" value="second">
+      Second tab
+    </c4d-tab>
+    <c4d-tab id="tab-third" target="panel-third" value="third">
+      Third tab
+    </c4d-tab>
+    <c4d-tab id="tab-fourth" target="panel-fourth" value="fourth">
+      Fourth tab
+    </c4d-tab>
+    <c4d-tab label="Fifth tab" disabled>Fifth tab</c4d-tab>
+  </c4d-tabs-extended-media>
+  <div class="${prefix}-ce-demo-devenv--tab-panels">
+    <div id="panel-first" role="tabpanel" aria-labelledby="tab-first" hidden>
+      <c4d-content-block-media-content>
+        <c4d-content-item>
+          <c4d-content-item-heading
+            >Content for first tab goes here.</c4d-content-item-heading
+          >
+          <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+        </c4d-content-item>
 
-  for (let i = 1; i < 5; i++) {
-    tabs.push(html`
-      <dds-tab label="Tab ${i}">
-        <dds-content-item-horizontal-media align="${align}">
-          ${type === MEDIA_TYPE.IMAGE
-            ? html`
-                <dds-image
-                  slot="media"
-                  alt="Image alt text"
-                  default-src="${imgLg16x9}"></dds-image>
-              `
-            : ''}
-          ${type === MEDIA_TYPE.VIDEO
-            ? html`
-                <dds-content-item-horizontal-media-video
-                  video-id="1_9h94wo6b"></dds-content-item-horizontal-media-video>
-              `
-            : ''}
-          <dds-content-item-heading>Tab heading ${i}</dds-content-item-heading>
-          <dds-content-item-horizontal-media-copy
-            >Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean
-            et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus
-            at elit sollicitudin.</dds-content-item-horizontal-media-copy
+        <c4d-card link slot="footer" href="https://example.com">
+          <c4d-card-link-heading
+            >Lorem ipsum dolor sit amet</c4d-card-link-heading
           >
-          <dds-link-list slot="footer" type="vertical">
-            <dds-link-list-item-cta
-              icon-placement="right"
-              href="https://www.ibm.com"
-              cta-type="local">
-              CTA ${i}
-            </dds-link-list-item-cta>
-            <dds-link-list-item-cta
-              icon-placement="right"
-              href="https://www.ibm.com"
-              cta-type="external">
-              Microservices and containers
-            </dds-link-list-item-cta>
-          </dds-link-list>
-        </dds-content-item-horizontal-media>
-      </dds-tab>
-    `);
-  }
+          <c4d-card-footer> ${ArrowRight20({ slot: 'icon' })} </c4d-card-footer>
+        </c4d-card>
+      </c4d-content-block-media-content>
+    </div>
+    <div id="panel-second" role="tabpanel" aria-labelledby="tab-second" hidden>
+      <c4d-content-block-media-content>
+        <c4d-content-item>
+          <c4d-content-item-heading
+            >Content for second tab goes here.</c4d-content-item-heading
+          >
+          <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+        </c4d-content-item>
+      </c4d-content-block-media-content>
+    </div>
+    <div id="panel-third" role="tabpanel" aria-labelledby="tab-third" hidden>
+      <p>Content for third tab goes here.</p>
+    </div>
+    <div id="panel-fourth" role="tabpanel" aria-labelledby="tab-fourth" hidden>
+      <p>Content for fourth tab goes here.</p>
+    </div>
+  </div>
+`;
 
+export const Contained = () => {
   return html`
-    <dds-tabs-extended-media section-heading=${sectionHeading}>
-      <dds-content-section-heading
-        >${ifNonNull(sectionHeadingText)}</dds-content-section-heading
-      >
-      ${tabs}
-    </dds-tabs-extended-media>
-  `;
-};
+    <style>
+      ${styles}
+    </style>
+    <c4d-tabs-extended-media value="first" type="${TABS_TYPE.CONTAINED}">
+      <c4d-tab id="tab-first" target="panel-first" value="first">
+        First tab with long text
+      </c4d-tab>
+      <c4d-tab id="tab-second" target="panel-second" value="second">
+        Second tab - min amount for tooltip
+      </c4d-tab>
+      <c4d-tab id="tab-third" target="panel-third" value="third">
+        Third tab
+      </c4d-tab>
+      <c4d-tab id="tab-fourth" target="panel-fourth" value="fourth">
+        Fourth tab
+      </c4d-tab>
+      <c4d-tab label="Fifth tab" disabled>Fifth tab</c4d-tab>
+    </c4d-tabs-extended-media>
+    <div class="${prefix}-ce-demo-devenv--tab-panels">
+      <div id="panel-first" role="tabpanel" aria-labelledby="tab-first" hidden>
+        <c4d-content-block-media-content>
+          <c4d-content-item>
+            <c4d-content-item-heading
+              >Content for first tab goes here.</c4d-content-item-heading
+            >
+            <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+          </c4d-content-item>
 
-Default.story = {
-  parameters: {
-    knobs: {
-      TabsExtendedWithMedia: () => {
-        const sectionHeading = boolean('Section heading', true);
-        const sectionHeadingText =
-          sectionHeading && textNullable('Heading', 'Section heading');
-        return {
-          sectionHeading,
-          sectionHeadingText,
-          align: select('Alignment (align)', mediaAlign, MEDIA_ALIGN.LEFT),
-          type: select('Media type', mediaType, MEDIA_TYPE.IMAGE),
-        };
-      },
-    },
-    propsSet: {
-      default: {
-        TabsExtendedWithMedia: {
-          sectionHeading: 'TitleHeading',
-          align: 'left',
-          type: 'image',
-        },
-      },
-    },
-  },
+          <c4d-card link slot="footer" href="https://example.com">
+            <c4d-card-link-heading
+              >Lorem ipsum dolor sit amet</c4d-card-link-heading
+            >
+            <c4d-card-footer>
+              ${ArrowRight20({ slot: 'icon' })}
+            </c4d-card-footer>
+          </c4d-card>
+        </c4d-content-block-media-content>
+      </div>
+      <div
+        id="panel-second"
+        role="tabpanel"
+        aria-labelledby="tab-second"
+        hidden>
+        <c4d-content-block-media-content>
+          <c4d-content-item>
+            <c4d-content-item-heading
+              >Content for second tab goes here.</c4d-content-item-heading
+            >
+            <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+          </c4d-content-item>
+        </c4d-content-block-media-content>
+      </div>
+      <div id="panel-third" role="tabpanel" aria-labelledby="tab-third" hidden>
+        <p>Content for third tab goes here.</p>
+      </div>
+      <div
+        id="panel-fourth"
+        role="tabpanel"
+        aria-labelledby="tab-fourth"
+        hidden>
+        <p>Content for fourth tab goes here.</p>
+      </div>
+    </div>
+  `;
 };
 
 export default {
   title: 'Components/Tabs extended - with media',
   decorators: [
     (story, { args }) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
+      <div class="${prefix}--grid">
+        <div class="${prefix}--row">
           <div
             class="${args?.TabsExtendedWithMedia?.sectionHeading
-              ? `bx--col-lg-16`
-              : `bx--col-lg-12`} bx--no-gutter">
+              ? `${prefix}--col-lg-16`
+              : `${prefix}--col-lg-12`} ${prefix}--no-gutter">
             ${story()}
           </div>
         </div>
diff --git a/packages/web-components/src/components/tabs-extended-media/__tests__/tabs-extended-media.test.ts b/packages/web-components/src/components/tabs-extended-media/__tests__/tabs-extended-media.test.ts
index 5b89fca8cc7..8876f13ad1a 100644
--- a/packages/web-components/src/components/tabs-extended-media/__tests__/tabs-extended-media.test.ts
+++ b/packages/web-components/src/components/tabs-extended-media/__tests__/tabs-extended-media.test.ts
@@ -1,29 +1,29 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../tabs-extended-media';
 
 const template = (props?) => {
   const { children } = props ?? {};
   return html`
-    <dds-tabs-extended-media> ${children} </dds-tabs-extended-media>
+    <c4d-tabs-extended-media> ${children} </c4d-tabs-extended-media>
   `;
 };
 
-describe('dds-tabs-extended-media', function () {
+describe('c4d-tabs-extended-media', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-tabs-extended-media')
+        document.body.querySelector('c4d-tabs-extended-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
 
@@ -37,7 +37,7 @@ describe('dds-tabs-extended-media', function () {
       );
       await Promise.resolve();
       expect(
-        document.body.querySelector('dds-tabs-extended-media')
+        document.body.querySelector('c4d-tabs-extended-media')
       ).toMatchSnapshot({ mode: 'shadow' });
     });
   });
diff --git a/packages/web-components/src/components/tabs-extended-media/index.ts b/packages/web-components/src/components/tabs-extended-media/index.ts
index 1d5f12276d3..9e86339bd81 100644
--- a/packages/web-components/src/components/tabs-extended-media/index.ts
+++ b/packages/web-components/src/components/tabs-extended-media/index.ts
@@ -9,5 +9,5 @@
 
 import './tabs-extended-media';
 import '../tabs-extended/tabs-extended';
-import '../content-item-horizontal/content-item-horizontal-media';
+import '../content-item-row/content-item-row-media';
 import '../content-section/content-section-heading';
diff --git a/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.scss b/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.scss
index e5523062f4e..477b93cb733 100644
--- a/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.scss
+++ b/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.scss
@@ -5,5 +5,5 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/tabs-extended/tabs-extended';
-@import '@carbon/ibmdotcom-styles/scss/components/tabs-extended-media/tabs-extended-media';
+@use '@carbon/ibmdotcom-styles/scss/components/tabs-extended';
+@use '@carbon/ibmdotcom-styles/scss/components/tabs-extended-media';
diff --git a/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.ts b/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.ts
index 498917513f2..41dfe4be3f2 100644
--- a/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.ts
+++ b/packages/web-components/src/components/tabs-extended-media/tabs-extended-media.ts
@@ -7,54 +7,38 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { html, property } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { property } from 'lit/decorators.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-import DDSTabsExtended from '../tabs-extended/tabs-extended';
+import C4DTabsExtended from '../tabs-extended/tabs-extended';
 import styles from './tabs-extended-media.scss';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * A component to present media content inside a tabbed layout.
  *
- * @element dds-tabs-extended-media
+ * @element c4d-tabs-extended-media
  */
-@customElement(`${ddsPrefix}-tabs-extended-media`)
-class DDSTabsExtendedMedia extends DDSTabsExtended {
+@customElement(`${c4dPrefix}-tabs-extended-media`)
+class C4DTabsExtendedMedia extends C4DTabsExtended {
   /**
    * `true` if section heading should be shown.
    */
   @property({ attribute: 'section-heading', reflect: true })
   sectionHeading = 'true';
 
-  render() {
-    const { _isMobileVersion: isMobileVersion } = this;
-
-    return html`
-      <div class="${prefix}--tabs-extended-media">
-        ${this.sectionHeading === 'true'
-          ? html`
-              <div class="${prefix}--heading">
-                <slot name="heading"></slot>
-              </div>
-            `
-          : undefined}
-        <div class="${prefix}--tabs-extended">
-          ${isMobileVersion ? this._renderAccordion() : this._renderTabs()}
-        </div>
-      </div>
-    `;
-  }
-
   static get stableSelector() {
-    return `${ddsPrefix}--tabs-extended-media`;
+    return `${c4dPrefix}--tabs-extended-media`;
   }
 
   static styles = styles;
 }
 
+console.warn(
+  'The tabs-extended-media component has been deprecated in favor of tabs-extended component. ' +
+    'See tabs-extended documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTabsExtendedMedia;
+export default C4DTabsExtendedMedia;
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx
index 6166b0f2bf9..58899371657 100644
--- a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.mdx
@@ -3,11 +3,9 @@ import contributing from '../../../../../../docs/contributing-license.md';
 import markdownContents from '../../../../docs/markdown-contents.md';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
+# `<cds-tabs-extended>`
 
-
-# `<dds-tabs-extended>`
-
-> The Tabs Extended - Tabbed collection of `<dds-tab>` content items.
+> The Tabs Extended - Tabbed collection of `<cds-tab>` content items.
 
 > 💡 Check our
 > [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tabs-extended)
@@ -32,65 +30,69 @@ import '@carbon/ibmdotcom-web-components/es/components/tabs-extended/index.js';
 ### HTML
 
 ```html
-<dds-tabs-extended orientation="horizontal">
-  <dds-tab label="First tab">
+<cds-tabs-extended orientation="horizontal">
+  <cds-tab label="First tab">
     <p>Content for first tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Second tab">
+  </cds-tab>
+  <cds-tab label="Second tab">
     <p>Content for second tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Third tab" selected="true">
+  </cds-tab>
+  <cds-tab label="Third tab" selected="true">
     <p>Content for third tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Fourth tab">
+  </cds-tab>
+  <cds-tab label="Fourth tab">
     <p>Content for fourth tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Fifth tab" disabled="true">
+  </cds-tab>
+  <cds-tab label="Fifth tab" disabled="true">
     <p>Content for fifth tab goes here.</p>
-  </dds-tab>
-</dds-tabs-extended>
+  </cds-tab>
+</cds-tabs-extended>
 ```
 
 ## Setting active tab
 
-To set a different default tab to be active upon load, set the `active-tab` attribute to the index of your desired tab.
+To set a different default tab to be active upon load, set the `active-tab`
+attribute to the index of your desired tab.
 
-Here's an example targetting the third tab. Note that the indexing starts at 0, which means the third tab is the one at index 2.
+Here's an example targetting the third tab. Note that the indexing starts at 0,
+which means the third tab is the one at index 2.
 
 ```html
-<dds-tabs-extended active-tab='2' orientation="horizontal">
-  <dds-tab label="First tab">
+<cds-tabs-extended active-tab="2" orientation="horizontal">
+  <cds-tab label="First tab">
     <p>Content for first tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Second tab">
+  </cds-tab>
+  <cds-tab label="Second tab">
     <p>Content for second tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Third tab" selected="true">
+  </cds-tab>
+  <cds-tab label="Third tab" selected="true">
     <p>Content for third tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Fourth tab">
+  </cds-tab>
+  <cds-tab label="Fourth tab">
     <p>Content for fourth tab goes here.</p>
-  </dds-tab>
-  <dds-tab label="Fifth tab" disabled="true">
+  </cds-tab>
+  <cds-tab label="Fifth tab" disabled="true">
     <p>Content for fifth tab goes here.</p>
-  </dds-tab>
-</dds-tabs-extended>
+  </cds-tab>
+</cds-tabs-extended>
 ```
 
 ## Props
 
-### `<dds-tab>`
+### `<cds-tab>`
 
-<Props of="dds-tab" />
+<Props of="cds-tab" />
 <Description markdown={markdownContents} />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector             | Description |
 | ----------------------- | ---------------------------------- | ----------- |
-| `<dds-tabs-extended>`   | `data-autoid="dds--tabs-extended"` | Component   |
-| `<dds-tab>`             | `data-autoid="dds--tab"`           | Component   |
+| `<cds-tabs-extended>`   | `data-autoid="cds--tabs-extended"` | Component   |
+| `<cds-tab>`             | `data-autoid="cds--tab"`           | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx
index 641323d2572..03024263e4f 100644
--- a/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/tabs-extended/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
 
@@ -17,46 +22,48 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended.js';
-import DDSTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab.js';
+import C4DTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended.js';
+import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab.js';
 
 function App() {
   return (
-<DDSTabsExtended>
-  <DDSTab label="First tab">
-    <p>Content for first tab goes here.</p>
-  </DDSTab>
-  <DDSTab label="Second tab">
-    <p>Content for second tab goes here.</p>
-  </DDSTab>
-  <DDSTab label="Third tab">
-    <p>Content for third tab goes here.</p>
-  </DDSTab>  
-</DDSTabsExtended>
+    <C4DTabsExtended>
+      <C4DTab label="First tab">
+        <p>Content for first tab goes here.</p>
+      </C4DTab>
+      <C4DTab label="Second tab">
+        <p>Content for second tab goes here.</p>
+      </C4DTab>
+      <C4DTab label="Third tab">
+        <p>Content for third tab goes here.</p>
+      </C4DTab>
+    </C4DTabsExtended>
   );
 }
 ```
 
 ## Setting active tab
 
-To set a different default tab to be active upon load, set the `active-tab` attribute to the index of your desired tab.
+To set a different default tab to be active upon load, set the `active-tab`
+attribute to the index of your desired tab.
 
-Here's an example targetting the third tab. Note that the indexing starts at 0, which means the third tab is the one at index 2.
+Here's an example targetting the third tab. Note that the indexing starts at 0,
+which means the third tab is the one at index 2.
 
 ```javascript
 function App() {
   return (
-<DDSTabsExtended active-tab='2'>
-  <DDSTab label="First tab">
-    <p>Content for first tab goes here.</p>
-  </DDSTab>
-  <DDSTab label="Second tab">
-    <p>Content for second tab goes here.</p>
-  </DDSTab>
-  <DDSTab label="Third tab">
-    <p>Content for third tab goes here.</p>
-  </DDSTab>  
-</DDSTabsExtended>
+    <C4DTabsExtended active-tab="2">
+      <C4DTab label="First tab">
+        <p>Content for first tab goes here.</p>
+      </C4DTab>
+      <C4DTab label="Second tab">
+        <p>Content for second tab goes here.</p>
+      </C4DTab>
+      <C4DTab label="Third tab">
+        <p>Content for third tab goes here.</p>
+      </C4DTab>
+    </C4DTabsExtended>
   );
 }
 ```
@@ -67,11 +74,13 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-tabs-extended>`   | N/A                    | Component   |
-| `<dds-tab>`             | N/A                    | Component   |
+| `<cds-tabs-extended>`   | N/A                    | Component   |
+| `<cds-tab>`             | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended-stories.scss b/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended-stories.scss
new file mode 100644
index 00000000000..2f1ff994c94
--- /dev/null
+++ b/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended-stories.scss
@@ -0,0 +1,15 @@
+//
+// Copyright IBM Corp. 2019, 2023
+//
+// This source code is licensed under the Apache-2.0 license found in the
+// LICENSE file in the root directory of this source tree.
+//
+
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/styles/scss/spacing' as *;
+@use '@carbon/styles/scss/theme' as *;
+
+.#{$prefix}-ce-demo-devenv--tab-panels {
+  flex: 1;
+  align-self: stretch;
+}
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.react.tsx b/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.react.tsx
index 9c0224bfda1..cc426988aca 100644
--- a/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.react.tsx
+++ b/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.react.tsx
@@ -11,8 +11,8 @@ import React from 'react';
 // Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
 // In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
 // @ts-ignore
-import DDSTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
-import DDSTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
+import C4DTabsExtended from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tabs-extended';
+import C4DTab from '@carbon/ibmdotcom-web-components/es/components-react/tabs-extended/tab';
 import { select } from '@storybook/addon-knobs';
 import readme from './README.stories.react.mdx';
 import { ORIENTATION } from '../defs';
@@ -22,28 +22,28 @@ const orientationType = {
   [`vertical`]: ORIENTATION.VERTICAL,
 };
 
-export const Default = args => {
+export const Default = (args) => {
   const { orientation } = args?.TabsExtended ?? {};
   return (
-    <DDSTabsExtended orientation={orientation || undefined}>
-      <DDSTab
+    <C4DTabsExtended orientation={orientation || undefined}>
+      <C4DTab
         label="First tab with long text that wraps multiple lines. Lorem ipsum dolor sit amet consectetur adipiscing elit"
         selected={true}>
         <p>Content for first tab goes here.</p>
-      </DDSTab>
-      <DDSTab label="Second tab">
+      </C4DTab>
+      <C4DTab label="Second tab">
         <p>Content for second tab goes here.</p>
-      </DDSTab>
-      <DDSTab label="Third tab">
+      </C4DTab>
+      <C4DTab label="Third tab">
         <p>Content for third tab goes here.</p>
-      </DDSTab>
-      <DDSTab label="Fourth tab">
+      </C4DTab>
+      <C4DTab label="Fourth tab">
         <p>Content for fourth tab goes here.</p>
-      </DDSTab>
-      <DDSTab label="Fifth tab" disabled={true}>
+      </C4DTab>
+      <C4DTab label="Fifth tab" disabled={true}>
         <p>Content for fifth tab goes here.</p>
-      </DDSTab>
-    </DDSTabsExtended>
+      </C4DTab>
+    </C4DTabsExtended>
   );
 };
 
@@ -51,7 +51,11 @@ Default.story = {
   parameters: {
     knobs: {
       TabsExtended: () => ({
-        orientation: select('Orientation (orientation):', orientationType, ORIENTATION.HORIZONTAL),
+        orientation: select(
+          'Orientation (orientation):',
+          orientationType,
+          ORIENTATION.HORIZONTAL
+        ),
       }),
     },
   },
@@ -60,11 +64,11 @@ Default.story = {
 export default {
   title: 'Components/Tabs extended',
   decorators: [
-    story => {
+    (story) => {
       return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-lg-12 bx--no-gutter">{story()}</div>
+        <div className="cds--grid">
+          <div className="cds--row">
+            <div className="cds--col-lg-12 cds--no-gutter">{story()}</div>
           </div>
         </div>
       );
diff --git a/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.ts b/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.ts
index de01a5d7345..7f6f3616180 100644
--- a/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.ts
+++ b/packages/web-components/src/components/tabs-extended/__stories__/tabs-extended.stories.ts
@@ -7,20 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import '../index';
 import '../../content-block-media/index';
 import '../../card-group/index';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import { select } from '@storybook/addon-knobs';
 import ArrowRight20 from '../../../internal/vendor/@carbon/web-components/icons/arrow--right/20';
-import { ORIENTATION } from '../defs';
+import { TABS_TYPE } from '../defs';
 import readme from './README.stories.mdx';
-
-const orientationType = {
-  [`horizontal`]: ORIENTATION.HORIZONTAL,
-  [`vertical`]: ORIENTATION.VERTICAL,
-};
+import styles from './tabs-extended-stories.scss';
+import { prefix } from '../../../internal/vendor/@carbon/web-components/globals/settings';
 
 const copy = `Lorem ipsum dolor sit amet, *consectetur* adipiscing elit.
   Vivamus sed interdum tortor. Sed id pellentesque diam.
@@ -29,51 +24,110 @@ const copy = `Lorem ipsum dolor sit amet, *consectetur* adipiscing elit.
   Curabitur pretium elit non blandit lobortis.
   Donec quis pretium odio, in dignissim sapien.`;
 
-export const Default = (args) => {
-  const { orientation } = args?.TabsExtended ?? {};
+export const Default = () => html`
+  <style>
+    ${styles}
+  </style>
+  <c4d-tabs-extended value="first">
+    <c4d-tab id="tab-first" target="panel-first" value="first">
+      First tab with long text
+    </c4d-tab>
+    <c4d-tab id="tab-second" target="panel-second" value="second">
+      Second tab
+    </c4d-tab>
+    <c4d-tab id="tab-third" target="panel-third" value="third">
+      Third tab
+    </c4d-tab>
+    <c4d-tab id="tab-fourth" target="panel-fourth" value="fourth">
+      Fourth tab
+    </c4d-tab>
+    <c4d-tab label="Fifth tab" disabled>Fifth tab</c4d-tab>
+  </c4d-tabs-extended>
+  <div class="${prefix}-ce-demo-devenv--tab-panels">
+    <div id="panel-first" role="tabpanel" aria-labelledby="tab-first" hidden>
+      <c4d-content-item>
+        <c4d-content-item-heading>
+          Content for first tab goes here.
+        </c4d-content-item-heading>
+        <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+      </c4d-content-item>
+    </div>
+    <div id="panel-second" role="tabpanel" aria-labelledby="tab-second" hidden>
+      <c4d-content-item>
+        <c4d-content-item-heading>
+          Content for second tab goes here.
+        </c4d-content-item-heading>
+        <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+      </c4d-content-item>
+    </div>
+    <div id="panel-third" role="tabpanel" aria-labelledby="tab-third" hidden>
+      <p>Content for third tab goes here.</p>
+    </div>
+    <div id="panel-fourth" role="tabpanel" aria-labelledby="tab-fourth" hidden>
+      <p>Content for fourth tab goes here.</p>
+    </div>
+  </div>
+`;
+
+export const Contained = () => {
   return html`
-    <dds-tabs-extended orientation="${ifNonNull(orientation)}">
-      <dds-tab
-        label="First tab with long text that wraps multiple lines. Lorem ipsum dolor sit amet consectetur adipiscing elit"
-        selected>
-        <dds-content-block-media-content>
-          <dds-content-item>
-            <dds-content-item-heading
-              >Content for first tab goes here.</dds-content-item-heading
-            >
-            <dds-content-item-copy>${copy}</dds-content-item-copy>
-          </dds-content-item>
+    <style>
+      ${styles}
+    </style>
+    <c4d-tabs-extended value="first" type="${TABS_TYPE.CONTAINED}">
+      <c4d-tab id="tab-first" target="panel-first" value="first">
+        First tab with long text
+      </c4d-tab>
+      <c4d-tab id="tab-second" target="panel-second" value="second">
+        Second tab - min amount for tooltip
+      </c4d-tab>
+      <c4d-tab id="tab-third" target="panel-third" value="third">
+        Third tab
+      </c4d-tab>
+      <c4d-tab id="tab-fourth" target="panel-fourth" value="fourth">
+        Fourth tab
+      </c4d-tab>
+      <c4d-tab label="Fifth tab" disabled>Fifth tab</c4d-tab>
+    </c4d-tabs-extended>
+    <div class="${prefix}-ce-demo-devenv--tab-panels">
+      <div id="panel-first" role="tabpanel" aria-labelledby="tab-first" hidden>
+        <c4d-content-item>
+          <c4d-content-item-heading>
+            Content for first tab goes here.
+          </c4d-content-item-heading>
+          <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+        </c4d-content-item>
 
-          <dds-card-link-cta slot="footer" href="https://example.com">
-            <dds-card-link-heading
-              >Lorem ipsum dolor sit amet</dds-card-link-heading
-            >
-            <dds-card-cta-footer>
-              ${ArrowRight20({ slot: 'icon' })}
-            </dds-card-cta-footer>
-          </dds-card-link-cta>
-        </dds-content-block-media-content>
-      </dds-tab>
-      <dds-tab label="Second tab - min amount for tooltip ">
-        <dds-content-block-media-content>
-          <dds-content-item>
-            <dds-content-item-heading
-              >Content for second tab goes here.</dds-content-item-heading
-            >
-            <dds-content-item-copy>${copy}</dds-content-item-copy>
-          </dds-content-item>
-        </dds-content-block-media-content>
-      </dds-tab>
-      <dds-tab label="Third tab">
+        <c4d-card link slot="footer" href="https://example.com">
+          <c4d-card-link-heading>
+            Lorem ipsum dolor sit amet
+          </c4d-card-link-heading>
+          <c4d-card-footer> ${ArrowRight20({ slot: 'icon' })} </c4d-card-footer>
+        </c4d-card>
+      </div>
+      <div
+        id="panel-second"
+        role="tabpanel"
+        aria-labelledby="tab-second"
+        hidden>
+        <c4d-content-item>
+          <c4d-content-item-heading>
+            Content for second tab goes here.
+          </c4d-content-item-heading>
+          <c4d-content-item-copy>${copy}</c4d-content-item-copy>
+        </c4d-content-item>
+      </div>
+      <div id="panel-third" role="tabpanel" aria-labelledby="tab-third" hidden>
         <p>Content for third tab goes here.</p>
-      </dds-tab>
-      <dds-tab label="Fourth tab">
+      </div>
+      <div
+        id="panel-fourth"
+        role="tabpanel"
+        aria-labelledby="tab-fourth"
+        hidden>
         <p>Content for fourth tab goes here.</p>
-      </dds-tab>
-      <dds-tab label="Fifth tab" disabled>
-        <p>Content for fifth tab goes here.</p>
-      </dds-tab>
-    </dds-tabs-extended>
+      </div>
+    </div>
   `;
 };
 
@@ -81,9 +135,11 @@ export default {
   title: 'Components/Tabs extended',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--no-gutter">${story()}</div>
+      <div class="${prefix}--grid">
+        <div class="${prefix}--row">
+          <div class="${prefix}--col-lg-12 ${prefix}--no-gutter">
+            ${story()}
+          </div>
         </div>
       </div>
     `,
@@ -91,21 +147,5 @@ export default {
   parameters: {
     ...readme.parameters,
     hasStoryPadding: true,
-    knobs: {
-      TabsExtended: () => ({
-        orientation: select(
-          'Orientation (orientation):',
-          orientationType,
-          ORIENTATION.HORIZONTAL
-        ),
-      }),
-    },
-    propsSet: {
-      default: {
-        TabsExtended: {
-          orientation: 'horizontal',
-        },
-      },
-    },
   },
 };
diff --git a/packages/web-components/src/components/tabs-extended/__tests__/tabs-extended.test.ts b/packages/web-components/src/components/tabs-extended/__tests__/tabs-extended.test.ts
index ae75e885db5..6eddc58e9e7 100644
--- a/packages/web-components/src/components/tabs-extended/__tests__/tabs-extended.test.ts
+++ b/packages/web-components/src/components/tabs-extended/__tests__/tabs-extended.test.ts
@@ -1,26 +1,26 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { html, render } from 'lit-html';
+import { html, render } from 'lit/html.js';
 import '../tabs-extended';
 
 const template = (props?) => {
   const { children } = props ?? {};
-  return html` <dds-tabs-extended> ${children} </dds-tabs-extended> `;
+  return html` <c4d-tabs-extended> ${children} </c4d-tabs-extended> `;
 };
 
-describe('dds-tabs-extended', function () {
+describe('c4d-tabs-extended', function () {
   describe('Misc attributes', function () {
     it('should render with minimum attributes', async function () {
       render(template(), document.body);
       await Promise.resolve();
-      expect(document.body.querySelector('dds-tabs-extended')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-tabs-extended')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
@@ -35,7 +35,7 @@ describe('dds-tabs-extended', function () {
         document.body
       );
       await Promise.resolve();
-      expect(document.body.querySelector('dds-tabs-extended')).toMatchSnapshot({
+      expect(document.body.querySelector('c4d-tabs-extended')).toMatchSnapshot({
         mode: 'shadow',
       });
     });
diff --git a/packages/web-components/src/components/tabs-extended/defs.ts b/packages/web-components/src/components/tabs-extended/defs.ts
index de252ddb222..400bd38450b 100644
--- a/packages/web-components/src/components/tabs-extended/defs.ts
+++ b/packages/web-components/src/components/tabs-extended/defs.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021
+ * Copyright IBM Corp. 2021, 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.
@@ -21,3 +21,18 @@ export enum ORIENTATION {
    */
   VERTICAL = 'vertical',
 }
+
+/**
+ * Tabs types.
+ */
+export enum TABS_TYPE {
+  /**
+   * Regular tabs.
+   */
+  REGULAR = '',
+
+  /**
+   * Contained type.
+   */
+  CONTAINED = 'contained',
+}
diff --git a/packages/web-components/src/components/tabs-extended/tab.ts b/packages/web-components/src/components/tabs-extended/tab.ts
index aece8f9fc2e..ba6069d5270 100644
--- a/packages/web-components/src/components/tabs-extended/tab.ts
+++ b/packages/web-components/src/components/tabs-extended/tab.ts
@@ -7,161 +7,34 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement, state } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import ChevronRight20 from '../../internal/vendor/@carbon/web-components/icons/chevron--right/20.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './tabs-extended.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import MediaQueryMixin, {
-  MQBreakpoints,
-  MQDirs,
-} from '../../component-mixins/media-query/media-query';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
+import CDSTab from '../../internal/vendor/@carbon/web-components/components/tabs/tab';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * A tab within a tabbed layout.
  *
- * @element dds-tab
+ * @element c4d-tab
  */
-@customElement(`${ddsPrefix}-tab`)
-class DDSTab extends MediaQueryMixin(StableSelectorMixin(LitElement), {
-  [MQBreakpoints.LG]: MQDirs.MAX,
-}) {
-  /**
-   * Whether we're viewing smaller or larger window.
-   */
-  @state()
-  _isMobileVersion = this.carbonBreakpoints.lg.matches;
-
-  mediaQueryCallbackMaxLG() {
-    this._isMobileVersion = this.carbonBreakpoints.lg.matches;
-  }
-
-  /**
-   * Defines label of the tab.
-   */
-  @property({ reflect: true })
-  label = '';
-
-  /**
-   * Defines the disabled state of the tab.
-   */
-  @property({ reflect: true, type: Boolean })
-  disabled: boolean = false;
-
-  /**
-   * Defines the selected state of the tab.
-   */
-  @property({ reflect: true, type: Boolean })
-  selected: boolean = false;
-
-  /**
-   * Defines the index of the tab relative to other tabs.
-   */
-  @state()
-  private _index: number = 0;
-
-  /**
-   * Sets the index of the tab.
-   */
-  setIndex(index: number) {
-    this._index = index;
-  }
-
-  /**
-   * Returns the index of the tab.
-   */
-  getIndex() {
-    return this._index;
-  }
-
-  protected updated(
-    _changedProperties: Map<string | number | symbol, unknown>
-  ): void {
-    if (_changedProperties.has('selected')) {
-      const { eventTabSelected } = this.constructor as typeof DDSTab;
-      this.dispatchEvent(
-        new CustomEvent(eventTabSelected, {
-          bubbles: true,
-          composed: true,
-          detail: {
-            selected: this.selected,
-          },
-        })
-      );
-    }
-
-    super.updated(_changedProperties);
-  }
-
-  protected _renderAccordionItem() {
-    const { label, selected, disabled, _index: index } = this;
-    const classes = classMap({
-      [`${prefix}--accordion__item`]: true,
-      [`${prefix}--accordion__item--active`]: selected,
-      [`${prefix}--accordion__item--disabled`]: disabled,
-    });
-    return html`
-      <li class="${classes}">
-        <button
-          class="${prefix}--accordion__heading"
-          aria-expanded="${selected}"
-          aria-controls="pane-${index}"
-          tabindex="${index + 1}"
-          ?disabled="${disabled}">
-          ${ChevronRight20({
-            part: 'expando-icon',
-            class: `${prefix}--accordion__arrow`,
-          })}
-          <div class="${prefix}--accordion__title">${label}</div>
-        </button>
-        <div id="pane-${index}" class="${prefix}--accordion__content">
-          <slot></slot>
-        </div>
-      </li>
-    `;
-  }
-
-  protected _renderTabItem() {
-    const { _index, selected } = this;
-    return html`
-      <div
-        id="tab-panel-${_index}-default"
-        tabindex="0"
-        class="tab-${_index}-container"
-        role="tabpanel"
-        aria-labelledby="tab-link-${_index}-default"
-        aria-hidden="${!selected}"
-        ?hidden="${!selected}">
-        <slot></slot>
-      </div>
-    `;
-  }
-
-  render() {
-    return this._isMobileVersion
-      ? this._renderAccordionItem()
-      : this._renderTabItem();
-  }
-
+@customElement(`${c4dPrefix}-tab`)
+class C4DTab extends StableSelectorMixin(CDSTab) {
   static get stableSelector() {
-    return `${ddsPrefix}--tab`;
+    return `${c4dPrefix}--tab`;
   }
 
   /**
    * An event that fires whenever the tab's selected state changes.
    */
   static get eventTabSelected() {
-    return `${ddsPrefix}-tab-selected`;
+    return `${c4dPrefix}-tab-selected`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTab;
+export default C4DTab;
diff --git a/packages/web-components/src/components/tabs-extended/tabs-extended.scss b/packages/web-components/src/components/tabs-extended/tabs-extended.scss
index ce0dfe9ca7f..21846305b1e 100644
--- a/packages/web-components/src/components/tabs-extended/tabs-extended.scss
+++ b/packages/web-components/src/components/tabs-extended/tabs-extended.scss
@@ -5,25 +5,6 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '@carbon/ibmdotcom-styles/scss/components/tabs-extended/tabs-extended';
-
-:host(#{$dds-prefix}-tabs-extended) {
-  margin: 0;
-}
-
-:host(#{$dds-prefix}-tab) {
-  display: contents;
-
-  .#{$prefix}--accordion__item:last-of-type {
-    border-bottom-width: none;
-    border-bottom-style: none;
-  }
-
-  &:last-of-type() {
-    .#{$prefix}--accordion__item:last-of-type {
-      border-bottom-width: 1px;
-      border-bottom-style: solid;
-    }
-  }
-}
+@use '@carbon/styles/scss/config' as *;
+@use '@carbon/ibmdotcom-styles/scss/components/tabs-extended';
+@use '@carbon/ibmdotcom-styles/scss/globals/vars' as *;
diff --git a/packages/web-components/src/components/tabs-extended/tabs-extended.ts b/packages/web-components/src/components/tabs-extended/tabs-extended.ts
index 88757b9add1..de523b0a5f3 100644
--- a/packages/web-components/src/components/tabs-extended/tabs-extended.ts
+++ b/packages/web-components/src/components/tabs-extended/tabs-extended.ts
@@ -7,308 +7,76 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { html, state, LitElement, TemplateResult, property } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import MediaQueryMixin, {
-  MQBreakpoints,
-  MQDirs,
-} from '../../component-mixins/media-query/media-query';
-import DDSTab from './tab';
+import CDSTabs from '../../internal/vendor/@carbon/web-components/components/tabs/tabs';
+
 import styles from './tabs-extended.scss';
-import { ORIENTATION } from './defs';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * A component to present content inside a tabbed layout.
  *
- * @element dds-tabs-extended
+ * @element c4d-tabs-extended
  */
-@customElement(`${ddsPrefix}-tabs-extended`)
-class DDSTabsExtended extends MediaQueryMixin(StableSelectorMixin(LitElement), {
-  [MQBreakpoints.LG]: MQDirs.MAX,
-}) {
-  /**
-   * Whether we're viewing smaller or larger window.
-   */
-  @state()
-  _isMobileVersion = this.carbonBreakpoints.lg.matches;
-
-  mediaQueryCallbackMaxLG() {
-    this._isMobileVersion = this.carbonBreakpoints.lg.matches;
+@customElement(`${c4dPrefix}-tabs-extended`)
+class C4DTabsExtended extends StableSelectorMixin(CDSTabs) {
+  static get stableSelector() {
+    return `${c4dPrefix}--tabs-extended`;
   }
 
   /**
-   * Child tab components.
+   * A selector that will return tabs.
    */
-  @state()
-  private _tabItems: DDSTab[] = [];
+  static get selectorItem() {
+    return `${c4dPrefix}-tab`;
+  }
 
   /**
-   * Defines the active tab index.
+   * A selector that will return enabled tabs.
    */
-  @state()
-  private _activeTabIndex: number = 0;
-
-  @state()
-  private _isLTR: boolean = true;
-
-  @property({ attribute: 'active-tab', reflect: true })
-  _activeTab: string = '0';
+  static get selectorItemEnabled() {
+    return `${c4dPrefix}-tab:not([disabled])`;
+  }
 
   /**
-   * Handler for @slotChange, creates tabs from dds-tab components.
-   *
-   * @private
+   * A selector that will return highlighted tabs.
    */
-  protected _handleSlotChange(event: Event) {
-    const slottedNodes = (event.target as HTMLSlotElement).assignedNodes({
-      flatten: true,
-    });
-    this._tabItems = slottedNodes.filter(
-      (node) => node instanceof DDSTab
-    ) as DDSTab[];
-    this._tabItems.forEach((tab, index) => {
-      this._activeTabIndex = (tab as DDSTab).selected
-        ? index
-        : this._activeTabIndex;
-    });
-  }
-
-  private _handleClick(index, e) {
-    e.preventDefault();
-    this._setActiveItem(index);
-  }
-
-  private _handleAccordionClick(e) {
-    const tab = e.target.closest('dds-tab');
-    this._handleClick(tab.getIndex(), e);
-  }
-
-  private _setActiveItem(index: number) {
-    this._activeTabIndex = index;
-    this._activeTab = index.toString();
-    const newTabLink = this.shadowRoot?.querySelector(`
-    [role="tablist"] li[role="tab"]:nth-child(${
-      index + 1
-    }) .bx--tabs__nav-link`);
-    if (newTabLink instanceof HTMLElement) {
-      newTabLink.focus();
-    }
-  }
-
-  private _handleTabListKeyDown(event: KeyboardEvent) {
-    const { key } = event;
-    const {
-      _activeTabIndex: activeTab,
-      _tabItems: tabItems,
-      _isLTR: isLTR,
-    } = this;
-    switch (key) {
-      case 'ArrowRight':
-        if (isLTR) {
-          this._setActiveItem(this._getNextTab(activeTab));
-        } else {
-          this._setActiveItem(this._getPrevTab(activeTab));
-        }
-        break;
-      case 'ArrowLeft':
-        if (isLTR) {
-          this._setActiveItem(this._getPrevTab(activeTab));
-        } else {
-          this._setActiveItem(this._getNextTab(activeTab));
-        }
-        break;
-      case 'ArrowUp':
-        this._setActiveItem(this._getPrevTab(activeTab));
-        break;
-      case 'ArrowDown':
-        this._setActiveItem(this._getNextTab(activeTab));
-        break;
-      case 'Home':
-        this._setActiveItem(this._getNextTab(-1));
-        break;
-      case 'End':
-        this._setActiveItem(this._getPrevTab(tabItems.length));
-        break;
-      default:
-        break;
-    }
-  }
-
-  private _getNextTab(activeIndex) {
-    let tabItems: DDSTab[];
-
-    if (activeIndex > -1 && activeIndex < this._tabItems.length) {
-      tabItems = this._reorderTabsFrom(activeIndex);
-    } else {
-      tabItems = Array.from(this._tabItems);
-    }
-
-    const queuedItem = tabItems.find((tabItem) => !tabItem.disabled);
-
-    return this._tabItems.findIndex((tabItem) => tabItem === queuedItem);
-  }
-
-  private _getPrevTab(activeIndex) {
-    let tabItems: DDSTab[];
-
-    if (activeIndex > 0 && activeIndex < this._tabItems.length) {
-      tabItems = this._reorderTabsFrom(activeIndex - 1);
-    } else {
-      tabItems = Array.from(this._tabItems);
-    }
-
-    const queuedItem = tabItems.reverse().find((tabItem) => !tabItem.disabled);
-
-    return this._tabItems.findIndex((tabItem) => tabItem === queuedItem);
-  }
-
-  private _reorderTabsFrom(activeIndex) {
-    const tabItems = Array.from(this._tabItems);
-
-    tabItems.forEach((_tabItem, i) => {
-      if (i <= activeIndex) {
-        tabItems.push(tabItems.shift() as DDSTab);
-      }
-    });
-
-    return tabItems;
-  }
-
-  updated(changedProperties) {
-    const { _isMobileVersion, _tabItems } = this;
-    this._isLTR = window.getComputedStyle(this).direction === 'ltr';
-    this._activeTabIndex = parseInt(this._activeTab, 10);
-
-    if (changedProperties.has('_tabItems')) {
-      _tabItems.forEach((tab, index) => {
-        (tab as DDSTab).setIndex(index);
-
-        if (_isMobileVersion) {
-          tab.addEventListener('click', this._handleAccordionClick.bind(this));
-        }
-      });
-    }
-
-    if (
-      changedProperties.has('_activeTabIndex') ||
-      changedProperties.has('_tabItems')
-    ) {
-      _tabItems.forEach((tab, index) => {
-        (tab as DDSTab).selected = index === this._activeTabIndex;
-      });
-    }
-
-    if (
-      (changedProperties.has('_isMobileVersion') && !_isMobileVersion) ||
-      (changedProperties.has('_tabItems') && !_isMobileVersion)
-    ) {
-      // Set aria-label on tabs for desktop.
-      _tabItems.forEach((tab, index) => {
-        const navLink = this.shadowRoot!.querySelectorAll(
-          `.${prefix}--tabs__nav-link`
-        )[index];
-        const navText = navLink!.querySelector('div p');
-        if (navText!.scrollHeight > navText!.clientHeight) {
-          const label = (tab as DDSTab).getAttribute('label');
-          if (label) {
-            navLink!.setAttribute('aria-label', label);
-            navLink!.setAttribute('hasTooltip', label);
-          }
-        }
-      });
-    }
-  }
-
-  protected _renderAccordion(): TemplateResult {
-    return html`
-      <ul class="${prefix}--accordion">
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-      </ul>
-    `;
-  }
-
-  protected _renderTabs(): TemplateResult {
-    const { _tabItems: tabs } = this;
-    return html`
-      <div class="${prefix}--tabs">
-        <ul
-          class="${prefix}--tabs__nav ${prefix}--tabs__nav--hidden"
-          role="tablist"
-          @keydown="${this._handleTabListKeyDown}">
-          ${tabs.map((tab, index) => {
-            const { disabled } = tab as DDSTab;
-            const active = index === this._activeTabIndex;
-            const label = (tab as DDSTab).getAttribute('label');
-            const classes = classMap({
-              'bx--tabs__nav-item': true,
-              'bx--tabs__nav-item--selected': active,
-              'bx--tabs__nav-item--disabled': disabled,
-            });
-            return html`
-              <li
-                class="${classes}"
-                aria-selected="${active}"
-                data-target=".tab-${index}-default"
-                role="tab"
-                ?disabled="${disabled}">
-                <button
-                  tabindex="${active ? '0' : '-1'}"
-                  id="tab-link-${index}-default"
-                  class="${prefix}--tabs__nav-link"
-                  type="button"
-                  aria-controls="tab-panel-${index}-default"
-                  @click="${(e) => this._handleClick(index, e)}">
-                  <div><p>${label}</p></div>
-                </button>
-              </li>
-            `;
-          })}
-        </ul>
-      </div>
-      <div class="${prefix}--tab-content">
-        <slot @slotchange="${this._handleSlotChange}"></slot>
-      </div>
-    `;
+  static get selectorItemHighlighted() {
+    return `${c4dPrefix}-tab[highlighted]`;
   }
 
   /**
-   * Returns a class-name based on the defined Orientation value
+   * A selector that will return selected tabs.
    */
-  protected _getOrientationClass() {
-    return classMap({
-      [`${prefix}--tabs-extended`]: true,
-      [`${prefix}--tabs-extended--${this.orientation}`]: this.orientation,
-    });
+  static get selectorItemSelected() {
+    return `${c4dPrefix}-tab[selected]`;
   }
 
   /**
-   * Orientation (horizontal (default) | vertical)
+   * The name of the custom event fired before a tab is selected upon a user gesture.
+   * Cancellation of this event stops changing the user-initiated selection.
    */
-  @property({ attribute: 'orientation', reflect: true })
-  orientation = ORIENTATION.HORIZONTAL;
-
-  render() {
-    const { _isMobileVersion: isMobileVersion } = this;
-    return html`
-      <div class="${this._getOrientationClass()}">
-        ${isMobileVersion ? this._renderAccordion() : this._renderTabs()}
-      </div>
-    `;
+  static get eventBeforeSelect() {
+    return `${c4dPrefix}-tabs-beingselected`;
   }
 
-  static get stableSelector() {
-    return `${ddsPrefix}--tabs-extended`;
+  /**
+   * The name of the custom event fired after a a tab is selected upon a user gesture.
+   */
+  static get eventSelect() {
+    return `${c4dPrefix}-tabs-selected`;
   }
 
   static styles = styles;
 }
 
+console.warn(
+  'The tabs-extended orientation prop has been deprecated in favor for only horizontal variations. ' +
+    'See tabs-extended documentation for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTabsExtended;
+export default C4DTabsExtended;
diff --git a/packages/web-components/src/components/tag-group/__stories__/README.stories.mdx b/packages/web-components/src/components/tag-group/__stories__/README.stories.mdx
deleted file mode 100644
index 02abf787cdc..00000000000
--- a/packages/web-components/src/components/tag-group/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import markdownContents from '../../../../docs/markdown-contents.md';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-
-
-
-# Tag Group
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tag-group)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tag-group)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/tag-group/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['tag-group'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<dds-tag-group>
-  <dds-tag-link href="https://example.com">
-    Cloud
-  </dds-tag-link>
-  <dds-tag-link href="https://example.com">
-    Blockchain
-  </dds-tag-link>
-  <dds-tag-link href="https://example.com">
-    Supply chain
-  </dds-tag-link>
-  <dds-tag-link href="https://example.com">
-    Watson heath
-  </dds-tag-link>
-  <dds-tag-link href="https://example.com">
-    IT Infrastructure
-  </dds-tag-link>
-  <dds-tag-link href="https://example.com">
-    WebSphere
-  </dds-tag-link>
-</dds-tag-group>
-```
-
-## Props
-
-<Props of="dds-tag-group" />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector     | Compatibility selector                   | Description |
-| --------------------------- | ---------------------------------------- | ----------- |
-| `<dds-tag-group>`           | `data-autoid="dds--tag-group"`          | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tag-group/__stories__/README.stories.react.mdx b/packages/web-components/src/components/tag-group/__stories__/README.stories.react.mdx
deleted file mode 100644
index 2e3d66aeea4..00000000000
--- a/packages/web-components/src/components/tag-group/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,55 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-
-# Tag Group
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tag-group)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tag-group)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS
-
-```javascript
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group.js';
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link.js';
-
-function App() {
-  return (
-  <DDSTagGroup>
-    <DDSTagLink href="https://example.com">
-      Cloud
-    </DDSTagLink>
-    <DDSTagLink href="https://example.com">
-      Blockchain
-    </DDSTagLink>
-    <DDSTagLink href="https://example.com">
-      Supply chain
-    </DDSTagLink>
-    <DDSTagLink href="https://example.com">
-      WebSphere
-    </DDSTagLink>
-  </DDSTagGroup>
-  );
-}
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<DDSTagGroup>`       | N/A                    | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tag-group/__stories__/tag-group.stories.react.tsx b/packages/web-components/src/components/tag-group/__stories__/tag-group.stories.react.tsx
deleted file mode 100644
index 88a0448ce55..00000000000
--- a/packages/web-components/src/components/tag-group/__stories__/tag-group.stories.react.tsx
+++ /dev/null
@@ -1,72 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { select } from '@storybook/addon-knobs';
-import React from 'react';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link';
-// @ts-ignore
-import DDSTagGroup from '@carbon/ibmdotcom-web-components/es/components-react/tag-group/tag-group';
-import { Tag } from 'carbon-components-react';
-import '@carbon/web-components/es/components/tag/tag.js';
-import readme from './README.stories.react.mdx';
-
-const tagTitles = [
-  'Cloud',
-  'Blockchain',
-  'Supply chain',
-  'Watson health',
-  'IT Infrastructure',
-  'WebSphere',
-];
-
-const tagTypeOptions = ['Tag Link', 'Carbon tag'];
-
-export const Default = (args) => {
-  const { tagType } = args?.TagGroup ?? {};
-  return (
-    <DDSTagGroup>
-      {tagType === tagTypeOptions[0]
-        ? tagTitles.map((title) => (
-            <DDSTagLink href={'https://example.com'}>{title}</DDSTagLink>
-          ))
-        : tagTitles.map((title) => <Tag>{title}</Tag>)}
-    </DDSTagGroup>
-  );
-};
-
-Default.story = {
-  parameters: {
-    knobs: {
-      TagGroup: () => ({
-        tagType: select('Tag Type:', tagTypeOptions, 'Tag Link'),
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Tag group',
-  decorators: [
-    (story) => {
-      return (
-        <div className="bx--grid">
-          <div className="bx--row">
-            <div className="bx--col-sm-16 bx--col-md-6">{story()}</div>
-          </div>
-        </div>
-      );
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/tag-group/__stories__/tag-group.stories.ts b/packages/web-components/src/components/tag-group/__stories__/tag-group.stories.ts
deleted file mode 100644
index 6c0d1f380fe..00000000000
--- a/packages/web-components/src/components/tag-group/__stories__/tag-group.stories.ts
+++ /dev/null
@@ -1,69 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import { select } from '@storybook/addon-knobs';
-import readme from './README.stories.mdx';
-import '../index';
-import '../../../internal/vendor/@carbon/web-components/components/tag/tag.js';
-
-const tagTitles = [
-  'Cloud',
-  'Blockchain',
-  'Supply chain',
-  'Watson health',
-  'IT Infrastructure',
-  'WebSphere',
-];
-
-const tagTypeOptions = ['Tag Link', 'Carbon tag'];
-
-export const Default = (args) => {
-  const { tagType } = args?.TagGroup ?? {};
-  return html`
-    <dds-tag-group>
-      ${tagTitles.map((title) =>
-        tagType === tagTypeOptions[0]
-          ? html`
-              <dds-tag-link href="https://example.com"> ${title} </dds-tag-link>
-            `
-          : html` <bx-tag type="green"> ${title} </bx-tag> `
-      )}
-    </dds-tag-group>
-  `;
-};
-
-export default {
-  title: 'Components/Tag group',
-  decorators: [
-    (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-16 bx--col-md-6">${story()}</div>
-        </div>
-      </div>
-    `,
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      TagGroup: () => ({
-        tagType: select('Tag Type:', tagTypeOptions, 'Tag Link'),
-      }),
-    },
-    propsSet: {
-      default: {
-        TagGroup: {
-          tagType: 'Tag Link',
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/tag-group/__tests__/tag-group.test.ts b/packages/web-components/src/components/tag-group/__tests__/tag-group.test.ts
deleted file mode 100644
index dd06eb7af59..00000000000
--- a/packages/web-components/src/components/tag-group/__tests__/tag-group.test.ts
+++ /dev/null
@@ -1,52 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import '../tag-group';
-import '../../tag-link/tag-link';
-
-const template = (props?) => {
-  const { copy, href } = props ?? {};
-  return html`
-    <dds-tag-group>
-      <dds-tag-link href="${ifNonNull(href)}"> ${copy} </dds-tag-link>
-      <dds-tag-link href="${ifNonNull(href)}"> ${copy} </dds-tag-link>
-    </dds-tag-group>
-  `;
-};
-
-describe('dds-tag-group', function () {
-  describe('Misc attributes', function () {
-    it('should render with minimum attributes', async function () {
-      render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-tag-group>`
-      expect(document.body.querySelector('dds-tag-group')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        template({
-          copy: 'copy-foo',
-          href: 'https://example.com',
-        }),
-        document.body
-      );
-      await Promise.resolve(); // Update cycle for `<dds-tag-group>`
-      expect(document.body.querySelector('dds-tag-group')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-  });
-  afterEach(async function () {
-    await render(undefined!, document.body);
-  });
-});
diff --git a/packages/web-components/src/components/tag-group/tag-group.scss b/packages/web-components/src/components/tag-group/tag-group.scss
index 3115089022e..d8cc34d6499 100644
--- a/packages/web-components/src/components/tag-group/tag-group.scss
+++ b/packages/web-components/src/components/tag-group/tag-group.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/tag-group/tag-group';
+@use '@carbon/ibmdotcom-styles/scss/components/tag-group';
diff --git a/packages/web-components/src/components/tag-group/tag-group.ts b/packages/web-components/src/components/tag-group/tag-group.ts
index 43dac276db8..68905a0a4dd 100644
--- a/packages/web-components/src/components/tag-group/tag-group.ts
+++ b/packages/web-components/src/components/tag-group/tag-group.ts
@@ -7,25 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './tag-group.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Tag Group
  *
- * @element dds-tag-group
+ * @element c4d-tag-group
  */
-@customElement(`${ddsPrefix}-tag-group`)
-class DDSTagGroup extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-tag-group`)
+class C4DTagGroup extends StableSelectorMixin(LitElement) {
   /**
-   * Handler for @slotchange, ensure that the only elements being rendered are BXTag and DDSTagLink
+   * Handler for @slotchange, ensure that the only elements being rendered are CDSTag and C4DTagLink
    *
    * @private
    */
@@ -34,13 +32,13 @@ class DDSTagGroup extends StableSelectorMixin(LitElement) {
 
     const carbonTags = childItems.filter((elem) =>
       (elem as HTMLElement).matches?.(
-        (this.constructor as typeof DDSTagGroup).selectorTag
+        (this.constructor as typeof C4DTagGroup).selectorTag
       )
     );
 
     const carbonReactTags = childItems.filter((elem) =>
       (elem as HTMLElement).classList?.contains?.(
-        (this.constructor as typeof DDSTagGroup).selectorReactTag
+        (this.constructor as typeof C4DTagGroup).selectorReactTag
       )
     );
 
@@ -54,7 +52,7 @@ class DDSTagGroup extends StableSelectorMixin(LitElement) {
       if (
         !(elem as HTMLElement).className
           .split(' ')
-          .some((c) => /^bx--tag--/.test(c))
+          .some((c) => /^cds--tag--/.test(c))
       ) {
         (elem as HTMLElement).classList?.add(`${prefix}--tag--green`);
       }
@@ -71,32 +69,37 @@ class DDSTagGroup extends StableSelectorMixin(LitElement) {
   }
 
   /**
-   * A selector that will return the DDSTagLink child items.
+   * A selector that will return the C4DTagLink child items.
    */
   static get selectorTagLink() {
-    return `${ddsPrefix}-tag-link`;
+    return `${c4dPrefix}-tag-link`;
   }
 
   /**
-   * A selector that will return the BXTag child items.
+   * A selector that will return the CDSTag child items.
    */
   static get selectorTag() {
     return `${prefix}-tag`;
   }
 
   /**
-   * A selector that will return the BXTag child items.
+   * A selector that will return the CDSTag child items.
    */
   static get selectorReactTag() {
     return `${prefix}--tag`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--tag-group`;
+    return `${c4dPrefix}--tag-group`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  'The tag-group component has been deprecated in favor of combing cds-tag components. ' +
+    'See cds-tag documentation in @carbon/web-components for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTagGroup;
+export default C4DTagGroup;
diff --git a/packages/web-components/src/components/tag-link/__stories__/README.stories.mdx b/packages/web-components/src/components/tag-link/__stories__/README.stories.mdx
deleted file mode 100644
index 8c416beefba..00000000000
--- a/packages/web-components/src/components/tag-link/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,50 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import markdownContents from '../../../../docs/markdown-contents.md';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-
-
-
-# Tag Link
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tag-link)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/tag-link)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS (via import)
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/tag-link/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['tag-link'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-### HTML
-
-```html
-<dds-tag-link href="https://example.com">
-  Brand: Watson
-</dds-tag-link>
-```
-
-## Props
-
-<Props of="dds-tag-link" />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector     | Compatibility selector                   | Description |
-| --------------------------- | ---------------------------------------- | ----------- |
-| `<dds-tag-link>`            | `data-autoid="dds--tag-link"`            | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tag-link/__stories__/README.stories.react.mdx b/packages/web-components/src/components/tag-link/__stories__/README.stories.react.mdx
deleted file mode 100644
index 186cc58232b..00000000000
--- a/packages/web-components/src/components/tag-link/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,43 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link';
-
-# Tag Link
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tag-link)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/tag-link)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-### JS
-
-```javascript
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link.js';
-
-function App() {
-  return (
-  <DDSTagLink href="https://example.com">
-    Brand: Watson
-  </DDSTagLink>
-  );
-}
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector | Compatibility selector | Description |
-| ----------------------- | ---------------------- | ----------- |
-| `<dds-tag-link>`        | N/A                    | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/tag-link/__stories__/tag-link.stories.react.tsx b/packages/web-components/src/components/tag-link/__stories__/tag-link.stories.react.tsx
deleted file mode 100644
index 912f8a1b765..00000000000
--- a/packages/web-components/src/components/tag-link/__stories__/tag-link.stories.react.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { text } from '@storybook/addon-knobs';
-import React from 'react';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-// @ts-ignore
-import DDSTagLink from '@carbon/ibmdotcom-web-components/es/components-react/tag-link/tag-link';
-import readme from './README.stories.react.mdx';
-
-export const Default = args => {
-  const { copy, href } = args?.TagLink ?? {};
-  return <DDSTagLink href={href || undefined}>{copy}</DDSTagLink>;
-};
-
-Default.story = {
-  parameters: {
-    knobs: {
-      TagLink: () => ({
-        copy: text('Tag link (copy)', 'Brand: Watson'),
-        href: text('Tag link (href)', `https://example.com`),
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Tag link',
-  decorators: [
-    story => {
-      return <div className="bx--grid">{story()}</div>;
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-  },
-};
diff --git a/packages/web-components/src/components/tag-link/__stories__/tag-link.stories.ts b/packages/web-components/src/components/tag-link/__stories__/tag-link.stories.ts
deleted file mode 100644
index 72fe7046266..00000000000
--- a/packages/web-components/src/components/tag-link/__stories__/tag-link.stories.ts
+++ /dev/null
@@ -1,44 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html } from 'lit-element';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import readme from './README.stories.mdx';
-import '../tag-link';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-export const Default = (args) => {
-  const { copy, href } = args?.TagLink ?? {};
-  return html`
-    <dds-tag-link href=${ifNonNull(href || undefined)}> ${copy} </dds-tag-link>
-  `;
-};
-
-export default {
-  title: 'Components/Tag link',
-  decorators: [(story) => html` <div class="bx--grid">${story()}</div> `],
-  parameters: {
-    ...readme.parameters,
-    hasStoryPadding: true,
-    knobs: {
-      TagLink: () => ({
-        copy: textNullable('Tag Link (copy)', 'Brand: Watson'),
-        href: textNullable('Tag Link (href)', `https://example.com`),
-      }),
-    },
-    propsSet: {
-      default: {
-        TagLink: {
-          copy: 'Brand: Watson',
-          href: 'https://example.com',
-        },
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/tag-link/__tests__/tag-link.test.ts b/packages/web-components/src/components/tag-link/__tests__/tag-link.test.ts
deleted file mode 100644
index fa4625c3bc1..00000000000
--- a/packages/web-components/src/components/tag-link/__tests__/tag-link.test.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import '../tag-link';
-
-const template = (props?) => {
-  const { copy, href } = props ?? {};
-  return html`
-    <dds-tag-link href="${ifNonNull(href)}"> ${copy} </dds-tag-link>
-  `;
-};
-
-describe('dds-tag-link', function () {
-  describe('Misc attributes', function () {
-    it('should render with minimum attributes', async function () {
-      render(template(), document.body);
-      await Promise.resolve(); // Update cycle for `<dds-tag-link>`
-      expect(document.body.querySelector('dds-tag-link')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-
-    it('should render with various attributes', async function () {
-      render(
-        template({
-          copy: 'copy-foo',
-          href: 'https://example.com',
-        }),
-        document.body
-      );
-      await Promise.resolve(); // Update cycle for `<dds-tag-link>`
-      expect(document.body.querySelector('dds-tag-link')).toMatchSnapshot({
-        mode: 'shadow',
-      });
-    });
-  });
-  afterEach(async function () {
-    await render(undefined!, document.body);
-  });
-});
diff --git a/packages/web-components/src/components/tag-link/tag-link.scss b/packages/web-components/src/components/tag-link/tag-link.scss
index 6cb0e37bcdc..d93a0efcb4c 100644
--- a/packages/web-components/src/components/tag-link/tag-link.scss
+++ b/packages/web-components/src/components/tag-link/tag-link.scss
@@ -5,4 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import '@carbon/ibmdotcom-styles/scss/components/tag-link/tag-link';
+@use '@carbon/ibmdotcom-styles/scss/components/tag-link';
diff --git a/packages/web-components/src/components/tag-link/tag-link.ts b/packages/web-components/src/components/tag-link/tag-link.ts
index 95e922ae3ea..3c1901d0803 100644
--- a/packages/web-components/src/components/tag-link/tag-link.ts
+++ b/packages/web-components/src/components/tag-link/tag-link.ts
@@ -7,24 +7,23 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import styles from './tag-link.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
+const { prefix, stablePrefix: c4dPrefix } = settings;
 
 /**
  * Tag Link.
  *
- * @element dds-tag-link
+ * @element c4d-tag-link
  */
-@customElement(`${ddsPrefix}-tag-link`)
-class DDSTagLink extends StableSelectorMixin(LitElement) {
+@customElement(`${c4dPrefix}-tag-link`)
+class C4DTagLink extends StableSelectorMixin(LitElement) {
   /**
    * Link `href`.
    */
@@ -80,14 +79,14 @@ class DDSTagLink extends StableSelectorMixin(LitElement) {
     return html`
       <a
         id="link"
-        role="${ifNonNull(linkRole)}"
+        role="${ifDefined(linkRole)}"
         class="${prefix}--link"
         part="link"
-        href="${ifNonNull(href)}"
-        hreflang="${ifNonNull(hreflang)}"
-        ping="${ifNonNull(ping)}"
-        rel="${ifNonNull(rel)}"
-        target="${ifNonNull(target)}"
+        href="${ifDefined(href)}"
+        hreflang="${ifDefined(hreflang)}"
+        ping="${ifDefined(ping)}"
+        rel="${ifDefined(rel)}"
+        target="${ifDefined(target)}"
         @click="${handleClick}">
         <slot></slot>
       </a>
@@ -95,11 +94,16 @@ class DDSTagLink extends StableSelectorMixin(LitElement) {
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--tag-link`;
+    return `${c4dPrefix}--tag-link`;
   }
 
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
+console.warn(
+  'The tag-link component has been deprecated in favor of using cds-tag components. ' +
+    'See cds-tag documentation in @carbon/web-components for more information.'
+);
+
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSTagLink;
+export default C4DTagLink;
diff --git a/packages/web-components/src/components/universal-banner/__stories__/README.stories.mdx b/packages/web-components/src/components/universal-banner/__stories__/README.stories.mdx
deleted file mode 100644
index 3a0d2c8b9bf..00000000000
--- a/packages/web-components/src/components/universal-banner/__stories__/README.stories.mdx
+++ /dev/null
@@ -1,95 +0,0 @@
-import { Props, Description } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
-import '../index';
-
-# Universal banner
-
-A Universal banner is the only component allowed to show up above the Masthead, and should be used exclusively for global and critical announcements
- (e.g. THINK global event, COVID 19 messages etc).
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/universal-banner)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components/universal-banner)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-## Example using imports
-
-### JS
-
-```javascript
-import '@carbon/ibmdotcom-web-components/es/components/universal-banner/index.js';
-```
-
-<Description markdown={`${cdnJs({ components: ['universal-banner'] })}`} />
-
-<Description markdown={`${cdnCss()}`} />
-
-## Example HTML
-This will render a basic universal banner containing a heading, copy text, and a button CTA at the top of the page, sitting above the masthead.
-
-The component should be placed before the Dotcom shell, but in case it is placed within, it can move itself to the proper place automatically.
-
-```html
-	<dds-universal-banner>
-		<dds-universal-banner-heading slot="heading">Hybrid cloud and AI for smarter business</dds-universal-banner-heading>
-		<dds-universal-banner-copy slot="copy">Las Vegas, June 15-18, 2025</dds-universal-banner-copy>
-		<dds-button-cta slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-			Register for Think. Free
-		</dds-button-cta>
-	</dds-universal-banner>
-```
-
-## Example HTML - With image
-This example renders the banner with the aforementioned elements and an image.
-
-Add the `image-width` attribute into the universal banner and set it to either `4-col` or `8-col`.
-Note that if an image is added without the attribute being manually added, it will default to `4-col`.
-
-It is important to create an image asset that best fits the component to ensure a proper aspect ratio.
-
-```html
-	<dds-universal-banner image-width="4-col">
-	  <dds-universal-banner-image slot="image" default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616"></dds-universal-banner-image>
-		<dds-universal-banner-heading slot="heading">Hybrid cloud and AI for smarter business</dds-universal-banner-heading>
-		<dds-universal-banner-copy slot="copy">Las Vegas, June 15-18, 2025</dds-universal-banner-copy>
-		<dds-button-cta slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-			Register for Think. Free
-		</dds-button-cta>
-	</dds-universal-banner>
-```
-
-In case you'd like to change images depending on the breakpoint, you can use the `dds-image-item` component as such:
-
-```html
-	<dds-universal-banner-image slot="image" default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		<dds-image-item media="(min-width:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		</dds-image-item>
-		<dds-image-item media="(min-width:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		</dds-image-item>
-		<dds-image-item media="(min-width:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		</dds-image-item>
-	</dds-universal-banner-image>
-```
-
-## Props
-
-<Props of="dds-universal-banner" />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector          | Compatibility selector                        | Description |
-| -------------------------------- | --------------------------------------------- | ----------- |
-| `<dds-universal-banner>` 			   | `data-autoid="dds--universal-banner"` 		     | Component   |
-| `<dds-universal-banner-heading>` | `data-autoid="dds--universal-banner-heading"` | Component   |
-| `<dds-universal-banner-copy>` 	 | `data-autoid="dds--universal-banner-copy"` 	 | Component   |
-| `<dds-universal-banner-image>` 	 | `data-autoid="dds--universal-banner-image"` 	 | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/universal-banner/__stories__/README.stories.react.mdx b/packages/web-components/src/components/universal-banner/__stories__/README.stories.react.mdx
deleted file mode 100644
index 9469b352dc0..00000000000
--- a/packages/web-components/src/components/universal-banner/__stories__/README.stories.react.mdx
+++ /dev/null
@@ -1,100 +0,0 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
-import contributing from '../../../../../../docs/contributing-license.md';
-import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner';
-
-# Universal banner
-
-A Universal banner is the only component allowed to show up above the Masthead, and should be used exclusively for global and critical announcements
- (e.g. THINK global event, COVID 19 messages etc).
-
-> 💡 Check our
-> [CodeSandbox](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/universal-banner)
-> example implementation.
-
-[![Edit @carbon/ibmdotcom-web-components](https://codesandbox.io/static/img/play-codesandbox.svg)](https://githubbox.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components/examples/codesandbox/components-react/universal-banner)
-
-## Getting started
-
-Here's a quick example to get you started.
-
-This will render a basic universal banner containing a heading, copy text, and a button CTA at the top of the page, sitting above the masthead.
-
-The component should be placed before the Dotcom shell, but in case it is placed within, it can move itself to the proper place automatically.
-
-### JS
-
-```javascript
-import DDSUniversalBanner from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner';
-import DDSUniversalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-heading';
-import DDSUniversalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-copy';
-import DDSUniversalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-image';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-
-function App() {
-  return (
-    <DDSUniversalBanner>
-      <DDSUniversalBannerHeading slot="heading">Hybrid cloud and AI for smarter business</DDSUniversalBannerHeading>
-      <DDSUniversalBannerCopy slot="copy">Las Vegas, June 15-18, 2025</DDSUniversalBannerCopy>
-      <DDSButtonCTA slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-        Register for Think. Free
-      </DDSButtonCTA>
-    </DDSUniversalBanner>
-  );
-}
-```
-
-## Example - With image
-This example renders the banner with the aforementioned elements and an image.
-
-Add the `image-width` attribute into the universal banner and set it to either `4-col` or `8-col`.
-Note that if an image is added without the attribute being manually added, it will default to `4-col`.
-
-It is important to create an image asset that best fits the component to ensure a proper aspect ratio.
-
-```javascript
-function App() {
-  return (
-    <DDSUniversalBanner image-width='4-col'>
-      <DDSUniversalBannerImage slot="image" default-src={'https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616'}></DDSUniversalBannerImage>
-      <DDSUniversalBannerHeading slot="heading">Hybrid cloud and AI for smarter business</DDSUniversalBannerHeading>
-      <DDSUniversalBannerCopy slot="copy">Las Vegas, June 15-18, 2025</DDSUniversalBannerCopy>
-      <DDSButtonCTA slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-        Register for Think. Free
-      </DDSButtonCTA>
-    </DDSUniversalBanner>
-  );
-}
-```
-
-In case you'd like to change images depending on the breakpoint, you can use the `DDSImageItem` component as such:
-
-```javascript
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-
-
-	<DDSUniversalBannerImage slot="image" default-src="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		<DDSImageItem media="(min-width:672px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		</DDSImageItem>
-		<DDSImageItem media="(min-width:400px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		</DDSImageItem>
-		<DDSImageItem media="(min-width:320px)" srcset="https://fpoimg.com/672x336?text=2:1&bg_color=ee5396&text_color=161616">
-		</DDSImageItem>
-	</DDSUniversalBannerImage>
-```
-
-## Props
-
-<Props of={PropTypesRef} />
-
-## Stable selectors
-
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
-
-| Web Components selector       | Compatibility selector                           | Description |
-| ----------------------------- | ------------------------------------------------ | ----------- |
-| `<dds-universal-banner>` 			   | `data-autoid="dds--universal-banner"` 		     | Component   |
-| `<dds-universal-banner-heading>` | `data-autoid="dds--universal-banner-heading"` | Component   |
-| `<dds-universal-banner-copy>` 	 | `data-autoid="dds--universal-banner-copy"` 	 | Component   |
-| `<dds-universal-banner-image>` 	 | `data-autoid="dds--universal-banner-image"` 	 | Component   |
-
-<Description markdown={contributing} />
diff --git a/packages/web-components/src/components/universal-banner/__stories__/universal-banner.stories.react.tsx b/packages/web-components/src/components/universal-banner/__stories__/universal-banner.stories.react.tsx
deleted file mode 100644
index 7e95360eefd..00000000000
--- a/packages/web-components/src/components/universal-banner/__stories__/universal-banner.stories.react.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { select, text } from '@storybook/addon-knobs';
-// Below path will be there when an application installs `@carbon/ibmdotcom-web-components` package.
-// In our dev env, we auto-generate the file and re-map below path to to point to the generated file.
-/* eslint-disable max-len */
-// @ts-ignore
-import DDSUniversalBanner from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner';
-import DDSUniversalBannerHeading from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-heading';
-import DDSUniversalBannerCopy from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-copy';
-import DDSUniversalBannerImage from '@carbon/ibmdotcom-web-components/es/components-react/universal-banner/universal-banner-image';
-import DDSButtonCTA from '@carbon/ibmdotcom-web-components/es/components-react/cta/button-cta';
-import DDSImageItem from '@carbon/ibmdotcom-web-components/es/components-react/image/image-item';
-/* eslint-enable max-len */
-import readme from './README.stories.react.mdx';
-
-// eslint-disable-next-line sort-imports
-import img4Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg';
-import img8Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg';
-import img4ColLg from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-lg.jpg';
-import img8ColLg from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-lg.jpg';
-import img4ColXlg from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-xlg.jpg';
-import img8ColXlg from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-xlg.jpg';
-
-// import StoryContent from '../../back-to-top/__stories__/data/content';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-const imageWidthOptions = {
-  [`4 Columns`]: `4-col`,
-  [`8 Columns`]: `8-col`,
-  [`None`]: '',
-};
-
-const images = {
-  '4-col': img4Col,
-  '8-col': img8Col,
-};
-
-const srcsets = {
-  '4-col': [img4ColLg, img4ColXlg, img4Col],
-  '8-col': [img8ColLg, img8ColXlg, img8Col],
-};
-
-export const Default = args => {
-  const { heading, copy, ctaCopy, imageWidth } = args?.UniversalBanner ?? {};
-
-  const bannerHeading = document.querySelector('dds-universal-banner-heading');
-
-  if (bannerHeading) {
-    bannerHeading!.shadowRoot!.textContent = heading;
-  }
-
-  const srcset = srcsets[imageWidth];
-
-  return (
-    <DDSUniversalBanner image-width={imageWidth}>
-      {imageWidth ? (
-        <DDSUniversalBannerImage slot="image" default-src={images[imageWidth]}>
-          <DDSImageItem media="(min-width:1584px)" srcset={srcset[2]}></DDSImageItem>
-          <DDSImageItem media="(min-width:1056px)" srcset={srcset[1]}></DDSImageItem>
-          <DDSImageItem media="(min-width:1312px)" srcset={srcset[0]}></DDSImageItem>
-        </DDSUniversalBannerImage>
-      ) : (
-        ''
-      )}
-      <DDSUniversalBannerHeading slot="heading">{heading}</DDSUniversalBannerHeading>
-      <DDSUniversalBannerCopy slot="copy">{copy}</DDSUniversalBannerCopy>
-      <DDSButtonCTA slot="cta" cta-type="local" kind="tertiary" href="https://www.example.com">
-        {ctaCopy}
-      </DDSButtonCTA>
-    </DDSUniversalBanner>
-  );
-};
-
-Default.story = {
-  parameters: {
-    ...readme.parameters,
-    knobs: {
-      UniversalBanner: () => ({
-        heading: textNullable('Heading:', 'Hybrid cloud and AI for smarter business'),
-        copy: text('Copy (optional):', 'Las Vegas, June 15-18, 2025'),
-        ctaCopy: textNullable('CTA copy:', 'Register for Think. Free'),
-        imageWidth: select('Image width:', imageWidthOptions, '4-col'),
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Universal banner',
-  decorators: [
-    story => {
-      return story();
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-  },
-  propsSet: {
-    default: {
-      UniversalBanner: {
-        heading: 'Hybrid cloud and AI for smarter business',
-        copy: 'Las Vegas, June 15-18, 2025',
-        ctaCopy: 'Register for Think. Free',
-        imageWidth: '4-col',
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/universal-banner/__stories__/universal-banner.stories.ts b/packages/web-components/src/components/universal-banner/__stories__/universal-banner.stories.ts
deleted file mode 100644
index a2223a1b416..00000000000
--- a/packages/web-components/src/components/universal-banner/__stories__/universal-banner.stories.ts
+++ /dev/null
@@ -1,126 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2022
- *
- * 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 { html } from 'lit-element';
-import { select, text } from '@storybook/addon-knobs';
-import '../index';
-import readme from './README.stories.mdx';
-
-// eslint-disable-next-line sort-imports
-import img4Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-image.jpg';
-import img8Col from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-image.jpg';
-import img4ColLg from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-lg.jpg';
-import img8ColLg from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-lg.jpg';
-import img4ColXlg from '../../../../../storybook-images/assets/universal-banner/universal-banner-4-col-xlg.jpg';
-import img8ColXlg from '../../../../../storybook-images/assets/universal-banner/universal-banner-8-col-xlg.jpg';
-
-// import StoryContent from '../../back-to-top/__stories__/data/content';
-import textNullable from '../../../../.storybook/knob-text-nullable';
-
-const imageWidthOptions = {
-  [`4 Columns`]: `4-col`,
-  [`8 Columns`]: `8-col`,
-  [`None`]: '',
-};
-
-const images = {
-  '4-col': img4Col,
-  '8-col': img8Col,
-};
-
-const srcsets = {
-  '4-col': [img4ColLg, img4ColXlg, img4Col],
-  '8-col': [img8ColLg, img8ColXlg, img8Col],
-};
-
-export const Default = (args) => {
-  const { heading, copy, ctaCopy, imageWidth } = args?.UniversalBanner ?? {};
-
-  const bannerHeading = document.querySelector('dds-universal-banner-heading');
-  const bannerCopy = document.querySelector('dds-universal-banner-copy');
-
-  if (bannerHeading) {
-    bannerHeading!.shadowRoot!.textContent = heading;
-  }
-
-  if (bannerCopy) {
-    bannerCopy!.shadowRoot!.textContent = copy;
-  }
-
-  const srcset = srcsets[imageWidth];
-
-  return html`
-    <dds-universal-banner image-width="${imageWidth}">
-      ${imageWidth
-        ? html`
-            <dds-universal-banner-image
-              slot="image"
-              default-src="${images[imageWidth]}">
-              <dds-image-item media="(min-width: 1584px)" srcset="${srcset[2]}">
-              </dds-image-item>
-              <dds-image-item media="(min-width: 1056px)" srcset="${srcset[1]}">
-              </dds-image-item>
-              <dds-image-item media="(min-width: 1312px)" srcset="${srcset[0]}">
-              </dds-image-item>
-            </dds-universal-banner-image>
-          `
-        : ``}
-      <dds-universal-banner-heading slot="heading"
-        >${heading}</dds-universal-banner-heading
-      >
-      <dds-universal-banner-copy slot="copy">${copy}</dds-universal-banner-copy>
-      <dds-button-cta
-        slot="cta"
-        cta-type="local"
-        kind="tertiary"
-        href="https://www.example.com">
-        ${ctaCopy}
-      </dds-button-cta>
-    </dds-universal-banner>
-  `;
-};
-
-Default.story = {
-  parameters: {
-    ...readme.parameters,
-    knobs: {
-      UniversalBanner: () => ({
-        heading: textNullable(
-          'Heading:',
-          'Hybrid cloud and AI for smarter business'
-        ),
-        copy: text('Copy (optional):', 'Las Vegas, June 15-18, 2025'),
-        ctaCopy: textNullable('CTA copy:', 'Register for Think. Free'),
-        imageWidth: select('Image width:', imageWidthOptions, '4-col'),
-      }),
-    },
-  },
-};
-
-export default {
-  title: 'Components/Universal banner',
-  decorators: [
-    (story) => {
-      return html` ${story()} `;
-    },
-  ],
-  parameters: {
-    ...readme.parameters,
-  },
-  propsSet: {
-    default: {
-      UniversalBanner: {
-        heading: 'Hybrid cloud and AI for smarter business',
-        copy: 'Las Vegas, June 15-18, 2025',
-        ctaCopy: 'Register for Think. Free',
-        imageWidth: '4-col',
-      },
-    },
-  },
-};
diff --git a/packages/web-components/src/components/universal-banner/index.ts b/packages/web-components/src/components/universal-banner/index.ts
deleted file mode 100644
index 7fa87058eed..00000000000
--- a/packages/web-components/src/components/universal-banner/index.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * @license
- *
- * 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 './universal-banner';
-import './universal-banner-heading';
-import './universal-banner-copy';
-import './universal-banner-image';
-import '../cta/button-cta';
-import '../link-with-icon/index';
diff --git a/packages/web-components/src/components/universal-banner/universal-banner-copy.ts b/packages/web-components/src/components/universal-banner/universal-banner-copy.ts
deleted file mode 100644
index f012894fe79..00000000000
--- a/packages/web-components/src/components/universal-banner/universal-banner-copy.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { property, html } from 'lit-element';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import styles from './universal-banner.scss';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSMarkdown from '../markdown/markdown';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The paragraph content in the universal banner
- *
- * @element dds-universal-banner-copy
- */
-@customElement(`${ddsPrefix}-universal-banner-copy`)
-class DDSUniversalBannerCopy extends StableSelectorMixin(DDSMarkdown) {
-  @property({ reflect: true })
-  slot = 'copy';
-
-  render() {
-    return html` <slot></slot> `;
-  }
-
-  firstUpdated() {
-    this.querySelector('p')?.setAttribute('style', 'all:unset;');
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}-universal-banner-copy`;
-  }
-
-  static styles = styles;
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSUniversalBannerCopy;
diff --git a/packages/web-components/src/components/universal-banner/universal-banner-heading.ts b/packages/web-components/src/components/universal-banner/universal-banner-heading.ts
deleted file mode 100644
index 4d048f910fb..00000000000
--- a/packages/web-components/src/components/universal-banner/universal-banner-heading.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2020, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, LitElement, internalProperty } from 'lit-element';
-import { stripHTML } from '@carbon/ibmdotcom-utilities/es/utilities/stripHTML/index.js';
-import { render } from 'lit-html';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './universal-banner.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * The heading content in universal banner
- *
- * @element dds-universal-banner-heading
- */
-@customElement(`${ddsPrefix}-universal-banner-heading`)
-class DDSUniversalBannerHeading extends StableSelectorMixin(LitElement) {
-  /**
-   * The shadow slot this logo UI should be in.
-   */
-  @property({ reflect: true })
-  slot = 'heading';
-
-  @internalProperty()
-  content = '';
-
-  connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'heading');
-    }
-    if (!this.hasAttribute('aria-level')) {
-      this.setAttribute('aria-level', '2');
-    }
-    super.connectedCallback();
-  }
-
-  firstUpdated() {
-    this.content = stripHTML(this.innerHTML);
-    render(html` ${this.content} `, this);
-  }
-
-  render() {
-    return html` ${this.content} `;
-  }
-
-  static get stableSelector() {
-    return `${ddsPrefix}-universal-banner-heading`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSUniversalBannerHeading;
diff --git a/packages/web-components/src/components/universal-banner/universal-banner-image.ts b/packages/web-components/src/components/universal-banner/universal-banner-image.ts
deleted file mode 100644
index 297b12624e8..00000000000
--- a/packages/web-components/src/components/universal-banner/universal-banner-image.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2021, 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 { css } from 'lit-element';
-import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
-import DDSImage from '../image/image';
-import styles from './universal-banner.scss';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-
-/**
- * Universal banner image.
- *
- * @element dds-universal-banner-image
- */
-
-@customElement(`${ddsPrefix}-universal-banner-image`)
-class DDSUniversalBannerImage extends DDSImage {
-  static get stableSelector() {
-    return `${ddsPrefix}-universal-banner-image`;
-  }
-
-  static get styles() {
-    return css`
-      ${super.styles}${styles}
-    `;
-  }
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSUniversalBannerImage;
diff --git a/packages/web-components/src/components/universal-banner/universal-banner.scss b/packages/web-components/src/components/universal-banner/universal-banner.scss
deleted file mode 100644
index 22d425cedca..00000000000
--- a/packages/web-components/src/components/universal-banner/universal-banner.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-//
-// 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 '@carbon/ibmdotcom-styles/scss/components/universal-banner/universal-banner';
diff --git a/packages/web-components/src/components/universal-banner/universal-banner.ts b/packages/web-components/src/components/universal-banner/universal-banner.ts
deleted file mode 100644
index c112103b9ff..00000000000
--- a/packages/web-components/src/components/universal-banner/universal-banner.ts
+++ /dev/null
@@ -1,200 +0,0 @@
-/**
- * @license
- *
- * Copyright IBM Corp. 2019, 2023
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-import { html, property, LitElement, query } from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import { baseFontSize, breakpoints } from '@carbon/layout';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
-import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import styles from './universal-banner.scss';
-import StickyHeader from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/StickyHeader/StickyHeader';
-import DDSButtonCTA from '../cta/button-cta';
-import { icons as ctaIcons } from '../../component-mixins/cta/cta';
-import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
-
-const gridLgBreakpoint = parseFloat(breakpoints.lg.width) * baseFontSize;
-
-const { stablePrefix: ddsPrefix } = ddsSettings;
-const { prefix } = settings;
-
-/**
- * Universal banner
- *
- * @element dds-universal-banner
- */
-@customElement(`${ddsPrefix}-universal-banner`)
-class DDSUniversalBanner extends StableSelectorMixin(LitElement) {
-  /**
-   * Saves the button CTA's href to use in link-with-icon for the small breakpoint
-   */
-  @property()
-  buttonHref;
-
-  /**
-   * Saves the button CTA's type to properly set the icon at `sm` and `md` breakpoints.
-   */
-  @property()
-  ctaType;
-
-  /**
-   * `true` if there is an image.
-   */
-  @property({ attribute: 'has-image', reflect: true, type: Boolean })
-  hasImage = false;
-
-  /**
-   * Grid media options to display image.
-   * Available options are either '4-col' or '8-col'.
-   */
-  @property({ attribute: 'image-width', reflect: true, type: String })
-  imageWidth;
-
-  private _breakpoint?: MediaQueryList;
-
-  @property({ type: Boolean })
-  private _shouldRenderAsLink = false;
-
-  @query(`.${prefix}--universal-banner-layout-container`)
-  private _linkWrapper;
-
-  /**
-   * Handles `slotchange` event on the cta `<slot>`.
-   */
-  protected _handleImageSlotChange({ target }: Event) {
-    this.hasImage = (target as HTMLSlotElement)
-      .assignedNodes()
-      .some(
-        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
-      );
-
-    if (this.hasImage && !this.imageWidth) {
-      this.imageWidth = '4-col';
-    }
-  }
-
-  /**
-   * Handles `slotchange` event on the cta `<slot>`.
-   */
-  protected _handleButtonSlotChange({ target }: Event) {
-    const hasContent = (target as HTMLSlotElement)
-      .assignedNodes()
-      .filter((elem) =>
-        (elem as HTMLElement).matches?.(
-          (this.constructor as typeof DDSUniversalBanner).ctaButton
-        )
-      );
-
-    this.buttonHref = (hasContent[0] as HTMLElement)?.getAttribute('href');
-    this.ctaType = (hasContent[0] as DDSButtonCTA)?.ctaType;
-  }
-
-  protected _handleResize() {
-    const { _breakpoint: breakpoint } = this;
-    this._shouldRenderAsLink = !breakpoint!.matches;
-  }
-
-  firstUpdated() {
-    StickyHeader.global.banner = this;
-
-    this._breakpoint = window.matchMedia(`(min-width: ${gridLgBreakpoint}px)`);
-    this._breakpoint.addEventListener('change', this._handleResize.bind(this));
-    this._handleResize();
-  }
-
-  connectedCallback() {
-    if (!this.hasAttribute('role')) {
-      this.setAttribute('role', 'banner');
-    }
-    super.connectedCallback();
-  }
-
-  updated(changedProperties) {
-    if (changedProperties.has('_shouldRenderAsLink')) {
-      const { _shouldRenderAsLink: shouldRenderAsLink, ctaType } = this;
-
-      if (shouldRenderAsLink && ctaType === 'external') {
-        setTimeout(() => {
-          this._linkWrapper.setAttribute('target', '_blank');
-        }, 0);
-      }
-    }
-  }
-
-  /**
-   * Renders shadow dom within a static div
-   */
-  _renderAsStatic() {
-    return html`
-      <div class="${prefix}--universal-banner-layout-container">
-        ${this._renderInnerContents()}
-      </div>
-    `;
-  }
-
-  _renderAsLink() {
-    return html`
-      <a
-        href="${this.buttonHref}"
-        class="${prefix}--universal-banner-layout-container">
-        ${this._renderInnerContents()}
-      </a>
-    `;
-  }
-
-  _renderIcon() {
-    return html` ${ctaIcons[this.ctaType]()} `;
-  }
-
-  _renderInnerContents() {
-    return html`
-      <div class="${prefix}--universal-banner-content-wrapper">
-        <div
-          ?hidden="${!this.hasImage}"
-          class="${prefix}--universal-banner-image-container">
-          <slot
-            name="image"
-            @slotchange="${this._handleImageSlotChange}"></slot>
-        </div>
-
-        <div class="${prefix}--universal-banner-text-container">
-          <slot name="heading"></slot>
-          <slot name="copy"></slot>
-        </div>
-
-        <div class="${prefix}--universal-banner-cta-container">
-          <slot name="cta" @slotchange="${this._handleButtonSlotChange}"></slot>
-        </div>
-
-        <div class="${prefix}--universal-banner-icon">
-          ${this.ctaType ? this._renderIcon() : ''}
-        </div>
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      ${this._shouldRenderAsLink
-        ? this._renderAsLink()
-        : this._renderAsStatic()}
-    `;
-  }
-
-  /**
-   * A selector that will return the CTA button
-   */
-  static get ctaButton() {
-    return `${ddsPrefix}-button-cta`;
-  }
-
-  static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
-}
-
-/* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSUniversalBanner;
diff --git a/packages/web-components/src/components/video-player/__stories__/README.stories.mdx b/packages/web-components/src/components/video-player/__stories__/README.stories.mdx
index ffa3100d5ed..6185f4f9f4b 100644
--- a/packages/web-components/src/components/video-player/__stories__/README.stories.mdx
+++ b/packages/web-components/src/components/video-player/__stories__/README.stories.mdx
@@ -1,11 +1,13 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import '../video-player';
 import { cdnJs, cdnCss } from '../../../globals/internal/storybook-cdn';
 
-
-
-
 # Video player
 
 ## Getting started
@@ -23,19 +25,22 @@ import '@carbon/ibmdotcom-web-components/es/components/video-player/index.js';
 ### HTML
 
 ```html
-<dds-video-player-container id="my-video" video-id="1_9h94wo6b"> </dds-video-player-container>
+<cds-video-player-container id="my-video" video-id="0_ibuqxqbe">
+</cds-video-player-container>
 ```
 
 ## Manual usage of Kaltura API
 
-With `@carbon/ibmdotcom-services`, you can keep track of the readiness of [Kaltura API](http://player.kaltura.com/docs/api) and use it when it is ready. Here is an example of stopping the video player when it is hidden in DOM:
+With `@carbon/ibmdotcom-services`, you can keep track of the readiness of
+[Kaltura API](http://player.kaltura.com/docs/api) and use it when it is ready.
+Here is an example of stopping the video player when it is hidden in DOM:
 
 ```javascript
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer.js';
 
 // Keeps track of element resize and detect if the element of our interest is hidden
-const resizeObserver = new ResizeObserver(entries => {
-  entries.forEach(entry => {
+const resizeObserver = new ResizeObserver((entries) => {
+  entries.forEach((entry) => {
     const { width, height } = entry.contentRect;
     if (width === 0 && height === 0) {
       // Uses Kaltura API to stop the video
@@ -45,14 +50,15 @@ const resizeObserver = new ResizeObserver(entries => {
 });
 
 KalturaPlayerAPI.checkScript().then(() => {
-  window.kWidget.addReadyCallback(playerId => {
+  window.kWidget.addReadyCallback((playerId) => {
     // Observes the resize of the video player
     resizeObserver.observe(document.getElementById(playerId));
   });
 });
 ```
 
-> 💡 We don't test `<dds-video-player>` against arbitrary usage of Kaltura API. Use this technique at your own risk.
+> 💡 We don't test `<cds-video-player>` against arbitrary usage of Kaltura API.
+> Use this technique at your own risk.
 
 ## Video player with onClick Lightbox Trigger
 
@@ -63,31 +69,40 @@ import '@carbon/ibmdotcom-web-components/es/components/video-player/video-player
 import '@carbon/ibmdotcom-web-components/es/components/lightbox-media-viewer/lightbox-video-player-container.js';
 ```
 
-<Description markdown={`${cdnJs({ components: ['video-player','lightbox-video-player'] })}`} />
+<Description
+  markdown={`${cdnJs({
+    components: ['video-player', 'lightbox-video-player'],
+  })}`}
+/>
 
 <Description markdown={`${cdnCss()}`} />
 
 ### HTML
 
 ```html
-<dds-video-player-container video-id="1_9h94wo6b" aspect-ratio="16x9" playing-mode="lightbox"></dds-video-player-container>
-<dds-lightbox-video-player-container></dds-lightbox-video-player-container>
+<cds-video-player-container
+  video-id="0_ibuqxqbe"
+  aspect-ratio="16x9"
+  playing-mode="lightbox"></cds-video-player-container>
+<cds-lightbox-video-player-container></cds-lightbox-video-player-container>
 ```
 
 ## Under the Hood
 
-### `<dds-video-player>`
+### `<cds-video-player>`
 
-`<dds-video-player>` works as the video player in lightbox media viewer.
+`<cds-video-player>` works as the video player in lightbox media viewer.
 
-<Props of="dds-video-player" />
+<Props of="cds-video-player" />
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector | Compatibility selector | Description |
 | ----------------------- | ---------------------- | ----------- |
-| `<dds-video-player>`    | N/A                    | Component   |
+| `<cds-video-player>`    | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx b/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx
index 978818b28a4..ece52779372 100644
--- a/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx
+++ b/packages/web-components/src/components/video-player/__stories__/README.stories.react.mdx
@@ -1,4 +1,9 @@
-import { Preview, Props, Description, Story } from '@storybook/addon-docs/blocks';
+import {
+  Preview,
+  Props,
+  Description,
+  Story,
+} from '@storybook/addon-docs/blocks';
 import contributing from '../../../../../../docs/contributing-license.md';
 import { PropTypesRef } from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player';
 
@@ -17,10 +22,10 @@ Here's a quick example to get you started.
 ### JS
 
 ```javascript
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 
 function App() {
-  return <DDSVideoPlayerContainer aspectRatio="1x1" videoId="1_9h94wo6b" />;
+  return <C4DVideoPlayerContainer aspectRatio="1x1" videoId="0_ibuqxqbe" />;
 }
 ```
 
@@ -30,10 +35,12 @@ function App() {
 
 ## Stable selectors
 
-See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+See
+[our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/main/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components)
+to see how Web Components selector and `data-autoid` should be used.
 
 | Web Components selector     | Compatibility selector | Description |
 | --------------------------- | ---------------------- | ----------- |
-| `<DDSVideoPlayerContainer>` | N/A                    | Component   |
+| `<C4DVideoPlayerContainer>` | N/A                    | Component   |
 
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/video-player/__stories__/video-player.stories.react.tsx b/packages/web-components/src/components/video-player/__stories__/video-player.stories.react.tsx
index c33bc21e903..ab273d752ab 100644
--- a/packages/web-components/src/components/video-player/__stories__/video-player.stories.react.tsx
+++ b/packages/web-components/src/components/video-player/__stories__/video-player.stories.react.tsx
@@ -9,17 +9,33 @@
 
 import { boolean, text } from '@storybook/addon-knobs';
 import React from 'react';
-import DDSVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
+import C4DVideoPlayerContainer from '@carbon/ibmdotcom-web-components/es/components-react/video-player/video-player-container';
 import readme from './README.stories.react.mdx';
 
-export const Default = args => {
-  const { aspectRatio, caption, hideCaption, videoId } = args?.VideoPlayerContainer ?? {};
-  return <DDSVideoPlayerContainer aspectRatio={aspectRatio} caption={caption} hideCaption={hideCaption} videoId={videoId} />;
+export const Default = (args) => {
+  const { aspectRatio, caption, hideCaption, videoId } =
+    args?.VideoPlayerContainer ?? {};
+  return (
+    <C4DVideoPlayerContainer
+      aspectRatio={aspectRatio}
+      caption={caption}
+      hideCaption={hideCaption}
+      videoId={videoId}
+    />
+  );
 };
 
-export const aspectRatio1x1 = args => {
-  const { aspectRatio, caption, hideCaption, videoId } = args?.VideoPlayerContainer ?? {};
-  return <DDSVideoPlayerContainer aspectRatio={aspectRatio} caption={caption} hideCaption={hideCaption} videoId={videoId} />;
+export const aspectRatio1x1 = (args) => {
+  const { aspectRatio, caption, hideCaption, videoId } =
+    args?.VideoPlayerContainer ?? {};
+  return (
+    <C4DVideoPlayerContainer
+      aspectRatio={aspectRatio}
+      caption={caption}
+      hideCaption={hideCaption}
+      videoId={videoId}
+    />
+  );
 };
 
 aspectRatio1x1.story = {
@@ -32,16 +48,24 @@ aspectRatio1x1.story = {
           caption: text('Custom caption (caption):', ''),
           hideCaption: boolean('Hide caption (hideCaption):', false),
           thumbnail: text('Custom thumbnail (thumbnail):', ''),
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         };
       },
     },
   },
 };
 
-export const aspectRatio4x3 = args => {
-  const { aspectRatio, caption, hideCaption, videoId } = args?.VideoPlayerContainer ?? {};
-  return <DDSVideoPlayerContainer aspectRatio={aspectRatio} caption={caption} hideCaption={hideCaption} videoId={videoId} />;
+export const aspectRatio4x3 = (args) => {
+  const { aspectRatio, caption, hideCaption, videoId } =
+    args?.VideoPlayerContainer ?? {};
+  return (
+    <C4DVideoPlayerContainer
+      aspectRatio={aspectRatio}
+      caption={caption}
+      hideCaption={hideCaption}
+      videoId={videoId}
+    />
+  );
 };
 
 aspectRatio4x3.story = {
@@ -54,7 +78,7 @@ aspectRatio4x3.story = {
           caption: text('Custom caption (caption):', ''),
           hideCaption: boolean('Hide caption (hideCaption):', false),
           thumbnail: text('Custom thumbnail (thumbnail):', ''),
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         };
       },
     },
@@ -64,10 +88,10 @@ aspectRatio4x3.story = {
 export default {
   title: 'Components/Video Player',
   decorators: [
-    story => (
-      <div className="bx--grid">
-        <div className="bx--row">
-          <div className="bx--col-sm-4 bx--col-lg-8">{story()}</div>
+    (story) => (
+      <div className="cds--grid">
+        <div className="cds--row">
+          <div className="cds--col-sm-4 cds--col-lg-8">{story()}</div>
         </div>
       </div>
     ),
@@ -79,7 +103,7 @@ export default {
         caption: text('Custom caption (caption):', ''),
         hideCaption: boolean('Hide caption (hideCaption):', false),
         thumbnailUrl: text('Custom thumbnail (thumbnail):', ''),
-        videoId: '1_9h94wo6b',
+        videoId: '0_ibuqxqbe',
       }),
     },
   },
diff --git a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
index 45b7117a912..3451f251daa 100644
--- a/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
+++ b/packages/web-components/src/components/video-player/__stories__/video-player.stories.ts
@@ -7,9 +7,9 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html } from 'lit-element';
+import { html } from 'lit';
 import { boolean, text } from '@storybook/addon-knobs';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import readme from './README.stories.mdx';
 import '../video-player-container';
 import '../../lightbox-media-viewer/lightbox-video-player-container';
@@ -17,12 +17,12 @@ import '../../lightbox-media-viewer/lightbox-video-player-container';
 export const Default = (args) => {
   const { caption, hideCaption, thumbnail, videoId } = args?.VideoPlayer ?? {};
   return html`
-    <dds-video-player-container
+    <c4d-video-player-container
       playing-mode="inline"
       video-id=${videoId}
       caption=${caption}
       ?hide-caption=${hideCaption}
-      thumbnail=${thumbnail}></dds-video-player-container>
+      thumbnail=${thumbnail}></c4d-video-player-container>
   `;
 };
 
@@ -30,13 +30,13 @@ export const aspectRatio1x1 = (args) => {
   const { aspectRatio, caption, hideCaption, thumbnail, videoId } =
     args?.VideoPlayer ?? {};
   return html`
-    <dds-video-player-container
+    <c4d-video-player-container
       playing-mode="inline"
       video-id=${videoId}
       aspect-ratio=${aspectRatio}
       caption=${caption}
       ?hide-caption=${hideCaption}
-      thumbnail=${thumbnail}></dds-video-player-container>
+      thumbnail=${thumbnail}></c4d-video-player-container>
   `;
 };
 
@@ -44,13 +44,13 @@ export const aspectRatio4x3 = (args) => {
   const { aspectRatio, caption, hideCaption, thumbnail, videoId } =
     args?.VideoPlayer ?? {};
   return html`
-    <dds-video-player-container
+    <c4d-video-player-container
       playing-mode="inline"
       video-id=${videoId}
       aspect-ratio=${aspectRatio}
       caption=${caption}
       ?hide-caption=${hideCaption}
-      thumbnail=${thumbnail}></dds-video-player-container>
+      thumbnail=${thumbnail}></c4d-video-player-container>
   `;
 };
 
@@ -64,16 +64,16 @@ export const withLightboxMediaViewer = (args) => {
     customVideoDescription,
   } = args?.VideoPlayer ?? {};
   return html`
-    <dds-video-player-container
+    <c4d-video-player-container
       video-id=${videoId}
       aspect-ratio=${aspectRatio}
       caption=${caption}
-      video-description="${ifNonNull(customVideoDescription)}"
+      video-description="${ifDefined(customVideoDescription)}"
       ?hide-caption=${hideCaption}
       thumbnail=${thumbnail}
       playing-mode="lightbox">
-    </dds-video-player-container>
-    <dds-lightbox-video-player-container></dds-lightbox-video-player-container>
+    </c4d-video-player-container>
+    <c4d-lightbox-video-player-container></c4d-lightbox-video-player-container>
   `;
 };
 
@@ -87,7 +87,7 @@ aspectRatio4x3.story = {
           caption: text('Custom caption (caption):', ''),
           hideCaption: boolean('Hide caption (hideCaption):', false),
           thumbnail: text('Custom thumbnail (thumbnail):', ''),
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         };
       },
     },
@@ -98,7 +98,7 @@ aspectRatio4x3.story = {
           caption: '',
           hideCaption: false,
           thumbnail: '',
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         },
       },
     },
@@ -115,7 +115,7 @@ aspectRatio1x1.story = {
           caption: text('Custom caption (caption):', ''),
           hideCaption: boolean('Hide caption (hideCaption):', false),
           thumbnail: text('Custom thumbnail (thumbnail):', ''),
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         };
       },
     },
@@ -126,7 +126,7 @@ aspectRatio1x1.story = {
           caption: '',
           hideCaption: false,
           thumbnail: '',
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         },
       },
     },
@@ -147,7 +147,7 @@ withLightboxMediaViewer.story = {
           caption: text('Custom caption (caption):', ''),
           hideCaption: boolean('Hide caption (hideCaption):', false),
           thumbnail: text('Custom thumbnail (thumbnail):', ''),
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         };
       },
     },
@@ -159,7 +159,7 @@ withLightboxMediaViewer.story = {
           caption: '',
           hideCaption: false,
           thumbnail: '',
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         },
       },
     },
@@ -170,9 +170,9 @@ export default {
   title: 'Components/Video player',
   decorators: [
     (story) => html`
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-sm-4 bx--col-lg-8">${story()}</div>
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-sm-4 cds--col-lg-8">${story()}</div>
         </div>
       </div>
     `,
@@ -185,7 +185,7 @@ export default {
         caption: text('Custom caption (caption):', ''),
         hideCaption: boolean('Hide caption (hideCaption):', false),
         thumbnail: text('Custom thumbnail (thumbnail):', ''),
-        videoId: '1_9h94wo6b',
+        videoId: '0_ibuqxqbe',
       }),
     },
     propsSet: {
@@ -194,7 +194,7 @@ export default {
           caption: '',
           hideCaption: false,
           thumbnail: '',
-          videoId: '1_9h94wo6b',
+          videoId: '0_ibuqxqbe',
         },
       },
     },
diff --git a/packages/web-components/src/components/video-player/__tests__/video-player-composite.test.ts b/packages/web-components/src/components/video-player/__tests__/video-player-composite.test.ts
index 003c1c0f88c..a8b0db44c81 100644
--- a/packages/web-components/src/components/video-player/__tests__/video-player-composite.test.ts
+++ b/packages/web-components/src/components/video-player/__tests__/video-player-composite.test.ts
@@ -7,10 +7,10 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
-import DDSVideoPlayer from '../video-player';
-import DDSVideoPlayerComposite from '../video-player-composite';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import C4DVideoPlayer from '../video-player';
+import C4DVideoPlayerComposite from '../video-player-composite';
 // Above import is interface-only ref and thus code won't be brought into the build
 import '../video-player-composite';
 
@@ -25,19 +25,19 @@ const template = (props?) => {
     playingMode,
   } = props ?? {};
   return html`
-    <dds-video-player-composite
+    <c4d-video-player-composite
       ?hide-caption="${hideCaption}"
-      video-id="${ifNonNull(videoId)}"
-      .embeddedVideos="${ifNonNull(embeddedVideos)}"
-      .formatCaption="${ifNonNull(formatCaption)}"
-      .formatDuration="${ifNonNull(formatDuration)}"
-      .mediaData="${ifNonNull(mediaData)}"
-      .playingMode="${ifNonNull(playingMode)}">
-    </dds-video-player-composite>
+      video-id="${ifDefined(videoId)}"
+      .embeddedVideos="${ifDefined(embeddedVideos)}"
+      .formatCaption="${ifDefined(formatCaption)}"
+      .formatDuration="${ifDefined(formatDuration)}"
+      .mediaData="${ifDefined(mediaData)}"
+      .playingMode="${ifDefined(playingMode)}">
+    </c4d-video-player-composite>
   `;
 };
 
-describe('dds-video-player-composite', function () {
+describe('c4d-video-player-composite', function () {
   it('should send props to video player', async function () {
     const formatCaption = () => {};
     const formatDuration = () => {};
@@ -53,8 +53,8 @@ describe('dds-video-player-composite', function () {
     await Promise.resolve(); // Micro-task cycle for `VideoPlayer`
     await Promise.resolve(); // Update cycle to render with `VideoPlayer` results
     const videoPlayer = document.querySelector(
-      'dds-video-player'
-    ) as DDSVideoPlayer;
+      'c4d-video-player'
+    ) as C4DVideoPlayer;
     expect(videoPlayer.formatCaption).toBe(formatCaption);
     expect(videoPlayer.formatDuration).toBe(formatDuration);
     expect(videoPlayer.hideCaption).toBe(true);
@@ -71,7 +71,7 @@ describe('dds-video-player-composite', function () {
     render(template({ mediaData, videoId: 'video-id-foo' }), document.body);
     await Promise.resolve();
     expect(
-      document.querySelector('dds-video-player-composite')
+      document.querySelector('c4d-video-player-composite')
     ).toMatchSnapshot();
   });
 
@@ -79,9 +79,9 @@ describe('dds-video-player-composite', function () {
     render(template({ videoId: 'video-id-foo' }), document.body);
     await Promise.resolve();
     const videoPlayerComposite = document.querySelector(
-      'dds-video-player-composite'
-    ) as DDSVideoPlayerComposite;
-    videoPlayerComposite.querySelector('dds-video-player')!.innerHTML = `
+      'c4d-video-player-composite'
+    ) as C4DVideoPlayerComposite;
+    videoPlayerComposite.querySelector('c4d-video-player')!.innerHTML = `
       <div data-video-id="video-id-foo"></div>
       <div data-video-id="video-id-bar"></div>
       <div data-video-id="video-id-baz"></div>
diff --git a/packages/web-components/src/components/video-player/__tests__/video-player-container.test.ts b/packages/web-components/src/components/video-player/__tests__/video-player-container.test.ts
index 1aade281ee6..2ffa2ae5176 100644
--- a/packages/web-components/src/components/video-player/__tests__/video-player-container.test.ts
+++ b/packages/web-components/src/components/video-player/__tests__/video-player-container.test.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -9,15 +9,15 @@
 
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer.js';
 import convertValue from '../../../../tests/utils/convert-value';
-import { DDSVideoPlayerContainerMixin } from '../video-player-container';
+import { C4DVideoPlayerContainerMixin } from '../video-player-container';
 
-describe('dds-video-player-container', function () {
+describe('c4d-video-player-container', function () {
   let videoPlayerContainer;
   let videoPlayer;
 
   beforeEach(function () {
     videoPlayer = document.body.appendChild(document.createElement('div'));
-    const VideoPlayerContainer = DDSVideoPlayerContainerMixin(
+    const VideoPlayerContainer = C4DVideoPlayerContainerMixin(
       class {
         _videoPlayer = videoPlayer;
 
diff --git a/packages/web-components/src/components/video-player/__tests__/video-player.test.ts b/packages/web-components/src/components/video-player/__tests__/video-player.test.ts
index 18754b49322..540da647025 100644
--- a/packages/web-components/src/components/video-player/__tests__/video-player.test.ts
+++ b/packages/web-components/src/components/video-player/__tests__/video-player.test.ts
@@ -7,8 +7,8 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, render } from 'lit-html';
-import ifNonNull from '../../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { html, render } from 'lit/html.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import {
   VIDEO_PLAYER_CONTENT_STATE,
   VIDEO_PLAYER_PLAYING_MODE,
@@ -29,21 +29,21 @@ const template = (props?) => {
     playingMode,
   } = props ?? {};
   return html`
-    <dds-video-player
-      content-state="${ifNonNull(contentState)}"
-      duration="${ifNonNull(duration)}"
+    <c4d-video-player
+      content-state="${ifDefined(contentState)}"
+      duration="${ifDefined(duration)}"
       ?hide-caption="${hideCaption}"
-      name="${ifNonNull(name)}"
-      thumbnail-url="${ifNonNull(thumbnailUrl)}"
-      video-id="${ifNonNull(videoId)}"
-      .formatCaption="${ifNonNull(formatCaption)}"
-      .formatDuration="${ifNonNull(formatDuration)}"
-      .playingMode="${ifNonNull(playingMode)}">
-    </dds-video-player>
+      name="${ifDefined(name)}"
+      thumbnail-url="${ifDefined(thumbnailUrl)}"
+      video-id="${ifDefined(videoId)}"
+      .formatCaption="${ifDefined(formatCaption)}"
+      .formatDuration="${ifDefined(formatDuration)}"
+      .playingMode="${ifDefined(playingMode)}">
+    </c4d-video-player>
   `;
 };
 
-describe('dds-video-player', function () {
+describe('c4d-video-player', function () {
   it('should render with minimum attributes', async function () {
     render(
       template({
@@ -52,7 +52,7 @@ describe('dds-video-player', function () {
       document.body
     );
     await Promise.resolve();
-    expect(document.querySelector('dds-video-player')).toMatchSnapshot({
+    expect(document.querySelector('c4d-video-player')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
@@ -69,7 +69,7 @@ describe('dds-video-player', function () {
       document.body
     );
     await Promise.resolve();
-    expect(document.querySelector('dds-video-player')).toMatchSnapshot({
+    expect(document.querySelector('c4d-video-player')).toMatchSnapshot({
       mode: 'shadow',
     });
   });
@@ -85,8 +85,8 @@ describe('dds-video-player', function () {
     await Promise.resolve();
     expect(
       document
-        .querySelector('dds-video-player')!
-        .shadowRoot!.querySelector('.bx--video-player__video-caption')
+        .querySelector('c4d-video-player')!
+        .shadowRoot!.querySelector('.cds--video-player__video-caption')
     ).toBeNull();
   });
 
@@ -107,7 +107,7 @@ describe('dds-video-player', function () {
     );
     await Promise.resolve();
     expect(
-      document.querySelector('dds-video-player')!.getAttribute('aria-label')
+      document.querySelector('c4d-video-player')!.getAttribute('aria-label')
     ).toBe('video-name-foo-1');
   });
 
diff --git a/packages/web-components/src/components/video-player/video-player-composite.ts b/packages/web-components/src/components/video-player/video-player-composite.ts
index 2b839e66f33..e5f8a3bd1a7 100644
--- a/packages/web-components/src/components/video-player/video-player-composite.ts
+++ b/packages/web-components/src/components/video-player/video-player-composite.ts
@@ -7,11 +7,12 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
 import HostListener from '../../internal/vendor/@carbon/web-components/globals/decorators/host-listener.js';
 import HostListenerMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/host-listener.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
 import HybridRenderMixin from '../../globals/mixins/hybrid-render';
 import { MediaData } from '../../internal/vendor/@carbon/ibmdotcom-services-store/types/kalturaPlayerAPI.d';
@@ -23,15 +24,15 @@ import {
 import './video-player';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Component that renders video player from its metadata, etc.
  *
- * @element dds-video-player-composite
+ * @element c4d-video-player-composite
  */
-@customElement(`${ddsPrefix}-video-player-composite`)
-class DDSVideoPlayerComposite extends HybridRenderMixin(
+@customElement(`${c4dPrefix}-video-player-composite`)
+class C4DVideoPlayerComposite extends HybridRenderMixin(
   HostListenerMixin(LitElement)
 ) {
   /**
@@ -79,12 +80,12 @@ class DDSVideoPlayerComposite extends HybridRenderMixin(
    */
   protected get _videoPlayer() {
     const { selectorVideoPlayer } = this
-      .constructor as typeof DDSVideoPlayerComposite;
+      .constructor as typeof C4DVideoPlayerComposite;
     return this.querySelector(selectorVideoPlayer);
   }
 
   /**
-   * Handles `dds-video-player-content-state-changed` event.
+   * Handles `c4d-video-player-content-state-changed` event.
    * Such event is fired when user changes video content state, e.g. from thumbnail to video player.
    *
    * @param event The event.
@@ -287,18 +288,18 @@ class DDSVideoPlayerComposite extends HybridRenderMixin(
         width: String(videoThumbnailWidth),
       });
     return html`
-      <dds-video-player
-        duration="${ifNonNull(duration)}"
+      <c4d-video-player
+        duration="${ifDefined(duration)}"
         ?hide-caption=${hideCaption}
-        name="${ifNonNull(caption || name)}"
-        video-description="${ifNonNull(customVideoDescription)}"
-        thumbnail-url="${ifNonNull(thumbnailUrl)}"
-        video-id="${ifNonNull(videoId)}"
-        aspect-ratio="${ifNonNull(aspectRatio)}"
-        .formatCaption="${ifNonNull(formatCaption)}"
-        .formatDuration="${ifNonNull(formatDuration)}"
-        playing-mode="${ifNonNull(playingMode)}">
-      </dds-video-player>
+        name="${ifDefined(caption || name)}"
+        video-description="${ifDefined(customVideoDescription)}"
+        thumbnail-url="${ifDefined(thumbnailUrl)}"
+        video-id="${ifDefined(videoId)}"
+        aspect-ratio="${ifDefined(aspectRatio)}"
+        .formatCaption="${ifDefined(formatCaption)}"
+        .formatDuration="${ifDefined(formatDuration)}"
+        playing-mode="${ifDefined(playingMode)}">
+      </c4d-video-player>
     `;
   }
 
@@ -310,23 +311,23 @@ class DDSVideoPlayerComposite extends HybridRenderMixin(
    * A selector selecting the video player component.
    */
   static get selectorVideoPlayer() {
-    return `${ddsPrefix}-video-player`;
+    return `${c4dPrefix}-video-player`;
   }
 
   /**
    * The name of the custom event fired after video content state is changed upon a user gesture.
    */
   static get eventContentStateChange() {
-    return `${ddsPrefix}-video-player-content-state-changed`;
+    return `${c4dPrefix}-video-player-content-state-changed`;
   }
 
   /**
    * The name of the custom event fired requesting playback state change.
    */
   static get eventPlaybackStateChange() {
-    return `${ddsPrefix}-video-player-playback-state-changed`;
+    return `${c4dPrefix}-video-player-playback-state-changed`;
   }
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSVideoPlayerComposite;
+export default C4DVideoPlayerComposite;
diff --git a/packages/web-components/src/components/video-player/video-player-container.ts b/packages/web-components/src/components/video-player/video-player-container.ts
index ba9a3e9bdca..5c3f0dc90f1 100644
--- a/packages/web-components/src/components/video-player/video-player-container.ts
+++ b/packages/web-components/src/components/video-player/video-player-container.ts
@@ -13,10 +13,9 @@ import {
   Store,
   bindActionCreators,
 } from 'redux';
-import {} from 'lit-element';
-import settings from 'carbon-components/es/globals/js/settings.js';
+import {} from 'lit';
 import KalturaPlayerAPI from '@carbon/ibmdotcom-services/es/services/KalturaPlayer/KalturaPlayer.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import store from '../../internal/vendor/@carbon/ibmdotcom-services-store/store';
 import {
   MediaData,
@@ -27,14 +26,13 @@ import { MediaPlayerAPIActions } from '../../internal/vendor/@carbon/ibmdotcom-s
 import { Constructor } from '../../globals/defs';
 import ConnectMixin from '../../globals/mixins/connect';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSVideoPlayerComposite from './video-player-composite';
+import C4DVideoPlayerComposite from './video-player-composite';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element';
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
- * The Redux state used for `<dds-video-player-container>`.
+ * The Redux state used for `<c4d-video-player-container>`.
  */
 export interface VideoPlayerContainerState {
   /**
@@ -44,7 +42,7 @@ export interface VideoPlayerContainerState {
 }
 
 /**
- * The properties for `<dds-video-player-container>` from Redux state.
+ * The properties for `<c4d-video-player-container>` from Redux state.
  */
 export interface VideoPlayerContainerStateProps {
   /**
@@ -57,7 +55,7 @@ export type VideoPlayerActions = ReturnType<typeof loadMediaData>;
 
 /**
  * @param state The Redux state for video player.
- * @returns The converted version of the given state, tailored for `<dds-video-player-container>`.
+ * @returns The converted version of the given state, tailored for `<c4d-video-player-container>`.
  */
 export function mapStateToProps(
   state: VideoPlayerContainerState
@@ -69,7 +67,7 @@ export function mapStateToProps(
 
 /**
  * @param dispatch The Redux `dispatch()` API.
- * @returns The methods in `<dds-video-player-container>` to dispatch Redux actions.
+ * @returns The methods in `<c4d-video-player-container>` to dispatch Redux actions.
  */
 export function mapDispatchToProps(dispatch: Dispatch<MediaPlayerAPIActions>) {
   return bindActionCreators<
@@ -87,7 +85,7 @@ export function mapDispatchToProps(dispatch: Dispatch<MediaPlayerAPIActions>) {
  * @param Base The base class.
  * @returns A mix-in that implements video embedding API calls.
  */
-export const DDSVideoPlayerContainerMixin = <
+export const C4DVideoPlayerContainerMixin = <
   T extends Constructor<HTMLElement>
 >(
   Base: T
@@ -95,7 +93,7 @@ export const DDSVideoPlayerContainerMixin = <
   /**
    * A mix-in class that sets up and cleans up event listeners defined by `@HostListener` decorator.
    */
-  abstract class DDSVideoPlayerContainerMixinImpl extends StableSelectorMixin(
+  abstract class C4DVideoPlayerContainerMixinImpl extends StableSelectorMixin(
     Base
   ) {
     /**
@@ -230,7 +228,7 @@ export const DDSVideoPlayerContainerMixin = <
       const playerId = Math.random().toString(36).slice(2);
       const div = document.createElement('div');
       div.id = playerId;
-      div.className = `${prefix}--video-player__video`;
+      div.className = `${c4dPrefix}--video-player__video`;
       const { _videoPlayer: videoPlayer } = this;
       if (!videoPlayer) {
         throw new TypeError(
@@ -278,12 +276,12 @@ export const DDSVideoPlayerContainerMixin = <
     };
 
     /**
-     * Calls the data-* attribute transpose function to target `dds-video-player`'s button element.
+     * Calls the data-* attribute transpose function to target `c4d-video-player`'s button element.
      */
     firstUpdated() {
       window.requestAnimationFrame(() => {
         const button =
-          this.querySelector('dds-video-player')?.shadowRoot?.querySelector(
+          this.querySelector('c4d-video-player')?.shadowRoot?.querySelector(
             'button'
           );
         if (!this.getAttribute('href') && this.getAttribute('video-id')) {
@@ -296,19 +294,19 @@ export const DDSVideoPlayerContainerMixin = <
       });
     }
 
-    prefersAutoplayStorageKey: String = `${ddsPrefix}-background-video-prefers-autoplay`;
+    prefersAutoplayStorageKey: String = `${c4dPrefix}-background-video-prefers-autoplay`;
   }
 
-  return DDSVideoPlayerContainerMixinImpl;
+  return C4DVideoPlayerContainerMixinImpl;
 };
 
 /**
  * Container component for video player.
  *
- * @element dds-video-player-container
+ * @element c4d-video-player-container
  */
-@customElement(`${ddsPrefix}-video-player-container`)
-class DDSVideoPlayerContainer extends ConnectMixin<
+@customElement(`${c4dPrefix}-video-player-container`)
+class C4DVideoPlayerContainer extends ConnectMixin<
   VideoPlayerContainerState,
   MediaPlayerAPIActions,
   VideoPlayerContainerStateProps,
@@ -317,7 +315,7 @@ class DDSVideoPlayerContainer extends ConnectMixin<
   store as Store<VideoPlayerContainerState, MediaPlayerAPIActions>,
   mapStateToProps,
   mapDispatchToProps
-)(DDSVideoPlayerContainerMixin(DDSVideoPlayerComposite)) {}
+)(C4DVideoPlayerContainerMixin(C4DVideoPlayerComposite)) {}
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSVideoPlayerContainer;
+export default C4DVideoPlayerContainer;
diff --git a/packages/web-components/src/components/video-player/video-player.scss b/packages/web-components/src/components/video-player/video-player.scss
index 6a6ada0aaa8..a2236870265 100644
--- a/packages/web-components/src/components/video-player/video-player.scss
+++ b/packages/web-components/src/components/video-player/video-player.scss
@@ -5,7 +5,4 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vars';
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import '../../globals/scss/box-sizing';
-@import '@carbon/ibmdotcom-styles/scss/components/video-player/video-player';
+@use '@carbon/ibmdotcom-styles/scss/components/video-player';
diff --git a/packages/web-components/src/components/video-player/video-player.ts b/packages/web-components/src/components/video-player/video-player.ts
index e27f2de9d1b..035445845f3 100644
--- a/packages/web-components/src/components/video-player/video-player.ts
+++ b/packages/web-components/src/components/video-player/video-player.ts
@@ -7,39 +7,39 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, LitElement } from 'lit-element';
-import { classMap } from 'lit-html/directives/class-map.js';
-import settings from 'carbon-components/es/globals/js/settings.js';
-import ifNonNull from '../../internal/vendor/@carbon/web-components/globals/directives/if-non-null.js';
+import { LitElement, html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { ifDefined } from 'lit/directives/if-defined.js';
+import { unsafeSVG } from 'lit/directives/unsafe-svg.js';
 import FocusMixin from '../../internal/vendor/@carbon/web-components/globals/mixins/focus.js';
 import PlayVideo from '@carbon/ibmdotcom-styles/icons/svg/play-video.svg';
 import {
   formatVideoCaption,
   formatVideoDuration,
 } from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/formatVideoCaption/formatVideoCaption.js';
-import ddsSettings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
+import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
 import { VIDEO_PLAYER_CONTENT_STATE, VIDEO_PLAYER_PLAYING_MODE } from './defs';
 import '../image/image';
 import styles from './video-player.scss';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
-import DDSVideoPlayerContainer from './video-player-container';
+import C4DVideoPlayerContainer from './video-player-container';
 import ParentVisibilityMixin from '../../component-mixins/parent-visibility/parent-visibility';
 import { carbonElement as customElement } from '../../internal/vendor/@carbon/web-components/globals/decorators/carbon-element.js';
 
 export { VIDEO_PLAYER_CONTENT_STATE };
 export { VIDEO_PLAYER_PLAYING_MODE };
 
-const { prefix } = settings;
-const { stablePrefix: ddsPrefix } = ddsSettings;
+const { stablePrefix: c4dPrefix } = settings;
 
 /**
  * Video player.
  *
- * @element dds-video-player
+ * @element c4d-video-player
  */
-@customElement(`${ddsPrefix}-video-player`)
-class DDSVideoPlayer extends FocusMixin(
+@customElement(`${c4dPrefix}-video-player`)
+class C4DVideoPlayer extends FocusMixin(
   StableSelectorMixin(ParentVisibilityMixin(LitElement))
 ) {
   /**
@@ -57,7 +57,7 @@ class DDSVideoPlayer extends FocusMixin(
     }
     const { videoId, name, customVideoDescription } = this;
     const { eventContentStateChange } = this
-      .constructor as typeof DDSVideoPlayer;
+      .constructor as typeof C4DVideoPlayer;
     this.dispatchEvent(
       new CustomEvent(eventContentStateChange, {
         bubbles: true,
@@ -81,13 +81,13 @@ class DDSVideoPlayer extends FocusMixin(
     return contentState === VIDEO_PLAYER_CONTENT_STATE.THUMBNAIL &&
       !backgroundMode
       ? html`
-          <div class="${prefix}--video-player__video">
+          <div class="${c4dPrefix}--video-player__video">
             <button
-              class="${prefix}--video-player__image-overlay"
+              class="${c4dPrefix}--video-player__image-overlay"
               @click="${this._handleClickOverlay}">
-              <dds-image default-src="${thumbnailUrl}" alt="${ifNonNull(name)}">
-                ${PlayVideo({ slot: 'icon' })}
-              </dds-image>
+              <c4d-image default-src="${thumbnailUrl}" alt="${ifDefined(name)}">
+                ${unsafeSVG(PlayVideo)}
+              </c4d-image>
             </button>
           </div>
         `
@@ -129,7 +129,7 @@ class DDSVideoPlayer extends FocusMixin(
   public userInitiatedTogglePlaybackState() {
     const { videoId } = this;
     const { eventPlaybackStateChange } = this
-      .constructor as typeof DDSVideoPlayer;
+      .constructor as typeof C4DVideoPlayer;
     this.dispatchEvent(
       new CustomEvent(eventPlaybackStateChange, {
         bubbles: true,
@@ -213,15 +213,6 @@ class DDSVideoPlayer extends FocusMixin(
   @property({ attribute: 'aspect-ratio' })
   aspectRatio?: string;
 
-  createRenderRoot() {
-    return this.attachShadow({
-      mode: 'open',
-      delegatesFocus:
-        Number((/Safari\/(\d+)/.exec(navigator.userAgent) ?? ['', 0])[1]) <=
-        537,
-    });
-  }
-
   render() {
     const {
       aspectRatio,
@@ -233,8 +224,9 @@ class DDSVideoPlayer extends FocusMixin(
     } = this;
 
     const aspectRatioClass = classMap({
-      [`${prefix}--video-player__video-container`]: true,
-      [`${prefix}--video-player__aspect-ratio--${aspectRatio}`]: !!aspectRatio,
+      [`${c4dPrefix}--video-player__video-container`]: true,
+      [`${c4dPrefix}--video-player__aspect-ratio--${aspectRatio}`]:
+        !!aspectRatio,
     });
 
     return html`
@@ -242,7 +234,7 @@ class DDSVideoPlayer extends FocusMixin(
       ${hideCaption
         ? undefined
         : html`
-            <div class="${prefix}--video-player__video-caption">
+            <div class="${c4dPrefix}--video-player__video-caption">
               ${formatCaption({
                 duration: formatDuration({
                   duration: !duration ? duration : duration * 1000,
@@ -285,7 +277,7 @@ class DDSVideoPlayer extends FocusMixin(
   firstUpdated() {
     this.tabIndex = 0;
     const parentIsBackground = Boolean(
-      (this.parentElement as DDSVideoPlayerContainer)?.backgroundMode
+      (this.parentElement as C4DVideoPlayerContainer)?.backgroundMode
     );
 
     this.backgroundMode = parentIsBackground;
@@ -295,22 +287,26 @@ class DDSVideoPlayer extends FocusMixin(
    * The name of the custom event fired after video content state is changed upon a user gesture.
    */
   static get eventContentStateChange() {
-    return `${ddsPrefix}-video-player-content-state-changed`;
+    return `${c4dPrefix}-video-player-content-state-changed`;
   }
 
   /**
    * The name of the custom event fired requesting playback state change.
    */
   static get eventPlaybackStateChange() {
-    return `${ddsPrefix}-video-player-playback-state-changed`;
+    return `${c4dPrefix}-video-player-playback-state-changed`;
   }
 
   static get stableSelector() {
-    return `${ddsPrefix}--video-player`;
+    return `${c4dPrefix}--video-player`;
   }
 
+  static shadowRootOptions = {
+    ...LitElement.shadowRootOptions,
+    delegatesFocus: true,
+  };
   static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader
 }
 
 /* @__GENERATE_REACT_CUSTOM_ELEMENT_TYPE__ */
-export default DDSVideoPlayer;
+export default C4DVideoPlayer;
diff --git a/packages/web-components/src/globals/internal/feature-flags.ts b/packages/web-components/src/globals/internal/feature-flags.ts
index 86fee54bdbe..409f5adcc4e 100644
--- a/packages/web-components/src/globals/internal/feature-flags.ts
+++ b/packages/web-components/src/globals/internal/feature-flags.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -16,25 +16,25 @@
  *
  * @type {boolean}
  */
-export const DDS_FLAGS_ALL: boolean =
-  process!.env.DDS_FLAGS_ALL === 'true' || false;
+export const C4D_FLAGS_ALL: boolean =
+  process!.env.C4D_FLAGS_ALL === 'true' || false;
 
 /**
  * Enables Content Block - Headline
  *
  * @type {boolean}
  */
-export const DDS_CONTENT_BLOCK_HEADLINES: boolean =
-  process!.env.DDS_CONTENT_BLOCK_HEADLINES === 'true' || DDS_FLAGS_ALL || false;
+export const C4D_CONTENT_BLOCK_HEADLINES: boolean =
+  process!.env.C4D_CONTENT_BLOCK_HEADLINES === 'true' || C4D_FLAGS_ALL || false;
 
 /**
  * Enables Content Block - Card static
  *
  * @type {boolean}
  */
-export const DDS_CONTENT_BLOCK_CARD_STATIC: boolean =
-  process!.env.DDS_CONTENT_BLOCK_CARD_STATIC === 'true' ||
-  DDS_FLAGS_ALL ||
+export const C4D_CONTENT_BLOCK_CARD_STATIC: boolean =
+  process!.env.C4D_CONTENT_BLOCK_CARD_STATIC === 'true' ||
+  C4D_FLAGS_ALL ||
   false;
 
 /**
@@ -42,29 +42,29 @@ export const DDS_CONTENT_BLOCK_CARD_STATIC: boolean =
  *
  * @type {boolean}
  */
-export const DDS_SCOPED_SEARCH: boolean =
-  process!.env.DDS_SCOPED_SEARCH === 'true' || DDS_FLAGS_ALL || false;
+export const C4D_SCOPED_SEARCH: boolean =
+  process!.env.C4D_SCOPED_SEARCH === 'true' || C4D_FLAGS_ALL || false;
 
 /**
  * Enables Cloud Masthead Components
  *
  * @type {boolean}
  */
-export const DDS_CLOUD_MASTHEAD: boolean =
-  process!.env.DDS_CLOUD_MASTHEAD === 'true' || DDS_FLAGS_ALL || false;
+export const C4D_CLOUD_MASTHEAD: boolean =
+  process!.env.C4D_CLOUD_MASTHEAD === 'true' || C4D_FLAGS_ALL || false;
 
 /**
  * Enables custom profile login url in Masthead
  *
  * @type {boolean}
  */
-export const DDS_CUSTOM_PROFILE_LOGIN: boolean =
-  process!.env.DDS_CUSTOM_PROFILE_LOGIN === 'true' || DDS_FLAGS_ALL || false;
+export const C4D_CUSTOM_PROFILE_LOGIN: boolean =
+  process!.env.C4D_CUSTOM_PROFILE_LOGIN === 'true' || C4D_FLAGS_ALL || false;
 
 /**
  * Enables Pricing Table
  *
  * @type {boolean}
  */
-export const DDS_PRICING_TABLE: boolean =
-  process!.env.DDS_PRICING_TABLE === 'true' || DDS_FLAGS_ALL || false;
+export const C4D_PRICING_TABLE: boolean =
+  process!.env.C4D_PRICING_TABLE === 'true' || C4D_FLAGS_ALL || false;
diff --git a/packages/web-components/src/globals/internal/storybook-cdn.ts b/packages/web-components/src/globals/internal/storybook-cdn.ts
index 6d0247a7a7c..7b942ae7465 100644
--- a/packages/web-components/src/globals/internal/storybook-cdn.ts
+++ b/packages/web-components/src/globals/internal/storybook-cdn.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
diff --git a/packages/web-components/src/globals/mixins/connect.ts b/packages/web-components/src/globals/mixins/connect.ts
index d8bd0b3d4ac..432c387c37a 100644
--- a/packages/web-components/src/globals/mixins/connect.ts
+++ b/packages/web-components/src/globals/mixins/connect.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/src/globals/mixins/hybrid-render.ts b/packages/web-components/src/globals/mixins/hybrid-render.ts
index 79e04a818a8..293165a491a 100644
--- a/packages/web-components/src/globals/mixins/hybrid-render.ts
+++ b/packages/web-components/src/globals/mixins/hybrid-render.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * 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 { render, TemplateResult } from 'lit-html';
+import { render, TemplateResult } from 'lit';
 import { Constructor } from '../defs';
 
 /**
@@ -42,7 +42,7 @@ const HybridRenderMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
       }
       const { lightRenderRoot } = this;
       if (lightRenderRoot) {
-        render(this.renderLightDOM(), lightRenderRoot, { eventContext: this });
+        render(this.renderLightDOM(), lightRenderRoot as HTMLElement);
       }
     }
   }
diff --git a/packages/web-components/src/globals/mixins/modal-render.ts b/packages/web-components/src/globals/mixins/modal-render.ts
index ce16761c196..5ae751c627e 100644
--- a/packages/web-components/src/globals/mixins/modal-render.ts
+++ b/packages/web-components/src/globals/mixins/modal-render.ts
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { render, TemplateResult } from 'lit-html';
+import { render, TemplateResult } from 'lit';
 import { Constructor } from '../defs';
 
 /**
@@ -53,7 +53,7 @@ const ModalRenderMixin = <T extends Constructor<HTMLElement>>(Base: T) => {
       }
       const { modalRenderRoot } = this;
       if (modalRenderRoot) {
-        render(this.renderModal(), modalRenderRoot);
+        render(this.renderModal(), modalRenderRoot as HTMLElement);
       }
     }
 
diff --git a/packages/web-components/src/globals/mixins/stable-selector.ts b/packages/web-components/src/globals/mixins/stable-selector.ts
index 5de43409a78..cbea7c19b01 100644
--- a/packages/web-components/src/globals/mixins/stable-selector.ts
+++ b/packages/web-components/src/globals/mixins/stable-selector.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/src/globals/mixins/throttled-input.ts b/packages/web-components/src/globals/mixins/throttled-input.ts
index 8476eef3a75..7f56da56502 100644
--- a/packages/web-components/src/globals/mixins/throttled-input.ts
+++ b/packages/web-components/src/globals/mixins/throttled-input.ts
@@ -1,14 +1,14 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 throttle from 'lodash-es/throttle';
-import on from 'carbon-components/es/globals/js/misc/on.js';
+import on from '../../internal/vendor/@carbon/web-components/globals/mixins/on.js';
 import Handle from '../internal/handle';
 
 import { Constructor } from '../defs';
diff --git a/packages/web-components/src/globals/scss/_box-sizing.scss b/packages/web-components/src/globals/scss/_box-sizing.scss
index ed9ca1b4fca..6b5d3878c4a 100644
--- a/packages/web-components/src/globals/scss/_box-sizing.scss
+++ b/packages/web-components/src/globals/scss/_box-sizing.scss
@@ -5,14 +5,8 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/import-once/import-once';
-
 @mixin box-sizing {
   * {
     box-sizing: border-box;
   }
 }
-
-@include exports('box-sizing') {
-  @include box-sizing;
-}
diff --git a/packages/web-components/src/globals/scss/grid.scss b/packages/web-components/src/globals/scss/grid.scss
index fa5a9b96f3a..4ffd9801620 100644
--- a/packages/web-components/src/globals/scss/grid.scss
+++ b/packages/web-components/src/globals/scss/grid.scss
@@ -9,5 +9,3 @@ $feature-flags: (
   enable-css-custom-properties: true,
   grid-columns-16: true,
 );
-
-@import 'carbon-components/scss/globals/grid/grid';
diff --git a/packages/web-components/src/globals/scss/plex.scss b/packages/web-components/src/globals/scss/plex.scss
index e57536383b9..d0544bc0323 100644
--- a/packages/web-components/src/globals/scss/plex.scss
+++ b/packages/web-components/src/globals/scss/plex.scss
@@ -5,12 +5,12 @@
 // LICENSE file in the root directory of this source tree.
 //
 
-@import 'carbon-components/scss/globals/scss/css--reset';
-@import '@carbon/type/scss/font-face/mono';
-@import '@carbon/type/scss/font-face/sans';
-@import '@carbon/type/scss/font-face/serif';
-@import '@carbon/type/scss/reset';
-@include carbon--font-face-mono();
-@include carbon--font-face-sans();
-@include carbon--font-face-serif();
-@include carbon--type-reset();
+// @use 'carbon-components/scss/globals/scss/css--reset';
+// @use '@carbon/type/scss/font-face/mono';
+// @use '@carbon/type/scss/font-face/sans';
+// @use '@carbon/type/scss/font-face/serif';
+// @use '@carbon/type/scss/reset';
+// @include carbon--font-face-mono();
+// @include carbon--font-face-sans();
+// @include carbon--font-face-serif();
+// @include carbon--type-reset();
diff --git a/packages/web-components/src/globals/scss/themes.scss b/packages/web-components/src/globals/scss/themes.scss
index 68c9df67822..4fce8a5d9b1 100644
--- a/packages/web-components/src/globals/scss/themes.scss
+++ b/packages/web-components/src/globals/scss/themes.scss
@@ -4,27 +4,10 @@
 // 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 '@carbon/styles/scss/theme' as *;
+@use '@carbon/ibmdotcom-styles/scss/globals/tokens/color-tokens' as color-tokens;
+@use '@carbon/ibmdotcom-styles/scss/components/card-in-card/tokens' as
+  card-in-card-tokens;
 
-@import '@carbon/ibmdotcom-styles/scss/globals/vars';
-@import 'carbon-components/scss/globals/scss/css--helpers';
-@import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
-
-:host(.#{$dds-prefix}-theme-zone-white),
-.#{$dds-prefix}-theme-zone-white {
-  @include carbon--theme($carbon--theme--white, true);
-}
-
-:host(.#{$dds-prefix}-theme-zone-g10),
-.#{$dds-prefix}-theme-zone-g10 {
-  @include carbon--theme($carbon--theme--g10, true);
-}
-
-:host(.#{$dds-prefix}-theme-zone-g90),
-.#{$dds-prefix}-theme-zone-g90 {
-  @include carbon--theme($carbon--theme--g90, true);
-}
-
-:host(.#{$dds-prefix}-theme-zone-g100),
-.#{$dds-prefix}-theme-zone-g100 {
-  @include carbon--theme($carbon--theme--g100, true);
-}
+@include add-component-tokens(color-tokens.$color-tokens);
+@include add-component-tokens(card-in-card-tokens.$card-in-card-tokens);
diff --git a/packages/web-components/tests/a11y/karma-test-shim.js b/packages/web-components/tests/a11y/karma-test-shim.js
index b822b102184..efade479ffc 100644
--- a/packages/web-components/tests/a11y/karma-test-shim.js
+++ b/packages/web-components/tests/a11y/karma-test-shim.js
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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 { render } from 'lit-html';
+import { render } from 'lit/html.js';
 
 // For generating coverage report for untested files
 const { default: merge } = require('lodash-es/merge');
diff --git a/packages/web-components/tests/cdn-build/app/canary.html b/packages/web-components/tests/cdn-build/app/canary.html
index 8ec14c32e39..4206c1d2b94 100644
--- a/packages/web-components/tests/cdn-build/app/canary.html
+++ b/packages/web-components/tests/cdn-build/app/canary.html
@@ -8,294 +8,422 @@
 -->
 
 <html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-  <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-  <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-  <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-  <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-  <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-  <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-  <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-  <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-  <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-  <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-  <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-  <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-  <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-  <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-  <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-  <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-  <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-  <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-  <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-  <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-  <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-  <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-  <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-  <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-  <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-  <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-  <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-  <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-  <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-  <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-  <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-  <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-  <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-  <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-  <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-  <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-  <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-  <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-  <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-  <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-  <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-  <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-  <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-  <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-  <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-  <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-  <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-  <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-  <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-  <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-  <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-  <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-  <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-  <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-  <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-  <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-  <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-  <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-  <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-  <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-  <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-  <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-  <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-  <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-  <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-  <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-  <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-  <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-  <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-  <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-  <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-  <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-  <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-  <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-  <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-  <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-  <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-  <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-  <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-  <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-  <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-  <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-  <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-  <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-  <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-  <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-  <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-  <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-  <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-  <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-  <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-  <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-  <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-  <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-  <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-  <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-  <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-  <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-  <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-  <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-  <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-  <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-  <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-  <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-  <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-  <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-  <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-  <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-  <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-  <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-  <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-  <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-  <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-  <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-  <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-  <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-  <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-  <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-  <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-  <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-  <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-  <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-  <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-  <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-  <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-  <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-  <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-  <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-  <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-  <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-  <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-  <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-  <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-dotcom-shell-container:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script>
-    window.digitalData = window.digitalData || {
-      page: {
-        category: {
-          primaryCategory: '',
-        },
-        pageInfo: {
-          effectiveDate: '',
-          expiryDate: '',
-          language: 'en-US',
-          publishDate: '',
-          publisher: '',
-          version: 'Carbon for IBM.com',
-          ibm: {
-            contentDelivery: '',
-            contentProducer: '',
-            country: 'US',
-            industry: '',
-            owner: '',
-            siteID: '',
-            subject: '',
-            type: '',
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
+    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
+    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
+    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
+    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
+    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
+    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
+    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
+    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
+    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
+    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
+    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
+    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
+    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
+    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
+    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
+    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
+    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
+    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
+    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
+    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
+    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
+    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
+    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
+    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
+    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
+    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
+    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
+    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
+    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
+    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
+    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
+    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
+    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
+    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
+    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
+    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
+    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
+    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
+    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
+    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
+    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
+    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
+    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
+    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
+    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
+    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
+    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
+    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
+    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
+    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
+    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
+    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
+    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
+    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
+    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
+    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
+    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
+    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
+    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
+    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
+    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
+    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
+    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
+    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
+    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
+    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
+    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
+    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
+    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
+    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
+    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
+    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
+    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
+    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
+    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
+    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
+    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
+    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
+    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
+    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
+    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
+    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
+    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
+    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
+    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
+    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
+    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
+    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
+    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
+    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
+    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
+    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
+    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
+    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
+    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
+    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
+    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
+    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
+    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
+    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
+    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
+    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
+    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
+    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
+    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
+    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
+    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
+    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
+    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
+    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
+    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
+    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
+    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
+    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
+    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
+    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
+    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
+    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
+    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
+    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
+    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
+    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
+    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
+    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
+    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
+    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
+    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
+    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
+    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
+    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
+    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
+    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
+    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/plex.css" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/grid.css" />
+    <style type="text/css">
+      /* Suppress custom element until styles are loaded */
+      cds-dotcom-shell-container:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script>
+      window.digitalData = window.digitalData || {
+        page: {
+          category: {
+            primaryCategory: '',
+          },
+          pageInfo: {
+            effectiveDate: '',
+            expiryDate: '',
+            language: 'en-US',
+            publishDate: '',
+            publisher: '',
+            version: 'Carbon for IBM.com',
+            ibm: {
+              contentDelivery: '',
+              contentProducer: '',
+              country: 'US',
+              industry: '',
+              owner: '',
+              siteID: '',
+              subject: '',
+              type: '',
+            },
           },
+          isDataLayerReady: true,
         },
-        isDataLayerReady: true,
-      },
-    };
-  </script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/back-to-top.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/background-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/button-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/callout-quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/callout-with-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-in-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-section-images.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-section-offset.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-section-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/carousel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/cloud-masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-card-static.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-headlines.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-mixed.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-segmented.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-pictograms.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/cta-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/cta-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/dotcom-shell.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/expressive-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/feature-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/feature-card-block-large.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/feature-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/filter-panel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/footer.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/horizontal-rule.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/image.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leadspace.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leadspace-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leadspace-with-search.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leaving-ibm.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/lightbox-video-player.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/link-list.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/link-list-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/link-with-icon.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/locale-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/logo-grid.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/pictogram-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/scroll-animations.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/search-with-typeahead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/table-of-contents.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/tabs-extended.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/tabs-extended-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/tag-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/tag-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/text-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/universal-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/video-player.min.js"></script>
-</head>
-<body>
-<dds-dotcom-shell-container>
-  <main class="bx--content dds-ce-demo--ui-shell-content">
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--offset-lg-3 bx--col-lg-13">
-          <h2>
-            Purpose and function
-          </h2>
-          <p>
-            The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation
-            framework for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant
-            way. The shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings
-            and move between pages.
-            <br />
-            <br />
-            The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and
-            users. Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and
-            provides great user experiences. All IBM products built with Carbon are required to use the shell’s header.
-            <br />
-            <br />
-            To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the
-            Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a
-            universal dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to
-            these parts of the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in
-            MacOS.
-          </p>
-          <h2>
-            Header responsive behavior
-          </h2>
-          <p>
-            As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side
-            nav collapse into “hamburger” menu. See the example to better understand responsive behavior of the header.
-          </p>
-          <h2>
-            Secondary navigation
-          </h2>
-          <p>
-            The side-nav contains secondary navigation and fits below the header. It can be configured to be either
-            fixed-width or flexible, with only one level of nested items allowed. Both links and category lists can be used in
-            the side-nav and may be mixed together. There are several configurations of the side-nav, but only one
-            configuration should be used per product section. If tabs are needed on a page when using a side-nav, then the
-            tabs are secondary in hierarchy to the side-nav.
-          </p>
+      };
+    </script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/back-to-top.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/background-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/button-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/callout-quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/callout-with-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-in-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-link.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-section-offset.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/card-section-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/carousel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/cloud-masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-card-static.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-headlines.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-mixed.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-segmented.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-block-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/in-page-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-pictograms.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-group-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-item-row.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/content-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/cta-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/cta-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/dotcom-shell.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/expressive-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/feature-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/feature-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/filter-panel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/footer.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/horizontal-rule.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/image.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leadspace.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leadspace-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leadspace-with-search.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/leaving-ibm.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/lightbox-video-player.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/link-list.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/link-list-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/link-with-icon.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/locale-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/logo-grid.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/pictogram-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/scroll-animations.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/search-with-typeahead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/table-of-contents.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/tabs-extended.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/tabs-extended-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/text-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/global-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/canary/video-player.min.js"></script>
+  </head>
+  <body>
+    <cds-dotcom-shell-container>
+      <main class="bx--content cds-ce-demo--ui-shell-content">
+        <div class="bx--grid">
+          <div class="bx--row">
+            <div class="bx--offset-lg-3 bx--col-lg-13">
+              <h2>Purpose and function</h2>
+              <p>
+                The shell is perhaps the most crucial piece of any UI built with
+                Carbon. It contains the shared navigation framework for the
+                entire design system and ties the products in IBM’s portfolio
+                together in a cohesive and elegant way. The shell is the home of
+                the topmost navigation, where users can quickly and dependably
+                gain their bearings and move between pages.
+                <br />
+                <br />
+                The shell was designed with maximum flexibility built in, to
+                serve the needs of a broad range of products and users. Adopting
+                the shell ensures compliance with IBM design standards,
+                simplifies development efforts, and provides great user
+                experiences. All IBM products built with Carbon are required to
+                use the shell’s header.
+                <br />
+                <br />
+                To better understand the purpose and function of the UI shell,
+                consider the “shell” of MacOS, which contains the Apple menu,
+                top-level navigation, and universal, OS-level controls at the
+                top of the screen, as well as a universal dock along the bottom
+                or side of the screen. The Carbon UI shell is roughly analogous
+                in function to these parts of the Mac UI. For example, the app
+                switcher portion of the shell can be compared to the dock in
+                MacOS.
+              </p>
+              <h2>Header responsive behavior</h2>
+              <p>
+                As a header scales down to fit smaller screen sizes, headers
+                with persistent side nav menus should have the side nav collapse
+                into “hamburger” menu. See the example to better understand
+                responsive behavior of the header.
+              </p>
+              <h2>Secondary navigation</h2>
+              <p>
+                The side-nav contains secondary navigation and fits below the
+                header. It can be configured to be either fixed-width or
+                flexible, with only one level of nested items allowed. Both
+                links and category lists can be used in the side-nav and may be
+                mixed together. There are several configurations of the
+                side-nav, but only one configuration should be used per product
+                section. If tabs are needed on a page when using a side-nav,
+                then the tabs are secondary in hierarchy to the side-nav.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </main>
-</dds-dotcom-shell-container>
-</body>
+      </main>
+    </cds-dotcom-shell-container>
+  </body>
 </html>
diff --git a/packages/web-components/tests/cdn-build/app/latest.html b/packages/web-components/tests/cdn-build/app/latest.html
index 235c80775b6..bc82803ed2e 100644
--- a/packages/web-components/tests/cdn-build/app/latest.html
+++ b/packages/web-components/tests/cdn-build/app/latest.html
@@ -8,294 +8,422 @@
 -->
 
 <html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-  <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-  <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-  <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-  <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-  <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-  <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-  <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-  <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-  <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-  <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-  <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-  <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-  <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-  <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-  <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-  <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-  <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-  <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-  <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-  <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-  <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-  <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-  <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-  <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-  <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-  <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-  <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-  <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-  <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-  <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-  <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-  <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-  <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-  <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-  <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-  <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-  <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-  <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-  <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-  <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-  <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-  <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-  <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-  <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-  <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-  <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-  <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-  <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-  <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-  <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-  <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-  <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-  <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-  <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-  <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-  <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-  <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-  <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-  <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-  <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-  <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-  <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-  <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-  <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-  <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-  <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-  <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-  <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-  <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-  <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-  <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-  <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-  <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-  <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-  <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-  <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-  <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-  <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-  <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-  <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-  <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-  <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-  <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-  <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-  <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-  <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-  <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-  <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-  <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-  <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-  <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-  <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-  <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-  <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-  <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-  <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-  <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-  <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-  <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-  <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-  <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-  <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-  <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-  <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-  <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-  <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-  <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-  <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-  <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-  <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-  <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-  <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-  <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-  <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-  <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-  <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-  <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-  <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-  <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-  <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-  <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-  <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-  <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-  <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-  <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-  <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-  <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-  <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-  <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-  <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-  <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-  <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-  <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-dotcom-shell-container:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script>
-    window.digitalData = window.digitalData || {
-      page: {
-        category: {
-          primaryCategory: '',
-        },
-        pageInfo: {
-          effectiveDate: '',
-          expiryDate: '',
-          language: 'en-US',
-          publishDate: '',
-          publisher: '',
-          version: 'Carbon for IBM.com',
-          ibm: {
-            contentDelivery: '',
-            contentProducer: '',
-            country: 'US',
-            industry: '',
-            owner: '',
-            siteID: '',
-            subject: '',
-            type: '',
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
+    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
+    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
+    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
+    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
+    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
+    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
+    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
+    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
+    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
+    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
+    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
+    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
+    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
+    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
+    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
+    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
+    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
+    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
+    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
+    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
+    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
+    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
+    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
+    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
+    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
+    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
+    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
+    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
+    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
+    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
+    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
+    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
+    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
+    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
+    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
+    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
+    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
+    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
+    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
+    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
+    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
+    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
+    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
+    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
+    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
+    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
+    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
+    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
+    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
+    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
+    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
+    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
+    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
+    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
+    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
+    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
+    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
+    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
+    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
+    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
+    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
+    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
+    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
+    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
+    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
+    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
+    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
+    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
+    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
+    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
+    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
+    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
+    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
+    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
+    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
+    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
+    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
+    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
+    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
+    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
+    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
+    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
+    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
+    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
+    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
+    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
+    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
+    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
+    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
+    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
+    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
+    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
+    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
+    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
+    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
+    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
+    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
+    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
+    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
+    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
+    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
+    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
+    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
+    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
+    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
+    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
+    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
+    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
+    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
+    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
+    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
+    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
+    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
+    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
+    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
+    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
+    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
+    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
+    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
+    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
+    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
+    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
+    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
+    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
+    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
+    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
+    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
+    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
+    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
+    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
+    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
+    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
+    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <style type="text/css">
+      /* Suppress custom element until styles are loaded */
+      cds-dotcom-shell-container:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script>
+      window.digitalData = window.digitalData || {
+        page: {
+          category: {
+            primaryCategory: '',
+          },
+          pageInfo: {
+            effectiveDate: '',
+            expiryDate: '',
+            language: 'en-US',
+            publishDate: '',
+            publisher: '',
+            version: 'Carbon for IBM.com',
+            ibm: {
+              contentDelivery: '',
+              contentProducer: '',
+              country: 'US',
+              industry: '',
+              owner: '',
+              siteID: '',
+              subject: '',
+              type: '',
+            },
           },
+          isDataLayerReady: true,
         },
-        isDataLayerReady: true,
-      },
-    };
-  </script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/back-to-top.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/background-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/button-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/callout-quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/callout-with-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-in-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-images.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-offset.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/carousel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cloud-masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-card-static.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-headlines.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-mixed.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-segmented.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-pictograms.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cta-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cta-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/expressive-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-card-block-large.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/filter-panel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/horizontal-rule.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/image.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace-with-search.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leaving-ibm.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/lightbox-video-player.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-list.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-list-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-with-icon.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/locale-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/logo-grid.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/pictogram-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/scroll-animations.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/search-with-typeahead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/table-of-contents.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tabs-extended.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tabs-extended-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tag-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tag-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/text-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/universal-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js"></script>
-</head>
-<body>
-<dds-dotcom-shell-container>
-  <main class="bx--content dds-ce-demo--ui-shell-content">
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--offset-lg-3 bx--col-lg-13">
-          <h2>
-            Purpose and function
-          </h2>
-          <p>
-            The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation
-            framework for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant
-            way. The shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings
-            and move between pages.
-            <br />
-            <br />
-            The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and
-            users. Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and
-            provides great user experiences. All IBM products built with Carbon are required to use the shell’s header.
-            <br />
-            <br />
-            To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the
-            Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a
-            universal dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to
-            these parts of the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in
-            MacOS.
-          </p>
-          <h2>
-            Header responsive behavior
-          </h2>
-          <p>
-            As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side
-            nav collapse into “hamburger” menu. See the example to better understand responsive behavior of the header.
-          </p>
-          <h2>
-            Secondary navigation
-          </h2>
-          <p>
-            The side-nav contains secondary navigation and fits below the header. It can be configured to be either
-            fixed-width or flexible, with only one level of nested items allowed. Both links and category lists can be used in
-            the side-nav and may be mixed together. There are several configurations of the side-nav, but only one
-            configuration should be used per product section. If tabs are needed on a page when using a side-nav, then the
-            tabs are secondary in hierarchy to the side-nav.
-          </p>
+      };
+    </script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/back-to-top.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/background-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/button-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/callout-quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/callout-with-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-in-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-link.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-offset.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/card-section-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/carousel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cloud-masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-card-static.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-headlines.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-mixed.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-segmented.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-block-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/in-page-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-pictograms.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-group-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-item-row.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/content-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cta-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/cta-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/dotcom-shell.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/expressive-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/feature-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/filter-panel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/horizontal-rule.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/image.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leadspace-with-search.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/leaving-ibm.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/lightbox-video-player.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-list.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-list-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/link-with-icon.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/locale-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/logo-grid.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/pictogram-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/scroll-animations.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/search-with-typeahead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/table-of-contents.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tabs-extended.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/tabs-extended-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/text-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/global-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/video-player.min.js"></script>
+  </head>
+  <body>
+    <cds-dotcom-shell-container>
+      <main class="bx--content cds-ce-demo--ui-shell-content">
+        <div class="bx--grid">
+          <div class="bx--row">
+            <div class="bx--offset-lg-3 bx--col-lg-13">
+              <h2>Purpose and function</h2>
+              <p>
+                The shell is perhaps the most crucial piece of any UI built with
+                Carbon. It contains the shared navigation framework for the
+                entire design system and ties the products in IBM’s portfolio
+                together in a cohesive and elegant way. The shell is the home of
+                the topmost navigation, where users can quickly and dependably
+                gain their bearings and move between pages.
+                <br />
+                <br />
+                The shell was designed with maximum flexibility built in, to
+                serve the needs of a broad range of products and users. Adopting
+                the shell ensures compliance with IBM design standards,
+                simplifies development efforts, and provides great user
+                experiences. All IBM products built with Carbon are required to
+                use the shell’s header.
+                <br />
+                <br />
+                To better understand the purpose and function of the UI shell,
+                consider the “shell” of MacOS, which contains the Apple menu,
+                top-level navigation, and universal, OS-level controls at the
+                top of the screen, as well as a universal dock along the bottom
+                or side of the screen. The Carbon UI shell is roughly analogous
+                in function to these parts of the Mac UI. For example, the app
+                switcher portion of the shell can be compared to the dock in
+                MacOS.
+              </p>
+              <h2>Header responsive behavior</h2>
+              <p>
+                As a header scales down to fit smaller screen sizes, headers
+                with persistent side nav menus should have the side nav collapse
+                into “hamburger” menu. See the example to better understand
+                responsive behavior of the header.
+              </p>
+              <h2>Secondary navigation</h2>
+              <p>
+                The side-nav contains secondary navigation and fits below the
+                header. It can be configured to be either fixed-width or
+                flexible, with only one level of nested items allowed. Both
+                links and category lists can be used in the side-nav and may be
+                mixed together. There are several configurations of the
+                side-nav, but only one configuration should be used per product
+                section. If tabs are needed on a page when using a side-nav,
+                then the tabs are secondary in hierarchy to the side-nav.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </main>
-</dds-dotcom-shell-container>
-</body>
+      </main>
+    </cds-dotcom-shell-container>
+  </body>
 </html>
diff --git a/packages/web-components/tests/cdn-build/app/next.html b/packages/web-components/tests/cdn-build/app/next.html
index 8366d5e4897..df6a46b1a87 100644
--- a/packages/web-components/tests/cdn-build/app/next.html
+++ b/packages/web-components/tests/cdn-build/app/next.html
@@ -8,294 +8,422 @@
 -->
 
 <html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-  <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-  <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-  <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-  <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-  <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-  <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-  <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-  <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-  <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-  <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-  <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-  <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-  <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-  <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-  <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-  <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-  <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-  <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-  <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-  <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-  <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-  <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-  <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-  <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-  <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-  <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-  <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-  <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-  <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-  <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-  <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-  <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-  <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-  <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-  <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-  <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-  <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-  <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-  <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-  <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-  <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-  <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-  <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-  <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-  <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-  <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-  <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-  <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-  <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-  <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-  <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-  <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-  <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-  <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-  <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-  <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-  <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-  <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-  <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-  <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-  <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-  <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-  <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-  <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-  <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-  <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-  <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-  <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-  <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-  <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-  <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-  <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-  <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-  <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-  <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-  <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-  <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-  <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-  <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-  <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-  <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-  <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-  <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-  <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-  <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-  <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-  <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-  <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-  <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-  <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-  <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-  <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-  <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-  <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-  <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-  <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-  <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-  <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-  <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-  <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-  <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-  <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-  <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-  <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-  <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-  <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-  <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-  <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-  <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-  <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-  <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-  <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-  <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-  <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-  <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-  <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-  <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-  <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-  <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-  <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-  <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-  <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-  <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-  <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-  <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-  <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-  <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-  <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-  <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-  <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-  <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-  <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-  <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-dotcom-shell-container:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script>
-    window.digitalData = window.digitalData || {
-      page: {
-        category: {
-          primaryCategory: '',
-        },
-        pageInfo: {
-          effectiveDate: '',
-          expiryDate: '',
-          language: 'en-US',
-          publishDate: '',
-          publisher: '',
-          version: 'Carbon for IBM.com',
-          ibm: {
-            contentDelivery: '',
-            contentProducer: '',
-            country: 'US',
-            industry: '',
-            owner: '',
-            siteID: '',
-            subject: '',
-            type: '',
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
+    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
+    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
+    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
+    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
+    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
+    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
+    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
+    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
+    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
+    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
+    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
+    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
+    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
+    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
+    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
+    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
+    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
+    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
+    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
+    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
+    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
+    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
+    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
+    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
+    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
+    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
+    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
+    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
+    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
+    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
+    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
+    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
+    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
+    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
+    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
+    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
+    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
+    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
+    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
+    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
+    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
+    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
+    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
+    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
+    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
+    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
+    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
+    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
+    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
+    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
+    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
+    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
+    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
+    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
+    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
+    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
+    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
+    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
+    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
+    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
+    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
+    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
+    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
+    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
+    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
+    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
+    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
+    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
+    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
+    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
+    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
+    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
+    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
+    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
+    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
+    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
+    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
+    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
+    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
+    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
+    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
+    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
+    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
+    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
+    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
+    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
+    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
+    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
+    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
+    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
+    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
+    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
+    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
+    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
+    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
+    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
+    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
+    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
+    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
+    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
+    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
+    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
+    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
+    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
+    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
+    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
+    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
+    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
+    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
+    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
+    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
+    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
+    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
+    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
+    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
+    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
+    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
+    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
+    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
+    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
+    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
+    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
+    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
+    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
+    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
+    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
+    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
+    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
+    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
+    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
+    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
+    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
+    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/plex.css" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/grid.css" />
+    <style type="text/css">
+      /* Suppress custom element until styles are loaded */
+      cds-dotcom-shell-container:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script>
+      window.digitalData = window.digitalData || {
+        page: {
+          category: {
+            primaryCategory: '',
+          },
+          pageInfo: {
+            effectiveDate: '',
+            expiryDate: '',
+            language: 'en-US',
+            publishDate: '',
+            publisher: '',
+            version: 'Carbon for IBM.com',
+            ibm: {
+              contentDelivery: '',
+              contentProducer: '',
+              country: 'US',
+              industry: '',
+              owner: '',
+              siteID: '',
+              subject: '',
+              type: '',
+            },
           },
+          isDataLayerReady: true,
         },
-        isDataLayerReady: true,
-      },
-    };
-  </script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/back-to-top.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/background-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/button-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/callout-quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/callout-with-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-in-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-section-images.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-section-offset.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-section-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/carousel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/cloud-masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-card-static.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-headlines.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-mixed.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-segmented.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-pictograms.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/cta-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/cta-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/dotcom-shell.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/expressive-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/feature-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/feature-card-block-large.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/feature-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/filter-panel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/footer.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/horizontal-rule.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/image.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leadspace.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leadspace-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leadspace-with-search.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leaving-ibm.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/lightbox-video-player.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/link-list.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/link-list-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/link-with-icon.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/locale-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/logo-grid.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/pictogram-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/scroll-animations.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/search-with-typeahead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/table-of-contents.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/tabs-extended.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/tabs-extended-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/tag-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/tag-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/text-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/universal-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/video-player.min.js"></script>
-</head>
-<body>
-<dds-dotcom-shell-container>
-  <main class="bx--content dds-ce-demo--ui-shell-content">
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--offset-lg-3 bx--col-lg-13">
-          <h2>
-            Purpose and function
-          </h2>
-          <p>
-            The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation
-            framework for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant
-            way. The shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings
-            and move between pages.
-            <br />
-            <br />
-            The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and
-            users. Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and
-            provides great user experiences. All IBM products built with Carbon are required to use the shell’s header.
-            <br />
-            <br />
-            To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the
-            Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a
-            universal dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to
-            these parts of the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in
-            MacOS.
-          </p>
-          <h2>
-            Header responsive behavior
-          </h2>
-          <p>
-            As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side
-            nav collapse into “hamburger” menu. See the example to better understand responsive behavior of the header.
-          </p>
-          <h2>
-            Secondary navigation
-          </h2>
-          <p>
-            The side-nav contains secondary navigation and fits below the header. It can be configured to be either
-            fixed-width or flexible, with only one level of nested items allowed. Both links and category lists can be used in
-            the side-nav and may be mixed together. There are several configurations of the side-nav, but only one
-            configuration should be used per product section. If tabs are needed on a page when using a side-nav, then the
-            tabs are secondary in hierarchy to the side-nav.
-          </p>
+      };
+    </script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/back-to-top.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/background-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/button-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/callout-quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/callout-with-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-in-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-link.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-section-offset.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/card-section-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/carousel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/cloud-masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-card-static.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-headlines.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-mixed.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-segmented.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-block-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/in-page-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-pictograms.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-group-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-item-row.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/content-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/cta-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/cta-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/dotcom-shell.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/expressive-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/feature-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/feature-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/filter-panel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/footer.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/horizontal-rule.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/image.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leadspace.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leadspace-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leadspace-with-search.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/leaving-ibm.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/lightbox-video-player.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/link-list.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/link-list-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/link-with-icon.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/locale-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/logo-grid.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/pictogram-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/scroll-animations.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/search-with-typeahead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/table-of-contents.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/tabs-extended.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/tabs-extended-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/text-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/global-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/next/video-player.min.js"></script>
+  </head>
+  <body>
+    <cds-dotcom-shell-container>
+      <main class="bx--content cds-ce-demo--ui-shell-content">
+        <div class="bx--grid">
+          <div class="bx--row">
+            <div class="bx--offset-lg-3 bx--col-lg-13">
+              <h2>Purpose and function</h2>
+              <p>
+                The shell is perhaps the most crucial piece of any UI built with
+                Carbon. It contains the shared navigation framework for the
+                entire design system and ties the products in IBM’s portfolio
+                together in a cohesive and elegant way. The shell is the home of
+                the topmost navigation, where users can quickly and dependably
+                gain their bearings and move between pages.
+                <br />
+                <br />
+                The shell was designed with maximum flexibility built in, to
+                serve the needs of a broad range of products and users. Adopting
+                the shell ensures compliance with IBM design standards,
+                simplifies development efforts, and provides great user
+                experiences. All IBM products built with Carbon are required to
+                use the shell’s header.
+                <br />
+                <br />
+                To better understand the purpose and function of the UI shell,
+                consider the “shell” of MacOS, which contains the Apple menu,
+                top-level navigation, and universal, OS-level controls at the
+                top of the screen, as well as a universal dock along the bottom
+                or side of the screen. The Carbon UI shell is roughly analogous
+                in function to these parts of the Mac UI. For example, the app
+                switcher portion of the shell can be compared to the dock in
+                MacOS.
+              </p>
+              <h2>Header responsive behavior</h2>
+              <p>
+                As a header scales down to fit smaller screen sizes, headers
+                with persistent side nav menus should have the side nav collapse
+                into “hamburger” menu. See the example to better understand
+                responsive behavior of the header.
+              </p>
+              <h2>Secondary navigation</h2>
+              <p>
+                The side-nav contains secondary navigation and fits below the
+                header. It can be configured to be either fixed-width or
+                flexible, with only one level of nested items allowed. Both
+                links and category lists can be used in the side-nav and may be
+                mixed together. There are several configurations of the
+                side-nav, but only one configuration should be used per product
+                section. If tabs are needed on a page when using a side-nav,
+                then the tabs are secondary in hierarchy to the side-nav.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </main>
-</dds-dotcom-shell-container>
-</body>
+      </main>
+    </cds-dotcom-shell-container>
+  </body>
 </html>
diff --git a/packages/web-components/tests/cdn-build/app/version.html b/packages/web-components/tests/cdn-build/app/version.html
index 2e402d062a9..465d19ce7ba 100644
--- a/packages/web-components/tests/cdn-build/app/version.html
+++ b/packages/web-components/tests/cdn-build/app/version.html
@@ -8,294 +8,422 @@
 -->
 
 <html>
-<head>
-  <title>@carbon/ibmdotcom-web-components example</title>
-  <meta charset="UTF-8" />
-  <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
-  <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
-  <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
-  <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
-  <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
-  <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
-  <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
-  <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
-  <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
-  <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
-  <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
-  <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
-  <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
-  <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
-  <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
-  <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
-  <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
-  <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
-  <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
-  <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
-  <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
-  <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
-  <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
-  <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
-  <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
-  <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
-  <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
-  <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
-  <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
-  <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
-  <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
-  <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
-  <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
-  <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
-  <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
-  <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
-  <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
-  <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
-  <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
-  <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
-  <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
-  <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
-  <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
-  <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
-  <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
-  <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
-  <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
-  <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
-  <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
-  <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
-  <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
-  <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
-  <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
-  <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
-  <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
-  <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
-  <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
-  <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
-  <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
-  <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
-  <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
-  <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
-  <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
-  <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
-  <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
-  <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
-  <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
-  <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
-  <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
-  <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
-  <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
-  <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
-  <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
-  <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
-  <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
-  <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
-  <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
-  <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
-  <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
-  <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
-  <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
-  <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
-  <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
-  <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
-  <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
-  <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
-  <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
-  <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
-  <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
-  <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
-  <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
-  <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
-  <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
-  <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
-  <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
-  <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
-  <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
-  <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
-  <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
-  <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
-  <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
-  <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
-  <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
-  <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
-  <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
-  <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
-  <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
-  <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
-  <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
-  <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
-  <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
-  <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
-  <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
-  <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
-  <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
-  <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
-  <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
-  <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
-  <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
-  <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
-  <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
-  <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
-  <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
-  <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
-  <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
-  <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
-  <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
-  <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
-  <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
-  <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
-  <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
-  <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
-  <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
-  <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
-  <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
-  <style type="text/css">
-    /* Suppress custom element until styles are loaded */
-    dds-dotcom-shell-container:not(:defined) {
-      display: none;
-    }
-  </style>
-  <script>
-    window.digitalData = window.digitalData || {
-      page: {
-        category: {
-          primaryCategory: '',
-        },
-        pageInfo: {
-          effectiveDate: '',
-          expiryDate: '',
-          language: 'en-US',
-          publishDate: '',
-          publisher: '',
-          version: 'Carbon for IBM.com',
-          ibm: {
-            contentDelivery: '',
-            contentProducer: '',
-            country: 'US',
-            industry: '',
-            owner: '',
-            siteID: '',
-            subject: '',
-            type: '',
+  <head>
+    <title>@carbon/ibmdotcom-web-components example</title>
+    <meta charset="UTF-8" />
+    <link rel="alternate" hreflang="en-us" href="https://www.ibm.com/us-en/" />
+    <link rel="alternate" hreflang="x-default" href="https://www.ibm.com" />
+    <link rel="alternate" hreflang="en-af" href="https://www.ibm.com/af-en" />
+    <link rel="alternate" hreflang="fr-dz" href="https://www.ibm.com/dz-fr" />
+    <link rel="alternate" hreflang="pt-ao" href="https://www.ibm.com/ao-pt" />
+    <link rel="alternate" hreflang="en-ai" href="https://www.ibm.com/ai-en" />
+    <link rel="alternate" hreflang="en-ag" href="https://www.ibm.com/ag-en" />
+    <link rel="alternate" hreflang="es-ar" href="https://www.ibm.com/ar-es" />
+    <link rel="alternate" hreflang="en-aw" href="https://www.ibm.com/aw-en" />
+    <link rel="alternate" hreflang="en-au" href="https://www.ibm.com/au-en" />
+    <link rel="alternate" hreflang="de-at" href="https://www.ibm.com/at-de" />
+    <link rel="alternate" hreflang="en-bs" href="https://www.ibm.com/bs-en" />
+    <link rel="alternate" hreflang="en-bh" href="https://www.ibm.com/bh-en" />
+    <link rel="alternate" hreflang="en-bd" href="https://www.ibm.com/bd-en" />
+    <link rel="alternate" hreflang="en-bb" href="https://www.ibm.com/bb-en" />
+    <link rel="alternate" hreflang="en-be" href="https://www.ibm.com/be-en" />
+    <link rel="alternate" hreflang="en-bm" href="https://www.ibm.com/bm-en" />
+    <link rel="alternate" hreflang="es-bo" href="https://www.ibm.com/bo-es" />
+    <link rel="alternate" hreflang="en-bw" href="https://www.ibm.com/bw-en" />
+    <link rel="alternate" hreflang="pt-br" href="https://www.ibm.com/br-pt" />
+    <link rel="alternate" hreflang="en-vg" href="https://www.ibm.com/vg-en" />
+    <link rel="alternate" hreflang="en-bn" href="https://www.ibm.com/bn-en" />
+    <link rel="alternate" hreflang="en-bg" href="https://www.ibm.com/bg-en" />
+    <link rel="alternate" hreflang="fr-bf" href="https://www.ibm.com/bf-fr" />
+    <link rel="alternate" hreflang="en-kh" href="https://www.ibm.com/kh-en" />
+    <link rel="alternate" hreflang="fr-cm" href="https://www.ibm.com/cm-fr" />
+    <link rel="alternate" hreflang="en-ca" href="https://www.ibm.com/ca-en" />
+    <link rel="alternate" hreflang="fr-ca" href="https://www.ibm.com/ca-fr" />
+    <link rel="alternate" hreflang="en-ky" href="https://www.ibm.com/ky-en" />
+    <link rel="alternate" hreflang="fr-td" href="https://www.ibm.com/td-fr" />
+    <link rel="alternate" hreflang="es-cl" href="https://www.ibm.com/cl-es" />
+    <link rel="alternate" hreflang="zh-cn" href="https://www.ibm.com/cn-zh" />
+    <link rel="alternate" hreflang="es-co" href="https://www.ibm.com/co-es" />
+    <link rel="alternate" hreflang="fr-cd" href="https://www.ibm.com/cd-fr" />
+    <link rel="alternate" hreflang="fr-cg" href="https://www.ibm.com/cg-fr" />
+    <link rel="alternate" hreflang="es-cr" href="https://www.ibm.com/cr-es" />
+    <link rel="alternate" hreflang="en-hr" href="https://www.ibm.com/hr-en" />
+    <link rel="alternate" hreflang="en-cw" href="https://www.ibm.com/cw-en" />
+    <link rel="alternate" hreflang="en-cy" href="https://www.ibm.com/cy-en" />
+    <link rel="alternate" hreflang="en-cz" href="https://www.ibm.com/cz-en" />
+    <link rel="alternate" hreflang="en-dm" href="https://www.ibm.com/dm-en" />
+    <link rel="alternate" hreflang="en-dk" href="https://www.ibm.com/dk-en" />
+    <link rel="alternate" hreflang="es-ec" href="https://www.ibm.com/ec-es" />
+    <link rel="alternate" hreflang="en-eg" href="https://www.ibm.com/eg-en" />
+    <link rel="alternate" hreflang="en-ee" href="https://www.ibm.com/ee-en" />
+    <link rel="alternate" hreflang="en-et" href="https://www.ibm.com/et-en" />
+    <link rel="alternate" hreflang="en-fi" href="https://www.ibm.com/fi-en" />
+    <link rel="alternate" hreflang="fr-fr" href="https://www.ibm.com/fr-fr" />
+    <link rel="alternate" hreflang="fr-ga" href="https://www.ibm.com/ga-fr" />
+    <link rel="alternate" hreflang="de-de" href="https://www.ibm.com/de-de" />
+    <link rel="alternate" hreflang="en-gh" href="https://www.ibm.com/gh-en" />
+    <link rel="alternate" hreflang="en-gr" href="https://www.ibm.com/gr-en" />
+    <link rel="alternate" hreflang="en-gd" href="https://www.ibm.com/gd-en" />
+    <link rel="alternate" hreflang="en-gy" href="https://www.ibm.com/gy-en" />
+    <link rel="alternate" hreflang="en-hk" href="https://www.ibm.com/hk-en" />
+    <link rel="alternate" hreflang="en-hu" href="https://www.ibm.com/hu-en" />
+    <link rel="alternate" hreflang="en-in" href="https://www.ibm.com/in-en" />
+    <link rel="alternate" hreflang="en-id" href="https://www.ibm.com/id-en" />
+    <link rel="alternate" hreflang="en-iq" href="https://www.ibm.com/iq-en" />
+    <link rel="alternate" hreflang="en-ie" href="https://www.ibm.com/ie-en" />
+    <link rel="alternate" hreflang="en-il" href="https://www.ibm.com/il-en" />
+    <link rel="alternate" hreflang="it-it" href="https://www.ibm.com/it-it" />
+    <link rel="alternate" hreflang="fr-ci" href="https://www.ibm.com/ci-fr" />
+    <link rel="alternate" hreflang="en-jm" href="https://www.ibm.com/jm-en" />
+    <link rel="alternate" hreflang="ja-jp" href="https://www.ibm.com/jp-ja" />
+    <link rel="alternate" hreflang="en-jo" href="https://www.ibm.com/jo-en" />
+    <link rel="alternate" hreflang="en-kz" href="https://www.ibm.com/kz-en" />
+    <link rel="alternate" hreflang="en-ke" href="https://www.ibm.com/ke-en" />
+    <link rel="alternate" hreflang="ko-kr" href="https://www.ibm.com/kr-ko" />
+    <link rel="alternate" hreflang="en-kw" href="https://www.ibm.com/kw-en" />
+    <link rel="alternate" hreflang="en-lv" href="https://www.ibm.com/lv-en" />
+    <link rel="alternate" hreflang="en-lb" href="https://www.ibm.com/lb-en" />
+    <link rel="alternate" hreflang="en-ly" href="https://www.ibm.com/ly-en" />
+    <link rel="alternate" hreflang="en-lt" href="https://www.ibm.com/lt-en" />
+    <link rel="alternate" hreflang="en-mw" href="https://www.ibm.com/mw-en" />
+    <link rel="alternate" hreflang="en-my" href="https://www.ibm.com/my-en" />
+    <link rel="alternate" hreflang="fr-mu" href="https://www.ibm.com/mu-fr" />
+    <link rel="alternate" hreflang="es-mx" href="https://www.ibm.com/mx-es" />
+    <link rel="alternate" hreflang="en-ms" href="https://www.ibm.com/ms-en" />
+    <link rel="alternate" hreflang="fr-ma" href="https://www.ibm.com/ma-fr" />
+    <link rel="alternate" hreflang="pt-mz" href="https://www.ibm.com/mz-pt" />
+    <link rel="alternate" hreflang="en-na" href="https://www.ibm.com/na-en" />
+    <link rel="alternate" hreflang="en-np" href="https://www.ibm.com/np-en" />
+    <link rel="alternate" hreflang="en-nl" href="https://www.ibm.com/nl-en" />
+    <link rel="alternate" hreflang="en-nz" href="https://www.ibm.com/nz-en" />
+    <link rel="alternate" hreflang="fr-ne" href="https://www.ibm.com/ne-fr" />
+    <link rel="alternate" hreflang="en-ng" href="https://www.ibm.com/ng-en" />
+    <link rel="alternate" hreflang="en-no" href="https://www.ibm.com/no-en" />
+    <link rel="alternate" hreflang="en-om" href="https://www.ibm.com/om-en" />
+    <link rel="alternate" hreflang="en-pk" href="https://www.ibm.com/pk-en" />
+    <link rel="alternate" hreflang="es-py" href="https://www.ibm.com/py-es" />
+    <link rel="alternate" hreflang="es-pe" href="https://www.ibm.com/pe-es" />
+    <link rel="alternate" hreflang="en-ph" href="https://www.ibm.com/ph-en" />
+    <link rel="alternate" hreflang="pl-pl" href="https://www.ibm.com/pl-pl" />
+    <link rel="alternate" hreflang="en-pt" href="https://www.ibm.com/pt-en" />
+    <link rel="alternate" hreflang="en-qa" href="https://www.ibm.com/qa-en" />
+    <link rel="alternate" hreflang="en-ro" href="https://www.ibm.com/ro-en" />
+    <link rel="alternate" hreflang="ru-ru" href="https://www.ibm.com/ru-ru" />
+    <link rel="alternate" hreflang="en-kn" href="https://www.ibm.com/kn-en" />
+    <link rel="alternate" hreflang="en-lc" href="https://www.ibm.com/lc-en" />
+    <link rel="alternate" hreflang="en-vc" href="https://www.ibm.com/vc-en" />
+    <link rel="alternate" hreflang="en-sa" href="https://www.ibm.com/sa-en" />
+    <link rel="alternate" hreflang="fr-sn" href="https://www.ibm.com/sn-fr" />
+    <link rel="alternate" hreflang="en-rs" href="https://www.ibm.com/rs-en" />
+    <link rel="alternate" hreflang="fr-sc" href="https://www.ibm.com/sc-fr" />
+    <link rel="alternate" hreflang="en-sl" href="https://www.ibm.com/sl-en" />
+    <link rel="alternate" hreflang="en-sg" href="https://www.ibm.com/sg-en" />
+    <link rel="alternate" hreflang="en-sk" href="https://www.ibm.com/sk-en" />
+    <link rel="alternate" hreflang="en-si" href="https://www.ibm.com/si-en" />
+    <link rel="alternate" hreflang="en-za" href="https://www.ibm.com/za-en" />
+    <link rel="alternate" hreflang="es-es" href="https://www.ibm.com/es-es" />
+    <link rel="alternate" hreflang="en-lk" href="https://www.ibm.com/lk-en" />
+    <link rel="alternate" hreflang="en-sr" href="https://www.ibm.com/sr-en" />
+    <link rel="alternate" hreflang="en-se" href="https://www.ibm.com/se-en" />
+    <link rel="alternate" hreflang="fr-ch" href="https://www.ibm.com/ch-fr" />
+    <link rel="alternate" hreflang="de-ch" href="https://www.ibm.com/ch-de" />
+    <link rel="alternate" hreflang="zh-tw" href="https://www.ibm.com/tw-zh" />
+    <link rel="alternate" hreflang="en-tz" href="https://www.ibm.com/tz-en" />
+    <link rel="alternate" hreflang="en-th" href="https://www.ibm.com/th-en" />
+    <link rel="alternate" hreflang="en-tt" href="https://www.ibm.com/tt-en" />
+    <link rel="alternate" hreflang="fr-tn" href="https://www.ibm.com/tn-fr" />
+    <link rel="alternate" hreflang="tr-tr" href="https://www.ibm.com/tr-tr" />
+    <link rel="alternate" hreflang="en-ye" href="https://www.ibm.com/ye-en" />
+    <link rel="alternate" hreflang="en-tc" href="https://www.ibm.com/tc-en" />
+    <link rel="alternate" hreflang="en-ua" href="https://www.ibm.com/ua-en" />
+    <link rel="alternate" hreflang="en-ug" href="https://www.ibm.com/ug-en" />
+    <link rel="alternate" hreflang="en-ae" href="https://www.ibm.com/ae-en" />
+    <link rel="alternate" hreflang="en-gb" href="https://www.ibm.com/uk-en" />
+    <link rel="alternate" hreflang="es-uy" href="https://www.ibm.com/uy-es" />
+    <link rel="alternate" hreflang="en-uz" href="https://www.ibm.com/uz-en" />
+    <link rel="alternate" hreflang="es-ve" href="https://www.ibm.com/ve-es" />
+    <link rel="alternate" hreflang="en-vn" href="https://www.ibm.com/vn-en" />
+    <link rel="alternate" hreflang="en-zm" href="https://www.ibm.com/zm-en" />
+    <link rel="alternate" hreflang="en-zw" href="https://www.ibm.com/zw-en" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/plex.css" />
+    <link
+      rel="stylesheet"
+      href="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/grid.css" />
+    <style type="text/css">
+      /* Suppress custom element until styles are loaded */
+      cds-dotcom-shell-container:not(:defined) {
+        display: none;
+      }
+    </style>
+    <script>
+      window.digitalData = window.digitalData || {
+        page: {
+          category: {
+            primaryCategory: '',
+          },
+          pageInfo: {
+            effectiveDate: '',
+            expiryDate: '',
+            language: 'en-US',
+            publishDate: '',
+            publisher: '',
+            version: 'Carbon for IBM.com',
+            ibm: {
+              contentDelivery: '',
+              contentProducer: '',
+              country: 'US',
+              industry: '',
+              owner: '',
+              siteID: '',
+              subject: '',
+              type: '',
+            },
           },
+          isDataLayerReady: true,
         },
-        isDataLayerReady: true,
-      },
-    };
-  </script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/back-to-top.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/background-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/button-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/callout-quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/callout-with-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-in-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-section-images.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-section-offset.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-section-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/carousel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/cloud-masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-card-static.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-headlines.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-mixed.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-segmented.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-cards.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-pictograms.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-simple.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item-horizontal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/cta-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/cta-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/dotcom-shell.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/expressive-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/feature-card.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/feature-card-block-large.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/feature-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/filter-panel.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/footer.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/horizontal-rule.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/image.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leadspace.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leadspace-block.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leadspace-with-search.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leaving-ibm.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/lightbox-video-player.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/link-list.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/link-list-section.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/link-with-icon.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/locale-modal.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/logo-grid.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/masthead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/pictogram-item.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/quote.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/scroll-animations.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/search-with-typeahead.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/table-of-contents.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/tabs-extended.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/tabs-extended-media.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/tag-group.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/tag-link.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/text-cta.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/universal-banner.min.js"></script>
-  <script type="module" src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/video-player.min.js"></script>
-</head>
-<body>
-<dds-dotcom-shell-container>
-  <main class="bx--content dds-ce-demo--ui-shell-content">
-    <div class="bx--grid">
-      <div class="bx--row">
-        <div class="bx--offset-lg-3 bx--col-lg-13">
-          <h2>
-            Purpose and function
-          </h2>
-          <p>
-            The shell is perhaps the most crucial piece of any UI built with Carbon. It contains the shared navigation
-            framework for the entire design system and ties the products in IBM’s portfolio together in a cohesive and elegant
-            way. The shell is the home of the topmost navigation, where users can quickly and dependably gain their bearings
-            and move between pages.
-            <br />
-            <br />
-            The shell was designed with maximum flexibility built in, to serve the needs of a broad range of products and
-            users. Adopting the shell ensures compliance with IBM design standards, simplifies development efforts, and
-            provides great user experiences. All IBM products built with Carbon are required to use the shell’s header.
-            <br />
-            <br />
-            To better understand the purpose and function of the UI shell, consider the “shell” of MacOS, which contains the
-            Apple menu, top-level navigation, and universal, OS-level controls at the top of the screen, as well as a
-            universal dock along the bottom or side of the screen. The Carbon UI shell is roughly analogous in function to
-            these parts of the Mac UI. For example, the app switcher portion of the shell can be compared to the dock in
-            MacOS.
-          </p>
-          <h2>
-            Header responsive behavior
-          </h2>
-          <p>
-            As a header scales down to fit smaller screen sizes, headers with persistent side nav menus should have the side
-            nav collapse into “hamburger” menu. See the example to better understand responsive behavior of the header.
-          </p>
-          <h2>
-            Secondary navigation
-          </h2>
-          <p>
-            The side-nav contains secondary navigation and fits below the header. It can be configured to be either
-            fixed-width or flexible, with only one level of nested items allowed. Both links and category lists can be used in
-            the side-nav and may be mixed together. There are several configurations of the side-nav, but only one
-            configuration should be used per product section. If tabs are needed on a page when using a side-nav, then the
-            tabs are secondary in hierarchy to the side-nav.
-          </p>
+      };
+    </script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/back-to-top.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/background-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/button-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/callout-quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/callout-with-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-in-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-link.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-section-offset.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/card-section-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/carousel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/cloud-masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-card-static.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-headlines.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-mixed.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-segmented.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-block-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/in-page-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-cards.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-pictograms.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-group-simple.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-item-row.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/content-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/cta-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/cta-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/dotcom-shell.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/expressive-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/feature-card.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/feature-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/filter-panel.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/footer.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/horizontal-rule.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/image.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leadspace.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leadspace-block.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leadspace-with-search.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/leaving-ibm.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/lightbox-video-player.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/link-list.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/link-list-section.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/link-with-icon.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/locale-modal.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/logo-grid.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/masthead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/pictogram-item.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/quote.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/scroll-animations.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/search-with-typeahead.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/table-of-contents.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/tabs-extended.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/tabs-extended-media.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/text-cta.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/global-banner.min.js"></script>
+    <script
+      type="module"
+      src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/version/v{{version}}/video-player.min.js"></script>
+  </head>
+  <body>
+    <cds-dotcom-shell-container>
+      <main class="bx--content cds-ce-demo--ui-shell-content">
+        <div class="bx--grid">
+          <div class="bx--row">
+            <div class="bx--offset-lg-3 bx--col-lg-13">
+              <h2>Purpose and function</h2>
+              <p>
+                The shell is perhaps the most crucial piece of any UI built with
+                Carbon. It contains the shared navigation framework for the
+                entire design system and ties the products in IBM’s portfolio
+                together in a cohesive and elegant way. The shell is the home of
+                the topmost navigation, where users can quickly and dependably
+                gain their bearings and move between pages.
+                <br />
+                <br />
+                The shell was designed with maximum flexibility built in, to
+                serve the needs of a broad range of products and users. Adopting
+                the shell ensures compliance with IBM design standards,
+                simplifies development efforts, and provides great user
+                experiences. All IBM products built with Carbon are required to
+                use the shell’s header.
+                <br />
+                <br />
+                To better understand the purpose and function of the UI shell,
+                consider the “shell” of MacOS, which contains the Apple menu,
+                top-level navigation, and universal, OS-level controls at the
+                top of the screen, as well as a universal dock along the bottom
+                or side of the screen. The Carbon UI shell is roughly analogous
+                in function to these parts of the Mac UI. For example, the app
+                switcher portion of the shell can be compared to the dock in
+                MacOS.
+              </p>
+              <h2>Header responsive behavior</h2>
+              <p>
+                As a header scales down to fit smaller screen sizes, headers
+                with persistent side nav menus should have the side nav collapse
+                into “hamburger” menu. See the example to better understand
+                responsive behavior of the header.
+              </p>
+              <h2>Secondary navigation</h2>
+              <p>
+                The side-nav contains secondary navigation and fits below the
+                header. It can be configured to be either fixed-width or
+                flexible, with only one level of nested items allowed. Both
+                links and category lists can be used in the side-nav and may be
+                mixed together. There are several configurations of the
+                side-nav, but only one configuration should be used per product
+                section. If tabs are needed on a page when using a side-nav,
+                then the tabs are secondary in hierarchy to the side-nav.
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-    </div>
-  </main>
-</dds-dotcom-shell-container>
-</body>
+      </main>
+    </cds-dotcom-shell-container>
+  </body>
 </html>
diff --git a/packages/web-components/tests/cdn-build/cypress/support/index.js b/packages/web-components/tests/cdn-build/cypress/support/index.js
index 75365366a22..2b848fbd4af 100644
--- a/packages/web-components/tests/cdn-build/cypress/support/index.js
+++ b/packages/web-components/tests/cdn-build/cypress/support/index.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
diff --git a/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-c.json b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-c.json
new file mode 100644
index 00000000000..9e912a7d094
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-c.json
@@ -0,0 +1 @@
+{"products":[{"name":"CICS Version 5 Beta","href":"cicsv5_beta"},{"name":"Cluster Administration Hub","href":"module_1641826913435"},{"name":"Configuring LDAP authentication","href":"module_1641826978600"},{"name":"Connector Development Kit","href":"module_1665670695585"},{"name":"CICS Configuration Manager for z/OS","href":"SS2L7A"},{"name":"COBOL for AIX","href":"SS6SGM"}],"hints":["$C A - Cancel automatic commands","%CAAADDRESS","00000C","00001C","00005C","0000C0"]}
\ No newline at end of file
diff --git a/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-cl.json b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-cl.json
new file mode 100644
index 00000000000..65b9b9dd8f5
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-cl.json
@@ -0,0 +1 @@
+{"products":[{"name":"Cluster Administration Hub","href":"module_1641826913435"},{"name":"CA_11.2.0_cloud_test","href":"CA_11.2.0_cloud_test"},{"name":"IBM Campaign and Interact on Cloud","href":"CAMINT"},{"name":"claude ccTest_test","href":"ccTest_test"},{"name":"cics-tx-cloud_test","href":"cics-tx-cloud_test"},{"name":"IBM Multicloud Mesh","href":"cloudappfabric"}],"hints":["\"Classes\" folder","$CLASGRP Heading Information","0460_Claim_Place_Codes.properties file","3592 cleaning cartridge",": Class TExportPackageICM","<class> tag"]}
\ No newline at end of file
diff --git a/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-clo.json b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-clo.json
new file mode 100644
index 00000000000..de43aa98411
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-clo.json
@@ -0,0 +1 @@
+{"products":[{"name":"CA_11.2.0_cloud_test","href":"CA_11.2.0_cloud_test"},{"name":"IBM Campaign and Interact on Cloud","href":"CAMINT"},{"name":"cics-tx-cloud_test","href":"cics-tx-cloud_test"},{"name":"IBM Multicloud Mesh","href":"cloudappfabric"},{"name":"CloudPakForAutomation_20.0.2_test","href":"CloudPakForAutomation_20.0.2_test"},{"name":"CloudPakForAutomation_21.0.2_test","href":"CloudPakForAutomation_21.0.2_test"}],"hints":["\"Classes\" folder","$CLASGRP Heading Information","0460_Claim_Place_Codes.properties file","3592 cleaning cartridge",": Class TExportPackageICM","<class> tag"]}
\ No newline at end of file
diff --git a/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-clou.json b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-clou.json
new file mode 100644
index 00000000000..2ab1fb69f16
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-clou.json
@@ -0,0 +1 @@
+{"products":[{"name":"CA_11.2.0_cloud_test","href":"CA_11.2.0_cloud_test"},{"name":"IBM Campaign and Interact on Cloud","href":"CAMINT"},{"name":"cics-tx-cloud_test","href":"cics-tx-cloud_test"},{"name":"IBM Multicloud Mesh","href":"cloudappfabric"},{"name":"CloudPakForAutomation_20.0.2_test","href":"CloudPakForAutomation_20.0.2_test"},{"name":"CloudPakForAutomation_21.0.2_test","href":"CloudPakForAutomation_21.0.2_test"}],"hints":["4.2.2. Cloudera-based steps","7.1. Cloudera Upgrade","8. Cloud Installation","<clocale>","CLOB","CLOB and BLOB data types"]}
\ No newline at end of file
diff --git a/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-cloud.json b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-cloud.json
new file mode 100644
index 00000000000..870c0012cb6
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/fixtures/grouped-typeahead-cloud.json
@@ -0,0 +1 @@
+{"products":[{"name":"CA_11.2.0_cloud_test","href":"CA_11.2.0_cloud_test"},{"name":"IBM Campaign and Interact on Cloud","href":"CAMINT"},{"name":"cics-tx-cloud_test","href":"cics-tx-cloud_test"},{"name":"IBM Multicloud Mesh","href":"cloudappfabric"},{"name":"CloudPakForAutomation_20.0.2_test","href":"CloudPakForAutomation_20.0.2_test"},{"name":"CloudPakForAutomation_21.0.2_test","href":"CloudPakForAutomation_21.0.2_test"}],"hints":["4.2.2. Cloudera-based steps","5.1. Cloud Deployment Guide","5.2. Cloud Deployment Guide","5.3. Cloud Deployment Guide","7. Cloud Installation","7.1. Cloudera Upgrade"]}
\ No newline at end of file
diff --git a/packages/web-components/tests/e2e-storybook/cypress/fixtures/translation-custom-logo-v2.json b/packages/web-components/tests/e2e-storybook/cypress/fixtures/translation-custom-logo-v2.json
new file mode 100644
index 00000000000..d845e58c8f9
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/fixtures/translation-custom-logo-v2.json
@@ -0,0 +1,3065 @@
+{
+  "mastheadNav": {
+    "links": [
+      {
+        "title": "Products",
+        "titleEnglish": "Products",
+        "url": "",
+        "hasMenu": true,
+        "hasMegapanel": true,
+        "megamenuLayout": "tab",
+        "menuSections": [
+          {
+            "heading": "",
+            "menuItems": [
+              {
+                "title": "Featured",
+                "titleEnglish": "Featured",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Featured",
+                  "headingUrl": "",
+                  "description": "Our flagship products for enterprise hybrid cloud infrastructure",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Pak for AIOps",
+                        "titleEnglish": "Cloud Pak for AIOps",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-watson-aiops?lnk=flatitem",
+                        "target": "",
+                        "description": "DevOps management tool with AI analysis and recommendations"
+                      },
+                      {
+                        "title": "Cloud Pak for Business Automation",
+                        "titleEnglish": "Cloud Pak for Business Automation",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-business-automation?lnk=flatitem",
+                        "target": "",
+                        "description": "Operations management software with AI insights"
+                      },
+                      {
+                        "title": "Cloud Pak for Data",
+                        "titleEnglish": "Cloud Pak for Data",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-data?lnk=flatitem",
+                        "target": "",
+                        "description": "Tools for data analysis, organization and management"
+                      },
+                      {
+                        "title": "Cloud Pak for Integration",
+                        "titleEnglish": "Cloud Pak for Integration",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-integration?lnk=flatitem",
+                        "target": "",
+                        "description": "Tools to connect all of your apps, data and events"
+                      },
+                      {
+                        "title": "Cloud Pak for Network Automation",
+                        "titleEnglish": "Cloud Pak for Network Automation",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-network-automation?lnk=flatitem",
+                        "target": "",
+                        "description": "Management software for telco network operations"
+                      },
+                      {
+                        "title": "Cloud Pak for Security",
+                        "titleEnglish": "Cloud Pak for Security",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-security?lnk=flatitem",
+                        "target": "",
+                        "description": "Security auditing, reporting, analysis and governance"
+                      },
+                      {
+                        "title": "IBM Cloud",
+                        "titleEnglish": "IBM Cloud",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud?lnk=flatitem",
+                        "target": "",
+                        "description": "On-demand cloud computing platform and APIs"
+                      },
+                      {
+                        "title": "z16",
+                        "titleEnglish": "z16",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/z16?lnk=flatitem",
+                        "target": "",
+                        "description": "Flagship mainframe with on-chip AI and quantum-safe cryptography"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "AI & machine learning",
+                "titleEnglish": "AI & machine learning",
+                "url": "https://www.ibm.com/artificial-intelligence?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "AI & machine learning",
+                  "headingUrl": "https://www.ibm.com/artificial-intelligence?lnk=flathl",
+                  "description": "Use IBM Watson’s AI or build your own machine learning models",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Pak for AIOps",
+                        "titleEnglish": "Cloud Pak for AIOps",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-watson-aiops?lnk=flatitem",
+                        "target": "",
+                        "description": "DevOps management tool with AI analysis and recommendations"
+                      },
+                      {
+                        "title": "Cloud Pak for Data",
+                        "titleEnglish": "Cloud Pak for Data",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-data?lnk=flatitem",
+                        "target": "",
+                        "description": "Tools for data analysis, organization and management"
+                      },
+                      {
+                        "title": "Watson Assistant",
+                        "titleEnglish": "Watson Assistant",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/watson-assistant?lnk=flatitem",
+                        "target": "",
+                        "description": "Virtual agents customizable to any domain"
+                      },
+                      {
+                        "title": "Watson Discovery",
+                        "titleEnglish": "Watson Discovery",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-discovery?lnk=flatitem",
+                        "target": "",
+                        "description": "Search and analytics engine that adapts to custom domains"
+                      },
+                      {
+                        "title": "Watson Knowledge Catalog",
+                        "titleEnglish": "Watson Knowledge Catalog",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-knowledge-catalog?lnk=flatitem",
+                        "target": "",
+                        "description": "SaaS for AI data management"
+                      },
+                      {
+                        "title": "Watson NLU",
+                        "titleEnglish": "Watson NLU",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-natural-language-understanding?lnk=flatitem",
+                        "target": "",
+                        "description": "API for text analysis and metadata extraction"
+                      },
+                      {
+                        "title": "Watson Speech to Text",
+                        "titleEnglish": "Watson Speech to Text",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-speech-to-text?lnk=flatitem",
+                        "target": "",
+                        "description": "API for real-time speech recognition and transcription"
+                      },
+                      {
+                        "title": "Watson Studio",
+                        "titleEnglish": "Watson Studio",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-studio?lnk=flatitem",
+                        "target": "",
+                        "description": "IDE to build, run and manage AI models"
+                      },
+                      {
+                        "title": "Watson Text to Speech",
+                        "titleEnglish": "Watson Text to Speech",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-text-to-speech?lnk=flatitem",
+                        "target": "",
+                        "description": "API for real-time text to speech conversion"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Analytics",
+                "titleEnglish": "Analytics",
+                "url": "https://www.ibm.com/analytics?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Analytics",
+                  "headingUrl": "https://www.ibm.com/analytics?lnk=flathl",
+                  "description": "Aggregate and analyze large datasets",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Pak for Data",
+                        "titleEnglish": "Cloud Pak for Data",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-data?lnk=flatitem",
+                        "target": "",
+                        "description": "Tools for data analysis, organization and management"
+                      },
+                      {
+                        "title": "Cognos Analytics",
+                        "titleEnglish": "Cognos Analytics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cognos-analytics?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for business intelligence and performance management"
+                      },
+                      {
+                        "title": "CPLEX",
+                        "titleEnglish": "CPLEX",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/ilog-cplex-optimization-studio?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to build and solve complex optimization models"
+                      },
+                      {
+                        "title": "Information Server",
+                        "titleEnglish": "Information Server",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/information-server?lnk=flatitem",
+                        "target": "",
+                        "description": "Data integration suite for ETL, governance and analysis"
+                      },
+                      {
+                        "title": "Netezza",
+                        "titleEnglish": "Netezza",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/netezza?lnk=flatitem",
+                        "target": "",
+                        "description": "Data warehousing and analytics system on custom hardware"
+                      },
+                      {
+                        "title": "Optim",
+                        "titleEnglish": "Optim",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/infosphere-optim?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to manage test, production, and archived data"
+                      },
+                      {
+                        "title": "Planning Analytics",
+                        "titleEnglish": "Planning Analytics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/planning-analytics?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to automate financial and operational planning"
+                      },
+                      {
+                        "title": "SPSS",
+                        "titleEnglish": "SPSS",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/spss?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for statistical analysis and business intelligence"
+                      },
+                      {
+                        "title": "Watson Discovery",
+                        "titleEnglish": "Watson Discovery",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-discovery?lnk=flatitem",
+                        "target": "",
+                        "description": "Search and analytics engine that adapts to custom domains"
+                      },
+                      {
+                        "title": "Watson Studio",
+                        "titleEnglish": "Watson Studio",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/watson-studio?lnk=flatitem",
+                        "target": "",
+                        "description": "IDE to build, run and manage AI models"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Asset management",
+                "titleEnglish": "Asset management",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Asset management",
+                  "headingUrl": "",
+                  "description": "Manage and maintain physical assets",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Environmental Intelligence Suite",
+                        "titleEnglish": "Environmental Intelligence Suite",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/environmental-intelligence-suite?lnk=flatitem",
+                        "target": "",
+                        "description": "SaaS for predicting and responding to weather and climate events"
+                      },
+                      {
+                        "title": "Envizi",
+                        "titleEnglish": "Envizi",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/envizi?lnk=flatitem",
+                        "target": "",
+                        "description": "SaaS to analyze environmental, social and governance indicators"
+                      },
+                      {
+                        "title": "Maximo",
+                        "titleEnglish": "Maximo",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/maximo?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for asset management and related workflows"
+                      },
+                      {
+                        "title": "TRIRIGA",
+                        "titleEnglish": "TRIRIGA",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/tririga?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for real estate and workplace management"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Business automation",
+                "titleEnglish": "Business automation",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Business automation",
+                  "headingUrl": "",
+                  "description": "Automate workflows and business processes",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "BlueWorks Live",
+                        "titleEnglish": "BlueWorks Live",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/blueworkslive?lnk=flatitem",
+                        "target": "",
+                        "description": "SaaS for collaboratively modeling business processes"
+                      },
+                      {
+                        "title": "Business Automation Workflow",
+                        "titleEnglish": "Business Automation Workflow",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/business-automation-workflow?lnk=flatitem",
+                        "target": "",
+                        "description": "Cloud Pak for Business Automation addon to automate workflows"
+                      },
+                      {
+                        "title": "Cloud Pak for Business Automation",
+                        "titleEnglish": "Cloud Pak for Business Automation",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-business-automation?lnk=flatitem",
+                        "target": "",
+                        "description": "Operations management software with AI insights"
+                      },
+                      {
+                        "title": "Datacap",
+                        "titleEnglish": "Datacap",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/data-capture-and-imaging?lnk=flatitem",
+                        "target": "",
+                        "description": "Document management for IBM Cloud Pak for Business Automation"
+                      },
+                      {
+                        "title": "FileNet Content Manager",
+                        "titleEnglish": "FileNet Content Manager",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/filenet-content-manager?lnk=flatitem",
+                        "target": "",
+                        "description": "Content management solution for Cloud Pak for Business Automation"
+                      },
+                      {
+                        "title": "Operational Decision Manager",
+                        "titleEnglish": "Operational Decision Manager",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/operational-decision-manager?lnk=flatitem",
+                        "target": "",
+                        "description": "Cloud Pak for Business Automation addon for rule-based decisions"
+                      },
+                      {
+                        "title": "Process Mining",
+                        "titleEnglish": "Process Mining",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/process-mining?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to extract process data from business applications"
+                      },
+                      {
+                        "title": "Robotic Process Automation (RPA)",
+                        "titleEnglish": "Robotic Process Automation (RPA)",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/robotic-process-automation?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to automate workflows and business processes"
+                      },
+                      {
+                        "title": "Watson Orchestrate",
+                        "titleEnglish": "Watson Orchestrate",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/watson-orchestrate?lnk=flatitem",
+                        "target": "",
+                        "description": "Personal-assistant software that automates repetitive tasks"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Compute & servers",
+                "titleEnglish": "Compute & servers",
+                "url": "https://www.ibm.com/servers?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Compute & servers",
+                  "headingUrl": "https://www.ibm.com/servers?lnk=flathl",
+                  "description": "Run workloads on cloud infrastructure",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Bare Metal Servers",
+                        "titleEnglish": "Cloud Bare Metal Servers",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/bare-metal-servers?lnk=flatitem",
+                        "target": "",
+                        "description": "Dedicated hardware for maximum performance"
+                      },
+                      {
+                        "title": "Cloud Virtual Servers for VPC",
+                        "titleEnglish": "Cloud Virtual Servers for VPC",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/virtual-servers?lnk=flatitem",
+                        "target": "",
+                        "description": "Virtual servers with Intel Xeon or IBM Z CPUs"
+                      },
+                      {
+                        "title": "LinuxONE",
+                        "titleEnglish": "LinuxONE",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/linuxone?lnk=flatitem",
+                        "target": "",
+                        "description": "Physical and virtual servers for running Linux"
+                      },
+                      {
+                        "title": "Power",
+                        "titleEnglish": "Power",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/power?lnk=flatitem",
+                        "target": "",
+                        "description": "Physical and virtual servers with IBM Power CPUs"
+                      },
+                      {
+                        "title": "Spectrum Computing",
+                        "titleEnglish": "Spectrum Computing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/spectrum-computing?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to manage large-scale storage devices and data"
+                      },
+                      {
+                        "title": "z15",
+                        "titleEnglish": "z15",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/z15?lnk=flatitem",
+                        "target": "",
+                        "description": "Previous generation of the IBM Z mainframe"
+                      },
+                      {
+                        "title": "z16",
+                        "titleEnglish": "z16",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/z16?lnk=flatitem",
+                        "target": "",
+                        "description": "Flagship mainframe with on-chip AI and quantum-safe cryptography"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Database",
+                "titleEnglish": "Database",
+                "url": "https://www.ibm.com/database?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Database",
+                  "headingUrl": "https://www.ibm.com/database?lnk=flathl",
+                  "description": "Store, query and analyze structured data",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloudant",
+                        "titleEnglish": "Cloudant",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/cloudant?lnk=flatitem",
+                        "target": "",
+                        "description": "Managed PCI-compliant JSON document store on Apache CouchDB"
+                      },
+                      {
+                        "title": "Db2",
+                        "titleEnglish": "Db2",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/db2?lnk=flatitem",
+                        "target": "",
+                        "description": "Data management software including IBM Db2 Database"
+                      },
+                      {
+                        "title": "Db2 for z/OS",
+                        "titleEnglish": "Db2 for z/OS",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/db2-for-zos?lnk=flatitem",
+                        "target": "",
+                        "description": "IBM Db2 Database for IBM Z mainframes"
+                      },
+                      {
+                        "title": "Hyper Protect DbaaS",
+                        "titleEnglish": "Hyper Protect DbaaS",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/hyper-protect-dbaas?lnk=flatitem",
+                        "target": "",
+                        "description": "Managed PostgreSQL and MongoDB for sensitive data"
+                      },
+                      {
+                        "title": "IBM Cloud Databases for MongoDB",
+                        "titleEnglish": "IBM Cloud Databases for MongoDB",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/databases-for-mongodb?lnk=flatitem",
+                        "target": "",
+                        "description": "Managed NoSQL JSON document store"
+                      },
+                      {
+                        "title": "IBM Cloud Databases for MySQL",
+                        "titleEnglish": "IBM Cloud Databases for MySQL",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/databases-for-mysql?lnk=flatitem",
+                        "target": "",
+                        "description": "Managed SQL database"
+                      },
+                      {
+                        "title": "IBM Cloud Databases for PostgreSQL",
+                        "titleEnglish": "IBM Cloud Databases for PostgreSQL",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/databases-for-postgresql?lnk=flatitem",
+                        "target": "",
+                        "description": "Managed SQL database with advanced features"
+                      },
+                      {
+                        "title": "IMS",
+                        "titleEnglish": "IMS",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/ims?lnk=flatitem",
+                        "target": "",
+                        "description": "Database and management system for high-volume transactions"
+                      },
+                      {
+                        "title": "Informix",
+                        "titleEnglish": "Informix",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/informix?lnk=flatitem",
+                        "target": "",
+                        "description": "Embeddable database for SQL, NoSQL, time-series and spatial data"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "DevOps",
+                "titleEnglish": "DevOps",
+                "url": "https://www.ibm.com/devops?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "DevOps",
+                  "headingUrl": "https://www.ibm.com/devops?lnk=flathl",
+                  "description": "Manage infrastructure, environments and deployments",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Continuous Delivery",
+                        "titleEnglish": "Cloud Continuous Delivery",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/continuous-delivery?lnk=flatitem",
+                        "target": "",
+                        "description": "UI and CLI based DevOps workflows based on Tekton Pipelines"
+                      },
+                      {
+                        "title": "Cloud Pak for AIOps",
+                        "titleEnglish": "Cloud Pak for AIOps",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-watson-aiops?lnk=flatitem",
+                        "target": "",
+                        "description": "DevOps management tool with AI analysis and recommendations"
+                      },
+                      {
+                        "title": "Cloud Schematics",
+                        "titleEnglish": "Cloud Schematics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/schematics?lnk=flatitem",
+                        "target": "",
+                        "description": "Managed service to provision resources with terraform templates"
+                      },
+                      {
+                        "title": "Engineering Lifecycle Management",
+                        "titleEnglish": "Engineering Lifecycle Management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/engineering-lifecycle-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for product and application lifecycle management"
+                      },
+                      {
+                        "title": "Event Streams",
+                        "titleEnglish": "Event Streams",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/event-streams?lnk=flatitem",
+                        "target": "",
+                        "description": "PaaS stream processing based on Apache Kafka"
+                      },
+                      {
+                        "title": "UrbanCode",
+                        "titleEnglish": "UrbanCode",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/urbancode?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for continuous integration and deployment pipelines"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "IT automation",
+                "titleEnglish": "IT automation",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "IT automation",
+                  "headingUrl": "",
+                  "description": "Automate IT infrastructure management",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Pak for AIOps",
+                        "titleEnglish": "Cloud Pak for AIOps",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-watson-aiops?lnk=flatitem",
+                        "target": "",
+                        "description": "DevOps management tool with AI analysis and recommendations"
+                      },
+                      {
+                        "title": "Flexera One",
+                        "titleEnglish": "Flexera One",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/flexera-one?lnk=flatitem",
+                        "target": "",
+                        "description": "IT asset management and cloud optimization"
+                      },
+                      {
+                        "title": "Instana",
+                        "titleEnglish": "Instana",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/instana?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for application performance monitoring and automation"
+                      },
+                      {
+                        "title": "Turbonomic",
+                        "titleEnglish": "Turbonomic",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/turbonomic?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to manage and optimize IT resource usage"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Middleware",
+                "titleEnglish": "Middleware",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Middleware",
+                  "headingUrl": "",
+                  "description": "Connect your applications, data and events",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "API Connect",
+                        "titleEnglish": "API Connect",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/api-connect?lnk=flatitem",
+                        "target": "",
+                        "description": "Toolkit to rapidly create, secure and manage APIs"
+                      },
+                      {
+                        "title": "App Connect",
+                        "titleEnglish": "App Connect",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/app-connect?lnk=flatitem",
+                        "target": "",
+                        "description": "Codeless connectors for your data, apps and APIs"
+                      },
+                      {
+                        "title": "Aspera",
+                        "titleEnglish": "Aspera",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/aspera?lnk=flatitem",
+                        "target": "",
+                        "description": "System to transfer, sync or stream huge data globally"
+                      },
+                      {
+                        "title": "Cloud Pak for Integration",
+                        "titleEnglish": "Cloud Pak for Integration",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-integration?lnk=flatitem",
+                        "target": "",
+                        "description": "Tools to connect all of your apps, data and events"
+                      },
+                      {
+                        "title": "DataPower",
+                        "titleEnglish": "DataPower",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/datapower-gateway?lnk=flatitem",
+                        "target": "",
+                        "description": "Physical or virtual multi-protocol network gateway"
+                      },
+                      {
+                        "title": "MQ",
+                        "titleEnglish": "MQ",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/mq?lnk=flatitem",
+                        "target": "",
+                        "description": "Software and hardware for messaging between distributed systems"
+                      },
+                      {
+                        "title": "WebSphere Application Server",
+                        "titleEnglish": "WebSphere Application Server",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/websphere-application-server?lnk=flatitem",
+                        "target": "",
+                        "description": "Runtime and SDK for Java applications"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Network",
+                "titleEnglish": "Network",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Network",
+                  "headingUrl": "",
+                  "description": "Run and manage public, private and virtual networks",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Pak for Network Automation",
+                        "titleEnglish": "Cloud Pak for Network Automation",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-network-automation?lnk=flatitem",
+                        "target": "",
+                        "description": "Management software for telco network operations"
+                      },
+                      {
+                        "title": "Edge Application Manager",
+                        "titleEnglish": "Edge Application Manager",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/edge-application-manager?lnk=flatitem",
+                        "target": "",
+                        "description": "Management platform for edge computing"
+                      },
+                      {
+                        "title": "SevOne Network Performance Management",
+                        "titleEnglish": "SevOne Network Performance Management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/sevone-network-performance-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to collect and analyze network performance data"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Operating systems",
+                "titleEnglish": "Operating systems",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Operating systems",
+                  "headingUrl": "",
+                  "description": "Run critical workloads on specialized operating systems",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "AIX",
+                        "titleEnglish": "AIX",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/aix?lnk=flatitem",
+                        "target": "",
+                        "description": "UNIX operating system for Power servers"
+                      },
+                      {
+                        "title": "IBM i",
+                        "titleEnglish": "IBM i",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/it-infrastructure/power/os/ibm-i?lnk=flatitem",
+                        "target": "",
+                        "description": "Integrated operating system for Power servers"
+                      },
+                      {
+                        "title": "Linux",
+                        "titleEnglish": "Linux",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/servers?lnk=flatitem",
+                        "target": "",
+                        "description": "Run Linux workloads on IBM servers"
+                      },
+                      {
+                        "title": "z/OS",
+                        "titleEnglish": "z/OS",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/zos?lnk=flatitem",
+                        "target": "",
+                        "description": "Flagship OS for continuous, high-volume mainframe operation"
+                      },
+                      {
+                        "title": "z/TPF",
+                        "titleEnglish": "z/TPF",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/z-transaction-processing-facility?lnk=flatitem",
+                        "target": "",
+                        "description": "Real-time operating system for mainframes"
+                      },
+                      {
+                        "title": "z/VM",
+                        "titleEnglish": "z/VM",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/zvm?lnk=flatitem",
+                        "target": "",
+                        "description": "Hypervisor and virtualization software for IBM Z and LinuxONE"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Quantum",
+                "titleEnglish": "Quantum",
+                "url": "https://www.ibm.com/quantum?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Quantum",
+                  "headingUrl": "https://www.ibm.com/quantum?lnk=flathl",
+                  "description": "Run code on real quantum systems using a full-stack SDK",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Qskit Runtime",
+                        "titleEnglish": "Qskit Runtime",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/quantum/qiskit-runtime?lnk=flatitem",
+                        "target": "",
+                        "description": "Python SDK for open source quantum development"
+                      },
+                      {
+                        "title": "Quantum Safe",
+                        "titleEnglish": "Quantum Safe",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/quantum/quantum-safe?lnk=flatitem",
+                        "target": "",
+                        "description": "Get help migrating your organization to quantum-safe cryptography"
+                      },
+                      {
+                        "title": "Quantum Systems",
+                        "titleEnglish": "Quantum Systems",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/quantum/systems?lnk=flatitem",
+                        "target": "",
+                        "description": "On-premise and IaaS hardware with up to 127 qubit processors"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Security & identity",
+                "titleEnglish": "Security & identity",
+                "url": "https://www.ibm.com/security?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Security & identity",
+                  "headingUrl": "https://www.ibm.com/security?lnk=flathl",
+                  "description": "Secure your resources and simplify regulatory compliance",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Pak for Security",
+                        "titleEnglish": "Cloud Pak for Security",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/cloud-pak-for-security?lnk=flatitem",
+                        "target": "",
+                        "description": "Security auditing, reporting, analysis and governance"
+                      },
+                      {
+                        "title": "Guardium",
+                        "titleEnglish": "Guardium",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/guardium?lnk=flatitem",
+                        "target": "",
+                        "description": "Software and hardware appliances for database security"
+                      },
+                      {
+                        "title": "MaaS360",
+                        "titleEnglish": "MaaS360",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/maas360?lnk=flatitem",
+                        "target": "",
+                        "description": "Unified endpoint management software for many device types"
+                      },
+                      {
+                        "title": "QRadar SIEM",
+                        "titleEnglish": "QRadar SIEM",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/qradar-siem?lnk=flatitem",
+                        "target": "",
+                        "description": "Software and network appliances for real-time security analysis"
+                      },
+                      {
+                        "title": "QRadar SOAR",
+                        "titleEnglish": "QRadar SOAR",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/qradar-soar?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for security event response workflow automation"
+                      },
+                      {
+                        "title": "QRadar XDR Connect",
+                        "titleEnglish": "QRadar XDR Connect",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/qradar-xdr-connect?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to monitor and mitigate security threats with AI"
+                      },
+                      {
+                        "title": "Randori Recon",
+                        "titleEnglish": "Randori Recon",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/randori-recon?lnk=flatitem",
+                        "target": "",
+                        "description": "Attack surface management platform"
+                      },
+                      {
+                        "title": "ReaQta",
+                        "titleEnglish": "ReaQta",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/reaqta?lnk=flatitem",
+                        "target": "",
+                        "description": "Hypervisor-based endpoint security automation software"
+                      },
+                      {
+                        "title": "Trusteer",
+                        "titleEnglish": "Trusteer",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/trusteer?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to authenticate customers, detect fraud and assess risk"
+                      },
+                      {
+                        "title": "Verify",
+                        "titleEnglish": "Verify",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/verify?lnk=flatitem",
+                        "target": "",
+                        "description": "IAM software available on-premises or as SaaS"
+                      },
+                      {
+                        "title": "Verify Privilege",
+                        "titleEnglish": "Verify Privilege",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/verify-privilege-manager?lnk=flatitem",
+                        "target": "",
+                        "description": "Endpoint privilege management and application control software"
+                      },
+                      {
+                        "title": "zSecure",
+                        "titleEnglish": "zSecure",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/zsecure?lnk=flatitem",
+                        "target": "",
+                        "description": "Security, risk management and compliance tools for Z hardware"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Storage",
+                "titleEnglish": "Storage",
+                "url": "https://www.ibm.com/storage?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Storage",
+                  "headingUrl": "https://www.ibm.com/storage?lnk=flathl",
+                  "description": "Hardware, software and services for edge to core to hybrid cloud",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud Object Storage",
+                        "titleEnglish": "Cloud Object Storage",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/object-storage?lnk=flatitem",
+                        "target": "",
+                        "description": "Unstructured data storage accessible via cloud APIs"
+                      },
+                      {
+                        "title": "DS8900F",
+                        "titleEnglish": "DS8900F",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/ds8000f?lnk=flatitem",
+                        "target": "",
+                        "description": "Mainframe attached storage for transaction intensive workloads"
+                      },
+                      {
+                        "title": "Elastic Storage System",
+                        "titleEnglish": "Elastic Storage System",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/elastic-storage-system?lnk=flatitem",
+                        "target": "",
+                        "description": "Distributed storage for AI, big data and HPC workloads"
+                      },
+                      {
+                        "title": "FlashSystem",
+                        "titleEnglish": "FlashSystem",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/flashsystem?lnk=flatitem",
+                        "target": "",
+                        "description": "Primary storage for performance and latency sensitive workloads"
+                      },
+                      {
+                        "title": "SAN Switches",
+                        "titleEnglish": "SAN Switches",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/storage-area-network?lnk=flatitem",
+                        "target": "",
+                        "description": "Networking hardware to connect hosts over fast data fabrics"
+                      },
+                      {
+                        "title": "Spectrum Fusion",
+                        "titleEnglish": "Spectrum Fusion",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/spectrum-fusion?lnk=flatitem",
+                        "target": "",
+                        "description": "Container-native storage for Red Hat OpenShift and Kubernetes"
+                      },
+                      {
+                        "title": "Spectrum Protect",
+                        "titleEnglish": "Spectrum Protect",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/data-protection-and-recovery?lnk=flatitem",
+                        "target": "",
+                        "description": "Data resiliency, backup and recovery delivered via SaaS"
+                      },
+                      {
+                        "title": "Tape Libraries",
+                        "titleEnglish": "Tape Libraries",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/storage/tape?lnk=flatitem",
+                        "target": "",
+                        "description": "Long-term and physically air-gapped sustainable archival storage"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Supply chain",
+                "titleEnglish": "Supply chain",
+                "url": "https://www.ibm.com/supply-chain?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Supply chain",
+                  "headingUrl": "https://www.ibm.com/supply-chain?lnk=flathl",
+                  "description": "Manage the flow of goods and services",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Sterling",
+                        "titleEnglish": "Sterling",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/supply-chain/sterling?lnk=flatitem",
+                        "target": "",
+                        "description": "Software suite and network for complete supply chain management"
+                      },
+                      {
+                        "title": "Supply Chain Intelligence Suite",
+                        "titleEnglish": "Supply Chain Intelligence Suite",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/supply-chain-intelligence-suite?lnk=flatitem",
+                        "target": "",
+                        "description": "Software for supply chain optimization and automation"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "View all products",
+                "titleEnglish": "View all products",
+                "url": "https://www.ibm.com/products",
+                "megaPanelViewAll": true
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "title": "Solutions",
+        "titleEnglish": "Solutions",
+        "url": "",
+        "hasMenu": true,
+        "hasMegapanel": true,
+        "megamenuLayout": "tab",
+        "menuSections": [
+          {
+            "heading": "",
+            "menuItems": [
+              {
+                "title": "Automation",
+                "titleEnglish": "Automation",
+                "url": "https://www.ibm.com/automation?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Automation",
+                  "headingUrl": "https://www.ibm.com/automation?lnk=flathl",
+                  "description": "Intelligent automation for business and IT operations",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "AIOps",
+                        "titleEnglish": "AIOps",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/aiops?lnk=flatitem",
+                        "target": "",
+                        "description": "Enable proactive, continuous application performance management"
+                      },
+                      {
+                        "title": "Application Performance Management",
+                        "titleEnglish": "Application Performance Management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/application-performance-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Bridge observability and automated resource management"
+                      },
+                      {
+                        "title": "Decision Management",
+                        "titleEnglish": "Decision Management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/decision-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Model, manage and automate repeatable business processes"
+                      },
+                      {
+                        "title": "Enterprise Content Management",
+                        "titleEnglish": "Enterprise Content Management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/enterprise-content-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Accelerate information management and governance processes"
+                      },
+                      {
+                        "title": "Workflow",
+                        "titleEnglish": "Workflow",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/workflow?lnk=flatitem",
+                        "target": "",
+                        "description": "Increase productivity by streamlining processes and tasks"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Data & AI",
+                "titleEnglish": "Data & AI",
+                "url": "",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Data & AI",
+                  "headingUrl": "",
+                  "description": "Optimize your data strategy to support data-driven decisions",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "AI",
+                        "titleEnglish": "AI",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/artificial-intelligence?lnk=flatitem",
+                        "target": "",
+                        "description": "Artificial intelligence solutions built with industry expertise"
+                      },
+                      {
+                        "title": "AI ethics",
+                        "titleEnglish": "AI ethics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/artificial-intelligence/ethics?lnk=flatitem",
+                        "target": "",
+                        "description": "Trustworthy, transparent AI with a multidimensional approach"
+                      },
+                      {
+                        "title": "Business analytics",
+                        "titleEnglish": "Business analytics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/analytics/business-analytics?lnk=flatitem",
+                        "target": "",
+                        "description": "Mine insights from enterprise data for a competitive advantage"
+                      },
+                      {
+                        "title": "Customer experience",
+                        "titleEnglish": "Customer experience",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/ai-customer-service?lnk=flatitem",
+                        "target": "",
+                        "description": "Build a full-service AI chatbot that integrates with your CRM"
+                      },
+                      {
+                        "title": "Data fabric",
+                        "titleEnglish": "Data fabric",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-fabric?lnk=flatitem",
+                        "target": "",
+                        "description": "Automate data discovery, governance and consumption"
+                      },
+                      {
+                        "title": "Data lake",
+                        "titleEnglish": "Data lake",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-lake?lnk=flatitem",
+                        "target": "",
+                        "description": "Analyze structured, semi-structured and unstructured data"
+                      },
+                      {
+                        "title": "Data management",
+                        "titleEnglish": "Data management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Consistent data access and delivery across apps and domains"
+                      },
+                      {
+                        "title": "Data quality",
+                        "titleEnglish": "Data quality",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-quality?lnk=flatitem",
+                        "target": "",
+                        "description": "Robust tools help identify, understand and correct data flaws"
+                      },
+                      {
+                        "title": "Data science",
+                        "titleEnglish": "Data science",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-science?lnk=flatitem",
+                        "target": "",
+                        "description": "Operationalize data science models on any cloud"
+                      },
+                      {
+                        "title": "Data warehouse",
+                        "titleEnglish": "Data warehouse",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-warehouse?lnk=flatitem",
+                        "target": "",
+                        "description": "A flexible foundation optimized for data from disparate sources"
+                      },
+                      {
+                        "title": "DataOps",
+                        "titleEnglish": "DataOps",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/dataops?lnk=flatitem",
+                        "target": "",
+                        "description": "Develop a coordinated overview of the data acquisition journey"
+                      },
+                      {
+                        "title": "Master data management",
+                        "titleEnglish": "Master data management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/master-data-management?lnk=flatitem",
+                        "target": "",
+                        "description": "A trusted, 360-degree view of master data across the enterprise"
+                      },
+                      {
+                        "title": "Prescriptive analytics",
+                        "titleEnglish": "Prescriptive analytics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/prescriptive-analytics?lnk=flatitem",
+                        "target": "",
+                        "description": "Use optimization technology to solve complex decisions"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Industry",
+                "titleEnglish": "Industry",
+                "url": "https://www.ibm.com/industries?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Industry",
+                  "headingUrl": "https://www.ibm.com/industries?lnk=flathl",
+                  "description": "Get solutions for your industry",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Automotive",
+                        "titleEnglish": "Automotive",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/automotive?lnk=flatitem",
+                        "target": "",
+                        "description": "Shift focus to connected vehicles and digital services"
+                      },
+                      {
+                        "title": "Banking",
+                        "titleEnglish": "Banking",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/banking-financial-markets?lnk=flatitem",
+                        "target": "",
+                        "description": "Create compliant, secure, customer-centric banking  experiences"
+                      },
+                      {
+                        "title": "Consumer goods",
+                        "titleEnglish": "Consumer goods",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/consumer-goods?lnk=flatitem",
+                        "target": "",
+                        "description": "Infuse agility and automation into operations and supply chains"
+                      },
+                      {
+                        "title": "Energy & utilities",
+                        "titleEnglish": "Energy & utilities",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/energy?lnk=flatitem",
+                        "target": "",
+                        "description": "Get your utility ready for the new, sustainable energy ecosystem"
+                      },
+                      {
+                        "title": "Government ",
+                        "titleEnglish": "Government ",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/government?lnk=flatitem",
+                        "target": "",
+                        "description": "Support citizens with greater speed and confidence"
+                      },
+                      {
+                        "title": "Healthcare",
+                        "titleEnglish": "Healthcare",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/healthcare?lnk=flatitem",
+                        "target": "",
+                        "description": "Navigate a more interconnected, data-rich healthcare ecosystem"
+                      },
+                      {
+                        "title": "Insurance",
+                        "titleEnglish": "Insurance",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/insurance?lnk=flatitem",
+                        "target": "",
+                        "description": "Improve operations and policyholder experience at speed and scale"
+                      },
+                      {
+                        "title": "Life Sciences",
+                        "titleEnglish": "Life Sciences",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/life-sciences?lnk=flatitem",
+                        "target": "",
+                        "description": "Accelerate product innovation and drive patient centricity"
+                      },
+                      {
+                        "title": "Manufacturing",
+                        "titleEnglish": "Manufacturing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/manufacturing?lnk=flatitem",
+                        "target": "",
+                        "description": "Digitally transform traditional manufacturing processes"
+                      },
+                      {
+                        "title": "Retail",
+                        "titleEnglish": "Retail",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/retail?lnk=flatitem",
+                        "target": "",
+                        "description": "Meet changing consumer needs with new retail business models"
+                      },
+                      {
+                        "title": "Telecommunications",
+                        "titleEnglish": "Telecommunications",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/telecommunications?lnk=flatitem",
+                        "target": "",
+                        "description": "Achieve a more flexible, seamless network architecture"
+                      },
+                      {
+                        "title": "Travel",
+                        "titleEnglish": "Travel",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/industries/travel-transportation?lnk=flatitem",
+                        "target": "",
+                        "description": "Restore traveler trust and increase operational efficiency"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Infrastructure",
+                "titleEnglish": "Infrastructure",
+                "url": "https://www.ibm.com/it-infrastructure?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Infrastructure",
+                  "headingUrl": "https://www.ibm.com/it-infrastructure?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Backup & recovery",
+                        "titleEnglish": "Backup & recovery",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/backup-recovery?lnk=flatitem",
+                        "target": "",
+                        "description": "Comprehensive data resilience for physical and virtual servers"
+                      },
+                      {
+                        "title": "Cloud hosting",
+                        "titleEnglish": "Cloud hosting",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/hosting?lnk=flatitem",
+                        "target": "",
+                        "description": "Dedicated, virtual private and bare metal server options"
+                      },
+                      {
+                        "title": "Confidential computing",
+                        "titleEnglish": "Confidential computing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud/confidential-computing?lnk=flatitem",
+                        "target": "",
+                        "description": "Protect data across the full compute lifecycle"
+                      },
+                      {
+                        "title": "Edge computing",
+                        "titleEnglish": "Edge computing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/edge-computing?lnk=flatitem",
+                        "target": "",
+                        "description": "Manage workloads from edge to core across any hybrid multicloud"
+                      },
+                      {
+                        "title": "High performance computing (HPC)",
+                        "titleEnglish": "High performance computing (HPC)",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/high-performance-computing?lnk=flatitem",
+                        "target": "",
+                        "description": "HPC infrastructure for advanced and data-intensive workloads"
+                      },
+                      {
+                        "title": "Hybrid cloud",
+                        "titleEnglish": "Hybrid cloud",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/hybrid-cloud?lnk=flatitem",
+                        "target": "",
+                        "description": "Use a common platform across cloud, on-prem and edge environments"
+                      },
+                      {
+                        "title": "IT modernization",
+                        "titleEnglish": "IT modernization",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/infrastructure-modernization?lnk=flatitem",
+                        "target": "",
+                        "description": "Modernize legacy IT in place with containerized microservices"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Security",
+                "titleEnglish": "Security",
+                "url": "https://www.ibm.com/security?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Security",
+                  "headingUrl": "https://www.ibm.com/security?lnk=flathl",
+                  "description": "Enterprise cybersecurity for today’s hybrid cloud environments",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Cloud security",
+                        "titleEnglish": "Cloud security",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/cloud-security?lnk=flatitem",
+                        "target": "",
+                        "description": "Trust IBM Cloud security for data protection and compliance"
+                      },
+                      {
+                        "title": "Data security",
+                        "titleEnglish": "Data security",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/data-security?lnk=flatitem",
+                        "target": "",
+                        "description": "Meet data privacy regulations and simplify operational complexity"
+                      },
+                      {
+                        "title": "Insider threat",
+                        "titleEnglish": "Insider threat",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/insider-threat?lnk=flatitem",
+                        "target": "",
+                        "description": "Protection from malicious or unintentional threats from insiders"
+                      },
+                      {
+                        "title": "Ransomware",
+                        "titleEnglish": "Ransomware",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/ransomware?lnk=flatitem",
+                        "target": "",
+                        "description": "Proactively manage cyber risks to reduce the impact of attacks"
+                      },
+                      {
+                        "title": "XDR",
+                        "titleEnglish": "XDR",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/qradar?lnk=flatitem",
+                        "target": "",
+                        "description": "Unified workflow to guard endpoints, networks and cloud workloads"
+                      },
+                      {
+                        "title": "Zero trust",
+                        "titleEnglish": "Zero trust",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/zero-trust?lnk=flatitem",
+                        "target": "",
+                        "description": "Use context to manage cyber risk in a disconnected environment"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Sustainability",
+                "titleEnglish": "Sustainability",
+                "url": "https://www.ibm.com/sustainability?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Sustainability",
+                  "headingUrl": "https://www.ibm.com/sustainability?lnk=flathl",
+                  "description": "Embed sustainability into your business transformation",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Asset management",
+                        "titleEnglish": "Asset management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/maximo?lnk=flatitem",
+                        "target": "",
+                        "description": "Optimize performance, extend asset lifecycles and reduce downtime"
+                      },
+                      {
+                        "title": "ESG reporting",
+                        "titleEnglish": "ESG reporting",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/envizi?lnk=flatitem",
+                        "target": "",
+                        "description": "Data foundation to streamline meeting ESG reporting requirements"
+                      },
+                      {
+                        "title": "Facilities management",
+                        "titleEnglish": "Facilities management",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/tririga/sustainability?lnk=flatitem",
+                        "target": "",
+                        "description": "A single source of truth to manage your corporate real estate"
+                      },
+                      {
+                        "title": "IT sustainability",
+                        "titleEnglish": "IT sustainability",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/products/turbonomic/sustainability?lnk=flatitem",
+                        "target": "",
+                        "description": "Software to estimate infrastructure resource consumption"
+                      },
+                      {
+                        "title": "Supply chain",
+                        "titleEnglish": "Supply chain",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/supply-chain?lnk=flatitem",
+                        "target": "",
+                        "description": "Build supply chain resiliency with intelligent automation"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "title": "Consulting",
+        "titleEnglish": "Consulting",
+        "url": "",
+        "hasMenu": true,
+        "hasMegapanel": true,
+        "megamenuLayout": "tab",
+        "menuSections": [
+          {
+            "heading": "",
+            "menuItems": [
+              {
+                "title": "Overview",
+                "titleEnglish": "Overview",
+                "url": "https://www.ibm.com/consulting/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Overview",
+                  "headingUrl": "https://www.ibm.com/consulting/?lnk=flathl",
+                  "description": "Get help solving your toughest challenges",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Careers",
+                        "titleEnglish": "Careers",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/employment/consulting/?lnk=flatitem",
+                        "target": "",
+                        "description": "Join our team of consultants"
+                      },
+                      {
+                        "title": "Client success",
+                        "titleEnglish": "Client success",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/case-studies/search?lnk=flatitem",
+                        "target": "",
+                        "description": "Learn from exemplary outcomes"
+                      },
+                      {
+                        "title": "Garage",
+                        "titleEnglish": "Garage",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/garage?lnk=flatitem",
+                        "target": "",
+                        "description": "Use a proven methodology for your digital transformation"
+                      },
+                      {
+                        "title": "iX",
+                        "titleEnglish": "iX",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/ibmix?lnk=flatitem",
+                        "target": "",
+                        "description": "Upgrade your customer experiences and digital strategy"
+                      },
+                      {
+                        "title": "X-Force",
+                        "titleEnglish": "X-Force",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/x-force?lnk=flatitem",
+                        "target": "",
+                        "description": "Build and manage an integrated IT security program"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Strategy",
+                "titleEnglish": "Strategy",
+                "url": "https://www.ibm.com/consulting/strategy/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Strategy",
+                  "headingUrl": "https://www.ibm.com/consulting/strategy/?lnk=flathl",
+                  "description": "Reimagine how your business operates",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Sustainability",
+                        "titleEnglish": "Sustainability",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/business-operations/services/sustainability?lnk=flatitem",
+                        "target": "",
+                        "description": "Become a more responsible business"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Experience",
+                "titleEnglish": "Experience",
+                "url": "https://www.ibm.com/consulting/ibmix?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Experience",
+                  "headingUrl": "https://www.ibm.com/consulting/ibmix?lnk=flathl",
+                  "description": "Upgrade your customer experiences and digital strategy",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Customer experience",
+                        "titleEnglish": "Customer experience",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/customer-experience?lnk=flatitem",
+                        "target": "",
+                        "description": "Redesign and rebuild your customer journey"
+                      },
+                      {
+                        "title": "Marketing",
+                        "titleEnglish": "Marketing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/marketing?lnk=flatitem",
+                        "target": "",
+                        "description": "Execute an end-to-end marketing strategy"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Technology",
+                "titleEnglish": "Technology",
+                "url": "https://www.ibm.com/consulting/technology/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Technology",
+                  "headingUrl": "https://www.ibm.com/consulting/technology/?lnk=flathl",
+                  "description": "Implement your strategy using the right technology",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "AI",
+                        "titleEnglish": "AI",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/artificial-intelligence?lnk=flatitem",
+                        "target": "",
+                        "description": "Augment human capabilities with AI"
+                      },
+                      {
+                        "title": "Application services",
+                        "titleEnglish": "Application services",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/applications?lnk=flatitem",
+                        "target": "",
+                        "description": "Transform the way you manage your applications"
+                      },
+                      {
+                        "title": "Cloud",
+                        "titleEnglish": "Cloud",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/cloud?lnk=flatitem",
+                        "target": "",
+                        "description": "Build on a hybrid cloud"
+                      },
+                      {
+                        "title": "Data & analytics",
+                        "titleEnglish": "Data & analytics",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/analytics?lnk=flatitem",
+                        "target": "",
+                        "description": "Become a data-driven enterprise"
+                      },
+                      {
+                        "title": "Multivendor technology support",
+                        "titleEnglish": "Multivendor technology support",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/services/technology-support/multivendor-it?lnk=flatitem",
+                        "target": "",
+                        "description": "Consolidate IT maintenance and support"
+                      },
+                      {
+                        "title": "Security",
+                        "titleEnglish": "Security",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/services/security?lnk=flatitem",
+                        "target": "",
+                        "description": "Manage risk and detect and respond to threats"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Operations",
+                "titleEnglish": "Operations",
+                "url": "https://www.ibm.com/services/operations-consulting?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Operations",
+                  "headingUrl": "https://www.ibm.com/services/operations-consulting?lnk=flathl",
+                  "description": "Orchestrate people, process, data and technology",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "E-commerce",
+                        "titleEnglish": "E-commerce",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/ecommerce?lnk=flatitem",
+                        "target": "",
+                        "description": "Design and deploy intelligent buying experiences"
+                      },
+                      {
+                        "title": "Finance",
+                        "titleEnglish": "Finance",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/finance?lnk=flatitem",
+                        "target": "",
+                        "description": "Improve your finance processes"
+                      },
+                      {
+                        "title": "Payments",
+                        "titleEnglish": "Payments",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/payments?lnk=flatitem",
+                        "target": "",
+                        "description": "Modernize payments infrastructure and operations"
+                      },
+                      {
+                        "title": "Procurement & strategic sourcing",
+                        "titleEnglish": "Procurement & strategic sourcing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/procurement?lnk=flatitem",
+                        "target": "",
+                        "description": "Enhance your procurement organization"
+                      },
+                      {
+                        "title": "Supply chain",
+                        "titleEnglish": "Supply chain",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/supply-chain?lnk=flatitem",
+                        "target": "",
+                        "description": "Build resilient, sustainable supply chains"
+                      },
+                      {
+                        "title": "Talent",
+                        "titleEnglish": "Talent",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/talent-management?lnk=flatitem",
+                        "target": "",
+                        "description": "Meet HR needs with data-driven insights"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Partners",
+                "titleEnglish": "Partners",
+                "url": "https://www.ibm.com/strategic-partnerships?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Partners",
+                  "headingUrl": "https://www.ibm.com/strategic-partnerships?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Adobe",
+                        "titleEnglish": "Adobe",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/adobe?lnk=flatitem",
+                        "target": "",
+                        "description": "Deliver more personal, flexible and secure customer experiences"
+                      },
+                      {
+                        "title": "AWS",
+                        "titleEnglish": "AWS",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/aws?lnk=flatitem",
+                        "target": "",
+                        "description": "Accelerate faster adoption of AWS"
+                      },
+                      {
+                        "title": "Celonis",
+                        "titleEnglish": "Celonis",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/celonis?lnk=flatitem",
+                        "target": "",
+                        "description": "Apply process mining, intelligence and automation"
+                      },
+                      {
+                        "title": "Microsoft",
+                        "titleEnglish": "Microsoft",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/microsoft?lnk=flatitem",
+                        "target": "",
+                        "description": "Adopt Microsoft Azure with security and confidence"
+                      },
+                      {
+                        "title": "Oracle",
+                        "titleEnglish": "Oracle",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/oracle?lnk=flatitem",
+                        "target": "",
+                        "description": "Services from consulting to implementation to management"
+                      },
+                      {
+                        "title": "Red Hat",
+                        "titleEnglish": "Red Hat",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/redhat?lnk=flatitem",
+                        "target": "",
+                        "description": "Drive consistency and scale across cloud and on premises"
+                      },
+                      {
+                        "title": "Salesforce",
+                        "titleEnglish": "Salesforce",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/salesforce?lnk=flatitem",
+                        "target": "",
+                        "description": "Apply automation industry expertise to improve experience"
+                      },
+                      {
+                        "title": "SAP",
+                        "titleEnglish": "SAP",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/sap?lnk=flatitem",
+                        "target": "",
+                        "description": "Proven ERP methodologies that deliver results"
+                      },
+                      {
+                        "title": "ServiceNow",
+                        "titleEnglish": "ServiceNow",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/servicenow?lnk=flatitem",
+                        "target": "",
+                        "description": "Create connected, personalized experiences"
+                      },
+                      {
+                        "title": "Workday",
+                        "titleEnglish": "Workday",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/consulting/workday?lnk=flatitem",
+                        "target": "",
+                        "description": "Apply the power of cloud and AI to Workday"
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "View all services",
+                "titleEnglish": "View all services",
+                "url": "https://www.ibm.com/services",
+                "megaPanelViewAll": true
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "title": "Support",
+        "titleEnglish": "Support",
+        "url": "",
+        "hasMenu": true,
+        "hasMegapanel": true,
+        "megamenuLayout": "list",
+        "menuSections": [
+          {
+            "heading": "",
+            "menuItems": [
+              {
+                "title": "Documentation",
+                "titleEnglish": "Documentation",
+                "url": "https://www.ibm.com/docs/en?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Documentation",
+                  "headingUrl": "https://www.ibm.com/docs/en?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "All product documentation",
+                        "titleEnglish": "All product documentation",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/docs/en?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "IBM Cloud documentation",
+                        "titleEnglish": "IBM Cloud documentation",
+                        "highlightedLink": false,
+                        "url": "https://cloud.ibm.com/docs?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "IBM Redbooks",
+                        "titleEnglish": "IBM Redbooks",
+                        "highlightedLink": false,
+                        "url": "https://www.redbooks.ibm.com/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Support",
+                "titleEnglish": "Support",
+                "url": "https://www.ibm.com/mysupport/s/?language=en_US&lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Support",
+                  "headingUrl": "https://www.ibm.com/mysupport/s/?language=en_US&lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Download fixes, updates & drivers",
+                        "titleEnglish": "Download fixes, updates & drivers",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/support/fixcentral?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Download licensed software - Passport Advantage",
+                        "titleEnglish": "Download licensed software - Passport Advantage",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/software/passportadvantage/pao_customer.html?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "View your cases",
+                        "titleEnglish": "View your cases",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/mysupport/s/my-cases?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Open a case",
+                        "titleEnglish": "Open a case",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/mysupport/s/redirecttoopencasepage?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "View support plans",
+                        "titleEnglish": "View support plans",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/support/pages/ibm-support-offerings?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Licensing & compliance",
+                        "titleEnglish": "Licensing & compliance",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/about/software-licensing/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "View more",
+                        "titleEnglish": "View more",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/mysupport/s/?language=en_US&lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "IBM Cloud platform support",
+                "titleEnglish": "IBM Cloud platform support",
+                "url": "https://www.ibm.com/cloud/support?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "IBM Cloud platform support",
+                  "headingUrl": "https://www.ibm.com/cloud/support?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": []
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Training",
+                "titleEnglish": "Training",
+                "url": "https://www.ibm.com/training/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Training",
+                  "headingUrl": "https://www.ibm.com/training/?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Courses",
+                        "titleEnglish": "Courses",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/training/search?q=course&lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Learning paths & collections",
+                        "titleEnglish": "Learning paths & collections",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/training/learning-paths-and-collections?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Professional certifications",
+                        "titleEnglish": "Professional certifications",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/training/credentials?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Digital learning subscriptions",
+                        "titleEnglish": "Digital learning subscriptions",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/training/subscriptions?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Developer",
+                "titleEnglish": "Developer",
+                "url": "https://developer.ibm.com/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Developer",
+                  "headingUrl": "https://developer.ibm.com/?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Code patterns",
+                        "titleEnglish": "Code patterns",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/patterns/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Developer community",
+                        "titleEnglish": "Developer community",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/community/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Developer events",
+                        "titleEnglish": "Developer events",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/events/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Open Source @ IBM",
+                        "titleEnglish": "Open Source @ IBM",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/opensource/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Technical articles",
+                        "titleEnglish": "Technical articles",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/articles?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Tutorials",
+                        "titleEnglish": "Tutorials",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/tutorials/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Videos",
+                        "titleEnglish": "Videos",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/videos?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "View more",
+                        "titleEnglish": "View more",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Community",
+                "titleEnglish": "Community",
+                "url": "https://community.ibm.com/community/user/home?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Community",
+                  "headingUrl": "https://community.ibm.com/community/user/home?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "IBM developer community",
+                        "titleEnglish": "IBM developer community",
+                        "highlightedLink": false,
+                        "url": "https://developer.ibm.com/community/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Support forums",
+                        "titleEnglish": "Support forums",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/mysupport/s/forumshome?language=en_US&lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      },
+      {
+        "title": "More",
+        "titleEnglish": "More",
+        "url": "",
+        "hasMenu": true,
+        "hasMegapanel": true,
+        "megamenuLayout": "list",
+        "menuSections": [
+          {
+            "heading": "",
+            "menuItems": [
+              {
+                "title": "About IBM",
+                "titleEnglish": "About IBM",
+                "url": "https://www.ibm.com/about?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "About IBM",
+                  "headingUrl": "https://www.ibm.com/about?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Let's Create",
+                        "titleEnglish": "Let's Create",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/lets-create/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Senior leadership",
+                        "titleEnglish": "Senior leadership",
+                        "highlightedLink": false,
+                        "url": "https://newsroom.ibm.com/executive-bios?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Annual report",
+                        "titleEnglish": "Annual report",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/annualreport/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Investor",
+                        "titleEnglish": "Investor",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/investor?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Corporate social responsbility",
+                        "titleEnglish": "Corporate social responsbility",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/impact?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Diversity & inclusion",
+                        "titleEnglish": "Diversity & inclusion",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/impact/be-equal/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "News & announcements",
+                        "titleEnglish": "News & announcements",
+                        "highlightedLink": false,
+                        "url": "https://newsroom.ibm.com/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Security, privacy & trust",
+                        "titleEnglish": "Security, privacy & trust",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/trust?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Careers",
+                        "titleEnglish": "Careers",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/employment/?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Partners",
+                "titleEnglish": "Partners",
+                "url": "https://www.ibm.com/partnerworld/public?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Partners",
+                  "headingUrl": "https://www.ibm.com/partnerworld/public?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "PartnerWorld",
+                        "titleEnglish": "PartnerWorld",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/partnerworld/public?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Strategic partners",
+                        "titleEnglish": "Strategic partners",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/strategic-partnerships?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Financing",
+                        "titleEnglish": "Financing",
+                        "highlightedLink": false,
+                        "url": "https://www.ibm.com/partnerworld/financing?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Research",
+                "titleEnglish": "Research",
+                "url": "https://research.ibm.com/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Research",
+                  "headingUrl": "https://research.ibm.com/?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": [
+                      {
+                        "title": "Publications",
+                        "titleEnglish": "Publications",
+                        "highlightedLink": false,
+                        "url": "https://research.ibm.com/publications?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Blog",
+                        "titleEnglish": "Blog",
+                        "highlightedLink": false,
+                        "url": "https://research.ibm.com/blog?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      },
+                      {
+                        "title": "Collaborate with us",
+                        "titleEnglish": "Collaborate with us",
+                        "highlightedLink": false,
+                        "url": "https://research.ibm.com/collaborate?lnk=flatitem",
+                        "target": "",
+                        "description": ""
+                      }
+                    ]
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              },
+              {
+                "title": "Newsletter subscriptions",
+                "titleEnglish": "Newsletter subscriptions",
+                "url": "https://www.ibm.com/subscribe/?lnk=flathl",
+                "highlighted": false,
+                "megapanelContent": {
+                  "headingTitle": "Newsletter subscriptions",
+                  "headingUrl": "https://www.ibm.com/subscribe/?lnk=flathl",
+                  "description": "",
+                  "quickLinks": {
+                    "title": "",
+                    "links": []
+                  },
+                  "feature": {
+                    "heading": "",
+                    "imageUrl": "",
+                    "linkTitle": "",
+                    "linkUrl": ""
+                  }
+                }
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  },
+  "masthead": {
+    "logo": {
+      "href": "https://www.example.com/custom-href"
+    },
+    "search": {
+      "btnSearchClosed": "Open IBM search field",
+      "btnSearchOpen": "Search all of IBM",
+      "btnClose": "Close IBM search field",
+      "placeHolderText": "Search all of IBM"
+    },
+    "profileMenu": {
+      "signedout": {
+        "iconLabel": "User Profile",
+        "links": [
+          {
+            "title": "My IBM",
+            "url": "https://myibm.ibm.com/?lnk=mmi"
+          },
+          {
+            "title": "Log in",
+            "url": "https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"
+          }
+        ]
+      },
+      "signedin": {
+        "iconLabel": "User Profile: Logged in",
+        "links": [
+          {
+            "title": "My IBM",
+            "url": "https://myibm.ibm.com/?lnk=mmi"
+          },
+          {
+            "title": "Profile",
+            "url": "https://myibm.ibm.com/profile/?lnk=mmi"
+          },
+          {
+            "title": "Billing",
+            "url": "https://myibm.ibm.com/billing/?lnk=mmi"
+          },
+          {
+            "title": "Log out",
+            "url": "https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"
+          }
+        ]
+      }
+    }
+  },
+  "profileMenu": {
+    "signedout": [
+      {
+        "title": "My IBM",
+        "url": "https://myibm.ibm.com/?lnk=mmi"
+      },
+      {
+        "id": "signin",
+        "title": "Log in",
+        "url": "https://login.ibm.com/oidc/endpoint/default/authorize?redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&response_type=token&client_id=v18LoginProdCI&scope=openid&state=https%3A%2F%2Fwww.ibm.com&nonce=8675309"
+      }
+    ],
+    "signedin": [
+      {
+        "title": "My IBM",
+        "url": "https://myibm.ibm.com/?lnk=mmi"
+      },
+      {
+        "title": "Profile",
+        "url": "https://myibm.ibm.com/profile/?lnk=mmi"
+      },
+      {
+        "title": "Billing",
+        "url": "https://myibm.ibm.com/billing/?lnk=mmi"
+      },
+      {
+        "id": "signout",
+        "title": "Log out",
+        "url": "https://myibm.ibm.com/pkmslogout?filename=accountRedir.html"
+      }
+    ]
+  },
+  "marketplace": {
+    "title": "Products",
+    "url": ""
+  },
+  "footerMenu": [
+    {
+      "title": "Products & Solutions",
+      "links": [
+        {
+          "title": "Top products & platforms",
+          "url": "https://www.ibm.com/products?lnk=fps"
+        },
+        {
+          "title": "Industries",
+          "url": "https://www.ibm.com/industries?lnk=fps"
+        },
+        {
+          "title": "Artificial intelligence",
+          "url": "https://www.ibm.com/cloud/ai?lnk=fps"
+        },
+        {
+          "title": "Blockchain",
+          "url": "https://www.ibm.com/blockchain?lnk=fps"
+        },
+        {
+          "title": "Business operations",
+          "url": "https://www.ibm.com/business-operations?lnk=fps"
+        },
+        {
+          "title": "Cloud computing",
+          "url": "https://www.ibm.com/cloud?lnk=fps"
+        },
+        {
+          "title": "Data & Analytics",
+          "url": "https://www.ibm.com/analytics?lnk=fps"
+        },
+        {
+          "title": "Hybrid cloud",
+          "url": "https://www.ibm.com/cloud/hybrid?lnk=fps"
+        },
+        {
+          "title": "IT infrastructure",
+          "url": "https://www.ibm.com/it-infrastructure?lnk=fps"
+        },
+        {
+          "title": "Security",
+          "url": "https://www.ibm.com/security?lnk=fps"
+        },
+        {
+          "title": "Supply chain",
+          "url": "https://www.ibm.com/supply-chain?lnk=fps"
+        }
+      ]
+    },
+    {
+      "title": "Learn about",
+      "links": [
+        {
+          "title": "What is Hybrid Cloud?",
+          "url": "https://www.ibm.com/cloud/learn/hybrid-cloud?lnk=fle"
+        },
+        {
+          "title": "What is Artificial intelligence?",
+          "url": "https://www.ibm.com/cloud/learn/what-is-artificial-intelligence?lnk=fle"
+        },
+        {
+          "title": "What is Cloud Computing?",
+          "url": "https://www.ibm.com/cloud/learn/cloud-computing?lnk=fle"
+        },
+        {
+          "title": "What is Kubernetes?",
+          "url": "https://www.ibm.com/cloud/learn/kubernetes?lnk=fle"
+        },
+        {
+          "title": "What are Containers?",
+          "url": "https://www.ibm.com/cloud/learn/containers?lnk=fle"
+        },
+        {
+          "title": "What is DevOps?",
+          "url": "https://www.ibm.com/cloud/learn/devops-a-complete-guide?lnk=fle"
+        },
+        {
+          "title": "What is Machine Learning?",
+          "url": "https://www.ibm.com/cloud/learn/machine-learning?lnk=fle"
+        }
+      ]
+    },
+    {
+      "title": "Popular links",
+      "links": [
+        {
+          "title": "IBM Consulting",
+          "url": "https://www.ibm.com/consulting/?lnk=fco"
+        },
+        {
+          "title": "Communities",
+          "url": "https://community.ibm.com/community/user/home?lnk=fpo"
+        },
+        {
+          "title": "Developer education",
+          "url": "https://developer.ibm.com/?lnk=fpo"
+        },
+        {
+          "title": "Support - Download fixes, updates & drivers",
+          "url": "https://www.ibm.com/support/fixcentral/?lnk=fpo"
+        },
+        {
+          "title": "IBM Research",
+          "url": "https://research.ibm.com/?lnk=fpo"
+        },
+        {
+          "title": "Partner with us - PartnerWorld",
+          "url": "https://www.ibm.com/partnerworld/public?lnk=fpo"
+        },
+        {
+          "title": "Training - Courses",
+          "url": "https://www.ibm.com/training/search?q=course&lnk=fpo"
+        },
+        {
+          "title": "Upcoming events & webinars",
+          "url": "https://www.ibm.com/events/?lnk=fpo"
+        }
+      ]
+    },
+    {
+      "title": "About IBM",
+      "links": [
+        {
+          "title": "Annual report",
+          "url": "https://www.ibm.com/annualreport/?lnk=fab"
+        },
+        {
+          "title": "Career opportunities",
+          "url": "https://www.ibm.com/employment/?lnk=fab"
+        },
+        {
+          "title": "Corporate social responsibility",
+          "url": "https://www.ibm.org/?lnk=fab"
+        },
+        {
+          "title": "Diversity & inclusion",
+          "url": "https://www.ibm.com/impact/be-equal/?lnk=fab"
+        },
+        {
+          "title": "Industry analyst reports",
+          "url": "https://www.ibm.com/reports/analyst/?lnk=fab"
+        },
+        {
+          "title": "Investor relations",
+          "url": "https://www.ibm.com/investor/?lnk=fab"
+        },
+        {
+          "title": "News & announcements",
+          "url": "https://newsroom.ibm.com/?lnk=fab"
+        },
+        {
+          "title": "Thought leadership",
+          "url": "https://www.ibm.com/thought-leadership/?lnk=fab"
+        },
+        {
+          "title": "Security, privacy & trust",
+          "url": "https://www.ibm.com/trust?lnk=fab"
+        },
+        {
+          "title": "About IBM",
+          "url": "https://www.ibm.com/about?lnk=fab"
+        }
+      ]
+    }
+  ],
+  "footerThin": [
+    {
+      "title": "Contact IBM",
+      "titleEnglish": "Contact IBM",
+      "url": "https://www.ibm.com/contact/us/en/?lnk=flg-cont-usen"
+    },
+    {
+      "title": "Privacy",
+      "titleEnglish": "Privacy",
+      "url": "https://www.ibm.com/privacy?lnk=flg-priv-usen"
+    },
+    {
+      "title": "Terms of use",
+      "titleEnglish": "Terms of use",
+      "url": "https://www.ibm.com/legal?lnk=flg-tous-usen"
+    },
+    {
+      "title": "Accessibility",
+      "titleEnglish": "Accessibility",
+      "url": "https://www.ibm.com/able/?lnk=flg-acce-usen"
+    }
+  ],
+  "localeSelector": {
+    "localVersions": "Localized versions of this page",
+    "homepages": "Worldwide ibm.com home pages"
+  },
+  "socialFollow": {
+    "title": "Follow IBM",
+    "links": [
+      {
+        "linkClass": "ibm-linkedin-encircled-link",
+        "title": "LinkedIn",
+        "url": "https://www.linkedin.com/company/ibm"
+      },
+      {
+        "linkClass": "ibm-twitter-encircled-link",
+        "title": "Twitter",
+        "url": "https://www.twitter.com/ibm"
+      },
+      {
+        "linkClass": "ibm-instagram-encircled-link",
+        "title": "Instagram",
+        "url": "https://www.instagram.com/ibm"
+      },
+      {
+        "linkClass": "ibm-subscription-encircled-link",
+        "title": "Subscription Center",
+        "url": "https://www.ibm.com/subscribe/"
+      }
+    ]
+  },
+  "socialSharing": [
+    {
+      "id": "facebook",
+      "title": "Facebook",
+      "url": "https://www.facebook.com/sharer.php?u=%{URL}&t=%{TITLE}"
+    },
+    {
+      "id": "twitter",
+      "title": "Twitter",
+      "url": "https://twitter.com/?status=%{URL}%20-%20%{TITLE}"
+    },
+    {
+      "id": "linkedin",
+      "title": "Linked In",
+      "url": "https://www.linkedin.com/shareArticle?mini=true&url=%{URL}&title=%{TITLE}"
+    }
+  ],
+  "leaving": {
+    "LEAVING001": "Leaving the IBM Web site",
+    "LEAVING002": "You are now leaving IBM.com and going to an external 3rd party site. Unless otherwise stated, the 3rd party's site Terms and Privacy Policy will apply, and may differ from IBM's.",
+    "LEAVING003": "You are headed to",
+    "LEAVING004": "Notice"
+  },
+  "misc": {
+    "backtotop": "Back to top",
+    "cancelText": "Cancel",
+    "close": "Close",
+    "cookiePrefs": "Cookie preferences",
+    "continueText": "Continue",
+    "editProfile": "Edit profile",
+    "emailThisPage": "E-mail this page",
+    "feedback": "Feedback",
+    "mpScopedSearh": "Products",
+    "withinMp": "Products",
+    "next": "Next",
+    "noresults": "No results found",
+    "prev": "Previous",
+    "resultsNav": "Use down and up arrow keys to navigate through the results.",
+    "search": "Search",
+    "selectCountry": "Select a country/region",
+    "sharePage": "Share this page",
+    "signin": "Sign in",
+    "signout": "Sign out",
+    "sitenav": "Site navigation",
+    "welcomeback": "Welcome back"
+  }
+}
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/card-section-simple/card-section-simple.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/card-section-simple/card-section-simple.e2e.js
index a2ba6b43e78..72a461fafb7 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/card-section-simple/card-section-simple.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/card-section-simple/card-section-simple.e2e.js
@@ -17,7 +17,7 @@ const _paths = {
 };
 
 /**
- * Collection of all tests for dds-card-section-simple
+ * Collection of all tests for cds-card-section-simple
  *
  * @function checkForBlocklink - Asserts a full-sized pseudoelement from the footer link
  * @function checkForTitlePosition - Asserts left-aligned title (16 || 32)px from left edge
@@ -29,7 +29,7 @@ const _tests = {
     cy.checkAxeA11y();
   },
   checkForBlocklink: () => {
-    cy.get('dds-card-group-item > dds-card-cta-footer').each(footer => {
+    cy.get('cds-card-group-item > cds-card-cta-footer').each(footer => {
       cy.get(footer)
         .shadow()
         .find('a')
@@ -47,13 +47,13 @@ const _tests = {
     });
   },
   checkForTitlePosition: () => {
-    cy.get('dds-content-section-heading').then(heading => {
+    cy.get('cds-content-section-heading').then(heading => {
       expect(heading.offset().left == 16 || heading.offset().left == 32).to.be.eq(true);
       expect(heading.css('textAlign')).to.be.eq('start');
     });
   },
   checkForCardContent: () => {
-    cy.get('dds-card-group-item').each(card => {
+    cy.get('cds-card-group-item').each(card => {
       card.children().each((_i, child) => {
         const cardRoot = card[0].shadowRoot;
         expect(child.assignedSlot.getRootNode()).to.be.eq(cardRoot);
@@ -62,13 +62,13 @@ const _tests = {
   },
   checkCTACard: () => {
     cy.visit(`${_paths.default}&knob-With%20CTA:=true`);
-    cy.get('dds-card-group-item')
+    cy.get('cds-card-group-item')
       .last()
       .should('have.attr', 'color-scheme', 'inverse');
   },
   checkCardWithImages: () => {
     cy.visit(`${_paths.default}&knob-With%20images:=true`);
-    cy.get('dds-card-group-item > dds-image').each($img => {
+    cy.get('cds-card-group-item > cds-image').each($img => {
       cy.wrap($img).should('be.visible');
     });
   },
@@ -77,7 +77,7 @@ const _tests = {
   },
 };
 
-describe('dds-card-section-simple | default (desktop)', () => {
+describe('cds-card-section-simple | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`/${_paths.default}`);
@@ -93,7 +93,7 @@ describe('dds-card-section-simple | default (desktop)', () => {
   it('should check a11y', _tests.checkA11y);
 });
 
-describe('dds-card-section-simple | default (mobile)', () => {
+describe('cds-card-section-simple | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 720);
     cy.visit(`/${_paths.default}`);
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js
index 75972eccd74..359600ccfa1 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/card/card.e2e.js
@@ -39,7 +39,7 @@ const _pathStatic = '/iframe.html?id=components-card--static';
  * @type {string}
  * @private
  */
-const _selectorBase = `[data-autoid="dds--card"]`;
+const _selectorBase = `[data-autoid="cds--card"]`;
 
 /**
  * Defines the card element selectors.
@@ -48,16 +48,16 @@ const _selectorBase = `[data-autoid="dds--card"]`;
  * @private
  */
 const _selectors = {
-  eyebrow: `${_selectorBase} [data-autoid="dds--card-eyebrow"]`,
-  heading: `${_selectorBase} [data-autoid="dds--card-heading"]`,
-  footer: `${_selectorBase} [data-autoid="dds--card-footer"]`,
-  image: `${_selectorBase} [data-autoid="dds--image"]`,
-  tagGroup: `${_selectorBase} [data-autoid="dds--tag-group"]`,
+  eyebrow: `${_selectorBase} [data-autoid="cds--card-eyebrow"]`,
+  heading: `${_selectorBase} [data-autoid="cds--card-heading"]`,
+  footer: `${_selectorBase} [data-autoid="cds--card-footer"]`,
+  image: `${_selectorBase} [data-autoid="cds--image"]`,
+  tagGroup: `${_selectorBase} div`,
   copy: `${_selectorBase} p`,
 };
 
 /**
- * Collection of all tests for dds-card
+ * Collection of all tests for cds-card
  *
  * @property {function} screenshotThemes
  * @property {function} checkTextRenders
@@ -105,11 +105,11 @@ const _tests = {
   checkClickableCard: pictogram => {
     if (pictogram) {
       it('should check for link', () => {
-        cy.get('dds-card').should('have.attr', 'href');
+        cy.get('cds-card').should('have.attr', 'href');
       });
     } else {
       it('should check for link', () => {
-        cy.get('dds-card > dds-card-footer')
+        cy.get('cds-card > cds-card-footer')
           .shadow()
           .find('a.bx--card__footer')
           .then($link => {
@@ -119,7 +119,7 @@ const _tests = {
       });
 
       it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-        cy.get('dds-card > dds-card-footer')
+        cy.get('cds-card > cds-card-footer')
           .shadow()
           .find('a')
           .then($els => {
@@ -138,7 +138,7 @@ const _tests = {
   },
   checkTabbableCard: () => {
     it('should check tabbable', () => {
-      cy.get('dds-card > dds-card-footer')
+      cy.get('cds-card > cds-card-footer')
         .shadow()
         .find('a.bx--card__footer')
         .focus();
@@ -211,42 +211,26 @@ const _tests = {
   pictogramPosition: (position, groupId) => {
     if (position === 'top') {
       it('should check for pictogram at the top', () => {
-        cy.get('dds-card').should('have.attr', 'pictogram-placement', 'top');
-        cy.get('dds-card svg').then($content => {
+        cy.visit(`/${_pathPictogram}&knob-Pictogram%20position:${groupId}=bottom`);
+        cy.get('cds-card').should('have.attr', 'pictogram-placement', 'top');
+        cy.get('cds-card svg').then($content => {
           expect($content[0].getBoundingClientRect().top).to.equal(32);
           expect($content[0].getBoundingClientRect().bottom).to.equal(80);
         });
       });
     } else {
-      it('should check for pictogram at the bottom with text showing on hover', () => {
-        cy.visit(`/${_pathPictogram}&knob-Pictogram%20position:${groupId}=bottom`);
-
-        cy.get('dds-card').should('have.attr', 'pictogram-placement', 'bottom');
-        cy.get('dds-card svg').then($content => {
+      it('should check for pictogram at the bottom', () => {
+        cy.get('cds-card').should('have.attr', 'pictogram-placement', 'bottom');
+        cy.get('cds-card svg').then($content => {
           expect($content[0].getBoundingClientRect().top).to.equal(186);
           expect($content[0].getBoundingClientRect().bottom).to.equal(234);
         });
-
-        cy.get('dds-card').then($el => {
-          const sheets = $el[0].shadowRoot.adoptedStyleSheets;
-
-          if (sheets) {
-            const hover = getCssPropertyForRule(
-              ':host(dds-card[pictogram-placement="bottom"]:hover) .bx--card__copy',
-              'display',
-              sheets
-            );
-            expect(hover).to.not.equal('none');
-          }
-        });
-        cy.get('dds-card p').should('not.be.empty');
-        cy.takeSnapshots();
       });
     }
   },
 };
 
-describe('dds-card | default (desktop)', () => {
+describe('cds-card | default (desktop)', () => {
   const groupId = '_Default';
   beforeEach(() => {
     cy.visit(`${_path}&knob-Body%20copy:${groupId}=copy`);
@@ -265,7 +249,7 @@ describe('dds-card | default (desktop)', () => {
   it('should check a11y', _tests.checkA11y);
 });
 
-describe('dds-card | pictogram (desktop)', () => {
+describe('cds-card | pictogram (desktop)', () => {
   const groupId = '_pictogram';
   beforeEach(() => {
     cy.visit(`/${_pathPictogram}`);
@@ -282,7 +266,7 @@ describe('dds-card | pictogram (desktop)', () => {
   it('should check a11y', _tests.checkA11y);
 });
 
-describe('dds-card | static (desktop)', () => {
+describe('cds-card | static (desktop)', () => {
   const groupId = '_static';
   beforeEach(() => {
     cy.visit(`${_pathStatic}&knob-Add%20CTA:${groupId}=true`);
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/carousel/carousel.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/carousel/carousel.e2e.js
index 35c7c865623..10cd57cb124 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/carousel/carousel.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/carousel/carousel.e2e.js
@@ -29,7 +29,7 @@ const _paths = {
  * @type {string}
  * @private
  */
-const _selectorBase = `[data-autoid="dds--carousel"]`;
+const _selectorBase = `[data-autoid="cds--carousel"]`;
 
 /**
  * Defines the carousel element selectors.
@@ -49,14 +49,14 @@ const _selectorBase = `[data-autoid="dds--carousel"]`;
  * @private
  */
 const _selectors = {
-  card: `${_selectorBase} [data-autoid="dds--card"]`,
-  videoCard: `${_selectorBase} dds-video-cta-container`,
-  heading: `[data-autoid="dds--card-heading"]`,
+  card: `${_selectorBase} [data-autoid="cds--card"]`,
+  videoCard: `${_selectorBase} cds-video-cta-container`,
+  heading: `[data-autoid="cds--card-heading"]`,
   copy: `.bx--card__copy`,
-  footer: `[data-autoid="dds--card-footer"]`,
-  videoFooter: `[data-autoid="dds--card-cta-footer"]`,
-  image: `${_selectorBase} [data-autoid="dds--image"]`,
-  video: `dds-card-cta-image`,
+  footer: `[data-autoid="cds--card-footer"]`,
+  videoFooter: `[data-autoid="cds--card-cta-footer"]`,
+  image: `${_selectorBase} [data-autoid="cds--image"]`,
+  video: `cds-card-cta-image`,
   buttonNext: `button[part="next-button"]`,
   buttonPrevious: `button[part="prev-button"]`,
 };
@@ -278,7 +278,7 @@ const _tests = {
   },
 };
 
-describe('dds-carousel | default (desktop)', () => {
+describe('cds-carousel | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`${_paths.default}`);
@@ -294,7 +294,7 @@ describe('dds-carousel | default (desktop)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | default (mobile)', () => {
+describe('cds-carousel | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
     cy.visit(`${_paths.default}`);
@@ -309,7 +309,7 @@ describe('dds-carousel | default (mobile)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | with images (desktop)', () => {
+describe('cds-carousel | with images (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`${_paths.withImages}`);
@@ -325,7 +325,7 @@ describe('dds-carousel | with images (desktop)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | with images (mobile)', () => {
+describe('cds-carousel | with images (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
     cy.visit(`${_paths.withImages}`);
@@ -341,7 +341,7 @@ describe('dds-carousel | with images (mobile)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | with videos (desktop)', () => {
+describe('cds-carousel | with videos (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`${_paths.withVideos}`);
@@ -359,7 +359,7 @@ describe('dds-carousel | with videos (desktop)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | with videos (mobile)', () => {
+describe('cds-carousel | with videos (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
     cy.visit(`${_paths.withVideos}`);
@@ -376,7 +376,7 @@ describe('dds-carousel | with videos (mobile)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | with media (desktop)', () => {
+describe('cds-carousel | with media (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`${_paths.withMedia}`);
@@ -395,7 +395,7 @@ describe('dds-carousel | with media (desktop)', () => {
   _tests.checkScroll();
 });
 
-describe('dds-carousel | with media (mobile)', () => {
+describe('cds-carousel | with media (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
     cy.visit(`${_paths.withMedia}`);
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js
index b47bf362280..0f7d3bfe55c 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js
@@ -13,7 +13,7 @@
  */
 const _pathDefault = '/iframe.html?id=components-content-group-pictograms--default';
 
-describe('dds-content-group-pictograms | default (desktop)', () => {
+describe('cds-content-group-pictograms | default (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.injectAxe();
@@ -25,13 +25,13 @@ describe('dds-content-group-pictograms | default (desktop)', () => {
   });
 
   it('should load content group heading and copy before the pictograms', () => {
-    cy.get(`dds-pictogram-item`).then(() => {
-      cy.get(`dds-content-group-pictograms`)
-        .find(`dds-content-group-heading`)
+    cy.get(`cds-pictogram-item`).then(() => {
+      cy.get(`cds-content-group-pictograms`)
+        .find(`cds-content-group-heading`)
         .should('be.visible');
 
-      cy.get(`dds-content-group-pictograms`)
-        .find(`dds-content-group-copy`)
+      cy.get(`cds-content-group-pictograms`)
+        .find(`cds-content-group-copy`)
         .should('be.visible');
     });
 
@@ -40,15 +40,15 @@ describe('dds-content-group-pictograms | default (desktop)', () => {
   });
 
   it('should load pictogram item and content', () => {
-    cy.get(`dds-pictogram-item`).each($item => {
+    cy.get(`cds-pictogram-item`).each($item => {
       cy.wrap($item).within(() => {
         cy.get('svg[slot="pictogram"]').should('be.visible');
 
-        cy.get('dds-content-item-heading').should('be.visible');
+        cy.get('cds-content-item-heading').should('be.visible');
 
-        cy.get('dds-content-item-copy').should('be.visible');
+        cy.get('cds-content-item-copy').should('be.visible');
 
-        cy.get('dds-link-with-icon').should('be.visible');
+        cy.get('cds-link-with-icon').should('be.visible');
       });
     });
 
@@ -56,9 +56,9 @@ describe('dds-content-group-pictograms | default (desktop)', () => {
   });
 
   it('should have CTA Link with icon loaded and clickable for each pictogram', () => {
-    cy.get(`dds-pictogram-item`).each($item => {
+    cy.get(`cds-pictogram-item`).each($item => {
       cy.wrap($item).within(() => {
-        cy.get('dds-link-with-icon')
+        cy.get('cds-link-with-icon')
           .shadow()
           .find('a')
           .each($link => {
@@ -86,20 +86,20 @@ describe('dds-content-group-pictograms | default (desktop)', () => {
   });
 });
 
-describe('dds-content-group-pictograms | default (mobile)', () => {
+describe('cds-content-group-pictograms | default (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(320, 780);
   });
 
   it('should load content group heading and copy before the pictograms', () => {
-    cy.get(`dds-pictogram-item`).then(() => {
-      cy.get(`dds-content-group-pictograms`)
-        .find(`dds-content-group-heading`)
+    cy.get(`cds-pictogram-item`).then(() => {
+      cy.get(`cds-content-group-pictograms`)
+        .find(`cds-content-group-heading`)
         .should('be.visible');
 
-      cy.get(`dds-content-group-pictograms`)
-        .find(`dds-content-group-copy`)
+      cy.get(`cds-content-group-pictograms`)
+        .find(`cds-content-group-copy`)
         .should('be.visible');
     });
 
@@ -108,15 +108,15 @@ describe('dds-content-group-pictograms | default (mobile)', () => {
   });
 
   it('should load pictogram item and content', () => {
-    cy.get(`dds-pictogram-item`).each($item => {
+    cy.get(`cds-pictogram-item`).each($item => {
       cy.wrap($item).within(() => {
         cy.get('svg[slot="pictogram"]').should('be.visible');
 
-        cy.get('dds-content-item-heading').should('be.visible');
+        cy.get('cds-content-item-heading').should('be.visible');
 
-        cy.get('dds-content-item-copy').should('be.visible');
+        cy.get('cds-content-item-copy').should('be.visible');
 
-        cy.get('dds-link-with-icon').should('be.visible');
+        cy.get('cds-link-with-icon').should('be.visible');
       });
     });
 
@@ -124,9 +124,9 @@ describe('dds-content-group-pictograms | default (mobile)', () => {
   });
 
   it('should have CTA Link with icon loaded and clickable for each pictogram', () => {
-    cy.get(`dds-pictogram-item`).each($item => {
+    cy.get(`cds-pictogram-item`).each($item => {
       cy.wrap($item).within(() => {
-        cy.get('dds-link-with-icon')
+        cy.get('cds-link-with-icon')
           .shadow()
           .find('a')
           .each($link => {
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/content-item/content-item.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/content-item/content-item.e2e.js
index fdcfa3f0912..376a377dd5e 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/content-item/content-item.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/content-item/content-item.e2e.js
@@ -21,7 +21,7 @@ const _path = '/iframe.html?id=components-content-item--default';
  * @type {string}
  * @private
  */
-const _selector = '[data-autoid="dds--content-item"]';
+const _selector = '[data-autoid="cds--content-item"]';
 
 /**
  * Collection of test scenarios.
@@ -44,13 +44,13 @@ const _tests = [
 
       cy.visit(_path)
         .get(_selector)
-        .find('dds-content-item-heading')
+        .find('cds-content-item-heading')
         .then(([copy]) => {
           defaultHeader = copy.innerText.trim();
         })
         .visit(`${_path}&knob-Heading:=${customHeaderInput}`)
         .get(_selector)
-        .find('dds-content-item-heading')
+        .find('cds-content-item-heading')
         .should(([copy]) => {
           customHeaderOutput = copy.innerText.trim();
 
@@ -64,11 +64,11 @@ const _tests = [
     it('should optionally render copy text', () => {
       cy.visit(`${_path}&knob-Copy:=true`)
         .get(_selector)
-        .find('dds-content-item-copy')
+        .find('cds-content-item-copy')
         .should('have.length', 1)
         .visit(`${_path}&knob-Copy:=false`)
         .get(_selector)
-        .find('dds-content-item-copy')
+        .find('cds-content-item-copy')
         .should('have.length', 0);
       cy.takeSnapshots();
     });
@@ -80,13 +80,13 @@ const _tests = [
 
       cy.visit(_path)
         .get(_selector)
-        .find('dds-text-cta')
+        .find('cds-text-cta')
         .then(([copy]) => {
           defaultCopy = copy.innerText.trim();
         })
         .visit(`${_path}&knob-CTA%20copy:=${customCopyInput}`)
         .get(_selector)
-        .find('dds-text-cta')
+        .find('cds-text-cta')
         .should(([copy]) => {
           customCopyOutput = copy.innerText.trim();
 
@@ -99,8 +99,8 @@ const _tests = [
   () => {
     it('should support clickable text and button CTA links', () => {
       const cta_types = {
-        text: 'dds-text-cta',
-        button: 'dds-button-cta',
+        text: 'cds-text-cta',
+        button: 'cds-button-cta',
       };
       Object.keys(cta_types).forEach(type => {
         cy.visit(`${_path}&knob-CTA%20style:=${type}`)
@@ -118,8 +118,8 @@ const _tests = [
   () => {
     it('should support image and video media', () => {
       const media_types = {
-        image: 'dds-image',
-        video: 'dds-video-player-container',
+        image: 'cds-image',
+        video: 'cds-video-player-container',
       };
       Object.keys(media_types).forEach(type => {
         cy.visit(`${_path}&knob-Media%20type:=${type}`)
@@ -139,7 +139,7 @@ const _tests = [
   },
 ];
 
-describe('dds-content-item | default (desktop)', () => {
+describe('cds-content-item | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -147,7 +147,7 @@ describe('dds-content-item | default (desktop)', () => {
   _tests.forEach(test => test());
 });
 
-describe('dds-content-item | default (mobile)', () => {
+describe('cds-content-item | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/cta-block/cta-block.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/cta-block/cta-block.e2e.js
index 0849a71babb..00ca12864f6 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/cta-block/cta-block.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/cta-block/cta-block.e2e.js
@@ -15,7 +15,7 @@
 const _path = '/iframe.html?id=components-cta-block--within-tabs';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-cta-block (desktop)', () => {
+describe('cds-cta-block (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_path}`);
     cy.injectAxe();
@@ -36,9 +36,9 @@ describe('dds-cta-block (desktop)', () => {
       const itemHeadingHeights = [];
       const itemCopyHeights = [];
 
-      cy.get('dds-tab:visible')
+      cy.get('cds-tab:visible')
         // Only measure first row of items
-        .find('dds-cta-block-item:nth-child(-n+3)')
+        .find('cds-cta-block-item:nth-child(-n+3)')
         .as('items')
         .should('be.visible')
         // Items should match from CSS Grid
@@ -46,13 +46,13 @@ describe('dds-cta-block (desktop)', () => {
           itemHeights.push(item.getBoundingClientRect().height);
         })
         .get('@items')
-        .find('dds-content-item-heading')
+        .find('cds-content-item-heading')
         // Item headings should have inline style set
         .each(([itemHeading]) => {
           itemHeadingHeights.push(itemHeading.getBoundingClientRect().height);
         })
         .get('@items')
-        .find('dds-content-item-copy')
+        .find('cds-content-item-copy')
         // Item copy should have inline style set
         .each(([itemCopy]) => {
           itemCopyHeights.push(itemCopy.getBoundingClientRect().height);
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/button-cta.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/button-cta.e2e.js
index e6f05009c9e..f4ca35162d5 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/button-cta.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/button-cta.e2e.js
@@ -35,7 +35,7 @@ const _paths = {
  * @type {string}
  * @private
  */
-const _selector = 'dds-cta';
+const _selector = 'cds-cta';
 
 /**
  * Collection of common test scenarios.
@@ -59,7 +59,7 @@ const _buttonTests = [
   },
 ];
 
-describe('dds-cta | button (desktop)', () => {
+describe('cds-cta | button (desktop)', () => {
   beforeEach(() => {
     cy.visit(_path);
     cy.injectAxe();
@@ -70,7 +70,7 @@ describe('dds-cta | button (desktop)', () => {
   _tests.forEach(test => test());
 });
 
-describe('dds-cta | button (mobile)', () => {
+describe('cds-cta | button (mobile)', () => {
   beforeEach(() => {
     cy.visit(_path);
     cy.injectAxe();
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card-link.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card-link.e2e.js
index c4d3d005674..e0189b0b4ad 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card-link.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card-link.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -30,7 +30,7 @@ const getTopElement = (x, y, root = window.document) => {
 };
 
 /**
- * Collection of all tests for dds-table-of-contents
+ * Collection of all tests for cds-table-of-contents
  *
  * @private
  */
@@ -57,7 +57,7 @@ const _tests = {
           centerY: bcr.top + bcr.height / 2,
         };
       })
-      .get('dds-card-cta-footer')
+      .get('cds-card-cta-footer')
       .then(footer => {
         // Since the link is in the shadowroot, we need to look there
         const root = footer[0].shadowRoot;
@@ -88,12 +88,12 @@ const _tests = {
     });
   },
   checkHoverStyles: () => {
-    cy.get('dds-card-link-cta').then(([card]) => {
+    cy.get('cds-card-link-cta').then(([card]) => {
       const sheets = card.shadowRoot.adoptedStylesheets;
 
       if (sheets) {
         const hover = getCssPropertyForRule(
-          '.bx--card:hover, :host(dds-card:hover), :host(dds-link-list-item-card:hover), :host(dds-card-group-item:hover), :host(dds-card-group-item) .bx--card:hover, :host(dds-card-cta:hover), :host(dds-link-list-item-card-cta:hover), :host(dds-card-in-card:hover), :host(dds-content-group-cards-item:hover), :host(dds-content-group-cards-item) .bx--card:hover',
+          '.bx--card:hover, :host(cds-card:hover), :host(cds-card-group-item:hover), :host(cds-card-group-item) .bx--card:hover, :host(cds-card-cta:hover), :host(cds-card-in-card:hover), :host(cds-content-group-cards-item:hover), :host(cds-content-group-cards-item) .bx--card:hover',
           'background-color',
           sheets
         );
@@ -103,7 +103,7 @@ const _tests = {
   },
 };
 
-describe('dds-card-cta | (desktop)', () => {
+describe('cds-card-cta | (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
   });
@@ -114,7 +114,7 @@ describe('dds-card-cta | (desktop)', () => {
   it('Should check a11y', _tests.checkA11y);
 });
 
-describe('dds-card-cta | (mobile)', () => {
+describe('cds-card-cta | (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card.e2e.js
index cf3d7fa8a31..4efeea829b7 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/card.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -30,7 +30,7 @@ const getTopElement = (x, y, root = window.document) => {
 };
 
 /**
- * Collection of all tests for dds-table-of-contents
+ * Collection of all tests for cds-table-of-contents
  *
  * @private
  */
@@ -44,9 +44,9 @@ const _tests = {
     let box;
 
     cy.visit(`/${_paths.default}`)
-      .get('dds-cta')
+      .get('cds-cta')
       .shadow()
-      .find('dds-card-cta')
+      .find('cds-card-cta')
       .then(card => {
         const bcr = card[0].getBoundingClientRect();
 
@@ -59,9 +59,9 @@ const _tests = {
           centerY: bcr.top + bcr.height / 2,
         };
       });
-    cy.get('dds-cta')
+    cy.get('cds-cta')
       .shadow()
-      .find('dds-card-cta-footer')
+      .find('cds-card-cta-footer')
       .then(footer => {
         // Since the link is in the shadowroot, we need to look there
         const root = footer[0].shadowRoot;
@@ -93,15 +93,15 @@ const _tests = {
   },
   checkHoverStyles: () => {
     cy.visit(`/${_paths.default}`)
-      .get('dds-cta')
+      .get('cds-cta')
       .shadow()
-      .find('dds-card-cta')
+      .find('cds-card-cta')
       .then(([card]) => {
         const sheets = card.shadowRoot.adoptedStylesheets;
 
         if (sheets) {
           const hover = getCssPropertyForRule(
-            '.bx--card:hover .bx--card__wrapper, :host(dds-card:hover) .bx--card__wrapper, :host(dds-link-list-item-card:hover) .bx--card__wrapper, :host(dds-card-group-item:hover) .bx--card__wrapper, :host(dds-card-group-item) .bx--card:hover .bx--card__wrapper, :host(dds-card-cta:hover) .bx--card__wrapper, :host(dds-link-list-item-card-cta:hover) .bx--card__wrapper, :host(dds-card-in-card:hover) .bx--card__wrapper, :host(dds-content-group-cards-item:hover) .bx--card__wrapper, :host(dds-content-group-cards-item) .bx--card:hover .bx--card__wrapper',
+            '.bx--card:hover .bx--card__wrapper, :host(cds-card:hover) .bx--card__wrapper, :host(cds-card-group-item:hover) .bx--card__wrapper, :host(cds-card-group-item) .bx--card:hover .bx--card__wrapper, :host(cds-card-cta:hover) .bx--card__wrapper, :host(cds-card-in-card:hover) .bx--card__wrapper, :host(cds-content-group-cards-item:hover) .bx--card__wrapper, :host(cds-content-group-cards-item) .bx--card:hover .bx--card__wrapper',
             'background-color',
             sheets
           );
@@ -111,7 +111,7 @@ const _tests = {
   },
 };
 
-describe('dds-card-cta | (desktop)', () => {
+describe('cds-card-cta | (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
   });
@@ -122,7 +122,7 @@ describe('dds-card-cta | (desktop)', () => {
   it('Should check a11y', _tests.checkA11y);
 });
 
-describe('dds-card-cta | (mobile)', () => {
+describe('cds-card-cta | (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/feature.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/feature.e2e.js
index c60faba0233..daf36d289a7 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/feature.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/feature.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -28,7 +28,7 @@ const getTopElement = (x, y, root = window.document) => {
 };
 
 /**
- * Collection of all tests for dds-table-of-contents
+ * Collection of all tests for cds-table-of-contents
  *
  * @function checkBlockLink - Asserts that entirety of card is covered by footer link pseudoelement
  * @function checkHorizontalLayout - Asserts that card image is full-height, left-aligned and content is full-height, right-aligned
@@ -44,7 +44,7 @@ const _tests = {
   checkBlockLink: () => {
     let box;
 
-    cy.get('dds-feature-cta')
+    cy.get('cds-feature-cta')
       .then(card => {
         const bcr = card[0].getBoundingClientRect();
 
@@ -57,7 +57,7 @@ const _tests = {
           centerY: bcr.top + bcr.height / 2,
         };
       })
-      .get('dds-feature-cta-footer')
+      .get('cds-feature-cta-footer')
       .then(footer => {
         // Since the link is in the shadowroot, we need to look there
         const root = footer[0].shadowRoot;
@@ -73,11 +73,11 @@ const _tests = {
 
     cy.wait(500);
 
-    cy.get('dds-feature-cta')
+    cy.get('cds-feature-cta')
       .then(([card]) => {
         cardBox = card.getBoundingClientRect();
       })
-      .get('dds-feature-cta dds-image')
+      .get('cds-feature-cta cds-image')
       .then(([image]) => {
         imageBox = image.getBoundingClientRect();
       })
@@ -102,11 +102,11 @@ const _tests = {
   checkVerticalLayout: () => {
     let cardBox, imageBox, contentBox;
 
-    cy.get('dds-feature-cta')
+    cy.get('cds-feature-cta')
       .then(([card]) => {
         cardBox = card.getBoundingClientRect();
       })
-      .get('dds-feature-cta dds-image')
+      .get('cds-feature-cta cds-image')
       .then(([image]) => {
         imageBox = image.getBoundingClientRect();
       })
@@ -137,12 +137,12 @@ const _tests = {
       'knob-Heading (heading):': customTextInput,
     });
 
-    cy.get('dds-card-heading')
+    cy.get('cds-card-heading')
       .then(([heading]) => {
         defaultText = heading.innerText;
       })
       .visit(`/${_paths.default}&${knobs.toString()}`)
-      .get('dds-card-heading')
+      .get('cds-card-heading')
       .then(([heading]) => {
         customTextOutput = heading.innerText;
 
@@ -171,7 +171,7 @@ const _tests = {
   },
 };
 
-describe('dds-feature-cta | (desktop)', () => {
+describe('cds-feature-cta | (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`/${_paths.default}`);
@@ -185,7 +185,7 @@ describe('dds-feature-cta | (desktop)', () => {
   it('Should check a11y', _tests.checkA11y);
 });
 
-describe('dds-feature-cta | (mobile)', () => {
+describe('cds-feature-cta | (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 720);
     cy.visit(`/${_paths.default}`);
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/text-cta.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/text-cta.e2e.js
index 8a5225b80f9..753366898e0 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/cta/text-cta.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/cta/text-cta.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -35,7 +35,7 @@ const _paths = {
  * @type {string}
  * @private
  */
-const _selector = 'dds-cta';
+const _selector = 'cds-cta';
 
 /**
  * An array of test scenarios.
@@ -45,7 +45,7 @@ const _selector = 'dds-cta';
  */
 const _tests = createTests(_selector, _paths);
 
-describe('dds-cta | text (desktop)', () => {
+describe('cds-cta | text (desktop)', () => {
   beforeEach(() => {
     cy.visit(_path);
     cy.injectAxe();
@@ -55,7 +55,7 @@ describe('dds-cta | text (desktop)', () => {
   _tests.forEach(test => test());
 });
 
-describe('dds-cta | text (mobile)', () => {
+describe('cds-cta | text (mobile)', () => {
   beforeEach(() => {
     cy.visit(_path);
     cy.injectAxe();
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js
index dd0cf93a34a..ce2f934c5a2 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/feature-card/feature-card.e2e.js
@@ -22,7 +22,7 @@ const _pathMedium = '/iframe.html?id=components-feature-card--medium';
 const _pathLarge = '/iframe.html?id=components-feature-card--large';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-feature-card | medium', () => {
+describe('cds-feature-card | medium', () => {
   beforeEach(() => {
     cy.visit(`/${_pathMedium}`);
     cy.injectAxe();
@@ -34,7 +34,7 @@ describe('dds-feature-card | medium', () => {
   });
 
   it('should check for link', () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a.bx--card__footer')
       .then($link => {
@@ -46,7 +46,7 @@ describe('dds-feature-card | medium', () => {
   });
 
   it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a')
       .then($els => {
@@ -64,13 +64,13 @@ describe('dds-feature-card | medium', () => {
 
   it('should have image on the left and content on the right side of the card', () => {
     // image takes the left half
-    cy.get('dds-image').then($image => {
+    cy.get('cds-image').then($image => {
       expect($image[0].getBoundingClientRect().left).to.equal(32);
       expect($image[0].getBoundingClientRect().right).to.equal(328);
     });
 
     // content takes the right half
-    cy.get('dds-feature-card')
+    cy.get('cds-feature-card')
       .shadow()
       .find('.bx--card__wrapper')
       .then($content => {
@@ -87,14 +87,14 @@ describe('dds-feature-card | medium', () => {
   });
 });
 
-describe('dds-feature-card | medium (mobile)', () => {
+describe('cds-feature-card | medium (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathMedium}`);
     cy.viewport(320, 780);
   });
 
   it('should check for link', () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a.bx--card__footer')
       .then($link => {
@@ -105,7 +105,7 @@ describe('dds-feature-card | medium (mobile)', () => {
   });
 
   it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a')
       .then($els => {
@@ -122,7 +122,7 @@ describe('dds-feature-card | medium (mobile)', () => {
   });
 });
 
-describe('dds-feature-card | large', () => {
+describe('cds-feature-card | large', () => {
   beforeEach(() => {
     cy.visit(`/${_pathLarge}`);
     cy.injectAxe();
@@ -134,7 +134,7 @@ describe('dds-feature-card | large', () => {
   });
 
   it('should check for link', () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a.bx--card__footer')
       .then($link => {
@@ -145,7 +145,7 @@ describe('dds-feature-card | large', () => {
   });
 
   it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a')
       .then($els => {
@@ -162,26 +162,26 @@ describe('dds-feature-card | large', () => {
   });
 
   it('should have eyebrow, heading, and copy content', () => {
-    cy.get('dds-card-eyebrow')
+    cy.get('cds-card-eyebrow')
       .invoke('text')
       .should('not.be.empty');
-    cy.get('dds-card-heading')
+    cy.get('cds-card-heading')
       .invoke('text')
       .should('not.be.empty');
-    cy.get('dds-feature-card > p')
+    cy.get('cds-feature-card > p')
       .invoke('text')
       .should('not.be.empty');
   });
 
   it('should have image on the left and content on the right half of the card', () => {
     // image takes the left half
-    cy.get('dds-image').then($image => {
+    cy.get('cds-image').then($image => {
       expect($image[0].getBoundingClientRect().left).to.equal(16);
       expect($image[0].getBoundingClientRect().right).to.equal(529);
     });
 
     // content takes the right half
-    cy.get('dds-feature-card')
+    cy.get('cds-feature-card')
       .shadow()
       .find('.bx--card__wrapper')
       .then($content => {
@@ -198,14 +198,14 @@ describe('dds-feature-card | large', () => {
   });
 });
 
-describe('dds-feature-card | large (mobile)', () => {
+describe('cds-feature-card | large (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathLarge}`);
     cy.viewport(320, 780);
   });
 
   it('should check for link', () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a.bx--card__footer')
       .then($link => {
@@ -217,7 +217,7 @@ describe('dds-feature-card | large (mobile)', () => {
   });
 
   it("should check that the footer's pseudo class takes up entire card to be clickable", () => {
-    cy.get('dds-feature-card > dds-feature-card-footer')
+    cy.get('cds-feature-card > cds-feature-card-footer')
       .shadow()
       .find('a')
       .then($els => {
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/feature-section/feature-section.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/feature-section/feature-section.e2e.js
index d82daff52dd..bc6928f5b27 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/feature-section/feature-section.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/feature-section/feature-section.e2e.js
@@ -14,7 +14,7 @@
 const _path = '/iframe.html?id=components-feature-section--default';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-feature-section (desktop)', () => {
+describe('cds-feature-section (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_path}`);
     cy.injectAxe();
@@ -26,13 +26,13 @@ describe('dds-feature-section (desktop)', () => {
   });
 
   it('should have eyebrow, heading, and copy content', () => {
-    cy.get('dds-card-eyebrow')
+    cy.get('cds-card-eyebrow')
       .invoke('text')
       .should('not.be.empty');
-    cy.get('dds-content-block-heading')
+    cy.get('cds-content-block-heading')
       .invoke('text')
       .should('not.be.empty');
-    cy.get('dds-content-item-paragraph')
+    cy.get('cds-content-item-paragraph')
       .invoke('text')
       .should('not.be.empty');
 
@@ -41,7 +41,7 @@ describe('dds-feature-section (desktop)', () => {
 
   it('should have content on the left and image on the right side (media align: right)', () => {
     // content takes the left half
-    cy.get('dds-feature-section')
+    cy.get('cds-feature-section')
       .shadow()
       .find('.bx--feature-section__body')
       .then($content => {
@@ -50,7 +50,7 @@ describe('dds-feature-section (desktop)', () => {
       });
 
     // image takes the right half
-    cy.get('dds-image').then($image => {
+    cy.get('cds-image').then($image => {
       expect($image[0].getBoundingClientRect().left).to.equal(640);
       expect($image[0].getBoundingClientRect().right).to.equal(1280);
     });
@@ -61,7 +61,7 @@ describe('dds-feature-section (desktop)', () => {
   it('should have image on the left and content on the right side (media align: left)', () => {
     cy.visit(`/${_path}&knob-Media%20Alignment=left`);
     // content takes the right half
-    cy.get('dds-feature-section')
+    cy.get('cds-feature-section')
       .shadow()
       .find('.bx--feature-section__body')
       .then($content => {
@@ -70,7 +70,7 @@ describe('dds-feature-section (desktop)', () => {
       });
 
     // image takes the left half
-    cy.get('dds-image').then($image => {
+    cy.get('cds-image').then($image => {
       expect($image[0].getBoundingClientRect().left).to.equal(0);
       expect($image[0].getBoundingClientRect().right).to.equal(640);
     });
@@ -80,17 +80,17 @@ describe('dds-feature-section (desktop)', () => {
 
   it('should have loaded and clickable card link', () => {
     // checks the card link is on the right side
-    cy.get('dds-feature-section-card-link').then($card => {
+    cy.get('cds-feature-section-card-link').then($card => {
       expect($card[0].getBoundingClientRect().right).to.equal(1280 - 16);
     });
 
     // checks the card link has a heading
-    cy.get('dds-feature-section-card-link > dds-card-link-heading')
+    cy.get('cds-feature-section-card-link > cds-card-link-heading')
       .invoke('text')
       .should('not.be.empty');
 
     // checks the entire card link is clickable
-    cy.get('dds-feature-section-card-link > dds-card-cta-footer')
+    cy.get('cds-feature-section-card-link > cds-card-cta-footer')
       .shadow()
       .find('a')
       .then($els => {
@@ -109,7 +109,7 @@ describe('dds-feature-section (desktop)', () => {
   it('should be able to customize card link from local to external', () => {
     cy.visit(`/${_path}&knob-CTA%20type%20(cta-type)=external`);
 
-    cy.get('dds-feature-section-card-link  > dds-card-cta-footer')
+    cy.get('cds-feature-section-card-link  > cds-card-cta-footer')
       .shadow()
       .find('a')
       .then($els => {
@@ -126,7 +126,7 @@ describe('dds-feature-section (desktop)', () => {
   });
 });
 
-describe('dds-feature-section (mobile)', () => {
+describe('cds-feature-section (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_path}`);
     cy.viewport(320, 780);
@@ -137,7 +137,7 @@ describe('dds-feature-section (mobile)', () => {
 
     let contentRect, imageRect;
 
-    cy.get('dds-feature-section')
+    cy.get('cds-feature-section')
       .shadow()
       .get('.bx--feature-section__body')
       .then(([content]) => {
@@ -161,7 +161,7 @@ describe('dds-feature-section (mobile)', () => {
 
     let contentRect, imageRect;
 
-    cy.get('dds-feature-section')
+    cy.get('cds-feature-section')
       .shadow()
       .get('.bx--feature-section__body')
       .then(([content]) => {
@@ -180,17 +180,17 @@ describe('dds-feature-section (mobile)', () => {
 
   it('should have loaded and clickable card link', () => {
     // checks the card link is on the right side
-    cy.get('dds-feature-section-card-link').then($card => {
+    cy.get('cds-feature-section-card-link').then($card => {
       expect($card[0].getBoundingClientRect().right).to.equal(320);
     });
 
     // checks the card link has a heading
-    cy.get('dds-feature-section-card-link > dds-card-link-heading')
+    cy.get('cds-feature-section-card-link > cds-card-link-heading')
       .invoke('text')
       .should('not.be.empty');
 
     // checks the entire card link is clickable
-    cy.get('dds-feature-section-card-link > dds-card-cta-footer')
+    cy.get('cds-feature-section-card-link > cds-card-cta-footer')
       .shadow()
       .find('a')
       .then($els => {
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/filter-panel/filter-panel.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/filter-panel/filter-panel.e2e.js
index b79aec02bf7..dbf580ad34d 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/filter-panel/filter-panel.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/filter-panel/filter-panel.e2e.js
@@ -19,7 +19,7 @@ const _path = '/iframe.html?id=components-filter-panel--default';
  * @type {string}
  * @private
  */
-const _selector = '[data-autoid="dds-filter-panel-composite"]';
+const _selector = '[data-autoid="c4d-filter-panel-composite"]';
 
 /**
  * Defines viewport dimensions.
@@ -39,7 +39,7 @@ const _checkOptions = { force: true };
  */
 const _screenshotOptions = { capture: 'viewport' };
 
-describe('dds-filter-panel | (desktop)', () => {
+describe('c4d-filter-panel | (desktop)', () => {
   beforeEach(() => {
     cy.viewport(..._viewportWidths.desktop);
   });
@@ -54,10 +54,11 @@ describe('dds-filter-panel | (desktop)', () => {
     // Check box on desktop
     cy.visit(_path)
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
       .click()
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .first()
       .shadow()
       .find('input[type="checkbox"]')
@@ -71,9 +72,9 @@ describe('dds-filter-panel | (desktop)', () => {
       .click();
     // Verify box is checked
     cy.get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .first()
       .shadow()
       .find('input[type="checkbox"]')
@@ -85,10 +86,11 @@ describe('dds-filter-panel | (desktop)', () => {
     // Check box on desktop
     cy.visit(_path)
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .eq(1)
       .click()
-      .find('dds-filter-panel-input-select')
+      .find('c4d-filter-panel-input-select')
       .first()
       .click();
     cy.screenshot(_screenshotOptions);
@@ -100,9 +102,9 @@ describe('dds-filter-panel | (desktop)', () => {
       .click();
     // Verify box is checked
     cy.get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .eq(1)
-      .find('dds-filter-panel-input-select')
+      .find('c4d-filter-panel-input-select')
       .first()
       .should('have.attr', 'selected');
     cy.screenshot(_screenshotOptions);
@@ -115,24 +117,26 @@ describe('dds-filter-panel | (desktop)', () => {
       `${_path}&knob-Filter%20cutoff=1&knob-Max%20filters=1&knob-Number%20of%20selected%20items=0`
     )
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
       .as('filterGroupItem')
       .click()
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .should('have.length', 1)
       .click()
       .get('@filterGroupItem')
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .then((checkboxes) => (filterCount = checkboxes.length));
     cy.visit(
       `${_path}&knob-Max%20filters=${filterCount}&knob-Number%20of%20selected%20items=0`
     )
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
       .click()
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .should('have.length', 0);
   });
 
@@ -141,10 +145,11 @@ describe('dds-filter-panel | (desktop)', () => {
 
     cy.visit(`${_path}&knob-View%20all%20text=${customText}`)
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
       .click()
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .should('have.text', customText);
     cy.screenshot(_screenshotOptions);
   });
@@ -152,7 +157,8 @@ describe('dds-filter-panel | (desktop)', () => {
   it('should re-hide excess elements when filter groups are closed and reopened', () => {
     cy.visit(_path)
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
       .as('filterGroupItem')
       .shadow()
@@ -160,10 +166,10 @@ describe('dds-filter-panel | (desktop)', () => {
       .as('toggle')
       .click()
       .get('@filterGroupItem')
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .click()
       .get('@filterGroupItem')
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .last()
       .as('lastCheckbox')
       .get('@toggle')
@@ -177,7 +183,8 @@ describe('dds-filter-panel | (desktop)', () => {
   it('should not re-hide elements when an element that would be hidden has been selected', () => {
     cy.visit(_path)
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
       .as('filterGroupItem')
       .shadow()
@@ -185,10 +192,10 @@ describe('dds-filter-panel | (desktop)', () => {
       .as('toggle')
       .click()
       .get('@filterGroupItem')
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .click()
       .get('@filterGroupItem')
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .last()
       .as('lastCheckbox')
       .shadow()
@@ -203,7 +210,7 @@ describe('dds-filter-panel | (desktop)', () => {
   });
 });
 
-describe('dds-filter-panel | (mobile)', () => {
+describe('c4d-filter-panel | (mobile)', () => {
   beforeEach(() => {
     cy.viewport(..._viewportWidths.mobile);
   });
@@ -221,10 +228,10 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
       .click()
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .first()
       .shadow()
       .find('input[type="checkbox"]')
@@ -234,9 +241,10 @@ describe('dds-filter-panel | (mobile)', () => {
     // Switch to desktop and verify box is checked
     cy.viewport(..._viewportWidths['desktop'])
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .first()
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .first()
       .shadow()
       .find('input[type="checkbox"]')
@@ -251,10 +259,10 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .eq(1)
       .click()
-      .find('dds-filter-panel-input-select')
+      .find('c4d-filter-panel-input-select')
       .first()
       .click();
     cy.screenshot(_screenshotOptions);
@@ -262,9 +270,10 @@ describe('dds-filter-panel | (mobile)', () => {
     // Switch to desktop and verify box is checked
     cy.viewport(..._viewportWidths['desktop'])
       .get(_selector)
-      .find('dds-filter-group-item')
+      .shadow()
+      .find('c4d-filter-group-item')
       .eq(1)
-      .find('dds-filter-panel-input-select')
+      .find('c4d-filter-panel-input-select')
       .first()
       .should('have.attr', 'selected');
     cy.screenshot(_screenshotOptions);
@@ -280,15 +289,15 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
       .as('filterGroupItem')
       .click()
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .should('have.length', 1)
       .click()
       .get('@filterGroupItem')
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .then((checkboxes) => (filterCount = checkboxes.length));
     cy.visit(
       `${_path}&knob-Max%20filters=${filterCount}&knob-Number%20of%20selected%20items=0`
@@ -297,10 +306,10 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
       .click()
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .should('have.length', 0);
   });
 
@@ -312,10 +321,10 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
       .click()
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .should('have.text', customText);
     cy.screenshot(_screenshotOptions);
   });
@@ -326,7 +335,7 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
       .as('filterGroupItem')
       .shadow()
@@ -334,10 +343,10 @@ describe('dds-filter-panel | (mobile)', () => {
       .as('toggle')
       .click()
       .get('@filterGroupItem')
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .click()
       .get('@filterGroupItem')
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .last()
       .as('lastCheckbox')
       .get('@toggle')
@@ -354,7 +363,7 @@ describe('dds-filter-panel | (mobile)', () => {
       .find('.bx--filter-button')
       .click()
       .get(_selector)
-      .find('dds-filter-group-item')
+      .find('c4d-filter-group-item')
       .first()
       .as('filterGroupItem')
       .shadow()
@@ -362,10 +371,10 @@ describe('dds-filter-panel | (mobile)', () => {
       .as('toggle')
       .click()
       .get('@filterGroupItem')
-      .find('.dds-filter-group-item__view-all')
+      .find('.c4d-filter-group-item__view-all')
       .click()
       .get('@filterGroupItem')
-      .find('dds-filter-panel-checkbox')
+      .find('c4d-filter-panel-checkbox')
       .last()
       .as('lastCheckbox')
       .shadow()
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js
index 23f675a6124..f7d79c4480d 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-micro.e2e.js
@@ -21,13 +21,13 @@ const _pathMicro = '/iframe.html?id=components-footer--micro';
  */
 const _pathMicroLanguageOnly = '/iframe.html?id=components-footer--micro-language-only';
 
-describe('dds-footer | Micro (desktop)', () => {
+describe('cds-footer | Micro (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathMicro}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -35,27 +35,27 @@ describe('dds-footer | Micro (desktop)', () => {
   });
 
   it('should load locale modal with 4 geos', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('cds-locale-button').click();
 
     cy.wait(500);
-    cy.get('dds-locale-modal').should('have.attr', 'open');
-    cy.get('dds-regions > dds-region-item').should('have.length', 4);
+    cy.get('cds-locale-modal').should('have.attr', 'open');
+    cy.get('cds-regions > cds-region-item').should('have.length', 4);
 
     cy.takeSnapshots();
   });
 
   it('should load the Asia Pacific region with its languages and locations', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('cds-locale-button').click();
     cy.wait(500);
 
-    cy.get('dds-regions')
-      .find('dds-region-item[name="Asia Pacific"]')
+    cy.get('cds-regions')
+      .find('cds-region-item[name="Asia Pacific"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-search')
-      .find('dds-locale-item')
+    cy.get('cds-locale-search')
+      .find('cds-locale-item')
       .each($locale => {
         if (!$locale.attr('region') === 'Asia Pacific') {
           $locale.should('have.attr', 'hidden');
@@ -66,8 +66,8 @@ describe('dds-footer | Micro (desktop)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('dds-legal-nav')
-      .find('dds-legal-nav-item')
+    cy.get('cds-legal-nav')
+      .find('cds-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -77,59 +77,59 @@ describe('dds-footer | Micro (desktop)', () => {
   });
 });
 
-describe('dds-footer | Micro language only (desktop)', () => {
+describe('cds-footer | Micro language only (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathMicroLanguageOnly}`);
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('dds-language-selector-desktop').should('have.length', 1);
-    cy.get('dds-language-selector-desktop')
+    cy.get('cds-language-selector-desktop').should('have.length', 1);
+    cy.get('cds-language-selector-desktop')
       .shadow()
       .find(`div.bx--dropdown`)
       .click();
-    cy.get('dds-language-selector-desktop')
-      .find(`bx-combo-box-item[value="Arabic / عربية"]`)
+    cy.get('cds-language-selector-desktop')
+      .find(`cds-combo-box-item[value="Arabic / عربية"]`)
       .click();
-    cy.get('dds-language-selector-desktop').should('have.value', 'Arabic / عربية');
+    cy.get('cds-language-selector-desktop').should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots();
   });
 });
 
-describe('dds-footer | Micro (mobile)', () => {
+describe('cds-footer | Micro (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathMicro}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load locale modal with 4 geos', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('cds-locale-button').click();
 
     cy.wait(500);
-    cy.get('dds-locale-modal').should('have.attr', 'open');
-    cy.get('dds-regions > dds-region-item').should('have.length', 4);
+    cy.get('cds-locale-modal').should('have.attr', 'open');
+    cy.get('cds-regions > cds-region-item').should('have.length', 4);
 
     cy.takeSnapshots('mobile');
   });
 
   it('should load the Asia Pacific region with its languages and locations', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('cds-locale-button').click();
     cy.wait(500);
 
-    cy.get('dds-regions')
-      .find('dds-region-item[name="Asia Pacific"]')
+    cy.get('cds-regions')
+      .find('cds-region-item[name="Asia Pacific"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-search')
-      .find('dds-locale-item')
+    cy.get('cds-locale-search')
+      .find('cds-locale-item')
       .each($locale => {
         if (!$locale.attr('region') === 'Asia Pacific') {
           $locale.should('have.attr', 'hidden');
@@ -140,8 +140,8 @@ describe('dds-footer | Micro (mobile)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('dds-legal-nav')
-      .find('dds-legal-nav-item')
+    cy.get('cds-legal-nav')
+      .find('cds-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -151,21 +151,21 @@ describe('dds-footer | Micro (mobile)', () => {
   });
 });
 
-describe('dds-footer | Micro language only (mobile)', () => {
+describe('cds-footer | Micro language only (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathMicroLanguageOnly}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('dds-language-selector-mobile').should('have.length', 1);
-    cy.get('dds-language-selector-mobile')
+    cy.get('cds-language-selector-mobile').should('have.length', 1);
+    cy.get('cds-language-selector-mobile')
       .shadow()
       .find(`select.bx--select-input`)
       .select('Arabic / عربية');
-    cy.get('dds-language-selector-mobile')
+    cy.get('cds-language-selector-mobile')
       .shadow()
       .find(`select.bx--select-input`)
       .should('have.value', 'Arabic / عربية');
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js
index 926eac3f84a..9f024e399d4 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer-short.e2e.js
@@ -21,13 +21,13 @@ const _pathShort = '/iframe.html?id=components-footer--short';
  */
 const _pathShortLanguageOnly = '/iframe.html?id=components-footer--short-language-only';
 
-describe('dds-footer | Short (desktop)', () => {
+describe('c4d-footer | Short (desktop)', () => {
   beforeEach(() => {
     cy.visit(`${_pathShort}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -35,9 +35,9 @@ describe('dds-footer | Short (desktop)', () => {
   });
 
   it('should display clickable IBM logo', () => {
-    cy.get('dds-footer-logo')
+    cy.get('c4d-footer-logo')
       .shadow()
-      .find('a.bx--footer-logo__link')
+      .find('a.c4d--footer-logo__link')
       .then($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -47,30 +47,30 @@ describe('dds-footer | Short (desktop)', () => {
   });
 
   it('should open locale modal with 4 geos when clicked on locale button', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-modal').should('have.attr', 'open');
+    cy.get('c4d-locale-modal').should('have.attr', 'open');
 
-    cy.get('dds-regions > dds-region-item').should('have.length', 4);
+    cy.get('c4d-regions > c4d-region-item').should('have.length', 4);
 
     cy.takeSnapshots();
   });
 
   it('should display the specific locations and languages of a selected geo', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('dds-regions')
-      .find('dds-region-item[name="Middle East and Africa"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Middle East and Africa"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-search')
-      .find('dds-locale-item')
+    cy.get('c4d-locale-search')
+      .find('c4d-locale-item')
       .each($locale => {
         if (!$locale.attr('region') === 'Middle East and Africa') {
           $locale.should('have.attr', 'hidden');
@@ -81,18 +81,18 @@ describe('dds-footer | Short (desktop)', () => {
   });
 
   it('should display interactive search field and with keywords for locations and languages', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('dds-regions')
-      .find('dds-region-item[name="Americas"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Americas"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-search').as('search')
-      .find('dds-search')
+    cy.get('c4d-locale-search').as('search')
+      .find('c4d-search')
       .shadow()
       .find('input')
       .type('gu', {
@@ -111,8 +111,8 @@ describe('dds-footer | Short (desktop)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('dds-legal-nav')
-      .find('dds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -122,41 +122,41 @@ describe('dds-footer | Short (desktop)', () => {
   });
 });
 
-describe('dds-footer | Short language only (desktop)', () => {
+describe('c4d-footer | Short language only (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathShortLanguageOnly}`);
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('dds-language-selector-desktop').should('have.length', 1);
-    cy.get('dds-language-selector-desktop')
+    cy.get('c4d-language-selector-desktop').should('have.length', 1);
+    cy.get('c4d-language-selector-desktop')
       .shadow()
-      .find(`div.bx--dropdown`)
+      .find(`div.cds--dropdown`)
       .click();
-    cy.get('dds-language-selector-desktop')
-      .find(`bx-combo-box-item[value="Arabic / عربية"]`)
+    cy.get('c4d-language-selector-desktop')
+      .find(`cds-combo-box-item[value="Arabic / عربية"]`)
       .click();
-    cy.get('dds-language-selector-desktop').should('have.value', 'Arabic / عربية');
+    cy.get('c4d-language-selector-desktop').should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots();
   });
 });
 
-describe('dds-footer | Short (mobile)', () => {
+describe('c4d-footer | Short (mobile)', () => {
   beforeEach(() => {
     cy.visit(`${_pathShort}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should display clickable IBM logo', () => {
-    cy.get('dds-footer-logo')
+    cy.get('c4d-footer-logo')
       .shadow()
-      .find('a.bx--footer-logo__link')
+      .find('a.c4d--footer-logo__link')
       .then($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -166,30 +166,30 @@ describe('dds-footer | Short (mobile)', () => {
   });
 
   it('should open locale modal with 4 geos when clicked on locale button', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-modal').should('have.attr', 'open');
+    cy.get('c4d-locale-modal').should('have.attr', 'open');
 
-    cy.get('dds-regions > dds-region-item').should('have.length', 4);
+    cy.get('c4d-regions > c4d-region-item').should('have.length', 4);
 
     cy.takeSnapshots('mobile');
   });
 
   it('should display the specific locations and languages of a selected geo', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('dds-regions')
-      .find('dds-region-item[name="Middle East and Africa"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Middle East and Africa"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-search')
-      .find('dds-locale-item')
+    cy.get('c4d-locale-search')
+      .find('c4d-locale-item')
       .each($locale => {
         if (!$locale.attr('region') === 'Middle East and Africa') {
           $locale.should('have.attr', 'hidden');
@@ -200,18 +200,18 @@ describe('dds-footer | Short (mobile)', () => {
   });
 
   it('should display interactive search field and with keywords for locations and languages', () => {
-    cy.get('dds-locale-button').click();
+    cy.get('c4d-locale-button').click();
 
     cy.wait(500);
 
-    cy.get('dds-regions')
-      .find('dds-region-item[name="Americas"]')
+    cy.get('c4d-regions')
+      .find('c4d-region-item[name="Americas"]')
       .click();
 
     cy.wait(500);
 
-    cy.get('dds-locale-search').as('search')
-      .find('dds-search')
+    cy.get('c4d-locale-search').as('search')
+      .find('c4d-search')
       .shadow()
       .find('input')
       .type('gu', {
@@ -230,8 +230,8 @@ describe('dds-footer | Short (mobile)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('dds-legal-nav')
-      .find('dds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -241,23 +241,23 @@ describe('dds-footer | Short (mobile)', () => {
   });
 });
 
-describe('dds-footer | Short language only (mobile)', () => {
+describe('c4d-footer | Short language only (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathShortLanguageOnly}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('dds-language-selector-mobile').should('have.length', 1);
-    cy.get('dds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile').should('have.length', 1);
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find(`select.bx--select-input`)
+      .find(`select.cds--select-input`)
       .select('Arabic / عربية');
-    cy.get('dds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find(`select.bx--select-input`)
+      .find(`select.cds--select-input`)
       .should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots('mobile');
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js
index 1623d7942a7..a5cae5f3e0a 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/footer/footer.e2e.js
@@ -21,13 +21,13 @@ const _pathDefault = '/iframe.html?id=components-footer--default';
  */
 const _pathDefaultLanguageOnly = '/iframe.html?id=components-footer--default-language-only';
 
-describe('dds-footer | default (desktop)', () => {
+describe('c4d-footer | default (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -35,44 +35,44 @@ describe('dds-footer | default (desktop)', () => {
   });
 
   it('should have interactable url for IBM logo', () => {
-    cy.get('[data-autoid="dds--footer-logo"]').then($link => {
+    cy.get('[data-autoid="c4d--footer-logo"]').then($link => {
       const url = $link.prop('href');
       expect(url).not.to.be.empty;
     });
   });
 
   it('should load locale modal', () => {
-    const localeButton = cy.get('[data-autoid="dds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.screenshot();
   });
 
   it('should load the Americas region with its languages and locations', () => {
-    const localeButton = cy.get('[data-autoid="dds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
-    cy.get('dds-region-item[name="Americas"]').click();
+    cy.get('c4d-region-item[name="Americas"]').click();
 
-    cy.get('dds-locale-item[region="Americas"]').should('have.length', 35);
+    cy.get('c4d-locale-item[region="Americas"]').should('have.length', 35);
 
     cy.takeSnapshots();
   });
 
   it('should be able to search with keywords for locations and languages', () => {
-    const localeButton = cy.get('[data-autoid="dds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.get('[name="Americas"]').click();
 
-    cy.get('dds-locale-search')
+    cy.get('c4d-locale-search')
       .shadow()
-      .find('.bx--search-input')
+      .find('.cds--search-input')
       .type('ca', {
         force: true,
       });
 
-    cy.get('dds-locale-item:not([hidden])')
+    cy.get('c4d-locale-item:not([hidden])')
       .invoke('attr', 'country')
       .should('eq', 'Canada');
 
@@ -80,8 +80,8 @@ describe('dds-footer | default (desktop)', () => {
   });
 
   it('should load clickable footer links', () => {
-    cy.get('dds-footer-nav-group')
-      .find('dds-footer-nav-item')
+    cy.get('c4d-footer-nav-group')
+      .find('c4d-footer-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -91,8 +91,8 @@ describe('dds-footer | default (desktop)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('dds-legal-nav')
-      .find('dds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -102,13 +102,13 @@ describe('dds-footer | default (desktop)', () => {
   });
 });
 
-describe('dds-footer | Default language only (desktop)', () => {
+describe('c4d-footer | Default language only (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefaultLanguageOnly}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -116,71 +116,71 @@ describe('dds-footer | Default language only (desktop)', () => {
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('dds-language-selector-desktop').should('have.length', 1);
+    cy.get('c4d-language-selector-desktop').should('have.length', 1);
 
     // FIXME: Firefox is not providing the space above for this test to pass
     if (Cypress.browser.name !== 'firefox') {
-      cy.get('dds-language-selector-desktop')
+      cy.get('c4d-language-selector-desktop')
         .shadow()
-        .find('div.bx--dropdown')
+        .find('div.cds--dropdown')
         .click();
-      cy.get('dds-language-selector-desktop')
-        .find('bx-combo-box-item[value="Arabic / عربية"]')
+      cy.get('c4d-language-selector-desktop')
+        .find('cds-combo-box-item[value="Arabic / عربية"]')
         .click();
-      cy.get('dds-language-selector-desktop').should('have.value', 'Arabic / عربية');
+      cy.get('c4d-language-selector-desktop').should('have.value', 'Arabic / عربية');
     }
 
     cy.takeSnapshots();
   });
 });
 
-describe('dds-footer | default (mobile)', () => {
+describe('c4d-footer | default (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should have interactable url for IBM logo', () => {
-    cy.get('[data-autoid="dds--footer-logo"]').then($link => {
+    cy.get('[data-autoid="c4d--footer-logo"]').then($link => {
       const url = $link.prop('href');
       expect(url).not.to.be.empty;
     });
   });
 
   it('should load locale modal', () => {
-    const localeButton = cy.get('[data-autoid="dds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.screenshot();
   });
 
   it('should load the Americas region with its languages and locations', () => {
-    const localeButton = cy.get('[data-autoid="dds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
-    cy.get('dds-region-item[name="Americas"]').click();
+    cy.get('c4d-region-item[name="Americas"]').click();
 
-    cy.get('dds-locale-item[region="Americas"]').should('have.length', 35);
+    cy.get('c4d-locale-item[region="Americas"]').should('have.length', 35);
 
     cy.takeSnapshots();
   });
 
   it('should be able to search with keywords for locations and languages', () => {
-    const localeButton = cy.get('[data-autoid="dds--locale-btn"]');
+    const localeButton = cy.get('[data-autoid="c4d--locale-btn"]');
     localeButton.click();
 
     cy.get('[name="Americas"]').click();
 
-    cy.get('dds-locale-search')
+    cy.get('c4d-locale-search')
       .shadow()
-      .find('.bx--search-input')
+      .find('.cds--search-input')
       .type('ca', {
         force: true,
       });
 
-    cy.get('dds-locale-item:not([hidden])')
+    cy.get('c4d-locale-item:not([hidden])')
       .invoke('attr', 'country')
       .should('eq', 'Canada');
 
@@ -188,8 +188,8 @@ describe('dds-footer | default (mobile)', () => {
   });
 
   it('should load clickable footer links', () => {
-    cy.get('dds-footer-nav-group')
-      .find('dds-footer-nav-item')
+    cy.get('c4d-footer-nav-group')
+      .find('c4d-footer-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -199,8 +199,8 @@ describe('dds-footer | default (mobile)', () => {
   });
 
   it('should load clickable legal links', () => {
-    cy.get('dds-legal-nav')
-      .find('dds-legal-nav-item')
+    cy.get('c4d-legal-nav')
+      .find('c4d-legal-nav-item')
       .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -210,23 +210,23 @@ describe('dds-footer | default (mobile)', () => {
   });
 });
 
-describe('dds-footer | Default language only (mobile)', () => {
+describe('c4d-footer | Default language only (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefaultLanguageOnly}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--footer-legal-nav"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="c4d--footer-legal-nav"]').should('not.be.empty'));
   });
 
   it('should load language selector dropdown and be interactive', () => {
-    cy.get('dds-language-selector-mobile').should('have.length', 1);
-    cy.get('dds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile').should('have.length', 1);
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find('select.bx--select-input')
+      .find('select.cds--select-input')
       .select('Arabic / عربية');
-    cy.get('dds-language-selector-mobile')
+    cy.get('c4d-language-selector-mobile')
       .shadow()
-      .find('select.bx--select-input')
+      .find('select.cds--select-input')
       .should('have.value', 'Arabic / عربية');
 
     cy.takeSnapshots('mobile');
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/leadspace/leadspace.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/leadspace/leadspace.e2e.js
index e2a1c0bb4d4..a984b6b46b9 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/leadspace/leadspace.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/leadspace/leadspace.e2e.js
@@ -86,7 +86,7 @@ const _pathSuper = '/iframe.html?id=components-lead-space--super';
 const _pathSuperWithImage = '/iframe.html?id=components-lead-space--super-with-image';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-leadspace | tall', () => {
+describe('cds-leadspace | tall', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -97,11 +97,11 @@ describe('dds-leadspace | tall', () => {
     cy.visit(`/${_pathTall}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-leadspace-heading').then($title => {
+    cy.get('cds-leadspace-heading').then($title => {
       expect($title[0].getBoundingClientRect().left).to.equal(16);
     });
 
-    cy.get('[data-autoid="dds--leadspace__desc"]').then($desc => {
+    cy.get('[data-autoid="cds--leadspace__desc"]').then($desc => {
       expect($desc[0].getBoundingClientRect().left).to.equal(16);
     });
   });
@@ -112,15 +112,15 @@ describe('dds-leadspace | tall', () => {
     );
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item:nth-child(1) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(1) svg path').then($icon => {
       expect($icon).to.have.attr('d', 'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z');
     });
 
-    cy.get('dds-button-group-item:nth-child(2) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(2) svg path').then($icon => {
       expect($icon).to.have.attr('d', 'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z');
     });
 
-    cy.get('dds-button-group-item:nth-child(3) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(3) svg path').then($icon => {
       expect($icon).to.have.attr(
         'd',
         'M30 11L30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11zM8 9H2V23H4V18H8a2 2 0 002-2V11A2 2 0 008 9zm0 7H4V11H8zM16 23H12V9h4a4 4 0 014 4v6A4 4 0 0116 23zm-2-2h2a2 2 0 002-2V13a2 2 0 00-2-2H14z'
@@ -134,16 +134,16 @@ describe('dds-leadspace | tall', () => {
     cy.visit(`/${_pathTall}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item').should('have.length', 2);
+    cy.get('cds-button-group-item').should('have.length', 2);
   });
 
   it('should load more than 2 buttons when customized and should all have links', () => {
     cy.visit(`/${_pathTall}&knob-Number%20of%20buttons=3`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item').should('have.length', 3);
+    cy.get('cds-button-group-item').should('have.length', 3);
 
-    cy.get('dds-button-group-item')
+    cy.get('cds-button-group-item')
       .shadow()
       .find('a')
       .each($link => {
@@ -156,7 +156,7 @@ describe('dds-leadspace | tall', () => {
     cy.visit(`/${_pathTall}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-background-media').should('not.exist');
+    cy.get('cds-background-media').should('not.exist');
   });
 
   it('should load correctly in all themes', () => {
@@ -167,7 +167,7 @@ describe('dds-leadspace | tall', () => {
   });
 });
 
-describe('dds-leadspace | tall with image', () => {
+describe('cds-leadspace | tall with image', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -180,8 +180,8 @@ describe('dds-leadspace | tall with image', () => {
 
     cy.wait(500);
 
-    cy.get('dds-background-media')
-      .find('dds-image-item')
+    cy.get('cds-background-media')
+      .find('cds-image-item')
       .should('have.attr', 'srcset');
 
     cy.takeSnapshots();
@@ -195,7 +195,7 @@ describe('dds-leadspace | tall with image', () => {
   });
 });
 
-describe('dds-leadspace | centered', () => {
+describe('cds-leadspace | centered', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -206,11 +206,11 @@ describe('dds-leadspace | centered', () => {
     cy.visit(`/${_pathCentered}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-leadspace-heading').then($title => {
+    cy.get('cds-leadspace-heading').then($title => {
       expect($title[0].getBoundingClientRect().left).to.equal(328);
     });
 
-    cy.get('[data-autoid="dds--leadspace__desc"]').then($desc => {
+    cy.get('[data-autoid="cds--leadspace__desc"]').then($desc => {
       expect($desc[0].getBoundingClientRect().left).to.equal(328);
     });
   });
@@ -219,14 +219,14 @@ describe('dds-leadspace | centered', () => {
     cy.visit(`/${_pathCentered}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item').should('have.length', 2);
+    cy.get('cds-button-group-item').should('have.length', 2);
   });
 
   it('should load buttons centered aligned', () => {
     cy.visit(`/${_pathCentered}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group').then($button => {
+    cy.get('cds-button-group').then($button => {
       expect($button[0].getBoundingClientRect().left).to.equal(344);
     });
   });
@@ -237,15 +237,15 @@ describe('dds-leadspace | centered', () => {
     );
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item:nth-child(1) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(1) svg path').then($icon => {
       expect($icon).to.have.attr('d', 'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z');
     });
 
-    cy.get('dds-button-group-item:nth-child(2) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(2) svg path').then($icon => {
       expect($icon).to.have.attr('d', 'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z');
     });
 
-    cy.get('dds-button-group-item:nth-child(3) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(3) svg path').then($icon => {
       expect($icon).to.have.attr(
         'd',
         'M30 11L30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11zM8 9H2V23H4V18H8a2 2 0 002-2V11A2 2 0 008 9zm0 7H4V11H8zM16 23H12V9h4a4 4 0 014 4v6A4 4 0 0116 23zm-2-2h2a2 2 0 002-2V13a2 2 0 00-2-2H14z'
@@ -263,7 +263,7 @@ describe('dds-leadspace | centered', () => {
   });
 });
 
-describe('dds-leadspace | centered with image', () => {
+describe('cds-leadspace | centered with image', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -276,8 +276,8 @@ describe('dds-leadspace | centered with image', () => {
 
     cy.wait(500);
 
-    cy.get('dds-background-media')
-      .find('dds-image-item')
+    cy.get('cds-background-media')
+      .find('cds-image-item')
       .should('have.attr', 'srcset');
 
     cy.takeSnapshots();
@@ -291,7 +291,7 @@ describe('dds-leadspace | centered with image', () => {
   });
 });
 
-describe('dds-leadspace | short', () => {
+describe('cds-leadspace | short', () => {
   it('should load correctly in all themes', () => {
     cy.visit(`/${_pathShort}`);
     cy.viewport(1280, 780);
@@ -300,7 +300,7 @@ describe('dds-leadspace | short', () => {
   });
 });
 
-describe('dds-leadspace | short with image', () => {
+describe('cds-leadspace | short with image', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -315,7 +315,7 @@ describe('dds-leadspace | short with image', () => {
   });
 });
 
-describe('dds-leadspace | medium', () => {
+describe('cds-leadspace | medium', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -330,7 +330,7 @@ describe('dds-leadspace | medium', () => {
   });
 });
 
-describe('dds-leadspace | medium with image', () => {
+describe('cds-leadspace | medium with image', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -345,7 +345,7 @@ describe('dds-leadspace | medium with image', () => {
   });
 });
 
-describe('dds-leadspace | super', () => {
+describe('cds-leadspace | super', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -356,11 +356,11 @@ describe('dds-leadspace | super', () => {
     cy.visit(`/${_pathSuper}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-leadspace-heading').then($title => {
+    cy.get('cds-leadspace-heading').then($title => {
       expect($title[0].getBoundingClientRect().left).to.equal(16);
     });
 
-    cy.get('[data-autoid="dds--leadspace__desc"]').then($desc => {
+    cy.get('[data-autoid="cds--leadspace__desc"]').then($desc => {
       expect($desc[0].getBoundingClientRect().left).to.equal(16);
     });
   });
@@ -369,7 +369,7 @@ describe('dds-leadspace | super', () => {
     cy.visit(`/${_pathSuper}`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item').should('have.length', 2);
+    cy.get('cds-button-group-item').should('have.length', 2);
   });
 
   it('should render 3 buttons with different icons (arrow right, left, and PDF)', () => {
@@ -378,15 +378,15 @@ describe('dds-leadspace | super', () => {
     );
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item:nth-child(1) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(1) svg path').then($icon => {
       expect($icon).to.have.attr('d', 'M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z');
     });
 
-    cy.get('dds-button-group-item:nth-child(2) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(2) svg path').then($icon => {
       expect($icon).to.have.attr('d', 'M24.59 16.59L17 24.17 17 4 15 4 15 24.17 7.41 16.59 6 18 16 28 26 18 24.59 16.59z');
     });
 
-    cy.get('dds-button-group-item:nth-child(3) svg path').then($icon => {
+    cy.get('cds-button-group-item:nth-child(3) svg path').then($icon => {
       expect($icon).to.have.attr(
         'd',
         'M30 11L30 9 22 9 22 23 24 23 24 17 29 17 29 15 24 15 24 11 30 11zM8 9H2V23H4V18H8a2 2 0 002-2V11A2 2 0 008 9zm0 7H4V11H8zM16 23H12V9h4a4 4 0 014 4v6A4 4 0 0116 23zm-2-2h2a2 2 0 002-2V13a2 2 0 00-2-2H14z'
@@ -400,9 +400,9 @@ describe('dds-leadspace | super', () => {
     cy.visit(`/${_pathSuper}&knob-Number%20of%20buttons=3`);
     cy.viewport(1280, 780);
 
-    cy.get('dds-button-group-item').should('have.length', 3);
+    cy.get('cds-button-group-item').should('have.length', 3);
 
-    cy.get('dds-button-group-item')
+    cy.get('cds-button-group-item')
       .shadow()
       .find('a')
       .each($link => {
@@ -419,7 +419,7 @@ describe('dds-leadspace | super', () => {
   });
 });
 
-describe('dds-leadspace | super with image', () => {
+describe('cds-leadspace | super with image', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathTall}`);
     cy.injectAxe();
@@ -432,11 +432,11 @@ describe('dds-leadspace | super with image', () => {
 
     cy.wait(500);
 
-    cy.get('dds-background-media')
-      .find('dds-image-item')
+    cy.get('cds-background-media')
+      .find('cds-image-item')
       .should('have.attr', 'srcset');
 
-    cy.get('dds-background-media').then($ele => {
+    cy.get('cds-background-media').then($ele => {
       expect($ele[0].offsetHeight).to.equal(640);
     });
 
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js
index 1569672b57e..8ee5be0df56 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js
@@ -6,7 +6,7 @@
  */
 
 /**
- * Sets the correct defaultPath for dds-lightbox-media-viewer
+ * Sets the correct defaultPath for cds-lightbox-media-viewer
  *
  * @type {string}
  * @private
@@ -19,7 +19,7 @@ const _args = {
   img16x9: '&knob-Image%20(default-src)=3a7714edad00ad8b4f6f19f94ab56dd1.jpg',
 };
 
-describe('dds-lightbox-media-viewer | default', () => {
+describe('cds-lightbox-media-viewer | default', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
     cy.visit(_defaultPath);
@@ -31,27 +31,27 @@ describe('dds-lightbox-media-viewer | default', () => {
   });
 
   it('should render with all elements', () => {
-    cy.get('dds-lightbox-media-viewer')
+    cy.get('cds-lightbox-media-viewer')
       .as('component')
       .should('have.attr', 'default-src')
       .should('not.be.empty');
 
     cy.get('@component')
-      .find('[data-autoid="dds--lightbox-media-viewer__content__title"]')
+      .find('[data-autoid="cds--lightbox-media-viewer__content__title"]')
       .should('not.be.empty')
       .get('@component')
-      .find('[data-autoid="dds--lightbox-media-viewer__content__desc"]')
+      .find('[data-autoid="cds--lightbox-media-viewer__content__desc"]')
       .should('not.be.empty');
 
     cy.takeSnapshots();
   });
 
   it('should align elements', () => {
-    cy.get('dds-lightbox-media-viewer .bx--image__img').then($image => {
+    cy.get('cds-lightbox-media-viewer .bx--image__img').then($image => {
       expect($image[0].getBoundingClientRect().left).to.equal(64);
     });
 
-    cy.get('dds-lightbox-media-viewer')
+    cy.get('cds-lightbox-media-viewer')
       .find('.bx--lightbox-media-viewer__content')
       .then($content => {
         expect($content[0].getBoundingClientRect().right).to.equal(1280 - 64);
@@ -86,7 +86,7 @@ describe('dds-lightbox-media-viewer | default', () => {
   });
 });
 
-describe('dds-lightbox-media-viewer | embedded video player', () => {
+describe('cds-lightbox-media-viewer | embedded video player', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
     cy.visit(`${_defaultPath}${_args.video}`);
@@ -98,31 +98,31 @@ describe('dds-lightbox-media-viewer | embedded video player', () => {
   });
 
   it('should render with all elements', () => {
-    cy.get('dds-lightbox-media-viewer')
+    cy.get('cds-lightbox-media-viewer')
       .as('component')
       .should('have.attr', 'video-id')
       .and('not.be.empty')
 
       .get('@component')
-      .find('[data-autoid="dds--video-player"]')
+      .find('[data-autoid="cds--video-player"]')
       .should('have.attr', 'video-id')
       .and('not.be.empty')
 
       .get('@component')
-      .find('[data-autoid="dds--lightbox-media-viewer__content__desc"]')
+      .find('[data-autoid="cds--lightbox-media-viewer__content__desc"]')
       .should('not.be.empty')
 
       .takeSnapshots();
   });
 
   it('should align elements correctly', () => {
-    cy.get('dds-lightbox-media-viewer')
+    cy.get('cds-lightbox-media-viewer')
       .find('.bx--video-player__video-container')
       .then($video => {
         expect($video[0].getBoundingClientRect().left).to.equal(64);
       });
 
-    cy.get('dds-lightbox-media-viewer')
+    cy.get('cds-lightbox-media-viewer')
       .find('.bx--lightbox-media-viewer__content')
       .then($content => {
         expect($content[0].getBoundingClientRect().right).to.equal(1280 - 64);
@@ -130,7 +130,7 @@ describe('dds-lightbox-media-viewer | embedded video player', () => {
   });
 
   it('should have interactive video controls', () => {
-    cy.get('dds-lightbox-media-viewer')
+    cy.get('cds-lightbox-media-viewer')
       .find('.bx--video-player__video-container')
       .find('.bx--video-player__image-overlay')
       .click()
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js
index d4ba4dd271e..c8cdd3e0313 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/default.e2e.js
@@ -30,8 +30,8 @@ const _tests = {
   checkComponentLoad: () => {
     cy.visit(`/${_path}`);
 
-    cy.get('dds-link-list').then(([list]) => {
-      const items = list.querySelectorAll('dds-link-list-item-card');
+    cy.get('cds-link-list').then(([list]) => {
+      const items = list.querySelectorAll('cds-link-list-item');
       items.forEach(item => {
         cy.get(item)
           .shadow()
@@ -59,7 +59,7 @@ const _tests = {
 
     cy.window()
       .then(win => (window = win))
-      .get('dds-link-list-item-card')
+      .get('cds-link-list-item')
       .each(([card], i) => {
         if (i !== 0) {
           const cardBox = card.getBoundingClientRect();
@@ -75,12 +75,12 @@ const _tests = {
   checkHoverState: () => {
     cy.visit(`/${_path}`);
 
-    cy.get('dds-link-list-item-card').then(([card]) => {
+    cy.get('cds-link-list-item').then(([card]) => {
       const sheets = card.shadowRoot.adoptedStyleSheets;
 
       if (sheets) {
         const hover = getCssPropertyForRule(
-          '.bx--card:hover, :host(dds-card:hover), :host(dds-link-list-item-card:hover), :host(dds-card-group-item:hover), :host(dds-card-group-item) .bx--card:hover, :host(dds-card-cta:hover), :host(dds-link-list-item-card-cta:hover), :host(dds-card-in-card:hover), :host(dds-content-group-cards-item:hover), :host(dds-content-group-cards-item) .bx--card:hover',
+          '.bx--card:hover, :host(cds-card:hover), :host(cds-card-group-item:hover), :host(cds-card-group-item) .bx--card:hover, :host(cds-card-cta:hover), :host(cds-card-in-card:hover), :host(cds-content-group-cards-item:hover), :host(cds-content-group-cards-item) .bx--card:hover',
           'background-color',
           sheets
         );
@@ -112,7 +112,7 @@ const _tests = {
   },
 };
 
-describe('dds-link-list | default (desktop)', () => {
+describe('cds-link-list | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
     cy.visit(`/${_path}`);
@@ -126,7 +126,7 @@ describe('dds-link-list | default (desktop)', () => {
   _tests.checkCTATypes();
 });
 
-describe('dds-link-list | default (mobile)', () => {
+describe('cds-link-list | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 780);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/end-of-section.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/end-of-section.e2e.js
index abb54aa1a69..822997f1206 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/end-of-section.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/end-of-section.e2e.js
@@ -32,8 +32,8 @@ const _tests = {
   checkComponentLoad: () => {
     cy.visit(`/${_path}`);
 
-    cy.get('dds-link-list').then(([list]) => {
-      const items = list.querySelectorAll('dds-link-list-item');
+    cy.get('cds-link-list').then(([list]) => {
+      const items = list.querySelectorAll('cds-link-list-item');
       items.forEach(item => {
         cy.get(item)
           .shadow()
@@ -61,7 +61,7 @@ const _tests = {
     let previous, window;
     cy.window()
       .then(win => (window = win))
-      .get('dds-link-list-item')
+      .get('cds-link-list-item')
       .each(([card], i) => {
         if (i !== 0) {
           const cardBox = card.getBoundingClientRect();
@@ -77,12 +77,12 @@ const _tests = {
   checkHoverState: () => {
     cy.visit(`/${_path}`);
 
-    cy.get('dds-link-list-item').then(([card]) => {
+    cy.get('cds-link-list-item').then(([card]) => {
       const sheets = card.shadowRoot.adoptedStyleSheets;
 
       if (sheets) {
         const hover = getCssPropertyForRule(
-          ':host(dds-link-list-item[type="end"]:hover) .bx--link, :host(dds-link-list-item-cta[type="end"]:hover) .bx--link',
+          ':host(cds-link-list-item[type="end"]:hover) .bx--link, :host(cds-link-list-item-cta[type="end"]:hover) .bx--link',
           'background',
           sheets
         );
@@ -114,7 +114,7 @@ const _tests = {
   },
 };
 
-describe('dds-link-list | default (desktop)', () => {
+describe('cds-link-list | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -126,7 +126,7 @@ describe('dds-link-list | default (desktop)', () => {
   _tests.checkCTATypes();
 });
 
-describe('dds-link-list | default (mobile)', () => {
+describe('cds-link-list | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 780);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js
index 610c0b6710e..2f43494b484 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/horizontal.e2e.js
@@ -31,8 +31,8 @@ const _tests = {
   checkComponentLoad: () => {
     cy.visit(`/${_path}`);
 
-    cy.get('dds-link-list').then(([list]) => {
-      const items = list.querySelectorAll('dds-link-list-item');
+    cy.get('cds-link-list').then(([list]) => {
+      const items = list.querySelectorAll('cds-link-list-item');
       items.forEach(item => {
         cy.get(item)
           .shadow()
@@ -60,7 +60,7 @@ const _tests = {
     let previous, window;
     cy.window()
       .then(win => (window = win))
-      .get('dds-link-list-item')
+      .get('cds-link-list-item')
       .each(([card], i) => {
         if (i !== 0) {
           const cardBox = card.getBoundingClientRect();
@@ -79,7 +79,7 @@ const _tests = {
     let previous, window;
     cy.window()
       .then(win => (window = win))
-      .get('dds-link-list-item')
+      .get('cds-link-list-item')
       .each(([card], i) => {
         if (i !== 0) {
           const cardBox = card.getBoundingClientRect();
@@ -115,7 +115,7 @@ const _tests = {
   },
 };
 
-describe('dds-link-list | default (desktop)', () => {
+describe('cds-link-list | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -126,7 +126,7 @@ describe('dds-link-list | default (desktop)', () => {
   _tests.checkCTATypes();
 });
 
-describe('dds-link-list | default (mobile)', () => {
+describe('cds-link-list | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 780);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js
index d3997c12b4c..61211c2bc40 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-list/vertical.e2e.js
@@ -30,8 +30,8 @@ const _tests = {
   checkComponentLoad: () => {
     cy.visit(`/${_path}`);
 
-    cy.get('dds-link-list').then(([list]) => {
-      const items = list.querySelectorAll('dds-link-list-item');
+    cy.get('cds-link-list').then(([list]) => {
+      const items = list.querySelectorAll('cds-link-list-item');
       items.forEach(item => {
         cy.get(item)
           .shadow()
@@ -60,7 +60,7 @@ const _tests = {
 
     cy.window()
       .then(win => (window = win))
-      .get('dds-link-list-item')
+      .get('cds-link-list-item')
       .each(([card], i) => {
         if (i !== 0) {
           const cardBox = card.getBoundingClientRect();
@@ -96,7 +96,7 @@ const _tests = {
   },
 };
 
-describe('dds-link-list | default (desktop)', () => {
+describe('cds-link-list | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -107,7 +107,7 @@ describe('dds-link-list | default (desktop)', () => {
   _tests.checkCTATypes();
 });
 
-describe('dds-link-list | default (mobile)', () => {
+describe('cds-link-list | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 780);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/link-with-icon/default.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/link-with-icon/default.e2e.js
index 11e68fa70d7..b8fcc74e0d0 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/link-with-icon/default.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/link-with-icon/default.e2e.js
@@ -21,7 +21,7 @@ const _path = '/iframe.html?id=components-link-with-icon--default';
  * @type {string}
  * @private
  */
-const _selector = '[data-autoid="dds--link-with-icon"]';
+const _selector = '[data-autoid="cds--link-with-icon"]';
 
 /**
  * Collection of test scenarios.
@@ -125,7 +125,7 @@ const _tests = [
   },
 ];
 
-describe('dds-link-with-icon | default (desktop)', () => {
+describe('cds-link-with-icon | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -133,7 +133,7 @@ describe('dds-link-with-icon | default (desktop)', () => {
   _tests.forEach(test => test());
 });
 
-describe('dds-link-with-icon | default (mobile)', () => {
+describe('cds-link-with-icon | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(375, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/locale-modal/locale-modal.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/locale-modal/locale-modal.e2e.js
index f95d71d845f..0cc0a4db88a 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/locale-modal/locale-modal.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/locale-modal/locale-modal.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -14,7 +14,7 @@
 const _path = '/iframe.html?id=components-locale-modal--default';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-locale-modal | default', () => {
+describe('c4d-locale-modal | default', () => {
   beforeEach(() => {
     cy.visit(`/${_path}`);
     cy.injectAxe();
@@ -26,22 +26,22 @@ describe('dds-locale-modal | default', () => {
   });
 
   it('should load with four regions', () => {
-    cy.get('dds-region-item').should('have.length', 4);
+    cy.get('c4d-region-item').should('have.length', 4);
 
-    cy.get('dds-region-item[name="Americas"]').should('be.visible');
-    cy.get('dds-region-item[name="Asia Pacific"]').should('be.visible');
-    cy.get('dds-region-item[name="Europe"]').should('be.visible');
-    cy.get('dds-region-item[name="Middle East and Africa"]').should('be.visible');
+    cy.get('c4d-region-item[name="Americas"]').should('be.visible');
+    cy.get('c4d-region-item[name="Asia Pacific"]').should('be.visible');
+    cy.get('c4d-region-item[name="Europe"]').should('be.visible');
+    cy.get('c4d-region-item[name="Middle East and Africa"]').should('be.visible');
 
     cy.screenshot();
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-locale-modal | all four regions loaded', {
+    cy.percySnapshot('c4d-locale-modal | all four regions loaded', {
       widths: [1280],
     });
   });
 
   it('should load the Americas region', () => {
-    cy.get('dds-region-item[name="Americas"]').click();
+    cy.get('c4d-region-item[name="Americas"]').click();
 
     cy.takeSnapshots();
   });
@@ -49,14 +49,14 @@ describe('dds-locale-modal | default', () => {
   it('should filter locales/languages', () => {
     cy.get('[name="Americas"]').click();
 
-    cy.get('dds-locale-search')
+    cy.get('c4d-locale-search')
       .shadow()
       .find('.bx--search-input')
       .type('ca', {
         force: true,
       });
 
-    cy.get('dds-locale-item:not([hidden])')
+    cy.get('c4d-locale-item:not([hidden])')
       .invoke('attr', 'country')
       .should('eq', 'Canada');
 
@@ -65,19 +65,20 @@ describe('dds-locale-modal | default', () => {
 
   it('should be able to go back to the region menu', () => {
     cy.get('[name="Americas"]').click();
-    cy.get('dds-regions').should('not.be.visible');
-    cy.get('dds-locale-modal')
+    cy.get('c4d-regions').should('not.be.visible');
+    cy.get('c4d-locale-modal')
       .shadow()
-      .find('dds-expressive-modal-heading dds-link-with-icon')
+      .find('c4d-expressive-modal-heading c4d-link-with-icon')
       .click();
-    cy.get('dds-regions').should('be.visible');
+    cy.get('c4d-regions').should('be.visible');
   });
 
   it('should have a clickable X icon and is able to close menu', () => {
     const closeButton = cy
-      .get('dds-locale-modal')
+      .get('c4d-locale-modal')
       .shadow()
-      .find('dds-expressive-modal-close-button')
+      .find('c4d-expressive-modal-close-button');
+    closeButton
       .shadow()
       .find('button');
     closeButton
@@ -88,7 +89,13 @@ describe('dds-locale-modal | default', () => {
           'M24 9.4L22.6 8 16 14.6 9.4 8 8 9.4 14.6 16 8 22.6 9.4 24 16 17.4 22.6 24 24 22.6 17.4 16 24 9.4z'
         );
       });
-    closeButton.click();
+
+    cy.get('dds-locale-modal')
+      .shadow()
+      .find('dds-expressive-modal-close-button')
+      .shadow()
+      .find('button')
+      .click();
 
     cy.takeSnapshots();
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/logo-grid/logo-grid.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/logo-grid/logo-grid.e2e.js
index a492d42efaa..c881194cd9e 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/logo-grid/logo-grid.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/logo-grid/logo-grid.e2e.js
@@ -23,7 +23,7 @@ const _pathWithCTA =
   '/iframe.html?id=components-logo-grid--default&knob-Heading%20(heading)=Our%20customers&knob-Display%20CTA:=true&knob-CTA%20Copy%20(ctaCopy)=Lorem%20ipsum%20dolor%20sit%20amet&knob-CTA%20Href%20(ctaHref):=http://local.url.com/';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-logo-grid | default', () => {
+describe('cds-logo-grid | default', () => {
   beforeEach(() => {
     cy.visit(`/${_defaultPath}`);
     cy.injectAxe();
@@ -35,8 +35,8 @@ describe('dds-logo-grid | default', () => {
   });
 
   it('should have page heading with different brand logos', () => {
-    cy.get('dds-logo-grid dds-content-block-heading').should('have.length', 1);
-    cy.get('dds-logo-grid-item').then($els => {
+    cy.get('cds-logo-grid cds-content-block-heading').should('have.length', 1);
+    cy.get('cds-logo-grid-item').then($els => {
       const logoItems = Array.from($els, el => el.defaultSrc);
       const equalLogos = logoItems.filter((item, i, ar) => ar.indexOf(item) != i);
 
@@ -50,10 +50,10 @@ describe('dds-logo-grid | default', () => {
   it('should have clickable CTA card link with heading', () => {
     cy.visit(`/${_pathWithCTA}`);
 
-    cy.get('dds-logo-grid-link').should('have.length', 1);
-    cy.get('dds-logo-grid-link dds-card-link-heading').should('have.length', 1);
+    cy.get('cds-logo-grid-link').should('have.length', 1);
+    cy.get('cds-logo-grid-link cds-card-link-heading').should('have.length', 1);
 
-    cy.get('dds-logo-grid-link dds-card-footer')
+    cy.get('cds-logo-grid-link cds-card-footer')
       .shadow()
       .find('a')
       .then($els => {
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/cloud/cloud-masthead.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/cloud/cloud-masthead.e2e.js
deleted file mode 100644
index 70f5d11b40b..00000000000
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/cloud/cloud-masthead.e2e.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/**
- * Copyright IBM Corp. 2021, 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.
- */
-
-/**
- * Sets the correct path (default Masthead)
- *
- * @type {string}
- * @private
- */
-const _pathDefault = '/iframe.html?id=experimental-cloud-masthead--default';
-
-function clickUntilGone($el) {
-  if ($el.is(':visible')) {
-    cy.get($el)
-      .click()
-      .wait(1000)
-      .then($clicked => {
-        if ($clicked.is(':visible')) {
-          clickUntilGone($clicked);
-        }
-      });
-  }
-}
-
-describe('dds-masthead | cloud platform (desktop)', () => {
-  beforeEach(() => {
-    cy.viewport(1280, 780);
-    cy.visit(`/${_pathDefault}`);
-    cy.wait(1000);
-  });
-
-  it('should have url for IBM logo', () => {
-    cy.get('dds-masthead-logo')
-      .shadow()
-      .find('a')
-      .then($link => {
-        const url = new URL($link.prop('href'));
-        expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
-        expect(url.pathname).to.be.equal('/');
-      });
-  });
-
-  it('should support custom url for IBM logo', () => {
-    cy.intercept(`https://1.www.s81c.com/common/carbon-for-ibm-dotcom/translations/cloud-masthead/*`, {
-      fixture: 'translation-custom-logo.json',
-    }).as('endpointInterceptor');
-
-    cy.get('dds-cloud-masthead-container')
-      .then(([masthead]) => {
-        // Clear session storage to ensure we make a fetch request.
-        window.sessionStorage.clear();
-        // Re-trigger fetch.
-        masthead.language = 'us-en';
-      })
-      .wait(1000)
-      .get('dds-masthead-logo')
-      .shadow()
-      .find('a')
-      .then($link => {
-        const url = $link.prop('href');
-        expect(url).to.eq('https://www.example.com/custom-href');
-      });
-  });
-
-  it('should have cloud platform name', () => {
-    cy.get('dds-cloud-top-nav-name')
-      .shadow()
-      .find('a')
-      .then($link => {
-        const url = new URL($link.prop('href'));
-        const [langOrCloud, cloudOrNull] = url.pathname.split('/').filter(segment => segment !== '');
-        expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
-        expect([langOrCloud, cloudOrNull]).to.include('cloud');
-      });
-  });
-
-  it('should load top-nav with no more than one active item', () => {
-    cy.get('dds-top-nav > *').then($topNavItems => {
-      const $activeItems = $topNavItems.filter('[active]');
-      expect($topNavItems.length).to.be.greaterThan(1);
-      expect($activeItems.length).to.be.equal(1);
-    });
-  });
-
-  it('should have tabbed-interface megamenus', () => {
-    cy.get('dds-top-nav > dds-megamenu-top-nav-menu').each($megaMenuNavItem => {
-      cy.get($megaMenuNavItem)
-        .shadow()
-        .find('a')
-        .click();
-      cy.get($megaMenuNavItem)
-        .find('dds-cloud-megamenu')
-        .should('be.visible')
-        .find('dds-cloud-megamenu-tab')
-        .each($tab => {
-          cy.get(`#${$tab.attr('id')}`)
-            .shadow()
-            .find('button')
-            .click({ force: true });
-          const panelSelector = `#${$tab.attr('target')}`;
-          cy.get(panelSelector)
-            .should('be.visible');
-        });
-    });
-  });
-
-  it('should have functioning search bar with typeahead', () => {
-    cy.get('.bx--header__search--search')
-      .click({ force: true })
-      .wait(1000)
-      .get('.bx--header__search--input')
-      .should('have.focus')
-      .type('test', { force: true })
-      .get('dds-search-with-typeahead-item')
-      .then($results => {
-        expect($results.length).to.be.equal(10);
-      })
-      .get('dds-megamenu-top-nav-menu, dds-top-nav-menu, dds-top-nav-menu-item')
-      .should('not.be.visible');
-  });
-
-  it('should have contact, login, and create-account CTAs', () => {
-    cy.get('dds-cloud-button-cta[data-ibm-contact="contact-link"]')
-      .should('be.visible')
-      .click({ force: true })
-      .get('dds-cloud-button-cta[href="https://cloud.ibm.com/login"]')
-      .should('be.visible')
-      .click({ force: true })
-      .get('dds-cloud-button-cta[kind="primary"]')
-      .should('be.visible')
-      .click({ force: true });
-  });
-
-  it('should be able to scroll all nav elements into view if necessary', () => {
-    cy.viewport(960, 780)
-      .get('dds-top-nav')
-      .shadow()
-      .find('button')
-      .should($buttons => {
-        expect($buttons).to.have.length(2);
-      })
-      .then($buttons => {
-        let navItem, prevOffsetLeft;
-        cy.get('.bx--header__nav')
-          .then($nav => {
-            navItem = $nav;
-            prevOffsetLeft = $nav.offset().left;
-          })
-          .get($buttons[0])
-          .click({ force: true })
-          .wait(1000)
-          .click({ force: true })
-          .wait(1000)
-          .then(() => {
-            expect(navItem.offset().left).to.be.gte(prevOffsetLeft);
-            prevOffsetLeft = navItem.offset().left;
-          })
-          .get($buttons[1])
-          .click({ force: true })
-          .wait(1000)
-          .click({ force: true })
-          .wait(1000)
-          .then(() => {
-            expect(navItem.offset().left).to.be.lte(prevOffsetLeft);
-            prevOffsetLeft = navItem.offset().left;
-          })
-          .get($buttons[0])
-          .click({ force: true })
-          .wait(1000)
-          .click({ force: true })
-          .wait(1000)
-          .then(() => {
-            expect(navItem.offset().left).to.be.gte(prevOffsetLeft);
-            prevOffsetLeft = navItem.offset().left;
-          });
-      });
-  });
-});
-
-describe('dds-masthead | cloud platform (mobile)', () => {
-  beforeEach(() => {
-    cy.viewport(325, 780);
-    cy.visit(`/${_pathDefault}`);
-  });
-
-  it('should have url for IBM logo', () => {
-    cy.get('dds-masthead-logo')
-      .shadow()
-      .find('a')
-      .then($link => {
-        const url = new URL($link.prop('href'));
-        expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
-        expect(url.pathname).to.be.equal('/');
-      });
-  });
-
-  it('should have cloud platform name', () => {
-    cy.get('dds-cloud-top-nav-name')
-      .shadow()
-      .find('a')
-      .then($link => {
-        const url = new URL($link.prop('href'));
-        const [langOrCloud, cloudOrNull] = url.pathname.split('/').filter(segment => segment !== '');
-        expect(['www.ibm.com', 'ibm.com']).to.include(url.host);
-        expect([langOrCloud, cloudOrNull]).to.include('cloud');
-      });
-  });
-
-  it('should load menu hidden behind hamburger button', () => {
-    cy.get('dds-top-nav')
-      .should('not.exist')
-      .get('dds-left-nav')
-      .should('not.be.visible')
-      .get('dds-masthead-menu-button')
-      .click()
-      .get('dds-left-nav')
-      .should('be.visible');
-  });
-
-  it('should load top-nav with no more than one active item', () => {
-    cy.get('dds-masthead-menu-button')
-      .click()
-      .get('dds-left-nav-menu-section[expanded] > *')
-      .then($topNavItems => {
-        const $activeItems = $topNavItems.filter('[active]');
-        expect($topNavItems.length).to.be.greaterThan(1);
-        expect($activeItems.length).to.be.equal(1);
-      });
-  });
-
-  it('should have paged slide-out navigation', () => {
-    cy.get('dds-masthead-menu-button')
-      .click()
-      .get('dds-left-nav-menu-section[expanded] > dds-left-nav-menu')
-      .each($submenuItem => {
-        const sectionSelector = `[section-id="${$submenuItem.attr('panel-id')}"]`;
-        const backSelector = cy
-          .get($submenuItem)
-          .click()
-          .get(sectionSelector)
-          .should('be.visible')
-          .shadow()
-          .find('.bx--masthead__side-nav--submemu-back button')
-          .click()
-          .get($submenuItem)
-          .should('be.visible');
-      });
-  });
-
-  it('should have functioning search bar with typeahead', () => {
-    cy.get('.bx--header__search--search')
-      .click({ force: true })
-      .wait(1000)
-      .get('.bx--header__search--input')
-      .should('have.focus')
-      .type('test', { force: true })
-      .get('dds-search-with-typeahead-item')
-      .then($results => {
-        expect($results.length).to.be.equal(10);
-      })
-      .get('dds-megamenu-top-nav-menu, dds-top-nav-menu, dds-top-nav-menu-item')
-      .should('not.exist');
-  });
-
-  it('should have contact, login, and create-account CTAs', () => {
-    cy.get('dds-masthead-menu-button')
-      .click()
-      .get('dds-cloud-left-nav-item[href="https://cloud.ibm.com/login"]')
-      .should('be.visible')
-      .get('dds-cloud-left-nav-item[href="https://cloud.ibm.com/registration"]')
-      .should('be.visible');
-  });
-});
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js
new file mode 100644
index 00000000000..88808f61294
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-authenticated.e2e.js
@@ -0,0 +1,51 @@
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+
+/**
+ * Sets the correct path (default Masthead)
+ *
+ * @type {string}
+ * @private
+ */
+const _pathDefault =
+  '/iframe.html?id=components-masthead--default&knob-use%20mock%20nav%20data%20(use-mock)=true&knob-The%20user%20authenticated%20status%20(user-status)=test.user@ibm.com';
+
+describe('dds-masthead | authenticated (desktop)', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 780).visit(`/${_pathDefault}`);
+  });
+
+  it('should open the login menu with 4 items', () => {
+    cy.get('dds-masthead-profile')
+      .shadow()
+      .find('a')
+      .click();
+    cy.get('dds-masthead-profile-item').should('have.length', 4);
+    cy.takeSnapshots();
+  });
+
+  it('should not render profile menu when disabled', () => {
+    cy.get('dds-masthead-composite').invoke('attr', 'has-profile', 'false');
+    cy.get('dds-masthead-profile').should('not.exist');
+    cy.takeSnapshots();
+  });
+});
+
+describe('dds-masthead | default (mobile)', () => {
+  beforeEach(() => {
+    cy.viewport(320, 780).visit(`/${_pathDefault}`);
+  });
+
+  it('should open the login menu with 4 items', () => {
+    cy.get('dds-masthead-profile')
+      .shadow()
+      .find('a')
+      .click();
+    cy.get('dds-masthead-profile-item').should('have.length', 4);
+    cy.takeSnapshots('mobile');
+  });
+});
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js
index 947ae373c3c..78e2fdcb022 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-custom-search.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -11,15 +11,16 @@
  * @type {string}
  * @private
  */
- const _pathCustomSearch = '/iframe.html?id=components-masthead--with-custom-typeahead';
+const _pathCustomSearch =
+  '/iframe.html?id=components-masthead--with-custom-typeahead&knob-use%20mock%20nav%20data%20(use-mock)=true';
 
-describe('dds-masthead | custom search (desktop)', () => {
+describe('cds-masthead | custom search (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathCustomSearch}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -27,7 +28,7 @@ describe('dds-masthead | custom search (desktop)', () => {
   });
 
   it('should open the search bar on click', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
@@ -35,41 +36,43 @@ describe('dds-masthead | custom search (desktop)', () => {
     cy.takeSnapshots();
   });
 
-  /** commenting out test until we can figure out why it keeps failing */
-  // it('should display grouped results with hrefs', () => {
-  //   // Mock grouped search typeahead API
-  //   cy.intercept('https://ibmdocs-dev.mybluemix.net/docs/api/v1/suggest?query=cloud&lang=undefined&categories=&limit=6', {
-  //     fixture: 'grouped-typeahead.json',
-  //   });
+  xit('should display grouped results with hrefs', () => {
+    // Mock grouped search typeahead API. Below we user the "cloud" search
+    // string. Every keypress will trigger an API request, so here we mock each
+    // successive cumulative search query.
+    [('c', 'cl', 'clo', 'clou', 'cloud')].forEach(query => {
+      cy.intercept(`https://ibmdocs-dev.dcs.ibm.com/docs/api/v1/suggest?query=${query}&lang=undefined&categories=&limit=6`, {
+        fixture: `grouped-typeahead-${query}.json`,
+      }).as(`grouped-typeahead-${query}`);
+    });
 
-  //   cy.get('dds-masthead > dds-search-with-typeahead')
-  //     .shadow()
-  //     .find('.bx--header__search--search')
-  //     .click();
+    cy.get('c4d-masthead > c4d-search-with-typeahead')
+      .shadow()
+      .find('.bx--header__search--search')
+      .click();
 
-  //   cy.get('dds-masthead > dds-search-with-typeahead')
-  //     .shadow()
-  //     .find('.react-autosuggest__container > input')
-  //     .type('cloud', { force: true });
+    cy.get('c4d-masthead > c4d-search-with-typeahead')
+      .shadow()
+      .find('.react-autosuggest__container > input')
+      .type('cloud', { force: true });
 
-  //   cy.get('dds-search-with-typeahead-item:not([groupTitle])').should('have.length', 12);
+    cy.get('c4d-search-with-typeahead-item:not([groupTitle])').should('have.length', 12);
 
-  //   const groupedItem = cy.get('dds-search-with-typeahead-item[groupTitle]');
-  //   groupedItem.then($item => {
-  //     expect($item).to.have.length(1);
-  //     expect($item.attr('text')).to.eq('Product pages');
-  //   });
+    cy.get('c4d-search-with-typeahead-item[groupTitle]').then($item => {
+      expect($item).to.have.length(1);
+      expect($item.attr('text')).to.eq('Product pages');
+    });
 
-  //   cy.get('dds-search-with-typeahead-item').each(($item, $index) => {
-  //     if ($index == 6) {
-  //       expect($item).to.have.attr('groupTitle');
-  //     } else if ($index > 6) {
-  //       expect($item).to.have.attr('href');
-  //     }
+    cy.get('c4d-search-with-typeahead-item').each(($item, $index) => {
+      if ($index === 6) {
+        expect($item).to.have.attr('groupTitle');
+      } else if ($index > 6) {
+        expect($item).to.have.attr('href');
+      }
 
-  //     expect($item).to.have.attr('text');
-  //   });
+      expect($item).to.have.attr('text');
+    });
 
-  //   cy.takeSnapshots();
-  // });
+    cy.takeSnapshots();
+  });
 });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js
new file mode 100644
index 00000000000..382016bc252
--- /dev/null
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-default.e2e.js
@@ -0,0 +1,437 @@
+/**
+ * Copyright IBM Corp. 2021, 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.
+ */
+
+/**
+ * The base path of the Story without any knob/control modifiers.
+ *
+ * @type {string}
+ * @private
+ */
+const _pathBase = '/iframe.html?id=components-masthead--default';
+
+/**
+ * The default path to use for this suite's tests.
+ *
+ * @type {string}
+ * @private
+ */
+const _pathDefault = `${_pathBase}&knob-use%20mock%20nav%20data%20(use-mock)=true`;
+
+/**
+ * Checks for the existence of specific attribute values for a given element.
+ *
+ * @param {HTMLElement} element The <a> or <button> element to check.
+ * @param {object} attributes An object containing the attributes & values to check.
+ */
+function checkAnalyticsAttributes(element, attributes) {
+  Object.entries(attributes).forEach(([attr, value]) => {
+    expect(element.hasAttribute(attr)).to.be.true;
+    expect(element.getAttribute(attr)).to.equal(value);
+  });
+}
+
+/**
+ * Verifies that the given customElementName is registered.
+ *
+ * @param {string} customElementName
+ *   The name of the custom element to check the registry for.
+ */
+function customElementIsRegistered(customElementName) {
+  cy.waitUntil(() => cy.window().then(window => window.customElements.get(customElementName) !== undefined), {
+    errorMsg: `${customElementName} is not registered`,
+  });
+}
+
+describe('dds-masthead | default (desktop)', () => {
+  beforeEach(() => {
+    cy.viewport(1280, 780)
+      .visit(`/${_pathDefault}`)
+      .injectAxe();
+  });
+
+  it('should check a11y', () => {
+    cy.checkAxeA11y();
+  });
+
+  it('should have url for IBM logo', () => {
+    cy.get('dds-masthead-logo')
+      .shadow()
+      .find('a')
+      .then($link => {
+        const url = $link.prop('href');
+        expect(url).not.to.be.empty;
+      });
+  });
+
+  it('should support custom url for IBM logo', () => {
+    cy.intercept(`https://1.www.s81c.com/common/carbon-for-ibm-dotcom/translations/masthead-footer/+(v2|v2.1)/*`, {
+      fixture: 'translation-custom-logo-v2.json',
+    }).as('endpointInterceptor');
+
+    // Visit version of masthead that receives endpoint data.
+    cy.visit(_pathBase)
+      .injectAxe();
+
+    cy.get('dds-masthead-container')
+      .then(([masthead]) => {
+        // Clear session storage to ensure we make a fetch request.
+        window.sessionStorage.clear();
+        // Re-trigger fetch.
+        masthead.language = 'us-en';
+      })
+      .wait(1000)
+      .get('dds-masthead-logo')
+      .shadow()
+      .find('a')
+      .then($link => {
+        const url = $link.prop('href');
+        expect(url).to.eq('https://www.example.com/custom-href');
+      });
+  });
+
+  it('should render at least 1 menu item', () => {
+    cy.get('dds-megamenu-top-nav-menu').should('have.length.greaterThan', 0);
+  });
+
+  it('should load the megamenus', () => {
+    cy.get('dds-megamenu-top-nav-menu').each($topItem => {
+      if (!Cypress.dom.isVisible($topItem)) {
+        cy.get('dds-top-nav')
+          .find('[part="next-button"]')
+          .click();
+      }
+      cy.get($topItem)
+        .shadow()
+        .find('a')
+        .click()
+        .takeSnapshots();
+    });
+  });
+
+  xit('should have urls for link elements', () => {
+    cy.get('dds-megamenu-top-nav-menu').each($topItem => {
+      if (!Cypress.dom.isVisible($topItem)) {
+        cy.get('dds-top-nav')
+          .find('[part="next-button"]')
+          .click();
+      }
+
+      cy.get($topItem)
+        .shadow()
+        .find('a')
+        .click();
+
+      cy.get('dds-megamenu-category-link, dds-megamenu-category-heading').each($linkItem => {
+        cy.get($linkItem)
+          .shadow()
+          .then(([shadowHost]) => {
+            const link = shadowHost.querySelector('a');
+            if (link) {
+              expect(link.href.trim()).not.to.be.empty;
+            }
+          });
+      });
+    });
+  });
+
+  it('should open the login menu with 2 items', () => {
+    cy.get('dds-masthead-profile')
+      .shadow()
+      .find('a')
+      .click()
+
+      .get('dds-masthead-profile-item')
+      .should('have.length', 2);
+
+    cy.takeSnapshots();
+  });
+
+  it('should open the search bar on click', () => {
+    cy.get('dds-masthead > dds-search-with-typeahead')
+      .shadow()
+      .find('.bx--header__search--search')
+      .click();
+
+    cy.takeSnapshots();
+  });
+
+  it('should allow keywords in the search bar and display 10 suggested results', () => {
+    cy.get('dds-masthead > dds-search-with-typeahead')
+      .shadow()
+      .find('.bx--header__search--search')
+      .click();
+
+    cy.get('dds-masthead > dds-search-with-typeahead')
+      .shadow()
+      .find('.react-autosuggest__container > input')
+      .type('redhat', { force: true });
+
+    cy.get('dds-search-with-typeahead-item').should('have.length', 10);
+
+    cy.takeSnapshots();
+  });
+
+  xit('should load analyics attributes throughout menu', () => {
+    cy.get('dds-megamenu-top-nav-menu').each(item => {
+      if (!Cypress.dom.isVisible(item)) {
+        cy.get('dds-top-nav')
+          .find('[part="next-button"]')
+          .click();
+      }
+
+      cy.get(item)
+        .shadow()
+        .find('a')
+        .then(([link]) => {
+          checkAnalyticsAttributes(link, {
+            'data-attribute1': 'headerNav',
+            'data-attribute2': 'L0',
+            'data-attribute3': item.attr('menu-label'),
+          });
+        })
+        .click();
+
+      cy.get('dds-megamenu-tab, dds-megamenu-category-heading[href^="http"]').each(item => {
+        cy.get(item)
+          .shadow()
+          .find('button, a')
+          .then(([button]) => {
+            const isTab = button.matches('button');
+            checkAnalyticsAttributes(button, {
+              'data-attribute1': 'headerNav',
+              'data-attribute2': isTab ? 'TabHdline' : 'FlatHdline',
+              'data-attribute3': isTab ? item.attr('value') : item.attr('title'),
+            });
+          });
+      });
+
+      cy.get('dds-megamenu-category-link').each(item => {
+        cy.get(item)
+          .shadow()
+          .find('a')
+          .then(([link]) => {
+            checkAnalyticsAttributes(link, {
+              'data-attribute1': 'headerNav',
+              'data-attribute2': 'FlatItem',
+              'data-attribute3': item.attr('title'),
+            });
+          });
+      });
+    });
+  });
+});
+
+describe('dds-masthead | default (mobile)', () => {
+  beforeEach(() => {
+    cy.viewport(320, 780)
+      .visit(`/${_pathDefault}`)
+      .injectAxe();
+  });
+
+  it('should check a11y', () => {
+    cy.checkAxeA11y();
+  });
+
+  it('should load the mobile menu', () => {
+    cy.get('dds-masthead-menu-button')
+      .shadow()
+      .find('button')
+      .click();
+
+    cy.takeSnapshots('mobile');
+  });
+
+  it('should load the mobile menu | level 2', () => {
+    cy.get('dds-masthead-menu-button')
+      .shadow()
+      .find('button')
+      .click();
+
+    cy.get('dds-left-nav-menu-section:nth-child(1) > dds-left-nav-menu:nth-child(1)')
+      .shadow()
+      .find('button')
+      .click();
+
+    cy.takeSnapshots('mobile');
+  });
+
+  it('should load the mobile menu | level 3', () => {
+    cy.get('dds-masthead-menu-button')
+      .shadow()
+      .find('button')
+      .click();
+
+
+    cy.get('dds-left-nav-menu')
+      .filter(':visible')
+      .first()
+      .shadow()
+      .find('button')
+      .click();
+
+    cy.takeSnapshots('mobile');
+  });
+
+  xit('should load analytics attributes throughout menu', () => {
+    cy.get('dds-masthead-menu-button')
+      .shadow()
+      .find('button')
+      .click();
+
+    // Excludes dds-left-nav-menu-item
+    cy.get('dds-left-nav-menu').each($menu => {
+      cy.get($menu)
+        .shadow()
+        .find('button')
+        .then(([button]) => {
+          // Top-level items
+          if (!$menu.get(0).parentElement.hasAttribute('is-submenu')) {
+            checkAnalyticsAttributes(button, {
+              'data-attribute1': 'headerNav',
+              'data-attribute2': 'L0',
+              'data-attribute3': $menu.attr('title'),
+            });
+          }
+
+          // Secondary-level items
+          else {
+            checkAnalyticsAttributes(button, {
+              'data-attribute1': 'headerNav',
+              'data-attribute2': 'TabHdline',
+              'data-attribute3': $menu.attr('title'),
+            });
+          }
+        });
+    });
+
+    cy.get('dds-left-nav-menu-category-heading[url^="http"]').each($heading => {
+      cy.get($heading)
+        .shadow()
+        .find('a')
+        .then(([link]) => {
+          checkAnalyticsAttributes(link, {
+            'data-attribute1': 'headerNav',
+            'data-attribute2': 'FlatHdline',
+            'data-attribute3': $heading.attr('title'),
+          });
+        });
+    });
+
+    cy.get('dds-left-nav-menu-item[href^="http"]').each($item => {
+      cy.get($item)
+        .shadow()
+        .find('a')
+        .then(([link]) => {
+          checkAnalyticsAttributes(link, {
+            'data-attribute1': 'headerNav',
+            'data-attribute2': 'FlatItem',
+            'data-attribute3': $item.attr('title'),
+          });
+        });
+    });
+  });
+});
+
+describe('dds-masthead | performance optimizations', () => {
+  it('should only render either top nav or left nav (dom pruning)', () => {
+    cy.viewport(1280, 780).visit(`/${_pathDefault}`);
+
+    cy.get('dds-top-nav');
+    cy.get('dds-left-nav').should('not.exist');
+    cy.get('dds-left-nav-overlay').should('not.exist');
+    cy.get('dds-masthead-menu-button').should('not.exist');
+
+    cy.viewport(780, 1280);
+
+    cy.get('dds-top-nav').should('not.exist');
+    cy.get('dds-left-nav');
+    cy.get('dds-left-nav-overlay');
+    cy.get('dds-masthead-menu-button');
+  });
+
+  it('should lazy load the mega menu', () => {
+    cy.viewport(1280, 780).visit(`/${_pathDefault}`)
+      .get('dds-megamenu-top-nav-menu')
+      .then(() => {
+        // Mega menu not opened yet, assert that none of the lazy loaded elements
+        // are registered.
+        [
+          'dds-megamenu-left-navigation',
+          'dds-megamenu-category-link',
+          'dds-megamenu-category-link-group',
+          'dds-megamenu-category-group',
+          'dds-megamenu-category-group-copy',
+          'dds-megamenu-category-heading',
+          'dds-megamenu-link-with-icon',
+          'dds-megamenu-overlay',
+          'dds-megamenu-tab',
+          'dds-megamenu-tabs',
+        ].forEach(elemName => {
+          const elem = window.customElements.get(elemName);
+          expect(elem).to.be.undefined;
+        });
+      })
+
+    // Open up the first mega menu.
+    .get('dds-megamenu-top-nav-menu')
+      .first()
+      .shadow()
+      .find('a')
+      .click()
+      .then(() => {
+        // Mega menu opened! Assert that all the lazy loaded elements have been
+        // loaded and registered.
+        [
+          'dds-megamenu-left-navigation',
+          'dds-megamenu-category-link',
+          'dds-megamenu-category-group',
+          'dds-megamenu-category-heading',
+          'dds-megamenu-link-with-icon',
+          'dds-megamenu-overlay',
+          'dds-megamenu-tab',
+          'dds-megamenu-tabs',
+        ].forEach(customElementIsRegistered);
+      })
+  });
+
+  it('should lazy load the left nav menu', () => {
+    cy.viewport(320, 780).visit(`/${_pathDefault}`);
+
+    // Left nav not opened yet, assert that none of the lazy loaded elements
+    // are registered.
+    [
+      'dds-left-nav-cta-item',
+      'dds-left-nav-name',
+      'dds-left-nav-menu',
+      'dds-left-nav-menu-section',
+      'dds-left-nav-menu-item',
+      'dds-left-nav-menu-category-heading',
+      'dds-left-nav-overlay',
+    ].forEach(elemName => {
+      const elem = window.customElements.get(elemName);
+      expect(elem).to.be.undefined;
+    });
+
+    // Open up the left nav.
+    cy.get('dds-masthead-menu-button')
+      .shadow()
+      .find('button')
+      .click();
+
+    // Left nav opened! Assert that all the lazy loaded elements have been
+    // loaded and registered.
+    [
+      'dds-left-nav-cta-item',
+      'dds-left-nav-name',
+      'dds-left-nav-menu',
+      'dds-left-nav-menu-section',
+      'dds-left-nav-menu-item',
+      'dds-left-nav-menu-category-heading',
+      'dds-left-nav-overlay',
+    ].forEach(customElementIsRegistered);
+  });
+});
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js
index f3af7b428e1..0d56ce05fb1 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-l1.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -11,15 +11,32 @@
  * @type {string}
  * @private
  */
-const _pathl1 = '/iframe.html?id=components-masthead--with-l-1';
+const _pathl1 = '/iframe.html?id=components-masthead--with-l-1&knob-use%20mock%20nav%20data%20(use-mock)=true';
 
-describe('dds-masthead | with L1 (desktop)', () => {
+/**
+ * Selectors for elements that comprise the L1.
+ */
+const _selectors = {
+  l1: 'c4d-masthead-l1',
+  l1Name: '.cds--masthead__l1-title',
+  l1Login: '.cds--masthead__l1-login',
+  l1Cta: '.cds--masthead__l1-login',
+  l1Menu: '.cds--masthead__l1-menu',
+  l1Item: '.cds--masthead__l1-item',
+  l1Dropdown: '.cds--masthead__l1-dropdown',
+  l1DropdownAnnouncement: '.cds--masthead__l1-dropdown-announcement',
+  l1DropdownLinks: '.cds--masthead__l1-dropdown-links',
+  l1DropdownSection: '.cds--masthead__l1-dropdown-section',
+  l1DropdownViewAll: '.cds--masthead__l1-dropdown-viewall',
+};
+
+describe('cds-masthead | with L1 (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathl1}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('dds-top-nav-l1').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('cds-top-nav-l1').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -27,17 +44,16 @@ describe('dds-masthead | with L1 (desktop)', () => {
   });
 
   it('should render platform below the IBM logo', () => {
-    cy.get('dds-masthead-l1-name').then($platform => {
-      cy.get('dds-masthead-logo').then($logo => {
+    cy.get(_selectors.l1).shadow().find(_selectors.l1Name).then($platform => {
+      cy.get('c4d-masthead-logo').then($logo => {
         expect($logo[0].getBoundingClientRect().down).to.equal($platform[0].getBoundingClientRect().up);
       });
     });
   });
 
   it('should render and have url for L1 platform', () => {
-    cy.get('dds-masthead-l1-name')
-      .shadow()
-      .find('a')
+    cy.get(_selectors.l1)
+      .find(`a${_selectors.l1Name}`)
       .then($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
@@ -46,61 +62,125 @@ describe('dds-masthead | with L1 (desktop)', () => {
     cy.takeSnapshots();
   });
 
-  it('should load l1 menu item with selected state', () => {
-    cy.get('dds-top-nav-l1 > *:nth-child(1)').then($menuItem => {
-      expect($menuItem).to.have.attr('active');
-    });
-
-    cy.takeSnapshots();
+  it('should render menu items', () => {
+    cy.get(_selectors.l1).shadow().find(_selectors.l1Item).should('exist');
   });
 
-  it('should render 5 menu items', () => {
-    cy.get('dds-top-nav-l1 > * ').should('have.length', 5);
+  it('should open dropdowns', () => {
+    cy.get(_selectors.l1).shadow().find(`${_selectors.l1Item}`).first().as('l1Item').click();
+
+    cy.get('@l1Item')
+      .next(_selectors.l1Dropdown)
+      .should('be.visible');
+
+    cy.takeSnapshots();
   });
 
-  it('should load the l1 - first nav item', () => {
-    cy.get('dds-top-nav-l1 > *:nth-child(1)')
+  it('should support basic link items', () => {
+    cy.get(_selectors.l1)
       .shadow()
-      .find('a')
-      .then($link => {
+      .find(`a${_selectors.l1Item}`)
+      .each($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
       });
   });
 
-  it('should load the l1 - second nav item', () => {
-    cy.get('dds-top-nav-l1 > *:nth-child(2)')
-      .shadow()
-      .find('a')
+  it('should support announcements in dropdowns', () => {
+    cy.get(_selectors.l1).shadow().find(_selectors.l1Item).eq(1).as('l1Item').click();
+
+    cy.get('@l1Item')
+      .next(_selectors.l1Dropdown)
+      .find(_selectors.l1DropdownAnnouncement)
+      .should('be.visible');
+  });
+
+  it('should support view all links in dropdowns', () => {
+    cy.get(_selectors.l1).shadow().find(_selectors.l1Item).eq(1).as('l1Item').click();
+
+    cy.get('@l1Item')
+      .next(_selectors.l1Dropdown)
+      .find(_selectors.l1DropdownViewAll)
+      .should('be.visible')
       .then($link => {
         const url = $link.prop('href');
         expect(url).not.to.be.empty;
       });
   });
 
-  it('should load and have url for third l1 item', () => {
-    cy.get('dds-top-nav-l1 > *:nth-child(3)')
+  // @TODO: re-enable once :has selector use is replaced
+  it.skip('should support two column dropdowns', () => {
+    cy.get(_selectors.l1)
       .shadow()
-      .find('a')
-      .then($link => {
-        const url = $link.prop('href');
-        expect(url).not.to.be.empty;
+      .find(_selectors.l1Item)
+      .eq(1)
+      .click()
+      .next(_selectors.l1Dropdown)
+      .find(_selectors.l1DropdownSection)
+      .then(sections => {
+        const first = sections.get(0).getBoundingClientRect().left;
+        const second = sections.get(1).getBoundingClientRect().left;
+
+        expect(first).to.be.lessThan(second);
       });
   });
 
-  it('should load the l1 - fourth nav item', () => {
-    cy.get('dds-top-nav-l1 > *:nth-child(4)')
+  // @TODO: re-enable once :has selector use is replaced
+  it.skip('should support asymmetrical two column dropdowns', () => {
+    cy.get(_selectors.l1)
+      .shadow()
+      .find(_selectors.l1Item)
+      .eq(3)
       .click()
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('expanded');
+      .next(_selectors.l1Dropdown)
+      .find(`${_selectors.l1DropdownLinks} > *`)
+      .then(columns => {
+        const narrow = columns.filter('.cds--masthead__l1-dropdown-column-narrow').get(0).getBoundingClientRect().width;
+        const wide = columns.filter('.cds--masthead__l1-dropdown-column-wide').get(0).getBoundingClientRect().width;
+
+        expect(narrow).to.be.lessThan(wide);
       });
   });
 
-  it('should load and have url for fifth l1 item', () => {
-    cy.get('dds-top-nav-l1 > *:nth-child(5)')
+  // @TODO: re-enable once :has selector use is replaced
+  it.skip('should support three column dropdowns', () => {
+    cy.get(_selectors.l1)
+      .shadow()
+      .find(_selectors.l1Item)
+      .eq(2)
       .click()
-      .then($menuItem => {
-        expect($menuItem).to.have.attr('expanded');
+      .next(_selectors.l1Dropdown)
+      .find(_selectors.l1DropdownSection)
+      .then(sections => {
+        const first = sections.get(0).getBoundingClientRect().left;
+        const second = sections.get(1).getBoundingClientRect().left;
+        const third = sections.get(2).getBoundingClientRect().left;
+
+        expect(first).to.be.lessThan(second);
+        expect(second).to.be.lessThan(third);
       });
   });
+
+  it('should render a single login link', () => {
+    cy.get(_selectors.l1)
+      .shadow()
+      .find(_selectors.l1Login)
+      .should('have.length', 1)
+      .then($link => {
+        const url = $link.prop('href');
+        expect(url).not.to.be.empty;
+      })
+  });
+
+  it('should render a single CTA link', () => {
+    cy.get(_selectors.l1)
+      .shadow()
+      .find(_selectors.l1Cta)
+      .should('have.length', 1)
+      .then($link => {
+        const url = $link.prop('href');
+        expect(url).not.to.be.empty;
+      })
+  });
+
 });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js
index 9736659b038..95e60c70dc0 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-platform.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -11,9 +11,9 @@
  * @type {string}
  * @private
  */
-const _pathPlatform = '/iframe.html?id=components-masthead--with-platform';
+const _pathPlatform = '/iframe.html?id=components-masthead--with-platform&knob-use%20mock%20nav%20data%20(use-mock)=true';
 
-describe('dds-masthead | with platform (desktop)', () => {
+describe('cds-masthead | with platform (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathPlatform}`);
     cy.injectAxe();
@@ -25,7 +25,7 @@ describe('dds-masthead | with platform (desktop)', () => {
   });
 
   it('should load platform containing a link', () => {
-    cy.get('dds-masthead > dds-top-nav-name')
+    cy.get('cds-masthead > cds-top-nav-name')
       .shadow()
       .find('a')
       .then($link => {
@@ -35,17 +35,17 @@ describe('dds-masthead | with platform (desktop)', () => {
   });
 
   it('should render platform next to IBM logo', () => {
-    cy.get('dds-masthead > dds-top-nav-name').then($platform => {
-      cy.get('dds-masthead > dds-masthead-logo').then($logo => {
+    cy.get('cds-masthead > cds-top-nav-name').then($platform => {
+      cy.get('cds-masthead > cds-masthead-logo').then($logo => {
         expect($logo[0].getBoundingClientRect().right).to.equal($platform[0].getBoundingClientRect().left);
       });
     });
   });
 
   it('should open the search bar with platform', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
-      .find('.bx--header__search--search')
+      .find('[part="open-button"]')
       .click();
 
     cy.takeSnapshots();
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js
index a8b7f98f389..96582b742be 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-scoped-search.e2e.js
@@ -13,13 +13,13 @@
  */
 const _pathScopedSearch = '/iframe.html?id=components-masthead--with-scoped-search';
 
-describe('dds-masthead | scoped search (desktop)', () => {
+describe('cds-masthead | scoped search (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathScopedSearch}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -27,7 +27,7 @@ describe('dds-masthead | scoped search (desktop)', () => {
   });
 
   it('should open the search bar on click', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
@@ -36,19 +36,19 @@ describe('dds-masthead | scoped search (desktop)', () => {
   });
 
   it('should retrieve regular results with "all" scope', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
 
-    cy.get('dds-scoped-search-dropdown').should('have.value', 'all');
+    cy.get('cds-scoped-search-dropdown').should('have.value', 'all');
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
       .type('cloud', { force: true });
 
-    cy.get('dds-search-with-typeahead-item').should('have.length', 10);
+    cy.get('cds-search-with-typeahead-item').should('have.length', 10);
 
     cy.takeSnapshots();
   });
@@ -59,42 +59,42 @@ describe('dds-masthead | scoped search (desktop)', () => {
       fixture: 'scoped-typeahead.json',
     });
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
 
-    cy.get('dds-scoped-search-dropdown')
+    cy.get('cds-scoped-search-dropdown')
       .shadow()
       .find('.bx--dropdown')
       .click();
 
-    cy.get('dds-scoped-search-dropdown')
+    cy.get('cds-scoped-search-dropdown')
       .find(`bx-dropdown-item[value="pw"]`)
       .click();
 
-    cy.get('dds-scoped-search-dropdown').should('have.value', 'pw');
+    cy.get('cds-scoped-search-dropdown').should('have.value', 'pw');
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
       .type('cloud', { force: true });
 
-    cy.get('dds-search-with-typeahead-item').should('have.length', 5);
+    cy.get('cds-search-with-typeahead-item').should('have.length', 5);
     cy.takeSnapshots();
   });
 });
 
-describe('dds-masthead | scoped search (mobile)', () => {
+describe('cds-masthead | scoped search (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathScopedSearch}`);
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty'));
   });
 
   it('should open the search bar on click', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
@@ -103,19 +103,19 @@ describe('dds-masthead | scoped search (mobile)', () => {
   });
 
   it('should retrieve regular results with "all" scope', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
 
-    cy.get('dds-scoped-search-dropdown-mobile').should('have.value', 'all');
+    cy.get('cds-scoped-search-dropdown-mobile').should('have.value', 'all');
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
       .type('cloud', { force: true });
 
-    cy.get('dds-search-with-typeahead-item').should('have.length', 10);
+    cy.get('cds-search-with-typeahead-item').should('have.length', 10);
 
     cy.takeSnapshots();
   });
@@ -126,23 +126,23 @@ describe('dds-masthead | scoped search (mobile)', () => {
       fixture: 'scoped-typeahead.json',
     });
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
 
-    cy.get('dds-scoped-search-dropdown-mobile')
+    cy.get('cds-scoped-search-dropdown-mobile')
       .shadow()
       .find('.bx--select-input')
       .select('pw');
-    cy.get('dds-scoped-search-dropdown-mobile').should('have.value', 'pw');
+    cy.get('cds-scoped-search-dropdown-mobile').should('have.value', 'pw');
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
       .type('cloud', { force: true });
 
-    cy.get('dds-search-with-typeahead-item').should('have.length', 5);
+    cy.get('cds-search-with-typeahead-item').should('have.length', 5);
     cy.takeSnapshots();
   });
 });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js
index 90079c3d010..12abc66f7b8 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead-search-onload.e2e.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2021, 2022
+ * Copyright IBM Corp. 2021, 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.
@@ -11,9 +11,10 @@
  * @type {string}
  * @private
  */
-const _pathSearchOpenOnload = '/iframe.html?id=components-masthead--search-open-onload';
+const _pathSearchOpenOnload =
+  '/iframe.html?id=components-masthead--search-open-onload&knob-use%20mock%20nav%20data%20(use-mock)=true';
 
-describe('dds-masthead | search open onload (desktop)', () => {
+describe('cds-masthead | search open onload (desktop)', () => {
   beforeEach(() => {
     // TODO: fix the uncaught exception in Firefox only
     cy.on('uncaught:exception', (err, runnable) => {
@@ -26,7 +27,7 @@ describe('dds-masthead | search open onload (desktop)', () => {
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -34,7 +35,7 @@ describe('dds-masthead | search open onload (desktop)', () => {
   });
 
   it('should load search field open by default', () => {
-    cy.get('dds-search-with-typeahead')
+    cy.get('cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
       .should('be.visible');
@@ -43,7 +44,7 @@ describe('dds-masthead | search open onload (desktop)', () => {
   });
 
   it('should have typable search field', () => {
-    cy.get('dds-search-with-typeahead')
+    cy.get('cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
       .type('test')
@@ -51,17 +52,17 @@ describe('dds-masthead | search open onload (desktop)', () => {
   });
 
   it('should display 10 auto suggest results', () => {
-    cy.get('dds-search-with-typeahead')
+    cy.get('cds-search-with-typeahead')
       .shadow()
       .find('input[type="text"]')
-      .type('test')
-      .get('dds-search-with-typeahead-item')
-      .should('have.length', 10);
+      .type('test');
+
+    cy.get('c4d-search-with-typeahead-item').should('have.length', 10);
 
     cy.takeSnapshots();
   });
 
   it('should not display menu options while search field is open', () => {
-    cy.get('dds-top-nav').should('have.attr', 'hidenav');
+    cy.get('cds-top-nav').should('have.attr', 'hidenav');
   });
 });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js
index fb5e3e5ee0c..c6933d1fdc0 100755
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/masthead/masthead.e2e.js
@@ -13,13 +13,13 @@
  */
 const _pathDefault = '/iframe.html?id=components-masthead--default';
 
-describe('dds-masthead | default (desktop)', () => {
+describe('cds-masthead | default (desktop)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.injectAxe();
     cy.viewport(1280, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -27,7 +27,7 @@ describe('dds-masthead | default (desktop)', () => {
   });
 
   it('should have url for IBM logo', () => {
-    cy.get('dds-masthead-logo')
+    cy.get('cds-masthead-logo')
       .shadow()
       .find('a')
       .then($link => {
@@ -38,7 +38,7 @@ describe('dds-masthead | default (desktop)', () => {
 
   it('should load menu item with selected state', () => {
     let selectedState = false;
-    cy.get('dds-megamenu-top-nav-menu')
+    cy.get('cds-megamenu-top-nav-menu')
       .each($menuItem => {
         if ($menuItem.attr('active') !== undefined) {
           selectedState = true;
@@ -52,7 +52,7 @@ describe('dds-masthead | default (desktop)', () => {
   });
 
   it('should load a megamenu with links', () => {
-    cy.get('dds-megamenu-top-nav-menu:nth-child(2)')
+    cy.get('cds-megamenu-top-nav-menu:nth-child(2)')
       .shadow()
       .find('a')
       .click();
@@ -63,13 +63,13 @@ describe('dds-masthead | default (desktop)', () => {
   it('should have urls for the submenu items within the megamenu', () => {
     // Click to open the megamenu that we're interested in inspecting, since
     // due to lazy loading, it's not in the DOM by default.
-    cy.get('dds-megamenu-top-nav-menu:nth-child(2)')
+    cy.get('cds-megamenu-top-nav-menu:nth-child(2)')
       .shadow()
       .find('[part=trigger]')
       .click();
 
     cy.get(
-      'dds-megamenu-top-nav-menu:nth-child(2) > dds-megamenu >  dds-megamenu-right-navigation >  dds-megamenu-category-group > dds-megamenu-category-link:nth-child(1)'
+      'cds-megamenu-top-nav-menu:nth-child(2) > cds-megamenu >  cds-megamenu-right-navigation >  cds-megamenu-category-group > cds-megamenu-category-link:nth-child(1)'
     )
       .shadow()
       .find('a')
@@ -80,7 +80,7 @@ describe('dds-masthead | default (desktop)', () => {
   });
 
   it('should open the login menu', () => {
-    cy.get('dds-masthead-profile')
+    cy.get('cds-masthead-profile')
       .shadow()
       .find('a')
       .click();
@@ -89,11 +89,11 @@ describe('dds-masthead | default (desktop)', () => {
   });
 
   it('should have 2 menu items under the login menu', () => {
-    cy.get('dds-masthead-profile-item').should('have.length', 2);
+    cy.get('cds-masthead-profile-item').should('have.length', 2);
   });
 
   it('should open the search bar on click', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
@@ -102,29 +102,29 @@ describe('dds-masthead | default (desktop)', () => {
   });
 
   it('should allow keywords in the search bar and display 10 suggested results', () => {
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.bx--header__search--search')
       .click();
 
-    cy.get('dds-masthead > dds-search-with-typeahead')
+    cy.get('cds-masthead > cds-search-with-typeahead')
       .shadow()
       .find('.react-autosuggest__container > input')
       .type('redhat', { force: true });
 
-    cy.get('dds-search-with-typeahead-item').should('have.length', 10);
+    cy.get('cds-search-with-typeahead-item').should('have.length', 10);
 
     cy.takeSnapshots();
   });
 });
 
-describe('dds-masthead | default (mobile)', () => {
+describe('cds-masthead | default (mobile)', () => {
   beforeEach(() => {
     cy.visit(`/${_pathDefault}`);
     cy.injectAxe();
     cy.viewport(320, 780);
 
-    cy.waitUntil(() => cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty'));
+    cy.waitUntil(() => cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty'));
   });
 
   it('should check a11y', () => {
@@ -132,7 +132,7 @@ describe('dds-masthead | default (mobile)', () => {
   });
 
   it('should load the mobile menu', () => {
-    cy.get('dds-masthead-menu-button')
+    cy.get('cds-masthead-menu-button')
       .shadow()
       .find('button')
       .click();
@@ -141,12 +141,12 @@ describe('dds-masthead | default (mobile)', () => {
   });
 
   it('should load the mobile menu | level 2', () => {
-    cy.get('dds-masthead-menu-button')
+    cy.get('cds-masthead-menu-button')
       .shadow()
       .find('button')
       .click();
 
-    cy.get('dds-left-nav-menu-section:nth-child(1) > dds-left-nav-menu:nth-child(2)')
+    cy.get('cds-left-nav-menu-section:nth-child(1) > cds-left-nav-menu:nth-child(2)')
       .shadow()
       .find('button')
       .click();
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js
index e6367ccdf1a..7533c47da7b 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/pictogram-item/pictogram-item.e2e.js
@@ -13,7 +13,7 @@
  */
 const _pathDefault = '/iframe.html?id=components-pictogram-item--default';
 
-describe('dds-pictogram-item | Pictogram item (desktop)', () => {
+describe('cds-pictogram-item | Pictogram item (desktop)', () => {
   it('should check a11y', () => {
     cy.visit(`/${_pathDefault}`);
     cy.injectAxe();
@@ -23,9 +23,9 @@ describe('dds-pictogram-item | Pictogram item (desktop)', () => {
   it('should load pictogram item and content', () => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(1280, 780);
-    cy.get('[data-autoid="dds--pictogram-item"]').should('have.length', 1);
-    cy.get('[data-autoid="dds--pictogram-item"] [data-autoid="dds--pictogram-item__pictogram"]').should('have.length', 1);
-    cy.get('[data-autoid="dds--pictogram-item"] [data-autoid="dds--content-item__heading"]').should('have.length', 1);
+    cy.get('[data-autoid="cds--pictogram-item"]').should('have.length', 1);
+    cy.get('[data-autoid="cds--pictogram-item"] [data-autoid="cds--pictogram-item__pictogram"]').should('have.length', 1);
+    cy.get('[data-autoid="cds--pictogram-item"] [data-autoid="cds--content-item__heading"]').should('have.length', 1);
 
     cy.takeSnapshots();
   });
@@ -33,7 +33,7 @@ describe('dds-pictogram-item | Pictogram item (desktop)', () => {
   it('should check that the Link with icon is loaded and clickable', () => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(1280, 780);
-    const linkWithIcon = cy.get('[data-autoid="dds--pictogram-item"] [data-autoid="dds--link-with-icon"]');
+    const linkWithIcon = cy.get('[data-autoid="cds--pictogram-item"] [data-autoid="cds--link-with-icon"]');
     linkWithIcon.should('have.length', 1);
     linkWithIcon
       .shadow()
@@ -58,13 +58,13 @@ describe('dds-pictogram-item | Pictogram item (desktop)', () => {
   });
 });
 
-describe('dds-pictogram-item | Pictogram item (mobile)', () => {
+describe('cds-pictogram-item | Pictogram item (mobile)', () => {
   it('should load pictogram item and content', () => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(320, 780);
-    cy.get('[data-autoid="dds--pictogram-item"]').should('have.length', 1);
-    cy.get('[data-autoid="dds--pictogram-item"] [data-autoid="dds--pictogram-item__pictogram"]').should('have.length', 1);
-    cy.get('[data-autoid="dds--pictogram-item"] [data-autoid="dds--content-item__heading"]').should('have.length', 1);
+    cy.get('[data-autoid="cds--pictogram-item"]').should('have.length', 1);
+    cy.get('[data-autoid="cds--pictogram-item"] [data-autoid="cds--pictogram-item__pictogram"]').should('have.length', 1);
+    cy.get('[data-autoid="cds--pictogram-item"] [data-autoid="cds--content-item__heading"]').should('have.length', 1);
 
     cy.takeSnapshots('mobile');
   });
@@ -72,7 +72,7 @@ describe('dds-pictogram-item | Pictogram item (mobile)', () => {
   it('should check that the Link with icon is loaded and clickable', () => {
     cy.visit(`/${_pathDefault}`);
     cy.viewport(320, 780);
-    const linkWithIcon = cy.get('[data-autoid="dds--pictogram-item"] [data-autoid="dds--link-with-icon"]');
+    const linkWithIcon = cy.get('[data-autoid="cds--pictogram-item"] [data-autoid="cds--link-with-icon"]');
     linkWithIcon.should('have.length', 1);
     linkWithIcon
       .shadow()
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/_tests.js b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/_tests.js
index 90f1381b6fb..f025f7808e5 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/_tests.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/_tests.js
@@ -11,17 +11,17 @@
  * @type {Object<string>}
  */
 export const selectors = {
-  annotation: '[data-autoid="dds--pricing-table-cell-annotation"]',
-  annotationToggle: '[data-autoid="dds--pricing-table-annotation-toggle"]',
-  body: '[data-autoid="dds--pricing-table-body"]',
-  group: '[data-autoid="dds--pricing-table-group"]',
-  headerRow: '[data-autoid="dds--pricing-table-header-row"]',
-  headerCell: '[data-autoid="dds--pricing-table-header-cell"]',
-  headerCellCta: '[data-autoid="dds--pricing-table-header-cell-cta"]',
-  headerCellDescription: '[data-autoid="dds--pricing-table-header-cell-description"]',
-  highlightLabel: '[data-autoid="dds--pricing-table-highlight-label"]',
-  row: '[data-autoid="dds--pricing-table-row"]',
-  table: '[data-autoid="dds--pricing-table"]',
+  annotation: '[data-autoid="cds--pricing-table-cell-annotation"]',
+  annotationToggle: '[data-autoid="cds--pricing-table-annotation-toggle"]',
+  body: '[data-autoid="cds--pricing-table-body"]',
+  group: '[data-autoid="cds--pricing-table-group"]',
+  headerRow: '[data-autoid="cds--pricing-table-header-row"]',
+  headerCell: '[data-autoid="cds--pricing-table-header-cell"]',
+  headerCellCta: '[data-autoid="cds--pricing-table-header-cell-cta"]',
+  headerCellDescription: '[data-autoid="cds--pricing-table-header-cell-description"]',
+  highlightLabel: '[data-autoid="cds--pricing-table-highlight-label"]',
+  row: '[data-autoid="cds--pricing-table-row"]',
+  table: '[data-autoid="cds--pricing-table"]',
 };
 
 /**
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/default.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/default.e2e.js
index 21252df8e4c..d880b0e30de 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/default.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/default.e2e.js
@@ -38,7 +38,7 @@ const _tests = (path = path) => [
   },
 ];
 
-describe('dds-pricing-table | default (desktop)', () => {
+describe('cds-pricing-table | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -46,7 +46,7 @@ describe('dds-pricing-table | default (desktop)', () => {
   [...createTests(path), ..._tests(path)].forEach(test => test());
 });
 
-describe('dds-pricing-table | default (mobile)', () => {
+describe('cds-pricing-table | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/with-subheaders.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/with-subheaders.e2e.js
index b2026a1596f..8800facf701 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/with-subheaders.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/with-subheaders.e2e.js
@@ -100,7 +100,7 @@ const _tests = (path = path) => [
   },
 ];
 
-describe('dds-pricing-table | with subheaders (desktop)', () => {
+describe('cds-pricing-table | with subheaders (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -108,7 +108,7 @@ describe('dds-pricing-table | with subheaders (desktop)', () => {
   [...createTests(path), ..._tests(path)].forEach(test => test());
 });
 
-describe('dds-pricing-table | with subheaders (mobile)', () => {
+describe('cds-pricing-table | with subheaders (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/without-row-headers.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/without-row-headers.e2e.js
index b18379dc940..520678405e4 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/without-row-headers.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/pricing-table/without-row-headers.e2e.js
@@ -15,7 +15,7 @@ import { createTests, createTestsMobile } from './_tests';
  */
 const path = '/iframe.html?id=experimental-pricing-table--without-row-headers';
 
-describe('dds-pricing-table | without row headers (desktop)', () => {
+describe('cds-pricing-table | without row headers (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 780);
   });
@@ -23,7 +23,7 @@ describe('dds-pricing-table | without row headers (desktop)', () => {
   createTests(path).forEach(test => test());
 });
 
-describe('dds-pricing-table | without row headers (mobile)', () => {
+describe('cds-pricing-table | without row headers (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
   });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/structured-list/structured-list.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/structured-list/structured-list.e2e.js
index b9756697c4c..e13b1bc0fbf 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/structured-list/structured-list.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/structured-list/structured-list.e2e.js
@@ -13,7 +13,7 @@
  */
 const _pathRoot = '/iframe.html?id=components-structured-list';
 
-describe('dds-structured-list | default (desktop)', () => {
+describe('cds-structured-list | default (desktop)', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--default`)
       .injectAxe()
@@ -25,7 +25,7 @@ describe('dds-structured-list | default (desktop)', () => {
   });
 
   it('should have column headers', () => {
-    cy.get('dds-structured-list-header-row dds-structured-list-header-cell')
+    cy.get('cds-structured-list-header-row cds-structured-list-header-cell')
       .should('exist')
       .each(header_cell => {
         cy.get(header_cell).should('not.be.empty');
@@ -33,7 +33,7 @@ describe('dds-structured-list | default (desktop)', () => {
   });
 });
 
-describe('dds-structured-list | default (mobile)', () => {
+describe('cds-structured-list | default (mobile)', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--default`)
       .injectAxe()
@@ -45,7 +45,7 @@ describe('dds-structured-list | default (mobile)', () => {
   });
 
   it('should have column headers', () => {
-    cy.get('dds-structured-list-header-row dds-structured-list-header-cell')
+    cy.get('cds-structured-list-header-row cds-structured-list-header-cell')
       .should('exist')
       .each(header_cell => {
         cy.get(header_cell).should('not.be.empty');
@@ -53,7 +53,7 @@ describe('dds-structured-list | default (mobile)', () => {
   });
 
   it('should scroll to display all cells', () => {
-    cy.get('dds-structured-list-header-cell, dds-structured-list-cell').each(cell => {
+    cy.get('cds-structured-list-header-cell, cds-structured-list-cell').each(cell => {
       cy.get(cell)
         .scrollIntoView()
         .should('be.visible');
@@ -61,7 +61,7 @@ describe('dds-structured-list | default (mobile)', () => {
   });
 });
 
-describe('dds-structured-list | With Row Headers (desktop)', () => {
+describe('cds-structured-list | With Row Headers (desktop)', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--with-row-headers`)
       .injectAxe()
@@ -73,7 +73,7 @@ describe('dds-structured-list | With Row Headers (desktop)', () => {
   });
 
   it('should have row headers', () => {
-    cy.get('dds-structured-list-row dds-structured-list-header-cell')
+    cy.get('cds-structured-list-row cds-structured-list-header-cell')
       .should('exist')
       .each(header_cell => {
         cy.get(header_cell).should('not.be.empty');
@@ -81,7 +81,7 @@ describe('dds-structured-list | With Row Headers (desktop)', () => {
   });
 });
 
-describe('dds-structured-list | With Row Headers (mobile)', () => {
+describe('cds-structured-list | With Row Headers (mobile)', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--with-row-headers`)
       .injectAxe()
@@ -93,7 +93,7 @@ describe('dds-structured-list | With Row Headers (mobile)', () => {
   });
 
   it('should have row headers', () => {
-    cy.get('dds-structured-list-row dds-structured-list-header-cell')
+    cy.get('cds-structured-list-row cds-structured-list-header-cell')
       .should('exist')
       .each(header_cell => {
         cy.get(header_cell).should('not.be.empty');
@@ -101,7 +101,7 @@ describe('dds-structured-list | With Row Headers (mobile)', () => {
   });
 
   it('should scroll to display all cells', () => {
-    cy.get('dds-structured-list-header-cell, dds-structured-list-cell').each(cell => {
+    cy.get('cds-structured-list-header-cell, cds-structured-list-cell').each(cell => {
       cy.get(cell)
         .scrollIntoView()
         .should('be.visible');
@@ -109,7 +109,7 @@ describe('dds-structured-list | With Row Headers (mobile)', () => {
   });
 });
 
-describe('dds-structured-list | With Subheaders (desktop)', () => {
+describe('cds-structured-list | With Subheaders (desktop)', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--with-subheaders`)
       .injectAxe()
@@ -121,7 +121,7 @@ describe('dds-structured-list | With Subheaders (desktop)', () => {
   });
 
   it('should have Subheaders', () => {
-    cy.get('dds-structured-list-group')
+    cy.get('cds-structured-list-group')
       .shadow()
       .find('th')
       .each(([header]) => {
@@ -132,7 +132,7 @@ describe('dds-structured-list | With Subheaders (desktop)', () => {
   });
 });
 
-describe('dds-structured-list | With Subheaders (mobile)', () => {
+describe('cds-structured-list | With Subheaders (mobile)', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--with-subheaders`)
       .injectAxe()
@@ -144,7 +144,7 @@ describe('dds-structured-list | With Subheaders (mobile)', () => {
   });
 
   it('should have Subheaders', () => {
-    cy.get('dds-structured-list-group')
+    cy.get('cds-structured-list-group')
       .shadow()
       .find('th')
       .each(([header]) => {
@@ -155,7 +155,7 @@ describe('dds-structured-list | With Subheaders (mobile)', () => {
   });
 
   it('should scroll to display all cells', () => {
-    cy.get('dds-structured-list-header-cell, dds-structured-list-cell').each(cell => {
+    cy.get('cds-structured-list-header-cell, cds-structured-list-cell').each(cell => {
       cy.get(cell)
         .scrollIntoView()
         .should('be.visible');
@@ -163,7 +163,7 @@ describe('dds-structured-list | With Subheaders (mobile)', () => {
   });
 });
 
-describe('dds-structured-list | With Complex Content', () => {
+describe('cds-structured-list | With Complex Content', () => {
   beforeEach(() => {
     cy.visit(`${_pathRoot}--with-complex-content`)
       .injectAxe()
@@ -171,21 +171,21 @@ describe('dds-structured-list | With Complex Content', () => {
   });
 
   it('should inject tooltip with tooltip attribute', () => {
-    cy.get('dds-structured-list-cell[tooltip]')
+    cy.get('cds-structured-list-cell[tooltip]')
       .shadow()
       .find('bx-tooltip-icon')
       .should('exist');
   });
 
   it('should inject svg with icon attribute', () => {
-    cy.get('dds-structured-list-cell[icon]')
+    cy.get('cds-structured-list-cell[icon]')
       .shadow()
       .find('svg')
       .should('exist');
   });
 
   it('should inject tags with tags attribute', () => {
-    cy.get('dds-structured-list-cell[tags]')
+    cy.get('cds-structured-list-cell[tags]')
       .shadow()
       .find('bx-tag')
       .should('exist');
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/table-of-contents/table-of-contents.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/table-of-contents/table-of-contents.e2e.js
index fff0e02c9af..073d1d6437c 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/table-of-contents/table-of-contents.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/table-of-contents/table-of-contents.e2e.js
@@ -17,7 +17,7 @@ const _paths = {
 };
 
 /**
- * Collection of all tests for dds-table-of-contents
+ * Collection of all tests for cds-table-of-contents
  *
  * @property {function} all
  * @property {function} desktop
@@ -229,7 +229,7 @@ const _tests = {
   },
 };
 
-describe('dds-table-of-contents | default (desktop)', () => {
+describe('cds-table-of-contents | default (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`/${_paths.default}`);
@@ -244,7 +244,7 @@ describe('dds-table-of-contents | default (desktop)', () => {
   it('should check a11y', _tests.all.checkA11y);
 });
 
-describe('dds-table-of-contents | horizontal (desktop)', () => {
+describe('cds-table-of-contents | horizontal (desktop)', () => {
   beforeEach(() => {
     cy.viewport(1280, 720);
     cy.visit(`/${_paths.horizontal}`);
@@ -259,7 +259,7 @@ describe('dds-table-of-contents | horizontal (desktop)', () => {
   it('should check a11y', _tests.all.checkA11y);
 });
 
-describe('dds-table-of-contents | default (mobile)', () => {
+describe('cds-table-of-contents | default (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
     cy.visit(`/${_paths.default}`);
@@ -274,7 +274,7 @@ describe('dds-table-of-contents | default (mobile)', () => {
   it('should check a11y', _tests.all.checkA11y);
 });
 
-describe('dds-table-of-contents | horizontal (mobile)', () => {
+describe('cds-table-of-contents | horizontal (mobile)', () => {
   beforeEach(() => {
     cy.viewport(320, 720);
     cy.visit(`/${_paths.horizontal}`);
diff --git a/packages/web-components/tests/e2e-storybook/cypress/integration/universal-banner/universal-banner.e2e.js b/packages/web-components/tests/e2e-storybook/cypress/integration/universal-banner/universal-banner.e2e.js
index f5030d4a2ef..b386ae6e2ce 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/integration/universal-banner/universal-banner.e2e.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/integration/universal-banner/universal-banner.e2e.js
@@ -11,10 +11,10 @@
  * @type {string}
  * @private
  */
-const _defaultPath = '/iframe.html?id=components-universal-banner--default';
+const _defaultPath = '/iframe.html?id=components-global-banner--default';
 
 /* eslint-disable cypress/no-unnecessary-waiting */
-describe('dds-universal-banner | default', () => {
+describe('c4d-global-banner | default', () => {
   beforeEach(() => {
     cy.visit(`/${_defaultPath}`);
     cy.injectAxe();
@@ -26,11 +26,11 @@ describe('dds-universal-banner | default', () => {
   });
 
   it('should load heading and copy', () => {
-    cy.get('dds-universal-banner-heading')
+    cy.get('c4d-global-banner-heading')
       .invoke('text')
       .should('not.be.empty');
 
-    cy.get('dds-universal-banner-copy')
+    cy.get('c4d-global-banner-copy')
       .invoke('text')
       .should('not.be.empty');
 
@@ -38,12 +38,12 @@ describe('dds-universal-banner | default', () => {
   });
 
   it('should load the cta button and link with icon on mobile', () => {
-    cy.get('dds-universal-banner')
+    cy.get('c4d-global-banner')
       .shadow()
-      .find('.bx--universal-banner-icon')
+      .find('.cds--global-banner-icon')
       .should('not.be.visible');
 
-    cy.get('dds-universal-banner dds-button-cta')
+    cy.get('c4d-global-banner c4d-button')
       .shadow()
       .find('a')
       .should($link => {
@@ -52,21 +52,21 @@ describe('dds-universal-banner | default', () => {
 
     cy.viewport(1055, 780);
 
-    cy.get('dds-universal-banner')
+    cy.get('c4d-global-banner')
       .shadow()
-      .find('.bx--universal-banner-icon')
+      .find('.cds--global-banner-icon')
       .should('be.visible');
 
-    cy.get('.bx--universal-banner-layout-container').should($link => {
+    cy.get('.cds--global-banner-layout-container').should($link => {
       expect($link.prop('href')).not.to.be.empty;
     });
   });
 
   xit('should load an image only in larger breakpoints', () => {
-    cy.get('dds-universal-banner-image').should('be.visible');
+    cy.get('c4d-global-banner-image').should('be.visible');
     cy.viewport(672, 780);
-    cy.get('dds-universal-banner-image').should('not.be.visible');
+    cy.get('c4d-global-banner-image').should('not.be.visible');
     cy.viewport(320, 780);
-    cy.get('dds-universal-banner-image').should('not.be.visible');
+    cy.get('c4d-global-banner-image').should('not.be.visible');
   });
 });
diff --git a/packages/web-components/tests/e2e-storybook/cypress/support/commands.js b/packages/web-components/tests/e2e-storybook/cypress/support/commands.js
index 3d65cd6c2cf..2a7c455337f 100644
--- a/packages/web-components/tests/e2e-storybook/cypress/support/commands.js
+++ b/packages/web-components/tests/e2e-storybook/cypress/support/commands.js
@@ -46,7 +46,7 @@ Cypress.Commands.add('carbonThemesScreenshot', (screenshotOpts = {}, percyOption
 /**
  * Check a11y
  *
- * @param {string} context optional to specify component context (ex. 'dds-content-item)
+ * @param {string} context optional to specify component context (ex. 'cds-content-item)
  * @param {Array} additionalRules optional to remove unnecessary rules by there id to pass a11y test (ex. ['list', 'region'])
  */
 Cypress.Commands.add('checkAxeA11y', (context, additionalRules) => {
diff --git a/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.cdn.e2e.js
index 1a6676a01de..b6701c86af2 100644
--- a/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-back-to-top (cdn)', () => {
+describe('cds-back-to-top (cdn)', () => {
   it('should load the default back-to-top example', () => {
     cy.visit('/back-to-top/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-back-to-top | cdn | default');
+    cy.percySnapshot('cds-back-to-top | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.e2e.js b/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.e2e.js
index af633022002..516da607c56 100644
--- a/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/back-to-top/back-to-top.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-back-to-top', () => {
+describe('cds-back-to-top', () => {
   it('should load the default back-to-top example', () => {
     cy.visit('/back-to-top');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-back-to-top | default');
+    cy.percySnapshot('cds-back-to-top | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.cdn.e2e.js
index fbed3992593..d22fc0d28b7 100644
--- a/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-button-group (cdn)', () => {
+describe('cds-button-group (cdn)', () => {
   it('should load the default button group example', () => {
     cy.visit('/button-group/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-button-group | cdn | default');
+    cy.percySnapshot('cds-button-group | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.e2e.js b/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.e2e.js
index d187c5d28cd..8c48c86876a 100644
--- a/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/button-group/button-group.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-button-group', () => {
+describe('cds-button-group', () => {
   it('should load the default button group example', () => {
     cy.visit('/button-group');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-button-group | default');
+    cy.percySnapshot('cds-button-group | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.cdn.e2e.js
index 581100a69e8..81bbd9c6cc8 100644
--- a/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-callout-quote (cdn)', () => {
+describe('cds-callout-quote (cdn)', () => {
   it('should load the default callout quote example', () => {
     cy.visit('/callout-quote/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-callout-quote | cdn | default');
+    cy.percySnapshot('cds-callout-quote | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.e2e.js b/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.e2e.js
index 294011f8a57..38882ea1d73 100644
--- a/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/callout-quote/callout-quote.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-callout-quote', () => {
+describe('cds-callout-quote', () => {
   it('should load the default callout quote example', () => {
     cy.visit('/callout-quote');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-callout-quote | default');
+    cy.percySnapshot('cds-callout-quote | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.cdn.e2e.js
index 837f4961707..4bfb352cded 100644
--- a/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-callout-with-media (cdn)', () => {
+describe('cds-callout-with-media (cdn)', () => {
   it('should load the default callout with media example (cdn)', () => {
     cy.visit('/callout-with-media/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-callout-with-media | cdn | default');
+    cy.percySnapshot('cds-callout-with-media | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.e2e.js b/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.e2e.js
index 832cc12edfa..d5b89d82501 100644
--- a/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/callout-with-media/callout-with-media.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-callout-with-media', () => {
+describe('cds-callout-with-media', () => {
   it('should load the default callout with media example', () => {
     cy.visit('/callout-with-media');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-callout-with-media | default');
+    cy.percySnapshot('cds-callout-with-media | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.cdn.e2e.js
index e546aea535d..366576ca9df 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-group (cdn)', () => {
+describe('cds-card-group (cdn)', () => {
   it('should load the default card group example (cdn) ', () => {
     cy.visit('/card-group/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-group | cdn | default');
+    cy.percySnapshot('cds-card-group | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.e2e.js
index e915de76113..c67fb4d50de 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-group/card-group.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-group', () => {
+describe('cds-card-group', () => {
   it('should load the default card group example', () => {
     cy.visit('/card-group');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-group | default');
+    cy.percySnapshot('cds-card-group | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.cdn.e2e.js
index 289e200a724..1bcf6498b7e 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-in-card (cdn)', () => {
+describe('cds-card-in-card (cdn)', () => {
   it('should load the default card-in-card example (cdn)', () => {
     cy.visit('/card-group/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-in-card | cdn | default');
+    cy.percySnapshot('cds-card-in-card | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.e2e.js
index 7c492bd97cb..842496d1b2e 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-in-card/card-in-card.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-in-card', () => {
+describe('cds-card-in-card', () => {
   it('should load the default card-in-card example', () => {
     cy.visit('/card-group');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-in-card | default');
+    cy.percySnapshot('cds-card-in-card | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.cdn.e2e.js
index d6d7c1e0bca..987dbcaf28a 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-link (cdn)', () => {
+describe('cds-card-link (cdn)', () => {
   it('should load the default card-link example (cdn)', () => {
     cy.visit('/card-link/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-link | cdn | default');
+    cy.percySnapshot('cds-card-link | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.e2e.js
index f3afded396f..2cb87b620ec 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-link/card-link.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-link', () => {
+describe('cds-card-link', () => {
   it('should load the default card-link example', () => {
     cy.visit('/card-link');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-link | default');
+    cy.percySnapshot('cds-card-link | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.cdn.e2e.js
index 5154d5622e4..6fcb0df8aaf 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-section-carousel (cdn)', () => {
+describe('cds-card-section-carousel (cdn)', () => {
   it('should load the default card section carousel example (cdn)', () => {
     cy.visit('/card-section-carousel/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-section-carousel | cdn | default');
+    cy.percySnapshot('cds-card-section-carousel | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.e2e.js
index 85a708774bf..ca30eb8c7a2 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-section-carousel/card-section-carousel.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-section-carousel', () => {
+describe('cds-card-section-carousel', () => {
   it('should load the default card section carousel example', () => {
     cy.visit('/card-section-carousel');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-section-carousel | default');
+    cy.percySnapshot('cds-card-section-carousel | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.cdn.e2e.js
index 0e7483f97e9..0eb135bf0c7 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-section-simple (cdn)', () => {
+describe('cds-card-section-simple (cdn)', () => {
   it('should load the default card section simple example (cdn)', () => {
     cy.visit('/card-section-simple/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-section-simple | cdn | default');
+    cy.percySnapshot('cds-card-section-simple | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.e2e.js
index bd6261eef76..df795a6903a 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card-section-simple/card-section-simple.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card-section-simple', () => {
+describe('cds-card-section-simple', () => {
   it('should load the default card section simple example', () => {
     cy.visit('/card-section-simple');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card-section-simple | default');
+    cy.percySnapshot('cds-card-section-simple | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card/card.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card/card.cdn.e2e.js
index ec8763ea15f..07c8866c51f 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card/card.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card/card.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card (cdn)', () => {
+describe('cds-card (cdn)', () => {
   it('should load the default card example (cdn)', () => {
     cy.visit('/card/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card | cdn | default');
+    cy.percySnapshot('cds-card | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/card/card.e2e.js b/packages/web-components/tests/e2e/cypress/integration/card/card.e2e.js
index 11be5466a24..d3d15ba0726 100644
--- a/packages/web-components/tests/e2e/cypress/integration/card/card.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/card/card.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-card', () => {
+describe('cds-card', () => {
   it('should load the default card example', () => {
     cy.visit('/card');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-card | default');
+    cy.percySnapshot('cds-card | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.cdn.e2e.js
index 63414c9c123..06d27668666 100644
--- a/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-carousel (cdn)', () => {
+describe('cds-carousel (cdn)', () => {
   it('should load the default carousel example (cdn)', () => {
     cy.visit('/carousel/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-carousel | cdn | default');
+    cy.percySnapshot('cds-carousel | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.e2e.js b/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.e2e.js
index d758def7005..d4d1096aa73 100644
--- a/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/carousel/carousel.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-carousel', () => {
+describe('cds-carousel', () => {
   it('should load the default carousel example', () => {
     cy.visit('/carousel');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-carousel | default');
+    cy.percySnapshot('cds-carousel | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.cdn.e2e.js
index de98dae474a..d38380e5086 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-card-static (cdn)', () => {
+describe('cds-content-block-card-static (cdn)', () => {
   it('should load the default content-block-card-static example (cdn)', () => {
     cy.visit('/content-block-card-static/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-card-static | cdn | default');
+    cy.percySnapshot('cds-content-block-card-static | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.e2e.js
index f9f37513b3c..98b0b3327f1 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-card-static/content-block-card-static.e2e.js
@@ -7,12 +7,12 @@
 
 'use strict';
 
-describe('dds-content-block-card-static', () => {
+describe('cds-content-block-card-static', () => {
   // TODO: find out why components are getting double imported in parcel
   xit('should load the default content-block-card-static example', () => {
     cy.visit('/content-block-card-static');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-card-static | default');
+    cy.percySnapshot('cds-content-block-card-static | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.cdn.e2e.js
index 2366ac2f962..48584cfee4b 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-cards (cdn)', () => {
-  it('should load the default dds-content-block-cards example (cdn)', () => {
+describe('cds-content-block-cards (cdn)', () => {
+  it('should load the default cds-content-block-cards example (cdn)', () => {
     cy.visit('/content-block-card-static/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-cards | cdn | default');
+    cy.percySnapshot('cds-content-block-cards | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.e2e.js
index 4fc1bdd149e..ca3db4ebb1b 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-cards/content-block-cards.e2e.js
@@ -7,12 +7,12 @@
 
 'use strict';
 
-describe('dds-content-block-cards', () => {
+describe('cds-content-block-cards', () => {
   // TODO: find out why components are getting double imported in parcel
-  xit('should load the default dds-content-block-cards example', () => {
+  xit('should load the default cds-content-block-cards example', () => {
     cy.visit('/content-block-card-static');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-cards | default');
+    cy.percySnapshot('cds-content-block-cards | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.cdn.e2e.js
index bb1c25b8db7..81087eaf80e 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-headlines (cdn)', () => {
-  it('should load the default dds-content-block-headlines example (cdn)', () => {
+describe('cds-content-block-headlines (cdn)', () => {
+  it('should load the default cds-content-block-headlines example (cdn)', () => {
     cy.visit('/content-block-headlines/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-headlines | cdn | default');
+    cy.percySnapshot('cds-content-block-headlines | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.e2e.js
index 7978b49c402..918417bb960 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-headlines/content-block-headlines.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-headlines', () => {
-  it('should load the default dds-content-block-headlines example', () => {
+describe('cds-content-block-headlines', () => {
+  it('should load the default cds-content-block-headlines example', () => {
     cy.visit('/content-block-headlines');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-headlines | default');
+    cy.percySnapshot('cds-content-block-headlines | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.cdn.e2e.js
index efa1a67b712..f3480801760 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-media (cdn)', () => {
-  it('should load the default dds-content-block-media example (cdn)', () => {
+describe('cds-content-block-media (cdn)', () => {
+  it('should load the default cds-content-block-media example (cdn)', () => {
     cy.visit('/content-block-media/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-media | cdn | default');
+    cy.percySnapshot('cds-content-block-media | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.e2e.js
index 03d44275a72..938f7f3bb7d 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-media/content-block-media.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-media', () => {
-  it('should load the default dds-content-block-media example', () => {
+describe('cds-content-block-media', () => {
+  it('should load the default cds-content-block-media example', () => {
     cy.visit('/content-block-media');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-media | default');
+    cy.percySnapshot('cds-content-block-media | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.cdn.e2e.js
index 73b14a1e69d..86ba5447f85 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-mixed (cdn)', () => {
-  it('should load the default dds-content-block-mixed example (cdn)', () => {
+describe('cds-content-block-mixed (cdn)', () => {
+  it('should load the default cds-content-block-mixed example (cdn)', () => {
     cy.visit('/content-block-mixed/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-mixed | cdn | default');
+    cy.percySnapshot('cds-content-block-mixed | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.e2e.js
index 0231136ae34..e4c6a656c44 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-mixed/content-block-mixed.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-mixed', () => {
-  it('should load the default dds-content-block-mixed example', () => {
+describe('cds-content-block-mixed', () => {
+  it('should load the default cds-content-block-mixed example', () => {
     cy.visit('/content-block-mixed');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-mixed | default');
+    cy.percySnapshot('cds-content-block-mixed | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.cdn.e2e.js
index d96183ca949..30fa85a4966 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-segmented (cdn)', () => {
-  it('should load the default dds-content-block-segmented example (cdn)', () => {
+describe('cds-content-block-segmented (cdn)', () => {
+  it('should load the default cds-content-block-segmented example (cdn)', () => {
     cy.visit('/content-block-segmented/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-segmented | cdn | default');
+    cy.percySnapshot('cds-content-block-segmented | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.e2e.js
index f5a48fdeb07..3e8936b5297 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-segmented/content-block-segmented.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-segmented', () => {
-  it('should load the default dds-content-block-segmented example', () => {
+describe('cds-content-block-segmented', () => {
+  it('should load the default cds-content-block-segmented example', () => {
     cy.visit('/content-block-segmented');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-segmented | default');
+    cy.percySnapshot('cds-content-block-segmented | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.cdn.e2e.js
index 30e87569000..b1a23e6c8b4 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-simple (cdn)', () => {
-  it('should load the default dds-content-block-simple example (cdn)', () => {
+describe('cds-content-block-simple (cdn)', () => {
+  it('should load the default cds-content-block-simple example (cdn)', () => {
     cy.visit('/content-block-simple/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-simple | cdn | default');
+    cy.percySnapshot('cds-content-block-simple | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.e2e.js
index 121df4cca89..ec7f5f93686 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-block-simple/content-block-simple.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-block-simple', () => {
-  it('should load the default dds-content-block-simple example', () => {
+describe('cds-content-block-simple', () => {
+  it('should load the default cds-content-block-simple example', () => {
     cy.visit('/content-block-simple');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-block-simple | default');
+    cy.percySnapshot('cds-content-block-simple | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-banner/content-group-banner.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-banner/content-group-banner.cdn.e2e.js
deleted file mode 100644
index e243f3fe4d6..00000000000
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-banner/content-group-banner.cdn.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('dds-content-group-banner (cdn)', () => {
-  it('should load the default dds-content-group-banner example', () => {
-    cy.visit('/content-group-banner/cdn.html');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-banner | cdn | default');
-  });
-});
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-banner/content-group-banner.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-banner/content-group-banner.e2e.js
deleted file mode 100644
index 20eac3b9dbe..00000000000
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-banner/content-group-banner.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('dds-content-group-banner', () => {
-  it('should load the default dds-content-group-banner example', () => {
-    cy.visit('/content-group-banner');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-banner | default');
-  });
-});
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.cdn.e2e.js
index 7cde623d43f..2f933fe5f09 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-group-cards (cdn)', () => {
-  it('should load the default dds-content-group-cards example (cdn)', () => {
+describe('cds-content-group-cards (cdn)', () => {
+  it('should load the default cds-content-group-cards example (cdn)', () => {
     cy.visit('/content-group-cards/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-cards | cdn | default');
+    cy.percySnapshot('cds-content-group-cards | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.e2e.js
index 9daeb227304..69c5f99e5aa 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-group-cards/content-group-cards.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-group-cards', () => {
-  it('should load the default dds-content-group-cards example', () => {
+describe('cds-content-group-cards', () => {
+  it('should load the default cds-content-group-cards example', () => {
     cy.visit('/content-group-cards');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-cards | default');
+    cy.percySnapshot('cds-content-group-cards | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-horizontal/content-group-horizontal.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-horizontal/content-group-horizontal.cdn.e2e.js
deleted file mode 100644
index a1fde5ad321..00000000000
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-horizontal/content-group-horizontal.cdn.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('dds-content-group-horizontal (cdn)', () => {
-  it('should load the default dds-content-group-horizontal example (cdn)', () => {
-    cy.visit('/content-group-horizontal/cdn.html');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-horizontal | cdn | default');
-  });
-});
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-horizontal/content-group-horizontal.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-horizontal/content-group-horizontal.e2e.js
deleted file mode 100644
index 473f27f56ff..00000000000
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-horizontal/content-group-horizontal.e2e.js
+++ /dev/null
@@ -1,17 +0,0 @@
-/**
- * Copyright IBM Corp. 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.
- */
-
-'use strict';
-
-describe('dds-content-group-horizontal', () => {
-  it('should load the default dds-content-group-horizontal example', () => {
-    cy.visit('/content-group-horizontal');
-
-    // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-horizontal | default');
-  });
-});
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.cdn.e2e.js
index cd48e04c491..0884dffa4e5 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-group-pictograms (cdn)', () => {
-  it('should load the default dds-content-group-pictograms example (cdn)', () => {
+describe('cds-content-group-pictograms (cdn)', () => {
+  it('should load the default cds-content-group-pictograms example (cdn)', () => {
     cy.visit('/content-group-pictograms/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-pictograms | cdn | default');
+    cy.percySnapshot('cds-content-group-pictograms | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js
index b5211f1ccbd..ab0de847c39 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-group-pictograms/content-group-pictograms.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-group-pictograms', () => {
-  it('should load the default dds-content-group-pictograms example', () => {
+describe('cds-content-group-pictograms', () => {
+  it('should load the default cds-content-group-pictograms example', () => {
     cy.visit('/content-group-pictograms');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-pictograms | default');
+    cy.percySnapshot('cds-content-group-pictograms | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.cdn.e2e.js
index 227e7910fd7..14031c5c6fb 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-group-simple (cdn)', () => {
-  it('should load the default dds-content-group-simple example (cdn)', () => {
+describe('cds-content-group-simple (cdn)', () => {
+  it('should load the default cds-content-group-simple example (cdn)', () => {
     cy.visit('/content-group-simple/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-simple | cdn | default');
+    cy.percySnapshot('cds-content-group-simple | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.e2e.js
index afa183f3c2d..fa38eec632e 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-group-simple/content-group-simple.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-group-simple', () => {
-  it('should load the default dds-content-group-simple example', () => {
+describe('cds-content-group-simple', () => {
+  it('should load the default cds-content-group-simple example', () => {
     cy.visit('/content-group-simple');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-group-simple | default');
+    cy.percySnapshot('cds-content-group-simple | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js
index 6b4d4c81cd3..1faf2c0b939 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-item-horizontal (cdn)', () => {
-  it('should load the default dds-content-item-horizontal example (cdn)', () => {
-    cy.visit('/content-item-horizontal/cdn.html');
+describe('cds-content-item-row (cdn)', () => {
+  it('should load the default cds-content-item-row example (cdn)', () => {
+    cy.visit('/content-item-row/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-item-horizontal | cdn | default');
+    cy.percySnapshot('cds-content-item-row | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js
index 11e8b892dd6..bfa472047a5 100644
--- a/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/content-item-horizontal/content-item-horizontal.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-content-item-horizontal', () => {
-  it('should load the default dds-content-item-horizontal example', () => {
-    cy.visit('/content-item-horizontal');
+describe('cds-content-item-row', () => {
+  it('should load the default cds-content-item-row example', () => {
+    cy.visit('/content-item-row');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-content-item-horizontal | default');
+    cy.percySnapshot('cds-content-item-row | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.cdn.e2e.js
index aec7c77c75a..9733d215e24 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-block (cdn)', () => {
-  it('should load the default dds-cta-block example (cdn)', () => {
+describe('cds-cta-block (cdn)', () => {
+  it('should load the default cds-cta-block example (cdn)', () => {
     cy.visit('/cta-block/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-block | cdn | default');
+    cy.percySnapshot('cds-cta-block | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.e2e.js
index b79bf756168..209f9e7b244 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-block/cta-block.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-block', () => {
-  it('should load the default dds-cta-block example', () => {
+describe('cds-cta-block', () => {
+  it('should load the default cds-cta-block example', () => {
     cy.visit('/cta-block');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-block | default');
+    cy.percySnapshot('cds-cta-block | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.cdn.e2e.js
index 09da831f1d5..ee1b5605311 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-button-cta (cdn)', () => {
-  it('should load the default dds-button-cta example (cdn)', () => {
+describe('cds-button-cta (cdn)', () => {
+  it('should load the default cds-button-cta example (cdn)', () => {
     cy.visit('/cta-button/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-button-cta | cdn | default');
+    cy.percySnapshot('cds-button-cta | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.e2e.js
index cb3e237ae3c..25649dbcffe 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-button/cta-button.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-button-cta', () => {
-  it('should load the default dds-button-cta example', () => {
+describe('cds-button-cta', () => {
+  it('should load the default cds-button-cta example', () => {
     cy.visit('/cta-button');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-button-cta | default');
+    cy.percySnapshot('cds-button-cta | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.cdn.e2e.js
index 770fbb721b2..bcde1234fd3 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-card (cdn)', () => {
-  it('should load the default dds-cta-card example (cdn)', () => {
+describe('cds-cta-card (cdn)', () => {
+  it('should load the default cds-cta-card example (cdn)', () => {
     cy.visit('/cta-card/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-card | cdn | default');
+    cy.percySnapshot('cds-cta-card | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.e2e.js
index 8dfbd4b775a..49bf98981fe 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-card/cta-card.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-card', () => {
-  it('should load the default dds-cta-card example', () => {
+describe('cds-cta-card', () => {
+  it('should load the default cds-cta-card example', () => {
     cy.visit('/cta-card');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-card | default');
+    cy.percySnapshot('cds-cta-card | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.cdn.e2e.js
index 5975758b505..83911082197 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-feature (cdn)', () => {
-  it('should load the default dds-cta-feature example (cdn)', () => {
+describe('cds-cta-feature (cdn)', () => {
+  it('should load the default cds-cta-feature example (cdn)', () => {
     cy.visit('/cta-feature/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-feature | cdn | default');
+    cy.percySnapshot('cds-cta-feature | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.e2e.js
index 106a98f19ff..e9207913456 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-feature/cta-feature.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-feature', () => {
-  it('should load the default dds-cta-feature example', () => {
+describe('cds-cta-feature', () => {
+  it('should load the default cds-cta-feature example', () => {
     cy.visit('/cta-feature');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-feature | default');
+    cy.percySnapshot('cds-cta-feature | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.cdn.e2e.js
index e9de09d165c..1ffe59d3a3f 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-section (cdn)', () => {
-  it('should load the default dds-cta-section example', () => {
+describe('cds-cta-section (cdn)', () => {
+  it('should load the default cds-cta-section example', () => {
     cy.visit('/cta-section/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-section | cdn | default');
+    cy.percySnapshot('cds-cta-section | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.e2e.js
index 6dfc2b4a4d1..bad5ccc0afc 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-section/cta-section.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-section', () => {
-  it('should load the default dds-cta-section example', () => {
+describe('cds-cta-section', () => {
+  it('should load the default cds-cta-section example', () => {
     cy.visit('/cta-section');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-section | default');
+    cy.percySnapshot('cds-cta-section | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.cdn.e2e.js
index 7003e211347..d77d2b1a337 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-text (cdn)', () => {
-  it('should load the default dds-cta-text example', () => {
+describe('cds-cta-text (cdn)', () => {
+  it('should load the default cds-cta-text example', () => {
     cy.visit('/cta-text/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-text | cdn | default');
+    cy.percySnapshot('cds-cta-text | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.e2e.js b/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.e2e.js
index ec05980d90f..754ce097841 100644
--- a/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/cta-text/cta-text.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-cta-text', () => {
-  it('should load the default dds-cta-text example', () => {
+describe('cds-cta-text', () => {
+  it('should load the default cds-cta-text example', () => {
     cy.visit('/cta-text');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-cta-text | default');
+    cy.percySnapshot('cds-cta-text | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.cdn.e2e.js
index 6f7c4d26711..aded2c6343c 100644
--- a/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.cdn.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-dotcom-shell (cdn)', () => {
-  it('should load the default dds-dotcom-shell example', () => {
+describe('cds-dotcom-shell (cdn)', () => {
+  it('should load the default cds-dotcom-shell example', () => {
     cy.visit('/dotcom-shell/cdn.html');
 
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty');
+    cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-dotcom-shell | cdn | default');
+    cy.percySnapshot('cds-dotcom-shell | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.e2e.js b/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.e2e.js
index 34ca21e1b40..c3ca85dd2ff 100644
--- a/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/dotcom-shell/dotcom-shell.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-dotcom-shell', () => {
-  it('should load the default dds-dotcom-shell example', () => {
+describe('cds-dotcom-shell', () => {
+  it('should load the default cds-dotcom-shell example', () => {
     cy.visit('/dotcom-shell');
 
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty');
+    cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-dotcom-shell | default');
+    cy.percySnapshot('cds-dotcom-shell | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.cdn.e2e.js
index 80e13287294..0f7af54aa81 100644
--- a/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.cdn.e2e.js
@@ -7,15 +7,15 @@
 
 'use strict';
 
-describe('dds-expressive-modal (cdn)', () => {
-  it('should load the default dds-expressive-modal example', () => {
+describe('cds-expressive-modal (cdn)', () => {
+  it('should load the default cds-expressive-modal example', () => {
     cy.visit('/expressive-modal/cdn.html');
 
-    cy.get('[data-autoid="dds--button-expressive"]')
+    cy.get('[data-autoid="cds--button-expressive"]')
       .first()
       .click();
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-expressive-modal | cdn | default');
+    cy.percySnapshot('cds-expressive-modal | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.e2e.js b/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.e2e.js
index afd2fe3acf6..1d4530b0500 100644
--- a/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/expressive-modal/expressive-modal.e2e.js
@@ -7,15 +7,15 @@
 
 'use strict';
 
-describe('dds-expressive-modal', () => {
-  it('should load the default dds-expressive-modal example', () => {
+describe('cds-expressive-modal', () => {
+  it('should load the default cds-expressive-modal example', () => {
     cy.visit('/expressive-modal');
 
-    cy.get('[data-autoid="dds--button-expressive"]')
+    cy.get('[data-autoid="cds--button-expressive"]')
       .first()
       .click();
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-expressive-modal | default');
+    cy.percySnapshot('cds-expressive-modal | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.cdn.e2e.js
index af59bfabed0..d6fad724c39 100644
--- a/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-feature-card (cdn)', () => {
-  it('should load the default dds-feature-card example', () => {
+describe('cds-feature-card (cdn)', () => {
+  it('should load the default cds-feature-card example', () => {
     cy.visit('/feature-card/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-feature-card | cdn | default');
+    cy.percySnapshot('cds-feature-card | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.e2e.js b/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.e2e.js
index 13b00325ba1..310eb89843f 100644
--- a/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/feature-card/feature-card.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-feature-card', () => {
-  it('should load the default dds-feature-card example', () => {
+describe('cds-feature-card', () => {
+  it('should load the default cds-feature-card example', () => {
     cy.visit('/feature-card');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-feature-card | default');
+    cy.percySnapshot('cds-feature-card | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/footer/footer.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/footer/footer.cdn.e2e.js
index 86bedc4e19b..74adb0abe95 100644
--- a/packages/web-components/tests/e2e/cypress/integration/footer/footer.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/footer/footer.cdn.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-footer (cdn)', () => {
-  it('should load the default dds-footer example', () => {
+describe('cds-footer (cdn)', () => {
+  it('should load the default cds-footer example', () => {
     cy.visit('/footer/cdn.html');
 
-    cy.get('[data-autoid="dds--footer-nav-group"]');
+    cy.get('[data-autoid="cds--footer-nav-group"]');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-footer | cdn | default');
+    cy.percySnapshot('cds-footer | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/footer/footer.e2e.js b/packages/web-components/tests/e2e/cypress/integration/footer/footer.e2e.js
index 2c923fa9159..19745566eac 100644
--- a/packages/web-components/tests/e2e/cypress/integration/footer/footer.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/footer/footer.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-footer', () => {
-  it('should load the default dds-footer example', () => {
+describe('cds-footer', () => {
+  it('should load the default cds-footer example', () => {
     cy.visit('/footer');
 
-    cy.get('[data-autoid="dds--footer-nav-group"]');
+    cy.get('[data-autoid="cds--footer-nav-group"]');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-footer | default');
+    cy.percySnapshot('cds-footer | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.cdn.e2e.js
index af38780b723..d2061b83bcf 100644
--- a/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-horizontal-rule (cdn)', () => {
-  it('should load the default dds-horizontal-rule example', () => {
+describe('cds-horizontal-rule (cdn)', () => {
+  it('should load the default cds-horizontal-rule example', () => {
     cy.visit('/horizontal-rule/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-horizontal-rule | cdn | default');
+    cy.percySnapshot('cds-horizontal-rule | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.e2e.js b/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.e2e.js
index 94488e919e9..10d61ffd0a9 100644
--- a/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/horizontal-rule/horizontal-rule.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-horizontal-rule', () => {
-  it('should load the default dds-horizontal-rule example', () => {
+describe('cds-horizontal-rule', () => {
+  it('should load the default cds-horizontal-rule example', () => {
     cy.visit('/horizontal-rule');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-horizontal-rule | default');
+    cy.percySnapshot('cds-horizontal-rule | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/image/image.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/image/image.cdn.e2e.js
index 668c6967010..78139ed84a8 100644
--- a/packages/web-components/tests/e2e/cypress/integration/image/image.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/image/image.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-image (cdn)', () => {
-  it('should load the default dds-image example', () => {
+describe('cds-image (cdn)', () => {
+  it('should load the default cds-image example', () => {
     cy.visit('/image/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-image | cdn | default');
+    cy.percySnapshot('cds-image | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/image/image.e2e.js b/packages/web-components/tests/e2e/cypress/integration/image/image.e2e.js
index 63105138168..4451a21e8e0 100644
--- a/packages/web-components/tests/e2e/cypress/integration/image/image.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/image/image.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-image', () => {
-  it('should load the default dds-image example', () => {
+describe('cds-image', () => {
+  it('should load the default cds-image example', () => {
     cy.visit('/image');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-image | default');
+    cy.percySnapshot('cds-image | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/in-page-banner/in-page-banner.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/in-page-banner/in-page-banner.cdn.e2e.js
new file mode 100644
index 00000000000..d51025fdbf2
--- /dev/null
+++ b/packages/web-components/tests/e2e/cypress/integration/in-page-banner/in-page-banner.cdn.e2e.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+'use strict';
+
+describe('cds-in-page-banner (cdn)', () => {
+  it('should load the default cds-in-page-banner example', () => {
+    cy.visit('/in-page-banner/cdn.html');
+
+    // Take a snapshot for visual diffing
+    cy.percySnapshot('cds-in-page-banner | cdn | default');
+  });
+});
diff --git a/packages/web-components/tests/e2e/cypress/integration/in-page-banner/in-page-banner.e2e.js b/packages/web-components/tests/e2e/cypress/integration/in-page-banner/in-page-banner.e2e.js
new file mode 100644
index 00000000000..c86d091ad3f
--- /dev/null
+++ b/packages/web-components/tests/e2e/cypress/integration/in-page-banner/in-page-banner.e2e.js
@@ -0,0 +1,17 @@
+/**
+ * Copyright IBM Corp. 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.
+ */
+
+'use strict';
+
+describe('cds-in-page-banner', () => {
+  it('should load the default cds-in-page-banner example', () => {
+    cy.visit('/in-page-banner');
+
+    // Take a snapshot for visual diffing
+    cy.percySnapshot('cds-in-page-banner | default');
+  });
+});
diff --git a/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.cdn.e2e.js
index 9d39da30de2..601ce19fe9a 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leadspace-block (cdn)', () => {
-  it('should load the default dds-leadspace-block example', () => {
+describe('cds-leadspace-block (cdn)', () => {
+  it('should load the default cds-leadspace-block example', () => {
     cy.visit('/leadspace-block/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leadspace-block | cdn | default');
+    cy.percySnapshot('cds-leadspace-block | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.e2e.js
index c1b446bd54f..027dc5dd5b1 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leadspace-block/leadspace-block.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leadspace-block', () => {
-  it('should load the default dds-leadspace-block example', () => {
+describe('cds-leadspace-block', () => {
+  it('should load the default cds-leadspace-block example', () => {
     cy.visit('/leadspace-block');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leadspace-block | default');
+    cy.percySnapshot('cds-leadspace-block | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.cdn.e2e.js
index bb976f376e9..1fe8d9cdc60 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leadspace-with-search (cdn)', () => {
-  it('should load the default dds-leadspace-with-search example', () => {
+describe('cds-leadspace-with-search (cdn)', () => {
+  it('should load the default cds-leadspace-with-search example', () => {
     cy.visit('/leadspace-with-search/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leadspace-with-search | cdn | default');
+    cy.percySnapshot('cds-leadspace-with-search | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.e2e.js
index 849a8282847..31658da1372 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leadspace-with-search/leadspace-with-search.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leadspace-with-search', () => {
-  it('should load the default dds-leadspace-with-search example', () => {
+describe('cds-leadspace-with-search', () => {
+  it('should load the default cds-leadspace-with-search example', () => {
     cy.visit('/leadspace-with-search');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leadspace-with-search | default');
+    cy.percySnapshot('cds-leadspace-with-search | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.cdn.e2e.js
index 8dc3a117065..8831d756ba0 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leadspace (cdn)', () => {
-  it('should load the default dds-leadspace example', () => {
+describe('cds-leadspace (cdn)', () => {
+  it('should load the default cds-leadspace example', () => {
     cy.visit('/leadspace/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leadspace | cdn | default');
+    cy.percySnapshot('cds-leadspace | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.e2e.js
index 303c939e9c6..a260f2a7739 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leadspace/leadspace.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leadspace', () => {
-  it('should load the default dds-leadspace example', () => {
+describe('cds-leadspace', () => {
+  it('should load the default cds-leadspace example', () => {
     cy.visit('/leadspace');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leadspace | default');
+    cy.percySnapshot('cds-leadspace | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.cdn.e2e.js
index e6ee437fa6e..766fb03aabf 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leaving-ibm (cdn)', () => {
-  it('should load the default dds-leaving-ibm example', () => {
+describe('cds-leaving-ibm (cdn)', () => {
+  it('should load the default cds-leaving-ibm example', () => {
     cy.visit('/leaving-ibm/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leaving-ibm | cdn | default');
+    cy.percySnapshot('cds-leaving-ibm | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.e2e.js b/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.e2e.js
index 53c6728b63e..0a019797e9f 100644
--- a/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/leaving-ibm/leaving-ibm.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-leaving-ibm', () => {
-  it('should load the default dds-leaving-ibm example', () => {
+describe('cds-leaving-ibm', () => {
+  it('should load the default cds-leaving-ibm example', () => {
     cy.visit('/leaving-ibm');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-leaving-ibm | default');
+    cy.percySnapshot('cds-leaving-ibm | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.cdn.e2e.js
index 553fe86cbe1..b1313cd37cc 100644
--- a/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-lightbox-media-viewer (cdn)', () => {
-  it('should load the default dds-lightbox-media-viewer example', () => {
+describe('cds-lightbox-media-viewer (cdn)', () => {
+  it('should load the default cds-lightbox-media-viewer example', () => {
     cy.visit('/lightbox-media-viewer/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-lightbox-media-viewer | cdn | default');
+    cy.percySnapshot('cds-lightbox-media-viewer | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js b/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js
index da6ab1c3816..dac62df6c1a 100644
--- a/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/lightbox-media-viewer/lightbox-media-viewer.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-lightbox-media-viewer', () => {
-  it('should load the default dds-lightbox-media-viewer example', () => {
+describe('cds-lightbox-media-viewer', () => {
+  it('should load the default cds-lightbox-media-viewer example', () => {
     cy.visit('/lightbox-media-viewer');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-lightbox-media-viewer | default');
+    cy.percySnapshot('cds-lightbox-media-viewer | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.cdn.e2e.js
index 37b0ab74392..765a30ef05b 100644
--- a/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-link-list-section (cdn)', () => {
-  it('should load the default dds-link-list-section example', () => {
+describe('cds-link-list-section (cdn)', () => {
+  it('should load the default cds-link-list-section example', () => {
     cy.visit('/link-list-section/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-link-list-section | cdn | default');
+    cy.percySnapshot('cds-link-list-section | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.e2e.js b/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.e2e.js
index 4c5b0038b81..6477c774036 100644
--- a/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/link-list-section/link-list-section.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-link-list-section', () => {
-  it('should load the default dds-link-list-section example', () => {
+describe('cds-link-list-section', () => {
+  it('should load the default cds-link-list-section example', () => {
     cy.visit('/link-list-section');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-link-list-section | default');
+    cy.percySnapshot('cds-link-list-section | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.cdn.e2e.js
index 9f91a28d12d..5dd861446c7 100644
--- a/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-link-list (cdn)', () => {
-  it('should load the default dds-link-list example', () => {
+describe('cds-link-list (cdn)', () => {
+  it('should load the default cds-link-list example', () => {
     cy.visit('/link-list/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-link-list | cdn | default');
+    cy.percySnapshot('cds-link-list | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.e2e.js b/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.e2e.js
index e078ac09790..4e592c65257 100644
--- a/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/link-list/link-list.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-link-list', () => {
-  it('should load the default dds-link-list example', () => {
+describe('cds-link-list', () => {
+  it('should load the default cds-link-list example', () => {
     cy.visit('/link-list');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-link-list | default');
+    cy.percySnapshot('cds-link-list | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.cdn.e2e.js
index 3f2f2e96fef..bf3ecd45598 100644
--- a/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-link-with-icon (cdn)', () => {
-  it('should load the default dds-link-with-icon example', () => {
+describe('cds-link-with-icon (cdn)', () => {
+  it('should load the default cds-link-with-icon example', () => {
     cy.visit('/link-with-icon/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-link-with-icon | cdn | default');
+    cy.percySnapshot('cds-link-with-icon | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.e2e.js b/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.e2e.js
index 020aee6864b..f62d18bd89b 100644
--- a/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/link-with-icon/link-with-icon.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-link-with-icon', () => {
-  it('should load the default dds-link-with-icon example', () => {
+describe('cds-link-with-icon', () => {
+  it('should load the default cds-link-with-icon example', () => {
     cy.visit('/link-with-icon');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-link-with-icon | default');
+    cy.percySnapshot('cds-link-with-icon | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.cdn.e2e.js
index f9e23336a5e..403b69e3048 100644
--- a/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.cdn.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-locale-modal (cdn)', () => {
-  it('should load the default dds-locale-modal example', () => {
+describe('cds-locale-modal (cdn)', () => {
+  it('should load the default cds-locale-modal example', () => {
     cy.visit('/locale-modal/cdn.html');
 
-    cy.get('[data-autoid="dds--button-expressive"]').click();
+    cy.get('[data-autoid="cds--button-expressive"]').click();
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-locale-modal | cdn | default');
+    cy.percySnapshot('cds-locale-modal | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.e2e.js b/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.e2e.js
index 5b1f1092678..a5dbc7d5fde 100644
--- a/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/locale-modal/locale-modal.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-locale-modal', () => {
-  it('should load the default dds-locale-modal example', () => {
+describe('cds-locale-modal', () => {
+  it('should load the default cds-locale-modal example', () => {
     cy.visit('/locale-modal');
 
-    cy.get('[data-autoid="dds--button-expressive"]').click();
+    cy.get('[data-autoid="cds--button-expressive"]').click();
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-locale-modal | default');
+    cy.percySnapshot('cds-locale-modal | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.cdn.e2e.js
index de3f6e83e4e..2f7daa2fb68 100644
--- a/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-logo-grid (cdn)', () => {
-  it('should load the default dds-logo-grid example', () => {
+describe('cds-logo-grid (cdn)', () => {
+  it('should load the default cds-logo-grid example', () => {
     cy.visit('/logo-grid/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-logo-grid | cdn | default');
+    cy.percySnapshot('cds-logo-grid | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.e2e.js b/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.e2e.js
index a951fcc52e0..5a0541b8c5d 100644
--- a/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/logo-grid/logo-grid.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-logo-grid', () => {
-  it('should load the default dds-logo-grid example', () => {
+describe('cds-logo-grid', () => {
+  it('should load the default cds-logo-grid example', () => {
     cy.visit('/logo-grid');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-logo-grid | default');
+    cy.percySnapshot('cds-logo-grid | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.cdn.e2e.js
index b86ac9d0bad..86499a9b2d3 100644
--- a/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.cdn.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-masthead (cdn)', () => {
-  it('should load the default dds-masthead example', () => {
+describe('cds-masthead (cdn)', () => {
+  it('should load the default cds-masthead example', () => {
     cy.visit('/masthead/cdn.html');
 
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty');
+    cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-masthead | cdn | default');
+    cy.percySnapshot('cds-masthead | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.e2e.js b/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.e2e.js
index 3f07cc68c2d..8739f948b20 100644
--- a/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/masthead/masthead.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-masthead', () => {
-  it('should load the default dds-masthead example', () => {
+describe('cds-masthead', () => {
+  it('should load the default cds-masthead example', () => {
     cy.visit('/masthead');
 
-    cy.get('[data-autoid="dds--masthead-default__l0-nav0"]').should('not.be.empty');
+    cy.get('[data-autoid="cds--masthead-default__l0-nav0"]').should('not.be.empty');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-masthead | default');
+    cy.percySnapshot('cds-masthead | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.cdn.e2e.js
index a8af3d61de9..18d6e6d1f62 100644
--- a/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-pictogram-item (cdn)', () => {
-  it('should load the default dds-pictogram-item example', () => {
+describe('cds-pictogram-item (cdn)', () => {
+  it('should load the default cds-pictogram-item example', () => {
     cy.visit('/pictogram-item/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-pictogram-item | cdn | default');
+    cy.percySnapshot('cds-pictogram-item | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.e2e.js b/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.e2e.js
index 9d463d48726..9d2102a89d8 100644
--- a/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/pictogram-item/pictogram-item.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-pictogram-item', () => {
-  it('should load the default dds-pictogram-item example', () => {
+describe('cds-pictogram-item', () => {
+  it('should load the default cds-pictogram-item example', () => {
     cy.visit('/pictogram-item');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-pictogram-item | default');
+    cy.percySnapshot('cds-pictogram-item | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/quote/quote.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/quote/quote.cdn.e2e.js
index f3c994e9ef6..6124434a1a7 100644
--- a/packages/web-components/tests/e2e/cypress/integration/quote/quote.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/quote/quote.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-quote (cdn)', () => {
-  it('should load the default dds-quote example', () => {
+describe('cds-quote (cdn)', () => {
+  it('should load the default cds-quote example', () => {
     cy.visit('/quote/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-quote | cdn | default');
+    cy.percySnapshot('cds-quote | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/quote/quote.e2e.js b/packages/web-components/tests/e2e/cypress/integration/quote/quote.e2e.js
index d57a73a8065..c3cac7045e2 100644
--- a/packages/web-components/tests/e2e/cypress/integration/quote/quote.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/quote/quote.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-quote', () => {
-  it('should load the default dds-quote example', () => {
+describe('cds-quote', () => {
+  it('should load the default cds-quote example', () => {
     cy.visit('/quote');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-quote | default');
+    cy.percySnapshot('cds-quote | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.cdn.e2e.js
index 3f9a7f72b3d..7100e8cdf1c 100644
--- a/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-scroll-animations (cdn)', () => {
-  it('should load the default dds-scroll-animations example', () => {
+describe('cds-scroll-animations (cdn)', () => {
+  it('should load the default cds-scroll-animations example', () => {
     cy.visit('/scroll-animations/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-scroll-animations | cdn | default');
+    cy.percySnapshot('cds-scroll-animations | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.e2e.js b/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.e2e.js
index 2f13f95ad1f..9f71f02088c 100644
--- a/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/scroll-animations/scroll-animations.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-scroll-animations', () => {
-  it('should load the default dds-scroll-animations example', () => {
+describe('cds-scroll-animations', () => {
+  it('should load the default cds-scroll-animations example', () => {
     cy.visit('/scroll-animations');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-scroll-animations | default');
+    cy.percySnapshot('cds-scroll-animations | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.cdn.e2e.js
index 413635b44cd..68cc40b2a38 100644
--- a/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-search-with-typeahead (cdn)', () => {
-  it('should load the default dds-search-with-typeahead example', () => {
+describe('cds-search-with-typeahead (cdn)', () => {
+  it('should load the default cds-search-with-typeahead example', () => {
     cy.visit('/search-with-typeahead/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-search-with-typeahead | cdn | default');
+    cy.percySnapshot('cds-search-with-typeahead | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.e2e.js b/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.e2e.js
index 0b691d94db4..36894e3e45d 100644
--- a/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/search-with-typeahead/search-with-typeahead.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-search-with-typeahead', () => {
-  it('should load the default dds-search-with-typeahead example', () => {
+describe('cds-search-with-typeahead', () => {
+  it('should load the default cds-search-with-typeahead example', () => {
     cy.visit('/search-with-typeahead');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-search-with-typeahead | default');
+    cy.percySnapshot('cds-search-with-typeahead | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.cdn.e2e.js
index 7889660c1c0..dd368b4f5bf 100644
--- a/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-table-of-contents (cdn)', () => {
-  it('should load the default dds-table-of-contents example', () => {
+describe('cds-table-of-contents (cdn)', () => {
+  it('should load the default cds-table-of-contents example', () => {
     cy.visit('/table-of-contents/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-table-of-contents | cdn | default');
+    cy.percySnapshot('cds-table-of-contents | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.e2e.js b/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.e2e.js
index ac7c1683922..21eada4de20 100644
--- a/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/table-of-contents/table-of-contents.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-table-of-contents', () => {
-  it('should load the default dds-table-of-contents example', () => {
+describe('cds-table-of-contents', () => {
+  it('should load the default cds-table-of-contents example', () => {
     cy.visit('/table-of-contents');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-table-of-contents | default');
+    cy.percySnapshot('cds-table-of-contents | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.cdn.e2e.js
index 8b00ff9dbee..c9947ea0245 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tabs-extended-media (cdn)', () => {
-  it('should load the default dds-tabs-extended-media example', () => {
+describe('cds-tabs-extended-media (cdn)', () => {
+  it('should load the default cds-tabs-extended-media example', () => {
     cy.visit('/tabs-extended-media/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tabs-extended-media | cdn | default');
+    cy.percySnapshot('cds-tabs-extended-media | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.e2e.js
index a2588cd9bbf..d24dc8a9ea4 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tabs-extended-media/tabs-extended-media.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tabs-extended-media', () => {
-  it('should load the default dds-tabs-extended-media example', () => {
+describe('cds-tabs-extended-media', () => {
+  it('should load the default cds-tabs-extended-media example', () => {
     cy.visit('/tabs-extended-media');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tabs-extended-media | default');
+    cy.percySnapshot('cds-tabs-extended-media | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.cdn.e2e.js
index 010af591ad3..464244d728d 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tabs-extended (cdn)', () => {
-  it('should load the default dds-tabs-extended example', () => {
+describe('cds-tabs-extended (cdn)', () => {
+  it('should load the default cds-tabs-extended example', () => {
     cy.visit('/tabs-extended/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tabs-extended | cdn | default');
+    cy.percySnapshot('cds-tabs-extended | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.e2e.js
index e448cd7fd37..343dabe999a 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tabs-extended/tabs-extended.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tabs-extended', () => {
-  it('should load the default dds-tabs-extended example', () => {
+describe('cds-tabs-extended', () => {
+  it('should load the default cds-tabs-extended example', () => {
     cy.visit('/tabs-extended');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tabs-extended | default');
+    cy.percySnapshot('cds-tabs-extended | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.cdn.e2e.js
index 298b336ab6f..a444ccb7ffc 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tag-group (cdn)', () => {
-  it('should load the default dds-tag-group example', () => {
+describe('cds-tag-group (cdn)', () => {
+  it('should load the default cds-tag-group example', () => {
     cy.visit('/tag-group/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tag-group | cdn | default');
+    cy.percySnapshot('cds-tag-group | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.e2e.js
index ff7e3df6e1b..ced62b957a3 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tag-group/tag-group.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tag-group', () => {
-  it('should load the default dds-tag-group example', () => {
+describe('cds-tag-group', () => {
+  it('should load the default cds-tag-group example', () => {
     cy.visit('/tag-group');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tag-group | default');
+    cy.percySnapshot('cds-tag-group | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.cdn.e2e.js
index 620e144a7af..dbf37c2b780 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tag-link (cdn)', () => {
-  it('should load the default dds-tag-link example', () => {
+describe('cds-tag-link (cdn)', () => {
+  it('should load the default cds-tag-link example', () => {
     cy.visit('/tag-link/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tag-link | cdn | default');
+    cy.percySnapshot('cds-tag-link | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.e2e.js b/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.e2e.js
index dbc6f6f0936..133d8893151 100644
--- a/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/tag-link/tag-link.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-tag-link', () => {
-  it('should load the default dds-tag-link example', () => {
+describe('cds-tag-link', () => {
+  it('should load the default cds-tag-link example', () => {
     cy.visit('/tag-link');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-tag-link | default');
+    cy.percySnapshot('cds-tag-link | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.cdn.e2e.js
index 248913c6bd8..a147ae2ec91 100644
--- a/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.cdn.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-universal-banner (cdn)', () => {
-  it('should load the default dds-universal-banner example', () => {
-    cy.visit('/universal-banner/cdn.html');
+describe('c4d-universal-banner (cdn)', () => {
+  it('should load the default c4d-global-banner example', () => {
+    cy.visit('/global-banner/cdn.html');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-universal-banner | cdn | default');
+    cy.percySnapshot('c4d-global-banner | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.e2e.js b/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.e2e.js
index 9bd5e6dac54..f7d979f081b 100644
--- a/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/universal-banner/universal-banner.e2e.js
@@ -7,11 +7,11 @@
 
 'use strict';
 
-describe('dds-universal-banner', () => {
-  it('should load the default dds-universal-banner example', () => {
-    cy.visit('/universal-banner');
+describe('c4d-global-banner', () => {
+  it('should load the default c4d-global-banner example', () => {
+    cy.visit('/global-banner');
 
     // Take a snapshot for visual diffing
-    cy.percySnapshot('dds-universal-banner | default');
+    cy.percySnapshot('c4d-global-banner | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.cdn.e2e.js b/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.cdn.e2e.js
index 2cd6a74aa76..640343a6394 100644
--- a/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.cdn.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.cdn.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-video-player (cdn)', () => {
-  it('should load the default dds-video-player example', () => {
+describe('cds-video-player (cdn)', () => {
+  it('should load the default cds-video-player example', () => {
     cy.visit('/video-player/cdn.html');
 
     // Take a snapshot for visual diffing
     // NOTE: This is causing false positives, will shut off for now and just
     // check for build errors
-    // cy.percySnapshot('dds-video-player | cdn | default');
+    // cy.percySnapshot('cds-video-player | cdn | default');
   });
 });
diff --git a/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.e2e.js b/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.e2e.js
index 2f75e02a745..3584ae13b12 100644
--- a/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.e2e.js
+++ b/packages/web-components/tests/e2e/cypress/integration/video-player/video-player.e2e.js
@@ -7,13 +7,13 @@
 
 'use strict';
 
-describe('dds-video-player', () => {
-  it('should load the default dds-video-player example', () => {
+describe('cds-video-player', () => {
+  it('should load the default cds-video-player example', () => {
     cy.visit('/video-player');
 
     // Take a snapshot for visual diffing
     // NOTE: This is causing false positives, will shut off for now and just
     // check for build errors
-    // cy.percySnapshot('dds-video-player | default');
+    // cy.percySnapshot('cds-video-player | default');
   });
 });
diff --git a/packages/web-components/tests/karma-accessibility-checker.conf.js b/packages/web-components/tests/karma-accessibility-checker.conf.js
index 498f06d6529..07a97c87769 100644
--- a/packages/web-components/tests/karma-accessibility-checker.conf.js
+++ b/packages/web-components/tests/karma-accessibility-checker.conf.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -12,7 +12,7 @@
 /* eslint-disable global-require */
 
 const path = require('path');
-const sass = require('node-sass');
+const sass = require('sass');
 const webpack = require('webpack');
 
 function normalizeBrowser(browser) {
@@ -117,11 +117,7 @@ module.exports = function setupKarma(config) {
               },
           {
             test: /\.js$/,
-            include: [
-              __dirname,
-              path.dirname(require.resolve('lit-html')),
-              path.dirname(require.resolve('lit-element')),
-            ],
+            include: [__dirname, path.dirname(require.resolve('lit'))],
             use: {
               loader: 'babel-loader',
               options: {
@@ -182,7 +178,7 @@ module.exports = function setupKarma(config) {
       plugins: [
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify('test'),
-          'process.env.DDS_CLOUD_MASTHEAD': JSON.stringify('true'),
+          'process.env.C4D_CLOUD_MASTHEAD': JSON.stringify('true'),
         }),
         new webpack.NormalModuleReplacementPlugin(reServices, (resource) => {
           const { request } = resource;
diff --git a/packages/web-components/tests/karma-test-shim.js b/packages/web-components/tests/karma-test-shim.js
index 838c5a188b3..ef9cca16256 100644
--- a/packages/web-components/tests/karma-test-shim.js
+++ b/packages/web-components/tests/karma-test-shim.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/tests/karma.conf.js b/packages/web-components/tests/karma.conf.js
index f299cae8d10..ed535193914 100644
--- a/packages/web-components/tests/karma.conf.js
+++ b/packages/web-components/tests/karma.conf.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -12,7 +12,7 @@
 /* eslint-disable global-require */
 
 const path = require('path');
-const sass = require('node-sass');
+const sass = require('sass');
 const webpack = require('webpack');
 
 function normalizeBrowser(browser) {
@@ -91,8 +91,8 @@ module.exports = function setupKarma(config) {
             use: 'null-loader',
           },
           {
-            test: /[\\/]styles[\\/]icons[\\/]/i,
-            use: [require.resolve('../tools/svg-result-ibmdotcom-icon-loader')],
+            test: /\.svg$/,
+            use: [{ loader: 'raw-loader' }],
           },
           {
             test: /\.ts$/,
@@ -126,11 +126,7 @@ module.exports = function setupKarma(config) {
               },
           {
             test: /\.js$/,
-            include: [
-              __dirname,
-              path.dirname(require.resolve('lit-html')),
-              path.dirname(require.resolve('lit-element')),
-            ],
+            include: [__dirname, path.dirname(require.resolve('lit'))],
             use: {
               loader: 'babel-loader',
               options: {
@@ -187,7 +183,7 @@ module.exports = function setupKarma(config) {
       plugins: [
         new webpack.DefinePlugin({
           'process.env.NODE_ENV': JSON.stringify('test'),
-          'process.env.DDS_CLOUD_MASTHEAD': JSON.stringify('true'),
+          'process.env.C4D_CLOUD_MASTHEAD': JSON.stringify('true'),
         }),
         new webpack.NormalModuleReplacementPlugin(reServices, (resource) => {
           const { request } = resource;
diff --git a/packages/web-components/tests/snapshots/c4d-background-media.md b/packages/web-components/tests/snapshots/c4d-background-media.md
new file mode 100644
index 00000000000..d622bf23726
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-background-media.md
@@ -0,0 +1,38 @@
+# `c4d-background-media`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--background-media--container cds--background-media--image cds--background-media--mobile-position cds--background-media--mobile-position--bottom">
+  <div class="cds--background-media--gradient cds--background-media--gradient--left-to-right">
+  </div>
+  <div
+    class="cds--background-media--item"
+    style="opacity:1"
+  >
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--background-media--container cds--background-media--image cds--background-media--mobile-position cds--background-media--mobile-position--bottom">
+  <div class="cds--background-media--gradient cds--background-media--gradient--left-to-right">
+  </div>
+  <div
+    class="cds--background-media--item"
+    style="opacity:1"
+  >
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-button-group.md b/packages/web-components/tests/snapshots/c4d-button-group.md
new file mode 100644
index 00000000000..c610e317e9a
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-button-group.md
@@ -0,0 +1,33 @@
+# `c4d-button-group`
+
+#### `renders c4d-button-group properly`
+
+```
+<slot>
+</slot>
+
+```
+
+#### `renders c4d-button-group-item properly`
+
+```
+<a
+  class="cds--btn cds--btn--expressive cds--btn--lg cds--btn--primary cds--layout--size-lg"
+  href="https://example.com"
+  id="button"
+  part="button"
+  role="button"
+  type="button"
+>
+  <slot>
+  </slot>
+  <slot name="icon">
+    <span class="cds--visually-hidden">
+      undefined
+    </span>
+    undefined
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-callout-quote.md b/packages/web-components/tests/snapshots/c4d-callout-quote.md
new file mode 100644
index 00000000000..68aebf2a460
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-callout-quote.md
@@ -0,0 +1,49 @@
+# `c4d-callout-quote`
+
+#### `Renders as expected`
+
+```
+<div class="cds--callout__column">
+  <div class="cds--callout__content">
+    <div class="cds--quote__container">
+      <div class="cds--quote__wrapper">
+        <span class="cds--quote__mark">
+          “
+        </span>
+        <blockquote class="cds--quote__copy">
+          <slot>
+          </slot>
+          <span class="cds--quote__mark-closing">
+            ”
+          </span>
+        </blockquote>
+        <div
+          class="cds--quote__source"
+          hidden=""
+        >
+          <slot name="source-heading">
+          </slot>
+          <slot name="source-copy">
+          </slot>
+          <slot name="source-bottom-copy">
+          </slot>
+        </div>
+        <div
+          class="cds--quote__footer"
+          hidden=""
+        >
+          <c4d-hr
+            data-autoid="c4d--hr"
+            role="separator"
+          >
+          </c4d-hr>
+          <slot name="footer">
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-callout-with-media.md b/packages/web-components/tests/snapshots/c4d-callout-with-media.md
new file mode 100644
index 00000000000..cc2a4ceac75
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-callout-with-media.md
@@ -0,0 +1,106 @@
+# `c4d-callout-with-media`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--callout__column">
+  <div class="cds--callout__content">
+    <div class="cds--content-layout">
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--content-layout__body"
+        hidden=""
+      >
+        <slot name="copy">
+        </slot>
+        <slot>
+        </slot>
+        <slot name="media">
+        </slot>
+        <div
+          hidden=""
+          style=""
+        >
+          <slot name="footer">
+          </slot>
+        </div>
+      </div>
+      <slot name="complementary">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with image attributes`
+
+```
+<div class="cds--callout__column">
+  <div class="cds--callout__content">
+    <div class="cds--content-layout">
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--content-layout__body"
+        hidden=""
+      >
+        <slot name="copy">
+        </slot>
+        <slot>
+        </slot>
+        <slot name="media">
+        </slot>
+        <div
+          hidden=""
+          style=""
+        >
+          <slot name="footer">
+          </slot>
+        </div>
+      </div>
+      <slot name="complementary">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with video attributes`
+
+```
+<div class="cds--callout__column">
+  <div class="cds--callout__content">
+    <div class="cds--content-layout">
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--content-layout__body"
+        hidden=""
+      >
+        <slot name="copy">
+        </slot>
+        <slot>
+        </slot>
+        <slot name="media">
+        </slot>
+        <div
+          hidden=""
+          style=""
+        >
+          <slot name="footer">
+          </slot>
+        </div>
+      </div>
+      <slot name="complementary">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-card-cta-footer.md b/packages/web-components/tests/snapshots/c4d-card-cta-footer.md
new file mode 100644
index 00000000000..9e0d3783537
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-card-cta-footer.md
@@ -0,0 +1,54 @@
+# `c4d-card-cta-footer`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  aria-label=""
+  class="c4d-ce--card__footer cds--card__footer cds--link cds--link--lg cds--link-with-icon cds--link-with-icon--inline-icon cds--link-with-icon__icon-right"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <span
+    class="cds--card__cta__copy"
+    hidden=""
+  >
+    <slot>
+    </slot>
+  </span>
+  <slot name="icon">
+    <span class="bx--visually-hidden">
+    </span>
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  aria-label=" - This link plays a video"
+  class="c4d-ce--card__footer cds--card__footer cds--link cds--link--lg cds--link-with-icon cds--link-with-icon--inline-icon cds--link-with-icon__icon-right"
+  href="#"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <span class="cds--card__cta__copy">
+    <slot>
+    </slot>
+    undefined-180000
+  </span>
+  <slot name="icon">
+    <span class="bx--visually-hidden">
+      - This link plays a video
+    </span>
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-card-cta.md b/packages/web-components/tests/snapshots/c4d-card-cta.md
new file mode 100644
index 00000000000..30cc5b452ec
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-card-cta.md
@@ -0,0 +1,98 @@
+# `c4d-card-cta`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--card cds--tile">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--card cds--tile">
+  <slot name="image">
+  </slot>
+  <c4d-card-cta-image
+    alt="video-name-foo"
+    class="cds--card__video-thumbnail"
+    data-autoid="c4d--image"
+    default-src="https://example.com/video-thumbnail-foo"
+  >
+    [object Object]
+  </c4d-card-cta-image>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <c4d-card-heading
+        aria-level="3"
+        data-autoid="c4d--card-heading"
+        role="heading"
+      >
+        video-name-foo-caption
+      </c4d-card-heading>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render footer with various attributes`
+
+```
+<a
+  aria-label="video-name-foo, DURATION undefined - This link plays a video"
+  class="c4d-ce--card__footer cds--card__footer cds--link cds--link--lg cds--link-with-icon cds--link-with-icon--inline-icon cds--link-with-icon__icon-right"
+  href="#"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <span class="cds--card__cta__copy">
+    <slot>
+    </slot>
+    undefined-180000
+  </span>
+  <slot name="icon">
+    <span class="bx--visually-hidden">
+      - This link plays a video
+    </span>
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-card-in-card.md b/packages/web-components/tests/snapshots/c4d-card-in-card.md
new file mode 100644
index 00000000000..8787b887988
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-card-in-card.md
@@ -0,0 +1,58 @@
+# `c4d-card-in-card`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--card cds--card-in-card cds--tile">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--card cds--card--link cds--card-in-card cds--tile cds--tile--clickable">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-card-section-offset.md b/packages/web-components/tests/snapshots/c4d-card-section-offset.md
new file mode 100644
index 00000000000..d31f9de482c
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-card-section-offset.md
@@ -0,0 +1,40 @@
+# `c4d-card-section-offset`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<slot name="image-top">
+</slot>
+<div class="cds--card-section-offset__content">
+  <slot name="heading">
+  </slot>
+  <slot name="action">
+  </slot>
+</div>
+<slot name="card-group">
+</slot>
+<slot name="image-bottom">
+</slot>
+
+```
+
+####   `should render with various attributes`
+
+```
+<slot name="image-top">
+</slot>
+<div class="cds--card-section-offset__content">
+  <slot name="heading">
+  </slot>
+  <slot name="action">
+  </slot>
+</div>
+<slot name="card-group">
+</slot>
+<slot name="image-bottom">
+</slot>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-card-section-simple.md b/packages/web-components/tests/snapshots/c4d-card-section-simple.md
new file mode 100644
index 00000000000..4e10516ab76
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-card-section-simple.md
@@ -0,0 +1,44 @@
+# `c4d-card-section-simple`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-section cds--content-section-layout">
+  <div class="cds--content-section__leading">
+    <slot name="heading">
+    </slot>
+    <slot name="copy">
+    </slot>
+    <slot name="footer">
+    </slot>
+  </div>
+  <div class="cds--content-section__body">
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-section cds--content-section-layout">
+  <div class="cds--content-section__leading">
+    <slot name="heading">
+    </slot>
+    <slot name="copy">
+    </slot>
+    <slot name="footer">
+    </slot>
+  </div>
+  <div class="cds--content-section__body">
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-card.md b/packages/web-components/tests/snapshots/c4d-card.md
new file mode 100644
index 00000000000..3e5a4f8240c
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-card.md
@@ -0,0 +1,58 @@
+# `c4d-card`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--card cds--tile">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--card cds--tile">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-carousel.md b/packages/web-components/tests/snapshots/c4d-carousel.md
new file mode 100644
index 00000000000..3b4e433809b
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-carousel.md
@@ -0,0 +1,63 @@
+# `c4d-carousel`
+
+## `Rendering`
+
+####   `should render with minimum attributes`
+
+```
+<div
+  aria-labelledby="carousel-title"
+  role="region"
+>
+  <div id="carousel-title">
+    <slot name="title">
+      <span class="cds--visually-hidden">
+        Carousel
+      </span>
+    </slot>
+  </div>
+  <div class="c4d--carousel__scroll-container">
+    <div
+      class="c4d--carousel__scroll-contents"
+      style="left:0px"
+    >
+      <slot>
+      </slot>
+    </div>
+  </div>
+  <nav
+    aria-label="Carousel Navigation"
+    class="c4d--carousel__navigation"
+  >
+    <button
+      aria-label="previous"
+      class="cds--btn cds--btn--icon-only cds--btn--tertiary c4d--carousel__navigation__btn"
+      disabled=""
+      part="prev-button"
+      title="previous"
+    >
+    </button>
+    <span
+      aria-hidden="true"
+      class="bx--carousel__navigation__status"
+    >
+      1 / 0
+    </span>
+    <span
+      aria-live="polite"
+      class="cds--visually-hidden"
+    >
+    </span>
+    <button
+      aria-label="next"
+      class="cds--btn cds--btn--icon-only cds--btn--tertiary c4d--carousel__navigation__btn"
+      disabled=""
+      part="next-button"
+      title="next"
+    >
+    </button>
+  </nav>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-card-static 2.md b/packages/web-components/tests/snapshots/c4d-content-block-card-static 2.md
new file mode 100644
index 00000000000..36f9521602e
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-card-static 2.md	
@@ -0,0 +1,159 @@
+# `cds-content-block-card-static`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<cds-content-block-card-static>
+  <cds-card-group-item
+    color-scheme=""
+    data-autoid="cds--card-group-item"
+    pictogram-placement=""
+    size="md"
+  >
+  </cds-card-group-item>
+  <cds-card-group
+    data-autoid="cds--card-group"
+    grid-mode="collapsed"
+  >
+  </cds-card-group>
+  <cds-content-item data-autoid="cds--content-item">
+    <cds-content-item-heading
+      aria-level="4"
+      data-autoid="cds--content-item__heading"
+      role="heading"
+      slot="heading"
+    >
+    </cds-content-item-heading>
+    <cds-content-item-copy data-autoid="cds--content-item__copy">
+    </cds-content-item-copy>
+  </cds-content-item>
+  <cds-button-group
+    data-autoid="cds--button-group"
+    role="list"
+  >
+    <cds-button-group-item
+      cta-type=""
+      data-autoid="cds--button-group-item"
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Button 1
+    </cds-button-group-item>
+    <cds-button-group-item
+      cta-type=""
+      data-autoid="cds--button-group-item"
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Buuton 2
+    </cds-button-group-item>
+  </cds-button-group>
+</cds-content-block-card-static>
+
+```
+
+####   `should render with various attributes`
+
+```
+<cds-content-block-card-static>
+  <cds-card-group-item
+    color-scheme=""
+    data-autoid="cds--card-group-item"
+    pictogram-placement=""
+    size="md"
+  >
+    heading-foo
+  </cds-card-group-item>
+  <cds-card-group
+    data-autoid="cds--card-group"
+    grid-mode="collapsed"
+  >
+    <cds-card-group-item
+      color-scheme=""
+      data-autoid="cds--card-group-item"
+      href="https://example.com"
+      pictogram-placement=""
+      size="md"
+    >
+      <cds-card-heading
+        aria-level="3"
+        data-autoid="cds--card-heading"
+        role="heading"
+        slot="heading"
+      >
+        Nunc convallis lobortis
+      </cds-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+                Phasellus at elit sollicitudin, sodales nulla quis, consequat
+                libero.
+      </p>
+      <cds-card-cta-footer
+        color-scheme=""
+        cta-type=""
+        data-autoid="cds--card-cta-footer"
+        icon-placement="right"
+        slot="footer"
+      >
+      </cds-card-cta-footer>
+    </cds-card-group-item>
+  </cds-card-group>
+  <cds-content-item data-autoid="cds--content-item">
+    <cds-content-item-heading
+      aria-level="4"
+      data-autoid="cds--content-item__heading"
+      role="heading"
+      slot="heading"
+    >
+      Lorem ipsum
+    </cds-content-item-heading>
+    <cds-content-item-copy data-autoid="cds--content-item__copy">
+      <cds-content-item-paragraph data-autoid="cds--content-item-paragraph">
+        ipsum dolor sit amet
+      </cds-content-item-paragraph>
+    </cds-content-item-copy>
+  </cds-content-item>
+  <cds-button-group
+    data-autoid="cds--button-group"
+    role="list"
+  >
+    <cds-button-group-item
+      cta-type=""
+      data-autoid="cds--button-group-item"
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Button 1
+    </cds-button-group-item>
+    <cds-button-group-item
+      cta-type=""
+      data-autoid="cds--button-group-item"
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Buuton 2
+    </cds-button-group-item>
+  </cds-button-group>
+</cds-content-block-card-static>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-card-static.md b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md
new file mode 100644
index 00000000000..585950b30c2
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-card-static.md
@@ -0,0 +1,166 @@
+# `c4d-content-block-card-static`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<c4d-content-block-card-static>
+  <c4d-card-group-item
+    color-scheme=""
+    data-autoid="c4d--card-group-item"
+    pictogram-placement=""
+    size="md"
+  >
+  </c4d-card-group-item>
+  <c4d-card-group
+    data-autoid="c4d--card-group"
+    grid-mode="collapsed"
+  >
+  </c4d-card-group>
+  <c4d-content-item data-autoid="c4d--content-item">
+    <c4d-content-item-heading
+      aria-level="4"
+      data-autoid="c4d--content-item__heading"
+      role="heading"
+      slot="heading"
+    >
+    </c4d-content-item-heading>
+    <c4d-content-item-copy data-autoid="c4d--content-item__copy">
+    </c4d-content-item-copy>
+  </c4d-content-item>
+  <c4d-button-group
+    data-autoid="c4d--button-group"
+    role="list"
+    style="--c4d--button-group--item-count: 2;"
+  >
+    <c4d-button-group-item
+      cta-type=""
+      data-autoid="c4d--button-group-item"
+      isexpressive=""
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Button 1
+    </c4d-button-group-item>
+    <c4d-button-group-item
+      cta-type=""
+      data-autoid="c4d--button-group-item"
+      isexpressive=""
+      kind="tertiary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Buuton 2
+    </c4d-button-group-item>
+  </c4d-button-group>
+</c4d-content-block-card-static>
+
+```
+
+####   `should render with various attributes`
+
+```
+<c4d-content-block-card-static>
+  <c4d-card-group-item
+    color-scheme=""
+    data-autoid="c4d--card-group-item"
+    pictogram-placement=""
+    size="md"
+  >
+    heading-foo
+  </c4d-card-group-item>
+  <c4d-card-group
+    data-autoid="c4d--card-group"
+    grid-mode="collapsed"
+    style="--c4d--card-group--cards-in-row: 3;"
+  >
+    <c4d-card-group-item
+      color-scheme=""
+      data-autoid="c4d--card-group-item"
+      href="https://example.com"
+      pictogram-placement=""
+      size="md"
+    >
+      <c4d-card-heading
+        aria-level="3"
+        data-autoid="c4d--card-heading"
+        role="heading"
+        slot="heading"
+      >
+        Nunc convallis lobortis
+      </c4d-card-heading>
+      <p>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean
+                et ultricies est. Mauris iaculis eget dolor nec hendrerit.
+                Phasellus at elit sollicitudin, sodales nulla quis, consequat
+                libero.
+      </p>
+      <c4d-card-cta-footer
+        color-scheme=""
+        cta-type=""
+        data-autoid="c4d--card-cta-footer"
+        icon-placement="right"
+        slot="footer"
+      >
+      </c4d-card-cta-footer>
+    </c4d-card-group-item>
+  </c4d-card-group>
+  <c4d-content-item data-autoid="c4d--content-item">
+    <c4d-content-item-heading
+      aria-level="4"
+      data-autoid="c4d--content-item__heading"
+      role="heading"
+      slot="heading"
+    >
+      Lorem ipsum
+    </c4d-content-item-heading>
+    <c4d-content-item-copy data-autoid="c4d--content-item__copy">
+      <c4d-content-item-paragraph data-autoid="c4d--content-item-paragraph">
+        ipsum dolor sit amet
+      </c4d-content-item-paragraph>
+    </c4d-content-item-copy>
+  </c4d-content-item>
+  <c4d-button-group
+    data-autoid="c4d--button-group"
+    role="list"
+    style="--c4d--button-group--item-count: 2;"
+  >
+    <c4d-button-group-item
+      cta-type=""
+      data-autoid="c4d--button-group-item"
+      isexpressive=""
+      kind="primary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Button 1
+    </c4d-button-group-item>
+    <c4d-button-group-item
+      cta-type=""
+      data-autoid="c4d--button-group-item"
+      isexpressive=""
+      kind="tertiary"
+      role="listitem"
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
+    >
+      Buuton 2
+    </c4d-button-group-item>
+  </c4d-button-group>
+</c4d-content-block-card-static>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-cards.md b/packages/web-components/tests/snapshots/c4d-content-block-cards.md
new file mode 100644
index 00000000000..21f807eb403
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-cards.md
@@ -0,0 +1,66 @@
+# `c4d-content-block-cards`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout cds--content-layout--card-group">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot>
+    </slot>
+    <slot name="media">
+    </slot>
+    <div
+      class="false"
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout cds--content-layout--card-group">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot>
+    </slot>
+    <slot name="media">
+    </slot>
+    <div
+      class="false"
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-headlines.md b/packages/web-components/tests/snapshots/c4d-content-block-headlines.md
new file mode 100644
index 00000000000..f61267080d0
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-headlines.md
@@ -0,0 +1,37 @@
+# `c4d-content-block-headlines`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout cds--content-layout--with-headlines cds--layout--border">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <div
+      class="cds--content-block-headlines__item-container"
+      hidden=""
+    >
+      <slot>
+      </slot>
+    </div>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-horizontal.md b/packages/web-components/tests/snapshots/c4d-content-block-horizontal.md
new file mode 100644
index 00000000000..3a05ec26cdb
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-horizontal.md
@@ -0,0 +1,64 @@
+# `c4d-content-block-horizontal`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-media.md b/packages/web-components/tests/snapshots/c4d-content-block-media.md
new file mode 100644
index 00000000000..35349c6b404
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-media.md
@@ -0,0 +1,64 @@
+# `c4d-content-block-media`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot>
+    </slot>
+    <slot name="media">
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot>
+    </slot>
+    <slot name="media">
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-segmented.md b/packages/web-components/tests/snapshots/c4d-content-block-segmented.md
new file mode 100644
index 00000000000..8e5ef55ce60
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-segmented.md
@@ -0,0 +1,64 @@
+# `c4d-content-block-segmented`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-block-simple.md b/packages/web-components/tests/snapshots/c4d-content-block-simple.md
new file mode 100644
index 00000000000..9cfcf3fd9dd
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-block-simple.md
@@ -0,0 +1,64 @@
+# `c4d-content-block-simple`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot>
+    </slot>
+    <slot name="media">
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout cds--content-layout--with-complementary cds--layout--border">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot>
+    </slot>
+    <slot name="media">
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-group-banner.md b/packages/web-components/tests/snapshots/c4d-content-group-banner.md
new file mode 100644
index 00000000000..f8363091150
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-group-banner.md
@@ -0,0 +1,64 @@
+# `c4d-content-group-banner`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-group-cards.md b/packages/web-components/tests/snapshots/c4d-content-group-cards.md
new file mode 100644
index 00000000000..672594281d9
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-group-cards.md
@@ -0,0 +1,82 @@
+# `c4d-content-group-cards`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <div
+      class="cds--content-group__children cds--content-group__col"
+      hidden=""
+    >
+      <div class="cds--content-group-cards-group cds--grid--condensed">
+        <div class="cds--content-group-cards__row">
+          <slot>
+          </slot>
+          <slot name="media">
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <div
+      class="cds--content-group__children cds--content-group__col"
+      hidden=""
+    >
+      <div class="cds--content-group-cards-group cds--grid--condensed">
+        <div class="cds--content-group-cards__row">
+          <slot>
+          </slot>
+          <slot name="media">
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-group-simple.md b/packages/web-components/tests/snapshots/c4d-content-group-simple.md
new file mode 100644
index 00000000000..ef534525f95
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-group-simple.md
@@ -0,0 +1,58 @@
+# `c4d-content-group-simple`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      hidden=""
+      style=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div class="cds--content-layout__body">
+    <slot name="copy">
+    </slot>
+    <slot name="media">
+    </slot>
+    <slot>
+    </slot>
+    <div style="">
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-item-horizontal.md b/packages/web-components/tests/snapshots/c4d-content-item-horizontal.md
new file mode 100644
index 00000000000..cf458d36e71
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-item-horizontal.md
@@ -0,0 +1,226 @@
+# `c4d-content-item-horizontal`
+
+## `Misc attributes - Default`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-item-horizontal__heading-wrapper">
+  <slot name="eyebrow">
+  </slot>
+  <slot name="heading">
+  </slot>
+</div>
+<div class="cds--content-item-horizontal__content-wrapper">
+  <slot>
+  </slot>
+  <div
+    class="cds--content-item__cta"
+    hidden=""
+  >
+    <slot name="footer">
+    </slot>
+  </div>
+  <slot name="media">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-item-horizontal__heading-wrapper">
+  <slot name="eyebrow">
+  </slot>
+  <slot name="heading">
+  </slot>
+</div>
+<div class="cds--content-item-horizontal__content-wrapper">
+  <slot>
+  </slot>
+  <div
+    class="cds--content-item__cta"
+    hidden=""
+  >
+    <slot name="footer">
+    </slot>
+  </div>
+  <slot name="media">
+  </slot>
+</div>
+
+```
+
+## `Misc attributes - WithMedia`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-item-horizontal-media__align-right cds--content-item-horizontal__row">
+  <div class="cds--content-item-horizontal__col">
+    <slot name="eyebrow">
+    </slot>
+    <slot name="heading">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      class="cds--content-item__cta"
+      hidden=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <div class="cds--content-item-horizontal__col">
+    <slot name="media">
+    </slot>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-item-horizontal-media__align-right cds--content-item-horizontal__row">
+  <div class="cds--content-item-horizontal__col">
+    <slot name="eyebrow">
+    </slot>
+    <slot name="heading">
+    </slot>
+    <slot>
+    </slot>
+    <div
+      class="cds--content-item__cta"
+      hidden=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+  <div class="cds--content-item-horizontal__col">
+    <slot name="media">
+    </slot>
+  </div>
+</div>
+
+```
+
+## `Misc attributes - WithFeaturedMedia`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-item-horizontal__row">
+  <div class="cds--content-item-horizontal__col">
+    <slot name="eyebrow">
+    </slot>
+    <slot name="heading">
+    </slot>
+  </div>
+  <div class="cds--content-item-horizontal__col">
+    <slot>
+    </slot>
+    <div
+      class="cds--content-item__cta"
+      hidden=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<div class="cds--content-item-horizontal__row">
+  <slot name="media">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-item-horizontal__row">
+  <div class="cds--content-item-horizontal__col">
+    <slot name="eyebrow">
+    </slot>
+    <slot name="heading">
+    </slot>
+  </div>
+  <div class="cds--content-item-horizontal__col">
+    <slot>
+    </slot>
+    <div
+      class="cds--content-item__cta"
+      hidden=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<div class="cds--content-item-horizontal__row">
+  <slot name="media">
+  </slot>
+</div>
+
+```
+
+## `Misc attributes - WithThumbnail`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-item-horizontal__body-wrapper">
+  <div class="cds--content-item-horizontal__heading-wrapper">
+    <slot name="heading">
+    </slot>
+  </div>
+  <div class="cds--content-item-horizontal__content-wrapper">
+    <slot>
+    </slot>
+    <div
+      class="cds--content-item__cta"
+      hidden=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<div class="cds--content-item-horizontal__col--2">
+  <slot name="thumbnail">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-item-horizontal__body-wrapper">
+  <div class="cds--content-item-horizontal__heading-wrapper">
+    <slot name="heading">
+    </slot>
+  </div>
+  <div class="cds--content-item-horizontal__content-wrapper">
+    <slot>
+    </slot>
+    <div
+      class="cds--content-item__cta"
+      hidden=""
+    >
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<div class="cds--content-item-horizontal__col--2">
+  <slot name="thumbnail">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-item.md b/packages/web-components/tests/snapshots/c4d-content-item.md
new file mode 100644
index 00000000000..2e8a0c6b1fc
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-item.md
@@ -0,0 +1,43 @@
+# `c4d-content-item`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<slot name="heading">
+</slot>
+<div>
+  <slot name="media">
+  </slot>
+</div>
+<slot>
+</slot>
+<div
+  class="cds--content-item__cta"
+  hidden=""
+>
+  <slot name="footer">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<slot name="heading">
+</slot>
+<div>
+  <slot name="media">
+  </slot>
+</div>
+<slot>
+</slot>
+<div class="cds--content-item__cta">
+  <slot name="footer">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-content-section.md b/packages/web-components/tests/snapshots/c4d-content-section.md
new file mode 100644
index 00000000000..529ca266309
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-content-section.md
@@ -0,0 +1,22 @@
+# `c4d-content-section`
+
+#### `renders properly`
+
+```
+<div class="cds--content-section cds--content-section-layout">
+  <div class="cds--content-section__leading">
+    <slot name="heading">
+    </slot>
+    <slot name="copy">
+    </slot>
+    <slot name="footer">
+    </slot>
+  </div>
+  <div class="cds--content-section__body">
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-cta-block.md b/packages/web-components/tests/snapshots/c4d-cta-block.md
new file mode 100644
index 00000000000..367b524b2e7
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-cta-block.md
@@ -0,0 +1,136 @@
+# `c4d-cta-block`
+
+#### `Renders Default`
+
+```
+<div class="cds--content-layout">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <div
+      class="cds--content-layout__copy"
+      hidden=""
+    >
+      <slot name="copy">
+      </slot>
+    </div>
+    <div
+      class="cds--content-layout__cta"
+      hidden=""
+    >
+      <slot name="action">
+      </slot>
+    </div>
+    <div
+      class="cds--content-layout__link-list"
+      hidden=""
+    >
+      <slot name="link-list">
+      </slot>
+    </div>
+    <div
+      class="cds--helper-wrapper cds--helper-wrapper--less-space"
+      hidden=""
+    >
+      <div class="cds--content-item-wrapper">
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout cds--content-layout--border">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <div
+      class="cds--content-layout__copy"
+      hidden=""
+    >
+      <slot name="copy">
+      </slot>
+    </div>
+    <div
+      class="cds--content-layout__cta"
+      hidden=""
+    >
+      <slot name="action">
+      </slot>
+    </div>
+    <div
+      class="cds--content-layout__link-list"
+      hidden=""
+    >
+      <slot name="link-list">
+      </slot>
+    </div>
+    <div
+      class="cds--helper-wrapper cds--helper-wrapper--less-space"
+      hidden=""
+    >
+      <div class="cds--content-item-wrapper">
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout cds--content-layout--border">
+  <slot name="heading">
+  </slot>
+  <div class="cds--content-layout__body">
+    <div
+      class="cds--content-layout__copy"
+      hidden=""
+    >
+      <slot name="copy">
+      </slot>
+    </div>
+    <div class="cds--content-layout__cta">
+      <slot name="action">
+      </slot>
+    </div>
+    <div
+      class="cds--content-layout__link-list"
+      hidden=""
+    >
+      <slot name="link-list">
+      </slot>
+    </div>
+    <div class="cds--helper-wrapper">
+      <div class="cds--content-item-wrapper">
+        <slot>
+        </slot>
+      </div>
+    </div>
+  </div>
+  <slot name="complementary">
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-expressive-modal.md b/packages/web-components/tests/snapshots/c4d-expressive-modal.md
new file mode 100644
index 00000000000..3c8744287db
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-expressive-modal.md
@@ -0,0 +1,216 @@
+# `c4d-expressive-modal`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div
+      class="c4d-ce--modal__header--with-body"
+      id="c4d--modal-header"
+    >
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="c4d-ce--modal__body c4d-ce--modal__body--with-footer">
+      <slot>
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
+####   `should render with various attributes`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div
+      class="c4d-ce--modal__header--with-body"
+      id="c4d--modal-header"
+    >
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="c4d-ce--modal__body c4d-ce--modal__body--with-footer">
+      <slot>
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
+## `Misc contents`
+
+####   `should render with header only`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div
+      class="c4d-ce--modal__header--with-body"
+      id="c4d--modal-header"
+    >
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="c4d-ce--modal__body">
+      <slot>
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
+####   `should render with header and body only`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div
+      class="c4d-ce--modal__header--with-body"
+      id="c4d--modal-header"
+    >
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="c4d-ce--modal__body">
+      <slot>
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
+####   `should render with header and footer only`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div
+      class="c4d-ce--modal__header--with-body"
+      id="c4d--modal-header"
+    >
+      <slot name="header">
+      </slot>
+    </div>
+    <div class="c4d-ce--modal__body c4d-ce--modal__body--with-footer">
+      <slot>
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-feature-card.md b/packages/web-components/tests/snapshots/c4d-feature-card.md
new file mode 100644
index 00000000000..46b137e13af
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-feature-card.md
@@ -0,0 +1,58 @@
+# `c4d-feature-card`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--card cds--feature-card__card cds--tile">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--card cds--card--link cds--feature-card__card cds--tile cds--tile--clickable">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-feature-cta.md b/packages/web-components/tests/snapshots/c4d-feature-cta.md
new file mode 100644
index 00000000000..7cafab51a24
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-feature-cta.md
@@ -0,0 +1,62 @@
+# `c4d-feature-cta`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--card cds--feature-card__card cds--tile">
+  <slot name="image">
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div
+        class="cds--card__copy"
+        hidden=""
+      >
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--card cds--feature-card__card cds--tile">
+  <slot name="image">
+    <c4d-image
+      alt="video-name-foo"
+      data-autoid="c4d--image"
+      slot="image"
+    >
+      [object Object]
+    </c4d-image>
+  </slot>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <slot name="eyebrow">
+      </slot>
+      <slot name="heading">
+      </slot>
+      <div class="cds--card__copy">
+        <slot>
+        </slot>
+      </div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-feature-section.md b/packages/web-components/tests/snapshots/c4d-feature-section.md
new file mode 100644
index 00000000000..e219b9c52c1
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-feature-section.md
@@ -0,0 +1,64 @@
+# `c4d-feature-section`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--card cds--feature-card__card cds--feature-section cds--grid cds--tile">
+  <div class="cds--feature-section__container cds--row">
+    <div class="cds--col-lg-8 cds--col-md-8 cds--col-sm-4 cds--feature-section__body">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--col-md-6 cds--col-sm-4">
+            <slot name="eyebrow">
+            </slot>
+            <slot name="heading">
+            </slot>
+            <slot name="copy">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="cds--col-lg-8 cds--col-md-8 cds--col-sm-4 cds--feature-section__image">
+      <slot name="image">
+      </slot>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--card cds--feature-card__card cds--feature-section cds--grid cds--tile">
+  <div class="cds--feature-section__container cds--row">
+    <div class="cds--col-lg-8 cds--col-md-8 cds--col-sm-4 cds--feature-section__body">
+      <div class="cds--grid">
+        <div class="cds--row">
+          <div class="cds--col-lg-12 cds--col-md-6 cds--col-sm-4">
+            <slot name="eyebrow">
+            </slot>
+            <slot name="heading">
+            </slot>
+            <slot name="copy">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="cds--col-lg-8 cds--col-md-8 cds--col-sm-4 cds--feature-section__image">
+      <slot name="image">
+      </slot>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-filter-panel-composite.md b/packages/web-components/tests/snapshots/c4d-filter-panel-composite.md
new file mode 100644
index 00000000000..ab8e6b69324
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-filter-panel-composite.md
@@ -0,0 +1,28 @@
+# `c4d-filter-panel-composite`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<button class="cds--filter-button">
+  <div class="cds--filter__modal__button">
+  </div>
+</button>
+<c4d-filter-panel-modal
+  data-autoid="c4d-filter-panel-modal"
+  heading=""
+>
+  <slot name="heading">
+  </slot>
+  <slot>
+  </slot>
+</c4d-filter-panel-modal>
+<c4d-filter-panel
+  data-autoid="c4d-filter-panel"
+  heading=""
+>
+</c4d-filter-panel>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-footer-composite 2.md b/packages/web-components/tests/snapshots/c4d-footer-composite 2.md
new file mode 100644
index 00000000000..fd412cc0aa0
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-footer-composite 2.md	
@@ -0,0 +1,129 @@
+# `cds-footer-composite`
+
+## `Misc attributes`
+
+####   `should render minimum attributes`
+
+```
+<cds-footer-composite size="">
+  <cds-footer
+    aria-label="footer"
+    data-autoid="cds--footer"
+    role="contentinfo"
+    size=""
+  >
+    <cds-footer-logo data-autoid="cds--footer-logo">
+    </cds-footer-logo>
+    <cds-footer-nav
+      aria-label="Footer navigation"
+      data-autoid="cds--footer-nav"
+      role="navigation"
+    >
+    </cds-footer-nav>
+    <cds-locale-button
+      data-autoid="cds--locale-btn"
+      size=""
+      slot="locale-button"
+    >
+    </cds-locale-button>
+    <cds-legal-nav
+      data-autoid="cds--footer-legal-nav"
+      size=""
+    >
+      <cds-legal-nav-cookie-preferences-placeholder data-autoid="cds--privacy-cp">
+      </cds-legal-nav-cookie-preferences-placeholder>
+    </cds-legal-nav>
+  </cds-footer>
+</cds-footer-composite>
+
+```
+
+####   `should render various attributes`
+
+```
+<cds-footer-composite
+  lang-display="lang-display-foo"
+  language="ko-KR"
+  size=""
+>
+  <cds-footer
+    aria-label="footer"
+    data-autoid="cds--footer"
+    role="contentinfo"
+    size=""
+  >
+    <cds-footer-logo data-autoid="cds--footer-logo">
+    </cds-footer-logo>
+    <cds-footer-nav
+      aria-label="Footer navigation"
+      data-autoid="cds--footer-nav"
+      role="navigation"
+    >
+      <cds-footer-nav-group
+        data-autoid="cds--footer-nav-group"
+        role="listitem"
+        title-text="group-title-foo"
+      >
+        <cds-footer-nav-item
+          href="https://dummy.ibm.com/foo/foo"
+          role="listitem"
+        >
+          item-title-foo-foo
+        </cds-footer-nav-item>
+        <cds-footer-nav-item
+          href="https://dummy.ibm.com/foo/bar"
+          role="listitem"
+        >
+          item-title-foo-bar
+        </cds-footer-nav-item>
+      </cds-footer-nav-group>
+      <cds-footer-nav-group
+        data-autoid="cds--footer-nav-group"
+        role="listitem"
+        title-text="group-title-bar"
+      >
+        <cds-footer-nav-item
+          href="https://dummy.ibm.com/bar/foo"
+          role="listitem"
+        >
+          item-title-bar-foo
+        </cds-footer-nav-item>
+        <cds-footer-nav-item
+          href="https://dummy.ibm.com/bar/bar"
+          role="listitem"
+        >
+          item-title-bar-bar
+        </cds-footer-nav-item>
+      </cds-footer-nav-group>
+    </cds-footer-nav>
+    <cds-locale-button
+      data-autoid="cds--locale-btn"
+      size=""
+      slot="locale-button"
+    >
+      lang-display-foo
+    </cds-locale-button>
+    <cds-legal-nav
+      data-autoid="cds--footer-legal-nav"
+      size=""
+    >
+      <cds-legal-nav-item
+        href="https://dummy.ibm.com/foo"
+        role="listitem"
+      >
+        title-foo
+      </cds-legal-nav-item>
+      <cds-legal-nav-item
+        href="https://dummy.ibm.com/bar"
+        role="listitem"
+      >
+        title-bar
+      </cds-legal-nav-item>
+      <cds-legal-nav-cookie-preferences-placeholder data-autoid="cds--privacy-cp">
+      </cds-legal-nav-cookie-preferences-placeholder>
+    </cds-legal-nav>
+  </cds-footer>
+</cds-footer-composite>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-footer-composite.md b/packages/web-components/tests/snapshots/c4d-footer-composite.md
new file mode 100644
index 00000000000..5e7f60d457a
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-footer-composite.md
@@ -0,0 +1,129 @@
+# `c4d-footer-composite`
+
+## `Misc attributes`
+
+####   `should render minimum attributes`
+
+```
+<c4d-footer-composite size="">
+  <c4d-footer
+    aria-label="footer"
+    data-autoid="c4d--footer"
+    role="contentinfo"
+    size=""
+  >
+    <c4d-footer-logo data-autoid="c4d--footer-logo">
+    </c4d-footer-logo>
+    <c4d-footer-nav
+      aria-label="Footer navigation"
+      data-autoid="c4d--footer-nav"
+      role="navigation"
+    >
+    </c4d-footer-nav>
+    <c4d-locale-button
+      data-autoid="c4d--locale-btn"
+      size=""
+      slot="locale-button"
+    >
+    </c4d-locale-button>
+    <c4d-legal-nav
+      data-autoid="c4d--footer-legal-nav"
+      size=""
+    >
+      <c4d-legal-nav-cookie-preferences-placeholder data-autoid="c4d--privacy-cp">
+      </c4d-legal-nav-cookie-preferences-placeholder>
+    </c4d-legal-nav>
+  </c4d-footer>
+</c4d-footer-composite>
+
+```
+
+####   `should render various attributes`
+
+```
+<c4d-footer-composite
+  lang-display="lang-display-foo"
+  language="ko-KR"
+  size=""
+>
+  <c4d-footer
+    aria-label="footer"
+    data-autoid="c4d--footer"
+    role="contentinfo"
+    size=""
+  >
+    <c4d-footer-logo data-autoid="c4d--footer-logo">
+    </c4d-footer-logo>
+    <c4d-footer-nav
+      aria-label="Footer navigation"
+      data-autoid="c4d--footer-nav"
+      role="navigation"
+    >
+      <c4d-footer-nav-group
+        data-autoid="c4d--footer-nav-group"
+        role="listitem"
+        title-text="group-title-foo"
+      >
+        <c4d-footer-nav-item
+          href="https://dummy.ibm.com/foo/foo"
+          role="listitem"
+        >
+          item-title-foo-foo
+        </c4d-footer-nav-item>
+        <c4d-footer-nav-item
+          href="https://dummy.ibm.com/foo/bar"
+          role="listitem"
+        >
+          item-title-foo-bar
+        </c4d-footer-nav-item>
+      </c4d-footer-nav-group>
+      <c4d-footer-nav-group
+        data-autoid="c4d--footer-nav-group"
+        role="listitem"
+        title-text="group-title-bar"
+      >
+        <c4d-footer-nav-item
+          href="https://dummy.ibm.com/bar/foo"
+          role="listitem"
+        >
+          item-title-bar-foo
+        </c4d-footer-nav-item>
+        <c4d-footer-nav-item
+          href="https://dummy.ibm.com/bar/bar"
+          role="listitem"
+        >
+          item-title-bar-bar
+        </c4d-footer-nav-item>
+      </c4d-footer-nav-group>
+    </c4d-footer-nav>
+    <c4d-locale-button
+      data-autoid="c4d--locale-btn"
+      size=""
+      slot="locale-button"
+    >
+      lang-display-foo
+    </c4d-locale-button>
+    <c4d-legal-nav
+      data-autoid="c4d--footer-legal-nav"
+      size=""
+    >
+      <c4d-legal-nav-item
+        href="https://dummy.ibm.com/foo"
+        role="listitem"
+      >
+        title-foo
+      </c4d-legal-nav-item>
+      <c4d-legal-nav-item
+        href="https://dummy.ibm.com/bar"
+        role="listitem"
+      >
+        title-bar
+      </c4d-legal-nav-item>
+      <c4d-legal-nav-cookie-preferences-placeholder data-autoid="c4d--privacy-cp">
+      </c4d-legal-nav-cookie-preferences-placeholder>
+    </c4d-legal-nav>
+  </c4d-footer>
+</c4d-footer-composite>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-footer-logo.md b/packages/web-components/tests/snapshots/c4d-footer-logo.md
new file mode 100644
index 00000000000..da174f8b035
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-footer-logo.md
@@ -0,0 +1,34 @@
+# `c4d-footer-logo`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  aria-label="IBM logo"
+  class="cds--footer-logo__link"
+  href="https://www.ibm.com/"
+>
+  [object Object]
+  <slot>
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  aria-label="IBM logo"
+  class="cds--footer-logo__link"
+  href="https://cloud.ibm.com/"
+>
+  [object Object]
+  <slot>
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-footer-nav-group.md b/packages/web-components/tests/snapshots/c4d-footer-nav-group.md
new file mode 100644
index 00000000000..e29c4c76613
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-footer-nav-group.md
@@ -0,0 +1,96 @@
+# `c4d-footer-nav-group`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes for narrow screen`
+
+```
+<button
+  aria-controls="content"
+  aria-expanded="false"
+  class="cds--accordion__heading"
+  type="button"
+>
+  <div class="cds--accordion__title">
+    <slot name="title">
+    </slot>
+  </div>
+</button>
+<div
+  class="cds--accordion__content"
+  id="content"
+>
+  <ul>
+    <slot>
+    </slot>
+  </ul>
+</div>
+
+```
+
+####   `should render with minimum attributes for wide screen`
+
+```
+<h2 class="cds--footer-nav-group__title">
+  <slot name="title">
+  </slot>
+</h2>
+<div
+  class="cds--accordion__content"
+  id="content"
+>
+  <ul>
+    <slot>
+    </slot>
+  </ul>
+</div>
+
+```
+
+####   `should render with various attributes for narrow screen`
+
+```
+<button
+  aria-controls="content"
+  aria-expanded="true"
+  class="cds--accordion__heading"
+  type="button"
+>
+  <div class="cds--accordion__title">
+    <slot name="title">
+      title-text-foo
+    </slot>
+  </div>
+</button>
+<div
+  class="cds--accordion__content"
+  id="content"
+>
+  <ul>
+    <slot>
+    </slot>
+  </ul>
+</div>
+
+```
+
+####   `should render with various attributes for wide screen`
+
+```
+<h2 class="cds--footer-nav-group__title">
+  <slot name="title">
+    title-text-foo
+  </slot>
+</h2>
+<div
+  class="cds--accordion__content"
+  id="content"
+>
+  <ul>
+    <slot>
+    </slot>
+  </ul>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-footer-nav-item.md b/packages/web-components/tests/snapshots/c4d-footer-nav-item.md
new file mode 100644
index 00000000000..0dd599c925c
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-footer-nav-item.md
@@ -0,0 +1,35 @@
+# `c4d-footer-nav-item`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  class="cds--footer__link cds--link cds--link--md"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <slot>
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  class="cds--footer__link cds--link cds--link--md"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <slot>
+    title-text-foo
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-hr.md b/packages/web-components/tests/snapshots/c4d-hr.md
new file mode 100644
index 00000000000..3171e635ca6
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-hr.md
@@ -0,0 +1,22 @@
+# `c4d-hr`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+
+```
+
+####   `should render with various attributes`
+
+```
+
+```
+
+####   `should render with other various attributes`
+
+```
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-image.md b/packages/web-components/tests/snapshots/c4d-image.md
new file mode 100644
index 00000000000..df329de2232
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-image.md
@@ -0,0 +1,58 @@
+# `c4d-image`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<slot>
+</slot>
+<picture>
+  <img
+    alt=""
+    aria-describedby="image-caption long-description"
+    class="cds--image__img"
+    loading="lazy"
+    part="image"
+    src=""
+  >
+</picture>
+<div
+  class="cds--image__longdescription"
+  id="long-description"
+>
+  <slot name="long-description">
+  </slot>
+</div>
+<slot name="icon">
+</slot>
+
+```
+
+####   `should render with various attributes`
+
+```
+<slot>
+</slot>
+<picture>
+  <img
+    alt=""
+    aria-describedby="image-caption long-description"
+    class="cds--image__img"
+    loading="lazy"
+    part="image"
+    src=""
+  >
+</picture>
+<div
+  class="cds--image__longdescription"
+  id="long-description"
+>
+  <slot name="long-description">
+  </slot>
+</div>
+<slot name="icon">
+</slot>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-leadspace-block.md b/packages/web-components/tests/snapshots/c4d-leadspace-block.md
new file mode 100644
index 00000000000..477f7437990
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-leadspace-block.md
@@ -0,0 +1,94 @@
+# `c4d-leadspace-block`
+
+## `Misc attributes - Default`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot
+    hidden=""
+    name="heading"
+  >
+  </slot>
+  <div class="cds--content-layout__body">
+    <slot>
+    </slot>
+    <c4d-hr
+      data-autoid="c4d--hr"
+      role="separator"
+    >
+    </c4d-hr>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot
+    hidden=""
+    name="heading"
+  >
+  </slot>
+  <div class="cds--content-layout__body">
+    <slot>
+    </slot>
+    <c4d-hr
+      data-autoid="c4d--hr"
+      role="separator"
+    >
+    </c4d-hr>
+  </div>
+</div>
+
+```
+
+## `Misc attributes - WithVideo`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--content-layout">
+  <slot
+    hidden=""
+    name="heading"
+  >
+  </slot>
+  <div class="cds--content-layout__body">
+    <slot>
+    </slot>
+    <c4d-hr
+      data-autoid="c4d--hr"
+      role="separator"
+    >
+    </c4d-hr>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--content-layout">
+  <slot
+    hidden=""
+    name="heading"
+  >
+  </slot>
+  <div class="cds--content-layout__body">
+    <slot>
+    </slot>
+    <c4d-hr
+      data-autoid="c4d--hr"
+      role="separator"
+    >
+    </c4d-hr>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-leadspace.md b/packages/web-components/tests/snapshots/c4d-leadspace.md
new file mode 100644
index 00000000000..4334c05dbfb
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-leadspace.md
@@ -0,0 +1,494 @@
+# `c4d-leadspace`
+
+## `Misc attributes - TallWithNoImage`
+
+####   `should render with minimum attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+####   `should render with various attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+## `Misc attributes - TallWithImage`
+
+####   `should render with minimum attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+####   `should render with various attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace--gradient cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+## `Misc attributes - Centered`
+
+####   `should render with minimum attributes`
+
+```
+<section
+  class="cds--leadspace--centered cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+####   `should render with various attributes`
+
+```
+<section
+  class="cds--leadspace--centered cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+## `Misc attributes - CenteredWithImage`
+
+####   `should render with minimum attributes`
+
+```
+<section
+  class="cds--leadspace--centered cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+####   `should render with various attributes`
+
+```
+<section
+  class="cds--leadspace--centered cds--leadspace--centered__image cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace--gradient cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+## `Misc attributes - Medium`
+
+####   `should render with minimum attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+####   `should render with various attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+## `Misc attributes - MediumWithImage`
+
+####   `should render with minimum attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
+####   `should render with various attributes`
+
+```
+<section
+  class="cds--leadspace__section"
+  part="section"
+>
+  <div class="cds--leadspace__container">
+    <div class="cds--leadspace--gradient cds--leadspace__overlay">
+      <div class="cds--leadspace--content__container">
+        <div class="cds--leadspace__row">
+          <slot name="navigation">
+          </slot>
+          <slot name="heading">
+          </slot>
+        </div>
+        <div class="cds--leadspace__content">
+          <div class="cds--leadspace__row">
+            <p
+              class="cds--leadspace__desc"
+              data-autoid="c4d--leadspace__desc"
+            >
+              <slot>
+              </slot>
+            </p>
+          </div>
+          <div class="cds--leadspace__action">
+            <slot name="action">
+            </slot>
+          </div>
+        </div>
+      </div>
+    </div>
+    <slot name="image">
+    </slot>
+  </div>
+</section>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-leaving-ibm-composite 2.md b/packages/web-components/tests/snapshots/c4d-leaving-ibm-composite 2.md
new file mode 100644
index 00000000000..26df9790b6e
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-leaving-ibm-composite 2.md	
@@ -0,0 +1,13 @@
+# `cds-leaving-ibm-composite`
+
+#### `should render modal body`
+
+```
+<cds-leaving-ibm-composite
+  href="http://www.example.com"
+  open=""
+>
+</cds-leaving-ibm-composite>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-leaving-ibm-composite.md b/packages/web-components/tests/snapshots/c4d-leaving-ibm-composite.md
new file mode 100644
index 00000000000..8ebf49d6a30
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-leaving-ibm-composite.md
@@ -0,0 +1,13 @@
+# `c4d-leaving-ibm-composite`
+
+#### `should render modal body`
+
+```
+<c4d-leaving-ibm-composite
+  href="http://www.example.com"
+  open=""
+>
+</c4d-leaving-ibm-composite>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-left-nav-menu.md b/packages/web-components/tests/snapshots/c4d-left-nav-menu.md
new file mode 100644
index 00000000000..293f152e905
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-left-nav-menu.md
@@ -0,0 +1,55 @@
+# `c4d-left-nav-menu`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--side-nav__item">
+  <button
+    aria-expanded="false"
+    aria-haspopup="true"
+    class="bx--side-nav__submenu"
+    data-attribute1="headerNav"
+    data-attribute2="L0"
+    data-attribute3=""
+    tabindex="-1"
+    type="button"
+  >
+    <div class="cds--side-nav__submenu-content">
+      <span class="cds--side-nav__submenu-title">
+      </span>
+      <div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">
+      </div>
+    </div>
+  </button>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--side-nav__item">
+  <button
+    aria-expanded="true"
+    aria-haspopup="true"
+    class="bx--side-nav__submenu"
+    data-attribute1="headerNav"
+    data-attribute2="L0"
+    data-attribute3="title-foo"
+    tabindex="-1"
+    type="button"
+  >
+    <div class="cds--side-nav__submenu-content">
+      <span class="cds--side-nav__submenu-title">
+        title-foo
+      </span>
+      <div class="cds--side-nav__icon cds--side-nav__icon--small cds--side-nav__submenu-chevron">
+      </div>
+    </div>
+  </button>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-lightbox-image-viewer.md b/packages/web-components/tests/snapshots/c4d-lightbox-image-viewer.md
new file mode 100644
index 00000000000..0a2ca8c5df3
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-lightbox-image-viewer.md
@@ -0,0 +1,80 @@
+# `c4d-lightbox-image-viewer`
+
+#### `should render with minimum attributes`
+
+```
+<div class="cds--lightbox-media-viewer__container">
+  <div class="cds--lightbox-media-viewer__row">
+    <div class="cds--lightbox-media-viewer__media cds--no-gutter">
+      <img
+        alt=""
+        class="cds--image__img"
+        loading="lazy"
+        src=""
+      >
+    </div>
+    <div class="cds--lightbox-media-viewer__media-description cds--no-gutter">
+      <div class="cds--lightbox-media-viewer__content">
+        <div
+          class="cds--lightbox-media-viewer__content__title"
+          data-autoid="c4d--lightbox-media-viewer__content__title"
+          part="title"
+        >
+          <slot name="title">
+          </slot>
+        </div>
+        <div
+          class="cds--lightbox-media-viewer__content__desc"
+          data-autoid="c4d--lightbox-media-viewer__content__desc"
+          part="description"
+        >
+          <slot name="description">
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+#### `should render with various attributes`
+
+```
+<div class="cds--lightbox-media-viewer__container">
+  <div class="cds--lightbox-media-viewer__row">
+    <div class="cds--lightbox-media-viewer__media cds--no-gutter">
+      <img
+        alt="image-alt-foo"
+        class="cds--image__img"
+        loading="lazy"
+        src="https://example.com/image"
+      >
+    </div>
+    <div class="cds--lightbox-media-viewer__media-description cds--no-gutter">
+      <div class="cds--lightbox-media-viewer__content">
+        <div
+          class="cds--lightbox-media-viewer__content__title"
+          data-autoid="c4d--lightbox-media-viewer__content__title"
+          part="title"
+        >
+          <slot name="title">
+            image-title-foo
+          </slot>
+        </div>
+        <div
+          class="cds--lightbox-media-viewer__content__desc"
+          data-autoid="c4d--lightbox-media-viewer__content__desc"
+          part="description"
+        >
+          <slot name="description">
+            image-description-foo
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-lightbox-video-player-composite.md b/packages/web-components/tests/snapshots/c4d-lightbox-video-player-composite.md
new file mode 100644
index 00000000000..93de44193c2
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-lightbox-video-player-composite.md
@@ -0,0 +1,25 @@
+# `c4d-lightbox-video-player-composite`
+
+#### `should render the video player`
+
+```
+<div style="display: contents;">
+  <c4d-expressive-modal
+    data-autoid="c4d--expressive-modal"
+    expressive-size="full-width"
+    mode="lightbox"
+  >
+    <c4d-expressive-modal-close-button data-autoid="c4d--expressive-modal-close-button">
+    </c4d-expressive-modal-close-button>
+    <c4d-lightbox-video-player
+      description="video-description-foo"
+      duration="120"
+      name="video-name-foo"
+      role="dialog"
+    >
+    </c4d-lightbox-video-player>
+  </c4d-expressive-modal>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-lightbox-video-player.md b/packages/web-components/tests/snapshots/c4d-lightbox-video-player.md
new file mode 100644
index 00000000000..e5861a632bc
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-lightbox-video-player.md
@@ -0,0 +1,84 @@
+# `c4d-lightbox-video-player`
+
+#### `should render with minimum attributes`
+
+```
+<div class="cds--lightbox-media-viewer__container">
+  <div class="cds--lightbox-media-viewer__row">
+    <div class="cds--lightbox-media-viewer__media cds--no-gutter">
+      <div class="cds--video-player">
+        <div class="cds--video-player__video-container">
+          <slot>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div class="cds--lightbox-media-viewer__media-description cds--no-gutter">
+      <div class="cds--lightbox-media-viewer__content">
+        <div
+          class="cds--lightbox-media-viewer__content__title"
+          data-autoid="c4d--lightbox-media-viewer__content__title"
+          part="title"
+        >
+          <slot name="title">
+            <h2 style="all: inherit;">
+            </h2>
+          </slot>
+        </div>
+        <div
+          class="cds--lightbox-media-viewer__content__desc"
+          data-autoid="c4d--lightbox-media-viewer__content__desc"
+          part="description"
+        >
+          <slot name="description">
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
+#### `should render with various attributes`
+
+```
+<div class="cds--lightbox-media-viewer__container">
+  <div class="cds--lightbox-media-viewer__row">
+    <div class="cds--lightbox-media-viewer__media cds--no-gutter">
+      <div class="cds--video-player">
+        <div class="cds--video-player__video-container">
+          <slot>
+          </slot>
+        </div>
+      </div>
+    </div>
+    <div class="cds--lightbox-media-viewer__media-description cds--no-gutter">
+      <div class="cds--lightbox-media-viewer__content">
+        <div
+          class="cds--lightbox-media-viewer__content__title"
+          data-autoid="c4d--lightbox-media-viewer__content__title"
+          part="title"
+        >
+          <slot name="title">
+            <h2 style="all: inherit;">
+              video-name-foo (0:30)
+            </h2>
+          </slot>
+        </div>
+        <div
+          class="cds--lightbox-media-viewer__content__desc"
+          data-autoid="c4d--lightbox-media-viewer__content__desc"
+          part="description"
+        >
+          <slot name="description">
+            video-description-foo
+          </slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-link-list-section.md b/packages/web-components/tests/snapshots/c4d-link-list-section.md
new file mode 100644
index 00000000000..5545c2aff71
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-link-list-section.md
@@ -0,0 +1,20 @@
+# `c4d-link-list-section`
+
+#### `Renders properly`
+
+```
+<div class="cds--content-section__grid">
+  <div class="cds--content-section__row">
+    <div class="cds--content-section__left">
+      <slot name="heading">
+      </slot>
+    </div>
+    <div class="cds--content-section__children">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-link-list.md b/packages/web-components/tests/snapshots/c4d-link-list.md
new file mode 100644
index 00000000000..db66d2eb109
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-link-list.md
@@ -0,0 +1,70 @@
+# `c4d-link-list`
+
+#### `Renders Default`
+
+```
+<div class="c4d-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
+<ul
+  class="cds--link-list__list cds--link-list__list--card"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+
+```
+
+#### `Renders Horizontal`
+
+```
+<div class="c4d-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
+<ul
+  class="cds--link-list__list cds--link-list__list--horizontal"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+
+```
+
+#### `Renders Vertical`
+
+```
+<div class="c4d-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
+<ul
+  class="cds--link-list__list cds--link-list__list--vertical"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+
+```
+
+#### `Renders End of section`
+
+```
+<div class="c4d-ce--link-list__heading__wrapper">
+  <slot name="heading">
+  </slot>
+</div>
+<ul
+  class="c4d-ce--link-list__list--end cds--link-list__list"
+  name="list"
+>
+  <slot>
+  </slot>
+</ul>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-link-with-icon.md b/packages/web-components/tests/snapshots/c4d-link-with-icon.md
new file mode 100644
index 00000000000..cfa87871bcd
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-link-with-icon.md
@@ -0,0 +1,47 @@
+# `c4d-link-with-icon`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  class="cds--link cds--link--lg cds--link-with-icon"
+  download=""
+  href=""
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <span>
+    <slot>
+    </slot>
+  </span>
+  <slot name="icon">
+    <span class="cds--visually-hidden">
+    </span>
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<p
+  class="cds--link cds--link--disabled cds--link--lg cds--link-with-icon"
+  id="link"
+  part="link"
+>
+  <span>
+    <slot>
+    </slot>
+  </span>
+  <slot name="icon">
+    <span class="cds--visually-hidden">
+    </span>
+  </slot>
+</p>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-locale-item.md b/packages/web-components/tests/snapshots/c4d-locale-item.md
new file mode 100644
index 00000000000..6cf662ef2df
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-locale-item.md
@@ -0,0 +1,23 @@
+# `c4d-locale-item`
+
+## `Misc attributes`
+
+####   `should render with various attributes`
+
+```
+<a
+  class="cds--link cds--link--md"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <div class="cds--locale-modal__locales__name">
+    country-foo
+  </div>
+  <div class="cds--locale-modal__locales__name">
+    language-foo
+  </div>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-locale-modal-composite.md b/packages/web-components/tests/snapshots/c4d-locale-modal-composite.md
new file mode 100644
index 00000000000..0346020be6a
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-locale-modal-composite.md
@@ -0,0 +1,62 @@
+# `c4d-locale-modal-composite`
+
+## `Misc attributes`
+
+####   `should render minimum attributes`
+
+```
+<c4d-locale-modal
+  close-button-assistive-text="Close modal"
+  data-autoid="c4d--locale-modal"
+  header-title="Select geographic area"
+>
+  <c4d-regions
+    data-autoid="c4d--regions"
+    title="Select geographic area"
+  >
+  </c4d-regions>
+  <c4d-locale-search
+    availability-label-text="This page is available in the following locations and languages"
+    close-button-assistive-text="Clear search input"
+    data-autoid="c4d--locale-search"
+    label-text="Search by location or language"
+    placeholder="Search by location or language"
+    unavailability-label-text="This page is unavailable in your preferred location or language"
+  >
+  </c4d-locale-search>
+</c4d-locale-modal>
+
+```
+
+####   `should render various attributes`
+
+```
+<c4d-locale-modal
+  close-button-assistive-text="modal-close-foo"
+  data-autoid="c4d--locale-modal"
+  header-title="header-title-foo"
+  lang-display="lang-display-foo"
+  open=""
+>
+  <c4d-regions
+    data-autoid="c4d--regions"
+    title="header-title-foo"
+  >
+    <c4d-region-item name="region-name-foo">
+    </c4d-region-item>
+    <c4d-region-item name="region-name-bar">
+    </c4d-region-item>
+  </c4d-regions>
+  <c4d-locale-search
+    availability-label-text="availability-text-foo"
+    close-button-assistive-text="search-clear-text-foo"
+    data-autoid="c4d--locale-search"
+    label-text="search-label-foo"
+    placeholder="search-placeholder-foo"
+    unavailability-label-text="unavailability-text-foo"
+  >
+  </dds-locale-search>
+</dds-locale-modal>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-locale-modal.md b/packages/web-components/tests/snapshots/c4d-locale-modal.md
new file mode 100644
index 00000000000..23498f381be
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-locale-modal.md
@@ -0,0 +1,168 @@
+# `c4d-locale-modal`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div id="c4d--modal-header">
+      <c4d-expressive-modal-header data-autoid="c4d--expressive-modal-header">
+        <c4d-expressive-modal-close-button data-autoid="c4d--expressive-modal-close-button">
+        </c4d-expressive-modal-close-button>
+        <c4d-expressive-modal-heading
+          aria-level="2"
+          data-autoid="c4d--expressive-modal-heading"
+          role="heading"
+        >
+        </c4d-expressive-modal-heading>
+      </c4d-expressive-modal-header>
+    </div>
+    <div class="cds--locale-modal cds--modal-content">
+      <slot name="regions-selector">
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
+####   `should render with various attributes`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div id="c4d--modal-header">
+      <c4d-expressive-modal-header data-autoid="c4d--expressive-modal-header">
+        <c4d-expressive-modal-close-button data-autoid="c4d--expressive-modal-close-button">
+        </c4d-expressive-modal-close-button>
+        <c4d-expressive-modal-heading
+          aria-level="2"
+          data-autoid="c4d--expressive-modal-heading"
+          role="heading"
+        >
+          <p class="cds--modal-header__label cds--type-delta">
+            lang-display-foo
+          </p>
+          <p class="cds--modal-header__heading cds--type-beta">
+            header-title-foo
+          </p>
+        </c4d-expressive-modal-heading>
+      </c4d-expressive-modal-header>
+    </div>
+    <div class="cds--locale-modal cds--modal-content">
+      <slot name="regions-selector">
+      </slot>
+    </div>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
+####   `should render locale selector`
+
+```
+<button
+  class="cds--visually-hidden"
+  id="start-sentinel"
+>
+  START
+</button>
+<div
+  aria-labelledby="c4d--modal-header"
+  class="cds--modal-container"
+  role="dialog"
+  tabindex="-1"
+>
+  <div class="cds--modal-content">
+    <div id="c4d--modal-header">
+      <c4d-expressive-modal-header
+        data-autoid="c4d--expressive-modal-header"
+        slot="header"
+      >
+        <c4d-expressive-modal-close-button
+          data-autoid="c4d--expressive-modal-close-button"
+          size=""
+        >
+        </c4d-expressive-modal-close-button>
+        <c4d-expressive-modal-heading
+          aria-level="2"
+          data-autoid="c4d--expressive-modal-heading"
+          role="heading"
+        >
+          <c4d-link-with-icon
+            data-autoid="c4d--link-with-icon"
+            href="#"
+            icon-placement="left"
+          >
+            header-title-foo
+          </c4d-link-with-icon>
+          <p
+            class="cds--modal-header__heading cds--type-beta"
+            tabindex="0"
+          >
+            region-foo
+          </p>
+        </c4d-expressive-modal-heading>
+      </c4d-expressive-modal-header>
+    </div>
+    <slot name="locales-selector">
+    </slot>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+<button
+  class="cds--visually-hidden"
+  id="end-sentinel"
+>
+  END
+</button>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-locale-search.md b/packages/web-components/tests/snapshots/c4d-locale-search.md
new file mode 100644
index 00000000000..a8ccd4fd294
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-locale-search.md
@@ -0,0 +1,74 @@
+# `c4d-locale-search`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--locale-modal__filter">
+  <div class="cds--locale-modal__search">
+    <c4d-search
+      close-button-assistive-text=""
+      data-autoid="c4d--locale-modal__filter"
+      label-text=""
+      part="searchbox"
+      placeholder=""
+      size="xl"
+    >
+    </c4d-search>
+    <div
+      aria-live="polite"
+      class="cds--visually-hidden"
+    >
+      0 results
+    </div>
+    <p class="cds--locale-modal__search-text">
+      This page is available in the following locations and languages
+    </p>
+  </div>
+  <div
+    class="cds--locale-modal__list"
+    role="list"
+  >
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--locale-modal__filter">
+  <div class="cds--locale-modal__search">
+    <c4d-search
+      close-button-assistive-text="close-button-assistive-text-foo"
+      data-autoid="c4d--locale-modal__filter"
+      label-text="label-text-foo"
+      part="searchbox"
+      placeholder="placeholder-foo"
+      size="xl"
+    >
+    </c4d-search>
+    <div
+      aria-live="polite"
+      class="cds--visually-hidden"
+    >
+      0 results
+    </div>
+    <p class="cds--locale-modal__search-text">
+      availability-label-text-foo
+    </p>
+  </div>
+  <div
+    class="cds--locale-modal__list"
+    role="list"
+  >
+    <slot>
+    </slot>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-logo-grid.md b/packages/web-components/tests/snapshots/c4d-logo-grid.md
new file mode 100644
index 00000000000..86a0854cff4
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-logo-grid.md
@@ -0,0 +1,39 @@
+# `c4d-logo-grid`
+
+#### `renders c4d-logo-grid properly`
+
+```
+<div class="cds--content-layout--logo-grid">
+  <slot name="heading">
+  </slot>
+  <div
+    class="cds--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
+    </slot>
+    <div
+      class="cds--content-block__children cds--content-layout__body"
+      hidden=""
+    >
+      <div class="cds--logo-grid__row">
+        <slot>
+        </slot>
+        <slot name="media">
+        </slot>
+      </div>
+    </div>
+    <div
+      class="cds--content-block__cta-row"
+      hidden=""
+    >
+      <div class="cds--content-block__cta cds-content-block__cta-col">
+        <slot name="footer">
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-masthead-composite.md b/packages/web-components/tests/snapshots/c4d-masthead-composite.md
new file mode 100644
index 00000000000..91676967afe
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-masthead-composite.md
@@ -0,0 +1,116 @@
+# `c4d-masthead-composite`
+
+## `Rendering global bar`
+
+####   `should render unauthenticated state`
+
+```
+<c4d-masthead-global-bar data-autoid="c4d--masthead-global-bar">
+  <c4d-masthead-profile data-autoid="c4d--masthead-profile">
+    <c4d-masthead-profile-item href="https://idaas.iam.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=token&amp;client_id=v18loginprod&amp;state=http%3A%2F%2Flocalhost%3A9876%2Fcontext.html&amp;redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&amp;scope=openid">
+      Log in
+    </c4d-masthead-profile-item>
+  </c4d-masthead-profile>
+</c4d-masthead-global-bar>
+
+```
+
+####   `should render authenticated state`
+
+```
+<c4d-masthead-global-bar data-autoid="c4d--masthead-global-bar">
+  <c4d-masthead-profile
+    authenticated=""
+    data-autoid="c4d--masthead-profile"
+  >
+    <c4d-masthead-profile-item href="https://myibm.ibm.com/?lnk=mmi">
+      My IBM
+    </c4d-masthead-profile-item>
+    <c4d-masthead-profile-item href="https://myibm.ibm.com/profile/?lnk=mmi">
+      Profile
+    </c4d-masthead-profile-item>
+    <c4d-masthead-profile-item href="https://myibm.ibm.com/billing/?lnk=mmi">
+      Billing
+    </c4d-masthead-profile-item>
+    <c4d-masthead-profile-item href="https://myibm.ibm.com/pkmslogout?filename=accountRedir.html">
+      Log out
+    </c4d-masthead-profile-item>
+  </c4d-masthead-profile>
+</c4d-masthead-global-bar>
+
+```
+
+## `Rendering nav items`
+
+####   `should render the given nav items to the top`
+
+```
+<c4d-top-nav
+  data-autoid="c4d--masthead__l0-nav"
+  selected-menu-item=""
+>
+  <c4d-top-nav-item
+    data-autoid="c4d--masthead__l0-nav--nav0"
+    href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/foo"
+    title="item-title-foo"
+  >
+  </c4d-top-nav-item>
+  <c4d-top-nav-menu
+    data-autoid="c4d--masthead__l0-nav--nav1"
+    menu-label="menu-title-foo"
+    trigger-content="menu-title-foo"
+  >
+    <c4d-top-nav-menu-item
+      data-autoid="c4d--masthead__l0-nav--subnav-col1-item0"
+      href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar"
+      title="menu-item-title-bar"
+    >
+    </c4d-top-nav-menu-item>
+  </c4d-top-nav-menu>
+</c4d-top-nav>
+
+```
+
+####   `should render the given nav items to the left`
+
+```
+<c4d-left-nav
+  data-autoid="c4d--masthead__l0-sidenav"
+  role="navigation"
+>
+  <c4d-left-nav-menu-section
+    section-id="-1, -1"
+    title=""
+    titleurl=""
+  >
+    <c4d-left-nav-menu-item
+      data-autoid="c4d--masthead__l0--sidenav--nav0"
+      href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/foo"
+      title="item-title-foo"
+    >
+    </c4d-left-nav-menu-item>
+    <c4d-left-nav-menu
+      data-autoid="c4d--masthead__l0--sidenav--nav1"
+      panel-id="1, -1"
+      title="menu-title-foo"
+    >
+    </c4d-left-nav-menu>
+  </c4d-left-nav-menu-section>
+  <c4d-left-nav-menu-section
+    is-submenu=""
+    section-id="1, -1"
+    show-back-button=""
+    title="menu-title-foo"
+    titleurl=""
+  >
+    <c4d-left-nav-menu-item
+      data-autoid="c4d--masthead__l0--sidenav--nav1-list0"
+      href="https://carbon-design-system.github.io/carbon-for-ibm-dotcom/canary/web-components/bar"
+      title="menu-item-title-bar"
+    >
+    </c4d-left-nav-menu-item>
+  </c4d-left-nav-menu-section>
+</c4d-left-nav>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-masthead-logo.md b/packages/web-components/tests/snapshots/c4d-masthead-logo.md
new file mode 100644
index 00000000000..a19017ed5a1
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-masthead-logo.md
@@ -0,0 +1,40 @@
+# `c4d-masthead-logo`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  aria-label="IBM logo"
+  class="cds--link--md"
+  href="https://www.ibm.com/"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <slot>
+    [object Object]
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  aria-label="IBM logo"
+  class="cds--link--md"
+  href="https://cloud.ibm.com/"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <slot>
+    [object Object]
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-masthead-profile.md b/packages/web-components/tests/snapshots/c4d-masthead-profile.md
new file mode 100644
index 00000000000..57ff2f26084
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-masthead-profile.md
@@ -0,0 +1,45 @@
+# `c4d-masthead-profile`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  aria-expanded="false"
+  aria-label="User profile"
+  class="cds--header__menu-item cds--header__menu-title"
+  href="javascript:void 0"
+  role="button"
+  tabindex="0"
+>
+</a>
+<ul class="cds--header__menu">
+  <slot>
+  </slot>
+</ul>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  aria-expanded="true"
+  aria-label="User profile"
+  class="cds--header__menu-item cds--header__menu-title"
+  href="javascript:void 0"
+  role="button"
+  tabindex="0"
+>
+</a>
+<ul
+  aria-label="menu-label-foo"
+  class="cds--header__menu"
+>
+  <slot>
+  </slot>
+</ul>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-pictogram-item.md b/packages/web-components/tests/snapshots/c4d-pictogram-item.md
new file mode 100644
index 00000000000..8fbf059b4ab
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-pictogram-item.md
@@ -0,0 +1,36 @@
+# `c4d-pictogram-item`
+
+#### `Renders as expected`
+
+```
+<div class="cds--pictogram-item__row">
+  <div class="cds--pictogram-item__wrapper">
+    <slot
+      class="cds--pictogram-item__pictogram"
+      name="pictogram"
+    >
+    </slot>
+  </div>
+  <div class="cds--pictogram-item__content">
+    <div class="cds--content-item">
+      <slot name="heading">
+      </slot>
+      <div>
+        <slot name="media">
+        </slot>
+      </div>
+      <slot>
+      </slot>
+      <div
+        class="cds--content-item__cta"
+        hidden=""
+      >
+        <slot name="footer">
+        </slot>
+      </div>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-quote.md b/packages/web-components/tests/snapshots/c4d-quote.md
new file mode 100644
index 00000000000..71182f94dff
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-quote.md
@@ -0,0 +1,45 @@
+# `c4d-quote`
+
+#### `renders c4d-quote properly`
+
+```
+<div class="cds--quote__container">
+  <div class="cds--quote__wrapper">
+    <span class="cds--quote__mark">
+      “
+    </span>
+    <blockquote class="cds--quote__copy">
+      <slot>
+      </slot>
+      <span class="cds--quote__mark-closing">
+        ”
+      </span>
+    </blockquote>
+    <div
+      class="cds--quote__source"
+      hidden=""
+    >
+      <slot name="source-heading">
+      </slot>
+      <slot name="source-copy">
+      </slot>
+      <slot name="source-bottom-copy">
+      </slot>
+    </div>
+    <div
+      class="cds--quote__footer"
+      hidden=""
+    >
+      <c4d-hr
+        data-autoid="c4d--hr"
+        role="separator"
+      >
+      </c4d-hr>
+      <slot name="footer">
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-region-item.md b/packages/web-components/tests/snapshots/c4d-region-item.md
new file mode 100644
index 00000000000..906b11d9385
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-region-item.md
@@ -0,0 +1,51 @@
+# `c4d-region-item`
+
+## `Misc attributes`
+
+####   `should render with various attributes`
+
+```
+<button
+  class="cds--link cds--link--md"
+  id="link"
+  type="button"
+>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <h3 class="cds--card__heading">
+        <slot>
+          name-foo
+        </slot>
+      </h3>
+      <div class="cds--card__footer">
+      </div>
+    </div>
+  </div>
+</button>
+
+```
+
+####   `should render with invalid state`
+
+```
+<button
+  class="cds--link cds--link--disabled cds--link--md"
+  disabled=""
+  id="link"
+  type="button"
+>
+  <div class="cds--card__wrapper">
+    <div class="cds--card__content">
+      <h3 class="cds--card__heading">
+        <slot>
+          name-foo
+        </slot>
+      </h3>
+      <div class="cds--card__footer">
+      </div>
+    </div>
+  </div>
+</button>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-regions.md b/packages/web-components/tests/snapshots/c4d-regions.md
new file mode 100644
index 00000000000..1ffda82fb19
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-regions.md
@@ -0,0 +1,14 @@
+# `c4d-regions`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--row">
+  <slot>
+  </slot>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md b/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md
new file mode 100644
index 00000000000..b849a1887eb
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-search-with-typeahead.md
@@ -0,0 +1,128 @@
+# `c4d-search-with-typeahead`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--header__search--actions">
+  <button
+    aria-label="Open IBM search field"
+    class="cds--header__action cds--header__search--search"
+    part="open-button"
+    type="button"
+  >
+  </button>
+  <button
+    aria-label="Clear input"
+    class="cds--header__action cds--header__search--close"
+    part="close-button"
+    type="button"
+  >
+  </button>
+</div>
+
+```
+
+####   `should render with various attributes in the inactive state`
+
+```
+<div class="cds--header__search--actions">
+  <button
+    aria-label="open-search-button-assistive-text-foo"
+    class="cds--header__action cds--header__search--search"
+    part="open-button"
+    type="button"
+  >
+  </button>
+  <button
+    aria-label="Clear input"
+    class="cds--header__action cds--header__search--close"
+    part="close-button"
+    type="button"
+  >
+  </button>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<form
+  action="https://www.ibm.com/search"
+  method="get"
+  role="search"
+>
+  <input
+    name="lang"
+    type="hidden"
+    value="ko"
+  >
+  <input
+    name="cc"
+    type="hidden"
+    value="KR"
+  >
+  <input
+    name="lnk"
+    type="hidden"
+    value="mhsrch"
+  >
+  <div
+    aria-expanded="true"
+    aria-haspopup="listbox"
+    aria-label="IBM search field"
+    aria-owns="result-list"
+    class="react-autosuggest__container react-autosuggest__suggestions-container--open"
+    role="combobox"
+  >
+    <input
+      aria-autocomplete="list"
+      aria-controls="result-list"
+      aria-label="IBM search field"
+      autocomplete="off"
+      class="cds--header__search--input"
+      name="q"
+      part="search-input"
+      placeholder="Search all of IBM"
+      type="text"
+    >
+    <div
+      class="react-autosuggest__suggestions-container"
+      id="result-list"
+    >
+      <ul
+        class="c4d-ce__search__list react-autosuggest__suggestions-list"
+        role="listbox"
+      >
+      </ul>
+    </div>
+  </div>
+</form>
+<div
+  aria-live="assertive"
+  aria-relevant="additions text"
+  class="cds--assistive-text"
+  role="status"
+>
+</div>
+<div class="cds--header__search--actions">
+  <button
+    aria-label="perform-search-button-assistive-text-foo"
+    class="cds--header__action cds--header__search--search"
+    part="open-button"
+    type="button"
+  >
+  </button>
+  <button
+    aria-label="close-search-button-assistive-text-foo"
+    class="cds--header__action cds--header__search--close"
+    part="close-button"
+    type="button"
+  >
+  </button>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-table-of-contents.md b/packages/web-components/tests/snapshots/c4d-table-of-contents.md
new file mode 100644
index 00000000000..818924228c6
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-table-of-contents.md
@@ -0,0 +1,170 @@
+# `c4d-table-of-contents`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="c4d-ce--table-of-contents__container">
+  <div
+    class="cds--tableofcontents__sidebar"
+    part="table"
+    style="transition: none 0s ease 0s; top: 0px;"
+  >
+    <div
+      class="cds--tableofcontents__desktop__children"
+      hidden=""
+    >
+      <slot name="heading">
+      </slot>
+      <slot name="menu-rule">
+      </slot>
+    </div>
+    <div class="cds--tableofcontents__mobile-top">
+    </div>
+    <div
+      class="c4d-ce--table-of-contents__items-container"
+      style="position: sticky; top: 0"
+    >
+      <div class="cds--tableofcontents__desktop-container">
+        <div
+          class="cds--tableofcontents__desktop"
+          style="left: -0px"
+        >
+          <div class="cds--sub-content-left">
+          </div>
+          <ul>
+          </ul>
+          <div class="cds--sub-content-right">
+          </div>
+        </div>
+      </div>
+      <div class="cds--tableofcontents__mobile">
+        <div class="cds--tableofcontents__mobile__select__wrapper">
+          <select
+            aria-label="Table of contents"
+            class="cds--tableofcontents__mobile__select"
+          >
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cds--tableofcontents__content">
+    <div class="cds--tableofcontents__content-wrapper">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render the heading and the rule for desktop`
+
+```
+<div class="c4d-ce--table-of-contents__container">
+  <div
+    class="cds--tableofcontents__sidebar"
+    part="table"
+    style="transition: none 0s ease 0s; top: 0px;"
+  >
+    <div class="cds--tableofcontents__desktop__children">
+      <slot name="heading">
+      </slot>
+      <slot name="menu-rule">
+      </slot>
+    </div>
+    <div class="cds--tableofcontents__mobile-top">
+    </div>
+    <div
+      class="c4d-ce--table-of-contents__items-container"
+      style="position: sticky; top: 0"
+    >
+      <div class="cds--tableofcontents__desktop-container">
+        <div
+          class="cds--tableofcontents__desktop"
+          style="left: -0px"
+        >
+          <div class="cds--sub-content-left">
+          </div>
+          <ul>
+          </ul>
+          <div class="cds--sub-content-right">
+          </div>
+        </div>
+      </div>
+      <div class="cds--tableofcontents__mobile">
+        <div class="cds--tableofcontents__mobile__select__wrapper">
+          <select
+            aria-label="Table of contents"
+            class="cds--tableofcontents__mobile__select"
+          >
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cds--tableofcontents__content">
+    <div class="cds--tableofcontents__content-wrapper">
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
+####   `should render the heading for mobile`
+
+```
+<div class="c4d-ce--table-of-contents__container">
+  <div
+    class="cds--tableofcontents__sidebar"
+    part="table"
+    style="transition: none 0s ease 0s; top: 0px;"
+  >
+    <div class="cds--tableofcontents__mobile-top">
+    </div>
+    <div
+      class="c4d-ce--table-of-contents__items-container"
+      style="position: sticky; top: 0"
+    >
+      <div class="cds--tableofcontents__desktop-container">
+        <div
+          class="cds--tableofcontents__desktop"
+          style="left: -0px"
+        >
+          <div class="cds--sub-content-left">
+          </div>
+          <ul>
+          </ul>
+          <div class="cds--sub-content-right">
+          </div>
+        </div>
+      </div>
+      <div class="cds--tableofcontents__mobile">
+        <div class="cds--tableofcontents__mobile__select__wrapper">
+          <select
+            aria-label="Table of contents"
+            class="cds--tableofcontents__mobile__select"
+          >
+          </select>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="cds--tableofcontents__content">
+    <div class="cds--tableofcontents__content-wrapper">
+      <div class="cds--tableofcontents__children__mobile">
+        <slot name="heading">
+        </slot>
+      </div>
+      <slot>
+      </slot>
+    </div>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-tabs-extended-media.md b/packages/web-components/tests/snapshots/c4d-tabs-extended-media.md
new file mode 100644
index 00000000000..05b306dd66f
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-tabs-extended-media.md
@@ -0,0 +1,40 @@
+# `c4d-tabs-extended-media`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--tabs-extended-media">
+  <div class="cds--heading">
+    <slot name="heading">
+    </slot>
+  </div>
+  <div class="cds--tabs-extended">
+    <ul class="cds--accordion">
+      <slot>
+      </slot>
+    </ul>
+  </div>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--tabs-extended-media">
+  <div class="cds--heading">
+    <slot name="heading">
+    </slot>
+  </div>
+  <div class="cds--tabs-extended">
+    <ul class="cds--accordion">
+      <slot>
+      </slot>
+    </ul>
+  </div>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-tabs-extended.md b/packages/web-components/tests/snapshots/c4d-tabs-extended.md
new file mode 100644
index 00000000000..1eb76a55126
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-tabs-extended.md
@@ -0,0 +1,28 @@
+# `c4d-tabs-extended`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<div class="cds--tabs-extended cds--tabs-extended--horizontal">
+  <ul class="cds--accordion">
+    <slot>
+    </slot>
+  </ul>
+</div>
+
+```
+
+####   `should render with various attributes`
+
+```
+<div class="cds--tabs-extended cds--tabs-extended--horizontal">
+  <ul class="cds--accordion">
+    <slot>
+    </slot>
+  </ul>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-tag-group.md b/packages/web-components/tests/snapshots/c4d-tag-group.md
new file mode 100644
index 00000000000..1d56792bd9a
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-tag-group.md
@@ -0,0 +1,20 @@
+# `c4d-tag-group`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<slot>
+</slot>
+
+```
+
+####   `should render with various attributes`
+
+```
+<slot>
+</slot>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-tag-link.md b/packages/web-components/tests/snapshots/c4d-tag-link.md
new file mode 100644
index 00000000000..554868dcd70
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-tag-link.md
@@ -0,0 +1,33 @@
+# `c4d-tag-link`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  class="cds--link"
+  id="link"
+  part="link"
+>
+  <slot>
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  class="cds--link"
+  href="https://example.com"
+  id="link"
+  part="link"
+>
+  <slot>
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-text-cta.md b/packages/web-components/tests/snapshots/c4d-text-cta.md
new file mode 100644
index 00000000000..2e3b7df14d0
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-text-cta.md
@@ -0,0 +1,50 @@
+# `c4d-text-cta`
+
+## `Misc attributes`
+
+####   `should render with minimum attributes`
+
+```
+<a
+  class="cds--link cds--link--lg cds--link-with-icon cds--link-with-icon--inline-icon cds--link-with-icon__icon-right"
+  id="link"
+  part="link"
+  tabindex="0"
+>
+  <span>
+    <slot>
+    </slot>
+  </span>
+  <slot name="icon">
+    <span class="bx--visually-hidden">
+    </span>
+  </slot>
+</a>
+
+```
+
+####   `should render with various attributes`
+
+```
+<a
+  class="cds--link cds--link--lg cds--link-with-icon cds--link-with-icon--inline-icon cds--link-with-icon__icon-right"
+  href="#"
+  id="link"
+  part="link"
+  tabindex="0"
+  target="_blank"
+>
+  <span>
+    <slot>
+    </slot>
+    video-name-foo-caption
+  </span>
+  <slot name="icon">
+    <span class="bx--visually-hidden">
+      - This link plays a video
+    </span>
+  </slot>
+</a>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-video-cta-composite.md b/packages/web-components/tests/snapshots/c4d-video-cta-composite.md
new file mode 100644
index 00000000000..fbad4cca1d3
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-video-cta-composite.md
@@ -0,0 +1,14 @@
+# `c4d-video-cta-composite`
+
+## `Handling video type`
+
+####   `should render the media viewer`
+
+```
+<div style="display: contents;">
+  <c4d-lightbox-video-player-composite video-cta-lightbox="true">
+  </c4d-lightbox-video-player-composite>
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-video-player-composite 2.md b/packages/web-components/tests/snapshots/c4d-video-player-composite 2.md
new file mode 100644
index 00000000000..4c87a637a69
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-video-player-composite 2.md	
@@ -0,0 +1,22 @@
+# `cds-video-player-composite`
+
+#### `should render the video player`
+
+```
+<cds-video-player-composite
+  playing-mode="inline"
+  video-id="video-id-foo"
+>
+  <cds-video-player
+    data-autoid="cds--video-player"
+    duration="120"
+    name="video-name-foo"
+    playing-mode="inline"
+    thumbnail-url="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/video-id-foo/width/3"
+    video-id="video-id-foo"
+  >
+  </cds-video-player>
+</cds-video-player-composite>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-video-player-composite.md b/packages/web-components/tests/snapshots/c4d-video-player-composite.md
new file mode 100644
index 00000000000..f5bd879cb9e
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-video-player-composite.md
@@ -0,0 +1,22 @@
+# `c4d-video-player-composite`
+
+#### `should render the video player`
+
+```
+<c4d-video-player-composite
+  playing-mode="inline"
+  video-id="video-id-foo"
+>
+  <c4d-video-player
+    data-autoid="c4d--video-player"
+    duration="120"
+    name="video-name-foo"
+    playing-mode="inline"
+    thumbnail-url="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/video-id-foo/width/3"
+    video-id="video-id-foo"
+  >
+  </c4d-video-player>
+</c4d-video-player-composite>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/c4d-video-player.md b/packages/web-components/tests/snapshots/c4d-video-player.md
new file mode 100644
index 00000000000..d0c326bb8a3
--- /dev/null
+++ b/packages/web-components/tests/snapshots/c4d-video-player.md
@@ -0,0 +1,36 @@
+# `c4d-video-player`
+
+#### `should render with minimum attributes`
+
+```
+<div class="cds--video-player__video-container">
+  <div class="cds--video-player__video">
+    <button class="cds--video-player__image-overlay">
+      <c4d-image
+        alt=""
+        data-autoid="c4d--image"
+        default-src="about:blank"
+      >
+        [object Object]
+      </c4d-image>
+    </button>
+  </div>
+</div>
+<div class="cds--video-player__video-caption">
+</div>
+
+```
+
+#### `should render with various attributes`
+
+```
+<div class="cds--video-player__video-container">
+  <slot>
+  </slot>
+</div>
+<div class="cds--video-player__video-caption">
+  video-name-foo (0:30)
+</div>
+
+```
+
diff --git a/packages/web-components/tests/snapshots/dds-background-media.md b/packages/web-components/tests/snapshots/dds-background-media.md
deleted file mode 100644
index 14e627ecf8a..00000000000
--- a/packages/web-components/tests/snapshots/dds-background-media.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# `dds-background-media`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--background-media--container bx--background-media--image bx--background-media--mobile-position bx--background-media--mobile-position--bottom">
-  <div class="bx--background-media--gradient bx--background-media--gradient--left-to-right">
-  </div>
-  <div
-    class="bx--background-media--item"
-    style="opacity:1"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--background-media--container bx--background-media--image bx--background-media--mobile-position bx--background-media--mobile-position--bottom">
-  <div class="bx--background-media--gradient bx--background-media--gradient--left-to-right">
-  </div>
-  <div
-    class="bx--background-media--item"
-    style="opacity:1"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-button-group.md b/packages/web-components/tests/snapshots/dds-button-group.md
deleted file mode 100644
index eb5d395fc9d..00000000000
--- a/packages/web-components/tests/snapshots/dds-button-group.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# `dds-button-group`
-
-#### `renders dds-button-group properly`
-
-```
-<slot>
-</slot>
-
-```
-
-#### `renders dds-button-group-item properly`
-
-```
-<a
-  class="bx--btn bx--btn--expressive bx--btn--primary"
-  href="https://example.com"
-  id="button"
-  part="button"
-  role="button"
->
-  <slot>
-  </slot>
-  <p
-    aria-hidden="true"
-    class="bx--btn--hidden"
-  >
-    <span>
-      :
-    </span>
-    https://example.com
-  </p>
-  <slot name="icon">
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-callout-quote.md b/packages/web-components/tests/snapshots/dds-callout-quote.md
deleted file mode 100644
index a1915ca9553..00000000000
--- a/packages/web-components/tests/snapshots/dds-callout-quote.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# `dds-callout-quote`
-
-#### `Renders as expected`
-
-```
-<div class="bx--callout__column">
-  <div class="bx--callout__content">
-    <div class="bx--quote__container">
-      <div class="bx--quote__wrapper">
-        <span class="bx--quote__mark">
-          “
-        </span>
-        <blockquote class="bx--quote__copy">
-          <slot>
-          </slot>
-          <span class="bx--quote__mark-closing">
-            ”
-          </span>
-        </blockquote>
-        <div
-          class="bx--quote__source"
-          hidden=""
-        >
-          <slot name="source-heading">
-          </slot>
-          <slot name="source-copy">
-          </slot>
-          <slot name="source-bottom-copy">
-          </slot>
-        </div>
-        <div
-          class="bx--quote__footer"
-          hidden=""
-        >
-          <dds-hr
-            data-autoid="dds--hr"
-            role="separator"
-          >
-          </dds-hr>
-          <slot name="footer">
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-callout-with-media.md b/packages/web-components/tests/snapshots/dds-callout-with-media.md
deleted file mode 100644
index ea52e982581..00000000000
--- a/packages/web-components/tests/snapshots/dds-callout-with-media.md
+++ /dev/null
@@ -1,109 +0,0 @@
-# `dds-callout-with-media`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--callout__column">
-  <div class="bx--callout__content">
-    <div class="bx--content-layout">
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--content-layout__body"
-        hidden=""
-      >
-        <slot name="copy">
-        </slot>
-        <slot>
-        </slot>
-        <slot name="media">
-        </slot>
-        <div
-          class="null"
-          hidden=""
-          style="undefined"
-        >
-          <slot name="footer">
-          </slot>
-        </div>
-      </div>
-      <slot name="complementary">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with image attributes`
-
-```
-<div class="bx--callout__column">
-  <div class="bx--callout__content">
-    <div class="bx--content-layout">
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--content-layout__body"
-        hidden=""
-      >
-        <slot name="copy">
-        </slot>
-        <slot>
-        </slot>
-        <slot name="media">
-        </slot>
-        <div
-          class="null"
-          hidden=""
-          style="undefined"
-        >
-          <slot name="footer">
-          </slot>
-        </div>
-      </div>
-      <slot name="complementary">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with video attributes`
-
-```
-<div class="bx--callout__column">
-  <div class="bx--callout__content">
-    <div class="bx--content-layout">
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--content-layout__body"
-        hidden=""
-      >
-        <slot name="copy">
-        </slot>
-        <slot>
-        </slot>
-        <slot name="media">
-        </slot>
-        <div
-          class="null"
-          hidden=""
-          style="undefined"
-        >
-          <slot name="footer">
-          </slot>
-        </div>
-      </div>
-      <slot name="complementary">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-card-cta-footer.md b/packages/web-components/tests/snapshots/dds-card-cta-footer.md
deleted file mode 100644
index 5dd62d79ac0..00000000000
--- a/packages/web-components/tests/snapshots/dds-card-cta-footer.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# `dds-card-cta-footer`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  aria-label=""
-  class="bx--card__footer bx--link bx--link--lg bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right dds-ce--card__footer"
-  id="link"
-  part="link"
->
-  <span
-    class="bx--card__cta__copy"
-    hidden=""
-  >
-    <slot>
-    </slot>
-  </span>
-  <slot name="icon">
-    <span class="bx--visually-hidden">
-    </span>
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  aria-label=" - This link plays a video"
-  class="bx--card__footer bx--link bx--link--lg bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right dds-ce--card__footer"
-  href="#"
-  id="link"
-  part="link"
->
-  <span class="bx--card__cta__copy">
-    <slot>
-    </slot>
-    undefined-180000
-  </span>
-  <slot name="icon">
-    <span class="bx--visually-hidden">
-      - This link plays a video
-    </span>
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-card-cta.md b/packages/web-components/tests/snapshots/dds-card-cta.md
deleted file mode 100644
index f2bd2d3e05b..00000000000
--- a/packages/web-components/tests/snapshots/dds-card-cta.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# `dds-card-cta`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--card bx--tile">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--card bx--tile">
-  <slot name="image">
-  </slot>
-  <dds-card-cta-image
-    alt="video-name-foo"
-    class="bx--card__video-thumbnail"
-    data-autoid="dds--image"
-    default-src="https://example.com/video-thumbnail-foo"
-  >
-  </dds-card-cta-image>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <dds-card-heading
-        aria-level="3"
-        data-autoid="dds--card-heading"
-        role="heading"
-      >
-        video-name-foo-caption
-      </dds-card-heading>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render footer with various attributes`
-
-```
-<a
-  aria-label="video-name-foo, DURATION undefined - This link plays a video"
-  class="bx--card__footer bx--link bx--link--lg bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right dds-ce--card__footer"
-  href="#"
-  id="link"
-  part="link"
->
-  <span class="bx--card__cta__copy">
-    <slot>
-    </slot>
-    undefined-180000
-  </span>
-  <slot name="icon">
-    <span class="bx--visually-hidden">
-      - This link plays a video
-    </span>
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-card-in-card.md b/packages/web-components/tests/snapshots/dds-card-in-card.md
deleted file mode 100644
index 9bee54be927..00000000000
--- a/packages/web-components/tests/snapshots/dds-card-in-card.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# `dds-card-in-card`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--card bx--card-in-card bx--tile">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--card bx--card--link bx--card-in-card bx--tile bx--tile--clickable">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-card-section-offset.md b/packages/web-components/tests/snapshots/dds-card-section-offset.md
deleted file mode 100644
index 81608a54501..00000000000
--- a/packages/web-components/tests/snapshots/dds-card-section-offset.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# `dds-card-section-offset`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<slot name="image-top">
-</slot>
-<div class="bx--card-section-offset__content">
-  <slot name="heading">
-  </slot>
-  <slot name="action">
-  </slot>
-</div>
-<slot name="card-group">
-</slot>
-<slot name="image-bottom">
-</slot>
-
-```
-
-####   `should render with various attributes`
-
-```
-<slot name="image-top">
-</slot>
-<div class="bx--card-section-offset__content">
-  <slot name="heading">
-  </slot>
-  <slot name="action">
-  </slot>
-</div>
-<slot name="card-group">
-</slot>
-<slot name="image-bottom">
-</slot>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-card-section-simple.md b/packages/web-components/tests/snapshots/dds-card-section-simple.md
deleted file mode 100644
index f68dd28ad34..00000000000
--- a/packages/web-components/tests/snapshots/dds-card-section-simple.md
+++ /dev/null
@@ -1,44 +0,0 @@
-# `dds-card-section-simple`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-section bx--content-section-layout">
-  <div class="bx--content-section__leading">
-    <slot name="heading">
-    </slot>
-    <slot name="copy">
-    </slot>
-    <slot name="footer">
-    </slot>
-  </div>
-  <div class="bx--content-section__body">
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-section bx--content-section-layout">
-  <div class="bx--content-section__leading">
-    <slot name="heading">
-    </slot>
-    <slot name="copy">
-    </slot>
-    <slot name="footer">
-    </slot>
-  </div>
-  <div class="bx--content-section__body">
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-card.md b/packages/web-components/tests/snapshots/dds-card.md
deleted file mode 100644
index 609904ff536..00000000000
--- a/packages/web-components/tests/snapshots/dds-card.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# `dds-card`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--card bx--tile">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--card bx--tile">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-carousel.md b/packages/web-components/tests/snapshots/dds-carousel.md
deleted file mode 100644
index e8662c85ddb..00000000000
--- a/packages/web-components/tests/snapshots/dds-carousel.md
+++ /dev/null
@@ -1,63 +0,0 @@
-# `dds-carousel`
-
-## `Rendering`
-
-####   `should render with minimum attributes`
-
-```
-<div
-  aria-labelledby="carousel-title"
-  role="region"
->
-  <div id="carousel-title">
-    <slot name="title">
-      <span class="bx--visually-hidden">
-        Carousel
-      </span>
-    </slot>
-  </div>
-  <div class="bx--carousel__scroll-container">
-    <div
-      class="bx--carousel__scroll-contents"
-      style="inset-inline-start: 0px;"
-    >
-      <slot>
-      </slot>
-    </div>
-  </div>
-  <nav
-    aria-label="Carousel Navigation"
-    class="bx--carousel__navigation"
-  >
-    <button
-      aria-label="previous"
-      class="bx--btn bx--btn--icon-only bx--btn--tertiary bx--carousel__navigation__btn"
-      disabled=""
-      part="prev-button"
-      title="previous"
-    >
-    </button>
-    <span
-      aria-hidden="true"
-      class="bx--carousel__navigation__status"
-    >
-      1 / 0
-    </span>
-    <span
-      aria-live="polite"
-      class="bx--visually-hidden"
-    >
-    </span>
-    <button
-      aria-label="next"
-      class="bx--btn bx--btn--icon-only bx--btn--tertiary bx--carousel__navigation__btn"
-      disabled=""
-      part="next-button"
-      title="next"
-    >
-    </button>
-  </nav>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-block-card-static.md b/packages/web-components/tests/snapshots/dds-content-block-card-static.md
index 20a6d86dec8..74d12303ec6 100644
--- a/packages/web-components/tests/snapshots/dds-content-block-card-static.md
+++ b/packages/web-components/tests/snapshots/dds-content-block-card-static.md
@@ -8,10 +8,9 @@
 <dds-content-block-card-static>
   <dds-card-group-item
     color-scheme=""
-    cta-type=""
     data-autoid="dds--card-group-item"
     pictogram-placement=""
-    size=""
+    size="md"
   >
   </dds-card-group-item>
   <dds-card-group
@@ -36,20 +35,28 @@
     style="--dds--button-group--item-count: 2;"
   >
     <dds-button-group-item
+      cta-type=""
       data-autoid="dds--button-group-item"
-      icon-layout=""
+      isexpressive=""
       kind="primary"
       role="listitem"
-      size=""
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
     >
       Button 1
     </dds-button-group-item>
     <dds-button-group-item
+      cta-type=""
       data-autoid="dds--button-group-item"
-      icon-layout=""
+      isexpressive=""
       kind="tertiary"
       role="listitem"
-      size=""
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
     >
       Buuton 2
     </dds-button-group-item>
@@ -64,10 +71,9 @@
 <dds-content-block-card-static>
   <dds-card-group-item
     color-scheme=""
-    cta-type=""
     data-autoid="dds--card-group-item"
     pictogram-placement=""
-    size=""
+    size="md"
   >
     heading-foo
   </dds-card-group-item>
@@ -78,11 +84,10 @@
   >
     <dds-card-group-item
       color-scheme=""
-      cta-type=""
       data-autoid="dds--card-group-item"
       href="https://example.com"
       pictogram-placement=""
-      size=""
+      size="md"
     >
       <dds-card-heading
         aria-level="3"
@@ -102,9 +107,7 @@
         color-scheme=""
         cta-type=""
         data-autoid="dds--card-cta-footer"
-        href="https://example.com"
         icon-placement="right"
-        parent-href="https://example.com"
         slot="footer"
       >
       </dds-card-cta-footer>
@@ -131,20 +134,28 @@
     style="--dds--button-group--item-count: 2;"
   >
     <dds-button-group-item
+      cta-type=""
       data-autoid="dds--button-group-item"
-      icon-layout=""
+      isexpressive=""
       kind="primary"
       role="listitem"
-      size=""
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
     >
       Button 1
     </dds-button-group-item>
     <dds-button-group-item
+      cta-type=""
       data-autoid="dds--button-group-item"
-      icon-layout=""
+      isexpressive=""
       kind="tertiary"
       role="listitem"
-      size=""
+      size="lg"
+      tooltip-alignment=""
+      tooltip-position="top"
+      type="button"
     >
       Buuton 2
     </dds-button-group-item>
diff --git a/packages/web-components/tests/snapshots/dds-content-block-cards.md b/packages/web-components/tests/snapshots/dds-content-block-cards.md
deleted file mode 100644
index 90e73b7a83b..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-block-cards.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `dds-content-block-cards`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout bx--content-layout--card-group">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot>
-    </slot>
-    <slot name="media">
-    </slot>
-    <div
-      class="false"
-      hidden=""
-      style="null"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout bx--content-layout--card-group">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot>
-    </slot>
-    <slot name="media">
-    </slot>
-    <div
-      class="false"
-      hidden=""
-      style="null"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-block-headlines.md b/packages/web-components/tests/snapshots/dds-content-block-headlines.md
deleted file mode 100644
index f97646706fd..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-block-headlines.md
+++ /dev/null
@@ -1,38 +0,0 @@
-# `dds-content-block-headlines`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout bx--content-layout--with-headlines bx--layout--border">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <div
-      class="bx--content-block-headlines__item-container"
-      hidden=""
-    >
-      <slot>
-      </slot>
-    </div>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-block-horizontal.md b/packages/web-components/tests/snapshots/dds-content-block-horizontal.md
deleted file mode 100644
index 038c21658c4..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-block-horizontal.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `dds-content-block-horizontal`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-block-media.md b/packages/web-components/tests/snapshots/dds-content-block-media.md
deleted file mode 100644
index 2170932ffc7..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-block-media.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `dds-content-block-media`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot>
-    </slot>
-    <slot name="media">
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot>
-    </slot>
-    <slot name="media">
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-block-segmented.md b/packages/web-components/tests/snapshots/dds-content-block-segmented.md
deleted file mode 100644
index 76c3d5fbc0c..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-block-segmented.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `dds-content-block-segmented`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-block-simple.md b/packages/web-components/tests/snapshots/dds-content-block-simple.md
deleted file mode 100644
index cb99f2b872c..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-block-simple.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `dds-content-block-simple`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot>
-    </slot>
-    <slot name="media">
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout bx--content-layout--with-complementary bx--layout--border">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot>
-    </slot>
-    <slot name="media">
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-group-banner.md b/packages/web-components/tests/snapshots/dds-content-group-banner.md
deleted file mode 100644
index 942d3076f49..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-group-banner.md
+++ /dev/null
@@ -1,66 +0,0 @@
-# `dds-content-group-banner`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-group-cards.md b/packages/web-components/tests/snapshots/dds-content-group-cards.md
deleted file mode 100644
index 1e2c91ff8ba..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-group-cards.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# `dds-content-group-cards`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <div
-      class="bx--content-group__children bx--content-group__col"
-      hidden=""
-    >
-      <div class="bx--content-group-cards-group bx--grid--condensed">
-        <div class="bx--content-group-cards__row">
-          <slot>
-          </slot>
-          <slot name="media">
-          </slot>
-        </div>
-      </div>
-    </div>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <div
-      class="bx--content-group__children bx--content-group__col"
-      hidden=""
-    >
-      <div class="bx--content-group-cards-group bx--grid--condensed">
-        <div class="bx--content-group-cards__row">
-          <slot>
-          </slot>
-          <slot name="media">
-          </slot>
-        </div>
-      </div>
-    </div>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-group-simple.md b/packages/web-components/tests/snapshots/dds-content-group-simple.md
deleted file mode 100644
index d1ff09453c5..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-group-simple.md
+++ /dev/null
@@ -1,62 +0,0 @@
-# `dds-content-group-simple`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      hidden=""
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div class="bx--content-layout__body">
-    <slot name="copy">
-    </slot>
-    <slot name="media">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="null"
-      style="undefined"
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-item-horizontal.md b/packages/web-components/tests/snapshots/dds-content-item-horizontal.md
deleted file mode 100644
index 8a1c957aee3..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-item-horizontal.md
+++ /dev/null
@@ -1,226 +0,0 @@
-# `dds-content-item-horizontal`
-
-## `Misc attributes - Default`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-item-horizontal__heading-wrapper">
-  <slot name="eyebrow">
-  </slot>
-  <slot name="heading">
-  </slot>
-</div>
-<div class="bx--content-item-horizontal__content-wrapper">
-  <slot>
-  </slot>
-  <div
-    class="bx--content-item__cta"
-    hidden=""
-  >
-    <slot name="footer">
-    </slot>
-  </div>
-  <slot name="media">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-item-horizontal__heading-wrapper">
-  <slot name="eyebrow">
-  </slot>
-  <slot name="heading">
-  </slot>
-</div>
-<div class="bx--content-item-horizontal__content-wrapper">
-  <slot>
-  </slot>
-  <div
-    class="bx--content-item__cta"
-    hidden=""
-  >
-    <slot name="footer">
-    </slot>
-  </div>
-  <slot name="media">
-  </slot>
-</div>
-
-```
-
-## `Misc attributes - WithMedia`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-item-horizontal-media__align-right bx--content-item-horizontal__row">
-  <div class="bx--content-item-horizontal__col">
-    <slot name="eyebrow">
-    </slot>
-    <slot name="heading">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="bx--content-item__cta"
-      hidden=""
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <div class="bx--content-item-horizontal__col">
-    <slot name="media">
-    </slot>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-item-horizontal-media__align-right bx--content-item-horizontal__row">
-  <div class="bx--content-item-horizontal__col">
-    <slot name="eyebrow">
-    </slot>
-    <slot name="heading">
-    </slot>
-    <slot>
-    </slot>
-    <div
-      class="bx--content-item__cta"
-      hidden=""
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-  <div class="bx--content-item-horizontal__col">
-    <slot name="media">
-    </slot>
-  </div>
-</div>
-
-```
-
-## `Misc attributes - WithFeaturedMedia`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-item-horizontal__row">
-  <div class="bx--content-item-horizontal__col">
-    <slot name="eyebrow">
-    </slot>
-    <slot name="heading">
-    </slot>
-  </div>
-  <div class="bx--content-item-horizontal__col">
-    <slot>
-    </slot>
-    <div
-      class="bx--content-item__cta"
-      hidden=""
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<div class="bx--content-item-horizontal__row">
-  <slot name="media">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-item-horizontal__row">
-  <div class="bx--content-item-horizontal__col">
-    <slot name="eyebrow">
-    </slot>
-    <slot name="heading">
-    </slot>
-  </div>
-  <div class="bx--content-item-horizontal__col">
-    <slot>
-    </slot>
-    <div
-      class="bx--content-item__cta"
-      hidden=""
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<div class="bx--content-item-horizontal__row">
-  <slot name="media">
-  </slot>
-</div>
-
-```
-
-## `Misc attributes - WithThumbnail`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-item-horizontal__body-wrapper">
-  <div class="bx--content-item-horizontal__heading-wrapper">
-    <slot name="heading">
-    </slot>
-  </div>
-  <div class="bx--content-item-horizontal__content-wrapper">
-    <slot>
-    </slot>
-    <div
-      class="bx--content-item__cta"
-      hidden=""
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<div class="bx--content-item-horizontal__col--2">
-  <slot name="thumbnail">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-item-horizontal__body-wrapper">
-  <div class="bx--content-item-horizontal__heading-wrapper">
-    <slot name="heading">
-    </slot>
-  </div>
-  <div class="bx--content-item-horizontal__content-wrapper">
-    <slot>
-    </slot>
-    <div
-      class="bx--content-item__cta"
-      hidden=""
-    >
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<div class="bx--content-item-horizontal__col--2">
-  <slot name="thumbnail">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-item.md b/packages/web-components/tests/snapshots/dds-content-item.md
deleted file mode 100644
index f07f3ebd2d0..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-item.md
+++ /dev/null
@@ -1,43 +0,0 @@
-# `dds-content-item`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<slot name="heading">
-</slot>
-<div>
-  <slot name="media">
-  </slot>
-</div>
-<slot>
-</slot>
-<div
-  class="bx--content-item__cta"
-  hidden=""
->
-  <slot name="footer">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<slot name="heading">
-</slot>
-<div>
-  <slot name="media">
-  </slot>
-</div>
-<slot>
-</slot>
-<div class="bx--content-item__cta">
-  <slot name="footer">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-content-section.md b/packages/web-components/tests/snapshots/dds-content-section.md
deleted file mode 100644
index c5dc4527bba..00000000000
--- a/packages/web-components/tests/snapshots/dds-content-section.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# `dds-content-section`
-
-#### `renders properly`
-
-```
-<div class="bx--content-section bx--content-section-layout">
-  <div class="bx--content-section__leading">
-    <slot name="heading">
-    </slot>
-    <slot name="copy">
-    </slot>
-    <slot name="footer">
-    </slot>
-  </div>
-  <div class="bx--content-section__body">
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-cta-block.md b/packages/web-components/tests/snapshots/dds-cta-block.md
deleted file mode 100644
index 60fc1ac94cf..00000000000
--- a/packages/web-components/tests/snapshots/dds-cta-block.md
+++ /dev/null
@@ -1,136 +0,0 @@
-# `dds-cta-block`
-
-#### `Renders Default`
-
-```
-<div class="bx--content-layout">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <div
-      class="bx--content-layout__copy"
-      hidden=""
-    >
-      <slot name="copy">
-      </slot>
-    </div>
-    <div
-      class="bx--content-layout__cta"
-      hidden=""
-    >
-      <slot name="action">
-      </slot>
-    </div>
-    <div
-      class="bx--content-layout__link-list"
-      hidden=""
-    >
-      <slot name="link-list">
-      </slot>
-    </div>
-    <div
-      class="bx--helper-wrapper bx--helper-wrapper--less-space"
-      hidden=""
-    >
-      <div class="bx--content-item-wrapper">
-        <slot>
-        </slot>
-      </div>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout bx--content-layout--border">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <div
-      class="bx--content-layout__copy"
-      hidden=""
-    >
-      <slot name="copy">
-      </slot>
-    </div>
-    <div
-      class="bx--content-layout__cta"
-      hidden=""
-    >
-      <slot name="action">
-      </slot>
-    </div>
-    <div
-      class="bx--content-layout__link-list"
-      hidden=""
-    >
-      <slot name="link-list">
-      </slot>
-    </div>
-    <div
-      class="bx--helper-wrapper bx--helper-wrapper--less-space"
-      hidden=""
-    >
-      <div class="bx--content-item-wrapper">
-        <slot>
-        </slot>
-      </div>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout bx--content-layout--border">
-  <slot name="heading">
-  </slot>
-  <div class="bx--content-layout__body">
-    <div
-      class="bx--content-layout__copy"
-      hidden=""
-    >
-      <slot name="copy">
-      </slot>
-    </div>
-    <div class="bx--content-layout__cta">
-      <slot name="action">
-      </slot>
-    </div>
-    <div
-      class="bx--content-layout__link-list"
-      hidden=""
-    >
-      <slot name="link-list">
-      </slot>
-    </div>
-    <div class="bx--helper-wrapper">
-      <div class="bx--content-item-wrapper">
-        <slot>
-        </slot>
-      </div>
-    </div>
-  </div>
-  <slot name="complementary">
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-expressive-modal.md b/packages/web-components/tests/snapshots/dds-expressive-modal.md
deleted file mode 100644
index b5e091d51bc..00000000000
--- a/packages/web-components/tests/snapshots/dds-expressive-modal.md
+++ /dev/null
@@ -1,216 +0,0 @@
-# `dds-expressive-modal`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div
-      class="dds-ce--modal__header--with-body"
-      id="dds--modal-header"
-    >
-      <slot name="header">
-      </slot>
-    </div>
-    <div class="dds-ce--modal__body dds-ce--modal__body--with-footer">
-      <slot>
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
-####   `should render with various attributes`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div
-      class="dds-ce--modal__header--with-body"
-      id="dds--modal-header"
-    >
-      <slot name="header">
-      </slot>
-    </div>
-    <div class="dds-ce--modal__body dds-ce--modal__body--with-footer">
-      <slot>
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
-## `Misc contents`
-
-####   `should render with header only`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div
-      class="dds-ce--modal__header--with-body"
-      id="dds--modal-header"
-    >
-      <slot name="header">
-      </slot>
-    </div>
-    <div class="dds-ce--modal__body">
-      <slot>
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
-####   `should render with header and body only`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div
-      class="dds-ce--modal__header--with-body"
-      id="dds--modal-header"
-    >
-      <slot name="header">
-      </slot>
-    </div>
-    <div class="dds-ce--modal__body">
-      <slot>
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
-####   `should render with header and footer only`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div
-      class="dds-ce--modal__header--with-body"
-      id="dds--modal-header"
-    >
-      <slot name="header">
-      </slot>
-    </div>
-    <div class="dds-ce--modal__body dds-ce--modal__body--with-footer">
-      <slot>
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-feature-card.md b/packages/web-components/tests/snapshots/dds-feature-card.md
deleted file mode 100644
index 24361052c1b..00000000000
--- a/packages/web-components/tests/snapshots/dds-feature-card.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# `dds-feature-card`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--card bx--feature-card__card bx--tile">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--card bx--card--link bx--feature-card__card bx--tile bx--tile--clickable">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-feature-cta.md b/packages/web-components/tests/snapshots/dds-feature-cta.md
deleted file mode 100644
index 7edf3ab22a5..00000000000
--- a/packages/web-components/tests/snapshots/dds-feature-cta.md
+++ /dev/null
@@ -1,61 +0,0 @@
-# `dds-feature-cta`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--card bx--feature-card__card bx--tile">
-  <slot name="image">
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div
-        class="bx--card__copy"
-        hidden=""
-      >
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--card bx--feature-card__card bx--tile">
-  <slot name="image">
-    <dds-image
-      alt="video-name-foo"
-      data-autoid="dds--image"
-      slot="image"
-    >
-    </dds-image>
-  </slot>
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <slot name="eyebrow">
-      </slot>
-      <slot name="heading">
-      </slot>
-      <div class="bx--card__copy">
-        <slot>
-        </slot>
-      </div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-feature-section.md b/packages/web-components/tests/snapshots/dds-feature-section.md
deleted file mode 100644
index 3ce9060cb84..00000000000
--- a/packages/web-components/tests/snapshots/dds-feature-section.md
+++ /dev/null
@@ -1,64 +0,0 @@
-# `dds-feature-section`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--card bx--feature-card__card bx--feature-section bx--grid bx--tile">
-  <div class="bx--feature-section__container bx--row">
-    <div class="bx--col-lg-8 bx--col-md-8 bx--col-sm-4 bx--feature-section__body">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-md-6 bx--col-sm-4">
-            <slot name="eyebrow">
-            </slot>
-            <slot name="heading">
-            </slot>
-            <slot name="copy">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="bx--col-lg-8 bx--col-md-8 bx--col-sm-4 bx--feature-section__image">
-      <slot name="image">
-      </slot>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--card bx--feature-card__card bx--feature-section bx--grid bx--tile">
-  <div class="bx--feature-section__container bx--row">
-    <div class="bx--col-lg-8 bx--col-md-8 bx--col-sm-4 bx--feature-section__body">
-      <div class="bx--grid">
-        <div class="bx--row">
-          <div class="bx--col-lg-12 bx--col-md-6 bx--col-sm-4">
-            <slot name="eyebrow">
-            </slot>
-            <slot name="heading">
-            </slot>
-            <slot name="copy">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="bx--col-lg-8 bx--col-md-8 bx--col-sm-4 bx--feature-section__image">
-      <slot name="image">
-      </slot>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-footer-composite.md b/packages/web-components/tests/snapshots/dds-footer-composite.md
deleted file mode 100644
index 8d3980da304..00000000000
--- a/packages/web-components/tests/snapshots/dds-footer-composite.md
+++ /dev/null
@@ -1,129 +0,0 @@
-# `dds-footer-composite`
-
-## `Misc attributes`
-
-####   `should render minimum attributes`
-
-```
-<dds-footer-composite size="">
-  <dds-footer
-    aria-label="footer"
-    data-autoid="dds--footer"
-    role="contentinfo"
-    size=""
-  >
-    <dds-footer-logo data-autoid="dds--footer-logo">
-    </dds-footer-logo>
-    <dds-footer-nav
-      aria-label="Footer navigation"
-      data-autoid="dds--footer-nav"
-      role="navigation"
-    >
-    </dds-footer-nav>
-    <dds-locale-button
-      data-autoid="dds--locale-btn"
-      size=""
-      slot="locale-button"
-    >
-    </dds-locale-button>
-    <dds-legal-nav
-      data-autoid="dds--footer-legal-nav"
-      size=""
-    >
-      <dds-legal-nav-cookie-preferences-placeholder data-autoid="dds--privacy-cp">
-      </dds-legal-nav-cookie-preferences-placeholder>
-    </dds-legal-nav>
-  </dds-footer>
-</dds-footer-composite>
-
-```
-
-####   `should render various attributes`
-
-```
-<dds-footer-composite
-  lang-display="lang-display-foo"
-  language="ko-KR"
-  size=""
->
-  <dds-footer
-    aria-label="footer"
-    data-autoid="dds--footer"
-    role="contentinfo"
-    size=""
-  >
-    <dds-footer-logo data-autoid="dds--footer-logo">
-    </dds-footer-logo>
-    <dds-footer-nav
-      aria-label="Footer navigation"
-      data-autoid="dds--footer-nav"
-      role="navigation"
-    >
-      <dds-footer-nav-group
-        data-autoid="dds--footer-nav-group"
-        role="listitem"
-        title-text="group-title-foo"
-      >
-        <dds-footer-nav-item
-          href="https://dummy.ibm.com/foo/foo"
-          role="listitem"
-        >
-          item-title-foo-foo
-        </dds-footer-nav-item>
-        <dds-footer-nav-item
-          href="https://dummy.ibm.com/foo/bar"
-          role="listitem"
-        >
-          item-title-foo-bar
-        </dds-footer-nav-item>
-      </dds-footer-nav-group>
-      <dds-footer-nav-group
-        data-autoid="dds--footer-nav-group"
-        role="listitem"
-        title-text="group-title-bar"
-      >
-        <dds-footer-nav-item
-          href="https://dummy.ibm.com/bar/foo"
-          role="listitem"
-        >
-          item-title-bar-foo
-        </dds-footer-nav-item>
-        <dds-footer-nav-item
-          href="https://dummy.ibm.com/bar/bar"
-          role="listitem"
-        >
-          item-title-bar-bar
-        </dds-footer-nav-item>
-      </dds-footer-nav-group>
-    </dds-footer-nav>
-    <dds-locale-button
-      data-autoid="dds--locale-btn"
-      size=""
-      slot="locale-button"
-    >
-      lang-display-foo
-    </dds-locale-button>
-    <dds-legal-nav
-      data-autoid="dds--footer-legal-nav"
-      size=""
-    >
-      <dds-legal-nav-item
-        href="https://dummy.ibm.com/foo"
-        role="listitem"
-      >
-        title-foo
-      </dds-legal-nav-item>
-      <dds-legal-nav-item
-        href="https://dummy.ibm.com/bar"
-        role="listitem"
-      >
-        title-bar
-      </dds-legal-nav-item>
-      <dds-legal-nav-cookie-preferences-placeholder data-autoid="dds--privacy-cp">
-      </dds-legal-nav-cookie-preferences-placeholder>
-    </dds-legal-nav>
-  </dds-footer>
-</dds-footer-composite>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-footer-logo.md b/packages/web-components/tests/snapshots/dds-footer-logo.md
deleted file mode 100644
index 313e804f1ad..00000000000
--- a/packages/web-components/tests/snapshots/dds-footer-logo.md
+++ /dev/null
@@ -1,32 +0,0 @@
-# `dds-footer-logo`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  aria-label="IBM logo"
-  class="bx--footer-logo__link"
-  href="https://www.ibm.com/"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  aria-label="IBM logo"
-  class="bx--footer-logo__link"
-  href="https://cloud.ibm.com/"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-footer-nav-group.md b/packages/web-components/tests/snapshots/dds-footer-nav-group.md
deleted file mode 100644
index 1f27217a229..00000000000
--- a/packages/web-components/tests/snapshots/dds-footer-nav-group.md
+++ /dev/null
@@ -1,96 +0,0 @@
-# `dds-footer-nav-group`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes for narrow screen`
-
-```
-<button
-  aria-controls="content"
-  aria-expanded="false"
-  class="bx--accordion__heading"
-  type="button"
->
-  <div class="bx--accordion__title">
-    <slot name="title">
-    </slot>
-  </div>
-</button>
-<div
-  class="bx--accordion__content"
-  id="content"
->
-  <ul>
-    <slot>
-    </slot>
-  </ul>
-</div>
-
-```
-
-####   `should render with minimum attributes for wide screen`
-
-```
-<h2 class="bx--footer-nav-group__title">
-  <slot name="title">
-  </slot>
-</h2>
-<div
-  class="bx--accordion__content"
-  id="content"
->
-  <ul>
-    <slot>
-    </slot>
-  </ul>
-</div>
-
-```
-
-####   `should render with various attributes for narrow screen`
-
-```
-<button
-  aria-controls="content"
-  aria-expanded="true"
-  class="bx--accordion__heading"
-  type="button"
->
-  <div class="bx--accordion__title">
-    <slot name="title">
-      title-text-foo
-    </slot>
-  </div>
-</button>
-<div
-  class="bx--accordion__content"
-  id="content"
->
-  <ul>
-    <slot>
-    </slot>
-  </ul>
-</div>
-
-```
-
-####   `should render with various attributes for wide screen`
-
-```
-<h2 class="bx--footer-nav-group__title">
-  <slot name="title">
-    title-text-foo
-  </slot>
-</h2>
-<div
-  class="bx--accordion__content"
-  id="content"
->
-  <ul>
-    <slot>
-    </slot>
-  </ul>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-footer-nav-item.md b/packages/web-components/tests/snapshots/dds-footer-nav-item.md
deleted file mode 100644
index da0627e2d4e..00000000000
--- a/packages/web-components/tests/snapshots/dds-footer-nav-item.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# `dds-footer-nav-item`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  class="bx--footer__link bx--link"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  class="bx--footer__link bx--link"
-  id="link"
-  part="link"
->
-  <slot>
-    title-text-foo
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-hr.md b/packages/web-components/tests/snapshots/dds-hr.md
deleted file mode 100644
index ef144cadd6b..00000000000
--- a/packages/web-components/tests/snapshots/dds-hr.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# `dds-hr`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-
-```
-
-####   `should render with various attributes`
-
-```
-
-```
-
-####   `should render with other various attributes`
-
-```
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-image.md b/packages/web-components/tests/snapshots/dds-image.md
deleted file mode 100644
index 6f6ae3ddc5e..00000000000
--- a/packages/web-components/tests/snapshots/dds-image.md
+++ /dev/null
@@ -1,58 +0,0 @@
-# `dds-image`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<slot>
-</slot>
-<picture>
-  <img
-    alt=""
-    aria-describedby="image-caption long-description"
-    class="bx--image__img"
-    loading="lazy"
-    part="image"
-    src=""
-  >
-</picture>
-<div
-  class="bx--image__longdescription"
-  id="long-description"
->
-  <slot name="long-description">
-  </slot>
-</div>
-<slot name="icon">
-</slot>
-
-```
-
-####   `should render with various attributes`
-
-```
-<slot>
-</slot>
-<picture>
-  <img
-    alt=""
-    aria-describedby="image-caption long-description"
-    class="bx--image__img"
-    loading="lazy"
-    part="image"
-    src=""
-  >
-</picture>
-<div
-  class="bx--image__longdescription"
-  id="long-description"
->
-  <slot name="long-description">
-  </slot>
-</div>
-<slot name="icon">
-</slot>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-leadspace-block.md b/packages/web-components/tests/snapshots/dds-leadspace-block.md
deleted file mode 100644
index 5c322386f50..00000000000
--- a/packages/web-components/tests/snapshots/dds-leadspace-block.md
+++ /dev/null
@@ -1,94 +0,0 @@
-# `dds-leadspace-block`
-
-## `Misc attributes - Default`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot
-    hidden=""
-    name="heading"
-  >
-  </slot>
-  <div class="bx--content-layout__body">
-    <slot>
-    </slot>
-    <dds-hr
-      data-autoid="dds--hr"
-      role="separator"
-    >
-    </dds-hr>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot
-    hidden=""
-    name="heading"
-  >
-  </slot>
-  <div class="bx--content-layout__body">
-    <slot>
-    </slot>
-    <dds-hr
-      data-autoid="dds--hr"
-      role="separator"
-    >
-    </dds-hr>
-  </div>
-</div>
-
-```
-
-## `Misc attributes - WithVideo`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--content-layout">
-  <slot
-    hidden=""
-    name="heading"
-  >
-  </slot>
-  <div class="bx--content-layout__body">
-    <slot>
-    </slot>
-    <dds-hr
-      data-autoid="dds--hr"
-      role="separator"
-    >
-    </dds-hr>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--content-layout">
-  <slot
-    hidden=""
-    name="heading"
-  >
-  </slot>
-  <div class="bx--content-layout__body">
-    <slot>
-    </slot>
-    <dds-hr
-      data-autoid="dds--hr"
-      role="separator"
-    >
-    </dds-hr>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-leadspace.md b/packages/web-components/tests/snapshots/dds-leadspace.md
deleted file mode 100644
index 8aa855f8bd6..00000000000
--- a/packages/web-components/tests/snapshots/dds-leadspace.md
+++ /dev/null
@@ -1,494 +0,0 @@
-# `dds-leadspace`
-
-## `Misc attributes - TallWithNoImage`
-
-####   `should render with minimum attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-####   `should render with various attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-## `Misc attributes - TallWithImage`
-
-####   `should render with minimum attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-####   `should render with various attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace--gradient bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-## `Misc attributes - Centered`
-
-####   `should render with minimum attributes`
-
-```
-<section
-  class="bx--leadspace--centered bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-####   `should render with various attributes`
-
-```
-<section
-  class="bx--leadspace--centered bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-## `Misc attributes - CenteredWithImage`
-
-####   `should render with minimum attributes`
-
-```
-<section
-  class="bx--leadspace--centered bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-####   `should render with various attributes`
-
-```
-<section
-  class="bx--leadspace--centered bx--leadspace--centered__image bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace--gradient bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-## `Misc attributes - Medium`
-
-####   `should render with minimum attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-####   `should render with various attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-## `Misc attributes - MediumWithImage`
-
-####   `should render with minimum attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
-####   `should render with various attributes`
-
-```
-<section
-  class="bx--leadspace__section"
-  part="section"
->
-  <div class="bx--leadspace__container">
-    <div class="bx--leadspace--gradient bx--leadspace__overlay">
-      <div class="bx--leadspace--content__container">
-        <div class="bx--leadspace__row">
-          <slot name="navigation">
-          </slot>
-          <slot name="heading">
-          </slot>
-        </div>
-        <div class="bx--leadspace__content">
-          <div class="bx--leadspace__row">
-            <p
-              class="bx--leadspace__desc"
-              data-autoid="dds--leadspace__desc"
-            >
-              <slot>
-              </slot>
-            </p>
-          </div>
-          <div class="bx--leadspace__action">
-            <slot name="action">
-            </slot>
-          </div>
-        </div>
-      </div>
-    </div>
-    <slot name="image">
-    </slot>
-  </div>
-</section>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-leaving-ibm-composite.md b/packages/web-components/tests/snapshots/dds-leaving-ibm-composite.md
deleted file mode 100644
index fc84df9795c..00000000000
--- a/packages/web-components/tests/snapshots/dds-leaving-ibm-composite.md
+++ /dev/null
@@ -1,13 +0,0 @@
-# `dds-leaving-ibm-composite`
-
-#### `should render modal body`
-
-```
-<dds-leaving-ibm-composite
-  href="http://www.example.com"
-  open=""
->
-</dds-leaving-ibm-composite>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-left-nav-menu.md b/packages/web-components/tests/snapshots/dds-left-nav-menu.md
deleted file mode 100644
index c5058ff96a3..00000000000
--- a/packages/web-components/tests/snapshots/dds-left-nav-menu.md
+++ /dev/null
@@ -1,49 +0,0 @@
-# `dds-left-nav-menu`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--side-nav__item">
-  <button
-    aria-expanded="false"
-    aria-haspopup="true"
-    class="bx--side-nav__submenu"
-    tabindex="-1"
-    type="button"
-  >
-    <div class="bx--side-nav__submenu-content">
-      <span class="bx--side-nav__submenu-title">
-      </span>
-      <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      </div>
-    </div>
-  </button>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--side-nav__item">
-  <button
-    aria-expanded="true"
-    aria-haspopup="true"
-    class="bx--side-nav__submenu"
-    tabindex="-1"
-    type="button"
-  >
-    <div class="bx--side-nav__submenu-content">
-      <span class="bx--side-nav__submenu-title">
-        title-foo
-      </span>
-      <div class="bx--side-nav__icon bx--side-nav__icon--small bx--side-nav__submenu-chevron">
-      </div>
-    </div>
-  </button>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-lightbox-image-viewer.md b/packages/web-components/tests/snapshots/dds-lightbox-image-viewer.md
deleted file mode 100644
index 5f5aad7b44d..00000000000
--- a/packages/web-components/tests/snapshots/dds-lightbox-image-viewer.md
+++ /dev/null
@@ -1,80 +0,0 @@
-# `dds-lightbox-image-viewer`
-
-#### `should render with minimum attributes`
-
-```
-<div class="bx--lightbox-media-viewer__container">
-  <div class="bx--lightbox-media-viewer__row">
-    <div class="bx--lightbox-media-viewer__media bx--no-gutter">
-      <img
-        alt=""
-        class="bx--image__img"
-        loading="lazy"
-        src=""
-      >
-    </div>
-    <div class="bx--lightbox-media-viewer__media-description bx--no-gutter">
-      <div class="bx--lightbox-media-viewer__content">
-        <div
-          class="bx--lightbox-media-viewer__content__title"
-          data-autoid="dds--lightbox-media-viewer__content__title"
-          part="title"
-        >
-          <slot name="title">
-          </slot>
-        </div>
-        <div
-          class="bx--lightbox-media-viewer__content__desc"
-          data-autoid="dds--lightbox-media-viewer__content__desc"
-          part="description"
-        >
-          <slot name="description">
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
-#### `should render with various attributes`
-
-```
-<div class="bx--lightbox-media-viewer__container">
-  <div class="bx--lightbox-media-viewer__row">
-    <div class="bx--lightbox-media-viewer__media bx--no-gutter">
-      <img
-        alt="image-alt-foo"
-        class="bx--image__img"
-        loading="lazy"
-        src="https://example.com/image"
-      >
-    </div>
-    <div class="bx--lightbox-media-viewer__media-description bx--no-gutter">
-      <div class="bx--lightbox-media-viewer__content">
-        <div
-          class="bx--lightbox-media-viewer__content__title"
-          data-autoid="dds--lightbox-media-viewer__content__title"
-          part="title"
-        >
-          <slot name="title">
-            image-title-foo
-          </slot>
-        </div>
-        <div
-          class="bx--lightbox-media-viewer__content__desc"
-          data-autoid="dds--lightbox-media-viewer__content__desc"
-          part="description"
-        >
-          <slot name="description">
-            image-description-foo
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-lightbox-video-player-composite.md b/packages/web-components/tests/snapshots/dds-lightbox-video-player-composite.md
deleted file mode 100644
index 5054c60a693..00000000000
--- a/packages/web-components/tests/snapshots/dds-lightbox-video-player-composite.md
+++ /dev/null
@@ -1,25 +0,0 @@
-# `dds-lightbox-video-player-composite`
-
-#### `should render the video player`
-
-```
-<div style="display: contents;">
-  <dds-expressive-modal
-    data-autoid="dds--expressive-modal"
-    expressive-size="full-width"
-    mode="lightbox"
-  >
-    <dds-expressive-modal-close-button data-autoid="dds--expressive-modal-close-button">
-    </dds-expressive-modal-close-button>
-    <dds-lightbox-video-player
-      description="video-description-foo"
-      duration="120"
-      name="video-name-foo"
-      role="dialog"
-    >
-    </dds-lightbox-video-player>
-  </dds-expressive-modal>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-lightbox-video-player.md b/packages/web-components/tests/snapshots/dds-lightbox-video-player.md
deleted file mode 100644
index fa13dd58de9..00000000000
--- a/packages/web-components/tests/snapshots/dds-lightbox-video-player.md
+++ /dev/null
@@ -1,84 +0,0 @@
-# `dds-lightbox-video-player`
-
-#### `should render with minimum attributes`
-
-```
-<div class="bx--lightbox-media-viewer__container">
-  <div class="bx--lightbox-media-viewer__row">
-    <div class="bx--lightbox-media-viewer__media bx--no-gutter">
-      <div class="bx--video-player">
-        <div class="bx--video-player__video-container">
-          <slot>
-          </slot>
-        </div>
-      </div>
-    </div>
-    <div class="bx--lightbox-media-viewer__media-description bx--no-gutter">
-      <div class="bx--lightbox-media-viewer__content">
-        <div
-          class="bx--lightbox-media-viewer__content__title"
-          data-autoid="dds--lightbox-media-viewer__content__title"
-          part="title"
-        >
-          <slot name="title">
-            <h2 style="all: inherit;">
-            </h2>
-          </slot>
-        </div>
-        <div
-          class="bx--lightbox-media-viewer__content__desc"
-          data-autoid="dds--lightbox-media-viewer__content__desc"
-          part="description"
-        >
-          <slot name="description">
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
-#### `should render with various attributes`
-
-```
-<div class="bx--lightbox-media-viewer__container">
-  <div class="bx--lightbox-media-viewer__row">
-    <div class="bx--lightbox-media-viewer__media bx--no-gutter">
-      <div class="bx--video-player">
-        <div class="bx--video-player__video-container">
-          <slot>
-          </slot>
-        </div>
-      </div>
-    </div>
-    <div class="bx--lightbox-media-viewer__media-description bx--no-gutter">
-      <div class="bx--lightbox-media-viewer__content">
-        <div
-          class="bx--lightbox-media-viewer__content__title"
-          data-autoid="dds--lightbox-media-viewer__content__title"
-          part="title"
-        >
-          <slot name="title">
-            <h2 style="all: inherit;">
-              video-name-foo (0:30)
-            </h2>
-          </slot>
-        </div>
-        <div
-          class="bx--lightbox-media-viewer__content__desc"
-          data-autoid="dds--lightbox-media-viewer__content__desc"
-          part="description"
-        >
-          <slot name="description">
-            video-description-foo
-          </slot>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-link-list-section.md b/packages/web-components/tests/snapshots/dds-link-list-section.md
deleted file mode 100644
index 75b8eb7420a..00000000000
--- a/packages/web-components/tests/snapshots/dds-link-list-section.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# `dds-link-list-section`
-
-#### `Renders properly`
-
-```
-<div class="bx--content-section__grid">
-  <div class="bx--content-section__row">
-    <div class="bx--content-section__left">
-      <slot name="heading">
-      </slot>
-    </div>
-    <div class="bx--content-section__children">
-      <slot>
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-link-list.md b/packages/web-components/tests/snapshots/dds-link-list.md
deleted file mode 100644
index e27ffdcf6fe..00000000000
--- a/packages/web-components/tests/snapshots/dds-link-list.md
+++ /dev/null
@@ -1,70 +0,0 @@
-# `dds-link-list`
-
-#### `Renders Default`
-
-```
-<div class="dds-ce--link-list__heading__wrapper">
-  <slot name="heading">
-  </slot>
-</div>
-<ul
-  class="bx--link-list__list bx--link-list__list--card"
-  name="list"
->
-  <slot>
-  </slot>
-</ul>
-
-```
-
-#### `Renders Horizontal`
-
-```
-<div class="dds-ce--link-list__heading__wrapper">
-  <slot name="heading">
-  </slot>
-</div>
-<ul
-  class="bx--link-list__list bx--link-list__list--horizontal"
-  name="list"
->
-  <slot>
-  </slot>
-</ul>
-
-```
-
-#### `Renders Vertical`
-
-```
-<div class="dds-ce--link-list__heading__wrapper">
-  <slot name="heading">
-  </slot>
-</div>
-<ul
-  class="bx--link-list__list bx--link-list__list--vertical"
-  name="list"
->
-  <slot>
-  </slot>
-</ul>
-
-```
-
-#### `Renders End of section`
-
-```
-<div class="dds-ce--link-list__heading__wrapper">
-  <slot name="heading">
-  </slot>
-</div>
-<ul
-  class="bx--link-list__list dds-ce--link-list__list--end"
-  name="list"
->
-  <slot>
-  </slot>
-</ul>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-link-with-icon.md b/packages/web-components/tests/snapshots/dds-link-with-icon.md
deleted file mode 100644
index 624c099b007..00000000000
--- a/packages/web-components/tests/snapshots/dds-link-with-icon.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# `dds-link-with-icon`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  class="bx--link bx--link--lg bx--link-with-icon"
-  id="link"
-  part="link"
->
-  <span>
-    <slot>
-    </slot>
-  </span>
-  <slot name="icon">
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<p
-  class="bx--link bx--link--disabled bx--link--lg bx--link-with-icon"
-  id="link"
-  part="link"
->
-  <span>
-    <slot>
-    </slot>
-  </span>
-  <slot name="icon">
-  </slot>
-</p>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-locale-item.md b/packages/web-components/tests/snapshots/dds-locale-item.md
deleted file mode 100644
index facad8ef7c9..00000000000
--- a/packages/web-components/tests/snapshots/dds-locale-item.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# `dds-locale-item`
-
-## `Misc attributes`
-
-####   `should render with various attributes`
-
-```
-<a
-  class="bx--link"
-  id="link"
-  part="link"
->
-  <div class="bx--locale-modal__locales__name">
-    country-foo
-  </div>
-  <div class="bx--locale-modal__locales__name">
-    language-foo
-  </div>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-locale-modal.md b/packages/web-components/tests/snapshots/dds-locale-modal.md
deleted file mode 100644
index 63f110b60de..00000000000
--- a/packages/web-components/tests/snapshots/dds-locale-modal.md
+++ /dev/null
@@ -1,168 +0,0 @@
-# `dds-locale-modal`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div id="dds--modal-header">
-      <dds-expressive-modal-header data-autoid="dds--expressive-modal-header">
-        <dds-expressive-modal-close-button data-autoid="dds--expressive-modal-close-button">
-        </dds-expressive-modal-close-button>
-        <dds-expressive-modal-heading
-          aria-level="2"
-          data-autoid="dds--expressive-modal-heading"
-          role="heading"
-        >
-        </dds-expressive-modal-heading>
-      </dds-expressive-modal-header>
-    </div>
-    <div class="bx--locale-modal bx--modal-content">
-      <slot name="regions-selector">
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
-####   `should render with various attributes`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div id="dds--modal-header">
-      <dds-expressive-modal-header data-autoid="dds--expressive-modal-header">
-        <dds-expressive-modal-close-button data-autoid="dds--expressive-modal-close-button">
-        </dds-expressive-modal-close-button>
-        <dds-expressive-modal-heading
-          aria-level="2"
-          data-autoid="dds--expressive-modal-heading"
-          role="heading"
-        >
-          <p class="bx--modal-header__label bx--type-delta">
-            lang-display-foo
-          </p>
-          <p class="bx--modal-header__heading bx--type-beta">
-            header-title-foo
-          </p>
-        </dds-expressive-modal-heading>
-      </dds-expressive-modal-header>
-    </div>
-    <div class="bx--locale-modal bx--modal-content">
-      <slot name="regions-selector">
-      </slot>
-    </div>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
-####   `should render locale selector`
-
-```
-<button
-  class="bx--visually-hidden"
-  id="start-sentinel"
->
-  START
-</button>
-<div
-  aria-labelledby="dds--modal-header"
-  class="bx--modal-container"
-  role="dialog"
-  tabindex="-1"
->
-  <div class="bx--modal-content">
-    <div id="dds--modal-header">
-      <dds-expressive-modal-header
-        data-autoid="dds--expressive-modal-header"
-        slot="header"
-      >
-        <dds-expressive-modal-close-button
-          data-autoid="dds--expressive-modal-close-button"
-          size=""
-        >
-        </dds-expressive-modal-close-button>
-        <dds-expressive-modal-heading
-          aria-level="2"
-          data-autoid="dds--expressive-modal-heading"
-          role="heading"
-        >
-          <dds-link-with-icon
-            data-autoid="dds--link-with-icon"
-            href="#"
-            icon-placement="left"
-          >
-            header-title-foo
-          </dds-link-with-icon>
-          <p
-            class="bx--modal-header__heading bx--type-beta"
-            tabindex="0"
-          >
-            region-foo
-          </p>
-        </dds-expressive-modal-heading>
-      </dds-expressive-modal-header>
-    </div>
-    <slot name="locales-selector">
-    </slot>
-    <div>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-<button
-  class="bx--visually-hidden"
-  id="end-sentinel"
->
-  END
-</button>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-locale-search.md b/packages/web-components/tests/snapshots/dds-locale-search.md
deleted file mode 100644
index 1759e997c3b..00000000000
--- a/packages/web-components/tests/snapshots/dds-locale-search.md
+++ /dev/null
@@ -1,76 +0,0 @@
-# `dds-locale-search`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--locale-modal__filter">
-  <div class="bx--locale-modal__search">
-    <dds-search
-      close-button-assistive-text=""
-      color-scheme=""
-      data-autoid="dds--locale-modal__filter"
-      label-text=""
-      part="searchbox"
-      placeholder=""
-      size="xl"
-    >
-    </dds-search>
-    <div
-      aria-live="polite"
-      class="bx--visually-hidden"
-    >
-      0 results
-    </div>
-    <p class="bx--locale-modal__search-text">
-      This page is available in the following locations and languages
-    </p>
-  </div>
-  <div
-    class="bx--locale-modal__list"
-    role="list"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--locale-modal__filter">
-  <div class="bx--locale-modal__search">
-    <dds-search
-      close-button-assistive-text="close-button-assistive-text-foo"
-      color-scheme=""
-      data-autoid="dds--locale-modal__filter"
-      label-text="label-text-foo"
-      part="searchbox"
-      placeholder="placeholder-foo"
-      size="xl"
-    >
-    </dds-search>
-    <div
-      aria-live="polite"
-      class="bx--visually-hidden"
-    >
-      0 results
-    </div>
-    <p class="bx--locale-modal__search-text">
-      availability-label-text-foo
-    </p>
-  </div>
-  <div
-    class="bx--locale-modal__list"
-    role="list"
-  >
-    <slot>
-    </slot>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-logo-grid.md b/packages/web-components/tests/snapshots/dds-logo-grid.md
deleted file mode 100644
index 80b0d1027ee..00000000000
--- a/packages/web-components/tests/snapshots/dds-logo-grid.md
+++ /dev/null
@@ -1,39 +0,0 @@
-# `dds-logo-grid`
-
-#### `renders dds-logo-grid properly`
-
-```
-<div class="bx--content-layout--logo-grid">
-  <slot name="heading">
-  </slot>
-  <div
-    class="bx--content-layout__body"
-    hidden=""
-  >
-    <slot name="copy">
-    </slot>
-    <div
-      class="bx--content-block__children bx--content-layout__body"
-      hidden=""
-    >
-      <div class="bx--logo-grid__row bx--logo-grid__undefined-columns">
-        <slot>
-        </slot>
-        <slot name="media">
-        </slot>
-      </div>
-    </div>
-    <div
-      class="bx--content-block__cta-row"
-      hidden=""
-    >
-      <div class="bx--content-block__cta bx-content-block__cta-col">
-        <slot name="footer">
-        </slot>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-masthead-composite.md b/packages/web-components/tests/snapshots/dds-masthead-composite.md
index 265e1c6fbed..53728954042 100644
--- a/packages/web-components/tests/snapshots/dds-masthead-composite.md
+++ b/packages/web-components/tests/snapshots/dds-masthead-composite.md
@@ -6,7 +6,15 @@
 
 ```
 <dds-masthead-global-bar data-autoid="dds--masthead-global-bar">
+  <dds-masthead-contact
+    data-autoid="dds--masthead-profile"
+    data-ibm-contact="contact-link"
+  >
+  </dds-masthead-contact>
   <dds-masthead-profile data-autoid="dds--masthead-profile">
+    <dds-masthead-profile-item href="https://myibm.ibm.com/?lnk=mmi">
+      My IBM
+    </dds-masthead-profile-item>
     <dds-masthead-profile-item href="https://idaas.iam.ibm.com/idaas/oidc/endpoint/default/authorize?response_type=token&amp;client_id=v18loginprod&amp;state=http%3A%2F%2Flocalhost%3A9876%2Fcontext.html&amp;redirect_uri=https%3A%2F%2Fmyibm.ibm.com%2FOIDCHandler.html&amp;scope=openid">
       Log in
     </dds-masthead-profile-item>
@@ -19,6 +27,11 @@
 
 ```
 <dds-masthead-global-bar data-autoid="dds--masthead-global-bar">
+  <dds-masthead-contact
+    data-autoid="dds--masthead-profile"
+    data-ibm-contact="contact-link"
+  >
+  </dds-masthead-contact>
   <dds-masthead-profile
     authenticated=""
     data-autoid="dds--masthead-profile"
diff --git a/packages/web-components/tests/snapshots/dds-masthead-logo.md b/packages/web-components/tests/snapshots/dds-masthead-logo.md
deleted file mode 100644
index b51b6a4f25d..00000000000
--- a/packages/web-components/tests/snapshots/dds-masthead-logo.md
+++ /dev/null
@@ -1,34 +0,0 @@
-# `dds-masthead-logo`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  aria-label="IBM logo"
-  href="https://www.ibm.com/"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  aria-label="IBM logo"
-  href="https://cloud.ibm.com/"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-masthead-profile.md b/packages/web-components/tests/snapshots/dds-masthead-profile.md
deleted file mode 100644
index 8b313fc8caf..00000000000
--- a/packages/web-components/tests/snapshots/dds-masthead-profile.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# `dds-masthead-profile`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  aria-expanded="false"
-  aria-label="User profile"
-  class="bx--header__menu-item bx--header__menu-title"
-  href="javascript:void 0"
-  role="button"
-  tabindex="0"
->
-</a>
-<ul class="bx--header__menu">
-  <slot>
-  </slot>
-</ul>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  aria-expanded="true"
-  aria-label="User profile"
-  class="bx--header__menu-item bx--header__menu-title"
-  href="javascript:void 0"
-  role="button"
-  tabindex="0"
->
-</a>
-<ul
-  aria-label="menu-label-foo"
-  class="bx--header__menu"
->
-  <slot>
-  </slot>
-</ul>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-pictogram-item.md b/packages/web-components/tests/snapshots/dds-pictogram-item.md
deleted file mode 100644
index 20a3d3d2e11..00000000000
--- a/packages/web-components/tests/snapshots/dds-pictogram-item.md
+++ /dev/null
@@ -1,36 +0,0 @@
-# `dds-pictogram-item`
-
-#### `Renders as expected`
-
-```
-<div class="bx--pictogram-item__row">
-  <div class="bx--pictogram-item__wrapper">
-    <slot
-      class="bx--pictogram-item__pictogram"
-      name="pictogram"
-    >
-    </slot>
-  </div>
-  <div class="bx--pictogram-item__content">
-    <div class="bx--content-item">
-      <slot name="heading">
-      </slot>
-      <div>
-        <slot name="media">
-        </slot>
-      </div>
-      <slot>
-      </slot>
-      <div
-        class="bx--content-item__cta"
-        hidden=""
-      >
-        <slot name="footer">
-        </slot>
-      </div>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-quote.md b/packages/web-components/tests/snapshots/dds-quote.md
deleted file mode 100644
index 972c7ebb05e..00000000000
--- a/packages/web-components/tests/snapshots/dds-quote.md
+++ /dev/null
@@ -1,45 +0,0 @@
-# `dds-quote`
-
-#### `renders dds-quote properly`
-
-```
-<div class="bx--quote__container">
-  <div class="bx--quote__wrapper">
-    <span class="bx--quote__mark">
-      “
-    </span>
-    <blockquote class="bx--quote__copy">
-      <slot>
-      </slot>
-      <span class="bx--quote__mark-closing">
-        ”
-      </span>
-    </blockquote>
-    <div
-      class="bx--quote__source"
-      hidden=""
-    >
-      <slot name="source-heading">
-      </slot>
-      <slot name="source-copy">
-      </slot>
-      <slot name="source-bottom-copy">
-      </slot>
-    </div>
-    <div
-      class="bx--quote__footer"
-      hidden=""
-    >
-      <dds-hr
-        data-autoid="dds--hr"
-        role="separator"
-      >
-      </dds-hr>
-      <slot name="footer">
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-region-item.md b/packages/web-components/tests/snapshots/dds-region-item.md
deleted file mode 100644
index 341cf2709e5..00000000000
--- a/packages/web-components/tests/snapshots/dds-region-item.md
+++ /dev/null
@@ -1,51 +0,0 @@
-# `dds-region-item`
-
-## `Misc attributes`
-
-####   `should render with various attributes`
-
-```
-<button
-  class="bx--link"
-  id="link"
-  type="button"
->
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <h3 class="bx--card__heading">
-        <slot>
-          name-foo
-        </slot>
-      </h3>
-      <div class="bx--card__footer">
-      </div>
-    </div>
-  </div>
-</button>
-
-```
-
-####   `should render with invalid state`
-
-```
-<button
-  class="bx--link bx--link--disabled"
-  disabled=""
-  id="link"
-  type="button"
->
-  <div class="bx--card__wrapper">
-    <div class="bx--card__content">
-      <h3 class="bx--card__heading">
-        <slot>
-          name-foo
-        </slot>
-      </h3>
-      <div class="bx--card__footer">
-      </div>
-    </div>
-  </div>
-</button>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-regions.md b/packages/web-components/tests/snapshots/dds-regions.md
deleted file mode 100644
index 506a68f6d49..00000000000
--- a/packages/web-components/tests/snapshots/dds-regions.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# `dds-regions`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--row">
-  <slot>
-  </slot>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-search-with-typeahead.md b/packages/web-components/tests/snapshots/dds-search-with-typeahead.md
deleted file mode 100644
index 21fef2f1eb4..00000000000
--- a/packages/web-components/tests/snapshots/dds-search-with-typeahead.md
+++ /dev/null
@@ -1,128 +0,0 @@
-# `dds-search-with-typeahead`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--header__search--actions">
-  <button
-    aria-label="Open IBM search field"
-    class="bx--header__action bx--header__search--search"
-    part="open-button"
-    type="button"
-  >
-  </button>
-  <button
-    aria-label="Clear input"
-    class="bx--header__action bx--header__search--close"
-    part="close-button"
-    type="button"
-  >
-  </button>
-</div>
-
-```
-
-####   `should render with various attributes in the inactive state`
-
-```
-<div class="bx--header__search--actions">
-  <button
-    aria-label="open-search-button-assistive-text-foo"
-    class="bx--header__action bx--header__search--search"
-    part="open-button"
-    type="button"
-  >
-  </button>
-  <button
-    aria-label="Clear input"
-    class="bx--header__action bx--header__search--close"
-    part="close-button"
-    type="button"
-  >
-  </button>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<form
-  action="https://www.ibm.com/search"
-  method="get"
-  role="search"
->
-  <input
-    name="lang"
-    type="hidden"
-    value="ko"
-  >
-  <input
-    name="cc"
-    type="hidden"
-    value="KR"
-  >
-  <input
-    name="lnk"
-    type="hidden"
-    value="mhsrch"
-  >
-  <div
-    aria-expanded="true"
-    aria-haspopup="listbox"
-    aria-label="IBM search field"
-    aria-owns="result-list"
-    class="react-autosuggest__container react-autosuggest__suggestions-container--open"
-    role="combobox"
-  >
-    <input
-      aria-autocomplete="list"
-      aria-controls="result-list"
-      aria-label="IBM search field"
-      autocomplete="off"
-      class="bx--header__search--input"
-      name="q"
-      part="search-input"
-      placeholder="Search all of IBM"
-      type="text"
-    >
-    <div
-      class="react-autosuggest__suggestions-container"
-      id="result-list"
-    >
-      <ul
-        class="dds-ce__search__list react-autosuggest__suggestions-list"
-        role="listbox"
-      >
-      </ul>
-    </div>
-  </div>
-</form>
-<div
-  aria-live="assertive"
-  aria-relevant="additions text"
-  class="bx--assistive-text"
-  role="status"
->
-</div>
-<div class="bx--header__search--actions">
-  <button
-    aria-label="perform-search-button-assistive-text-foo"
-    class="bx--header__action bx--header__search--search"
-    part="open-button"
-    type="button"
-  >
-  </button>
-  <button
-    aria-label="close-search-button-assistive-text-foo"
-    class="bx--header__action bx--header__search--close"
-    part="close-button"
-    type="button"
-  >
-  </button>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-table-of-contents.md b/packages/web-components/tests/snapshots/dds-table-of-contents.md
deleted file mode 100644
index 38652ea7897..00000000000
--- a/packages/web-components/tests/snapshots/dds-table-of-contents.md
+++ /dev/null
@@ -1,170 +0,0 @@
-# `dds-table-of-contents`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="dds-ce--table-of-contents__container">
-  <div
-    class="bx--tableofcontents__sidebar"
-    part="table"
-    style="transition: none 0s ease 0s; top: 0px;"
-  >
-    <div
-      class="bx--tableofcontents__desktop__children"
-      hidden=""
-    >
-      <slot name="heading">
-      </slot>
-      <slot name="menu-rule">
-      </slot>
-    </div>
-    <div class="bx--tableofcontents__mobile-top">
-    </div>
-    <div
-      class="dds-ce--table-of-contents__items-container"
-      style="position: sticky; top: 0"
-    >
-      <div class="bx--tableofcontents__desktop-container">
-        <div
-          class="bx--tableofcontents__desktop"
-          style="left: -0px"
-        >
-          <div class="bx--sub-content-left">
-          </div>
-          <ul>
-          </ul>
-          <div class="bx--sub-content-right">
-          </div>
-        </div>
-      </div>
-      <div class="bx--tableofcontents__mobile">
-        <div class="bx--tableofcontents__mobile__select__wrapper">
-          <select
-            aria-label="Table of contents"
-            class="bx--tableofcontents__mobile__select"
-          >
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="bx--tableofcontents__content">
-    <div class="bx--tableofcontents__content-wrapper">
-      <slot>
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render the heading and the rule for desktop`
-
-```
-<div class="dds-ce--table-of-contents__container">
-  <div
-    class="bx--tableofcontents__sidebar"
-    part="table"
-    style="transition: none 0s ease 0s; top: 0px;"
-  >
-    <div class="bx--tableofcontents__desktop__children">
-      <slot name="heading">
-      </slot>
-      <slot name="menu-rule">
-      </slot>
-    </div>
-    <div class="bx--tableofcontents__mobile-top">
-    </div>
-    <div
-      class="dds-ce--table-of-contents__items-container"
-      style="position: sticky; top: 0"
-    >
-      <div class="bx--tableofcontents__desktop-container">
-        <div
-          class="bx--tableofcontents__desktop"
-          style="left: -0px"
-        >
-          <div class="bx--sub-content-left">
-          </div>
-          <ul>
-          </ul>
-          <div class="bx--sub-content-right">
-          </div>
-        </div>
-      </div>
-      <div class="bx--tableofcontents__mobile">
-        <div class="bx--tableofcontents__mobile__select__wrapper">
-          <select
-            aria-label="Table of contents"
-            class="bx--tableofcontents__mobile__select"
-          >
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="bx--tableofcontents__content">
-    <div class="bx--tableofcontents__content-wrapper">
-      <slot>
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
-####   `should render the heading for mobile`
-
-```
-<div class="dds-ce--table-of-contents__container">
-  <div
-    class="bx--tableofcontents__sidebar"
-    part="table"
-    style="transition: none 0s ease 0s; top: 0px;"
-  >
-    <div class="bx--tableofcontents__mobile-top">
-    </div>
-    <div
-      class="dds-ce--table-of-contents__items-container"
-      style="position: sticky; top: 0"
-    >
-      <div class="bx--tableofcontents__desktop-container">
-        <div
-          class="bx--tableofcontents__desktop"
-          style="left: -0px"
-        >
-          <div class="bx--sub-content-left">
-          </div>
-          <ul>
-          </ul>
-          <div class="bx--sub-content-right">
-          </div>
-        </div>
-      </div>
-      <div class="bx--tableofcontents__mobile">
-        <div class="bx--tableofcontents__mobile__select__wrapper">
-          <select
-            aria-label="Table of contents"
-            class="bx--tableofcontents__mobile__select"
-          >
-          </select>
-        </div>
-      </div>
-    </div>
-  </div>
-  <div class="bx--tableofcontents__content">
-    <div class="bx--tableofcontents__content-wrapper">
-      <div class="bx--tableofcontents__children__mobile">
-        <slot name="heading">
-        </slot>
-      </div>
-      <slot>
-      </slot>
-    </div>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-tabs-extended-media.md b/packages/web-components/tests/snapshots/dds-tabs-extended-media.md
deleted file mode 100644
index 8fc37a7a3ad..00000000000
--- a/packages/web-components/tests/snapshots/dds-tabs-extended-media.md
+++ /dev/null
@@ -1,40 +0,0 @@
-# `dds-tabs-extended-media`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--tabs-extended-media">
-  <div class="bx--heading">
-    <slot name="heading">
-    </slot>
-  </div>
-  <div class="bx--tabs-extended">
-    <ul class="bx--accordion">
-      <slot>
-      </slot>
-    </ul>
-  </div>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--tabs-extended-media">
-  <div class="bx--heading">
-    <slot name="heading">
-    </slot>
-  </div>
-  <div class="bx--tabs-extended">
-    <ul class="bx--accordion">
-      <slot>
-      </slot>
-    </ul>
-  </div>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-tabs-extended.md b/packages/web-components/tests/snapshots/dds-tabs-extended.md
deleted file mode 100644
index 1fccf8d75ab..00000000000
--- a/packages/web-components/tests/snapshots/dds-tabs-extended.md
+++ /dev/null
@@ -1,28 +0,0 @@
-# `dds-tabs-extended`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<div class="bx--tabs-extended bx--tabs-extended--horizontal">
-  <ul class="bx--accordion">
-    <slot>
-    </slot>
-  </ul>
-</div>
-
-```
-
-####   `should render with various attributes`
-
-```
-<div class="bx--tabs-extended bx--tabs-extended--horizontal">
-  <ul class="bx--accordion">
-    <slot>
-    </slot>
-  </ul>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-tag-group.md b/packages/web-components/tests/snapshots/dds-tag-group.md
deleted file mode 100644
index e2ff5f8da5b..00000000000
--- a/packages/web-components/tests/snapshots/dds-tag-group.md
+++ /dev/null
@@ -1,20 +0,0 @@
-# `dds-tag-group`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<slot>
-</slot>
-
-```
-
-####   `should render with various attributes`
-
-```
-<slot>
-</slot>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-tag-link.md b/packages/web-components/tests/snapshots/dds-tag-link.md
deleted file mode 100644
index b18aa37a8d8..00000000000
--- a/packages/web-components/tests/snapshots/dds-tag-link.md
+++ /dev/null
@@ -1,33 +0,0 @@
-# `dds-tag-link`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  class="bx--link"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  class="bx--link"
-  href="https://example.com"
-  id="link"
-  part="link"
->
-  <slot>
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-text-cta.md b/packages/web-components/tests/snapshots/dds-text-cta.md
deleted file mode 100644
index 783c0ead23e..00000000000
--- a/packages/web-components/tests/snapshots/dds-text-cta.md
+++ /dev/null
@@ -1,48 +0,0 @@
-# `dds-text-cta`
-
-## `Misc attributes`
-
-####   `should render with minimum attributes`
-
-```
-<a
-  class="bx--link bx--link--lg bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right"
-  id="link"
-  part="link"
->
-  <span>
-    <slot>
-    </slot>
-  </span>
-  <slot name="icon">
-    <span class="bx--visually-hidden">
-    </span>
-  </slot>
-</a>
-
-```
-
-####   `should render with various attributes`
-
-```
-<a
-  class="bx--link bx--link--lg bx--link-with-icon bx--link-with-icon--inline-icon bx--link-with-icon__icon-right"
-  href="#"
-  id="link"
-  part="link"
-  target="_blank"
->
-  <span>
-    <slot>
-    </slot>
-    video-name-foo-caption
-  </span>
-  <slot name="icon">
-    <span class="bx--visually-hidden">
-      - This link plays a video
-    </span>
-  </slot>
-</a>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-video-cta-composite.md b/packages/web-components/tests/snapshots/dds-video-cta-composite.md
deleted file mode 100644
index 35653461376..00000000000
--- a/packages/web-components/tests/snapshots/dds-video-cta-composite.md
+++ /dev/null
@@ -1,14 +0,0 @@
-# `dds-video-cta-composite`
-
-## `Handling video type`
-
-####   `should render the media viewer`
-
-```
-<div style="display: contents;">
-  <dds-lightbox-video-player-composite video-cta-lightbox="true">
-  </dds-lightbox-video-player-composite>
-</div>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-video-player-composite.md b/packages/web-components/tests/snapshots/dds-video-player-composite.md
deleted file mode 100644
index 1529f1c4a1c..00000000000
--- a/packages/web-components/tests/snapshots/dds-video-player-composite.md
+++ /dev/null
@@ -1,22 +0,0 @@
-# `dds-video-player-composite`
-
-#### `should render the video player`
-
-```
-<dds-video-player-composite
-  playing-mode="inline"
-  video-id="video-id-foo"
->
-  <dds-video-player
-    data-autoid="dds--video-player"
-    duration="120"
-    name="video-name-foo"
-    playing-mode="inline"
-    thumbnail-url="https://cdnsecakmi.kaltura.com/p/1773841/thumbnail/entry_id/video-id-foo/width/3"
-    video-id="video-id-foo"
-  >
-  </dds-video-player>
-</dds-video-player-composite>
-
-```
-
diff --git a/packages/web-components/tests/snapshots/dds-video-player.md b/packages/web-components/tests/snapshots/dds-video-player.md
deleted file mode 100644
index 6c1a155c60f..00000000000
--- a/packages/web-components/tests/snapshots/dds-video-player.md
+++ /dev/null
@@ -1,35 +0,0 @@
-# `dds-video-player`
-
-#### `should render with minimum attributes`
-
-```
-<div class="bx--video-player__video-container">
-  <div class="bx--video-player__video">
-    <button class="bx--video-player__image-overlay">
-      <dds-image
-        alt=""
-        data-autoid="dds--image"
-        default-src="about:blank"
-      >
-      </dds-image>
-    </button>
-  </div>
-</div>
-<div class="bx--video-player__video-caption">
-</div>
-
-```
-
-#### `should render with various attributes`
-
-```
-<div class="bx--video-player__video-container">
-  <slot>
-  </slot>
-</div>
-<div class="bx--video-player__video-caption">
-  video-name-foo (0:30)
-</div>
-
-```
-
diff --git a/packages/web-components/tests/utils/achecker-compliance.js b/packages/web-components/tests/utils/achecker-compliance.js
index b0b0845e9cd..4211ffdd4c4 100644
--- a/packages/web-components/tests/utils/achecker-compliance.js
+++ b/packages/web-components/tests/utils/achecker-compliance.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/tests/utils/event-manager.ts b/packages/web-components/tests/utils/event-manager.ts
index 816b88633b5..d344a69e001 100644
--- a/packages/web-components/tests/utils/event-manager.ts
+++ b/packages/web-components/tests/utils/event-manager.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/tests/utils/global-ignore-achecker-issues.js b/packages/web-components/tests/utils/global-ignore-achecker-issues.js
index dee11699c9d..bafa3f9e559 100644
--- a/packages/web-components/tests/utils/global-ignore-achecker-issues.js
+++ b/packages/web-components/tests/utils/global-ignore-achecker-issues.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/tests/utils/snapshot.js b/packages/web-components/tests/utils/snapshot.js
index 7d2ce4eaee8..6fa03c194e1 100644
--- a/packages/web-components/tests/utils/snapshot.js
+++ b/packages/web-components/tests/utils/snapshot.js
@@ -38,9 +38,9 @@ beforeEach(function () {
          * @param {HTMLElement} actualElem The DOM element to match the snapshot with.
          * @param {object} [options={}] The options.
          * @param {string} [options.mode]
-         *   `shadow` to use the `actualaElem.shadowRoot.innerHTML`. Otherwise `actualElem.outerHTML` is used.
+         *   `shadow` to use the `actualElem.shadowRoot.innerHTML`. Otherwise `actualElem.outerHTML` is used.
          * @returns {boolean}
-         *   `true` if the given DOM element's content matches the snapshot or the snapshot does not exist. Otherwise throws.
+         *   `true` if the given DOM element's content matches the snapshot or the snapshot does not exist. Otherwise, throws.
          */
         compare(actualElem, options) {
           const { __snapshot__: snapshotState } = window;
diff --git a/packages/web-components/tools/babel-plugin-create-react-custom-element-type.js b/packages/web-components/tools/babel-plugin-create-react-custom-element-type.js
index 59c6ab70cb4..9d97b008dac 100644
--- a/packages/web-components/tools/babel-plugin-create-react-custom-element-type.js
+++ b/packages/web-components/tools/babel-plugin-create-react-custom-element-type.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -545,10 +545,9 @@ module.exports = function generateCreateReactCustomElementType(
             buildCreateReactCustomElementTypeImport(declaredProps),
             ...template.ast`
               import PropTypes from "prop-types";
-              import settings from "carbon-components/es/globals/js/settings.js";
-              import ddsSettings from "@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js";
+              import settings from "@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js";
               var prefix = settings.prefix;
-              var ddsPrefix = ddsSettings.stablePrefix;
+              var c4dPrefix = settings.stablePrefix;
               export var descriptor = ${descriptorsWithParent};
               export var propTypes = ${propTypesWithParent};
               const Component = createReactCustomElementType(${context.customElementName}, descriptor);
diff --git a/packages/web-components/tools/babel-plugin-resource-cjs-paths.js b/packages/web-components/tools/babel-plugin-resource-cjs-paths.js
index cf9ec67d516..e09dc04f7eb 100644
--- a/packages/web-components/tools/babel-plugin-resource-cjs-paths.js
+++ b/packages/web-components/tools/babel-plugin-resource-cjs-paths.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2019, 2022
+ * Copyright IBM Corp. 2019, 2023
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
diff --git a/packages/web-components/tools/css-result-loader.js b/packages/web-components/tools/css-result-loader.js
index 551fa97873a..b434fdff130 100644
--- a/packages/web-components/tools/css-result-loader.js
+++ b/packages/web-components/tools/css-result-loader.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * 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.
@@ -16,7 +16,7 @@
  */
 function cssResultLoader(fileContent) {
   return `
-    import { css } from 'lit-element';
+    import { css } from 'lit';
     export default css([${JSON.stringify(fileContent)}]);
   `;
 }
diff --git a/packages/web-components/tools/get-rollup-config.js b/packages/web-components/tools/get-rollup-config.js
index 687da1ebbd4..5d4db514708 100644
--- a/packages/web-components/tools/get-rollup-config.js
+++ b/packages/web-components/tools/get-rollup-config.js
@@ -70,15 +70,10 @@ function getRollupConfig({
     fixHostPseudo(),
     autoprefixer({
       overrideBrowsersList: [
-        'last 1 version',
+        '> 0.5%',
+        'last 2 versions',
         'Firefox ESR',
-        'not opera > 0',
-        'not op_mini > 0',
-        'not op_mob > 0',
-        'not android > 0',
-        'not edge > 0',
-        'not ie > 0',
-        'not ie_mob > 0',
+        'not dead',
       ],
     }),
   ];
@@ -158,7 +153,6 @@ function getRollupConfig({
           '@carbon/ibmdotcom-services',
           '@carbon/ibmdotcom-styles',
           '@carbon/web-components',
-          'carbon-components',
         ],
         extensions: ['.js', '.ts'],
       }),
@@ -170,9 +164,9 @@ function getRollupConfig({
       ibmdotcomIcon(),
       injectProcessEnv(
         {
-          DDS_CONTENT_BLOCK_HEADLINES: 'true',
-          DDS_CONTENT_BLOCK_CARD_STATIC: 'true',
-          DDS_CLOUD_MASTHEAD: 'true',
+          C4D_CONTENT_BLOCK_HEADLINES: 'true',
+          C4D_CONTENT_BLOCK_CARD_STATIC: 'true',
+          C4D_CLOUD_MASTHEAD: 'true',
         },
         {
           include: ['**/feature-flags.ts'],
@@ -197,7 +191,7 @@ function getRollupConfig({
             ? []
             : [
                 [
-                  'template-html-minifier',
+                  'template-html-minifier', // TODO: verify this is actually needed, doesn't seem to be doing anything
                   {
                     modules: {
                       'lit-html': ['html'],
diff --git a/packages/web-components/tools/rollup-plugin-ibmdotcom-icon.js b/packages/web-components/tools/rollup-plugin-ibmdotcom-icon.js
index 2205fd308da..24010290144 100644
--- a/packages/web-components/tools/rollup-plugin-ibmdotcom-icon.js
+++ b/packages/web-components/tools/rollup-plugin-ibmdotcom-icon.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -50,8 +50,11 @@ function rollupPluginIBMdotcomIcon({ include = /\.svg$/i, exclude } = {}) {
       }
 
       const code = [
-        `import { svg } from 'lit-html'`,
-        `import spread from '@carbon/web-components/es/globals/directives/spread'`,
+        `import { svg } from 'lit'`,
+        `import spread from '${path.resolve(
+          __dirname,
+          '../src/internal/vendor/@carbon/web-components/globals/directives/spread'
+        )}'`,
         `export default ${createSVGResultFromIconDescriptor(
           await descriptorFromSVG(contents)
         )}`,
diff --git a/packages/web-components/tools/rollup-plugin-license.js b/packages/web-components/tools/rollup-plugin-license.js
index 9601b5e2db7..44d242bbe87 100644
--- a/packages/web-components/tools/rollup-plugin-license.js
+++ b/packages/web-components/tools/rollup-plugin-license.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
diff --git a/packages/web-components/tools/rollup-plugin-lit-scss.js b/packages/web-components/tools/rollup-plugin-lit-scss.js
index eb9b7de59cf..8b42ab08bc5 100644
--- a/packages/web-components/tools/rollup-plugin-lit-scss.js
+++ b/packages/web-components/tools/rollup-plugin-lit-scss.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -11,7 +11,7 @@
 
 const path = require('path');
 const { promisify } = require('util');
-const sass = require('node-sass');
+const sass = require('sass');
 const { createFilter } = require('@rollup/pluginutils');
 
 const renderSass = promisify(sass.render);
@@ -22,7 +22,7 @@ const noop = (s) => s;
  * @returns {string} A `lit-html` template of the given CSS.
  */
 function transformToTemplate(css) {
-  return `import { css } from 'lit-element';export default css([${JSON.stringify(
+  return `import { css } from 'lit';export default css([${JSON.stringify(
     css
   )}])`;
 }
diff --git a/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js b/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js
index 37e4ea16374..0d788a25e0a 100644
--- a/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js
+++ b/packages/web-components/tools/svg-result-ibmdotcom-icon-loader.js
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020, 2022
+ * 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.
@@ -9,8 +9,9 @@
 
 'use strict';
 
-const svg2js = require('svgo/lib/svgo/svg2js');
 const createSVGResultFromIconDescriptor = require('./svg-result-from-icon-descriptor');
+const path = require('path');
+const svg2js = require('svgo/lib/svgo/svg2js');
 
 /**
  * @param {object} node The node in SVG2JS result.
@@ -70,8 +71,11 @@ function svgResultIBMDotcomIconLoader(content) {
         callback(
           null,
           `
-          import { svg } from 'lit-html';
-          import spread from '@carbon/web-components/es/globals/directives/spread.js';
+          import { svg } from 'lit';
+          import spread from '${path.resolve(
+            __dirname,
+            '../src/internal/vendor/@carbon/web-components/globals/directives/spread'
+          )}';
           const svgResultCarbonIcon = ${createSVGResultFromIconDescriptor(
             convertAttrs(svgNode)
           )};
diff --git a/packages/web-components/tsconfig.json b/packages/web-components/tsconfig.json
index 21666e914b4..e0ee391104e 100644
--- a/packages/web-components/tsconfig.json
+++ b/packages/web-components/tsconfig.json
@@ -4,7 +4,12 @@
     "module": "es2020",
     "moduleResolution": "node",
     "lib": ["es2017", "esnext.array", "dom", "dom.iterable"],
-    "typeRoots": ["src/typings", "tests/typings", "node_modules/@types", "../../node_modules/@types"],
+    "typeRoots": [
+      "src/typings",
+      "tests/typings",
+      "node_modules/@types",
+      "../../node_modules/@types"
+    ],
     "declaration": true,
     "rootDir": ".",
     "sourceMap": true,
@@ -21,6 +26,12 @@
     "allowSyntheticDefaultImports": true,
     "resolveJsonModule": true
   },
-  "include": ["src/**/*.ts", "src/**/*.tsx", "tests/**/*.ts", ".storybook/**/*.ts", ".storybook/**/*.tsx"],
+  "include": [
+    "src/**/*.ts",
+    "src/**/*.tsx",
+    "tests/**/*.ts",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx"
+  ],
   "exclude": []
 }
diff --git a/packages/web-components/update-scss-paths.sh b/packages/web-components/update-scss-paths.sh
new file mode 100755
index 00000000000..f579c995b22
--- /dev/null
+++ b/packages/web-components/update-scss-paths.sh
@@ -0,0 +1,42 @@
+#!/bin/bash
+
+declare -a component_names
+
+if ! command -v fswatch &>/dev/null; then
+  echo "fswatch required (https://github.com/emcrisostomo/fswatch)"
+  exit 1
+fi
+
+# Function to search and replace the string with proper escaping
+search_and_replace_string() {
+  directory="$1"
+  search_string="$2"
+  replace_string="$3"
+  
+  # search for scss files under directory
+  find "$directory" -type f -name "*.scss" ! -path "*/__stories__/*" | while read -r scss_file; do
+    # search and replace the string in the file
+    sed -i "" "s#$search_string#$replace_string#g" "$scss_file"
+		echo "Replaced imports in $scss_file"
+  done
+}
+
+# monitor for file changes under the `styles` directory
+fswatch -0 ../styles/ | while read -d "" changed_file
+do
+  component=$(basename "$(dirname "$changed_file")")
+	target_directory="src/components/$component"
+
+	if [[ ! " ${component_names[@]} " =~ " ${component} " ]]; then
+    component_names+=("$component")
+		search_and_replace_string "$target_directory" "@carbon/ibmdotcom-styles/scss/components" "../../../../styles/scss/components"
+	fi
+	
+done
+
+cleanup() {
+	echo "Reverting styles imports"
+	search_and_replace_string "src/components" "../../../../styles/scss/components" "@carbon/ibmdotcom-styles/scss/components"
+}
+
+trap cleanup EXIT
diff --git a/tasks/babel-plugin-module-js-paths.js b/tasks/babel-plugin-module-js-paths.js
index d8993ccd5fd..02cb9cee9b2 100644
--- a/tasks/babel-plugin-module-js-paths.js
+++ b/tasks/babel-plugin-module-js-paths.js
@@ -1,5 +1,5 @@
 /**
- * Copyright IBM Corp. 2020
+ * 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.
@@ -10,8 +10,6 @@
 const replaceTable = {
   '@carbon/icons/es': '@carbon/icons/lib',
   '@carbon/icons-react/es': '@carbon/icons-react/lib',
-  'carbon-components/es': 'carbon-components/umd',
-  'carbon-components-react/es': 'carbon-components-react/lib',
   '@carbon/ibmdotcom-services/es': '@carbon/ibmdotcom-services/lib',
   '@carbon/ibmdotcom-utilities/es': '@carbon/ibmdotcom-utilities/lib',
 };
diff --git a/thumbnails/card-section-images.svg b/thumbnails/card-section-images.svg
deleted file mode 100644
index da469199227..00000000000
--- a/thumbnails/card-section-images.svg
+++ /dev/null
@@ -1,38 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>card-section-images</title>
-    <g id="card-section-images" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="Group" transform="translate(72.000000, 24.000000)">
-            <rect id="Rectangle-Copy-14" stroke="#C6C6C6" fill="#FFFFFF" x="0" y="0" width="176" height="132"></rect>
-            <g id="Group-2" transform="translate(4.000000, 8.000000)" fill="#8D8D8D">
-                <rect id="Rectangle-Copy" x="0" y="0" width="28" height="4"></rect>
-                <rect id="Rectangle-Copy-2" x="0" y="6" width="28" height="4"></rect>
-            </g>
-            <g id="Group-4" transform="translate(45.000000, 8.000000)">
-                <rect id="Rectangle-Copy-21" fill="#C6C6C6" x="0" y="0" width="43" height="33"></rect>
-                <rect id="Rectangle-Copy-22" fill="#F4F4F4" x="0" y="33" width="43" height="22"></rect>
-                <rect id="Rectangle" stroke="#FFFFFF" x="0" y="0" width="43" height="55"></rect>
-            </g>
-            <g id="Group-4-Copy-3" transform="translate(45.000000, 63.000000)">
-                <rect id="Rectangle-Copy-21" fill="#C6C6C6" x="0" y="0" width="43" height="33"></rect>
-                <rect id="Rectangle-Copy-22" fill="#F4F4F4" x="0" y="33" width="43" height="22"></rect>
-                <rect id="Rectangle" stroke="#FFFFFF" x="0" y="0" width="43" height="55"></rect>
-            </g>
-            <g id="Group-4-Copy" transform="translate(88.000000, 8.000000)">
-                <rect id="Rectangle-Copy-21" fill="#C6C6C6" x="0" y="0" width="43" height="33"></rect>
-                <rect id="Rectangle-Copy-22" fill="#F4F4F4" x="0" y="33" width="43" height="22"></rect>
-                <rect id="Rectangle" stroke="#FFFFFF" x="0" y="0" width="43" height="55"></rect>
-            </g>
-            <g id="Group-4-Copy-4" transform="translate(88.000000, 63.000000)">
-                <rect id="Rectangle-Copy-21" fill="#C6C6C6" x="0" y="0" width="43" height="33"></rect>
-                <rect id="Rectangle-Copy-22" fill="#F4F4F4" x="0" y="33" width="43" height="22"></rect>
-                <rect id="Rectangle" stroke="#FFFFFF" x="0" y="0" width="43" height="55"></rect>
-            </g>
-            <g id="Group-4-Copy-2" transform="translate(131.000000, 8.000000)">
-                <rect id="Rectangle-Copy-21" fill="#C6C6C6" x="0" y="0" width="43" height="33"></rect>
-                <rect id="Rectangle-Copy-22" fill="#F4F4F4" x="0" y="33" width="43" height="22"></rect>
-                <rect id="Rectangle" stroke="#FFFFFF" x="0" y="0" width="43" height="55"></rect>
-            </g>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/thumbnails/content-group-banner.svg b/thumbnails/content-group-banner.svg
deleted file mode 100644
index 3c5fe4212cb..00000000000
--- a/thumbnails/content-group-banner.svg
+++ /dev/null
@@ -1,13 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>content-group-banner</title>
-    <g id="content-group-banner" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(64.000000, 75.000000)">
-            <rect id="Rectangle-Copy-66" fill="#A8A8A8" fill-rule="nonzero" x="0" y="16.5" width="86" height="7"></rect>
-            <rect id="Rectangle-Copy-68" fill="#A8A8A8" fill-rule="nonzero" x="0" y="7.5" width="111" height="7"></rect>
-            <rect id="Rectangle-Copy-69" fill="#78A9FF" fill-rule="nonzero" x="141" y="7.5" width="47.1774194" height="4"></rect>
-            <rect id="Rectangle-Copy-70" fill="#78A9FF" fill-rule="nonzero" x="141" y="14.5" width="51" height="4"></rect>
-            <line x1="126.5" y1="0" x2="126.5" y2="29" id="Line-3" stroke="#8D8D8D" stroke-linecap="square"></line>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/thumbnails/content-item-horizontal.svg b/thumbnails/content-item-row.svg
similarity index 100%
rename from thumbnails/content-item-horizontal.svg
rename to thumbnails/content-item-row.svg
diff --git a/thumbnails/image-with-caption.svg b/thumbnails/image-with-caption.svg
deleted file mode 100644
index f456abbd62f..00000000000
--- a/thumbnails/image-with-caption.svg
+++ /dev/null
@@ -1,27 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>image-with-caption</title>
-    <defs>
-        <path d="M6.06233742,4.14791508 L4.78605586,4.14791508 L4.78605586,2.87163352 L4.14791508,2.87163352 L4.14791508,4.14791508 L2.87163352,4.14791508 L2.87163352,4.78605586 L4.14791508,4.78605586 L4.14791508,6.06233742 L4.78605586,6.06233742 L4.78605586,4.78605586 L6.06233742,4.78605586 L6.06233742,4.14791508 L6.06233742,4.14791508 Z M7.16313027,6.7004782 C8.35943032,5.25705493 8.21015434,3.12829277 6.82411697,1.86595171 C5.4380796,0.603610647 3.30467102,0.653405457 1.97903824,1.97903824 C0.653405457,3.30467102 0.603610647,5.4380796 1.86595171,6.82411697 C3.12829277,8.21015434 5.25705493,8.35943032 6.7004782,7.16313027 L9.12222247,9.57211172 L9.57211172,9.12222247 L7.16313027,6.7004782 Z M4.46698547,7.33861898 C2.88102607,7.33861898 1.59535195,6.05294487 1.59535195,4.46698547 C1.59535195,2.88102607 2.88102607,1.59535195 4.46698547,1.59535195 C6.05294487,1.59535195 7.33861898,2.88102607 7.33861898,4.46698547 C7.33861898,5.22859003 7.03607275,5.95900125 6.497537,6.497537 C5.95900125,7.03607275 5.22859003,7.33861898 4.46698547,7.33861898 Z" id="path-1"></path>
-        <path d="M17.8125,13.125 C16.2591991,13.125 15,11.8658009 15,10.3125 C15,8.75919914 16.2591991,7.5 17.8125,7.5 C19.3658009,7.5 20.625,8.75919914 20.625,10.3125 C20.625,11.0584214 20.3286839,11.7737918 19.8012378,12.3012378 C19.2737918,12.8286839 18.5584214,13.125 17.8125,13.125 L17.8125,13.125 Z M17.8125,9.375 C17.294733,9.375 16.875,9.79473305 16.875,10.3125 C16.875,10.830267 17.294733,11.25 17.8125,11.25 C18.330267,11.25 18.75,10.830267 18.75,10.3125 C18.75,9.79473305 18.330267,9.375 17.8125,9.375 Z M24.515625,3.75 L5.484375,3.75 C4.52650614,3.75 3.75,4.52650614 3.75,5.484375 L3.75,24.515625 C3.75,24.9756098 3.93272827,25.4167549 4.25798668,25.7420133 C4.58324508,26.0672717 5.02439015,26.25 5.484375,26.25 L24.515625,26.25 C24.9756098,26.25 25.4167549,26.0672717 25.7420133,25.7420133 C26.0672717,25.4167549 26.25,24.9756098 26.25,24.515625 L26.25,5.484375 C26.25,4.52650614 25.4734939,3.75 24.515625,3.75 Z M24.375,5.625 L24.375,19.996875 L20.86875,16.490625 C20.5170595,16.138543 20.0398298,15.9407125 19.5421875,15.9407125 C19.0445452,15.9407125 18.5673155,16.138543 18.215625,16.490625 L16.875,17.859375 L11.71875,12.740625 C11.3670595,12.388543 10.8898298,12.1907125 10.3921875,12.1907125 C9.89454516,12.1907125 9.41731548,12.388543 9.065625,12.740625 L5.625,16.18125 L5.625,5.625 L24.375,5.625 Z M5.625,24.375 L5.625,18.825 L10.3875,14.0625 L10.3875,14.0625 L15.515625,19.190625 C15.8673155,19.542707 16.3445452,19.7405375 16.8421875,19.7405375 C17.3398298,19.7405375 17.8170595,19.542707 18.16875,19.190625 L19.5375,17.8125 L19.5375,17.8125 L24.375,22.65 L24.375,24.375 L5.625,24.375 Z" id="path-3"></path>
-    </defs>
-    <g id="image-with-caption" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle-Copy" fill="#C6C6C6" x="60" y="37" width="200" height="100"></rect>
-        <rect id="Rectangle-Copy-29" fill="#C6C6C6" transform="translate(79.500000, 142.000000) scale(1, -1) translate(-79.500000, -142.000000) " x="60" y="140" width="39" height="4"></rect>
-        <g id="Group-Copy" transform="translate(239.000000, 116.000000)">
-            <rect id="Rectangle-Copy-38" fill="#262626" x="0" y="0" width="20.420505" height="20.420505"></rect>
-            <g id="icon/navigation/zoom-in/16" transform="translate(5.105126, 5.105126)">
-                <mask id="mask-2" fill="white">
-                    <use xlink:href="#path-1"></use>
-                </mask>
-                <use id="icon-color" fill="#FFFFFF" xlink:href="#path-1"></use>
-            </g>
-        </g>
-        <g id="icon/formatting/image/16-copy-2" transform="translate(145.000000, 72.000000)">
-            <mask id="mask-4" fill="white">
-                <use xlink:href="#path-3"></use>
-            </mask>
-            <use id="icon-color" fill="#8E8E93" xlink:href="#path-3"></use>
-        </g>
-    </g>
-</svg>
\ No newline at end of file
diff --git a/thumbnails/in-page-banner.svg b/thumbnails/in-page-banner.svg
new file mode 100644
index 00000000000..591df4d2b3b
--- /dev/null
+++ b/thumbnails/in-page-banner.svg
@@ -0,0 +1,13 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>in-page-banner</title>
+    <g id="in-page-banner" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g transform="translate(64.000000, 75.000000)">
+            <rect id="Rectangle-Copy-66" fill="#A8A8A8" fill-rule="nonzero" x="0" y="16.5" width="86" height="7"></rect>
+            <rect id="Rectangle-Copy-68" fill="#A8A8A8" fill-rule="nonzero" x="0" y="7.5" width="111" height="7"></rect>
+            <rect id="Rectangle-Copy-69" fill="#78A9FF" fill-rule="nonzero" x="141" y="7.5" width="47.1774194" height="4"></rect>
+            <rect id="Rectangle-Copy-70" fill="#78A9FF" fill-rule="nonzero" x="141" y="14.5" width="51" height="4"></rect>
+            <line x1="126.5" y1="0" x2="126.5" y2="29" id="Line-3" stroke="#8D8D8D" stroke-linecap="square"></line>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/yarn.lock b/yarn.lock
index 27540cc9652..f5c6f8cfeee 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6,12 +6,12 @@ __metadata:
   cacheKey: 10
 
 "@actions/core@npm:^1.2.0, @actions/core@npm:^1.2.6":
-  version: 1.10.1
-  resolution: "@actions/core@npm:1.10.1"
+  version: 1.10.0
+  resolution: "@actions/core@npm:1.10.0"
   dependencies:
     "@actions/http-client": "npm:^2.0.1"
     uuid: "npm:^8.3.2"
-  checksum: d32af783ecb07f25a0f190112ee8e749a4c4cb88327d6df756ea1dcee146ab413c0e651a9c949294f8202ced1436c049d7b469485431a5cc4491d66926ec8323
+  checksum: 40f94a994da7b041ed35119abef9bbd19f56a75fdca08b0b7fd4af3da2c69873de5a751cf956cf1437515f4e9cf7ee94204a0c885788f6d0986841ee972ecb29
   languageName: node
   linkType: hard
 
@@ -34,12 +34,11 @@ __metadata:
   linkType: hard
 
 "@actions/http-client@npm:^2.0.1":
-  version: 2.2.0
-  resolution: "@actions/http-client@npm:2.2.0"
+  version: 2.1.1
+  resolution: "@actions/http-client@npm:2.1.1"
   dependencies:
     tunnel: "npm:^0.0.6"
-    undici: "npm:^5.25.4"
-  checksum: af2051e056b369d78073f3eddd04d838c27495ef7e8bc27b69a8409d7f8652c19b5b6c781a1560675094142bd2548cfa06b6e9a2454c70116007bd4f37cf0cd7
+  checksum: 9bfc6b96c9426c8f633f227d2d781b5419a89a5bad502ed882691de29f7b9af01be4591caa6c89444b6bfc9ba1555bf7e77a121127a976de27fa5296d399eb3a
   languageName: node
   linkType: hard
 
@@ -112,6 +111,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/code-frame@npm:^7.22.10, @babel/code-frame@npm:^7.22.5":
+  version: 7.22.10
+  resolution: "@babel/code-frame@npm:7.22.10"
+  dependencies:
+    "@babel/highlight": "npm:^7.22.10"
+    chalk: "npm:^2.4.2"
+  checksum: 53620d831c8f2230a7d2fbe833c01c071740a642317c960d45cda9b0b2d0492e152e00ab45aad8b55329ba5de647354b95f42b546fb905c0b7acf78d3f2d3ecd
+  languageName: node
+  linkType: hard
+
 "@babel/compat-data@npm:^7.17.7, @babel/compat-data@npm:^7.20.5, @babel/compat-data@npm:^7.22.6, @babel/compat-data@npm:^7.22.9, @babel/compat-data@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/compat-data@npm:7.23.3"
@@ -119,6 +128,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/compat-data@npm:^7.23.2":
+  version: 7.23.2
+  resolution: "@babel/compat-data@npm:7.23.2"
+  checksum: c18eccd13975c1434a65d04f721075e30d03ba1608f4872d84e8538c16552b878aaac804ff31243d8c2c0e91524f3bc98de6305e117ba1a55c9956871973b4dc
+  languageName: node
+  linkType: hard
+
 "@babel/core@npm:7.12.9":
   version: 7.12.9
   resolution: "@babel/core@npm:7.12.9"
@@ -144,25 +160,25 @@ __metadata:
   linkType: hard
 
 "@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.17.9, @babel/core@npm:^7.7.5":
-  version: 7.23.3
-  resolution: "@babel/core@npm:7.23.3"
+  version: 7.22.10
+  resolution: "@babel/core@npm:7.22.10"
   dependencies:
     "@ampproject/remapping": "npm:^2.2.0"
-    "@babel/code-frame": "npm:^7.22.13"
-    "@babel/generator": "npm:^7.23.3"
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
-    "@babel/helper-module-transforms": "npm:^7.23.3"
-    "@babel/helpers": "npm:^7.23.2"
-    "@babel/parser": "npm:^7.23.3"
-    "@babel/template": "npm:^7.22.15"
-    "@babel/traverse": "npm:^7.23.3"
-    "@babel/types": "npm:^7.23.3"
-    convert-source-map: "npm:^2.0.0"
+    "@babel/code-frame": "npm:^7.22.10"
+    "@babel/generator": "npm:^7.22.10"
+    "@babel/helper-compilation-targets": "npm:^7.22.10"
+    "@babel/helper-module-transforms": "npm:^7.22.9"
+    "@babel/helpers": "npm:^7.22.10"
+    "@babel/parser": "npm:^7.22.10"
+    "@babel/template": "npm:^7.22.5"
+    "@babel/traverse": "npm:^7.22.10"
+    "@babel/types": "npm:^7.22.10"
+    convert-source-map: "npm:^1.7.0"
     debug: "npm:^4.1.0"
     gensync: "npm:^1.0.0-beta.2"
-    json5: "npm:^2.2.3"
+    json5: "npm:^2.2.2"
     semver: "npm:^6.3.1"
-  checksum: f9e7016b62842d23f78c98dc31daa3bd9161c5770c1e9df0557f78186ed75fd2cfc8e7161975fe8c6ad147665b1881790139da91de34ec03cf8b9f6a256d86eb
+  checksum: 3d8be31a9c1174941b1a56e754c20943bf4d0af4b6fd44d02bfd219d9c5ce268fa3fdc9a91b7df7a7f0668fa7ac32e6d37861d7bb43fec30ad9152dcedcc7013
   languageName: node
   linkType: hard
 
@@ -201,6 +217,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/generator@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/generator@npm:7.22.10"
+  dependencies:
+    "@babel/types": "npm:^7.22.10"
+    "@jridgewell/gen-mapping": "npm:^0.3.2"
+    "@jridgewell/trace-mapping": "npm:^0.3.17"
+    jsesc: "npm:^2.5.1"
+  checksum: b0df0265694a4baa8e824f1c065769ebd83678a78b5ef16bc75b8471e27d17f7a68d3658d8ce401d3fbbe8bc2e4e9f1d9506c89931d3fc125ff32dfdea1c0f7e
+  languageName: node
+  linkType: hard
+
+"@babel/generator@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/generator@npm:7.23.0"
+  dependencies:
+    "@babel/types": "npm:^7.23.0"
+    "@jridgewell/gen-mapping": "npm:^0.3.2"
+    "@jridgewell/trace-mapping": "npm:^0.3.17"
+    jsesc: "npm:^2.5.1"
+  checksum: bd1598bd356756065d90ce26968dd464ac2b915c67623f6f071fb487da5f9eb454031a380e20e7c9a7ce5c4a49d23be6cb9efde404952b0b3f3c0c3a9b73d68a
+  languageName: node
+  linkType: hard
+
 "@babel/helper-annotate-as-pure@npm:^7.18.6, @babel/helper-annotate-as-pure@npm:^7.22.5, @babel/helper-annotate-as-pure@npm:^7.9.0":
   version: 7.22.5
   resolution: "@babel/helper-annotate-as-pure@npm:7.22.5"
@@ -219,6 +259,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-builder-binary-assignment-operator-visitor@npm:^7.22.5":
+  version: 7.22.10
+  resolution: "@babel/helper-builder-binary-assignment-operator-visitor@npm:7.22.10"
+  dependencies:
+    "@babel/types": "npm:^7.22.10"
+  checksum: 6de4a1f30e6244f9a1efdfcbe89df39923df3d165be606da5ad11319f8a11c12c72c60d9dc5fb696363281e2d6f741444c1af51f525fc7cf1d2a90fe23370bd9
+  languageName: node
+  linkType: hard
+
 "@babel/helper-compilation-targets@npm:^7.13.0, @babel/helper-compilation-targets@npm:^7.17.7, @babel/helper-compilation-targets@npm:^7.20.7, @babel/helper-compilation-targets@npm:^7.22.15, @babel/helper-compilation-targets@npm:^7.22.6":
   version: 7.22.15
   resolution: "@babel/helper-compilation-targets@npm:7.22.15"
@@ -232,6 +281,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-compilation-targets@npm:^7.22.10, @babel/helper-compilation-targets@npm:^7.22.5":
+  version: 7.22.10
+  resolution: "@babel/helper-compilation-targets@npm:7.22.10"
+  dependencies:
+    "@babel/compat-data": "npm:^7.22.9"
+    "@babel/helper-validator-option": "npm:^7.22.5"
+    browserslist: "npm:^4.21.9"
+    lru-cache: "npm:^5.1.1"
+    semver: "npm:^6.3.1"
+  checksum: 974085237b34b3d5e7eb0ec62454e1855fce3e5285cdd9461f01e0058ffaefab2491305be2b218f6e9a0f3f1e7f3edcb2067932a9f5545c39c6a9079328e5931
+  languageName: node
+  linkType: hard
+
 "@babel/helper-create-class-features-plugin@npm:^7.12.13, @babel/helper-create-class-features-plugin@npm:^7.12.17, @babel/helper-create-class-features-plugin@npm:^7.18.6, @babel/helper-create-class-features-plugin@npm:^7.21.0, @babel/helper-create-class-features-plugin@npm:^7.22.11, @babel/helper-create-class-features-plugin@npm:^7.22.15, @babel/helper-create-class-features-plugin@npm:^7.22.5":
   version: 7.22.15
   resolution: "@babel/helper-create-class-features-plugin@npm:7.22.15"
@@ -251,7 +313,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.15, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
+"@babel/helper-create-class-features-plugin@npm:^7.22.10, @babel/helper-create-class-features-plugin@npm:^7.22.6":
+  version: 7.22.10
+  resolution: "@babel/helper-create-class-features-plugin@npm:7.22.10"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.5"
+    "@babel/helper-function-name": "npm:^7.22.5"
+    "@babel/helper-member-expression-to-functions": "npm:^7.22.5"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.22.9"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 79e2b199fea23b656cc4b2d018c398b88630e7cb39372f68f4a63055e14a51dd7b05656ac1f02d732815321c9cebfbe7857d7e03da2fb37fee6024769a96caf8
+  languageName: node
+  linkType: hard
+
+"@babel/helper-create-regexp-features-plugin@npm:^7.18.6, @babel/helper-create-regexp-features-plugin@npm:^7.22.5":
+  version: 7.22.9
+  resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.9"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    regexpu-core: "npm:^5.3.1"
+    semver: "npm:^6.3.1"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 6f3475a7661bc34527201c07eeeec3077c8adab0ed74bff728dc479da6c74bb393b6121ddf590ef1671f3f508fab3c7792a5ada65672665d84db4556daebd210
+  languageName: node
+  linkType: hard
+
+"@babel/helper-create-regexp-features-plugin@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-create-regexp-features-plugin@npm:7.22.15"
   dependencies:
@@ -313,13 +407,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-environment-visitor@npm:^7.22.20, @babel/helper-environment-visitor@npm:^7.22.5":
+"@babel/helper-environment-visitor@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-environment-visitor@npm:7.22.20"
   checksum: d80ee98ff66f41e233f36ca1921774c37e88a803b2f7dca3db7c057a5fea0473804db9fb6729e5dbfd07f4bed722d60f7852035c2c739382e84c335661590b69
   languageName: node
   linkType: hard
 
+"@babel/helper-environment-visitor@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-environment-visitor@npm:7.22.5"
+  checksum: 248532077d732a34cd0844eb7b078ff917c3a8ec81a7f133593f71a860a582f05b60f818dc5049c2212e5baa12289c27889a4b81d56ef409b4863db49646c4b1
+  languageName: node
+  linkType: hard
+
 "@babel/helper-function-name@npm:^7.22.5, @babel/helper-function-name@npm:^7.23.0":
   version: 7.23.0
   resolution: "@babel/helper-function-name@npm:7.23.0"
@@ -348,7 +449,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.15":
+"@babel/helper-member-expression-to-functions@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-member-expression-to-functions@npm:7.22.5"
+  dependencies:
+    "@babel/types": "npm:^7.22.5"
+  checksum: bb51f195c17d8d98ca5fda630fed436643d27f094f3c936f670b43cb05865f192900f455ffb730c8d4310702b2211996a90354fd55ae8659b096bc6c75d36ec5
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.0.0, @babel/helper-module-imports@npm:^7.10.4, @babel/helper-module-imports@npm:^7.12.13, @babel/helper-module-imports@npm:^7.16.7, @babel/helper-module-imports@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-module-imports@npm:7.22.5"
+  dependencies:
+    "@babel/types": "npm:^7.22.5"
+  checksum: d8296447c0cdc3c02417ba32864da3374e53bd2763a6c404aae118987c222c47238d9d1f4fd2a88250a85e0a68eff38d878c491b00c56d9bd20e809f91eb41b4
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-imports@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-module-imports@npm:7.22.15"
   dependencies:
@@ -372,6 +491,36 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-module-transforms@npm:^7.22.5, @babel/helper-module-transforms@npm:^7.22.9":
+  version: 7.22.9
+  resolution: "@babel/helper-module-transforms@npm:7.22.9"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.5"
+    "@babel/helper-module-imports": "npm:^7.22.5"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/helper-validator-identifier": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 80244f45e3f665305f8cf9412ee2efe44d1d30c201f869ceb0e87f9cddbbff06ebfed1dbe122a40875404867b747e7df73c0825c93765c108bcf2e86d2ef8b9b
+  languageName: node
+  linkType: hard
+
+"@babel/helper-module-transforms@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/helper-module-transforms@npm:7.23.0"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-module-imports": "npm:^7.22.15"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: d72fe444f7b6c5aadaac8f393298d603eedd48e5dead67273a48e5c83a677cbccbd8a12a06c5bf5d97924666083279158a4bd0e799d28b86cbbfacba9e41f598
+  languageName: node
+  linkType: hard
+
 "@babel/helper-optimise-call-expression@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-optimise-call-expression@npm:7.22.5"
@@ -408,7 +557,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helper-replace-supers@npm:^7.22.20, @babel/helper-replace-supers@npm:^7.22.9":
+"@babel/helper-remap-async-to-generator@npm:^7.22.5":
+  version: 7.22.9
+  resolution: "@babel/helper-remap-async-to-generator@npm:7.22.9"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-environment-visitor": "npm:^7.22.5"
+    "@babel/helper-wrap-function": "npm:^7.22.9"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 05538079447829b13512157491cc77f9cf1ea7e1680e15cff0682c3ed9ee162de0c4862ece20a6d6b2df28177a1520bcfe45993fbeccf2747a81795a7c3f6290
+  languageName: node
+  linkType: hard
+
+"@babel/helper-replace-supers@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-replace-supers@npm:7.22.20"
   dependencies:
@@ -421,6 +583,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-replace-supers@npm:^7.22.5, @babel/helper-replace-supers@npm:^7.22.9":
+  version: 7.22.9
+  resolution: "@babel/helper-replace-supers@npm:7.22.9"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.5"
+    "@babel/helper-member-expression-to-functions": "npm:^7.22.5"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: b5a740a95f12250b67afe30574ad60fa44175db92441658c6c3e8f473fcb8f8eaffd24fdad436cdfa1beee21b470d1190d64a0bb97b444525ca952e6cc081dc9
+  languageName: node
+  linkType: hard
+
 "@babel/helper-simple-access@npm:^7.12.13, @babel/helper-simple-access@npm:^7.22.5":
   version: 7.22.5
   resolution: "@babel/helper-simple-access@npm:7.22.5"
@@ -462,6 +637,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-identifier@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-validator-identifier@npm:7.22.5"
+  checksum: 12cb7d4535b3f8d109a446f7bef08d20eebe94fd97b534cd415c936ab342e9634edc5c99961af976bd78bcae6e6ec4b2ab8483d0da2ac5926fbe9f7dd9ab28ab
+  languageName: node
+  linkType: hard
+
 "@babel/helper-validator-option@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/helper-validator-option@npm:7.22.15"
@@ -469,6 +651,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/helper-validator-option@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/helper-validator-option@npm:7.22.5"
+  checksum: bbeca8a85ee86990215c0424997438b388b8d642d69b9f86c375a174d3cdeb270efafd1ff128bc7a1d370923d13b6e45829ba8581c027620e83e3a80c5c414b3
+  languageName: node
+  linkType: hard
+
 "@babel/helper-wrap-function@npm:^7.22.20":
   version: 7.22.20
   resolution: "@babel/helper-wrap-function@npm:7.22.20"
@@ -480,14 +669,36 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/helpers@npm:^7.12.17, @babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.23.2":
-  version: 7.23.2
-  resolution: "@babel/helpers@npm:7.23.2"
+"@babel/helper-wrap-function@npm:^7.22.9":
+  version: 7.22.10
+  resolution: "@babel/helper-wrap-function@npm:7.22.10"
   dependencies:
-    "@babel/template": "npm:^7.22.15"
-    "@babel/traverse": "npm:^7.23.2"
-    "@babel/types": "npm:^7.23.0"
-  checksum: d66d949d41513f19e62e43a9426e283d46bc9a3c72f1e3dd136568542382edd411047403458aaa0ae3adf7c14d23e0e9a1126092bb56e72ba796a6dd7e4c082a
+    "@babel/helper-function-name": "npm:^7.22.5"
+    "@babel/template": "npm:^7.22.5"
+    "@babel/types": "npm:^7.22.10"
+  checksum: b59629a983b957b0fa9a8255cb48efea9777d6ef4c8053613c85d5743abc42a3a5c0a00eb24ac29ecd00d5bb81ed066bedd0579b39db4331cdcf821ae2ded5ca
+  languageName: node
+  linkType: hard
+
+"@babel/helpers@npm:^7.12.17, @babel/helpers@npm:^7.12.5, @babel/helpers@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/helpers@npm:7.22.10"
+  dependencies:
+    "@babel/template": "npm:^7.22.5"
+    "@babel/traverse": "npm:^7.22.10"
+    "@babel/types": "npm:^7.22.10"
+  checksum: a5e0371ee5b269936a70fb96945bf21a7032005ceb8074c9869acfaed4ba6c6759e20d211634fa8d2eb46508ab5a85b3a186b483c963de47ea80fb5e2533714e
+  languageName: node
+  linkType: hard
+
+"@babel/highlight@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/highlight@npm:7.22.10"
+  dependencies:
+    "@babel/helper-validator-identifier": "npm:^7.22.5"
+    chalk: "npm:^2.4.2"
+    js-tokens: "npm:^4.0.0"
+  checksum: faea6aa09ea7bc02d4d51aabdd1303b00aa2587933a08310d7502f29140bc8bcb32a74387d81dc08e97edd04f891e266623b90043ea4502e052dcbfd7e423a3c
   languageName: node
   linkType: hard
 
@@ -502,7 +713,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/parser@npm:^7.0.0, @babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.13, @babel/parser@npm:^7.12.17, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.3, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.9.4":
+"@babel/parser@npm:^7.1.0, @babel/parser@npm:^7.12.11, @babel/parser@npm:^7.12.13, @babel/parser@npm:^7.12.17, @babel/parser@npm:^7.12.7, @babel/parser@npm:^7.14.7, @babel/parser@npm:^7.20.7, @babel/parser@npm:^7.22.10, @babel/parser@npm:^7.22.5, @babel/parser@npm:^7.4.3, @babel/parser@npm:^7.7.0, @babel/parser@npm:^7.9.4":
+  version: 7.22.10
+  resolution: "@babel/parser@npm:7.22.10"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: a11e93c9b371bdd9c44bc96fd37e63eca8450fd11c19f9a8b1d7e2582835a3db970d8202a21736d04c653c8d1facde7b66c15c15bbf095047b7ca98e057a5eb9
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.22.15, @babel/parser@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/parser@npm:7.23.0"
+  bin:
+    parser: ./bin/babel-parser.js
+  checksum: 201641e068f8cca1ff12b141fcba32d7ccbabc586961bd1b85ae89d9695867f84d57fc2e1176dc4981fd28e5e97ca0e7c32cd688bd5eabb641a302abc0cb5040
+  languageName: node
+  linkType: hard
+
+"@babel/parser@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/parser@npm:7.23.3"
   bin:
@@ -511,6 +740,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.22.15"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: 8910ca21a7ec7c06f7b247d4b86c97c5aa15ef321518f44f6f490c5912fdf82c605aaa02b90892e375d82ccbedeadfdeadd922c1b836c9dd4c596871bf654753
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@npm:7.23.3"
@@ -522,6 +762,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.22.15"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.22.15"
+  peerDependencies:
+    "@babel/core": ^7.13.0
+  checksum: fbefedc0da014c37f1a50a8094ce7dbbf2181ae93243f23d6ecba2499b5b20196c2124d6a4dfe3e9e0125798e80593103e456352a4beb4e5c6f7c75efb80fdac
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@npm:7.23.3"
@@ -560,17 +813,17 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-proposal-decorators@npm:^7.12.12":
-  version: 7.23.3
-  resolution: "@babel/plugin-proposal-decorators@npm:7.23.3"
+  version: 7.22.7
+  resolution: "@babel/plugin-proposal-decorators@npm:7.22.7"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
+    "@babel/helper-create-class-features-plugin": "npm:^7.22.6"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-replace-supers": "npm:^7.22.20"
+    "@babel/helper-replace-supers": "npm:^7.22.5"
     "@babel/helper-split-export-declaration": "npm:^7.22.6"
-    "@babel/plugin-syntax-decorators": "npm:^7.23.3"
+    "@babel/plugin-syntax-decorators": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 526d0228f884e072cbacf0188ab886a43732ea1dbd6ce0bb035884da8324c41e654a500083a997de928e9cf1dd04c5be27808f773b1dccaca5c3bf33819c3030
+  checksum: efbca342d65a155be507c4bd76c264a55a515976ec830653e0bf863d722690a995c49df51130ccf982419726904b8a8e7224b1f1d4c3c15accb01d9965108e09
   languageName: node
   linkType: hard
 
@@ -588,14 +841,14 @@ __metadata:
   linkType: hard
 
 "@babel/plugin-proposal-export-default-from@npm:^7.12.1":
-  version: 7.23.3
-  resolution: "@babel/plugin-proposal-export-default-from@npm:7.23.3"
+  version: 7.22.5
+  resolution: "@babel/plugin-proposal-export-default-from@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-export-default-from": "npm:^7.23.3"
+    "@babel/plugin-syntax-export-default-from": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: f5a438413b8728cbf5a76ef65510418e5e2e1c82292ee4a031a0c941bee488f7e7dec960c1fd314a42bfadf40ffa9a4ef5c1aa1b3c906b9bc140d4530e7bc8be
+  checksum: fc0ddcebdd1991ad4c82a3a797b7c8ef21bb76dc09df52a58f23a648bfa0db5c3cd580ade9ac28fcecdb1b3cd61f53fbee504b0d99c689929c33da0a7dd4e4f4
   languageName: node
   linkType: hard
 
@@ -755,14 +1008,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-decorators@npm:^7.12.13, @babel/plugin-syntax-decorators@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-decorators@npm:7.23.3"
+"@babel/plugin-syntax-decorators@npm:^7.12.13, @babel/plugin-syntax-decorators@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-decorators@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 5856e236f7ae15a58c839fd40df1aa4df31029048df01191b4870c34b1bff44c77fbee78ca5edd8eb3c81410005d8f9a36a9cf48094f2bb328592304a738648a
+  checksum: 2f7bcaf80790bb4abc1d09e07b2c74373c96238961dff2a7bccf741f8261403ab47de997dc6d1735e747a36b299e54a4efac60276158799cbd1353b2cf3f1ed7
   languageName: node
   linkType: hard
 
@@ -777,14 +1030,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-export-default-from@npm:^7.12.13, @babel/plugin-syntax-export-default-from@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-export-default-from@npm:7.23.3"
+"@babel/plugin-syntax-export-default-from@npm:^7.12.13, @babel/plugin-syntax-export-default-from@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-export-default-from@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 415b752a4c096e1eb65328b5dddde4848178f992356ab058828dfb12267c00f0880b4a4a272edf51f6344af1cc1565ea6dc184063e9454acf3160b9b1a9ef669
+  checksum: 5b66dea77f9e8e6307b01827a229a49bd98f0928e21bffadf538201fd2705838e621bc80d712fbe48f9f6b1348b78aa95c1e5d5ab75773521ccc399d26152de7
   languageName: node
   linkType: hard
 
@@ -799,14 +1052,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-flow@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-flow@npm:7.23.3"
+"@babel/plugin-syntax-flow@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-flow@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: c6e6f355d6ace5f4a9e7bb19f1fed2398aeb9b62c4c671a189d81b124f9f5bb77c4225b6e85e19339268c60a021c1e49104e450375de5e6bb70612190d9678af
+  checksum: 84c8c40fcfe8e78cecdd6fb90e8f97f419e3f3b27a33de8324ae97d5ce1b87cdd98a636fa21a68d4d2c37c7d63f3a279bb84b6956b849921affed6b806b6ffe7
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-syntax-import-assertions@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-import-assertions@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 2b8b5572db04a7bef1e6cd20debf447e4eef7cb012616f5eceb8fa3e23ce469b8f76ee74fd6d1e158ba17a8f58b0aec579d092fb67c5a30e83ccfbc5754916c1
   languageName: node
   linkType: hard
 
@@ -821,6 +1085,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-syntax-import-attributes@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-import-attributes@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 197b3c5ea2a9649347f033342cb222ab47f4645633695205c0250c6bf2af29e643753b8bb24a2db39948bef08e7c540babfd365591eb57fc110cb30b425ffc47
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-syntax-import-attributes@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-import-attributes@npm:7.23.3"
@@ -865,7 +1140,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-jsx@npm:^7.22.5, @babel/plugin-syntax-jsx@npm:^7.23.3":
+"@babel/plugin-syntax-jsx@npm:^7.22.5":
   version: 7.23.3
   resolution: "@babel/plugin-syntax-jsx@npm:7.23.3"
   dependencies:
@@ -964,14 +1239,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-syntax-typescript@npm:^7.12.13, @babel/plugin-syntax-typescript@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-syntax-typescript@npm:7.23.3"
+"@babel/plugin-syntax-typescript@npm:^7.12.13, @babel/plugin-syntax-typescript@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-syntax-typescript@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: abfad3a19290d258b028e285a1f34c9b8a0cbe46ef79eafed4ed7ffce11b5d0720b5e536c82f91cbd8442cde35a3dd8e861fa70366d87ff06fdc0d4756e30876
+  checksum: 8ab7718fbb026d64da93681a57797d60326097fd7cb930380c8bffd9eb101689e90142c760a14b51e8e69c88a73ba3da956cb4520a3b0c65743aee5c71ef360a
   languageName: node
   linkType: hard
 
@@ -998,6 +1273,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-arrow-functions@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-arrow-functions@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 35abb6c57062802c7ce8bd96b2ef2883e3124370c688bbd67609f7d2453802fb73944df8808f893b6c67de978eb2bcf87bbfe325e46d6f39b5fcb09ece11d01a
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-async-generator-functions@npm:^7.23.2":
+  version: 7.23.2
+  resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.2"
+  dependencies:
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-remap-async-to-generator": "npm:^7.22.20"
+    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: e1abae0edcda7304d7c17702ac25a127578791b89c4f767d60589249fa3e50ec33f8c9ff39d3d8d41f00b29947654eaddd4fd586e04c4d598122db745fab2868
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-async-generator-functions@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-async-generator-functions@npm:7.23.3"
@@ -1012,6 +1312,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-async-to-generator@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-async-to-generator@npm:7.22.5"
+  dependencies:
+    "@babel/helper-module-imports": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-remap-async-to-generator": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: b95f23f99dcb379a9f0a1c2a3bbea3f8dc0e1b16dc1ac8b484fe378370169290a7a63d520959a9ba1232837cf74a80e23f6facbe14fd42a3cda6d3c2d7168e62
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-async-to-generator@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-async-to-generator@npm:7.23.3"
@@ -1025,6 +1338,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-block-scoped-functions@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 416b1341858e8ca4e524dee66044735956ced5f478b2c3b9bc11ec2285b0c25d7dbb96d79887169eb938084c95d0a89338c8b2fe70d473bd9dc92e5d9db1732c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-block-scoped-functions@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-block-scoped-functions@npm:7.23.3"
@@ -1047,19 +1371,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
+"@babel/plugin-transform-block-scoping@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-block-scoping@npm:7.23.0"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 9c6f8366f667897541d360246de176dd29efc7a13d80a5b48361882f7173d9173be4646c3b7d9b003ccc0e01e25df122330308f33db921fa553aa17ad544b3fc
+  checksum: 9f60c71a0b72c7bdc0734ab363cf8ad40c4366456d9429ab3f2caedf6566c12f1ae8190478827222e93c60855b6c746a2c0e24381646fe7220d4666c332dc090
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-class-properties@npm:~7.22.5":
+"@babel/plugin-transform-class-properties@npm:^7.22.5, @babel/plugin-transform-class-properties@npm:~7.22.5":
   version: 7.22.5
   resolution: "@babel/plugin-transform-class-properties@npm:7.22.5"
   dependencies:
@@ -1071,6 +1394,31 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-class-properties@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-class-properties@npm:7.23.3"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 9c6f8366f667897541d360246de176dd29efc7a13d80a5b48361882f7173d9173be4646c3b7d9b003ccc0e01e25df122330308f33db921fa553aa17ad544b3fc
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-class-static-block@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-class-static-block@npm:7.22.11"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.22.11"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
+  peerDependencies:
+    "@babel/core": ^7.12.0
+  checksum: 69f040506fad66f1c6918d288d0e0edbc5c8a07c8b4462c1184ad2f9f08995d68b057126c213871c0853ae0c72afc60ec87492049dfacb20902e32346a448bcb
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-class-static-block@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-class-static-block@npm:7.23.3"
@@ -1103,6 +1451,37 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-classes@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-classes@npm:7.22.15"
+  dependencies:
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-environment-visitor": "npm:^7.22.5"
+    "@babel/helper-function-name": "npm:^7.22.5"
+    "@babel/helper-optimise-call-expression": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-replace-supers": "npm:^7.22.9"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    globals: "npm:^11.1.0"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 21d7a171055634b4c407e42fc99ef340bde70d5582d47f7bcdc9781d09b3736607d346f56c3abb1e8b9b62516e1af25ab9023a295be0c347c963d6a20f74b55f
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-computed-properties@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-computed-properties@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/template": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: a3efa8de19e4c52f01a99301d864819a7997a7845044d9cef5b67b0fb1e5e3e610ecc23053a8b5cf8fe40fcad93c15a586eaeffd22b89eeaa038339c37919661
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-computed-properties@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-computed-properties@npm:7.23.3"
@@ -1126,6 +1505,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-destructuring@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-destructuring@npm:7.23.0"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 924b1c0fc11c9782a9a63ae6d181b9b069250a5567c705c24409e2f1e39ac47e61846cd17b0ab45641dc77050e7b900fc80a536f8abe7dff49b4e777e7b9b952
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-dotall-regex@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-dotall-regex@npm:7.22.5"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 409b658d11e3082c8f69e9cdef2d96e4d6d11256f005772425fb230cc48fd05945edbfbcb709dab293a1a2f01f9c8a5bb7b4131e632b23264039d9f95864b453
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dotall-regex@npm:^7.23.3, @babel/plugin-transform-dotall-regex@npm:^7.4.4":
   version: 7.23.3
   resolution: "@babel/plugin-transform-dotall-regex@npm:7.23.3"
@@ -1138,6 +1540,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-duplicate-keys@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-duplicate-keys@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: bb1280fbabaab6fab2ede585df34900712698210a3bd413f4df5bae6d8c24be36b496c92722ae676a7a67d060a4624f4d6c23b923485f906bfba8773c69f55b4
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-duplicate-keys@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-duplicate-keys@npm:7.23.3"
@@ -1149,6 +1562,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-dynamic-import@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-dynamic-import@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 78fc9c532210bf9e8f231747f542318568ac360ee6c27e80853962c984283c73da3f8f8aebe83c2096090a435b356b092ed85de617a156cbe0729d847632be45
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-dynamic-import@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-dynamic-import@npm:7.23.3"
@@ -1161,6 +1586,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-exponentiation-operator@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.22.5"
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: f2d660c1b1d51ad5fec1cd5ad426a52187204068c4158f8c4aa977b31535c61b66898d532603eef21c15756827be8277f724c869b888d560f26d7fe848bb5eae
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-exponentiation-operator@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-exponentiation-operator@npm:7.23.3"
@@ -1173,39 +1610,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.3"
+"@babel/plugin-transform-export-namespace-from@npm:^7.22.11, @babel/plugin-transform-export-namespace-from@npm:~7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.22.11"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: c65e21e5b54135378cfbe7563e884d778ea0864b5950c7db85f984170f20c2e110675c8407b1803ffe587401e5990fbd53eb159c3b3a6d7593ae6f9ffdb83cc4
+  checksum: 73af5883a321ed56a4bfd43c8a7de0164faebe619287706896fc6ee2f7a4e69042adaa1338c0b8b4bdb9f7e5fdceb016fb1d40694cb43ca3b8827429e8aac4bf
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-export-namespace-from@npm:~7.22.11":
-  version: 7.22.11
-  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.22.11"
+"@babel/plugin-transform-export-namespace-from@npm:^7.23.3":
+  version: 7.23.3
+  resolution: "@babel/plugin-transform-export-namespace-from@npm:7.23.3"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 73af5883a321ed56a4bfd43c8a7de0164faebe619287706896fc6ee2f7a4e69042adaa1338c0b8b4bdb9f7e5fdceb016fb1d40694cb43ca3b8827429e8aac4bf
+  checksum: c65e21e5b54135378cfbe7563e884d778ea0864b5950c7db85f984170f20c2e110675c8407b1803ffe587401e5990fbd53eb159c3b3a6d7593ae6f9ffdb83cc4
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-flow-strip-types@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.23.3"
+"@babel/plugin-transform-flow-strip-types@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-flow-strip-types@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-flow": "npm:^7.23.3"
+    "@babel/plugin-syntax-flow": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 84af4b1f6d79f1a66a2440c5cfe3ba0e2bb9355402da477add13de1867088efb8d7b2be15d67ac955f1d2a745d4a561423bbb473fe6e4622b157989598ec323f
+  checksum: 0657042178061517cd5641a9a5eed1251aa1d8cf93a4111568ae663773854a1e8f6af167ecae042237d261389751dc5ee32ba12a15e65e41af29d04150005cab
   languageName: node
   linkType: hard
 
@@ -1220,6 +1657,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-for-of@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-for-of@npm:7.22.15"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: d6ac155fcc8dc3d37a092325e5b7df738a7a953c4a47520c0c02fbc30433e6a5ac38197690845ebb931870af958ac95d36132d5accf41ed4bb0765a7618371fc
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-function-name@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-function-name@npm:7.22.5"
+  dependencies:
+    "@babel/helper-compilation-targets": "npm:^7.22.5"
+    "@babel/helper-function-name": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: cff3b876357999cb8ae30e439c3ec6b0491a53b0aa6f722920a4675a6dd5b53af97a833051df4b34791fe5b3dd326ccf769d5c8e45b322aa50ee11a660b17845
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-function-name@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-function-name@npm:7.23.3"
@@ -1233,6 +1694,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-json-strings@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-json-strings@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 50665e5979e66358c50e90a26db53c55917f78175127ac2fa05c7888d156d418ffb930ec0a109353db0a7c5f57c756ce01bfc9825d24cbfd2b3ec453f2ed8cba
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-json-strings@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-json-strings@npm:7.23.3"
@@ -1245,6 +1718,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-literals@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-literals@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: ec37cc2ffb32667af935ab32fe28f00920ec8a1eb999aa6dc6602f2bebd8ba205a558aeedcdccdebf334381d5c57106c61f52332045730393e73410892a9735b
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-literals@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-literals@npm:7.23.3"
@@ -1256,6 +1740,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-logical-assignment-operators@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: c664e9798e85afa7f92f07b867682dee7392046181d82f5d21bae6f2ca26dfe9c8375cdc52b7483c3fc09a983c1989f60eff9fbc4f373b0c0a74090553d05739
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-logical-assignment-operators@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-logical-assignment-operators@npm:7.23.3"
@@ -1268,6 +1764,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-member-expression-literals@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-member-expression-literals@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: ec4b0e07915ddd4fda0142fd104ee61015c208608a84cfa13643a95d18760b1dc1ceb6c6e0548898b8c49e5959a994e46367260176dbabc4467f729b21868504
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-member-expression-literals@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-member-expression-literals@npm:7.23.3"
@@ -1279,6 +1786,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-amd@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-modules-amd@npm:7.23.0"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.23.0"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: d06fbee89044a0c4d9d65c2bb26b45482266d14d64601a36996615ca75f1e1cc40ac95d09821601606eacbeeef39b3b634118f6197cda6431c8440975926a5d5
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-amd@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-modules-amd@npm:7.23.3"
@@ -1291,6 +1810,32 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-commonjs@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.22.5"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: bf8bcc7a0f28f1fb2bfad3e65a50e6aee54998917caf89c68fc871d1831808a74ae7563b8a37485da03a583a9bd1211c30b667bb366c3161a22c6105962ab5f8
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-modules-commonjs@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.0"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.23.0"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-simple-access": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 65085c8f2578b0c272b3969b78e54430ea3217fca8de7a21ded845a74ddf2d97aee284559da102d826fcb8aed5a79d09536a6e4610d868f539d7bc382eb319ff
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-commonjs@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-modules-commonjs@npm:7.23.3"
@@ -1318,6 +1863,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-systemjs@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.0"
+  dependencies:
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-module-transforms": "npm:^7.23.0"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 43a61fd72ba90afafcf6734345df00cbaf1f244ca456f8e8532813b87a985ddfeca7fc6ea758c12350abcfeba02835875b44dc6b3118c2dac7469a3f298c79ad
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-systemjs@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-modules-systemjs@npm:7.23.3"
@@ -1332,6 +1891,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-modules-umd@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-modules-umd@npm:7.22.5"
+  dependencies:
+    "@babel/helper-module-transforms": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: b955d066c68b60c1179bfb0b744e2fad32dbe86d0673bd94637439cfe425d1e3ff579bd47a417233609aac1624f4fe69915bee73e6deb2af6188fda8aaa5db63
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-modules-umd@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-modules-umd@npm:7.23.3"
@@ -1356,6 +1927,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-new-target@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-new-target@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 6b72112773487a881a1d6ffa680afde08bad699252020e86122180ee7a88854d5da3f15d9bca3331cf2e025df045604494a8208a2e63b486266b07c14e2ffbf3
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-new-target@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-new-target@npm:7.23.3"
@@ -1367,6 +1949,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-nullish-coalescing-operator@npm:^7.22.11, @babel/plugin-transform-nullish-coalescing-operator@npm:~7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 167babecc8b8fe70796a7b7d34af667ebbf43da166c21689502e5e8cc93180b7a85979c77c9f64b7cce431b36718bd0a6df9e5e0ffea4ae22afb22cfef886372
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-nullish-coalescing-operator@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.23.3"
@@ -1379,15 +1973,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-nullish-coalescing-operator@npm:~7.22.11":
+"@babel/plugin-transform-numeric-separator@npm:^7.22.11":
   version: 7.22.11
-  resolution: "@babel/plugin-transform-nullish-coalescing-operator@npm:7.22.11"
+  resolution: "@babel/plugin-transform-numeric-separator@npm:7.22.11"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+    "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 167babecc8b8fe70796a7b7d34af667ebbf43da166c21689502e5e8cc93180b7a85979c77c9f64b7cce431b36718bd0a6df9e5e0ffea4ae22afb22cfef886372
+  checksum: af064d06a4a041767ec396a5f258103f64785df290e038bba9f0ef454e6c914f2ac45d862bbdad8fac2c7ad47fa4e95356f29053c60c100a0160b02a995fe2a3
   languageName: node
   linkType: hard
 
@@ -1403,6 +1997,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-object-rest-spread@npm:^7.22.15, @babel/plugin-transform-object-rest-spread@npm:~7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.22.15"
+  dependencies:
+    "@babel/compat-data": "npm:^7.22.9"
+    "@babel/helper-compilation-targets": "npm:^7.22.15"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
+    "@babel/plugin-transform-parameters": "npm:^7.22.15"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 04b9f4bbabf4bbd019b47c60b294d873fe5d2f6063628a5b311d88da9e81b0a8622756dd42c7030359925479b7a3cd743dee46e73d84e03afd907d8cfd44ddea
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-object-rest-spread@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-object-rest-spread@npm:7.23.3"
@@ -1418,18 +2027,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-object-rest-spread@npm:~7.22.15":
-  version: 7.22.15
-  resolution: "@babel/plugin-transform-object-rest-spread@npm:7.22.15"
+"@babel/plugin-transform-object-super@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-object-super@npm:7.22.5"
   dependencies:
-    "@babel/compat-data": "npm:^7.22.9"
-    "@babel/helper-compilation-targets": "npm:^7.22.15"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
-    "@babel/plugin-transform-parameters": "npm:^7.22.15"
+    "@babel/helper-replace-supers": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 04b9f4bbabf4bbd019b47c60b294d873fe5d2f6063628a5b311d88da9e81b0a8622756dd42c7030359925479b7a3cd743dee46e73d84e03afd907d8cfd44ddea
+  checksum: b71887877d74cb64dbccb5c0324fa67e31171e6a5311991f626650e44a4083e5436a1eaa89da78c0474fb095d4ec322d63ee778b202d33aa2e4194e1ed8e62d7
   languageName: node
   linkType: hard
 
@@ -1445,6 +2051,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-catch-binding@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.22.11"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: f17abd90e1de67c84d63afea29c8021c74abb2794d3a6eeafb0bbe7372d3db32aefca386e392116ec63884537a4a2815d090d26264d259bacc08f6e3ed05294c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-optional-catch-binding@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-optional-catch-binding@npm:7.23.3"
@@ -1457,6 +2075,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-optional-chaining@npm:^7.22.15, @babel/plugin-transform-optional-chaining@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.0"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: fb1103c6489b91df06c483a97fc12515c2f3840f573cbecb27959307c0a838fdd1502a34ada43805c4fb7f7dab3d1c0d1ab8428775d098af6778a7b00f494c27
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-optional-chaining@npm:^7.23.3, @babel/plugin-transform-optional-chaining@npm:~7.23.0":
   version: 7.23.3
   resolution: "@babel/plugin-transform-optional-chaining@npm:7.23.3"
@@ -1470,7 +2101,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-parameters@npm:^7.12.1, @babel/plugin-transform-parameters@npm:^7.20.7, @babel/plugin-transform-parameters@npm:^7.22.15, @babel/plugin-transform-parameters@npm:^7.23.3":
+"@babel/plugin-transform-parameters@npm:^7.12.1, @babel/plugin-transform-parameters@npm:^7.20.7":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-parameters@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 86bec14b1a42a3c7059fe7dcbbedcae91e778a6b61e59922560d689fea10a165d89e53c2d9f383ad361b642ce444e183880a88dea39d87c09f2046a534b64304
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-parameters@npm:^7.22.15":
+  version: 7.22.15
+  resolution: "@babel/plugin-transform-parameters@npm:7.22.15"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: fa9f2340fe48b88c344ff38cd86318f61e48bedafdc567a1607106a1c3a65c0db845792f406b1320f89745192fe1ae6739b0bc4eb646ff60cd797ca85752d462
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-parameters@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-parameters@npm:7.23.3"
   dependencies:
@@ -1481,6 +2134,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-private-methods@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-private-methods@npm:7.22.5"
+  dependencies:
+    "@babel/helper-create-class-features-plugin": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 321479b4fcb6d3b3ef622ab22fd24001e43d46e680e8e41324c033d5810c84646e470f81b44cbcbef5c22e99030784f7cac92f1829974da7a47a60a7139082c3
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-private-methods@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-private-methods@npm:7.23.3"
@@ -1493,15 +2158,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-methods@npm:~7.22.5":
-  version: 7.22.5
-  resolution: "@babel/plugin-transform-private-methods@npm:7.22.5"
+"@babel/plugin-transform-private-property-in-object@npm:^7.22.11":
+  version: 7.22.11
+  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.22.11"
   dependencies:
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.5"
+    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
+    "@babel/helper-create-class-features-plugin": "npm:^7.22.11"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 321479b4fcb6d3b3ef622ab22fd24001e43d46e680e8e41324c033d5810c84646e470f81b44cbcbef5c22e99030784f7cac92f1829974da7a47a60a7139082c3
+  checksum: b00623d107069c91a164d5cf7486c0929a4ee3023fcddbc8844e21b5e66f369271e1aa51921c7d87b80d9927bc75d63afcfe4d577872457ddb0443a5b86bacca
   languageName: node
   linkType: hard
 
@@ -1519,17 +2186,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-private-property-in-object@npm:~7.22.11":
-  version: 7.22.11
-  resolution: "@babel/plugin-transform-private-property-in-object@npm:7.22.11"
+"@babel/plugin-transform-property-literals@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-property-literals@npm:7.22.5"
   dependencies:
-    "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.11"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: b00623d107069c91a164d5cf7486c0929a4ee3023fcddbc8844e21b5e66f369271e1aa51921c7d87b80d9927bc75d63afcfe4d577872457ddb0443a5b86bacca
+  checksum: 796176a3176106f77fcb8cd04eb34a8475ce82d6d03a88db089531b8f0453a2fb8b0c6ec9a52c27948bc0ea478becec449893741fc546dfc3930ab927e3f9f2e
   languageName: node
   linkType: hard
 
@@ -1544,14 +2208,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-display-name@npm:^7.12.13, @babel/plugin-transform-react-display-name@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-display-name@npm:7.23.3"
+"@babel/plugin-transform-react-display-name@npm:^7.12.13, @babel/plugin-transform-react-display-name@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-display-name@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 7f86964e8434d3ddbd3c81d2690c9b66dbf1cd8bd9512e2e24500e9fa8cf378bc52c0853270b3b82143aba5965aec04721df7abdb768f952b44f5c6e0b198779
+  checksum: a12bfd1e4e93055efca3ace3c34722571bda59d9740dca364d225d9c6e3ca874f134694d21715c42cc63d79efd46db9665bd4a022998767f9245f1e29d5d204d
   languageName: node
   linkType: hard
 
@@ -1566,30 +2230,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.12.13, @babel/plugin-transform-react-jsx@npm:^7.22.15, @babel/plugin-transform-react-jsx@npm:^7.22.5":
-  version: 7.22.15
-  resolution: "@babel/plugin-transform-react-jsx@npm:7.22.15"
+"@babel/plugin-transform-react-jsx@npm:^7.12.12, @babel/plugin-transform-react-jsx@npm:^7.12.13, @babel/plugin-transform-react-jsx@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-jsx@npm:7.22.5"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-module-imports": "npm:^7.22.15"
+    "@babel/helper-module-imports": "npm:^7.22.5"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/plugin-syntax-jsx": "npm:^7.22.5"
-    "@babel/types": "npm:^7.22.15"
+    "@babel/types": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: a436bfbffe723d162e5816d510dca7349a1fc572c501d73f1e17bbca7eb899d7a6a14d8fc2ae5993dd79fdd77bcc68d295e59a3549bed03b8579c767f6e3c9dc
+  checksum: 6be5db99b170c937c71fbe68dc64804bb041729d2f95b376ab5e7bc51c34a790f28753b14384160e87cabacf5e1b1aa3379a1a430a60b1fd6b031ba58955f5a6
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-react-pure-annotations@npm:^7.12.1, @babel/plugin-transform-react-pure-annotations@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.23.3"
+"@babel/plugin-transform-react-pure-annotations@npm:^7.12.1, @babel/plugin-transform-react-pure-annotations@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-react-pure-annotations@npm:7.22.5"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 9ea3698b1d422561d93c0187ac1ed8f2367e4250b10e259785ead5aa643c265830fd0f4cf5087a5bedbc4007444c06da2f2006686613220acf0949895f453666
+  checksum: 092021c4f404e267002099ec20b3f12dd730cb90b0d83c5feed3dc00dbe43b9c42c795a18e7c6c7d7bddea20c7dd56221b146aec81b37f2e7eb5137331c61120
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-regenerator@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/plugin-transform-regenerator@npm:7.22.10"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    regenerator-transform: "npm:^0.15.2"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: e13678d62d6fa96f11cb8b863f00e8693491e7adc88bfca3f2820f80cbac8336e7dec3a596eee6a1c4663b7ececc3564f2cd7fb44ed6d4ce84ac2bb7f39ecc6e
   languageName: node
   linkType: hard
 
@@ -1605,6 +2281,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-reserved-words@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-reserved-words@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 3ffd7dbc425fe8132bfec118b9817572799cab1473113a635d25ab606c1f5a2341a636c04cf6b22df3813320365ed5a965b5eeb3192320a10e4cc2c137bd8bfc
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-reserved-words@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-reserved-words@npm:7.23.3"
@@ -1643,6 +2330,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-shorthand-properties@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-shorthand-properties@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: a5ac902c56ea8effa99f681340ee61bac21094588f7aef0bc01dff98246651702e677552fa6d10e548c4ac22a3ffad047dd2f8c8f0540b68316c2c203e56818b
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-spread@npm:^7.12.1, @babel/plugin-transform-spread@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-spread@npm:7.23.3"
@@ -1655,6 +2353,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-spread@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-spread@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-skip-transparent-expression-wrappers": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: f9fd247b3fa8953416c8808c124c3a5db5cd697abbf791aae0143a0587fff6b386045f94c62bcd1b6783a1fd275629cc194f25f6c0aafc9f05f12a56fd5f94bf
+  languageName: node
+  linkType: hard
+
+"@babel/plugin-transform-sticky-regex@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-sticky-regex@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 63b2c575e3e7f96c32d52ed45ee098fb7d354b35c2223b8c8e76840b32cc529ee0c0ceb5742fd082e56e91e3d82842a367ce177e82b05039af3d602c9627a729
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-sticky-regex@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-sticky-regex@npm:7.23.3"
@@ -1677,6 +2398,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-template-literals@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-template-literals@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 27e9bb030654cb425381c69754be4abe6a7c75b45cd7f962cd8d604b841b2f0fb7b024f2efc1c25cc53f5b16d79d5e8cfc47cacbdaa983895b3aeefa3e7e24ff
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-template-literals@npm:~7.12.0":
   version: 7.12.13
   resolution: "@babel/plugin-transform-template-literals@npm:7.12.13"
@@ -1688,6 +2420,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-typeof-symbol@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-typeof-symbol@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 82a53a63ffc3010b689ca9a54e5f53b2718b9f4b4a9818f36f9b7dba234f38a01876680553d2716a645a61920b5e6e4aaf8d4a0064add379b27ca0b403049512
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-typeof-symbol@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-typeof-symbol@npm:7.23.3"
@@ -1699,17 +2442,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/plugin-transform-typescript@npm:^7.23.3":
-  version: 7.23.3
-  resolution: "@babel/plugin-transform-typescript@npm:7.23.3"
+"@babel/plugin-transform-typescript@npm:^7.22.5":
+  version: 7.22.10
+  resolution: "@babel/plugin-transform-typescript@npm:7.22.10"
   dependencies:
     "@babel/helper-annotate-as-pure": "npm:^7.22.5"
-    "@babel/helper-create-class-features-plugin": "npm:^7.22.15"
+    "@babel/helper-create-class-features-plugin": "npm:^7.22.10"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/plugin-syntax-typescript": "npm:^7.23.3"
+    "@babel/plugin-syntax-typescript": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 74dff264701131e615e577d4080d8a1de99cf4b11f4a9cdf8228091456241529fa1f3ebbcbc8399b906972258c2d21088e361c569c76a06353561abdc8922d00
+  checksum: 7d48bbc07bc8ed821e3303ae2b4420599bd68c9461ff26adda2b5d5177f6bef05667c654982bb5cd76706e2aa4383bae9c4a5bfe31f42130ebfcfd27a24fe647
   languageName: node
   linkType: hard
 
@@ -1726,6 +2469,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-escapes@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/plugin-transform-unicode-escapes@npm:7.22.10"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 807f40ed1324c8cb107c45358f1903384ca3f0ef1d01c5a3c5c9b271c8d8eec66936a3dcc8d75ddfceea9421420368c2e77ae3adef0a50557e778dfe296bf382
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-escapes@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-unicode-escapes@npm:7.23.3"
@@ -1737,6 +2491,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-property-regex@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.22.5"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 2495e5f663cb388e3d888b4ba3df419ac436a5012144ac170b622ddfc221f9ea9bdba839fa2bc0185cb776b578030666406452ec7791cbf0e7a3d4c88ae9574c
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-property-regex@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-unicode-property-regex@npm:7.23.3"
@@ -1749,6 +2515,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-regex@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-unicode-regex@npm:7.22.5"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 6b5d1404c8c623b0ec9bd436c00d885a17d6a34f3f2597996343ddb9d94f6379705b21582dfd4cec2c47fd34068872e74ab6b9580116c0566b3f9447e2a7fa06
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-regex@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-unicode-regex@npm:7.23.3"
@@ -1761,6 +2539,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/plugin-transform-unicode-sets-regex@npm:^7.22.5":
+  version: 7.22.5
+  resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.22.5"
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin": "npm:^7.22.5"
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0
+  checksum: c042070f980b139547f8b0179efbc049ac5930abec7fc26ed7a41d89a048d8ab17d362200e204b6f71c3c20d6991a0e74415e1a412a49adc8131c2a40c04822e
+  languageName: node
+  linkType: hard
+
 "@babel/plugin-transform-unicode-sets-regex@npm:^7.23.3":
   version: 7.23.3
   resolution: "@babel/plugin-transform-unicode-sets-regex@npm:7.23.3"
@@ -1773,7 +2563,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-env@npm:^7.12.11, @babel/preset-env@npm:~7.23.2":
+"@babel/preset-env@npm:^7.12.11":
   version: 7.23.3
   resolution: "@babel/preset-env@npm:7.23.3"
   dependencies:
@@ -1863,16 +2653,106 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/preset-flow@npm:^7.12.1":
-  version: 7.23.3
-  resolution: "@babel/preset-flow@npm:7.23.3"
+"@babel/preset-env@npm:~7.23.2":
+  version: 7.23.2
+  resolution: "@babel/preset-env@npm:7.23.2"
   dependencies:
+    "@babel/compat-data": "npm:^7.23.2"
+    "@babel/helper-compilation-targets": "npm:^7.22.15"
     "@babel/helper-plugin-utils": "npm:^7.22.5"
     "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-transform-flow-strip-types": "npm:^7.23.3"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression": "npm:^7.22.15"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining": "npm:^7.22.15"
+    "@babel/plugin-proposal-private-property-in-object": "npm:7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-async-generators": "npm:^7.8.4"
+    "@babel/plugin-syntax-class-properties": "npm:^7.12.13"
+    "@babel/plugin-syntax-class-static-block": "npm:^7.14.5"
+    "@babel/plugin-syntax-dynamic-import": "npm:^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from": "npm:^7.8.3"
+    "@babel/plugin-syntax-import-assertions": "npm:^7.22.5"
+    "@babel/plugin-syntax-import-attributes": "npm:^7.22.5"
+    "@babel/plugin-syntax-import-meta": "npm:^7.10.4"
+    "@babel/plugin-syntax-json-strings": "npm:^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators": "npm:^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator": "npm:^7.8.3"
+    "@babel/plugin-syntax-numeric-separator": "npm:^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding": "npm:^7.8.3"
+    "@babel/plugin-syntax-optional-chaining": "npm:^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object": "npm:^7.14.5"
+    "@babel/plugin-syntax-top-level-await": "npm:^7.14.5"
+    "@babel/plugin-syntax-unicode-sets-regex": "npm:^7.18.6"
+    "@babel/plugin-transform-arrow-functions": "npm:^7.22.5"
+    "@babel/plugin-transform-async-generator-functions": "npm:^7.23.2"
+    "@babel/plugin-transform-async-to-generator": "npm:^7.22.5"
+    "@babel/plugin-transform-block-scoped-functions": "npm:^7.22.5"
+    "@babel/plugin-transform-block-scoping": "npm:^7.23.0"
+    "@babel/plugin-transform-class-properties": "npm:^7.22.5"
+    "@babel/plugin-transform-class-static-block": "npm:^7.22.11"
+    "@babel/plugin-transform-classes": "npm:^7.22.15"
+    "@babel/plugin-transform-computed-properties": "npm:^7.22.5"
+    "@babel/plugin-transform-destructuring": "npm:^7.23.0"
+    "@babel/plugin-transform-dotall-regex": "npm:^7.22.5"
+    "@babel/plugin-transform-duplicate-keys": "npm:^7.22.5"
+    "@babel/plugin-transform-dynamic-import": "npm:^7.22.11"
+    "@babel/plugin-transform-exponentiation-operator": "npm:^7.22.5"
+    "@babel/plugin-transform-export-namespace-from": "npm:^7.22.11"
+    "@babel/plugin-transform-for-of": "npm:^7.22.15"
+    "@babel/plugin-transform-function-name": "npm:^7.22.5"
+    "@babel/plugin-transform-json-strings": "npm:^7.22.11"
+    "@babel/plugin-transform-literals": "npm:^7.22.5"
+    "@babel/plugin-transform-logical-assignment-operators": "npm:^7.22.11"
+    "@babel/plugin-transform-member-expression-literals": "npm:^7.22.5"
+    "@babel/plugin-transform-modules-amd": "npm:^7.23.0"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.0"
+    "@babel/plugin-transform-modules-systemjs": "npm:^7.23.0"
+    "@babel/plugin-transform-modules-umd": "npm:^7.22.5"
+    "@babel/plugin-transform-named-capturing-groups-regex": "npm:^7.22.5"
+    "@babel/plugin-transform-new-target": "npm:^7.22.5"
+    "@babel/plugin-transform-nullish-coalescing-operator": "npm:^7.22.11"
+    "@babel/plugin-transform-numeric-separator": "npm:^7.22.11"
+    "@babel/plugin-transform-object-rest-spread": "npm:^7.22.15"
+    "@babel/plugin-transform-object-super": "npm:^7.22.5"
+    "@babel/plugin-transform-optional-catch-binding": "npm:^7.22.11"
+    "@babel/plugin-transform-optional-chaining": "npm:^7.23.0"
+    "@babel/plugin-transform-parameters": "npm:^7.22.15"
+    "@babel/plugin-transform-private-methods": "npm:^7.22.5"
+    "@babel/plugin-transform-private-property-in-object": "npm:^7.22.11"
+    "@babel/plugin-transform-property-literals": "npm:^7.22.5"
+    "@babel/plugin-transform-regenerator": "npm:^7.22.10"
+    "@babel/plugin-transform-reserved-words": "npm:^7.22.5"
+    "@babel/plugin-transform-shorthand-properties": "npm:^7.22.5"
+    "@babel/plugin-transform-spread": "npm:^7.22.5"
+    "@babel/plugin-transform-sticky-regex": "npm:^7.22.5"
+    "@babel/plugin-transform-template-literals": "npm:^7.22.5"
+    "@babel/plugin-transform-typeof-symbol": "npm:^7.22.5"
+    "@babel/plugin-transform-unicode-escapes": "npm:^7.22.10"
+    "@babel/plugin-transform-unicode-property-regex": "npm:^7.22.5"
+    "@babel/plugin-transform-unicode-regex": "npm:^7.22.5"
+    "@babel/plugin-transform-unicode-sets-regex": "npm:^7.22.5"
+    "@babel/preset-modules": "npm:0.1.6-no-external-plugins"
+    "@babel/types": "npm:^7.23.0"
+    babel-plugin-polyfill-corejs2: "npm:^0.4.6"
+    babel-plugin-polyfill-corejs3: "npm:^0.8.5"
+    babel-plugin-polyfill-regenerator: "npm:^0.5.3"
+    core-js-compat: "npm:^3.31.0"
+    semver: "npm:^6.3.1"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 60b5dde79621ae89943af459c4dc5b6030795f595a20ca438c8100f8d82c9ebc986881719030521ff5925799518ac5aa7f3fe62af8c33ab96be3681a71f88d03
+  checksum: 7bc8aeed59047f99af2f608f3143044517582b6bd7b041e3c7a12eface47e0313a57e78fad2e0d450cda2ce6c58451d67493f3d3677c5c1031cf59b7db1161c3
+  languageName: node
+  linkType: hard
+
+"@babel/preset-flow@npm:^7.12.1":
+  version: 7.22.5
+  resolution: "@babel/preset-flow@npm:7.22.5"
+  dependencies:
+    "@babel/helper-plugin-utils": "npm:^7.22.5"
+    "@babel/helper-validator-option": "npm:^7.22.5"
+    "@babel/plugin-transform-flow-strip-types": "npm:^7.22.5"
+  peerDependencies:
+    "@babel/core": ^7.0.0-0
+  checksum: 0bf6f587e952f8945d348cf0f25cbc3e50697f2cdc4e1394badfb76cfdde0cc2f2c9250bda3d28ecc6c196b89de7c8e72b8ffbf3086e604b959cce352dd2b34e
   languageName: node
   linkType: hard
 
@@ -1905,18 +2785,18 @@ __metadata:
   linkType: hard
 
 "@babel/preset-react@npm:^7.12.10":
-  version: 7.23.3
-  resolution: "@babel/preset-react@npm:7.23.3"
+  version: 7.22.5
+  resolution: "@babel/preset-react@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-transform-react-display-name": "npm:^7.23.3"
-    "@babel/plugin-transform-react-jsx": "npm:^7.22.15"
+    "@babel/helper-validator-option": "npm:^7.22.5"
+    "@babel/plugin-transform-react-display-name": "npm:^7.22.5"
+    "@babel/plugin-transform-react-jsx": "npm:^7.22.5"
     "@babel/plugin-transform-react-jsx-development": "npm:^7.22.5"
-    "@babel/plugin-transform-react-pure-annotations": "npm:^7.23.3"
+    "@babel/plugin-transform-react-pure-annotations": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: ef6aef131b2f36e2883e9da0d832903643cb3c9ad4f32e04fb3eecae59e4221d583139e8d8f973e25c28d15aafa6b3e60fe9f25c5fd09abd3e2df03b8637bdd2
+  checksum: 7c78b1bca3f2de9cb863b50cf0a5378d5e80b1b2e7573b9daabf09c0517d197aa7ff7fcd7daeb4a51e148743ab5dbd24c7b34422c86a256baf0e10e13400fe98
   languageName: node
   linkType: hard
 
@@ -1936,23 +2816,23 @@ __metadata:
   linkType: hard
 
 "@babel/preset-typescript@npm:^7.12.7":
-  version: 7.23.3
-  resolution: "@babel/preset-typescript@npm:7.23.3"
+  version: 7.22.5
+  resolution: "@babel/preset-typescript@npm:7.22.5"
   dependencies:
     "@babel/helper-plugin-utils": "npm:^7.22.5"
-    "@babel/helper-validator-option": "npm:^7.22.15"
-    "@babel/plugin-syntax-jsx": "npm:^7.23.3"
-    "@babel/plugin-transform-modules-commonjs": "npm:^7.23.3"
-    "@babel/plugin-transform-typescript": "npm:^7.23.3"
+    "@babel/helper-validator-option": "npm:^7.22.5"
+    "@babel/plugin-syntax-jsx": "npm:^7.22.5"
+    "@babel/plugin-transform-modules-commonjs": "npm:^7.22.5"
+    "@babel/plugin-transform-typescript": "npm:^7.22.5"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: c4add0f3fcbb3f4a305c48db9ccb32694f1308ed9971ccbc1a8a3c76d5a13726addb3c667958092287d7aa080186c5c83dbfefa55eacf94657e6cde39e172848
+  checksum: 2d851117e78235540be469a12a5c3bad42f994d030cf1fa58943e69f218dd21b805b0f2a592caf5f4bfc7beee2d3f9b66fa2a1daeb80c78edb3c574bd99e63d3
   languageName: node
   linkType: hard
 
 "@babel/register@npm:^7.12.1":
-  version: 7.22.15
-  resolution: "@babel/register@npm:7.22.15"
+  version: 7.22.5
+  resolution: "@babel/register@npm:7.22.5"
   dependencies:
     clone-deep: "npm:^4.0.1"
     find-cache-dir: "npm:^2.0.0"
@@ -1961,7 +2841,7 @@ __metadata:
     source-map-support: "npm:^0.5.16"
   peerDependencies:
     "@babel/core": ^7.0.0-0
-  checksum: 5497be6773608cd2d874210edd14499fce464ddbea170219da55955afe4c9173adb591164193458fd639e43b7d1314088a6186f4abf241476c59b3f0da6afd6f
+  checksum: 723ce27fdad6faee5b3f51ef4f5154f7f285d61da665367de14de85abbe1c81ccbac11f699671cd0ed6b755dd430f28a62364fed5d49f2527625a9ea3bf40056
   languageName: node
   linkType: hard
 
@@ -1972,7 +2852,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.23.2, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.1, @babel/runtime@npm:^7.9.2":
+"@babel/runtime@npm:^7.0.0, @babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.12.13, @babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.16.3, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.18.3, @babel/runtime@npm:^7.18.9, @babel/runtime@npm:^7.20.7, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.4.4, @babel/runtime@npm:^7.5.0, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7, @babel/runtime@npm:^7.9.2":
+  version: 7.22.6
+  resolution: "@babel/runtime@npm:7.22.6"
+  dependencies:
+    regenerator-runtime: "npm:^0.13.11"
+  checksum: 1d2f56797f548b009910bddf3dc04f980a9701193233145dc923f3ea87c8f88121a3c3ef1d449e9cb52a370d7d025a2243c748882d5546ff079ddf5ffe29f240
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.22.15":
   version: 7.23.2
   resolution: "@babel/runtime@npm:7.23.2"
   dependencies:
@@ -1981,7 +2870,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/template@npm:^7.12.13, @babel/template@npm:^7.12.7, @babel/template@npm:^7.22.15, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0":
+"@babel/template@npm:^7.12.13, @babel/template@npm:^7.12.7, @babel/template@npm:^7.22.5, @babel/template@npm:^7.3.3, @babel/template@npm:^7.4.0, @babel/template@npm:^7.7.0":
+  version: 7.22.5
+  resolution: "@babel/template@npm:7.22.5"
+  dependencies:
+    "@babel/code-frame": "npm:^7.22.5"
+    "@babel/parser": "npm:^7.22.5"
+    "@babel/types": "npm:^7.22.5"
+  checksum: 460634b1c5d61c779270968bd2f0817c19e3a5f20b469330dcab0a324dd29409b15ad1baa8530a21e09a9eb6c7db626500f437690c7be72987e40baa75357799
+  languageName: node
+  linkType: hard
+
+"@babel/template@npm:^7.22.15":
   version: 7.22.15
   resolution: "@babel/template@npm:7.22.15"
   dependencies:
@@ -2003,7 +2903,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.17, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.23.2, @babel/traverse@npm:^7.23.3, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.7.0, @babel/traverse@npm:~7.23.0":
+"@babel/traverse@npm:^7.1.0, @babel/traverse@npm:^7.1.6, @babel/traverse@npm:^7.12.11, @babel/traverse@npm:^7.12.17, @babel/traverse@npm:^7.12.9, @babel/traverse@npm:^7.13.0, @babel/traverse@npm:^7.4.3, @babel/traverse@npm:^7.7.0":
   version: 7.23.3
   resolution: "@babel/traverse@npm:7.23.3"
   dependencies:
@@ -2021,7 +2921,43 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.13, @babel/types@npm:^7.12.17, @babel/types@npm:^7.12.7, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.0, @babel/types@npm:^7.23.3, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
+"@babel/traverse@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/traverse@npm:7.22.10"
+  dependencies:
+    "@babel/code-frame": "npm:^7.22.10"
+    "@babel/generator": "npm:^7.22.10"
+    "@babel/helper-environment-visitor": "npm:^7.22.5"
+    "@babel/helper-function-name": "npm:^7.22.5"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/parser": "npm:^7.22.10"
+    "@babel/types": "npm:^7.22.10"
+    debug: "npm:^4.1.0"
+    globals: "npm:^11.1.0"
+  checksum: e88334f3be46b580ad164ac19e75825e70115ab519318fcb1b4c676b0a5abaa721383dd758978a5814406175de2c899eb7db4fcf68f10138d9b54cd954c9a076
+  languageName: node
+  linkType: hard
+
+"@babel/traverse@npm:~7.23.0":
+  version: 7.23.2
+  resolution: "@babel/traverse@npm:7.23.2"
+  dependencies:
+    "@babel/code-frame": "npm:^7.22.13"
+    "@babel/generator": "npm:^7.23.0"
+    "@babel/helper-environment-visitor": "npm:^7.22.20"
+    "@babel/helper-function-name": "npm:^7.23.0"
+    "@babel/helper-hoist-variables": "npm:^7.22.5"
+    "@babel/helper-split-export-declaration": "npm:^7.22.6"
+    "@babel/parser": "npm:^7.23.0"
+    "@babel/types": "npm:^7.23.0"
+    debug: "npm:^4.1.0"
+    globals: "npm:^11.1.0"
+  checksum: e4fcb8f8395804956df4ae1301230a14b6eb35b74a7058a0e0b40f6f4be7281e619e6dafe400e833d4512da5d61cf17ea177d04b00a8f7cf3d8d69aff83ca3d8
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.0.0, @babel/types@npm:^7.12.11, @babel/types@npm:^7.12.13, @babel/types@npm:^7.12.17, @babel/types@npm:^7.12.7, @babel/types@npm:^7.2.0, @babel/types@npm:^7.20.7, @babel/types@npm:^7.22.5, @babel/types@npm:^7.23.3, @babel/types@npm:^7.3.3, @babel/types@npm:^7.4.0, @babel/types@npm:^7.4.4, @babel/types@npm:^7.7.0, @babel/types@npm:^7.8.3":
   version: 7.23.3
   resolution: "@babel/types@npm:7.23.3"
   dependencies:
@@ -2032,6 +2968,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@babel/types@npm:^7.22.10":
+  version: 7.22.10
+  resolution: "@babel/types@npm:7.22.10"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.22.5"
+    "@babel/helper-validator-identifier": "npm:^7.22.5"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: b11f8d13f3418276df654b5276443f95742484c3c83e74f90f92bff01315118507a082edf1e74903b284106447660c31e5f29678730f647fb25e766ce47c56f0
+  languageName: node
+  linkType: hard
+
+"@babel/types@npm:^7.22.15, @babel/types@npm:^7.22.19, @babel/types@npm:^7.23.0":
+  version: 7.23.0
+  resolution: "@babel/types@npm:7.23.0"
+  dependencies:
+    "@babel/helper-string-parser": "npm:^7.22.5"
+    "@babel/helper-validator-identifier": "npm:^7.22.20"
+    to-fast-properties: "npm:^2.0.0"
+  checksum: ca5b896a26c91c5672254725c4c892a35567d2122afc47bd5331d1611a7f9230c19fc9ef591a5a6f80bf0d80737e104a9ac205c96447c74bee01d4319db58001
+  languageName: node
+  linkType: hard
+
 "@base2/pretty-print-object@npm:1.0.1":
   version: 1.0.1
   resolution: "@base2/pretty-print-object@npm:1.0.1"
@@ -2046,10 +3004,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/colors@npm:^10.37.2":
-  version: 10.37.2
-  resolution: "@carbon/colors@npm:10.37.2"
-  checksum: fa5e568434ab2c3b9193c2e9e4609fdca74f51ed263641b481d020f2fe2274643f34dcb3f435f4e9bc0e9ea9a728242e58b12b213429c0dd064858bef8ec9412
+"@carbon/colors@npm:^11.19.0":
+  version: 11.19.0
+  resolution: "@carbon/colors@npm:11.19.0"
+  checksum: 3596e377be5e17461901acef65e04d5258444e7b300013cf97571d2a3ae57d81b41dec62ae8497d6f8e5b526e7e272cf12f91d6af33e40c3ec9307833db06195
+  languageName: node
+  linkType: hard
+
+"@carbon/colors@npm:^11.20.0, @carbon/colors@npm:^11.20.1":
+  version: 11.20.1
+  resolution: "@carbon/colors@npm:11.20.1"
+  checksum: f053a7f9a237017a27cda54acee809069d5cc9785cd0ca00ccb4e1cc6156da1b8038e947e66e3f606139a1a5a047c144e42f8d713f2547cd72bd9908eaecd6a1
   languageName: node
   linkType: hard
 
@@ -2068,7 +3033,7 @@ __metadata:
     eslint-plugin-import: "npm:^2.26.0"
     eslint-plugin-jsdoc: "npm:^39.6.2"
     eslint-plugin-jsx-a11y: "npm:^6.6.1"
-    eslint-plugin-lit: "npm:^1.6.1"
+    eslint-plugin-lit: "npm:^1.8.3"
     eslint-plugin-prettier: "npm:^4.2.1"
     eslint-plugin-react: "npm:^7.31.10"
     eslint-plugin-react-hooks: "npm:^4.6.0"
@@ -2097,155 +3062,30 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/feature-flags@npm:^0.7.0":
-  version: 0.7.0
-  resolution: "@carbon/feature-flags@npm:0.7.0"
-  checksum: 1c311913a255b31b47ff19f7a2e6ca0ec0fc2ec103dc58a71f843c9ba3b3e40f58fd40949fa40320b57928ad9ff91a029a869a7ab2f40ce1d07ab7fc2420a24a
+"@carbon/feature-flags@npm:^0.16.0":
+  version: 0.16.0
+  resolution: "@carbon/feature-flags@npm:0.16.0"
+  checksum: d509cfe9d2a1188c0f1f510dd83d204ff55fbd21a1760eeb008ac0c4deba39e55f6c902b826639643b5ca7aa3cd83ee9a1b05cb44b3ee06d72c1efb6bcfa503f
   languageName: node
   linkType: hard
 
-"@carbon/grid@npm:10.43.2, @carbon/grid@npm:^10.43.2":
-  version: 10.43.2
-  resolution: "@carbon/grid@npm:10.43.2"
+"@carbon/grid@npm:^11.18.0":
+  version: 11.18.0
+  resolution: "@carbon/grid@npm:11.18.0"
   dependencies:
-    "@carbon/import-once": "npm:^10.7.0"
-    "@carbon/layout": "npm:^10.37.2"
-  checksum: e48ac03bba30376fc275abfcc429be14463b172500d2e8c347bc1fce66f7775027049bf7eac59ff6406695b9bce169aba168f3787c5cb8837d8c328f00ed1091
+    "@carbon/layout": "npm:^11.18.0"
+  checksum: 038fa279ff539d5d35fea46910bcece5a78aa5593c01e06e49bb768156e33cc0538df1444f05362d5ed57bf8dd2230d31718f32ff8a25c920e8ccc2796244c1b
   languageName: node
   linkType: hard
 
-"@carbon/ibmdotcom-react@workspace:packages/react":
-  version: 0.0.0-use.local
-  resolution: "@carbon/ibmdotcom-react@workspace:packages/react"
+"@carbon/grid@npm:^11.21.0, @carbon/grid@npm:^11.21.1":
+  version: 11.21.1
+  resolution: "@carbon/grid@npm:11.21.1"
   dependencies:
-    "@babel/cli": "npm:~7.12.0"
-    "@babel/core": "npm:~7.12.0"
-    "@babel/plugin-proposal-export-default-from": "npm:~7.12.0"
-    "@babel/plugin-transform-class-properties": "npm:~7.22.5"
-    "@babel/plugin-transform-export-namespace-from": "npm:~7.22.11"
-    "@babel/plugin-transform-private-methods": "npm:~7.22.5"
-    "@babel/plugin-transform-private-property-in-object": "npm:~7.22.11"
-    "@babel/plugin-transform-runtime": "npm:7.18.5"
-    "@babel/preset-env": "npm:~7.23.2"
-    "@babel/preset-react": "npm:~7.12.1"
-    "@babel/runtime": "npm:^7.16.3"
-    "@carbon/ibmdotcom-services": "npm:1.53.0"
-    "@carbon/ibmdotcom-styles": "npm:1.53.0"
-    "@carbon/ibmdotcom-utilities": "npm:1.53.0"
-    "@carbon/icons-react": "npm:10.49.2"
-    "@carbon/pictograms-react": "npm:11.50.0"
-    "@carbon/storybook-addon-theme": "npm:1.44.0"
-    "@carbon/telemetry": "npm:^0.1.0"
-    "@percy-io/in-percy": "npm:^0.1.11"
-    "@percy/cli": "npm:^1.8.1"
-    "@percy/cypress": "npm:^3.1.1"
-    "@percy/dom": "npm:^1.0.5"
-    "@percy/sdk-utils": "npm:^1.0.5"
-    "@percy/storybook": "npm:^4.3.4"
-    "@rollup/plugin-babel": "npm:^5.3.1"
-    "@rollup/plugin-commonjs": "npm:^21.0.3"
-    "@rollup/plugin-json": "npm:^4.1.0"
-    "@rollup/plugin-node-resolve": "npm:^8.4.0"
-    "@rollup/plugin-replace": "npm:^4.0.0"
-    "@storybook/addon-a11y": "npm:^6.5.15"
-    "@storybook/addon-actions": "npm:^6.5.15"
-    "@storybook/addon-docs": "npm:^6.5.15"
-    "@storybook/addon-essentials": "npm:^6.5.15"
-    "@storybook/addon-knobs": "npm:^6.4.0"
-    "@storybook/addon-links": "npm:^6.5.15"
-    "@storybook/addon-storyshots": "npm:^6.5.15"
-    "@storybook/addon-storysource": "npm:^6.5.15"
-    "@storybook/addons": "npm:^6.5.15"
-    "@storybook/builder-webpack5": "npm:^6.5.15"
-    "@storybook/manager-webpack5": "npm:^6.5.15"
-    "@storybook/react": "npm:^6.5.15"
-    "@storybook/source-loader": "npm:^6.5.15"
-    acorn: "npm:^8.0.0"
-    acorn-jsx: "npm:^5.2.0"
-    acorn-jsx-walk: "npm:^2.0.0"
-    acorn-walk: "npm:^8.0.0"
-    all-contributors-cli: "npm:^6.0.0"
-    autoprefixer: "npm:^9.8.8"
-    autosuggest-highlight: "npm:^3.1.1"
-    axe-core: "npm:^4.4.1"
-    babel-jest: "npm:^24.0.0"
-    babel-loader: "npm:^8.0.4"
-    babel-plugin-dev-expression: "npm:^0.2.1"
-    babel-plugin-inline-react-svg: "npm:^1.1.0"
-    babel-plugin-macros: "npm:^3.0.0"
-    babel-plugin-transform-define: "npm:^2.0.0"
-    babel-plugin-transform-inline-environment-variables: "npm:^0.4.0"
-    browserslist-config-carbon: "npm:10.6.1"
-    browserstack-cypress-cli: "npm:^1.11.1"
-    cache-loader: "npm:^4.1.0"
-    carbon-components: "npm:10.58.12"
-    carbon-components-react: "npm:7.59.17"
-    carbon-icons: "npm:7.0.7"
-    chalk: "npm:^4.1.1"
-    classnames: "npm:2.3.2"
-    cli-table: "npm:^0.3.0"
-    commander: "npm:^11.1.0"
-    cross-env: "npm:^7.0.0"
-    css-loader: "npm:^5.2.0"
-    cy2: "npm:^4.0.6"
-    cypress: "npm:~9.7.0"
-    cypress-axe: "npm:^0.14.0"
-    cypress-wait-until: "npm:^1.7.2"
-    doctoc: "npm:^2.0.0"
-    enzyme: "npm:^3.10.0"
-    enzyme-adapter-react-16: "npm:^1.14.0"
-    fast-sass-loader: "npm:2.0.1"
-    file-loader: "npm:^6.2.0"
-    fs-extra: "npm:^10.0.0"
-    gulp: "npm:^4.0.2"
-    gzip-size: "npm:^5.0.0"
-    jest: "npm:25.5.4"
-    jest-circus: "npm:25.5.4"
-    karma: "npm:^6.0.0"
-    karma-accessibility-checker: "npm:^3.1.28"
-    karma-chrome-launcher: "npm:^3.1.0"
-    karma-firefox-launcher: "npm:^2.1.2"
-    karma-jasmine: "npm:^4.0.1"
-    karma-sourcemap-loader: "npm:^0.4.0"
-    karma-spec-reporter: "npm:0.0.36"
-    karma-webpack: "npm:^4.0.2"
-    lodash-es: "npm:^4.17.21"
-    magic-string: "npm:^0.30.0"
-    mini-css-extract-plugin: "npm:~2.7.0"
-    null-loader: "npm:^4.0.0"
-    object-assign: "npm:^4.1.1"
-    postcss-loader: "npm:^3.0.0"
-    promise: "npm:^8.0.1"
-    prop-types: "npm:^15.7.2"
-    raf: "npm:^3.4.1"
-    react: "npm:16.14.0"
-    react-autosuggest: "npm:^10.1.0"
-    react-dom: "npm:16.14.0"
-    requestanimationframe: "npm:^0.0.23"
-    require-context.macro: "npm:^1.0.4"
-    rimraf: "npm:^3.0.0"
-    rollup: "npm:^2.55.1"
-    rollup-plugin-analyzer: "npm:^4.0.0"
-    rollup-plugin-node-builtins: "npm:^2.1.2"
-    rollup-plugin-scss: "npm:^3.0.0"
-    rollup-plugin-sizes: "npm:^1.0.4"
-    rollup-plugin-terser: "npm:^7.0.2"
-    rollup-plugin-visualizer: "npm:^2.5.4"
-    rtlcss: "npm:^3.0.0"
-    sass-loader: "npm:^10.0.0"
-    style-loader: "npm:^2.0.0"
-    temp: "npm:^0.9.0"
-    terser-webpack-plugin: "npm:^4.2.3"
-    through2: "npm:^3.0.0"
-    webpack: "npm:^4.46.0"
-    webpack-dev-server: "npm:^4.0.0"
-    whatwg-fetch: "npm:^2.0.3"
-    window-or-global: "npm:^1.0.1"
-  peerDependencies:
-    react: ^16.14.0 || ^17.0.2
-    react-dom: ^16.14.0 || ^17.0.2
-  languageName: unknown
-  linkType: soft
+    "@carbon/layout": "npm:^11.20.1"
+  checksum: 15c466377fd4f5e62843c78a9ade465f80adbe5ee2af568efa388a6284e9d4e5722ca42f6670ba30774db9660f4adc8a60a25cd8c366c6d3e739d40e54829568
+  languageName: node
+  linkType: hard
 
 "@carbon/ibmdotcom-services-store@npm:1.53.0, @carbon/ibmdotcom-services-store@workspace:packages/services-store":
   version: 0.0.0-use.local
@@ -2284,7 +3124,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-services@npm:1.53.0, @carbon/ibmdotcom-services@workspace:packages/services":
+"@carbon/ibmdotcom-services@npm:1.53.0":
+  version: 1.53.0
+  resolution: "@carbon/ibmdotcom-services@npm:1.53.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.16.3"
+    "@carbon/ibmdotcom-utilities": "npm:1.53.0"
+    "@carbon/telemetry": "npm:0.1.0"
+    axios: "npm:^0.27.2"
+    marked: "npm:^4.0.10"
+    window-or-global: "npm:^1.0.1"
+  checksum: 0a7631ea6ebf75c1a872a29c0cc8bbf7c222d5fa6a3b36aa56e64463aec6577278ad0e1e805d88ad3a14db17833dc427b9ff74fca3dc7b2c10329b5560345dc5
+  languageName: node
+  linkType: hard
+
+"@carbon/ibmdotcom-services@npm:2.0.0-rc.2, @carbon/ibmdotcom-services@workspace:packages/services":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-services@workspace:packages/services"
   dependencies:
@@ -2297,7 +3151,7 @@ __metadata:
     "@babel/plugin-transform-runtime": "npm:7.18.5"
     "@babel/preset-env": "npm:~7.23.2"
     "@babel/runtime": "npm:^7.16.3"
-    "@carbon/ibmdotcom-utilities": "npm:1.53.0"
+    "@carbon/ibmdotcom-utilities": "npm:2.0.0-rc.2"
     "@carbon/telemetry": "npm:0.1.0"
     "@rollup/plugin-babel": "npm:^5.3.1"
     "@rollup/plugin-commonjs": "npm:^21.0.3"
@@ -2331,20 +3185,16 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-styles@npm:1.53.0, @carbon/ibmdotcom-styles@workspace:packages/styles":
+"@carbon/ibmdotcom-styles@npm:2.0.0-rc.2, @carbon/ibmdotcom-styles@workspace:packages/styles":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-styles@workspace:packages/styles"
   dependencies:
-    "@carbon/grid": "npm:10.43.2"
-    "@carbon/icons-react": "npm:10.49.2"
-    "@carbon/import-once": "npm:10.7.0"
-    "@carbon/layout": "npm:10.37.2"
-    "@carbon/motion": "npm:10.29.2"
+    "@carbon/icons-react": "npm:^11.21.0"
+    "@carbon/layout": "npm:^11.20.0"
+    "@carbon/styles": "npm:^1.36.0"
     "@carbon/telemetry": "npm:0.1.0"
-    "@carbon/themes": "npm:10.55.3"
-    "@carbon/type": "npm:10.45.3"
-    carbon-components: "npm:10.58.12"
-    carbon-components-react: "npm:7.59.17"
+    "@carbon/themes": "npm:^11.20.0"
+    "@carbon/type": "npm:^11.25.0"
     del: "npm:^6.0.0"
     gulp: "npm:^4.0.2"
     gulp-autoprefixer: "npm:^6.1.0"
@@ -2352,12 +3202,29 @@ __metadata:
     gulp-rename: "npm:^2.0.0"
     gulp-rtlcss: "npm:^1.4.1"
     gulp-sass: "npm:^5.0.0"
-    node-sass: "npm:^8.0.0"
     require-dir: "npm:^1.2.0"
+    sass: "npm:~1.69.5"
+    sass-loader: "npm:^13.0.0"
   languageName: unknown
   linkType: soft
 
-"@carbon/ibmdotcom-utilities@npm:1.53.0, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
+"@carbon/ibmdotcom-utilities@npm:1.53.0":
+  version: 1.53.0
+  resolution: "@carbon/ibmdotcom-utilities@npm:1.53.0"
+  dependencies:
+    "@carbon/telemetry": "npm:0.1.0"
+    axios: "npm:^0.27.2"
+    carbon-components: "npm:10.58.12"
+    isomorphic-dompurify: "npm:0.27.0"
+    js-cookie: "npm:^2.2.1"
+    marked: "npm:^4.0.10"
+    striptags: "npm:^3.2.0"
+    window-or-global: "npm:^1.0.1"
+  checksum: 77dfdb18543c3b745174df315f227f0d24114d404365696c62e51faa4fd87299dd6ca7dfa6295f5c05dbac6a9ff0e776557c02f5f798bc11ddc2a8e84a14f333
+  languageName: node
+  linkType: hard
+
+"@carbon/ibmdotcom-utilities@npm:2.0.0-rc.2, @carbon/ibmdotcom-utilities@workspace:packages/utilities":
   version: 0.0.0-use.local
   resolution: "@carbon/ibmdotcom-utilities@workspace:packages/utilities"
   dependencies:
@@ -2381,7 +3248,6 @@ __metadata:
     babel-plugin-dev-expression: "npm:^0.2.1"
     babel-polyfill: "npm:^6.26.0"
     browserslist-config-carbon: "npm:10.6.1"
-    carbon-components: "npm:10.58.12"
     chalk: "npm:^4.1.1"
     cli-table: "npm:^0.3.0"
     gzip-size: "npm:^5.0.0"
@@ -2423,18 +3289,21 @@ __metadata:
     "@babel/preset-react": "npm:~7.12.1"
     "@babel/template": "npm:~7.12.0"
     "@babel/traverse": "npm:~7.23.0"
-    "@carbon/ibmdotcom-services": "npm:1.53.0"
+    "@carbon/ibmdotcom-services": "npm:2.0.0-rc.2"
     "@carbon/ibmdotcom-services-store": "npm:1.53.0"
-    "@carbon/ibmdotcom-styles": "npm:1.53.0"
-    "@carbon/ibmdotcom-utilities": "npm:1.53.0"
+    "@carbon/ibmdotcom-styles": "npm:2.0.0-rc.2"
+    "@carbon/ibmdotcom-utilities": "npm:2.0.0-rc.2"
     "@carbon/icon-helpers": "npm:10.45.1"
-    "@carbon/icons": "npm:10.48.2"
+    "@carbon/icons": "npm:^11.23.0"
     "@carbon/icons-react": "npm:10.49.2"
-    "@carbon/layout": "npm:10.37.2"
+    "@carbon/layout": "npm:^11.20.0"
     "@carbon/motion": "npm:^11.0.0"
+    "@carbon/pictograms-react": "npm:11.45.2"
+    "@carbon/react": "npm:^1.36.0"
+    "@carbon/styles": "npm:^1.36.0"
     "@carbon/telemetry": "npm:0.1.0"
-    "@carbon/type": "npm:10.45.3"
-    "@carbon/web-components": "npm:1.34.0"
+    "@carbon/type": "npm:^11.25.0"
+    "@carbon/web-components": "npm:2.0.1"
     "@open-wc/semantic-dom-diff": "npm:~0.18.0"
     "@percy-io/in-percy": "npm:^0.1.11"
     "@percy/cli": "npm:^1.8.1"
@@ -2469,7 +3338,7 @@ __metadata:
     babel-plugin-template-html-minifier: "npm:^4.1.0"
     browserstack-cypress-cli: "npm:^1.11.1"
     cache-loader: "npm:^4.1.0"
-    carbon-components: "npm:10.58.12"
+    carbon-icons: "npm:^7.0.5"
     chalk: "npm:^4.1.1"
     classnames: "npm:2.3.2"
     commander: "npm:^11.1.0"
@@ -2483,6 +3352,7 @@ __metadata:
     del: "npm:^6.0.0"
     doctoc: "npm:^2.0.0"
     dompurify: "npm:^2.0.0"
+    enzyme: "npm:^3.11.0"
     file-loader: "npm:^6.2.0"
     fs-extra: "npm:^10.0.0"
     gulp: "npm:^4.0.2"
@@ -2509,8 +3379,7 @@ __metadata:
     karma-sourcemap-loader: "npm:^0.4.0"
     karma-spec-reporter: "npm:0.0.36"
     karma-webpack: "npm:^4.0.2"
-    lit-element: "npm:^2.5.1"
-    lit-html: "npm:^1.4.1"
+    lit: "npm:^2.7.6"
     lodash-es: "npm:^4.17.21"
     lodash.pickby: "npm:^4.6.0"
     magic-string: "npm:^0.30.0"
@@ -2566,14 +3435,21 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/icon-helpers@npm:10.45.1, @carbon/icon-helpers@npm:^10.28.0, @carbon/icon-helpers@npm:^10.28.2, @carbon/icon-helpers@npm:^10.44.0":
+"@carbon/icon-helpers@npm:10.45.1, @carbon/icon-helpers@npm:^10.28.0, @carbon/icon-helpers@npm:^10.28.2, @carbon/icon-helpers@npm:^10.45.0":
   version: 10.45.1
   resolution: "@carbon/icon-helpers@npm:10.45.1"
   checksum: 69da5ae85b586c5bb754f1db90069fb48f556c9f5023318a25572faa07e6dca0f07aaec237eaec883029bb75819b64c30bf4716339cdbab590ca0ee648ef67bc
   languageName: node
   linkType: hard
 
-"@carbon/icons-react@npm:10.49.2, @carbon/icons-react@npm:^10.49.2":
+"@carbon/icon-helpers@npm:^10.42.1, @carbon/icon-helpers@npm:^10.43.1":
+  version: 10.44.0
+  resolution: "@carbon/icon-helpers@npm:10.44.0"
+  checksum: 39416c98510815f235ff9189161521e952a7800ac968b58c1c2764da1a1b730e13447b595a9a30bff34de74414eeea35c723422524cfb42f4a583e5c576aa90a
+  languageName: node
+  linkType: hard
+
+"@carbon/icons-react@npm:10.49.2":
   version: 10.49.2
   resolution: "@carbon/icons-react@npm:10.49.2"
   dependencies:
@@ -2586,55 +3462,121 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/icons@npm:10.48.2, @carbon/icons@npm:^10.48.0":
+"@carbon/icons-react@npm:^11.21.0":
+  version: 11.23.1
+  resolution: "@carbon/icons-react@npm:11.23.1"
+  dependencies:
+    "@carbon/icon-helpers": "npm:^10.43.1"
+    "@carbon/telemetry": "npm:0.1.0"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16"
+  checksum: 73622aafbe11c31da735f1117525406bf0e09d839e6935d31f01095ca678114535eac075659c3903ae08f247f76be973e4a0bad0596f56e6f237a7139f9b1ef2
+  languageName: node
+  linkType: hard
+
+"@carbon/icons-react@npm:^11.30.0":
+  version: 11.30.0
+  resolution: "@carbon/icons-react@npm:11.30.0"
+  dependencies:
+    "@carbon/icon-helpers": "npm:^10.45.0"
+    "@carbon/telemetry": "npm:0.1.0"
+    prop-types: "npm:^15.7.2"
+  peerDependencies:
+    react: ">=16"
+  checksum: efaa859629eaa52d2aa0972b32e72ed24cbeabbf13d12d0b8756ce0fd21fbf233e93690f736ef62c1db0e4af5c23734b705b6d3c08ea00f4ec1d1586f4ae117c
+  languageName: node
+  linkType: hard
+
+"@carbon/icons@npm:^10.48.0":
   version: 10.48.2
   resolution: "@carbon/icons@npm:10.48.2"
   checksum: d483a8857fccbd19de7e460ec769856b8869a3f13db53e1934d59a1fd44f0e1478982430f5527896de060c5f4712d815e3876fa1c70328779b8565a6f6217afe
   languageName: node
   linkType: hard
 
-"@carbon/import-once@npm:10.7.0, @carbon/import-once@npm:^10.7.0":
-  version: 10.7.0
-  resolution: "@carbon/import-once@npm:10.7.0"
-  checksum: 6a6b41910e3f7cc3333aef4b35f84c97255815a22d66de21cd9280122dcf9fb21ea654844d5f907ea1358aacd43a90a42a349a569e183137d823b44b37512d9e
+"@carbon/icons@npm:^11.23.0":
+  version: 11.24.0
+  resolution: "@carbon/icons@npm:11.24.0"
+  checksum: 368422ff42951b89c5dd89667769ce6b1efb35e475170765a4a3bc93be0da9d2bb702c7490075f77c5683ac0ab40e2974793059fb41bb6c3574507d3f3af6050
   languageName: node
   linkType: hard
 
-"@carbon/layout@npm:10.37.2, @carbon/layout@npm:^10.37.2":
-  version: 10.37.2
-  resolution: "@carbon/layout@npm:10.37.2"
-  checksum: 518bfae4771fc9a648ed7f50d67f8d2c20c21be24895640ffb80bb762a41307863b3642b2ada3f25e07904f7f89dd20ba49f079cc81ea81f13195ae337da0c83
+"@carbon/layout@npm:^11.18.0":
+  version: 11.18.0
+  resolution: "@carbon/layout@npm:11.18.0"
+  checksum: e8a801cd0a4915f7f2092532095c86078ee86b48e2fbb0b918e88193648ed7d22450be8f6b213f053f93572c36e482f4350a49583b098deb5bb28812668328a9
   languageName: node
   linkType: hard
 
-"@carbon/motion@npm:10.29.2":
-  version: 10.29.2
-  resolution: "@carbon/motion@npm:10.29.2"
-  checksum: 4fa3ff38d161722a22f6c504d5b8ef5ea431f444ce61e1f7004ba5b0c33a4a5e8df937ded633e95bb39466b33599609f6414258eee23088bacd7151dbac621fb
+"@carbon/layout@npm:^11.20.0, @carbon/layout@npm:^11.20.1":
+  version: 11.20.1
+  resolution: "@carbon/layout@npm:11.20.1"
+  checksum: f284fae1aded5ed8ade21602b284d54f2142d0040f74a9b74516077413fc43d019a86747bed046b944399e410ad4f16599786c9c0363eff9165d46615e6d6200
   languageName: node
   linkType: hard
 
 "@carbon/motion@npm:^11.0.0":
+  version: 11.15.0
+  resolution: "@carbon/motion@npm:11.15.0"
+  checksum: b2b85ca949bb363b56594afae00a2a27a88586eb0970567ef7b9718e654440f7b42718aedf7fe1d6b21f64883367929eed4667cb8c07eace117c1720f6428f2b
+  languageName: node
+  linkType: hard
+
+"@carbon/motion@npm:^11.16.0, @carbon/motion@npm:^11.16.1":
   version: 11.16.1
   resolution: "@carbon/motion@npm:11.16.1"
   checksum: 6465569000e40bbd37d48b7011169897b6588356988200d0919a059337732916797a90752b52268c3dc30934e00bcd4d8e1d24e79d20080c465c70f4a7072c21
   languageName: node
   linkType: hard
 
-"@carbon/pictograms-react@npm:11.50.0":
-  version: 11.50.0
-  resolution: "@carbon/pictograms-react@npm:11.50.0"
+"@carbon/pictograms-react@npm:11.45.2":
+  version: 11.45.2
+  resolution: "@carbon/pictograms-react@npm:11.45.2"
   dependencies:
-    "@carbon/icon-helpers": "npm:^10.44.0"
+    "@carbon/icon-helpers": "npm:^10.42.1"
     "@carbon/telemetry": "npm:0.1.0"
     prop-types: "npm:^15.7.2"
   peerDependencies:
     react: ">=16"
-  checksum: f7901ca51f5d900bcda14dff87af2d556ca6a9fcb329e2f3edaa4312f48591e74a652532df96bda4cbc7172d20eb38bb2deb54216e4e8e358668744dfb217d9c
+  checksum: 60321e88cbd6de40873be48dcd041d3a4587f4481f324506c07747b8fc808367cc744275d00f02ac0e16acd7aeaf499f916347c2ab9c1c1955055d99792481e0
   languageName: node
   linkType: hard
 
-"@carbon/storybook-addon-theme@npm:1.44.0, @carbon/storybook-addon-theme@workspace:packages/storybook-addon-theme":
+"@carbon/react@npm:^1.36.0":
+  version: 1.42.0
+  resolution: "@carbon/react@npm:1.42.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.18.3"
+    "@carbon/feature-flags": "npm:^0.16.0"
+    "@carbon/icons-react": "npm:^11.30.0"
+    "@carbon/layout": "npm:^11.20.0"
+    "@carbon/styles": "npm:^1.42.0"
+    "@carbon/telemetry": "npm:0.1.0"
+    classnames: "npm:2.3.2"
+    copy-to-clipboard: "npm:^3.3.1"
+    downshift: "npm:8.2.2"
+    flatpickr: "npm:4.6.9"
+    invariant: "npm:^2.2.3"
+    lodash.debounce: "npm:^4.0.8"
+    lodash.findlast: "npm:^4.5.0"
+    lodash.isequal: "npm:^4.5.0"
+    lodash.omit: "npm:^4.5.0"
+    lodash.throttle: "npm:^4.1.1"
+    prop-types: "npm:^15.7.2"
+    react-is: "npm:^18.2.0"
+    use-resize-observer: "npm:^6.0.0"
+    wicg-inert: "npm:^3.1.1"
+    window-or-global: "npm:^1.0.1"
+  peerDependencies:
+    react: ^16.8.6 || ^17.0.1 || ^18.2.0
+    react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0
+    sass: ^1.33.0
+  checksum: fe47eee3eea4b23531c970b46eaa10f55eac57b84510df47af73e810386219e8490637bf1cdf4c1d8158bd22502dad98539c36ce4ba04343355a90217935d144
+  languageName: node
+  linkType: hard
+
+"@carbon/storybook-addon-theme@workspace:packages/storybook-addon-theme":
   version: 0.0.0-use.local
   resolution: "@carbon/storybook-addon-theme@workspace:packages/storybook-addon-theme"
   dependencies:
@@ -2661,7 +3603,49 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@carbon/telemetry@npm:0.1.0, @carbon/telemetry@npm:^0.1.0":
+"@carbon/styles@npm:^1.36.0":
+  version: 1.41.2
+  resolution: "@carbon/styles@npm:1.41.2"
+  dependencies:
+    "@carbon/colors": "npm:^11.20.1"
+    "@carbon/feature-flags": "npm:^0.16.0"
+    "@carbon/grid": "npm:^11.21.1"
+    "@carbon/layout": "npm:^11.20.1"
+    "@carbon/motion": "npm:^11.16.1"
+    "@carbon/themes": "npm:^11.26.1"
+    "@carbon/type": "npm:^11.25.1"
+    "@ibm/plex": "npm:6.0.0-next.6"
+  peerDependencies:
+    sass: ^1.33.0
+  peerDependenciesMeta:
+    sass:
+      optional: true
+  checksum: 17a40e688c290cad06ad822caeed3ac9e76b92da196460b9acdde3d7d92ff2935a6e72fa300f619fd7fe6412c2a9a86f21776a112ac08b99b6fc4ec6c0c1fa19
+  languageName: node
+  linkType: hard
+
+"@carbon/styles@npm:^1.42.0":
+  version: 1.42.0
+  resolution: "@carbon/styles@npm:1.42.0"
+  dependencies:
+    "@carbon/colors": "npm:^11.20.0"
+    "@carbon/feature-flags": "npm:^0.16.0"
+    "@carbon/grid": "npm:^11.21.0"
+    "@carbon/layout": "npm:^11.20.0"
+    "@carbon/motion": "npm:^11.16.0"
+    "@carbon/themes": "npm:^11.27.0"
+    "@carbon/type": "npm:^11.25.0"
+    "@ibm/plex": "npm:6.0.0-next.6"
+  peerDependencies:
+    sass: ^1.33.0
+  peerDependenciesMeta:
+    sass:
+      optional: true
+  checksum: beaf7bd8ae5ebe7da3dacdf2bb203aa742879f28888b4c89f875d5d3b3d3d6bf267e5e0a06937369a10c35b1525941bfcfb7900b901d6526e475d99d797d1cc7
+  languageName: node
+  linkType: hard
+
+"@carbon/telemetry@npm:0.1.0":
   version: 0.1.0
   resolution: "@carbon/telemetry@npm:0.1.0"
   bin:
@@ -2670,29 +3654,63 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/themes@npm:10.55.3":
-  version: 10.55.3
-  resolution: "@carbon/themes@npm:10.55.3"
+"@carbon/themes@npm:^11.20.0":
+  version: 11.23.0
+  resolution: "@carbon/themes@npm:11.23.0"
+  dependencies:
+    "@carbon/colors": "npm:^11.19.0"
+    "@carbon/layout": "npm:^11.18.0"
+    "@carbon/type": "npm:^11.22.0"
+    color: "npm:^4.0.0"
+  checksum: 1e4bdf6bab3848beb5771a5404fd0b099f09824306541ffd2386c718ad835cc9d87213ac5411290b05af47c700329a53f0f7c761e4fbcc3a609f5dac982a73da
+  languageName: node
+  linkType: hard
+
+"@carbon/themes@npm:^11.26.1":
+  version: 11.26.1
+  resolution: "@carbon/themes@npm:11.26.1"
+  dependencies:
+    "@carbon/colors": "npm:^11.20.1"
+    "@carbon/layout": "npm:^11.20.1"
+    "@carbon/type": "npm:^11.25.1"
+    color: "npm:^4.0.0"
+  checksum: 59c1055ffa037f68420097a49914792b00552c80819c7a10b446aaacd35f94efeeb082dfaedfe23443d6bda65f4fcfce40de79a13a3b356b8d429e9153cb1a7d
+  languageName: node
+  linkType: hard
+
+"@carbon/themes@npm:^11.27.0":
+  version: 11.27.0
+  resolution: "@carbon/themes@npm:11.27.0"
   dependencies:
-    "@carbon/colors": "npm:^10.37.2"
-    "@carbon/layout": "npm:^10.37.2"
-    "@carbon/type": "npm:^10.45.3"
-    color: "npm:^3.1.2"
-  checksum: db42187f05b31206f05a9a9607af8c1af08249191774862819c651e656d972df801aef5336cc78082d1ed7a765a4e6e9ec35c5cc9ee27ec877f753b8bc389e61
+    "@carbon/colors": "npm:^11.20.0"
+    "@carbon/layout": "npm:^11.20.0"
+    "@carbon/type": "npm:^11.25.0"
+    color: "npm:^4.0.0"
+  checksum: 8d49fd5fe7f0354f2ebc2deea9b0ff1867cdcc9ba3a443d7dd1c7c9fd8a9fd027c813d0103d0626de6ada6bb9010cad97d4228d5cdc8dcda4ee93e79d9aded65
   languageName: node
   linkType: hard
 
-"@carbon/type@npm:10.45.3, @carbon/type@npm:^10.45.3":
-  version: 10.45.3
-  resolution: "@carbon/type@npm:10.45.3"
+"@carbon/type@npm:^11.22.0":
+  version: 11.22.0
+  resolution: "@carbon/type@npm:11.22.0"
   dependencies:
-    "@carbon/grid": "npm:^10.43.2"
-    "@carbon/import-once": "npm:^10.7.0"
-  checksum: eeb2272b297ad9e35dbd8b5cd4bae1543f40149ea9888d6e1a01db1d6b49e1e909801d106dfda81aa4f55df0483fa3ee9fe8646c08adfbef990363519669429e
+    "@carbon/grid": "npm:^11.18.0"
+    "@carbon/layout": "npm:^11.18.0"
+  checksum: 953d995b233456148307787d7c36d9db07732181f9399a7e93a34c196be0c24080d36a66a35a14aef71d3ba7c5e533e325ace71e069594edd804dfaa3f85823e
   languageName: node
   linkType: hard
 
-"@carbon/web-components@npm:1.34.0, @carbon/web-components@workspace:packages/carbon-web-components":
+"@carbon/type@npm:^11.25.0, @carbon/type@npm:^11.25.1":
+  version: 11.25.1
+  resolution: "@carbon/type@npm:11.25.1"
+  dependencies:
+    "@carbon/grid": "npm:^11.21.1"
+    "@carbon/layout": "npm:^11.20.1"
+  checksum: 3e8043b2f1bd2b3cd04a8c65b0c44c109a8b6a1e77eb5a7eb62f16c8e0c84963200439712ccccbcad4f16ddf8ce245667f63b05dded3927e0f71a34ba0dc3ec4
+  languageName: node
+  linkType: hard
+
+"@carbon/web-components@npm:2.0.1, @carbon/web-components@workspace:packages/carbon-web-components":
   version: 0.0.0-use.local
   resolution: "@carbon/web-components@workspace:packages/carbon-web-components"
   dependencies:
@@ -2713,6 +3731,7 @@ __metadata:
     "@babel/traverse": "npm:~7.23.0"
     "@carbon/icon-helpers": "npm:^10.28.0"
     "@carbon/icons": "npm:^10.48.0"
+    "@carbon/styles": "npm:^1.42.0"
     "@open-wc/semantic-dom-diff": "npm:~0.18.0"
     "@percy-io/in-percy": "npm:^0.1.11"
     "@percy/cli": "npm:^1.8.1"
@@ -2724,13 +3743,12 @@ __metadata:
     "@rollup/plugin-replace": "npm:^4.0.0"
     "@rollup/plugin-terser": "npm:^0.4.3"
     "@rollup/pluginutils": "npm:^4.2.0"
+    "@storybook/addon-a11y": "npm:^6.5.15"
     "@storybook/addon-actions": "npm:^6.5.15"
     "@storybook/addon-docs": "npm:^6.5.15"
     "@storybook/addon-essentials": "npm:^6.5.15"
     "@storybook/addon-knobs": "npm:^6.4.0"
-    "@storybook/addon-links": "npm:^6.5.15"
     "@storybook/addon-storysource": "npm:^6.5.15"
-    "@storybook/source-loader": "npm:^6.5.15"
     "@storybook/web-components": "npm:^6.5.15"
     "@types/bluebird": "npm:^3.5.36"
     "@types/jasmine": "npm:^3.10.2"
@@ -2750,7 +3768,6 @@ __metadata:
     babel-loader: "npm:^8.0.4"
     babel-plugin-template-html-minifier: "npm:^4.1.0"
     cache-loader: "npm:^4.1.0"
-    carbon-components: "npm:10.58.3"
     child-process-promise: "npm:^2.2.1"
     commander: "npm:^4.1.0"
     core-js: "npm:^3.19.1"
@@ -2764,7 +3781,7 @@ __metadata:
     expect-playwright: "npm:~0.8.0"
     expect-puppeteer: "npm:^6.0.0"
     file-loader: "npm:^6.2.0"
-    flatpickr: "npm:4.6.13"
+    flatpickr: "npm:4.6.1"
     fs-extra: "npm:^10.0.0"
     gulp: "npm:^4.0.2"
     gulp-babel: "npm:^8.0.0"
@@ -2797,8 +3814,7 @@ __metadata:
     karma-sourcemap-loader: "npm:^0.4.0"
     karma-spec-reporter: "npm:0.0.36"
     karma-webpack: "npm:^4.0.2"
-    lit-element: "npm:^2.5.1"
-    lit-html: "npm:^1.4.1"
+    lit: "npm:^2.7.6"
     lodash-es: "npm:^4.17.21"
     magic-string: "npm:^0.30.0"
     mini-css-extract-plugin: "npm:~2.7.0"
@@ -3269,16 +4285,16 @@ __metadata:
   linkType: hard
 
 "@eslint-community/regexpp@npm:^4.4.0":
-  version: 4.10.0
-  resolution: "@eslint-community/regexpp@npm:4.10.0"
-  checksum: 8c36169c815fc5d726078e8c71a5b592957ee60d08c6470f9ce0187c8046af1a00afbda0a065cc40ff18d5d83f82aed9793c6818f7304a74a7488dc9f3ecbd42
+  version: 4.6.2
+  resolution: "@eslint-community/regexpp@npm:4.6.2"
+  checksum: 59ea2fa13a70996a8cebbd5a9f4499c92bceeff872286ef2fb34948fcfb9d3467692371d9cc116e7d613f2c18086a1c8337c9d461ccdf213f0dc47f6f6d2fbb6
   languageName: node
   linkType: hard
 
-"@fastify/busboy@npm:^2.0.0":
-  version: 2.1.0
-  resolution: "@fastify/busboy@npm:2.1.0"
-  checksum: f22c1e5c52dc350ddf9ba8be9f87b48d3ea5af00a37fd0a0d1e3e4b37f94d96763e514c68a350c7f570260fdd2f08b55ee090cdd879f92a03249eb0e3fd19113
+"@fastify/deepmerge@npm:^1.0.0":
+  version: 1.3.0
+  resolution: "@fastify/deepmerge@npm:1.3.0"
+  checksum: 6ddfc230ed46bfb158dbf83c2cc7f6119c9c1afb96d885cf5d95ac17b56126d04eef83ddb1ee7a1b044e65a128c76ebf8b391a26490b19f5812fa0d2d2a3a675
   languageName: node
   linkType: hard
 
@@ -3390,6 +4406,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ibm/plex@npm:6.0.0-next.6":
+  version: 6.0.0-next.6
+  resolution: "@ibm/plex@npm:6.0.0-next.6"
+  checksum: 1a814759646855a01aa0e76fd3bb76ff3ce67e6eee3173a89faeb9ab2df9147319cf2f6e4e711ffd7e2b253e1e1046a0fc4dd54c4cf11c91addc8a25f00509de
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -3540,12 +4563,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/expect-utils@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "@jest/expect-utils@npm:29.7.0"
+"@jest/expect-utils@npm:^29.6.2":
+  version: 29.6.2
+  resolution: "@jest/expect-utils@npm:29.6.2"
   dependencies:
-    jest-get-type: "npm:^29.6.3"
-  checksum: ef8d379778ef574a17bde2801a6f4469f8022a46a5f9e385191dc73bb1fc318996beaed4513fbd7055c2847227a1bed2469977821866534593a6e52a281499ee
+    jest-get-type: "npm:^29.4.3"
+  checksum: 5ad8884dafa9320ff454f5898d5f79d540f3cbab86aa8b0260351081094bcbcd6bb056e4fc6aac1147f0ec3dda634b8b3491abc0035cdc28a71ff9ded8aad359
   languageName: node
   linkType: hard
 
@@ -3659,7 +4682,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/schemas@npm:^29.4.3, @jest/schemas@npm:^29.6.3":
+"@jest/schemas@npm:^29.4.3":
   version: 29.6.3
   resolution: "@jest/schemas@npm:29.6.3"
   dependencies:
@@ -3668,6 +4691,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@jest/schemas@npm:^29.6.0":
+  version: 29.6.0
+  resolution: "@jest/schemas@npm:29.6.0"
+  dependencies:
+    "@sinclair/typebox": "npm:^0.27.8"
+  checksum: c00511c69cf89138a7d974404d3a5060af375b5a52b9c87215d91873129b382ca11c1ff25bd6d605951404bb381ddce5f8091004a61e76457da35db1f5c51365
+  languageName: node
+  linkType: hard
+
 "@jest/source-map@npm:^24.9.0":
   version: 24.9.0
   resolution: "@jest/source-map@npm:24.9.0"
@@ -3882,17 +4914,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "@jest/types@npm:29.6.3"
+"@jest/types@npm:^29.6.1":
+  version: 29.6.1
+  resolution: "@jest/types@npm:29.6.1"
   dependencies:
-    "@jest/schemas": "npm:^29.6.3"
+    "@jest/schemas": "npm:^29.6.0"
     "@types/istanbul-lib-coverage": "npm:^2.0.0"
     "@types/istanbul-reports": "npm:^3.0.0"
     "@types/node": "npm:*"
     "@types/yargs": "npm:^17.0.8"
     chalk: "npm:^4.0.0"
-  checksum: f74bf512fd09bbe2433a2ad460b04668b7075235eea9a0c77d6a42222c10a79b9747dc2b2a623f140ed40d6865a2ed8f538f3cbb75169120ea863f29a7ed76cd
+  checksum: f6264fb0fc60efcb95adf3c4b30be6433aae75769b4f90d09de35fb19c65f7184d6c227a75f5b9e0054368d4fbf5cc4b397f9756d9a59eee25f3247d2e020f93
   languageName: node
   linkType: hard
 
@@ -3949,12 +4981,12 @@ __metadata:
   linkType: hard
 
 "@jridgewell/trace-mapping@npm:^0.3.12, @jridgewell/trace-mapping@npm:^0.3.17, @jridgewell/trace-mapping@npm:^0.3.9":
-  version: 0.3.20
-  resolution: "@jridgewell/trace-mapping@npm:0.3.20"
+  version: 0.3.19
+  resolution: "@jridgewell/trace-mapping@npm:0.3.19"
   dependencies:
     "@jridgewell/resolve-uri": "npm:^3.1.0"
     "@jridgewell/sourcemap-codec": "npm:^1.4.14"
-  checksum: 683117e4e6707ef50c725d6d0ec4234687ff751f36fa46c2b3068931eb6a86b49af374d3030200777666579a992b7470d1bd1c591e9bf64d764dda5295f33093
+  checksum: 06a2a4e26e3cc369c41144fad7cbee29ba9ea6aca85acc565ec8f2110e298fdbf93986e17da815afae94539dcc03115cdbdbb575d3bea356e167da6987531e4d
   languageName: node
   linkType: hard
 
@@ -4067,6 +5099,22 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@lit-labs/ssr-dom-shim@npm:^1.0.0, @lit-labs/ssr-dom-shim@npm:^1.1.0":
+  version: 1.1.1
+  resolution: "@lit-labs/ssr-dom-shim@npm:1.1.1"
+  checksum: f401a2bc7170ba8d0d81f2613905793bc661a377a62279b9d470123ec59696186270a8786d4cd40ebf726cd6a41d883fb5a56e6907cb4e737dae4c99f50dca81
+  languageName: node
+  linkType: hard
+
+"@lit/reactive-element@npm:^1.3.0, @lit/reactive-element@npm:^1.6.0":
+  version: 1.6.2
+  resolution: "@lit/reactive-element@npm:1.6.2"
+  dependencies:
+    "@lit-labs/ssr-dom-shim": "npm:^1.0.0"
+  checksum: 765c38691743e3729a4e7511cb5ff2fcb105321805dedfdc43d214b137d45a8050640a3e235a23e1008e7d8642308a14cb6f20fe716c0a08d1f3db3abae6549b
+  languageName: node
+  linkType: hard
+
 "@mdx-js/mdx@npm:^1.6.22":
   version: 1.6.22
   resolution: "@mdx-js/mdx@npm:1.6.22"
@@ -4384,11 +5432,11 @@ __metadata:
   linkType: hard
 
 "@npmcli/query@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "@npmcli/query@npm:3.0.1"
+  version: 3.0.0
+  resolution: "@npmcli/query@npm:3.0.0"
   dependencies:
     postcss-selector-parser: "npm:^6.0.10"
-  checksum: 8e5ac95fc145101fc33288d434c5d50d19fb31b1068140fae8777fd76f407ab9e54feb7c7e8465d367cc25c2a06da6172c81476095fb6ef8781e1d28d1c82e25
+  checksum: 7d8e2984f9651e6b2d9fb9662806a9a99546fe5ef178a3748c423eda7bd7ff49a9c755f8015d5c512ccea9972af5701d7e9e1a61fd110ada061af2d31e419205
   languageName: node
   linkType: hard
 
@@ -4428,17 +5476,17 @@ __metadata:
   linkType: hard
 
 "@nrwl/devkit@npm:>=15.5.2 < 16":
-  version: 15.9.7
-  resolution: "@nrwl/devkit@npm:15.9.7"
+  version: 15.9.4
+  resolution: "@nrwl/devkit@npm:15.9.4"
   dependencies:
     ejs: "npm:^3.1.7"
     ignore: "npm:^5.0.4"
-    semver: "npm:7.5.4"
+    semver: "npm:7.3.4"
     tmp: "npm:~0.2.1"
     tslib: "npm:^2.3.0"
   peerDependencies:
     nx: ">= 14.1 <= 16"
-  checksum: a76469275e8a9f62b47a2ff8252da3c1528fdf95a4f0a40701b8780b640e6bb305ad41c5044c9476c10b0934c09926d111d256e7683949633bbd3a7dd64c1f2e
+  checksum: 602273718627ab16edda5e2521f01a2ff4920ed0d1766796813248a94b37d8e27714719e2393cd66ccee4fd86413428586c55b3ce9d0b40902d07d6ad9c0c7b0
   languageName: node
   linkType: hard
 
@@ -4575,9 +5623,9 @@ __metadata:
   linkType: hard
 
 "@octokit/openapi-types@npm:^18.0.0":
-  version: 18.1.1
-  resolution: "@octokit/openapi-types@npm:18.1.1"
-  checksum: bd2920a238f74c6ccc1e2ee916bd3e17adeeef3bbb1726f821b8722dceaeff5ea2786b3170cc25dd51775cb9179d3cdf448a3526e70b8a1fc21cdd8aa52e5d4c
+  version: 18.0.0
+  resolution: "@octokit/openapi-types@npm:18.0.0"
+  checksum: 5d4aa6abab9b67585bc8496afca4c6377ea1ffccfa17acacd325cefb5fd825799e1d292b498b34023093088b65571c201f4f7e3ba1d3248352f247a1801f6570
   languageName: node
   linkType: hard
 
@@ -4711,26 +5759,39 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@percy/cli-app@npm:1.27.4":
-  version: 1.27.4
-  resolution: "@percy/cli-app@npm:1.27.4"
+"@percy/cli-app@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-app@npm:1.26.3"
   dependencies:
-    "@percy/cli-command": "npm:1.27.4"
-    "@percy/cli-exec": "npm:1.27.4"
-  checksum: 2ea94a51364bff570ff1874af637f581c03041df67fa7240d707d2988db59f5e664be33984afd3b80f7ebd305d4e784ff377e96c430f48288c8c01f2838aa271
+    "@percy/cli-command": "npm:1.26.3"
+    "@percy/cli-exec": "npm:1.26.3"
+  checksum: abe4b55c69663cf4102ddbe963336487c9eb7ae6c09ac03df1c61c0e8c9022b9920aef2f58eea82e3fcfaa7d0891383f720f0d4dc5b580332af63e1e4553a7da
   languageName: node
   linkType: hard
 
-"@percy/cli-build@npm:1.27.4":
-  version: 1.27.4
-  resolution: "@percy/cli-build@npm:1.27.4"
+"@percy/cli-build@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-build@npm:1.26.3"
   dependencies:
-    "@percy/cli-command": "npm:1.27.4"
-  checksum: bc8ccb67a2440ff4cc9d46acfbfe01a081339e34ebf97b6c1874455ba748abfdbfd670541059c356bb64f8d0fdd6ee1b259b35343d08abc8090540232b019b36
+    "@percy/cli-command": "npm:1.26.3"
+  checksum: a515da0999a4788b7bd646f66df2ed60906c250f28818471749939fb0e19e4ed0a3e3a248713321b876b5ebfe25ad67257f9e74e6960d334e8874c42951dd05c
   languageName: node
   linkType: hard
 
-"@percy/cli-command@npm:1.27.4, @percy/cli-command@npm:^1.24.0":
+"@percy/cli-command@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-command@npm:1.26.3"
+  dependencies:
+    "@percy/config": "npm:1.26.3"
+    "@percy/core": "npm:1.26.3"
+    "@percy/logger": "npm:1.26.3"
+  bin:
+    percy-cli-readme: bin/readme.js
+  checksum: 2f00ae270c1a6b7e7f96840d5f117094944eb379302d54036f18e6a2ec24976bb18b4987ddfb259c0833a2489caa85a2523f57cbf3737a3fc2dc1677d5d2d98f
+  languageName: node
+  linkType: hard
+
+"@percy/cli-command@npm:^1.24.0":
   version: 1.27.4
   resolution: "@percy/cli-command@npm:1.27.4"
   dependencies:
@@ -4743,63 +5804,73 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@percy/cli-config@npm:1.27.4":
-  version: 1.27.4
-  resolution: "@percy/cli-config@npm:1.27.4"
+"@percy/cli-config@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-config@npm:1.26.3"
   dependencies:
-    "@percy/cli-command": "npm:1.27.4"
-  checksum: 9a735699748b4c444dd4d1fc190c0d60941a3e270be99cd2d49f81b2b6d30e629845f530d26fec826bf952b8e736c647233de31e9fe97e71c70ec089fe0df329
+    "@percy/cli-command": "npm:1.26.3"
+  checksum: e5aee39b104c1c7ac970979226a4f2194216032a01bf940b14e0d4431a7d2826a1d2ca0943680d93c8e23ac94a7492fd5bb277d154012a013542965ba8893694
   languageName: node
   linkType: hard
 
-"@percy/cli-exec@npm:1.27.4":
-  version: 1.27.4
-  resolution: "@percy/cli-exec@npm:1.27.4"
+"@percy/cli-exec@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-exec@npm:1.26.3"
   dependencies:
-    "@percy/cli-command": "npm:1.27.4"
+    "@percy/cli-command": "npm:1.26.3"
     cross-spawn: "npm:^7.0.3"
     which: "npm:^2.0.2"
-  checksum: 70880fa122a98d64cfacfde4c184dc5341a021882b0e2556f3eae30c822a21b32e74130286b037b5c33375b9f822a0d581fa6d6fa967bc2556ce53e330e108f0
+  checksum: eb3e1f0fe6f695bf48daecae70771e215feee7845261af7e0e38697725a4bb3194015d3b20ce0cc9f72e23743abaeb10d8d0511b4f361ccabc73279504c283cb
   languageName: node
   linkType: hard
 
-"@percy/cli-snapshot@npm:1.27.4":
-  version: 1.27.4
-  resolution: "@percy/cli-snapshot@npm:1.27.4"
+"@percy/cli-snapshot@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-snapshot@npm:1.26.3"
   dependencies:
-    "@percy/cli-command": "npm:1.27.4"
+    "@percy/cli-command": "npm:1.26.3"
     yaml: "npm:^2.0.0"
-  checksum: 12d63157948507bb00c35041893c10cec0a9b807699adfdb2df123a7d07de30ef9cba5d7654d9e2328cb74e9f1c63908bc283702de472a4b675470fe7a7287bf
+  checksum: f234963a565f8cb6a0c1ef3a6a8aaa522b75c72ca5b91cd22d689af613e0cb509aa7c8e6ec517dbb1e9b6d7a878c7542b5f0e6bbf98b2a92eda94439326ee3eb
   languageName: node
   linkType: hard
 
-"@percy/cli-upload@npm:1.27.4":
-  version: 1.27.4
-  resolution: "@percy/cli-upload@npm:1.27.4"
+"@percy/cli-upload@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/cli-upload@npm:1.26.3"
   dependencies:
-    "@percy/cli-command": "npm:1.27.4"
+    "@percy/cli-command": "npm:1.26.3"
     fast-glob: "npm:^3.2.11"
     image-size: "npm:^1.0.0"
-  checksum: 8c0d4681775ffb8b98afd05db54543642afc4e34393d3c80c09f2ed1d4884626e3a5e678270836cc624920d8910278946ca70ea28747376f113431f8c2e085a2
+  checksum: 46b5b0a3fc72b438fac3d1f89be526d9d7585def0e9be925e015df4b949a64fa1b4e73f21eade0fe2740a65dede730bae4cb08a5133e46a212b121d37d6b8c4f
   languageName: node
   linkType: hard
 
 "@percy/cli@npm:^1.8.1":
-  version: 1.27.4
-  resolution: "@percy/cli@npm:1.27.4"
-  dependencies:
-    "@percy/cli-app": "npm:1.27.4"
-    "@percy/cli-build": "npm:1.27.4"
-    "@percy/cli-command": "npm:1.27.4"
-    "@percy/cli-config": "npm:1.27.4"
-    "@percy/cli-exec": "npm:1.27.4"
-    "@percy/cli-snapshot": "npm:1.27.4"
-    "@percy/cli-upload": "npm:1.27.4"
-    "@percy/client": "npm:1.27.4"
-    "@percy/logger": "npm:1.27.4"
+  version: 1.26.3
+  resolution: "@percy/cli@npm:1.26.3"
+  dependencies:
+    "@percy/cli-app": "npm:1.26.3"
+    "@percy/cli-build": "npm:1.26.3"
+    "@percy/cli-command": "npm:1.26.3"
+    "@percy/cli-config": "npm:1.26.3"
+    "@percy/cli-exec": "npm:1.26.3"
+    "@percy/cli-snapshot": "npm:1.26.3"
+    "@percy/cli-upload": "npm:1.26.3"
+    "@percy/client": "npm:1.26.3"
+    "@percy/logger": "npm:1.26.3"
   bin:
     percy: bin/run.cjs
-  checksum: 8bae40ba124856b233780103faa6ef1d759d87d62a682181a615bf1c2666ea62db5199857f3918caec1edf3e5b4b9d47244a2bb89bc2a13ce5a2a980b448cfb6
+  checksum: 24b35b65325a4a40be582ee15a86c52cd68e194e261a3cea0ca5867fe2927e6e67dc054d898887a9735dc9d7d08e8df5595c8d30a598e1141243b81b334c5b19
+  languageName: node
+  linkType: hard
+
+"@percy/client@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/client@npm:1.26.3"
+  dependencies:
+    "@percy/env": "npm:1.26.3"
+    "@percy/logger": "npm:1.26.3"
+  checksum: 17970e034cc2cee93adcf1ae5d02481f7389ca5b6f383c84b344b055482ec5e08edb2d1fd260a8a25ae2d67c1caf9827d0014a1ba8f401f39c39e9b9abdb7dff
   languageName: node
   linkType: hard
 
@@ -4813,6 +5884,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@percy/config@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/config@npm:1.26.3"
+  dependencies:
+    "@percy/logger": "npm:1.26.3"
+    ajv: "npm:^8.6.2"
+    cosmiconfig: "npm:^8.0.0"
+    yaml: "npm:^2.0.0"
+  checksum: 29314217a4168c64efe84f59fa5bbd59ab5f7f99afc1c89937f6163b1bfb798e558c7c393e07cd25991abe105725b52cc4ac640f590ad30446ea78025598e3c6
+  languageName: node
+  linkType: hard
+
 "@percy/config@npm:1.27.4":
   version: 1.27.4
   resolution: "@percy/config@npm:1.27.4"
@@ -4825,6 +5908,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@percy/core@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/core@npm:1.26.3"
+  dependencies:
+    "@percy/client": "npm:1.26.3"
+    "@percy/config": "npm:1.26.3"
+    "@percy/dom": "npm:1.26.3"
+    "@percy/logger": "npm:1.26.3"
+    content-disposition: "npm:^0.5.4"
+    cross-spawn: "npm:^7.0.3"
+    extract-zip: "npm:^2.0.1"
+    fast-glob: "npm:^3.2.11"
+    micromatch: "npm:^4.0.4"
+    mime-types: "npm:^2.1.34"
+    path-to-regexp: "npm:^6.2.0"
+    rimraf: "npm:^3.0.2"
+    ws: "npm:^8.0.0"
+  checksum: 0f89c555da7b832d9ff0cba67e9b831255c42d5793f54a2c3134c25287d5556056e3ca3f28cd0d467e09cde1e7e544d55640b26b92fcff0c71c5405ca11ee95d
+  languageName: node
+  linkType: hard
+
 "@percy/core@npm:1.27.4":
   version: 1.27.4
   resolution: "@percy/core@npm:1.27.4"
@@ -4858,6 +5962,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@percy/dom@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/dom@npm:1.26.3"
+  checksum: 0d9cc95a558f240d81f5444a6350f42db5df9b9059a10f2a147c406ed5eedcffef4a3361e32c6cc2ee328d394320ef3cd12c5598cb0806124896dc9526fd8a87
+  languageName: node
+  linkType: hard
+
 "@percy/dom@npm:1.27.4, @percy/dom@npm:^1.0.5":
   version: 1.27.4
   resolution: "@percy/dom@npm:1.27.4"
@@ -4865,6 +5976,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@percy/env@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/env@npm:1.26.3"
+  dependencies:
+    "@percy/logger": "npm:1.26.3"
+  checksum: d5ea127df6fcfb18984d424ddf7b99edac12361032b71750407285cbae95d70af3d62fc8fa4767eda16c171e65a80174b3339dedb5564c235cbc04bb7738ba9e
+  languageName: node
+  linkType: hard
+
 "@percy/env@npm:1.27.4":
   version: 1.27.4
   resolution: "@percy/env@npm:1.27.4"
@@ -4874,6 +5994,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@percy/logger@npm:1.26.3":
+  version: 1.26.3
+  resolution: "@percy/logger@npm:1.26.3"
+  checksum: bb771655e82a840de5dadb51aad03ed7418730233f1aa25d04af27b934eb669bd251e9423bc0579ce846bb3ea5ad6398607e4e6adb344f8e09b681c30b833a1b
+  languageName: node
+  linkType: hard
+
 "@percy/logger@npm:1.27.4":
   version: 1.27.4
   resolution: "@percy/logger@npm:1.27.4"
@@ -4881,23 +6008,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@percy/sdk-utils@npm:1.27.4, @percy/sdk-utils@npm:^1.0.5, @percy/sdk-utils@npm:^1.3.1":
+"@percy/sdk-utils@npm:1.27.4":
   version: 1.27.4
   resolution: "@percy/sdk-utils@npm:1.27.4"
   checksum: c3ebc5c28b2a36c556627441366f8ee30a7dcb63109d233178ae4cc0d20f53efbf3b4f3a2926d04c9726eb88d213bd7eef08626087549f82fb3cec59dc097889
   languageName: node
   linkType: hard
 
+"@percy/sdk-utils@npm:^1.0.5, @percy/sdk-utils@npm:^1.3.1":
+  version: 1.26.3
+  resolution: "@percy/sdk-utils@npm:1.26.3"
+  checksum: cfe9cc4e367cfc0dd4d380da7ccddf10538e733e0ef7355931728e7c3ea187d371ba419a4ddc1ff311f531a64ca4be506b43f54e6a1c8d2a94355d102411a0cc
+  languageName: node
+  linkType: hard
+
 "@percy/storybook@npm:^4.3.4":
-  version: 4.3.7
-  resolution: "@percy/storybook@npm:4.3.7"
+  version: 4.3.6
+  resolution: "@percy/storybook@npm:4.3.6"
   dependencies:
     "@percy/cli-command": "npm:^1.24.0"
     cross-spawn: "npm:^7.0.3"
     qs: "npm:^6.11.0"
   bin:
     percy-storybook: bin/percy-storybook.cjs
-  checksum: 7857877139d282008625d78f1388db3347adaa2bc1a79c003475f5706b9bc4187d608c51dd7333d87c77837814dad5181f2ac54b409789b284a827a5e7bd66e2
+  checksum: dadc57a1103e585082ca5485f2a351eb63469365fe922a0430f95c01655b64d45e0ac1f206b23477274b9e9132d9c56102c37300292d970a23c42ac06211ffb5
   languageName: node
   linkType: hard
 
@@ -4919,8 +6053,8 @@ __metadata:
   linkType: hard
 
 "@pmmmwh/react-refresh-webpack-plugin@npm:^0.5.3":
-  version: 0.5.11
-  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.11"
+  version: 0.5.10
+  resolution: "@pmmmwh/react-refresh-webpack-plugin@npm:0.5.10"
   dependencies:
     ansi-html-community: "npm:^0.0.8"
     common-path-prefix: "npm:^3.0.0"
@@ -4935,7 +6069,7 @@ __metadata:
     "@types/webpack": 4.x || 5.x
     react-refresh: ">=0.10.0 <1.0.0"
     sockjs-client: ^1.4.0
-    type-fest: ">=0.17.0 <5.0.0"
+    type-fest: ">=0.17.0 <4.0.0"
     webpack: ">=4.43.0 <6.0.0"
     webpack-dev-server: 3.x || 4.x
     webpack-hot-middleware: 2.x
@@ -4953,7 +6087,7 @@ __metadata:
       optional: true
     webpack-plugin-serve:
       optional: true
-  checksum: ee7eff63ef930c8ec37b341d12f180598a5173938a5b8d1d7c53306eab10b3f3f23adcba4824e5a93ddcd0cf185a90baa0b6f483f27a320dd86ad61941940eb6
+  checksum: e0590fba5f9cdb52232af9e8e5c13187d14d8d2392a530c76db51155b0995833cae73252409f4ab8ea6edb69c211846ded7bfe03bb501af21238ae8b41caf366
   languageName: node
   linkType: hard
 
@@ -5032,18 +6166,18 @@ __metadata:
   linkType: hard
 
 "@rollup/plugin-terser@npm:^0.4.3":
-  version: 0.4.4
-  resolution: "@rollup/plugin-terser@npm:0.4.4"
+  version: 0.4.3
+  resolution: "@rollup/plugin-terser@npm:0.4.3"
   dependencies:
     serialize-javascript: "npm:^6.0.1"
     smob: "npm:^1.0.0"
     terser: "npm:^5.17.4"
   peerDependencies:
-    rollup: ^2.0.0||^3.0.0||^4.0.0
+    rollup: ^2.x || ^3.x
   peerDependenciesMeta:
     rollup:
       optional: true
-  checksum: a5e066ddea55fc8c32188bc8b484cca619713516f10e3a06801881ec98bf37459ca24e5fe8711f93a5fa7f26a6e9132a47bc1a61c01e0b513dfd79a96cdc6eb7
+  checksum: 58a9990ed056dae1513c7de3a5b4df7601355ebc9d09061fb39e06a5f88bcd7141286178da7e0249ce6ff5ccabd8741eaabf0fb712567aeedf4e23d8a1a1064e
   languageName: node
   linkType: hard
 
@@ -5093,30 +6227,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@sigstore/bundle@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "@sigstore/bundle@npm:1.1.0"
+"@sigstore/bundle@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "@sigstore/bundle@npm:1.0.0"
   dependencies:
     "@sigstore/protobuf-specs": "npm:^0.2.0"
-  checksum: 79e6cc4cc1858bccbd852dee85d95c66c891b109ea415d5b7b00b6d73791c4f6064c40d09b5aa3f9ec6c19b3145c5cfeece02302f912c186ff0a769667bb9491
+  checksum: 4a351f64a8b526c0f2493f51594016e53d08eb6ed823be73eaf3dcf824b8dfa900d2b5fd72b8d99e9418b5d45a74cd94c3448d2a89448dfb6756327fbe387089
   languageName: node
   linkType: hard
 
 "@sigstore/protobuf-specs@npm:^0.2.0":
-  version: 0.2.1
-  resolution: "@sigstore/protobuf-specs@npm:0.2.1"
-  checksum: cb0b9d9b3ef44a9f1729d85616c5d7c2ebccde303836a5a345ec33a500c7bd5205ffcc31332e0a90831cccc581dafbdf5b868f050c84270c8df6a4a6f2ce0bcb
-  languageName: node
-  linkType: hard
-
-"@sigstore/sign@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "@sigstore/sign@npm:1.0.0"
-  dependencies:
-    "@sigstore/bundle": "npm:^1.1.0"
-    "@sigstore/protobuf-specs": "npm:^0.2.0"
-    make-fetch-happen: "npm:^11.0.1"
-  checksum: 44f23fc5eef5b160c0c36c6b19863039bbf375834eeca1ce7f711c82eb5a022174a475f0c06594f17732473c6878f2512f37e65949b7d33af3b2e2773f1bd34f
+  version: 0.2.0
+  resolution: "@sigstore/protobuf-specs@npm:0.2.0"
+  checksum: 360c26578b06399044a33aaf0d834a84319ca48147e9d57ee6fc0f3ed4aa960297149ecf2bb934c20c61ceb4d8fa0faccc4842c9834c32bedefade5a1ed62e50
   languageName: node
   linkType: hard
 
@@ -5519,83 +6642,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-storyshots@npm:^6.5.15":
-  version: 6.5.16
-  resolution: "@storybook/addon-storyshots@npm:6.5.16"
-  dependencies:
-    "@jest/transform": "npm:^26.6.2"
-    "@storybook/addons": "npm:6.5.16"
-    "@storybook/babel-plugin-require-context-hook": "npm:1.0.1"
-    "@storybook/client-api": "npm:6.5.16"
-    "@storybook/core": "npm:6.5.16"
-    "@storybook/core-client": "npm:6.5.16"
-    "@storybook/core-common": "npm:6.5.16"
-    "@storybook/csf": "npm:0.0.2--canary.4566f4d.1"
-    "@types/glob": "npm:^7.1.3"
-    "@types/jest": "npm:^26.0.16"
-    "@types/jest-specific-snapshot": "npm:^0.5.3"
-    core-js: "npm:^3.8.2"
-    glob: "npm:^7.1.6"
-    global: "npm:^4.4.0"
-    jest-specific-snapshot: "npm:^4.0.0"
-    preact-render-to-string: "npm:^5.1.19"
-    pretty-format: "npm:^26.6.2"
-    react-test-renderer: "npm:^16.8.0 || ^17.0.0"
-    read-pkg-up: "npm:^7.0.1"
-    regenerator-runtime: "npm:^0.13.7"
-    ts-dedent: "npm:^2.0.0"
-  peerDependencies:
-    "@angular/core": ">=6.0.0"
-    "@angular/platform-browser-dynamic": ">=6.0.0"
-    "@storybook/angular": "*"
-    "@storybook/react": "*"
-    "@storybook/vue": "*"
-    "@storybook/vue3": "*"
-    jest: "*"
-    jest-preset-angular: "*"
-    jest-vue-preprocessor: "*"
-    preact: ^10.5.13
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-    rxjs: "*"
-    svelte: "*"
-    vue: "*"
-    vue-jest: "*"
-  peerDependenciesMeta:
-    "@angular/core":
-      optional: true
-    "@angular/platform-browser-dynamic":
-      optional: true
-    "@storybook/angular":
-      optional: true
-    "@storybook/react":
-      optional: true
-    "@storybook/vue":
-      optional: true
-    "@storybook/vue3":
-      optional: true
-    jest-preset-angular:
-      optional: true
-    jest-vue-preprocessor:
-      optional: true
-    preact:
-      optional: true
-    react:
-      optional: true
-    react-dom:
-      optional: true
-    rxjs:
-      optional: true
-    svelte:
-      optional: true
-    vue:
-      optional: true
-    vue-jest:
-      optional: true
-  checksum: 115365685ff159ba5891feb6c059948de3acf820ac6426b5989f5397e638d601499c5fc9eecc1ec8afa6d60f13bd9d463c60c1add68bf6a3e7c5f2860c514f56
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-storysource@npm:^6.5.15":
   version: 6.5.16
   resolution: "@storybook/addon-storysource@npm:6.5.16"
@@ -5725,13 +6771,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/babel-plugin-require-context-hook@npm:1.0.1":
-  version: 1.0.1
-  resolution: "@storybook/babel-plugin-require-context-hook@npm:1.0.1"
-  checksum: 31a1c56738444473e9eb1ea6c21cb0fb2aa29e4558c0ceea2e3555757931701bd894e051229fbcad2316f547e5bc5d2a08e58a63c4bf7ad65825bdb5bf2ae067
-  languageName: node
-  linkType: hard
-
 "@storybook/builder-webpack4@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/builder-webpack4@npm:6.5.16"
@@ -5793,58 +6832,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/builder-webpack5@npm:^6.5.15":
-  version: 6.5.16
-  resolution: "@storybook/builder-webpack5@npm:6.5.16"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@storybook/addons": "npm:6.5.16"
-    "@storybook/api": "npm:6.5.16"
-    "@storybook/channel-postmessage": "npm:6.5.16"
-    "@storybook/channels": "npm:6.5.16"
-    "@storybook/client-api": "npm:6.5.16"
-    "@storybook/client-logger": "npm:6.5.16"
-    "@storybook/components": "npm:6.5.16"
-    "@storybook/core-common": "npm:6.5.16"
-    "@storybook/core-events": "npm:6.5.16"
-    "@storybook/node-logger": "npm:6.5.16"
-    "@storybook/preview-web": "npm:6.5.16"
-    "@storybook/router": "npm:6.5.16"
-    "@storybook/semver": "npm:^7.3.2"
-    "@storybook/store": "npm:6.5.16"
-    "@storybook/theming": "npm:6.5.16"
-    "@types/node": "npm:^14.0.10 || ^16.0.0"
-    babel-loader: "npm:^8.0.0"
-    babel-plugin-named-exports-order: "npm:^0.0.2"
-    browser-assert: "npm:^1.2.1"
-    case-sensitive-paths-webpack-plugin: "npm:^2.3.0"
-    core-js: "npm:^3.8.2"
-    css-loader: "npm:^5.0.1"
-    fork-ts-checker-webpack-plugin: "npm:^6.0.4"
-    glob: "npm:^7.1.6"
-    glob-promise: "npm:^3.4.0"
-    html-webpack-plugin: "npm:^5.0.0"
-    path-browserify: "npm:^1.0.1"
-    process: "npm:^0.11.10"
-    stable: "npm:^0.1.8"
-    style-loader: "npm:^2.0.0"
-    terser-webpack-plugin: "npm:^5.0.3"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-    webpack: "npm:^5.9.0"
-    webpack-dev-middleware: "npm:^4.1.0"
-    webpack-hot-middleware: "npm:^2.25.1"
-    webpack-virtual-modules: "npm:^0.4.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: ae3f1556f7d0dcebd31377b8b3b1bacbc80e2d1e02fd6d3ed6c1b016a7058be7c66cb583cdd6c17178399a468858e4548164e703971a51c52f01cc902410a3d8
-  languageName: node
-  linkType: hard
-
 "@storybook/channel-postmessage@npm:6.5.16":
   version: 6.5.16
   resolution: "@storybook/channel-postmessage@npm:6.5.16"
@@ -6277,52 +7264,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/manager-webpack5@npm:^6.5.15":
-  version: 6.5.16
-  resolution: "@storybook/manager-webpack5@npm:6.5.16"
-  dependencies:
-    "@babel/core": "npm:^7.12.10"
-    "@babel/plugin-transform-template-literals": "npm:^7.12.1"
-    "@babel/preset-react": "npm:^7.12.10"
-    "@storybook/addons": "npm:6.5.16"
-    "@storybook/core-client": "npm:6.5.16"
-    "@storybook/core-common": "npm:6.5.16"
-    "@storybook/node-logger": "npm:6.5.16"
-    "@storybook/theming": "npm:6.5.16"
-    "@storybook/ui": "npm:6.5.16"
-    "@types/node": "npm:^14.0.10 || ^16.0.0"
-    babel-loader: "npm:^8.0.0"
-    case-sensitive-paths-webpack-plugin: "npm:^2.3.0"
-    chalk: "npm:^4.1.0"
-    core-js: "npm:^3.8.2"
-    css-loader: "npm:^5.0.1"
-    express: "npm:^4.17.1"
-    find-up: "npm:^5.0.0"
-    fs-extra: "npm:^9.0.1"
-    html-webpack-plugin: "npm:^5.0.0"
-    node-fetch: "npm:^2.6.7"
-    process: "npm:^0.11.10"
-    read-pkg-up: "npm:^7.0.1"
-    regenerator-runtime: "npm:^0.13.7"
-    resolve-from: "npm:^5.0.0"
-    style-loader: "npm:^2.0.0"
-    telejson: "npm:^6.0.8"
-    terser-webpack-plugin: "npm:^5.0.3"
-    ts-dedent: "npm:^2.0.0"
-    util-deprecate: "npm:^1.0.2"
-    webpack: "npm:^5.9.0"
-    webpack-dev-middleware: "npm:^4.1.0"
-    webpack-virtual-modules: "npm:^0.4.1"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 42a8e5c96131cfa0945113a5a8faa8a3b647db308dcb43da851b29854d9314750a24c84200a15b48392ee838435050812705070263004e7942ec74fb88cbe54e
-  languageName: node
-  linkType: hard
-
 "@storybook/mdx1-csf@npm:^0.0.1":
   version: 0.0.1
   resolution: "@storybook/mdx1-csf@npm:0.0.1"
@@ -6793,85 +7734,85 @@ __metadata:
   linkType: hard
 
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.1.0, @types/babel__core@npm:^7.1.7":
-  version: 7.20.4
-  resolution: "@types/babel__core@npm:7.20.4"
+  version: 7.20.1
+  resolution: "@types/babel__core@npm:7.20.1"
   dependencies:
     "@babel/parser": "npm:^7.20.7"
     "@babel/types": "npm:^7.20.7"
     "@types/babel__generator": "npm:*"
     "@types/babel__template": "npm:*"
     "@types/babel__traverse": "npm:*"
-  checksum: 01e1b5f0a2109bde99093c2148a6ca73890dd8d4050734288cd46c9d170ab072a082a99486960051d3d76630673f117d574ebe6b880b5359114c70ae1dfb75b1
+  checksum: e63e5e71be75dd2fe41951c83650ab62006179340a7b280bfa58e9c39118cb2752ca786f952f4a12f75b83b55346f2d5e8df2b91926ef99f2f4a2a69162cab99
   languageName: node
   linkType: hard
 
 "@types/babel__generator@npm:*":
-  version: 7.6.7
-  resolution: "@types/babel__generator@npm:7.6.7"
+  version: 7.6.4
+  resolution: "@types/babel__generator@npm:7.6.4"
   dependencies:
     "@babel/types": "npm:^7.0.0"
-  checksum: 11d36fdcee9968a7fa05e5e5086bcc349ad32b7d7117728334be76b82444b5e1c89c0efe15205a3f47f299a4864912165e6f0d31ba285fc4f05dbbafcb83e9b6
+  checksum: 34f361a0d54a0d85ea4c4b5122c4025a5738fe6795361c85f07a4f8f9add383de640e8611edeeb8339db8203c2d64bff30be266bdcfe3cf777c19e8d34f9cebc
   languageName: node
   linkType: hard
 
 "@types/babel__template@npm:*":
-  version: 7.4.4
-  resolution: "@types/babel__template@npm:7.4.4"
+  version: 7.4.1
+  resolution: "@types/babel__template@npm:7.4.1"
   dependencies:
     "@babel/parser": "npm:^7.1.0"
     "@babel/types": "npm:^7.0.0"
-  checksum: d7a02d2a9b67e822694d8e6a7ddb8f2b71a1d6962dfd266554d2513eefbb205b33ca71a0d163b1caea3981ccf849211f9964d8bd0727124d18ace45aa6c9ae29
+  checksum: 649fe8b42c2876be1fd28c6ed9b276f78152d5904ec290b6c861d9ef324206e0a5c242e8305c421ac52ecf6358fa7e32ab7a692f55370484825c1df29b1596ee
   languageName: node
   linkType: hard
 
 "@types/babel__traverse@npm:*, @types/babel__traverse@npm:^7.0.4, @types/babel__traverse@npm:^7.0.6":
-  version: 7.20.4
-  resolution: "@types/babel__traverse@npm:7.20.4"
+  version: 7.20.1
+  resolution: "@types/babel__traverse@npm:7.20.1"
   dependencies:
     "@babel/types": "npm:^7.20.7"
-  checksum: 927073e3a2ca4d24b95acf96d9c91d6fd1c44826d440e5f9b486de421857945b679045710ebf886be2af30d13877d86f9fbd15a383f72a2b07da322af1c1a321
+  checksum: 8f18d1488adf296f50d01e2386797c56a607cde2cfc3c7c55cea34d760aed9386c81ea808a151a0efb11d99e0083c138c5733d3f214471a30abed055bede39d8
   languageName: node
   linkType: hard
 
 "@types/bluebird@npm:^3.5.36":
-  version: 3.5.42
-  resolution: "@types/bluebird@npm:3.5.42"
-  checksum: 09ad60b083f916c7611936d3c70986df8f2eae11e46768ab7901d86bee5b1ca6b00cd9ef8cc0d3761256e2bc4ada3388e5529f71745a6b3d7602e868e3530310
+  version: 3.5.38
+  resolution: "@types/bluebird@npm:3.5.38"
+  checksum: 231b5a26694d149a671caaeaecb784e9a173e105ae14f8834f3a5a08f050cfd8785fef5cb6e9996962817442c567bdbfc26cdd3d99a42238106638541baf9baf
   languageName: node
   linkType: hard
 
 "@types/body-parser@npm:*":
-  version: 1.19.5
-  resolution: "@types/body-parser@npm:1.19.5"
+  version: 1.19.2
+  resolution: "@types/body-parser@npm:1.19.2"
   dependencies:
     "@types/connect": "npm:*"
     "@types/node": "npm:*"
-  checksum: 1e251118c4b2f61029cc43b0dc028495f2d1957fe8ee49a707fb940f86a9bd2f9754230805598278fe99958b49e9b7e66eec8ef6a50ab5c1f6b93e1ba2aaba82
+  checksum: e17840c7d747a549f00aebe72c89313d09fbc4b632b949b2470c5cb3b1cb73863901ae84d9335b567a79ec5efcfb8a28ff8e3f36bc8748a9686756b6d5681f40
   languageName: node
   linkType: hard
 
 "@types/bonjour@npm:^3.5.9":
-  version: 3.5.13
-  resolution: "@types/bonjour@npm:3.5.13"
+  version: 3.5.10
+  resolution: "@types/bonjour@npm:3.5.10"
   dependencies:
     "@types/node": "npm:*"
-  checksum: e827570e097bd7d625a673c9c208af2d1a22fa3885c0a1646533cf24394c839c3e5f60ac1bc60c0ddcc69c0615078c9fb2c01b42596c7c582d895d974f2409ee
+  checksum: bfcadb042a41b124c4e3de4925e3be6d35b78f93f27c4535d5ff86980dc0f8bc407ed99b9b54528952dc62834d5a779392f7a12c2947dd19330eb05a6bcae15a
   languageName: node
   linkType: hard
 
 "@types/chai@npm:^4.2.11":
-  version: 4.3.10
-  resolution: "@types/chai@npm:4.3.10"
-  checksum: a52b2c603cf293f0cfce304474b2844d7d03279713ebe3d310f2710d72ab2db14940a187fac389bfa12c58eace62ed477125321813c818f31d82e388ec405a73
+  version: 4.3.5
+  resolution: "@types/chai@npm:4.3.5"
+  checksum: 35d96db335724b6a05dd9113722f9cceb2069b5b0905b160f36132585482558fc5261a29b30290140dea7e5068be2f2585a4f4fba55b569222a95eb313e83b1b
   languageName: node
   linkType: hard
 
 "@types/cheerio@npm:^0.22.22":
-  version: 0.22.34
-  resolution: "@types/cheerio@npm:0.22.34"
+  version: 0.22.31
+  resolution: "@types/cheerio@npm:0.22.31"
   dependencies:
     "@types/node": "npm:*"
-  checksum: ebe9de49ad46bba54ca950ebb2a69171393519ab2629c46d164bc56df6c61a38c081bf8681e2943f12266b993ecb274b414468585ebb11f8a74d83756ae4cfba
+  checksum: e5af81ef3a87d57f90959af8bc1a321fb9e6c32481659303ce73b3eccce4720a5ce56470ab505ab3404a8fce04b3e40967ffbe581a2bc672964687fc82e1b13b
   languageName: node
   linkType: hard
 
@@ -6883,21 +7824,21 @@ __metadata:
   linkType: hard
 
 "@types/connect-history-api-fallback@npm:^1.3.5":
-  version: 1.5.3
-  resolution: "@types/connect-history-api-fallback@npm:1.5.3"
+  version: 1.5.0
+  resolution: "@types/connect-history-api-fallback@npm:1.5.0"
   dependencies:
     "@types/express-serve-static-core": "npm:*"
     "@types/node": "npm:*"
-  checksum: 97a0cdd9a657ec6a7b287d880e0413344ffbfd0fb5ede8a81381d8627cb8c7863051dc22af477de87376a39b6f414aad9b592958d242a866f191f436e7b1a42c
+  checksum: f180e7c540728d6dd3a1eb2376e445fe7f9de4ee8a5b460d5ad80062cdb6de6efc91c6851f39e9d5933b3dcd5cd370673c52343a959aa091238b6f863ea4447c
   languageName: node
   linkType: hard
 
 "@types/connect@npm:*":
-  version: 3.4.38
-  resolution: "@types/connect@npm:3.4.38"
+  version: 3.4.35
+  resolution: "@types/connect@npm:3.4.35"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 7eb1bc5342a9604facd57598a6c62621e244822442976c443efb84ff745246b10d06e8b309b6e80130026a396f19bf6793b7cecd7380169f369dac3bfc46fb99
+  checksum: fe81351470f2d3165e8b12ce33542eef89ea893e36dd62e8f7d72566dfb7e448376ae962f9f3ea888547ce8b55a40020ca0e01d637fab5d99567673084542641
   languageName: node
   linkType: hard
 
@@ -6909,11 +7850,11 @@ __metadata:
   linkType: hard
 
 "@types/cors@npm:^2.8.12":
-  version: 2.8.16
-  resolution: "@types/cors@npm:2.8.16"
+  version: 2.8.13
+  resolution: "@types/cors@npm:2.8.13"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 0c760aa826167a42bfbccff00d67e39c9dd9852e0cd88610f6d3ea1ed17e438df0f8f1f3175c77bfbfdee4c77bf677b12f6b5bd309358c30b5d0e758624b7250
+  checksum: 7ef197ea19d2e5bf1313b8416baa6f3fd6dd887fd70191da1f804f557395357dafd8bc8bed0ac60686923406489262a7c8a525b55748f7b2b8afa686700de907
   languageName: node
   linkType: hard
 
@@ -6927,29 +7868,29 @@ __metadata:
   linkType: hard
 
 "@types/eslint-scope@npm:^3.7.3":
-  version: 3.7.7
-  resolution: "@types/eslint-scope@npm:3.7.7"
+  version: 3.7.4
+  resolution: "@types/eslint-scope@npm:3.7.4"
   dependencies:
     "@types/eslint": "npm:*"
     "@types/estree": "npm:*"
-  checksum: e2889a124aaab0b89af1bab5959847c5bec09809209255de0e63b9f54c629a94781daa04adb66bffcdd742f5e25a17614fb933965093c0eea64aacda4309380e
+  checksum: ea6a9363e92f301cd3888194469f9ec9d0021fe0a397a97a6dd689e7545c75de0bd2153dfb13d3ab532853a278b6572c6f678ce846980669e41029d205653460
   languageName: node
   linkType: hard
 
 "@types/eslint@npm:*":
-  version: 8.44.7
-  resolution: "@types/eslint@npm:8.44.7"
+  version: 8.44.2
+  resolution: "@types/eslint@npm:8.44.2"
   dependencies:
     "@types/estree": "npm:*"
     "@types/json-schema": "npm:*"
-  checksum: 3bb9415f5db98bc33f033e2d07503096ffd26046f95e6a4cf4d4a537c8b16398452f3059793e03b0fedbb0e35f0da68a4c68e6ac50d8fef9d555bdd074afb9fb
+  checksum: 9fe07d4fba1ab9d53d0da404c5774c056deb4bb37a3712a11d35f40ec4389d5d8cc46f19387cf79a3054754e1b71f5dbb796ee6f7411449e9f2399aff8a94def
   languageName: node
   linkType: hard
 
 "@types/estree@npm:*, @types/estree@npm:^1.0.0":
-  version: 1.0.5
-  resolution: "@types/estree@npm:1.0.5"
-  checksum: 7de6d928dd4010b0e20c6919e1a6c27b61f8d4567befa89252055fad503d587ecb9a1e3eab1b1901f923964d7019796db810b7fd6430acb26c32866d126fd408
+  version: 1.0.1
+  resolution: "@types/estree@npm:1.0.1"
+  checksum: f252569c002506c61ad913e778aa69415908078c46c78c901ccad77bc66cd34f1e1b9babefb8ff0d27c07a15fb0824755edd7bb3fa7ea828f32ae0fe5faa9962
   languageName: node
   linkType: hard
 
@@ -6968,26 +7909,26 @@ __metadata:
   linkType: hard
 
 "@types/express-serve-static-core@npm:*, @types/express-serve-static-core@npm:^4.17.33":
-  version: 4.17.41
-  resolution: "@types/express-serve-static-core@npm:4.17.41"
+  version: 4.17.35
+  resolution: "@types/express-serve-static-core@npm:4.17.35"
   dependencies:
     "@types/node": "npm:*"
     "@types/qs": "npm:*"
     "@types/range-parser": "npm:*"
     "@types/send": "npm:*"
-  checksum: 7647e19d9c3d57ddd18947d2b161b90ef0aedd15875140e5b824209be41c1084ae942d4fb43cd5f2051a6a5f8c044519ef6c9ac1b2ad86b9aa546b4f1f023303
+  checksum: 9f08212ac163e9b2a1005d84cc43ace52d5057dfaa009c575eb3f3a659949b9c9cecec0cbff863622871c56e1c604bd67857a5e1d353256eaf9adacec59f87bf
   languageName: node
   linkType: hard
 
 "@types/express@npm:*, @types/express@npm:^4.17.13":
-  version: 4.17.21
-  resolution: "@types/express@npm:4.17.21"
+  version: 4.17.17
+  resolution: "@types/express@npm:4.17.17"
   dependencies:
     "@types/body-parser": "npm:*"
     "@types/express-serve-static-core": "npm:^4.17.33"
     "@types/qs": "npm:*"
     "@types/serve-static": "npm:*"
-  checksum: 7a6d26cf6f43d3151caf4fec66ea11c9d23166e4f3102edfe45a94170654a54ea08cf3103d26b3928d7ebcc24162c90488e33986b7e3a5f8941225edd5eb18c7
+  checksum: e2959a5fecdc53f8a524891a16e66dfc330ee0519e89c2579893179db686e10cfa6079a68e0fb8fd00eedbcaf3eabfd10916461939f3bc02ef671d848532c37e
   languageName: node
   linkType: hard
 
@@ -7001,7 +7942,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/glob@npm:^7.1.1, @types/glob@npm:^7.1.3":
+"@types/glob@npm:^7.1.1":
   version: 7.2.0
   resolution: "@types/glob@npm:7.2.0"
   dependencies:
@@ -7012,30 +7953,30 @@ __metadata:
   linkType: hard
 
 "@types/graceful-fs@npm:^4.1.2":
-  version: 4.1.9
-  resolution: "@types/graceful-fs@npm:4.1.9"
+  version: 4.1.6
+  resolution: "@types/graceful-fs@npm:4.1.6"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 79d746a8f053954bba36bd3d94a90c78de995d126289d656fb3271dd9f1229d33f678da04d10bce6be440494a5a73438e2e363e92802d16b8315b051036c5256
+  checksum: c3070ccdc9ca0f40df747bced1c96c71a61992d6f7c767e8fd24bb6a3c2de26e8b84135ede000b7e79db530a23e7e88dcd9db60eee6395d0f4ce1dae91369dd4
   languageName: node
   linkType: hard
 
 "@types/hast@npm:^2.0.0":
-  version: 2.3.8
-  resolution: "@types/hast@npm:2.3.8"
+  version: 2.3.5
+  resolution: "@types/hast@npm:2.3.5"
   dependencies:
     "@types/unist": "npm:^2"
-  checksum: 4c3b3efb7067d32a568a9bf5d2a7599f99ec08c2eaade3aaeb579b7a31bcdf8f6475f56c1ac5bc3f4e4e07b84a93a9b1cf1ef9a8b52b39e3deabea7989e5dd4b
+  checksum: e435e9fbf6afc616ade377d2246a632fb75f4064be4bfd619b67a1ba0d9935d75968a18fbdb66535dfb5e77ef81f4b9b56fd8f35c1cffa34b48ddb0287fec91e
   languageName: node
   linkType: hard
 
 "@types/hoist-non-react-statics@npm:^3.3.0":
-  version: 3.3.5
-  resolution: "@types/hoist-non-react-statics@npm:3.3.5"
+  version: 3.3.1
+  resolution: "@types/hoist-non-react-statics@npm:3.3.1"
   dependencies:
     "@types/react": "npm:*"
     hoist-non-react-statics: "npm:^3.3.0"
-  checksum: b645b062a20cce6ab1245ada8274051d8e2e0b2ee5c6bd58215281d0ec6dae2f26631af4e2e7c8abe238cdcee73fcaededc429eef569e70908f82d0cc0ea31d7
+  checksum: 071e6d75a0ed9aa0e9ca2cc529a8c15bf7ac3e4a37aac279772ea6036fd0bf969b67fb627b65cfce65adeab31fec1e9e95b4dcdefeab075b580c0c7174206f63
   languageName: node
   linkType: hard
 
@@ -7046,49 +7987,42 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/html-minifier-terser@npm:^6.0.0":
-  version: 6.1.0
-  resolution: "@types/html-minifier-terser@npm:6.1.0"
-  checksum: 06bb3e1e8ebff43602c826d67f53f1fd3a6b9c751bfbc67d7ea4e85679446a639e20e60adad8c9d44ab4baf1337b3861b91e7e5e2be798575caf0cc1a5712552
-  languageName: node
-  linkType: hard
-
 "@types/http-errors@npm:*":
-  version: 2.0.4
-  resolution: "@types/http-errors@npm:2.0.4"
-  checksum: 1f3d7c3b32c7524811a45690881736b3ef741bf9849ae03d32ad1ab7062608454b150a4e7f1351f83d26a418b2d65af9bdc06198f1c079d75578282884c4e8e3
+  version: 2.0.1
+  resolution: "@types/http-errors@npm:2.0.1"
+  checksum: 3bb0c50b0a652e679a84c30cd0340d696c32ef6558518268c238840346c077f899315daaf1c26c09c57ddd5dc80510f2a7f46acd52bf949e339e35ed3ee9654f
   languageName: node
   linkType: hard
 
 "@types/http-proxy@npm:^1.17.8":
-  version: 1.17.14
-  resolution: "@types/http-proxy@npm:1.17.14"
+  version: 1.17.11
+  resolution: "@types/http-proxy@npm:1.17.11"
   dependencies:
     "@types/node": "npm:*"
-  checksum: aa1a3e66cd43cbf06ea5901bf761d2031200a0ab42ba7e462a15c752e70f8669f21fb3be7c2f18fefcb83b95132dfa15740282e7421b856745598fbaea8e3a42
+  checksum: 7cda456611b4adfdd87e4317745af643153d502576fb7095806d5b1b397b9a878b105e14abff9b7ab1d1c71132b61b5fc7052461f766165963950f1b46e18315
   languageName: node
   linkType: hard
 
 "@types/is-function@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "@types/is-function@npm:1.0.3"
-  checksum: c762c053635bddbd800cd931979565c8e2bf7a6cd8364dc8f192850dd6df650517542df3af762bbccb619d78cfbe26ec191b0f133e45d743d6a968fe926d112f
+  version: 1.0.1
+  resolution: "@types/is-function@npm:1.0.1"
+  checksum: 07200dabf7e2a812be59f0556c40c714ee767deaa50291fe98030c5f8ff291df2950b027b964859ea5cdd5b5ac5dbb51434422851695f53f1d2a81374da51717
   languageName: node
   linkType: hard
 
 "@types/istanbul-lib-coverage@npm:*, @types/istanbul-lib-coverage@npm:^2.0.0, @types/istanbul-lib-coverage@npm:^2.0.1":
-  version: 2.0.6
-  resolution: "@types/istanbul-lib-coverage@npm:2.0.6"
-  checksum: 3feac423fd3e5449485afac999dcfcb3d44a37c830af898b689fadc65d26526460bedb889db278e0d4d815a670331796494d073a10ee6e3a6526301fe7415778
+  version: 2.0.4
+  resolution: "@types/istanbul-lib-coverage@npm:2.0.4"
+  checksum: a25d7589ee65c94d31464c16b72a9dc81dfa0bea9d3e105ae03882d616e2a0712a9c101a599ec482d297c3591e16336962878cb3eb1a0a62d5b76d277a890ce7
   languageName: node
   linkType: hard
 
 "@types/istanbul-lib-report@npm:*":
-  version: 3.0.3
-  resolution: "@types/istanbul-lib-report@npm:3.0.3"
+  version: 3.0.0
+  resolution: "@types/istanbul-lib-report@npm:3.0.0"
   dependencies:
     "@types/istanbul-lib-coverage": "npm:*"
-  checksum: b91e9b60f865ff08cb35667a427b70f6c2c63e88105eadd29a112582942af47ed99c60610180aa8dcc22382fa405033f141c119c69b95db78c4c709fbadfeeb4
+  checksum: f121dcac8a6b8184f3cab97286d8d519f1937fa8620ada5dbc43b699d602b8be289e4a4bccbd6ee1aade6869d3c9fb68bf04c6fdca8c5b0c4e7e314c31c7900a
   languageName: node
   linkType: hard
 
@@ -7103,54 +8037,35 @@ __metadata:
   linkType: hard
 
 "@types/istanbul-reports@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "@types/istanbul-reports@npm:3.0.4"
+  version: 3.0.1
+  resolution: "@types/istanbul-reports@npm:3.0.1"
   dependencies:
     "@types/istanbul-lib-report": "npm:*"
-  checksum: 93eb18835770b3431f68ae9ac1ca91741ab85f7606f310a34b3586b5a34450ec038c3eed7ab19266635499594de52ff73723a54a72a75b9f7d6a956f01edee95
+  checksum: f1ad54bc68f37f60b30c7915886b92f86b847033e597f9b34f2415acdbe5ed742fa559a0a40050d74cdba3b6a63c342cac1f3a64dba5b68b66a6941f4abd7903
   languageName: node
   linkType: hard
 
 "@types/jasmine@npm:^3.10.2":
-  version: 3.10.16
-  resolution: "@types/jasmine@npm:3.10.16"
-  checksum: c01ed8dfb7428034a0c115b3185c6be0a60a041222bfa902f837a7ed28dfb51b6a75da7111e31f830f7b13171df58a9b1117f341264caf0eb0c97278ee777e0b
+  version: 3.10.11
+  resolution: "@types/jasmine@npm:3.10.11"
+  checksum: 6c11752cefc281e57835f647fefc4ff440670486622017f7e20941068c80dde1b5f469bc108c1d9091a26e2045ac811d2bd7ab905a756ddc49fd69d34b95acb0
   languageName: node
   linkType: hard
 
-"@types/jest-specific-snapshot@npm:^0.5.3":
-  version: 0.5.9
-  resolution: "@types/jest-specific-snapshot@npm:0.5.9"
-  dependencies:
-    "@types/jest": "npm:*"
-  checksum: b452e423a024d20aa1091cb962f4b0c81c04fc5065af7e1ecb2b4b46f90255ebefd18463d9c39fcd2a15ba34c4ab09bfc4f03e35d8227da5f1bb73f79b9836d1
-  languageName: node
-  linkType: hard
-
-"@types/jest@npm:*, @types/jest@npm:^29.2.3":
-  version: 29.5.8
-  resolution: "@types/jest@npm:29.5.8"
+"@types/jest@npm:^29.2.3":
+  version: 29.5.3
+  resolution: "@types/jest@npm:29.5.3"
   dependencies:
     expect: "npm:^29.0.0"
     pretty-format: "npm:^29.0.0"
-  checksum: a8194e26c642780d5b2e22170ac538f7975e04aeaa76d87f8e5ac921f7a8fffc5252029a9e6efacdb0ec4b45320322c8e1f27a5338083f49efbd3c6021314f7e
-  languageName: node
-  linkType: hard
-
-"@types/jest@npm:^26.0.16":
-  version: 26.0.24
-  resolution: "@types/jest@npm:26.0.24"
-  dependencies:
-    jest-diff: "npm:^26.0.0"
-    pretty-format: "npm:^26.0.0"
-  checksum: 1391071e48a3452adf34baca6669e1ba41ef5198c620d373f29850bfbb4ef789db27adb224ccfbaefa10d12ebe2a2fa6c9472596989c1e75f67707470b3b7af2
+  checksum: e8b4eda3ba379b21fcd5c2d1d531ec94f636676f1690f06ff3f7b8dc199c2cec711d4c4e122175f05d50040e5dec69f3c13ef88bd825f0b1a1ac1332eb072c12
   languageName: node
   linkType: hard
 
 "@types/json-schema@npm:*, @types/json-schema@npm:^7.0.4, @types/json-schema@npm:^7.0.5, @types/json-schema@npm:^7.0.8, @types/json-schema@npm:^7.0.9":
-  version: 7.0.15
-  resolution: "@types/json-schema@npm:7.0.15"
-  checksum: 1a3c3e06236e4c4aab89499c428d585527ce50c24fe8259e8b3926d3df4cfbbbcf306cfc73ddfb66cbafc973116efd15967020b0f738f63e09e64c7d260519e7
+  version: 7.0.12
+  resolution: "@types/json-schema@npm:7.0.12"
+  checksum: 7a72ba9cb7d2b45d7bb032e063c9eeb1ce4102d62551761e84c91f99f8273ba5aaffd34be835869456ec7c40761b4389009d9e777c0020a7227ca0f5e3238e94
   languageName: node
   linkType: hard
 
@@ -7171,25 +8086,25 @@ __metadata:
   linkType: hard
 
 "@types/linkify-it@npm:*":
-  version: 3.0.5
-  resolution: "@types/linkify-it@npm:3.0.5"
-  checksum: fac28f41a6e576282300a459d70ea0d33aab70dbb77c3d09582bb0335bb00d862b6de69585792a4d590aae4173fbab0bf28861e2d90ca7b2b1439b52688e9ff6
+  version: 3.0.2
+  resolution: "@types/linkify-it@npm:3.0.2"
+  checksum: dff8f10fafb885422474e456596f12d518ec4cdd6c33cca7a08e7c86b912d301ed91cf5a7613e148c45a12600dc9ab3d85ad16d5b48dc1aaeda151a68f16b536
   languageName: node
   linkType: hard
 
 "@types/lodash-es@npm:^4.17.5":
-  version: 4.17.11
-  resolution: "@types/lodash-es@npm:4.17.11"
+  version: 4.17.8
+  resolution: "@types/lodash-es@npm:4.17.8"
   dependencies:
     "@types/lodash": "npm:*"
-  checksum: 87516f652eb13a544590351dd1986df37929c83d3393491c1b5f0e8d36a604ed9c00d4da9c77df052f38affd9bac33a4534ec52f679989e38bedb595fbbc23bb
+  checksum: 4a96201d062e09f302e09ae69f529a6146345eed174a60c5c5119ee2b7a2fd1e44b1c90ce7d1a83a9c094b90d9961960d7f622bf290c7df4d20703a146ac3c1a
   languageName: node
   linkType: hard
 
 "@types/lodash@npm:*, @types/lodash@npm:^4.14.167":
-  version: 4.14.201
-  resolution: "@types/lodash@npm:4.14.201"
-  checksum: 9b56a2a650880045343055e63c7ad73df97188453aa3de8375dc97670748d467f6f4a3b59d689f4ae45dd947d4c0b3ecd873763910336238736056dce20cfe56
+  version: 4.14.197
+  resolution: "@types/lodash@npm:4.14.197"
+  checksum: a09f6c9308089e02ffb16da7b557c680ca38d3af9591455a0a257e5a7a78febd3d6da615c4f738ac9a575e68b0de81f399f13058cab1691a0737d552d3d02971
   languageName: node
   linkType: hard
 
@@ -7204,32 +8119,32 @@ __metadata:
   linkType: hard
 
 "@types/mdast@npm:^3.0.0":
-  version: 3.0.15
-  resolution: "@types/mdast@npm:3.0.15"
+  version: 3.0.12
+  resolution: "@types/mdast@npm:3.0.12"
   dependencies:
     "@types/unist": "npm:^2"
-  checksum: 050a5c1383928b2688dd145382a22535e2af87dc3fd592c843abb7851bcc99893a1ee0f63be19fc4e89779387ec26a57486cfb425b016c0b2a98a17fc4a1e8b3
+  checksum: 7446c87e3c51db5e3daa7490f9d04c183e619a8f6542f5dbaa263599052adc89af17face06609d4f5c5c49aacee2bff04748bba0342cbc4106904f9cf1121a69
   languageName: node
   linkType: hard
 
 "@types/mdurl@npm:*":
-  version: 1.0.5
-  resolution: "@types/mdurl@npm:1.0.5"
-  checksum: e8e872e8da8f517a9c748b06cec61c947cb73fd3069e8aeb0926670ec5dfac5d30549b3d0f1634950401633e812f9b7263f2d5dbe7e98fce12bcb2c659aa4b21
+  version: 1.0.2
+  resolution: "@types/mdurl@npm:1.0.2"
+  checksum: 6a6fba0f8177a76d58f8f91eb1478061c9a0a87a4177ff69b5c316898e74086c1f6572fa5e748e3b976a6e50dfc179fab24fa8d3f57e29aa6ee18cec01358c45
   languageName: node
   linkType: hard
 
 "@types/mime@npm:*":
-  version: 3.0.4
-  resolution: "@types/mime@npm:3.0.4"
-  checksum: a6139c8e1f705ef2b064d072f6edc01f3c099023ad7c4fce2afc6c2bf0231888202adadbdb48643e8e20da0ce409481a49922e737eca52871b3dc08017455843
+  version: 3.0.1
+  resolution: "@types/mime@npm:3.0.1"
+  checksum: 4040fac73fd0cea2460e29b348c1a6173da747f3a87da0dbce80dd7a9355a3d0e51d6d9a401654f3e5550620e3718b5a899b2ec1debf18424e298a2c605346e7
   languageName: node
   linkType: hard
 
 "@types/mime@npm:^1":
-  version: 1.3.5
-  resolution: "@types/mime@npm:1.3.5"
-  checksum: e29a5f9c4776f5229d84e525b7cd7dd960b51c30a0fb9a028c0821790b82fca9f672dab56561e2acd9e8eed51d431bde52eafdfef30f643586c4162f1aecfc78
+  version: 1.3.2
+  resolution: "@types/mime@npm:1.3.2"
+  checksum: 0493368244cced1a69cb791b485a260a422e6fcc857782e1178d1e6f219f1b161793e9f87f5fae1b219af0f50bee24fcbe733a18b4be8fdd07a38a8fb91146fd
   languageName: node
   linkType: hard
 
@@ -7248,60 +8163,47 @@ __metadata:
   linkType: hard
 
 "@types/minimist@npm:^1.2.0, @types/minimist@npm:^1.2.1":
-  version: 1.2.5
-  resolution: "@types/minimist@npm:1.2.5"
-  checksum: 477047b606005058ab0263c4f58097136268007f320003c348794f74adedc3166ffc47c80ec3e94687787f2ab7f4e72c468223946e79892cf0fd9e25e9970a90
+  version: 1.2.2
+  resolution: "@types/minimist@npm:1.2.2"
+  checksum: b8da83c66eb4aac0440e64674b19564d9d86c80ae273144db9681e5eeff66f238ade9515f5006ffbfa955ceff8b89ad2bd8ec577d7caee74ba101431fb07045d
   languageName: node
   linkType: hard
 
 "@types/node-fetch@npm:^2.5.7":
-  version: 2.6.9
-  resolution: "@types/node-fetch@npm:2.6.9"
-  dependencies:
-    "@types/node": "npm:*"
-    form-data: "npm:^4.0.0"
-  checksum: fc46141516191699b5f34fdf3516d3bd67421ad18da9f14785252abd22c1aa7a80ea5bcde835531b33df681f2b0d671786c3e987941547532fb447d77ebb8588
-  languageName: node
-  linkType: hard
-
-"@types/node-forge@npm:^1.3.0":
-  version: 1.3.9
-  resolution: "@types/node-forge@npm:1.3.9"
+  version: 2.6.4
+  resolution: "@types/node-fetch@npm:2.6.4"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 89072464969ffc9b700b2fc280560f68c077dba539b23b959ee75ce51b7d9f58294850ed23c0bf6bf98155d48ef9d5a62975c53763819d1a5beb6babf699bcbd
+    form-data: "npm:^3.0.0"
+  checksum: e904b5f887099a2728979bce9bbae9cc5f851e97a8dc71fe9a6f900798ef0cab761a3027609e70ca73b0bfbd0a9433acdbc052301762eb2d7695d97975746be6
   languageName: node
   linkType: hard
 
 "@types/node@npm:*, @types/node@npm:>=10.0.0, @types/node@npm:>=12":
-  version: 20.9.0
-  resolution: "@types/node@npm:20.9.0"
-  dependencies:
-    undici-types: "npm:~5.26.4"
-  checksum: a934f7645ed117a27857147403b0c657ffbca578c8f280e4c21d27dfb43e58dc4f24c4319d4335b8a4fa08e28fb2dc905a5bd5e4bc8878047164c56c1b162139
+  version: 20.5.0
+  resolution: "@types/node@npm:20.5.0"
+  checksum: 0d3f4b66f6514ec2cd4d600daeac666dc16b148b576013c830333e27b9eba12be8577f243028d285e45114d5f98646bc4b89ef1f9ba47d5a5cbb55018ff046bd
   languageName: node
   linkType: hard
 
 "@types/node@npm:^14.0.10 || ^16.0.0, @types/node@npm:^14.14.20 || ^16.0.0, @types/node@npm:^16.4.7":
-  version: 16.18.61
-  resolution: "@types/node@npm:16.18.61"
-  checksum: ea2fdb3876f77ef8be0bdeee7b0c301a6bf27ab743f55a10486725d8ddd51b84edea7c219e9d09fd24650e8b14c040207a48169bd396915e7a989bac1a7c0bee
+  version: 16.18.40
+  resolution: "@types/node@npm:16.18.40"
+  checksum: b373cc650558bc9c82eb6ac31672d588964d74898659adb979eb18f2ccbd175b8d500101173bb64d78a8ae66f6883f5db39713f7d351ccb1f201eff16792c334
   languageName: node
   linkType: hard
 
 "@types/node@npm:^14.14.31":
-  version: 14.18.63
-  resolution: "@types/node@npm:14.18.63"
-  checksum: 82a7775898c2ea6db0b610a463512206fb2c7adc1af482c7eb44b99d94375fff51c74f67ae75a63c5532971159f30c866a4d308000624ef02fd9a7175e277019
+  version: 14.18.54
+  resolution: "@types/node@npm:14.18.54"
+  checksum: 097e1f786813d7f55288b3b4cf81d831c2e43c4217eb366ece0deb2544324e9c0054f5e47605f74890d0d880bfc67e1a1d606abc481a4e409a999b21af2f8a46
   languageName: node
   linkType: hard
 
 "@types/node@npm:^18.11.9":
-  version: 18.18.9
-  resolution: "@types/node@npm:18.18.9"
-  dependencies:
-    undici-types: "npm:~5.26.4"
-  checksum: ebd98b117c868edc597807cd0dab214b6110b9cd5ee406632641d0cf5b8bd7cb199caaac657a046d9203c441dbcfb3c71154ffa2d615ec89f80e6972143e6ec8
+  version: 18.17.5
+  resolution: "@types/node@npm:18.17.5"
+  checksum: 646698e07ba01ed14ddb2fb5c9a69defa668ed9828baeec6854a323b70944e7cc0656b3823022c61d3f085d194132a668e5d3653cb07e8289248d7f220ca1bb2
   languageName: node
   linkType: hard
 
@@ -7313,25 +8215,23 @@ __metadata:
   linkType: hard
 
 "@types/normalize-package-data@npm:^2.4.0":
-  version: 2.4.4
-  resolution: "@types/normalize-package-data@npm:2.4.4"
-  checksum: 65dff72b543997b7be8b0265eca7ace0e34b75c3e5fee31de11179d08fa7124a7a5587265d53d0409532ecb7f7fba662c2012807963e1f9b059653ec2c83ee05
+  version: 2.4.1
+  resolution: "@types/normalize-package-data@npm:2.4.1"
+  checksum: e87bccbf11f95035c89a132b52b79ce69a1e3652fe55962363063c9c0dae0fe2477ebc585e03a9652adc6f381d24ba5589cc5e51849df4ced3d3e004a7d40ed5
   languageName: node
   linkType: hard
 
 "@types/npmlog@npm:^4.1.2":
-  version: 4.1.6
-  resolution: "@types/npmlog@npm:4.1.6"
-  dependencies:
-    "@types/node": "npm:*"
-  checksum: 0151a01f8c12a8b2713207894f55262d334a6475ea8b741d2443bbb4524757bbdd2e1d27c2c642f4962b380d6b0bdd7293d0c54d434f15e3c9e8adbf619a8111
+  version: 4.1.4
+  resolution: "@types/npmlog@npm:4.1.4"
+  checksum: 740f7431ccfc0e127aa8d162fe05c6ce8aa71290be020d179b2824806d19bd2c706c7e0c9a3c9963cefcdf2ceacb1dec6988c394c3694451387759dafe0aa927
   languageName: node
   linkType: hard
 
 "@types/parse-json@npm:^4.0.0":
-  version: 4.0.2
-  resolution: "@types/parse-json@npm:4.0.2"
-  checksum: 5bf62eec37c332ad10059252fc0dab7e7da730764869c980b0714777ad3d065e490627be9f40fc52f238ffa3ac4199b19de4127196910576c2fe34dd47c7a470
+  version: 4.0.0
+  resolution: "@types/parse-json@npm:4.0.0"
+  checksum: 4df9de98150d2978afc2161482a3a8e6617883effba3223324f079de97ba7eabd7d84b90ced11c3f82b0c08d4a8383f678c9f73e9c41258f769b3fa234a2bb4f
   languageName: node
   linkType: hard
 
@@ -7366,49 +8266,49 @@ __metadata:
   linkType: hard
 
 "@types/pretty-hrtime@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "@types/pretty-hrtime@npm:1.0.3"
-  checksum: 288061dff992c8107d5c7b5a1277bbb0a314a27eb10087dea628a08fa37694a655191a69e25a212c95e61e498363c48ad9e281d23964a448f6c14100a6be0910
+  version: 1.0.1
+  resolution: "@types/pretty-hrtime@npm:1.0.1"
+  checksum: a6cdee417eea6f7af914e4fcd13e05822864ce10b5d7646525632e86d69b79123eec55a5d3fff0155ba46b61902775e1644bcb80e1e4dffdac28e7febb089083
   languageName: node
   linkType: hard
 
 "@types/prop-types@npm:*, @types/prop-types@npm:^15.7.0":
-  version: 15.7.10
-  resolution: "@types/prop-types@npm:15.7.10"
-  checksum: 39ecc2d9e439ed16b32937a08d98b84ed4a70f53bcd52c8564c0cd7a36fe1004ca83a1fb94b13c1b7a5c048760f06445c3c6a91a6972c8eff652c0b50c9424b1
+  version: 15.7.5
+  resolution: "@types/prop-types@npm:15.7.5"
+  checksum: 5b43b8b15415e1f298243165f1d44390403bb2bd42e662bca3b5b5633fdd39c938e91b7fce3a9483699db0f7a715d08cef220c121f723a634972fdf596aec980
   languageName: node
   linkType: hard
 
 "@types/q@npm:^1.5.1":
-  version: 1.5.8
-  resolution: "@types/q@npm:1.5.8"
-  checksum: eaa21cd2cf562956433937e728301ee8c63fe6dd91718cd4a1005744ec5a70c4ebe8e45e26af83ecbe45aa12ef0bf1646e42dac868780d1f3a99044547035706
+  version: 1.5.6
+  resolution: "@types/q@npm:1.5.6"
+  checksum: 84af6989fb64b5061ef95c27cf3c0bcabd624a6209c7bcea30f5c8928ec05a78fd779d1219e3fab785260f59db65906e6be17abf4e723cf42c1198b3cfe3bae3
   languageName: node
   linkType: hard
 
 "@types/qs@npm:*, @types/qs@npm:^6.9.5":
-  version: 6.9.10
-  resolution: "@types/qs@npm:6.9.10"
-  checksum: 3e479ee056bd2b60894baa119d12ecd33f20a25231b836af04654e784c886f28a356477630430152a86fba253da65d7ecd18acffbc2a8877a336e75aa0272c67
+  version: 6.9.7
+  resolution: "@types/qs@npm:6.9.7"
+  checksum: 7fd6f9c25053e9b5bb6bc9f9f76c1d89e6c04f7707a7ba0e44cc01f17ef5284adb82f230f542c2d5557d69407c9a40f0f3515e8319afd14e1e16b5543ac6cdba
   languageName: node
   linkType: hard
 
 "@types/range-parser@npm:*":
-  version: 1.2.7
-  resolution: "@types/range-parser@npm:1.2.7"
-  checksum: 95640233b689dfbd85b8c6ee268812a732cf36d5affead89e806fe30da9a430767af8ef2cd661024fd97e19d61f3dec75af2df5e80ec3bea000019ab7028629a
+  version: 1.2.4
+  resolution: "@types/range-parser@npm:1.2.4"
+  checksum: b7c0dfd5080a989d6c8bb0b6750fc0933d9acabeb476da6fe71d8bdf1ab65e37c136169d84148034802f48378ab94e3c37bb4ef7656b2bec2cb9c0f8d4146a95
   languageName: node
   linkType: hard
 
 "@types/react-redux@npm:^7.1.20":
-  version: 7.1.30
-  resolution: "@types/react-redux@npm:7.1.30"
+  version: 7.1.25
+  resolution: "@types/react-redux@npm:7.1.25"
   dependencies:
     "@types/hoist-non-react-statics": "npm:^3.3.0"
     "@types/react": "npm:*"
     hoist-non-react-statics: "npm:^3.3.0"
     redux: "npm:^4.0.0"
-  checksum: 43683f20ade7ed972a2f9dc28c33d9a82d771af3cc256190ca1b1d62d4ea0e24fad3078c53f1e5c097fa3f56ec7ab30c75562eab6faeb5e8d93ecc365e8e505b
+  checksum: 1c5780ff46b9a2bba3b68b26645ce9704cd3ef387141240c1369fcbef51370a84b8a5fc6ca27966f96f6e5b41618c88f498fedc7056870b207cbafbb4da34e91
   languageName: node
   linkType: hard
 
@@ -7431,13 +8331,13 @@ __metadata:
   linkType: hard
 
 "@types/react@npm:*":
-  version: 18.2.37
-  resolution: "@types/react@npm:18.2.37"
+  version: 18.2.20
+  resolution: "@types/react@npm:18.2.20"
   dependencies:
     "@types/prop-types": "npm:*"
     "@types/scheduler": "npm:*"
     csstype: "npm:^3.0.2"
-  checksum: fab3a5960e710aad6c16ffe57f48a470c6bbbe9e6363f70accf114191ea3192a204e33b5657324f14e64b2095986327db6b728fc15156e05f7d30b6dca0d66a3
+  checksum: 469b0c1fb36cd97ea0b39281a521a667e459fa3b30cdeb7af6a22ebd38b0866c2fcb75416532d10a2ec58e0a421a698a0026810840c693c0708fb2bb7926c0e9
   languageName: node
   linkType: hard
 
@@ -7451,11 +8351,11 @@ __metadata:
   linkType: hard
 
 "@types/responselike@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "@types/responselike@npm:1.0.3"
+  version: 1.0.0
+  resolution: "@types/responselike@npm:1.0.0"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 6ac4b35723429b11b117e813c7acc42c3af8b5554caaf1fc750404c1ae59f9b7376bc69b9e9e194a5a97357a597c2228b7173d317320f0360d617b6425212f58
+  checksum: e4972389457e4edce3cbba5e8474fb33684d73879433a9eec989d0afb7e550fd6fa3ffb8fe68dbb429288d10707796a193bc0007c4e8429fd267bdc4d8404632
   languageName: node
   linkType: hard
 
@@ -7467,46 +8367,46 @@ __metadata:
   linkType: hard
 
 "@types/scheduler@npm:*":
-  version: 0.16.6
-  resolution: "@types/scheduler@npm:0.16.6"
-  checksum: 4cec89727584a50c66a07c322469a4d9e64f5b0117691f36afd4ceae75741c0038a6e107c05e515511d5358b5897becbe065b6e4560664cb1b16f6754915043d
+  version: 0.16.3
+  resolution: "@types/scheduler@npm:0.16.3"
+  checksum: 2b0aec39c24268e3ce938c5db2f2e77f5c3dd280e05c262d9c2fe7d890929e4632a6b8e94334017b66b45e4f92a5aa42ba3356640c2a1175fa37bef2f5200767
   languageName: node
   linkType: hard
 
 "@types/semver@npm:^7.3.12":
-  version: 7.5.5
-  resolution: "@types/semver@npm:7.5.5"
-  checksum: 1b0be2c4d830f5ef002a305308e06e3616fc38a41c9a2c5b4267df82a038d9bd0ba32ec1da82a52db84a720be7e4b69bac7593797d8dc1400a69069af8f19219
+  version: 7.5.0
+  resolution: "@types/semver@npm:7.5.0"
+  checksum: 8fbfbf79e9c14c3c20160a42145a146cba44d9763d0fac78358b394dc36e41bc2590bc4f0129c6fcbbc9b30f12ea1ba821bfe84b29dc80897f315cc7dd251393
   languageName: node
   linkType: hard
 
 "@types/send@npm:*":
-  version: 0.17.4
-  resolution: "@types/send@npm:0.17.4"
+  version: 0.17.1
+  resolution: "@types/send@npm:0.17.1"
   dependencies:
     "@types/mime": "npm:^1"
     "@types/node": "npm:*"
-  checksum: 28320a2aa1eb704f7d96a65272a07c0bf3ae7ed5509c2c96ea5e33238980f71deeed51d3631927a77d5250e4091b3e66bce53b42d770873282c6a20bb8b0280d
+  checksum: 6420837887858f7aa82f2c0272f73edb42385bd0978f43095e83590a405d86c8cc6d918c30b2d542f1d8bddc9f3d16c2e8fdfca936940de71b97c45f228d1896
   languageName: node
   linkType: hard
 
 "@types/serve-index@npm:^1.9.1":
-  version: 1.9.4
-  resolution: "@types/serve-index@npm:1.9.4"
+  version: 1.9.1
+  resolution: "@types/serve-index@npm:1.9.1"
   dependencies:
     "@types/express": "npm:*"
-  checksum: 72727c88d54da5b13275ebfb75dcdc4aa12417bbe9da1939e017c4c5f0c906fae843aa4e0fbfe360e7ee9df2f3d388c21abfc488f77ce58693fb57809f8ded92
+  checksum: 026f3995fb500f6df7c3fe5009e53bad6d739e20b84089f58ebfafb2f404bbbb6162bbe33f72d2f2af32d5b8d3799c8e179793f90d9ed5871fb8591190bb6056
   languageName: node
   linkType: hard
 
 "@types/serve-static@npm:*, @types/serve-static@npm:^1.13.10":
-  version: 1.15.5
-  resolution: "@types/serve-static@npm:1.15.5"
+  version: 1.15.2
+  resolution: "@types/serve-static@npm:1.15.2"
   dependencies:
     "@types/http-errors": "npm:*"
     "@types/mime": "npm:*"
     "@types/node": "npm:*"
-  checksum: 49aa21c367fffe4588fc8c57ea48af0ea7cbadde7418bc53cde85d8bd57fd2a09a293970d9ea86e79f17a87f8adeb3e20da76aab38e1c4d1567931fa15c8af38
+  checksum: d5f8f5aaa765be6417aa3f2ebe36591f4e9d2d8a7480edf7d3db041427420fd565cb921fc021271098dd2afafce2b443fc0d978faa3ae21a2a58ebde7d525e9e
   languageName: node
   linkType: hard
 
@@ -7518,25 +8418,25 @@ __metadata:
   linkType: hard
 
 "@types/sizzle@npm:^2.3.2":
-  version: 2.3.6
-  resolution: "@types/sizzle@npm:2.3.6"
-  checksum: 1573d6c86fdf0d7d3d2759b0db65e374b99d773b57781443a6400ce3d0a3bf6a3be393fb9aee5076eff8399c14b7b4d3f51391d1d5cb6a3dcbdccee06a5f6e3e
+  version: 2.3.3
+  resolution: "@types/sizzle@npm:2.3.3"
+  checksum: 586a9fb1f6ff3e325e0f2cc1596a460615f0bc8a28f6e276ac9b509401039dd242fa8b34496d3a30c52f5b495873922d09a9e76c50c2ab2bcc70ba3fb9c4e160
   languageName: node
   linkType: hard
 
 "@types/sockjs@npm:^0.3.33":
-  version: 0.3.36
-  resolution: "@types/sockjs@npm:0.3.36"
+  version: 0.3.33
+  resolution: "@types/sockjs@npm:0.3.33"
   dependencies:
     "@types/node": "npm:*"
-  checksum: b4b5381122465d80ea8b158537c00bc82317222d3fb31fd7229ff25b31fa89134abfbab969118da55622236bf3d8fee75759f3959908b5688991f492008f29bc
+  checksum: b9bbb2b5c5ead2fb884bb019f61a014e37410bddd295de28184e1b2e71ee6b04120c5ba7b9954617f0bdf962c13d06249ce65004490889c747c80d3f628ea842
   languageName: node
   linkType: hard
 
 "@types/source-list-map@npm:*":
-  version: 0.1.5
-  resolution: "@types/source-list-map@npm:0.1.5"
-  checksum: cad2cc55abdecb9834caa0cbc089348dabc80f73cee850f0d6c89b71aee68dca0cb99a16d0420808f36c73b0708d5a280634a5e4cb1d6f985e41f03bfa33b625
+  version: 0.1.2
+  resolution: "@types/source-list-map@npm:0.1.2"
+  checksum: 79c5bcbe2d29c17c5a5203ccabf8dae9c2bf7ff1dbcca2198a1f6800195b58c67d44eaa20765ae49841b15fe98d74e8cd26eed10974559dd2f99d9f6dfd0ebf9
   languageName: node
   linkType: hard
 
@@ -7548,63 +8448,63 @@ __metadata:
   linkType: hard
 
 "@types/stack-utils@npm:^2.0.0":
-  version: 2.0.3
-  resolution: "@types/stack-utils@npm:2.0.3"
-  checksum: 72576cc1522090fe497337c2b99d9838e320659ac57fa5560fcbdcbafcf5d0216c6b3a0a8a4ee4fdb3b1f5e3420aa4f6223ab57b82fef3578bec3206425c6cf5
+  version: 2.0.1
+  resolution: "@types/stack-utils@npm:2.0.1"
+  checksum: 205fdbe3326b7046d7eaf5e494d8084f2659086a266f3f9cf00bccc549c8e36e407f88168ad4383c8b07099957ad669f75f2532ed4bc70be2b037330f7bae019
   languageName: node
   linkType: hard
 
 "@types/tapable@npm:^1, @types/tapable@npm:^1.0.5":
-  version: 1.0.11
-  resolution: "@types/tapable@npm:1.0.11"
-  checksum: e09d55d25b6d549e31c456e01a80108698327bfe9548b7b93575e6644fbc4d2e443e0c74d845aee1b51d4ba21280c458bb357a1787ba7bec0cbc2d0e1b596118
+  version: 1.0.8
+  resolution: "@types/tapable@npm:1.0.8"
+  checksum: 9a7abe6667f4e93af1ecacfed7596ea79186eb01e625b2e5f140ca63c236ac59d347a3c6780e34b58f22536b58c9822e0f2d5ddc2dfdec0b482e7cbb5b7fd575
   languageName: node
   linkType: hard
 
-"@types/trusted-types@npm:*":
-  version: 2.0.6
-  resolution: "@types/trusted-types@npm:2.0.6"
-  checksum: 04250c7175e565b4d32cc2fd9ac1824ab9f0b2cfa82a7978581ffa1c96d7ed4166dc2415b4670cfcb734b389c49c3e9fc028b06ff325d77cc9e6f06bb05e273e
+"@types/trusted-types@npm:*, @types/trusted-types@npm:^2.0.2":
+  version: 2.0.3
+  resolution: "@types/trusted-types@npm:2.0.3"
+  checksum: 4794804bc4a4a173d589841b6d26cf455ff5dc4f3e704e847de7d65d215f2e7043d8757e4741ce3a823af3f08260a8d04a1a6e9c5ec9b20b7b04586956a6b005
   languageName: node
   linkType: hard
 
 "@types/uglify-js@npm:*":
-  version: 3.17.4
-  resolution: "@types/uglify-js@npm:3.17.4"
+  version: 3.17.1
+  resolution: "@types/uglify-js@npm:3.17.1"
   dependencies:
     source-map: "npm:^0.6.1"
-  checksum: 4db22236be22bd5f227dcb9b4dc979342829402b02efe9043e1b70f736080f27a0808977e62657f071bc8dc9602a49d45ed398284f0cf130fd0865e120184aca
+  checksum: 4ec4c0161e561f8b89cc080a6c756a3a43f21f05f09cf7a90a83fc21529c10b18a6f5bd069d663c889f4211a59c300a4da0985e7e12b158f034ae9b4dc84ed91
   languageName: node
   linkType: hard
 
 "@types/unist@npm:^2, @types/unist@npm:^2.0.0, @types/unist@npm:^2.0.2, @types/unist@npm:^2.0.3":
-  version: 2.0.10
-  resolution: "@types/unist@npm:2.0.10"
-  checksum: e2924e18dedf45f68a5c6ccd6015cd62f1643b1b43baac1854efa21ae9e70505db94290434a23da1137d9e31eb58e54ca175982005698ac37300a1c889f6c4aa
+  version: 2.0.7
+  resolution: "@types/unist@npm:2.0.7"
+  checksum: b97a219554e83431f19a93ff113306bf0512909292815e8f32964e47d041c505af1aaa2a381c23e137c4c0b962fad58d4ce9c5c3256642921a466be43c1fc715
   languageName: node
   linkType: hard
 
-"@types/webpack-env@npm:^1.14.0, @types/webpack-env@npm:^1.16.0, @types/webpack-env@npm:^1.16.3":
-  version: 1.18.4
-  resolution: "@types/webpack-env@npm:1.18.4"
-  checksum: a1c37f8eb93fa86077b2406d3b8dd50c7505cd2b6ec46044786aa9681b0114ad6c3c3cd6402f8ecce9e4de6626c2fd91e5acda62d5d450c1f531533c3812b7c0
+"@types/webpack-env@npm:^1.16.0, @types/webpack-env@npm:^1.16.3":
+  version: 1.18.1
+  resolution: "@types/webpack-env@npm:1.18.1"
+  checksum: 10a00618f7214502a8788951feda87f8f081caefd49ea6ddd5a5f378491e9c4004163b559f469db35346ddccfc5d71d5d25f0b83abb5a48ea2769de1c17d60c0
   languageName: node
   linkType: hard
 
 "@types/webpack-sources@npm:*":
-  version: 3.2.3
-  resolution: "@types/webpack-sources@npm:3.2.3"
+  version: 3.2.0
+  resolution: "@types/webpack-sources@npm:3.2.0"
   dependencies:
     "@types/node": "npm:*"
     "@types/source-list-map": "npm:*"
     source-map: "npm:^0.7.3"
-  checksum: 7b557f242efaa10e4e3e18cc4171a0c98e22898570caefdd4f7b076fe8534b5abfac92c953c6604658dcb7218507f970230352511840fe9fdea31a9af3b9a906
+  checksum: fa23dcfb99f79cc0ba8e6ca41cb8dedb406f8d7772e8e3d3d9b443bfb36557a1a78f4de2b97905554db98beee1a2ef6f930e188977adde6452392a64dd4b7c2a
   languageName: node
   linkType: hard
 
 "@types/webpack@npm:^4.41.26, @types/webpack@npm:^4.41.8":
-  version: 4.41.36
-  resolution: "@types/webpack@npm:4.41.36"
+  version: 4.41.33
+  resolution: "@types/webpack@npm:4.41.33"
   dependencies:
     "@types/node": "npm:*"
     "@types/tapable": "npm:^1"
@@ -7612,23 +8512,23 @@ __metadata:
     "@types/webpack-sources": "npm:*"
     anymatch: "npm:^3.0.0"
     source-map: "npm:^0.6.0"
-  checksum: d143f2760bf1484079aa5684e58a0b3edcfac051f2f968ea07adccc705aee75883961a5bb86ce3ae9669f72c985d13756ce849200b71a350275dbb1b54482146
+  checksum: 4599e27b9a0531fc107de50011bb3e690f6aaa71948d5fa11527f13965a281592169af8e768386ab2f54fce00dd9949aa6190f81f2c1d3213d38381f58107356
   languageName: node
   linkType: hard
 
 "@types/ws@npm:^8.5.5":
-  version: 8.5.9
-  resolution: "@types/ws@npm:8.5.9"
+  version: 8.5.5
+  resolution: "@types/ws@npm:8.5.5"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 7cf66383b8525196875157985658f7f6b40601265023c0fbaf935a22adc8b6133cc563e2683691d61becdc3d9612deb6e8376a5c4d2ec8349aa526d467c02be6
+  checksum: b2d7da5bd469c2ff1ddcfba1da33a556dc02c539e727001e7dc7b4182935154143e96a101cc091686acefb4e115c8ee38111c6634934748b8dd2db0c851c50ab
   languageName: node
   linkType: hard
 
 "@types/yargs-parser@npm:*":
-  version: 21.0.3
-  resolution: "@types/yargs-parser@npm:21.0.3"
-  checksum: a794eb750e8ebc6273a51b12a0002de41343ffe46befef460bdbb57262d187fdf608bc6615b7b11c462c63c3ceb70abe2564c8dd8ee0f7628f38a314f74a9b9b
+  version: 21.0.0
+  resolution: "@types/yargs-parser@npm:21.0.0"
+  checksum: c4caec730c1ee09466588389ba4ac83d85a01423c539b9565bb5b5a084bff3f4e47bfb7c06e963c0ef8d4929cf6fca0bc2923a33ef16727cdba60e95c8cdd0d0
   languageName: node
   linkType: hard
 
@@ -7642,38 +8542,38 @@ __metadata:
   linkType: hard
 
 "@types/yargs@npm:^15.0.0":
-  version: 15.0.18
-  resolution: "@types/yargs@npm:15.0.18"
+  version: 15.0.15
+  resolution: "@types/yargs@npm:15.0.15"
   dependencies:
     "@types/yargs-parser": "npm:*"
-  checksum: b2c530b2e9ac1d3d7f3f408bced275bf8b2fd80cd8c377013c0ca863e6bfa52d8ffb67d8543f8ad58e09f893e324333e220aa8ba6f1be53fab81585d84a8f3be
+  checksum: cb5a4bc8b8cb3f52099c950c605cf9e5702cd4b1731c125e28f757f247253345af59c9101887c94a3add67dbf283bca5a3b38e31b9b3cdaec3bf0b1d6b6ae0b9
   languageName: node
   linkType: hard
 
 "@types/yargs@npm:^16.0.0":
-  version: 16.0.8
-  resolution: "@types/yargs@npm:16.0.8"
+  version: 16.0.5
+  resolution: "@types/yargs@npm:16.0.5"
   dependencies:
     "@types/yargs-parser": "npm:*"
-  checksum: 8dce5176c55c5dc82128dde875d68d3514a83ecd3c014092e17e431ea9b25176699f3ab48378ce968519e339b00137372f2276e7ca1f272c4ddcc83f54da4f1c
+  checksum: 9673a69487768dad14e805777bca262f7a5774d3a0964981105ffc04ff95e754f1109fa2c8210a0fe863f263c580ddf667e1345f22e018036513245b3dc3c71c
   languageName: node
   linkType: hard
 
 "@types/yargs@npm:^17.0.8":
-  version: 17.0.31
-  resolution: "@types/yargs@npm:17.0.31"
+  version: 17.0.24
+  resolution: "@types/yargs@npm:17.0.24"
   dependencies:
     "@types/yargs-parser": "npm:*"
-  checksum: 9b180fc289cc7342a584e9e552dd667d60e6e0a436be67ed8feee681cb22de1ebffacd6a1e29c5905049850c10bb1c9db45d957cfd01a97f58b33e290b233b1f
+  checksum: 03d9a985cb9331b2194a52d57a66aad88bf46aa32b3968a71cc6f39fb05c74f0709f0dd3aa9c0b29099cfe670343e3b1bd2ac6df2abfab596ede4453a616f63f
   languageName: node
   linkType: hard
 
 "@types/yauzl@npm:^2.9.1":
-  version: 2.10.3
-  resolution: "@types/yauzl@npm:2.10.3"
+  version: 2.10.0
+  resolution: "@types/yauzl@npm:2.10.0"
   dependencies:
     "@types/node": "npm:*"
-  checksum: 5ee966ea7bd6b2802f31ad4281c92c4c0b6dfa593c378a2582c58541fa113bec3d70eb0696b34ad95e8e6861a884cba6c3e351285816693ed176222f840a8c08
+  checksum: 55d27ae5d346ea260e40121675c24e112ef0247649073848e5d4e03182713ae4ec8142b98f61a1c6cbe7d3b72fa99bbadb65d8b01873e5e605cdc30f1ff70ef2
   languageName: node
   linkType: hard
 
@@ -8233,7 +9133,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"abbrev@npm:1, abbrev@npm:^1.0.0":
+"abbrev@npm:^1.0.0":
   version: 1.1.1
   resolution: "abbrev@npm:1.1.1"
   checksum: 2d882941183c66aa665118bafdab82b7a177e9add5eb2776c33e960a4f3c89cff88a1b38aba13a456de01d0dd9d66a8bea7c903268b21ea91dd1097e1e2e8243
@@ -8314,13 +9214,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-jsx-walk@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "acorn-jsx-walk@npm:2.0.0"
-  checksum: f0893ca1611d76e0d751121c98e469e8fe6595d41ae717bbf7a80a2270a3ac2e968e6a8bdc4e34e6efa473e5409c26a7c88b02de298c40765545f4b2b22b7633
-  languageName: node
-  linkType: hard
-
 "acorn-jsx@npm:^3.0.0":
   version: 3.0.1
   resolution: "acorn-jsx@npm:3.0.1"
@@ -8353,10 +9246,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn-walk@npm:^8.0.0, acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
-  version: 8.3.0
-  resolution: "acorn-walk@npm:8.3.0"
-  checksum: 7673f342db939adc16ac3596c374a56be33e6ef84e01dfb3a0b50cc87cf9b8e46d84c337dcd7d5644f75bf219ad5a36bf33795e9f1af15298e6bceacf46c5f1f
+"acorn-walk@npm:^8.0.2, acorn-walk@npm:^8.1.1":
+  version: 8.2.0
+  resolution: "acorn-walk@npm:8.2.0"
+  checksum: e69f7234f2adfeb16db3671429a7c80894105bd7534cb2032acf01bb26e6a847952d11a062d071420b43f8d82e33d2e57f26fe87d9cce0853e8143d8910ff1de
   languageName: node
   linkType: hard
 
@@ -8396,12 +9289,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^8.0.0, acorn@npm:^8.1.0, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2":
-  version: 8.11.2
-  resolution: "acorn@npm:8.11.2"
+"acorn@npm:^8.1.0, acorn@npm:^8.2.4, acorn@npm:^8.4.1, acorn@npm:^8.5.0, acorn@npm:^8.7.1, acorn@npm:^8.8.2":
+  version: 8.10.0
+  resolution: "acorn@npm:8.10.0"
   bin:
     acorn: bin/acorn
-  checksum: ff559b891382ad4cd34cc3c493511d0a7075a51f5f9f02a03440e92be3705679367238338566c5fbd3521ecadd565d29301bc8e16cb48379206bffbff3d72500
+  checksum: 522310c20fdc3c271caed3caf0f06c51d61cb42267279566edd1d58e83dbc12eebdafaab666a0f0be1b7ad04af9c6bc2a6f478690a9e6391c3c8b165ada917dd
   languageName: node
   linkType: hard
 
@@ -8437,12 +9330,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"agentkeepalive@npm:^4.1.3, agentkeepalive@npm:^4.2.1":
-  version: 4.5.0
-  resolution: "agentkeepalive@npm:4.5.0"
+"agentkeepalive@npm:^4.2.1":
+  version: 4.3.0
+  resolution: "agentkeepalive@npm:4.3.0"
   dependencies:
+    debug: "npm:^4.1.0"
+    depd: "npm:^2.0.0"
     humanize-ms: "npm:^1.2.1"
-  checksum: dd210ba2a2e2482028f027b1156789744aadbfd773a6c9dd8e4e8001930d5af82382abe19a69240307b1d8003222ce6b0542935038313434b900e351914fc15f
+  checksum: f791317eb4b42278d094547669b9b745e19e5d783bb42a8695820c94098ef18fc99f9d2777b5871cae76d761e45b0add8e6703e044de5d74d47181038ec7b536
   languageName: node
   linkType: hard
 
@@ -8481,25 +9376,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"airbnb-prop-types@npm:^2.16.0":
-  version: 2.16.0
-  resolution: "airbnb-prop-types@npm:2.16.0"
-  dependencies:
-    array.prototype.find: "npm:^2.1.1"
-    function.prototype.name: "npm:^1.1.2"
-    is-regex: "npm:^1.1.0"
-    object-is: "npm:^1.1.2"
-    object.assign: "npm:^4.1.0"
-    object.entries: "npm:^1.1.2"
-    prop-types: "npm:^15.7.2"
-    prop-types-exact: "npm:^1.2.0"
-    react-is: "npm:^16.13.1"
-  peerDependencies:
-    react: ^0.14 || ^15.0.0 || ^16.0.0-alpha
-  checksum: 8f87960bad4b2fc07bd4cddfbeaae6987f28257b5657261de4c8c40a92e09e0916d8df974b9dfbfa3873329871072e53f90f78c8f167b179e04d78e540a196df
-  languageName: node
-  linkType: hard
-
 "ajv-errors@npm:^1.0.0":
   version: 1.0.1
   resolution: "ajv-errors@npm:1.0.1"
@@ -8567,7 +9443,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.6.2, ajv@npm:^8.9.0":
+"ajv@npm:^8.0.0, ajv@npm:^8.0.1, ajv@npm:^8.10.0, ajv@npm:^8.6.2, ajv@npm:^8.9.0":
   version: 8.12.0
   resolution: "ajv@npm:8.12.0"
   dependencies:
@@ -8863,24 +9739,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"archiver-utils@npm:^3.0.4":
-  version: 3.0.4
-  resolution: "archiver-utils@npm:3.0.4"
-  dependencies:
-    glob: "npm:^7.2.3"
-    graceful-fs: "npm:^4.2.0"
-    lazystream: "npm:^1.0.0"
-    lodash.defaults: "npm:^4.2.0"
-    lodash.difference: "npm:^4.5.0"
-    lodash.flatten: "npm:^4.4.0"
-    lodash.isplainobject: "npm:^4.0.6"
-    lodash.union: "npm:^4.6.0"
-    normalize-path: "npm:^3.0.0"
-    readable-stream: "npm:^3.6.0"
-  checksum: a838c325a1e1d6798c07e6a3af08f480fdce57cba2964bff8761126715aa1b71e9a119442eac19b7ec6313f5298e54a180dc6612ae548825fbc9be6836e50487
-  languageName: node
-  linkType: hard
-
 "archiver@npm:5.3.0":
   version: 5.3.0
   resolution: "archiver@npm:5.3.0"
@@ -8956,7 +9814,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:^5.3.0":
+"aria-query@npm:^5.1.3":
   version: 5.3.0
   resolution: "aria-query@npm:5.3.0"
   dependencies:
@@ -9063,7 +9921,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-includes@npm:^3.0.3, array-includes@npm:^3.1.6, array-includes@npm:^3.1.7":
+"array-includes@npm:^3.0.3, array-includes@npm:^3.1.6":
   version: 3.1.7
   resolution: "array-includes@npm:3.1.7"
   dependencies:
@@ -9144,44 +10002,32 @@ __metadata:
   linkType: hard
 
 "array.prototype.filter@npm:^1.0.0":
-  version: 1.0.3
-  resolution: "array.prototype.filter@npm:1.0.3"
+  version: 1.0.2
+  resolution: "array.prototype.filter@npm:1.0.2"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
     es-array-method-boxes-properly: "npm:^1.0.0"
     is-string: "npm:^1.0.7"
-  checksum: 3da2189afb00f95559cc73fc3c50f17a071a65bb705c0b2f2e2a2b2142781215b622442368c8b4387389b6ab251adf09ad347f9a8a4cf29d24404cc5ea1e295c
-  languageName: node
-  linkType: hard
-
-"array.prototype.find@npm:^2.1.1":
-  version: 2.2.2
-  resolution: "array.prototype.find@npm:2.2.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    es-shim-unscopables: "npm:^1.0.0"
-  checksum: d6b88bdbbc84851061e3689617748781c85228282ee923b556b70a3ac664bdb016803dc6aaf58666b47b5cdfc52cdb2395114fdc5bac08b69be25504c276840d
+  checksum: d30e79b72b6b9161ed2b1acab9a08ff29c8feb51ce4e050bf69eac214a8140de260c9d25f47063096bc4d35dbd8452c7366faac46b71c72c6045aa938ec34022
   languageName: node
   linkType: hard
 
-"array.prototype.findlastindex@npm:^1.2.3":
-  version: 1.2.3
-  resolution: "array.prototype.findlastindex@npm:1.2.3"
+"array.prototype.findlastindex@npm:^1.2.2":
+  version: 1.2.2
+  resolution: "array.prototype.findlastindex@npm:1.2.2"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
     es-shim-unscopables: "npm:^1.0.0"
-    get-intrinsic: "npm:^1.2.1"
-  checksum: 063cbab8eeac3aa01f3e980eecb9a8c5d87723032b49f7f814ecc6d75c33c03c17e3f43a458127a62e16303cab412f95d6ad9dc7e0ae6d9dc27a9bb76c24df7a
+    get-intrinsic: "npm:^1.1.3"
+  checksum: a97b6dad48ac27bccb1a062c1d9dec6726bcedf34d6be2ee7b9ed9a8db519df6d278b8011c2d6c49ed70802488f23ab10c0142606ef58e48dbc0a035a810318e
   languageName: node
   linkType: hard
 
-"array.prototype.flat@npm:^1.2.1, array.prototype.flat@npm:^1.2.3, array.prototype.flat@npm:^1.3.1, array.prototype.flat@npm:^1.3.2":
+"array.prototype.flat@npm:^1.2.1, array.prototype.flat@npm:^1.2.3, array.prototype.flat@npm:^1.3.1":
   version: 1.3.2
   resolution: "array.prototype.flat@npm:1.3.2"
   dependencies:
@@ -9193,7 +10039,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.3.1, array.prototype.flatmap@npm:^1.3.2":
+"array.prototype.flatmap@npm:^1.2.1, array.prototype.flatmap@npm:^1.3.1":
   version: 1.3.2
   resolution: "array.prototype.flatmap@npm:1.3.2"
   dependencies:
@@ -9206,15 +10052,15 @@ __metadata:
   linkType: hard
 
 "array.prototype.map@npm:^1.0.5":
-  version: 1.0.6
-  resolution: "array.prototype.map@npm:1.0.6"
+  version: 1.0.5
+  resolution: "array.prototype.map@npm:1.0.5"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
     es-array-method-boxes-properly: "npm:^1.0.0"
     is-string: "npm:^1.0.7"
-  checksum: 9af3eea249848fc092b8aa8f2e8d62108ebe67cb4b969f3faf7cb4729124a11d215399dfc0330fc9102b942015355004d834da8116ba4a0edce33699cbaccbc8
+  checksum: 1ae079f2a95a39f4afabe8ed95e7ee0e9a3f07bf6f53127168bebac55e35de75d6d57051676fae2ed2249516d5f5dfe88443212d57f04b92d4d119f1438d0d83
   languageName: node
   linkType: hard
 
@@ -9232,15 +10078,29 @@ __metadata:
   linkType: hard
 
 "array.prototype.tosorted@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "array.prototype.tosorted@npm:1.1.2"
+  version: 1.1.1
+  resolution: "array.prototype.tosorted@npm:1.1.1"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
     es-shim-unscopables: "npm:^1.0.0"
+    get-intrinsic: "npm:^1.1.3"
+  checksum: 23e86074d0dda9260aaa137ec45ae5a8196916ee3f256e41665381f120fdb5921bd84ad93eeba8d0234e5cd355093049585167ba2307fde340e5cee15b12415d
+  languageName: node
+  linkType: hard
+
+"arraybuffer.prototype.slice@npm:^1.0.1":
+  version: 1.0.1
+  resolution: "arraybuffer.prototype.slice@npm:1.0.1"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.0"
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
     get-intrinsic: "npm:^1.2.1"
-  checksum: aadb7725bb923f594be8121c80def8193ff2871ce1bfa1180b7e7ef705b8a7b32327fcc0d998c5569bb0cabc1c11ad93b1ef11443a26091e8bd1a55b382ab715
+    is-array-buffer: "npm:^3.0.2"
+    is-shared-array-buffer: "npm:^1.0.2"
+  checksum: e3e9b2a3e988ebfeddce4c7e8f69df730c9e48cb04b0d40ff0874ce3d86b3d1339dd520ffde5e39c02610bc172ecfbd4bc93324b1cabd9554c44a56b131ce0ce
   languageName: node
   linkType: hard
 
@@ -9316,12 +10176,12 @@ __metadata:
   linkType: hard
 
 "assert@npm:^1.1.1":
-  version: 1.5.1
-  resolution: "assert@npm:1.5.1"
+  version: 1.5.0
+  resolution: "assert@npm:1.5.0"
   dependencies:
-    object.assign: "npm:^4.1.4"
-    util: "npm:^0.10.4"
-  checksum: 207d0eceb6c64ef458f1511c8ce441f83111c46a6ba290c1701eebf4273a8a20bdcb4d0846b5a98d9c70536f5f389e3bc9be75a98a27c8c93b5d5686e6bf3aa3
+    object-assign: "npm:^4.1.1"
+    util: "npm:0.10.3"
+  checksum: 6266761663f40638b8eb685795e22d16df2e4885cc9006cbbeddc5fde3e853ddc489eb6d634df62d1a0c2b8ef9927e40f47f90bea49ace3776a2b758f5051ea3
   languageName: node
   linkType: hard
 
@@ -9332,10 +10192,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ast-types-flow@npm:^0.0.8":
-  version: 0.0.8
-  resolution: "ast-types-flow@npm:0.0.8"
-  checksum: 85a1c24af4707871c27cfe456bd2ff7fcbe678f3d1c878ac968c9557735a171a17bdcc8c8f903ceab3fc3c49d5b3da2194e6ab0a6be7fec0e133fa028f21ba1b
+"ast-types-flow@npm:^0.0.7":
+  version: 0.0.7
+  resolution: "ast-types-flow@npm:0.0.7"
+  checksum: 663b90e99b56ee2d7f736a6b6fff8b3c5404f28fa1860bb8d83ee5a9bff9e687520d0d6d9db6edff5a34fd4d3c0c11a3beb1cf75e43c9a880cca04371cc99808
   languageName: node
   linkType: hard
 
@@ -9388,13 +10248,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"async-foreach@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "async-foreach@npm:0.1.3"
-  checksum: 8023859043cfade478d3637adb3083eeb713b0da28752db26a9095bed05632782d3545a04be3a4f2d28583216742689552ba32538c72f4a35bf2211141edebf4
-  languageName: node
-  linkType: hard
-
 "async-settle@npm:^1.0.0":
   version: 1.0.0
   resolution: "async-settle@npm:1.0.0"
@@ -9421,9 +10274,9 @@ __metadata:
   linkType: hard
 
 "async@npm:^3.1.0, async@npm:^3.2.0, async@npm:^3.2.3":
-  version: 3.2.5
-  resolution: "async@npm:3.2.5"
-  checksum: 323c3615c3f0ab1ac25a6f953296bc0ac3213d5e0f1c0debdb12964e55963af288d570293c11e44f7967af58c06d2a88d0ea588c86ec0fbf62fa98037f604a0f
+  version: 3.2.4
+  resolution: "async@npm:3.2.4"
+  checksum: bebb5dc2258c45b83fa1d3be179ae0eb468e1646a62d443c8d60a45e84041b28fccebe1e2d1f234bfc3dcad44e73dcdbf4ba63d98327c9f6556e3dbd47c2ae8b
   languageName: node
   linkType: hard
 
@@ -9434,15 +10287,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"asynciterator.prototype@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "asynciterator.prototype@npm:1.0.0"
-  dependencies:
-    has-symbols: "npm:^1.0.3"
-  checksum: e8ebfd9493ac651cf9b4165e9d64030b3da1d17181bb1963627b59e240cdaf021d9b59d44b827dc1dde4e22387ec04c2d0f8720cf58a1c282e34e40cc12721b3
-  languageName: node
-  linkType: hard
-
 "asynckit@npm:^0.4.0":
   version: 0.4.0
   resolution: "asynckit@npm:0.4.0"
@@ -9483,15 +10327,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"autosuggest-highlight@npm:^3.1.1":
-  version: 3.3.4
-  resolution: "autosuggest-highlight@npm:3.3.4"
-  dependencies:
-    remove-accents: "npm:^0.4.2"
-  checksum: 4808b84f63baac7709e93fb2f73ed5b6638aa25af18ebc6236b4b11db9460c36a67d316270720d58d06a5f8fdf8c19b9308132263e305ddeb705a434562c5533
-  languageName: node
-  linkType: hard
-
 "available-typed-arrays@npm:^1.0.5":
   version: 1.0.5
   resolution: "available-typed-arrays@npm:1.0.5"
@@ -9520,17 +10355,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axe-core@npm:=4.7.0":
-  version: 4.7.0
-  resolution: "axe-core@npm:4.7.0"
-  checksum: 615c0f7722c3c9fcf353dbd70b00e2ceae234d4c17cbc839dd85c01d16797c4e4da45f8d27c6118e9e6b033fb06efd196106e13651a1b2f3a10e0f11c7b2f660
-  languageName: node
-  linkType: hard
-
-"axe-core@npm:^4.2.0, axe-core@npm:^4.4.1":
-  version: 4.8.2
-  resolution: "axe-core@npm:4.8.2"
-  checksum: 3e8dbf264a57767713daa77fe04bbabd71a956b08b99c2eb0ec61b75852f21190653f557d2da623dea9e0a7555460deaac71d9f6a9125c0b52576f8581bfbe52
+"axe-core@npm:^4.2.0, axe-core@npm:^4.4.1, axe-core@npm:^4.6.2":
+  version: 4.7.2
+  resolution: "axe-core@npm:4.7.2"
+  checksum: 1b94fcbe203296fc7174992a3d70dbcd477d88b933afa045aaffa1704fe63d8da8945e4b38fc576f9c7384abeb353e2d6607ab54d25b5c90b255ef2244bda29a
   languageName: node
   linkType: hard
 
@@ -9543,6 +10371,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"axios@npm:^0.27.2":
+  version: 0.27.2
+  resolution: "axios@npm:0.27.2"
+  dependencies:
+    follow-redirects: "npm:^1.14.9"
+    form-data: "npm:^4.0.0"
+  checksum: 2efaf18dd0805f7bc772882bc86f004abd92d51007b54c5081f74db0d08ce3593e2c010261896d25a14318eeaa2e966fd825e34f810e8a3339dc64b9d177cf70
+  languageName: node
+  linkType: hard
+
 "axios@npm:^1.0.0, axios@npm:^1.6.0":
   version: 1.6.2
   resolution: "axios@npm:1.6.2"
@@ -9554,7 +10392,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"axobject-query@npm:^3.2.1":
+"axobject-query@npm:^3.1.1":
   version: 3.2.1
   resolution: "axobject-query@npm:3.2.1"
   dependencies:
@@ -9777,21 +10615,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-inline-react-svg@npm:^1.1.0":
-  version: 1.1.2
-  resolution: "babel-plugin-inline-react-svg@npm:1.1.2"
-  dependencies:
-    "@babel/helper-plugin-utils": "npm:^7.0.0"
-    "@babel/parser": "npm:^7.0.0"
-    lodash.isplainobject: "npm:^4.0.6"
-    resolve: "npm:^1.10.0"
-    svgo: "npm:^0.7.2"
-  peerDependencies:
-    "@babel/core": ^7.0.0
-  checksum: d443d30b4f04ce4de044483836b243c499abb64729f287b43089f0454d0410487c9bfd9e265953ada4995d0657ab36cd1b8ee8cfd36eed84371cc14cc1c01100
-  languageName: node
-  linkType: hard
-
 "babel-plugin-istanbul@npm:^5.1.0":
   version: 5.2.0
   resolution: "babel-plugin-istanbul@npm:5.2.0"
@@ -9860,7 +10683,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-macros@npm:^3.0.0, babel-plugin-macros@npm:^3.0.1":
+"babel-plugin-macros@npm:^3.0.1":
   version: 3.1.0
   resolution: "babel-plugin-macros@npm:3.1.0"
   dependencies:
@@ -9871,13 +10694,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-named-exports-order@npm:^0.0.2":
-  version: 0.0.2
-  resolution: "babel-plugin-named-exports-order@npm:0.0.2"
-  checksum: 8e7bb1e8109d5f7ef7a579256adc93f9af095537d78b08bed3c439f1d02c3f9332e4cdbaf324e178fdee03a60b9489ce49482e5b75f71d79642e2e382f58bb02
-  languageName: node
-  linkType: hard
-
 "babel-plugin-polyfill-corejs2@npm:^0.3.0":
   version: 0.3.3
   resolution: "babel-plugin-polyfill-corejs2@npm:0.3.3"
@@ -9998,23 +10814,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"babel-plugin-transform-define@npm:^2.0.0":
-  version: 2.1.4
-  resolution: "babel-plugin-transform-define@npm:2.1.4"
-  dependencies:
-    lodash: "npm:^4.17.11"
-    traverse: "npm:0.6.6"
-  checksum: 7d5568e9d81ade01918586bc9b8e3ef66d5205558e978e6e495ae55aa3455a2b94995f14b858709e37fed7a5cd05ea7ce7b2b8e5688aad69e3030d40a5d570cd
-  languageName: node
-  linkType: hard
-
-"babel-plugin-transform-inline-environment-variables@npm:^0.4.0":
-  version: 0.4.4
-  resolution: "babel-plugin-transform-inline-environment-variables@npm:0.4.4"
-  checksum: fa361287411301237fd8ce332aff4f8e8ccb8db30e87a2ddc7224c8bf7cd792eda47aca24dc2e09e70bce4c027bc8cbe22f4999056be37a25d2472945df21ef5
-  languageName: node
-  linkType: hard
-
 "babel-plugin-transform-object-rest-spread@npm:^6.26.0":
   version: 6.26.0
   resolution: "babel-plugin-transform-object-rest-spread@npm:6.26.0"
@@ -10297,14 +11096,14 @@ __metadata:
   linkType: hard
 
 "bin-links@npm:^4.0.1":
-  version: 4.0.3
-  resolution: "bin-links@npm:4.0.3"
+  version: 4.0.2
+  resolution: "bin-links@npm:4.0.2"
   dependencies:
     cmd-shim: "npm:^6.0.0"
     npm-normalize-package-bin: "npm:^3.0.0"
     read-cmd-shim: "npm:^4.0.0"
     write-file-atomic: "npm:^5.0.0"
-  checksum: 8b4eec67e5d000768cc5a8cd4399d3af55eab059b2b6f864f96ad69bd73d8c4702a9f002a54747d11643cbd3e2a043d91f12bceedcfdcd96321cf186cfb33802
+  checksum: 0ba0dfd8b728569d00370b857e48d7ee2f06ca99cfe0b7385c2ccb3bac32b52507eef6fec86c5262b616b187ff212bfe1ef49b08f65c3db9a0f5fa6577d215b1
   languageName: node
   linkType: hard
 
@@ -10391,7 +11190,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"bn.js@npm:^5.0.0, bn.js@npm:^5.2.1":
+"bn.js@npm:^5.0.0, bn.js@npm:^5.1.1":
   version: 5.2.1
   resolution: "bn.js@npm:5.2.1"
   checksum: 7a7e8764d7a6e9708b8b9841b2b3d6019cc154d2fc23716d0efecfe1e16921b7533c6f7361fb05471eab47986c4aa310c270f88e3507172104632ac8df2cfd84
@@ -10551,13 +11350,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browser-assert@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "browser-assert@npm:1.2.1"
-  checksum: 8b2407cd04c1ed592cf892dec35942b7d72635829221e0788c9a16c4d2afa8b7156bc9705b1c4b32c30d88136c576fda3cbcb8f494d6f865264c706ea8798d92
-  languageName: node
-  linkType: hard
-
 "browser-process-hrtime@npm:^1.0.0":
   version: 1.0.0
   resolution: "browser-process-hrtime@npm:1.0.0"
@@ -10629,7 +11421,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"browserify-rsa@npm:^4.0.0, browserify-rsa@npm:^4.1.0":
+"browserify-rsa@npm:^4.0.0, browserify-rsa@npm:^4.0.1":
   version: 4.1.0
   resolution: "browserify-rsa@npm:4.1.0"
   dependencies:
@@ -10640,19 +11432,19 @@ __metadata:
   linkType: hard
 
 "browserify-sign@npm:^4.0.0":
-  version: 4.2.2
-  resolution: "browserify-sign@npm:4.2.2"
+  version: 4.2.1
+  resolution: "browserify-sign@npm:4.2.1"
   dependencies:
-    bn.js: "npm:^5.2.1"
-    browserify-rsa: "npm:^4.1.0"
+    bn.js: "npm:^5.1.1"
+    browserify-rsa: "npm:^4.0.1"
     create-hash: "npm:^1.2.0"
     create-hmac: "npm:^1.1.7"
-    elliptic: "npm:^6.5.4"
+    elliptic: "npm:^6.5.3"
     inherits: "npm:^2.0.4"
-    parse-asn1: "npm:^5.1.6"
-    readable-stream: "npm:^3.6.2"
-    safe-buffer: "npm:^5.2.1"
-  checksum: b622730c0fc183328c3a1c9fdaaaa5118821ed6822b266fa6b0375db7e20061ebec87301d61931d79b9da9a96ada1cab317fce3c68f233e5e93ed02dbb35544c
+    parse-asn1: "npm:^5.1.5"
+    readable-stream: "npm:^3.6.0"
+    safe-buffer: "npm:^5.2.0"
+  checksum: bf3f9177587a4155bcd64cb4f56f3a0fd6f5aa590188a5f12c07b5dfb50815a1248e90abc8a1dbd75bd42cb825fec09c57ffc8dc7bfba8704875403b762312b4
   languageName: node
   linkType: hard
 
@@ -10687,12 +11479,12 @@ __metadata:
   linkType: hard
 
 "browserstack-cypress-cli@npm:^1.11.1":
-  version: 1.26.1
-  resolution: "browserstack-cypress-cli@npm:1.26.1"
+  version: 1.25.0
+  resolution: "browserstack-cypress-cli@npm:1.25.0"
   dependencies:
     archiver: "npm:5.3.0"
     async: "npm:3.2.3"
-    browserstack-local: "npm:1.5.4"
+    browserstack-local: "npm:1.5.1"
     chalk: "npm:4.1.2"
     cli-progress: "npm:3.10.0"
     decompress: "npm:4.2.1"
@@ -10715,20 +11507,20 @@ __metadata:
     yargs: "npm:14.2.3"
   bin:
     browserstack-cypress: bin/runner.js
-  checksum: f55bad41f79f9d2eb986f677ce1dc1f193ab42bac7e99e0b3c7ab831bae45ed3265edbc9c6d47dc0543035c2a60d5954e9025dbdd7885bcb4626d709af328f35
+  checksum: a251cbb7c0368070c96c56b24d60ce47274f9dc27270ae02dff6c1af6426945ee370ca98a844f195b92c6d68a2edea47393fee2c9fb740c32e27f0c80392b681
   languageName: node
   linkType: hard
 
-"browserstack-local@npm:1.5.4":
-  version: 1.5.4
-  resolution: "browserstack-local@npm:1.5.4"
+"browserstack-local@npm:1.5.1":
+  version: 1.5.1
+  resolution: "browserstack-local@npm:1.5.1"
   dependencies:
     agent-base: "npm:^6.0.2"
     https-proxy-agent: "npm:^5.0.1"
     is-running: "npm:^2.1.0"
     ps-tree: "npm:=1.2.0"
     temp-fs: "npm:^0.9.9"
-  checksum: d85a7604921750b0cda058541631263b878f2a19a1685e406808495683420856ec6c90e39517f55fd3d751e150ad06766414f28ab7bf13709fc1e25ed4dff164
+  checksum: 45dc70c0515e26365ceafd30b5474d5baec0f96582d8aa3e7b5f1f77b1c218f037a195c684eff7efbb7be5fb9f898cd71865791f3e571e11f81c35ff66b1ffcc
   languageName: node
   linkType: hard
 
@@ -10934,7 +11726,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cacache@npm:^15.0.5, cacache@npm:^15.2.0":
+"cacache@npm:^15.0.5":
   version: 15.3.0
   resolution: "cacache@npm:15.3.0"
   dependencies:
@@ -10987,14 +11779,14 @@ __metadata:
   linkType: hard
 
 "cacache@npm:^17.0.0, cacache@npm:^17.0.4":
-  version: 17.1.4
-  resolution: "cacache@npm:17.1.4"
+  version: 17.1.3
+  resolution: "cacache@npm:17.1.3"
   dependencies:
     "@npmcli/fs": "npm:^3.1.0"
     fs-minipass: "npm:^3.0.0"
     glob: "npm:^10.2.2"
     lru-cache: "npm:^7.7.1"
-    minipass: "npm:^7.0.3"
+    minipass: "npm:^5.0.0"
     minipass-collect: "npm:^1.0.2"
     minipass-flush: "npm:^1.0.5"
     minipass-pipeline: "npm:^1.2.4"
@@ -11002,7 +11794,7 @@ __metadata:
     ssri: "npm:^10.0.0"
     tar: "npm:^6.1.11"
     unique-filename: "npm:^3.0.0"
-  checksum: 6e26c788bc6a18ff42f4d4f97db30d5c60a5dfac8e7c10a03b0307a92cf1b647570547cf3cd96463976c051eb9c7258629863f156e224c82018862c1a8ad0e70
+  checksum: 216fb41c739b845c5acbc1f8a01876ccc6293644e701ad0abb7acb87b648a12abc2af5fc4b86df2d82731d0f7d6beebee85e62b1d59211535ed72de4b8b0fce6
   languageName: node
   linkType: hard
 
@@ -11141,7 +11933,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"camel-case@npm:^4.1.1, camel-case@npm:^4.1.2":
+"camel-case@npm:^4.1.1":
   version: 4.1.2
   resolution: "camel-case@npm:4.1.2"
   dependencies:
@@ -11226,13 +12018,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109, caniuse-lite@npm:^1.0.30001541":
+"caniuse-lite@npm:^1.0.0, caniuse-lite@npm:^1.0.30001109":
   version: 1.0.30001562
   resolution: "caniuse-lite@npm:1.0.30001562"
   checksum: 4192d7ec3a38adaa8a63606bfd6bc961349e447593d91dc3c88222b6e29283f5e8d209412935971107a621e57e12a681d7aacfbd5e33f3d2c37c864ddd23fd5d
   languageName: node
   linkType: hard
 
+"caniuse-lite@npm:^1.0.30001541":
+  version: 1.0.30001561
+  resolution: "caniuse-lite@npm:1.0.30001561"
+  checksum: 94cfc8454c19d28828baf254771e0f3cf1828f95b0a85904d70a77b530873a041a735761091e3baf17ec90609250f887baa044b8ed2776368a46dd2e70f050d6
+  languageName: node
+  linkType: hard
+
 "capture-exit@npm:^2.0.0":
   version: 2.0.0
   resolution: "capture-exit@npm:2.0.0"
@@ -11242,39 +12041,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"carbon-components-react@npm:7.59.17":
-  version: 7.59.17
-  resolution: "carbon-components-react@npm:7.59.17"
-  dependencies:
-    "@babel/runtime": "npm:^7.16.7"
-    "@carbon/feature-flags": "npm:^0.7.0"
-    "@carbon/icons-react": "npm:^10.49.2"
-    "@carbon/layout": "npm:^10.37.2"
-    "@carbon/telemetry": "npm:0.1.0"
-    classnames: "npm:2.3.1"
-    copy-to-clipboard: "npm:^3.3.1"
-    downshift: "npm:5.2.1"
-    flatpickr: "npm:4.6.9"
-    invariant: "npm:^2.2.3"
-    lodash.debounce: "npm:^4.0.8"
-    lodash.findlast: "npm:^4.5.0"
-    lodash.isequal: "npm:^4.5.0"
-    lodash.omit: "npm:^4.5.0"
-    lodash.throttle: "npm:^4.1.1"
-    prop-types: "npm:^15.7.2"
-    react-is: "npm:^17.0.2"
-    use-resize-observer: "npm:^6.0.0"
-    wicg-inert: "npm:^3.1.1"
-    window-or-global: "npm:^1.0.1"
-  peerDependencies:
-    carbon-components: ^10.30.0
-    carbon-icons: ^7.0.7
-    react: ^16.8.6 || ^17.0.1
-    react-dom: ^16.8.6 || ^17.0.1
-  checksum: 10b27bf63bcc1e63a3736eedce314294c05f763583fd8ec9a7a660d9e3c84704868688b5d98f5e19d8d5999e78f92e1eaaf88d918684975f6be7f224f17cd26e
-  languageName: node
-  linkType: hard
-
 "carbon-components@npm:10.58.12":
   version: 10.58.12
   resolution: "carbon-components@npm:10.58.12"
@@ -11336,12 +12102,13 @@ __metadata:
     jest: "npm:25.5.4"
     jest-circus: "npm:25.5.4"
     jest-junit: "npm:^6.4.0"
-    lerna: "npm:^6.4.1"
+    lerna: "npm:^6.5.1"
     lint-staged: "npm:^13.0.3"
     node-fetch: "npm:^2.6.0"
     prettier: "npm:^2.7.1"
     react: "npm:16.14.0"
     rimraf: "npm:^3.0.0"
+    sass: "npm:^1.19.0"
     stylelint: "npm:^13.3.3"
     stylelint-config-prettier: "npm:^7.0.0"
     stylelint-prettier: "npm:^1.1.2"
@@ -11351,7 +12118,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"carbon-icons@npm:7.0.7":
+"carbon-icons@npm:^7.0.5":
   version: 7.0.7
   resolution: "carbon-icons@npm:7.0.7"
   checksum: eb9726c74e21583d4669242ffd135d3931b21de212035c28223198cec7423010795193e45043e8ecba3346c159fd43dbc9e074b179456397bd1ab66aeff73f4b
@@ -11602,9 +12369,9 @@ __metadata:
   linkType: hard
 
 "ci-info@npm:^3.2.0, ci-info@npm:^3.6.1":
-  version: 3.9.0
-  resolution: "ci-info@npm:3.9.0"
-  checksum: 75bc67902b4d1c7b435497adeb91598f6d52a3389398e44294f6601b20cfef32cf2176f7be0eb961d9e085bb333a8a5cae121cb22f81cf238ae7f58eb80e9397
+  version: 3.8.0
+  resolution: "ci-info@npm:3.8.0"
+  checksum: b00e9313c1f7042ca8b1297c157c920d6d69f0fbad7b867910235676df228c4b4f4df33d06cacae37f9efba7a160b0a167c6be85492b419ef71d85660e60606b
   languageName: node
   linkType: hard
 
@@ -11625,15 +12392,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clap@npm:^1.0.9":
-  version: 1.2.3
-  resolution: "clap@npm:1.2.3"
-  dependencies:
-    chalk: "npm:^1.1.3"
-  checksum: 6d9a94a6a2b517de26e26aec49cc45a3533369db9e630e68b3f87c252ee009e2996fd6ecd529743703cab08b8e65807d1ceebecafb442b2db780fd4f21e12099
-  languageName: node
-  linkType: hard
-
 "class-utils@npm:^0.3.5":
   version: 0.3.6
   resolution: "class-utils@npm:0.3.6"
@@ -11646,13 +12404,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"classnames@npm:2.3.1":
-  version: 2.3.1
-  resolution: "classnames@npm:2.3.1"
-  checksum: 28fec94a815d5f570fa6cb4baaa4a7ae1466db3c8f704802f1330180db45d3b85ef8ae612f521fb37ce2cab1c3040d1d78061697b62987bc2909f26d1ad4321f
-  languageName: node
-  linkType: hard
-
 "classnames@npm:2.3.2":
   version: 2.3.2
   resolution: "classnames@npm:2.3.2"
@@ -11678,15 +12429,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"clean-css@npm:^5.2.2":
-  version: 5.3.2
-  resolution: "clean-css@npm:5.3.2"
-  dependencies:
-    source-map: "npm:~0.6.0"
-  checksum: efd9efbf400f38a12f99324bad5359bdd153211b048721e4d4ddb629a88865dff3012dca547a14bdd783d78ccf064746e39fd91835546a08e2d811866aff0857
-  languageName: node
-  linkType: hard
-
 "clean-stack@npm:^2.0.0":
   version: 2.2.0
   resolution: "clean-stack@npm:2.2.0"
@@ -11728,15 +12470,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"cli-source-preview@npm:^1.0.0":
-  version: 1.1.0
-  resolution: "cli-source-preview@npm:1.1.0"
-  dependencies:
-    chalk: "npm:^1.1.3"
-  checksum: 1abbe5383c76525124ffeb62a000724003b7fea8f67a4275b83d5a1ad42a8ea5f8486770ca5d173d3c6262f4e68c1c0d6d7fd5f3dbbc47c322906572a76c518c
-  languageName: node
-  linkType: hard
-
 "cli-spinners@npm:2.6.1":
   version: 2.6.1
   resolution: "cli-spinners@npm:2.6.1"
@@ -11745,9 +12478,9 @@ __metadata:
   linkType: hard
 
 "cli-spinners@npm:^2.5.0":
-  version: 2.9.1
-  resolution: "cli-spinners@npm:2.9.1"
-  checksum: 80b7b21f2e713729041b26afd02cd881a05ba83d0973c60d332e6010261a732a42d039bdf401dec32645cba41a69324880bbbd999c8876b1eb9888451137df01
+  version: 2.9.0
+  resolution: "cli-spinners@npm:2.9.0"
+  checksum: 457497ccef70eec3f1d0825e4a3396ba43f6833a4900c2047c0efe2beecb1c0df476949ea378bcb6595754f7508e28ae943eeb30bbda807f59f547b270ec334c
   languageName: node
   linkType: hard
 
@@ -11964,9 +12697,9 @@ __metadata:
   linkType: hard
 
 "cmd-shim@npm:^6.0.0":
-  version: 6.0.2
-  resolution: "cmd-shim@npm:6.0.2"
-  checksum: 2649e08b3c9a6ce93f61f86b3378a65bc5971a93b6962c9c076930323508aa8d153eb51cf00c0fad0dabac65d3f206d2f471497dae190e569f01ee1f48c189b7
+  version: 6.0.1
+  resolution: "cmd-shim@npm:6.0.1"
+  checksum: d0718e4a49265a9195ced19f662a77569ce5939145451125bdc8bb302781f15564ade92f6c49e231f9d0bb6f3d71db1a2d0a50af940490eb324e152325039541
   languageName: node
   linkType: hard
 
@@ -11988,15 +12721,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"coa@npm:~1.0.1":
-  version: 1.0.4
-  resolution: "coa@npm:1.0.4"
-  dependencies:
-    q: "npm:^1.1.2"
-  checksum: e09245f07a9c7776c132ed4f5459170c34bccd09a6ed95c02271b3c42d15648f4c3fcc0c116f3181fe5150fe89d4335a293d2e19801e4a8532d1a3b37e599506
-  languageName: node
-  linkType: hard
-
 "code-point-at@npm:^1.0.0":
   version: 1.1.0
   resolution: "code-point-at@npm:1.1.0"
@@ -12039,7 +12763,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-convert@npm:^1.9.0, color-convert@npm:^1.9.3":
+"color-convert@npm:^1.9.0":
   version: 1.9.3
   resolution: "color-convert@npm:1.9.3"
   dependencies:
@@ -12071,7 +12795,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-string@npm:^1.6.0":
+"color-string@npm:^1.9.0":
   version: 1.9.1
   resolution: "color-string@npm:1.9.1"
   dependencies:
@@ -12090,13 +12814,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color@npm:^3.1.2":
-  version: 3.2.1
-  resolution: "color@npm:3.2.1"
+"color@npm:^4.0.0":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
   dependencies:
-    color-convert: "npm:^1.9.3"
-    color-string: "npm:^1.6.0"
-  checksum: bf70438e0192f4f62f4bfbb303e7231289e8cc0d15ff6b6cbdb722d51f680049f38d4fdfc057a99cb641895cf5e350478c61d98586400b060043afc44285e7ae
+    color-convert: "npm:^2.0.1"
+    color-string: "npm:^1.9.0"
+  checksum: b23f5e500a79ea22428db43d1a70642d983405c0dd1f95ef59dbdb9ba66afbb4773b334fa0b75bb10b0552fd7534c6b28d4db0a8b528f91975976e70973c0152
   languageName: node
   linkType: hard
 
@@ -12107,13 +12831,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colorette@npm:^1.2.2":
-  version: 1.4.0
-  resolution: "colorette@npm:1.4.0"
-  checksum: c8d6c8c3ef5a99acfc3dd9a68f48019f1479ec347551387e4a1762e40f69e98ce19d4dc321ffb4919d1f28a7bdc90c39d4e9a901f4c474fd2124ad93a00c0454
-  languageName: node
-  linkType: hard
-
 "colorette@npm:^2.0.10, colorette@npm:^2.0.16, colorette@npm:^2.0.20":
   version: 2.0.20
   resolution: "colorette@npm:2.0.20"
@@ -12135,13 +12852,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"colors@npm:~1.1.2":
-  version: 1.1.2
-  resolution: "colors@npm:1.1.2"
-  checksum: 56c0bbb26a01c3ed4a29ea89178ef593e7470dab50b9218a9d65dbe52fcb1a8278a7c0cc449d2f17ff1d7a59a93df36f833514c23cc603bb5acbed15d99d1dd6
-  languageName: node
-  linkType: hard
-
 "columnify@npm:1.6.0":
   version: 1.6.0
   resolution: "columnify@npm:1.6.0"
@@ -12231,13 +12941,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"commander@npm:^8.3.0":
-  version: 8.3.0
-  resolution: "commander@npm:8.3.0"
-  checksum: 6b7b5d334483ce24bd73c5dac2eab901a7dbb25fd983ea24a1eeac6e7166bb1967f641546e8abf1920afbde86a45fbfe5812fbc69d0dc451bb45ca416a12a3a3
-  languageName: node
-  linkType: hard
-
 "commander@npm:~2.19.0":
   version: 2.19.0
   resolution: "commander@npm:2.19.0"
@@ -12304,15 +13007,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compress-commons@npm:^4.1.2":
-  version: 4.1.2
-  resolution: "compress-commons@npm:4.1.2"
+"compress-commons@npm:^4.1.0":
+  version: 4.1.1
+  resolution: "compress-commons@npm:4.1.1"
   dependencies:
     buffer-crc32: "npm:^0.2.13"
     crc32-stream: "npm:^4.0.2"
     normalize-path: "npm:^3.0.0"
     readable-stream: "npm:^3.6.0"
-  checksum: 76fa281412e4a95f89893dc1e3399e797de20253365cf53102ac4738fa004d3540abb12c26e3a54156f8fb4e4392ef9a9c5eecbe752f3a7d30e28c808b671e1b
+  checksum: 7e3581650366b48ffc57a2780448d62b3dbc25233ec35543bf09bc0971ed6d337ce0fd2323685e53be3f19e523df67890b09a4a7e1cedc121b1a75d114dad4f5
   languageName: node
   linkType: hard
 
@@ -12340,10 +13043,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"compute-scroll-into-view@npm:^1.0.13":
-  version: 1.0.20
-  resolution: "compute-scroll-into-view@npm:1.0.20"
-  checksum: a72e2595ccab57ca61bb14b368738c7473ebb96da6c85f4dbe00cb810570f71f52d9c26b4463f6092663cbf917d0693881eef4f8e8d4204d7581a83bef082afe
+"compute-scroll-into-view@npm:^3.0.3":
+  version: 3.1.0
+  resolution: "compute-scroll-into-view@npm:3.1.0"
+  checksum: cc5211d49bced5ad23385da5c2eaf69b6045628581b0dcb9f4dd407bfee51bbd26d2bce426be26edf2feaf8c243706f5a7c3759827d89cc5a01a5cf7d299a5eb
   languageName: node
   linkType: hard
 
@@ -12604,13 +13307,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"convert-source-map@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "convert-source-map@npm:2.0.0"
-  checksum: c987be3ec061348cdb3c2bfb924bec86dea1eacad10550a85ca23edb0fe3556c3a61c7399114f3331ccb3499d7fd0285ab24566e5745929412983494c3926e15
-  languageName: node
-  linkType: hard
-
 "cookie-signature@npm:1.0.6":
   version: 1.0.6
   resolution: "cookie-signature@npm:1.0.6"
@@ -12672,7 +13368,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.33.1, core-js-compat@npm:^3.8.1":
+"core-js-compat@npm:^3.21.0, core-js-compat@npm:^3.31.0, core-js-compat@npm:^3.8.1":
+  version: 3.32.0
+  resolution: "core-js-compat@npm:3.32.0"
+  dependencies:
+    browserslist: "npm:^4.21.9"
+  checksum: a4601192319b67a575abfb175a9822ae266bfa88cd0dc6be5bce3d6ce6d4674bd675a052c48a48520d956b193ccd5c8458c1b0901bf0f71d59edaad2a56ef667
+  languageName: node
+  linkType: hard
+
+"core-js-compat@npm:^3.33.1":
   version: 3.33.2
   resolution: "core-js-compat@npm:3.33.2"
   dependencies:
@@ -12682,9 +13387,9 @@ __metadata:
   linkType: hard
 
 "core-js-pure@npm:^3.23.3":
-  version: 3.33.2
-  resolution: "core-js-pure@npm:3.33.2"
-  checksum: 9a65d051912bac477aa005e776a625e5675ff42b62ca7a01acb1665e9a813709684bb5a35f575e65fa27b382c6ed311e9b2ebeb37bddfc87d5f9ee5fd86b9742
+  version: 3.32.0
+  resolution: "core-js-pure@npm:3.32.0"
+  checksum: f98fc9610fedffd5587266cabddc880a8259bb0c99e81c5630e2076a4cd39b618f8db54137a6fdc578a8bb12a7fef2f341175085d89a16683a36aa89bc0ee137
   languageName: node
   linkType: hard
 
@@ -12696,9 +13401,9 @@ __metadata:
   linkType: hard
 
 "core-js@npm:^3.0.1, core-js@npm:^3.0.4, core-js@npm:^3.19.1, core-js@npm:^3.6.5, core-js@npm:^3.8.2":
-  version: 3.33.2
-  resolution: "core-js@npm:3.33.2"
-  checksum: d62554d51ce8a3f33d0b1f8b064cbd21afcae275043ae96d3d43f18701b80cd423fab484517a81ee1d096db252e2aeada6ef6d1fd80a26db54f82f8f349a62c7
+  version: 3.32.0
+  resolution: "core-js@npm:3.32.0"
+  checksum: b08473c4cb2963e7428fddc5b519abf74b6262da731beb6caf05c617349149d58bd221b91f85c6f0e91e709e873dc017cce2259f3b2b7377c4c08a556230f5f1
   languageName: node
   linkType: hard
 
@@ -12792,19 +13497,14 @@ __metadata:
   linkType: hard
 
 "cosmiconfig@npm:^8.0.0":
-  version: 8.3.6
-  resolution: "cosmiconfig@npm:8.3.6"
+  version: 8.2.0
+  resolution: "cosmiconfig@npm:8.2.0"
   dependencies:
-    import-fresh: "npm:^3.3.0"
+    import-fresh: "npm:^3.2.1"
     js-yaml: "npm:^4.1.0"
-    parse-json: "npm:^5.2.0"
+    parse-json: "npm:^5.0.0"
     path-type: "npm:^4.0.0"
-  peerDependencies:
-    typescript: ">=4.9.5"
-  peerDependenciesMeta:
-    typescript:
-      optional: true
-  checksum: 91d082baca0f33b1c085bf010f9ded4af43cbedacba8821da0fb5667184d0a848addc52c31fadd080007f904a555319c238cf5f4c03e6d58ece2e4876b2e73d6
+  checksum: e0b188f9a672ee7135851bf9d9fc8f0ba00f9769c95fda5af0ebc274804f6aeb713b753e04e706f595e1fbd0fa67c5073840666019068c0296a06057560ab39d
   languageName: node
   linkType: hard
 
@@ -12847,12 +13547,12 @@ __metadata:
   linkType: hard
 
 "crc32-stream@npm:^4.0.2":
-  version: 4.0.3
-  resolution: "crc32-stream@npm:4.0.3"
+  version: 4.0.2
+  resolution: "crc32-stream@npm:4.0.2"
   dependencies:
     crc-32: "npm:^1.2.0"
     readable-stream: "npm:^3.4.0"
-  checksum: d44d0ec6f04d8a1bed899ac3e4fbb82111ed567ea6d506be39147362af45c747887fce1032f4beca1646b4824e5a9614cd3332bfa94bbc5577ca5445e7f75ddd
+  checksum: 1099559283b86e8a55390228b57ff4d57a74cac6aa8086aa4730f84317c9f93e914aeece115352f2d706a9df7ed75327ffacd86cfe23f040aef821231b528e76
   languageName: node
   linkType: hard
 
@@ -13031,7 +13731,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"css-loader@npm:^5.0.1, css-loader@npm:^5.2.0":
+"css-loader@npm:^5.2.0":
   version: 5.2.7
   resolution: "css-loader@npm:5.2.7"
   dependencies:
@@ -13230,18 +13930,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"csso@npm:~2.3.1":
-  version: 2.3.2
-  resolution: "csso@npm:2.3.2"
-  dependencies:
-    clap: "npm:^1.0.9"
-    source-map: "npm:^0.5.3"
-  bin:
-    csso: ./bin/csso
-  checksum: a1f66eabbf25e90e66ee657ac351875d85b2d9d3e51cfc7825204e6fc37ddc9137069db8f97cafee8e995b3addcca56e93b8c6651e676bbf00638a8d206ada52
-  languageName: node
-  linkType: hard
-
 "cssom@npm:^0.4.1, cssom@npm:^0.4.4":
   version: 0.4.4
   resolution: "cssom@npm:0.4.4"
@@ -13502,9 +14190,9 @@ __metadata:
   linkType: hard
 
 "dayjs@npm:^1.10.4":
-  version: 1.11.10
-  resolution: "dayjs@npm:1.11.10"
-  checksum: 27e8f5bc01c0a76f36c656e62ab7f08c2e7b040b09e613cd4844abf03fb258e0350f0a83b02c887b84d771c1f11e092deda0beef8c6df2a1afbc3f6c1fade279
+  version: 1.11.9
+  resolution: "dayjs@npm:1.11.9"
+  checksum: 7bee5a13653049ae166d4ee7f17fd1b3cd31ec8699b2bae1dee6262431d8d5815a4a9f12eaf48d1879a98d993c014a9a9098ed75aa6a041efe9bccc080a687cd
   languageName: node
   linkType: hard
 
@@ -13681,16 +14369,16 @@ __metadata:
   linkType: hard
 
 "deep-equal@npm:^1.1.1":
-  version: 1.1.2
-  resolution: "deep-equal@npm:1.1.2"
+  version: 1.1.1
+  resolution: "deep-equal@npm:1.1.1"
   dependencies:
-    is-arguments: "npm:^1.1.1"
-    is-date-object: "npm:^1.0.5"
-    is-regex: "npm:^1.1.4"
-    object-is: "npm:^1.1.5"
+    is-arguments: "npm:^1.0.4"
+    is-date-object: "npm:^1.0.1"
+    is-regex: "npm:^1.0.4"
+    object-is: "npm:^1.0.1"
     object-keys: "npm:^1.1.1"
-    regexp.prototype.flags: "npm:^1.5.1"
-  checksum: c9d2ed2a0d93a2ee286bdb320cd51c78cd4c310b2161d1ede6476b67ca1d73860e7ff63b10927830aa4b9eca2a48073cfa54c8c4a1b2246397bda618c2138e97
+    regexp.prototype.flags: "npm:^1.2.0"
+  checksum: 3212af3e6b406391a9e94ebc18223032615ee8d1be14a2161137a5aac35c474d3471f2ffe8603d7593296f7ecf7341410faf3a1b57a76229a70775518dacfe12
   languageName: node
   linkType: hard
 
@@ -13819,7 +14507,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"define-properties@npm:^1.1.2, define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0, define-properties@npm:^1.2.1":
+"define-properties@npm:^1.1.2, define-properties@npm:^1.1.3, define-properties@npm:^1.1.4, define-properties@npm:^1.2.0":
   version: 1.2.1
   resolution: "define-properties@npm:1.2.1"
   dependencies:
@@ -13902,7 +14590,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"depd@npm:2.0.0":
+"depd@npm:2.0.0, depd@npm:^2.0.0":
   version: 2.0.0
   resolution: "depd@npm:2.0.0"
   checksum: c0c8ff36079ce5ada64f46cc9d6fd47ebcf38241105b6e0c98f412e8ad91f084bcf906ff644cc3a4bd876ca27a62accb8b0fff72ea6ed1a414b89d8506f4a5ca
@@ -14064,10 +14752,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"diff-sequences@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "diff-sequences@npm:29.6.3"
-  checksum: 179daf9d2f9af5c57ad66d97cb902a538bcf8ed64963fa7aa0c329b3de3665ce2eb6ffdc2f69f29d445fa4af2517e5e55e5b6e00c00a9ae4f43645f97f7078cb
+"diff-sequences@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "diff-sequences@npm:29.4.3"
+  checksum: 2287b259400513332d757f921eeda7c740863a919a00bd1d1b22ab2532b3e763538c404aec0953a813bbe33e660cbc77d0742875d6674d8dc5bc31d74ec88cc1
   languageName: node
   linkType: hard
 
@@ -14129,11 +14817,11 @@ __metadata:
   linkType: hard
 
 "dns-packet@npm:^5.2.2":
-  version: 5.6.1
-  resolution: "dns-packet@npm:5.6.1"
+  version: 5.6.0
+  resolution: "dns-packet@npm:5.6.0"
   dependencies:
     "@leichtgewicht/ip-codec": "npm:^2.0.1"
-  checksum: ef5496dd5a906e22ed262cbe1a6f5d532c0893c4f1884a7aa37d4d0d8b8376a2b43f749aab087c8bb1354d67b40444f7fca8de4017b161a4cea468543061aed3
+  checksum: 1643bf648fe63c44f21f28dff2174f6de45034b55e47a6e9b427a179701fc8a5b15019f7f84b300b537637c69ab3d03553333c566c99cc905ba97652ea388ee8
   languageName: node
   linkType: hard
 
@@ -14417,17 +15105,18 @@ __metadata:
   languageName: node
   linkType: hard
 
-"downshift@npm:5.2.1":
-  version: 5.2.1
-  resolution: "downshift@npm:5.2.1"
+"downshift@npm:8.2.2":
+  version: 8.2.2
+  resolution: "downshift@npm:8.2.2"
   dependencies:
-    "@babel/runtime": "npm:^7.9.1"
-    compute-scroll-into-view: "npm:^1.0.13"
-    prop-types: "npm:^15.7.2"
-    react-is: "npm:^16.13.1"
+    "@babel/runtime": "npm:^7.22.15"
+    compute-scroll-into-view: "npm:^3.0.3"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:^18.2.0"
+    tslib: "npm:^2.6.2"
   peerDependencies:
-    react: ">=0.14.9"
-  checksum: 5ea8784bedca4106ab38a64dbd429785e2a0c682f9d2b3fe84681223426702b3a03333fb05f5759c766197cb4c917eeb21471e8f8c65163d7b2c94761c27cb19
+    react: ">=16.12.0"
+  checksum: 6413fcbec4a533f186ea7839b2b83d5f08d4f63c2b346c8c93c31fa8924b64655b9f317c97c032dbc77d0a7fe63fe2b3917b205fc0c5d23a0096cfb7cbcb3868
   languageName: node
   linkType: hard
 
@@ -14522,9 +15211,9 @@ __metadata:
   linkType: hard
 
 "electron-to-chromium@npm:^1.4.535":
-  version: 1.4.583
-  resolution: "electron-to-chromium@npm:1.4.583"
-  checksum: aded810eb439e3750821a3dc90a0c3f7e64d41e15662c4c6ef6bc5bd8f80045568854177275c2cf68f646e3b4554c853bd24ff5ad70a600b899a659bf242827f
+  version: 1.4.576
+  resolution: "electron-to-chromium@npm:1.4.576"
+  checksum: 9db54ffa605dba161392e7b3c8a47493029cbb64801980f3ba4214ce69c22fc8bf4e4aa6c6449c7805a1e7f24c3233f94a955418732ff9d63247d2ecbb079eb6
   languageName: node
   linkType: hard
 
@@ -14537,7 +15226,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"elliptic@npm:^6.5.3, elliptic@npm:^6.5.4":
+"elliptic@npm:^6.5.3":
   version: 6.5.4
   resolution: "elliptic@npm:6.5.4"
   dependencies:
@@ -14615,7 +15304,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"encoding@npm:^0.1.12, encoding@npm:^0.1.13":
+"encoding@npm:^0.1.13":
   version: 0.1.13
   resolution: "encoding@npm:0.1.13"
   dependencies:
@@ -14652,8 +15341,8 @@ __metadata:
   linkType: hard
 
 "engine.io@npm:~6.5.2":
-  version: 6.5.4
-  resolution: "engine.io@npm:6.5.4"
+  version: 6.5.2
+  resolution: "engine.io@npm:6.5.2"
   dependencies:
     "@types/cookie": "npm:^0.4.1"
     "@types/cors": "npm:^2.8.12"
@@ -14665,7 +15354,7 @@ __metadata:
     debug: "npm:~4.3.1"
     engine.io-parser: "npm:~5.2.1"
     ws: "npm:~8.11.0"
-  checksum: f1a74fc9431593ca1e50d1faa5db1041feecf2a7da5c75cfca88c5a760d3c8a898141ff7e7a2a2a2859a784c25d9c87be422f094b553e0dcf98433f8e798d18f
+  checksum: fe5b72a4cd9f3f98ab6f9785ef185bc7805f66abb950fd24578b4c9a8c305030faaf9bc7d78a02e8c54ee0951c88f82470b72172e89682a92ee91342eb4c73fc
   languageName: node
   linkType: hard
 
@@ -14759,53 +15448,15 @@ __metadata:
   linkType: hard
 
 "envinfo@npm:^7.7.4":
-  version: 7.11.0
-  resolution: "envinfo@npm:7.11.0"
+  version: 7.10.0
+  resolution: "envinfo@npm:7.10.0"
   bin:
     envinfo: dist/cli.js
-  checksum: 8cba09db181329b243fe02b3384ec275ebf93d5d3663c31e2064697aa96576c7de9b7e1c878a250f8eaec0db8026bace747709dcdc8d8a4ecd9a653cdbc08926
-  languageName: node
-  linkType: hard
-
-"enzyme-adapter-react-16@npm:^1.14.0":
-  version: 1.15.7
-  resolution: "enzyme-adapter-react-16@npm:1.15.7"
-  dependencies:
-    enzyme-adapter-utils: "npm:^1.14.1"
-    enzyme-shallow-equal: "npm:^1.0.5"
-    has: "npm:^1.0.3"
-    object.assign: "npm:^4.1.4"
-    object.values: "npm:^1.1.5"
-    prop-types: "npm:^15.8.1"
-    react-is: "npm:^16.13.1"
-    react-test-renderer: "npm:^16.0.0-0"
-    semver: "npm:^5.7.0"
-  peerDependencies:
-    enzyme: ^3.0.0
-    react: ^16.0.0-0
-    react-dom: ^16.0.0-0
-  checksum: d71889354286f0b9be47c5eb072186a017e43eb08130316b9b8eb9e5dab82aacda76746a20f6cd389aa95645b159caee47a16d1847b565693b6a750ca280e074
-  languageName: node
-  linkType: hard
-
-"enzyme-adapter-utils@npm:^1.14.1":
-  version: 1.14.1
-  resolution: "enzyme-adapter-utils@npm:1.14.1"
-  dependencies:
-    airbnb-prop-types: "npm:^2.16.0"
-    function.prototype.name: "npm:^1.1.5"
-    has: "npm:^1.0.3"
-    object.assign: "npm:^4.1.4"
-    object.fromentries: "npm:^2.0.5"
-    prop-types: "npm:^15.8.1"
-    semver: "npm:^5.7.1"
-  peerDependencies:
-    react: 0.13.x || 0.14.x || ^15.0.0-0 || ^16.0.0-0
-  checksum: 01415519ebb50d628349d4d38e7e57992dd616d8027ea8be707c18951b5f58e9ddefe7b6f213a65a11d5de540c9499719774293e0039aa92355791ad7ea16969
+  checksum: d4db29c5a405081759c57c0e74ffa6adab09b7477ca105587252643394f13ab128ad4c8f755b15334b5f1901cef091acc76c71b695ce0f27853ebf147c882075
   languageName: node
   linkType: hard
 
-"enzyme-shallow-equal@npm:^1.0.1, enzyme-shallow-equal@npm:^1.0.5":
+"enzyme-shallow-equal@npm:^1.0.1":
   version: 1.0.5
   resolution: "enzyme-shallow-equal@npm:1.0.5"
   dependencies:
@@ -14828,7 +15479,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"enzyme@npm:^3.10.0":
+"enzyme@npm:^3.11.0":
   version: 3.11.0
   resolution: "enzyme@npm:3.11.0"
   dependencies:
@@ -14941,6 +15592,53 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-abstract@npm:^1.20.4, es-abstract@npm:^1.21.2":
+  version: 1.22.1
+  resolution: "es-abstract@npm:1.22.1"
+  dependencies:
+    array-buffer-byte-length: "npm:^1.0.0"
+    arraybuffer.prototype.slice: "npm:^1.0.1"
+    available-typed-arrays: "npm:^1.0.5"
+    call-bind: "npm:^1.0.2"
+    es-set-tostringtag: "npm:^2.0.1"
+    es-to-primitive: "npm:^1.2.1"
+    function.prototype.name: "npm:^1.1.5"
+    get-intrinsic: "npm:^1.2.1"
+    get-symbol-description: "npm:^1.0.0"
+    globalthis: "npm:^1.0.3"
+    gopd: "npm:^1.0.1"
+    has: "npm:^1.0.3"
+    has-property-descriptors: "npm:^1.0.0"
+    has-proto: "npm:^1.0.1"
+    has-symbols: "npm:^1.0.3"
+    internal-slot: "npm:^1.0.5"
+    is-array-buffer: "npm:^3.0.2"
+    is-callable: "npm:^1.2.7"
+    is-negative-zero: "npm:^2.0.2"
+    is-regex: "npm:^1.1.4"
+    is-shared-array-buffer: "npm:^1.0.2"
+    is-string: "npm:^1.0.7"
+    is-typed-array: "npm:^1.1.10"
+    is-weakref: "npm:^1.0.2"
+    object-inspect: "npm:^1.12.3"
+    object-keys: "npm:^1.1.1"
+    object.assign: "npm:^4.1.4"
+    regexp.prototype.flags: "npm:^1.5.0"
+    safe-array-concat: "npm:^1.0.0"
+    safe-regex-test: "npm:^1.0.0"
+    string.prototype.trim: "npm:^1.2.7"
+    string.prototype.trimend: "npm:^1.0.6"
+    string.prototype.trimstart: "npm:^1.0.6"
+    typed-array-buffer: "npm:^1.0.0"
+    typed-array-byte-length: "npm:^1.0.0"
+    typed-array-byte-offset: "npm:^1.0.0"
+    typed-array-length: "npm:^1.0.4"
+    unbox-primitive: "npm:^1.0.2"
+    which-typed-array: "npm:^1.1.10"
+  checksum: bd6c243a128ea1cb97cdd11c433a1f712b607b66bb2d40b42e4a4e4c746e679d3c168b59614fefed4bc3b0d7abc106ad202e8f417739371a151b9189d75af72a
+  languageName: node
+  linkType: hard
+
 "es-array-method-boxes-properly@npm:^1.0.0":
   version: 1.0.0
   resolution: "es-array-method-boxes-properly@npm:1.0.0"
@@ -14965,52 +15663,30 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-iterator-helpers@npm:^1.0.12, es-iterator-helpers@npm:^1.0.15":
-  version: 1.0.15
-  resolution: "es-iterator-helpers@npm:1.0.15"
-  dependencies:
-    asynciterator.prototype: "npm:^1.0.0"
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.22.1"
-    es-set-tostringtag: "npm:^2.0.1"
-    function-bind: "npm:^1.1.1"
-    get-intrinsic: "npm:^1.2.1"
-    globalthis: "npm:^1.0.3"
-    has-property-descriptors: "npm:^1.0.0"
-    has-proto: "npm:^1.0.1"
-    has-symbols: "npm:^1.0.3"
-    internal-slot: "npm:^1.0.5"
-    iterator.prototype: "npm:^1.1.2"
-    safe-array-concat: "npm:^1.0.1"
-  checksum: 78535c00c49d81df603e650886d3806f3cd8d288e2c07703cfb145725753a3d2df19bff9feeb14cd1baed02252d1f85c4bbc922c8db02841722ab3ec02e78339
-  languageName: node
-  linkType: hard
-
 "es-module-lexer@npm:^1.2.1":
-  version: 1.4.1
-  resolution: "es-module-lexer@npm:1.4.1"
-  checksum: cf453613468c417af6e189b03d9521804033fdd5a229a36fedec28d37ea929fccf6822d42abff1126eb01ba1d2aa2845a48d5d1772c0724f8204464d9d3855f6
+  version: 1.3.0
+  resolution: "es-module-lexer@npm:1.3.0"
+  checksum: dee2af09669d05282db987839681ea1917ce31ce4a2364cc9eb598675344c5c709895e7e782db87794065a6f3af054552e2cf42ccadcaec4c9fc0cbc4898f193
   languageName: node
   linkType: hard
 
 "es-set-tostringtag@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "es-set-tostringtag@npm:2.0.2"
+  version: 2.0.1
+  resolution: "es-set-tostringtag@npm:2.0.1"
   dependencies:
-    get-intrinsic: "npm:^1.2.2"
+    get-intrinsic: "npm:^1.1.3"
+    has: "npm:^1.0.3"
     has-tostringtag: "npm:^1.0.0"
-    hasown: "npm:^2.0.0"
-  checksum: afcec3a4c9890ae14d7ec606204858441c801ff84f312538e1d1ccf1e5493c8b17bd672235df785f803756472cb4f2d49b87bde5237aef33411e74c22f194e07
+  checksum: ec416a12948cefb4b2a5932e62093a7cf36ddc3efd58d6c58ca7ae7064475ace556434b869b0bbeb0c365f1032a8ccd577211101234b69837ad83ad204fff884
   languageName: node
   linkType: hard
 
 "es-shim-unscopables@npm:^1.0.0":
-  version: 1.0.2
-  resolution: "es-shim-unscopables@npm:1.0.2"
+  version: 1.0.0
+  resolution: "es-shim-unscopables@npm:1.0.0"
   dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: 6d3bf91f658a27cc7217cd32b407a0d714393a84d125ad576319b9e83a893bea165cf41270c29e9ceaa56d3cf41608945d7e2a2c31fd51c0009b0c31402b91c7
+    has: "npm:^1.0.3"
+  checksum: ac2db2c70d253cf83bebcdc974d185239e205ca18af743efd3b656bac00cabfee2358a050b18b63b46972dab5cfa10ef3f2597eb3a8d4d6d9417689793665da6
   languageName: node
   linkType: hard
 
@@ -15222,7 +15898,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"eslint-import-resolver-node@npm:^0.3.9":
+"eslint-import-resolver-node@npm:^0.3.7":
   version: 0.3.9
   resolution: "eslint-import-resolver-node@npm:0.3.9"
   dependencies:
@@ -15246,40 +15922,41 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-cypress@npm:^2.12.1":
-  version: 2.15.1
-  resolution: "eslint-plugin-cypress@npm:2.15.1"
+  version: 2.14.0
+  resolution: "eslint-plugin-cypress@npm:2.14.0"
   dependencies:
     globals: "npm:^13.20.0"
   peerDependencies:
     eslint: ">= 3.2.1"
-  checksum: 46344892f26e4f2c905a98e9d391bf1f930aa95e79f6678a1ca75ff466a6ca277fd51cde650fbcbc828068659acbad60601d239481402f443d177a1ef5934190
+  checksum: b35e612f32afe76ea863ffea99732efc2a4a5c8b3ff118664464a2728a311177390a61273c7e3f85055504d6dcdb755c98a8cb9c8e7f997ec694daa9684d38c9
   languageName: node
   linkType: hard
 
 "eslint-plugin-import@npm:^2.26.0":
-  version: 2.29.0
-  resolution: "eslint-plugin-import@npm:2.29.0"
+  version: 2.28.0
+  resolution: "eslint-plugin-import@npm:2.28.0"
   dependencies:
-    array-includes: "npm:^3.1.7"
-    array.prototype.findlastindex: "npm:^1.2.3"
-    array.prototype.flat: "npm:^1.3.2"
-    array.prototype.flatmap: "npm:^1.3.2"
+    array-includes: "npm:^3.1.6"
+    array.prototype.findlastindex: "npm:^1.2.2"
+    array.prototype.flat: "npm:^1.3.1"
+    array.prototype.flatmap: "npm:^1.3.1"
     debug: "npm:^3.2.7"
     doctrine: "npm:^2.1.0"
-    eslint-import-resolver-node: "npm:^0.3.9"
+    eslint-import-resolver-node: "npm:^0.3.7"
     eslint-module-utils: "npm:^2.8.0"
-    hasown: "npm:^2.0.0"
-    is-core-module: "npm:^2.13.1"
+    has: "npm:^1.0.3"
+    is-core-module: "npm:^2.12.1"
     is-glob: "npm:^4.0.3"
     minimatch: "npm:^3.1.2"
-    object.fromentries: "npm:^2.0.7"
-    object.groupby: "npm:^1.0.1"
-    object.values: "npm:^1.1.7"
+    object.fromentries: "npm:^2.0.6"
+    object.groupby: "npm:^1.0.0"
+    object.values: "npm:^1.1.6"
+    resolve: "npm:^1.22.3"
     semver: "npm:^6.3.1"
     tsconfig-paths: "npm:^3.14.2"
   peerDependencies:
     eslint: ^2 || ^3 || ^4 || ^5 || ^6 || ^7.2.0 || ^8
-  checksum: d6e8d016f38369892c85b866f762c03dee2b337d4f12031756e30d7490879261d1192a3c2f682fd7c4d2b923465f7a1e3d22cfdad5da1b1391c3bd39ea87af1a
+  checksum: 6d6e983da572e053102e56a2c093545e30119ac777b083b1d535ddfc6112043bbf34a4389549f4eb316adb56630a7b2ee3ce0d8763aadc4dbf1eb68e0a8ca7a1
   languageName: node
   linkType: hard
 
@@ -15301,41 +15978,41 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-jsx-a11y@npm:^6.6.1":
-  version: 6.8.0
-  resolution: "eslint-plugin-jsx-a11y@npm:6.8.0"
-  dependencies:
-    "@babel/runtime": "npm:^7.23.2"
-    aria-query: "npm:^5.3.0"
-    array-includes: "npm:^3.1.7"
-    array.prototype.flatmap: "npm:^1.3.2"
-    ast-types-flow: "npm:^0.0.8"
-    axe-core: "npm:=4.7.0"
-    axobject-query: "npm:^3.2.1"
+  version: 6.7.1
+  resolution: "eslint-plugin-jsx-a11y@npm:6.7.1"
+  dependencies:
+    "@babel/runtime": "npm:^7.20.7"
+    aria-query: "npm:^5.1.3"
+    array-includes: "npm:^3.1.6"
+    array.prototype.flatmap: "npm:^1.3.1"
+    ast-types-flow: "npm:^0.0.7"
+    axe-core: "npm:^4.6.2"
+    axobject-query: "npm:^3.1.1"
     damerau-levenshtein: "npm:^1.0.8"
     emoji-regex: "npm:^9.2.2"
-    es-iterator-helpers: "npm:^1.0.15"
-    hasown: "npm:^2.0.0"
-    jsx-ast-utils: "npm:^3.3.5"
-    language-tags: "npm:^1.0.9"
+    has: "npm:^1.0.3"
+    jsx-ast-utils: "npm:^3.3.3"
+    language-tags: "npm:=1.0.5"
     minimatch: "npm:^3.1.2"
-    object.entries: "npm:^1.1.7"
-    object.fromentries: "npm:^2.0.7"
+    object.entries: "npm:^1.1.6"
+    object.fromentries: "npm:^2.0.6"
+    semver: "npm:^6.3.0"
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: 7a8e4498531a43d988ce2f12502a3f5ce96eacfec13f956cf927f24bb041b724fb7fc0f0306ea19d143bfc79e138bf25e25acca0822847206ac6bf5ce095e846
+  checksum: b7eb451304dc27c9552649a716be1de3b5d577f39e53f6da6a2dac084b84b349b0224be3020439f99c2b3bf417a13c5591326f1ce6af8d74f1cb5d5d95c4222b
   languageName: node
   linkType: hard
 
-"eslint-plugin-lit@npm:^1.6.1":
-  version: 1.10.1
-  resolution: "eslint-plugin-lit@npm:1.10.1"
+"eslint-plugin-lit@npm:^1.8.3":
+  version: 1.8.3
+  resolution: "eslint-plugin-lit@npm:1.8.3"
   dependencies:
     parse5: "npm:^6.0.1"
     parse5-htmlparser2-tree-adapter: "npm:^6.0.1"
     requireindex: "npm:^1.2.0"
   peerDependencies:
     eslint: ">= 5"
-  checksum: e9aea27c2bdf4745b5afa76182d2f14e42e6170b5e5c9f6b1838b57b1e48e6996da7fd65b42237fe0c32d7c25471864396c03171ae9ed684bcfb3b8f71f92aa8
+  checksum: efe84b3d121150d589be76bf90799b5165986f941c3c2524dec4a32f1d07fce323a327844477aaf575f9a9175d50db67844e473d5efb1c9b39563f8a5dd1ac2b
   languageName: node
   linkType: hard
 
@@ -15364,14 +16041,13 @@ __metadata:
   linkType: hard
 
 "eslint-plugin-react@npm:^7.31.10":
-  version: 7.33.2
-  resolution: "eslint-plugin-react@npm:7.33.2"
+  version: 7.33.1
+  resolution: "eslint-plugin-react@npm:7.33.1"
   dependencies:
     array-includes: "npm:^3.1.6"
     array.prototype.flatmap: "npm:^1.3.1"
     array.prototype.tosorted: "npm:^1.1.1"
     doctrine: "npm:^2.1.0"
-    es-iterator-helpers: "npm:^1.0.12"
     estraverse: "npm:^5.3.0"
     jsx-ast-utils: "npm:^2.4.1 || ^3.0.0"
     minimatch: "npm:^3.1.2"
@@ -15385,14 +16061,14 @@ __metadata:
     string.prototype.matchall: "npm:^4.0.8"
   peerDependencies:
     eslint: ^3 || ^4 || ^5 || ^6 || ^7 || ^8
-  checksum: cb8c5dd5859cace330e24b7d74b9c652c0d93ef1d87957261fe1ac2975c27c918d0d5dc607f25aba4972ce74d04456f4f93883a16ac10cd598680d047fc3495d
+  checksum: b98783439613bb64a6342917b8b31044997b4bf64d2830f5f0056f34c7373752113ddce05e5d6032577b802e4985f57116f4953efced5f23284d9fb4dccca2ab
   languageName: node
   linkType: hard
 
 "eslint-plugin-tree-shaking@npm:^1.10.0":
-  version: 1.10.1
-  resolution: "eslint-plugin-tree-shaking@npm:1.10.1"
-  checksum: bf83a815796c96ca2a119b2a75c0592d1857d922c14f5b33837f1e661509ef44a26e6e5b0356f25fc84d25144b1e9672a1066f2b829c15b45543ef6322c94b23
+  version: 1.10.0
+  resolution: "eslint-plugin-tree-shaking@npm:1.10.0"
+  checksum: e3cdd165410647652ab4272266e963a06398ab4b8ffa6b494e7a88ffb0bc7bbed46cf29ed08eff09bd918c7e9f97245acb571d152e1b034625a04ea6f21803dd
   languageName: node
   linkType: hard
 
@@ -15514,16 +16190,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"esprima@npm:^2.6.0":
-  version: 2.7.3
-  resolution: "esprima@npm:2.7.3"
-  bin:
-    esparse: ./bin/esparse.js
-    esvalidate: ./bin/esvalidate.js
-  checksum: 7508285b882012deea8f68dff4b759f9a17e9317ad8c7449969feb1e2efc083fa4a0012139a4722f1e96da81ece0ac319756c8e79a01e5ddb4b36ae483464d3f
-  languageName: node
-  linkType: hard
-
 "esprima@npm:^4.0.0, esprima@npm:^4.0.1":
   version: 4.0.1
   resolution: "esprima@npm:4.0.1"
@@ -15587,13 +16253,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"estree-walker@npm:^0.6.1":
-  version: 0.6.1
-  resolution: "estree-walker@npm:0.6.1"
-  checksum: b8da7815030c4e0b735f5f8af370af09525e052ee14e539cecabc24ad6da1782448778361417e7c438091a59e7ca9f4a0c11642f7da4f2ebf1ba7a150a590bcc
-  languageName: node
-  linkType: hard
-
 "estree-walker@npm:^1.0.1":
   version: 1.0.1
   resolution: "estree-walker@npm:1.0.1"
@@ -15918,15 +16577,16 @@ __metadata:
   linkType: hard
 
 "expect@npm:^29.0.0":
-  version: 29.7.0
-  resolution: "expect@npm:29.7.0"
+  version: 29.6.2
+  resolution: "expect@npm:29.6.2"
   dependencies:
-    "@jest/expect-utils": "npm:^29.7.0"
-    jest-get-type: "npm:^29.6.3"
-    jest-matcher-utils: "npm:^29.7.0"
-    jest-message-util: "npm:^29.7.0"
-    jest-util: "npm:^29.7.0"
-  checksum: 63f97bc51f56a491950fb525f9ad94f1916e8a014947f8d8445d3847a665b5471b768522d659f5e865db20b6c2033d2ac10f35fcbd881a4d26407a4f6f18451a
+    "@jest/expect-utils": "npm:^29.6.2"
+    "@types/node": "npm:*"
+    jest-get-type: "npm:^29.4.3"
+    jest-matcher-utils: "npm:^29.6.2"
+    jest-message-util: "npm:^29.6.2"
+    jest-util: "npm:^29.6.2"
+  checksum: 304472c4c63fc89accdf32a6817c62945efbcb3d536347dd49bc793dfc91f73fd9661411e0cc919f483ef309be589e33dd5bc9a27b55a5d88ae99009ad0df8f7
   languageName: node
   linkType: hard
 
@@ -16150,15 +16810,15 @@ __metadata:
   linkType: hard
 
 "fast-glob@npm:^3.0.3, fast-glob@npm:^3.2.11, fast-glob@npm:^3.2.2, fast-glob@npm:^3.2.5, fast-glob@npm:^3.2.9":
-  version: 3.3.2
-  resolution: "fast-glob@npm:3.3.2"
+  version: 3.3.1
+  resolution: "fast-glob@npm:3.3.1"
   dependencies:
     "@nodelib/fs.stat": "npm:^2.0.2"
     "@nodelib/fs.walk": "npm:^1.2.3"
     glob-parent: "npm:^5.1.2"
     merge2: "npm:^1.3.0"
     micromatch: "npm:^4.0.4"
-  checksum: 222512e9315a0efca1276af9adb2127f02105d7288fa746145bf45e2716383fb79eb983c89601a72a399a56b7c18d38ce70457c5466218c5f13fad957cee16df
+  checksum: 51bcd15472879dfe51d4b01c5b70bbc7652724d39cdd082ba11276dbd7d84db0f6b33757e1938af8b2768a4bf485d9be0c89153beae24ee8331d6dcc7550379f
   languageName: node
   linkType: hard
 
@@ -16176,6 +16836,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"fast-json-stringify@npm:^5.8.0":
+  version: 5.8.0
+  resolution: "fast-json-stringify@npm:5.8.0"
+  dependencies:
+    "@fastify/deepmerge": "npm:^1.0.0"
+    ajv: "npm:^8.10.0"
+    ajv-formats: "npm:^2.1.1"
+    fast-deep-equal: "npm:^3.1.3"
+    fast-uri: "npm:^2.1.0"
+    rfdc: "npm:^1.2.0"
+  checksum: dee6d0929cee6acb79d184208012098934248da1cbe73d359c39b923da7d887a50f0689b381bf8ff3e5ea79a83e70d5b99271639f367f970ee14bc72af156ec0
+  languageName: node
+  linkType: hard
+
 "fast-levenshtein@npm:^1.0.0":
   version: 1.1.4
   resolution: "fast-levenshtein@npm:1.1.4"
@@ -16199,19 +16873,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fast-sass-loader@npm:2.0.1":
-  version: 2.0.1
-  resolution: "fast-sass-loader@npm:2.0.1"
-  dependencies:
-    async: "npm:^2.0.1"
-    cli-source-preview: "npm:^1.0.0"
-    co: "npm:^4.6.0"
-    fs-extra: "npm:3.x"
-    loader-utils: "npm:^1.1.0"
-  peerDependencies:
-    sass: 1.x
-    webpack: 1.x || 2.x || 3.x || 4.x || 5.x
-  checksum: 4945457e012af646bd5eaf4987a80200b6e615eb005a6e68d705732d5367e7f8de552dfe2ea0fafeedc6e7f176a78b38c2d790ed9edf902e015f3fca33cdced5
+"fast-uri@npm:^2.1.0":
+  version: 2.2.0
+  resolution: "fast-uri@npm:2.2.0"
+  checksum: eb5e6ac0046c33d87702bc3c978508575da5e7a12cbec101215d6822c2079e4c494dbdb4517ad0b66be47650c7a2124a1ed97df4ef2a4f37b2fd0b0ff9ae7944
   languageName: node
   linkType: hard
 
@@ -16623,13 +17288,12 @@ __metadata:
   linkType: hard
 
 "flat-cache@npm:^3.0.4":
-  version: 3.2.0
-  resolution: "flat-cache@npm:3.2.0"
+  version: 3.0.4
+  resolution: "flat-cache@npm:3.0.4"
   dependencies:
-    flatted: "npm:^3.2.9"
-    keyv: "npm:^4.5.3"
+    flatted: "npm:^3.1.0"
     rimraf: "npm:^3.0.2"
-  checksum: 02381c6ece5e9fa5b826c9bbea481d7fd77645d96e4b0b1395238124d581d10e56f17f723d897b6d133970f7a57f0fab9148cbbb67237a0a0ffe794ba60c0c70
+  checksum: 9fe5d0cb97c988e3b25242e71346965fae22757674db3fca14206850af2efa3ca3b04a3ba0eba8d5e20fd8a3be80a2e14b1c2917e70ffe1acb98a8c3327e4c9f
   languageName: node
   linkType: hard
 
@@ -16649,13 +17313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flatpickr@npm:4.6.13":
-  version: 4.6.13
-  resolution: "flatpickr@npm:4.6.13"
-  checksum: 0e32f2fbd427aa8d838da8fb0cf2e56b65efc22783dcebcc32c11b7fbb6bbc8c3532f9410915f3acb7dc0feebb49202bea03e49cc80b9d4d11b3bdce49488bc0
-  languageName: node
-  linkType: hard
-
 "flatpickr@npm:4.6.9":
   version: 4.6.9
   resolution: "flatpickr@npm:4.6.9"
@@ -16663,13 +17320,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flatpickr@patch:flatpickr@npm%3A4.6.13#./.yarn/patches/flatpickr-npm-4.6.13-06399933fc.patch::locator=carbon-for-ibm-dotcom%40workspace%3A.":
-  version: 4.6.13
-  resolution: "flatpickr@patch:flatpickr@npm%3A4.6.13#./.yarn/patches/flatpickr-npm-4.6.13-06399933fc.patch::version=4.6.13&hash=45a0af&locator=carbon-for-ibm-dotcom%40workspace%3A."
-  checksum: 720e102d03aa2ac3a4ad4778acdae55c90f49345293621b33a18dce23cb40cc9880853a694b8d92de7cecd7699c447a5609318bf41e25606465321c83840a582
-  languageName: node
-  linkType: hard
-
 "flatted@npm:^2.0.0":
   version: 2.0.2
   resolution: "flatted@npm:2.0.2"
@@ -16677,7 +17327,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"flatted@npm:^3.2.7, flatted@npm:^3.2.9":
+"flatted@npm:^3.1.0":
+  version: 3.2.7
+  resolution: "flatted@npm:3.2.7"
+  checksum: 427633049d55bdb80201c68f7eb1cbd533e03eac541f97d3aecab8c5526f12a20ccecaeede08b57503e772c769e7f8680b37e8d482d1e5f8d7e2194687f9ea35
+  languageName: node
+  linkType: hard
+
+"flatted@npm:^3.2.7":
   version: 3.2.9
   resolution: "flatted@npm:3.2.9"
   checksum: dc2b89e46a2ebde487199de5a4fcb79e8c46f984043fea5c41dbf4661eb881fefac1c939b5bdcd8a09d7f960ec364f516970c7ec44e58ff451239c07fd3d419b
@@ -16694,12 +17351,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"focus-lock@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "focus-lock@npm:1.0.0"
+"focus-lock@npm:^0.11.6":
+  version: 0.11.6
+  resolution: "focus-lock@npm:0.11.6"
   dependencies:
     tslib: "npm:^2.0.3"
-  checksum: 5d8c03a40f52fadeec67d9c8900f83c4a71e5942511c9bfe3103d2cf0a7e84d75069e42eeafcee9701c37fed6d9c3f235a21dd9dd438c63b10ae4b5bef2af517
+  checksum: 090ac6d830bfb8dd638c42e89e81fa2645b215670bede299102810930c5570228eb689007a3890e8d2df0b4cddd514dc7a90177383b1edd6ea7d16d11f927330
   languageName: node
   linkType: hard
 
@@ -16713,6 +17370,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"follow-redirects@npm:^1.14.9":
+  version: 1.15.2
+  resolution: "follow-redirects@npm:1.15.2"
+  peerDependenciesMeta:
+    debug:
+      optional: true
+  checksum: 8be0d39919770054812537d376850ccde0b4762b0501c440bd08724971a078123b55f57704f2984e0664fecc0c86adea85add63295804d9dce401cd9604c91d3
+  languageName: node
+  linkType: hard
+
 "for-each@npm:^0.3.3":
   version: 0.3.3
   resolution: "for-each@npm:0.3.3"
@@ -16964,17 +17631,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fs-extra@npm:3.x":
-  version: 3.0.1
-  resolution: "fs-extra@npm:3.0.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.2"
-    jsonfile: "npm:^3.0.0"
-    universalify: "npm:^0.1.0"
-  checksum: 8e233f6200b8a5e215b4f937353a5ccada2f4b247453f1229917ba46f93190e9f559f255cd3cb9f1f612d855911e7fdc52e5fe9c94f3294ef2b6131ef321250c
-  languageName: node
-  linkType: hard
-
 "fs-extra@npm:8.1.0, fs-extra@npm:^8.1.0":
   version: 8.1.0
   resolution: "fs-extra@npm:8.1.0"
@@ -17030,11 +17686,11 @@ __metadata:
   linkType: hard
 
 "fs-minipass@npm:^3.0.0":
-  version: 3.0.3
-  resolution: "fs-minipass@npm:3.0.3"
+  version: 3.0.2
+  resolution: "fs-minipass@npm:3.0.2"
   dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: af143246cf6884fe26fa281621d45cfe111d34b30535a475bfa38dafe343dadb466c047a924ffc7d6b7b18265df4110224ce3803806dbb07173bf2087b648d7f
+    minipass: "npm:^5.0.0"
+  checksum: 1c071b5b8fc5b553ad2bd40f85988bc4d78d80eee766d0082a67dcff9a2536fd4fdd5fa2441661f799fa95000054296e4f900d6e96b2a025d173d325f3adf458
   languageName: node
   linkType: hard
 
@@ -17049,9 +17705,9 @@ __metadata:
   linkType: hard
 
 "fs-monkey@npm:^1.0.4":
-  version: 1.0.5
-  resolution: "fs-monkey@npm:1.0.5"
-  checksum: 7fcdf9267006800d61f1722cf9fa92ed8be8b3ed86614f6d43ab6f87a30f13bc784020465e20728ca4ea65ea7377bfcdbde52b54bf8c3cc2f43a6d62270ebf64
+  version: 1.0.4
+  resolution: "fs-monkey@npm:1.0.4"
+  checksum: 9944223c25e62e176cbb9b0f9e0ee1697a1676419529e948ec013b49156863411a09b45671b56267d3118c867d3a0d5c08225845160a6148861cc16fc1eec79e
   languageName: node
   linkType: hard
 
@@ -17088,16 +17744,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"fsevents@npm:2.3.2":
-  version: 2.3.2
-  resolution: "fsevents@npm:2.3.2"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 6b5b6f5692372446ff81cf9501c76e3e0459a4852b3b5f1fc72c103198c125a6b8c72f5f166bdd76ffb2fca261e7f6ee5565daf80dca6e571e55bcc589cc1256
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
 "fsevents@npm:^1.2.7":
   version: 1.2.13
   resolution: "fsevents@npm:1.2.13"
@@ -17110,20 +17756,11 @@ __metadata:
   linkType: hard
 
 "fsevents@npm:^2.1.2, fsevents@npm:~2.3.2":
-  version: 2.3.3
-  resolution: "fsevents@npm:2.3.3"
-  dependencies:
-    node-gyp: "npm:latest"
-  checksum: 4c1ade961ded57cdbfbb5cac5106ec17bc8bccd62e16343c569a0ceeca83b9dfef87550b4dc5cbb89642da412b20c5071f304c8c464b80415446e8e155a038c0
-  conditions: os=darwin
-  languageName: node
-  linkType: hard
-
-"fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>":
   version: 2.3.2
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
+  resolution: "fsevents@npm:2.3.2"
   dependencies:
     node-gyp: "npm:latest"
+  checksum: 6b5b6f5692372446ff81cf9501c76e3e0459a4852b3b5f1fc72c103198c125a6b8c72f5f166bdd76ffb2fca261e7f6ee5565daf80dca6e571e55bcc589cc1256
   conditions: os=darwin
   languageName: node
   linkType: hard
@@ -17139,8 +17776,8 @@ __metadata:
   linkType: hard
 
 "fsevents@patch:fsevents@npm%3A^2.1.2#optional!builtin<compat/fsevents>, fsevents@patch:fsevents@npm%3A~2.3.2#optional!builtin<compat/fsevents>":
-  version: 2.3.3
-  resolution: "fsevents@patch:fsevents@npm%3A2.3.3#optional!builtin<compat/fsevents>::version=2.3.3&hash=df0bf1"
+  version: 2.3.2
+  resolution: "fsevents@patch:fsevents@npm%3A2.3.2#optional!builtin<compat/fsevents>::version=2.3.2&hash=df0bf1"
   dependencies:
     node-gyp: "npm:latest"
   conditions: os=darwin
@@ -17238,15 +17875,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"gaze@npm:^1.0.0":
-  version: 1.1.3
-  resolution: "gaze@npm:1.1.3"
-  dependencies:
-    globule: "npm:^1.0.0"
-  checksum: 9ff1110aae5c7d96cbd49812883558971c2f9eba00bdd20e326b5644e262956464fa67edcad03f2cb2ae6ca4f26c80cb1fb5b4a610280a77fca51046acc7749c
-  languageName: node
-  linkType: hard
-
 "generate-function@npm:^2.0.0":
   version: 2.3.1
   resolution: "generate-function@npm:2.3.1"
@@ -17648,7 +18276,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.0.5, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7, glob@npm:^7.2.0, glob@npm:^7.2.3":
+"glob@npm:^7.0.0, glob@npm:^7.0.3, glob@npm:^7.0.5, glob@npm:^7.1.1, glob@npm:^7.1.2, glob@npm:^7.1.3, glob@npm:^7.1.4, glob@npm:^7.1.6, glob@npm:^7.1.7, glob@npm:^7.2.0":
   version: 7.2.3
   resolution: "glob@npm:7.2.3"
   dependencies:
@@ -17687,20 +18315,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"glob@npm:~7.1.1":
-  version: 7.1.7
-  resolution: "glob@npm:7.1.7"
-  dependencies:
-    fs.realpath: "npm:^1.0.0"
-    inflight: "npm:^1.0.4"
-    inherits: "npm:2"
-    minimatch: "npm:^3.0.4"
-    once: "npm:^1.3.0"
-    path-is-absolute: "npm:^1.0.0"
-  checksum: ff5aab0386e9cace92b0550d42085b71013c5ea382982dd7fdded998a559635f61413b8ba6fb7294eef289c83b52f4e64136f888300ac8afc4f3e5623182d6c8
-  languageName: node
-  linkType: hard
-
 "global-dirs@npm:^0.1.1":
   version: 0.1.1
   resolution: "global-dirs@npm:0.1.1"
@@ -17812,11 +18426,11 @@ __metadata:
   linkType: hard
 
 "globals@npm:^13.20.0":
-  version: 13.23.0
-  resolution: "globals@npm:13.23.0"
+  version: 13.21.0
+  resolution: "globals@npm:13.21.0"
   dependencies:
     type-fest: "npm:^0.20.2"
-  checksum: bf6a8616f4a64959c0b9a8eb4dc8a02e7dd0082385f7f06bc9694d9fceabe39f83f83789322cfe0470914dc8b273b7a29af5570b9e1a0507d3fb7348a64703a3
+  checksum: 98ce947dc413e6c8feed236f980dee4bc8d9f4b29790e27bccb277d385fac5d77146e1f9c244c6609aca1d109101642e663caf88c0ba6bff0b069ea82d571441
   languageName: node
   linkType: hard
 
@@ -17827,7 +18441,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globalthis@npm:^1.0.0, globalthis@npm:^1.0.3":
+"globalthis@npm:^1.0.0, globalthis@npm:^1.0.2, globalthis@npm:^1.0.3":
   version: 1.0.3
   resolution: "globalthis@npm:1.0.3"
   dependencies:
@@ -17889,17 +18503,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"globule@npm:^1.0.0":
-  version: 1.3.4
-  resolution: "globule@npm:1.3.4"
-  dependencies:
-    glob: "npm:~7.1.1"
-    lodash: "npm:^4.17.21"
-    minimatch: "npm:~3.0.2"
-  checksum: 04ac30656f9fc34e7e30a700ef39bfc357629a9214e2e228ee714bc0f1be60c5e4e2a78facafa5588889b02d25f02012d9e8c057704040e19e86b920effe54d5
-  languageName: node
-  linkType: hard
-
 "glogg@npm:^1.0.0":
   version: 1.0.2
   resolution: "glogg@npm:1.0.2"
@@ -18357,11 +18960,11 @@ __metadata:
   linkType: hard
 
 "has-property-descriptors@npm:^1.0.0":
-  version: 1.0.1
-  resolution: "has-property-descriptors@npm:1.0.1"
+  version: 1.0.0
+  resolution: "has-property-descriptors@npm:1.0.0"
   dependencies:
-    get-intrinsic: "npm:^1.2.2"
-  checksum: 21a47bb080a24e79594aef1ce71e1a18a1c5ab4120308e218088f67ebb7f6f408847541e2d96e5bd00e90eef5c5a49e4ebbdc8fc2d5b365a2c379aef071642f0
+    get-intrinsic: "npm:^1.1.1"
+  checksum: a6d3f0a266d0294d972e354782e872e2fe1b6495b321e6ef678c9b7a06a40408a6891817350c62e752adced73a94ac903c54734fee05bf65b1905ee1368194bb
   languageName: node
   linkType: hard
 
@@ -18442,9 +19045,11 @@ __metadata:
   linkType: hard
 
 "has@npm:^1.0.3":
-  version: 1.0.4
-  resolution: "has@npm:1.0.4"
-  checksum: c245f332fe78c7b6b8753857240ac12b3286f995f656a33c77e0f5baab7d0157e6ddb1c34940ffd2bffc51f75ede50cd8b29ff65c13e336376aca8cf3df58043
+  version: 1.0.3
+  resolution: "has@npm:1.0.3"
+  dependencies:
+    function-bind: "npm:^1.1.1"
+  checksum: a449f3185b1d165026e8d25f6a8c3390bd25c201ff4b8c1aaf948fc6a5fcfd6507310b8c00c13a3325795ea9791fcc3d79d61eafa313b5750438fc19183df57b
   languageName: node
   linkType: hard
 
@@ -18784,23 +19389,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-minifier-terser@npm:^6.0.2":
-  version: 6.1.0
-  resolution: "html-minifier-terser@npm:6.1.0"
-  dependencies:
-    camel-case: "npm:^4.1.2"
-    clean-css: "npm:^5.2.2"
-    commander: "npm:^8.3.0"
-    he: "npm:^1.2.0"
-    param-case: "npm:^3.0.4"
-    relateurl: "npm:^0.2.7"
-    terser: "npm:^5.10.0"
-  bin:
-    html-minifier-terser: cli.js
-  checksum: a244fa944e002b57c66cc829a3f2dfdb9514b1833c2d838ada624964bf8c0afaf61d36c371758c7e44dedae95cea740a84d8d1067b916ed204f35175184d0e27
-  languageName: node
-  linkType: hard
-
 "html-minifier@npm:^3.5.8":
   version: 3.5.21
   resolution: "html-minifier@npm:3.5.21"
@@ -18851,21 +19439,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"html-webpack-plugin@npm:^5.0.0":
-  version: 5.5.3
-  resolution: "html-webpack-plugin@npm:5.5.3"
-  dependencies:
-    "@types/html-minifier-terser": "npm:^6.0.0"
-    html-minifier-terser: "npm:^6.0.2"
-    lodash: "npm:^4.17.21"
-    pretty-error: "npm:^4.0.0"
-    tapable: "npm:^2.0.0"
-  peerDependencies:
-    webpack: ^5.20.0
-  checksum: 01d302a434e3db9f0e2db370f06300fb613de0fb8bdcafd4693e44c2528b8608621e5e7ca5d8302446db3f20c5f8875f1f675926d469b13ebab139954d241055
-  languageName: node
-  linkType: hard
-
 "htmlparser2@npm:^3.10.0":
   version: 3.10.1
   resolution: "htmlparser2@npm:3.10.1"
@@ -19235,9 +19808,9 @@ __metadata:
   linkType: hard
 
 "immutable@npm:^4.0.0":
-  version: 4.3.4
-  resolution: "immutable@npm:4.3.4"
-  checksum: ea187acc1eec9dcfaa0823bae59e1ae0ea82e7a40d2ace9fb84d467875d5506ced684a79b68e70451f1e1761a387a958ba724171f93aa10330998b026fcb5d29
+  version: 4.3.2
+  resolution: "immutable@npm:4.3.2"
+  checksum: 85176b8f3124e04479cfc1f682e3aea9c3665030cf2e7c22e64b53fe8052b42323088208ae0108cf37ac6ce569784858bc5c02b3c8187fa2d363f6977de0e5c0
   languageName: node
   linkType: hard
 
@@ -19260,7 +19833,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0":
+"import-fresh@npm:^3.0.0, import-fresh@npm:^3.1.0, import-fresh@npm:^3.2.1":
   version: 3.3.0
   resolution: "import-fresh@npm:3.3.0"
   dependencies:
@@ -19359,6 +19932,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"inherits@npm:2.0.1":
+  version: 2.0.1
+  resolution: "inherits@npm:2.0.1"
+  checksum: 37165f42e53627edc18d815654a79e7407e356adf480aab77db3a12c978e597f3af632cf0459472dd5a088bc21ee911020f544c0d3c23b45bcfd1cd92fe9e404
+  languageName: node
+  linkType: hard
+
 "inherits@npm:2.0.3":
   version: 2.0.3
   resolution: "inherits@npm:2.0.3"
@@ -19469,6 +20049,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"internal-slot@npm:^1.0.3":
+  version: 1.0.5
+  resolution: "internal-slot@npm:1.0.5"
+  dependencies:
+    get-intrinsic: "npm:^1.2.0"
+    has: "npm:^1.0.3"
+    side-channel: "npm:^1.0.4"
+  checksum: e2eb5b348e427957dd4092cb57b9374a2cbcabbf61e5e5b4d99cb68eeaae29394e8efd79f23dc2b1831253346f3c16b82010737b84841225e934d80d04d68643
+  languageName: node
+  linkType: hard
+
 "internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.5":
   version: 1.0.6
   resolution: "internal-slot@npm:1.0.6"
@@ -19555,12 +20146,21 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-accessor-descriptor@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-accessor-descriptor@npm:1.0.1"
+"is-accessor-descriptor@npm:^0.1.6":
+  version: 0.1.6
+  resolution: "is-accessor-descriptor@npm:0.1.6"
   dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: df0d1da1a320e57c594e6f9b52dab8a6bece6dc90e51689d05ac8e5247164aa3eb3e9c66b37027bebfc0ea5fcce6d9503dbc41dccd82f4b57add79a307735365
+    kind-of: "npm:^3.0.2"
+  checksum: 3d629a086a9585bc16a83a8e8a3416f400023301855cafb7ccc9a1d63145b7480f0ad28877dcc2cce09492c4ec1c39ef4c071996f24ee6ac626be4217b8ffc8a
+  languageName: node
+  linkType: hard
+
+"is-accessor-descriptor@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-accessor-descriptor@npm:1.0.0"
+  dependencies:
+    kind-of: "npm:^6.0.0"
+  checksum: 8e475968e9b22f9849343c25854fa24492dbe8ba0dea1a818978f9f1b887339190b022c9300d08c47fe36f1b913d70ce8cbaca00369c55a56705fdb7caed37fe
   languageName: node
   linkType: hard
 
@@ -19581,7 +20181,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.1.1":
+"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
   dependencies:
@@ -19616,15 +20216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-async-function@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "is-async-function@npm:2.0.0"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 2cf336fbf8cba3badcf526aa3d10384c30bab32615ac4831b74492eb4e843ccb7d8439a119c27f84bcf217d72024e611b1373f870f433b48f3fa57d3d1b863f1
-  languageName: node
-  linkType: hard
-
 "is-bigint@npm:^1.0.1":
   version: 1.0.4
   resolution: "is-bigint@npm:1.0.4"
@@ -19714,7 +20305,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-core-module@npm:^2.13.0, is-core-module@npm:^2.13.1, is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1":
+"is-core-module@npm:^2.12.1, is-core-module@npm:^2.9.0":
+  version: 2.13.0
+  resolution: "is-core-module@npm:2.13.0"
+  dependencies:
+    has: "npm:^1.0.3"
+  checksum: 55ccb5ccd208a1e088027065ee6438a99367e4c31c366b52fbaeac8fa23111cd17852111836d904da604801b3286d38d3d1ffa6cd7400231af8587f021099dc6
+  languageName: node
+  linkType: hard
+
+"is-core-module@npm:^2.13.0, is-core-module@npm:^2.5.0, is-core-module@npm:^2.8.1":
   version: 2.13.1
   resolution: "is-core-module@npm:2.13.1"
   dependencies:
@@ -19723,16 +20323,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-data-descriptor@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "is-data-descriptor@npm:1.0.1"
+"is-data-descriptor@npm:^0.1.4":
+  version: 0.1.4
+  resolution: "is-data-descriptor@npm:0.1.4"
   dependencies:
-    hasown: "npm:^2.0.0"
-  checksum: 49b36e903b31623b0c5b416e182e366810ef97a3a19ab0e6cd501eb5599112680b7d9e768b07a84fb52aa2510a92b3eb51a3e18ce8d5f7978a49f4b50e6ec6dd
+    kind-of: "npm:^3.0.2"
+  checksum: 5c622e078ba933a78338ae398a3d1fc5c23332b395312daf4f74bab4afb10d061cea74821add726cb4db8b946ba36217ee71a24fe71dd5bca4632edb7f6aad87
+  languageName: node
+  linkType: hard
+
+"is-data-descriptor@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "is-data-descriptor@npm:1.0.0"
+  dependencies:
+    kind-of: "npm:^6.0.0"
+  checksum: b8b1f13a535800a9f35caba2743b2cfd1e76312c0f94248c333d3b724d6ac6e07f06011e8b00eb2442f27dfc8fb71faf3dd52ced6bee41bb836be3df5d7811ee
   languageName: node
   linkType: hard
 
-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
+"is-date-object@npm:^1.0.1":
   version: 1.0.5
   resolution: "is-date-object@npm:1.0.5"
   dependencies:
@@ -19749,22 +20358,24 @@ __metadata:
   linkType: hard
 
 "is-descriptor@npm:^0.1.0":
-  version: 0.1.7
-  resolution: "is-descriptor@npm:0.1.7"
+  version: 0.1.6
+  resolution: "is-descriptor@npm:0.1.6"
   dependencies:
-    is-accessor-descriptor: "npm:^1.0.1"
-    is-data-descriptor: "npm:^1.0.1"
-  checksum: 38783182c3d83f839a9fa3e87b4d6de11fa9639833ed98993ea51aea2296b2da155121956e148695a738228871d1057c5f963d0b1c857bb8a4a38d8dd9ceeb56
+    is-accessor-descriptor: "npm:^0.1.6"
+    is-data-descriptor: "npm:^0.1.4"
+    kind-of: "npm:^5.0.0"
+  checksum: b946ba842187c2784a5a0d67bd0e0271b14678f4fdce7d2295dfda9201f3408f55f56e11e5e66bfa4d2b9d45655b6105ad872ad7d37fb63f582587464fd414d7
   languageName: node
   linkType: hard
 
 "is-descriptor@npm:^1.0.0, is-descriptor@npm:^1.0.2":
-  version: 1.0.3
-  resolution: "is-descriptor@npm:1.0.3"
+  version: 1.0.2
+  resolution: "is-descriptor@npm:1.0.2"
   dependencies:
-    is-accessor-descriptor: "npm:^1.0.1"
-    is-data-descriptor: "npm:^1.0.1"
-  checksum: b940d04d93adaffb749b3ca7f7f6d73dd3c5582b674f372513ecb5511a8a3f3ff4a24f4c1161cb10e48fe4886f9e84c09fa71785def27905ca8df1197e563dc6
+    is-accessor-descriptor: "npm:^1.0.0"
+    is-data-descriptor: "npm:^1.0.0"
+    kind-of: "npm:^6.0.2"
+  checksum: e68059b333db331d5ea68cb367ce12fc6810853ced0e2221e6747143bbdf223dee73ebe8f331bafe04e34fdbe3da584b6af3335e82eabfaa33d5026efa33ca34
   languageName: node
   linkType: hard
 
@@ -19817,15 +20428,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-finalizationregistry@npm:^1.0.2":
-  version: 1.0.2
-  resolution: "is-finalizationregistry@npm:1.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-  checksum: 1b8e9e1bf2075e862315ef9d38ce6d39c43ca9d81d46f73b34473506992f4b0fbaadb47ec9b420a5e76afe3f564d9f1f0d9b552ef272cc2395e0f21d743c9c29
-  languageName: node
-  linkType: hard
-
 "is-finite@npm:^1.0.0":
   version: 1.1.0
   resolution: "is-finite@npm:1.1.0"
@@ -19877,15 +20479,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-generator-function@npm:^1.0.10":
-  version: 1.0.10
-  resolution: "is-generator-function@npm:1.0.10"
-  dependencies:
-    has-tostringtag: "npm:^1.0.0"
-  checksum: 499a3ce6361064c3bd27fbff5c8000212d48506ebe1977842bbd7b3e708832d0deb1f4cc69186ece3640770e8c4f1287b24d99588a0b8058b2dbdd344bc1f47f
-  languageName: node
-  linkType: hard
-
 "is-glob@npm:^3.0.0, is-glob@npm:^3.1.0":
   version: 3.1.0
   resolution: "is-glob@npm:3.1.0"
@@ -19935,7 +20528,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.1, is-map@npm:^2.0.2":
+"is-map@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-map@npm:2.0.2"
   checksum: 60ba910f835f2eacb1fdf5b5a6c60fe1c702d012a7673e6546992bcc0c873f62ada6e13d327f9e48f1720d49c152d6cdecae1fa47a261ef3d247c3ce6f0e1d39
@@ -20138,7 +20731,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-regex@npm:^1.0.5, is-regex@npm:^1.1.0, is-regex@npm:^1.1.2, is-regex@npm:^1.1.4":
+"is-regex@npm:^1.0.4, is-regex@npm:^1.0.5, is-regex@npm:^1.1.2, is-regex@npm:^1.1.4":
   version: 1.1.4
   resolution: "is-regex@npm:1.1.4"
   dependencies:
@@ -20171,7 +20764,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.1, is-set@npm:^2.0.2":
+"is-set@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-set@npm:2.0.2"
   checksum: d89e82acdc7760993474f529e043f9c4a1d63ed4774d21cc2e331d0e401e5c91c27743cd7c889137028f6a742234759a4bd602368fbdbf0b0321994aefd5603f
@@ -20304,13 +20897,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakmap@npm:^2.0.1":
-  version: 2.0.1
-  resolution: "is-weakmap@npm:2.0.1"
-  checksum: 289fa4e8ba1bdda40ca78481266f6925b7c46a85599e6a41a77010bf91e5a24dfb660db96863bbf655ecdbda0ab517204d6a4e0c151dbec9d022c556321f3776
-  languageName: node
-  linkType: hard
-
 "is-weakref@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-weakref@npm:1.0.2"
@@ -20320,16 +20906,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakset@npm:^2.0.1":
-  version: 2.0.2
-  resolution: "is-weakset@npm:2.0.2"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.1"
-  checksum: 8f2ddb9639716fd7936784e175ea1183c5c4c05274c34f34f6a53175313cb1c9c35a8b795623306995e2f7cc8f25aa46302f15a2113e51c5052d447be427195c
-  languageName: node
-  linkType: hard
-
 "is-whitespace-character@npm:^1.0.0":
   version: 1.0.4
   resolution: "is-whitespace-character@npm:1.0.4"
@@ -20545,9 +21121,9 @@ __metadata:
   linkType: hard
 
 "istanbul-lib-coverage@npm:^3.0.0, istanbul-lib-coverage@npm:^3.2.0":
-  version: 3.2.2
-  resolution: "istanbul-lib-coverage@npm:3.2.2"
-  checksum: 40bbdd1e937dfd8c830fa286d0f665e81b7a78bdabcd4565f6d5667c99828bda3db7fb7ac6b96a3e2e8a2461ddbc5452d9f8bc7d00cb00075fa6a3e99f5b6a81
+  version: 3.2.0
+  resolution: "istanbul-lib-coverage@npm:3.2.0"
+  checksum: 31621b84ad29339242b63d454243f558a7958ee0b5177749bacf1f74be7d95d3fd93853738ef7eebcddfaf3eab014716e51392a8dbd5aa1bdc1b15c2ebc53c24
   languageName: node
   linkType: hard
 
@@ -20697,19 +21273,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"iterator.prototype@npm:^1.1.2":
-  version: 1.1.2
-  resolution: "iterator.prototype@npm:1.1.2"
-  dependencies:
-    define-properties: "npm:^1.2.1"
-    get-intrinsic: "npm:^1.2.1"
-    has-symbols: "npm:^1.0.3"
-    reflect.getprototypeof: "npm:^1.0.4"
-    set-function-name: "npm:^2.0.1"
-  checksum: b5013967ad8f28c9ca1be8e159eb10f591b8e46deae87476fe39d668c04374fe9158c815e8b6d2f45885b0a3fd842a8ba13f497ec762b3a0eff49bec278670b1
-  languageName: node
-  linkType: hard
-
 "jackspeak@npm:^2.3.5":
   version: 2.3.6
   resolution: "jackspeak@npm:2.3.6"
@@ -20940,7 +21503,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-diff@npm:^26.0.0, jest-diff@npm:^26.6.2":
+"jest-diff@npm:^26.6.2":
   version: 26.6.2
   resolution: "jest-diff@npm:26.6.2"
   dependencies:
@@ -20952,15 +21515,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-diff@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-diff@npm:29.7.0"
+"jest-diff@npm:^29.6.2":
+  version: 29.6.2
+  resolution: "jest-diff@npm:29.6.2"
   dependencies:
     chalk: "npm:^4.0.0"
-    diff-sequences: "npm:^29.6.3"
-    jest-get-type: "npm:^29.6.3"
-    pretty-format: "npm:^29.7.0"
-  checksum: 6f3a7eb9cd9de5ea9e5aa94aed535631fa6f80221832952839b3cb59dd419b91c20b73887deb0b62230d06d02d6b6cf34ebb810b88d904bb4fe1e2e4f0905c98
+    diff-sequences: "npm:^29.4.3"
+    jest-get-type: "npm:^29.4.3"
+    pretty-format: "npm:^29.6.2"
+  checksum: 8c66d29afbb64b4cb1c0daa7c20a7838b32ec16e989f7767f7088b466bfa64d7a501b3f8592c6ab148dde19645740cb868a18b29b992eb72517842287c03144e
   languageName: node
   linkType: hard
 
@@ -21123,10 +21686,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-get-type@npm:^29.6.3":
-  version: 29.6.3
-  resolution: "jest-get-type@npm:29.6.3"
-  checksum: 88ac9102d4679d768accae29f1e75f592b760b44277df288ad76ce5bf038c3f5ce3719dea8aa0f035dac30e9eb034b848ce716b9183ad7cc222d029f03e92205
+"jest-get-type@npm:^29.4.3":
+  version: 29.4.3
+  resolution: "jest-get-type@npm:29.4.3"
+  checksum: 6ac7f2dde1c65e292e4355b6c63b3a4897d7e92cb4c8afcf6d397f2682f8080e094c8b0b68205a74d269882ec06bf696a9de6cd3e1b7333531e5ed7b112605ce
   languageName: node
   linkType: hard
 
@@ -21309,15 +21872,15 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-matcher-utils@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-matcher-utils@npm:29.7.0"
+"jest-matcher-utils@npm:^29.6.2":
+  version: 29.6.2
+  resolution: "jest-matcher-utils@npm:29.6.2"
   dependencies:
     chalk: "npm:^4.0.0"
-    jest-diff: "npm:^29.7.0"
-    jest-get-type: "npm:^29.6.3"
-    pretty-format: "npm:^29.7.0"
-  checksum: 981904a494299cf1e3baed352f8a3bd8b50a8c13a662c509b6a53c31461f94ea3bfeffa9d5efcfeb248e384e318c87de7e3baa6af0f79674e987482aa189af40
+    jest-diff: "npm:^29.6.2"
+    jest-get-type: "npm:^29.4.3"
+    pretty-format: "npm:^29.6.2"
+  checksum: 38dc3f71620745054246fb31e1979587fb241d3a2ecea1f325dbcba6503653d7e2482c6deffa99d661b9da2f093c7713d6977fd2a6b8f57537875745049088ed
   languageName: node
   linkType: hard
 
@@ -21387,20 +21950,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-message-util@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-message-util@npm:29.7.0"
+"jest-message-util@npm:^29.6.2":
+  version: 29.6.2
+  resolution: "jest-message-util@npm:29.6.2"
   dependencies:
     "@babel/code-frame": "npm:^7.12.13"
-    "@jest/types": "npm:^29.6.3"
+    "@jest/types": "npm:^29.6.1"
     "@types/stack-utils": "npm:^2.0.0"
     chalk: "npm:^4.0.0"
     graceful-fs: "npm:^4.2.9"
     micromatch: "npm:^4.0.4"
-    pretty-format: "npm:^29.7.0"
+    pretty-format: "npm:^29.6.2"
     slash: "npm:^3.0.0"
     stack-utils: "npm:^2.0.3"
-  checksum: 31d53c6ed22095d86bab9d14c0fa70c4a92c749ea6ceece82cf30c22c9c0e26407acdfbdb0231435dc85a98d6d65ca0d9cbcd25cd1abb377fe945e843fb770b9
+  checksum: a0e972367f12894dd0bcda2c2cd540607a6884315a411757b2e136eb54a53b54675f2e632b58a121e253bb456cfa564a9e10d5b7238b46de190095de78e445ba
   languageName: node
   linkType: hard
 
@@ -21708,7 +22271,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-snapshot@npm:^26.3.0, jest-snapshot@npm:^26.6.2":
+"jest-snapshot@npm:^26.6.2":
   version: 26.6.2
   resolution: "jest-snapshot@npm:26.6.2"
   dependencies:
@@ -21732,17 +22295,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-specific-snapshot@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "jest-specific-snapshot@npm:4.0.0"
-  dependencies:
-    jest-snapshot: "npm:^26.3.0"
-  peerDependencies:
-    jest: ">= 26.0.0"
-  checksum: ae0135a5a1e3ae0da283f4c1f898ea42bb32f3f5b218a7daaeaba0a653907d6d9181c3fee3110ee7ae0681cc1523f96663cf75c2dbed53d5fb26855f00fd3ef9
-  languageName: node
-  linkType: hard
-
 "jest-util@npm:^24.9.0":
   version: 24.9.0
   resolution: "jest-util@npm:24.9.0"
@@ -21804,17 +22356,17 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-util@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "jest-util@npm:29.7.0"
+"jest-util@npm:^29.6.2":
+  version: 29.6.2
+  resolution: "jest-util@npm:29.6.2"
   dependencies:
-    "@jest/types": "npm:^29.6.3"
+    "@jest/types": "npm:^29.6.1"
     "@types/node": "npm:*"
     chalk: "npm:^4.0.0"
     ci-info: "npm:^3.2.0"
     graceful-fs: "npm:^4.2.9"
     picomatch: "npm:^2.2.3"
-  checksum: 30d58af6967e7d42bd903ccc098f3b4d3859ed46238fbc88d4add6a3f10bea00c226b93660285f058bc7a65f6f9529cf4eb80f8d4707f79f9e3a23686b4ab8f3
+  checksum: 95d510b7bbac6976c71bf9c8f2e861cdc6c47dca0a70c470ebce6fa2afef3fecd73772efdffc04e7aad89602ab388c2f1ee1cb27c505210d767f0731da65c13b
   languageName: node
   linkType: hard
 
@@ -21930,22 +22482,15 @@ __metadata:
   linkType: hard
 
 "joi@npm:^17.6.0":
-  version: 17.11.0
-  resolution: "joi@npm:17.11.0"
+  version: 17.9.2
+  resolution: "joi@npm:17.9.2"
   dependencies:
     "@hapi/hoek": "npm:^9.0.0"
     "@hapi/topo": "npm:^5.0.0"
     "@sideway/address": "npm:^4.1.3"
     "@sideway/formula": "npm:^3.0.1"
     "@sideway/pinpoint": "npm:^2.0.0"
-  checksum: 392e897693aa49a401a869180d6b57bdb7ccf616be07c3a2c2c81a2df7a744962249dbaa4a718c07e0fe23b17a04795cbfbd75b79be5829627402eed074db6c9
-  languageName: node
-  linkType: hard
-
-"js-base64@npm:^2.4.9":
-  version: 2.6.4
-  resolution: "js-base64@npm:2.6.4"
-  checksum: c1a740a34fbb0ad0a528c2ab8749d7f873b1856a0638826306fcd98502e3c8c833334dff233085407e3201be543e5e71bf9692da7891ca680d9b03d027247a6a
+  checksum: c6c679643195c7c7eaada2ac51bef84032d4de8f9ebf3ead66079d07eccae6639b658f336358d5b9c70537cc7f3669ae8ac2a290ba832f944e4f85264c38d9e6
   languageName: node
   linkType: hard
 
@@ -22016,18 +22561,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"js-yaml@npm:~3.7.0":
-  version: 3.7.0
-  resolution: "js-yaml@npm:3.7.0"
-  dependencies:
-    argparse: "npm:^1.0.7"
-    esprima: "npm:^2.6.0"
-  bin:
-    js-yaml: bin/js-yaml.js
-  checksum: 1e547d9a4c806a988be5512f23d03d8560108fbcef41b94dd462083faf3cc64d2acb30c6fc847c91f22c5c8e295a1a0d1786970e4e824b639890cf7e701beb48
-  languageName: node
-  linkType: hard
-
 "js2xmlparser@npm:^4.0.2":
   version: 4.0.2
   resolution: "js2xmlparser@npm:4.0.2"
@@ -22228,13 +22761,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"json-buffer@npm:3.0.1":
-  version: 3.0.1
-  resolution: "json-buffer@npm:3.0.1"
-  checksum: 82876154521b7b68ba71c4f969b91572d1beabadd87bd3a6b236f85fbc7dc4695089191ed60bb59f9340993c51b33d479f45b6ba9f3548beb519705281c32c3c
-  languageName: node
-  linkType: hard
-
 "json-fixer@npm:^1.6.8":
   version: 1.6.15
   resolution: "json-fixer@npm:1.6.15"
@@ -22343,18 +22869,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsonfile@npm:^3.0.0":
-  version: 3.0.1
-  resolution: "jsonfile@npm:3.0.1"
-  dependencies:
-    graceful-fs: "npm:^4.1.6"
-  dependenciesMeta:
-    graceful-fs:
-      optional: true
-  checksum: c75a97c2d1a6f78b86c6a57caa47a1efe4f466b09e84ed2664417a397c0482d89828ce60a40053346a11efae16e17e60283f45b0dcb62ebe021150e1f2ea5e1a
-  languageName: node
-  linkType: hard
-
 "jsonfile@npm:^4.0.0":
   version: 4.0.0
   resolution: "jsonfile@npm:4.0.0"
@@ -22418,7 +22932,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.5":
+"jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.3":
   version: 3.3.5
   resolution: "jsx-ast-utils@npm:3.3.5"
   dependencies:
@@ -22459,8 +22973,8 @@ __metadata:
   linkType: hard
 
 "karma-accessibility-checker@npm:^3.1.28":
-  version: 3.1.64
-  resolution: "karma-accessibility-checker@npm:3.1.64"
+  version: 3.1.59
+  resolution: "karma-accessibility-checker@npm:3.1.59"
   dependencies:
     deep-diff: "npm:1.0.2"
     fs: "npm:0.0.2"
@@ -22473,9 +22987,10 @@ __metadata:
     shelljs: "npm:0.8.4"
     slack: "npm:11.0.2"
     slack-node: "npm:0.1.8"
+    uuid: "npm:8.3.2"
   bin:
     achecker_policies: bin/achecker_policies.js
-  checksum: 160b94923c54e984ecf5adf8e00db2996ea9229c650fb150de2b4f4f0d25f6a3bafe2e80cadabea7a2e4c8f1c9c2949c002154065686994f487648852a84abdc
+  checksum: 572197b12e1f9f0a09cd64611e727df27b24abcb0fc05f26ca5eb65ba63413ae57a0ae736380ac2521293921e6526e0e714dcb73242a6d41117d4ad43bafdc57
   languageName: node
   linkType: hard
 
@@ -22643,15 +23158,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"keyv@npm:^4.5.3":
-  version: 4.5.4
-  resolution: "keyv@npm:4.5.4"
-  dependencies:
-    json-buffer: "npm:3.0.1"
-  checksum: 167eb6ef64cc84b6fa0780ee50c9de456b422a1e18802209234f7c2cf7eae648c7741f32e50d7e24ccb22b24c13154070b01563d642755b156c357431a191e75
-  languageName: node
-  linkType: hard
-
 "kind-of@npm:>=6.0.3":
   version: 6.0.3
   resolution: "kind-of@npm:6.0.3"
@@ -22698,19 +23204,19 @@ __metadata:
   languageName: node
   linkType: hard
 
-"language-subtag-registry@npm:^0.3.20":
+"language-subtag-registry@npm:~0.3.2":
   version: 0.3.22
   resolution: "language-subtag-registry@npm:0.3.22"
   checksum: 5591f4abd775d1ab5945355a5ba894327d2d94c900607bdb69aac1bc5bb921dbeeeb5f616df95e8c0ae875501d19c1cfa0e852ece822121e95048deb34f2b4d2
   languageName: node
   linkType: hard
 
-"language-tags@npm:^1.0.9":
-  version: 1.0.9
-  resolution: "language-tags@npm:1.0.9"
+"language-tags@npm:=1.0.5":
+  version: 1.0.5
+  resolution: "language-tags@npm:1.0.5"
   dependencies:
-    language-subtag-registry: "npm:^0.3.20"
-  checksum: d3a7c14b694e67f519153d6df6cb200681648d38d623c3bfa9d6a66a5ec5493628acb88e9df5aceef3cf1902ab263a205e7d59ee4cf1d6bb67e707b83538bd6d
+    language-subtag-registry: "npm:~0.3.2"
+  checksum: 2161292ddae73ff2f5a15fd2d753b21096b81324337dff4ad78d702c63210d5beb18892cd53a3455ee6e88065807c8e285e82c40503678951d2071d101a473b4
   languageName: node
   linkType: hard
 
@@ -22734,12 +23240,12 @@ __metadata:
   linkType: hard
 
 "launch-editor@npm:^2.6.0":
-  version: 2.6.1
-  resolution: "launch-editor@npm:2.6.1"
+  version: 2.6.0
+  resolution: "launch-editor@npm:2.6.0"
   dependencies:
     picocolors: "npm:^1.0.0"
-    shell-quote: "npm:^1.8.1"
-  checksum: e06d193075ac09f7f8109f10cabe464a211bf7ed4cbe75f83348d6f67bf4d9f162f06e7a1ab3e1cd7fc250b5342c3b57080618aff2e646dc34248fe499227601
+    shell-quote: "npm:^1.7.3"
+  checksum: 48e4230643e8fdb5c14c11314706d58d9f3fbafe2606be3d6e37da1918ad8bfe39dd87875c726a1b59b9f4da99d87ec3e36d4c528464f0b820f9e91e5cb1c02d
   languageName: node
   linkType: hard
 
@@ -22804,7 +23310,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lerna@npm:^6.4.1":
+"lerna@npm:^6.5.1":
   version: 6.6.2
   resolution: "lerna@npm:6.6.2"
   dependencies:
@@ -23069,9 +23575,9 @@ __metadata:
   linkType: hard
 
 "lines-and-columns@npm:~2.0.3":
-  version: 2.0.4
-  resolution: "lines-and-columns@npm:2.0.4"
-  checksum: 81ac2f943f5428a46bd4ea2561c74ba674a107d8e6cc70cd317d16892a36ff3ba0dc6e599aca8b6f8668d26c85288394c6edf7a40e985ca843acab3701b80d4c
+  version: 2.0.3
+  resolution: "lines-and-columns@npm:2.0.3"
+  checksum: b5bb0d6ee2f82ae834ceddc9251af2060c30db476673e9c817c34c00bed58e0c5d90a6866b64afe7bdcb2c5eb1b418a5b1ee631d2592dc8ff381540901fa4da6
   languageName: node
   linkType: hard
 
@@ -23144,19 +23650,34 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lit-element@npm:^2.5.1":
-  version: 2.5.1
-  resolution: "lit-element@npm:2.5.1"
+"lit-element@npm:^3.3.0":
+  version: 3.3.2
+  resolution: "lit-element@npm:3.3.2"
   dependencies:
-    lit-html: "npm:^1.1.1"
-  checksum: 68ee1f666e853d321f6285e5f43562bbc220b9b17b912f7901bfbae264f557a3e29c74a2dc3e0d4a6116721e5afaf179a589be4f80331b426271937c28da263e
+    "@lit-labs/ssr-dom-shim": "npm:^1.1.0"
+    "@lit/reactive-element": "npm:^1.3.0"
+    lit-html: "npm:^2.7.0"
+  checksum: 61a49b8ca0d9fc8d8e4a4553570dc5f81650ef3c7d7715de812c4805d461df55f36fa4e2f212b5347716224cd1e54d223105043cdd4a209c32ea3bfdfb5ba811
   languageName: node
   linkType: hard
 
-"lit-html@npm:^1.4.1":
-  version: 1.4.1
-  resolution: "lit-html@npm:1.4.1"
-  checksum: 4f997740be2cde7fa1945d695a683e8fdd94787e861a992852202573d9211d57e166817408d8e4f516845b9fe5ce4456d0cfd3985ff907fdce17fbacb46c0635
+"lit-html@npm:^2.7.0":
+  version: 2.7.5
+  resolution: "lit-html@npm:2.7.5"
+  dependencies:
+    "@types/trusted-types": "npm:^2.0.2"
+  checksum: 3e4b2d0822ee0c1227b3042e219b22c65ba4e1f232005dd741f52cfdbe84acdfacaeae7b54b9a3dd6fd65c71dab957c842235572c48b45f76d694de6979ee311
+  languageName: node
+  linkType: hard
+
+"lit@npm:^2.7.6":
+  version: 2.7.6
+  resolution: "lit@npm:2.7.6"
+  dependencies:
+    "@lit/reactive-element": "npm:^1.6.0"
+    lit-element: "npm:^3.3.0"
+    lit-html: "npm:^2.7.0"
+  checksum: 1bae959a3283f31a6448c5efeb1ebd3b4b82ef91c90e1e77bbfe67bf3dbb1cc56c7ef4d052661a4c2b493187fa2ce4b868943bed69a61e4d022fdd1e31ca05b8
   languageName: node
   linkType: hard
 
@@ -23444,7 +23965,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lodash@npm:^4.11.2, lodash@npm:^4.15.0, lodash@npm:^4.17.11, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0":
+"lodash@npm:^4.11.2, lodash@npm:^4.15.0, lodash@npm:^4.17.14, lodash@npm:^4.17.15, lodash@npm:^4.17.19, lodash@npm:^4.17.20, lodash@npm:^4.17.21, lodash@npm:^4.17.4, lodash@npm:^4.7.0":
   version: 4.17.21
   resolution: "lodash@npm:4.17.21"
   checksum: c08619c038846ea6ac754abd6dd29d2568aa705feb69339e836dfa8d8b09abbb2f859371e86863eda41848221f9af43714491467b5b0299122431e202bb0c532
@@ -23586,7 +24107,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lru-cache@npm:^10.0.1, lru-cache@npm:^9.1.1 || ^10.0.0":
+"lru-cache@npm:^10.0.1":
   version: 10.0.2
   resolution: "lru-cache@npm:10.0.2"
   dependencies:
@@ -23630,6 +24151,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"lru-cache@npm:^9.1.1 || ^10.0.0":
+  version: 10.0.1
+  resolution: "lru-cache@npm:10.0.1"
+  checksum: 5bb91a97a342a41fd049c3494b44d9e21a7d4843f9284d0a0b26f00bb0e436f1f627d0641c78f88be16b86b4231546c5ee4f284733fb530c7960f0bcd7579026
+  languageName: node
+  linkType: hard
+
 "lru-queue@npm:^0.1.0":
   version: 0.1.0
   resolution: "lru-queue@npm:0.1.0"
@@ -23656,11 +24184,11 @@ __metadata:
   linkType: hard
 
 "magic-string@npm:^0.30.0":
-  version: 0.30.5
-  resolution: "magic-string@npm:0.30.5"
+  version: 0.30.2
+  resolution: "magic-string@npm:0.30.2"
   dependencies:
     "@jridgewell/sourcemap-codec": "npm:^1.4.15"
-  checksum: c8a6b25f813215ca9db526f3a407d6dc0bf35429c2b8111d6f1c2cf6cf6afd5e2d9f9cd189416a0e3959e20ecd635f73639f9825c73de1074b29331fe36ace59
+  checksum: ec7667e92cfc2639e970b32d3f5ca4a07e6a2cfccc96a173bef12e02068fbc59d216279fb9ff795211a412e76df4e40171ee8a3a232883273ec17d3a87f7e115
   languageName: node
   linkType: hard
 
@@ -23708,7 +24236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-fetch-happen@npm:^10.0.3, make-fetch-happen@npm:^10.0.4, make-fetch-happen@npm:^10.0.6":
+"make-fetch-happen@npm:^10.0.6":
   version: 10.2.1
   resolution: "make-fetch-happen@npm:10.2.1"
   dependencies:
@@ -23732,7 +24260,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-fetch-happen@npm:^11.0.0, make-fetch-happen@npm:^11.0.1, make-fetch-happen@npm:^11.1.1":
+"make-fetch-happen@npm:^11.0.0, make-fetch-happen@npm:^11.0.1, make-fetch-happen@npm:^11.0.3, make-fetch-happen@npm:^11.1.1":
   version: 11.1.1
   resolution: "make-fetch-happen@npm:11.1.1"
   dependencies:
@@ -23774,30 +24302,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"make-fetch-happen@npm:^9.1.0":
-  version: 9.1.0
-  resolution: "make-fetch-happen@npm:9.1.0"
-  dependencies:
-    agentkeepalive: "npm:^4.1.3"
-    cacache: "npm:^15.2.0"
-    http-cache-semantics: "npm:^4.1.0"
-    http-proxy-agent: "npm:^4.0.1"
-    https-proxy-agent: "npm:^5.0.0"
-    is-lambda: "npm:^1.0.1"
-    lru-cache: "npm:^6.0.0"
-    minipass: "npm:^3.1.3"
-    minipass-collect: "npm:^1.0.2"
-    minipass-fetch: "npm:^1.3.2"
-    minipass-flush: "npm:^1.0.5"
-    minipass-pipeline: "npm:^1.2.4"
-    negotiator: "npm:^0.6.2"
-    promise-retry: "npm:^2.0.1"
-    socks-proxy-agent: "npm:^6.0.0"
-    ssri: "npm:^8.0.0"
-  checksum: a868e74fc223a78afb7a1f8115133befdffae84f07a5f5dd9317cbf9f784a8373f28829a73ae3f31060e1b0cb4944e73257733c3b10c314354060fab412b6028
-  languageName: node
-  linkType: hard
-
 "make-iterator@npm:^1.0.0":
   version: 1.0.1
   resolution: "make-iterator@npm:1.0.1"
@@ -23816,15 +24320,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"map-age-cleaner@npm:^0.1.3":
-  version: 0.1.3
-  resolution: "map-age-cleaner@npm:0.1.3"
-  dependencies:
-    p-defer: "npm:^1.0.0"
-  checksum: cb2804a5bcb3cbdfe4b59066ea6d19f5e7c8c196cd55795ea4c28f792b192e4c442426ae52524e5e1acbccf393d3bddacefc3d41f803e66453f6c4eda3650bc1
-  languageName: node
-  linkType: hard
-
 "map-cache@npm:^0.2.0, map-cache@npm:^0.2.2":
   version: 0.2.2
   resolution: "map-cache@npm:0.2.2"
@@ -24153,17 +24648,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mem@npm:^8.1.1":
-  version: 8.1.1
-  resolution: "mem@npm:8.1.1"
-  dependencies:
-    map-age-cleaner: "npm:^0.1.3"
-    mimic-fn: "npm:^3.1.0"
-  checksum: 5f22117d8a24775f0a61d333bd7fdbe19f7a9f8dc8ccee66f57ba98aeb4ed67e83cc130c482b78fd6a39887547749d8fe376fc44ca7efa81579ad9d0c0fa5acd
-  languageName: node
-  linkType: hard
-
-"memfs@npm:^3.1.2, memfs@npm:^3.2.2, memfs@npm:^3.4.3":
+"memfs@npm:^3.1.2, memfs@npm:^3.4.3":
   version: 3.5.3
   resolution: "memfs@npm:3.5.3"
   dependencies:
@@ -24462,7 +24947,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mime-types@npm:^2.1.11, mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.30, mime-types@npm:^2.1.31, mime-types@npm:^2.1.34, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34, mime-types@npm:~2.1.7":
+"mime-types@npm:^2.1.11, mime-types@npm:^2.1.12, mime-types@npm:^2.1.27, mime-types@npm:^2.1.31, mime-types@npm:^2.1.34, mime-types@npm:~2.1.17, mime-types@npm:~2.1.19, mime-types@npm:~2.1.24, mime-types@npm:~2.1.34, mime-types@npm:~2.1.7":
   version: 2.1.35
   resolution: "mime-types@npm:2.1.35"
   dependencies:
@@ -24496,13 +24981,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"mimic-fn@npm:^3.1.0":
-  version: 3.1.0
-  resolution: "mimic-fn@npm:3.1.0"
-  checksum: f7b167f9115b8bbdf2c3ee55dce9149d14be9e54b237259c4bc1d8d0512ea60f25a1b323f814eb1fe8f5a541662804bcfcfff3202ca58df143edb986849d58db
-  languageName: node
-  linkType: hard
-
 "mimic-fn@npm:^4.0.0":
   version: 4.0.0
   resolution: "mimic-fn@npm:4.0.0"
@@ -24621,15 +25099,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minimatch@npm:~3.0.2":
-  version: 3.0.8
-  resolution: "minimatch@npm:3.0.8"
-  dependencies:
-    brace-expansion: "npm:^1.1.7"
-  checksum: 6df5373cb1ea79020beb6887ff5576c58cfabcfd32c5a65c2cf58f326e4ee8eae84f129e5fa50b8a4347fa1d1e583f931285c9fb3040d984bdfb5109ef6607ec
-  languageName: node
-  linkType: hard
-
 "minimist-options@npm:4.1.0":
   version: 4.1.0
   resolution: "minimist-options@npm:4.1.0"
@@ -24657,21 +25126,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass-fetch@npm:^1.3.2":
-  version: 1.4.1
-  resolution: "minipass-fetch@npm:1.4.1"
-  dependencies:
-    encoding: "npm:^0.1.12"
-    minipass: "npm:^3.1.0"
-    minipass-sized: "npm:^1.0.3"
-    minizlib: "npm:^2.0.0"
-  dependenciesMeta:
-    encoding:
-      optional: true
-  checksum: 4c6f678d2c976c275ba35735aa18e341401d1fb94bbf38a36bb2c2d01835ac699f15b7ab1adaf4ee40a751361527d312a18853feaf9c0121f4904f811656575a
-  languageName: node
-  linkType: hard
-
 "minipass-fetch@npm:^2.0.3":
   version: 2.1.2
   resolution: "minipass-fetch@npm:2.1.2"
@@ -24688,17 +25142,17 @@ __metadata:
   linkType: hard
 
 "minipass-fetch@npm:^3.0.0":
-  version: 3.0.4
-  resolution: "minipass-fetch@npm:3.0.4"
+  version: 3.0.3
+  resolution: "minipass-fetch@npm:3.0.3"
   dependencies:
     encoding: "npm:^0.1.13"
-    minipass: "npm:^7.0.3"
+    minipass: "npm:^5.0.0"
     minipass-sized: "npm:^1.0.3"
     minizlib: "npm:^2.1.2"
   dependenciesMeta:
     encoding:
       optional: true
-  checksum: 3edf72b900e30598567eafe96c30374432a8709e61bb06b87198fa3192d466777e2ec21c52985a0999044fa6567bd6f04651585983a1cbb27e2c1770a07ed2a2
+  checksum: 045339fa8fa2f2a544da203c38e91e6329a6c8d0d563db42db2e32bd863b0d7127692f456dcdd171bcd3123af12ce04072d3fc276571c85085a9870db7dea69a
   languageName: node
   linkType: hard
 
@@ -24739,7 +25193,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minipass@npm:^3.0.0, minipass@npm:^3.1.0, minipass@npm:^3.1.1, minipass@npm:^3.1.3, minipass@npm:^3.1.6":
+"minipass@npm:^3.0.0, minipass@npm:^3.1.1, minipass@npm:^3.1.6":
   version: 3.3.6
   resolution: "minipass@npm:3.3.6"
   dependencies:
@@ -24769,7 +25223,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"minizlib@npm:^2.0.0, minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
+"minizlib@npm:^2.1.1, minizlib@npm:^2.1.2":
   version: 2.1.2
   resolution: "minizlib@npm:2.1.2"
   dependencies:
@@ -24989,7 +25443,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nan@npm:^2.12.1, nan@npm:^2.17.0":
+"nan@npm:^2.12.1":
   version: 2.18.0
   resolution: "nan@npm:2.18.0"
   dependencies:
@@ -25008,11 +25462,11 @@ __metadata:
   linkType: hard
 
 "nanoid@npm:^3.3.1, nanoid@npm:^3.3.6":
-  version: 3.3.7
-  resolution: "nanoid@npm:3.3.7"
+  version: 3.3.6
+  resolution: "nanoid@npm:3.3.6"
   bin:
     nanoid: bin/nanoid.cjs
-  checksum: ac1eb60f615b272bccb0e2b9cd933720dad30bf9708424f691b8113826bb91aca7e9d14ef5d9415a6ba15c266b37817256f58d8ce980c82b0ba3185352565679
+  checksum: 67235c39d1bc05851383dadde5cf77ae1c90c2a1d189e845c7f20f646f0488d875ad5f5226bbba072a88cebbb085a3f784a6673117daf785bdf614a852550362
   languageName: node
   linkType: hard
 
@@ -25066,7 +25520,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"negotiator@npm:0.6.3, negotiator@npm:^0.6.2, negotiator@npm:^0.6.3":
+"negotiator@npm:0.6.3, negotiator@npm:^0.6.3":
   version: 0.6.3
   resolution: "negotiator@npm:0.6.3"
   checksum: 2723fb822a17ad55c93a588a4bc44d53b22855bf4be5499916ca0cab1e7165409d0b288ba2577d7b029f10ce18cf2ed8e703e5af31c984e1e2304277ef979837
@@ -25153,8 +25607,8 @@ __metadata:
   linkType: hard
 
 "node-fetch@npm:^2.6.0, node-fetch@npm:^2.6.1, node-fetch@npm:^2.6.12, node-fetch@npm:^2.6.7":
-  version: 2.7.0
-  resolution: "node-fetch@npm:2.7.0"
+  version: 2.6.12
+  resolution: "node-fetch@npm:2.6.12"
   dependencies:
     whatwg-url: "npm:^5.0.0"
   peerDependencies:
@@ -25162,7 +25616,7 @@ __metadata:
   peerDependenciesMeta:
     encoding:
       optional: true
-  checksum: b24f8a3dc937f388192e59bcf9d0857d7b6940a2496f328381641cb616efccc9866e89ec43f2ec956bbd6c3d3ee05524ce77fe7b29ccd34692b3a16f237d6676
+  checksum: 370ed4d906edad9709a81b54a0141d37d2973a27dc80c723d8ac14afcec6dc67bc6c70986a96992b64ec75d08159cc4b65ce6aa9063941168ea5ac73b24df9f8
   languageName: node
   linkType: hard
 
@@ -25174,45 +25628,25 @@ __metadata:
   linkType: hard
 
 "node-gyp-build@npm:^4.3.0":
-  version: 4.6.1
-  resolution: "node-gyp-build@npm:4.6.1"
+  version: 4.6.0
+  resolution: "node-gyp-build@npm:4.6.0"
   bin:
     node-gyp-build: bin.js
     node-gyp-build-optional: optional.js
     node-gyp-build-test: build-test.js
-  checksum: 79b948377492ae8e1aa1c18071661e6020c11f8847d5ce822abd67ec02bee5b21715b1b4861041d2b40d16633824476735bc9a60e81c82c49e715d55ee29b206
-  languageName: node
-  linkType: hard
-
-"node-gyp@npm:^8.4.1":
-  version: 8.4.1
-  resolution: "node-gyp@npm:8.4.1"
-  dependencies:
-    env-paths: "npm:^2.2.0"
-    glob: "npm:^7.1.4"
-    graceful-fs: "npm:^4.2.6"
-    make-fetch-happen: "npm:^9.1.0"
-    nopt: "npm:^5.0.0"
-    npmlog: "npm:^6.0.0"
-    rimraf: "npm:^3.0.2"
-    semver: "npm:^7.3.5"
-    tar: "npm:^6.1.2"
-    which: "npm:^2.0.2"
-  bin:
-    node-gyp: bin/node-gyp.js
-  checksum: 5ac19a7f6212c787f33bb72f889fafb1ce9d80b7ecb87b3785aebb0ff94a70cd5dbb3ecb435a308eaeb26d037c6edaf173951a9edacaadf0f4c3ae189f1e5077
+  checksum: c8b57abe5e6e4a28dce450e3c0136bcce88d15602c33f1258ed9c9a52f156d34a00dd8864271b2f2acfd6ef4de0af3e75e5e76e771c4bc4f38dd0ee06ad178d8
   languageName: node
   linkType: hard
 
 "node-gyp@npm:^9.0.0":
-  version: 9.4.1
-  resolution: "node-gyp@npm:9.4.1"
+  version: 9.4.0
+  resolution: "node-gyp@npm:9.4.0"
   dependencies:
     env-paths: "npm:^2.2.0"
     exponential-backoff: "npm:^3.1.1"
     glob: "npm:^7.1.4"
     graceful-fs: "npm:^4.2.6"
-    make-fetch-happen: "npm:^10.0.3"
+    make-fetch-happen: "npm:^11.0.3"
     nopt: "npm:^6.0.0"
     npmlog: "npm:^6.0.0"
     rimraf: "npm:^3.0.2"
@@ -25221,7 +25655,7 @@ __metadata:
     which: "npm:^2.0.2"
   bin:
     node-gyp: bin/node-gyp.js
-  checksum: 329b109b138e48cb0416a6bca56e171b0e479d6360a548b80f06eced4bef3cf37652a3d20d171c20023fb18d996bd7446a49d4297ddb59fc48100178a92f432d
+  checksum: 458317127c63877365f227b18ef2362b013b7f8440b35ae722935e61b31e6b84ec0e3625ab07f90679e2f41a1d5a7df6c4049fdf8e7b3c81fcf22775147b47ac
   languageName: node
   linkType: hard
 
@@ -25315,30 +25749,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"node-sass@npm:^8.0.0":
-  version: 8.0.0
-  resolution: "node-sass@npm:8.0.0"
-  dependencies:
-    async-foreach: "npm:^0.1.3"
-    chalk: "npm:^4.1.2"
-    cross-spawn: "npm:^7.0.3"
-    gaze: "npm:^1.0.0"
-    get-stdin: "npm:^4.0.1"
-    glob: "npm:^7.0.3"
-    lodash: "npm:^4.17.15"
-    make-fetch-happen: "npm:^10.0.4"
-    meow: "npm:^9.0.0"
-    nan: "npm:^2.17.0"
-    node-gyp: "npm:^8.4.1"
-    sass-graph: "npm:^4.0.1"
-    stdout-stream: "npm:^1.4.0"
-    true-case-path: "npm:^2.2.1"
-  bin:
-    node-sass: bin/node-sass
-  checksum: 9dc04024e7e1dbca8261d07e5ba284616b1a4e2d9b799a294dcff9ad97ce9f87f22606c4dec5e05948126081333a243cbca4575216b459515e436da830a82ca0
-  languageName: node
-  linkType: hard
-
 "node-uuid@npm:~1.4.7":
   version: 1.4.8
   resolution: "node-uuid@npm:1.4.8"
@@ -25355,17 +25765,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"nopt@npm:^5.0.0":
-  version: 5.0.0
-  resolution: "nopt@npm:5.0.0"
-  dependencies:
-    abbrev: "npm:1"
-  bin:
-    nopt: bin/nopt.js
-  checksum: 00f9bb2d16449469ba8ffcf9b8f0eae6bae285ec74b135fec533e5883563d2400c0cd70902d0a7759e47ac031ccf206ace4e86556da08ed3f1c66dda206e9ccd
-  languageName: node
-  linkType: hard
-
 "nopt@npm:^6.0.0":
   version: 6.0.0
   resolution: "nopt@npm:6.0.0"
@@ -25508,11 +25907,11 @@ __metadata:
   linkType: hard
 
 "npm-install-checks@npm:^6.0.0":
-  version: 6.3.0
-  resolution: "npm-install-checks@npm:6.3.0"
+  version: 6.1.1
+  resolution: "npm-install-checks@npm:6.1.1"
   dependencies:
     semver: "npm:^7.1.1"
-  checksum: 6c20dadb878a0d2f1f777405217b6b63af1299d0b43e556af9363ee6eefaa98a17dfb7b612a473a473e96faf7e789c58b221e0d8ffdc1d34903c4f71618df3b4
+  checksum: 8fb3ed05cfd3fdeb20d2fd22d45a89cd509afac3b05d188af7d9bcdf07ed745d1346943692782a4dca4c42b2c1fec34eb42fdf20e2ef8bb5b249fbb5a811ce3b
   languageName: node
   linkType: hard
 
@@ -25868,13 +26267,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-assign@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "object-assign@npm:3.0.0"
-  checksum: 56c66a77318aea95b11bd16a65c313e98786cea1db673a7fdd3bc92aced671b35f62a9819ad9cf7846921c773818329636cda5cd1b7c4fa0ce9908440e091dac
-  languageName: node
-  linkType: hard
-
 "object-copy@npm:^0.1.0":
   version: 0.1.0
   resolution: "object-copy@npm:0.1.0"
@@ -25886,6 +26278,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"object-inspect@npm:^1.12.3":
+  version: 1.12.3
+  resolution: "object-inspect@npm:1.12.3"
+  checksum: 532b0036f0472f561180fac0d04fe328ee01f57637624c83fb054f81b5bfe966cdf4200612a499ed391a7ca3c46b20a0bc3a55fc8241d944abe687c556a32b39
+  languageName: node
+  linkType: hard
+
 "object-inspect@npm:^1.13.1, object-inspect@npm:^1.7.0, object-inspect@npm:^1.9.0":
   version: 1.13.1
   resolution: "object-inspect@npm:1.13.1"
@@ -25893,7 +26292,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object-is@npm:^1.0.2, object-is@npm:^1.1.2, object-is@npm:^1.1.5":
+"object-is@npm:^1.0.1, object-is@npm:^1.0.2, object-is@npm:^1.1.5":
   version: 1.1.5
   resolution: "object-is@npm:1.1.5"
   dependencies:
@@ -25961,25 +26360,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.entries@npm:^1.1.0, object.entries@npm:^1.1.1, object.entries@npm:^1.1.2, object.entries@npm:^1.1.5, object.entries@npm:^1.1.6, object.entries@npm:^1.1.7":
-  version: 1.1.7
-  resolution: "object.entries@npm:1.1.7"
+"object.entries@npm:^1.1.0, object.entries@npm:^1.1.1, object.entries@npm:^1.1.5, object.entries@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "object.entries@npm:1.1.6"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-  checksum: 03f0bd0f23a8626c94429d15abf26ccda7723f08cd26be2c09c72d436765f8c7468605b5476ca58d4a7cec1ec7eca5be496dbd938fd4236b77ed6d05a8680048
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: 08a09ff839fd541e8af90a47c67a3dd71721683cdc28e55470e191a8afd8b61188fb9a429fd1d1805808097d8d5950b47c0c2862157dad891226112d8321401b
   languageName: node
   linkType: hard
 
-"object.fromentries@npm:^2.0.0 || ^1.0.0, object.fromentries@npm:^2.0.5, object.fromentries@npm:^2.0.6, object.fromentries@npm:^2.0.7":
-  version: 2.0.7
-  resolution: "object.fromentries@npm:2.0.7"
+"object.fromentries@npm:^2.0.0 || ^1.0.0, object.fromentries@npm:^2.0.6":
+  version: 2.0.6
+  resolution: "object.fromentries@npm:2.0.6"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-  checksum: 1bfbe42a51f8d84e417d193fae78e4b8eebb134514cdd44406480f8e8a0e075071e0717635d8e3eccd50fec08c1d555fe505c38804cbac0808397187653edd59
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: e8b813647cbc6505750cdff8b3978bb341492707a5f1df4129e2d8a904b31692e225eff92481ae5916be3bde3c2eff1d0e8a6730921ca7f4eed60bc15a70cb35
   languageName: node
   linkType: hard
 
@@ -25996,25 +26395,25 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.groupby@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "object.groupby@npm:1.0.1"
+"object.groupby@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "object.groupby@npm:1.0.0"
   dependencies:
     call-bind: "npm:^1.0.2"
     define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
+    es-abstract: "npm:^1.21.2"
     get-intrinsic: "npm:^1.2.1"
-  checksum: b7123d91403f95d63978513b23a6079c30f503311f64035fafc863c291c787f287b58df3b21ef002ce1d0b820958c9009dd5a8ab696e0eca325639d345e41524
+  checksum: 8233fa5288744dd6ea22050d96bb3f59c5acf85ab32ed758821ff82f276dda76b1bb1b9220a52432673476dff361a06ddcfff6d7d859135ff3c1c89b8c844b3e
   languageName: node
   linkType: hard
 
 "object.hasown@npm:^1.1.2":
-  version: 1.1.3
-  resolution: "object.hasown@npm:1.1.3"
+  version: 1.1.2
+  resolution: "object.hasown@npm:1.1.2"
   dependencies:
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-  checksum: 735679729c25a4e0d3713adf5df9861d862f0453e87ada4d991b75cd4225365dec61a08435e1127f42c9cc1adfc8e952fa5dca75364ebda6539dadf4721dc9c4
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: 94031022a2ba6006c15c6f1e0c4f51a7fa5b36aee64800192335b979fcc8bd823b18c35cb1a728af68fdfdbbe6d765f77a3c5437306c031f63654b8a34b9e639
   languageName: node
   linkType: hard
 
@@ -26047,14 +26446,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"object.values@npm:^1.1.0, object.values@npm:^1.1.1, object.values@npm:^1.1.5, object.values@npm:^1.1.6, object.values@npm:^1.1.7":
-  version: 1.1.7
-  resolution: "object.values@npm:1.1.7"
+"object.values@npm:^1.1.0, object.values@npm:^1.1.1, object.values@npm:^1.1.6":
+  version: 1.1.6
+  resolution: "object.values@npm:1.1.6"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-  checksum: 20ab42c0bbf984405c80e060114b18cf5d629a40a132c7eac4fb79c5d06deb97496311c19297dcf9c61f45c2539cd4c7f7c5d6230e51db360ff297bbc9910162
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: adea807c90951df34eb2f5c6a90ab5624e15c71f0b3a3e422db16933c9f4e19551d10649fffcb4adcac01d86d7c14a64bfb500d8f058db5a52976150a917f6eb
   languageName: node
   linkType: hard
 
@@ -26131,15 +26530,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"open@npm:^6.0.0":
-  version: 6.4.0
-  resolution: "open@npm:6.4.0"
-  dependencies:
-    is-wsl: "npm:^1.1.0"
-  checksum: 9b1cfda7a649f432c8bfa281796d28b5a49f7afcb470d9054ca94c7d0b1e8273432f55134dd953eb593ffce244de1b701ee89e6fe9c25ea8215eb1ca1ae8a1a9
-  languageName: node
-  linkType: hard
-
 "open@npm:^7.0.3, open@npm:^7.4.2":
   version: 7.4.2
   resolution: "open@npm:7.4.2"
@@ -26254,13 +26644,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"p-defer@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "p-defer@npm:1.0.0"
-  checksum: 1d8fb7138a0ccebb65479160fd93f245303c06c977c976105d75838f7f504a9a6ef11b7e058f98b4c957a6a8df268c616da1ee339285d565f9e5ba00304e027b
-  languageName: node
-  linkType: hard
-
 "p-each-series@npm:^2.1.0":
   version: 2.2.0
   resolution: "p-each-series@npm:2.2.0"
@@ -26565,7 +26948,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"param-case@npm:^3.0.3, param-case@npm:^3.0.4":
+"param-case@npm:^3.0.3":
   version: 3.0.4
   resolution: "param-case@npm:3.0.4"
   dependencies:
@@ -26584,7 +26967,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-asn1@npm:^5.0.0, parse-asn1@npm:^5.1.6":
+"parse-asn1@npm:^5.0.0, parse-asn1@npm:^5.1.5":
   version: 5.1.6
   resolution: "parse-asn1@npm:5.1.6"
   dependencies:
@@ -26666,7 +27049,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"parse-json@npm:^5.0.0, parse-json@npm:^5.2.0":
+"parse-json@npm:^5.0.0":
   version: 5.2.0
   resolution: "parse-json@npm:5.2.0"
   dependencies:
@@ -26832,13 +27215,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"path-browserify@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "path-browserify@npm:1.0.1"
-  checksum: 7e7368a5207e7c6b9051ef045711d0dc3c2b6203e96057e408e6e74d09f383061010d2be95cb8593fe6258a767c3e9fc6b2bfc7ce8d48ae8c3d9f6994cca9ad8
-  languageName: node
-  linkType: hard
-
 "path-dirname@npm:^1.0.0":
   version: 1.0.2
   resolution: "path-dirname@npm:1.0.2"
@@ -27134,27 +27510,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"playwright-core@npm:1.39.0":
-  version: 1.39.0
-  resolution: "playwright-core@npm:1.39.0"
+"playwright-core@npm:1.37.0":
+  version: 1.37.0
+  resolution: "playwright-core@npm:1.37.0"
   bin:
     playwright-core: cli.js
-  checksum: e4e01ddea024c7564bbfacdba5f545b004a4017b466af08ae90e5184da4f5bc61e74c96e37cc5e30b7d4f97341c0883cfb2038c8cfbfab65316d714f65b82d83
+  checksum: 7ef5ccfafea0580ed9ceb15a57816589a058e3cd66b3ad2b4a538c208a95568751decf86759ce2c6e04a68b4d94294bd6eb936972e5cbab481bfca5b3b4e6cdd
   languageName: node
   linkType: hard
 
 "playwright@npm:^1.0.0":
-  version: 1.39.0
-  resolution: "playwright@npm:1.39.0"
+  version: 1.37.0
+  resolution: "playwright@npm:1.37.0"
   dependencies:
-    fsevents: "npm:2.3.2"
-    playwright-core: "npm:1.39.0"
-  dependenciesMeta:
-    fsevents:
-      optional: true
+    playwright-core: "npm:1.37.0"
   bin:
     playwright: cli.js
-  checksum: 6f6b2f4381fccfbc560c4cd25e164f5093fec4e2046990587282e18618151d723b299b56c16741ce08e44a759c22e38c3e705b716d31238320e08e6ffcfa7319
+  checksum: a2bba3452226db565864c07f58eff81cd991aab6034806374b4bb70f9572f2ce22bc2984653e949df59d9021786a0d7c131180d87fea6ee141d763fa2c121e87
   languageName: node
   linkType: hard
 
@@ -27803,24 +28175,13 @@ __metadata:
   linkType: hard
 
 "postcss@npm:^8.2.10, postcss@npm:^8.2.15, postcss@npm:^8.3.11":
-  version: 8.4.31
-  resolution: "postcss@npm:8.4.31"
+  version: 8.4.27
+  resolution: "postcss@npm:8.4.27"
   dependencies:
     nanoid: "npm:^3.3.6"
     picocolors: "npm:^1.0.0"
     source-map-js: "npm:^1.0.2"
-  checksum: 1a6653e72105907377f9d4f2cd341d8d90e3fde823a5ddea1e2237aaa56933ea07853f0f2758c28892a1d70c53bbaca200eb8b80f8ed55f13093003dbec5afa0
-  languageName: node
-  linkType: hard
-
-"preact-render-to-string@npm:^5.1.19":
-  version: 5.2.6
-  resolution: "preact-render-to-string@npm:5.2.6"
-  dependencies:
-    pretty-format: "npm:^3.8.0"
-  peerDependencies:
-    preact: ">=10"
-  checksum: 356519f7640d1c49e11b4837b41a83b307f3f237f93de153b9dde833a701e3ce5cf1d45cb18e37a3ec9c568555e2f5373c128d8b5f6ef79de7658f3c400d3e70
+  checksum: 57143e3c5ddaba9813ebd81de3e38e3ac198b0a1634e57752d29cd4936f1301eba38e43bda1302859679af047a6efc4366952d294c64358f8b90fbf49ba7d121
   languageName: node
   linkType: hard
 
@@ -27882,16 +28243,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-error@npm:^4.0.0":
-  version: 4.0.0
-  resolution: "pretty-error@npm:4.0.0"
-  dependencies:
-    lodash: "npm:^4.17.20"
-    renderkid: "npm:^3.0.0"
-  checksum: 0212ad8742f8bb6f412f95b07d7f6874c55514ac4384f4f7de0defe77e767cca99f667c2316529f62a041fa654194a99c1ee7e321e1b7f794b5cc700777634d6
-  languageName: node
-  linkType: hard
-
 "pretty-format@npm:29.4.3":
   version: 29.4.3
   resolution: "pretty-format@npm:29.4.3"
@@ -27927,7 +28278,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^26.0.0, pretty-format@npm:^26.6.2":
+"pretty-format@npm:^26.6.2":
   version: 26.6.2
   resolution: "pretty-format@npm:26.6.2"
   dependencies:
@@ -27950,21 +28301,14 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^29.0.0, pretty-format@npm:^29.7.0":
-  version: 29.7.0
-  resolution: "pretty-format@npm:29.7.0"
+"pretty-format@npm:^29.0.0, pretty-format@npm:^29.6.2":
+  version: 29.6.2
+  resolution: "pretty-format@npm:29.6.2"
   dependencies:
-    "@jest/schemas": "npm:^29.6.3"
+    "@jest/schemas": "npm:^29.6.0"
     ansi-styles: "npm:^5.0.0"
     react-is: "npm:^18.0.0"
-  checksum: dea96bc83c83cd91b2bfc55757b6b2747edcaac45b568e46de29deee80742f17bc76fe8898135a70d904f4928eafd8bb693cd1da4896e8bdd3c5e82cadf1d2bb
-  languageName: node
-  linkType: hard
-
-"pretty-format@npm:^3.8.0":
-  version: 3.8.0
-  resolution: "pretty-format@npm:3.8.0"
-  checksum: c80009217dea7fc8f6006f644cbefc3ec57833c1f1f325158d83a5bcbc3ccc15d1e2cc658cd7d87b9c196a43f15d6d9125a2415c5ec4357882643534e25e9829
+  checksum: 5db1faf52552341e5026fd72f847d88116b08f758ef904f1635415b53ec2a193a0114fdede9f55a2c1174fa6eca896531f860db6f208c5698a52a5c354bb6f8d
   languageName: node
   linkType: hard
 
@@ -28103,29 +28447,27 @@ __metadata:
   linkType: hard
 
 "promise.allsettled@npm:^1.0.0":
-  version: 1.0.7
-  resolution: "promise.allsettled@npm:1.0.7"
+  version: 1.0.6
+  resolution: "promise.allsettled@npm:1.0.6"
   dependencies:
     array.prototype.map: "npm:^1.0.5"
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+    get-intrinsic: "npm:^1.1.3"
     iterate-value: "npm:^1.0.2"
-  checksum: 8d2ddf495543e4d184db3842a7251a812e4e1907688475c9a545ae9ae922b59c0dc83d97af9a084d99cc2ab20ee3254ee0b37803e0c39bca681fb633133d6bd8
+  checksum: 74e3871033d6fbe113f955c51fef8e3c5b56ec75f34eaacdf59cf5e90ee57e3bd219f813068619b0c10f51eeae79bfca86818a109e2c76ee6abf548f3f93bbc6
   languageName: node
   linkType: hard
 
 "promise.prototype.finally@npm:^3.1.0":
-  version: 3.1.7
-  resolution: "promise.prototype.finally@npm:3.1.7"
+  version: 3.1.4
+  resolution: "promise.prototype.finally@npm:3.1.4"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.1"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
-    set-function-name: "npm:^2.0.1"
-  checksum: 2f4391ba149a8242e4b3ac901c0690c481816850917bd0ec3ef63c71109c4888977f4e28d0e821573fa1e75f4fdc3345ebea224be914ec3cb0ea6e74f0c9dc15
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: e77cc63398f85232f8e9956b3435b1dc005cdebd26fe52390f15b0bd3db9429d4752ea8fe0b396e653368456a77c47b5e497bdc4ffbfa379f75b7f246e82e1bb
   languageName: node
   linkType: hard
 
@@ -28166,17 +28508,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"prop-types-exact@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "prop-types-exact@npm:1.2.0"
-  dependencies:
-    has: "npm:^1.0.3"
-    object.assign: "npm:^4.1.0"
-    reflect.ownkeys: "npm:^0.2.0"
-  checksum: 61ab29c0f27959e62ec37581e38fff2c3b99ae231df312997f6b00b205f53789802b44511cc824cad60cd17b9663731da8ca6c77025ea880fd38a26f7de5e714
-  languageName: node
-  linkType: hard
-
 "prop-types@npm:^15.0.0, prop-types@npm:^15.5.8, prop-types@npm:^15.6.0, prop-types@npm:^15.6.1, prop-types@npm:^15.6.2, prop-types@npm:^15.7.2, prop-types@npm:^15.8.1":
   version: 15.8.1
   resolution: "prop-types@npm:15.8.1"
@@ -28327,13 +28658,13 @@ __metadata:
   linkType: hard
 
 "punycode@npm:^2.1.0, punycode@npm:^2.1.1, punycode@npm:^2.3.0":
-  version: 2.3.1
-  resolution: "punycode@npm:2.3.1"
-  checksum: febdc4362bead22f9e2608ff0171713230b57aff9dddc1c273aa2a651fbd366f94b7d6a71d78342a7c0819906750351ca7f2edd26ea41b626d87d6a13d1bd059
+  version: 2.3.0
+  resolution: "punycode@npm:2.3.0"
+  checksum: d4e7fbb96f570c57d64b09a35a1182c879ac32833de7c6926a2c10619632c1377865af3dab5479f59d51da18bcd5035a20a5ef6ceb74020082a3e78025d9a9ca
   languageName: node
   linkType: hard
 
-"pupa@npm:^2.0.0, pupa@npm:^2.1.1":
+"pupa@npm:^2.1.1":
   version: 2.1.1
   resolution: "pupa@npm:2.1.1"
   dependencies:
@@ -28385,7 +28716,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"qs@npm:^6.10.0, qs@npm:^6.11.0, qs@npm:^6.11.2":
+"qs@npm:^6.10.0, qs@npm:^6.11.0":
   version: 6.11.2
   resolution: "qs@npm:6.11.2"
   dependencies:
@@ -28563,21 +28894,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-autosuggest@npm:^10.1.0":
-  version: 10.1.0
-  resolution: "react-autosuggest@npm:10.1.0"
-  dependencies:
-    es6-promise: "npm:^4.2.8"
-    prop-types: "npm:^15.7.2"
-    react-themeable: "npm:^1.1.0"
-    section-iterator: "npm:^2.0.0"
-    shallow-equal: "npm:^1.2.1"
-  peerDependencies:
-    react: ">=16.3.0"
-  checksum: 17b2121d568edd809216f6bbae35a63543694e1c0b32209a9a356e5400794ff275dfc18c53ae898a7df95ce5f9b8123e37e09bd7de6735a4cb47e1bd0890d8c5
-  languageName: node
-  linkType: hard
-
 "react-clientside-effect@npm:^1.2.6":
   version: 1.2.6
   resolution: "react-clientside-effect@npm:1.2.6"
@@ -28695,11 +29011,11 @@ __metadata:
   linkType: hard
 
 "react-focus-lock@npm:^2.1.0":
-  version: 2.9.6
-  resolution: "react-focus-lock@npm:2.9.6"
+  version: 2.9.5
+  resolution: "react-focus-lock@npm:2.9.5"
   dependencies:
     "@babel/runtime": "npm:^7.0.0"
-    focus-lock: "npm:^1.0.0"
+    focus-lock: "npm:^0.11.6"
     prop-types: "npm:^15.6.2"
     react-clientside-effect: "npm:^1.2.6"
     use-callback-ref: "npm:^1.3.0"
@@ -28710,7 +29026,7 @@ __metadata:
   peerDependenciesMeta:
     "@types/react":
       optional: true
-  checksum: 6aacb9779a5f73df2f4a9880b4d7a9cd004fd057e3031a928eb2c9e750885735987e3fec761c739f3d4d22258a2e79f1b5e13fae11a2bb157758a2048c0cf99b
+  checksum: 9af42872d7f3bd33c9eaa545a4e7974c7d91cee0bbd50598a41318f26723f280b59f776581581aae35401a5a276fa429bb9a04655406728f030b275c510a2c73
   languageName: node
   linkType: hard
 
@@ -28754,7 +29070,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:16.13.1, react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.4, react-is@npm:^16.8.6":
+"react-is@npm:16.13.1, react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.7.0, react-is@npm:^16.8.4":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
   checksum: 5aa564a1cde7d391ac980bedee21202fc90bdea3b399952117f54fb71a932af1e5902020144fb354b4690b2414a0c7aafe798eb617b76a3d441d956db7726fdf
@@ -28768,7 +29084,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^16.12.0 || ^17.0.0 || ^18.0.0, react-is@npm:^18.0.0":
+"react-is@npm:^18.0.0, react-is@npm:^18.2.0":
   version: 18.2.0
   resolution: "react-is@npm:18.2.0"
   checksum: 200cd65bf2e0be7ba6055f647091b725a45dd2a6abef03bf2380ce701fd5edccee40b49b9d15edab7ac08a762bf83cb4081e31ec2673a5bfb549a36ba21570df
@@ -28859,18 +29175,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-shallow-renderer@npm:^16.13.1":
-  version: 16.15.0
-  resolution: "react-shallow-renderer@npm:16.15.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^16.12.0 || ^17.0.0 || ^18.0.0"
-  peerDependencies:
-    react: ^16.0.0 || ^17.0.0 || ^18.0.0
-  checksum: 06457fe5bcaa44aeca998905b6849304742ea1cc2d3841e4a0964c745ff392bc4dec07f8c779f317faacce3a0bf6f84e15020ac0fa81adb931067dbb0baf707b
-  languageName: node
-  linkType: hard
-
 "react-sizeme@npm:^3.0.1":
   version: 3.0.2
   resolution: "react-sizeme@npm:3.0.2"
@@ -28913,34 +29217,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-test-renderer@npm:^16.0.0-0":
-  version: 16.14.0
-  resolution: "react-test-renderer@npm:16.14.0"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.6.2"
-    react-is: "npm:^16.8.6"
-    scheduler: "npm:^0.19.1"
-  peerDependencies:
-    react: ^16.14.0
-  checksum: 1a064a65c6073bb72376e8539e979836c52cd6629207163594078005e7bf68a4b35d9397a0ac04aa2a534a9f8f9eb2c2c3a5ff9d2dc8b67bafd6be7451dd1527
-  languageName: node
-  linkType: hard
-
-"react-test-renderer@npm:^16.8.0 || ^17.0.0":
-  version: 17.0.2
-  resolution: "react-test-renderer@npm:17.0.2"
-  dependencies:
-    object-assign: "npm:^4.1.1"
-    react-is: "npm:^17.0.2"
-    react-shallow-renderer: "npm:^16.13.1"
-    scheduler: "npm:^0.20.2"
-  peerDependencies:
-    react: 17.0.2
-  checksum: 8137f061880c296b0e8346a487370caf4f1da522a5d19edb00ae9b5834a39198e4e60adaa8e9426cdd7e123bdcb0bbd741abcf8832919c4c1a2234501db2b906
-  languageName: node
-  linkType: hard
-
 "react-textarea-autosize@npm:^7.1.0":
   version: 7.1.2
   resolution: "react-textarea-autosize@npm:7.1.2"
@@ -28953,15 +29229,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-themeable@npm:^1.1.0":
-  version: 1.1.0
-  resolution: "react-themeable@npm:1.1.0"
-  dependencies:
-    object-assign: "npm:^3.0.0"
-  checksum: 495a9262a72dbb25ddfa0e44bef7c78401c2fd265115553e8789ac2a72908f12d9a4109437be36bcae45d9dd4e932fef08e94ad232f01e68051cb607120094d7
-  languageName: node
-  linkType: hard
-
 "react-transition-group@npm:^4.3.0":
   version: 4.4.5
   resolution: "react-transition-group@npm:4.4.5"
@@ -29167,7 +29434,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"readable-stream@npm:2 || 3, readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.0.6, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0, readable-stream@npm:^3.6.2":
+"readable-stream@npm:2 || 3, readable-stream@npm:3, readable-stream@npm:^3.0.0, readable-stream@npm:^3.0.2, readable-stream@npm:^3.0.6, readable-stream@npm:^3.1.1, readable-stream@npm:^3.4.0, readable-stream@npm:^3.6.0":
   version: 3.6.2
   resolution: "readable-stream@npm:3.6.2"
   dependencies:
@@ -29351,27 +29618,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"reflect.getprototypeof@npm:^1.0.4":
-  version: 1.0.4
-  resolution: "reflect.getprototypeof@npm:1.0.4"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
-    globalthis: "npm:^1.0.3"
-    which-builtin-type: "npm:^1.1.3"
-  checksum: 52ff881f62a9cb4acdd7f9a8f4ac88234056c4a6b1ed570c249cc085de5c313249b90251d16eb8e58302b82ae697eec19dde16ff62949f6b87f035a3a26dc5df
-  languageName: node
-  linkType: hard
-
-"reflect.ownkeys@npm:^0.2.0":
-  version: 0.2.0
-  resolution: "reflect.ownkeys@npm:0.2.0"
-  checksum: 9530b166569e547c2cf25ade3cdc39c662212feeccf3e0ed46e6d8abf92f5683c82d7857011cee6230bf648eb0b99b6b419a007012b8571dcd4bb4d818d3b88d
-  languageName: node
-  linkType: hard
-
 "refractor@npm:^2.4.1":
   version: 2.10.1
   resolution: "refractor@npm:2.10.1"
@@ -29395,11 +29641,11 @@ __metadata:
   linkType: hard
 
 "regenerate-unicode-properties@npm:^10.1.0":
-  version: 10.1.1
-  resolution: "regenerate-unicode-properties@npm:10.1.1"
+  version: 10.1.0
+  resolution: "regenerate-unicode-properties@npm:10.1.0"
   dependencies:
     regenerate: "npm:^1.4.2"
-  checksum: b855152efdcca0ecc37ceb0cb6647a544344555fc293af3b57191b918e1bc9c95ee404a9a64a1d692bf66d45850942c29d93f2740c0d1980d3a8ea2ca63b184e
+  checksum: 25b268659898955ad105267b4efba20e361e27b233670694b683728a2800314bec3053918d3bf71b0604376fd76fe9bc9c6f80379cfb6d1e209a58de44101aac
   languageName: node
   linkType: hard
 
@@ -29424,7 +29670,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regenerator-runtime@npm:^0.13.7":
+"regenerator-runtime@npm:^0.13.11, regenerator-runtime@npm:^0.13.7":
   version: 0.13.11
   resolution: "regenerator-runtime@npm:0.13.11"
   checksum: d493e9e118abef5b099c78170834f18540c4933cedf9bfabc32d3af94abfb59a7907bd7950259cbab0a929ebca7db77301e8024e5121e6482a82f78283dfd20c
@@ -29457,6 +29703,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"regexp.prototype.flags@npm:^1.2.0, regexp.prototype.flags@npm:^1.4.3":
+  version: 1.5.0
+  resolution: "regexp.prototype.flags@npm:1.5.0"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.2.0"
+    functions-have-names: "npm:^1.2.3"
+  checksum: c8229ec3f59f8312248268009cb9bf9145a3982117f747499b994e8efb378ac8b62e812fd88df75225d53cb4879d2bb2fe47b2a50776cba076d8ff71fc0b1629
+  languageName: node
+  linkType: hard
+
 "regexp.prototype.flags@npm:^1.5.0, regexp.prototype.flags@npm:^1.5.1":
   version: 1.5.1
   resolution: "regexp.prototype.flags@npm:1.5.1"
@@ -29687,13 +29944,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"remove-accents@npm:^0.4.2":
-  version: 0.4.4
-  resolution: "remove-accents@npm:0.4.4"
-  checksum: 13d1b4086d3926928117d3253ede78f1bb1084f8897c7a60043b392a47663d5b3abd008bc854dc225d6f762dd5a5845acf15add1b02826f1e11de37862bad024
-  languageName: node
-  linkType: hard
-
 "remove-bom-buffer@npm:^3.0.0":
   version: 3.0.0
   resolution: "remove-bom-buffer@npm:3.0.0"
@@ -29735,19 +29985,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"renderkid@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "renderkid@npm:3.0.0"
-  dependencies:
-    css-select: "npm:^4.1.3"
-    dom-converter: "npm:^0.2.0"
-    htmlparser2: "npm:^6.1.0"
-    lodash: "npm:^4.17.21"
-    strip-ansi: "npm:^6.0.1"
-  checksum: 434bd56d9930dd344bcba3ef7683f3dd893396b6bc7e8caa551a4cacbe75a9466dc6cf3d75bc324a5979278a73ef968d7854f8f660dbf1a52c38a73f1fb59b20
-  languageName: node
-  linkType: hard
-
 "repeat-element@npm:^1.1.2":
   version: 1.1.4
   resolution: "repeat-element@npm:1.1.4"
@@ -29893,13 +30130,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"requestanimationframe@npm:^0.0.23":
-  version: 0.0.23
-  resolution: "requestanimationframe@npm:0.0.23"
-  checksum: 6d696bb4879281de8306922a91108b0abffd390c8b1903a8c5c40a20375abdb56979ea6fab93bb3ec82d0309a4c3f019b51cef96197c581e044536af9444d95c
-  languageName: node
-  linkType: hard
-
 "requestretry@npm:7.1.0":
   version: 7.1.0
   resolution: "requestretry@npm:7.1.0"
@@ -29924,17 +30154,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"require-context.macro@npm:^1.0.4":
-  version: 1.2.2
-  resolution: "require-context.macro@npm:1.2.2"
-  dependencies:
-    "@types/webpack-env": "npm:^1.14.0"
-  peerDependencies:
-    babel-plugin-macros: ^2.4.2
-  checksum: 0dcb2e59a225da19999504c6b6cc249aa1eec3b6c396de0f619981006b8abe13c20df65703eedb976f08047cc08e5ac4c212ebafdf46a46b617514ed83d30935
-  languageName: node
-  linkType: hard
-
 "require-dir@npm:^1.2.0":
   version: 1.2.0
   resolution: "require-dir@npm:1.2.0"
@@ -30095,16 +30314,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@npm:^2.0.0-next.4":
-  version: 2.0.0-next.5
-  resolution: "resolve@npm:2.0.0-next.5"
+"resolve@npm:^1.22.3":
+  version: 1.22.4
+  resolution: "resolve@npm:1.22.4"
   dependencies:
     is-core-module: "npm:^2.13.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 2d6fd28699f901744368e6f2032b4268b4c7b9185fd8beb64f68c93ac6b22e52ae13560ceefc96241a665b985edf9ffd393ae26d2946a7d3a07b7007b7d51e79
+  checksum: 5634f87e72888b139a7cb544213504cc0c6dcd82c6f67ce810b4ca6b3367ddb2aeed5f21c9bb6cd8f3115f0b7e6c0980ef25eeb0dcbd188d9590bb5c84d2d253
+  languageName: node
+  linkType: hard
+
+"resolve@npm:^2.0.0-next.4":
+  version: 2.0.0-next.4
+  resolution: "resolve@npm:2.0.0-next.4"
+  dependencies:
+    is-core-module: "npm:^2.9.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 20d5293f5015aa0b65c488ee365f9dfc30b954b04f9074425a6fb738d78fa63825a82ba8574b7ee200af7ebd5e98c41786831d1d4c1612da3cd063980dfa06a3
   languageName: node
   linkType: hard
 
@@ -30128,16 +30360,29 @@ __metadata:
   languageName: node
   linkType: hard
 
-"resolve@patch:resolve@npm%3A^2.0.0-next.4#optional!builtin<compat/resolve>":
-  version: 2.0.0-next.5
-  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.5#optional!builtin<compat/resolve>::version=2.0.0-next.5&hash=c3c19d"
+"resolve@patch:resolve@npm%3A^1.22.3#optional!builtin<compat/resolve>":
+  version: 1.22.4
+  resolution: "resolve@patch:resolve@npm%3A1.22.4#optional!builtin<compat/resolve>::version=1.22.4&hash=c3c19d"
   dependencies:
     is-core-module: "npm:^2.13.0"
     path-parse: "npm:^1.0.7"
     supports-preserve-symlinks-flag: "npm:^1.0.0"
   bin:
     resolve: bin/resolve
-  checksum: 05fa778de9d0347c8b889eb7a18f1f06bf0f801b0eb4610b4871a4b2f22e220900cf0ad525e94f990bb8d8921c07754ab2122c0c225ab4cdcea98f36e64fa4c2
+  checksum: 13262490c7b0ac54f6397f1d45ee139ebd2e431781e2ff0d9c27bf41648a349a90bc23a3ab2768f0f821efdd2cba08fb85f21288fc0cc01718c03557fbd285bc
+  languageName: node
+  linkType: hard
+
+"resolve@patch:resolve@npm%3A^2.0.0-next.4#optional!builtin<compat/resolve>":
+  version: 2.0.0-next.4
+  resolution: "resolve@patch:resolve@npm%3A2.0.0-next.4#optional!builtin<compat/resolve>::version=2.0.0-next.4&hash=c3c19d"
+  dependencies:
+    is-core-module: "npm:^2.9.0"
+    path-parse: "npm:^1.0.7"
+    supports-preserve-symlinks-flag: "npm:^1.0.0"
+  bin:
+    resolve: bin/resolve
+  checksum: 27bff19d8219385bb1e271066317e553cff18daa2a19db9598d94ae444417ef3f5aec19e86927872d6cb241d02649cfb35a4c0d9d10ef2afa6325bce8bc8d903
   languageName: node
   linkType: hard
 
@@ -30198,7 +30443,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rfdc@npm:^1.3.0":
+"rfdc@npm:^1.2.0, rfdc@npm:^1.3.0":
   version: 1.3.0
   resolution: "rfdc@npm:1.3.0"
   checksum: 76dedd9700cdf132947fde7ce1a8838c9cbb7f3e8f9188af0aaf97194cce745f42094dd2cf547426934cc83252ee2c0e432b2e0222a4415ab0db32de82665c69
@@ -30271,13 +30516,16 @@ __metadata:
   linkType: hard
 
 "roarr@npm:^7.0.4":
-  version: 7.18.3
-  resolution: "roarr@npm:7.18.3"
+  version: 7.15.1
+  resolution: "roarr@npm:7.15.1"
   dependencies:
+    boolean: "npm:^3.1.4"
+    fast-json-stringify: "npm:^5.8.0"
     fast-printf: "npm:^1.6.9"
+    globalthis: "npm:^1.0.2"
     safe-stable-stringify: "npm:^2.4.3"
     semver-compare: "npm:^1.0.0"
-  checksum: 88a75024c9a276eb10a09168bd579bc834b0c76092f61d3698fab4a23db14ddc7273d54fa06241636f16312769177045d165070887b4ca08e46c7af4811fbb23
+  checksum: 5f73043b499f760843d5d73b8bd72a128bc66165ab820eb3b8caa0d778dcd4dc4e9b0b17433547ba0b077a6d02dacd26a662178a29632269ac2bc8aecf00e343
   languageName: node
   linkType: hard
 
@@ -30318,15 +30566,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-scss@npm:^3.0.0":
-  version: 3.0.0
-  resolution: "rollup-plugin-scss@npm:3.0.0"
-  dependencies:
-    rollup-pluginutils: "npm:^2.3.3"
-  checksum: e7e603d05070ccb4712c037ed69967532e71ed75a10ffcd4e6dce7e3f1b3c505019ff56134cf319a0ed337adae848bf983e615975e6b5df7631d0af03bf0630b
-  languageName: node
-  linkType: hard
-
 "rollup-plugin-sizes@npm:^1.0.4":
   version: 1.0.5
   resolution: "rollup-plugin-sizes@npm:1.0.5"
@@ -30353,29 +30592,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"rollup-plugin-visualizer@npm:^2.5.4":
-  version: 2.7.2
-  resolution: "rollup-plugin-visualizer@npm:2.7.2"
-  dependencies:
-    mkdirp: "npm:^0.5.1"
-    open: "npm:^6.0.0"
-    pupa: "npm:^2.0.0"
-    source-map: "npm:^0.7.3"
-  peerDependencies:
-    rollup: ">=0.60.0"
-  checksum: e1382954dac5831eb343a4861efa661894bcb3c4bc143297eb998327404d72f118a370d543485e7658521e82ad46b05a16f979a91da76cb2e78c0473f05b27a1
-  languageName: node
-  linkType: hard
-
-"rollup-pluginutils@npm:^2.3.3":
-  version: 2.8.2
-  resolution: "rollup-pluginutils@npm:2.8.2"
-  dependencies:
-    estree-walker: "npm:^0.6.1"
-  checksum: f3dc20a8731523aff43e07fa50ed84857e9dd3ab81e2cfb0351d517c46820e585bfbd1530a5dddec3ac14d61d41eb9bf50b38ded987e558292790331cc5b0628
-  languageName: node
-  linkType: hard
-
 "rollup@npm:^2.55.1":
   version: 2.79.1
   resolution: "rollup@npm:2.79.1"
@@ -30519,7 +30735,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:^5.2.1, safe-buffer@npm:~5.2.0":
+"safe-buffer@npm:5.2.1, safe-buffer@npm:>=5.1.0, safe-buffer@npm:^5.0.1, safe-buffer@npm:^5.1.0, safe-buffer@npm:^5.1.1, safe-buffer@npm:^5.1.2, safe-buffer@npm:^5.2.0, safe-buffer@npm:~5.2.0":
   version: 5.2.1
   resolution: "safe-buffer@npm:5.2.1"
   checksum: 32872cd0ff68a3ddade7a7617b8f4c2ae8764d8b7d884c651b74457967a9e0e886267d3ecc781220629c44a865167b61c375d2da6c720c840ecd73f45d5d9451
@@ -30579,20 +30795,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass-graph@npm:^4.0.1":
-  version: 4.0.1
-  resolution: "sass-graph@npm:4.0.1"
-  dependencies:
-    glob: "npm:^7.0.0"
-    lodash: "npm:^4.17.11"
-    scss-tokenizer: "npm:^0.4.3"
-    yargs: "npm:^17.2.1"
-  bin:
-    sassgraph: bin/sassgraph
-  checksum: 896f99253bd77a429a95e483ebddee946e195b61d3f84b3e1ccf8ad843265ec0585fa40bf55fbf354c5f57eb9fd0349834a8b190cd2161ab1234cb9af10e3601
-  languageName: node
-  linkType: hard
-
 "sass-loader@npm:^10.0.0":
   version: 10.4.1
   resolution: "sass-loader@npm:10.4.1"
@@ -30618,7 +30820,44 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:~1.69.0":
+"sass-loader@npm:^13.0.0":
+  version: 13.3.2
+  resolution: "sass-loader@npm:13.3.2"
+  dependencies:
+    neo-async: "npm:^2.6.2"
+  peerDependencies:
+    fibers: ">= 3.1.0"
+    node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0
+    sass: ^1.3.0
+    sass-embedded: "*"
+    webpack: ^5.0.0
+  peerDependenciesMeta:
+    fibers:
+      optional: true
+    node-sass:
+      optional: true
+    sass:
+      optional: true
+    sass-embedded:
+      optional: true
+  checksum: 3486134c8813660772448bcd73e169fbe180fbaea0b825ec3e8fd1017de026e4e177e4b659a5b7d0f6c1b9f334ebe0134d91c60bd627d8ffff9b21018325a532
+  languageName: node
+  linkType: hard
+
+"sass@npm:^1.19.0":
+  version: 1.64.1
+  resolution: "sass@npm:1.64.1"
+  dependencies:
+    chokidar: "npm:>=3.0.0 <4.0.0"
+    immutable: "npm:^4.0.0"
+    source-map-js: "npm:>=0.6.2 <2.0.0"
+  bin:
+    sass: sass.js
+  checksum: 77da9edc7b6db33a8ff408ffa6ff02884465eae64ef6b2ba5caf29325ea6bdc88eb213ff0762bec79487c8b081d532199430f9db5808c0dee6814e0a4189d375
+  languageName: node
+  linkType: hard
+
+"sass@npm:~1.69.0, sass@npm:~1.69.5":
   version: 1.69.5
   resolution: "sass@npm:1.69.5"
   dependencies:
@@ -30631,7 +30870,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sax@npm:~1.2.1, sax@npm:~1.2.4":
+"sax@npm:~1.2.4":
   version: 1.2.4
   resolution: "sax@npm:1.2.4"
   checksum: 09b79ff6dc09689a24323352117c94593c69db348997b2af0edbd82fa08aba47d778055bf9616b57285bb73d25d790900c044bf631a8f10c8252412e3f3fe5dd
@@ -30750,23 +30989,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"scss-tokenizer@npm:^0.4.3":
-  version: 0.4.3
-  resolution: "scss-tokenizer@npm:0.4.3"
-  dependencies:
-    js-base64: "npm:^2.4.9"
-    source-map: "npm:^0.7.3"
-  checksum: d7f9eedaa4a3310b8a198b6267012db6c960e394138007d13f999032b32cb41517adad662ca2ad797bf56d55e97664a1d12991b39f95e42a1992a47f6f988b8b
-  languageName: node
-  linkType: hard
-
-"section-iterator@npm:^2.0.0":
-  version: 2.0.0
-  resolution: "section-iterator@npm:2.0.0"
-  checksum: f82f244f3beebf2954367a3448b3fc965d25301a7a327d77124cff945eb5175c202af89a6674d4d025b711ef10ccfb422819243a9258f3d21bfd3efc5e25e419
-  languageName: node
-  linkType: hard
-
 "seek-bzip@npm:^1.0.5":
   version: 1.0.6
   resolution: "seek-bzip@npm:1.0.6"
@@ -30794,12 +31016,11 @@ __metadata:
   linkType: hard
 
 "selfsigned@npm:^2.1.1":
-  version: 2.4.1
-  resolution: "selfsigned@npm:2.4.1"
+  version: 2.1.1
+  resolution: "selfsigned@npm:2.1.1"
   dependencies:
-    "@types/node-forge": "npm:^1.3.0"
     node-forge: "npm:^1"
-  checksum: 52536623f1cfdeb2f8b9198377f2ce7931c677ea69421238d1dc1ea2983bbe258e56c19e7d1af87035cad7270f19b7e996eaab1212e724d887722502f68e17f2
+  checksum: 6005206e0d005448274aceceaded5195b944f67a42b72d212a6169d2e5f4bdc87c15a3fe45732c544db8c7175702091aaf95403ad6632585294a6ec8cca63638
   languageName: node
   linkType: hard
 
@@ -30828,7 +31049,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.3.0, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.6.0, semver@npm:^5.7.0, semver@npm:^5.7.1":
+"semver@npm:2 || 3 || 4 || 5, semver@npm:^5.3.0, semver@npm:^5.4.1, semver@npm:^5.5.0, semver@npm:^5.6.0":
   version: 5.7.2
   resolution: "semver@npm:5.7.2"
   bin:
@@ -30837,6 +31058,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"semver@npm:7.3.4":
+  version: 7.3.4
+  resolution: "semver@npm:7.3.4"
+  dependencies:
+    lru-cache: "npm:^6.0.0"
+  bin:
+    semver: bin/semver.js
+  checksum: 64fb7172e328da80a46cf36c87ec0072feb218cb63b0d0ecebfaf1e35ee77580f6edc112a5f094fbaec8748d66b6e4cdc76809bdcbe4bac03cd31a690ef1a0f9
+  languageName: node
+  linkType: hard
+
 "semver@npm:7.3.7":
   version: 7.3.7
   resolution: "semver@npm:7.3.7"
@@ -31004,7 +31236,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"set-function-name@npm:^2.0.0, set-function-name@npm:^2.0.1":
+"set-function-name@npm:^2.0.0":
   version: 2.0.1
   resolution: "set-function-name@npm:2.0.1"
   dependencies:
@@ -31081,13 +31313,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shallow-equal@npm:^1.2.1":
-  version: 1.2.1
-  resolution: "shallow-equal@npm:1.2.1"
-  checksum: 4f1645cc516e7754c4438db687e1da439a5f29a7dba2ba90c5f88e5708aeb17bc4355ba45cad805b0e95dc898e37d8bf6d77d854919c7512f89939986cff8cd1
-  languageName: node
-  linkType: hard
-
 "shallowequal@npm:^1.1.0":
   version: 1.1.0
   resolution: "shallowequal@npm:1.1.0"
@@ -31127,7 +31352,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"shell-quote@npm:^1.8.1":
+"shell-quote@npm:^1.7.3":
   version: 1.8.1
   resolution: "shell-quote@npm:1.8.1"
   checksum: af19ab5a1ec30cb4b2f91fd6df49a7442d5c4825a2e269b3712eded10eedd7f9efeaab96d57829880733fc55bcdd8e9b1d8589b4befb06667c731d08145e274d
@@ -31180,17 +31405,16 @@ __metadata:
   linkType: hard
 
 "sigstore@npm:^1.0.0, sigstore@npm:^1.3.0, sigstore@npm:^1.4.0":
-  version: 1.9.0
-  resolution: "sigstore@npm:1.9.0"
+  version: 1.8.0
+  resolution: "sigstore@npm:1.8.0"
   dependencies:
-    "@sigstore/bundle": "npm:^1.1.0"
+    "@sigstore/bundle": "npm:^1.0.0"
     "@sigstore/protobuf-specs": "npm:^0.2.0"
-    "@sigstore/sign": "npm:^1.0.0"
     "@sigstore/tuf": "npm:^1.0.3"
     make-fetch-happen: "npm:^11.0.1"
   bin:
     sigstore: bin/sigstore.js
-  checksum: 7ff59f6bbc6fbf4e11f99df36562cdfd8f27f74650e1794942b0f9b567c6facdd0a6c245375111c464a0c367e617793a1c1787ec1dea9784ad2fb698932b9fb9
+  checksum: 4e42c4e8c2a8fcff8d398847e7e31af40fa9042bb83afe208b28f1776f534e7a191755253023c9965554a6d24c3ca872dabb9db8551fa819caf08702615123fe
   languageName: node
   linkType: hard
 
@@ -31320,9 +31544,9 @@ __metadata:
   linkType: hard
 
 "smob@npm:^1.0.0":
-  version: 1.4.1
-  resolution: "smob@npm:1.4.1"
-  checksum: bc6ffcb9a1c3c875f9354cf814487d44cd925e2917683e2bf6f66a267eedf895f4989079541b73dc0ddc163cb0fa26078fa95067f1503707758437e9308afc2f
+  version: 1.4.0
+  resolution: "smob@npm:1.4.0"
+  checksum: 5f3499eb5242fcc4df42bbc3caef324b8d38549008b4e96e5b00ed8bb5f6c94df9f22b41ae2d7fe13e1d6a7cd8b4d5620119c55ed0a63ec9abc67b05644ad15c
   languageName: node
   linkType: hard
 
@@ -31416,17 +31640,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"socks-proxy-agent@npm:^6.0.0":
-  version: 6.2.1
-  resolution: "socks-proxy-agent@npm:6.2.1"
-  dependencies:
-    agent-base: "npm:^6.0.2"
-    debug: "npm:^4.3.3"
-    socks: "npm:^2.6.2"
-  checksum: 554749ba3bdba0742ec36493a907261c116dd0dafcd618ea5babdfc90ce5a5ae648d4ee4d2e26e7184afd854973d282372ce0af63e1fc6412bb9fa1a2b1f2d45
-  languageName: node
-  linkType: hard
-
 "socks-proxy-agent@npm:^7.0.0":
   version: 7.0.0
   resolution: "socks-proxy-agent@npm:7.0.0"
@@ -31522,7 +31735,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"source-map@npm:^0.5.0, source-map@npm:^0.5.1, source-map@npm:^0.5.3, source-map@npm:^0.5.6, source-map@npm:^0.5.7, source-map@npm:~0.5.0":
+"source-map@npm:^0.5.0, source-map@npm:^0.5.1, source-map@npm:^0.5.6, source-map@npm:^0.5.7, source-map@npm:~0.5.0":
   version: 0.5.7
   resolution: "source-map@npm:0.5.7"
   checksum: 9b4ac749ec5b5831cad1f8cc4c19c4298ebc7474b24a0acf293e2f040f03f8eeccb3d01f12aa0f90cf46d555c887e03912b83a042c627f419bda5152d89c5269
@@ -31615,9 +31828,9 @@ __metadata:
   linkType: hard
 
 "spdx-license-ids@npm:^3.0.0":
-  version: 3.0.16
-  resolution: "spdx-license-ids@npm:3.0.16"
-  checksum: 6425c54132ca38d717315cdbd2b620235937d1859972c5978bbc95b4c14400438ffe113709d8aabb0d5498cc27a5b89876fca0fe21b4e26f5ce122bc86d0d88e
+  version: 3.0.13
+  resolution: "spdx-license-ids@npm:3.0.13"
+  checksum: 6328c516e958ceee80362dc657a58cab01c7fdb4667a1a4c1a3e91d069983977f87971340ee857eb66f65079b5d8561e56dc91510802cd7bebaae7632a6aa7fa
   languageName: node
   linkType: hard
 
@@ -31701,8 +31914,8 @@ __metadata:
   linkType: hard
 
 "sshpk@npm:^1.14.1, sshpk@npm:^1.7.0":
-  version: 1.18.0
-  resolution: "sshpk@npm:1.18.0"
+  version: 1.17.0
+  resolution: "sshpk@npm:1.17.0"
   dependencies:
     asn1: "npm:~0.2.3"
     assert-plus: "npm:^1.0.0"
@@ -31717,7 +31930,7 @@ __metadata:
     sshpk-conv: bin/sshpk-conv
     sshpk-sign: bin/sshpk-sign
     sshpk-verify: bin/sshpk-verify
-  checksum: 858339d43e3c6b6a848772a66f69442ce74f1a37655d9f35ba9d1f85329499ff0000af9f8ab83dbb39ad24c0c370edabe0be1e39863f70c6cded9924b8458c34
+  checksum: 668c2a279a6ce66fd739ce5684e37927dd75427cc020c828a208f85890a4c400705d4ba09f32fa44efca894339dc6931941664f6f6ba36dfa543de6d006cbe9c
   languageName: node
   linkType: hard
 
@@ -31731,11 +31944,11 @@ __metadata:
   linkType: hard
 
 "ssri@npm:^10.0.0, ssri@npm:^10.0.1":
-  version: 10.0.5
-  resolution: "ssri@npm:10.0.5"
+  version: 10.0.4
+  resolution: "ssri@npm:10.0.4"
   dependencies:
-    minipass: "npm:^7.0.3"
-  checksum: 453f9a1c241c13f5dfceca2ab7b4687bcff354c3ccbc932f35452687b9ef0ccf8983fd13b8a3baa5844c1a4882d6e3ddff48b0e7fd21d743809ef33b80616d79
+    minipass: "npm:^5.0.0"
+  checksum: 3f3dc4a0bbde19a67a4e7bdbef0c94ea92643a5f835565c09107f0c3696de9079f65742e641b449e978db69751ac6e85dfdc3f2c2abfe221d1c346d5b7ed077f
   languageName: node
   linkType: hard
 
@@ -31748,7 +31961,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ssri@npm:^8.0.0, ssri@npm:^8.0.1":
+"ssri@npm:^8.0.1":
   version: 8.0.1
   resolution: "ssri@npm:8.0.1"
   dependencies:
@@ -31827,15 +32040,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stdout-stream@npm:^1.4.0":
-  version: 1.4.1
-  resolution: "stdout-stream@npm:1.4.1"
-  dependencies:
-    readable-stream: "npm:^2.0.1"
-  checksum: 205bee8c3ba4e1e1d471b9302764405d2ee5dd272af6e9a71c95a9af6cf2ad8f4d102099a917c591ba9e14c1b2b5f5244f7a526e9d3cf311327cecd7c2bd4c2e
-  languageName: node
-  linkType: hard
-
 "stealthy-require@npm:^1.1.1":
   version: 1.1.1
   resolution: "stealthy-require@npm:1.1.1"
@@ -32004,41 +32208,40 @@ __metadata:
   linkType: hard
 
 "string.prototype.matchall@npm:^4.0.0 || ^3.0.1, string.prototype.matchall@npm:^4.0.8":
-  version: 4.0.10
-  resolution: "string.prototype.matchall@npm:4.0.10"
+  version: 4.0.8
+  resolution: "string.prototype.matchall@npm:4.0.8"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-    get-intrinsic: "npm:^1.2.1"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+    get-intrinsic: "npm:^1.1.3"
     has-symbols: "npm:^1.0.3"
-    internal-slot: "npm:^1.0.5"
-    regexp.prototype.flags: "npm:^1.5.0"
-    set-function-name: "npm:^2.0.0"
+    internal-slot: "npm:^1.0.3"
+    regexp.prototype.flags: "npm:^1.4.3"
     side-channel: "npm:^1.0.4"
-  checksum: 0f7a1a7f91790cd45f804039a16bc6389c8f4f25903e648caa3eea080b019a5c7b0cac2ca83976646140c2332b159042140bf389f23675609d869dd52450cddc
+  checksum: 9de2e9e33344002e08c03c13533d88d0c557d5a3d9214a4f2cc8d63349f7c35af895804dec08e43224cc4c0345651c678e14260c5933967fd97aad4640a7e485
   languageName: node
   linkType: hard
 
 "string.prototype.padend@npm:^3.0.0":
-  version: 3.1.5
-  resolution: "string.prototype.padend@npm:3.1.5"
+  version: 3.1.4
+  resolution: "string.prototype.padend@npm:3.1.4"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-  checksum: 03ea16c8c3bb25cb014affef2c238baa894b8a6060a5576c3980fe7e0e79e13af3b449f55eadd9e950669aa562ce9a7de8531cbd49b489f50f50e64f7167f8fd
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: 0625316ab60227a95d996205888bc906012c028adba052ff5044caf1ce1b127c8df512a13b17d1059c7c0139e319e251b1cfc91a4c5ebaab9432f90079dd2ea9
   languageName: node
   linkType: hard
 
 "string.prototype.padstart@npm:^3.0.0":
-  version: 3.1.5
-  resolution: "string.prototype.padstart@npm:3.1.5"
+  version: 3.1.4
+  resolution: "string.prototype.padstart@npm:3.1.4"
   dependencies:
     call-bind: "npm:^1.0.2"
-    define-properties: "npm:^1.2.0"
-    es-abstract: "npm:^1.22.1"
-  checksum: 54f2b4bdcc270448905cbac6255e373e1435cb670185d3a3fcb82dcb8af1be09e546f0ec8888920bf70e703a3592255a25cf9b6325173516458a3b469a9cb111
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: 9abc455bda34aa094f427e910eff11a1966bc5985f32b8c9902eea64bae393dc036241c1f261bcfeae6813396a82d6b7b1f33258ca3a95aa899fcefc51d0aee4
   languageName: node
   linkType: hard
 
@@ -32053,6 +32256,28 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.trim@npm:^1.2.7":
+  version: 1.2.7
+  resolution: "string.prototype.trim@npm:1.2.7"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: a1b795bdb4b4b7d9399e99771e8a36493a30cf18095b0e8b36bcb211aad42dc59186c9a833c774f7a70429dbd3862818133d7e0da1547a0e9f0e1ebddf995635
+  languageName: node
+  linkType: hard
+
+"string.prototype.trimend@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "string.prototype.trimend@npm:1.0.6"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: 3893db9267e0b8a16658c3947738536e90c400a9b7282de96925d4e210174cfe66c59d6b7eb5b4a9aaa78ef7f5e46afb117e842d93112fbd105c8d19206d8092
+  languageName: node
+  linkType: hard
+
 "string.prototype.trimend@npm:^1.0.7":
   version: 1.0.7
   resolution: "string.prototype.trimend@npm:1.0.7"
@@ -32064,6 +32289,17 @@ __metadata:
   languageName: node
   linkType: hard
 
+"string.prototype.trimstart@npm:^1.0.6":
+  version: 1.0.6
+  resolution: "string.prototype.trimstart@npm:1.0.6"
+  dependencies:
+    call-bind: "npm:^1.0.2"
+    define-properties: "npm:^1.1.4"
+    es-abstract: "npm:^1.20.4"
+  checksum: 05e2cd06fa5311b17f5b2c7af0a60239fa210f4bb07bbcfce4995215dce330e2b1dd2d8030d371f46252ab637522e14b6e9a78384e8515945b72654c14261d54
+  languageName: node
+  linkType: hard
+
 "string.prototype.trimstart@npm:^1.0.7":
   version: 1.0.7
   resolution: "string.prototype.trimstart@npm:1.0.7"
@@ -32510,23 +32746,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"svgo@npm:^0.7.2":
-  version: 0.7.2
-  resolution: "svgo@npm:0.7.2"
-  dependencies:
-    coa: "npm:~1.0.1"
-    colors: "npm:~1.1.2"
-    csso: "npm:~2.3.1"
-    js-yaml: "npm:~3.7.0"
-    mkdirp: "npm:~0.5.1"
-    sax: "npm:~1.2.1"
-    whet.extend: "npm:~0.9.9"
-  bin:
-    svgo: ./bin/svgo
-  checksum: 5879b4312072684d30f0c66b6542fb27b440ab50c1d79642c8b50fecd065fe1701b82a21ec31a809a20a54240bc2100317ff3ba5d482dda46fe2ef9dd28b8474
-  languageName: node
-  linkType: hard
-
 "svgo@npm:^1.3.0":
   version: 1.3.2
   resolution: "svgo@npm:1.3.2"
@@ -32632,7 +32851,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tapable@npm:^2.0.0, tapable@npm:^2.1.1, tapable@npm:^2.2.0":
+"tapable@npm:^2.1.1, tapable@npm:^2.2.0":
   version: 2.2.1
   resolution: "tapable@npm:2.2.1"
   checksum: 1769336dd21481ae6347611ca5fca47add0962fd8e80466515032125eca0084a4f0ede11e65341b9c0018ef4e1cf1ad820adbb0fba7cc99865c6005734000b0a
@@ -32694,8 +32913,8 @@ __metadata:
   linkType: hard
 
 "tar@npm:^6.0.2, tar@npm:^6.1.11, tar@npm:^6.1.2":
-  version: 6.2.0
-  resolution: "tar@npm:6.2.0"
+  version: 6.1.15
+  resolution: "tar@npm:6.1.15"
   dependencies:
     chownr: "npm:^2.0.0"
     fs-minipass: "npm:^2.0.0"
@@ -32703,7 +32922,7 @@ __metadata:
     minizlib: "npm:^2.1.1"
     mkdirp: "npm:^1.0.3"
     yallist: "npm:^4.0.0"
-  checksum: 2042bbb14830b5cd0d584007db0eb0a7e933e66d1397e72a4293768d2332449bc3e312c266a0887ec20156dea388d8965e53b4fc5097f42d78593549016da089
+  checksum: 4848b92da8581e64ce4d8a760b47468dd9d212a4612846d8dd75b5c224a42c66ed5bcf8cfa9e9cd2eb64ebe1351413fb3eac93324a4eee536f0941beefa1f2eb
   languageName: node
   linkType: hard
 
@@ -32829,7 +33048,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser-webpack-plugin@npm:^5.0.3, terser-webpack-plugin@npm:^5.3.7":
+"terser-webpack-plugin@npm:^5.3.7":
   version: 5.3.9
   resolution: "terser-webpack-plugin@npm:5.3.9"
   dependencies:
@@ -32864,9 +33083,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"terser@npm:^5.0.0, terser@npm:^5.10.0, terser@npm:^5.16.8, terser@npm:^5.17.4, terser@npm:^5.3.4":
-  version: 5.24.0
-  resolution: "terser@npm:5.24.0"
+"terser@npm:^5.0.0, terser@npm:^5.16.8, terser@npm:^5.17.4, terser@npm:^5.3.4":
+  version: 5.19.2
+  resolution: "terser@npm:5.19.2"
   dependencies:
     "@jridgewell/source-map": "npm:^0.3.3"
     acorn: "npm:^8.8.2"
@@ -32874,7 +33093,7 @@ __metadata:
     source-map-support: "npm:~0.5.20"
   bin:
     terser: bin/terser
-  checksum: bd7ba6bfef58f8c179592894923c8c933d980e17287d3f2a9927550be853d1601beebb724cf015929599b32945641c44f9c3db8dd242c7933af3830bcb853510
+  checksum: da441c9e0e630d26ca74d7f9659cc78f4afb698cebdb93cb5142565ba3f625bdf9a7b4f4bd94dabd5a2344732fde850d607e6f7eed04275754578d531f917382
   languageName: node
   linkType: hard
 
@@ -33245,13 +33464,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"traverse@npm:0.6.6":
-  version: 0.6.6
-  resolution: "traverse@npm:0.6.6"
-  checksum: 8c300c9d15aa6149d6086eedd5f42475a4bfd942de1ac54ef8acc7026c970943d207a4b1d92ebdf86a73a030be11367ec50d307dddf5296df8d615199210bc01
-  languageName: node
-  linkType: hard
-
 "traverse@npm:^0.6.7":
   version: 0.6.7
   resolution: "traverse@npm:0.6.7"
@@ -33317,13 +33529,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"true-case-path@npm:^2.2.1":
-  version: 2.2.1
-  resolution: "true-case-path@npm:2.2.1"
-  checksum: 8c6ddd8dab044012a7bb1bed0b31cbb8f9924e903e996f7378d9b86113cde29251e684075203490d4dca2a199ef401ba89228c602bc5e2a3e4550446e8ae1ccf
-  languageName: node
-  linkType: hard
-
 "ts-dedent@npm:^1.1.0":
   version: 1.2.0
   resolution: "ts-dedent@npm:1.2.0"
@@ -33450,6 +33655,13 @@ __metadata:
   linkType: hard
 
 "tslib@npm:^2.0.0, tslib@npm:^2.0.1, tslib@npm:^2.0.3, tslib@npm:^2.1.0, tslib@npm:^2.3.0, tslib@npm:^2.4.0":
+  version: 2.6.1
+  resolution: "tslib@npm:2.6.1"
+  checksum: 5cf1aa7ea4ca7ee9b8aa3d80eb7ee86634b307fbefcb948a831c2b13728e21e156ef7fb9edcbe21f05c08f65e4cf4480587086f31133491ba1a49c9e0b28fc75
+  languageName: node
+  linkType: hard
+
+"tslib@npm:^2.6.2":
   version: 2.6.2
   resolution: "tslib@npm:2.6.2"
   checksum: bd26c22d36736513980091a1e356378e8b662ded04204453d353a7f34a4c21ed0afc59b5f90719d4ba756e581a162ecbf93118dc9c6be5acf70aa309188166ca
@@ -33756,9 +33968,9 @@ __metadata:
   linkType: hard
 
 "ua-parser-js@npm:^0.7.30":
-  version: 0.7.37
-  resolution: "ua-parser-js@npm:0.7.37"
-  checksum: a50e8f7ee5618822670443b05e33ab184e3186d3f88c4761cdf65cf264219c626b74ee6cf96146091d9738c61412afe2788eeda75ef98f71a69a81495abe20ff
+  version: 0.7.35
+  resolution: "ua-parser-js@npm:0.7.35"
+  checksum: b6e99dc17599b04f2cd03c4de13593d8b300181402b65c95deeca6a507b96aef519e1d63fb8269af1532182ef41e61f0aca3dbae0f4add44521b5b836ccccc74
   languageName: node
   linkType: hard
 
@@ -33851,22 +34063,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"undici-types@npm:~5.26.4":
-  version: 5.26.5
-  resolution: "undici-types@npm:5.26.5"
-  checksum: 0097779d94bc0fd26f0418b3a05472410408877279141ded2bd449167be1aed7ea5b76f756562cb3586a07f251b90799bab22d9019ceba49c037c76445f7cddd
-  languageName: node
-  linkType: hard
-
-"undici@npm:^5.25.4":
-  version: 5.27.2
-  resolution: "undici@npm:5.27.2"
-  dependencies:
-    "@fastify/busboy": "npm:^2.0.0"
-  checksum: 2bf96b102fb84568fb235bdf6e1e352e5d2bf99566b243cd1b13b41578bf9dd5c7c3d3d82192b20a3fec61fe7a528f9d80cd5b4555ce65405c06c69b023013de
-  languageName: node
-  linkType: hard
-
 "unfetch@npm:^4.2.0":
   version: 4.2.0
   resolution: "unfetch@npm:4.2.0"
@@ -34169,9 +34365,9 @@ __metadata:
   linkType: hard
 
 "universal-user-agent@npm:^6.0.0":
-  version: 6.0.1
-  resolution: "universal-user-agent@npm:6.0.1"
-  checksum: fdc8e1ae48a05decfc7ded09b62071f571c7fe0bd793d700704c80cea316101d4eac15cc27ed2bb64f4ce166d2684777c3198b9ab16034f547abea0d3aa1c93c
+  version: 6.0.0
+  resolution: "universal-user-agent@npm:6.0.0"
+  checksum: 5092bbc80dd0d583cef0b62c17df0043193b74f425112ea6c1f69bc5eda21eeec7a08d8c4f793a277eb2202ffe9b44bec852fa3faff971234cd209874d1b79ef
   languageName: node
   linkType: hard
 
@@ -34190,9 +34386,9 @@ __metadata:
   linkType: hard
 
 "universalify@npm:^2.0.0":
-  version: 2.0.1
-  resolution: "universalify@npm:2.0.1"
-  checksum: ecd8469fe0db28e7de9e5289d32bd1b6ba8f7183db34f3bfc4ca53c49891c2d6aa05f3fb3936a81285a905cc509fb641a0c3fc131ec786167eff41236ae32e60
+  version: 2.0.0
+  resolution: "universalify@npm:2.0.0"
+  checksum: 2406a4edf4a8830aa6813278bab1f953a8e40f2f63a37873ffa9a3bc8f9745d06cc8e88f3572cb899b7e509013f7f6fcc3e37e8a6d914167a5381d8440518c44
   languageName: node
   linkType: hard
 
@@ -34353,12 +34549,12 @@ __metadata:
   linkType: hard
 
 "url@npm:^0.11.0":
-  version: 0.11.3
-  resolution: "url@npm:0.11.3"
+  version: 0.11.1
+  resolution: "url@npm:0.11.1"
   dependencies:
     punycode: "npm:^1.4.1"
-    qs: "npm:^6.11.2"
-  checksum: a3a5ba64d8afb4dda111355d94073a9754b88b1de4035554c398b75f3e4d4244d5e7ae9e4554f0d91be72efd416aedbb646fbb1f3dd4cacecca45ed6c9b75145
+    qs: "npm:^6.11.0"
+  checksum: 27131c0e3fbf597b06f47ba90889e3c56af262e85ea19f5236c3bccce6344479698a476726552887c9274c8b3409131c0ebc23b1a43f2f26820bfeb03afc3f8e
   languageName: node
   linkType: hard
 
@@ -34465,7 +34661,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"util@npm:^0.10.3, util@npm:^0.10.4":
+"util@npm:0.10.3":
+  version: 0.10.3
+  resolution: "util@npm:0.10.3"
+  dependencies:
+    inherits: "npm:2.0.1"
+  checksum: 648120d93dbbd82e677cda9af564a8cc95b93f3b488355f67f02ba27c15cca17b89f2a465b576c38ce8b9f542d5041cae23277be7e30ee6fbf819610d645efb5
+  languageName: node
+  linkType: hard
+
+"util@npm:^0.10.3":
   version: 0.10.4
   resolution: "util@npm:0.10.4"
   dependencies:
@@ -34555,13 +34760,13 @@ __metadata:
   linkType: hard
 
 "v8-to-istanbul@npm:^9.0.0":
-  version: 9.1.3
-  resolution: "v8-to-istanbul@npm:9.1.3"
+  version: 9.1.0
+  resolution: "v8-to-istanbul@npm:9.1.0"
   dependencies:
     "@jridgewell/trace-mapping": "npm:^0.3.12"
     "@types/istanbul-lib-coverage": "npm:^2.0.1"
-    convert-source-map: "npm:^2.0.0"
-  checksum: d6ce9f6d97c53a401098fe42018f32be81c99830bcf44ee2717332e20a7df3e364a3f322c10dab4ea94488e81dde462295149cdfb44f48e8ef2829e3afd09752
+    convert-source-map: "npm:^1.6.0"
+  checksum: 95811ff2f17a31432c3fc7b3027b7e8c2c6ca5e60a7811c5050ce51920ab2b80df29feb04c52235bbfdaa9a6809acd5a5dd9668292e98c708617c19e087c3f68
   languageName: node
   linkType: hard
 
@@ -35011,22 +35216,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-dev-middleware@npm:^4.1.0":
-  version: 4.3.0
-  resolution: "webpack-dev-middleware@npm:4.3.0"
-  dependencies:
-    colorette: "npm:^1.2.2"
-    mem: "npm:^8.1.1"
-    memfs: "npm:^3.2.2"
-    mime-types: "npm:^2.1.30"
-    range-parser: "npm:^1.2.1"
-    schema-utils: "npm:^3.0.0"
-  peerDependencies:
-    webpack: ^4.0.0 || ^5.0.0
-  checksum: 5ec29f66a87d9daf2434292ee948e1ab288b2e9bf1307c2e82677ca332586a55192966f17a2ff0e614f05544f1832cc786239e9eda0e92333617674e8fc7ec1f
-  languageName: node
-  linkType: hard
-
 "webpack-dev-middleware@npm:^5.3.1":
   version: 5.3.3
   resolution: "webpack-dev-middleware@npm:5.3.3"
@@ -35145,16 +35334,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"webpack-virtual-modules@npm:^0.4.1":
-  version: 0.4.6
-  resolution: "webpack-virtual-modules@npm:0.4.6"
-  checksum: b867f62197e5219abfb490e885f2a387aa4c28b9e5aa718203726ece9f75bfd92e8f520d3e084b3ab79d3e392b3df544d66c9cf592a41827c8618e0072cc74ce
-  languageName: node
-  linkType: hard
-
 "webpack@npm:4, webpack@npm:^4.46.0":
-  version: 4.47.0
-  resolution: "webpack@npm:4.47.0"
+  version: 4.46.0
+  resolution: "webpack@npm:4.46.0"
   dependencies:
     "@webassemblyjs/ast": "npm:1.9.0"
     "@webassemblyjs/helper-module-context": "npm:1.9.0"
@@ -35186,11 +35368,11 @@ __metadata:
       optional: true
   bin:
     webpack: bin/webpack.js
-  checksum: d5763ee8d63a3c6712159e19e9439156b00ef3e33f728384a7a7ebe070be80322bf5b3fe4b131afd7b6da5053869270a9aee68e2822ec40461a1ce9d92076931
+  checksum: a4193e10860df1ef1e38be38e0da15157b23c980b5642f6e1f7f605885ff92e4c7f45175260286060f9721d63cc77034a88d9742c52ed1338c3761fc2a407fec
   languageName: node
   linkType: hard
 
-"webpack@npm:>=4.43.0 <6.0.0, webpack@npm:^5.9.0":
+"webpack@npm:>=4.43.0 <6.0.0":
   version: 5.89.0
   resolution: "webpack@npm:5.89.0"
   dependencies:
@@ -35333,13 +35515,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"whet.extend@npm:~0.9.9":
-  version: 0.9.9
-  resolution: "whet.extend@npm:0.9.9"
-  checksum: 8ef023c64353fa1b844ed447abe78f64ad520e1e937dd5f06edadefece4c8441c90256da963998a146b530985b6c9722aa3fa5a8bc07399e573703b1433162e9
-  languageName: node
-  linkType: hard
-
 "which-boxed-primitive@npm:^1.0.2":
   version: 1.0.2
   resolution: "which-boxed-primitive@npm:1.0.2"
@@ -35353,38 +35528,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-builtin-type@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "which-builtin-type@npm:1.1.3"
-  dependencies:
-    function.prototype.name: "npm:^1.1.5"
-    has-tostringtag: "npm:^1.0.0"
-    is-async-function: "npm:^2.0.0"
-    is-date-object: "npm:^1.0.5"
-    is-finalizationregistry: "npm:^1.0.2"
-    is-generator-function: "npm:^1.0.10"
-    is-regex: "npm:^1.1.4"
-    is-weakref: "npm:^1.0.2"
-    isarray: "npm:^2.0.5"
-    which-boxed-primitive: "npm:^1.0.2"
-    which-collection: "npm:^1.0.1"
-    which-typed-array: "npm:^1.1.9"
-  checksum: d7823c4a6aa4fc8183eb572edd9f9ee2751e5f3ba2ccd5b298cc163f720df0f02ee1a5291d18ca8a41d48144ef40007ff6a64e6f5e7c506527086c7513a5f673
-  languageName: node
-  linkType: hard
-
-"which-collection@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "which-collection@npm:1.0.1"
-  dependencies:
-    is-map: "npm:^2.0.1"
-    is-set: "npm:^2.0.1"
-    is-weakmap: "npm:^2.0.1"
-    is-weakset: "npm:^2.0.1"
-  checksum: 85c95fcf92df7972ce66bed879e53d9dc752a30ef08e1ca4696df56bcf1c302e3b9965a39b04a20fa280a997fad6c170eb0b4d62435569b7f6c0bc7be910572b
-  languageName: node
-  linkType: hard
-
 "which-module@npm:^1.0.0":
   version: 1.0.0
   resolution: "which-module@npm:1.0.0"
@@ -35399,7 +35542,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.9":
+"which-typed-array@npm:^1.1.10":
+  version: 1.1.11
+  resolution: "which-typed-array@npm:1.1.11"
+  dependencies:
+    available-typed-arrays: "npm:^1.0.5"
+    call-bind: "npm:^1.0.2"
+    for-each: "npm:^0.3.3"
+    gopd: "npm:^1.0.1"
+    has-tostringtag: "npm:^1.0.0"
+  checksum: bc9e8690e71d6c64893c9d88a7daca33af45918861003013faf77574a6a49cc6194d32ca7826e90de341d2f9ef3ac9e3acbe332a8ae73cadf07f59b9c6c6ecad
+  languageName: node
+  linkType: hard
+
+"which-typed-array@npm:^1.1.11, which-typed-array@npm:^1.1.13":
   version: 1.1.13
   resolution: "which-typed-array@npm:1.1.13"
   dependencies:
@@ -35730,8 +35886,8 @@ __metadata:
   linkType: hard
 
 "ws@npm:^8.0.0, ws@npm:^8.13.0, ws@npm:^8.2.3":
-  version: 8.14.2
-  resolution: "ws@npm:8.14.2"
+  version: 8.13.0
+  resolution: "ws@npm:8.13.0"
   peerDependencies:
     bufferutil: ^4.0.1
     utf-8-validate: ">=5.0.2"
@@ -35740,7 +35896,7 @@ __metadata:
       optional: true
     utf-8-validate:
       optional: true
-  checksum: 815ff01d9bc20a249b2228825d9739268a03a4408c2e0b14d49b0e2ae89d7f10847e813b587ba26992bdc33e9d03bed131e4cae73ff996baf789d53e99c31186
+  checksum: 1769532b6fdab9ff659f0b17810e7501831d34ecca23fd179ee64091dd93a51f42c59f6c7bb4c7a384b6c229aca8076fb312aa35626257c18081511ef62a161d
   languageName: node
   linkType: hard
 
@@ -36041,7 +36197,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"yargs@npm:^17.0.0, yargs@npm:^17.2.1, yargs@npm:^17.6.2":
+"yargs@npm:^17.0.0, yargs@npm:^17.6.2":
   version: 17.7.2
   resolution: "yargs@npm:17.7.2"
   dependencies:
@@ -36102,13 +36258,13 @@ __metadata:
   linkType: hard
 
 "zip-stream@npm:^4.1.0":
-  version: 4.1.1
-  resolution: "zip-stream@npm:4.1.1"
+  version: 4.1.0
+  resolution: "zip-stream@npm:4.1.0"
   dependencies:
-    archiver-utils: "npm:^3.0.4"
-    compress-commons: "npm:^4.1.2"
+    archiver-utils: "npm:^2.1.0"
+    compress-commons: "npm:^4.1.0"
     readable-stream: "npm:^3.6.0"
-  checksum: 33bd5ee7017656c2ad728b5d4ba510e15bd65ce1ec180c5bbdc7a5f063256353ec482e6a2bc74de7515219d8494147924b9aae16e63fdaaf37cdf7d1ee8df125
+  checksum: 4a73da856738b0634700b52f4ab3fe0bf0a532bea6820ad962d0bda0163d2d5525df4859f89a7238e204a378384e12551985049790c1894c3ac191866e85887f
   languageName: node
   linkType: hard